/* ==========================================================
   RADIO EMERGENCY - SFTPGo Login
   Designlinie: mail.radio-emergency.de
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


html {
    overflow: hidden !important;
}


body.re-files-login {
    height: 100vh !important;
    height: 100dvh !important;

    overflow: hidden !important;

    background: #172327 !important;

    color: #f5f7f8 !important;
}


/* Loader */

body.re-files-login #app_loader {
    position: fixed !important;

    top: 50%;
    left: 50%;

    margin: 0 !important;

    transform:
        translate(-50%, -50%);
}


/* Gesamtrahmen */

body.re-files-login #app_root {
    width: 100% !important;

    height: 100vh !important;
    height: 100dvh !important;

    min-height: 0 !important;

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

    overflow: hidden !important;

    background: #172327 !important;
}


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

.re-files-header {
    flex: 0 0 90px;

    min-height: 90px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0 48px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background:
        #182225;
}


.re-files-brand {
    display: flex;
    align-items: center;

    min-width: 0;
}


.re-files-logo {
    width: 168px;
    height: auto;

    display: block;
}


.re-files-brand-separator {
    width: 1px;
    height: 52px;

    margin:
        0 25px;

    background:
        rgba(255,255,255,.16);
}


.re-files-brand-title {
    color: #f7f8f8;

    font-size: 25px;
    font-weight: 700;

    line-height: 1.1;
}


.re-files-brand-subtitle {
    margin-top: 6px;

    color: #b3a899;

    font-size: 14px;
    font-weight: 400;
}


.re-files-status {
    min-height: 46px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(36,177,132,.50);

    border-radius:
        30px;

    background:
        rgba(31,119,90,.12);

    color:
        #76e9bd;

    font-size:
        14px;

    font-weight:
        700;
}


.re-files-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #42dda6;

    box-shadow:
        0 0 12px
        rgba(66,221,166,.8);
}


/* ==========================================================
   MAIN
   ========================================================== */

.re-files-main {
    flex:
        1 1 auto;

    min-height: 0;

    display: grid;

    grid-template-columns:
        54% 46%;

    overflow: hidden;

    background:
        #172327;
}


/* ==========================================================
   HERO LINKS
   ========================================================== */

.re-files-hero {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background:
        #02131d;
}


.re-files-photo {
    position: absolute;

    inset: 0;

    background-image:
        url("/static/img/re-background.jpg");

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    opacity:
        .84;
}


.re-files-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(1,15,23,.96) 0%,
            rgba(1,15,23,.90) 38%,
            rgba(1,15,23,.47) 72%,
            rgba(1,15,23,.17) 100%
        );
}


.re-files-hero-content {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        42px 12% 36px 13%;
}


.re-files-kicker {
    margin-bottom:
        24px;

    color:
        #43d7db;

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        .18em;
}


.re-files-hero h1 {
    margin:
        0;

    color:
        #f6f5f1;

    font-size:
        clamp(53px, 4.3vw, 76px);

    font-weight:
        800;

    line-height:
        .93;

    letter-spacing:
        -.045em;
}


.re-files-hero h1 span {
    color:
        #45c9c8;
}


.re-files-hero p {
    max-width:
        650px;

    margin:
        29px 0 0;

    color:
        #e0d8cd;

    font-size:
        16px;

    line-height:
        1.55;
}


.re-files-features {
    max-width:
        650px;

    margin-top:
        26px;

    display:
        grid;

    gap:
        9px;
}


.re-files-feature {
    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(62,118,134,.25);

    border-radius:
        10px;

    background:
        rgba(1,20,29,.76);
}


.re-files-feature > span {
    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(52,204,207,.45);

    border-radius:
        50%;

    background:
        rgba(16,128,132,.16);

    color:
        #43d7db;

    font-size:
        19px;

    font-weight:
        700;
}


.re-files-feature strong {
    display:
        block;

    color:
        #f2f1ed;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.2;
}


.re-files-feature small {
    display:
        block;

    margin-top:
        3px;

    color:
        #829aa7;

    font-size:
        11px;

    line-height:
        1.2;
}


.re-files-slogan {
    margin-top:
        25px;

    color:
        #f4eee6;

    font-size:
        15px;

    font-weight:
        700;
}


/* ==========================================================
   RECHTE LOGINSEITE
   ========================================================== */

