/************************************* CUSTOM STYLES *************************************/
/*----------------------------------------*\
  FONTS
\*----------------------------------------*/
@font-face {
    font-family: 'FrutigerNext';
    font-weight: 100;
    src: url("../font/FrutigerNext/frutigernext-light.woff") format("woff"), url("../font/FrutigerNext/frutigernext-light.woff2") format("woff2"); }

@font-face {
    font-family: 'FrutigerNext';
    font-weight: normal;
    src: url("../font/FrutigerNext/frutigernext-regular.woff") format("woff"), url("../font/FrutigerNext/frutigernext-regular.woff2") format("woff2"); }

@font-face {
    font-family: 'FrutigerNext';
    font-weight: bold;
    src: url("../font/FrutigerNext/frutigernext-medium.woff") format("woff"), url("../font/FrutigerNext/frutigernext-medium.woff2") format("woff2"); }

/*----------------------------------------*\
  STYLING
\*----------------------------------------*/
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

a {
    color: #516994;
    text-decoration: none;
    transition: color 200ms ease-in-out;
}

a:not(.uap-button):hover {
    text-decoration: none;
    color: #1b191c;
}

.section a:not(.uap-button):hover {
    text-decoration: none;
    color: #1b191c;
}

#form:before {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
    top: 90px;
    height: 85%;
    background-color: #f7f7f7;
}

body {
    -x-system-font: none;
    background-color: #f7f7f7;
    color: #000;
    font-family: "FrutigerNext", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: none;
    overflow: auto;
}

a, a:link, a:visited {
    text-decoration: none;
}

.hidden {
    display: none;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

#logo {
    background: url(../img/bcf/logo-full-FR.svg) no-repeat;
    background-position-y: center;
    position: absolute;
    width: 50%;
    height: 52px !important;
    margin: 15px auto !important;
    left: 0;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
}

#header {
    border: none;
    overflow: hidden;
    background-color: #f7f7f7;
}

#header-bar {
    width: 1024px;
    min-width: 1024px;
    max-width: 1024px;
    height: 90px;
    background-color: #f7f7f7;
    float: none;
    position: relative;
}

#header-bar-menu {
    font-family: 'FrutigerNext';
    margin: 0 !important;
    margin: 23px 20px 0px 0px !important;
    height: auto !important;
    text-align: right;
    font-size: 24px;
    color: black;
}

#container {
    box-sizing: content-box !important;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column !important;
    border: none;
    margin: 0 auto;
    height: 660px;
    width: 960px !important;
    max-width: 960px !important;
    min-width: 960px !important;
    float: none;
    padding: 0;
    /* padding: 0 0 130px; */
    overflow: auto;
    text-align: left;
    border-radius: 0;
    margin-top: 50px;
    background-color: transparent;
}

#container-header {
    display: none;
}

#upper-panel {
    background-color: #f7f7f7;
    display: block;
    width: 600px;
    height: 90px;
    padding: 30px;
    border: 0;
    z-index: 2;
    float: none !important;
}

#upper-panel-dynamic {
    float: left;
    text-align: left;
    display: block;
    clear: both;
    margin: 0;
    width: 100%;
    height: 100%;
}

#upper-panel-dynamic > span {
    font-family: 'FrutigerNext';
    font-size: 32px;
    font-weight: 300;
    color: #000000;
}

#main-panel {
    background-color: #f7f7f7;
    width: 600px;
    height: 540px;
    display: block;
    padding: 0 30px;
    z-index: 2;
    float: none !important;
    clear: both;
    overflow: hidden;
}

#bottom-panel {
    position: relative;
    display: block;
    float: right !important;
    width: 300px;
    padding: 30px 20px;
    min-height: 500px;
    height: 500px;
    max-height: unset;
    margin: 0 !important;
    background: linear-gradient(60deg, #dee3ed, #bbc6dd);
}

#bottom-panel-dynamic {
    width: auto;
}

.login-panel {
    position: relative;
    float: left;
    width: 100% !important;
    height: 100%;
    padding: 0 0 60px 0;
    border-bottom: none;
}

.login-panel .left-panel, .login-panel .right-panel {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    margin: 0 auto;
    float: left;
    border: none;
    padding: 0;
}

.login-panel .left-panel {
    display: none;
}

.login-panel .left-panel .label.user-info {
    display: inline-block;
    font-weight: normal;
}

.login-panel .login-form .form-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.login-form .form-wrapper, .login-panel.MIGRATION_OTAN_CHOICE_OF_TOKEN .login-form .form-wrapper,
.login-panel.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .login-form .form-wrapper, .ACTIVATION_OTAN_REGISTER_NOTIFICATION_ID_CRYPTOGRAM_SCREEN .login-form .form-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
}

.login-panel.MIGRATION_OTAN_CHOICE_OF_TOKEN .login-form .form-wrapper, .login-panel.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .login-form .form-wrapper,
.ACTIVATION_OTAN_REGISTER_NOTIFICATION_ID_CRYPTOGRAM_SCREEN .login-form .form-wrapper {
    justify-content: space-between;
}

