/* ------------------------------------------------------------------------------------------------------------
    Sample Common
------------------------------------------------------------------------------------------------------------ */
.sampleArea { width:100%; height:calc(100vh - 165px); padding:0 0; }

.bgAtlas { background:var(--bgAtlas); color:var(--bgTxt);; }
.bgDefault { background:var(--bgDefault); color:var(--rmainTxt); }
.bgPrimary { background:var(--bgPrimary); color:var(--bgTxt); } /* Byzantine Blue */
.bgSuccess { background:var(--bgSuccess); color:var(--bgTxt); } /*India Green */
.bgWarning { background:var(--bgWarning); color:var(--bgTxt); } /* Real Madrid Gold */
.bgDanger { background:var(--bgDanger); color:var(--bgTxt); } /* Angels Red */
.bgInfo { background:var(--bgInfo); color:var(--bgTxt); } /* Capri */

.lineAtlas { border-color:var(--bgAtlas); }
.lineDefault { border-color:var(--bgDefault); }
.linePrimary { border-color:var(--bgPrimary); }
.lineSuccess { border-color:var(--bgSuccess); }
.lineWarning { border-color:var(--bgWarning); }
.lineDanger { border-color:var(--bgDanger); }
.lineInfo { border-color:var(--bgInfo); }

.w05 { width:5% !important; }
.w10 { width:10% !important; }
.w15 { width:15% !important; }
.w20 { width:20% !important; }
.w25 { width:25% !important; }
.w30 { width:30% !important; }
.w35 { width:35% !important; }
.w40 { width:40% !important; }
.w45 { width:45% !important; }
.w50 { width:50% !important; }
.w55 { width:55% !important; }
.w60 { width:60% !important; }
.w65 { width:65% !important; }
.w70 { width:70% !important; }
.w75 { width:75% !important; }
.w80 { width:80% !important; }
.w85 { width:85% !important; }
.w90 { width:90% !important; }
.w95 { width:95% !important; }
.w100 { width:100% !important; }

