.themed-container {
    padding: 0.75rem;
    background-color: #92C9E4;
    border: 20px solid rgb(0 64 134 / 20%);
    border-radius: 35px;
    position: relative;
    left: -10%;
    width: 50%;
    margin-bottom: 20px;
}
.dark >  .title{
    font-size: 50px;
    color: #5D6D7E !important;

}


#toggle-dark-mode-btn:hover {
    background-color: #0056b3 !important;
    transform: translateY(-2px);
}
.inside {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}
#toggle-dark-mode-btn {
    background-color: #1e88e5 !important;
    font-size: 16px;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.dark .title {
    font-size: 28px; /* Větší nadpis */
    color: #f5f5f5; /* Velmi světlý odstín šedé pro kontrast */
}

.dark h6 {
    color: #cfcfcf; /* Méně výrazný text pro popisky */
}
.dark input, .dark select {
    background-color: #333333; /* Tmavé vstupní pole */
    color: #e0e0e0; /* Světlejší text */
    border: 1px solid #555555; /* Tmavší okraje */
}


div .low:after{
    margin-left: 0 !important;
    margin-top: 10Px !important;
  }

  div .high:after{
    margin-left: 0 !important;
    margin-top: 10Px !important;
  }
  
  div .average:after{
    margin-left: 0 !important;
    margin-top: 10Px !important;
  }


  div .unknown:after{
    margin-left: 0 !important;
    margin-top: 10Px !important;
  }
  

.tooltiptext{
    width: 40px;
    height: 40px;
    background-color: blue;
}
div .high:hover .tooltiptext {
  visibility: visible;
}
.btn-secondary{
    background-color: #0d6efd !important;
    color: white !important;
    margin: 20px;
}


.dark > .btn-secondary {
    color: white !important;
    margin: 20px;
}

.left{
    position: absolute;
    left: 80%;
}

.mainflex {
padding-right: 0;
}
.d-flex{
    align-items: center;
    flex-wrap: nowrap;
}

.list-group {
    width: 100%;
}
.d-flex.fixed-filters {
    display: flex;
    background-color: #f8f9fa !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 0 !important
}

label{
    font-size: 15px;
}

    .half{
        width:50% !important;
    }
    
  
.fixed-filters {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 10px;
    justify-content: space-between;
}
    
.title {
    font-size: 28px;
    color: #333333; /* Tmavší šedá pro nadpisy */
    font-weight: 600;
}

p, .inside {
    color: #666666; /* Světlejší šedá pro běžný text */
    font-size: 16px;
}
    .half{
        width:50% !important;
    }

    #colors> .btn-primary{
        width: 100% !important;
    }

    .active-filters{
    top: 8%;
    color: white;
   
    }
    

    .themed-container{
        width: 90%;
    }
    .half{
        font-size: 10px;
    }
    .full{
        font-size: 10px;
    }

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    background-color: DodgerBlue;
}

.flex-container > div {

    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}
@media only screen and (min-width: 285px) and (max-width: 1281px) { 
    #collapseFilters{
    left: -220%;
    width: 330% !important;
    }
     .table.table-sm {
            left: 10% !important;
            width: 75% !important
    }
 }
div .high:after{
    content: '';
    background: url(./images/arrow_up.svg);
    background-size: cover;
    position: absolute;
    width: 20px !important;
    height: 20px !important;
    margin-left: 120px;
    margin-top: -30px;
}

.btn-primary {
    margin: 10px !important;
    }
div .low:after{
    content: '';
    background: url(./images/arrow_down.svg);
    background-size: cover;
    position: absolute;
    width: 20px !important;
    height: 20px !important;
    margin-left: 120px;
    margin-top: -30px;
}


.carousel-inner img {
  margin: auto;
}
div .unknown:after{
    content: '';
    background: url(./images/question_mark.svg);
    background-size: cover;
    position: absolute;
    width: 80px !important;
    height: 80px !important;
    margin-left: 60px;
    margin-top: -35px;
}

div .average:after{
    content: '';
    background: url(./images/average.svg);
    background-size: cover;
    position: absolute;
    width: 20px !important;
    height: 20px !important;
    margin-left: 120px;
    margin-top: -30px;
}

.data-flex{
	display: flex;
	flex-direction: column;

}
#areamin{
    width: 70px;
}


#areamax{
    width: 70px;
}

#pricemin{
    width: 110px;
}

#pricemax{
    width: 110px;
}

.collapse .show{
    position: absolute;
    right: 0%;
    width: 50%;
}

.text-center{
    left: 0 !important;
    text-align: center;
}


.count-filtered{
    color: white;
    font-size: 23px;
    color: black;
}
.main-header{
    /* display: block; */
    width: 100%;
    padding-bottom: 40px;
    padding-top: 5px;
}



      .active-filters{
    padding-left: 10px;
    padding-right: 10px;
        color: black;
    }
