/* Minification failed. Returning unminified contents.
(1743,23): run-time error CSS1030: Expected identifier, found '.'
(1743,50): run-time error CSS1031: Expected selector, found ')'
(1743,50): run-time error CSS1025: Expected comma or open brace, found ')'
(2489,16): run-time error CSS1030: Expected identifier, found '.'
(2489,27): run-time error CSS1031: Expected selector, found ')'
(2489,27): run-time error CSS1025: Expected comma or open brace, found ')'
(2943,32): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(3421,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3422,33): run-time error CSS1039: Token not allowed after unary operator: '-tile'
(3431,20): run-time error CSS1039: Token not allowed after unary operator: '-tile-bg'
(3496,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3498,15): run-time error CSS1039: Token not allowed after unary operator: '-pack'
(3513,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3514,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3517,41): run-time error CSS1039: Token not allowed after unary operator: '-cell'
(3518,38): run-time error CSS1039: Token not allowed after unary operator: '-cell'
(3519,13): run-time error CSS1039: Token not allowed after unary operator: '-gap'
(3524,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3601,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3602,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3603,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3604,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3605,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3607,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3608,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3609,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3611,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3612,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3614,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3615,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3626,20): run-time error CSS1039: Token not allowed after unary operator: '-btn-corner-bg'
(3628,20): run-time error CSS1039: Token not allowed after unary operator: '-btn-shadow'
(3631,46): run-time error CSS1039: Token not allowed after unary operator: '-btn-corner-bg-hover'
(3633,60): run-time error CSS1039: Token not allowed after unary operator: '-btn-focus'
(3644,15): run-time error CSS1039: Token not allowed after unary operator: '-btn-diam'
(3645,16): run-time error CSS1039: Token not allowed after unary operator: '-btn-diam'
(3646,23): run-time error CSS1039: Token not allowed after unary operator: '-btn-radius-pill'
(3649,15): run-time error CSS1039: Token not allowed after unary operator: '-btn-text'
(3650,20): run-time error CSS1039: Token not allowed after unary operator: '-btn-shadow'
(3657,24): run-time error CSS1039: Token not allowed after unary operator: '-btn-diam'
(3664,33): run-time error CSS1039: Token not allowed after unary operator: '-btn-ok'
(3665,39): run-time error CSS1039: Token not allowed after unary operator: '-btn-ok-hover'
(3666,32): run-time error CSS1039: Token not allowed after unary operator: '-btn-cancel'
(3667,38): run-time error CSS1039: Token not allowed after unary operator: '-btn-cancel-hover'
(3673,27): run-time error CSS1031: Expected selector, found ';'
(3673,27): run-time error CSS1025: Expected comma or open brace, found ';'
(3673,28): run-time error CSS1019: Unexpected token, found '{'
(3674,11): run-time error CSS1030: Expected identifier, found '2px'
(3674,11): run-time error CSS1031: Expected selector, found '2px'
(3674,11): run-time error CSS1025: Expected comma or open brace, found '2px'
(3674,59): run-time error CSS1030: Expected identifier, found '2px'
(3674,59): run-time error CSS1031: Expected selector, found '2px'
(3674,59): run-time error CSS1025: Expected comma or open brace, found '2px'
(3691,53): run-time error CSS1039: Token not allowed after unary operator: '-btn-shadow'
(3758,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3759,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3760,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3761,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3762,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3764,16): run-time error CSS1039: Token not allowed after unary operator: '-ubtn-diam'
(3764,33): run-time error CSS1039: Token not allowed after unary operator: '-diam'
(3765,16): run-time error CSS1039: Token not allowed after unary operator: '-ubtn-diam'
(3765,33): run-time error CSS1039: Token not allowed after unary operator: '-diam'
(3773,23): run-time error CSS1039: Token not allowed after unary operator: '-ubtn-diam'
(3773,40): run-time error CSS1039: Token not allowed after unary operator: '-diam'
(3776,15): run-time error CSS1039: Token not allowed after unary operator: '-fg-off'
(3777,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-off'
(3799,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3800,23): run-time error CSS1039: Token not allowed after unary operator: '-ubtn-radius'
(3811,20): run-time error CSS1039: Token not allowed after unary operator: '-on'
(3812,15): run-time error CSS1039: Token not allowed after unary operator: '-fg-on'
(3815,20): run-time error CSS1039: Token not allowed after unary operator: '-ring'
(3829,20): run-time error CSS1039: Token not allowed after unary operator: '-ring'
(3844,17): run-time error CSS1039: Token not allowed after unary operator: '-glyph'
(3851,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3852,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3853,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3859,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3860,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3861,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3862,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3863,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3864,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3870,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3870,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3871,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3871,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3872,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3872,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3873,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3873,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3874,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3874,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3876,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3876,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3877,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3877,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3878,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3878,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3879,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3879,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3880,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3880,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3882,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3882,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3884,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3884,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3885,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3885,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3901,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3905,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3915,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3916,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3917,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3918,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3923,13): run-time error CSS1039: Token not allowed after unary operator: '-btnpanel-gap'
(3929,13): run-time error CSS1039: Token not allowed after unary operator: '-btnpanel-edge'
(3930,15): run-time error CSS1039: Token not allowed after unary operator: '-btnpanel-edge'
(3938,16): run-time error CSS1039: Token not allowed after unary operator: '-btnpanel-edge'
(3949,17): run-time error CSS1039: Token not allowed after unary operator: '-btnpanel-pad'
(3956,15): run-time error CSS1039: Token not allowed after unary operator: '-ubtn-diam'
(3957,16): run-time error CSS1039: Token not allowed after unary operator: '-ubtn-diam'
(3961,21): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3961,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3961,61): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
/*
    Kõik süsteemis kasutatavad stiilid
    Püüan jõudumööda kommentaarid lisada
*/

svg path, svg line {
    stroke: black;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;

    stroke-linecap: round;

}

/* kalendri itemite ja filtrinuppude stiilid */


.nupp {
    background-color: #1c87c9;
    border: none;
    color: white;
    padding: 1em 1em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*font-size: 20px;*/
    margin: 4px 2px;
    cursor: pointer;
}

.samakuu {
    background-color: lightgray;
}

.samaaasta {
    background-color: gray;
}
/*itemite klassid*/
.meeting-old {
    background-color: antiquewhite;
}

.birthday-old {
    background-color: aquamarine;
}

.birthday, .f-birthday {
    background-color: #ffeb3b; /* Kollane värv */
    color: #000; /* Must tekst */
}

.no-birthday .birthday {
    display: none;
}
.no-MMM .MMM {
    display: none;
}

.no-ESL .ESL {
    display: none;
}

.no-RAM .RAM {
    display: none;
}

.no-RA .RA {
    display: none;
}

.no-CPR .CPR {
    display: none;
}

.no-RC .RC {
    display: none;
}

.no-ROS .ROS {
    display: none;
}

.no-TR .TR {
    display: none;
}

.no-RSM .RSM {
    display: none;
}

.no-Meeting .Meeting {
    display: none;
}


.filter-open,
.filter-button {
    border: 1px solid #000; /* Must raam */
    width: 100%;
    position: relative;
    padding-right: 20px; /* Jätame ruumi ikoonile */
    display:flex;
}

.filter-button.no-active {
    background-color: #e0e0e0; /* Hall värv */
    color: #757575; /* Tumehall tekst */
    border: 1px solid #757575; /* Tumehall raam */
}

    .filter-button::after {
        content: "\2713"; /* Unicode'i checked märk (✓) */
        position: absolute;
        right: 5px; /* Paigutame ikooni nupu paremasse otsa */
        font-size: 1em; /* Sobiv suurus */
        color: green; /* Värv */
    }

.no-active.filter-button::after {
    content: "\2717"; /* Unicode'i nonchecked märk (✗) */
    color: red; /* Värv */
}

/* need lisasin veel, et saaks nupu nime muuta */
.filter-button .filter-active {
    /* visibility: hidden; /**/
    display: none;
 }

.filter-button:not(.no-active) .filter-active {
    /* visibility: visible; /**/
    display: inline;
}

/* Näita "filter-noactive" sisu, kui nupp on mitteaktiivne */
.filter-button .filter-noactive {
    /* visibility: hidden; /**/
    display: none;
}

.filter-button.no-active .filter-noactive {
    /* visibility: visible; /**/
    display: inline;
}

.MMM, .f-MMM {
    background-color: green;
    color: white;
}

.ESL, .f-ESL {
    background-color: blue;
    color: white;
}

.RAM, .f-RAM {
    background-color: burlywood;
    color: black;
}

.RA, .f-RA {
    background-color: coral;
    color: black;
}

.CPR, .f-CPR {
    background-color: chartreuse;
    color: black;
}

.RC, .f-RC {
    background-color: crimson;
    color: white;
}

.ROS, .f-ROS {
    background-color: cyan;
    color: black;
}

.TR, .f-TR {
    background-color: darkgrey;
    color: white;
}

.RSM, .f-RSM {
    background-color: firebrick;
    color: white;
}
.no-Tallinn .Tallinn {
    display: none;
}

.no-Tartu .Tartu {
    display: none;
}

.no-Rakvere .Rakvere {
    display: none;
}

.no-Viljandi .Viljandi {
    display: none;
}

.no-Haapsalu .Haapsalu {
    display: none;
}

.no-Pärnu .Pärnu {
    display: none;
}
.no-all .all {
    display: none;
}
.no-oma .oma {
    display: none;
}



/* siin lõpeb filtrinuppude loogika*/

.grid-container {
    display: grid;
    grid-template-columns: repeat(7, 14% );
    gap: 5px;
    background-color: white;
    color: darkblue;
    padding: 5px;
}

    .grid-container > div {
        /*background-color: rgba(255, 255, 255, 0.8);*/
        text-align: center;
        vertical-align: top;
        padding: 10px 0;
        font-size: 12px;
    }

.item1 {
    background-color: gray;
    color: azure;
}

.item2 {
    background-color: lightgray;
}

.item3 {
    /*        grid-row: 3; */
    min-height: 5em;
    background-color: lightblue;
}

.item3 p {
    padding-top:0;
    padding-bottom: 0;
    margin:1px;
}

.nodate {
    background-color: gray;
}
.item2.today,
.item3.today {
    background-color: lightgreen;
}

.item3.today.nodate {
    background-color: darkgreen;
}

.item2.holiday,
.item3.holiday {
    background-color: lightcoral;
}

item3.holiday.nodate {
    background-color: brown;
}


.item4 {
    grid-column: span 2;
}


/*---------*/
.nupp {
    background-color: #1c87c9;
    border: none;
    color: white;
    padding: 1em 1em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*font-size: 20px;*/
    margin: 4px 2px;
    cursor: pointer;
}

.samayx {
    background-color: lightgray;
}

.minu-nupp {
    position: relative;
}

.omalooz {
    /*background-color: greenyellow;*/
}

    .omalooz:after {
        position: absolute;
        top: 8px;
        left: 8px;
        height: 10px;
        width: 10px;
        background: greenyellow;
        content: "";
        border-radius: 5px;
    }

.btn-antique {
    background-color: whitesmoke;
}

.form-control[readonly] {
    background-color: burlywood;
}

.form-control[disabled] {
    background-color: burlywood;
}

.hs-button-hidden {
    display: none;
}

.hs-button-visible {
    display: inline-block; /* või muu sobiv väärtus */
}

