@font-face {
    font-family: 'segoe-ui';
    src: url("../fonts/segoe-ui.ttf");
}

@font-face {
    font-family: 'segoe-ui-regular';
    src: url("../fonts/segoe-ui-regular.ttf");
}
@font-face {
    font-family: 'segoe-ui-semibold';
    src: url("../fonts/segoe-ui-semibold.ttf");
}
@font-face {
         font-family: 'segoe-ui-bold';
    src: url("../fonts/segoe-ui-bold.ttf");
}

:root[data-theme="light"] {
    
    --mobile-logo: url(../images/login-logo-beta.svg);
    
    /*---variables---*/
    --primary-page-bg: #F9F9F9;
    --accent-color: #ff825a;
    --link-color: #ff825a;
    --link-color-hov: #ffb58d;
    
    /*---theme-based---*/
    --primary-text-color: #777777;
    --bg-1: #FFFFFF;
    --bg-2: #FFFFFF;
    --bg-3: #FFFFFF;
    --bg-4: #FFFFFF;
    --border-1: #F3F3F3;
    --border-2: #F3F3F3;
    --danger-icon: url(../images/danger-icon-light.svg);
    --left-login-box-img: url(../images/login-left-img-light.svg);
    
    --charts-bg: #FFFFFF;
    
    --nav-bg-1: #A862EA;
    --nav-bg-2: #F3F3F3;
    
    --form-bg: #FFFFFF;
    
    --table-bg: #6545A4;
    
    --hover-bg: #FFF7EC;
    
    --switch-circle-bg: #FFF7EC;
    --switch-circle-pos: 0px;
    --switch-icon-sun: #FF825A;
    --switch-icon-moon: #c3c3c3;
    
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #FFFFFF;
    --light-gray: #F3F3F3;
    --gray: #6c757d;
    --grey-900: #777777;
    --grey-600: #C3C3C3;
    --grey-300: #F3F3F3;
    
    --dark-900: #5C169E;
    --dark-600: #752FB7;
    --dark-300: #8F49D1;
    --primary-900: #A862EA;
    --primary-600: #FFB58D;
    --primary-300: #CEB5FF;
    --light-900: #F3F3F3;
    --light-600: #F3F3F3;
    --light-300: #FCFAFF;
    
    --success: #47E68B;
    --info: #30E5D0;
    --warning: #FFCFA7;
    --warning-bg: #FFC107;
    --warning-tx: #FFFFFF;
    --warning-bg-hov: #FFDB21;
    --warning-tx-hov: #2A2B36;
    --danger: #FD6969;
    --danger-bg: #fccece;
    --danger-tx: #ff001d;
    --danger-bg-hov: #FD6969;
    --danger-tx-hov: #FD6969;
    --light: #FFFFFF;
    --light-bg: #E7DAFF;
    --light-tx: #A862EA;
    --light-bg-hov: #CEB5FF;
    --light-tx-hov: #FFFFFF;
    --dark: #333333;
    
    --box-shadow: rgb(255 224 194 / 90%) 0px 0px 25px 5px, rgb(255 224 194 / 90%) 0px 0px 10px 0px;
    --box-shadow-statistics: none;
    --box-shadow-1: rgb(17 17 26 / 10%) 0px 0px 16px;
    --box-shadow-2: rgb(0 0 0 / 20%) 0px 0px 1px 0px, rgb(0 0 0 / 10%) 0px 0px 15px 0px;
    
    --border-1: #F3F3F3;
    
}

