@font-face{
    font-family:TheSans;
    font-weight:300;
    font-style:normal;
    src:url(/static/fonts/TheSansB_300_.eot) format("eot"),url(/static/fonts/TheSansB_300_.woff2) format("woff2"),url(/static/fonts/TheSansB_300_.woff) format("woff"),url(/static/fonts/TheSansB_300_.ttf) format("truetype"),url(/static/fonts/TheSansB_300_.svg#TheSansB_300_) format("svg")}

@font-face{
    font-family:TheSans;
    font-weight:400;
    font-style:normal;
    src:url(/static/fonts/TheSansB_400_.eot) format("eot"),url(/static/fonts/TheSansB_400_.woff2) format("woff2"),url(/static/fonts/TheSansB_400_.woff) format("woff"),url(/static/fonts/TheSansB_400_.ttf) format("truetype"),url(/static/fonts/TheSansB_400_.svg#TheSansB_400_) format("svg")}

@font-face{
    font-family:TheSans;
    font-weight:500;
    font-style:normal;
    src:url(/static/fonts/TheSansB_500_.eot) format("eot"),url(/static/fonts/TheSansB_500_.woff2) format("woff2"),url(/static/fonts/TheSansB_500_.woff) format("woff"),url(/static/fonts/TheSansB_500_.ttf) format("truetype"),url(/static/fonts/TheSansB_500_.svg#TheSansB_400_) format("svg")}

@font-face{
    font-family:TheSans;
    font-weight:600;
    font-style:normal;
    src:url(/static/fonts/TheSansB_600_.eot) format("eot"),url(/static/fonts/TheSansB_600_.woff2) format("woff2"),url(/static/fonts/TheSansB_600_.woff) format("woff"),url(/static/fonts/TheSansB_600_.ttf) format("truetype"),url(/static/fonts/TheSansB_600_.svg#TheSansB_600_) format("svg")
}

@font-face {
  font-family: "sdx-icons";
  font-weight: normal;
  font-style: normal;
  src: url("/static/fonts/sdx-icons/sdx-icons.eot") format("eot"), url("/static/fonts/sdx-icons/sdx-icons.woff2") format("woff2"), url("/static/fonts/sdx-icons/sdx-icons.woff") format("woff"), url("/static/fonts/sdx-icons/sdx-icons.ttf") format("truetype"), url("/static/fonts/sdx-icons/sdx-icons.svg#sdx-icons") format("svg");
}

html {
  height: 100%;
}
body {
  min-height: 100%;
  min-height: 100vh;
  height: 100%
  width: 100%;
  display: flex;
  flex-direction: column;
}

body {
    padding: 0;
    font-family: TheSans, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 18px;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: TheSans, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

.form .input-meta .input-label, .form .input-meta .input-sub-label {
    display: block;
    font-size: 16px;
    font-weight: normal;
    line-height: 18px;
    margin-bottom: 7px;
    color: #666;
}
#newMessagFormFooter .input-meta .input-label {
    font-size: 18px;
    line-height: 20px;
}
.new-message-form-footer .read-confirmation-checkbox .ui-checkbox-text-box .checkbox-label {
    font-size: 18px;
}

#loginForm .form-header, .form .login-form-header, #requestPublicKeyForm .form-header, #identificationForm .form-header {
    line-height: 24px;
    font-size: 28px;
    font-weight: normal;
    text-align: left;
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 35px;
    color: #001155;
    border-top: 7px solid #A63297;
}
#loginForm .form .input {
    margin-bottom: 10px;
}

#loginForm_password_before .input-link {
    margin-top: 0px;
    position: relative;
    top: 100px;
    width: 100%
}
#loginForm_password_passwordField {
    margin-bottom: 30px;
}


.form a {
    color: #086ADB;
    font-size: 16px;
}
.form a:hover {
    color: #0048CF;
}

#preferencesForm .ui-selectonemenu-label {
    font-size: 18px !important;
    line-height: 24px;
}
.preferences-form-content .ui-inputfield {
    padding: 12px 15px;
}
#preferencesForm .ui-selectonemenu.ui-corner-all {
    border-radius: 5px;
}


.ui-widget {
    font-family: TheSans, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 18px;
}
.ui-inputfield {
    font-size: 18px !important;
    line-height: 24px;
}
.ui-selectonemenu .ui-selectonemenu-label, .ui-selectonemenu, .ui-selectonemenu-item {
    font-size: 14px !important;
    line-height: 20px;
}
.ui-selectonemenu-list-item, #personalForm .ui-selectonemenu .ui-selectonemenu-label, #languageSelectForm .ui-selectonemenu .ui-selectonemenu-label {
    font-size: 18px !important;
    line-height: 24px !important;
}
.dropdown-combi-text .ui-selectonemenu .ui-selectonemenu-label {
    font-size: 18px !important;
    line-height: 20px;
}
.ui-selectonemenu-panel.ui-widget-content, .ui-selectcheckboxmenu-panel.ui-widget-content, .ui-menu.ui-widget-content {
    box-shadow: 0 2px 34px 0 rgb(0 0 0 / 12%);
}
.ui-selectonemenu-panel .ui-selectonemenu-list-item, #personalForm .ui-selectonemenu .ui-selectonemenu-label, #languageSelectForm .ui-selectonemenu .ui-selectonemenu-label {
    padding: 11px 15px !important;
    height: 48px;
    margin: 0;
}
#languageSelectForm .ui-selectonemenu .ui-selectonemenu-label {
    margin-right: 32px;
}

.ui-menuitem .ui-menuitem-link, .ui-menu-list .ui-menuitem .ui-menuitem-link, .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    line-height: 20px;
    background: #fff !important;
    color: #086ADB;
    font-size: 14px;
    font-weight: 400;
}
.ui-menuitem .ui-menuitem-link {
    margin: 10px 30px 10px 10px;
}
.ui-menuitem, .ui-menu-list .ui-menuitem, .ui-menu .ui-menu-list .ui-menuitem {
    background: #fff !important;
    color: #086ADB;
    border-bottom: 1px solid #d6d6d6;
}
.dropdown-overlay-topspacer-6 {
    padding-top: 0;
}

.ui-selectonemenu-item, .ui-selectonemenu-items.ui-widget-content .ui-selectonemenu-item {
    line-height: 20px;
    background: #fff !important;
    color: #086ADB;
}
.ui-selectonemenu-item, .ui-selectonemenu-items.ui-widget-content .ui-selectonemenu-item, .ui-selectonemenu-items.ui-widget-content {
    background: #fff !important;
    color: #333;
    border-bottom: none;
}
.ui-selectonemenu-item.ui-state-highlight, .ui-selectonemenu-items.ui-widget-content .ui-selectonemenu-item.ui-state-highlight {
    border: 0;
    background: #086ADB !important;
    color: #fff;
}
.ui-selectonemenu-item.ui-state-hover, .ui-selectonemenu-items.ui-widget-content .ui-selectonemenu-item.ui-state-hover {
    border: 0;
    background: #D6D6D6 !important;
    color: #333;
}
[id^=newMessageForm].ui-selectonemenu-panel .ui-selectonemenu-list-item {
    font-size: 14px !important;
}

