html, body {
  margin: 0px !important;
  padding: 0px !important;
  overflow-x: hidden !important; }

.body-overflow-y-off {
  overflow-y: hidden; }

.no-padding {
  padding: 0px !important; }

.no-border {
  border: none !important; }

/*** scroll bar styling ***************************************** */
*::-webkit-scrollbar-track {
  background-color: #F5F5F5; }

*::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

*::-webkit-scrollbar-thumb {
  background-color: #00a59b;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent)); }

/*** element centering styling ********************************** */
/*poInner centered inside poOuter*/
.poOuter {
  position: relative;
  height: 100%; }

.poInner {
  position: absolute;
  height: fit-content;
  width: fit-content;
  top: 5px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; }

/*** form input error msg *************************************** */
.inputErr {
  border-top: 1px solid rgba(255, 0, 0, 0.55);
  border-left: 1px solid rgba(255, 0, 0, 0.55);
  border-right: 1px solid rgba(255, 0, 0, 0.55); }

.inputErrMsg ._Pointer {
  z-index: 2;
  position: relative;
  padding: 0px;
  display: none; }
.inputErrMsg ._Pointer:before {
  z-index: 1;
  width: 20px;
  height: 20px;
  position: absolute;
  content: "";
  bottom: 0;
  left: 2px;
  border: none;
  color: rgba(0, 0, 0, 0.9);
  text-overflow: clip;
  background: #c03;
  text-shadow: none;
  -webkit-transform: rotateZ(-90deg) translateX(-14px) translateY(-2px) skewX(-31deg);
  transform: rotateZ(-90deg) translateX(-14px) translateY(-2px) skewX(-31deg); }
.inputErrMsg ._Content {
  padding: 1px 5px 1px 5px;
  margin-top: -1px;
  z-index: 3;
  position: relative;
  width: 100%;
  border: 1px solid red;
  border-top: none;
  /* border-radius: 2px; */
  border-top-right-radius: 0px;
  color: red;
  font-weight: bold;
  font-size: 12px;
  text-overflow: ellipsis;
  /* background: rgba(255, 0, 0, 0.55); */
  /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);*/ }

/*** custom checkbox using FontAwesome Unicode ****************** */
input[type=checkbox] {
  display: none; }

input[type=checkbox] + label {
  font-weight: normal !important; }

input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block; }

input[type=checkbox] + label:before {
  content: "\f10c";
  letter-spacing: 9px;
  font-size: 20px; }

input[type=checkbox]:checked + label:before {
  content: "\f05d";
  letter-spacing: 9px;
  font-size: 20px; }

/*** Overlay Popup ********************************************** */
/*
  the html : place it in the index body
  <div id="mu-popup">
    <div class="mu-popup-area"> 
      <div class="mu-popup-header">     
        <button class="mu-popup-close"><span class="fa fa-close"></span></button>
      </div>
      <div class="col-md-12 no-padding">            
        <div class="mu-popup-content">
          <center style="color: white">Loading please wait ...</center>              
        </div>
      </div>
    </div>
  </div>
  the js get the code from the functions file
*/
#mu-popup {
  background-color: rgba(0, 0, 0, 0.9);
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  -webkit-transform: translateY(-100%) scale(0);
  transform: translateY(-100%) scale(0);
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -ms-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  width: 100%;
  z-index: 9999999; }
  #mu-popup .mu-popup-area {
    display: inline;
    float: left;
    width: 100%; }
    #mu-popup .mu-popup-area .mu-popup-header {
      height: 50px; }
      #mu-popup .mu-popup-area .mu-popup-header .mu-popup-close {
        border: none;
        background: rgba(244, 64, 3, 0.4);
        color: #fff;
        display: inline-block;
        font-size: 15px;
        outline: none;
        height: 35px;
        line-height: 35px;
        position: absolute;
        right: 12px;
        text-align: center;
        top: 8px;
        width: 35px;
        border-radius: 3px; }
      #mu-popup .mu-popup-area .mu-popup-header .mu-popup-close:hover {
        color: #ff5722;
        height: 41px;
        line-height: 41px;
        width: 41px;
        right: 9px;
        top: 5px; }
    #mu-popup .mu-popup-area .mu-popup-content {
      overflow-x: hidden;
      overflow-y: auto; }

#mu-popup.mu-popup-open {
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1); }

/*** custome alert/confirm/prompt boxs ************************** */
/*
  the html : place it in the index body
  <div id="dialogoverlay"><div id="dialogbox"><div id="dialogboxhead"></div><div id="dialogboxbody"></div><div id="dialogboxfoot"></div> </div>  </div>
  the js get the code from the functions file
*/
#dialogoverlay {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(66, 68, 68, 0.2);
  width: 100%;
  z-index: 99999999; }

#dialogboxwrap {
  padding: 110px 0px; }

#dialogbox {
  display: block;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  background-color: #224d62;
  background-repeat: no-repeat;
  background-attatchment: fixed;
  font-family: Arial, Helvetics, sans-serif;
  border-radius: 7px;
  width: 80%;
  max-width: 550px;
  z-index: 9999;
  margin: auto; }

#dialogbox > #dialogboxhead {
  font-size: 14px;
  padding: 10px;
  color: #CCC;
  border-radius: 7px 7px 0 0; }

#dialogbox > #dialogboxbody {
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  padding: 20px;
  font-size: 13px;
  color: #e6e3e3;
  letter-spacing: 1px; }

#dialogbox > #dialogboxbody > label {
  font-size: 15px;
  letter-spacing: 4px;
  font-weight: normal;
  color: #e6e3e3;
  text-transform: uppercase;
  margin-bottom: 0px !important; }

#dialogbox > #dialogboxbody > input {
  border: 1px solid rgba(255, 255, 255, 0.24);
  line-height: 25px;
  width: 100%;
  margin: 10px auto;
  color: #e6f6fb;
  letter-spacing: 2px;
  font-size: 15px;
  background-color: rgba(207, 207, 207, 0.3);
  padding: 11px; }

#dialogbox > #dialogboxfoot {
  padding: 10px 0px 10px 0px;
  text-align: right;
  border-radius: 0 0 7px 7px; }

#dialogbox > #dialogboxfoot > button {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  line-height: 25px;
  width: 60px;
  margin-right: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7); }

#dialogbox > #dialogboxfoot > button:hover {
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: white; }

.bounceInOut {
  -webkit-animation-name: bounceIn !important;
  animation-name: bounceIn !important;
  -webkit-animation-duration: 450ms;
  animation-duration: 450ms;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@keyframes bounceIn {
  0% {
    transform: scale(0.3); }
  50% {
    opacity: 0.9;
    transform: scale(1.1); }
  80% {
    opacity: 1;
    transform: scale(0.89); }
  100% {
    opacity: 1;
    transform: scale(1); } }
.bounceUpDown {
  -webkit-animation-name: bounce !important;
  animation-name: bounce !important;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-30px); }
  60% {
    transform: translateY(-15px); } }
/*** Animations ************************************************* */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/*# sourceMappingURL=sambra22-styles.css.map */