* {
    box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.hs-column {
    float: left;
    width: 30%;
    padding: 10px;
    background-color: #ccc;
}

/* see on, et saaks kahe veeru laiuse veeru */
.hs-columnw {
    width: 66%;
    background-color: #ccc;
}

.hs-columnd {
    width: 4%;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.hs-sort-button {
    background-color: #ccc;
    width: 100%;
}

.button-container button,
.button-container select {
    margin-right: 8px; /* Muuda vastavalt soovile */
    margin-bottom: 4px;
}



.hs-rida-title-nupp {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hs-rida-title {
    margin-right: auto;
}

.hs-rida-nupp {
    margin-left: auto;
}

.hall-nupp {
    opacity: 0.5;
    background-color: greenyellow;
}

.error-nupp {
    background-color: red;
}

.hs-toggle {
    /*background-color: aquamarine;*/
}

.hs-toggle-hidden {
    display: none;
}

/* nimeblokkide stiilid*/
/* Kohanda soovituste stiilid siin */
.autocomplete-input::placeholder {
    color: gray; /* Värv */
    font-style: italic; /* Kaldkirjas */
    display: none;
}

.autocomplete-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.autocomplete-dropdown {
    border: 1px solid #ccc; /* Piirjoon */
    background-color: #fff; /* Taustavärv */
    position: absolute;
    width: inherit;
    /*   max-height: 150px;  Maksimaalne kõrgus */
    overflow-y: auto; /* Kerimisriba lisamine vajadusel */
    z-index: 1000;
    display: none; /* Alguses peidetud */
    top: 100%;
    left: 0;
}

    .autocomplete-dropdown:focus-within {
        max-height: 200px;
    }

.autocomplete-item {
    padding: 8px;
    cursor: pointer;
}

    .autocomplete-item.hidden {
        display: none;
    }

    .autocomplete-item.selected {
        background-color: #f1f1f1; /*#007bff;*/ /* Näide: valitud elemendi taustavärv */
        /*color: #ffffff;*/ /* Näide: valitud elemendi tekstivärv */
    }

    .autocomplete-item:hover {
        background-color: #f1f1f1; /* Hoveri taustavärv */
    }

::placeholder {
    color: white;
    display: none;
}

input:focus::placeholder {
    color: white;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding-top: 14px; /* Kui ülemine menüü on olemas, muuda see vastavalt ülemise menüü kõrgusele */
    /*height: 75vh;*/
    width: 10%;
}

.sidebar-full {
    height: 75vh;
}

.sidebar-short {
    height: 60px;
}

.notification-item {
    animation: slide-down 0.5s ease;
}

@keyframes slide-down {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.my-right-sidebar {
    position: fixed;
    top: 0px;
    right: 10px;
    height: 75vh;
    overflow-y: auto; /* võimaldab kerimist, kui sidebar on pikem kui akna kõrgus */
    background-color: antiquewhite; /*#f8f9fa;  võib olla sinu taustavärv */
    border-left: 5px solid #e1e1e1; /* võib lisada piirjoone paremale, et eraldada peamine sisu ja sidebar */
    width: 15%;
    margin-top: 10px; /* Võib olla vähem või rohkem vastavalt soovile */
    margin-left: 0px;
}

.my-right-sidebar-collaps {
    position: fixed;
    top: 10px;
    right: 10px;
}

.notification-log {
    margin-top: 10px; /* Võib olla vähem või rohkem vastavalt soovile */
    margin-left: 10px;
}

.clear-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    cursor: pointer;
    color: red;
    font-weight: bold;
}

.vh-60 {
    height: 60vh;
}

.accordion-item {
    /*max-height: 60vh; /* Maksimaalne kõrgus 60vh */
    overflow-y: auto; /* Lubab kerimisriba, kui sisu ületab määratud kõrguse */
}

.form-control {
    /*min-width: 100%;*/
}

.autocomplete-buttons {
    display: grid;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0px;
}

.autocomplete-button {
    padding: 0;
}

.i-button {
    position: relative; /* Tagame, et ikooni positsioon oleks suhteline selle nupu suhtes */
    padding-right: 20px; /* Tagame, et ikoonile oleks piisavalt ruumi */
}

    .i-button i {
        position: absolute; /* Määrame ikooni absoluutse positsiooni */
        top: 0; /* Paigutame ikooni nupu ülemisse äärde */
        right: 0; /* Paigutame ikooni nupu paremale äärele */
    }

.if-mid-0[data-mid='0'] {
    display: none;
}

.repeat-0 {
    display: none;
}

.box {
    position: absolute;
    /*background-color: antiquewhite;*/
 
}

.box.c {
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}

    .box.brd {
        border: 1px solid !important;
    }


.page {
    position: relative;
    height: 98vh;
    margin: 0 auto;
    font-size: 1.5vh;
    display: flex;
    flex-direction: row;
    page-break-inside: avoid; /* Vältida lehekülje murdmist .page elemendi sees */
    border: 1px solid !important;
}

.printarea {
}

.page * {
    font-size: inherit;
}


.half {
    position: relative;
    flex: 1; /* Kasutame flex-grow, et .half elemendid täidaksid saadaval oleva ruumi */
    display: flex; /* Muudame .half elemendi ka flex konteineriks */
    flex-direction: column; /* Jagame .half elemendi vertikaalselt */
    overflow: hidden; /* Vältimaks horisontaalset kerimisriba .half elemendi sees */
    border: 1px solid !important;
}

/*@media print {
    body {
        margin: 0;
        padding: 0;
        font-size: unset;
    }

    .page {
        margin: 0;
        padding: 0;
        max-width: none;
        width: 100%;
        height: 99vh;*/ /*100%;*/
        /*page-break-inside: avoid;*/ /* Vältida lehekülje murdmist .page elemendi sees */
    /*}

    .box {
        border: 0;
    }

    #editarea {
        display: none;
    }
}*/

.joon {
    display: block;
    width: 100%;
    height: 1px; /* Võite muuta kõrgust vastavalt soovile */
    background-color: black; /* Võite muuta joone värvi vastavalt soovile */
    margin: 0.5rem 0; /* Võite muuta marginaali vastavalt soovile */
    border: none; /* Eemaldab vaikepiirjoone */
}

/*need on fa-aliased*/
.fh-confirmed:before {
    content: '\f046'; /*check-square-o*/
}
.fh-none:before {
    content: '\f096'; /*square-o*/
}
.fh-cancelled:before {
    content:  '\f2d3' /*windoww-close on parem kui '\f147'; minus-square-o*/
}
.fh-dirty:before {
    content: '\f0c8'; /*square*/
}
td.ftext-none {

}
.ftext-cancelled {
    text-decoration: line-through;
}
.ftext-confirmed {
    font-weight:bold;
}
.ftext-dirty {
    background-color: #333;
    color:#fff;
}
.ftext-dirty button {
    background-color: transparent;
    color: inherit;
}
.td-disabled {
    background-color: lightgray;
}

.nav-item {
    position: relative;
}

/* Esialgne stiil, kus ikoon on peidetud */
.nav-link .fa-download,
.nav-link .fa-refresh,
.nav-link .fa-print {
    display: none;
    margin-left: 8px;
}

/* Stiil, kus ikoon on nähtav ainult aktiivse nupu korral */
.nav-link.active .fa-download,
.nav-link.active .fa-refresh,
.nav-link.active .fa-print {
    display: inline-block;
    margin-left: 8px;
}

/* stiilid, et index-right ja index-left read oleks sama kõrgusega */
/* Define the default row height */
.responsive-row {
    height: 50px; /* Adjust as needed */
}

/* Ensure the button and its contents fit within the row height */
.custom-button {
    height: 100%; /* Make the button fill the row height */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the content */
}

/* Ensure that the td content does not overflow */
.responsive-row td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* Optionally, show ellipsis for overflow text */
}

/* Media query to remove <i> on smaller screens */
@media (max-width: 600px) {
    .responsive-row .icon {
        display: none;
    }
}

/*need olid enne IndexLeft lehel*/
.custom-button {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.custom-button i {
    position: absolute;
    left: 5px;
}

.custom-button span {
    flex: 1; /* Jääb ülejäänud ruum */
    margin-left: 50px;
    text-align: left;
}
/* see juhib nupu jälgimist */
.custom-button-selected {
    /* aktiivne nupp */
    background-color: #007bff;
    color: #fff;
}

.custom-button::after {
    /* ikoon kõigil nuppudel */
    content: ">";
    display: none; /* vaikimisi peidetud */
    position: absolute;
    right: 10px; /* positsioneerime paremale serva */
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: inherit; /* võtab teksti värvi */
}

.custom-button-selected::after {
    /* ikoon aktiivsel nupul */
    display: inline; /* näitame ikooni */
}

/*selle lisan tabelidade värvimiseks*/
.new-row {
    background-color: lightgreen !important;
}

.old-row {
    background-color: darkgray !important;
}

.loading-indicator {
    position: absolute;
    /*top: 50%;*/
    /*left: 50%;*/
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(161, 44, 18, 0.7);
    /*background-color: rgba(0, 0, 0, 0.7);*/
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 1000; /* Veendu, et indikaator on teistest elementidest kõrgemal */
}

.hs-button-modal {
    position:relative;
}

.btn-w {
    width: 100%;
    position: relative;
}

i.rem-role,
i.show-rows {
    position: absolute;
    top: 5px;
    right: 5px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    position: sticky;
    top: 0;
    background-color: white; /* Soovitatav taustavärv */
    z-index: 1; /* Veendu, et thead on alati pealpool */
}

th {
    text-align: center;
}

.upload-file-btn.drag-over {
    border: 2px dashed #007bff;
    background-color: #f8f9fa;
    color: #007bff;
}

/* Kõikidele help-body-* ja help-xa ning help-xs kombinatsioonidele vaikimisi display: none */
.help-body-null .help-xa,
.help-body- .help-xa,
.help-body-xs .help-xa,
.help-body-null .help-xs,
.help-body- .help-xs {
  display: none;
}

/* Konkreetsete help-body-* ja help-xa ning help-xs kombinatsioonide display: block */
.help-body-xa .help-xa,
.help-body-xa .help-xs,
.help-body-xs .help-xs {
  display: flex;
}

.help-container {
    position: relative; /* Loo kontekst absoluutsele positsioneerimisele */
}

.help-edit-buttons {
    position: absolute; /* Määra absoluutne positsioneerimine */
    top: 0; /* Positsioneeri konteineri ülemisse serva */
    right: 0; /* Positsioneeri konteineri paremasse serva */
    display: flex; /* Kasuta flexboxi, et joondada nupud kõrvuti */
    gap: 10px; /* Lisa vahe nuppude vahele */
    margin: 10px; /* Vajadusel lisa veidi marginaali */
    z-index: 10; /* Tagab, et konteiner on eespool teistest elementidest */
}

.help-edit-buttons button {
    /* Lisa stiilid nuppudele, kui vaja */
}

/*.help-refresh {
    position: absolute;*/ /* Määra absoluutne positsioneerimine */
    /*top: 0;*/ /* Positsioneeri nupu ülemisse serva */
    /*right: 0;*/ /* Positsioneeri nupu paremasse serva */
    /*margin: 10px;*/ /* Vajadusel lisa veidi marginaali */
    /*z-index: 10;*/ /* Tagab, et nupp on eespool teistest elementidest */
    
/*}

.edit-switch {
    position: absolute;*/ /* Määra absoluutne positsioneerimine */
    /*top: 0;*/ /* Positsioneeri nupu ülemisse serva */
    /*right: 0;*/ /* Positsioneeri nupu paremasse serva */
    /*margin: 30px;*/ /* Vajadusel lisa veidi marginaali */
    /*z-index: 10;*/ /* Tagab, et nupp on eespool teistest elementidest */
/*}*/

.help-icon {
    display: inline-block; /* Veendub, et nupp on teksti sees */
    padding: 0; /* Eemaldab täiendava padja */
    margin: 0 5px; /* Lisab veidi ruumi nupu ümber */
    font-size: inherit; /* Sobitub teksti suurusega */
    vertical-align: middle; /* Joondab nupu vertikaalselt keskele */
}

#paste-area {
    border: 2px dashed #ccc;
    cursor: pointer;
}

@media (max-width: 768px) {
    #img-empty {
        display: none;
    }

    #paste-area {
        opacity: 1;
    }
}

.help-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px; /* Lisa vahe pildi ja järgmise elemendi vahele */
}

@font-face {
    font-family: 'vinkel';
    src: url('/Content/fonts/vinkel.eot?jx4pvt');
    src: url('/Content/fonts/vinkel.eot?jx4pvt#iefix') format('embedded-opentype'), 
        url('/Content/fonts/vinkel.ttf?jx4pvt') format('truetype'), 
        url('/Content/fonts/vinkel.woff?jx4pvt') format('woff'), 
        url('/Content/fonts/vinkel.svg?jx4pvt#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


/* Tagab, et form-check-input võtab kogu ruumi */
.form-control.form-check-input {
    width: auto; /* Kontrollige, et laius ei piiraks ruumi */
    height: auto; /* Sama kõrguse jaoks */
    display: inline-block; /* Järjepidev joondamine */
    margin-right: 0.5rem; /* Ruumi lisamine labeli ja checkboxi vahele */
    vertical-align: middle; /* Vertikaalne joondamine */
}

.form-control-wrapper {
    display: flex; /* Flexbox paigutus */
    align-items: center; /* Vertikaalne joondamine */
}

    .form-control-wrapper .form-check-label {
        margin-bottom: 0; /* Eemaldab labeli all oleva margini */
        flex: 1; /* Võtab ülejäänud ruumi */
    }

/* Stiil */
tbody.rows-hidden tr.hidden-row {
    display: none;
}

.closed-doors {
    display: none;
}


/* siit stiilid, mis seotud rulluva vinkliga */


.position-relative {
    position: relative;
}

.collapsible-content {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-out;
    background-color: #f1f1f1;
    padding: 0 10px;
    margin-top: 10px; /* Vahe vinkli ikoonist */
    position: absolute; /* Tagab, et see ei mõjuta teisi elemente */
    left: 50%; /* Keskne positsioon */
    transform: translateX(-50%); /* Keskne positsioon */
    z-index: 500; /* Vajadusel reguleeri */
    border: none; /* Alguses ilma raamita */
}

    .collapsible-content.active {
        padding: 10px; /* Lisame padding kui avatud */
        border: 1px solid #ccc; /* Lisame raami kui avatud */
        border-radius: 5px; /* Veidi ümarad nurgad kui avatud */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Lisame varju kui avatud */
    }

/* vinkel päisega seotud stiilid */

.vinkel-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .vinkel-container .center {
        margin: 0 10px; /* Vahemaa keskmise sümboli ja teiste elementide vahel */
    }

.vinkel-end, .vinkel-start, .vinkel-center {
    font-family: vinkel;
}

[class^="vinkel-icon-"], [class*=" vinkel-icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'vinkel' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vinkel-icon-vinkel:before {
    content: "\bf";
}


.vinkel-toggle{
    cursor: pointer;
    transition: transform 0.5s ease-out; /* Lisame transform transition */
}

.vinkel-flipped {
    transform: rotateX(180deg); /* Lisame flip-efekti */
}


/* pildiakna stiilid */
.feedback-table {
    position: absolute; /**/
    width: 80vw; /*calc(100% + 400px); /* Muutke laiust vastavalt vajadusele */
    overflow-y: auto;
    z-index: 1050; /* Veenduge, et z-index oleks suurem kui modaalakna */
    background-color: white; /* Võimalik, et peate määrama taustavärvi, et vältida modaalakna katmist */
}

.modal-lg .feedback-table {
    margin-left: -20vw; /* Nihe tabelit vasakule, et see ulatuks modaalakna piiridest väljapoole */
    overflow-x: auto;
}

.modal-xl .feedback-table {
    margin-left: -10vw; /* Nihe tabelit vasakule, et see ulatuks modaalakna piiridest väljapoole */
}

#feedbackTable {
    width: 100%;
    table-layout: fixed;
}

.table-responsive-container {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
}

.feedback-table,
.table-responsive-container,
#feedbackTable {
    box-sizing: border-box;
}

.dataTables_filter {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.pildi-vaataja {
    position: fixed;
    top: 50px; /* Muuda asukohta vastavalt vajadusele */
    left: 50px; /* Muuda asukohta vastavalt vajadusele */
    /*
        width: 800px;
        height: 800px;
        */
    width: 50vw; /* 50% ekraani laiusest */
    height: auto; /* 50vh; /* 50% ekraani kõrgusest */
    /*max-width: 600px; /* Maksimaalne laius */
    max-height: 90vh; /* Maksimaalne kõrgus */
    border: 1px solid #ccc;
    background: white;
    display: none;
    z-index: 2000;
}

    .pildi-vaataja img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


/* videoakna suurendamise ja nihutamisega seotud stiilid */



/*.resize-handle {
    width: 20px;
    height: 20px;
    background: #ccc;
    position: absolute;
    right: 0;*/
    /*bottom: 0;/**/
    /*cursor: se-resize;
    z-index: 1000;*/ /* Veendu, et käepide oleks nähtav */
/*}*/

    /* Suurendamise käepideme stiilid */

    /*.resize-handle::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url('/Content/own/resize-handle.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }*/

/* Resizer stiilid */
.resize-handle {
    position: absolute;
    width: 10px; /* Muudetud laiust */
    height: 100%;
    top: 0;
    right: 0;
    cursor: ew-resize; /* Kursori muutmine horisontaalseks resize-ks */
    background: repeating-radial-gradient( to bottom, #ccc, #ccc 2px, #eee 2px, #eee 4px );
    z-index: 1500;
}

.hs-video-button {
    display: flex;
    align-items: center;
    cursor: pointer; /* Muudab kursori klikitavaks */
}

    .hs-video-button .number {
        width: 30px; /* Piisavalt ruumi ka kahekohalistele numbritele */
        text-align: right;
        padding-right: 5px; /* Vahe numbrite ja teksti vahel */
    }

    .hs-video-button:hover {
        background-color: #b6ff00; /* Muudab tausta värvi hoveri ajal */
    }

h1 button.data-reloader {
    font-size: 0.5em; /* Muudab fondi suurust poole väiksemaks */
    /* border: none; /* Eemaldab nupu piiri */
    background: none; /* Eemaldab tausta */
    cursor: pointer; /* Lisab nupu kursorile pointer */
    padding: 0; /* Eemaldab nupu paddingu */
}

.position-relative .collapsible-content {
    background-color: lightgray !important;
}
.acc-download,
.acc-refresh,
.acc-print,
.acc-save
{
    cursor: pointer;
}

.collapsed .acc-download,
.collapsed .acc-refresh,
.collapsed .acc-print,
.collapsed .acc-save
{
    display: none;
}

.see-div {
    display: none; 
    border:1px solid; 
    border-radius:5px; 
    background-color:antiquewhite;

}

.see-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:5px;
    margin-bottom:5px;
}

.see-text {
    /* Vasakule joondatud tekstile ei pea midagi spetsiaalset lisama */
}

.see-error {
    color: red; /* Veateate tekstile punane värv */
    margin-left: auto; /* Veateate joondamiseks paremale */
    margin-right:5%;
}

input[type="checkbox"].form-control {
    width: 100% !important;
}

/*stiilid kutse ja protokolli koostamise lehele*/
.document-flow {
    position: relative;
    border: 1px solid #ccc;
    padding: 5px;
    height: 40vh;
    display: flex;
    box-sizing: border-box; /* Veendu, et padding on seesmiselt arvestatud */
    border-radius: 5px;
}
.document-flowpart {
    width: 100%;
    display: flex; 
    flex-direction: column; 
    height: 100%;
}
.document-creation {
    background-color: antiquewhite;
}
.document-word {
    background-color: aquamarine;
}
.document-pdf {
    background-color:burlywood;
}
.document-action {
    background-color: cadetblue;
}
.doc-arrow-container {
    width: 30px;
    height: 30px;
    background-color: #000; /* Noole mummi taustavärv */
    border-radius: 50%; /* Muudab mummi ümmarguseks */
    position: absolute;
    top: 50%; /* Vertikaalselt keskel */
    left: 100%; /* Viib mummi konteineri paremasse serva */
    transform: translate(-50%, -50%); /* Korraldab horisontaalse nihke ja vertikaalse tsentreerimise */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:100;
}

.doc-arrow-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid white; /* Noole värv */
}

