/* Parent container for position relative */
body {
    position: relative;
    margin: 0; /* Removes default margins */
    padding: 0;
}

/* Base visual indicator style, absolute position */
.env-indicator {
    position: fixed; /* or absolute, depending on your needs */
    top: 0;
    left: 0;
    height: 130px; /* Full viewport height */
    width: 130px; /* Adjust width as needed */
    z-index: 9999; /* Ensures it's on top of everything */
    pointer-events: none; /* Allows clicks to pass through, remove if you need it clickable */

}

.env-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.5); !* Semi-transparent black, adjust as needed *!*/
    /*background-color: rgba(0, 128, 0, 0.5); !* Semi-transparent green *!*/
    background-color: rgba(236, 61, 61, 0.5); /* Semi-transparent green */
    clip-path: polygon(
            0% 100%, /* Left point (tip of triangle) */ 100% 0%, /* Top right point */ 100% 100% /* Bottom right point */
    );
    transform: rotate(-180deg);
}

/* Green bar for the development environment */
.env-indicator.development {
    /*background-color: rgba(0, 128, 0, 0.5); !* Semi-transparent green *!*/
}

/* You can add more styles for other environments if needed */
.env-indicator.testing {
    background-color: rgba(255, 165, 0, 0.5); /* Semi-transparent orange */
}

.env-indicator.production {
    display: none; /* No indicator for production */
}


.datepicker {
    /*width: 300px !important; !* Adjust the width *!*/
    width: 100%;
}

.datepicker table tr td,
.datepicker table tr th {
    height: 40px; /* Set height for calendar cells */
    /*width: 100%;*/
}

.datepicker table tr td, .datepicker table tr th {
    color: #333; /* Text color */
    background-color: #f9f9f9; /* Default background */
    /*width: 100%;*/
}

.datepicker table tr td.active {
    background-color: #4CAF50 !important; /* Selected (active) date */
    color: white !important; /* Active text */
}

.datepicker table tr td.today {
    background-color: #b8daf0 !important; /* Highlight today's date */
}

/* For hovered dates */
.datepicker table tr td:hover {
    background-color: #ddd !important;
}

.datepicker-days .table-condensed {
    width: 100%;
}

/*consultatii nutritie*/
.fixed-size {
    width: 100%; /* Ensures full width within the container */
    height: 200px; /* Fixed height */
    object-fit: cover; /* Ensures the image fits properly while maintaining aspect ratio */
    object-position: center; /* Centers the cropped area */
    border-radius: 5px; /* Optional: Rounded corners */
}


/*pagina contact*/
.contact {
    padding: 10px;
}

.contact h3 {
    height: 60vh !important;
    padding-top: 130px;
}

@media (max-width: 480px) {
    .contact {
        padding: 20px;
    }

    .contact h3 {
        padding-top: 70px;
    }
}

/*tables for anamnesi*/

input[type="radio"] {
    width: 20px;
    height: 20px;
}

@media (max-width: 480px) {
    input[type="radio"] {
        width: 22px;
        height: 22px;
    }
}

tr {
    background: #cbd3c7; /* Faded #ccc variant */
    transition: background 0.3s ease; /* Smooth transition */
}

/* Change the background when a radio button inside is checked */
tr:has(input[type="radio"]:checked) {
    background: white; /* Checked background */
    height: 3rem;
}

.table > :not(caption) > * > * {
    padding: .5rem .5rem !important; /* Higher specificity to override */
}

/*td {*/
/*    text-align: center;*/
/*}*/

td span {
    font-size: 1rem;
}

.custom-display {
    text-align: center;
}

.anamnesi_personale_section {
    border: solid 1px #000;
    padding: 0 5px 0 5px;
    background-color: white;
    margin-top: 20px;
}

/*.custom-display-tr {*/
/*    !*width: 40%; *!*/
/*    display: flex;*/
/*}*/





/*#bariatrics-ro {*/
/*    width: 10%;*/
/*    background: #000000;*/
/*}*/

