@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html{
     background:#eee;
}
 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{
     -webkit-box-shadow: 0 0 0 30px #F8F8F8 inset !important;
}
 body {
     background: #eee;
     font-family: Roboto, sans-serif;
     font-size: 15px;
     font-weight: 300;
     margin: 0px auto;
     max-width: 620px;
     box-sizing:border-box;
     line-height: 1.3;
}
/*.selectItem select{cursor:pointer;opacity:0;width:100%;height:100%;min-height:30px;} */
.selectItem{position:relative;width:31%;margin-right:1.5%;display:inline-block;padding:0;}
.selectItem:last-child{margin-right:0;}
 * {
     margin:0;
     padding:0;
     box-sizing: border-box;
}
 .section > .columns {
     padding: 20px;
     width: 100%;
     background:#fff;
}
 .grey{
     background-color:#eee;
}
 h1{
     font-weight:normal;
     padding:0 0 10px;
     font-family: Arial;
     font-size: 24px;
     color: #000000;
     line-height: 1.5;
}
 h1 b{
     font-family:Arial Black;
     font-weight:900;
}
 h2 {
      font-family: Arial, Hevetica, sans-serif;
     font-size: 16px;
     color: #000000;
     line-height: 1.5;
     font-weight: 600;
     font-style: normal;
}
 h3 {
     font-family: Arial, Hevetica, sans-serif;
     font-size: 15px;
     color: #000000;
     line-height: 120%;
     font-weight: 300;
     font-style: normal;
}
 a[href]:not(.buttonstyles) {
     color: #0000EE;
     text-decoration: none;
}
 button.buttonblock {
     color: #FFFFFF;
     border-radius: 3px;
     background-color: #5D5D5D;
}
 td.buttonblock {
     color: #FFFFFF;
     border-radius: 3px;
     background-color: #5D5D5D;
}
 a.buttonstyles {
     font-family: Roboto;
     font-size: 15px;
     color: #FFFFFF;
     padding: 10px;
}
 #borders{
     height: 50px;
     font-size: 15px;
     font-weight: 500;
     line-height: 18px;
     padding: 16px;
     text-transform: uppercase;
     border: 1px solid #000;
     background: #000;
     color: #ffffff;
     width: 100%;
     cursor: pointer;
}
 div.read-only-row{
     font-size: 14px;
     font-weight: 400;
     line-height: 1.2;
     text-align: left;
}
 div.read-only-row div:first-child{
     width: 100px;
}
 div.read-only-row div:last-child{
     padding-left:10px;
}
 .layout {
     width:100%;
     background:#fff;
     margin: 0 auto;
}
 .underline{
     border-bottom: 1px solid #E5E5E5;
}
 .logo{
     display: block;
     padding: 0px;
     text-align: left;
     width:80%;
     margin :0 auto;
     padding:20px 0;
     max-width:300px;
}
 div.form-holder{
     border-top:1px solid #eee;
     background:#fff;
     padding:0;
     font-size: 18px;
     font-weight: 300;
     line-height: 1.3;
     text-align: left;
}
 .intro_description{
     display: block;
     font-weight: 400;
     font-size: 16px;
     line-height: 1.6;
     text-align: left;
     max-width:450px;
}
 .intro_form_succes{
     color: #008500;
     padding: 10px 20px 
     font-family: Arial, Hevetica, sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 18px;
     text-align: left;
}
 .intro_form_false {
     color: #c14a59;
     padding: 0 15px 15px;
     font-family: Roboto, sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 18px;
     text-align: left;
}
 .read-only-row {
     align-items: flex-end;
     display: flex;
     padding-top: 14px;
}
 .form-top input.textblok, .form-top textarea {
     min-height: 45px;
     margin-bottom: 15px;
     padding:0 ;
    font-size:14px;
     border:0;
     border-bottom:1px solid #ccc;
}



 .form-top .form-row:has(input.error) label.label{border-bottom:1px #d00 dashed;font-weight:bold;color:#d00}
 .form-top .form-row {
     position: relative;
     padding-bottom: 0;
}
 .form-top label:not(.defaultLabel) {
     position: absolute;
     top: 15px;
     left: 0;
     transition: 0.3s ease;
     line-height: 1;
     color: #666;
     text-transform:uppercase;
    letter-spacing:1px;
}
 .form-top input.textblok:not(:placeholder-shown) ~ label, .form-top input.textblok:-webkit-autofill ~ label, .form-top input.textblok:focus ~ label, .form-top textarea:not(:placeholder-shown) ~ label, .form-top textarea:-webkit-autofill ~ label, .form-top textarea:focus ~ label{
     top: -5px;
     padding: 2px 0;
     background-color: inherit;
     display: inline-block;
     font-size: 9px;
}
 .read-only-button{
    position: absolute;
     top: -5px;
     right: -5px;
    z-index:9;
}
 .read-only-button button{
      float: right;
    width: 120px;
     border: 0;
     background: transparent;
     padding: 0;
    line-height:0.9;
}
 .read-only-button button span{
    display:inline-block;
    border-bottom:1px solid #555;
}
 .read-only-button button svg{
    position:relative;
    top:16px;
    width:35px
}
 form{
    text-align:left;
     position: relative;
}
 .read-only-block, .form-top{
     background: #F8F8F8;
     padding: 10px 20px 30px;
}
 .read-only-wrap{
     display: flex;
     justify-content: space-between;
}
 a[href^="mailto:"] {
     font-weight: 400;
     line-height: 16px;
     color: #999999 !important;
     text-decoration: underline !important;
}
 .accordion-text.validem {
margin-top:-10px;
     padding-bottom:20px;
     font-size: 13px;
     padding-left: 0;
}
 .form-top {
     padding: 10px 20px;
     display: none;
}
 .form-top h2{
     margin-bottom:10px;
}
 .form-bottom {
     padding: 30px 15px 15px;
}
 .form-row {
     padding-bottom: 8px;
}
 .form-row.form-indent {
     position: relative;
     min-height: 20px;
}
 .form-block-accordion {
     border-bottom: 1px solid #E5E5E5;
     padding: 18px 0px 9px;
     position: relative;
     margin: 0px 15px;
}
 .form-block-accordion .label {
     font-size: 15px;
}
 .form-row.form-accordion {
     position: relative;
     min-height: 20px;
     padding-left: 34px;
}
 .form-row.form-accordion::before {
     content: "";
     display: inline-block;
     height: 7px;
     left: 10px;
     position: absolute;
     top: 5px;
     width: 7px;
     border-style: solid;
     border-color: #000000;
     border-image: initial;
     border-width: 0px 1px 1px 0px;
     transform: rotate(45deg);
}
 .accordion-body {
     height: 0px;
     transition: all 0.3s ease-in-out 0s;
     overflow: hidden;
}
 input.accordion:checked + .form-row.form-accordion::before {
     top: 9px;
     transform: rotate(225deg);
}
 input.accordion:checked ~ .accordion-body {
     height: auto;
}
 .newsletter-accordion .form-row.form-accordion {
     padding-left: 0px;
     padding-bottom: 0px;
}
 .newsletter-accordion .label {
     padding-left: 34px;
     padding-bottom: 11px;
}
 .accordion-text {
     font-size: 14px;
     font-weight: 400;
     line-height: 16px;
     color: #999999;
     padding-bottom: 10px;
     padding-right: 50px;
     padding-left: 34px;
}
 .error-message {
     color: #c14a59;
}
 .label {
      font-family: Arial, Hevetica, sans-serif;
     font-size: 13px;
     font-weight: 400;
     line-height: 20px;
}
 input.textblok, textarea {
     border: 1px solid #ccc;
     padding: 7px;
     text-indent: 0px;
     background:transparent;
     width: 100%;
     outline: currentcolor none medium;
     appearance: none;
     font-family: Arial, Hevetica, sans-serif;
     font-size: 13px;
     font-weight: 400;
     background: none 0% 0% repeat scroll transparent;
}
 textarea {
     padding: 12px 10px;
}
 .form-textarea {
     display: none;
     padding-top: 10px;
}

 .birthday-addition {
     display: none;
}
#unsub_reason .form-row.form-indent{padding:5px 32px 0}
 .newsletter-addition {
     margin: 6px 0 0;
     border-top: 1px solid #E5E5E5;
     padding-top: 14px;
}
 input[type="radio"] {
     opacity: 0;
     width: 100%;
     height: 20px;
     margin: 0px;
     position: absolute;
     top: 6px;
     z-index: 10;
}
 input[type="radio"] + label:not(.defaultLabel) {
     position: relative;
     cursor: pointer;
     padding-left: 20px;
     font-size: 13px;
     line-height: 16px;
}
 input[type="radio"] + label:not(.defaultLabel)::before {
     border-radius: 50%;
     content: "";
     background: none 0% 0% repeat scroll #E5E5E5;
     display: inline-block;
     height: 14px;
     vertical-align: middle;
     width: 14px;
     position: absolute;
     top: 1px;
     left: 0px;
}
 input[type="radio"]:checked + label:not(.defaultLabel)::before {
     background: none 0% 0% repeat scroll #000000;
}
 input[type="radio"]:checked + label::after {
     content: "";
     display: inline-block;
     height: 5px;
     left: 6px;
     position: absolute;
     top: 4px;
     width: 2px;
     border-style: solid;
     border-color: #FFFFFF;
     border-image: initial;
     border-width: 0px 1px 1px 0px;
     transform: rotate(45deg);
}
 input[type="radio"].reason-other:checked ~ .form-textarea {
     display: block;
}
 input[type="checkbox"] {
     width: 36px;
     height: 20px;
     position: absolute;
     right: 0px;
     top: 0px;
     margin: 3px;
     padding: 0px;
     opacity: 0;
     z-index: 0;
}
 input[type="checkbox"] + label:not(.defaultLabel) {
     display: block;
     padding: 0px 44px 0px 0px;
     cursor: pointer;
     min-height: 24px;
}
 input[type="checkbox"] + label:not(.defaultLabel)::before {
     content: "";
     position: absolute;
     top: 0px;
     right: 0px;
     width: 45px;
     height: 24px;
     background-color: #E9E9EB;
     border-radius: 24px;
     z-index: 1;
     transition: background-color 0.3s ease-in-out 0s;
}
 input[type="checkbox"] + label:not(.defaultLabel)::after {
     content: "";
     position: absolute;
     top: 2px;
     right: 22px;
     width: 20px;
     height: 20px;
     background-color: #FFFFFF;
     border-radius: 14px;
     z-index: 2;
     transition: left 0.3s ease-in-out 0s, background-color 0.3s ease-in-out 0s;
     box-shadow: rgba(0, 0, 0, 0.1) 2px 3px 5px;
}
 input[type="checkbox"]:checked + label:not(.defaultLabel)::before {
     background-color: #000;
}
 input.js-unsubscribe-all[type="checkbox"]:checked + label:not(.defaultLabel)::before {
     background-color: #000000;
}
 input[type="checkbox"]:checked + label:not(.defaultLabel)::after {
     right: 2px;
}
 input[type="checkbox"].accordion {
     cursor: pointer;
     right: auto;
     left: 0px;
     top: 14px;
     width: calc(100% - 50px);
     height: 30px;
     margin: 0px;
     z-index: 11;
}
 input[type="checkbox"].read-only-checkbox {
     display:inline;
     cursor: pointer;
     right: 7px;
     top: 2px;
     margin: 0px;
     height: 36px;
     width:110px;
     z-index: 15;
}
 input[type="checkbox"].read-only-checkbox:checked + .read-only-block {
     display: none;
}
 input[type="checkbox"].read-only-checkbox:checked ~ .form-top {
     display: block;
}
 #unsub_reason{
padding-bottom:20px;
     display:none;
}
 @media only screen and (max-width: 480px) {
     .grey{
         background:#fff;
    }
     .mobile-hidden {
         display: none !important;
    }
}