.dropdown-combi-text .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    margin-top: -4px;
}


.ui-accordion .ui-accordion-header .ui-icon.ui-icon-triangle-1-e, .certificate-information-form-content .ui-accordion .ui-accordion-header .ui-icon.ui-icon-triangle-1-e {
    background-image: url("/static/img/chevron_small_down_BOLD.svg");
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
    left: auto; 
    right: 10px !important;
    margin-top: -14px;
    background-position: 0 0;
}
.ui-accordion .ui-accordion-header.ui-tabs-outline .ui-icon.ui-icon-triangle-1-e {
    outline: 1px dotted #333;
}
.ui-accordion .ui-accordion-header.ui-state-active .ui-icon.ui-icon-triangle-1-s {
    background: url("/static/img/chevron_small_up_BOLD_hover.svg");
    background-size: 32px 32px;
    display: block;
    width: 32px;
    height: 32px;
    left: auto; 
    right: 10px !important;
    margin-top: -14px;
    background-position: 0 0;
}
.ui-accordion .ui-accordion-header {
    border: 1px solid #BBB;
    height: 48px;
    font-size: 18px;
    line-height: 24px;
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 16px;
    outline: none;
}
.ui-accordion .ui-accordion-header.ui-state-active {
    background: #fff;
    color: #333;
    border: 1px solid #BBB;
    border-bottom: none;
}
.ui-accordion .ui-accordion-content {
    background: #fff !important;
    color: #333;
    border: 1px solid #BBB;
    border-top: none;
    padding: 0 16px 10px 16px;;
}
.ui-accordion .ui-state-hover {
    color: inherit;
    border: 1px solid #BBB !important;
}


.row {
    font-size: 18px !important;
}
.certificate-information-form-content {
    font-size: 16px !important; 
}
.ui-checkbox-text-box .checkbox-label {
    font-size: 18px;
}

.default-logo {
    width: 57px;
    height: 68px;
    margin-left: 44px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.equal-height-container {
    padding: 50px 70px 0px 70px;
    max-width: none;
}

@media (max-width:767px) {
 .default-logo {
     margin-left: 20px;

     background-image: url(/static/img/Swisscom_Navy_174x68.png);
     padding-right: 174px;
     background-size: 174px 68px;
     width: 174px;
     height: 68px;
 }
 div.header {
     background: #fff;
 }
 .header .logo {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    background: none;
    float: left;
 }
 .header>.visible-xs {
    width: 40px;
 }
 .equal-height-container {
    padding: 24px 24px 5px 24px;
  }
}


.no-bg-dropdown .ui-icon {
    top: -3px;
}
.no-bg-dropdown .ui-button-text {
    padding: 0 28px 0 0;
}
.mail-control-buttons .no-bg-dropdown .ui-icon {
    top: -6px;
}
.container {
    width: 100%;
}

#page.container {
    max-width: none !important;
    width: 100%;
    padding-left: 0;
    padding-right: 0;

    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    margin: 0;
    justify-content: center;
}

.desktop-menu {
    padding: 90px 24px 24px 24px;
    float: right;
    width: 280px;
    max-width: 280px;
    min-width: 280px;
    background: #fff;
    /* height: 100%; */1
    flex-shrink: 0;
    flex-basis: auto;
    min-height: calc(100vh - 80px);
    box-shadow: 0px 8px 32px 9px rgba(0, 17, 85, 0.08);
    clip-path: inset(0px 0px -32px -32px);
}

.desktop-menu .menu-item {
    font-size: 18px;
    color: #001155;
}
.desktop-menu .menu-item:hover {
    font-size: 18px;
    color: #0048CF;
}
.desktop-menu .menu-item.active {
    color: #086ADB;
    border-bottom: 1px solid #086ADB;
    font-weight: normal;
}
.desktop-menu .menu-item.bold {
    font-weight: normal;
    color: #086ADB;
    border-bottom: 1px solid #A63297;
}

.desktop-menu .used-storage, .desktop-menu .ui-widget-content.used-storage {
    border: none;
    color: #646567;
    border-top: 1px solid #d6d6d6;;
    padding-top: 16px;
    height: 30px;
    margin-top: 24px;
}
.desktop-menu .used-storage .ui-progressbar-value {
    background-color: #A63297;
    border: 1px solid #A63297;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    height: 8px;
}
.desktop-menu .used-storage .ui-progressbar-label {
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 0;
}


@media screen and (min-width: 768px) {
  #page.container {
    margin: 0;
    max-width: none;
  }
  .container header.row {
    width: 100%;
  }
  #personalForm, #channelForm[action*="registration"], #newPinSelectionForm, #infoBoxForm, #resetForm, #twoFactorForm, #defineMobileForm {
    width: 752px;
  }
  #personalForm ~ div.row {
    width: 752px;
    margin: 0 auto;
  }
  .form .button span, .form a.button span, .form-controls .button span, .form-controls a.button span {
    padding: 0;
  }
  .mail-folder-preferences .button-search, .contacts-preferences .button-search {
    margin: 0;
  }
  .preferences-form-content .ui-inputfield, .changePassword-form-content .ui-inputfield {
    height: 48px;
  }
  .mail-folder-preferences .no-bg-dropdown, .contacts-preferences .no-bg-dropdown, .certificates-preferences .no-bg-dropdown, .search-result-preferences .no-bg-dropdown {
    line-height: 24px;
  }
  .mail-table, .contacts-table, .certificates-table, .result-table{
    font-size: 14px !important;
  }  
  .preferences-form-content {
    display: grid;
  }
  .preferences-form-content .checkbox-with-text {
    display: flex;
  }
  .header .logo {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    width: 100px;
  }
  .icon-button {
    width: 48px;
    height: 48px;
  }	
  .new-message-form-footer .read-confirmation-checkbox {
    margin: 10px 15px;
  }
  .new-message-form-content .input {
    margin-top: 5px;
  }
  #webmailLogin-checkbox, #mTanLogin-checkbox {
    margin-top: 5px;
    margin-bottom: 0;
  }
  .ui-dialog {
    max-width: 700px !important;
  }
}

