@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

* {
    box-sizing: border-box;
}

#app {
    font-family: "Cabin";
    font-size: 16px;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.logo-wrapper {
    position: fixed;
    height: 160px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    top: 0;
    z-index: 1;
    transition: all .5s ease;
}

body.unlocked .logo-wrapper{
    transform: translateY(-150%);
}

.logo-wrapper svg {
    width: 110%;
    height: 180px;
    position: absolute;
    stroke: #e2e2e2;
    stroke-width: 16px;
    top: 0;
    left: -5%;
}

.logo-wrapper img.logo {
    width: 160px;
    z-index: 1;
    padding-left: 15px;
    margin-bottom: 27px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

.logo-wrapper img.shield {
    width: 80px;
    z-index: 1;
    position: absolute;
    bottom: -40px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
}


#otp-request, #change-request, #authentication-success, #change-pending, #global-error{
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    top: 0;
    text-align: center;
    align-items: center;
    overflow-x: hidden;
    transition: all .5s ease;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-30%);

}

#change-request{
    transform: translateY(30%);
}

#authentication-success, #change-pending, #global-error{
    transform: translateY(0%);
}

#otp-request.visible, #change-request.visible, #authentication-success.visible, #change-pending.visible, #global-error.visible{
    opacity: 1;
    pointer-events: all;
    transform: translateX(0)
}

#otp-request:not(.visible) *, #change-request:not(.visible) * {
    pointer-events: none !important;
}

.step-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding-top: 200px;
    overflow-y: auto;

}

.step-wrapper .step-content{
    align-items: center;
    padding: 24px;

}

#otp-request .customer-name{
    margin-bottom: 0;
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Cabin', 'Almarai';
}

#otp-request .sensitizing-message{
    max-width: 320px;
    line-height: 1.3em;
    margin: auto;
    margin-top: 16px;
    margin-bottom: 32px;

}

#otp-request .mobile-number{
    font-size: 1.6em;
    font-weight: bold;
    color: #27AE60;
    margin: 0;
    margin-bottom: 16px;
    direction: ltr;
}

#otp-request .invalid-number{
    line-height: 1.6em;
    font-size: 1.2em;
    color: #777;
    padding-top: 48px;
    padding-bottom: 24px;

}

#otp-request .invalid-number .request-change{
    color: #22ae4a;
    text-decoration: underline;
    font-weight: bold;
}

#disclaimer {
    background: repeating-linear-gradient(
        45deg,
        #ffe600 0,
        #ffe600 10px,
        #000000 10px,
        #000000 20px
    );
    background-size: 28.28px 28.28px;
    justify-content: flex-start;
    animation: moveStripes 1s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    padding-top: 176px;
    padding-bottom: 8px;
    opacity: 0;
    pointer-events: none;
    filter: blur(6px);
    transition: all .5s ease;
    transform: translateY(100%);

}

#disclaimer.visible {
    opacity: 1;
    pointer-events: all;
    filter: blur(0);
    transform: translateY(0);

}

#disclaimer .logo-wrapper{
    z-index: 21;
    transform: translateY(-100vh);
    transition: all .5s ease;

}

#disclaimer.visible .logo-wrapper{
    z-index: 21;
    transform: translateY(0);

}


#disclaimer .disclaimer-content {
    background-color: #FFF;
    color: #000;
    padding: 16px;
    font-size: 1em;
    text-align: center;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 1);
    flex-grow: 1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    padding-bottom: 100px;
    overflow-y: auto;
}

#disclaimer .disclaimer-content h2 {
    padding-top: 24px;
    padding-bottom: 16px;
    margin: 0;
}

#disclaimer .disclaimer-content p{
    position: relative;
    margin-top: 32px;
}

#disclaimer .disclaimer-content .disclaimer-password, #disclaimer .disclaimer-content .disclaimer-otp {
    margin-left: 24px;
    background: linear-gradient(0deg, #ffe374, #ffe7c0);
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    padding-left: 28px;
    text-align: left;
    color: #000;
    margin-bottom: 0;
}

#disclaimer .disclaimer-content .disclaimer-password b, #disclaimer .disclaimer-content .disclaimer-otp b{
    font-weight: 600;
}
    
#disclaimer .disclaimer-content .disclaimer-password:before, #disclaimer .disclaimer-content .disclaimer-otp:before {
    content: "";
    height: 42px;
    width: 50px;
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(disclaimer-password.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));

}