.login-panel.MIGRATION_OTAN_CHOICE_OF_TOKEN .login-form .form-wrapper .buttons {
    bottom: 22px;
}

.login-panel.MIGRATION_OTAN_CHOICE_OF_TOKEN .login-form .form-wrapper .buttons .uap-button.cancel{
    width: inherit;
}

.uap-input {
    max-width: none;
    background-color: #fff;
    box-sizing: border-box;
    display: block;
    height: 64px;
    font-family: arial;
    outline: none;
}

.uap-input:focus {
    border-bottom: 3px solid #516994;
}

#uap-errorBox {
    font-size: 18px;
    text-align: left;
    margin-bottom: 20px;
}

.uap-display {
    text-align: left;
}

.uap-display + div {
    text-align: left;
}

.CHALLENGE_OTAN .uap-display {
    display: inline-block;
    float: left;
    width: 100%;
    margin-top: 0.5em;
}
.CHALLENGE_OTAN .labelInputWrapper  {
    width: 320px;
}
.CHALLENGE_OTAN img  {
    float: left;
}

.CHALLENGE_OTAN #uap-errorBox .INFO {
    font-size: 18px;
    font-style: normal;
    color: inherit;
    margin-bottom: 1em;
}

.CHALLENGE_OTAN #uap-errorBox-container {
    order: inherit;
}

.CHALLENGE_OTAN .waiting-out-of-band-verification-wrapper {
    order: inherit
}

#uap-waiting-button > span {
    display: block;
    font-size: inherit;
    line-height: 23px;
    margin-left: 1em;
}

#uap-waiting-button:hover {
    background: #6db379;
    border-color: #6db379;
}

.ld-ring {
    color: inherit;
}

.uap-display + div .uap-display {
    display: inline-block;
    margin-left: 1em;
}

div.labelInputWrapper {
    height: auto;
    clear: left;
    width: 100%;
    max-width: none;
    float: left;
}

div.labelInputWrapper > label {
    position: static;
    float: left !important;
    margin: 16px 0 7px 0;
    font-size: 18px;
    font-weight: 400 !important;
    color: #666 !important;
}

.uap-input.error, .uap-input.error:focus {
    border: solid 1px #cccccc;
    border-bottom: 3px solid #C70039;
    outline: none;
}

.buttons input, .uap-button {
    cursor: pointer;
    border: 1px solid;
    padding: 8px 16px;
    border-radius: 0;
    background: transparent;
    min-width: 133px;
    height: 41px;
    font-family: 'FrutigerNext';
    font-size: 18px;
}

.buttons input.submit, .uap-button.submit {
    color: #ffffff !important;
    background: #1A181B;
    box-shadow: 0px 15px 22px rgba(0, 0, 0, 0.03), 0px 5px 10px rgba(0, 0, 0, 0.02);
    border-radius: 1px;
}

.buttons input.submit:hover, .uap-button.submit:hover, #uap-waiting-button:hover {
    color: #ffffff !important;
    background: #516994;
    box-shadow: 0px 15px 22px rgba(0, 0, 0, 0.03), 0px 5px 10px rgba(0, 0, 0, 0.02);
    border-radius: 1px;
}

.buttons input.submit:hover, .uap-button.submit:hover, .buttons input.cancel:hover, .uap-button.cancel:hover {
    color: #fff;
    box-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.2);
}

.buttons input.cancel, .uap-button.cancel {
    border-color: #666;
    color: #666;
    margin-right: 10px;
}

.buttons input.cancel:hover, .uap-button.cancel:hover {
    background: #666;
}

.buttons input:disabled, .uap-button:disabled {
    background: #BFBFBF;
}

div.login-panel.USERID .uap-display {
    display: block !important;
    padding-bottom: 30px;
}

div.login-panel.USERID .labelInputWrapper, div.login-panel.PASSWORD .labelInputWrapper,
div.login-panel.PASSWORD_CHANGE .labelInputWrapper, div.login-panel.PASSWORD_PERIODICAL_CHANGE .labelInputWrapper,
div.login-panel.PASSWORD_STEPUP .labelInputWrapper {
    width: 70%;
}

#bottom-panel .pagination {
    text-align: center;
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
}
#bottom-panel .pagination > span.pag {
    height:14px;
    width:14px;
    border-radius:50%;
    background-color:transparent;
    display:inline-block;
    margin: 0 3px;
    border: 1px solid #666;
}

#bottom-panel .pagination > span:hover {
    cursor: pointer;
}

#bottom-panel .pagination > span.active {
    background-color: #666;
}

#bottom-panel {
    text-align: left;
    font-size: 18px;
}

#bottom-panel span.title {
    font-size: 20px;
    line-height: 24px;
    font-family: 'FrutigerNext';
}

.image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.image.big {
    width: 100%;
    height: 190px;
}

.image.MOBILE_APP_ADVERTISEMENT {
    background-image: url(../img/bcf/mobile-app.png);
}

.new-cronto-app {
    height: 20px !important;
    visibility: hidden !important;
}

