/*
@font-face {
  font-family: 'THSarabunNew';
  src: url('../../fonts/th-sarabun/thsarabunnew-webfont.eot');
  src: url('../../fonts/th-sarabun/thsarabunnew-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/th-sarabun/thsarabunnew-webfont.woff') format('woff'), url('../../fonts/th-sarabun/thsarabunnew-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'THSarabunNew';
  src: url('../../fonts/th-sarabun/thsarabunnew_bolditalic-webfont.eot');
  src: url('../../fonts/th-sarabun/thsarabunnew_bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/th-sarabun/thsarabunnew_bolditalic-webfont.woff') format('woff'), url('../../fonts/th-sarabun/thsarabunnew_bolditalic-webfont.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'THSarabunNew';
  src: url('../../fonts/th-sarabun/thsarabunnew_italic-webfont.eot');
  src: url('../../fonts/th-sarabun/thsarabunnew_italic-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/th-sarabun/thsarabunnew_italic-webfont.woff') format('woff'), url('../../fonts/th-sarabun/thsarabunnew_italic-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'THSarabunNew';
  src: url('../../fonts/th-sarabun/thsarabunnew_bold-webfont.eot');
  src: url('../../fonts/th-sarabun/thsarabunnew_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/th-sarabun/thsarabunnew_bold-webfont.woff') format('woff'), url('../../fonts/th-sarabun/thsarabunnew_bold-webfont.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
*/

.px-no-transition {
    -webkit-transition: none !important;
    transition: none !important;
}

.px-no-transition * {
  -webkit-transition: none !important;
  transition: none !important;
}

.px-brand {
    font-size: 14px !important;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    display: inline-block;
}

a.px-brand:hover {
    opacity: .8;
    transition: opacity .3s;
}

.px-logo {
    /*width: 18px;*/
    height: 32px;
    margin-right: 9px;
    margin-top: 12px;
    display: inline-block;
}

.px-logo-1,
.px-logo-2,
.px-logo-3,
.px-logo-4,
.px-logo-5,
.px-logo-6,
.px-logo-7,
.px-logo-8,
.px-logo-9 {
    display: block;
    width: 6px;
    height: 6px;
    float: left;
}

.px-logo-1 {
    background: rgba(255, 255, 255, .25);
}

.px-logo-2 {
    background: rgba(255, 255, 255, .4);
}

.px-logo-3 {
    background: rgba(255, 255, 255, .65);
}

.px-logo-4 {
    background: rgba(255, 255, 255, .6);
}

.px-logo-5 {
    background: rgba(255, 255, 255, .15);
}

.px-logo-6 {
    background: rgba(255, 255, 255, .4);
}

.px-logo-7 {
    background: rgba(255, 255, 255, .3);
}

.px-logo-8 {
    background: rgba(255, 255, 255, .6);
}

.px-logo-9 {
    background: rgba(255, 255, 255, .25);
}

/* Large logo */

.px-brand-lg {
    font-size: 17px !important;
}

.px-brand-lg .px-logo {
    width: 24px;
    height: 24px;
}

.px-brand-lg .px-logo-1,
.px-brand-lg .px-logo-2,
.px-brand-lg .px-logo-3,
.px-brand-lg .px-logo-4,
.px-brand-lg .px-logo-5,
.px-brand-lg .px-logo-6,
.px-brand-lg .px-logo-7,
.px-brand-lg .px-logo-8,
.px-brand-lg .px-logo-9 {
    width: 8px;
    height: 8px;
}
#px-nav-left .px-nav-item > a{ padding-left: 62px !important;}
.px-nav-dropdown-menu .px-nav-dropdown-menu > .px-nav-item > a{ padding-left: 56px !important }
.roboto {
  font-family: 'Roboto', sans-serif !important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: unset !important;
  font-style: normal;
}
.px-nav-dropdown-menu .px-nav-item > a { padding-left: 35px; padding-right:5px }
.px-nav-dropdown-menu .px-nav-dropdown-menu > .px-nav-item > a{ padding-left: 56px !important; }
.px-nav-bottom {
  bottom: 0;
  box-shadow: none !important;
  padding: 5px
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2 { font-size: 1.2em; } 
.fa-3 { font-size: 3em; }
.fa-4 { font-size: 4em; }
.fa-5 { font-size: 5em; } 
.fa-fw { width: 1.28571429em; text-align: center; } 
.fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } 
.fa-ul > li { position: relative; }  
.fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: 0.14285714em; text-align: center; } 
.fa-li.fa-lg { left: -1.85714286em; }
.fa-border { padding: .2em .25em .15em; border: solid 0.08em #eeeeee; border-radius: .1em; }
.fa-pull-left { float: left } 
.fa-pull-right { float: right }
.fa.fa-pull-left { margin-right: .3em } 
.fa.fa-pull-right { margin-left: .3em }
.fa-shadow-star { color:yellow; text-shadow: -1px 0 #FF5722, 0 1px #FF5722, 1px 0 #FF5722, 0 -1px #FF5722; }

/* BELL */
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotateZ(-18deg);
    transform: rotateZ(-18deg);
  }

  50% {
    -webkit-transform: rotateZ(18deg);
    transform: rotateZ(18deg);
  }

  100% {
    transform: rotateZ(-18deg);
    -webkit-transform: rotateZ(-18deg);
  }
}

@keyframes swing {
  0% {
    -webkit-transform: rotateZ(-18deg);
    transform: rotateZ(-18deg);
  }

  50% {
    -webkit-transform: rotateZ(18deg);
    transform: rotateZ(18deg);
  }

  100% {
    transform: rotateZ(-18deg);
    -webkit-transform: rotateZ(-18deg);
  }
}

@-moz-keyframes swing {
  0% {
    -webkit-transform: rotateZ(-18deg);
    transform: rotateZ(-18deg);
  }

  50% {
    -webkit-transform: rotateZ(18deg);
    transform: rotateZ(18deg);
  }

  100% {
    transform: rotateZ(-18deg);
    -webkit-transform: rotateZ(-18deg);
  }
}

.faa-ring.animated {
  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  animation: road-animates 1.5s linear infinite;
  -webkit-animation: swing 1.5s linear infinite;
  -moz-animation: swing 1.5s linear infinite;
  -o-animation: swing 1.5s linear infinite;
  transform-origin: center top;
  -moz-transform-origin: center top;
  -webkit-transform-origin: center top;
}

/* PULSE */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
  -webkit-animation: pulse 2s linear infinite;
  animation: pulse 2s linear infinite;
}

/* TADA */

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(.9) rotate(-8deg);
    transform: scale(.9) rotate(-8deg);
  }

  30%, 50%, 70% {
    -webkit-transform: scale(1.3) rotate(8deg);
    transform: scale(1.3) rotate(8deg);
  }

  40%, 60% {
    -webkit-transform: scale(1.3) rotate(-8deg);
    transform: scale(1.3) rotate(-8deg);
  }

  80% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(.9) rotate(-8deg);
    -ms-transform: scale(.9) rotate(-8deg);
    transform: scale(.9) rotate(-8deg);
  }

  30%, 50%, 70% {
    -webkit-transform: scale(1.3) rotate(8deg);
    -ms-transform: scale(1.3) rotate(8deg);
    transform: scale(1.3) rotate(8deg);
  }

  40%, 60% {
    -webkit-transform: scale(1.3) rotate(-8deg);
    -ms-transform: scale(1.3) rotate(-8deg);
    transform: scale(1.3) rotate(-8deg);
  }

  80% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.faa-tada.animated,
.faa-tada.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-tada {
  -webkit-animation: tada 2s linear infinite;
  animation: tada 2s linear infinite;
  color: #fded30;
}

.first-letter{text-transform:capitalize}
.hidden {display: none !important;}
.position-fixed{position:fixed !important;}
.position-absolute{position:absolute}
.position-unset{position:unset !important}
.vertical-center{display: flex; align-items: center;}
.mnh-110 { min-height: 110px } 
.mnh-120 { min-height: 120px }
.mnh-150 { min-height: 150px }
.mnh-200 { min-height: 200px }
.mnh-315 { min-height: 315px }
.mnh-334 { min-height: 334px }
.mnh-500 { min-height: 500px }
.mnh-550 { min-height: 550px }
.mnh-600 { min-height: 600px } 
.mnh-615 { min-height: 615px } 
.mnh-704 { min-height: 704px }
.mnh-100vh { min-height: 100vh }
.max-704 { max-height: 704px } 
.mw-30x { min-width: 30px }
.mw-40 { min-width: 40% }
.mw-50 { min-width: 50px }
.mw-52 { min-width: 52px }
.mw-55 { min-width: 55px }
.mw-70 { min-width: 70px }
.mw-75 { min-width: 75px }
.mw-80 { min-width: 80px }
.mw-85 { min-width: 85px }
.mw-90 { min-width: 90px }
.mw-75p { min-width: 75% }
.mw-100 { min-width: 100px }
.mw-105 { min-width: 105px;}
.mw-110 { min-width: 110px }
.mw-120 { min-width: 120px }
.mw-125 { min-width: 125px }
.mw-170 { min-width: 170px }
.mw-177 { min-width: 177px }
.mw-200 { min-width: 200px; }
.mw-220 { min-width: 220px; }
.mw-230 { min-width: 230px; }
.mw-250 { min-width: 250px; }
.max-width-40 { width: 40px !important; max-width: 40px !important }
.max-width-50 { min-width: 50px; max-width: 50px; }
.max-width-55 { min-width: 55px; max-width: 55px; }
.max-width-70 { min-width: 70px; max-width: 70px; }
.max-width-80 { min-width: 80px; max-width: 80px; }
.max-width-90 { min-width: 90px; max-width: 90px; }
.max-width-95 { min-width: 95px; max-width: 95px; }
.max-width-100 { min-width: 100px; max-width: 100px; }
.max-width-105 { min-width: 105px; max-width: 105px; }
.max-width-110 { min-width: 110px; max-width: 110px; } 
.max-width-200 { min-width: 200px; max-width: 200px; }
.max-width-230 { min-width: 230px; max-width: 230px; }
.max-width-260 { min-width: 260px; max-width: 260px; }
.mt-5 { margin-top: 5px !important } 
.w-4 { width: 4% !important }
.w-5 { width: 5% !important }
.w-6 { width: 6% !important }
.w-8 { width: 8% !important }
.w-10 { width: 10% !important }
.w-12 { width: 12% !important }
.w-13 { width: 13% !important }
.w-14 { width: 14% !important }
.w-15 { width: 15% !important }
.w-18 { width: 18% !important }
.w-20 { width: 20% !important }
.w-21 { width: 21% !important }
.w-26 { width: 26% !important }
.w-23 { width: 23% }
.w-25 { width: 25% !important }
.w-30 { width: 30% !important } 
.w-35 { width: 35% !important }
.w-37 { width: 37% !important }
.w-39 { width: 39% !important } 
.w-40 { width: 40% !important }
.w-45 { width: 45% !important }
.w-50 { width: 50% !important } 
.w-60 { width: 60% !important }
.w-63 { width: 63% !important }
.w-65 { width: 65% !important }
.w-70 { width: 70% !important } 
.w-77 { width: 77% } 
.w-78 { width: 78% !important } 
.w-80 { width: 80% !important}
.w-83 { width: 83% }
.w-85 { width: 85% }
.w-90 { width: 90% !important }
.w-95 { width: 95% !important }
.w-96 { width: 96% !important }
.w-97 { width: 97% !important }
.w-98 { width: 98% !important }
.w-99 { width: 99% !important }
.w-100 { width: 100% !important }
.w10 { width: 10px !important }
.w13 { width: 13px !important }
.w20 { width: 20px !important }
.w25 { width: 25px !important }
.w30 { width: 30px !important }
.w39 { width: 39px !important }
.w45 { width: 45px !important }
.w50 { width: 50px !important } 
.w55 { width: 55px !important } 
.w60 { width: 60px !important } 
.w65 { width: 65px !important }
.w70 { width: 70px !important } 
.w75 { width: 75px !important } 
.w80 { width: 80px !important } 
.w85 { width: 85px !important}
.w90 { width: 90px !important} 
.w95 { width: 95px } 
.w100 { width: 100px !important}
.w105 { width: 105px !important }
.w108 { width: 108px !important }
.w110 { width: 110px }
.w120 { width: 120px }
.w140 { width: 140px }
.w145 { width: 145px }
.w150 { width: 150px }
.w166 {
  width: 166px !important;
  max-width: 166px !important;
  min-width: 166px !important;
}
.w180 { width: 180px }
.w1170{ width: 1170px !important }
.w1220{ width: 1220px !important }
.w1370{ width: 1370px !important }
.w200 { width: 200px }
.h75 { height: 75px }
.h30 { height: 30px }
.h32 { height: 32px }
.h40 { height: 40px }
.h230 { height:auto; max-height: 230px }
.h370 { height:auto; max-height: 370px }
.h420 { height: 420px !important }  
.h625 { height:auto; max-height: 625px } 
.h680 { height:auto; max-height: 680px }
.h870 { height:auto; max-height: 870px }