#disclaimer .disclaimer-content .disclaimer-otp:before {
    background-image: url(disclaimer-otp.png);
    background-size: 43px;

}


#change-request h3{
    margin: 0;
    margin-bottom: 16px;
}

#change-request p {
    margin: 0;
    margin-bottom: 16px;
}

#change-request p.error {
    color: #C0392B;
    font-weight: bold;
    display: none;
}

#change-request .advisory {
    margin-top: 24px;
    font-size: 0.8em;
    margin-bottom: 16px;
    background-color: #e3e33357;
    padding: 10px;
    border-radius: 8px;

}

#change-request .keep-number {
    color: #22ae4a;
    text-decoration: underline;
    font-weight: bold;
}

#change-request .input-wrapper {
    position: relative;
    max-width: 280px;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    direction: ltr;
}

#change-request .input-wrapper input {
    box-shadow: 0 0 0 2px #EEE;
    padding: 16px 12px;
    font-size: 20px;
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.02);
    padding-left: 116px;
    font-weight: bold;
    transition: all .3s ease;
    border: none;

}

#change-request .input-wrapper input.disabled{
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.05);
    color: #777;
}

#change-request .input-wrapper input:focus {
  box-shadow: 0 0 0 2px #DDD, 0 0 5px rgba(0, 0, 0, 0.2) inset;
  outline: none;
}

#change-request .input-wrapper .indicator {
    padding: 16px 10px;
    font-size: 20px;
    border-radius: 8px 0 0 8px;
    background-color: rgba(0, 0, 0, 0.02);
    font-weight: bold;
    position: absolute;
    left: 0;
    height: calc(100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100px;
    background-color: #FFF;
    box-shadow: 2px 0 2px -2px rgba(0, 0, 0, 0.3);
    color: #666;
    justify-content: space-between;
    padding-left: 15px;
    z-index: 1;
}

#change-request .input-wrapper .indicator .fi {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
}


#authentication-success .success-animation {
    margin-bottom: 20px;

}

#authentication-success .success-text {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 1.3em;
    color: #27AE60;
}

#authentication-success .success-loading {
    margin-bottom: 16px;
    color: #AAA;
    font-size: 0.9em;
}

body.unlocked #authentication-success{
    transform: translateY(100%);
}


#change-pending .pending-call-animation {
    margin-bottom: 30px;
}

#change-pending .pending-call-animation svg{
    width: 120px;
}


#change-pending .pending-text {
    margin-bottom: 24px;
}

#change-pending .pending-text div{
    font-weight: bold;
    margin-top: 24px;
}


#change-pending .missed-calls{
    background-color: #C0392B;
    color: #FFF;
    padding: 12px 24px;
    padding-left: 64px;
    text-align: left;
    border-radius: 100px;
    background-image: url(missed-calls.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 20px center;
    box-shadow: 0 0 10px inset rgba(0, 0, 0, 0.5);
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 24px auto;
    display: inline-block;
    padding-right: 42px;

}

#change-pending .missed-calls b{
    font-size: 1.3em;
}

.call-link{
    text-decoration: none;
}

.call{
    background-color: #27AE60;
    color: #FFF;
    padding: 9px 24px;
    padding-left: 64px;
    text-align: left;
    border-radius: 100px;
    background-image: url(call.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 20px center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 24px auto;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    display: inline-block;
    padding-right: 42px;

}

.call b{
    font-size: 1.3em;
}

#global-error .icon {
    margin-bottom: 30px;
}

#global-error .icon svg{
    max-width: 60px;
    max-height: 60px;
}

#global-error .error-text {
    margin-bottom: 24px;
    color: #a61f1f;
    font-weight: bold;
}

#global-error .error-contact {
    margin-top: 48px;
    font-size: 0.8em;
}


#change-pending .missed-calls{
    background-color: #C0392B;
    color: #FFF;
    padding: 12px 24px;
    padding-left: 64px;
    text-align: left;
    border-radius: 100px;
    background-image: url(missed-calls.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 20px center;
    box-shadow: 0 0 10px inset rgba(0, 0, 0, 0.5);
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 24px auto;
    display: inline-block;
    padding-right: 42px;
}
/***********************
******** Buttons *******
************************/


.button-holder {
    padding: 16px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #FFF;
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.3);
    display: flex;
}

.button-holder button{
    flex-grow: 1;
}

