@CHARSET "UTF-8";
@import "../fonts/iqos.css";
@import "bootstrap.min.css";

h1, h2, h3, h4, h5, h6, p, .row, .container, .container-fluid, .form-group, form{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}


.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mt-4 { margin-top: 32px !important; }
.mt-5 { margin-top: 40px !important; }
.mt-6 { margin-top: 48px !important; }
.mt-7 { margin-top: 56px !important; }
.mt-8 { margin-top: 64px !important; }
.mt-9 { margin-top: 72px !important; }
.mt-10 { margin-top: 80px !important; }

.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important;}
.mb-4 { margin-bottom: 32px !important; }
.mb-5 { margin-bottom: 40px !important; }
.mb-6 { margin-bottom: 48px !important; }
.mb-7 { margin-bottom: 56px !important; }
.mb-8 { margin-bottom: 64px !important; }
.mb-9 { margin-bottom: 72px !important; }
.mb-10 { margin-bottom: 80px !important; }

.pt-1 { padding-top: 8px !important; }
.pt-2 { padding-top: 16px !important; }
.pt-3 { padding-top: 24px !important; }
.pt-4 { padding-top: 32px !important; }
.pt-5 { padding-top: 40px !important; }
.pt-6 { padding-top: 48px !important; }
.pt-7 { padding-top: 56px !important; }
.pt-8 { padding-top: 64px !important; }
.pt-9 { padding-top: 72px !important; }
.pt-10 { padding-top: 80px !important; }

.pb-1 { padding-bottom: 8px !important; }
.pb-2 { padding-bottom: 16px !important; }
.pb-3 { padding-bottom: 24px !important;}
.pb-4 { padding-bottom: 32px !important; }
.pb-5 { padding-bottom: 40px !important; }
.pb-6 { padding-bottom: 48px !important; }
.pb-7 { padding-bottom: 56px !important; }
.pb-8 { padding-bottom: 64px !important; }
.pb-9 { padding-bottom: 72px !important; }
.pb-10 { padding-bottom: 80px !important; }

.gap-1 {
    gap: 8px !important;
}

.gap-2 {
    gap: 16px !important;
}

.gap-3 {
    gap: 24px !important;
}

.gap-4 {
    gap: 32px !important;
}

.gap-5 {
    gap: 40px !important;
}

html, body {
    font-family: 'IQOS',Arial,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    color: #34303D;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.logout-link {
    position: absolute;
    top: 76px;
    right: 12px;
    z-index: 1000;
}
.logout-link a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: #34303D !important;
    font-size: 18px;
    line-height: 24px;
}

.logout-link a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 16px;
    margin-right: 8px;
    background-image: url("../img/icon_logout.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 16px;
}

#header-logo{
    margin-top: 64px;
}
#header-servus{
    margin-top: 40px;
}
#header-headline{
    margin-top: 24px;
    font-weight: 300;
    font-size: 36px;
    line-height: 41px;
}

#contact-headline{
    margin-top: 256px;
}

#contact-headline-authed{
    margin-top: 48px;
}

h1{
    font-weight: bold;
    font-size: 24px;
    line-height: 34px;
    color: #34303D;
}

.text-primary{
    color: #00D1D2 !important;
}

.confirmation-field small {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #34303D;
}

.confirmation-field strong {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #34303D;
}

.btn{
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    line-height: 48px;
    border-radius: 32px;
    padding: 0;
}
.btn-primary{
    background-color: #00D1D2 !important;
    border-color: #00D1D2 !important;
}
.btn-primary:hover{
    background-color: #02C6C7 !important;
    border-color: #02C6C7 !important;
}

.btn-secondary{
    color: #34303D !important;
    background-color: #ffffff !important;
    border-color: #34303D !important;
}
.btn-secondary:hover{
    color: #ffffff !important;
    background-color: #34303D !important;
    border-color: #34303D !important;
}

