/* =============================================================================
   Subject: Admin style
   Author: jehun@benife.com
   Updated: 2017-10-12
   ========================================================================== */

/* @import url("common-admin.min.css");  */

@import url("../css/roboto.css");

a[href=""] {
    pointer-events: none; /* 클릭 불가 */
    cursor: default; /* 기본 커서 */
    text-decoration: none; /* 밑줄 제거 */
}

a[href=""]:hover {
    text-decoration: none; /* hover 효과 제거 */
}

/* User Agent Stylesheet 때문에 폰트크기 지정안하면 브라우저마다 폰트크기가 이상하게 나옴 */
table {
    font-size: 1rem;
}

.inner-line-success,
.inner-line-secondary {
    position: relative;
}

.inner-line-success .card::after,
.inner-line-secondary .card::after {
    content: "";
    position: absolute;
    top: 0;      /* 테두리를 요소 밖으로 빼고 싶다면 음수 margin처럼 조정 */
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;    /* 마우스 이벤트가 테두리에 가로막히지 않도록 */
}

.inner-line-success .card::after {
    border: 4px solid var(--kt-success); /* 실제 테두리 표현 */
}

.inner-line-secondary .card::after {
    border: 4px solid var(--kt-gray-500); /* 실제 테두리 표현 */
}

/* =============================================================================
      login & signup
      ========================================================================== */
/* login */
#login .box-container {
    background-color: rgba(255, 255, 255, 0.94);
    border-radius: 3px;
    border: 1px solid #eee;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
    width: 290px;
    transform: translate(50%, 50%);
    position: absolute;
    bottom: 50%;
    right: 50%;
}

.list-table {
    table-layout: fixed;
}

.ellipse {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* table tbody */
.table-md-width {
    max-width: 397px;
}

.div-sm-width {
    max-width: 300px;
}

.table-sm-width {
    max-width: 200px;
}

.h-19px {
    height: 19px !important;
}

.h-18px {
    height: 18px !important;
}

.h-17px {
    height: 17px !important;
}

.h-21px {
    height: 21px !important;
}

.h-22px {
    height: 22px !important;
}

.h-23px {
    height: 23px !important;
}

/* modal dialog */
/* .modal-dialog {
     margin-top: 100px;
   } */

.category-img {
    width: 40px;
    height: 40px;
}

.post-img {
    max-width: 100%;
}

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* =============================================================================
      dash board
      ========================================================================== */
#dashboardContainer .content-container {
    padding-left: 0px;
}
#dashboardContainer .box-container {
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    min-height: 300px;
}
#dashboardContainer .chart {
    margin-top: 10px;
    height: 260px;
    background-color: #f0f0f0;
}
/* =============================================================================
      ul style
      ========================================================================== */
.list-none {
    list-style: none;
}

/* =============================================================================
      post image
      ========================================================================== */
.post-img {
    max-width: 350px;
    max-height: 250px;
    object-fit: contain;
    outline: 0;
}

/* =============================================================================
      post p
      ========================================================================== */
.tour-contents p {
    margin-bottom: 0;
}

/* =============================================================================
      side nav
      ========================================================================== */
body[data-sidebar="dark"] #sidebar-menu ul li a:focus i {
    color: #ffffff;
}

body[data-sidebar="dark"] #sidebar-menu ul li a:focus {
    color: #ffffff;
}

/* =============================================================================
      publications & precedents
      ========================================================================== */

.category-title {
    background-color: #d9d9d9;
    min-width: 20rem !important;
}

.category-title {
    border-radius: 0;
    border-top-left-radius: 3px;
}

#categoryMenu .dropdown a {
    color: inherit !important;
    background-color: inherit !important;
}

#categoryMenu .category-body {
    border-radius: 0;
    border-bottom-left-radius: 3px;
}

.category-item-title.active {
    background-color: #4691d2;
    color: white;
}

.category-body {
    /* overflow: auto; */
    width: 25rem;
    height: 50rem;
}

.category-list {
    min-width: 25rem;
}

#sortableListsBase .category-name {
    /* 카테고리 드래그 시 container 밖으로 나감 */
    height: 19px;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.category-lists {
    width: 600px !important;
}

.category-lists a.edit:hover {
    text-decoration: underline;
}

label {
    margin-bottom: 0;
}

/* =============================================================================
    breadcrumb
    ========================================================================== */

.breadcrumb .breadcrumb-item:first-child:after {
    content: "/";
    padding-left: 0.25rem;
}

.breadcrumb .breadcrumb-item:after {
    content: "/";
    padding-left: 0.5rem;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    color: var(--kt-text-gray-600) !important;
    font-weight: 500;
}

.breadcrumb .breadcrumb-item:last-child,
.breadcrumb .breadcrumb-item:last-child a {
    color: var(--kt-text-primary) !important;
    font-weight: 500;
}

