/* FONTS START */

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap'); */

/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/montserrat/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/montserrat/JTURjIg1_i6t8kCHKm45_ZpC3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/montserrat/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
}

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/material-icons/material-icons.woff2') format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

/* FONTS END */

/* ALLGEMEINE CSS REGELN FÜR HTML ELEMENTE START */

body{font-family: 'Montserrat', Verdana, Arial, Helvetica, sans-serif;}

h1,h2,h3,h4,h5,h6{font-family:'Montserrat', Verdana, Arial, Helvetica, sans-serif;font-weight:500;}

h1{font-size:44px !important;}
h1{font-size:38px;}
h3{font-size:32px;}
h4{font-size:26px;}
h5{font-size:20px;}
h5.regular{font-family: 'Montserrat';font-weight:400;}
h6{font-size:14px;}

ol li{padding-bottom:10px;}

p {line-height:24px;}

section{margin-bottom:40px;}

/* ALLGEMEINE CSS REGELN FÜR HTML ELEMENTE END */

/* COLOR AND TEXT SETTINGS START  */

:root {
    --black: 55,55,54;                      /* #373736 */
    --blue: 3, 155, 229;                    /* #039be5 */
    --darkblue: 27,59,114;                  /* #1B3B72 */
    --darkgrey: 139,140,141;                /* #8b8c8d */
    --green: 24,201,103;                    /* #18C967 */
    --grey: 194,194,194;                    /* #c2c2c2 */

/*  --lightblue: 18,200,252;                   #12C8FC */
    --lightblue: 239,245,249;               /* #EFF5F9 */
    --lightgrey: 211,211,212;               /* #D3D3D4 */
    --lightred: rgba(255, 0, 0, 0.78);      /*  background: #ff0000; opacity: 0.7;  */
    --orange: 255,165,0;                    /* #FFA500 */
    --red: 255,0,0;                         /* #FF0000 */
    --white: 255,255,255;

}

.text-blue{color:rgb(var(--blue));}

.text-green{color:#18C967;background-color:transparent !important;}

.text-black{color: #373736;}

.text-red{color:red;}

.text-bold{font-weight:bold !important;}

.text-darkgrey{color: rgb(var(--darkgrey));}

.text-lightgrey{color: rgb(var(--lightgrey));}

.text-grey{color: rgb(var(--grey));}

.text-lowercase{text-transform: lowercase !important;}

.text-monospace{font-family: "Lucida Console", Monaco, monospace}

.text-underline{text-decoration: underline;}

.text-uppercase{text-transform: uppercase !important;}

.text-center{text-align: center !important;}

.text-black{color:black;}
.text-grey{color:#B6B6B7;}
.text-white{color:white;}

.text-darkblue{color: rgb(var(--darkblue));}

.text-lightblue{color:#12C8FC;}

.text-bigger{font-size:x-large;}

.text-smaller{font-size:smaller;}

.text-larger{font-size:larger;}

.semibold{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

ul.text-warning{list-style-type: none;margin-left:-35px;}

.underline{
    background: #C2C2C2 0% 0% no-repeat padding-box;width:65px;height:3px;
}

.underliner{
    border-bottom-style: solid;
    border-width: 3px;
    border-bottom-color:#C2C2C2;
    box-sizing: content-box;
}
/* COLOR AND TEXT SETTINGS END  */

/* BACKGROUND COLORS START */
/* Test Only */
.back-yellow{background-color:yellow}

/* Test Only End */
.back-blue{background-color:#12C8FC;}
.back-darkblue{background-color:rgb(var(--darkblue));}
.back-green{background-color: #18C967;}
.back-grey{background-color: #B6B6B7;}
.back-lightgrey{background-color: #E6EAED;}
.back-lightblue{background-color: rgb(var(--lightblue));}
.back-transparent{background-color:transparent !important;}
.back-red{background-color:red;}
.back-lightwhite{background-color: #EFF5F9;}
.back-white{background-color: #fff !important;}
/* BACKGROUND COLORS END */

/* MARGINS UND PADDINGS START */
.pad-none{padding:0px;}
.pad10{padding:10px !important;}
.pad-10{padding:10px !important;}
.pad15{padding:15px !important;}
.pad20{padding:20px !important;}

.pad-top-10{padding-top:10px !important;}
.pad-top-bottom-10{padding-top:10px;padding-bottom:10px;}
.pad-top-bottom-20{padding-top:20px;padding-bottom:20px;}
.pad-top-bottom-30{padding-top:30px;padding-bottom:30px;}

.pad-left-15{padding-left:15px !important;}
.pad-left-20{padding-left:20px !important;}
.pad-left-60{padding-left:60px !important;}

.pad-right-15{padding-right:15px !important;}
.pad-right-30{padding-right:30px !important;}

.margin-0{margin:0px;}

.margin2{margin: 2px !important;}

/* MARGINS UND PADDINGS END */

/* HEIGHTS WIDTHS START */
.height-070{min-height:70px !important;}
.h094{min-height:94px !important;}
.h100{min-height:100px !important;}
.h110{min-height:110px !important;}

.h150{min-height:150px !important;}
.h175{height:175px !important;}
.height-195{min-height:195px !important;}
.h200{min-height:200px !important;}
.height-250{min-height:250px;}
.h300{min-height:300px;}
.h330{min-height:330px;}
.h370{min-height:370px !important;}
.h400{min-height:400px !important;}
.h425{min-height:425px !important;}
.h450{min-height:450px !important;}
.h500{min-height:500px !important;}
.height-096{min-height:96px !important;}

.card .card-title.shorttip-card-title,
.card .card-title .shorttip-card-title,
#body-shorttips .card-content .card-title.shorttip-card-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
    line-height: 1.35 !important;
    max-height: 2.7em !important;
    min-height: 0 !important;
    margin-bottom: 0.25rem;
    word-break: break-word;
}
.height-099{min-height:99px !important;}
.height-350{min-height:350px;}
.height-565{min-height:565px !important;}
.height-590{min-height:590px !important;}
.height-780{min-height:780px;}

.w175 { min-width: 175px; }
.w200 { min-width: 200px; }
.w225 { min-width: 225px; }
.w250 { min-width: 250px; justify-content: center;}
.w275 { min-width: 275px; }
.w280 { max-width: 280px !important; }
.w300 { min-width: 300px; }
.w350 { min-width: 350px !important; }
.w362 { min-width: 362px !important; }
.w500 { width: 90%; }
/* HEIGHTS WIDTHS END */


/* BUTTONS START */
.button-green{
    background: #18C967 0% 0% no-repeat padding-box;
    border-radius: 4px;
}

.button-green:hover{
    background-color: rgb(var(--darkgrey)) !important;
    color: var(--white);
}

.button-blue{
    /*background:  var(--blue) 0% 0% no-repeat padding-box; */
    background-color:  rgb(var(--darkblue));
    border-radius: 4px;
}

.button-blue:hover{
    background-color:  rgb(var(--green)) !important;
    border-radius: 4px;
}

/* BUTTONS END */

/* FORM ELEMENTE START */
input[type=text].browser-default,input[type=password].browser-default, input[type=email].browser-default{
    padding:14px;
    border:solid 1px #C2C2C2;
    min-width:280px;
}

.password-field-wrap{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
}

.password-field-wrap input[type="password"],
.password-field-wrap input[type="text"]{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    padding-right:3rem;
}

.password-toggle-btn{
    position:absolute;
    top:50%;
    right:0.35rem;
    transform:translateY(-50%);
    margin:0;
    padding:0.25rem;
    min-width:auto;
    height:auto;
    line-height:1;
    border:none;
    background:transparent;
    color:rgba(var(--darkblue), 0.55);
    cursor:pointer;
    z-index:2;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible{
    color:rgb(var(--darkblue));
    background-color:rgba(var(--green), 0.1);
}

.password-toggle-btn .material-icons{
    font-size:1.35rem;
}

.input-field .password-field-wrap{
    width:100%;
}

select.browser-default {
    display: block;
    padding: 0 48px 0 14px;
    border: solid 1px #C2C2C2;
    min-width: 280px;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    color: #373736;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("/assets/layout/select-selector-48x44.gif");
    background-repeat: no-repeat;
    background-position: right center;
    background-clip: border-box;
    height: 38px;
    min-height: 38px;
    line-height: 38px;
}

.input-field{
    margin-top:1rem;
    margin-bottom:1rem;
}

.input-field input{
    border-bottom:none;
}

/* Keep browser-default fields aligned with wrapped password fields. */
.input-field input.browser-default{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

/* Registration forms: legacy <br> between .row plus input-field margins stacked with grid gap */
#body-registration .registration-choice-actions .registration-choice-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
    height: auto;
    min-height: 42px;
    padding: 10px 12px;
}

/* Registration plan cards: "ODER" divider between Basis and Premium */
#body-registration .registration-or-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

#body-registration .registration-or {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 7rem;
    gap: 0.35rem;
}

#body-registration .registration-or__line {
    flex: 1 1 auto;
    height: 1px;
    min-width: 0;
    background-color: rgb(var(--darkblue));
}

#body-registration .registration-or__badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: #e6eaed;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgb(var(--darkblue));
}

#body-registration .registration-choice-cards .card-features.card-content {
    padding-bottom: 22px !important;
    max-height: none !important;
}

#body-registration .registration-choice-cards .card-features .headline {
    font-size: 22px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.02em;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

#body-registration #myForm > br{
    display:none;
}

#body-registration #myForm .row .input-field{
    margin-top:0;
    margin-bottom:0;
}

#body-registration #myForm .row{
    margin-bottom:1.25rem;
}

#body-registration #myForm{
    --gap-size:1.25rem;
}

.input-text-border{border: solid 1px #B6B6B7 !important; }

.input-text-border::placeholder{color: #a9a9a9 !important;}

#body-supportrequest .form-field-row {
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 1.25rem;
}

#body-supportrequest .form-field-row label.text-black {
    margin: 0;
    line-height: 1.4;
}

#body-supportrequest .form-field-row input.browser-default {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    border: solid 1px #C2C2C2;
    background-color: #fff;
    color: #373736;
    margin: 0;
}

#body-supportrequest .input-with-prefix {
    display: flex;
    align-items: stretch;
    width: 100%;
}

#body-supportrequest .input-with-prefix__addon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 38px;
    padding: 0 12px;
    border: solid 1px #C2C2C2;
    border-right: none;
    background-color: #f0f0f0;
    color: #373736;
    font-size: 1rem;
    line-height: 1;
}

