:root {
    --ise-warm-grey-100: #3C4448;
    --ise-white-100: #FFFFFF;
    --ise-orange-100: #F39900;
    --ise-orange-60: #F8C266;
    --ise-orange-20: #FDEBCC;
    --ise-purple-40: #C5A9FF;
    --ise-grey-50: #7F7F7F;
    --ise-grey-40:#999999;
    --ise-grey-30: #B2B2B2;
    --ise-grey-20: #CCCCCC;
    --ise-grey-08: #EBEBEB;
    --ise-grey-05: #F2F2F2;
    --ise-grey-03: #F7F7F7;
    --root-size: 16px;
    --ise-red: #FF1144;
    --ise-yellow: #FFCC00;
    --ise-green: #00CC33;
    --ise-black: #000000;

    --break-sm:480px;
    --break-md:768px;
    --break-lg:992px;
    --break-xl:1366px;
}

/* roboto-100 - latin */
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 100;
    src: local('Roboto Thin'), local('Roboto-Thin'),
    url('../fonts/Roboto-Thin.ttf') format('truetype')
}

/* roboto-300 - latin */
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'),
    url('../fonts/Roboto-Light.ttf') format('truetype')
}

/* roboto-regular - latin */
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
    url('../fonts/Roboto-Regular.ttf') format('truetype')
}

/* roboto-italic - latin */
@font-face {
    font-family: Roboto;
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'),
    url('../fonts/Roboto-Italic.ttf') format('truetype')
}

/* roboto-500 - latin */
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('../fonts/Roboto-Medium.ttf') format('truetype')
}

/* roboto-700 - latin */
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url('../fonts/Roboto-Bold.ttf') format('truetype')
}

/* roboto-900 - latin */
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    src: local('Roboto Black'), local('Roboto-Black'),
    url('../fonts/Roboto-Black.ttf') format('truetype')
}

html, body{
    padding: 0;
    margin: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--root-size);
    box-sizing: border-box;
    height: 100%;
    accent-color: var(--ise-orange-100);
    color: var(--ise-warm-grey-100);
}

body {
    background: var(--ise-grey-05);
}

p {
    margin: 0;
}

b {
    font-weight: 500;
}

label {
    font-weight: 500;
}

a {
    color: var(--ise-warm-grey-100);
}

section p {
    display: block;
    margin-bottom: 1rem;
}

.hidden {
    display: none !important;
}

.btn-outline,
button,
#backToApplication,
input[type="submit"] {
    font: inherit;
    background: none;
    border-radius: 4px;
    min-width: 80px;
    min-height: 32px;
    padding: 0 16px;
    border: 1px solid var(--ise-orange-100);
    color: var(--ise-orange-100);
    font-size: 0.938rem;
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 500;
}

.btn-outline:visited,
button:visited,
input[type="submit"] {
    color: var(--ise-orange-100);
}

.btn-outline:hover,
.btn-outline:focus,
button:hover,
input[type="submit"]:hover, button:focus,
input[type="submit"]:focus {
    outline: 4px solid rgb(from var(--ise-orange-100) r g b / 0.2);;
}

.btn-outline:active,
button:active,
input[type="submit"]:active {
    outline: 4px solid rgb(from var(--ise-orange-100) r g b / 0.4);;
}

input[type="text"], input[type="password"], select {
    min-height: calc( var(--root-size) * 2 - 2px);
    min-width: calc( var(--root-size) * 4);
    border-radius: 4px;
    padding: 0 8px;
    line-height: 32px;
    font-size: 0.938rem;
    border: 1px solid var(--ise-grey-40);
    outline: none;
    box-shadow: inset 1px 1px 2px 0 rgb(from var(--ise-black) r g b / 0.25);
}

input[type="text"]:hover, input[type="password"]:hover, select:hover {
    outline: 4px solid rgb(from var(--ise-orange-100) r g b / 0.2);
}

input[type="text"]:active, input[type="password"]:active,
input[type="text"]:focus, input[type="password"]:focus{
    border-color:  var(--ise-orange-100);
}

select {
    width: 100%;
    background: none;
}

select option:hover {
    background-color: rgb(from var(--ise-orange-100) r g b / 0.2);
}

