/***
Import fonts
***/

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

html, body {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
}

.pagina {
    width: 100%;
    max-width: 1024px;
}

image {
    border: none;
}

h1, h2, h3, h4, h5 {
    margin: 0px;
    padding: 0px;
    padding-bottom: 4px;
}

a:link {
    text-decoration: none;
    color: #6ccdb4;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    text-decoration: none;
    color: #6ccdb4;
}

a.LinkHome:link {
    text-decoration: none;
    transition: color 0.2s linear 0s;
    -webkit-transition: color 0.2s linear 0s;
    -moz-transition: color 0.2s linear 0s;
    -o-transition: color 0.2s linear 0s;
}

a.LinkHome:hover {
    color: #75ebcd;
}

a.LinkHome:visited {
    text-decoration: none;
}

a.LinkBarra:link {
    font-size: 14px;
    text-shadow: 0px 1px 1px #ccc;
    color: #333 !important;
    transition: color 0.2s linear 0s;
    -webkit-transition: color 0.2s linear 0s;
    -moz-transition: color 0.2s linear 0s;
    -o-transition: color 0.2s linear 0s;
}

a.LinkBarra:hover {
    text-decoration: none;
    color: #6ccdb4 !important;
}

a.LinkBarra:visited {
    color: #333;
}

.LinkMenu {
    transition: color 0.2s linear;
    padding: 10px 20px;
    cursor: pointer;
}

    .LinkMenu:hover {
        color: #81f1d3;
    }

div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.DivFisso {
    display: inline-block;
    vertical-align: top;
    margin: 0px;
}

hr {
    margin: 5px 0;
    border: 0;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #FEFEFE;
}

    hr.tratteggiato {
        border-top: 1px dotted #a5a5a5;
        border-bottom: 0px;
    }

.imghome {
    width: 180px;
    border-radius: 90px;
    box-shadow: 1px 0px 6px #000;
    cursor: pointer;
}

    .imghome:hover {
        width: 180px;
        border-radius: 90px;
        box-shadow: 1px 0px 10px #000;
    }

.InputText {
    background: #fdfdfd;
    padding: 10px 15px;
    font-size: 14px;
    width: 100%;
    min-width: 200px;
    margin: 5px 0px;
    border: #ccc 1px solid;
    border-radius: 2px;
    box-shadow: 0px 0px 3px rgb(238, 238, 238) inset;
    transition: border 0.2s linear 0s;
    -webkit-transition: border 0.2s linear 0s;
    -moz-transition: border 0.2s linear 0s;
    -o-transition: border 0.2s linear 0s;
}

    .InputText:hover {
        border: #aaa 1px solid;
    }

input {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 2px;
}

div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

table {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

textarea {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: auto;
}

/*Bottone grigio*/
.btn {
    -moz-box-sizing: border-box;
    background-color: #6ccdb4;
    border: medium none;
    border-radius: 3px;
    color: #FFF !important;
    cursor: pointer;
    display: inline-block;
    font-family: "Rajdhani",sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0px;
    padding: 5px 20px;
    text-align: center;
    font-style: inherit;
    box-sizing: border-box;
}

    .btn:hover, .btn:focus, .btn:active, .btn.active, .btn[disabled], .btn.disabled {
        background-color: #79ddc3;
        text-decoration: none;
    }

    .btn.green {
        font-weight: bold;
        font-size: 18px;
        /*box-shadow: 0px 4px 0px #6F9A37;*/
        background-color: #82B440;
        border: 1px solid #82B440;
    }

        .btn.green:hover {
            background-color: #7AA93C;
            text-decoration: none;
            border: 1px solid #7AA93C;
        }

    .btn.red {
        font-weight: bold;
        font-size: 18px;
        /*box-shadow: 0px 4px 0px #d42e2e;*/
        background-color: #f52525;
        border: 1px solid #f52525;
    }

        .btn.red:hover {
            background-color: #e02424;
            text-decoration: none;
            border: 1px solid #d42e2e;
        }

    .btn.blu {
        font-weight: bold;
        font-size: 18px;
        /*box-shadow: 0px 4px 0px #377c9a;*/
        background-color: #4086b4;
        border: 1px solid #4086b4;
    }

        .btn.blu:hover {
            background-color: #3c7ea9;
            text-decoration: none;
            border: 1px solid #3c7ea9;
        }

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.fright {
    float: right;
}

.fleft {
    float: left;
}

.center {
    text-align: center;
}

.sep {
    /*border-left: 1px solid #23535f;
    border-right: 1px solid #8bb7c1;
    background: none repeat scroll 0% 0% transparent;*/
    border-left: 1px solid #ddf6fc;
    border-right: 0px solid #8bb7c1;
    background: none repeat scroll 0% 0% transparent;
}

.VisibileNoSi {
    display: none;
}

.box {
    margin-top: 30px;
    margin-left: 20px;
    float: left;
    position: fixed;
    width: 50px;
    height: 80px;
    transform: translate(-50%, -50%);
}

.btnbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    cursor: pointer;
}

.lineBarra {
    display: block;
    width: 100%;
    /*box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3);*/
    border-radius: 2px;
    height: 4px;
    background: #000;
    transition: all .3s;
    position: relative;
}

    .lineBarra + .lineBarra {
        margin-top: 5px;
    }

.active .lineBarra:nth-child(1) {
    animation: ease .7s top forwards;
}

.not-active .lineBarra:nth-child(1) {
    animation: ease .7s top-2 forwards;
}

