:root {
    --appbar-height: 60px;
    color-scheme: light dark;
    --button-theme-light-display: flex;
    --button-theme-dark-display: flex;
}
:root[style*="color-scheme: dark"] {
    --button-theme-light-display: none;
    --button-theme-dark-display: flex;
}
:root[style*="color-scheme: light"] {
    --button-theme-light-display: flex;
    --button-theme-dark-display: none;
}


button { overflow:hidden;transform:translate3d(0,0,0); display: inline-block; cursor: pointer; border:none; outline: none; border-radius: 5px; color: light-dark(#5e5e5e, #e5e5e5); font-size: 16px; background: light-dark(#e8ebec,#5a636b); padding: 8px 10px 8px 10px; text-decoration: none; }
button:hover { background: light-dark(#eeeeee, #1a1e22); text-decoration: none; color: light-dark(#5e5e5e, #87dcff); }
button:after{ display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}
button:active:after{transform:scale(0,0);opacity:.2;transition:0s}

button.blue {  color: #ffffff; background: light-dark(#45a2ed,#1a4c75); transition: all .2s ease-in-out; }
button.blue:hover { background: light-dark(#93cfff, #547ea1); }
button.red {  color: #ffffff; background: #b63030; transition: all .2s ease-in-out; }
button.green {  color: #ffffff; background: #1a6a00; transition: all .2s ease-in-out; }

button.orange {  color: #ffffff; background: #ff7b00;  }
button.orange:hover { background: #ff9d64;  }


button{
    &.disabled {
        background-color: #c9c9c9; color: #737373; pointer-events: none; cursor: not-allowed;
        :hover { background-color: #c9c9c9; color: #737373; }
    }
}

/* FLEX SIMPLE THINGS*/
.flex-row { display: flex; }
.flex-col { display: flex; flex-direction: column;}
.flex-row, .flex-col {
    &.start { align-items: flex-start;}
    &.center { align-items: center}
    .flex-1 { flex: 1;}
    &.gap-10 { gap: 10px;}
    &.gap-20 { gap: 20px;}
}


.notice { padding: 10px; background-color: light-dark(#ffe8b3,#675d47); font-size: 14px;}


/* GUI - MAIN FRAME */
body {
    color: light-dark(#222222, #e0e0e0);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; padding: 0; margin: 0; background-color: light-dark(#dde0e2, #1a2024); transition: all .15s ease-out;
    >header { transition: all .15s ease-out; padding-right: calc((100vw - 1400px) / 2 - (100vw - 100%) / 2); padding-left: calc((100vw - 1400px) / 2 - (100vw - 100%) / 2);  }
    .appbar {
        background: linear-gradient(134deg, light-dark(#8B008BFF,#500950), light-dark(#00859BFF,#00424d)); transition: all .2s;
        position: fixed; z-index: 1; top: 0; left: 0; right: 0; height: var(--appbar-height); overflow: hidden; display: flex; justify-content: space-between; background-color: var(--appbar-background-color);
        .logo { mask: url('/f/svg/logo/izi-bw-horizontal.svg') no-repeat center 8px/150px; width: 200px; background-color: white; @media screen and (max-width: 500px) { display: none;} }
        .buttons {
            display: flex;
            @media screen and (max-width: 500px) { justify-content: space-around; width: 100%;}
            .appbar-button { flex: 0 0 52px; display: flex; cursor:pointer; &.active { background-color: light-dark(white,#49555d); .appbar-ico { background-color: light-dark(#820087,white); opacity: 1;} } }
            .appbar-button:hover { backdrop-filter: brightness(.9); .appbar-ico{ opacity: 1}}
            .appbar-ico { flex: 1; background-color: white; mask-size: 30px; mask-repeat: no-repeat; mask-position: center;}
            .appbar-ico-logo { display: block; mask-image: url('/f/svg/logo-rect.svg'); }
            .appbar-ico-ads { display: block; mask-image: url('/f/svg/ico/ads-white.svg'); }
            .appbar-ico-profile { display: block; mask-image:url('/f/svg/ico/profile-white.svg'); }
            .appbar-ico-theme-dark { display: block;  mask-image:url('/f/svg/ico/button-theme-dark.svg'); }
            .appbar-ico-theme-light { display: block; mask-image:url('/f/svg/ico/button-theme-light.svg'); }
            .appbar-button-theme-dark{ display: var(--button-theme-dark-display);}
            .appbar-button-theme-light{ display: var(--button-theme-light-display);}
            .appbar-button-language {
                justify-content: center;  anchor-name: --appbar-btn-language;
                &:hover { backdrop-filter: brightness(.9); .appbar-ind{ opacity: 1} }
                &.active { background-color: light-dark(white, #49555d); .appbar-ind { color: light-dark(#820087,white); border-color: light-dark(#820087,white);}}
                .appbar-ind { align-self:center; color: white; font-size: 18px; padding: 5px; border: 1px solid white; border-radius: 5px; }
            }
            .appbar-button-logo { display: none; @media screen and (max-width: 500px) { display: flex;}}
        }
        .searchbox { flex: 1; @media screen and (max-width: 800px) { display: none;} }
        @media screen and (max-width: 800px) {  bottom: 0; top: auto; }
    }
    @media screen and (max-width: 800px) {
        padding-bottom: calc(var(--appbar-height) + 20px);
    }
}
.appbar-menu.menu-language {
    position-anchor: --appbar-btn-language; top: anchor(bottom); right: anchor(right); left: auto; display: flex; gap: 20px; padding: 10px;
    @media screen and (max-width: 640px) { top: auto; bottom: anchor(top);}
    a { text-decoration: none; color: light-dark(#820087,white); font-size: 18px; padding: 5px; border: 1px solid light-dark(#820087,white); border-radius: 5px;}
}




    /* body.appbar-hidden .appbar { top: -62px;} */


.sticky-top>.sticked { position: fixed; z-index: 1; top: 0;  left: 0; right: 0; background-color: white;}
.sticky-top>.sticked.animated { transition : margin .15s ease-out; }

body:not(.appbar-hidden)    .sticky-top>.sticked { margin-top: 62px; }

.sticked-vertical { position: sticky; top: 122px; transition: all .15s ease-out; }
body.appbar-hidden .sticked-vertical{ top: 60px;}

aside.left { transition: all .15s ease-out; width: 0px; overflow: hidden;  display: block; position: fixed; left: 0; bottom: 0; top: 62px; background-color: white; border-right: 1px solid lightgrey; box-sizing: border-box; }
body.appbar-hidden aside.left { top: 0;}



/* MAIN  ASIDED */
.asided-psect {
    display: flex; flex-direction: row-reverse; margin-bottom: 50px;
    >div:last-child {
        container-type: scroll-state; container-name: psect-header;
        flex: 0 0 300px; margin-right: 20px; position: sticky; top: calc(var(--appbar-height) + 60px); transition: all .15s ease-out; display: flex; flex-direction: column; align-self: start;
        .ttl { margin-top: 10px; margin-bottom: 10px; font-size: 20px;}
        .dsc { color: grey; font-size: 14px; padding-bottom: 10px;}
        .dsc:empty { display: none;}
    }
    >div:first-child { flex: 1; min-width: 0; }
    :has(main.nopage) & { background-color: light-dark(#f2f2f2, #30343b); padding: 20px 10px 20px 10px; border-radius: 10px; margin-bottom: 20px;}

    @media screen and (max-width: 1200px) {
        flex-direction: column-reverse;
        >div:last-child { flex: none; background-color: white; width:calc(100% + 20px);; top: calc(var(--appbar-height) + 60px); justify-content: center; margin-left: -10px; margin-right: -10px;}
        >div:last-child>div { display: flex; justify-content: space-between; align-items: center; transition: all .2s; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;}
    }
    @media screen and (max-width: 800px) {
        >div:last-child {   width: 100vw; top: 54px;}
        >div:last-child>div { flex: 1; padding-bottom: 5px;}
    }
    @container psect-header scroll-state(stuck: top) {
        @media screen and (max-width: 1200px) {
            >div:last-child {
                >div { background-color: #ededed;}
                button { background-color: white}
            }

        }
    }

}




/* MENU - HOLDER */
.page-tinter {
    position: fixed; top: var(--appbar-height); left: 0; right: 0; bottom: 0; backdrop-filter: blur(2px) grayscale(1) brightness(.7); z-index: 1;
    @media screen and (max-width: 800px) { bottom: var(--appbar-height); top: 0;}
}
.appbar-menu {
    position: fixed; right: calc((100vw - 1400px) / 2 - (100vw - 100%) / 2); top: var(--appbar-height); z-index: 1; background-color: light-dark(white, #49555d); max-width: 400px;
    @media screen and (max-width: 800px) { bottom: var(--appbar-height); right: 0; left: 0; top: auto; max-width: none; }
}

/* MENU USER */
.menu-profile {
     display: flex; flex-direction: column;  padding: 20px;
    .sect-1{
        .itms { display: flex; justify-content: space-around; }
        .itms>a, .itms>div {
            display: flex; flex-direction: column; gap: 5px; padding: 10px; font-size: 16px; text-decoration: none; color: light-dark(#666666,#d6d6d6); flex: .25; text-align: center; cursor: pointer;
            &::before { content: '';  background-color: light-dark(#666666,#d6d6d6); padding: 25px;}
        }
        .itms>a:hover, .itms>div:hover { border-radius: 20px; background-color: light-dark(#e3e3e3, #323940); }
        .itm-profile::before { mask:url('/f/svg/ico/profile-grey.svg') no-repeat center 10px/30px; }
        .itm-ads::before  { mask: url('/f/svg/ico/myads-grey.svg') no-repeat center 10px/30px; }
        .itm-comps::before  { mask: url('/f/svg/ico/chair-dirtyblue.svg') no-repeat center 10px/30px; }
        .itm-logout::before  { mask: url('/f/svg/ico/logout-dirtyblue.svg') no-repeat center 10px/30px;}
        .itm-login::before  { mask: url('/f/svg/ico/login-dirtyblue.svg') no-repeat center 10px/30px;}
        .itm-favs::before  { mask: url('/f/svg/ico/star-dirtyblue.svg') no-repeat center 10px/30px;}
        .itm-noted::before  { mask: url('/f/svg/ico/note-dirtyblue.svg') no-repeat center 10px/30px;}
        .itm-hidden::before  { mask: url('/f/svg/ico/hidden-dirtyblue.svg') no-repeat center 10px/30px;}
    }
    .sect-2{
        .itms { display: flex; flex-wrap: wrap; gap: 10px; }
        .itms>a { padding: 10px; font-size: 14px; text-decoration: none; color: light-dark(#666666,#d6d6d6); flex: .25; text-align: center; cursor: pointer; overflow-x: hidden; text-overflow: ellipsis; min-width: 90px}
        .itms img { width: 40px; height: 40px; }
        .itms .avaletters { background-color: #23a6d5; display: inline-block; border-radius: 20px; color: white; font-size: 24px; overflow: hidden; height: 40px; width: 40px; text-align: center; line-height: 40px;}
    }

}



/* SNACKBAR */
.snackbar { position: fixed; z-index: 100; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .75); padding: 20px; color: white;}
.snackbar.err { background-color: rgba(177, 0, 0, 0.75); }


body.scrolled .activity>header { z-index: 1; width: auto; margin-left:0; margin-right:0; height: 52px; background: white; border-bottom: 1px solid lightgrey; margin-bottom: 8px;}
body.scrolled .activity>header h1 { font-size: 18px;}
body.appbar-hidden .activity>header { top: 0; }




/* GUI - COMPOSITOR SHARED */
.page-wrapper.waside {
    display: flex; gap: 20px;
    >aside { width: 300px; min-width: 300px; overflow-x: hidden; align-self: flex-start; position: sticky; top: 124px ; transition: all .15s ease-out; }
    >aside>.aside-cont { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box }
    >aside.thin { width: 200px; min-width: 200px; }
    >aside>.aside-cont>.btn { padding: 10px; font-size: 16px; background-color: light-dark(#f2f2f2,#30343a); border-radius: 5px; text-decoration: none; color:light-dark(dimgrey, #c5c5c5); cursor: pointer;}
    >aside>.aside-cont>.btn:hover { background-color: light-dark(#CFCFCFFF, #5c5c5c);}
    >aside>.aside-cont>.btn.act { background-color: rgb(0, 124, 201); color: white; font-weight: bold;}
}
body.appbar-hidden .page-wrapper.waside>aside {top: 60px;}



/* ACTIVITY - PAGE */
.activity-page {
    display: flex; flex-direction: column; min-height: calc(100vh - var(--appbar-height));
    transition: all .15s ease-out; width: 100%; position: relative; left: 0; top: var(--appbar-height);  width: 1400px; margin-left: auto; margin-right: auto;
    >header {
        background-color: light-dark(#dde0e2, #1a2024); position: sticky; z-index: 1; top: var(--appbar-height); height: 60px; margin-left: calc(((100vw - (100vw - 100%)) - 1400px)/2); margin-right: calc(((100vw - (100vw - 100%)) - 1400px)/2); transition: all .15s ease-out; box-sizing: border-box; display: flex; align-items: center; padding-right: 10px; padding-left: 10px;
        .closer { display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-image: url(/f/svg/page-closer.svg); background-position: center; background-repeat: no-repeat; background-size: 18px; padding-left: 10px; margin-right: 10px;}
        .titles { flex: 1; min-width: 0;}
        h1 { flex: 1; font-size: 24px; font-weight: normal; margin: 0; padding: 0; transition: all .15s ease-out; }
        .h1, .h2 { transition: all .15s ease-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .h1 {font-size: 22px; }
        .h2 {font-size: 14px; }
        .hdr-btns { display: flex; gap: 10px;}
    }
    .aside-btn-menu { padding: 20px; background: url(/f/svg/ico/dots-h-darkgrey.svg) no-repeat center/20px; display: none }
    .page-wrapper {
        flex: 1; display: flex;
        &.waside:has(>main>.tabsview:only-child)>aside { z-index: 2 }
    }
    &.aside-menu-expanded {
        >.waside>aside { display: block; z-index: 1}
    }
    main {
        padding-left: 10px; padding-right: 10px; background-color: light-dark(#f2f2f2, #30343b); padding: 20px; border-radius: 10px; min-width: 0; width: 100%;
        @media screen and (max-width: 1400px) { >* {padding: 0 10px 0 10px;} }
        .toolbox { display: flex; position: sticky; top: 140px; z-index: 1 }
    }
    main.nopage { padding: 0; background-color: transparent;}
    .page-footer {
        margin-top: auto; padding: 10px; display: flex; flex-direction: column;
        .copyright { align-self: center; color: light-dark(#880093,#b9b9b9);}
    }
    @media screen and (max-width: 1400px) {
        width: 100%;
    }

    @media screen and (max-width: 800px) {
        top: auto;
        >header { top: 0px;}
        >div>main { padding: 5px; box-sizing: border-box}
        >.waside>aside {
            position: fixed; background-color: rgba(0, 0, 0, 0.44); left: 0; right: 0; top: 52px; bottom: 0; display: none; align-self: auto; width: auto;
            .aside-cont { background-color: white; padding: 10px; width: 100%;}
        }
        &.waside .aside-btn-menu { display: block; margin-left: -10px}
        .page-wrapper {
            padding-left: 0; padding-right: 0;
            main .toolbox-article{ top:51px; }
        }
    }
}




/* ACTIVITY - WIN */
.activity-win {
    position: fixed; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; display: inline-flex; flex-direction: column; justify-content: center; opacity: 0; transition: all .5s;
    &:last-of-type { background: light-dark(#0000006e,#000000b8); backdrop-filter: blur(5px) contrast(.5); }
    >.win {
        width: 800px; position: relative; background-color: white; border-radius: 10px; overflow: hidden; max-height: 90vh; max-width: 90vw; align-self: center; transition: all 100ms ease-out;
        display: flex; flex-direction: column; box-shadow: #00000052 0px 0px 10px 0px; background-color: #f2f2f2;  scale: .8; animation: all .5s;
        >.w-hdr {
            min-height: 40px; overflow: hidden; display: flex; align-items: center; padding:8px; background-color: light-dark(#dbdbdb, #2a2d34);
            .w-hdr-lbl { font-size: 18px; flex: 1; margin-right: 20px;}
        }
        >main {
            overflow-y: auto; scrollbar-width: thin;  flex: 1; position: relative; background-color: light-dark(#efefef,#3c3f49); overscroll-behavior: contain;
            &.padded {padding: 10px;}
            >tabs>tab { display: block; padding: 10px;}
        }


        .w-cont {display: flex; flex-direction: column; gap: 10px;}
        .w-hdr-x { width: 40px; height: 40px; background: url('/f/svg/controls/win-closer.svg') no-repeat center / 18px; cursor: pointer; border-radius: 10px; overflow: hidden; margin-right: 5px;}
        .w-hdr-x:hover { background-color: #00000018;}
        .hdr-btns { margin-left: 10px; display: flex; gap: 10px;}
        .hdr-btns .btn { padding: 10px; background-color: white; border-radius: 5px; cursor: pointer;}
        .hdr-btns .btn.orange { background-color: #ff7c30; color: white;}
        .hdr-btns .btn.orange:hover {background-color: #ff5e00;}
        .hdr-btns .btn.bld {font-weight: bold;}
        .w-errors { padding: 10px; background-color: rgb(255, 166, 137);}
        .w-errors:empty { padding: 0;}
        .w-errors .err-header { display: flex;}
        .w-errors .ttl { font-weight: bold; flex: 1;}
        .w-errors .closer { background: url('/f/svg/closer-white.svg') no-repeat center / 18px; width: 20px; height: 20px; cursor: pointer;}


        .w-progress-bar {
            position: relative; width: 100%; height: 4px; overflow: hidden; background-color: rgba(66, 133, 244, 0.2); display: none;
            .subline { position: absolute; background-color: #4285f4; height: 100%; }
            .increase { animation: progress-bar-increase 2s infinite; }
            .decrease { animation: progress-bar-decrease 2s 0.5s infinite; }
        }
        &.freezed {
            .w-progress-bar { display: block!important;}
        }
        @media screen and (max-width: 600px) {
            max-width: 100%; max-height: 100%; border-radius: 0;
        }
    }
}
@keyframes progress-bar-increase { from { left: -5%; width: 5%; } to { left: 130%; width: 100%; }  }
@keyframes progress-bar-decrease { from { left: -80%; width: 80%; } to { left: 110%; width: 10%; }  }


/* MapLibre FIXES */
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right { z-index: 1!important;}



/* FLOATING  */
.floating { display: flex; width: 100%; gap: 20px; align-items: center;}
.floating>div { flex: 1}
.floating>.flex-0 { flex: unset; }

/* TABSVIEW */
.tabsview>.scuts::-webkit-scrollbar { display: none;}
.tabsview>.scuts { white-space: nowrap; border-bottom: 1px solid light-dark(lightgrey,#787878); overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
.tabsview>.scuts>div { display: inline-block; padding: 10px; font-size: 18px; cursor: pointer; border-bottom: 4px solid light-dark(lightgrey,#787878); color:light-dark(grey,#d8d8d8);}
.tabsview>.scuts>div.selected { border-bottom: 4px solid light-dark(#078bb4,white); color: light-dark(black, white);}
.tabsview>.scuts>div:hover:not(.selected) { color: light-dark(black, white);; }
.tabsview>.pages>div { display: none; padding: 10px;}
.tabsview>.pages>div.active { display: flex; flex-direction: column; gap: 10px;}

/* TABSVIEW */
section.page>.page-wrapper>main>.tabsview:only-child>.scuts { position: sticky; z-index: 1; top:122px; background-color: white;}


@media screen and (max-width: 1500px) {
    body .activity-holder .awidth { width: auto; margin-left: 0; margin-right: 0; }
    body .activity>header { width: auto; margin-left:0!important; margin-right:0!important; margin-bottom: 0px!important;}
    .menu-profile { right: 0;}
    /* .page-wrapper { padding-left: 10px; padding-right: 10px; } */
}

@media screen and (max-width: 1300px) {
    section.page>.page-wrapper>main>.tabsview:only-child>.scuts { top: 114px;}
}


@media screen and (max-width: 800px) {

    .appbar { bottom: 0; top: auto; }
    body.appbar-hidden .appbar { top: auto;}



    /* .asided-psect>div:first-child { top: 52px;} */
    





    section.page>.page-wrapper>main>.tabsview:only-child>.scuts { top: 52px;}
}

@media screen and (max-width: 600px) {
    section.win:not(.ctrl-pop)>.pop, section.win>.pop.w-700 { max-width: none; width: 100%; max-height: none; height: 100vh; border-radius: 0; }
    section.win:not(.ctrl-pop)>.pop.padded>.page-wrapper { padding: 10px; }
    section.page main .lay-cols  {
        display: block;
        .lay-col:first-child { text-align: left}
    }
    .floating { display: block;}
}

@media screen and (max-width: 400px) {
    section.win>.pop { max-width: none; width: 100%!important; max-height: none; height: 100vh; border-radius: 0; }
}