body {
  font-family: 'Almarai' !important;
}
.colorTurquoiseBg {
  background-color: #28afb0 !important;
  color: #f9fafe !important;

  border-color: #28afb0;
}

.colorTurquoise {
  color: #28afb0 !important;

}

.btnNavy {
  background-color: #282a73 !important;
  color:#fff;
  text-decoration: none !important;
}

.btnNavy:hover {
  background-color: #0a0a1d !important;
  box-shadow:
  5px 0 5px rgba(0, 0, 0, 0.04),
  /* Right shadow */
  -5px 0 5px rgba(0, 0, 0, 0.04),
  /* Left shadow */
  0 5px 5px rgba(0, 0, 0, 0.04),
  /* Bottom shadow */
  0 -5px 5px rgba(0, 0, 0, 0.04);
/* Top shadow */
color:#fff;
text-decoration: none !important;

}

.btnNavy:focus {
  background-color: #0a0a1d !important;
  box-shadow:
    5px 0 5px rgba(0, 0, 0, 0.04),
    /* Right shadow */
    -5px 0 5px rgba(0, 0, 0, 0.04),
    /* Left shadow */
    0 5px 5px rgba(0, 0, 0, 0.04),
    /* Bottom shadow */
    0 -5px 5px rgba(0, 0, 0, 0.04);
  /* Top shadow */
  color:#fff;
  text-decoration: none !important;
 
}

.btnNavy:active {
  background-color: #0a0a1d !important;
  box-shadow:
  5px 0 5px rgba(0, 0, 0, 0.04),
  /* Right shadow */
  -5px 0 5px rgba(0, 0, 0, 0.04),
  /* Left shadow */
  0 5px 5px rgba(0, 0, 0, 0.04),
  /* Bottom shadow */
  0 -5px 5px rgba(0, 0, 0, 0.04);
/* Top shadow */
color:#fff;
text-decoration: none !important;

}



.btnTarquoise {
  background-color: #28afb0 !important;
  color:#fff;
  text-decoration: none !important;
}

.btnTarquoise:hover {
  background-color: #1e8383 !important;
  box-shadow:
  5px 0 5px rgba(0, 0, 0, 0.04),
  /* Right shadow */
  -5px 0 5px rgba(0, 0, 0, 0.04),
  /* Left shadow */
  0 5px 5px rgba(0, 0, 0, 0.04),
  /* Bottom shadow */
  0 -5px 5px rgba(0, 0, 0, 0.04);
/* Top shadow */
color:#fff;
text-decoration: none !important;

}

.btnTarquoise:focus {
  background-color: #1e8383 !important;
  box-shadow:
  5px 0 5px rgba(0, 0, 0, 0.04),
  /* Right shadow */
  -5px 0 5px rgba(0, 0, 0, 0.04),
  /* Left shadow */
  0 5px 5px rgba(0, 0, 0, 0.04),
  /* Bottom shadow */
  0 -5px 5px rgba(0, 0, 0, 0.04);
/* Top shadow */
color:#fff;
text-decoration: none !important;

}

.btnTarquoise:active {
  background-color: #1e8383 !important;
  box-shadow:
  5px 0 5px rgba(0, 0, 0, 0.04),
  /* Right shadow */
  -5px 0 5px rgba(0, 0, 0, 0.04),
  /* Left shadow */
  0 5px 5px rgba(0, 0, 0, 0.04),
  /* Bottom shadow */
  0 -5px 5px rgba(0, 0, 0, 0.04);
/* Top shadow */
color:#fff;
text-decoration: none !important;

}


/* ------------------------------------------------ */
.colorNavyBg {
  background: #282a73 !important;
  color: #f9fafe !important;
}




/* ------------------------------------------------ */
.borderRadius:hover,
.borderRadius:focus,
.borderRadius:active {

  box-shadow:
    5px 0 5px rgba(0, 0, 0, 0.04),
    /* Right shadow */
    -5px 0 5px rgba(0, 0, 0, 0.04),
    /* Left shadow */
    0 5px 5px rgba(0, 0, 0, 0.04),
    /* Bottom shadow */
    0 -5px 5px rgba(0, 0, 0, 0.04);
  /* Top shadow */
  border-radius: 100px;


}


.colorText {
  color: #f9fafe !important;
  text-decoration: none !important;

}

/* ------------------------------------------------ */
.colorTextNavy {
  color: #26262d !important;
  text-decoration: none !important;
}

/* ------------------------------------------------ */

.colorbg1 {
  background: #fff !important;
}

/* ------------------------------------------------ */
.colorbg2 {
  background: #dde5fe !important;

}

/* ------------------------------------------------ */

.colorbg4 {
  background: #fafbff !important;

}

.colorbg5 {
  background: #87879e !important;
  color: #fafbff !important;

}


/* ------------------------------------------------ */
.colorbg3 {
  background: #282a73 !important;
  color: #9c9cb7 !important;
  text-decoration: none !important;
}

/* ------------------------------------------------ */

.fontSize {
  font-size: 12px;
}