.doc-question-container {
    min-width: 20px; 
    height: 20px;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 5px; /* Ülalt 5px kaugusel */
    right: 5px; /* Paremalt 5px kaugusel */
    cursor: pointer;
}

.doc-explanation-container {
    display: none; /* Peidetud vaikimisi */
    position: absolute;
    top: -10px; /* Parem-ülanurk õigesti paigutatud */
    right: 20px;
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Et see ilmuks kõige peale */
}

/*siit alates document actorid*/
.document-actor {
    width: 50px; /* Mummu suurus */
    height: 50px; /*50px;*/
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /*transform: translate(-50%, -50%);*/
    font-size: 2em; /* Kohanda ikooni suurust vastavalt */
    z-index: 225;
}

.document-actor-c {
    top: calc(50% - 25px);
    left: calc(50% - 25px);
}

.document-actor-bl {
    top: calc(80% - 25px);
    left: calc(20% - 25px);
}

.document-actor-br {
    top: calc(80% - 25px);
    left: calc(80% - 25px);
}


.document-actor-word {
    background-color: #2B5797; /* Sinine taust Wordi jaoks */
}

/* PDF ikooniga mummu */
.document-actor-pdf {
    background-color: #D04423; /* Punane taust */
}

/* E-maili ikooniga mummu */
.document-actor-email {
    background-color: #0072C6; /* Tumesinine taust */
}

/* Andmebaasi ikooniga mummu */
.document-actor-create {
    background-color: #E3A21A; /* Kuldne taust */
}

.document-actor-data {
    background-color: #8E44AD; /* Lilla taust andmeallikale */
}

.document-actor-template {
    background-color: #E67E22; /* Oranž taust templatele */
}

.blurred-actor {
    filter: blur(3px); /* Muudab ikooni häguseks */
    opacity: 0.5; /* Väiksem läbipaistvus */
}

.dimmed-actor {
    background-color: #d3d3d3; /* Helehall taust */
    color: #808080; /* Tumehall ikooni värv */
    opacity: 0.7; /* Vähendatud läbipaistvus */
}

.arrow-container {
    position: absolute;
    width: 30%;
    height: 30%;
    z-index: 125;
}

.arrow-line {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, black 50%, transparent 50%);
}

.diagonal-container {
    position: relative;
    width: 100%; /* Kohandage vajadusel */
    height: 100%; /* Kohandage vajadusel */
    overflow: hidden; /* Veenduge, et kõik, mis ületab konteineri, oleks peidetud */
    z-index:200;
}

.diagonal-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black; /* Joone värv */
    clip-path: polygon(-1% 1%, 49% 51%, 39% 61%, 59% 61%, 99% 101%, 
        101% 99%, 61% 59%, 61% 39%, 51% 49%, 1% -1%); /* Lõike määramine */
    border: 1px solid;
}

.icon-t {
    font-size: 2em; /* Kohanda vastavalt mummu suurusele */
    color: #fff; /* Ikoni värv */
    line-height: 1; /* Väldi tühje ruume tähe ümber */
}

.syx-actor-menu, 
.filter-block-menu,
.forward-actor-menu {
    z-index: 250;
    position: absolute;
    background-color: lightgray;
    border: 3px solid;
    border-radius: 5px;
    display: none;
}

.document-actor-menu {
    z-index: 250;
    position: absolute;
    width: 200%;
    background-color: lightgray;
    border: 3px solid;
    border-radius:5px;
    display: none;
}

.document-actor-menu-ur {
    bottom: 50%;
    left: 50%;
}
.document-actor-menu-ul {
    bottom: 50%;
    right: 50%;
}
.document-actor-menu-dl {
    top: 50%;
    right: 50%;
}
.document-actor-menu-dr {
    top: 50%;
    left: 50%;
}

.document-actor-menu-item {
    background-color:aquamarine;
    border: 3px solid;
    border-radius:5px;
    padding:3px;

}

.doc-cell {
    
}

.doc-button {
    width: 100%; /* Laiendab nupu kogu lahtri laiuseks */
    min-height: 3em; /* Minimaalselt kahe rea kõrgune nupp */
    height: 100%;
    text-align: left; /* Tekst vasakule joondatud */
    position: relative; /* Selleks, et ikooni saaks positsioneerida nupu sees */
    padding-right: 2em; /* Jätab ruumi ikooni jaoks paremal nurgas */
}

i.rem-doc-button {
    position: absolute; /* Asetab ikooni nupu sees kindlasse kohta */
    right: 5px; /* Paremas nurgas */
    bottom: 5px; /* Allosas */
    font-size: 1.2em; /* Võid vajadusel suurendada ikooni suurust */
}
i.load-doc-button {
    position: absolute; /* Asetab ikooni nupu sees kindlasse kohta */
    right: 5px; /* Paremas nurgas */
    top: 5px; /* Ülaosas */
    font-size: 1.2em; /* Võid vajadusel suurendada ikooni suurust */
}
i.store-doc-button {
    position: absolute; /* Asetab ikooni nupu sees kindlasse kohta */
    right: 5px; /* Paremas nurgas */
    top: 5px; /* Ülaosas */
    font-size: 1.2em; /* Võid vajadusel suurendada ikooni suurust */
}

.success-status { color: green; }
.error-status { color: red; }

.param-options {
    display: flex;
    align-items: center;
}

.param-option {
    margin-right: 10px; /* Vahe valikute ja nupu vahel */
}

.param-button, .button-copy {
    margin-left: auto;
    margin-right: 10px;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.preview-area {
    display: none;
    z-index: 9999;
    background-color: lightgray; /* või siis rgba(211,211,211,0.5) kui läbipaistvat tahan */
}

.meet, .meet-ko, .meet-loeng, .meet-1, .meet-2, .meet-3 {
    text-align:center;
}

.meet-ko {
    background-color: lightgray;
}

.meet-loeng {
    background-color: lightpink;
}

.meet-1 {
    background-color: greenyellow;
}
.meet-2 {
    background-color: lawngreen;
}
.meet-3 {
    background-color: forestgreen;
}

/* kalendris (aga miks mitte ka mujal) kasutatavad tooltipid */
.item-with-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-content {
    position: absolute;
    background-color: lightgray;
    color: black;
    padding: 5px;
   /* width: 300%;*/
    border-color: red;
    border-radius: 5px;
  white-space: pre-wrap;  /*  Säilitab reavahetused */
    z-index: 1000;
    top: 100%;
    left: 50%;
    /*transform: translateX(-50%);*/
    display: none;
}

.item-with-tooltip:hover .tooltip-content {
    display: flex; /* Näita tooltip'i hover'iga */
    top: -30px; /* Nihuta ülespoole */
    right: 30px; /* Nihuta paremale */
    transition: top 0.3s ease, right 0.3s ease; /* Lisa sujuv üleminek */
}

.tooltip-content img {
    width: 100%; /* Pildi laius 100% konteineri laiusest */
    height: auto; /* Hoia pildi kõrgus õigena */
    display: block; /* Väldi tarbetut tühja ruumi */
    margin: 0; /* Eemalda margin, et vältida tühja ruumi */
}

/* siin stiilid tracking eslid tarbeks */

/* Vaikimisi on .tv-eslid klassiga nupud peidetud */
.tv-eslid {
    display: none;
}

/* Kui nupp asub .vr-eslid klassiga <tr> sees, siis tee ta nähtavaks */
.vr-eslid .tv-eslid {
    display: inline-block; /* Või 'block', olenevalt, milline nupp on */
}


/* siin stiilid prinditava area jaoks */

.print-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;

    height: 100vh; /* */
    background: white; /* Valge taust prinditavale sisule */
    z-index: 9999; /* Kõige peale */
    overflow: auto;
}

/* Peida kõik muu sisu printimise ajal */
@media print {
    body * {
        /*visibility: hidden;/**/
    }

    .print-fullscreen, .print-fullscreen * { /* .print-fullscreen * */
        visibility: visible;
    }
}

/* Peidab elemendi ekraanil, aga muudab selle nähtavaks printimise ajal */
.print-only {
    display: none; /* Peida ekraanil */
}

@media print {
    .print-only {
        display: block; /* Tee nähtavaks ainult printimise ajal */
    }

    .no-print {
        display: none;
    }

    .page-break {
        page-break-before: always;
    }

    .print-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: white;
        border-bottom: 1px solid black;
        text-align: center;
        padding: 10px;
    }

    .print-content {
        margin-top: 50px; /* Vältimaks päise kattumist sisuga */
    }

    tr.print-only {
        display: table-row;
    }
    button/*, input*/ {
            display: none !important; /**/
        }
    body {
        font-size: 0.9em; /* Vähendab teksti suurust 90% võrreldes algsega */
        overflow:hidden !important;
    }

    /* Konkreetne klass, näiteks tabelitele */
    table {
        /* font-size: 0.8em; /* Kohandab tabeli teksti suurust */
        width: 100%;
        table-layout: auto;
        /* page-break-inside: avoid; /* Väldi lehekatkestust tabeli sees */
        page-break-before: auto;
        page-break-after: auto;
    }

    



}

/* Kalendrinuppudel kohal ja puudu tähised */
button.visit-X,
button.visit-O
{
    position: relative;
}

    button.visit-X::after,
    button.visit-O::after {
        content: "";
        position: absolute;
        top: -5px;
        right: -5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: transparent;
    }

    /* Visit-X - punane lilleke */
    button.visit-X::after {
        background-color: green;
        border: 2px solid white;
        border-radius: 50%;
/*      background-color: red;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
*/    

    }

    /* Visit-O - must rõngas */
    button.visit-O::after {
        background-color: red;
        border: 2px solid white;
        border-radius: 50%;
    }

.print-refresh-button {

    position: relative;
    display: flex;
    align-items: center;
    font-size: 1rem;

}

.acc-refresh, .acc-print, .acc-download, .acc-save {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /*left: -80px;*/
    z-index: 100;
    background: transparent;
}

.acc-1 { left: -80px; }
.acc-2 { left: -120px; }
.acc-3 { left: -160px; }
.acc-4 { left: -200px; }

.accordion-header:has(.accordion-button.collapsed) .print-refresh-button .acc-download,
.accordion-header:has(.accordion-button.collapsed) .print-refresh-button .acc-refresh,
.accordion-header:has(.accordion-button.collapsed) .print-refresh-button .acc-print,
.accordion-header:has(.accordion-button.collapsed) .print-refresh-button .acc-save
{
    display: none; /* Peidab ikoonid, kui accordion-body on collapsed */
}

.acc-download-wrapper, .download-wrapper {
    display:none;
    z-index: 200;
    position:absolute;
    background:white;
    border: 1px solid #ccc;
    padding: 5px;
    min-width: 150px; /**/
    max-width:150px;
    
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}

.acc-download-wrapper .acc-download-action,
.download-wrapper .data-download-action {
    width: 100%;
    text-align: left;
}


.acc-download-wrapper.show, .download-wrapper.show {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.acc-download-wrapper {
    top:20px;
    left: -80px;
}
.download-wrapper{
    right: 0;
}




/* lisasin stiilid AI soovitusel modaalakna tabelikuju kerimiseks */
.modal-body .data-loader-target {
    overflow-x: auto; /* Võimaldab horisontaalse kerimise */
    -webkit-overflow-scrolling: touch; /* Parandab kerimist mobiilseadmetes */
}

.table {
    width: 100%; /* Veenduge, et tabel kasutaks maksimaalselt saadavat ruumi */
    min-width: 600px; /* Lisa miinimumlaius, et tabel ei kollapseeruks */
    display: table; /* Tagab, et tabel käitub korrektselt */
    border-collapse: collapse;
}

/* AI tehtud stiilid infoindikaatori jaoks - panin siia - ehk läheb mujalgi tarvis */
.info-cell {
    position: relative; /* Vajalik, et info-indicator saaks positsioneerida */
    padding-right: 20px; /* Ruumi info-indikaatorile */
    /*vertical-align: top; /* Veendu, et sisu joondub ülemisse serva */
}

.info-indicator {
    position: absolute;
    top: 2px; /* Seab ülemisse nurka */
    right: 2px; /* Seab paremasse serva */
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    background-color: blue;
    border-radius: 50%;
    cursor: help; /* Näitab, et see on interaktiivne */
}

.small-doc-button {
    width: 100%;
    margin: 1px !important;
    padding: 0 !important;
    padding-bottom: 0px !important;
}

.table-container {
  /* max-height: 400px !important; /* Defineeri soovitud kõrgus */
  overflow-y: auto; /* Luba vertikaalne kerimine */
}

.doc-button-white {
    background-color: white;
}
.doc-button-red {
    background-color: red;
    color: white;
}
.doc-button-yellow {
    background-color: yellow;
}
.doc-button-green {
    background-color: lawngreen;
}

.dlformat-excel::before {
    content: "📊 ";
}
.dlformat-csv::before {
    content: "📄 "; /* CSV (sobib ka, kui tabelifail) */
}

.dlformat-word::before {
    content: "📃 "; /* Word (dokument) */
}

.dlformat-xword::before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: "\f1c2"; /* Word fail (fa-file-word) */
}

.dlformat-vcard::before {
    content: "👤 "; /* VCard (kontaktikaart) */
}

.export-col-hidden, .export-colname-hidden {
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
}

.change-period {
    cursor: pointer;
    color: blue;
    /*text-decoration: underline;*/
}

.change-period:hover {
    color: darkblue;
}

.modal-term {
    background: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    width: 600px;
    z-index: 9999;
}

.modal-term-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.modal-term-header .close {
    cursor: pointer;
    font-size: 20px;
}

.modal-term-body {
    padding: 10px 0;
}

.modal-term-header h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.modal-term-body {
    padding: 10px;
}

.term-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.lang-flag {
    height: 1em;
}

.input-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
}

.term-input, .term-textarea {
    width: 400px;
}

.term-textarea.hidden {
    display: none;
}

.toggle-textarea {
    border: none;
    background: transparent;
    cursor: pointer;
}

.term-save {
    background: green;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

.dropdown-menu {
    min-width: 100px; /* Et menüü ei muutuks liiga laiaks */
}

.dropdown-menu .btn {
    /* width: 100%; /* Et nupud oleksid joondatud ühte veergu */
    text-align: center;
}

.dropdown-menu .btn img {
    padding: 0;
    margin: 0;
    height: 1em;
    width: auto;
    vertical-align: middle;
    border-radius: 0; /* Eemaldab ümarduse */
}

/* Kui tõlkerežiim on sees, muuda span-id märgatavaks */
body.termin-editor .termin-span {
    background: rgba(128, 128, 128, 0.1); /* Hele hall taust */
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); /* Märgatav, kuid pehme varjund */
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.3s ease-in-out;
}

