/* color palette */
:root {
    /*--bg: #EDF6FF;*/
    --bg: #EBEBEB;
    --black: #111111;
    --primary: #003C7E;
    --primary_light: #F8FCFF;
    --primary_menu: #AFAFAF;
    --primary_grey: #CFD5DB;
    --grey1: #333333;
    --grey2: #4F4F4F;
    --grey3: #828282;
    --grey4: #BDBDBD;
    --grey5: #E0E0E0;
    --grey6: #F2F2F2;
    --grey7: #EBEBEB;
    --red: #EB5757;
    --orange: #F2994A;
    --yellow: #F2C94C;
    --green: #219653;
    --alert_red: #E02424;
    --alert_red_bg: #FDF2F2;
    --alert_green: #27AE60;
    --alert_green_bg: #F3FAF7;
    --tag0: #057A55;
    --tag0_bg: #DEF7EC;
    --tag1: #D03801;
    --tag1_bg: #FEECDC;
    --tag2: #1C64F2;
    --tag2_bg: #E1EFFE;
    --tag3: #D61F69;
    --tag3_bg: #FCE8F3;
    --tag4: #9F580A;
    --tag4_bg: #FDF6B2;
    --tag5: #7E3AF2;
    --tag5_bg: #EDEBFE;
}

/* font */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(/fonts/NotoSansKR-Thin.woff2) format('woff2'),
        url(/fonts/NotoSansKR-Thin.woff) format('woff'),
        url(/fonts/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 200;
    src: url(/fonts/NotoSansKR-Light.woff2) format('woff2'),
        url(/fonts/NotoSansKR-Light.woff) format('woff'),
        url(/fonts/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/NotoSansKR-Regular.woff2) format('woff2'),
        url(/fonts/NotoSansKR-Regular.woff) format('woff'),
        url(/fonts/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/NotoSansKR-Medium.woff2) format('woff2'),
        url(/fonts/NotoSansKR-Medium.woff) format('woff'),
        url(/fonts/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/NotoSansKR-Bold.woff2) format('woff2'),
        url(/fonts/NotoSansKR-Bold.woff) format('woff'),
        url(/fonts/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/NotoSansKR-Black.woff2) format('woff2'),
        url(/fonts/NotoSansKR-Black.woff) format('woff'),
        url(/fonts/NotoSansKR-Black.otf) format('opentype');
}

@font-face {
    font-family: 'Meiryo UI';
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/MeiryoUI-03.woff) format('woff');
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.4;
    color: var(--black);
    font-size: 15px;
    font-weight: 300;
    background-color: var(--bg);
}
img {
    width: 100%;
    vertical-align: bottom;
}
* {
    box-sizing: border-box;
}