.active .lineBarra:nth-child(2) {
    animation: ease .7s scaled forwards;
}

.not-active .lineBarra:nth-child(2) {
    animation: ease .7s scaled-2 forwards;
}

.active .lineBarra:nth-child(3) {
    animation: ease .7s bottom forwards;
}

.not-active .lineBarra:nth-child(3) {
    animation: ease .7s bottom-2 forwards;
}

/* Navigation Links */
.nav-links {
    display: flex;
    justify-content: center; /* Align links to the left */
    margin-top: 20px;
    overflow-x: auto; /* Makes the nav bar horizontally scrollable */
    white-space: nowrap; /* Ensures links don't wrap to the next line */
    box-sizing: border-box;
    padding-left: 10px; /* Add space to the left to avoid clipping the first link */
    margin-left: -10px; /* Adjust the container position slightly to compensate */
    position: relative; /* Allows us to add the scroll indicator */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #f4f4f4; /* Firefox */
}


    .nav-links a {
        font-size: 16px;
        margin: 0 15px;
        color: #333;
        text-decoration: none;
        padding: 5px 10px;
        box-sizing: border-box;
        transition: color 0.3s ease; /* Smooth transition for hover effect */
    }

        .nav-links a.active {
            font-weight: bold;
            color: #6ccdb4; /* Active link color */
            box-sizing: border-box;
        }

/* Panel Style */
.panel {
    padding: 20px;
    margin-top: 20px;
    background-color: #f4f4f4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.divctl {
    display: none;
}

/* Make panels visible */
.show {
    display: block;
}


/* Nasconde i radiobuttons originali */
input[type="radio"] {
    display: none;
}

/* Stile per il contenitore delle opzioni */
.radio-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    /* Stile per ogni opzione (simile a un div) */
    .radio-container div {
        background-color: #fff;
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer !important;
        transition: background-color 0.3s;
        width: 100%;
        max-width: 150px;
    }

        /* Cambia il colore quando selezionato */
        .radio-container div.selected {
            background-color: #6ccdb4;
            color: white;
        }

        /* Cambia il colore al passaggio del mouse */
        .radio-container div:hover {
            background-color: #6ccdb4;
        }

/* Hide default checkbox */
input[type="checkbox"] {
    display: none; /* Hide the default checkbox */
}

    /* Style for the custom checkbox */
    input[type="checkbox"] + label {
        position: relative;
        padding-left: 30px; /* Space for the custom checkbox */
        cursor: pointer;
        font-size: 18px;
        color: #333;
        display: inline-block;
        line-height: 30px;
        font-weight: bold;
    }

        /* Custom checkbox square */
        input[type="checkbox"] + label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            width: 20px;
            height: 20px;
            border: 2px solid #6ccdb4;
            background-color: white;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

    /* Style when checkbox is checked */
    input[type="checkbox"]:checked + label::before {
        background-color: #6ccdb4;
        border-color: #6ccdb4;
    }

    /* Checkmark for the checked checkbox */
    input[type="checkbox"]:checked + label::after {
        content: '\2713'; /* Unicode checkmark */
        position: absolute;
        left: 6px;
        top: 2px;
        font-size: 16px;
        color: white;
        font-weight: bold;
    }

    /* Hover effect for custom checkbox */
    input[type="checkbox"] + label:hover::before {
        border-color: #6ccdb4;
    }

    /* Focus style for accessibility */
    input[type="checkbox"]:focus + label::before {
        box-shadow: 0 0 0 2px #6ccdb4;
    }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Make the panels take up full width on mobile */
    .panel {
        width: 100%;
        max-width: 100%; /* Ensures it never exceeds the screen size */
        padding: 15px;
    }

    .nav-links {
        justify-content: flex-start; /* Align links to the left */
    }

        /* Adjust font size for mobile screens */
        .nav-links a {
            font-size: 14px;
            padding: 5px 8px;
        }
}

/* Large screens */
@media (min-width: 769px) {
    .panel {
        margin-left: auto;
        margin-right: auto;
    }
}

.Blocco {
    display: inline-block;
}

.BloccoCell {
    display: table-cell;
}

.BloccoCellCenter {
    display: table-cell;
}

@media only screen and (max-width: 740px) {
    /* Stile per ogni opzione (simile a un div) */
    .radio-container div {
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        width: 100%;
        max-width: 100%;
        white-space: nowrap !important;
    }

    #LogoMaster {
        height: 35px !important;
        padding-top: 15px;
    }

    #DivTopMaster {
        height: 90px !important;
    }

    #DivTopMaster2 {
        top: -90px !important;
    }

    #Contenuto {
        padding-top: 90px !important;
    }

    .divCenter {
        text-align: center !important;
    }

    .DivFisso {
        width: 100% !important;
        max-width: 100%;
        margin: auto;
        text-align: center;
    }

    .Blocco {
        width: 100% !important;
        border: none !important;
        margin-right: 0px !important;
        float: none !important;
    }

    .BloccoCell {
        width: 100% !important;
        border: none !important;
        float: none !important;
        display: inline-block !important;
    }

    .BloccoCellCenter {
        width: 100% !important;
        border: none !important;
        float: none !important;
        display: inline-block !important;
        text-align: center;
    }

    .VisibileSiNo {
        display: none;
    }

    .VisibileNoSi {
        display: block;
    }

    .right {
        text-align: center;
    }

    .left {
        text-align: center;
    }

    .fright {
        float: none;
    }

    .fleft {
        float: none;
    }
}