:root {
    --appbar-height: 64px;
}

/* GUI - MAIN FRAME */
body { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; padding: 0; margin: 0; background-color: #ededed; transition: all .15s ease-out;}
body>header { transition: all .15s ease-out; padding-right: calc((100vw - 1400px) / 2 - (100vw - 100%) / 2); padding-left: calc((100vw - 1400px) / 2 - (100vw - 100%) / 2);  }
body>section.activity-page {
    transition: all .15s ease-out; width: 100%; position: relative; left: 0; top: var(--appbar-height);
    width: 1400px; margin-left: auto; margin-right: auto;
}


.appbar {
    background: linear-gradient(134deg, rgb(139 0 139) 0%, rgb(0 133 155) 100%);
    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 { background: url('/f/svg/logo/izi-bw-horizontal.svg') no-repeat center 8px/150px; width: 200px}
    .buttons { display: flex; }
    .appbar-ico-ads { display: block; width: 70px; background: url('/f/svg/ico/ads-white.svg') no-repeat center/30px; }
    .appbar-ico-profile { display: block; width: 70px; background: url('/f/svg/ico/profile-white.svg') no-repeat center/30px; }
    .appbar-ico-profile.active { background-image: url('/f/svg/ico/profile-grey.svg'); }
    .appbar-button.active { background-color: white;  }
    .searchbox { flex: 1}
}


body.appbar-hidden .appbar { top: -62px;}
/* body.sidemenu-left-opened main { width:500px; left: 250px; width: calc(100% - 250px);} */

.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.sidemenu-left-opened   .sticky-top>.sticked {left: 250px;} */
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.sidemenu-left-opened   aside.left {width: 250px;  } */
body.appbar-hidden          aside.left { top: 0;}
/* body.sidemenu-left-opened .awidth {  } */

/* MENU */
.appbar-menu {
    position: fixed; right: calc((100vw - 1400px) / 2 - (100vw - 100%) / 2); top: var(--appbar-height); z-index: 1; background-color: white; max-width: 400px;
}

/* MENU USER */
.menu-profile {
     display: flex; flex-direction: column;  padding: 20px;
    .sect-1{
        .itms { display: flex; justify-content: space-around; }
        .itms>a, .itms>div { padding: 10px; padding-top: 50px; font-size: 16px; text-decoration: none; color: grey; flex: .25; text-align: center; cursor: pointer;}
        .itms>a:hover, .itms>div:hover { border-radius: 20px; background-color: #e3e3e3; }
        .itm-profile {  background: url('/f/svg/ico/profile-grey.svg') no-repeat center 10px/30px; }
        .itm-ads {  background: url('/f/svg/ico/myads-grey.svg') no-repeat center 10px/30px; }
        .itm-comps {  background: url('/f/svg/ico/chair-dirtyblue.svg') no-repeat center 10px/30px; }
        .itm-logout {  background: url('/f/svg/ico/logout-dirtyblue.svg') no-repeat center 10px/30px; }
        .itm-login {  background: url('/f/svg/ico/login-dirtyblue.svg') no-repeat center 10px/30px; }
        .itm-favs {  background: url('/f/svg/ico/star-dirtyblue.svg') no-repeat center 10px/30px; }
        .itm-noted {  background: url('/f/svg/ico/note-dirtyblue.svg') no-repeat center 10px/30px; }
        .itm-hidden {  background: 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: grey; 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.sidemenu-left-opened .page>header { left: 250px; margin-left: calc((100vw - 1200px - 250px)/2); margin-right: calc((100vw - 1200px - 250px)/2);}
body.sidemenu-left-opened>main footer { left: 250px;} */
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; }

/* SECT ASIDED */
.asided-psect { display: flex; margin-bottom: 50px;  }
.asided-psect>div:first-child { max-width: 300px; min-width: 300px; margin-right: 20px; position: sticky; top: 120px; transition: all .15s ease-out; align-self: flex-start; }
.asided-psect>div:first-child .ttl { margin-top: 10px; margin-bottom: 10px; font-size: 22px;}
.asided-psect>div:first-child .dsc { color: grey; font-size: 14px; margin-bottom: 10px;}
.asided-psect>div:last-child { flex: 1; min-width: 0}
body.appbar-hidden .asided-psect>div:first-child { position: sticky; top: 51px;}

/* 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: white; border-radius: 5px; text-decoration: none; color:dimgrey; cursor: pointer;}
    >aside>.aside-cont>.btn:hover { background-color: rgb(207, 207, 207);}
    >aside>.aside-cont>.btn.act { background-color: rgb(0, 124, 201); color: white; font-weight: bold;}
    >main { width: 100%;}
}
body.appbar-hidden .page-wrapper.waside>aside {top: 60px;}

/* GUI - ACTIVITY (PAGES) */

/* body>main>section>footer { position: fixed; bottom: 0; left: 0; right: 0; height: 52px; line-height: 52px; vertical-align: middle; padding-left: 10px; background: white; border-top: 1px solid lightgrey; transition: all .15s ease-out; box-sizing: border-box;} */

/* .activity.fullsize { position: fixed; top: 62px; left: 0; right: 0; bottom: 0; overflow: auto;} */
/*body.sidemenu-left-opened .pagesect.fullsize { left: 250px;} */



/* ACT PAGES LAYOUTS */
/*
section.activity .lay-cols { display: flex; gap: 20px; margin-bottom: 20px;}
section.activity .lay-cols>div:first-child { max-width: 200px; width: 200px;}
section.activity .lay-cols .lay-col { display: flex; flex-direction: column; gap: 10px;}
section.activity .lay-cols .lay-col-right { text-align: right;}
section.activity .lay-cols .lay-col .ttl { font-size: 24px;}
*/

/* ACTIVITY - PAGE */
.activity-page {
    >header {
        background-color: #ededed; 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 }
    main {
        padding-left: 10px; padding-right: 10px; background-color: white; padding: 20px; border-radius: 10px; min-width: 0;
        .toolbox { display: flex; position: sticky; top: 114px; background-color: white; z-index: 1 }
    }
    /*.aside-btn-menu { padding: 20px; background: url(/f/svg/ico/dots-h-darkgrey.svg) no-repeat center/20px; display: none }*/


    /*&.fullsize .awidth { margin-left: 0; margin-right: 0; width: auto;}
    &.fullsize>header { z-index: 1; width: auto; top:0; left: 0!important; margin-left:0!important; margin-right:0!important;; height: 52px; background: white; border-bottom: 1px solid lightgrey; }*/
}

/* 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: #0000006e; backdrop-filter: blur(1px); }
    >.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: #ececec;
            .w-hdr-lbl { font-size: 18px; flex: 1; margin-right: 20px;}
        }
        >main {
            overflow-y: auto; scrollbar-width: thin;  flex: 1; position: relative; background-color: #f7f7f7; overscroll-behavior: contain;
            &.padded {padding: 10px;}
            >tabs>tab { display: block; padding: 10px;}

            /*
            >.padded { margin-left: 15px; margin-right: 15px;}
            >.padded:last-child { margin-bottom: 25px;}
            >.padded:first-child { margin-top: 25px;}*/
        }
        /*
        >main .w-cont-szsensor { position: absolute; top:0; left: 0; right:0; bottom: 0; overflow: scroll;}
        >main .w-cont-szsensor-dummy { display: block; }*/

        /*
        >.win>.page-wrapper .dlg-excl-sect { background-color: rgb(255, 166, 118); border-radius: 6px; padding: 10px; margin: 10px 0 10px 0; display: flex; flex-direction: column; gap: 10px;}
        >.win>.page-wrapper .dlg-excl-ttl { font-size: 24px;}
        >.win>.page-wrapper .dlg-excl-txtb { font-weight: bold;}*/


        .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;}
        }

    }
}
@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%; }  }