@media screen and (min-width: 992px) {
  .container header.row {
    width: 100%;
  }
  #personalForm, #channelForm[action*="registration"], #newPinSelectionForm, #infoBoxForm, #resetForm, #twoFactorForm, #defineMobileForm {
    width: 962px;
  }
  #personalForm ~ div.row {
    width: 962px;
    margin: 0 auto;
  }

}
@media screen and (min-width: 1024px) {
  .container header.row {
    width: 100%;
  }
}
@media screen and (min-width: 1280px) {
  .container header.row {
    width: 100%;
  }
}
@media screen and (min-width: 1440px) {
  .container header.row {
    width: 100%;
  }
}

.container>.row {
    margin: 0;
    display: flex;
    flex-direction: row-reverse;
    flex: 1 0 auto;
    align-self: center;
    width: 100%;
}



#loginForm {
    margin: 8vh auto 0;
    width: 450px;
    flex: 1 0 auto;
}
#loginForm_messages {
    padding: 0 16px 8px;
}
#requestPublicKeyForm {
    margin: 8vh auto 0;
    width: 450px;
}

#requestPublicKeyForm .row{
    margin: 0;
}
#requestPublicKeyForm .form-controls.row {
    margin-top: 16px;
    margin-bottom: 16px;
}
#requestPublicKeyForm .col-sm-6 {
    width: 100%;
}

#identificationForm {
    margin: 8vh auto 0;
    width: 450px;
}
#identificationForm .row{
    margin: 0;
}
#identificationForm .form-controls.row {
    margin-top: 16px;
    margin-bottom: 16px;
}
#identificationForm .col-sm-6 {
    width: 100%;
}
#successfulPasswordResetForm {
    margin: 8vh auto 0;
    width: 450px;
}

#successfulPublicKeyRequestForm {
    margin: 8vh auto 0;
    width: 450px;
}
#successfulPublicKeyRequestForm .row{
    margin: 0;
}
#successfulPublicKeyRequestForm .col-sm-6 {
    width: 100%;
}

#personalForm, #channelForm[action*="registration"], #infoBoxForm, #resetForm, #twoFactorForm, #defineMobileForm {
    margin: 40px auto 0;
}
#channelForm[action*="registration"], #infoBoxForm, #resetForm {
    padding: 0 30px;
}
#channelForm[action*="registration"] .choice-button-container .button.primary {
    background: #1B8712;
    border-color: #1B8712;
}
#channelForm[action*="registration"] .choice-button-container .button.primary.ui-state-hover {
    background: #0D6F2C;
    border-color: #0D6F2C;
}
#channelForm .webmail-choice-item-icon, #channelForm .choice-item-icon[src*="webmail"] {
    background-image: url(/static/img/globe_key_LIGHT.svg);
    width: 32px;
    height: 32px;
    padding-left: 32px;
    margin-top: -5px;
}
#channelForm .certificate-choice-item-icon {
    background-image: url(/static/img/certificate_LIGHT_001155.svg);
    width: 32px;
    height: 32px;
    padding-left: 32px;
}

#personalForm .row{
    margin: 0 30px;
}
#personalForm .form-controls.row {
    margin-top: 16px;
    margin-bottom: 16px;
}
#personalForm .form-controls .col-sm-6 {
    width: 100%;
}
#personalForm .col-sm-6 {
    width: 50%;
}
#twoFactorForm .row{
    margin: 0 30px;
}
#twoFactorForm .form-controls.row {
    margin-top: 16px;
    margin-bottom: 16px;
}
#twoFactorForm .form-controls .col-sm-6 {
    width: 100%;
}
#defineMobileForm .row{
    margin: 0 30px;
}
#defineMobileForm .form-controls.row {
    margin-top: 16px;
    margin-bottom: 16px;
}
#defineMobileForm .form-controls .col-sm-6 {
    width: 100%;
}
#personalForm .form-header, #channelForm[action*="registration"] .form-header, #newPinSelectionForm .form-header, #resetForm .form-header, #twoFactorForm .form-header, #defineMobileForm .form-header {
    text-align: left;
    color: #001155;
    border-top: 7px solid #A63297;
    font-weight: 300;
    font-size: 24px;
}

#registrationLogo_registrationLogo, #loginLogo_loginLogo, #othersLogo_othersLogo, #infoLogo_infoLogo, #keyLogo_keyLogo {
    background-image: url(/static/img/Swisscom_Navy_174x68.png);
    padding-right: 174px;
    background-size: 174px 68px;
    width: 174px;
    height: 68px;
    margin-left: 56px;
}
#newPinSelectionForm {
    margin: 40px auto;
}
#newPinSelectionForm_generalErrorMessages {
    max-width: 450px;
    margin: 0 auto;
}

@media (max-width:767px) {
  #loginForm {
    margin: 24px 0 0;
    width: 100%;
  }
  #loginForm .row {
    margin: 0 auto;
    max-width: 450px;
  }
  
  #requestPublicKeyForm {
    margin: 0 0;
    width: 100%;
  }
  #requestPublicKeyForm .row {
    margin: 30px auto 0;
    max-width: 450px;
  }
  #requestPublicKeyForm .button {
    margin-left: 0;
  }
  
  #identificationForm {
    margin: 0 0;
    width: 100%;
  }
  #identificationForm .row {
    margin: 30px auto 0;
    max-width: 450px;
  }
  #identificationForm .button {
    margin-left: 0;
  }

  #successfulPasswordResetForm {
    margin: 0 0;
    width: 100%;
  }
  #successfulPasswordResetForm .row {
    margin: 30px auto 0;
    max-width: 450px;
  }
  #successfulPasswordResetForm .button {
    margin-left: 0;
  }

  #successfulPublicKeyRequestForm {
    margin: 0 0;
    width: 100%;
  }
  #successfulPublicKeyRequestForm .row {
    margin: 30px auto 0;
    max-width: 450px;
  }
  #successfulPublicKeyRequestForm .button {
    margin-left: 0;
  }
  #personalForm .col-sm-6 {
    width: 100%;
  }
}

#loginForm_loginButton {
    margin: 15px 0px;
    height: 48px !important;
    line-height: 48px !important;
}

#loginForm ~ .row {
    margin: 24px auto 0;
    width: 450px;
    max-width: 450px;
}
#requestPublicKeyForm ~ .row {
    margin: 0 auto;
    max-width: 450px;
}
#identificationForm ~ .row {
    margin: 0 auto;
    max-width: 450px;
}
#successfulPasswordResetForm ~ .row {
    margin: 0 auto;
    max-width: 450px;
}
#successfulPasswordResetForm .form-header {
   display: unset;
   padding-top: 0;
   padding-bottom: 0;
}
#successfulPasswordResetForm .form-navigation {
   display: none;
}
#successfulPasswordResetForm .form.row {
    padding-top: 0;
}