.breadcrumb .breadcrumb-item:first-child a {
    display: inline;
    width: 18px;
    height: 18px;
    background-position: center;
    background-image: url("/assets/images/icon/icon-home-filled.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.accordion-view {
    display: inline-flex;
    align-items: center;
}

.accordion-view::before {
    content: "add";
    font-family: 'Material Icons';
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--kt-gray-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    border-radius: 6px;
    height: 1.5rem;
    width: 1.5rem;
    background: var(--kt-gray-300);
    margin-right: 0.5rem;
}

.accordion-last-view {
    display: inline-flex;
    align-items: center;
}

.accordion-last-view::before {
    content: "add";
    font-family: 'Material Icons';
    color: transparent;
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 6px;
    margin-right: 0.5rem;
}

.accordion-view.accordion-open::before {
    content: "remove";
    color: var(--kt-brand-1);
    background: var(--kt-brand-1-light);;
}

/* =============================================================================
      opacity
      ========================================================================== */
.o-0 {
    opacity: 0;
}
.o-25 {
    opacity: 0.25;
}
.o-50 {
    opacity: 0.5;
}
.o-75 {
    opacity: 0.75;
}
.o-100 {
    opacity: 1;
}

/* =============================================================================
      width
      ========================================================================== */
.w-80px {
    min-width: 80px;
    width: 80px;
    max-width: 80px;
}

/* =============================================================================
      btn close color
      ========================================================================== */
.btn-close-danger {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='red'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

/* =============================================================================
   숫자 표시와 관련된 부분
   ========================================================================== */
.font-roboto,
.price-big .number,
.price-xxl .number,
.price-xl .number,
.price-lg .number,
.price-md .number,
.price-sm .number,
.price-xs .number {
    font-family: "Roboto", sans-serif !important;
}

.price-big .unit,
.price-xxl .unit,
.price-xl .unit,
.price-lg .unit,
.price-md .unit,
.price-sm .unit,
.price-xs .unit {
    font-weight: 500;
}

.price-big,
.price-xxl,
.price-xl,
.price-lg,
.price-md,
.price-sm,
.price-xs {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
}

.price-big .number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: -8px;
}

.price-xxl .number {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: -7px;
}

.price-xl .number {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: -6px;
}

.price-lg .number {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: -5px;
}

.price-md .number {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: -4px;
}

.price-sm .number {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: -3px;
}

.price-xs .number {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: -2px;
}

.price-big .unit {
    font-size: 1.75rem;
}

.price-xxl .unit {
    font-size: 1.5rem;
}

.price-xl .unit {
    font-size: 1rem;
}

.price-lg .unit {
    font-size: 0.9rem;
}

.price-md .unit {
    font-size: 0.75rem;
}

.price-sm .unit {
    font-size: 0.7rem;
}

.price-xs .unit {
    font-size: 0.6rem;
}

/* =============================================================================
    metronic theme
    ========================================================================== */

.app-sidebar .menu-sub .menu-link {
    padding: 0.65rem 1.2rem !important;
    margin-right: 1rem !important;
}

.app-sidebar .menu-sub {
    margin-top: 8px !important;
}

.app-sidebar .scroll-y {
    scrollbar-color: transparent transparent;
}

.app-sidebar .scroll-y:hover {
    scrollbar-color: #ffffff2a transparent;
}

.form-check-custom.form-check-success:not(.form-switch) .form-check-input:not(:checked) {
    background-color: var(--kt-success);
    opacity: 0.2;
}
.form-check-custom.form-check-primary:not(.form-switch) .form-check-input:not(:checked) {
    background-color: var(--kt-primary);
    opacity: 0.2;
}
.form-check-custom.form-check-dark:not(.form-switch) .form-check-input:not(:checked) {
    background-color: var(--kt-dark);
    opacity: 0.1;
}
.form-check-custom.form-check-dark:not(.form-switch) .form-check-input:checked {
    background-color: var(--kt-dark);
}
.form-check-custom.form-check-info .form-check-input:checked {
    background-color: var(--kt-info);
}
.form-check-custom.form-check-info:not(.form-switch) .form-check-input:not(:checked) {
    background-color: var(--kt-info);
    opacity: 0.2;
}


/* 가맹점 상세 -> 선정산 상태 중지 시 스위치 색깔 변경 */
.form-switch.form-check-custom.form-check-solid .form-check-input:not(:checked) {
    background-color: var(--kt-danger) !important;
}

/* =============================================================================
   Responsive
   ========================================================================== */
   @media (min-width: 1400px) and (min-width: 1200px) { /* xxl */
   }
   @media (max-width: 1200px) and (min-width: 992px) { /* xl */
   }
   @media (max-width: 991px) and (min-width: 767px) { /* lg */
    .app-header {
        padding: 1rem 0;
        box-shadow: unset !important;
      }

     #brandContainer #section2 .arrow {
       transform: rotate(90deg);
       height: 7rem;
     }
   }
   @media (max-width: 768px) and (min-width: 576px) { /* md */
    .app-header {
        padding: 1rem 0;
        box-shadow: unset !important;
      }

     #brandContainer #section2 .arrow {
       transform: rotate(90deg);
       height: 7rem;
     }
   
     #brandContainer #section5 {
       background-color: #0070FF0F !important;
       clip-path: polygon(0 0, 100% 0, 100% 75.6%, 0 100%); /* 하단 대각선 모양을 만듦 */
       padding-bottom: 90px !important;
     }
   }
   @media (max-width: 576px) { /* sm */
     body,
     .app-default {
       background-color: #fff !important;
     }
   
     .app-header {
       padding: 1rem 0;
       box-shadow: unset !important;
     }
   
     #loginContainer,
     #salesmanSignUpContainer{
       background: unset;
     }
   
     #loginContainer .card,
     #salesmanSignUpContainer .card {
       box-shadow: none !important;
     }

     #loginContainer .card .card-body {
       padding: 0 !important;
     }
   }
   @media (max-width: 374px) {
    #loginContainer .card .card-body {
        padding: 1rem !important;
    }
   }