/* Näytetään sivun sisältö, kun initoinnit ja modaukset valmiina */
.js .fadein-on-page-ready {
    display: none;
}

#page_content_container {
    /*year-selectin positioinnin vuoksi*/
    position: relative;
}

.year-select-wrapper,
.quarterly-select-wrapper {
    /*border: 1px solid red;*/
    position: absolute;
    /*tätä ei käytetä vaan muuttujaa "var originalTop"*/
    top: 15px;
    right: 15px;
    width: 130px;
    z-index: 10;
}

.quarterly-select-wrapper {
    width: 200px;
}

    .year-select-wrapper select,
    .quarterly-select-wrapper select {
        padding: .8rem 1.8rem;
        min-width: 7rem;
        border: 0;
        background-color: #f5f2ec;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 2.5rem;
        background-size: 5rem;
        background-position: right
    }

body.learning-report .quarterly-select-wrapper select {
    text-transform: initial;
}

.bubble {
    right: 5px;
    top: 80px;
    position: absolute;
    z-index: 10000;
}

.bubble-text > h1 {
    color: red;
    font-size: 20px;
}

#ReturnFromPreviewBtn {
    width: 100px;
    height: 25px;
    font-size: 12px;
    padding: 0px;
    background-color: #6d328f;
}

.bubble-text {
    background: #f5f2ec;
    color: #fff;
    padding: 7px 15px;
    border-radius: 75px 75px;
    width: 220px;
    text-align: center;
}

/*	.bubble-text::after {
		content: "";
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 20px solid #139ee0;
		position: absolute;
	}*/


/* Pähkinänkuori-sivu: ei näytetä vuosivalintaa.*/
body.special-report .year-select-wrapper,
body.learning-report .year-select-wrapper,
body.quarterly-report .year-select-wrapper {
    display: none;
}

/* Pähkinänkuori-sivu: näytetään vuosivalinta debug-tilassa.*/
body.debug-mode-chart.special-report .year-select-wrapper,
body.debug-mode-chart.quarterly-report .year-select-wrapper {
    display: block;
}

.report-container {
    padding-bottom: 60px;
}

body.quarterly-report .report-container {
    padding-bottom: 10px;
}

/* tunnusväritys otsikoissa */
/*--*/
body.quarterly-report h2, body.quarterly-report h3 {
    color: #b79800;
}

body.learning-report h2, body.learning-report h3 {
    color: #6d328f;
}
/*--*/

/* kevyt vaakaerotin usealle raportille */
/* -- */
body.quarterly-report h2:before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: #ddd;
    margin-bottom: 45px;
    /* sama leveys kuin content-width-limit */
    max-width: 650px;
}

body.quarterly-report .report-container.first h2:before {
    display: none;
}
/* -- */

h2.chart-title {
    margin-top: 0.5em;
}

.table-title-wrapper h2 {
    margin-bottom: 0.5em;
}

h2.chart-title {
    margin-bottom: 0;
}

h3.chart-title {
    margin-bottom: 0;
    margin-top: 0;
}

h4.chart-title {
    margin-bottom: 0;
    margin-top: 0;
}

/*Myynti pähkinänkuoressa ei näytä ollenkaan otsikkoja taulukon yläp.*/
body.special-report .table-wrapper .chart-title {
    display: none;
}

.chart-container {
    height: auto;
    overflow: hidden;
    padding-bottom: 50px;
}

body.special-report .chart-container {
    padding-bottom: 5px;
}

.chart-canvas-container {
    /*huom! tässä overflow:hidden on tärkeä chart.js:n size-monitorin vuoksi*/
    overflow: hidden;
    width: 100%;
    /*
	* # maintainAspectRatio asettu falseksi, jotta kaaviot eivät kapene liikaa mobiilissa
	* Tähän liittyy myös chart-canvas-containerin responsiivinen korkeussäätö css:llä.
	* */
    /*height: 500px;*/
    height: 400px;
    /*background: #eee;*/
}

/* - Kustomoitu legend - */
.chart-custom-legend {
    /*piilossa, mutta otetaan esiin kapeassa näkymässä*/
    display: none;
}

