﻿/* 스토어관리 css */

.item__group--title {
    padding: 1vw 2vw;
    color: #808080;
    font-size: 3.8vw;
}

/* 스토어 정보 */
.title__image {
    width: 13vw;
    height: 13vw;
    border-radius: 4vw;
}

.title__image img {
    width: 100%;
    height: 100%;
    border-radius: 4vw;
}

.title__image--icon {
    position: absolute;
    background-color: var(--default-green);
    color: #ffffff;
    top: 0;
    right: -1.5vw;
    width: 6vw;
    height: 6vw;
    border-radius: 5vw;
    font-size: 2rem;
}

.title__image--icon img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 3vw;
    height: 3vw;
}

.title__tab--button {
    color: gray!important;
    font-weight: 600;
    font-size: 3.5vw;
    padding: 1vw 3vw;
}

#storeDetailTab .active,
#clientDetailTab .active{
    color: #fff !important;
    background-color: #343a40;
    border-color: #343a40;
    border-radius: 5vw;
}

.content__group--title {
    padding: 0 2vw;
    background-color: var(--default-bg-color);
    font-weight: 600;
    font-size: 3.7vw;
}

.collapse__header {
    display: flex;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    padding: 2vw;
}

.collapse__header--title {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 4.1vw;
}

.collapse__header--arrow {
    display: flex;
    align-items: center;
}

.collapse__header__image {
    width: 3vw;
}

.collapse__wrap {
    border-bottom: 1.5vw solid var(--default-bg-color);
    /*padding-bottom: 2vw;*/
}

.content__row {
    display: flex;
}

.content__row .content__header {
    display: flex;
    width: 25%;
    font-size: 3.3vw;
    color: grey;
    padding: 0.25vw 0;
}

.content__row .content {
    width: 75%;
    line-break: anywhere;
    font-size: 3.5vw;
    font-weight: 500;
}

.content__remark {
    text-align: left;
    line-break: anywhere;
    padding-left: 2vw;
    font-size: 3.5vw;
}

.info {
    padding-bottom:3vw;
}

.info .content__row {
    padding: 0 2vw;
}

.info .content__header,
.info .content,
.info .content__remark {
    width: 33.333%;
    font-weight: unset!important;
}

.info .content--sum {
    font-weight: 600!important;
    color: #dc3545;
}

/* 스토어 이미지 모달 */
/*#imageModal {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0px !important;
}*/

.info__carousel-indicators {
    bottom: -12vw !important;
}

    .info__carousel-indicators li {
        border-radius: 100%;
        width: 2vw;
        height: 2vw;
        background-color: rgba(125, 125, 125, 0.7);
    }

    .info__carousel-indicators li.active {
        background-color: var(--default-green);
    }


/* 통합정보현황 */
.collapse__header--icons {
    display: flex;
}

.datepicker-saletrends {
    background-color: var(--default-bg-color) !important;
    border: none !important;
    border-radius: 10px;
    font-size: 3.5vw !important;
    font-weight: 400 !important;
    background: url(/images/icon_calendar.png) no-repeat 23vw 1vw;
    background-size: 3vw;
    width: 29vw !important;
    margin: 0 3vw 0 0 !important;
    padding: 0.1vw 3vw !important;
    height: unset !important;
}

.chart__button--year {
    padding: 0.5vw 2vw;
    font-size: 3.5vw;
    color: #000;
    background-color: var(--default-bg-color);
    border-radius: 5vw;
    margin-top: 0px;
    text-align: center;
    display: flex;
    align-items: center;
}

.button__arrow--left {
    margin-right: 1vw;
    width: 2vw;
    height: 3vw;
}

.button__arrow--right {
    margin-left: 1vw;
    width: 2vw;
    height: 3vw;
}

.chart__summary {
    font-size: 3.2vw;
    color: #000000;
    font-weight: 500;
}

/* 가맹계약정보 */
.store-select {
    background-color: var(--blue-bg-color);
    border: 1px solid var(--blue-border);
    color: #000000;
}


.store-select option {
    background: #fff;
}

/* 우수매장 */
.find__button {
    font-size: 3vw;
    padding: 1vw 2.5vw;
    border-radius: 5vw;
    color: #999;
    background-color: #e6e6e6;
    border: none;
}

/* 우수매장 상세 */
.top__summary {
    border: 1px solid var(--blue-border);
    border-radius: 2vw;
    padding: 4vw;
    box-shadow: 1px 1px 5px rgb(57 118 216 / 10%);
}

.summary__header {
    color: grey;
    width: 25%;
}