#body-supportrequest .input-with-prefix__input {
    flex: 1 1 auto;
    min-width: 0;
    border-left: none;
}

#body-supportrequest .input-with-prefix:focus-within .input-with-prefix__addon,
#body-supportrequest .input-with-prefix:focus-within .input-with-prefix__input {
    border-color: rgb(var(--darkblue));
}

#body-supportrequest .form-action-row {
    align-items: center;
    /* Match .collapsible-body horizontal padding so the button aligns with the input */
    padding: 1.25rem 2rem 1.5rem;
}

#body-courses .courses-main-filter-row,
#body-shorttips .courses-main-filter-row {
    align-items: center;
}

#body-courses .courses-main-filter-row input.browser-default,
#body-shorttips .courses-main-filter-row input.browser-default {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    border: solid 1px #C2C2C2;
    background-color: #fff;
    color: #373736;
    margin: 0;
}

#body-courses .courses-main-filter-actions,
#body-shorttips .courses-main-filter-actions {
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 600px) {
    #body-supportrequest .form-action-row__button {
        text-align: center;
    }
}

.input-login::-webkit-input-placeholder, .input-login::placeholder, .input-login{
    padding-left:10px !important;
}

.outline-none{outline: none}

#username, #password, #email{border-color: rgba(var(--grey), 0.4)}

#select-country, #select-salutation{
    background-color:white;
    width:280px;
    height: 3.2rem;
    color: #373736;
}

#select-country option:disabled, #select-salutation option:disabled{
    color: #373736;
}



/* FORM ELEMENTE ENDE */

/* FORM KLASSEN START */

.success{
    /* background-color: var(--green)!important; */
    background-color: rgba(var(--green), 0.4) !important;
}

.valid{
    background-color: rgba(var(--green), 0.4) !important;
    color: var(--black);
}

.invalid, .error{
    /* background-color: var(--lightred) !important; */
    background-color: rgba(var(--red), 0.4) !important;
    color: rgb(var(--black)) !important;
    padding-left:10px;
}

.error-box{
    padding:10px;line-height:32px;border-radius: 3px;
}

.check-valid{
    background-color: rgba(var(--green), 0.4) !important;
    border: solid 1px rgb(var(--green)) !important;
    color: rgb(var(--black)) !important;
}

.check-invalid{
    background-color: rgba(var(--red), 0.4) !important;
    border: solid 1px rgb(var(--red)) !important;
    color: rgb(var(--black)) !important;
}

.invalid, .error{
    /* background-color: var(--lightred) !important; */
    background-color: rgba(var(--red), 0.4);
    color:white;
    padding-left:10px;
}
/* FORM KLASSEN ENDE */

/* BORDERS START */

.borders{border:solid 1px;}

.border{
    border: solid 1px #C2C2C2;
}

.border{border-style:solid;border-width:1px; color:rgb(var(--lightgrey))}

.border-none{border-style:none !important;}

.borders-top-bottom{
    border-top: solid 1px rgba(var(--grey));
    border-bottom: solid 1px rgba(var(--grey));
}

.color-border-lightgrey{
    border-color: rgba(var(--lightgrey)) !important;
}
/* BORDERS  ENDE */

/* MODALS START */

.modal-footer-right{justify-content:flex-end;}

.modal-login{
    width:min(420px, calc(100vw - 2rem));
    max-width:420px;
    min-height:0;
    max-height:calc(100vh - 2rem);
    border-radius:0;
    --modal-padding: 1rem;
    --modal-padding-bottom: 0.75rem;
}

@media (min-width: 1920px){
    .modal-login{
        padding:5px 15px 15px;
    }
}

.modal-login .modal-header,
.modal-login .modal-content,
.modal-login .modal-footer{
    padding-left:1.5rem;
    padding-right:1.5rem;
}

.modal.modal-login .modal-header.modal-login-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-bottom:1px solid rgba(var(--darkblue), 0.08);
    padding:0.65rem 1.5rem 0.75rem;
}

.modal-login-title{
    margin:0;
    color:rgb(var(--darkblue));
    font-size:1.35rem;
    line-height:1.3;
}

.modal-login-close{
    margin:0;
    min-width:auto;
    padding:0.25rem;
    color:rgba(var(--darkblue), 0.72);
}

.modal-login-close:hover{
    background-color:rgba(var(--green), 0.12);
}

.modal-login-content{
    padding-top:1.25rem;
    padding-bottom:0.5rem;
}

.modal-login-content .input-field{
    margin-top:0;
    margin-bottom:1.25rem;
    position:relative;
}

.modal-login-content .input-field input{
    border:1px solid rgba(var(--grey), 0.35);
    border-radius:0;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    display:block;
    height:3rem;
    padding:1.1rem 0.875rem 0.35rem;
}

/* Modal login: keep wrapped password field exactly aligned with normal inputs. */
.modal-login-content .input-field > .password-field-wrap{
    display:block;
    width:100%;
    max-width:100%;
}

.modal-login-content .input-field > .password-field-wrap > input{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    height:3rem;
    padding:1.1rem 2.75rem 0.35rem 0.875rem;
    margin:0;
}


.modal-login-content .input-field > label{
    left:0.875rem;
    top:1rem;
}

.modal-login-content .input-field input:focus + label,
.modal-login-content .input-field input:not(:placeholder-shown) + label,
.modal-login-content .input-field label.active{
    color:rgb(var(--darkblue));
    top:0.35rem;
    transform:scale(0.78);
    transform-origin:top left;
}

.modal-login-content .input-field input:focus{
    border-color:rgb(var(--green));
    box-shadow:0 0 0 1px rgba(var(--green), 0.35);
}

.modal-login-content .input-field label{
    color:rgba(var(--darkblue), 0.72);
}

.modal.modal-login .modal-footer,
.modal-login-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-top:1px solid rgba(var(--darkblue), 0.08);
    padding-top:1rem;
    padding-bottom:1.25rem;
}

.modal-login-submit{
    background-color:#18C967 !important;
    border-radius:0 !important;
    box-shadow:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:8.5rem;
    padding:0 1.5rem;
    text-align:center;
}

.modal-login-remember{
    margin:0 0 0.75rem;
}

.modal-login-forgot{
    display:flex;
    align-items:center;
    margin:0;
    padding:0.5rem 0.75rem 0.5rem 0;
}

.modal-login-forgot a{
    color:rgb(var(--darkblue));
    font-size:0.9rem;
    line-height:1.2;
    text-decoration:underline;
    white-space:nowrap;
}

.modal-login-forgot a:hover{
    color:rgb(var(--green));
}

.modal-login-submit:hover,
#header-btn-login2:hover{
    background-color:#14a856 !important;
    color:#fff;
}

@media (max-width:600px){
    .modal-login-footer{
        flex-wrap:wrap;
        row-gap:0.75rem;
    }

    .modal-login-forgot{
        flex:1 1 auto;
        padding-left:0;
    }

    .modal-login-submit{
        flex:0 0 auto;
        width:auto;
    }
}

.modal-legal{
    width:min(960px, calc(100vw - 2rem));
    max-width:960px;
    min-height:0;
    max-height:calc(100vh - 2rem);
    border-radius:0;
}