.chart-container.filters-expanded .chart-custom-legend {
    display: none !important;
}

.chart-custom-legend ul {
    list-style: none;
    padding-left: 0;
}

    .chart-custom-legend ul li {
        margin: 0;
    }

.chart-custom-legend-item .label {
    font-size: 0.8em;
}

.chart-custom-legend-item .legend-bullet {
    display: inline-block;
    height: 17px;
    width: 17px;
    border-radius: 50%;
    margin-right: 4px;
    /*korjataan sijaintia hieman*/
    /*--*/
    position: relative;
    top: 4px;
    /*--*/
}
/* - Kustomoitu legend - : loppu */

.chart-footnote-container {
    color: #888;
    font-size: 0.8em;
}

.dynamic-graph-col {
    /*huom! tässä overflow:hidden on tärkeä chart.js:n size-monitorin vuoksi*/
    overflow: hidden;
    /*lisätty rajoitus graafin maksimileveyteen, koska korkeuttakaan ei kannata kasvattaa*/
    max-width: 700px;
}

/* fiksattu oikea palsta */
.fixed-side-col {
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    padding-left: 0;
    padding-right: 0;
    /*background-color: greenyellow;*/
}

.chart-filter-container {
}

    /* Piilotetaan saraketason filtterit, sillä niitä säädetään kaikille graafeille yhteisellä selectillä.*/
    .chart-filter-container > .col-filters-wrapper {
        display: none;
        margin-top: 0;
    }

/*debug: näytetään vuosi-filtterit*/
body.debug-mode-chart .chart-filter-container > .col-filters-wrapper {
    display: block;
    background: pink;
}

.chart-filter-container > .row-filters-wrapper {
}

.chart-container.filters-expanded .chart-filter-container > .row-filters-wrapper {
    display: block !important;
}

.chart-filter-container .row-filters-wrapper input,
.chart-filter-container .row-filters-wrapper label {
    font-size: 0.8em;
}

/*kesytetään bootstrapiin luokkaa hieman*/
.chart-filter-container .row-filters-wrapper .form-check {
    padding-left: 0;
    min-height: 0;
}

/*Sliderit*/
#firstCheckBox {
    /*	margin-left: 3.87rem;*/
}

.colsClass {
    /*	display: none !important;*/
}

div.table-wrapper > div:nth-child(3) > div {
    overflow-x: auto;
}

.switch {
    position: sticky;
    background-color: rgb(255, 255, 255);
    left: 24rem;
    display: inline-block;
    width: 50px;
    height: 28px;
    margin-left: 1.5rem;
    bottom: 0.3rem;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 105%;
    margin-left: 15px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 21.6px;
        width: 21.6px;
        left: 3.32px;
        bottom: 3.32px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #6d328f;
}

.slider:not(:focus) {
    outline: none;
}


input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(21.6px);
    -ms-transform: translateX(21.6px);
    transform: translateX(21.6px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

@media (max-width: 320px) {
    #firstCheckBox {
        margin-left: 1.5rem;
    }
}

@media (max-width: 340px) {
    .switch {
        left: 5vw;
    }
}

@media (max-width: 768px) {
    td[class^="daco-"]:not(.dontHide) {
        display: none;
    }

    th[class*=" daco-"]:not(.dontHide) {
        display: none;
    }

    th[class^="daco-"]:not(.dontHide) {
        display: none;
    }

    .colsClass {
        display: initial !important;
    }

    label.colsClass {
        display: inline-block !important;
    }

    /* kapeassa näkymässä graafiit matalammaksi */
    .chart-canvas-container {
        height: 300px;
    }

    .fixed-side-col {
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        padding-left: 15px;
        padding-right: 15px;
        /*background-color: red;*/
    }

    /* kapeassa näkymässä filtterit piiloon */
    .chart-filter-container {
        margin-left: 0;
        margin-top: 10px;
    }

        .chart-filter-container button {
            width: 100%;
            max-width: 370px;
        }

    .chart-container.filters-expanded .chart-filter-container {
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 15px;
    }

    .chart-filter-container .row-filters-wrapper {
    }

    /* ... ja alareunan legend otetaan esiin */
    .chart-custom-legend {
        display: block;
    }
}