select option:active {
    background-color: rgb(from var(--ise-orange-100) r g b / 0.4);
}

.btn-contain, #backToApplication {
    color: white !important;
    background: var(--ise-orange-100) !important;
}

.btn-contain:disabled {
    background: var(--ise-grey-30) !important;
    color: var(--ise-white-100) !important;
    border-color: var(--ise-grey-30) !important;
    cursor: default !important;
}
.btn-contain:disabled:hover {
    outline: 2px solid rgb(from var(--ise-grey-30) r g b / 0.2);
}

header.ise {
    background-color: var(--ise-warm-grey-100);
    padding-left: 24px;
    padding-right: 24px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 80px;
}

header.ise a img {
    height: 2rem;
}

header.ise nav {
    display: flex;
    align-items: center;
    transition-property: width;
    transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
    transition-duration: 250ms;
}

header.ise nav .language img {
    width: 22px;
    height: 22px;
    margin-right: 8px;
}

header.ise .desktop {
    display: none !important;
}

header.ise nav .language:hover,
header.ise nav .language:focus {
    color: var(--ise-white-100);
    box-shadow: 0 0 0 4px rgb(from var(--ise-white-100) r g b / 0.2);
    transition: 0.3s;
}

header.ise nav {
    position: fixed;
    background: white;
    right: 0;
    top: 0;
    width: 0;
    min-height: 100%;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: -2px 0 4px 0 rgb(from var(--ise-black) r g b / 0.2);
    z-index: 200;
    display: flex;
}

header.ise .btn-icon-like {
    border: none;
}

header.ise .btn-icon-like:hover {
    background: rgb(from var(--ise-orange-100) r g b / 0.2);
}

header.ise .btn-icon-like:active {
    background: rgb(from var(--ise-orange-100) r g b / 0.4);
}

body.mobile-menu-open::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background: rgb(from var(--ise-black) r g b / 0.4);
    z-index: 100;
}

body.mobile-menu-open header.ise nav {
    width: 100%;
}

header.ise nav a{
    padding: 0.5rem 1.25rem;
    margin: 0;
    display: block;
    width: 100%;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 2.25rem;
    letter-spacing: 0.2px;
    color: #3C4448;
    text-decoration: none;
    box-sizing: border-box;
    border-bottom: 1px solid var(--ise-grey-08);
}

header.ise nav .language {
    margin: 0.5rem 1.25rem;
}

header.ise nav .language:hover {
    color: var(--ise-orange-100);
}

header.ise nav .mobile-menu-header {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--ise-grey-08);
    display: flex;
    justify-content: space-between;
    height: 80px;
    box-sizing: border-box;
    align-items: center;
    width: 100%;
    min-width: 22rem;
    overflow: hidden;
}

header.ise nav .mobile-menu-header img {
    height: 2rem;
}

header.ise nav .mobile-menu-header button img {
    height: 44px;
}

header.ise nav .mobile-menu-header button:hover {
    background: rgb(from var(--ise-orange-100) r g b / 0.2);
}

header.ise nav .language::after {
    content: '';
    display: block;
    border-bottom: 1px solid var(--ise-grey-08);
    width: 100%;
    margin-top: 0.5rem;
    position: absolute;
    right: 0;
    margin-top: 3rem;
}

header.ise nav a:hover {
    background: rgb(from var(--ise-orange-100) r g b / 0.2);
}

@media screen and (min-width:480px) {
    body.mobile-menu-open header.ise nav {
        width: 22.5rem;
    }
}