a.arrow:before {
    content: "";
    margin-right: 10px;
    border: solid #B6B6B6;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

a.arrow-icon {
    line-height: 20px;
    background-position: right -30px;
    background-repeat: no-repeat;
    padding: 3px 23px 3px 0;
    background-image: url(../img/bcf/link-arrow.svg);
}

.link-button {
    display: inline-block;
    line-height: 1.250em;
    zoom: 1;
    font-weight: normal;
    color: #fff !important;
    background-color: #bd0707;
    border: 1px solid #960202;
    font-size: 18px;
    padding: 6px 16px;
    width: auto;
    height: 31.33px;
}

.link-button:hover {
    background-color: #960202;
    border-color: #960202;
}

#bottom-panel p.subtitle {
    margin-top: 5px;
    font-family: 'FrutigerNext';
}

#bottom-panel .title-secondary {
    margin: 25px 0;
}

#bottom-panel p.warning a {
    font-weight: bold;
}

#bottom-panel ul {
    list-style: circle;
    padding: 0 15px;
}

#bottom-panel ul li {
    padding-top: 2px;
    padding-bottom: 2px;
}

#bottom-panel li.link {
    list-style: none;
}

.title-secondary.big {
    color: black !important;
    font-size: 18px;
    font-family: 'FrutigerNext';
    margin: 5px 0 !important;
}

.subtitle-secondary.bold {
    color: black;
    font-size: 18px;
    font-weight: bold;
    font-family: 'FrutigerNext';
    margin: 10px 0;
}

.subtitle-secondary.bold a {
    color: black;
}

.subtitle-secondary.bold a:hover {
    color: black;
}

#pdf-icon {
    display: inline-block;
    height: 21px;
    width: 18px;
    background-image: url(../img/bcf/icon-pdf.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: sub;
}

.warning.big a {
    font-size: 18px;
    font-weight: normal !important;
    margin-top: 40px;
    display: block;
}

#uap-loading-popup {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    filter: alpha(opacity = 30);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    -moz-opacity: .30;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    background-color: #000;
    text-align: center;
    vertical-align: middle;
    margin: 0;
}

#uap-loading-popup-content {
    z-index: 10000;
    position: fixed;
    text-align: left;
    padding: 30px 45px;
    background-color: #fff;
    color: #666;
    width: 600px;
    height: 570px;
}

#upper-panel-popup {
    display: block;
    width: 100%;
    height: 90px;
    padding: 30px;
    border: 0;
}

#upper-panel-popup > div {
    float: left;
    text-align: left;
    display: block;
    clear: both;
    margin: 0;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #d5d4d4;
}

#upper-panel-popup > div > span {
    font-size: 18px;
}

#main-panel-popup {
    width: 100%;
    height: 430px;
    display: block;
    padding: 0 100px;
}

#main-panel-popup > span {
    font-size: 18px;
}

.popup-image {
    height: 150px;
    width: 150px;
    margin: 40px auto;
    background-image: url(../img/bcf/icon-success.svg);
    background-size: cover;
}

.uap-loading-popup-image {
    display: none;
}

.uap-loading-popup-label {
    margin: 0 !important;
    height: 100%;
}

.login-panel.MIGRATION_OTAN_CHOICE_OF_TOKEN .form-wrapper {
    width: 100%;
}

.inner-footer {
    display: none !important;
}

#uap-otan-notification-no-internet-button {
    width: auto;
}

/* footer NOT at the bottom of the page */
form > footer {
    background-color: #f7f7f7;
    color: #8F8F8F;
    height: 115px;
    display: none; /* hidden */
}

footer a {
    color: white;
}

footer > div.footer {
    width: 960px;
    background-color: transparent;
    position: relative;
    height: 100%;
    font-size: 18px;
}

.footer > div {
    display: inline-block;
}

.footer p {
    margin-bottom: 0;
}

.footer-right.right {
    margin-right: 35px;
    font-weight: bold;
}

.footer-right.right a {
    text-decoration: underline;
}

#uap-errorBox-container {
    margin-top: 10px;
    clear: both;
    display: block;
    font-style: italic;
    order: 2;
}

[data-uap-view=MAINTENANCE] #container:before {
    position: fixed;
    height: 100%;
    width: 100%;
    filter: alpha(opacity = 30);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    -moz-opacity: .30;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    background-color: #000;
    top: 90px;
    left: 0;
    content: "";
}

[data-uap-view=MAINTENANCE] #upper-panel {
    width: 925px;
}

[data-uap-view=MAINTENANCE] #main-panel {
    width: 925px;
}

[data-uap-view=MAINTENANCE] #bottom-panel {
    display: none;
}

.login-panel.MAINTENANCE {
    padding: 0 100px;
}

.login-panel.MAINTENANCE .login-title {
    display: none;
}

.login-panel.MAINTENANCE .uap-display {
    font-size: 18px;
}

.login-panel.MAINTENANCE .uap-display a {
    color: #B65149;
    font-weight: bold;
}