.re-files-login-area {
    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        28px 5%;

    background:
        linear-gradient(
            125deg,
            #192629 0%,
            #092631 100%
        );
}


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

.re-files-card {
    width:
        min(595px, 100%);

    padding:
        28px 36px 30px;

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

    border-radius:
        22px;

    background:
        #333a3c;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.23);

    color:
        #f5f7f8;
}


.re-files-card-line {
    width:
        75px;

    height:
        4px;

    margin-bottom:
        23px;

    border-radius:
        5px;

    background:
        #45c9d1;
}


.re-files-card-header {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    margin-bottom:
        21px;
}


.re-files-card-icon {
    width:
        58px;

    height:
        58px;

    flex:
        0 0 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #317084;

    border-radius:
        13px;

    background:
        #30484e;

    color:
        #40d5f4;
}


.re-files-card-icon svg {
    width:
        29px;

    height:
        29px;
}


.re-files-card-header h2 {
    margin:
        0;

    color:
        #faf8f4;

    font-size:
        25px;

    font-weight:
        750;

    line-height:
        1.13;
}


.re-files-card-header p {
    margin:
        5px 0 0;

    color:
        #dec5a9;

    font-size:
        14px;

    line-height:
        1.3;
}


/* ==========================================================
   FORMULAR
   ========================================================== */

.re-files-form {
    width:
        100%;
}


.re-files-field {
    margin-bottom:
        16px;
}


.re-files-field label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #fff3df;

    font-size:
        13px;

    font-weight:
        700;
}


.re-files-input-row {
    position:
        relative;

    display:
        flex;

    width:
        100%;
}


.re-files-input-icon {
    width:
        56px;

    min-width:
        56px;

    height:
        53px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #315f72;

    border-right:
        0;

    border-radius:
        8px 0 0 8px;

    background:
        #263339;

    color:
        #45d6ef;
}


.re-files-input-icon svg {
    width:
        23px;

    height:
        23px;
}


.re-files-card input.form-control {
    width:
        100% !important;

    height:
        53px !important;

    min-height:
        53px !important;

    padding:
        0 17px !important;

    border:
        1px solid
        #315f72 !important;

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

    background:
        #1b292e !important;

    color:
        #f5f7f8 !important;

    font-size:
        14px !important;

    box-shadow:
        none !important;
}


.re-files-card input.form-control::placeholder {
    color:
        #87a3b4 !important;

    opacity:
        1;
}


.re-files-card input.form-control:focus {
    border-color:
        #35c7c5 !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px
        rgba(53,199,197,.12)
        !important;
}


/* Passwort rechts Platz für natives Auge */

.re-files-password-row input.form-control {
    padding-right:
        53px !important;
}


.re-files-eye {
    position:
        absolute;

    top:
        50%;

    right:
        7px;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #a9bbc3;

    cursor:
        pointer;

    z-index:
        5;
}


.re-files-eye:hover {
    color:
        #45d6ef;
}


/* Forgot */

.re-files-forgot {
    margin-top:
        7px;

    text-align:
        center;
}


.re-files-forgot a {
    color:
        #36d3e9;

    font-size:
        12px;

    font-weight:
        600;

    text-decoration:
        none;
}


.re-files-forgot a:hover {
    text-decoration:
        underline;
}


/* Submit */

.re-files-submit {
    width:
        100%;

    min-height:
        52px;

    margin-top:
        2px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        9px;

    background:
        linear-gradient(
            90deg,
            #42c4c2,
            #49dbd4
        );

    color:
        #001417;

    font-size:
        15px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        none;
}


.re-files-submit:hover {
    filter:
        brightness(1.05);
}


.re-files-submit .indicator-progress {
    display:
        none;
}


.re-files-submit[data-kt-indicator="on"] .indicator-label {
    display:
        none;
}


.re-files-submit[data-kt-indicator="on"] .indicator-progress {
    display:
        inline-flex;

    align-items:
        center;
}


/* Alternative / untere Links */

.re-files-alt-login {
    display:
        block;

    margin-top:
        12px;

    color:
        #36d3e9;

    text-align:
        center;

    text-decoration:
        none;
}


.re-files-options {
    margin-top:
        13px;

    padding-top:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    font-size:
        11px;
}


.re-files-options a {
    color:
        #36d3e9;

    text-decoration:
        none;
}