#successfulPublicKeyRequestForm ~ .row {
    margin: 0 auto;
    max-width: 450px;
}
#successfulPublicKeyRequestForm .form-header {
   display: unset;
   padding-top: 0;
   padding-bottom: 0;
}
#successfulPublicKeyRequestForm .form-navigation {
   display: none;
}
#successfulPublicKeyRequestForm .form.row {
    padding-top: 0;
}

.note-separator {
    display: none;
}

.form .input-meta .input-status-valid, .form .input-meta .input-link {
    margin-top: -5px;
}
.form .input-meta .input-status-valid {
    color: #1B8712;
}
.form .input-meta .input-status-valid img {
    background-image: url(/static/img/check_mark_BOLD_1B8712.svg);
    width: 24px;
    height: 24px;
    padding-left: 24px;
}

.form input {
    box-shadow: none;
    border-radius: 5px;    
    height: 48px;
}
.form input:not(.ui-state-focus) {
    box-shadow: none;
}

.input .ui-state-default not(.ui-corner-right) {
    border: 1px solid #ADADAD;
}
.input .ui-state-hover not(.ui-corner-right) {
    border: 1px solid #858585;
}
.input .ui-state-focus not(.ui-corner-right) {
    border: 1px solid #086ADB;
}


.ui-messages-error, .ui-message-error {
    font-size: 18px;
    color: #333;
    background: #fff;
    border: 0 solid #d6d6d6;
    border-width: 0 1px 1px 1px;
    border-top: 4px solid #d12;
    margin-bottom: 20px;
}
.ui-messages-info, .ui-message-info {
    font-size: 18px;
    color: #333;
    background: #fff;
    border: 0 solid #d6d6d6;
    border-width: 0 1px 1px 1px;
    border-top: 4px solid #A2CDF4;
    margin-bottom: 20px;
}
.ui-messages-warn, .ui-message-warn {
    font-size: 18px;
    color: #333;
    background: #fff;
    border: 0 solid #d6d6d6;
    border-width: 0 1px 1px 1px;
    border-top: 4px solid #cf4a0c;
    margin-bottom: 20px;
}



.ui-messages-error .ui-icon-close, .ui-message-error .ui-icon-close {
    display: none;
}
.ui-messages-info .ui-icon-close, .ui-message-info .ui-icon-close {
    display: none;
}
.ui-messages-warn .ui-icon-close, .ui-message-warn .ui-icon-close {
    display: none;
}

.ui-messages-error-icon, .ui-messages-error-icon {
    background: none;
    width: 32px;
    height: 32px;
}
.ui-messages-error-icon:before, .ui-messages-error-icon:before {
    font-family: "sdx-icons";
    line-height: 1;
    color: #d12;
    content: "";
    font-size: 32px;
}
.ui-messages-info-icon, .ui-messages-info-icon {
    background: none;
    width: 32px;
    height: 32px;
}
.ui-messages-info-icon:before, .ui-messages-info-icon:before {
    font-family: "sdx-icons";
    line-height: 1;
    color: #A2CDF4;
    content: "";
    font-size: 32px;
}
.ui-messages-warn-icon, .ui-messages-warn-icon {
    background: none;
    width: 32px;
    height: 32px;
}
.ui-messages-warn-icon:before, .ui-messages-warn-icon:before {
    font-family: "sdx-icons";
    line-height: 1;
    color: #cf4a0c;
    content: "";
    font-size: 32px;
}
.ui-messages-info-summary, .ui-messages-warn-summary, .ui-messages-error-summary, .ui-messages-fatal-summary, .ui-message-info-summary, .ui-message-warn-summary, .ui-message-error-summary, .ui-message-fatal-summary {
    font-weight: normal;
}

.ui-messages-error a:before, .ui-message-error a:before{
  position: absolute;
  top: 10px;
  right: 40px;
  left: 40px;
  height: 4em;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}
div#channelForm_warnSMIME, div#channelForm_warnPGP {
  margin-left: 100px;
  margin-right: 15px;
}


.note {
    background: #fff;
    box-shadow: 1px 1px 5px #C8C8C8;
    padding: 10px;
    border-top: 7px solid #0EABA9;
    max-width: 450px;
    float: none;
    margin: 0 auto;
}
#personalForm ~ div.row .note {
    margin: 0 auto 0 32px;
}
.note .title {
    font-size: 18px;
    color: #001155;
}
.note dl dd, .note dl dt {
    font-weight: 300;
}

.note .more-info {
    background: url(/static/img/information_circle_LIGHT.svg);
}

.mail-folder-preferences .button-search, .contacts-preferences .button-search,
  .mail-folder-preferences .button-search:hover, .contacts-preferences .button-search:hover,  
  .mail-folder-preferences .button-search.active,
  .mail-folder-preferences:hover .button-search.active:hover
{
    background-image: url(/static/img/search_BOLD.svg) !important;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-position: 0 0;
}

.mail-control-button.button-search, .contact-control-button.button-search {
    background: url(/static/img/search_BOLD.svg) !important;
}
.mail-control-button.button-edit {
    background: url(/static/img/edit_LIGHT.svg) !important;
}

.mobile-action-menu a.icon-box.reply {
  background-image: url(/static/img/reply_message_LIGHT.svg);
  background-size: 21px 25px;
}

.mobile-action-menu a.icon-box.reply-to-all {
  background-image:: url(/static/img/reply_message_all_LIGHT.svg);
  background-size: 25px 25px;
}

.mobile-action-menu a.icon-box.forward {
  background-image:: url(/static/img/forward_message_LIGHT.svg);
  background-size: 25px 18px;
}

.mobile-action-menu a.icon-box.move-folder-to {
  background-image:: url(/static/img/folder_LIGHT.svg);
  background-size: 25px 20px;
}

.mobile-action-menu a.icon-box.delete {
  background-image:: url(/static/img/bin_LIGHT.svg);
  background-size: 19px 25px;
}

.mobile-action-menu a.icon-box.export-cert {
  background-image:: url(/static/img/download_LIGHT.svg);
  background-size: 16px 25px;
}

.mobile-action-menu a.icon-box.use-to-sign {
  background-image:: url(/static/img/certificate_LIGHT.svg);
  background-size: 34px 23px;
}

.mobile-action-menu a.icon-box.use-to-encrypt {
  background-image:: url(/static/img/key_LIGHT.svg);
  background-size: 19px 25px;
}

.mobile-action-menu a.icon-box.trusted {
  background-image:: url(/static/img/check_mark_LIGHT.svg);
  background-size: 23px 25px;
}

.mobile-action-menu a.icon-box.not-trusted {
  background-image:: url(/clear_circle_LIGHT.svg);
  background-size: 23px 25px;
}

.mobile-action-menu a.icon-box.status-cancelled {
  background-image:: url(/static/img/cancel_LIGHT.svg);
  background-size: 18px 18px;
}