.maintenance-image {
    width: 150px;
    height: 150px;
    display: block;
    margin: 50px auto 0 auto;
    background-image: url(../img/bcf/icon-maintenance.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.logout #container:before {
    position: fixed;
    height: 100%;
    width: 100%;
    filter: alpha(opacity = 30);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    -moz-opacity: .30;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    background-color: #f7f7f7;
    top: 90px;
    left: 0;
    content: "";
}

.logout #main-panel, .error #main-panel {
    padding: 0 30px;
}

.logout .right-panel, .logout .form-wrapper, .logout .uap-display,
.error .right-panel, .error .form-wrapper, .error .uap-display {
    height: 100%;
}

.logout .uap-display,
.error .uap-display {
    position: relative;
    display: block;
}

.logout .buttons,
.error .buttons {
    position: absolute;
    bottom: 135px;
    margin: 0;
    height: 45px;
    width: 100%;
    text-align: left;
}

.logout .buttons a,
.error .buttons a  {
    display: inline-block;
    width: auto;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
}

.logout #uap-errorBox-container,
.error #uap-errorBox-container {
    display: none;
}

.logout .uap-display p,
.error .uap-display p {
    font-size: 18px;
}

.error .uap-display p {
    padding: 0 70px;
}

.logout .popup-image,
.error .popup-image {
    margin: 0 auto;
}

/************ input masked ************/
.shell span {
    position: absolute;
    left: 8px;
    top: 22px;
    color: #ccc;
    pointer-events: none;
    z-index: -1;
}

.shell span i {
    font-style: normal;
    color: transparent;
}

input.masked, .shell span {
    font-size: 18px;
    font-family: monospace;
    padding-right: 10px;
    background-color: transparent;
    text-transform: uppercase;
    line-height: 0.5;
}

.password-rules-panel {
    font-size: inherit;
    padding: 0;
    margin: 0;
    border: none;
    line-height: inherit;
    max-width: inherit;
}
.password-rules-panel:after {
    display: none;
}

.password-rules-panel .password-rule-title {
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

div.password-rule span.password-rule-category {
    display: none !important;
}

div.password-rule > .password-rule-message {
    width: 95%;
    float: right;
}

div.password-rule.valid span.password-rule-image:after {
    color: #6db379;
}

div.password-rule.invalid span.password-rule-image:after {
    color: #ef0900;
}


.MIGRATION_OTAN_CHOICE_OF_TOKEN br {
    display: block;
    line-height: 22px;
    margin-top: 10px;
    content: " ";
}

.otan-migration-token {
    width: 48%;
    border: 2px solid #eee;
    padding: 10px;
    font-weight: 700 !important;
    color: #666 !important;
    font-size: 18px;
    margin-top: 10px;
}

.otan-migration-token .uap-button {
    border: none;
    width: 230px;
    padding: 0;
    white-space: pre-line !important;
}

.otan-migration-token .device-image  {
    margin: 0;
}

.device-image.otan-reader {
    background: url(../img/bcf/no-mobile.png) no-repeat 50%;
    background-size: 35%;
}

.device-image.otan-smartphone {
    background: url(../img/bcf/mobile.png) no-repeat 50%;
    background-size: 35%;
}

#activation-call-hotline-label {
    order: 3;
    color: #666;
}

#activation-call-hotline-label, #uap-resetOtanToken-link {
    font-size: 18px;
    line-height: 18px;
}

#uap-resetOtanToken-link {
    margin: 0;
}

span.selfUnblockHelp:nth-of-type(2) {
    color: #666;
    display: block;
    font-size: 20px;
}

div.app-download-option:nth-child(5) {
    display:none;
}

div.app-download-option {
    clear: inherit;
    overflow: hidden;
    float: left;
    border: 2px solid #eee;
    text-align: center;
    width: 49%;
    padding: 0.8em;
    height: 220px;
    position: relative;
}

div.app-download-option:nth-child(3) {
    margin-right: 2%;
}

.app-download-image {
    float: none;
    display: block;
    margin: auto;
    height: 40px;
    width: 120px;
    position: absolute;
    bottom: 18px;
    left: 50%;
    margin-left: -60px;
}

.app-download-image-label {
    float: none;
    width: 100%;
    opacity: 0.6;
    font-size: 18px;
}

.app-download-image-label::before {
    content: "";
    display: block;
    background: url(../img/bcf/google-play-qrcode.png) no-repeat;
    background-size: 100%;
    height: 100px;
    width: 100px;
    opacity: 0.6;
    margin: auto;
}

div.app-download-option:nth-child(3) .app-download-image-label::before {
    background: url(../img/bcf/apple-play-qrcode.png) no-repeat;
    background-size: 100%;
}

.app-download-info::before {
    content: "";
    display: block;
    background: url(../img/bcf/crontosign-swiss.jpg) no-repeat;
    background-size: 100%;
    float: left;
    height: 70px;
    width: 70px;
    margin-top: 2px;
    border-radius: 0.5em;
    margin-right: 1em;
}

