.clearfix:after {
  content: " "; /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 30px;
  clear: both;
}

.res-circle {
  /* (A) PERCENTAGE WIDTH & BORDER RADIUS */
  width: 35%;
  border-radius: 50%;

  /* (B) BACKGROUND COLOR */ 
  background:var(--gray-dark);
  color:white;
 
  /* (C) NECESSARY TO POSITION TEXT BLOCK */
  line-height: 0;
  position: relative;
  margin: 0 auto;
}
 
/* (D) MATCH HEIGHT */
.res-circle::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
 
/* (E) TEXT BLOCK */
.circle-txt {
  /* (E1) CENTER TEXT IN CIRCLE */
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;
 
  /* (E2) THE FONT - NOT REALLY IMPORTANT */
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 130%;
}


.uhid-title{
  font-size:50%;
  position: relative;
  top:15px;
}


.btn:focus {
  outline: none !important;
  box-shadow: none;
}

/* Remove Arrows/Spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.bg-purple{
  background-color:#8a02c1;
  color:white;
}

.bg-msblue{
  background-color:#3f51b5;
  color:white;
}

.bg-parrot{
  background-color:#8bc34a;
  color:white;
}
.bg-mute{
  background-color:#cbcbcb!important;
}


.selection-off {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.rotate-90{
  position: absolute;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

/** Table (Excel) **/
.tableXls{
  width:100%
}
.tableXls th, .tableXls td
{
  border:1px solid black;
  text-align: center;
  line-height: 25px;
}


.interpretationHead{
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline;
}
.interpretationData{
  font-size: 11px;
}

.pagination{
  margin: 5px auto !important;
}


.custom-control-crimson:checked~.custom-control-crimson::before
{
  color: #fff;
  border-color:crimson;
  background-color:crimson;
}




.Myfieldset {
  font-family: sans-serif;
    border: 1px solid #1F497D;
    border-radius: 5px;
    padding: 5px 15px;
}

.Myfieldset legend {
  background: #1F497D;
    color: #fff;
    padding: 5px 15px;
    font-size: 17px;
    border-radius: 5px;
    box-shadow: 0 0 0 3px #ddd;
    margin-left: 20px;
    width: auto;
}




.loader{
  text-align: center;
  position: absolute;
  width: 100%;
  left: -1px;
  padding-top: 20%;
  height: -webkit-fill-available;
  background: #ffffff1f;
  z-index: 9;
  backdrop-filter: blur(2px);
}


/* =========== search =========== */
.search-control-pink{
  background: -webkit-linear-gradient(left top, var(--pink), var(--red));
}
.search-control-blue{
  background: -webkit-linear-gradient(left top, #007bff9d, #007bffce);
}
.search-control{
  border-radius: 100px;
  margin: 5px auto;
  
  color:white !important;
}


.search-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}
.search-control::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  width: 10px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
  background-size: 10px 10px;
}


mark{
  background: #ff90c370;
  padding: 0;
}

.like-button{
  cursor: pointer;
}
.like-button:hover{
  background-color: #1F497D;
  color:white
}
.like-button:focus{
  background-color: #1F497D;
  color:white
}
.on-print{display: none !important;}
@media print
{    
    .no-print
    {
        display: none !important;
    }
    .print-on
    {
        display: none !important;
    }
    .on-print{display: block !important;}
}


/*  Login Option */
.loginOption .custom-control-label{
    padding: 20px 30px !important;
    width: 290px !important;
    text-align: left !important;
    border: 0px !important;
    line-height: 4px;
    background: transparent !important;
    cursor: pointer;
}
.loginOption .custom-radio{
    margin: 10px 0px;
    padding: 5px 0px;
}
.activeChk{background: rgb(245, 204, 0);
    box-shadow: 0 0 15px rgba(245, 204, 0, 0.67);
    border-radius: 5px;}

    .loginOption .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #b38506;
    background-color: #d39c03;
}
.loginOption .custom-control-label::before{left:6px !important; top:13px !important}
.loginOption .custom-control-label::after{left:6px !important; top:13px !important}

@media(max-width: 414px) {
    .loginOption .custom-radio{
        width: 100% !important;
    } 
}


/*  Payment Option */

.paymentOption .custom-control-label{
    padding: 20px 30px !important;
    width: 290px !important;
    text-align: left !important;
    border: 0px !important;
    line-height: 4px;
    background: transparent !important;
    cursor: pointer;
}
.paymentOption .custom-radio{
    margin: 10px 0px;
    padding: 5px 0px;
}
.activeReceiveAmount{background: #3f51b5;
    box-shadow: 0 0 15px #3f51b5;
    border-radius: 5px;}