.summary__text {
    padding-left: 3vw;
    width: 75%;
}

.content__list {
    background-color: var(--blue-list);
    padding: 4vw;
    flex: 1 1 auto;
}

.content__item {
    background-color: #fff;
    border-radius: 3vw;
    box-shadow: 1px 1px 5px rgba(57, 118, 216, 0.1);
    padding: 4vw;
    margin-bottom: 3vw;
}

/* 미션관리 */
.datepicker__input {
    margin: 0!important;
    text-align: center;
    width: 49.5%!important;
}

/* 미션관리 상세 */

/* 처리결과 수정 */
.file__line {
    display: flex;
    padding: 3vw 0;
    border-bottom: 1px solid #e4e4e4;
}

.file__button {
    padding: 1vw 2vw;
    font-size: 3vw;
    border-radius: 10vw;
    margin: 0;
}

.btn_filedel {
    color: #fff;
    background-color: #929292;
}

.btn_filereg {
    color: #808080;
    background-color: #eeeeee;
}

.form__line {
    margin-bottom: 3vw;
}

    .form__line .line__title {
        display: flex;
        align-items: center;
        color: #808080;
        padding-left: 3vw;
    }

.mission-datepicker {
    font-size: 4vw!important;
    font-weight: 400!important;
    background: url(/images/icon_calendar.png) no-repeat right;
    background-size: 3.5vw;
    width: 28vw!important;
}

    .mission-datepicker:focus {
        outline: none;
    }

.store__line span {
    width: 100%!important;
}

.attach-file__name {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.form-select span.select2 {
    background-color: #fff !important;
}

/* 매장점검 */
.seacrh-checkbox {
    width: 4vw;
    height: 4vw;
    margin-left: 2vw;
}

.seacrh-label {
    margin: 0;
    font-size: 3.4vw;
    padding-left: 0.7vw;
}

#custListMain .item-content--info {
    width: 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.item-content--complete {
    color: var(--default-green);
    font-size: 3.3vw;
}

.item-content--incomplete {
    color: #dc3545;
    font-size: 3.3vw;
}

.item-content--progressing {
    color: #ffb000;
    font-size: 3.3vw;
}

#custListMain .item-content--count {
    font-weight: 600;
}
/* 매장점검 상세 */
.check-list__icon {
    color: #ffffff;
    padding: 0 2vw 0 2vw;
    border-radius: 1.5vw;
    font-size: 3vw;
    margin-right: 1vw;
}

.yellow__icon {
    background-color: #ffB949;
}

.violet__icon {
    background-color: #CF9FFF;
}

.brown__icon {
    background-color: #582B18;
}

/* 매장점검 체크리스트 작성 */
.write-header__nav {
    display: flex;
}

    .write-header__nav div {
        flex: 1;
        white-space: nowrap;
        text-align: center;
        font-size: 3.6vw;
        border-bottom: 0.5vw solid #eeeeee !important;
    }

    .write-header__nav .select-item {
        font-weight: 600;
        border-bottom: 1vw solid var(--default-green) !important;
    }

    .write-header__nav a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1vw 2vw;
    }

    .mng-write__input {
        display: block;
        height: 100%;
        border: none !important;
        font-size: 4vw !important;
        margin-bottom: 0 !important;
        color: #000000;
        font-weight: 500 !important;
    }

.mng-list__header {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 2.5vw 5vw;
    align-items: center;
    font-weight: 600;
    font-size: 4vw;
}

.mng-list--arrow {
    position: absolute;
    right: 5vw;
}

.mng-sub__title {
    background-color: #527ae5;
    color: #ffffff;
    text-align: center;
    padding: 1.5vw 0;
}


.mng-radio__label {
    width: 100%;
    margin: 0;
    padding: 1.5vw 2vw;
    border: 0.5vw solid #f8f9fa;
    border-radius: 2vw;
    background-color: #f8f9fa;
    text-align: center;
}

.mng-radio:checked + .mng-radio__label {
    width: 100%;
    margin: 0;
    padding: 1.5vw 2vw;
    border: 0.5vw solid #ffdc3c;
    border-radius: 2vw;
    background-color: #fffaf0;
    text-align: center;
    font-weight: 600;
}

.mng-radio__select {
    margin: 0;
    padding: 1.5vw 2vw;
    border: 0.5vw solid #f8f9fa;
    border-radius: 2vw;
    background-color: #f8f9fa;
    color: #000000;
}

.mng-radio__select-selected {
    margin: 0;
    padding: 1.5vw 2vw;
    border: 0.5vw solid #ffdc3c;
    border-radius: 2vw;
    background-color: #fffaf0;
    font-weight: 600;
}