.ACTIVATION_OTAN_CRYPTOGRAM_LETTER::after {
    content: "";
    background: url(../img/bcf/activation-mail.png) no-repeat;
    display: block;
    width: 175px;
    height: 220px;
    margin-left: 1em;
    margin-top: 2em;
    float: right;
}



.login-panel.ACTIVATION_OTAN_CRYPTOGRAM_LETTER .right-panel {
    width: 60%;
}

.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN span:nth-child(2)  {
    width: 100%!important;
}

.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .labelInputWrapper:nth-of-type(1)  {
    width: 500px;
    margin-top: -110px;
}

.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .buttons  {
    bottom: 20px;
}
.ACTIVATION_OTAN_REGISTER_NOTIFICATION_ID_CRYPTOGRAM_SCREEN span {
    width: 300px;
}

.RESET_OTAN_CHOICE .uap-resetOtanToken-newToken {
    margin: 0;
    max-width: inherit;
    margin-top: 1em;
}

.RESET_OTAN_CHOICE #uap-resetOtanToken-newToken-label {
    text-align: left;
    margin-left: 0;
}

.RESET_OTAN_CHOICE #uap-resetOtanToken-deviceCancellationConfirmation {
    margin-top: 1em;
}

#uap-resetOtanToken-newToken-button {
    width: inherit;
    height: inherit;
}

.INVITATION_OTAN_PUSH_NOTIFICATION .buttons {
    float: right;
}

.CHALLENGE_OTAN select#uap-notification-select{
    margin-right: 0.5em;
}

.CHALLENGE_OTAN #uap-notification-select-label, .CHALLENGE_OTAN #uap-selfUnblock-tokenMessage{
    width: 100%;
}

.CHALLENGE_OTAN #show-mosaic {
    display: inline-block;
    height:  36px;
    cursor: pointer;
    color: #ffffff !important;
    background: #1A181B;
    box-shadow: 0px 15px 22px rgb(0 0 0 / 3%), 0px 5px 10px rgb(0 0 0 / 2%);
    border-radius: 1px;
    padding: 8px 16px;
    -webkit-appearance: none; /* avoids that buttons are shown apple style */
}

.CHALLENGE_OTAN #show-mosaic:hover {
    color: #ffffff !important;
    background: #516994;
    box-shadow: 0px 15px 22px rgba(0, 0, 0, 0.03), 0px 5px 10px rgba(0, 0, 0, 0.02);
    border-radius: 1px;
}

.CHALLENGE_OTAN .buttons  {
    bottom: 20px;
}

.ACTIVATION_OTAN_APP_DOWNLOAD .app-download-image.iphone, .ACTIVATION_OTAN_APP_DOWNLOAD .app-download-image.android {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.ACTIVATION_OTAN_APP_DOWNLOAD .login-form .form-wrapper {
    display: block;
}

div.app-download-option:nth-child(3) {
    display:block;
}
::-ms-reveal {
    display:none;
}
.eye {
    position: absolute !important;
    right: 4px !important;
    bottom: 15px !important;
    height: 34px !important;
    width: 30px !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAPtJREFUOI3N0s0qhGEUB/CfmQVyAcYlIKVp3I2Fkc9yDZjMNDELUSzGrciemjRzDyRLCrPB4j1vPb0Ns5NTp07/j6f/0zn8x5pDCwO8Rw/QRGWceROveMAJVqM7eMQL6j+Zm/hEG5Mj+Ckch6ZRJHeDWEuwFXRxhVqCr4d2OwcWMcRBwTzELe5iriZ8Ax9YgJsQlRNBN8wT0T1cJnw5sOsSShHpKxHkxnwu/cJbioj7iaAWWA/3slUuJ3w7vjCfA3uRIl1RNWJfFMw7kWZLoVrxSAfTRRIzOA3z4QgebMgO6QlnkaiOczwbc0h5VWRH1cdbdB9HmB1n/vv6Bl2eQCrmgZYeAAAAAElFTkSuQmCC);
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    background-position: center;
    border: 0 !important;
    padding: 0 !important;
}
.eye:focus {
    outline: none !important;
}
.login-panel.CHALLENGE_OTAN #uap-disable-push {
    display: none;
}
.CHALLENGE_OTAN #new-device-label {
    display : none ;
}

.uap-button-secondary {
    background: #F6E5AC;
    color: #1A181B;
    /* box-shadow: 0px 15px 22px rgba(0, 0, 0, 0.03), 0px 5px 10px rgba(0, 0, 0, 0.02); */
    border-radius: 1px;
    border: unset;
    min-width: 133px;
    height: 41px;
    font-family: 'FrutigerNext';
    font-size: 18px;
}

.uap-button-secondary:hover {
    background: #FAF2D6;
    /* box-shadow: 0px 15px 22px rgba(0, 0, 0, 0.03), 0px 5px 10px rgba(0, 0, 0, 0.02); */
    border-radius: 1px;
    border: unset;
}

.select-locale li {
    color: #000000!important;
    border-right: 1px solid #000000;
    padding: 0 10px 0 10px;
}

.select-locale li:first-child {
    border-right: unset!important;
}

.select-locale .locale a {
    color: #000000 !important;
}