/* icons */
i {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: baseline;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

i.logout {
    background-image: url(/Content/CMS/img/i_logout.svg);
}

i.bell {
    background-image: url(/Content/CMS/img/i_bell.svg);
}

i.user {
    background-image: url(/Content/CMS/img/i_user.svg);
}

i.box {
    background-image: url(/Content/CMS/img/i_box.svg);
}

i.tag {
    background-image: url(/Content/CMS/img/i_tag.svg);
}

i.setting {
    background-image: url(/Content/CMS/img/i_setting.svg);
}

i.box_w {
    background-image: url(/Content/CMS/img/i_box_w.svg);
}

i.tag_w {
    background-image: url(/Content/CMS/img/i_tag_w.svg);
}

i.setting_w {
    background-image: url(/Content/CMS/img/i_setting_w.svg);
}
i.Receive {
    background-image: url(/Content/CMS/img/Receive.svg);
}
i.Receive_w {
    background-image: url(/Content/CMS/img/Receive_n.svg);
}
i.Repair {
    background-image: url(/Content/CMS/img/Repair.svg);
}
i.Repair_w {
    background-image: url(/Content/CMS/img/Repair_n.svg);
}
i.Packing {
    background-image: url(/Content/CMS/img/Packing.svg);
}
i.Packing_w {
    background-image: url(/Content/CMS/img/Packing_n.svg);
}
i.Request {
    background-image: url(/Content/CMS/img/Request.svg);
}
i.Request_w {
    background-image: url(/Content/CMS/img/Request_n.svg);
}
i.Report{
    background-image: url(/Content/CMS/img/Report.svg);
}
i.Report_w {
    background-image: url(/Content/CMS/img/Report_n.svg);
}
i.History {
    background-image: url(/Content/CMS/img/History.svg);
}
i.History_w {
    background-image: url(/Content/CMS/img/History_n.svg);
}
i.QnA {
    background-image: url(/Content/CMS/img/QnA.svg);
}
i.QnA_w {
    background-image: url(/Content/CMS/img/QnA_n.svg);
}

i.Faq {
    background-image: url(/Content/CMS/img/Faq.svg);
}

i.Faq_w {
    background-image: url(/Content/CMS/img/Faq_n.svg);
}


i.search {
    background-image: url(/Content/CMS/img/i_search.svg);
}

i.trash {
    background-image: url(/Content/CMS/img/i_trash.svg);
}
i.cancel {
    background-image: url(/Content/CMS/img/i_cancel.svg);
}
i.cancel_white {
    background-image: url(/Content/CMS/img/i_cancel_white.svg);
}
i.edit {
    background-image: url(/Content/CMS/img/i_pencil.svg);
    margin-left: -6px;
}
i.prev_double {
    background-image: url(/Content/CMS/img/prev_double.svg);
}
i.prev {
    background-image: url(/Content/CMS/img/prev.svg);
}
i.next {
    background-image: url(/Content/CMS/img/next.svg);
}
i.next_double {
    background-image: url(/Content/CMS/img/next_double.svg);
}
i.check {
    background-image: url(/Content/CMS/img/i_check.svg);
}
i.tree_open {
    background-image: url(/Content/CMS/img/i_folder-remove.svg);
}
i.tree_close {
    background-image: url(/Content/CMS/img/i_folder-add.svg);
}
i.folder {
    background-image: url(/Content/CMS/img/i_folder.svg);
}
i.add_white {
    background-image: url(/Content/CMS/img/i_folder-add_white.svg);
}
i.file {
    background-image: url(/Content/CMS/img/i_file.svg);
}

/* buttons */
.btn {
    border-radius: 8px;
    cursor:pointer;
}

.btn.ico {
    display: flex;
    align-items: center;
}

.btn.ico i {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

.btn.small {
    padding-left: 12px;
    padding-right: 12px;
    height: 32px;
    line-height: 32px;
}

.btn.normal {
    padding-left: 24px;
    padding-right: 24px;
    height: 42px;
    line-height: 32px;
}

.btn.circle {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}

.btn.primary {
    background: var(--primary);
    border: 0;
    color:#fff;
}

.btn.disable {
    background: var(--grey6);
    color: var(--grey2);
    border: 0;
}

.btn.text {
    background: var(--grey6);
    color: var(--grey2);
    border: 0;
}

.btn.outline {
    background: white;
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn.greyline {
    background: white;
    border: 1px solid var(--grey2);
}

.btn.secondary {
    background: var(--grey6);
    border: 1px solid var(--grey5);
    color: var(--primary);
}
/* toggle */
.toggle_group {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.toggle_switch {
    width: 42px;
    height: 24px;
    display: block;
    position: relative;
    border-radius: 19px;
    background-color: var(--grey5);
    cursor: pointer;
}

.toggle_switch .toggle_button {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
}

.toggle_group input:checked ~ .toggle_switch {
    background: var(--primary);

}

.toggle_group input:checked ~ .toggle_switch .toggle_button {
    left: calc(100% - 21px);    
    background: #fff;
    
}

.toggle_switch,
.toggle_button {
    transition: all 0.2s ease-in;
}
/* checkbox */
input[type=checkbox] {
    position: relative;
      border: 2px solid var(--primary);
      border-radius: 2px;
      background: none;
      cursor: pointer;
      line-height: 0;
      outline: 0;
      padding: 0 !important;
      vertical-align: text-top;
      height: 16px;
      width: 16px;
      -webkit-appearance: none;
    opacity: .5;
  }
  
  input[type=checkbox]:hover {
    opacity: 1;
  }
  
  input[type=checkbox]:checked {
    background-color: var(--primary);
    opacity: 1;
  }
  
  input[type=checkbox]:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 3px;
    height: 7px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
  }