@media screen and (min-width:991px) {
    header.ise .mobile {
        display: none !important;
    }

    header.ise .desktop {
        display: initial !important;
    }

    header.ise nav a {
        color: var(--ise-white-100);
        margin: 0;
        padding: 0;
        width: auto;
        border-bottom: none;
    }

    header.ise nav a.log-in {
        border-left: 1px solid var(--ise-grey-50);
        border-right: 1px solid var(--ise-grey-50);
        padding: 0 1.5rem;
        margin: 0 1.5rem;
    }

    header.ise nav {
        position: relative;
        background: transparent;
        flex-direction: row;
        display: flex;
        box-shadow: none;
        align-items: center;
        width: auto;
    }

    header.ise nav a:hover {
        color: var(--ise-orange-100);
        background: transparent;
    }

    header.ise nav .language {
        margin: 0;
        border:none;
        color: var(--ise-white-100);
        outline: 1px solid var(--ise-white-100);
        border-radius: 4px;
        line-height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        padding: 0 1rem;
        font-weight: normal;
    }

    header.ise nav .language:hover {
        color: var(--ise-white-100);
    }

    header.ise nav .language::after {
        content: none;
    }
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.form-group label {
    margin-bottom: 8px;
}

input[aria-invalid="true"]{
    border-color: var(--ise-red);
    margin-bottom: 8px;
}

#input-error-otp-code,
#input-error-otp-label,
#input-error {
    color: var(--ise-red);
    position: relative;
    width: 100%;
}

#input-error-otp-code::after,
#input-error-otp-label::after,
#input-error::after {
    position: absolute;
    top: -36px;
    right: 5px;
    content: " ";
    width: 22px;
    height: 22px;
    display: block;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" xml:space="preserve"><style type="text/css">.st0{fill:%23FF1144;}</style><path class="st0" d="M84.45,73.86l-36.9-63.82C46.76,8.68,45.38,8,44,8s-2.76,0.68-3.55,2.05L3.55,73.86C1.98,76.59,3.95,80,7.1,80h73.8C84.05,80,86.02,76.59,84.45,73.86z M41.5,31.5c0-1.38,1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5v22c0,1.38-1.12,2.5-2.5,2.5s-2.5-1.12-2.5-2.5V31.5z M44,69c-1.93,0-3.5-1.57-3.5-3.5S42.07,62,44,62s3.5,1.57,3.5,3.5S45.93,69,44,69z"/></svg>');
}