/*
 * Legal modals (Materialize 2.3 + Popover API): layout flex only while open.
 * Do NOT add display:flex to .modal-legal alone — it overrides the browser hidden
 * popover state, so hidePopover() / backdrop click look broken (backdrop flashes, panel stays).
 * Login modals (.modal-login) never had this issue; see modal-loader.js + #modal1 popover="auto".
 */
.modal-legal:popover-open{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.modal-legal .modal-header,
.modal-legal .modal-content,
.modal-legal .modal-footer{
    padding-left:1.5rem;
    padding-right:1.5rem;
}

.modal-legal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-bottom:1px solid rgba(var(--darkblue), 0.08);
    padding-top:1rem;
    padding-bottom:0.9rem;
    flex:0 0 auto;
    position:relative;
    z-index:3;
}

.modal-legal-title{
    margin:0;
    color:rgb(var(--darkblue));
    font-size:1.2rem;
    line-height:1.35;
}

.modal-legal-close{
    margin:0;
    min-width:auto;
    padding:0.25rem;
    color:rgba(var(--darkblue), 0.72);
}

.modal-legal-close:hover{
    background-color:rgba(var(--green), 0.12);
}

.modal-legal-content{
    flex:1 1 auto;
    overflow:auto;
    padding-top:1rem;
    padding-bottom:1rem;
    position:relative;
    z-index:1;
}

.modal.modal-legal .modal-footer,
.modal-legal-footer{
    position:static;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    border-top:1px solid rgba(var(--darkblue), 0.08);
    padding-top:0.75rem;
    padding-bottom:0.9rem;
    min-height:0;
    flex:0 0 auto;
    position:relative;
    z-index:3;
}

@media (max-width:600px){
    .modal-legal .modal-header,
    .modal-legal .modal-content,
    .modal-legal .modal-footer{
        padding-left:1rem;
        padding-right:1rem;
    }
}

/* MODALS END */

/* BUTTONS START */


.btn{border-radius:1px;}

.btn-login { border-width:1px; border-radius: 4px;}

.btn-login>i{margin-right: 5px;}

.btn-login:hover{background-color:transparent;}

.btn-register{
    background: #18C967 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    font-size:smaller;
    color:white;
    border:none !important;
}

.btn-search,
.card-action .btn.back-green {
    background-color: #18C967;
    border-radius: 1px;
    color: white;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    padding: 10px 20px !important;
    text-align: center;
    justify-content: center;
}

.btn-login:hover .fa-caret-right{
    color:#fff;
}

.btn-caret:hover{color:black;}

.btn-flat{
    /* height:inherit !important; */
}

.course-button, .course-button:hover{
    background: #B6B6B7 0% 0% no-repeat padding-box;
    opacity: 1;
    text-align: center;
    /*font: normal small-caps bold 14px/18px SemiBold, Montserrat; */
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    min-width:200px;
    max-width:250px;
    width:100%;
    box-shadow:none;
    border-radius:0px;
    font-weight:bolder;
    padding:15px;
    margin:0 auto;
    justify-content: center;
}

/* BUTTONS ENDE */


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #373736;
    opacity: 1; /* Firefox */
}

.float-right{float:right;}

.align-bottom{
    vertical-align: bottom;
}

video {
    object-fit: fill;
}

.row-flex{
    display:flex;
}

.flex {
    display: flex;
}

ol.ol-summary {
    counter-reset: cupcake;
    padding-left: 32px;
}

ol.ol-summary li {
   display: block;
}

ol.ol-summary li:before {
    content: counter(cupcake) ". ";
    counter-increment: cupcake;
    color: rgb(var(--blue));
}


xxol-summary li:before {
    margin-right: 10px;
    content: counter(item);
    background: lightblue;
    border-radius: 100%;
    color: rgb(var(--blue));
    width: 1.2em;
    text-align: center;
    display: inline-block;
}

.radio-bigger{

}

li.active{
    /*background-color:rgb(24, 201, 103) !important; */
}

.link-cancel{
    background-color:rgba(var(--grey), 0.4);
    padding:2px;
    padding-left:4px;padding-right:4px;
    border-radius:4px;
}

.link-cancel:hover{
    color:black !important;
}


/* HEADER AND NAVIGATION START  */

#nav-mobile{font-size:smaller;font-weight:bolder;}

#nav-mobile.sidenav {
    background-color: rgb(var(--darkblue)) !important;
}

#nav-mobile.sidenav li {
    background-color: transparent !important;
}

#nav-mobile.sidenav li > a,
#nav-mobile.sidenav .nav-mobile-item {
    margin: 0 12px;
    padding: 0 16px;
    min-height: 48px;
    line-height: 48px;
    font-size: inherit;
    font-weight: inherit;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    color: #ffffff !important;
    background-color: transparent !important;
    border-radius: 4px;
    box-sizing: border-box;
}

#nav-mobile.sidenav li.header-username-mobile {
    padding: 0;
    font-weight: inherit;
}

#nav-mobile.sidenav li > a:hover,
#nav-mobile.sidenav li > a:focus,
#nav-mobile.sidenav li.active > a {
    background-color: rgba(var(--white), 0.12) !important;
    color: #ffffff !important;
}

#nav-mobile.sidenav li > a.text-green {
    color: rgb(var(--green)) !important;
}

#nav-mobile.sidenav li > a.nav-mobile-accent {
    color: rgb(var(--green)) !important;
}

#nav-mobile.sidenav li > a.nav-mobile-accent:hover,
#nav-mobile.sidenav li > a.nav-mobile-accent:focus {
    color: rgb(var(--green)) !important;
}

#header-btn-login-mobile {
    background: #18C967 0% 0% no-repeat padding-box !important;
    border-radius: 4px;
    color: #ffffff !important;
}

#header-index h1{ /*visibility:hidden;display:none; */}

#header-nav-li-search{
    background: transparent !important;
}

.header-nav{
    background-color: rgb(var(--darkblue)) !important;
    box-shadow: none;
}

.header-nav-container{
    background: #1B3B72 0% 0% no-repeat padding-box;
    min-height: 90px;
    display: flex;
    align-items: center;
}

#header-nav-index, #header-nav-logout {
    background-color: rgb(27, 59, 114);
    min-height: 90px;
    display: flex;
    align-items: center;
}

#header-nav-terms, #header-nav-course, #header-nav-courses, #header-nav-faq, #header-nav-feedback, #header-nav-imprint, #header-nav-kurztipps, #header-nav-registration, #header-nav-password, #header-nav-pricing, #header-nav-shorttip, #header-nav-shorttips, #header-nav-search, #header-nav-supportrequest, #header-nav-username, #header-nav-widerruf, #header-nav-login{
   background: #1B3B72 0% 0% no-repeat padding-box;
}

.side-nav{}


.brand-logo{

}

.logo {
         /*
           display: inline-block;
           height: 100%;
         margin-top:35px; */
}

.logo>img {
  /*
    transform: translateY(-50%);
    background: rgb(27, 59, 114);
    background: rgba(27, 59, 114,0.0);
     vertical-align:middle;
*/
}

.caron{
    display:inline-block;
    width:24px;
    height:24px;
    background-image:url("/assets/layout/icons/icon-caron.svg");
    background-position:center center;
}

#nav-header {
    margin-top: 19px;
    margin-bottom: 18px;
    background-color: rgb(var(--darkblue)) !important;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Same horizontal inset as the former Materialize .nav-wrapper */
    padding: 0 4px;
    min-height: 48px;
}

#nav-header .header-nav__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#nav-header .header-nav__desktop {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

#nav-header .header-nav__links,
#nav-header .header-nav__auth {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav-header .header-nav__links {
    flex: 0 1 auto;
    justify-content: flex-start;
    padding-left: 1rem;
}

#nav-header .header-nav__auth {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
}

.header-links {
    color: #fff !important;
    background-color: transparent !important;
}

#nav-header .brand-logo,
#nav-header .sidenav-trigger,
#nav-header .sidenav-trigger i {
    color: #fff !important;
}

#nav-header .header-nav__links > li,
#nav-header .header-nav__auth > li {
    list-style: none;
    float: none;
}

#nav-header .header-nav__links > li > a,
#nav-header .header-nav__auth > li > a,
#nav-header .header-nav__auth > li.header-username {
    padding: 0.5rem 0.5rem;
    white-space: nowrap;
}

#nav-header .header-nav__auth > li > a.btn,
#nav-header .header-nav__auth > li > a.btn-flat {
    padding: 0 1rem;
    height: 36px;
    line-height: 36px;
}

