* {
    margin      : 0px;
    padding     : 0px;
    color       : #ffffff;
}
body {
    overflow    : hidden;
}
:root {
    --DeepTwilight : #091A6C;
    --TrueCobalt   : #24327B;
    --DustyGrape   : #545F97;
    --GhostWhite   : #F0F1F6;
    --White        : #FFFFFF;
}
#main-app-section {
    width       : 100%!important;
    max-width   : 545px!important;
    margin      : 0 auto!important;
    min-height  : 100vh;
}
.min-h-100 {
    min-height  : 100vh;
}
.main-loading-style {
    min-height  : 100vh!important;
    width       : 100%!important;
    margin      : 0 auto;
    padding     : 0;
}
.muted-loading-text {
    color       :  rgb(148, 154, 182)!important;
}
.pb-6 {
    padding-bottom: 4rem!important;
}
.set-logo-light {
    width: 81px;
    height: 149px;
    background-image: url(../img/logo/obsidian-light-ex.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.set-logo-close {
    width: 40px;
    height: 40px;
    background-image: url(../ui/close-btn.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.loading-body {
    background: #091A6C;
    background: linear-gradient(183deg, rgba(9, 26, 108, 1) 0%, rgba(1, 7, 51, 1) 100%);
}
.loadin-app-page-section {
    background: #091A6C;
    background: linear-gradient(183deg,rgba(9, 26, 108, 1) 0%, rgba(1, 7, 51, 1) 100%);
}
.loadin-app-page-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );
    background-size: 49px 49px;
    pointer-events: none;
}
.loadin-app-page-section > * {
    position: relative;
    z-index: 1;
}
#loading-l{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    justify-content:center;
    align-items:center;
}
.loading-bar{
    width:209px;
    height:4px;
    border-radius:100px;
    overflow:hidden;
    background:#1B2B81;
}
.loading-progress{
    width:0%;
    height:100%;
    border-radius:100px;
    background:linear-gradient(
        90deg,
        #ffffff,
        #e2e6ff
    );
}
.bg-ban {
    background-color: #0A0B0D;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ban-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.set-ban-image {
    width: 146px;
    height: 146px;
    background-image: url(../ui/shield.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.text-muted-2 {
    color: #8A8E9B!important;
}
.buuton-type-ban {
    background-color: #4571EC;
    width: 98%;
    text-align: center;
    direction: rtl;
    color: #161616;
    padding: .59rem;
    border-radius: 15px;
}
.buuton-type-back-ban {
    background-color: #32353C!important;
    width: 98%;
    text-align: center;
    direction: rtl;
    color: #b3b3b3;
    padding: .59rem;
    margin-top: .55rem;
    margin-bottom: 1.38rem;
    border-radius: 15px;
}
.maintenance-app-page-section {
    background: #091A6C;
    background: linear-gradient(183deg,rgb(11, 12, 15) 0%, rgb(14, 15, 29) 100%);
}
.maintenance-app-page-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.027) 1px,
            transparent 1px
        );
    background-size: 49px 49px;
    pointer-events: none;
}
.maintenance-app-page-section > * {
    position: relative;
    z-index: 1;
}
.set-image-maintenance {
    width: 192px;
    height: 192px;
    background-image: url(../ui/technical-support-2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.timer-block {
  display: flex;
  gap: 12px;
  align-items: center;
}
.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.time-card {
  width: 62px;
  height: 66px;
  background: #0d1320;
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.time-number {
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f0f4ff;
}
.time-number.flip {
  animation: flipNum .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes flipNum {
  0%   { transform: translateY(0)    scaleY(1);  opacity: 1; }
  40%  { transform: translateY(-60%) scaleY(.4); opacity: 0; }
  60%  { transform: translateY(60%)  scaleY(.4); opacity: 0; }
  100% { transform: translateY(0)    scaleY(1);  opacity: 1; }
}
.time-label {
  font-size: .62rem;
  color: rgba(240,244,255,0.45);
}
.timer-sep {
  font-size: 1.6rem;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 18px;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: .7; }
  50%       { opacity: .15; }
}
.float-logo {
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}
.fade-out-fancy {
    animation: fadeOutFancy 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.fade-in-content {
    animation: fadeInContent 0.8s ease forwards;
}
.card-welcome-page {
    position: relative;
    overflow: hidden;
    background:
    radial-gradient(
        120% 80% at 50% 0%,
        rgba(255,255,255,.05) 0%,
        rgba(120,150,255,.08) 20%,
        transparent 55%
    ),
    linear-gradient(
        180deg,
        #020a3f 0%,
        #010526 45%,
        #00031a 100%
    );
    padding: .55rem;
    min-width: 100%;
    min-height: 453px;
    text-align: center;
    border-top-left-radius: 38px;
    border-top-right-radius: 38px;
    border-top: 1px solid rgba(87,115,206,.25);
}
.card-welcome-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(87,115,206,.25),
            rgba(255,255,255,.4),
            rgba(87,115,206,.25),
            transparent
        );
    filter: blur(.5px);
}
.card-welcome-page::after {
    content: "";
    position: absolute;
    top: -1px;
    left: -40%;
    width: 40%;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95),
            rgba(155,185,255,.85),
            rgba(255,255,255,.95),
            transparent
        );
    filter: blur(4px);
    animation: obsidianGlow 7s cubic-bezier(.4,0,.2,1) infinite;
}
.fix-image-1 {
    width: 61px;
    height: 129px;
}
.set-logo-light-tp {
    height: 60px;
    width: 170px;
    background-image: url(../img/logo/Obsidian-LT.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.logo-sec-style {
    position: absolute;
    top: 11%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 545px!important;
    margin: 0 auto!important;
}
.tabs {
    display: flex;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border-radius: 50px;
    padding: 5px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,0.1);
    width: 100%;
}
.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    padding: 10px 0;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tab-btn.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.tab-btn:hover {
    color: #fff;
}
.auth-form {
    display: none;
    flex-direction: column;
    /* gap: 15px; */
}
.auth-form.active {
    display: flex;
    animation: slideDown 0.4s ease;
}
.logo-breath {
    animation: breathLogo 4s ease-in-out infinite;
}
.entry-anim {
    opacity: 0;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.entry-1 {
    animation-name: fadeSlideUp;
    animation-delay: 0.25s;
}
.entry-2 {
    animation-name: rotateFade;
    animation-delay: 0.6s;
}
.entry-3 {
    animation-name: zoomFade;
    animation-delay: 1.0s;
}
.forms-wrapper{
    position:relative;
    min-height:280px;
}
.auth-form{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transform:
        translateX(20px)
        scale(.98);
    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(.22,1,.36,1),
        visibility .45s;
}
.auth-form.active{
    opacity:1;
    visibility:visible;
    transform:
        translateX(0)
        scale(1);
}
.auth-switch{
    position:relative;
    width:100%;
    height:64px;
    display:flex;
    align-items:center;
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );
    border:1px solid rgba(255,255,255,.06);
    border-radius:22px;
    overflow:hidden;
    margin-bottom:32px;
}
.switch-indicator{
    position:absolute;
    top:6px;
    left:6px;
    width:calc(50% - 6px);
    height:52px;
    border-radius:18px;
    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.14),
        rgba(255,255,255,.06)
    );
    backdrop-filter:blur(10px);
    box-shadow:
    0 0 20px rgba(120,150,255,.08),
    inset 0 1px 0 rgba(255,255,255,.15);
    transition:.45s cubic-bezier(.22,1,.36,1);
}
.switch-indicator.signup{
    transform:translateX(100%);
}
.switch-btn{
    flex:1;
    height:100%;
    border:none;
    background:none;
    color:rgba(255,255,255,.45);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    z-index:2;
    transition:.3s;
}
.switch-btn.active{
    color:#fff;
}
.auth-form{
    display:flex;
    flex-direction:column;
}
.auth-form input{
    height:60px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.06);
    background:
    rgba(255,255,255,.03);
    padding:0 20px;
    color:#fff;
    outline:none;
    transition:.3s;
}
.auth-form input:focus{
    border-color:
    rgba(120,150,255,.25);
    box-shadow:
    0 0 0 4px rgba(120,150,255,.08);
}
.auth-form button{
    margin-top:10px;
    height:62px;
    border:none;
    border-radius:20px;
    cursor:pointer;
    color:#061042;
    font-weight:700;
    background:
    linear-gradient(
        180deg,
        #ffffff,
        #dfe7ff
    );
    transition:.3s;
}
.auth-form button:hover{
    transform:translateY(-2px);
    box-shadow:
    0 15px 35px rgba(255,255,255,.1);
}
.btn-next {
    height: 62px!important;
    padding-top: 1.2rem!important;
    padding-bottom: .8rem!important;
}
.obs-field{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.text-white-888 {
    color: #629dc0!important;
}
.obs-label{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content: end;
    padding-right:4px;
    color:
    rgba(255,255,255,.72);
    font-size:13.6px;
    font-weight:600;
    transition:.25s;
}
.obs-label::after{
    content:"";
    width:14px;
    height:1px;
    border-radius:999px;
    background:
    rgba(130,160,255,.55);
    transition:.25s;
}
.obs-field:focus-within .obs-label{
    color:#ffffff;
}
.obs-field:focus-within .obs-label::before{
    width:22px;
    background:#ffffff;
}
.forget-app-page-section {
    background: #060e36;
    background: linear-gradient(183deg,rgb(4, 9, 37) 0%, rgb(1, 2, 14) 100%);
}
.forget-app-page-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );
    background-size: 49px 49px;
    pointer-events: none;
}
.forget-app-page-section > * {
    position: relative;
    z-index: 1;
}
.style-forgot {
    padding: .73rem;
    border-radius: 8px;
    background-color: #071d9b;
    width: 82%!important;
    max-width: 399px;
}
.re-size-image-1 {
    height: 40px;
    width: 100px;
}
.in{
    width:100%;
    height:50px;
    padding:0 10px;
    border-radius:18px;
    border:1px solid rgb(211, 218, 255);
    background:
    linear-gradient(
        180deg,
        #03071fea,
        #03071f
    );
    color:#ffffff;
    font-size:.9375rem;
    outline:none;
    transition:.25s;
}
.in::placeholder{
    color:rgba(255, 255, 255, 0.808);
}
.in:hover{
    border-color:rgba(255, 255, 255, 0.945);
}
.in:focus{
    border-color:rgba(255, 255, 255, 0.541);
    box-shadow:
    0 0 0 4px rgba(130,160,255,.05);
    background:
    linear-gradient(
        180deg,
        #03071fea,
        #03071f
    );
}
.text-forgot-pas-cap {
    color: #e0e5fc!important;
}
.btn-c-forgot {
    background-color: #f7f7f7;
    border-radius: 8px;
    border: 0px solid;
    color: #00031a;
    width: 85%;
    margin-top: 1rem;
    height: 2.1rem;
}