#order option{
    font-size: 12px;
}
    .half label{
        position: relative;
        vertical-align: middle;
    }

input[type=checkbox] {
    vertical-align: middle;
}



.list-group-flush>.list-group-item {
        text-align: center;
}

.full{
    padding-bottom: 6px;
    width: 90%;
}


body.dark{
    background-color: #121212 !important; /* Skutečně tmavý odstín */
    color: #E0E0E0; /* Světle šedý text pro lepší čitelnost */
}
.dark > .main-header{
    color: #dedede !important;
}
.dark > .count-filtered{
    color: #dedede !important;
}
.dark > .active-filters{
    color: #dedede !important;
}

.dark > .fixed-filters{
    color: #dedede !important;
    background-color: #414a4c !important;
}


.dark > .fixed-filters{
    color: #dedede !important;
    background-color: #414a4c !important;
}

.dark  .list-group-flush{
    color: #dedede !important;
    background-color: #414a4c !important;
}

.dark .d-flex{
        color: #dedede !important;
            background-color: #28282B !important;

}

.dark .d-flex .header{
        color: #dedede !important;
    background-color: #28282B !important;
}

.dark > form{
   color: #dedede !important;
    background-color: #414a4c !important;
}

.dark table-layout: {
    color: #dedede !important;
    background-color: #414a4c !important;
}

.dark #collapseFilters .list-group-item{
    background-color: #28282B !important;
}
.dark #collapseFilters {
    background-color: #28282B !important;
}


.dark .list-group-item{
    color: #dedede !important;
}

.dark .btn-primary, .dark .header {
    background-color: #2196f3 !important; /* O něco světlejší modrá pro modernější vzhled */
    border-radius: 8px; /* Zjemníme hrany */
}
.dark .btn-primary:hover, .dark .btn-info:hover {
    background-color: #1e88e5 !important; /* Jemnější přechod při hoveru */
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.carousel.center{
    margin-left: calc(27%);
    padding-bottom: 1%;
}
.dark .footer{
    background-color: #414146!important;
    color: #dedede !important;
}
a {
    text-decoration: none !important;
    color:  #423b3b!important;
}
.dark a {
    text-decoration: none !important;
    color: #dedede!important;
}

.dark .card-body, .dark .themed-container {
    background-color: #181818 !important; /* Jemnější šedá pro lepší kontrast */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Jemnější stíny pro zlepšení hloubky */
}


.dark table {
    background-color: #1e1e1e !important;
    color: #e0e0e0;
}
.dark .list-group-item{
    background-color: #6c757d;
    border-color: #6c757d;
}
.d-block {
  width: auto;
  height: 160px;
  aspect-ratio: 1;
}


.list-group {
    padding-right: 20px;
    z-index: 10;
}
.dark .btn border{
    border-color: #6c757d; 
}
.dark .btn-primary {
  box-shadow: 0 0 0 #6c757d;
}


.dark .card-body table{
        color: #dedede !important;
    background-color: #414a4c;
}

.mainflex,  .title.text-center, .d-flex.fixed-filters{
    width: 33% !important;
    }

.dark .active-filters{
    color: #dedede !important;
}


.dark .count-filtered{
        color: #dedede !important;
}


.color-button{
    width: 20px;
    background-color: blue;
}

#colors> .btn-primary{

}

.btn-primary {
    background-color: #007bff !important; /* Jemná modrá */
    color: white !important;
    border: none;
    border-radius: 8px; /* Více zaoblené rohy */
    font-size: 16px; /* Větší písmo */
    margin-right: 10px; /* Trochu mezery mezi tlačítky */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Jemné animace */
}

.btn-primary:hover {
    background-color: #0056b3 !important;
    transform: translateY(-2px); /* Vizuální efekt hoveru */
}
h1, h2, h3 {
    font-weight: 600;
    color: #333333; /* Tmavší barvy nadpisů */
    margin-bottom: 15px;
}

.copyright-bar{
	background-color: #f8f9fa !important;
}
p, .price {
    font-size: 16px;
    color: #666666;
}

.price {
    font-weight: bold;
    color: #e74c3c; /* Červená barva pro ceny */
}

#toggle-dark-mode-btn{
    margin-left: 20px;
 }
.dark p, .dark .price {
    font-size: 16px;
    color: #666666;
}

.dark h2{
color: #f5f5f5;

}
.dark .price {
    font-weight: bold;
    color: #e74c3c; /* Červená barva pro ceny */
}

.subtitle {
    font-size: 18px;
    color: #333333;
    margin-bottom: 10px;
}