@media (min-width: 1600px) {
    #nav-header .header-nav__links > li > a,
    #nav-header .header-nav__auth > li > a,
    #nav-header .header-nav__auth > li.header-username {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    #header-nav-li-search > a {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

#header-nav-li-search > a {
    background-image: url("/assets/layout/icons/icon-ki_search-23x23.png");
    background-repeat: no-repeat;
    background-position: top center;
    padding: 1.1rem 0.75rem 0.5rem;
}

.navbar-brand {color:white !important;}

.nav-link {color:white !important;}

.nav-link:hover {color:white !important;}


#header-btn-login, #header-btn-logout {border-style:solid; border-color:#fff; color:#fff;font-size:smaller;}

#header-btn-register {
    margin-left: 10px;
}

#header-btn-login:hover, #header-btn-login2:hover{background-color:#18C967;color:white;}

.header-username,
.header-username-mobile {
    color: #ffffff;
    font-weight: 600;
}

.header-username {
    padding: 0 0.8rem;
}


.list-search-ul{
    margin-top:-10px;
}

#login-image{
    background-image:url('/assets/layout/bilder/callcenter_worker_looking_at_laptop-295x645.jpg');
    background-size:auto;
    background-repeat: no-repeat;
    min-width:295px;
    min-height:645px;
}

#search1{
    column-count: 2;
    column-gap: 40px;
    padding-left: 0;
}

#search2{
    column-count: 1 ;
    column-gap: 40px;
    padding-left: 0;
}

#search3{
    column-count: 2;
    column-gap: 40px;
    padding-left: 0;
}

.list-search-li{
   background-image: url('/assets/layout/ellipse_grey.svg');
   background-repeat:no-repeat;
   background-size: 20px;
   list-style-type:none;
   line-height:20px;
   padding-left:34px;
   padding-bottom:6px;
}

.list-search-li:hover{
    cursor:pointer;
}

.list-search-li.active{
    background-image: url('/assets/layout/ellipse_check_blue.svg');
}

.search-image-vt{
  /*  padding-left:-72px; */
}

.search-image-vt img {
        object-fit: fill;

        /* or
          object-fit: cover; */
    /*  padding-left:-72px; */
}


#body-logout{
    background-image:url('/assets/layout/bg/businesswoman-sitting-on-desk-2560x1440.jpg');
    background-repeat:no-repeat;
    background-position: center top;
}

.page-sticky-footer {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-sticky-footer main {
    flex: 1 0 auto;
}

.page-sticky-footer #footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* Page headers: vertically center partner logo with headline */
header.back-lightblue .valign-wrapper > .row {
    align-items: center;
}

header.back-lightblue .header-logo-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

header.back-lightblue #header-logo-nem {
    display: block;
    max-width: 100%;
    height: auto;
}

@media only screen and (min-width: 993px) {
    header.back-lightblue #header-logo-nem {
        width: 94px;
        height: 80px;
    }
}

/* HEADER AND NAVIGATION END  */


#headline{
    /* font: normal normal 600 75px/80px Montserrat; */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
   /* font-size: 75px; */
    /* line-height:80px;*/
    letter-spacing: 0px;
    color: rgb(var(--darkblue)) !important;
    /* text-shadow: 0px 3px 6px #00000082;*/
    /* text-align:center; */
    /* opacity: 1;*/
    /* margin-top:18%; */
}

#header-kurs, #header-kurse{
    background-color: #EFF5F9;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    height:125px;
}

#header-kurs, #header-kurse h1{
    font-family: 'Montserrat', Helvetica, sans-serif;
    font-size: 30px;
    line-height: 37px;
    letter-spacing: 0px;
    color: #373736;
    text-transform: uppercase;
}

#logo-nem{
    height: 140px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#textarea-conditions{
    min-height:800px;
    width:100%;
   /* overflow:scroll; */
}

.searchcollections{
    list-style-type: none;
    position:relative !important;
}

.searchcircle{
   position: absolute;
    left:40px;

    width: 42px;
    height: 42px;

    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.searchcollections-item{}

.collection, .collection-item{
/*    border-style:none;
    border-radius: 0px;
    border-bottom:none !important;
    line-height:1rem !important; */
}


.collection-item.avatar {
    padding-left: 12px !important;
}

#video-player{

}



/* CARD ELEMENT START */

.card {
    border-radius:0px;
    max-width:300px;
    min-height:300px;
    --background-color: #fff;
    background-color: #fff;
}

.card.back-lightgrey {
    --background-color: #E6EAED;
    background-color: #E6EAED;
}

.card.back-blue {
    --background-color: #12C8FC;
    background-color: #12C8FC;
}

/* Sidebar info boxes (e.g. premium registration "Inhalt") */
.col.card {
    --background-color: #fff;
    background-color: #fff;
    max-width: none;
}

.col.card .card-content,
.col.card .card-image {
    background-color: #fff;
}

.card-action{border-top:none !important;margin-bottom:15px;}

.card-action a{display: flex;text-align: center;padding:10px !important;}

.card-button{padding-left:0px !important;padding-right:0px !important;}

.card-content{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    padding:12px !important;
    max-height:65% !important
}

.card-icon{
    width:20px !important;
    height:18px !important;
}

.card-image{
    width:100% !important;
    background-position:top left !important;
    max-height:160px;
}

.card-text{
    display:inline-block;
    height:18px !important;
    vertical-align: top;
}

.card-title{
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size:16px !important;
    letter-spacing: 0px;
    color: #373736;
    margin-top:0px;
    min-height:64px;
}

.card3{}

.card4{
    height:650px;
    min-height:600px !important;
}
/* CARD ELEMENT ENDE */

#body-index .index-feature-card-panel.back-lightblue {
    padding: 10px 10px 24px !important;
}

#body-index .index-feature-card-panel .card {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 993px) {
    #body-index .index-register-cta .button-register {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }
}

.dot {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
}

.check {
    background-image:url('/assets/layout/icons/icon-check-blue-large.svg');
    background-repeat:no-repeat;
    background-position:center;
}


ul.list>li:before {
    content: "\002B";
    padding-right:5px;
}



main{ }

#content {

}

.container,
.header-nav-inner.container {
    max-width: 1200px;
    width: 90% !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.header-nav-inner.container {
    padding-left: 12px;
    padding-right: 12px;
}

@media only screen and (min-width: 601px) {
    .container,
    .header-nav-inner.container {
        width: 90% !important;
    }
}

@media only screen and (min-width: 993px) {
    .container,
    .header-nav-inner.container {
        width: 90% !important;
    }
}

main .container {
    width: 90% !important;
    max-width: 1200px !important;
}


#content  li{
    margin-left:25px;
    line-height:26px;
    margin-bottom:15px;
}

#content ul li::before {
    content: "-";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: rgb(var(--darkblue));; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 0.8em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.content{
    line-height:26px;
}

.plans:hover {cursor:pointer;}


.content-bold{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height:24px;
    letter-spacing: 0px;
}

#list-searchresults{
    width:100%;
    min-width:1200px;
}

#body-faq .faq-search {
    margin-bottom: 1.25rem;
}

#body-faq .faq-search-label {
    display: block;
    font-weight: 600;
    color: rgb(var(--darkblue));
    margin-bottom: 0.5rem;
}

#body-faq .faq-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid rgba(var(--darkblue), 0.2);
    border-radius: 4px;
    background-color: #fff;
    padding: 0 0.5rem 0 0.75rem;
}

#body-faq .faq-search-icon {
    color: rgb(var(--darkblue));
    opacity: 0.75;
    font-size: 1.5rem;
}

#body-faq .faq-search-input {
    flex: 1 1 auto;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    height: 2.75rem;
    background: transparent;
}

#body-faq .faq-search-input:focus {
    outline: none;
}

#body-faq .faq-search-input-wrap:focus-within {
    border-color: rgb(var(--darkblue));
    box-shadow: 0 0 0 1px rgba(var(--darkblue), 0.15);
}

#body-faq .faq-search-status {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: #666;
    min-height: 1.25rem;
}

#body-faq .faq-search-empty {
    margin: 0.35rem 0 0;
    color: #c62828;
    font-weight: 500;
}

#body-faq mark.faq-highlight {
    background-color: rgba(var(--darkblue), 0.14);
    color: inherit;
    padding: 0 0.15em;
    border-radius: 2px;
}

#body-faq .faq-collapsible {
    margin-top: 0;
    border: none;
    box-shadow: none;
}

#body-faq .faq-collapsible > li.faq-item--hidden {
    display: none !important;
}

#body-faq .faq-collapsible > li {
    margin-bottom: 0.5rem;
    border: 1px solid rgba(var(--darkblue), 0.12);
    border-radius: 4px;
    overflow: hidden;
}

#body-faq .faq-collapsible .collapsible-header {
    font-weight: 600;
    color: rgb(var(--darkblue));
    background-color: rgb(var(--lightblue));
}

#body-faq .faq-collapsible .collapsible-header .material-icons {
    margin-right: 0.75rem;
    color: rgb(var(--darkblue));
    opacity: 0.85;
}