.row-filters-wrapper .filter-level-0 {
    /*border: 1px solid blue;*/
}

.row-filters-wrapper .filter-level-1 {
    margin-left: 10px !important;
    /*border: 1px solid red;*/
}

.row-filters-wrapper .filter-level-2 {
    margin-left: 20px !important;
    /*border: 1px solid green;*/
}

.row-filters-wrapper .row-group.total-row {
    margin-bottom: 15px;
}

    .row-filters-wrapper .row-group.total-row .filter-level-0 {
        font-weight: bold;
    }

.row-filters-wrapper .form-check-input,
.row-filters-wrapper .form-check-label {
    cursor: pointer;
}

.row-filters-wrapper .form-check-input {
    border-color: #777;
    /*piilotetaan varsinaiset checkboxit*/
    /*display: none;*/
    /*saavutettavuuden vuoksi ei piiloteta täysin, vaan tehdään näkymättömiksi, jotta suodatuksia voi selata tab-näppäimellä*/
    visibility: visible !important;
    opacity: 0 !important;
}

    .row-filters-wrapper .form-check-input:checked {
        border-color: #666;
        background-color: #888;
    }

.row-filters-wrapper .legend-bullet-2 {
    display: inline-block;
    height: 17px;
    width: 17px;
    margin-right: 8px;
    /*korjataan sijaintia hieman*/
    /*--*/
    position: relative;
    top: 3px;
    /*--*/
    border-width: 1px;
    border-style: solid;
}

.row-filters-wrapper .form-check-input:not(:checked) + label .legend-bullet-2 {
    background: none !important;
    border-color: #888 !important;
}

/*saavutettavuus: suodatuksien selaaminen tab-näppäimellä*/
[data-whatinput=keyboard] .row-filters-wrapper .form-check-input:focus + label .legend-bullet-2 {
    border-color: #fff !important;
    border-width: 2px;
    outline: #4d4aff solid 2px;
}

.row-filters-wrapper .row-group.rg-active .filter-level-0 .form-check-label .legend-bullet-2:after,
.row-filters-wrapper .row-group .form-check.r-active .form-check-label .legend-bullet-2:after {
    content: '';
    display: block;
    height: 60%;
    width: 60%;
    margin: 20%;
    background: #444;
}

.expand-filters-btn {
    display: inline-block;
    width: 100%;
    color: #262626;
    font-weight: 300;
    text-decoration: none !important;
    margin-bottom: 10px;
}

    .expand-filters-btn:hover {
        text-decoration: none;
        color: #262626;
        cursor: pointer;
    }

    .expand-filters-btn:after {
        display: inline-block;
        content: '';
        /*https://icons.getbootstrap.com/icons/*/
        background-image: url(../Images/chevron-down.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 10px;
        height: 10px;
        margin-left: 10px;
    }

.chart-container.filters-expanded .expand-filters-btn:after {
    background-image: url(../Images/chevron-up.svg);
}

/*debug: korostetaan dataan poimittava solu*/
/*--*/
.ch-selected-on-populate {
    border: 1px solid purple;
    background-color: #f9e0ff !important;
}

.rh-selected-on-populate {
    border: 1px solid green;
    background-color: #d2fcd6 !important;
}

.rc-selected-on-populate {
    border: 1px solid red;
    background-color: #ffdede !important;
}

.rh-2-selected-on-populate {
    border: 1px solid blue;
    background-color: #d2eafc !important;
}

.rc-2-selected-on-populate {
    border: 1px solid orange;
    background-color: #fff7bb !important;
}

div > div.row.table-wrapper > div > div > div {
    overflow-x: auto;
}

/*merkataan, monesko "datapopulointi" on datan poiminut*/
.selected-on-populate-0:before {
    content: '[chart: 0]';
    margin: 0 5px;
    display: inline-block;
    font-weight: normal;
    color: #999;
}

.selected-on-populate-1:after {
    content: ' [chart: 1]';
    margin: 0 5px;
    display: inline-block;
    font-weight: normal;
    color: #999;
}
/*--*/