@font-face {
    font-family: 'Adele';
    src: url('../font/Adelle-Sans-PIN-Regular.woff2') format('woff2'),
         url('../font/Adelle-Sans-PIN-Regular.woff') format('woff');
         font-weight: 400;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Adele';
    src: url('../font/Adelle-Sans-PIN-Bold.woff2') format('woff2'),
         url('../font/Adelle-Sans-PIN-Bold.woff') format('woff');
         font-weight: 700;
         font-style: normal;
  }
  
/*   
  @font-face {
    font-family: 'Adele';
    src: url('font/Adelle-Sans-PIN-Extrabold.woff2') format('woff2'),
         url('font/Adelle-Sans-PIN-Extrabold.woff') format('woff');
         font-weight: 900;
         font-style: normal;
  } */
  
  @font-face {
    font-family: 'adelle-sans';
    src: url('../font/Adelle-Sans-PIN-Italic.woff2') format('woff2'),
         url('../font/Adelle-Sans-PIN-Italic.woff') format('woff');
         font-weight: 400;
         font-style: italic;
  }
/*   
  @font-face {
    font-family: 'Adele';
    src: url('font/Adelle-Sans-PIN-BoldItalic.woff2') format('woff2'),
         url('font/Adelle-Sans-PIN-BoldItalic.woff') format('woff');
         font-weight: 600;
         font-style: italic;
  } */
  
/*   
  
  @font-face {
    font-family: 'Adele';
    src: url('font/Adelle-Sans-PIN-ExtraboldItalic.woff2') format('woff2'),
         url('font/Adelle-Sans-PIN-ExtraboldItalic.woff') format('woff');
         font-weight: 900;
         font-style: italic;
  } */
  
  
  

:root{
    --pin-blue: rgb(20, 65, 139);
    
    --pico-border-radius: 0;
    --pico-font-family: 'Adele', var(--pico-font-family-sans-serif);
    --pico-font-weight: 400;
    --pico-primary-background: var(--pin-blue);
    --pico-background-color: var(--pin-blue);
    --pico-form-element-spacing-vertical: 12.75px; /*for calculations, real padding is different to fix Adele fonts*/
    --pico-font-size: 100%;

}
:root:not([data-theme="dark"]), [data-theme="light"] {
    --pico-form-element-background-color: #fff;
    --pin-black: #14171B;  
    --pin-visited: #595858;
    --pin-error: #883935;
    --pico-color: var(--pin-black);
    --pico-form-element-color: var(var(--pin-black));    
    --pico-primary: var(--pin-blue);
    --pico-primary-underline: var(--pin-blue);
    --pico-primary-underline-focus: var(--pico-color);
    --pico-primary-focus: var(--pin-blue);
    --pico-primary-hover-background: var(--pin-blue);
    --pico-secondary:#f5f2f1;

    --pico-form-element-invalid-border-color: var(--pin-error);
    --pico-del-color: var(--pin-error);

}
:where(a:not([role="button"])), [role="link"] {
    --pico-color: var(--pin-black);
}


/*atomic*/
.text-center{
    text-align: center;
}
.flex-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.bg-primary{
    background-color: var(--pin-blue);
    color: #fff;
}
.bg-secondary{
    background-color: #f5f2f1;
    color: var(--pico-color);
}
select:required:invalid{
    color:var(--pico-form-element-placeholder-color);
}
[type="file"],[type="file"]:is([aria-invalid]){
    padding-inline-start: 0!important;
    margin-bottom: 0!important;
}

textarea{
    display: inline-block; /*fix for margin-bottom not taken into account*/
}


/*general*/


[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
    --pico-primary-background: var(--pin-blue);
    --pico-border-color: var(--pin-blue);
}


input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
    padding:  14px var(--pico-form-element-spacing-horizontal) 12px;
    height: auto;
}
:where(select, textarea):not([readonly]):is(:active, :focus), input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus) {
    --pico-border-color: var(--pin-blue);
  }
:where(select, textarea):not([readonly]):focus, input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus {
--pico-box-shadow: none;
}

[role="button"], [type="button"], [type="file"]::file-selector-button, [type="reset"], [type="submit"], button {
    --pico-border-color: var(--pin-blue);
    --pico-color: #fff;
    --pico-background-color: var(--pin-blue);
    border-width:2px;
    font-weight: 700;
    box-shadow: none !important;
}
[type="file"]:focus::file-selector-button{
    --pico-background-color: var(--pin-blue)!important;
    border: none!important;
    height: 100%;
}
[type="file"]:focus{
    padding: 4px!important;    
    border: var(--pin-blue) 1px solid!important;
    box-shadow: none !important;
    margin-bottom: 4px!important;
}
[type="file"][aria-invalid="true"]:focus{
    border: var(--pico-del-color) 1px solid!important;
}
[role="button"], [type="button"], [type="reset"], [type="submit"], button {

    padding:  14px var(--pico-form-element-spacing-horizontal) 12px;
}
label{
    font-weight: 500;
}
.optional-field-marker:before{
    content: ' ';
    display: inline;
}