/* 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 lightgrey; 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 white; color:grey;}
.tabsview>.scuts>div.selected { border-bottom: 4px solid #078bb4; color: black;}
.tabsview>.scuts>div:hover:not(.selected) { border-bottom: 4px solid #eaeaea; color: black; }
.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) {
    body { background-color: white; padding-bottom: 52px}
    body>.activity-holder { left: 0!important; width: auto!important; top: 0;}
    .appbar { bottom: 0; top: auto; }
    body.appbar-hidden .appbar { top: auto;}
    .activity-holder { top: 0; bottom: 62px;}
    .activity>header { top: 0px;}
    .asided-psect>div:first-child { top: 52px;}
    /*body.sidemenu-left-opened aside.left { position: fixed; left: 10px; right: 10px; top: 10px; bottom: 74px; width: auto; z-index: 100;}
    body.sidemenu-left-opened main  {filter: grayscale(100%) blur(6px) brightness(70%); }
    body.sidemenu-left-opened { background-color: #b7b7b7;} */
    
    body>.activity-holder main .ctrlrte ._toolbar { top: 51px!important; }


    .appbar-menu {
        bottom: 64px; right: 0; left: 0; top: auto; max-width: none;
    }

    .activity {
        >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: 52px; display: none; align-self: auto; width: auto}
        >.waside>aside .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;}
        .page-wrapper main .toolbox-article{ top:51px; }
    }
    section.activity>.page-wrapper.waside:has(>main>.tabsview:only-child)>aside { z-index: 2 }

    .activity.aside-menu-expanded {
        >.waside>aside { display: block; z-index: 1}
    }
    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; }
}