/* ------------------------------------------------------------------------------------------------------------
    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; }

/* ------------------------------------------------------------------------------------------------------------
    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); }

/* ------------------------------------------------------------------------------------------------------------
    panel
------------------------------------------------------------------------------------------------------------ */
.panelArea { display: flex; justify-content:space-between; align-items: flex-start; flex-flow: row wrap; margin:50px 0 0; }
.panelPart { width:33%; display: flex; justify-content:flex-start; align-items: center; flex-flow: column; }

.panel { width:100%; background: #f9f9f9; margin:0 0 2%; box-shadow: 1px 1px 5px 1px #00000040; border-radius: 0; }
.panelHead { display: flex; justify-content:flex-start; align-items: center; position: relative; width:100%; height:40px; padding:0 1.5rem; border-bottom:1px solid #c4c4c430; }
.panelHead h4 { font-size: 1.8rem; font-weight: 700; margin:0 auto 0 0; }

.panelHead .arrowToggle { content:''; width:1.0rem; height:1.0rem; border-top: 2px solid #c4c4c4; border-right: 2px solid #c4c4c4; transform: rotate(-45deg); -ms-transform: rotate(-45deg); transition: all 1s; }
.panelHead .arrowToggle.folding { content:''; width:1.0rem; height:1.0rem; border-top: 2px solid #c4c4c4; border-right: 2px solid #c4c4c4; transform: rotate(45deg); -ms-transform: rotate(45deg); transition: all 1s; }
.panelBody { position: relative; width:100%; height:15vh; padding:1.5rem; overflow-Y: scroll; transition:all 1s; }
/*.panelHead .arrowToggle { position: absolute; top:45%; right:2%; content:''; width:1.0rem; height:1.0rem; border-top: 2px solid #c4c4c4; border-right: 2px solid #c4c4c4; transform: rotate(-45deg); -ms-transform: rotate(-45deg); transition: all 1s; }*/
/*.panelHead .arrowToggle.folding { position: absolute; top:35%; right:2%; content:''; width:1.0rem; height:1.0rem; border-top: 2px solid #c4c4c4; border-right: 2px solid #c4c4c4; transform: rotate(45deg); -ms-transform: rotate(45deg); transition: all 1s; }*/
/*.panelBody { position: relative; width:100%; height:15vh; padding:1.5rem; overflow-Y: scroll; transition:all 1s; }*/
.panelBody.close { height:0; padding:0; overflow: hidden; transition:all 1s; }

@media screen and (max-width:1200px){
 .panelPart { width:49%; }
}
@media screen and (max-width:414px){
 .panelPart { width:100%; }
}

/* ------------------------------------------------------------------------------------------------------------
    Button
------------------------------------------------------------------------------------------------------------ */
.sampleArea.btnSample .panelPart:first-child { width:50%; }
.sampleArea.btnSample .panelPart:first-child .panelBody { height:80px; }
.sampleArea.btnSample .panelPart:first-child .panelBody.close { height:0; }
.sampleArea.btnSample .panelPart:nth-child(2) { width:49%; }
.sampleArea.btnSample .panelPart:nth-child(2) .panelBody { height:80px; }
.sampleArea.btnSample .panelPart:nth-child(2) .panelBody.close { height:0; }
.sampleArea.btnSample .panelPart:nth-child(3) { width:50%; }
.sampleArea.btnSample .panelPart:nth-child(3) .panelBody { height:380px; }
.sampleArea.btnSample .panelPart:nth-child(3) .panelBody.close { height:0; }
.sampleArea.btnSample .panelPart:nth-child(4) { width:49%; }
.sampleArea.btnSample .panelPart:nth-child(4) .panel:first-child .panelBody { height:80px; }
.sampleArea.btnSample .panelPart:nth-child(4) .panel:first-child .panelBody.close { height:0; }
.sampleArea.btnSample .panelPart:nth-child(4) .panel:nth-child(2) .panelBody { height:80px; }
.sampleArea.btnSample .panelPart:nth-child(4) .panel:nth-child(2) .panelBody.close { height:0; }

.buttonSample { display:flex; justify-content:flex-start; align-items: center; flex-flow: row wrap; width:100%; height:50px; }
.buttonSample a { margin:0 0 0 1rem; }
.buttonSample a:first-child { margin:0 0; }
.buttonSample.fullWidth { display:flex; justify-content:flex-start; align-items: center; flex-flow: column; width:100%; height:auto; }
.buttonSample.fullWidth a { width:100%; margin:1rem 0 0; }
.buttonSample.fullWidth a:first-child { margin:0 0 0; }

.btn { display: flex; justify-content: center; align-items: center; height:30px; padding:0 1.2rem; font-size:1.2rem; line-height:1.42857143; 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:2px; -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;  }
.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; }
.btn > i { margin-left:0; }
.btn > i[class*=" minia-icon-"], .btn > i i[class*=" entypo-icon-"], .btn > i i[class*=" cut-icon-"] { margin-top:0; }

.btnXs { height:20px; padding:0 0.8rem; font-size:1.2rem; line-height: 1.5; border-radius: 1px; }
.btnSm { height:25px; padding:0 1.0rem; font-size:1.2rem; line-height: 1.5; border-radius: 1px; }
.btnMd { height:35px; padding:0 1.5rem; font-size:1.2rem; line-height: 1.5; border-radius: 1px; }
.btnLg { height:40px; padding:0 2.5rem; font-size:1.2rem; line-height: 1.5; border-radius: 1px; }
.btnXl { height:50px;padding:0 3.5rem; font-size:1.2rem; line-height: 1.5; border-radius: 1px; }

.btn.btnInfo i { color:#ffffff; }
.btn.btn-link { box-shadow:none; text-shadow:none; }
.btn.btnRound { width:4.0rem; height:4.0rem; padding:0 1.0rem; border-radius:50%; font-size:1.2rem; }
.btn.btnRound.btnXs { width:2.2rem; height:2.2rem; padding:0 0.1rem; font-size:1.2rem; }
.btn.btnRound.btnSm { width:3.0rem; height:3.0rem; padding:0 0.4rem; font-size:1.3rem; }
.btn.btnRound.btnMd { width:3.5rem; height:3.5rem; padding:0 0.6rem; font-size:1.5rem; }
.btn.btnRound.btnLg { width:4.5rem; height:4.5rem; padding:0 0.9rem; font-size:1.7rem; }
.btn.btnRound.btnXl { width:5.0rem; height:5.0rem; padding:0 1.0rem; font-size:2.0rem; }
.btn.btnRound.btnLg i { margin-top:4px; margin-left:5px; }

.btnAtlas { color:var(--bgTxt); background-color:#a181f8; border-color:#a181f8; }

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

.btn.btnDefault { background-image:linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); border-color:#ccc; }
.btn.btnDefault:hover, .btn.btnDefault:focus { background-color:#e0e0e0; background-position:0 -20px; }
.btn.btnDefault:active, .btn.btnDefault.active { background-color:#e0e0e0; border-color:#dbdbdb; }

.btn.btnPrimary { background-image:linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0); border-color:#2b669a; color:var(--bgTxt); }
.btn.btnPrimary:hover, .btn.btnPrimary:focus { background-color:#2d6ca2; background-position:0 -20px; }
.btn.btnPrimary:active, .btn.btnPrimary.active { background-color:#2d6ca2; border-color:#2b669a; }
.btn.btnPrimary i { color:var(--bgTxt); }

.btn.btnSuccess { background-image:linear-gradient(to bottom, #5cb85c 0%, #419641 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); border-color:#3e8f3e; color:var(--bgTxt); }
.btn.btnSuccess:hover, .btn.btnSuccess:focus { background-color:#419641; background-position:0 -20px; }
.btn.btnSuccess:active, .btn.btnSuccess.active { background-color:#419641; border-color:#3e8f3e; }
.btn.btnSuccess i { color:var(--bgTxt); }

.btn.btnWarning { background-image:linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0); border-color:#e38d13; color:var(--bgTxt); }
.btn.btnWarning:hover, .btn.btnWarning:focus { background-color:#eb9316; background-position:0 -20px; }
.btn.btnWarning:active, .btn.btnWarning.active { background-color:#eb9316; border-color:#e38d13; }
.btn.btnWarning i { color:var(--bgTxt); }

.btn.btnDanger { background-image:linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0); border-color:#b92c28; color:var(--bgTxt); }
.btn.btnDanger:hover, .btn.btnDanger:focus { background-color:#c12e2a; background-position:0 -20px; }
.btn.btnDanger:active, .btn.btnDanger.active { background-color:#c12e2a; border-color:#b92c28; }
.btn.btnDanger i { color:var(--bgTxt); }

.btn.btnInfo { background-image:linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0); border-color:#28a4c9; color:var(--bgTxt); }
.btn.btnInfo:hover, .btn.btnInfo:focus { background-color:#2aabd2; background-position:0 -20px; }
.btn.btnInfo:active, .btn.btnInfo.active { background-color:#2aabd2; border-color:#28a4c9; }

@media screen and (max-width: 1920px) {
 .buttonSample { height:auto; }
 .buttonSample a { margin:1rem 0 0 1rem; }
 .buttonSample a:first-child { margin:1rem 0 0 0; }
}

/* ------------------------------------------------------------------------------------------------------------
    form-input
------------------------------------------------------------------------------------------------------------ */
.sampleArea.formSample .panelPart:first-child { width:50%; }
.sampleArea.formSample .panelPart:first-child .panelBody { height:625px; }
.sampleArea.formSample .panelPart:first-child .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(2) { width:49%; }
.sampleArea.formSample .panelPart:nth-child(2) .panel:first-child .panelBody { height:330px; }
.sampleArea.formSample .panelPart:nth-child(2) .panel:first-child .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(2) .panel:nth-child(2) .panelBody { height:238px; }
.sampleArea.formSample .panelPart:nth-child(2) .panel:nth-child(2) .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(3) { width:50%; }
.sampleArea.formSample .panelPart:nth-child(3) .panelBody { height:410px; }
.sampleArea.formSample .panelPart:nth-child(3) .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(4) { width:49%; }
.sampleArea.formSample .panelPart:nth-child(4) .panelBody { height:410px; }
.sampleArea.formSample .panelPart:nth-child(4) .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(5) { width:50%; }
.sampleArea.formSample .panelPart:nth-child(5) .panelBody { height:180px; }
.sampleArea.formSample .panelPart:nth-child(5) .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(6) { width:49%; }
.sampleArea.formSample .panelPart:nth-child(6) .panelBody { height:180px; }
.sampleArea.formSample .panelPart:nth-child(6) .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(7) { width:50%; }
.sampleArea.formSample .panelPart:nth-child(7) .panelBody { height:400px; }
.sampleArea.formSample .panelPart:nth-child(7) .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(8) { width:49%; }
.sampleArea.formSample .panelPart:nth-child(8) .panelBody { height:400px; }
.sampleArea.formSample .panelPart:nth-child(8) .panelBody.close { height:0; }
.sampleArea.formSample .panelPart:nth-child(9) { width:100%; }
.sampleArea.formSample .panelPart:nth-child(9) .panelBody { height:400px; }
.sampleArea.formSample .panelPart:nth-child(9) .panelBody.close { height:0; }


.formGroup { margin:1rem 0 0; }
.formControl { width:100%; height:4.0rem; font-size:1.4rem; padding:0.6rem 1rem; }
.formControl:hover, .formControl:active, .formControl:focus { outline:none; box-shadow:0px 0px 6px 2px #a181f8; }

.formGroup label { font-size: 1.4rem; }
.formGroup input { font-size: 1.4rem; margin:1rem 0 0; }

/* underLine Side Input */
.underlinesInput { position: relative; }
.underlinesInput input { box-sizing:border-box; padding:20px 0 0; width:100%; height:100%; border:0 none; color:#595f63; outline:none; }
.underlinesInput label { position:absolute; left:0%; bottom:0; width:100%; height:100%; border-bottom:1px solid #000; text-align:left; pointer-events:none; }
.underlinesInput label:after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:100%; border-bottom:3px solid #5fa8d3; transition:all .3s ease; } /* 파란색 가로줄 */
.underlinesInput label span { position:absolute; left:0; bottom:5px; transition:all .3s ease; }
.underlinesInput input:focus + label span, .underlinesInput input:valid + label span { transform:translateY(-150%); font-size:14px; color:#5fa8d3; }  /* input에 글을 입력하고 포커스가 지나간 상태에서 제어하려면 valid 선택자를 써야한다. */
.underlinesInput input:hover, .underlinesInput input:active, .underlinesInput :focus { outline:none; box-shadow:none; }
/* 포커스 될 때 label span(name)이 위로 올라감 */
.underlinesInput input:focus + label::after, .underlinesInput input:valid + label::after { width:100%; transform:translateX(0); } /* 포커스 될 때 파란색 가로줄이 생김 */

/* underLine Center Input */
.underlineCenterInput .title { margin:0 0 10px; }
.underlineCenterInput label {display:block; position:relative; height:38px; border-bottom:1px solid #ccc;}
.underlineCenterInput input { font-size: 1.4rem; margin:0; }
.underlineCenterInput input:hover, .underlineCenterInput input:active, .underlineCenterInput :focus { outline:none; box-shadow:none; }
.underlineCenterInput label i {position:absolute; left:50%; right:50%; bottom:-3px; border-bottom:2px solid #5fa8d3; transition:all .3s;}
.underlineCenterInput label input[type="text"]:focus input { width:100%;}
.underlineCenterInput label input[type="text"]:focus + i {left:0; right:0; transition:all .3s;}

/* animation Input */
.animationInput{ position: relative; padding-top: 13px; }
.animationInput input{ border: 1px solid lightgrey; border-radius: 5px; outline: none; min-width: 250px; padding: 15px 20px; font-size: 16px; transition: all .1s linear; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; -webkit-appearance:none; }
.animationInput input:focus{ border: 2px solid #3951b2; }
.animationInput input::placeholder{ color:transparent; }
.animationInput label{ pointer-events: none; position: absolute; top:50%; left:10px; font-size: 1.2rem;padding: 5px; background:transparent; transition: all .1s linear; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; }
.animationInput input:required:invalid + label{ color: red; }
.animationInput input:focus:required:invalid{ border: 2px solid red; }
.animationInput input:required:invalid + label:before{ content: '*'; }
.animationInput input:hover, .animationInput input:active, .animationInput :focus { outline:none; box-shadow:none; }
.animationInput input:focus + label, .animationInput input:not(:placeholder-shown) + label{ top: 10px; font-size: 1.2rem; font-weight: 700; color: #3951b2; background:#fff; border-radius: 10px; }

/* title을 별도로 사용할 경우 */
.formItem { display: flex; justify-content:flex-start; align-items: center; margin:1rem 0 0; }
.formItem .title { width:100px; text-align: center; }
.formItem .formGroup { width:calc(100% - 100px); margin:0; }
.formItem input { margin:0; }

@media screen and (max-width:768px){
 .sampleArea.formSample .panelPart { width:100% !important; }
}

/* ------------------------------------------------------------------------------------------------------------
    form-checkbox
------------------------------------------------------------------------------------------------------------ */
.checkSample { width:100%; display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: row wrap; }
.checkSample .formArea { width:33%; display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; }
.checkSample .formArea .formItem { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; margin:1rem 0 0; }
.checkSample .formArea .formItem .checkGroup { margin:1rem 0 0; }

/* 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; }

.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; }


/* 추가된 부분 - unchecked 상태일 때의 스타일 */
.checkGroup input[type="checkbox"]:not(:checked) + label::after{
 color: #dddddd;
}
.checkGroup input[type="checkbox"]:not(:checked) + label {
 border-color: #d9d9d9;
}



@media screen and (max-width: 993px){
 .checkSample01 { width:50%; }
}

.customToggleCheck input[type="checkbox"] + label { border:none; }
.customToggleCheck input[type="checkbox"] + label::after {display: none; }
.customToggleCheck input[type="checkbox"] + label.toggleSwitch { display: block; position: relative; width:100px; height:40px; background:#fff; box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%); border-radius: 30px; cursor: pointer; }
.customToggleCheck .toggleSwitch .toggleButton { display: flex; justify-content: center; align-items: center; content:"미사용"; position: absolute; top: 50%; left:5px; width:3rem; height:3rem; transform: translateY(-50%); border-radius: 50%; background: #f03d3d; color: #f03d3d;}
.customToggleCheck #toggle:checked ~ .toggleSwitch { background: #fff; }
.customToggleCheck #toggle:checked ~ .toggleSwitch .toggleButton { left: calc(100% - 35px); background: var(--activeTxt); color:#fff; font-weight: bold; }
.customToggleCheck .toggleSwitch, .toggleButton { transition: all 0.3s ease-in; }

/* ------------------------------------------------------------------------------------------------------------
    form-radio
------------------------------------------------------------------------------------------------------------ */
.radioGroup { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; margin: 1rem 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 #a181f8, 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 #a181f8; }
.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 #a181f8; border:1px solid #a181f8; }
.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; }

/* ------------------------------------------------------------------------------------------------------------
    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; }

/* ------------------------------------------------------------------------------------------------------------
    selectBox
------------------------------------------------------------------------------------------------------------ */
.selectBox { display: flex; width: 48%; 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: 68px; }
.selected { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height: 64px; padding:0 1.2rem; margin:0 0 1rem; background: #a181f8; border-radius: 5px; border: solid 1px #dcdfe5; order: 0; }
.selected::after { content: ''; width: 7px; height: 7px; position: absolute; top: 23px; right: 15px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(225deg); transition: all 1s; }
.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 { max-height: 240px; opacity: 1; overflow-y: scroll; }
.selectBox .options-container.active + .selected::after { transform: rotate(45deg); transition: all 1s; }
.selectBox .options-container::-webkit-scrollbar { width: 8px; background: #0d141f; background: #81878f; background: #f1f2f3; border-radius: 0 5px 5px 0; }
.selectBox .options-container::-webkit-scrollbar-thumb { background: #525861; background: #81878f; border-radius: 0 5px 5px 0; }
.selectBox .option { padding:0 1.2rem; cursor: pointer; }
.selectBox .option:hover { background: #dcdfe5; }
.selectBox label { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height: 64px; cursor: pointer; }
.selectBox .option .radio { display: none; }

/* ------------------------------------------------------------------------------------------------------------
    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%; }


/* ------------------------------------------------------------------------------------------------------------
    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; }






















/* ------------------------------------------------------------------------------------------------------------
    Slider Bar
------------------------------------------------------------------------------------------------------------ */
.sliderSample { width:100%; padding:1rem; }


/* ------------------------------------------------------------------------------------------------------------
    Load
------------------------------------------------------------------------------------------------------------ */
.loadSample { display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; padding:1rem; }
.loadItem { flex:1 1 50%; max-width:48%; margin:6rem 0 0; padding:0 0 1.0rem; border-bottom:0px solid #545454; position:relative; }



/* ------------------------------------------------------------------------------------------------------------
    Countdown
------------------------------------------------------------------------------------------------------------ */

.countdown { display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; padding:1rem; }
.countdown ul { display: inline-block; list-style: none; padding:0; margin:0; }
.countdown li { font-size: 2.2rem; font-weight: 600; color:#fff; float:left; margin:0 0 0 10px; }
.countdown li:first-child { margin:0 0 0 0; }
.countdown li span { font-size: 5.8rem; font-weight: 600; color:#000; }
.countdown li span.pcTxt { font-size: 2.2rem; font-weight: 600; color:#000; margin:0; }
.countdown li span.mobileTxt { display:none; }