/* INFO */
.act-my-company {
    .cmp-name { font-size: 32px; color: #3f3f3f}
    .cmp-descr { font-size: 16px; color: #3f3f3f }
    .cmp-oonline { font-weight: bold;}
    .cmp-logo {  width: 120px; height: 120px; }
    .cmp-nologo { width: 120px; height: 120px; color: white; line-height: 120px; text-align: center; border-radius: 50%; font-size: 60px;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite;	}
    @keyframes gradient { 0% { background-position: 0% 50%; }  50% { background-position: 100% 50%; }  100% { background-position: 0% 50%; } }

    .branches-list {
        display: flex; flex-direction: column; gap: 20px;
        .branch-name { font-size: 20px; font-weight: bold;}
        .branch-city, .branch-address { font-style: italic;}
        .branch-butts { margin-top: 10px; display: flex; gap: 10px;}
        .branch-feat {
            display: flex; gap: 10px; margin-top: 10px;margin-bottom: 10px;
            div { padding: 5px; border-radius: 5px; }
            .branch-nocash { background-color: #da7c58; color: white;}
            .branch-cash { background-color: #547e46; color: white;}
            .branch-nowhs { background-color: #da7c58; color: white;}
            .branch-whs { background-color: #547e46; color: white;}
            .branch-hidden { background-color: #8e8e8e; color: white;}
            .branch-isales_cashier { background-color: #005f9e; color: white;}
            .branch-isales_whs { background-color: #37981e; color: white;}
        }
        .branch-feat:empty{ display: none;}
    }
    .cmp-branches-online { font-size: 16px; background-color: rgb(255, 225, 141); border-radius: 5px; padding: 10px; margin-top: 10px;}
    .myc-comm-ii {
        display: flex; flex-direction: column; gap: 10px;
        .myc-comm-i-lbl{ font-size: 14px; color: grey;}
        .myc-comm-i-txt{ font-size: 18px; color: black;}
        .myc-comm-i { display: flex; gap: 5px;}
        .myc-comm-i::before { content: ""; mask-position: left center; mask-repeat: no-repeat; mask-size: 32px; display: inline-block; min-width: 40px;}
        .myc-comm-i-tel::before { mask-image: url("/f/svg/social/phone-wired-mask.svg"); background-color: #3f487e; }
        .myc-comm-i-wa::before { mask-image: url("/f/svg/social/whatsapp-wired-mask.svg"); background-color: green; }
        .myc-comm-i-yt::before { mask-image: url("/f/svg/social/youtube-wired-mask.svg"); background-color: #a90000; }
        .myc-comm-i-ig::before { mask-image: url("/f/svg/social/instagram-wired-mask.svg"); background-color: #b5007d; }
        .myc-comm-i-tt::before { mask-image: url("/f/svg/social/tiktok-wired-mask.svg"); background-color: #430050; }
        .myc-comm-i-li::before { mask-image: url("/f/svg/social/linkedin-wired-mask.svg"); background-color: #003097;}
        .myc-comm-i-tg::before { mask-image: url("/f/svg/social/telegram-wired-mask.svg"); background-color: #2a3550;}
        .myc-comm-i-th::before { mask-image: url("/f/svg/social/threads-wired-mask.svg"); background-color: #232323;}
        .myc-comm-i-www::before { mask-image: url("/f/svg/social/www-wired-mask.svg"); background-color: #3a3a3a; }
    }
    .branch-imgs {
        display: flex; gap: 10px; overflow-x: scroll;
        img { border-radius: 5px; object-fit: cover; max-height: 120px;}
    }
    .branch-imgs-none { padding: 20px; color: grey; text-align: center; background-color: #f4f4f4; border-radius: 5px;}
}
.act-my-company-domain{
    .errors-holder>div { color: darkred;}
    .domtype-ttl, .sellang-ttl { font-size: 24px;}
    .domtype-info{}
    .row-domtypes {
        display: flex; gap: 20px;
        >div { border: 2px solid lightgrey; border-radius: 5px; padding: 10px; flex: 1; cursor: pointer;}
        >div:hover { background-color: #d0e3d3; border-color: darkgreen;}
        >div .dt-ttl, >div .sellang-ttl { font-size: 18px}
        >div .dt-descr { font-size: 14px}
    }
    .butt-next { align-self: end;}
}


.act-my-company-edit {
    .schedline { display: flex; gap: 5px;}
    .schedline>.ctrl:first-child { flex: 1;}
    .schedline .seltime { min-width: 130px;}
}

.act-my-branch-edit {
    .branch-schedule-ttl { font-size: 18px; font-weight: bold; margin-bottom: 20px;}
    .branch-schedule-day { font-size: 20px; display: flex; justify-content:space-between;}
    .schedline { display: flex; gap: 5px;}
    .schedline>.ctrl:first-child { flex: 1;}
    .schedline .seltime { min-width: 130px;}
}

.act-my-cmp-site .domnotice { padding: 10px; background-color: rgb(255, 215, 122);}


/* ADS */
.myc-ads{
    .tbl-myads {
        .thmb { width: 48px; height: 48px; object-fit: cover; margin-right: 15px;}
        .placeholder {
            display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
            .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/ads-placeholder.svg") no-repeat center/54px; background-color: grey; }
            .ph-ttl { font-size: 22px; color: grey;}
            .ph-descr { font-size: 16px; color: grey; text-align: center;}
        }
        .folderholder {
            display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
            .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/ads-folderholder.svg") no-repeat center/54px; background-color: grey; }
            .ph-ttl { font-size: 22px; color: grey;}
            .ph-descr { font-size: 16px; color: grey; text-align: center;}
        }
    }
    .bb-add-folder { color: black; background: url("/f/svg/sect-myc/ads-b-add-folder.svg") no-repeat 5px center/20px; padding-left: 30px; background-color: #ffffff;  }
    .bb-add-ad { color: white; background: url("/f/svg/sect-myc/ads-b-add-ad.svg") no-repeat 5px center/28px; padding-left: 36px; background-color: #b87600; border: none;  }
}


/* STOCK */
.myc-stock {
    .tbl-stock {
        thead>tr { background-color: #eeeeee; text-align: left}
        th.stk-n { writing-mode: vertical-lr; text-align: right; padding: 5px}
        td { border: 1px solid lightgrey; padding-left: 10px; padding-right: 10px;}
        tr.fldr td { border-left: 0; border-right: 0;}
        tr.fldr td:first-child { border-left: 1px solid lightgrey; }
        tr.fldr td:last-child { border-right: 1px solid lightgrey; }
        td:first-child { border-right: 0;}
        td:nth-child(2) { border-left: 0; width: 100%;}
        .thmb { width: 48px; height: 48px; object-fit: cover;  }
        td.stk { color: #006398; min-width: 20px;}
        td.stk:hover { background-color: #dce6e9}
        .placeholder {
            display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
            .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/stock-placeholder.svg") no-repeat center/64px; background-color: grey; }
            .ph-ttl { font-size: 22px; color: grey;}
            .ph-descr { font-size: 16px; color: grey; text-align: center;}
        }
        .folderholder {
            display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
            .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/stock-folderholder.svg") no-repeat center/54px; background-color: grey; }
            .ph-ttl { font-size: 22px; color: grey;}
            .ph-descr { font-size: 16px; color: grey; text-align: center;}
        }
    }
}

/* BOOK - DOCS  */
.myc-book{
    .placeholder {
        display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
        .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/book-placeholder.svg") no-repeat center/64px; background-color: grey; }
        .ph-ttl { font-size: 22px; color: grey;}
        .ph-descr { font-size: 16px; color: grey; text-align: center;}
    }
}
.myc-doc-wb{
    .doc-form { display: flex; flex-direction: column; gap: 10px;}
    .warning { background-color: #9a3838; color: white; padding: 10px; border-radius: 5px;}
    .total { display: flex; gap: 20px; align-items: center; padding-top: 5px; padding: 5px; background-color: white; border: 1px solid grey}
    .tbl-items{
        border-collapse: collapse; width: 100%;
        thead td { font-weight: bold;}
        td { border: 1px solid grey; padding: 5px; background-color: white;}
        .thmb { width: 60px; height: 48px; object-fit: cover;}
        .i-txt { width: 100%; height: 48px; object-fit: cover; margin-right: 15px;}
        .i-qty { min-width: 60px; white-space: nowrap; color: #2e76bd}
        .i-dsc, .i-cbk { min-width: 40px; white-space: nowrap; color: #2e76bd}
        .i-prc { min-width: 80px; white-space: nowrap;color: #2e76bd}
        .i-amnt { min-width: 80px; white-space: nowrap;}
        .td-del { mask: url("/f/svg/sect-myc/doc-tbl-item-deleted.svg") no-repeat center/26px; min-width: 26px; max-width: 26px; background-color: grey; border: none; cursor: pointer; &:hover{ background-color: black} }
        .td-dummy { padding: 20px; text-align: center; color: grey;}
        .i-thmb-del>div { mask: url("/f/svg/sect-myc/doc-tbl-item-deleted.svg") no-repeat center/26px; background-color: red; padding: 15px; text-align: center; border: none; cursor: pointer; &:hover{ background-color: black}}
        .i-txt-del { color: darkred;}
    }
}

.act-doc-wb {
    .tbl {
        >div { display: flex; border-bottom: 1px solid lightgray; margin-bottom: 5px; padding-bottom: 5px;}
        .thmb { width: 32px; height: 32px; object-fit: contain; }
        .col1 { flex: 1; width: 300px; }
        .prc { width: 100px;}
        .qty { width: 70px;}
        .sku { width: 120px;}
    }
    .tbl-items {

        .tbl-hdr td { padding: 5px; background-color: #e6e6e6; }

        td:not(.i-thmb) { padding: 5px;}

        td[contenteditable] { color: blue}
    }
}


/* EMPOLOYEES */
.myc-employees{
    .employee-ii { display: flex; flex-direction: column; }
    .employee-i {
        border-bottom: 1px solid lightgrey; display: flex; gap: 10px; padding: 10px;
        .i-logo { display: block; width: 60px; height: 60px; border-radius: 30px; background-size: cover; background-position: center;}
        .i-tlogo { display: block; width: 60px; height: 60px; border-radius: 30px; background-color: #4b5c7e; text-align: center; align-content: center; color: white; font-size: 24px;}
        .i-names { font-size: 22px;}
        .i-txts { flex: 1;}
        .b-remove { align-self: center;}
    }
    .employee-i:hover { background-color: #e9e9e9;  }
    .employee-i:last-child { border-bottom: none;}
    .invite-ii { display: flex; flex-direction: column;}
    .invite-i {
        display: flex; padding-bottom: 5px; border-bottom: 1px solid lightgrey; padding: 10px;
        .i-txts { flex: 1}
    }
    .invite-i:hover { background-color: #e9e9e9; }
}

/* ATTRIBUTES */
.myc-attrs{
    .tbl-attrs {
        img.thmb { width: 90px; height: 60px; object-fit: cover;}
        .td-flex-c { display: flex; flex-direction: column; gap: 5px;}
        .td-txts { padding-left: 10px; vertical-align: top;}
        .j-ttl { font-size: 18px;}
        .j-date { color: grey;}
        .placeholder {
            display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
            .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/attrs-placeholder.svg") no-repeat center/54px; background-color: grey; }
            .ph-ttl { font-size: 22px; color: grey;}
            .ph-descr { font-size: 16px; color: grey; text-align: center;}
        }
    }
}

/* PROMOS */
.myc-promos {
    .tbl-promos {
        img.thmb { width: 90px; height: 60px; object-fit: cover;}
        .td-flex-c { display: flex; flex-direction: column; gap: 5px;}
        .td-txts { padding-left: 10px; vertical-align: top;}
        .j-ttl { font-size: 18px;}
        .j-date { color: grey;}
        .placeholder {
            display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
            .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/promos-placeholder.svg") no-repeat center/64px; background-color: grey; }
            .ph-ttl { font-size: 22px; color: grey;}
            .ph-descr { font-size: 16px; color: grey;}
        }
    }
}
.myc-promo-toggle { main { padding: 50px; align-items: center;}
    .msg-toggle { padding: 20px;}
    .svg-progress { mask:url("/f/svga/pacman.svg") no-repeat center/160px; background-color: #ff8800; width: 200px; height: 100px; }
}

/* JOBS */
.myc-jobs {
    .tbl-jobs {
        img.thmb { width: 90px; height: 60px; object-fit: cover;}
        .td-flex-c { display: flex; flex-direction: column; gap: 5px;}
        .td-txts { padding-left: 10px; vertical-align: top;}
        .j-ttl { font-size: 18px;}
        .j-date { color: grey;}
        .placeholder {
            display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
            .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/jobs-placeholder.svg") no-repeat center/64px; background-color: grey; }
            .ph-ttl { font-size: 22px; color: grey;}
            .ph-descr { font-size: 16px; color: grey;}
        }
    }

}

/* POSTS */
.myc-posts{
    .tableview-posts {
        img.thmb { width: 120px; height: 90px; object-fit: cover;}
        .td-item { display: none;}
        .td-txts { width: 100%; padding-left: 10px; vertical-align: top;}
        .placeholder {
            display: flex; flex-direction: column; gap: 20px; align-items: center; padding-top: 50px;
            .ph-ico { padding: 40px; mask: url("/f/svg/sect-myc/posts-placeholder.svg") no-repeat center/54px; background-color: grey; }
            .ph-ttl { font-size: 22px; color: grey;}
            .ph-descr { font-size: 16px; color: grey;}
        }
    }
}

/* PAGES */
.myc-pages {
    article { display: flex; flex-direction: column;}
    .myc-std-page-item {
        margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid grey;
        .page-name { font-size: 22px; }
        .pubstat { font-weight: bold; margin-top: 5px; margin-bottom: 10px}
        .pubstat-green { color: darkgreen;}
        .pubstat-red { color: darkred;}
    }
}

/* SHIPPING */
.myc-shipping {
    .tbl-none { display: flex; flex-direction: column; gap: 10px; align-items: center; color: grey; }
    .tbl-none-ptypes:before { content: ""; mask: url("/f/svg/sect-myc/shipping-ptype.svg") no-repeat center/56px; background-color: grey; padding: 30px;}
    .tbl-none-dlocal:before { content: ""; mask: url("/f/svg/sect-myc/shipping-local.svg") no-repeat center/64px; background-color: grey; padding: 30px;}
    .tbl-none-dinter:before { content: ""; mask: url("/f/svg/sect-myc/shipping-inter.svg") no-repeat center/56px; background-color: grey; padding: 30px;}
}
.myc-shipping-edit {
    .placeholder-nodiscounts { padding: 50px; text-align: center; color: grey; font-size: 18px;}

}


/* THEME => BANNER */
main.myc-banner {
    .bframes { display: flex; flex-direction: column; gap: 20px;}
    .bframe {
        display: flex; gap: 10px; height: 300px; cursor: pointer;padding: 5px;
        .prev-mob { display: flex; background-color: #f0f0f0; border-radius: 5px; background-position: center; background-repeat: no-repeat; background-size: cover}
        .prev-desk { flex: 3;}
    }
    .bframe:hover { background-color: #588cff; }
    .prev-desk {
        display: flex; background-color: #f0f0f0; border-radius: 5px; background-position: center; background-repeat: no-repeat; background-size: cover; flex: 3; padding: 10px;
        .fr-texts { display: flex; flex-direction: column;  justify-content: center; align-items: center; flex: 1;}
        .fr-ttl { font-size: 32px; font-weight: bold; width: fit-content;}
        .fr-txt { font-size: 24px; width: fit-content;}
        .fr-butts { justify-content: center;  display: flex; gap: 10px; margin-top: 10px;}
        .fr-butt { border: none; border-radius: 5px}
        .fr-img1 { flex: 2; background-position: center; background-repeat: no-repeat; background-size: contain}
    }
    .prev-desk.tpos-right { .fr-ttl {text-align: right} .fr-txt {text-align: right} }
    .prev-desk.tpos-top { .fr-texts{ justify-content: flex-start; } }
    .prev-desk.tpos-bottom { .fr-texts{ justify-content: flex-end; } }
    .prev-desk:not(:has(.fr-img1)).tpos-top {
        .fr-texts { justify-content: space-between; }
        .fr-butts { flex: 10; align-items: self-end; }
    }
    .prev-desk:has(.fr-img1).tpos-right {
        flex-direction: row-reverse;
        .fr-texts { align-items: end;}
    }
    .prev-desk:has(.fr-img1) {
        .fr-texts { align-items: start}
    }
    .prev-mob {
        flex: 1; display: flex; flex-direction: column; padding: 10px;
        .fr-texts { display: flex; flex-direction: column; justify-content: center;}
        .fr-ttl { font-size: 22px; font-weight: bold; width: fit-content; align-self: center; text-align: center;}
        .fr-txt { font-size: 16px; text-align: center; width: fit-content; align-self: center;text-align: center;}
        .fr-butts { text-align: center; margin-top: 5px; display: flex; gap: 5px; justify-content: center;}
        .fr-butts2 { text-align: center; display: none; gap: 5px; justify-content: center}
        .fr-butt { font-size: 12px; border: none; border-radius: 5px;}
        .fr-img1 { flex: 2; background-position: center; background-repeat: no-repeat; background-size: contain}
    }
    .prev-mob:not(.tpos-bottom):not(:has(.fr-img1)) .fr-texts { flex: 1}
    .prev-mob:not(.tpos-bottom) .fr-texts .fr-butts{ display: none;}
    .prev-mob:not(.tpos-bottom) .fr-butts2{ display: flex;}
    .prev-mob.tpos-top:not(:has(.fr-img1)) {
        .fr-texts {justify-content: start}
    }
    .prev-mob.tpos-bottom { flex-direction: column-reverse}
}

/* THEME => BANNER FRAME EDIT(PREVIEW) */
.myc-banner-frame-preview {
    width: 100%; height: 300px; background-position: center; display: flex; justify-content: space-between; background-size: cover; background-color: #f0f0f0; padding: 10px; box-sizing: border-box;
    .fred-texts{ display: flex; flex-direction: column; justify-content: center; flex: 1;}
    .fred-ttl { font-size: 30px; font-weight: bold; text-align: center; position: relative; align-self: center }
    .fred-txt { font-size: 18px; text-align: center; position: relative; align-self: center}
    .fred-img1 { background-repeat: no-repeat; background-size: contain; background-position: center;  flex: 2 }
    .fred-butts-m { display: none; gap: 10px; justify-content: center;}
    .fred-butts-d { display: flex; gap: 10px; margin-top: 10px; justify-content: center;}
    .fred-butt { font-size: 12px; border: none; border-radius: 5px}
}
.myc-banner-frame-preview.tpos-d-right {
    flex-direction: row-reverse;
    .fred-butts-d { justify-content: end;}
    .fred-ttl{ align-self: end; }
    .fred-txt{ align-self: end; }
}
.myc-banner-frame-preview.tpos-d-left {
    .fred-butts-d { justify-content: start;}
    .fred-ttl{ align-self: start; }
    .fred-txt{ align-self: start; }
}
.myc-banner-frame-preview.tpos-d-top { .fred-texts{ justify-content: start;}}
.myc-banner-frame-preview.tpos-d-bottom { .fred-texts{ justify-content: end;}}
@media screen and (max-width: 400px) {
    .myc-banner-frame-preview {
        flex-direction: column!important;
        .fred-texts { flex: none; justify-content: center}
        .fred-ttl{ align-self: auto!important; }
        .fred-txt{ align-self: auto!important;; }
    }
    .myc-banner-frame-preview:not(.tpos-m-bottom) {
        .fred-butts-m { display: flex;}
        .fred-butts-d { display: none;}
    }
    .myc-banner-frame-preview.tpos-m-bottom { flex-direction: column-reverse!important;}
}
.myc-banner-frame {
    .myc-bannframe-actionbutton { padding: 15px; border: 1px solid lightgrey; margin-bottom: 20px;}
    .ab-hdr { display: flex; justify-content: space-between; align-items: center}
    .ab-hdr-ttl { font-weight: bold; font-size: 18px}
}


/* THEME => BADGES */
.myc-badges-cont{
    display: flex; gap: 20px; flex-wrap: wrap;
    .v-badge {
        border: 1px solid grey; padding: 10px; border-radius: 10px; cursor: pointer;
        img { width: 200px; height: 200px; object-fit: contain;}
        .v-ttl { font-size: 22px; font-weight: bold; text-align: center}
        .v-txt { text-align: center;}
    }
    .v-badge:hover { border-color: #006eff; background-color: #f0f3f7; }
}
.myc-theme-badges {
    display: flex; gap: 20px; overflow-x: scroll; padding-bottom: 10px;
    .v-badge {
        border: 1px solid grey; border-radius: 10px; padding: 20px;
        img { width: 200px; height: 200px; object-fit: contain;}
        .v-ttl { font-size: 22px; font-weight: bold; text-align: center;}
        .v-txt { text-align: center;}
    }
}