/* Root styles */
:root {
    --black: #000000;
    --dark-gray: #3F4444;
    --gray: #979797;
    --light-gray: #EBEFEE;
    --light-gray-2: #F2F2F2;
    --light-gray-3: #F8F8F8;
    --white: #ffffff;

    --light-green: #F2F9F6;
    --light-green-2: #A9D9C8;
    --green: #367B63;
    --dark-green: #1C464A;
    --dark-blue: #0C1D1F;
    --beige: #FBFAE7;
    --beige: #FDF4E4;
    --yellow: #ECC442;
    --orange: #ECA63A;

    /* Font sizes */
    --text-xlarge: 42px;
    --text-large: 30px;
    --text-medium: 24px;
    --text-small-medium: 20px;
    --text-small: 16px;
    --text-extra-small: 12px;

    --font-family-primary: "inter-variable", sans-serif;

    --tooltip-size: 200px;
}

/* Global styles */
.text-xlarge { font-size: var(--text-text-); }
.text-large { font-size: var(--text-large); }
.text-medium { font-size: var(--text-medium); }
.text-small { font-size: var(--text-small); }
.text-extra-small { font-size: var(--text-extra-small); }

.text-yellow { color: var(--yellow); }
.text-white { color: var(--white); }
.text-dark-gray { color: var(--dark-gray); }
.text-light-gray { color: var(--light-gray); }
.text-medium-gray { color: var(--medium-gray); }
.text-dark-green { color: var(--dark-green); }

.bg-yellow { background-color: var(--yellow); }
.bg-dark-green { background-color: var(--dark-green); }

.m-auto { margin: auto; }
.d-flex { display: flex; }
.m-0 { margin: 0; }
.m-1 { margin: 5px; }
.m-2 { margin: 10px; }
.m-3 { margin: 20px; }
.m-4 { margin: 40px; }

.p-0 { padding: 0; }
.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 20px; }
.p-4 { padding: 40px; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.font-family-arial {
    font-family: Arial, Helvetica, sans-serif;
}
.font-light { font-weight: 200; }
.font-regular {
    font-weight: 400;
}
.font-book { font-weight: 700; }
.font-bold { font-weight: 900; }

.font-normal { font-style: normal; }
.font-italic { font-style: italic; }
.font-uppercase { text-transform: uppercase; }
.font-lowercase { text-transform: lowercase; }
.font-capitalize { text-transform: capitalize; }

.hidden { display: none; }

.contenedor_body {
    display: grid;
    left: 0;
    width: 100%;
    grid-template-columns: 70% 30%;
    max-height: 600px;
}

.btn_box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 10;
}

.btn_item {
    display: grid;
    width: 100%;
    max-height: 50px;
    grid-template-columns: 40% 60%;
    gap: 0;
}

.btn_item.active {
    background-color: var(--dark-green);
    color: var(--white);
}

.btn_item .border {
    width: 5px;
    display: flex;
    height: 100%;
    min-height: auto;
    height: -webkit-fill-available;
    background: transparent;
    border-radius: 0px 0 0 0px;
    overflow: hidden;
    transition: all 1s ease-in-out;
}

.html-asset-content {
    width: 50% !important;
}

.item_content {
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-radius: 60px;
    color: var(--dark-green);
    background-color: var(--light-green);
    max-height: 40px;
    max-width: 100%;
}

.item_content .btn_icon {
    width: 30px;
    height: 30px;
}

.item_content.active {
    color: var(--white);
    background-color: var(--dark-green);
}

.item_content.active .btn_icon {
    fill: #ffffff;
}

.item_content.active .currentColor {
    fill: #ffffff;

}
.item_content img {
    width: 30px;
    height: auto;
}

.images {
    width: 100%;
    right: 0;
    z-index: 2;
    text-align: right;
}

.images img {
    transition: opacity 0.5s ease-in-out;
    width: auto;
    max-height: 60vh;
}

.images img.active {
    opacity: 1;
    z-index: 0;
}

.active {
    z-index: 5;
}

.img_symptoms {
    visibility: hidden;
}
  
.tooltiptext {
    width: auto;
    background-color: var(--white);
    color: var(--black);
    text-align: center;
    border-radius: 6px;
    text-align: left;
    padding: 10px;
    font-size: var(--text-extra-small);
    margin: 0;
    align-content: space-around;
    visibility: hidden;
}

.tooltiptext.active{
    visibility: visible;
    background-color: var(--light-green-2);
}
.img_symptoms.active {
    visibility: visible;
}

.img_symptoms {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.img_symptoms.active {
    visibility: visible;
    opacity: 1;
    z-index: 5;
}

@media (max-width: 992px) {
    .contenedor_body {
        display: grid;
        left: 0;
        width: 100%;
        grid-template-columns: 60% 40%;
    }
    .item_content img {
        width: 30px;
        height: auto;
    }
    .item_content {
        overflow: visible;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 10px;
        border-radius: 60px;
        color: var(--dark-green);
        background-color: var(--light-green);
        font-size: var(--text-extra-small);
        max-height: 40px;
        max-width: 240px;
        justify-content: flex-start;
    }
    .btn_item {
        display: grid;
        width: 100%;
        max-height: 50px;
        grid-template-columns: 35% 65%;
        gap: 0;
    }
}

@media (max-width: 600px) {
     .item_content img {
         width: 30px;
         height: auto;
     }
     .item_content span {
         display: none;
     }
     .item_content {
        overflow: visible;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 10px;
        border-radius: 60px;
        color: var(--dark-green);
        background-color: var(--light-green);
        font-size: var(--text-extra-small);
        width: 40px;
        height: 40px;
        justify-content: center;
     }
     .btn_item {
        display: grid;
        width: 100%;
        max-height: 50px;
        grid-template-columns: 60px auto;
        gap: 0;
    }
    .tooltiptext.active{

        visibility: visible;
        background-color: var(--light-green-2);
        opacity: 0.75;
    }
}