.btn-primary:hover {
    background-color: #0056b3 !important; /* Trochu tmavší odstín při hoveru */
}
.dark .text-dark{
    color: black !important;
}

.dark .error{
    color: #dedede !important;
}

.dark .copyright-bar{
    background-color: #495057 !important;
}

.dark .copyright-text{
    color: #dedede !important;
}

.dark .copyright-text a{
    color: #dedede !important;
}

.d-flex.p-2{
	padding: 0 !important
}

.list-group-item{
	
}
.customtooltip{
	
    display: block;
    position: absolute;
    font-size: 10px;
   
    width: 200px;
    padding: 10px;
    margin: 10px;
    position: absolute;
    text-align: center;
    background-color: white;
    color: black;
}



.hidden{
		display: none !important;
	}
	
.title  {
    margin: 10px;
     }
/* desktop */
@media only screen and (min-width: 1281px) {

    .themed-container{
        width: 60%;
    }


.d-block {
    width: 500px !important;
    height: 500px !important;
    object-fit: fill;
}


div.high{
    width:40px;
    display:inline-block;
    position: absolute;
    height:20px;
    color:white;
    text-decoration:none;
}


.mainflex {

padding-left: 30px;padding-right: 70px;
}
div.unknown{
    width:40px;
    display:inline-block;
    position: absolute;
    height:20px;
    color:white;
    text-decoration:none;
}

.inside{
    color: black;
    margin-left: 320px;
}

.dark .inside{
    color: white;
}
div.high:after{
    content: '';
    background:url('./images/arrow_up.svg');
    background-size:cover;
        position: absolute !important;
    width:80px !important;
    height:80px !important;
    margin-left: 320px !important;
    margin-top: 40px !important;
}

div.low{
    width: 40px !important;
    display: inline-block;
    position: absolute;
    height: 20px !important;
    color:white;
    text-decoration:none;
}
div.low:after{
    content: '';
    background:url('./images/arrow_down.svg');
    background-size:cover;
        position:absolute;
    width: 80px !important;
    height:80px !important;
    margin-left:320px !important;
    margin-top: 30px !important;
}

div.unknown{
    width: 40px !important;
    display: inline-block;
    position: absolute;
    height: 20px !important;
    color:white;
    text-decoration:none;
}
div.unknown:after{
    content: '';
    background:url('./images/question_mark.svg');
    background-size:cover;
        position:absolute;
    width: 160px !important;
    height:160px !important;
    margin-left:240px !important;
    margin-top: 30px !important;
}

div.average{
    width:40px;
    display:inline-block;
    position: absolute;
    height:20px;
    color:white;
    text-decoration:none;
}
div.average:after{
    content: '';
    background:url('./images/average.svg');
    background-size:cover;
        position: absolute !important;
    width:80px !important;
    height:80px !important;
    margin-left: 300px !important;
    margin-top: 50px !important;
}

    .myFlex{
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 50px;
    }
    #colors> .btn-primary {
        width: 20% !important;
    }
    .fixed-filters{
        width: 40% !important;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
    }
.themed-container {
    background-color: #ffffff; /* Světlé karty */
    border: 1px solid #e0e0e0; /* Jemné ohraničení */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Jemný stín pro hloubku */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.half{
    width:33.333% !important;
    padding-bottom: 6px;
}
.flex-container {
    display: flex;
    flex-wrap: nowrap;
    background-color: DodgerBlue;
}

.flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

body {
    background-color: #f4f6f9 !important;
}

.container {
    max-width: 1200px;
    margin: auto;
}
.black{
  background-color: #414a4c !important;
}

/* tablet */

@media only screen and (min-width: 768px) and (max-width: 1281px) { 
div .high:after{

content: '';
    background: url(./images/arrow_up.svg);
    background-size: cover;
    position: absolute;
    width: 80px !important;
    height: 80px !important;
    margin-left: 200px !important;
    margin-top: 0px !important;
}


div .low:after{
    content: '';
    background: url(./images/arrow_down.svg);
    background-size: cover;
    position: absolute;
    width: 80px !important;
    height: 80px !important;
    margin-left: 200px !important;
    margin-top: 0px !important;
}

div .unknown:after{
    content: '';
    background: url(./images/question_mark.svg);
    background-size: cover;
    position: absolute;
    width: 80px !important;
    height: 80px !important;
    margin-left: 200px !important;
    margin-top: 0px !important;
}

div .unknown:average{
    content: '';
    background: url(./images/question_mark.svg);
    background-size: cover;
    position: absolute;
    width: 80px !important;
    height: 80px !important;
    margin-left: 200px !important;
    margin-top: 0px !important;
}

.inside{
    margin-left: 220px;
}
.list-group {
        padding-left: 70px;
        }

.collapse{
        left: 0% !important;
    width: 100% !important;
    }

}