.m-x-5 { margin: 0px 5px }
.m-x-10 { margin: 0px 10px }
.m-t-5 { margin-top: 5px; }
.m-t-8 { margin-top: 8px !important }
.m-t-12 { margin-top: 12px !important}
.m-t-80 { margin-top: 80px !important}
.m-l-82 { margin-left: 82px }
.m-y-30{margin-top:30px; margin-bottom: 30px}
.mb-4, .my-4{margin-bottom:1.5rem!important}
.mb-5, .my-5{margin-bottom:3rem!important}
.p-5{padding:3rem!important}
.p-A-2{ padding: 2px !important}
.p-a-5{ padding: 5px !important}
.p-a-6{ padding: 6px !important}
.p-a-10{ padding: 10px !important}
.p-a-20{ padding: 20px !important}
.p-a-25{ padding: 25px !important}
.p-a-50{ padding: 50px !important}
.p-x-5 { padding: 0px 5px }
.p-x-7 { padding: 0px 7px }
.p-r3 { padding-right: 3px } 
.p-r-5 { padding-right: 5px } 
.p-r-11 { padding-right: 11px } 
.p-l-5 { padding-left: 5px }
.p-l-7 { padding-left: 7px }
.p-l-20 { padding-left: 20px }
.p-l-25 { padding-left: 25px }
.p-l-30 { padding-left: 30px !important }
.p-l-40 { padding-left: 40px }
.p-l-50 { padding-left: 50px }
.p-l-53 { padding-left: 53px !important}
.p-l-62 { padding-left: 62px !important }
.p-X-3 { padding: 0px 3px !important}
.p-t-5 { padding-top: 5px !important}
.p-t-13 { padding-top: 13px !important}
.p-t-17 { padding-top: 17px !important}
.p-t-20 { padding-top: 20px !important}
.p-t-28 { padding-top: 28px !important}
.p-t-50 { padding-top: 50px !important}
.p-y-5 { padding-top: 5px !important; padding-bottom: 5px !important;}
.p-y-50 { padding-top: 50px !important; padding-bottom: 50px !important;}
.p-y-80 { padding-top: 80px !important; padding-bottom: 80px !important;}
.p-x-30 { padding-left: 30px !important; padding-right: 30px !important;}
.p-x-40 { padding-left: 40px !important; padding-right: 40px !important;}
.p-x-50 { padding-left: 50px !important; padding-right: 50px !important;}
.p-x-60 { padding-left: 60px !important; padding-right: 60px !important;}
.p-x-80 { padding-left: 80px !important; padding-right: 80px !important;}
.p-b-25 { padding-bottom: 25px !important}
.p-b-28 { padding-bottom: 28px !important}
.p-b-35 { padding-bottom: 35px !important}
.p-b-50 { padding-bottom: 50px !important}
.p-a-d-input { padding: 4px 8px !important}

.pp-l-20 { padding-left: 20% !important}

.line-h-0 { line-height: 0px !important }
.line-h-17 { line-height: 17px }
.line-h-19 { line-height: 19px }
.line-h-22 { line-height: 22px }
.line-h-25 { line-height: 25px }
.line-h-29 { line-height: 29px } 
.line-h-30 { line-height: 30px }
.line-h-32 { line-height: 32px !important}
.line-h-35 { line-height: 35px }
.line-h-40 { line-height: 40px }
.line-h-42 { line-height: 42px }
.line-h-44 { line-height: 44px }
.line-h-45 { line-height: 45px }
.line-h-50 { line-height: 50px }
.line-h-55 { line-height: 55px }
.line-h-60 { line-height: 60px }
.bottom-60 { bottom: 60px !important}
.inline-block { display: inline-block }
.margin-left-5 {margin-left:5px !important}
.margin-left-8 {margin-left:8px}
.margin-left-10 {margin-left:10px}
.margin-left-11 {margin-left:11px}
.margin-left-12 {margin-left:12px}
.margin-left-18 {margin-left:18px}
.margin-left-20 {margin-left:20px}
.margin-left-25 {margin-left:25px}
.margin-left-36 {margin-left:36px !important}
.margin-right-5 {margin-right:5px !important}
.font-size-10{font-size:10px !important}
.font-size-19{font-size:19px !important}
.font-size-21{font-size:21px !important}
.font-size-23{font-size:23px !important}
.font-size-32{font-size:32px !important}
.font-size-35{font-size:35px !important}
.font-size-38{font-size:38px !important}
.font-size-44{font-size:44px !important}
.font-size-48{font-size:48px !important}
.font-size-50{font-size:50px !important}
.font-size-56{font-size:56px !important}
.font-size-58{font-size:58px !important}
.font-size-67{font-size:67px !important}
.font-size-78{font-size:78px}
.font-size-em-1-6{font-size:1.6em!important}
.font-weight-600 { font-weight: 600 }
.right-0{right:0px !important}
.z-index1{z-index: 1 !important}
.z-index4{z-index: 4 !important}
.background-size-68{background-size: 68% !important}
.background-size-73{background-size: 73% !important}
.background-size-80{background-size: 80% !important}
.fa-2x {font-size:1.5em}
.titleGraph {font-size:20px; margin-top:-5px}
.div-radius { border-radius: .25em;}
.radiusTopLeftBottomRight { border-radius:10px 0px !important; }
.row-centered { text-align: center }
.no-hover { pointer-events: none; }
.pull-left {float:left}
.pull-right { float: right }
.ml-auto {margin-left:auto}
.separator:before{position:absolute;top:0;bottom:0;left:146px;width:1px;content:"";background:rgba(255,255,255,.3)}
.float-none {
  float: none !important;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
}
.col-center-block {
  float: none !important;
  display: block;
  margin: 0 auto;
}

.px-navbar .navbar-right > .icon-dropdown > span > a:before {
  font-size: .8rem;
  font-family: FontAwesome;
  content: '\f107' !important;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 2px 0 6px;
  margin: 0 .3em 0 0;
  vertical-align: 0;
}
.flexbox-container {
  display: flex;
  align-items:center;
  height: 100vh;
}
.align-items-center {
  -webkit-box-align: center !important;
  /*-webkit-align-items: center !important;*/
  -moz-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.justify-content-center {
  -webkit-box-pack: center !important;
  /*-webkit-justify-content: center !important;*/
  -moz-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
.d-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}  
.vertical-align-wrap {
  position: absolute;
  width: 97%;
  height: 100%;
  display: table;
}

.vertical-align {
  display: table-cell;
}

.vertical-align--middle {
  vertical-align: middle;
}
/*.panelGraph {
  opacity: .3;
}*/
.col-box-2 {
  /*opacity: .3;*/
  width: 16.66%;
  min-height: 1px;
  float: left;
  padding: 0px 11px
}
.col-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  /*-moz-box-flex: 0 0 100%;*/
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%
}

/*.col-md-12{width:100%}*/

.icon-briefcase-black {
  height: 80px;
  width: 100%;
  background: url("/images/briefcase.svg") no-repeat center;
  background-size: 50%;
}
.icon-briefcase-white {
  height: 80px;
  width: 100%;
  background: url("/images/briefcase_white.svg") no-repeat center;
  background-size: 50%;
}

.icon-clock-white {
  height: 80px;
  width: 100%;
  background: url("/images/clock_white.svg") no-repeat center;
  background-size: 50%;
}

.icon-ios-user-white {
  height: 80px;
  width: 100%;
  background: url("/images/users_ios.svg") no-repeat center;
  background-size: 50%;
}
.icon-mail-white {
  height: 80px;
  width: 100%;
  background: url("/images/mail_white.svg") no-repeat center;
  background-size: 50%;
}
.icon_leave:after {
  font-family: 'Font Awesome 5 Free';
  content: "\f35a";   
  font-weight: 900;
  font-size: 13px;
  /*position: absolute;
  margin-left: -8px;
  margin-top: 7px;*/
  display: inline-block;
  margin-left: -4px;
  vertical-align: middle;
}
.inline-flex-icon {
  display: table;
  vertical-align: middle;
  line-height:24px;
}

.inline-flex-icon i, .inline-flex-icon p {
  display: table-cell;
  vertical-align: middle;
}
.background-position-left{background-position:left !important}
/*box-shadow*/
.box-shadow-default {
  -webkit-box-shadow: 0 0 0 1px #d6d6d6 inset !important;
  box-shadow: 0 0 0 1px #d6d6d6 inset !important;
}
.shadow-shorter {
  border-top: 1px solid rgba(0,0,0,.075) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 3px 4px rgba(0,0,0,0.11), 0 16px 20px rgba(0,0,0,.05);
}
.input-group-none-bg{background-color: transparent !important; border: 0px !important; font-weight: bold;}
/*.input-group-sm > .input-group-btn > select.btn:not([size]):not([multiple]),
.input-group-sm > select.form-control:not([size]):not([multiple]),
.input-group-sm > select.input-group-addon:not([size]):not([multiple]),
select.form-control-sm:not([size]):not([multiple]) {
  height: 2.8125rem;
  line-height: 2rem;
}

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='#444' height='21' viewBox='0 0 24 24' width='21' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 3px;
  border-radius: 2px;
  margin-right: 2rem;
  padding-left: 1.5rem;
}*/
/* modal */
.modal-open {
  overflow-y: auto !important;
}
.modal-open-noscrollbar {
  overflow-y: hidden !important;
}

.modal-dialog-scrollable .modal-body {
  max-height: calc(100vh - 212px);
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-dialog-lg-scrollable .modal-body {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-aria-label-close {
  color: white;
  font-size: 1.3em;
  line-height: 8px;
  font-weight: normal;
}
body.modal-open[style] { padding-right: 0px !important; }

.modal-dialog-centered { margin-top: 15%;}

.modal {
    text-align: center;
    padding: 0 !important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
.modal-md { width: 500px !important}
.modal-large { width: 35% !important}
.modal-xl { width: 75%;}
.modal-xxl { width: 85%; max-width: 90%;}
.modal-45 { width: 45%; max-width: 685px;}
.modal-65 { width: 65%;}
.modal-79 { width: 79%;}
.modal::-webkit-scrollbar {
  width: 0 !important; /*removes the scrollbar but still scrollable*/
  /* reference: http://stackoverflow.com/a/26500272/2259400 */
}
#modal-error .modal-body {
  max-height: 400px;
  overflow-y: auto;
}

.bootbox .modal-dialog, #modal-progress .modal-dialog {
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.modal-regis {
  background-color: #ffb800;
  background-size: cover;
  background-image: url(/images/overlay.svg),linear-gradient(45deg,#ffb800 0%,#e6a600 100%);
  color: #fff;
  padding: 5rem 0
}
.modal_scrollbar {
  overflow: auto !important;
}

/* The Modal (background) */
#modal-viewerImage {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.group-sources-targets {
  background: transparent;
  padding-left: 8px;
  padding-right: 0px;
}
.searchSources, .searchTargets {display:none}
#searchSources, #searchTargets {
  border-left-width: 0px;
  border-right-width: 0px;
}
#editorSources, #editorTargets {
  width: 50%;
  height: calc(100vh - 200px);
  max-height: calc(100vh - 100px);
  float: left;
}
.highlight {
  background-color: yellow;
}
.highlight-diff {
  background-color: rgba(255, 0, 0, 0.3);
}
#downloadImg {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: right;
  color: #ccc;
  padding: 10px 0;
}
/* Modal Content (image) */
#modal-viewerImage .modal-content {
  margin: auto;
  display: block;
  width: auto;
  max-width: 60vw;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* The Close Button */
