/****************************** font face ******************************/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Sans+TC:300|Roboto:300,300i,400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Libre+Barcode+39');
/****************************** font icon, animate ******************************/
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import "icons/font-awesome/font-awesome.css";
@import "icons/line-icons/line-icons.css";
@import "icons/line-icons/simple-line-icons.css";
@import "icons/rounded/style.css";
@import "icons/octicons/octicons.css";
@import "icons/weather/css/weather-icons.min.css";
@import "animate.min.css";
@font-face {
    font-family: 'weather';
    src: url('icons/weather/artill_clean_icons-webfont.eot');
    src: url('icons/weather/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), url('icons/weather/artill_clean_icons-webfont.woff') format('woff'), url('icons/weather/artill_clean_icons-webfont.ttf') format('truetype'), url('icons/weather/weatherfont/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.font-code39 {font-family: 'Libre Barcode 39', cursive;}

/* rest template */
body {background: #fff; font-family:Roboto,Open Sans,Helvetica,Noto Sans TC,Noto Sans SC,Microsoft JhengHei,sans-serif !important; font-weight: 400; color: #555;}
body > section {opacity: 0;}
/*-apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif*/

.main-content {background: #fff; margin-left: auto; min-height: inherit; position: relative;}
.main-content .page-content {background: #dce1e4; padding: 50px 0 0;}

/*.main-content .page-content {background: #fff; padding: 15px 30px;}
.main-content .page-content > * {padding: 15px 30px;}*/

.page-content section {min-height: calc(100vh - 50px);}
.page-content section:after {content: " "; display:block; clear:both;}

/* rest common */
a:hover, a:focus {text-decoration: none;}
a[disabled="disabled"] {pointer-events: none;}
a.underline {text-decoration: underline;}

h1, h2, h3, h4, h5, h6 {margin: 0; line-height: 1.42857143;}

figure {margin: 0;}
ul {margin: 0; margin-bottom: 0; padding: 0;}
ul li {margin: 0; padding: 0; list-style: none;}
#quickview-sidebar, .builder {visibility: hidden;}

/* ui icon */
.material-icons {font-size: inherit; vertical-align: top; position: relative;}
.ui {display:inline-block; vertical-align: middle; position:relative;}
.ui.active {color: #333 !important;}
.ui.ui-vTop {vertical-align: top;}
.ui.ui-absLeft {position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

.ui.ui-svg {width: 48px; height: 48px; display: block;}

.ui.ui-arrowDown {border-top: 5px solid #888; border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0);}

.ui.ui-viewPw {position: absolute; top: 17px; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.ui.ui-viewPw.active:after {content: " "; background: #fff; border: 1px solid #fff; border-left-color: #333; width: 0; height: 110%; position: absolute; top: 0; left: 50%; -webkit-transform: rotate(20deg) translateX(-50%); transform: rotate(20deg) translateX(-50%);}

.ui.ui-approve {width: 38px; height: 38px;}
.ui.ui-approve:before {content: " "; background: transparent; border: 2px solid rgba(255,255,255,1); border-top: none; border-right: none; width: 50%; height: 22%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -70%) rotate(-45deg); transform: translate(-50%, -70%) rotate(-45deg)}

.ui.ui-reject {width: 38px; height: 38px;}
.ui.ui-reject:before, .ui.ui-reject:after {content: " "; background: #fff; width: 57%; height: 2px; position: absolute; top: 50%; left: 50%;}
.ui.ui-reject:before {-webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg);}
.ui.ui-reject:after {-webkit-transform: translate(-50%,-50%) rotate(-45deg); transform: translate(-50%,-50%) rotate(-45deg);}

.ui.ui-loading {width: 50px; height: 50px;}
.ui.ui-loading > * {width: 100%; height: 100%; position: absolute; -webkit-animation: rolling 0.5s linear infinite; animation: rolling 0.5s linear infinite;}
.ui.ui-loading > * > * {border: 4px solid #9acc82; border-bottom-width: 0; border-radius: 1000px 1000px 0 0; width: 100%; height: 50%; position: absolute;}
.ui.ui-loading > * > *:nth-of-type(2) {-webkit-transform: translate(0, 50%) rotate(90deg) translate(0%, -50%); transform: translate(0, 50%) rotate(90deg) translate(0%, -50%);}
.ui.ui-loading.white > * > * {border-color: white;}

.ui.ui-info {width: 38px; height: 38px;}
.ui.ui-info:before {content: " "; background: #fff; border-radius: 100%; width: 15%; height: 15%; position: absolute; top: 15%; left: 50%;}
.ui.ui-info:after {content: " "; background: #fff; width: 12%; height: 50%; position: absolute; top: 40%; left: 50%;}
.ui.ui-info:before, .ui.ui-info:after {-webkit-transform: translate(-50%,0%); transform: translate(-50%,0%);}

.ui.ui-exclamation {width: 38px; height: 38px;}
.ui.ui-exclamation:before {content: " "; background: #fff; width: 12%; height: 50%; position: absolute; top: 15%; left: 50%;}
.ui.ui-exclamation:after {content: " "; background: #fff; width: 12%; height: 12%; position: absolute; top: 78%; left: 50%;}
.ui.ui-exclamation:before, .ui.ui-exclamation:after {-webkit-transform: translate(-50%,0%); transform: translate(-50%,0%);}

.ui.ui-checkmark {width: 22px; height: 24px;}
.ui.ui-checkmark svg > * {fill: #fff;}

.ui.ui-changeRole {width: 50px; height: 50px;}
.ui.ui-brought {width: 35px; height: 34px; vertical-align: top; left: -3px;}
.ui.ui-forfeited, .ui.ui-expired, .ui.ui-entitled, .ui.ui-taken, .ui.ui-adjusted {width: 32px; height: 34px; vertical-align: top;}
.ui.ui-password {width: 34px; height: 34px;}
.ui.ui-language {width: 34px; height: 34px;}
.ui.ui-delegate {width: 34px; height: 34px;}
.ui.ui-security {width: 34px; height: 34px;}
.ui.ui-upload {width: 34px; height: 34px;}

.ui.ui-close {width: 38px; height: 38px;}
.ui.ui-close:before, .ui.ui-close:after {content: " "; background: #fff; border-radius: 10px; width: 50%; height: 2px; position: absolute; top: 50%; left: 50%;}
.ui.ui-close:before {-webkit-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg); -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;}
.ui.ui-close:after {-webkit-transform: translate(-50%,-50%) rotate(-90deg); transform: translate(-50%,-50%) rotate(-90deg); -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;}
.open .ui.ui-close:before {-webkit-transform: translate(-50%,-50%) rotate(135deg); transform: translate(-50%,-50%) rotate(135deg);}
.open .ui.ui-close:after {-webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg);}

.ui.ui-sendSMS {text-align: center;}
.ui.ui-sendSMS:before {content: "SMS"; background: #1ad41f; border-radius: 100%; width: 40%; height: 40%; font-size: 12px; font-family: Roboto; line-height: 333%; color: #fff; position: absolute; top: 45%; left: 50%; z-index: 2; transform: translate(-50%, -50%) scale(0.8);}
.ui.ui-sendSMS:after {content: ""; border-top: 10px solid rgba(0, 0, 0, 0); border-bottom: 10px solid rgba(0, 0, 0, 0); border-left: 10px solid #1ad41f; position: absolute; top: 47%; left: 38%; z-index: 1; transform: rotate(14deg);}
.ui.ui-sendSMS span {background: red; border-radius: 100%; width: 30%; height: 30%; position: absolute; top: -8px; right: 5px;}
.ui.ui-sendSMS span:before, .ui.ui-sendSMS span:after {content: " "; background: #fff; border-radius: 10px; width: 70%; height: 2px; position: absolute; top: 50%; left: 50%;}
.ui.ui-sendSMS span:before {-webkit-transform: translate(-50%,-50%) rotate(135deg); transform: translate(-50%,-50%) rotate(135deg);}
.ui.ui-sendSMS span:after {-webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg);}

.ui.ui-mobileSuccess {}
.ui.ui-mobileSuccess:before {content: " "; background: #1ad41f; border-radius: 100%; width: 40%; height: 40%; position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8)}
.ui.ui-mobileSuccess:after {content: " "; background: transparent; border: 4px solid rgba(255,255,255,1); border-top: none; border-right: none; width: 18%; height: 9%; position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg)}

.ui.ui-mobileError {}
.ui.ui-mobileError:before {content: " "; background: red; width: 10%; height: 30%; position: absolute; top: 24%; left: 50%;}
.ui.ui-mobileError:after {content: " "; background: red; border-radius: 100%; width: 12%; height: 12%; position: absolute; top: 58%; left: 50%;}
.ui.ui-mobileError:before, .ui.ui-mobileError:after {-webkit-transform: translate(-50%,0%); transform: translate(-50%,0%);}

.ui.ui-stamp-off {background: url(../image/ui-stamp-off.svg) no-repeat; width: 20px; height: 20px;}
.ui.ui-transpose-top {background: url(../image/ui-transpose-top.svg); width: 26px; height: 26px;}
.ui.ui-transpose-left {background: url(../image/ui-transpose-left.svg); width: 26px; height: 26px;}
.ui.ui-viewList {background: url(../image/ui-viewList.svg); width: 26px; height: 26px;}
.ui.ui-assignment-outlined {width: 24px; height: 24px;}
.ui.ui-assignment-outlined svg > * {fill: #0066b3;}
.ui.ui-calendar-setting {background: url(../image/calendar-setting-24px.svg); width: 24px; height: 24px;}

@-webkit-keyframes rolling {
    0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    50% {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
    100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes rolling {
    0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    50% {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
    100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

.ui.ui-screenRotation {-webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation:animScreenRotation 4s infinite linear; animation:animScreenRotation 4s infinite linear;}

@keyframes animScreenRotation {
    0% {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
    50% {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
    100% {-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
}

.ui.ui-ring {width: 100%; height: 100%; z-index:100; -webkit-animation:revolution 5s infinite linear; animation:revolution 5s infinite linear;}
.ui.ui-ring:before {content: " "; background: rgba(126, 197, 103, 1); border-radius: 100%; width: 6px; height: 6px; position: absolute; top: 0; left: 22%;}

@-webkit-keyframes revolution {
    100% {-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
}
@keyframes revolution {
    100% {-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
}

.ui.ui-cap {background: #aaa; /*border: 1px solid #aaa;*/ border-radius: 100%; width: 20px; height: 20px; font-style: normal; line-height: 1; color: #fff;}
.ui.ui-cap:before {content: attr(nth-before); position: absolute; top: 1px; left: 3px; -webkit-transform: scale(0.7); transform: scale(0.7);}
.ui.ui-cap:after {content: attr(nth-after); position: absolute; bottom: 0; right: 3px; -webkit-transform: scale(0.7); transform: scale(0.7); transform: scale(0.7);}

.ui.icons-arrows-06 { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}
.ui.icons-arrows-06:before {padding: 3px; display: block;}

.ui.ui-pointerDown {width: 20px; height: 20px; -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}
.ui.ui-pointerDown:before {content: " "; background: #aaa; width: 14px; height: 3px; position: absolute; top: 8px; left: -1px; transform: rotate(45deg);}
.ui.ui-pointerDown:after {content: " "; background: #aaa; width: 14px; height: 3px; position: absolute; top: 8px; right: -1px; transform: rotate(-45deg);}
.ui.ui-pointerDown.active {-webkit-transform: rotate(180deg); transform: rotate(180deg);}

.ui.ui-circleMinus {border: 1px solid #aaa; border-radius: 100%; width: 20px; height: 20px;}
.ui.ui-circleMinus:before {content: " "; background: #aaa; width: 80%; height: 2px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.ui.ui-circleMinus:after {content: " "; background: #aaa; width: 80%; height: 2px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}

.ui.ui-circleMinus.active:after {-webkit-transform: translate(-50%,-50%) rotate(90deg); transform: translate(-50%,-50%) rotate(90deg);}

.ui.ui-circlePlus {border: 1px solid #aaa; border-radius: 100%; width: 20px; height: 20px;}
.ui.ui-circlePlus:before {content: " "; background: #aaa; width: 80%; height: 2px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.ui.ui-circlePlus:after {content: " "; background: #aaa; width: 80%; height: 2px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%) rotate(90deg); transform: translate(-50%,-50%) rotate(90deg); -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}
.ui.ui-circlePlus.active:after {-webkit-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg);}

.ui.ui-animCheckmark {width: 100%; height: 100%; position: relative;}
.ui.ui-animCheckmark:after {content: " "; border-top: 2px solid #fff; border-right: 2px solid #fff; width: 25%; height: 50%; position: absolute; top: 52.5%; left: 15%;
    -webkit-box-sizing: content-box; box-sizing: content-box; 
    -webkit-transform: scaleX(-1) rotate(135deg); transform: scaleX(-1) rotate(135deg);
    -webkit-transform-origin: left top; transform-origin: left top;
    -webkit-animation: animCheckmark 0.5s ease backwards; animation: animCheckmark 0.5s ease backwards;
}

@keyframes btnSuccessLoader {
    0% {border-color: #fff; border-left-color: #5cb85c; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {border-color: #fff; border-left-color: #5cb85c; -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes animCheckmark {
    0% {width: 0%; height: 0%; opacity: 0;}
    20% {width: 25%; height: 0%; opacity: 1;}
    40% {width: 25%; height: 50%;}
    100% {width: 25%; height: 50%;}
}
.ui-microsoft {width: 100%; height: 100%;}
.ui-microsoft span {width: 100%; height: 50%; display: block; position: relative;}
.ui-microsoft span:before, .ui-microsoft span:after {content: " "; width: 42%; height: 92%; margin: 4%; display: inline-block;}
.ui-microsoft span:nth-child(1):before {background: #f44e24;}
.ui-microsoft span:nth-child(1):after {background: #81b900;}
.ui-microsoft span:nth-child(2):before {background: #01a4ef;}
.ui-microsoft span:nth-child(2):after {background: #ffb902;}

.ui-loader-microsoft {width: 100%; height: 100%; position: relative; -webkit-transform: rotate(260deg); transform: rotate(260deg);}
.ui-loader-microsoft > * {width: 100%; height: 100%; position: absolute;}
.ui-loader-microsoft > *:after {content: " "; background: #fff; border-radius: 100%; width: 10%; height: 10%; position: absolute;}
.ui-loader-microsoft > *:nth-child(1) {-webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation: rotate-1 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite forwards; animation: rotate-1 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite forwards; opacity: 0;}
.ui-loader-microsoft > *:nth-child(2) {-webkit-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-animation: rotate-2 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.062s infinite forwards; animation: rotate-2 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.062s infinite forwards; opacity: 0;}
.ui-loader-microsoft > *:nth-child(3) {-webkit-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-animation: rotate-3 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.125s infinite forwards; animation: rotate-3 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.125s infinite forwards; opacity: 0;}
.ui-loader-microsoft > *:nth-child(4) {-webkit-transform: rotate(-60deg); transform: rotate(-60deg); -webkit-animation: rotate-4 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.187s infinite forwards; animation: rotate-4 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.187s infinite forwards; opacity: 0;}
.ui-loader-microsoft > *:nth-child(5) {-webkit-transform: rotate(-80deg); transform: rotate(-80deg); -webkit-animation: rotate-5 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.25s infinite forwards; animation: rotate-5 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.25s infinite forwards; opacity: 0;}
.ui-loader-microsoft > *:nth-child(6) {-webkit-transform: rotate(-100deg); transform: rotate(-100deg); -webkit-animation: rotate-6 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.312s infinite forwards; animation: rotate-6 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.312s infinite forwards; opacity: 0;}
.ui-loader-microsoft > *:nth-child(7) {-webkit-transform: rotate(-120deg); transform: rotate(-120deg); -webkit-animation: rotate-7 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.375s infinite forwards; animation: rotate-7 1.5s cubic-bezier(0.5, 0, 0.5, 1) 0.375s infinite forwards; opacity: 0;}

@-webkit-keyframes rotate-1 {
    0% {-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1;}
    100% {-webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1;}
}
@-webkit-keyframes rotate-2 {
    0% {-webkit-transform: rotate(-20deg); transform: rotate(-20deg); opacity: 1;}
    100% {-webkit-transform: rotate(340deg); transform: rotate(340deg); opacity: 1;}
}
@-webkit-keyframes rotate-3 {
    0% {-webkit-transform: rotate(-40deg); transform: rotate(-40deg); opacity: 1;}
    100% {-webkit-transform: rotate(320deg); transform: rotate(320deg); opacity: 1;}
}
@-webkit-keyframes rotate-4 {
    0% {-webkit-transform: rotate(-60deg); transform: rotate(-60deg); opacity: 1;}
    100% {-webkit-transform: rotate(300deg); transform: rotate(300deg); opacity: 1;}
}
@-webkit-keyframes rotate-5 {
    0% {-webkit-transform: rotate(-80deg); transform: rotate(-80deg); opacity: 1;}
    100% {-webkit-transform: rotate(280deg); transform: rotate(280deg); opacity: 1;}
}
@-webkit-keyframes rotate-6 {
    0% {-webkit-transform: rotate(-100deg); transform: rotate(-100deg); opacity: 1;}
    100% {-webkit-transform: rotate(260deg); transform: rotate(260deg); opacity: 1;}
}
@-webkit-keyframes rotate-7 {
    0% {-webkit-transform: rotate(-120deg); transform: rotate(-120deg); opacity: 1;}
    100% {-webkit-transform: rotate(240deg); transform: rotate(240deg); opacity: 1;}
}

@keyframes rotate-1 {
    0% {-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1;}
    100% {-webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1;}
}
@keyframes rotate-2 {
    0% {-webkit-transform: rotate(-20deg); transform: rotate(-20deg); opacity: 1;}
    100% {-webkit-transform: rotate(340deg); transform: rotate(340deg); opacity: 1;}
}
@keyframes rotate-3 {
    0% {-webkit-transform: rotate(-40deg); transform: rotate(-40deg); opacity: 1;}
    100% {-webkit-transform: rotate(320deg); transform: rotate(320deg); opacity: 1;}
}
@keyframes rotate-4 {
    0% {-webkit-transform: rotate(-60deg); transform: rotate(-60deg); opacity: 1;}
    100% {-webkit-transform: rotate(300deg); transform: rotate(300deg); opacity: 1;}
}
@keyframes rotate-5 {
    0% {-webkit-transform: rotate(-80deg); transform: rotate(-80deg); opacity: 1;}
    100% {-webkit-transform: rotate(280deg); transform: rotate(280deg); opacity: 1;}
}
@keyframes rotate-6 {
    0% {-webkit-transform: rotate(-100deg); transform: rotate(-100deg); opacity: 1;}
    100% {-webkit-transform: rotate(260deg); transform: rotate(260deg); opacity: 1;}
}
@keyframes rotate-7 {
    0% {-webkit-transform: rotate(-120deg); transform: rotate(-120deg); opacity: 1;}
    100% {-webkit-transform: rotate(240deg); transform: rotate(240deg); opacity: 1;}
}

.ui.ui-size20 {width: 20px; height: 20px;}
.ui.ui-size50 {width: 50px; height: 50px;}

/* fadeInDownBig */
.fadeInDownBig {animation-name: fadeInDownBig;}

@-webkit-keyframes fadeInDownBig {
    from {opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0);}
    to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

@keyframes fadeInDownBig {
    from {opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0);}
    to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}


/* form */
input::-webkit-calendar-picker-indicator{display: none;}
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input::-webkit-clear-button {-webkit-appearance: none; display: none;}
input::-ms-clear {display: none;}
input::-webkit-input-placeholder {font-size: 12px; font-weight: 300;}
input::-moz-placeholder {font-size: 12px; font-weight: 300;}
input:-ms-input-placeholder {font-size: 12px; font-weight: 300;}
input:-moz-placeholder {font-size: 12px; font-weight: 300;}
/*input:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}*/

input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control {line-height: normal; line-height: 16px;}
input[type="password"]::-ms-reveal {display: none;}

label {font-weight: 400;}

.input_wrap {position: relative;}
.input_wrap .input_msg {padding: 2px 4px; font-size: 12px;}

.input_wrap.inputBox_wrap {margin: 0;}
.input_wrap.inputBox_wrap > * {display: inline-block;}
.input_wrap.inputBox_wrap > * > * {margin: 0 5px 0 0; /*display: inline-block; vertical-align: top;*/ float: left;}
.input_wrap.inputBox_wrap > * > *:last-child {margin:0;}
.input_wrap.inputBox_wrap label {font-weight: 400; cursor: pointer;}

.input_msgBox {margin: 0 0 14px; font-size: 12px; color: #a94442;}

.form-control {background-color: #fff; border: 1px solid #ccc; -webkit-border-radius: 4px; border-radius: 4px; width: 100%; height: 34px; padding: 8px; /*font-size: 13px;*/ color: #000; line-height: normal; display: inline-block; vertical-align: middle; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.form-control[disabled].form-white,
.form-control[disabled].form-white:hover,
.form-control[disabled].form-white:focus {background: #eee !important; border: 1px solid #ddd; color: #bbb;}

.form-control.form-gray {background: #eee;}
.form-control.form-gray:hover {background: #e9e9e9}
.form-control.form-gray:focus {background: #e9e9e9 !important;}
.form-control.form-green {background: rgba(91, 195, 162, 1); border-color: rgba(91, 195, 162, 1); color: #fff;}
.form-control.form-green:hover {background: rgba(15, 185, 131, 1);}
.form-control.form-green:focus {background: rgba(15, 185, 131, 1) !important;}

.form-control.style2 {border-width: 0 1px 1px 1px; border-radius: 0; height: inherit; padding: 0 8px 2px 8px; font-size: 16px; vertical-align: top;}
.form-control.style2.border333 {border-color: #333;}
.form-control.style2.noBorder {border: none;}

.input_wrap > *:not(:first-child) > .form-control.style2 {border-width: 0 1px 1px 0;}

.form-group {margin: 0;}
.form-group .help-block, .form-group .with-errors {width: auto; margin: 0; display: block;}

.btn-group {margin: 0;}
.btn-group .btn {padding: 4px 10px 5px;}
.btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle) {padding: 4px 15px 5px;}
.btn-group .btn:not(.btn-sm):not(.btn-hg):not(.btn-xs):not(.btn-lg):not(.bootstrap-touchspin-up):not(.bootstrap-touchspin-down) {height: 30px;}
.btn-group .dropdown-menu {left: auto; right: 0;}
.btn-group .dropdown-menu li {text-align: right;}

/* button.btn */
:focus {outline: none;}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {outline: none;}
.btn.disabled, .btn[disabled] {cursor: pointer; filter: alpha(opacity=100); opacity: 1;}

button.btn {background: transparent; border: 1px solid #ccc; margin: 0; color: #0066b3;}
button.btn:hover {color: #0066b3;}
button.btn:focus {outline: none;}
/*button.btn.active, button.btn:hover {background: transparent; border: 1px solid #258cd1; color: #258cd1;}*/

button.btn.approve {background: #0066b3; border-color: #0066b3; color: #fff;}
button.btn.approve:hover {background: #004880; border-color: #004880;}
button.btn.approve:disabled {background: #004880; border-color: #004880; color: #fff;}
button.btn.approve:disabled:hover {background: #004880; border-color: #004880;}
button.btn.reject {background: #cb2027; border-color: #cb2027; color: #fff;}
button.btn.reject:hover {background: #99181d; border-color: #99181d;}
button.btn.edit {border: #258cd1 1px solid; color: #258cd1;}
button.btn.save {border: #cb2027 1px solid; color: #cb2027;}
button.btn.save > .ui-loader-microsoft > *:after {background: #cb2027;}
button.btn.save:hover {border: #cb2027 1px solid;}
button.btn.transparent {background: transparent; border: none; color: #fff;}
button.btn.transparent:hover {background: transparent; color: #fff;}
button.btn.black {background: #333; border: none; color: #fff;}
button.btn.black:hover {background: #222; color: #fff;}
button.btn.black:disabled {background: #ccc;}
button.btn.black:disabled:hover {background: #ccc;}
button.btn.black.process:disabled {background: #333;}
button.btn.black.process:disabled:hover {background: #333;}
button.btn.white {border-color: #fff; color: #fff;}
button.btn.white:hover {background: #fff; color: #555;}
button.btn.white.nohover {background: transparent; color: #fff;}
button.btn.emerald {background: #5bc3a2; border-color: #5bc3a2; color: #fff;}
button.btn.emerald:hover {background: #0fb983; color: #fff;}
/*button.btn.white[disabled] {border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4); cursor: default;}
button.btn.white[disabled]:hover {background: transparent;}*/
button.btn.submit {border-color: #0066b3; color: #0066b3;}
button.btn.submit:hover {border-color: #004880;color: #004880;}
button.btn.submit:disabled {border-color: #ccc; color: #ccc;}
button.btn.submit:disabled svg path {fill: #ccc;}
button.btn.submit > .ui-loader-microsoft > *:after {background: #0066b3;}
/*button.btn.submit[disabled] {border-color: #aaa; color: #aaa; cursor: default;}*/
button.btn.istafFull {background: #9acd82; border-color: #9acd82; color: #fff;}
button.btn.istafFull:hover {background: #83b66b;}
button.btn.btn_fb {background: #3a548b; border: none; color: #fff;}
button.btn.btn_fb:hover {background: #364F83;}
button.btn.btn_tw {background: #00a2d9; border: none; color: #fff;}
button.btn.btn_tw:hover {background: #008fc0;}
button.btn.btn_ms {background: #fff; border-color: #ccc;}
button.btn.btn_ms:hover {border-color: #999; color: #333}
button.btn.btn_ms span {font-size: 12px; color: #999; display: block;}
button.btn.white.process {cursor: default;}
button.btn.white.process:hover {background: transparent;}
button.btn.success {background: #1ECD97; border-color: #1ECD97; cursor: default;}
button.btn.success:hover {background: #1ECD97; border-color: #1ECD97;}
/*button.btn.success[disabled] {background: #1ECD97; border-color: #1ECD97; cursor: default;}
button.btn.success[disabled]:hover {background: #1ECD97;}*/
button.btn.actively {font-size: 16px; line-height: 30px;}
button.btn.actively.btn_fb {background: #3a548b; cursor: default;}
button.btn.actively.btn_fb:hover {background: #3a548b;}
button.btn.unregister {background-color: #e72a2a; border: none; color: #fff;}
button.btn.unregister:hover {background: #e72a2a;}

button.btn.whiteCircle {border: 2px solid #fff; border-radius: 100px; padding: 6px;}

button.btn[disabled] {cursor: default;}

button.btn.radius100 {border-radius: 100px;}
button.btn.min-wh150, .msgbox_wrap button.btn.min-wh150 {min-width: 150px;}
button.btn.min-wh220, .msgbox_wrap button.btn.min-wh220 {min-width: 220px;}

/* squared_1 checkbox */
.squared_1 {margin: 0; width:26px; height:26px; position:relative; display:flex; align-items:center; justify-content: center; cursor: pointer;}
.squared_1 label {background:transparent; border: 1px solid rgba(51, 51, 51, 0.27); margin: 0; width:18px; height:18px; position:relative; top:0; left:0; cursor:pointer;}
.squared_1 label:hover {border-color: rgba(51, 51, 51, 0.67);}
.squared_1 label:after {content: " "; background:transparent; border: 2px solid rgba(1,1,1,0.54); border-top:none; border-right:none; width:80%; height:44%; position:absolute; top:50%; left:50%; opacity:0; -webkit-transform:rotate(-45deg); transform:translate(-50%, -70%) rotate(-45deg); -webkit-transition:all 0.2s; transition:all 0.2s;}
.squared_1 label:hover::after {opacity: 0.5;}
.squared_1 input[type=checkbox] {visibility: hidden; position: absolute;}
.squared_1 input[type=checkbox]:checked + label {border-color: rgba(51, 51, 51, 1);}
.squared_1 input[type=checkbox]:checked + label:after {opacity: 1;}
.squared_1 input[type=checkbox][readonly]+ label {cursor: default;}

.squared_1.white label {border-color: rgba(255, 255, 255, 0.27)}
.squared_1.white label:hover {border-color: rgba(255, 255, 255, 0.67);}
.squared_1.white label:after {border-color: rgba(255,255,255,1);}
.squared_1.white input[type=checkbox]:checked + label {border-color: rgba(255, 255, 255, 1);}

/* radioBox radio */
.radioBox_1 {width:50%; height:100%; position:relative; display:inline-block; vertical-align: top;}
.radioBox_1 label {max-width: none; margin: 0; font-weight: 400; display: block;}
.radioBox_1 label {background:#fff; border: 1px solid #eee; width:100%; height:100%; text-align: center; position:absolute; top:0; left:0; cursor:pointer;}
.radioBox_1:first-child label {border-radius: 4px 0 0 4px;}
.radioBox_1:last-child label {border-radius: 0 4px 4px 0;}
.radioBox_1 input[type=radio] {margin: 0; visibility:hidden;}
.radioBox_1 input[type=radio]:checked + label {background:#319db5; border-color: #319db5; color: #fff;}

.radioBox_2 {width:20px; height:20px; text-indent: -999px; position:relative; display:inline-block; vertical-align: top;}
.radioBox_2 label {background:transparent; border:rgba(91, 195, 162, 0.5) 2px solid; border-radius:50%; width:100%; height:100%; position:absolute; top:0; left:0; cursor:pointer;}
.radioBox_2 label:after {content:''; background:rgba(91, 195, 162, 0.5); border-radius:50%; width:70%; height:70%; position:absolute; top:50%; left:50%; opacity:0; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); -webkit-transition:all 0.2s; transition:all 0.2s;}
.radioBox_2 label:hover:after {opacity: 0.7;}
.radioBox_2 input[type=radio] {visibility:hidden;}
.radioBox_2 input[type=radio]:checked + label {border:rgba(91, 195, 162, 1) 2px solid;}
.radioBox_2 input[type=radio]:checked + label:after {background:rgba(91, 195, 162, 1); opacity: 1;}
.radioBox_2 input[type=radio]:disabled + label {border:#eee 2px solid; cursor:default;}
.radioBox_2 input[type=radio]:disabled + label:hover:after {opacity: 0;}
.radioBox_2 input[type=radio]:checked:disabled + label:after {background:#eee; opacity: 1;}

.radioBox_2.blue label {border:rgba(0, 102, 179, 0.5) 2px solid;}
.radioBox_2.blue label:after {background:rgba(0, 102, 179, 0.5);}
.radioBox_2.blue input[type=radio]:checked + label {border:rgba(0, 102, 179, 1) 2px solid;}
.radioBox_2.blue input[type=radio]:checked + label:after {background:rgba(0, 102, 179, 1);}

.radioBox_2.emerald label {border:rgba(91, 195, 162, 0.5) 2px solid;}
.radioBox_2.emerald label:after {background:rgba(91, 195, 162, 0.5);}
.radioBox_2.emerald input[type=radio]:checked + label {border:rgba(91, 195, 162, 1) 2px solid;}
.radioBox_2.emerald input[type=radio]:checked + label:after {background:rgba(91, 195, 162, 1);}

.radioBox_3 {width: 100px; line-height: 40px; color: #fff; display: inline-block; position: relative; -webkit-user-select: none; user-select: none;}
.radioBox_3 input[type=radio] {/*display: none;*/ position: absolute; left: -40px; opacity: 0;}
.radioBox_3 input[type=radio]:nth-child(2) {left: -20px;}
.radioBox_3 label {width: 50%; margin: 0; padding: 0; text-align: center; display: inline-block; vertical-align: top; cursor: pointer;}
.radioBox_3 label:after {content: " "; border: 2px solid #0066b3; border-radius: 40px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;}
.radioBox_3 label span {position: relative; z-index: 3; display: inline-block; min-width: 1.5em; opacity: 1; pointer-events: none;}
.radioBox_3 .switch_label_left span {padding: 0 0 0 10px;}
.radioBox_3 .switch_label_right span {padding: 0 10px 0 0;}

.radioBox_3 .switch_label_left:before {content: " "; background: #0066b3; border-radius: 40px; width: 50%; position: absolute; z-index: 2; top: 6px; bottom: 6px; left: 6px; pointer-events: none; -webkit-transition: left .2s ease-in-out, background .2s ease-in-out; transition: left .2s ease-in-out, background .2s ease-in-out;}

.radioBox_3 .switch_radio_right:checked ~ .switch_label_left:before {left: calc(50% - 6px); background: #0066b3;}
.radioBox_3 .switch_radio_left:checked ~ .switch_label_right:after, .radioBox_3 .switch_radio_right:checked ~ .switch_label_left:after {z-index: 1;}
.radioBox_3 .switch_radio_left:checked ~ .switch_label_right span, .radioBox_3 .switch_radio_right:checked ~ .switch_label_left span {opacity: 0;}

.radioBox_3 input[type=radio]:disabled ~ label {cursor: default;}
.radioBox_3 input[type=radio]:disabled ~ label:before {/*background: rgba(255, 255, 255, 0.4) !important;*/}
.radioBox_3 input[type=radio]:disabled ~ label:after {border-color: rgba(0, 102, 179, 0.2) !important;}

.radioBox_4 {width:20px; height:20px; text-indent: -999px; position:relative; display:inline-block; vertical-align: top;}
.radioBox_4 label {background:transparent; border: 1px solid rgba(51, 51, 51, 0.27); margin: 0; width:18px; height:18px; position:absolute; top:50%; left:0; cursor:pointer; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.radioBox_4 label:hover {border-color: rgba(51, 51, 51, 0.67);}
.radioBox_4 label:after {content: " "; background:transparent; border: 2px solid rgba(1,1,1,0.54); border-top:none; border-right:none; width:80%; height:44%; position:absolute; top:50%; left:50%; opacity:0; -webkit-transform:rotate(-45deg); transform:translate(-50%, -70%) rotate(-45deg); -webkit-transition:all 0.2s; transition:all 0.2s;}
.radioBox_4 label:hover:after {opacity: 0.2;}
.radioBox_4 input[type=radio] {visibility: hidden;}
.radioBox_4 input[type=radio]:checked + label {border-color: rgba(51, 51, 51, 1);}
.radioBox_4 input[type=radio]:checked + label:after {opacity: 1;}
.radioBox_4 input[type=radio][readonly] + label {cursor: default;}
.radioBox_4 input[type=radio][readonly] + label:hover:after {opacity: 0;}
.radioBox_4 input[type=radio][readonly]:checked + label:after {opacity: 1;}

.radioBox_4 input[type=checkbox] {visibility: hidden;}
.radioBox_4 input[type=checkbox]:checked + label {border-color: rgba(51, 51, 51, 1);}
.radioBox_4 input[type=checkbox]:checked + label:after {opacity: 1;}
.radioBox_4 input[type=checkbox][readonly] + label {cursor: default;}
.radioBox_4 input[type=checkbox][readonly] + label:hover:after {opacity: 0;}

.radioBox_4.color_333 label, .radioBox_4.color_333 label:after {border-color: #333;}
.radioBox_4.blue label {border-color: #333;}
.radioBox_4.blue label:after {border-color: #0066b3;}
.radioBox_4.blue2 label {border-width: 2px; border-color: #0066b3; border-radius: 4px;}
.radioBox_4.blue2 label:after {border-color: #fff;}
.radioBox_4.blue2 input[type=checkbox]:checked + label {background: #0066b3; border-color: #0066b3;}
.radioBox_4.persian-green label {border-width: 2px; border-color: #12a89d; border-radius: 4px;}
.radioBox_4.persian-green label:after {border-color: #fff;}
.radioBox_4.persian-green input[type=checkbox]:checked + label {background: #12a89d; border-color: #12a89d;}
.radioBox_4.orchid label {border-width: 2px; border-color: #853CB7; border-radius: 4px;}
.radioBox_4.orchid label:after {border-color: #fff;}
.radioBox_4.orchid input[type=checkbox]:checked + label {background: #853CB7; border-color: #853CB7;}

.radioBox_4 input[readonly] + label:after, .radioBox_4.blue input[readonly] + label:after {border-color: #333;}

.radioBox_5 {border-radius: 3px; padding: 5px 10px; cursor: pointer; user-select: none;}
/*.radioBox_5:hover {background-color: rgba(242, 242, 242, 0.5);}*/
.radioBox_5 label {width: 25px; height: 25px; margin: auto; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; transform: translate3d(0, 0, 0);}
/*.radioBox_5 label:before {content: " "; background: rgba(34,50,84,0.03); border-radius: 50%; width: 48px; height: 48px; position: absolute; top: -15px; left: -15px; opacity: 0; transition: opacity 0.2s ease;}*/
.radioBox_5 label svg {position: relative; z-index: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: #c8ccd4; stroke-width: 2; transform: translate3d(0, 0, 0); transition: all 0.2s ease;}
.radioBox_5 label svg path {stroke-dasharray: 86; stroke-dashoffset: 0;}
.radioBox_5 label svg polyline {stroke-dasharray: 33; stroke-dashoffset: -33;}
/*.radioBox_5 label:hover:before {opacity: 1;}*/
.radioBox_5:hover label svg {stroke: #0f74de;}
/*.radioBox_5 label:hover svg {stroke: #0f74de;}*/
.radioBox_5 input[type=checkbox] {display: none;}
.radioBox_5 input[type=checkbox]:checked + label svg {stroke: #0f74de;}
.radioBox_5 input[type=checkbox]:checked + label svg path {stroke-dashoffset: 86; transition: all 0.3s linear;}
.radioBox_5 input[type=checkbox]:checked + label svg polyline {stroke-dashoffset: -69; transition: all 0.2s linear; transition-delay: 0.15s;}


.opBox {width: 20px; height: 20px; text-indent: -999px; position:relative; display:inline-block; vertical-align: top;}
.opBox input {opacity: 0;}
.opBox label {background:transparent; border: 1px solid rgba(51, 51, 51, 0.27); width:100%; height:100%; margin: 0; position:absolute; top:0; left:0; cursor:pointer;}

.opBox label:after {content: " "; background:transparent; position:absolute; top:50%; left:50%; opacity:0; -webkit-transition:all 0.2s; transition:all 0.2s;}
.opBox input:focus + label {border-color: #66afe9; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}

.opBox input:checked + label:after {opacity: 1;}

.opBox.style1 label {border-radius: 4px;}
.opBox.style1 label:after {
  border: 2px solid rgba(1,1,1,0.54); border-top:none; border-right:none; width:80%; height:44%;
  -webkit-transform:translate(-50%, -70%) rotate(-45deg); transform:translate(-50%, -70%) rotate(-45deg);
}

.opBox.style1.blue label:after {border-color: #0066b3;}

.fileBox_1 {width: 100%; height: 100%; position: relative;}
.fileBox_1 label {background: transparent; margin: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0}
.fileBox_1 input[type=file] {visibility: hidden;}

/* form_style */
.form_style {}
.form_style > *:not(:first-child) {margin: 16px 0 0;}
.form_style > .last-element {margin: 32px 0 0;}

/* formGrid */
.formGrid.vertical {}
.formGrid.vertical .row {margin: 0 -5px; padding: 10px 0 0;}
.formGrid.vertical .row:first-child {padding: 0;}
.formGrid.vertical .row > * {padding: 0 5px;}
.formGrid.vertical label {margin: 0; padding: 0 5px 5px; display: block;}
.formGrid.vertical label i {position: absolute; top: 30px !important; left: 11px;}
.formGrid.vertical .row label i {position: absolute; top: 30px !important; left: 16px;}
.formGrid.vertical input[type=date] {padding: 8px 0px 8px 26px;}

ul.list-decimal > li {margin: 0 0 0 1em; list-style: decimal;}
ul.list-disc > li {margin: 0 0 0 1.25em; list-style: disc;}
ul.lower-alpha > li {margin: 0 0 0 1em; list-style: lower-alpha;}
ul.lower-roman > li {margin: 0 0 0 1em; list-style: lower-roman;}
ul.data-list > li {margin: 0 0 0 1em;}
ul.data-list > li:before {content: attr(data-list); display: inline-block;}

/* list-calc */
ul.list-calc > li {padding: 5px 0; display: flex; justify-content: space-between;}
ul.list-calc > li.topLine {border-top: 1px solid #333;}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {min-height:inherit; padding: 0; float: none;}

.col-xs-3-5 {width: 29.16666666%;}

/* table */
table.style1 {border: 1px solid #ccc; border-collapse: collapse; border-spacing: 0;width: 100%;}
table.style1 tr {border-bottom: 1px solid #ddd;}
table.style1 tr th, table.style1 tr td {padding: 15px; position: relative; vertical-align: top;}
table.style1 tr th.v-align-Mid, table.style1 tr td.v-align-Mid {vertical-align: middle;}

table.style1.td-border th, table.style1.td-border tr td {border-right: 1px solid #ddd;}
table.style1.tr-hover tr:hover {background: #ccc;}
table.style1.tr-evenBg tr:nth-child(even) {background: #eee;}
table.style1.td-countNumber {counter-reset: colNumber;}
table.style1.td-countNumber td {counter-increment: colNumber;}
table.style1.td-countNumber td:before {content: counter(colNumber) '.'; width: 20px; display: block; float: left;}
table.style1.td-countNumber td > * {width: calc(100% - 20px); float: left;}

table.style1.td-countNumber td.excludeCounter {counter-increment: none;}
table.style1.td-countNumber td.excludeDisplay:before {content: " ";}
table.style1.td-countNumber .spCounter {counter-increment: colNumber;}
table.style1.td-countNumber .spDisplay:before {content: counter(colNumber) '.'; width: 20px; display: block; float: left;}
table.style1.td-countNumber .spDisplay > * {width: calc(100% - 20px); float: left;}

table.style1.border333, table.style1.border333 tr, table.style1.td-border.border333 th, table.style1.td-border.border333 tr td {border-color: #333;}

/* sideGrid */
.sideGrid {position:relative;}
.sideGrid > * {float:left;}
.sideGrid > *.pull_right {float:right;}
.sideGrid:after {content:" "; display:block; clear:both;}

/* inlineGrid */
.inlineGrid {position:relative;}
.inlineGrid > * {display: inline;}

/* inline-bGrid */
.inline-bGrid {position:relative;}
.inline-bGrid > * {display: inline-block; vertical-align: top;}
.inline-bGrid.v-align-Top > * {vertical-align: top;}
.inline-bGrid.v-align-Mid > * {vertical-align: middle;}
.inline-bGrid.v-align-Bot > * {vertical-align: bottom;}

/* flexGrid */
.flexGrid {display: -webkit-flex; display: flex;}
.flexGrid.fdc {flex-direction: column;}
/*.flexGrid > * {position: relative; overflow: hidden;}*/
.flexGrid > .grow1 {flex-grow: 1;}
.flexGrid > .flex1 {flex: 1;}
.flexGrid.ac {align-items: center;}
.flexGrid.jc {justify-content: center;}
.flexGrid.jsb {justify-content: space-between;}
.flexGrid.gap_2rem {grid-gap: 2rem}

.sideGrid > .col:not(:first-child), .inline-bGrid > .col:not(:first-child) {margin: 0 0 0 15px;}
.sideGrid > .col.c2:not(:first-child), .inline-bGrid > .col.c2:not(:first-child) {margin: 0 0 0 30px;}

.sideGrid > .col.col-xs-3-5, .inline-bGrid > .col.col-xs-3-5 {width: calc(29.16666666% - 15px);}

/* inTextArea */
.inText_wrap {background: #333; padding: 5px;}
.inText_wrap > .detail {background: #fff; height: 400px; padding: 10px; position: relative;}

/* positCenter */
.position-C-C {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.position-C-A {position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.position-A-C {position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}

/* global */
.clear { clear: both;}
.clear:after {content:" "; display:block; clear:both;}

.dis-block {display: block !important;;}
.dis-inline-b {display: inline-block;}
.dis-none {display: none;}
.v-align-Top {vertical-align: top;}
.v-align-Mid {vertical-align: middle;}
.v-align-Bot {vertical-align: bottom;}
.textLeft {text-align: left;}
.textCenter {text-align: center;}
.textRight {text-align: right;}
.pull_left {float: left;}
.pull_right {float: right;}

.color_fff {color: #fff !important;}
.color_333 {color: #333;}
.color_theme {color: #0066b3;}
.color_red {color: #cb2027;}
.txt_12 {font-size: 12px;}
.txt_16 {font-size: 16px;}
.txt_18 {font-size: 18px;}
.txt_20 {font-size: 20px;}
.txt_22 {font-size: 22px;}
.txt_24 {font-size: 24px;}
.italic {font-style: italic;}
.bold {font-weight: bold;}
.thin {font-weight: 300;}
.lineheightNormal {line-height: normal;}
.lineheight18 {line-height: 18px;}
.lineheight24 {line-height: 24px;}
.w20 {width: 20px;}
.w26 {width: 26px;}
.w28 {width: 28px;}
.w40 {width: 40px;}
.w75 {width: 75px;}
.w83 {width: 83px;}
.w88 {width: 88px;}
.w90 {width: 90px;}
.w93 {width: 93px;}
.w98 {width: 98px;}
.w100 {width: 100px;}
.w120 {width: 120px;}
.w130 {width: 130px;}
.w150 {width: 150px;}
.w200 {width: 200px;}
.w220 {width: 220px !important;}
.w300 {width: 300px;}
.w350 {width: 350px;}
.w400 {width: 400px;}
.w800 {width: 800px !important;}
.w2c {width: 2%;}
.w5c {width: 5%;}
.w7c {width: 7%;}
.w10c {width: 10%;}
.w20c {width: 20%;}
.w30c {width: 30%;}
.w60c {width: 60%}
.w70c {width: 70%}
.w100c {width: 100% !important;}
.w100c-20-padR5 {width: calc(100% - 20px); padding: 0 0 0 5px;}
.w100c-20-padR10 {width: calc(100% - 20px); padding: 0 0 0 10px;}
.w100c-100-padR15 {width: calc(100% - 100px); padding: 0 0 0 15px;}
.h24 {height: 24px;}
.margin_0-5-0-0 {margin: 0 5px 0 0;}
.margin_0-0-0-5 {margin: 0 0 0 5px;}
.margin_0-0-10-0 {margin: 0 0 10px 0;}
.margin_0-10-0-0 {margin: 0 10px 0 0;}
.margin_0-0-0-10 {margin: 0 0 0 10px;}
.margin_0-0-15-0 {margin: 0 0 15px;}
.margin_0-0-30-0 {margin: 0 0 30px;}
.margin_30-0-0-0 {margin: 30px 0 0;}
.margin_32-0-32-0 {margin: 32px 0;}

.padding_5-5-5-5 {padding: 5px;}
.padding_0-0-0-20 {padding: 0 0 0 20px;}
.padding_15-15-15-15 {padding: 15px;}
.padding_15-0-0-0 {padding: 15px 0 0;}
.padding_30-0-0-0 {padding: 30px 0 0;}

.bgc_gray {background-color: #dce1e4;}

.unShiftSelect {-webkit-user-select:none; user-select:none}
.disableArea {background: rgba(0,0,0,0.6); width: 100%; height: 100%; font-size: 24px; font-weight: 700; color: #fff; text-shadow: 2px 2px rgba(0,0,0,0.3); text-align: center;position: absolute; top: 0; left: 0; z-index: 20;}
.disableArea > * {width: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
[data-exTab], [data-targetToggle] {cursor: pointer;}
[data-action="error"] {font-size: 12px; color: #a94442;}

/* Istaff global */
.staffImg {border-radius: 100%; width: 40px; height: 40px; overflow: hidden;}
.staffImg img {width: 100%;}
.staffName {font-weight: 700;}
.staffName > *:after {content: " / ";}
.staffName > *:last-child:after {content: " ";}
.staffName > *:nth-child(n+4) {width: 10px; display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.staffName > *:nth-child(n+5) {width: 0; visibility: hidden; opacity: 0;}
.staffEmail {}
.staffPosition {font-weight: 700;}
.staffPosition > span {font-weight: 300; color: #aaa;}
.eventType {background: #ccc; border-radius: 3px; text-align: center; color: #fff; display: inline-block;}
.eventType.LA {background: #62bdf3;}
.eventType.LAC {background: #ff0080;}
.eventType.PC {background: #e4751e;}
.eventType.LW {background: #36c78b;}
.eventType.LWC {background: #ff0080;}
.eventType.OT {background: #853CB7;}
.eventType.OTC {background: #ff0080;}
.eventDay {}
.eventDay > span {}
.eventPeriod {}
.eventPeriod > span {margin: 0 0 0 4px;}
.eventPeriod > span.hour {}
.balanceDay {}
.excludeDay {/*color: #aaa;*/}
.unit {}
.unit > span {font-size: 12px;}
.remark {color: #aaa;}
.remark > span {font-weight: 700; color: #555;}
.actionDay {color: #aaa;}
.requestCounting {background: #f15f60; border-radius: 14px; padding: 1px 4px; font-size: 12px; font-weight: 300; color: #fff; text-align: right; line-height: 1; z-index: 1;}

/* header */
.topbar {background: #fff; /*border-bottom: 1px solid rgba(0,0,0,0.05);*/ width: 100%; padding: 0 30px; position: fixed; top: 0; left: 0; /*z-index: 200;*/ z-index: 2000;}
.topbar > * {float: left;}
.topbar .logo_wrap {width: 170px; line-height: 50px;}
.topbar nav {width: calc(100% - 170px); color: #aaa;}
.topbar nav a {padding: 3px 0; color: #aaa; cursor: pointer;}
.topbar nav a:hover, .topbar nav > ul > li.active a {color: #1d2088;}
.topbar nav > ul {float: left;}
.topbar nav > ul.pull_right {float: right;}
.topbar nav > ul:after {content: " "; display:block; clear:both;}
.topbar nav > ul > li {float: left; line-height: 1; }
.topbar nav > ul:nth-child(1) {}
.topbar nav > ul:nth-child(1) > li {position: relative}
.topbar nav > ul:nth-child(1) > li a {padding: 18px 15px; display: block;}
.topbar nav > ul:nth-child(1) > li a:focus {text-decoration: none;}
.topbar nav > ul:nth-child(1) > li .requestCounting {position: absolute; top: 5px; right: 2px;}

.topbar nav > ul:nth-child(2) {padding: 0; float: right;}
.topbar nav > ul:nth-child(2) > li .user_wrap > .dropdown-toggle {padding: 10px;}
.topbar nav > ul:nth-child(2) > li:hover {}
.topbar nav > ul:nth-child(2) > li .ui {padding: 15px; color: #555; cursor: pointer;}
.topbar nav > ul:nth-child(2) > li .ui.hover:hover {color: #333;}
.topbar nav > ul:nth-child(2) > li .ui.ui-changeRole {width: 50px; height: 50px; padding: 13px;}
.topbar nav > ul:nth-child(2) > li .ui.ui-changeRole svg > * {fill: #bbb;}
.topbar nav > ul:nth-child(2) > li .ui.ui-changeRole.active svg > * {fill: #555;}
.topbar nav i {font-size: 20px; vertical-align: middle;}


/* accordion */
.accordion {}
.accordion .adnControl {cursor: pointer;}
.accordion .section {}
.accordion .section .pane {height: 0; visibility: hidden; opacity: 0; -webkit-transition: all 0.25s linear; transition: all 0.25s linear;}

.accordion .section.active {}
.accordion .section.active .pane {height: auto; visibility: visible; opacity: 1;}
.accordion .section.active .ui.ui-circlePlus:after {-webkit-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg);}
.accordion .section.active .ui.ui-pointerDown {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
.accordion .section.active .ui.icons-arrows-06 {-webkit-transform: rotate(180deg); transform: rotate(180deg);}

/* dropdown */
.dropdown {position: relative;}
.dropdown-toggle {cursor: pointer;}

/*
.dropdown-menu {top: 120%;}
.dropdown-menu:before {content: " "; border-bottom: 7px solid #ccc; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0); display: inline-block; position: absolute; top: -7px; left: 16px;}
.dropdown-menu:after {content: " "; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); display: inline-block; position: absolute; top: -6px; left: 17px;}
.dropdown-menu > li > a {cursor: pointer;}
.dropdown-menu > li > a:hover {background: #222; color: #fff;}

.dropdown-menu.black {background: #222;}
.dropdown-menu.black:before {border-bottom: 7px solid #222;}
.dropdown-menu.black:after {border-bottom: 6px solid #222;}
.dropdown-menu.black > li > a {color: #bbb;}
.dropdown-menu.black > li > a:hover {background: #2b2e33; color: #fff;}

.dropdown-menu.right {left: auto; right: 0;}
.dropdown-menu.right:before {left: auto; right: 16px;}
.dropdown-menu.right:after {left: auto; right: 17px;}
*/

/*
.dropdown-menu:before {content: " "; border-bottom: 7px solid #ccc; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0); display: inline-block; position: absolute; top: -7px; left: 16px;}
.dropdown-menu:after {content: " "; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); display: inline-block; position: absolute; top: -6px; left: 17px;}
*/
.dropdown-menu {background: none; border: none; box-shadow: none; margin: 0; padding: 12px 0 0;}

.dropdown-menu .dropdown-wrap {background: #fff; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.4); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); padding: 5px;  position: relative;}
.dropdown-menu .dropdown-wrap:before {content: " "; border-bottom: 7px solid #ccc; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0); position: absolute; top: -7px; left: 16px;}
.dropdown-menu .dropdown-wrap:after {content: " "; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); position: absolute; top: -6px; left: 17px;}

.dropdown-menu.bottomRight {padding: 12px 0 0; left: auto; right: 0;}
.dropdown-menu.bottomRight .dropdown-wrap:before {left: auto; right: 16px;}
.dropdown-menu.bottomRight .dropdown-wrap:after {left: auto; right: 17px;}

.dropdown-menu.black .dropdown-wrap {background-color: #222; border-color: #222;}
.dropdown-menu.black .dropdown-wrap:before {border-bottom-color: #222;}
.dropdown-menu.black .dropdown-wrap:after {border-bottom-color: #222;}

/* dropdown-hover */
.dropdown-hover {position: relative;}
.dropdown-hover .dropdown-hover-contain {min-height: 26px; position: absolute; top: 0; left: 24px; z-index: 1000; display: none;}
.dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap {background: #fff; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.4); box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.4); min-height: 26px; padding: 7px 10px; line-height: 1.2; position: relative;}
.dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap:before {content: " "; border-top: 8px solid rgba(0, 0, 0, 0); border-bottom: 8px solid rgba(0, 0, 0, 0); border-right: 8px solid #ccc; position: absolute; top: 4px; left: -8px; z-index: 1;}
.dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap:after {content: " "; border-top: 6px solid rgba(0, 0, 0, 0); border-bottom: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid #fff; position: absolute; top: 6px; left: -6px; z-index: 2;}
/*.dropdown-hover .dropdown-hover-contain > * {white-space: nowrap;}*/
.dropdown-hover:hover .dropdown-hover-contain {display: block;}
.dropdown-hover .dropdown-hover-contain.dis-block {display: block;}

.dropdown-hover.bottomRight .dropdown-hover-contain {padding: 40px 0 0; left: auto; right: 0;}
.dropdown-hover.bottomRight .dropdown-hover-contain .dropdown-hover-wrap:before {border-bottom: 8px solid #ccc; border-left: 8px solid rgba(0, 0, 0, 0); border-right: 8px solid rgba(0, 0, 0, 0); top: -17px; left: auto; right: 30px;}
.dropdown-hover.bottomRight .dropdown-hover-contain .dropdown-hover-wrap:after {border-bottom: 8px solid #fff; border-left: 8px solid rgba(0, 0, 0, 0); border-right: 8px solid rgba(0, 0, 0, 0); top: -14px; left: auto; right: 30px;}

.dropdown-hover.topLeft .dropdown-hover-contain {padding: 0 0 45px; top: auto; bottom: 0; left: 0;}
.dropdown-hover.topLeft .dropdown-hover-contain.no-hover-area {margin: 0 0 45px; padding: 0;}
.dropdown-hover.topLeft .dropdown-hover-contain .dropdown-hover-wrap:before {border-top: 8px solid #ccc; border-left: 8px solid rgba(0, 0, 0, 0); border-right: 8px solid rgba(0, 0, 0, 0); top: auto; bottom: -17px; left: 7px;}
.dropdown-hover.topLeft .dropdown-hover-contain .dropdown-hover-wrap:after {border-top: 8px solid #fff; border-left: 8px solid rgba(0, 0, 0, 0); border-right: 8px solid rgba(0, 0, 0, 0); top: auto; bottom: -14px; left: 7px;}

.dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap.blue_theme {background: #0066b3; border-color: #0066b3; color: #fff;}
.dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap.blue_theme:before,
.dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap.blue_theme:after {border-top-color: #0066b3;}

/* loading */
.loading_wrap {background: rgba(0,0,0,0.0); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2500;}

/* loadingBox */
.loadingBox {background: rgba(0,0,0,0.7); border-radius: 15px; width: 150px; height: 150px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 99999; 
    -webkit-animation-duration: 0.25s; animation-duration: 0.25s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0.15s; animation-delay: 0.15s;
}
.loadingBox > * {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

.loader-overlay {
    -moz-opacity: 1; -moz-perspective: 10000; -moz-perspective: 10000px; -moz-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    -webkit-opacity: 1; -webkit-perspective: 10000; -webkit-perspective: 10000px; -webkit-transition: all 800ms ease-in-out;
    background: #2D2E2F; overflow: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; opacity: 1; filter: alpha(opacity=100);
    perspective: 10000; perspective: 10000px; transition: all 800ms ease-in-out; z-index: 10000; zoom: 1;
}
.loader-overlay .loader-inner {
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
}
.loader-overlay.loaded {-moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); opacity: 0; visibility: hidden; zoom: 1;}
.spinner {
    -moz-user-select: none; -ms-user-select: none; -o-user-select: none; -webkit-user-select: none;
    margin: auto; text-align: center; user-select: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.spinner .bounce1 {margin-right: 1em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.spinner .bounce2 {margin-right: 1em; -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
.spinner > div {
    -moz-border-radius: 100%; -webkit-animation-fill-mode: both; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; -webkit-border-radius: 100%;
    animation-fill-mode: both; animation: bouncedelay 1.4s infinite ease-in-out;
    background-color: #ffffff; border-radius: 100%; width: 1em; height: 1em; display: inline-block; float: left;
}
@-webkit-keyframes bouncedelay {
    0%, 80%, 100% {-webkit-transform: scale(0);}
    40% {-webkit-transform: scale(1);}
}
@keyframes bouncedelay {
    0%, 80%, 100% {-webkit-transform: scale(0); transform: scale(0);}
    40% {-webkit-transform: scale(1); transform: scale(1);}
}

/* requestDataTable */
.requestDataTable li {line-height: 2;}
.requestDataTable li > * {display: inline-block; vertical-align: top;}
.requestDataTable li > *:nth-child(1) {width: 90px;}
.requestDataTable li > *:nth-child(2) {width: calc(100% - 90px);}
.requestDataTable li .title.small {margin: 0 10px 0 20px; font-size: 100%;}
.requestDataTable li span:not(:first-child) {margin: 0 0 0 10px;}
.requestDataTable li .bold {font-size: 114.2857%; font-weight: 700;}
/*.requestDataTable li > *:nth-child(3) {width: 50%;}*/

/* requestDataSingle */
.requestDataSingle > * {display: inline-block; vertical-align: top;}
.requestDataSingle > *:nth-child(1) {width: 20%; font-weight: 700;}
.requestDataSingle > *:nth-child(2) {width: 80%;}

/* requestFormTable */
.requestFormTable {border-collapse: collapse; width: 100%; padding: 37px 0 0; display: table; position: relative;}
.requestFormTable li {line-height: 36px;}
.requestFormTable li {display: table-row;}
.requestFormTable li > * {padding: 0 15px; display: table-cell; vertical-align: top;}

.requestFormTable li.head {background: #333; color: #fff;}
.requestFormTable li.head {background: #333; color: #fff;}

/* tableList */
.tableList {position: relative;}
.tableList .top {border-bottom: 1px solid #ccc; font-weight: 700;}
.tableList ul {height: calc(47px * 7); position: relative;}
.tableList ul li {font-size: 12px; line-height: 1.3; position: relative;}
.tableList ul li > * {}
.tableList ul li:nth-of-type(even) {background-color: #f3f3f3;}
.tableList .hour {display: block;}
.tableList .top > *, .tableList ul li > * {width: calc(100% / 7); padding: 8px; display: inline-block; vertical-align: middle;}
.tableList .top > *:first-child, .tableList ul li > *:first-child {padding: 16px 8px 16px 30px;}
.tableList .top > *:last-child, .tableList ul li > *:last-child {padding: 16px 30px 16px 8px;}
.tableList .top i {font-size: 12px; position: relative; left: 7px;}
.tableList .top i.fa-sort {color: #ccc;}

.tableList ul li:before {content: " "; background: #fff; width: 4px; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; /*-webkit-transition: all 0.2s linear; transition: all 0.2s linear;*/ -webkit-transform: scale(0); transform: scale(0);}
.tableList ul li:hover {background: #cff7e7;}
.tableList ul li:hover:before {background: #36c78b; -webkit-transform: scale(1); transform: scale(1);}
.tableList ul li.active {background: #cff7e7;}
.tableList ul li.active:before {background: #36c78b; -webkit-transform: scale(1); transform: scale(1);}

/* spbox2_wrap */
.spbox2_wrap {border: 1px solid #ddd; border-radius: 4px; min-width: 220px;}
.spbox2_wrap > ul {border-bottom: 1px solid #ddd; padding: 5px 10px; white-space:nowrap; position: relative;}
.spbox2_wrap > ul:last-child {border-bottom: none;}
.spbox2_wrap > ul > li {line-height: 2;}
.spbox2_wrap > ul > li > * {width: 50%; display: inline-block; vertical-align: top;}
.spbox2_wrap > ul > li > *:nth-child(1) {width: 40%; font-weight: 700; position: relative; top: 1px;}
.spbox2_wrap > ul > li > *:nth-child(2) {width: 60%; text-align: right;}
.spbox2_wrap li .bold {font-size: 114.2857%; font-weight: 700; line-height: 28px;}
.spbox2_wrap.checkout li:last-child {border-top: 1px solid #ddd; border-bottom: 1px solid #fff;}
.spbox2_wrap .dropdown-hover {margin: 0 0 0 5px; display: inline;}
.spbox2_wrap .dropdown-hover .ui {cursor: pointer;}
.spbox2_wrap .dropdown-hover .dropdown-hover-contain {font-size: 12px; font-weight: 500; top: -4px; left: 26px;}
.spbox2_wrap *:hover > .dropdown-hover .dropdown-hover-contain {display: block;}

/****************************** Fullscreen Menu ******************************/
.fsNav_container {/*background: #CC0001; border-radius: 3px;*/ /*position:fixed;*/ position:relative; /*display:inline-block; vertical-align:middle; width: 34px; height: 34px;*/ cursor: pointer; z-index: 1;}
.fsNav_container:hover {/*opacity: 0.7;*/}
.fsNav_container.active {/*background:transparent; border: #fff 1px solid; border-radius: 50px;*/}
.fsNav_container.active .top {
    -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
    transform: translateY(8px) translateX(0) rotate(45deg);
    background: #FFF;
}
.fsNav_container.active .middle {opacity: 0; background: #FFF;}
.fsNav_container.active .bottom {
    -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
    transform: translateY(-8px) translateX(0) rotate(-45deg);
    background: #FFF;
}
.fsNav_container span {background: #fff; border: none; width: 100%; height: 1px; position: absolute; top: 8px; left: 0px; right: 0px; -webkit-transition: all .35s ease; transition: all .35s ease; cursor: pointer;}
.fsNav_container span:nth-of-type(2) {top: 16px;}
.fsNav_container span:nth-of-type(3) {top: 24px;}

.fsNav_overlay {
    position: fixed;
    /*background: #fff;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
    z-index:100;
}
.fsNav_overlay.open {
    opacity: 1;
    visibility: visible;
    height: 100%;
    /*-webkit-animation: overlayOpen .35s; animation: overlayOpen .35s;*/
}

.fsNav_overlay .overlay-msgbox {background:#fff; min-width: 100px; padding:0; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); z-index:102;
    -webkit-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4); box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4);}
.fsNav_overlay .overlay-msgbox.borderRadius {border: 10px solid #000; border-radius: 10px;}
.fsNav_overlay .overlay-msgbox.borderRadius.orange {border-color: #f7941e;}

.fsNav_overlay .overlay-bg {background: #fff; width:100%; height:100%; position:absolute; top:0%; z-index:101;}
.fsNav_overlay.black .overlay-bg {background:rgba(0,0,0,0.6);}

.fsNav_overlay .overlay-close {background: #9acd82; border: #fff 2px solid; border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.3) -2px 2px 10px 2px; position: absolute; top: 0; right: 0; -webkit-transform: translate(50%,-50%); transform: translate(50%,-50%);}
.fsNav_overlay .overlay-close .ui {width: 34px; height: 34px;}

#overlay-LockedScreen.fsNav_overlay {z-index: 1300;}
#overlay-msgbox.fsNav_overlay {z-index: 1200;}
#overlay-companyAnnouncement.fsNav_overlay {z-index: 1100;}
#overlay-setting.fsNav_overlay {z-index: 110;}

.fsNav_overlay.scroll {overflow-y: auto;}
.fsNav_overlay.scroll .overlay-msgbox {margin: 30px 0; top: 50px; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.fsNav_overlay.scroll .overlay-bg {position: fixed;}

@-webkit-keyframes overlayOpen {
    0% {height: 0%;}
    100% {height: 100%;}
}

@keyframes overlayOpen {
    0% {height: 0%;}
    100% {height: 100%;}
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-60px, 0, 0);
        transform: translate3d(-60px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-60px, 0, 0);
        transform: translate3d(-60px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@-webkit-keyframes loginDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes loginDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@-webkit-keyframes loginOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-60px, -50%, 0);
        transform: translate3d(-60px, -50%, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, -50%, 0);
        transform: translate3d(2000px, -50%, 0);
    }
}

@keyframes loginOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-60px, -50%, 0);
        transform: translate3d(-60px, -50%, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, -50%, 0);
        transform: translate3d(2000px, -50%, 0);
    }
}

/* pdfViewer */
.PdfContainer .pdfViewer .page {border: none; margin: 10px auto;}

/* select2 */
.select2 {min-width: auto; width: 100% !important; vertical-align: top; z-index: 50;}
.select2-container--default .select2-selection--single {border: 1px solid #ccc; border-radius: 4px; height: 34px}
.select2-container--default .select2-selection--single .select2-selection__clear {font-weight: 400;}
.select2-container .select2-selection--single .select2-selection__rendered {padding: 0 20px 0 12px; color: #000; line-height: 32px;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 34px;}
.table-hover > tbody > tr:hover > td .select2-container--default .select2-selection--single {border: 1px solid #fff;}
.select2-container--default .select2-selection--single .select2-selection__placeholder {font-size: 13px; color: #b5b5b5;}
.select2-container--default .select2-results > .select2-results__options {max-height: calc(34px * 6);}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option[aria-selected=true] {background-color: #CFDAE0; color: inherit;}
.select2-results__option {padding: 0 12px; line-height:34px;}
.select2-container--open.select2-container--default .select2-dropdown--below {border: 1px solid #ccc; margin-top:0; padding: 0;}
.select2-container--open.select2-container--default .select2-selection__placeholder {color:transparent;}

/* select2 style2 */
[class*="select2-style2"] .select2 {min-width: auto; width: 100% !important; vertical-align: top; z-index: 50;}
[class*="select2-style2"] .select2-container--default.select2-container--open .select2-selection--single {border: 1px solid #ccc; border-radius: 4px; height: 34px}
[class*="select2-style2"] .select2-container .select2-selection--single .select2-selection__rendered {padding: 0 20px 0 12px; color: #000; line-height: 32px;}
[class*="select2-style2"] .select2-container--default .select2-selection--single .select2-selection__arrow {height: 34px;}
[class*="select2-style2"] .select2-container--default .select2-selection--single .select2-selection__placeholder {font-size: 14px; color: #333; display: block;}

.select2-style2-dropdown.select2-dropdown {border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); top: 8px;}
.select2-style2-dropdown.select2-dropdown:before {content: " "; border-bottom: 7px solid #ccc; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0); display: inline-block; position: absolute; top: -7px; left: 16px;}
.select2-style2-dropdown.select2-dropdown:after {content: " "; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); display: inline-block; position: absolute; top: -6px; left: 17px;}
.select2-style2-dropdown.select2-dropdown .select2-results__option--highlighted[aria-selected], .select2-style2-dropdown.select2-dropdown .select2-results__option[aria-selected=true] {background-color: #aaa;}

.select2-style2-dropdown-firstBorder.select2-dropdown {border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); top: 8px;}
.select2-style2-dropdown-firstBorder.select2-dropdown:before {content: " "; border-bottom: 7px solid #ccc; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0); display: inline-block; position: absolute; top: -7px; left: 16px;}
.select2-style2-dropdown-firstBorder.select2-dropdown:after {content: " "; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); display: inline-block; position: absolute; top: -6px; left: 17px;}
.select2-style2-dropdown-firstBorder.select2-dropdown .select2-results__option--highlighted[aria-selected] {background-color: #000; color: #fff;}
.select2-style2-dropdown-firstBorder.select2-dropdown .select2-results__option[aria-selected=true] {background-color: #000; color: #fff;}
.select2-style2-dropdown-firstBorder.select2-dropdown .select2-results__options > *:first-child {border-bottom: 1px solid rgba(0,0,0,.15);}

/* select2 Delegate */
.select2-delegate .select2-container .select2-selection--single .select2-selection__rendered {padding: 0 20px 0 32px;}
.select2-delegate .select2-container--default .select2-selection--single .select2-selection__clear {padding: 0 10px; float: none; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.select2-delegate .select2-container--default .select2-selection--single .select2-selection__arrow {display: none;}
.select2-delegate .user {}
.select2-delegate .user:after {content: " "; display:block; clear:both;}
.select2-delegate .user > * {float: left;}
.select2-delegate .user .staffImg {width: 20px; height: 20px; margin: 6px 6px 6px 0;}
.select2-delegate .user .staffImg img {vertical-align: top;}
.select2-delegate .user .userInfo {width: calc(100% - 32px); margin: 8px 0; line-height: 1.2;}
.select2-delegate .user .userInfo .staffName {font-size: 14px;}

.select2-delegate-dropdown {}
.select2-delegate-dropdown .user {margin: 0 -12px;}
.select2-delegate-dropdown .user:after {content: " "; display:block; clear:both;}
.select2-delegate-dropdown .user > * {float: left;}
.select2-delegate-dropdown .user .staffImg {width: 30px; height: 30px; margin: 15px;}
.select2-delegate-dropdown .user .staffImg img {vertical-align: top;}
.select2-delegate-dropdown .user .userInfo {width: calc(100% - 60px); margin: 15px 0; color: #555; line-height: 1.2;}
.select2-delegate-dropdown .user .userInfo .staffName {font-size: 14px;}
.select2-delegate-dropdown .user .userInfo .staffPosition {font-size: 12px;}
.select2-delegate-dropdown .user .userInfo .staffPosition > span {color: #999; font-weight: 700;}
.select2-container--default .select2-delegate-dropdown .select2-results > .select2-results__options {max-height: calc(60px * 3.5);}

/* ng2 select2 */
/*.select2-container--default .select2-selection--single {border: 1px solid #ECEDEE; border-radius: 2px !important;}*/

/* scrollup */
.scrollup {background: #2B2E33; border-radius: 100%; width: 32px; height: 32px;
    font-size: 18px; text-align: center; line-height: 32px; color: #fff;
    position: fixed; bottom: 4em; right: 1em; opacity: .5; z-index: 1000; display: none;}
.scrollup i {color: #fff; display: inline-block;}
.scrollup:hover {color: #fff; opacity: 1;}

/* perfect-scrollbar */
.ps-container > .ps-scrollbar-x-rail, .ps-container > .ps-scrollbar-y-rail {margin: 0 !important; cursor: pointer; z-index: 999;}

.ps-container.ps-theme-default.ps-active-x > .ps-scrollbar-x-rail {background: rgba(0,0,0,.1); border-radius: 2px; height: 4px; opacity: 0.8;}
.ps-container.ps-theme-default.ps-active-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {background: rgba(0, 0, 0, 0.3); border-radius: 0; height: 100%; }
.ps-container:hover.ps-theme-default.ps-active-x > .ps-scrollbar-x-rail {opacity: 1;}
.ps-container.ps-theme-default.ps-active-x.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {background: rgba(0, 0, 0, 0.8); height: 100%;}

.ps-container.ps-theme-default.ps-active-y > .ps-scrollbar-y-rail {background: rgba(0,0,0,.1); border-radius: 2px; width: 4px; opacity: 0.8;}
.ps-container.ps-theme-default.ps-active-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {background: rgba(0, 0, 0, 0.3); border-radius: 0; width: 100%; right: 0;}
.ps-container:hover.ps-theme-default.ps-active-y > .ps-scrollbar-y-rail {opacity: 1;}
.ps-container.ps-theme-default.ps-active-y.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {background: rgba(0, 0, 0, 0.8); width: 100%;}

.psWhiteBar.ps-container.ps-theme-default.ps-active-x > .ps-scrollbar-x-rail,
.psWhiteBar.ps-container.ps-theme-default.ps-active-y > .ps-scrollbar-y-rail {background: rgba(0, 0, 0, 0.6);}
.psWhiteBar.ps-container.ps-theme-default.ps-active-x > .ps-scrollbar-x-rail > .ps-scrollbar-x,
.psWhiteBar.ps-container.ps-theme-default.ps-active-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {background: rgba(255, 255, 255, 0.6);}

/* fullcalendar */
.fc {position: relative;}
.fc.fc-ltr .fc-h-event.fc-not-end, .fc.fc-rtl .fc-h-event.fc-not-start {border-radius:1px; margin: 1px; padding: 2px 4px;}
.fc.fc-ltr .fc-h-event.fc-not-start, .fc.fc-rtl .fc-h-event.fc-not-end {border-radius:1px; margin: 1px; padding: 2px 4px;}

.fc td.fc-widget-content {background: rgba(0, 102, 179, 0.025);}
.fc td.fc-widget-content.fc-today {background: rgba(249, 255, 0, 0.35);}

.fc .fc-day.fc-other-month {background: #fff;}
.fc .fc-day-top {position: relative;}
.fc .fc-day-top .fc-day-number {border-radius: 100%; width: 16px; height: 16px; font-size: 12px; line-height: 16px; text-align: center;}
.fc .fc-day-top.SH .fc-day-number {background: #d308ee; color: #fff;}
.fc .fc-day-top.PH .fc-day-number {background: #e40000; color: #fff;}
.fc .fc-day-top.RD .fc-day-number {background: #ff7f00; color: #fff;}
.fc .fc-header-toolbar {position: relative;}
.fc .fc-header-toolbar .fc-left {float: none; /*position: absolute; left: 0; top: 0;*/}
.fc .fc-header-toolbar .fc-left > * > * {margin: 0 15px 0 1px; display: inline-block; vertical-align: middle;}
.fc .fc-header-toolbar .fc-left > * > *:nth-child(1) {border-radius: 4px 0 0 4px; margin: 0;}
.fc .fc-header-toolbar .fc-left > * > *:nth-child(2) {border-radius: 0 4px 4px 0;}
.fc .fc-header-toolbar .fc-left > * > *:nth-child(3) {border-radius: 4px;}
.fc .fc-header-toolbar h2 {font-size: 25px; font-weight:700;}
.fc .fc-header-toolbar .fc-today-button {text-transform: capitalize;}
.fc .fc-head {background: #0165b3; color: #fff;}
.fc .fc-row .fc-content-skeleton td.fc-day-top {padding: 2px;}
.fc .fc-event {border: none; border-radius:1px; margin: 1px; padding: 2px 4px; cursor: pointer;}
.fc .fc-event .ui {font-size: 15px;}
/*.fc .LA {background: #62bdf3;}
.fc .LW {background: #36c78b;}
.fc .CLR {background: #bc83c4;}
.fc .OLA {background: #84a0b0;}*/

button.fc-state-default {background: #2b2e33; color: #fff;}
button.fc-state-default.fc-today-button {background: #ddd; border-color: #ddd; color: #000;}
button.fc-state-default.fc-state-disabled {cursor: default;}

/* ion.rangeSlider */
.irs {}
.irs .irs-line {background: #f0f0f0; border: none; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); height: 5px; top: 78px;}
.irs .irs-bar {background: #319db5; height: 5px; top: 78px;}
.irs .irs-bar-edge {background: #319db5; /*width: 15px;*/ width: 16px; height: 5px; top: 78px;}
.irs .irs-slider {background: #fff; /*border: none;*/ border: 4px solid #319db5; -webkit-box-shadow: inset 0 2px 1px -1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.4); box-shadow: inset 0 2px 1px -1px #ffffff, 0px 1px 3px rgba(0, 0, 0, 0.4); /*width: 30px; height: 30px; top: 65px;*/ width: 32px; height: 32px; top: 64px;}
.irs .irs-min, .irs .irs-max {background: none; padding: 5px; font-size: 14px; visibility: visible !important;}
.irs .irs-single {background: #000; border-radius: 4px; padding: 5px; color: #fff; top: 30px; cursor: pointer;}
.irs .irs-single:after {content: " "; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 5px 0; border-top-color: #000; position: absolute; bottom: -5px; left: calc(50% - 5px);}
.irs .irs-from {background: #000; border-radius: 4px; padding: 5px; color: #fff; top: 30px; cursor: pointer;}
.irs .irs-from:after {content: " "; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 6px 6px 0; border-top-color: #000; position: absolute; bottom: -5px; left: calc(50% - 5px);}
.irs .irs-to {background: #000; border-radius: 4px; padding: 5px; color: #fff; top: 30px; cursor: pointer;}
.irs .irs-to:after {content: " "; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 6px 6px 0; border-top-color: #000; position: absolute; bottom: -5px; left: calc(50% - 5px);}
.irs.irs-disabled .irs-bar {background: #555; border-top-color: #555; border-bottom-color: #555;}

/* datepicker */
.datepicker {}
.datepicker.datepicker-dropdown {right: auto;}
.datepicker.datepicker-dropdown {-webkit-transform: translate(0, 6px); transform: translate(0, 6px);}
/*.datepicker.datepicker-dropdown {-webkit-transform: translate(230px,-37px); transform: translate(230px,-37px);}
.datepicker.datepicker-dropdown.datepicker-orient-right:before {border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid transparent; border-right: 7px solid #ccc; top: 10px; left: -14px; right: auto;}
.datepicker.datepicker-dropdown.datepicker-orient-right:after {border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid transparent; border-right: 7px solid #fff; top: 10px; left: -13px; right: auto;}*/

/*datetimepicker */
.dtp > .dtp-content {max-width: calc(40px * 7 + 2em); max-height: inherit;}
.dtp .dtp-header a, .dtp .dtp-date a {color: #fff;}
.dtp table.dtp-picker-days tr > td {padding: 0; line-height: 40px;}
.dtp .dtp-picker-year {margin: 0;}
.dtp .dtp-picker-year > *:not(:first-child) {padding-top: 5px;}
.dtp .dtp-select-year-range {padding: 3px; font-size: 24px; line-height: 1;}
.dtp .dtp-buttons > * {margin: 0 0 0 1em;}
.dtp .dtp-buttons .dtp-btn-clear {float: left;}
.dtp a.dtp-meridien-am, .dtp a.dtp-meridien-pm {padding: 0.5em;}
.dtp svg.svg-clock circle.dtp-select-hour {r:24;}

/* dataTable */
table.dataTable.display thead th, table.dataTable.display thead td {padding: 5px;}
table.dataTable.display tbody th, table.dataTable.display tbody td {padding: 5px;}
table.dataTable.display thead th, table.dataTable.display thead td, table.dataTable.display.no-footer {border-color: #ccc;}

.dataTables_wrapper.no-footer .dataTables_paginate .paginate_button {background: transparent; padding: 4px; color: #555 !important;}
.dataTables_wrapper.no-footer .dataTables_paginate .paginate_button:hover, 
.dataTables_wrapper.no-footer .dataTables_paginate .paginate_button:active {background: transparent; border-color: transparent; box-shadow: none; color: #0066b3 !important;}
.dataTables_wrapper.no-footer .dataTables_paginate .paginate_button:focus {outline: 0;}
.dataTables_wrapper.no-footer .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper.no-footer .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper.no-footer .dataTables_paginate .paginate_button.disabled:active {color: #999 !important;}
.dataTables_wrapper.no-footer .dataTables_paginate .paginate_button.current, .dataTables_wrapper.no-footer .dataTables_paginate .paginate_button.current:hover {background: transparent; border-color: transparent; color: #0066b3 !important;}

/* signature-pad */
.signature-pad {position: relative;}
.signature-pad--body {border: 1px solid #ccc; width: 100%; height: 250px; position: relative;}
.signature-pad--body canvas {max-width: 100%; width: 100%; height: 100%; position: absolute; top: 0; left: 50%; z-index: 10; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.signature-pad--body .fileBox {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 11;}
.signature-pad--body .fileBox label {cursor: pointer;}
.signature-pad--body .signature-pad--bg {/*background: repeating-linear-gradient(#ccc, #fff 1px, #fff 69px);*/ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
}
.signature-pad--body [data-action="clear"] {padding: 2px 4px; font-size: 12px; color: #0066b3; cursor: pointer; position: absolute; top: 10px; right: 10px; z-index: 20; display: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
}
.signature-pad--body .signature-pad--bg .sticky {background: #ff0300; width: 40px; height: 105px; padding: 0 0 10px; font-size: 16px; font-weight: 300px; color: #fff; line-height: 40px; text-align: right; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: absolute; bottom: 120px; left: 40px; z-index: 2;}
.signature-pad--body .signature-pad--bg .sticky:after {content: " "; border-top: 20px solid #ff0300; border-left: 20px solid rgba(0, 0, 0, 0); border-right: 20px solid rgba(0, 0, 0, 0); position: absolute; bottom: -20px; left: 0; z-index: 2;}
.signature-pad--body .signature-pad--bg .placeholder {width: 100%; font-size: 50px; font-style: italic; font-weight: 300; color: #999; text-align: center; position: absolute; bottom: 26px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.15s linear; transition: all 0.15s linear; opacity: 1; z-index: 2;}
.signature-pad--body .signature-pad--bg .signatureLine {background: #0066b3; width: 100%; height: 2px; font-size: 16px; position: absolute; bottom: 40px; left: 0; z-index: 1;}
.signature-pad--body .signature-pad--bg .signatureLine:after {content: "X"; font-size: 70px; font-weight: 500; font-style: normal; color: #333; display: block; position: absolute; bottom: -19px; left: 20px;}
.signature-pad--body .signature-pad--bg .signatureLine > * {padding: 5px 20px;}
.signature-pad--footer {margin-top: 8px;}
.signature-pad--actions {margin-top: 8px}

.signature-pad.active .signature-pad--body {border-color: #0066b3;}
.signature-pad.active .signature-pad--body [data-action="clear"] {display: block;}
.signature-pad.active .signature-pad--body .signature-pad--bg .placeholder {opacity: 0;}

.signature-pad.assist canvas {cursor: url(../image/ui-pen.png) 0 0, default;}
.signature-pad.assist .signature-pad--body .signature-pad--bg:before {content: " "; border-top: 1px solid #ccc; width: 100%; height: 1px; position: absolute; top: calc((100% - 40px) / 3); left: 0;}
.signature-pad.assist .signature-pad--body .signature-pad--bg:after {content: " "; border-top: 1px dashed #ccc; width: 100%; height: 1px; position: absolute; top: calc((100% - 40px) / 3 * 2); left: 0;}

/* timeLineMenu */
.timeLineMenuAside {width: calc(100% - 80px);}
.timeLineMenu {width: 80px; height: calc(100% - 80px); margin: 80px 0 0; font-size: 12px; position: absolute; top: 0; right: 0}
.timeLineMenu a {padding: 0 10px; color: #555; display: block;}
.timeLineMenu a:focus {text-decoration: none;}
.timeLineMenu:before {content: " "; background: #ddd; width: 5px; height: 100%; position: absolute; top: 0; left: 0;}
.timeLineMenu > li {line-height: 20px; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; z-index: 1;}
.timeLineMenu > li:last-child {margin: 0;}
.timeLineMenu > li > a {border-left: 5px solid #ddd;}
.timeLineMenu > li.active, .timeLineMenu > li:hover {}
.timeLineMenu > li.active a, .timeLineMenu > li:hover a {border-left: 5px solid #258cd1; color: #258cd1;}
.timeLineMenu > li > ul {display: none;}
.timeLineMenu > li.active > ul {display: block; -webkit-animation: slideInDown 0.25s both; animation: slideInDown 0.25s both;}
.timeLineMenu > li.active > ul > li {line-height: 1.2;}
.timeLineMenu > li.active > ul > li a {color: #86b3d1;}
.timeLineMenu > li.active > ul > li.active a, .timeLineMenu > li.active > ul > li:hover a {color: #258cd1;}
.timeLineMenu > li.ellipsis {border-left: none; padding: 0 0 0 12px;}

@-webkit-keyframes slideInDown {
    from {-webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); visibility: visible; opacity: 0; height: 0;}
    to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; height: 100%;}
}

@keyframes slideInDown {
    from {-webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); visibility: visible; opacity: 0; height: 0;}
    to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; height: 100%;}
}

/* teamSchedule */
.teamSchedule {width: 100%; font-size: 14px;}
.teamSchedule:before, .teamSchedule:after {content: " "; display:block; clear:both;}
.teamSchedule .teamMember {width: 147px; padding: 68px 0 0; float: left;}
.teamSchedule .teamEvent {width: calc(100% - 147px); padding: 10px 0 0; font-size: 12px; float: left; position: relative;}

.teamMember {}
.teamMember > ul {margin: 0 10px 0 0;}
.teamMember > ul li {margin: 0 0 4px; padding: 3px 10px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.teamMember > ul li:last-child {margin: 0}
.teamMember > ul li:hover {background: #ddd}
.teamMember > ul li.active {background: #2d2d2d; color: #fff;}

.teamEvent {}
.teamEvent .thisMonth {padding: 0 0 5px;}
.teamEvent .thisMonth:after {content: " "; display:block; clear:both;}
.teamEvent .thisMonth > * {width: 50%; float: left;}
.teamEvent .thisMonth > *:last-child {text-align: right;}
.teamEvent .thisMonth:after {content: " "; display:block; clear:both;}

.teamEvent .eventPeriod {position: relative;}
.teamEvent .eventPeriod > * {width: 180px; font-size: 14px; font-weight: 400; text-align: center; position: absolute; top: -30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none;}
.teamEvent .eventPeriod > *:after {/*content: " "; border-top: 10px solid #e3e3e3; border-left: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid rgba(0, 0, 0, 0); width: 10px; height: 10px; position: absolute; top:25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);*/}

.teamEvent .teamEventList {width: 100%; position: relative;}
.teamEvent .teamEventList .eventList {width: calc(100% / 31); padding: 0 2px; position: relative;}
.teamEvent .teamEventList .eventList > * {margin: 0 0 4px 0;}
.teamEvent .teamEventList .eventList > *:last-child {margin: 0;}
.teamEvent .teamEventList .eventList .eventMonth {height: 20px; font-weight: 700; text-align: center; position: relative;}
.teamEvent .teamEventList .eventList .eventMonth > span {min-width: 100%; position: absolute; left: 0; top: 0;}
.teamEvent .teamEventList .eventList .eventWeek {margin: 0 0 -4px; font-weight: 700; text-align: center;}
.teamEvent .teamEventList .eventList .eventWeek.red {color: red;}
.teamEvent .teamEventList .eventList .eventDay {text-align: center;}
.teamEvent .teamEventList .eventList .eventBox {background: #ccc; height: 20px; text-align: center; position: relative;}

.teamEvent .teamEventList .eventList.startPeriod:before {content: " "; background: rgba(0,0,0,1); width: 2px; height: calc(100% - 26px); position: absolute; bottom: 0; left: 0; z-index: 10;}
.teamEvent .teamEventList .eventList.startPeriod .eventBox:nth-child(2):before {content: " "; border-top: 6px solid rgba(0, 0, 0, 0); border-bottom: 6px solid rgba(0, 0, 0, 0); border-left: 6px solid #2b2e33;position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.teamEvent .teamEventList .eventList.endPeriod:after {content: " "; background: rgba(0,0,0,1); width: 2px; height: calc(100% - 26px); position: absolute; bottom: 0; right: 0; z-index: 10;}
.teamEvent .teamEventList .eventList.endPeriod .eventBox:nth-child(2):before {content: " "; border-top: 6px solid rgba(0, 0, 0, 0); border-bottom: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid #2b2e33; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.teamEvent .teamEventList .eventList.inPeriod .eventBox:after {content: " "; background: rgba(0,0,0,0.1); width: calc(100% + 4px); height: calc(100% + 4px); position: absolute; top: -2px; left: -2px;}

.teamEvent .teamEventList .eventList .SH, .teamEvent .teamEventList .eventList .PH, .teamEvent .teamEventList .eventList .RD {color: #fff; position: relative; z-index: 1;}
.teamEvent .teamEventList .eventList .SH:after, .teamEvent .teamEventList .eventList .PH:after, .teamEvent .teamEventList .eventList .RD:after {content: " "; background: #ccc; border-radius: 100%; width: 17px; height: 17px; position: absolute; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

.teamEvent .teamEventList .eventList .SH:after {background: rgba(211, 8, 238, 0.75);}
.teamEvent .teamEventList .eventList .PH:after {background: rgba(228, 0, 0, 0.75);}
.teamEvent .teamEventList .eventList .RD:after {background: rgba(255, 127, 0, 0.75);}

/*.SH {background: #d308ee; color: #fff;}
.PH {background: #e40000; color: #fff;}
.RD {background: #ff7f00; color: #fff;}*/
/*
.teamEvent .teamEventList .eventList .LA {background: #62bdf3;}
.teamEvent .teamEventList .eventList .LW {background: #36c78b;}
.teamEvent .teamEventList .eventList .CLR {background: #bc83c4;}
*/

/* approvalStatus */
.approvalStatus {margin: 0 -15px; padding: 0 15px; white-space: nowrap; position: relative;}
.approvalStatus:after {content: " "; display:block; clear:both;}
.approvalStatus > * {white-space:normal; vertical-align: top;}
.approvalStatus .approvalFirst {width: 120px; line-height: 1; display: inline-block; position: relative; z-index: 20; /*background: #ddd;*/}
.approvalStatus .approvalList {width: calc(100% - 120px); display: inline-table; position: relative; z-index: 10; /*background: #999;*/}
.approvalStatus .approvalList:after {content: " "; background: #ddd; width: 100%; height: 2px; position: absolute; top: 22px; left: -60px; z-index: -1; -webkit-transform: translate(0,-50%); transform: translate(0,-50%);}
.approvalStatus .approvalList > li {line-height: 1; text-align: right; display: table-cell; vertical-align: top; position: relative; /*z-index: 10;*/}
.approvalStatus .approvalBox {width: 120px; text-align: center; display: inline-block;}
.approvalStatus .approvalBox .approvalNo {background: #ddd; border-radius: 100%; width: 44px; height: 44px; margin: 0 0 8px; font-size: 24px; font-weight: 700; color: #fff; display: inline-block; position: relative}
.approvalStatus .approvalBox .approvalNo > * {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.approvalStatus .approvalBox .approvalInfo {font-size: 12px; line-height: 1.2; position: relative;}
.approvalStatus .approvalBox .actionReason {display: none;}
.approvalStatus .fa.fa-file-text {left: calc(50% + 1px);}

.approvalStatus > .approvalList.next:after {content: " "; background: #ddd; width: 100%; height: 2px; position: absolute; top: 22px; right: -15px; z-index: 5; -webkit-transform: translate(0,-50%); transform: translate(0,-50%)}
.approvalStatus > *:nth-child(n+3) {margin: 30px 0 0 80px; display: table;}
.approvalStatus > *:nth-child(n+3):before {background: #ddd; width: calc(100% + 55px); left: -95px;}

.approvalStatus .approvalBox.active .approvalNo,
.approvalStatus .approvalBox.approve .approvalNo {background: #0066B2;}
.approvalStatus .approvalBox.reject .approvalNo {background: #cb2027;}
.approvalStatus .approvalBox.completed .approvalNo {}
.approvalStatus .approvalBox .approvalNo > *:nth-child(1) {visibility: hidden;}
.approvalStatus .approvalBox.active .approvalNo > *:nth-child(1),
.approvalStatus .approvalBox.approve .approvalNo > *:nth-child(1),
.approvalStatus .approvalBox.reject .approvalNo > *:nth-child(1),
.approvalStatus .approvalBox.completed .approvalNo > *:nth-child(1) {visibility: visible;}
.approvalStatus .approvalBox.active .approvalNo > *:nth-child(2),
.approvalStatus .approvalBox.approve .approvalNo > *:nth-child(2),
.approvalStatus .approvalBox.reject .approvalNo > *:nth-child(2),
.approvalStatus .approvalBox.completed .approvalNo > *:nth-child(2) {visibility: hidden;}

.approvalStatus.horizontal .approvalList:after {left: -50px;}
.approvalStatus.horizontal .approvalList > li {text-align: center;}
.approvalStatus.horizontal .approvalList > li:last-child {text-align: right;}
.approvalStatus.horizontal .approvalList > li:last-child .approvalBox {width: 60px;}
.approvalStatus.horizontal .approvalList .approvalBox.w200 {width: 200px;}
.approvalStatus.horizontal .approvalBox .approvalInfo .staffName > * {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.approvalStatus.horizontal .approvalBox .approvalInfo .staffName > *:after {content: " ";}
.approvalStatus.horizontal .approvalBox .approvalInfo .staffName > *:nth-child(n+4) {display: inline-block;}
.approvalStatus.horizontal .approvalBox .approvalInfo .staffName > *:nth-child(n+5) {position: absolute;}

.approvalStatus.vertical .approvalFirst {width: 100%; display: block;}
.approvalStatus.vertical .approvalList {width: 100%; display: block;}
.approvalStatus.vertical .approvalList:after {width: 2px; height: 100%; top: -40px; left: 39px; -webkit-transform: translate(0,0); transform: translate(0,0);}
.approvalStatus.vertical .approvalList > li {margin: 30px 0; text-align: left; display: block;}
.approvalStatus.vertical .approvalList > li:last-child {margin: 30px 0 0;}
.approvalStatus.vertical .approvalBox {width: 100%; text-align: left; display: block;}
.approvalStatus.vertical .approvalBox .approvalNo {margin: 0 18px; vertical-align: middle;}
.approvalStatus.vertical .approvalBox .approvalInfo {width: calc(100% - 90px); display: inline-block; vertical-align: middle;}
.approvalStatus.vertical .approvalBox .staffName {font-size: 14px; display: inline;}
.approvalStatus.vertical .approvalBox .staffName > *:nth-child(n+4) {width: auto; display: inline; white-space: normal;}
.approvalStatus.vertical .approvalBox .staffName > *:nth-child(n+5) {width: auto; visibility: visible; opacity: 1;}
.approvalStatus.vertical .approvalBox .actionDay {margin: 0 0 0 10px; display: inline;}
.approvalStatus.vertical .approvalBox .actionReason {display: block;}

.approvalStatus.vertical .approvalBox.myself .approvalNo:after {content: " "; background: transparent; border: 1px solid #ccc; border-radius: 100%; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.approvalStatus.vertical .approvalBox.myself.approve .approvalNo:after {border-color: #0066B2;}
.approvalStatus.vertical .approvalBox.myself.reject .approvalNo:after {border-color: #cb2027;}

/* overBox */
*:hover > .overBox {display: block;}
.overBox {background: #2b2e33; border-radius: 3px; padding: 5px; color: #fff; position: absolute; top: calc(100% + 10px); right: 0; display: none; z-index: 1}
.overBox:before {content: " "; border-bottom: 6px solid #2b2e33; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); position: absolute; top: -6px; right: 34px;}

.overBox.staffName {min-width: 300%; max-width: 600%; font-weight: 400;}

/* tooltip rest */
.tooltip .tooltip-inner {min-width: 10px; max-width: 300px; text-align: left;}

/* tab reset */
.nav-tabs.tabStyle-1 {border-bottom: 3px solid #ddd;}
.nav-tabs.tabStyle-1 > li {position:relative;}
.nav-tabs.tabStyle-1 > li > a {border: none; margin: 0; color: #999;}
.nav-tabs.tabStyle-1 > li > a:hover, .nav-tabs.tabStyle-1 > li > a:focus {background-color:transparent; color: #222;}
.nav-tabs.tabStyle-1 > li .select2 .select2-selection {background: none; border: none; height: 40px;}
.nav-tabs.tabStyle-1 > li .select2 .select2-selection__rendered {color: #999 !important; line-height: 40px;}
.nav-tabs.tabStyle-1 > li .select2.select2-container--disabled .select2-selection {background: none;}
.nav-tabs.tabStyle-1 > li.active .select2 .select2-selection__rendered, .nav-tabs.tabStyle-1 > li .select2:hover .select2-selection__rendered {color: #222 !important; cursor: pointer;}
.nav-tabs.tabStyle-1 > li .select2 .select2-selection__arrow {height: 40px;}

.nav-tabs.tabStyle-1 > li.active > a, .nav-tabs.tabStyle-1 > li.active > a:hover, .nav-tabs.tabStyle-1 > li.active > a:focus {background-color: transparent; border: none; color: #222; cursor: default;}
.nav-tabs.tabStyle-1 > li:after {content: " "; background: #0066B2; width: 0%; height: 3px; position: absolute; bottom: -2px; left: 50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:.35s; transition:.35s; z-index: 60;}
.nav-tabs.tabStyle-1 > li.active:after,
.nav-tabs.tabStyle-1 > li:hover:after {width:100%;}


.nav-tabs.tabStyle-2 {border: none;}
.nav-tabs.tabStyle-2 > li {margin: 0 6px; float: none; display: inline-block; vertical-align: top; position:relative;}
.nav-tabs.tabStyle-2 > li > a {border: none; margin: 0; padding: 10px 2px; color: #555; line-height: 1;}
.nav-tabs.tabStyle-2 > li > a:hover, .nav-tabs.tabStyle-1 > li > a:focus {background-color:transparent; color: #222;}
.nav-tabs.tabStyle-2 > li.active > a, .nav-tabs.tabStyle-1 > li.active > a:hover, .nav-tabs.tabStyle-1 > li.active > a:focus {background-color: transparent; border: none; color: #222; cursor: default;}
.nav-tabs.tabStyle-2 > li:after {content: " "; background: #0066B2; width: 0%; height: 3px; position: absolute; bottom: -2px; left: 50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:.35s; transition:.35s;}
.nav-tabs.tabStyle-2 > li.active:after,
.nav-tabs.tabStyle-2 > li:hover:after {width:100%;}

.tab-content {background-color:transparent; border-top:0; padding: 0;}


/* Progress bar pg-container */
.pg-container {background: #ccc; border-radius: 10px; height: 14px; position: relative;}
.pg-container .pg-bar {background: #aaa; border-radius: 10px; width: 0%; height: 100%; -webkit-animation: grower 1s linear; animation: grower 1s linear; -webkit-transition: all 2.5s cubic-bezier(0.18, 0.89, 0.88, 1) 0s; transition: all 2.5s cubic-bezier(0.18, 0.89, 0.88, 1) 0s;}
.pg-container .pg-text {font-size: 12px; color: #fff; position: absolute; top: 0; left: 5px;}

@-webkit-keyframes grower {
    0% {width: 0%;}
}

@keyframes grower {
    0% {width: 0%;}
}

/* autoHide */
.autoHide {-webkit-animation: autoHide 0.5s linear 5s forwards; animation: autoHide 0.5s linear 2s forwards;}
@-webkit-keyframes autoHide {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes autoHide {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.switchSection {position: relative;}
.switchSection .switchGroup input {transition: none;}
.switchSection .switchGroup:not(.active) input, .switchSection .switchGroupTarget:not(.active) input {background: #eee; pointer-events: none;}
.switchSection .switchGroup:not(.active) input[readonly], .switchSection .switchGroupTarget:not(.active) input[readonly] {background: #fff;}
/*.switchSection .switchGroup:not(.active) input:before {content: " "; background: #ddd; width: 100%; height: 24px; position: absolute; top: 0; left: 0;}*/

/* style */
.boxShadow {background: #fff; padding: 15px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);}
.boxShadow.border {border: 10px solid #ccc; padding: 5px;}
.noRecord {width: 100%; height: calc(100vh - 140px); position: relative;}
.noRecord > * {font-size: 30px; font-weight: 900; text-align: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.v-lineFlex {display: flex; -webkit-flex-direction: column; flex-direction: column;}
.v-lineFlex > * {-webkit-flex-grow: 1; flex-grow: 1;}

/* img_wrap */
.img_wrap {}

/* title_wrap */
.title_wrap {font-size: 16px; font-weight: 900;}
.title_wrap span {font-weight: 300; color: #aaa;}
.title_wrap i {margin: 0 10px 0 0; vertical-align: middle; position: relative; top: -1px;}

/* btn_wrap */
.btn_wrap {}

/* topFun */
.topFun {}
.topFun .button {background: #333; border-radius: 3px; min-width: 24px; padding: 2px 4px; color: #fff; text-align: center; display: inline-block; vertical-align: middle;}
.topFun .button.b2 {padding: 4px 8px;}
.topFun .button.b3 {padding: 6px 12px;}
.topFun .button.color_theme {background: #0066b3;}

/* iosList_wrap */
.iosList_wrap {background: #fff; border-bottom: 1px solid #ccc;}
.iosList_wrap li {text-align: right; line-height: inherit;}
.iosList_wrap li.hover {cursor: pointer;}
.iosList_wrap li.hover:hover {background: #eee;}
.iosList_wrap li > * {display: inline-block; vertical-align: middle;}
.iosList_wrap li .iosListLead {width: 5%; text-align: center;}
.iosList_wrap li .iosListBody {border-bottom: 1px solid #ccc; width: 95%; text-align: left; line-height: 60px; position: relative;}
.iosList_wrap li:last-child .iosListBody {border-bottom: none;}
.iosList_wrap li .iosListBody .iosLabel {margin: 0;  display: inline; cursor: pointer;}
.iosList_wrap li .iosListBody .iosListBodyRight {line-height: 1; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
/*.iosList_wrap li .iosListBody .iosListBodyRight.adnControl {cursor: pointer;}*/
.iosList_wrap li .iosListBody .iosListBodyRight:before {display: block; vertical-align: middle;}
.iosList_wrap li .iosListBody .iosDropDown { margin: 0 5% 0 0; line-height: 1;}
/*.iosList_wrap li .iosListBody .iosDropDown {height: 0; margin: 0 5% 0 0; line-height: 1; visibility: hidden; opacity: 0; -webkit-transition: all 0.25s linear; transition: all 0.25s linear;}*/
.iosList_wrap li .iosListBody .iosDropDown .input_wrap {position: relative;}
.iosList_wrap li .iosListBody .iosDropDown .input_wrap > * {display: inline-block; vertical-align: middle;}
.iosList_wrap li .iosListBody .iosDropDown .input_wrap > input {border-width: 1px 0 1px 1px; border-radius: 2px 0 0 2px; width: 90%; padding: 8px 8px 8px 35px;}
.iosList_wrap li .iosListBody .iosDropDown .input_wrap > .option-group {width: 90%;}
.iosList_wrap li .iosListBody .iosDropDown .input_wrap > .option-group .select2-selection--single {border-right: none; border-radius: 4px 0 0 4px;}
.iosList_wrap li .iosListBody .iosDropDown .input_wrap > button {border-width: 1px 1px 1px 0; border-radius: 0 2px 2px 0; width: 10%; height: 34px; padding: 0; line-height: 16px;}
.iosList_wrap li .iosListBody .iosDropDown .input_wrap > i {font-size: 20px; color: #aaa; position: absolute; top: 50%; left: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 60;}

.iosList_wrap.accordion .section.active .pane {height: 54px;}
/*.iosList_wrap.accordion .section.active .iosDropDown {height: 54px; visibility: visible; opacity: 1;}*/
/*.iosList_wrap.accordion .section.active .ui.ui-circlePlus:after {-webkit-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg);}*/
.iosList_wrap.accordion .section .delegated .iosDropDown {height: 0; visibility: hidden; opacity: 0;}
.iosList_wrap.accordion .section .delegated i {visibility: hidden; opacity: 0;}

/* list_wrap */
.list_wrap {background: #fff; width: 300px; padding: 0; /*padding: 0 5px;*/ /*position: fixed;*/ z-index: 10;}
.list_wrap.fixed {position: fixed;} 
.list_wrap .top {height: 117px; /*margin: 0 -5px;*/ position: relative;}
.list_wrap .top .title_wrap {/*font-size: 24px;*/ padding: 15px 20px;}
.list_wrap .top > .nav {width: 100%; padding: 0 0 0 10px; position: absolute; bottom: 0;}
.list_wrap .top > .nav > li {float: right;}
/*.list_wrap .top li > * {min-width: 66px; text-align: center;}*/
.list_wrap .list {border-top: none; padding: 0; position: relative;}
.list_wrap .list .topFun {margin: 0; position: absolute; top: -37px; right: 5px; /*top: -52px; right: 0;*/ z-index: 20;}
.list_wrap .list .item {height: calc(100vh - 167px); margin: 0; /*margin: 15px 0;*/ position: relative;}
/*.list_wrap .list .item > * {height: calc(100vh - 167px);}*/
.list_wrap .list .item li {/*margin: 40px 0;*/ padding: 20px 15px; font-size: 12px; font-weight: 300; line-height: 16px; position: relative; overflow: hidden; cursor: pointer;}
.list_wrap .list .item li:first-child {/*margin: 0 0 40px 0;*/}
.list_wrap .list .item li:first-child:last-child {/*margin: 0 0 40px 0;*/}
.list_wrap .list .item li:last-child {/*margin: 40px 0 0 0;*/}
.list_wrap .list .item li:before {content: " "; background: #fff; width: 4px; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-transform: scale(0); transform: scale(0);}
.list_wrap .list .item li:hover {background: rgba(0, 0, 0, 0.03);}
.list_wrap .list .item li:hover:before {background: rgba(0, 0, 0, 0.15);}
.list_wrap .list .item li.active {background: rgba(197, 243, 182, 0.5);}
.list_wrap .list .item li.active:before {background: rgba(154, 205, 130, 1); -webkit-transform: scale(1); transform: scale(1);}
.list_wrap .list .item li.select {background: rgba(197, 243, 182, 0.1);}
.list_wrap .list .item li.select:before {background: rgba(161, 229, 138, 1); -webkit-transform: scale(1); transform: scale(1);}
.list_wrap .list .item li .readonly {position: absolute; top: 20px; right: 10px;}
/*.list_wrap .list .item li.readonly:after {content: "Read only"; background: #ff0000; width: 120px; height: 50px; padding: 5px; font-size: 12px; color: #fff; text-align: center; position: absolute; bottom: -17px; right: -40px; transform: rotate(-30deg);}*/
.list_wrap .list .item.empty {background: #efefef; position: relative;}
.list_wrap .list .item.empty > * {font-size: 30px; font-weight: 900; text-align: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.list_wrap .list .item li[locked="true"] {cursor: not-allowed; /*pointer-events: none;*/}

/* list_wrap request */
.list_wrap.request .item li {
    display: block;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
}
.list_wrap.request .item li > * {display: table-cell; vertical-align: middle;}
.list_wrap.request .item li > .v-align-Top {vertical-align: top;}
.list_wrap.request .item li > *:last-child {width: 100%;}
.list_wrap.request .item li .img_wrap {margin: 0 8px; width: 58px; height: 58px; position: relative;}
.list_wrap.request .item li .img_wrap > * {border-radius: 100%; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 10;}
.list_wrap.request .item li .title, .list_wrap.request .item li .staffName {margin: 0 0 5px 0; font-size: 16px; font-weight: 700;}
.list_wrap.request .item li .eventType {min-width: 44px; margin: 0 5px 0 0;}
.list_wrap.request .item li .eventDay {color: rgba(170, 170, 170, 1);}
.list_wrap.request .item li .eventDay i {margin: 0 3px 0 0; color: rgba(170, 170, 170, 0.8);}
.list_wrap.request .item li .eventPeriod {font-style: italic; font-weight: 700; color: #aaa;}
.list_wrap.request .item li .eventPeriod > span {}
.list_wrap.request .item li .eventStatus {font-weight: 700; color: #6383bf; text-align: right;}

.list_wrap.request .item.style2 li .staffImg {margin: 0 15px 0 0;}
.list_wrap.request .item.style2 li .title, .list_wrap.request .item.style2 li .staffName {width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


.list_wrap.request .item li.border .img_wrap:after {content: " "; background: #fff; border: 2px solid #ccc; border-radius: 100%; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.list_wrap.request .item li.border.approve .img_wrap:after {border-color: #0066B2;}
.list_wrap.request .item li.border.reject .img_wrap:after {border-color: #cb2027;}

/* list_content */
.list_content {width: calc(100% - 300px); position: relative;}
.list_content .front {padding: 15px; position: relative; z-index: 1;}
.list_content .back {padding: 15px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}

/* listSearch */
.listSearch {position: relative; z-index: 10;}
.listSearch .searchControl {padding: 8px; font-size: 24px; color: #bbb; line-height: 1; display: inline-block; vertical-align: top; position: relative; left: 8px; z-index: 10; cursor: pointer;}
.listSearch .searchContain {border: 1px solid #ddd; width: 300px; height: 0px; opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 0; -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in;}
.listSearch .searchContain:after {content: " "; display:block; clear:both;}
.listSearch .searchContain > * {border-left: 1px solid #ddd; min-height: 38px; float: left;}
.listSearch .searchContain > *:first-child {border-left: none; width: 75%;}
.listSearch .searchContain > *:first-child input {border: 0; border-radius:0; height: 38px; padding: /*11px 8px 11px 48px*/ 11px 8px 11px 18px;}
.listSearch .searchContain > *:last-child {width: 25%;}
.listSearch .searchContain > *:last-child .select2 > * > * {border: 0 !important; border-radius: 0px !important; height: auto !important;}
.listSearch .searchContain > *:last-child .select2 > * > * > * {padding: 3px 23px 3px 12px}

.listSearch .searchContain > *:first-child input::-webkit-input-placeholder {font-size: 14px; font-weight: 300;}
.listSearch .searchContain > *:first-child input::-moz-placeholder {font-size: 14px; font-weight: 300;}
.listSearch .searchContain > *:first-child input:-ms-input-placeholder {font-size: 14px; font-weight: 300;}
.listSearch .searchContain > *:first-child input:-moz-placeholder {font-size: 14px; font-weight: 300;}

.listSearch label {display: none;}
.listSearch.active .searchControl {color: #999;}
.listSearch.active .searchContain {/*width: 300px;*/ height: 100%; opacity: 1; visibility: visible;}

/* list_wrap topFun style2 */
.list_wrap .topFun.style2 {width: 100%; position: relative; top: 0; left: 0; right: 0;}
.list_wrap .topFun.style2 .searchControl {position: absolute;}
.list_wrap .topFun.style2 .searchContain {width: 100%; height: auto; position: relative; top: 0; left: 0; opacity: 1; visibility: visible;}
.list_wrap .topFun.style2 .listSearch .searchContain > *:first-child {width: 65%;}
.list_wrap .topFun.style2 .listSearch .searchContain > *:first-child input {padding: 11px 8px 11px 48px;}
.list_wrap .topFun.style2 .listSearch .searchContain > *:last-child {width: 35%;}
.list_wrap .topFun.style2 .listSearch .searchContain > *:last-child .select2 > * > * > * {padding: 3px 10px;}

/* user_wrap */
.user_wrap {position: relative;}
.user_wrap .dropdown-toggle {color: #555;}
.user_wrap .dropdown-toggle > * {display: inline-block; vertical-align: middle;}
.user_wrap .dropdown-toggle .staffImg {width: 30px; height: 30px;}
.user_wrap .dropdown-toggle .staffName {margin: 0 0 0 10px; font-weight: 400;}
.user_wrap .dropdown-toggle .staffName > span {color: #666;}
.user_wrap .dropdown-menu {width: 300px; font-size: 12px; color: #fff;}
.user_wrap .dropdown-menu a {color: #fff; text-decoration: underline;}
.user_wrap .dropdown-menu a:hover {color: #fff; text-decoration: underline;}
.user_wrap .dropdown-menu:after {content: " "; display:block; clear:both;}
.user_wrap .dropdown-menu .user:after {content: " "; display:block; clear:both;}
.user_wrap .dropdown-menu .user > * {float: left;}
.user_wrap .dropdown-menu .staffImg {width: 50px; height: 50px; margin: 5px 10px; position: relative;}
.user_wrap .dropdown-menu .staffImg .uploadImg {background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
.user_wrap .dropdown-menu .staffImg .uploadImg i {font-size: 24px; color: rgba(255,255,255,0.9); position: absolute; top: -30%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
.user_wrap .dropdown-menu .staffImg:hover .uploadImg {visibility: visible; opacity: 1;}
.user_wrap .dropdown-menu .staffImg:hover .uploadImg i {top: 50%;}
.user_wrap .dropdown-menu .userInfo {width: calc(100% - 70px); margin: 5px 0;}
.user_wrap .dropdown-menu .userInfo > * {margin: 0 0 5px 0; /*float: left;*/}
.user_wrap .dropdown-menu .userInfo > *:last-child {margin: 5px 0 0 0;}
.user_wrap .dropdown-menu .staffName {font-size: 16px; font-weight: 400;}
.user_wrap .dropdown-menu .logout {float: right; cursor: pointer;}
.user_wrap .dropdown-menu .staffPosition {width: 100%;}
.user_wrap .dropdown-menu .staffPosition > span {color: #fff;}
.user_wrap .dropdown-menu .staffEmail {width: 100%;}

/* changeRole_wrap */
.changeRole_wrap {position: relative;}
.changeRole_wrap .dropdown-toggle .requestCounting {position: absolute; top: 5px; right: 2px;}
.changeRole_wrap .dropdown-menu {width: 300px; font-size: 12px; color: #555;}
.changeRole_wrap .dropdown-menu a {text-decoration: underline;}
.changeRole_wrap .dropdown-menu a:hover {text-decoration: underline;}
.changeRole_wrap .dropdown-menu:after {content: " "; display:block; clear:both;}
.changeRole_wrap .dropdown-menu .user {cursor: pointer;}
.changeRole_wrap .dropdown-menu .user:after {content: " "; display:block; clear:both;}
.changeRole_wrap .dropdown-menu .user > * {float: left;}
.changeRole_wrap .dropdown-menu .staffImg {width: 50px; height: 50px; margin: 5px 10px; position: relative;}
.changeRole_wrap .dropdown-menu .userInfo {width: calc(100% - 70px); margin: 5px 0;}
.changeRole_wrap .dropdown-menu .userInfo > * {margin: 0 0 5px 0; float: left;}
.changeRole_wrap .dropdown-menu .userInfo > *:last-child {margin: 5px 0 0 0;}
.changeRole_wrap .dropdown-menu .staffName {font-size: 16px; font-weight: 400;}
.changeRole_wrap .dropdown-menu .requestCounting {float: right;}
.changeRole_wrap .dropdown-menu .staffPosition {width: 100%;}
.changeRole_wrap .dropdown-menu .staffPosition > span {}
.changeRole_wrap .dropdown-menu .staffEmail {width: 100%;}
.changeRole_wrap .switchRole {margin: 5px -5px -5px;}
.changeRole_wrap .switchRole .top {background: #eee; padding: 5px 14px;}
.changeRole_wrap .switchRole ul {max-height: calc(77px * 3.5); position: relative;}
.changeRole_wrap .switchRole ul li {border-top: 1px solid #eee; line-height: 1.2; position: relative; cursor: pointer;}
.changeRole_wrap .switchRole ul li > * {padding: 10px 0;}
.changeRole_wrap .switchRole ul li .role:after {content: " "; display:block; clear:both;}
.changeRole_wrap .switchRole ul li .role > * {float: left;}
.changeRole_wrap .switchRole ul li .img_wrap {width: 46px; height: 46px; margin: 5px 13px 5px 17px; overflow:visible; position: relative;}
.changeRole_wrap .switchRole ul li .img_wrap > .staffImg {border-radius: 100%; width: 40px; height: 40px; margin: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 10;}
/*.changeRole_wrap .switchRole ul li .staffImg {width: 46px; height: 46px; margin: 5px 13px 5px 17px; overflow:visible; position: relative;}
.changeRole_wrap .switchRole ul li .staffImg img {border-radius: 100%; width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 10;}*/
.changeRole_wrap .switchRole ul li .img_wrap .ui.ui-ring {display: none;}
.changeRole_wrap .switchRole ul li .delegatDetail {width: calc(100% - 90px); margin: 5px 0;}
.changeRole_wrap .switchRole ul li .requestCounting {position: absolute; top: 5px; right: 5px;}
.changeRole_wrap .switchRole ul li:hover, .changeRole_wrap .switchRole ul li.active {background: rgba(197, 243, 182, 0.1);}

.changeRole_wrap .switchRole ul li.active .img_wrap:after {content: " "; background: #fff; border: 1px solid rgba(126, 197, 103, 1); border-radius: 100%; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.changeRole_wrap .switchRole ul li.active .img_wrap .ui.ui-ring {display: block;}

/* profileChange_wrap */
.profileChange_wrap {/*margin: 15px; margin: 30px 0 15px;*/ font-size: 12px; text-align: left; position: relative;}
.profileChange_wrap li {width: 100%; line-height: 1.2; display: table;}
.profileChange_wrap li > * {padding: 14px 14px 0; display: table-cell; vertical-align: top;}
.profileChange_wrap li > *:nth-child(1) {width: 10%; padding: 14px 0 0; font-weight: 700;}
.profileChange_wrap li > *:nth-child(2) {width: 45%; background: rgba(204, 204, 204, 0.1); background-clip: padding-box; border-right: 30px solid #fff; color: #aaa;}
.profileChange_wrap li > *:nth-child(3) {width: 45%; background: rgba(59, 89, 152, 0.1); background-clip: padding-box; border-left: 30px solid #fff; color: #6383bf;}
.profileChange_wrap li:last-child > * {padding: 15px;}
.profileChange_wrap li:first-child > *:nth-child(1) {padding: 14px 0 0;}
.profileChange_wrap li:last-child > *:nth-child(1) {padding: 14px 0 14px;}

.profileChange_wrap:after {content: " "; background: url(../image/arrow.svg) no-repeat; width: 20px; height: 30px; position: absolute; top: 50%; left: 55.2%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.overlay-msgbox .profileChange_wrap:after {left: 510px;}

/* restPasswordRule */
.restPasswordRule .title {font-weight: 700;}
.restPasswordRule ul li {font-size: 12px; line-height: 1.2}

/* detail_wrap card_wrap */
.detail_wrap {/*width: calc(100% - 360px);*/ /*margin: 30px;*/ position: relative; /*left: 300px;*/}
.card_wrap {margin: 30px 0 0; position: relative;}
.card_wrap:first-child {margin: 0;}
.card_wrap .topFun {position: absolute; top: 11px; right: 15px;}

.detail_wrap .spGrid_1 {}
.detail_wrap .spGrid_1:after {content:" "; display:block; clear:both;}
.detail_wrap .spGrid_1 > * {float: left;}
.detail_wrap .spGrid_1 > *:nth-child(1) {width: calc(100% - 280px);}
.detail_wrap .spGrid_1 > *:nth-child(2) {/*width: 300px;*/ width: 250px; margin: 0 0 0 30px;}

.detail_wrap .col {margin: 30px 0 0; position: relative;}
.detail_wrap .col > * {margin: 0; float: right;}
.detail_wrap .col:after {content: " "; display:block; clear:both;}
.detail_wrap .col > .card_wrap.cardType_1:nth-child(1) {width: 220px; height: 100%; position: absolute; top: 0; left: 0;}
.detail_wrap .col > .card_wrap.cardType_1:nth-child(2) {width: calc(100% - 250px);}

/* profile_wrap */
.profile_wrap {padding: 30px; position: relative;}

.profile-top {background: #fff; margin: 0 0 30px; padding: 15px 30px 15px 15px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);}
.profile-top > * {margin: 0 15px; display: inline-block; vertical-align: middle;}
.profile-top .profile-img {border-radius: 90px; width: 90px; height: 90px; overflow: hidden;}
.profile-top .profile-img > img {width: 100%;}
.profile-top .profile-info {max-width: calc(100% - calc(380px + 60px));}
.profile-top .profile-info > *, .profile-top .profile-info > h3 {margin-bottom: 5px;}
.profile-top .profile-info > *:last-child {margin:0}
.profile-top .profile-info .member-job{color: #adadad;}
.profile-top .profile-info .member-no{color: #4e4e4e;}
.profile-top .profile-info i {margin: 0 5px 0 0; font-size: 16px; color: #717171; vertical-align: text-bottom;}
.profile-top .profile-control {/*width: 290px;*/ margin: 27.5px 0 0; float: right; text-align: right;}
.profile-top .profile-control .input_wrap {margin: 0 0 0 15px; display: inline-block; vertical-align: middle;}
.profile-top .profile-control button.btn {margin: 0;}
/*.profile-top .profile-control button.btn {background: transparent; border: 1px solid #D3D7DB; margin: 0; color: #333;}
.profile-top .profile-control button.btn.active, .profile-top .profile-control button.btn:hover {border: 1px solid #258cd1; color: #258cd1;}*/

.profile-content {margin: 0 -15px; color: #1d1d1d;}
.profile-content:after {content: " "; display:block; clear:both;}
.profile-content .col { width: calc(50% - 30px); margin: 0 15px; padding: 0;}
.profile-content .col > * {width: 100%; margin: 0 0 30px; position: relative;}
.profile-content .col > *:last-child {margin: 0;}
.profile-content .nav-tabs3 .nav-tabs {border-bottom: 2px solid #ddd;}
.profile-content .nav-tabs3 .nav-tabs li {min-width: 15%; text-align: center;}
.profile-content .nav-tabs3 .nav-tabs li a {color: #1d1d1d;}
.profile-content .nav-tabs3 .tab-content {background: #fff; padding: 0;}
.profile-content .table {margin: 0;}
.profile-content .table tr:first-child td {border-color: transparent;}
.profile-content .table tr:hover .form-control.form-white {border-color: #fff;}
.profile-content .table td {width: 50%; padding: 0;}

/*.profile-content .table td {width: 50%; padding: 0; vertical-align: top;}
.profile-content .table tr:first-child td {border-color: transparent;}
/ *.profile-content .table-hover > tbody > tr:last-child td {border: none;}* /
.profile-content .table-hover > tbody > tr:hover {background: none;}
.profile-content .table-hover > tbody > tr:hover > td {background: none;}
.profile-content .table-hover > tbody > tr:hover > td .form-control {background: #fff; border: 1px solid #ECEDEE;}

.profile-content .table.table-td6 td[colspan="2"] {width: 33.333%;}
.profile-content .table.table-td6 td[colspan="2"] .input_wrap > label {width: 60px;}
.profile-content .table.table-td6 td[colspan="2"] .input_wrap > input {width: calc(100% - 60px);}

.profile-content .topFun {position: absolute; top: 19px; right: 15px;}*/

.profile-content .input_wrap {padding: 8px 15px;}
.profile-content .input_wrap .form-control {transition: none;}
.profile-content .input_wrap:after {content: " "; display:block; clear:both;}
.profile-content .input_wrap > * {width: calc(100% - 140px); word-break: break-word; float: left;}
.profile-content .input_wrap > label {width: 140px; margin: 0; padding: 7px 0;}
.profile-content .input_wrap > input {width: calc(100% - 140px);}
.profile-content .input_wrap > textarea {vertical-align: top;}
.profile-content .input_wrap .output {padding: 7px 9px; /*font-size: 13px;*/}
.profile-content .input_wrap .output.updating {font-weight: 700; color: red;}
.profile-content .input_wrap .example {padding: 4px 8px; color: #bbb; font-size: 12px;}
.profile-content .input_wrap .multi > *:not(:first-child) {width: 50%; margin: 8px 0 0; display: inline-block;}

.profile-content .form-group .help-block, .profile-content .form-group .with-errors {width: 100%; margin: 0; display: block; font-size: 12px; /*text-indent: 148px;*/ text-align: right;}
.profile-content input[name="EmpPassportNo"] {text-transform: uppercase;}

/*.profile-content .input_wrap {padding: 8px 15px;}
.profile-content .input_wrap:hover {background: #f5f5f5;}
.profile-content .input_wrap:hover .form-control.form-white {border-color: #fff;}
.profile-content .input_wrap > * {width: calc(100% - 140px); word-break: break-word; display: inline-block; vertical-align: top;}
.profile-content .input_wrap > label {width: 140px; margin: 0; padding: 7px 0;}
.profile-content .input_wrap > input {width: calc(100% - 140px);}
.profile-content .input_wrap > textarea {vertical-align: top;}
.profile-content .input_wrap .output {padding: 8px 9px; font-size: 13px;}
.profile-content .input_wrap .output.updating {font-weight: 700; color: red;}
.profile-content .input_wrap .example {padding: 4px 8px; color: #bbb; font-size: 12px;}
.profile-content .input_wrap .multi > *:not(:first-child) {width: 50%; margin: 8px 0 0; display: inline-block;}
.profile-content .input_wrap .multi input, .profile-content .input_wrap .option-group.multi .select2 {/ *width: 50% !important;* /}
.profile-content .input_wrap .plus:nth-child(n+3) {margin: 8px 0 0 140px;}
.profile-content .input_wrap .plus i {background: #fff; border: 1px solid #ECEDEE; border-radius: 2px; margin: 0 0 0 8px; padding: 9px 10px 9px 10px; cursor: pointer;}
.profile-content .input_wrap .plus input {width: calc(100% - 41px);}
.profile-content .input_wrap.input_xs > label {width: 42px;}
.profile-content .input_wrap.input_xs > input {width: calc(100% - 42px);}
.profile-content .form-group .help-block, .profile-content .form-group .with-errors {width: auto; margin: 0; display: block; font-size: 12px; text-align: right;}
.profile-content .input_wrap input[name="EmpPassportNo"] {text-transform: uppercase;}*/

/* payslip_wrap */
.payslip_wrap {padding: 30px;}
.payslip_wrap .card_wrap {padding: 0;}
.payslip_wrap .card_wrap:after {content: " "; display:block; clear:both;}
/*.payslip_wrap > * {float: left;}*/
.payslip_wrap .list_wrap {border-right: 1px solid #ccc; float: left;}
.payslip_wrap .list_wrap .list .topFun.style2 .listSearch .searchContain {border-right: none;}
.payslip_wrap .list_wrap .list .item {height: calc(100vh - 227px);}
.payslip_wrap .list_wrap .list .item li > * > span {word-break: break-word; display: inline-block; vertical-align: top;}
.payslip_wrap .list_wrap .list .item li > * > span:nth-child(1) {width: 60%;}
.payslip_wrap .list_wrap .list .item li > * > span:nth-child(2) {width: 40%; padding: 0 0 0 5px; text-align: right;}
.payslip_wrap .list_wrap .list .item li > *.title {font-size: 15px; margin: 0 0 10px;}
.payslip_wrap .list_wrap .list .item li > *.title > span:nth-child(1) {font-weight: 700;}
.payslip_wrap .list_wrap .list .item li > *.title > span:nth-child(2) {font-weight: 900; color: #7e7e7e;}
#payslipReportListPanel .item {height: calc(100vh - 267px);}

.pdf_wrap {width: calc(100% - 300px); padding: 15px; float: left; position: relative;}
.pdf_wrap .top {/*border-bottom: 2px solid #ddd;*/ display: none;}
.pdf_wrap .top .title {font-size: 36px; font-weight: 900; line-height: 40px;}
.pdf_wrap .top .title span {font-size: 36px; font-weight: 300;}
.pdf_wrap .top .date {margin: 0 0 10px; font-weight: 400; float: left;}
.pdf_wrap .top .feature {font-size: 20px; line-height: 1; float: right;}
.pdf_wrap .top .feature > i {margin: 0 0 0 15px; vertical-align: top; cursor: pointer;}
.pdf_wrap .top .feature > i.fa-print {display: none;}
.pdf_wrap .detail {height: calc(100vh - 140px); /*margin: 15px 0 0;*/ position: relative; z-index: 10;}
.pdf_wrap .detail > * {background: #525659; border: 2px solid #525659; /*height: calc(100vh - 227px);*/}
.pdf_wrap .detail .content > * {width: 100%; height: 100%;}

/* report_wrap */
.report_wrap {padding: 30px;}
.report_wrap .card_wrap {padding: 0;}
.report_wrap .card_wrap:after {content: " "; display:block; clear:both;}
.report_wrap .list_wrap {border-right: 1px solid #ccc; float: left;}
.report_wrap .list_wrap .list .topFun.style2 .listSearch .searchContain {border-right: none;}
.report_wrap .list_wrap .list .topFun.style2 .listSearch .searchContain > * {width: 100%;}
.report_wrap .list_wrap .list .item {height: calc(100vh - 267px);}
@supports (-ms-ime-align:auto) {
    .report_wrap .list_wrap .list .item {height: calc(100vh - 267px);}
}
.report_wrap .list_wrap .list .item li {border-bottom: 1px solid #ddd; font-size: 14px; cursor: auto;}
.report_wrap .list_wrap .list .item li, .report_wrap .list_wrap .list .item li.active:before {background: none !important; content: none;}
.report_wrap .list_wrap .list .item .formGrid.vertical .row:first-child {padding: 30px 0 0;}
.report_wrap .list_wrap .list .item .ui {top: -3px;}
.report_wrap .list_content {float: left;}


.report_wrap .front {height: calc(100vh - 110px);}
.report_wrap .report {height: 100%;}
.report_wrap .report > * {background: #525659; border: 2px solid #525659;}
.report_wrap .report .reportForm {border-bottom: 1px solid #ccc; padding: 15px; }
.report_wrap .report .reportForm:after {content: " "; display:block; clear:both;}
.report_wrap .report .reportForm .row {margin: 20px -10px 0;}
.report_wrap .report .reportForm .row:first-child {margin: 0 -10px;}
.report_wrap .report .reportForm .row > * {margin: 0 10px;}
/*.report_wrap .report .reportForm .request_input {background: #fff; border: 2px solid #fff; border-radius: 3px; margin: 0;}*/
/*.report_wrap .report .reportForm .input_wrap > * {display: inline-block; vertical-align: top;}*/
/*.report_wrap .report .reportForm .input_wrap > input {width: inherit; width: 120px}*/
.report_wrap .report .reportForm .input_wrap > input[type=date] {padding: 8px 8px 8px 30px;}
.report_wrap .report .reportForm .input_wrap > label {margin: 0; color: #aaa; position: absolute; top: 50%; left: 12px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

/* announcement_wrap */
.announcement_wrap {padding: 30px;}
.announcement_wrap .card_wrap {margin: 0;}
.announcement_wrap .list_wrap {border-right: 1px solid #ccc; float: left;}
.announcement_wrap .list_wrap .list .item {height: calc(100vh - 227px);}
.announcement_wrap .list_wrap .list .item li > * > span {word-break: break-word; display: inline-block; vertical-align: top;}
.announcement_wrap .list_wrap .list .item li > * > span:nth-child(1) {width: 60%;}
.announcement_wrap .list_wrap .list .item li > * > span:nth-child(2) {width: 40%; padding: 0 0 0 5px; text-align: right;}
.announcement_wrap .list_wrap .list .item li > *.title {font-size: 15px; margin: 0 0 10px;}
.announcement_wrap .list_wrap .list .item li > *.title > span:nth-child(1) {font-weight: 700;}
.announcement_wrap .list_wrap .list .item li > *.title > span:nth-child(2) {font-weight: 900; color: #7e7e7e;}

.announcement_wrap .detail_wrap {width: calc(100% - 330px); /*width: 890px;*/ min-height: calc(100vh - 110px); left: 330px;}

.announcement_view {font-size: 14px;}
.announcement_view > * {padding: 15px;}
.announcement_view .announcement_content {}
.announcement_view .announcement_content img, .announcement_view .announcement_content table {max-width: 100%;}
.announcement_view .bottom {border-top: 1px solid #ccc; display: flex; justify-content: flex-end;}

/* calendar_wrap */
.calendar_wrap {padding: 30px;}
.calendar_wrap > * {background: #fff; float: left; position: relative;}
.calendar_wrap .leftbox {width: calc(100% - 360px); height: calc(100vh - 110px); margin: 0 30px 0 0;}
.calendar_wrap .rightbox {width: 330px; /*height: calc(33.334vh - calc(170px / 3));*/ margin: 0 0 30px;}
.calendar_wrap .rightbox:last-child {margin: 0;}
.calendar_wrap > *:nth-child(2) {display: none;}

.calendar_wrap .top {position: relative;}
.calendar_wrap .top .title_wrap {font-size: 16px;}
.calendar_wrap .top .control {font-size: 16px; line-height: 1; position: absolute; top: 2px; right: 0;}
.calendar_wrap .top .control i {color: #aaa; vertical-align: middle; position: relative; cursor: pointer;}
.calendar_wrap .top .control i:hover {color: #333;}

.calendar_wrap .content {margin: 15px 0 0;}
.calendar_wrap .content > * {margin-top: 22px;}

.calendar_wrap .calendar_topFun {margin: 0; position: absolute; top: 59px; right: 15px; z-index: 10;}
.calendar_wrap .calendar_topFun .btn-group:not(:first-child) {margin: 0 0 0 7px;}
.calendar_wrap .calendar_topFun .btn-group .btn {border-radius: 4px; -webkit-transition: all 0.25s linear; transition: all 0.25s linear;}
/*.calendar_wrap .calendar_topFun .btn-group .btn:hover {background: #f3f3f3; color: #333;}*/
.calendar_wrap .calendar_topFun .btn-group .btn > span {margin: 0 0 0 4px;}
/*.calendar_wrap .calendar_topFun .btn-group i {margin: 0 4px 0 0; padding: 0; font-size: inherit;}*/
.calendar_wrap .calendar_topFun .btn-group .m-ic-group {font-size: 19px; line-height: 27px;}
.calendar_wrap .calendar_topFun .btn-group .more_horiz {padding: 0 4px;}
.calendar_wrap .calendar_topFun .btn-group .more_horiz i {font-size: 22px;}
.calendar_wrap .calendar_topFun button.btn[disabled] {background-color: #eee; border-color: #ddd; color: #aaa;}
@-moz-document url-prefix() { 
    .calendar_wrap .calendar_topFun .btn-group i.m-ic-group {top: 2px;}
}

.calendar_wrap .calendar_topFun .btn-group.teamScheduleBtn .staffImg {width: 20px; height: 20px; margin: 0 4px 0 0; display: inline-block; vertical-align: middle;}
.calendar_wrap .calendar_topFun .btn-group.teamScheduleBtn i {margin: 0 4px 0 0;}
.calendar_wrap .calendar_topFun .btn-group.teamScheduleBtn img {vertical-align: top;}
.calendar_wrap .calendar_topFun .btn-group.teamScheduleBtn .dropdown-menu > li:first-child:not(:last-child) {border-bottom: 1px solid rgba(0,0,0,.15);}
.calendar_wrap .calendar_topFun .btn-group.teamScheduleBtn .select2-selection--single {height: 30px}
.calendar_wrap .calendar_topFun .btn-group.teamScheduleBtn .select2-selection__rendered {line-height: 27px;}
.calendar_wrap .calendar_topFun .btn-group.teamScheduleBtn .select2-selection__arrow {height: 27px;}

.calendar_wrap .calendar_topFun .btn-group.newEventBtn {}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .quickControl {}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .quickControl button {border-radius: 4px 0 0 4px}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .quickControl button:before {content: "\f067"; font: normal normal normal 14px/1 FontAwesome;}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .contain {position: relative;}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .dropdown-toggle button {border: 1px solid #ccc; border-left: none; border-radius: 0 4px 4px 0;}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .dropdown-menu {}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .dropdown-menu .dropdown-wrap {padding: 0;}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .dropdown-menu li {border-bottom: 1px solid rgba(0,0,0,.15);}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .dropdown-menu li:last-child {border-bottom-color: transparent;}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .dropdown-menu li:hover {background: #000; color: #fff;}
.calendar_wrap .calendar_topFun .btn-group.newEventBtn .dropdown-menu li button {border: none; border-radius: 0; width: 100%; height: initial !important; padding: 10px;}

/*.calendar_wrap .calendar_topFun .btn-group.newEventBtn .contain:hover .dropdown-menu {display: block;}*/

/*.calendar_wrap .calendar_topFun .teamScheduleBtn .select2-selection__placeholder i {position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}*/


.calendar_wrap .calendar_display {width: 170px; padding: 10px;}
.calendar_wrap .calendar_display .title {font-weight: bold;}
.calendar_wrap .calendar_display .title:after {content: " "; background: #555; width: 100%; height: 1px; margin: 5px 0 10px; display: block;}


/*.calendar_wrap .filter_wrap {margin: 0 -3px;}
.calendar_wrap .filter_wrap li {background: #fff; border: 2px solid #fff; border-radius: 3px; color: #fff; width: calc(25% - 6px); margin: 0 3px; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; vertical-align: top; cursor: pointer; -webkit-transition: all 0.3s linear; transition: all 0.3s linear;}
.calendar_wrap .filter_wrap .LA {border-color: #62bdf3; color: #62bdf3}
.calendar_wrap .filter_wrap .LA.active, .calendar_wrap .filter_wrap .LA:hover {background: #62bdf3; color: #fff}
.calendar_wrap .filter_wrap .LW {border-color: #36c78b; color: #36c78b;}
.calendar_wrap .filter_wrap .LW.active, .calendar_wrap .filter_wrap .LW:hover {background: #36c78b; color: #fff;}
.calendar_wrap .filter_wrap .CLR {border-color: #bc83c4; color: #bc83c4;}
.calendar_wrap .filter_wrap .CLR.active, .calendar_wrap .filter_wrap .CLR:hover {background: #bc83c4; color: #fff;}
.calendar_wrap .filter_wrap .SH {border-color: #d308ee; color: #d308ee;}
.calendar_wrap .filter_wrap .SH.active, .calendar_wrap .filter_wrap .SH:hover {background: #d308ee; color: #fff;}
.calendar_wrap .filter_wrap .PH {border-color: #e40000; color: #e40000;}
.calendar_wrap .filter_wrap .PH.active, .calendar_wrap .filter_wrap .PH:hover {background: #e40000; color: #fff;}
.calendar_wrap .filter_wrap .RD {border-color: #ff7f00; color: #ff7f00;}
.calendar_wrap .filter_wrap .RD.active, .calendar_wrap .filter_wrap .RD:hover {background: #ff7f00; color: #fff;}*/


.calendar_wrap .history_wrap {margin: 0 -15px; padding: 0;}
.calendar_wrap .history_wrap .list_wrap {width: 100%;}
.calendar_wrap .history_wrap .list_wrap .list .item {height: calc(100vh - 447px);}
@supports (-ms-ime-align:auto) {
    .calendar_wrap .history_wrap .list_wrap .list .item {height: calc(100vh - 449px);}    
}
.calendar_wrap .history_wrap .list_wrap .item li {border-top: 1px solid #ddd; margin: 0 10px 0 0; padding: 10px 15px;}
.calendar_wrap .history_wrap .list_wrap .item li:first-child {border-top: none;}
.calendar_wrap .history_wrap .list_wrap .item li > * {display: block;} /* display: table-cell; when more cell */

/*
.calendar_wrap .history_wrap {height: calc(100vh - 454px); margin: 0 -15px 0 0; padding: 0 5px 0 0; position: relative;}
.calendar_wrap .history_wrap {margin: 0 -15px; padding: 0;}
.calendar_wrap .history_wrap li {border-bottom: 1px solid #ddd; margin: 0 10px 10px 0; padding: 0 0 10px; line-height: inherit; cursor: pointer;}
.calendar_wrap .history_wrap li {margin: 0 10px 0; padding: 15px;}
.calendar_wrap .history_wrap li:hover {background: #eee;}
.calendar_wrap .history_wrap li:last-child {border-bottom: none; margin: 0 10px 0 0;}
.calendar_wrap .history_wrap li:after {content: " "; display:block; clear:both;}
.calendar_wrap .history_wrap li > * {/ *width: 50%;* / float: left;}
.calendar_wrap .history_wrap li .eventType {background: none; font-weight: 700; color: #555; text-indent: 17px; position: relative;}
.calendar_wrap .history_wrap li .eventType:after {content: " "; background: #ccc; border-radius: 6px; width: 6px; height: 6px; position: absolute; top: 50%; left: 5px; transform: translateY(-50%);}
.calendar_wrap .history_wrap li .eventDay {width: 30%; font-weight: 700; text-align: right; float: right;}
.calendar_wrap .history_wrap li .eventPeriod {width: 75%; padding: 1px 0 2px; font-size: 12px; text-indent: 17px;}
.calendar_wrap .history_wrap li .eventStatus {width: 25%; font-weight: 700; text-align: right; color: #62abbf;}
*/


.calendar_wrap .label_wrap {margin: 15px 0; font-size: 12px;}
.calendar_wrap .label_wrap li {margin: 0 0 0 8px;}
.calendar_wrap .label_wrap span {border-radius: 10px; width: 10px; height: 10px; margin: 0 4px 0 0; display: inline-block;}
.calendar_wrap .label_wrap span.SH {background: #d308ee;}
.calendar_wrap .label_wrap span.PH {background: #e40000;}
.calendar_wrap .label_wrap span.RD {background: #ff7f00;}


/*.calendar_wrap .history_wrap li .event > span {background: #ccc; border: 2px solid #fff; border-radius: 3px; width: 53%; padding: 0 1px; text-align: center; color: #fff; display: inline-block; cursor: pointer;}
.calendar_wrap .history_wrap li.LA .event > span {background: #62bdf3; border-color: #62bdf3; color: #fff}
.calendar_wrap .history_wrap li.LW .event > span {background: #36c78b; border-color: #36c78b; color: #fff}
.calendar_wrap .history_wrap li.CLR .event > span {background: #bc83c4; border-color: #bc83c4; color: #fff}
.calendar_wrap .history_wrap li.SH .event > span {background: #e40000; border-color: #e40000; color: #fff}

.calendar_wrap .history_wrap li .state {padding: 2px 0; font-size: 16px; font-weight: 700; text-align: right; color: #62abbf;}
.calendar_wrap .history_wrap li .period {margin: 5px 0; padding: 0 0 0 5px; font-size: 12px;}
.calendar_wrap .history_wrap li .time {margin: 5px 0; font-size: 12px;}*/

.calendar_wrap .balanceRange {margin: 0 0 15px; padding: 0 16px;}
.calendar_wrap .balanceRange .irs {height: 100px;}
.calendar_wrap .balanceLeave {text-align: center;}
.calendar_wrap .balanceLeave:after {content: " "; display:block; clear:both;}
.calendar_wrap .balanceLeave li {border-right: 1px solid #ddd; /*width: 33.334%;*/ width: 32%; padding: 5px 0; display: inline-block;}
.calendar_wrap .balanceLeave li:last-child {border-right: none;}
.calendar_wrap .balanceLeave li > * {line-height: 1.6; text-align: center;}
.calendar_wrap .balanceLeave li .count {font-weight: 700;}
.calendar_wrap .balanceLeave li .title {font-size: 12px;}
.calendar_wrap .balanceLeave li.AL .count {/*color: rgb(18,168,157)*/}
.calendar_wrap .balanceLeave li.SL .count {/*color: rgb(236,87,47);*/}
.calendar_wrap .balanceLeave li.CL .count {/*color: rgb(247,148,30);*/}


/* request_wrap */
.request_wrap {padding: 30px; position: relative;}
.request_wrap > * {float: left;}




.request_wrap .list_wrap .list .item {height: calc(100vh - 227px);}

 /* request_wrap pending keep  keep  keep  keep  keep */
.request_wrap .list_wrap .pending .topFun {width: 26px/*40%*/; top: -36px; left: 15px;}
.request_wrap .list_wrap .pending .item li {padding: 20px 0 20px 15px;}

 /* request_wrap reqHistory keep  keep  keep  keep  keep */
.request_wrap .list_wrap .reqHistory .item {height: calc(100vh - 267px);}

.request_wrap .decision {width: 38px; position: fixed; top: 157px; left: 330px; z-index: 1;}
.request_wrap .decision > * {background: #ccc; width: 38px; height: 38px; font-size: 16px; font-weight: 300; color: #fff; white-space:nowrap; cursor: pointer; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}
.request_wrap .decision > * > * {display: inline-block; vertical-align: middle; position: relative; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}
.request_wrap .decision > * > *:nth-child(1) {left: 0;}
.request_wrap .decision > * > *:nth-child(2) {left: -35px; opacity: 0;}
.request_wrap .decision > *:hover {width: 110px;}
.request_wrap .decision > *:hover > *:nth-child(1) {left: 5px;}
.request_wrap .decision > *:hover > *:nth-child(2) {left: 5px; opacity: 1}
.request_wrap .decision .approve {background: #0066B2;}
.request_wrap .decision .reject {background: #cb2027;}

.request_wrap .judgment {/*text-align: right;*/}
.request_wrap .judgment > * {margin: 0 15px 0 0;}
.request_wrap .judgment button {/*width: 110px;*/ min-width: 110px; padding: 0 12px 0 6px; text-align: left;}

.request_wrap .detail_wrap {width: calc(100% - 330px); /*width: 890px;*/ left: 330px;}
.request_wrap .detail_wrap a:hover {text-decoration: underline;}
.request_wrap .detail_wrap .title_wrap {margin: 0 0 15px;}

.request_wrap .detail_wrap .highlightRed {color: red;}
.request_wrap .detail_wrap .highlight {font-size: 16px; font-weight: 700; line-height: 1.75;}

.request_wrap .detail_wrap .requestInfo_wrap {border-bottom: 1px solid #ddd; margin: 15px; padding: 0 0 15px;}
.request_wrap .detail_wrap .requestInfo_wrap .staffImg {width: 70px; height: 70px; margin: 0 10px 0 0;}
.request_wrap .detail_wrap .requestInfo_wrap .staffName {font-size: 24px; line-height: 34px;}
.request_wrap .detail_wrap .requestInfo_wrap .staffPosition {}
.request_wrap .detail_wrap .requestInfo_wrap .eventType {padding: 4px 8px;}
.request_wrap .detail_wrap .requestInfo_wrap .eventDay {font-size: 24px; font-weight: 300;}
.request_wrap .detail_wrap .requestInfo_wrap .eventDay > span {font-size: 14px; font-weight: 400;}
.request_wrap .detail_wrap .requestInfo_wrap .eventPeriod {font-size: 18px; font-weight: 700; line-height: 1;}
.request_wrap .detail_wrap .requestInfo_wrap .eventPeriod > span {font-size: 14px; font-weight: 400;}
.request_wrap .detail_wrap .requestInfo_wrap .eventPeriod > span.hour {margin: 0; text-align: right; display: block;}

.request_wrap .detail_wrap .requestInfo_wrap .person_wrap > * {display: inline-block; vertical-align: middle;}
.request_wrap .detail_wrap .requestInfo_wrap .spbox2_wrap {font-size: 12px;}

.request_wrap .detail_wrap .requestType_wrap {margin: 15px 15px 15px 45px;}

.request_wrap .detail_wrap .requestLeave_wrap {margin: 15px 15px 15px 45px;}
/*.request_wrap .detail_wrap .requestLeave_wrap .info {}
.request_wrap .detail_wrap .requestLeave_wrap .info > * {margin: 0 0 50px;}
.request_wrap .detail_wrap .requestLeave_wrap .info > *:last-child {margin: 0;}*/
.request_wrap .detail_wrap .requestLeave_wrap ul.info {max-width: calc(100% - 220px);}
.request_wrap .detail_wrap .requestLeave_wrap ul.info li {/*margin: 0 0 15px;*/ line-height: 2;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info li:last-child {margin: 0;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info li > * {color: #000; display:inline-block; vertical-align:top;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info li > *:nth-child(2) {max-width: calc(100% - 96px); padding: 0 30px 0 0;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info li .title {width: 96px; font-weight: inherit; color: inherit;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info li .title.small {/*width: 40px;*/ margin: 0 20px 0 30px;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info li .remark {padding: 5px 30px 5px 0; line-height: 1.25;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info li span:not(:first-child) {margin: 0 0 0 10px;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info.style2 {max-width: calc(100% - 320px);}
.request_wrap .detail_wrap .requestLeave_wrap ul.info.style2 li .title {width: 160px;}
.request_wrap .detail_wrap .requestLeave_wrap ul.info.style2 li > *:nth-child(2) {max-width: calc(100% - 160px);}

.request_wrap .detail_wrap .profileChange_wrap {margin: 15px 15px 15px 45px;}

.request_wrap .detail_wrap .warning_wrap {background: #ff0000; color: #fff; padding: 5px 10px; font-size: 14px; position: absolute; bottom: -10px; left: -10px;}
.request_wrap .detail_wrap .warning_wrap:after {content: " "; border: solid transparent; border-width: 15px; border-left-color: #ff0000; border-bottom-color: #ff0000; position: absolute; bottom: 0; right: -30px;}

.request_wrap .detail_wrap .card_wrap.reject:before {content: " "; background: #cb2027; width: 10px; height: 100%; position: absolute; left: 0; top: 0;}
.request_wrap .detail_wrap .card_wrap.approve:before {content: " "; background: #0066b3; width: 10px; height: 100%; position: absolute; left: 0; top: 0;}

.request_wrap .detail_wrap .requestMulti_wrap {min-height: calc(100vh - 155px); position: relative;}
/*.request_wrap .detail_wrap .requestMulti_wrap > * {margin: 150px 0 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}*/
.request_wrap .detail_wrap .requestMulti_wrap > * {margin: 0 auto; padding: 100px 0 0; width: 450px;}
.request_wrap .detail_wrap .requestMulti_wrap figure {width: 450px; /*height: 220px;*/}
.request_wrap .detail_wrap .requestMulti_wrap figure > svg {width: 100%; height: 100%;}
.request_wrap .detail_wrap .requestMulti_wrap .multiSelect {box-shadow: rgba(0, 0, 0, 0.5) 20px 30px 60px -60px, rgba(0, 0, 0, 0.5) -20px 30px 60px -60px; margin: 20px 0; padding: 0 100px 10px; white-space: nowrap;}
.request_wrap .detail_wrap .requestMulti_wrap .multiSelect .title {font-size: 24px; font-weight: 700; line-height: 2.5; color: #ccc;}
.request_wrap .detail_wrap .requestMulti_wrap .multiSelect .multiItem {font-size: 18px;}
.request_wrap .detail_wrap .requestMulti_wrap .multiSelect .multiItem li {line-height: 2;}
.request_wrap .detail_wrap .requestMulti_wrap .multiSelect .multiItem .LA {color: #62bdf3}
.request_wrap .detail_wrap .requestMulti_wrap .multiSelect .multiItem .LW {color: #36c78b}
.request_wrap .detail_wrap .requestMulti_wrap .multiSelect .multiItem .CLR {color: #bc83c4;}
.request_wrap .detail_wrap .requestMulti_wrap .multiSelect .multiItem .PC {color: #f6b37f;}
.request_wrap .detail_wrap .requestMulti_wrap .unSelect {text-align: center;}
.request_wrap .detail_wrap .requestMulti_wrap .judgment_wrap {text-align: center;}
.request_wrap .detail_wrap .requestMulti_wrap .judgment_wrap > * {margin: 0 15px;}

.request_wrap .detail_wrap .spbox1_wrap {margin: -15px; font-size: 12px; width: 100%; height: 100%; position: absolute;}
.request_wrap .detail_wrap .spbox1_wrap > ul {border-bottom: 1px solid #ddd; padding: 15px; white-space:nowrap; /*height: 50%;*/ position: relative;}
.request_wrap .detail_wrap .spbox1_wrap > ul:last-child:not(:first-child) {border-bottom: none;}
.request_wrap .detail_wrap .spbox1_wrap > ul > li {/*margin: 0 0 15px;*/ line-height: 1.5; position: relative; /*height: 50%;*/}
.request_wrap .detail_wrap .spbox1_wrap > ul > li:last-child {margin: 0;}
.request_wrap .detail_wrap .spbox1_wrap > ul > li:before {content: " "; height: 100%; display: inline-block; vertical-align: middle;}
.request_wrap .detail_wrap .spbox1_wrap > ul > li:after {content: " "; display:block; clear:both;}
.request_wrap .detail_wrap .spbox1_wrap > ul > li > * {width: 100%; display: inline-block; vertical-align: middle;}
.request_wrap .detail_wrap .spbox1_wrap > ul > li > * > * {width: 50%; display: inline-block; vertical-align: top;}
.request_wrap .detail_wrap .spbox1_wrap > ul > li > * > *:nth-child(1) {font-weight: 700; /*line-height: 14px;*/ position: relative; top: 1px;}
.request_wrap .detail_wrap .spbox1_wrap > ul > li > * > *:nth-child(2) {text-align: right;}
/*.request_wrap .detail_wrap .spbox1_wrap > ul:nth-child(1) {height: 40%;}
.request_wrap .detail_wrap .spbox1_wrap > ul:nth-child(1) > li {height: 50%;}
.request_wrap .detail_wrap .spbox1_wrap > ul:nth-child(2) {height: 60%;}
.request_wrap .detail_wrap .spbox1_wrap > ul:nth-child(2) > li {height: 33.333%;}*/

.request_wrap .detail_wrap .judgment_wrap {margin: 30px 15px 15px 45px;}

.request_wrap .detail_wrap .approvalStatus.vertical .approvalList > li {padding: 30px 0;}

.request_wrap .detail_wrap .teamSchedule_wrap .teamSchedule .teamEvent .teamEventList {min-width: calc(25px * 28); /*calc(25px * 31)*/}
.request_wrap .detail_wrap .teamSchedule_wrap .teamSchedule .teamEvent .thisMonth {min-width: 582px;}
.request_wrap .detail_wrap .teamSchedule_wrap .teamSchedule .teamEvent .eventPeriod {min-width: 582px;}

/* empty_wrap */
.empty_wrap {min-height: calc(100vh - 140px); position: relative;}
/*.empty_wrap > * {margin: 200px 0 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}*/
.empty_wrap > * {margin: 0 auto; padding: 100px 0 0; width: 450px;}
.empty_wrap figure {width: 450px; /*height: 220px;*/}
.empty_wrap figure > svg {width: 100%; height: 100%;}
.empty_wrap .title {box-shadow: rgba(0, 0, 0, 0.5) 20px 30px 60px -60px, rgba(0, 0, 0, 0.5) -20px 30px 60px -60px; margin: 20px 0; padding: 0 100px 10px; white-space: nowrap; font-size: 24px; font-weight: 700; line-height: 2.5; color: #ccc;}
.empty_wrap .empty {width: 100%; font-size: 50px; color: #777; text-align: center; -webkit-transform: translate(-50%,-50%) rotate(-17deg); transform: translate(-50%,-50%) rotate(-17deg); display: none;}

/* org_wrap */
.org_wrap {padding: 30px;}
.org_wrap .boxShadow {padding: 0;}
.org_wrap .org_container {position: relative;}
.org_wrap .org_container.open {}

.org_wrap .org_chart {height: 100%;}
.org_wrap .org_chart .title_wrap {margin: 0 15px; color: #fff; line-height: 46px; user-select: auto;}
.org_wrap .org_chart .title_wrap span {color: #fff;}
.org_wrap .org_chart {width: 100%; height: calc(100vh - 110px) !important;}
.org_wrap .org_chart .get-org-chart .get-oc-tb {background: #0066b3; border: none;}
.org_wrap .org_chart .get-oc-tb [class*="Btn"] {margin: 11px 10px 0 3px; cursor: pointer;}
.org_wrap .org_chart .get-oc-v {overflow-y: hidden;}
/*.org_wrap .org_chart svg .get-box {fill: #f7941e; stroke: #f59c32;}*/
.org_wrap .org_chart svg g.btn circle {opacity: 0.8;}
.org_wrap .org_chart svg g.btn:hover circle {opacity: 1;}
.org_wrap .org_chart svg [data-action] {cursor: pointer;}
.org_wrap .org_chart select {border: none; margin: 8px 10px 0 8px; padding: 4px 8px 5px 8px;}

.org_wrap .org_menu {display: flex; position: relative;}
.org_wrap .org_menu > * {border-left: 1px solid #ddd; width: 100%; display: none;}
.org_wrap .org_menu .top {padding: 11px 15px 9px;}
.org_wrap .org_menu .top .title {margin: 0 20px; font-size: 16px; line-height: 26px;}
.org_wrap .org_menu .search {border-bottom: 1px solid #ddd; box-shadow: 0px 2px 3px rgba(0,0,0,0.1); padding: 15px;}
.org_wrap .org_menu .result li {border-bottom: 1px solid #ddd; padding: 15px;}
.org_wrap .org_menu .result li:hover {background: #f4f5f5;}

.org_wrap .org_menu .input_wrap {margin: 0 0 15px;}
.org_wrap .org_menu .input_wrap:last-child {margin: 0;}
.org_wrap .org_menu .input_wrap.inputBox_wrap {margin: 0;}
.org_wrap .org_menu .input_wrap.inputBox_wrap > * {margin: 0 15px 15px 0px;}
.org_wrap .org_menu .input_wrap.inputBox_wrap:last-child {margin: 0 0 -15px;}


.org_wrap .org_menu .org_menu_controller {cursor: pointer;}
.org_wrap .org_menu .ui.ui-close {width: 26px; height: 26px;}
.org_wrap .org_menu .ui.ui-close:before, .org_wrap .org_menu .ui.ui-close:after {background: #999; width: 100%; height: 1px;}

.org_wrap .org_logo {position: absolute; bottom: 15px; left: 15px;}

.org_wrap .org_container.open .org_menu {width: 30%;}
.org_wrap .org_container.open .org_menu > * {display: block;}

/* inputForm_wrap */
.inputForm_wrap {padding: 30px;}
.inputForm_wrap > .boxShadow {margin: 0 0 150px;}
.inputForm_wrap .top {position: relative;}
.inputForm_wrap .content {margin: 15px 0 0;}
.inputForm_wrap .inPdf_wrap > .psScrollY {height: calc(100vh - 223px);}
.inputForm_wrap .topFun {}
.inputForm_wrap .bottomFun {background: rgba(0,0,0,0.7); width: 100%; padding: 9px 15px; color: #fff; position: fixed; bottom: 0; left: 0; z-index: 100;}
.inputForm_wrap .bottomFun .title_wrap {line-height: 32px;}
.inputForm_wrap .bottomFun .center_wrap {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.inputForm_wrap .bottomFun .center_wrap > * {padding: 0 20px; display: inline-block; vertical-align: top; position: relative;}
.inputForm_wrap .bottomFun .center_wrap > *:not(:first-child):before {content: " "; background: #fff; width: 1px; height: 30px; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.inputForm_wrap .bottomFun .center_wrap > * > *:not(:first-child) {margin: 0 0 0 10px;}
.inputForm_wrap .bottomFun .nextRequiredField {display: inline-block;text-decoration: underline; cursor: pointer;}

.inputForm_wrap input {background: rgba(255, 255, 0, 0.2);}
.inputForm_wrap input.datePicker, .inputForm_wrap input.datePickerWithClear {text-align: center;}
.inputForm_wrap input[readonly] {background: #fff; pointer-events: none;}
.inputForm_wrap [class*="radioBox"] input + label {background: rgba(255, 255, 0, 0.2);}
.inputForm_wrap [class*="radioBox"] input[readonly] + label {background: #fff;}

/*.inputForm_wrap input[type="text"][data-val="true"] + label:before, .inputForm_wrap input[type="date"][data-val="true"] + label:before, .inputForm_wrap input[type="number"][data-val="true"] + label:before {content: "*"; font-size: 20px; color: red; position: absolute; top: 0; right: 10px;}
.inputForm_wrap input[type="radio"][data-val="true"] + label:before, .inputForm_wrap input[type="checkbox"][data-val="true"] + label:before {content: "*"; font-size: 20px; color: red; text-indent: 0; position: absolute; top: -15px; left: -17px;}*/
.inputForm_wrap input[data-val="true"]:not([type="hidden"]) + label:before {content: "*"; font-size: 20px; color: red; position: absolute; top: 0; right: 10px;}
.inputForm_wrap input[type="radio"][data-val="true"] + label:before, .inputForm_wrap input[type="checkbox"][data-val="true"] + label:before {text-indent: 0; top: -15px; left: -17px; right: auto;}

.inputForm_wrap textarea {background: rgba(255, 255, 0, 0.2);}
.inputForm_wrap .select2-container--default .select2-selection--single {background: rgba(255, 255, 0, 0.2);}


/* inPdf_wrap */
.inPdf_wrap {background: #555; padding: 15px; position: relative;}
.inPdf_wrap > .detail {background: #fff; margin: 0; padding: 30px; position: relative;}
.inPdf_wrap > .detail > *:not(:first-child), .inPdf_wrap > .detail > .sideGrid > * > *:not(:first-child) {margin: 20px 0 0;}
.inPdf_wrap > .detail > *:last-child(:first-child) {margin: 20px 0 300px;}
.inPdf_wrap .formTab {background: #333; padding: 15px 30px; margin: -30px 0 10px -30px; font-size: 24px; color: #fff; display: inline-block; vertical-align: top;}
.inPdf_wrap .formCode {border: 3px double #333; margin: -30px 0 0; padding: 5px 20px; font-size: 60px; line-height: 1;}
.inPdf_wrap .formLogo {}
.inPdf_wrap .formBorder {border: 1px solid #333;}
.inPdf_wrap .formBorder-dot {border: 1px dotted #333;}
.inPdf_wrap .formBorder-bottom {border-bottom: 1px solid #333;}
.inPdf_wrap .font-code39 {font-size: 100px; line-height: 1;}
.inPdf_wrap h3 {font-size: 24px; font-weight: 700;}
.inPdf_wrap h4 {font-size: 14px; font-weight: 700;}
.inPdf_wrap h5 {font-size: 18px; font-weight: 700;}
.inPdf_wrap .row {margin: 15px 0 0;}
.inPdf_wrap .row:first-child {margin: 0;}
.inPdf_wrap .row.style2 {margin: 15px -15px 0;}
.inPdf_wrap .row.style2 > .col-xs-6 {margin: 0; padding: 0 15px;}
.inPdf_wrap .row.style2 > .col-xs-6:not(:first-child):not(:nth-child(2)) {margin-top: 15px;}
/*.sideGrid > .col.c3:not(:first-child), .inline-bGrid > .col.c3:not(:first-child) {margin: 0;}
.sideGrid > .col.c3:nth-child(even), .inline-bGrid > .col.c3:nth-child(even) {margin: 0 0 0 30px;}*/
.inPdf_wrap .sp1_wrap {position: absolute; top: 0; left: 50%;}
.inPdf_wrap .sp_w719 {width: 719px;}
.inPdf_wrap .taxResidence tr td {padding: 0;}
.inPdf_wrap .taxResidence input {height: 54px; padding: 0 8px; line-height: 54px; text-align: center;}
.inPdf_wrap .taxResidence textarea {padding: 8px; text-align: center;}
.inPdf_wrap .taxResidence .select2-container--default .select2-selection--single {border: none; height: 54px; text-align: center;}
.inPdf_wrap .taxResidence [class*="select2-style2"] .select2-container .select2-selection--single .select2-selection__rendered {line-height: 54px;}
.inPdf_wrap .taxResidence [class*="select2-style2"] .select2-container--default .select2-selection--single .select2-selection__arrow {height: 54px;}
.inPdf_wrap .taxResidence_col > *:nth-child(1) {border-right: 1px solid #333; width: 30px; text-align: center; line-height: 40px;}
.inPdf_wrap .taxResidence_col > *:nth-child(2) {width: calc(100% - 30px); overflow: visible;}

/* sign_wrap */
.sign_wrap {border-width: 2px 2px 0 0; border-color: #333; border-style: solid; position: relative;}
.sign_wrap figure {height: 200px; position: relative; cursor: pointer;}
.sign_wrap figure > img {max-width: calc(100% - 15px); height: calc(100% - 30px); position: absolute; top: 0; left: 0; z-index: 50;}
.sign_wrap figure figcaption {width: 100%; font-size: 40px; font-style: italic; font-weight: 300; text-align: center; position: absolute; bottom: 39px; left: 50%; z-index: 10; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
}
.sign_wrap figure.signed figcaption {display: none;}
.sign_wrap .sign_line {width: calc(100% - 15px); position: absolute; bottom: 5px; left: 0;}
.sign_wrap .sign_line .line {border-width: 0 1px 1px 1px; border-color: #333; border-style: solid; height: 24px; position: relative;}
.sign_wrap .sign_line .line:after {content: "X"; font-size: 30px; font-weight: 700; color: #333; display: block; position: absolute; bottom: 5px; left: 10px;}

/* signature_wrap */
.signature_wrap {position: relative;}
.signature_wrap .nav {background: #eee; padding: 0 0 2px; font-size: 12px;}
.signature_wrap .nav li i {margin: 0 0 10px; font-size: 20px; display: block;}
.signature_wrap .nav li.active a, .signature_wrap .nav li a:hover {color: #0066B2;}
.signature_wrap .tab-content {height: 330px; padding: 15px;}
.signature_wrap .tab-content .tab-pane > *:not(:first-child) {margin: 15px 0 0;}
.signature_wrap .mobile {height: 250px; position: relative;}

.signature_wrap .mobile .sendSMS {width: 100%; padding: 73px 0 0; display: none;}
.signature_wrap .mobile .sendSMS.active {display: block;}
.signature_wrap .mobile .sendSMS .input_wrap {width: 270px; margin: 30px auto 0; ;position: relative;}
.signature_wrap .mobile .sendSMS .input_wrap > *:nth-child(1) {padding: 0 0 0 10px; line-height: 34px; position: absolute; top: 0; left: 0;}
.signature_wrap .mobile .sendSMS .input_wrap > *:nth-child(2) {border-color: #0066b3; border-width: 1px 0 1px 1px; border-radius: 4px 0 0 4px; width: 210px; padding: 8px 8px 8px 48px;}
.signature_wrap .mobile .sendSMS .input_wrap > *:nth-child(3) {border: none; border-radius: 0 4px 4px 0; width: 60px; padding: 0; line-height: 34px;}
.signature_wrap .mobile .sendSMS .input_wrap .ui-loader-microsoft {top: 7px;}

.signature_wrap .mobile .linkExpire {width: 100%; padding: 75px 60px; display: none;}
.signature_wrap .mobile .linkExpire.active {display: block;}
.signature_wrap .mobile .linkExpire > * {display: none;}
.signature_wrap .mobile .linkExpire > *.active {display: block;}
.signature_wrap .mobile .linkExpire .msg {padding: 13px 0 0;}
.signature_wrap .mobile .linkExpire .msg > *:last-child:not(:first-child) {margin: 20px 0 0;}
.signature_wrap .mobile .linkExpire .msg a {font-weight: 700; cursor: pointer;}
.signature_wrap .mobile .linkExpire .msg a:hover {text-decoration: underline;}
.signature_wrap .mobile .ui.ui-sendSMS {font-size: 100px;}

.signature_wrap .form-group .help-block, .signature_wrap .form-group .with-errors {width: auto; margin: 0; display: block; font-size: 12px; text-align: right;}

.hsbcInfo_wrap {font-size: 14px; font-weight: 400; text-align: center; display: flex; flex-direction: row;}
.hsbcInfo_wrap > * {flex: 1;}
.hsbcInfo_wrap a {display: block;}
.hsbcInfo_wrap li a {display: flex; flex-direction: column; align-items: center;}
.hsbcInfo_wrap li .ui {margin: 15px 0;}
.hsbcInfo_wrap svg {fill: #0066b3;}


/* dashboard_wrap */
.dashboard_wrap {padding: 30px;}
.dashboard_wrap > * {min-height: calc(100vh - 110px);}
.dashboard_wrap .ui-svg {width: 800px; height: auto;}


/* POP up */
/* msgbox_wrap */
.msgbox_wrap {width: 560px; font-size: 16px;}
.msgbox_wrap .center {text-align: center;}
.msgbox_wrap .right {text-align: right;}
.msgbox_wrap .boxContent {background: #fff; padding: 0 15px;}
.msgbox_wrap .boxContent > * {padding: 15px;}
.msgbox_wrap .boxContent .break_wrap {margin: 0 0 0 74px; text-align: left;}
.msgbox_wrap .boxTop {background: #eee; padding: 15px; /*line-height: 35px;*/ color: #fff;}
.msgbox_wrap .boxTop .title {font-size: 20px; font-weight: 700; text-align: center;}
.msgbox_wrap .boxBottom {background: #fff; padding: 15px; font-weight: 300; color: #fff;}
.msgbox_wrap .boxBottom > * {margin: 0 0 0 16px; display: inline-block; vertical-align: middle;}
.msgbox_wrap .boxBottom > *:first-child {margin: 0;}
.msgbox_wrap .boxBottom .btn {min-width: 90px;}
.msgbox_wrap .msgIcon {position: relative;}
.msgbox_wrap .msgIcon i {border-radius: 100%; width: 80px; height: 80px; display: inline-block;}
.msgbox_wrap .requestDataTable, .msgbox_wrap .requestDataSingle {font-size: 14px;}
.msgbox_wrap .spbox2_wrap {width: 220px; font-size: 14px;}

.msgbox_wrap .input_wrap.reason .form-control {border-color: #bbb;}
.msgbox_wrap .input_wrap.reason .form-control:hover {border-color: #999;}

.msgbox_wrap .boxContent.underLine > * {border-bottom: 1px solid #ccc; padding: 15px;}
.msgbox_wrap .boxContent.underLine > *:first-child {border-bottom: 1px dotted #ccc;}
.msgbox_wrap .boxContent.underLine > .title_wrap:first-child {margin: 0; font-size: 24px;}
.msgbox_wrap .boxContent.underLine .title_wrap {margin: 0 0 15px; font-size: 14px;}
.msgbox_wrap .boxContent.underLine .title {/*margin: 16px 16px 30px 16px; font-size: 24px; font-weight: 700;*/}


.msgbox_wrap.msg .boxContent {padding: 15px;}
.msgbox_wrap.msg .title, .msgbox_wrap.msg .title_wrap {font-size: 24px; font-weight: 700;}
.msgbox_wrap.error .msgIcon i {background: #d13644;}
.msgbox_wrap.error .boxBottom {background: #d13644;}
.msgbox_wrap.info .msgIcon i {background: #69adc0;}
.msgbox_wrap.info .boxBottom {background: #69adc0;}
.msgbox_wrap.OK .msgIcon i {background: #5bc3a2;}
.msgbox_wrap.OK .boxBottom {background: #5bc3a2;}
.msgbox_wrap.attention .msgIcon i {background: #e8b55a;}
.msgbox_wrap.attention .boxBottom {background: #e8b55a;}
.msgbox_wrap.approve {width: 680px;}
.msgbox_wrap.approve .msgIcon i {background: #fff; border: 1px solid #3b5998; width: 140px; height: 140px;}
.msgbox_wrap.approve .msgIcon i:before {border-color: #3b5998; border-width: 16px; width: 70%; height: 32%;}
.msgbox_wrap.approve .title {font-size: 24px; font-weight: 700; color: #3b5998;}
.msgbox_wrap.approve .boxBottom {background: #3b5998;}
.msgbox_wrap.reject {width: 680px;}
.msgbox_wrap.reject .msgIcon i {background: #fff; border: 1px solid #cb2027; width: 140px; height: 140px;}
.msgbox_wrap.reject .msgIcon i:before, .msgbox_wrap.reject .msgIcon i:after {background: #cb2027; width: 70%; height: 16px;}
.msgbox_wrap.reject .title {font-size: 24px; font-weight: 700; color: #cb2027;}
.msgbox_wrap.reject .boxBottom {background: #cb2027;}
.msgbox_wrap.cancel {width: 680px;}
.msgbox_wrap.cancel .msgIcon i {background: #fff; border: 1px solid #cb2027; width: 140px; height: 140px; font-size: 100px; color: #cb2027; line-height: 140px;}
.msgbox_wrap.cancel .title {color: #cb2027;}
.msgbox_wrap.cancel .boxBottom {background: #cb2027;}
/* msgbox_wrap confirm */
.msgbox_wrap.confirm {width: 540px; font-size: 14px;}
.msgbox_wrap.confirm .requestDataTable {text-align: left;}
.msgbox_wrap.confirm .boxBottom {background: #3b5998;}
.msgbox_wrap.confirm .title {font-size: 24px; font-weight: 700; color: #3b5998;}
/* msgbox_wrap requestInfo */
.msgbox_wrap.requestInfo {/*width: 700px;*/ width: 880px;}
.msgbox_wrap.requestInfo .title_wrap {/*margin: 0 0 30px;*/}
/*.msgbox_wrap.requestInfo .title_wrap span {color: inherit; font-weight: inherit;}*/
.msgbox_wrap.requestInfo .title_wrap i {display: none;}
.msgbox_wrap.requestInfo .boxTop {background: #f6b37f;}
.msgbox_wrap.requestInfo .boxTop .title {text-align: center; color: #fff;}
.msgbox_wrap.requestInfo .boxBottom {}
.msgbox_wrap.requestInfo .requestDataTable {}
.msgbox_wrap.requestInfo .requestDataTable .remark {padding: 5px 30px 5px 0; line-height: 1.25;}
.msgbox_wrap.requestInfo .requestDataTable .ui.fa-link {font-size: 16px; vertical-align: middle;}
/*.msgbox_wrap.requestInfo .approvalStatus_wrap {text-align: left;}*/
.msgbox_wrap.requestInfo .approvalStatus_wrap .title {margin: 30px 0; font-size: 14px; font-weight: 700;}
.msgbox_wrap.requestInfo .btn_wrap {margin: 30px 0 15px 0;}
.msgbox_wrap.requestInfo .btn_wrap > * {display: inline-block;}
.msgbox_wrap.requestInfo .btn_wrap .btn {width: 200px; height: 42px !important; font-weight: 700;}
/* msgbox_wrap requestInfo PC*/
/*.msgbox_wrap.requestInfo.PC {width: 880px;}
.msgbox_wrap.requestInfo.PC .boxTop {background: #f6b37f;}
.msgbox_wrap.requestInfo.PC .boxTop .title {text-align: center; color: #fff;}
.msgbox_wrap.requestInfo.PC .boxBottom {/*background: #f6b37f;* /}*/
/*.msgbox_wrap.requestInfo.PC .title {font-size: 24px; font-weight: 700; color: #f6b37f;}*/
/* msgbox_wrap signature*/
.msgbox_wrap.signature {width: 656px; font-size: 14px;}
/* msgbox_wrap requestDetail*/
.msgbox_wrap.requestDetail {width: 900px;}
.msgbox_wrap.requestDetail .card_wrap {margin: 15px 0 0;}
.msgbox_wrap.requestDetail .card_wrap:first-child {margin: 0;}
.msgbox_wrap.requestDetail .boxContent {padding: 15px;}
.msgbox_wrap.requestDetail .profileChange_wrap:after {left: 475px;}

.msgbox_wrap .profileChange_wrap li > *:nth-child(1) {width: 20%;}
.msgbox_wrap .profileChange_wrap li > *:nth-child(2) {width: 40%;}
.msgbox_wrap .profileChange_wrap li > *:nth-child(3) {width: 40%;}

.msgbox_wrap.style1_wrap {width: initial; font-size: 14px;}
.msgbox_wrap.style1_wrap .title, .msgbox_wrap.normal_wrap .title_wrap {font-size: 24px; font-weight: 700; color: #3b5998;}
.msgbox_wrap.style1_wrap .boxBottom {padding: 15px 30px;}

/* newRequest_wrap */
.msgbox_wrap.formStyle {}
.msgbox_wrap.formStyle .input_wrap.flexGrid {font-size: 14px; text-align: left;}
.msgbox_wrap.formStyle .input_wrap.flexGrid label {min-width: 150px; margin: 0; padding: 7px 10px 7px 10px; position: relative; z-index: 1;}
.msgbox_wrap.formStyle .input_wrap.flexGrid label i {position: absolute; top: 50%; right: -25px; transform: translateY(-50%);}
.msgbox_wrap.formStyle .input_wrap.flexGrid input {padding: 8px;}
.msgbox_wrap.formStyle .input_wrap.flexGrid input.datePicker {padding: 8px 8px 8px 30px;}

/* newRequest_wrap */
.msgbox_wrap.newRequest {width: 700px; font-size: 14px;}
.msgbox_wrap.newRequest .boxContent {padding: 0 15px;}
/*.msgbox_wrap.newRequest .boxContent > * {border-bottom: 1px solid #ccc; margin: 0; padding: 15px;}*/
/*.msgbox_wrap.newRequest .boxContent > *:first-child {border-bottom: 1px dotted #ccc;}*/
/*.msgbox_wrap.newRequest .boxContent > .title_wrap:first-child {font-size: 24px;}*/
.msgbox_wrap.newRequest .requestForm {height: 275px;}
.msgbox_wrap.newRequest .requestForm:after {content: " "; display:block; clear:both;}
.msgbox_wrap.newRequest .requestForm .row {margin: 20px -10px 0;}
.msgbox_wrap.newRequest .requestForm .row:first-child {margin: 0 -10px 0;}
.msgbox_wrap.newRequest .requestForm .row > * {margin: 0 10px; float: left;}
.msgbox_wrap.newRequest .requestForm .row .inter-row > * {margin: 0 0 20px;}
.msgbox_wrap.newRequest .requestForm .row .inter-row > *:last-child {margin: 0;}
.msgbox_wrap.newRequest .requestForm .request_input {background: #fff; border: 2px solid #fff; border-radius: 3px; margin: 0;}
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap {/*border-left: 1px solid #9acd82; *//*padding: 3px 0;*/ padding: 1px 0; float: left; position: relative;}
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap:not(:first-child) {margin: 0 0 0 20px;}
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap:after {/*content: " ";*/ content: none; background: #9acd82; width: 1px; height: calc(100% + 4px); position: absolute; top: -2px; left: 0;}
/*.msgbox_wrap.newRequest .requestForm .request_input .input_wrap:first-child {border: none;}*/
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap:first-child:after {background: none;}
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap > * {display: inline-block; vertical-align: top;}
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap > input {max-width: 150px; width: inherit; width: 120px}
@-moz-document url-prefix() { 
    .msgbox_wrap.newRequest .requestForm .request_input .input_wrap > input {width: 150px}
}
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap > input[type=date], .msgbox_wrap.newRequest .requestForm .request_input .input_wrap > .withIcon {padding: 8px 8px 8px 30px;}
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap > label {width: 100px; margin: 0; padding: 7px 0 7px 10px; font-weight: 400; color: #aaa; position: relative;}
.msgbox_wrap.newRequest .requestForm.otClaim .request_input .input_wrap > label {width: 120px;}
.msgbox_wrap.newRequest .requestForm .request_input .input_wrap > label i {position: absolute; top: 50%; right: -25px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
/*.msgbox_wrap.newRequest .requestForm .request_input .select2-selection--single {border: none; border-radius: 0px;}
.msgbox_wrap.newRequest .requestForm .request_input .select2-selection--single .select2-selection__rendered {line-height: 34px;}*/

.msgbox_wrap.newRequest .requestForm .dataError {border: 2px solid red;}
.msgbox_wrap.newRequest .requestForm .sp_width-1.input_wrap {}
.msgbox_wrap.newRequest .requestForm .sp_width-1.input_wrap .select2-selection__rendered {padding: 0 32px 0 12px;}
.msgbox_wrap.newRequest .requestForm .sp_width-2.input_wrap {}
.msgbox_wrap.newRequest .requestForm .sp_width-2.input_wrap label {width: 44px; padding: 7px 0 7px 14px;}
.msgbox_wrap.newRequest .requestForm .sp_width-2.input_wrap input {width: 80px; margin: 0; text-align: center;}
.msgbox_wrap.newRequest .requestForm .sp_width-2.input_wrap .sp_label {width: 16px; margin: 0; visibility: hidden;}
.msgbox_wrap.newRequest .requestForm .sp_width-2.input_wrap .sp_label i {display: none; visibility: visible;}
.msgbox_wrap.newRequest .requestForm .sp_width-3.input_wrap {}
.msgbox_wrap.newRequest .requestForm .sp_width-3.input_wrap input {width: 120px;}

.msgbox_wrap.newRequest .requestForm .requestType .option-group {width: 208px;}
.msgbox_wrap.newRequest .requestForm .requestToDate .input_wrap > label {width: 40px;}

.msgbox_wrap.newRequest .requestForm .requestUnit {float: right;}
.msgbox_wrap.newRequest .requestForm .requestProvide {/*color: #fff;*/}
/*.msgbox_wrap.newRequest .requestForm .requestProvide .squared_1 label {border-radius: 3px;}
.msgbox_wrap.newRequest .requestForm .requestProvide .squared_1 label,
.msgbox_wrap.newRequest .requestForm .requestProvide .squared_1 label:after,
.msgbox_wrap.newRequest .requestForm .requestProvide .squared_1 input[type=checkbox]:checked + label {border-color: #fff;}*/

.msgbox_wrap.newRequest .requestForm .requestDisplay {border: 1px solid #ccc; border-radius: 4px; min-width: 200px; padding: 5px 10px; line-height: 24px;}
.msgbox_wrap.newRequest .requestForm .requestDisplay > *:after {content: " "; display:block; clear:both;}
.msgbox_wrap.newRequest .requestForm .requestDisplay .input_wrap {padding: 0 12px;}
.msgbox_wrap.newRequest .requestForm .requestDisplay .title {margin: 0; font-size: 14px; font-weight: 500; float: left;}
.msgbox_wrap.newRequest .requestForm .requestDisplay .count {text-align: right; float: right;}
.msgbox_wrap.newRequest .requestForm .requestDisplay .count > * {/*margin: 0 3px 0 0;*/ margin: 0 3px;}
.msgbox_wrap.newRequest .requestForm .requestDisplay .count > .unit {width: 15px; text-align: left;}

.msgbox_wrap.newRequest .requestForm .requestExclude {position: relative;}
.msgbox_wrap.newRequest .requestForm .requestExclude .excludeDay {/*width: 125px;*/}
.msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate {font-size: 12px; line-height: 1; float: right; position: absolute; top: 6px; left: 52px;}
.msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate i {color: #0066b3; cursor: pointer;}
.msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate .excludeDateDetail {background: #fff; border: 1px solid #ccc; border-radius: 4px; min-height: 26px; /*width: 75px;*/ padding: 7px 10px; line-height: 1.2; position: absolute; top: -6px; left: 24px; z-index: 11; display: none; -webkit-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.4); box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.4);}
.msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate .excludeDateDetail:before {content: " "; border-top: 8px solid rgba(0, 0, 0, 0); border-bottom: 8px solid rgba(0, 0, 0, 0); border-right: 8px solid #ccc; position: absolute; top: 4px; left: -8px; z-index: 1;}
.msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate .excludeDateDetail:after {content: " "; border-top: 6px solid rgba(0, 0, 0, 0); border-bottom: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid #fff; position: absolute; top: 6px; left: -6px; z-index: 2;}
.msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate .excludeDateDetail > * {white-space: nowrap;}
.msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate:hover .excludeDateDetail {display: block;}
.msgbox_wrap.newRequest .requestForm .requestExclude .title:hover .excludeDateDetail {display: block;}

.msgbox_wrap.newRequest .requestForm .requestTaken {border-top: 1px solid #ccc; margin: 6px 0 0; padding: 2px 0 0;}
.msgbox_wrap.newRequest .requestForm .requestTaken .title {line-height: 31px;}
.msgbox_wrap.newRequest .requestForm .requestTaken .takenTime {background: #fff; border-radius: 3px;}
.msgbox_wrap.newRequest .requestForm .requestTaken .takenTime > * {display: inline-block; vertical-align: middle;}
.msgbox_wrap.newRequest .requestForm .requestTaken .takenTime .takenLength {width: 60px /*calc(100% - 50px)*/; margin: 0; font-size: 24px; font-weight: 700; text-align: center;}
.msgbox_wrap.newRequest .requestForm .requestTaken .takenTime .takenLength input {border: none; width: 100%; text-align: right;}

.msgbox_wrap.newRequest .requestForm .requestDisplayUnit {font-size: 12px; text-align: right;}

.msgbox_wrap.newRequest .approvalStatus_wrap .title {margin: 0 0 30px; font-size: 14px; font-weight: 700;}

.msgbox_wrap.newRequest .btn_wrap {/*padding: 0 0 30px 0; */text-align: center;}
.msgbox_wrap.newRequest .btn_wrap > * {display: inline-block;}
.msgbox_wrap.newRequest .btn_wrap .btn {width: 200px; height: 42px !important; font-weight: 700;}

.msgbox_wrap.newRequest .requestForm .requestDay {display: none !important;}
.msgbox_wrap.newRequest .requestForm .requestDay.active {display: block !important;}
.msgbox_wrap.newRequest .requestForm .input_wrap .requestDay.active {display: inline-block !important;}
.msgbox_wrap.newRequest .requestForm .requestHour {display: none !important;}
.msgbox_wrap.newRequest .requestForm .requestHour.active {display: block !important;}
.msgbox_wrap.newRequest .requestForm .input_wrap .requestHour.active {display: inline-block !important;}

/*.msgbox_wrap.newRequest .requestForm .requestDisplay .requestDay.activeorchid {display: inline-block !important;}
.msgbox_wrap.newRequest .requestForm .requestDisplay .requestHour.active {display: inline-block !important;}*/

/* Company Announcement*/
.msgbox_wrap.announcement_view {width: 700px;}
.msgbox_wrap.announcement_view .announcement_content {width: 100%; height: 400px; overflow: auto;}

.msgbox_wrap .scroll_wrap {max-height: 266px; position: relative;}
.msgbox_wrap .requestFormTable {background: #fff;}
.msgbox_wrap .requestFormTable li {border-bottom: 1px solid #ddd;}
.msgbox_wrap .requestFormTable li:last-child {border-bottom: none;}
.msgbox_wrap .requestFormTable li > *:nth-child(1) {}
.msgbox_wrap .requestFormTable .squared_1 {margin: 9px 0;}

.requestDataTable .requestDay {display: none;}
.requestDataTable .requestDay.active {display: inline;}
.requestDataTable li > .requestDay.active {display: inline-block;}
.requestDataTable .requestHour {display: none;}
.requestDataTable .requestHour.active {display: inline;}
.requestDataTable li > .requestHour.active {display: inline-block;}

/* actionHistory_wrap */
/*.actionHistory_wrap {background: #fff; width: 800px; padding: 30px; text-align: left;}
.actionHistory_wrap .title {font-weight: 700;}
.actionHistory_wrap .title_wrap {margin: 0 0 30px;}
.actionfilter {}
.actionfilter:after {content: " "; display:block; clear:both;}
.actionfilter > * {margin: 15px 0;}
.actionfilter .requestDate {line-height: 34px;}
.actionfilter .requestDate .input_wrap {display: inline-block; vertical-align: top;}
.actionfilter .requestDate .input_wrap > * {display: inline-block; vertical-align: top;}
.actionfilter .requestDate .input_wrap > *:nth-child(1) {width: 110px; margin: 0;}
.actionfilter .requestDate .input_wrap > *:nth-child(2) {width: 158.5px; text-align: center;}
.actionfilter .requestDate .input_wrap:nth-child(2) > *:nth-child(1) {width: 50px; text-align: center;}
.actionfilter .requestDate .input_wrap label {position: relative;}
.actionfilter .requestDate .input_wrap label i {font-size: 16px; color: #ddd; position: absolute; top: 50%; right: -26px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.actionfilter .requestType:after {content: " "; display:block; clear:both;}
.actionfilter .requestType > * {float: left;}
.actionfilter .requestType > *:nth-child(1) {width: 110px; line-height: 28px;}
.actionfilter .requestType > *:nth-child(2) {width: calc(100% - 110px);}
.actionfilter .requestLeave {visibility: hidden; opacity: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear;}
.actionfilter .requestLeave.active {visibility: visible; opacity: 1;}
.actionfilter .requestLeave:after {content: " "; display:block; clear:both;}
.actionfilter .requestLeave > * {float: left;}
.actionfilter .requestLeave > *:nth-child(1) {width: 110px; line-height: 28px;}
.actionfilter .requestLeave > *:nth-child(2) {width: calc(100% - 110px);}

.actionfilter .filter_wrap {margin: 0 -3px -5px;}
.actionfilter .filter_wrap li {background: #fff; border: 2px solid #fff; border-radius: 3px; color: #fff; margin: 0 3px 5px 3px; padding: 2px 10px; text-align: center;line-height: inherit; display: inline-block; vertical-align: top; cursor: pointer; -webkit-transition: all 0.3s linear; transition: all 0.3s linear;}
.actionfilter .filter_wrap .ALL {border-color: #9acd82; color: #9acd82}
.actionfilter .filter_wrap .ALL.active {background: #9acd82; color: #fff;}
.actionfilter .filter_wrap .LA {border-color: #62bdf3; color: #62bdf3;}
.actionfilter .filter_wrap .LA.active {background: #62bdf3; color: #fff;}
.actionfilter .filter_wrap .LW {border-color: #36c78b; color: #36c78b;}
.actionfilter .filter_wrap .LW.active {background: #36c78b; color: #fff;}
.actionfilter .filter_wrap .CLR {border-color: #bc83c4; color: #bc83c4;}
.actionfilter .filter_wrap .CLR.active {background: #bc83c4; color: #fff;}
.actionfilter .filter_wrap .PC {border-color: #f6b37f; color: #f6b37f;}
.actionfilter .filter_wrap .PC.active {background: #f6b37f; color: #fff;}
.actionfilter .filter_wrap .CLLN {border-color: #e91e63; color: #e91e63;}
.actionfilter .filter_wrap .CLLN.active {background: #e91e63; color: #fff;}

.actionHistory {margin: 30px -30px -30px;}
.actionHistory > *:after {content: " "; display:block; clear:both;}
.actionHistory.tableList .top > *:nth-child(1), .actionHistory.tableList ul li > *:nth-child(1) {width: 19.25%;}
.actionHistory.tableList .top > *:nth-child(2), .actionHistory.tableList ul li > *:nth-child(2) {width: 13.25%;}
.actionHistory.tableList .top > *:nth-child(3), .actionHistory.tableList ul li > *:nth-child(3) {width: 16%;}
.actionHistory.tableList .top > *:nth-child(4), .actionHistory.tableList ul li > *:nth-child(4) {width: 16%;}
.actionHistory.tableList .top > *:nth-child(5), .actionHistory.tableList ul li > *:nth-child(5) {width: 10%;}
.actionHistory.tableList .top > *:nth-child(6), .actionHistory.tableList ul li > *:nth-child(6) {width: 13%;}
.actionHistory.tableList .top > *:nth-child(7), .actionHistory.tableList ul li > *:nth-child(7) {width: 12.5%;}
.actionHistory.tableList .top > *:nth-child(3), .actionHistory.tableList .top > *:nth-child(4), .actionHistory.tableList .top > *:nth-child(6) {cursor: pointer;}
.actionHistory.tableList ul li.LA .pg-bar {background: #62bdf3;}
.actionHistory.tableList ul li.LW .pg-bar {background: #36c78b;}
.actionHistory.tableList ul li.CLR .pg-bar {background: #bc83c4;}
.actionHistory.tableList ul li.PC .pg-bar {background: #f6b37f;}
.actionHistory.tableList ul li.CLLN .pg-bar {background: #e91e63;}*/

/* leaveBalance_wrap */
.leaveBalance_wrap {background: #fff; width: 600px; padding: 0 15px;}
.leaveBalance_wrap > * {padding: 15px;}
.leaveBalance_wrap .title {font-weight: 700;}
.leaveBalance_wrap .title_wrap {border-bottom: 1px dotted #ccc; font-size: 24px;}
.leavefilter {margin: 0 0 15px;}
.leavefilter > *:not(:last-child) {margin: 0 30px 0 0;}
.leavefilter .requestType {line-height: 34px;}
/*.leavefilter .requestType .input_wrap > * {display: inline-block; vertical-align: top;}*/
.leavefilter .requestType .input_wrap > *:nth-child(1) {width: 65px; margin: 0;}
.leavefilter .requestType .input_wrap > *:nth-child(2) {}

.leavefilter .requestDate {line-height: 34px;}
.leavefilter .requestDate .input_wrap > * {display: inline-block; vertical-align: top;}
.leavefilter .requestDate .input_wrap > *:nth-child(1) {width: 65px; margin: 0;}
.leavefilter .requestDate .input_wrap > *:nth-child(2) {width: 130px; padding: 8px 8px 8px 34px;}
@-moz-document url-prefix() { 
    .leavefilter .requestDate .input_wrap > *:nth-child(2) {width: 155px;}
}
.leavefilter .requestDate .input_wrap label {position: relative;}
.leavefilter .requestDate .input_wrap label i {font-size: 16px; color: #ddd; position: absolute; top: 50%; right: -26px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

.leaveBalance {position: relative}
.leaveBalance .top {text-align: right; /*line-height: 1.2;*/ line-height: 34px; position: absolute; top: -50px; /*right: 15px;*/ right: 0;}
.leaveBalance .top span {font-size: 12px;}
.leaveBalance .top > *:nth-child(1) {font-size: 16px; font-weight: 700;}
.leaveBalance .top > *:nth-child(2) {font-size: 12px; display: none;}
.leaveBalance ul {font-size: 20px; font-weight: 700;}
.leaveBalance ul li {margin: 0 0 20px; line-height: 34px; display: flex;}
/*.leaveBalance ul li > * {display: inline-block; vertical-align: middle;}*/
.leaveBalance ul li > *:nth-child(1) {width: 35px; margin: 0 30px 0 0; text-align: right;}
.leaveBalance ul li > *:nth-child(2) {width: calc(100% - 165px)}
.leaveBalance ul li > *:nth-child(3) {width: 20px; text-align: right;}
.leaveBalance ul li > *:nth-child(4) {/*width: 80px;*/ width: 120px; text-align: right;}
.leaveBalance ul li > * > span {font-size: 12px; font-weight: 300; line-height: 1; display: block;}
.leaveBalance ul li.plus .plusSign, .leaveBalance ul li.plus .amount {color: #0066B2;}
.leaveBalance ul li.minus .plusSign, .leaveBalance ul li.minus .amount {color: #cb2027;}
.leaveBalance .bottom {text-align: right;}
.leaveBalance .bottom .balance {display: inline-block; vertical-align: top;}
.leaveBalance .bottom .balance > *:nth-child(1) {font-size: 24px; font-weight: 700;}
.leaveBalance .bottom .balance > *:nth-child(1) > *:nth-child(1) {margin: 0 30px 0 0;}
.leaveBalance .bottom .balance > *:nth-child(2) {font-size: 12px; line-height: 16px;}
.leaveBalance .bottom .balance.plus > *:nth-child(1) {color: #0066B2;}
.leaveBalance .bottom .balance.minus > *:nth-child(1) {color: #cb2027;}
.leaveBalance .vis-hidden {visibility: hidden;}

.leaveBalance .dropdown-hover {margin: 0 0 0 5px; font-weight: 500; display: inline; vertical-align: top; top: -1px;}
.leaveBalance .dropdown-hover .ui {font-size: 14px;}
.leaveBalance .dropdown-hover .dropdown-hover-contain {top: calc(50% + 2px); -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.leaveBalance .dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap {width: 370px; height: 215px; font-size: 12px;}
.leaveBalance .dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap:before, .leaveBalance .dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap:after {top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.leaveBalance *:hover > .dropdown-hover .dropdown-hover-contain {display: block;}
.leaveBalance .dropdown-hover .dataTables_wrapper {position: static;}
.leaveBalance .dropdown-hover .dataTables_wrapper .dataTables_paginate {position: absolute; right: 10px; bottom: 5px;}

/* setting_wrap */
.setting_wrap {background: #f0eff5; /* width: 420px; height: 464px; */ text-align: left; overflow: hidden; position: relative;}
.setting_wrap > * {background: #eee; box-shadow: rgba(0, 0, 0, 0.2) 0 0px 20px 0px; width: 100%; height: 100%; position: absolute; top: 0;}
.setting_wrap > * {left: 120%; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; visibility: hidden;}
.setting_wrap > .active {left: 0; visibility: visible;}
.setting_wrap > .default {left: 0; visibility: visible;}
.setting_wrap .top {background: #0066b3; /*border-bottom: 1px solid #ccc;*/ color: #fff; position: relative;}
.setting_wrap .top .user {}
.setting_wrap .top .user:after {content: " "; display:block; clear:both;}
.setting_wrap .top .user > * {float: left;}
.setting_wrap .top .user .staffImg {width: 50px; height: 50px; margin: 15px 15px 15px 30px;}
.setting_wrap .top .user .userInfo {width: calc(100% - 149px); margin: 17px 0 18px;}
.setting_wrap .top .user .userInfo .staffName {font-size: 20px;}
.setting_wrap .top .user .userInfo .staffPosition {font-size: 12px;}
.setting_wrap .top .user .userInfo .staffPosition > span {color: #fff;}
.setting_wrap .top .user .icon-settings {margin: 28px 30px 28px 0; font-size: 24px;}
.setting_wrap .top .title {font-size: 18px; font-weight: 700; text-align: center; line-height: 50px;}
.setting_wrap .top [class^="stBtn"] {position: absolute; top: 50%; cursor: pointer; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.setting_wrap .top [class^="stBtn"][class$="Left"] {left: 0;}
.setting_wrap .top [class^="stBtn"] .ui {margin: 0 -10px 0 0px; font-size: 50px; vertical-align: middle; top: -1px; left: 5px;}
.setting_wrap .content {/*height: 414px;*/   position: relative;}
.setting_wrap .bottom {width: 100%; position: absolute; bottom:0; left: 0;}
.setting_wrap .bottom {background: #0066b3; padding: 15px; font-weight: 300; color: #fff;}
.setting_wrap .bottom > * {margin: 0 0 0 16px; display: inline-block; vertical-align: middle;}
.setting_wrap .bottom > *:first-child {margin: 0;}
.setting_wrap .bottom.center {text-align: center;}
.setting_wrap .caption {background: #fffef3; border-bottom: 1px solid #ccc; padding: 10px 20px; font-size: 12px;}
.setting_wrap .caption .ui.ui-info {border: 1px solid #ff7f00; border-radius: 16px; width: 16px; height: 16px;}
.setting_wrap .caption .ui.ui-info:before, .setting_wrap .caption .ui.ui-info:after {background: #ff7f00;}
.setting_wrap .caption.flexGrid > *:nth-child(1) {margin: 0 8px 0 0;}
.setting_wrap .caption2 {background: #fff; padding: 20px 20px 0; font-size: 16px;}

.setting_wrap [data-setting="stHome"] {/*background: #fff;*/ width: 420px; position: relative;}
/*.setting_wrap [data-setting="stHome"] .content {height: 389px;}*/
.setting_wrap [data-setting="stHome"] .iosList_wrap {}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListLead {width: 25%; }
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody {width: 75%;}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody {font-size: 18px; /*line-height: 70px;*/}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody > *:first-child {margin: 30px 0; line-height: 1.2;}
.setting_wrap [data-setting="stHome"] .iosList_wrap li:last-child .iosListBody > *:first-child {margin: 30px 0 31px;}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody > *:first-child > span {font-size: 12px; display: block;}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody .iosListBodyRight {font-size: 24px;}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody.security_wrap > *:first-child {margin: 18px 0;}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody.security_wrap .info {margin: 10px 0 0; font-size: 12px; display: block}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody.security_wrap .info > * {display: flex;}
.setting_wrap [data-setting="stHome"] .iosList_wrap li .iosListBody.security_wrap .info > * > *:nth-child(1) {width: 80px;}
.setting_wrap [data-setting="stHome"] .unregister_wrap {padding: 15px}
.setting_wrap [data-setting="stHome"] .unregister_wrap button {width: 100%; padding: 8px 12px;}
.setting_wrap [data-setting="stHome"] .unregister_wrap button i {font-size: 20px; top: -2px; margin-right: 3px;}
.setting_wrap [data-setting="stAbout"] {background: #fff;}
.setting_wrap [data-setting="stAbout"] .content {height: calc(100% - 50px);}

.systemFormat {margin: 40px auto 0; text-align: center; line-height: 24px;}
.systemFormat .timeZone {margin: 0 0 15px;}
.systemFormat .timeZone .title {font-size: 18px;}
.systemFormat .dateFormat span {width: 120px; display: inline-block; vertical-align: top;}
.systemFormat .dateFormat span:nth-child(1) {font-weight: 700; text-align: left;}
.systemFormat .dateFormat span:nth-child(2) {text-align: right;}

.setting_wrap .restPassword_wrap .restPasswordRule {margin: 20px 0 30px;}

.setting_wrap .title_wrap {padding: 10px; font-size: 18px;}

.setting_wrap .form_wrap {background: #fff; padding: 20px}
.setting_wrap .form_wrap .input_wrap {margin: 0 0 14px;}
.setting_wrap .form_wrap .input_wrap:last-child {margin: 0;}
.setting_wrap .form_wrap .small {font-size: 12px; text-align: right;}

.setting_wrap .mobile_wrap label {border-right: 1px solid #ccc; margin: 10px 0; padding: 0 8px; color: #999; line-height: 1; position: absolute; bottom: 0; left: 0;}
.setting_wrap .mobile_wrap input {padding: 8px 8px 8px 56px;}

.setting_wrap .otp_wrap label {margin: 11px 0 9px; padding: 0 0 0 13px; line-height: 1; position: absolute; bottom: 0; left: 0;}
.setting_wrap .otp_wrap input {padding: 8px 8px 8px 34px;}

.setting_wrap .about_wrap {font-size: 12px; text-align: center;}
/*.setting_wrap .about_wrap a {text-decoration: underline;}*/
.setting_wrap .about_wrap .center {width: 100%; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.setting_wrap .about_wrap .center > * {margin: 20px 0;}
.setting_wrap .about_wrap .center > *:nth-child(4) {margin: 40px 0 20px; display: inline-block;}
.setting_wrap .about_wrap .center > *:nth-child(4) li {margin: 0 15px; text-align: center; display: inline-block;}
.setting_wrap .about_wrap .center > *:nth-child(4) li i {margin: 0 0 5px; font-size: 30px; display: block; vertical-align: middle;}
.setting_wrap .about_wrap .bottom {background: #fff; color: #555;}
.setting_wrap .about_wrap span {margin: 0 5px;}

.setting_wrap .delegateBtn {border: 1px solid #ccc; border-radius: 4px; padding: 4px; cursor: pointer;}
.setting_wrap .delegateBtn > * {display: inline-block; vertical-align: middle;}
.setting_wrap .delegateBtn .img_wrap {width: 20px; height: 20px; margin: 0 4px 0 0; position: relative; overflow: hidden;}
.setting_wrap .delegateBtn .img_wrap:before, .setting_wrap .delegateBtn .img_wrap:after {content: " "; background: #ccc; width: 70%; height: 2px; position: absolute; top: -200%; left: 50%;}
.setting_wrap .delegateBtn .img_wrap:before {-webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg);}
.setting_wrap .delegateBtn .img_wrap:after {-webkit-transform: translate(-50%,-50%) rotate(-45deg); transform: translate(-50%,-50%) rotate(-45deg);}
.setting_wrap .delegateBtn .img_wrap .staffImg {width: 100%; height: 100%; visibility: visible; opacity: 1;}
.setting_wrap .delegateBtn .img_wrap img {}
.setting_wrap .delegateBtn .img_wrap {font-size: 12px; font-weight: 300;}

.setting_wrap .delegateBtn:hover .img_wrap .staffImg {visibility: hidden; opacity: 0;}
.setting_wrap .delegateBtn:hover .img_wrap:before, .setting_wrap .delegateBtn:hover .img_wrap:after {top: 50%;}

.setting_wrap .ui.ui-icon {font-size: 24px; color: #0066b3;}

.setting_wrap .stHome .iosListLead .ui {}
.setting_wrap .stHome .iosListLead .ui.ui-password {width: 44px; height: 44px;}
.setting_wrap .stHome .iosListLead .ui.ui-language {width: 42px; height: 42px;}
.setting_wrap .stHome .iosListLead .ui.ui-delegate {width: 32px; height: 32px;}
.setting_wrap .stHome .iosListLead .ui.ui-exclamation {border: 3px solid #f7941e; border-radius: 100%; width: 30px; height: 30px;}
.setting_wrap .stHome .iosListLead .ui.ui-exclamation:before, .setting_wrap .stHome .ui.ui-exclamation:after {background-color: #0066b3; width: 13%;}
.setting_wrap .stHome .iosListLead .ui.ui-security {width: 50px; height: 50px;}

/* login_wrap */
.login_wrap {
    /*background: #1f3649;
    background: -moz-radial-gradient(center, ellipse cover, #1f3649 0%, #17253d 44%, #040d11 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #1f3649), color-stop(44%, #17253d), color-stop(100%, #040d11));
    background: -webkit-radial-gradient(center, ellipse cover, #1f3649 0%, #17253d 44%, #040d11 100%);
    background: -o-radial-gradient(center, ellipse cover, #1f3649 0%, #17253d 44%, #040d11 100%);
    background: -ms-radial-gradient(center, ellipse cover, #1f3649 0%, #17253d 44%, #040d11 100%);
    background: radial-gradient(ellipse at center, #1f3649 0%, #17253d 44%, #040d11 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@account-color-dark', endColorstr='#040d11', GradientType=1);*/
    background: #00071b;
    width: 100%; min-height: 100vh; position: relative;
}
.login_wrap .v-content-Top {}
.login_wrap .v-content-Mid {position: absolute; /*top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);*/ top: calc(50% - 171px); left: calc(50% - 300px);}
.login_wrap .v-content-Bot {}
.login_wrap .box_wrap {border: 4px solid #f7941e; height: 400px; display: table;}
.login_wrap .apps_info {background: #0066b3; width: 265px; padding: 30px; color: #fff; display: table-cell; vertical-align: middle;}
.login_wrap .apps_info .logo {margin: 0 0 30px; font-size: 50px; font-weight: 700; line-height: 1.2;}
.login_wrap .apps_info .logo > img {width: 150px; margin: 0 0 15px;}
.login_wrap .apps_info .logo > span {font-size: 18px; font-weight: 300; display: block;}
.login_wrap .apps_info .about {font-size: 15px;}
.login_wrap .apps_info .about li {margin: 0 0 15px;}
.login_wrap .apps_info .about i {margin: 0 10px 0 0;}
.login_wrap .apps_form {/*width: 335px;*/ display: table-cell; vertical-align: middle; position: relative;}
.login_wrap .apps_form .apps_wrap {padding: 30px;}
.login_wrap .apps_form .apps_wrap2 {padding: 15px 30px 0;}
.login_wrap .apps_form .apps_wrap2:first-child {padding: 30px 30px 0;}
.login_wrap .apps_form .apps_wrap2:last-child {padding: 15px 30px 30px;}
.login_wrap .apps_form .apps_wrap2:first-child:last-child {padding: 30px;}
.login_wrap .apps_form .apps_wh {background: #fff;}
.login_wrap .apps_form .apps_gr {background: #F4F4F4;}
.login_wrap .apps_form .title_wrap {margin: 0 0 30px; text-align: center;}

.login_wrap .apps_form .apps_login {}
.login_wrap .apps_form .apps_login .btn_fb, .login_wrap .apps_login .btn_tw, .login_wrap .apps_login .btn_ms {border-radius: 0; padding: 8px 20px 8px 80px; text-align: left;}
/*.login_wrap .apps_form .apps_login .fa-facebook, .login_wrap .apps_login .fa-twitter {font-size: 16px; position: relative; top: 2px;}*/
.login_wrap .apps_form .apps_login .ui.fa-facebook {font-size: 18px; color: #fff; top: 50%; left: 37px; right: auto;}
.login_wrap .apps_form .apps_login .ui.fa-twitter {font-size: 18px; color: #fff; top: 50%; left: 34px; right: auto;}
.login_wrap .apps_form .apps_login .ui.ui-microsoft {width: 30px; height: 30px; top: 50%; left: 26px; right: auto;}

.login_wrap .apps_form .apps_reset {}
.login_wrap .apps_form .apps_reset .reset_msg {margin: 0 0 30px;}

.login_wrap .apps_form .apps_bottom {width: 100%; text-align: center; position: absolute; bottom: 15px;}

.login_wrap .apps_actively {}
.login_wrap .apps_actively .top {background: #eee; padding: 15px;}
.login_wrap .apps_actively .content {padding: 30px;}
.login_wrap .apps_actively .content > * {margin: 0 0 14px;}
.login_wrap .apps_actively .content > *:last-child {margin: 0;}
.login_wrap .apps_actively .title_wrap {margin: 0 0 15px; text-align: center;}
.login_wrap .apps_actively .info_msg {margin: 0 0 15px; text-align: center;}
.login_wrap .apps_actively .ui.fa-facebook {font-size: 18px; color: #fff; top: 50%; left: 37px; right: auto;}
.login_wrap .apps_actively .ui.ui-info {border: 1px solid #555; border-radius: 20px; width: 16px; height: 16px; margin: 0 8px 0 0;}
.login_wrap .apps_actively .ui.ui-info:before, .login_wrap .apps_actively .ui.ui-info:after {background: #555; width: 1px;}
.login_wrap .apps_actively .loading {text-align: center;}
.login_wrap .apps_actively .loading .ui-loader-microsoft > *:after {background: #555;}

.section_wrap {}
.section_wrap.style1 {background: #00071b; width: 100%; min-height: 100vh; position: relative;}
.section_wrap.style1 {}

.box_wrap {background: #fff; border-radius: 0; width: 600px;}
.box_wrap .title {font-size: 24px; font-weight: 700; text-align: center;}
.box_wrap .title > span {font-size: 14px; font-weight: 300; text-align: center; display: block;}
.box_wrap .input_wrap {margin: 0 0 15px;}
.box_wrap .input_wrap:last-child {margin: 0;}
.box_wrap .input_wrap.inputBox_wrap {margin: 0;}
.box_wrap .input_wrap.inputBox_wrap > * {margin: 0 0 15px;}
.box_wrap .input_wrap input {padding: 8px 35px 8px 8px;}
.box_wrap .input_wrap button {width: 100%;}
.box_wrap .input_wrap .ui {color: #bbb; position: absolute; top: 17px; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.box_wrap .input_wrap .ui.ui-loading {top: 50%; left: 15px;}
.box_wrap .input_wrap .ui.ui-loader-microsoft {top: 50%; left: 15px;}
.box_wrap .input_msgBox {margin: 0 0 14px;}
.box_wrap .outTop {width: 100%; text-align: center; color: #fff; position: absolute; top: -90px; left: 0}
.box_wrap .outTop i {font-size: 75px;}
.box_wrap .outBottom {width: 100%; text-align: center; color: #fff; position: absolute; bottom: -30px; left: 0}
.box_wrap .outBottom a {color: #fff; cursor: pointer;}
.box_wrap .outBottom a:hover {color: #ddd;}
.box_wrap .sideGrid .input_wrap {width: 50%; margin: 0;}
.box_wrap .sideGrid a {padding: 6px 0; display: block;}

.box_wrap.noWidth {width: auto;}

.box_wrap2 {background: #fff; width: 400px; padding: 30px;}
.box_wrap2 .title_wrap {font-size: 24px;}

.box_wrap3 {background: #fff; border-radius: 5px; width: 600px;}
.box_wrap3.border {border: 10px solid #ccc; border-radius: 10px; padding: 30px;}
.box_wrap3.border.style1 {border-color: #0066b3;}
.box_wrap3.border.style2 {border-color: #cb2027;}
.box_wrap3 .title {font-size: 30px; font-weight: 700; text-align: center;}
.box_wrap3 .title > span {font-size: 14px; text-align: center;}
.box_wrap3 .boxContent {width: 360px; margin: 0 auto 30px;}
.box_wrap3 i {font-size: 120px; line-height: 1;}

.box_wrap4 {background: #fff; padding: 30px;}

.download_apps_wrap {width: 100%; text-align: center; color: #fff; position: absolute; bottom: -130px;}
.download_apps_wrap figure {height: 40px; margin: 10px;}
.download_apps_wrap figure img {width: auto; height: 100%;}

.footer_wrap {font-size: 12px; font-weight: 300; text-align: center; color: #fff; position: absolute; bottom: 12px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.footer_wrap a {color: #fff; text-decoration: underline;}


.lockedScreen_wrap {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.lockedScreen_wrap .user .staffImg {border: 3px solid #fff; width: 140px; height: 140px; margin: 0 30px 0 0;}
.lockedScreen_wrap .user .userInfo {font-size: 20px; color: #fff; display: none;}
.lockedScreen_wrap .user .unlockscreen {width: 280px; padding: 18px 0; color: #fff;}
.lockedScreen_wrap .user .unlockscreen > * {margin: 10px 0;}

.error_wrap {width: 100%; height: calc(100vh - 110px); position: relative;}
.error_wrap > * {width: 60%;}
/*.error_wrap > * > * {margin: 15px 0;}*/
.error_wrap .title {font-size: 80px; font-weight: 700; text-align: center;}
.error_wrap .title > * {display: inline-block; animation-duration: 0.5s; animation-fill-mode: both;}
.error_wrap .title > *:nth-child(1) {animation-delay: 1.5s;}
.error_wrap .title > *:nth-child(2) {animation-delay: 1.75s;}
.error_wrap .title > *:nth-child(3) {animation-delay: 2s;}
.error_wrap .title > *:nth-child(4) {animation-delay: 2.25s;}
.error_wrap .title > *:nth-child(5) {animation-delay: 2.5s;}
.error_wrap .title > *:nth-child(6) {animation-delay: 2.75s;}
.error_wrap .title > *:nth-child(7) {animation-delay: 3s;}
.error_wrap .title > *:nth-child(8) {animation-delay: 3.25s;}
.error_wrap .title > *:nth-child(9) {animation-delay: 3.5s;}
.error_wrap .title > *:nth-child(10) {animation-delay: 3.75s;}
.error_wrap .title > *:nth-child(11) {animation-delay: 4s;}
.error_wrap .subtext {font-size: 24px; text-align: center;}
.error_wrap form > *:not(:first-child) {margin: 16px 0 0;}
.error_wrap label {margin: 0; font-size: 22px; line-height: 1; left: 8px;}
.error_wrap input {padding: 8px 8px 8px 32px;}
.error_wrap nav ul {text-align: center;}
.error_wrap nav ul > li {padding: 5px 10px; display: inline-block; vertical-align: top; cursor: pointer;}


/* miniForm_wrap */
.miniForm_wrap {width: 700px; padding: 30px; font-size: 18px; color: #000;}
.miniForm_wrap p {margin: 0 0 30px;}
.miniForm_wrap p:last-child {margin: 0;}
.miniForm_wrap p.margin_30-0-0-0 {margin: 30px 0 0;}
.miniForm_wrap .btn_wrap {margin: 0 -15px;}
.miniForm_wrap .btn_wrap > * {width: 50%; padding: 0 15px;}
.miniForm_wrap .btn_wrap > .w_sp {width: 200px;}
.miniForm_wrap .btn_wrap button, .miniForm_wrap .btn_wrap a {background: #0066b3; border-radius: 0; border: none; width: 100%; font-size: 18px; color: #fff !important; line-height: 2;}


/***************************************************************************** theme *****************************************************************************/
.theme.response1280 {min-width: calc(1280px - 17px);}
.theme.response1280 .page-content > section {max-width: 1280px; margin: auto;}

.theme.DarkBlue_Orange a {color: #0066b3;}
.theme.DarkBlue_Orange .ui.active {color: #0066b3 !important;}
.theme.DarkBlue_Orange .ui.ui-viewPw.active:after {border-left-color: #0066b3;}

.theme.DarkBlue_Orange .topbar {background: #00071b;}
.theme.DarkBlue_Orange .topbar nav, .theme.DarkBlue_Orange .topbar nav a {color: #fff;}
.theme.DarkBlue_Orange .topbar nav a:hover, .theme.DarkBlue_Orange .topbar nav > ul > li.active a {color: #fff;}
.theme.DarkBlue_Orange .topbar nav > ul > li.active, .theme.DarkBlue_Orange .topbar nav > ul > li:hover {background: #0066b3; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
.theme.DarkBlue_Orange .topbar nav > ul:nth-child(2) > li .ui {color: #fff;}
.theme.DarkBlue_Orange .topbar nav > ul:nth-child(2) > li .ui.hover:hover {color: #ffff00;}
.theme.DarkBlue_Orange .topbar nav > ul:nth-child(2) > li .ui.ui-changeRole svg > * {fill: #fff;}
.theme.DarkBlue_Orange .topbar nav > ul:nth-child(2) > li .ui.ui-changeRole.active svg > * {fill: #fff;}

.theme.DarkBlue_Orange .requestDataTable li > *:nth-child(2) {color: #0066b3;}
.theme.DarkBlue_Orange .requestDataTable li .title.small {color: #555;}

.theme.DarkBlue_Orange .spbox2_wrap {border-color: #0066b3;}
.theme.DarkBlue_Orange .spbox2_wrap li .bold {color: #0066b3;}
.theme.DarkBlue_Orange .spbox2_wrap.checkout li:last-child {border-top-color: #0066b3;}
.theme.DarkBlue_Orange .spbox2_wrap .dropdown-hover .ui {color: #0066b3;}
.theme.DarkBlue_Orange .spbox2_wrap .dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap {border-color: #0066b3;}
.theme.DarkBlue_Orange .spbox2_wrap .dropdown-hover .dropdown-hover-contain .dropdown-hover-wrap:before {border-right: 8px solid #0066b3;}

.theme.DarkBlue_Orange .fsNav_overlay .overlay-msgbox.borderRadius {border-color: #0066b3;}
.theme.DarkBlue_Orange .fsNav_overlay .overlay-msgbox.borderRadius.orange {border-color: #f7941e;}

.theme.DarkBlue_Orange .form-control {color: #0066b3;}

.theme.DarkBlue_Orange .form-control.style2[readonly] {color: #333;}

/*.theme.DarkBlue_Orange button.btn {color: #0066b3}
.theme.DarkBlue_Orange button.btn.black {color: #fff;}
.theme.DarkBlue_Orange button.btn.white {color: #fff;}
.theme.DarkBlue_Orange button.btn.white:hover {color: #555;}
.theme.DarkBlue_Orange button.btn.btn_fb {color: #fff;}
.theme.DarkBlue_Orange button.btn.btn_tw {color: #fff;}
.theme.DarkBlue_Orange button.btn.btn_ms {color: #333;}

.theme.DarkBlue_Orange button.btn.submit {border-color: #0066b3; color: #0066b3;}
.theme.DarkBlue_Orange button.btn.submit:hover {border-color: #004880; color: #004880;}
.theme.DarkBlue_Orange button.btn.submit > .ui-loader-microsoft > *:after {background: #0066b3;}*/

.theme.DarkBlue_Orange .calendar_wrap .calendar_topFun .btn-group.newEventBtn .dropdown-menu li:hover {background-color: rgba(0, 102, 179, 0.1); color: #0066b3;}

.theme.DarkBlue_Orange [class*="select2-style2"], 
.theme.DarkBlue_Orange [class*="select2-style2"] .select2-container .select2-selection--single .select2-selection__rendered, 
.theme.DarkBlue_Orange [class*="select2-style2"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
.theme.DarkBlue_Orange .select2-style2-dropdown.select2-dropdown,
.theme.DarkBlue_Orange .select2-container--open.select2-container--default .select2-dropdown--below{color: #0066b3;}

.theme.DarkBlue_Orange [class*="select2-style2"] .select2-container--default .select2-selection--single .select2-selection__arrow b {border-color: #0066b3 transparent transparent transparent;}
.theme.DarkBlue_Orange .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color: transparent transparent #0066b3 transparent;}
.theme.DarkBlue_Orange .select2-style2-dropdown.select2-dropdown .select2-results__option--highlighted[aria-selected],
.theme.DarkBlue_Orange .select2-style2-dropdown.select2-dropdown .select2-results__option[aria-selected=true] {background-color: rgba(0, 102, 179, 0.1);}

.theme.DarkBlue_Orange .fc .fc-header-toolbar .fc-button {background: #0066b3; border-color: #0066b3; box-shadow: none; text-shadow: none; color: #fff;}
.theme.DarkBlue_Orange .fc .fc-header-toolbar .fc-button.fc-state-disabled {background: #ddd; border-color: #ddd; color: #000;}
.theme.DarkBlue_Orange .fc .fc-highlight {background:#0066b3; opacity:.15}
.theme.DarkBlue_Orange .fc-event, .theme.DarkBlue_Orange .fc-event:hover {color: #fff;}

.theme.DarkBlue_Orange .irs .irs-bar, .theme.DarkBlue_Orange .irs .irs-bar-edge {background: #0066b3; border-color: #00589a;}
.theme.DarkBlue_Orange .irs .irs-slider {border-color: #0066b3; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);}
.theme.DarkBlue_Orange .irs .irs-slider.state_hover, .theme.DarkBlue_Orange .irs .irs-slider:hover {background: #f7941e;}

.theme.DarkBlue_Orange .dtp .dtp-header a, .theme.DarkBlue_Orange .dtp .dtp-date a {color: #fff;}

.theme.DarkBlue_Orange .nav-tabs.tabStyle-1 > li:after {background: #0066b3;}

.theme.DarkBlue_Orange .topFun .pg-container .pg-bar {background: #0066b3;}

.theme.DarkBlue_Orange .boxShadow.border {border-color: #0066b3; padding: 0}
.theme.DarkBlue_Orange .title_wrap span {color: #888;}

.theme.DarkBlue_Orange .list_wrap .list .item li:hover {background: #eee;}
.theme.DarkBlue_Orange .list_wrap .list .item li.active {background: rgba(98, 189, 243, 0.15);}
.theme.DarkBlue_Orange .list_wrap .list .item li.active:before {background: rgba(98, 189, 243, 1);}

.theme.DarkBlue_Orange .user_wrap .dropdown-toggle {color: #fff;}

.theme.DarkBlue_Orange .profile-content .input_wrap .output {color: #0066b3;}
.theme.DarkBlue_Orange .profile-content .input_wrap .output.updating {color: red;}

/*.theme.DarkBlue_Orange .calendar_wrap .history_wrap li:hover {background: rgba(98, 189, 243, 0.15);}
.theme.DarkBlue_Orange .calendar_wrap .history_wrap li .eventType {color: #0066b3;}
.theme.DarkBlue_Orange .calendar_wrap .history_wrap li .eventType:after {background: #0066b3;}
.theme.DarkBlue_Orange .calendar_wrap .history_wrap li .eventDay {color: #0066b3;}
.theme.DarkBlue_Orange .calendar_wrap .history_wrap li .eventStatus {color: #f7941e;}*/

.theme.DarkBlue_Orange .request_wrap .detail_wrap .requestLeave_wrap ul.info li > * {color: #0066b3;}
.theme.DarkBlue_Orange .request_wrap .detail_wrap .requestLeave_wrap ul.info li .title {color: inherit;}

.theme.DarkBlue_Orange .org_wrap .org_chart .title_wrap span {color: #fff;}

.theme.DarkBlue_Orange .changeRole_wrap .switchRole ul li:hover, .theme.DarkBlue_Orange .changeRole_wrap .switchRole ul li.active {background: rgba(0, 102, 179, 0.1);}
.theme.DarkBlue_Orange .changeRole_wrap .switchRole ul li.active .img_wrap:after {border-color: #0066b3;}
.theme.DarkBlue_Orange .changeRole_wrap .ui.ui-ring:before {background: #0066b3;}

.signature_wrap .mobile .ui.ui-sendSMS {color: #0066b3}
.signature_wrap .mobile .ui.ui-sendSMS:before {background: #f7941e;}
.signature_wrap .mobile .ui.ui-sendSMS:after {border-left-color: #f7941e;}

.theme.DarkBlue_Orange .msgbox_wrap .boxContent.underLine > *:first-child {border-color: #0066b3;}
.theme.DarkBlue_Orange .msgbox_wrap .boxContent.underLine > *:last-child {border-color: #fff;}
.theme.DarkBlue_Orange .msgbox_wrap .title_wrap, .theme.DarkBlue_Orange .msgbox_wrap .approvalStatus_wrap .title {color: #0066b3}
.theme.DarkBlue_Orange .msgbox_wrap .title_wrap span {color: inherit; font-weight: inherit;}

.theme.DarkBlue_Orange .msgbox_wrap.formStyle .input_wrap.flexGrid label i {color: #0066b3;}

.theme.DarkBlue_Orange .msgbox_wrap.newRequest .requestForm .request_input .input_wrap > label {color: #555;}
.theme.DarkBlue_Orange .msgbox_wrap.newRequest .requestForm .request_input .input_wrap > label i {color: #0066b3;}

.theme.DarkBlue_Orange .msgbox_wrap.newRequest .requestForm .requestProvide {color: #555;}
.theme.DarkBlue_Orange .msgbox_wrap.newRequest .requestForm .requestDisplay {border: 1px solid #0066b3; color: #555;}
.theme.DarkBlue_Orange .msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate .excludeDateDetail {border-color: #0066b3;}
.theme.DarkBlue_Orange .msgbox_wrap.newRequest .requestForm .requestExclude .excludeDate .excludeDateDetail:before {border-right: 8px solid #0066b3;}
.theme.DarkBlue_Orange .msgbox_wrap.newRequest .requestForm .requestTaken {border-color: #0066b3;}

.theme.DarkBlue_Orange .leaveBalance_wrap .title_wrap {color: #0066b3; border-color: #0066b3;}
.theme.DarkBlue_Orange .leaveBalance .dropdown-hover .ui {color: #0066b3;}
.theme.DarkBlue_Orange .leaveBalance .dropdown-hover .dropdown-hover-contain {border-color: #0066b3;}
.theme.DarkBlue_Orange .leaveBalance .dropdown-hover .dropdown-hover-contain:before {border-right: 8px solid #0066b3;}

.theme.DarkBlue_Orange .setting_wrap .delegateBtn .img_wrap:before, .theme.DarkBlue_Orange .setting_wrap .delegateBtn .img_wrap:after {background: #0066b3;}

.theme.DarkBlue_Orange .login_wrap input {color: #000;}

/* 0 to 1280 */
@media only screen and (min-width : 0em) and (max-width :80em) {
    .topbar {position: absolute;}

    .list_wrap.fixed {position: absolute;}
}
/* 0 to 1024 */
@media only screen and (min-width : 0em) and (max-width :64em) {
}
@media only screen and (min-width : 94em) and (max-width : 107em) {
    .profileChange_wrap li > *:nth-child(1) {width: 12%;}
    .profileChange_wrap li > *:nth-child(2) {width: 44%;}
    .profileChange_wrap li > *:nth-child(3) {width: 44%;}
    .profileChange_wrap:after {left: 56.2%;}
}
@media only screen and (min-width : 85em) and (max-width : 94em) {
    .profileChange_wrap li > *:nth-child(1) {width: 14%;}
    .profileChange_wrap li > *:nth-child(2) {width: 43%;}
    .profileChange_wrap li > *:nth-child(3) {width: 43%;}
    .profileChange_wrap:after {left: 57.2%;}
}
@media only screen and (min-width : 78em) and (max-width : 85em) {
    .profileChange_wrap li > *:nth-child(1) {width: 16%;}
    .profileChange_wrap li > *:nth-child(2) {width: 42%;}
    .profileChange_wrap li > *:nth-child(3) {width: 42%;}
    .profileChange_wrap:after {left: 58.2%;}
}
@media only screen and (min-width : 75em) and (max-width : 78em) {
    .profileChange_wrap li > *:nth-child(1) {width: 18%;}
    .profileChange_wrap li > *:nth-child(2) {width: 41%;}
    .profileChange_wrap li > *:nth-child(3) {width: 41%;}
    .profileChange_wrap:after {left: 59.2%;}
}
@media only screen and (min-width : 67em) and (max-width : 75em) {
    .profileChange_wrap li > *:nth-child(1) {width: 20%;}
    .profileChange_wrap li > *:nth-child(2) {width: 40%;}
    .profileChange_wrap li > *:nth-child(3) {width: 40%;}
    .profileChange_wrap:after {left: 60.2%;}
}
@media only screen and (min-width : 0em) and (max-width : 67em) {
    .profileChange_wrap li > *:nth-child(1) {width: 22%;}
    .profileChange_wrap li > *:nth-child(2) {width: 39%;}
    .profileChange_wrap li > *:nth-child(3) {width: 39%;}
    .profileChange_wrap:after {left: 61.2%;}
}

/* 1280 */
@media only screen and (min-width : 0em) and (max-width : 79.9375em) {
    /*.profile-content .table td {width: 100%; display: block;}
    .profile-content .input_wrap.input_xs > label {width: 140px;}
    .profile-content .input_wrap.input_xs > input {width: calc(100% - 140px);}*/
}

/* height 768 */
@media only screen and (max-height: 768px) {
  .theme.height768 .topbar {z-index: 100;}
}