.top{z-index:999;position: fixed; top:0; width:100%; height: 60px;display: block; background: #333; color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.top .top-nav{display: inline-block; width: 100%; height: 100%; position: relative;}
.top .top-nav div{display: inline-block; line-height: 60px; max-height: 60px; float: left;}
.top .top-nav .top-bars, .top .top-nav .top-logout{width: 60px; text-align: center; cursor: pointer;}
.top .top-nav .top-bars{border-right:1px solid #4e4e4e;}
.top .top-nav .top-bars:active, .top .top-nav .top-logout:active{background: #555;}
.top .top-nav .top-bars i, .top .top-nav .top-logout i{font-size:20px; line-height: 60px;}
.top .top-nav .top-title{font-size:18px; line-height: 62px; padding: 0 15px;width: calc(100% - 140px); cursor: pointer;}
.top .top-nav .top-switch{float: right;border-left: 1px solid #4e4e4e;color: #f9f9f9;font-size: 18px;line-height: 28px;padding-top: 4px;height: 60px;text-align: center;width: 80px;}

.side{margin-left:calc(-100% - 30px);-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;}
.side.show{margin-left:0;}

.side-bg{z-index:100; display: none; position: fixed; top:0; left:0; right:0; bottom:0; opacity: 0.4; background: #333;}
.side-nav{z-index: 9999;left:0;width:260px;top:0;position: fixed;height: 100%;background: #2f4f4f;color:#fff; border-right:2px solid #323232; overflow-y:auto;}
.side-nav > .side-close{position: fixed;top: 0;display: inline-block;height: 100%;vertical-align: middle;left: 260px;width:calc(100% - 300px);text-align: left;cursor: pointer;}
.side-nav > .side-close i{position: relative;top: calc(50% - 40px);width: 50px;font-size: 30px;height: 50px;padding: 10px;margin-left: 20px;vertical-align: middle;text-align: center;border-radius: 50%;background: #000000;}
.side.show.side-bg{display: block;}

.side-nav > ul > li{
    padding:15px;font-size: 20px; border-bottom:1px solid #9e9e9e;
    cursor:pointer;
        display: flex;
    justify-content: space-between;
    align-items: center;
}
.side-nav > ul > li.noact{
  font-size:14px;
}
.side-nav > ul > li.noact:first-child{
  background: #008a56;
}
.side-nav > ul > li img{
  margin-right:5px;
}
.side-nav > ul > li:not(.noact):after{
    font-family:"Font Awesome 6 Free";
    font-weight: 900;
        -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    float: right;
    content: "\f105";
}
#wrapper{position: relative;margin-top:60px;}
@media (max-width:600px){
  #wrapper.zi1005{
    z-index: 1005;
  }
}
label.checkbox {font-size: 14px;}
label.checkbox input {display:none;}
label.checkbox span {display:inline-block;vertical-align:middle;cursor:pointer;}
label.checkbox .icon {position:relative;margin-top: 2px;width: 17px;height: 17px;border: 1px solid #c8ccd4;border-radius: 3px;transition: background 0.1s ease;}
label.checkbox .icon::after {content: '';position: absolute;top: 1px;left: 5px;width: 5px;height: 11px;border-right: 2px solid #fff;border-bottom: 2px solid #fff;transform: rotate(45deg) scale(0);transition: all 0.3s ease;transition-delay: 0.15s;opacity: 0;}
label.checkbox .text {font-size:18px; margin-left: 10px;}
label.checkbox input:checked ~ .icon {border-color: transparent;background: #ff1616;animation: jelly 0.6s ease;}
label.checkbox input:checked ~ .icon::after {opacity: 1;transform: rotate(45deg) scale(1);}
tr.line td{background: #f2f2f2;}
input[type="checkbox"].switch {
  position: absolute;
  /* hidden */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="checkbox"].switch + .switch_label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 58px;
  height: 24px;
  background: #fff;
  border: 2px solid #adadad;
  border-radius: 20px;
  transition: 0.2s;
}
input[type="checkbox"].switch + .switch_label:hover {
  background: #efefef;
}
.onf_btn {
  position: absolute;
  top: 3px;
  left: 3px;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 20px;
  background: #adadad;
  transition: 0.2s;
}

/* checking style */
input[type="checkbox"].switch:checked+.switch_label {
  background: #0095ca;
  border: 2px solid #00bdff;
}

input[type="checkbox"].switch:checked+.switch_label:hover {
  background: #008abb;
}

/* move */
input[type="checkbox"].switch:checked+.switch_label .onf_btn {
  left:36px;
  background: #fff;
  box-shadow: 1px 2px 3px #00000020;
}

input[type="checkbox"].switch + .switch_label + span:after{content:"부재중"; color: #dadada; display: block;}
input[type="checkbox"].switch:checked + .switch_label + span:after{content:"대기중"; color:#00f2ff; display: block;}
input[type="checkbox"].switch:checked + .switch_label + span.ing:after{content:"상담중"; color:#ffe11b; display: block;}
#Toast-Msg {
  z-index: 9999;
    width:200px;
    height:20px;
    height:auto;
    position:fixed;
    left:50%;
    margin-left:-100px;
    bottom:10px;
    background-color: #383838;
    color: #F0F0F0;
    font-size: 14px;
    padding:10px;
    text-align:center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
#Toast-Async {
  z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    display: flex;
}
#Toast-Async-Box{
    min-width: 300px;
    color:#fff;
    font-size:14px;
    max-width: 86%;
    margin:auto;
    padding:15px;
    background: #2e2e2e;
    text-align:center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
#Toast-Async-Msg{padding-top:12px;}
#Toast-Async-Msg p+p{padding-top:4px;}
.hashtag-wrap{margin:0 !important;}
.hashtag-wrap ul{
    width: 100%;
    display: inline-block;
    padding-bottom: 10px;
}
.hashtag-wrap ul li{
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    display: flex;
    font-size: 14px;
    height: 40px;
    min-width: 60px;
    align-items:  center;
    padding: 0 5px 0 14px;
    background: #fff6f6;
    border: 1px solid #ff9f9f;
    border-radius: 20px;
    text-align: center;
    position: relative;
}
.hashtag-wrap ul.hashcolor2 li{background: #f0fefc;border-color: #7cc8ff;}
.hashtag-wrap ul li span{width:24px;height: 24px; cursor: pointer;}
.hashtag-wrap ul li span.del-btn:before, .hashtag-wrap ul li span.del-btn:after{position: absolute;right: unset; top:13px; content:' ';height: 13px;width: 2px;background-color: #ed143d;}
.hashtag-wrap ul li span.del-btn:before {transform: rotate(45deg);}
.hashtag-wrap ul li span.del-btn:after {transform: rotate(-45deg);}
.ui-autocomplete{z-index:9999;}
.hashtag-list{max-height: 191px; overflow-y: auto; height:191px;}
.hashtag-list li{padding:15px 15px 15px; font-size:14px; position: relative; cursor: pointer;border-bottom:1px solid #d7dbe6;}
.hashtag-list li:hover{font-weight: bold;color: #fff;background: #707070;}
.hashtag-list li:after{font-family: "Font Awesome 6 Free";content: "\f055";line-height: 1;font-weight: 900;font-size: 24px;color: #ff9f9f;position: absolute;right: 9px;top: 11px;}
.hashtag-list.hashcolor2 li:after{color:#7cc8ff;}
.list-container .listbox{font-family: 'GongGothicLight';}
.list-container .listbox{display:flex;justify-content: space-between;margin-top:15px; box-shadow: rgb(0 0 0 / 13%) 0px 0px 6px 3px; border-radius: 10px; padding:15px;align-items: center;}
.list-container .listbox h1{font-size:14px; line-height: normal;letter-spacing:0;}
.list-container .listbox h1+p{margin-top:12px;}
.list-container .listbox p{font-size:14px; margin:3px 0 0 0;}
.list-container .listbox p+p{margin-top:5px;}
.list-container .listbox p.Badge+p span+span{margin-left:10px; position: relative;}
.list-container .listbox p.Badge+p span+span:before{content: "";position: absolute;top: 2px;left: -5px;width: 1px;background: #a2a2a2;height: 13px;}
.list-container .listbox p:last-child{color:#454545; margin-top:7px;}
.list-container .listbox p b{font-weight: 400; color:#000; font-size:16px;}
.list-container .Badge .text-badge{padding: 2px 4px 1px; margin-right:5px; font-size:14px;}
.list-container .Badge .text-badge.badge-type3{background-color:crimson;color:#fff;}
.list-container .Badge .text-badge.badge-type2{background-color:teal;color:#fff;}
.list-container .Badge .text-badge.badge-type1{background-color:tomato;color:#fff;}
.list-container .listbox .listbox-right{position: relative;}
.list-container .listbox .listbox-right p{color:#454545; text-align: center;}
.list-container .listbox .listbox-right p.cancel{color:crimson;}
.list-container .listbox .listbox-right p.end{color:teal;}
.list-container .listbox .listbox-right span{background: #dadada;
    color: #7f7f7f; border-radius: 50%;font-size: 16px;width: 50px;height: 50px;text-align: center;line-height: 50px;display: block;}
.list-container .listbox .listbox-right span.t1{background: teal;color: #fff;}
.list-container .listbox .listbox-right span.t2{background: tomato;color: #fff; }
.list-container .listbox .listbox-right p.blue{color:blue;}
.list-container .listbox .listbox-right p.red{color:red;}