#body-faq .faq-collapsible .collapsible-body {
    padding: 0 1.25rem;
    background-color: #fff;
}

#body-faq .faq-collapsible > li.active > .collapsible-body {
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
}

#body-faq .faq-collapsible .collapsible-body ul {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    list-style-type: disc;
}

#body-faq .faq-collapsible .collapsible-body ul:last-child {
    margin-bottom: 0;
}

#body-faq .faq-collapsible .collapsible-body li {
    margin: 0 0 0.35rem;
    line-height: 26px;
}

#body-faq .faq-collapsible .collapsible-body p {
    line-height: 26px;
    margin: 0 0 0.75rem;
}

#body-faq .faq-collapsible .collapsible-body p:last-child {
    margin-bottom: 0;
}

#body-registration main .registration-page-content {
    padding-top: 1.5rem;
}

#body-course main .course-page-content {
    padding-top: 1.5rem;
}

#body-course .course-chapter-intro-row {
    align-items: flex-start;
}

#body-course .course-chapter-bottom-row {
    align-items: flex-start;
}

@media only screen and (min-width: 993px) {
    #body-course .course-chapter-layout--list-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
        column-gap: 1.5rem;
        grid-template-rows: auto auto 160px auto;
        align-items: start;
    }

    #body-course .course-chapter-layout__title {
        grid-column: 1;
        grid-row: 1;
    }

    #body-course .course-chapter-layout__title h3 {
        margin-top: 0;
    }

    #body-course .course-chapter-layout__meta {
        grid-column: 1;
        grid-row: 2;
    }

    #body-course .course-chapter-layout__gap {
        grid-column: 1;
        grid-row: 3;
    }

    #body-course .course-chapter-layout__list {
        grid-column: 1;
        grid-row: 4;
        min-width: 0;
    }

    #body-course .course-chapter-layout__sidebar {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: start;
        min-width: 0;
    }

    #body-course .course-chapter-layout__sidebar #trainer-card.card {
        margin-bottom: 1rem;
    }

    #body-course .course-chapter-layout__sysreq {
        min-height: 0;
        max-width: none;
    }
}

#body-course #trainer-card.card {
    min-height: 0;
    max-width: none;
}

#body-course .course-player-row {
    align-items: stretch;
}

#body-course .course-video-row {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.25rem;
}

#body-course .course-login-row {
    margin-bottom: 1rem;
}

#body-course #col-video {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    float: none;
}

#body-course #video-player {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
}

#body-course #video-player #video,
#body-course #video-player video {
    display: block;
    position: static !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
}

#body-course #col-logindata.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: none;
    min-height: 0;
}

#body-course #col-logindata.card > img {
    display: block;
}

#body-course #col-logindata.card > p,
#body-course #col-logindata.card > a,
#body-course #col-logindata.card > br,
#body-course #col-logindata.card > label {
    flex-shrink: 0;
}

@media only screen and (min-width: 993px) {
    #body-course .course-player-row {
        gap: 1.5rem;
        align-items: stretch;
    }

    #body-course #col-video {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #body-course #col-video > div {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #body-course #video-player {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 0;
    }

    #body-course #video-player #video,
    #body-course #video-player video {
        flex: 1 1 auto;
        width: 100% !important;
        max-width: 100%;
        margin: 0;
        min-height: 0;
        height: 100%;
        object-fit: fill;
    }

    #body-course #col-logindata.card {
        min-height: 0;
        max-width: none;
    }
}

#autoplay-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 30px 50px;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    max-width: calc(100% - 2rem);
    box-sizing: border-box;
}

#autoplay-countdown .autoplay-countdown__icon .material-icons {
    font-size: 48px;
    color: #4CAF50;
}

#autoplay-countdown .autoplay-countdown__icon {
    margin-bottom: 15px;
}

#autoplay-countdown .autoplay-countdown__title {
    font-weight: bold;
    margin-bottom: 10px;
}

#autoplay-countdown .autoplay-countdown__meta {
    margin-bottom: 15px;
    font-size: 14px;
    opacity: 0.8;
}

#autoplay-countdown .autoplay-countdown__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#autoplay-countdown .autoplay-countdown__btn {
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
}

#autoplay-countdown .autoplay-countdown__btn--cancel {
    background: #f44336;
}

#autoplay-countdown .autoplay-countdown__btn--play {
    background: #4CAF50;
}

@media only screen and (max-width: 992.99px) {
    #autoplay-countdown {
        padding: 20px 30px;
        font-size: 16px;
    }

    #autoplay-countdown .autoplay-countdown__icon .material-icons {
        font-size: 36px;
    }

    #autoplay-countdown .autoplay-countdown__title {
        font-size: 16px;
    }

    #autoplay-countdown .autoplay-countdown__meta {
        font-size: 12px;
    }

    #autoplay-countdown .autoplay-countdown__btn {
        padding: 8px 15px;
        font-size: 12px;
    }

    #body-course #button-hide-usercol,
    #body-course #button-show-usercol {
        display: none !important;
    }

    #body-course #video-player #video,
    #body-course #video-player video {
        width: 100% !important;
        max-width: 100% !important;
        object-fit: contain;
        aspect-ratio: 16 / 9;
        background-color: #000;
    }

    /* Video and login stack on narrow viewports; login first */
    #body-course .course-player-row {
        display: flex;
        flex-direction: column;
    }

    #body-course .course-player-row #col-logindata {
        order: 1;
        width: 100%;
        max-width: 100%;
    }

    #body-course .course-player-row #col-video {
        order: 2;
        width: 100%;
        max-width: 100%;
    }

    #body-course .course-chapter-meta-row {
        height: auto !important;
        line-height: 1.5 !important;
    }

    #body-course .course-chapter-meta-row > .col {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        padding-left: 0.75rem !important;
    }

    #body-course .course-chapter-meta-row > .col .valign-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
    }

    #body-course .course-chapter-meta-row i.left {
        float: none;
        margin-left: 0;
        flex-shrink: 0;
    }
}

@media only screen and (min-width: 993px) {
    #body-course .course-chapter-meta-row > .course-chapter-meta-chapter {
        padding-left: 15px !important;
    }
}

#body-course .course-chapter-list-duration-col {
    text-align: right;
}

#body-course .course-chapter-list-duration {
    white-space: nowrap;
}

@media only screen and (max-width: 992.99px) {
    #body-course .collapsible-body .course-chapter-list-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 0.5rem;
    }

    #body-course .collapsible-body .course-chapter-list-title,
    #body-course .collapsible-body .course-chapter-list-duration-col {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
    }

    #body-course .collapsible-body .course-chapter-list-duration-col {
        flex: 0 0 auto;
        max-width: 40%;
    }

    #body-course .course-chapter-duration-bracket {
        display: none;
    }
}

#header-registrierung{background-color:#EFF5F9;}

label{font-size:1rem;}

label.wrap {
    width:200px;
    overflow: hidden;
    height: 150px;
    position: relative;
    display: block;
}

/*
 * Materialize 2.3.3: keep multi-select checkbox and option text aligned.
 */
.select-dropdown.dropdown-content li > span > label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    height: auto;
    min-height: 18px;
    line-height: 1.1;
    margin: 0 !important;
    top: 0 !important;
    position: relative;
}

.select-dropdown.dropdown-content li > span > label > input[type="checkbox"] {
    flex: 0 0 auto;
}

.select-dropdown.dropdown-content li {
    min-height: 32px !important;
    line-height: 1.2 !important;
}

.select-dropdown.dropdown-content li > span {
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
}

/* Hide native filter selects until Materialize FormSelect runs (see initFormSelects). */
html.js select.selector:not(.browser-default) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.input-field:has(> select.selector:not(.browser-default)),
.shorttips-filter .col:has(> select.selector:not(.browser-default)) {
    min-height: 38px;
}

select.selector + .select-wrapper {
    margin-top: 4px;
    margin-bottom: 4px;
}

select.selector + .select-wrapper > input.select-dropdown,
.select-wrapper > input.select-dropdown {
    box-sizing: border-box;
    border: solid 1px #C2C2C2 !important;
    background-color: #fff;
    color: #373736;
    background-image: url("/assets/layout/select-selector-48x44.gif");
    background-repeat: no-repeat;
    background-position: right center;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 48px 0 14px !important;
}

.select-wrapper:focus-within{outline: none;}

#body-shorttips .shorttips-filter {
    margin-bottom: 0;
}

#body-shorttips .shorttips-filter > [class*="col"] {
    display: flex;
    align-items: center;
}

#body-shorttips .shorttips-filter select.selector + .select-wrapper {
    margin: 0;
    width: 100%;
}

#body-shorttips #input-search {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    line-height: 38px;
    padding: 0 14px;
    margin: 0;
    border: solid 1px #C2C2C2;
    background-color: #fff;
    color: #373736;
}

