/* TÁBLÁZAT FORMÁZÁS*/
.container_wrap {
    padding: 20px;
}

#table {
    border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
    margin-top: 10px;
}

#table th,
#tablesum th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #6a85ad;
    color: #c79a52;
    text-align: center;
    padding: 8px;
    border: 2px solid #6a85ad;
    border-radius: 5px;
}

#table td,
#tablesum td {
    border: 2px solid #6a85ad;
    border-radius: 5px;
    padding: 8px;
}

#datepicker {
    margin-bottom: 15px;
    padding: 5px;
    font-size: 14px;
}

#view-selector {
    margin-bottom: 15px;
    padding: 5px;
    font-size: 14px;
}


@media (max-width: 750px) {

    /*Canvas for pie chart */
    .pie-chart {
        flex: 0 0 20%;
        /* take 20% of container width */
        height: auto;
        /* maintain aspect ratio */
    }
}

/* BUTTON FORMÁZÁSA*/
.save-btn {
    background-color: #6a85ad;
    color: #c79a52;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
}

.save-btn.saved {
    background-color: #228b22;
    color: white;
}

/*BAR CHART*/
.bar-chart {
    width: 25% !important;
    height: 400px !important;
}

@media (max-width: 750px) {
    .bar-chart {
        width: 140px;
        height: 140px;
    }

    input {
        width: 80% !important;
        box-sizing: border-box;
        border: 2px solid #c79a52;
        border-radius: 5px;
        height: 30px;
    }

    select {
        width: 80% !important;
        box-sizing: border-box;
        border: 2px solid #c79a52;
        border-radius: 5px;
        height: 30px;
    }

}

/*BAR CHART CSOP és ALCSOP*/
.chart-box {
    width: 100%;
    max-width: 900px;
    height: 950px !important;
    margin: 20px auto;
    position: relative;
}

/* CSS for sliders Rogers */
#klAvg {
    color: rgb(106, 133, 173);
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
}

#tpAvg {
    color: rgb(106, 133, 173);
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
}

#kl_sliderek {
    display: flex;
    align-content: center;
    flex-direction: row;
    gap: 5%;
    justify-content: center;
}

.slider-group {
    width: 35%;
    border: 2px solid #6a85ad;
    padding: 2.5%;
    margin: 2.5%;
    border-radius: 5px;
    background-color: #bfb7f8;
}

.slider-group .h3 {
    text-align: center;
}

.slider-wrapper {
    margin-bottom: 28px;
}

.slider-wrapper input {
    width: 100%;
    appearance: none;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, #e53935, #fdd835, #43a047);
    outline: none;
}

.slider-wrapper input::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid #333;
    cursor: pointer;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.slider-labels span {
    width: 26px;
    height: 26px;
    background: #ddd;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    font-size: 12px;
    transition: 0.2s;
}

.slider-labels span.active {
    background: #4CAF50;
    color: white;
    font-weight: bold;
}

.slider-wrapper label {
    text-transform: none !important;
}

/* ÚJ CSS DS ADMIN*/

input {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #c79a52;
    border-radius: 5px;
    height: 30px;
}

select {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #c79a52;
    border-radius: 5px;
    height: 30px;
}

.block {
    width: 95%;
    position: relative;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    border: 2px solid #6a85ad;
    padding: 2.5%;
    margin: 2.5%;
    border-radius: 5px;
    background-color: #f9f9f9;
    overflow: hidden; /* a pseudo-element nem lóg ki */
}

.block2 {
    width: 95%;
    position: relative;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    border: 2px solid #6a85ad;
    padding: 2.5%;
    margin: 2.5%;
    border-radius: 5px;
    background-color: #bfb7f8;
    overflow: hidden; /* a pseudo-element nem lóg ki */
}

.block3 {
    width: 95%;
    position: relative;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    border: 2px solid #6a85ad;
    padding: 2.5%;
    margin: 2.5%;
    border-radius: 5px;
    background-color: #dcd8f7;
    overflow: hidden; /* a pseudo-element nem lóg ki */
}

/*Pseudo moving effect*/
.block > *, .block2 > *, .block3 > * {
  position: relative;
  z-index: 1; /* tartalom a részecskék fölött */
}

/* A Particles.js canvas teljesen lefedi a divet */
.particles-canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none;
}
/*Pseudo moving effect ends*/


h3 {
    color: #6a85ad;
    margin-bottom: 10px;
}

#table-container {
    width: 80vw;
    /* a képernyő 80%-a */
    max-height: 600px;
    /* maximum magasság */
    overflow: auto;
    /* görgetés minden irányban */
    border: 1px solid #ccc;
    /* opcionális keret */
}

#table {
    border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
    /* kitölti a konténert */
}

#summary {
    width: 80vw;
    /* a képernyő 80%-a */
    max-height: 600px;
    /* maximum magasság */
    overflow: auto;
    /* görgetés minden irányban */
    border: 1px solid #ccc;
    /* opcionális keret */
}

#tablesum {
    border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
    /* kitölti a konténert */
}

#table th {
    position: sticky;
    top: 0;
    background: #6a85ad;
    color: #c79a52;
    padding: 8px;
    border-radius: 5px;
}

#table td {
    border: 2px solid #6a85ad;
    padding: 8px;
    border-radius: 5px;
}

.save-btn {
    background: #6a85ad;
    color: #c79a52;
    margin-top: 15px;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}

/*AUTOCOMPLETE inputs*/
.autocomplete-box {

    position: absolute;
    background: white;
    border: 1px solid #6a85ad;
    max-height: 200px;
    overflow: auto;
    width: 200px;
    z-index: 10;

}

.autocomplete-box div {

    padding: 5px;
    cursor: pointer;

}

.autocomplete-box div:hover {

    background: #f0f0f0;

}


/*Loading spinner...*/
#loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-box {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #6a85ad;
  border-top: 4px solid #c79a52;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}