button {
  align-items: center;
  appearance: none;
  background: linear-gradient(180deg, #59c260, #22ae4a);
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.1) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,rgba(0, 0, 0, 0.1) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #FFF;
  cursor: pointer;
  display: inline-flex;
  height: 55px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 1.1em;
  padding-bottom: 2px;
  transition: all .3s ease;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

button.loading{
    color: transparent;
    pointer-events: none;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0);
}

button.loading::after{
    content: "";
    position: absolute;
    left: calc( 50% - 12px );
    top: calc( 50% - 13px );
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 3px solid;
    border-color: #fff transparent #fff transparent;
    animation: button-loading-animation 1.2s linear infinite;
}   

button:hover {
  box-shadow: rgba(45, 35, 66, 0.1) 0 0 0,rgba(45, 35, 66, 0.3) 0 0 0 0,rgba(0, 0, 0, 0.1) 0 -3px 0 inset;
}

button:active {
    box-shadow: rgba(45, 35, 66, 0.1) 0 0 0,rgba(45, 35, 66, 0.3) 0 0 0 0,rgba(0, 0, 0, 0.1) 0 0 0 inset;
}

button.disabled {
    filter: grayscale(1);
    pointer-events: none;
}


/***********************
****** OTP Fields ******
************************/

.otp-smsing {
    height: 120px;
    flex-shrink: 0;
    direction: ltr;
}


.otp-input {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    opacity: 0;
    pointer-events: none;
    height: 120px;
    display: none;
    padding-bottom: 20px;
    box-sizing: border-box;
    position: relative;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    direction: ltr;
}

.otp-input.visible {
    opacity: 1;
    pointer-events: all;
}

.otp-input.disabled {
    opacity: 0.5;
    filter: grayscale(1);
    pointer-events: none;
}

.otp-input input {
    width: 44px;
    height: 48px;
    margin: 0 4px;
    padding: 0;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 8px;
    color: #27AE60;
    transition: 0.3s;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    font-weight: bold;
}

.otp-input.incorrect input{
    box-shadow: rgb(245 6 6 / 38%) 0px 3px 10px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    background-color: rgba(255, 0, 0, 0.2);
    color: #d64848;
}

.otp-input .progress-bar, .otp-input .progress-bar .progress{
    position: absolute;
    bottom: 25px;
    left: 0;
    height: 5px;
    border-radius: 3px;
    width: 100%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset;

}

.otp-input .progress-bar .progress{
    width: 100%;
    bottom: 0;
    transition: none;
    width: 0;
    background-color: #27AE60;
}

.otp-input .progress-bar .progress.running {
  animation: progress-bar-timer 170s linear forwards;
}


.otp-input input::placeholder {
  color: #DDD;
  font-size: 1.1em;
}

.otp-input input:focus {
  border-color: #59c260;
  box-shadow: 0 0 0 2px rgba(89, 194, 96, 0.6);
  outline: none;
}

.otp-input input::-webkit-outer-spin-button,
.otp-input input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.otp-input.disabled input {
    background-color: #DDD;
}


.otp-expired {
    height: 120px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
    display: none;
}

.otp-expired.visible {
    opacity: 1;
    pointer-events: all;
}

.otp-expired p{
    color: #C0392B;
    font-weight: bold;

}

.otp-expired .actions{
    display: flex;
    align-items: center;
    gap: 16px;

}

.otp-expired .actions .action{
    padding: 16px 20px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 100px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    font-size: 0.9em;
}

.otp-expired .actions .action.loading{
    color: transparent;
    pointer-events: none;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0);
    position: relative;
}

.otp-expired .actions .action.loading::after{
    content: "";
    position: absolute;
    left: calc( 50% - 12px );
    top: calc( 50% - 13px );
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 3px solid;
    border-color: #ccc transparent #ccc transparent;
    animation: button-loading-animation 1.2s linear infinite;
}  


/***********************
**** Mail animation ****
************************/