.form-group label{
        width: 100%;
}
.form-group input{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.label-wrapper,
.form-buttons,
.input-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.label-wrapper > label {
    width: 100%;
}

.pw-hide,
.pw-show {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
}

.pw-show{
    background-image: url('data:image/svg+xml,<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" style="enable-background:new 0 0 88 88;" xml:space="preserve"><path fill="%233C4448" d="M1.7,48.9c-2.3-2.9-2.3-6.9,0-9.8C8,31,22.6,16,44,16c6,0,11.5,1.2,16.4,3.1l-3.1,3.1C53,20.8,48.5,20,44,20c-8.5,0-16.8,2.6-24.6,7.9c-6.7,4.5-11.6,9.9-14.6,13.7c-1.1,1.4-1.1,3.5,0,4.9c3,3.8,7.9,9.2,14.5,13.7L16.5,63C9.8,58.3,4.7,52.8,1.7,48.9z M44,60c8.8,0,16-7.2,16-16c0-2.2-0.5-4.3-1.3-6.2l-21,21C39.7,59.5,41.8,60,44,60z M28,44c0,2.2,0.5,4.3,1.3,6.2l21-21c-1.9-0.8-4-1.3-6.2-1.3C35.2,28,28,35.2,28,44z M86.3,39.1c-3-3.9-8.1-9.4-14.8-14.1l-2.9,2.9c6.7,4.5,11.6,9.9,14.6,13.7c1.1,1.4,1.1,3.5,0,4.9c-3,3.8-7.9,9.2-14.6,13.7C60.8,65.4,52.5,68,44,68c-4.5,0-9-0.8-13.3-2.2l-3.1,3.1C32.5,70.8,38,72,44,72c21.4,0,36-15,42.3-23.1C88.6,46,88.6,42,86.3,39.1z M81.4,6.6c-0.8-0.8-2.1-0.8-2.8,0l-72,72c-0.8,0.8-0.8,2.1,0,2.8C7,81.8,7.5,82,8,82s1-0.2,1.4-0.6l72-72C82.2,8.6,82.2,7.4,81.4,6.6z"/></svg>');
}

.pw-hide {
    background-image: url('data:image/svg+xml,<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" style="enable-background:new 0 0 88 88;" xml:space="preserve"><path fill="%233C4448" d="M86.3,39.1C80,31,65.4,16,44,16S8,31,1.7,39.1c-2.3,2.9-2.3,6.9,0,9.8C8,57,22.6,72,44,72s36-15,42.3-23.1C88.6,46,88.6,42,86.3,39.1z M83.2,46.5c-3,3.8-7.9,9.2-14.6,13.7C60.8,65.4,52.5,68,44,68s-16.8-2.6-24.6-7.8c-6.7-4.5-11.6-9.9-14.6-13.7c-1.1-1.4-1.1-3.5,0-4.9c3-3.8,7.9-9.2,14.6-13.7C27.2,22.6,35.5,20,44,20s16.8,2.6,24.6,7.9c6.7,4.5,11.6,9.9,14.6,13.7C84.3,43,84.3,45,83.2,46.5z M44,28c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S52.8,28,44,28z M40,44c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S42.2,44,40,44z"/></svg>');
}

.ise-main {
    flex-basis: 100%;
    padding: 1.25rem;
    background: var(--ise-white-100);
}

@media screen and (min-width:1200px) {
    .ise-main {
        padding: 1.5rem 3.5rem;
    }
}

.ise-main-second-layer {
    flex-basis: 100%;
    padding: 4rem 2rem;
    margin: 0 auto;
    background: white;
    width: 100%;
    box-sizing: border-box;
}

@media screen and (min-width:1366px) {
    .ise-main-second-layer {
        box-shadow: 0 0 4px 0 rgb(from var(--ise-black) r g b / 0.2),
        0 0 4px 0 rgb(from var(--ise-black) r g b / 0.2);
        margin: 0 auto;
        max-width: 991px;
        background: white;
        padding: 4rem 6rem;
        width: 100%;
        box-sizing: border-box;
    }
    .ise-main-second-layer .ise-main-content header {
        width: 100%;
    }
}

.ise-body {
    display: flex;
    flex-direction: column;
}

.input-group {
    display: flex;
    width: 100%;
}

.pw-field {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -2rem;
    width: 2rem;
    max-width: 2rem;
    min-width: 2rem;
    height: calc(2rem + 2px);
    padding: 0;
    border: none;
    outline: none;
}

.pw-field:focus{
    outline: none;
    background: rgb(from var(--ise-orange-100) r g b / 0.4);
}

.pw-field:hover{
    outline: none;
    background: rgb(from var(--ise-orange-100) r g b / 0.2);
}

.pw-field:active {
    outline: none;
    background: rgb(from var(--ise-orange-100) r g b / 0.6);
}

.alert-success,
.pf-m-warning,
.alert-warning,
.alert-info,
.alert-error {
    border-left: 2px solid var(--ise-red);
    margin-bottom: 1rem;
    padding: 1px 0 1px 8px;
    position: relative;
    margin-left: 2rem;
    color: var(--ise-warm-grey-100);
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
}

.alert-success:before,
.pf-m-warning:before,
.alert-info:before,
.alert-warning:before,
.alert-error:before {
    content: " ";
    display: block;
    width: 22px;
    height: 22px;
    top: 0;
    position: absolute;
    left: -32px;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" xml:space="preserve"><style type="text/css">.st0{fill:%23FF1144;}</style><path class="st0" d="M84.45,73.86l-36.9-63.82C46.76,8.68,45.38,8,44,8s-2.76,0.68-3.55,2.05L3.55,73.86C1.98,76.59,3.95,80,7.1,80h73.8C84.05,80,86.02,76.59,84.45,73.86z M41.5,31.5c0-1.38,1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5v22c0,1.38-1.12,2.5-2.5,2.5s-2.5-1.12-2.5-2.5V31.5z M44,69c-1.93,0-3.5-1.57-3.5-3.5S42.07,62,44,62s3.5,1.57,3.5,3.5S45.93,69,44,69z"/></svg>');
}

.pf-m-warning,
.alert-info,
.alert-warning {
    border-left: 2px solid var(--ise-yellow);
}

.alert-success {
    border-left: 2px solid var(--ise-green);
}

.pf-c-alert__title {
    margin: 0;
    font-weight: 500;
}

.pf-m-warning:before,
.alert-info:before,
.alert-warning:before {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" xml:space="preserve"><style type="text/css">.st0{fill:%23FFCC00;}</style><path class="st0" d="M44,4C21.91,4,4,21.91,4,44c0,22.09,17.91,40,40,40c22.09,0,40-17.91,40-40C84,21.91,66.09,4,44,4z M41.5,25.5c0-1.38,1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5v22c0,1.38-1.12,2.5-2.5,2.5s-2.5-1.12-2.5-2.5V25.5z M44,63c-1.93,0-3.5-1.57-3.5-3.5S42.07,56,44,56s3.5,1.57,3.5,3.5S45.93,63,44,63z"/></svg>');
}

.alert-success:before {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" xml:space="preserve"><style type="text/css">.st0{fill:%2300CC33;}</style><path class="st0" d="M44,4C21.91,4,4,21.91,4,44c0,22.09,17.91,40,40,40c22.09,0,40-17.91,40-40C84,21.91,66.09,4,44,4z M65.06,32.57l-26.4,26.4c-0.47,0.47-1.1,0.73-1.77,0.73s-1.29-0.26-1.77-0.73L22.94,46.78c-0.97-0.97-0.97-2.56,0-3.54s2.56-0.97,3.54,0l10.42,10.42l24.63-24.63c0.97-0.97,2.56-0.97,3.54,0S66.03,31.59,65.06,32.57z"/></svg>');
}

.pf-screen-reader {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

h1 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 900;
    margin: 0 0 1rem;
    word-wrap: anywhere;
}

@media screen and (min-width:768px) {
    .form-group {
        flex-wrap: wrap;
    }

    .form-group label,
    .form-group .label-wrapper{
        width: 40%;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 40%;
    }

    .label-wrapper > label {
        width: 100%;
        margin-bottom: 0;
    }

    .form-group > input,
    .form-group .input-group,
    .form-group .input-wrapper{
        width: 60%;
    }

    #input-error {
        margin-left: 40%;
    }

    #kc-recovery-code-login-form #input-error {
        margin-left: 0;
    }

    #kc-form-buttons {
        width: 60%;
        justify-content: flex-end;
    }

    .btn-contain {
        width: auto !important;
    }

    .form-options-wrapper {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    #kc-otp-login-form .form-buttons{
        width: 100%;
    }

    #kc-otp-login-form .form-buttons input{
        align-self: flex-end;
    }
}

