@font-face {
   font-family: futura-mt-bold;
   src: url("../fonts/Futura Md BT Bold.ttf");
   font-weight: bold;
   font-style: normal;
}

.card-box {
   background-color: #fff;
   padding: 1.5rem;
   -webkit-box-shadow: 0 0.75rem 6rem rgba(56, 65, 74, .03);
   box-shadow: 0 0 0 1px rgba(63, 63, 68, .05), 0 1px 3px 0 rgba(63, 63, 68, .15);
   margin-bottom: 24px;
   border-radius: .25rem;
}

.avatar-lg {
   height: auto;
   width: 40%;
}

.nav-pills .nav-link {
   border-radius: 0px;
background-color: #fff !important;color: #000 !important;border: 1px solid;}

.navtab-bg li>a {
   background-color: #f7f7f7;
   margin: 0 5px;
}

.btn-pink {
   color: #fff;
   background-color: #ef638f;
   border-color: #ef638f;
}

.panel-pink>.panel-heading {
   background: #ef638f;
   color: #fff;
   font-weight: 900;
}


/* business profile css */

.inbox-widget .inbox-item {
   border-bottom: 1px solid #fff;
   overflow: hidden;
   padding: .625rem 0;
   position: relative;
}

.inbox-widget .inbox-item .inbox-item-img {
   display: block;
   float: left;
   margin-right: 15px;
   width: 40px;
}

.inbox-widget .inbox-item .inbox-item-img img {
   width: 40px;
}

.inbox-widget .inbox-item .inbox-item-author {
   color: #323a46;
   display: block;
   margin-bottom: 3px;
}

.inbox-widget .inbox-item .inbox-item-text {
   color: #98a6ad;
   display: block;
   font-size: .8125rem;
   margin: 0;
   overflow: hidden;
}

.inbox-widget .inbox-item .inbox-item-date {
   color: #98a6ad;
   font-size: .6875rem;
   position: absolute;
   right: 5px;
   top: 10px;
}


/* timeline */

.timeline-sm .timeline-sm-item {
   position: relative;
   padding-bottom: 20px;
   padding-left: 40px;
   border-left: 2px solid #dee2e6;
}

.timeline-sm .timeline-sm-item .timeline-sm-date {
   position: absolute;
   left: -104px;
}

.timeline-sm .timeline-sm-item:after {
   content: "";
   display: block;
   position: absolute;
   top: 3px;
   left: -7px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #fff;
   border: 2px solid #de5d9e;
}

.timeline-sm {
   padding-left: 110px;
}

.leave-tip {
   border-bottom: 1px solid #d9e0e7;
   margin-bottom: 10px;
}


/* project */

.avatar-group {
   padding-left: 12px;
}

.avatar-group .avatar-group-item {
   margin: 0 0 10px -12px;
   display: inline-block;
   border: 2px solid #fff;
   border-radius: 50%;
}

.avatar-sm {
   height: 2.25rem;
   width: 2.25rem;
}


/* profile */

.profile-view {
   position: relative;
}

.profile-view .profile-img-wrap {
   height: 120px;
   width: 120px;
}

.profile-img-wrap {
   height: 120px;
   position: absolute;
   width: 120px;
   background: #fff;
   overflow: hidden;
}

.profile-view .profile-img {
   width: 120px;
   height: 120px;
}

.profile-img {
   cursor: pointer;
   height: 80px;
   margin: 0 auto;
   position: relative;
   width: 80px;
}

.profile-img-wrap img {
   border-radius: 50%;
   height: 120px;
   width: 120px;
}

.profile-view .profile-basic {
   margin-left: 140px;
   padding-right: 50px;
}

.profile-info-left {
   border-right: 2px dashed #ccc;
}

.user-name {
   color: #333;
   font-weight: 800;
}

.staff-id {
   font-size: 14px;
   font-weight: 500;
   margin-top: 5px;
}

.staff-msg {
   margin-top: 30px;
}

.personal-info {
   list-style: none;
   margin-bottom: 0;
   padding: 0;
}

.personal-info li {
   margin-bottom: 10px;
}

.personal-info li .title {
   color: #4f4f4f;
   float: left;
   font-weight: 900;
   margin-right: 30px;
   width: 25%;
}

.personal-info li .text {
   color: #8e8e8e;
   display: block;
   overflow: hidden;
}

.profile-view .pro-edit {
   position: absolute;
   right: 0;
   top: 0;
}

.edit-icon {
   background-color: #eee;
   border: 1px solid #e3e3e3;
   border-radius: 24px;
   color: #bbb;
   float: right;
   font-size: 12px;
   line-height: 24px;
   min-height: 26px;
   text-align: center;
   width: 26px;
}

.avatar-box {
   float: left;
}

.avatar.avatar-xs {
   width: 24px;
   height: 24px;
}

.avatar {
   background-color: #aaa;
   border-radius: 50%;
   color: #fff;
   display: inline-block;
   font-weight: 500;
   height: 38px;
   line-height: 38px;
   margin: 0 10px 0 0;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   vertical-align: middle;
   width: 38px;
   position: relative;
   white-space: nowrap;
}

.avatar>img {
   border-radius: 50%;
   display: block;
   overflow: hidden;
   width: 100%;
}

.tab-box {
   border-bottom: 0;
   margin-bottom: 10px;
   padding: 0;
}

.tab-box {
   border-bottom: 0;
   margin-bottom: 10px;
   padding: 0;
}

.nav-tabs {
   border-bottom: 1px solid #dee2e6;
}

.nav {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
}

.personal-info {
   list-style: none;
   margin-bottom: 0;
   padding: 0;
}

.experience-box {
   position: relative;
}

.experience-list {
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
}

.experience-list::before {
   background: #ddd;
   bottom: 0;
   content: "";
   left: 8px;
   position: absolute;
   top: 8px;
   width: 2px;
}

.experience-list>li {
   position: relative;
}

.experience-list>li .experience-user {
   background: #fff;
   height: 10px;
   left: 4px;
   margin: 0;
   padding: 0;
   position: absolute;
   top: 4px;
   width: 10px;
}

.before-circle {
   background-color: #ddd;
   border-radius: 50%;
   height: 10px;
   width: 10px;
}

.experience-list>li .experience-content .timeline-content {
   color: #9e9e9e;
}

.experience-list>li .experience-content .timeline-content a.name {
   color: #616161;
   font-weight: bold;
}

.experience-list>li .time {
   color: #bdbdbd;
   display: block;
   font-size: 12px;
   line-height: 1.35;
}


/* responsive */

@media only screen and (max-width: 575.98px) {
   .profile-img-wrap {
       position: relative;
       margin: 0 auto;
   }
   .profile-view .profile-basic {
       margin-left: 0;
       padding-right: 0;
   }
   .profile-basic {
       margin-left: 0;
       margin-top: 15px;
   }
   .profile-info-left {
       text-align: center;
   }
}

@media only screen and (max-width: 767.98px) {
   .profile-info-left {
       border-right: none;
       border-bottom: 2px dashed #ccc;
       margin-bottom: 20px;
       padding-bottom: 20px;
   }
   .nav-tabs.nav-tabs-bottom>li>a.active,
   .nav-tabs.nav-tabs-bottom>li>a.active:hover,
   .nav-tabs.nav-tabs-bottom>li>a.active:focus {
       border-bottom-width: 2px;
       border-color: transparent;
       border-bottom-color: #ff9b44;
       background-color: transparent;
       transition: none 0s ease 0s;
       -moz-transition: none 0s ease 0s;
       -o-transition: none 0s ease 0s;
       -ms-transition: none 0s ease 0s;
       -webkit-transition: none 0s ease 0s;
   }
}

@media only screen and (max-width: 991.98px) {
   .profile-info-left {
       border-right: none;
       border-bottom: 2px dashed #ccc;
       margin-bottom: 20px;
       padding-bottom: 20px;
   }
}


/* payslip */

.employee-payslip-container .employee-payslip .employee-payslip__body {
   list-style-type: none;
   padding: 0;
   margin-top: 10px;
}

.employee-payslip-container .employee-payslip .employee-payslip__header {
   width: 100%;
   font-size: 12px;
   line-height: 20px;
}

.employee-payslip-container .employee-payslip .employee-payslip__header .employee-payslip-company-name {
   padding-bottom: 10px;
   font-size: 18px;
   vertical-align: top;
}

.employee-payslip-container .employee-payslip .employee-payslip__header .employee-payslip-company-logo {
   vertical-align: top;
}

.employee-payslip-container .employee-payslip.employee-payslip--sg .employee-payslip__header .employee-payslip-employee-info {
   width: 100%;
}

.employee-payslip-container .employee-payslip .employee-payslip__header .employee-payslip-employee-row label {
   display: initial;
   font-weight: 700;
   margin-bottom: 0;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.net-income {
   margin-top: 30px;
   padding: 10px 20px;
   background-color: #ecf3ff;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li {
   position: relative;
   margin: 0;
   padding: 5px 20px;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.net-income div {
   font-size: 14px;
   font-weight: 700;
   color: #000;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li div {
   font-size: 12px;
   font-weight: 700;
   color: #000;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.net-income div.right {
   top: 10px;
   right: 20px;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.net-income div {
   font-size: 14px;
   font-weight: 700;
   color: #000;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li div.right {
   position: absolute;
   top: 5px;
   right: 20px;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li div {
   font-size: 12px;
   font-weight: 700;
   color: #000;
}

.price .currency-symbol {
   margin-right: 2px;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.earning.first {
   border-bottom: 2px solid #216ef4;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.first {
   margin: 20px 0 0;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li div.name {
   width: 80%;
   overflow: hidden;
   word-break: break-all;
   word-wrap: break-word;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li div {
   font-size: 12px;
   font-weight: 700;
   color: #000;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.desc {
   border-bottom: 1px solid #ddd;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li {
   position: relative;
   margin: 0;
   padding: 5px 20px;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.total {
   border-bottom: 1px solid #ddd;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.desc {
   border-bottom: 1px solid #ddd;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.deduction.first {
   border-bottom: 2px solid #f6bf46;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.first {
   margin: 20px 0 0;
}

.employee-payslip-container .employee-payslip .employee-payslip__body li.employer-contribution.first {
   border-bottom: 2px solid #00ad9f;
}

.img-responsive {
   width: 100%;
}

.payment-logo {
   height: 120px;
}

.separationline {
   border-left: 1px solid #e0e0e0;
   padding-left: 8px;
}

.text-open {
   color: #268ddd;
}

.font-xs {
   font-size: 12px;
}

.contact-top-info {
   border-right: 1px solid #e8e8e8;
}

.contact-top-info-right {
   text-align: right;
}

sup {
   top: -1.5em;
}

sub,
sup {
   position: relative;
   font-size: 45%;
   line-height: 0;
   vertical-align: baseline;
}


/* email */

.page-aside-left {
   width: 240px;
   float: left;
   padding: 0 20px 20px 10px;
   position: relative;
}

.page-aside-right {
   margin: -1.5rem 0 -1.5rem 250px;
   border-left: 5px solid #fafbfe;
   padding: 1.5rem 0 1.5rem 25px;
}

.email-menu-list a {
   color: #6c757d;
   padding: 12px 5px;
   display: block;
   font-size: 15px;
}

.email-list {
   display: block;
   padding-left: 0;
   overflow: hidden;
}

.email-list>li {
   position: relative;
   display: block;
   height: 51px;
   line-height: 50px;
   cursor: default;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
}

.email-list>li .email-sender-info {
   width: 320px;
}

.email-list>li .email-sender-info .checkbox-wrapper-mail {
   margin: 15px 10px 0 20px;
   cursor: pointer;
   height: 20px;
   width: 20px;
}

.email-list>li .email-sender-info .checkbox-wrapper-mail,
.email-list>li .email-sender-info .star-toggle {
   display: block;
   float: left;
}

.email-list>li .email-sender-info .star-toggle {
   color: #adb5bd;
   margin-left: 10px;
   font-size: 18px;
}

.email-list>li .email-sender-info .checkbox-wrapper-mail,
.email-list>li .email-sender-info .star-toggle {
   display: block;
   float: left;
}

.email-list>li .email-sender-info .email-title {
   position: absolute;
   top: 0;
   left: 100px;
   right: 0;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   margin-bottom: 0;
   line-height: 50px;
}

.email-list>li.unread a {
   font-weight: 600;
   color: #272e37;
}

.email-list>li a {
   color: #6c757d;
}

.email-list>li .email-content {
   /* position: absolute; */
   top: 0;
   left: 320px;
   right: 0;
   bottom: 0;
}

.email-list>li .email-content .email-subject {
   left: 0;
   right: 110px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

.email-list>li:hover {
   background: #f1f3fa;
   -webkit-transition-duration: .05s;
   transition-duration: .05s;
}

.unread {
   background: #f1f3fa;
   -webkit-transition-duration: .05s;
   transition-duration: .05s;
}

.email-list>li .email-content .email-date,
.email-list>li .email-content .email-subject {
   position: absolute;
   top: 0;
}

.email-list>li.unread a {
   font-weight: 600;
   color: #272e37;
}

.email-list>li .email-content .email-date {
   right: 0;
   width: 100px;
   text-align: right;
   padding-left: 10px;
}

.email-list>li .email-content .email-date,
.email-list>li .email-content .email-subject {
   position: absolute;
   top: 0;
}

.email-list>li a {
   color: #6c757d;
}

.email-list>li .email-action-icons {
   opacity: 0;
}

.email-list>li .email-action-icons ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: absolute;
   -webkit-transition: all .5s;
   transition: all .5s;
   right: -180px;
}

.list-inline {
   padding-left: 0;
   list-style: none;
}

.email-list>li .email-action-icons ul li {
   margin: 0 10px;
}

.list-inline-item:not(:last-child) {
   margin-right: 6px;
}

.list-inline-item {
   display: inline-block;
}

.email-list>li.unread a {
   font-weight: 600;
   color: #272e37;
}

.email-list>li a {
   color: #6c757d;
}

.email-list>li:hover .email-action-icons {
   opacity: 1;
}

.font-weight-bolder {
   font-weight: 900;
}


/* small {
  font-size: 12px;
} */

.leave-tip p {
   font-size: 16px;
}

td {
   font-size: 14px;
   font-weight: 100;
}

.nav-tabs>a {
   font-size: 14px;
   font-weight: 100;
}

li.nav-item.active {
   /* border-bottom: 3px solid #dc3f9f; */
}

.none {
   display: none;
}

.bg-shape {
   position: absolute;
   content: "";
   background: url(../img/bg-shape.svg);
   top: 20px;
   z-index: 0;
   height: 100%;
   width: 100%;
   opacity: .7;
}

.sw-btn-prev {
   background: #268ddd;
}


/* font sizes */

.font-small {
   font-size: small;
}

.modal.left .modal-dialog,
.modal.right .modal-dialog,
.modal.top .modal-dialog,
.modal.bottom .modal-dialog {
   -webkit-transform: translate3d(0%, 0, 0);
   -ms-transform: translate3d(0%, 0, 0);
   -o-transform: translate3d(0%, 0, 0);
   transform: translate3d(0%, 0, 0);
}


/* Left & Right */

.modal.left .modal-dialog,
.modal.right .modal-dialog {
   position: fixed;
   margin: auto;
   width: 500px;
   max-width: 100%;
   height: 100%;
}

.modal.left .modal-content,
.modal.right .modal-content {
   height: 100%;
   overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
   padding: 15px 15px 80px;
}

.modal.left.fade .modal-dialog {
   left: -500px;
   -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
   -o-transition: opacity 0.3s linear, left 0.3s ease-out;
   transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show .modal-dialog {
   left: 0;
}

.modal.right.fade .modal-dialog {
   right: -500px;
   -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
   -o-transition: opacity 0.3s linear, right 0.3s ease-out;
   transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
   right: 0;
}

.modal.left .modal-content,
.modal.right .modal-content,
.modal.top .modal-content,
.modal.bottom .modal-content,
.modal.full .modal-content {
   border-radius: 0;
   border: none;
}

.modal.left .modal-dialog.modal-sm,
.modal.right .modal-dialog.modal-sm {
   width: 300px;
}

.modal.left .modal-dialog.modal-lg,
.modal.right .modal-dialog.modal-lg {
   width: 800px;
}

.modal.left .modal-dialog.modal-xl,
.modal.right .modal-dialog.modal-xl {
   width: 1140px;
}


/* Top and Bottom */

.modal.top .modal-dialog,
.modal.bottom .modal-dialog {
   position: fixed;
   margin: auto;
   width: 100%;
   max-width: 100%;
   height: auto;
}

.modal.top .modal-content,
.modal.bottom .modal-content {
   height: auto;
   overflow-y: auto;
}

.modal.top .modal-body,
.modal.bottom .modal-body {
   padding: 15px 15px;
}


/* Top */

.modal.top.fade .modal-dialog {
   top: -100%;
   -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
   -o-transition: opacity 0.3s linear, top 0.3s ease-out;
   transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.top.fade.show .modal-dialog {
   top: 0;
}


/* Bottom */

.modal.bottom.fade .modal-dialog {
   bottom: -100%;
   -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
   -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
   transition: opacity 0.3s linear, bottom 0.3s ease-out;
}

.modal.bottom.fade.show .modal-dialog {
   bottom: 0;
}

.modal.bottom.fade .modal-dialog {
   bottom: -100%;
}


/* Full Screen */

.modal.full .modal-dialog {
   position: fixed;
   margin: auto;
   width: 100%;
   max-width: 100%;
   height: 100%;
}

.modal.full .modal-content {
   height: 100%;
   overflow-y: auto;
}

.modal.full .close-modal {
   position: fixed;
   top: 0;
   right: 3rem;
}


/* Footer */

.modal-footer-fixed {
   position: fixed;
   bottom: 0;
   width: 100%;
   background: #fff;
   border-radius: 0;
}


/* XS */

.modal.left.xs .modal-body,
.modal.right.xs .modal-body {
   padding: 15px;
}

.bg-grey-2 {
   background-color: #f7f7f7 !important;
}


/* delete confirm */

.modal-confirm {
   color: #636363;
   width: 400px;
}

.modal-confirm .modal-content {
   padding: 20px;
   border-radius: 5px;
   border: none;
   text-align: center;
   font-size: 14px;
}

.modal-confirm .modal-header {
   border-bottom: none;
   position: relative;
}

.modal-confirm h4 {
   text-align: center;
   font-size: 26px;
   margin: 30px 0 -10px;
}

.modal-confirm .close {
   position: absolute;
   top: -5px;
   right: -2px;
}

.modal-confirm .modal-body {
   color: #999;
}

.modal-confirm .modal-footer {
   border: none;
   text-align: center;
   border-radius: 5px;
   font-size: 13px;
   padding: 10px 15px 25px;
}

.modal-confirm .modal-footer a {
   color: #999;
}

.modal-confirm .icon-box {
   width: 80px;
   height: 80px;
   margin: 0 auto;
   border-radius: 50%;
   z-index: 9;
   text-align: center;
   border: 3px solid #f15e5e;
}

.modal-confirm .icon-box i {
   color: #f15e5e;
   font-size: 46px;
   display: inline-block;
   margin-top: 13px;
}

.modal-confirm .btn,
.modal-confirm .btn:active {
   color: #fff;
   border-radius: 4px;
   background: #60c7c1;
   text-decoration: none;
   transition: all 0.4s;
   line-height: normal;
   min-width: 120px;
   border: none;
   min-height: 40px;
   border-radius: 3px;
   margin: 0 5px;
}

.modal-confirm .btn-secondary {
   background: #c1c1c1;
}

.modal-confirm .btn-secondary:hover,
.modal-confirm .btn-secondary:focus {
   background: #a8a8a8;
}

.modal-confirm .btn-danger {
   background: #f15e5e;
}

.modal-confirm .btn-danger:hover,
.modal-confirm .btn-danger:focus {
   background: #ee3535;
}

.trigger-btn {
   display: inline-block;
   margin: 100px auto;
}

.select2.select2-container .selection .select2-selection {
   background: #e0e0e0;
}

.select2.select2-container .selection .select2-selection {
   background: #e0e0e0;
}

.text-height-1{
  line-height: 1.4rem;
}


/* .select2-container {
   z-index: 9999 !important;
} */

.font-bold {
   font-weight: bold;
}

.font-italics {
   font-style: italic;
}

.font-16{
  font-size: 16px;
}

.font-14{
  font-size: 14px;
}

.nav-link {
  display: block !important;
  padding: 0.5rem 1rem !important;
  font-weight: 600 !important;
  text-decoration: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.btn-outline-black {
  background-color: #fff;
  border: 1px solid;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #c2c2c2 !important;
  opacity: 1 !important; /* Firefox */
}

.f-s-22{font-size: 22px !important;}

/* notes */
.note-side {
   background: #ffecc0;
   padding: 18px;
   margin-bottom: 5px;
   position: relative;
   cursor: pointer;
   border-bottom: 1px solid #e4dabb;
   border-radius: 3px;
   color: #2b2b3b;
}

.note-remove {
   position: absolute;
   display: inline-block;
   width: 20px;
   height: 20px;
   text-align: center;
   line-height: 20px;
   top: 5px;
   right: 5px;
   cursor: pointer;
   color: #c3baa7;
   font-size: 13px;
}

.note-remove:before {
   font-family: 'Font Awesome 5 Pro';
   content:"\f00d";
}

.note-text {
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 10px;
   max-height: 100px;
}

.note-side p {
   margin: 0;
   font-size: 13px;
}

.note-date {
   font-size: 11px;
   line-height: 11px;
   color: #87878d;
}

.iti.iti--allow-dropdown {
   width: 100% !important;
}

.image-responsive{
   width: 100%;
}

/*  */