/* PHOTOROLLER */
.photoroller {
    .preview{
        width: 100%; height: auto; aspect-ratio: 1 / 1; white-space: nowrap; font-size: 0; overflow: hidden; position: relative;
        .itm { flex: 0 0 100%; max-width: 100%; object-fit: contain; height: 100%; display: inline-block }
        .itm.trans { transition: margin 200ms; }
        .ctrl-vid {
            position: absolute; bottom: 5%; left: 0; right: 0; text-align: center; display: none;
            &.show { display: block; }
            >div { background-color: rgba(255, 255, 255, 0.5); display: inline-block; padding: 3px; border-radius: 5px;}
            >div>svg { width: 28px; display: inline-block; cursor: pointer; padding: 5px; border-radius: 8px; margin-left: 10px; margin-right: 10px;}
            >div>svg:hover { background-color: white; fill: #5d5858;}
        }
    }
    .thumbs {
        display: flex; flex-wrap: wrap; justify-content: center;
        .itm { display: flex; box-sizing: border-box; padding: 5px; width: calc(100% / 6 ); max-width: 120px; min-width: 60px; height: auto; aspect-ratio: 1 / .8;    cursor: pointer;}
        .itm-img { flex: 1; background-repeat: no-repeat; background-position: center; background-size: 90%;  border: 2px solid light-dark(#dedede, #5f5f5f); }
        .itm:hover { border-color: rgba(52, 51, 52, 0.92); }
        .itm .plico { width: 50px; fill: white; opacity: .7; }
    }
}

/* PAGE INDEX */
body:has(>section.act-portal-index) {
    >header { background: none; overflow: unset; backdrop-filter: blur(10px); .logo { height: 80px; background-color: light-dark(#8a008f, white);}}
    .appbar .buttons .appbar-ico { background-color: light-dark(#880093, white); opacity: .5 }

    .appbar-ind { color: light-dark(#880093, white)!important; border-color: light-dark(#880093, white)!important; opacity: .5; }

}
.act-portal-index {
    width: 1000px; margin-left: auto; margin-right: auto;
    header { display: none;}
    .h1 {
        color: light-dark(#880093,#b9b9b9); text-align: center; font-size: 32px; margin-top: 30px; margin-bottom: 30px;
        @media screen and (max-width: 640px) {font-size: 26px; }
    }
    main { display: flex; flex-direction: column; gap: 20px;}
    @media screen and (max-width: 1000px) { width: 100%;}

    .par-featured {
        display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 50px;
        .itm {
            display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: light-dark(#6C004EA1, #FFFFFF8E); flex: 0 0 140px; align-items: center; transition: all .2s;
            @media screen and (max-width: 640px) { flex: 0 0 100px; }
            .lbl { font-size: 18px; text-align: center; @media screen and (max-width: 640px) {font-size: 16px;  } }
            .svg-ico { mask-size: 40px; mask-repeat: no-repeat; padding: 20px; background-color: white;}
            .i-img {
                border-radius: 100px; background-color: light-dark(#ffffffa1, rgb(255 255 255 / 13%));
                display: block; max-width: 100px; max-height: 100px; height: 100px; width: 100px; background-position: center; background-repeat: no-repeat; background-size: auto 64px;
            }
            .i-ico-h {
                box-shadow: inset 0px 20px 60px -40px rgb(0 139 255 / 35%); transition: all .2s;
                width: 120px; height: 120px; border-radius: 120px; background-color: light-dark(#ffffffa1, rgb(255 255 255 / 13%)); display: flex; justify-content: center;
                @media screen and (max-width: 640px) { width: 60px; height: 60px; }
                .i-ico {
                    mask-repeat: no-repeat; mask-position: center; mask-size: 60px; background-color: light-dark(#6C004EA1, #FFFFFF8E); width: 100%; transition: all .2s;
                    @media screen and (max-width: 640px) { mask-size: 36px;  }
                }
            }
        }
        .itm:hover {
            color: light-dark(#a80066, white);
            .i-ico-h {
                box-shadow: inset -2px -19px 60px -30px rgb(22 255 0 / 35%);
                .i-ico { background-color: light-dark(#6C004EA1, white); }
            }
        }
        .itm:active {
            .i-ico-h { box-shadow: inset 0 0px 40px 0px rgb(255 252 0 / 35%); }
        }

    }
    .par-regular {
        display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 50px;
        a {
            flex: 0 0 100px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-decoration: none; color: light-dark(#6C004EA1, #FFFFFF8E); transition: all .2s;
            &:hover { color: light-dark(#d50061, white); .ico { background-color: light-dark(#d50061, white);} }
            .ico {
                mask-position: center; mask-repeat: no-repeat; mask-size: 36px; display: block; width: 42px; height: 42px; background-color: light-dark(#6C004EA1, #FFFFFF8E);
                @media screen and (max-width: 640px) { mask-size: 34px; }
            }
            .lbl { display: block; text-align: center; font-size: 14px;}
        }
    }
    .features-ttl {
        font-size: 28px; text-align: center; color: light-dark(#880093,#b9b9b9);
        @media screen and (max-width: 640px) {font-size: 22px; }
    }
    .features {
        display: flex; gap: 40px; justify-content: center; color: light-dark(#880093,#b9b9b9); @media screen and (max-width: 640px) { gap: 10px;}
        .feature {
            display: flex;; flex-direction: column; gap: 10px; align-items: center;
            .f-ttl { font-size: 20px; text-align: center; @media screen and (max-width: 640px) {font-size: 18px; }}
            .f-dsc { font-size: 16px; text-align: center; @media screen and (max-width: 640px) {font-size: 14px; }}
            .ico { width: 94px; height: 94px; mask-size: 94px; mask-position: center; mask-repeat: no-repeat; background-color: light-dark(#880093,#b9b9b9);}
        }
    }

}
.mesh-bg {
    width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; background-size: 200% 200%; animation: liquidMesh 15s ease infinite;
    background-color: light-dark(#bfc8dd, #173f51); transition: all .2s;
    background-image:
            radial-gradient(at 0% 0%, light-dark(hsl(0 0% 78%), hsl(0 31% 22%)) 0, transparent 50%),
            radial-gradient(at 50% 0%, light-dark(hsl(226 25% 80%), hsl(224 53% 23%)) 0, transparent 50%),
            radial-gradient(at 100% 0%, light-dark(hsl(340 56% 83%), hsl(342 100% 20%)) 0, transparent 50%),
            radial-gradient(at 0% 100%, light-dark(hsl(335 15% 75%), hsl(339 33% 18%))0, transparent 50%),
            radial-gradient(at 100% 100%, light-dark(hsl(224 67% 86%), hsl(227 54% 15%)) 0, transparent 50%);
}

@keyframes liquidMesh {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}




/* PAGE - ADS */
.act-portal-ads {
    display: flex; flex-direction: column; gap: 10px;
    .subcats {
        display: flex; flex-wrap: wrap; gap: 10px; width: 100%; overflow-x: auto; min-width: 0; margin-bottom: 20px;
        &:not(:has(.ico)) { .lbl { text-align: center;}}
        @media screen and (max-width: 800px) {
            margin: 0 -10px 0 -10px; padding: 0 10px 0 10px; overflow-x: scroll; flex-wrap: nowrap; width: calc(100% + 20px); min-width: 0; box-sizing: border-box;
            scrollbar-width: none; &::-webkit-scrollbar{ display: none;}
        }
        &:empty { display: none;}
        .subcat{
            color: light-dark(#393939, white); text-decoration: none; background-color: light-dark(white, #363739); border-radius: 20px; padding: 10px 15px 10px 15px; display: flex; gap: 10px; align-items: center;
            .ico { background-color: light-dark(#6c6c78,#c8c8c8); mask-size: 24px; min-width: 24px; height: 24px; display: block;}
            .lbl { display: block; }
        }
    }
    .hdr-btns {
        .butt-tool {
            background-color: light-dark(white,#363739); border: 1px solid grey; border-radius: 20px; padding: 10px; cursor: pointer; transition: all .2s;
            @media screen and (max-width: 800px) { span { display: none;}}
        }
        .butt-tool:hover { background-color: grey; color: white; &::before { background-color: white;}}
        .butt-sort {
            body:has(.order-selector:not(:empty)) & { &::before {mask-image: url("/f/svg/sect-portal/ads-filter-close.svg"); mask-size: 18px;} }
            &::before { content: ""; mask: url("/f/svg/sect-portal/ads-b-sort.svg") no-repeat center/20px; background-color: light-dark(black,white); padding: 10px; margin-right: 5px; transition: all .2s;}
        }
        .butt-filter {
            body:has(.filter:not(:empty)) & { &::before {mask-image: url("/f/svg/sect-portal/ads-filter-close.svg"); mask-size: 18px;} }
            &::before { content: ""; mask: url("/f/svg/sect-portal/ads-b-filter.svg") no-repeat center/20px; background-color: light-dark(black,white); padding: 10px; margin-right: 5px; transition: all .2s;}
        }
    }

    .page-lay-1 {
        display: flex; gap: 20px; align-items: start; position: relative;;
        >.filter {
            flex: 0 0 300px; position: sticky; top: 124px; display: flex; flex-direction: column; gap: 10px;
            &:empty { display: none;}
            .buttons { display: flex; gap: 10px; justify-content: center; padding-top: 20px; padding-bottom: 20px;}
            .b-clear-mobile { display: none;}
            .b-show-mobile { display: none;}
        }
        .order-selector {
            display: flex; gap: 10px; justify-content: end;
            &:empty { display: none;}
            >div { padding: 10px; border-radius: 20px; light-dark(white,#363739); border: 1px solid grey; cursor: pointer; transition: all .2s;}
            >div.active { background-color: light-dark(#fff6e0, #5c544b);}
            >div:hover { background-color: lightgray;}
        }
        .frag-ads-holder { display: flex; flex-direction: column; gap: 20px; min-width: 0;}
        @media screen and (max-width: 800px) {
            >.filter {
                position: fixed; top: var(--appbar-height); bottom: var(--appbar-height); left: 0; right: 0; background-color: light-dark(white,#1a2024); padding: 20px; z-index: 1;
                .b-clear-desktop { display: none;}
                .b-clear-mobile { display: block;}
                .b-show-mobile { display: block;}
            }
        }
    }

    .frag-ads-holder { flex: 1;}
}


/* FRAG - ADS */
.frag-ads {
    .none-holder{
        padding: 50px; text-align: center; color: light-dark(#474747, #c6c6c6); display: flex;; flex-direction: column; gap: 20px; flex: 1;
        .none-ttl { font-size: 32px;}
        .none-txt { font-size: 20px;}
    }

}
.ads-browse {
    display: flex; flex-wrap: wrap; gap: 24px; justify-content:center;
    @media screen and (max-width: 1400px) { justify-content: center; }
    @media screen and (max-width: 550px) { gap: 20px; }
    .ad-itm {
        display: flex; flex-direction: column; min-width: 250px; flex:0; background-color: light-dark(white,#343f42); cursor: pointer; position:relative; border-radius: 5px; overflow: hidden;
        text-decoration: none; color: light-dark(black, white); box-sizing: border-box;
        /* &:last-child { margin-right: auto;  @media screen and (max-width: 1400px) { margin-right: unset; }} */
        &.faved {
            .fav { backdrop-filter: brightness(70%);}
            .fav::after { background-color: #ffb800;}
        }
        &.hidden { filter: opacity(.25) contrast(.75) grayscale(1);}
        .txts { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 5px;  }
        .line-1 { display: flex; justify-content: space-between;}
        .imgs {
            font-size: 0;
            img { object-fit: cover; /*height: 200px;*/ width: 100%; object-position: center; aspect-ratio: 1 / 1; }
        }
        .fav {
            backdrop-filter: brightness(150%); padding: 5px; aspect-ratio: 1/1; border-radius: 30px; position: absolute; top: 5px; right: 5px; display: flex;
            &::after { content: ''; mask: url("/f/svg/sect-portal/ads-card-star.svg") no-repeat center/24px; padding: 12px; background-color: darkgrey; }

        }
        .optype {
            padding: 5px; background-color: white; font-weight: bold; font-size: 14px; border-radius: 15px;
            &.optype-1 { background-color: #9ebd9f; color: white;}
            &.optype-2 { background-color: #4f8651; color: white;}
            &.optype-3 { background-color: #969696; color: white;}
            &.optype-4 { background-color: #eeba84; color: white;}
            &.optype-5 { background-color: #e28829; color: white;}
            &.optype-6 { background-color: #969696; color: white;}
            &.optype-7 { background-color: #a9b7e1; color: white;}
            &.optype-8 { background-color: #446ce4; color: white;}
            &.optype-9 { background-color: #e3b3b3; color: white;}
            &.optype-10 { background-color: #dc5353; color: white;}
            &.optype-11 { background-color: #b6b6b6; color: white; font-weight: normal;}
            &.optype-12 { background-color: #b6b6b6; color: white; font-weight: normal;}
        }
        .condition {
            font-size: 12px; font-weight: bold; text-align: right;
            &.condition-1 { color: #0058b3;}
            &.condition-2 { color: darkgreen;}
            &.condition-3 { color: #7e6400;}
            &.condition-4 { color: #cf4600;}
        }
        .title>span { font-size: 15px; color: light-dark(#2b2b2b, white); }
        .price>span { font-size: 18px; font-weight: bold; color: light-dark(#de6800, #ffb700); }
        .price-per { color: #de6800; font-size: 14px; font-weight: bold;}
        .city { font-size: 14px;
            &::before { content: ''; mask: url("/f/svg/sect-portal/ads-card-pin.svg") no-repeat center/10px; padding: 5px; background-color: light-dark(#474747, white); margin-right: 3px; }
        }
        .days-pub { font-size: 14px;
            &::before { content: ''; mask: url("/f/svg/sect-portal/ads-card-time.svg") no-repeat center/10px; padding: 5px; background-color: light-dark(#474747, white); margin-right: 3px; }
        }
        .bottom-divider { margin-top: auto;}
        .note { padding: 4px; border-radius: 5px; font-size: 14px; color: black; opacity: .8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;}

        @media screen and (max-width: 550px) {
            min-width: calc((100% - 30px) / 2);
        }
    }

}




/* PAGE - AD */
.act-portal-ad {
    >div>main { @media screen and (max-width: 800px) { padding: 0; border-radius: 0}}
    .hdr-btns {
        display: flex; gap: 10px;
        >div {
            padding: 5px; border-radius: 5px; cursor: pointer; transition: all .25s; background-color: light-dark(#ededed,#545a5f); display: flex; align-items: center; gap: 5px; font-size: 14px; transition: all .2s;
            &:hover { background-color: light-dark(#d6d6d6, #737c85); }
            &:active { background-color: light-dark(#bbdbf4, #416681); }
        }
        .favorite {
            &::before { content: ""; mask: url("/f/svg/sect-portal/ad-tool-fav.svg") no-repeat center/24px; padding: 12px; background-color: light-dark(#777777, #cdc5b9); font-size: 0;}
            &:not(.active) { .lbl-fav {display: inline-block } .lbl-unfav {display: none; } }
            &.active { &::before { background-color: darkorange;} .lbl-fav { display: none; } .lbl-unfav { display: inline-block; } }
        }
        .note {
            &::before { content: ""; mask: url("/f/svg/sect-portal/ad-tool-note.svg") no-repeat center/20px; padding: 12px; background-color: light-dark(#777777, #cdc5b9); font-size: 0;}
            &:not(.active) { .lbl-note {display: inline-block } .lbl-unnote {display: none; }}
            &.active { &::before { background-color: darkorange;} .lbl-note { display: none; } .lbl-unnote { display: inline-block; } }
        }
        .hide {
            &::before { content: ""; mask: url("/f/svg/sect-portal/ad-tool-hide.svg") no-repeat center/20px; padding: 12px; background-color: light-dark(#777777, #cdc5b9); font-size: 0;}
            &:not(.active) { .lbl-hide {display: inline-block } .lbl-unhide {display: none; }}
            &.active { &::before { background-color: darkorange;} .lbl-hide { display: none; } .lbl-unhide { display: inline-block; } }
        }
        @media screen and (max-width: 800px) { >div>span {display: none!important;}}
    }

    .photoroller {
        .preview { aspect-ratio: 1 / 1; background-color: light-dark(white, #3d424a);}
        @media screen and (max-width: 800px) { margin: 0 -10px 0 -10px; .preview { border-radius: 0;}}
    }
    .pttl { margin-top: 0; margin-bottom: 0; font-size: 24px; }
    .ad-cols {
        display: flex; gap: 50px;
        @media screen and (max-width: 1000px) { flex-direction: column; gap: 10px;}
        .ad-col-imgs {
            flex: 0 0 600px; max-width: 600px; position: relative; display: flex; flex-direction: column; gap: 20px;
            @media screen and (max-width: 1200px) { max-width: 500px; }
            @media screen and (max-width: 1100px) { max-width: 400px; }
            @media screen and (max-width: 1000px) { max-width: 100%; padding-left: 50px; padding-right: 50px; flex: unset; }
            @media screen and (max-width: 600px) {padding:0; }
        }
        .ad-col-sticky { position: sticky; top: 144px; @media screen and (max-width: 1000px) { position: unset; }}
        .ad-col-txts {
            flex: 1; display: flex; flex-direction: column; gap: 10px;
            .subttx { font-size: 20px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;}
        }
    }
    .notice-notpublished { padding: 10px; background-color: light-dark(#f8cbb4,#864040); border-radius: 10px; font-weight: bold; font-size: 14px;}

    .user-note {
        display: flex; flex-direction: column; gap: 10px; background-color: lightgrey; padding: 10px; border-radius: 10px; color: black;
        &:has(.note-text:empty){ display: none;}
        .note-date { font-style: italic; font-size: 14px;}
    }
    .user-note-hidden { background-color: light-dark(#e6e6e6,#545a5f);  font-size: 14px; padding: 10px; border-radius: 10px;}
    .ad-ot-holder {
        display: flex; gap: 10px;
        >* { border-radius: 5px; padding: 5px; font-size: 18px; display: flex; align-items: center;}
        .ot-private { border: 2px solid lightgrey;}
        .ot-business { background-color: light-dark(#474747, #e0e0e0); color: light-dark(white,#000000);}
        .ot-encumbrance {  background-color: #d10000; color: white; }
        .ot-sendable { background-color: #558eba; color: white;  &::before{ content: ''; mask:url("/f/svg/sect-portal/ad-sendable.svg") no-repeat center/40px 32px; background-color: white; padding: 8px 20px 8px 20px; margin-right: 5px;} }
    }
    .price-holder{
        display: flex;; gap: 10px; align-items: center;
        .price-lbl { font-size: 22px; color: grey;}
        .price { font-size: 24px;}
        .price-haggle  { background-color: darkorange; color: white; padding: 5px; border-radius: 5px;}
    }
    .pricelist {
        display: grid; grid-template-columns: 1fr 1fr;
        >div { padding: 10px; border-bottom: 1px solid grey; font-size: 18px;}
    }
    .art-selector{
        display: flex; flex-wrap: wrap; gap: 10px;
        @media screen and (max-width: 800px) {
            flex-wrap: nowrap; overflow-x: scroll; scrollbar-width: none; padding: 0 10px 0 10px; margin: 0 -10px 0 -10px;
            &::-webkit-scrollbar {display: none;}  }
        .art {
            border: 2px solid transparent;  box-sizing: border-box; cursor: pointer; padding: 10px; border-radius: 10px;
            flex:0 0 calc((100% - 20px) / 3); max-width: calc((100% - 20px) / 3);  background-color: light-dark(white,#1a2024); transition: all .2s;
            @media screen and (max-width: 800px) { flex:unset; max-width: 220px; min-width: 220px;}
            &:hover { background-color: light-dark(#ededed, #3c4650)}
            &:active {box-shadow: inset 0px 0px 50px 10px rgb(255 226 0 / 0.59);}
            &.selected { border: 2px solid orange;}
            .ttl { .sku { margin-right: 10px; font-weight: bold; font-size: 15px; &:empty { display: none;}} font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
            .price { display: flex; gap: 10px; align-items: center;
                .price-promo { font-size: 18px; font-weight: bold; color: light-dark(orangered, orange);}
                .price-old { color:light-dark(grey, grey); text-decoration: line-through orange; }
            }
            .cashback { color: light-dark(green, #4dcc4d);}
            .stock-avail { color: light-dark(green, #9cbaa6); font-weight: bold;}
            .stock-unavail { color: light-dark(orangered, #bd5f4e);}
        }
    }
    .art-price-holder {
        display: flex; flex-direction: column;; gap: 10px; align-items: start;
        .ttl { .sku { font-weight: bold; margin-right: 10px; &:empty { display: none;}} }
        .price { margin-top: 10px; margin-bottom: 10px;}
        .price-lbl { font-size: 22px; color: grey; margin-right: 10px;}
        .price-promo { font-size: 24px; color: light-dark(orangered, orange); margin-right: 10px;}
        .price-old { font-size: 22px; color:light-dark(grey, grey); text-decoration: line-through orange; }
        .price-regular { font-size: 24px; }
        .cashback { font-size: 18px; color: light-dark(green, #4dcc4d);}
        .buy-seller { background-color: light-dark(#ffa439, #db7600); color: white;        }
    }

    .props-grid {
        display: grid; grid-template-columns: 1fr 1fr;
        >div { padding: 5px; border-bottom: 1px solid grey; }
        .cval-hidden { color: grey; font-style: italic;}
    }
    .props-hidden { color: grey; font-style: italic;}
    .conditions {
        display: flex; align-items: start; gap: 10px;
        >* { padding: 5px; border-radius: 3px; }
    }
    .addr-primary {
        display: flex; flex-direction: column; gap: 10px;
        .map-tools {
            display: flex; gap: 10px; align-items: center;
            .address-text { flex: 1; font-weight: bold;}
            button.b-map {
                padding: 10px; border-radius: 5px; border: none; cursor: pointer; background-color: light-dark(#dceef1, #545e60);
                &:hover { background-color: light-dark(#d6d6d6, #737c85);}
                &::before { content: ''; mask: url("/f/svg/sect-portal/ad-map.svg") no-repeat center/24px; padding: 12px; background-color: light-dark(#2a3550, #cccdce); margin-right: 5px;}
            }
        }
        .map-city { }
        .map-holder { height: 400px; &:empty{ display: none;}}
    }

    .addr-item {
        &::before{ content: ""; mask: url("/f/svg/sect-portal/marker.svg") no-repeat center/20px; padding: 10px;margin-right: 10px; background-color: #737373
        }
        font-size: 18px;
    }
    .addr-deliv {
        display: flex;; flex-direction: column;; gap: 5px;
        .addr-deliv-ttl { font-weight: bold;}
        .addr-deliv-item { .path{ color: grey;}}
    }
    .fea-invalids {
        background-color: #d3e8d5; border-radius: 5px; padding: 10px;
        &::before { content: ""; mask:  url("/f/svg/sect-portal/ad-invalid.svg") no-repeat center/24px; padding: 12px; margin-right: 10px; background-color: #2b2b2b;}
    }
    .fea-pensioneers {
        background-color: #d3e8d5; border-radius: 5px; padding: 10px;
        &::before { content: ""; mask: url("/f/svg/sect-portal/ad-pensioneer.svg") no-repeat center/24px; padding: 12px; margin-right: 10px; background-color: #2b2b2b;}
    }
    .author {
        display: flex; gap: 20px; padding: 10px; background-color: light-dark(white,#1a2024); border-radius: 10px;
        .author-img { max-width: 60px; max-height: 60px; min-width:60px; min-height:60px; border-radius: 60px; overflow: hidden; object-fit: cover;}
        .author-name { font-size: 20px;}

    }
    .pub-date-holder{
        display: flex; gap: 10px;
        .ico { mask:url("/f/svg/sect-portal/ad-pubdate.svg") no-repeat center/32px; background-color: grey; padding: 16px; }
    }
}
.win-portal-ad-note {
    textarea { height: 200px;}
    .selcolor {
        display: flex;  cursor: pointer; flex-wrap: wrap; justify-content: center;;
        >div { flex: 0 0 15%; height: 40px; text-align: center; color: black;  display: flex; align-items: center; height: 50px; justify-content: center; box-sizing: border-box;}
        >div.selected { border: 3px solid blue;}
    }
}