.mobile-action-menu .actions-container-header .primary-button, .mobile-action-menu .actions-container-header .button {
  height: 48px;
  border-radius: 5px;
  min-width: 160px;
}
.mobile-action-menu .actions-container-full .actions-container-header {
    height: 70px;
}

.form-controls {
    margin-top: 15px;
    margin-bottom: 15px;
}

.form .button.primary, .page-top-menu .button.primary, .desktop-menu .button.primary, .file-upload {
    background-color: #086ADB;
    border-color: #086ADB;
    color: #FFFFFF;
    min-width: 160px;
    padding: 5px 24px;
    height: 48px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.1px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
}

.file-upload .file-upload-link {
    font-size: 18px;
    line-height: 24px;
    padding: 6px 30px;
}
.file-upload .file-upload-link:hover {
    color: #ffffff;
}

.desktop-menu button .ui-button-text::before {
    font-family: sdx-icons;
    content: "";
    line-height: 1;
    font-size: 24px;
    padding-right: 8px;
    vertical-align: -10%;
}
.form .button.interaction.primary {
    background: #086ADB;
    border-color: #086ADB;
    color: #fff;
}
.form .button.interaction.primary.ui-state-hover {
    background: #0048CF;
    border-color: #0048CF;
    color: #fff;
}
#loginForm_loginButton {
    padding: 0 24px;
}
#desktopMenuForm .button.primary {
    padding: 8px 24px;
}
#newMessageForm .button.primary {
    background: #1B8712;
    border-color: #1B8712;
}
#newMessageForm .button.primary.ui-state-hover {
    background: #0d6f2c;
    border-color: #0d6f2c;
}
.mail-control-button.button-settings {
    background-image: url(/static/img/settings_BOLD.svg) !important;
    width: 32px !important;
    height: 32px !important;

}
.icon-button.button-encrypted {
    background-image: url(/static/img/lock_action_BOLD.svg);
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}
.icon-button.button-encrypted:hover {
    background-image: url(/static/img/lock_action_BOLD_hover.svg);
    background-size: 24px 24px;
}
.icon-button.button-encrypted-inactive {
    background-image: url(/static/img/lock-open_BOLD.svg);
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}
.icon-button.button-encrypted-inactive:hover {
    background-image: url(/static/img/lock-open_BOLD_hover.svg);
    background-size: 24px 24px;
}
.icon-button.button-save {
    background-image: url(/static/img/save_BOLD.svg);
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}
.icon-button.button-save:hover {
    background-image: url(/static/img/save_BOLD_hover.svg);
    background-size: 24px 24px;
}
.icon-button.button-delete {
    background-image: url(/static/img/bin_BOLD.svg);
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}
.icon-button.button-delete:hover {
    background-image: url(/static/img/bin_BOLD_hover.svg);
    background-size: 24px 24px;
}
.new-message-form-footer .icon-button {
    margin: 12px 8px;
}

#channelForm .button-left-desktop, #twoFactorForm .button-left-desktop, #defineMobileForm .button-left-desktop {
    background-color: #cfd5d9;
    height: 48px;
    padding: 0px 24px;
    vertical-align: middle;
    line-height: 46px;
}
#channelForm .button-left-desktop:hover, #twoFactorForm .button-left-desktop:hover, #defineMobileForm .button-left-desktop:hover {
    background-color: #b1b9be;
}
#channelForm .button-left-desktop img, #twoFactorForm .button-left-desktop img, #defineMobileForm .button-left-desktop img {
    display: none;
}
#channelForm[action*="accountOverview"] button.secondary, #preferencesForm button.secondary {
    display: none;
}
#preferencesForm .delete-confirmation-window button.secondary {
    display: block;	
}

.form .button, .form-controls .button, .delete-account-button {
    min-width: 160px;
    display: block;
    height: 48px;
    border-width: 1px;
    border-style: solid;
    margin: 10px 8px;
    padding: 0 24px;
    transition: all 70ms cubic-bezier(.4,0,.6,1);
    border-radius: 5px;

    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.1px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    background-color: #cfd5d9;
    border-color: #cfd5d9;
    color: #333;
}
.form-controls .button:hover, .delete-account-button:hover {
    background-color: #B1B9BE;
    color: #333333;
    border-color: #B1B9BE;
}
.mail-control-button.file-upload {
    min-width: 0;
    padding: 0;
}
.mail-control-buttons .ui-menubutton .ui-button {
    width: 48px;
}

.form .form-header .mail-folder-header {
    height: 64px;
    padding: 10px 20px 0px 20px;
}
.form .form-header .mail-folder-header .mail-folder-header-left {
    padding-left: 40px;
    width: 40%;
}
.form .form-header .mail-folder-header .mail-folder-header-right {
    width: 60%;
}
.form .form-header .mail-folder-header .mail-folder-header-left, .form .form-header .mail-folder-header .mail-folder-header-right {
    padding-top: 2px;
}
.form-header .mail-folder-label {
    padding-top: 8px;
}
.select-all-checkbox-container .select-all-checkbox {
    bottom: 10px;
}
.select-all-checkbox-container {
    height: 48px;
    width: 48px;
    margin-top: -48px;
}
.desktop-action-menu .actions-container-search.mail-folder-search {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
}
.actions-container-search .col-xs-10 {
    width: 50%;
}
.actions-container-search .col-xs-2 {
    width: auto;
    margin-left: auto;
}
.mail-folder-preferences .button-search.active, .mail-folder-preferences .button-search.active:hover,
  .mail-folder-preferences .button-search.active:active, 
  .mail-folder-preferences .button-search.active:focus {
    background-color: transparent;
}
.desktop-action-menu .actions-container-search {
    background-color: transparent;
}


.desktop-action-menu .actions-container-search .ui-inputfield {
    height: 48px;
}
.desktop-action-menu .actions-container-search .ui-inputfield.ui-state-default {
    border: 1px solid #ADADAD;
    background-color: transparent;
    color: #333333;
}
.desktop-action-menu .actions-container-search .ui-inputfield.ui-state-hover {
    border: 1px solid #858585;
    background-color: transparent;
    color: #333333;
}
.desktop-action-menu .actions-container-search .ui-inputfield.ui-state-focus {
    border: 1px solid #086ADB;
    background-color: transparent;
    color: #333333;
}