.select-locale .locale a.selected-locale {
    font-weight: bold;
}

.section.HELP p {
    margin-left: 30px;
}

.section-help-icon {
    float: left;
    margin-right: 10px;
    margin-top: 2px;
}

.button-arrow-right {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 0.8em;
}

label[for] {
    position: absolute !important;
    color: grey !important;
    font-weight: 400 !important;
}

label[for].empty {
    margin: 21px 10px 0 10px;
}

label[for]:not(.empty) {
    margin: 0 8px 0 8px;
    transition: margin 0.2s;
    font-size: 12px;
    font-weight: 400 !important;
    transition: font-size 0.2s;
}

div.labelInputWrapper {
    position: relative;
    clear: both;
    max-width: 360px;
    min-width: 200px;
    overflow: hidden;
    margin-bottom: 10px;
}

.uap-label {
    width: 100%;
    display: inline-block;
    margin-top: 20px;
}

/* popup - modal */
/* modal background */
.modal {
    display: none; /* hidden by default */
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); /* fallback color */
    background-color: rgba(0,0,0,0.4); /* black w/ opacity */
}

/* modal dialog */
.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f7f7f7;
    padding: 20px;
    border-top: 8px solid #F6E5AC;
    width: 25%;
    font-family: 'FrutigerNext';
    text-align: left;
    font-size: 18px;
}

/* help popup */
.modal-content ul li {
    border-top: 5px solid #f7f7f7;
    background: white;
}

.modal-content ul li a {
    color: unset;
}

.help-popup-item {
    display: flex;
    padding: 10px;
}

.help-icon {
    width: 44px;
    margin-right: 10px;
}

.help-content {
    width: 93%;
}

.help-content-text {
    margin-top: 0;
    margin-bottom: 0;
}

.help-icon-phone {
    background: url(../img/bcf/icon-phone.svg) no-repeat;
    background-size: contain;
}

.help-icon-exclamation {
    background: url(../img/bcf/icon-exclamation.svg) no-repeat;
    background-size: contain;
}

.help-icon-email {
    background: url(../img/bcf/icon-email.svg) no-repeat;
    background-size: contain;
}

.help-icon-location {
    background: url(../img/bcf/icon-location.svg) no-repeat;
    background-size: contain;
}

.help-icon-online-support {
    background: url(../img/bcf/icon-online-support.svg) no-repeat;
    background-size: contain;
}

.help-icon-faq {
    background: url(../img/bcf/icon-faq.svg) no-repeat;
    background-size: contain;
}

div.help-message > span.selfUnblockHelp:nth-of-type(1) {
    margin:0;
    font-size: 18px;
}

div.help-message > span.selfUnblockHelp:nth-of-type(2) {
    font-size: 18px;
    line-height: 1.4em;
}

.PASSWORD_SELF_UNBLOCK div.help-message > span.selfUnblockHelp:nth-of-type(2) {
    font-size: 18px;
    font-weight: normal;
    color: #000000;
    line-height: 1.4em;
}

.PASSWORD_SELF_UNBLOCK .help-message {
    line-height: 1.4em;
}

span#selfUnblockChallengeResponseLabel, span#selfUnblockNewPasswordLabel {
    width: 100%;
}

.CHALLENGE_OTAN img,
.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN img,
.ACTIVATION_OTAN_REGISTER_NOTIFICATION_ID_CRYPTOGRAM_SCREEN img {
    height: 185px;
    width: 185px;
}

#uap-resetOtanToken-newToken-label, #uap-resetOtanToken-activateNewDevice-label {
    margin-left: 0;
    min-height: unset;
    text-align: unset;
}

.uap-resetOtanToken-newToken, .uap-resetOtanToken-activateNewDevice {
    max-width: unset;
    margin-left: 0;
}

.login-panel.RESET_OTAN_CHOICE .buttons {
    display: flex;
    flex-direction: column-reverse;
    width: 12em;
    margin-top: 0;
}

.login-panel.RESET_OTAN_CHOICE .buttons input.cancel, .uap-button.cancel {
    margin-right: 0;
    margin-top: 40px;
}

#uap-errorBox div.ERROR, .gcl-errorBox {
    color: #C70039;
}

.logout .uap-display p, .error .uap-display p {
    padding: 0;
}

.logout .popup-image, .error .popup-image{
    float: left;
    margin: 0;
    margin-top: 20px;
    margin-left: 75px;
}

.ACTIVATION_OTAN_APP_DOWNLOAD .buttons {
    margin-top: 0;
}

.ACTIVATION_OTAN_INSTRUCTIONS #activation-complete-on-device-confirmation {
    font-size: 18px;
    margin-top: 10px;
}

.ACTIVATION_OTAN_INSTRUCTIONS #activation-complete-on-device-confirmation input[type=checkbox] {
    height: 18px;
    width: 18px;
    margin-right: 5px;
}

/* error message below input */
#uap-errorBox {
    display: none;
}
[data-uap-view=CHALLENGE_OTAN] #uap-errorBox {
    display: inline-block!important;
    width: 100%;
}
#uap-errorBox.error-below-input {
    display: block;
}

