.shebleeds-calculator-container {
	max-width: 1000px;
	margin: auto;
	text-transform: uppercase;
		    font-family: 'Abhaya Libre', sans-serif;

}

.shebleeds-calculator-container h1,
.shebleeds-calculator-container h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.shebleeds-form-group {
    margin-bottom: 20px;
      display: flex; /* maak het container flexbox */
      align-items: center; /* verticaal uitlijnen in de flex container */

}

.shebleeds-form-group label {
    font-weight: bold;
 flex: 0 0 auto; /* flex-shrink: 0, flex-grow: 0, flex-basis: auto */
      margin-right: 20px;	
}

.shebleeds-form-group input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #e03135;
flex: 1 1 auto;
	max-width: 300px;
}

.shebleeds-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    table-layout: fixed; /* Ensures columns are of equal width where possible */
}

.shebleeds-table th,
.shebleeds-table td {
    border: 1px solid #e03135;
	background-color: #fbeeec;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.shebleeds-table td {
 border-bottom: 1px dotted #e03135;
 border-top: 1px dotted #e03135;

}

.shebleeds-table .score-row td, .shebleeds-table .score-row th {
 border-top: 2px solid #e03135;

}


.shebleeds-table th {
    background-color: #fad6d6;
    font-weight: bold;
	color: #e03135;
font-size: 20px;	
}

.shebleeds-table .large {
width: 200px;
}

.shebleeds-table .white {
    background-color: #FFFFFF !important;
}
.shebleeds-table .gradient {
background: linear-gradient(72deg,rgba(240, 135, 181, 1) 0%, rgba(230, 44, 46, 1) 100%);
color: #FFF;
}


.shebleeds-table .icon {
max-width: 80px;
	
}


.shebleeds-table input[type="number"] {
    width: 80%; /* Make inputs fill the cell */
    padding: 5px;
    border: 0px solid #ddd;
    box-sizing: border-box;
    text-align: center;
}

.shebleeds-table .score-box {
    display: inline-block;
    padding: 5px 10px;
    min-width: 30px;
    font-weight: bold;
    text-align: center;
}

.shebleeds-table tfoot .total-label {
    text-align: right;
    font-weight: bold;
	border-left: none;
	border-bottom: none;
	border-top: solid 1px #e03135;	
	color: #e03135;
	
}
.shebleeds-table .grand-total-td {
	border: solid 2px #e03135;	
	
	
}
.shebleeds-table .equal {
border-top: none !important;
border-bottom: none !important;
	
}


.shebleeds-controls {
    text-align: center;
    margin-top: 20px;
}

.shebleeds-controls button {
    transition: background-color 0.3s ease;
}

.shebleeds-controls #downloadResultsButton {
background: transparent;
border: none;	
	    font-family: 'Abhaya Libre', sans-serif;
	color: #e03135;
text-decoration: underline;	
font-size: 20px;
font-weight: bold;
text-underline-offset: 10px;
margin-top: 20px;	
	
}

.shebleeds-controls .hidden {
    display: none;
}

.shebleeds-overall-total{
    margin: 20px 0;
    padding: 10px;
    font-size: 1.2em;
	color: #e03135;
}
.shebleeds-overall-total td {
    border: 2px solid #e03135;
}
#overallResultMessage{
text-transform: initial;	
font-size: 18px;
line-height: 1.1em;	
}

.scoring{
position: relative;	
}

 /* Container voor het infopictogram */
    .info-icon-container {
        position: absolute; /* Belangrijk voor de positionering van de tooltip */
        display: inline-block; /* Zodat de container niet de volledige breedte inneemt */
		right: -10px;
    }

    /* Styling van het infopictogram zelf (het 'i' teken) */
    .info-icon {
        display: inline-flex; /* Gebruik flexbox om 'i' te centreren */
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%; /* Maak een cirkel */
        background-color: #e03135; /* Blauwe achtergrond */
        color: white; /* Witte tekst */
        font-weight: bold;
        font-size: 14px;
		text-transform: lowercase;
        cursor: pointer;
        position: relative; /* Nodig voor de pseudo-elementen */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Lichte schaduw */
        transition: all 0.2s ease-in-out; /* Soepele overgang bij interactie */
    }

    .info-icon:hover {
        background-color: #e03135; /* Donkerder blauw bij hover */
    }

    /* De daadwerkelijke tooltip box */
    .info-icon::before {
        content: attr(title); /* Haalt de tooltip tekst uit het 'title' attribuut */
        position: absolute;
        bottom: 150%; /* Plaats de tooltip boven het icoon */
        left: 50%;
        transform: translateX(-50%) scale(0.9); /* Centreer en maak iets kleiner */
		text-transform: initial;
		line-height: 1.1em;
		font-weight: normal;
        background-color: #333; /* Donkere achtergrond */
        color: white; /* Witte tekst */
        padding: 8px 12px;
		width: 200px;	
        border-radius: 8px; /* Afgeronde hoeken */
        opacity: 0; /* Standaard onzichtbaar */
        visibility: hidden; /* Standaard niet klikbaar/selecteerbaar */
        pointer-events: none; /* Negeer muis-events op de tooltip */
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Soepele overgang */
        z-index: 10; /* Zorg dat de tooltip boven andere elementen ligt */
        box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Duidelijke schaduw */
    }

/* Het pijltje onder de tooltip - nu een driehoek */
    .info-icon::after {
        content: '';
        position: absolute;
        bottom: calc(150% - 5px); /* Plaats de driehoek onder de tooltip, iets hoger */
        left: 50%;
        transform: translateX(-50%); /* Geen rotatie meer nodig voor een driehoek */
        width: 0; /* Geen breedte */
        height: 0; /* Geen hoogte */
        border-left: 8px solid transparent; /* Linker kant van de driehoek */
        border-right: 8px solid transparent; /* Rechter kant van de driehoek */
        border-top: 8px solid #333; /* De 'punt' van de driehoek, dezelfde kleur als de tooltip */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        z-index: 9;
    }

    /* Toon de tooltip en het pijltje wanneer de muis over de container hovert */
    .info-icon-container:hover .info-icon::before,
    .info-icon-container:hover .info-icon::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scale(1); /* Terug naar normale grootte */
        /* reset de transition delay, zodat hij direct verschijnt */
        transition-delay: 0s;
    }

    /* Zorg ervoor dat de tooltip even blijft staan nadat de muis weg is */
    .info-icon-container:not(:hover) .info-icon::before,
    .info-icon-container:not(:hover) .info-icon::after {
        /* De tooltip blijft 1 seconde zichtbaar na het weghalen van de muis */
        transition-delay: 1s; /* Dit is de vertraging voordat het verdwijnen begint */
    }

.mobile{
	display: none;	
	}


/* Responsive adjustments */
@media (max-width: 768px) {
	.desktop{
	display: none;	
	}
	.mobile{
	display: table;	
	}
    .shebleeds-table th, .shebleeds-table td {
        padding: 5px;
        font-size: 0.85em;
    }
    .shebleeds-table input[type="number"] {
        padding: 3px;
		width: 100%;
    }
.shebleeds-table .icon {
  margin-top: 10px;
}

}