/* =========================================================
   DARVEN Construction Co.
   SFTPGo Corporate Login
   ========================================================= */

html,
body {
    width: 100%;
    min-height: 100%;
}

body.app-blank {
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif !important;

    background:
        linear-gradient(
            90deg,
            rgba(7,12,18,.05) 0%,
            rgba(7,12,18,.08) 45%,
            rgba(7,12,18,.28) 100%
        ),
        url("/static/img/darven-login-bg.png")
        center center / cover no-repeat fixed !important;
}


/* SFTPGo page */

#app_root {
    min-height: 100vh !important;
}

#app_root > .d-flex {
    min-height: 100vh !important;
    background-image: none !important;
}


/*
 * SFTPGo's original wrapper becomes our
 * right-side authentication area
 */
#app_root > div > div {
    width: 100% !important;
    min-height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;
    align-items: flex-start !important;

    padding:
        35px
        clamp(35px, 7vw, 130px) !important;
}


/* Original SFTPGo white/card wrapper */

#app_root .bg-body.rounded.shadow-sm {
    width: min(440px, 94vw) !important;
    max-width: 440px !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    margin: 0 !important;
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

.darven-login-card {
    width: 100%;

    padding: 31px 34px 30px;

    background:
        linear-gradient(
            145deg,
            rgba(25,30,36,.93),
            rgba(13,17,22,.94)
        );

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 20px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* =========================================================
   HEADER
   ========================================================= */

.darven-login-header {
    text-align: center;

    margin-bottom: 24px;
}


.darven-main-logo {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 145px !important;
    max-height: 100px !important;

    object-fit: contain;

    margin:
        0 auto
        15px;
}


.darven-title {
    margin: 0;

    color: #fff;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.5;
}


.darven-company {
    margin-top: 1px;

    color: #fff;

    font-size: 15px;

    font-weight: 600;
}


.darven-subtitle {
    margin-top: 8px;

    color: #aeb4bd;

    font-size: 11px;
}


/* =========================================================
   FORM
   ========================================================= */

.darven-field {
    direction: rtl;

    margin-bottom: 16px;

    text-align: right;
}


.darven-label {
    display: block;

    margin:
        0 3px
        7px;

    color: #d6d9de;

    font-size: 11px;

    font-weight: 600;
}


#sign_in_form .form-control {
    width: 100%;

    height: 49px;

    padding:
        0 15px;

    direction: rtl;

    background:
        rgba(255,255,255,.07) !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    border-radius:
        9px !important;

    color:
        #fff !important;

    font-size:
        12px !important;

    box-shadow:
        none !important;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


#sign_in_form .form-control::placeholder {
    color:
        #8e949d !important;

    opacity: 1;
}


#sign_in_form .form-control:focus {
    background:
        rgba(255,255,255,.10) !important;

    border-color:
        #ffea00 !important;

    box-shadow:
        0 0 0 3px
        rgba(255,234,0,.10) !important;
}


/* =========================================================
   PASSWORD VISIBILITY
   ========================================================= */

#sign_in_form
[data-password-control="container"] {
    position: relative;
}


#sign_in_form
[data-password-control="visibility"] {
    position: absolute !important;

    top: 50% !important;

    left: 8px !important;
    right: auto !important;

    transform:
        translateY(-50%) !important;

    margin: 0 !important;

    color:
        #aeb2b9 !important;
}


#sign_in_form input[type="password"] {
    padding-left:
        48px !important;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.darven-login-button {
    width: 100%;

    height: 50px;

    margin-top: 4px;

    background:
        #ffeb00 !important;

    border:
        1px solid
        #ffeb00 !important;

    border-radius:
        9px !important;

    color:
        #111 !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;

    box-shadow:
        0 8px 25px
        rgba(255,235,0,.15);

    transition:
        transform .15s ease,
        background .15s ease;
}


.darven-login-button:hover {
    background:
        #ffdf00 !important;

    border-color:
        #ffdf00 !important;

    color:
        #000 !important;

    transform:
        translateY(-1px);
}


/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

.darven-forgot {
    margin-top: 7px;

    text-align: left;
}


.darven-forgot a {
    color:
        #aeb3bb;

    font-size:
        10px;

    text-decoration:
        none;
}


.darven-forgot a:hover {
    color:
        #ffeb00;
}


/* =========================================================
   WARNING - OUTSIDE CARD
   ========================================================= */

.darven-security-warning {
    width: 100%;

    margin-top: 15px;

    padding:
        10px 14px;

    direction: rtl;

    background:
        rgba(18,22,27,.72);

    border:
        1px solid
        rgba(255,255,255,.10);

    border-right:
        3px solid
        #e35a50;

    border-radius:
        9px;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    text-align:
        right;
}


.darven-warning-title {
    color:
        #ff756c;

    font-size:
        10px;

    font-weight:
        700;

    margin-bottom:
        3px;
}


.darven-warning-text {
    color:
        #d0d3d7;

    font-size:
        9px;

    line-height:
        1.8;
}


.darven-warning-text strong {
    color:
        #fff;

    font-weight:
        600;
}


/* =========================================================
   FOOTER
   ========================================================= */

.darven-login-footer {
    width: 100%;

    margin-top:
        12px;

    direction:
        ltr;

    color:
        rgba(255,255,255,.78);

    font-size:
        8px;

    text-align:
        center;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.8);
}


.darven-footer-separator {
    padding:
        0 8px;

    color:
        #ffeb00;
}


/* =========================================================
   OTHER LOGIN LINKS
   ========================================================= */

.darven-login-options {
    width: 100%;

    margin-top:
        7px;

    text-align:
        center;
}


.darven-login-options a {
    color:
        rgba(255,255,255,.75);

    font-size:
        9px;

    text-decoration:
        none;

    margin:
        0 5px;
}


.darven-login-options a:hover {
    color:
        #ffeb00;
}


/* =========================================================
   OPENID
   ========================================================= */

.darven-openid {
    width: 100%;

    margin-top:
        10px;

    color:
        #fff !important;

    border:
        1px solid
        rgba(255,255,255,.15) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    body.app-blank {
        background-position:
            35% center !important;
    }

    #app_root > div > div {
        align-items:
            center !important;

        padding:
            30px 20px !important;
    }

}


@media (max-width: 600px) {

    body.app-blank {
        background-position:
            31% center !important;
    }

    #app_root > div > div {
        justify-content:
            flex-start !important;

        padding:
            22px 15px !important;
    }

    .darven-login-card {
        padding:
            26px 22px;
    }

    .darven-main-logo {
        max-width:
            125px !important;
    }

    .darven-title {
        font-size:
            19px;
    }

    .darven-company {
        font-size:
            13px;
    }

    .darven-security-warning {
        background:
            rgba(13,17,22,.90);
    }

}