:root {
    --color-home-title: #00283e;
    --border-color-home-title: #00283e;

    --bkgcolor-btn-search: #e40425;
    --bkgcolor-btn-search-hover: #00283e;
    --color-btn-search: #fff;

    --bkgcolor-btn-back: #e40425;
    --bkgcolor-btn-back-hover: #00283e;
    --color-btn-back: #fff;

    --bkgcolor-modal-title: #ebebeb;

    --border-color-btn-select: #00283e;
    --bkgcolor-color-btn-checkbox-radio: #00283e;
    --color-btn-checkbox-radio: #fff;

    /*--border-color-btn-checkbox-radio-selected: green;*/
    /*--bkgcolor-color-btn-checkbox-radio-selected: #ebf2e4;*/
    --border-color-btn-checkbox-radio-selected: #00283e;
    --bkgcolor-color-btn-checkbox-radio-selected: #00283e;
    --color-btn-checkbox-radio-selected: #fff;

}

body {
    @font-face {
        font-family: DINNextLTPro;
        src: url("fonts/DINNextLTPro-Regular.otf") format("opentype"),
        url('fonts/DINNextLTPro-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

/*    @font-face {
        font-family: 'FontAwesome';
        src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
        src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
        url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
        url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
        url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
        url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
    font-weight: normal;
        font-style: normal;
    }*/

    /*body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}*/
    html,
    body,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        /*font-family: 'Nunito', 'Open Sans', sans-serif !important;*/
        font-family: 'DINNextLTPro' !important;
    }
    font-family: 'DINNextLTPro' !important;

}

.home-title {
    color: var(--color-home-title);
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.home_title_style {
    margin: 1vw 10px 0 10px;
    border: 1px solid var(--border-color-home-title);
    box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
    border-radius: 5px;
}

.bg-modal-title {
    background: var(--bkgcolor-modal-title);
}

* {
    box-sizing: border-box;
  }

  /* Style the search field */
.searchBox input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 0px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
    border-radius: 10px 0px 0px 10px;
  }
  
  /* Style the submit button */
.searchBox button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #009845;
    color: white;
    font-size: 17px;
    border: 0px solid grey;
    border-left: none; /* Prevent double borders */
    cursor: pointer;
    border-radius: 0px 10px 10px 0px;
  }
  
.searchBox button:hover {
    background: darkgreen;
  }

  /* Clear floats */
.searchBox::after {
    content: "";
    clear: both;
    display: table;
  }

  .pdf-header {
    height:120px;
  }

  .pdf-header-small {
    height:auto;
  }

  button {
    cursor: pointer;
  }

  a {
    cursor: pointer;
  }

  .clickable {
    cursor: pointer;
  }



  /* ENRICO */

.btn-go-index {
    width: 50%;
    padding: 10px;
    background: var(--bkgcolor-btn-back);
    color: var(--color-btn-back);
    font-size: 25px;
    border: 0px solid grey;
    cursor: pointer;
    border-radius: 12px;
    /*margin-top: 20px;*/
}

/* Style the search field */
.searchBox1 {
    margin-top: 60px;
}

.searchBox2 {
    margin-top: 30px;
}
/*.searchBox2 input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    width: 80%;
    background: #f1f1f1;
    border-radius: 10px ;
}*/

/* Style the submit button */
.searchBox2 button {
    width: 80%;
    padding: 32px;
    background: var(--bkgcolor-btn-search);
    color: var(--color-btn-search);
    font-size: 40px;
    border: 0px solid grey;
    cursor: pointer;
    border-radius: 12px;
    margin-top: 35px;
    /*margin-top: 20px;*/
}

.searchBox2 button:hover {
    background: var(--bkgcolor-btn-search-hover);
}

/* Clear floats */
.searchBox2::after {
    content: "";
    clear: both;
    display: table;
}


.btn-topic {
    padding: 10px 20px 10px 20px;
    border: 1px solid grey;
    width: 80%;
    background: #76a8c8;
    font-size: 30px;
    cursor: pointer;
    border-radius: 12px;
    color: white;
    text-decoration: none;
}




.form-control-select {
    color: #878787;
    font-size: 22px;
    font-style: italic;
    text-align-last: center;
    text-align: center;
    text-transform: uppercase;
}

.form-control {
    border-radius: 10px;
    /*border: 1px solid #d2d6de;*/
    border: 2px solid #76a8c8;
    color: #878787;
    font-size: 22px;
    padding: 8px;
    width: 100%;
}

.footer-fixed {
    position: absolute;
    bottom: 4%;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}

.bkg_footer {
    background-color: white;
}

.myrow {
    display: flex;

}

/* Create two equal columns that sits next to each other */
.my2column {
    flex: 50%;
    padding: 10px;
    /*height: 180px;*/
    display: flex!important;
    justify-content: center!important;
    margin-top: 15px;
}


.div-radio-check-input {
    height: 140px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--bkgcolor-color-btn-checkbox-radio);
    color: var(--color-btn-checkbox-radio);
    border-radius: 12px;
    padding: 0;
/*    margin-bottom: 15px;*/
    border: 2px solid var(--border-color-btn-select);
    accent-color: var(--color-btn-checkbox-radio);
    padding-left: 12px;
}
.div-radio-check-input:hover {
    border: 2px solid var(--border-color-btn-select);;
    transform: scale(1.10);
}

.div-radio-check-input:has(input[type="radio"]:checked){
    border: 3px solid var(--border-color-btn-checkbox-radio-selected);
    transform: scale(1.1);
    font-size: 19px;
    color: var(--color-btn-checkbox-radio-selected);
    background-color: var(--bkgcolor-color-btn-checkbox-radio-selected);
}
.div-radio-check-input:has(input[type="checkbox"]:checked){
    border: 3px solid var(--border-color-btn-checkbox-radio-selected);
    transform: scale(1.1);
    font-size: 19px;
    color: var(--color-btn-checkbox-radio-selected);
    background-color: var(--bkgcolor-color-btn-checkbox-radio-selected);
}

.input-radio-check {
    /*flex: 0 0 50px;*/
    border: 1px solid #76a8c8;
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer;
}

.label-radio-check-input  {
    margin-left: 40px;
    color: var(--color-btn-checkbox-radio);
    font-size: 75px;
    line-height: 30px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.50px;
    text-align: left;
    padding: 20px 20px 20px 8px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 0rem;
}