.closeViewerImage {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.closeViewerImage:hover,
.closeViewerImage:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* end modal */
/*scrollbar*/
.custom_scrollbar {
  /*height: 470px;*/
  overflow-y: auto !important;
}

.custom_scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

.custom_scrollbar::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}

.custom_scrollbar::-webkit-scrollbar-thumb {
  /*background-color: #818a91;*/
  background-color: #bdc5d2;  
}
.scrollable::-webkit-scrollbar {
  width: 6px; height: 6px;
}

.scrollable::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.scrollable::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.content-scrollable::-webkit-scrollbar {
  width: 6px; height: 6px;
}

.content-scrollable::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.content-scrollable::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
} 

#divSearchMember::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#divSearchMember::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#divSearchMember::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.dataTables_scrollBody::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dataTables_scrollBody::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.table-primary .table-bordered-custom thead {
  border: 1px solid #2971b5 !important;
}

.table-bordered-custom tbody tr td:first-child {
  border-left: 1pt solid rgba(0,0,0,.05);
}

.table-bordered-custom tbody tr td:last-child {
  border-right: 1pt solid rgba(0,0,0,.05);
}

.table-bordered-custom tbody tr:last-child {
  border-bottom: 1pt solid rgba(0,0,0,.05);
}
.table-bordered-custom > tbody > tr > td, .table-bordered-custom > tbody > tr > th, .table-bordered-custom > thead > tr > td, .table-bordered-custom > thead > tr > th {
  padding: 8px;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
  background-color: #818a91;
}

.modal-dialog-lg-scrollable .modal-body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

.modal-dialog-lg-scrollable .modal-body::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}

.modal-dialog-lg-scrollable .modal-body::-webkit-scrollbar-thumb {
  background-color: #818a91;
}

/*end scrollbar*/
.datepickers-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1200 !important;
}

.datepicker .active, .datepicker .active:hover {
    color: #444 !important;
    background: transparent !important;
}