.form-interaction .input-field, .form-interaction .ui-calendar .ui-inputfield, .form .input-field.interaction, .form .ui-calendar.interaction .ui-inputfield {
    border: 1px solid #ADADAD;
    background-color: transparent;
    color: #333333;

}
.form-interaction .input-field.ui-state-hover, .form-interaction .ui-calendar .ui-inputfield.ui-state-hover, .form-interaction .ui-selectonemenu.ui-state-hover, .form .input-field.interaction, .form .input-field.interaction.ui-state-hover, .form .ui-calendar.interaction .ui-inputfield.ui-state-hover, .form .ui-selectonemenu.interaction.ui-state-hover, .form-header .search-panel .ui-selectonemenu.ui-state-hover {
    border: 1px solid #858585;
    background-color: transparent;
    color: #333333;

}
.form-interaction .input-field.ui-state-focus, .form-interaction .ui-calendar .ui-inputfield.ui-state-focus, .form-interaction .ui-selectonemenu.ui-state-focus, .form .input-field.interaction, .form .input-field.interaction.ui-state-focus, .form .ui-calendar.interaction .ui-inputfield.ui-state-focus, .form .ui-selectonemenu.interaction.ui-state-focus, .form-header .search-panel .ui-selectonemenu.ui-state-focus {
    border: 1px solid #086ADB;
    background-color: transparent;
    color: #333333;

}


.form-interaction {
    background: #FFF;
    color: #333;
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 32px;
    padding-bottom: 16px;
}



.mail-table tbody tr:nth-child(2n+1) td, .certificates-table tbody tr:nth-child(2n+1) td, .result-table tbody tr:nth-child(2n+1) td {
    background-color: #fff;
}
.mail-table tbody tr:hover td, .contacts-table tbody tr:hover td {
    background-color: #fff;
}
.mail-table tbody tr td, .certificates-table tbody tr td {
   vertical-align: middle;        
   height: 48px;
}
.mail-table .mail-table-checkbox, .contacts-table .contacts-table-checkbox, .certificates-table .certificates-table-checkbox {
    vertical-align: middle !important;
}
.mail-table .mail-table-checkbox {
    padding-left: 5px !important;
}
.mail-table .mail-attachment-icon {
    background-image: url(/static/img/attachment_BOLD_333333.svg);
    width: 18px;
    height: 18px;
    padding-left: 18px;
}
.certificates-table .sign-column, .certificates-table .encrypt-column {
    padding: 5px 4px 5px;
}
.certificates-table .sign-column .ui-column-title img {
    background-image: url(/static/img/edit_BOLD.svg);
    width: 20px;
    height: 20px;
    padding-left: 20px;
}
.certificates-table .encrypt-column .ui-column-title img{
    background-image: url(/static/img/lock_BOLD.svg);
    width: 20px;
    height: 20px;
    padding-left: 20px;
}
.certificates-table tbody img.check-icon {
    background-image: url(/static/img/check_mark_BOLD_1B8712.svg);
    width: 24px;
    height: 24px;
    padding-left: 24px;
}

.certificates-table tbody td.details-column {
    text-align: center;
    vertical-align: middle;
    padding: 5px 15px 5px 0;
}
.certificates-table .details-button {
    background-image: url(/static/img/zoom_in_BOLD.svg);
    background-position: center middle;
    background-size: 32px 32px;
    background-color: transparent;
    height: 32px;
}
#certificatesForm .choice-item-head .choice-item-icon[src*="stacker_icon"] {
    background-image: url(/static/img/upload_BOLD.svg);
    width: 24px;
    height: 24px;
    padding-left: 24px;
}

.certificates-table .details-button:hover {
    background-color: transparent;
}
.certificate-information-form-content div:nth-child(4) .certification-detail {
    display: table-row;
}
.certificate-information-form-content div:nth-child(4) .certification-detail .detail-label {
    vertical-align: top;
    padding-bottom: 16px;
}
.certificate-information-form-content div:nth-child(4) .certification-detail .detail-value {
    vertical-align: top;
    padding-bottom: 16px;
}
.certificate-information-form-content>div:first-child {
    padding-top: 8px;
}
.certificate-information-form-content a.button-left {
    margin-left: 8px;
    height: 48px;
    vertical-align: middle;
    padding: 8px 16px;
    text-align: center;
    background-color: #CFD5D9 !important;
    border-color: #CFD5D9 !important;
}
.certificate-information-form-content a.button-left:hover {
    background-color: #B1B9BE !important;
    border-color: #B1B9BE !important;
}
.certificate-information-form-content a.button-left img {
    display: none;
}
.certificates-form-content .choice-button-container .button, .download-certificate-form-content .choice-button-container .button {
    min-width: 160px;
    padding: 5px 24px;
    margin: 15px;
}

.certificates-form-content .choice-item-head .headline, .download-certificate-form-content .choice-item-head .headline, #channelForm .choice-item-head .headline {
    color: #001155;
}

.form .form-header .contacts-header .add-contacts-button {
    width: 100%;
    margin: 0;
}
.radio-choice-item.selected .choice-item-head .headline {
    color: #001155;
}
.radio-button-container label::before {
    border: 2px solid rgb(173, 173, 173);
    border-radius: 50%;
    width: 22px;
    height: 22px;
}
.radio-button-container input[type="radio"]:checked + label::before {
    background-image: url(/static/img/radio_button_selected_bg.png);
}
.radio-button-container input[type="radio"]:checked + label::before {
    transform: scale(1) translateZ(0px);
    color: rgb(8, 106, 219);
    border-color: rgb(8, 106, 219);
}
.form .choice-item-head .headline {
    line-height: 24px;
    font-weight: 300;
    font-size: 24px;
}

.ui-selectonemenu-label {
    height: 48px !important;
}
.ui-selectonemenu {
    width: 100% !important;
}

#languageSelectForm_languageSelectMenu_focus {
   width: 30px;
}
#languageSelectForm_languageSelectMenu.ui-selectonemenu .ui-selectonemenu-trigger {
    top: 6px;
    width: 32px !important;
}
#languageSelectForm_languageSelectMenuMobile {
    background: transparent !important;
    color: #333 !important;
    border: none !important;
    width: 40px !important;
    height: 50px !important;
}
#languageSelectForm_languageSelectMenuMobile .ui-selectonemenu-trigger .ui-icon {
    display: inline;
}
.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon, #languageSelectForm_languageSelectMenuMobile .ui-selectonemenu-trigger .ui-icon {
    background: url(/static/img/chevron_small_down_BOLD.svg);
    width: 32px;
    height: 32px;
}
.ui-selectonemenu .ui-selectonemenu-trigger.ui-state-hover .ui-icon, #languageSelectForm_languageSelectMenuMobile .ui-selectonemenu-trigger.ui-state-hover .ui-icon {
    background: url("/static/img/chevron_small_down_BOLD_hover.svg");
    width: 32px;
    height: 32px;
}
.ui-icon-triangle-1-s {
    background-position: unset;
}
.ui-menubutton .ui-icon {
    background: url("/static/img/chevron_small_down_BOLD.svg");
    width: 32px;
    height: 32px;
}
.ui-menubutton .ui-state-hover .ui-icon, .ui-menubutton .ui-state-focus .ui-icon, .ui-menubutton .ui-state-active .ui-icon   {
    background: url("/static/img/chevron_small_down_BOLD_hover.svg");
    width: 32px;
    height: 32px;
}