:root[data-theme="dark"] {
    
    --mobile-logo: url(../images/login-logo-beta-dark.svg);
    
    /*---variables---*/
    --primary-page-bg: #1F1F1F;
    --accent-color: #FFB58D;
    --link-color: #FFB58D;
    --link-color-hov: #ffb58d;
    
    /*---theme-based---*/
    --primary-text-color: #C3C3C3;
    --bg-1: #2B2B2B;
    --bg-2: #303030;
    --bg-3: #636363;
    --bg-4: #FAFAFC;
    --border-1: #1A1A24;
    --border-2: #2A2B36;
    --danger-icon: url(../images/danger-icon-dark.svg);
    --left-login-box-img: url(../images/login-left-img-dark.svg);
    
    --charts-bg: #2A2B36;
    
    --nav-bg-1: #A862EA;
    --nav-bg-2: #4A4A4A;
    
    --form-bg: #303030;
    
    --table-bg: #6545A4;
    
    --hover-bg: #4A4A4A;
    
    --switch-circle-bg: #1F1F1F;
    --switch-circle-pos: 27px;
    --switch-icon-sun: #c3c3c3;
    --switch-icon-moon: #ff825a;
    
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #FFFFFF;
    --light-gray: #F3F3F3;
    --gray: #6c757d;
    --grey-900: #777777;
    --grey-600: #C3C3C3;
    --grey-300: #F3F3F3;
    --grey-900: #777777;
    --grey-600: #C3C3C3;
    --grey-300: #F3F3F3;
    
    --dark-900: #6934A6;
    --dark-600: #7243B2;
    --dark-300: #9664D6;
    --primary-900: #BB86FC;
    --primary-600: #FFB58D;
    --primary-300: #EEB9FF;
    --light-900: #1A1A24;
    --light-600: #2B2B2B;
    --light-300: #4D4D57;
    
    --success: #00a99b;
    --info: #30E5D0;
    --warning: #ed7c00;
    --warning-bg: #FFC107;
    --warning-tx: #2A2B36;
    --warning-bg-hov: #FFDB21;
    --warning-tx-hov: #2A2B36;
    --danger: #c74247;
    --danger-bg: #c74247;
    --danger-tx: #FFFFFF;
    --danger-bg-hov: #FF8383;
    --danger-tx-hov: #FFFFFF;
    --light: #333333;
    --light-bg: #E7DAFF;
    --light-tx: #BB86FC;
    --light-bg-hov: #D5A0FF;
    --light-tx-hov: #FFFFFF;
    --dark: #FFFFFF;
    
    --box-shadow: rgb(255 224 194 / 90%) 0px 0px 25px 5px, rgb(255 224 194 / 90%) 0px 0px 10px 0px;
    --box-shadow-statistics: rgb(26 26 36 / 90%) 0px 0px 20px 0px;
    --box-shadow-1: rgb(26 26 36 / 90%) 0px 0px 20px 0px;
    --box-shadow-2: rgb(0 0 0 / 40%) 0px 0px 1px 0px, rgb(0 0 0 / 30%) 0px 0px 25px 0px;
    
    --border-1: #1A1A24;

}
:root {    
    --box-shadow: rgb(168 98 234 / 90%) 0px 0px 25px 5px, rgb(255 224 194 / 90%) 0px 0px 10px 0px;
    --box-shadow-statistics: rgb(17 17 26 / 10%) 0px 0px 16px;
    --default-transition: color .3s ease-in-out, background .3s ease-in-out, border .3s ease-in-out, fill .3s ease-in-out, transform .3s ease-in-out;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --br-1: 24px;
    --br-2: 18px;
    --br-3: 12px;
    
}
body {
    margin: 0;
    font-family: 'segoe-ui-semibold' !important;  
    background-color: var(--primary-page-bg);
    color: var(--primary-text-color);
    overflow-x: hidden;
    display: block;
    transition: var(--default-transition);
}

a {
    color: var(--link-color);
}
.mobile-logo {
    background-image: var(--mobile-logo);
    background-repeat: no-repeat;
    padding: 1px 200px;
    height: 60px;
    background-position: center;
}

.login-logo {
    display: flex;
    justify-content: center;
}
.left-login-box {
    padding: 30px 30px 90px 30px;
    border-radius: 36px;
}
.left-login-box-img {
    padding: 30px 30px 260px 30px;
    border-radius: 36px;
    background: var(--left-login-box-img);
    background-repeat: no-repeat;
    background-position: center;
}
.left-login-box h2 {
    font-size: 32px;
    margin: 0px 0px 20px;
}
.login-box {
    padding: 60px 30px 90px 30px;
    border-radius: 36px;
    background: var(--bg-1);
    margin: 20px 0px 60px;
    box-shadow: var(--box-shadow-2);
}
.login-logo h4{
    font-size: 30px;
    font-weight: 800;
    color: #FF825A;
    margin-left: 20px;
    line-height: 1.3;
}
.title {
    margin-bottom: 25px;
}
.mt-70{
    color: var(--primary-text-color);
}
.login-box h5{
    color: var(--primary-text-color);
    font-weight: 700;
}
.login-box h5{
    color: var(--primary-text-color);
    font-weight: 500;
    margin-top: 30px;
    font-size: 16px;
    text-align: center;
}
.login-box .form-control {
    display: block;
    width: -webkit-fill-available;
    padding: 0px 15px;
    line-height: 1;
    color: var(--primary-text-color);
    background: var(--form-bg);
    background-clip: padding-box;
    border: 1px solid var(--border-1);
    border-radius: 12px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    font-weight: 500;
    height: 45px;
    font-size: 14px;
    letter-spacing: 0.035em;
    -webkit-box-shadow: var(--box-shadow-1);
    box-shadow: var(--box-shadow-1);
}
.login-box .form-control:focus {
    color: #ff825a;
    border: 1px solid #ffe0c2 !important;
    outline: 0;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}