#body-shorttips #input-search::placeholder {
    color: #a9a9a9;
    opacity: 1;
}

#body-shorttips .shorttips-filter .btn {
    margin: 0;
}

/* Placeholder rows mirror videotraining cards; hide on listing like homepage slider */
#body-shorttips .shorttip-slider-spacer {
    visibility: hidden;
}

/* PAGINATOR START */
#paginatorNextLink:hover {background-color:transparent;color:rgb(var(--green));cursor: pointer;}
#paginatorPrevLink:hover {background-color:transparent;color:rgb(var(--green));cursor: pointer;}

#paginatorNextLink.active {background-color:transparent !important;}
#paginatorPrevLink.active {background-color:transparent !important;}

.pagination li, .pagination span{font-size: 14px;}

.pagination li.active{ background-color: rgb(var(--green)); }

.pagination li.disabled a{ background-color: transparent; }

.pagination li a:hover {background-color: rgb(var(--green));color:white;}

.paginatorLink, .paginatorPrevNext{color:dimgrey;}
.paginatorLink:active{background-color:rgb(var(--green));color:white;}
/* PAGINATOR ENDE */


.list-features{
    margin-left:-15px;
    list-style-type:none;
    font-size:10px;
}

.list-features>li.plus{

    background: url('/assets/layout/icons/icon-ok-green.svg') no-repeat 0 10px;
    padding-left:30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height:32px;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
    margin-bottom:12px;
}

.list-features>li.neutral{

    background: url('/assets/layout/icons/icon-minus-grey.svg') no-repeat 0px 14px;
    padding-left:30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height:32px;
    letter-spacing: 1px;
    text-align: left;
    color: #B6B6B7;
    text-transform: uppercase;
    margin-bottom:12px;
}

.circle{background: #E6EAED 0% 0% no-repeat padding-box;

  /*  width:57px;
    height:57px;
    line-height:57px; */
    }

.line{
    background-color: rgb(var(--darkblue));
    background-repeat:no-repeat;
    box-sizing: border-box;
    background-position:center;
    width:48px;
    height:1px;
    margin-top:24px;
}

.headline{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size:28px !important;
    line-height:38px;
    letter-spacing: 1px;
}

.icon-small {background-repeat:no-repeat;background-position: center;width:2rem;display: inline-block;text-indent: 100%;white-space: nowrap;overflow: hidden;}

.icon-button-play{background-image: url('/assets/layout/icons/icon-play-grey.svg');}
.icon-bubble{background-image: url('/assets/layout/icons/icon-bubble-grey.svg');}
.icon-stars{background-image: url('/assets/layout/icons/icon-stars-gold.svg');}
.icon-bulb{background-image: url('/assets/layout/icons/icon-bulb-grey.svg');}
.icon-hat{background-image: url('/assets/layout/icons/icon-hat-grey.svg');}
.icon-movie{background-image: url('/assets/layout/icons/icon-movie-grey.svg');}
.icon-book{background-image: url('/assets/layout/icons/icon-book-grey.svg');}
.icon-books{background-image: url('/assets/layout/icons/icon-books-grey.svg');}
.icon-book-closed{background-image: url('/assets/layout/icons/icon-book-closed-grey.svg');}

.secondary-content{padding-top:15px;}

/* Collapsible START */
.iconadd{
    display:inline-block ;
}
.iconremove{
    display:none !important;
}

li.active{
    /* background-color:transparent !important */
}

li.active .collapsible-header .material-icons.iconadd{
    display: none;
}

li.active .collapsible-header .material-icons.iconremove{
    display: inline-block !important;
}

ul.collapsible>li {}

.collapsible-body{background-color:transparent !important;}

.vjs-big-play-button{position:absolute; top:50% !important; left:45% !important;}
/* Collapsible END */

/* Slider Start  */


.slider .slides {
    background-color: transparent;
}

.slider {
    min-height:500px;
}

.slides {
    list-style-type: none;
    /* min-height:470px; */
}

ul.slides{
  /*  min-height:710px; */
    margin-bottom:20px;
}

i.small{ font-size: 22px; }

.flex-align-right{ justify-content: flex-end}


img.card-image{
    max-height:156px !important;
}

.slider .indicators {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}

.indicator-item-btn.active {
    background-color: rgb(var(--green)) !important;
}

@media (min-width: 601px) {
    /* Grid cols default to min-width:auto, so 4 card columns + gap can exceed the slide
       and Materialize clips the outer edges (missing left/right card borders). */
    #body-index .slider .slides li > [class*="listSize"] {
        box-sizing: border-box;
        padding-inline: 4px;
    }

    #body-index .slider .slides li .row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #body-index .slider .slides li .row > [class*="col"] {
        min-width: 0;
    }

    /* Materialize Slider animates li > .caption on slide change — keep a zero-size placeholder */
    #body-index .slider .slides > li > .caption {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
    }

    /* Materialize Slider replaces the first img in each slide with a fullscreen background */
    #body-index .slider .slides > li > img.slider-materialize-decoy {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none;
        overflow: hidden;
    }

    #body-index .slider .card.height-590 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #body-index .slider .card.height-590 .card-image {
        height: 156px;
        overflow: hidden;
    }

    #body-index .slider .card.height-590 .card-image img.card-image {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        max-height: 156px !important;
        object-fit: cover;
        background-size: cover;
        background-position: center top;
    }

    /* Invisible placeholder rows so Kurztipps align with videotraining cards */
    #body-index .slider .shorttip-slider-spacer {
        visibility: hidden;
    }
}

@media (min-width: 993px) {
    /* 4 equal tracks: 12-col span + gap overflow was clipping/shifting the first card */
    #body-index .slider .slides li .row.g-3 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #body-index .slider .slides li .row.g-3 > [class*="col"] {
        grid-column: auto !important;
    }
}


/* Slider End */

/* FOOTER START  */
#footer{background: #1B3B72 0% 0% no-repeat padding-box;color: #FFFFFF;margin-top:20px;}

#footer-ul{list-style:none;}
#footer-li-phone{background: url('/assets/layout/icons/icon-phone-green-small.svg') no-repeat left center;padding-left:22px;}
#footer-li-email{background: url('/assets/layout/icons/icon-email-green-small.svg') no-repeat left center;padding-left:22px;}
#footer-li-website{background: url('/assets/layout/icons/icon-globe-green-small.svg') no-repeat left center;padding-left:22px;}

.footer-list li a:hover{
    color: rgb(var(--green)) !important;
}

/* FOOTER END  */


/* MEDIA QUERIES START */

@media (min-width: 768px) {

}

@media (max-width:992px) {
    #body-index main {
        overflow-x: hidden;
    }

    #body-index .index-feature-cards-wrap.container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    #body-index .index-feature-cards-row.row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 1.5rem !important;
        box-sizing: border-box !important;
    }

    #body-index .index-feature-card-col {
        display: block !important;
        width: 100% !important;
        max-width: 360px !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        grid-column: unset !important;
        box-sizing: border-box !important;
    }

    #body-index .index-feature-card-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #body-index .index-feature-card-panel > h4.text-darkblue {
        align-self: stretch !important;
        width: 100% !important;
        font-size: 18px;
        line-height: 1.35;
        text-align: center !important;
        hyphens: none;
        overflow-wrap: normal;
        word-wrap: normal;
    }

    #body-index .index-feature-card-panel .card {
        width: 100% !important;
        max-width: 300px !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #body-index .index-feature-card-panel .card-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #body-index .index-feature-card-panel .card .w250 {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #body-index .index-register-cta-row.row {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #body-index .index-register-cta-row > .col {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #body-index .index-register-cta .button-register {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: calc(100% - 24px);
        text-align: center !important;
    }
}

@media (max-width:600px) {
    #body-index .card:not(.col.card) {
        margin-left: auto;
        margin-right: auto;
    }

    #body-index .height-780 {
        min-height: 0;
    }

    #body-index .slider {
        min-height: 0;
    }

    #body-index .slider .row > [class*="col"] {
        grid-column: span 12 !important;
    }

    #body-index .slider .card.height-590 {
        min-height: 0;
    }

    #body-index .back-lightblue > .container {
        width: 100%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    #body-index .back-lightblue > .container > .row > .col:not(.card-meta-icon-col) {
        grid-column: span 12;
    }

    #body-index .back-lightblue > .container > .row > .col > h4 {
        font-size: 20px;
        line-height: 1.35;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    #body-index .back-lightblue .card-meta-icons-row.row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0.5rem;
    }

    #body-index .back-lightblue .card-meta-icons-row > .col {
        flex: 1 1 0;
        min-width: 0;
        grid-column: span 4 !important;
        padding: 0;
    }

    #body-index .back-lightblue .card-meta-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-align: center;
    }

    #body-index .back-lightblue .card-meta-icon-label {
        display: block;
        font-size: 0.7rem;
        line-height: 1.2;
    }
}