.recoveryCodesActionButtons {
    display: flex;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.recoveryCodesActionButtons button {
    margin-bottom: 1rem;
}

#kc-recovery-codes-list {
    list-style: none;
    margin: 2rem 0;
    flex-wrap: wrap;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 9px;
}

@media screen and (min-width:480px) {
    #kc-recovery-codes-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width:768px) {
    #kc-recovery-codes-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width:992px) {
    #kc-recovery-codes-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

#kc-recovery-codes-list li {
    background: var(--ise-grey-05);
    border-radius: 4px;
    padding: 0.5rem;
    text-align: center;
    color: var(--ise-warm-grey-100);
}

#printRecoveryCodes,
#downloadRecoveryCodes,
#copyRecoveryCodes {
    position: relative;
    min-width: calc(2rem + 22px);
    max-width: calc(2rem + 22px);
    color: white;
    overflow: hidden;
}

#printRecoveryCodes::before,
#downloadRecoveryCodes::before,
#copyRecoveryCodes::before {
    position: absolute;
    top: 5px;
    left: 1rem;
    content: " ";
    width: 22px;
    height: 22px;
    display: block;
}

#printRecoveryCodes::before {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" style="enable-background:new 0 0 88 88;" xml:space="preserve"><style type="text/css">.st0{fill:%23F39900;}</style><path class="st0" d="M68,24V12c0-2.2-1.8-4-4-4H24c-2.2,0-4,1.8-4,4v12c-6.6,0-12,5.4-12,12v20c0,2.2,1.8,4,4,4h8v16c0,2.2,1.8,4,4,4h40c2.2,0,4-1.8,4-4V60h8c2.2,0,4-1.8,4-4V36C80,29.4,74.6,24,68,24z M24,12h40v12H24V12z M24,76V48h40v28H24z M76,56h-8V44H20v12h-8V36c0-4.4,3.6-8,8-8h48c4.4,0,8,3.6,8,8V56z M71,36c0,1.7-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3S71,34.3,71,36z M60,70c0,1.1-0.9,2-2,2H30c-1.1,0-2-0.9-2-2s0.9-2,2-2h28C59.1,68,60,68.9,60,70z M60,62c0,1.1-0.9,2-2,2H30c-1.1,0-2-0.9-2-2s0.9-2,2-2h28C59.1,60,60,60.9,60,62z M60,54c0,1.1-0.9,2-2,2H30c-1.1,0-2-0.9-2-2s0.9-2,2-2h28C59.1,52,60,52.9,60,54z"/></svg>');
}

