html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/

/*html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}*/

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir='rtl'] .rtl-only {
    display: block !important;
}


/***********************/

/*Soft Design Link*/
.footer a.softdesign-link {
    text-decoration: none;
    transition: all ease-in-out 0.3s;
}

    .footer a.softdesign-link:hover {
        background-color: #020578;
        padding: 0 10px;
        color: #fcfe4b;
    }
/***********************************/

.menu .app-brand {
    height: 64px;
    margin-top: 0;
}

.app-brand-logo svg {
    width: 22px;
    height: 38px;
}

.app-brand-text {
    font-size: 1.25rem;
    letter-spacing: -0.5px;
    /*text-transform: lowercase;*/
}

.app-brand-link img{
    width: 100%
}
/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
    z-index: auto;
}

.layout-navbar.navbar-detached.container-xxl {
    margin: 0;
    border-radius: 0 0.375rem 0.375rem 0;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1199.98px) {
    .layout-navbar.navbar-detached.container-xxl {
        width: 100% !important;
        max-width: 100%;
    }
}

.navbar .nav-item.dropdown-user .form-inline.dropdown-item {
    padding-bottom: 0;
    padding-top: 0;
}

    .navbar .nav-item.dropdown-user .form-inline.dropdown-item > button[type="submit"] {
        width: 100%;
        height: 100%;
        text-align: left;
    }

/* Account Form Page Register - Login */
.account-form-page header,
.account-form-page footer,
.login-with-2fa-page header,
.login-with-2fa-page footer,
.login-with-recovery-code-page header,
.login-with-recovery-code-page footer,
.not-logged-in-simple-page header,
.not-logged-in-simple-page footer{
    display: none;
}

.account-form-page body,
.login-with-2fa-page body,
.login-with-recovery-code-page body,
.not-logged-in-simple-page body{
    margin-bottom: 0px;
    height: 100vh;
    display: grid;
    align-items: center;
    background-color: #f5f5f9;
}

.account-form-container,
.login-with-2fa-form-container,
.login-with-recovery-code-form-container {
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
    margin: 0 auto;
}

    .account-form-container .app-brand,
    .login-with-2fa-form-container .app-brand,
    .login-with-recovery-code-form-container .app-brand{
        justify-content: center;
    }

        .account-form-container .app-brand .app-brand-text,
        .login-with-2fa-form-container .app-brand .app-brand-text,
        .login-with-recovery-code-form-container .app-brand-text{
            font-size: 20px;
        }

    .account-form-container h2,
    .login-with-2fa-form-container h2,
    .login-with-recovery-code-form-container h2{
        color: revert;
        font-size: 2.5rem;
    }

    .account-form-container p,
    .login-with-2fa-form-container p,
    .login-with-recovery-code-form-container p{
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.3px;
        margin: 20px 0;
    }

    .account-form-container span,
    .login-with-2fa-form-container span,
    .login-with-recovery-code-form-container span{
        font-size: 12px;
    }

    .account-form-container .field-validation-error,
    .login-with-2fa-form-container .field-validation-error,
    .login-with-recovery-code-form-container .field-validation-error{
        align-self: flex-start;
        padding-bottom: 10px;
    }

    .account-form-container a,
    .login-with-2fa-form-container a,
    .login-with-recovery-code-form-container a{
        color: #333;
        font-size: 13px;
        text-decoration: none;
        margin: 15px 0 10px;
    }

    .account-form-container button,
    .login-with-2fa-form-container button,
    .login-with-recovery-code-form-container button{
        background-color: #5f61e6;
        color: #fff;
        font-size: 12px;
        padding: 10px 45px;
        border: 1px solid transparent;
        border-radius: 8px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-top: 10px;
        cursor: pointer;
    }

        .account-form-container button.hidden,
        .login-with-2fa-form-container button.hidden,
        .login-with-recovery-code-form-container button.hidden{
            background-color: transparent;
            border-color: #fff;
        }

    .account-form-container form,
    .login-with-2fa-form-container form,
    .login-with-recovery-code-form-container form{
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 40px;
        height: 100%;
    }

    .account-form-container input,
    .login-with-2fa-form-container input,
    .login-with-recovery-code-form-container input{
        background-color: #eee;
        border: none;
        margin: 8px 0;
        padding: 10px 15px;
        font-size: 13px;
        border-radius: 8px;
        width: 100%;
        outline: none;
    }

    .account-form-container .form-container,
    .login-with-2fa-form-container .form-container,
    .login-with-recovery-code-form-container .form-container{
        position: absolute;
        top: 0;
        height: 100%;
        transition: all 0.6s ease-in-out;
    }

    .account-form-container .sign-in,
    .login-with-2fa-form-container .sign-in,
    .login-with-recovery-code-form-container .sign-in{
        left: 0;
        width: 50%;
        z-index: 2;
    }

    .account-form-container.active .sign-in {
        transform: translateX(100%);
    }

    .account-form-container .sign-up {
        left: 0;
        width: 50%;
        opacity: 0;
        z-index: 1;
    }

    .account-form-container.active .sign-up {
        transform: translateX(100%);
        opacity: 1;
        z-index: 5;
        animation: move 0.6s;
    }