/*ro*/
#ro-weight-table {
    width: 100%;
}

#dieta-ro-personale{
    width: 50%;
}

/*it*/

@media (max-width: 480px) {
    body {
        /*background: #0a58ca !important;*/
    }

    .table > :not(caption) > * > * {
        padding: .5rem .2rem !important;
        /*background: red !important; !* Override with mobile-specific styles *!*/
    }

    .custom-display {
        height: 3rem;
    }

    /*tr {*/
    /*    height: 3rem;*/
    /*}*/
    tr:has(input[type="radio"]:checked) {
        background: white; /* Checked background */
        height: 3rem;
    }


    tr:first-child {
        width: 40%;
    }

    td span {
        font-size: .8rem;
    }

    /*not working */
    .custom-display td:first-child {
        width: 50% !important; /* Add !important to prevent being overridden */
        word-wrap: break-word; /* Ensure word wrapping for smaller content */
        max-width: 40% !important; /* Set max-width explicitly */
        white-space: normal !important; /* Avoid inline text overflow */

    }

    /* Specifically target the problematic <td> with both selectors */
    .custom-display .custom-display-tr,
    .custom-display td.custom-display-tr {
        width: 40% !important;
        max-width: 40% !important;
        word-wrap: break-word;
        white-space: normal !important;
    }

    /* Optional: Set table layout if needed */
    .custom-display {
        table-layout: fixed; /* Ensure predictable column sizing */
        /*width: 100%; !* Ensure table fills the parent *!*/
    }

    #dieta-ro-personale{
        width: 22%;
    }

    .second-table {
        table-layout: fixed; /* Enforce fixed table layout */
        width: 100%; /* Ensure the table occupies full width */
    }
}

@media (max-width: 375px) {
    body {
        /*background: #ca0a60 !important;*/
    }

    font-size: 5rem;
    .table > :not(caption) > * > * {
        padding: .5rem .2rem !important;
        /*background: red !important; !* Override with mobile-specific styles *!*/
    }


    tr:first-child {
        width: 40%;
    }

    td span {
        font-size: .8rem;
    }

    /*not working */
    .custom-display td:first-child {
        width: 50% !important; /* Add !important to prevent being overridden */
        word-wrap: break-word; /* Ensure word wrapping for smaller content */
        max-width: 40% !important; /* Set max-width explicitly */
        white-space: normal !important; /* Avoid inline text overflow */

    }

    /* Specifically target the problematic <td> with both selectors */
    .custom-display .custom-display-tr,
    .custom-display td.custom-display-tr {
        width: 40% !important;
        max-width: 40% !important;
        word-wrap: break-word;
        white-space: normal !important;
    }

    /* Optional: Set table layout if needed */
    .custom-display {
        table-layout: fixed; /* Ensure predictable column sizing */
        /*width: 100%; !* Ensure table fills the parent *!*/
    }

}

input:checked {
    text-decoration: line-through;
}

/* Styling the container holding all checkboxes */
.checkbox-container {
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin-top: 15px;
}