/* Kui tõlkerežiim on sees, muuda nuppude sees olevad terminid tugevamalt esile */
body.termin-editor button .termin-span {
    background: rgba(250, 250, 250, 1); /* Hele hall taust */
    color: black; /* Must tekst, et oleks loetav */
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

/* liikuva modaali asjad */
.modal-dragbar {
    background-color: #007bff;
    color: white;
    padding: 4px 8px;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.drag-icon {
    font-size: 1.2em;
    margin-right: 8px;
}

.drag-icon.hidden {
    display: none;
}

.drag-icon.visible {
    display: inline;
}

/*.modal-term.moving-modal {
    cursor: move;
}*/

.modal-dragbar {
    cursor: move;
}

/* modali liigutamisjärgsed korrastused */
.modal-footer .btn-group, 
.modal-footer > div {
    flex-wrap: wrap;
}

.modal-dragbar .close,
.modal-dragbar .btn-close {
    cursor: pointer !important;
}

/*keelenupud editoris*/

.help-lang-switch {
    position: relative;
    display: inline-block;
    margin-left: 5px;
}

.help-lang-main {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
}

.help-lang-main img {
    vertical-align: middle;
    height: 1em;
}

.help-lang-dropdown {
    position: absolute;
    top: 110%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 4px;
    display: flex;
    flex-direction: row;   /* Rida! */
    flex-wrap: wrap;       /* Vajadusel murrab */
    gap: 5px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    max-width: 200px;      /* Võid soovi korral lisada */
}


.help-lang-dropdown {
    display: none;
}

.help-lang-dropdown img {
    height: 1em;
}

.help-lang-dropdown button {
    border: none;
    background: none;
    padding: 2px;
    cursor: pointer;
}

.no-show, 
.d-none {
    display: none !important;
}


/* siit alates smrp tööriistariba stiilid - esialgu võtsin smrpBook */

    .smrp-book-toolbar {
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: #f8f9fa;
        padding: 1rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid #ddd;
    }

        .smrp-book-toolbar input.search-input {
            padding: 0.5rem 1rem;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 1rem;
            margin-right: 1rem;
            min-width: 200px;
        }

    .smrp-book-sort {
        background-color: #e9ecef;
        border: 1px solid #ccc;
        padding: 0.5rem 1rem;
        border-radius: 10px;
        cursor: pointer;
        font-size: 0.95rem;
        margin-right: 0.5rem;
        transition: all 0.2s ease;
    }

        .smrp-book-sort.active {
            background-color: #495057;
            color: white;
            border-color: #333;
        }

    .book-mark-ribbon {
        /*display: flex;*/
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .book-mark {
        background-color: #dee2e6;
        border-radius: 6px;
        padding: 0.3rem 0.7rem;
        font-size: 0.9rem;
        transition: background-color 0.2s ease;
    }

        .book-mark a {
            text-decoration: none;
            color: #333;
        }

        .book-mark:hover {
            background-color: #ced4da;
        }


/* oma collapser - saan ise kontrollida asju */

.kollable-big .kolling-big,
.kollable .kolling {
  opacity: 1;
  height: auto;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

.kollable-big.kolled-big .kolling-big,
.kollable.kolled .kolling {
  opacity: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.kolling-big .koller-big,
.kolling .koller {
    cursor: pointer;
    padding-right: 0.3em;
}

.kollable-big:not(.kolled-big) .koller-big::before,
.kollable:not(.kolled) .koller::before {
  content: "‹"; /* või ← või midagi muud, mida tahad */
  margin-right: 0.3em;
}
.kollable-big.kolled-big .koller-big::before,
.kollable.kolled .koller::before {
  content: "›"; /* või → */
  margin-right: 0.3em;
}
.kollable-big:not(.kolled-big) .kollable-light-title,
.kollable:not(.kolled) .kollable-light-title {
    color: lightgray;
}
.kollable-big.kolled-big .kollable-light-title,
.kollable.kolled .kollable-light-title {
    color: darkblue;
}



/* märgiteatise stiilid*/

    .mark-container {
        page-break-inside: avoid;
        display: flex;
        justify-content: center;
        gap: 0px;
        padding: 0px;
        align-items: center;
    }

    .mark-box {
        width: 220px;
        /*height: 220px;*/
        aspect-ratio: 1 / 1;
        padding: 1cm; /* Valge äär */
        box-sizing: border-box;
        background: white;
        /*padding: 5%;*/
    }

    .mark-frame {
        width: 100%; /*200px;*/
        height: 100%; /*200px;*/
        padding: 0;
        border: 3px solid black; /* Välimine raam */
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        box-sizing: border-box;
        position: relative;
    }

    .mark-content {
        /*position: absolute;*/ /*see rida suurendab allanihkumist 4x */
        /*top: 5%; left: 5%;*/
        /*padding: 0;*/
        width: 90%;
        height: 90%;
        border: 1px solid black; /* Sisemine raam */
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        position: relative;
    }

        .mark-content img,
        .mark-content svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .mark-content svg {
            z-index: 1;
        }

        .mark-content img {
            z-index: 2;
            opacity: 0.8;
            pointer-events: none;
        }

    .mark-mark {
        display: block;
        width: 100%;
        height: 100%;
        padding: 5%;
        object-fit: contain;
    }


/* selle tegime generic draggeri jaoks */

.dragger {
    cursor: move;
    background: rgba(0,0,0,0.05);
    padding: 4px;
    font-weight: bold;
}

/* quick ft-editori classid */

/* vaikimisi, kui ft-editor-on on olemas */
.ft-editor-on .ft-editable {
  background-color: #ffffcc; /* helekollane */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.ft-editor-on .ft-editable.active {
  background-color: #fff2a8; /* veidi tugevam kollane redigeerimise ajal */
  outline: none;
}

.ft-editor-on .ft-editable.success {
  background-color: #ccffcc; /* roheline flash salvestamisel */
}

.ft-editor-on .ft-editable.failure {
  background-color: #ffcccc; /* punane flash vea korral */
}

/* Näita pliiatsit või "..." ainult toimetaja režiimis ja tühjale */
.ft-editor-on .ft-editable:empty::before {
  content: attr(data-placeholder);
  color: #999;
  font-style: italic;
  pointer-events: none;
}

.ft-editor-on .ft-editable:empty:not([data-placeholder])::before {
  content: "...";
}

/*.ft-editable-long .ft-editor-part:not(:empty) + .ft-editable-content .ft-editor-edit,
.ft-editable-long .ft-editor-part:not(:empty) + .ft-editable-content .ft-editor-refresh {
    display: none;
}*/

.ft-editable-long,
.ft-editor-part {
    position: relative;  /*vajalik kontekstiks*/ 
}


.ft-editor-button {
    top: 0.3rem;
    right: 0.3rem;
    padding: 0.2rem 0.4rem;
    font-size: 1rem;
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
}

.ft-editor-button-bar {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    display: flex;
    gap: 0.3rem;
}

.ft-editor-button-bar button {
    padding: 0.2rem 0.4rem;
    font-size: 1rem;
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
}

.ft-editor-active .ft-editor-edit,
.ft-editor-active .ft-editor-refresh {
    display: none;
}

.data-loader-refreshable {
    position: relative;
}

.data-loader-refresh-button {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: #007bff;
}

.data-loader-refresh-button::after {
    content: "🔄";
}

.ft-editor-button-bar {
    display: none;
}

.ft-editor-on .ft-editor-button-bar {
    display: inline;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fade-in.show {
  opacity: 1;
}

.data-loader .no-data-loader {
    display: none;
}

/* lisatud dataformi printimistoeks */

/* Lukusta grid prindis */
@media print {
  /* ära piira konteinerit */
  .container,
  .container-fluid {
    max-width: none !important;
    width: 100% !important;
  }

  /* prindiutiliidid */
  .col-print-3 { flex: 0 0 25% !important; max-width: 25% !important; }
  .col-print-4 { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
  .col-print-6 { flex: 0 0 50% !important;     max-width: 50% !important; }
  .col-print-8 { flex: 0 0 66.666% !important; max-width: 66.666% !important; }
  .col-print-9 { flex: 0 0 75% !important; max-width: 75% !important; }
  .col-print-12 { flex: 0 0 100% !important; max-width: 100% !important; }

  /* kui kasutad no-gutters */
  .row.no-gutters { margin-right: 0 !important; margin-left: 0 !important; }
  .row.no-gutters > [class*="col-"] { padding-right: 0 !important; padding-left: 0 !important; }

  /* valikuline: lehe suurus ja ääred */
  @page { size: A4; margin: 12mm; }
}


/* siia stiilid, mis seotud prindivormidega */

.table-print {
    width: 100%; 
    table-layout: fixed;
}

/* siit alates dokumendi vormiväljad - TD sisu */

.form-fill {
    
    flex-direction: column;
    align-items: flex-start;
    font-size: 10pt;
    line-height: 1.2;
    padding: 5px;
    vertical-align: top;
}

.form-title {
    font-size: 8pt;
    /*font-weight: bold;*/
    color: gray;
    margin-bottom: 2px;
}

.form-content {
    font-size: 14pt;
    font-weight: bold;
    text-align: start;
    margin-left: 12px;
}


/* QuickEditor */

td.qe-cell {
  position: relative;
  /* padding-right: 84px; /* ruum nuppudele */
  vertical-align: middle;
}

td.qe-cell:has(.qe-actions) {
    padding-right: 84px; /* ruum nuppudele */
}

.qe-cell .qe-view,
.qe-cell .qe-input,
.qe-cell .qe-select,
.qe-cell .qe-combo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  outline: none;
  padding: 4px 0;
  line-height: 1.4;
}

.qe-cell .qe-input,
.qe-cell .qe-select
{
  display: none; /* vaikimisi peidus */
}

.qe-cell .qe-actions {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
}

.qe-cell .qe-edit-btn,
.qe-cell .qe-save-btn,
.qe-cell .qe-cancel-btn {
    cursor: pointer;
}


.qe-cell .qe-save-btn, 
.qe-cell .qe-switch-btn,
.qe-cell .qe-cancel-btn {
  display: none; /* idle-režiimis peidus */
}

/* Edit-režiim */
.qe-cell.qe-editing .qe-view        { display: none; }
.qe-cell.qe-editing .qe-input       { display: block; }
.qe-cell.qe-editing .qe-edit-btn    { display: none; }
.qe-cell.qe-editing .qe-save-btn,
.qe-cell.qe-editing .qe-cancel-btn  { display: inline-block; }
.qe-cell.qe-editing .qe-switch-btn  { display: inline-block; }

.qe-cell.qe-editing.qe-selecting .qe-input { display:none; }
.qe-cell.qe-editing.qe-selecting .qe-select { display:block; }

/* tagasiside */
.qe-cell.qe-ok    { background-color: rgba(0, 128, 0, 0.12); }
.qe-cell.qe-error { background-color: rgba(255, 0, 0, 0.12); }
.qe-cell.qe-editing { background-color: lightgoldenrodyellow; }

/* kui pole, siis ei näita */
.qe-actions,
.qe-input {
    display: none;
}

.qe-cell .qe-select {
  box-sizing: border-box;
  width: 200% !important;
}

.qe-cell .qe-select {
  appearance: none;          /* standard */
  -webkit-appearance: none;  /* Safari/Chrome */
  -moz-appearance: none;     /* Firefox */
 /* background: transparent;   /* et ära kaoks default background */
}

/* pööramine ja sujuv animatsioon */
.qe-hide-code, .qe-hide-all-code, .qe-hide-all-all-code,
.qe-switch-btn {
  transition: transform 120ms ease;
}
.qe-cell.qe-selecting .qe-switch-btn,
.qe-hide-code.qe-hidden-code,
.qe-hide-all-code.qe-hidden-code,
.qe-hide-all-all-code.qe-hidden-code
{
  transform: rotate(180deg);
  cursor: pointer;
}

.qe-switch-btn.qe-nolist { visibility: hidden;}

TR.qe-norow { display:none; }

/* =========================================================
   RMed – Albumi/pildi vaate stiilid (puhastatud)
   ======================================================= */

/* 1) GRID + ITEM-SUURUSED */
.rmed-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
}
.rmed-item {                /* kaardi kest */
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #f5f5f5;
}

.rmed-item-size2 .rmed-item { flex: 0 0 49%; }
.rmed-item-size3 .rmed-item { flex: 0 0 32%; }
.rmed-item-size4 .rmed-item { flex: 0 0 24%; }
.rmed-item-size5 .rmed-item { flex: 0 0 19%; }
.rmed-item-size6 .rmed-item { flex: 0 0 15%; }
.rmed-item-size7 .rmed-item { flex: 0 0 13%; }

/* 2) KAARDI SISU: ALBUMI „FRAME” + PILT */

.rmed-album-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 2.1) QUAD (4 alam-albumit) */
.rmed-album-frame.is-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  align-content: stretch;
  justify-content: stretch;
}
.rmed-quad-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #f3f3f3;
  height: 100%;
}
.rmed-album-subthumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.rmed-quad-placeholder {
  background: repeating-linear-gradient(45deg, #e9e9e9 0 10px, #ffffff 10px 20px);
  border: 1px dashed #ccc;
}
.rmed-quad-empty {
  background: #fafafa;
  border: 1px solid #eee;
}
/* overlay jääb tööle ka quadis (alumine serv) */
.rmed-album-frame.is-quad .rmed-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
}

/* 3) OVERLAY: BAAS (ALBUMI PEALKIRI ALL) */
.rmed-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
}
.rmed-overlay-text {
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  text-align: center;
}

/* 3.1) OVERLAY: ADD/NEW kaardid – keskel (scoped) */
.rmed-item.rmed-add .rmed-overlay,
.rmed-item.rmed-new .rmed-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,0));
  pointer-events: none;
  z-index: 2;
}
.rmed-overlay-filename{
  font-size: 12px;
  max-width: 90%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #f1f1f1; opacity:.95;
  text-align:center;
}

/* 4) BODY (pealkiri pildi all) */
.rmed-album-body {
  height: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  text-align: center;
}
.rmed-title { font-size: 1rem; font-weight: 600; line-height: 1.2; }
.rmed-sub   { font-size: .825rem; opacity: .75; margin-top: .15rem; }

/* 5) FLIP-KARKASS (üks tõde) */
.rmed-flip { position: relative; perspective: 1200px; overflow: hidden;}
.rmed-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s ease; }
.rmed-face { position: absolute; inset: 0; backface-visibility: hidden; }
.rmed-face-back { transform: rotateY(180deg); }
.rmed-flip.is-open .rmed-card { transform: scale(1.5) rotateY(180deg); overflow: visible; z-index: 29; }
.rmed-face-front,
.rmed-photo-frame,
.rmed-album-frame { position: relative; }

/* kui kaart on avatud, front-nupp ei tohi klikke püüda */
.rmed-flip.is-open .rmed-front-btn,
.rmed-flip.is-open .rmed-face-front { pointer-events: none; }

/* 6.1) ADD-kaardi täispinnaline front-nupp */
.rmed-front-btn{ display:block; width:100%; height:100%; text-align:left; border:none; padding:0; background:transparent; appearance:none; }
.rmed-item.rmed-add .rmed-front-btn{
  position: absolute; inset: 0;
  display:block;
  cursor:pointer; z-index:2;
}
.rmed-item.rmed-add.is-paste .rmed-overlay-text{ font-weight:800; }

/* 7) ÜLELAADIMINE (placeholder) */
.rmed-item.rmed-new .rmed-album-thumb { filter: grayscale(1) contrast(.9) brightness(.95); opacity:.7; }
.rmed-item.rmed-new .rmed-front-btn { pointer-events: none; }