#copyRecoveryCodes::before {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" style="enable-background:new 0 0 88 88;" xml:space="preserve"><style type="text/css">.st0{fill:%23F39900;}</style><path class="st0" d="M60,76h4v4c0,2.2-1.8,4-4,4H16c-2.2,0-4-1.8-4-4V20c0-2.2,1.8-4,4-4h4v4h-4v60h44V76z M76,8v60c0,2.2-1.8,4-4,4H28c-2.2,0-4-1.8-4-4V8c0-2.2,1.8-4,4-4h44C74.2,4,76,5.8,76,8z M72,8H28v60h44V8z"/></svg>');
}

#downloadRecoveryCodes::before {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88 88" style="enable-background:new 0 0 88 88;" xml:space="preserve"><style type="text/css">.st0{fill:%23F39900;}</style><path class="st0" d="M80,58v18c0,2.2-1.8,4-4,4H12c-2.2,0-4-1.8-4-4V58c0-1.1,0.9-2,2-2s2,0.9,2,2v18h64V58c0-1.1,0.9-2,2-2S80,56.9,80,58z M42.6,65.4C43,65.8,43.5,66,44,66s1-0.2,1.4-0.6l22-22c0.8-0.8,0.8-2,0-2.8s-2.1-0.8-2.8,0L46,59.2V10c0-1.1-0.9-2-2-2s-2,0.9-2,2v49.2L23.4,40.6c-0.8-0.8-2-0.8-2.8,0s-0.8,2,0,2.8L42.6,65.4z"/></svg>');
}

@media screen and (min-width:768px) {
    .recoveryCodesActionButtons {
        flex-direction: row;
    }

    #printRecoveryCodes,
    #downloadRecoveryCodes,
    #copyRecoveryCodes {
        position: relative;
        min-width: auto;
        max-width: 100%;
        color: var(--ise-orange-100);
        padding-left: calc(1.5rem + 22px);
        overflow: initial;
    }
}

#kc-recovery-codes-settings-form {
    margin: 1rem 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#kc-recovery-codes-settings-form #kc-form-options {
    width: 100%;
}

#kc-recovery-codes-settings-form .form-options-wrapper .checkbox {
    width: 100%;
}

#kc-recovery-codes-settings-form .form-options-wrapper label {
    width: 100%;
    margin-bottom: 1rem;
}

#kc-recovery-codes-settings-form .form-options-wrapper label input{
    width: auto;
}

#kc-select-credential-form {
    width: 100%;
}

#kc-select-credential-form button {
    margin-bottom: 2rem;
    width: 100%;
    padding: 8px;
}

#cancelRecoveryAuthnCodesBtn {
    margin-top: 1rem;
    width: 100%;
}

@media screen and (min-width:768px) {
    #kc-select-credential-form {
        max-width: 60%;
    }

    #kc-recovery-codes-settings-form input+button {
        margin-left: 1rem;
    }

    #cancelRecoveryAuthnCodesBtn {
        margin-top: 0;
        width: auto;
    }
}

#kc-recovery-code-login-form .form-group #kc-form-buttons input {
    align-self: flex-end;
}

#kc-recovery-codes-settings-form #kc-form-options {
    border-bottom: 1px solid var(--ise-grey-20);
    margin-bottom: 1.5rem;
    padding-bottom: 4.5rem
}

#kc-recovery-codes-settings-form {
    border-bottom: 1px solid var(--ise-grey-20);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem
}

aside {
    margin: 2rem 0;
    font-size: 0.938rem;
    line-height: 1.25;
    color: var(--ise-grey-50);
}

