@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/ubuntu-sans-v2-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html, body {
	font-family: 'Ubuntu', sans-serif;
	font-weight: 300;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* overflow-x: hidden;  Välistab horisontaalse kerimise */
}

body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

strong {
    font-weight: bold !important;
}

body.error-page {
    background-color: #ebebeb;
}

.bg-gr-light{
	background: #f8fff4;
}

.bg-rd-light{
	background: #fff7f7;
}

body.error-page .err-site-container {
    max-width: 500px;
    width: 100%;
    background: #fff;
    padding: 30px;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    
    /* Keskendamine lehe keskele */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.error-page img {
    max-width: 150px; /* Logo suurus */
    display: block;
    margin: 0 auto 20px; /* Keskele joondamine ja all vahe */
}

body.error-page h1 {
    color: #001c70;
    font-size: 28px;
    margin-bottom: 10px;
}

body.error-page p {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

/* Avalehe nupp */
body.error-page .error-button {
    display: inline-block;
    background: #001c70;
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 0px;
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s;
}

body.error-page .error-button:hover {
    background: #00a100;
}

body.error-page .error-title {
    color: #ff0000;
    font-size: 28px;
    font-weight: bold;
}

body.error-page .error-email-link {
    color: #ff0000 !important;
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
}

body.error-page .error-email-link:hover {
    text-decoration: underline;
    color: #001c70 !important;
}

        
.tooltip-inner {
        border-radius: 0 !important; /* Muudab tooltipi kastinurgad kandiliseks */
        padding: 8px; /* Veidi suurem padding, et näeks parem välja */
    }

a {
    text-decoration: none !important;
    color: #3b3b3b !important;
    transition: color 0.5s ease; /* Sujuv üleminek värvi muutmisel */
}
a:hover {
    color: #00a100 !important;
}

.h5-b{
	font-size: 20px !important;
	font-weight: 900 !important;
}

.btn-link{
 	color: #00a100 !important;	
}

.iti input[type="tel"]::placeholder {
    color: #ccc !important;
}

.card-text {
    line-height: 1.8; /* Vaikimisi 1.5, suuremaks muutes rohkem vahet */
}

footer {
    display: flex; /* Flexbox aktiveerimine */
    flex-direction: column; /* Vertikaalne paigutus */
    justify-content: center; /* Vertikaalne joondamine */
    align-items: center; /* Horisontaalne joondamine */
    text-align: center; /* Teksti keskjoondamine */
    padding: 20px; /* Lisa veidi ruumi seespool */
    background-color: #001c70;
    color: white;
}

footer .container {
    display: flex; /* Flexbox ka seesolevatele elementidele */
    flex-direction: column; /* Vertikaalne paigutus */
    justify-content: center; /* Vertikaalne joondamine */
    align-items: center; /* Horisontaalne joondamine */
}

footer ul {
    padding: 0; /* Eemaldame vaikimisi paddingu */
    margin: 10px 0 0; /* Lisame veidi ruumi ülemise osa jaoks */
    list-style: none; /* Eemaldame täpploendi stiili */
}

footer ul li {
    display: inline-block; /* Paigutab elemendid kõrvuti */
    margin: 0 10px; /* Lisame vahed iga elemendi vahele */
}

footer p {
    margin: 0 0 5px; /* Lisame veidi vahet p ja ul vahel */
}


footer a {
    color: white !important;
}

.iti {
    width: 100%; /* Telefoni sisestusväli võtab kogu bloki laiuse */
}
.iti__selected-flag {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

input, textarea, select {
    box-shadow: none !important;
	border-radius: 0 !important;
}

.form-control {
    min-height: 48px !important;
}

.form-control:focus, .form-select:focus {
    border: 1px dotted #000000 !important; /* Musta värvi punktiirääris */
    outline: none; /* Eemaldab vaikimisi brauseri ääre */
    box-shadow: none; /* Eemaldab varjud */
    background-color: #ffffff !important;
}

/* CHECKBOX */

input[type="checkbox"] {
	appearance: none; /* Eemaldab vaikimisi stiili */
	-webkit-appearance: none; /* iOS ja Safari spetsiifiline */
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border: 1px solid #cbcbcb;
	border-radius: 0px; /* Kandilised nurgad */
	background-color: white; /* Valge taust */
	position: relative;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease; /* Sujuv üleminek */
}

/* Valitud olek */
input[type="checkbox"]:checked {
	background-color: #28a745 !important;  /* Roheline taust */
	border-color: #28a745 !important;  /* Roheline raam */
}

input[type="checkbox"].toggle-pyramid:disabled {
    display: none;
}

.btn{	
	border-radius: 0;
}

.btn-primary{	
	border-radius: 0;
	background-color:#001c70 !important;
	color: #ffffff;
	text-decoration: none !important;
	transition: background-color 0.5s ease, color 0.5s ease !important;
}

.btn-primary:hover {
	border-radius: 0;
	background-color: #00a100 !important;
	color: #ffffff !important;
}
.form-select {
	height: 48px !important;
	min-width: 80px !important;
    padding-right: 1.5rem; /* Lisa paremale rohkem ruumi */
}

.f-s-2 {
	height: 38px !important;
}

.ttip{
	cursor: pointer;
}

.badge{
	border-radius: 0px; /* Kandilised nurgad */	
	background-color:#001c70;
	min-width: 35px !important;
    display: inline-flex;
    align-items: center; /* Joondab teksti badge'i sees vertikaalselt keskele */
    justify-content: center; /* Joondab teksti badge'i sees horisontaalselt keskele */
}

.badge2{
	width: 90px !important;
	height: 30px !important;
}

.form-check {
    display: flex;
    align-items: center; /* Joondab elemendid vertikaalselt keskele */
}

.form-check-input {
    margin-right: 0.5em; /* Lisa vahe checkboxi ja badge'i vahel */
    margin-top: -1px; /* Lisa vahe checkboxi ja badge'i vahel */
}

.btn-success, .btn-secondary {
	border-radius: 0 !important;
}

.btn-disabled{	
	background-color:#adadad;
	border-color: #adadad;
}

.btn-success{
	background-color: #28a745 !important;  /* Roheline taust */	
}

.bg-success{
	background-color: #28a745 !important;
}

.bg-default{
	background-color: #ebebeb !important;
}

.btn-default-width{
	min-width: 100px;
}

main {
    flex: 1; /* Tõmbab ülejäänud ruumi enda alla */
}


.custom-input {
    max-width: 400px !important;
    width: 100%; /* Täielik laius mobiilseadmetes */
}

.custom-input-reg {
    max-width: 500px !important;
    width: 100%; /* Täielik laius mobiilseadmetes */
}

.dropdown{	
    /* margin-right:200px; */
}
.dropdown-menu {
	border-radius: 0px;
    background-color: white !important; /* Dropdowni taust */
    border: 1px solid #ddd; /* Õhuke hall piirjoon */
}

.d-flex.justify-content-end {
    margin-right: 0px; /* Div-i kaugus paremast servast */
}

.down {
    margin-top: 30px; /* Div-i kaugus paremast servast */
}


.flag-icon{
	height: 20px;
}

/* Sticky header shadow */
.sticky-top {
	background-color: #ffff7f !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Keelevaliku nupu kohandused */
header .btn-light {
    background-color: #ebebeb; /* Hele taust */
    color: #212529; /* Tume tekst */
    display: flex;
    align-items: center;
    border: none;
}

header .btn-light:hover {
    background-color: #ebebeb; /* Hoveri efekt */
}

/* Dropdowni menüü kohandused */
header .dropdown-menu {
    background-color: #ffffff; /* Hele taust */
    border: 1px solid #ebebeb; /* Õrn piirjoon */
    border-radius: 0px;
}

header .dropdown-menu .dropdown-item {
    color: #212529; /* Tume tekst */
}

.dropdown .btn-light img {
    height: 20px;
    width: auto;
}

header .dropdown-menu .dropdown-item:hover {
    background-color: #ebebeb; /* Hoveri efekt */
    color: #000; /* Tume tekst */
}

.navbar-toggler {
	display: block;
    border: none; /* Eemaldab nupu ümber raami */
    background-color: transparent; /* Eemaldab taustavärvi */
    padding: 0; /* Vähendab lisaruumi ikooni ümber */
}

.navbar-toggler:focus {
    outline: none; /* Eemaldab fokuseerimise ajal raami */
    box-shadow: none; /* Eemaldab Bootstrap'i vaikimisi varju */
}

.navbar-toggler svg {
    fill: #000; /* Määrab joone värvi (nt must) */
    width: 22px; /* SVG laiuse suurendamine */
    height: 22px; /* SVG kõrguse suurendamine */
}

.navbar-toggler:focus, .navbar-toggler:hover {
    outline: none !important; /* Eemaldab raami fokuseerimisel */
    background-color: transparent !important; /* Väldib taustavärvi */
}

.top-head {
    width: 100%;
    background-color: #001c70;
    color: #ffffff;
    padding: 10px; 
    display: flex; /* Aktiveerib paindliku paigutuse */
    align-items: center; /* Vertikaalne keskjoondus */
    justify-content: center; /* Horisontaalne keskjoondus */
}

.top-head a {
    color: #ffffff !important; /* Muudab lingid valgeks */
    text-decoration: none; /* Eemaldab allajoonimise */
    font-size: 14px; /* Muudab teksti väiksemaks */
    margin: 0 12px; /* Lisab ruumi lingi ja teiste elementide vahel */
}

.top-head a:hover {
    text-decoration: underline;
    color: #00a100 !important;    
}

.header-icons {
    margin-top: -2px;
}

.header-icons a:hover {
    fill: #00a100; 
}

.top-head a svg, .top-head svg {
    width: 13px; /* Määrab ikooni laiuse */
    height: auto; /* Määrab ikooni kõrguse */
    fill: #ffffff; /* Ikooni algvärv */
    margin-right: 18px; /* Ruumi ikooni ja teksti vahel */
}

.header-tel-txt, .header-email-txt, .header-time-txt, .header-map-txt  {
    /* transition: color 0.5s;  Sujuv üleminek värvi muutumisel */
    font-size: 14px;
}
.header-map-txt  {
	margin-left: -10px;
}


.top-head a svg{
    transition: fill 0.5s; /* Sujuv üleminek hoveril */	
}



.top-head a:hover svg {
    fill: #00a100; /* Ikooni värv hoveril */
}

.header-logo{
	width: 55px;
    height: auto;
    margin-left: 10px;
    margin-right: 10px;
}

.header-content {
    flex: 1; /* Võtab ülejäänud ruumi konteineris */
    display: flex; /* Joondamiseks ainult pealkirja sees */
    justify-content: center; /* Joondab pealkirja horisontaalselt keskele */
    align-items: center; /* Joondab pealkirja vertikaalselt keskele */
    text-align: center; /* Tagab, et tekst on tsentreeritud */
}

.nav-item.d-lg-none strong {
    color: #00a100; /* Määrab soovitud värvi */
    font-weight: 700;
    margin-top: 10px;
    display: block;    
}

/* Footer customization */

	.row {
        display: flex;
        /* justify-content: center; */
        width: 100%;
        margin-bottom: 8px;
        margin-left:1px;
    }

    .pyramid {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(100% - 20px);
        margin: 0 auto;
    }

    .row2 {
        display: flex !important;
        justify-content: center !important;
        width: 100%;
        margin-bottom: 8px;
        flex-wrap: nowrap !important;
    }
    
    .row3 {
        justify-content: left;
        padding-left: 16px;
        margin-bottom: 8px;
        margin-left:1px;
    }    

    .player-block {
        border: none;
        width: 100% !important;
        padding: 10px;
        margin: 2px 6px;
        text-align: center;
        font-size: 1.2rem; 
        position: relative;
        color: #fff;
        flex-grow: 1 !important;
        max-width: calc(100% / 7) !important; /* Algselt jagab 7 kastiks */
        border-radius: 0px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: max-width 0.3s ease, margin 0.3s ease;
    }
    
    .block-1 {
        background: linear-gradient(to bottom, #00a100, #003500);
    }

    .block-2 {
        background: linear-gradient(to bottom, #ffd300, #302600);
    }    

    .rank {
        color: #fff;
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 5px;
    }
    
    .infoText {
        color: #ff0000;
        font-weight: bold;
        font-size: 0.9em;
        margin-bottom: 15px;
    }

    .player-name {
        font-size: 0.9em;
    }

    /* Erinevate ridade eristamine */
    .row2:nth-child(odd) {
		/* background-color: rgba(0, 123, 255, 0.1); */
    }

    .row2:nth-child(even) {
		/* background-color: rgba(0, 123, 255, 0.2); */
    }
        
        .rules-list li {
		    margin-bottom: 1rem; /* Suurendab iga punkti vahet */
		}

		.rules-list li:last-child ul {
		    margin-top: 0.5rem; /* Alampunktide eraldamiseks viimasest reast */
		}

		.rules-list li:last-child ul li {
		    margin-bottom: 0.5rem; /* Alampunktide vahelise rea vahe */
		}
		
.custom-input-reg .form-control {
    width: 100%;
    max-width: none;
    flex: 1 1 auto; /* Ühtlustab laiuse flexbox sees */
    box-sizing: border-box; /* Veendub, et padding ei mõjuta elemendi üldlaiust */
}

.navbar-nav {
    margin-left: 0; /* Mobiilivaates joondab lingid vasakule */
    margin-right: auto; /* Desktopis hoiab lingid vasakul */
    flex-direction: column; /* Mobiilivaates vertikaalne */
}

.nav-item {
    margin-left: 20px; /* Lisab iga elemendi vahele ruumi */
}

.nav-item.dropdown {
    position: relative;
}

.dropdown-menu {
    right: 0; /* Dropdown avaneb paremale */
    left: auto; /* Tühista vasakpoolne joondus */
    border-radius: 0px;
}

.navbar .dropdown-menu {
    margin-top: 0.5rem; /* Veidi ruumi dropdowni ja lingi vahele */
}

/* Püramiidikujuline kaart */
.pyramid-card-container {
    position: relative;
}

.pyramid-card {
    position: relative;
    width: 180px;
    height: 150px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    color: white;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.bg-stroke{
	background-image: 
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cpolygon points="50,0 100,100 0,100" fill="none" stroke="%23001c70" stroke-width="5"%3E%3C/polygon%3E%3C/svg%3E'),
    linear-gradient(to bottom, #00bd00, #004b00);
}

.bg-stroke-children{
	background-image: 
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cpolygon points="50,0 100,100 0,100" fill="none" stroke="%23001c70" stroke-width="5"%3E%3C/polygon%3E%3C/svg%3E'),
    linear-gradient(to bottom, #e2e200, #004b00);
}

/* Hover-efekt */
.pyramid-card:hover {
    color: #00ea00;
    transition: color 0.5s; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* Teksti sees hoidmine */
.pyramid-card .card-body {
    position: relative;
    z-index: 2;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0 10px;
}

/* SVG dekoratsioonid */
.pyramid-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    top: 55px;
    width: 70px;
    height: 70px;
	background-image: url('../images/pyramid_rackets.svg');
}


.pyramid-decoration {
    position: absolute;
    top: -11px;
    left: 64px;
    width: 50px;
    height: 50px;
    background-image: url('../images/pyramid_logo_elem.svg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1000; /* Paiguta dekoratsioon kaardi taha */
}

.pyramid-decoration-children {
    position: absolute;
    top: -15px;
    left: 53px;
    width: 70px;
    height: 70px;
    background-image: url('../images/pyramid_logo_elem_child.svg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1000; /* Paiguta dekoratsioon kaardi taha */
}

.container .selectpicker,
.container .selectpicker-gender,
.container .selectpicker-league {
    border: 1px solid #ebebeb !important;
    border-radius: 4px !important;
}

.container .selectpicker + .dropdown-toggle,
.container .selectpicker-gender + .dropdown-toggle,
.container .selectpicker-league + .dropdown-toggle {
    border: 1px solid #ebebeb !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0);
    text-align: left !important; /* Nupp ise joondatakse vasakule */
}

.container .selectpicker:focus + .dropdown-toggle,
.container .selectpicker-gender:focus + .dropdown-toggle,
.container .selectpicker-league:focus + .dropdown-toggle {
    border-color: #001c70 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    outline: none !important;
}

.bootstrap-select {
    width: 100% !important; /* Määrab alati täieliku laiuse */
    margin: 0 !important; /* Eemaldab liigsed marginaalid */
    text-align: left !important; /* Dropdown ja valikute vasakule joondamine */
}

.bootstrap-select .dropdown-menu {
    max-width: 100% !important; /* Väldi dropdowni venimist üle ekraani */
    overflow-x: hidden !important; /* Väldi horisontaalse kerimise tekkimist */
    text-align: left !important; /* Dropdowni valikute vasakule joondamine */
}

.bootstrap-select .dropdown-menu .dropdown-item {
    text-align: left !important; /* Üksikute valikute vasakule joondamine */
}
    
#pyramidMenuButton {
    margin: 0 auto; /* Joondab nupu horisontaalselt keskele */
    display: block;
}

.custom-dropdown-btn {
    width: 400px;
    margin: 0 auto; /* Joondab nupu keskele */
    text-align: center; /* Teksti joondamine keskele */
    font-size: 1.15rem; /* Suurem tekst */
    background: #001c70 !important;
}
.custom-dropdown-btn:hover, .custom-dropdown-btn:focus, .custom-dropdown-btn:active {
	background: #001c70 !important;
}

.btn-w {
    min-width: 127px;
    height: 35px;
}

.dropdown-menu {
    /* text-align: center; */
    width: 100%;
    max-width: 400px;
    margin: 0 auto; /* Dropdown avaneb keskel */
}

.custom-dropdown-menu {
    max-width: 400px; /* Dropdowni maksimaalne laius */
    margin: 0 auto; /* Keskne joondus */
    text-align: center; /* Dropdowni teksti keskele joondamine */
    left: 50%; /* Avaneb keskel */
    transform: translateX(-50%); /* Tsentreerimine */
}

/* Dropdown menüü linkide põhistiil */
.dropdown-menu .dropdown-item {
    background-color: transparent; /* Vaikimisi läbipaistev */
    color: #000000; /* Teksti värv */
    transition: background-color 0.2s ease-in-out; /* Sujuv üleminek */
}

/* Hover (hiire peal hoidmise) stiil */
.dropdown-menu .dropdown-item:hover {
    background-color: #001c70; /* Hover värv */
    color: #ffffff; /* Teksti värv hoveri ajal */
}

/* Fookus (klikkimise) stiil */
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    background-color: #001c70 !important; /* Klikkimisel tume toon */
    color: #ffffff !important; /* Teksti värv klikkimise ajal */
    box-shadow: none !important; /* Eemaldab lisavarju */
    outline: none !important; /* Eemaldab fookuse äärise */
}
.readonly-field {
        background-color: #ebebeb !important; /* Hall taust */
        border: 1px solid #b6b6b6; /* Sama stiil nagu Bootstrap-i sisestusväljal */
        color: #495057; /* Teksti värv */
        cursor: not-allowed; /* Hiirenool viitab, et muutmine pole võimalik */
    }
    
.list-group {
	border-radius: 0;
}

.list-group1 {
	padding: 10px 20px;	
}

.list-group2 {
	padding: 0 10px 0 7px;	
}
    
.list-group-item {
    white-space: nowrap; /* Väldi murtud teksti */
    overflow: hidden;    /* Peida üleliigne tekst */
    text-overflow: ellipsis; /* Lisa ellips, kui tekst on liiga pikk */
}

.grab{
	cursor: grab; /* Käe ikoon lohistamiseks */
}

.grab:active{
   cursor: grabbing; /* Muutub lohistamise ikooniks */
}

.list-group-item .badge {
    font-size: 0.85rem; /* Rank'i suurus väiksemaks */
}
    
.pyramid-block {
    flex: 0 0 calc(50% - 10px); /* Desktop vaates kaks blokki kõrvuti */
    max-width: 520px; /* Maksimaalne laius desktopis */
    margin: 10px; /* Vahe plokkide vahel */
}

.dwn10{
margin: 0px 0 20px 0;	
}
.top11{
margin-top: 15px;	
} 

.top-15{
margin-top: -15px;	
}    

.text-danger {
    color: red;
} 
.modal-body-2{
	margin-top: -46px;
	position: relative;
}   

.mb-visilble{
	overflow: visible;
}
.row.border .col-3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
}

.line-spacing-2 {
    margin-bottom: 0.8rem;
    line-height: 1.7;
}
.line-spacing-3 {
    margin-bottom: 1.2rem;
    margin-left: 0.8rem;
	/* line-height: 1.7; */
}

.offcanvas-body {
    display: flex;
    flex-direction: column;
}

.offcanvas-body .navbar-nav {
    margin-bottom: 0;
}

.offcanvas-body .nav-item {
    text-align: left;
    padding: 0rem 1rem !important;
}

.modal .row {
	gap: 5px; /* Vähendab vahemaad veergude vahel */
}

.modal .col-3 {
	flex: 0 0 22%; /* Vähendab iga veeru laiust */
	max-width: 22%; /* Veendub, et veerud jäävad väiksemaks */
}

.modal .col-12 {
	margin-top: 10px; /* Ülaveerud saavad natuke ruumi */
}

.tie-break-select {
	background-color: #999999 !important;
	color: #fff; /* Valge tekst */
	border: 1px solid #555; /* Helehall äär */
}

.tie-break-select:focus {
	background-color: #999999 !important; /* Veidi heledam taust fokuseerimisel */
	color: #fff; /* Valge tekst */
	border-color: #777; /* Veel heledam äär */
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2); /* Pehme valge vari */
}

.tie-break-select option {
	background-color: #333 !important; /* Tumehall dropdowni valikutes */
	color: #fff; /* Valge tekst valikutes */
}

.button-group {
  display: flex;
  flex-wrap: wrap;       /* Võimaldab uuele reale murdumist */
  justify-content: center; /* Nupud tsentreeritud */
  gap: 10px;             /* Vahe nupuvahade vahel */
}

/* Kõik nupud vaikimisi 50% laiusega */
.button-group > button {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
}

/* Kolmas nupp täislaiuses */
.button-group > button:nth-child(3) {
  flex: 0 0 100%;
  max-width: 100%;
}

.button-group button {
	margin-bottom: 1px; /* Vahe nuppude vahel */
}

/* Kõikide modali akende servad kandiliseks */
.modal-content {
    border-radius: 0 !important;
    max-width: 95%; /* Modal laiuseks 90% ekraani laiusest */
    margin: auto;  /* Keskele joondamine */
    margin-top: 5%; 
}

.confirm-modal-content {
	position: relative; /* Seab kontekstiks modali sisu */
}

.left-x1{	
	margin-left: -12px;	
}

#scoreValidationMessage {
	position: absolute;
	bottom: 0; /* Lisame ruumi modal-i ülemisest servast */
	left: 0;
	right: 0;
	min-height: 100px;
	display: flex; /* Kasutame Flexboxi */
	align-items: center; /* Vertikaalne joondus keskele */
	justify-content: center; /* Horisontaalne joondus keskele */
	text-align: center;
	z-index: 1050;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-top-left-radius: 0rem; /* Ülemine vasak nurk ümar */
	border-top-right-radius: 0rem; /* Ülemine parem nurk ümar */
	border-bottom-left-radius: 0; /* Alumine vasak nurk jääb kandiline */
	border-bottom-right-radius: 0; /* Alumine parem nurk jääb kandiline */
	background-color: #f8d7da; /* Näide taustavärvist (oht: punane) */
	color: #721c24; /* Tekstivärv */
	border: 1px solid #f5c6cb; /* Selgus servades */
}

#confirmationModal .modal-dialog {
	position: relative; /* Tagab, et modaal jääb modaali sees */
    /* margin: auto;  Keskendame modaal horisontaalselt ja vertikaalselt */
	margin-top: 3rem; /* Määrab modali ülemise kauguse */
	margin-bottom: auto; /* Alumine kaugus on automaatne */
	max-width: 500px; /* Sama laiusega nagu tulemuste modaal */
	width: 100%; /* Kohandub saadava ruumiga */
    /* height: calc(100% - 2rem);  Jätame ülemise ja alumise vahe */
	max-height: calc(100% - 2rem); /* Väldime modaali väljumist aknast */
    /* padding-top: 1rem;  Lisa ruumi alumisele servale */
	box-sizing: border-box; /* Võtab arvesse padding ja border */
}

#confirmationModal .modal-body {
	flex-grow: 1; /* Venitab kehaosa ülejäänud ruumi täitmiseks */
	display: flex;
	align-items: center; /* Vertikaalselt keskele */
	justify-content: center; /* Horisontaalselt keskele */
}

#confirmationModal .modal-header,
#confirmationModal .modal-footer {
	flex-shrink: 0; /* Säilitab kõrgused */
}

#confirmationMessage {
	white-space: pre-line;
}

.alert {
    border-radius: 0 !important;
}

.alert-success {
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #badbcc;
	border-radius: 0;
}

#scoreValidationMessage.alert-success {
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #badbcc;
}

.text-success {
	color: #00a100; /* Võidule roheline */
	font-weight: bold;
	border-radius: 0;
}

.text-danger {
	color: red; /* Kaotusele punane */
	font-weight: bold;
}

.final-score {
	font-weight: normal; /* Skoori stiil */
}

.b-c-2 {
        position: absolute; /* Lubab täpset positsioneerimist */
        right: 10px !important;
        top: 10px !important;
        outline: none !important;
	    box-shadow: none !important;
    }
    
.popover {
    --bs-popover-border-radius: 0 !important;    /* Kandilised nurgad */
    border-radius: 0 !important;                 /* Kandilised nurgad igaks juhuks */
    font-size: 1.1rem;                          /* Suurem font popoveris */
}
.popover .popover-body {
    line-height: 1.7;                           /* Ridade vahe suuremaks */
    padding: 1rem 1.25rem;                      /* Rohkem ruumi */
}
.popover .popover-header {
    font-size: 1.15rem;
    border-radius: 0 !important;
}
.popover .bi {
    font-size: 1.15em;
    margin-right: 5px;
}

.bi-telephone-fill, .bi-envelope-fill {
    color: #adb5bd !important; /* helehall Bootstrapis */
    transition: color 0.2s;
}
.bi-telephone-fill:hover, .bi-envelope-fill:hover {
    color: #495057 !important; /* tumehall hoveril */
    opacity: 1;
}
   

/* Desktop-vaate eristus */

@media (max-width: 992px) {
	
    /* Offcanvas sisu paigutus */
.offcanvas {
    transition: transform 0.3s ease-in-out; /* Sujuv liikumine */
    position: fixed; /* Fikseerib menüü akna suhtes */
    top: 123px !important; /* Nihutab menüü allapoole */
    bottom: auto !important; /* Välistab automaatse joondamise alumise servaga */
    height: auto !important; /* Kohandub sisu kõrgusega */
    max-height: calc(100vh - 123px) !important; /* Maksimaalne kõrgus jääb ekraani nähtava ala piiresse */
    overflow-y: auto !important; /* Lubab vertikaalse kerimise */
    width: 100%; /* Laius üle kogu ekraani */
    border-radius: 0; /* Eemaldab ümarad nurgad */
    z-index: 1050; /* Tagab nähtavuse */
    opacity: 0.95; /* Väike läbipaistvus */
}

/* Offcanvas keha */
.offcanvas-body {
    display: flex; /* Flexbox paigutus */
    flex-direction: column; /* Asetab elemendid vertikaalselt */
    justify-content: flex-start; /* Joondab elemendid üles */
    align-items: flex-start; /* Joondab elemendid vasakule */
    padding: 1rem; /* Lisab ruumi sisu ümber */
    overflow-y: auto; /* Lubab kerimise, kui sisu on suurem kui määratud kõrgus */
    height: auto; /* Kohandub sisu kõrgusega */
}

    /* Close nupu positsioon */
    .offcanvas-header .btn-close {
        position: absolute; /* Lubab täpset positsioneerimist */
        right: 38px; /* Kaugus paremast servast */
        top: 38px; /* Kaugus menüü päise ülaservast */
    }
    
   
	.btn-close:focus {
	    outline: none; /* Eemaldab sinise raami */
	    box-shadow: none; /* Eemaldab võimalikud varjud */
	}
    /* Menüü lingid */
    .offcanvas-body .nav-link {
        text-align: left; /* Joondab teksti vasakule */
    }
    
    .nav-link-2 {
	margin-top: 15px;
	margin-bottom: 6px;
	margin-left: 15px;
    display: block;
}

    .navbar-toggler {
        margin-left: auto; /* Toggler jääb paremale */
		/* display: none; */
    }
}

/* Mobiilivaate jaoks */
@media screen and (max-width: 768px) {
	
	    .pyramid-block {
                flex: 0 0 90%; /* Mobiilivaates täislaiuses */
                max-width: 100%; /* Mobiilivaates täislaiuses */
                margin: 20px 0 10px; /* Mobiilivaates lisatakse alumine vahe */
        }
	
	    .row2:nth-child(-n+3) .player-block {
            max-width: calc(100% / var(--columns, 3)) !important; /* Määrake ülemiste ridade veerud */
            flex: 1 1 calc(100% / var(--columns, 3)) !important;
        }

        .row2:nth-child(n+4) {
            flex-direction: column !important; /* Muudab read vertikaalseks */
        }

        .row2:nth-child(n+4) .player-block {
            max-width: 300px !important; /* Fikseeritud maksimaalne laius */
            width: 100% !important; /* Täidab kogu saadaoleva ruumi */
            margin: 5px auto !important; /* Keskenda kastid */
        }
        
        
    .top-head {
        display: flex; /* Muudab konteineri Flexboxiks */
        flex-direction: row; /* Kuvab elemendid kõrvuti */
        justify-content: center; /* Joondab elemendid horisontaalselt keskele */
        align-items: center; /* Joondab elemendid vertikaalselt keskele */
    }
    
    .top-head a {
    margin: 0 10px;
	}
	
	.top-head a svg {
    margin-right: 5px; /* Ruumi ikooni ja teksti vahel */
}

    /* Peidame soovimatud elemendid */
    .header-map-svg, .header-map-txt, /* Kaart */
    .header-tel-txt, /* Telefoni tekst */
    .header-email-txt { /* Emaili tekst */
    display: none;
    }

    /* Järjestame nähtavad elemendid */
    .top-head a:nth-child(1) { order: 2; } /* Telefon */
    .top-head a:nth-child(2) { order: 3; } /* Email */
    .top-head a:nth-child(3) { order: 1; } /* Kell */
    
    .navbar-toggler {
        margin-right: 25px; /* Toggler jääb paremale */
    }
    
    .row3 {
        padding-left: 10px;
    }
    
    .left-x1{	
	margin-left: -7px;	
	}
    
}


@media (max-width: 576px) {
	.modal .col-3 {
		flex: 0 0 48%; /* Väiksematel ekraanidel pooleks */
		max-width: 48%;
	}

	.modal .col-12 {
		margin-top: 15px;
	}
	
	.button-group {
		display: flex;
		justify-content: center; /* Nupud keskel */
		gap: 10px; /* Vahe horisontaalselt */
	}
	.button-group button {
		margin-bottom: 0; /* Eemaldame vertikaalse vahe suurematel ekraanidel */
	}		

}