/* progress (kasuta .rmed-overlay-progress* klasse) */
.rmed-overlay-progress{
  width: 82%; height: 4px;
  background: rgba(255,255,255,.28);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 2px;
}
.rmed-overlay-progress-bar{
  height: 100%; width: 0;
  background: #4caf50;
  transition: width .2s ease;
}
/* veaolek */
.rmed-item.rmed-error .rmed-overlay {
  background: linear-gradient(to top, rgba(229,57,53,.65), rgba(229,57,53,.35) 40%, rgba(229,57,53,0));
}
.rmed-item.rmed-error .rmed-overlay-text { color: #fff; }
.rmed-item.rmed-error .rmed-overlay-progress-bar { background: #e53935; width: 100%; }

/* 8) ADD-kaart: dragover */

.rmed-item.rmed-add.is-dragover .rmed-album-frame {
  outline: 2px dashed #2b6cb0;
  outline-offset: -4px;
}

/* 9) BACK: vorm sama raami peal (pildi taust + overlay) */
.rmed-face-back .rmed-album-frame { position: relative; }
.rmed-face-back .rmed-album-frame > .rmed-album-thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* album: 5% passpartout */
.rmed-face-back .rmed-back-overlay{
  position:absolute;
  inset:5%;
  z-index:2;
  padding:10px;
  border-radius:10px;
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(2px);
}
/* back-grid (albumi/pildi vormid) */
.rmed-back-grid{
  display:grid; height:100%;
  grid-template-columns: 1fr 1fr;   /* sinu viimane versioon */
  grid-template-rows: 1fr 1fr;
  gap:10px;
  align-items:start;
}
.rmed-mini-thumb{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.rmed-field{
  grid-column:1 / -1; grid-row:2;
  align-self:end;
}
.rmed-field input[type="text"],
.rmed-field textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.92);
  border-radius:8px; padding:8px 10px;
  font-size:14px; line-height:1.25;
  color:#222;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) inset;
}
.rmed-field textarea{ resize:none; }

/* 10) STAATUSED/VARJUNDID */
.rmed-item.rmed-uncat .rmed-album-thumb { filter: grayscale(1) contrast(.9) brightness(.95); opacity:.6; }
.rmed-item.rmed-uncat .rmed-title, 
.rmed-item.rmed-uncat .rmed-sub { opacity:.75; }
.rmed-item.rmed-uncat .rmed-card { border: 1px dashed #d0d0d0; }

.rmed-item.rmed-up .rmed-album-thumb,
.rmed-item.rmed-up .rmed-cover-thumb,
.rmed-item.rmed-up .rmed-album-subthumb {
  filter: grayscale(1) contrast(.9) brightness(.95);
  opacity: .55;
}

/* kasuta olemasolevat overlay’d noole kandjana */
.rmed-item.rmed-up .rmed-overlay{
  display:flex; align-items:center; justify-content:center;
}

/* peida overlay tekst (kui sul sinna mõni tiitel tuleb) */
.rmed-item.rmed-up .rmed-overlay-text{ display:none; }

/* joonista suur ring ja nool */
.rmed-item.rmed-up .rmed-overlay::before{
  content: "⭯";
  display:inline-flex; align-items:center; justify-content:center;
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: 28px; line-height: 1; color:#2b6cb0; font-weight:700;
}

/* õrn dashed raam ja veidi “kokku tõstetud” visuaal */
.rmed-item.rmed-up .rmed-card{
  border:1px dashed #9bbbef;
  background:#f7fbff;
  transform: scale(.96);
  transform-origin:center;
}

/* ankur igaks juhuks */
.rmed-item.rmed-up .rmed-album-frame{ position: relative; }

/* tee overlay täisekraaniks ja keskele */
.rmed-item.rmed-up .rmed-overlay{
  position: absolute; inset: 0;   /* mitte ainult bottom */
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: none;   /* võta gradient maha, et ikoon oleks puhas */
  z-index: 3; pointer-events: none;
}

.rmed-item.rmed-up.is-dragover .rmed-album-frame{
  outline:2px dashed #2b6cb0;
  outline-offset:-4px;
}




.rmed-badge.rmed-ext {
  position: absolute; top:6px; right:6px;
  padding:2px 6px; font-size:11px; line-height:1;
  background: rgba(0,0,0,.55); color:#fff; border-radius:9999px;
}

/* 11) INFO OVERLAY (lehe-ülene pildiavaja) */
.rmed-overlay-panel {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.65);
  z-index: 1999;
}
.rmed-overlay-panel.show { display: flex; }
.rmed-overlay-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  border-radius: 8px;
}
.rmed-overlay-close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  border: 0; border-radius: 18px;
  background: rgba(255,255,255,.9);
  font-size: 20px; line-height: 36px;
  cursor: pointer;
  z-index:10001;
}

@media (pointer: coarse){
  .rmed-overlay-close{ width: 44px; height: 44px; line-height: 44px; font-size: 24px; }
}