/* ------------------------------------------------------------------------------------------------------------
    breadcrumb
------------------------------------------------------------------------------------------------------------ */
.breadcrumbTitle { position:relative; width:100%; border-bottom:1px solid #c4c4c4; margin:0; padding:0.5rem 0; transition:all 0.5s ease-in; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; }
.breadcrumb { display: flex; justify-content: flex-start; align-items: center; padding:0; margin:0; list-style:none; }
.breadcrumb li { position:relative; padding:0.4rem 1.2rem 0.4rem 1.2rem; }
.breadcrumb li:first-child { padding:0.4rem 1.2rem 0.4rem 0; }
.breadcrumb li:after { position: absolute; top:6px; right:0; content:''; width: 0.8rem; height: 0.8rem; border-top: 2px solid #c4c4c4; border-right: 2px solid #c4c4c4; transform: rotate(45deg); transition: all 1s; }
.breadcrumb li:last-child::after { border:none; }
.breadcrumb a { font-size:1.2rem; color:#c4c4c4; }
.breadcrumb .active { color:#ffbd1b; font-weight:bold; }

.pageTitle { display: flex; justify-content: flex-start; align-items: center; color:var(--mainTxt); }

/* ------------------------------------------------------------------------------------------------------------
    selectBox
------------------------------------------------------------------------------------------------------------ */
.selectBox { display: flex; width:100%; flex-direction: column; position: relative; }
.selectBox .options-container { max-height: 0; width:100%; opacity: 0; transition: all 0.4s; overflow: hidden; border-radius: 5px; border: solid 1px #dcdfe5; background-color: #ffffff; order: 1; position: absolute; top: 50px; }
.selected { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height:4.0rem; padding:0 1.2rem; margin:0 0; background:transparent; border-radius: 5px; border: solid 1px #d9d9d9; order: 0; }
.selected::after { content: ''; width: 7px; height: 7px; position: absolute; top:14px; right: 15px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(225deg); transition: all 1s; }
.selected:hover { background: #effcff; }
.selected:hover h3 { color:#0075ed; font-weight:900; }
.selected:hover::after { top:14px; right: 15px; border-top: 2px solid #0075ed; border-left: 2px solid #0075ed; }
.selected .selectedTxt { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column; width:100%; }
.selected h3, .selectBox label h3 { font-size: 1.4rem; font-weight: 400; line-height: 1.57; color: #1f2949; width:100%;   }
.selected h5, .selectBox label h5{ width:100%; font-size: 1.2rem; font-weight: 400; line-height: 1.83; color:var(--mainTxt); }

.selectBox .options-container.active { height:120px; max-height:200px; opacity: 1; overflow-y: auto; z-index: 9000; }
.selectBox .options-container.active + .selected::after { transform: rotate(45deg); transition: all 1s; }

.selectBox .option { padding:0 1.2rem; cursor: pointer; }
.selectBox .option:hover { background: #effcff; }
.selectBox .option:hover h3 { color:#0075ed; font-weight:900; }

.selectBox label { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height: 40px; cursor: pointer; }
.selectBox .option .radio { display: none; }

@media screen and (max-width:1919px){
 .selected::after { top:9px; right: 15px; }
 .selected:hover::after { top:13px; right: 15px; }
 }

/* ------------------------------------------------------------------------------------------------------------
    form-radio
------------------------------------------------------------------------------------------------------------ */
.radioGroup { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; margin:0 0; }
.radioGroup label { font-size: 1.4rem; }
.radioGroup input[type="radio"]{ display: none; }
.radioGroup input[type="radio"] + label{ position: relative; display: inline-block; padding-left: 3rem; cursor: pointer; line-height: 2rem; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.radioGroup input[type="radio"] + label:before, .radioGroup input[type="radio"] + label:after{ content: ''; position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; text-align: center; color: #fff; border-radius: 50%; -webkit-transition: all .3s ease; transition: all .3s ease; }
.radioGroup input[type="radio"] + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 0.2em #00b8ed, inset 0 0 0 1em #fff; }
.radioGroup input[type="radio"] + label:hover:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 0.3em #fff, inset 0 0 0 1em #00b8ed; }
.radioGroup input[type="radio"]:checked + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em #00b8ed; border:1px solid #00b8ed; }
.radioGroup input[type="radio"]:disabled + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em #c4c4c4; border:1px solid #c4c4c4; }


/* ------------------------------------------------------------------------------------------------------------
    Button
------------------------------------------------------------------------------------------------------------ */
.btnArea { display: flex; justify-content: center; align-items: center; width:100%; }
.btn { display: flex; justify-content: center; align-items: center; height:4.0rem; padding:0 1.2rem; font-size:1.6rem; font-weight:900; white-space:nowrap; box-shadow:inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%); background-image:none; border:1px solid #d9d9d9; border-radius:20px; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background; transition-duration:0.5s; color:var(--btnTxt);  }
.btn:active, .btn.active { box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125); background-image:none; }
.btn:focus { outline:none !important; }
.btn.disabled { opacity: 0.65; box-shadow: none; cursor: not-allowed; }

.btnXs { width:6.0rem; }
.btnSm { width:8.0rem; }
.btnMd { width:10.0rem; }
.btnLg { width:12.0rem; }
.btnXl { width:14.0rem; }

.btn.btnAtlas { background-image:linear-gradient(to bottom, #2ed368 0%, #2ed368 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffa181f8', GradientType=0); border-color:#2ed368; color:var(--btnTxt); }
.btn.btnAtlas:hover, .btn.btnAtlas:focus { background-color:#2ed368; background-position:0 -20px; }
.btn.btnAtlas:active, .btn.btnAtlas.active { background-color:#2ed368; border-color:#2ed368; }

.btn.btnCancel { background-image:linear-gradient(to bottom, #646464 0%, #646464 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffa181f8', GradientType=0); border-color:#646464; color:var(--btnTxt); }
.btn.btnCancel:hover, .btn.btnCancel:focus { background-color:#646464; background-position:0 -20px; }
.btn.btnCancel:active, .btn.btnCancel.active { background-color:#646464; border-color:#646464; }

.btn.btnReset { background-image:linear-gradient(to bottom, #a3a3a3 0%, #a3a3a3 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffa181f8', GradientType=0); border-color:#a3a3a3; color:var(--btnTxt); }
.btn.btnReset:hover, .btn.btnReset:focus { background-color:#a3a3a3; background-position:0 -20px; }
.btn.btnReset:active, .btn.btnReset.active { background-color:#a3a3a3; border-color:#a3a3a3; }

/* ------------------------------------------------------------------------------------------------------------
    Modal
------------------------------------------------------------------------------------------------------------ */
.modal { display: none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.9); transition: all 1s ease-in-out; z-index:8887; }
.modalContent { width:50vw; height:50vh; background: #fff; color:#545454; }
.modalHeader { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #d9d9d9; padding:1.5rem; }
.modalHeader .title { font-size:2.0rem; font-weight:900; }
.modalClose { color: red; text-decoration: none; font-size:2.8rem; font-weight: 300; }
.modalClose:hover, .modalClose:focus { text-decoration: none; cursor: pointer; }
.modalBody { padding:1.5rem; }

/* ------------------------------------------------------------------------------------------------------------
    input
------------------------------------------------------------------------------------------------------------ */
/* input 기본 스타일 초기화 */
input { -webkit-appearance:none; -moz-appearance:none; appearance:none; border:1px solid #d9d9d9; /* width:2.0rem; height:2.0rem; */ }
/*input:disabled { cursor: not-allowed; }*/

/*input[type="checkbox"]{ display:none; }*/
/*input[type="checkbox"] + label{ position:relative; display:inline-block; width:2.0rem; height:2.0rem; border:2px solid #d9d9d9; transition: all .75s;  }*/
/*input[type="checkbox"] + label::after{ position:absolute; left:-0.2rem; top:-0.2rem; content:'✔'; width:2.0rem; height:2.0rem; font-size:1.8rem; color:#dddddd; text-align:center; transition: all .75s; }*/
/*input[type="checkbox"]:hover + label::after{ color:#181818; }*/
/*input[type="checkbox"]:checked + label { border-color:#181818; }*/
/*input[type="checkbox"]:checked + label::after{ color:#181818; }*/
/*input[type="checkbox"]:checked + label:hover::after{ color:#181818; }*/

/* ------------------------------------------------------------------------------------------------------------
    form-checkbox
------------------------------------------------------------------------------------------------------------ */
.checkGroup { display: flex; justify-content:flex-start; align-items: flex-start; }
.checkGroup h4 { margin:0 0 0 0.5rem; }

.checkGroup input[type="checkbox"]{ display:none; }
.checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:2.0rem; height:2.0rem; border:2px solid #d9d9d9; transition: all .75s;  }
.checkGroup input[type="checkbox"] + label::after{ position:absolute; left:-0.2rem; top:-0.2rem; content:'✔'; width:2.0rem; height:2.0rem; font-size:1.8rem; color:#dddddd; text-align:center; transition: all .75s; }
.checkGroup input[type="checkbox"]:hover + label::after{ color:#181818; }
.checkGroup input[type="checkbox"]:checked + label { border-color:#181818; }
.checkGroup input[type="checkbox"]:checked + label::after{ color:#181818; }
.checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#181818; }





























/* ------------------------------------------------------------------------------------------------------------
    form-textarea
------------------------------------------------------------------------------------------------------------ */
.textareaSample { width:100%; display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: row wrap; }
.textareaSample .formArea { width:50%; display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; }
.textareaSample .formArea .formItem { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; width:95%; margin:1rem 0 0; }

textarea { width:100%; }
textarea.formControl { width:100%; min-height:100px; }
textarea:hover, textarea:active, textarea:focus { outline:none; box-shadow:0px 0px 6px 2px #a181f8; }



/* ------------------------------------------------------------------------------------------------------------
    SingleUpload
------------------------------------------------------------------------------------------------------------ */
.filebox { display: flex; justify-content: flex-start; align-items: center; position:relative; width:100%; }
.filebox .fileNameBox { width:100%; }
.filebox label { display: flex; justify-content: center; align-items: center; position: absolute; top:0; right:0; width:15%; height:100%; font-size: 1.2rem; color:#fff; background: #a181f8; }
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; }

/* ------------------------------------------------------------------------------------------------------------
    multiUpload
------------------------------------------------------------------------------------------------------------ */






/* ------------------------------------------------------------------------------------------------------------
    Tab
------------------------------------------------------------------------------------------------------------ */
.tabSample { display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; padding:1rem; }
.tabItem { flex:1 1 50%; max-width:48%; margin:6rem 0 0; padding:0 0 1.0rem; border-bottom:1px solid #c4c4c4; }

.tabArea .tabContent > #s07.tabPane.active { min-height:105px; }
.tabArea .tabContent > #s08.tabPane.active { min-height:105px; }
.tabArea .tabContent > #s09.tabPane.active { min-height:105px; }
.tabArea .tabContent > #s10.tabPane.active { min-height:105px; }
.tabArea .tabContent > #s11.tabPane.active { min-height:105px; }
.tabArea .tabContent > #s12.tabPane.active { min-height:105px; }

.tabArea { width:100%; }
.tabArea .tabLinks { display:flex; list-style:none; margin:0 0; padding:0 0; border-bottom:1px solid #a181f8; font-size:1.2rem; }
.tabArea .tabLinks > li { display: flex; justify-content: flex-start; align-items: center;}
.tabArea .tabLinks > li > a { height:40px; padding:1.0rem; margin:0 0; border:1px solid #a181f8; border-bottom-color:transparent; border-radius:2px 2px 0 0; color:var(--tabTxt); }
.tabArea .tabLinks > li > a:hover { border-color:#a181f8 #a181f8 transparent #a181f8; }
.tabArea .tabLinks > li.active > a,
.tabArea .tabLinks > li.active > a:hover,
.tabArea .tabLinks > li.active > a:focus { color:var(--activeTabTxt); font-weight:bold; background:#a181f8; border:1px solid #a181f8; border-bottom-color:transparent; }
.tabArea .tabContent { width:100%; color:#545454; font-size:1.2rem; }
.tabArea .tabContent > .tabPane { display:none; }
.tabArea .tabContent > .tabPane.active { display:block; padding:1.5rem; background-color:var(--contentBg); }
.tabArea .tabContent > .active { display:block; }

.tabLinkRight .tabLinks { display:flex; justify-content:flex-end; }

.tabLeft { display:flex; justify-content:flex-start; }
.tabLeft .tabLinks { display:flex; flex-direction:column; width:10%; }
.tabLeft .tabLinks li >a { width:100%; border-radius:0 0; }
.tabLeft .tabContent { width:90%; }

.tabRight { display:flex; justify-content:flex-end; }
.tabRight .tabLinks { display:flex; flex-direction:column; width:10%; }
.tabRight .tabLinks li > a { width:100%; border-radius:0 0; }
.tabRight .tabContent { width:90%; }

.tabJustified .tabLinks { display:flex; justify-content:space-between; }
.tabJustified .tabLinks > li { width:20%; }
.tabJustified .tabLinks > li > a { width:100%; }

/* ------------------------------------------------------------------------------------------------------------
    Accordion
------------------------------------------------------------------------------------------------------------ */
.accordionSample { width:100%; padding:1rem; }
.accordionItem { margin:6rem 0 0; padding:0 0 1.0rem; border-bottom:1px solid #545454; }
.accordion { font-size:1.2rem; }
.accordion .toggle { position:relative; display:block; padding:1rem; border:solid #ccc; border-width:0 1px 1px; background-color:#f4f4f4; text-decoration:none; text-transform:uppercase; color:var(--accordionTxt); }
.accordion .toggle:after { content:"+"; display:block; position:absolute; right:15px; top:20%; height:20px; width:20px; line-height:20px; border:2px solid #a497ab; border-radius:50%; text-align:center; color:#a497ab; }
.accordion .toggleContents { display:none; }
.accordion .toggleContents p { font-size:1.2rem; }
.accordion:first-child .toggle { border-top-width:1px; }
.accordion.active .toggle { background-color:#f0ebef; }
.accordion.active .toggle, .accordion.active .toggle:after { font-weight: 700; color:var(--activeAccordionTxt); background: #a181f8; }
.accordion.active .toggle:after { content:"_"; line-height:10px; border-color:#906090; }
.accordion.active .toggleContents { display:block; padding:0.5rem 1rem; border:solid #ccc; border-width:0 1px 1px; background-color:var(--contentBg); color:#a497ab; }


/* ------------------------------------------------------------------------------------------------------------
    Calendar
------------------------------------------------------------------------------------------------------------ */
.calendarArea { margin:6rem 0 0; }

.excludeCalendar .currentDay { display: flex; justify-content: flex-start; align-items: center; }
.excludeCalendar .currentDay .underBarForm { border:none; border-bottom:1px solid #767676; width:30px; }
.excludeCalendar .currentDay img { margin:0 0 0 10px; }
.excludeCalendar .txtFiled { width:450px; color:#d1173e; }
.excludeCalendar .txtFiled::placeholder { color:#d1173e; }


.excludeCalendar .input-wrapper { display: inline-block; }
.excludeCalendar .input-wrapper label { display: block; color: white; margin-bottom: 6px; }
.excludeCalendar .input-wrapper input { display: inline-block; border:none; border-radius: 3px; width: 200px; height: 48px;  margin-right: 16px; padding-left: 16px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);; }

.excludeCalendar .date-field { cursor: pointer; }
.excludeCalendar .calendar-widget { position: relative; }
.excludeCalendar .calendar-widget:focus { outline: none; }
.excludeCalendar .calendar-wrapper { display: none; position: absolute; top: 100%; left: 0; padding-top: 8px; z-index: 2; }
.excludeCalendar .dual-calendar { display: flex; /*   height: 300px; */ border-radius: 3px; padding: 16px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);; background-color: white; }
.excludeCalendar .dual-calendar .calendar:first-child { margin-right: 16px; }
.excludeCalendar .calendar { width:auto; }
.excludeCalendar .calendar-header { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; }
.excludeCalendar .month-text { color: #616161; font-size: 24px; font-weight: bold; }

.excludeCalendar .prev-btn,
.excludeCalendar .next-btn { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50px; /* box-shadow: var(--shadow-2dp); background-color: var(--primary); color: white; transition: background-color 0.2s, box-shadow 0.2s; */ }
.excludeCalendar .prev-btn:after { content: ''; width: 7px; height: 7px; position: absolute; top: 13px; left: 14px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(315deg); transition: all 1s; }
.excludeCalendar .next-btn:after { content: ''; width: 7px; height: 7px; position: absolute; top: 13px; right: 15px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(135deg); transition: all 1s; }
.excludeCalendar .prev-btn:hover,
.excludeCalendar .next-btn:hover { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12); background-color: #42A5F5; }
.excludeCalendar .prev-btn:active,
.excludeCalendar .next-btn:active { box-shadow: 0 8px 10px 0 rgba(0, 0, 0, .14), 0 3px 12px 2px rgba(0, 0, 0, .12); background-color: #64B5F6; }
.excludeCalendar .prev-btn.disabled,
.excludeCalendar .next-btn.disabled { cursor: default; box-shadow: none; background-color: #E0E0E0; color: #9e9e9e; }
.excludeCalendar .prev-btn *,
.excludeCalendar .next-btn * { user-select: none; }
.excludeCalendar .prev-btn { left: 0; }
.excludeCalendar .next-btn { right: 0; }
.excludeCalendar .date-table-header { display: flex; justify-content: space-between; width: 100%; margin-top: 8px; }
.excludeCalendar .day { user-select: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-weight: 700; color: #616161; font-size: 16px; }
.excludeCalendar .day.saturday { color: #2196F3; }
.excludeCalendar .day.sunday { color: #FF6F00; }

/* Date Styling */
.excludeCalendar .date-table-row { display: flex; height: 52px; justify-content: space-between; }
.excludeCalendar .date { cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; width:52px; height:52px; transition: color 0.2s; }

/* DO NOT CHANGE THE ORDER */
.excludeCalendar .date.sunday { color: #FF6F00; }
.excludeCalendar .date.today { color:#fff; background: #2196F3; border-radius: 50%; }
.excludeCalendar .date.selected { color:#fff; background: #2196F3; border-radius: 50%; }
.excludeCalendar .date.disabled { color: #E0E0E0; }
.excludeCalendar .date.empty { cursor: default; user-select: none; }
.excludeCalendar .date * { cursor: pointer; user-select: none; }
.excludeCalendar .date.disabled *{ cursor: not-allowed; }
.excludeCalendar .date .help-text { position: absolute; top: 0; display: none; align-items: flex-start; justify-content: center; width: 100%; height: 15px; font-size: 10px; z-index: 1; }
.excludeCalendar .date .date-text { display: flex; justify-content: center; align-items: center;  width: 100%; height: 100%; font-size:16px; z-index: 1; }
.excludeCalendar .date .date-ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width:52px; height: 100%; background-color: transparent; will-change: transform; transition: transform 0.18s cubic-bezier(0, .75, .5, 1), background-color 0.2s; }
.excludeCalendar .date .date-ripple.no-transition { transition: none; }
.excludeCalendar .date.hover .date-ripple { background-color: #E0E0E0; transform: translate(-50%, -50%) scale(1); border-radius:50%; }
.excludeCalendar .date.in-range .date-ripple { background-color: #E3F2FD; transform: translate(-50%, -50%) scale(1); }
.excludeCalendar .date.selected .date-ripple { background-color: #2196F3; transform: translate(-50%, -50%) scale(1); border-radius:50%; }

/* ------------------------------------------------------------------------------------------------------------
    customCalendar
------------------------------------------------------------------------------------------------------------ */
.customCalendar { width:100%; }
.customCalendar .calendarSetting { display: flex; justify-content: center; align-items: center; flex-flow: row; }
.customCalendar .calendarSetting .perArrow { content: ''; width:15px; height: 15px; margin:0 0 0 2rem; border-top: 2px solid #000; border-left: 2px solid #000; transform: rotate(315deg); cursor: pointer; }
.customCalendar .calendarSetting .month { display: flex; justify-content: center; align-items: center; width:50%; margin:0 auto; font-size:2.4rem; font-weight: 700; }
.customCalendar .calendarSetting .nextArrow { content: ''; width:15px; height: 15px; margin:0 2rem 0 0; border-top: 2px solid #000; border-left: 2px solid #000; transform: rotate(135deg); cursor: pointer; }
.customCalendar .days { display: flex; justify-content: center; align-items: center; width:100%; margin:2rem 0 0; background:#a181f8 }
.customCalendar .daysItem { position: relative; display: flex; justify-content: center; align-items: center; width:calc(100% / 7); height:40px; color:#fff; user-select: none; }
.customCalendar .daysItem:after { position: absolute; top:0; right:0; content:''; width:1px; height:40px; background: #fff;  }
.customCalendar .daysItem:last-child:after { position: absolute; top:0; right:0; content:''; width:0px; height:40px; background: #fff;  }
.customCalendar .date { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; }
.customCalendar .dateItem { display: flex; justify-content: center; align-items: center; width:calc(100% / 7); height:40px; color:#000; user-select: none; }
.customCalendar .dateItem:nth-child(7n) { color:#2196f3;}
.customCalendar .dateItem:nth-child(7n+1) { color:#ff0000;}
.customCalendar .dateItem .dateFocus { display: flex; justify-content: center; align-items: center; width:40px; height:40px; }
.customCalendar .dateItem .dateFocus:hover { color:#fff; background:#a181f8; border-radius: 50%; transition: all 0.5s; }
.customCalendar .dateItem.today .dateFocus { border:1px solid #a181f8; border-radius: 50%; }