@media (min-width:601px) {
    #body-index .back-lightblue .card-meta-icons-row.row {
        display: block !important;
        gap: 0;
    }

    #body-index .back-lightblue .card-meta-icons-row > .col {
        display: inline-block !important;
        width: auto !important;
        flex: none !important;
        grid-column: unset !important;
        padding-right: 6px;
        text-align: left;
    }

    #body-index .back-lightblue .card-meta-icon {
        display: inline;
        text-align: left;
    }

    #body-index .back-lightblue .card-meta-icon-label {
        display: none;
    }
}

@media (min-width: 601px) and (max-width:800px) {
    .index-feature-cards-row > .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .index-feature-cards-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .index-feature-cards-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width:800px) {
    /* #video{min-width:300px;max-width:600px;} */
    #header-index h1 {
        font-size: 30px !important;
        line-height: 36px !important;
        letter-spacing: 0.2px;
    }

    .headline {
        font-size: 22px !important;
        line-height: 30px;
        letter-spacing: 0.4px;
    }
}

@media (max-width:430px) {
    .index-feature-cards-wrap {
        box-sizing: border-box !important;
    }
}

@media (min-width:800px) {

    #container-index-register{min-height:125px;}

    #link-logo{
        /*margin-top:30px */;}

    .side-nav{margin-left:371px;}

}

@media (max-width:1200px) {

    #img-logo, #login-image{visibility: hidden;display:none;}

    #body-index{
     /*   background-image:url('/assets/layout/bg/man_laptop-1200x800.jpg'); */
        background-repeat:no-repeat;
        background-position: center top;
    }

    #headline{

        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600;
        font-size: 35px;
        line-height:40px;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 3px 6px #00000082;
        text-align:center;
    }

    #subline {color:white;}

}

@media (min-width:1201px) {

    h1 {
        font-size: 46px !important;
    }

    #body-index {
        /*   background-image:url('/assets/layout/bg/man_laptop-1952x1301.jpg'); */
        background-repeat: no-repeat;
        background-position: center top;
    }

    /* SELECT START */

    /* DROPDOWN START */

    #dropdown1.dropdown-content {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        overflow-y: clip;
        box-sizing: border-box;
    }

    #dropdown1.dropdown-content li > a {
        white-space: nowrap;
    }



    .dropdown-content:focus-visible + label {
        display:none !important;
    }

    .dropdown-content li.disabled > span{

    }


    .dropdown-content li > a {
        font-size: 13px;
      /*  padding-left: 12px; */
        color: white;

    }

    .dropdown-content li>a, .dropdown-content li>span {
        /* padding: 7px 8px; */
    }

    .dropdown-content li > a:hover {
        color: rgb(var(--orange));
    }

    svg.caret {
        visibility: hidden !important;
    }
    .input-field input{
        padding: 4px 8px;
    }

    .dropdown-content:focus-within,.dropdown-content:focus + label{
        visibility: hidden;
        display:none;
    }

    ul.select-dropdown.dropdown-content {
        min-width: 285px;
    }

    .select-dropdown li img {
        width: 20px;
        height: 20px;
        margin: 15px 15px;
    }

    .selector, .select-dropdown {

    /* padding: 3 px; */
    /* padding-left: 18 px !important; */
    }


    .multiple-select-dropdown {
        width: 95%;
        min-height: 160px;
    }

    .select-dropdown.dropdown-content li.disabled.selected {
        display: none;
    }

}


@media (max-width:1500px) {

    #img-logo{visibility: hidden;display:none;}

}

@media (min-width:1400px) {

    #bodycomment{border:solid 1px rgb(var(--grey)) !important; }

    .textarea {
        width: 90%;
        min-height: 300px;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(var(--grey));
        padding: 10px;
    }

    #body-supportrequest .support-form-select-row {
        width: 90%;
    }

    #body-supportrequest .support-form-select-row select.browser-default {
        min-width: 0;
    }

    #supportbodyLabel {
        margin-left: 10px;
    }

    #supportbodyLabel.active {
        transform: translateY(-30px) scale(0.8) !important;
    }


    .height4{
        height:800px;
    }

    .height8{
        height:1400px;
    }

    .xx-large{min-height:500px;}

    .listSize4 {

       /* height:610px !important; */
    }

    .listSize8 {

        height:1200px;
    }

    #header-btn-login, #header-btn-register, #header-btn-logout{
        height:44px !important;
        line-height:44px !important;
    }

    #header-btn-register:hover{
        background-color: rgb(var(--green)) !important;
        opacity:0.6;
        color: white;
        filter: alpha(opacity=50);

    }

}

@media (min-width:1600px) {

    #container-index-register{min-height:525px;}

    .search-description, .short-description{
        line-height:24px;
        min-height:70px;
        padding-top:10px;
    }

    .search-circle2{
        position:absolute;
        left:35px !important;
        top:20px !important;
    }

    abbr{text-decoration:none !important;}

    main{min-height:500px;}

}

@media only screen and (max-width: 1100px) {
    #header-logo-nem {
        display:none;
    }
}


@media (min-width:1920px) {

    #body-index{
    /*    background-image:url('/assets/layout/bg/man_laptop-1952x1301.jpg');
        background-repeat:no-repeat;
        background-position: center top;
        background-position-x: -50px;
        background-position-y: -150px; */
    }

    #link-logo{
        /*margin-top:30px; */
    }

    .side-nav{margin-left:371px;}

}

@media (min-width:2500px) {

    #link-logo{
        /* margin-left:20px; */
    }


    #body-index{
   /*     background-image:url('/assets/layout/bg/man_laptop-2560x1300.jpg');
        background-repeat:no-repeat;
        background-position: center top;
        background-size: 2560px 1240px; */
    }

    #headline {
        margin-top: 23%;
    }

    .button-register{height:48px;line-height:48px;}

}

@media (min-width:3840px) {

    #body-index{
    /*    background-image:url('/assets/layout/bg/man_laptop-3904x2602.jpg');
        background-repeat:no-repeat;
        background-position: center top;*/

    }

}