.re-files-options .form-select {
    width:
        auto;

    min-width:
        110px;

    background-color:
        #1b292e;

    color:
        #d6e0e4;

    border-color:
        #315f72;
}


/* ==========================================================
   SECURITY BOX
   ========================================================== */

.re-files-security {
    margin-top:
        15px;

    min-height:
        65px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        9px 13px;

    border:
        1px solid
        #315f72;

    border-radius:
        10px;

    background:
        #293b40;
}


.re-files-security-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #337285;

    border-radius:
        9px;

    color:
        #43d7db;

    font-size:
        18px;
}


.re-files-security strong {
    display:
        block;

    color:
        #43d7f4;

    font-size:
        11px;

    font-weight:
        800;
}


.re-files-security span {
    display:
        block;

    margin-top:
        3px;

    color:
        #e4e4e0;

    font-size:
        10px;

    line-height:
        1.3;
}


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

.re-files-footer {
    flex:
        0 0 34px;

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    background:
        #182225;

    color:
        #89a2ae;

    font-size:
        10px;
}


.re-files-footer span {
    color:
        #31cfd0;
}


.re-files-footer b {
    margin:
        0 8px;

    color:
        #718992;

    font-weight:
        400;
}


/* ==========================================================
   DESKTOP MIT GERINGER HÖHE
   ========================================================== */

@media
    (max-height: 820px)
    and (min-width: 901px)
{

    .re-files-header {
        flex-basis:
            76px;

        min-height:
            76px;
    }

    .re-files-logo {
        width:
            145px;
    }

    .re-files-brand-separator {
        height:
            44px;
    }

    .re-files-hero-content {
        padding-top:
            20px;

        padding-bottom:
            18px;
    }

    .re-files-kicker {
        margin-bottom:
            14px;
    }

    .re-files-hero h1 {
        font-size:
            clamp(43px, 3.8vw, 62px);
    }

    .re-files-hero p {
        margin-top:
            18px;
    }

    .re-files-features {
        margin-top:
            17px;
    }

    .re-files-feature {
        min-height:
            46px;
    }

    .re-files-slogan {
        margin-top:
            14px;
    }

    .re-files-card {
        padding:
            20px 30px 22px;
    }

    .re-files-card-line {
        margin-bottom:
            16px;
    }

    .re-files-card-header {
        margin-bottom:
            15px;
    }

    .re-files-card-icon {
        width:
            50px;

        height:
            50px;

        flex-basis:
            50px;
    }

    .re-files-field {
        margin-bottom:
            11px;
    }

    .re-files-input-icon,
    .re-files-card input.form-control {
        height:
            47px !important;

        min-height:
            47px !important;
    }

    .re-files-submit {
        min-height:
            47px;
    }

    .re-files-security {
        margin-top:
            10px;

        min-height:
            56px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 900px) {

    html {
        overflow:
            auto !important;
    }

    body.re-files-login {
        height:
            auto !important;

        min-height:
            100vh !important;

        overflow:
            auto !important;
    }

    body.re-files-login #app_root {
        height:
            auto !important;

        min-height:
            100vh !important;

        overflow:
            visible !important;
    }

    .re-files-header {
        min-height:
            76px;

        flex-basis:
            auto;

        padding:
            0 18px;
    }

    .re-files-logo {
        width:
            130px;
    }

    .re-files-brand-separator {
        margin:
            0 15px;

        height:
            40px;
    }

    .re-files-brand-title {
        font-size:
            19px;
    }

    .re-files-brand-subtitle {
        font-size:
            11px;
    }

    .re-files-status {
        display:
            none;
    }

    .re-files-main {
        display:
            block;

        overflow:
            visible;
    }

    .re-files-hero {
        display:
            none;
    }

    .re-files-login-area {
        min-height:
            calc(100vh - 110px);

        padding:
            24px 18px;
    }

    .re-files-card {
        width:
            min(520px, 100%);

        padding:
            25px 23px;
    }

}


@media (max-width: 520px) {

    .re-files-brand-separator,
    .re-files-brand-text {
        display:
            none;
    }

    .re-files-card-header h2 {
        font-size:
            21px;
    }

    .re-files-card-header p {
        font-size:
            12px;
    }

    .re-files-card-icon {
        width:
            50px;

        height:
            50px;

        flex-basis:
            50px;
    }

}