.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .login-form .form-wrapper {
    flex-direction: unset;
    flex-wrap: unset;
    display: block;
}
.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .labelInputWrapper:nth-of-type(1) {
    margin-top: 0;
}
.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN div.labelInputWrapper {
    float: unset;
}
.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN span:nth-child(5) {
    margin-top: 16px;
}
.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .buttons {
    margin-top: -20px;
}

/* language bar */
#header-bar > div#header-bar-locale ul.select-locale.hidden {
    display: flex;
    flex-direction: row-reverse;
}

/* langauge bar only on first page */
/*
#header-bar-locale {
    display: none;
}
[data-uap-view=USERID] #header-bar-locale {
    display: block;
}
*/

/* info message - colors */
.info-important-text {
    color: #000000;
}
.info-important-text a {
    color: #37496D;
}
.info-white-text {
    color: #F7F7F7;
}

/* reset otan confirm */
[data-uap-view=RESET_OTAN_CHOICE] #uap-resetOtanToken-newToken-button,
[data-uap-view=RESET_OTAN_CHOICE] #uap-resetOtanToken-activateNewDevice-button {
    display: none;
}
[data-uap-view=RESET_OTAN_CHOICE] #uap-resetOtanToken-newToken-button-confirm,
[data-uap-view=RESET_OTAN_CHOICE] #uap-resetOtanToken-activateNewDevice-button-confirm {
    width: 12em;
    height: 3.5em;
    white-space: normal;
    margin: 0 auto;
}

/* specific screens overrides */
[data-uap-view=PASSWORD_CHANGE] #container {
    height: 740px;
}
[data-uap-view=CHALLENGE_OTAN] #container {
    flex-direction: row!important;
    height: 700px;
}
[data-uap-view=CHALLENGE_OTAN] #main-panel {
    height: 600px;
}
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #container {
    flex-direction: row!important;
    height: 1100px;
}
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #main-panel {
    height: 1000px;
}
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] #container {
    flex-direction: row!important;
    height: 1400px;
}
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] #main-panel {
    height: 1300px;
}
[data-uap-view=RESET_OTAN_CHOICE] #upper-panel {
    overflow: hidden;
}

[data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] #main-panel {
    height: 550px;
}
[data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] #container {
    height: 650px;
}
[data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] .info-important-text {
    width: 100%;
}
[data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] .form-wrapper  .otan-migration-token {
    font-size: 14px;
}
[data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] .form-wrapper  .otan-migration-token button {
    width: 100%;
    height: auto;
    font-size: 14px;
}
[data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] .form-wrapper .buttons {
    width: 100%;
    margin-top: 0;
    text-align: left;
}
[data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] .form-wrapper .buttons input {
    width: 160px!important;
}

/* otan activation screens - instructions */
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #bottom-panel,
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] #bottom-panel {
    display: none;
}
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #main-panel,  [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] .right-panel,
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] #main-panel,  [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] .right-panel {
    width: 100% !important;
}
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] .ACTIVATION_OTAN_CRYPTOGRAM_LETTER::after,
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] .ACTIVATION_OTAN_CRYPTOGRAM_SCREEN::after {
    display: none;
}

.otan-activation-step {
    color: #505050;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    margin-bottom: 20px;
    padding: 25px;
    display: flex;
    flex-direction: row;
}
.otan-activation-step-text {
    width: 70%;
}
.otan-activation-step-image {
    width: 20%;
}
.otan-activation-step-number {
    width: 10%;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 50px;
    /* color: #ececec; */
}
#otan-activation-step-1 .otan-activation-step-image {
    background: url(../img/bcf/otan_download_app.svg) no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#otan-activation-step-2 .otan-activation-step-image {
    background: url(../img/bcf/otan_catch_mosaic_letter.svg) no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#otan-activation-step-3 .otan-activation-step-image,
#otan-activation-step-6 .otan-activation-step-image {
    background: url(../img/bcf/otan_report_code_letter.svg) no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#otan-activation-step-4 .otan-activation-step-image,
#otan-activation-step-5 .otan-activation-step-image {
    background: url(../img/bcf/otan_catch_mosaic_screen.svg) no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
[data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] .right-panel .form-wrapper img {
    display: none;
}
#otan-activation-step-mosaic img {
    display: block;
    margin-left: 70px;
}