.animated-mail {
    position: relative;
    height: 75px;
    width: 100px;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    transition: 0.4s;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
    transform: translateY(10px);
    margin-left: auto;
    margin-right: auto;

}
.animated-mail .body {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 100px;
  border-color: transparent transparent #f3f3f3 transparent;
  z-index: 2;
}
.animated-mail .top-fold {
  position: absolute;
  top: 25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 50px 0 50px;
  -webkit-transform-origin: 50% 0%;
  -webkit-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  -moz-transform-origin: 50% 0%;
  -moz-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  transform-origin: 50% 0%;
  transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  border-color: #dfdfdf transparent transparent transparent;
  z-index: 2;
}
.animated-mail .back-fold {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 50px;
  background: #eaeaea;
  z-index: 0;
}
.animated-mail .left-fold {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #ebebeb;
  z-index: 2;
}
.animated-mail .letter {
  left: 10px;
  bottom: 3px;
  position: absolute;
  width: 80px;
  height: 30px;
  background: white;
  z-index: 1;
  overflow: hidden;
  -webkit-transition: 0.4s 0.2s;
  -moz-transition: 0.4s 0.2s;
  transition: 0.4s 0.2s;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.animated-mail .letter .letter-border {
  height: 5px;
  width: 100%;
  background: repeating-linear-gradient(-45deg, #22ae4a, #22ae4a 8px, transparent 8px, transparent 18px);
}
.animated-mail .letter .letter-title {
  width: 100%;
  color: #22ae4a;
  font-size: 18px;
  margin-top: 14px;
}

.animated-mail .letter .letter-stamp {
  margin-top: 1px;
  margin-left: 54px;
  border-radius: 100%;
  height: 15px;
  width: 15px;
  background: #22ae4a;
  opacity: 0.3;
}


.animated-mail.open {
  transform: translateY(50px);
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
}
.animated-mail.open .top-fold {
  transition: transform 0.4s, z-index 0.2s;
  transform: rotateX(180deg);
  -webkit-transition: transform 0.4s, z-index 0.2s;
  -webkit-transform: rotateX(180deg);
  -moz-transition: transform 0.4s, z-index 0.2s;
  -moz-transform: rotateX(180deg);
  z-index: 0;
}
.animated-mail.open .letter {
  height: 80px;
}


.animated-mail.sent {
    transform: translate3d(100vw, 0, 0) scale(0.5);
}



/**************************
**** Success animation ****
***************************/


.success-animation .checkmark {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #27AE60;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px 0px #27AE60;
    position: relative;
    transform: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;

}
.success-animation .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #27AE60;
    fill: #fff;
    
 
}

.success-animation .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    
}

.success-animation.animate .checkmark{
    animation: success-fill .4s ease-in-out .4s forwards, success-scale .3s ease-in-out .9s both;
}