.panel-overlay {
    /*top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/
    z-index: 1000;
    opacity: .5;
    pointer-events: none;
}

.none-bg-readonly {
    background-color: transparent !important;
}

.none-border {
    border: 0px transparent !important;
}

.none-bg-border {
    border-color: transparent !important;
}
.none-border-left {
  border-left-style: hidden !important;
}
.none-border-right {
  border-right-style: hidden !important;
}
.panel-transparent-none-border {
  border: none !important
}
/*dataTable*/
/*.table-hover tbody tr:hover td,
#tblEnrollment tbody tr:hover td {
  background-color: #e4e8ef;
  cursor: pointer;
}*/

#chkAllCheckbox {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700 !important;
  color: #3690e6;
}
#totalCheckboxCheckedText{float:left;font-size: 14px;}
.display-icon {
  font-size: 22px !important;
  vertical-align: middle;
}
.numSelected { font-weight: 700 !important; color: #3690e6;}
.numEntries { font-weight: 700 !important; }
div.dataTables_scrollBody .dataTable thead th:after {
  border-right: 0px !important;
  border-left: 0px !important;
}
.table-wrapper {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.table-caption-bottom {
  display: table-caption;
  caption-side: bottom;
}

.table-hover tbody tr:hover td {
  background-color: #e4e8ef;
  cursor: pointer;
}
table.dataTable {
  border-collapse: collapse;
  /*width: 100% !important;*/
}

  table.dataTable > tbody > tr > td {
    /*max-width: 0px;
  text-overflow: ellipsis !important;*/
    overflow: hidden !important;
  }
#tblAssignShift > tbody > tr > td {
  max-width: unset !important;
  overflow: unset !important;
}
.form-loading.form-loading-transparent:before {
   background: none !important;
}
.form-sm-loading {
  position: relative;
  cursor: default;
  user-select: none;
}
.form-sm-loading:before {
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  background-color: transparent;
}
.form-sm-loading:after {
  z-index:10;
  top: 50%;
  left:45%;
  transform: translate(50%, 50%);
  width:20px;
  height:20px;
  -webkit-animation: spinner 800ms infinite linear;
  -moz-animation: spinner 800ms infinite linear;
  -o-animation: spinner 800ms infinite linear;
  animation: spinner 800ms infinite linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(45deg, slateblue, coral) border-box;
  border: 2px solid transparent;
  border-radius: 50px;
}
.form-sm-loading:after, .form-sm-loading:before {
  position:absolute;
  display: block;
  content: "";
}
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.tblOverlap{width: 100%;margin-bottom:20px}
.tblOverlap > tbody > tr > td, .tblOverlap > thead > tr > th{
  padding:8px; 
  line-height:1.61539;
  border:1px solid rgba(0,0,0,.15) !important;  
}
.fixeTabledHeader {
  position: fixed;
  top: 50px;
  /*width: 100%;*/
  z-index: 10;
  display: none;
}
thead.fixedHeader tr { position: relative; }
tbody.scrollContent {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
tbody.scrollContent::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

tbody.scrollContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

tbody.scrollContent::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

thead.fixedHeader { display: table; overflow: auto; width: 100% } 
tbody.scrollContent tr { display: table; width: 100% }

.fixedTableHeader {
  z-index: 1;
  position: fixed;
  width: 100%;
}
.sticky-header{position:fixed; z-index:999}
/*dataTable scroll*/
.table_scroll .dataTables_wrapper {
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.table_scroll .dataTables_wrapper .dataTables_scroll {
  clear: both;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.table_scroll .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
  -webkit-flex: 1 0 0px;
	-ms-flex: 1 0 0px;
	flex: 1 0 0px;
	margin-top: -1px;
	-webkit-overflow-scrolling: touch;
  max-height: 60vh;
}
.table_scroll .dataTables_scrollHeadInner {
  flex: 1 1 auto;
  width: 100% !important;
}
/*end dataTable scroll*/
.border-top-transparent { border-top-color: transparent !important }
.border-top-cancelRequest{ border-top: 1px solid gainsboro !important }
.nonebordertop > tbody > tr:first-child > td {
  border: none;
}
/* Color */
.color-danger { color: #bb2e1d !important; }
.color-default { color: #444 !important; }
.color-white { color: white !important; }
.color-green { color: green !important; }
.color-unknow { color: #777 !important; }
.primary3 { color: #74c0fc !important; }

/* background */
.bg-white, .bg-color-white{ background-color:#fff !important }
.bg-white-darken { background-color: #f9f9f9 !important; }
.bg-weekend { background-color: #efefef; }
.bg-workday { background-color: #d5f5d5; cursor:pointer }
.bg-workdayEmp { background-color: #b6edb6 !important; cursor:pointer}
/*.bg-holiday { background-color: #ffe5eb; cursor:pointer }*/
.bg-holiday { background-color: #f9e9ec; cursor:pointer }
.bg-holidayEmp { background-color: #ffd1dc; cursor:pointer;}
.bg-child-err { background-color: #fddfdf; }
.bg-outside-working { background-color: #f2f2f2 !important; }
.bg-yellow { background-color: #f39c12 !important; }
.bg-gray{ background-color: #BFBFBF !important; }
.bg-light-gray { background-color: #dcdcdc !important; }
.bg-gainsboro{background-color: gainsboro;}
.bg-alicedarkblue { background-color: #99ccff;}
.bg-lightblue {background-color: lightblue;}
.bg-lightgoldenrodyellow{background-color: lightgoldenrodyellow;}
.bg-time-clock {
  padding: 20px;
  background: #4797e8 !important;
  -moz-box-shadow: inset 20px 30px 180px #175aa7;
  -webkit-box-shadow: inset 20px 30px 180px #175aa7;
  box-shadow: inset 20px 30px 180px #175aa7;
}
.bg-primary8{background-color: #1971c2;}
.bg-black3{background: rgb(31,38,46);}
.bg-reset {
  background-image: url("/images/bg-reset-bottom.png");
  background-repeat: no-repeat;
  background-position: center bottom;
}
.bg-color-transparent{background-color: transparent !important}

.label-out{background-color: #c00000;}
.label-onsite{background-color: #3498DB;}
.label-ot {background-color: #0371A1}
.label-ot-request { background-color: #fff; border: 1px solid #0371A1; color:#0371A1 }
.label-leave-request { background-color: #fff; border: 1px solid red; color:red }
.label-onsite-request { background-color: #fff; border: 1px solid #3498DB; color:#3498DB }
.fa-stop-stroke {
  text-shadow: 0px 0px 2px black;
}

/* Error pages */
.page-404-header .px-brand,
.page-500-header .px-brand {
  color: #444;
}

.page-404-header .px-logo,
.page-500-header .px-logo {
    margin-top: 0;
}

.px-bgs {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    white-space: nowrap;
    z-index: 999999;
    border-top: 2px solid rgba(0, 0, 0, .1);
    border-left: 2px solid rgba(0, 0, 0, .1);
}

.px-bgs-container {
    display: inline-block;
    height: 40px;
    vertical-align: bottom;
}

.px-bgs-container:hover,
.px-bgs-container:focus {
    opacity: .7;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.px-bgs-clear {
    background: #fff;
    line-height: 40px;
    text-align: center;
    width: 60px;
    color: #e97c6f;
    font-size: 20px;
    text-decoration: none !important;
}

.px-bgs-clear:hover,
.px-bgs-clear:focus {
    color: #db5949;
}

.px-bgs-container > img {
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

/* px-navbar navbar-right */
.px-navbar .navbar-right .dropdown-menu a:active,
.px-navbar .navbar-right .dropdown-menu a:focus,
.px-navbar .navbar-right .dropdown-menu a:hover,
.px-navbar .navbar-right .dropdown.active > a,
.px-navbar .navbar-right .dropdown.active > a:active,
.px-navbar .navbar-right .dropdown.active > a:focus,
.px-navbar .navbar-right .dropdown.active > a:hover,
.px-navbar .navbar-right .dropdown.open > a,
.px-navbar .navbar-right .dropdown.open > a:active,
.px-navbar .navbar-right .dropdown.open > a:focus,
.px-navbar .navbar-right .dropdown.open > a:hover,
.px-navbar .navbar-right a:active,
.px-navbar .navbar-right a:focus,
.px-navbar .navbar-right a:hover,
.px-navbar .navbar-right li.active > a,
.px-navbar .navbar-right li.active > a:active,
.px-navbar .navbar-right li.active > a:focus,
.px-navbar .navbar-right li.active > a:hover {
  background-color: transparent !important;
}

.px-navbar .px-navbar-label {
  width: 17px;
  height: 17px;
  /*top: 5px;*/
  font-size: 10px;
  border-radius: 15px;
  color: #020b13;
  line-height: 17px;
} 
.navbar-right > li > a {padding: 0 8px !important}
#dropdownToggleLanguage {
  padding: 0 12px 0 5px !important;
}
.badgeSeen {
  /*position: absolute !important;*/
  margin-left: -4px !important;
}
a.noti-more-link:focus {
  background: unset !important
}

#language-selector div:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

/* Sidebar */
#px-sidebar-toggle {
  border-radius: 3px;    
  margin-top: 35px;
  width: 40px;
  height: 40px;
  left: -41px;
  display: block;
  position: absolute;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-decoration: none !important;
  text-align: center;
}

#px-sidebar-toggle * {
    border-color: transparent !important;
}

#px-sidebar-toggle, #px-sidebar-toggle i {
    font-size: 18px;
    line-height: 40px;
}

#px-sidebar-toggle i {
    position: relative;
    top: -1px;
}

#px-sidebar-toggle .ion-android-close {
    display: none;
}

#px-sidebar.open #px-sidebar-toggle .ion-ios-gear {
    display: none;
}

#px-sidebar.open #px-sidebar-toggle .ion-android-close {
    display: inline-block;
}

.px-sidebar-header {
    margin: 0;
    line-height: 40px;
    padding: 0 20px;
}

#px-sidebar label {
    margin: 0;
    cursor: pointer;
    font-weight: 600;
}

#px-sidebar .switcher {
    margin: 0;
    float: right;
}

#px-sidebar .box-row {
    height: 40px;
    vertical-align: middle;
}

#px-sidebar .ps-scrollbar-x-rail,
#px-sidebar .ps-scrollbar-y-rail {
    z-index: 10;
}

#px-sidebar .switcher input:checked ~ .switcher-indicator {
    background: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .33) !important;
}

#px-sidebar .custom-select {
    border-color: rgba(0, 0, 0, .08);
}

#px-togglers .box-row + .box-row .box-cell,
#px-sidebar #px-togglers > div + div {
    border-top: 1px solid rgba(0, 0, 0, .1) !important;
}

.px-themes-list {
    position: relative;
    padding-left: 6px;
    padding-bottom: 6px;
}

.px-themes-item {
    width: 111px;
    height: 66px;
    overflow: hidden;
    display: block;
    float: left;
    position: relative;
    margin-top: 6px !important;
    margin-right: 6px !important;
    overflow: hidden;
}

.px-themes-item,
.px-themes-item * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.px-themes-toggler {
    position: absolute;
    z-index: -1;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.px-themes-thumbnail {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 1;
}

.px-themes-title {
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 111px;
    height: 66px;
    color: rgba(255, 255, 255, 0);
    line-height: 66px;
    text-align: center;
}

.px-themes-title > span {
    position: absolute;
    z-index: 10;
    display: block;
    text-align: center;
    padding: 0 6px;
    font-size: 11px;
    width: 111px;
    height: 66px;
    line-height: 66px;
    background: rgba(39, 38, 52, .7);
    top: 0;
    white-space: nowrap;
    transition-property: line-height, height, background, top;
    transition-duration: .1s;
    -webkit-transition-property: line-height, height, background, top;
    -webkit-transition-duration: .1s;
  }

.px-themes-item:hover .px-themes-toggler:not(:disabled) ~ .px-themes-title > span {
    line-height: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 1);
    width: auto;
    top: 20px;
    /*@noflip*/ left: 50%;
    -webkit-transform: translate(-50%, 0) scale(1);
    -ms-transform: translate(-50%, 0) scale(1);
    transform: translate(-50%, 0) scale(1);
}

.px-themes-title > div {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: .7;
    z-index: 5;
    display: none;
}

.px-themes-item .px-themes-toggler:checked ~ .px-themes-title > span {
    background: rgba(39, 38, 52, 0) !important;
}

.px-themes-item .px-themes-toggler:checked ~ .px-themes-title > div {
    display: block !important;
}

#px-sidebar-loader {
    position: absolute !important;
    z-index: 1000 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    display: none;
}

#metrics > .box-row > .box-cell {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

#metrics > .box-row:last-child > .box-cell:last-child {
    border-bottom-width: 0;
}

.container-regis {
  position: relative;
  width: 100%;
  height: 90vh;
  display: -webkit-box;
  /*display: -webkit-flex;*/
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: auto;
}

.wrap-regis {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-width: 46%;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
  width: 46%;
}

@media (min-width: 768px) {       
    #metrics > .box-row > .box-cell + .box-cell {
        border-left-width: 1px;
        border-left-style: solid;
    }

    html[dir="rtl"] #metrics > .box-row > .box-cell + .box-cell {
        border-left: 0;
        border-right-width: 1px;
        border-right-style: solid;
    }

   #metrics > .box-row:last-child > .box-cell { border-bottom-width: 0; }  
   .page-profile-v2-avatar { margin-top: -70px; }
   .px-navbar .px-navbar-label{top:6px !important}
}

.bg-panel {
    background-color: #f9f9f9 !important;
}

.clearboth {
    clear: both;
}

.switcher {
    display: inline !important;
}
.switcher-indicator {width:82% !important;}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fff;
}

.table-striped > tbody > tr {
    background-color: #f9f9f9;
}

.table-avatar .table > tbody > tr > td{padding:4px 8px !important}
/*pricing*/
.widget-pricing,
.pricing-page-customers-logos {
  max-width: 980px;
}

.pricing-page-header.page-header {
  margin-bottom: 0;
  padding-top: 80px;
  padding-bottom: 160px;
  border: none;
  border-radius: 0;
  /*background-image: url('../images/pricing/homepage_banner.jpg');
  object-position: 66% 0;*/
}

.widget-pricing {
    margin-top: -90px;
}

/*avatar*/
.widget-avatar {
  margin: 2px 10px 0px 3px !important;
  width: 42px;
  height: 42px;
  background: url("/dist/images/avatars/default_user.png") no-repeat;
  background-size: 42px 42px;
  vertical-align: middle;
  object-fit:cover;
} 
.widget-id{margin-top: 2px}
.widget-name {
  margin-top: -3px;
  font-size: 0.987em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}
.widget-img{display:table-cell; vertical-align:middle;height:40px}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.profile-pic {
  display: inline;
  margin: 0 auto;
  margin-left: -25%; /* centers the image height: 100%; */
  width: auto;
}


/*end*/

.pricing-page-customers {
    margin-top: 50px;
    margin-bottom: 50px;
    background: rgba(0, 0, 0, .04);
}

.pricing-page-customers-logos {
    margin: 0 auto;
    opacity: .4;
}

.pricing-page-customers-logos img {
    height: 50px;
    margin: 0 10px;
}


/*signin*/

.vertical-divider {
    position: absolute;
    display: block;
    z-index: 10;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: auto;
    height: 50%;
    line-height: 0;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.vertical-divider:before,
.vertical-divider:after {
    position: absolute;
    left: 50%;
    content: '';
    z-index: 9;
    border-left: 1px solid rgba(34,36,38,.15);
    border-right: 1px solid rgba(255,255,255,.1);
    width: 0;
    height: calc(100% - 1rem);
}

.row-divided > .vertical-divider {
    height: calc(40% - 1rem);
}

.vertical-divider:before {
    top: -100%;
}

.vertical-divider:after {
    top: auto;
    bottom: 0;
}

.row-divided {
    position: relative;
}

.row-divided > [class^="col-"],
.row-divided > [class*=" col-"] {
  padding-left: 30px; /* gutter width (give a little extra room) 2x default */
  padding-right: 30px; /* gutter width (give a little extra room) 2x default */
}

/*.page-signin {
    padding: 80px 40px 80px 130px;
}

.page-signin-social {
    padding: 80px 80px 80px 40px;
}*/

.page-signin-modal {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    display: block;
}

.page-signin-form-group {
    position: relative;
}

.page-signin-icon {
    position: absolute;
    line-height: 21px;
    width: 36px;
    border-color: rgba(0, 0, 0, .14);
    border-right-width: 1px;
    border-right-style: solid;
    left: 1px;
    top: 9px;
    text-align: center;
    font-size: 15px;
}

.page-header h1, .page-header h2, .page-header h3, .page-header h4, .page-header h5, .page-header h6{font-size:24px !important}

html[dir="rtl"] .page-signin-icon {
    border-right: 0;
    border-left-width: 1px;
    border-left-style: solid;
    left: auto;
    right: 1px;
}

html:not([dir="rtl"]) .page-signin-icon + .page-signin-form-control {
    padding-left: 50px;
}

html[dir="rtl"] .page-signin-icon + .page-signin-form-control {
    padding-right: 50px;
}

.header-menu-text {
    float: left;
    width: 62%;
    margin-top: 5px;
} 

#page-signin-forgot-form {
    display: none;
}
/* Margins */
.page-signin-modal > .modal-dialog {
    margin: 30px 10px;
}

th.dt-center, td.dt-center {
    text-align: center;
}
.display-block { display: block; }
.display-flex { display: inline-flex; } 
.display-table { display: table; } 
.display-inline { display: inline; } 
.object-fit_fill { object-fit: fill }
.object-fit_contain { object-fit: contain } 
.object-fit_cover { object-fit: cover }
.object-fit_none { object-fit: none }  
.object-fit_scale-down { object-fit: scale-down }

/* avatar */
.header-profile-avatar {
    width: 160px;
    height: 160px;
    margin-left: 30%;
    -webkit-border-radius: 160px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 160px;
    -moz-background-clip: padding;
    border-radius: 160px;
    background-clip: padding-box;
    background-size: cover;
    background-position: center center;
}

.header-menu-avatar {
    width: 55px;
    height: 55px;
    -webkit-border-radius: 55px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 55px;
    -moz-background-clip: padding;
    border-radius: 55px;
    background-clip: padding-box;
    margin-right: 10px;
    float: left;
    background-size: cover;
    background-position: center center;
}

/*.teamMembers-avatar {
  width: 43px;
  height: 43px;
  background: url("/dist/images/avatars/default_user.png") no-repeat;
  background-size: 43px 43px;
  vertical-align: middle;
}*/

.organize-avatar {
    width: 35px;
    height: 35px;
}

.org-text-ellipsis {
  max-width: 130px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 5px;
}
.iconDefaultOrg {
  position:static; /*absolute*/
 /* margin-top: 6px;*/
  margin-left: 0px;
}
#toolTipInfoOrg{margin-top:3px}

.noresize {
  resize: none;
}


.hr-line-dashed {
  border-top: 1px dashed #e7eaec;
  background-color: #ffffff;
  padding-top: 15px;
}

.hr-line-solid {
  border-top: 1px solid #e2e2e2;
  background-color: #ffffff;
  padding-top: 11px;
}

.ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 15px 20px 20px 20px;
}

.ibox-footer {
    color: inherit;
    border-top: 1px solid #e7eaec;
    font-size: 90%;
    background: #ffffff;
    padding: 10px 15px;
}

/*
 * Component: Info Box
 * -------------------
 */
.info-box {
  display: block;
  min-height: 80px;
  background: #fff;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  margin-bottom: 15px;
}
.info-box small {
  font-size: 14px;
}
.info-box .progress {
  background: rgba(0, 0, 0, 0.2);
  margin: 5px -10px 5px 0px;
  height: 2px;
}
.info-box .progress,
.info-box .progress .progress-bar {
  border-radius: 0;
}
.info-box .progress .progress-bar {
  background: #fff;
}
.info-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 80px;
  width: 80px;
  text-align: center;
  font-size: 45px;
  line-height: 80px;
  background: rgba(0, 0, 0, 0.2);
}
.info-box-icon > img { max-width: 100%; }
.info-box-content {
  padding: 5px 10px 5px 5px;
  margin-left: 90px;
}
.info-box-number { display: block; font-size: 38px; }
.info-box-footer {
  position: relative;
  display: block;
  color: white;
  text-align: right;
  padding-right: 15px;
}
.progress-description{
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-box-text {
  display: block;
  font-size: 20px;
  white-space: nowrap;
  text-transform: uppercase;
}
.info-box-more { display: block; }
.progress-description { margin: 0; }
.stats-box-title {
  display: block;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  text-align: right;
}
.stats-box-number {
  display: block;
  font-size: 48px;
  font-weight: 300;
  line-height: 50px;
  text-align: right;
  font-family: 'Roboto', sans-serif !important;
}



.stack-text { margin-left: 5px; }

.custom-clock {
    font-size: 1.5em;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

.fa-stack-1_4x { font-size: 1.4em; line-height: 1.25em; } 
.fa-stack-1_5x { font-size: 1.5em; line-height: 1.25em; }
.fa-stack-1_6x { font-size: 1.6em; line-height: 1.25em; }
.fa-stack-1_8x { font-size: 1.8em; } 
.red { color: #EC3C4A !important; } 
.text-whitesmoke { color: whitesmoke }
.text-muted-dark{ color: #555 }
.text-default { color: #444 }
.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 1px;
}
.text-day-clock { padding-left:60px !important; padding-right:65px !important;}
.text-time-clock { padding-left:60px !important; padding-right:62px !important;}
.fa-stack-icon1_6x {
    font-size: 1.6em;
    line-height: 1.25em;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}
.text-none-underlined {text-decoration:none!important}
.underline {
  border-bottom: 2px solid currentColor;
  display: inline-block;
  /*text-shadow: 2px 2px white, 2px -2px white, -2px 2px white, -2px -2px white;*/
}
.text-center { text-align: center }
.crop-text-2 {
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.input-lg { font-size: 13px !important; }
.input-has-error { border: 1px solid #e46050; }
fieldset.scheduler-border {
    border: 1px solid #d6d6d6 !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
}
.validation-error { color: #b05b59 }
/*#tblAddMember_wrapper .table-header, #tblAddApprovers_wrapper .table-header {
    background: transparent !important;
    color: black;
}*/
#tblAddMember_length .form-control, #tblAddMember_filter .form-control {
  border: 1px solid #d6d6d6 !important;
}

#tblAddMember > tbody > tr:last-child {
    border-bottom: 1px solid rgba(0,0,0,.05);
}

#tblAddApprovers_length .form-control, #tblAddApprovers_filter .form-control {
    border: 1px solid #d6d6d6 !important;
}

#tblAddApprovers > tbody > tr:last-child {
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.note-success {
    background: #fff !important
}

.breadcrumb-line {
    margin-bottom: 20px;
    margin-left: -20px !important;
    border-bottom: 1px solid #ddd;
}

.border-line-top {
    border-top: 3px solid #2971b5 !important;
}

.border-line-bottom {
    border-bottom: 3px solid #2971b5 !important;
}
.border-top-gray{border-top:1px solid gray}
.border-bottom-gray{border-bottom:1px solid gray}
.jplist .list .list-item {
  padding: 10px 0px;
  border-bottom: 1px solid #e5e5e5
}

.page-header-content, .breadcrumb {
    margin-bottom: 0px !important
}

.page-header-icon { vertical-align: middle }

/*calendar*/
.calendar-text { margin-top: .2em; } 
.fc-day-top{font-family: 'Roboto', sans-serif !important;}
#year_holiday .panel-default {
    border: 0px;
    border-bottom: 1px solid #e2e2e2 !important;
}
#year_calendar .calendar-header table { border-bottom: 1px solid #d6d6d6; }
.inputCalendarPicker {
  width: 2px;
  border: 0;
  outline: none;
  color: transparent;
}
/* Bootstrap year calendar */
.calendar .current-year { border: 2px solid red;}

.custom-panel-body {
    background-color: transparent !important;
    border-width: 0px !important;
}
.opacity-70 {opacity: 0.7 !important}
.opacity-100 {opacity: 1 !important}
.opacity-0 {opacity: 0 !important}
/* Custom styles table */
.cursor-hand {
  cursor: pointer !important;
}
.cursor-zoomin {
  cursor: zoom-in !important;
}
.cursor-zoomout {
  cursor: zoom-out !important;
}

.cursor-move, .move {
    cursor: move;
}
.cursor-default {
  cursor: default !important;
}

/*panel content*/

.overlayPanelContent {
  height: 100%;
  width: 0;
  right: 0;
  position: fixed;
  z-index: 1005;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
}

.panelContent {
  position: relative;
  top: 10%;
  width: 100%;
  min-height: 60%;
  padding:20px;
}

.close-container {
  position: absolute;
  top: 50px;
  right: 6px;
  z-index:1007;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.leftright {
  height: 4px;
  width: 35px;
  position: absolute;
  margin-top: 20px;
  background-color: #e82d17;
  border-radius: 2px;
  transform: rotate(45deg);
  transition: all .2s ease-in;
}

.rightleft {
  height: 4px;
  width: 35px;
  position: absolute;
  margin-top: 20px;
  background-color: #e82d17;
  border-radius: 2px;
  transform: rotate(-45deg);
  transition: all .2s ease-in;
}

.close-container label {
  color: black;
  font-size: .9em;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all .2s ease-in;
  opacity: 0;
}

label.closePanelContent {
  margin: 37px 0 0;
  position: absolute;
  right: 5px;
}

.close-container:hover .leftright {
  transform: rotate(-45deg);
  background-color: #F25C66;
}

.close-container:hover .rightleft {
  transform: rotate(45deg);
  background-color: #F25C66;
}

.close-container:hover label {
  opacity: 1;
}

/*flexbox*/
.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    height: 100vh;
    margin-top: -100px;
    padding-top: 100px;
    position: relative;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: overflow;
}

.flex-left {
    overflow: auto;
    height: auto;
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}

/*.flex-left::-webkit-scrollbar,
        .flex-middle::-webkit-scrollbar {
            display: none;
        }*/

.flex-left {
    width: 45rem;
}

.flex-middle {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
}

#flex-container {
    display: flex;
    flex-direction: row;
}

#flex-container > .raw-item {
    flex: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}

#flex-container > .flex-item {
    width: 45rem;
    overflow: auto;
}

#flex-container { width: 100%; }



.sidenav {
  /*height: 100%;*/
  width: 0;
  position: fixed;
  z-index: 10;
  top: 18%;
  left: 230px;
  background-color: #fff;
  -webkit-box-shadow: -2px 2px 5px 0px rgba(98,98,98,1);
  -moz-box-shadow: -2px 2px 5px 0px rgba(98,98,98,1);
  box-shadow: -2px 2px 5px 0px rgba(98,98,98,1);
  overflow-x: hidden;
  transition: 0.5s;
  /*padding-top: 60px;*/
}

/*.sidenav a {  
  text-decoration: none;   
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover { color: #f1f1f1; }*/

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/*jstree*/
#jstree_div .jstree-anchor:hover {
    cursor: move;
}
/*select2*/
.select2-container--default .select2-results > .select2-results__options {
    text-align: left !important;
}
.has-error .select2-container--default .select2-selection--single {
  border: 1px solid #e46050 !important;
}
.select2-selection--multiple{ cursor: pointer !important; }
.select2-container--default .select2-selection--multiple:before {
  content: ' ';
  display: block;
  position: absolute;
  border-color: #444 transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  right: 6px;
  margin-left: -4px;
  margin-top: -2px;
  top: 50%;
  width: 0;
  cursor: pointer;
}

.select2-container--open .select2-selection--multiple:before {
  content: ' ';
  display: block;
  position: absolute;
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px;
  height: 0;
  right: 6px;
  margin-left: -4px;
  margin-top: -2px;
  top: 50%;
  width: 0;
  cursor: pointer;
}

#assignType.dropdown-toggle {
  position: relative
}
#assignType.dropdown-toggle:after{position:absolute;top:1em;right:0.5em}

/*form-group*/
input[type="text"].form-control {
  line-height: 2.5 !important;
}
.form-control-plaintext {
  border: 0px transparent !important;
  background-color: #fff !important;
}

.form-group.required .control-label::after {
  content: " *";
  vertical-align: middle;
  color: #dc3545 !important;
} 
.form-control:focus {
  border-color: #ccc;
  box-shadow: none;
  border: 1px solid #ccc;
  outline: none !important;
}
.custom-chk {
    left: 0 !important;
    right: 0 !important;
    padding-left: 13px !important;
}

.custom-group-addon {
    padding: 4px 5px !important;
    background-color: transparent !important;
    border-width: 0px !important;
}

/*.custom-control.custom-checkbox {padding-left: 15px !important} */
.custom-checkbox{position:relative;}
.custom-checkbox-header .custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !important;
  background-color: #fff !important;
}
.custom-chk .custom-control-input:checked ~ .custom-control-indicator {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 1px #d6d6d6 inset !important
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-checkbox {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#4b4b4b' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !important;
}
.custom-control-input:checked ~ .custom-control-checkbox {
  background-color:  whitesmoke !important;
}
.checkbox {
  border: 0px !important;
}
.custom-size-chk{width:16px; height:18px}
.checkbox label:after {
  content: '';
  display: table;
  clear: both;
}

.checkbox .custom-control-chk {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  background-color: #fff;
  width: 16px;
  height: 16px;
  float: left;
  margin-right: 0px;
}

.checkbox .custom-control-chk .cr-icon {
  position: absolute;
  font-size: .7em;
  line-height: 0;
  top: 50%;
  left: 15%;
}

.checkbox label input[type="checkbox"] {
  display: none;
}

.checkbox label input[type="checkbox"] + .custom-control-chk > .cr-icon {
  opacity: 0;
}

.checkbox label input[type="checkbox"]:checked + .custom-control-chk > .cr-icon {
  opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .custom-control-chk {
  opacity: .5;
}
.custom-input-chk{height:27px}
.custom-input-chk:disabled:after {background: #eceeef}
.custom-input-chk:after {
  line-height: 1.5em;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px #d6d6d6 inset;
  margin-top: 2px;
  border-radius: 2px;
  cursor: pointer;
}
.custom-input-chk:checked:disabled:after, .custom-input-chk:checked:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
    background-color: #3690e6;
    box-shadow: none;
}
.custom-input-chk:hover:after {
  box-shadow: 0 0 0 1px #3690e6 inset;
}
.disabled {
  pointer-events: none;
}
.opt-span-text {
  position: absolute;
  margin-top: 3px;
  margin-left: 10px;
}
.panel-body {
  border-width: 0px !important
}
/* end */
/* Bottom left text */
.bottom-left {
  position: absolute;
  left: 5px;
  bottom: 12px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 12px;
    right: 5px;
}

/* btn */
.btn_custom { width: 90px !important; }

.btn-none-border {
  border: none !important;
  background: 0 0 !important;
  box-shadow: none !important;
}

.btn-box-tool { padding: 3px; }
.btn-box-tool:hover { cursor: pointer; }
.btn-group-md > .btn {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 2px
}
button.close{opacity: .7 !important}
.square_btn {
  display: inline-block;
  padding: 0.2em 1em;
  text-decoration: none;
  background: #ddd;
  color: #000;
  border-radius: 1px;
  box-shadow: 0px 0px 0px 3px #dfdfdf;
  border: dashed 1px #646464;
}  
.square_btn:hover{
	border: dotted 1px #000;
  color: #000 !important;
  cursor: pointer !important;
}
a.btn-social,
.btn-social
{
    border-radius: 50%;
    color: #ffffff !important;
    display: inline-block;
    height: 54px;
    line-height: 54px;
    margin: 8px 4px;
    text-align: center;
    text-decoration: none;
    transition: background-color .3s;
    width: 54px;
}

.btn-social .fa,.btn-social i
{
    backface-visibility: hidden;
    transform: scale(1);
    transition: all .25s;
}
.btn-social:hover,.btn-social:focus
{
    color: #fff;
    outline: none;
    text-decoration: none;
}
.btn-social:hover .fa,.btn-social:focus .fa,.btn-social:hover i,.btn-social:focus i
{
    transform: scale(1.3);
}
.btn-social.btn-xs
{
    font-size: 9px;
    height: 24px;
    line-height: 13px;
    margin: 6px 2px;
    width: 24px;
}
.btn-social.btn-sm
{
    font-size: 13px;
    height: 36px;
    line-height: 18px;
    margin: 6px 2px;
    width: 36px;
}
.btn-social.btn-lg
{
    font-size: 22px;
    height: 72px;
    line-height: 40px;
    margin: 10px 6px;
    width: 72px;
}
.btn-facebook
{
    background-color: #3b5998;
}
.btn-facebook:hover
{
    background-color: #4c70ba;
}
.btn-youtube
{
    background-color: #e52d27;
}
.btn-youtube:hover
{
    background-color: #ea5955;
}

/* create avatar */
.avatar-wrapper {
    height: 364px;
    width: 100%;
    margin-top: 15px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.25);
    background-color: #fcfcfc;
    overflow: hidden;
}

.avatar-wrapper img {
  display: block;
  height: auto;
  max-width: 100%;
}

.avatar-preview {
    float: left;
    margin-top: 15px;
    margin-right: 15px;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
} 
.avatar-preview:hover {
    border-color: #ccf;
    box-shadow: 0 0 5px rgba(0,0,0,.15);
} 
.avatar-preview img { width: 100%; } 
.avatar-view {
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
}
.avatar-col-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -4px;
}
.div-avatar {
    width: 172px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.avatar-body {
    padding-right: 15px;
    padding-left: 15px;
}

.avatar-upload {
    overflow: hidden;
}

.avatar-upload label {
    display: block;
    float: left;
    clear: left;
    /*width: 100px;*/
}

.avatar-upload input {
  display: block;
  margin-left: 55px;
}

.preview-container {
    overflow: hidden;
    /*min-width: 160px;*/
}

.preview-lg {
    /*height: 184px;
    width: 184px;*/
    margin-top: 15px;
}


/* select */
.select2-container--focus .select2-dropdown,
.select2-container--focus .select2-selection,
.select2-container--open .select2-dropdown,
.select2-container--open .select2-selection {
    border-color: #d6d6d6 !important;
}

.toolTip {
  z-index: 10;
  position: absolute;
  background-color: #f9f9f9;
  border: 2px solid #646464;
  border-radius: 4px;
  padding: 6px 12px;
  font-weight: 600;
  pointer-events: none;
}

  .toolTip:before {
    content: " ";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #646464;
    position: absolute;
    /* bottom: -10px;
    left: 5px;*/
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }


.tooltip_templates {
  display: none;
}

.org_templates {
  position: absolute;
  background-color: #f9f9f9;
  width: 25.6%;
  border-radius: 5px;
  margin-top: 5px;
  border: 1px solid #dcdcdc;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
  background-color: #f9f9f9;
  border: 2px solid #646464;
  border-radius: 3px;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
  padding: 8px;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
  border-top-color: #646464 !important;
  margin-top: 1px;
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-top .tooltipster-arrow-background {
  top: -3px !important;
  border-top-color: #f9f9f9;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
  border-right-color: #646464 !important;
  margin-left: -1px;
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-right .tooltipster-arrow-background {
  left: 3px !important;
  border-right-color: #f9f9f9 !important;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: #646464 !important;
}
.tooltipster-sidetip.tooltipster-noir .tooltipster-arrow { height: 10px !important; }

ul.tooltipMenu {
  display: none;
  position: absolute;
  left: 100%;
  /*top: -19px;
    z-index: 9;    
    margin: 0; */
  top: 0;
  margin-left: 10px;
  padding: 3px;
  list-style: none;
  background: #fff;
  color: #333;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #999;
}

ul.tooltipMenu:before {
    content: " ";
    width: 0;
    height: 0;
    position: absolute;
    top: 20%;
    right: 100%;
    margin-top: -10px;
    border-right: 10px solid #999;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

ul.tooltipMenu:after {
    content: " ";
    width: 0;
    height: 0;
    position: absolute;
    top: 20%;
    right: 100%;
    margin-top: -8px;
    border-right: 8px solid #FFFFFF;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

ul.tooltipMenu li {
    padding: 5px 5px 5px 15px;
    min-width: 100px;
    border-bottom: solid 1px #ccc;
    cursor: pointer;
}

ul.tooltipMenu li:hover {
   font-weight: 500;
}

ul.tooltipMenu li:last-child {
    border: none
}

/* The actual popup */
/*.toolTip {
    z-index: 3;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    margin-left: -80px;
}

.toolTip::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}*/

.tblInfo {
    width: 90%;
    margin: auto;
    float: none;
}

.select-hide {
    border: 0px;
    background-color: transparent !important;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.validation-error {
    text-align: left;
}
.container-view { width: 100%; height: 450px; }
.container-content { width: 100%; padding-left: 30px }
.container-height {height:82vh;}
/* wizard-steps */
.container-wizard {
    position: relative;
    padding: 20px;
    background-color: #fff;
    border: 3px solid #f7f7f9;
    border-radius: 3px;
}

.wizard-steps > li{padding-left: 50px !important}
/* display password */
.si-info {
  margin: 15px auto 7px;
  padding: 0px 5px;
  max-width: 420px;
}

.si-info li {
    list-style: none;
    text-align: left;
}

#pass input[type=text] {
    height: 50px;
    width: 40px;
    text-align: center;
    font-size: 2em;
    border: 1px solid #d6d6d6 !important;
    background-clip: padding-box;
    border-radius: 4px;
    box-sizing: border-box;
    margin-right: 10px;
}

/* annimation border */
.border-stripes {
    animation: progress-bar-stripes 1s linear infinite;
    background-image: linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    background-size: 10px 10px;
}

/* end annimation border */

.divTooltip {
    margin: 8px;
    padding: 8px;
    border: 1px solid blue;
    background-color: yellow;
    position: absolute;
    z-index: 5;
}

#boxShiftWeekly {
    margin-top: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height:25px;
    line-height: 25px;
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;
    cursor: pointer;
}

#boxShiftDaily {
    margin-top: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height:25px;
    line-height: 25px; /* fallback */
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;
    cursor: pointer;
}

.actual-bar {
  position: absolute;
  z-index: 2;
  margin-top: -4%;
  /*margin-top: 40%;*/
  /*top: 3px;*/
  height: 4px;
  background: #70ad47;
}
.caret-out {
  position: absolute;
  z-index: 4;
  margin-top: -10%;
  color: red;
  font-size: 0.89em;
  transform: rotate(-270deg);
}
.caret-in {
  position: absolute;
  z-index: 4;
  margin-top: -10%;
  color: #385723;
  font-size: 0.89em;
  transform: rotate(-90deg);
}
.mode-auto {
  position: absolute;
  z-index: 3;
  margin-top: -8%;
  color: #4472c4;
  font-size: 0.8em;
  transform: rotate(-90deg);
}
/*.divPeriod { margin-top: 0.45em; }*/
.divActual { position: relative; margin-top:-0.15em }

.fa-rotate-45 {
  transform: rotate(45deg);
}

.ion-rotate-90 {
  display: inline-block;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.border-current-day {
  border-left-color: #818a91 !important;
  border-left-width: 2px !important;
}

.overflow-x{overflow-x: scroll !important}
.overflow-unset{overflow: unset !important}

/* input search plase*/
.pac-container{z-index: 1300 !important}
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus { border-color: #4d90fe; }
.small-box {
  border-radius: 2px;
  position: relative;
  display: block;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 8px 10px 4px 0px;
}
.small-box-footer {
  position: relative;
  text-align: center;
  padding: 3px 0;
  color: rgba(255,255,255,0.8);
  display: block;
  background: rgba(0,0,0,0.1);
  text-decoration:none;
}


.lnks {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:70px;
  z-index:10;
}

.lnks:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:1px;
  background: radial-gradient(ellipse at left, rgba(197, 202, 213, .7) 0, rgba(255, 255, 255, 0) 70%);
}

.lnk {
  position:relative;
  float:left;
  width:50%;
  height:70px;
  line-height:70px;
  font-size:12px;
  color:#171717;
  font-weight:500;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  border:none;
}

.lnk:before {
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:1px;
  height:100%;
  background: radial-gradient(ellipse at top, rgba(197, 202, 213, .7) 0, rgba(255, 255, 255, 0) 70%);
}

.lnk.discover:before {
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:1px;
  height:100%;
  background:none;
}
.content { position:relative;}
.content:last-child { margin-bottom:0; }  
.content .title {
  position:relative;
  font-size:17px;
  color:#171717;
  line-height:21px;
  font-weight:500;
  margin:0 0 15px;
  padding:0;
}

.content .title:after {
  content:'';
  position:absolute;
  left:-20px;
  bottom:-12px;
  width:100%;
  height:1px;
  background:radial-gradient(ellipse at left, rgba(197, 202, 213, .7) 0, rgba(255, 255, 255, 0) 70%);
} 
.content-detail{height: 100%}
.content-action {
  position: relative;
  /*overflow-x: hidden;*/
  height: 100%;
  padding: 0px 20px;
}
.content-action:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: -10px 0 10px -10px rgba(0,0,0,.09);
  border-radius: 0 0 4px 0;
  -moz-border-radius: 0 0 4px;
  -webkit-border-radius: 0 0 4px 0;
}

/* Role Members bhoechie-tab */  
div.bhoechie-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
  margin-top: 10px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
  opacity: 0.97;
}
div.bhoechie-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
  margin-bottom: 0;
}
  div.bhoechie-tab-menu div.list-group > a .glyphicon,
  div.bhoechie-tab-menu div.list-group > a .fa {
    color: #2971b5;
  }
div.bhoechie-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
}
  div.bhoechie-tab-menu div.list-group > a.active,
  div.bhoechie-tab-menu div.list-group > a.active .glyphicon,
  div.bhoechie-tab-menu div.list-group > a.active .fa {
    background-color: #2971b5;
    color: #ffffff;
  }
div.bhoechie-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #2971b5;
}

div.bhoechie-tab-content{
  background-color: #ffffff;
  padding: 20px 20px 0 20px;
}

div.bhoechie-tab div.bhoechie-tab-content:not(.active){
  display: none;
}
/* end bhoechie tab */

/* Role Members tab */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 100%;
  z-index: 10;
}
#cssmenu ul {
  border: 1px solid #cccccc;
  border-radius: 2px;
  background: #ffffff;
  background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: -o-linear-gradient(bottom, #f0f0f0, #ffffff);
  background: linear-gradient(to top, #f0f0f0, #ffffff);
}
#cssmenu ul li {
  display: block;
  background-color:#ffffff;
  border-bottom: 1px solid #cccccc;
}
#cssmenu ul li.active {
  border-bottom: 0;
}
#cssmenu ul li:last-child {
  border-bottom: 0;
}
#cssmenu ul li a {
  display: block;
  padding: 14px 12px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #444444;
}
#cssmenu ul li.active {
  left: -8px;
  width: 104%;
  padding: 2px;
  background: #3d85c6;
  background: -moz-linear-gradient(bottom, #3475b1, #5594cd);
  background: -webkit-linear-gradient(bottom, #3475b1, #5594cd);
  background: -o-linear-gradient(bottom, #3475b1, #5594cd);
  background: linear-gradient(to top, #3475b1, #5594cd);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
#cssmenu ul li.active > a {
  padding: 12px 12px 12px 16px;
  border-left: 1px dashed #78aad7;
  border-top: 1px dashed #78aad7;
  border-bottom: 1px dashed #78aad7;
  color: #ffffff;
  text-shadow: 0 1px 1px #245179;
}
#cssmenu ul li.active:after {
  position: absolute;
  right: -16px;
  top: 7px;
  width: 31.526911934581186px;
  height: 31.526911934581186px;
  background: #3d85c6;
  background: -moz-linear-gradient(-45deg, #3475b1, #5594cd);
  background: -webkit-linear-gradient(-45deg, #3475b1, #5594cd);
  background: -o-linear-gradient(-45deg, #3475b1, #5594cd);
  background: linear-gradient(-45deg, #3475b1, #5594cd);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}
#cssmenu ul li.active:before {
  position: absolute;
  right: -12px;
  top: 9px;
  z-index: 10;
  width: 28.526911934581186px;
  height: 28.526911934581186px;
  border-right: 1px dashed #a0c3e3;
  border-top: 1px dashed #a0c3e3;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}
#cssmenu ul li.active a:after {
  position: absolute;
  bottom: -7px;
  left: -11px;
  z-index: -1;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid #275985;
  content: "";
}
.box-alert-warning {
  line-height: 100px;
  text-align: center;
}

.span-warning {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
} 

/* end Role Members tab */
.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

.center-screen .panel {
   min-height: 60vh;
}

.displayText {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  font-size: 20px;
  font-weight: 600;
  clear: both;
}

.hhoverlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.7);
}

.hhoverlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.hhoverlay-body {
  position: relative;
  max-width: 80%;
  margin: 0px auto;
  display: inline-block;
}

.hhoverlay-container {
  padding: 25px 15px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 0.2em 1em rgb(0 0 0 / 60%);
}

.hhoverlay .hhclosebtn {
  position: absolute;
  top: -38px;
  right: 0px;
  font-size: 23px;
  color: #fff;
}

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1005;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 13px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ui-autocomplete > li > div {
  display: block;
  padding: 0px 13px;
  clear: both;
  font-weight: normal;
  line-height: 1.8;
  white-space: nowrap;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  cursor: pointer;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-autocomplete-loading {
  background: url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif) no-repeat right center
}
.toast-top-right {
  top: 50px !important;
}
.checkerboard {
  /*min-width: 150px;
  min-height: 150px;*/
  max-width: 250px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.vertical-tab{
    display: table;
}
.vertical-tab .nav-tabs{
    display: table-cell;
    width: 20%;
    min-width: 20%;
    vertical-align: top;
    border: none;
    border-right: 2px solid #e7e7e7;
}
.vertical-tab .nav-tabs li{
   float: none;
   vertical-align: top;
}
.vertical-tab .nav > li + li {
  margin-left:0px;
}
.vertical-tab .nav-tabs li a {
  color: #444;
  /*font-weight: 700;*/
  text-align: right;
  padding: 10px 20px;
  margin: 0 0 1px 0;
  background-color: transparent;
  border: none;
  transition: all 0.3s ease 0s;
}
.vertical-tab .nav-tabs li.active a {
  font-weight:bold
}
.vertical-tab .nav-tabs li a:hover,
.vertical-tab .nav-tabs li.active a,
.vertical-tab .nav-tabs li.active a:hover{
    color: #444;
    background: #fff;
    border: none;
}
.vertical-tab .nav-tabs li a:before,
.vertical-tab .nav-tabs li a:after{
    content: "\f054";
    color: #198df8;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    opacity: 0;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: -4px;
    z-index: 1;
    transition: all 0.3s ease 0.1s;
}
.vertical-tab .nav-tabs li a:after{
    content: "";
    background: #198df8;
    width: 2px;
    height: 100%;
    transform: translateY(0);
    top: 0;
    right: 8px;
    transition: all 0.3s ease 0s;
}
.vertical-tab .nav-tabs li a:hover:before,
.vertical-tab .nav-tabs li.active a:before{
    opacity: 1;
    right: -17px;
}
.vertical-tab .nav-tabs li a:hover:after,
.vertical-tab .nav-tabs li.active a:after{
    opacity: 1;
    right: -2px;
}
.vertical-tab .tab-content{
    background-color: #fff;
    line-height: 23px;
    display: table-cell;
    position: relative;
    padding: 10px 15px 10px 25px;
}
.vertical-tab .tabs {
    border-width: 0;
}

@media only screen and (max-width: 479px){
    .vertical-tab .nav-tabs{
        display: block;
        width: 100%;
        border-right: none;
    }
    .vertical-tab .nav-tabs li a{
        padding: 7px 7px;
        margin: 0 0 18px 0;
    }
    .vertical-tab .nav-tabs li a:before,
    .vertical-tab .nav-tabs li a:after{
        transform: translateY(0) translateX(50%) rotate(90deg);
        right: 50%;
        top: auto;
        bottom:0;
    }
    .vertical-tab .nav-tabs li a:after{
        width: 50%;
        height: 3px;
        transform: translateY(0) translateX(50%) rotate(0);
    }
    .vertical-tab .nav-tabs li a:hover:before,
    .vertical-tab .nav-tabs li.active a:before{
        bottom: -22px;
        right: 50%;
    }
    .vertical-tab .nav-tabs li a:hover:after,
    .vertical-tab .nav-tabs li.active a:after{
        bottom: -2px;
        right: 50%;
    }
    .vertical-tab .tab-content{
        border-top: 3px solid #e7e7e7;
        display: block;
        padding: 20px 15px 10px;
    }
    .vertical-tab .tab-content h3{ font-size: 18px; }
}
.modal-banner {
  display: none;
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

.modal-content-banner {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 640px;
  width: 90%;
  animation: fadeIn 1s ease;
}

.close-modal-banner {
  position: absolute;
  top: -10px;
  right: 54px;
  font-weight: bold;
  color: #333;
  background: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  border: 1px solid #ccc;
  z-index: 3;
  cursor: pointer;
  animation: fadeIn 1.9s ease;
}

.modal-content-banner img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ----------- iPhone 5, 5S, 5C and 5SE Portrait  ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait) {
  .wrap-regis{width: 100%;}
  .vertical-divider{display:none !important}
  .page-signin{width: 293px; }
  /*.wrap-login100 {padding-top: 30px !important; padding-bottom:30px !important}
  .login100-form-title {font-size: 1.5em !important; padding-bottom:30px !important}*/
  .fc-toolbar.fc-header-toolbar{width:230px !important}
  .fc-button-info{ right:5px !important; }
  .flex-col-sign-up { padding-top: 20px!important;}
  .flex-c-m { padding:8px 0px !important } 
  .col-md-6, .col-box-2 {width: 100%; }
  .col-md-6, .col-box-2, .row-divided > [class^="col-"], .row-divided > [class*=" col-"] {padding: 0px 5px !important; } 
  /*.text-ellipsis-leave{width: 205px}*/
  /*.fc-toolbar.fc-header-toolbar{width:200px!important;}*/
  .titleAxisY{font-size: 0.8em}
  .titleGraph {font-size: 1em}
  .info-box-text {font-size: 1.3em !important}
  .fc-day-number {font-size: 1.25em !important}
  .fc-center h2{font-size: 19px !important}
  .fc-today .fc-day-number {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important
  }
  .p-a-2, .p-a-3{padding: 10px !important;}
  .p-l-2{padding-left: 10px !important; }
  .quotaUsage{padding-left: 0px !important; }
  .fc-month-view .fc-row .fc-day i { font-size: 8px!important;} 
  #leaveQuotaPagination-pagination{padding-right: 0px !important}
  .nav-tabs-simple{margin-right:0px !important}
  .nav-tabs-simple>li {width:66px}
  .nav-tabs-simple>li>a {width:70px; padding:6px 0px; text-align:center}
  .dropdown-mobile{background-color:#fff !important}
  .fa-caret-mobile{display:none}
  .dropdown-mobile a{color:#444 !important}
  .px-navbar .dropdown-mobile.open li{border-color:#eee !important}
  .px-navbar .dropdown.open li{border-color:#eee !important}
  .px-navbar{box-shadow:0 1px 0 0 #eee !important}
  .page-profile-v2-header.page-header { padding-top:0px !important }
  .page-profile-v2-avatar { margin-top: -60px; }
  .modal:before{height: 5%}
  .card-inner {position: relative; margin: 15px 0; left: 0; top: 0; width: auto; height: auto; opacity: 1; visibility: visible }
  .center-screen > div{width:95%}
}

/* ----------- iPhone 6, 6S, 7 and 8 Portrait  ----------- */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait) { 
  .wrap-regis{width: 100%;}
  .vertical-divider{display:none}
  .page-signin {width: 100%; }
  /*.wrap-login100 {padding-top: 35px !important; padding-bottom:35px !important}
  .login100-form-title {font-size: 23px !important;padding-bottom:35px !important}*/
  .fc-toolbar.fc-header-toolbar{width:250px !important}
  .flex-col-sign-up { padding-top: 20px !important;}
  .flex-c-m { padding:15px 0px !important } 
  /*.btn-xl .btn-label-icon.left {margin-right:0px}*/
  .col-md-6 { width: 100%;}
  .col-box-2 { width: 50%;}
  .dw-xs-8{ width: 89% !important;}
  .col-md-6, .col-box-2, .row-divided > [class^="col-"], .row-divided > [class*=" col-"] {padding: 0px 5px !important; }
  /*.fc-toolbar.fc-header-toolbar{width:200px!important;}*/
  .titleAxisY, .titleGraph {font-size: 1em}
  /*.text-ellipsis-leave{width: 248px}*/   
  .fc-day-number {font-size: 1.4em !important}
  .fc-today .fc-day-number{width:20px !important; height:20px !important; line-height:20px !important; margin-top:-2px}
  .fc-month-view .fc-row .fc-day i { font-size: 8px!important;} 
  #leaveQuotaPagination-pagination{padding-right: 0px !important}
  .nav-tabs-simple>li {width:80px}
  .nav-tabs-simple>li>a {width:80px; padding:6px 10px; text-align:center}
  .dropdown-mobile{background-color:#fff !important}
  .fa-caret-mobile{display:none}
  .dropdown-mobile a{color:#444 !important}
  .px-navbar .dropdown-mobile.open li{border-color:#eee !important}
  .px-navbar .dropdown.open li{border-color:#eee !important}
  .px-navbar{box-shadow:0 1px 0 0 #eee !important}
  .center-screen > div{width:95%}
}

/* -----------  iPhone 6+, 7+ and 8+ Portrait  ----------- */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) { 
  .wrap-regis{width: 100%;}
  .vertical-divider{display:none !important}
  /*.wrap-login100 {padding-top: 40px !important; padding-bottom:40px !important}*/
  .flex-col-sign-up { padding-top: 20px!important}
  /*.login100-form-title {padding-bottom:30px !important}*/
  .col-md-6, .page-signin { width: 100% !important}  
  .col-box-2 { width: 50% !important} 
  .page-profile-v2-header.page-header { padding-top:0px !important }
  .page-profile-v2-avatar { margin-top: -60px; }
  .fc-month-view .fc-row .fc-day i { font-size: 8px!important;} 
  .fc-today .fc-day-number{width:21px !important; height:21px !important; line-height:21px !important;}
  #leaveQuotaPagination-pagination{padding-right: 0px !important}
  .nav-tabs-simple>li {width:60px}
  .nav-tabs-simple>li>a {width:80px; padding:6px 10px; text-align:center} 
  .dropdown-mobile{background-color:#fff !important}
  .fa-caret-mobile{display:none}
  .dropdown-mobile a{color:#444 !important}
  .px-navbar .dropdown-mobile.open li{border-color:#eee !important}
  .px-navbar .dropdown.open li{border-color:#eee !important}
  .px-navbar{box-shadow:0 1px 0 0 #eee !important}
  .page-profile-v2-header.page-header { padding-top:0px !important }
  .page-profile-v2-avatar { margin-top: -60px; }
  .modal:before{height: 5%}
  .center-screen > div{width:95%}
}

/* -----------  iPhone XR Portrait  ----------- */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait) {
  .wrap-regis{width: 100%;}
  .vertical-divider{display:none !important}
  /*.wrap-login100 {padding-top: 40px !important; padding-bottom:40px !important}
  .login100-form-title {font-size: 35px !important;padding-bottom:40px !important}*/
  .flex-col-sign-up { padding-top: 30px!important}
  .col-box-2 { width: 50%; }
  .col-md-6, .page-signin{width: 100%} 
  .fc-today .fc-day-number{width:21px !important; height:21px !important; line-height:21px !important;margin-top:-2px}
  .fc-month-view .fc-row .fc-day i { font-size: 8px!important;} 
  #leaveQuotaPagination-pagination{padding-right: 0px !important}
  .nav-tabs-simple>li {width:60px}
  .nav-tabs-simple>li>a {width:80px; padding:6px 10px; text-align:center}
  .dropdown-mobile{background-color:#fff !important}
  .fa-caret-mobile{display:none}
  .dropdown-mobile a{color:#444 !important}
  .px-navbar .dropdown-mobile.open li{border-color:#eee !important}
  .px-navbar .dropdown.open li{border-color:#eee !important}
  .px-navbar{box-shadow:0 1px 0 0 #eee !important}
  .center-screen > div{width:95%}
}

/* -----------  iPhone X, iPhone XS Portrait  ----------- */
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) { 
  .wrap-regis{width: 100%;}
  .vertical-divider{display:none}
  .page-signin {width: 100%; }
  /*.wrap-login100 {padding-top: 35px !important; padding-bottom:35px !important}*/
  .flex-col-sign-up { padding-top: 20px!important}
  /*.btn-xl .btn-label-icon.left {margin-right:0px}*/
  .col-md-6 { width: 100%;}
  .col-box-2 { width: 50%;}
  .dw-xs-8{ width: 89% !important;}
  .col-md-6, .col-box-2, .row-divided > [class^="col-"], .row-divided > [class*=" col-"] {padding: 0px 5px !important; }
  .titleAxisY, .titleGraph {font-size: 1em}
  /*.text-ellipsis-leave{width: 248px}*/   
  .fc-day-number {font-size: 1.4em !important}
  .fc-today .fc-day-number{width:21px !important; height:21px !important; line-height:21px !important;margin-top:-2px}
  .fc-month-view .fc-row .fc-day i { font-size: 8px!important;} 
  #leaveQuotaPagination-pagination{padding-right: 0px !important}
  .nav-tabs-simple>li {width:60px}
  .nav-tabs-simple>li>a {width:80px; padding:6px 10px; text-align:center}
  .dropdown-mobile{background-color:#fff !important}
  .fa-caret-mobile{display:none}
  .dropdown-mobile a{color:#444 !important}
  .px-navbar .dropdown-mobile.open li{border-color:#eee !important}
  .px-navbar .dropdown.open li{border-color:#eee !important}
  .px-navbar{box-shadow:0 1px 0 0 #eee !important}
  .page-profile-v2-header.page-header { padding-top:0px !important }
  .page-profile-v2-avatar { margin-top: -60px; }
  .modal:before{height: 5%}
  .center-screen > div{width:95%}
}



/* -----------  iPhone XS Max Portrait  ----------- */
@media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {
  /* STYLES GO HERE */
  .wrap-regis{width: 100%;}
  .vertical-divider{display:none !important}
  /*.wrap-login100 {padding-top: 60px !important; padding-bottom:50px !important}
  .login100-form-title {padding-bottom:30px !important}*/
  .flex-col-sign-up { padding-top: 30px!important}
  .col-box-2 { width: 50%; }
  .col-md-6, .page-signin{width: 100%}
  .fc-month-view .fc-row .fc-day i { font-size: 8px!important;} 
  #leaveQuotaPagination-pagination{padding-right: 0px !important}
  .nav-tabs-simple>li {width:60px}
  .nav-tabs-simple>li>a {width:70px; padding:6px 10px; text-align:center}
  .dropdown-mobile{background-color:#fff !important}
  .fa-caret-mobile{display:none}
  .dropdown-mobile a{color:#444 !important}
  .px-navbar .dropdown-mobile.open li{border-color:#eee !important}
  .px-navbar .dropdown.open li{border-color:#eee !important}
  .px-navbar{box-shadow:0 1px 0 0 #eee !important}
  .center-screen > div{width:95%}
}

/* -----------  iPad Portrait  ----------- */
@media only screen and (device-width : 768px) and (device-height : 1024px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait) {
  .col-box-2 { width: 33%;}
  .fc-month-view .fc-row .fc-day i { font-size: 8px!important;}
  .fc-day-number {font-size: 1.4em !important}
  .fc-today .fc-day-number{width:21px !important; height:21px !important; line-height:21px !important;margin-top:-2px}
  .titleAxisY, .titleGraph {font-size: 1em}

}

/* -----------  iPad Pro Portrait  ----------- */
@media only screen and (device-width : 1024px) and (device-height : 1366px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait) {
  .col-box-2 { width: 33%;}
  .fc-month-view .fc-row .fc-day i { font-size: 8px!important;}
  .fc-day-number {font-size: 1.4em !important}
  .fc-today .fc-day-number{width:21px !important; height:21px !important; line-height:21px !important;margin-top:-2px}
  .titleAxisY, .titleGraph {font-size: 1em}
}

  /* #Media Queries
================================================== */
  /*@media (min-width: 1521px) and (max-width: 1920px) and (-webkit-device-pixel-ratio : 1) {
  .fc-day-number {font-size: 2em !important}
}*/
  @media (max-width: 1856px) {
    .modal-large { width: 43% }
    /*.col-md-8{ width: 74.66667% }*/
  }
  
  @media (min-width: 1400px) and (max-width: 1520px) {
    .fc-day-number { font-size: 1.6em !important; line-height: 2.9em !important } 
    .fc-today .fc-day-number { width: 28px !important; height: 28px !important; line-height: 28px !important }
    .modal-large { width: 46% }
  }

  @media (max-width: 1399px) and (min-width: 1367px) {
    .col-box-2 { width: 33.33%;}  
    .fold.open{ width: 32%;}  
    .fc-day-number { font-size: 1.6em !important; line-height: 2.9em !important }
    .fc-today .fc-day-number { width: 24px !important; height: 24px !important; line-height: 1.2 !important }        
  }       
  @media (max-width: 1366px) and (min-width: 1200px){
    .col-box-2 { width: 33.33%; }
    .container-height {height:85vh;}
    .fc-day-number { font-size: 1.6em !important; line-height: 2.9em !important  } 
    .fc-today .fc-day-number { width: 24px !important; height: 24px !important; line-height: 24px !important }
    #flex-container > .flex-item{width: 37rem}
    
  } 
  @media (max-width: 1416px) and (min-width: 1200px){
    .modal-large { width: 54% }
  }
 
  @media (max-width: 1366px){
   
    .modal-xl { width: 83%; }
    .container-height {height:92vh;}   
  }

/* For 1366 Resolution */
@media (min-width: 1030px) and (max-width: 1366px) { 
  /* STYLES GO HERE */
   .modal-large { width: 45% }
} 
  
  /* Smaller than desktop 1200 (devices and browsers) */

  /*@media (min-width: 960px) and (max-width: 1199px) and (-webkit-device-pixel-ratio : 1) {
  .col-box-2 {width: 33%; }
  .fc-day-number {font-size: 1.5em !important}
  .fc-today .fc-day-number{width:25px !important; height:25px !important; line-height:25px !important}
}*/
  @media (min-width: 992px) and (max-width: 1199px) {
    /*.page-signin {padding: 80px 40px; }*/
    .vertical-divider { left: 49% } 
    .modal-large { width: 55% }
  }
  @media (min-width: 1147px) and (max-width: 1187px) {
    .modal-large { width: 57% }
  }
  @media (min-width: 1000px) and (max-width: 1073px) {
    .modal-large { width: 66% }
  }
  @media (min-width: 1072px) and (max-width: 1146px) {
    .modal-large { width: 62% }
  }
  @media (min-width: 991px) and (max-width: 1366px) {    
    /*.fold.folding,.fold.open{width:40%}*/
    .fold.open{width:40%}
  }
  @media (min-width: 991px) and (-webkit-device-pixel-ratio : 1) {
    .page-signin { width: 392px  }
    .page-signin-left { float: right }     
  }
  @media (min-width: 977px) and (max-width: 992px){
    .modal-large { width: 69% }     
  }

  @media (min-width: 768px) and (max-width: 977px) {
     .modal-large { width: 87% } 
  }
  @media (max-width: 767px){
    .col-md-8 {width: 75%}
    .col-md-offset-1{margin-left: 14.33333%}
    .modal-large { width: 75% }   
  }

  @media (max-width: 991px) and (-webkit-device-pixel-ratio : 1) {
    /*.page-signin {padding: 0px; width: 100%;}*/
    .titleAxisY { font-size: 0.8em } 
    .titleGraph { font-size: 1em }
    .info-box-text { font-size: 1.3em !important } 
    .fc-day-number { font-size: 1.6em !important }
    .fc-today .fc-day-number { width: 20px !important; height: 20px !important; line-height: 20px !important }
    
  }
  /*@media (min-width: 701px) and (max-width: 1366px) and (-webkit-device-pixel-ratio : 1) {  
  .col-box-2 {width: 33%; }
  .titleGraph {font-size: 1em}
  .info-box-text {font-size: 1.3em !important}
  .fc-day-number {font-size: 1.25em !important}
  .fc-today .fc-day-number{width:24px !important; height:24px !important; line-height:24px !important}
}*/
  @media (min-width: 768px) and (max-width: 1199px) { 
    .col-box-2 { width: 33.33%; }
    .col-lg-3 { width: 30.33%; }
    .titleGraph { font-size: 1em }
    .info-box-text { font-size: 1.3em !important }
    .fc-day-number { font-size: 1.4em !important; line-height: 3.2 !important;}
    .fc-today .fc-day-number { width: 22px !important; height: 22px !important; line-height: 22px !important; margin-top:-2px  }
    .modal:before{height: 22%}
    .container {
      width: 100% !important;
    }
    /*.fold.folding.dw-md-3, .fold.open.dw-md-3 { width: 53%; }*/
  }
  
  @media (min-width: 701px) and (max-width: 767px) {
    .col-box-2 { width: 33.33%; }
    .titleGraph { font-size: 1em } 
    .info-box-text { font-size: 1.3em !important }
    .fc-day-number { font-size: 1.75em !important } 
    .fc-today .fc-day-number { width: 28px !important; height: 28px !important; line-height: 28px !important }
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9{float:left}
    #tabTeamsDashboard .col-md-6{width:100%}
  }

  @media (min-width: 768px) and (max-width: 867px) and (-webkit-device-pixel-ratio : 1) {    
    .modal-lg{width: 789px !important}
        
  }
  @media (max-width: 767px) and (-webkit-device-pixel-ratio : 1) {
    .wrap-regis{width: 100%;}
    .vertical-divider { display: none !important }
    .page-profile-v2-header.page-header { padding-top:0px !important }
    .page-profile-v2-avatar { margin-top: -60px; }
    .modal:before{height: 22%}   
    .d-flex { display:inline-block}
    /*.modal-lg{width:740px !important}*/
  }
  @media (min-width: 401px) and (max-width: 700px)  {
    .col-box-2 { width: 50%; }
    .fc-today .fc-day-number { width: 24px !important; height: 24px !important; line-height: 24px !important;margin-top:-2px }
    .modal-lg{width: 85% !important}
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9{float:left}
    #tabTeamsDashboard .col-md-6{width:100%} 
    .d-flex { display:inline-block}
  }
  
  /*@media (min-width: 675px) and (max-width: 767px) and (-webkit-device-pixel-ratio : 1) {
    .card-started, .card-inner{width: 112% !important}
  }
  @media (min-width: 620px) and (max-width: 648px) and (-webkit-device-pixel-ratio : 1) {
    .card-started, .card-inner{width: 100% !important}
  }
  @media (min-width: 551px) and (max-width: 619px) and (-webkit-device-pixel-ratio : 1) {
    .card-started, .card-inner{width: 98% !important}
  }
  @media (min-width: 510px) and (max-width: 550px) and (-webkit-device-pixel-ratio : 1) {
    .card-started, .card-inner{width: 83% !important}
  }
  @media (min-width: 477px) and (max-width: 509px) and (-webkit-device-pixel-ratio : 1) {
     .card-started, .card-inner{width: 75% !important}
  }
  @media (min-width: 456px) and (max-width: 476px) and (-webkit-device-pixel-ratio : 1) {
     .card-started, .card-inner{width: 70% !important}
  }
  @media (min-width: 401px) and (max-width: 455px) and (-webkit-device-pixel-ratio : 1) {
     .card-started, .card-inner{width: 66% !important}
  }*/
  @media (min-width: 350px) and (max-width: 400px) and (-webkit-device-pixel-ratio : 1) {
    .col-box-2 { width: 88% !important; }
    .titleAxisY, .titleGraph { font-size: 1em }
    .d-flex { display:inline-block}
  }

  @media (min-width: 320px) and (max-width: 349px) and (-webkit-device-pixel-ratio : 1) {
    .col-box-2 { width: 76% !important; }
    .d-flex { display:inline-block}
    /*.fc-toolbar.fc-header-toolbar{width:179px!important;}*/
  }
 /* @media (min-width: 544px){
    .modal-large {
      width: 35%  !important
    } 
  }*/
  @media (max-width: 540px) and (-webkit-device-pixel-ratio : 1) {
    .vertical-divider { display: none !important } 
    .titleAxisY { font-size: 0.8em }
    .titleGraph { font-size: 1em  }
    .info-box-text { font-size: 1.3em !important } 
    .fc-day-number { font-size: 1.25em !important } 
    .fc-today .fc-day-number { width: 22px !important; height: 22px !important; line-height: 22px !important }
    .p-a-2, .p-a-3 { padding: 10px !important; }
    .p-l-2 { padding-left: 10px !important; }
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9{float:left} 
    .checkbox-inline{margin-left:0px !important;}
    .checkbox label{padding-left:13px}
    #tabTeamsDashboard .col-md-6{width:100%}
    .d-flex { display:inline-block}
  }

  @media (max-width: 319px) and (-webkit-device-pixel-ratio : 1) {
    .col-box-2 { width: 69% !important; } 
    .col-md-6 { width: 295px; }  
    .d-flex { display:inline-block}
  } 
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .d-flex { display:inline-block}
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .d-flex { display:inline-block}
  }