/*----------------------------------------*\
  MOBILE
\*----------------------------------------*/
@media only screen and (max-width: 1380px) {
    body > form > div {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 1024px) {
    #header-bar {
        min-width: 100% !important;
        width: 100% !important;
    }

    #header-bar-menu {
        right: 0;
    }

    #container {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 660px;
        padding: 0;
        flex-direction: row !important;
    }

    #upper-panel {
        width: 100% !important;
    }

    #upper-panel, #main-panel {
        width: calc(90% - 300px);
    }

    #bottom-panel {
        display: block;
        width: 300px!important;
        min-height: 500px;
        margin-right: 20px!important;
    }

    .login-panel {
        padding-bottom: 0;
    }

    .login-panel.MAINTENANCE {
        padding: 0;
    }

    footer > div.footer {
        width: 100%;
        min-width: 600px;
    }

    .footer-left.left {
        margin-left: 35px;
    }

    .modal-content {
        width: 70% !important;
    }

    #upper-panel, #main-panel,
    [data-uap-view=MAINTENANCE] #upper-panel, [data-uap-view=MAINTENANCE] #main-panel {
        margin: 0 auto;
    }

    [data-uap-view=MAINTENANCE] #upper-panel, [data-uap-view=MAINTENANCE] #main-panel {
        max-width: 700px !important;
        width: 100% !important;
    }

    [data-uap-view=ACTIVATION_OTAN_APP_DOWNLOAD] #main-panel {
        height: 600px;
    }

    .login-panel.ACTIVATION_OTAN_CRYPTOGRAM_LETTER .right-panel {
        width: 100%!important;
    }

    .ACTIVATION_OTAN_CRYPTOGRAM_SCREEN span:nth-child(2)  {
        width: 100% !important;
    }
    .ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .labelInputWrapper:nth-of-type(1)  {
        width: 100% !important;
    }

    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #container {
        flex-direction: row!important;
        height: 1200px;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #main-panel {
        height: 1100px;
    }

    /* specific screens overrides */
    [data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] #main-panel {
        height: 750px;
    }
    [data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] #container {
        height: 850px;
    }
}

@media only screen and (max-width: 768px) {
    #upper-panel, #main-panel {
        width: 100% !important;
    }

    .modal-content {
        width: 100% !important;
    }

    #container {
        width: 100%!important;
        height: unset !important;
        min-width: unset !important;
        max-width: unset !important;
        flex-direction: column !important;
        flex-wrap: nowrap;
        margin-top: 30px;
    }

    #bottom-panel {
        width: 100% !important;
        min-height: 300px;
        height: 300px;
        margin: 0!important;
    }

    #header-bar {
        height: 120px;
    }

    #logo {
        background: url(../img/bcf/logo-small-FR.svg) no-repeat;
        background-position-y: center;
        position: absolute;
        left: 0;
        width: 50%;
        height: 52px !important;
        margin: 15px auto !important;
    }

    div.labelInputWrapper {
        max-width: unset!important;
    }

    div.login-panel.USERID .labelInputWrapper, div.login-panel.PASSWORD .labelInputWrapper,
    div.login-panel.PASSWORD_CHANGE .labelInputWrapper, div.login-panel.PASSWORD_PERIODICAL_CHANGE .labelInputWrapper,
    div.login-panel.PASSWORD_STEPUP .labelInputWrapper {
        width: 100%;
    }

    /* specific screens overrides */
    [data-uap-view=PASSWORD_CHANGE] #container {
        height: 740px;
    }
    [data-uap-view=PASSWORD_PERIODICAL_CHANGE] #container {
        height: 740px;
    }
    [data-uap-view=CHALLENGE_OTAN] #container {
        flex-direction: column!important;
        height: 700px;
    }
    [data-uap-view=CHALLENGE_OTAN] #main-panel {
        height: 600px;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #container {
        flex-direction: column!important;
        height: 1500px!important;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #main-panel {
        height: 1400px!important;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] #container {
        flex-direction: column!important;
        height: 1700px!important;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] #main-panel {
        height: 1600px!important;
    }
    [data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] #main-panel {
        height: 700px;
    }
    [data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] #container {
        height: 800px;
    }

    /* USAFE-5128 - ACTIVATION_OTAN_CRYPTOGRAM_LETTER */
    .otan-activation-step {
        flex-direction: column-reverse;
    }
    .otan-activation-step-text {
        width: 100%;
    }
    .otan-activation-step-image {
        width: 100%;
        height: 100px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .otan-activation-step-number {
        width: 100%;
        text-align: left;
    }
    #otan-activation-step-mosaic img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width: 480px) {
    #header-bar-menu {
        position: absolute;
        top: 70px;
        right: 10px;
        margin: 0!important;
    }

    #bottom-panel {
        margin: 0!important;
    }

    /* specific screens overrides */
    [data-uap-view=CHALLENGE_OTAN] #container {
        flex-direction: column!important;
        height: 700px;
    }
    [data-uap-view=CHALLENGE_OTAN] #main-panel {
        height: 600px;
    }
    [data-uap-view=RESET_OTAN_CHOICE] #upper-panel-dynamic > span {
        font-size: 28px!important;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #container {
        flex-direction: column!important;
        height: 1700px!important;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_LETTER] #main-panel {
        height: 1600px!important;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] #container {
        flex-direction: column!important;
        height: 2100px!important;
    }
    [data-uap-view=ACTIVATION_OTAN_CRYPTOGRAM_SCREEN] #main-panel {
        height: 2000px!important;
    }
    [data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] #main-panel {
        height: 1100px!important;
    }
    [data-uap-view=MIGRATION_OTAN_CHOICE_OF_TOKEN] #container {
        height: 1200px!important;
    }
}