/*일반적인 class*/
html
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: auto; 
}
body { 
    width: 100%;
    /*height: 100%;*/
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}


.btn-narrow{
  padding:5px 10px;
}

.panel-green .panel-body {
    background: #FFF;
    border: 1px solid #2FA78F;
    /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);*/
/*    padding: 33px 33px 15px;*/
}
.panel-green .panel-heading, .panel-green .panel-footer {
    background: #2FA78F;
	color:white;
	border-top:0;
}

.padding10{padding:10px;}
.float_right{float: right;}
.float_left{float: left;}
.text_center{text-align: center !important;}
.text_right{text-align: right !important;}
.inline_block{display:inline-block;}


.fs-40{font-size: 40px;}
.fs-30{font-size: 30px;}
.fs-24{font-size: 24px;}
.fs-21{font-size: 21px;}
.fs-18{font-size: 18px;}
.fs-16{font-size: 16px;}
.fs-14{font-size: 14px;}
.fs-13{font-size: 13px;}
.fs-12{font-size: 12px;}

.bold{font-weight: bold;}

.white{color: white;}
.black{color: black;}
.blue{color: #2485BC;cursor: pointer}
.dark-blue{color: #035bff;cursor: pointer}
.red{color: #a94442;}
.green{color: #3a923e !important;}
.orange{color: #F6921E;}
.yellow{color: #EBAD00;}
.grey{color: #989898}
.d_grey{color: #757575}
.brown{color: #990000}

.status-pill.d_grey{background-color: #757575 !important;}
.status-pill.orange{background-color: #F6921E !important;}
.status-pill.dark-blue{background-color: #035bff !important;}

.light-blue-bg { background-color: #B3D4FC !important;cursor: pointer}
.normal{font-weight: 400;}
.ver_top{vertical-align: top !important;}
.ver_middle{vertical-align: middle !important;}
.ver_bottom{vertical-align: bottom;}
.width_100,.break_word{width: 100%;}
.display_none,.hide{display: none !important;}
.pointer{cursor: pointer !important}
.pointer:hover{
  box-shadow: 0px 0px 3px 1px currentColor;
}
.cursor_df{cursor: default;}
.noover{overflow: visible;}
.crossed-out{text-decoration: line-through}

.absolute{position:absolute;}
.relative{position:relative;}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td{
  padding:12px;
}

.hide-initial{display:none}

.alert-danger {
    font-size: 14px;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    border-radius: 4px;
}

.navbar-brand{
  height: 43px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: #5b3f00;
    background-color: #ebad00;
    /*border: 1px solid #d5d5d5;
    border-bottom-color: transparent;*/
    cursor: default;
}

.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.2;
    border: 1px solid #bfbfbf;
    border-radius: 0 0 0 0;
}
/* .ng-isolate-scope:not(.chart){
  z-index:105000000 !important;
} */
.ui-notification{
  z-index:105000001 !important;
}
.show-xs{display: none}
.hide-xs{display: block}
@media (min-width: 767px) {
  .view-xs{display: none !important} 
}

.text-center-xs {
    text-align: center;
}
.home-section1 img{
  height:45px;
  margin-right:25px;
}
/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
  #hero-area {
    padding:80px 0;
  }
  .text-center-sm {
      text-align: center;
  }
  .home-section1 h2{
    font-size:18px
  }
  .home-section1 img{
    height:35px;
    margin-right:10px;
  }
  #top-bar {box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3)!important;}
  .last-arrow{margin-bottom:-80px!important;}
  .show-xs{display: block}
  .hide-xs{display: none !important}
}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
    .text-center-md {
        text-align: center;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
    .text-center-lg {
        text-align: center;
    }
}


.example.example5 * {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
}

.example.example5 form {
}

#example5-paymentRequest {
  max-width: 500px;
  width: 100%;
  margin-bottom: 10px;
}

.example.example5 fieldset {
  border: 1px solid #cbcbcb;
  padding: 15px;
  border-radius: 6px;
}

/* .example.example5 fieldset legend {
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #cdd0f8;
  background-color: #9169d8;
} */

.example.example5 fieldset legend + * {
  clear: both;
}

.example.example5 .card-only {
  display: block;
}
.example.example5 .payment-request-available {
  display: none;
}

.example.example5 .row {
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 10px;
}

.example.example5 .field {
  position: relative;
  width: 100%;
}

.example.example5 .field + .field {
  margin-left: 10px;
}

.example.example5 label {
  width: 100%;
  color: #7f7f7f;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.example.example5 .input {
  width: 100%;
  color: #000;
  background: transparent;
  padding: 5px 0 6px 0;
  border-bottom: 1px solid #b0b0b0;
  transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.example.example5 .input::-webkit-input-placeholder {
  color: #afafaf;
}

.example.example5 .input::-moz-placeholder {
  color: #afafaf;
}

.example.example5 .input:-ms-input-placeholder {
  color: #afafaf;
}

.example.example5 .input.StripeElement--focus,
.example.example5 .input:focus {
  border-color: #37903a;
}
.example.example5 .input.StripeElement--invalid {
  border-color: #db2517;
}

.example.example5 input:-webkit-autofill,
.example.example5 select:-webkit-autofill {
  -webkit-text-fill-color: #ff9800;
  transition: background-color 100000000s;
  -webkit-animation: 1ms void-animation-out;
}

.example.example5 .StripeElement--webkit-autofill {
  background: transparent !important;
}

.example.example5 input,
.example.example5 button,
.example.example5 select {
  -webkit-animation: 1ms void-animation-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border-style: none;
  border-radius: 0;
}

.example.example5 select.input,
.example.example5 select:-webkit-autofill {
  background-image: url('data:image/svg+xml;utf8,<svg width="10px" height="5px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#fff" d="M5.35355339,4.64644661 L9.14644661,0.853553391 L9.14644661,0.853553391 C9.34170876,0.658291245 9.34170876,0.341708755 9.14644661,0.146446609 C9.05267842,0.0526784202 8.92550146,-2.43597394e-17 8.79289322,0 L1.20710678,0 L1.20710678,0 C0.930964406,5.07265313e-17 0.707106781,0.223857625 0.707106781,0.5 C0.707106781,0.632608245 0.759785201,0.759785201 0.853553391,0.853553391 L4.64644661,4.64644661 L4.64644661,4.64644661 C4.84170876,4.84170876 5.15829124,4.84170876 5.35355339,4.64644661 Z" id="shape"></path></svg>');
  background-position: 100%;
  background-size: 10px 5px;
  background-repeat: no-repeat;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
}

/* .example.example5 button {
  display: block;
  width: 100%;
  height: 40px;
  margin: 20px 0 0;
  background-color: rgb(84, 170, 67);
  border-radius: 6px;
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
} */

.example.example5 button:active {
  background-color: rgb(74, 154, 58);
}

.example.example5 .error svg .base {
  fill: #fff;
}

.example.example5 .error svg .glyph {
  fill: #df5757;
}

.example.example5 .error .message {
  color: rgb(236, 58, 58);
}

.example.example5 .success .icon .border {
  stroke: #d3d3d3;
}

.example.example5 .success .icon .checkmark {
  stroke: #fff;
}

.example.example5 .success .title {
  color: #fff;
}

.icon-medium {
  width: 20px;
  height: 20px;
}

/* .example.example5 .success .message {
  color: #cdd0f8;
} */

.example.example5 .success .reset path {
  fill: #fff;
}

.flag-icon{ padding: 3px 15px}
.dropdown-menu {min-width: 0;}
/* .dropdown-menu a {text-align: center} */
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{background:#0000000d}
.language-selector{list-style:none}
.language-selector-xs{float:right;margin-right:10px;margin-top:14px;}
.legal-notice{font-size: 13px;}
.hide{display:none}
.show{display:block!important}

.update-card-list{margin-top:5px;margin-bottom:5px}

.pulse {
  /* margin:100px; */
  display: block;
  /* width: 22px;
  height: 22px; */
  /* border-radius: 50%; */
  /* background: #cca92c; */
  cursor: pointer;
  box-shadow: 0 0 0 rgba(147,75,250, 0.8);
  /* box-shadow: 0 0 0 rgba(204,169,44, 0.8); */
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(147,75,250, 0.8);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(147,75,250, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(147,75,250, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(147,75,250, 0.8);
    box-shadow: 0 0 0 0 rgba(147,75,250, 0.8);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(147,75,250, 0);
      box-shadow: 0 0 0 10px rgba(147,75,250, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(147,75,250, 0);
      box-shadow: 0 0 0 0 rgba(147,75,250, 0);
  }
}

.cta-w.purple{
  background-image: url(../img/cta-pattern-light.png), -webkit-gradient(linear, left top, left bottom, from(#2abdbc), to(#934BFA));
  background-image: url(../img/cta-pattern-light.png), linear-gradient(120deg, #2abdbc 0%, #934bfa 100%);
}

.menu-mobile.color-scheme-dark .mobile-menu-magic {
  background-image: url(../img/cta-pattern-light.png), linear-gradient(231deg, #2abdbc 0%, #934bfa 100%);
  padding: 30px;
}
.btn-warning {
  color: #292b2c;
  background-color: #ffcb0c;
  border-color: #ffcb0c;
}

.btn-warning:hover {
  background-color: #e9b701;
  border-color: #e9b701;
}
.btn-primary, .all-wrapper .fc-button.fc-state-active{
  color: white !important;
  background-color: var(--cyrus-green);
  border-color: var(--cyrus-green);
}

.fade.ng-hide {
  transition:0.5s linear all;
  opacity:0;
}

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

/* now the element will fade out before it is removed from the DOM */
.fade.ng-leave {
  transition:0.5s linear all;
  opacity:1;
}
.fade.ng-leave.ng-leave-active {
  opacity:0;
}


.pulse-itself {
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  animation: pulse-itself 2s infinite;
  margin-left: 70px;
}

@-webkit-keyframes pulse-itself {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(147,75,250, 1);
  }
  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(147,75,250, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(147,75,250, 0);
  }
}
@keyframes pulse-itself {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(147,75,250, 1);
    box-shadow: 0 0 0 0 rgba(147,75,250, 1);
  }
  70% {
      -moz-box-shadow: 0 0 0 20px rgba(147,75,250, 0);
      box-shadow: 0 0 0 20px rgba(147,75,250, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(147,75,250, 0);
      box-shadow: 0 0 0 0 rgba(147,75,250, 0);
  }
}
.form-control{
  background-color: white;
}

.md-datepicker-calendar-pane{
  z-index:10000000000 !important;
}

.ng-isolate-scope{
  height: 100%
}

/* datepicker 가 invalid 되는것을 강제로 되게함 */
.start-date .md-datepicker-invalid{
  border-bottom-color: rgba(0,0,0,0.12) !important;  
}

.md-dialog-container {
  z-index: 1000000000 !important;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.nav-link{
  cursor: pointer;
}

.support-ticket {
  outline-width: 0;
}

.type-tag{
  padding: 3px 6px;
    line-height: 1;
    display: inline-block;
    background-color: #fff;
    border: 1px solid #047bf8;
    color: #047bf8 !important;
    margin-right: 2px;
    font-size: 0.72rem;
    border-radius: 4px;
    margin-top: 2px;
}

.last-paid-icon {
  margin-right: 5px;
    font-size: 16px;
    vertical-align: middle;
    color: #047bf8;
    display: inline-block;
}
.last-paid-text {
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.63rem;
  letter-spacing: 1px;
}

.md-scroll-mask {
  background-color: #00000030;
  z-index: 500000000;
}

.transparent-btn-run-payroll {
  font-size: 15px;
  color: #047bf8;
  cursor: pointer;
  padding-top: 8px;
  outline-width: 0;
}

.transparent-btn-run-payroll:hover {
  color: #0d66c5;
}

.transparent-btn-run-payroll i {
  font-size: 14px;
}

.salary-box-top {
  padding: 0.8rem 1rem 0.8rem 1rem;
}

.salary-box-bottom {
  padding: 1rem 2rem;
  border-top: 1px solid #dedede;
  background: #f5f5f5;
  border-radius : 0 0 5px 5px
}

.small-label{
  font-size:12px;
  font-weight: bold;
  
  /* text-align: right; */
}

.small-label span:not(.grey){color:#047bf8; cursor: pointer;}
.small-label .grey{color:#84909c}

.payroll-input-container{
  margin-bottom:10px;
}

.input-no-line{
  border-bottom: 1px dashed rgb(17, 127, 216);
  display: inline-block;
  /* padding-top: 3px; */
  padding-bottom: 3px;
}

.input-no-line.input-disabled{
  border-bottom: 1px dashed #999;
}

.input-no-line.input-error{
  border-bottom: 2px dashed #ff5821;
}

.input-no-line input{
  border-width: 0;
  outline-width: 0;
}

.tr-total td{
  border-top: 1px solid #2196F3 !important;
}

.btn-medium { padding: 0.75rem 1rem; }
.btn-medium span {vertical-align: middle;}
.btn-medium i {
  font-size: 20px;
  margin-right: 5px;
  vertical-align: middle;
}

.table.table-padded tbody tr {
  cursor: default
}

.btn-icon-sm { 
  padding: 0.15rem 0.05rem; 
  font-size:16px;
}
.auto-complete-container{
  z-index: 1000000000 !important;
}

.daterangepicker{
  z-index: 1000000000 !important;
}

.el-tablo .value{
  font-size: 20px;
  margin-top: 4px;
}


@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: spinner-grow .75s linear infinite;
  animation: spinner-grow .75s linear infinite;
}

.spinner-grow-md {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

.spinner-grow-sm {
  width: 1rem !important;
  height: 1rem !important;
}

.support-ticket, .animatedUp{
  -webkit-animation-name: fadeUp;
  animation-name: fadeUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.svg-icon{
  height:60px;
  margin:20px;
  display: block;
}

.svg-main-icon{
  height:80px;
  margin:30px;
}

.menu-w ul.main-menu > li .icon-w {
  /* color: #7340b5; */
  /* color: #00afad; */
  /* color: #1bad96; */
  color: #09B585;
  /* color: #F16E22; */
  padding: 0.8rem 0.7rem 0.8rem 0rem;
}

.menu-w ul.main-menu > li span {
  padding: 0.8rem;
}

.menu-w ul.main-menu > li {
  border-bottom-width: 0;
}

/* .element-wrapper .element-header:after{
  background-color: #09B585;
} */
.nav-tabs .nav-link:after, .nav-tabs .nav-item .nav-link:after{
  background-color: #09B585;
}

.nav-tabs .nav-link.is-invalid::after{
    width: 100%;
    background-color: rgb(181, 9, 38);
}
.top-bar .top-icon, .text-success {
  color: #09B585 !important;
}
.users-list-w .user-w .user-action {
  color: #09B585;
}

.content-panel .content-panel-close{
  color: #09B585;
}

.btn-danger {
  background: #FF5722;
  border-color: #FF5722;
  color: white !important;
}

.btn-danger:hover {
  background: #f3521f;
  border-color: #f3521f;
}
.badge-danger {
  background-color: #FF5722;
}
.os-dropdown {
  background-color: #7340b5;
  z-index: 100000;
}
/* primary : #00afad;
secondary color: #F16E22
third color: #7340b5; */

.daterangepicker { min-width: initial !important;}
.status-pill.red { background-color: #FF5722; }

._720kb-datepicker-calendar{
  margin-top: -50px !important;
}


.initial-font {
  font-family: "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}

.alert-green {
  background-color: #e1f9de;
  border-color: #aadaa3;
  color:#4e4e4e;
}
/* .os-tabs-controls.os-tabs-complex .nav-item .nav-link.active .tab-label {
  font-size: 1.15rem;
  line-height: 1.35;
} */

.employee-modal .os-tabs-controls.os-tabs-complex .nav-item .nav-link {
  padding: 8px 15px;
}

.onboarding-modal .onboarding-slide .onboarding-side-by-side .onboarding-content.with-gradient {
  padding-bottom: 30px;
}

.all-wrapper.with-pattern {
  background-image: url(../img/bg-pattern2.png);
}

.loading-page{
  text-align: center;
  padding: 100px;
}
.loading-page h3 {
  color:white;
  margin-bottom:30px
}

.spinner-grow {
  color: white;
  width: 5rem;
  height: 5rem;
}

.ng-confirm {
  z-index: 1000000000;
}

.table-responsive {
  overflow-x: initial !important;
}

.menu-mobile.color-scheme-dark ul.main-menu .icon-w {
  color: white;
  
}

.table-responsive {
  overflow-x: auto !important;
  overflow-y: auto !important;
  padding-bottom: 70px;
}
.table.table-padded tbody tr:hover{
  -webkit-box-shadow: 0px 2px 5px rgba(69, 101, 173, 0.1);
  box-shadow: 0px 2px 5px rgba(69, 101, 173, 0.1);
  background: #fffefe85;
}

.table.table-padded tbody td .action{
  background-color: transparent;
}

.table.table-padded tbody tr:hover .action{
  background-color: rgba(214, 213, 213, 0.418);
}

.table.table-padded tbody tr .action:hover{
  background-color: rgba(214, 213, 213, 0.87);
}

.boxH
{
  background:#ffffff59;
  z-index:1000;
  /* background-color: rgba(0, 127, 255, 0.2); */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* content of this box will be centered vertically */
.boxV
{
  /* background-color: rgba(255, 0, 0, 0.2); */
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* content of this box will be centered horizontally and vertically */
 .boxM
{
  background-color: #ffe595;
  font-weight: bold;
  
  padding: 3em;
}

.ui-notification>h3{
  color:white;
}

.plyr__control--overlaid {
  background: rgb(33, 189, 188) !important;
}

.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{
  background:rgb(33, 189, 188) !important;
}

.plyr--video .plyr__control.plyr__tab-focus,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{
  background:rgb(33, 189, 188) !important;
}

.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{
  background:rgb(33, 189, 188) !important;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before{
  background:rgb(33, 189, 188) !important;
}

.plyr--full-ui input[type=range]{
  color:rgb(33, 189, 188) !important;
}

.element-box {
  overflow-x: overlay;
}
.element-box.scroll{
  max-height: calc(100vh - 250px);
  /* padding:0; */
}

.status-pill.blue{
  background:#2485BC;
}
.modal-datepicker{
  max-width: 352px;
}
@media (min-width: 992px) {
  .modal-lg{
    max-width: 800px;
  }
  .modal-xl, .modal-xxl {
    max-width: 880px;
  }
}

@media (min-width: 1200px) {
  .modal-xxl {
    max-width: 1140px;
  }
}

@media (min-width: 500px) {
  .modal-m {
    max-width: 500px;
  }
}

.dropdown-toggle::after {
  content: "" !important;
  border: 0;

}

.form-control:disabled, .form-control[readonly] {
  background-color: #f5f5f6;
}
.dropdown-item {
  color: #047bf8 !important;
  cursor: pointer;
}

.inline-profile-tiles .profile-tile .profile-tile-box{
  min-height: 185px
}

.pt-user-name>p{
  color: grey;
  margin-top: 10px;
  line-height: 1.2;
}

.path {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 80px;
  background-color: #c1c1c1;
  margin: auto;
}
.back-forth {
  /* left: 0;
  background-color: red;
  width: 80px;
  height: 80px;
  display: block;
	top: 0; */
  
  x-transition: all 1s ease-in-out;
  animation: ani 1.7s infinite;
}


@keyframes ani {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 10px;
  }
  100% {
    margin-left: 0;
  }
}

.form-control:focus {border-color: #61A534;}
  
.signup-input {
  border-width: 0;
  border-left: 5px solid #09b585;
  padding-top: 15px;
  padding-bottom: 15px;
}
.signup-container {
  max-width: 450px;
  margin: 0px auto;
  height: 85vh;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 20px;
}
.signup-form {
  width:100%;
  position:relative;
  z-index:1;
}
.signup-question-container{
  border-left: 5px solid #09b585;
  display: block;
  width: 100%;
  box-shadow: rgba(179, 179, 179, 0.15) 0px 3px 12px 0px, rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;
  color: rgb(56, 41, 70);
  font-weight: 500;
  text-align: left;
  margin: 1rem 0px;
  background: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 1rem 2rem;
  outline: none;
  -webkit-transition : border 300ms ease-out;
  -moz-transition : border 300ms ease-out;
  -o-transition : border 300ms ease-out;
  transition : border 300ms ease-out;
}
.signup-question-container:hover{
  border-left: 5px solid #61A534;
}
.signup-goback-container {
  position: absolute;
  top: 30px;
  color: white;
  left: 30px;
}
.signup-login-container {
  position: absolute;
  top: 30px;
  color: white;
  right: 30px;
}
.signup-goback-container i {
  font-size:25px;
  cursor: pointer;
}
.width-100 {
  width: 100%;
}
.with-side-panel .content-i {
  overflow-y: scroll;
  height: calc(100vh - 64px);
  /* padding-right: 17px; */
  /* box-sizing: content-box; */
  overflow: hidden;
}
.content-panel.compact{
  overflow-y: auto;
  height: calc(100vh - 64px);
}

.hoverUp:hover{
  -webkit-box-shadow: 0px 2px 5px rgba(69, 101, 173, 0.1);
  box-shadow: 0px 2px 5px rgba(69, 101, 173, 0.1);
  -webkit-transform: translateY(-1px) scale(1.01);
  transform: translateY(-1px) scale(1.01);
}

/* .content-panel{
  z-index:1000;
} */

.js-fancybox,.media{
  opacity: 0.8
}

.content-box {
  overflow-y: auto;
}

.auth-wrapper .all-wrapper{
  padding: 5%;
  padding-bottom: 120px;
}


.drop-box {
  background: #F8F8F8;
  border: 5px dashed #DDD;
  text-align: center;
  padding: 45px 30px;
  font-size: 18px;
  margin: auto;
}

.dragover {
  border: 5px dashed #7dc3ff;
  background:rgb(230, 245, 255);
}

.table-error td{
  background: #ffe5e5
}

.tooltip1 {
  position: relative;
  /* color: #00b4ab; */
}

.tooltip1 .tooltip-text {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  visibility: hidden;
  width:100px;
  max-width: 300px;
  background-color: #00b4ab;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: .3s;
  transform: translate3d(0px, 20px, 0px);
}

.tooltip1 .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #00b4ab transparent transparent transparent;
}

.tooltip1:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

/* Dropdown */
.dropdown {
  display: inline-block;
  position: relative;
}

.dd-button {
  display: inline-block;
  /* border: 1px solid #d3d3d3; */
  border-radius: 4px;
  padding: 0px 18px 0px 0px;
  background-color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
}

.dd-button:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

.dd-button:hover {
  /* background-color: #eeeeee; */
}


.dd-input {
  display: none;
}

.dd-menu {
  position: absolute;
  top: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  margin: 0 0 0 0;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
  background-color: #ffffff;
  list-style-type: none;
}

.dd-input + .dd-menu {
  display: none;
} 

.dd-input:hover + .dd-menu,dd-menu:hover  {
/* .dd-input:checked + .dd-menu { */
  display: block;
  z-index: 1;
} 

.dd-menu li {
  padding: 5px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.dd-menu li:hover {
  background-color: #f6f6f6;
}

.dd-menu li a {
  display: block;
  margin: -10px -20px;
  padding: 10px 20px;
}

.dd-menu li.divider{
  padding: 0;
  border-bottom: 1px solid #cccccc;
}

.border-line-top {
  border-top: 1px solid #dedede;
  padding-top:10px;
  margin-top:10px;
  /* margin-bottom:5px */
}

.zxcvbn-progress {
  margin-bottom:10px;
  opacity: 0.6;
}

.modal-open {
  height:100%
}
.modal-dialog {
  display: grid;
  align-items: center;
}

.modal-md {
  height: 100%;
}

.modal-dialog.modal-full{
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin:0
}

.modal-full .modal-content{
  border:0;
  height: 100%;
  max-height: 100%;
  background-color: #2bbdbc;
  border-radius: 0px
}

.animated-search{
  position: relative;
  /* top: 45%; */
  /* left: 50%; */
  /* transform: translate(-50%,-50%); */
  margin: 0 auto;
  transition: all 1s;
  width: 50px;
  height: 50px;
  background: white;
  box-sizing: border-box;
  border-radius: 25px;
  border: 4px solid white;
  padding: 5px;
}

.search-input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;;
  height: 42.5px;
  line-height: 30px;
  outline: 0;
  border: 0;
  display: none;
  font-size: 1em;
  border-radius: 20px;
  padding: 0 20px;
}

.search-icon{
  box-sizing: border-box;
  padding: 5px 10px 10px;
  width: 42.5px;
  height: 42.5px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  color: #FF5722;
  text-align: center;
  font-size: 22px;
  transition: all 1s;
}

.search-icon-i{
  position: absolute;
  right:10px;
  top:10px;
}

.custom_swal:focus {
  box-shadow:unset !important
}

.animated-search:hover, .animated-search.search-active{
  width: 200px;
  cursor: pointer
}

.animated-search:hover .search-input, .animated-search.search-active .search-input{
  display: block;
}

.animated-search:hover .search-icon, .animated-search.search-active .search-icon{
  background: #FF5722;
  color: white;
}

.is-invalid-signup {
  background: #ffd8d8;
}

.get-started-container {
  width: 500px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-left: 235px;
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	border-radius: 10px;
	background-color: #F5F5F5;
}

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

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #ddd;
}

/* 
.content-box::-webkit-scrollbar {
  width: 10px;  /* Remove scrollbar space */
  /* background: transparent;   */
/* } */
/* Optional: show position indicator in red */
/* ::-webkit-scrollbar-thumb {
  background: #FF0000;
} */
.content-panel-toggler {
  display: none;
}
@media (min-width: 768px) and (max-width: 1400px) {
  .content-panel-toggler {
    display: block ; /*!important*/
  }
}

@media (min-width: 1400px) {
  .text-panel-show-right {
    text-align: right;
  }
}

.table-review tbody + tbody{
  border-top-width: 0 !important;
}

.popover-contents{
  background: white;
  padding: 5px 8px;
  box-shadow: 1px 1px 4px #cfcfcf;;
  cursor: pointer;
}

.auto-complete-results{
  max-height: 320px;
}

a.el-tablo:hover .label-hover {
  color: #3395fc;
}

.toggle-main{
  height:auto;
  max-height:1000px;
  -webkit-transition: max-height .5s ease-in, height .5s ease-in;
  transition: max-height .5s ease-in, height .5s ease-in;;
}

.toggled {
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0;
  height:0;
  border-width: 0 1px;
}
.text-primary-hover{
  color: rgb(62, 75, 91)!important;
}
.text-primary-hover:hover {
  color: #09B585!important;
  cursor: pointer;
}

.text-black {
  color: #000!important; 
}

.table.table-padded tbody td .status-pill + span {
  font-size: 12px;
}
  /* height: 0; */
  /* overflow: hidden; */
  /* width: 200px;
  background: red;
  margin-top: 10px; */
/* } */

.badge-hover{
  color: #676767;
}

.badge-hover:hover{
  color: #3395fc;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hide-sibling + .main-sibling{
  display: none;
}

.table-border-white thead th {
  border-bottom-color: white !important;
}
.table-border-white td {
  border-top-color: white !important;
}

#tidio-chat-iframe { 
  bottom: -26px !important; 
}

.modal-newemployeestep3 .ng-day input, .modal-newemployeestep3 .ng-month input {
  display: none;
}

.modal-newemployeestep3 .v-date-picker-header {
  display: none !important;
}

.modal-newemployeestep3 .v-picker__body {
  padding-top: 10px;
}


.v-label {
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  border-radius: 3px;
}

.v-messages__message {
  color: white;
}

.dark-bg .table.table-padded thead tr th {
  color: white;
}

.ly-list-run-payroll .table.table-padded thead tr th {
  color: white;
}

button.v-icon--link.mdi-wrench {
  background-color: white;
}

.bg-cyrus-green {
  background-color: var(--cyrus-green);
  color: white;
}

.el-tab-pane h1,h2,h3,h4,h5,h6 {
  color: grey;
}