.form-label{font-weight: bold;color: #34303D !important;margin-bottom:8px;}
.form-control, .form-select, .btn{
    border-radius: 32px !important;
    text-align:center;
}
.form-control, .form-select{
    border:1px solid #34303D;
    color: #34303D !important;
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
}
.form-select{
    padding-left: 36px !important;
}

.form-check-input[type="radio"] {
    background-color: #fff;
    border: 1px solid #34303D;
}

.form-check-input[type="radio"]:checked {
    background-color: #02C6C7;
    border-color: #02C6C7;
    background-image: none;
}

.form-check-input[type="radio"]:focus {
    border-color: #02C6C7;
    box-shadow: 0 0 0 0.25rem rgba(2, 198, 199, 0.25);
}

.form-check-input[type="checkbox"] {
    background-color: #fff;
    border-color: #34303D;
}

.form-check-input[type="checkbox"]:checked {
    background-color: #02C6C7;
    border-color: #02C6C7;
}

.form-control.is-invalid{border: 1px solid #FF0000; background-color: #fff !important;}
.form-control:disabled {background-color: #eee;}


input.is-invalid {
    border-color: #FF5050;
    background-color: #FCEAEA;
}
.form-label.text-danger{color: #FF5050 !important;}

footer .nav {
    flex-wrap: nowrap;
}

.navbar-toggler{
    border-color:#DAA918 !important;
    border: 1px solid #DAA918;
}
.navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 112, 186, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.nav-link{
    font-size: 18px;
    color:#DAA918 !important;
}
.nav-link.active{
    color:#DAA918 !important;
    font-weight: bold;
}
footer.footer, main, .container{
    background: transparent !important;
}
footer, .nav-link.nav-link-footer{
    font-size: 16px;
    line-height: 24px;
    color:#34303D !important;
    padding: 0 16px;
}
.nav-link-footer:hover{
    color:#00B8CC !important;
    text-decoration: underline;
}

#product-hint {
    z-index: 99999;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;

    color: #000 !important;
    background-color: #fff;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 400;
    text-align: center;
    border-top: 1px solid #34303D;
    padding-left: 16px;
    padding-right: 16px;
}

footer #footer_container p {
    letter-spacing: 1.2rem !important;
}

.p-login-center{padding-top:5%;}
.p-center{padding-top:1%;}


#servus-img{
    margin-top: 56px;
}
#servus-img-neutral{
    margin-top: 64px;
}
#copyright-text{
    padding-bottom: 64px !important;
    white-space: nowrap;
    font-size: 14px;
}

#login-btn{
    margin-top: 8px;
    margin-bottom: 40px;
}

#step3-content-spacer{
    width:100%;
    height:220px;
    display:block;
}

@media (min-width: 510px) {
    #step3-content-spacer{
        width:0;
        height:0;
        display:none;
    }
}

/* Small devices */
@media (min-width: 576px) {
    #header-headline{
        margin-top: 24px;
    }
    #copyright-text{
        font-size: 18px;
        padding-bottom: 64px !important;
    }
    #product-hint {
        font-size: 18px !important;
    }
    footer, .nav-link.nav-link-footer{
        font-size: 18px;
        padding: 0 21px;
    }
}

/* Medium devices */
@media (min-width: 768px) {
    #copyright-text{
        font-size: 18px;
        padding-bottom: 40px !important;
    }
    #header-headline{
        font-size: 40px;
        line-height: 48px;
        margin-top: 32px;
    }
    h1{
        font-size: 30px;
        line-height: 40px;
    }
    footer, .nav-link.nav-link-footer{
        padding: 0 43px;
    }
    #copyright-text{
        padding-bottom: 28px;
    }
    #servus-img{
        margin-top: 40px;
    }
    #login-btn{
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Large devices */
@media (min-width: 992px) {
    #header-headline{
        margin-top: 26px;
    }
    footer, .nav-link.nav-link-footer{
        padding: 0 56px;
    }
    .form-select{
        padding-left: 35px !important;
    }
}

/* Extra large devices */
@media (min-width: 1200px) {
    #header-headline{
        margin-top: 24px;
    }
}

/* Extra extra large devices */
@media (min-width: 1400px) {

}