.ui-chkbox .ui-chkbox-box {
    border-radius: 5px;
    border: 2px solid #c8c8c8 !important;
    width: 22px;
    height: 22px;
}
.ui-chkbox .ui-chkbox-box.ui-state-active {
    border: 2px solid #086ADB !important;
}
.ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon {
    background-image: url(/static/img/check_mark_BOLD.svg) !important;
    background-position: initial;
    width: 18px;
    height: 18px;
}
.ui-icon-check {
    background-position: -64px -145px;
}
.ui-icon-minus .ui-icon-blank {
    background-position: -48px -129px;
}


.form .button.primary:hover, .button.primary.ui-state-hover, .button.primary.ui-state-active, .file-upload:hover, .form-controls .button.primary:hover {
    background-color: #0048CF;
    border-color: #0048CF;
}

.overlay-mobile-header-wrapper {
    margin-top: 5px;
}

.button {
    border-radius: 5px;
}

.read-message-form-header .read-message-control-buttons .dropdown-combi-button .ui-button {
    width: 48px;
    height: 48px;
    border-radius: 5px;
}
.read-message-form-header .read-message-control-buttons .dropdown-combi-button .ui-button:hover {
    background-color: #0048CF;
}

.ui-button-text {
    padding: 0;
}
.form .button span, .form a.button span {
    padding: 0;
}
.read-message-form-header .read-message-control-buttons .dropdown-combi-button {
    float: right;
    width: 48px;
    height: 48px;
    margin-left: 5px;
}
.read-message-form-header .read-message-control-buttons .dropdown-combi-button .ui-icon-triangle-1-s {
    background: url("/static/img/more_BOLD_white.svg");
    width: 32px;
    height: 32px;
    left: 7px;
    top: 7px;
    margin-top: 0;
}
.read-message-form-header .header-left {
   width: 100%;
}
.read-message-form-header .read-message-control-buttons {
   width: 100%;
}
.read-message-form-content .message-attachment.icon-box .attachment-icon.download {
    background-image: url(/static/img/download_BOLD.svg);
    background-size: 18px 18px;
    width: 18px;
}
.read-message-form-content .message-attachment.icon-box:hover .attachment-icon.download {
    background-image: url(/static/img/download_BOLD_0048cf.svg);
}
.read-message-form-content .message-attachment:hover {
    color: #0048cf;
}

.mail-table .mail-subject {
    line-height: 20px;
}

.new-message-form-header .new-message-control-buttons .button {
    float: right;
}
.new-message-form-content .cc-bcc-button {
   color: #086ADB;
}
#newMessageFormHeader {
    display: flex;
    justify-content: flex-end;
}
@media (max-width:767px) {
  #newMessageFormHeader .col-xs-6 {
    width: auto;
  }
  #newMessageFormHeader .button {
    width: 100%;
    margin: 10px 5px;
  }
  #newMessageFormHeader .new-message-label-container {
    margin-right: auto;
  }
  #newMessageForm .mail-control-button.button-attachment {
    background-image: url(/static/img/attachment_BOLD.svg) !important;
    background-color: transparent !important;
    width: 32px !important;
    height: 32px !important;
  }
  .form .button, .form-controls .button {
    min-width: 0;
    margin: 10px 0;
  }
  .certificates-form-content .choice-button-container .button, .download-certificate-form-content .choice-button-container .button {
    margin: 15px 0;
  }
  .header .logo {
    margin-right: auto;
  }
  #registrationLogo_registrationLogo, #loginLogo_loginLogo, #othersLogo_othersLogo, #infoLogo_infoLogo, #keyLogo_keyLogo {
    margin-left: 0;
  }
  #personalForm ~ div.row .note {
    margin: 0 auto;
  }
  .form-navigation .navigation-item {
    margin-bottom: 30px !important;
  } 
}
@media (min-width:768px) and (max-width:991px) {
  .equal-height-container {
    padding: 40px 24px 0px 24px;
  }
  .default-logo {
    margin-left: 0;
  }
  .col-sm-6 {
    width: 50%;
  }
  .changePassword-form-content .col-xs-12.col-sm-6.col-padding-left {
    padding-left: 15px;
  }
  .sign-column {
    display: none;
  }
  .encrypt-column {
    display: none;
  }
  /*.mail-table, .contacts-table, .certificates-table, .result-table{
    font-size: 14px !important;
  }*/ 
  .certificates-table .valid-until-column, .certificates-table .created-column {
    width: 90px;
  }
  .certificates-table .details-column {
    width: 32px;
  }
  .certificates-table .details-button {
    width: 32px;
  }
  .certificates-table .usage-column {
    width: 85px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .certificate-information-form-content, .certificate-information-form-content a {
    font-size: 14px !important
  }
}


.more-link {
    color: #086ADB !important;
}
.more-link:hover {
    color: #0048CF !important;
}


.vertical-separator {
    margin: 14px 0;
}

.header {
    margin: 0 auto;
    float: none;
    display: flex;
    justify-content: flex-start;
    height: 80px;
}

.header .logo {
    order: 1;
}

.header .tab-navigation {
    order: 2;
    height: 80px;
    width: auto;
}

.header .user-menu {
    order: 3;	
    height: 80px;
    width: auto;
    vertical-align: middle;
    margin-left: auto;
    margin-right: 80px;
    text-align: right;
}
.header .user-menu-btn {
    margin-top: 30px;
}
.lastLoginDateContainer {
    font-size: 16px !important;
    color: #666666;
    margin-right: -80px;
    position: absolute;
    z-index: +1;
    padding: 8px 32px 8px 24px;
    text-align: left;
    width: 280px;
    right: 0;
    top: 96px;
}

.header .help {
    order: 4;
    height: 80px;
    width: 64px;
    margin-top: 0;
    margin-right: 0;
    padding-right: 24px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    /* justify-content: flex-end; */
    align-self: flex-end;
}
.help .circled-text {
    color: #086ADB;
    border-color: #086ADB;
}


#statusIcon {
    margin: 0 5px;
    order: 1;
}

.row {
    margin-left: 0;
    margin-right: 0;
}
.col-sm-middle, .form-content, .form .form-content {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px
}


header.row {
    margin-bottom: 30px;
    margin-right: 0;
    margin-left: 0;
    border-bottom: 1px solid #D6D6D6;
    height: 80px;
    max-height: 80px; 
    background: #fff;

    flex-grow: 0;
}
.container header.row {
    margin-left: 0;
}