@media (prefers-color-scheme: dark) {

    .header-links {color:white !important;background-color:transparent !important;}
    #header-nav-index,#header-nav-course, #header-nav-courses, #header-nav-faq, #header-nav-feedback, #header-nav-imprint,  #header-nav-login, #header-nav-pricing, #header-nav-registration, #header-nav-search, #header-nav-shorttip, #header-nav-shorttips, #header-nav-terms, #header-nav-widerruf{background-color:transparent;}
    #header-course, #header-courses, #header-faq, #header-feedback, #header-imprint, #header-login, #header-pricing, #header-registration, #header-search, #header-shorttip, #header-shorttips, #header-terms, #header-widerruf {background-color:rgb(26, 28, 30) !important;}
    .nav-wrapper {}
    .dropdown-content li {color:white !important;}
    .dropdown-content li > a {color:white !important;}
    nav a.sidenav-trigger, nav a.sidenav-trigger i {color:#f1f5ff !important;}
    .card, .card-action, .card-content, .card-image, .card-title, .back-darkblue, .back-lightblue { box-shadow:none;color:white;}
    .back-darkblue {background-color:transparent;}
    .back-lightblue {background-color:rgb(26, 28, 30);color:white;}
    .back-lightgrey {background-color:rgb(26, 28, 30);color:white;}
    .back-blue {background-color:#24314a;color:#e7edfb;}
    .btn-register{color:white !important;}
    .header-nav{background-color:transparent !important;}
    .text-blue {color:#9ec0ff !important;}
    .text-black, label.text-black {color:#d7deec !important;}
    .text-darkblue {color:lightgrey;}
    .text-white {}
    .text-red{color:orangered;}
    .error{color: rgb(var(--white)) !important;}
    .button-blue{background-color:rgb(var(--green));}
    h1.text-darkblue, h2.text-darkblue, h3.text-darkblue, h4.text-darkblue, h5.text-darkblue {color:lightgrey;}
    #select-salutation, #select-country{background-color:rgb(18, 18, 18);color:grey;}
    #select-salutation option, #select-country option{color:grey;}
    #bodycomment{background-color:rgb(var(--grey));color:black}
    ::placeholder {
        color: grey;
        opacity: 1; /* Firefox */
    }

    #footer, .page-footer {background-color:transparent;}
    #input-search, .selector, .select-dropdown, input.browser-default, select.browser-default, .input-text-border {
        background-color: #121722 !important;
        color: #e7edfb !important;
        border-color: #4a556d !important;
    }
    .readonly {color: #d7deec !important;}
    main a:not(.btn):not(.btn-flat):not(.dropdown-trigger):not(.header-links) {
        color: #9ec0ff;
        text-decoration: underline;
    }
    main a:not(.btn):not(.btn-flat):not(.dropdown-trigger):not(.header-links):visited {
        color: #7fb2ff;
    }
    main a:not(.btn):not(.btn-flat):not(.dropdown-trigger):not(.header-links):hover {
        color: #cfe3ff;
    }

}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .header-links,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .header-username,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .header-username-mobile {
    color: #f1f5ff !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #nav-mobile,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #nav-mobile a,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #nav-mobile .nav-mobile-item {
    color: #f1f5ff !important;
    background-color: transparent !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #nav-mobile a.nav-mobile-accent {
    color: rgb(var(--green)) !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #dropdown1.dropdown-content,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .dropdown-content {
    background-color: #1a2232 !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .dropdown-content li > a {
    color: #e7edfb !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) nav a.sidenav-trigger,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) nav a.sidenav-trigger i {
    color: #f1f5ff !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .dropdown-content li > a:hover {
    color: #8fd0ff !important;
    background-color: #24314a !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .text-blue {
    color: #9ec0ff !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .text-black,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) label.text-black {
    color: #d7deec !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #header-search,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #header-pricing,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #header-shorttips,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #header-faq {
    background-color: #1a1f2a !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq .faq-collapsible > li {
    border-color: rgba(231, 237, 251, 0.15);
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq .faq-collapsible .collapsible-header {
    background-color: rgb(26, 28, 30);
    color: #e7edfb;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq .faq-collapsible .collapsible-header .material-icons {
    color: #9ec0ff;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq .faq-collapsible .collapsible-body {
    background-color: #121722;
    color: #d7deec;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq .faq-search-input-wrap {
    background-color: #121722;
    border-color: rgba(231, 237, 251, 0.2);
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq .faq-search-input {
    color: #e7edfb;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq .faq-search-label,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq .faq-search-icon {
    color: #e7edfb;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-faq mark.faq-highlight {
    background-color: rgba(158, 192, 255, 0.25);
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .back-blue {
    background-color: #24314a !important;
    color: #e7edfb !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .headline,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) h1.text-darkblue {
    color: #e7edfb !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #footer,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .page-footer {
    background-color: #131a28 !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #input-search,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .selector,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .select-dropdown,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) input.browser-default,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) select.browser-default,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .input-text-border {
    background-color: #121722 !important;
    color: #e7edfb !important;
    border-color: #4a556d !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-supportrequest .input-with-prefix__addon {
    background-color: #1a2233 !important;
    color: #e7edfb !important;
    border-color: #4a556d !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .readonly {
    color: #d7deec !important;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) main a:not(.btn):not(.btn-flat):not(.dropdown-trigger):not(.header-links) {
    color: #9ec0ff;
    text-decoration: underline;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) main a:not(.btn):not(.btn-flat):not(.dropdown-trigger):not(.header-links):visited {
    color: #7fb2ff;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) main a:not(.btn):not(.btn-flat):not(.dropdown-trigger):not(.header-links):hover {
    color: #cfe3ff;
}

#body-whats-new .whats-new-intro {
    margin-bottom: 1.5rem;
}

#body-whats-new .whats-new-filter > [class*="col"] {
    margin-bottom: 0.5rem;
}

#body-whats-new #whats-new-search {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-sizing: border-box;
}

#body-whats-new #whatsNewSearchButton,
#body-whats-new .whats-new-filter .btn-search {
    background-color: rgb(var(--darkblue));
    color: #fff;
}

#body-whats-new #whatsNewSearchButton:hover,
#body-whats-new #whatsNewSearchButton:focus,
#body-whats-new .whats-new-filter .btn-search:hover,
#body-whats-new .whats-new-filter .btn-search:focus {
    background-color: rgb(20, 48, 96);
    color: #fff;
}

#body-whats-new .whats-new-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#body-whats-new .whats-new-feed-item {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e6e6e6;
}

#body-whats-new .whats-new-feed-item:first-child {
    padding-top: 0;
}

#body-whats-new .whats-new-feed-thumb {
    flex: 0 0 300px;
    max-width: 300px;
    display: block;
    line-height: 0;
}

#body-whats-new .whats-new-feed-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

#body-whats-new .whats-new-feed-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#body-whats-new .whats-new-feed-meta {
    margin: 0;
    font-size: 0.85rem;
    color: #757575;
    line-height: 1.3;
}

#body-whats-new .whats-new-feed-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 700;
}

#body-whats-new .whats-new-feed-title a {
    color: inherit;
    text-decoration: none;
}

#body-whats-new .whats-new-feed-title a:hover {
    text-decoration: underline;
}

#body-whats-new .whats-new-feed-description {
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

#body-whats-new .whats-new-feed-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    font-size: 0.9rem;
    color: #616161;
}

#body-whats-new .whats-new-feed-details .whats-new-feed-product {
    margin: 0;
    font-size: 0.85rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: 0 1 auto;
}

#body-whats-new .whats-new-feed-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    color: #616161;
}

#body-whats-new .whats-new-feed-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

#body-whats-new .whats-new-feed-stat .material-icons {
    font-size: 1.1rem;
    color: #d3d3d4;
}

#body-whats-new .whats-new-feed-icons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

#body-whats-new .whats-new-feed-product {
    margin: 0;
    font-size: 0.85rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

#body-whats-new .whats-new-feed-body > .whats-new-feed-product {
    display: block;
}

#body-whats-new .whats-new-feed-product-version {
    text-transform: none;
}

#body-whats-new .whats-new-feed-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 11rem;
}

#body-whats-new .whats-new-feed-action .btn.course-button {
    white-space: nowrap;
}

#body-whats-new .whats-new-feed-button--videotraining,
#body-whats-new .whats-new-feed-button--videotraining:hover,
#body-whats-new .whats-new-feed-button--videotraining:focus {
    background-color: #18C967;
    color: #fff;
}

#body-whats-new .whats-new-feed-button--videotraining:hover {
    background-color: #14b35c;
}

#body-whats-new .whats-new-feed-button--shorttip,
#body-whats-new .whats-new-feed-button--shorttip:hover,
#body-whats-new .whats-new-feed-button--shorttip:focus {
    background-color: rgb(var(--darkblue));
    color: #fff;
}

#body-whats-new .whats-new-feed-button--shorttip:hover {
    background-color: rgb(20, 48, 96);
}

#body-whats-new .whats-new-feed-button--chapter,
#body-whats-new .whats-new-feed-button--chapter:hover,
#body-whats-new .whats-new-feed-button--chapter:focus {
    background-color: #e6b800;
    color: #1b3b72;
}

#body-whats-new .whats-new-feed-button--chapter:hover {
    background-color: #d4aa00;
}

#body-whats-new .whats-new-feed-context {
    margin: 0;
    font-size: 0.9rem;
    color: #616161;
    line-height: 1.4;
}

#body-whats-new .whats-new-feed-context a {
    color: rgb(var(--darkblue));
    text-decoration: none;
}

#body-whats-new .whats-new-feed-context a:hover {
    text-decoration: underline;
}

@media only screen and (min-width: 993px) {
    #body-whats-new .whats-new-feed-details {
        flex-wrap: nowrap;
        gap: 1.5rem;
    }

    #body-whats-new .whats-new-feed-details .whats-new-feed-product {
        flex: 0 0 auto;
        padding-right: 1.5rem;
        border-right: 1px solid #e0e0e0;
        margin-right: 0.25rem;
    }

    #body-whats-new .whats-new-feed-details .whats-new-feed-stat {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 992px) {
    #body-whats-new .whats-new-feed-item {
        flex-wrap: wrap;
        gap: 1rem;
    }

    #body-whats-new .whats-new-feed-thumb {
        flex: 0 0 220px;
        max-width: 220px;
    }

    #body-whats-new .whats-new-feed-body {
        flex: 1 1 14rem;
    }

    #body-whats-new .whats-new-feed-action {
        flex: 1 1 100%;
        justify-content: flex-start;
        min-width: 0;
        padding-left: calc(220px + 1rem);
    }
}

@media only screen and (max-width: 600px) {
    #body-whats-new .whats-new-feed-item {
        flex-direction: column;
    }

    #body-whats-new .whats-new-feed-thumb {
        flex: none;
        max-width: 100%;
    }

    #body-whats-new .whats-new-feed-action {
        padding-left: 0;
        justify-content: center;
    }
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-whats-new .whats-new-feed-item {
    border-bottom-color: #3a4254;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-whats-new .whats-new-feed-meta,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-whats-new .whats-new-feed-product {
    color: #b0b8c8;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-whats-new .whats-new-feed-stats {
    color: #c5ccd8;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-whats-new .whats-new-feed-details {
    color: #c5ccd8;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #body-whats-new .whats-new-feed-details .whats-new-feed-product {
    border-right-color: #3a4254;
}

/* MEDIA QUERIES END */