/* SalesCalendar.css */
.sales-calendar.search-period .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; }
.sales-calendar.search-period .tooltip .tooltiptext { visibility: hidden; min-width:100px; background-color: #ed2b2f; color: #fff; text-align: center; border-radius: 6px; padding: 7px 0 5px; position: absolute; left:-20px; z-index: 1; bottom: 125%;  
 opacity: 0; transition: opacity 0.3s; margin-top:7px; margin-bottom:7px; } 
.sales-calendar.search-period .tooltip:hover .tooltiptext, 
.sales-calendar.search-period .tooltip:focus .tooltiptext { visibility: visible; opacity: 1; font-size:14px; }
.sales-calendar.search-period .calendar { background-color: #ffffff; }
.sales-calendar.search-period .calendar #dayValue { margin: 0; padding: 0; border: 0; border-radius: 0; color: #727579; -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: transparent url("") no-repeat; height: auto; background-color: transparent; }
.sales-calendar.search-period .calendar #dayValue:hover, 
.sales-calendar.search-period .calendar #dayValue:focus, 
.sales-calendar.search-period .calendar #dayValue:active, 
.sales-calendar.search-period .calendar #dayValue.active { outline: 1px solid transparent; color: inherit; background-color: transparent; }
.sales-calendar.search-period .calendar #dayValue > span { display: inline; margin: 0; }
.sales-calendar.search-period .calendar table { margin: 0; }
.sales-calendar.search-period .calendar table th, .sales-calendar.search-period .calendar table td { padding: 0; text-align: center; font-size: 0.75rem; overflow:visible; font-weight:bold;}
.sales-calendar.search-period .calendar table th { padding: 5% 0; }
.sales-calendar.search-period .calendar table .weekend{color: rgb(249, 177, 179);}
.sales-calendar.search-period .calendar thead tr:nth-of-type(1) th { font-size: 1.57rem; }
.sales-calendar.search-period .calendar thead th div { display: inline-block; margin: 0 5%; font-weight: bold;color:#151515; }
.sales-calendar.search-period .calendar thead th div > span { display: block; margin-bottom: 4px; font-size:0.85rem; color: #151515; }
.sales-calendar.search-period .calendar thead th > span { cursor: pointer; }
.sales-calendar.search-period .calendar thead th > span img{width:18px;vertical-align: baseline;}
.sales-calendar.search-period .calendar thead th > span.dev-refreshYearPrev:before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; vertical-align: middle;
font-size: 1.3857142857rem; content: ""; color: #cdcfd0; }
.sales-calendar.search-period .calendar thead th > span.dev-refreshYearNext:after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; vertical-align: middle;
font-size: 1.3857142857rem; content: ""; color: #cdcfd0; }
.sales-calendar.search-period .calendar thead th > span.dev-refreshPrev:before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; vertical-align: middle;
content: ""; color: #a6a8ab; }
.sales-calendar.search-period .calendar thead th > span.dev-refreshNext:after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; vertical-align: middle;
content: ""; color: #a6a8ab; }
.sales-calendar.search-period .calendar tbody td #dayValue { display: block;width:calc(100% - 5px);margin: 3px auto; padding: calc(100% / 4) 0;border-radius:50%;letter-spacing: -1px;}
.sales-calendar.search-period .calendar tbody td:hover:not(.hidden):not(.inactive) #dayValue, .sales-calendar.search-period .calendar tbody td:focus:not(.hidden):not(.inactive) #dayValue { 
font-weight: bold; cursor: pointer; color: #ffffff; background-color: #bebfc4; }
.sales-calendar.search-period .calendar tbody td.holiday:hover:not(.hidden):not(.inactive) #dayValue{background:rgb(248, 169, 171)}
.sales-calendar.search-period .calendar tbody td.userholiday:hover:not(.hidden):not(.inactive) #dayValue{background:rgb(243, 105, 108)}
.sales-calendar.search-period .calendar tbody td:hover:not(.hidden):not(.inactive).today #dayValue, .sales-calendar.search-period .calendar tbody td:focus:not(.hidden):not(.inactive).today #dayValue {
border-color: #888D94; }
.sales-calendar.search-period .calendar tbody td:nth-of-type(1).select #dayValue { border-radius: 30px 0 0 30px; }
.sales-calendar.search-period .calendar tbody td:nth-last-of-type(1).select #dayValue { border-radius: 0 30px 30px 0; }
.sales-calendar.search-period .calendar tbody td.hidden { visibility: hidden; }
.sales-calendar.search-period .calendar tbody td.from #dayValue, .sales-calendar.search-period .calendar tbody td.to #dayValue { font-weight: bold; color: #ffffff; background-color: #888D94; }
.sales-calendar.search-period .calendar tbody td.select #dayValue { background-color: #ebeced; }
.sales-calendar.search-period .calendar tbody td.inactive #dayValue { font-weight: bold; color: #bfbfbf; }
.sales-calendar.search-period .calendar tbody td.today #dayValue { width: calc(100% - 5px); margin: 0 auto; padding: calc((100% / 4) - 2px) 0;
border-radius: 50%; font-weight: bold;color: #fff;background-color: #32323a !important;}
.sales-calendar.search-period .calendar tbody td.from #dayValue { border-radius: 30px 0 0 30px; }
.sales-calendar.search-period .calendar tbody td.to #dayValue { border-radius: 0 30px 30px 0; }
.sales-calendar.search-period .calendar:after { content: ""; display: table; clear: both; }
.sales-calendar.search-period .calendar #dayValue #memo.holiday { display : none; } 
.sales-calendar.search-period .calendar #dayValue #memo.userholiday { display : none; }  
.sales-calendar.search-period .calendar #dayValue:hover #memo.userholiday,
.sales-calendar.search-period .calendar #dayValue:focus #memo.userholiday,
.sales-calendar.search-period .calendar #dayValue:active #memo.userholiday { display :inline-block; } 
.sales-calendar.search-period .calendar #dayValue:hover #day.userholiday,
.sales-calendar.search-period .calendar #dayValue:focus #day.userholiday,
.sales-calendar.search-period .calendar #dayValue:active #day.userholiday { display : none; } 
.sales-calendar.search-period .calendar tbody td.userholiday #dayValue { width: calc(100% - 5px); margin: 0 auto; padding: calc((100% / 4) - 1px) 0; background-color: #f3696c; border-radius: 50%;
font-weight: bold;color:#fff; }
.sales-calendar.search-period .calendar tbody td.holiday #dayValue { width: calc(100% - 5px); margin: 0 auto; padding: calc((100% / 4) - 1px) 0; background-color:#f8a9ab; border-radius: 50%;color:#fff;
font-weight: bold; }
.sales-calendar.search-period .calendar tbody td.holiday .tooltip:hover{background:#ed2b2f !important;}
.sales-calendar.search-period .calendar tbody td.userholiday .tooltip:hover{background:#ed2b2f !important;}
.sales-calendar.search-period .calendar tbody td.today.holiday #dayValue:hover{background:#ed2b2f !important;}
.sales-calendar.search-period .calendar tbody td.today.userholiday #dayValue:hover{background:#ed2b2f !important;}
/*aside-left*/
.aside-left .sales-calendar.search-period table tr td:first-child .tooltip .tooltiptext { left: 0; }
.aside-left .sales-calendar.search-period table tr td:last-child .tooltip .tooltiptext,
.aside-left .sales-calendar.search-period table tr td:nth-child(6) .tooltip .tooltiptext{ left: inherit; right: 0; }

/* 이용사 지정 휴일 */
.sales-calendar.search-period .calendar .designated-wrap{padding: 10px 4px;margin: 5px 5px 0;border-top: 2px solid rgb(106 106 106);text-align: center;font-size: 0;}
.sales-calendar.search-period .calendar .designated-wrap .designated-text{display: inline-block;font-size: 10px; font-weight:bold;color:#151515;}
.sales-calendar.search-period .calendar .designated-wrap .designated-text .type1{display: inline-block;width: 25px;height: 10px;vertical-align: top;margin: 0 3px 0 0;border-radius: 25px;background: rgb(248, 169, 171);}
.sales-calendar.search-period .calendar .designated-wrap .designated-text .type2{display: inline-block;width: 25px;height: 10px;vertical-align: top;margin: 0 3px 0 5px;border-radius: 25px;background: #f3696c;}

@media screen and (max-width: 35.438em) {
    .sales-calendar.search-period table tr td:first-child .tooltip .tooltiptext { left: 0; }
    .sales-calendar.search-period table tr td:last-child .tooltip .tooltiptext { left: inherit; right: 0; }
}

@media screen and (min-width: 35.5em) {
    .sales-calendar.search-period .calendar > div { width: 100%; max-width: 400px; margin: 0 auto; }
}