/* ==========================================================================
   16_SPECIFICS
   --------------------------------------------------------------------------
   * README
   * COLOR VARIABLES
   * GENERAL
   * FORMS
   * FORMS: Errors
   * FORMS: Form Grid
   * HEADER
   * THEME CONTENT
   * BUTTONS
   * FOOTER
   * SUCCESS PAGE

   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the All specific styles.
 * That means they apply to any page that deals with an exception to any
 * default style.

 * If you need to deal with an exception to any default styles, you should
 * manage it by adding a .X--modifier class to the .X element and develop the
 * given exception nested to this .X--modifier class in this stylesheet under
 * the corresponding page subtitle.

 * These .X--modifier classes and its nested styles are grouped by page in which
 * are featured, sorted by HTML depth, and separated in Structure, Behaviour or
 * Appearance styles as appropriate.
 */

/* BUTTON BAR IN THEMES
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   In themes the button bar for a .form is not as in wizards - it comes with a class, and we cannot add our own, so in here we are cloning the pertinent styles to tacke that.
   --------------------------------------------------------------------------

	<div class="greyButtonBar">
        [...]
    </div>

   -------------------------------------------------------------------------- */

.greyButtonBar {
    margin-bottom: -16px;
    padding: 0;
    text-align: left;
    /* If you want centered buttons, use the .greyButtonBar--center modifier */
    clear: both;
    -webkit-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

*+.greyButtonBar:not(.fieldSpec) {
    padding-top: 24px;
    /* var(--fieldSpec--padding-bottom) + 8px */
}

.greyButtonBar:before,
.greyButtonBar:after {
    content: "";
    /* Line 1/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
    display: table;
    /* Line 2/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
}

.greyButtonBar:after {
    clear: both;
    /* Line 3/3 for a clearfix workaround for when we can't access the HTML to add a .clearfix class */
}

.greyButtonBar button,
.greyButtonBar input[type="submit"],
.greyButtonBar .button {
    margin-bottom: 16px;
}

.greyButtonBar:not([class*="col"]) button,
.greyButtonBar:not([class*="col"]) input[type="submit"],
.greyButtonBar:not([class*="col"]) .button {
    min-width: 120px;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {

    .greyButtonBar button,
    .greyButtonBar input[type="submit"],
    .greyButtonBar .button {
        width: 100%;
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {

    .greyButtonBar:not([class*="button-bar--"]) button,
    .greyButtonBar:not([class*="button-bar--"]) input[type="submit"],
    .greyButtonBar:not([class*="button-bar--"]) .button {
        float: left;
    }

    .greyButtonBar:not([class*="button-bar--"]) button+button,
    .greyButtonBar:not([class*="button-bar--"]) input[type="submit"]+input[type="submit"],
    .greyButtonBar:not([class*="button-bar--"]) .button+.button {
        margin-left: 16px;
    }

}

/******************************************************************/

/* COLOR VARIABLES */

:root{
    --blueColor: #004B87;
    --linkColor: #1063BA;
    --orangeColor: #FF8200;
    --alertColor: #DA3535;
    --textColor: #555555;
}

/* GENERAL */
* {
    color: var(--textColor);
    font-size: 16px;
}

.body {
    background-color: #F2F2F2;
    font-family: 'Inter', sans-serif;
}

.main {
    background-color: transparent;
}

.main__wrapper {
    background-color: #FFFFFF;
    box-shadow: 0 8px 16px 0 rgba(99, 101, 106, 0.35);
    border-bottom: 6px solid var(--orangeColor);
    margin-bottom: 80px;
}

/* FORMS */
.labelText,
.fieldSpec label {
    font-weight: bold;
    margin-bottom: 8px;
}

.form input:not([type="checkbox"]):not([type="radio"]):not([class*="select2"]),
.form select,
.form .select2-container--default .select2-selection--single,
.form textarea {
    border-color: #63656A;
    border-radius: 0;
}

/* FORMS: Errors */

.form .fieldSpec.hasErrors label {
    color: var(--alertColor);
}

.form .fieldSpec.hasErrors input:not([type="checkbox"]):not([type="radio"]):not([class*="select2"]),
.form .fieldSpec.hasErrors select,
.form .fieldSpec.hasErrors .select2-container--default .select2-selection--single,
.form .fieldSpec.hasErrors textarea {
    border-color: var(--alertColor);
}

.form .fieldSpec.hasErrors .errorMessageIcon {
    display: none;
}

.alert.alert--error {
    color: var(--alertColor);
    border-left-color: var(--alertColor);
}

.alert.alert--error>i {
    display: none;
}

/* FORMS: Form Grid */

:root {
    --gridGap: 24px;
}

form .Section:before {
    display: none;
}

form .Section {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

form .Section>.fieldSpec {
    flex: 0 0 calc(50% - calc(var(--gridGap) / 2));
    padding-bottom: 24px;
}

form .Section>.fieldSpec.form__item--privacy-section {
    flex: 0 0 100%;
    padding-bottom: 0;
}

form .Section>.fieldSpec.form__item--privacy-section div {
    position: relative;
}

form .Section>.fieldSpec.form__item--privacy-section div label {
    padding-left: 20px;
}

form .Section>.fieldSpec.form__item--privacy-section div label:after {
    content: '*';
    color: #BC2828;
}

form .Section>.fieldSpec.form__item--privacy-description {
    flex: 0 0 100%;
    font-weight: bold;
    margin-top: 16px;
    padding-bottom: 0;
}

form .Section>.fieldSpec.form__item--privacy-description .description {
    font-size: 16px;
}
.fieldSpec fieldset > legend {
    font-weight: bold;
}
.select2-container--default.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple{
    border: solid #000 1px;
    border-radius: 0;
}

@media all and (max-width:1024px) {
    form .Section>.fieldSpec {
        flex: 0 0 100%;
    }
}

/* HEADER */
.header__nav>a {
    right: 15px;
    height: 50px;
    width: 50px;
    top: 9px;
}

.top-menu {
    background-color: var(--blueColor);
    padding-top: 10px;
    padding-bottom: 10px;
    max-height: 56px;
}

.top-menu__wrapper a,
.top-menu__wrapper a span {
    color: #FFFFFF;
}

.top-menu__wrapper a:hover{
    color: var(--orangeColor);
}
.portalLanguages{
    position: relative;
}
/* Media query to target specific browser size */
@media all and (min-width:1440px) {
    .banner--main{
        height: 400px;
    }
}
@media (min-width: 1025px){
    .nav__item--has-subnav:hover .nav__item__link span,
    .nav__item--has-subnav:hover .portalLanguages__link,
    .nav__item--has-subnav:hover > a span {
        color: currentColor;
    }
    .nav__item--has-subnav:hover > a.nav__item__link span  {
        color: var(--orangeColor);
    }
    .int_logo {
        display: none
    }
    .nav__item--has-subnav:hover .int_logo {
        display: inline-block;
    }
    .nav__item--has-subnav:hover .int_logo_white {
        display: none;
    }
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .header {
        background-color: var(--blueColor);
    }

    .header__logo {
        background-image: url(../images/logo__white.png);
        width: 166px;
        height: 36px;
    }

    .header__wrapper {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .top-menu__wrapper {
        padding: 0;
    }

    .top-menu__wrapper a {
        color: var(--blueColor);
    }

    .top-menu__wrapper a span {
        color: currentColor;
    }
   .int_logo_white {
        display: none;
    }
}

/* THEME CONTENT */
.text__title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 36px;
}

.text__description,
.text__description>div {
    font-size: 18px;
    line-height: 24px;
}

@media all and (max-width:1024px) {
    .text__title {
        font-size: 30px;
    }

    .text__description,
    .text__description>div {
        font-size: 16px;
        line-height: 22px;
    }
}

/* BUTTONS */
.saveButton {
    background-color: var(--blueColor);
    border-radius: 0;
    font-size: 18px;
    text-transform: uppercase;
    padding: 9px 48px;
    font-weight: bold;
}

.saveButton:hover {
    background-color: #336F9F;
}

.link,
.form__item--privacy-description a {
    color: var(--linkColor);
    font-weight: bold;
    word-break: break-word;
}

/* FOOTER  */
.footer {
    background-color: #63656A;
}

.footer__wrapper {
    padding-top: 16px;
    padding-bottom: 16px;
}

.footer__rights__copy,
.footer__legals {
    display: block;
    color: #FFFFFF;
    text-align: right;
    font-size: 14px;
}

.footer__legals {
    margin-top: 16px;
}

.footer__legals>a {
    font-size: 14px;
}

.footer__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
}

.footer__social {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 50%;
}

.footer__social a img {
    height: 23px;
}

.footer__social a+a {
    margin-left: 10px;
}

.footer__legals {
    margin-top: 16px;
}

.footer__legals--divider {
    padding: 0 20px;
    color: #FFFFFF;
}

@media all and (max-width:1024px) {
    .footer__content {
        flex-wrap: wrap;
    }

    .footer__wrapper {
        padding-left: 40px;
        padding-right: 40px;
    }

    .footer__content>div {
        flex: 0 0 100%;
        text-align: center;
    }

    .footer__social {
        justify-content: center;
        margin-bottom: 25px;
    }

    .footer__rights__copy,
    .footer__legals {
        text-align: center;
    }

    .footer__legals a {
        padding-left: 10px;
    }
}

@media all and (max-width:525px) {
    .footer__legals a:last-of-type {
        display: block;
        margin-top: 10px
    }
    .footer__legals--divider:last-of-type {
        display: none;
    }
}


/* SUCCESS PAGE */
.success-img {
    max-width: 90px;
    margin: 56px auto 0;
}

.avatureThankYouMessage {
    text-align: center;
    margin-bottom: 100px;
}

.avatureThankYouMessage .title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 40px;
}
.avatureThankYouMessage .sub-title {
    font-size: 26px;
}