:root {
    --color-rubine: #FF0061;
    --color-rubine-alt: #FF2679;
    --color-dark-rubine: #B80046;
    --color-dark-grey: #212222;
    --color-light-grey-01: #F9F8FA;
    --color-grey-lite-02: #E9E8E8;
    --color-grey-mid-01: #76777A;
    --color-grey-mid-02: #54565A;
    --color-white:#fff;
    --font-family: Libre Franklin;
    --font-size: 11px;
    --color-jade: #08BDBA;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -16px;
    margin-left: -16px
}

.vertical-center,
.modal-wrapper {
    margin: 0;
    left: 0;
    position: absolute;
    top: 48%;
    width: 100%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.mt-pct-20 {margin-top:20%;}
.horizontal-center {margin: auto;}

.login-panel {
    padding: 0;
    margin: 0;
    min-width: 560px;
    max-width: 600px;
    /* min-height: 450px; */
    width: 100%;
    background-color: #fff;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto
}

.logout {
    min-height: 450px;
}

@media only screen and (max-width: 640px) {
    .login-panel {
        max-width: 100%;
        min-width: 100%
    }
}

@media only screen and (max-height: 640px) and (orientation:landscape) {
    .vertical-center {
        padding-top: 200px;
        padding-bottom: 20px
    }

    .modal {
        top: 20rem !important;
    }
}

.osttra-header{height: 52px;}

.osttra-logo {
    width: 362px;
    height: 38px;
    position: relative;
    top: -1px;
    margin: 0;
    padding: 0;
    background: url(./assets/login_logout_logo.svg) no-repeat left center;
    fill: #4c4b4c
}



/* el-css-green.min.css */
body{line-height:1.5;font-size:100%;margin:0}
ul{margin-top:0;margin-bottom:0;list-style-type:none}::-moz-focus-inner{border:0;padding:0}
a,a:hover{text-decoration:none;}a:hover{color:var(--color-rubine)}a:active{-webkit-transform:translate(1px,1px);-ms-transform:translate(1px,1px);transform:translate(1px,1px)}a.a-primary{color:#009697;text-decoration:none}a.a-primary:active{-webkit-transform:translate(1px,1px);-ms-transform:translate(1px,1px);transform:translate(1px,1px)}
a{color:currentColor}
button{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
.btn.btn-primary{background-color:#757779;}
.btn.btn-label.btn-primary,.btn.btn-primary.btn-primary{background-color:var(--color-dark-grey);color:var(--color-white)}.btn.btn-error.btn-primary:active,.btn.btn-label.btn-primary:active,.btn.btn-primary.btn-primary:active{-webkit-box-shadow:inset 0 0 .4rem #000;box-shadow:inset 0 0 .4rem #000}.btn.btn-error.btn-primary:hover,.btn.btn-label.btn-primary:hover,.btn.btn-primary.btn-primary:hover{background-color: var(--color-dark-rubine)}.btn.btn-error.btn-label,.btn.btn-label.btn-label,.btn.btn-primary.btn-label{min-height:2.25rem;height:auto;background:transparent;border-color:transparent;color:currentColor}.btn.btn-error.btn-label.disabled,.btn.btn-error.btn-label:disabled,.btn.btn-label.btn-label.disabled,.btn.btn-label.btn-label:disabled,.btn.btn-primary.btn-label.disabled,.btn.btn-primary.btn-label:disabled{opacity:1;color:#c9cacb}.btn.btn-error.btn-label.disabled>i>svg,.btn.btn-error.btn-label:disabled>i>svg,.btn.btn-label.btn-label.disabled>i>svg,.btn.btn-label.btn-label:disabled>i>svg,.btn.btn-primary.btn-label.disabled>i>svg,.btn.btn-primary.btn-label:disabled>i>svg{fill:#c9cacb}.btn.btn-error.btn-label>i>svg,.btn.btn-label.btn-label>i>svg,.btn.btn-primary.btn-label>i>svg{fill:currentColor}.btn.btn-error.btn-label:active,.btn.btn-label.btn-label:active,.btn.btn-primary.btn-label:active{-webkit-box-shadow:none;box-shadow:none}.btn.btn-error.btn-label.color-accent,.btn.btn-label.btn-label.color-accent,.btn.btn-primary.btn-label.color-accent{color:#009697}.btn.btn-error.btn-label.color-accent>i>svg,.btn.btn-label.btn-label.color-accent>i>svg,.btn.btn-primary.btn-label.color-accent>i>svg{fill:#009697}.btn.btn-error.btn-label.color-red,.btn.btn-label.btn-label.color-red,.btn.btn-primary.btn-label.color-red{color:#e71333}.btn.btn-error.btn-label.color-red>i>svg,.btn.btn-label.btn-label.color-red>i>svg,.btn.btn-primary.btn-label.color-red>i>svg{fill:#e71333}.btn.btn-error.btn-label:hover,.btn.btn-label.btn-label:hover,.btn.btn-primary.btn-label:hover{background-color:transparent;border-color:transparent;opacity:.8}.btn.btn-error.btn-label:hover:hover,.btn.btn-label.btn-label:hover:hover,.btn.btn-primary.btn-label:hover:hover{color:black}.btn.btn-error.btn-label:hover:hover>i>svg,.btn.btn-label.btn-label:hover:hover>i>svg,.btn.btn-primary.btn-label:hover:hover>i>svg{fill:#009697}.btn.btn-error.btn-label:hover.hover-none,.btn.btn-label.btn-label:hover.hover-none,.btn.btn-primary.btn-label:hover.hover-none{pointer-events:none}
.bg-dark-grey {background: var(--color-dark-grey);color: var(--color-light-grey-01);}
.bg-light-grey {background: var(--color-light-grey-01);}
.color-grey-mid-02{color:var(--color-grey-mid-02)}
.color-grey-mid-02>i>svg{fill:#2c2c2d}
.bg-white{background-color:#fff}
.white{color:var(--color-white)}
.fixed { position: fixed !important; }
.top-pct-50{top:50%}
.top-px-0 { top:0; }
.bottom-px-0 { bottom: 0; }
.right-px-0 { right: 0; }
.left-px-0 { left: 0; }
.z1{z-index:1}
.dialog-box{width:560px;height:450px}
.w-pct-100 { width: 100%; }
.h-px-400{height:400px}
.w-px-300{width:300px}
.v-center {position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.relative { position: relative!important; }
.center { text-align: center; }
.inline-block{display:inline-block}
.absolute{position:absolute!important}
.mt3{margin-top:3rem!important}
.mt1{margin-top:1rem!important}
.ml2{margin-left:2rem!important}
.p075{padding:0.75rem!important}
.left-pct-50{left:50%}
.p2{padding:2rem!important}
.caps{text-transform:uppercase;letter-spacing:0}
.btn,.h3,.h4,.tab-set.tabs-1 li,.tab-set li{font-family:var(--font-family),sans-serif;font-weight:600}
.btn,.h4,.tab-set.tabs-1 li,.tab-set li{font-size:1rem}
.btn{padding:.5rem;border:none;border-radius:1px;border-bottom:2px solid;height:2.25rem;line-height:1rem;text-align:center;vertical-align:middle;cursor:pointer;display:inline-block;background-color:#757779;color:#fff}
.block{display:block;width:100%}
.fit-h{width:100%}
.mb05{margin-bottom:.5rem!important}
.italic{font-style:italic}
.pl1{padding-left:1rem!important}
.pb05{padding-bottom:.5rem!important}
.left{float:left}
.p05{padding:.5rem!important}
.px05{padding-left:.5rem;padding-right:.5rem!important;}
.inline{display:inline}
.border-bottom{border-bottom: solid 1px #c1c5ca;}
.mt-pct-20 {margin-top:20%;}
.bold{font-weight:bold;}
.horizontal-center {margin: auto;}
.login{width:464px!important;}
.mx-auto{margin-left:auto;margin-right:auto;}
.btn.btn-primary.disabled-btn{ background-color:var(--color-grey-mid-02)!important;pointer-events:none !important;}
.email-input-field.disabled-btn{ background-image: linear-gradient(135deg, transparent, transparent 50%, var(--color-dark-rubine) 50%, var(--color-dark-rubine) 100%); background-position: bottom right; background-size: 13px 13px; background-repeat: no-repeat; }
.mr1{margin-right:1rem!important}
.right{float: right;}
.pointer{cursor: pointer;}
.hover-rubine-dark:hover{color:var(--color-dark-rubine)}
/* styes.min.css */
body,code,html,pre,samp{font-family:var(--font-family),sans-serif}
body,html{height:100%;font-size:var(--font-size);background-image: url(./assets/login_logout_screen_bg.png);background-size:cover;background-position: center center;background-attachment: fixed;}
.cookie-banner{border-radius: 4px; line-height: 2em; padding: 1em;}
.cookie-banner .active-element{visibility: visible;}
.cookie-banner.hovered .active-element{visibility: hidden;}
.disclaimer-text:hover .disclaimer-extra-text{display:block;}
.disclaimer-extra-text{display:none;bottom:25px;text-align:left;}
.disclaimer-extra-text:after{content:"";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #2c2c2c;position:absolute;bottom:-8px;left:8px}
.transform-x-50{-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.transform-y-05{transform: translateY(0.5rem);}
.login-section{right:33%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.underscore{color:var(--color-rubine);}
.underscore:hover{text-decoration:underline;}
.btn.btn-primary-jade{background-color:var(--color-jade);}
.btn.btn-md{width:13rem !important;}
.btn.btn-label-grey{background-color: var(--color-grey-lite-02) !important; color: var(--color-grey-mid-01)}
.jade{color:var(--color-jade);}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    vertical-align: middle;
    position: relative; /* Stay in place */
    z-index: 1; /* Sit on top */
    max-width: 500px;
    box-sizing: border-box;
    width: 60rem !important; /* Full width */
    background: #fff;
    padding: 15px 30px;
    height: 23rem; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    max-width: 60rem !important;
    top: 13rem;
    border-radius: unset;
    box-shadow: unset;
    text-align: left
}

/* Modal Content/Box */
.modal-content {
    /* background-color: #fefefe; */
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.fs-modal {
    font-size: 13px !important;
    font-weight: 500;
}

.modal-btn-w {
    width:100px !important;
}

@media screen and (max-width:1400px){.login-section{right:5%}}
@media screen and (max-width:1250px){.login-section{right:50%;-webkit-transform:translateX(50%) translateY(-50%);transform:translateX(50%) translateY(-50%)}}