.tab-navigation-items {
    width: auto;
    margin-left: 0;
}

.tab-navigation .main-menu-item {
    position: relative;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    cursor: pointer;
    display: table-cell;
    float: left;
    height: 38px;
    margin-right: 10px;
    padding: 0px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 20px;
    border-top: 0px;
    margin-bottom: 20px;
}

.tab-navigation .main-menu-item.active {
    background: none;
    border-bottom-color: #001155;
}
.tab-navigation .main-menu-item.active:hover {
    border-bottom-color: #0048CF;
}
.main-menu-item.inactive {
    border: 0px;
    background: none;
}

.tab-navigation .main-menu-item a {
    float: left;
    font-size: 24px;
    line-height: 18px;
    font-weight: 300;
    padding: 10px 2px 11px 2px;
}
.tab-navigation .main-menu-item a {
    color: #001155;
}
.tab-navigation .main-menu-item a:visited {
    color: #001155;
}
.tab-navigation .main-menu-item a:hover {
    color: #0048CF;
}
.tab-navigation .main-menu-item.active a {
    color: #001155;
}
.tab-navigation .main-menu-item.active a:hover {
    color: #0048CF;
}


.tab-navigation .main-menu-item a.send_icon {
    background: none;
}

.tab-navigation .main-menu-item a.person_icon {
    background: none;
}
.form-navigation .navigation-item {
    font-size: 16px;
    border: none;
    padding: 8px 0;
    flex: 1 0 auto;
    margin-bottom: 16px;
    display: block;
}
.form .navigation-item.active {
    border-top: none;
}
.navigation-item .circled-text {
    display: block;
    margin: 4px auto;
}
.certificates-form-content .navigation-item.active {
    border-top: 1px solid #ADADAD;
}

#channelForm .form-navigation {
   padding-left: 50px;
}
.form-navigation .navigation-items tr {
    display: flex;
    border-bottom: 1px solid #ADADAD;
}

.navigation-item.active .circled-text {

    background-color: #086ADB;
    color: #fff;
    border-color: #086ADB;
}
.form .navigation-item.inactive.unselectable {
    color: #333;
}
.navigation-item.active:hover .circled-text {
    background-color: #0048CF;
    color: #fff;
    border-color: #0048CF;
}
.navigation-item.inactive .circled-text {
    background-color: #1B8712;
    color: #fff;
    border-color: #1B8712;
}
.navigation-item.inactive:hover .circled-text {
    background-color: #0D6F2C;
    color: #fff;
    border-color: #0D6F2C;
}
.navigation-item.active~.navigation-item.inactive .circled-text {
    background-color: #fff;
    color: #086ADB;
    border-color: #086ADB;
}
.navigation-item.active~.navigation-item.inactive:hover .circled-text {
    background-color: #fff;
    color: #0048CF;
    border-color: #0048CF;
}


/* certificates navigation tabs */
.certificates-tab-view-container .ui-tabs .ui-tabs-nav li {
    background-color: rgb(228, 233, 236);;
    border: none;
    border-top: 5px solid rgb(228, 233, 236) !important;
    min-width: 120px;
    margin-right: 2px;
    padding: 10px 16px 12px 16px;
    cursor: pointer;
    height: 48px;
    font-size: 16px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 0 !important;
}
.certificates-tab-view-container .ui-tabs .ui-tabs-nav li:hover {
    background-color: rgb(221, 227, 231);
    color: rgb(0, 72, 207);
    border-top-color: rgb(221, 227, 231) !important;
}
.certificates-tab-view-container .ui-tabs .ui-tabs-nav li.ui-tabs-selected {

    background-color: rgb(255, 255, 255);
    color: rgb(8, 106, 219);
    border-top: 5px solid #086adb !important;
}
.certificates-tab-view-container .ui-tabs .ui-tabs-nav li a {
    float: none;
}
.certificates-tab-view-container .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
    color: rgb(8, 106, 219);
}


@media (min-width:768px) {
  .certificates-form-content .choice-item {
    width: 100%;
  }
}

@media (min-width:768px) and (max-width:879px) {
  /* e-mail address may be too long on small screen widths */
  .header .user-menu-btn .ui-button-text {
    max-width: 250px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
  }
  /* reduce margins for help menu on smaller desktop screens */
  .header .help {
    margin-right: 16px;
    width: 32px;
  }
  .header .user-menu {
    margin-right: 56px;
  }
  .lastLoginDateContainer {
    margin-right: -56px;
  }
}
@media (min-width:880px) and (max-width:991px) {
  /* e-mail address may be too long on small screen widths */
  .header .user-menu-btn .ui-button-text {
    max-width: 360px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
  }
  /* reduce margins for help menu on smaller desktop screens */
  .header .help {
    margin-right: 16px;
    width: 32px;
  }
  .header .user-menu {
    margin-right: 56px;
  }
  .lastLoginDateContainer {
    margin-right: -56px;
  }
}
@media (min-width:992px) {
  /* e-mail address may be too long on small screen widths */
  .header .user-menu-btn .ui-button-text {
    max-width: 400px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
  }
}

/* mobile overlay */
.header .main-menu-btn {
    margin: 20px 0 0 15px;
    border: none;
}
.mobile-menu {
    right: 0; 
}

.mobile-menu .main-menu-item a.send_icon, .mobile-menu .main-menu-item a.person_icon {
    background: none;
}

.mobile-menu .ui-overlaypanel, .mobile-menu .ui-overlaypanel-content, .mobile-menu .ui-panel, .mobile-menu .ui-panel-inner, .mobile-menu .mobile-menu-items {
    background-color: #FFF;
    padding-left: 16px;
}
.mobile-menu .ui-commandlink, .mobile-menu .ui-commandlink:active, .mobile-menu .ui-commandlink:focus, .mobile-menu .ui-commandlink:hover {
    background-color: #FFF !important;
    color: #001155 !important;
}

.mobile-menu .main-menu-item, .mobile-menu .main-menu-item a {
    background-color: #FFF;
    color: #001155;
}
.mobile-menu .main-menu-item a:active, .mobile-menu .main-menu-item.active a {
    background-color: #FFF !important;
    color: #086ADB !important;
}
.mobile-menu .main-menu-item a:focus, .mobile-menu .main-menu-item a:hover {
    background-color: #FFF;
    color: #0048CF;
}

.mobile-menu .button {
    color: #086ADB;
    margin: 0 0 10px 15px;
    padding-left: 25px;
}

.mobile-menu .mobile-menu-items .ui-commandlink {
    border: none;
}
.mobile-menu .mobile-menu-items .ui-commandlink.separator {
    border: none;
}
.mobile-menu .mobile-menu-items {
    padding-left: 55px;
}

.ui-dialog {
    margin: 0 8px;
}