/*
* Your global styles here
*/
html,
body {
overscroll-behavior-y: none;
background-color: var(--dteka-background-color);
}
:root {
--dxp-s-section-columns-max-width: unset;
--dteka-layout-min-width: 820px;
--dteka-calendar-cell-height: 50px;
--dteka-docker-zindex-ff: 90;
--dteka-gray-0: #ffffff;
--dteka-gray-5: #f5f5f5; /*#f8f8f8;*/
--dteka-gray-6: #f5f7fa; /*#f8f8f8;*/
--dteka-gray-10: #e8e8e8; /*#e8e8e8;*/
--dteka-gray-15: #dddddd; /*#dddddd;*/
--dteka-gray-20: #cccccc;
--dteka-gray-25: #999999;
--dteka-gray-30: #666666;
--dteka-gray-35: #222222; /*#333333;*/
--dteka-purple: #5756ff;
--dteka-blue: #3d81ff;
--dteka-deep-blue: #2156b2;
--dteka-secondary-light-color: #f2f7ff;
--dteka-primary-color: #4472c4;
--dteka-primary--light-color: #f5f9ff;
--dteka-primary--hover-color: #254d95;
--dteka-secondary-hover-color: #222a32;
--dteka-other-3: #35414c;
--dteka-red: #f44336;
--dteka-gnb-header-height: 93px;
--dteka-tab-font-color: var(--dteka-gray-25);
--dteka-tab-font-color-active: var(--dteka-primary-color);
--dteka-tab-line-color-active: var(--dteka-primary-color);
--dteka-background-color: #eff1f4;
--dteka-dash-line-color: var(--dteka-gray-20);
--tmp-button-border-width-focus: 2px;
--tmp-button-border-color-focus: var(--dteka-gray-35);
--tmp-button-brand-background-color: var(--dteka-primary-color);
--tmp-button-refresh-background-color: var(--dteka-gray-10);
--tmp-button-refresh-border-color: var(--dteka-gray-10);
--tmp-button-border-radius: 10px;
--tmp-button-disabled-background-color: var(--dteka-gray-15);
--tmp-button-disabled-font-color: var(--dteka-gray-0);
--tmp-button-brand-background-color-hover: var(--dteka-primary--hover-color);
--tmp-button-outline-background-color-hover: var(--dteka-gray-5);
--tmp-button-secondary-background-color-hover: var(
--dteka-secondary-hover-color
);
--tmp-button-outline-secondary-border-color-hover: var(
--dteka-secondary-hover-color
);
--tmp-button-refresh-background-color-hover: var(--dteka-gray-15);
--tmp-button-refresh-border-color-hover: var(--dteka-gray-15);
--tmp-checkbox-button-border-color-active: var(--dteka-primary-color);
--tmp-checkbox-button-background-color-active: var(
--dteka-primary--light-color
);
--tmp-button-cancel-background-color: var(--dteka-gray-25);
--tmp-button-cancel-border-width: 1px;
--tmp-button-cancel-border-color: var(--dteka-gray-25);
--tmp-button-cancel-font-color: var(--dteka-gray-0);
--tmp-checkbox-button-font-color-active: var(--dteka-primary-color);
--tmp-checkbox-font-weight: 400;
--tmp-checkbox-check-button-check-color-active: var(--dteka-primary-color);
--tmp-checkbox-check-button-justify: center;
--tmp-radio-button-border-color-active: var(--dteka-primary-color);
--tmp-radio-button-background-color-active: var(--dteka-primary--light-color);
--tmp-radio-button-font-color-active: var(--dteka-primary-color);
--tmp-radio-check-button-justify: center;
--tmp-radio-check-button-border-color-active: var(--dteka-primary-color);
--tmp-radio-button-backgorund-color-active: var(--dteka-primary--light-color);
--tmp-radio-button-font-color-active: var(--dteka-primary-color);
--tmp-radio-check-button-check-color-active: var(--dteka-primary-color);
--tmp-pagination-gap: 8px;
--tmp-pagination-min-width: 40px;
--tmp-pagination-height: 40px;
--tmp-pagination-border-radius: 100%;
--tmp-pagination-border-width: 1px;
--tmp-pagination-border-color: transparent;
--tmp-pagination-padding: 0px;
--tmp-pagination-background-color: transparent;
--tmp-pagination-font-size: 14px;
--tmp-pagination-font-weight: 400;
--tmp-pagination-line-height: 100%;
--tmp-pagination-font-color: var(--dteka-gray-25);
--tmp-pagination-border-color-focus: var(--tmp-input-color-focus);
--tmp-pagination-font-color-avtive: var(--dteka-gray-0);
--tmp-pagination-background-color-hover: var(--tmp-input-color-hover);
--tmp-pagination-border-color-disabled: var(
--tmp-input-border-color-disabled
);
--tmp-pagination-background-color-disabled: var(--dteka-gray-0);
--tmp-pagination-font-color-disabled: var(--tmp-input-font-color-disabled);
--tmp-dialog-dimmed-color: rgba(0, 0, 0, 0.7);
--tmp-modal-default-width: 383px;
--tmp-modal-large-width: 740px;
--tmp-modal-notice-width: 550px;
--tmp-modal-border-radius: 10px;
--tmp-modal-header-padding: 20px 24px 25px;
--tmp-modal-header-font-size: 20px;
--tmp-modal-header-line-height: 27px;
--tmp-dialog-background-color: var(--dteka-gray-0);
--tmp-alert-width: 450px;
--tmp-drawer-header-padding: 24px 24px 30px;
--tmp-drawer-transition: bottom 0.25s;
--tmp-badge-color-brand: var(--dteka-primary-color);
--tmp-badge-font-weight: 600;
--tmp-input-border-width-focus: 2px;
--tmp-input-border-color-focus: var(--dteka-gray-35);
/* 흰색 배경 툴팁 */
--tmp-tooltip-white-font-color: 14px;
--tmp-tooltip-white-font-size: var(--dteka-default-font-color);
--tmp-tooltip-white-background-color: var(--dteka-gray-0);
--tmp-tooltip-white-border: 1px solid var(--dteka-secondary-color);
--tmp-tooltip-white-padding: 20px;
--tmp-tooltip-bottom-space: 10px;
--tmp-tooltip-content-font-size: 11px;
--tmp-tooltip-content-line-height: 16px;
--tmp-tooltip-content-font-weight: 400;
--tmp-tooltip-popover-padding-active: 8px 10px;
--tmp-switch-height: 40px;
--tmp-switch-min-width: 100px;
--tmp-switch-background-color: var(--dteka-gray-10);
--tmp-switch-faux-background-color-hover: var(--dteka-primary--hover-color);
--tmp-switch-background-color-right: var(--dteka-gray-10);
--tmp-switch-faux-background-color: var(--dteka-primary-color);
--tmp-switch-faux-top: 0;
--tmp-switch-faux-left: 0;
--tmp-switch-faux-right: 50%;
--tmp-switch-faux-width: 50%;
--tmp-switch-faux-height: 100%;
--tmp-switch-width-item: 150px;
--tmp-switch-font-size: 16px;
--tmp-switch-font-weight-active: 600;
--tmp-switch-font-color-active: var(--dteka-gray-0);
--tmp-switch-font-color: var(--dteka-gray-25);
--tmp-switch-font-weight: 600;
--tmp-switch-text-indent-active: 0;
--tmp-switch-text-indent: 0;
--tmp-switch-border: 1px solid var(--dteka-gray-15);
}
@media (orientation: landscape) {
/* 화면이 가로 모드(Landscape)일 때 적용될 CSS 스타일 */
}
@media (orientation: portrait) {
/* 화면이 세로 모드(Portrait)일 때 적용될 CSS 스타일 */
}
/*PC*/
@media (pointer: fine) and (hover: hover) and (any-pointer: fine) and (any-hover: hover) {
.pointer.fine {
background: #99fe5c;
}
}
.theme_container a,
.theme_container a:link:not(.slds-button, .slds-dropdown__item > a) {
color: var(--dteka-default-font-color);
}
.calendar.fc {
--fc-today-bg-color: transparent;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
background-color: var(--dteka-secondary-color);
border-radius: 50px;
color: var(--dteka-gray-0);
padding: 0px 10px;
}
.fc .fc-cell-shaded,
.fc .fc-day-disabled {
--fc-neutral-bg-color: #fff;
}
.calendar_wrap .fc .fc-dayGridMonth-view .fc-day-disabled * {
display: none;
}
.fc.fc-theme-standard th {
border: 0;
}
.fc .fc-scrollgrid {
border: 0 !important;
}
.fc.fc-theme-standard td {
border-top: 1px solid var(--fc-border-color);
}
.fc-col-header,
.fc-scrollgrid-sync-table,
.fc-daygrid-body,
.fc-timegrid-body,
.fc-timegrid-slots table,
.fc-timegrid-cols table {
width: 100% !important;
}
.inactive-day {
background-color: #fff !important;
pointer-events: none;
opacity: 0.3;
}
.fc-day.fc-timegrid-col.inactive-day {
background-color: #fff !important;
}
.fc-theme-standard,
.fc-dayGridMonth-view.fc-daygrid,
.fc-dayGridMonth-view.fc-daygrid .fc-scrollgrid,
.fc-dayGridMonth-view.fc-daygrid .fc-scroller-harness,
.fc-dayGridMonth-view.fc-daygrid .fc-scroller-harness > .fc-scroller {
height: 100%;
}
.calendar
.fc-dayGridMonth-view.fc-daygrid
.fc-scrollgrid-section-body
.fc-scroller {
overflow: auto !important;
height: var(--dteka-calendar-day-view-scroller-height, 100%);
}
.fc-dayGridMonth-view.fc-daygrid .fc-daygrid-event-harness {
display: none;
}
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
min-height: 80px !important;
max-height: 80px !important;
}
.fc.fc-theme-standard td:last-of-type {
border-right: 0;
border-bottom: 0;
}
.fc-toolbar-chunk > div {
display: flex;
gap: 30px;
align-items: center;
}
.fc-toolbar-chunk .fc-button-primary.fc-button,
.fc-toolbar-chunk .fc-button-primary.fc-button:hover,
.fc-toolbar-chunk .fc-button-primary.fc-button:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
background-color: transparent !important;
border: 0;
outline: 0;
padding: 0;
width: 16px;
height: 16px;
background-position: center;
background-size: contain;
}
.fc-toolbar-chunk .fc-button-primary.fc-button.fc-myPrev-button,
.fc-toolbar-chunk .fc-button-primary.fc-button.fc-myNext-button,
.fc-toolbar-chunk
.fc-button-primary.fc-button.fc-myPrev-button:not(:disabled):active,
.fc-toolbar-chunk
.fc-button-primary.fc-button.fc-myNext-button:not(:disabled):active {
background-repeat: no-repeat;
background-position: center;
color: transparent;
}
.fc-toolbar-chunk .fc-button-primary.fc-button.fc-myPrev-button {
background-image: url('data:image/svg+xml,');
}
.fc-toolbar-chunk .fc-button-primary.fc-button.fc-myNext-button {
background-image: url('data:image/svg+xml,');
}
.calendar .fc-toolbar-chunk .fc-button:disabled {
display: none !important;
}
.fc-toolbar-chunk .fc-button:disabled {
opacity: 0.3;
}
.fc-toolbar-chunk .fc-prev-button {
background-image: url('data:image/svg+xml,');
}
.fc-toolbar-chunk .fc-next-button {
background-image: url('data:image/svg+xml,');
}
.fc-toolbar-chunk .fc-button .fc-icon {
display: none;
}
.fc .fc-daygrid-day-frame {
height: var(--dteka-calendar-cell-height);
/* height: 100%;
aspect-ratio: 1 / 1; */
}
.fc .fc-highlight {
background: transparent !important;
}
/* 고스트 이미지 (외부 드래그 시) */
/* .ui-draggable-dragging {
background: #4a90e2 !important;
color: white !important;
padding: 10px;
border-radius: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0.9;
border: none !important;
width: 90px;
text-align: center;
} */
.fc-event-dragging {
display: none;
}
.event-item-day-view.fc-event-dragging {
display: block;
padding: 0;
background-color: transparent;
width: auto !important;
height: auto !important;
}
.event-item-day-view.fc-event-dragging .item-line,
.event-item-day-view.fc-event-dragging .task-desc {
display: none;
}
.event-item-day-view.fc-event-dragging .item-body {
gap: 2px;
}
.event-item-day-view.fc-event-dragging .store-name,
.event-item-day-view.fc-event-dragging .address {
font-size: 12px !important;
}
.event-item-day-view.fc-event-dragging .store-name {
color: var(--dteka-gray-35) !important;
}
.fc-daygrid-day .fc-daygrid-bg-harness {
width: 100%;
height: 100%;
background-color: rgba(74, 144, 226, 0.1);
}
/*.fc-event-dragging {
pointer-events: none !important;
z-index: 999999 !important;
}
.fc-view-harness,
.fc-timeline-slot {
pointer-events: auto !important;
} */
.fc-event-mirror {
/*캘린더 칸의 미러 이미지*/
background-color: var(
--dteka-background-color-fc-mirror,
rgba(74, 144, 226, 0.1)
) !important;
/* border: 2px dashed #4a90e2 !important; */
border-radius: 4px;
display: block !important;
}
.fc .fc-toolbar.fc-header-toolbar {
margin-bottom: 0 !important;
padding: 22px 24px 24px;
}
.fc .fc-toolbar-title {
font-size: 24px !important;
}
.fc.fc-theme-standard th {
height: 33px;
vertical-align: middle;
}
.fc.fc-theme-standard th .fc-col-header-cell-cushion {
padding: 0;
font-size: 12px;
font-weight: 500;
color: var(--dteka-gray-30);
line-height: 15px;
}
.fc.fc-theme-standard .fc-timeGridWeek-view th .fc-col-header-cell-cushion {
font-weight: 600;
font-size: 18px;
color: var(--dteka-default-font-color);
}
.fc.fc-theme-standard .fc-timeGridWeek-view th .custom-day-name {
font-size: 13px;
font-weight: 300;
color: var(--dteka-gray-25);
margin-left: 8px;
}
.fc.fc-theme-standard .fc-timeGridWeek-view .custom-holiday-header-text,
.fc.fc-theme-standard
.fc-timeGridWeek-view
.custom-holiday-header-text
~ .custom-day-name {
color: var(--dteka-red);
}
.fc .fc-daygrid-day-top {
padding: 10px 0 0;
justify-content: center;
}
.fc .fc-daygrid-day-top .fc-daygrid-day-number {
font-size: 12px;
padding: 0;
font-weight: 500;
color: var(--dteka-default-font-color);
}
.fc .fc-day-other .fc-daygrid-day-top .fc-daygrid-day-number {
color: var(--dteka-gray-20);
}
.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
margin-bottom: 14px !important;
margin-top: 6px;
padding: 0 2px;
}
.fc .fc-day-other .fc-daygrid-day-events {
opacity: 0.3;
}
.fc .fc-daygrid-day-bottom {
margin: 0 !important;
}
.custom-call-text {
display: flex;
gap: 4px;
/* align-items: center; */
align-items: flex-start;
margin-left: 2px;
font-size: 12px;
line-height: 14px;
color: var(--dteka-gray-30);
}
.custom-call-text.is-closed {
opacity: 0.2;
}
.custom-call-text > div {
width: calc(100% - 34px);
}
.custom-call-text .logo {
flex-shrink: 0;
}
.custom-call-text > div > p:first-of-type {
font-weight: 500;
color: var(--dteka-default-font-color);
}
.custom-call-text p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-cell-line {
display: inline-block;
width: 2px;
height: 14px;
border-radius: 5px;
}
.custom-summary-text {
font-size: 12px;
border-radius: 2px;
background-color: var(--dteka-primary--light-color);
padding: 2px 8px;
line-height: 16px;
color: var(--dteka-gray-30);
}
.custom-summary-text .summary-call {
font-weight: 600;
color: var(--dteka-primary-color);
}
.custom-block-text {
font-size: 12px;
border-radius: 2px;
background-color: var(--dteka-primary-color);
padding: 2px 8px;
line-height: 16px;
color: var(--dteka-gray-0);
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
}
.custom-block-text > span:first-of-type {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-block-text > span:first-of-type + span {
flex-shrink: 0;
}
.custom-block-leave {
background-color: var(--dteka-gray-10);
color: var(--dteka-default-font-color);
}
.custom-summary-text + .custom-call-text,
.custom-summary-text + .custom-block-text,
.custom-call-text:not(:first-of-type) + .custom-call-text,
.custom-block-text:not(:first-of-type) + .custom-block-text {
margin-top: 6px;
}
.custom-cell + .custom-cell {
margin-top: 4px;
}
.custom-event-main {
padding: 4px 6px;
display: flex;
flex-flow: column;
gap: 3px;
height: 100%;
border-top: 1px solid var(--dteka-gray-10);
border-bottom: 1px solid var(--dteka-gray-10);
}
.custom-event-main.is-closed {
position: relative;
}
.custom-event-main.is-closed:after {
content: "폐점";
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
justify-content: center;
align-items: center;
color: var(--dteka-gray-25);
}
.custom-event-main .customer-event-title {
display: flex;
gap: 2px;
align-items: center;
}
.custom-event-main .store-logo {
display: block;
height: 12px;
flex-shrink: 0;
/* margin-bottom: 2px; */
}
.custom-event-main .store-logo img {
height: 100%;
}
.custom-event-main .custom-event-store {
font-size: 12px;
font-weight: 500;
color: var(--dteka-default-font-color);
}
.custom-event-main .custom-event-time {
font-size: 11px;
line-height: 11px;
color: var(--dteka-gray-30);
margin-top: 1px;
}
.custom-event-main .custom-event-store > span {
position: absolute;
left: 0;
width: 2px;
height: 11px;
border-radius: 5px;
}
.custom-event-main .custom-event-store.custom-text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-event-main .custom-event-adhoc {
display: flex;
gap: 3px;
align-items: center;
}
.custom-event-main .custom-event-adhoc span:not(.custom-event-task) {
color: var(--dteka-gray-30);
font-size: 11px;
font-weight: 600;
text-align: right;
}
.custom-event-main .custom-event-task {
border-radius: 3px;
padding: 1px 3px 2px;
font-size: 10px;
font-weight: 500;
max-width: 36px;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
}
.custom-event-main.custom-event-block {
background-color: #f5f9ff;
}
.custom-event-main.custom-event-leave {
background-color: #e8e8e8;
}
.custom-holiday-text {
color: var(--dteka-red);
font-size: 11px;
padding-left: 8px;
margin-bottom: 4px;
}
.fc-event:not(.custom-delete-el):focus::after,
.fc-event-selected:not(.custom-delete-el)::after {
content: none !important;
}
.custom-delete-el:after {
content: "" !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
/* border: 1px solid var(--dteka-secondary-color); */
border-radius: 5px;
z-index: 2 !important;
background-image: url('data:image/svg+xml,') !important;
background-repeat: no-repeat !important;
background-position: right 10px top 10px !important;
}
c-dteka_call-plan-layout[data-month="false"]
.calendar_wrap
.fc
.fc-view-harness {
height: 100%;
overflow-y: auto;
}
c-dteka_call-plan-layout[data-month="false"]
.calendar_wrap
.fc-timeGridWeek-view
> table
thead {
position: sticky;
top: 0;
background-color: #fff;
z-index: 2;
}
c-dteka_call-plan-layout[data-month="false"]
.calendar_wrap
.fc-timeGridWeek-view
> table
thead
th {
box-shadow: 0px 4px 4px -1px #0000000d;
}
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
font-size: 13px;
color: var(--dteka-gray-30);
}
.fc .fc-timegrid-slot-label {
width: 100px !important;
}
.fc .fc-timegrid-slot:not(.fc-timegrid-slot-minor) {
border-style: dotted;
}
.fc .fc-timegrid-slot-minor {
border: 0 !important;
}
.fc .fc-timegrid-slot {
height: 50px !important;
}
.fc .fc-timegrid-now-indicator-line {
--fc-now-indicator-color: var(--dteka-other-3);
}
.fc .fc-timegrid-now-indicator-arrow {
--fc-now-indicator-color: var(--dteka-primary-color);
}
.fc .fc-timegrid-event {
margin-bottom: 0 !important;
}
.fc .fc-timegrid-event .fc-event-main {
padding: 0;
}
/* .fc .fc-timegrid-event-harness {
width: 100%;
} */
.fc .fc-timegrid-event-harness > .fc-timegrid-event {
overflow: hidden;
background-color: transparent !important;
border-color: var(--dteka-gray-0) !important;
border: 0;
border-radius: 0;
}
.fc .fc-timegrid-col-events {
margin: 0 !important;
}
.calendar_wrap
.fc-timeGridWeek-view
.fc-scrollgrid-section
table
> colgroup
> col {
width: 52px !important;
}
.calendar_wrap
.fc-direction-ltr
.fc-timeGridWeek-view
.fc-timegrid-slot-label-frame {
text-align: center !important;
}
/*datePicker*/
.preview-calendar.fc .fc-toolbar.fc-header-toolbar {
padding: 0 12px 16px;
}
.preview-calendar.fc .fc-toolbar-title {
font-size: 18px !important;
font-weight: 600;
}
.preview-calendar.fc.fc-theme-standard th .fc-col-header-cell-cushion {
font-weight: 600;
font-size: 11px;
line-height: 100%;
}
.preview-calendar.fc.fc-theme-standard td {
border: 0;
}
.preview-calendar.fc .fc-daygrid-day-frame {
--dteka-calendar-cell-height: 42px;
/* aspect-ratio: 1 / 1; */
}
.preview-calendar.fc .fc-daygrid-day.fc-day-today {
--fc-today-bg-color: transparent;
}
.preview-calendar.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
margin-bottom: 0 !important;
margin-top: 0;
min-height: 0 !important;
max-height: unset !important;
}
.preview-calendar.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
background-color: transparent;
padding: 0px;
color: inherit;
}
.preview-calendar.fc .fc-daygrid-day-top {
padding: 0;
height: 100%;
align-items: center;
}
.preview-calendar.fc .fc-daygrid-day-top .fc-daygrid-day-number {
font-size: 14px;
font-weight: 400;
color: var(--dteka-gray-30);
}
.preview-calendar.fc
.fc-daygrid-day.fc-selected-day
.fc-daygrid-day-top
.fc-daygrid-day-number {
width: 30px;
height: 30px;
background-color: var(--dteka-other-3);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--dteka-gray-0);
font-weight: 600;
}
.preview-calendar.fc .fc-cell-shaded,
.preview-calendar.fc .fc-day-disabled {
--fc-neutral-bg-color: transparent;
}
.fc-timegrid-body,
.fc-scroller {
pointer-events: auto !important;
z-index: 1;
}
/*모달*/
.dialog_footer {
margin-top: 40px;
--tmp-button-dialog-border-color: var(--dteka-gray-10);
}
.modal-content_layout {
padding-bottom: 0;
min-height: calc(var(--vh, 1vh) * 3);
max-height: calc(var(--vh, 1vh) * 60);
}
.drawer-wrapper .modal-content_layout {
padding: 0 24px 24px;
}
/*스토어 로고*/
.logo {
width: 34px;
height: 34px;
display: inline-block;
border-radius: 100%;
border: 1px solid var(--dteka-gray-10);
background-color: var(--dteka-gray-0);
padding: 4px;
vertical-align: middle;
}
.logo-trim {
height: 12px;
display: inline-block;
}
/* [S] 02.10 Common */
.container {
display: block;
width: 100%;
padding: 20px 24px;
background-color: var(--dteka-background-color);
/* background-color: var(--dteka-gray-6); */
}
.container .wrap {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 1180px;
min-width: 720px;
margin-inline: auto;
}
.divide {
width: 1px;
height: auto;
background-color: var(--dteka-gray-10);
}
.divide.dash {
background: repeating-linear-gradient(
to bottom,
var(--dteka-gray-20) 0 8px,
transparent 8px 14px
);
}
.scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scroll-y {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.scroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scroll-x::-webkit-scrollbar,
.scroll-y::-webkit-scrollbar,
.scroll::-webkit-scrollbar,
.calendar
.fc-dayGridMonth-view.fc-daygrid
.fc-scrollgrid-section-body
.fc-scroller::-webkit-scrollbar {
width: 3px;
height: 3px;
}
.scroll-x::-webkit-scrollbar-track,
.scroll-y::-webkit-scrollbar-track,
.scroll::-webkit-scrollbar-track,
.calendar
.fc-dayGridMonth-view.fc-daygrid
.fc-scrollgrid-section-body
.fc-scroller::-webkit-scrollbar-track {
background: var(--dteka-gray-10);
}
.scroll-x::-webkit-scrollbar-thumb,
.scroll-y::-webkit-scrollbar-thumb,
.scroll::-webkit-scrollbar-thumb,
.calendar
.fc-dayGridMonth-view.fc-daygrid
.fc-scrollgrid-section-body
.fc-scroller::-webkit-scrollbar-thumb {
border-radius: 4px;
background: var(--dteka-secondary-color);
}
/* [E] 02.10 Common */
/* [E] 03.03 Table Common */
.table_wrap_ff {
max-width: 100%;
overflow-x: auto;
}
.table_wrap_ff table {
border-collapse: separate;
border-spacing: 0;
/* border-collapse: collapse;
-webkit-transform: translateZ(0); /* GPU 가속 유도
transform: translateZ(0); */
/* border-collapse: collapse; */
}
.table_wrap_ff th,
.table_wrap_ff td {
border-top: 1px solid var(--dteka-gray-10);
text-align: center;
vertical-align: middle;
font-weight: 400;
}
.table_wrap_ff th + th,
.table_wrap_ff td + td {
border-left: 1px solid var(--dteka-gray-10);
}
.table_wrap_ff tbody tr:last-of-type td {
border-bottom: 1px solid var(--dteka-gray-10);
}
/* 헤더 행 */
.table_wrap_ff th {
background-color: var(--dteka-gray-6);
font-size: 14px;
padding: 10px 20px;
white-space: nowrap;
font-weight: 400;
}
.table_wrap_ff th:first-child {
min-width: 120px;
}
/* 데이터 행 */
.table_wrap_ff td {
padding: 10px 20px;
font-size: 14px;
white-space: nowrap;
background-color: var(--dteka-gray-0);
}
.table_wrap_ff :is(thead, tbody) :first-child {
position: sticky;
left: 0;
}
.table_wrap_ff tbody :first-child {
text-align: left;
font-weight: 500;
}
/* [E] 03.03 Table Common */
/* [S] 02.10 Common Accordion */
c-tmp_accordion details {
border: 1px;
border-style: solid;
border-radius: 10px;
border-color: var(--dteka-gray-10);
background-color: var(--dteka-gray-0);
overflow: hidden;
}
c-tmp_accordion details[open] {
border-color: var(--dteka-primary-color);
}
c-tmp_accordion details[open] summary {
background-color: var(--dteka-secondary-light-color);
}
c-tmp_accordion details .details_content {
/* background-color: var(--dteka-gray-0); */
--tmp-accordion-content-background-color: var(--dteka-gray-0);
}
/* [E] 02.10 Common Accordion */
/* [S] 02.09 케어 - 점포 상세 싱단 스와이퍼 actove 페이지네이션 */
/* .content_top_container */
.wrap
div.top
.store_swiper_wrap
.store_swiper-pagination
.swiper-pagination-bullet-active,
.wrap .swiper-pagination .swiper-pagination-bullet-active {
width: 18px;
}
.wrap .swiper-pagination {
--swiper-pagination-bullet-width: 6px;
--swiper-pagination-bullet-height: 6px;
--swiper-pagination-bullet-border-radius: 100px;
--swiper-pagination-bullet-inactive-color: var(--dteka-secondary-color);
/* active bullet 전용 */
--swiper-pagination-bullet-horizontal-gap: 4px;
--swiper-pagination-color: var(--dteka-secondary-color);
}
/* [S] 02.09 케어 - 점포 상세 싱단 스와이퍼 actove 페이지네이션 */
/* [S] 02.12 스와이퍼 스크롤바 색상 */
.swiper-scrollbar .swiper-scrollbar-drag {
background-color: var(--dteka-secondary-color);
}
/* [E] 02.12 스와이퍼 스크롤 색상 */
lightning-formatted-rich-text * {
overflow-wrap: break-word;
}
.vicon .tooltip-popover-content * {
line-height: 20px;
font-size: 13px;
}
.toast {
width: auto;
}
@media (hover: hover) {
.theme_docker {
display: none;
}
}
/* [S] 03.25 KAKAO Map Overlay */
.kakao_overlay {
position: relative;
top: -40px;
display: flex;
gap: 8px;
align-items: center;
background-color: #fff;
border-radius: 8px;
padding: 4px 12px;
font-size: 13px;
}
.kakao_overlay > img.chain {
height: 24px;
width: 24px;
padding: 2px;
border: 1px solid #e8e8e8;
border-radius: 100%;
}
/* [E] 03.25 KAKAO Map Overlay */
.default_img {
background-color: var(--dteka-gray-5);
}
.default_competitor-img {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.default_pmi-img {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}