aside h4 {
    font-weight: 500;
    line-height: 1.5;
    font-size: 1.125rem;
    margin: 0 0 1.5rem;
}

.checkbox label {
    border-radius: 4px;
    min-height: 2rem;
    display: flex;
    align-items: center;
}

.checkbox label,
.checkbox-neighbour + label {
    font-weight: 400;
}

.checkbox label:hover {
    background: rgb(from var(--ise-orange-100) r g b / 0.2);
}

.checkbox label:active,
.checkbox label:focus{
    background: rgb(from var(--ise-orange-100) r g b / 0.4);
}

.checkbox label input {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.checkbox-neighbour {
    background: white;
    z-index: 10;
    margin-left: 8px !important;
    margin-top: 9px !important;
}

.checkbox-neighbour + label {
    border-radius: 4px;
    min-height: 2rem;
    display: flex;
    align-items: center;
    margin-left: calc(-16px - 7px);
    padding-left: calc(1rem + 14px);;
    z-index: 9;
    padding-right: 1rem;
    width: 100%;
}

.checkbox-neighbour + label:hover {
    background: rgb(from var(--ise-orange-100) r g b / 0.2);
}

.checkbox-neighbour + label:active,
.checkbox-neighbour + label:focus {
    background: rgb(from var(--ise-orange-100) r g b / 0.4);
}

.form-options {
    display: flex;
}

nav {
    display: flex;
    gap: 1rem;
}

nav *:last-child {
    margin-left: auto;
}

#kc-totp-settings-form nav {
    border-top: 1px solid var(--ise-grey-20);
    padding-top: 1.5rem;
    margin-top: 3rem;
    flex-direction: column-reverse;
}

#kc-totp-settings-form nav *:last-child {
    margin-left: 0;
}

#kc-totp-settings-form nav *:first-child {
    margin-left: 0;
}

@media screen and (min-width:768px) {
    #kc-totp-settings-form nav {
        flex-direction: row-reverse;
    }

    #kc-totp-settings-form nav .otp-step-next {
        margin-left: auto;
    }
}

.totpsecret {
    text-align: center;
    margin-bottom: 1.5rem;
}

.totpsecret-copy-button {
    margin: 0 auto 4rem;
}

#kc-totp-secret-qr-code {
    margin: 0 auto;
    display: block;
}

#kc-totp-secret-key {
    background: var(--ise-grey-05);
    border-radius: 4px;
    padding: 0.5rem;
    text-align: center;
    color: var(--ise-warm-grey-100);
    line-height: 1.5;
}

.otp-configuration-step  .input-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
}

.otp-configuration-step  .input-wrapper label {
    width: auto;
    flex-basis: auto;
}

.otp-configuration-step .checkbox label {
    width: auto;
    padding-right: 0.5rem;
}

.otp-configuration-step .checkbox input {
    width: auto;
}

#kc-form-login #kc-form-options {
    width: 100%;
    margin-bottom: 0;
}

#kc-form-login #kc-form-options label input#rememberMe {
    width: auto;
    margin: 0 .5rem;
}

@media screen and (min-width:768px) {
    #kc-form-login #kc-form-buttons {
        width: 100%;
    }

    #kc-form-login #kc-form-options .checkbox label {
        width: 100%;
        display: grid;
        grid-template-columns: 40% 60%;
        justify-items: start;
    }

    #kc-form-login #kc-form-options .checkbox label:hover {
        background: none;
    }

    #kc-form-login #kc-form-options label input#rememberMe {
        width: auto;
        order: 2;
        margin: 0;
    }
}

@media screen and (min-width:991px) {
    .ise-main-content header,
    #kc-recovery-code-login-form,
    #kc-otp-login-form,
    #kc-form-login {
        width: 60%;
    }

    #kc-recovery-code-login-form #kc-form-buttons,
    #kc-form-login #kc-form-buttons {
        width: 100%;
    }
}

#kc-info {
    margin-bottom: 2rem;
}

#kc-reset-password-form #kc-form-options{
    width: 100%;
    justify-content: flex-end;
    order: 2;
    margin-top: 2rem;
}

@media screen and (min-width:768px) {
    #kc-reset-password-form .form-buttons {
        width: 100%;
        flex-direction: row;
    }
}