.login-box h6{
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
}
.mt-2{
    margin-top: 20px;
    color: var(--primary-text-color);
}
.text-description {
    padding: 0px 50px;
}
.login-box .login-btn{
    width: 100%;
    background: #FF825A;
    color: #fff;
    font-size: 21px;
    font-weight: 500;
    border-radius: 12px;
    border: 0px solid #FFFFFF;
    height: 55px;
}
.login-box .login-btn:hover{
    background: #FFB58D;
}
.login-box .btn-default.focus, .btn-default:focus {

    outline: none !important;
}
.login-box .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
    color: #fff !important;
    background-color: #FF825A !important;
    background-image: none;
    border-color: transparent !important;
    box-shadow: none;
}
.checkbox input {
    background-color: #ff9c74;
}

.flex-login{
    display: flex;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    align-items: flex-start;
}
html, body, .container, .row{
    height: 100%;
}
#login-section{
    height: auto;
    overflow: hidden;
    background-color: var(--primary-page-bg);
    transition: var(--default-transition);
}
.lang-changer {
    padding: 0px 220px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: var(--primary-page-bg);
    transition: var(--default-transition);
}
.lang-changer h6{
    text-align: right;
    color: var(--tx-1);
    font-size: 16px;
    font-weight: 500;
}
.lang-changer .active{
    color: #ff9c74;
}
.m-0{
    margin: 0px !important;
    color: var(--primary-text-color);
}
#login-section .checkbox, .radio {
    margin-bottom: 10px !important;

}
.checkbox span{
    color: #FF825A;
}

span.info-box-text {
    font-size: 22px;
    text-transform: none;
    line-height: 25px;
}
span.info-box-number i.fa {
    font-size: 22px;
}
span.info-box-number {
    margin-top: 16px;
    margin-left: 5px;
}

.danger-icon {
    background-image: var(--danger-icon);
    background-repeat: no-repeat;
    margin-right: 10px;
    width: 15px;
}

.error {
    color: var(--danger-tx) !important;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 10px !important;
    display: block;
    background: var(--danger-bg);
    border-top: none;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    display: flex;
}
.error-border-class{
    border: 2px solid var(--danger);
    border-radius: 12px;
    margin: 10px 0px 5px;
}
.error-border-class .form-control{
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}


.alredy_registered_box{
    background: #FFCFA7;
    color: #433d51;
    padding: 10px;
    border-radius: 20px;
    text-align: center;
}
.alredy_registered_box h6{
    font-size: 16px;
    font-weight: 600;
    color: #433d51
}

.alredy_registered_box h6 a{
    color: #2189ff;
}

/*---theme-switcher-start---*/

#theme-switcher {
    background: var(--bg-1);
    -webkit-box-shadow: var(--box-shadow-1);
    box-shadow: var(--box-shadow-1);
    border-radius: 50px;
    width: 60px;
    height: 30px;
    display: flex;
    gap: 20px;
    align-items: center;
    cursor: pointer;
    float: right;
    margin: 24px 20px;
    position: relative;
    -webkit-transition: var(--default-transition);
    transition: var(--default-transition);
}
#theme-switcher::before {
    content:'';
    position: absolute;
    width: 25px;
    height: 25px;
    background: var(--switch-circle-bg);
    border-radius: 50px;
    z-index: 0;
    left: var(--switch-circle-pos);
    transform: translateX(4px);
    -webkit-transition: var(--default-transition);
    transition: var(--default-transition);
}
.theme-switcher:hover {
    background: var(--light-900);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color: var(--accent-color);
}
#theme-switcher img {
    z-index: 1;
}
#icon-sun{
    width: 15px;
    left: 0;
    transform: translateX(9px);
}

#icon-moon{
    width: 15px;
    right: 0;
    transform: translateX(1px);
}

/*---theme-switcher-end---*/

#login-form { margin: 0px 45px;}
#signupform { margin: 0px 45px;}
#forgot-pass-form { margin: 0px 45px;}

.footer-section {
    padding-bottom: 20px;
}

@media only screen and (max-width: 768px) {
    .mobile-logo { padding: 1px 120px; height: 75px;}
    .login-box { padding: 30px 30px 90px 30px;}
    .login-box .form-control { width: 88%;}
    .text-description { padding: 0px 10px;}
    .flex-login { display: block;}
    #login-form { margin: 0px;}
    #signupform { margin: 0px;}
    #forgot-pass-form { margin: 0px;}
} 

@media only screen and (max-width: 1200px) {
    .left-login-box { display: none;}
    .lang-changer { padding: 0px 35px;}
    .footer-section p { padding: 0px 70px;}
}

/*================================================================================================
    Scroll Bar - Starting
==================================================================================================*/
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
    width: 26px;
    border-radius: 13px;
    background-clip: padding-box; /* Safari fix */
    border: 10px solid transparent;
}

*::-webkit-scrollbar-thumb {        
    box-shadow: inset 0 0 0 10px;
    color: var(--tx-4);
}
/*============================================================
    Scroll Bar - Ending
==============================================================*/