@keyframes move {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}

.account-form-container .social-icons {
    margin: 20px 0;
}

    .account-form-container .social-icons a {
        border: 1px solid #ccc;
        border-radius: 20%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 3px;
        width: 40px;
        height: 40px;
    }

.account-form-container .toggle-container,
.login-with-2fa-form-container .toggle-container,
.login-with-recovery-code-form-container .toggle-container{
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    border-radius: 150px 0 0 100px;
    z-index: 1000;
}

.account-form-container.active .toggle-container {
    transform: translateX(-100%);
    border-radius: 0 150px 100px 0;
}

.account-form-container .toggle,
.login-with-2fa-form-container .toggle,
.login-with-recovery-code-form-container .toggle{
    background-color: #5f61e6;
    height: 100%;
    /*background: linear-gradient(to right, #5c6bc0, #512da8);*/
    background: #5f61e6;
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

.account-form-container.active .toggle {
    transform: translateX(50%);
}

.account-form-container .toggle-panel,
.login-with-2fa-form-container .toggle-panel,
.login-with-recovery-code-form-container .toggle-panel{
    position: absolute;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 30px;
    text-align: center;
    top: 0;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

.account-form-container .toggle-left {
    transform: translateX(-200%);
}

.account-form-container.active .toggle-left {
    transform: translateX(0);
}

.toggle-right {
    right: 0;
    transform: translateX(0);
}

.account-form-container.active .toggle-right {
    transform: translateX(200%);
}

.validation-summary-errors{
    width:100%;
    margin-top:5px;
}
.validation-summary-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* END Account Form Page Register - Login */

/*2fa Login Page specific*/

.login-with-2fa-page .form-check-input {
    background-color: #fff;
    border: 1px solid #d9dee3;
    margin: auto;
    margin-left: -1.7em;
    padding: 0;
    font-size: 1rem;
    border-radius: 0.25em;
    width: 1em;
    height: 1em;
    margin-top: 3px;
}

    .login-with-2fa-page .form-check-input:checked {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        box-shadow: 0 2px 4px 0 rgba(105, 108, 255, 0.4);
    }


/*END 2fa Login Page specific*/

/*File-Checkbox, Role-Checkbox*/
.file-checkbox input[type="checkbox"],
.role-checkbox input[type="checkbox"]{
    opacity: 0;
    width:0;
    height:0;
}

    .file-checkbox input[type="checkbox"] + label,
    .role-checkbox input[type="checkbox"] + label,
    span.instructions-checkbox {
        padding: 0.52em 0.593em;
        font-size: 1rem;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        background-color: #e7e7ff;
        color: #696cff;
        cursor: pointer;
    }

span.instructions-checkbox {
    cursor: revert!important;
}

    .file-checkbox input[type="checkbox"]:checked + label,
    span.instructions-checkbox.instructions-checkbox-delete {
        background-color: #ffe0db;
        color: #ff3e1d;
        text-decoration: line-through;
        position: relative;
    }

        .file-checkbox input[type="checkbox"]:checked + label:hover:before {
            content: "This file will be deleted";
            position: absolute;
            top: -15px;
            z-index: 99999;
        }

    .role-checkbox input[type="checkbox"] + label {
        background-color: #ffe0db;
        color: #ff3e1d;
        text-decoration: line-through;
    }

    .role-checkbox input[type="checkbox"]:checked + label {
        background-color: #e7e7ff;
        color: #696cff;
        text-decoration: none;
    }

    /**************************************************************/
    .validation-summary-errors[role="alert"] {
        background-color: #ffe0db;
        border-color: #ffc5bb;
        color: #ff3e1d;
        position: relative;
        padding: 0.9375rem 0.9375rem;
        margin-bottom: 1rem;
        border: 0 solid transparent;
        border-radius: 0.375rem;
    }

.tox-promotion {
    display: none;
}

.tox-statusbar__branding {
    display: none;
}

#progress-bar {
    height: 1px;
    background-color: #fefeff;
}

#progress {
    height: 100%;
    background-color: #6b6eff;
}