@keyframes fadeOutFancy {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.92) translateY(-18px);
    }
}
@keyframes fadeInContent {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes obsidianGlow {
    0% {
        left: -40%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        left: 100%;
        opacity: .9;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes breathLogo {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.04);
        filter: brightness(1.15);
    }
}
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes rotateFade {
    0% {
        opacity: 0;
        transform: rotate(-8deg) translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) translateX(0);
    }
}
@keyframes zoomFade {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media only screen and (max-width:331px) and (min-width:10px) {
   .set-ban-image {
    width: 90px;
    height: 90px;
   }
   .ban-content h3 {
    font-size: .89rem;
   }
   .ban-content p {
    font-size: .80rem;
   }
   .ban-footer div a {
    font-size: .85rem;
   }
}
@media only screen and (max-width:391px) and (min-width:322px) {
   .style-forgot {
    min-width: 89%;
   }
   .maintenance-app-page-section section p.text-muted-2 {
    text-align: center;
    direction: rtl;
    font-size: .89rem!important;
   }
}
@media only screen and (max-width:322px) and (min-width:10px) {
   .style-forgot {
    min-width: 95%;
   }
   .maintenance-app-page-section section p.text-muted-2 {
    text-align: center;
    direction: rtl;
    font-size: .82rem!important;
   }
}
@media only screen and (max-width:372px) and (min-width:10px) {
   .switch-btn {
    font-size: .86rem;
   }
   .obs-field input {
    height: 49px;
   }
   .res-text-1 {
    font-size: .89rem!important;
   }
   .card-welcome-page {
    min-height: 427px;
   }
   .res-text-2 {
    padding: .66rem!important;
    border-radius: 11px!important;
   }
}