/* ------------------------------------------------ */
.paddingRightLeft30 {
  padding-right: 30px;
  padding-left: 30px;
}

.paddingRightLeft10 {
  padding-right: 14px !important;
  padding-left: 14px !important;
}

.paddingControlPage {
  padding-right: 14px !important;
  padding-left: 14px !important;
}

/* ------------------------------------------------ */

.shadowContainer {
  padding: 20px;
  border-radius: 10px;
  box-shadow:
    5px 0 5px rgba(0, 0, 0, 0.04),
    /* Right shadow */
    -5px 0 5px rgba(0, 0, 0, 0.04),
    /* Left shadow */
    0 5px 5px rgba(0, 0, 0, 0.04),
    /* Bottom shadow */
    0 -5px 5px rgba(0, 0, 0, 0.04);
  /* Top shadow */
  background-color: #f5f5ff !important;

}

.shadowInput {
  border-radius: 2px !important;
  box-shadow: inset 1px 1px 2px #BABECC,
    inset -1px -1px 2px #ffffff73;
  border: none !important;

}

.shadowGeneralOustide {
  box-shadow:
    5px 5px 5px rgba(0, 0, 0, 0.02),
    -5px -5px 5px rgba(0, 0, 0, 0.02),
    -5px 5px 5px rgba(0, 0, 0, 0.02),
    5px -5px 5px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  padding: 20px;

}

.shadowOnly {
  box-shadow:
    5px 5px 5px rgba(0, 0, 0, 0.02),
    -5px -5px 5px rgba(0, 0, 0, 0.02),
    -5px 5px 5px rgba(0, 0, 0, 0.02),
    5px -5px 5px rgba(0, 0, 0, 0.02);


}

.shadowGeneralInside {
  box-shadow:
    inset 5px 5px 5px -5px rgba(0, 0, 0, 0.1),
    inset -5px -5px 5px -5px rgba(0, 0, 0, 0.1),
    inset -5px 5px 5px -5px rgba(0, 0, 0, 0.1),
    inset 5px -5px 5px -5px rgba(0, 0, 0, 0.1);

  border-radius: 5px;
  padding: 20px;
}

.shadowInput:focus {
  border-radius: 3px !important;
  box-shadow: inset 1px 1px 2px #BABECC,
    inset -1px -1px 2px #ffffff73;

  border: none !important;

}

.shadowButton {
  border-radius: 5px !important;
  box-shadow: 2px 2px 5px #BABECC,
    -5px -5px 10px #ffffff73;
  border: none !important;
  padding-right: 40px !important;
  padding-left: 40px !important;

}

.shadowButton:focus,
.shadowButton:hover,
.shadowButton:active {



  border: none !important;
  padding-right: 40px !important;
  padding-left: 40px !important;

}

/* styles.css */
/* ---------------------------------------------- */
.iconContainerAnimation {
  display: inline-block;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
    /* Increase the size to 150% */
  }
}

/* ---------------------------------------------- */

.iconContainerAnimation2 {
  display: inline-block;
  animation: pulse 20s infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
    /* Increase the size to 150% */
  }
}

/* ---------------------------------------------- */

.borderSold {

  border-radius: 4px !important;

  border-radius: 5px;
  padding: 20px;

  box-shadow:
    inset 1px 1px 1px -1px rgba(0, 0, 0, 0.1),
    inset -1px -1px 1px -1px rgba(0, 0, 0, 0.1),
    inset -1px 1px 1px -1px rgba(0, 0, 0, 0.1),
    inset 1px -1px 1px -1px rgba(0, 0, 0, 0.1);

}

.borderHr {
  border-bottom: 1px solid #87879e !important;
}

.borderLeft {
  border-left: 4px solid #87879e !important;
  padding-left: 10px !important;
}

.borderRight {

  border-right: 4px solid #87879e !important;
  padding-right: 10px !important;
}


.fontSizeTitle {
  font-size: 14px;

}

.fontSizeContent {
  font-size: 13px;

}

.myTable {
  border-width: 0cm !important;
}

.myRow {
  font-size: 14px !important;
  border-width: 0cm !important;
  border-radius: 2px !important;
  box-shadow:
    inset 1px 1px 1px -1px rgba(0, 0, 0, 0.1),
    inset -1px -1px 1px -1px rgba(0, 0, 0, 0.1),
    inset -1px 1px 1px -1px rgba(0, 0, 0, 0.1),
    inset 1px -1px 1px -1px rgba(0, 0, 0, 0.1);

}

.myRow>tr {
  font-size: 13px !important;
  border-width: 0cm !important;
  border-radius: 2px !important;
  box-shadow:
    inset 1px 1px 1px -1px rgba(0, 0, 0, 0.2),
    inset -1px -1px 1px -1px rgba(0, 0, 0, 0.2),
    inset -1px 1px 1px -1px rgba(0, 0, 0, 0.2),
    inset 1px -1px 1px -1px rgba(0, 0, 0, 0.2);

}

.myRow>tr>td {
  font-size: 13px;
  border-width: 0cm !important;



}