.activeRefundAmount{background: #8bc34a;
    box-shadow: 0 0 15px #8bc34a;
    border-radius: 5px;}
    .paymentOption .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #1877c3;
    background-color: #2196f3;
}
.paymentOption .custom-control-label::before{left:6px !important; top:13px !important}
.paymentOption .custom-control-label::after{left:6px !important; top:13px !important}

@media(max-width: 414px) {
    .paymentOption .custom-radio{
        width: 100% !important;
    } 
}




@keyframes rotating {
  from {
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}



.btn-db{
  position: relative;
  border: none;
  font-size: 18px;
  transition: color 0.5s, transform 0.2s, background-color 0.2s;
  outline: none;
  border-radius: 3px;
  margin: 0 10px;
  /* padding: 23px 33px; */
  border: 3px solid transparent;
}
  .btn-db:active{
    transform: translateY(3px)
  }
  
  .btn-db::after, .btn-db::before
  {
    border-radius: 3px
  }

  .btn-db::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid darken(var(--pink), 10%);
    transition: opacity 0.3s, border 0.3s;
  }
  .btn-db:hover::before{
    opacity: 0}
  
  .btn-db::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 3px solid var(--pink);
    opacity: 0;
    z-index: -1;
    transform: scaleX(1.1) scaleY(1.3);
    transition: transform 0.3s, opacity 0.3s;
  }
  
  .btn-db:hover::after{
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }

  .btn-db:hover .rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
  }

  /* Logo Animation */
  .glowing {
    position: relative;
    z-index: 0;
    /* width: 31%; */
    /* border-radius: 10px; */
    overflow: hidden;
    padding: 3px;
    margin: 0px auto;
  }
    
  .glowing::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -200%;
    width: 200%;
    height: 500%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }
    
  .glowing::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }

  @keyframes rotate {
    100% {
      transform: rotate(1turn);
    }
  }
  /* Logo Animation */




  #progress-bar {
    --scrollAmount: 0%;
    background:#9c27b0;
    width: var(--scrollAmount);
    height: 3px;
    position: fixed;
    top: 0px;
    z-index: 999;
  }

  #txtOperatorID::-webkit-input-placeholder{
      font-size: 14px;
      line-height: 34;
      color:white;
      line-height: 50px;
      position: relative;
      top:-10px
  }
  #txtOperatorID{
    -webkit-text-security: square;
    -o-text-security: square;
    -moz-text-security: square;
    -ms-text-security: square;
    font-size: 30px;
    height: 31px;
    line-height: 15px;
    color:white;
  }

  

  /*  Modal */
  .modal-dialog{
    box-shadow: 0 0 20px 10px #00000059;
  }
  .modal-header{
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
    background: #aa66cc;
    color: white;
  }
  .modal-content{border-radius: 0px !important;}
  .modal-title{
    margin-bottom:0;
    line-height:1;
  }


  /* Form Controls */
  .form-control, .form-control-sm, .custom-select, .custom-select-sm{
    border-radius: .1rem;
  }

  .card{margin-bottom: 12px;}
  .card-body{
    padding: 0.75rem
  }
  .btn{
    font-size:12px !important;
  }
  /* button colors */
  .btn-success{background-color: #00C851;
    border-radius: 1px;
    box-shadow: 0px 1px 5px #0000006b;}
  .btn-success:hover{background-color:#007E33;
    box-shadow: 0px 3px 8px #0000006b;}

  .btn-primary{background-color: #4285F4;
    border-radius: 1px;
    box-shadow: 0px 1px 5px #0000006b;}
  .btn-primary:hover{background-color:#0d47a1;
    box-shadow: 0px 3px 8px #0000006b;}

  .btn-info{background-color: #33b5e5;
    border-radius: 1px;
    box-shadow: 0px 1px 5px #0000006b;}
  .btn-info:hover{background-color:#0099CC;
    box-shadow: 0px 3px 8px #0000006b;}

  .btn-warning{background-color: #ffbb33;
    border-radius: 1px;
    box-shadow: 0px 1px 5px #0000006b;}
  .btn-warning:hover{background-color:#FF8800;
    box-shadow: 0px 3px 8px #0000006b;}

  .btn-danger{background-color: #ff4444;
    border-radius: 1px;
    box-shadow: 0px 1px 5px #0000006b;}
  .btn-danger:hover{background-color:#CC0000;
    box-shadow: 0px 3px 8px #0000006b;}

  .btn-light{background-color: #e0e0e0 ;
    border-radius: 1px;
    box-shadow: 0px 1px 5px #0000006b;}
  .btn-light:hover{background-color:#cccccc ;
    box-shadow: 0px 3px 8px #0000006b;}

  .btn-secondary{background-color: #37474F ;
    border-radius: 1px;
    box-shadow: 0px 1px 5px #0000006b;}
  .btn-secondary:hover{background-color:#263238 ;
    box-shadow: 0px 3px 8px #0000006b;}

  .btn-dark{background-color: #2E2E2E ;
    border-radius: 1px;
    box-shadow: 0px 1px 5px #0000006b;}
  .btn-dark:hover{background-color:#212121 ;
    box-shadow: 0px 3px 8px #0000006b;}


    .btn:disabled {
    background: #ababab;
    border: #7a7a7a;
    color:#000000;
    cursor:not-allowed;
    box-shadow: 0px 1px 1px #0000006b;
  }

  .row-disabled {
    background-color: rgb(89 167 40 / 40%);
    pointer-events: none;
    width: 100%;
    color:var(--success)!important;
  }



  .colhover{
    background:rgb(255 193 7 / 58%);
  }

  .table .thead-brown th{
    color: #fff;
    background-color: #795548;
    border-color: #483027;
  }
  .bg-gray{background:#9e9e9e!important}
  .bg-brown{background-color: #795548;
    border-color: #483027;
    color:white
  }
  
  .table thead.pink-blue
  {
    background:#4a53b2;
    color:white;
  }

  .aleradyAdded{
    background:#f8d7da
  }

  @keyframes mymove {
    from {background:rgb(196, 2, 2)}
    to {background:transparent}
  }

  .indicate-red
  {
    background:rgb(196, 2, 2);
    -webkit-animation: mymove 2s;
    animation: mymove 2s;
  }


  .td-link-blue:hover{
    cursor: pointer;
    background: #2196f3;
    color: white;
  }

 



/* -----------------Notification----------------- */
.notification-success{background: #8bc34a;color: #ffffff;}
.notification-danger{background: #f44336;color: #ffffff;}
.notification-warning{background: #ff9800;color: #ffffff;}
.notification-info{background: #2196f3;color: #ffffff;}
.notification{
	display: block;
   font-size: 14px;
   padding: 15px 10px;
   position: fixed;
   top: 10%;
   right: 3%;
   box-sizing: border-box;
   border-radius: 4px;
   text-align: left;
   z-index: 99999999;
}



@media (min-width:576px) {
  .notification {
    width: 90%;
  }
}
@media (min-width:768px) {
  .notification {
    width: 50%;
  }
}
@media (min-width:992px) {
  .notification {
    width: 50%;
  }
}
@media (min-width:1200px) {
  .notification {
    width: 30%;
  }
}
@media (min-width:1400px) {
  .notification {
    width: 30%;
  }
}


.animateOpen{
   z-index: 999999;
	animation:moveOpen 4s;
	-webkit-animation:moveOpen 4s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
/* Safari and Chrome */
@keyframes moveOpen 
	{
  from {-webkit-transform: translate(0,-100px);}
  10% {-webkit-transform: translate(0,20px);}
  12% {-webkit-transform: translate(0,22px);}
  16% {-webkit-transform: translate(0,20px);}
  80% {-webkit-transform: translate(0,20px);}
  85% {-webkit-transform: translate(0,25px);}
  to {-webkit-transform: translate(0,-100px);}
}
@-webkit-keyframes moveOpen 
	{
  from {-webkit-transform: translate(0,-100px);}
  10% {-webkit-transform: translate(0,20px);}
  12% {-webkit-transform: translate(0,22px);}
  16% {-webkit-transform: translate(0,20px);}
  80% {-webkit-transform: translate(0,20px);}
  85% {-webkit-transform: translate(0,25px);}
  to {-webkit-transform: translate(0,-100px);}
}

/* -----------------Notification----------------- */



/* -----------------Disable Cover----------------- */
#disable_cover_for_card {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 1; /* make sure logout_box has a z-index of 2 */
	background-color: rgb(255, 255, 255);
	opacity: 0.7;
  margin: -1.25rem;
  background-image: url('../img/disabled_fill.svg');
  cursor: not-allowed;
}
/* -----------------Disable Cover----------------- */


.form-control:disabled, .form-control[readonly]{
  background: #fbfbfb;
  opacity: 0.7;
  background-image: url('../img/disabled_fill.svg');
  cursor: not-allowed;
}

/* -----------------Shake----------------- */
.shake{
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* -----------------Shake----------------- */





/* -----------------Bell Ring----------------- */
.ring{
  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}
@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}
/* -----------------Bell Ring----------------- */





/* -----------------.modal-backdrop----------------- */
.modal-backdrop.show {
  opacity: .7 !important;
}
.modal-backdrop{
background: -webkit-repeating-linear-gradient(45deg, #000, #000 0.9rem, #000000 0, #141414 1.8rem);
background: repeating-linear-gradient(45deg, #000, #000 0.9rem, #000000 0, #141414 1.8rem);
}
/* -----------------.modal-backdrop----------------- */



/* -----------------MOVABLE MODAL----------------- */
/* .modal {
  position: relative;
}

.modal-dialog {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 10px;
}
.ui-helper-hidden-accessible { display:none; } */
/* -----------------MOVABLE MODAL----------------- */