/* Add spacing around the labels */
.checkbox-container input[type="checkbox"] + label {
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
    color: #333;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* Higher visibility with increased size */
.checkbox-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Update the visuals when checked */
.checkbox-container input[type="checkbox"]:checked + label {
    text-decoration: line-through;
    color: #8cae86;
}

/* Optional: Add hover effects for better interactivity */
.checkbox-container input[type="checkbox"]:hover + label {
    color: #555;
}

.custom-header {
    font-weight: Bold;
    padding-top: 10px;
    font-size: 1.5rem;
}

@media (max-width: 480px) {
    .custom-header {
        font-size: 1rem;
    }

    .section-ro-2 {
        font-size: .7rem;
        padding: .4rem;
        margin: 7px 0 12px 0;
    }
}

/*@media (max-width: 480px) {*/

/*}*/

.alimentare_section {
    padding-top: 20px;
}

.alimentare_section input[type="radio"] {
    width: 20px;
    height:  20px;
}

@media (max-width: 480px) {
    .alimentare_section input[type="radio"] {
        width: 19px;
        height:  19px;
    }
}

@media (max-width: 480px) {
    #anamesi_alimentare_dx thead th {
        font-size: 11px; /* Smaller font size for headers */
        text-align: center;
    }

    #anamesi_alimentare_dx thead th:first-child {
        width: 10px; /* First column */
    }

    #anamesi_alimentare_dx thead th:nth-child(2) {
        width: 50px; /* 'NO' column */
    }

    #anamesi_alimentare_dx thead th:nth-child(3) {
        width: 50px; /* 'SI' column */
    }

    #anamesi_alimentare_dx thead th:nth-child(4) {
        width: 70px; /* '1 (poco)' column */
    }

    #anamesi_alimentare_dx thead th:nth-child(5) {
        width: 80px; /* '2 (medio)' column */
    }

    #anamesi_alimentare_dx thead th:nth-child(6) {
        width: 80px; /* '3 (molto)' column */
    }
}
@media (max-width: 480px) {
    .second-table {
        table-layout: fixed; /* Enforce fixed table layout */
        width: 100%; /* Ensure the table occupies full width */
    }

    .second-table thead th {
        font-size: 11px; /* Smaller font size for headers */
        text-align: center;
        width: 20px; /* Set fixed width for the column */
        /*background: red !important; !* Background for testing visibility *!*/
    }

    .second-table thead th:first-child {
        width: 60px !important; /* Explicitly set width for the first column */
        max-width: 65px; /* Ensure it doesn't resize beyond this */
    }

    .second-table thead th:nth-child(2) {
        width: 20px !important; /* 'NO' column */
    }

    .second-table thead th:nth-child(3) {
        width: 20px !important; /* 'SI' column */
    }

    .second-table thead th:nth-child(4) {
        width: 30px !important; /* '1 (poco)' column */
    }

    .second-table thead th:nth-child(5) {
        width: 40px !important; /* '2 (medio)' column */
    }

    .second-table thead th:nth-child(6) {
        width: 40px !important; /* '3 (molto)' column */
    }
    /*tr {*/
    /*    height: 3rem;*/
    /*}*/

}


@media (max-width: 480px) {
    .aqua span{
        font-size: 11px;
    }
}

.show {
    display: block;
}
.hide {
    display: none;
}


/*fixing tr in app -> clash with mobile version*/
.custom-app-row {
    background-color: #e4e4e4;
    cursor: pointer;
}


/*modal custom*/
.modal-xl-custom .modal-dialog {
    width: 90vw;
    max-width: 90vw;
    height: 80vh;
    max-height: 80vh;
}

.modal-xl-custom .modal-content {
    height: 100%;
}

.modal-xl-custom .modal-body {
    height: calc(100% - 120px); /* Subtract header and footer */
    overflow-y: auto;
}

/* end modal custom*/


/*custom badge*/
.custom-badge {
    display: inline-block;
    padding: 0.5rem 0.9rem !important;
    /*font-size: 0.75rem !important;*/
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem; /* Rounded corners */
    margin-left: 5px; /* Space from the text/icon */
}

/* Specific styling for the text badge */
.text-badge {
    background-color: #dc3545; /* Red background */
    color: #fff; /* White text */
}

/* For badges that might not be next to text, e.g., on their own */
.text-badge-standalone {
    background-color: #1D7B77; /* Blue background */
    color: #fff;
    padding: 0.4em 0.8em; /* Slightly larger padding */
    font-size: 0.85em;
}

/* Optional: Basic styling for header and nav items for context */
.header-nav .nav-item {
    text-decoration: none;
    color: #007bff;
    margin-left: 20px;
    position: relative; /* Needed for positioning if you want an absolute badge */
}

.header-nav .nav-item:hover {
    text-decoration: underline;
}
/*end  custom badge*/