a[role="button"], button, button[type="submit"]{
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 16px;
}
a[role="button"]:after, button:after, button[type="submit"]:after {
    content:"";
    width:8.5px;
    height:8.5px;
    display: inline-block;
    transform: rotate(270deg);
    margin-left: 15px;
    margin-top:-1px;
    content: '';
    right: 3rem;
    border-right: 2px solid;
    border-top: 2px solid;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


[role="button"]:is(:hover, :active, :focus), [role="button"]:is([aria-current]:not([aria-current="false"])), [type="button"]:is(:hover, :active, :focus), [type="button"]:is([aria-current]:not([aria-current="false"])), [type="file"]::file-selector-button:is(:hover, :active, :focus), [type="file"]::file-selector-button:is([aria-current]:not([aria-current=false])), [type="reset"]:is(:hover, :active, :focus), [type="reset"]:is([aria-current]:not([aria-current="false"])), [type="submit"]:is(:hover, :focus), [type="submit"]:is([aria-current]:not([aria-current="false"])), button:is(:hover, :active, :focus), button:is([aria-current]:not([aria-current="false"])) {    
    border-color: var(--pin-blue)!important;
    box-shadow: none;
    --pico-background-color: #fff;
    --pico-color: var(--pin-blue);
}
[type="submit"]:is(:active),[type="submit"]:is([aria-busy="true"]){
    --pico-color: #fff!important;
    --pico-background-color: var(--pin-blue)!important;
}
[type="submit"]:is([aria-busy="true"])::after{
    display: none!important;
}
.wrapper{
    width: 430px;
    margin: 0 auto;
    padding: 0 12px;
    max-width: calc(100vw - 24px);
    box-sizing: content-box;
}
main .wrapper{
    padding-top: 12px;
    padding-bottom: 80px;
}

select,
select option {
  color: var(--pin-black);
}

select:invalid,
select option[value=""] {
  color: var(--pico-form-element-placeholder-color);
}

small.validation-message:empty{
    display: none;
}
#potential-error-details{
    margin-top: 100px;
}
#potential-error-details:empty{
    display: none;
}




/*specific*/


#pageheader{
    height: 70px;
    display: flex;
    align-items: center;
}
#pageheader .leftside{
    justify-content: flex-start;
    gap:20px;
}
#pageheader .separator{
    width:2px;
    height: 45px;
    display: block;
    background-color: #fff;
    
}
#header-title{
    color:#fff;
    /* font-weight: 700;
    font-size: 26px; */
    font-weight: 700;
    font-size: 14px;
    margin: 0;
    display: flex;
    align-items: center;
}
#lang-nav{
    max-width: 40%;
    justify-self: flex-end;
}
#lang-nav details{
    background-color: transparent;
    border: none;
}
#lang-nav details summary{
    color:inherit;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 0 10px 10px;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
}
#lang-nav details summary svg{
    margin-left: 20px;
}
@media only screen and (max-width:450px){
    #language-name{
        display: none;
    }
}

main{
    
    min-height: calc(100vh - 70px - 125px);
}

h1{
    font-weight: 700;
    font-size: 30px;
    line-height: 35px;
    --pico-color: #14171B;
    margin: 38px 0 20px;
}

.phone-cont{
    display: flex;
    position: relative;
}
.phone-cont:before{
    position: absolute;
    top:15px;
    left:16px;
    content: "+";
    display: inline;
}
.phone-cont select,
.phone-cont select[aria-invalid]{
    padding-left: 26px!important;
    padding-inline-start: 26px!important;
    width:130px;
    border-right: 0;
}



.helptext{
    font-weight: 400;
    /* font-style: italic; */
    margin-bottom: 20px;
    color:var(--pico-form-element-placeholder-color);
    /* font-size: 13px; */
}



[type="file"] + small + small{
    margin-top: 0!important;
    margin-bottom: var(--pico-spacing)!important;
    display: block;
}

[type="file"] + small{
    margin-top: 0!important;
    margin-bottom: 0!important;
    display: block;
}
:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
    --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-border-color)!important;
  }

label.checkbox-label{
    font-weight: 400;
    position: relative;
    margin-bottom: 20px;
}
label.checkbox-label a{
    font-weight: 700;
}

input[type="checkbox"]{
    flex:none;
}

input[type="checkbox"]:is([aria-invalid="true"]){
    margin-bottom: 22px;
}

input[type="checkbox"]:is([aria-invalid="true"]) + small{
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
}

input[type="checkbox"]:is([aria-invalid="true"]) + small + .acceptance-text-cont{
    display: inline-block;
    margin-bottom: 22px;
}
button[type="submit"]{
    margin-top: 40px;
}

footer{
    background-color: var(--pico-secondary);
}
footer .wrapper{
    padding-top: 18px;
    padding-bottom: 30px;
}
footer nav ul{
    width: 100%;
    display: flex;
    justify-content: center;
    gap:16px;
}
footer nav li a:link{
    text-decoration: underline;
    color:var(--pin-black);
    font-weight: 700;
}

footer nav li a:visited{
    text-decoration: underline;
    /* color:var(--pin-visited); */
    font-weight: 700;
}

.copyright{
    font-size: 14px;
}