.mng-radio__select:focus {
    outline: none!important;
}

.mng-input {
    width: 100% !important;
    margin: 0;
    margin-bottom: 0!important;
    padding: 1.5vw 2vw !important;
    border: 0.5vw solid #e4e4e4 !important;
    border-radius: 2vw;
    font-weight: 400 !important;
    font-size: 3.8vw !important;
}

    .mng-input:focus {
        border: 0.5vw solid #ffdc3c!important;
        background-color: #fffaf0;
    }

    .mng-input__write {
        border: 0.5vw solid #ffdc3c !important;
        background-color: #fffaf0!important;
    }

/* 체크리스트 css */
.range__scale--text {
    display: flex;
    overflow: hidden;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #dfe4f7;
    cursor: pointer;
    border-radius: 3px; /* iOS */
    transition: background 450ms ease-in;
}

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 13px;
        height: 13px;
        margin-top: 0px;
        background: #fff;
        border: 1.5px solid #527ae5;
        border-radius: 50%;
        cursor: pointer;
    }

    input[type=range]::-moz-range-thumb {
        -webkit-appearance: none;
        width: 11px;
        height: 11px;
        margin-top: 0px;
        background: #fff;
        border: 1.5px solid #527ae5;
        border-radius: 50%;
        cursor: pointer;
    }

/*
output {
    display: block;
    margin-top: 20px;
    color: #777;
}

    output:before {
        content: "Selected Value: ";
        font-weight: bold;
    }*/

.link-collapse:target::before {
    content: "";
    display: block;
    height: 21vw; /* fixed header height*/
    margin: -21vw 0 0; /* negative fixed header height */
}

.score__input {
    margin: 0 !important;
    height: inherit !important;
    font-size: 3.2vw !important;
    padding: 0 2vw !important;
    text-align: right;
    color: #dc3545 !important;
    background-color: #ffffff !important;
    background-image: none!important;
}

#mngWriteMain .nav-link {
    padding: 1vw 2vw;
}

    #mngWriteMain .nav-link.active.show {
        border-bottom: 1vw solid var(--default-green) !important;
        font-weight: 500;
    }

.attach--file__row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 2vw;
}

.attach--file__item {
    position: relative;
    width: 49%; /* 원하는 너비 */
    background-color: #f4f4f4;
    border-radius: 5vw;
    overflow: hidden;
}

    .attach--file__item:before {
        content: "";
        display: block;
        padding-top: 100%; /* 1:1 비율 */
    }

.attach--file__label {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    border-radius: 5vw;
    font-size: 20vw;
    font-weight: 100;
    color: #dddddd;
}

.attach--file__input {
    display: none;
}

.attach--file__view {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 5vw;
    z-index: 1;
    background-color: #ffffff;
}

.attach--file__button {
    display: none;
    position: absolute;
    top: 2vw;
    right: 2vw;
    padding: 0.5vw 2.5vw;
    z-index: 1;
    border: none;
    font-size: 3vw;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    border-radius: 3vw;
}

.modal-header-style {
    display: block;
}

.tablecation {
    position: absolute;
    right: 0;
    top: -5vw;
    font-size: 3vw;
    color: #333;
}

.report-mission-area
{
    margin:0vw 3vw 3vw 3vw;
    background-color:#f6f6f6;
    border-radius:5vw;
    padding: 1vw;
}

.report-mission-hd
{
    position:relative;
    display:flex;
    justify-content:space-between;
    padding:3vw 4vw;
    align-items:center;
    font-weight:600;
    font-size:4vw;
}

.report-mission-hd .c_text
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    display:flex;
    align-items:center;
}

.report-mission-hd .c_text img
{
    width:3.5vw;
    margin:0 0.5vw;
}

.report-mission-dt
{
    position:relative;
    padding:3vw 4vw;
    font-size:4vw;
    background-color:#fff;
    border:#000 solid 0.5vw;
    border-radius:3vw;
    margin:2vw;
}
    .report-mission-dt img {
        width: 12%; /*[202403-0001] 2024.03.11 (KDH) 미션이미지 1개당 width 수정*/
        padding-right: 1%;
    }
.write-info
{    
    margin:0vw 2vw;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    display:flex;
    align-items:center;
}
.write-info img
{
    width: 5vw;
    margin-right:1vw;
}
.write-info .name_area
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.write-info .indate_area
{
    color:#c0c0c0;
    margin-left:1vw;
}
.left_side
{
    margin-right:13vw !important;
}
.right_side
{
    margin-left:13vw !important;
}