@charsetcalc(100% - 50px)"UTF-8";
@import url('pretendard.css');

/* 시작 컬러 시안 수정 */

:root {
    /* Primary — design-tokens.css의 #1A6FA6 기반 */
    --color-primary: var(--sp-color-primary-500, #1A6FA6);
    --color-primary-hover: var(--sp-color-primary-600, #155A87);
    --color-primary-soild: var(--sp-color-primary-300, #5AADE0);
    --color-success: var(--sp-color-success, #1A8754);
    --color-error: var(--sp-color-error, #C03030);

    /* 참여자 투표 창 버튼 색 root — 피로 저감 + WCAG AA 대비율 준수 */
    --vote-btn-yes:     #1a50d6;
    --vote-btn-no:      #4DB84D;
    --vote-btn-abstain: #f0a812;
}

/* 끝 컬러 시안 수정 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-family: 'Pretendard', sans-serif ;
}
button {
    font-family: 'Pretendard';
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

}

img,
fieldset,
a img {
    border: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    -webkit-appearance: none;
}

input[type="submit"],
button {
    cursor: pointer;
}

input[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

textarea {
    overflow: auto;
}

input,
button {
    margin: 0;
    padding: 0;
    border: 0;
}

div, input, textarea, select, button, h1, h2, h3, h4, h5, h6, a, span, a:focus {
    outline: none;
}

.activeToolIcon {
    display: none;
}

/* none {
    display: none;
} */

body.fv #viewerContainer {
    top: 0px;
}

ul,
ol {
    list-style-type: none;
}

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

html {
    box-sizing: border-box;
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {opacity: 0;}

/* SCROLL */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #646266, #646266);
    border-radius: 10px;
}

::-webkit-scrollbar-button {
    display: none;
}

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.main__contents {
    width: 100%;
    height: calc(100% - 80px);
    padding: 10px 30px 30px 30px;
    box-sizing: border-box;
}

#wa-admin-statistics .main__contents,
#wa-admin-personal-stats .main__contents,
#wa-admin-carbon-stats .main__contents {
    height: 100%;
}

#wa-admin-member .main__contents{
    height: auto;
}

#wa-conference-list .main__contents{
    background: url('../img/smartplace_logo_background.png');
    background-size: 48% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.display__topbtn[disabled=disabled], .display__topbtn[disabled=disabled]:hover {
    background-color: #ececec;
    border: none;
    cursor: default !important;
    box-shadow: unset;
    opacity: 0.4;
}


.nice-select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 42px;
    line-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
}

.nice-select:hover {
    border-color: #dbdbdb;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: #999;
}

.nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all 0.15s ease-in-out;
    width: 5px;
}

.nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    max-height: 620px;
    overflow-y: auto;
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
}

.nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important;
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    transition: all 0.2s;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: #f6f6f6;
}

.nice-select .option.selected {
    font-weight: bold;
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

.tooltipster-fall,
.tooltipster-grow.tooltipster-show {
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-base {
    display: flex;
    pointer-events: none;
    position: absolute;
}

.tooltipster-box {
    flex: 1 1 auto;
}

.tooltipster-content {
    box-sizing: border-box;
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
}

.tooltipster-ruler {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
}

.tooltipster-fade {
    opacity: 0;
    transition-property: opacity;
}

.tooltipster-fade.tooltipster-show {
    opacity: 1;
}

.tooltipster-grow {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-backface-visibility: hidden;
}

.tooltipster-grow.tooltipster-show {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-swing {
    opacity: 0;
    -webkit-transform: rotateZ(4deg);
    transform: rotateZ(4deg);
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}

.tooltipster-swing.tooltipster-show {
    opacity: 1;
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
    transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
    transition-property: top;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-fall.tooltipster-initial {
    top: 0 !important;
}

.tooltipster-fall.tooltipster-dying {
    transition-property: all;
    top: 0 !important;
    opacity: 0;
}

.tooltipster-slide {
    transition-property: left;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-slide.tooltipster-initial {
    left: -40px !important;
}

.tooltipster-slide.tooltipster-dying {
    transition-property: all;
    left: 0 !important;
    opacity: 0;
}

@-webkit-keyframes tooltipster-fading {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tooltipster-fading {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.tooltipster-update-fade {
    -webkit-animation: tooltipster-fading .4s;
    animation: tooltipster-fading .4s;
}

@-webkit-keyframes tooltipster-rotating {
    25% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    75% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes tooltipster-rotating {
    25% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    75% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

.tooltipster-update-rotate {
    -webkit-animation: tooltipster-rotating .6s;
    animation: tooltipster-rotating .6s;
}

@-webkit-keyframes tooltipster-scaling {
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes tooltipster-scaling {
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.tooltipster-update-scale {
    -webkit-animation: tooltipster-scaling .6s;
    animation: tooltipster-scaling .6s;
}

.tooltipster-sidetip .tooltipster-box {
    background: #565656;
    border: 2px solid #000;
    border-radius: 4px;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
    margin-top: 8px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-box {
    margin-right: 8px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-box {
    margin-left: 8px;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-box {
    margin-bottom: 8px;
}

.tooltipster-sidetip .tooltipster-content {
    color: #fff;
    line-height: 18px;
    padding: 6px 14px;
}

.tooltipster-sidetip .tooltipster-arrow {
    overflow: hidden;
    position: absolute;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
    height: 10px;
    margin-left: -10px;
    top: 0;
    width: 20px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
    height: 20px;
    margin-top: -10px;
    right: 0;
    top: 0;
    width: 10px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
    height: 20px;
    margin-top: -10px;
    left: 0;
    top: 0;
    width: 10px;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
    bottom: 0;
    height: 10px;
    margin-left: -10px;
    width: 20px;
}

.tooltipster-sidetip .tooltipster-arrow-background,
.tooltipster-sidetip .tooltipster-arrow-border {
    height: 0;
    position: absolute;
    width: 0;
}

.tooltipster-sidetip .tooltipster-arrow-background {
    border: 10px solid transparent;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
    border-bottom-color: #565656;
    left: 0;
    top: 3px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
    border-left-color: #565656;
    left: -3px;
    top: 0;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
    border-right-color: #565656;
    left: 3px;
    top: 0;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
    border-top-color: #565656;
    left: 0;
    top: -3px;
}

.tooltipster-sidetip .tooltipster-arrow-border {
    border: 10px solid transparent;
    left: 0;
    top: 0;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
    border-bottom-color: #000;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
    border-left-color: #000;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
    border-right-color: #000;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
    border-top-color: #000;
}

.tooltipster-sidetip .tooltipster-arrow-uncropped {
    position: relative;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
    top: -10px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
    left: -10px;
}

/*
 RichText: WYSIWYG editor developed as jQuery plugin

 @name RichText
 @author https://github.com/webfashionist - Bob Schockweiler - richtext@webfashion.eu

 Copyright (C) 2020 Bob Schockweiler ( richtext@webfashion.eu )

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published
 by the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
.richText {
    position: relative;
    background-color: #FAFAFA;
    border: #EFEFEF solid 1px;
    color: #333333;
    width: 100%;
    overflow-wrap: break-word; /* 단어 중간에서도 줄바꿈 허용 */
    word-break: break-word;    /* 브라우저 호환용: 강제 줄바꿈 */
    /* overflow-x: hidden; */
}

.richText .richText-form {
    font-family: Calibri, Verdana, Helvetica, sans-serif;
}

.richText .richText-form label {
    display: block;
    padding: 10px 15px;
}

.richText .richText-form input[type="text"],
.richText .richText-form input[type="file"],
.richText .richText-form input[type="number"],
.richText .richText-form select {
    padding: 10px 15px;
    border: #999999 solid 1px;
    min-width: 200px;
    width: 100%;
}

.richText .richText-form select {
    cursor: pointer;
}

.richText .richText-form button {
    margin: 10px 0;
    padding: 10px 15px;
    background-color: #3498db;
    border: none;
    color: #FAFAFA;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
}

.richText .richText-toolbar {
    min-height: 20px;
    border-bottom: #EFEFEF solid 1px;
}

.richText .richText-toolbar .richText-length {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    vertical-align: middle;
    line-height: 34px;
}

.richText .richText-toolbar .richText-length .black {
    color: #000;
}

.richText .richText-toolbar .richText-length .orange {
    color: orange;
}

.richText .richText-toolbar .richText-length .red {
    color: red;
}

.richText .richText-toolbar ul {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.richText .richText-toolbar ul li {
    float: left;
    display: block;
    list-style: none;
}

.richText .richText-toolbar ul li a {
    display: block;
    padding: 10px 13px;
    border-right: #EFEFEF solid 1px;
    cursor: pointer;
    transition: background-color 0.4s;
}

.richText .richText-toolbar ul li a .fa,
.richText .richText-toolbar ul li a .fas,
.richText .richText-toolbar ul li a .far,
.richText .richText-toolbar ul li a svg {
    pointer-events: none;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: default;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer .richText-dropdown {
    position: relative;
    display: block;
    margin: 3% auto 0 auto;
    background-color: #FAFAFA;
    border: #EFEFEF solid 1px;
    min-width: 100px;
    width: 300px;
    max-width: 90%;
    box-shadow: 0 0 5px 0 #333;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer .richText-dropdown .richText-dropdown-close {
    position: absolute;
    top: 0;
    right: -23px;
    background: #FFF;
    color: #333;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
    width: 20px;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown {
    list-style: none;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li {
    display: block;
    float: none;
    font-family: Calibri, Verdana, Helvetica, sans-serif;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a {
    display: block;
    padding: 10px 15px;
    border-bottom: #EFEFEF solid 1px;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a:hover {
    background-color: #FFFFFF;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline {
    margin: 10px 6px;
    float: left;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline a {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 10px 0 #999;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline a span {
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.richText .richText-toolbar ul li a .richText-dropdown-outer div.richText-dropdown {
    padding: 10px 15px;
}

.richText .richText-toolbar ul li a:hover {
    background-color: #FFFFFF;
}

.richText .richText-toolbar ul li[data-disable="true"] {
    opacity: 0.1;
}

.richText .richText-toolbar ul li[data-disable="true"] a {
    cursor: default;
}

.richText .richText-toolbar ul li:not([data-disable="true"]).is-selected .richText-dropdown-outer {
    display: block;
}

.richText .richText-toolbar ul:after {
    display: block;
    content: "";
    clear: both;
}

.richText .richText-toolbar:last-child {
    font-size: 12px;
}

.richText .richText-toolbar:after {
    display: block;
    clear: both;
    content: "";
}

.richText .richText-editor {
    padding: 20px;
    background-color: #FFFFFF;
    border-left: #FFFFFF solid 2px;
    font-family: Calibri, Verdana, Helvetica, sans-serif;
    height: 300px;
    outline: none;
    overflow-y: scroll;
    overflow-x: auto;
}

.richText .richText-editor ul,
.richText .richText-editor ol {
    margin: 10px 25px;
}

.richText .richText-editor table {
    margin: 10px 0;
    border-spacing: 0;
    width: 100%;
}

.richText .richText-editor table td,
.richText .richText-editor table th {
    padding: 10px;
    border: #EFEFEF solid 1px;
}

.richText .richText-editor:focus {
    border-left: #3498db solid 2px;
}

.richText .richText-initial {
    margin-bottom: -4px;
    padding: 10px;
    background-color: #282828;
    border: none;
    color: #33FF33;
    font-family: Monospace, Calibri, Verdana, Helvetica, sans-serif;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    min-height: 400px;
    height: 400px;
}

.richText .richText-help {
    float: right;
    display: block;
    padding: 10px 15px;
    cursor: pointer;
}

.richText .richText-undo,
.richText .richText-redo {
    float: left;
    display: block;
    padding: 10px 15px;
    border-right: #EFEFEF solid 1px;
    cursor: pointer;
}

.richText .richText-undo.is-disabled,
.richText .richText-redo.is-disabled {
    opacity: 0.4;
}

.richText .richText-help-popup a {
    color: #3498db;
    text-decoration: underline;
}

.richText .richText-help-popup hr {
    margin: 10px auto 5px auto;
    border: none;
    border-top: #EFEFEF solid 1px;
}

.richText .richText-list.list-rightclick {
    position: absolute;
    background-color: #FAFAFA;
    border-right: #EFEFEF solid 1px;
    border-bottom: #EFEFEF solid 1px;
}

.richText .richText-list.list-rightclick li {
    padding: 5px 7px;
    cursor: pointer;
    list-style: none;
}

body.compensate-for-scrollbar {
    overflow: hidden;
}

.fancybox-active {
    height: auto;
}

.fancybox-is-hidden {
    left: -9999px;
    margin: 0;
    position: absolute !important;
    top: -9999px;
    visibility: hidden;
}

.fancybox-container {
    -webkit-backface-visibility: hidden;
    height: 100%;
    left: 0;
    outline: none;
    position: fixed;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    touch-action: manipulation;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%;
    z-index: 99992;
}

.fancybox-container * {
    box-sizing: border-box;
}

.fancybox-bg,
.fancybox-inner,
.fancybox-outer,
.fancybox-stage {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.fancybox-outer {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.fancybox-bg {
    background: #1e1e1e;
    opacity: 0;
    transition-duration: inherit;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
}

.fancybox-is-open .fancybox-bg {
    opacity: .9;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fancybox-caption,
.fancybox-infobar,
.fancybox-navigation .fancybox-button,
.fancybox-toolbar {
    direction: ltr;
    opacity: 0;
    position: absolute;
    transition: opacity .25s ease, visibility 0s ease .25s;
    visibility: hidden;
    z-index: 99997;
}

.fancybox-show-caption .fancybox-caption,
.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-nav .fancybox-navigation .fancybox-button,
.fancybox-show-toolbar .fancybox-toolbar {
    opacity: 1;
    transition: opacity .25s ease 0s, visibility 0s ease 0s;
    visibility: visible;
}

.fancybox-infobar {
    color: #ccc;
    font-size: 13px;
    -webkit-font-smoothing: subpixel-antialiased;
    height: 44px;
    left: 0;
    line-height: 44px;
    min-width: 44px;
    mix-blend-mode: difference;
    padding: 0 10px;
    pointer-events: none;
    top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fancybox-toolbar {
    right: 0;
    top: 0;
}

.fancybox-stage {
    direction: ltr;
    overflow: visible;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 99994;
}

.fancybox-is-open .fancybox-stage {
    overflow: hidden;
}

.fancybox-slide {
    -webkit-backface-visibility: hidden;
    display: none;
    height: 100%;
    left: 0;
    outline: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: absolute;
    text-align: center;
    top: 0;
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    white-space: normal;
    width: 100%;
    z-index: 99994;
}

.fancybox-slide:before {
    content: "";
    display: inline-block;
    font-size: 0;
    height: 100%;
    vertical-align: middle;
    width: 0;
}

.fancybox-is-sliding .fancybox-slide,
.fancybox-slide--current,
.fancybox-slide--next,
.fancybox-slide--previous {
    display: block;
}

.fancybox-slide--image {
    overflow: hidden;
    padding: 44px 0;
}

.fancybox-slide--image:before {
    display: none;
}

.fancybox-slide--html {
    padding: 6px;
}

.fancybox-content {
    background: #fff;
    display: inline-block;
    margin: 0;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: relative;
    text-align: left;
    vertical-align: middle;
}

.fancybox-slide--image .fancybox-content {
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
    -webkit-backface-visibility: hidden;
    background: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: 0;
    max-width: none;
    overflow: visible;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99995;
}

.fancybox-can-zoomOut .fancybox-content {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.fancybox-can-zoomIn .fancybox-content {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.fancybox-can-pan .fancybox-content,
.fancybox-can-swipe .fancybox-content {
    cursor: -webkit-grab;
    cursor: grab;
}

.fancybox-is-grabbing .fancybox-content {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.fancybox-container [data-selectable=true] {
    cursor: text;
}

.fancybox-image,
.fancybox-spaceball {
    background: transparent;
    border: 0;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.fancybox-spaceball {
    z-index: 1;
}

.fancybox-slide--iframe .fancybox-content,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--pdf .fancybox-content,
.fancybox-slide--video .fancybox-content {
    height: 100%;
    overflow: visible;
    padding: 0;
    width: 100%;
}

.fancybox-slide--video .fancybox-content {
    background: #000;
}

.fancybox-slide--map .fancybox-content {
    background: #e5e3df;
}

.fancybox-slide--iframe .fancybox-content {
    background: #fff;
}

.fancybox-iframe,
.fancybox-video {
    background: transparent;
    border: 0;
    display: block;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.fancybox-iframe {
    left: 0;
    position: absolute;
    top: 0;
}

.fancybox-error {
    background: #fff;
    cursor: default;
    max-width: 400px;
    padding: 40px;
    width: 100%;
}

.fancybox-error p {
    color: #444;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    padding: 0;
}

.fancybox-button {
    background: rgba(30, 30, 30, 0.6);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    height: 44px;
    margin: 0;
    padding: 10px;
    position: relative;
    transition: color .2s;
    vertical-align: top;
    visibility: inherit;
    width: 44px;
}

.fancybox-button,
.fancybox-button:link,
.fancybox-button:visited {
    color: #ccc;
}

.fancybox-button:hover {
    color: #fff;
}

.fancybox-button:focus {
    outline: none;
}

.fancybox-button.fancybox-focus {
    outline: 1px dotted;
}

.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
    color: #888;
    cursor: default;
    outline: none;
}

.fancybox-button div {
    height: 100%;
}

.fancybox-button svg {
    display: block;
    height: 100%;
    overflow: visible;
    position: relative;
    width: 100%;
}

.fancybox-button svg path {
    fill: currentColor;
    stroke-width: 0;
}

.fancybox-button--fsenter svg:nth-child(2),
.fancybox-button--fsexit svg:first-child,
.fancybox-button--pause svg:first-child,
.fancybox-button--play svg:nth-child(2) {
    display: none;
}

.fancybox-progress {
    background: #ff5268;
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: linear;
    z-index: 99998;
}

.fancybox-close-small {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #ccc;
    cursor: pointer;
    opacity: .8;
    padding: 8px;
    position: absolute;
    right: -12px;
    top: -44px;
    z-index: 401;
}

.fancybox-close-small:hover {
    color: #fff;
    opacity: 1;
}

.fancybox-slide--html .fancybox-close-small {
    color: currentColor;
    padding: 10px;
    right: 0;
    top: 0;
}

.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
    overflow: hidden;
}

.fancybox-is-scaling .fancybox-close-small,
.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
    display: none;
}

.fancybox-navigation .fancybox-button {
    background-clip: content-box;
    height: 100px;
    opacity: 0;
    position: absolute;
    top: calc(50% - 50px);
    width: 70px;
}

.fancybox-navigation .fancybox-button div {
    padding: 7px;
}

.fancybox-navigation .fancybox-button--arrow_left {
    left: 0;
    left: env(safe-area-inset-left);
    padding: 31px 26px 31px 6px;
}

.fancybox-navigation .fancybox-button--arrow_right {
    padding: 31px 6px 31px 26px;
    right: 0;
    right: env(safe-area-inset-right);
}

.fancybox-caption {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent);
    bottom: 0;
    color: #eee;
    font-size: 14px;
    font-weight: 400;
    left: 0;
    line-height: 1.5;
    padding: 75px 44px 25px;
    pointer-events: none;
    right: 0;
    text-align: center;
    z-index: 99996;
}

@supports (padding: max(0px)) {
    .fancybox-caption {
        padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
    }
}

.fancybox-caption--separate {
    margin-top: -50px;
}

.fancybox-caption__body {
    max-height: 50vh;
    overflow: auto;
    pointer-events: all;
}

.fancybox-caption a,
.fancybox-caption a:link,
.fancybox-caption a:visited {
    color: #ccc;
    text-decoration: none;
}

.fancybox-caption a:hover {
    color: #fff;
    text-decoration: underline;
}

.fancybox-loading {
    -webkit-animation: a 1s linear infinite;
    animation: a 1s linear infinite;
    background: transparent;
    border: 4px solid #888;
    border-bottom-color: #fff;
    border-radius: 50%;
    height: 50px;
    left: 50%;
    margin: -25px 0 0 -25px;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 50px;
    z-index: 99999;
}

@-webkit-keyframes a {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@keyframes a {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

.fancybox-animated {
    transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}

.fancybox-fx-slide.fancybox-slide--previous {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.fancybox-fx-slide.fancybox-slide--next {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.fancybox-fx-slide.fancybox-slide--current {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.fancybox-fx-fade.fancybox-slide--next,
.fancybox-fx-fade.fancybox-slide--previous {
    opacity: 0;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.fancybox-fx-fade.fancybox-slide--current {
    opacity: 1;
}

.fancybox-fx-zoom-in-out.fancybox-slide--previous {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
}

.fancybox-fx-zoom-in-out.fancybox-slide--next {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 0.5);
    transform: scale3d(0.5, 0.5, 0.5);
}

.fancybox-fx-zoom-in-out.fancybox-slide--current {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.fancybox-fx-rotate.fancybox-slide--previous {
    opacity: 0;
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
}

.fancybox-fx-rotate.fancybox-slide--next {
    opacity: 0;
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
}

.fancybox-fx-rotate.fancybox-slide--current {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.fancybox-fx-circular.fancybox-slide--previous {
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
    transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
}

.fancybox-fx-circular.fancybox-slide--next {
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
    transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
}

.fancybox-fx-circular.fancybox-slide--current {
    opacity: 1;
    -webkit-transform: scaleX(1) translateZ(0);
    transform: scaleX(1) translateZ(0);
}

.fancybox-fx-tube.fancybox-slide--previous {
    -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
    transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
}

.fancybox-fx-tube.fancybox-slide--next {
    -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
    transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
}

.fancybox-fx-tube.fancybox-slide--current {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
}

@media (max-height: 576px) {
    .fancybox-slide {
        padding-left: 6px;
        padding-right: 6px;
    }

    .fancybox-slide--image {
        padding: 6px 0;
    }

    .fancybox-close-small {
        right: -6px;
    }

    .fancybox-slide--image .fancybox-close-small {
        background: #4e4e4e;
        color: #f2f4f6;
        height: 36px;
        opacity: 1;
        padding: 6px;
        right: 0;
        top: 0;
        width: 36px;
    }

    .fancybox-caption {
        padding-left: 12px;
        padding-right: 12px;
    }

    @supports (padding: max(0px)) {
        .fancybox-caption {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
        }
    }
}

.fancybox-share {
    background: #f4f4f4;
    border-radius: 3px;
    max-width: 90%;
    padding: 30px;
    text-align: center;
}

.fancybox-share h1 {
    color: #222;
    font-size: 35px;
    font-weight: 700;
    margin: 0 0 20px;
}

.fancybox-share p {
    margin: 0;
    padding: 0;
}

.fancybox-share__button {
    border: 0;
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    margin: 0 5px 10px;
    min-width: 130px;
    padding: 0 15px;
    text-decoration: none;
    transition: all .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
}

.fancybox-share__button:link,
.fancybox-share__button:visited {
    color: #fff;
}

.fancybox-share__button:hover {
    text-decoration: none;
}

.fancybox-share__button--fb {
    background: #3b5998;
}

.fancybox-share__button--fb:hover {
    background: #344e86;
}

.fancybox-share__button--pt {
    background: #bd081d;
}

.fancybox-share__button--pt:hover {
    background: #aa0719;
}

.fancybox-share__button--tw {
    background: #1da1f2;
}

.fancybox-share__button--tw:hover {
    background: #0d95e8;
}

.fancybox-share__button svg {
    height: 25px;
    margin-right: 7px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 25px;
}

.fancybox-share__button svg path {
    fill: #fff;
}

.fancybox-share__input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 0;
    color: #5d5b5b;
    font-size: 14px;
    margin: 10px 0 0;
    outline: none;
    padding: 10px 15px;
    width: 100%;
}

.fancybox-thumbs {
    background: #ddd;
    bottom: 0;
    display: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 2px 2px 4px;
    position: absolute;
    right: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 0;
    width: 212px;
    z-index: 99995;
}

.fancybox-thumbs-x {
    overflow-x: auto;
    overflow-y: hidden;
}

.fancybox-show-thumbs .fancybox-thumbs {
    display: block;
}

.fancybox-show-thumbs .fancybox-inner {
    right: 212px;
}

.fancybox-thumbs__list {
    font-size: 0;
    height: 100%;
    list-style: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    position: relative;
    white-space: nowrap;
    width: 100%;
}

.fancybox-thumbs-x .fancybox-thumbs__list {
    overflow: hidden;
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
    width: 7px;
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px;
}

.fancybox-thumbs__list a {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0, 0, 0, 0.1);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    float: left;
    height: 75px;
    margin: 2px;
    max-height: calc(100% - 8px);
    max-width: calc(50% - 4px);
    outline: none;
    overflow: hidden;
    padding: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    width: 100px;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #ff5268;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 99991;
}

.fancybox-thumbs__list a:focus:before {
    opacity: .5;
}

.fancybox-thumbs__list a.fancybox-thumbs-active:before {
    opacity: 1;
}

@media (max-width: 576px) {
    .fancybox-thumbs {
        width: 110px;
    }

    .fancybox-show-thumbs .fancybox-inner {
        right: 110px;
    }

    .fancybox-thumbs__list a {
        max-width: calc(100% - 10px);
    }
}

:root {
    --tagify-dd-color-primary: rgb(53, 149, 246);
    --tagify-dd-bg-color: white;
}

.tagify {
    --tags-disabled-bg: #F1F1F1;
    --tags-border-color: #DDD;
    --tags-hover-border-color: #CCC;
    --tags-focus-border-color: #3595f6;
    --tag-bg: #E5E5E5;
    --tag-hover: #D3E2E2;
    --tag-text-color: black;
    --tag-text-color--edit: black;
    --tag-pad: 0.3em 0.5em;
    --tag-inset-shadow-size: 1.1em;
    --tag-invalid-color: #D39494;
    --tag-invalid-bg: rgba(211, 148, 148, 0.5);
    --tag-emove-bg: rgba(211, 148, 148, 0.3);
    --tag-emove-btn-color: black;
    --tag-emove-btn-bg: none;
    --tag-emove-btn-bg--hover: #c77777;
    --input-color: inherit;
    --tag--min-width: 1ch;
    --tag--max-width: auto;
    --tag-hide-transition: 0.3s;
    --placeholder-color: rgba(0, 0, 0, 0.4);
    --placeholder-color-focus: rgba(0, 0, 0, 0.25);
    --loader-size: .8em;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    border: 1px solid var(--tags-border-color);
    padding: 0;
    line-height: 0;
    cursor: text;
    outline: 0;
    position: relative;
    box-sizing: border-box;
    transition: .1s;
}

@-webkit-keyframes tags--bump {
    30% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes tags--bump {
    30% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-webkit-keyframes rotateLoader {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@keyframes rotateLoader {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

.tagify:hover {
    border-color: #ccc;
    border-color: var(--tags-hover-border-color);
}

.tagify.tagify--focus {
    transition: 0s;
    border-color: #3595f6;
    border-color: var(--tags-focus-border-color);
}

.tagify[disabled] {
    background: var(--tags-disabled-bg);
    -webkit-filter: saturate(0);
    filter: saturate(0);
    opacity: .5;
    pointer-events: none;
}

.tagify[readonly].tagify--select {
    pointer-events: none;
}

.tagify[readonly]:not(.tagify--mix):not(.tagify--select) {
    cursor: default;
}

.tagify[readonly]:not(.tagify--mix):not(.tagify--select)>.tagify__input {
    visibility: hidden;
    width: 0;
    margin: 5px 0;
}

.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div {
    padding: .3em .5em;
    padding: var(--tag-pad);
}

.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag>div::before {
    background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
    box-shadow: none;
    -webkit-filter: brightness(0.95);
    filter: brightness(0.95);
}

.tagify[readonly] .tagify__tag__emoveBtn {
    display: none;
}

.tagify--loading .tagify__input>br:last-child {
    display: none;
}

.tagify--loading .tagify__input::before {
    content: none;
}

.tagify--loading .tagify__input::after {
    content: "";
    vertical-align: middle;
    opacity: 1;
    width: .7em;
    height: .7em;
    width: var(--loader-size);
    height: var(--loader-size);
    border: 3px solid;
    border-color: #eee #bbb #888 transparent;
    border-radius: 50%;
    -webkit-animation: rotateLoader .4s infinite linear;
    animation: rotateLoader .4s infinite linear;
    content: "" !important;
    margin: -2px 0 -2px .5em;
}

.tagify--loading .tagify__input:empty::after {
    margin-left: 0;
}

.tagify+input,
.tagify+textarea {
    position: absolute !important;
    left: -9999em !important;
    -webkit-transform: scale(0) !important;
    transform: scale(0) !important;
}

.tagify__tag {
    display: inline-flex;
    align-items: center;
    margin: 5px 0 5px 5px;
    position: relative;
    z-index: 1;
    outline: 0;
    line-height: normal;
    cursor: default;
    transition: .13s ease-out;
}

.tagify__tag>div {
    vertical-align: top;
    box-sizing: border-box;
    max-width: 100%;
    padding: .3em .5em;
    padding: var(--tag-pad, 0.3em 0.5em);
    color: #000;
    color: var(--tag-text-color, #000);
    line-height: inherit;
    border-radius: 3px;
    white-space: nowrap;
    transition: .13s ease-out;
}

.tagify__tag>div>* {
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: top;
    min-width: 1ch;
    max-width: auto;
    min-width: var(--tag--min-width, 1ch);
    max-width: var(--tag--max-width, auto);
    transition: .8s ease, .1s color;
}

.tagify__tag>div>[contenteditable] {
    outline: 0;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: text;
    margin: -2px;
    padding: 2px;
    max-width: 350px;
}

.tagify__tag>div::before {
    content: "";
    position: absolute;
    border-radius: inherit;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    transition: 120ms ease;
    -webkit-animation: tags--bump .3s ease-out 1;
    animation: tags--bump .3s ease-out 1;
    box-shadow: 0 0 0 1.1em #e5e5e5 inset;
    box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-bg, #e5e5e5) inset;
}

.tagify__tag:focus div::before,
.tagify__tag:hover:not([readonly]) div::before {
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    box-shadow: 0 0 0 1.1em #d3e2e2 inset;
    box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-hover, #d3e2e2) inset;
}

.tagify__tag--loading {
    pointer-events: none;
}

.tagify__tag--loading .tagify__tag__emoveBtn {
    display: none;
}

.tagify__tag--loading::after {
    --loader-size: .4em;
    content: "";
    vertical-align: middle;
    opacity: 1;
    width: .7em;
    height: .7em;
    width: var(--loader-size);
    height: var(--loader-size);
    border: 3px solid;
    border-color: #eee #bbb #888 transparent;
    border-radius: 50%;
    -webkit-animation: rotateLoader .4s infinite linear;
    animation: rotateLoader .4s infinite linear;
    margin: 0 .5em 0 -.1em;
}

.tagify__tag--flash div::before {
    -webkit-animation: none;
    animation: none;
}

.tagify__tag--hide {
    width: 0 !important;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: .3s;
    transition: var(--tag-hide-transition, 0.3s);
    pointer-events: none;
}

.tagify__tag--hide>div>* {
    white-space: nowrap;
}

.tagify__tag.tagify--noAnim>div::before {
    -webkit-animation: none;
    animation: none;
}

.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span {
    opacity: .5;
}

.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before {
    box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.5) inset !important;
    box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-invalid-bg, rgba(211, 148, 148, 0.5)) inset !important;
    transition: .2s;
}

.tagify__tag[readonly] .tagify__tag__emoveBtn {
    display: none;
}

.tagify__tag[readonly]>div::before {
    background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
    box-shadow: none;
    -webkit-filter: brightness(0.95);
    filter: brightness(0.95);
}

.tagify__tag--editable>div {
    color: #000;
    color: var(--tag-text-color--edit, #000);
}

.tagify__tag--editable>div::before {
    box-shadow: 0 0 0 2px #d3e2e2 inset !important;
    box-shadow: 0 0 0 2px var(--tag-hover, #d3e2e2) inset !important;
}

.tagify__tag--editable>.tagify__tag__emoveBtn {
    pointer-events: none;
}

.tagify__tag--editable>.tagify__tag__emoveBtn::after {
    opacity: 0;
    -webkit-transform: translateX(100%) translateX(5px);
    transform: translateX(100%) translateX(5px);
}

.tagify__tag--editable.tagify--invalid>div::before {
    box-shadow: 0 0 0 2px #d39494 inset !important;
    box-shadow: 0 0 0 2px var(--tag-invalid-color, #d39494) inset !important;
}

.tagify__tag__emoveBtn {
    order: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    cursor: pointer;
    font: 14px/1 Arial;
    background: 0 0;
    background: var(--tag-emove-btn-bg, none);
    color: #000;
    color: var(--tag-emove-btn-color, #000);
    width: 14px;
    height: 14px;
    margin-right: 4.6666666667px;
    margin-left: auto;
    overflow: hidden;
    transition: .2s ease-out;
}

.tagify__tag__emoveBtn::after {
    content: "¡A";
    transition: .3s, color 0s;
}

.tagify__tag__emoveBtn:hover {
    color: #fff;
    background: #c77777;
    background: var(--tag-emove-btn-bg--hover, #c77777);
}

.tagify__tag__emoveBtn:hover+div>span {
    opacity: .5;
}

.tagify__tag__emoveBtn:hover+div::before {
    box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.3) inset !important;
    box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-emove-bg, rgba(211, 148, 148, 0.3)) inset !important;
    transition: box-shadow .2s;
}

.tagify:not(.tagify--mix) .tagify__input br {
    display: none;
}

.tagify:not(.tagify--mix) .tagify__input * {
    display: inline;
    white-space: nowrap;
}

.tagify__input {
    flex-grow: 1;
    display: inline-block;
    min-width: 110px;
    min-height: 24px;
    margin: 5px;
    padding: .3em .5em;
    padding: var(--tag-pad, 0.3em 0.5em);
    line-height: normal;
    position: relative;
    white-space: pre-wrap;
    color: inherit;
    color: var(--input-color, inherit);
    box-sizing: inherit;
}

.tagify__input:focus {
    outline: 0;
}

.tagify__dropdown {
    z-index: 1000;
}

.tagify__input:focus::before {
    transition: .2s ease-out;
    opacity: 0;
    -webkit-transform: translatex(6px);
    transform: translatex(6px);
}

@supports (-ms-ime-align: auto) {
    .tagify__input:focus::before {
        display: none;
    }
}

.tagify__input:focus:empty::before {
    transition: .2s ease-out;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    color: rgba(0, 0, 0, 0.25);
    color: var(--placeholder-color-focus);
}

@-moz-document url-prefix() {
    .tagify__input:focus:empty::after {
        display: none;
    }
}

.tagify__input::before {
    content: attr(data-placeholder);
    height: 1em;
    line-height: 1em;
    margin: auto 0;
    z-index: 1;
    color: rgba(0, 0, 0, 0.4);
    color: var(--placeholder-color);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    position: absolute;
}

.tagify__input::after {
    content: attr(data-suggest);
    display: inline-block;
    white-space: pre;
    color: #000;
    opacity: .3;
    pointer-events: none;
    max-width: 100px;
}

.tagify__input .tagify__tag {
    margin: 0 1px;
}

.tagify__input .tagify__tag>div {
    padding-top: 0;
    padding-bottom: 0;
}

.tagify--mix {
    display: block;
}

.tagify--mix .tagify__input {
    padding: 5px;
    margin: 0;
    width: 100%;
    height: 100%;
    line-height: 1.5;
    display: block;
}

.tagify--mix .tagify__input::before {
    height: auto;
    display: none;
    line-height: inherit;
}

.tagify--mix .tagify__input::after {
    content: none;
}

.tagify--select::after {
    content: ">";
    opacity: .5;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    font: 16px monospace;
    line-height: 8px;
    height: 8px;
    pointer-events: none;
    -webkit-transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg);
    transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg);
    transition: .2s ease-in-out;
}

.tagify--select[aria-expanded=true]::after {
    -webkit-transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2);
    transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2);
}

.tagify--select .tagify__tag {
    position: absolute;
    top: 0;
    right: 1.8em;
    bottom: 0;
}

.tagify--select .tagify__tag div {
    display: none;
}

.tagify--select .tagify__input {
    width: 100%;
}

.tagify--empty .tagify__input::before {
    transition: .2s ease-out;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    display: inline-block;
    width: auto;
}

.tagify--mix .tagify--empty .tagify__input::before {
    display: inline-block;
}

.tagify--invalid {
    --tags-border-color: #D39494;
}

.tagify__dropdown {
    position: absolute;
    z-index: 9999;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    overflow: hidden;
}

.tagify__dropdown[placement=top] {
    margin-top: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
    border-top-width: 1.1px;
    border-bottom-width: 0;
}

.tagify__dropdown[position=text] {
    box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), 0.1);
    font-size: .9em;
}

.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
    border-width: 1px;
}

.tagify__dropdown__wrapper {
    max-height: 300px;
    overflow: auto;
    background: #fff;
    background: var(--tagify-dd-bg-color);
    border: 1px solid #3595f6;
    border-color: var(--tagify-dd-color-primary);
    border-bottom-width: 1.33px;
    border-top-width: 0;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    transition: 0.25s cubic-bezier(0, 1, 0.5, 1);
}

.tagify__dropdown--initial .tagify__dropdown__wrapper {
    max-height: 20px;
    -webkit-transform: translateY(-1em);
    transform: translateY(-1em);
}

.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
    -webkit-transform: translateY(2em);
    transform: translateY(2em);
}

.tagify__dropdown__item {
    box-sizing: inherit;
    padding: .3em .5em;
    margin: 1px;
    cursor: pointer;
    border-radius: 2px;
    position: relative;
    outline: 0;
}

.tagify__dropdown__item--active {
    background: #3595f6;
    background: var(--tagify-dd-color-primary);
    color: #fff;
}

.tagify__dropdown__item:active,
.tagify__dropdown__item.nice-select.open {
    -webkit-filter: brightness(105%);
    filter: brightness(105%);
}

.date-picker {
    width: 170px;
    height: 25px;
    padding: 0;
    border: 0;
    line-height: 25px;
    padding-left: 10px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
    color: #303030;
    position: relative;
    z-index: 2;
}

.date-picker-wrapper {
    position: absolute;
    z-index: 1;
    border: 1px solid #bfbfbf;
    background-color: #efefef;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 20px;
    color: #aaa;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    box-sizing: initial;
}

.dp-clearfix {
    clear: both;
    height: 0;
    font-size: 0;
}

.date-picker-wrapper.inline-wrapper {
    position: relative;
    box-shadow: none;
    display: inline-block;
}

.date-picker-wrapper.single-date {
    width: auto;
}

.date-picker-wrapper.no-shortcuts {
    padding-bottom: 12px;
}

.date-picker-wrapper.no-topbar {
    padding-top: 12px;
}

.date-picker-wrapper .footer {
    font-size: 13px;
    padding-top: 3px;
}

.date-picker-wrapper b {
    color: #666;
    font-weight: 700;
}

.date-picker-wrapper a {
    color: #6bb4d6;
    text-decoration: underline;
}

.date-picker-wrapper .month-name {
    text-transform: uppercase;
}

.date-picker-wrapper .select-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.date-picker-wrapper .select-wrapper:hover {
    text-decoration: underline;
}

.date-picker-wrapper .month-element {
    display: inline-block;
    vertical-align: middle;
}

.date-picker-wrapper .select-wrapper select {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: -1px;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    filter: alpha(opacity=1);
    opacity: 0.01;
}

.date-picker-wrapper .month-wrapper {
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    background-color: #fff;
    padding: 5px;
    cursor: default;
    position: relative;
    _overflow: hidden;
}

.date-picker-wrapper .month-wrapper table {
    width: 190px;
    float: left;
}

.date-picker-wrapper .month-wrapper table.month2 {
    width: 190px;
    float: left;
}

.date-picker-wrapper .month-wrapper table th,
.date-picker-wrapper .month-wrapper table td {
    vertical-align: middle;
    text-align: center;
    line-height: 14px;
    margin: 0px;
    padding: 0px;
}

.date-picker-wrapper .month-wrapper table .day {
    padding: 5px 0;
    line-height: 1;
    font-size: 12px;
    margin-bottom: 1px;
    color: #ccc;
    cursor: default;
}

.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
    color: #999;
    cursor: default;
}

.date-picker-wrapper .month-wrapper table .day.checked {
    background-color: #9cdbf7;
}

.date-picker-wrapper .month-wrapper table .week-name {
    height: 20px;
    line-height: 20px;
    font-weight: 100;
    text-transform: uppercase;
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip {
    cursor: help !important;
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
    white-space: nowrap;
}

.date-picker-wrapper .time label {
    white-space: nowrap;
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
    color: #333;
    cursor: pointer;
}

.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
    background-color: #cdecfa;
}

.date-picker-wrapper .month-wrapper table .day.nextMonth,
.date-picker-wrapper .month-wrapper table .day.lastMonth {
    display: none;
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background-color: #ffe684;
}

.date-picker-wrapper .month-wrapper table .day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
    background-color: #70ccd5;
}

.date-picker-wrapper table .caption {
    height: 40px;
}

.date-picker-wrapper table .caption>th:first-of-type,
.date-picker-wrapper table .caption>th:last-of-type {
    width: 27px;
}

.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
    padding: 0 5px;
    cursor: pointer;
}

.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
    background-color: #ccc;
    color: white;
}

.date-picker-wrapper .gap {
    position: relative;
    z-index: 1;
    width: 15px;
    height: 100%;
    background-color: red;
    font-size: 0;
    line-height: 0;
    float: left;
    top: -5px;
    margin: 0 10px -10px;
    visibility: hidden;
    height: 0;
}

.date-picker-wrapper .gap .gap-lines {
    height: 100%;
    overflow: hidden;
}

.date-picker-wrapper .gap .gap-line {
    height: 15px;
    width: 15px;
    position: relative;
}

.date-picker-wrapper .gap .gap-line .gap-1 {
    z-index: 1;
    height: 0;
    border-left: 8px solid white;
    border-top: 8px solid #eee;
    border-bottom: 8px solid #eee;
}

.date-picker-wrapper .gap .gap-line .gap-2 {
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 2;
    height: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid white;
}

.date-picker-wrapper .gap .gap-line .gap-3 {
    position: absolute;
    right: 0;
    top: 8px;
    z-index: 2;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid white;
}

.date-picker-wrapper .gap .gap-top-mask {
    width: 6px;
    height: 1px;
    position: absolute;
    top: -1px;
    left: 1px;
    background-color: #eee;
    z-index: 3;
}

.date-picker-wrapper .gap .gap-bottom-mask {
    width: 6px;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 7px;
    background-color: #eee;
    z-index: 3;
}

.date-picker-wrapper .selected-days {
    display: none;
}

.date-picker-wrapper .drp_top-bar {
    line-height: 1.4;
    position: relative;
    padding: 10px 40px 10px 0;
}

.date-picker-wrapper .drp_top-bar .error-top,
.date-picker-wrapper .drp_top-bar .normal-top {
    display: none;
}

.date-picker-wrapper .drp_top-bar .default-top {
    display: block;
}

.date-picker-wrapper .drp_top-bar.error .default-top {
    display: none;
}

.date-picker-wrapper .drp_top-bar.error .error-top {
    display: block;
    color: red;
}

.date-picker-wrapper .drp_top-bar.normal .default-top {
    display: none;
}

.date-picker-wrapper .drp_top-bar.normal .normal-top {
    display: block;
}

.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
    color: #333;
}

.date-picker-wrapper .drp_top-bar .apply-btn {
    position: absolute;
    right: 0px;
    top: 6px;
    padding: 3px 5px;
    margin: 0;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -moz-linear-gradient(top, #00adee, #0078a5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
    color: white;
    line-height: initial;
}

.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
    cursor: pointer;
    color: #606060;
    border: solid 1px #b7b7b7;
    background: #fff;
    background: -moz-linear-gradient(top, #fff, #ededed);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}

.date-picker-wrapper .time {
    position: relative;
}

.date-picker-wrapper.single-month .time {
    display: block;
}

.date-picker-wrapper .time input[type=range] {
    vertical-align: middle;
    width: 129px;
    padding: 0;
    margin: 0;
    height: 20px;
}

.date-picker-wrapper .time1 {
    width: 180px;
    padding: 0 5px;
    text-align: center;
}

/*time styling*/
.time2 {
    width: 180px;
    padding: 0 5px;
    text-align: center;
}

.date-picker-wrapper .time1 {
    float: left;
}

.date-picker-wrapper .time2 {
    float: right;
}

.date-picker-wrapper .hour {
    text-align: right;
}

.minute {
    text-align: right;
}

.date-picker-wrapper .hide {
    display: none;
}

.date-picker-wrapper .first-date-selected,
.date-picker-wrapper .last-date-selected {
    background-color: #49e !important;
    color: white !important;
}

.date-picker-wrapper .date-range-length-tip {
    position: absolute;
    margin-top: -4px;
    margin-left: -8px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    display: none;
    background-color: yellow;
    padding: 0 6px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 16px;
    -webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
    -moz-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
    -ms-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
    -o-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

.date-picker-wrapper .date-range-length-tip:after {
    content: '';
    position: absolute;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid yellow;
    left: 50%;
    margin-left: -4px;
    bottom: -4px;
}

.date-picker-wrapper.two-months.no-gap .month1 .next,
.date-picker-wrapper.two-months.no-gap .month2 .prev {
    display: none;
}

.date-picker-wrapper .week-number {
    padding: 5px 0;
    line-height: 1;
    font-size: 12px;
    margin-bottom: 1px;
    color: #999;
    cursor: pointer;
}

.date-picker-wrapper .week-number.week-number-selected {
    color: #49e;
    font-weight: bold;
}

/*! nouislider - 11.0.3 - 2018-01-21 14:04:07 */
.noUi-target,
.noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    box-sizing: border-box;
}

.noUi-target {
    position: relative;
    direction: ltr;
}

.noUi-base,
.noUi-connects {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.noUi-connects {
    overflow: hidden;
    z-index: 0;
}

.noUi-connect,
.noUi-origin {
    will-change: transform;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-origin {
    left: auto;
    right: 0;
}

.noUi-vertical .noUi-origin {
    width: 0;
}

.noUi-horizontal .noUi-origin {
    height: 0;
}

.noUi-handle {
    position: absolute;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}

.noUi-state-drag * {
    cursor: inherit !important;
}

.noUi-horizontal {
    height: 18px;
}

.noUi-horizontal .noUi-handle {
    width: 34px;
    height: 28px;
    left: -17px;
    top: -6px;
}

.noUi-vertical {
    width: 18px;
}

.noUi-vertical .noUi-handle {
    width: 28px;
    height: 34px;
    left: -6px;
    top: -17px;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
    right: -17px;
    left: auto;
}

.noUi-target {
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #D3D3D3;
    box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}

.noUi-connects {
    border-radius: 3px;
}

.noUi-connect {
    background: #3FB8AF;
}

.noUi-draggable {
    cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
    cursor: ns-resize;
}

.noUi-handle {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #FFF;
    cursor: default;
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}

.noUi-active {
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}

.noUi-handle:after,
.noUi-handle:before {
    content: "";
    display: block;
    position: absolute;
    height: 14px;
    width: 1px;
    background: #E8E7E6;
    left: 14px;
    top: 6px;
}

.noUi-handle:after {
    left: 17px;
}

.noUi-vertical .noUi-handle:after,
.noUi-vertical .noUi-handle:before {
    width: 14px;
    height: 1px;
    left: 6px;
    top: 14px;
}

.noUi-vertical .noUi-handle:after {
    top: 17px;
}

[disabled] .noUi-connect {
    background: #B8B8B8;
}

[disabled] .noUi-handle,
[disabled].noUi-handle,
[disabled].noUi-target {
    cursor: not-allowed;
}

.noUi-pips,
.noUi-pips * {
    box-sizing: border-box;
}

.noUi-pips {
    position: absolute;
    color: #999;
}

.noUi-value {
    position: absolute;
    white-space: nowrap;
    text-align: center;
}

.noUi-value-sub {
    color: #ccc;
    font-size: 13px;
}

.noUi-marker {
    position: absolute;
    background: #CCC;
}

.noUi-marker-large,
.noUi-marker-sub {
    background: #AAA;
}

.noUi-pips-horizontal {
    padding: 10px 0;
    height: 80px;
    top: 100%;
    left: 0;
    width: 100%;
}

.noUi-value-horizontal {
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
    -webkit-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
    margin-left: -1px;
    width: 2px;
    height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
    height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 15px;
}

.noUi-pips-vertical {
    padding: 0 10px;
    height: 100%;
    top: 0;
    left: 100%;
}

.noUi-value-vertical {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%, 0);
    padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
    width: 5px;
    height: 2px;
    margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
    width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
    width: 15px;
}

.noUi-tooltip {
    display: block;
    position: absolute;
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #fff;
    color: #000;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    right: 120%;
}

body {
    min-width: 375px;
    background: #F4F4F4;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.01em;
    color: #1A1D1F;
    height: 100%;
}

body.dark {
    background: #111315;
    color: #FCFCFC;
}

body.no-scroll,
html.no-scroll {
    /* height: calc(var(--vh, 1vh) * 100); */
    overflow: hidden;
}

a {
    text-decoration: none;
}

button {
    background: none;
}

svg,
img {
    vertical-align: middle;
}

.icon {
    width: 16px;
    height: 16px;
    fill: #1A1D1F;
}

.panel-arrow {
    position: absolute;
    right: 5px;
    top: calc(50% - 11px);
    width: 22px;
    height: 22px;
    border: 1px solid #fff;
    border-radius: 13%;
    cursor: pointer;
    line-height: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel-arrow > .icon {
    fill: #fff;
    transition: all ease 0.3s;
}

.panel-arrow svg {
    transform: rotate(180deg);
}

.panel-arrow.hide svg {
    transform: rotate(0deg);
}

.panel-arrow:hover, 
.panel-arrow:hover svg, 
.panel-arrow.hide:hover, 
.panel-arrow.hide svg{
    background: #fff;
    fill: var(--color-primary);
}

.setting__panel .card.hide {
    min-height: 0px;
    height: 0px;
    padding: 0px 15px !important;
    overflow: hidden;
}

.icon-size{
    width: 24px !important;
    height: 24px !important;
}


body.dark .icon-edit, .icon-memo, .icon-trash, .icon-arrow-right, .icon-clock, .header__setting, .file-download-icon {
    fill: #6F767E !important;
}

body.dark .icon{
    fill: #FCFCFC;
}

.icon-setting {
    fill: #fff;
    width: 26px;
    height: 26px;
}

body.dark .some-icon {
    display: none;
}

.some-icon-dark {
    display: none;
}

body.dark .some-icon-dark {
    display: inline-block;
}

.select {
    float: none;
    width: auto;
    height: 48px;
    padding: 0 48px 0 16px;
    background: none;
    box-shadow: inset 0 0 0 2px #EFEFEF;
    border-radius: 12px;
    border: none;
    opacity: 1;
    font-size: 14px;
    font-weight: 600;
    line-height: 48px;
    color: #1A1D1F;
}

.select:after {
    display: none;
}

.select:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12.707 15.707l-.094.083a1 1 0 0 1-1.32-.083h0l-6-6-.083-.094a1 1 0 0 1 1.497-1.32h0L12 13.585l5.293-5.292.094-.083a1 1 0 0 1 1.32 1.497h0l-6 6z' fill='%231b86ca'/%3E%3C/svg%3E") no-repeat 50% 50%/24px auto;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

body.dark .select {
    background: none;
    box-shadow: inset 0 0 0 2px #272B30;
    -webkit-appearance: none;
    color: #6F767E;
}

.select:hover {
    box-shadow: inset 0 0 0 2px #9A9FA5;
}

body.dark .select:hover {
    box-shadow: inset 0 0 0 2px #33383F;
}

.select.open {
    box-shadow: inset 0 0 0 2px #9A9FA5;
    background: #FFFFFF;
}

body.dark .select.open {
    box-shadow: inset 0 0 0 2px #33383F;
    background: #111315;
    color: #FCFCFC;
}

.select.open:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.select .current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Pretendard';
    font-weight: 500;
}

body.dark .select .current {
    color: #ddd;
}

.select .list {
    right: 0;
    margin-top: 2px;
    padding: 8px 0;
    border-radius: 12px;
    background: #FFFFFF;
    border: none;
    box-shadow: inset 0 0 0 2px #EFEFEF, 0 4px 12px rgba(244, 244, 244, 0.1);
}

body.dark .select .list {
    background: #111315;
    box-shadow: inset 0 0 0 2px #33383F, 0 4px 12px rgba(17, 19, 21, 0.1);
}

.select .option {
    min-height: auto;
    padding: 8px 16px;
    background: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.select .option:hover,
.select .option.focus,
.select .option.selected.focus {
    background: none;
}

.select .option:hover,
.select .option.focus {
    font-weight: 600;
    color: #1A1D1F;
}

body.dark .select .option:hover,
body.dark .select .option.focus {
    color: #FCFCFC;
}

.select .option.selected {
    font-weight: 600;
    color: var(--color-primary);
}

body.dark .select .option.selected {
    color: var(--color-primary);
}

.select_small {
    height: 40px;
    padding: 0 40px 0 16px;
    line-height: 40px;
}

.select_small:before {
    width: 40px;
    background-size: 16px auto;
}

.select_small .option {
    padding: 4px 16px;
}

.select_up .list {
    top: auto;
    bottom: 100%;
    margin: 0 0 2px;
}

.tooltip {
    display: inline-block;
    margin-left: 4px;
    cursor: pointer;
}

.tooltipster-base .tooltipster-box {
    margin: 0 !important;
    background: #272B30;
    border: none;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 0px 1px #000000;
}

.tooltipster-base .tooltipster-content {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: #F4F4F4;
}

.tooltipster-base .tooltipster-arrow {
    display: none;
}

.apexcharts-canvas .apexcharts-text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.01em;
    fill: #9A9FA5;
}

.apexcharts-canvas .apexcharts-gridline {
    stroke: #EFEFEF;
}

body.dark .apexcharts-canvas .apexcharts-gridline {
    stroke: #272B30 !important;
}

.apexcharts-canvas .apexcharts-xcrosshairs.apexcharts-active,
.apexcharts-canvas .apexcharts-ycrosshairs.apexcharts-active {
    stroke: rgba(111, 118, 126, 0.5);
}

body.dark .apexcharts-canvas .apexcharts-xcrosshairs.apexcharts-active,
body.dark .apexcharts-canvas .apexcharts-ycrosshairs.apexcharts-active {
    stroke: #6F767E;
}

.apexcharts-canvas .apexcharts-marker {
    stroke-width: 0;
}

.apexcharts-canvas .apexcharts-tooltip {
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 0px 1px #000000;
}

.apexcharts-canvas .apexcharts-tooltip-title {
    margin-bottom: 8px;
    padding: 0;
}

.apexcharts-canvas .apexcharts-tooltip-series-group {
    background: none !important;
    padding: 0 !important;
}

.apexcharts-canvas .apexcharts-tooltip-y-group {
    padding: 0;
}

.apexcharts-canvas .apexcharts-tooltip-marker {
    margin-right: 4px;
    border-radius: 4px;
}

.apexcharts-canvas .apexcharts-tooltip-text {
    font-weight: 600;
    color: #FCFCFC;
}

.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light {
    border-color: rgba(255, 255, 255, 0.12);
    background: #272B30;
}

.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: none;
    border: none;
    color: #EFEFEF;
}

.apexcharts-canvas .apexcharts-legend.position-bottom.apexcharts-align-center,
.apexcharts-canvas .apexcharts-legend.position-top.apexcharts-align-center {
    justify-content: space-between;
}

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

    .apexcharts-canvas .apexcharts-legend.position-bottom.apexcharts-align-center,
    .apexcharts-canvas .apexcharts-legend.position-top.apexcharts-align-center {
        justify-content: center;
    }
}

.apexcharts-canvas .apexcharts-legend-marker {
    border-radius: 4px !important;
}

.apexcharts-canvas .apexcharts-legend-series {
    margin-top: 6px !important;
}

.apexcharts-canvas .apexcharts-legend-text {
    font-weight: 600 !important;
    color: #1A1D1F !important;
}

body.dark .apexcharts-canvas .apexcharts-legend-text {
    color: #EFEFEF !important;
}

body.dark .apexcharts-canvas .apexcharts-pie-area {
    stroke: #1A1D1F;
}

.slick-arrow {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0;
    transition: all .2s;
}

.slick-arrow svg {
    position: relative;
    z-index: 2;
}

.slick-arrow path {
    fill: #6F767E;
    transition: fill .2s;
}

.slick-arrow:hover {
    box-shadow: inset 0 0 0 2px #272B30;
}

body.dark .slick-arrow:hover {
    box-shadow: inset 0 0 0 2px #EFEFEF;
}

body.dark .slick-arrow:hover path {
    fill: #272B30;
}

.fancybox-caption__body {
    color: #6F767E;
}

.fancybox-image {
    border-radius: 16px;
}

.fancybox-infobar {
    font-size: 14px;
    font-weight: 700;
    color: #6F767E;
}

.fancybox-bg {
    background: #1A1D1F;
}

.fancybox-is-open .fancybox-bg {
    opacity: 1;
}

.tagify {
    padding: 3px;
    background: #F4F4F4;
    border: none;
    border-radius: 6px;
}

body.dark .tagify {
    background: #272B30;
}

.tagify__tag>div::before {
    border-radius: 6px;
}

.tagify__input::before {
    line-height: 1.4em;
}

body.dark .tagify__input::before {
    color: #FCFCFC;
}

.tagify__input::after {
    color: #9A9FA5;
}

.tagify__input:focus:empty:before {
    color: #9A9FA5;
}

.noUi-horizontal {
    height: 4px;
}

.noUi-target {
    border: none;
    background: #EFEFEF;
    box-shadow: none;
}

body.dark .noUi-target {
    background: #272B30;
}

.noUi-connect {
    background: var(--color-primary);
}

.noUi-handle {
    border: none;
    box-shadow: none;
    background: #FCFCFC;
    border-radius: 50%;
    cursor: pointer;
}

.noUi-handle:before,
.noUi-handle:after {
    display: none;
}

.noUi-horizontal .noUi-handle {
    right: -12px;
    top: -6px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-primary);
    background: #FCFCFC;
    box-shadow: 0px 1px 2px #2881FF, inset 0px 2px 2px #FFFFFF;
}

.noUi-tooltip {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    padding: 3px 10px;
    background: #272B30;
    border-radius: 8px;
    border: 1px solid rgba(252, 252, 252, 0.12);
    font-size: 12px;
    font-weight: 600;
    color: #FCFCFC;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

.noUi-tooltip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: #272B30 transparent transparent transparent;
}

body.dark .noUi-tooltip {
    background: #111315;
}

body.dark .noUi-tooltip:before {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: #111315 transparent transparent transparent;
}

.noUi-handle:hover .noUi-tooltip {
    visibility: visible;
    opacity: 1;
}

.noUi-horizontal .noUi-tooltip {
    bottom: 24px;
}

.range_time .noUi-horizontal {
    height: 2px;
}

.range_time .noUi-handle {
    top: -11px;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
    right: -12px;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
}

.m-auto {
    margin: auto;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.align-baseline {
    align-items: baseline;
}

@media only screen and (max-width: 1259px) {
    .desktop-hide {
        display: none !important;
    }
}

.desktop-show {
    display: none !important;
}

@media only screen and (max-width: 1259px) {
    .desktop-show {
        display: block !important;
    }
}

@media only screen and (max-width: 1259px) {
    .desktop-text-right {
        text-align: right !important;
    }
}

@media only screen and (max-width: 1023px) {
    .tablet-hide {
        display: none !important;
    }
}

.tablet-show {
    display: none !important;
}

@media only screen and (max-width: 1023px) {
    .tablet-show {
        display: block !important;
    }
}

@media only screen and (max-width: 1023px) {
    .tablet-text-right {
        text-align: right !important;
    }
}

@media only screen and (max-width: 767px) {
    .mobile-hide {
        display: none !important;
    }
}

.mobile-show {
    display: none !important;
}

@media only screen and (max-width: 767px) {
    .mobile-show {
        display: block !important;
    }
}

@media only screen and (max-width: 767px) {
    .mobile-text-right {
        text-align: right !important;
    }
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
}

.h1,
.h2,
.h3,
.h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.h1 {
    font-size: 64px;
    line-height: 1;
    letter-spacing: -.03em;
}

.h2 {
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.03em;
}

.h3 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .h3 {
        font-size: 32px;
        line-height: 1.25;
        letter-spacing: -.03em;
    }
}

.h4 {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -.03em;
}

[class^="button"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--sp-btn-height-md, 44px);
    padding: 0 20px;
    background: var(--color-primary);
    border-radius: var(--sp-radius-md, 8px);
    font-size: var(--sp-text-body, 14px);
    font-weight: var(--sp-weight-semibold, 600);
    line-height: 1.6;
    text-align: center;
    color: #FCFCFC;
    transition: all .2s;
    font-family: 'Pretendard';
    white-space: nowrap;
    cursor: pointer !important;
}

[class^="button"]:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring, 0 0 0 3px rgba(26,111,166,0.15));
}

[class^="button"]:hover {
    /* background: #0db850; */
    background-color: var(--color-primary-hover);
}

.button-small:hover, [p-value="cancelBtn"]:hover, [p-value="closeWindow"]:hover {
    /* background: #0db850; */
    background-color: #F4F4F4;
    color: var(--color-primary);
   
}

.button-small:hover {
    box-shadow: 0 0 0 2px #1a1d1f inset;
}



[class^="button"].disabled {
    opacity: .5;
    pointer-events: none;
}

[class^="button"] svg {
    fill: #FCFCFC;
    transition: all .2s;
}

[class^="button"]:not([class^="button-square"]) svg:first-child {
    /* margin-right: 8px; */
    width: 20px;
    height: 20px;
}

[class^="button"]:not([class^="button-square"]) svg:last-child {
    box-sizing: content-box;
}

.button-stroke,
.button-stroke-red {
    background: none;
    box-shadow: 0 0 0 2px #EFEFEF inset;
}

body.dark .button-stroke,
body.dark .button-stroke-red {
    box-shadow: 0 0 0 2px #272B30 inset;
}

.button-stroke {
    color: #1A1D1F;
}

.button-stroke svg {
    fill: #6F767E;
}

/* 파일공유 */
[p-select="btn-user-sync"].button-stroke svg {
    fill: #ed1e1e;
}
[p-select="btn-user-sync"].button-stroke:hover svg {
    /* fill: #ed1e1e; */
}


/* 파일공유 변경된 아이콘  */
.button-stroke#fileShare svg {
    /* stroke: #6F767E; */
}



body.dark .button-stroke {
    color: #FCFCFC;
}

.button-stroke:hover {
    /* background: none; */
    box-shadow: 0 0 0 2px #1A1D1F inset;
}




.button-stroke:hover svg {
   /*  fill: #1A1D1F; */
}

body.dark .button-stroke:hover {
    box-shadow: 0 0 0 2px #EFEFEF inset;
}

body.dark .button-stroke:hover svg {
    fill: #FCFCFC;
}

.button-stroke.active {
    background: #272B30;
    box-shadow: 0 0 0 2px #272B30 inset;
}

.button-stroke.active svg {
    fill: #1A1D1F;
}

.button-stroke-red {
    color: #FF6A55;
}

.button-stroke-red svg {
    fill: #FF6A55;
}

.button-stroke-red:hover,
.button-stroke-red.active {
    background: #FF6A55;
    box-shadow: 0 0 0 2px #FF6A55 inset;
    color: #FCFCFC;
}

.button-stroke-red:hover svg,
.button-stroke-red.active svg {
    fill: #FCFCFC;
}

.button-white {
    box-shadow: 0 0 0 2px #EFEFEF inset;
    background: #FCFCFC;
    color: #1A1D1F;
}

.button-white svg {
    fill: #1A1D1F;
}

.button-white:hover,
.button-white.active {
    box-shadow: 0 0 0 2px #1A1D1F inset;
    background: #FFFFFF;
    color: #1A1D1F;
}

.button-white:hover svg,
.button-white.active svg {
    fill: #1A1D1F;
}

.button-small {
    height: var(--sp-btn-height-sm, 36px);
    padding: 0 16px;
    border-radius: var(--sp-radius-md, 8px);
    font-size: var(--sp-text-caption, 13px);
    cursor: pointer;
}
/* 투표 리스트 버튼 */
.button-small.vote-list{
    margin-left: 12px;
}

/* 투표 시작, 즉시 마감 */
[class*="vote__vbutton"]{
    width: 120px;
    margin: 0 auto;
}

.vote__vbutton_end{
    background-color: #ed1e1e;
}

.control__btn {
    letter-spacing: -0.5px;
    padding: 0 12px;
    font-size: 1.2em;
    font-weight: 600;

}

.control__btn.checked {
    background-color: #ed1e1e;
    color: #fff;
}

.control__btn.checked svg {
    fill: #fff;
}

.control__btn.mr__10 {
    /* margin-right: 6px !important; */
}

.control__btn.mr__10:not(.display__topbtn):last-child {
    margin-right: 0 !important;
}

.button-square-stroke {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    box-shadow: 0 0 0 2px #EFEFEF inset;
    transition: all .2s;
}

.button-square-stroke svg {
    fill: #6F767E;
}

body.dark .button-square-stroke {
    box-shadow: 0 0 0 2px #272B30 inset;
}

.button-square-stroke:hover {
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary) inset;
}

.button-square-stroke:hover svg {
    fill: #FCFCFC;
}

.button-square-stroke.button-small {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

[class^="status"] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 24px;
    font-weight: 700;
}

.status-green {
    background: #EAFAE5;
    color: #83BF6E;
}

body.dark .status-green {
    background: rgba(131, 191, 110, 0.15);
}

.status-green-dark {
    background: #B5E4CA;
    color: #1A1D1F;
}

.status-red {
    background: #FFE7E4;
    color: #FF6A55;
}

body.dark .status-red {
    background: rgba(255, 106, 85, 0.15);
}

.status-red-dark {
    background: #FFBC99;
    color: #FCFCFC;
}

.status-purple {
    background: #CABDFF;
    color: #8E59FF;
}

body.dark .status-purple {
    background: rgba(142, 89, 255, 0.15);
}

.status-blue2 {
    background: #B1E5FC;
    color: #1952ce;
}

.status-blue {
    background: #B1E5FC;
    color: var(--color-primary);
}

.status-yellow {
    background: #FFD88D;
    color: #1A1D1F;
}

body.dark .status-yellow {
    background: rgba(255, 216, 141, 0.15);
    color: #FFD88D;
}

[class^="title"] {
    position: relative;
    display: inline-block;
    padding-left: 32px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    [class^="title"] {
        font-size: 18px;
    }
}

[class^="title"]:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 4px;
}

.title-red:before {
    background: #FFBC99;
}

.title-blue:before {
    background: #B1E5FC;
}

.title-purple:before {
    background: #CABDFF;
}

.title-yellow:before {
    background: #FFD88D;
}

.title-green:before {
    background: #B5E4CA;
}

.balance.negative,
.balance.positive {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
}

.balance.negative svg,
.balance.positive svg {
    margin-right: 4px;
}

.balance.negative {
    color: #FF6A55;
}

.balance.negative svg {
    fill: #FF6A55;
}

.balance.positive {
    color: #83BF6E;
}

.balance.positive svg {
    fill: #83BF6E;
}

.balance.background.positive,
.balance.background.negative {
    height: 24px;
    padding: 0 4px;
    border-radius: 8px;
}

.balance.background.positive {
    background: #EAFAE5;
}

body.dark .balance.background.positive {
    background: rgba(234, 250, 229, 0.25);
}

.balance.background.negative {
    background: #FFE7E4;
}

body.dark .balance.background.negative {
    background: rgba(255, 216, 211, 0.15);
}

.favorite {
    position: relative;
    width: 20px;
    height: 20px;
}

.favorite .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    fill: #9A9FA5;
    transition: all .2s;
}

.favorite .icon:nth-child(2) {
    z-index: 2;
    opacity: 0;
}

.favorite:hover .icon {
    fill: var(--color-primary);
}

.favorite.active .icon {
    fill: var(--color-primary);
}

.favorite.active .icon:first-child {
    opacity: 0;
}

.favorite.active .icon:nth-child(2) {
    opacity: 1;
}

.page:not(.pdfViewer .page) {
    padding: 76px 0 0 0;
    height: 100%;
}

#wa-admin-votelog .page:not(.pdfViewer .page) {
    padding: 0 0 0 0;
}

/*@media only screen and (max-width: 1339px) {
    .page:not(.pdfViewer .page) {
        padding: 80px 0 0 0;
    }
}

@media only screen and (max-width: 1259px) {
    .page:not(.pdfViewer .page) {
        padding-left: 96px;
    }
}*/

@media only screen and (max-width: 1023px) {
    .page:not(.pdfViewer .page) {
        overflow: hidden;
    }
}



.page__inner {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 96px);
    padding: 40px;
}

@media only screen and (max-width: 1339px) {
    .page__inner {
        padding: 32px 24px;
    }
}

@media only screen and (max-width: 767px) {
    .page__inner {
        padding: 24px 16px;
    }
}

.page__container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.page__container.wide {
    top : 0px;
    max-width: 100%;
}

.page__title {
    margin-bottom: 24px;
}

@media only screen and (max-width: 767px) {
    .page__title {
        margin-bottom: 16px;
    }
}

.page__row {
    display: flex;
}

@media only screen and (max-width: 1023px) {
    .page__row {
        display: block;
    }
}

.page__row:not(:last-child) {
    margin-bottom: 8px;
}

.page__col:first-child {
    flex: 0 0 calc(100% - 340px);
    width: calc(100% - 340px);
    padding-right: 8px;
}

@media only screen and (max-width: 1339px) {
    .page__col:first-child {
        flex: 0 0 calc(100% - 324px);
        width: calc(100% - 324px);
    }
}

@media only screen and (max-width: 1259px) {
    .page__col:first-child {
        flex: 0 0 calc(100% - 312px);
        width: calc(100% - 312px);
    }
}

@media only screen and (max-width: 1023px) {
    .page__col:first-child {
        width: 100%;
        margin-bottom: 8px;
        padding-right: 0;
    }
}

.page__col:nth-child(2) {
    flex-shrink: 0;
    width: 340px;
}

@media only screen and (max-width: 1339px) {
    .page__col:nth-child(2) {
        width: 324px;
    }
}

@media only screen and (max-width: 1259px) {
    .page__col:nth-child(2) {
        width: 312px;
    }
}

@media only screen and (max-width: 1023px) {
    .page__col:nth-child(2) {
        width: 100%;
    }
}

.page_simple {
    padding: 0;
}

@media only screen and (max-width: 1339px) {
    .page_simple {
        padding: 0;
    }
}

@media only screen and (max-width: 1259px) {
    .page_simple {
        padding-left: 0;
    }
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 340px;
    padding: 24px;
    background: #FCFCFC;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

@media only screen and (max-width: 1339px) {
    .sidebar {
        width: 300px;
        padding: 16px;
    }
}

@media only screen and (max-width: 1259px) {
    .sidebar {
        z-index: 30;
        width: 96px;
        align-items: center;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar {
        width: 100%;
        align-items: stretch;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s;
    }
}

body.dark .sidebar {
    background: #1A1D1F;
}

.sidebar.visible {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

@media only screen and (max-width: 1259px) {
    .sidebar.active {
        align-items: stretch;
        width: 300px;
        box-shadow: 4px 0 32px rgba(17, 19, 21, 0.05);
    }

    .sidebar.active .sidebar__item,
    .sidebar.active .sidebar__link,
    .sidebar.active .sidebar__help {
        width: 100%;
        font-size: 15px;
    }

    .sidebar.active .sidebar__item>.icon,
    .sidebar.active .sidebar__help>.icon {
        margin-right: 12px;
    }

    .sidebar.active .sidebar__counter {
        display: block;
    }

    .sidebar.active .sidebar__toggle {
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .sidebar.active .sidebar__toggle .icon {
        fill: #1A1D1F;
    }

    .sidebar.active .sidebar__toggle .icon:first-child {
        display: none;
    }

    .sidebar.active .sidebar__toggle .icon:nth-child(2) {
        display: inline-block;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar.active {
        width: 100%;
    }
}

.sidebar__logo {
    display: block;
    width: 48px;
    margin-bottom: 48px;
}

@media only screen and (max-width: 1339px) {
    .sidebar__logo {
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar__logo {
        margin-left: auto;
    }
}

.sidebar__logo img {
    width: 100%;
}

.sidebar__menu {
    display: flex;
    flex-direction: column;
    margin-bottom: auto;
}

.sidebar__item:not(:last-child) {
    margin-bottom: 8px;
}

.sidebar__item[href],
.sidebar__help,
.sidebar__head,
.sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: background .2s, box-shadow .2s, color .2s;
}

.sidebar__item[href] .icon,
.sidebar__help .icon,
.sidebar__head .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

@media only screen and (min-width: 1024px) {

    .sidebar__item[href]:hover,
    .sidebar__help:hover,
    .sidebar__head:hover {
        color: #1A1D1F;
    }

    .sidebar__item[href]:hover .icon,
    .sidebar__help:hover .icon,
    .sidebar__head:hover .icon {
        fill: #1A1D1F;
    }

    body.dark .sidebar__item[href]:hover,
    body.dark .sidebar__help:hover,
    body.dark .sidebar__head:hover {
        color: #FCFCFC;
    }

    body.dark .sidebar__item[href]:hover .icon,
    body.dark .sidebar__help:hover .icon,
    body.dark .sidebar__head:hover .icon {
        fill: #FCFCFC;
    }
}

.sidebar__item[href].active,
.sidebar__help.active {
    color: #1A1D1F;
}

.sidebar__item[href].active .icon,
.sidebar__help.active .icon {
    fill: #1A1D1F;
}

body.dark .sidebar__item[href].active,
body.dark .sidebar__help.active {
    color: #FCFCFC;
}

body.dark .sidebar__item[href].active .icon,
body.dark .sidebar__help.active .icon {
    fill: #FCFCFC;
}

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

    .sidebar__item[href],
    .sidebar__help {
        width: 48px;
        font-size: 0;
    }
}

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

    .sidebar__item[href],
    .sidebar__help {
        width: 100%;
        font-size: 15px;
    }
}

.sidebar__item[href] .icon,
.sidebar__help .icon {
    margin-right: 12px;
}

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

    .sidebar__item[href] .icon,
    .sidebar__help .icon {
        margin-right: 0;
    }
}

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

    .sidebar__item[href] .icon,
    .sidebar__help .icon {
        margin-right: 12px;
    }
}

.sidebar__item[href].active,
.sidebar__help.active {
    background: #EFEFEF;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px #FFFFFF;
}

body.dark .sidebar__item[href].active,
body.dark .sidebar__help.active {
    background: #272B30;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 1px rgba(255, 255, 255, 0.11);
}

.sidebar__item_dropdown.active .sidebar__body,
.sidebar__item_dropdown.visible .sidebar__body {
    display: block;
}

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

    .sidebar__item_dropdown.active .sidebar__body,
    .sidebar__item_dropdown.visible .sidebar__body {
        display: none;
    }
}

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

    .sidebar__item_dropdown.active .sidebar__body,
    .sidebar__item_dropdown.visible .sidebar__body {
        display: block;
    }
}

.sidebar__item_dropdown.active .sidebar__head>.icon:last-child,
.sidebar__item_dropdown.visible:not(.wide) .sidebar__head>.icon:last-child {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media only screen and (max-width: 1259px) {
    .sidebar__item_dropdown.wide .sidebar__head {
        font-size: 15px;
    }
}

@media only screen and (max-width: 1259px) and (max-width: 1259px) {
    .sidebar__item_dropdown.wide .sidebar__head>.icon:first-child {
        margin-right: 12px;
    }
}

@media only screen and (max-width: 1259px) and (max-width: 1259px) {
    .sidebar__item_dropdown.wide .sidebar__head>.icon:last-child {
        display: inline-block;
    }
}

@media only screen and (max-width: 1259px) {
    .sidebar__item_dropdown.wide .sidebar__add {
        display: flex;
    }
}

@media only screen and (max-width: 1259px) {
    .sidebar__item_dropdown.wide.active .sidebar__head>.icon:last-child {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@media only screen and (max-width: 1259px) {
    .sidebar__item_dropdown.wide.active .sidebar__body {
        display: block;
    }
}

.sidebar__top {
    position: relative;
}

.sidebar__top.active .sidebar__head {
    background: #EFEFEF;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px #FFFFFF;
    color: #1A1D1F;
}

body.dark .sidebar__top.active .sidebar__head {
    background: #272B30;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 1px rgba(255, 255, 255, 0.11);
    color: #FCFCFC;
}

@media only screen and (max-width: 1259px) {
    .sidebar__item.visible:not(.wide) .sidebar__head {
        background: #EFEFEF;
        box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px #FFFFFF;
        color: #1A1D1F;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar__item.visible:not(.wide) .sidebar__head {
        background: none;
        box-shadow: none;
        color: #6F767E;
    }
}

@media only screen and (max-width: 1259px) {
    body.dark .sidebar__item.visible:not(.wide) .sidebar__head {
        background: #272B30;
        box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 1px rgba(255, 255, 255, 0.11);
        color: #FCFCFC;
    }

    body.dark .sidebar__item.visible:not(.wide) .sidebar__head .icon {
        fill: #FCFCFC;
    }
}

@media only screen and (max-width: 767px) {
    body.dark .sidebar__item.visible:not(.wide) .sidebar__head {
        background: none;
        box-shadow: none;
        color: #6F767E;
    }

    body.dark .sidebar__item.visible:not(.wide) .sidebar__head .icon {
        fill: #6F767E;
    }
}

@media only screen and (max-width: 1259px) {
    .sidebar__head {
        font-size: 0;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar__head {
        font-size: 15px;
    }
}

.sidebar__head .icon {
    transition: fill .2s, -webkit-transform .2s;
    transition: transform .2s, fill .2s;
    transition: transform .2s, fill .2s, -webkit-transform .2s;
}

.sidebar__head .icon:first-child {
    margin-right: 12px;
}

@media only screen and (max-width: 1259px) {
    .sidebar__head .icon:first-child {
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar__head .icon:first-child {
        margin-right: 12px;
    }
}

.sidebar__head .icon:last-child {
    margin-left: auto;
}

@media only screen and (max-width: 1259px) {
    .sidebar__head .icon:last-child {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar__head .icon:last-child {
        display: inline-block;
    }
}

.sidebar__add {
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 48px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #EFEFEF;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 0;
    transition: border-color .2s;
}

@media only screen and (max-width: 1259px) {
    .sidebar__add {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar__add {
        display: flex;
    }
}

body.dark .sidebar__add {
    border-color: #33383F;
}

.sidebar__add .icon {
    width: 10px;
    height: 10px;
    fill: #6F767E;
    transition: fill .2s;
}

.sidebar__add:hover {
    border-color: #1A1D1F;
}

.sidebar__add:hover .icon {
    fill: #1A1D1F;
}

body.dark .sidebar__add:hover {
    border-color: #9A9FA5;
}

body.dark .sidebar__add:hover .icon {
    fill: #9A9FA5;
}

.sidebar__add.active {
    border-color: #9A9FA5;
}

.sidebar__add.active .icon {
    fill: #9A9FA5;
}

.sidebar__body {
    position: relative;
    display: none;
    padding-left: 36px;
}

.sidebar__body:before {
    content: "";
    position: absolute;
    top: 0;
    left: 23px;
    bottom: 32px;
    width: 2px;
    border-radius: 2px;
    background: #EFEFEF;
}

body.dark .sidebar__body:before {
    background: #272B30;
}

.sidebar__link:before {
    content: "";
    position: absolute;
    top: 12px;
    left: -13px;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath d='M1 1v4a8 8 0 0 0 8 8h4' stroke='%23efefef' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

body.dark .sidebar__link:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath d='M1 1v4a8 8 0 0 0 8 8h4' stroke='%23272B30' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sidebar__link .icon {
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0;
    fill: #1A1D1F;
    transition: opacity .2s;
}

body.dark .sidebar__link .icon {
    fill: #FCFCFC;
}

.sidebar__link:hover {
    color: #1A1D1F;
}

body.dark .sidebar__link:hover {
    color: #FCFCFC;
}

.sidebar__link.active {
    background: #EFEFEF;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px #FFFFFF;
    color: #1A1D1F;
}

body.dark .sidebar__link.active {
    background: #272B30;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 1px rgba(255, 255, 255, 0.11);
    color: #FCFCFC;
}

.sidebar__link.active .icon {
    opacity: 1;
}

.sidebar__counter {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    min-width: 24px;
    margin-left: auto;
    border-radius: 6px;
    text-align: center;
    line-height: 24px;
    color: #1A1D1F;
}

.sidebar__toggle {
    display: none;
    width: 48px;
    height: 48px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media only screen and (max-width: 1259px) {
    .sidebar__toggle {
        display: inline-block;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar__toggle {
        display: none;
    }
}

.sidebar__toggle .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
}

.sidebar__toggle .icon:nth-child(2) {
    display: none;
}

.sidebar__close {
    display: none;
}

@media only screen and (max-width: 767px) {
    .sidebar__close {
        display: block;
        position: absolute;
        top: 16px;
        left: 16px;
        width: 48px;
        height: 48px;
    }

    .sidebar__close .icon {
        width: 24px;
        height: 24px;
        fill: #1A1D1F;
    }

    body.dark .sidebar__close .icon {
        fill: #FCFCFC;
    }
}

.sidebar__foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 2px solid #F4F4F4;
}

@media only screen and (max-width: 1259px) {
    .sidebar__foot {
        margin-top: 12px;
        padding-top: 12px;
    }
}

body.dark .sidebar__foot {
    border-color: #272B30;
}

.sidebar .theme {
    margin-top: 16px;
}

.sidebar__help .sidebar__counter {
    background: #CABDFF;
}

@media only screen and (max-width: 1259px) {
    .sidebar__help .sidebar__counter {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar__help .sidebar__counter {
        display: block;
    }
}

@media only screen and (max-width: 1259px) {
    .sidebar+.overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
        background: rgba(244, 244, 244, 0.8);
        visibility: hidden;
        opacity: 0;
        transition: all .2s;
    }

    body.dark .sidebar+.overlay {
        background: rgba(39, 43, 48, 0.9);
    }

    .sidebar+.overlay.active {
        visibility: visible;
        opacity: 1;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar+.overlay {
        display: none;
    }
}

.theme {
    display: block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 0;
}

@media only screen and (max-width: 1259px) {
    .theme.wide .theme__input:checked+.theme__inner .theme__box:first-child {
        display: flex;
    }

    .theme.wide .theme__inner {
        display: flex;
        padding: 4px 2px;
        border-radius: 20px;
    }

    .theme.wide .theme__box {
        display: flex;
        height: 32px;
        border-radius: 16px;
        font-size: 15px;
    }

    .theme.wide .theme__box .icon {
        margin-right: 8px;
    }
}

.theme__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

body.dark .theme__inner, .theme__input:checked+.theme__inner {
    background: #111315;
}

.theme__input:checked+.theme__inner .theme__box:first-child {
    background: none;
    box-shadow: none;
    color: #6F767E;
}

@media only screen and (max-width: 1259px) {
    .theme__input:checked+.theme__inner .theme__box:first-child {
        /* display: none; */
    }
}

@media only screen and (max-width: 767px) {
    .theme__input:checked+.theme__inner .theme__box:first-child {
        display: flex;
    }
}

.theme__input:checked+.theme__inner .theme__box:first-child .icon {
    fill: #6F767E;
}

.theme__input:checked+.theme__inner .theme__box:first-child:hover {
    color: #FCFCFC;
}

.theme__input:checked+.theme__inner .theme__box:first-child:hover .icon {
    fill: #FCFCFC;
}

.theme__input:checked+.theme__inner .theme__box:nth-child(2) {
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.49), inset 0px 2px 1px rgba(255, 255, 255, 0.06);
    background: #272B30;
    color: #FCFCFC;
}

.theme__input:checked+.theme__inner .theme__box:nth-child(2) .icon {
    fill: #FCFCFC;
}

@media only screen and (max-width: 1259px) {
    .theme__input:checked+.theme__inner .theme__box:nth-child(2) {
        display: flex;
    }
}

.theme__inner {
    position: relative;
    display: flex;
    padding: 4px;
    border-radius: 20px;
    background: #F4F4F4;
    transition: background .2s;
}

@media only screen and (max-width: 1259px) {
    .theme__inner {
        /* display: block; */
        /* padding: 2px; */
        /* border-radius: 30%; */
    }
}

@media only screen and (max-width: 767px) {
    .theme__inner {
        display: flex;
        padding: 4px 2px;
        border-radius: 20px;
    }
}

.theme__box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 32px;
    margin: 2px;
    white-space: nowrap;
    border-radius: 16px;
    font-size: 15px;
    padding: 0 20px;
    transition: background .2s, box-shadow .2s, color .2s;
}

@media only screen and (max-width: 1259px) {
    .theme__box {
        /* height: 40px; */
        /* border-radius: 50%; */
        /* font-size: 0; */
    }
}

@media only screen and (max-width: 767px) {
    .theme__box {
        height: 32px;
        border-radius: 16px;
        font-size: 15px;
    }
}

.vote__utils .theme__box .icon{
    margin-right: 0px;
}

.theme__box .icon {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    transition: fill .2s;
}

@media only screen and (max-width: 1259px) {
    .theme__box .icon {
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .theme__box .icon {
        margin-right: 8px;
    }
}

body.dark .theme__box {
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.49), inset 0px 2px 1px rgba(255, 255, 255, 0.06);
    background: #272B30;
    color: #FCFCFC;
}

.theme__box:first-child {
    background: #FCFCFC;
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}

.theme__box:nth-child(2) {
    color: #6F767E;
}

@media only screen and (max-width: 1259px) {
    .theme__box:nth-child(2) {
        /* display: none; */
    }
}

@media only screen and (max-width: 767px) {
    .theme__box:nth-child(2) {
        display: flex;
    }
}

.theme__box:nth-child(2) .icon {
    fill: #6F767E;
}

.theme__box:hover {
    color: #1A1D1F;
}

.theme__box:hover .icon {
    fill: #1A1D1F;
}

.help {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 340px;
    padding: 24px 12px;
    background: #FFFFFF;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}

@media only screen and (max-width: 1339px) {
    .help {
        width: 320px;
        padding: 16px 8px;
    }
}

@media only screen and (max-width: 767px) {
    .help {
        width: 100%;
    }
}

body.dark .help {
    background: #111315;
}

.help.active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

@media only screen and (max-width: 1259px) {
    .help.active {
        box-shadow: 4px 0 32px rgba(17, 19, 21, 0.05);
    }
}

.help__head {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px;
}

.help__head>.icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    fill: #1A1D1F;
}

body.dark .help__head>.icon {
    fill: #FCFCFC;
}

.help__close {
    margin-left: auto;
}

.help__close .icon {
    width: 24px;
    height: 24px;
    fill: #1A1D1F;
    transition: fill .2s;
}

body.dark .help__close .icon {
    fill: #FCFCFC;
}

.help__close:hover .icon {
    fill: var(--color-primary);
}

body.dark .help__close:hover .icon {
    fill: var(--color-primary);
}

.help__list {
    margin-bottom: auto;
    padding: 24px 0;
    border-top: 1px solid #EFEFEF;
}

body.dark .help__list {
    border-color: rgba(111, 118, 126, 0.2);
}

.help__menu {
    display: flex;
    flex-direction: column;
}

.help__item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    color: #1A1D1F;
    cursor: pointer;
    transition: all .2s;
}

@media only screen and (max-width: 1339px) {
    .help__item {
        padding: 6px;
    }
}

body.dark .help__item {
    color: #FCFCFC;
}

.help__item:hover {
    background: #F4F4F4;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

body.dark .help__item:hover {
    background: #1A1D1F;
    box-shadow: none;
}

.help__item:not(:last-child) {
    margin-bottom: 8px;
}

.help__preview {
    flex-shrink: 0;
    width: 96px;
    height: 72px;
    margin-right: 16px;
}

.help__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px;
}

.help__title {
    margin-bottom: 8px;
}

.help__line {
    display: flex;
    align-items: center;
}

.help__status {
    margin-right: 4px;
    color: #1A1D1F;
}

.help__user {
    display: flex;
    align-items: center;
    padding: 1px 8px 1px 1px;
    border: 1px solid #EFEFEF;
    border-radius: 4px;
}

body.dark .help__user {
    border-color: #272B30;
}

.help__avatar {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    font-size: 0;
}

.help__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 2px;
}

.help__time {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    color: #6F767E;
}

.help__link {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    color: #6F767E;
    transition: all .2s;
}

.help__link .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.help__link>.icon {
    margin-right: 12px;
}

.help__link:hover {
    color: #1A1D1F;
}

.help__link:hover .icon {
    fill: #1A1D1F;
}

body.dark .help__link:hover {
    color: #FCFCFC;
}

body.dark .help__link:hover .icon {
    fill: #FCFCFC;
}

.help__link:not(:last-child) {
    margin-bottom: 8px;
}

@media only screen and (max-width: 1339px) {
    .help__link:not(:last-child) {
        margin-bottom: 4px;
    }
}

.help__arrow {
    margin-left: auto;
}

.help__arrow .icon {
    width: 24px;
    height: 24px;
}

.help__counter {
    flex-shrink: 0;
    min-width: 24px;
    margin-left: auto;
    border-radius: 6px;
    background: #FFBC99;
    text-align: center;
    line-height: 24px;
    color: #1A1D1F;
}

.help+.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    background: rgba(244, 244, 244, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

body.dark .help+.overlay {
    background: rgba(39, 43, 48, 0.9);
}

.help+.overlay.active {
    visibility: visible;
    opacity: 1;
}

.card {
    position: relative;
    padding: 16px;
    background: #FCFCFC;
    border-radius: 8px;
}

.card.conference-list {
    min-width: 0;
}

.enter__button {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    line-height: 1.5;
    height: auto !important;
    justify-content: center;
    align-items: center;
    color: #102ee9;
    margin-right: 0 !important;
}

/* ConferenceList Media Query */

@media only screen and (max-width: 1300px) {
    .main__users {
        /*top: 76px;
        right: 0;
        height: 100%;
        width: 0 !important;*/
    }

    body[full-screen="true"] .main__users{
        top: 0px;
    }
    
.main__users.active.visible {
    width: 300px !important;
}

.schedule__preview {
    width: 100px !important;
    height: 70px !important;
}
}

@media only screen and (max-width: 767px) {
    .menu__user {
        flex-direction: column !important;
        height: auto !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .org__icon {
        width: 35px !important;
        height: 35px !important;
    }

    .user__thumbnail {
        width: 30px !important;
        height: 30px !important;
    }

    .user__thumbnail svg {
        width: 30px !important;
        height: 30px !important;
    }

    .user__info {
        flex-direction: row !important;
        align-items: center !important;
        margin-top:  10px !important;
        margin-bottom: 10px !important;
    }

    .info__name {
        margin-top: 0 !important;
    }

    .info__sub {
        margin-right: 10px !important;
    }

    .user__logout {
        width: 100% !important;
        flex-direction: row !important;
        height: auto !important;
        padding: 10px !important;
        align-items: center !important;
    }

    .logout__icon {
        margin-bottom: 0 !important;
        margin-right: 6px !important;
    }

    .logout__text {
        margin-top: 0 !important;
        font-size: 1em !important;
    }

    .main__menu {
        min-width: 220px !important;
    }

.conference__view .main__menu {
    width: 330px !important;
    min-width: 330px !important;
}

    .main__users {
        min-width: 0;
        width: 0;
    }

.outerSide__bar{
    width: 0px !important;
} 

.main__users.active.visible {
    min-width: 220px !important;
    width: 220px !important;
}

.conference__view .main__users.setting__panel.active.visible {
    width: 300px !important;
    min-width: 300px !important;
}

.main__users.active.visible .main__users {
    width: 220px !important;
    min-width: 220px !important;
}

.menu__sbtn2 {
    right: 220px !important;
}

.main__users.setting__panel .menu__sbtn2 {
    right: 300px !important;
}

.conference__utils {
    flex-direction: column;
    /* justify-content: flex-start !important; */
}

.menu__slider.menu__sbtn2 {
    top: calc(50% - 81px);
}
}

@media only screen and (max-width: 767px) {
    .card {
        padding: 5px;
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 1024px) {
    .page:not(.pdfViewer .page) {
        padding-left: 0;
    }

    .header {
        padding: 0 20px !important;
        justify-content: space-between;
    }

    .main {
        flex-direction: column;
    }

.main__contents {
   /*  padding: 10px  !important; */
    height: calc(100% - 187px);
}

#wa-conference-list .main__contents {
    height: calc(50%);
}

.main__users.users__layer {
    top: 0px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    width: 220px !important;
}

.main__users.users__layer.conf__list.active.visible {
    display: none;
}

.main__users {
    min-width: 212px !important;
    width: 212px !important;
    /* display: none !important; */
}

/* .conference__view .main__users {
    display: block !important;
    height: calc(100vh - 170px);

} */

.schedule__preview {
    display: none;
}

.schedule__row {
    display: flex !important;
    flex-direction: column;
    padding: 0 10px;
}

.schedule__row.selected {
    background: #fcfcfc !important;
}

.schedule__col {
    display: flex !important;
    width: 100%;
    position: relative;
    padding: 0 !important;
    justify-content: center;
}

.schedule__control.diff {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100%;
    justify-content: center;
    left: 0px !important;
}

.enter__button {
    flex-direction: row;
    margin-left: 10px;
    background: #102ee9 !important;
    color: #fff !important;
    width: 100% !important;
    padding: 8px 0;
    border-radius: 8px !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

.enter__button svg {
    fill: #fff !important;
}

.schedule__date {
    width: 100%;
    text-align: center;
}

.schedule__date br {
    display: none;
}

.main__head {
    height: auto !important;
    padding: 20px 20px 5px 20px !important;
}

#wa-conference-board .main__head {
    flex-direction: column;
    align-items: normal;
}

.main__condition {
    flex-direction: column;
}

.condition__date {
    width: 100%;
    justify-content: center;
}

.condition__date > a.button {
    width: 30px !important;
}

.button.condition__search {
    width: 100%;
}

    .main__menu {
        width: 100% !important;
    }

.conference__view .main__menu.side__menu {
    width: 0 !important;
}

.conference__view .main__menu.side__memo {
    width: 0 !important;
}

[p-select="schedule-row-header"] {
    display: none !important;
}

.menu__items {
    display: block;
    height: auto !important;
    padding: 0 !important;
}

#wa-conference-list .menu__items,
#wa-conference-board .menu__items,
#wa-conference-management .menu__items{
    /* display: block; */
    height: auto !important;
    padding: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;

    scrollbar-width: none
}

.menu__item:nth-child(1), .menu__item:nth-child(2), .menu__item:nth-child(3), .menu__item:nth-child(4), .menu__item:nth-child(5), .menu__item:nth-child(6) {
    /* display: none !important; */
}

/* 태블릿: active 상태 하단 액센트로 변환 */
#wa-conference-list .menu__item.active .menu__root,
#wa-conference-board .menu__item.active .menu__root,
#wa-conference-management .menu__item.active .menu__root {
    border-left: 0;
    border-bottom: 3px solid var(--color-primary);
    padding-left: 24px;
    padding-bottom: 13px;
}

.menu__footer {
    display: none !important;
}
    
    .menu__user {
        flex-direction: row !important;
    }

.user__info {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.info__sub {margin-bottom: 5px;}
    
    .entry__title {
        margin-bottom: 0px !important;
    }
    
    .theme.js-theme {
        display: none;
    }
}


body.dark .card {
    background: #1A1D1F;
}

.card__head {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
    .card__head {
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .card__head_wide {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .card__head_wide .card__title {
        margin-bottom: 16px;
    }
}

.card__title {
    margin-right: auto;
    font-size: 1.2em;
    line-height: 1.5;
}

@media only screen and (max-width: 767px) {
    .card__title {
        padding-top: 6px;
        padding-bottom: 6px;
        overflow-y: hidden !important;
    }
}

.card__chart {
    width: auto;
}

.card__chart_product-views {
    height: 274px;
    margin-left: -10px;
    margin-bottom: -10px;
}

.card__chart_product-views-small {
    height: 172px;
    margin-left: -10px;
    margin-bottom: -10px;
}

.card__chart_traffic-channel {
    height: 358px;
    margin-left: -10px;
}

.card__chart_active-customers {
    height: 244px;
    margin-left: -10px;
    margin-bottom: -10px;
}

.card__chart_top-country {
    height: 274px;
    margin-bottom: -10px;
}

@media only screen and (max-width: 767px) {
    .card__chart_top-country {
        margin-top: -10px;
        margin-bottom: 0;
    }
}

.card__chart_new-customers {
    height: 274px;
    margin-bottom: -10px;
}

@media only screen and (max-width: 1023px) {
    .card__chart_new-customers {
        max-width: 310px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 767px) {
    .card__chart_new-customers {
        margin: -10px auto 0;
    }
}

.card__chart_performance-by-day {
    height: 250px;
    margin-left: -15px;
    margin-bottom: -10px;
}

.card__chart_product-sales {
    height: 335px;
    margin-left: -15px;
    margin-bottom: -15px;
}

.card__full {
    width: 40px;
    height: 40px;
    margin-left: auto;
}

.card__full .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.card__full:hover .icon {
    fill: var(--color-primary);
}

.card__sorting {
    display: flex;
    margin-left: auto;
}

.card__sorting .card__link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.card__sorting .card__link .icon {
    width: 24px;
    height: 24px;
    fill: #9A9FA5;
    transition: fill .2s;
}

.card__sorting .card__link:hover .icon {
    fill: #1A1D1F;
}

body.dark .card__sorting .card__link:hover .icon {
    fill: #FCFCFC;
}

.card__sorting .card__link.active {
    background: #FCFCFC;
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}

.card__sorting .card__link.active .icon {
    fill: #1A1D1F;
}

body.dark .card__sorting .card__link.active {
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.05);
    background: #111315;
}

body.dark .card__sorting .card__link.active .icon {
    fill: #FCFCFC;
}

.card__sorting .card__link:not(:last-child) {
    margin-right: 12px;
}

.card__nav {
    display: flex;
}

@media only screen and (max-width: 767px) {
    .card__nav {
        width: 100%;
    }
}

.card__nav .card__link {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

@media only screen and (max-width: 767px) {
    .card__nav .card__link {
        flex: 1;
    }
}

.card__nav .card__link:hover,
.card__nav .card__link.active {
    color: #1A1D1F;
}

body.dark .card__nav .card__link:hover,
body.dark .card__nav .card__link.active {
    color: #FCFCFC;
}

.card__nav .card__link.active {
    background: #EFEFEF;
}

body.dark .card__nav .card__link.active {
    background: #272B30;
}

.card__nav .card__link:not(:last-child) {
    margin-right: 8px;
}

@media only screen and (max-width: 767px) {
    .card__nav .card__link:not(:last-child) {
        margin-right: 0;
    }
}

.card__legend {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.card__indicator {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 700;
}

.card__color {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 4px;
}

.card:not(:last-child) {
    margin-bottom: 8px;
}

.actions {
    position: relative;
    display: inline-block;
    z-index: 3;
}

.actions__button {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background .2s;
}

.actions__button .icon {
    width: 24px;
    height: 24px;
    transition: fill .2s;
    fill: #6F767E;
}

.actions__button:hover .icon {
    fill: var(--color-primary);
}

body.dark .actions__button {
    background: #111315;
}

body.dark .actions__button:hover .icon {
    fill: var(--color-primary);
}

.actions__body {
    position: absolute;
    top: calc(100% + 12px);
    right: -12px;
    width: 264px;
    z-index: 2;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0px 40px 64px -12px rgba(0, 0, 0, 0.08), 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    transition: all .2s;
}

body.dark .actions__body {
    background: #111315;
    border-color: #272B30;
}

.actions__body:before {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 100%;
    width: 20px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

body.dark .actions__body:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23272B30'/%3E%3C/svg%3E");
}

.actions__option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    /* line-height: 1.6; */
    color: #6F767E;
    transition: all .2s;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: inherit;
}

.actions__option .icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    fill: #6F767E;
    transition: fill .2s;
}

.actions__option:hover,
.actions__option.selectioned {
    background: #EFEFEF;
    color: #1A1D1F;
}

.actions__option:hover .icon,
.actions__option.selectioned .icon {
    fill: #1A1D1F;
}

body.dark .actions__option:hover,
body.dark .actions__option.selectioned {
    background: transparent;
    color: #FCFCFC;
}

body.dark .actions__option:hover .icon,
body.dark .actions__option.selectioned .icon {
    fill: #FCFCFC;
}

.actions.active {
    z-index: 10;
}

.actions.active .actions__button {
    background: #EFEFEF;
}

.actions.active .actions__button .icon {
    fill: #1A1D1F;
}

body.dark .actions.active .actions__button {
    background: #272B30;
}

body.dark .actions.active .actions__button .icon {
    fill: #FCFCFC;
}

.actions.active .actions__body {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.actions_small .actions__button {
    width: 32px;
    height: 32px;
}

.actions_small .actions__button .icon {
    width: 20px;
    height: 20px;
}

.actions_small .actions__body {
    right: -8px;
}

.actions_small .actions__body:before {
    right: 14px;
}

.actions_up .actions__body {
    top: auto;
    bottom: calc(100% + 12px);
    box-shadow: 0px 20px 32px -6px rgba(0, 0, 0, 0.08), 0px 0px 7px -4px rgba(0, 0, 0, 0.05), 0px 16px 24px -4px rgba(0, 0, 0, 0.1);
}

.actions_up .actions__body:before {
    top: 100%;
    bottom: auto;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.main {
    width: 100%;
    height: calc(100vh - 76px);
    display: flex;
    justify-content: space-between;
    background: #f4f4f4;
}

.main__menu {
    width: 330px;
    min-width: 330px;
    background: #f0f2f5;
    position: relative;
    border-right: 1px solid #e5e8ec;
    box-shadow: inset -6px 0 8px -6px rgba(0, 0, 0, 0.04);
}

body.dark .main {
    background: #111315;
}

body.dark .main__menu {
    background: #15181b;
    border-right: 1px solid #22262b;
    box-shadow: inset -6px 0 8px -6px rgba(0, 0, 0, 0.15);
}

.main__users {
    width: 280px;
    min-width: 280px;
    background: #f0f2f5;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid #e5e8ec;
}

[p-select="setting-panel"] {
    overflow: unset;
}

body.dark .main__users {
    background: #1a1d1f;
}

.main__section {
    width: 100%;
    height: 100%;
    min-width: 0;
}

.main__head {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 30px 16px 30px;
}

#wa-admin-votelog .main__head{
    height: auto;
}

.main__condition {
    display: flex;
    align-items: center;
}

.condition__date {
    display: flex;
    align-items: center;
}

.condition__label {
    font-size: 1.2em;
    margin-right: 12px;
    white-space: nowrap;
}

.condition_select {
    background-color: #ffffff;
    font-size: 1.2em;
    margin-right: 15px;
}

.form_select {
    background-color: #ffffff;
    font-size: 16px;
    width: 50%;
    margin-right: 5px;
    font-family: 'Pretendard';
}

.form_select_full {
    background-color: #ffffff;
    font-size: 17px;
    width: 100%;
}

.button.condition__search {
    border: solid 2px #d6fef0;
    font-size: 1.15em;;
    padding: 0 30px;
    background: var(--color-primary);
}

body.dark .button.condition__search {
    border-color: #272b30;
}

body.dark .button.condition__search:hover {
    border-color: #33383f;
}

.button.condition__search:hover {
    border: solid 2px var(--color-primary-soild);
    background: var(--color-primary-hover);
}

/* 회원 목록 - 툴바 (한 줄: 페이지크기 | 초성필터 | 페이지·회원수 정보) */
#member-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
#member-toolbar #page-size-area {
    flex-shrink: 0;
}
#member-toolbar #chosung-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
#member-toolbar #member-info {
    flex-shrink: 0;
    margin-right: auto;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
#member-count-info {
    margin-left: 12px;
}
#chosung-filter .chosung-btn {
    min-width: 36px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
}
#chosung-filter .chosung-btn:hover {
    background: #e3f6ff;
    border-color: #b0d4e8;
}
#chosung-filter .chosung-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* 회원 목록 - 다크모드 */
body.dark #member-toolbar #member-info { color: #ccc; }
body.dark #chosung-filter .chosung-btn {
    background: #272b30;
    color: #f4f4f4;
    border-color: #33383f;
}
body.dark #chosung-filter .chosung-btn:hover {
    background: #33383f;
    border-color: #464b52;
}
body.dark #chosung-filter .chosung-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.main__text {
    font-size: 1.8em;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.users__head {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 1.25em;
    text-align: center;
    position: relative;
    border-bottom: 1px #fff solid;
    padding: 0 12px; 

}

.users__head [p-select="conf-title"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;

}

.menu__user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 88px;
    background-color: #1574B0;
    padding: 12px 16px;
}

.user__thumbnail {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    padding: 4px;
}

.user__logout {
    width: 72px;
    min-width: 72px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.25);
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: background-color ease 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.user__logout:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.35);
}

.logout__icon {
    margin-bottom: 2px;
}

.logout__text {
    font-size: 13px;
    line-height: 13px;
    margin-top: 3px;
    white-space: nowrap;
}

.user__info {
    width: calc(100% - 140px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 12px;
}

.info__sub {
    color: #fff;
    font-size: 1.2em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-weight: 400;
}

.info__name {
    font-size: 1.6em;
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    font-weight: 700;
}

.contents__empty {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark .contents__empty {
    background: #1a1d1f;
}

.empty__room {
    font-size: 20px;
    height: 60px;
    padding: 0 40px;
}

.menu__item {
    border-bottom: 1px solid #ECECEC;
    position: relative;
}

.menu__root {
    display: flex;
    padding: 16px 24px;
    align-items: center;
    cursor: pointer;
    transition: background-color ease 0.15s;
}

body.dark .menu__item {
    border-color: #2C3035;
}

/* ===== 라이트모드 Hover/Active ===== */
.menu__item:hover .menu__root {
    background: #ffffff;
}

.menu__item.active .menu__root {
    background: #E3F0FA;
    border-left: 4px solid var(--color-primary);
    padding-left: 20px;
}

.menu__item.active .item__value {
    color: #0a5a8f;
    font-weight: 700;
}

.sub__item.active {
    background: #F0F7FB;
}

/* ===== 다크모드 Hover/Active ===== */
body.dark .menu__item:hover .menu__root {
    background: #1e2024;
}

body.dark .menu__item.active .menu__root {
    background: #1E2A36;
    border-left: 4px solid #4FB8FF;
    padding-left: 20px;
}

body.dark .menu__item.active .item__value {
    color: #7CC8F5;
    font-weight: 700;
}

body.dark .sub__item.active {
    background: #252830;
}

.item__icon {
    margin-right: 16px;
    flex-shrink: 0;
}

body.dark .item__icon svg,
body.dark .item__icon g,
body.dark .item__icon path {
    fill: #fff !important;
}

body.dark .menu__slider {
    background: var(--color-primary);
}

body.dark .schedule__col {
    color: #fff;
}

.item__value {
    font-size: 1.35em;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.4;
    color: #1A1D1F;
}

body.dark .item__value {
    color: #EBEBEB;
}

.menu__items {
    box-sizing: border-box;
    padding-top: 12px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 60px;
    height: calc(100% - 105px);
    overflow-y: auto;
}

.menu__footer {
    width: 100%;
    height: 50px;
    background: #252525;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.footer__version {
    width: 100%;
    color: #ffffff;
    text-align: center;
}

.footer__gear {
    min-width: 50px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* 팝업 액션 아이템 (회의 개설) 시각 구분 */
.menu__item[data-popup] .menu__root {
    background: #F8FAFC;
    border: 1px solid #D4E6F1;
    border-radius: 6px;
    margin: 4px 12px;
    padding: 14px 16px;
}

.menu__item[data-popup] .menu__root:hover {
    background: #EDF4F9;
    border-color: var(--color-primary);
}

body.dark .menu__item[data-popup] .menu__root {
    background: #1F2328;
    border-color: #33383F;
}

body.dark .menu__item[data-popup] .menu__root:hover {
    background: #252A30;
    border-color: #4FB8FF;
}

.select__userlist {
    border-radius: 8px;
    width: 1020px;
    height: calc(100% - 50px);
    overflow: hidden;
}

.select__userlist .userlist {
    position: relative;
    height: 100%;
}

.userlist__header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.userlist__button {
    margin-bottom: 20px;
}

.create__conference {
    border-radius: 8px;
    width: 600px;
}

.conference__detail {
    border-radius: 8px;
    width: 900px;
}

.conference__header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary);
    margin-bottom: 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.conference__title {
    color: #fff;
    font-size: 22px;
}

.conference__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 30px;
    width: 100%;
    height: 60px;
    word-break: break-all;
}

.conference__label {
    width: 100px;
    min-width: 104px;
    font-size: 1.1em;
    letter-spacing: -0.5px;
    font-weight: 500;
}

.conference__col {
    width: calc(100% - 100px);
    display: flex;
    align-items: center;
}

.conference__btns {
    width: 100%;
    display: flex;
}

.conference__btns.create__popup {
    padding: 30px;
}

.conference__btns.write__block {
    padding: 15px;
}

.addgroup__btn {
    width: 100%;
}

.conference__btn {
    width: 50%;
    margin-right: 10px;
}

.conference__btn:last-child {
    margin-right: 0;
}

.conference__btn[disabled] {
    cursor: default;
    background-color: #ececec
    
}

.calendar__wave {
    font-size: 22px;
    margin: 0 5px;
}

.form__label {
    font-size: 18px;
    white-space: nowrap;
    margin-left: 10px;
    margin-right: 5px;
}

/* 신규 CSS 작성 시작 */

.userlist__invite {
    padding: 30px;
    display: flex;
    height: 680px;
}

.userlist__org {
    margin-right: 10px;
    width: 50%;
    height: 100%;
}

.userlist__people {
    width: 50%;
    /*height: 100%; */
    overflow: hidden;
}

.userlist__list {
    height: calc(100% - 68px);
}

.userlist__list.group__popup {
    height: calc(100% - 58px);
    margin-bottom: 10px;
}

.userlist__body {
    height: calc(100% - 63px);
    position: relative;
    overflow: hidden;
}

.userlist__search, .group__create {
    margin-bottom: 20px;
}

.userlist__control {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
}

.org__head, .userlist__head {
    margin-bottom: 10px;
}

.org__arrow {
    text-align: center;
}

.org__arrow svg {
    height: 26px;
    width: 26px;
}

.org__infos {
    width: 100%;
}

.org__value {
    font-size: 1.2em;
    line-height: 1.2;
}

body.dark .org__value{
    color: #FCFCFC;
}

.org__sub {
    font-size: 1.1em;
    color: #376cfb;
}


.register__btn {
    width: 100%;
}

.read__input {
    width: 100%;
    height: 45px;
    padding: 0 10px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: #F4F4F4;
    font-size: 1.06em;
    font-weight: 600;
    line-height: 41px;
    color: #777a7e;
    transition: all .2s;
    font-family: 'Pretendard';
    box-sizing: border-box;
}

body.dark .read__input{
    border-color: #272B30;
    background: #272B30;
    color: #FCFCFC;
}

.conferenceDetail__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    width: 100%;
    height: 60px;

}

.customer__inner.revision {
    /*height: 184px;*/
    overflow-x: hidden;
    overflow-y: auto;
}

.read__input.search {
    background: white;
    border-color: 1px #c1bdbd;
    border-radius: 10px;
    width: 200px;
    margin-right: 10px;
}


/*LEE : S*/
.wp__5 {width: 5% !important; }
.wp__10 {width: 10% !important; }
.wp__15 {width: 15% !important; }
.wp__20 {width: 20% !important; }
.wp__25 {width: 25% !important; }
.wp__30 {width: 30% !important; }
.wp__35 {width: 35% !important; }
.wp__40 {width: 40% !important; }
.wp__45 {width: 45% !important; }
.wp__50 {width: 50% !important; }
.wp__55 {width: 55% !important; }
.wp__60 {width: 60% !important; }
.wp__65 {width: 65% !important; }
.wp__70 {width: 70% !important; }
.wp__75 {width: 75% !important; }
.wp__80 {width: 80% !important; }
.wp__85 {width: 85% !important; }
.wp__90 {width: 90% !important; }
.wp__95 {width: 95% !important; }
.wp__100 {width: 100% !important;}

.h__auto {height: auto !important; }
.hp__5 {height: 5% !important; }
.hp__10 {height: 10% !important; }
.hp__15 {height: 15% !important; }
.hp__20 {height: 20% !important; }
.hp__25 {height: 25% !important; }
.hp__30 {height: 30% !important; }
.hp__35 {height: 35% !important; }
.hp__40 {height: 40% !important; }
.hp__45 {height: 45% !important; }
.hp__50 {height: 50% !important; }
.hp__55 {height: 55% !important; }
.hp__60 {height: 60% !important; }
.hp__65 {height: 65% !important; }
.hp__70 {height: 70% !important; }
.hp__75 {height: 75% !important; }
.hp__80 {height: 80% !important; }
.hp__85 {height: 85% !important; }
.hp__90 {height: 90% !important; }
.hp__95 {height: 95% !important; }
.hp__100 {height: 100% !important; }

.m__0 {margin: 0px !important; }
.m__5 {margin: 5px !important; }
.m__10 {margin: 10px !important; }
.m__15 {margin: 15px !important; }
.m__20 {margin: 20px !important; }
.m__25 {margin: 25px !important; }
.m__30 {margin: 30px !important; }
.m__35 {margin: 35px !important; }
.m__40 {margin: 40px !important; }
.m__45 {margin: 45px !important; }
.m__50 {margin: 50px !important; }
.m__55 {margin: 55px !important; }
.m__60 {margin: 60px !important; }
.m__70 {margin: 70px !important; }
.m__80 {margin: 80px !important; }
.m__90 {margin: 90px !important; }
.m__100 {margin: 100px !important; }

.mt__0 {margin-top: 0px !important; }
.mt__5 {margin-top: 5px !important; }
.mt__10 {margin-top: 10px !important; }
.mt__15 {margin-top: 15px !important; }
.mt__20 {margin-top: 20px !important; }
.mt__25 {margin-top: 25px !important; }
.mt__30 {margin-top: 30px !important; }
.mt__35 {margin-top: 35px !important; }
.mt__40 {margin-top: 40px !important; }
.mt__45 {margin-top: 45px !important; }
.mt__50 {margin-top: 50px !important; }
.mt__55 {margin-top: 55px !important; }
.mt__60 {margin-top: 60px !important; }
.mt__70 {margin-top: 70px !important; }
.mt__80 {margin-top: 80px !important; }
.mt__90 {margin-top: 90px !important; }
.mt__100 {margin-top: 100px !important; }

.mr__0 {margin-right: 0px !important; }
.mr__5 {margin-right: 5px !important; }
.mr__10 {margin-right: 10px !important; }
.mr__15 {margin-right: 15px !important; }
.mr__20 {margin-right: 20px !important; }
.mr__25 {margin-right: 25px !important; }
.mr__30 {margin-right: 30px !important; }
.mr__35 {margin-right: 35px !important; }
.mr__40 {margin-right: 40px !important; }
.mr__45 {margin-right: 45px !important; }
.mr__50 {margin-right: 50px !important; }
.mr__55 {margin-right: 55px !important; }
.mr__60 {margin-right: 60px !important; }
.mr__70 {margin-right: 70px !important; }
.mr__80 {margin-right: 80px !important; }
.mr__90 {margin-right: 90px !important; }
.mr__100 {margin-right: 100px !important; }

.mb__0 {margin-bottom: 0px !important; }
.mb__5 {margin-bottom: 5px !important; }
.mb__10 {margin-bottom: 10px !important; }
.mb__15 {margin-bottom: 15px !important; }
.mb__20 {margin-bottom: 20px !important; }
.mb__25 {margin-bottom: 25px !important; }
.mb__30 {margin-bottom: 30px !important; }
.mb__35 {margin-bottom: 35px !important; }
.mb__40 {margin-bottom: 40px !important; }
.mb__45 {margin-bottom: 45px !important; }
.mb__50 {margin-bottom: 50px !important; }
.mb__55 {margin-bottom: 55px !important; }
.mb__60 {margin-bottom: 60px !important; }
.mb__70 {margin-bottom: 70px !important; }
.mb__80 {margin-bottom: 80px !important; }
.mb__90 {margin-bottom: 90px !important; }
.mb__100 {margin-bottom: 100px !important; }

.ml__0 {margin-left: 0px !important; }
.ml__5 {margin-left: 5px !important; }
.ml__10 {margin-left: 10px !important; }
.ml__15 {margin-left: 15px !important; }
.ml__20 {margin-left: 20px !important; }
.ml__25 {margin-left: 25px !important; }
.ml__30 {margin-left: 30px !important; }
.ml__35 {margin-left: 35px !important; }
.ml__40 {margin-left: 40px !important; }
.ml__45 {margin-left: 45px !important; }
.ml__50 {margin-left: 50px !important; }
.ml__55 {margin-left: 55px !important; }
.ml__60 {margin-left: 60px !important; }
.ml__70 {margin-left: 70px !important; }
.ml__80 {margin-left: 80px !important; }
.ml__90 {margin-left: 90px !important; }
.ml__100 {margin-left: 100px !important; }

.p__0 {padding: 0px !important; }
.p__5 {padding: 5px !important; }
.p__10 {padding: 10px !important; }
.p__15 {padding: 15px !important; }
.p__20 {padding: 20px !important; }
.p__25 {padding: 25px !important; }
.p__30 {padding: 30px !important; }
.p__35 {padding: 35px !important; }
.p__40 {padding: 40px !important; }
.p__45 {padding: 45px !important; }
.p__50 {padding: 50px !important; }
.p__55 {padding: 55px !important; }
.p__60 {padding: 60px !important; }
.p__70 {padding: 70px !important; }
.p__80 {padding: 80px !important; }
.p__90 {padding: 90px !important; }
.p__100 {padding: 100px !important; }

.pt__0 {padding-top: 0px !important; }
.pt__5 {padding-top: 5px !important; }
.pt__10 {padding-top: 10px !important; }
.pt__15 {padding-top: 15px !important; }
.pt__20 {padding-top: 20px !important; }
.pt__25 {padding-top: 25px !important; }
.pt__30 {padding-top: 30px !important; }
.pt__35 {padding-top: 35px !important; }
.pt__40 {padding-top: 40px !important; }
.pt__45 {padding-top: 45px !important; }
.pt__50 {padding-top: 50px !important; }
.pt__55 {padding-top: 55px !important; }
.pt__60 {padding-top: 60px !important; }
.pt__70 {padding-top: 70px !important; }
.pt__80 {padding-top: 80px !important; }
.pt__90 {padding-top: 90px !important; }
.pt__100 {padding-top: 100px !important; }


.pr__0 {padding-right: 0px !important; }
.pr__5 {padding-right: 5px !important; }
.pr__10 {padding-right: 10px !important; }
.pr__15 {padding-right: 15px !important; }
.pr__20 {padding-right: 20px !important; }
.pr__25 {padding-right: 25px !important; }
.pr__30 {padding-right: 30px !important; }
.pr__35 {padding-right: 35px !important; }
.pr__40 {padding-right: 40px !important; }
.pr__45 {padding-right: 45px !important; }
.pr__50 {padding-right: 50px !important; }
.pr__55 {padding-right: 55px !important; }
.pr__60 {padding-right: 60px !important; }
.pr__70 {padding-right: 70px !important; }
.pr__80 {padding-right: 80px !important; }
.pr__90 {padding-right: 90px !important; }
.pr__100 {padding-right: 100px !important; }

.pb__0 {padding-bottom: 0px !important; }
.pb__5 {padding-bottom: 5px !important; }
.pb__10 {padding-bottom: 10px !important; }
.pb__15 {padding-bottom: 15px !important; }
.pb__20 {padding-bottom: 20px !important; }
.pb__25 {padding-bottom: 25px !important; }
.pb__30 {padding-bottom: 30px !important; }
.pb__35 {padding-bottom: 35px !important; }
.pb__40 {padding-bottom: 40px !important; }
.pb__45 {padding-bottom: 45px !important; }
.pb__50 {padding-bottom: 50px !important; }
.pb__55 {padding-bottom: 55px !important; }
.pb__60 {padding-bottom: 60px !important; }
.pb__70 {padding-bottom: 70px !important; }
.pb__80 {padding-bottom: 80px !important; }
.pb__90 {padding-bottom: 90px !important; }
.pb__100 {padding-bottom: 100px !important; }

.pl__0 {padding-left: 0px !important; }
.pl__5 {padding-left: 5px !important; }
.pl__10 {padding-left: 10px !important; }
.pl__15 {padding-left: 15px !important; }
.pl__20 {padding-left: 20px !important; }
.pl__25 {padding-left: 25px !important; }
.pl__30 {padding-left: 30px !important; }
.pl__35 {padding-left: 35px !important; }
.pl__40 {padding-left: 40px !important; }
.pl__45 {padding-left: 45px !important; }
.pl__50 {padding-left: 50px !important; }
.pl__55 {padding-left: 55px !important; }
.pl__60 {padding-left: 60px !important; }
.pl__70 {padding-left: 70px !important; }
.pl__80 {padding-left: 80px !important; }
.pl__90 {padding-left: 90px !important; }
.pl__100 {padding-left: 100px !important; }

.ta__l {text-align: left !important;}
.ta__c {text-align: center !important;}
.ta__r {text-align: right !important;}

.rt__90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.rt__180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.dis__none {display: none !important;}
.dis__block {display: block !important;}
.dis__flex {display: flex !important; align-items: center;}
.conference__utils.dis__flex{flex-wrap: wrap;}

.dis__flex2 {display: flex !important; align-items: center; justify-content: space-between;}

.customer.active.detail__2 .customer__col:nth-child(3) {display: table-cell !important;}
.customer.active.detail__2 .customer__row.active .customer__col:nth-child(2) {border-radius: 0px;}
.customer.active.detail__2 .customer__row.active .customer__col:nth-child(3) {border-radius: 0 12px 12px 0;}
.customer.active.detail__2 .customer__row.active .customer__col:nth-child(2):before {display: none;}
.customer.active.detail__2 .customer__row.active .customer__col:nth-child(3):before {content: ""; position: absolute; top: 50%; right: 12px; width: 24px; height: 24px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M8.293 17.293a1 1 0 0 0 1.414 1.414l-1.414-1.414zM15 12l.707.707a1 1 0 0 0 0-1.414L15 12zM9.707 5.293a1 1 0 1 0-1.414 1.414l1.414-1.414zm0 13.414l6-6-1.414-1.414-6 6 1.414 1.414zm6-7.414l-6-6-1.414 1.414 6 6 1.414-1.414z' fill='%236f767e'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;}

.customer.active.detail__3 .customer__col:nth-child(3) {display: table-cell !important;}
.customer.active.detail__3 .customer__col:nth-child(4) {display: table-cell !important;}
.customer.active.detail__3 .customer__row.active .customer__col:nth-child(2) {border-radius: 0px;}
.customer.active.detail__3 .customer__row.active .customer__col:nth-child(3) {border-radius: 0px;}
.customer.active.detail__3 .customer__row.active .customer__col:nth-child(4) {border-radius: 0 12px 12px 0;}
.customer.active.detail__3 .customer__row.active .customer__col:nth-child(2):before {display: none;}
.customer.active.detail__3 .customer__row.active .customer__col:nth-child(3):before {display: none;}
.customer.active.detail__3 .customer__row.active .customer__col:nth-child(4):before {content: ""; position: absolute; top: 50%; right: 12px; width: 24px; height: 24px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M8.293 17.293a1 1 0 0 0 1.414 1.414l-1.414-1.414zM15 12l.707.707a1 1 0 0 0 0-1.414L15 12zM9.707 5.293a1 1 0 1 0-1.414 1.414l1.414-1.414zm0 13.414l6-6-1.414-1.414-6 6 1.414 1.414zm6-7.414l-6-6-1.414 1.414 6 6 1.414-1.414z' fill='%236f767e'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;}

.col__middle {vertical-align: middle;}

/*.customer.active.detail__2 .customer__col:not(:first-child):not(:nth-child(1)) {display: table-cell;}
.customer.active.detail__2 .customer__col:not(:first-child):not(:nth-child(2)) {display: table-cell;}*/

.col__gray {color: gray;}

.main__contents {overflow-y: auto;}

.box__gab {margin-bottom: 8px;}
.vc__center {align-items:center !important; display: flex !important;}
.promote .summary.wp__25 {flex: 0 0 calc(25% - 32px);}
.dis__flex {display: flex;}

.status-red.released__status.box__status,
.status-green.released__status.box__status,
.status-blue.released__status.box__status,
.status-blue2.released__status.box__status,
.status-yellow.released__status.box__status,
.status-purple.released__status.box__status {position: absolute; z-index: 100; right: 5px; top: 5px;}
/* 회의상태 배지 — 전용 색상 (예약유형 배지와 구분) */
.conf-state-badge.released__status.box__status {position: absolute; z-index: 100; bottom: 5px; top: auto; right: auto; left: 5px;}
/* 회의상태 배지 — 테이블 인라인용 (40~50대 가독성: padding/line-height 확대) */
.conf-state-badge-inline {display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12px; line-height: 28px; font-weight: 700;}
/* 회의상태 배지 — 공통 색상 (WCAG AA 4.5:1 이상) */
.conf-state-badge.conf-state--wait, .conf-state-badge-inline.conf-state--wait {background: #E3F2FD; color: #1565C0;}
body.dark .conf-state-badge.conf-state--wait, body.dark .conf-state-badge-inline.conf-state--wait {background: rgba(21, 101, 192, 0.2); color: #64B5F6;}
.conf-state-badge.conf-state--ongoing, .conf-state-badge-inline.conf-state--ongoing {background: #E8F5E9; color: #1B5E20;}
body.dark .conf-state-badge.conf-state--ongoing, body.dark .conf-state-badge-inline.conf-state--ongoing {background: rgba(46, 125, 50, 0.45); color: #A5F3C4;}
.conf-state-badge.conf-state--end, .conf-state-badge-inline.conf-state--end {background: #F3F4F6; color: #4B5563;}
body.dark .conf-state-badge.conf-state--end, body.dark .conf-state-badge-inline.conf-state--end {background: rgba(156, 163, 175, 0.15); color: #9CA3AF;}

/* 관리자 역할 배지 */
.admin-role-badge {
    display: inline-block;
    padding: 1px 8px;
    margin-left: 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    background: #FEF3C7;
    color: #92400E;
    vertical-align: middle;
}
body.dark .admin-role-badge {
    background: rgba(217, 119, 6, 0.2);
    color: #FBBF24;
}

/* 초성 필터 관리자 버튼 강조 */
#chosung-filter .chosung-btn[data-chosung="admin"] {
    color: #92400E;
    font-weight: 700;
}
#chosung-filter .chosung-btn[data-chosung="admin"].active {
    background: #FEF3C7;
    border-color: #F59E0B;
    color: #92400E;
}
body.dark #chosung-filter .chosung-btn[data-chosung="admin"].active {
    background: rgba(217, 119, 6, 0.2);
    border-color: #F59E0B;
    color: #FBBF24;
}

[class^="button"].green { background-color: var(--color-primary); color: #fff;}
[class^="button"].green svg {fill:#fff !important;}

[class^="button"].red { background-color: #f44336; color: #fff;}
[class^="button"].red svg {fill:#fff !important;}

[class^="button"].black { background-color: #151515; color: #fff;}
[class^="button"].black svg {fill:#fff !important;}

.form__search:not([class*="wp__"]) {width: 200px !important;}

.file__layer {height: 100%;}

.file__layer .file__wrap {height: 100%;}

.editor.board__texteditor .richText-editor {
    min-height: auto !important;
    max-height: auto !important;
    height: calc(100% - 42px) !important;
}

.customer.active .customer__details.custom__type {
    padding: 20px 20px 0 20px
}

.details__close {z-index: 100} 

.user__btn.header__head {width: auto !important;}

.layer__split > .page__col {flex: auto}

.menu__item {position: relative;border: 0 !important; /* display: inline-flex; */}
.conference__view .menu__item {display: block;}
.main__menu .icon.icon-arrow-down,
.main__menu .icon.icon-arrow-next {width: 26px; height: 26px; position: absolute; right: 25px; top:22px;  transition: all 0.2s;}
.menu__sub .icon.icon-arrow-next {position: relative;}
.main__menu .icon.icon-arrow-down{position:absolute;  top: 50%; transform: translateY(-50%);}

.cls-1 {fill: none;}

.menu__sub {height: 0px; overflow: hidden;}
.menu__sub.show {height: auto;}
.menu__sub > ul > li {font-size: 20px;font-weight: 500;letter-spacing: -0.5px;padding: 8px 0  8px 32px;background-color: #fff;cursor: pointer;justify-content: center;}
.menu__sub > ul > li:hover {background-color: #f4f4f4;}
.menu__sub > ul > li > .icon.icon-arrow-next {float: right; right:0px; margin-right: 24px;top: 3px;}

body.dark .menu__sub > ul > li { border-color: #272B30; background-color: #1a1d1f; color:#FCFCFC }

body.dark .menu__sub > ul > li:hover,
body.dark .menu__sub > ul > li.active {
    background: #272B30;
}

.earning__rows {display: table-row-group;}
.form {box-sizing: border-box;}
.room__info.messages {height: 100%;padding: 20px}
.room__info .messages__details {flex: auto !important; max-width: 100%; position: relative;}
.room__info .messages__head:after {display: none;}
.room__info .messages__users {width:40%;}
.room__info .messages__item {background-color: #00bcd4; color: #fff; padding: 18px 12px; font-size: 1.1em;}
.room__info .messages__item.selected {background-color: #0086d4;color: #fff !important;padding: 16px 12px;font-size: 1.3em;}
.room__info .messages__item:hover,
.room__info .messages__item.active {color : #1A1D1F;}
.room__info .messages__item:hover .schedule__control {visibility: visible; opacity: 1;}
.room__info .messages__head {width: 50%; margin: 0px;}
.room__info .room__wrapper {height: calc(100% - 150px)}
.room__info .room__wrapper .messages__item {background-color: #cabdff}
.room__info .messages__messenger.messenger {position: relative;}
.room__btn {width: 50px; text-align: center; display: inline-block;}

body.dark .room__info .messages__item:hover {color: #fff;}

.box__overlay {position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 100;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 1.2em;}

.form__input {
    width: 100%;
    height: 40px;
    padding: 0 20px 0 44px;
    background: #F4F4F4;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #1A1D1F;
}

body.dark .form__input {
    background: #272B30;
    color: #FCFCFC;
}

.form__input::-webkit-input-placeholder {
    color: #9A9FA5;
}

.form__input::-moz-placeholder {
    color: #9A9FA5;
}

.form__input:-ms-input-placeholder {
    color: #9A9FA5;
}

.form__input::-ms-input-placeholder {
    color: #9A9FA5;
}

.form__input::placeholder {
    color: #9A9FA5;
}

.form__input2 {
    width: 100%;
    height: 46px;
    padding: 0 20px 0 44px;
    background: #F4F4F4;
    border-radius: 12px;
    font-size: 0.94em;
    font-weight: 600;
    line-height: 1.6;
    font-family: inherit;
    color: #1A1D1F;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark .form__input2 {
    background: #272B30;
    color: #FCFCFC;
}

.form__input2::-webkit-input-placeholder {
    color: #9A9FA5;
}

.form__input2::-moz-placeholder {
    color: #9A9FA5;
}

.form__input2:-ms-input-placeholder {
    color: #9A9FA5;
}

.form__input2::-ms-input-placeholder {
    color: #9A9FA5;
}

.form__input2::placeholder {
    color: #9A9FA5;
}

.conference__view header.header {padding: 14px 15px; height: 70px; background: none;}
.conference__view .main__contents {padding: 20px;}
.conference__view .main__menu {position: fixed;/* height: calc(100vh - 87px) */;left: -330px;transition: all ease 0.5s;box-shadow: 2px 0px 6px rgb(0 0 0 / 10%);z-index: 99999;top: 89px;bottom: 0;}
.conference__view .main__users {position: fixed;right: 0px;/* height: calc(100vh - 88px) */;right: -280px;transition: all ease 0.5s;box-shadow: -2px 0px 10px rgb(0 0 0 / 10%);z-index: 99999; top: 89px; bottom: 0;}

.conference__view .main__menu.active {left: 0px;}
.conference__view .main__users.active {right: 0px;display: flex;flex-direction: column;}

.conference__view .main__menu.active .icon.icon-arrow-next,
.conference__view .main__users.active .icon.icon-arrow-next,
.main__users.active.visible .icon.icon-arrow-next {-webkit-transform: rotate(180deg); transform: rotate(180deg);}

.main__users.conf__list {width: 0px; min-width: 0px; transition: all ease 0.5s;}
.main__users.conf__list.active.visible {width: 280px; min-width: 280px;}
.users__layer .menu__sbtn2 {transition: all ease 0.5s;}
.users__layer .menu__sbtn2.fold {right: 0px !important;}

.conference__view .main__contents {width: 100%; height: 100%; padding: 0;}
.conference__view .main {height: calc(100vh - 76px);}

.conference__view .main.fv {
    height: 100%;
}

.conference__display {width: 100%; height: 100%; background-color: #fff; position: relative;}

.header__menu {cursor: pointer;}
.header__menu > svg {width: 35px;height: 35px;margin-right: 20px;}

.menu__slider {background-color: var(--color-primary);cursor: pointer;position: absolute;top: calc(50% - 45px);width: 30px;height: 90px;border-radius: 0px 20px 20px 0px;cursor: pointer;}
.menu__sbtn1 {right: -76px;box-shadow: 2px 2px 2px rgba(0,0,0,0.2);visibility: visible;z-index: 1000;transition: all ease 200ms;}

.sidebarOpen .menu__sbtn1 {
    right: -36px;
}

.menu__slider.menu__sbtn1.rotate {
    /* left: 200px; */
    z-index: 6000;
}
.menu__sbtn2 {transition: all ease 0.5s;right: 280px;left: auto;-webkit-transform: rotate(180deg);transform: rotate(180deg);top: calc(50% - 45px);}
.menu__sbtn1 .icon.icon-arrow-next,
.menu__sbtn2 .icon.icon-arrow-next {left: 0px;top: 31px;width: 26px;height: 26px;position: absolute;right: 25px;fill: #fff;}
.menu__sbtn1:hover,
.menu__sbtn2:hover,
.conference__view .slider__menu.active .menu__sbtn1 {background-color: var(--color-primary);}
.conference__view .slider__menu.active .menu__sbtn1:hover {background-color: #fff;}

.menu__sbtn1:hover .icon.icon-arrow-next,
.menu__sbtn2:hover .icon.icon-arrow-next,
.conference__view .slider__menu.active .menu__sbtn1 .icon.icon-arrow-next {fill:#fff;}
.conference__view .slider__menu.active .menu__sbtn1:hover .icon.icon-arrow-next {fill:#1A1D1F;}


.conference__view .slider__menu.main__menu {width: 270px; min-width: 270px;}
.conference__view .slider__menu .menu__items {height: 100%; background-color: var(--color-primary); overflow-y: auto;}
/*.conference__view .slider__menu .menu__sbtn1 {background-color: var(--color-primary); left:270px;}*/
/*.conference__view .slider__menu .menu__sbtn1 .icon.icon-arrow-next {fill:#fff;}*/
.conference__view .slider__menu.main__menu {left: -270px;}
.conference__view .slider__menu.main__menu.active {left: 0px;}
.conference__view .slider__menu .slider__box {width: 100%; height: 160px; margin-bottom: 10px; background-color: #fff;}

.conference__info {width: 100%;}
.conference__info .info__row {display: flex;width: 100%;margin-bottom: 1px;}
.conference__info .info__row strong {width: 68px; text-align: left;}
.conference__info .info__row span {width: calc(100% - 72px);word-break: break-all; padding-left: 5px;}

.conference__users {overflow-y: auto;margin-bottom: 0 !important;}

.conf-type2 .conference__users {
    height: calc(100% - 309px);
}

.presenter .conf-type1 .conference__users {
    height: calc(100% - (60px + 171px + 34px + 124px + 34px + 78px + 34px));
}

.card.p__15.conference__users {flex: 1;}
.conference__users .header__avatar {width: 54px;height: 54px;}
.conference__users .header__details,
.conference__presenter .header__details {width: 80%;}
.conference__users .header__message:after,
.conference__presenter .header__message:after {display: none;}


.main__users .card {
    transition: all ease 0.3s;
}

.conference__tool {height: 50px; background-color: #2f3336; display: flex; justify-content: center; align-items: center;}
.conference__tool > svg {width: 32px; height: 32px; margin: 0px 10px; cursor: pointer;}
.conference__tool > svg:hover * {stroke: #fff;}

.pids__wrapper{width: 100%; display: flex; justify-content: space-between; padding: 0px 3px;}
.pid{width: 13px; height: 10px;display: inline-block; background-color: #ececec; border-radius: 5px;}
.pid.t {background-color: #69ce2b;}

.volume__wrap {position: relative; width: 100%;}
.volume__control {background: linear-gradient( to right, var(--color-primary) 0%, var(--color-primary) 50%, #ececec 50%, #ececec 100%); border-radius: 0.3em; height: 7px; width: 100%; outline: none;  transition: 450ms ease-in;  -webkit-appearance: none;}
.volume__control::-webkit-slider-thumb { -webkit-appearance: none; width: 1.2em; height: 1.2em; border-radius: 50%; cursor: ew-resize; background: white; -webkit-box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.75);}
.conference__users .icon.icon-sound {width: 32px; height: 32px;}

/* 문서관리 가운데 정렬 */
.conference__utils {width: 100%;   display: flex; flex-direction: row; justify-content: center ;align-items: center;}

.conference__utils.mr__10 {
    margin-right: 0 !important;
}

.bottom__utils {position: fixed;left: calc(50% - (390px / 2));bottom: -60px;width:390px;z-index: 100;display: flex;justify-content: center;transition: all 0.2s;color: #fff;}
.bottom__utils.active {bottom: 0px;}
@media only screen and (max-width: 1023px) {
    .bottom__utils{width: inherit; left: 0}
}

.main.fv .bottom__utils {
    /* display: none; */
}
.bottom__utils.active .butils__slide > svg {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
.butils__slide.fullScreenSet {display: block !important;}

/* 회의화면 페이지 컨트롤러 */
.butils__btns {height: 60px;padding: 0px 20px;background-color: var(--color-primary);display: flex;justify-content: space-between;align-items: center; border-radius: 10px 10px 0px 0px;}
.butils__btns > svg {width: 30px; height: 30px; margin: 0px 10px; cursor: pointer; fill: #fff;}
.butils__btns > svg:hover {fill: #fff;}

.butils__bar {height: 60%;width: 3px;background-color: #50af75;border-right: 1px #7cc799 solid;margin: 0px 4px;}
.butils__slide {position: absolute;top: -28px; width: 100px; height: 30px; background-color: var(--color-primary); text-align:center; border-radius: 10px 10px 0px 0px; border-bottom:0px #ececec solid; cursor:pointer;}
.butils__slide > svg {width: 28px; height: 28px; fill:#fff; -webkit-transform: rotate(180deg); transform: rotate(180deg); transition: all 0.2s;}
.butils__slide:hover > svg {fill:#fff}

.conference__popup.messages {padding: 16px; width: 90vw; max-width: 1200px;}
.conference__popup.messages.conference__chatting {max-height: 800px;}
.conference__popup {/*width: 1020px;*/ width: 90vw; max-width: 1200px;}
.conference__popup .messenger__wrapper {height: calc(100% - 79px);}
.conference__popup .messages__avatar {margin-left: 10px;}
.conference__popup .messages__head:after {display: none;}
.conference__popup .messenger__panel {padding: 15px;}
.conference__popup .button-small {line-height: 40px; margin-right: 12px;}

/* ===== 문서관리 팝업 — Jony Ive 디자인 리뷰 개선 ===== */

/* -- Issue #1: 버튼 폰트 16px + 높이 44px (40~50대 접근성) -- */
.js-popup-document .button-small {
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
    border-radius: 10px;
}
/* 파일 업로드 = primary fill, 화이트보드 = stroke */
.js-popup-document .messenger__button[p-value="uploadFile"] {
    background: var(--color-primary, #2A85FF);
    color: #fff;
}
.js-popup-document .messenger__button[p-value="uploadFile"]:hover {
    filter: brightness(0.9);
}
.js-popup-document .messenger__button[p-select="createBlackboard"] {
    background: transparent;
    border: 1.5px solid var(--color-primary, #2A85FF);
    color: var(--color-primary, #2A85FF);
}
body.dark .js-popup-document .messenger__button[p-select="createBlackboard"] {
    border-color: #4FB8FF;
    color: #4FB8FF;
}

.conference__popup .countdown__timer{
    font-size: 3.5em;
    color: red;
    padding: 2% 0;
}

.messenger__button.sort__button {
    background: #2196F3;
}

body.presenter .js-popup-document .sort__button {
    display: inline-flex;
}

.js-popup-document .sort__button {
    display: none;
}

.messenger__button.sort__button:hover {
    background: #1375c4;
}

.conference__chating .messages__details {flex: 0 0 calc(100% - 78px); max-width: calc(100% - 78px);}
.conference__chating .messages__list {border-bottom: 1px #ececec solid;}

.conference__memo .messages__details {flex: 0 0 100%;max-width: 100%;position: relative;}
.conference__memo .messages__list {border-bottom: 1px #ececec solid; margin-bottom: 0px;}
.conference__memo .schedule__control, .document__item .schedule__control {opacity: 1; visibility: visible;}
.document__item .schedule__control {right: unset;}
.schedule__control .schedule__button:hover .icon {fill: var(--color-primary) !important;}

.conference__meeting.messages {display: block; height: auto;}

.chating__checkbtn {margin-bottom: 10px}
.chating__checkbtn > a {line-height: 40px;}

.meeting__table {border-bottom: 1px #cecece solid; font-size: 17px;}
.meeting__table tr {border-top:1px #cecece solid;}
.meeting__table td {height:57px; padding:5px 10px; text-align:center; vertical-align: middle;}
.meeting__table th {text-align: right; background-color: #ececec; padding:10px 15px; color: #2f3336; vertical-align: middle;}
.meeting__table td:not(:first-child) {border-left: 1px #cecece solid;}
.meeting__table td > input[type="text"] {width: 100%; height: 100%; font-size: 16px; color: #5c5e60; font-weight: bold;}
.meeting__table .tagify__input {text-align: left; padding-left: 0px;}
.meeting__table .tagify {background-color: #fff; color: #5c5e60;}
.meeting__table .tagify__tag>div>* {color: #5c5e60;}
.meeting__table [colspan="6"] {height: 20px;}
.meeting__table .border__bold {border-top: 2px #666 solid;}
.meeting__table .border__editor {text-align: left;}
.meeting__table .border__editor > th,
.meeting__table .border__editor > td {height: 300px;}
.meeting__table .border__editor .editor .richText-editor {max-height: unset; text-align: left;}

.meeting__email.messages {min-height: 170px; height: auto;}
.meeting__email .tagify {width: 100% !important;}
.meeting__email .conference__row {height: auto;}

.js-popup-vote .product__wrapper {max-width: 1400px;}
.conference__vote {width: 1400px;}
.conference__vote .schedule__control {opacity: 1; visibility: visible;}
.conference__vote .messages__item {-webkit-transform:none; transform:none !important; position: relative;}
.conference__vote .messages__item > div:last-child {margin-left: auto;}
.conference__vote .messages__details { flex: 1;  max-width: 380px; font-size: 0;}
.conference__vote .messenger__parameter:before {display: none;}
.conference__vote .product__vote .conference__row {height: 40px;}
.conference__vote .messages__users {position: relative;}
.meeting__pvote.messages {height: auto;}
.meeting__pvote .radio__box .radio:first-child {border-top: 1px #ececec solid;}
.meeting__pvote .radio__box .radio {border-bottom: 1px #ececec solid; padding: 10px 20px;}
.js-popup-pvote .product__wrapper,
.js-popup-pvote .conference__popup {width: 900px;}

.vote__status {width: 40px; height: 40px; border-radius: 50%; background-color: #FFBC99; display: flex; justify-content: center; align-items: center; font-size: 12px;}
.media__content { margin-bottom: 16px; font-size: 14px; font-weight: 500; color: #111315;}
.customer__row.not__vote {background-color: #fdede4;}
.added__vote {bottom: 0px; width: 100%;}
.added__vote button {width: 100%;}
/* 투표 생성 팝업 — 컴팩트 레이아웃 */
/* 팝업 컨테이너 */
.popup.js-popup-added-vote.popup_product { padding: 0; }
.js-popup-added-vote .product__control { display: none; }
/* 폭 잠금: .popup_product .popup__wrap 의 width:auto(shrink-to-fit)가 자식 intrinsic 폭에 따라
   재계산되어 입력/호버 시 가로폭이 진동하던 현상을 차단.
   .popup_product 체이닝으로 .popup_product .popup__wrap (0,2,0) 보다 specificity 를 높여 (0,3,0). */
.popup_product.js-popup-added-vote .popup__wrap {
    display: flex;
    justify-content: center;
    width: 670px;
    flex: 0 0 auto;
    min-width: 0;
}
.js-popup-added-vote .product__wrapper,
.js-popup-added-vote .js-product { min-width: 0; }
.js-popup-added-vote .create__conference {
    width: 670px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}
.js-popup-added-vote .conference__fieldset {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* 스크롤바 토글로 자식 가용폭이 ±17px 흔들려 tagify wrap reflow 를 유발하던 경로 차단 */
    scrollbar-gutter: stable;
}
/* 행 레이아웃 */
.js-popup-added-vote .conference__header { height: 38px; margin-bottom: 8px; }
.js-popup-added-vote .conference__title { font-size: 18px; }
.js-popup-added-vote .conference__row { height: 44px; margin-bottom: 4px; padding: 0 28px; }
.js-popup-added-vote .conference__row:has(.checkbox, .radio) { height: 34px; }
.js-popup-added-vote .conference__row.h__auto { height: auto; min-height: 44px; }
.js-popup-added-vote .vote__type { margin: 0; padding: 0; }
.js-popup-added-vote .vote__type .conference__row { height: 38px; margin-bottom: 0; }
.js-popup-added-vote .editor_layer { height: 200px; display: none; }
.js-popup-added-vote .editor_layer .conference__col { height: 100%; }
.js-popup-added-vote .create__line { margin-bottom: 4px; padding-bottom: 4px; }
.js-popup-added-vote .conference__btns { padding: 12px 28px; }
/* 입력/셀렉트 (36px 통일) */
.js-popup-added-vote .field__input { height: 36px; border-radius: 8px; font-size: 14px; }
.js-popup-added-vote .form__input2 { height: 36px; border-radius: 8px; font-size: 13px; padding-left: 10px; }
.js-popup-added-vote .form_select { height: 36px; border-radius: 8px; font-size: 14px; line-height: 36px; padding: 0 8px; }
.js-popup-added-vote .vote_tags { height: auto; min-height: 36px; border-radius: 8px; font-size: 14px; }
/* 버튼/아이콘 */
.js-popup-added-vote .conference__btn { height: 36px; border-radius: 8px; font-size: 14px; }
.js-popup-added-vote .header__button { height: 34px; width: 34px; padding: 0; border-radius: 6px; }
.js-popup-added-vote .header__button .icon { width: 24px; height: 24px; }
.js-popup-added-vote .form__button { width: 36px; }
.js-popup-added-vote .product__close { width: 32px; height: 32px; border-radius: 6px; }
.js-popup-added-vote .product__close .icon { width: 16px; height: 16px; }
/* 라디오/체크박스 */
.js-popup-added-vote .radio__tick { width: 20px; height: 20px; }
.js-popup-added-vote .radio__tick:before { width: 10px; height: 10px; }
.js-popup-added-vote .checkbox__tick { width: 20px; height: 20px; border-radius: 5px; }
.js-popup-added-vote .checkbox__tick:before { width: 14px; height: 10px; }
.js-popup-added-vote .radio__text,
.js-popup-added-vote .checkbox__text { font-size: 13px; padding-left: 6px; }

/* 투표 생성 팝업 — 태블릿 대응 (≤1023px) */
@media only screen and (max-width: 1023px) {
    /* (0,3,0) 으로 specificity 맞춤 — 베이스 룰과 캐스케이드 일관성 유지 */
    .popup_product.js-popup-added-vote .popup__wrap { width: 90vw; max-width: 670px; }
    .js-popup-added-vote .create__conference { width: 90vw; max-width: 670px; }
    .js-popup-added-vote .conference__row { flex-wrap: wrap; height: auto; min-height: 40px; padding: 6px 18px; }
    .js-popup-added-vote .conference__row:has(.checkbox, .radio) { height: auto; min-height: 32px; }
    .js-popup-added-vote .conference__label { width: 100%; min-width: 100%; margin-bottom: 3px; font-size: 13px; }
    .js-popup-added-vote .conference__col { width: 100%; }
    .js-popup-added-vote .conference__header { padding: 0 18px; height: 36px; margin-bottom: 6px; }
    .js-popup-added-vote .conference__btns { padding: 10px 18px; }
}

/* 투표 대량 생성 팝업 — 디자인 토큰 오버라이드 */
.js-popup-bulk-vote {
    --sp-input-height: 36px;
}
.popup.js-popup-bulk-vote.popup_product { padding: 0; }
.js-popup-bulk-vote .product__control { display: none; }
/* 폭 잠금: .popup_product .popup__wrap 의 width:auto(shrink-to-fit)가 자식 intrinsic 폭에 따라
   재계산되어 입력/호버 시 가로폭이 진동하던 현상을 차단(added-vote 와 동일 패턴).
   .popup_product 체이닝으로 .popup_product .popup__wrap (0,2,0) 보다 specificity 를 높여 (0,3,0). */
.popup_product.js-popup-bulk-vote .popup__wrap {
    display: flex;
    justify-content: center;
    width: 570px;
    flex: 0 0 auto;
    min-width: 0;
}
.js-popup-bulk-vote .product__wrapper,
.js-popup-bulk-vote .js-product { min-width: 0; }
.js-popup-bulk-vote .create__conference {
    width: 570px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}
.js-popup-bulk-vote .conference__fieldset {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 28px;
    /* 스크롤바 토글로 자식 가용폭이 ±17px 흔들려 tagify wrap reflow 를 유발하던 경로 차단 */
    scrollbar-gutter: stable;
}
/* 헤더 */
.js-popup-bulk-vote .conference__header { height: 38px; margin-bottom: 8px; }
.js-popup-bulk-vote .conference__title { font-size: 18px; }
.js-popup-bulk-vote .product__close { width: 36px; height: 36px; border-radius: 6px; }
.js-popup-bulk-vote .product__close .icon { width: 16px; height: 16px; }
/* 스텝 컨테이너 */
.js-popup-bulk-vote .bulk-vote-step { margin-bottom: 18px; }
.js-popup-bulk-vote .bulk-vote-step__header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.js-popup-bulk-vote .bulk-vote-step__number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background-color: #e0e0e0; color: var(--cv-text-primary);
    font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.js-popup-bulk-vote .bulk-vote-step__title {
    font-size: 14px; font-weight: 600; color: var(--cv-text-primary);
}
.js-popup-bulk-vote .bulk-vote-step__body {/*  padding-left: 30px;  */}
/* 다운로드 버튼 — Step 1 강조 */
.js-popup-bulk-vote .bulk-vote-download-btn {
    height: var(--sp-input-height);
    width: 100%; justify-content: center;
}
/* 안내문 — 다운로드 버튼 직하단 컨테이너 */
.js-popup-bulk-vote .bulk-vote-notice {
    display: flex; flex-direction: column; gap: 3px;
    margin-top: 8px; padding: 10px 12px 10px 14px;
    border-radius: 6px; background: rgba(255,255,255,0.07);
    border-left: 3px solid rgba(255,255,255,0.15);
}
.js-popup-bulk-vote .bulk-vote-notice__desc { color: #aaa; font-size: 13px; line-height: 1.5; }
.js-popup-bulk-vote .bulk-vote-notice__text { color: #ff6a55; font-size: 13px; line-height: 1.5; font-weight: 500; }
/* 행 레이아웃 — Step 2 내부 */
.js-popup-bulk-vote .conference__row { height: 44px; margin-bottom: 6px; padding: 0; }
.js-popup-bulk-vote .conference__row.h__auto { height: auto; min-height: 44px; }
.js-popup-bulk-vote .create__line { margin-bottom: 4px; padding-bottom: 4px; }
.js-popup-bulk-vote .conference__btns { padding: 12px 28px; }
/* 셀렉트/버튼 — 토큰 참조 */
.js-popup-bulk-vote .form_select { height: var(--sp-input-height); line-height: var(--sp-input-height); padding: 0 8px; }
.js-popup-bulk-vote .conference__btn { height: var(--sp-input-height); }
/* 참여자 tagify — 태그 수에 따라 자동 확장 */
.js-popup-bulk-vote .tagify { height: auto; min-height: var(--sp-input-height); max-height: 160px; overflow-y: auto; }
/* 파일 선택 버튼 행 */
.js-popup-bulk-vote .bulk-vote-file__empty,
.js-popup-bulk-vote .bulk-vote-file__selected {
    display: flex; align-items: center; gap: 8px;
}
.js-popup-bulk-vote .bulk-vote-file__btn {
    height: 28px !important; padding: 0 14px; font-size: 12px; flex-shrink: 0;
}
.js-popup-bulk-vote .bulk-vote-file__hint {
    font-size: 11px; color: #6f767e; white-space: nowrap;
}
.js-popup-bulk-vote .bulk-vote-file__name {
    font-size: 13px; color: #e0e0e0; max-width: 280px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.js-popup-bulk-vote .bulk-vote-file__remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: none; cursor: pointer;
    color: #999; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.js-popup-bulk-vote .bulk-vote-file__remove:hover { background: rgba(255,80,80,0.15); color: #ff6a55; }
/* 드래그앤드롭 전용 드롭존 — 버튼과 분리 */
.js-popup-bulk-vote .bulk-vote-dropzone {
    margin: 4px 0 8px;
    border: 1.5px dashed #555;
    border-radius: 6px; padding: 14px;
    text-align: center; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.js-popup-bulk-vote .bulk-vote-dropzone:hover,
.js-popup-bulk-vote .bulk-vote-dropzone.is-dragover {
    border-color: #888; background: rgba(255,255,255,0.05);
}
.js-popup-bulk-vote .bulk-vote-dropzone__text {
    font-size: 12px; color: #8a9199;
}
/* 생성 버튼 로딩 상태 */
.js-popup-bulk-vote .conference__btn.is-loading {
    pointer-events: none; opacity: 0.6; position: relative;
}
/* 로딩 스피너 */
@keyframes bulk-vote-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.js-popup-bulk-vote .conference__btn.is-loading .bulk-vote-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bulk-vote-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
/* 필수 항목 표시 */
.js-popup-bulk-vote .conference__row.is-required .conference__label::after {
    content: ' *'; color: #ff6a55; font-weight: 600;
}

/* 투표 대량 생성 팝업 — 태블릿 대응 (≤1023px) */
@media only screen and (max-width: 1023px) {
    /* (0,3,0) 으로 specificity 맞춤 — 베이스 룰과 캐스케이드 일관성 유지 */
    .popup_product.js-popup-bulk-vote .popup__wrap { width: 90vw; max-width: 570px; }
    .js-popup-bulk-vote .create__conference { width: 90vw; max-width: 570px; }
    .js-popup-bulk-vote .conference__fieldset { padding: 0 18px; }
    .js-popup-bulk-vote .conference__row { flex-wrap: wrap; height: auto; min-height: 40px; padding: 0; }
    .js-popup-bulk-vote .conference__label { width: 100%; min-width: 100%; margin-bottom: 3px; font-size: 13px; }
    .js-popup-bulk-vote .conference__col { width: 100%; }
    .js-popup-bulk-vote .conference__header { padding: 0 18px; height: 36px; margin-bottom: 6px; }
    .js-popup-bulk-vote .conference__btns { padding: 10px 18px; }
    .js-popup-bulk-vote .bulk-vote-step__body { padding-left: 0; }
    .js-popup-bulk-vote .bulk-vote-file__name { max-width: 140px; }
}
/* 스타일드 확인 다이얼로그 */
.sp-confirm-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); z-index: 100002;
    display: flex; align-items: center; justify-content: center;
}
.sp-confirm-dialog {
    width: 380px; padding: 24px; border-radius: 12px;
    background: #FCFCFC; color: #1A1D1F;
    box-shadow: 0px 0px 14px -4px rgba(0,0,0,0.05), 0px 32px 48px -8px rgba(0,0,0,0.1);
}
.sp-confirm-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.sp-confirm-message { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,0.6); margin-bottom: 20px; }
.sp-confirm-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.sp-confirm-buttons .conference__btn { height: 36px; min-width: 80px; }
/* 다크 모드 */
body.dark .sp-confirm-overlay { background: rgba(0,0,0,0.5); }
body.dark .sp-confirm-dialog { background: #1A1D1F; color: #FCFCFC; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
body.dark .sp-confirm-message { color: rgba(255,255,255,0.75); }

.js-popup-setting .conference__label {width: 120px; max-width: 120px;}
.js-popup-setting .conference__col {width: calc(100% - 120px);}

.header__setting {width: 28px; height: 28px;fill: #6f767e;margin-left: 10px;}
.info__time{text-align: center;padding: 5px 0px;background-color: var(--color-primary);color: #fff;position: relative;border-bottom: 1px #fff solid;}
.info__header {text-align: center;padding: 5px 0px;background-color: #adb5bd;color: #fff;position: relative;border-bottom: 1px #fff solid;}
.field__input2 { min-width: 30px; height: 30px; padding: 0 10px; border-radius: 12px; border: 2px solid transparent; background: #F4F4F4; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.6; color: #1A1D1F; transition: all .2s; font-family: 'Pretendard'; text-align: center;}
.button.header__button.red {background-color: #FFBC99;}
.button.header__button.red:hover {background-color: #d38b66;}
.tagify__tag__emoveBtn::after {content: "x"}
.vote__type {display: none;}
.vote__type.active {display: block;}
.header__logo[data-href] {cursor: pointer;}

.button.condition__search.red { border: solid 2px #d6fef0; background: #FFBC99;}
body.dark .button.condition__search.red { border-color: #FFBC99;}
body.dark .button.condition__search.red:hover { border-color: #FFBC99;}

.button.condition__search.red:hover { border: solid 2px #c78867; background: #ef9a6c;}

.product__wrapper.admin__organization {max-width: 100%;}
.product__wrapper.admin__organization  > .select__userlist {width: 100%;}

.select__userlist.type2 {
    height: 100%;
}

.group__organization {width: 60vw; /* height: 80vh;  */}
.product__wrapper.group__organization  > .select__userlist {width: 100%;}

.sub__menu .icon.icon-seminar {width: 40px; height: 40px;}
/*LEE : E*/




/*HONG : S*/
.form__diff {
    background-color: #ffffff;
    font-size: 17px;
    width: 80%;
}

.set_width {
    width: 32.333333%;
}

.conference__coldiff {
    display: flex;
    align-items: center;
}

.schedule__control.diff{
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    right: unset;
    align-items: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    visibility: visible;
    opacity: 1;
    transition: all .2s;
}


/*HONG : E*/


/* 신규 CSS 작성 종료 */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    padding: 14px 40px;
    background: #FCFCFC;
    height: 76px;
    /* box-shadow: inset 1px 0px 0px #F4F4F4, inset 0 -1px 0px #EFEFEF; */
}

#wa-conference-display .header{
    background: none;
    height: 70px;
}

.headerConferenceTitle{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    padding: 60px 5px 0 0;
    box-sizing: border-box;
    background-color: #FCFCFC ;
    z-index: 99998;
    box-shadow: inset 1px 0px 0px #F4F4F4, inset 0 -1px 0px #EFEFEF;

    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.01em;
    color: #1A1D1F;
}

.headerConferenceTitle.fv {
    display: none;
}

/*@media only screen and (max-width: 1259px) {
    .header {
        left: 96px;
    }
}

@media only screen and (max-width: 767px) {
    .header {
        left: 0;
        padding: 16px 24px 16px 16px;
    }
}*/

body.dark .header {
    background: #1A1D1F;
    box-shadow: inset 1px 0px 0px #111315, inset 0 -1px 0px #111315;
}

.header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: auto;
}

@media only screen and (max-width: 767px) {
    .header__burger {
        display: flex;
    }
}

.header__burger:before,
.header__burger:after {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #6F767E;
}

.header__burger:before {
    margin-bottom: 6px;
}

.header__logo.login__page,
.dark .header__logo.login__page
{
    width: 100%;
}

/* 헤더 페이지명 — 데스크톱에서 숨김, 태블릿에서 표시 */
.header__page-name {
    display: none;
    font-size: 18px;
    font-weight: 700;
    color: #1a2740;
    letter-spacing: -0.02em;
    margin-left: 16px;
    white-space: nowrap;
}
body.dark .header__page-name {
    color: #e8ecf1;
}
.header__page-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7fa0;
    margin-right: 4px;
}
body.dark .header__page-label {
    color: #7a8a9e;
}

.header__logo {
    height: 50px;
    width: 197px;
    background: url('../img/smartplace_logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dark .header__logo {
    height: 50px;
    width: 197px;
    background: url('../img/smartplace_logo_white.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dark .header__logo.login__page {
    background: url(/files/default/loginLogoImg_dk.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.header__logo.login__page {
    background: url(/files/default/loginLogoImg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.header__logo.admin {
    height: 50px;
    width: 197px;
    background: url('../img/n_smartplace_logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dark .header__logo.admin {
    height: 50px;
    width: 197px;
    background: url('../img/n_smartplace_logo_white.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.header__conference .header__control {
    display: flex;
    align-items: center;
    margin-left: auto;
    width: 100%;
    /* max-width: 1616px; */
}


.header__control {
    display: flex;
    align-items: center;
    margin-left: auto;
    /* width: 100%; */
    /* max-width: 1616px; */
}

.header__control .select .list {
  width: max-content;
  min-width: 280px;
  /* max-width: 50vw; */
  max-width: 65vw;
}

.header__control .select ul{
    width: 100%;
}

.header__control .conference__utils .control__btn{
    position: relative;
}


.header__control .conference__utils button .tooltip-text{
    visibility: hidden;
    position: absolute;
    box-sizing: content-box;
    border: 1px solid;
    border-radius: 5px;
    padding: 4px 8px;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: white;
    color: #000;
    text-align: center;
    font-size: 1em;
    font-weight: 400;
    z-index: 9999999999;
}

.header__control .conference__utils button:hover .tooltip-text{
    visibility: visible;

}


@media only screen and (max-width: 767px) {
    .header__control {
        margin-left: 0;
    }
}

.header__control .header__button:not(:last-child),
.header__item:not(:last-child),
.header__search:not(:last-child) {
    margin-right: 15px;
}

.header__search {
    display: none;
    width: 48px;
    height: 48px;
}

@media only screen and (max-width: 767px) {
    .header__search {
        display: inline-block;
    }
}

.header__search .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.header__search.active .icon {
    fill: #1A1D1F;
}

body.dark .header__search.active .icon {
    fill: #FCFCFC;
}

@media only screen and (max-width: 1023px) {
    .header__control .header__button {
        display: none;
    }
}

.header__control .header__button .icon {
    width: 24px;
    height: 24px;
}

.header__item {
    position: relative;
}

@media only screen and (max-width: 767px) {
    .header__item {
        position: static;
    }
}

.header__item.active .header__body {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.header__item_messages.active .header__head .icon,
.header__item_notifications.active .header__head .icon {
    fill: #1A1D1F;
}

body.dark .header__item_messages.active .header__head .icon,
body.dark .header__item_notifications.active .header__head .icon {
    fill: #FCFCFC;
}
/* <!-- 해더버튼 관리자 전체화면 설정 --> */
.header__head {
    width: 48px;
    height: 48px;
}

.header__item_messages .header__head[p-select="view-admin-page"] {
    width: 120px;
    height: 48px;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    background: linear-gradient(135deg, var(--sp-color-primary-500, #1A6FA6) 0%, #00E6C0 100%);
    border-radius: 8px;
    cursor: pointer;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    gap: 7px;
}

.header__item_user .header__head[p-select="view-home-page"] {
    width: 120px;
    height: 48px;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    background: linear-gradient(135deg, var(--sp-color-primary-500, #1A6FA6) 0%, #00E6C0 100%);
    border-radius: 8px;
    cursor: pointer;
} 

.header__item_user .header__head[p-select="view-home-page"] .header__setting{
    margin-left: 0px;
}


.header__pipe {
    width: 1px;
    height: 24px;
    background: #b0b0b0;
    margin: 0 8px;
}



/* <!-- 관리자 버튼 --> */
.header__item_messages .header__head,
.header__item_notifications .header__head {
    position: relative;
    display: inline-block;
}

.header__head .tooltip-text{
    visibility: hidden;
    position: absolute;
    box-sizing: content-box;
    border: 1px solid;
    border-radius: 5px;
    padding: 8px 10px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: white;
    color: #000;
    
    text-align: center;
    font-size: 1.1em;
    font-weight: 400;
}

body.dark .tooltip-text{
    background: #111315;
    color: #FCFCFC;
}

.header__head:hover .tooltip-text{
    visibility: visible;
}


.header__item_messages .header__head .icon,
.header__item_notifications .header__head .icon,
.header__item_full.header__head .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.header__item_messages .header__head:hover .icon,
.header__item_notifications .header__head:hover .icon {
    /* fill: #1A1D1F; */
}

body.dark .header__item_messages .header__head:hover .icon,
body.dark .header__item_notifications .header__head:hover .icon {
    fill: #FCFCFC;
}

.header__item_messages .header__head.active:before,
.header__item_notifications .header__head.active:before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background: #FF6A55;
}

body.dark .header__item_messages .header__head.active:before,
body.dark .header__item_notifications .header__head.active:before {
    border-color: #1A1D1F;
}

.header__item_user .header__head {
    border-radius: 50%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.header__item_user .header__head img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.header__body {
    position: absolute;
    top: calc(100% + 18px);
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: 0px 40px 64px -12px rgba(0, 0, 0, 0.08), 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    transition: all .2s;
}

@media only screen and (max-width: 1339px) {
    .header__body {
        top: calc(100% + 15px);
    }
}

@media only screen and (max-width: 767px) {
    .header__body {
        top: 100%;
        left: 16px;
    }
}

body.dark .header__body {
    background: #111315;
    border-color: #272B30;
}

.header__body:before {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 20px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

body.dark .header__body:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23111315'/%3E%3C/svg%3E");
}

.header__item_messages .header__body {
    right: -12px;
    width: 392px;
    padding: 12px 24px 24px;
}

@media only screen and (max-width: 767px) {
    .header__item_messages .header__body {
        right: 16px;
        width: auto;
        padding: 12px 16px 20px;
    }
}

.header__item_messages .header__body:before {
    right: 26px;
}

@media only screen and (max-width: 767px) {
    .header__item_messages .header__body:before {
        right: 165px;
    }
}

.header__item_notifications .header__body {
    right: -92px;
    width: 392px;
    padding: 12px 24px 24px;
}

@media only screen and (max-width: 1339px) {
    .header__item_notifications .header__body {
        right: -72px;
    }
}

@media only screen and (max-width: 767px) {
    .header__item_notifications .header__body {
        right: 16px;
        width: auto;
        padding: 12px 16px 20px;
    }
}

.header__item_notifications .header__body:before {
    right: 105px;
}

@media only screen and (max-width: 1339px) {
    .header__item_notifications .header__body:before {
        right: 84px;
    }
}

@media only screen and (max-width: 767px) {
    .header__item_notifications .header__body:before {
        right: 92px;
    }
}

.header__item_user .header__body {
    right: -20px;
    width: 280px;
    padding: 16px;
}

@media only screen and (max-width: 1339px) {
    .header__item_user .header__body {
        right: 0;
        border-radius: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .header__item_user .header__body {
        right: 16px;
        width: auto;
        padding: 12px 16px 20px;
    }
}

.header__item_user .header__body:before {
    right: 33px;
}

@media only screen and (max-width: 1339px) {
    .header__item_user .header__body:before {
        right: 13px;
    }
}

@media only screen and (max-width: 767px) {
    .header__item_user .header__body:before {
        right: 21px;
    }
}

.header__top {
    display: flex;
    align-items: center;
    margin: 0 -12px 12px 0;
}

@media only screen and (max-width: 767px) {
    .header__top {
        margin-right: -8px;
    }
}

.header__title {
    margin-right: auto;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .header__title {
        font-size: 18px;
    }
}

.header .actions__button {
    background: #EFEFEF;
}

body.dark .header .actions__button {
    background: #272B30;
}

body.dark .header .actions__button .icon {
    fill: #FCFCFC;
}

.header__list {
    /* margin: 0 -12px; */
}

@media only screen and (max-width: 767px) {
    .header__item_messages .header__list {
        margin: 0 -8px;
    }
}

.header__message,
.header__notification {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px;
    transition: background .2s;
}

.header__message:after,
.header__notification:after {
    content: "";
    position: absolute;
    right: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #9A9FA5;
    transition: background .2s;
}

.header__message.message__lang:after {
    display: none;
}

.header__message:not(:last-child):before,
.header__notification:not(:last-child):before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: #EFEFEF;
}

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

    .header__message:nth-child(n+3),
    .header__notification:nth-child(n+3) {
        /* display: none; */
    }
}

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

    .header__message:nth-child(n+3),
    .header__notification:nth-child(n+3) {
        display: flex;
    }
}

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

    .header__message:nth-child(n+6),
    .header__notification:nth-child(n+6) {
        display: none;
    }
}

.header__message {
    border-radius: 12px;
}

@media only screen and (max-width: 767px) {
    .header__message {
        padding: 8px;
    }
}

.header__message:hover {
    background: #EFEFEF;
}

[p-select="conference-presenter"] .header__message:hover {
    background: #fcfcfc;
}

[p-select="conference-presenter"] .header__message {
    cursor: pointer;
}

body.dark .header__message:hover {
    background: #272B30;
}

@media only screen and (max-width: 767px) {
    .header__message:hover {
        background: none;
    }
}

.header__message:hover .header__avatar.online:before {
    border-color: #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .header__message:hover .header__avatar.online:before {
        border-color: #FFFFFF;
    }
}

body.dark .header__message:hover .header__avatar.online:before {
    border-color: #272B30;
}

@media only screen and (max-width: 767px) {
    body.dark .header__message:hover .header__avatar.online:before {
        border-color: #111315;
    }
}

.header__message:after {
    top: 20px;
}

@media only screen and (max-width: 767px) {
    .header__message:after {
        top: 14px;
    }
}

.header__message.new:after {
    background: var(--color-primary);
}

.header__message:not(:last-child) {
    margin-bottom: 8px;
}

body.dark .header__message:not(:last-child):before {
    background: transparent;
}

.header__notification {
    border-radius: 8px;
}

.header__notification:hover {
    background: #F4F4F4;
}

@media only screen and (max-width: 767px) {
    .header__notification:hover {
        background: none;
    }
}

.header__notification:hover .icon {
    border-color: #F4F4F4;
}

body.dark .header__notification:hover {
    background: #33383F;
}

body.dark .header__notification:hover .icon {
    border-color: #33383F;
}

.header__notification:after {
    top: 18px;
}

.header__notification.new:after {
    background: var(--color-primary);
}

body.dark .header__notification:not(:last-child):before {
    background: #272B30;
}

.header__avatar {
    position: relative;
    flex-shrink: 0;
}

.header__avatar>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.header__item_messages .header__avatar {
    width: 56px;
    height: 56px;
}

.header__item_messages .header__country {
    width: 56px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
}

.lang__korean {
    background: #fff;
}

@media only screen and (max-width: 767px) {
    .header__item_messages .header__avatar {
        width: 48px;
        height: 48px;
    }
}

.header__item_messages .header__avatar.online:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    border: 4px solid #FFFFFF;
    background: #83BF6E;
    border-radius: 50%;
    transition: border-color .2s;
}

body.dark .header__item_messages .header__avatar.online:before {
    border-color: #111315;
}

.header__item_notifications .header__avatar {
    width: 48px;
    height: 48px;
}

.header__icon {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    transition: border-color .2s;
}

body.dark .header__icon {
    border-color: #111315;
}

.header__icon img {
    width: 12px;
    height: 12px;
}

.header__details {
    padding-left: 4px;
}

.header__item_messages .header__details {
    flex: 0 0 calc(100% - 56px);
    width: calc(100% - 56px);
}

.header__item_notifications .header__details {
    flex: 0 0 calc(100% - 48px);
    width: calc(100% - 48px);
}

.header__line {
    display: flex;
    align-items: center;
    padding-right: 24px;
}

.header__item_messages .header__line {
    margin-bottom: 4px;
}

.header__subtitle {
    font-weight: 700;
    color: #1A1D1F;
}

body.dark .header__subtitle {
    color: #FCFCFC;
}

.header__item_messages .header__subtitle {
    margin-right: auto;
}

.header__item_notifications .header__subtitle {
    margin-right: 4px;
}

.header__login {
    font-weight: 500;
    color: #9A9FA5;
}

.header__item_messages .header__login {
    margin-left: 16px;
}

.header__item_notifications .header__login {
    margin-right: auto;
}

.header__time {
    margin-left: 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.header__content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: #6F767E;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__item_messages .header__content {
    padding-right: 40px;
}

.header__item_notifications .header__content strong {
    font-weight: 700;
    color: #1A1D1F;
}

body.dark .header__item_notifications .header__content strong {
    color: #FCFCFC;
}

.header__body .header__button {
    width: 100%;
    margin-top: 24px;
}

@media only screen and (max-width: 767px) {
    .header__body .header__button {
        margin-top: 16px;
    }
}

.header__nav:not(:last-child) {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .header__nav:not(:last-child) {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
}

body.dark .header__nav:not(:last-child) {
    border-color: #272B30;
}

.header__link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

.header__link .icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    fill: #6F767E;
    transition: fill .2s;
}

.header__link:hover,
.header__link.active {
    color: #1A1D1F;
}

.header__link:hover .icon,
.header__link.active .icon {
    fill: #1A1D1F;
}

body.dark .header__link:hover,
body.dark .header__link.active {
    color: #FCFCFC;
}

body.dark .header__link:hover .icon,
body.dark .header__link.active .icon {
    fill: #FCFCFC;
}

.header__link.active {
    background: #F4F4F4;
}

body.dark .header__link.active {
    background: transparent;
}

.header__link.color {
    color: #8E59FF;
}

.header__link.color .icon {
    fill: #8E59FF;
}

body.dark .header__link.color {
    color: #8E59FF;
}

body.dark .header__link.color .icon {
    fill: #8E59FF;
}

.header__link.color:hover {
    opacity: .8;
}

.header__btns {
    display: none;
    align-items: center;
    margin-left: auto;
}

@media only screen and (max-width: 767px) {
    .header__btns {
        margin-left: 0;
    }
}

.header__btns .header__button {
    white-space: nowrap;
}

.header__btns .header__link {
    margin-right: 32px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: #1A1D1F;
    transition: color .2s;
}

body.dark .header__btns .header__link {
    color: #FCFCFC;
}

@media only screen and (max-width: 767px) {
    .header__btns .header__link {
        margin-right: 24px;
    }
}

.header__btns .header__link:hover {
    color: var(--color-primary);
}

body.dark .header__btns .header__link:hover {
    color: var(--color-primary);
}

.header.unauthorized .header__control {
    display: none;
}

.header.unauthorized .header__btns {
    display: flex;
}

.search {
    position: relative;
    flex-shrink: 0;
    width: 360px;
}

@media only screen and (max-width: 767px) {
    .search {
        position: absolute;
        left: 0;
        right: 0;
        top: 80px;
        width: 100%;
        padding: 12px 16px;
        background: #FFFFFF;
        box-shadow: 0 8px 12px rgba(17, 19, 21, 0.05);
        visibility: hidden;
        opacity: 0;
        transition: all .2s;
    }

    body.dark .search {
        background: #111315;
    }
}

.search.active .search__result {
    visibility: hidden;
    opacity: 0;
}

.search.active .search__close {
    visibility: visible;
    opacity: 1;
}

.search.active .search__body {
    visibility: visible;
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .search.visible {
        visibility: visible;
        opacity: 1;
    }
}

.search__head {
    position: relative;
    z-index: 2;
}

.search__start,
.search__direction,
.search__result,
.search__head .search__close {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all .2s;
}

.search__start .icon,
.search__direction .icon,
.search__result .icon,
.search__head .search__close .icon {
    width: 24px;
    height: 24px;
    transition: fill .2s;
}

.search__start {
    left: 12px;
}

.search__start .icon {
    fill: #6F767E;
}

.search__start:hover .icon {
    fill: #1A1D1F;
}

.search__result {
    right: 8px;
    width: 56px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.05), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
    font-size: 1em;
    font-weight: 600;
    font-family: 'Pretendard';
    color: #1A1D1F;
}

.search__result.refresh {
    right: 8px;
    padding: 0 10px;
    white-space: nowrap;
    width: auto;
    height: 32px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.05), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
    font-size: 1em;
    font-weight: 600;
    font-family: 'Pretendard';
    color: #1A1D1F;
}

body.dark .search__result {
    background: #1A1D1F;
    box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.05), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 1px 0px rgba(255, 255, 255, 0.08);
    color: #FCFCFC;
}

@media only screen and (max-width: 767px) {
    .search__result {
        display: none;
    }
}

.search__result:hover {
    color: var(--color-primary);
}

.search__direction {
    left: 10px;
}

.search__direction .icon {
    fill: var(--color-primary);
}

.search__direction:hover {
    -webkit-transform: translate(-2px, -50%);
    transform: translate(-2px, -50%);
}

.search__head .search__close {
    right: 10px;
    width: 32px;
    height: 32px;
}

.search__head .search__close .icon {
    fill: #9A9FA5;
}

.search__head .search__close:hover .icon {
    fill: #FF6A55;
}

.search__direction,
.search__head .search__close {
    visibility: hidden;
    opacity: 0;
}

.search__input {
    width: 100%;
    height: 48px;
    padding: 0 68px 0 42px;
    background: #F4F4F4;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.6;
    color: #1A1D1F;
    font-family: 'Pretendard';
    transition: all .2s;
}

body.dark .search__input {
    background: #272B30;
    color: #FCFCFC;
}

.search__input::-webkit-input-placeholder {
    color: #9A9FA5;
}

.search__input::-moz-placeholder {
    color: #9A9FA5;
}

.search__input:-ms-input-placeholder {
    color: #9A9FA5;
}

.search__input::-ms-input-placeholder {
    color: #9A9FA5;
}

.search__input::placeholder {
    color: #9A9FA5;
}

.search__input:focus {
    border-color: var(--color-primary);
    background: #FFFFFF;
}

body.dark .search__input:focus {
    background: #111315;
}

.search__body {
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    padding: 84px 12px 12px;
    border: 1px solid transparent;
    box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    border-radius: 16px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

@media only screen and (max-width: 767px) {
    .search__body {
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 152px);
        padding: 16px 8px;
        border-radius: 0;
        border-top: 1px solid #EFEFEF;
        box-shadow: 0 12px 32px rgba(17, 19, 21, 0.05);
        overflow: auto;
    }
}

body.dark .search__body {
    background: #1A1D1F;
    border-color: #272B30;
}

.search__box:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .search__box:not(:last-child) {
    border-color: #272B30;
}

@media only screen and (max-width: 767px) {
    .search__box:not(:last-child) {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
}

.search__category {
    margin-bottom: 12px;
    padding-left: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.search__item,
.search__suggestion {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
}

.search__link {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.search__link:hover .search__title {
    color: var(--color-primary);
}

.search__suggestion:hover .search__title {
    color: var(--color-primary);
}

.search__suggestion:hover .search__arrow {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
}

.search__preview {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    border-radius: 8px;
    overflow: hidden;
}

.search__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.search__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    border-radius: 50%;
    border: 2px solid #CABDFF;
}

.search__icon .icon {
    width: 24px;
    height: 24px;
    fill: #1A1D1F;
}

body.dark .search__icon .icon {
    fill: #FCFCFC;
}

.search__details {
    flex-grow: 1;
}

.search__content {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.search__item .search__content {
    margin-bottom: 4px;
}

.search__title {
    color: #1A1D1F;
    transition: color .2s;
}

body.dark .search__title {
    color: #FCFCFC;
}

.search__suggestion .search__title {
    margin-bottom: 4px;
}

.search__emove {
    flex-shrink: 0;
    margin-left: 24px;
}

.search__emove .icon {
    width: 24px;
    height: 24px;
    fill: #9A9FA5;
    transition: fill .2s;
}

.search__emove:hover .icon {
    fill: #FF6A55;
}

.search__arrow {
    margin-left: 24px;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

.search__arrow .icon {
    width: 24px;
    height: 24px;
    fill: #9A9FA5;
}

.overview__nav {
    display: flex;
    margin-bottom: 32px;
    padding: 8px;
    background: #F4F4F4;
    border-radius: 20px;
}

@media only screen and (max-width: 767px) {
    .overview__nav {
        margin-bottom: 24px;
    }
}

body.dark .overview__nav {
    background: rgba(17, 19, 21, 0.5);
}

.overview__link {
    display: flex;
    padding: 20px;
    flex: 0 0 50%;
    border-radius: 12px;
    color: #1A1D1F;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: all .2s;
}

@media only screen and (max-width: 1419px) {
    .overview__link {
        padding: 20px 16px;
    }
}

@media only screen and (max-width: 767px) {
    .overview__link {
        display: block;
    }
}

body.dark .overview__link {
    color: #FCFCFC;
}

.overview__link.active {
    background: #FCFCFC;
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}

body.dark .overview__link.active {
    background: #272B30;
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.06);
}

.overview__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-right: 16px;
    border-radius: 50%;
}

@media only screen and (max-width: 767px) {
    .overview__icon {
        display: none;
    }
}

.overview__icon .icon {
    width: 24px;
    height: 24px;
}

.overview__subtitle {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.overview .tooltip .icon {
    fill: #9A9FA5;
}

.overview__counter {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

@media only screen and (max-width: 1419px) {
    .overview__counter {
        font-size: 40px;
        line-height: 48px;
    }
}

.overview .balance {
    margin: -12px -12px 0 auto;
}

@media only screen and (max-width: 767px) {
    .overview .balance {
        margin: 4px 0 0;
    }
}

body.dark .overview .balance {
    background: #272B30 !important;
}

.overview__item {
    display: none;
}

.overview__chart {
    width: auto;
    height: 238px;
    margin: 0 0 -10px -10px;
}

@media only screen and (max-width: 767px) {
    .overview__chart {
        height: 206px;
    }
}

.overview__chart_snapshot {
    height: 329px;
    margin-left: -10px;
}

@media only screen and (max-width: 1023px) {
    .overview__chart_snapshot {
        height: 300px;
    }
}

@media only screen and (max-width: 767px) {
    .users__button {
        margin-left: 16px;
    }
}

.users__button span {
    margin-left: 4px;
}

@media only screen and (max-width: 767px) {
    .users__button span {
        display: none;
    }
}

.users__info {
    max-width: 240px;
    margin-right: auto;
    font-weight: 500;
    color: #6F767E;
}

.users__info strong {
    font-weight: 600;
    color: #1A1D1F;
}

body.dark .users__info strong {
    color: #FCFCFC;
}

.users__list {
    display: flex;
    flex-direction: column;
}

.users__item,
.users__all {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 32px 16px;
    flex: 0 0 25%;
    text-align: center;
    color: #1A1D1F;
    transition: color .2s;
}

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

    .users__item,
    .users__all {
        flex: 0 0 33.333%;
        padding: 16px 8px;
    }
}

body.dark .users__item,
body.dark .users__all {
    color: #FCFCFC;
}

.users__item:hover,
.users__all:hover {
    color: var(--color-primary);
}

.users__item {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.23077;
}

@media only screen and (max-width: 639px) {
    .users__item:nth-child(n+3) {
        display: none;
    }
}

.users__all {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
}

.users__avatar,
.users__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
}

.users__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.users__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #EFEFEF;
    border-radius: 50%;
    background: #EFEFEF;
    transition: all .2s;
}

.users__icon .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

body.dark .users__icon {
    background: #272B30;
    border-color: #272B30;
}

.users__all:hover .users__icon {
    border-color: var(--color-primary);
    background: none;
}

.users__all:hover .users__icon .icon {
    fill: var(--color-primary);
}

.tips__info {
    margin-bottom: 24px;
    font-weight: 500;
    color: #6F767E;
}

.tips__list {
    display: flex;
    flex-wrap: wrap;
    margin: -32px -16px 0;
}

@media only screen and (max-width: 767px) {
    .tips__list {
        display: block;
        margin: 0;
    }
}

.tips__item {
    display: flex;
    align-items: center;
    flex: 0 0 calc(50% - 32px);
    width: calc(50% - 32px);
    margin: 32px 16px 0;
    color: #1A1D1F;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    .tips__item {
        width: 100%;
        margin: 0;
    }
}

body.dark .tips__item {
    color: #FCFCFC;
}

.tips__item:hover .tips__icon {
    background: #EFEFEF;
}

body.dark .tips__item:hover .tips__icon {
    background: #272B30;
}

@media only screen and (max-width: 767px) {
    .tips__item:not(:last-child) {
        margin-bottom: 24px;
    }
}

.tips__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #EFEFEF;
    margin-right: 12px;
    transition: background .2s;
}

.tips__icon .icon {
    width: 24px;
    height: 24px;
    fill: #272B30;
}

body.dark .tips__icon {
    border-color: #272B30;
}

body.dark .tips__icon .icon {
    fill: #FCFCFC;
}

.tips__details {
    flex-grow: 1;
}

.tips__title {
    margin-bottom: 8px;
}

.tips__line {
    display: flex;
    align-items: center;
}

.tips__status {
    margin-right: 4px;
    color: #1A1D1F;
}

.tips__user {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px 1px 1px;
    border: 1px solid #EFEFEF;
    border-radius: 4px;
}

body.dark .tips__user {
    border-color: #272B30;
}

.tips__avatar {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    font-size: 0;
}

.tips__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 2px;
}

.tips__action {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    color: #6F767E;
}

.media__content {
    margin-bottom: 16px;
    font-weight: 500;
    color: #6F767E;
}

.media__btns {
    display: flex;
    margin: 0 -8px;
}

@media only screen and (max-width: 767px) {
    .media__btns {
        margin: 0 -6px;
    }
}

.media__button {
    flex: 0 0 calc(33.333% - 16px);
    width: calc(33.333% - 16px);
    margin: 0 8px;
}

@media only screen and (max-width: 767px) {
    .media__button {
        flex: 0 0 calc(33.333% - 12px);
        width: calc(33.333% - 12px);
        margin: 0 6px;
        font-size: 0;
    }

    .media__button .icon {
        margin: 0 !important;
    }
}

.media__button .icon {
    width: 24px;
    height: 24px;
}

.popular__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

body.dark .popular__head {
    border-color: #272B30;
}

.popular__list {
    margin: 0 -12px;
}

.popular__item {
    display: flex;
    align-items: center;
    padding: 12px;
    color: #1A1D1F;
    cursor: pointer;
}

body.dark .popular__item {
    color: #FCFCFC;
}

.popular__item:hover .popular__title {
    color: var(--color-primary);
}

.popular__item:not(:last-child) {
    margin-bottom: 12px;
}

.popular__preview {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    margin-right: 12px;
    border-radius: 8px;
    overflow: hidden;
}

.popular__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.popular__title {
    flex-grow: 1;
    padding-right: 16px;
    transition: color .2s;
}

.popular__details {
    flex-shrink: 0;
    text-align: right;
}

.popular__button {
    width: 100%;
    margin-top: 12px;
}

.review__item {
    display: flex;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .review__item {
    border-color: #272B30;
}

.review__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 12px;
}

.review__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.review__details {
    flex-grow: 1;
}

.review__line {
    display: flex;
    align-items: center;
}

.review__user {
    margin-right: auto;
}

.review__title {
    font-weight: 700;
}

.review__login {
    margin-left: 5px;
    font-weight: 500;
    color: #9A9FA5;
}

.review__time {
    margin-left: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.review__product {
    margin-bottom: 8px;
    font-weight: 500;
    color: #9A9FA5;
}

.review__product strong {
    font-weight: 700;
    color: #1A1D1F;
}

body.dark .review__product strong {
    color: #FCFCFC;
}

.review__content {
    margin-bottom: 16px;
    font-weight: 500;
    color: #1A1D1F;
}

body.dark .review__content {
    color: #FCFCFC;
}

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

.review__link .icon {
    width: 20px;
    height: 20px;
    fill: #9A9FA5;
    transition: fill .2s;
}

.review__link:hover .icon {
    fill: var(--color-primary);
}

.review__button {
    width: 100%;
}

.refund__item {
    display: flex;
}

.refund__item:not(:last-child) {
    margin-bottom: 12px;
}

.refund__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    background: #FFE7E4;
}

.refund__icon .icon {
    width: 24px;
    height: 24px;
    fill: #FF6A55;
}

.refund__content {
    font-weight: 500;
    color: #6F767E;
}

.refund__content strong {
    font-weight: 600;
    color: #1A1D1F;
}

body.dark .refund__content strong {
    color: #FCFCFC;
}

.refund__button {
    width: 100%;
    margin-top: 24px;
}

.popup:not(.picker_wrapper) {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    min-width: 320px;
    /* padding: 20px 10px; */
    padding: 0 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow: auto;
    z-index: 999;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.js-popup-pvote.popup:not(.picker_wrapper),
.js-popup-rvote.popup:not(.picker_wrapper){
    padding: 0;
}

.popup.visible.js-popup-pvote,
.popup.visible.js-popup-rvote{
    z-index: 100001;
}

.popup.visible {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
   
}

.popup.animation .popup__wrap {
    opacity: 1;
}

.popup__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(244, 244, 244, 0.8);
}

body.dark .popup__overlay {
    background: rgba(39, 43, 48, 0.9);
}

.popup__wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 26px 24px 24px;
    margin: auto;
    opacity: 0;
    background: #FCFCFC;
    border-radius: 16px;
    box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
    transition: opacity .5s;
}

body.dark .popup__wrap {
    background: #1A1D1F;
}

@media only screen and (max-width: 767px) {
    .popup__wrap {
        box-shadow: none;
    }
}

.popup:not(.popup_product) .popup__wrap {
    max-width: 408px;
}

.popup.setting__popup .popup__wrap {
    max-width: 1400px;
}

.popup__close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EFEFEF;
    transition: background .2s;
}

.popup__close .icon {
    width: 20px;
    height: 20px;
    fill: #33383F;
    transition: -webkit-transform .25s;
    transition: transform .25s;
    transition: transform .25s, -webkit-transform .25s;
}

body.dark .popup__close {
    background: #272B30;
}

body.dark .popup__close .icon {
    fill: #FCFCFC;
}

.popup__close:hover .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.popup_product {
    padding: 80px 24px 24px;
}

@media only screen and (max-width: 767px) {
    .popup_product {
        padding: 88px 16px 24px;
    }
}

.popup_product .popup__overlay {
    background: rgb(244 244 244 / 90%);
}

body.dark .popup_product .popup__overlay {
    background: rgb(17 19 21 / 90%);
}

.popup_product .popup__wrap {
    position: static;
    display: inline-block;
    width: auto;
    max-width: 100%;
    padding: 0;
    border-radius: 8px;
    z-index: 2;
    box-shadow: none;
}

@media only screen and (max-width: 1259px) {
    .popup_product .popup__wrap {
        background: none;
    }
}

.popup_post:not(.popup_product) .popup__wrap,
.popup_success:not(.popup_product) .popup__wrap {
    max-width: 560px;
}

.popup_refunds:not(.popup_product) .popup__wrap {
    max-width: 896px;
}

@media only screen and (max-width: 767px) {
    .popup_refunds:not(.popup_product) .popup__wrap {
        padding: 28px 16px 16px;
    }
}

.product__wrapper {
    position: relative;
    width: 100%;
    background: #FCFCFC;
    border-radius: 8px;
}

@media only screen and (max-width: 1259px) {
    /* 회의방 사이트 메뉴 높이 */
    .product__wrapper {
        height: auto;

        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .product__wrapper::-webkit-scrollbar{
        display: none;
    }


}

@media only screen and (max-width: 767px) {
    .product__wrapper {
        max-width: 100%;
    }
    .file__share {
        width: 100%;
    }
    .file__share .customer__inner { margin-top: 20px; height: 95% !important; }
}

body.dark .product__wrapper {
    background: #1A1D1F;
}

.product__details {
    padding: 24px;
    flex-grow: 1;
}

@media only screen and (max-width: 767px) {
    .product__details {
        padding: 16px;
        overflow: hidden;
    }
}

.product__comments {
    display: none;
    flex-shrink: 0;
    width: 472px;
}

@media only screen and (max-width: 1259px) {
    .product__comments {
        width: 600px;
    }
}

@media only screen and (max-width: 1023px) {
    .product__comments {
        width: 100%;
    }
}

.product__next {
    position: absolute;
    left: calc(100% + 24px);
    bottom: 256px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    background: #FFFFFF;
    border-radius: 50%;
}

@media only screen and (max-width: 1259px) {
    .product__next {
        left: auto;
        right: -88px;
        bottom: 0;
    }
}

@media only screen and (max-width: 767px) {
    .product__next {
        display: none;
    }
}

body.dark .product__next {
    background: #272B30;
}

.product__next .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.product__next:hover .icon {
    fill: var(--color-primary);
}

.product__control {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .product__control {
        top: 16px;
        left: 16px;
        right: 16px;
    }

    .popup_product .popup__wrap {
        width: 95%;
    }

    .js-popup-vote .popup__wrap.js-popup-wrap {
        height: 95%;
    }

    .js-popup-vote 
    .product__wrapper {
        height: 100%;
    }

    .js-popup-vote .js-product {
        height: 100%;
    }

    .messenger {
        width: 100% !important;
    }

    .conference__minutes .messages__messenger {
        width: 100% !important;
        overflow-y: scroll;
    }

    .messages__messenger .messenger__line {}

    .conference__minutes .messages__messenger .messenger__line {
        display: none;
    }
}

body.dark .product__control .product__button {
    background: #1A1D1F;
    box-shadow: inset 0 0 0 2px #272B30;
    color: #FCFCFC;
}

body.dark .product__control .product__button:hover {
    background: #272B30;
}

.product__close {
    width: 36px;
    height: 36px;
    margin-left: auto;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
    font-size: 0;
}

.product__close .icon {
    width: 20px;
    height: 20px;
    fill: #33383F;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

body.dark .product__close {
    background: #1A1D1F;
}

body.dark .product__close .icon {
    fill: #FCFCFC;
}

.product__close:hover .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.product__head {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
    .product__head {
        flex-wrap: wrap;
        margin-bottom: 32px;
    }
}

.product__nav {
    display: flex;
    margin-right: auto;
}

@media only screen and (max-width: 767px) {
    .product__nav {
        width: 100%;
        margin: 0 0 16px;
    }
}

.product__link {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

@media only screen and (max-width: 767px) {
    .product__link {
        flex: 1;
    }
}

.product__link:hover,
.product__link.active {
    color: #1A1D1F;
}

body.dark .product__link:hover,
body.dark .product__link.active {
    color: #FCFCFC;
}

.product__link.active {
    background: #EFEFEF;
}

body.dark .product__link.active {
    background: #272B30;
}

.product__link:not(:last-child) {
    margin-right: 8px;
}

@media only screen and (max-width: 767px) {
    .product__link:not(:last-child) {
        margin-right: 0;
    }
}

.product__btns {
    display: flex;
    align-items: center;
}

.product__favorite {
    margin-right: 16px;
}

.product__favorite .icon {
    width: 24px;
    height: 24px;
    fill: #FF6A55;
}

.product__favorite:hover {
    box-shadow: inset 0 0 0 1px #FF6A55;
    background: #FF6A55;
    color: #FCFCFC;
}

body.dark .product__favorite:hover {
    box-shadow: inset 0 0 0 1px #FF6A55;
}

.product__favorite:hover .icon {
    fill: #FCFCFC;
}

@media only screen and (max-width: 1023px) {
    .product__buy {
        padding: 0 16px;
    }
}

@media only screen and (max-width: 767px) {
    .product__buy {
        flex-grow: 1;
    }
}

.product__buy .icon {
    width: 24px;
    height: 24px;
}

.product__inner {
    display: inline-flex;
    align-items: center;
}

.product__inner span {
    margin-left: 4px;
}

@media only screen and (max-width: 1023px) {
    .product__inner span {
        display: none;
    }
}

.product__price {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #4493FC;
    box-shadow: 1px 0 0 0 #186FE3;
    line-height: 48px;
}

@media only screen and (max-width: 1023px) {
    .product__price {
        margin-right: 16px;
        padding-right: 16px;
    }
}

@media only screen and (max-width: 767px) {
    .product__price {
        margin-right: 12px;
        padding-right: 12px;
    }
}

.product__title {
    margin-bottom: 12px;
}

@media only screen and (max-width: 767px) {
    .product__title {
        font-size: 24px;
    }
}

.product__info {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: #6F767E;
}

@media only screen and (max-width: 767px) {
    .product__info {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .product__info {
        font-size: 14px;
    }
}

.product__line {
    display: flex;
    align-items: center;
}

.product__author {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
}

.product__author span {
    margin-left: 4px;
    color: #1A1D1F;
}

body.dark .product__author span {
    color: #FCFCFC;
}

.product__author .product__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

.product__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.product__rating {
    display: flex;
    align-items: center;
    margin-left: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

.product__rating .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    fill: #FFC554;
}

.product__counter {
    margin-left: 4px;
    color: #6F767E;
}

.product__gallery {
    position: relative;
    margin-top: 40px;
}

@media only screen and (max-width: 767px) {
    .product__gallery {
        margin-top: 32px;
    }
}

.product__gallery .product__button {
    position: absolute;
    left: 12px;
    bottom: 12px;
    pointer-events: none;
}

@media only screen and (max-width: 767px) {
    .product__gallery .product__button {
        bottom: 5px;
    }
}

body.dark .product__gallery .product__button {
    box-shadow: inset 0 0 0 2px #272B30;
    background: #1A1D1F;
    color: #FCFCFC;
}

body.dark .product__gallery .product__button:hover {
    background: #272B30;
}

.product__preview {
    display: block;
    cursor: pointer;
}

.product__preview img {
    width: 100%;
    border-radius: 12px;
}

.product__preview:not(:first-child) {
    display: none;
}

.product__row {
    display: flex;
    margin-top: 40px;
}

@media only screen and (max-width: 1023px) {
    .product__row {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .product__row {
        margin-top: 32px;
    }
}

.product__col:first-child {
    flex-grow: 1;
    padding-right: 64px;
}

@media only screen and (max-width: 1259px) {
    .product__col:first-child {
        padding-right: 48px;
    }
}

@media only screen and (max-width: 1023px) {
    .product__col:first-child {
        padding-right: 0;
    }
}

.product__col:nth-child(2) {
    flex-shrink: 0;
    width: 308px;
}

@media only screen and (max-width: 1023px) {
    .product__col:nth-child(2) {
        width: 100%;
        margin-top: 32px;
    }
}

.product__subtitle {
    margin-bottom: 32px;
}

@media only screen and (max-width: 1023px) {
    .product__subtitle {
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .product__subtitle {
        margin-bottom: 12px;
    }
}

.product__content {
    font-weight: 500;
    color: #33383F;
}

body.dark .product__content {
    color: #EFEFEF;
}

.product__content p:not(:last-child) {
    margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
    .product__features {
        margin-top: 12px;
    }
}

.product__features li {
    position: relative;
    padding-left: 40px;
    color: #33383F;
}

body.dark .product__features li {
    color: #EFEFEF;
}

.product__features li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.707 6.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0l-3.586-3.586a1 1 0 0 1 1.414-1.414l3.586 3.586a1 1 0 0 0 1.414 0l8.586-8.586a1 1 0 0 1 1.414 0z' fill='%23b5e4ca'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

.product__features li:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .product__features li:not(:last-child) {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
}

body.dark .product__features li:not(:last-child) {
    border-color: #272B30;
}

.product__panel {
    position: absolute;
    top: 16px;
    left: calc(100% + 24px);
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 1259px) {
    .product__panel {
        top: 0;
        left: auto;
        right: -88px;
    }
}

@media only screen and (max-width: 767px) {
    .product__panel {
        display: none;
    }
}

.product__panel .product__avatar:not(:last-child),
.product__brand:not(:last-child),
.product__share:not(:last-child) {
    margin-bottom: 24px;
}

.product__panel .product__avatar,
.product__brand,
.product__share {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

.product__brand {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #FFFFFF;
}

body.dark .product__brand {
    background: #272B30;
}

.product__brand img {
    max-height: 32px;
}

.product__number {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 20px;
    padding: 0 4px;
    background: #1A1D1F;
    border-radius: 50%;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #FCFCFC;
}

body.dark .product__number {
    background: #FCFCFC;
    color: #1A1D1F;
}

.product__share {
    background: #FFFFFF;
    border-radius: 50%;
}

body.dark .product__share {
    background: #272B30;
}

.product__share .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.product__share:hover .icon {
    fill: var(--color-primary);
}

.product.active .product__wrapper {
    display: flex;
    max-width: 1440px;
}

@media only screen and (max-width: 1259px) {
    .product.active .product__wrapper {
        max-width: 100%;
        margin-right: 0;
    }
}

.product.active .product__details {
    flex: 0 0 calc(100% - 472px);
    width: calc(100% - 472px);
}

@media only screen and (max-width: 1259px) {
    .product.active .product__details {
        display: none;
    }
}

.product.active .product__comments {
    display: block;
}

.product.active .product__panel,
.product.active .product__next {
    display: none;
}

.hit {
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .hit {
        margin-top: 48px;
        padding-top: 48px;
    }
}

@media only screen and (max-width: 767px) {
    .hit {
        margin-top: 32px;
        padding-top: 32px;
    }
}

body.dark .hit {
    border-color: #272B30;
}

.hit__head {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.hit__title {
    margin-right: auto;
}

.hit__button .icon {
    width: 24px;
    height: 24px;
}

.hit__wrapper {
    margin: 0 -12px;
}

@media only screen and (max-width: 767px) {
    .hit__wrapper {
        margin: 0;
    }
}

.hit .summary {
    margin: 0 12px;
}

.hit__slider {
    padding-bottom: 48px;
}

@media only screen and (max-width: 767px) {
    .hit .slick-list {
        margin: 0 -296px 0 -8px;
    }
}

.hit .slick-arrow {
    bottom: 0;
}

body.dark .hit .slick-arrow:hover {
    box-shadow: inset 0 0 0 2px #272B30;
}

body.dark .hit .slick-arrow:hover path {
    fill: #FCFCFC;
}

.hit .slick-prev {
    left: calc(50% - 48px);
}

.hit .slick-next {
    right: calc(50% - 48px);
}

.summary__preview:after,
.summary__control,
.summary .checkbox {
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
}

.summary__preview {
    position: relative;
    height: 200px;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
}

.summary__preview:after,
.summary__preview:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .2s;
}

.summary__preview:after {
    background: rgba(17, 19, 21, 0.8);
}

.summary__preview:before {
    z-index: 2;
    border: 2px solid transparent;
    border-radius: 12px;
    pointer-events: none;
}

.summary__preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.summary__preview .checkbox {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
}

@media only screen and (max-width: 1023px) {
    .summary__preview .checkbox {
        display: none;
    }
}

.summary__preview .checkbox .checkbox__tick {
    border-color: var(--color-primary);
}

.summary__control {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.summary__button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FCFCFC;
}

.summary__button .icon {
    width: 20px;
    height: 20px;
    fill: #6F767E;
    transition: fill .2s;
}

.summary__button:hover .icon {
    fill: var(--color-primary) !important;
}

.summary__button:not(:last-child) {
    margin-right: 16px;
}

.summary__line {
    display: flex;
    align-items: flex-start;
}

.summary__title {
    margin-right: auto;
    font-size: 1.1em;
}

.summary__price,
.summary__empty {
    flex-shrink: 0;
    display: inline-block;
    margin-left: 32px;
    padding: 0 8px;
    border-radius: 6px;
    line-height: 32px;
    font-weight: 700;
}

.summary__price {
    background: #B5E4CA;
}

body.dark .summary__price {
    color: #1A1D1F;
}

.summary__empty {
    background: #EFEFEF;
}

body.dark .summary__empty {
    background: #272B30;
    color: #FCFCFC;
}

.summary__date {
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-size: 0.95em;
    letter-spacing: -0.5px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
}

@media only screen and (max-width: 767px) {
    .summary__date {
        margin-top: 2px;
    }
}

.summary__date .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    fill: #6F767E;
}

.summary__rating {
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

@media only screen and (max-width: 767px) {
    .summary__rating {
        margin-top: 4px;
    }
}

.summary__rating .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    fill: #FFC554;
}

.summary__rating_empty {
    color: #6F767E;
}

.summary__rating_empty .icon {
    fill: #6F767E;
}

.summary__counter {
    margin-left: 4px;
    color: #6F767E;
}

.summary:hover .summary__preview:after,
.summary:hover .summary__control,
.summary:hover .checkbox {
    visibility: visible;
    opacity: 1;
}

.summary.active .checkbox {
    visibility: visible;
    opacity: 1;
}

.summary.active .summary__preview:before {
    border-color: var(--color-primary);
}

.editor__label {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #33383F;
}

body.dark .editor__label {
    color: #EFEFEF;
}

.editor .tooltip {
    position: relative;
    top: -1px;
}

.editor .tooltip .icon {
    fill: #9A9FA5;
}

.editor .richText {
    background: #F4F4F4;
    border: 2px solid rgba(154, 159, 165, 0.25);
    border-radius: 12px;
    height: 100%;
}

body.dark .editor .richText {
    background: #111315;
    border-color: rgba(154, 159, 165, 0.15);
}

.editor .richText-toolbar {
    border: none;
    padding: 0 3px;
}

.editor .richText-toolbar ul li {
    margin: 6px;
}

@media only screen and (max-width: 767px) {
    .editor .richText-toolbar ul li {
        margin: 3px;
    }
}

.editor .richText-toolbar ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: none !important;
    transition: color .2s;
}

.editor .richText-toolbar ul li a:hover {
    color: var(--color-primary);
}

body.dark .editor .richText-toolbar ul li a {
    color: #9A9FA5;
}

body.dark .editor .richText-toolbar ul li a:hover {
    color: #FCFCFC;
}

.editor .richText-toolbar:first-child {
    padding-right: 100px;
    background: #FCFCFC;
    border-radius: 10px 10px 0 0;
}

body.dark .editor .richText-toolbar:first-child {
    background: #272B30;
}

@media only screen and (max-width: 767px) {
    .editor .richText-toolbar:first-child {
        padding-right: 85px;
    }
}

.editor .richText-toolbar:last-child {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 16px;
}

.editor .richText-undo,
.editor .richText-redo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin: 6px;
    padding: 0;
    border: none;
    transition: color .2s;
}

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

    .editor .richText-undo,
    .editor .richText-redo {
        margin: 3px;
    }
}

body.dark .editor .richText-undo,
body.dark .editor .richText-redo {
    color: #9A9FA5;
}

.editor .richText-undo:not(.is-disabled):hover,
.editor .richText-redo:not(.is-disabled):hover {
    color: var(--color-primary);
}

body.dark .editor .richText-undo:not(.is-disabled):hover,
body.dark .editor .richText-redo:not(.is-disabled):hover {
    color: #FCFCFC;
}

.editor .richText-help {
    display: none;
}

.editor .richText-editor {
    min-height: 122px;
    max-height: 200px;
    height: auto;
    padding: 12px;
    border: none !important;
    background: none;
    border-radius: 0 0 10px 10px;
    font-family: inherit;, sans-serif;
    color: #33383F;
}

body.dark .editor .richText-editor {
    color: #FCFCFC;
}

.editor .richText-dropdown {
    z-index: 2;
}

.editor__wrap {
    position: relative;
}

.editor__wrap .richText {
    padding-bottom: 60px;
}

.editor__wrap .richText-editor {
    min-height: 60px;
}

.editor__button {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
}

.answer {
    display: none;
    position: relative;
    margin-top: 28px;
    padding-left: 60px;
}

@media only screen and (max-width: 767px) {
    .answer {
        padding-left: 52px;
    }
}

.answer:before {
    content: "";
    position: absolute;
    top: -23px;
    left: -45px;
    width: 33px;
    height: 44px;
    border-bottom-left-radius: 12px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .answer:before {
        left: -37px;
    }
}

body.dark .answer:before {
    border-color: #33383F;
}

.answer__avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
}

.answer__avatar>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.answer__details {
    flex-grow: 1;
}

.answer__details textarea {
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
    height: 19px;
    min-height: 19px;
    padding: 0;
    resize: none;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #272B30;
}

@media only screen and (max-width: 767px) {
    .answer__details textarea {
        padding-right: 8px;
    }
}

body.dark .answer__details textarea {
    color: #FCFCFC;
}

.answer__details textarea::-webkit-input-placeholder {
    color: rgba(17, 19, 21, 0.5);
}

.answer__details textarea::-moz-placeholder {
    color: rgba(17, 19, 21, 0.5);
}

.answer__details textarea:-ms-input-placeholder {
    color: rgba(17, 19, 21, 0.5);
}

.answer__details textarea::-ms-input-placeholder {
    color: rgba(17, 19, 21, 0.5);
}

.answer__details textarea::placeholder {
    color: rgba(17, 19, 21, 0.5);
}

body.dark .answer__details textarea::-webkit-input-placeholder {
    color: #6F767E;
}

body.dark .answer__details textarea::-moz-placeholder {
    color: #6F767E;
}

body.dark .answer__details textarea:-ms-input-placeholder {
    color: #6F767E;
}

body.dark .answer__details textarea::-ms-input-placeholder {
    color: #6F767E;
}

body.dark .answer__details textarea::placeholder {
    color: #6F767E;
}

.answer__btns {
    display: flex;
    margin-top: 16px;
}

body.dark .answer__button:nth-child(2) {
    background: #1A1D1F;
    box-shadow: inset 0 0 0 2px #1A1D1F;
}

body.dark .answer__button:nth-child(2):hover {
    background: #111315;
    box-shadow: inset 0 0 0 2px #111315;
}

.answer__button:not(:last-child) {
    margin-right: 8px;
}

.comments {
    padding: 24px;
    border-left: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .comments {
        padding: 16px 16px 24px;
    }
}

body.dark .comments {
    border-color: #111315;
}

.comments__head {
    display: flex;
    align-items: center;
    height: 48px;
}

.comments__title {
    display: flex;
    align-items: center;
    margin-right: auto;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .comments__title {
        font-size: 18px;
    }
}

.comments__counter {
    flex-shrink: 0;
    min-width: 38px;
    margin-right: 12px;
    padding: 0 6px;
    border-radius: 8px;
    background: #CABDFF;
    text-align: center;
    line-height: 36px;
}

body.dark .comments__counter {
    color: #1A1D1F;
}

.comments__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.comments__close .icon {
    width: 20px;
    height: 20px;
    fill: #33383F;
    transition: fill .2s;
}

body.dark .comments__close .icon {
    fill: #FCFCFC;
}

.comments__close:hover .icon {
    fill: var(--color-primary);
}

.comments .editor {
    margin-top: 24px;
}

.comments__list {
    margin-top: 40px;
}

@media only screen and (max-width: 767px) {
    .comments__list {
        margin-top: 24px;
    }
}

.comments__item,
.comments__answer {
    display: flex;
}

.comments__item .comments__avatar {
    width: 48px;
    height: 48px;
}

.comments__item .comments__details {
    flex: 0 0 calc(100% - 48px);
    width: calc(100% - 48px);
    padding-left: 16px;
}

.comments__item:not(:first-child) {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #EFEFEF;
}

body.dark .comments__item:not(:first-child) {
    border-color: #272B30;
}

.comments__answer {
    margin-top: 32px;
    padding: 24px 0 0 64px;
    border-top: 1px solid #EFEFEF;
}

body.dark .comments__answer {
    border-color: #272B30;
}

.comments__answer .comments__avatar {
    width: 32px;
    height: 32px;
}

.comments__answer .comments__details {
    flex: 0 0 calc(100% - 32px);
    width: calc(100% - 32px);
    padding-left: 16px;
}

.comments__avatar {
    flex-shrink: 0;
}

.comments__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.comments__line {
    display: flex;
    align-items: center;
}

.comments__author {
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comments__time {
    margin-left: 8px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #9A9FA5;
}

.comments__rating {
    display: flex;
    align-items: center;
    margin-left: 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

.comments__rating .icon {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    fill: #FFC554;
}

.comments__login {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    font-weight: 500;
    color: #6F767E;
}

.comments__content {
    margin-top: 12px;
    font-weight: 500;
    color: #33383F;
}

body.dark .comments__content {
    color: #FCFCFC;
}

.comments__content strong {
    font-weight: 600;
}

.comments__control {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.comments__favorite,
.comments__reply {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.23077;
    color: #9A9FA5;
    transition: color .2s;
}

.comments__favorite .icon,
.comments__reply .icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    fill: #9A9FA5;
    transition: fill .2s;
}

.comments__favorite:hover,
.comments__favorite.active,
.comments__reply:hover,
.comments__reply.active {
    color: #1A1D1F;
}

.comments__favorite:hover .icon,
.comments__favorite.active .icon,
.comments__reply:hover .icon,
.comments__reply.active .icon {
    fill: #1A1D1F;
}

body.dark .comments__favorite:hover,
body.dark .comments__favorite.active,
body.dark .comments__reply:hover,
body.dark .comments__reply.active {
    color: #FCFCFC;
}

body.dark .comments__favorite:hover .icon,
body.dark .comments__favorite.active .icon,
body.dark .comments__reply:hover .icon,
body.dark .comments__reply.active .icon {
    fill: #FCFCFC;
}

.comments__favorite:not(:last-child),
.comments__reply:not(:last-child) {
    margin-right: 24px;
}

.comments__favorite .icon:nth-child(2) {
    display: none;
}

.comments__favorite.active .icon:first-child {
    display: none;
}

.comments__favorite.active .icon:nth-child(2) {
    display: inline-block;
}

.share__head,
.share__preview {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .share__head,
body.dark .share__preview {
    border-color: #272B30;
}

.share__head {
    padding-right: 50px;
}

.share__title {
    position: 40px;
}

.share__field {
    position: relative;
    margin-bottom: 24px;
}

.share__icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    pointer-events: none;
}

.share__icon .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
}

.share__input {
    width: 100%;
    height: 40px;
    padding: 0 60px 0 44px;
    border-radius: 8px;
    background: #F4F4F4;
    font-size: 15px;
    font-weight: 600;
    color: #9A9FA5;
}

body.dark .share__input {
    background: #272B30;
}

.share__copy {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 40px;
    color: var(--color-primary);
    transition: opacity .2s;
}

.share__copy:hover {
    opacity: .8;
}

.share__preview img {
    width: 100%;
    border-radius: 12px;
}

.share__btns {
    display: flex;
    margin: 0 -8px;
}

.share__button {
    flex-grow: 1;
    margin: 0 8px;
}

.share__button .icon {
    width: 24px;
    height: 24px;
}

.stock__list {
    display: flex;
    margin: 0 -6px;
}

@media only screen and (max-width: 1023px) {
    .stock__list {
        margin: 0 -24px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .stock__list::-webkit-scrollbar {
        display: none;
    }

    .stock__list:before,
    .stock__list:after {
        content: "";
        flex-shrink: 0;
        width: 24px;
        height: 1px;
    }
}

@media only screen and (max-width: 767px) {
    .stock__list {
        margin: 0 -16px;
    }

    .stock__list:before,
    .stock__list:after {
        width: 16px;
    }
}

.stock__item {
    display: block;
    flex: 0 0 calc(33.333% - 12px);
    width: calc(33.333% - 12px);
    margin: 0 6px;
    padding: 32px;
    border-radius: 12px;
    color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
    .stock__item {
        flex: 0 0 295px;
        width: 295px;
        margin: 0;
    }

    .stock__item:not(:last-child) {
        margin-right: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .stock__item {
        flex: 0 0 285px;
        width: 285px;
    }
}

body.dark .stock__item {
    color: #EFEFEF;
}

body.dark .stock__item:nth-child(2n+1) {
    background: rgba(167, 170, 247, 0.15) !important;
}

body.dark .stock__item:nth-child(2n) {
    background: rgba(177, 229, 252, 0.1) !important;
}

.stock__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #1A1D1F;
}

.stock__icon .icon {
    width: 24px;
    height: 24px;
    fill: #FCFCFC;
}

body.dark .stock__icon {
    background: #FCFCFC;
}

body.dark .stock__icon .icon {
    fill: #1A1D1F;
}

.stock__line {
    display: flex;
}

.stock__category {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #33383F;
}

body.dark .stock__category {
    color: #EFEFEF;
}

.stock .tooltip .icon {
    fill: #33383F;
}

body.dark .stock .tooltip .icon {
    fill: #EFEFEF;
}

.stock__counter {
    margin-bottom: 4px;
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

.stock__indicator {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 4px;
    background: #FCFCFC;
    color: #6F767E;
}

body.dark .stock__indicator {
    background: #1A1D1F;
}

.stock__indicator span {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
}

.stock__chart {
    width: 80px;
    height: 80px;
    margin-left: auto;
}

.activity__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .activity__table {
        display: block;
    }
}

.activity__row {
    display: table-row;
}

@media only screen and (max-width: 767px) {
    .activity__row {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .activity__row:first-child {
        display: none;
    }
}

.activity__row:first-child .activity__col {
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

body.dark .activity__row:first-child .activity__col {
    border-color: #272B30;
}

.activity__row:not(:first-child) .activity__col {
    padding-top: 24px;
}

@media only screen and (max-width: 767px) {
    .activity__row:not(:first-child) .activity__col {
        padding: 0;
    }
}

.activity__row:not(:first-child) .activity__col:first-child {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
}

@media only screen and (max-width: 1419px) {
    .activity__row:not(:first-child) .activity__col:first-child {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1023px) {
    .activity__row:not(:first-child) .activity__col:first-child {
        font-size: 14px;
    }
}

.activity__row:nth-child(2) .activity__col {
    padding-top: 32px;
}

@media only screen and (max-width: 767px) {
    .activity__row:nth-child(2) .activity__col {
        padding-top: 0;
    }
}

@media only screen and (max-width: 767px) {
    .activity__row:not(:last-child):not(:first-child) {
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .activity__row:not(:last-child):not(:first-child) {
        border-color: #272B30;
    }
}

.activity__row:not(:last-child):not(:first-child) .activity__col {
    padding-bottom: 16px;
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .activity__row:not(:last-child):not(:first-child) .activity__col {
        padding-bottom: 0;
        border: none;
    }
}

body.dark .activity__row:not(:last-child):not(:first-child) .activity__col {
    border-color: #272B30;
}

.activity__col {
    display: table-cell;
    vertical-align: middle;
}

@media only screen and (max-width: 767px) {
    .activity__col {
        display: flex;
        align-items: center;
    }
}

.activity__col:not(:last-child) {
    padding-right: 16px;
}

@media only screen and (max-width: 767px) {
    .activity__col:not(:last-child) {
        margin-bottom: 8px;
        padding-right: 0;
    }
}

.activity__label {
    display: none;
}

@media only screen and (max-width: 767px) {
    .activity__label {
        display: block;
        flex-shrink: 0;
        width: 116px;
        padding-right: 12px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.23077;
        color: #6F767E;
    }
}

.activity__item {
    display: inline-flex;
    align-items: center;
}

.activity__counter {
    padding: 0 6px;
    border-radius: 6px;
    cursor: pointer;
}

body.dark .activity__counter {
    color: #1A1D1F;
}

.activity__counter:hover+.balance {
    visibility: visible;
    opacity: 1;
}

.activity .balance {
    margin-left: 6px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

@media only screen and (max-width: 1259px) {
    .activity .balance {
        visibility: visible;
        opacity: 1;
        font-size: 13px;
    }
}

@media only screen and (max-width: 1023px) {
    .activity .balance {
        font-size: 12px;
    }
}

.activity__nav {
    display: none;
    margin-top: 32px;
}

@media only screen and (max-width: 767px) {
    .activity__nav {
        display: flex;
    }
}

.activity__link {
    flex: 1;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

.activity__link:hover,
.activity__link.active {
    color: #1A1D1F;
}

body.dark .activity__link:hover,
body.dark .activity__link.active {
    color: #FCFCFC;
}

.activity__link.active {
    background: #EFEFEF;
}

body.dark .activity__link.active {
    background: #272B30;
}

.form {
    position: relative;
    width: 360px;
    font-family: inherit;
}

.form__input {
    width: 100%;
    height: 40px;
    padding: 0 20px 0 44px;
    background: #F4F4F4;
    border-radius: 12px;
    font-size: 0.94em;
    font-weight: 600;
    line-height: 1.6;
    font-family: inherit;
    color: #1A1D1F;
}

body.dark .form__input {
    background: #272B30;
    color: #FCFCFC;
}

.form__input::-webkit-input-placeholder {
    color: #9A9FA5;
}

.form__input::-moz-placeholder {
    color: #9A9FA5;
}

.form__input:-ms-input-placeholder {
    color: #9A9FA5;
}

.form__input::-ms-input-placeholder {
    color: #9A9FA5;
}

.form__input::placeholder {
    color: #9A9FA5;
}

.form__button {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 44px;
    padding-right: 4px;
}

.form__button .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.form__button:hover .icon {
    fill: var(--color-primary);
}

.checkbox {
    display: block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.checkbox__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.checkbox__inner {
    display: flex;
}

.checkbox__inner:hover .checkbox__tick {
    border-color: var(--color-primary);
}

.checkbox__tick {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid rgba(111, 118, 126, 0.4);
    transition: all .2s;
}

.checkbox__tick:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 17px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='12' viewBox='0 0 17 12'%3E%3Cpath d='M16.707.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0L.293 6.707A1 1 0 0 1 .735 5.02a1 1 0 0 1 .973.273l3.586 3.586a1 1 0 0 0 1.414 0L15.293.293a1 1 0 0 1 1.414 0z' fill='%23fcfcfc' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
    opacity: 0;
    transition: opacity .2s;
}

.checkbox__text {
    flex-grow: 1;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.71429;
    font-weight: 600;
    color: #1A1D1F;
}

body.dark .checkbox__text {
    color: #FCFCFC;
}

.checkbox__input:checked+.checkbox__inner .checkbox__tick {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox__input:checked+.checkbox__inner .checkbox__tick:before {
    opacity: 1;
}

.checkbox_reverse .checkbox__inner {
    flex-direction: row-reverse;
}

.checkbox_reverse .checkbox__text {
    padding: 0 16px 0 0;
}

.radio {
    display: block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.radio__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.radio__inner {
    display: flex;
}

.radio__inner:hover .radio__tick {
    border-color: var(--color-primary);
}

.radio__tick {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(111, 118, 126, 0.4);
    transition: all .2s;
}

/* 투표창 투표종료까지 크기 크게 bigButton */
.radio__box.bigButton .radio__tick{
    width: 35px;
    height: 35px;
}

.display-layer .radio__box.bigButton .radio__text {
    font-size: 22px ; 
}

.display-layer .radio__box.bigButton .query_field:not(.textarea){
    min-height: 48px ;
}


.radio__tick:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FCFCFC;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 2px #DEDEDE;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

.radio__text {
    flex-grow: 1;
    padding-right: 16px;
    padding-left: 5px;
    line-height: 1.71429;
    color: #1A1D1F;
    display: flex;
    align-items: center;
}

body.dark .radio__text {
    color: #FCFCFC;
}

.radio__input:checked+.radio__inner .radio__tick {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.radio__input:checked+.radio__inner .radio__tick:before {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.control {
    display: flex;
    align-items: center;
}

.control__button {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 24px;
    border-radius: 50%;
    background: #FCFCFC;
}

@media only screen and (max-width: 1023px) {
    .control__button {
        display: none;
    }
}

body.dark .control__button {
    background: #1A1D1F;
}

.control__button .icon {
    width: 20px;
    height: 20px;
    fill: #6F767E;
    transition: fill .2s;
}

.control__button:hover .icon {
    fill: var(--color-primary);
}

.control .actions__button {
    width: 36px;
    height: 36px;
    background: #FCFCFC;
}

body.dark .control .actions__button {
    background: #1A1D1F;
}

.control .actions__button:hover .icon {
    fill: var(--color-primary);
}

.control .actions__button .icon {
    fill: #6F767E;
}

.control .actions.active .actions__button {
    background: #FCFCFC;
}

body.dark .control .actions.active .actions__button {
    background: #1A1D1F;
}

.control .actions__body:before {
    right: 19px;
}

body.dark .control .actions__body:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23111315'/%3E%3C/svg%3E");
}

.control .actions__option:first-child,
.control .actions__option:nth-child(2) {
    display: none;
}

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

    .control .actions__option:first-child,
    .control .actions__option:nth-child(2) {
        display: flex;
    }
}

.products__head {
    display: flex;
    align-items: center;
    margin-bottom: 44px;
}

@media only screen and (max-width: 1023px) {
    .products__head {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .products__head {
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 1419px) {
    .products__head .form {
        width: 300px;
    }
}

@media only screen and (max-width: 1023px) {
    .products__head .form {
        width: 250px;
    }
}

@media only screen and (max-width: 767px) {
    .products__head .form {
        width: 100%;
        margin: 16px 0 0;
    }
}

.products__title {
    margin-right: 24px;
}

@media only screen and (max-width: 767px) {
    .products__title {
        margin-right: 0;
    }
}

.products__indicators {
    display: none;
    align-items: center;
}

@media only screen and (max-width: 1023px) {
    .products__indicators {
        display: none;
    }
}

.products__indicators .products__button {
    margin-right: 8px;
}

.products__counter {
    margin-left: 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.84615;
}

.products__select {
    min-width: 154px;
    margin-left: auto;
}

@media only screen and (max-width: 767px) {
    .products__select {
        width: 100%;
        margin-top: 16px;
    }
}

@media only screen and (max-width: 767px) {
    body.dark .products__select .select {
        background: #272B30;
        box-shadow: inset 0 0 0 2px #272B30;
        color: #FCFCFC;
    }
}

.products__nav {
    display: flex;
    margin-left: auto;
}

@media only screen and (max-width: 1023px) {
    .products__nav {
        display: none;
    }
}

.products__link {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
    font-family: inherit;
}

.products__link:hover,
.products__link.active {
    color: #1A1D1F;
}

body.dark .products__link:hover,
body.dark .products__link.active {
    color: #FCFCFC;
}

.products__link.active {
    background: #EFEFEF;
}

body.dark .products__link.active {
    background: #272B30;
}

.products__link:not(:last-child) {
    margin-right: 8px;
}

.products__tab {
    display: none;
}

.products__wrapper {
    margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
    .products__wrapper {
        margin: 0;
    }
}

.products__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 1023px) {
    .products__table {
        display: block;
    }
}

.products__row {
    display: table-row;
}

@media only screen and (max-width: 1023px) {
    .products__row {
        position: relative;
        display: block;
    }
}

@media only screen and (max-width: 1023px) {
    .products__row:first-child {
        display: none;
    }
}

.products__row:first-child .products__col {
    padding: 0 12px 16px;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.products__row:not(:first-child) {
    transition: background .2s;
}

.products__row:not(:first-child) .products__col:not(:first-child):not(:nth-child(2)) {
    padding-top: 20px;
}

@media only screen and (max-width: 1023px) {
    .products__row:not(:first-child) .products__col:not(:first-child):not(:nth-child(2)) {
        padding-top: 0;
    }
}

@media only screen and (min-width: 1024px) {
    .products__row:not(:first-child):hover {
        background: #F4F4F4;
    }

    body.dark .products__row:not(:first-child):hover {
        background: #272B30;
    }

    .products__row:not(:first-child):hover .products__number,
    .products__row:not(:first-child):hover .products__status {
        background: #FCFCFC;
    }

    body.dark .products__row:not(:first-child):hover .products__number {
        background: #33383F;
    }

    body.dark .products__row:not(:first-child):hover .products__status {
        background: #1A1D1F;
    }

    .products__row:not(:first-child):hover .control {
        visibility: visible;
        opacity: 1;
    }
}

@media only screen and (max-width: 1023px) {
    .products__row:not(:last-child) {
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .products__row:not(:last-child) {
        border-color: #272B30;
    }
}

.products__col {
    position: relative;
    display: table-cell;
    padding: 16px 12px;
    vertical-align: top;
    color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
    .products__col {
        position: static;
        display: flex;
        align-items: center;
        padding: 0;
    }
}

body.dark .products__col {
    color: #FCFCFC;
}

.products__col:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #EFEFEF;
}

body.dark .products__col:after {
    background: #272B30;
}

@media only screen and (max-width: 1023px) {
    .products__col:after {
        display: none;
    }
}

.products__col:first-child {
    width: 56px;
    border-radius: 8px 0 0 8px;
    font-size: 0;
}

@media only screen and (max-width: 1023px) {
    .products__col:first-child {
        display: none;
    }
}

.products__col:first-child:after {
    left: 12px;
}

@media only screen and (max-width: 1023px) {
    .products__col:nth-child(4) {
        display: none;
    }
}

.products__col:last-child {
    border-radius: 0 8px 8px 0;
}

.products__col:last-child:after {
    right: 12px;
}

@media only screen and (max-width: 1023px) {
    .products__col:not(:first-child):not(:last-child) {
        margin-bottom: 12px;
    }
}

.products__item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #1A1D1F;
    transition: color .2s;
}

@media only screen and (max-width: 767px) {
    .products__item {
        align-items: stretch;
    }
}

body.dark .products__item {
    color: #FCFCFC;
}

.products__item:hover {
    color: var(--color-primary);
}

body.dark .products__item:hover {
    color: var(--color-primary);
}

.products__preview {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

@media only screen and (max-width: 1023px) {
    .products__preview {
        width: 104px;
    }
}

.products__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.products__subtitle {
    max-width: 170px;
    margin-bottom: 4px;
}

@media only screen and (max-width: 1023px) {
    .products__subtitle {
        max-width: 100%;
        margin-bottom: 8px;
        padding-right: 42px;
        font-size: 18px;
        line-height: 1.33333;
        letter-spacing: -0.02em;
    }
}

@media only screen and (max-width: 1023px) {
    .products__wrap {
        display: flex;
        align-items: center;
    }
}

.products__category {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

@media only screen and (max-width: 1023px) {
    .products__category {
        font-size: 15px;
    }
}

body.dark .products__category {
    color: #9A9FA5;
}

.products__sales {
    display: inline-flex;
    align-items: center;
}

.products__number,
.products__price {
    display: inline-block;
    padding: 0 8px;
    border-radius: 6px;
    background: #EFEFEF;
    transition: background .2s;
}

body.dark .products__number,
body.dark .products__price {
    background: #33383F;
    color: #FCFCFC;
}

.products__price {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .products__price {
        display: inline-block;
        margin-right: 12px;
    }
}

.products .balance {
    margin-left: 8px;
}

.products__box {
    display: flex;
    align-items: center;
}

.products__line {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 8px;
    margin-left: 8px;
}

@media only screen and (max-width: 1259px) {
    .products__line {
        width: 36px;
    }
}

@media only screen and (max-width: 1023px) {
    .products__line {
        width: 44px;
    }
}

.products__progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 2px;
}

.products__progress_views {
    background: var(--color-primary);
}

.products__progress_likes {
    background: #8E59FF;
}

.products__status {
    transition: background .2s;
}

.products .control {
    position: absolute;
    left: 12px;
    bottom: 16px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

@media only screen and (max-width: 1023px) {
    .products .control {
        top: 0;
        left: auto;
        right: 0;
        bottom: auto;
        visibility: visible;
        opacity: 1;
    }
}

.products__label {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .products__label {
        display: block;
        flex-shrink: 0;
        width: 124px;
        padding-right: 20px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.23077;
        color: #6F767E;
    }
}

.products__foot {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.products__arrow {
    width: 40px;
    height: 40px;
    border: 2px solid #EFEFEF;
    border-radius: 50%;
    transition: border-color .2s;
}

body.dark .products__arrow {
    border-color: transparent;
}

.products__arrow .icon {
    width: 20px;
    height: 20px;
    fill: #6F767E;
    transition: fill .2s;
}

.products__arrow:hover {
    border-color: #EFEFEF;
}

.products__arrow:hover .icon {
    fill: #1A1D1F;
}

body.dark .products__arrow:hover {
    border-color: #272B30;
}

body.dark .products__arrow:hover .icon {
    fill: #FCFCFC;
}

.products__arrow:not(:last-child) {
    margin-right: 8px;
}

.statistics__wrapper {
    margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
    .statistics__wrapper {
        margin: 0;
    }
}

.statistics__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 1023px) {
    .statistics__table {
        display: block;
    }
}

.statistics__row {
    display: table-row;
}

@media only screen and (max-width: 1023px) {
    .statistics__row {
        display: block;
    }
}

@media only screen and (max-width: 1023px) {
    .statistics__row:first-child {
        margin-bottom: 24px;
    }
}

.statistics__row:first-child .statistics__col {
    padding: 0 12px 16px;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

@media only screen and (max-width: 1023px) {
    .statistics__row:first-child .statistics__col {
        padding: 0;
    }
}

@media only screen and (max-width: 1023px) {
    .statistics__row:first-child .statistics__col:nth-child(2) {
        display: none;
    }
}

.statistics__row:not(:first-child) {
    transition: background .2s;
}

@media only screen and (max-width: 1023px) {
    .statistics__row:not(:first-child) {
        position: relative;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .statistics__row:not(:first-child) {
        border-color: #272B30;
    }
}

@media only screen and (min-width: 1024px) {
    .statistics__row:not(:first-child):hover {
        background: #F4F4F4;
    }

    body.dark .statistics__row:not(:first-child):hover {
        background: #272B30;
    }

    .statistics__row:not(:first-child):hover .control {
        visibility: visible;
        opacity: 1;
    }
}

.statistics__col {
    position: relative;
    display: table-cell;
    vertical-align: top;
    padding: 16px 12px;
    color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
    .statistics__col {
        position: static;
        display: block;
        padding: 0;
    }
}

.statistics__col:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #EFEFEF;
}

body.dark .statistics__col:after {
    background: #272B30;
}

@media only screen and (max-width: 1023px) {
    .statistics__col:after {
        display: none;
    }
}

.statistics__col:first-child {
    width: 56px;
    border-radius: 8px 0 0 8px;
    font-size: 0;
}

@media only screen and (max-width: 1023px) {
    .statistics__col:first-child {
        display: none;
    }
}

.statistics__col:first-child:after {
    left: 12px;
}

.statistics__col:nth-child(2) {
    width: 300px;
}

@media only screen and (max-width: 1023px) {
    .statistics__col:nth-child(2) {
        width: 100%;
    }
}

.statistics__col:last-child {
    border-radius: 0 8px 8px 0;
}

.statistics__col:last-child:after {
    right: 12px;
}

.statistics__control {
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 1023px) {
    .statistics__control {
        display: block;
    }
}

.statistics__info {
    margin-right: auto;
}

@media only screen and (max-width: 1023px) {
    .statistics__info {
        display: none;
    }
}

.statistics__indicators {
    display: flex;
    flex-wrap: wrap;
    margin: -8px 0 0 -24px;
}

@media only screen and (max-width: 1419px) {
    .statistics__indicators {
        margin-left: -12px;
    }
}

@media only screen and (max-width: 1023px) {
    .statistics__indicators {
        margin-left: -24px;
    }
}

.statistics__indicators .statistics__legend {
    position: relative;
    margin: 8px 0 0 24px;
    padding-left: 24px;
}

@media only screen and (max-width: 1419px) {
    .statistics__indicators .statistics__legend {
        margin-left: 12px;
    }
}

@media only screen and (max-width: 1259px) {
    .statistics__indicators .statistics__legend {
        padding-left: 18px;
    }
}

@media only screen and (max-width: 1023px) {
    .statistics__indicators .statistics__legend {
        margin-left: 24px;
        padding-left: 24px;
    }
}

.statistics__indicators .statistics__color {
    position: absolute;
    top: 2px;
    left: 0;
}

.statistics__color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.statistics__item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #1A1D1F;
    transition: color .2s;
}

@media only screen and (max-width: 767px) {
    .statistics__item {
        align-items: stretch;
    }
}

body.dark .statistics__item {
    color: #FCFCFC;
}

.statistics__item:hover {
    color: var(--color-primary);
}

body.dark .statistics__item:hover {
    color: var(--color-primary);
}

.statistics__preview {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

@media only screen and (max-width: 1023px) {
    .statistics__preview {
        width: 104px;
    }
}

.statistics__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.statistics__product {
    max-width: 170px;
    margin-bottom: 4px;
}

@media only screen and (max-width: 1023px) {
    .statistics__product {
        max-width: 100%;
        margin-bottom: 8px;
        padding-right: 42px;
        font-size: 18px;
        line-height: 1.33333;
        letter-spacing: -0.02em;
    }
}

.statistics__date {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.statistics__line {
    display: flex;
    margin: 11px 0 0 -1px;
}

@media only screen and (max-width: 1023px) {
    .statistics__line {
        margin-top: 20px;
    }
}

.statistics__box {
    position: relative;
    height: 12px;
    margin-left: 1px;
    border-radius: 2px;
    cursor: pointer;
}

.statistics__box:hover .statistics__tooltip {
    visibility: visible;
    opacity: 1;
}

.statistics__tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 8px;
    background: #272B30;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 0px 1px #000000;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
    visibility: hidden;
    opacity: 0;
    transition: .2s;
}

.statistics__subtitle {
    margin-bottom: 8px;
    white-space: nowrap;
    color: #EFEFEF;
}

.statistics__tooltip .statistics__legend {
    display: flex;
    align-items: center;
    color: #FCFCFC;
}

.statistics__tooltip .statistics__color {
    flex-shrink: 0;
    margin-right: 4px;
}

.statistics .control {
    position: absolute;
    left: 12px;
    bottom: 16px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

@media only screen and (max-width: 1023px) {
    .statistics .control {
        top: 0;
        left: auto;
        right: 0;
        bottom: auto;
        visibility: visible;
        opacity: 1;
    }
}

.statistics__foot {
    margin-top: 20px;
    text-align: center;
}

@media only screen and (max-width: 1023px) {
    .statistics__foot {
        margin-top: 0;
    }
}

.switch {
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 0;
}

.switch__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.switch__input:checked+.switch__inner .switch__box {
    background: var(--color-primary);
}

.switch__input:checked+.switch__inner .switch__box:before {
    -webkit-transform: translate(24px, -50%);
    transform: translate(24px, -50%);
    background: #FCFCFC;
}

.switch__inner {
    position: relative;
    display: inline-block;
    transition: all .2s;
}

.switch__box {
    position: relative;
    display: block;
    width: 48px;
    height: 24px;
    background: #F4F4F4;
    border-radius: 12px;
    transition: all .2s;
}

body.dark .switch__box {
    background: #111315;
}

.switch__box:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FCFCFC;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1);
    transition: all .2s;
}

body.dark .switch__box:before {
    background: #272B30;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 1px 2px rgba(255, 255, 255, 0.1), inset 0px -1px 1px rgba(0, 0, 0, 0.1);
}

.field__label {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #33383F;
}

body.dark .field__label {
    color: #EFEFEF;
}

.field .tooltip {
    position: relative;
    top: -1px;
}

.field .tooltip .icon {
    fill: #9A9FA5;
}

.field__wrap {
    position: relative;
}

.field__input {
    width: 100%;
    height: var(--sp-input-height, 44px);
    padding: 0 12px;
    border-radius: var(--sp-radius-md, 8px);
    border: 1.5px solid var(--sp-color-neutral-200, #DFE3EA);
    font-size: var(--sp-text-body, 14px);
    font-weight: 500;
    font-family: inherit;
    line-height: 1.6;
    color: #1A1D1F;
    transition: border-color var(--sp-motion-fast, 120ms) ease, box-shadow var(--sp-motion-fast, 120ms) ease;
}

.field__input[disabled] {
    background: #cecece !important;
}

.field__input[readonly] {
    background: #ececec;
}

body.dark .field__input {
    border-color: #272B30;
    background: #272B30;
    color: #FCFCFC;
}

.field__input::-webkit-input-placeholder {
    color: #6F767E;
}

.field__input::-moz-placeholder {
    color: #6F767E;
}

.field__input:-ms-input-placeholder {
    color: #6F767E;
}

.field__input::-ms-input-placeholder {
    color: #6F767E;
}

.field__input::placeholder {
    color: #6F767E;
}

body.dark .field__input::-webkit-input-placeholder {
    color: #9A9FA5;
}

body.dark .field__input::-moz-placeholder {
    color: #9A9FA5;
}

body.dark .field__input:-ms-input-placeholder {
    color: #9A9FA5;
}

body.dark .field__input::-ms-input-placeholder {
    color: #9A9FA5;
}

body.dark .field__input::placeholder {
    color: #9A9FA5;
}

.field__input:focus {
    border-color: var(--sp-color-primary-500, #1A6FA6);
    box-shadow: var(--sp-focus-ring, 0 0 0 3px rgba(26,111,166,0.12));
    outline: none;
}

body.dark .field__input:focus {
    border-color: #33383F;
    background: #111315;
}

.select__input > input[readonly]:focus {
    width: 100%;
    height: var(--sp-input-height, 44px);
    padding: 0 12px;
    border-radius: var(--sp-radius-md, 8px);
    border: 1.5px solid var(--sp-color-primary-500, #1A6FA6);
    font-size: var(--sp-text-body, 14px);
    font-weight: 500;
    line-height: 1.6;
    color: #1A1D1F;
    transition: border-color var(--sp-motion-fast, 120ms) ease;
}

.field__icon,
.field__copy {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
}

.field__icon .icon,
.field__copy .icon {
    width: 24px;
    height: 24px;
}

.field__icon {
    left: 0;
    pointer-events: none;
}

.field__icon .icon {
    fill: #6F767E;
}

.field__copy {
    right: 0;
}

.field__copy .icon {
    fill: #6F767E;
    transition: fill .2s;
}

.field__copy:hover .icon {
    fill: var(--color-primary);
}

.field__currency {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    padding-top: 1px;
    border-radius: 10px 0 0 10px;
    background: #F4F4F4;
    color: #1A1D1F;
}

body.dark .field__currency {
    background: #272B30;
    color: #6F767E;
}

.field_icon .field__input {
    padding-left: 48px;
}

.field_currency .field__input {
    padding-left: 58px;
    background: none;
    border-color: #EFEFEF;
}

.field_currency .field__input:focus {
    border-color: #9A9FA5;
}

body.dark .field_currency .field__input {
    border-color: #272B30;
}

body.dark .field_currency .field__input:focus {
    border-color: #33383F;
}

.field_copy .field__input {
    padding-right: 48px;
}

.field.error .field__icon .icon {
    fill: #FF6A55;
}

.field.error .field__wrap:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a1 1 0 0 0 1-1V9a1 1 0 1 0-2 0v5a1 1 0 0 0 1 1zm7.675 2.504L12.87 5.563a1 1 0 0 0-1.738 0L4.327 17.504A1 1 0 0 0 5.196 19h13.61a1 1 0 0 0 .869-1.495zM14.607 4.573c-1.151-2.019-4.062-2.019-5.213 0L2.589 16.514C1.45 18.514 2.894 21 5.196 21h13.61c2.302 0 3.746-2.486 2.606-4.485L14.607 4.573z' fill-rule='evenodd' fill='%23ff6a55'/%3E%3Cpath d='M13 17a1 1 0 1 1-2 0 1 1 0 1 1 2 0z' fill='%23ff6a55'/%3E%3C/svg%3E") no-repeat 50% 50%/24px auto;
}

.field.error .field__input {
    padding-right: 48px;
    background: rgba(255, 188, 153, 0.25);
    border-color: transparent;
    color: #FF6A55;
}

body.dark .field.error .field__input:focus {
    border-color: #FF6A55;
    color: #FF6A55;
}

.field.error .field__input::-webkit-input-placeholder {
    color: #FF6A55;
}

.field.error .field__input::-moz-placeholder {
    color: #FF6A55;
}

.field.error .field__input:-ms-input-placeholder {
    color: #FF6A55;
}

.field.error .field__input::-ms-input-placeholder {
    color: #FF6A55;
}

.field.error .field__input::placeholder {
    color: #FF6A55;
}

.field.success .field__wrap:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.707 6.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0l-3.586-3.586a1 1 0 0 1 1.414-1.414l3.586 3.586a1 1 0 0 0 1.414 0l8.586-8.586a1 1 0 0 1 1.414 0z' fill='%2383bf6e'/%3E%3C/svg%3E") no-repeat 50% 50%/24px auto;
}

.field.success .field__input {
    padding-right: 48px;
    background: #FFFFFF;
    border-color: #9A9FA5;
}

body.dark .field.success .field__input {
    background: #111315;
}

.file__label {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #33383F;
}

body.dark .file__label {
    color: #EFEFEF;
}

.file .tooltip {
    position: relative;
    top: -1px;
}

.file .tooltip .icon {
    fill: #9A9FA5;
}

.file__wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border-radius: 12px;
    background: #F4F4F4;
    overflow: hidden;
}

body.dark .file__wrap {
    background: #272B30;
}

.file__input {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 340px;
    opacity: 0;
}

.file__input:hover+.file__box {
    border-color: #6F767E;
}

body.dark .file__input:hover+.file__box {
    border-color: #33383F;
}

.file__box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    padding: 0 20px;
    border: 2px solid #EFEFEF;
    border-radius: 12px;
    background: #FCFCFC;
    box-shadow: 0px 12px 13px -6px rgba(0, 0, 0, 0.04);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    transition: border-color .2s;
}

body.dark .file__box {
    background: #1A1D1F;
    border-color: #272B30;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 12px 13px -6px rgba(0, 0, 0, 0.04), inset 0px 2px 4px #31353B;
}

.file__box .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

body.dark .file__box .icon {
    fill: #FCFCFC;
}

.create__row {
    display: flex;
}

@media only screen and (max-width: 1023px) {
    .create__row {
        display: block;
    }
}

.create__col:first-child {
    flex: 0 0 calc(100% - 340px);
    width: calc(100% - 340px);
    padding-right: 8px;
}

@media only screen and (max-width: 1259px) {
    .create__col:first-child {
        flex: 0 0 calc(100% - 296px);
        width: calc(100% - 296px);
    }
}

@media only screen and (max-width: 1023px) {
    .create__col:first-child {
        width: 100%;
        padding: 0;
    }
}

.create__col:nth-child(2) {
    flex-shrink: 0;
    width: 340px;
}

@media only screen and (max-width: 1259px) {
    .create__col:nth-child(2) {
        width: 296px;
    }
}

@media only screen and (max-width: 1023px) {
    .create__col:nth-child(2) {
        width: auto;
    }
}

.create__card:not(:last-child) {
    margin-bottom: 8px;
}

.create .card__button .icon {
    width: 24px;
    height: 24px;
}

.create__card>.field:not(:last-child),
.create .editor:not(:last-child),
.create .file:not(:last-child) {
    margin-bottom: 32px;
}

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

    .create__card>.field:not(:last-child),
    .create .editor:not(:last-child),
    .create .file:not(:last-child) {
        margin-bottom: 24px;
    }
}

.create__group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 0 -6px -12px;
}

@media only screen and (max-width: 767px) {
    .create__group {
        display: block;
        margin: 0;
    }
}

.create__group .field {
    flex: 0 0 calc(50% - 12px);
    width: calc(50% - 12px);
    margin: 0 6px 12px;
}

@media only screen and (max-width: 767px) {
    .create__group .field {
        width: 100%;
        margin: 12px 0 0;
    }
}

.create__line {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .create__line {
    border-color: #272B30;
}

.create__info {
    margin-right: auto;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #33383F;
}

body.dark .create__info {
    color: #EFEFEF;
}

.create .tooltip {
    position: relative;
    top: -1;
}

.create .tooltip .icon {
    fill: #9A9FA5;
}

.create .switch {
    margin-left: 12px;
}

.create__fieldset {
    display: flex;
    margin: 0 -6px;
}

.create__fieldset .field {
    flex: 0 0 calc(50% - 12px);
    width: calc(50% - 12px);
    margin: 0 6px;
}

.create__fieldset .field__label {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.33333;
    font-weight: 700;
    color: #6F767E;
}

.create__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #33383F;
}

body.dark .create__label {
    color: #EFEFEF;
}

.create__list {
    display: flex;
    flex-wrap: wrap;
    margin: -4px -16px 32px 0;
}

@media only screen and (max-width: 1259px) {
    .create__list {
        margin-bottom: 24px;
    }
}

.create__list .checkbox {
    flex: 0 0 calc(33.33% - 16px);
    width: calc(33.33% - 16px);
    margin: 16px 16px 0 0;
}

@media only screen and (max-width: 767px) {
    .create__list .checkbox {
        flex: 0 0 calc(50% - 16px);
        width: calc(50% - 16px);
    }
}

.create__top {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.create__top .create__label {
    margin-right: auto;
}

.create__counter {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.23077;
    color: #9A9FA5;
}

.create__counter span {
    color: #1A1D1F;
}

body.dark .create__counter span {
    color: #FCFCFC;
}

.create__preview {
    position: sticky;
    top: 102px;
}

@media only screen and (max-width: 1339px) {
    .create__preview {
        top: 86px;
    }
}

@media only screen and (max-width: 1023px) {
    .create__preview {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        padding: 64px 16px;
        overflow: auto;
        background: #F4F4F4;
        visibility: hidden;
        opacity: 0;
        transition: all .2s;
    }

    body.dark .create__preview {
        background: #111315;
    }

    .create__preview.visible {
        visibility: visible;
        opacity: 1;
    }
}

@media only screen and (max-width: 1259px) {
    .create__preview .card {
        padding: 16px;
    }
}

@media only screen and (max-width: 1023px) {
    .create__preview .card {
        max-width: 340px;
        margin: auto;
    }
}

.create__preview .card__head {
    margin-bottom: 24px;
}

.create__close {
    position: absolute;
    top: 32px;
    left: 32px;
    display: none;
}

@media only screen and (max-width: 1023px) {
    .create__close {
        display: inline-block;
    }
}

.create__close .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
}

.create__photo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.create__photo img {
    width: 100%;
    border-radius: 12px;
}

.create__flex {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}

.create__subtitle {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .create__subtitle {
        font-size: 18px;
    }
}

.create__price {
    flex-shrink: 0;
    margin-left: 12px;
    padding: 0 8px;
    background: #B5E4CA;
    border-radius: 6px;
    line-height: 32px;
    font-weight: 700;
}

body.dark .create__price {
    color: #1A1D1F;
}

.create__user {
    display: flex;
    align-items: center;
}

.create__avatar {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

.create__avatar>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.create__text {
    font-weight: 500;
    color: #6F767E;
}

.create__text span {
    font-weight: 600;
    color: #1A1D1F;
}

body.dark .create__text span {
    color: #FCFCFC;
}

.panel {
    position: relative;
    display: flex;
    align-items: center;
    margin: auto -40px -40px;
    padding: 60px 40px 20px;
}

@media only screen and (max-width: 1339px) {
    .panel {
        margin: auto -24px -32px;
        padding: 44px 24px 20px;
    }
}

@media only screen and (max-width: 767px) {
    .panel {
        display: block;
        margin: auto -16px -24px;
        padding: 40px 16px 16px;
    }
}

.panel:before {
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #FCFCFC;
    box-shadow: inset 1px 0px 0px #F4F4F4;
}

@media only screen and (max-width: 1339px) {
    .panel:before {
        top: 24px;
    }
}

body.dark .panel:before {
    background: #1A1D1F;
    box-shadow: inset 1px 0px 0px #111315;
}

.panel__info {
    margin-right: auto;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

@media only screen and (max-width: 767px) {
    .panel__info {
        margin: 0 0 24px;
    }
}

.panel__info .icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    fill: #6F767E;
}

.panel__info span {
    color: #1A1D1F;
}

body.dark .panel__info span {
    color: #FCFCFC;
}

.panel__note {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    background: #272B30;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    color: #F4F4F4;
}

.panel__note>.icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    fill: #83BF6E;
}

.panel__note span {
    position: relative;
    top: -2px;
    margin-left: 4px;
}

.panel .close {
    margin-left: 20px;
}

.panel .close .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.panel .close:hover .icon {
    fill: #FCFCFC;
}

.panel__btns {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.panel__btns .panel__button {
    margin-right: 8px;
}

@media only screen and (max-width: 767px) {
    .panel__btns .panel__button {
        flex-grow: 1;
    }
}

.panel__btns .panel__button .icon {
    width: 24px;
    height: 24px;
}

.panel .actions__button {
    width: 48px;
    height: 48px;
    border: 2px solid #EFEFEF;
    border-radius: 12px;
    transition: all .2s;
}

.panel .actions__button .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    fill: #6F767E;
}

.panel .actions__button:hover {
    background: #EFEFEF;
}

.panel .actions__button:hover .icon {
    fill: #1A1D1F;
}

body.dark .panel .actions__button {
    border-color: #272B30;
    background: transparent;
}

.panel .actions__option:first-child {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .panel .actions__option:first-child {
        display: flex;
    }
}

.panel .actions__body {
    right: 0;
}

.panel .actions__body:before {
    right: 14px;
}

.loader {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    font-size: 4px;
    -webkit-animation: loader 1.1s infinite ease;
    animation: loader 1.1s infinite ease;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

body.dark .loader {
    -webkit-animation-name: loader-white;
    animation-name: loader-white;
}

.loader_white {
    -webkit-animation-name: loader-white;
    animation-name: loader-white;
}

@-webkit-keyframes loader {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #777e90, 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.5), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.7), 1.8em -1.8em 0 0em #777e90, 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.5), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7), 2.5em 0em 0 0em #777e90, 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5), 2.5em 0em 0 0em rgba(119, 126, 144, 0.7), 1.75em 1.75em 0 0em #777e90, 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.5), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.7), 0em 2.5em 0 0em #777e90, -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.5), 0em 2.5em 0 0em rgba(119, 126, 144, 0.7), -1.8em 1.8em 0 0em #777e90, -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.5), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.7), -2.6em 0em 0 0em #777e90, -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.5), -2.6em 0em 0 0em rgba(119, 126, 144, 0.7), -1.8em -1.8em 0 0em #777e90;
    }
}

@keyframes loader {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #777e90, 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.5), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.7), 1.8em -1.8em 0 0em #777e90, 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.5), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7), 2.5em 0em 0 0em #777e90, 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5), 2.5em 0em 0 0em rgba(119, 126, 144, 0.7), 1.75em 1.75em 0 0em #777e90, 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.5), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.7), 0em 2.5em 0 0em #777e90, -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.5), 0em 2.5em 0 0em rgba(119, 126, 144, 0.7), -1.8em 1.8em 0 0em #777e90, -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.5), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.7), -2.6em 0em 0 0em #777e90, -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.5), -2.6em 0em 0 0em rgba(119, 126, 144, 0.7), -1.8em -1.8em 0 0em #777e90;
    }
}

@-webkit-keyframes loader-white {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
}

@keyframes loader-white {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
}

.schedule__wrapper {
    margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
    .schedule__wrapper {
        margin: 0;
    }
}

.schedule__table {
    display: table;
    width: 100%;
}

.org__table {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.org__body {
    /* height: calc(100% - 33px); */
    /* overflow: hidden; */
    height: 500px;
}

.select__userlist.type2 .org__body {
    height: calc(100% - 60px);
}

.org__list {
    height: calc(100% - 134px);
    margin-bottom: 10px;
}

.org__list.group__popup {
    height: calc(100% - 78px);
    margin-bottom: 10px;
}

@media only screen and (max-width: 1023px) {
    .schedule__table {
        display: block;
        height: auto;
    }
}

.schedule__row {
    display: table-row;
}

body.dark .schedule__row.selected {
    background: #272B30;
}

.schedule__row.selected {
    background: #f4f4f4;
}

.schedule__row.selected .schedule__item {
    color: #2196f3;
}

.org__row {
    display: flex;
    transition: all ease 0.2s;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    border-bottom: 1px solid #EFEFEF;
}

.org__row:hover {
    background: #F4F4F4;
    cursor: pointer;
}

.org__row.selected {
    background: rgb(228 247 255);
}

body.dark .org__row:hover {
    background: #47494a;
}
body.dark .org__row {
    border-bottom: 1px solid #2a2a2a;    
}

body.dark .org__row.selected {
    background: #686868;
}
.org__row--dragging {
    opacity: 0.8;
    background: #e3f2fd !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
}
body.dark .org__row--dragging {
    background: #37474f !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.org__row--placeholder {
    background: #bbdefb;
    border: 2px dashed #2196f3;
    border-radius: 8px;
    visibility: visible !important;
}
body.dark .org__row--placeholder {
    background: #263238;
    border-color: #42a5f5;
}
body.dark .icon.icon-lock.conf-board-icon2 {
    fill: var(--sp-color-neutral-300, #C8CED8);
}

body.dark .file-upload .file-select,
body.dark .file-upload .file-select .file-select-button {
    background-color: #272B30;
    color: #fff;
    border:none;
}

body.dark .paginationjs .paginationjs-pages li>a:hover,
body.dark .paginationjs .paginationjs-pages li>a {
    background: #58595b;
    color: #fff;
}

body.dark .paginationjs .paginationjs-pages li.active>a {
    background: var(--color-primary);
}


@media only screen and (max-width: 1023px) {
    .schedule__row:first-child {
        display: none;
    }
}

.schedule__row:first-child .schedule__col {
    padding: 0 12px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
    font-size: 1.1em;
    white-space: nowrap;
}

.schedule__row:not(:first-child) {
    transition: background .2s;
}

@media only screen and (max-width: 1023px) {
    .schedule__row:not(:first-child) {
        position: relative;
        display: block;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .schedule__row:not(:first-child) {
        border-color: #272B30;
    }
}

@media only screen and (min-width: 1260px) {
    .schedule__row:not(:first-child):hover {
        /*background: #F4F4F4;*/
    }

    body.dark .schedule__row:not(:first-child):hover {
        background: #272B30;
    }

    .schedule__row:not(:first-child):hover .schedule__control {
        visibility: visible;
        opacity: 1;
    }
}

.schedule__col {
    position: relative;
    display: table-cell;
    padding: 16px 12px;
    vertical-align: middle;
    color: #1A1D1F;
    font-size: 1.1em;
    overflow-wrap: break-word;
    word-break: break-word;
}

.org__col {
    position: relative;
    display: table-cell;
    padding: 13px 12px;
    vertical-align: middle;
    color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
    .schedule__col {
        display: block;
        position: static;
        padding: 0;
    }
}

.schedule__col:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #EFEFEF;
}

body.dark .schedule__col:after {
    background: #272B30;
}

@media only screen and (max-width: 1023px) {
    .schedule__col:after {
        display: none;
    }
}

.schedule__col:not(.not-first):first-child {
    width: 56px;
    border-radius: 8px 0 0 8px;
    font-size: 0;
}

.schedule__col.not-first:first-child {
    width: 0px;
}

.schedule__col.not-first:first-child:after {
    display:none;
}

@media only screen and (max-width: 1023px) {
    .schedule__col:first-child {
        display: none;
    }

    .products__table.no-first .schedule__col:first-child {
        display: table-cell;
    }
}

.products__table.no-first .schedule__col:first-child {
    width: unset;
    border-radius: unset;
    font-size: unset;
}

.schedule__col:not(.not-first):first-child:after {
    left: 12px;
}

.schedule__col:last-child {
    padding-right: 164px;
    border-radius: 0 8px 8px 0;
    /*color: #6F767E;*/
}

@media only screen and (max-width: 1023px) {
    .schedule__col:last-child {
        padding: 0;
    }
}

.schedule__col:last-child:after {
    right: 12px;
}

@media only screen and (max-width: 1023px) {
    .schedule__col:nth-child(1) {
        display: none !important;
    }
}

.schedule__item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color .2s;
}

.org__item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color .2s;
}

@media only screen and (max-width: 1024px) {
    .schedule__item {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        /* padding: 20px; */
    }
}

body.dark .schedule__item {
    color: #FCFCFC;
}

.schedule__item:hover {
    color: var(--color-primary);
}

body.dark .schedule__date {
    color: #FCFCFC;
}

.schedule__item .schedule__price,
.schedule__item .schedule__empty,
.schedule__item .schedule__date {
    display: none;
}

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

    .schedule__item .schedule__price,
    .schedule__item .schedule__empty {
        display: inline-block;
    }
}

@media only screen and (max-width: 1023px) {
    .schedule__item .schedule__date {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.23077;
        color: #9A9FA5;
    }

    .schedule__item .schedule__date .icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        fill: #9A9FA5;
    }
}

.schedule__preview {
    flex-shrink: 0;
    width: 160px;
    height: 100px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.org__icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    margin-right: 12px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.org__icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media only screen and (max-width: 1023px) {
    .schedule__preview {
        width: 104px;
        height: 116px;
    }
}

.schedule__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.schedule__product {
    /* max-width: 170px; */
    margin-bottom: 4px;
    width: 100%;
    font-weight: 700;
}

@media only screen and (max-width: 1023px) {
    .schedule__product {
        max-width: 100%;
        margin-bottom: 8px;
        padding-right: 60px;
        font-size: 18px;
        line-height: 1.33333;
        letter-spacing: -0.02em;
    }
}

.schedule__link {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media only screen and (max-width: 1023px) {
    .schedule__link {
        display: none;
    }
}

.schedule__price,
.schedule__empty {
    flex-shrink: 0;
    display: inline-block;
    padding: 0 8px;
    border-radius: 6px;
    line-height: 32px;
    font-weight: 700;
}

.schedule__price {
    background: #B5E4CA;
}

body.dark .schedule__price {
    color: #1A1D1F;
}

.schedule__empty {
    background: #EFEFEF;
}

body.dark .schedule__empty {
    background: #272B30;
    color: #FCFCFC;
}

.schedule__control {
    display: flex;
    align-items: center;
    
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-100%, -50%);
    /* -webkit-transform: translateY(-50%); */
    
    transition: all .2s;
}

.minutes__item .schedule__control{
    display: none;
}

[p-select="vote-list-active"] img{
    width: 100%;
    cursor: pointer;
}

@media only screen and (max-width: 1259px) {
    .schedule__control {
        visibility: visible;
        opacity: 1;
    }
}

@media only screen and (max-width: 1023px) {
    .schedule__control {
        /* display: none; */
    }
}

.schedule__control .schedule__button {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FCFCFC;
}

body.dark .schedule__control .schedule__button.with__label {
    background: none;
}

.schedule__control .schedule__button.with__label {
    width: auto;
    border-radius: 0;
    background: transparent;
}

.action__label {
    white-space: nowrap;
    font-size: 1.15em;
    letter-spacing: -0.03em;
    font-weight: 500;
    transition: all ease .2s;
}

body.dark .action__label {
    color: #fff;
}

@media only screen and (max-width: 1259px) {
    .schedule__control .schedule__button {
        background: #EFEFEF;
    }
}

body.dark .schedule__control .schedule__button {
    background: #1A1D1F;
}

@media only screen and (max-width: 1259px) {
    body.dark .schedule__control .schedule__button {
        background: #272B30;
    }
}

.schedule__control .schedule__button .icon {
    width: 20px;
    height: 20px;
    fill: #6F767E;
    transition: fill .2s;
}

.schedule__control .schedule__button:hover .icon {
    fill: var(--color-primary);
}

.schedule__control .schedule__button:hover .action__label {
    color: var(--color-primary);
}

.schedule__control .schedule__button:not(:last-child) {
    margin-right: 16px;
}

.schedule .actions {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .schedule .actions {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
    }

    .schedule .actions.active {
        z-index: 10;
    }
}

body.dark .schedule .actions__button {
    background: none;
}

.schedule__foot {
    margin-top: 20px;
    text-align: center;
}

@media only screen and (max-width: 1023px) {
    .schedule__foot {
        margin-top: 0;
    }
}

.schedule__foot .schedule__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.drafts .card__head {
    margin-bottom: 44px;
}

@media only screen and (max-width: 1023px) {
    .drafts .card__head {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .drafts .card__head {
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
}

.drafts .card__title {
    margin-right: 24px;
}

@media only screen and (max-width: 1023px) {
    .drafts .form {
        width: 300px;
    }
}

@media only screen and (max-width: 767px) {
    .drafts .form {
        width: 100%;
        margin-top: 16px;
        order: 3;
    }
}

.drafts__tab {
    display: none;
}

.drafts__list {
    display: flex;
    flex-wrap: wrap;
    margin: -32px -12px 0;
}

@media only screen and (max-width: 639px) {
    .drafts__list {
        display: block;
        margin: 0 -8px;
    }
}

.drafts .summary {
    flex: 0 0 calc(33.333% - 24px);
    width: calc(33.333% - 24px);
    margin: 32px 12px 0;
}

@media only screen and (max-width: 1023px) {
    .drafts .summary {
        flex: 0 0 calc(50% - 24px);
        width: calc(50% - 24px);
    }
}

@media only screen and (max-width: 639px) {
    .drafts .summary {
        width: 100%;
        margin: 0;
    }

    .drafts .summary:not(:last-child) {
        margin-bottom: 32px;
    }
}

.drafts__foot {
    margin-top: 44px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .drafts__foot {
        margin-top: 32px;
    }
}

.drafts__foot .drafts__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.calendar__title {
    padding-right: 48px;
}

.calendar__note {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #EFEFEF;
    font-weight: 500;
    color: #6F767E;
}

body.dark .calendar__note {
    border-color: #272B30;
}

.calendar__list {
    margin-top: 24px;
}

.calendar__item {
    display: block;
}

@media only screen and (max-width: 1259px) {
    .calendar__item {
        position: relative;
    }
}

@media only screen and (max-width: 767px) {
    .calendar__item {
        position: static;
    }
}
/* 캘린더 */
.calendar__item.active .calendar__head {
    border-color: var(--color-primary);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.05);
}

.calendar__item.active .calendar__head .icon {
    fill: #1A1D1F;
}

body.dark .calendar__item.active .calendar__head .icon {
    fill: #FCFCFC;
}

.calendar__item.active .calendar__body {
    visibility: visible;
    opacity: 1;
}

.calendar__item:not(:last-child) {
    margin-bottom: 8px;
}

.calendar__head {
    display: flex;
    min-height: 68px;
    padding: 14px;
    border-radius: 12px;
    border: 2px solid #EFEFEF;
    cursor: pointer;
    transition: all .2s;
}

.calendar__head .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 12px;
    fill: #6F767E;
    transition: fill .2s;
}

body.dark .calendar__head {
    border-color: #272B30;
}

.calendar__head:hover {
    border-color: var(--color-primary);
}

body.dark .calendar__head:hover {
    border-color: var(--color-primary);
}

.calendar__category {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #6F767E;
}

.calendar__value {
    width: 100%;
    height: 24px;
    background: none;
    border: none;
    box-shadow: none;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1A1D1F;
}

body.dark .calendar__value {
    color: #FCFCFC;
}

.calendar__body {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    background: #FCFCFC;
    box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

@media only screen and (max-width: 1259px) {
    .calendar__body {
        top: 100%;
        left: 0;
        right: 0;
        z-index: 3;
    }
}

@media only screen and (max-width: 767px) {
    .calendar__body {
        top: 50%;
        left: 12px;
        right: 12px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

body.dark .calendar__body {
    background: #1A1D1F;
}

@media only screen and (max-width: 767px) {
    body.dark .calendar__body {
        box-shadow: inset 0 0 0 1px #272B30;
    }
}

.calendar__item_date .calendar__body {
    padding: 10px 0 24px;
    text-align: center;
}

.calendar__item_time .calendar__body {
    width: 280px;
    padding: 24px;
}

@media only screen and (max-width: 1259px) {
    .calendar__item_time .calendar__body {
        width: auto;
    }
}

.calendar__date {
    padding: 24px 12px;
}

@media only screen and (max-width: 1259px) {
    .calendar__date {
        width: 100%;
        text-align: center;
    }
}

.calendar__time {
    max-height: 360px;
    overflow: auto;
}

@media only screen and (max-width: 1259px) {
    .calendar__time {
        max-height: 240px;
    }
}

@media only screen and (max-width: 767px) {
    .calendar__time {
        max-height: 360px;
    }
}

.calendar__time li {
    padding: 0 12px;
    border-radius: 4px;
    line-height: 40px;
    color: #6F767E;
    cursor: pointer;
    transition: all .2s;
}

.calendar__time li:hover,
.calendar__time li.active {
    background: #EFEFEF;
    color: #1A1D1F;
}

body.dark .calendar__time li:hover,
body.dark .calendar__time li.active {
    background: #272B30;
    color: #FCFCFC;
}

.calendar__foot {
    margin: 6px 20px 0;
    padding-top: 16px;
    border-top: 1px solid #EFEFEF;
    text-align: right;
}

body.dark .calendar__foot {
    border-color: #272B30;
}

.calendar__foot .calendar__button:not(:last-child) {
    margin-right: 8px;
}

.calendar__top {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 23px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .calendar__top {
    border-color: #272B30;
}

.calendar__subtitle {
    margin-right: auto;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .calendar__subtitle {
        font-size: 18px;
    }
}

.calendar__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EFEFEF;
    font-size: 0;
}

.calendar__close .icon {
    width: 20px;
    height: 20px;
    fill: #33383F;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

body.dark .calendar__close {
    background: #272B30;
}

body.dark .calendar__close .icon {
    fill: #FCFCFC;
}

.calendar__close:hover .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.calendar__btns {
    margin-top: 24px;
    text-align: right;
}

.date-picker-wrapper {
    padding: 0;
    border: none;
    border-radius: 24px;
    box-shadow: 0px 40px 32px -24px rgba(15, 15, 15, 0.12);
    background: none;
    z-index: 20;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

@media only screen and (max-width: 767px) {
    .date-picker-wrapper {
        width: 262px !important;
        padding: 0 19px;
    }
}

body.dark .date-picker-wrapper {
    background: none;
}

.date-picker-wrapper.single-month .month-wrapper {
    width: 252px !important;
    padding: 0 19px;
}

@media only screen and (max-width: 767px) {
    .date-picker-wrapper.single-month .month-wrapper {
        margin: 0 5px;
        padding: 0;
    }
}

.date-picker-wrapper.single-month .month-wrapper table {
    width: 100% !important;
}

@media only screen and (min-width: 768px) {
    .date-picker-wrapper.two-months .month-wrapper {
        display: flex;
        width: 600px !important;
    }

    .date-picker-wrapper.two-months .month-wrapper table {
        flex: 0 0 calc(50% - 48px);
        width: calc(50% - 48px);
        margin: 0 24px;
    }
}

.date-picker-wrapper.single-date .day {
    border-radius: 50% !important;
}

.date-picker-wrapper.single-date .day.first-date-selected:before,
.date-picker-wrapper.single-date .day.last-date-selected:before {
    display: none;
}

.date-picker-wrapper .month-wrapper {
    background: none;
    border: none;
    box-shadow: none;
}

.date-picker-wrapper .month-wrapper table {
    display: block;
}

@media only screen and (max-width: 767px) {
    .date-picker-wrapper .month-wrapper table {
        width: 100%;
    }
}

.date-picker-wrapper .month-wrapper table thead,
.date-picker-wrapper .month-wrapper table tbody {
    display: block;
    width: 100%;
}

.date-picker-wrapper .month-wrapper table tr {
    display: flex;
    align-items: center;
    height: 36px;
}

.date-picker-wrapper .month-wrapper table th,
.date-picker-wrapper .month-wrapper table td {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex: 1;
    font-weight: 500;
}

.date-picker-wrapper .month-wrapper table thead tr:first-child {
    height: 36px;
}

.date-picker-wrapper .month-wrapper table thead tr:first-child th:first-child,
.date-picker-wrapper .month-wrapper table thead tr:first-child th:nth-child(3) {
    flex: 0 0 24px;
}

.date-picker-wrapper .month-wrapper table .week-name,
.date-picker-wrapper .month-wrapper table .caption {
    height: auto;
}

.date-picker-wrapper .month-wrapper table .week-name {
    height: 40px;
}

.date-picker-wrapper .month-wrapper table .week-name th {
    height: auto;
}

.date-picker-wrapper .month-wrapper table .day {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 0;
    transition: background .2s, color .2s;
}

.date-picker-wrapper .month-wrapper table .day.valid.toMonth {
    color: #1A1D1F;
}

body.dark .date-picker-wrapper .month-wrapper table .day.valid.toMonth {
    color: #FCFCFC;
}

.date-picker-wrapper .month-wrapper table .day:hover {
    background: #6F767E;
    color: #F4F4F4 !important;
}

body.dark .date-picker-wrapper .month-wrapper table .day:hover {
    background: #FCFCFC;
    color: #111315 !important;
}

.date-picker-wrapper .month-wrapper table .day.checked {
    background: #272B30;
    border-radius: 0;
}

body.dark .date-picker-wrapper .month-wrapper table .day.checked {
    background: #FCFCFC;
    color: #111315 !important;
}

.date-picker-wrapper .month-wrapper table .day.hovering {
    border-radius: 0;
    background: #EFEFEF !important;
    color: #1A1D1F !important;
}

body.dark .date-picker-wrapper .month-wrapper table .day.hovering {
    background: #FCFCFC !important;
    color: #111315 !important;
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background: var(--color-primary) !important;
    color: #FCFCFC !important;
}

body.dark .date-picker-wrapper .month-wrapper table .day.real-today {
    background: var(--color-primary) !important;
    color: #111315 !important;
}

.date-picker-wrapper .month-wrapper table .day.day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.day.real-today.hovering {
    background: var(--color-primary);
}

.date-picker-wrapper .month-wrapper table .day.first-date-selected,
.date-picker-wrapper .month-wrapper table .day.last-date-selected {
    position: relative;
    border-radius: 50% !important;
    background: #1A1D1F !important;
    color: #FCFCFC !important;
}

body.dark .date-picker-wrapper .month-wrapper table .day.first-date-selected,
body.dark .date-picker-wrapper .month-wrapper table .day.last-date-selected {
    background: #272B30 !important;
    color: #F4F4F4 !important;
}

.date-picker-wrapper .month-wrapper table .day.first-date-selected:before,
.date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: 50%;
    background: #272B30;
}

body.dark .date-picker-wrapper .month-wrapper table .day.first-date-selected:before,
body.dark .date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
    background: #FCFCFC;
}

.date-picker-wrapper .month-wrapper table .day.first-date-selected:before {
    right: 0;
}

.date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
    left: 0;
}

.date-picker-wrapper .month-name {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
    text-transform: capitalize;
    color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
    .date-picker-wrapper .month-name {
        font-size: 18px;
    }
}

body.dark .date-picker-wrapper .month-name {
    color: #FCFCFC;
}

.date-picker-wrapper .month-element:not(:last-child) {
    margin-right: 5px;
}

.date-picker-wrapper .week-name {
    font-size: 14px;
    color: #6F767E;
}

.date-picker-wrapper .week-name th {
    font-weight: 500;
    text-transform: capitalize;
}

.date-picker-wrapper .gap {
    display: none;
}

.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
    background: none;
}

.date-picker-wrapper table .caption .next:hover path,
.date-picker-wrapper table .caption .prev:hover path {
    fill: var(--color-primary);
}

.date-picker-wrapper .footer {
    display: none;
}

.released__wrapper {
    margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
    .released__wrapper {
        margin: 0;
    }
}

.released__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 1023px) {
    .released__table {
        display: block;
    }
}

.released__row {
    display: table-row;
}

@media only screen and (max-width: 1023px) {
    .released__row:first-child {
        display: none;
    }
}

.released__row:first-child .released__col {
    padding: 0 12px 16px;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.released__row:not(:first-child) {
    transition: background .2s;
}

@media only screen and (max-width: 1023px) {
    .released__row:not(:first-child) {
        position: relative;
        display: block;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .released__row:not(:first-child) {
        border-color: #272B30;
    }
}

@media only screen and (min-width: 1024px) {
    .released__row:not(:first-child):hover {
        background: #F4F4F4;
    }

    body.dark .released__row:not(:first-child):hover {
        background: #272B30;
    }

    .released__row:not(:first-child):hover .number,
    .released__row:not(:first-child):hover .status {
        background: #FCFCFC;
    }

    body.dark .released__row:not(:first-child):hover .number,
    body.dark .released__row:not(:first-child):hover .status {
        background: #33383F;
    }
}

.released__row:not(:first-child) .released__col:not(:first-child):not(:nth-child(2)) {
    padding-top: 20px;
}

@media only screen and (max-width: 1023px) {
    .released__row:not(:first-child) .released__col:not(:first-child):not(:nth-child(2)) {
        padding-top: 0;
    }
}

@media only screen and (max-width: 1023px) {
    .released__row:last-child .released__col {
        padding-bottom: 0;
    }

    .released__row:last-child .released__col:after {
        display: none;
    }
}

.released__col {
    position: relative;
    display: table-cell;
    vertical-align: top;
    padding: 16px 12px;
    color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
    .released__col {
        position: static;
        display: flex;
        align-items: center;
        padding: 0;
    }
}

body.dark .released__col {
    color: #FCFCFC;
}

.released__col:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .released__col:after {
        display: none;
    }
}

body.dark .released__col:after {
    background: #272B30;
}

.released__col:first-child {
    width: 56px;
    border-radius: 8px 0 0 8px;
    font-size: 0;
}

@media only screen and (max-width: 1023px) {
    .released__col:first-child {
        display: none;
    }
}

.released__col:first-child:after {
    left: 12px;
}

@media only screen and (max-width: 1023px) {
    .released__col:nth-child(3) {
        display: none;
    }
}

.released__col:last-child {
    border-radius: 0 8px 8px 0;
}

.released__col:last-child:after {
    right: 12px;
}

@media only screen and (max-width: 1023px) {
    .released__col:not(:first-child):not(:last-child) {
        margin-bottom: 12px;
    }
}

.released__item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #1A1D1F;
    transition: color .2s;
}

@media only screen and (max-width: 767px) {
    .released__item {
        align-items: stretch;
    }
}

body.dark .released__item {
    color: #FCFCFC;
}

.released__item:hover {
    color: var(--color-primary);
}

body.dark .released__item:hover {
    color: var(--color-primary);
}

.released__preview {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

@media only screen and (max-width: 1023px) {
    .released__preview {
        width: 104px;
    }
}

.released__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.released__product {
    max-width: 170px;
    margin-bottom: 4px;
}

@media only screen and (max-width: 1023px) {
    .released__product {
        max-width: 100%;
        margin-bottom: 8px;
        font-size: 18px;
        line-height: 1.33333;
        letter-spacing: -0.02em;
    }
}

@media only screen and (max-width: 1023px) {
    .released__wrap {
        display: flex;
        align-items: center;
    }
}

.released__category {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

@media only screen and (max-width: 1023px) {
    .released__category {
        font-size: 15px;
    }
}

.released__sales {
    display: inline-flex;
    align-items: center;
}

.released__number,
.released__price {
    display: inline-block;
    padding: 0 8px;
    border-radius: 6px;
    background: #EFEFEF;
    transition: background .2s;
}

body.dark .released__number,
body.dark .released__price {
    background: #33383F;
}

.released__price {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .released__price {
        display: inline-block;
        margin-right: 12px;
    }
}

.released__status {
    transition: background .2s;
    white-space: nowrap;
}

.released__rating {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

.released__rating .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    fill: #FFC554;
}

.released__rating_empty {
    white-space: nowrap;
    color: #6F767E;
}

.released__rating_empty .icon {
    fill: #6F767E;
}

.released__counter {
    margin-left: 4px;
    color: #6F767E;
}

.released .balance {
    margin-left: 8px;
}

.released__box {
    display: flex;
    align-items: center;
}

.released__line {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 12px;
    margin-left: 8px;
}

.released__progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 2px;
    background: var(--color-primary);
}

.released__label {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .released__label {
        display: block;
        flex-shrink: 0;
        width: 124px;
        padding-right: 20px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.23077;
        color: #6F767E;
    }
}

.released__foot {
    margin-top: 32px;
    text-align: center;
}

@media only screen and (max-width: 1023px) {
    .released__foot {
        margin-top: 24px;
    }
}

.released__foot .released__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.recall .card__head {
    margin-bottom: 44px;
}

@media only screen and (max-width: 1023px) {
    .recall .card__head {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .recall .card__head {
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 1023px) {
    .recall .form {
        width: 320px;
    }
}

@media only screen and (max-width: 767px) {
    .recall .form {
        width: 100%;
    }
}

.recall .card__title {
    margin-right: 24px;
}

@media only screen and (max-width: 1023px) {
    .recall .card__title {
        margin-right: auto;
    }
}

@media only screen and (max-width: 767px) {
    .recall .card__title {
        margin: 0 0 16px;
    }
}

.recall__wrapper {
    margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
    .recall__wrapper {
        margin: 0;
    }
}

.recall__row {
    position: relative;
    display: flex;
}

.recall__row:after {
    content: "";
    position: absolute;
    left: 12px;
    bottom: 0;
    right: 12px;
    height: 1px;
    background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .recall__row:after {
        display: none;
    }
}

body.dark .recall__row:after {
    background: #272B30;
}

.recall__row:first-child {
    align-items: center;
    padding: 0 12px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

@media only screen and (max-width: 1023px) {
    .recall__row:first-child {
        display: none;
    }
}

.recall__row:not(:first-child) {
    padding: 16px 12px;
    border-radius: 8px;
    transition: background .2s;
}

@media only screen and (max-width: 1023px) {
    .recall__row:not(:first-child) {
        display: block;
        margin-bottom: 16px;
        padding: 0 0 16px;
        border-radius: 0;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .recall__row:not(:first-child) {
        border-color: #272B30;
    }
}

@media only screen and (min-width: 1260px) {
    .recall__row:not(:first-child):hover {
        background: #EFEFEF;
    }

    body.dark .recall__row:not(:first-child):hover {
        background: #272B30;
    }

    .recall__row:not(:first-child):hover .recall__control {
        visibility: visible;
        opacity: 1;
    }
}

.recall__row:not(:first-child).active .recall__control {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .recall__row:not(:first-child).active .recall__control {
        display: flex;
    }
}

.recall__row:not(:first-child).active .answer {
    display: block !important;
}

@media only screen and (min-width: 1024px) {
    .recall__row:not(:first-child).active {
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
        background: #FFFFFF;
    }

    body.dark .recall__row:not(:first-child).active {
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        background: #272B30;
    }
}

.recall__col:first-child {
    flex-shrink: 0;
    width: 24px;
    font-size: 0;
}

@media only screen and (max-width: 1023px) {
    .recall__col:first-child {
        display: none;
    }
}

.recall__col:nth-child(2) {
    flex-grow: 1;
    padding: 0 32px;
}

@media only screen and (max-width: 1023px) {
    .recall__col:nth-child(2) {
        padding: 0;
    }
}

.recall__col:last-child {
    flex-shrink: 0;
    width: 268px;
}

@media only screen and (max-width: 1023px) {
    .recall__col:last-child {
        display: none;
    }
}

.recall__item {
    display: flex;
    align-items: center;
}

.recall__preview {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 20px;
}

.recall__preview img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    -o-object-fit: cover;
    object-fit: cover;
}

.recall__product {
    margin-bottom: 4px;
    font-weight: 700;
    color: #1A1D1F;
}

body.dark .recall__product {
    color: #FCFCFC;
}

.recall__category {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.recall__box {
    display: flex;
}

.recall__avatar {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 20px;
}

@media only screen and (max-width: 767px) {
    .recall__avatar {
        margin-right: 12px;
    }
}

.recall__avatar>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.recall__details {
    flex-grow: 1;
}

.recall__line {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.recall__author {
    margin-right: auto;
    font-weight: 700;
}

.recall__time {
    margin-left: 24px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.recall__content {
    color: #33383F;
}

body.dark .recall__content {
    color: #FCFCFC;
}

.recall__control {
    display: flex;
    align-items: center;
    margin: 12px 0 -4px;
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

@media only screen and (max-width: 1259px) {
    .recall__control {
        visibility: visible;
        opacity: 1;
    }
}

.recall__button {
    flex-shrink: 0;
}

.recall__button .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.recall__button:hover .icon {
    fill: var(--color-primary);
}

.recall__button.active .icon {
    fill: #1A1D1F;
}

body.dark .recall__button.active .icon {
    fill: #FCFCFC;
}

.recall .favorite .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
}

.recall .favorite:hover .icon {
    fill: var(--color-primary);
}

.recall .favorite.active .icon {
    fill: var(--color-primary);
}

body.dark .recall .favorite.active .icon {
    fill: var(--color-primary);
}

.recall__button:not(:last-child),
.recall .favorite:not(:last-child) {
    margin-right: 32px;
}

.recall__foot {
    margin-top: 24px;
    text-align: center;
}

@media only screen and (max-width: 1023px) {
    .recall__foot {
        margin-top: 0;
    }
}

.recall__foot .recall__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.smile {
    display: inline-block;
    position: relative;
}

.smile__head .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.smile__head:hover .icon {
    fill: var(--color-primary);
}

.smile__body {
    position: absolute;
    width: 264px;
    padding: 4px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

@media only screen and (max-width: 767px) {
    .smile__body {
        max-width: 168px;
    }
}

body.dark .smile__body {
    background: #1A1D1F;
    box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.3);
}

.smile__list {
    display: flex;
    flex-wrap: wrap;
}

.smile__item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background .2s;
}

.smile__item img {
    width: 100%;
}

.smile__item:hover {
    background: #EFEFEF;
}

body.dark .smile__item:hover {
    background: #272B30;
}

.smile.active .smile__head .icon {
    fill: #1A1D1F;
}

body.dark .smile.active .smile__head .icon {
    fill: #FCFCFC;
}

.smile.active .smile__body {
    visibility: visible;
    opacity: 1;
}

.smile_right .smile__body {
    top: 50%;
    left: calc(100% + 10px);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
    .smile_right .smile__body {
        top: auto;
        left: 50%;
        bottom: calc(100% + 10px);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}

.smile_up .smile__body {
    left: 50%;
    bottom: calc(100% + 10px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media only screen and (max-width: 767px) {
    .total .card__head {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .total .card__title {
        margin-bottom: 16px;
    }
}

.total__details {
    margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
    .total__details {
        margin-bottom: 24px;
        text-align: center;
    }
}

.total__title {
    margin-bottom: 4px;
}

.total__line {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 700;
    color: #9A9FA5;
}

@media only screen and (max-width: 767px) {
    .total__line {
        justify-content: center;
    }
}

.total .balance {
    margin-right: 4px;
}

.total__chart {
    width: auto;
    height: 238px;
    margin: 0 0 -10px -10px;
}

.total .users {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .total .users {
        margin-top: 24px;
        padding-top: 24px;
    }
}

body.dark .total .users {
    border-color: #272B30;
}

@media only screen and (max-width: 767px) {
    .promote .card__head .button {
        display: none;
    }
}

.promote__list {
    display: flex;
    flex-wrap: wrap;
    margin: -32px -16px 0;
}

@media only screen and (max-width: 767px) {
    .promote__list {
        display: block;
        margin: 0;
    }
}

.promote .summary {
    flex: 0 0 calc(50% - 32px);
    width: calc(50% - 32px);
    margin: 32px 16px 0;
}

@media only screen and (max-width: 767px) {
    .promote .summary {
        width: 100%;
        margin: 0;
    }

    .promote .summary:not(:last-child) {
        margin-bottom: 24px;
    }
}

.promote .media {
    margin: 32px 0 16px;
    padding-top: 32px;
    border-top: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .promote .media {
        margin-top: 24px;
        padding-top: 24px;
    }
}

body.dark .promote .media {
    border-color: #272B30;
}

.device__chart {
    width: auto;
    height: 230px;
}

@media only screen and (max-width: 1023px) {
    .device__chart {
        max-width: 310px;
        margin: 0 auto;
    }
}

.device__legend {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
}

.device__legend .icon {
    width: 24px;
    height: 24px;
    margin-bottom: 12px;
}

.device__indicator_mobile .icon {
    fill: #8E59FF;
}

.device__indicator_tablet .icon {
    fill: #83BF6E;
}

.device__indicator_desktop .icon {
    fill: var(--color-primary);
}

.device__title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

.device__percent {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .device__percent {
        font-size: 18px;
    }
}

.message__item {
    display: flex;
}

.message__item:not(:last-child) {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .message__item:not(:last-child) {
        margin-bottom: 24px;
    }
}

body.dark .message__item:not(:last-child) {
    border-color: #272B30;
}

.message__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 12px;
}

.message__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.message__details {
    flex-grow: 1;
}

.message__line {
    display: flex;
    align-items: center;
}

.message__user {
    margin-right: auto;
}

.message__title {
    font-weight: 700;
}

.message__login {
    font-weight: 500;
    color: #9A9FA5;
}

.message__time {
    margin-left: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.message__content {
    font-weight: 500;
    color: #1A1D1F;
}

body.dark .message__content {
    color: #FCFCFC;
}

.message__button {
    width: 100%;
    margin-top: 32px;
}

.customer .card__head {
    margin-bottom: 44px;
}

@media only screen and (max-width: 1023px) {
    .customer .card__head {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .customer .card__head {
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
}

.customer .card__head .form {
    margin-right: auto;
}

@media only screen and (max-width: 1023px) {
    .customer .card__head .form {
        width: 250px;
    }
}

@media only screen and (max-width: 767px) {
    .customer .card__head .form {
        width: 100%;
        margin: 0 0 16px;
    }
}

.customer .card__title {
    margin-right: 24px;
}

@media only screen and (max-width: 767px) {
    .customer .card__title {
        margin: 0 0 16px;
    }
}

.customer .filters {
    margin-left: 8px;
}

@media only screen and (max-width: 1023px) {
    .customer .filters {
        display: none;
    }
}

.customer__details {
    display: none;
}

.customer__wrapper {
    /*margin: 0 -12px;*/
}

@media only screen and (max-width: 1023px) {
    .customer__wrapper {
        margin: 0;
    }
}

.customer__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 1023px) {
    .customer__table {
        display: block;
    }
}

.customer__row {
    display: table-row;
}

/* -- Issue #4 + #10: 테이블 데이터 컬럼 18px 통일 + 셀 패딩 균일화 -- */
.js-popup-document .customer__col {
    font-size: 18px;
    padding: 16px 16px;
}
.js-popup-document .customer__row:first-child .customer__col {
    font-size: 16px;
}

.document__item > .customer__col:nth-child(4) {
    width: 150px;
    white-space: nowrap;
}

.document__item > .customer__col:nth-child(5) {
    width: 110px;
}

.document__item > .customer__col:nth-child(6) {
    width: 72px;
}

.document__item .schedule__control .schedule__button {
    background: #F4F4F4;
}
body.dark .document__item .schedule__control .schedule__button {
    background: #272B30;
}
.document__item .schedule__control .icon-trash {
    fill: #FF6A55 !important;
}
.document__item .customer__col.turn-btn svg {
    fill: #2A85FF !important;
}
.document__item .schedule__control .icon-lock {
    fill: #FFBC00 !important;
}

body.presenter .turn-btn, body.presenter .turn__header, body.presenter .presenter-tbl-btn  {
    display: table-cell !important;
}

/* .turn-btn, .turn__header, .presenter-tbl-btn {
    display: none !important;
} */

.customer__col.turn-btn {
    position: relative;
}

.customer__row:first-child .customer__col {
    padding: 0 12px 16px;
    vertical-align: middle;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
    font-size: 1.1em;
    white-space: nowrap;
}

.js-popup-document .customer__row:first-child .customer__col {
    width: 50% ;
}

.customer__row:not(:first-child) {
    transition: all .2s;
}

.customer__row.document__item {
    transition: unset;
}

.document__item.ui-sortable-helper {
    display: flex;
    justify-content: space-between;
}

/* -- Issue #2: 터치 타겟 44px 준수 (--sp-touch-target) -- */
[p-select="document-turn-btn"], .turn-btn-icon {
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px #888888 solid;
    border-radius: 8px;
    cursor: pointer;
    position: absolute;
    top: calc(50% - 22px);
}

[p-select="document-turn-btn"]:hover, .turn-btn-icon:hover {
    background-color: #f2f2f2;
}

.js-popup-document .schedule__control .schedule__button {
    width: 44px;
    height: 44px;
}
.js-popup-document .schedule__control .schedule__button .icon {
    width: 22px;
    height: 22px;
}

@media only screen and (max-width: 1023px) {
    .customer__row:not(:first-child) {
        /* display: flex; */
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #EFEFEF;
    }
}

body.dark .customer__row:not(:first-child) {
    border-color: #272B30;
}

@media only screen and (min-width: 1024px) {
    .customer__row:not(:first-child):hover {
        background: #F4F4F4;
    }

    body.dark .customer__row:not(:first-child):hover {
        background: #272B30;
    }

    .customer__row:not(:first-child):hover .price {
        background: #FCFCFC;
    }

    body.dark .customer__row:not(:first-child):hover .price {
        background: #111315;
    }
}

.customer__row:last-child .customer__col:after {
    display: none;
}

.customer__row.active {
    background: #EFEFEF !important;
}

body.dark .customer__row.active {
    background: #272B30 !important;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px rgba(255, 255, 255, 0.08);
}

.customer__row.active .customer__col:first-child {
    border-radius: 12px 0 0 12px;
}

.customer__row.active .customer__col:nth-child(2) {
    padding-right: 40px;
    border-radius: 0 12px 12px 0;
}

.customer__row.active .customer__col:nth-child(2):before {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M8.293 17.293a1 1 0 0 0 1.414 1.414l-1.414-1.414zM15 12l.707.707a1 1 0 0 0 0-1.414L15 12zM9.707 5.293a1 1 0 1 0-1.414 1.414l1.414-1.414zm0 13.414l6-6-1.414-1.414-6 6 1.414 1.414zm6-7.414l-6-6-1.414 1.414 6 6 1.414-1.414z' fill='%236f767e'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

.customer__col {
    position: relative;
    display: table-cell;
    vertical-align: top;
    padding: 16px 12px;
    color: #1A1D1F;
    font-size: 20px;
    overflow-wrap: break-word;
    word-break: break-word;
}

body.dark .customer__col {
    color: #FCFCFC;
}

.customer__col:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .customer__col:after {
        display: none;
    }
}

body.dark .customer__col:after {
    background: #272B30;
}

.customer__col:not(.not-first):first-child {
    width: 56px;
    border-radius: 8px 0 0 8px;
    font-size: 0;
}

@media only screen and (max-width: 1023px) {
    .customer__col:not(.not-first):first-child {
        display: none;
    }
}

.customer__col:not(.not-first):first-child:after {
    left: 12px;
}

@media only screen and (max-width: 1023px) {
    .customer__col:nth-child(5) {
        margin-left: auto;
        padding-left: 16px;
    }
}

.customer__col:last-child {
    border-radius: 0 8px 8px 0;
}

.customer__col:last-child:after {
    right: 12px;
}

.customer__item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color .2s;
}

.customer__item.not__hover {
    cursor: default;
}

.customer__item.selected {
    color: #104cd8;
}

.customer__item:not(.not__hover):hover {
    color: var(--color-primary);
}

.customer__item .customer__email {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .customer__item .customer__email {
        display: block;
        font-size: 13px;
        line-height: 1;
        color: #9A9FA5;
    }
}

.customer__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 12px;
    border-radius: 50%;
    overflow: hidden;
}

.customer__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.customer__user {
    max-width: 160px;
    margin-bottom: 4px;
}

.customer__login {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

@media only screen and (max-width: 1023px) {
    .customer__login {
        display: none;
    }
}

body.dark .customer__login {
    color: #9A9FA5;
}

.customer__email {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
}

body.dark .customer__email {
    color: #FCFCFC;
}

@media only screen and (max-width: 1023px) {
    .customer__col>.customer__email {
        display: none;
    }
}

.customer__lifetime {
    display: inline-flex;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .customer__lifetime {
        flex-direction: column;
        align-items: flex-end;
    }
}

.customer__price {
    display: inline-block;
    padding: 0 8px;
    border-radius: 6px;
    background: #EFEFEF;
    transition: backround .2s;
}

body.dark .customer__price {
    background: #272B30;
}

.customer .balance {
    margin-left: 8px;
}

@media only screen and (max-width: 767px) {
    .customer .balance {
        margin: 4px 0 0;
    }
}

.customer__foot {
    margin-top: 32px;
    text-align: center;
}

@media only screen and (max-width: 1023px) {
    .customer__foot {
        margin-top: 24px;
    }
}

.customer__foot .customer__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

@media only screen and (max-width: 1023px) {
    .customer.active .card__head {
        display: none;
    }
}

.customer.active .customer__inner {
    display: flex;
    flex-direction: column-reverse;
}

.customer.active .customer__container {
    flex-shrink: 0;
    margin-top: 20px;
    /* width: 360px; */
}

.customer.write .customer__container {
    display: none;
}

@media only screen and (max-width: 1419px) {
    .customer.active .customer__container {
        /* width: 350px; */
    }
}

@media only screen and (max-width: 1259px) {
    .customer.active .customer__container {
        width: 320px;
    }
}

@media only screen and (max-width: 1023px) {
    .customer.active .customer__container {
        display: none;
    }
}

.customer.active .customer__row:hover {
    background: none;
}

body.dark .customer.active .customer__row:hover {
    background: none;
}

.customer.active .customer__col:not(:first-child):not(:nth-child(2)) {
    display: none;
}

.customer.active .customer__col:nth-child(2):after {
    right: 12px;
}

.customer.active .customer__details, .customer.write .customer__details {
    display: block;
}

.filters {
    position: relative;
}

.filters__head .icon {
    width: 24px;
    height: 24px;
}

.filters__body {
    position: absolute;
    top: -24px;
    right: -24px;
    z-index: 30;
    width: 408px;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
    background: #FCFCFC;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
}

@media only screen and (max-width: 767px) {
    .filters__body {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        overflow: auto;
    }
}

body.dark .filters__body {
    background: #1A1D1F;
}

.filters__top {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.filters__title {
    margin-right: auto;
}

.filters__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EFEFEF;
    margin-left: 24px;
}

.filters__close .icon {
    width: 20px;
    height: 20px;
    fill: #1A1D1F;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

body.dark .filters__close {
    background: #272B30;
}

body.dark .filters__close .icon {
    fill: #FCFCFC;
}

.filters__close:hover .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.filters .form {
    width: 100%;
    margin-bottom: 24px;
}

.filters__item:not(:last-child) {
    margin-bottom: 24px;
}

.filters__label,
.filters .field__label {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
}

.filters .checkbox:not(:last-child) {
    margin-bottom: 12px;
}

.filters__range {
    margin: 20px 0;
}

.filters__box {
    position: relative;
}

.filters__box .select {
    padding-left: 48px;
}

.filters__box .icon {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 10;
    pointer-events: none;
    width: 24px;
    height: 24px;
    fill: #FFD88D;
}

.filters__btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.filters__btns .filters__button:not(:last-child) {
    margin-right: 12px;
}

.filters__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 28;
    background: rgba(244, 244, 244, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
}

body.dark .filters__overlay {
    background: rgba(39, 43, 48, 0.9);
}

.filters.active .filters__body,
.filters.active .filters__overlay {
    visibility: visible;
    opacity: 1;
}

.details {
    position: relative;
    flex-grow: 1;
    padding: 60px 0 0 48px;
}

.write .details {
    padding: 60px 0 0 0;
}

@media only screen and (max-width: 1419px) {
    .details {
        padding: 48px 0 0 48px;
    }
}

@media only screen and (max-width: 1023px) {
    .details {
        padding: 0;
    }
}

.details__close {
    position: absolute;
    transform: translate(-50%, -120%);
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .details__close {
        background: #EFEFEF;
        /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05); */
    }
}

@media only screen and (max-width: 767px) {
}

.details__close .icon {
    width: 20px;
    height: 20px;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

body.dark .details__close {
    background: #272B30;
}

body.dark .details__close .icon {
    fill: #FCFCFC;
}

.details__close:hover .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.details__head,
.details .editor {
    margin-bottom: 48px;
}

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

    .details__head,
    .details .editor {
        margin-bottom: 32px;
    }
}

.details__head {
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .details__head {
        display: block;
    }
}

.details__user {
    display: flex;
    align-items: center;
    margin-right: 24px;
}

@media only screen and (max-width: 767px) {
    .details__user {
        margin: 0 0 24px;
    }
}

.details__avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 24px;
}

@media only screen and (max-width: 1419px) {
    .details__avatar {
        width: 64px;
        height: 64px;
        margin-right: 16px;
    }
}

.details__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.details__man {
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .details__man {
        font-size: 18px;
    }
}

.details__login {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.details__btns {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.details__btns .details__button .icon {
    width: 24px;
    height: 24px;
}

@media only screen and (max-width: 767px) {
    .details__btns .details__button {
        flex-grow: 1;
    }
}

@media only screen and (max-width: 1419px) {
    .details__btns .details__button:first-child {
        width: 48px;
        padding: 0;
        font-size: 0;
    }

    .details__btns .details__button:first-child .icon:last-child {
        margin: 0;
    }
}

@media only screen and (max-width: 767px) {
    .details__btns .details__button:first-child {
        width: auto;
        padding: 0 20px;
        font-size: 15px;
    }

    .details__btns .details__button:first-child .icon:last-child {
        margin-left: 8px;
    }
}

.details__btns .details__button:not(:last-child) {
    margin-right: 8px;
}

.details__line {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #1A1D1F;
    transition: color .2s;
}

.details__line .icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    fill: #6F767E;
    transition: fill .2s;
}

body.dark .details__line {
    color: #FCFCFC;
}

.details__line:hover {
    color: var(--color-primary);
}

.details__line:hover .icon {
    fill: var(--color-primary);
}

.details__socials {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-width: 1px 0;
    border-style: solid;
    border-color: #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .details__socials {
        padding: 16px 0;
    }
}

body.dark .details__socials {
    border-color: #272B30;
}

.details__social .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.details__social:hover .icon {
    fill: var(--color-primary);
}

.details__social:not(:last-child) {
    margin-right: 32px;
}

.details__line:not(:last-child),
.details__socials:not(:last-child) {
    margin-bottom: 20px;
}

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

    .details__line:not(:last-child),
    .details__socials:not(:last-child) {
        margin-bottom: 16px;
    }
}

.details .history {
    margin-top: 48px;
}

@media only screen and (max-width: 1339px) {
    .details .history {
        margin-top: 32px;
    }
}

.history__label {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #33383F;
}

body.dark .history__label {
    color: #EFEFEF;
}

.history .tooltip {
    position: relative;
    top: -1;
}

.history .tooltip .icon {
    fill: #9A9FA5;
}

.history__inner {
    margin: 0 -12px;
}

@media only screen and (max-width: 767px) {
    .history__inner {
        margin: 0;
    }
}

.history__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .history__table {
        display: block;
    }
}

.history__row {
    display: table-row;
    cursor: pointer;
    transition: background .2s;
}

@media only screen and (max-width: 767px) {
    .history__row {
        display: block;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .history__row {
        border-color: #272B30;
    }
}

@media only screen and (max-width: 767px) {
    .history__row:first-child {
        display: none;
    }
}

.history__row:first-child .history__col {
    padding-top: 0;
    padding-bottom: 24px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

@media only screen and (min-width: 768px) {
    .history__row:not(:first-child):hover {
        background: #F4F4F4;
    }

    body.dark .history__row:not(:first-child):hover {
        background: #272B30;
    }
}

.history__col {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 12px;
    color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
    .history__col {
        display: block;
        padding: 0;
    }
}

body.dark .history__col {
    color: #FCFCFC;
}

.history__col:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .history__col:after {
        display: none;
    }
}

body.dark .history__col:after {
    background: #272B30;
}

.history__col:first-child {
    border-radius: 8px 0 0 8px;
}

.history__col:first-child:after {
    left: 12px;
}

@media only screen and (max-width: 767px) {
    .history__col:not(:first-child) {
        display: none;
    }
}

.history__col:last-child {
    border-radius: 0 8px 8px 0;
}

.history__col:last-child:after {
    right: 12px;
}

.history__item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.history__item .history__price {
    display: none;
}

@media only screen and (max-width: 767px) {
    .history__item .history__price {
        display: inline-block;
        margin-top: 8px;
    }
}

.history__preview {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-right: 16px;
    border-radius: 8px;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .history__preview {
        width: 104px;
        height: 112px;
        margin-right: 20px;
    }
}

.history__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.history__product {
    max-width: 200px;
    margin-bottom: 4px;
}

@media only screen and (max-width: 767px) {
    .history__product {
        max-width: 100%;
    }
}

.history__link {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.history__price {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: #B5E4CA;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

body.dark .history__price {
    color: #1A1D1F;
}

.history__date {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
}

.history__foot {
    margin-top: 20px;
    text-align: center;
}

.history__foot .history__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.quality__list {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 767px) {
    .quality__list {
        display: block;
    }
}

.quality__item {
    display: block;
    padding: 0 32px 0 64px;
    color: #1A1D1F;
}

@media only screen and (max-width: 1339px) {
    .quality__item {
        padding: 0 32px 0 32px;
    }
}

@media only screen and (max-width: 1023px) {
    .quality__item {
        padding: 0;
    }
}

@media only screen and (max-width: 767px) {
    .quality__item {
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
    }
}

body.dark .quality__item {
    color: #FCFCFC;
}

.quality__item:not(:first-child) {
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .quality__item:not(:first-child) {
        margin-top: 24px;
        padding-top: 24px;
        border-width: 1px 0 0;
    }
}

body.dark .quality__item:not(:first-child) {
    border-color: #272B30;
}

.quality__item:first-child {
    padding-left: 0;
}

.quality__item:last-child {
    padding-right: 0;
}

.quality__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 50%;
}

@media only screen and (max-width: 767px) {
    .quality__icon {
        margin: 0 0 0 auto;
    }
}

.quality__icon .icon {
    width: 24px;
    height: 24px;
    fill: #1A1D1F;
}

.quality__label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.quality .tooltip .icon {
    fill: #6F767E;
}

.quality__counter {
    min-width: 146px;
    margin-bottom: 8px;
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

@media only screen and (max-width: 1023px) {
    .quality__counter {
        min-width: auto;
        font-size: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .quality__counter {
        font-size: 48px;
    }
}

.quality__indicator {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    color: #6F767E;
}

body.dark .quality__indicator {
    background: #272B30;
}

.quality__indicator span {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
}

.press .card__head {
    margin-bottom: 44px;
}

@media only screen and (max-width: 1023px) {
    .press .card__head {
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .press .card__head {
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

    .press .card__head .card__title {
        width: 100%;
        margin: 0 0 16px;
    }
}

.press .card__button {
    margin-left: 16px;
}

.press__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 1023px) {
    .press__table {
        display: block;
    }
}

.press__row {
    display: table-row;
}

@media only screen and (max-width: 1023px) {
    .press__row:first-child {
        display: none;
    }
}

.press__row:first-child .press__col {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

@media only screen and (max-width: 1023px) {
    .press__row:not(:first-child) {
        display: block;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .press__row:not(:first-child) {
        border-color: #272B30;
    }
}

.press__row:not(:first-child) .press__col:not(:first-child) {
    padding-top: 32px;
}

@media only screen and (max-width: 1023px) {
    .press__row:not(:first-child) .press__col:not(:first-child) {
        padding-top: 0;
    }
}

.press__row:not(:last-child) .press__col {
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .press__row:not(:last-child) .press__col {
        border: none;
    }
}

body.dark .press__row:not(:last-child) .press__col {
    border-color: #272B30;
}

.press__col {
    display: table-cell;
    vertical-align: top;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media only screen and (max-width: 1023px) {
    .press__col {
        display: flex;
        align-items: center;
        padding: 0;
    }
}

.press__col:not(:last-child) {
    padding-right: 24px;
}

@media only screen and (max-width: 1023px) {
    .press__col:not(:last-child) {
        margin-bottom: 12px;
        padding-top: 0;
    }
}

.press__item {
    display: flex;
    align-items: center;
}

.press__preview {
    position: relative;
    flex-shrink: 0;
    width: 136px;
    height: 112px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .press__preview {
        width: 112px;
        height: 96px;
        margin-right: 16px;
    }
}

.press__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.press__icon {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #FCFCFC;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

body.dark .press__icon {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.36);
    background: #111315;
}

.press__icon .icon {
    fill: #6F767E;
}

.press__post {
    max-width: 160px;
    margin-bottom: 12px;
    font-weight: 700;
}

@media only screen and (max-width: 1023px) {
    .press__post {
        max-width: 100%;
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .press__post {
        font-size: 15px;
    }
}

.press__socials {
    display: flex;
}

.press__social {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EFEFEF;
    transition: all .2s;
}

.press__social .icon {
    width: 20px;
    height: 20px;
    fill: #1A1D1F;
    transition: fill .2s;
}

body.dark .press__social {
    background: #272B30;
}

body.dark .press__social .icon {
    fill: #FCFCFC;
}

.press__social:hover {
    background: var(--color-primary);
}

.press__social:hover .icon {
    fill: #FCFCFC;
}

body.dark .press__social:hover {
    background: var(--color-primary);
}

body.dark .press__social:hover .icon {
    fill: #FCFCFC;
}

.press__social:not(:last-child) {
    margin-right: 12px;
}

.press__distribution {
    font-size: 15px;
    font-weight: 600;
    color: #1A1D1F;
}

.press__label {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .press__label {
        display: block;
        flex-shrink: 0;
        width: 156px;
        padding-right: 20px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.23077;
        color: #6F767E;
    }
}

@media only screen and (max-width: 767px) {
    .press__label {
        width: 128px;
    }
}

@media only screen and (max-width: 1023px) {
    .press__cell {
        display: flex;
        align-items: center;
    }
}

.press__box {
    display: flex;
    align-items: center;
}

.press__number {
    padding: 0 7px;
    border-radius: 6px;
    background: #EFEFEF;
    line-height: 24px;
}

body.dark .press__number {
    background: #272B30;
}

.press__line {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 12px;
    margin-left: 8px;
}

@media only screen and (max-width: 1023px) {
    .press__line {
        margin-left: 12px;
    }
}

.press__progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 2px;
}

.press__progress_red {
    background: #FF6A55;
}

.press__progress_green {
    background: #83BF6E;
}

.press__progress_blue {
    background: var(--color-primary);
}

.press .balance {
    margin-top: 8px;
    padding: 4px;
    border-radius: 4px;
}

@media only screen and (max-width: 1023px) {
    .press .balance {
        margin: 0 0 0 4px;
    }
}

body.dark .press .balance {
    background: #272B30;
}

.press__foot {
    margin-top: 20px;
    text-align: center;
}

@media only screen and (max-width: 1023px) {
    .press__foot {
        margin-top: 0;
    }
}

.press__foot .press__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.post__title {
    margin-bottom: 24px;
}

.post__list {
    display: flex;
    margin-bottom: 24px;
}

.post__avatar {
    position: relative;
    width: 48px;
    height: 48px;
}

.post__avatar>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.post__avatar:not(:last-child) {
    margin-right: 24px;
}

.post__social {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #FCFCFC;
    background: var(--color-primary);
}

body.dark .post__social {
    border-color: #1A1D1F;
}

.post__social .icon {
    width: 12px;
    height: 12px;
    fill: #FCFCFC;
}

.post__textarea {
    width: 100%;
    height: 132px;
    background: none;
    border: none;
    box-shadow: none;
    resize: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
    .post__textarea {
        font-size: 18px;
    }
}

body.dark .post__textarea {
    color: #FCFCFC;
}

.post__textarea::-webkit-input-placeholder {
    color: rgba(111, 118, 126, 0.4);
}

.post__textarea::-moz-placeholder {
    color: rgba(111, 118, 126, 0.4);
}

.post__textarea:-ms-input-placeholder {
    color: rgba(111, 118, 126, 0.4);
}

.post__textarea::-ms-input-placeholder {
    color: rgba(111, 118, 126, 0.4);
}

.post__textarea::placeholder {
    color: rgba(111, 118, 126, 0.4);
}

body.dark .post__textarea::-webkit-input-placeholder {
    color: #9A9FA5;
}

body.dark .post__textarea::-moz-placeholder {
    color: #9A9FA5;
}

body.dark .post__textarea:-ms-input-placeholder {
    color: #9A9FA5;
}

body.dark .post__textarea::-ms-input-placeholder {
    color: #9A9FA5;
}

body.dark .post__textarea::placeholder {
    color: #9A9FA5;
}

.post__info {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .post__info {
        font-size: 18px;
    }
}

.post__preview img {
    width: 100%;
    border-radius: 8px;
}

.post__foot {
    display: flex;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #EFEFEF;
}

body.dark .post__foot {
    border-color: #272B30;
}

.post__files {
    display: flex;
    margin-right: auto;
}

.post__file {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.post__file input {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 120px;
    opacity: 0;
}

.post__file input:hover+.post__icon {
    background: #EFEFEF;
    cursor: pointer;
}

.post__file input:hover+.post__icon .icon {
    fill: #1A1D1F;
}

body.dark .post__file input:hover+.post__icon {
    background: #272B30;
}

body.dark .post__file input:hover+.post__icon .icon {
    fill: #FCFCFC;
}

.post__file.active .post__icon {
    background: #EFEFEF;
}

.post__file:not(:last-child) {
    margin-right: 16px;
}

.post__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all .2s;
}

.post__icon .icon {
    width: 20px;
    height: 20px;
    fill: #6F767E;
    transition: fill .2s;
}

.post__button .icon {
    width: 24px;
    height: 24px;
}

.notification__row {
    display: flex;
    align-items: flex-start;
}

@media only screen and (max-width: 1023px) {
    .notification__row {
        display: block;
    }
}

.notification__col:first-child {
    flex: 0 0 calc(100% - 340px);
    width: calc(100% - 340px);
    padding-right: 8px;
}

@media only screen and (max-width: 1259px) {
    .notification__col:first-child {
        flex: 0 0 calc(100% - 300px);
        width: calc(100% - 300px);
    }
}

@media only screen and (max-width: 1023px) {
    .notification__col:first-child {
        width: 100%;
        padding-right: 0;
    }
}

.notification__col:nth-child(2) {
    flex-shrink: 0;
    width: 340px;
    position: sticky;
    top: 102px;
}

@media only screen and (max-width: 1339px) {
    .notification__col:nth-child(2) {
        top: 86px;
    }
}

@media only screen and (max-width: 1259px) {
    .notification__col:nth-child(2) {
        width: 300px;
    }
}

@media only screen and (max-width: 1023px) {
    .notification__col:nth-child(2) {
        display: none;
    }
}

.notification .actions {
    margin-left: 16px;
}

body.dark .notification .actions__button {
    background: #272B30;
}

.notification .select {
    min-width: 105px;
}

.notification__item {
    position: relative;
    display: flex;
    padding: 12px;
    border-radius: 12px;
    transition: background .2s;
}

@media only screen and (max-width: 767px) {
    .notification__item {
        padding: 0;
        border-radius: 0;
    }
}

@media only screen and (min-width: 768px) {
    .notification__item:hover {
        background: #F4F4F4;
    }

    body.dark .notification__item:hover {
        background: #272B30;
    }
}

.notification__item:after {
    content: "";
    position: absolute;
    top: 18px;
    right: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #9A9FA5;
    transition: background .2s;
}

@media only screen and (max-width: 767px) {
    .notification__item:after {
        display: none;
    }
}

.notification__item.new:after {
    background: var(--color-primary);
}

.notification__item:not(:last-child) {
    margin-bottom: 41px;
}

@media only screen and (max-width: 767px) {
    .notification__item:not(:last-child) {
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .notification__item:not(:last-child) {
        border-color: #272B30;
    }
}

.notification__item:not(:last-child):before {
    content: "";
    position: absolute;
    top: calc(100% + 20px);
    left: 12px;
    right: 12px;
    height: 1px;
    background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .notification__item:not(:last-child):before {
        display: none;
    }
}

body.dark .notification__item:not(:last-child):before {
    background: #272B30;
}

.notification__avatar {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

.notification__avatar>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.notification__icon {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}

body.dark .notification__icon {
    border-color: #1A1D1F;
}

.notification__icon img {
    width: 16px;
}

.notification__details {
    flex: 0 0 calc(100% - 64px);
    width: calc(100% - 64px);
    padding-left: 12px;
}

.notification__line {
    display: flex;
    align-items: center;
    padding-right: 24px;
}

.notification__subtitle {
    margin-right: 4px;
    font-weight: 700;
    color: #1A1D1F;
}

body.dark .notification__subtitle {
    color: #FCFCFC;
}

.notification__login {
    margin-right: auto;
    font-weight: 500;
    color: #9A9FA5;
}

.notification__time {
    margin-left: 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.notification__content {
    font-weight: 500;
    color: #6F767E;
}

.notification__content strong {
    font-weight: 700;
    color: #1A1D1F;
}

body.dark .notification__content strong {
    color: #FCFCFC;
}

.notification__comment {
    margin-top: 8px;
    font-weight: 500;
}

.notification__control {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.notification__action {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: #1A1D1F;
    transition: color .2s;
}

body.dark .notification__action {
    color: #FCFCFC;
}

.notification__action:hover {
    color: var(--color-primary);
}

.notification__action:not(:last-child) {
    margin-right: 24px;
}

.notification__action_favorite span {
    display: none;
}

.notification__action_favorite.active {
    color: var(--color-primary);
}

.notification__action_favorite.active span {
    display: inline;
}

.notification__group {
    display: flex;
    flex-direction: column;
}

.notification .checkbox:not(:last-child),
.notification .radio:not(:last-child) {
    margin-bottom: 16px;
}

.notification__btns {
    display: flex;
    margin: 32px -6px 0;
}

.notification__btns .notification__button {
    width: calc(50% - 12px);
    flex: 0 0 calc(50% - 12px);
    margin: 0 6px;
}

.notification__variants {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #EFEFEF;
}

body.dark .notification__variants {
    border-color: #272B30;
}

.notification__foot {
    margin-top: 32px;
    text-align: center;
}

.notification__foot .notification__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.settings {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    border-radius: 8px;
    background: #FCFCFC;
}

@media only screen and (max-width: 1023px) {
    .settings {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .settings {
        padding: 24px 16px;
    }
}

body.dark .settings {
    background: #1A1D1F;
}

.settings__menu {
    position: sticky;
    top: 116px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 280px;
}

@media only screen and (max-width: 1259px) {
    .settings__menu {
        width: 210px;
    }
}

@media only screen and (max-width: 1023px) {
    .settings__menu {
        display: none;
    }
}

.settings__link {
    padding: 8px 16px;
    border-radius: 8px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

.settings__link:not(:last-child) {
    margin-bottom: 8px;
}

.settings__link:hover,
.settings__link.active {
    color: #1A1D1F;
}

body.dark .settings__link:hover,
body.dark .settings__link.active {
    color: #FCFCFC;
}

.settings__link.active {
    background: #EFEFEF;
}

body.dark .settings__link.active {
    background: #272B30;
}

.settings__wrapper {
    flex-grow: 1;
    padding-left: 32px;
}

@media only screen and (max-width: 1023px) {
    .settings__wrapper {
        padding-left: 0;
    }
}

.settings__wrapper>.settings__button {
    margin-top: 48px;
}

@media only screen and (max-width: 1023px) {
    .settings__wrapper>.settings__button {
        margin-top: 32px;
    }
}

.settings__wrapper>.select {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .settings__wrapper>.select {
        display: block;
        margin-bottom: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .settings__wrapper>.select {
        margin-bottom: 24px;
    }
}

body.dark .settings__wrapper>.select {
    background: #272B30;
    box-shadow: 0 0 0 #272B30 inset;
}

.settings__item {
    position: relative;
}

.settings__item:not(:last-child) {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .settings__item:not(:last-child) {
        margin-bottom: 32px;
        padding-bottom: 32px;
    }
}

body.dark .settings__item:not(:last-child) {
    border-color: #272B30;
}

.settings__title {
    margin-bottom: 32px;
    line-height: 40px;
}

.settings__anchor {
    position: absolute;
    top: -116px;
    left: 0;
    right: 0;
}

@media only screen and (max-width: 1023px) {
    .settings__anchor {
        top: -106px;
    }
}

@media only screen and (max-width: 767px) {
    .settings__anchor {
        top: -90px;
    }
}

.settings__profile {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

@media only screen and (max-width: 1023px) {
    .settings__profile {
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .settings__profile>.settings__button {
        display: none;
    }
}

.settings__avatar {
    position: relative;
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    margin-right: 32px;
}

@media only screen and (max-width: 767px) {
    .settings__avatar {
        width: 80px;
        height: 80px;
        margin-right: 16px;
    }
}

.settings__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.settings__emove {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FCFCFC;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 0;
}

@media only screen and (max-width: 767px) {
    .settings__emove {
        display: inline-block;
    }
}

.settings__file {
    position: relative;
    display: inline-block;
    /* margin-right: 12px; */
    cursor: pointer;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .settings__file {
        margin-right: 0;
    }
}

.settings__file input {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 160px;
    opacity: 0;
}

@media only screen and (max-width: 767px) {
    .settings__file .settings__button {
        padding: 0 10px;
    }
}

.settings__file .settings__button .icon {
    width: 24px;
    height: 24px;
}

.settings__fieldset>.field:not(:last-child) {
    margin-bottom: 32px;
}

@media only screen and (max-width: 1023px) {
    .settings__fieldset>.field:not(:last-child) {
        margin-bottom: 24px;
    }
}

.settings__row {
    display: flex;
    margin: 0 -8px;
}

@media only screen and (max-width: 767px) {
    .settings__row {
        display: block;
        margin: 0;
    }
}

.settings__row .field {
    flex: 0 0 calc(50% - 16px);
    width: calc(50% - 16px);
    margin: 0 8px;
}

@media only screen and (max-width: 767px) {
    .settings__row .field {
        width: 100%;
        margin: 0;
    }

    .settings__row .field:not(:last-child) {
        margin-bottom: 24px;
    }
}

.settings__row:not(:last-child) {
    margin-bottom: 32px;
}

@media only screen and (max-width: 1023px) {
    .settings__row:not(:last-child) {
        margin-bottom: 24px;
    }
}

.settings__line {
    display: flex;
    padding-bottom: 16px;
}

.settings__line:not(:last-child) {
    margin-bottom: 32px;
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .settings__line:not(:last-child) {
        margin-bottom: 24px;
    }
}

body.dark .settings__line:not(:last-child) {
    border-color: #272B30;
}

.settings__label {
    margin-right: 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #33383F;
}

body.dark .settings__label {
    color: #EFEFEF;
}

.settings .tooltip {
    position: relative;
    top: -1px;
}

.settings .tooltip .icon {
    fill: #9A9FA5;
}

.settings .switch {
    margin-left: auto;
}

.settings__top {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .settings__top {
    border-color: #272B30;
}

.settings__top .settings__label {
    margin-right: 24px;
}

.settings__top .settings__button {
    margin-left: auto;
}

.settings__email {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

.settings__content {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

.packages {
    padding: 48px;
    background: #FCFCFC;
    border-radius: 8px;
}

@media only screen and (max-width: 1259px) {
    .packages {
        padding: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .packages {
        padding: 24px;
    }
}

body.dark .packages {
    background: #1A1D1F;
}

.packages__group {
    display: flex;
    flex-wrap: wrap;
    margin: -80px -80px 0;
}

@media only screen and (max-width: 1419px) {
    .packages__group {
        margin: -64px -64px 0;
    }
}

@media only screen and (max-width: 1023px) {
    .packages__group {
        display: block;
        margin: 0;
    }
}

.packages__item {
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
    margin-top: 80px;
    padding: 0 80px;
}

@media only screen and (max-width: 1419px) {
    .packages__item {
        margin-top: 64px;
        padding: 0 64px;
    }
}

@media only screen and (max-width: 1023px) {
    .packages__item {
        margin: 0;
        padding: 0;
    }
}

.packages__item:nth-child(2n+1) {
    border-right: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .packages__item:nth-child(2n+1) {
        border: none;
    }
}

body.dark .packages__item:nth-child(2n+1) {
    border-color: #272B30;
}

@media only screen and (max-width: 1023px) {
    .packages__item:not(:last-child) {
        margin-bottom: 48px;
        padding-bottom: 48px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .packages__item:not(:last-child) {
        border-color: #272B30;
    }
}

.packages__top {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 24px;
}

.packages__recommended {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    margin-left: 18px;
    padding: 0 14px;
    border-radius: 20px;
    background: #B5E4CA;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.84615;
}

body.dark .packages__recommended {
    color: #1A1D1F;
}

.packages__content {
    margin-bottom: 24px;
    color: #6F767E;
}

.packages__line {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 24px 0;
    border-width: 1px 0;
    border-style: solid;
    border-color: #EFEFEF;
}

body.dark .packages__line {
    border-color: #272B30;
}

.packages__percent {
    margin-right: 24px;
}

.packages__note {
    max-width: 190px;
    margin-right: auto;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.packages .tooltip {
    margin-left: 24px;
}

@media only screen and (max-width: 767px) {
    .packages .tooltip {
        display: none;
    }
}

.packages .tooltip .icon {
    width: 24px;
    height: 24px;
    fill: #9A9FA5;
}

.packages__list {
    flex-grow: 1;
}

.packages__list li {
    position: relative;
    padding-left: 40px;
    color: #33383F;
}

body.dark .packages__list li {
    color: #EFEFEF;
}

.packages__list li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.707 6.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0l-3.586-3.586a1 1 0 0 1 1.414-1.414l3.586 3.586a1 1 0 0 0 1.414 0l8.586-8.586a1 1 0 0 1 1.414 0z' fill='%23b5e4ca'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

.packages__list li:not(:last-child) {
    margin-bottom: 24px;
}

.packages__button {
    width: 100%;
    margin-top: 72px;
}

@media only screen and (max-width: 1023px) {
    .packages__button {
        margin-top: 48px;
    }
}

.packages:not(:last-child) {
    margin-bottom: 40px;
}

.faq__title {
    margin-bottom: 24px;
}

.faq__container {
    display: flex;
    padding: 48px;
    border-radius: 8px;
    background: #FCFCFC;
}

@media only screen and (max-width: 1259px) {
    .faq__container {
        padding: 32px;
    }
}

@media only screen and (max-width: 1023px) {
    .faq__container {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .faq__container {
        padding: 24px;
    }
}

body.dark .faq__container {
    background: #1A1D1F;
}

.faq__sidebar {
    flex-shrink: 0;
    width: 224px;
}

@media only screen and (max-width: 1023px) {
    .faq__sidebar {
        width: 100%;
        margin-bottom: 32px;
    }
}

.faq__menu {
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 1023px) {
    .faq__menu {
        display: none;
    }
}

.faq__link {
    padding: 8px 16px;
    border-radius: 8px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

.faq__link:not(:last-child) {
    margin-bottom: 8px;
}

.faq__link:hover,
.faq__link.active {
    color: #1A1D1F;
}

body.dark .faq__link:hover,
body.dark .faq__link.active {
    color: #FCFCFC;
}

.faq__link.active {
    background: #EFEFEF;
}

body.dark .faq__link.active {
    background: #272B30;
}

.faq .select {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .faq .select {
        display: block;
    }
}

body.dark .faq .select {
    background: #272B30;
    box-shadow: inset 0 0 0 2px #272B30;
}

.faq__wrapper {
    flex-grow: 1;
    padding-left: 64px;
}

@media only screen and (max-width: 1259px) {
    .faq__wrapper {
        padding-left: 48px;
    }
}

@media only screen and (max-width: 1023px) {
    .faq__wrapper {
        padding-left: 0;
    }
}

.faq__tab {
    display: none;
}

.faq__item:hover .faq__head .icon,
.faq__item.active .faq__head .icon {
    fill: #1A1D1F;
}

body.dark .faq__item:hover .faq__head .icon,
body.dark .faq__item.active .faq__head .icon {
    fill: #FCFCFC;
}

.faq__item.active .faq__head .icon {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.faq__item:not(:last-child) {
    margin-bottom: 24px;
}

.faq__head {
    position: relative;
    display: flex;
    padding-bottom: 12px;
    border-bottom: 1px solid #EFEFEF;
    color: #33383F;
    cursor: pointer;
    transition: color .2s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body.dark .faq__head {
    border-color: #272B30;
    color: #FCFCFC;
}

.faq__head .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 24px;
    fill: #6F767E;
    transition: all .2s;
}

.faq__subtitle {
    flex-grow: 1;
}

.faq__body {
    display: none;
    padding-top: 24px;
    font-weight: 500;
    color: #6F767E;
}

.messages {
    display: flex;
    height: 80vh;
    border-radius: 8px;
    background: #FCFCFC;
}
.messages.conference__popup.minutes__pvote{
    overflow: scroll;
}


.file__share {
    height: 80vh;
    border-radius: 8px;
    background: #FCFCFC;
    padding: 24px;
}

.js-popup-document .messages {
    height: 80vh;
}

.js-popup-document .schedule__control {
    display: flex;
    align-items: center;
    
    position: absolute;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    /* -webkit-transform: translateY(-50%); */
    
    transition: all .2s;
}

.js-popup-document .messages {
    /* height: 100%; */
    min-height: 80vh;
}

.js-popup-document .messenger__wrapper{
    padding: 0;
    overflow-y : scroll;
}

@media only screen and (max-width: 1419px) {
    .messages {
        /* min-height: 700px; */
        /* max-height: 80vh; */
        height: 86vh;
    }
}

@media only screen and (max-width: 1023px) {
    .messages {
        /* display: block; */
        display: flex;
        flex-direction: column;
        height: calc(100vh - 218px);
        padding: 0;
    }

    .messages.active .messages__users {
        display: none;
    }

    .messages.active .messages__messenger {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .messages {
        height: calc(100vh - 184px);
        display: flex;
        width: 100% !important;
    }

    .conference__vote {
        flex-direction: column;
        height: auto;
    }

    /* 모바일 높이 */
    .js-popup-vote .conference__vote {
        /* height: calc(100% - 50px); */
        /* overflow-y: scroll; */
    }

    .messages.conference__popup.conference__minutes {
        flex-direction: column;
        height: auto !important;
    }
}

body.dark .messages {
    background: #1A1D1F;
}

/* 진행 마감 투표 */
.messages__users {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 55%;
    margin-right: 12px;
    padding: 12px;
}

.conference__minutes .messages__users{
    width: 40%;
}


.media__content2.mt__5.mb__40 span {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 15px !important;
} 

@media only screen and (max-width: 1023px) {
    .conference__popup.conference__chatting .messages__users {
        width: 100%;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .messages__users {
        padding: 16px;
        /* max-width: 260px; */
    }

    .js-popup-vote .messages__users {
        height: 30%;
    }

    .conference__vote .messages__users {
        width: 100%;
        /* overflow: scroll; */
        height: 50%;
    }

    .conference__vote .messages__messenger {
        width: 100% !important;
    }

    /* 회의록 목록 */
    .conference__minutes .messages__users {
        width: 100%;
        max-width: 100%;
        padding: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.messages__nav {
    display: flex;
    margin-bottom: 36px;
    padding: 4px;
    border-radius: 20px;
    background: #F4F4F4;
}

@media only screen and (max-width: 1259px) {
    .messages__nav {
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .messages__nav {
        margin-bottom: 16px;
    }
}


body.dark .messages__nav {
    background: #111315;
}

.messages__link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 50%;
    height: 32px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: color .2s;
}

.messages__link .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    fill: #6F767E;
    transition: fill .2s;
}

.messages__link:hover,
.messages__link.active {
    color: #1A1D1F;
}

.messages__link:hover .icon,
.messages__link.active .icon {
    fill: #1A1D1F;
}

body.dark .messages__link:hover,
body.dark .messages__link.active {
    color: #FCFCFC;
}

body.dark .messages__link:hover .icon,
body.dark .messages__link.active .icon {
    fill: #FCFCFC;
}

.messages__link.active {
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
    background: #FCFCFC;
}

body.dark .messages__link.active {
    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.49), inset 0px 2px 1px rgba(255, 255, 255, 0.06);
    background: #272B30;
}

/*회의실 사이드 메뉴 팝업/ 목록 높이  */
.messages__list {
    max-height: 100%;
    margin: 0 0 16px;
    /* overflow-y: auto;     */
    -webkit-overflow-scrolling: touch;
}


@media only screen and (max-width: 767px) {
    .messages__list {
        /* margin: 0 -8px 16px; */
    }
}

.messages__item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media only screen and (max-width: 767px) {
    .messages__item {
        padding: 8px;
    }
}

.messages__item:hover,
.messages__item.active {
    background: #EFEFEF;
}

body.dark .messages__item:hover,
body.dark .messages__item.active {
    background: #272B30;
}

.messages__item.new .messages__head:after {
    background: var(--color-primary);
}

.messages__item.online .messages__avatar {
    position: relative;
}

.messages__item.online .messages__avatar:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #83BF6E;
    border: 4px solid #FCFCFC;
    transition: border-color .2s;
}

body.dark .messages__item.online .messages__avatar:before {
    border-color: #1A1D1F;
}

.messages__item.online:hover .messages__avatar:before {
    border-color: #EFEFEF;
}

body.dark .messages__item.online:hover .messages__avatar:before {
    border-color: #272B30;
}

.messages__item:not(:last-child) {
    margin-bottom: 8px;
}

@media only screen and (max-width: 767px) {
    .messages__item:not(:last-child) {
        margin-bottom: 0;
    }
}

.messages__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.messages__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.messages__details {
    flex: 0 0 calc(100% - 84px);
    max-width: calc(100% - 84px);
    padding-left: 12px;
}

.messages__head {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.messages__head:after {
    content: "";
    flex-shrink: 0;
    display: block;
    width: 12px;
    height: 12px;
    margin-left: 12px;
    border-radius: 50%;
    background: #9A9FA5;
    transition: background .2s;
}

.messages__man {
    margin-right: auto;
    font-weight: 700;
    line-height: 1.3;
    font-size: 15px;
    /* 2줄 말줄임 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 메모에 class="messages__man"만 width 90% */
.conference__popup.conference__memo .messages__man{
    width: 90%;
}

.messages__time {
    flex-shrink: 0;
    margin-left: 24px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

/* 진행 마감 투표 */
.messages__content {
    font-weight: 600;
    font-size: 13px;
    color: #9A9FA5;
    display: inline-block;
    margin-right: 12px;
    line-height: 1.3;
}

.messages.conference__popup.conference__minutes .messages__content{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.messages .form {
    width: 100%;
    margin-top: auto;
}

@media only screen and (max-width: 1023px) {
    /*.messages__messenger {
        display: none;
    }*/
}

.messenger {
    flex-grow: 1;
    border: 1px solid #EFEFEF;
    border-radius: 12px;
}

.conference__minutes .messenger{
    overflow: hidden;
}

@media only screen and (max-width: 1023px) {
    .messenger {
        height: 50%;
        border: none;
    }

    .conference__minutes .messenger{
        overflow: auto;
    }
}

body.dark .messenger {
    border-color: #272B30;
}

.messenger__wrapper {
    position: relative;
    height: calc(100% - 104px);
    padding: 96px 24px;
}

@media only screen and (max-width: 1023px) {
    .messenger__wrapper {
        height: calc(100% - 88px);
    }
}

@media only screen and (max-width: 767px) {
    .messenger__wrapper {
        height: calc(100% - 72px);
        padding: 64px 16px 72px;
    }
}

.messenger__wrapper>.messenger__button {
    position: absolute;
    top: 24px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media only screen and (max-width: 767px) {
    .messenger__wrapper>.messenger__button {
        top: 12px;
    }
}

.messenger__list {
    max-height: 100%;
    flex-grow: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.messenger__panel:nth-child() {
    padding: 24px;
    border-radius: 12px 12px 0 0;
    background: #F4F4F4;
}

@media only screen and (max-width: 1023px) {
    .messenger__panel {
        background: none;
        box-shadow: inset 0 -1px 0 0 #EFEFEF;
    }
}

@media only screen and (max-width: 767px) {
    .messenger__panel {
        padding: 16px;
    }
}

body.dark .messenger__panel {
    background: #272B30;
}

@media only screen and (max-width: 1023px) {
    body.dark .messenger__panel {
        background: none;
        box-shadow: inset 0 -1px 0 0 #272B30;
    }
}

.messenger__line {
    display: flex;
    align-items: center;
}

.messenger__line .messenger__man {
    margin-right: auto;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .messenger__line .messenger__man {
        font-size: 18px;
    }
}

.messenger__close {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 12px;
}

/* @media only screen and (max-width: 1023px) {
    .messenger__close {
        display: inline-block;
    }
} */

.messenger__close .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
}

@media only screen and (max-width: 1023px) {
    body.dark .messenger__close {
        background: #272B30;
    }
}

.messenger__parameters {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
}

.js-popup-memo .conference__btn {
   width: 100%;
}

@media only screen and (max-width: 1419px) {
    .messenger__parameters {
        margin-top: 8px;
    }
}

@media only screen and (max-width: 1023px) {
    .messenger__parameters {
        /* display: none; */
    }
}

.messenger__parameter {
    margin-left: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    font-weight: 500;
    color: #6F767E;
}

.messenger__parameter span {
    font-weight: 700;
    color: #33383F;
}

body.dark .messenger__parameter span {
    color: #FCFCFC;
}

.messenger__parameter:not(:first-child) {
    position: relative;
    padding-left: 14px;
}

.messenger__parameter:not(:first-child):before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 2px;
    height: 12px;
    border-radius: 2px;
    background: rgba(111, 118, 126, 0.51);
}

.messenger .actions__button {
    background: #FCFCFC !important;
}

body.dark .messenger .actions__button {
    background: rgba(17, 19, 21, 0.5) !important;
}

@media only screen and (max-width: 1023px) {
    body.dark .messenger .actions__button {
        background: #272B30 !important;
    }
}

body.dark .messenger .actions__body:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23111315'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 1023px) {
    body.dark .messenger .actions__body:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23272B30'/%3E%3C/svg%3E");
    }
}

.messenger__item {
    display: flex;
}

.messenger__item:not(:last-child) {
    margin-bottom: 32px;
}

.messenger__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.messenger__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.messenger__details {
    flex: 0 0 calc(100% - 40px);
    max-width: calc(100% - 40px);
    padding-left: 16px;
}

.messenger__head {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.messenger__head .messenger__man {
    color: #6F767E;
}

.messenger__time {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.messenger__content {
    font-weight: 500;
}

.messenger__content a {
    font-weight: 600;
    color: var(--color-primary);
}

.messenger__send {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .messenger__send {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
}

.messenger__file,
.messenger .smile {
    flex-shrink: 0;
    margin-right: 24px;
}

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

    .messenger__file,
    .messenger .smile {
        margin-right: 12px;
    }
}

.messenger__file {
    position: relative;
    overflow: hidden;
}

.messenger__file input {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 140px;
    opacity: 0;
}

.messenger__file .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.messenger__file input:hover+svg {
    fill: #1A1D1F;
}

body.dark .messenger__file input:hover+svg {
    fill: var(--color-primary);
}

.messenger__form {
    position: relative;
    flex-grow: 1;
}

.messenger__input {
    width: 100%;
    height: 48px;
    padding: 0 96px 0 10px;
    border-radius: 12px;
    border: 2px solid #EFEFEF;
    background: #F4F4F4;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #1A1D1F;
}

.messenger__input::-webkit-input-placeholder {
    color: #6F767E;
}

.messenger__input::-moz-placeholder {
    color: #6F767E;
}

.messenger__input:-ms-input-placeholder {
    color: #6F767E;
}

.messenger__input::-ms-input-placeholder {
    color: #6F767E;
}

.messenger__input::placeholder {
    color: #6F767E;
}

.messenger__input:focus {
    border-color: rgba(42, 133, 255, 0.35);
    background: #FFFFFF;
}

body.dark .messenger__input {
    background: #272B30;
    border-color: #272B30;
    color: #FCFCFC;
}

body.dark .messenger__input:focus {
    background: #111315;
}

.messenger__form .messenger__button {
    position: absolute;
    top: 50%;
    right: 4px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

button#chatMessageBtn[disabled] {
    background-color: #cecece;
    cursor: default;
}

.creators {
    padding: 24px;
    border-radius: 8px;
    background: #FCFCFC;
    overflow: hidden;
}

@media only screen and (max-width: 767px) {
    .creators {
        padding: 16px;
    }
}

body.dark .creators {
    background: #1A1D1F;
}

.creators__head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .creators__head {
        display: block;
    }
}

body.dark .creators__head {
    border-color: #272B30;
}

.creators__nav {
    display: flex;
    margin-right: auto;
}

@media only screen and (max-width: 767px) {
    .creators__nav {
        margin: 0 0 20px;
    }
}

.creators__link {
    padding: 8px 16px;
    text-align: center;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

@media only screen and (max-width: 767px) {
    .creators__link {
        flex-grow: 1;
    }
}

.creators__link:hover,
.creators__link.active {
    color: #1A1D1F;
}

body.dark .creators__link:hover,
body.dark .creators__link.active {
    color: #FCFCFC;
}

.creators__link.active {
    background: #EFEFEF;
}

body.dark .creators__link.active {
    background: #272B30;
}

.creators__link:not(:last-child) {
    margin-right: 8px;
}

.creators__info {
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.creators__item {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .creators__item {
    border-color: #272B30;
}

.creators__top {
    display: flex;
    align-items: center;
}

.creators__user {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.creators__avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 16px;
}

@media only screen and (max-width: 767px) {
    .creators__avatar {
        width: 64px;
        height: 64px;
    }
}

.creators__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.creators__line {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.creators__man {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .creators__man {
        font-size: 18px;
    }
}

.creators__number {
    margin-left: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
}

body.dark .creators__number {
    color: #1A1D1F;
}

.creators__parameters {
    display: flex;
    margin-left: -12px;
}

.creators__parameter {
    margin-left: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.creators__parameter span {
    color: #6F767E;
}

.creators__parameter:not(:first-child) {
    position: relative;
    padding-left: 14px;
}

.creators__parameter:not(:first-child):before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: #EFEFEF;
}

body.dark .creators__parameter:not(:first-child):before {
    background: #272B30;
}

.creators__btns {
    display: flex;
    margin-left: 24px;
}

@media only screen and (max-width: 767px) {
    .creators__btns {
        display: none;
    }
}

.creators__btns .creators__button span {
    display: none;
}

.creators__btns .creators__button:not(:last-child) {
    margin-right: 8px;
}

.creators__btns .creators__button:first-child.active {
    background: #EFEFEF;
    box-shadow: inset 0 0 0 3px #EFEFEF;
}

.creators__btns .creators__button:first-child.active span {
    display: inline;
}

body.dark .creators__btns .creators__button:first-child.active {
    background: transparent;
    box-shadow: 0 0 0 2px #6F767E inset;
}

.creators__products {
    display: flex;
    margin: 24px -24px 0;
    overflow: auto;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.creators__products::-webkit-scrollbar {
    display: none;
}

.creators__products:before,
.creators__products:after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 1px;
}

.creators__product {
    position: relative;
    flex-shrink: 0;
    width: 212px;
    height: 166px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.creators__product img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.creators__product:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 19, 21, 0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='18' fill='%23fcfcfc'/%3E%3Cpath d='M19.077 22.827c-.325.325-.325.853 0 1.178s.853.325 1.178 0l4.827-4.827c.651-.651.651-1.706 0-2.357l-4.827-4.827c-.325-.325-.853-.325-1.178 0s-.325.853 0 1.178l3.994 3.994H11.333c-.46 0-.833.373-.833.833s.373.833.833.833h11.738l-3.994 3.994z' fill='%236f767e'/%3E%3C/svg%3E") no-repeat 50% 50%/36px auto;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
}

.creators__product:hover:before {
    visibility: visible;
    opacity: 1;
}

.creators__product:not(:last-child) {
    margin-right: 12px;
}

.creators__foot {
    padding: 12px 0;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .creators__foot {
        padding: 0;
    }
}

.creators__foot .creators__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.indicators {
    background: #FCFCFC;
    border-radius: 8px;
}

body.dark .indicators {
    background: #1A1D1F;
}

.indicators__table {
    display: table;
    width: 100%;
}

.indicators__row {
    display: table-row;
}

.indicators__row:first-child .indicators__col {
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

@media only screen and (max-width: 767px) {
    .indicators__row:first-child .indicators__col {
        padding: 16px;
    }
}

.indicators__row:nth-child(2n) .indicators__col {
    background: rgba(239, 239, 239, 0.35);
}

body.dark .indicators__row:nth-child(2n) .indicators__col {
    background: rgba(17, 19, 21, 0.5);
}

.indicators__col {
    display: table-cell;
    padding: 16px;
    white-space: nowrap;
}

@media only screen and (max-width: 1259px) {
    .indicators__col {
        padding: 16px 8px;
    }
}

@media only screen and (max-width: 767px) {
    .indicators__col {
        padding-left: 16px;
    }
}

.indicators__col:first-child {
    padding-left: 24px;
    color: #6F767E;
}

@media only screen and (max-width: 1259px) {
    .indicators__col:first-child {
        font-size: 13px;
    }
}

@media only screen and (max-width: 767px) {
    .indicators__col:first-child {
        padding-left: 16px;
    }
}

.indicators__col:last-child {
    padding-right: 24px;
}

@media only screen and (max-width: 767px) {
    .indicators__col:nth-child(3n+1) {
        display: none;
    }
}

.indicators .tooltip {
    position: relative;
    top: -1px;
}

.indicators .tooltip .icon {
    fill: #9A9FA5;
}

.indicators__box {
    display: flex;
    align-items: center;
}

.indicators__line {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 12px;
    margin-left: 8px;
}

.indicators__progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 2px;
}

.indicators__progress_blue {
    background: var(--color-primary);
}

.indicators__progress_purple {
    background: #8E59FF;
}

.indicators .counter {
    padding: 0 7px;
    border-radius: 6px;
    background: #EFEFEF;
}

body.dark .indicators .counter {
    background: #272B30;
}

.indicators .balance {
    margin-top: 10px;
}

.link__title {
    margin-bottom: 16px;
    color: #6F767E;
}

.link__fieldset {
    margin-bottom: 32px;
}

.link__fieldset .select,
.link__fieldset .field {
    margin-bottom: 12px;
}

.link__box:not(:last-child) {
    margin-bottom: 32px;
}

.link__label {
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    font-weight: 500;
    color: #6F767E;
}

.link__line {
    display: flex;
    align-items: center;
}

.link__list {
    display: flex;
    margin-right: auto;
}

.link__avatar {
    position: relative;
    width: 48px;
    height: 48px;
}

.link__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.link__avatar:not(:last-child) {
    margin-right: 24px;
}

.link__icon {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background: var(--color-primary);
}

body.dark .link__icon {
    border-color: #1A1D1F;
}

.link__icon .icon {
    width: 12px;
    height: 12px;
    fill: #FCFCFC;
}

.link__button .icon {
    width: 24px;
    height: 24px;
}

.login {
    position: relative;
    display: flex;
    min-height: calc(var(--vh, 1vh) * 100);
    background: #FCFCFC;
}

body.dark .login {
    background: #1A1D1F;
}

.login__col {
    padding: 96px 24px;
}

@media only screen and (max-width: 767px) {
    .login__col {
        padding-bottom: 32px;
    }
}

.login__col:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 400px;
    background: #F4F4F4;
}

@media only screen and (max-width: 1023px) {
    .login__col:first-child {
        display: none;
    }
}

body.dark .login__col:first-child {
    background: #111315;
}

.login__col:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.login__wrap {
    max-width: 212px;
}

.login__preview {
    max-width: 180px;
    margin: 0 auto 40px;
}

.login__preview img {
    width: 100%;
}

.login__subtitle {
    margin-bottom: 48px;
    text-align: center;
}

.login__list li {
    position: relative;
    padding-left: 36px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
}

.login__list li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 8-8 7.98 7.98 0 0 1 5.942 2.644L11 13.586l-2.793-2.793a1 1 0 0 0-1.414 1.414L9.586 15a2 2 0 0 0 2.828 0l6.687-6.687C19.676 9.416 20 10.67 20 12z' fill='%2383bf6e'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

.login__list li:not(:last-child) {
    margin-bottom: 20px;
}

.login__logo {
    display: inline-block;
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    width: 48px;
}

.login__logo img {
    width: 100%;
}

.login__info {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

@media only screen and (max-width: 1023px) {
    .login__info {
        padding-left: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .login__info {
        right: 24px;
    }
}

.login__info a {
    font-weight: 700;
    color: #1A1D1F;
    transition: color .2s;
}

body.dark .login__info a {
    color: #FCFCFC;
}

.login__info a:hover {
    color: var(--color-primary);
}

.login__wrapper {
    max-width: 296px;
}

@media only screen and (max-width: 767px) {
    .login__wrapper {
        max-width: 100%;
    }
}

.login__title {
    margin-bottom: 32px;
}

.login__top {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 2px solid #EFEFEF;
}

body.dark .login__top {
    border-color: #272B30;
}

.login__text {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

.login__btns {
    display: flex;
    margin: 0 -4px;
}

.login__btns .login__button {
    flex: 0 0 calc(50% - 8px);
    width: calc(50% - 8px);
    margin: 0 4px;
    padding: 0 16px;
}

.login__btns .login__button img {
    margin-right: 10px;
}

.login__fieldset .login__button {
    width: 100%;
}

.login .field {
    margin-bottom: 12px;
}

.login__note {
    margin-top: 32px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #9A9FA5;
}

.login__code {
    display: none;
}

.login__row {
    display: flex;
    margin: 0 -6px;
}

.login__field {
    flex: 0 0 calc(25% - 12px);
    width: calc(25% - 12px);
    margin: 0 6px;
}

.login__field input {
    width: 100%;
    height: 72px;
    padding: 0 6px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: #EFEFEF;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 600;
    color: #1A1D1F;
    transition: all .2s;
}

.login__field input:focus {
    border-color: #9A9FA5;
    background: #FFFFFF;
}

body.dark .login__field input {
    background: #272B30;
    color: #FCFCFC;
}

body.dark .login__field input:focus {
    background: transparent;
}

.login__field input.error {
    background: rgba(255, 188, 153, 0.25);
    border-color: transparent;
    color: #FF6A55;
}

.login__error {
    display: none;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #FF6A55;
}

.login__code .login__button {
    width: 100%;
    margin-top: 12px;
}

.login__code .login__button .loader {
    display: none;
    margin-right: 16px;
}

.entry {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(var(--vh, 1vh) * 100);
    padding: 48px;
    background: #FCFCFC;
}

@media only screen and (max-width: 767px) {
    .entry {
        padding: 24px;
    }
}

body.dark .entry {
    background: #1A1D1F;
}

.entry__wrapper {
    max-width: 296px;
}

@media only screen and (max-width: 767px) {
    .entry__wrapper {
        max-width: 100%;
    }
}

.entry__logo {
    display: inline-block;
    width: 48px;
    margin-bottom: 32px;
}

.entry__logo img {
    width: 100%;
}

.entry__title {
    margin-bottom: 32px;
}

.entry__top {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 2px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .entry__top {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }
}

body.dark .entry__top {
    border-color: #272B30;
}

.entry__text {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

.entry__btns {
    display: flex;
    margin: 0 -4px;
}

.entry__btns .entry__button {
    flex: 0 0 calc(50% - 8px);
    width: calc(50% - 8px);
    margin: 0 4px;
    padding: 0 16px;
}

.entry__btns .entry__button img {
    margin-right: 10px;
}

.entry__fieldset .entry__button {
    width: 100%;
}

.entry .field {
    margin-bottom: 12px;
}

.entry__note {
    margin-top: 32px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #9A9FA5;
}

@media only screen and (max-width: 767px) {
    .entry__note {
        margin-top: 24px;
    }
}

.entry__info {
    margin-top: 32px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

@media only screen and (max-width: 767px) {
    .entry__info {
        margin-top: 24px;
    }
}

.entry__info a {
    font-weight: 700;
    color: #1A1D1F;
    transition: color .2s;
}

body.dark .entry__info a {
    color: #FCFCFC;
}

.entry__info a:hover {
    color: var(--color-primary);
}

body.dark .entry__info a:hover {
    color: var(--color-primary);
}

.income__list {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 1023px) {
    .income__list {
        display: block;
    }
}

.income__item {
    display: block;
    padding: 0 32px 0 64px;
    color: #1A1D1F;
}

@media only screen and (max-width: 1339px) {
    .income__item {
        padding-left: 48px;
    }
}

@media only screen and (max-width: 1259px) {
    .income__item {
        padding: 0 32px 0 24px;
    }
}

@media only screen and (max-width: 1023px) {
    .income__item {
        display: flex;
        padding: 0;
    }
}

.income__item:not(:first-child) {
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
    .income__item:not(:first-child) {
        margin-top: 16px;
        padding-top: 16px;
        border-width: 1px 0 0;
    }
}

body.dark .income__item:not(:first-child) {
    border-color: #272B30;
}

.income__item:first-child {
    padding-left: 0;
}

.income__item:last-child {
    padding-right: 0;
}

.income__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 50%;
}

@media only screen and (max-width: 1023px) {
    .income__icon {
        margin: 0 16px 0 0;
    }
}

.income__icon .icon {
    width: 24px;
    height: 24px;
    fill: #1A1D1F;
}

.income__label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.income .tooltip .icon {
    fill: #6F767E;
}

.income__counter {
    min-width: 238px;
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

@media only screen and (max-width: 1339px) {
    .income__counter {
        min-width: 200px;
    }
}

@media only screen and (max-width: 1023px) {
    .income__counter {
        min-width: auto;
        font-size: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .income__counter {
        font-size: 32px;
    }
}

body.dark .income__counter {
    color: #FCFCFC;
}

.income__indicator {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 4px;
    color: #6F767E;
}

body.dark .income__indicator {
    background: #272B30;
    border-radius: 8px;
}

.income__indicator span {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
}

.countries__item {
    display: flex;
    align-items: center;
    color: #33383F;
}

body.dark .countries__item {
    color: #EFEFEF;
}

.countries__item:not(:last-child) {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .countries__item:not(:last-child) {
    border-color: #272B30;
}

.countries__flag {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 50%;
    background: #EFEFEF;
}

body.dark .countries__flag {
    background: #272B30;
}

.countries__price {
    margin-left: auto;
    padding-left: 20px;
    color: #1A1D1F;
}

body.dark .countries__price {
    color: #FCFCFC;
}

.earning {
    padding-bottom: 24px;
    background: #FCFCFC;
    border-radius: 8px;
}

body.dark .earning {
    background: #1A1D1F;
}

.earning__table {
    display: table;
    width: 100%;
}

.earning__row {
    display: table-row;
}

.earning__row:first-child .earning__col {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

.earning__row:nth-child(2n) .earning__col {
    background: rgba(239, 239, 239, 0.35);
}

body.dark .earning__row:nth-child(2n) .earning__col {
    background: rgba(39, 43, 48, 0.3);
}

.earning__col {
    display: table-cell;
    padding: 10px 16px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.71429;
}

.earning__col:first-child {
    padding-left: 24px;
    white-space: nowrap;
    color: #6F767E;
}

@media only screen and (max-width: 767px) {
    .earning__col:first-child {
        padding-left: 16px;
    }
}

@media only screen and (max-width: 767px) {
    .earning__col:nth-child(2) {
        display: none;
    }
}

.earning__col:last-child {
    padding-right: 24px;
}

@media only screen and (max-width: 767px) {
    .earning__col:last-child {
        padding-right: 16px;
    }
}

.earning__status {
    font-size: 14px;
    line-height: 28px;
    font-weight: 600;
}

@media only screen and (max-width: 767px) {
    .refunds .card__head {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .refunds .card__title {
        margin: 0 0 16px;
    }
}

.refunds .card__nav {
    display: flex;
    margin-left: auto;
}

.refunds .card__nav .card__link {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

@media only screen and (max-width: 767px) {
    .refunds .card__nav .card__link {
        flex: 1;
    }
}

.refunds .card__nav .card__link:hover,
.refunds .card__nav .card__link.active {
    color: #1A1D1F;
}

body.dark .refunds .card__nav .card__link:hover,
body.dark .refunds .card__nav .card__link.active {
    color: #FCFCFC;
}

.refunds .card__nav .card__link.active {
    background: #EFEFEF;
}

body.dark .refunds .card__nav .card__link.active {
    background: #272B30;
}

.refunds .card__nav .card__link:not(:last-child) {
    margin-right: 4px;
}

@media only screen and (max-width: 767px) {
    .refunds .card__nav .card__link:not(:last-child) {
        margin-right: 0;
    }
}

.refunds__wrapper {
    margin: 0 -12px;
}

@media only screen and (max-width: 767px) {
    .refunds__wrapper {
        margin: 0;
    }
}

.refunds__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .refunds__table {
        display: block;
    }
}

.refunds__row {
    display: table-row;
}

@media only screen and (max-width: 767px) {
    .refunds__row {
        display: flex;
    }
}

@media only screen and (max-width: 767px) {
    .refunds__row:first-child {
        margin-bottom: 24px;
    }
}

.refunds__row:first-child .refunds__col {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

.refunds__row:not(:first-child) {
    cursor: pointer;
    transition: background .2s;
}

@media only screen and (max-width: 767px) {
    .refunds__row:not(:first-child) {
        align-items: flex-start;
    }
}

.refunds__row:not(:first-child) .refunds__col {
    position: relative;
    vertical-align: top;
    padding: 16px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #1A1D1F;
}

body.dark .refunds__row:not(:first-child) .refunds__col {
    color: #FCFCFC;
}

@media only screen and (max-width: 767px) {
    .refunds__row:not(:first-child) .refunds__col {
        padding: 0;
    }
}

.refunds__row:not(:first-child) .refunds__col:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
    .refunds__row:not(:first-child) .refunds__col:after {
        display: none;
    }
}

body.dark .refunds__row:not(:first-child) .refunds__col:after {
    background: #272B30;
}

.refunds__row:not(:first-child) .refunds__col:first-child:after {
    left: 12px;
}

.refunds__row:not(:first-child) .refunds__col:not(:first-child) {
    padding-top: 22px;
}

@media only screen and (max-width: 767px) {
    .refunds__row:not(:first-child) .refunds__col:not(:first-child) {
        padding: 0;
    }
}

.refunds__row:not(:first-child) .refunds__col:last-child:after {
    right: 12px;
}

@media only screen and (min-width: 768px) {
    .refunds__row:not(:first-child):hover {
        background: #F4F4F4;
    }

    body.dark .refunds__row:not(:first-child):hover {
        background: #272B30;
    }
}

@media only screen and (max-width: 767px) {
    .refunds__row:not(:first-child):not(:last-child) {
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .refunds__row:not(:first-child):not(:last-child) {
        border-color: #272B30;
    }
}

.refunds__col {
    display: table-cell;
    padding: 4px 12px 16px;
}

@media only screen and (max-width: 767px) {
    .refunds__col {
        padding: 0;
    }
}

.refunds__col:first-child {
    border-radius: 8px 0 0 8px;
}

@media only screen and (max-width: 767px) {
    .refunds__col:first-child {
        margin-right: auto;
    }
}

@media only screen and (max-width: 767px) {
    .refunds__col:nth-child(2) {
        display: none;
    }
}

@media only screen and (max-width: 1023px) {
    .refunds__col:nth-child(3) {
        display: none;
    }
}

.refunds__col:last-child {
    border-radius: 0 8px 8px 0;
}

.refunds__item {
    display: flex;
    align-items: center;
}

.refunds__item .refunds__new,
.refunds__item .refunds__progress {
    display: none;
}

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

    .refunds__item .refunds__new,
    .refunds__item .refunds__progress {
        display: inline-block;
    }
}

.refunds__preview {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.refunds__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.refunds__product {
    max-width: 170px;
    margin-bottom: 4px;
    font-size: 15px;
}

.refunds__category {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

@media only screen and (max-width: 767px) {
    .refunds__category {
        display: none;
    }
}

.refunds__new,
.refunds__progress {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

body.dark .refunds__new,
body.dark .refunds__progress {
    color: #111315;
}

.refunds__new {
    background: #B5E4CA;
}

.refunds__progress {
    background: #CABDFF;
}

.refunds__user {
    display: flex;
    align-items: center;
    margin-top: -2px;
}

@media only screen and (max-width: 767px) {
    .refunds__user {
        font-size: 0;
    }
}

.refunds__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

@media only screen and (max-width: 767px) {
    .refunds__avatar {
        margin-right: 0;
    }
}

.refunds__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.refunds__foot {
    margin-top: 12px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .refunds__foot {
        margin-top: 32px;
    }
}

.refunds__foot .refunds__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.description__title {
    margin-bottom: 24px;
}

.description__row {
    display: flex;
}

@media only screen and (max-width: 1023px) {
    .description__row {
        display: block;
    }
}

.description__col {
    flex: 0 0 50%;
}

.description__col:first-child {
    padding: 24px;
    border-radius: 12px;
    background: rgba(244, 244, 244, 0.5);
}

@media only screen and (max-width: 1023px) {
    .description__col:first-child {
        margin-bottom: 48px;
    }
}

@media only screen and (max-width: 767px) {
    .description__col:first-child {
        margin-bottom: 32px;
        padding: 16px;
    }
}

body.dark .description__col:first-child {
    background: #272B30;
}

.description__col:nth-child(2) {
    padding: 30px 0 0 24px;
}

@media only screen and (max-width: 1023px) {
    .description__col:nth-child(2) {
        padding: 0;
    }
}

.description__product {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.description__preview {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.description__preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.description__subtitle {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .description__subtitle {
        font-size: 18px;
    }
}

.description__category {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.description__new,
.description__progress {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.description__new {
    background: #B5E4CA;
}

body.dark .description__new {
    color: #1A1D1F;
}

.description__progress {
    background: #CABDFF;
}

.description__parameters li {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(17, 19, 21, 0.1);
}

body.dark .description__parameters li {
    border-color: rgba(111, 118, 126, 0.15);
}

.description__label {
    margin-right: auto;
    padding-right: 12px;
    color: #6F767E;
}

.description .tooltip {
    position: relative;
    top: -1px;
}

.description .tooltip .icon {
    fill: #6F767E;
}

.description__yes,
.description__no {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

body.dark .description__yes,
body.dark .description__no {
    color: #1A1D1F;
}

.description__yes {
    background: #B5E4CA;
}

.description__no {
    background: #FFBC99;
}

.description__content {
    text-align: right;
}

.description__btns {
    display: flex;
    margin: 24px -4px 0;
}

.description__btns .description__button {
    flex: 0 0 calc(50% - 8px);
    width: calc(50% - 8px);
    margin: 0 4px;
}

@media only screen and (max-width: 767px) {
    .description__btns .description__button {
        padding: 0 8px;
    }
}

body.dark .description__btns .description__button:first-child {
    background: #111315;
    box-shadow: inset 0 0 0 2px #111315;
}

body.dark .description__btns .description__button:first-child:hover {
    box-shadow: inset 0 0 0 2px #FCFCFC;
}

.description__box:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(17, 19, 21, 0.1);
}

.description__info {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .description__info {
        font-size: 18px;
    }
}

.description__list li {
    position: relative;
    padding-left: 36px;
    font-weight: 500;
    color: #33383F;
}

body.dark .description__list li {
    color: #EFEFEF;
}

.description__list li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.707 6.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0l-3.586-3.586a1 1 0 0 1 1.414-1.414l3.586 3.586a1 1 0 0 0 1.414 0l8.586-8.586a1 1 0 0 1 1.414 0z' fill='%23b5e4ca'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

.description__list li:not(:last-child) {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .description__list li:not(:last-child) {
    border-color: #272B30;
}

.description__comment {
    margin-bottom: 12px;
    font-weight: 500;
    color: #33383F;
}

body.dark .description__comment {
    color: #EFEFEF;
}

.description__user {
    display: flex;
    align-items: center;
}

.description__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

.description__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.description .editor {
    margin-top: 32px;
}

@media only screen and (max-width: 767px) {
    .description .editor {
        margin-top: 24px;
    }
}

.balance {
    display: flex;
}

@media only screen and (max-width: 1023px) {
    .balance {
        display: block;
    }
}

.balance__list {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    margin-right: 64px;
}

@media only screen and (max-width: 1259px) {
    .balance__list {
        margin-right: 48px;
    }
}

@media only screen and (max-width: 1023px) {
    .balance__list {
        display: block;
        margin: 0 0 32px;
    }
}

.balance__item {
    display: flex;
    padding: 0 64px;
    border-right: 1px solid #EFEFEF;
    color: #1A1D1F;
}

@media only screen and (max-width: 1419px) {
    .balance__item {
        padding: 0 48px;
    }
}

@media only screen and (max-width: 1339px) {
    .balance__item {
        padding: 0 32px;
    }
}

@media only screen and (max-width: 1023px) {
    .balance__item {
        padding: 0;
        border: none;
    }
}

body.dark .balance__item {
    border-color: #272B30;
    color: #FCFCFC;
}

.balance__item:first-child {
    padding-left: 0;
}

@media only screen and (max-width: 1023px) {
    .balance__item:not(:last-child) {
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .balance__item:not(:last-child) {
        border-color: #272B30;
    }
}

.balance__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 24px;
    border-radius: 50%;
}

.balance__icon .icon {
    width: 24px;
    height: 24px;
    fill: #1A1D1F;
}

.balance__label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
}

.balance .tooltip .icon {
    fill: #6F767E;
}

.balance__counter {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

@media only screen and (max-width: 1339px) {
    .balance__counter {
        font-size: 40px;
    }
}

.balance__button {
    flex-shrink: 0;
}

@media only screen and (max-width: 767px) {
    .balance__button {
        width: 100%;
    }
}

.success {
    padding: 60px 0 24px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .success {
        padding: 32px 0 16px;
    }
}

.success__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 128px;
    height: 128px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #B5E4CA;
    font-size: 48px;
}

.success__info {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: #33383F;
}

@media only screen and (max-width: 767px) {
    .success__info {
        font-size: 18px;
    }
}

body.dark .success__info {
    color: #EFEFEF;
}

.success__price {
    margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
    .success__price {
        font-size: 40px;
    }
}

.success__text {
    margin-bottom: 20px;
    color: #6F767E;
}

.success__text span {
    color: #1A1D1F;
}

body.dark .success__text span {
    color: #FCFCFC;
}

.payout__wrapper {
    margin: 0 -24px;
    background: #FCFCFC;
}

@media only screen and (max-width: 767px) {
    .payout__wrapper {
        margin: 0 -16px;
    }
}

body.dark .payout__wrapper {
    background: transparent;
}

.payout__table {
    display: table;
    width: 100%;
}

.payout__row {
    display: table-row;
}

.payout__row:first-child .payout__col {
    padding-top: 12px;
    padding-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

.payout__row:nth-child(2n) .payout__col {
    background: rgba(239, 239, 239, 0.35);
}

body.dark .payout__row:nth-child(2n) .payout__col {
    background: rgba(39, 43, 48, 0.5);
}

.payout__col {
    display: table-cell;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
}

@media only screen and (max-width: 767px) {
    .payout__col {
        padding: 12px;
    }
}

.payout__col:first-child {
    padding-left: 24px;
    color: #6F767E;
}

@media only screen and (max-width: 767px) {
    .payout__col:first-child {
        padding-left: 16px;
    }
}

.payout__col:last-child {
    padding-right: 24px;
}

@media only screen and (max-width: 767px) {
    .payout__col:last-child {
        padding-right: 16px;
        text-align: right;
    }
}

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

    .payout__col:nth-child(2),
    .payout__col:nth-child(3) {
        display: none;
    }
}

.payout__status {
    font-size: 14px;
    line-height: 28px;
    font-weight: 600;
    color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
    .transactions .card__head {
        flex-wrap: wrap;
    }

    .transactions .card__head .card__title {
        width: 100%;
        flex-grow: 1;
        margin: 0 0 16px;
    }
}

.transactions .card__button {
    margin-left: 16px;
}

@media only screen and (max-width: 767px) {
    .transactions .card__button {
        flex-grow: 1;
    }
}

.transactions__wrapper {
    margin: 0 -24px;
    background: #FCFCFC;
}

@media only screen and (max-width: 767px) {
    .transactions__wrapper {
        margin: 0 -16px;
    }
}

body.dark .transactions__wrapper {
    background: transparent;
}

.transactions__table {
    display: table;
    width: 100%;
}

@media only screen and (max-width: 1023px) {
    .transactions__table {
        display: block;
    }
}

.transactions__row {
    display: table-row;
}

@media only screen and (max-width: 1023px) {
    .transactions__row {
        display: flex;
        flex-direction: column;
        padding: 16px 24px;
    }
}

@media only screen and (max-width: 767px) {
    .transactions__row {
        padding: 16px;
    }

[p-select="file-share-list"] .transactions__col {
    margin-bottom: 0px !important;
    padding: 0px !important;
    width: 25%;
    text-align: center;
    display: flex !important;
    justify-content: center;
    align-items: center;
    line-height: 40px;
}

.transactions__col {
}
}

@media only screen and (max-width: 1023px) {
    .transactions__row:first-child {
        display: none;
    }
}

.transactions__row:first-child .transactions__col {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 1em;
    font-weight: 700;
    /* line-height: 1.3333; */
    font-weight: 500;
    color: #6F767E;
}

@media only screen and (max-width: 1023px) {
    .transactions__row:nth-child(2n) {
        background: rgba(239, 239, 239, 0.35);
    }

.transactions__row.participant-item {
    display: flex;
    flex-direction: unset;
    width: 100%;
    justify-content: space-around;
}

    body.dark .transactions__row:nth-child(2n) {
        background: rgba(39, 43, 48, 0.5);
    }
}

.transactions__row:nth-child(2n) .transactions__col {
    background: rgba(239, 239, 239, 0.35);
}

@media only screen and (max-width: 1023px) {
    .transactions__row:nth-child(2n) .transactions__col {
        background: none;
    }
}

body.dark .transactions__row:nth-child(2n) .transactions__col {
    background: rgba(39, 43, 48, 0.5);
}

@media only screen and (max-width: 1023px) {
    body.dark .transactions__row:nth-child(2n) .transactions__col {
        background: none;
    }
}

.transactions__col {
    display: table-cell;
    padding: 10px 16px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.71429;
}

@media only screen and (max-width: 1023px) {
    .transactions__col {
        display: flex;
        align-items: center;
        padding: 0;
    }

#wa-conference-management-detail .transactions__col {
    margin: 0px;
    padding: 0px;
}
}

.transactions__col:first-child {
    padding-left: 24px;
}

@media only screen and (max-width: 1023px) {
    .transactions__col:first-child {
        padding-left: 0;
    }
}

@media only screen and (max-width: 1023px) {
    .transactions__col:nth-child(2) {
        align-items: flex-start;
        order: -1;
        padding-bottom: 12px;
        border-bottom: 1px solid #EFEFEF;
    }

    body.dark .transactions__col:nth-child(2) {
        border-color: #272B30;
    }
}

@media only screen and (max-width: 1023px) {
    .transactions__col:nth-child(3) {
        display: none;
    }
}

.transactions__col:last-child {
    padding-right: 24px;
}

@media only screen and (max-width: 1023px) {
    .transactions__col:last-child {
        padding-right: 0;
    }
}

@media only screen and (max-width: 1023px) {
    .transactions__col:not(:last-child) {
        margin-bottom: 12px;
    }
}

.transactions__status {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 14px;
    line-height: 28px;
    font-weight: 600;
    color: #1A1D1F;
}

.transactions__details {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .transactions__details {
        display: block;
        margin-right: auto;
        padding-right: 16px;
    }
}

.transactions__product {
    color: #33383F;
}

body.dark .transactions__product {
    color: #EFEFEF;
}

.transactions__invoice {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33333;
    font-weight: 500;
    color: #6F767E;
}

.transactions__amount_negative {
    color: #FF6A55;
}

.transactions__foot {
    padding: 12px 0;
    text-align: center;
}

.transactions__foot .transactions__button .loader {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0 18px 0 8px;
}

.transactions__label {
    display: none;
    margin-right: auto;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.71429;
    color: #6F767E;
}

@media only screen and (max-width: 1023px) {
    .transactions__label {
        display: block;
    }
}

.shop__background {
    height: 400px;
    margin: -40px -40px 0;
}

@media only screen and (max-width: 1339px) {
    .shop__background {
        margin: -32px -24px 0;
    }
}

@media only screen and (max-width: 1259px) {
    .shop__background {
        height: 320px;
    }
}

@media only screen and (max-width: 767px) {
    .shop__background {
        height: 252px;
        margin: -24px -16px 0;
    }
}

.shop__background img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.shop .card {
    max-width: 1200px;
    margin: -64px auto 0;
}

@media only screen and (max-width: 767px) {
    .shop .card {
        margin-top: -188px;
    }
}

.shop__profile {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1259px) {
    .shop__profile {
        margin-bottom: 32px;
        padding-bottom: 32px;
    }
}

@media only screen and (max-width: 1023px) {
    .shop__profile {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .shop__profile {
        margin-bottom: 32px;
        padding-bottom: 32px;
    }
}

body.dark .shop__profile {
    border-color: #272B30;
}

.shop__details {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

@media only screen and (max-width: 1023px) {
    .shop__details {
        margin-bottom: 16px;
    }
}

@media only screen and (max-width: 767px) {
    .shop__details {
        margin-bottom: 12px;
    }
}

.shop__avatar {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 16px;
}

.shop__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.shop__add {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--color-primary);
    font-size: 0;
    transition: background .2s;
}

.shop__add .icon {
    fill: #FFFFFF;
}

.shop__add:hover {
    background: #1176ff;
}

@media only screen and (max-width: 767px) {
    .shop__man {
        font-size: 20px;
    }
}

.shop__info {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: #6F767E;
}

@media only screen and (max-width: 767px) {
    .shop__info {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .shop__info {
        margin-top: 4px;
        font-size: 15px;
    }
}

.shop__contacts {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 40px;
}

@media only screen and (max-width: 1023px) {
    .shop__contacts {
        margin-left: 0;
    }
}

.shop__socials {
    display: flex;
    align-items: center;
}

.shop__social .icon {
    width: 24px;
    height: 24px;
    fill: #6F767E;
    transition: fill .2s;
}

.shop__social:hover .icon {
    fill: var(--color-primary);
}

.shop__social:not(:last-child) {
    margin-right: 32px;
}

.shop__contacts .shop__button {
    margin-left: 32px;
}

@media only screen and (max-width: 1023px) {
    .shop__contacts .shop__button {
        margin-left: auto;
    }
}

@media only screen and (max-width: 767px) {
    .shop__contacts .shop__button {
        min-width: 132px;
    }
}

.shop__control {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
    .shop__control {
        flex-wrap: wrap;
    }
}

.shop__nav {
    display: flex;
    margin-right: auto;
}

@media only screen and (max-width: 767px) {
    .shop__nav {
        width: 100%;
        margin: 0 0 16px;
    }
}

.shop__nav .shop__link {
    padding: 8px 16px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.6;
    color: #6F767E;
    transition: all .2s;
}

@media only screen and (max-width: 767px) {
    .shop__nav .shop__link {
        flex-grow: 1;
    }
}

.shop__nav .shop__link:hover,
.shop__nav .shop__link.active {
    color: #1A1D1F;
}

body.dark .shop__nav .shop__link:hover,
body.dark .shop__nav .shop__link.active {
    color: #FCFCFC;
}

.shop__nav .shop__link.active {
    background: #EFEFEF;
}

body.dark .shop__nav .shop__link.active {
    background: #272B30;
}

.shop__nav .shop__link:not(:last-child) {
    margin-right: 8px;
}

@media only screen and (max-width: 767px) {
    .shop__nav .shop__link:not(:last-child) {
        margin-right: 0;
    }

a.shop__link.js-tabs-link.pos__rel {
    font-size: 1rem;
}
}

@media only screen and (max-width: 767px) {
    .shop__select {
        flex-grow: 1;
    }
}

.shop .filters {
    margin-left: 16px;
}

@media only screen and (max-width: 767px) {
    .shop .filters {
        margin-left: 12px;
    }
}

.shop__products {
    display: flex;
    flex-wrap: wrap;
    margin: -32px -12px 0;
}

@media only screen and (max-width: 639px) {
    .shop__products {
        display: block;
        margin: 0;
    }
}

.shop .summary {
    flex: 0 0 calc(33.333% - 24px);
    width: calc(33.333% - 24px);
    margin: 32px 12px 0;
}

@media only screen and (max-width: 1023px) {
    .shop .summary {
        flex: 0 0 calc(50% - 24px);
        width: calc(50% - 24px);
    }
}

@media only screen and (max-width: 639px) {
    .shop .summary {
        width: 100%;
        margin: 24px 0 0;
    }
}

.shop__foot {
    margin-top: 40px;
    text-align: center;
}

@media only screen and (max-width: 1339px) {
    .shop__foot {
        margin-top: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .shop__foot {
        margin-top: 24px;
    }
}

.follower {
    display: flex;
    align-items: flex-start;
    padding-bottom: 24px;
}

.follower:not(:last-child) {
    margin-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
}

body.dark .follower:not(:last-child) {
    border-color: #272B30;
}

.follower__details {
    display: flex;
    padding-right: 24px;
    flex-grow: 1;
}

@media only screen and (max-width: 1023px) {
    .follower__details {
        padding-right: 0;
    }
}

.follower__avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 16px;
}

@media only screen and (max-width: 767px) {
    .follower__avatar {
        width: 64px;
        height: 64px;
    }
}

.follower__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.follower__man {
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
}

@media only screen and (max-width: 767px) {
    .follower__man {
        font-size: 18px;
    }
}

.follower__list {
    display: flex;
    align-items: center;
}

.follower__counter {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
}

.follower__counter span {
    color: #6F767E;
}

.follower__counter:not(:first-child) {
    position: relative;
    margin-left: 12px;
    padding-left: 14px;
}

.follower__counter:not(:first-child):before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: #EFEFEF;
}

body.dark .follower__counter:not(:first-child):before {
    background: #272B30;
}

.follower__gallery {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    width: 480px;
    margin: -12px -6px 0 0;
}

@media only screen and (max-width: 1023px) {
    .follower__gallery {
        display: none;
    }
}

.follower__preview {
    flex: 0 0 calc(33.333% - 12px);
    width: calc(33.333% - 12px);
    height: 116px;
    margin: 12px 6px 0;
}

.follower__preview img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    -o-object-fit: cover;
    object-fit: cover;
}

.follower__preview:nth-child(n+4) {
    display: none;
}

.follower__btns {
    display: flex;
    margin-top: 16px;
}

.follower__btns .follower__button_follow span {
    display: none;
}

.follower__btns .follower__button_follow.active {
    box-shadow: inset 0 0 0 2px #EFEFEF;
    background: #EFEFEF;
}

body.dark .follower__btns .follower__button_follow.active {
    box-shadow: inset 0 0 0 2px #33383F;
    background: #272B30;
}

.follower__btns .follower__button_follow.active span {
    display: inline;
}

.follower__btns .follower__button:not(:last-child) {
    margin-right: 8px;
}

.fullcalendar {
    height: 80vh;
}


#whiteboard__layer {display: none;}
#outerContainer {display: none;}
#whiteboard__layer.show {display: block;}
#outerContainer.show {display: block;}



/*220629 ADD*/
#whiteboard__layer {display: none;position: absolute;z-index: 99;width: 100%;height: 100%;}
#outerContainer {display: none; position: absolute;}
#whiteboard__layer.show {display: block;}
#outerContainer.show {display: block;}
.popup.visible {z-index: 100000;}

#whiteboard__layer #toolbar {
    user-select: none;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    top: 114px !important;
    background: #fff;
    left: 0px !important;
    position: fixed !important;
}

#whiteboardContainer {height: 100% !important;}
.messenger__item.me{
    text-align: right;
}

.messenger__item.me .messenger__head {
    justify-content: flex-end;
}

.messenger__item.me .messenger__details {
    padding-left: 0px; padding-right: 16px;
}
.popup__loading {
    font-size: 1.5em;
    display: none;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000000000000000000000000000;
    width: 100%;
    height: 100%;
    position: fixed;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.popup__loading.show {
    display: flex;
}

.js-popup-date-list .js-popup-wrap,
.js-popup-date-list .product__wrapper,
.js-popup-date-list .create__conference,
.js-popup-date-list .js-product {height: 100%;}
.js-popup-date-list .conference__fieldset {height: calc(100% - 70px); padding: 15px;}
.js-popup-date-list .schedule__tlayer {height: calc(100% - 110px); overflow-y: auto;}
.js-popup-date-list .create__conference {width: 1024px;}

[data-theme="tippyTheme"] 

body:not(.tippy-type2) .tippy-box,
.tippy-box:not([data-theme="tippyTheme"]) {
    background-color: rgba(0,0,0,0) !important;
}

body:not(.tippy-type2) .tippy-arrow,
.tippy-box:not([data-theme="tippyTheme"]) .tippy-arrow{
    color: #fff !important;
}

body:not(.tippy-type2) .tippy-content,
.tippy-box:not([data-theme="tippyTheme"]) .tippy-content {
    padding: 0px !important;
}
body:not(.tippy-type2) .tippy-box[data-placement^=top]>.tippy-arrow,
.tippy-box[data-placement^=top]:not([data-theme="tippyTheme"]) > .tippy-arrow {
    bottom: -3px;
    z-index: 10;
}

.list__item.actions__body {
    width: auto;
    position: unset;
    top: unset;
    right: unset;
    z-index: unset;
    visibility: unset;
    opacity: unset;
}

.list__item.actions__body:before {
    display: none !important;
}

.conf-board-icon {
    width: 36px !important;
    height: 36px !important;
}

.conf-board-icon2 {
    width: 26px !important;
    height: 26px !important;
    z-index: 1;
    position: relative;
    top: 10px;
    left: 10px;
}

.conf-board-icon3 {
    width: 24px !important;
    height: 24px !important;
}

.md__list {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.schedule__subtitle {color: #939393;; font-size: 0.9em;}

[p-select="schedule-header"] .schedule__col {color: #939393;}

/*Print : S*/
.report__form {
    width: 595px;
    height: 842px;
    position: relative;
    background-color: #fff;
    color-scheme: light;
    color: #000;
}

.report__form .report__bar {
    width: 100%;
    height: 30px;
    background-color: #219cc5;
    position: absolute;
    top: 0px;
    left: 0px;
}

.report__form .report__bar2 {
    width: 100%;
    height: 30px;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.report__form .report__title {
    text-align: center;
    font-size: 30px;
    padding: 0px 0px 20px 0px;
    color: #1b5378;
    font-weight: bold;
}

.report__form .report__table {
    width: 100%;
}

.report__form .report__table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0px;
    padding: 0px;
}

.report__form .report__table table tr {
    border-bottom: 1px #d7d7d7 solid;
}

.report__form .report__table table tr:first-child {
    border-top: 4px #000 solid;
}

.report__form .report__table table th {
    background: #f4f4f4;
    border-left: 1px #f4f4f4 solid;
    border-top: none;
    padding: 8px 0px;
}

.report__form .report__table table td {
    border-left: 1px #f4f4f4 solid;
    padding: 0px 20px;
    border-top: none;
}

.report__form .report__subtitle {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 20px 10px 30px;
    position: relative;
    margin-top: 20px;
}

.report__form .report__subtitle:before {
    content: "■";
    position: absolute;
    font-size: 14px;
    left: 7px;
    top: 13px;
}

.report__form .report__content {
    border-top: 4px #000 solid;
    padding: 20px;
    border-bottom: 1px #000 solid;
}

.report__form {
    width: 21cm;
    min-height: 29.7cm;
    padding: 1cm;
    margin: 1cm auto;
    border-radius: 5px;
    background: #FFFFFF;
    color-scheme: light;
    color: #000;
}

/* 다크모드에서도 인쇄 영역은 항상 라이트 모드 유지 */
body.dark .report__form {
    background: #FFFFFF;
    color: #000;
}
body.dark .report__form .report__title {
    color: #1b5378;
}
body.dark .report__form .report__table table th {
    background: #f4f4f4;
    color: #000;
}
body.dark .report__form .report__table table td {
    color: #000;
}
body.dark .report__form .report__subtitle {
    color: #000;
}
body.dark .report__form .report__content {
    color: #000;
}

@page {
    size: A4;
    margin: 0;
}

@media print {

    html,
    body {
        width: 210mm;
        height: 297mm;
    }

    .report__form {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }

    .report__form table th {
        background-color: #e8e8e8 !important;
        -webkit-print-color-adjust: exact;
    }
}

/*Print : E*/
[p-select="vote-item"] {cursor: pointer;}

.vresult__item {
    display: flex;
    border-radius: 7px;
}

.vresult__item.select1 {
    border: 1px var(--color-primary) solid;
}

.vresult__item.select2 {
    border: 1px #ff5722 solid;
}

.vresult__item:not(:last-child) {
    margin-bottom: 4px
}

.vresult__item .vresult__select {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    border-radius: 7px;
    color: #fff;
    font-weight: bold;
    padding: 10px 0px;
}

.vresult__item .vresult__count {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vresult__item .vresult__select.false {
    background-color: #ffc107;
}

.vresult__item .vresult__select.dontVote {
    background-color: #ff5722;
}

.vresult__item .vresult__list {
    width: calc(80% - 80px);
    padding: 5px 10px;
    line-height: 1.4em;
}

.search__field {
    display: flex;
}


.file-upload{display:flex;text-align:center;font-family: Helvetica, Arial, sans-serif;font-size: 1em; align-items: center; max-width: 100%;}
.file-upload .icon-question {
    width: 26px;
    height: 26px;
    border: 3px solid #d3d3d3;
    border-radius: 50%;
    padding: 3px;
    margin-left: 10px;
    fill: #d3d3d3;
    cursor: pointer;
    outline: none;
}

.file-upload .icon-question:hover, .file-upload .icon-question:focus {
    border: 3px solid #ababab;
    fill: #ababab;
}

.file-upload .file-select{border-radius: 6px;display:flex;border: 1px solid #d7d7d7;color: #34495e;cursor:pointer;height:40px;line-height: 36px;text-align:left;background: #ffffff;overflow:hidden;position:relative;}
.file-upload .file-select .file-select-button{background:#dededf;text-align: center; padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select .file-select-name{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height:40px;display:inline-block;padding:0 10px;}
.file-upload .file-select:hover{border-color:#34495e;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select:hover .file-select-button{background:#34495e;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select{border-color:#3fa46a;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select .file-select-button{background:#3fa46a;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}
.file-upload .file-select.file-select-disabled{opacity:0.65;}
.file-upload .file-select.file-select-disabled:hover{cursor:default;display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}

.file__tooltip {
    font-size: 1.3em;
    word-break: keep-all;
}
.file__tooltip.type2 {
    background-color: #464646; 
    padding: 15px;    
}


[p-select="board-table"] .icon-add {width: 24px; height: 24px;}

ul.board__files {
    padding: 10px 0px;
}

ul.board__files li {
    padding: 3px 0px
}

ul.board__files li a {
    cursor: pointer;
}

ul.board__files li a:hover {
    color: green;
}

ul.board__files li .icon-trash {
    cursor: pointer;
    width: 20px;
    height: 20px;
}

ul.board__files li .icon-trash:hover {
    fill: red !important;
}

#presentationMode {display: none;}
#openFile {display: none;}
#download {display: none;}
#print {display: none;}
#viewBookmark {display: none;}
#spreadNone {display: none;}
#spreadOdd {display: none;}
#spreadEven {display: none;}
#documentProperties {display: none;}
#toolbarSidebar {display: none;}

.conf__type {display: none; justify-content: center; align-items: center;}
.conf__type.active {display: flex;}
.detail__calendar {width: 100%;}
.js-popup-conference-detail .fc-day-today {
    background: #FFF !important;
    border: none !important;
} 

.detail__select {    
    width: 300px;
    height: 100%;
    padding: 68px 0 4px 10px;
}


.detail__head {
    font-size: 1.1em;
    text-align: center;
    color: #fff;
    background: var(--color-primary);
    height: 30px;
}

.detail__content {
    height: calc(100% - 30px);
    border: 1px #ececec solid;
    overflow-y: auto;
}

.detail__content ul li {
    padding: 5px 20px 5px 10px;
    text-align: center;
    border-bottom: 1px #ececec solid;
    position: relative;
}

.detail__trash {
    position: absolute;
    right: 0px;
    width: 30px;
    top: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.detail__trash:hover {
    background: #ececec;
}

.detail__trash:hover svg {
    fill: var(--color-primary) !important;
}

.whiteboardActionBtn {
    width: 38px;
    height: 38px;
    margin: 2px 1px;
}

.whiteboard-tool-separator {width: 1px;height: 30px;background: #d1d1d1;margin-top: 6px;margin-left: 10px;margin-right: 10px;}

[p-select="whiteboard-util"] {display: none; position: inherit !important; float: unset !important;}
[p-select="whiteboard-util"].active {display: flex;}
.whiteboardActionBtn {position: relative;}

.paginationjs {display: flex; justify-content: center;}

.no_retrieve {
    white-space: nowrap;
    display: flex;
    height: 70px;
    width: 300px;
    justify-content: center;
    align-items: center;
}

/* .conference__presenter 제거됨 */

.conference__utils .nice-select {
    height: 40px;
    width: 280px;
    FONT-WEIGHT: 200;
    FONT-WEIGHT: 200;
    FONT-WEIGHT: 200;
    FONT-WEIGHT: 200;
    FONT-WEIGHT: 200;
    margin-right: 8px;
    
}

.main__users.setting__panel {width: 300px;}
.main__users.setting__panel {right: -300px;}
.main__users.setting__panel .menu__sbtn2 {right: 300px;}

/* 참여자 IP 토글 (admin/isCreator 한정) — 버튼은 참여자 헤더 우측 끝에 absolute 배치, IP 줄은 컨테이너 클래스로 show/hide */
.info__header-ip-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 34px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}
.info__header-ip-toggle:hover { background: rgba(255,255,255,0.18); }
.info__header-ip-toggle[aria-pressed="true"] { background: rgba(255,255,255,0.3); border-color: #fff; }
.user__item__ip {
    display: none;
    font-size: 12px;
    line-height: 1.3;
    color: #9aa3af;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.show-participant-ip .user__item__ip { display: block; }

/* 260506 — 참여자/발표자 카드: 이름+직책 / 부서 / IP 3줄 레이아웃
   · WHY: 40~50대 공공기관 사용자 시인성. 한 줄에 정보 1개로 스캐너빌리티 향상
   · scope: [p-select="setting-panel"] 한정으로 헤더 알림/메시지 dropdown 영향 0
   · 적용: flex-direction: column 으로 전환. row 시절 강제 줄바꿈 룰(flex 비율)은 무력화 */
[p-select="setting-panel"] .header__details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 2px;
}
[p-select="setting-panel"] .header__content {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[p-select="setting-panel"] .user__item__ip {
    margin-top: 0;
}

.conference__utils .nice-select > .current {
    height: 100%;
    line-height: 40px;
}

.bb__type {
    width: 100%;
    display: flex;
}

.bb__type1 {
    width: 50%;
    text-align: center;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 5px #fff solid;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
}

.bb__type2 {
    width: 50%;
    text-align: center;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 5px #fff solid;
    cursor: pointer;
    padding: 10px;
}

.bb__hor {
    height: 55px;
    width: 100px;
    margin: 0 auto;
    background-color: #f3f3f3;
    border: 1px #dadada solid;
}

.bb__ver {
    height: 75px;
    width: 55px;
    margin: 0 auto;
    background-color: #f3f3f3;
    border: 1px #dadada solid;
}


.bb__type1.selected,
.bb__type2.selected,
.b__type1:hover, 
.b__type2:hover {border: 5px #8bc34a solid;border-radius: 12px;}

.js-popup-blackboard {z-index: 100001 !important;}

.js-popup-file-access {z-index: 1000000 !important;}

/* [최종 점검용 CSS] */

/* 팝업 너비 고정 */
.js-popup-file-access .popup__wrap {
    min-width: 600px;
    max-width: 90vw;
}

/* 팝업 내부 레이아웃 설정 */
.js-popup-file-access .calendar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 중간 컨텐츠 영역이 남은 공간을 차지하도록 설정 */
.js-popup-file-access .conference__fieldset {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 15px;
}

/* [수정] 각 행의 너비를 100%로 설정하고 내부 정렬 방식을 지정 */
.js-popup-file-access .conference__row {
    width: 100%;
    display: flex;
    align-items: flex-start; /* 세로 정렬을 위쪽으로 */
    margin-bottom: 15px; /* 행 사이의 간격 추가 */
}

/* 행 내부의 컬럼이 남은 가로 공간을 모두 차지하도록 설정 */
.js-popup-file-access .conference__row .conference__col {
    flex: 1;
}

/* Tagify 입력 필드 높이 제한 및 스크롤 */
.js-popup-file-access .tagify {
    max-height: 200px;
    overflow-y: auto;
}

.detail-page-display {
    z-index: 100091;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: none;
}

.detail-page-display.active {
    display: inline-block;
    opacity: 1;
}

.detail-page-display.show {
    display: inline-block;
}

.document__utils {
    display: flex;
    justify-content: space-between;
}

.document__utils > .checkbox__layer {
    display: flex;
    justify-content: space-between;
    padding-left: 12px;
    align-items: center;
}

.conf__loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 200000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
}

.conf__loading img:first-child {
    width: 280px;
    /* 280px */
}

.conf__loading img:nth-child(2) {
    width: 160px;
    /* 280px */
}

.auth__icons {
    /* margin-right: 14px; */
    margin-left: 10px;
}

.auth__icons .icon {
    width: 24px;
    height: 23px;
    fill: #f44336;
}

.auth__icons .icon-seminar {
    margin-bottom: 6px;
}

.auth__icons .icon.disabled {
    fill: #b3b3b3;
}

.conf-type1 .auth__icons {display: none;}

.tippy-box[data-theme~='tippyTheme'] {
    background-color: #001485 !important;
    color: #fff;
    padding: 5px;
}

.tippy-box[data-theme~='tippyTheme'] .tippy-arrow {
  color: #001485 !important;
  color: #fff;
}

.tippy-box[data-theme~='tippyTheme'][data-placement^=top] > .tippy-arrow {
    bottom: 0px !important;
}

.admin__icon {
    position: absolute;
    width: 24px;
    height: 24px;
    bottom: 0px;
    fill: #404040;
    left: 0px;
}

.thum__passicon {
    position: absolute;
    right: 5px;
    top: 7px;
}

.schedule__details {
    width: 100%;
}

.product__field {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.schedule__control .schedule__button .icon .enter__button .icon {
    fill: #102ee9;
}

.conference__memo > .messages__users {
    padding: 12px;
}

.time__count {font-size: 1.12em;}
.time__count .dtime {color: red; }

/* YR ADD */
header.header.fv {
    display: none;
}

body.fv > .page.conference__view {
    padding: 0px;
    height: 100%;
}

body.fv:not([blackboard-mode="true"]) .toolbar {
    /* display: none; */
}

.fv__menu {
    cursor: pointer;
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 100000;
    width: 28px !important;
    height: 28px;
    display: none;
}

body.fv .fv__menu,
body.fv .fv__zoom,
body.fv .fv__sync{
    display: inline-block;
}

[p-select="fv-menu-btn"] {
    transition: all ease 0.5s;
}

body.fv.sidemenu-active [p-select="fv-menu-btn"] {
    left:  350px;    
}

body.fv .conference__view .main__menu {
    height: 100%;
}

body.fv #sidebarToggle {
    left: 60px;
}

body.fv #toolbarContainer {
/*     background: #fff;
    border: none;
    box-shadow: unset; */
}

.fv__zoom {
    display: none;
    cursor: pointer;
    position: relative;
}

.fv__sync {
    cursor: pointer;
    position: relative;
    display: none;
    transform: rotate(90deg);
}

body.fv #viewer {
    /* top: 0px; */
    /* height: calc(100% - 40px); */
}

.toast-message {
    word-break: keep-all;
}

.splitToolbarButton, .dropdownToolbarButton {/* display: none !important; */}

.slide__btn {
    position: fixed;
    top: 75px;
    left: 10px;
    z-index: 99998;
    cursor: pointer;
}

body.fv .slide__btn {
    position: fixed;
    top: 50px;
    left: 10px;
    z-index: 99998;
    cursor: pointer;
}

.slide__btn > .toolbarButton {
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
}

.slide__btn .toolbarButton::before {
    padding: 0px;
    position: relative;
    top: 0px;
    left: 0px;
}

.toolbar.viewer__toolbal {
    display: none;
}

#viewerContainer,
#sidebarContainer {top: 0px !important;}

[blackboard-mode="true"] #viewerContainer,
[blackboard-mode="true"] #sidebarContainer {top:  42px !important;}
[blackboard-mode="true"] .toolbar.viewer__toolbal {display: block !important;}

.dropdownToolbarButton {width: 180px !important;position: relative !important;border-radius: 5px !important;}

.button-white {display: none;}

/* 원본 유지 — 전역 클래스이므로 변경 불가 */
.in__close {
    position: absolute;
    right: 10px;
    background: rgba(0,0,0,0);
    box-shadow: unset;
}

.in__close > svg {
    fill: #fff !important;
}

/* -- Issue #7: 문서관리 팝업 전용 닫기 버튼 어포던스 개선 -- */
.js-popup-document .in__close {
    right: 12px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: background 0.2s;
}
.js-popup-document .in__close:hover {
    background: rgba(255, 255, 255, 0.25);
}
.js-popup-document .in__close > svg {
    width: 22px;
    height: 22px;
}

.popup__userlist {
    height: calc(100% - 50px);
}

.fv__sync.checked {
    fill: var(--color-primary);
}

[p-select="fullapge-zoom-in"] {
    display: none;
}

[p-select="fullapge-zoom"] {
    display: inline-block;
}

body[full-screen="true"] [p-select="fullapge-zoom-in"] {
    display: inline-block;   
}


body[full-screen="true"] .fv__menu,
body[full-screen="true"] .menu__slider.menu__sbtn1,
body[full-screen="true"] .menu__slider.menu__sbtn2,
body[full-screen="true"] #butils-slide
{
    /* display: none;    */
}
body[full-screen="true"] [p-select="fullapge-zoom"]{
    display: none;
}

body[full-screen="true"] .conference__view .main__users{
    /* height: 100%; */
    top: 0;
    bottom: 0;
}

#wa-conference-management-detail .main__users {
    display: none !important;
}

.bookmark__header {
    /* display: flex; */
    /* justify-content: space-between; */
    align-items: center;
}

.menu__slider.menu__sbtn1.rotate > svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#whiteboardUnlockBtn {display: none !important;}

.fv__utils {
    display: none;
    border-radius: 11px;
}

.fv__utils button{
    width: 52px;
    height: 52px;
    background-color: #FCFCFC;
}

[full-screen="true"] .fv__utils {
    position: fixed;
    right: 0px;
    top: 0px;

    margin: 72px 28px 0 0;
    display: flex;
    flex-direction: column;
    z-index: 10000;

    align-items: center;
    gap: 4px;
    height : max-content ;
    opacity: 0.6;
}

/* 다크모드: fv__utils 전체화면 툴바 */
body.dark .fv__utils {
    background: rgba(17, 19, 21, 0.85);
}

body.dark .fv__utils button {
    background-color: #272B30;
}

body.dark .fv__utils button:hover {
    background-color: #333639;
    box-shadow: 0 0 0 2px #EFEFEF inset;
}

body.dark .fv__utils button[disabled=disabled],
body.dark .fv__utils button[disabled=disabled]:hover {
    background-color: #272B30;
    opacity: 0.4;
}

.file__utils {
    display: flex;
    justify-content: end;
}

.transactions__rows {
    width: 100%;
    display: table-row-group;
}

.file__share .customer__inner {
    height: calc(100% - 40px);
    overflow-y: auto;
}

[p-select="file-share-item"] {
    cursor: pointer;
}

[p-select="file-share-item"]:hover {
    color: var(--color-primary);
}

.subject-layer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-right: 50px;
}

.settings__layer {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.settings__thumbnail {
    max-width: 180px;
    max-height: 150px;
}

.earning__colgroup {
    display: table-column-group;
}

.earning__cols {
    display: table-column;
}

[p-select="logoDeleteBtn"] {
    width: 100%;
    margin-top: 5px;
}

.earning__col.col__head {
    background: #d7d7d7 !important;
}

.earning__col.col__dark {
    color: #fff;
    background-color: #424242;
}

.earning__row:nth-child(2n) .earning__col.col__dark {
    background-color: #1e1e1e;
}

.col__dark button.button-stroke.button-small.settings__button {
    background-color: #a7a7a7;
    box-shadow: 0 0 0 2px #d9d9d9 inset;
}

button.button.button-small.settings__button.dark {
}

.earning__col.col__middle.col__dark.empty {}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/Vdg-IuiaDsNc.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/css/fonts/NotoSansKR-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.collapzion_text {
    background: #2f353e;
    font-size: 1.2rem;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 15px;
}

.memo-field-item {
/*     right: 0px;
    left: unset; */
}

@media only screen and (max-width: 920px) {
    .conflist__info .schedule__details {
        display: flex;
        flex-wrap: wrap;
    }

    .conflist__info .schedule__details .product__field:nth-child(3) {
        width: 100%;
    }

    .conflist__info .schedule__details .product__field:nth-child(1) {
       /*  width: 30%; */
    }

    .conflist__info .schedule__details .product__field:nth-child(2) {
       /*  width: 30%; */
    }

    .schedule__col.text-center.conflist__sdate {
        position: absolute;
        top: 0px;
        right: 10px;
        display: inline-block !important;
        width: 68px;
        text-align: right;
    }

    .schedule__col.text-center.conflist__type {
        position: absolute;
        right: 10px;
        width: 68px;
        top: 33px;
        text-align: right;
    }

    .schedule__col.text-center.conflist__type > .schedule__date {
        text-align: right;
    }

    .schedule__col.text-center.conflist__sdate .schedule__date {
        text-align: right;
    }

    .schedule__col.text-center.conflist__name .schedule__date {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    .schedule__col.text-center.conflist__name {
        text-align: left;
    }

    .schedule__col.pr__10.text-center.conflist__util > .actions__button {
        background: #e3e3e3;
        position: absolute;
        right: 0px;
        border-radius: 0px;
        top: 100%;
        transform: translateY(-173%);
        height: 44px;
        border-radius: 8px;
        width: 52px;
    }

    .conflist__enter button.schedule__button.enter__button.with__label {
        width: calc(100% - 52px) !important;
        margin-left: 0px;
        height: 44px !important;
    }

    .conflist__enter .schedule__control.diff {justify-content: flex-start;}

    .actions__body [p-select="conference-edit"],
    .actions__body [p-select="conference-document"] {
        display: none;
    }

    section.main__section {
        /* height: calc(100%); */
    }

    section.main__section {}

    .main__head {
        /* height: 107px !important; */
        padding: 10px 0 0 0;
    }

    .management-nav {
        margin-bottom: 0px !important;
    }

    .management-nav .shop__nav {
        justify-content: center;
    }

    .conflist__pcount {
        display: none !important; 
    }

    .schedule__col.text-center.conflist__lock {
        position: absolute;
        width: 29px;
        right: 8px;
        top: 60px;
    }

    .schedule__row:nth-child(even) .conflist__detail {
        top: 100px;
    }

    .schedule__col.text-center.conflist__enter2 {
        width: 50%;
        background: var(--color-primary);
        border-radius: 8px 0px 0px 8px;
        height: 36px;
        margin-top: 5px;
    }

    .schedule__col.text-center.conflist__detail {
        width: 50%;
        position: absolute;
        top: calc(100% - 60px);
        height: 36px;
        background: #2196f3;
        right: 0px;
    }

    .conflist__enter2 
     .icon {
        width: 24px !important;
        height: 24px !important;
        fill: #fff;
    }

    .conflist__detail .icon {
        width: 24px !important;
        height: 24px !important;
        fill: #fff;
    }

    .schedule__row:nth-child(even) .conflist__detail {
        /* top: 100px; */
    }

    #wa-conference-management .main__contents {
        height: calc(50%);
        /* height: calc(100% - 107px); */   
    }

    .conflist__enter svg.icon.icon-desktop.conf-board-icon {
        width: 24px !important;
        height: 24px !important;
        margin-right: 5px;
    }

    .card.promote.document__layer {
        display: none;
    }

    #wa-conference-management-detail .main__condition.conf__back {
        position: absolute;
        right: 10px;
        width: auto;
        top: 168px;
    }

    #wa-conference-management-detail .main__title {
        margin-top: 8px;
    }

    #wa-conference-management-detail .main__head {
        height: auto !important;
    }
}

/* audio-setting 숨김 룰 — 대상 HTML 제거로 불필요 */

.live-streaming-box {
    width: 100%;
    height: 100%;
    z-index: 100000;
    background-color: rgba(0,0,0,0.9);
    position: absolute;
    display: none;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    top: 0px;
    left: 0px;
}

.live-streaming-box.show {
    display: flex;
}

[p-select="live-streaming-video"]::-webkit-media-controls-fullscreen-button {
    display: none;
}

.live-streaming-utils {
    background-color: #fff;
    /* position: absolute; */
    /* top: 10px; */
    /* right: 10px; */
    display: none;
    align-items: center;
    gap: 10px;
    height: 50px;
    justify-content: flex-end;
    width: 100%;
    padding-right: 5px;
    box-sizing: border-box;
}

.live-streaming-utils.show {
    display: flex;
}

button.live-btn {
    width: 124px;
    height: 30px;
    background: #1375c4;
    color: #fff;
    height: 34px;
    /* padding: 0 16px; */
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
}

button.live-btn:hover {
    background: #075391;
}

button.live-btn.active {
    background-color: var(--color-primary);
}

.live-streaming-video {
    max-width: 100%;
    max-height: 100%;
}

.media-permission-popup {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100001;
    justify-content: center;
    align-items: center;
    display: none;
    background-color: rgba(0,0,0,0.9);
    padding: 0px 20px;
}

.permission-popup-box {
    display: flex;
    gap: 20px;
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
}

.permission-popup-box img {
    margin-bottom: 15px;
    width: 100%;
}

.media-permission-chrome {
    width: 50%;
}

.media-permission-edge {
    width: 50%;
}

.permission-utils {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
}

.media-permission-popup.show {
    display: flex;
}

.permission-msg {
    position: absolute;
    top: 30px;
    color: #fff;
    font-size: 1.4rem;
}

.streaming-video-box {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.txt-center {
    text-align: center;
}

.cursor-p {
    cursor: pointer;
}

.viewer-mark {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 1px;
    height: 100%;
    display: none;
    justify-content: center;
    z-index: 1000;
    align-items: center;
    /*overflow: hidden;*/
}

.viewer-mark.show {
    display: flex;
}

[blackboard-mode="true"] .viewer-mark {
    display: none;
    z-index: 1;
}

.viewer-mark-layer {
    position: relative;
    width: 0px;
}

[p-select="viewer-mark-icon"] {
    margin-left: -64px;
    position: absolute;
    width: 64px;
}

.pointer-icon.active svg {
    fill: var(--color-primary);
}

.pointer-icon svg {
    width: 24px;
    height: 24px;
    fill: #6F767E;
}

.js-popup-livestreaming-confirm,
.popup:not(.picker_wrapper).js-popup-livestreaming-confirm {
    z-index: 1000000;
}
.mouse-mark {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0px 0px 10px 6px rgb(25 206 96);
    z-index: 1000000;
}
#mainContainer {
    overflow: hidden;
}

div.clickEffect{
    box-sizing:border-box;
    border-style:solid;
    border-color:#FFFFFF;
    border-radius:50%;
    animation:clickEffect 0.3s ease-out;
    z-index:99999;
}
@keyframes clickEffect{
    0%{
    opacity:1;
    width:0.5em; height:0.5em;
    margin:-0.25em;
    border-width:0.5em;
}
100%{
    opacity:0.2;
    width:5em; height:5em;
    margin:-2.5em;
    border-width:0.03em;
}
}

[p-select="mouse-mark-box"].hide {
    display: none !important;
}

/* -- Issue #4: 변환상태 최소 14px + 색상 톤다운 -- */
.customer__item.convert-info {
    font-size: 14px;
    color: #D32F2F;
}
.customer__item.convert-info:hover {
    color: #D32F2F;
}

.convert-button {
    background-color: #E91E63;
    margin-left: 0.5rem;
    color: #fff;
    padding: 0.3rem;
    border-radius: 0.3rem;
    display: none;
}

.convert-button.show {
    display: block;
}

[p-select="document-item"][p-status="running"] {
    opacity: 0.7;
}


.conference__view span[p-value="fileShare"]{
    display: none;
}

/* ===투표  참여  시의회용 페이지=== */
.js-popup-pvote .product__wrapper.cc, .js-popup-rvote .product__wrapper.cc {width: 100%; height: 100%; background-color: #F5F4F1;} /* 화면 꽉차게 — 글레어 저감 */
.js-popup-pvote .conference__popup, .js-popup-rvote .conference__popup {width: 100%; max-width: 100%; height: 100%;} /* 컨텐츠 꽉차게  height: calc(100% - 50px)*/

.product__wrapper.cc {}
.product__wrapper.cc .votecontainer{
    padding: 16px 16px 0;
    height: 100%;
    box-sizing: border-box;
}
.product__wrapper.cc{ 
    font-size: clamp(20px, 4vw, 32px);
}
.product__wrapper.cc .voteTitle{ 
    width: 100%;
    height: 26%;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #cbcbcb;
    margin-bottom: 10px;

}
.js-popup-pvote .product__wrapper.cc .voteTitle p{}
.product__wrapper.cc .voteTitle .redTimerBox{
    /* min-width: 150px; */
    /* width: max-content; */
    width: 150px;
    height: 120px;
    line-height: 120px;
    text-align: center;

    /* border: 3px solid #000000; */
    box-sizing: border-box;
    /* background-color: #ffff; */

    color: #E85454;
    font-size: 58px;
    line-height: 1;
    text-align: end;

    word-break: keep-all;    
}

.product__wrapper.cc .voteBody{
    height: 70%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.product__wrapper.cc .voteBody p{
    text-align: center;
    font-size: clamp(20px, 4vw, 26px);
}
.product__wrapper.cc .voteBody .pvoteButtonBox{
    margin: 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14%;
    width: 100%;
}
.product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem{
/*     width: 300px;
    height: 300px; */
    width: 20%;
    padding: 6% 0 ;

    background-color: var(--vote-btn-yes);
    border-radius: 52px;
    color: #ffff;
    font-weight: bold;
    font-size: clamp(80px, 4vw, 100px);

    /* ── 터치 UX: 롱프레스 텍스트 선택·컨텍스트 메뉴 차단 ── */
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;

    /* ── 피드백 기반: 상태 전환 트랜지션 ── */
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease-out,
                box-shadow 0.15s ease-out,
                opacity 0.15s ease-out;
}
.product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem:nth-child(2){
    background-color: var(--vote-btn-no);
}
.product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem:nth-child(3){
    background-color: var(--vote-btn-abstain);
}
/* ── pvote 버튼 인터랙션 피드백 ── */
/* 60회/시간 반복 사용 최적화: 인지 채널 단일화(opacity만), brightness·scale 감쇠 제거 */

/* Hover: 데스크톱 전용 — 미세 확대 + 그림자 */
@media (hover: hover) {
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem:not([disabled]):hover {
        transform: scale(1.04);
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }
}

/* Active: 누르는 순간 눌림 효과 (터치 + 마우스 공용) */
.product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem:not([disabled]):active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition-duration: 0.06s;
}

/* Selected: .active 클래스 — 흰색 링 + 채움색을 확실히 진하게.
   검정 오버레이로 채움색만 0.7배(=brightness 0.7 와 동일, hue 보존) 어둡게 한다.
   filter:brightness 를 쓰지 않는 이유: filter 는 box-shadow(흰 링)까지 어둡게 만들어
   링이 회색으로 변질되기 때문. 오버레이는 border-box 안쪽 채움만 덮어 링은 흰색 유지.
   복수투표 선택 상태 시인성 확보 (피드백 2026-06-09). */
.product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem.active {
    box-shadow: 0 0 0 6px #fff, 0 8px 28px rgba(0,0,0,0.25);
    background-image: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30));
}

/* Disabled + Selected: 전송 중에도 선택 링 유지 */
.product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem.active[disabled],
.product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem.active.is-disabled {
    box-shadow: 0 0 0 6px #fff, 0 4px 16px rgba(0,0,0,0.2);
    opacity: 0.7;
}

/* Focus-visible: 키보드 접근성 */
.product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* 시스템 모션 감소 모드 존중 */
@media (prefers-reduced-motion: reduce) {
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem {
        transition-duration: 0.01s !important;
    }
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem:not([disabled]):active {
        transform: none;
    }
}

/* ===재투표 시의회용 페이지=========================================== */

.js-popup-rvote .voteTitle{
    height: 50%;
}

.rvoteBody {
    height: 70%;
    display: flex;
    flex-direction: column;
    padding-top: 7%;
    box-sizing: border-box;
    justify-content: space-between;
}
.rvoteBody .selectedVoteBox{ 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(70px, 4.5vw, 82px);
    /* margin: 32px 0; */
    white-space: nowrap;

}
.rvoteBody .selectedVoteBox span{}
.rvoteBody .selectedVoteBox p{}

[p-select="selectedVote"][data-vote="찬성"] { color: var(--vote-btn-yes); }
[p-select="selectedVote"][data-vote="반대"] { color: var( --vote-btn-no); }
[p-select="selectedVote"][data-vote="기권"] { color: var(--vote-btn-abstain); }

.reVoteButtonBox{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    position: relative;

}
.reVoteButton{
    width: 160px;
    height: 60px;
    border-radius: 16px;
    background-color: #ee4949; /* #FF4B4B  #ee4949*/
    color: #fff;
    font-size: 38px;
    font-weight: 500;
    position: absolute;
    right: 0;
}

.reVoteButton[disabled],
[p-select="re-voteButton"][disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 비활성화 시 시각적/포인터 차단 */
[name="vote_list_select"][disabled],
[name="vote_list_select"][disabled] * {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}



/* ===투표 참여자 업데이트=== */
.voteParticipantsEditerWrap .conference__col{
    width: 100%;
}

.conference__vote .messenger{
    overflow: hidden;
}


.loading-progress {
  margin-top: 8px;
  font-size: 14px;
  font-weight: bold;
}

/* 투표 로그: 참여/미참여(노랑배경) 표시용 */
.vote-joined {
  padding: 0 4px;
  border-radius: 4px;
}

.vote-not-joined {
  background-color: #e5ff00;  /* 연한 노랑 */
  padding: 0 4px;
  border-radius: 4px;
}


/* [p-select="conference__vote"]{
    position: relative;
} */

/* ***************투표모드버튼************* */
[p-select="conference__vote_mode"]{
    /* position: absolute; */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.12em;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: #fcfcfc;
    transition: all 0.2s;
    font-family: 'Pretendard', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    
    width: 180px;
    height: 48px;
    background-color: var(--color-primary);
    border-radius: 12px;
}

/* 투표모드 ON 상태 */
[p-select="conference__vote_mode"].vote-mode--on {
    background-color: #c62828;
}

body.dark [p-select="conference__vote_mode"].vote-mode--on {
    background-color: #b71c1c;
    box-shadow: 0 0 12px rgba(198, 40, 40, 0.3);
}


/*Start [추가] 투표모드 참여자 화면 잠금 오버레이 */
.vote-mode-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 100000;       /* 팝업보다 위 */
  display: flex;         /* 가운데 정렬 */
  align-items: center;
  justify-content: center;
}

.vote-mode-overlay__text{
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

/*End [추가] 투표모드 참여자 화면 잠금 오버레이 */

/*Start [추가 2026-06-18] 투표 팝업은 잠금 오버레이 위로 — 참여자가 투표 UI 에 도달해야 함 */
.popup.visible.js-popup-pvote,
.popup.visible.js-popup-rvote,
.popup.visible.js-popup-tvote {
  z-index: 1000000 !important;   /* vote-mode-overlay(100000)·floating 팝업(1e5대) 위 · 로딩(popup__loading 1e27)·tippy 툴팁(1e9)·tagify 드롭다운 아래 */
}
/*End [추가 2026-06-18] */



/* 진행 마감 투표 */

.messages.conference__popup.conference__chatting{
    width: 100%;
    /* max-width: 100%; */
    height: auto;
    box-sizing: border-box;
    padding: 8px;

    position: relative;
    overflow: visible;
}


@media only screen and (max-width: 1419px) {
    .conference__chatting.messages {
        min-height: 100px;
    }
}

/* 채팅팝업 드래그, resizable, 수신자 패널 숨기기 */
.conference__chatting .messages__users {
    /* display: flex; */
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    width: 55%;
    margin-right: 12px;
    padding: 12px;
}

/* 기존 display:none을 덮어쓰기(오프캔버스는 transform으로 숨길 것) */
.messages.conference__popup.conference__chatting .messages__users{
  display: flex !important;            /* :contentReference[oaicite:3]{index=3} 규칙 무력화 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;

  width: 280px;                        /* 패널 폭 */
  max-width: 80vw;

  background: #fff;                    /* 다크모드면 필요 시 별도 처리 */
  box-shadow: 0 8px 24px rgba(0,0,0,.2);

  transform: translateX(-105%);        /* 기본: 화면 안 (안보임) */
  opacity: 0;
  pointer-events: none;

  z-index: 2;

  /* 패널 내부 스크롤 */
  overflow: hidden;
}

/* 열림 보인다*/
.messages.conference__popup.conference__chatting.is-users-open .messages__users{
  transform: translateX(0%);
  opacity: 1;
  pointer-events: auto;
  transition: transform  0.3s ease, opacity .18s ease;
}

/* 수신자 리스트는 패널 안에서 스크롤 */
.messages.conference__popup.conference__chatting .messages__users .messages__list{
  overflow-y: auto;
  max-height: calc(100% - 44px);       /* 체크버튼 영역 높이만큼 빼기(필요시 조정) */
}

/* 토글 버튼이 드래그와 충돌하지 않도록 클릭 영역 유지(드래그코드가 a를 제외 처리함) */

.conference__chatting .messages__messenger.messenger{}
.conference__chatting .messages__messenger.messenger .messenger__panel{padding: 0px 15px;}

.conference__chatting .messages__messenger.messenger .messenger__wrapper{ height: calc(100% - 47px);}
.conference__chatting .messages__messenger.messenger .messenger__wrapper .messenger__list{}
.conference__chatting .messages__messenger.messenger .messenger__wrapper .messenger__list .messenger__item{}
.conference__chatting .messages__messenger.messenger .messenger__wrapper .messenger__list .messenger__item .messenger__layer{ width: 100%;}



        .js-popup-memo .conference__popup.messages{
            padding: auto;
            width: auto;
            max-width: auto;
        }
        .js-popup-memo .conference__popup{
            width: auto;
            max-width: auto;
        }

        .js-popup-minutes .conference__popup.messages{
            padding: auto;
            width: auto;
            max-width: auto;
        }
        .js-popup-minutes .conference__popup{
            width: auto;
            max-width: auto;
        }

        .js-users-panel-toggle{
            position: absolute;
            left: 10px;
            z-index: 1000;
            width: 36px;
            height: 36px;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .js-users-panel-toggle svg.icon-arrow-down{
            fill: #ffff;
            width: 20px;
            height: 20px;
            transform: rotate(-180deg);
            transition: transform 0.3s ease;
        }

        .js-users-panel-toggle[aria-expanded="true"] svg.icon-arrow-down{
            transform: rotate(0deg);
            transition: transform 0.3s ease;
        }

        /* users 패널 열렸을 때 배경 클릭 닫기용 백드롭 */
.users-panel-collapsible { position: relative; }

.users-panel-collapsible .users-panel-backdrop{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9;                 /* users 패널(보통 10)보다 낮게 */
  background: transparent;/* 원치 않으면 투명으로 바꿔도 됨rgba(0,0,0,.18); */
}

/* 열림 상태에서만 클릭 가능 */
.users-panel-collapsible.is-users-open .users-panel-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* users 패널이 백드롭보다 위에 있도록 보장 */
.users-panel-collapsible .messages__users{
  z-index: 10;
}


/* ===votestatus현황판=== */
.vote__chart2 #timer-chart{
    width: 100% !important;
    padding: 20px 0 !important;
    box-sizing: content-box !important;
    }
@media only screen and (max-width: 1300px){
        /* 투표참여창 */
    .product__wrapper.cc .voteBody {
        margin-top: 0;
    }
    .product__wrapper.cc .voteTitle{
        margin-bottom: 0;
    }
/*     .conference__header{
        display: none;
    } */
}


/* ConferenceList Media Query */
/* 태블릿 */
@media only screen and (max-width: 1023px) {
    .menu__item { display: inline-flex;}

    #wa-conference-list .menu__item,
    #wa-conference-board .menu__item,
    #wa-conference-management .menu__item{ 
        /* display: inline-flex; */
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .headerConferenceTitle{
        top: 0px;
    }

    .header__control .select .list {
        max-width: 80vw;
    }
    /* 태블릿 공통 레이아웃 (1100px MQ에서 conference-list별 상세 설정) */
    .main {
        height: calc(100% - 76px);
    }
    .main__section {
        overflow-y: auto;
    }
    .main__contents {
        height: auto;
        overflow-y: visible;
    }
  

    /* 태블릿일 경우 회의목록에서 회의참여자 사이드탭 안 보임 */
    #wa-conference-list .main__users.conf__list {display: none !important;}

    body .conference__view header.header {
        padding: 14px 20px !important;
        justify-content: space-between;
        /* align-items: start; */
        box-shadow: none;
    }

    .conference__view .main__users {
    /* display: block !important; */
    top: 89px;
    }

    /* 로고 없애기*/
    body .conference__view  .header__logo { display: none;}
    /* 세로줄 없애기*/
    /* body .conference__view .header__pipe.mr__10.ml__10{display: none;} */
    /* 2줄로 만들기 */
    body .conference__view .dis__flex.row__2nd{
        /* position: absolute;
        transform: translate(0, 100%);
        left: 0;
        right: 0;
        justify-content: center ;
        padding: 0 0 16px 0;
        background-color: #FCFCFC;
        box-shadow: inset 1px 0px 0px #F4F4F4, inset 0 -1px 0px #EFEFEF; */
    }

    /*풀 스크린  svg이모티콘 크기*/
    body .conference__view .header__head[p-select="fullscreen"] svg{
        width: 60% ;
        height: 60% ;
    }
    /* 회의 방 나가기 svg이모티콘 크기*/
    body .conference__view .header__head svg{
        width: 70% ;
        height: 70% ;
    }

    .conference__view .button-stroke.display__topbtn.button-small.control__btn.mqmr__10{
        margin-right: 10px;
    }

     /* 페이지 컨트롤러 숨기기 위치 */
     body .bottom__utils{
        bottom: -60px;
    }
    /*페이키 컨트롤러 슬라이스위치 */
    body .butils__slide {
        top: -28px; 
    }
    body .butils__slide.active{
        opacity: 50%;
    }


    /* ===회의개설/ 참여자 추가=== */
    .product__wrapper.group__organization{
        width: 600px;
        min-width: 100%;
    }

    .conference__header.mb__0 {
        width: 100%;
    }

    /*회의실 사이트메뉴 팝업 목록 */
    .messages__users {
        width : 45%
    }

    .conference__minutes .messages__users {
        width : 100%
    }

    .conference__vote .messages__users {
        width : 100%
    }

    /* 메모에 class="messages__man"만 width 90% 타블렛은 해제 */
    .conference__popup.conference__memo .messages__man{
        width: auto;
    }
    /* 채팅에 class="messages__man" 채팅인원 높이 조절 */
    .conference__popup.conference__chatting .messages__list{
        height: 100%;
        /* display: flex; */
        /* flex-wrap: wrap; */
        /* justify-content: space-between; */
    }

    .conference__popup.conference__chatting .messages__item{
        /* width: 45%; */
    }

    /* 투표에 투표리스트 높이 제한 */
    .conference__vote .messages__list{
        width: 100%;
        max-height: 385px;
    }

    .messages__list {
        max-height: 200px;
    }

    /* 투표참여창 */
    .product__wrapper.cc .voteBody {
        margin-top: 0;
    }
    .product__wrapper.cc .voteTitle{
        margin-bottom: 0;
    }

    /* ── 태블릿: pvote 버튼 피드백 강화 (터치 기기) ── */
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem {
        border-radius: 40px;
    }

    /* 터치: active 눌림 효과를 더 크게 (손가락이 버튼을 가리므로) */
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem:not([disabled]):active {
        transform: scale(0.92);
        transition-duration: 0.06s;
    }

    /* 선택 링: 태블릿에서 더 두꺼운 링 (시인성 확보) */
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem.active {
        box-shadow: 0 0 0 8px #fff, 0 8px 28px rgba(0,0,0,0.25);
    }
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem.active[disabled],
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem.active.is-disabled {
        box-shadow: 0 0 0 8px #fff, 0 4px 16px rgba(0,0,0,0.2);
    }
}


/* 모바일 */
@media only screen and (max-width: 768px) {
    body .conference__view .header {
        height:  70px;
        padding: 8px 24px 0px 24px !important;
    }

    body .conference__view .dis__flex.row__2nd{
        /* padding: 0 0 8px 0; */
    }

    /* 문서 없음 */
    body .conference__view .conference__utils .nice-select {
        /* width: 120px; */
        min-width: 40px;
        max-width: 240px;
    }

    /* 페이지 컨트롤러 숨기기 위치 */
    body .bottom__utils{
        bottom: -60px;
    }

    .messages__users{
        width: 100%;
    }

    /* 회의 목록 */
    .create__conference {
        min-width: 100%;
    }

    /* ── 모바일: pvote 버튼 피드백 (작은 화면) ── */
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem {
        border-radius: 32px;
    }

    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem:not([disabled]):active {
        transform: scale(0.9);
        transition-duration: 0.06s;
    }

    /* 선택 링: 모바일에서 링 두께 조정 */
    .product__wrapper.cc .voteBody .pvoteButtonBox .pvoteButtonItem.active {
        box-shadow: 0 0 0 5px #fff, 0 6px 20px rgba(0,0,0,0.25);
    }
}

.menu__items {
    /* max-height: calc(100vh - 200px); */ /* 상단 사용자 정보와 하단 푸터 공간을 제외한 높이 */
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(155, 155, 155, 0.7) transparent; /* Firefox */
  }

  /* Chrome, Safari용 스크롤바 스타일 */
  .menu__items::-webkit-scrollbar {
    width: 6px;
  }

  .menu__items::-webkit-scrollbar-track {
    background: transparent;
  }

  .menu__items::-webkit-scrollbar-thumb {
    background-color: rgba(155, 155, 155, 0.7);
    border-radius: 3px;
  }

  .menu__items::-webkit-scrollbar-thumb:hover {
    background-color: rgba(125, 125, 125, 0.8);
  }

/* 회의 정보 요약 패널 */
#confSummaryArea {
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
    padding: 14px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}
#confSummaryContent {
    max-height: calc(60vh - 60px);
    overflow-y: auto;
}

#confSummaryArea .conf-summary__close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
}
#confSummaryArea .conf-summary__close:hover,
#confSummaryArea .conf-summary__close:focus-visible {
    background: rgba(0,0,0,0.06);
    color: #111827;
    outline: none;
}

#confSummaryArea .conf-summary__title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 16px;
    color: #555;
    padding-right: 36px;
}

#confSummaryContent .info__row strong {
    width: 100px;
    white-space: nowrap;
    font-size: 16px;
}

#confSummaryContent .info__row span {
    width: calc(100% - 105px);
    font-size: 16px;
    line-height: 1.55;
}

/* 상태 뱃지 — 색 + 배경 + 굵기 다중 채널 */
.conf-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
}
.conf-status-badge--standby { background: #dbeafe; color: #1e40af; }
.conf-status-badge--ongoing { background: #d1fae5; color: #065f46; }
.conf-status-badge--ended   { background: #fee2e2; color: #991b1b; }

/* 문서 카운트 컨테이너 — 내부 ul 수용을 위한 inline-block */
#confSummaryDocCount {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

/* 문서 리스트 */
.conf-summary__doc-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
}
.conf-summary__doc-list li {
    padding: 1px 0;
    word-break: break-all;
}
.conf-summary__doc-list li::before {
    content: "· ";
    color: #6b7280;
}

/* 정기일정 날짜 리스트 — 한 줄 한 일정 */
.conf-summary__date-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.conf-summary__date-list li {
    padding: 1px 0;
}
.conf-summary__date-list li::before {
    content: "· ";
    color: #9ca3af;
}
.conf-summary__date-item--next {
    color: #047857;
    font-weight: 700;
}
.conf-summary__date-item--past {
    color: #6b7280;
    text-decoration: line-through;
}
body.dark .conf-summary__date-item--next { color: #6ee7b7; }
body.dark .conf-summary__date-item--past { color: #6b7280; }

/* AJAX 로딩 placeholder — 펄스 바 */
.conf-summary__loading {
    display: inline-block;
    width: 80px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    animation: confSummaryLoading 1.2s ease-in-out infinite;
    vertical-align: middle;
}
body.dark .conf-summary__loading {
    background: linear-gradient(90deg, #2d3138 0%, #3a3f48 50%, #2d3138 100%);
}
@keyframes confSummaryLoading {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .conf-summary__loading { animation: none; opacity: 0.6; }
}

/* 회의 행 클릭 어포던스 — 색은 기존 룰 유지, 커서만 변경 */
#wa-conference-list .schedule__row:not(:first-child) {
    cursor: pointer;
}

/* 나의 통계 요약 카드 */
.my-stats-card {
    margin: 0 0px 8px 0px;
    padding: 14px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #4472c4;
}

.my-stats-card__header {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

body.dark .my-stats-card__header {
    border-bottom-color: #3a3f48;
}

.my-stats-card__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding-bottom: 8px;
}

.my-stats-card__select {
    font-size: 16px;
    min-height: 44px;
    min-width: 90px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 12px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}

.my-stats-card__select:hover {
    border-color: var(--color-primary);
}

body.dark .my-stats-card__select {
    background: #1e2024;
    border-color: #3a3f48;
    color: #ddd;
}

body.dark .my-stats-card__select:hover {
    border-color: #4fb8ff;
}

.my-stats-card__body {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.my-stats-card__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
}

.my-stats-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.my-stats-card__icon--participation { background: #dbeafe; color: #1e3a6e; }
.my-stats-card__icon--creation      { background: #fde8d0; color: #8a3a08; }
.my-stats-card__icon--attendance    { background: #d9f2e6; color: #1a5c30; }
.my-stats-card__icon--vote          { background: #fff3cd; color: #6d5000; }

.my-stats-card__icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.my-stats-card__label {
    font-size: .78em;
    color: #6b7280;
}

.my-stats-card__value {
    font-size: 1.25em;
    font-weight: 700;
    color: #1e3a5f;
}

.my-stats-card__unit {
    font-size: .65em;
    font-weight: 400;
    color: #9ca3af;
    margin-left: 2px;
}

/* 나의 통계 카드 — 다크모드 */
body.dark .my-stats-card {
    background: #1A1D1F;
    border-left-color: #6b9bef;
}

body.dark .my-stats-card__label { color: #9ca3af; }
body.dark .my-stats-card__value { color: #eee; }

body.dark .my-stats-card__icon--participation { background: #1e3a5f; color: #93bbfd; }
body.dark .my-stats-card__icon--creation      { background: #3d2a15; color: #f5a960; }
body.dark .my-stats-card__icon--attendance    { background: #1a3d25; color: #7dd4a0; }
body.dark .my-stats-card__icon--vote          { background: #3d3315; color: #f5d050; }

/* 나의 통계 카드 — 반응형 */
@media only screen and (max-width: 767px) {
    .my-stats-card {
        /* margin: 0 10px 10px 10px; */
        padding: 12px 14px;
    }

    .my-stats-card__body {
        gap: 16px;
    }

    .my-stats-card__item {
        min-width: 120px;
    }
}

/* 나의 통계 폴더 탭 네비게이션 */
.my-stats-tabs__nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
}

.my-stats-tabs__btn {
    padding: 10px 24px;
    text-align: center;
    border: 1px solid transparent;
    border-bottom: none;
    background: #f0f1f3;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
    position: relative;
    margin-bottom: -1px;
}

.my-stats-tabs__btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.my-stats-tabs__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    z-index: 1;
}

.my-stats-tabs__btn.active {
    background: #ffffff;
    color: #4472c4;
    font-weight: 600;
    border-color: #e5e7eb;
    border-top: none;
    border-bottom: 1px solid #ffffff;
    box-shadow: inset 0 3px 0 0 #4472c4;
}

.my-carbon-card .my-stats-tabs__btn.active {
    color: #70ad47;
    box-shadow: inset 0 3px 0 0 #70ad47;
}

body.dark .my-stats-tabs__btn {
    background: #25282c;
    color: #9ca3af;
}

body.dark .my-stats-tabs__btn:hover {
    background: #2f3338;
    color: #d1d5db;
}

body.dark .my-stats-tabs__btn.active {
    background: #1A1D1F;
    color: #6b9bef;
    border-color: #3a3f48;
    border-bottom-color: #1A1D1F;
    box-shadow: inset 0 3px 0 0 #6b9bef;
}

body.dark .my-carbon-card .my-stats-tabs__btn.active {
    color: #8bc34a;
    box-shadow: inset 0 3px 0 0 #8bc34a;
}

/* 나의 탄소절감 카드 */
.my-carbon-card { border-left-color: #70ad47; }
.my-carbon-card__icon--conf        { background: #dbeafe; color: #4472c4; }
.my-carbon-card__icon--pages        { background: #d9f2e6; color: #70ad47; }
.my-carbon-card__icon--co2          { background: #e8f5e9; color: #2e7d32; }
.my-carbon-card__icon--tree         { background: #e8f5e9; color: #33691e; }

/* 나의 탄소절감 카드 — 다크모드 */
body.dark .my-carbon-card { border-left-color: #8bc34a; }
body.dark .my-carbon-card__icon--conf        { background: #1e3a5f; }
body.dark .my-carbon-card__icon--pages        { background: #1a3d25; }
body.dark .my-carbon-card__icon--co2          { background: #1b3d1b; }
body.dark .my-carbon-card__icon--tree         { background: #1b3d1b; }

/* Board - Pinned Notice */
.badge-pinned { color: #ff6a00; font-weight: bold; font-size: 0.85em; margin-right: 4px; }
.customer__row.pinned-row { background-color: #fff8f0; }
body.dark .customer__row.pinned-row { background-color: #2a2013; }

/* ================================================================
   회의 목록 (Conference List) 리디자인 — Refined Institutional
   모든 규칙은 #wa-conference-list 스코프로 사이드 이펙트 방지
   ================================================================ */

/* === 1. 레이아웃: table → flex 전환 === */
#wa-conference-list .schedule__table { display: block; }
#wa-conference-list [p-select="schedule-column"] { display: none; }
#wa-conference-list .schedule__row { display: flex; align-items: center; }
#wa-conference-list .schedule__col { display: block; padding: 22px 14px; vertical-align: middle; }
#wa-conference-list .schedule__col:after { display: none; }

/* 컬럼 폭 (flex-basis) */
#wa-conference-list .schedule__row .schedule__col:nth-child(1) { flex: 0 0 6%; max-width: 6%; text-align: center; }
#wa-conference-list .schedule__row .schedule__col:nth-child(2) { flex: 0 0 40%; max-width: 40%; }
#wa-conference-list .schedule__row .schedule__col:nth-child(3) { flex: 0 0 10%; max-width: 10%; text-align: center; }
#wa-conference-list .schedule__row .schedule__col:nth-child(4) { flex: 0 0 10%; max-width: 10%; text-align: center; }
#wa-conference-list .schedule__row .schedule__col:nth-child(5) { flex: 0 0 8%; max-width: 8%; text-align: center; }
#wa-conference-list .schedule__row .schedule__col:nth-child(6) { flex: 0 0 16%; max-width: 16%; text-align: center; }
#wa-conference-list .schedule__row .schedule__col:nth-child(7) { flex: 0 0 4%; max-width: 4%; text-align: center; }

/* === 2. 콘텐츠 영역 & 간격 === */
#wa-conference-list .main__contents {
    padding: 0px 24px 24px 24px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    min-height: max-content;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 -1px 6px rgba(0, 0, 0, 0.04);
}
#wa-conference-list.dark .main__contents {
    background: #1a1d1f;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), 0 -1px 6px rgba(0, 0, 0, 0.15);
}
#wa-conference-list .schedule__wrapper { margin: 0; }
#wa-conference-list .drafts__container { padding-top: 0; }
#wa-conference-list .drafts.card { background: transparent; padding: 0; }

/* === 3. 테이블 헤더 행 === */
#wa-conference-list .schedule__row[p-select="schedule-row-header"] {
/*     background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
    border-radius: 8px 8px 0 0;
    margin-bottom: 4px; */
}
#wa-conference-list .schedule__row[p-select="schedule-row-header"] .schedule__col {
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    color: #374151;
    padding: 14px 12px;
}
#wa-conference-list.dark .schedule__row[p-select="schedule-row-header"] {
    background: #1a1d21;
    border-bottom: 2px solid #2d3138;
}
#wa-conference-list.dark .schedule__row[p-select="schedule-row-header"] .schedule__col {
    color: #a0aab8;
}

/* === 4. 콘텐츠 행 — 카드 === */
#wa-conference-list .schedule__row[p-item] {
    background: #fafbfc;
    border-radius: 12px;
    border: 1px solid #e8eaed;
    border-left: 3px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
#wa-conference-list .schedule__row[p-item]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(27, 134, 202, 0.12), 0 2px 4px rgba(0,0,0,0.04);
    background: #f0f7fc;
    border-color: var(--color-primary);
    border-left-color: var(--color-primary);
}
#wa-conference-list .schedule__row[p-item].selected {
    border-left: 3px solid var(--color-primary) !important;
    background: #f0f7fc !important;
    box-shadow: 0 4px 12px rgba(27,134,202,0.1), 0 2px 4px rgba(0,0,0,0.04);
}
#wa-conference-list .schedule__row.conf-row--ongoing {
    border-left: 3px solid #059669;
}

/* === Ongoing row — metadata tags (hidden by default, shown on tablet) === */
.conf-row-meta__tag,
.conf-row-meta__sep { display: none; }

/* === Ongoing row — pulsing live indicator animation === */
@keyframes confOngoingPulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.4; transform: translateY(-50%) scale(0.7); }
}

#wa-conference-list.dark .schedule__row[p-item] {
    background: #22252a !important;
    border: 1px solid #2d3138 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#wa-conference-list.dark .schedule__row[p-item]:hover {
    background: #282c34;
    border-color: #3a3f48;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
#wa-conference-list.dark .schedule__row[p-item].selected {
    background: #1a2a3a !important;
    border-left: 3px solid #4fb8ff !important;
}

/* === 5. 회의 상태 배지 (WCAG 4.5:1) === */
.conf-state {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 34px;
    white-space: nowrap;
}
.conf-state--standby { background: #dbeafe; color: #1e40af; }
.conf-state--ongoing { background: #d1fae5; color: #065f46; }
.conf-state--ended   { background: #f3f4f6; color: #6b7280; }

body.dark .conf-state--standby { background: rgba(30,64,175,0.2); color: #93bbfd; }
body.dark .conf-state--ongoing { background: rgba(6,95,70,0.2); color: #6ee7b7; }
body.dark .conf-state--ended   { background: rgba(107,114,128,0.15); color: #9ca3af; }

/* === 6. "참여" 버튼 === */
#wa-conference-list .enter__button {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 16px;
    font-weight: 600;
    min-width: 110px;
    min-height: 48px;
    width: auto !important;
    margin: 8px 0 !important;
    transition: background 0.2s, box-shadow 0.2s;
}
#wa-conference-list .enter__button:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: 0 2px 8px rgba(27, 134, 202, 0.3);
}
#wa-conference-list .enter__button svg { fill: #fff; width: 18px; height: 18px; }
#wa-conference-list .enter__button .action__label { font-size: 16px; font-weight: 600; color: #ffffff; }

/* === 6-1. "다시보기" 버튼 (종료된 회의) === */
#wa-conference-list .enter__button--replay {
    background: transparent !important;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: none;
}
#wa-conference-list .enter__button--replay svg { fill: currentColor; }
#wa-conference-list .enter__button--replay .action__label { color: inherit; }
#wa-conference-list .enter__button--replay:hover {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

#wa-conference-list.dark .enter__button--replay {
    background: transparent !important;
    border: 2px solid #4fb8ff !important;
    color: #4fb8ff !important;
}
#wa-conference-list.dark .enter__button--replay:hover {
    background: #4fb8ff !important;
    color: #1a1d1f !important;
}

/* === 7. 회의 정보 컬럼 === */
#wa-conference-list .schedule__product h3 {
    font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em;
    color: #111827; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
#wa-conference-list.dark .schedule__product h3 { color: #f1f5f9; }

#wa-conference-list .schedule__details .product__field:nth-child(2) {
    font-size: 15px; font-weight: 500; color: #4b5563; line-height: 1.4;
}
#wa-conference-list.dark .schedule__details .product__field:nth-child(2) { color: #9ca3af; }

#wa-conference-list .schedule__details .product__field:nth-child(3) {
    font-size: 14px; font-weight: 500; color: #4b5563; line-height: 1.4;
    font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
#wa-conference-list.dark .schedule__details .product__field:nth-child(3) { color: #9ca3af; }

/* === 8. 회의타입 / 개설자 === */
#wa-conference-list .conflist__type .schedule__date,
#wa-conference-list .conflist__name .schedule__date {
    font-size: 15px; font-weight: 500; line-height: 1.5;
}

/* === 9. 예약유형 배지 === */
#wa-conference-list .released__status {
    display: inline-block; padding: 6px 14px; border-radius: 6px;
    font-size: 14px; font-weight: 600; line-height: 1.5;
    text-align: center; min-width: 52px; min-height: 32px;
}

/* === 10. 썸네일 === */
#wa-conference-list .schedule__preview {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
#wa-conference-list.dark .schedule__preview {
    border: 1px solid #2d3138;
}

/* === 11. 통계 카드 === */
#wa-conference-list .my-stats-card {
    background: #ffffff;
    border: 1px solid #e8eaed;
    /* border-left: 4px solid #4472c4; */
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 -1px 6px rgba(0, 0, 0, 0.04);
    padding: 20px 28px;
    /* margin-bottom: 20px; */
}
#wa-conference-list.dark .my-stats-card {
    background: #1e2024;
    border: 1px solid #2d3138;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), 0 -1px 6px rgba(0, 0, 0, 0.15);
}

#wa-conference-list .my-stats-card__header {
    border-bottom-color: #e8eaed;
}
#wa-conference-list.dark .my-stats-card__header {
    border-bottom-color: #2d3138;
}

#wa-conference-list .my-stats-tabs__btn.active {
    border-color: #e8eaed;
    border-top: none;
    border-bottom-color: #ffffff;
}

#wa-conference-list.dark .my-stats-tabs__btn.active {
    background: #1e2024;
    border-color: #2d3138;
    border-bottom-color: #1e2024;
}

#wa-conference-list .my-stats-card__label { font-size: 15px; color: #374151; }
#wa-conference-list.dark .my-stats-card__label { color: #9ca3af; }
#wa-conference-list .my-stats-card__value { font-size: 24px; }
#wa-conference-list .my-stats-card__unit { font-size: 14px; }
#wa-conference-list .my-stats-card__body { gap: 32px; }
#wa-conference-list .my-stats-card__item { gap: 14px; }
#wa-conference-list .my-stats-card__icon { width: 42px; height: 42px; }
#wa-conference-list .my-stats-card__icon svg { width: 24px; height: 24px; }

/* === 12. 페이지네이션 === */
#wa-conference-list #pagination { margin-top: 24px; padding: 16px 0 24px 0; }
#wa-conference-list .paginationjs .paginationjs-pages li > a {
    min-width: 44px; min-height: 44px; line-height: 44px;
    font-size: 16px; font-weight: 500;
    border-radius: 8px; margin: 0 3px;
    border: 1px solid #e5e7eb;
    background: #ffffff; color: #374151;
    transition: background 0.15s, border-color 0.15s;
}
#wa-conference-list .paginationjs .paginationjs-pages li > a:hover {
    background: #f1f5f9; border-color: #d0d5dd;
}
#wa-conference-list .paginationjs .paginationjs-pages li.active > a {
    background: var(--color-primary); color: #ffffff;
    border-color: var(--color-primary); font-weight: 700;
    box-shadow: 0 2px 4px rgba(27,134,202,0.3);
}
#wa-conference-list.dark .paginationjs .paginationjs-pages li > a {
    background: #1e2024; border-color: #2d3138; color: #d1d5db;
}
#wa-conference-list.dark .paginationjs .paginationjs-pages li > a:hover { background: #252830; }

/* === 13. 우측 참여자 패널 === */
#wa-conference-list .users__head {
    background: linear-gradient(135deg, var(--color-primary), #1570a6);
    height: 56px; line-height: 56px;
    font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
}
#wa-conference-list .users__list .org__row {
    padding: 2px 16px; margin: 0 8px; border-radius: 8px; margin-bottom: 4px;
    min-height: 44px;
    border-bottom: 1px solid #f0f0f0;
}
#wa-conference-list .users__list .org__row:hover { background: #f1f5f9; }
#wa-conference-list.dark .users__list .org__row:hover { background: #272b30; }
#wa-conference-list.dark .users__list .org__row { border-bottom-color: #2d3138; }

#wa-conference-list .main__users .org__value { font-size: 20px; font-weight: 600; line-height: 1.4; }
#wa-conference-list .main__users .org__sub { font-size: 14px; color: #4b5563; }
#wa-conference-list.dark .main__users .org__sub { color: #9ca3af; }

/* 우측 패널 토글 버튼 — 위치 상단 고정 */
#wa-conference-list .menu__slider.menu__sbtn2 {
    top: 213px;
}

/* 우측 패널 — 빈 상태 안내 */
#wa-conference-list .users__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
    gap: 16px;
}
#wa-conference-list .users__empty-text {
    font-size: 16px;
    font-weight: 500;
    color: #555e6b;
    line-height: 1.6;
}
#wa-conference-list.dark .users__empty-text {
    color: #94a3b8;
}
#wa-conference-list.dark .users__empty svg {
    stroke: #4a5568;
}

/* === 14. "더보기" 버튼 항상 표시 === */
#wa-conference-list .conflist__util .actions__button {
    visibility: visible !important; opacity: 1 !important;
    background: #f3f4f6; border-radius: 8px;
    width: 36px; height: 36px; transition: background 0.15s;
}
#wa-conference-list .conflist__util .actions__button:hover { background: #e5e7eb; }
#wa-conference-list .conflist__util .actions__button .icon { fill: #6b7280; }
#wa-conference-list .conflist__util .actions__button:hover .icon { fill: #374151; }
#wa-conference-list.dark .conflist__util .actions__button { background: #2d3138; }
#wa-conference-list.dark .conflist__util .actions__button:hover { background: #3a3f48; }
#wa-conference-list.dark .conflist__util .actions__button .icon { fill: #9ca3af; }

/* === 15. 요약 패널 다크모드 === */
body.dark #confSummaryArea {
    background: #1e2024;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body.dark #confSummaryContent .info__row strong { color: #9ca3af; }
body.dark #confSummaryContent .info__row span { color: #e5e7eb; }
body.dark #confSummaryArea .conf-summary__close { color: #9ca3af; }
body.dark #confSummaryArea .conf-summary__close:hover,
body.dark #confSummaryArea .conf-summary__close:focus-visible { background: rgba(255,255,255,0.08); color: #f3f4f6; }
body.dark .conf-status-badge--standby { background: #1e3a8a33; color: #93c5fd; }
body.dark .conf-status-badge--ongoing { background: #06453833; color: #6ee7b7; }
body.dark .conf-status-badge--ended   { background: #7f1d1d33; color: #fca5a5; }

/* === 16. 기간 필터 === */
#wa-conference-list .condition__label { font-size: 16px; font-weight: 600; }
#wa-conference-list .condition_select {
    font-size: 16px; min-height: 44px;
    min-width: 90px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s;
}
#wa-conference-list .condition_select:hover {
    border-color: var(--color-primary);
}
#wa-conference-list.dark .condition_select {
    background: #1e2024;
    border-color: #3a3f48;
}
#wa-conference-list.dark .condition_select:hover {
    border-color: #4fb8ff;
}
#wa-conference-list .button.condition__search { min-height: 44px; min-width: 72px; }
#wa-conference-list .main__head {
    padding: 14px 24px 10px 24px;
/*     margin-left: 20px;
    margin-right: 20px; */
    justify-content: flex-end;
}
#wa-conference-list .condition__date {
    gap: 8px;
    flex-wrap: nowrap;
}

/* === 17. 권한없음 텍스트 === */
#wa-conference-list .conflist__enter .schedule__control.diff { font-size: 14px; color: #9ca3af; }

/* ================================================================
   회의 목록 — 개인화 인사 배너
   ================================================================ */
#wa-conference-list .greeting-banner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 24px 30px 16px 30px;
    background: transparent;
    border: none;
    border-radius: 0;
}

#wa-conference-list .greeting-banner__left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}


#wa-conference-list .greeting-banner__name {
    font-size: 28px;
    font-weight: 800;
    color: #0f1d30;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

#wa-conference-list .greeting-banner__name .greeting-id {
    color: var(--color-primary);
    font-weight: 600;
}
#wa-conference-list.dark .greeting-banner__name .greeting-id {
    color: var(--sp-color-primary-300, #5AADE0);
}

#wa-conference-list .greeting-banner__message {
    font-size: 18px;
    font-weight: 500;
    color: #475569;
    line-height: 1.3;
}

#wa-conference-list .greeting-banner__logout {
    font-size: 14px;
    font-weight: 500;
    color: #b91c1c;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    background: #fde8e8;
    padding: 7px 16px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    transition: color 0.15s, background 0.15s;
}
#wa-conference-list .greeting-banner__logout:hover {
    color: #ffffff;
    background: #991b1b;
}
#wa-conference-list.dark .greeting-banner__logout {
    color: #fca5a5;
    background: #3a2020;
}
#wa-conference-list.dark .greeting-banner__logout:hover {
    color: #ffffff;
    background: #7f1d1d;
}

#wa-conference-list .greeting-banner__today {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.5;
    margin-left: auto;
}

#wa-conference-list .greeting-banner__today .today-count {
    font-size: 24px;
    font-weight: 800;
    margin: 0 2px;
}

#wa-conference-list .greeting-banner__today .today-none {
    color: #6b7280;
    font-weight: 500;
}

/* 인사 배너 — 다크모드 */
#wa-conference-list.dark .greeting-banner {
    background: transparent;
    border: none;
}

#wa-conference-list.dark .greeting-banner__name {
    color: #e8ecf1;
}

#wa-conference-list.dark .greeting-banner__message {
    color: #7a8494;
}

#wa-conference-list.dark .greeting-banner__today {
    color: #6b9bef;
}

#wa-conference-list.dark .greeting-banner__today .today-none {
    color: #9ca3af;
}

/* 인사 배너 — 반응형: 아래 태블릿 블록(#wa-conference-list .greeting-banner)에 통합됨 */

/* ================================================================
   회의 목록 — 레이아웃 순서 재배치 (CSS order)
   인사 배너 → 통계 카드 → 타이틀+필터 → 회의 테이블
   ================================================================ */
#wa-conference-list .main__section {
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
    overflow-y: scroll;
}
#wa-conference-list.dark .main__section {
    background: #111315;
}
#wa-conference-list .greeting-banner { order: 1; }
#wa-conference-list .my-stats-card   { order: 2; }
#wa-conference-list .main__head      { order: 3; }
#wa-conference-list #departmentTree  { order: 4; }
#wa-conference-list .main__contents  { order: 5; }

/* ================================================================
   사이드바 — 현재 위치 표시 (menu__user 대체)
   ================================================================ */
.menu__location {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 2px solid var(--color-primary);
}

.menu__location .location__label {
    font-size: 13px;
    font-weight: 600;
    color: #4a6280;
    white-space: nowrap;
    flex-shrink: 0;
}

.menu__location .location__page {
    font-size: 2em;
    font-weight: 800;
    color: #0d6ead;
    letter-spacing: -0.02em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark .menu__location {
    background: #161a1f;
    border-bottom: 2px solid #4fb8ff;
}

body.dark .menu__location .location__label {
    color: #8a9bb0;
}

body.dark .menu__location .location__page {
    color: #4fb8ff;
}

/* 관리자 햄버거 — 데스크톱 숨김 */
.admin-menu-toggle { display: none; }

/* ================================================================
   태블릿 대응 (823px 이하)
   ================================================================ */
@media only screen and (max-width: 1100px) {

    /* 관리자 햄버거 버튼 표시 */
    .admin-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        border-radius: 8px;
        margin-right: 8px;
    }
    .admin-menu-toggle:active { transform: scale(0.92); }
    .admin-menu-toggle > svg { width: 28px; height: 28px; }

    /* 관리자 사이드 메뉴 슬라이드아웃 드로어 */
    body[id^="wa-admin"] .main__menu,
    #wa-conference-group .main__menu {
        position: fixed !important;
        width: 330px !important;
        min-width: 330px !important;
        left: -330px;
        top: 52px;
        bottom: 0;
        z-index: 99999;
        transition: left ease 0.5s;
        box-shadow: 2px 0px 6px rgba(0,0,0,0.1);
        overflow-y: auto;
    }
    body[id^="wa-admin"] .main__menu.active,
    #wa-conference-group .main__menu.active {
        left: 0;
    }

    /* 관리자 백드롭 오버레이 */
    body[id^="wa-admin"] .admin-sidebar-backdrop,
    #wa-conference-group .admin-sidebar-backdrop {
        display: none;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        z-index: 99998;
    }
    body[id^="wa-admin"] .admin-sidebar-backdrop.active,
    #wa-conference-group .admin-sidebar-backdrop.active {
        display: block;
    }

    /* 0. 헤더 높이 축소 */
    .header {
        height: 52px;
        padding: 8px 20px;
    }
    .page:not(.pdfViewer .page) {
        padding-top: 52px;
    }
    /* iOS에서 100vh가 주소창 뒤 영역을 포함하므로 100%로 대체 */
    .main {
        height: 100%;
    }
    .header__logo {
        height: 36px;
        width: 140px;
    }

    /* 관리자 태블릿: 로고 숨김 → 페이지명에 공간 확보 */
    body[id^="wa-admin"] .header__logo.admin,
    #wa-conference-group .header__logo.admin {
        display: none;
    }
    body[id^="wa-admin"] .header__page-name,
    #wa-conference-group .header__page-name {
        margin-left: 0;
    }

    /* 태블릿: 헤더 버튼 축소 (홈/관리자 120→40, 기본 48→40) */
    .header__head {
        width: 40px;
        height: 40px;
    }
    .header__item_user .header__head[p-select="view-home-page"],
    .header__item_messages .header__head[p-select="view-admin-page"] {
        padding: 0;
    }
    .header__setting {
        width: 22px;
        height: 22px;
        margin-left: 0;
    }
    .header__item:not(:last-child),
    .header__search:not(:last-child) {
        margin-right: 8px;
    }

    /* 1. 사이드 메뉴 배경 → 흰색 */
    .main__menu {
        background: #ffffff !important;
    }
    body.dark .main__menu {
        background: #1a1d1f !important;
    }

    /* 2. 현재위치 → 사이드바에서 숨기고 헤더에 표시 */
    .menu__location {
        display: none !important;
    }
    .header__page-name {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        font-weight: 700;
        color: var(--color-primary);
        background: rgba(27, 134, 202, 0.08);
        padding: 6px 16px;
        border-radius: 20px;
        border: 1px solid rgba(27, 134, 202, 0.15);
        margin-left: 8px;
        margin-right: auto;
        letter-spacing: -0.01em;
    }
    body.dark .header__page-name {
        color: #4fb8ff;
        background: rgba(79, 184, 255, 0.1);
        border-color: rgba(79, 184, 255, 0.15);
    }

    /* 3. 회의 카드 — 제목 + 상태 + 참여만 표시 */
    #wa-conference-list .schedule__row[p-item] {
        flex-wrap: nowrap;
        align-items: center;
        padding: 14px 16px;
        gap: 16px;
    }

    /* 숨김: 구분 배지(1), 회의타입(3), 개설자(5), 더보기(7) */
    #wa-conference-list .schedule__row .schedule__col:nth-child(1),
    #wa-conference-list .schedule__row .schedule__col:nth-child(3),
    #wa-conference-list .schedule__row .schedule__col:nth-child(5),
    #wa-conference-list .schedule__row .schedule__col:nth-child(7),
    #wa-conference-list .conflist__type,
    #wa-conference-list .conflist__name,
    #wa-conference-list .conflist__util,
    #wa-conference-list .conflist__lock,
    #wa-conference-list .schedule__row .schedule__col:first-child .released__status {
        display: none !important;
        position: static !important;
    }

    /* 회의 정보(제목+시간) — 남은 공간 채움 */
    #wa-conference-list .schedule__row .schedule__col:nth-child(2) {
        flex: 1 1 auto;
        max-width: none;
        padding: 4px 0;
    }
    #wa-conference-list .schedule__row .schedule__col:nth-child(2) .schedule__item {
        gap: 12px;
    }
    #wa-conference-list .schedule__row .schedule__col:nth-child(2) .schedule__product h3 {
        margin-bottom: 4px;
    }

    /* 상태 배지 — 고정 너비 */
    #wa-conference-list .schedule__row .schedule__col:nth-child(4) {
        flex: none;
        max-width: none;
        padding: 4px 8px;
    }

    /* 참여 버튼 — 고정 너비 */
    #wa-conference-list .schedule__row .schedule__col:nth-child(6) {
        flex: none;
        max-width: none;
        padding: 4px 0;
    }

    /* 테이블 헤더 숨김 (카드형에서는 불필요) */
    #wa-conference-list .schedule__row[p-select="schedule-row-header"] {
        display: none !important;
    }

    /* 기존 920px absolute 규칙 강제 오버라이드 — 숨길 요소 */
    #wa-conference-list .schedule__row[p-item] .schedule__col.text-center.conflist__type {
        display: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #wa-conference-list .schedule__row[p-item] .schedule__col.text-center.conflist__name {
        display: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #wa-conference-list .schedule__row[p-item] .schedule__col.conflist__util {
        display: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #wa-conference-list .schedule__row[p-item] .schedule__col.conflist__lock {
        display: none !important;
    }

    /* 구분 배지(1번 컬럼) — 완전 숨김 */
    #wa-conference-list .schedule__row[p-item] > .schedule__col:first-child {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* 우측 참여자 패널 + 토글 버튼 숨김 (태블릿) */
    #wa-conference-list .main__users.users__layer.conf__list {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
    }
    .menu__slider.menu__sbtn2.conf__users {
        display: none !important;
    }

    /* 태블릿 스크롤 컨테이너 — 헤더/사이드바만 고정, 나머지 통째로 스크롤 */
    #wa-conference-list .main__section {
        background: #f8f9fa;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #wa-conference-list.dark .main__section {
        background: #111315;
    }

    /* 회의목록 콘텐츠 — 자연 확장, base calc(50%) 무효화 */
    #wa-conference-list .main__contents {
        /* margin: 0 4px; */
        padding: 12px 8px 16px 8px;
        border-radius: 12px 12px 0 0;
        height: auto;
        flex: 1 0 auto;
    }

    /* 인사 배너 태블릿 조정 */
    #wa-conference-list .greeting-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px 16px 12px 16px;
    }

    /* 통계 카드 태블릿 조정 */
    #wa-conference-list .my-stats-card {
/*         margin-left: 16px;
        margin-right: 16px; */
    }

    /* 필터 영역 */
    #wa-conference-list .main__head {
        /* margin-left: 8px;
        margin-right: 8px; */
        padding: 10px 16px 8px 16px;
    }

    /* ================================================================
       ONGOING CONFERENCE ROW — TABLET CARD REDESIGN
       시각적 계층 구조:
         Level 1 ★★★  진행중 상태 + 회의 이름  →  즉시 인지
         Level 2 ★★   시간 범위 + 회의 유형    →  맥락 확인
         Level 3 ★    구분(즉시/상시) + 참여    →  행동 유도
       ================================================================ */

    /* — 1. Card container — 레이아웃만 변경, 색상은 PC와 동일 — */
    #wa-conference-list .schedule__row.conf-row--ongoing {
        position: relative !important;
        display: block !important;
        padding: 48px 152px 14px 20px !important;
    }

    /* — 2. 상태 배지 → absolute 좌상단 (Level 1) — */
    #wa-conference-list .schedule__row.conf-row--ongoing .conflist__sdate {
        position: absolute !important;
        top: 10px !important;
        left: 20px !important;
        padding: 0 !important;
        text-align: left !important;
        z-index: 2;
    }

    /* — 3. 회의 정보 → 일반 흐름 (Level 1+2) — */
    #wa-conference-list .schedule__row.conf-row--ongoing .conflist__info {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* — 4. 참여 버튼 컬럼 → 높이 0, overflow visible (래퍼 역할만) — */
    #wa-conference-list .schedule__row.conf-row--ongoing .conflist__enter {
        position: static !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        flex: none !important;
    }

    /* — 4-1. 버튼 래퍼 → 카드 기준 absolute 우하단 — */
    #wa-conference-list .schedule__row.conf-row--ongoing .conflist__enter .schedule__control.diff {
        position: absolute !important;
        bottom: 10px !important;
        right: 16px !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10;
        width: auto !important;
    }

    /* — 5. 진행중 배지 — 펄스 도트 추가 (색상은 PC 동일) — */
    #wa-conference-list .schedule__row.conf-row--ongoing .conf-state--ongoing {
        position: relative;
        padding-left: 28px !important;
    }

    #wa-conference-list .schedule__row.conf-row--ongoing .conf-state--ongoing::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #059669;
        animation: confOngoingPulse 1.5s ease-in-out infinite;
    }

    /* — 6. 메타태그 인라인 표시 (시간과 같은 줄) — */
    #wa-conference-list .schedule__row.conf-row--ongoing .conf-row-meta__tag {
        display: inline-flex !important;
        align-items: center;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        vertical-align: middle;
    }

    /* 회의타입 태그(status 클래스 없음)만 회색 배경 */
    #wa-conference-list .schedule__row.conf-row--ongoing .conf-row-meta__tag:not([class*="status-"]) {
        background: #f3f4f6;
        color: #4b5563;
    }

    #wa-conference-list .schedule__row.conf-row--ongoing .conf-row-meta__sep {
        display: inline !important;
        color: #9ca3af;
        font-size: 13px;
        line-height: 1;
        vertical-align: middle;
    }

    #wa-conference-list .schedule__row.conf-row--ongoing .conf-row-meta__spacer {
        display: inline-block !important;
        width: 8px;
    }
}


/* ================================================================
   관리자 페이지 — 배경/카드 구분 개선
   ================================================================ */
body[id^="wa-admin"] .main__section {
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
}
body[id^="wa-admin"].dark .main__section {
    background: #111315;
}

body[id^="wa-admin"] .main__contents {
    background: #ffffff;
}
body[id^="wa-admin"].dark .main__contents {
    background: #1a1d1f;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), 0 -1px 6px rgba(0, 0, 0, 0.15);
}

/* admin-index 레이아웃 순서 (인사배너 → 타이틀 → 콘텐츠) */
#wa-admin-index .greeting-banner { order: 1; }
#wa-admin-index .main__head      { order: 2; }
#wa-admin-index #departmentTree  { order: 3; }
#wa-admin-index .main__contents  { order: 4; }

/* 태블릿 반응형 */
@media only screen and (max-width: 1100px) {
    body[id^="wa-admin"] .main__section {
        background: #f8f9fa;
    }
    body[id^="wa-admin"].dark .main__section {
        background: #111315;
    }
    body[id^="wa-admin"] .main__contents {
        margin: 0 4px;
        border-radius: 12px 12px 0 0;
    }
}

/* ================================================================
   관리자 페이지 — 개인화 인사 배너
   ================================================================ */
body[id^="wa-admin"] .greeting-banner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 24px 30px 16px 30px;
    background: transparent;
    border: none;
    border-radius: 0;
}

body[id^="wa-admin"] .greeting-banner__left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

body[id^="wa-admin"] .greeting-banner__name {
    font-size: 28px;
    font-weight: 800;
    color: #0f1d30;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

body[id^="wa-admin"] .greeting-banner__name .greeting-id {
    color: var(--color-primary);
    font-weight: 600;
}
body[id^="wa-admin"].dark .greeting-banner__name .greeting-id {
    color: var(--sp-color-primary-300, #5AADE0);
}

body[id^="wa-admin"] .greeting-banner__message {
    font-size: 18px;
    font-weight: 500;
    color: #475569;
    line-height: 1.3;
}

body[id^="wa-admin"] .greeting-banner__logout {
    font-size: 14px;
    font-weight: 500;
    color: #b91c1c;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    background: #fde8e8;
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    transition: color 0.15s, background 0.15s;
}
body[id^="wa-admin"] .greeting-banner__logout:hover {
    color: #ffffff;
    background: #991b1b;
}
body[id^="wa-admin"].dark .greeting-banner__logout {
    color: #fca5a5;
    background: #3a2020;
}
body[id^="wa-admin"].dark .greeting-banner__logout:hover {
    color: #ffffff;
    background: #7f1d1d;
}

body[id^="wa-admin"] .greeting-banner__today {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.5;
    margin-left: auto;
}
body[id^="wa-admin"] .greeting-banner__today .today-count {
    font-size: 24px;
    font-weight: 800;
    margin: 0 2px;
}
body[id^="wa-admin"] .greeting-banner__today .today-none {
    color: #6b7280;
    font-weight: 500;
}

/* === Health check traffic-light indicators === */
body[id^="wa-admin"] .greeting-banner__health {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-left: 8px;
    white-space: nowrap;
}
body[id^="wa-admin"] .health-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}
body[id^="wa-admin"] .health-dot__circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #9ca3af;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}
body[id^="wa-admin"] .health-dot__label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.02em;
    user-select: none;
}
body[id^="wa-admin"] .health-dot--ok .health-dot__circle {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
}
body[id^="wa-admin"] .health-dot--down .health-dot__circle {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
}
body[id^="wa-admin"] .health-dot--ok .health-dot__label {
    color: #16a34a;
}
body[id^="wa-admin"] .health-dot--down .health-dot__label {
    color: #dc2626;
}

/* === Health help tooltip (?) === */
body[id^="wa-admin"] .health-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s;
}
body[id^="wa-admin"] .health-help:hover,
body[id^="wa-admin"] .health-help:focus {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}
body[id^="wa-admin"] .health-help__icon {
    width: 22px;
    height: 22px;
    stroke: #9ca3af;
    flex-shrink: 0;
    transition: stroke 0.15s;
}
body[id^="wa-admin"] .health-help:hover .health-help__icon,
body[id^="wa-admin"] .health-help:focus .health-help__icon {
    stroke: #6b7280;
}

/* Tooltip panel */
body[id^="wa-admin"] .health-help__tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    white-space: normal;
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
}
body[id^="wa-admin"] .health-help__tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
}
body[id^="wa-admin"] .health-help:hover .health-help__tooltip,
body[id^="wa-admin"] .health-help:focus .health-help__tooltip {
    display: block;
}
body[id^="wa-admin"] .health-help__title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}
body[id^="wa-admin"] .health-help__tooltip p {
    margin: 0 0 12px;
    color: #6b7280;
}
body[id^="wa-admin"] .health-help__dl {
    margin: 0 0 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: baseline;
}
body[id^="wa-admin"] .health-help__dl dt {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 15px;
    color: #374151;
}
body[id^="wa-admin"] .health-help__dl dd {
    margin: 0;
    font-size: 15px;
    color: #6b7280;
}
body[id^="wa-admin"] .health-help__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
body[id^="wa-admin"] .health-help__dot--green { background: #22c55e; }
body[id^="wa-admin"] .health-help__dot--red   { background: #ef4444; }
body[id^="wa-admin"] .health-help__dot--gray  { background: #9ca3af; }
body[id^="wa-admin"] .health-help__section {
    margin-bottom: 12px;
}
body[id^="wa-admin"] .health-help__section:last-child {
    margin-bottom: 0;
}
body[id^="wa-admin"] .health-help__section strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}
body[id^="wa-admin"] .health-help__tooltip ul,
body[id^="wa-admin"] .health-help__tooltip ol {
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    color: #6b7280;
}
body[id^="wa-admin"] .health-help__tooltip li {
    margin-bottom: 4px;
}
body[id^="wa-admin"] .health-help__tooltip li b {
    color: #374151;
}

/* 인사 배너 — 다크모드 */
body[id^="wa-admin"].dark .greeting-banner {
    background: transparent;
    border: none;
}
body[id^="wa-admin"].dark .greeting-banner__name {
    color: #e8ecf1;
}
body[id^="wa-admin"].dark .greeting-banner__message {
    color: #7a8494;
}
body[id^="wa-admin"].dark .greeting-banner__today {
    color: #6b9bef;
}
body[id^="wa-admin"].dark .greeting-banner__today .today-none {
    color: #9ca3af;
}
body[id^="wa-admin"].dark .health-dot__label {
    color: #9ca3af;
}
body[id^="wa-admin"].dark .health-dot--ok .health-dot__circle {
    background: #4ade80;
    box-shadow: 0 0 5px rgba(74, 222, 128, 0.35);
}
body[id^="wa-admin"].dark .health-dot--ok .health-dot__label {
    color: #86efac;
}
body[id^="wa-admin"].dark .health-dot--down .health-dot__circle {
    background: #f87171;
    box-shadow: 0 0 5px rgba(248, 113, 113, 0.35);
}
body[id^="wa-admin"].dark .health-dot--down .health-dot__label {
    color: #fca5a5;
}

/* Health help tooltip — 다크모드 */
body[id^="wa-admin"].dark .health-help:hover,
body[id^="wa-admin"].dark .health-help:focus {
    background: rgba(255, 255, 255, 0.08);
}
body[id^="wa-admin"].dark .health-help__icon {
    stroke: #6b7280;
}
body[id^="wa-admin"].dark .health-help:hover .health-help__icon,
body[id^="wa-admin"].dark .health-help:focus .health-help__icon {
    stroke: #9ca3af;
}
body[id^="wa-admin"].dark .health-help__tooltip {
    background: #1e2024;
    border-color: #33383F;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #d1d5db;
}
body[id^="wa-admin"].dark .health-help__tooltip::before {
    background: #1e2024;
    border-color: #33383F;
}
body[id^="wa-admin"].dark .health-help__title {
    color: #f3f4f6;
}
body[id^="wa-admin"].dark .health-help__tooltip p {
    color: #9ca3af;
}
body[id^="wa-admin"].dark .health-help__dl dt {
    color: #d1d5db;
}
body[id^="wa-admin"].dark .health-help__dl dd {
    color: #9ca3af;
}
body[id^="wa-admin"].dark .health-help__dot--green { background: #4ade80; }
body[id^="wa-admin"].dark .health-help__dot--red   { background: #f87171; }
body[id^="wa-admin"].dark .health-help__dot--gray  { background: #6b7280; }
body[id^="wa-admin"].dark .health-help__section strong {
    color: #d1d5db;
}
body[id^="wa-admin"].dark .health-help__tooltip ul,
body[id^="wa-admin"].dark .health-help__tooltip ol {
    color: #9ca3af;
}
body[id^="wa-admin"].dark .health-help__tooltip li b {
    color: #d1d5db;
}

/* 인사 배너 — 태블릿 반응형 */
@media only screen and (max-width: 1100px) {
    body[id^="wa-admin"] .greeting-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px 16px 12px 16px;
    }
    body[id^="wa-admin"] .greeting-banner__name {
        font-size: 22px;
    }
    body[id^="wa-admin"] .greeting-banner__message {
        font-size: 15px;
    }
    body[id^="wa-admin"] .greeting-banner__today {
        font-size: 14px;
    }
    body[id^="wa-admin"] .greeting-banner__today .today-count {
        font-size: 20px;
    }
    body[id^="wa-admin"] .greeting-banner__health {
        gap: 8px;
    }
    body[id^="wa-admin"] .health-dot__label {
        display: none;
    }
    /* 태블릿: 툴팁이 왼쪽으로 넘치지 않도록 보정 */
    body[id^="wa-admin"] .health-help__tooltip {
        left: auto;
        right: -12px;
        transform: none;
    }
    body[id^="wa-admin"] .health-help__tooltip::before {
        left: auto;
        right: 16px;
        transform: rotate(45deg);
    }
}

/* =========================================
   태블릿 UX 개선: 공지사항 테이블 / 테마 토글 / 터치 타겟
   ========================================= */

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

    /* [U-2] 공지사항 테이블: 날짜 컬럼 숨김 + 패딩 축소 */
    body[id^="wa-admin"] .earning__col:nth-child(2) {
        display: none;
    }
    body[id^="wa-admin"] .earning__col {
        padding: 8px 12px;
    }
    body[id^="wa-admin"] .earning__col:first-child {
        padding-left: 16px;
    }
    body[id^="wa-admin"] .earning__col:last-child {
        padding-right: 16px;
    }
    body[id^="wa-admin"] .earning__row:first-child .earning__col {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* [U-3] 테마 토글: 텍스트 숨김, 아이콘만 표시 */
    .theme__box {
        font-size: 0;
        padding: 0;
        width: 36px;
        height: 36px;
    }
    .theme__box .icon {
        margin-right: 0;
    }
    .theme__inner {
        padding: 2px;
    }

    /* [U-5] 로그아웃 버튼: 터치 타겟 44px 확보 */
    body[id^="wa-admin"] .greeting-banner__logout {
        min-height: 44px;
        padding: 12px 20px;
    }

    /* [U-1] 카드 헤더 버튼: 텍스트 숨김, 아이콘만 표시 */
    body[id^="wa-admin"] .card__head .button-small > span {
        display: none;
    }
    body[id^="wa-admin"] .card__head .button-small {
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body[id^="wa-admin"] .card__head .button-small .icon {
        margin: 0;
    }
}

/* =========================================
   Tablet responsive: admin conference cards
   ========================================= */

/* Fix: restore conference data values hidden by .schedule__link display:none at <=1023px */
@media only screen and (max-width: 1023px) {
    .promote .summary .schedule__link {
        display: block;
    }
}

/* Tablet & mobile: horizontal card layout, full-width, touch-optimized */
@media only screen and (max-width: 1259px) {
    .promote__list {
        margin: 0;
    }
    .promote .summary.wp__25 {
        flex: 0 0 100%;
        width: 100% !important;
        display: grid;
        grid-template-columns: 140px 1fr;
        column-gap: 16px;
        row-gap: 6px;
        align-content: center;
        margin: 16px 0 0;
        border-bottom: 1px solid #EFEFEF;
        padding-bottom: 16px;
    }
    .promote .summary.wp__25:last-child {
        border-bottom: none;
    }
    .promote .summary .summary__preview {
        grid-column: 1;
        grid-row: 1 / 6;
        height: auto;
        min-height: 100px;
        margin-bottom: 0;
        align-self: stretch;
    }
    .promote .summary .summary__preview:after {
        opacity: 1;
        visibility: visible;
        background: rgba(17, 19, 21, 0.3);
    }
    .promote .summary .summary__control {
        opacity: 1;
        visibility: visible;
    }
    .promote .summary .summary__button:not(:last-child) {
        margin-right: 8px;
    }
    .promote .summary .schedule__link {
        color: #33383F;
    }
    .promote .summary .summary__date {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid #EFEFEF;
    }
    body.dark .promote .summary.wp__25 {
        border-bottom-color: var(--sp-color-neutral-700, #333D50);
    }
    body.dark .promote .summary .summary__date {
        border-top-color: var(--sp-color-neutral-700, #333D50);
    }
}

/* ================================================================
   Admin-Index Conference Cards — Jony Ive Design Refinement
   Scoped to #wa-admin-index .promote only
   P0: WCAG color, touch-target, accessibility
   P1: hierarchy, empty-state, overlay
   P2: card separation, dark-mode, tokens
   P3: responsive 2-col, hover unification
   ================================================================ */

/* --- P0 #2: 데이터 값 색상 WCAG AA 준수 --- */
#wa-admin-index .promote .schedule__link {
    color: var(--sp-color-neutral-700, #333D50);
    font-weight: var(--sp-weight-semibold, 600);
}
#wa-admin-index.dark .promote .schedule__link {
    color: var(--sp-color-neutral-200, #DFE3EA);
}

/* --- P0 #4: 터치 타겟 44px (Apple HIG) --- */
#wa-admin-index .promote .summary__button {
    width: var(--sp-touch-target, 44px);
    height: var(--sp-touch-target, 44px);
}
#wa-admin-index .promote .summary__button .icon {
    width: 22px;
    height: 22px;
}

/* --- P0 #10: 접근성 — focus-within & focus-visible --- */
#wa-admin-index .promote .summary:focus-within .summary__preview:after,
#wa-admin-index .promote .summary:focus-within .summary__control {
    visibility: visible;
    opacity: 1;
}
#wa-admin-index .promote .summary__button:focus-visible {
    box-shadow: var(--sp-focus-ring, 0 0 0 3px rgba(26,111,166,0.25));
    outline: none;
}
#wa-admin-index.dark .promote .summary__button:focus-visible {
    box-shadow: 0 0 0 3px rgba(90, 173, 224, 0.4);
}

/* --- P1 #1: 정보 위계 — 회의명 강조 --- */
#wa-admin-index .promote .summary__line.conf-name-line {
    margin-bottom: 4px;
}
#wa-admin-index .promote .summary__line.conf-name-line .schedule__link {
    font-size: var(--sp-text-h3, 17px);
    font-weight: var(--sp-weight-semibold, 600);
    color: var(--sp-color-neutral-800, #1F2735);
    line-height: 1.35;
}
#wa-admin-index.dark .promote .summary__line.conf-name-line .schedule__link {
    color: var(--sp-color-neutral-100, #EFF1F5);
}
#wa-admin-index .promote .summary__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
#wa-admin-index .promote .summary__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--sp-text-body, 14px);
    color: var(--sp-color-neutral-600, #4A5468);
}
#wa-admin-index .promote .summary__meta-item .meta-label {
    font-weight: var(--sp-weight-medium, 500);
    color: var(--sp-color-neutral-600, #4A5468);
}
#wa-admin-index.dark .promote .summary__meta-item {
    color: var(--sp-color-neutral-300, #C8CED8);
}
#wa-admin-index.dark .promote .summary__meta-item .meta-label {
    color: var(--sp-color-neutral-400, #A0A8B8);
}

/* --- P1 #3: 프리뷰 오버레이 완화 (frosted-glass) --- */
#wa-admin-index .promote .summary:hover .summary__preview:after {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#wa-admin-index.dark .promote .summary:hover .summary__preview:after {
    background: rgba(0, 0, 0, 0.3);
}

/* --- Lock 아이콘 다크모드 배지 --- */
#wa-admin-index.dark .promote .icon.icon-lock.conf-board-icon2 {
    fill: #FFFFFF !important;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 6px;
    padding: 4px;
    width: 32px !important;
    height: 32px !important;
    box-sizing: border-box;
}

/* --- P1 #5: Empty State → .sp-empty 활용 --- */
#wa-admin-index .promote .conf-empty-state {
    width: 100%;
}

/* --- P2 #6: 카드 분리 — 미세 border --- */
#wa-admin-index .promote .summary.wp__25 {
    border-radius: var(--sp-radius-lg, 14px);
    border: 1px solid var(--sp-color-neutral-100, #EFF1F5);
    padding: 10px 10px 14px;
    background: var(--sp-color-neutral-0, #FFFFFF);
    transition: box-shadow var(--sp-motion-normal, 200ms) var(--sp-ease-default, ease-in-out);
}
#wa-admin-index .promote .summary.wp__25:hover {
    box-shadow: var(--sp-shadow-2, 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06));
}
#wa-admin-index.dark .promote .summary.wp__25 {
    background: var(--sp-color-neutral-800, #1F2735);
    border-color: var(--sp-color-neutral-700, #333D50);
}
#wa-admin-index.dark .promote .summary.wp__25:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.06);
}

/* --- P2 #9: Dark Mode — 버튼/날짜 대응 --- */
#wa-admin-index.dark .promote .summary__button {
    background: var(--sp-color-neutral-700, #333D50);
}
#wa-admin-index.dark .promote .summary__button .icon,
#wa-admin-index.dark .promote .summary__button .icon.icon-in,
#wa-admin-index.dark .promote .summary__button .icon.icon-edit,
#wa-admin-index.dark .promote .summary__button .icon.icon-close {
    fill: var(--sp-color-neutral-0, #FFFFFF) !important;
}
#wa-admin-index .promote .summary__date {
    color: var(--sp-color-neutral-600, #4A5468);
    font-size: var(--sp-text-body, 14px);
}
#wa-admin-index.dark .promote .summary__date {
    color: var(--sp-color-neutral-300, #C8CED8);
}
#wa-admin-index.dark .promote .summary__date .icon {
    fill: var(--sp-color-neutral-200, #DFE3EA) !important;
}

/* --- P3 #7: 반응형 2열 중간 단계 (768px~1259px) --- */
@media only screen and (max-width: 1259px) and (min-width: 768px) {
    #wa-admin-index .promote__list {
        display: flex;
        flex-wrap: wrap;
        margin: -8px;
    }
    #wa-admin-index .promote .summary.wp__25 {
        flex: 0 0 calc(50% - 16px);
        width: calc(50% - 16px) !important;
        display: block;
        margin: 8px;
        border-bottom: none;
        padding-bottom: 14px;
    }
    #wa-admin-index .promote .summary .summary__preview {
        grid-column: unset;
        grid-row: unset;
        height: 140px;
        min-height: unset;
        margin-bottom: 12px;
    }
    #wa-admin-index .promote .summary .summary__preview:after {
        display: none;
    }
    #wa-admin-index .promote .summary .summary__control {
        display: none;
    }
}

/* --- P3 #11: Hover 모델 통일 — 모바일 카드 --- */
@media only screen and (max-width: 767px) {
    #wa-admin-index .promote .summary .summary__preview:after {
        display: none;
    }
    #wa-admin-index .promote .summary .summary__control {
        display: none;
    }
    #wa-admin-index .promote .summary.wp__25 {
        padding: 12px;
        margin-bottom: 12px;
    }
}

/* === Admin-index .summary__actions: 태블릿·모바일 전용 카드 하단 버튼 === */
#wa-admin-index .promote .summary__actions {
    display: none;
}
@media only screen and (max-width: 1259px) {
    #wa-admin-index .promote .summary__actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 8px;
        grid-column: 1 / -1;
    }
    #wa-admin-index .promote .summary__actions .summary__button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--sp-touch-target, 44px);
        height: var(--sp-touch-target, 44px);
        border-radius: 50%;
        background: var(--sp-color-neutral-50, #F7F8FA);
        flex-shrink: 0;
    }
    #wa-admin-index .promote .summary__actions .summary__button .icon {
        width: 20px;
        height: 20px;
        fill: #6F767E;
    }
    #wa-admin-index.dark .promote .summary__actions .summary__button {
        background: var(--sp-color-neutral-700, #333D50);
    }
    #wa-admin-index.dark .promote .summary__actions .summary__button .icon {
        fill: var(--sp-color-neutral-0, #FFFFFF);
    }
    /* 참여 CTA (conference-list 스타일) — generic .enter__button(L6145) !important 차단 */
    #wa-admin-index .promote .summary__actions .enter__button {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--color-primary) !important;
        color: #ffffff !important;
        border-radius: 10px !important;
        padding: 10px 14px;
        font-size: 15px;
        font-weight: 600;
        min-height: 44px;
        width: auto !important;
        margin: 0;
        min-width: 0;
    }
    #wa-admin-index .promote .summary__actions .enter__button .icon {
        fill: #fff;
        width: 20px;
        height: 20px;
    }
    /* generic .action__label(L15842) { font-size:1.15em; font-weight:500 } override 필요 */
    #wa-admin-index .promote .summary__actions .enter__button .action__label {
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
    }
    #wa-admin-index .promote .summary__actions .enter__button:hover {
        background: var(--color-primary-hover) !important;
        box-shadow: 0 2px 8px rgba(26, 111, 166, 0.3);
    }
    #wa-admin-index.dark .promote .summary__actions .enter__button {
        background: var(--color-primary);
    }
    /* 다시보기 (종료된 회의) — .enter__button 부모의 !important 차단 위해 동일 레벨 !important 필요 */
    #wa-admin-index .promote .summary__actions .enter__button--replay {
        background: transparent !important;
        border: 2px solid var(--color-primary);
        color: var(--color-primary) !important;
    }
    #wa-admin-index .promote .summary__actions .enter__button--replay .icon { fill: currentColor !important; }
    #wa-admin-index .promote .summary__actions .enter__button--replay .action__label { color: inherit; }
    #wa-admin-index .promote .summary__actions .enter__button--replay:hover {
        background: var(--color-primary) !important;
        color: #ffffff !important;
    }
    #wa-admin-index .promote .summary__actions .enter__button--replay:hover .icon { fill: #fff !important; }
    #wa-admin-index .promote .summary__actions .enter__button--replay:hover .action__label { color: #ffffff; }
    #wa-admin-index.dark .promote .summary__actions .enter__button--replay {
        background: transparent !important;
        border-color: #4fb8ff;
        color: #4fb8ff !important;
    }
    #wa-admin-index.dark .promote .summary__actions .enter__button--replay .icon { fill: #4fb8ff; }
    #wa-admin-index.dark .promote .summary__actions .enter__button--replay:hover {
        background: #4fb8ff !important;
        color: #1a1d1f !important;
    }
    #wa-admin-index.dark .promote .summary__actions .enter__button--replay:hover .icon { fill: #1a1d1f; }
    /* Focus ring — K-WCAG 2.4.7 Focus Visible (공공기관 접근성 의무) */
    #wa-admin-index .promote .summary__actions .summary__button:focus-visible,
    #wa-admin-index .promote .summary__actions .enter__button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(26, 111, 166, 0.35);
    }
    #wa-admin-index.dark .promote .summary__actions .summary__button:focus-visible,
    #wa-admin-index.dark .promote .summary__actions .enter__button:focus-visible {
        box-shadow: 0 0 0 3px rgba(79, 184, 255, 0.45);
    }
}

/* ================================================================
   Admin-Index Badge Visibility Enhancement
   Scoped to #wa-admin-index .promote only
   크기 확대 + shadow + 위계 분화 + WCAG AA 대비 보정 (40~50대 공공기관)
   ================================================================ */

/* --- 불투명 뱃지 기반면 (공통) --- */
#wa-admin-index .promote .released__status.box__status {
    line-height: 1.5;
    min-height: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: var(--sp-radius-md, 8px);
    transition: box-shadow var(--sp-motion-normal, 200ms) var(--sp-ease-default, ease-in-out);
    letter-spacing: 0.02em;
}

/* --- 회의상태 뱃지 (primary) — top-left (F패턴 시선 최초 도달, 필수 정보) --- */
#wa-admin-index .promote .conf-state-badge.released__status.box__status {
    top: 8px;
    left: 8px;
    bottom: auto;
    padding: 5px 16px;
    font-size: var(--sp-text-body-lg, 15px);
    font-weight: var(--sp-weight-bold, 700);
}

/* --- 잠금 아이콘 — bottom-left (조건부 부가 정보) --- */
#wa-admin-index .promote .icon.icon-lock.conf-board-icon2 {
    position: absolute;
    top: auto;
    bottom: 8px;
    left: 8px;
    z-index: 100;
}

/* --- 예약유형 뱃지 (secondary) — 위치 + 위계 --- */
#wa-admin-index .promote .status-red.released__status.box__status,
#wa-admin-index .promote .status-green.released__status.box__status,
#wa-admin-index .promote .status-blue.released__status.box__status,
#wa-admin-index .promote .status-blue2.released__status.box__status,
#wa-admin-index .promote .status-yellow.released__status.box__status,
#wa-admin-index .promote .status-purple.released__status.box__status {
    top: 8px;
    right: 8px;
    padding: 4px 12px;
    font-size: var(--sp-text-body, 14px);
    font-weight: var(--sp-weight-semibold, 600);
}

/* --- 예약유형 뱃지 WCAG AA 대비 보정 (40~50대 공공기관) --- */
#wa-admin-index .promote .status-red.released__status.box__status {
    color: #C93C2B;
}
#wa-admin-index .promote .status-green.released__status.box__status {
    color: #3D7A2E;
}
#wa-admin-index .promote .status-purple.released__status.box__status {
    color: #5B30B8;
}

/* --- "종료" 뱃지 그림자 보강 (light) --- */
#wa-admin-index .promote .conf-state-badge.conf-state--end.released__status.box__status {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* --- 다크모드 불투명 배경 + 그림자 (WCAG AA 대비) --- */
#wa-admin-index.dark .promote .released__status.box__status {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
#wa-admin-index.dark .promote .conf-state-badge.conf-state--wait.released__status.box__status {
    background: #1B3352;
    color: #64B5F6;
}
#wa-admin-index.dark .promote .conf-state-badge.conf-state--ongoing.released__status.box__status {
    background: #1E4030;
    color: #A5F3C4;
}
#wa-admin-index.dark .promote .conf-state-badge.conf-state--end.released__status.box__status {
    background: #2A3140;
    color: #9CA3AF;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
#wa-admin-index.dark .promote .status-red.released__status.box__status {
    background: #3D2225;
    color: #FF8A7A;
}
#wa-admin-index.dark .promote .status-green.released__status.box__status {
    background: #223D28;
    color: #8FD47A;
}
#wa-admin-index.dark .promote .status-purple.released__status.box__status {
    background: #2A2345;
    color: #B893FF;
}
#wa-admin-index.dark .promote .status-yellow.released__status.box__status {
    background: #3A3420;
    color: #FFD88D;
}

/* --- Hover — 뱃지 부각 (종료 포함 — 동일 specificity (1,5,0), cascade 순서 승리) --- */
#wa-admin-index .promote .summary:hover .released__status.box__status {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
#wa-admin-index.dark .promote .summary:hover .released__status.box__status {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- 반응형 — Tablet (768-1259px) --- */
@media only screen and (max-width: 1259px) and (min-width: 768px) {
    #wa-admin-index .promote .conf-state-badge.released__status.box__status {
        padding: 4px 14px;
        font-size: var(--sp-text-body, 14px);
    }
    #wa-admin-index .promote .status-red.released__status.box__status,
    #wa-admin-index .promote .status-green.released__status.box__status,
    #wa-admin-index .promote .status-blue.released__status.box__status,
    #wa-admin-index .promote .status-blue2.released__status.box__status,
    #wa-admin-index .promote .status-yellow.released__status.box__status,
    #wa-admin-index .promote .status-purple.released__status.box__status {
        padding: 3px 10px;
        font-size: var(--sp-text-caption, 13px);
    }
}

/* --- 반응형 — Mobile (<=767px) --- */
@media only screen and (max-width: 767px) {
    #wa-admin-index .promote .released__status.box__status {
        padding: 3px 8px;
        font-size: 12px;
        line-height: 1.45;
        border-radius: var(--sp-radius-sm, 4px);
    }
    #wa-admin-index .promote .conf-state-badge.released__status.box__status {
        top: 6px;
        left: 6px;
    }
    #wa-admin-index .promote .icon.icon-lock.conf-board-icon2 {
        bottom: 6px;
        left: 6px;
    }
    #wa-admin-index .promote .status-red.released__status.box__status,
    #wa-admin-index .promote .status-green.released__status.box__status,
    #wa-admin-index .promote .status-blue.released__status.box__status,
    #wa-admin-index .promote .status-blue2.released__status.box__status,
    #wa-admin-index .promote .status-yellow.released__status.box__status,
    #wa-admin-index .promote .status-purple.released__status.box__status {
        top: 6px;
        right: 6px;
    }
}

/* ================================================================
   Admin Conference — Apple HIG Spacing Refinement
   8pt grid · content-first hierarchy · balanced padding
   Scoped to #wa-admin-conference only
   ================================================================ */

/* 1. Main contents — 8pt grid padding */
#wa-admin-conference .main__contents {
    padding: 16px 24px 32px 24px;
}

/* 2. Tab toggle — reduce excessive margin */
#wa-admin-conference .drafts .card__head.mb__10 {
    margin-bottom: 16px;
}

/* 3. Conference form row — flexible height, 8pt padding */
#wa-admin-conference .main__contents .conference__row {
    height: auto;
    min-height: 48px;
    padding: 8px 24px;
}

#wa-admin-conference .main__contents .conference__row[style*="height"] {
    height: auto !important;
}

/* 4. Conference label — precise typography, wider for Korean */
#wa-admin-conference .main__contents .conference__label {
    width: 112px;
    min-width: 112px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* 5. Conference col — label-to-control gap */
#wa-admin-conference .main__contents .conference__col {
    width: calc(100% - 112px);
    padding-left: 16px;
    box-sizing: border-box;
}

/* 6. Conference fieldset — internal framing */
#wa-admin-conference .main__contents .conference__fieldset {
    padding: 8px 0;
}

/* 7. Section dividers — tighter within form */
#wa-admin-conference .main__contents .create__line {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

/* 8. Button area — proper separation */
#wa-admin-conference .main__contents .conference__btns {
    padding: 24px 24px 16px 24px;
}

#wa-admin-conference .main__contents .conference__btn {
    margin-right: 8px;
}

#wa-admin-conference .main__contents .conference__btn:last-child {
    margin-right: 0;
}

/* 9. Customer table — header + data row spacing */
#wa-admin-conference .main__contents .customer__row:first-child .customer__col {
    padding: 8px 16px 16px 16px;
}

#wa-admin-conference .main__contents .customer__row:not(:first-child) .customer__col {
    padding: 12px 16px;
}

/* 10. Customer details panel — balanced padding */
#wa-admin-conference .main__contents .customer__details.custom__type {
    padding: 24px;
}

/* 11. Conference form container — responsive width */
#wa-admin-conference .main__contents .create__conference {
    width: 100%;
    max-width: 640px;
}

/* 12. Pagination — breathing room */
#wa-admin-conference .contents__pagination {
    margin-top: 24px;
}

/* 13. Tablet responsive */
@media only screen and (max-width: 1100px) {
    #wa-admin-conference .main__contents {
        padding: 16px 16px 32px 16px;
    }

    #wa-admin-conference .main__contents .conference__row {
        padding: 8px 16px;
    }

    #wa-admin-conference .main__contents .conference__btns {
        padding: 24px 16px 16px 16px;
    }
}

/* 14. Mobile responsive — stack label above control */
@media only screen and (max-width: 767px) {
    #wa-admin-conference .main__contents {
        padding: 8px 8px 24px 8px;
    }

    #wa-admin-conference .main__contents .conference__row {
        flex-wrap: wrap;
        min-height: 40px;
        padding: 8px 16px;
    }

    #wa-admin-conference .main__contents .conference__label {
        width: 100%;
        min-width: 100%;
        margin-bottom: 4px;
        font-size: 13px;
    }

    #wa-admin-conference .main__contents .conference__col {
        width: 100%;
        padding-left: 0;
    }

    #wa-admin-conference .main__contents .conference__btns {
        padding: 16px 16px 8px 16px;
    }

    #wa-admin-conference .drafts .card__head.mb__10 {
        margin-bottom: 8px;
    }
}

/* 15. Admin Conference — Tablet head/filter/table fix (Galaxy Tab A8) */
@media only screen and (max-width: 1024px) {
    /* A. 제목 + 필터바 세로 배치 */
    #wa-admin-conference .main__head {
        flex-direction: column;
        align-items: flex-start;
        height: auto !important;
        padding: 16px 20px 8px 20px !important;
    }

    #wa-admin-conference .main__title {
        flex-shrink: 0;
        width: 100%;
        margin-bottom: 8px;
    }

    #wa-admin-conference .main__text {
        white-space: nowrap;
    }

    /* B. 필터바 풀폭 + wrap */
    #wa-admin-conference .main__condition {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    #wa-admin-conference .condition__date {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    #wa-admin-conference .condition__date .form__search {
        min-width: 130px;
        flex: 1 1 130px;
    }

    #wa-admin-conference .condition__date > form.form {
        flex: 1 1 120px;
        min-width: 100px;
    }

    #wa-admin-conference .button.condition__search {
        width: auto;
        flex: 0 0 auto;
        padding: 0 16px;
    }

    /* C. 테이블 가로 스크롤 (.main__contents 스코핑 — 팝업 테이블 제외) */
    #wa-admin-conference .main__contents .customer__wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #wa-admin-conference .main__contents .customer__table {
        display: table;
        min-width: 700px;
    }

    #wa-admin-conference .main__contents .customer__col {
        font-size: 14px;
        padding: 12px 8px;
    }

    #wa-admin-conference .main__contents .customer__row:first-child .customer__col {
        font-size: 12px;
        padding: 8px 8px 12px;
    }

    /* D. 회의 목록 컬럼 텍스트 표시 복원 (base 규칙 .customer__col>.customer__email{display:none} 오버라이드) */
    #wa-admin-conference .main__contents .customer__col > .customer__email {
        display: block;
    }
}

/* 16. Admin/User pages — Tablet head/filter/table fix (Galaxy Tab A8)
   Applies to: admin-member, admin-board, admin-confanno, conference-group */
@media only screen and (max-width: 1024px) {
    /* A. 제목 + 필터바 세로 배치 */
    #wa-admin-member .main__head,
    #wa-admin-board .main__head,
    #wa-admin-confanno .main__head,
    #wa-conference-group .main__head {
        flex-direction: column;
        align-items: flex-start;
        height: auto !important;
        padding: 16px 20px 8px 20px !important;
    }

    #wa-admin-member .main__title,
    #wa-admin-board .main__title,
    #wa-admin-confanno .main__title,
    #wa-conference-group .main__title {
        flex-shrink: 0;
        width: 100%;
        margin-bottom: 8px;
    }

    #wa-admin-member .main__text,
    #wa-admin-board .main__text,
    #wa-admin-confanno .main__text,
    #wa-conference-group .main__text {
        white-space: nowrap;
    }

    /* B. 필터바 풀폭 + wrap */
    #wa-admin-member .main__condition,
    #wa-admin-board .main__condition,
    #wa-admin-confanno .main__condition,
    #wa-conference-group .main__condition {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    #wa-admin-member .condition__date,
    #wa-admin-board .condition__date,
    #wa-admin-confanno .condition__date,
    #wa-conference-group .condition__date {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    #wa-admin-member .condition__date .form__search,
    #wa-admin-board .condition__date .form__search,
    #wa-admin-confanno .condition__date .form__search {
        min-width: 130px;
        flex: 1 1 130px;
    }

    #wa-admin-member .condition__date > form.form,
    #wa-admin-board .condition__date > form.form,
    #wa-admin-confanno .condition__date > form.form,
    #wa-conference-group .condition__date > form.form {
        flex: 1 1 120px;
        min-width: 100px;
    }

    #wa-admin-member .button.condition__search,
    #wa-admin-board .button.condition__search,
    #wa-admin-confanno .button.condition__search,
    #wa-conference-group .button.condition__search {
        width: auto;
        flex: 0 0 auto;
        padding: 0 16px;
    }

    /* C. 테이블 가로 스크롤 */
    #wa-admin-member .customer__wrapper,
    #wa-admin-board .customer__wrapper,
    #wa-admin-confanno .customer__wrapper,
    #wa-conference-group .customer__wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 6컬럼 페이지 (board, confanno) */
    #wa-admin-board .customer__table,
    #wa-admin-confanno .customer__table {
        display: table;
        min-width: 600px;
    }

    /* 5컬럼 페이지 (member, conference-group) */
    #wa-admin-member .customer__table,
    #wa-conference-group .customer__table {
        display: table;
        min-width: 500px;
    }

    #wa-admin-member .main__contents .customer__col,
    #wa-admin-board .main__contents .customer__col,
    #wa-admin-confanno .main__contents .customer__col,
    #wa-conference-group .main__contents .customer__col {
        font-size: 14px;
        padding: 12px 8px;
    }

    #wa-admin-member .main__contents .customer__row:first-child .customer__col,
    #wa-admin-board .main__contents .customer__row:first-child .customer__col,
    #wa-admin-confanno .main__contents .customer__row:first-child .customer__col,
    #wa-conference-group .main__contents .customer__row:first-child .customer__col {
        font-size: 12px;
        padding: 8px 8px 12px;
    }

    /* D. 페이지별: admin-member 초성 필터 래핑 */
    #wa-admin-member #member-toolbar {
        flex-wrap: wrap;
    }

    #wa-admin-member #chosung-filter {
        order: -1;
        width: 100%;
    }

    /* E. 페이지별: admin-board, admin-confanno 날짜선택기 래핑 */
    #wa-admin-board .search__field,
    #wa-admin-confanno .search__field {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    /* F. 테이블 컬럼 텍스트 표시 복원 (base 규칙 .customer__col>.customer__email{display:none} 오버라이드) */
    #wa-admin-board .main__contents .customer__col > .customer__email,
    #wa-admin-confanno .main__contents .customer__col > .customer__email,
    #wa-conference-group .main__contents .customer__col > .customer__email,
    #wa-conference-board .main__contents .customer__col > .customer__email {
        display: block;
    }
}

/* ================================================================
   Admin Conference — Table Badge & Readability Fix
   상태 배지 세로 쌓임 방지 + 테이블 가독성 개선
   Scoped to #wa-admin-conference .main__contents
   ================================================================ */

/* --- A. 상태 컬럼 최소 너비 확보 (인라인 width 보완) --- */
/* Col 2: 예약유형 배지 ("즉시","상시","예약","정기") — 30px → min 48px */
#wa-admin-conference .main__contents .customer__row .customer__col:nth-child(2) {
    min-width: 48px;
    text-align: center;
}

/* Col 3: 회의상태 배지 ("대기","진행중","종료") — 50px → min 72px */
#wa-admin-conference .main__contents .customer__row .customer__col:nth-child(3) {
    min-width: 72px;
    text-align: center;
}

/* --- B. 배지 텍스트 줄바꿈 방지 --- */
#wa-admin-conference .main__contents .released__status,
#wa-admin-conference .main__contents .conf-state-badge-inline {
    white-space: nowrap;
    display: inline-block;
    text-align: center;
    min-width: 40px;
}

/* --- C. 날짜 컬럼 줄바꿈 방지 --- */
#wa-admin-conference .main__contents .customer__col:nth-child(6),
#wa-admin-conference .main__contents .customer__col:nth-child(7) {
    white-space: nowrap;
}

/* --- D. 데이터 행 가독성 개선 --- */
#wa-admin-conference .main__contents .customer__row:not(:first-child) .customer__col {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.2px;
}

/* --- E. 액션 버튼 컬럼 (9번째) 고정 너비 --- */
#wa-admin-conference .main__contents .customer__row:not(:first-child) .customer__col:last-child {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

/* --- F. 제목 컬럼 텍스트 2줄 제한 --- */
#wa-admin-conference .main__contents .customer__item .customer__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ================================================================
   조직도 관리 — 태블릿(Galaxy Tab A8) 여백 최적화
   Apple HIG 8pt 그리드 기반, 색상·스타일 무변경
   ================================================================ */

/* --- Tier 0: 고정 높이 → 유연 높이 (전 해상도) --- */
#wa-admin-organization .userlist__invite {
    height: auto;
    min-height: 600px;
    max-height: calc(100vh - 240px);
}


#wa-admin-organization .org__body{
    overflow: auto;
 }
#wa-admin-organization .userlist__org{
    height: auto;
}
#wa-admin-organization{}



/* --- Tier 1: 가로 태블릿 (≤1280px) — 수평 여백 160px → 80px --- */
@media only screen and (max-width: 1280px) {
    #wa-admin-organization .main__contents {
        padding: 8px 16px 16px 16px;
    }
    #wa-admin-organization .messages.room__info {
        padding: 8px;
    }
    #wa-admin-organization .userlist__invite {
        padding: 16px;
    }
    #wa-admin-organization .userlist__org {
        margin-right: 8px;
    }
    #wa-admin-organization .userlist__search,
    #wa-admin-organization .org__head,
    #wa-admin-organization .userlist__head,
    #wa-admin-organization .userlist__button {
        margin-bottom: 8px;
    }
    #wa-admin-organization .userlist__control {
        padding: 0 4px;
    }
    #wa-admin-organization .org__list {
        height: calc(100% - 120px);
        margin-bottom: 8px;
    }
    #wa-admin-organization .userlist__list {
        height: calc(100% - 52px);
    }
    #wa-admin-organization .userlist__body {
        height: calc(100% - 48px);
    }
}

/* --- Tier 2: 세로 태블릿 (≤800px) — 수평 여백 160px → 40px --- */
@media only screen and (max-width: 800px) {
    #wa-admin-organization .main__head {
        padding: 12px 16px 4px 16px !important;
    }
    #wa-admin-organization .main__contents {
        padding: 4px 8px 8px 8px;
        height: calc(100% - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #wa-admin-organization .messages.room__info {
        padding: 4px;
    }
    #wa-admin-organization .userlist__invite {
        padding: 8px;
    }
    #wa-admin-organization .userlist__control {
        padding: 0 4px;
        min-width: 48px;
    }
    #wa-admin-organization .org__col {
        padding: 8px;
    }
    /* 터치 타겟 44px (Apple HIG) */
    #wa-admin-organization .org__row,
    #wa-admin-organization .search__head,
    #wa-admin-organization .conference__btn {
        min-height: 44px;
    }
    /* 텍스트 오버플로우 */
    #wa-admin-organization .org__value,
    #wa-admin-organization .org__sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ================================================================
   회의실 관리 — 태블릿(Galaxy Tab A8) 레이아웃 최적화
   Apple HIG 8pt 그리드 기반, 색상·스타일 무변경
   ================================================================ */

/* --- Tier 1: 가로 태블릿 (≤1280px) — 여백 축소 --- */
@media only screen and (max-width: 1280px) {
    #wa-admin-room .main__contents {
        padding: 8px 16px 16px 16px;
    }
    #wa-admin-room .messages.room__info {
        padding: 8px;
    }
    #wa-admin-room .messages__users {
        padding: 8px;
        margin-right: 8px;
    }
    #wa-admin-room .messenger__wrapper {
        padding: 16px !important;
    }
    #wa-admin-room .room__wrapper {
        height: calc(100% - 104px);
    }
    #wa-admin-room .form.p__10 {
        padding: 8px !important;
    }
}

/* --- Tier 2: 세로 태블릿 (≤800px) — 세로 스택 + 최소 여백 --- */
@media only screen and (max-width: 800px) {
    [full-screen="true"] .fv__utils {
    position: fixed;
    right: 0px;
    top: 0px;

    margin: 72px 14px 0 0;
    display: flex;
    flex-direction: column;
    z-index: 10000;

    align-items: center;
    gap: 4px;
    height : max-content ;
    opacity: 0.6;

    }

    #wa-admin-room .main__head {
        padding: 12px 16px 4px 16px !important;
    }
    #wa-admin-room .main__contents {
        padding: 4px 8px 8px 8px;
        height: calc(100% - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #wa-admin-room .messages.room__info {
        flex-direction: column;
        padding: 4px;
    }
    #wa-admin-room .room__info .messages__users {
        width: 100% !important;
        max-height: 35vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        flex-shrink: 0;
        padding: 4px;
        margin-right: 0;
        margin-bottom: 8px;
    }
    #wa-admin-room .room__info .messages__messenger {
        width: 100% !important;
        flex: 1 1 auto;
        min-height: 0;
    }
    #wa-admin-room .messenger__wrapper {
        padding: 8px !important;
    }
    #wa-admin-room .room__wrapper {
        height: auto !important;
        max-height: calc(65vh - 160px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    #wa-admin-room .form.p__10 {
        padding: 4px !important;
    }
    /* 터치 타겟 44px (Apple HIG) */
    #wa-admin-room .messages__item,
    #wa-admin-room .condition__search {
        min-height: 44px;
    }
}

/* 참여자 필터 탭 260420-user-filter-01 — 접속/미접속/전체 카운트 배지를 라디오형 탭으로 전환. button 태그 치환에 따른 브라우저 기본 스타일 중화 + 활성/호버 상태 + data-filter 속성 기반 리스트 숨김. */
.seat-entry__tab {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 2px 6px;
    font: inherit;
    color: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 6px;
    transition: background 120ms ease;
}
.seat-entry__tab:focus-visible {
    outline: 2px solid #82b6ff;
    outline-offset: 2px;
}
.seat-entry__tab:hover:not([aria-selected="true"]) {
    background: rgba(0, 0, 0, 0.04);
}
.seat-entry__tab[aria-selected="true"] {
    background: rgba(59, 130, 246, 0.12);
    font-weight: 600;
}

.conference__users[data-filter="online"] a.user__item:not(.user__item--online):not(.user__item--presenter) {
    display: none;
}
.conference__users[data-filter="offline"] a.user__item.user__item--online,
.conference__users[data-filter="offline"] a.user__item.user__item--presenter {
    display: none;
}

.conference__users-empty {
    padding: 20px 8px;
    text-align: center;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.5;
}
.conference__users-empty[hidden] {
    display: none;
}

/* 회의 목록 — 사이드바/팝오버 모서리 언어 통일 (tier: main 16px > aside/confSummary 12px) */
#wa-conference-list .main__menu {
    border-radius: 0 12px 0 0;
}
#wa-conference-list .main__users.users__layer.conf__list {
    border-radius: 12px 0 0 0;
}
#wa-conference-list .users__empty svg {
    stroke: #94a3b8;
}
#wa-conference-list #confSummaryArea {
    border-radius: 0 0 12px 12px;
}
@media only screen and (max-width: 1024px) {
    #wa-conference-list .main__menu {
        border-radius: 0 8px 0 0;
    }
    #wa-conference-list #confSummaryArea {
        border-radius: 0 0 8px 8px;
    }
}