.rmed-overlay-close:hover { background: #fff; }

/* 12) INFO-NUpp/POPUP (kui kasutad) */
.rmed-info-btn{
  position:absolute; top:8px; right:8px;
  width:22px; height:22px; border-radius:50%;
  border:0; cursor:pointer;
  background:#1e90ff; color:#fff; font-weight:700;
  line-height:22px; text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.rmed-info-btn:hover{ background:#167bd6; }
.rmed-info-pop{
  position:absolute; z-index:30; display:none;
  min-width:220px; max-width:300px;
  background:#fffbe6;
  border:1px solid #e8e1b3; border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  padding:10px 12px;
}
.rmed-info-pop.show{ display:block; }
.rmed-info-title{ font-weight:700; margin-bottom:6px; }
.rmed-info-row{ font-size:.9rem; margin:2px 0; }
.rmed-info-map{ margin-top:8px; height:140px; overflow:hidden; border-radius:6px; }
.rmed-info-map iframe{ width:100%; height:100%; border:0; }

/* 13) MOBIILI STRIP (kui kasutad) */
@media (max-width: 768px) {
  .rmed-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }
  .rmed-grid .rmed-item {
    flex: 0 0 100%;
    height: calc(100dvh - var(--nav-h));
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
  }
  .rmed-grid .rmed-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* lohistatav pilt (kosmeetika) */
.rmed-item.rmed-photo.is-dragging { opacity:.6; }

/* kuhu kukutaks: enne või pärast */
.rmed-item.rmed-photo.drop-before { box-shadow: inset 4px 0 0 #2b6cb0; }
.rmed-item.rmed-photo.drop-after  { box-shadow: inset -4px 0 0 #2b6cb0; }

/*kadunud edit stiilid*/
/* Vaate režiim: näita overlayd, peida alumine tekstiosa */
.rmed-mode-view .rmed-album-body { display: none; }
.rmed-mode-view .rmed-overlay    { display: block; }

 /*Editori režiim: peida overlay, näita all olevat teksti*/ 
/*.rmed-mode-edit .rmed-overlay    { display: none; }*/
.rmed-mode-edit .rmed-album-body { display: flex; }  või block, kuidas sul oli 

/* need kaks on raamitud coveri tarbeks */
/* raam jääb täisekraanile (sul on see juba paigas .rmed-album-thumb’iga) */
.rmed-album-frame.is-framed { position: relative; }

/* päris cover raamile “peale” 80% suurusena */
.rmed-album-frame.is-framed .rmed-cover-thumb{
  position: absolute;
  inset: 12% 15%;            /* 80% nähtav ala – muuda nt 8–12% */
  width: 72%; height: 76%;
  object-fit: cover;
  border-radius: 6px;    /* et raamivahe oleks pehme */
  z-index: 2;
}

/* pildi tagakülg - teine katse */

/* BACK: raam taustaks + vorm peal */
.rmed-face-back .rmed-album-frame { position: relative; }

/* taustapilt (id=3) täidab kogu raami */
.rmed-face-back .rmed-album-frame > .rmed-album-thumb{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* vormi-”klaas” raami peal – 5% paspartuu */
.rmed-face-back .rmed-back-overlay{
  position: absolute;
  inset: 5%;
  z-index: 2;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.12);     /* soovi korral pehmemaks/tugevamaks */
  backdrop-filter: blur(2px);       /* kui tahad pehmemat tausta */
}

/* 3/1 × 3/1 grid: ülemine rida suur, alumine madalam */
.rmed-face-back .rmed-back-grid{
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

/* vasak üla (9): eelvaade */
.rmed-face-back .rmed-back-grid .rmed-mini-thumb{
  grid-column: 1; grid-row: 1;
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* parem üla (3): nupud */
.rmed-face-back .rmed-back-grid .rmed-side-actions{
  grid-column: 2; grid-row: 1;
  gap: 8px;
  justify-self: end; align-self: start;

    /* reseti potentsiaalsed pärandused mujalt */
  grid-column: auto;
  grid-row: auto;
  position: static;
  float: none;
  width: auto;
  min-width: 0;
  max-width: 100%;
  /* flex-omadused gridis ei loe, aga kui kuskil oli flex:0 0 80px; – nullime */
  flex: none;
}

/* alumine rida (3+1): pealkirja väljad keskel */
.rmed-face-back .rmed-back-grid .rmed-field{
  grid-column: 1 / -1; grid-row: 2;
  display: grid; place-items: center;   /* keskjoondus plokina */
  text-align: center;                   /* sisutekst keskelt */
  gap: 6px;
}
.rmed-face-back .rmed-back-grid .rmed-field input[type="text"],
.rmed-face-back .rmed-back-grid .rmed-field textarea{
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.95);
  color: #222;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) inset;
}
.rmed-face-back .rmed-back-grid .rmed-field textarea{ resize: none; }

/* katsetame veel */

.rmed-face-back .rmed-back-overlay{ inset:5% !important; }

/* 1) Ankur + kõrgus (vali A või B) */
.rmed-face-back .rmed-album-frame{
  position: relative;
  aspect-ratio: 1 / 1;          /* A: lihtne ruut */
}


/* 2) Taustpilt täidab ankrut */
.rmed-face-back .rmed-album-thumb{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

/* 3) Vorm “klaasina” peal ja servadest sisse */
.rmed-face-back .rmed-back-overlay{
  position:absolute;
  inset:5%;
  z-index:2;                    /* pildi peale */
  /* (soovi korral) */
  /* background:rgba(0,0,0,.12); backdrop-filter:blur(2px); border-radius:10px; */
}
/* vasak üla lahter */
.rmed-face-back .rmed-back-grid .rmed-mini-front { grid-column:1; grid-row:1; }

/* mini-esikülg ruuduna */
.rmed-face-back .rmed-mini-front .rmed-album-frame{ position:relative; }

.rmed-face-back .rmed-mini-front .rmed-album-frame > .rmed-album-thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* mini peal overlayt ei näita */
.rmed-face-back .rmed-mini-front .rmed-overlay{ display:none; }


/* siht-albumi highlight */
.rmed-item.rmed-album.is-dragover .rmed-album-frame{
  outline: 2px dashed #2b6cb0;
  outline-offset: -4px;
}

/* Ctrl=copy: väike + märk nurgas */
.rmed-item.rmed-album.is-copy .rmed-album-frame::after{
  content: "+"; position:absolute; top:6px; right:6px;
  width:20px; height:20px; border-radius:9999px;
  background:#2b6cb0; color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  z-index:4;
}

/* “ping” kui operatsioon õnnestus */
@keyframes rmedPing {
  0%{ box-shadow:0 0 0 0 rgba(43,108,176,.35); }
  100%{ box-shadow:0 0 0 14px rgba(43,108,176,0); }
}
.rmed-item.rmed-album.is-ping .rmed-album-frame{
  animation: rmedPing .6s ease;
}

.rmed-item.rmed-photo.is-moving { opacity:.5; }

.rmed-toast{
  position:fixed; left:50%; bottom:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.85); color:#fff; padding:8px 12px; border-radius:6px;
  z-index:4000; font-size:14px;
}

.rmed-toast.info    { background: rgba(0,0,0,.85); }
.rmed-toast.success { background: #2e7d32; }
.rmed-toast.error   { background: #c62828; }

.rmed-confirm-backdrop{
  position:fixed; inset:0; z-index:5000;
  background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.rmed-confirm{
  width:min(520px, 92vw);
  background:#fff; color:#222;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:14px 16px;
}
.rmed-confirm-title { font-weight:700; margin-bottom:6px; }
.rmed-confirm-body {  margin:8px 0 12px 0; line-height:1.4; }
.rmed-confirm-actions{
  display:flex; gap:8px; justify-content:flex-end;
}

/* kataloogipuu stiilid */

/* dialoog */
.rmed-dialog-backdrop{
  position:fixed; inset:0; z-index:5000;
  background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.rmed-dialog{
  width:min(720px, 95vw);
  background:#fff; border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
}
.rmed-dialog-header{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid #eee;
}
.rmed-dialog-title{ font-weight:700; font-size:16px; }
.rmed-mc-copy-toggle{ margin-left:auto; font-size:14px; user-select:none; }
.rmed-dialog-body{ padding:10px 12px; }
.rmed-dialog-footer{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-top:1px solid #eee;
}
.rmed-flex-spacer{ flex:1 1 auto; }

/* nupud */
.rmed-btn{ border:0; border-radius:8px; padding:8px 12px; cursor:pointer; }
.rmed-btn-primary{ background:#1e90ff; color:#fff; }
.rmed-btn-secondary{ background:#e9f2ff; color:#1e90ff; }
.rmed-btn-outline{ background:#f6f6f6; color:#333; border:1px solid #ddd; }

/* puu */
.rmed-treewrap{ max-height: 54vh; overflow:auto; border:1px solid #eee; border-radius:8px; padding:6px; }
.rmed-tree{ list-style:none; margin:0; padding:0; }
.rmed-tree .rmed-tree-node{ margin:2px 0; }
.rmed-tree-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:6px; cursor:pointer;
}
.rmed-tree-row:hover{ background:#f6f9ff; }
.rmed-tree-node.is-selected > .rmed-tree-row{ background:#e9f2ff; outline:1px solid #cfe3ff; }
.rmed-tree-toggle{
  width:18px; height:18px; border:0; border-radius:4px;
  background:#f0f0f0; cursor:pointer; font-size:12px; line-height:18px;
}
.rmed-tree-cover{ width:22px; height:22px; object-fit:cover; border-radius:4px; }
.rmed-tree-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.rmed-tree-children{ list-style:none; margin:0 0 0 22px; padding:2px 0 0 0; }
.rmed-tree-loading, .rmed-tree-loading-sm, .rmed-tree-empty{ padding:6px 8px; color:#666; font-size:13px; }

/* parandus, et albumi tagakülje ruudupilt ei jookseks laiali */

/* ülamenüü-strip */

/* Ülemine riba: sama “grid”, aga madalad plaadid, mitte ruudud */
.OLD_rmed-strip{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:8px;
}
.OLD_rmed-strip .rmed-item{
  flex:0 0 auto;
  min-width:140px;          /* kohanda maitse järgi */
  height:56px;              /* madal plaat */
  aspect-ratio:auto;        /* tühista ruudu-suhe, kui kuskil on */
}
.OLD_rmed-strip .rmed-card,
.OLD_rmed-strip .rmed-front-btn,
.OLD_rmed-strip .rmed-album-frame{ height:100%; }

/* Kui mõni overlay segab stripi plaadil, võid peita: */
/* .rmed-strip .rmed-overlay{ display:none; } */

/* Flex-konteineris sunnib järgmised kaardid uuele reale */
.rmed-break{
  flex-basis:100%;
  height:0; margin:0; padding:0; border:0;
}
/* Ülemine riba: ruutudega grid, 8 veergu, sama .rmed-item markup */
.OLD_rmed-strip{
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 1 rida, 8 ruutu */
  gap: 12px;               /* kasuta sama gap’i mis põhigridil */
  align-items: stretch;    /* plaadid täiskõrguses veerus */
}

/* Tee plaadid ruuduks ja neutraliseeri mis tahes flex-basis reeglid */
.OLD_rmed-strip .rmed-item{
  aspect-ratio: 1 / 1;
  width: 100%;
  flex: initial;           /* kui kuskil pärineb flex, nulli ära */

  height: auto !important;     /* tühista “56px” jms */
  flex: initial !important;    /* kui kuskil päritakse flex-basis */ /*TODO: küsida*/
}

/* Et sisu täidaks plaadi */
.OLD_rmed-strip .rmed-card,
.OLD_rmed-strip .rmed-front-btn,
.OLD_rmed-strip .rmed-album-frame{
  height: 100%;
}

.OLD_rmed-strip{
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}


.OLD_rmed-strip .rmed-card,
.OLD_rmed-strip .rmed-front-btn,
.OLD_rmed-strip .rmed-album-frame{
  height: 100%;
}

.OLD_rmed-strip{ height: auto !important; overflow: visible; }


/* korrigeerime albumi nuppe */

/* Back-vale parempoolses veerus: kompaktne vert. pinu */
.rmed-face-back .rmed-side-actions {
  display:flex; flex-direction:column; gap:6px;
  align-items:flex-end; justify-content:flex-start;
  min-width:0; max-width:100%;
}


/* Stripis (8 veergu) veidi kompaktsemad piirid */
.OLD_rmed-strip .rmed-face-back .rmed-side-actions .rmed-primary,
.OLD_rmed-strip .rmed-face-back .rmed-side-actions .rmed-cancel{
  height: clamp(22px, 2.6vw, 32px);
  padding: 0 clamp(8px, 1vw, 12px);
  font-size: clamp(11px, .95vw, 13px);
}


/* Alumise rea “väljad” peavad saama kokku tõmmata */
.rmed-face-back .rmed-field{
  min-width:0;  /* gridis oluline, muidu võib üle jooksutada */
}

/* Pilli-kujuline sisend, tekst scrolleb horisontaalselt vaikimisi */
.rmed-face-back .rmed-field input[type="text"]{
  width:100%; box-sizing:border-box; min-width:0;
  height: clamp(30px, 4vw, 42px);
  border-radius:9999px; padding:0 12px;
  font-size: clamp(13px, 1.05vw, 16px);
  border:1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.95); color:#222;
  outline: none;
}

/* Stripis veidi säästlikumad mõõdud */
.OLD_rmed-strip .rmed-face-back .rmed-field input[type="text"]{
  height: clamp(26px, 3.4vw, 36px);
  font-size: clamp(12px, .95vw, 14px);
  padding: 0 10px;
}

/* Back-overlayle natuke “matti” sisse, et servad ei lõikuks */
.rmed-face-back .rmed-back-overlay{
  inset: 6%;           /* kui ikka kitsas, tõsta 7–8% peale */
}

/* Gridil min-height 0, et sisu saaks kahaneda; veerud ei veniks üle */
.rmed-face-back .rmed-back-grid { min-height:0; }

/* kui kuskil on gridile overflow peal, nulli ära */
.rmed-grid, .OLD_rmed-strip{ overflow: visible; }


/* kui kasutad scale’i, sea päritolu keskpunkti */
/* sujuv kasvamine + pivot keskel (kui skaleerid) */
.rmed-flip .rmed-card { transform-origin: center center; will-change: transform; }


/* sinu olemasoleva transformi kõrvale/üle */
/* et saaks kastist välja */



/* kui kaarti avad (flip), luba üle serva minna ja tõsta naabritest kõrgemale */
.rmed-item.rmed-flip.is-open {
  overflow: visible;   /* <<< oluline: ära klipi avatud kaarti */
  z-index: 40;         /* et ei jääks naabrite alla */
}

/* nupud ilusaks */
/* Konteiner: veerg või rida, ära lase üle serva joosta */
.rmed-side-actions {
  display:flex;
  flex-direction:column;         /* stripis teeme all eraldi rea-variandi */
  gap:8px;
  align-items:flex-end;
  justify-content:flex-start;
  min-width:0; max-width:100%;
}


/* veelkord ruudustik (eelmised eemalda) TODO: */
/* Back-grid: ülemine “suur osa” + alumine “sisu-kõrgusega” */
.rmed-face-back .rmed-back-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2–1, nagu sul meeldis */
  grid-template-rows: 1fr auto;    /* ÜLEMINE täidab ruumi, ALUMINE just sisu */
  gap: 8px;
  min-height: 0;                   /* ära lukusta miinimumkõrgust */
}

/* Kõik gridilapsed võivad vajadusel kokku tõmmata (vältib üle-jooksmist) */
.rmed-face-back .rmed-back-grid > * {
  min-width: 0;
}

/* Alumine rida: Nimi + Pealkiri – täislaiuses ja raamidesse */
.rmed-face-back .rmed-field {
  grid-column: 1 / -1;  /* üle mõlema veeru */
  grid-row: 2;          /* alumine rida */
  align-self: end;      /* kleebi alumisse tsooni */
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Sisendid on “pilli”-kujuga ja skaleeruvad; ei jookse üle serva */
.rmed-face-back .rmed-field input[type="text"]{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: clamp(28px, 3.6vw, 40px);
  border-radius: 9999px;          /* r = h/2 */
  padding: 0 12px;
  font-size: clamp(12px, 1.0vw, 16px);
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.95);
  color:#222;
  outline: none;
}

/* Overlay raamile pisut “matti” ja vajadusel keritavus, et midagi ei lõikuks ära */
.rmed-face-back .rmed-back-overlay{
  inset: 6%;
  overflow: auto; /* kui ruut on väga väike, saab alumine rida siit kerida */
}

/* Stripis (väiksemad ruudud) veel kompaktsemad sisendid */
.OLD_rmed-strip .rmed-face-back .rmed-field input[type="text"]{
  height: clamp(24px, 3.0vw, 34px);
  font-size: clamp(11px, .9vw, 14px);
  padding: 0 10px;
}

/* pildialbumi nupustiilid */
/* üldkujundus jääb samaks */
.rmed-tile{
  --tile: clamp(40px, 5vw, 64px);
  position:relative; width:var(--tile); aspect-ratio:1/1;
  border-radius:10px; border:1px solid #e5e5e5; overflow:hidden; cursor:pointer;
  display:grid; place-items:center; background:#f7f7f7;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

/* tausta “raam” */
.rmed-tile::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: var(--tile-bg, url('/Media/P/3?size=2')) center / cover no-repeat;
  filter: saturate(.96) brightness(.98);
}

/* sümbol */
.rmed-tile .glyph{
  position:relative; z-index:1;
  font-weight:800; letter-spacing:.02em;
  font-size: clamp(16px, 2.2vw, 22px);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* === OLEKUD === */
/* OFF – madalam (inset), veidi tuhm */
.rmed-tile.is-off{
  box-shadow: inset 0 2px 6px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
  filter: saturate(.9) brightness(.98);
}

/* ON – kõrgem (drop) ja õrn äär rõhutuseks */
.rmed-tile.is-on{
  box-shadow: 0 6px 14px rgba(0,0,0,.18), 0 0 0 2px #4b9cff inset;
  filter: none;
}

/* Pressed – hetkeks sügavam */
.rmed-tile:active,
.rmed-tile.is-pressed{
  transform: translateY(1px);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.28);
}

/* Disabled – üldse ei näita (soovi korral muuda opacity-ks) */
.rmed-tile[disabled]{ display:none; }

/* Veniv raam, taustaks õrn matt; sisu saab vabalt laieneda */
.rmed-head{
  border: 12px solid transparent;          /* raami paksus */
  border-image-source: url('/Media/P/3?size=2');
  border-image-slice: 20% fill;             /* ~20% igast servast; “fill” täidab keskosa */
  border-image-repeat: stretch;             /* hoiab ühtlase */
  border-radius: 10px;                       /* kui raamipilt lubab, jääb kena */
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(1px);                /* valikuline klaasimatt */
  padding: 8px 12px;
  margin: 8px 0 12px;
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}

/* Pealkiri + leivapuru */
.rmed-head-title{
  font-weight: 800;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.2;
  color:#1d2a36;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rmed-head-crumbs{
  font-size: clamp(11px, 1.4vw, 13px);
  color:#44596c; opacity:.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* pakett + taust “sigri-migri” */
.rmed-tile-pack{
  --pack: clamp(170px, 22vw, 240px);   /* kogu paki laius */
  position: relative;
  width: var(--pack);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 2px;
  overflow: hidden;
}
.rmed-tile-pack::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: url('/Media/P/3?size=2') center/cover no-repeat;
  filter: saturate(.95) brightness(.98);
  opacity:.65;     /* vajadusel timmi */
}

/* 2×2 grid sees */
.rmed-tile-matrix{
  --gap: 4px;
  --cell: calc((var(--pack) - var(--gap)*3) / 2); /* kaks kasti ja kaks vahet */
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, var(--cell));
  grid-template-rows: repeat(2, var(--cell));
  gap: var(--gap);
}

/* rakenda väiksem ruutu-suurus sees olevatele nuppudele */
.rmed-tile-pack .rmed-tile{
  --tile: var(--cell);   /* kasutab sinu rmed-tile baasmõõtu */
}






/* pealkirja riba karkass */
.rmed-head { position: relative; border-radius: 10px; overflow: hidden; }
.rmed-head .rmed-card { height: auto; } /* riba kõrgus sõltub sisust */
.rmed-head .rmed-face { position: relative; }

/* flip X-teljelt (horisontaalne) – kasutab su olemasolevat .rmed-flip mustrit */
.rmed-flip--x .rmed-card { transform: rotateX(0deg); transition: transform .35s ease; }
.rmed-flip--x .rmed-face-back { transform: rotateX(180deg); }
.rmed-flip--x.is-open .rmed-card { transform: rotateX(180deg); }

/* esikülje paigutus */
.rmed-head-bar {
  display:flex; align-items:center; gap:12px;
  padding:8px 12px;
}
.rmed-head-title { font-weight:700; font-size:1.1rem; }
.rmed-head-sub { margin-left:.5rem; opacity:.75; font-weight:500; }

/* tagakülje paigutus */
.rmed-head-grid {
  display:grid; gap:0 12px; align-items:start;
  grid-template-columns: 3fr 1fr auto; /* [nimi] [pealkiri] [nupud] */
  grid-template-rows: auto auto;
  padding:0 12px;
}
.rmed-head-grid input[name="name"]  { grid-column:1; grid-row:1; }
.rmed-head-grid input[name="coverid"]  { grid-column:2; grid-row:1; text-align:right; min-width:0;}
.rmed-head-grid input[name="title"] { grid-column:1 / span 2; grid-row:2; }
.rmed-head-grid input { width:100%; }


.rmed-head-actions { 
    grid-column:3; grid-row:1 / span 2;
    display:flex; 
    flex-direction:row;
    gap:8px; 
    align-items:flex-end
}
/* Pealkirja inline-vorm: 2 rida välju + nupud paremal */
.rmed-title-form{
  display: grid;
  grid-template-columns: 1fr auto;   /* vasakul väljad, paremal nupud */
  grid-auto-rows: auto;
  gap: 8px;
}

/* väljad samas veerus üksteise all */
.rmed-title-form input{
  display: block;
  width: 100%;
  min-width: 0;     /* vältida ületekemist kitsastes kohtades */
}

/* nupud paremal, joondus ülaossa (või center – maitse asi) */
.rmed-title-form .rmed-actions{
  grid-column: 2;
  grid-row: 1 / span 2;   /* katab mõlemad väljade read */
  align-self: start;
  display: flex;
  gap: 6px;
}


/* ---------------------------------------------------------
   R-MEDIA: BUTTON SYSTEM (PASTE LAST)
   --------------------------------------------------------- */

/* 0) Teemapõhised muutujad (soovi korral kohanda page tasemel) */
.rmed-page{
  --btn-ok:        #2e7d32;
  --btn-ok-hover:  #1b5e20;
  --btn-cancel:    #c62828;
  --btn-cancel-hover:#b71c1c;
  --btn-text:      #fff;

  --btn-corner-bg: rgba(0,0,0,.6);
  --btn-corner-bg-hover: rgba(0,0,0,.75);
  --btn-focus:     rgba(255,255,255,.7);

  --btn-diam: clamp(28px, 6vw, 40px);     /* ringikujuliste vorminuppude läbimõõt */
  --btn-diam-compact: clamp(24px, 4.5vw, 34px); /* kompaktsem variant (kui vaja) */

  --btn-shadow: 0 2px 8px rgba(0,0,0,.15);
  --btn-radius-pill: 9999px;
}

/* 1) Nurganupud (pliiats, +, ↑) — sama visuaal igal kaardil */
.rmed-edit-btn,
.rmed-head-edit-btn {
  position:absolute;
  top:8px;
  width:32px; height:32px;
  border:0; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background: var(--btn-corner-bg);
  color:#fff; cursor:pointer; z-index:3;
  box-shadow: var(--btn-shadow);
}
.rmed-edit-btn:hover,
.rmed-head-edit-btn:hover { background: var(--btn-corner-bg-hover); }
.rmed-edit-btn:focus-visible,
.rmed-head-edit-btn:focus-visible { outline:2px solid var(--btn-focus); outline-offset:2px; }

/* nurgad */
.rmed-plus-btn   { left:8px; }
.rmed-upload-btn { right:8px; left:auto; }
/* päiseriba pliiats (hoia paremas servas) */
.rmed-head-edit-btn { position:static; margin-left:auto; }

/* 2) Vorminupud (OK/Cancel) ringidena vormi “parem üla” kontekstis */
.rmed-primary,
.rmed-cancel{
  width: var(--btn-diam);
  height: var(--btn-diam);
  border-radius: var(--btn-radius-pill);
  border:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--btn-text);
  box-shadow: var(--btn-shadow);
  cursor:pointer; line-height:1; font-size:0;  /* kui tekst on markupis, peidame; ikoon tuleb ::before */
}

/* ikoonid */
.rmed-primary::before,
.rmed-cancel::before{
  font-size: calc(var(--btn-diam) * 0.55);
  line-height:1;
}
.rmed-primary::before{ content:"✓"; }
.rmed-cancel::before{ content:"✕"; }

/* värvid/hover/disabled/focus */
.rmed-primary{ background: var(--btn-ok); }
.rmed-primary:hover{ background: var(--btn-ok-hover); }
.rmed-cancel{ background: var(--btn-cancel); }
.rmed-cancel:hover{ background: var(--btn-cancel-hover); }
.rmed-primary[disabled],
.rmed-primary[disabled]:hover{
  background:#9e9e9e; cursor:not-allowed; box-shadow:none; color:#fff;
}
.rmed-primary:focus-visible,
.rmed-cancel:focus-visible;{
  outline:2px solid rgba(255,255,255,.85); outline-offset:2px
}

/* 3) Režiimireeglid – 1 koht (hoia nähtavus siit kontrolli all) */
.rmed-mode-view .rmed-add,
.rmed-mode-view .rmed-edit-btn,
.rmed-mode-view .rmed-head-edit-btn,
.rmed-mode-view .rmed-noview { display:none; }
/* NB: vormi OK/Cancel ilmuvad ainult back-face’is nagunii. */

/* 4) Väiksemad plaadid – kui vaja kompaktsemat vorminuppu (valikuline) */
/* .rmed-strip .rmed-side-actions .rmed-primary,
   .rmed-strip .rmed-side-actions .rmed-cancel { width:var(--btn-diam-compact); height:var(--btn-diam-compact); } */

/* 5) “Pushed/active” olek (ühtne klass, mida saad lisada) */
.rmed-edit-btn.is-active,
.rmed-head-edit-btn.is-active{
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25), var(--btn-shadow);
}


/* päiserea lisandused TODO: otsi viidatud asjad - vaata kas on dubleerimist*/

.rmed-headrow{
  display:flex;
  align-items:center;
  gap:12px;              /* ruum pealkirja ja nuppude vahel */
}

/* pealkiri võtab ülejäänud ruumi */
.rmed-head{
  flex:1 1 auto;
  min-width:0;           /* et ellipsis saaks toimida */
}

.rmed-head .rmed-card {
    height: auto;
    position:relative; transform-style: preserve-3d;
}

.rmed-head .rmed-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
} 



.rmed-head-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rmed-head-bar { display:flex; align-items:center; gap:8px; padding:6px 8px; }
.rmed-head-title, .rmed-head-crumbs { margin:0; line-height:1.2; }


/* parempoolne “packide” kimp: laiuseks auto */
.rmed-controls{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;               /* kui on mitu pack’i kõrvuti */
}

/* tilepack ise – kasuta kas flex või grid; sinu nupud sees jäävad samaks */
.rmed-tilepack{
  display:flex;          /* või: display:grid; grid-auto-flow:column; gap:6px; */
  gap:6px;
}

/* valikuline: kitsal ekraanil luba murrang */
@media (max-width: 640px){
  .rmed-headrow{ flex-wrap:wrap; }
  .rmed-controls{ margin-left:auto; }  /* jääb ikka paremale */
}


/* ===== UNIVERSAALNE NUPP (kuju/füüsis) ===== */

/* Ümar ja kandiline kasutavad samu toone/muutujaid */
.rmed-ubtn, .rmed-ubtnkandiline{
  /* Suurus: uus (parent) → fallback vanale → konst */
  --fg-off: #111;                 /* OFF teksti/glyph värv */
  --bg-off: #fff;                 /* OFF taust (auk) */
  --ring: rgba(255,255,255,.85);  /* sise-ring ON-olekus */
  --on: #6b7280;                  /* ON tausta toon (rolliklasserid kirjutavad üle) */
  --fg-on: #fff;                  /* ON teksti/glyph värv */

  width:  var(--ubtn-diam, var(--diam, 44px));
  height: var(--ubtn-diam, var(--diam, 44px));

  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Glyphi suurus sõltub diameetrist */
  font: 800 calc(var(--ubtn-diam, var(--diam, 44px)) * 0.48)/1
        system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  color: var(--fg-off);
  background: var(--bg-off);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* OFF = “auk” (inset) */
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.18),
    inset 0 -1px 2px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.06);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    color .12s ease,
    opacity .12s ease;
}

/* Kuju: ümar vs kandiline */
.rmed-ubtn{ border-radius: 9999px; }
.rmed-ubtnkandiline{
  --ubtn-radius: 10px;
  border-radius: var(--ubtn-radius);
  /* soovi korral eraldi laiuse/kõrguse muutujad:
     width:  var(--ubtn-width,  var(--ubtn-diam, var(--diam, 44px)));
     height: var(--ubtn-height, var(--ubtn-diam, var(--diam, 44px))); */
}

/* ON olek (üks koht kõigile) */
.rmed-ubtn.is-on,
.rmed-ubtn[aria-pressed="true"],
.rmed-ubtnkandiline.is-on,
.rmed-ubtnkandiline[aria-pressed="true"]{
  background: var(--on);
  color: var(--fg-on);
  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    0 0 0 2px var(--ring) inset;
}

.rmed-ubtn:active,
.rmed-ubtnkandiline:active{ transform: translateY(1px); }
.rmed-ubtn.is-on:active,
.rmed-ubtnkandiline.is-on:active{ transform: translateY(0); }

.rmed-ubtn:focus-visible,
.rmed-ubtnkandiline:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    0 0 0 2px var(--ring) inset,
    0 0 0 2px rgba(30,144,255,.7);
}

.rmed-ubtn[disabled],
.rmed-ubtnkandiline[disabled]{
  opacity: .5; cursor: not-allowed;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.04);
}

/* Kui HTML on tühi, pane rolli-glyph automaatselt */
.rmed-ubtn:empty::before,
.rmed-ubtnkandiline:empty::before{
  content: var(--glyph, attr(data-glyph, ""));
  display: inline-block;
  line-height: 1;
}

/* ===== SUURUSED (tagasiühilduvus) ===== */
/* Võid jätta alles, kui mugav */
.rmed-ubtn--sm{ --diam: 36px; }  /* fallback var(--diam) kaudu töötab endiselt */
.rmed-ubtn--md{ --diam: 44px; }  /* default */
.rmed-ubtn--lg{ --diam: 52px; }

/* Soovitatav edaspidi: pane parentile --ubtn-diam,
   nt .rmed-btnstack{ --ubtn-diam: 48px; } */

/* ===== TOONI-UTILID (soovi korral jäta alles) ===== */
.rmed-ubtn--primary{ --on: #1e90ff; }
.rmed-ubtn--warning{ --on: #f59e0b; }
.rmed-ubtn--danger { --on: #c62828; }
.rmed-ubtn--success{ --on: #2e7d32; }
.rmed-ubtn--indigo { --on: #4f46e5; }
.rmed-ubtn--neutral{ --on: #6b7280; }

/* NB: vanad per-toon `.is-on` reeglid EEMALDA.
   Üksainus ON-plokk üleval katab kõik. */

/* ===== ROLLIKLASSID (värv + vaikimisi glyph) ===== */
.rmed-ubtn-cover    { --on:#1e90ff; --glyph:"C"; }
.rmed-ubtn-hide     { --on:#f59e0b; --glyph:"H"; }
.rmed-ubtn-delete   { --on:#c62828; --glyph:"D"; }
.rmed-ubtn-private  { --on:#4f46e5; --glyph:"🔒"; }
.rmed-ubtn-public   { --on:#2e7d32; --glyph:"🌍"; }
.rmed-ubtn-edit,
.rmed-ubtn-pliiats  { --on:#6b7280; --glyph:"✎"; }
.rmed-ubtn-flip     { --on:#6b7280; --glyph:"⇄"; }
.rmed-ubtn-upload   { --on:#1e90ff; --glyph:"↑"; }
.rmed-ubtn-download { --on:#1e90ff; --glyph:"↓"; }
.rmed-ubtn-move     { --on:#6b7280; --glyph:"↔"; }
.rmed-ubtn-add,
.rmed-ubtn-new      { --on:#0ea5a0; --glyph:"+"; }
.rmed-ubtn-confirm,
.rmed-ubtn-ok       { --on:#2e7d32; --glyph:"✓"; }
.rmed-ubtn-cancel   { --on:#c62828; --glyph:"✕"; }

/* ===== DEMO paneel (kui kasutasid) ===== */
.rmed-ubtn-demo{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

    /* demo paigutus + suurus parentist */
    .rmed-ubtn-demo {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

    .rmed-ubtn-demo--sm {
        --ubtn-diam: 36px;
    }

    .rmed-grid {
        --ubtn-diam: 24px
    }
    /* kogu rida: väike */

    /* NUppude paigutusraamid */


/* === PANEELI BAAS === */
.rmed-btnpanel{
  /* Paneeli globaalsed parameetrid – juhitavad parentist */
  --btnpanel-gap: 8px;        /* nuppude vahe */
  --btnpanel-pad: 6px;        /* paneeli sisepadding (kui taust on peal) */
  --btnpanel-edge: 8px;       /* kaugus servast */
  --ubtn-diam: 36px;          /* nuppude suurus selle paneeli sees */

  position: absolute;
  z-index: 5;
  display: flex;
  gap: var(--btnpanel-gap);
  pointer-events: auto;       /* paneel võtab klikke */
}

/* Rail (vertikaalne virn, parem ülanurk) */
.rmed-btnpanel--rail{
  top: var(--btnpanel-edge);
  right: var(--btnpanel-edge);
  flex-direction: column;
  align-items: flex-end;
}

/* Bar (horisontaalne, allservas keskel) */
.rmed-btnpanel--bar{
  left: 50%;
  bottom: var(--btnpanel-edge);
  transform: translateX(-50%);
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

/* Valikuline: õrn matt-paneel loetavuseks (rail'ile) */
.rmed-btnpanel--rail{
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  padding: var(--btnpanel-pad);
  border-radius: 10px;
}

/* Paneeli sees nupud skaleeruvad ühe reaga */
.rmed-btnpanel .rmed-ubtn,
.rmed-btnpanel .rmed-ubtnkandiline{
  width: var(--ubtn-diam);
  height: var(--ubtn-diam);
}

/* Väike variant (näiteks väga kitsastel kaartidel) */
.rmed-btnpanel--sm{ --ubtn-diam: 30px; --btnpanel-gap: 6px; --btnpanel-pad: 4px; }

/* Kui kaart on väga kitsas: tee rail → bar (container query on boonus) */
/* Kui sul on container-queries lubatud: märgi raam konteineriks */
/*.rmed-photo-frame { container-type: inline-size; }
@container (max-width: 260px){
  .rmed-photo-frame .rmed-btnpanel{*/
    /* muuda rail bar'iks */
    /*left: 50%; right: auto; top: auto; bottom: var(--btnpanel-edge);
    transform: translateX(-50%);
    flex-direction: row;
    background: rgba(0,0,0,.25);
    padding: var(--btnpanel-pad);
    border-radius: 10px;
  }
}*/

/* ankur, kui pole juba */
.rmed-face-front { position: relative; }

/* universaalsed nurgautiliidid */
.rmed-corner-tr{ position:absolute; top:8px; right:8px; z-index:10; }
.rmed-corner-tl{ position:absolute; top:8px; left:8px;  z-index:10; }
.rmed-corner-br{ position:absolute; bottom:8px; right:8px; z-index:10; }
.rmed-corner-bl{ position:absolute; bottom:8px; left:8px;  z-index:10; }

/* et täis-ala front-nupp jääks kihis alla (kui tal on z-index) */
.rmed-front-btn{ position: relative; z-index:1; }

/* kolmik viewport */
/*.rmed-viewport { position: relative; overflow: hidden; }
.rmed-strip { display: flex; width: 300%; transform: translateX(-33.333%); transition: transform .25s ease; }
.rmed-frame { width: 100%; height: 100vh; object-fit: contain; flex: 0 0 33.333%; }
*/

/*.rmed-viewport { position: relative; overflow: hidden; width: 100%; height: 100vh; }*/
/*.rmed-strip { display: flex; height: 100%; will-change: transform; transition: transform .25s ease; }*/
/*.rmed-frame { flex: 0 0 100%; height: 100%; object-fit: contain; }*/
.rmed-strip.is-sliding { transition: transform .25s ease; } /* võib jääda */

.rmed-viewport { position: relative; overflow: hidden; width: 100vw; height: 100vh; }
.rmed-strip { display: flex; height: 100%; will-change: transform; 
              /*transition: transform .25s ease;*/ 
              gap: 0; }
.rmed-frame { flex: 0 0 100%; height: 100%; object-fit: contain; display: block; }

.rmed-viewport { touch-action: pan-y; } /* luba vertikaalne pan, väldi brauseri horisontaalset "swipe back" žesti */



/*
    stiilid genereertud - kasutamiseks templatede juures
*/

.box.w1 {
    width: 1%;
}

.box.t1 {
    top: 1%;
}

.box.b1 {
    bottom: 1%;
}

.box.l1 {
    left: 1%;
}

.box.r1 {
    right: 1%;
}

.box.w2 {
    width: 2%;
}

.box.t2 {
    top: 2%;
}

.box.b2 {
    bottom: 2%;
}

.box.l2 {
    left: 2%;
}

.box.r2 {
    right: 2%;
}

.box.w3 {
    width: 3%;
}

.box.t3 {
    top: 3%;
}

.box.b3 {
    bottom: 3%;
}

.box.l3 {
    left: 3%;
}

.box.r3 {
    right: 3%;
}

.box.w4 {
    width: 4%;
}

.box.t4 {
    top: 4%;
}

.box.b4 {
    bottom: 4%;
}

.box.l4 {
    left: 4%;
}

.box.r4 {
    right: 4%;
}

.box.w5 {
    width: 5%;
}

.box.t5 {
    top: 5%;
}

.box.b5 {
    bottom: 5%;
}

.box.l5 {
    left: 5%;
}

.box.r5 {
    right: 5%;
}

.box.w6 {
    width: 6%;
}

.box.t6 {
    top: 6%;
}

.box.b6 {
    bottom: 6%;
}

.box.l6 {
    left: 6%;
}

.box.r6 {
    right: 6%;
}

.box.w7 {
    width: 7%;
}

.box.t7 {
    top: 7%;
}

.box.b7 {
    bottom: 7%;
}

.box.l7 {
    left: 7%;
}

.box.r7 {
    right: 7%;
}

.box.w8 {
    width: 8%;
}

.box.t8 {
    top: 8%;
}

.box.b8 {
    bottom: 8%;
}

.box.l8 {
    left: 8%;
}

.box.r8 {
    right: 8%;
}

.box.w9 {
    width: 9%;
}

.box.t9 {
    top: 9%;
}

.box.b9 {
    bottom: 9%;
}

.box.l9 {
    left: 9%;
}

.box.r9 {
    right: 9%;
}

.box.w10 {
    width: 10%;
}

.box.t10 {
    top: 10%;
}

.box.b10 {
    bottom: 10%;
}

.box.l10 {
    left: 10%;
}

.box.r10 {
    right: 10%;
}

.box.w11 {
    width: 11%;
}

.box.t11 {
    top: 11%;
}

.box.b11 {
    bottom: 11%;
}

.box.l11 {
    left: 11%;
}

.box.r11 {
    right: 11%;
}

.box.w12 {
    width: 12%;
}

.box.t12 {
    top: 12%;
}

.box.b12 {
    bottom: 12%;
}

.box.l12 {
    left: 12%;
}

.box.r12 {
    right: 12%;
}

.box.w13 {
    width: 13%;
}

.box.t13 {
    top: 13%;
}

.box.b13 {
    bottom: 13%;
}

.box.l13 {
    left: 13%;
}

.box.r13 {
    right: 13%;
}

.box.w14 {
    width: 14%;
}

.box.t14 {
    top: 14%;
}

.box.b14 {
    bottom: 14%;
}

.box.l14 {
    left: 14%;
}

.box.r14 {
    right: 14%;
}

.box.w15 {
    width: 15%;
}

.box.t15 {
    top: 15%;
}

.box.b15 {
    bottom: 15%;
}

.box.l15 {
    left: 15%;
}

.box.r15 {
    right: 15%;
}

.box.w16 {
    width: 16%;
}

.box.t16 {
    top: 16%;
}

.box.b16 {
    bottom: 16%;
}

.box.l16 {
    left: 16%;
}

.box.r16 {
    right: 16%;
}

.box.w17 {
    width: 17%;
}

.box.t17 {
    top: 17%;
}

.box.b17 {
    bottom: 17%;
}

.box.l17 {
    left: 17%;
}

.box.r17 {
    right: 17%;
}

.box.w18 {
    width: 18%;
}

.box.t18 {
    top: 18%;
}

.box.b18 {
    bottom: 18%;
}

.box.l18 {
    left: 18%;
}

.box.r18 {
    right: 18%;
}

.box.w19 {
    width: 19%;
}

.box.t19 {
    top: 19%;
}

.box.b19 {
    bottom: 19%;
}

.box.l19 {
    left: 19%;
}

.box.r19 {
    right: 19%;
}

.box.w20 {
    width: 20%;
}

.box.t20 {
    top: 20%;
}

.box.b20 {
    bottom: 20%;
}

.box.l20 {
    left: 20%;
}

.box.r20 {
    right: 20%;
}

.box.w21 {
    width: 21%;
}

.box.t21 {
    top: 21%;
}

.box.b21 {
    bottom: 21%;
}

.box.l21 {
    left: 21%;
}

.box.r21 {
    right: 21%;
}

.box.w22 {
    width: 22%;
}

.box.t22 {
    top: 22%;
}

.box.b22 {
    bottom: 22%;
}

.box.l22 {
    left: 22%;
}

.box.r22 {
    right: 22%;
}

.box.w23 {
    width: 23%;
}

.box.t23 {
    top: 23%;
}

.box.b23 {
    bottom: 23%;
}

.box.l23 {
    left: 23%;
}

.box.r23 {
    right: 23%;
}

.box.w24 {
    width: 24%;
}

.box.t24 {
    top: 24%;
}

.box.b24 {
    bottom: 24%;
}

.box.l24 {
    left: 24%;
}

.box.r24 {
    right: 24%;
}

.box.w25 {
    width: 25%;
}

.box.t25 {
    top: 25%;
}

.box.b25 {
    bottom: 25%;
}

.box.l25 {
    left: 25%;
}

.box.r25 {
    right: 25%;
}

.box.w26 {
    width: 26%;
}

.box.t26 {
    top: 26%;
}

.box.b26 {
    bottom: 26%;
}

.box.l26 {
    left: 26%;
}

.box.r26 {
    right: 26%;
}

.box.w27 {
    width: 27%;
}

.box.t27 {
    top: 27%;
}

.box.b27 {
    bottom: 27%;
}

.box.l27 {
    left: 27%;
}

.box.r27 {
    right: 27%;
}

.box.w28 {
    width: 28%;
}

.box.t28 {
    top: 28%;
}

.box.b28 {
    bottom: 28%;
}

.box.l28 {
    left: 28%;
}

.box.r28 {
    right: 28%;
}

.box.w29 {
    width: 29%;
}

.box.t29 {
    top: 29%;
}

.box.b29 {
    bottom: 29%;
}

.box.l29 {
    left: 29%;
}

.box.r29 {
    right: 29%;
}

.box.w30 {
    width: 30%;
}

.box.t30 {
    top: 30%;
}

.box.b30 {
    bottom: 30%;
}

.box.l30 {
    left: 30%;
}

.box.r30 {
    right: 30%;
}

.box.w31 {
    width: 31%;
}

.box.t31 {
    top: 31%;
}

.box.b31 {
    bottom: 31%;
}

.box.l31 {
    left: 31%;
}

.box.r31 {
    right: 31%;
}

.box.w32 {
    width: 32%;
}

.box.t32 {
    top: 32%;
}

.box.b32 {
    bottom: 32%;
}

.box.l32 {
    left: 32%;
}

.box.r32 {
    right: 32%;
}

.box.w33 {
    width: 33%;
}

.box.t33 {
    top: 33%;
}

.box.b33 {
    bottom: 33%;
}

.box.l33 {
    left: 33%;
}

.box.r33 {
    right: 33%;
}

.box.w34 {
    width: 34%;
}

.box.t34 {
    top: 34%;
}

.box.b34 {
    bottom: 34%;
}

.box.l34 {
    left: 34%;
}

.box.r34 {
    right: 34%;
}

.box.w35 {
    width: 35%;
}

.box.t35 {
    top: 35%;
}

.box.b35 {
    bottom: 35%;
}

.box.l35 {
    left: 35%;
}

.box.r35 {
    right: 35%;
}

.box.w36 {
    width: 36%;
}

.box.t36 {
    top: 36%;
}

.box.b36 {
    bottom: 36%;
}

.box.l36 {
    left: 36%;
}

.box.r36 {
    right: 36%;
}

.box.w37 {
    width: 37%;
}

.box.t37 {
    top: 37%;
}

.box.b37 {
    bottom: 37%;
}

.box.l37 {
    left: 37%;
}

.box.r37 {
    right: 37%;
}

.box.w38 {
    width: 38%;
}

.box.t38 {
    top: 38%;
}

.box.b38 {
    bottom: 38%;
}

.box.l38 {
    left: 38%;
}

.box.r38 {
    right: 38%;
}

.box.w39 {
    width: 39%;
}

.box.t39 {
    top: 39%;
}

.box.b39 {
    bottom: 39%;
}

.box.l39 {
    left: 39%;
}

.box.r39 {
    right: 39%;
}

.box.w40 {
    width: 40%;
}

.box.t40 {
    top: 40%;
}

.box.b40 {
    bottom: 40%;
}

.box.l40 {
    left: 40%;
}

.box.r40 {
    right: 40%;
}

.box.w41 {
    width: 41%;
}

.box.t41 {
    top: 41%;
}

.box.b41 {
    bottom: 41%;
}

.box.l41 {
    left: 41%;
}

.box.r41 {
    right: 41%;
}

.box.w42 {
    width: 42%;
}

.box.t42 {
    top: 42%;
}

.box.b42 {
    bottom: 42%;
}

.box.l42 {
    left: 42%;
}

.box.r42 {
    right: 42%;
}

.box.w43 {
    width: 43%;
}

.box.t43 {
    top: 43%;
}

.box.b43 {
    bottom: 43%;
}

.box.l43 {
    left: 43%;
}

.box.r43 {
    right: 43%;
}

.box.w44 {
    width: 44%;
}

.box.t44 {
    top: 44%;
}

.box.b44 {
    bottom: 44%;
}

.box.l44 {
    left: 44%;
}

.box.r44 {
    right: 44%;
}

.box.w45 {
    width: 45%;
}

.box.t45 {
    top: 45%;
}

.box.b45 {
    bottom: 45%;
}

.box.l45 {
    left: 45%;
}

.box.r45 {
    right: 45%;
}

.box.w46 {
    width: 46%;
}

.box.t46 {
    top: 46%;
}

.box.b46 {
    bottom: 46%;
}

.box.l46 {
    left: 46%;
}

.box.r46 {
    right: 46%;
}

.box.w47 {
    width: 47%;
}

.box.t47 {
    top: 47%;
}

.box.b47 {
    bottom: 47%;
}

.box.l47 {
    left: 47%;
}

.box.r47 {
    right: 47%;
}

.box.w48 {
    width: 48%;
}

.box.t48 {
    top: 48%;
}

.box.b48 {
    bottom: 48%;
}

.box.l48 {
    left: 48%;
}

.box.r48 {
    right: 48%;
}

.box.w49 {
    width: 49%;
}

.box.t49 {
    top: 49%;
}

.box.b49 {
    bottom: 49%;
}

.box.l49 {
    left: 49%;
}

.box.r49 {
    right: 49%;
}

.box.w50 {
    width: 50%;
}

.box.t50 {
    top: 50%;
}

.box.b50 {
    bottom: 50%;
}

.box.l50 {
    left: 50%;
}

.box.r50 {
    right: 50%;
}

.box.w51 {
    width: 51%;
}

.box.t51 {
    top: 51%;
}

.box.b51 {
    bottom: 51%;
}

.box.l51 {
    left: 51%;
}

.box.r51 {
    right: 51%;
}

.box.w52 {
    width: 52%;
}

.box.t52 {
    top: 52%;
}

.box.b52 {
    bottom: 52%;
}

.box.l52 {
    left: 52%;
}

.box.r52 {
    right: 52%;
}

.box.w53 {
    width: 53%;
}

.box.t53 {
    top: 53%;
}

.box.b53 {
    bottom: 53%;
}

.box.l53 {
    left: 53%;
}

.box.r53 {
    right: 53%;
}

.box.w54 {
    width: 54%;
}

.box.t54 {
    top: 54%;
}

.box.b54 {
    bottom: 54%;
}

.box.l54 {
    left: 54%;
}

.box.r54 {
    right: 54%;
}

.box.w55 {
    width: 55%;
}

.box.t55 {
    top: 55%;
}

.box.b55 {
    bottom: 55%;
}

.box.l55 {
    left: 55%;
}

.box.r55 {
    right: 55%;
}

.box.w56 {
    width: 56%;
}

.box.t56 {
    top: 56%;
}

.box.b56 {
    bottom: 56%;
}

.box.l56 {
    left: 56%;
}

.box.r56 {
    right: 56%;
}

.box.w57 {
    width: 57%;
}

.box.t57 {
    top: 57%;
}

.box.b57 {
    bottom: 57%;
}

.box.l57 {
    left: 57%;
}

.box.r57 {
    right: 57%;
}

.box.w58 {
    width: 58%;
}

.box.t58 {
    top: 58%;
}

.box.b58 {
    bottom: 58%;
}

.box.l58 {
    left: 58%;
}

.box.r58 {
    right: 58%;
}

.box.w59 {
    width: 59%;
}

.box.t59 {
    top: 59%;
}

.box.b59 {
    bottom: 59%;
}

.box.l59 {
    left: 59%;
}

.box.r59 {
    right: 59%;
}

.box.w60 {
    width: 60%;
}

.box.t60 {
    top: 60%;
}

.box.b60 {
    bottom: 60%;
}

.box.l60 {
    left: 60%;
}

.box.r60 {
    right: 60%;
}

.box.w61 {
    width: 61%;
}

.box.t61 {
    top: 61%;
}

.box.b61 {
    bottom: 61%;
}

.box.l61 {
    left: 61%;
}

.box.r61 {
    right: 61%;
}

.box.w62 {
    width: 62%;
}

.box.t62 {
    top: 62%;
}

.box.b62 {
    bottom: 62%;
}

.box.l62 {
    left: 62%;
}

.box.r62 {
    right: 62%;
}

.box.w63 {
    width: 63%;
}

.box.t63 {
    top: 63%;
}

.box.b63 {
    bottom: 63%;
}

.box.l63 {
    left: 63%;
}

.box.r63 {
    right: 63%;
}

.box.w64 {
    width: 64%;
}

.box.t64 {
    top: 64%;
}

.box.b64 {
    bottom: 64%;
}

.box.l64 {
    left: 64%;
}

.box.r64 {
    right: 64%;
}

.box.w65 {
    width: 65%;
}

.box.t65 {
    top: 65%;
}

.box.b65 {
    bottom: 65%;
}

.box.l65 {
    left: 65%;
}

.box.r65 {
    right: 65%;
}

.box.w66 {
    width: 66%;
}

.box.t66 {
    top: 66%;
}

.box.b66 {
    bottom: 66%;
}

.box.l66 {
    left: 66%;
}

.box.r66 {
    right: 66%;
}

.box.w67 {
    width: 67%;
}

.box.t67 {
    top: 67%;
}

.box.b67 {
    bottom: 67%;
}

.box.l67 {
    left: 67%;
}

.box.r67 {
    right: 67%;
}

.box.w68 {
    width: 68%;
}

.box.t68 {
    top: 68%;
}

.box.b68 {
    bottom: 68%;
}

.box.l68 {
    left: 68%;
}

.box.r68 {
    right: 68%;
}

.box.w69 {
    width: 69%;
}

.box.t69 {
    top: 69%;
}

.box.b69 {
    bottom: 69%;
}

.box.l69 {
    left: 69%;
}

.box.r69 {
    right: 69%;
}

.box.w70 {
    width: 70%;
}

.box.t70 {
    top: 70%;
}

.box.b70 {
    bottom: 70%;
}

.box.l70 {
    left: 70%;
}

.box.r70 {
    right: 70%;
}

.box.w71 {
    width: 71%;
}

.box.t71 {
    top: 71%;
}

.box.b71 {
    bottom: 71%;
}

.box.l71 {
    left: 71%;
}

.box.r71 {
    right: 71%;
}

.box.w72 {
    width: 72%;
}

.box.t72 {
    top: 72%;
}

.box.b72 {
    bottom: 72%;
}

.box.l72 {
    left: 72%;
}

.box.r72 {
    right: 72%;
}

.box.w73 {
    width: 73%;
}

.box.t73 {
    top: 73%;
}

.box.b73 {
    bottom: 73%;
}

.box.l73 {
    left: 73%;
}

.box.r73 {
    right: 73%;
}

.box.w74 {
    width: 74%;
}

.box.t74 {
    top: 74%;
}

.box.b74 {
    bottom: 74%;
}

.box.l74 {
    left: 74%;
}

.box.r74 {
    right: 74%;
}

.box.w75 {
    width: 75%;
}

.box.t75 {
    top: 75%;
}

.box.b75 {
    bottom: 75%;
}

.box.l75 {
    left: 75%;
}

.box.r75 {
    right: 75%;
}

.box.w76 {
    width: 76%;
}

.box.t76 {
    top: 76%;
}

.box.b76 {
    bottom: 76%;
}

.box.l76 {
    left: 76%;
}

.box.r76 {
    right: 76%;
}

.box.w77 {
    width: 77%;
}

.box.t77 {
    top: 77%;
}

.box.b77 {
    bottom: 77%;
}

.box.l77 {
    left: 77%;
}

.box.r77 {
    right: 77%;
}

.box.w78 {
    width: 78%;
}

.box.t78 {
    top: 78%;
}

.box.b78 {
    bottom: 78%;
}

.box.l78 {
    left: 78%;
}

.box.r78 {
    right: 78%;
}

.box.w79 {
    width: 79%;
}

.box.t79 {
    top: 79%;
}

.box.b79 {
    bottom: 79%;
}

.box.l79 {
    left: 79%;
}

.box.r79 {
    right: 79%;
}

.box.w80 {
    width: 80%;
}

.box.t80 {
    top: 80%;
}

.box.b80 {
    bottom: 80%;
}

.box.l80 {
    left: 80%;
}

.box.r80 {
    right: 80%;
}

.box.w81 {
    width: 81%;
}

.box.t81 {
    top: 81%;
}

.box.b81 {
    bottom: 81%;
}

.box.l81 {
    left: 81%;
}

.box.r81 {
    right: 81%;
}

.box.w82 {
    width: 82%;
}

.box.t82 {
    top: 82%;
}

.box.b82 {
    bottom: 82%;
}

.box.l82 {
    left: 82%;
}

.box.r82 {
    right: 82%;
}

.box.w83 {
    width: 83%;
}

.box.t83 {
    top: 83%;
}

.box.b83 {
    bottom: 83%;
}

.box.l83 {
    left: 83%;
}

.box.r83 {
    right: 83%;
}

.box.w84 {
    width: 84%;
}

.box.t84 {
    top: 84%;
}

.box.b84 {
    bottom: 84%;
}

.box.l84 {
    left: 84%;
}

.box.r84 {
    right: 84%;
}

.box.w85 {
    width: 85%;
}

.box.t85 {
    top: 85%;
}

.box.b85 {
    bottom: 85%;
}

.box.l85 {
    left: 85%;
}

.box.r85 {
    right: 85%;
}

.box.w86 {
    width: 86%;
}

.box.t86 {
    top: 86%;
}

.box.b86 {
    bottom: 86%;
}

.box.l86 {
    left: 86%;
}

.box.r86 {
    right: 86%;
}

.box.w87 {
    width: 87%;
}

.box.t87 {
    top: 87%;
}

.box.b87 {
    bottom: 87%;
}

.box.l87 {
    left: 87%;
}

.box.r87 {
    right: 87%;
}

.box.w88 {
    width: 88%;
}

.box.t88 {
    top: 88%;
}

.box.b88 {
    bottom: 88%;
}

.box.l88 {
    left: 88%;
}

.box.r88 {
    right: 88%;
}

.box.w89 {
    width: 89%;
}

.box.t89 {
    top: 89%;
}

.box.b89 {
    bottom: 89%;
}

.box.l89 {
    left: 89%;
}

.box.r89 {
    right: 89%;
}

.box.w90 {
    width: 90%;
}

.box.t90 {
    top: 90%;
}

.box.b90 {
    bottom: 90%;
}

.box.l90 {
    left: 90%;
}

.box.r90 {
    right: 90%;
}

.box.w91 {
    width: 91%;
}

.box.t91 {
    top: 91%;
}

.box.b91 {
    bottom: 91%;
}

.box.l91 {
    left: 91%;
}

.box.r91 {
    right: 91%;
}

.box.w92 {
    width: 92%;
}

.box.t92 {
    top: 92%;
}

.box.b92 {
    bottom: 92%;
}

.box.l92 {
    left: 92%;
}

.box.r92 {
    right: 92%;
}

.box.w93 {
    width: 93%;
}

.box.t93 {
    top: 93%;
}

.box.b93 {
    bottom: 93%;
}

.box.l93 {
    left: 93%;
}

.box.r93 {
    right: 93%;
}

.box.w94 {
    width: 94%;
}

.box.t94 {
    top: 94%;
}

.box.b94 {
    bottom: 94%;
}

.box.l94 {
    left: 94%;
}

.box.r94 {
    right: 94%;
}

.box.w95 {
    width: 95%;
}

.box.t95 {
    top: 95%;
}

.box.b95 {
    bottom: 95%;
}

.box.l95 {
    left: 95%;
}

.box.r95 {
    right: 95%;
}

.box.w96 {
    width: 96%;
}

.box.t96 {
    top: 96%;
}

.box.b96 {
    bottom: 96%;
}

.box.l96 {
    left: 96%;
}

.box.r96 {
    right: 96%;
}

.box.w97 {
    width: 97%;
}

.box.t97 {
    top: 97%;
}

.box.b97 {
    bottom: 97%;
}

.box.l97 {
    left: 97%;
}

.box.r97 {
    right: 97%;
}

.box.w98 {
    width: 98%;
}

.box.t98 {
    top: 98%;
}

.box.b98 {
    bottom: 98%;
}

.box.l98 {
    left: 98%;
}

.box.r98 {
    right: 98%;
}