@media screen and (min-width:991px) {
    #kc-reset-password-form {
        width: 60%;
    }

    #kc-info {
        width: 60%;
    }
}

#kc-passwd-update-form {
    margin-top: 2rem;
}

#kc-passwd-update-form #kc-form-options {
    width: 100%;
    border-bottom: 1px solid var(--ise-grey-20);
    margin-bottom: 1.5rem;
    padding-bottom: 3rem
}

#kc-passwd-update-form #kc-form-options .form-options-wrapper {
    width: 100%;
}

#kc-passwd-update-form #kc-form-options .form-options-wrapper input {
    width: auto;
}

#kc-passwd-update-form #kc-form-buttons *:first-child {
    margin-bottom: 1rem;
}

#kc-passwd-update-form .form-group .label-wrapper {
    font-weight: bold;
}

#kc-passwd-update-form #input-error-password-confirm,
#kc-passwd-update-form #input-error-password {
    color: var(--ise-red);
    font-size: 0.75rem;
}

@media screen and (min-width:480px) {
    #kc-passwd-update-form .form-buttons {
        width: 100%;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    #kc-passwd-update-form #kc-form-buttons *:first-child {
        margin-bottom: 0;
    }

    #kc-passwd-update-form .form-buttons > * {
        width: auto;
    }

    #kc-passwd-update-form .input-wrapper input {
        max-width: 25rem;
        width: 100%;
    }
}

@media screen and (min-width:768px) {
    #kc-passwd-update-form .form-group .label-wrapper,
    #kc-passwd-update-form .form-group .input-wrapper {
        width: 100%;
    }

    #kc-passwd-update-form .form-group .label-wrapper {
        margin-bottom: 0.5rem;
    }

    #kc-passwd-update-form #kc-form-options .form-options-wrapper {
        justify-content: flex-start;
    }

    #kc-passwd-update-form #kc-form-options .form-options-wrapper label {
        width: auto;
    }
}

.btn-social-login {
    background: black;
    border-radius: 4px;
    min-width: 80px;
    min-height: 32px;
    padding: 0 16px;
    border: 1px solid var(--ise-black);
    color: var(--ise-white-100);
    font-size: 0.938rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
}

.btn-social-login:visited {
    color: var(--ise-white-100);
}

.btn-social-login:hover,
.btn-social-login:focus{
    outline: 4px solid rgb(from var(--ise-warm-grey-100) r g b / 0.2);
}

.btn-social-login:active {
    outline: 4px solid rgb(from var(--ise-warm-grey-100) r g b / 0.4);
}

.social-login-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#kc-social-providers ul {
    display: flex;
}

#kc-social-providers hr {
    border: none;
    border-top: 1px solid var(--ise-grey-20);
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 3rem;
    margin-top: 4rem;
}

#kc-social-providers h2 {
    margin-bottom: 2rem;
}

aside.small {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.qc-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.input-addition {
    color: var(--ise-grey-50);
    font-size: 0.75rem;
    margin: 0.5rem 0;
}

.register-wrapper {
    font-size: 0.938rem;
    color: var(--ise-grey-50);
}

.register-wrapper .register-lnk {
    color: var(--ise-orange-100);
    margin-left: 1ex;
}

.register-wrapper .register-lnk:hover {
    color: rgb(from var(--ise-orange-100) r g b / 0.8);
}

@media screen and (min-width: 768px) {
    .register-wrapper {
        text-align: right;
    }
}

@media screen and (min-width: 991px) {
    .register-wrapper {
        max-width: 60%;
    }
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    border: 1px solid var(--ise-grey-40);
    border-radius: 0.25rem;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    box-sizing: content-box;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--ise-white-100);
    background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:checked {
    border-color: var(--ise-orange-60);
    background-color: var(--ise-orange-100);
}

h1.start-page {
    color: var(--ise-warm-grey-100);
    font-size: 0.938rem;
    font-weight: normal;
    margin-bottom: 4rem;
    margin-top: calc(3rem - 20px);
}

.instruction{
    margin-bottom: 2rem;
}

.pw-forgot-wrapper {
    margin-bottom: 1rem;
}

#backToApplication {
    margin-top: 2rem;
    width: fit-content;
}