.success-animation.animate .checkmark__circle{
    animation: success-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-animation.animate .checkmark__check{
    animation: success-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}


@keyframes success-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes success-scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes success-fill {
    0 {
        box-shadow: inset 0px 0px 0px 0px #4bb71b;
    }
    100% {
        box-shadow: inset 0px 0px 0px 30px #4bb71b;
    }
}



/****************************
**** Hourglass animation ****
*****************************/

.hourglass {
  --dur: 2s;
  display: block;
  margin: auto;
  width: 14em;
  height: auto;
}
.hourglass__glare-top,
.hourglass__glare-bottom,
.hourglass__model,
.hourglass__motion-thick,
.hourglass__motion-medium,
.hourglass__motion-thin,
.hourglass__sand-drop,
.hourglass__sand-fill,
.hourglass__sand-grain-left,
.hourglass__sand-grain-right,
.hourglass__sand-line-left,
.hourglass__sand-line-right,
.hourglass__sand-mound-top,
.hourglass__sand-mound-bottom {
  animation-duration: var(--dur);
  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  animation-iteration-count: infinite;
}
.hourglass__glare-top {
  animation-name: glare-top;
}
.hourglass__glare-bottom {
  animation-name: glare-bottom;
}
.hourglass__model {
  animation-name: hourglass-flip;
  transform-origin: 12.25px 16.75px;
}
.hourglass__motion-thick,
.hourglass__motion-medium,
.hourglass__motion-thin {
  transform-origin: 26px 26px;
}
.hourglass__motion-thick {
  animation-name: motion-thick;
}
.hourglass__motion-medium {
  animation-name: motion-medium;
}
.hourglass__motion-thin {
  animation-name: motion-thin;
}
.hourglass__sand-drop {
  animation-name: sand-drop;
}
.hourglass__sand-fill {
  animation-name: sand-fill;
}
.hourglass__sand-grain-left {
  animation-name: sand-grain-left;
}
.hourglass__sand-grain-right {
  animation-name: sand-grain-right;
}
.hourglass__sand-line-left {
  animation-name: sand-line-left;
}
.hourglass__sand-line-right {
  animation-name: sand-line-right;
}
.hourglass__sand-mound-top {
  animation-name: sand-mound-top;
}
.hourglass__sand-mound-bottom {
  animation-name: sand-mound-bottom;
  transform-origin: 12.25px 31.5px;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 10%);
    --fg: hsl(var(--hue), 90%, 90%);
  }
}
/* Animation */
@keyframes hourglass-flip {
  from {
    transform: translate(13.75px, 9.25px) rotate(-180deg);
  }
  24%,
  to {
    transform: translate(13.75px, 9.25px) rotate(0);
  }
}
@keyframes glare-top {
  from {
    stroke: rgba(255, 255, 255, 0);
  }
  24%,
  to {
    stroke: white;
  }
}
@keyframes glare-bottom {
  from {
    stroke: white;
  }
  24%,
  to {
    stroke: rgba(255, 255, 255, 0);
  }
}
@keyframes motion-thick {
  from {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(0.67turn);
  }
  20% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    stroke: white;
    stroke-dashoffset: 141.11;
    transform: rotate(1turn);
  }
  40%,
  to {
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(1.33turn);
  }
}
@keyframes motion-medium {
  from,
  8% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(0.5turn);
  }
  20% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    stroke: white;
    stroke-dashoffset: 147.53;
    transform: rotate(0.83turn);
  }
  32%,
  to {
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(1.17turn);
  }
}
@keyframes motion-thin {
  from,
  4% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(0.33turn);
  }
  24% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    stroke: white;
    stroke-dashoffset: 134.7;
    transform: rotate(0.67turn);
  }
  44%,
  to {
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(1turn);
  }
}
@keyframes sand-drop {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 1;
  }
  70%,
  to {
    stroke-dashoffset: -107;
  }
}
@keyframes sand-fill {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 55;
  }
  70%,
  to {
    stroke-dashoffset: -54;
  }
}
@keyframes sand-grain-left {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 29;
  }
  70%,
  to {
    stroke-dashoffset: -22;
  }
}
@keyframes sand-grain-right {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 27;
  }
  70%,
  to {
    stroke-dashoffset: -24;
  }
}
@keyframes sand-line-left {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 53;
  }
  70%,
  to {
    stroke-dashoffset: -55;
  }
}
@keyframes sand-line-right {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 14;
  }
  70%,
  to {
    stroke-dashoffset: -24.5;
  }
}
@keyframes sand-mound-top {
  from,
  10% {
    animation-timing-function: linear;
    transform: translate(0, 0);
  }
  15% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    transform: translate(0, 1.5px);
  }
  51%,
  to {
    transform: translate(0, 13px);
  }
}
@keyframes sand-mound-bottom {
  from,
  31% {
    animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
    transform: scale(1, 0);
  }
  56%,
  to {
    transform: scale(1, 1);
  }
}



@keyframes button-loading-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveStripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 28.28px 0;
  }
}

@keyframes progress-bar-timer {
  0% {
    width: 100%;
    background-color: #27AE60;
  }
  100% {
    width: 0%;
    background-color: #C0392B;
  }
}



/************
**** RTL ****
*************/

body.rtl #app {
    font-family: "Almarai"
}

body.rtl .animated-mail.sent {
    transform: translate3d(-100vw, 0, 0) scale(0.5);
}

body.rtl .otp-input .progress-bar,
body.rtl .otp-input .progress-bar .progress {
    left: auto;
    right: 0;
}

body.rtl #change-pending .missed-calls{
    text-align: right;
    padding-right: 64px;
    padding-left: 24px;
    background-position: right 20px center;
    min-width: 220px;
}

body.rtl .call{
    text-align: right;
    padding-right: 64px;
    padding-left: 24px;
    background-position: right 20px center;
}

body.rtl #disclaimer .disclaimer-content .disclaimer-password,
body.rtl #disclaimer .disclaimer-content .disclaimer-otp{
    margin-right: 24px;
    padding-left: 16px;
    padding-right: 32px;
    margin-left: 0;
    text-align: right;
}

body.rtl #disclaimer .disclaimer-content .disclaimer-password:before,
body.rtl #disclaimer .disclaimer-content .disclaimer-otp:before {
    right: -26px;
    left: auto;
}