.mt-05 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-25 {margin-top: 25px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}

.mb-05 {margin-bottom: 5px;}
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-25 {margin-bottom: 25px;}
.mb-30 {margin-bottom: 30px;}
.mb-40 {margin-bottom: 40px;}
.mb-50 {margin-bottom: 50px;}

.mr-05 {margin-right: 5px;}
.mr-10 {margin-right: 10px;}
.mr-15 {margin-right: 15px;}
.mr-20 {margin-right: 20px;}
.mr-25 {margin-right: 25px;}
.mr-30 {margin-right: 30px;}
.mr-40 {margin-right: 40px;}
.mr-50 {margin-right: 50px;}

.ml-05 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-25 {margin-left: 25px;}
.ml-30 {margin-left: 30px;}
.ml-40 {margin-left: 40px;}
.ml-50 {margin-left: 50px;}

.pt-05 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px;}
.pt-25 {padding-top: 25px;}
.pt-30 {padding-top: 30px;}
.pt-40 {padding-top: 40px;}
.pt-50 {padding-top: 50px;}

.pl-05 {padding-left: 5px !important;}
.pl-10 {padding-left: 10px !important;}
.pl-15 {padding-left: 15px !important;}
.pl-20 {padding-left: 20px !important;}
.pl-25 {padding-left: 25px !important;}
.pl-30 {padding-left: 30px !important;}
.pl-40 {padding-left: 40px !important;}
.pl-50 {padding-left: 50px !important;}

.pb-05 {padding-bottom: 5px;}
.pb-10 {padding-bottom: 10px;}
.pb-15 {padding-bottom: 15px;}
.pb-20 {padding-bottom: 20px;}
.pb-25 {padding-bottom: 25px;}
.pb-30 {padding-bottom: 30px;}
.pb-40 {padding-bottom: 40px;}
.pb-50 {padding-bottom: 50px;}

.o1 {opacity: 0.1 !important;}
.o2 {opacity: 0.2 !important;}
.o3 {opacity: 0.3 !important;}
.o4 {opacity: 0.4 !important;}
.o5 {opacity: 0.5 !important;}
.o6 {opacity: 0.6 !important;}
.o7 {opacity: 0.7 !important;}
.o8 {opacity: 0.8 !important;}
.o9 {opacity: 0.9 !important;}
.o10 {opacity: 1 !important;}

.fw-100 {font-weight: 100 !important;}
.fw-200 {font-weight: 200 !important;}
.fw-300 {font-weight: 300 !important;}
.fw-400 {font-weight: 400 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-600 {font-weight: 600 !important;}
.fw-700 {font-weight: 700 !important;}
.fw-800 {font-weight: 800 !important;}
.fw-900 {font-weight: 900 !important;}

.font-size-0 {font-size: 0px;}
.font-size-10 {font-size: 10px;}
.font-size-11 {font-size: 11px;}
.font-size-12 {font-size: 12px;}
.font-size-13 {font-size: 13px;}
.font-size-14 {font-size: 14px;}
.font-size-15 {font-size: 15px;}
.font-size-16 {font-size: 16px;}
.font-size-17 {font-size: 17px;}
.font-size-18 {font-size: 18px;}
.font-size-19 {font-size: 19px;}
.font-size-20 {font-size: 20px;}
.font-size-21 {font-size: 21px;}
.font-size-22 {font-size: 22px;}
.font-size-23 {font-size: 23px;}
.font-size-24 {font-size: 24px;}
.font-size-25 {font-size: 25px;}
.font-size-26 {font-size: 26px;}
.font-size-27 {font-size: 27px;}
.font-size-28 {font-size: 28px;}
.font-size-29 {font-size: 29px;}
.font-size-30 {font-size: 30px;}
.font-size-31 {font-size: 31px;}
.font-size-32 {font-size: 32px;}

.w-5 {width: 5% !important;}
.w-10 {width: 10% !important;}
.w-20 {width: 20% !important;}
.w-30 {width: 30% !important;}
.w-40 {width: 40% !important;}
.w-50 {width: 50% !important;}
.w-60 {width: 60% !important;}
.w-70 {width: 70% !important;}
.w-80 {width: 80% !important;}
.w-90 {width: 90% !important;}

.lh-10 {line-height: 10px;}
.lh-11 {line-height: 11px;}
.lh-12 {line-height: 12px;}
.lh-13 {line-height: 13px;}
.lh-14 {line-height: 14px;}
.lh-15 {line-height: 15px;}
.lh-16 {line-height: 16px;}
.lh-17 {line-height: 17px;}
.lh-18 {line-height: 18px;}
.lh-19 {line-height: 19px;}
.lh-20 {line-height: 20px;}
.lh-21 {line-height: 21px;}
.lh-22 {line-height: 22px;}
.lh-23 {line-height: 23px;}
.lh-24 {line-height: 24px;}
.lh-25 {line-height: 25px;}
.lh-26 {line-height: 26px;}
.lh-27 {line-height: 27px;}
.lh-28 {line-height: 28px;}
.lh-29 {line-height: 29px;}
.lh-30 {line-height: 30px;}
.lh-31 {line-height: 31px;}
.lh-32 {line-height: 32px;}

.h-32 {height: 32px;}

.cursor-ptr {cursor: pointer;}
.hms-alert {font-size: 12px;}
.row.gap-10px {margin: 0 -5px;}
.row.gap-10px > div {padding: 0 5px;}

.bg-light-yellow, tr:hover .bg-light-yellow {background: #fff8e1cc !important;}
.bg-light-orange, tr:hover .bg-light-orange {background: #ffecb3 !important;}
.bg-light-green, tr:hover .bg-light-green {background: #e8f5e9cc !important;}
.bg-light-blue, tr:hover .bg-light-blue {background: #e1f5fecc !important;}
.bg-light-red, tr:hover .bg-light-red {background: #fce4eccc !important;}
.bg-dark-red, tr:hover .bg-dark-red {background: #f8bbd0 !important;}
.bg-dark-grey, tr:hover .bg-dark-red {background: #dadada !important;}

.bg-pastel-green, tr:hover .bg-pastel-green {background: #f0f4c3 !important;}
.bg-pastel-blue, tr:hover .bg-pastel-blue {background: #b2dfdb !important;}
.bg-true-blue, tr:hover .bg-true-blue {background: #bbdefb !important;}
.bg-pastel-navy, tr:hover .bg-pastel-navy {background: #c5cae9 !important;}

.bg-white {background: white;}
.bg-grey {background: #f2f2f2 !important;}

/*layers*/
#content {z-index: 100;}

.doc-h3-wrapper {z-index: 110;}

.pier-ship-progress {z-index: 145;}
.pier-info {z-index: 150;}

#nav-meta {z-index: 200;}
#top-nav {z-index: 210;}
.nav-icon {z-index: 220;}

.float-nav-overlay {z-index: 240;}
.floating-nav {z-index: 250;}

#nav-overlay {z-index: 300;}

#side-nav,
.ui-tray {z-index: 500;}
.ui-tray.active {z-index: 510;}
.data-info-head {z-index: 550;}
.nav-mask {z-index: 560;}

html {
    height: 100%;
}
body {
    min-height: 100%;
    font-size: 12px;
    background: #f2f2f2;
    color: #303030;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}
h1 {

    font-size: 30px;
    font-weight: 500;
}
a {
    text-decoration: none;
}
a:active,
a:focus,
a:visited {
    text-decoration: none !important;
    outline: none !important;
}
a:hover {
    text-decoration: none !important;
    outline: none !important;
}
a.grey-link {
    text-decoration: none;
    color: #333;
}
a.grey-link:hover,
a.grey-link:active,
a.grey-link:focus,
a.grey-link:visited {
    text-decoration: none !important;
    outline: none !important;
    color: #333;
}
a.grey-link.blue-hover:hover {
    color: #007bff;
}
a.white-link {
    text-decoration: none;
    color: #fff;
}
a.white-link:hover,
a.white-link:active,
a.white-link:focus,
a.white-link:visited {
    text-decoration: none !important;
    outline: none !important;
    color: #fff;
}
a.dropdown-item {
    text-decoration: none;
    color: #333;
    font-size: 11px;
}
a.dropdown-item:hover,
a.dropdown-item:active,
a.dropdown-item:focus,
a.dropdown-item:visited,
a.dropdown-item.active {
    text-decoration: none !important;
    outline: none !important;
    color: #333;
    background-color: rgb(0 0 0 / .03);
}
.btn-light {
    background: #eee;
    border-color: #ddd;
}
.btn-light:hover {
    border-color: #eee;
}
a.btn-light {
    text-decoration: none;
    color: #333;
}
a.btn-light:hover,
a.btn-light:active,
a.btn-light:focus,
a.btn-light:visited {
    text-decoration: none !important;
    outline: none !important;
    color: #333;
}
.brd-bottom {border-bottom: 1px solid #ececec;}
.brd-bottom-bold {border-bottom: 1px solid #ccc !important;}
.brd-top {border-top: 1px solid #ececec;}
.brd-top-bold {border-top: 1px solid #ccc !important;}
.brd-right-bold {border-right: 1px solid #ccc !important;}
.btn-icon {
    position: relative;
    width: 16px;
    margin-right: 7px;
    height: 16px;
    opacity: .5;
}
.btn-outline {
    border-color: rgb(0 0 0 / .07);
}
.pop {transition: all 0.1s ease-in-out;}
.pop:active {transform: scale(1.05) !important;}
.popover-body-header {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
}
.popover-body {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}
.modal-content {
    border: 0;
    border-radius: 0;
}
.modal-desc {
    background: #333;
    color: #ffffffdd;
    padding: 8px 15px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.select2-container .select2-selection--single {
    height: 38px;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #ccc;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 10px;
}
.input-td .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 8px;
    right: 5px;
}
.select2-container--default .select2-selection--multiple {
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 3px;
    padding-left: 20px;
}
td.error {background: #fce4eccc !important;}


/*CORE*/
#content {
    margin-left: 50px;
    margin-top: 50px;
    padding-bottom: 100px;
}
.hms-btn {
    font-size: 12px;
    border-radius: 10px;
    padding: 6px 22px 6px 22px;
    position: relative;
}
.hms-btn.has-icon {
    padding: 6px 22px 6px 18px;
}
.hms-btn.list-btn {
    padding-left: 15px;
}
.hms-btn .icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: -2px;
    opacity: .3;
}
.hms-btn .icon.left {
    margin-right: 8px;
}
.hms-btn .icon.right {
    margin-left: 5px;
}
.btn-44 {
    height: 44px;
}
form label {
    font-weight: 600;
}
label.required::after {
    content: "*";
    color: #e91e63;
    margin-left: 5px;
}
.form-control {
    font-size: 12px;
}
.gutter-10 {
    margin-left: -10px;
    margin-right: -10px;
}
.gutter-10 .gutter-item {
    margin-right: 10px;
    margin-left: 10px;
}
.buyer-icon {
    height: 25px;
    position: relative;
    top: -2px;
    margin-right: 5px;
}
.buyer-icon.no-text {
    top: 0px;
}
input.hms-control {
    border: 0px;
    background: rgb(0 0 0 / .05);
    color: rgb(0 0 0 / .7);
}
input.hms-control.input-38 {
    height: 38px;
}
input.hms-control.hms-small {
    height: 34px;
}
input.hms-control:focus {
    background: rgb(0 0 0 / .05);
}
select.hms-control {
    border: 1px solid #cecece;
    background: url("../icons/chevron-down-dark.svg") no-repeat right 14px center/14px 14px;
    background-color: rgb(255 255 255 / 1);
    color: rgb(0 0 0 / .7);
    height: unset;
    position: relative;
    height: 34px;
}
.custom-select {
    font-size: 12px !important;
}
.custom-select option {
    background-color: rgb(255 255 255 / 1);
}
.btn-sea {
    color: #fff !important;
    background-color: rgb(40 37 96) !important;
        border-color: rgb(40 37 96) !important;
}
.btn-sea:active,
.btn-sea:focus,
.btn-sea:hover {    
    color: #fff !important;
    background-color: rgb(40 37 96) !important;
        border-color: rgb(40 37 96) !important;
}
svg {
    vertical-align: middle;
}
.text-black {color: #333 !important;}
.text-blue {color: #007bff !important;}
.text-purple {color: #9c27b0 !important;}
.text-sea {color: rgb(40 37 96) !important;}
.icon {
    position: relative;
}
/*spinners*/
.add-spinner {
    position: relative;
}
.add-spinner .spinner-content {
    opacity: 0;
}
.add-spinner .spinner-contain {
    width: 19px;
    height: 19px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
}
.text-left.add-spinner .spinner-contain {
    transform: translate(0,-50%);
    left: 20px;
}
.add-spinner .spinner-border {
    width: 100%;
    height: 100%;
    display: block;
    opacity: .3;
}
.add-spinner.white-spinner .spinner-border {
    opacity: .8;
}
.add-spinner.revert .spinner-content {
    opacity: 1;
}
.add-spinner.revert .spinner-contain {
    display: none;
}


.breadcrumb.hms {
    padding: 0;
    background: none;
    margin-bottom: 10px;
    font-size: 13px;
}
.breadcrumb.hms .icon {
    position: relative;
    width: 16px;
    height: 16px;
    top: -2px;
    margin-right: 5px;
}
a.dashboard-quick .icon {
    width: 30px;
    height: 30px;
    opacity: .5;
    display: block;
    margin-bottom: 8px;
    transition: all 0.1s ease-in-out;
}
a.dashboard-quick:hover .icon {
    transform: scale(1.1);
}
.quick-links .row {
    margin-right: -10px;
    margin-left: -10px;
}
.quick-links .row > div {
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 15px;
}
a.dashboard-quick {
    color: #333;
    padding: 15px 20px;
    border-radius: 10px;
    background: white;
    margin-bottom: 15px;
    height: 100%;
    display: block;
    transition: all 0.1s ease-in-out;
    position: relative;
}
a.dashboard-quick:hover {
    opacity: .9;
}
a.dashboard-quick.green {
    background-image: linear-gradient(229deg, #F4D03F 0%, #16A085 100%);
    color: white;
}
a.dashboard-quick.blue {
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    color: white;
}
a.dashboard-quick.purple {
    background-image: linear-gradient( 228deg, #CE9FFC 10%, #7367F0 100%);
    color: white;
}
a.dashboard-quick.orange {
    background-image: linear-gradient( 228deg, #FEB692 10%, #EA5455 100%);
    color: white;
}
a.dashboard-quick.sky {
    background-image: linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%);
    color: white;
}
a.dashboard-quick.white {
    background-image: white;
}
a.dashboard-quick.dashed {
    border: 2px dashed #ececec;
}
.table-options-wrapper {
    padding: 5px 20px;
    background: white;
    border-radius: 10px;
}
.table-options {
    margin-left: -15px; /*because the first item is padding 15px*/
}
.table-options a.parents {
    display: block;
    color: #333;
    font-weight: 600;
    padding: 8px 15px;
    float: left;
}
.table-options a.parents.active,
.table-options a.parents:hover {
    color: rgb(40 37 96);
}
.table-options .dropdown-item {
    color: #333 !important;
}
.table-options .dropdown-item:focus,
.table-options .dropdown-item:hover {
    color: #333  !important;
}
.table-options a .icon {
    position: relative;
    width: 14px;
    height: 14px;
    top: -1px;
    opacity: .3;
}
.table-options a .icon.icon-left {
    margin-right: 5px;
    top: -2px;
}
.hms-table {
    width: 100%;
}
.hms-table th {
    padding: 10px 5px;
    border-bottom: 1px solid #ececec;
    border-top: 1px solid #ececec;
}
.hms-table td {
    padding: 10px 5px;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    margin-bottom: -1px;
    font-size: 12px;
}
.hms-table.fs-12 td,
.hms-table.fs-12 th,
.hms-table td.fs-12 {
    font-size: 12px;
}
.thead-meta {
    font-weight: 400;
    color: #cecece;
    font-style: italic;
}
.above-table .dashboard-quick {
    margin-bottom: 0px;
}
.dropdown-menu {
    font-size: 11px;
}

.dropdown-item .icon {
    position: relative;
    width: 12px;
    height: 12px;
    opacity: .5;
    margin-right: 8px;
    top: -1px;
}
th .help-icon {
    position: relative;
    top: -2px;
    height: 12px;
    width: 12px;
    opacity: .3;
    margin-left: 3px;
    cursor: pointer;
}
.table-cargo {
    position: relative;
    font-size: 12px;
    font-weight: initial;
    padding: 2px 7px 3px 7px;
    border-radius: 6px;
    display: inline-block;
}
.hms-card {
    background: white;
    border-radius: 10px;
    padding: 20px 25px;
}
.hms-card.cream {background: #FFF4DE;}
.hms-card.brocoli {background: #f0f4c3;}
.hms-card.blue {background: #e1f5fe;}
.hms-card.yellow {background: #fff8e1;}
.hms-card.red {background: #fce4ec;}
.card-name {
    font-size: 18px;
    font-weight: 600;
}
.hms-card .card-head {
    position: relative;
}
.hms-card .card-meta {
    opacity: .3;
}
.hms-card .card-tool {
    position: absolute;
    right: 0;
    top: 0;
}
.hms-card .card-tool a {
    color: rgb(40 37 96);
}
.hms-card .card-tool.card-tab a {
    color: #ccc;
}
.hms-card .card-tool.card-tab a:hover,
.hms-card .card-tool.card-tab a:focus,
.hms-card .card-tool.card-tab a.active {
    color: rgb(40 37 96);
    opacity: 1;
}
.card-pane {
    display: none;
}
.card-pane.active {
    display: block;
}
.hms-card .hms-table th:first-child,
.hms-card .hms-table td:first-child {
    padding-left: 0px;
}
.hms-table tbody tr:hover {
    background: rgb(0 0 0 / .02);
}

.tr-desktop .icon {
    position: relative;
    width: 16px;
    height: 16px;
    top: -2px;
    margin-right: 5px;
    opacity: .2;
}
.tr-mobile .icon {
    position: relative;
    width: 16px;
    height: 16px;
    top: -2px;
    margin-right: 5px;
    opacity: .2;
}
.hms-table.no-cursor td {
    cursor: unset;
}
.side-view-quicks .item {
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
}
.side-view-quicks .item.blue {
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    color: white;
}
.side-view-quicks .item.purple {
    background-image: linear-gradient( 228deg, #CE9FFC 10%, #7367F0 100%);
    color: white;
}
.side-view-quicks .item.green {
    background-image: linear-gradient(229deg, #F4D03F 0%, #16A085 100%);
    color: white;
}
.side-view-quicks .item.outline {
    background: none;
    color: #333;
    border: 1px solid #ccc;
}
.side-view-quicks .item:hover {
    opacity: .8;
}
.side-view-quicks .item.outline:hover {
    border: 1px solid #666;
    opacity: 1;
}
.side-view-quicks a.dropdown-item {
    color: #333;
}
.side-view-quicks .item .icon {
    position: absolute;
    width: 18px;
    height: 18px;
    right: 15px;
    top: 50%;
    transform: translate(0,-50%);
    opacity: .8;
}
.side-view-info .item .name {
    opacity: .3;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}
.side-view-info .item {
    margin-bottom: 15px;
}
.side-view-info.fs-12 .value {
    font-size: 12px;
}
.timeline-chart {
    overflow: hidden;
    border-radius: 10px;
    background-image: linear-gradient( 135deg, #EE9AE5 10%, #5961F9 100%);
    height: 80px;
    width: 100%;
}
.arrival-view-card h4 {
    font-size: 22px;
}
.view-pane-selector a {
    padding: 5px 15px;
    border-radius: 100px;
    margin-right: 10px;
    background: rgb(0 0 0 / .03);
    color: #333;
    font-weight: 600;
}
.view-pane-selector a.active,
.view-pane-selector a:hover {
    background: rgb(0 0 0 / .1);
}
.view-pane-selector a {transition: all 0.1s ease-in-out;}
.view-pane-selector a:active {transform: scale(1.05) !important;}

.side-view-info .icon {
    width: 15px;
    height: 15px;
    position: relative;
    top: -1px;
    margin-left: 3px;
}
.above-table .dashboard-quick {
    margin-bottom: 0px;
}
.dashboard-quick .int {
    font-size: 18px;
    font-weight: 600;
}
.anchor-modal .modal-header {
    background: #292b38;
    color: white;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding: 0;
    border-bottom: 0;
}
.anchor-modal .modal-header img {
    width: 100%;
}
.anchor-modal .modal-header .close {
    color: white;
    text-shadow: none;
}
.anchor-modal .modal-header h5 {
    font-size: 14px;
}
.modal {
    padding-bottom: 100px;
}
.modal-my-profile {
    position: relative;
}
.modal-my-profile .thumb {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    border-radius: 100px;
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.modal-my-profile .thumb img {
    width: 100%;
    border-radius: 100px;
}
.modal-my-profile .inner {
    padding-left: 55px;
}
.info-item {
    margin-bottom: 15px;
    font-size: 12px;
}
.info-item h5 {
    opacity: .2;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0px;
}
.info-item p {
    margin-bottom: 0;
}
.hms-card.border {
    border: 1px solid #ececec;
}
.choice-item label {
    border-radius: 0.25rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 12px 15px 5px 15px;
    background: rgb(0 0 0 / .03);
}

.choice-item label.p1015 {
    padding: 12px 15px !important;
}
.choice-item label:hover {
    background: rgb(0 0 0 / .05);
}
.choice-item label.small {
    padding: 7px 10px !important;
}
.choice-item.choice-blue label,
.choice-item.choice-blue label:hover {
    background: #E1F5FE;
}
.choice-item.choice-red label,
.choice-item.choice-red label:hover {
    background: #FCE4EC;
}

.choice-item label {transition: all 0.1s ease-in-out;}
.choice-item label:active {transform: scale(1.01) !important;}

.choice-item label input {
    position: relative;
    top: 2px;
    margin-right: 5px;
}
.modal-spinner {
    position: relative;
    height: 100px;
    display: none;
}
.modal-spinner .spinner-contain {
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
}
.modal-spinner .spinner-border {
    opacity: .2;
}
.loading .modal-spinner {
    display: block;
}
.loading .modal-spinner + .modal-body {
    display: none;
}
.loading .modal-spinner + .modal-body + .modal-footer {
    display: none;
}
.hms-card.in-modal {
    padding: 15px;
    padding-bottom: 5px;
}
.activity-branch {
    border-radius: 5px;
    padding: 15px;
    position: relative;
    margin-bottom: 15px;
    font-size: 12px;
    border: 1px solid #dee2e6;
}
.activity-branch .creator {
    position: relative;
    padding-left: 30px;
    font-weight: 600;
    line-height: 20px;
    padding-right: 70px;
}
.activity-branch .thumb {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    left: 0;
    position: absolute;
    top: 40%;
    transform: translate(0, -50%);
}
.activity-branch .content {
    padding-left: 10px;
    border-left: 3px solid rgb(0 0 0 / .05);
    margin-top: 10px;
    margin-left: 30px;
    line-height: 22px;
}
.activity-branch .twig {
    color: rgb(0 0 0 / .5);
}
.activity-branch .field {
    display: inline;
    font-weight: 600;
    margin-right: 5px;
}
.activity-branch .new-val {
    display: inline;
    font-style: italic;
    color: rgb(0 0 0 / .3);
}
.activity-branch .time {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 12px;
    font-style: italic;
    color: rgb(0 0 0 / .5);
    text-align: right;
}
.activity-branch .name {
}
.activity-branch .role {
    opacity: .75;
    font-weight: normal;
}
.table-ore {
    width: 20px;
    height: 20px;
    position: relative;
    margin-right: 5px;
    top: -1px;
}
.view-pane-selector a {
    padding: 7px 17px;
    border-radius: 10px;
    margin-right: 10px;
    background: rgb(0 0 0 / .03);
    color: #333;
    font-weight: 600;
}
.view-pane-selector a.active,
.view-pane-selector a:hover {
    background: rgb(0 0 0 / .1);
}
.view-pane-selector a {transition: all 0.1s ease-in-out;}
.view-pane-selector a:active {transform: scale(1.05) !important;}
.dashboard-quick.has-img {
    padding-left: 90px;
}
.dashboard-quick.has-img .the-img {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translate(0, -50%);
    width: 60px;
    height: 60px;
}
.dashboard-quick.has-img.small-pic {
    padding-left: 80px;
}
.dashboard-quick.has-img.small-pic .the-img {
    width: 40px;
    height: 40px;
    opacity: .2;
    left: 40px;
}
.modal .dashboard-quick.has-img .the-img {
    left: 15px;
}
.modal-object-title {
    position: relative;
}
.modal-object-title .thumb {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
}
.modal-object-title .thumb img {
    width: 100%;
}
.modal-object-title .thumb .icon {
    width: 100%;
    height: 100%;
}
.modal-object-title .inner {
    padding-left: 55px;
}
.hms-alert.has-icon {
    padding-left: 72px;
}
.big-alert-icon {
    width: 44px;
    height: 44px;
    opacity: .5;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(0, -50%);
}
.table-card-title th {
    border-top: 0px;
    padding-top: 0px;
}
ul.hms-ul {
    padding-left: 1px;
    list-style: none;
}
ol.hms-ul {
    padding-left: 25px;
}
ul.hms-ul li {    
    display: inline-block;
    position: relative;
    padding-left: 18px;
    width: 100%;
}
ul.hms-ul li::before {    
    content: "\2022";
    font-weight: bold;
    display: inline-block;
    width: 16px;
    opacity: .2;
    margin-left: 0px;
    position: absolute;
    left: 0;
}
ol.hms-ul li::before {    
    
}
.btn-cargo {
    width: 20px;
    height: 20px;
    position: relative;
    top: -1px;
    margin-right: 8px;
}
.quick-summary .hms-btn {
    padding-left: 15px;
}
.modal-head-img {
    border-radius: 10px;
}
td.has-btg {
    padding-left: 110px !important;
    position: relative;
}
.btg-left {
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translate(0,-50%);
    font-size: 11px;
    text-transform: uppercase;
    opacity: .5;
}
.btg-num {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translate(0,-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    font-weight: 600;
    background: #00bcd4;
}
.mobile-pie {
    background: rgb(0 0 0 / .05);
    position: relative;
    z-index: 100;
    height: 30px;
}
.mobile-pie .label-percentage {
    height: 100%;
    float: left;
    height: 30px;
    border-right: 1px solid rgb(255 255 255 / .5);
}
.mobile-pie .label-percentage:last-child {
    border-right: 0px;
}
.legend-item {
    font-size: 12px;
    position: relative;
}
.legend-item:hover,
.legend-item:active {
    background: rgb(0 0 0 / .05);
}
.legend-item .meta {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}
.mobile-pie-indicator {
    height: 14px;
    width: 14px;
    margin-right: 5px;
    display: inline-block;
    position: relative;
    top: 2px;
}

.label-percentage.red, .mobile-pie-indicator.red  {background: #dc3545;}
.label-percentage.coal1, .mobile-pie-indicator.coal1  {background: #6c757d;}
.label-percentage.coal2, .mobile-pie-indicator.coal2  {background: #6c757dcc;}
.label-percentage.coal3, .mobile-pie-indicator.coal3  {background: #6c757daa;}
.label-percentage.coal4, .mobile-pie-indicator.coal4  {background: #6c757d66;}
.label-percentage.coal5, .mobile-pie-indicator.coal5  {background: #6c757d33;}
.label-percentage.yellow1, .mobile-pie-indicator.yellow1  {background: #FFC107;}
.label-percentage.yellow2, .mobile-pie-indicator.yellow2  {background: #FFC107cc;}
.label-percentage.yellow3, .mobile-pie-indicator.yellow3  {background: #FFC107aa;}
.label-percentage.yellow4, .mobile-pie-indicator.yellow4  {background: #FFC10766;}
.label-percentage.yellow5, .mobile-pie-indicator.yellow5  {background: #FFC10733;}
.label-percentage.teal1, .mobile-pie-indicator.teal1  {background: #009688;}
.label-percentage.teal2, .mobile-pie-indicator.teal2  {background: #009688cc;}
.label-percentage.teal3, .mobile-pie-indicator.teal3  {background: #009688aa;}
.label-percentage.teal4, .mobile-pie-indicator.teal4  {background: #00968866;}
.label-percentage.teal5, .mobile-pie-indicator.teal5  {background: #00968833;}
.label-percentage.purple1, .mobile-pie-indicator.purple1  {background: #673AB7;}
.label-percentage.purple2, .mobile-pie-indicator.purple2  {background: #673AB7aa;}

.modal-header.empty {
    background: none;
    padding: 0;
    display: block;
}
.modal-header .head-meta {
    display: block;
    background-image: linear-gradient( 160deg, #0093E9 0%, #80D0C7 100%);
    color: white;
    padding: 10px;
}
.sidebar-link.cta.blue {
    background: #2196f3;
}
.sidebar-link.cta.blue a {
    color: white;
}
.sidebar-link.cta.blue a:hover,
.sidebar-link.cta.blue a:active,
.sidebar-link.cta.blue a:focus,
.sidebar-link.cta.blue a:visited {
    background: #138cec;
    color: white;
}
.sidebar-link.cta.light-blue {
    background: #00bcd4;
}
.sidebar-link.cta.light-blue a {
    color: white;
}
.sidebar-link.cta.light-blue a:hover,
.sidebar-link.cta.light-blue a:active,
.sidebar-link.cta.light-blue a:focus,
.sidebar-link.cta.light-blue a:visited {
    background: #0ec3da;
    color: white;
}
.sidebar-link.cta .icon,
.sidebar-link.cta .cue {
    opacity: .8;
}
.sidebar-link.cta.has-spinner .spinner-contain {
    transform: translate(0,-50%);
    right: 15px;
    left: unset;
    width: 17px;
    height: 17px;
    position: absolute;
    top: 44%;
}
.link-style {
    text-decoration: none;
    color: rgb(40 37 96);
}
.link-style:hover,
.link-style:active,
.link-style:focus,
.link-style:visited {
    text-decoration: none !important;
    outline: none !important;
    color: rgb(40 37 96);
}
.inline-buyer {
    height: 20px;
    position: relative;
    margin-right: 5px;
    top: -1px;
}
.lineup-dot {
    height: 30px;
    width: 30px;
    padding: 10px;
    border-radius: 50%;
    font-weight: 600;
    position: relative;
    line-height: 30px;
}
.lineup-dot span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.lineup-dot.blue {
    background: #00bcd4;
    color: white;
}
.lineup-highlight {background: #fff8e1;}
.inline-icon {
    width: 10px;
    height: 10px;
    position: relative;
    top: -1.5px;
    margin-right: 5px;
    opacity: .5;
}
.inline-icon-a {
    position: relative;
    width: 12px;
    height: 12px;
    top: -1px;
    opacity: .3;
}
/*map core*/
.map-nav-below-720 {display: none;}
.map-nav-above-720 {display: none;}
@media (max-width: 719px) {.map-nav-below-720 {display: block;}}
@media (min-width: 720px) {.map-nav-above-720 {display: block;}}


img.map-snippet {
    position: absolute;
    top: -20px;
    left: -40px;
    width: 100%;
}
@media (max-width: 1100px) {
    img.map-snippet {
        top: 0px;
        left: -50px;
        width: 130%;
    }
}
.card-title-2 {
    text-transform: uppercase;
    opacity: .3;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 600;
}
/*universal icon + text one-liner*/
.one-line {
    display: inline-block;
}
.one-line .thumb {
    position: relative;
    margin-right: 2px;
    top: -1.5px;
}
.one-line .thumb.s12 {
    height: 12px;
    top: -1px;
}
.one-line .thumb.s15 {
    height: 15px;
}
.one-line .thumb.s20 {
    height: 20px;
    top: -2px;
}
.one-line .thumb.s30 {
    height: 30px;
    top: -2px;
}
.one-line .thumb.round {
    border-radius: 100px;
}
.one-line .text {
    display: inline-block;
}
.one-line .thumb.circle-indicator {
    top: -1px;
}
.tag-priority {
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 600;
    line-height: 10px;
    opacity: .7;
    display: inline-block;
}
.tag-priority.emergency {
    background: #e91e63;
    color: rgb(255 255 255 / .8);
}
.tag-priority.priority-oss {
    background: #9c27b0;
    color: rgb(255 255 255 / .8);
}
.tag-priority.priority-vdni {
    background: #8bc34a;
    color: rgb(255 255 255 / .8);
}
td.lineup-dots {
    width: 30px;
}
.rounded-color {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 5px;
    position: relative;
    top: 2px;
    margin-right: 5px;
}
#lineup-table.hms-table tbody tr:hover {
    background: none;
}
.hms-table tbody tr.lineup-desktop-info.has-second-row td {
    border-bottom: 0 !important;
}
.hms-table tbody tr.lineup-desktop-tag td {
    border-top: 0 !important;
    padding-top: 0px;
}
.ship-filter-icon {
    margin-left: -5px;
    margin-right: -5px;
}
.ship-filter-icon .item {
    float: left;
    width: calc(50% - 10px);
    margin: 5px;
    background: rgb(0 0 0 / .02);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    position: relative;
    padding-left: 65px;
    font-size: 13px;
}
.ship-filter-icon .item:hover {
    background: rgb(0 0 0 / .05);
}
.ship-filter-icon .item.active {
    background: #ffecb3;
}
.ship-filter-icon .item.all-choices.active {
    background: #b2ebf2;
}
.ship-filter-icon .item:active {
    transform: scale(1.05) !important;
}
.ship-filter-icon .item img{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0,-50%);
    width: 45px;
    height: 45px;
}
.map-tabs a .sub {
    display: block;
    position: relative;
}
.map-tabs a .sub.head {
    font-size: 16px;
    opacity: .5;
    margin-top: -5px;
}
.pipeline-wrapper {
    overflow: hidden;
    border-radius: 10px;
    height: 79px;
}
.pipeline-wrapper .item {
    height: 100%;
    width: calc(100%/7);
    float: left;
    color: white;
    padding: 15px 20px;
    position: relative;
    background: #2196F3ee;
}
.pipeline-wrapper.vessel .item {
    background: #66bb6aee;
}
.pipeline-wrapper .item .big {
    font-size: 20px;
    font-weight: 600;
}
.pipeline-wrapper .item .meta {
    opacity: .5;
    font-size: 13px;
}
.pipeline-wrapper .item.title {
    background: white;
    color: #333;
    height: 100%;
    font-size: 16px;
    font-weight: 700;
}
.pipeline-wrapper .item .card-art {
    position: absolute;
    left: -25px;
    top: -50px;
    width: 120px;
    opacity: .3;
}
.pipeline-wrapper a.item {
    color: white;
}
.pipeline-wrapper a.item:hover,
.pipeline-wrapper a.item:active,
.pipeline-wrapper a.item:focus,
.pipeline-wrapper a.item:visited {
    text-decoration: none !important;
    outline: none !important;
    color: white;
}
.pipeline-wrapper a.item:hover {
    opacity: .9;
}

.pipeline-wrapper .item.blue1 {background: #90caf9;}
.pipeline-wrapper .item.blue2 {background: #64B5F6;}
.pipeline-wrapper .item.blue3 {background: #2196F3ee;}
.pipeline-wrapper .item.blue4 {background: #1976D2ee;}
.pipeline-wrapper .item.blue5 {background: #0a54a9ee;}

.pipeline-wrapper .item.green1 {background: #a5d6a7;}
.pipeline-wrapper .item.green2 {background: #81c784;}
.pipeline-wrapper .item.green3 {background: #66bb6aee;}
.pipeline-wrapper .item.green4 {background: #43a047ee;}
.pipeline-wrapper .item.green5 {background: #388e3cee;}

@media (max-width: 768px) {
    .pipeline-wrapper {
        height: unset;
    }
    .pipeline-wrapper .item {
        display: block;
        width: 50%;
        padding: 15px 20px 10px 20px;
    }
    .pipeline-wrapper .item .big {
        font-size: 16px;
        line-height: 16px;
    }
    .pipeline-wrapper .item .meta {
        font-size: 12px;
    }
    .pipeline-wrapper .item.title {
        padding: 20px 20px;
        width: 100%;
    }
}
/*layers*/
.ship-group .parent {z-index: 110;}
.ship-group .child {z-index: 105;}

.v-50 {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}
.ship-group {
    font-size: 12px;
    margin-bottom: 10px;
}
.ship-group .parent {
    position: relative;
    background: white;
    border-radius: 10px;
    padding: 15px 20px;
    cursor: pointer;
}
.ship-group .parent:hover {
    background: #f9f9f9;
}
.ship-group .parent .ship-icon {
    width: 35px;
    height: 35px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(0,-50%);
}
.ship-group .parent .ship-info {
    padding-left: 45px;
}
.ship-group .parent .name {
    color: rgb(40 37 96);
}
.ship-group .spinner-wrap {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    display: none;
}
.ship-group .spinner-border {
    width: 100%;
    height: 100%;
    opacity: .5;
}
.ship-group .child {
    display: none;
    padding: 10px 20px;
    padding-top: 30px;
    margin-top: -20px;
    background: #eceff1;
    position: relative;
    min-height: 50px;
    border-radius: 10px;
}
.ship-group.active .child {
    display: block;
}
.ship-group .child .item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #cecece;
}
.ship-group .child .item:first-child {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cecece;
}

.ship-group .child .ship-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(0,-50%);
}
.ship-group .child .ship-info {
    padding-left: 45px;
}
.ship-group .child .name {
    color: rgb(40 37 96);
}
.ship-group .options {
    padding-left: 45px;
}
.ship-group .options a {
    text-decoration: none;
    color: #aaa;
}
.ship-group .options a:hover {
    text-decoration: none !important;
    outline: none !important;
    color: #333;
}
@media (max-width: 768px) {
    .ship-group .options {
        padding-left: 0px;
    }
    .ship-group .options a {
        display: block;
    }
}

/*loading state */
.ship-group .child.loading .spinner-wrap {
    display: block;
}
.ship-group .child.loading .content {
    display: none;
}
.doc-meta {
    position: absolute;
    top: 25px;
    left: 35px;
}
.doc-meta .item {
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}
.doc-meta .bubble {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgb(255 255 255 / .2);
    transition: all 0.1s ease-in-out;
    position: relative;
}
.doc-meta .bubble .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    color: rgb(255 255 255 / .8);
}
.doc-meta .text {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translate(0, -50%);
    color: white;
    font-size: 10px;
    opacity: .9;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.doc-meta .item:hover .bubble {
    background: rgb(255 255 255 / .4);
}
.doc-meta .item:hover .text {
    opacity: 1;
}
.view-sprite {
    width: 110px;
    height: 311px;
    margin: 0 auto;
}
.view-sprite img {
    width: 100%;
}
.view-sea .meta {
    color: white;
    opacity: .3;
    line-height: 18px;
    font-size: 13px;
}
.ore-type {
    font-size: 18px;
    font-weight: 100;
    position: relative;
}
.ore-type img.label-ore {
    width: 35px;
    position: relative;
    top: -3px;
    margin-right: 2px;
}
.label-content {
    font-size: 13px;
}
.label-content .title {
    position: relative;
}
.label-content .title .source-qty {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}
.label-content .progress-line {
    height: 22px;
    background: #ececec;
    position: relative;
    border-radius: 50px;
    width: calc(100% - 40px);
}
.label-content .progress-line .line-achieved {
    height: 100%;
    background: #2196f3;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50px;
}
.progress-wrapper {
    position: relative;
}
.progress-percent {
    position: absolute;
    right: 0;
    top: 45%;
    transform: translate(0,-50%);
    opacity: .3;
}
.ore-type .initial-qty {
    position: absolute;
    right: 0;
    top: 45%;
    transform: translate(0,-50%);
    font-weight: 400;
}
.ore-type .mt {
    font-size: 10px;
    font-weight: 100;
    position: relative;
    top: -8px;
    margin-left: -2px;
    opacity: .8;
}
.label-content .head {
    font-size: 16px;
    font-weight: 600;
}
.label-content .wedge {
    border-bottom: 1px dashed #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
    height: 1px;
}
.doc-h3-wrapper {
    position: relative;
}
.doc-h3-wrapper .hms-btn {
    font-size: 13px;
}


a.row-img:hover {
    transform: scale(1.05) !important;
}
.multi-filter {
    margin: 0 -3px;
}
.multi-filter a {
    white-space: nowrap;
    margin: 3px;
    padding: 5px 8px;
    border-radius: 5px;
    background: rgb(0 0 0 / .02);
    display: inline-block;
    color: #999;
    transition: all 0.1s ease-in-out;
}
.multi-filter a:active {
    transform: scale(1.1) !important;
}
.multi-filter a:hover {
    background: rgb(0 0 0 / .05);
}
.multi-filter a.active {
    background: #ffecb3;
    color: inherit;
}
.multi-filter a.all-choices.active {
    background: #b2ebf2;
    color: inherit;
}
.row-tray {
    display: none;
}
tr.active .row-tray {
    display: block;
}
.row-tray-opener {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #18b788;
    position: relative;
    border-radius: 50%;
    top: 5px;
}
.row-tray-opener .icon {
    color: white;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
tr.active .row-tray-opener {
    transform: rotate(180deg);
}
.hms-card.table-full {
    padding: 0;
}
tr.row-color.row-yellow {background: #fff8e1;}
.hms-table tbody tr.row-color.row-yellow:hover {background: #fff8e1;}
tr.row-color.row-green {background: #e8f5e9;}
.hms-table tbody tr.row-color.row-green:hover {background: #e8f5e9;}
tr.row-color.row-red {background: #fce4ec;}
.hms-table tbody tr.row-color.row-red:hover {background: #fce4ec;}
tr.row-color.row-blue {background: #e1f5fe;}
.hms-table tbody tr.row-color.row-blue:hover {background: #e1f5fe;}
tr.row-color.row-purple {background: #e8eaf6;}
.hms-table tbody tr.row-color.row-purple:hover {background: #e8eaf6;}
.service-header {
    padding: 20px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.service-header.water {
    background: linear-gradient(90deg, #F5F9FD 0%, #80A7D8 100%);
}
.service-header.fuel {
    background: linear-gradient(90deg, #FBE09A 0%, #E4B640 100%);
}
.service-header .text {
    font-size: 1.75rem;
    font-weight: 500;
}
.service-header .meta {
    opacity: .5;
    margin-top: -2px;
}
.service-header .sprite {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translate(0,-50%);
    height: 200px;
    width: 200px;
}
.hms-radio {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 12px 15px 5px 15px;
    background: rgb(0 0 0 / .03);
    padding: 12px 15px !important;
}
.hms-radio:hover {
    background: rgb(0 0 0 / .05);
}
.hms-radio {transition: all 0.1s ease-in-out;}
.hms-radio:active {transform: scale(1.05) !important;}

.hms-radio input {
    position: relative;
    top: 2px;
    margin-right: 5px;
}
.toggle-col {
    display: none;
}
.toggle-col.active {
    display: table-cell;
}
.row-photos-wrapper {
}
.row-photos {
    width: 14px;
    position: relative;
    top: -1px;
}
.more-section {display: none;}
.more-section.active {display: block;}
.trans-achieve-bar {
    height: 18px;
    background: #ccc;
    float: left;
    width: 75%;
    position: relative;
    min-width: 60px;
}
.trans-achieve-bar .trans-achieved {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #4fc3f7;
}
.trans-achieve-bar .trans-text {
    font-size: 11px;
    color: #444;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.trans-child {
    display: none;
}
.trans-child.active {
    display: table-row;
}
.row-spin-container {
    width: 16px;
    height: 16px;
}
.row-spin-container .spinner-border {
    width: 100%;
    height: 100%;
    opacity: .3;
    color: #444;
}
.trans-expand-icon {
    width: 16px;
    height: 16px;
    color: #444;
    opacity: .3;
}
.expand-col {
    width: 35px;
    text-align: center;
    position: relative;
}
.expand-col a {
    position: relative;
    top: -2px;
}

.lineup-num-col {
    width: 20px;
    text-align: center;
    position: relative;
}
.lineup-num-col .numerical {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00bcd4;
    color: white;
    font-size: 10px;
    line-height: 20px;
    font-weight: 600;
    transition: all 0.1s ease-in-out;
}
.lineup-num-col .numerical:hover {
    transform: scale(1.2);
}
.send-notif {
    width: 16px;
    height: 16px;
    position: relative;
    top: -2px;
    transition: all 0.1s ease-in-out;
}
.send-notif:hover {
    transform: scale(1.2);
}
.send-notif:active {
    transform: scale(1.5);
}
.tbl-head-icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: -2px;
    opacity: .3;
}
.tbl-head-icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: -2px;
    opacity: .2;
}
.tbl-head-icon.clickable {
    cursor: pointer;
}
.tbl-head-icon.clickable:hover {
    transform: scale(1.2);
}
.tbl-head-icon.clickable:active {
    transform: scale(1.5);
}
.tbl-header {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 10px;
}
.tbl-header.font2 {
    font-size: 12px;
    letter-spacing: unset;
    text-transform: unset;
}
.snippet-photo {
    width: 20%;
    height: 80px;
    float: left;
}
.file-attach .name {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}
.file-attach .item {
    position: relative;
    font-size: 12px;
}
.file-attach .item .icon {
    width: 12px;
    height: 12px;
    position: relative;
    opacity: .5;
    top: -2px;
    margin-right: 5px;
}
.invoice-table {
    font-size: 12px;
}
.col-ttd {
    height: 80px;
}
.inv-top .left {
    width: 250px;
}
.inv-top .left img {
    width: 250px;
}
.inv-top .mid {
    width: 350px;
}
.inv-top .right {
}
.inv-title {
    font-size: 36px;
    font-weight: 700;
    margin-top: -15px;
    display: block;
    margin-bottom: -20px;
}
.no-border td {
    padding: 0 !important;
    margin: 0 !important;
}
.inv-table-meta td {
    width: 25%;
}
/*layers*/
.doc-slide-wrapper {z-index: 150;}
.slides-overlay {z-index: 160;}
.doc-slide-controls,
.hms-slide-container .caption {z-index: 170;}
.doc-search-wrapper {z-index: 200;}

.doc-top {
    height: 500px;
    font-size: 13px;
    position: relative;
}
.doc-search-wrapper {
    position: absolute;
    left: 40px;
    bottom: 50px;
    width: calc(100% - 80px);
    opacity: 1;
    pointer-events: unset;
}
.doc-search {
    background: white;
    border-radius: 10px;
    padding: 10px;
}
.top-input {
    display: block;
    width: 100%;
    border: 0px;
}
.top-input:focus {
    outline: none;
}
.top-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */color: #ccc;opacity: 1; /* Firefox */}
.top-input:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #ccc;}
.top-input::-ms-input-placeholder { /* Microsoft Edge */color: #ccc;}
.top-input-group {
    padding: 7px 0;
    padding-left: 40px;
    position: relative;
}
.top-input-group .left {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0,-50%);
}
.top-input-group .left .icon {
    width: 18px;
    height: 18px;
    opacity: .5;
    position: relative;
    top: -1px;
}
.input-col:after {
    content: " ";
    height: 22px;
    width: 2px;
    background: #ececec;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}
.input-col.last:after {
    content: none;
}
.top-search-btn {
    padding: 6px 22px;
}

.doc-slide-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.doc-slide-wrapper .slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease-in-out;
}
.doc-slide-wrapper .slide-item.active {
    opacity: 1;
    pointer-events: unset;
}
.doc-slide-controls {
    
}
.slides-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0 0 0 / .5) 0%, rgba(0 0 0 / 0) 50%);
}

.doc-slide-controls {
    position: absolute;
    bottom: 120px;
    left: 40px;
}
.doc-slide-controls .caption {
    width: 400px;
    position: relative;
}
.doc-slide-controls .caption .title {
    font-size: 26px;
    color: white;
    font-weight: 600;
    opacity: 0;
    line-height: 26px;
    position: absolute;
    bottom: 10px;
    left: 0;
}
.doc-slide-controls .caption .title.active {
    opacity: 1;
    transition: all 0.15s ease-in-out;
}
.doc-slide-controls .caption .title .desc {
    font-size: 12px;
}
.slide-btn {
    background: #20c997;
    display: inline-block;
    padding: 7px 13px;
    border-radius: 5px;
    font-size: 11px;
    COLOR: WHITE !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.15s ease-in-out;
}
.slide-btn:hover {
    background: #07b581;
    transform: scale(1.03);
}

/*modal slides*/
.hms-slide-modal .modal-content {
    border-radius: 0;
    border: 0;
}
.hms-slide-modal .modal-body {
    padding: 0;
}
.hms-slide-img {
    width: 100%;
}
.hms-slide-container {
    position: relative;
}
.hms-slide-container .caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.hms-slide-container .caption .title {
    font-size: 26px;
    color: white;
    font-weight: 600;
    line-height: 26px;
}
.hms-slide-container .caption .meta {
    font-size: 12px;
    color: white;
}
.hms-slide-container .slides-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0 0 0 / .5) 0%, rgba(0 0 0 / 0) 50%);
}
.hms-slide-modal .slide-controller {

}
.hms-slide-modal .slide-controller .thumb {
    height: 50px;
    width: 50px;
    overflow: hidden;
    cursor: pointer;
    float: left;
}

@media (max-width: 992px) {
    .doc-slide-controls {
        bottom: 260px;
    }
}

@media (max-width: 768px) {
    .doc-search-wrapper {
        left: 20px;
        bottom: 30px;
        width: calc(100% - 40px);
    }
    .doc-slide-controls {
        width: 100%;
        bottom: 260px;
        left: 20px;
    }
    .doc-slide-controls .caption {
        width: calc(100% - 40px);
    }
    .input-col:after {
        content: none;
    }
    .top-search-btn {
        margin-top: 10px;
    }
}
.timeline-snap {
    position: absolute;
    top: 40%;
    right: 0;
    transform: translate(0,-50%);
    height: 35px;
    width: 35px;
    background: #eceff1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
.timeline-snap .icon {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 16px;
    width: 16px;
    opacity: .5;
}
.timeline-snap:hover {
    opacity: .8;
}
.timeline-snap:active {
    transform: translate(0,-50%) scale(1.05) !important;
}
.dash-wrapper {
    margin-right: -10px;
    margin-left: -10px;
}
.dash-item {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 10px;
    display: block;
    margin-bottom: 30px;
}
.dash-circle {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    margin: 0 auto;
    transition: all 0.1s ease-in-out;
    display: block;
    background: #ccc;
    position: relative;
}
.dash-circle img {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: .7;
}
.dash-circle.blue {background: #00bcd4;}
.dash-circle.blue1 {background: #455a64;}
.dash-circle.blue2 {background: #03a9f4;}
.dash-circle.blue3 {background: #2196f3;}
.dash-circle.blue4 {background: #3f51b5;}
.dash-circle.blue5 {background: #673ab7;}
.dash-circle.blue6 {background: #607d8b;}
.dash-circle.blue7 {background: #1976d2;}
.dash-meta {
    text-align: center;
    font-size: 10px;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}
.dash-item:hover .dash-circle {
    transform: scale(1.05);
}
.dash-item .add-spinner .spinner-border {
    opacity: .7;
    color: white;
}
@media (max-width: 769px) {
    .dash-item {
        width: calc(20% - 20px);
    }
}
@media (max-width: 520px) {
    .dash-item {
        width: calc(25% - 20px);
    }
}
th.sortable {
    position: relative;
    cursor: pointer;
    white-space: nowrap!important;
}
th.sortable:hover {
    color: rgb(40 37 96);
}
th.sortable.in-filter {
    color: rgb(40 37 96);
}
th.sortable.in-filter:after {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    margin-left: 10px;
    content:'';
    position: relative;
    top: -1px;
}
th.sortable.in-filter.desc:after {
    border-top: 4px solid #007bff;
    border-right: 4px solid transparent;
    border-bottom: 0 dotted;
    border-left: 4px solid transparent;
}
th.sortable.in-filter.asc:after {
    border-bottom: 4px solid #007bff;
    border-right: 4px solid transparent;
    border-top: 0 dotted;
    border-left: 4px solid transparent;
    top: -2px;
}
.hms-table.permission-tbl td.permission-td {
    padding: 0px;
}
.permission-tbl-item {
    display: block;
    cursor: pointer;
    margin-bottom: 0;
    padding: 10px 5px;
}
.permission-tbl-item input {
    position: relative;
    top: 2px;
    margin-right: 10px;
}

.real-time-dot {
     width: 11px;
     height: 11px;
     margin-right: 3px;
     border-radius: 50%;
     background: #00bcd4;
     display: inline-block;
     position: relative;
     top: 2px;
}
.blink-1 {
     -webkit-animation: blink-1 2s infinite both;
     animation: blink-1 2s infinite both;
}
 @-webkit-keyframes blink-1 {
     0%,
     50%,
     100% {
         opacity: 1;
     }
     25%,
     75% {
         opacity: 0.5;
     }
 }
 @keyframes blink-1 {
     0%,
     50%,
     100% {
         opacity: 1;
     }
     25%,
     75% {
         opacity: 0.5;
     }
 }



.dashboard-hero {
 background: url(../img/aerials/4425125.jpg) no-repeat center;
 background-size: cover;
 height: 500px; 
 position: relative;
}
.hero-welcome {
 background: #00bcd4;
 border-radius: 10px;
 padding: 25px 70px 25px 30px;
 color: white;
 position: absolute;
 bottom: 50px;
 left: 15px;
}
.hero-welcome h1 {
 padding: 0;
 margin: 0;
 line-height: 30px;
 font-size: 30px;
}
.hero-welcome .meta .icon {
 width: 14px;
 height: 14px;
 opacity: .5;
 position: relative;
 top: -2px;
 margin-right: 5px;
}

.hero-welcome .meta a {
 color: white !important;
 margin-right: 20px;
}
.hero-welcome .meta a:last-child {
 margin-right: 0px;
}
.hero-welcome .meta a:active,
.hero-welcome .meta a:focus,
.hero-welcome .meta a:visited {
 color: white !important;
}
.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(180deg, rgba(0 0 0 / .4) 0%, rgba(0 0 0 / 0) 50%);
 background: rgba(0 0 0 / .1);
}
.hero-description {
 position: absolute;
 top: 20px;
 left: 15px;
 color: white;
 width: 500px;
}
.hero-description h1 {
 padding: 0;
 margin: 0;
 line-height: 18px;
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 8px;
}
.hero-description .meta {
}
.hero-tabs {
 position: absolute;
 bottom: 0;
 left: 10px;
}
.hero-tabs .dropdown {
 display: inline;
}
.hero-tab-item {
 display: block;
 float: left;
 background: rgb(242 242 242 / .7);
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 margin-right: 6px;
 padding: 12px 26px 8px 26px;
 color: #333;
 transition: all 0.1s ease-in-out;
 font-weight: 600;
}
.hero-tab-item.active {
 background: rgb(242 242 242 / 1);
}
.hero-tab-item:hover {
 background: rgb(242 242 242 / 1);
}
.hero-tab-item.special {
 background: #00bcd4;
 color: white;
}
.hero-tab-item:active,
.hero-tab-item:focus,
.hero-tab-item:visited {
 color: #333;
}
.hero-tab-item.special:active,
.hero-tab-item.special:focus,
.hero-tab-item.special:visited {
 color: white;
}
.hero-tabs .tab-helper {
 width: 14px;
 height: 14px;
 opacity: .7;
 position: relative;
 top: -1px;
 margin-left: 3px;
}

.figma-card {
 border-radius: 10px;
 background: #fff;
 position: relative;
 /*overflow: hidden;*/
}
.figma-card.grey {background: #E9E9E9;}
.figma-card.fh-84 .content {height: 84px;}
.figma-card.fh-100 .content {height: 100px;}
.figma-card.fh-300 .content {height: 300px;}
.figma-card.fh-500 .content {height: 500px;}
.figma-card .head {
 border-bottom: 1px solid #eaeaea;
 padding: 13px 15px;
 position: relative;
 padding-left: 43px
}
.figma-card .head.no-icon {
 padding-left: 20px
}
.figma-card .head.no-bb {border-bottom: 0px;}
.figma-card .head h1 {
 font-size: 13px;
 line-height: 15px;
 margin: 0;
 padding: 0;
 font-weight: 700;
}
.figma-card .head h1 span {
 color: #017EFA;
}
.figma-card .head .icon {
 width: 32px;
 height: 32px;
 position: absolute;
 left: 20px;
 top: 50%;
 transform: translate(0,-50%);
}
.figma-card .head .icon-alt {
 width: 14px;
 height: 14px;
 position: absolute;
 left: 20px;
 top: 49%;
 transform: translate(0,-50%);
}
.figma-card .content {
 padding: 10px;
 position: relative;
 overflow-y: auto;
}
.figma-card .card-loader {
 display: none;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 30px;
 width: 30px;
}
.figma-card .card-loader .spinner-border {
 opacity: .3;
 width: 100%;
 height: 100%;
}
.figma-card.loading .card-loader {display: block;}
.figma-card.loading .body {display: none;}

.counter-name {
 font-size: 11px;
 color: #aaa;
}
.counter-val {
 font-size: 22px;
 line-height: 22px;
 font-weight: 700;
 padding: 0 0 5px 0;
 position: relative;
}
.counter-val .cue {
 width: 18px;
 height: 18px;
 float: left;
 margin-right: 5px;
 border-radius: 50%;
 position: relative;
 margin-top: 3px;
}
.counter-val .cue.yellow {background: #FFC700;}
.counter-val .cue.blue {background: #00bcd4;}
.counter-val .cue.red {background: #f1416c;}
.counter-val .cue.green {background: #50cd89;}
.counter-val .cue .icon {
 width: 10px;
 height: 10px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
.counter-val .cue .icon.large {
 width: 26px;
 height: 26px;
}
.counter-meta {
 font-size: 11px;
 font-weight: 400;
 line-height: 14px;
 color: #333;
}
.counter-meta span {
 color: #2196f3;
 font-weight: 700;
}

.chart-horizontal .left {
 width: 120px;
 height: 100%;
 float: left;
 margin-top: 5px;
}
.chart-horizontal .left > div {
 height: 32px;
 line-height: 32px;
 position: relative;
 margin-bottom: 11.5px;
}
.chart-horizontal .left > div span {
 position: absolute;
 text-align: right;
 top: 50%;
 right: 15px;
 transform: translate(0,-50%);
 opacity: .3;
}

.chart-horizontal .right {
 float: left;
}
.chart-horizontal .right .chart {
 width: 100% !important;
 height: 260px !important;
}


.manual-legend {
 position: absolute;
 top: 20px;
 left: 20px;
}
.manual-legend .m-label {
 float: left;
 margin-right: 10px;
}
.manual-legend .m-label span {
 width: 13px;
 height: 13px;
 float: left;
 margin-right: 5px;
 position: relative;
 margin-top: 3px;
}
.manual-legend .m-label.blue span {background: #00bcd4;}
.manual-legend .m-label.red span {background: #F2AFC2;}


.stacked-legend {
 padding-left: 30px;
}
.stacked-legend span {
 width: 13px;
 height: 13px;
 float: left;
 margin-right: 5px;
 position: relative;
 margin-top: 3px;
}
.stacked-legend.blue span {background: #00bcd4;}
.stacked-legend.red span {background: #F2AFC2;}
.stacked-legend.green span {background: #97C1A9cc;}
.stacked-legend.grey span {background: #E9E9E9;}

.figma-piers-matrix .item {
 float: left;
 width: 27px;
 height: 27px;
 background: #E9E9E9;
 border: 1px solid #fff;
 cursor: pointer;
 align-items: center;
 justify-content: center;
 display: flex;
}
.figma-piers-matrix .item .val {
 opacity: .1;
 font-size: 11px;
}
.figma-piers-matrix .item:hover .val {
 opacity: 1;
}
.figma-piers-matrix .item.blue {background: #00bcd4;}
.figma-piers-matrix .item.red {background: #F2AFC2;}
.figma-piers-matrix .item.green {background: #97C1A9cc;}
.figma-piers-matrix .item.grey {background: #E9E9E9;}

.pie-legend .item span {
 width: 13px;
 height: 13px;
 border-radius: 50%;
 float: left;
 margin-right: 5px;
 position: relative;
 margin-top: 3px;
}
.pie-legend .item.blue span {background: #51CBFF;}
.pie-legend .item.red span {background: #F2AFC2;}
.pie-legend .item.grey span {background: #E9E9E9;}

.dashboard-tab {
 display: none;
 min-height: 1000px;
}
.dashboard-tab.active {
 display: block;
}
.figma-search .select2-container--default .select2-selection--single {border: 0px;}
.card-drop {
 position: absolute;
 height: 250px;
 right: -150px;
 bottom: -20px;
 opacity: .7;
}
.inbox-wrap {

}
.inbox-wrap .left,
.inbox-wrap .right {
 overflow: auto;
 max-height: 450px;
}
.inbox-wrap .left {
 float: left;
 width: 350px;
 border-right: 1px solid #DADADA;
 padding-bottom: 500px;
}
.inbox-wrap .right {
 float: left;
 width: calc(100% - 350px);
}
.msg-item {
 position: relative;
 border-bottom: 1px solid #eee;
 padding: 13px 10px;
 padding-left: 75px;
 cursor: pointer;
}
.msg-item.active,
.msg-item:hover {
 background: #F6F6F6;
}
.msg-item .thumb {
 width: 50px;
 height: 50px;
 position: absolute;
 top: 50%;
 left: 10px;
 transform: translate(0,-50%);
}
.msg-item .counter {
 position: absolute;
 top: 50%;
 right: 15px;
 transform: translate(0,-50%);
 font-size: 14px;
 font-weight: 500;
 text-align: right;
}
.msg-item .meta {
 font-size: 11px;
}
.msg-item .info .icon {
 width: 12px;
 height: 12px;
 position: relative;
 top: -1px;
 margin-right: 5px;
}
.msg-content-item {
 padding: 20px;
}
.msg-content-item {display: none;}
.msg-content-item.active {display: block;}

.msg-item .spin-wrap {
 position: absolute;
 width: 15px;
 height: 15px;
 right: 12px;
 top: 50%;
 transform: translate(0,-50%);
}
.msg-item .spin-wrap .spinner-border {
 width: 100%;
 height: 100%;
 opacity: .3;
}
.msg-item .spin-wrap {display: none;}
.msg-item.loading .spin-wrap {display: block;}
.msg-item.loading .counter {display: none;}

.msg-timeline {
 padding-left: 30px;
 position: relative;
 padding-bottom: 20px;
}
.msg-timeline:after {
 content: "";
 width: 16px;
 height: 16px;
 background: #ddd;
 border-radius: 50%;
 position: absolute;
 top: 2px;
 left: 0;
}
.msg-timeline.current:after {
 background: #017EFA;
}
.msg-timeline:before {
 content: "";
 width: 1px;
 height: 100%;
 border-right: 1px dashed #ddd;
 position: absolute;
 top: 2px;
 left: 7px;
}
.msg-timeline .date {
 font-size: 14px;
 font-weight: 500;
}
.photo-wrap {
 margin: 0 -10px;
 margin-top: 20px;
}
.photo-item {
 margin: 0 10px;
 float: left;
 margin-bottom: 15px;
 cursor: pointer;
}
.photo-thumb {
 height: 110px;
 width: 110px;
 border-radius: 10px;
 position: relative;
}
.photo-thumb:after {
 content: "";
 width: 100%;
 height: 100%;
 background: rgb(255 255 255 / 1);
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 transition: all 0.1s ease-in-out;
}
.photo-item:hover > .photo-thumb:after {
 opacity: .5;
}
.photo-item .meta {
 font-size: 11px;
 margin-top: 5px;
}

.no-scrollbar::-webkit-scrollbar,
.row.ms-scroll::-webkit-scrollbar,
.figma-card .content::-webkit-scrollbar {display: none;}
.no-scrollbar,
.row.ms-scroll,
.figma-card .content {-ms-overflow-style: none;  /* IE and Edge */scrollbar-width: none;  /* Firefox */}

@media (max-width: 576px) {
 .hero-welcome {
     left: 50%;
     transform: translate(-50%, 0);
     width: 95%;
 }
 .figma-card.fh-300 .content {height: unset;}
 .inbox-wrap .left {
     width: 100%;
 }
 .inbox-wrap .right {
     font-display: none;
 }
}
@media (max-width: 992px) {
 
}
@media (max-width: 1200px) {

 .row.ms-until-1200 {display: block;overflow-x: auto;white-space: nowrap;}
 .row.ms-until-1200 > div {display: inline-block;}

 .chart-horizontal .left {width: 130px;}
 .chart-horizontal .right {width: calc(100% - 130px);}
}
.figma-rounds {
 display: block;
 overflow-x: auto;
 white-space: nowrap;
 margin-top: -30px;
}
.roundx-item {
 padding: 13px 22px 15px 30px;
 background: white;
 margin-right: 5px;
 display: inline-block;
 border-radius: 5px;
 line-height: 12px;
 padding-left: 46px;
 position: relative;
 cursor: pointer;
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 700;
}
.roundx-item.active {
 background: #282560;
 color: white;
}
.roundx-item:hover {
}
.roundx-item:active {
    transform: scale(1.07);
}
.roundx-item {transition: all 0.1s ease-in-out;}
/*.roundx-item:hover {transform: scale(1.03) !important;}*/
/*.roundx-item:active {transform: scale(1.05) !important;}*/
.roundx-item .icon {
 position: absolute;
 width: 38px;
 height: 38px;
 left: 5px;
 top: 50%;
 transform: translate(0,-50%);
}
.roundx-item .icon.light {
 display: none;
}
.roundx-item.active .icon.light {
 display: block;
 opacity: .7;
}
.roundx-item.active .icon.dark {
 display: none;
}


.btn-option {
    padding-left: 18px;
    padding-right: 18px;
}
.btn-option .icon {
    width: 14px;
    height: 14px;
    position: relative;
    opacity: .3;
    margin-right: 5px;
    top: 0;
}
.public-card {
    background: white;
    border-radius: 10px;
    border: 1px solid #ececec;
    position: relative;
    overflow: hidden;
}
.public-card .header img {
    width: 100%;
}
.public-card .content {
    padding: 15px;
}
.personal-shortcuts-wrapper {
    margin: 0 -5px;
}
a.personal-shortcuts {
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 8px;
    border: 1px solid #ececec;
    background: white;
    margin: 5px;
    display: block;
    cursor: pointer;
    padding: 10px;
    color: #333;
    position: relative;
    transition: all 0.1s ease-in-out;
}
.personal-shortcuts-wrapper.compact .personal-shortcuts {
    width: 130px;
    height: 130px;
}
.personal-shortcuts-wrapper.compact .personal-shortcuts .title {
    font-size: 13px;
}
.personal-shortcuts-wrapper.compact .personal-shortcuts .icon.type-2 {
    width: 30px;
    height: 30px;
}
.personal-shortcuts:hover {
    background: #fafafa;
}
.personal-shortcuts:active {
    transform: scale(1.02) !important;
}
.personal-shortcuts .title {
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}
.personal-shortcuts .meta {
    opacity: .5;
}
.personal-shortcuts .spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 15px;
    bottom: 15px;
    opacity: .3;
}
.personal-shortcuts .spinner div {
    width: 100%;
    height: 100%;
}
.personal-shortcuts .icon {
    position: absolute;
    width: 70px;
    height: 70px;
    bottom: -5px;
    right: 0px;
    transition: all 0.1s ease-in-out;
}
.personal-shortcuts .icon.type-2 {
    width: 36px;
    height: 36px;
    bottom: 10px;
    right: 10px;
}
.personal-shortcuts:hover .icon {
    transform: scale(1.1) !important;
}
.personal-shortcuts .counter {
    font-size: 26px;
    position: absolute;
    right: 15px;
    bottom: 15px;
}
.personal-shortcuts .spinner {display: none;}
.personal-shortcuts.loading .spinner {display: block;}
.personal-shortcuts.loading .counter,
.personal-shortcuts.loading .icon {display: none;}
@media (max-width: 450px) {
    a.personal-shortcuts {
        width: 160px;
        height: 160px;
    }
}

.form-about {
    background: #333;
    color: white;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 10px;
    padding: 8px 15px;
}
.sgx-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
}
.sgx-title {
    background: white;
    padding: 18px 15px 14px 15px;
    border-bottom: 1px solid #ececec;
}
.sgx-title h1 {
    font-size: 13px;
    padding: 0;
    margin: 0;
    margin-bottom: 2px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0px;
}
.sgx-title p {
    margin: 0;
    font-size: 13px;
    opacity: .3;
}
.sgx-table .options {
    font-size: 12px;
    background: white;
    padding: 8px 15px;
    border-bottom: 1px solid #ececec;
    overflow: auto;
    white-space: nowrap;
}
.sgx-table .options a {color: #333;}
.sgx-table .options a.active {color: #007bff;}
.sgx-table .paginates {
    font-size: 12px;
    background: #fafafa;
    padding: 6px 15px;
    border-top: 1px solid #ececec;
}
.sgx-table .options.fh-35 {
    height: 35px;
    line-height: 35px;
    padding: 0;
    padding-left: 15px;
}
.sgx-table .options .item {
    font-size: 11px;
    display: inline-block;
    margin-right: 15px;
    font-weight: 600;
}
.sgx-table .options.alt .item {
    font-weight: 400;
    font-style: italic;
}
.sgx-table .options .item:first-child {
    margin-left: -2px;
}
.sgx-table .options .item:hover {
    color: #007bff;
}
.sgx-table .options .item .icon {
    height: 13px;
    width: 13px;
    position: relative;
    top: -1.5px;
    margin-right: 5px;
}
.sgx-table .info {
    font-size: 11px;
    background: white;
    padding: 6px 15px;
    border-bottom: 1px solid #ececec;
}
.sgx-table .info.alt {
    color: #333;
}
.sgx-table .table {
    font-size: 11px;
    background: white;
    margin-bottom: 0;
}
.sgx-table .table th,
.sgx-table .table td {
    border: 0px;
    padding: 12px 10px;
    border-right: 1px solid #eee;
    vertical-align: middle;
}
.sgx-table .table th:last-child,
.sgx-table .table td:last-child {
    border-right: 0px;
}
.sgx-table .table th {
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    background: #f3f3f3;
}
.sgx-table .table tr.alt th {
    background: #333;
    color: white;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 9px;
    padding: 8px;
    padding-left: 15px;
}
.sgx-table .table th:first-child,
.sgx-table .table td:first-child {padding-left: 15px;}

.sgx-table .table:not(.no-alternate) tr:nth-child(even) {background: #F7F8F8;}
.sgx-table .table:not(.no-alternate) tr:nth-child(odd) {background: #fff;}

.sgx-table .table.hoverable tr:target td,
.sgx-table .table.hoverable tr:focus td,
.sgx-table .table.hoverable tr:active td,
.sgx-table .table.hoverable tr:hover td {background: #f1f1f1;}

.sgx-table .table.td-bordered td {border-bottom: 1px solid #ececec;}

.table-wrapper {
    overflow: auto;
    white-space: nowrap;
}
.table-wrapper.white-space-normal {
    white-space: normal;
}
th.nowrap,
td.nowrap {
    white-space: nowrap;
}
.boxed {
    margin: 15px;
}
.boxed.shadow {
    box-shadow: 0px 0px 10px #ddd;
}

.sgx-form {
    background: white;
}
.sgx-form.boxed {
    margin: 15px;
}
.sgx-form.boxed.no-bg {
    background: none;
}
.sgx-form .form-section {
    padding: 15px;
}
.sgx-container {
    background: white;
}
.padding-15 {
    padding: 15px;
}

.sgx-w-10 {width: 10px;}
.sgx-w-20 {width: 20px;}
.sgx-w-30 {width: 30px;}
.sgx-w-40 {width: 40px;}
.sgx-w-50 {width: 50px;}
.sgx-w-60 {width: 60px;}
.sgx-w-70 {width: 70px;}
.sgx-w-80 {width: 80px;}
.sgx-w-90 {width: 90px;}
.sgx-w-100 {width: 100px;}
.sgx-w-110 {width: 110px;}
.sgx-w-120 {width: 120px;}
.sgx-w-130 {width: 130px;}
.sgx-w-140 {width: 140px;}
.sgx-w-150 {width: 150px;}
.sgx-w-160 {width: 160px;}
.sgx-w-170 {width: 170px;}
.sgx-w-180 {width: 180px;}
.sgx-w-190 {width: 190px;}
.sgx-w-200 {width: 200px;}
.sgx-w-210 {width: 210px;}
.sgx-w-220 {width: 220px;}
.sgx-w-230 {width: 230px;}
.sgx-w-240 {width: 240px;}
.sgx-w-250 {width: 250px;}
.sgx-w-260 {width: 260px;}
.sgx-w-270 {width: 270px;}
.sgx-w-280 {width: 280px;}
.sgx-w-290 {width: 290px;}
.sgx-w-300 {width: 300px;}
.sgx-w-400 {width: 400px;}
.sgx-w-500 {width: 500px;}

.sgx-w-50 .select2-selection {width: 50px;}
.sgx-w-60 .select2-selection {width: 60px;}
.sgx-w-70 .select2-selection {width: 70px;}
.sgx-w-80 .select2-selection {width: 80px;}
.sgx-w-90 .select2-selection {width: 90px;}
.sgx-w-100 .select2-selection {width: 100px;}
.sgx-w-110 .select2-selection {width: 110px;}
.sgx-w-120 .select2-selection {width: 120px;}
.sgx-w-130 .select2-selection {width: 130px;}
.sgx-w-140 .select2-selection {width: 140px;}
.sgx-w-150 .select2-selection {width: 150px;}
.sgx-w-160 .select2-selection {width: 160px;}
.sgx-w-170 .select2-selection {width: 170px;}
.sgx-w-180 .select2-selection {width: 180px;}
.sgx-w-190 .select2-selection {width: 190px;}
.sgx-w-200 .select2-selection {width: 200px;}
.sgx-w-210 .select2-selection {width: 210px;}
.sgx-w-220 .select2-selection {width: 220px;}
.sgx-w-230 .select2-selection {width: 230px;}
.sgx-w-240 .select2-selection {width: 240px;}
.sgx-w-250 .select2-selection {width: 250px;}
.sgx-w-260 .select2-selection {width: 260px;}
.sgx-w-270 .select2-selection {width: 270px;}
.sgx-w-280 .select2-selection {width: 280px;}
.sgx-w-290 .select2-selection {width: 290px;}
.sgx-w-300 .select2-selection {width: 300px;}
.sgx-w-400 .select2-selection {width: 400px;}
.sgx-w-500 .select2-selection {width: 500px;}

.sgx-h-50 {height: 50px;}
.sgx-h-60 {height: 60px;}
.sgx-h-70 {height: 70px;}
.sgx-h-80 {height: 80px;}
.sgx-h-90 {height: 90px;}
.sgx-h-100 {height: 100px;}
.sgx-h-150 {height: 150px;}
.sgx-h-200 {height: 200px;}
.sgx-h-300 {height: 300px;}
.sgx-h-400 {height: 400px;}
.sgx-h-500 {height: 500px;}

.sgx-table-check {

}
.sgx-table-check label {
    display: block;
    cursor: pointer;
    margin-bottom: 0;
}
.sgx-table-check input {
    position: relative;
    top: 2px;
    margin-right: 10px;
}

.sgx-row {
    background: white;
    padding: 15px;
}
.sgx-tabs {
    font-size: 12px;
    background: white;
    border-bottom: 1px solid #ececec;
    overflow: auto;
    white-space: nowrap;
}
.sgx-tabs a.subnav {
    display: inline-block;
    padding: 6px 15px;
    border-right: 1px solid #ececec;
    margin-left: -5px;
    border-left: 1px solid #ececec;
    background: white;
    font-size: 11px;
}
.sgx-tabs .subnav:first-child {
    margin-left: 0px;
    border-left: 0;
}
.sgx-tabs a.subnav:hover {
    background: #fafafa;
}
.sgx-tabs a.subnav.active {
    background: #f5f5f5;
}
.sgx-tabs a.subnav .icon {
    height: 13px;
    width: 13px;
    opacity: .5;
    position: relative;
    top: -1px;
    margin-right: 5px;
}
.sgx-title .separate {
    width: 14px;
    height: 14px;
    opacity: .3;
    position: relative;
    top: -1px;
}
.sgx-tabs .spinner {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 3px;
    position: relative;
    top: -2px;
    display: none;
}
.sgx-tabs .spinner .spinner-border {
    width: 100%;
    height: 100%;
    border: 0.2em solid #ccc;
    border-right-color: transparent;
}
.sgx-tabs a.loading .icon {display: none;}
.sgx-tabs a.loading .spinner {display: inline-block;}

.sgx-pane {display: none;}
.sgx-pane.active {display: block;}

.sgx-activity-wrapper {
    background: white;
    padding: 15px;
}

.sgx-section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .3;
}
.sgx-form .container-fluid {
    padding-right: 0;
    padding-left: 0;
}
.form-photo-attachment .thumb {
    width: 128px;
    height: 128px;
    float: left;
    margin-right: 15px;
    cursor: pointer;
}
.form-photo-attachment .control {
    float: left;
}
.form-group.grouped-left {
    border-left: 3px solid #607d8b;
    padding-left: 15px;
}
.iconized {
    margin-left: 3px;
}
.iconized .icon {
    width: 12px;
    height: 12px;
    position: relative;
    margin-right: 3px;
    top: -1.5px;
    left: -2px;
}
.sgx-stats {
    background: white;
    padding: 18px 15px;
    border-bottom: 1px solid #ececec;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
.sgx-stats .item {
    display: inline-block;
    margin-right: 20px;
}
.sgx-stats .item .big-val {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}
.sgx-stats .item .small-val {
    opacity: .5;
    margin-top: 5px;
}

td.input-td {
    padding: 0 !important;
}
td.input-td input {
    margin: 0;
    padding: 5px 9px;
    border: 1px solid #00000000;
    border-radius: 0px;
    font-size: 11px;
    line-height: 12px;
    background: none;
    width: 100%;
    height: 40px;
}
td.input-td input.error,
td.input-td textarea.error,
td.input-td select.error {
    border: 1px solid #f44336;
}
td:first-child.input-td input {
    padding-left: 15px;
}
td.input-td input:focus {
    outline: none !important;
    border: 1px solid #00000066;
}

td.input-td select {
    height: 40px;
    width: 100%;
    border: 1px solid #00000000;
    background: none;
    padding: 5px;
}
td.input-td select:focus {
    outline: none !important;
    border: 1px solid #00000066;
}

td.input-td textarea {
    width: 100%;
    border: 1px solid #00000000;
    background: none;
}
td.input-td textarea:focus {
    outline: none !important;
    border: 1px solid #00000066;
}

.input-td .select2-selection {
    border: 0px;
    border-radius: 0;
    background: none;
    height: 40px;
}
.select2-dropdown {
    border-radius: 0;
    border: 1px solid #ececec;
}
.select2-search--dropdown {
    padding: 0;
}
.input-td .select2-selection__rendered {
    line-height: 40px;
}
.input-td.multiple .select2-selection__rendered {
    line-height: unset;
}
.input-td.multiple .select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 0px;
    padding-left: 20px;
}
body .select2-search--dropdown input {
    padding: 0;
}
.input-td .select2-selection:focus,
.select2-search--dropdown input:focus {
    outline: none !important;
    border: 0;
}
.select2-results {
    border: 1px solid #ccc;
}
.cell-title {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
}
.input-td textarea {
    padding: 5px;
}
td:first-child.input-td textarea {
    padding-left: 15px;
}
td.input-td select {
    background:url(../img/select-chevron-down-dark.png) 0 0 no-repeat;
    -webkit-appearance: none;
    background-position: right bottom;
    background-position-y: 16px;
    background-size: 18px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 30px;
}
td.input-td:first-child select {
    padding-left: 14px;
}
.checkbox-td label {
    margin: 0;
    padding: 8px 15px;
    cursor: pointer;
    line-height: 6px;
}
.checkbox-td input {
    margin: 0;
    margin-top: 3px;
}
.thead-tool {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    margin-left: -1px;
    margin-top: -1px;
}
.tbl-icon {
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px;
    opacity: .5;
}
.sgx-icon {
    width: 14px;
    height: 14px;
}
.coa-tier-1 {padding-left: calc(15px + 10px) !important;}
.coa-tier-1 {padding-left: calc(15px + 10px) !important;}
.coa-tier-2 {padding-left: calc(15px + 20px) !important;}
.coa-tier-3 {padding-left: calc(15px + 30px) !important;}
.coa-tier-4 {padding-left: calc(15px + 40px) !important;}
.coa-tier-5 {padding-left: calc(15px + 50px) !important;}
.coa-tier-6 {padding-left: calc(15px + 60px) !important;}
.coa-tier-7 {padding-left: calc(15px + 70px) !important;}
.coa-tier-8 {padding-left: calc(15px + 80px) !important;}
.coa-tier-9 {padding-left: calc(15px + 90px) !important;}
.coa-tier-10 {padding-left: calc(15px + 100px) !important;}

.view-bg {
    padding-top: 15px;
    height: 150px;

    background: url(../img/fc.jpg) center center no-repeat;
    background-size: cover;

    /*background: #D3CCE3;
    background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);   Chrome 10-25, Safari 5.1-6 
    background: linear-gradient(to right, #E9E4F0, #D3CCE3);*/


    margin-left: -16px;
    margin-top: -16px;
    width: calc(100% + 32px);
    text-align: center  ;

    position: relative;
}
.view-bg .curve {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.view-id {
    position: relative;
    text-align: center;
    margin-top: -90px;
}
.view-id .info {
}
.view-id .big-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}
.view-id .thumb {
    height: 170px;
    width: 170px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.view-pin .title {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: #333;
}
.view-pin .value {
    color: #999;
}
.company-name {
    font-size: 24px;
    font-weight: 700;
}
.view-status {
    display: inline-block;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    line-height: 13px;
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
}
.view-status.active {
    background: #e8fff3;
    color: #50cd89;
}
.view-status.inactive {
    background: #fff5f8;
    color: #f1416c;
}
.tracker-item {
    padding: 10px 0;
    position: relative;
    font-size: 11px;
}
.tracker-item::before {
    content: " ";
    height: 70%;
    width: 2px;
    background: #33333311;
    position: absolute;
    left: 68px;
    top: 26px;
}
.tracker-item.current::before {
    background: #007bff;
}
.tracker-item .title {
    opacity: .5;
    position: relative;
}
.tracker-item .title::before {
    content: " ";
    height: 8px;
    width: 8px;
    background: #33333366;
    border-radius: 50%;
    position: absolute;
    left: -20.5px;
    top: 5px;
}
.tracker-item.current .title::before {
    background: #007bff;
}
.tracker-item .mid {
    padding-left: 85px;
}
.tracker-item.current .title {
    opacity: 1;
    color: #007bff;
}
.tracker-item .meta {
}
.tracker-item .pic {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}
.tracker-item .pic img.main {
    width: 100%;
    height: 100%;
}
.tracker-item:last-child::before {
    opacity: 0;
}
.figma-shutter.loading-data {
    display: none;
    height: 100px;
}

.js-figma-load-content.loading .loading-data {
    display: block;
}
.js-figma-load-content.loading .has-content {
    display: none;
}
.loading-data .spinner-contain {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 43%;
    transform: translate(-50%,-50%);
    left: 50%;
    opacity: .5;
}
.meta-fly {
    position: absolute;
    top: 10px;
    right: 0;
    font-style: italic;
    font-size: 11px;
}

/*touch up table 14022022*/
.font-inter {
    font-family: 'Inter', sans-serif;
}
.sgx-table.alt .info {
    font-size: 11px;
}
.sgx-table.alt .table {
    font-size: 11px;
}
.sgx-table.alt .table th,
.sgx-table.alt .table td {
    padding: 12px 10px;
    border-right: 0px;
    border-bottom: 1px solid #eee;
}
.sgx-table.alt .table th {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    background: #f3f3f3;
}
.check-td label {
    margin: 0;
    position: relative;
    top: 1px;
}
.sgx-table.alt .options .item {
    font-size: 11px;
}
.sgx-table.alt .paginates {
    font-size: 11px;
}
.sgx-sort {
    cursor: pointer;
    position: relative;
    padding-right: 26px !important;
}
.sgx-sort .sort-icon {
    position: absolute;
    right: 5px;
    width: 14px;
    opacity: .5;
}
.dropdown-menu.alt a.dropdown-item {
    font-size: 11px;
}
.small-val .inline-icon {
    width: 11px;
    margin-right: 5px;
    opacity: 1;
}
.big-val .icon {
    position: relative;
    top: -2px;
    opacity: .3;
    width: 20px;
    margin-left: 3px;
}
.choice-item.compact  label.p1015 {
    padding: 8px 15px !important;
}
.sgx-tabs.item-details a.subnav.active {
    background: #333333;
    color: #ffffff;
}
.sgx-tabs.item-details a.subnav:not(.active):hover {
    background: #f3f3f3;
}
.js-item-tbl {
    display: none;
}
.js-item-tbl.active {
    display: block;
}

.separate.back {
    opacity: 1;
    width: 16px;
    height: 16px;
    top: -1px;
    margin-right: 6px;
    transition: all 0.1s ease-in-out;
}
.separate.back:hover {
    transform: scale(1.2);
}
.separate.back:active {
    transform: scale(1.5);
}
.docs-wrapper {
    margin: 15px;
}
a.doc-item {
    padding: 10px 15px;
    border-radius: 5px;
    background: white;
    margin: 10px 0;
    display: block;
    transition: all 0.1s ease-in-out;
    position: relative;
}
.doc-item:hover {
    transform: scale(1.01);
}
.doc-item:active {
    transform: scale(1.02);
}

.blog-post {
    font-size: 13px;
    background: white;
    padding: 15px;
    border-radius: 5px;
}
.blog-post code {
    font-size: 100%;
}
.blog-post .meta {
    opacity: .5;
}
.blog-post h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #007BFF;
}
.blog-post h3 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
}
.blog-post .meta {
    opacity: .5;
}
.help-search {
    background: white;
    border-radius: 5px;
    padding: 10px 15px;
    padding-bottom: 0px;
}
.doc-item .spinner-contain {
    right: 5px;
    left: unset;
    color: #333;
}
.doc-item .spinner-contain .spinner-border {
    opacity: .5;
}
.doc-item .spinner-content {
    opacity: 1;
}
.personal-shortcuts .notif {
    width: 24px;
    height: 24px;
    line-height: 24px;
    background: #e91e63;
    position: absolute;
    right: -3px;
    top: -3px;
    border-radius: 50px;
    z-index: 110;
    color: white;
    font-size: 12px;
    text-align: center;
    font-weight: 700;
}
.sgx-my-snip {

}
.sgx-my-snip .item {
    border: 1px solid #ececec;
    border-radius: 5px;
    padding: 10px 15px ;
    margin-bottom: 8px;
    display: block;
}
.sgx-my-snip .item.error {
    border: 1px solid #e91e63;
}
.sgx-my-snip h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
}
.sgx-my-snip .h2-link {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
    font-size: 12px;
    font-weight: 400;
}
.sgx-my-snip .item.selectable {
    cursor: pointer;
}
.sgx-my-snip .item.selectable.active,
.sgx-my-snip .item.selectable:hover {
    background: #E3F2FD;
    border: 1px solid #BBDEFB;
}

.personal-shortcuts code {
    position: absolute;
    left: 15px;
    bottom: 15px;
    opacity: .5;
}
.compact .table th, 
.compact .table td {
    padding-top: 8px;
    padding-bottom: 8px;
}
.super-compact .table th, 
.super-compact .table td {
    padding-top: 5px;
    padding-bottom: 5px;
}
.chev-down {
    width: 12px;
    position: relative;
    top: -1px;
    opacity: 1;
}

@media print {
    body {
        background: unset;
        color: #000;
    }
    section#content {
        margin: 0;
        padding: 0;
    }
    .sgx-table .table th, 
    .sgx-table .table td {
        padding: 8px 10px;
    }
}
.sgx-view-snip {
    background: white;
    padding: 18px 0px;
    border-bottom: 1px solid #ececec;
    display: block;
    /*overflow-x: auto;
    white-space: nowrap;*/
}
.sgx-view-snip .snip-thumb {
    width: 130px;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
    float: left;
    margin-right: 15px;
}
.sgx-view-snip.in-form {
    padding: 12px 0;
}
.in-form .snip-info {
    margin-left: -2px;
}
.snip-info {
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0px;
}
.snip-info .title {
    font-size: 16px;
    padding: 0;
    margin: 0;
    margin-bottom: 2px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0px;
}
.snip-info .meta {
    font-size: 11px;
}
.snip-info .stat-item {
    padding: 7px 15px;
    border: 1px dashed #ccc;
    border-radius: 7px;
    display: inline-block;
    margin-right: 10px;
    transition: all 0.1s ease-in-out;
}
.preform-section .snip-info .stat-item {
    padding: 10px 15px;
}
.snip-info .stat-item .big-val {
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}
.snip-info .stat-item .small-val {
    opacity: .5;
}
.snip-info a.stat-item .big-val {
    color: #333;
}
.snip-info a.stat-item .small-val {
    color: #333;
}
.indicator {
    display: inline-block;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    line-height: 13px;
    font-weight: 700;
}
.indicator.blue {
    background: #f1faff;
    color: #0095e8;
}
.indicator.green {
    background: #e8fff3;
    color: #50cd89;
}
.indicator.red {
    background: #fff5f8;
    color: #f1416c;
}
.indicator.yellow {
    background: #FFF8DD;
    color: #ffb74d;
}
.indicator.purple {
    background: #F3E5F5;
    color: #9C27B0;
}
.snip-info .title .indicator {
    position: relative;
    top: -3px;
    margin-left: 5px;
}
.docitem-select-trigger {
    padding-left: 10px !important;
}
.docitem-select-trigger .icon {
    width: 14px;
    transition: all 0.1s ease-in-out;
    margin-top: -3px;
    opacity: .5;
}
.docitem-select-trigger .icon:hover {
    transform: scale(1.1) !important;
    opacity: 1;
}
.docitem-select-trigger .icon:active {
    transform: scale(1.2) !important;
}
/* width */
.slim-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
.slim-scrollbar::-webkit-scrollbar-track {
  background: #fefefe;
}

/* Handle */
.slim-scrollbar::-webkit-scrollbar-thumb {
  background: #ddd;
}

/* Handle on hover */
.slim-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.stat-bigval {
    font-weight: 700;
    line-height: 24px;
}
.stat-smallval {
    opacity: .5;
    margin-top: 5px;
    font-size: 11px;
}

.sgx-card.fixed-h {
    overflow: auto;
}
.sgx-card.fixed-h.h-150 {height: 150px;}
.sgx-card.fixed-h.h-200 {height: 200px;}
.sgx-card.fixed-h.h-300 {height: 300px;}

.file-option-icon {
    width: 20px;
    color:#007BFF;
    display: inline-block;
    position: relative;
    top: -1px;
    margin-right: 5px;
    margin-left: 4px;
}
.file-option-icon svg {
    width: 100%;
}
.file-folder-icon {
    width: 20px;
    color:#007BFF;
    display: inline-block;
    position: relative;
    top: -1px;
    margin-right: 5px;
}
.file-folder-icon svg {
    width: 100%;
}
td.file-td a {
    color: #333;
}
td.file-td a:focus,
td.file-td a:active,
td.file-td a:hover {
    color: #007BFF;
}
.file-manager-separate {
    width: 14px;
    height: 14px;
    opacity: .3;
    position: relative;
    top: -1px;
}
.file-more {
    height: 16px;
    opacity: .5;
    position: relative;
    top: -1px;
}
.file-up {
    opacity: .5;
    position: relative;
    top: -1px;
    height: 12px;
    margin-left: 3px;
}
.tracker-wrapper.no-pic .tracker-item .mid {
    padding-left: 20px;
}
.tracker-wrapper.no-pic .tracker-item::before {
    left: 2px;
}

.sgx-inbox-wrapper {
    position: relative;
    height: 100%;
    display: flex;
}
.sgx-inbox-list {
    width: 320px;
    height: calc(100vh - 110px);
    background: white;
    overflow-y: auto;
    border-right: 1px solid #ececec;
    font-size: 11px;
}
.sgx-inbox-content {
    width: calc(100% - 320px);
    height: calc(100vh - 110px);
    position: relative;
    overflow-y: auto;
}
.sgx-inbox-content .blank {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.sgx-inbox-item {
    padding: 15px;
    border-bottom: 1px solid #ececec;
    cursor: pointer;
    position: relative;
    padding-right: 110px;
}
.sgx-inbox-item:hover {
    background: #f9f9f9;
}
.sgx-inbox-item.active {
    background: #f3f3f3;
}
.sgx-inbox-item:active {
    background: #ececec;
}
.sgx-inbox-item .meta {
    text-align: right;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0,-50%);
}
.sgx-inbox-item .spinner-contain {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0,-50%);
    width: 15px;
    height: 15px;
    opacity: .3;
}
.sgx-inbox-item .spinner-contain .spinner-border {
    width: 100%;
    height: 100%;
}
.sgx-inbox-item .text-icon {
    width: 20px;
    position: relative;
    top: -2px;
    margin-right: 5px;
}
.list-tools {
    padding: 8px 15px;
    border-bottom: 1px solid #ececec;
    background: #f6f6f6;
}
.list-info {
    padding: 8px 15px;
    border-bottom: 1px solid #ececec;
}
.list-tools a {
    font-size: 11px;
    display: inline-block;
    margin-right: 15px;
    font-weight: 600;
    color: #333;
}
.list-tools a .icon {
    height: 13px;
    width: 13px;
    position: relative;
    top: -1.5px;
    margin-right: 5px;
}
.sgx-curr {
    font-size: 11px;
    font-weight: 700;
    color: #2196f3;
}

.stat-item.doc-progress:before {
    content: "";
    height: 0px;
    width: 18px;
    position: absolute;
    top: 50%;
    left: -23px;
    transform: translate(0,-50%);
    border-top: 2px solid #ccc;
}
.stat-item.doc-progress:first-child:before {
    display: none;
}
.stat-item.doc-progress {
    border: 2px dashed #eee;
    position: relative;
    margin-right: 24px;
}
.stat-item.doc-progress .big-val {
    font-size: 12px;
    line-height: 16px;
}
.stat-item.green {
    border: 2px solid #50cd89;
    background: #e8fff3;
}
.stat-item.red {
    border: 2px solid #f1416c;
    background: #fff5f8;
}
.stat-item.yellow {
    border: 2px solid #FFC700;
    background: #FFF8DD;
}
.stat-item.blue {
    border: 2px solid #03A9F4;
    background: #E1F5FE;
}

.hoverable .stat-item:hover {
    background: #ececec;
}
.hoverable .stat-item.yellow:hover {
    background: #fff2c1;
}
.hoverable .stat-item.green:hover {
    background: #ceffe5;
}
.hoverable .stat-item.red:hover {
    background: #ffdee8;
}
.hoverable .stat-item.blue:hover {
    background: #bbdefb;
}


.preform-section .stat-item.doc-progress {
    border: 0px;
    padding: 15px;
}
.preform-section .stat-item.doc-progress:before {
    left: -21px;
}
.figma-card.no-wrap .content {
    overflow: auto;
    white-space: nowrap;
}
.counter-item {
    display: inline-block;
    min-width: 100px;
    margin-right: 15px;
}
table.align-middle th,
table.align-middle td {
    vertical-align: middle;
}
.figma-card table tr:last-child td {
    border-bottom: 1px solid #dee2e6;
}
.figma-card table th,
.figma-card table td {
    white-space: nowrap;
}
.figma-card table.normal-wrap th,
.figma-card table.normal-wrap td {
    white-space: normal;
}
.figma-card table th:first-child,
.figma-card table td:first-child {
    padding-left: 15px;
}
.figma-card table thead th {
    border-bottom: 1px solid #dee2e6;
}

.preform-section h4 {
    font-size: 14px;
    font-weight: 700;
}
.preform-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 15px);
}
.preform-item {
    background: white;
    padding: 15px;
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 250px;
    position: relative;
    transition: all 0.1s ease-in-out;
    border-radius: 5px;
    min-height: 68px;
}
.preform-item.size-2 {
    min-height: unset;
}
.preform-item.width-180 {
    width: 180px;
}
.modal .preform-item {
    background: #f1f1f1;
}
.modal .preform-item,
.modal .preform-item.width-180  {
    width: calc(50% - 15px);
}
.modal .preform-item.col-third {
    width: calc(33% - 15px);
}
.preform-item code {
    color: #333;
}
.preform-item.active code {
    color: #fff;
}
.preform-item.active .desc {
    opacity: .5;
}
.preform-item.active {
    background: #2196f3;
    color: #fff;
}
.preform-item:hover {
    transform: scale(1.03);
}
.preform-item:active {
    transform: scale(1.07);
}
.preform-item .title {
    font-weight: 700;
}
.preform-item .desc {
    opacity: .5;
}
.preform-item .icon.head {
    width: 36px;
    height: 36px;
    margin-bottom: 5px;
}
.preform-item .icon.head.bigger {
    width: 44px;
    height: 44px;
    margin-bottom: 5px;
}
.preform-item.small-icon {
    padding-left: 44px;
}
.preform-item.small-icon .icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(0,-50%);
    width: 20px;
    height: 20px;
}
@media (max-width: 768px) {
    .preform-item,
    .preform-item.width-180  {
        width: calc(50% - 15px);
    }
}

.preform-section.tab {
    display: none;
}
.preform-section.tab.active {
    display: block;
}

.docinfo-item {
    padding: 4px 15px;
    border-radius: 50px;
    border: 1px dashed #aaa;
    margin-right: 8px;
    font-size: 11px;
    background: #fff;
}
.docinfo-item:hover {
    transform: scale(1.03);
    background: #fafafa;
}
.docinfo-item:active {
    transform: scale(1.05);
}
.docinfo-item.blue {
    border: 1px solid #009EF7;
    background: #F1FAFF;
}
.docinfo-item.has-chevron-right {
    padding-right: 10px;
}
.docinfo-item .icon {
    width: 10px;
    height: 10px;
    position: relative;
    top: -1px;
    margin-left: 2px;
}
.docinfo-item .icon.left {
    margin-right: 3px;
    margin-left: 0;
}
.docinfo-item-wrap {
    margin-bottom: 10px;
}
.sgx-form-snip {
    background: #f3f3f3;
    border-radius: 5px;
    padding: 10px 15px;
}
.dashboard-hero {
    background: url(../img/barging-10.jpg) no-repeat bottom;
    background-size: cover;
    height: 200px;
    position: relative;
}
img.sgx-icon-img {
    height: 41px;
    width: 41px;
}
img.sgx-icon-img.img-33 {
    height: 33px;
    width: 33px;
}
img.sgx-icon-img.hr-row {
    opacity: .3;
}
img.sgx-icon-img.hr-row:hover {
    opacity: 1;
}
a.sgx-subhead {
    margin-right: 25px;
    display: inline-block;
    color: #333;
    font-weight: 700;
    position: relative;
    transition: all 0.1s ease-in-out;
    font-size: 13px;
    opacity: .5;
}
a.sgx-subhead.active,
a.sgx-subhead:hover {
    color: #007bff;
    opacity: 1;
}
.subhead-icon {
    width: 20px;
    height: 20px;
    margin-top: -5px;
    margin-right: 5px;
}
.sgx-snip-icon {
    width: 30px;
    height: 30px;
    margin-top: -5px;
    margin-right: 7px;
}
.kp-pane {display: none;}
.kp-pane.active {display: block;}

.sgx-tier {position: relative;}
.sgx-table .table td.sgx-tier-0 {padding-left: 40px;}
.sgx-table .table td.sgx-tier-1 {padding-left: 66px;}
.sgx-table .table td.sgx-tier-2 {padding-left: 106px;}

.loc-icon {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 12px;
}
.loc-1 {left: 38px;}
.loc-2 {left: 78px;}

.loc-icon.small {
    width: 14px;
    height: 14px;
    left: 20px;
}
.loc-1.small {left: 46px;}
.loc-2.small {left: 86px;}


.flow-col-title {
    font-weight: 700;
    font-size: 11px;
}
.sgx-flow-item {
    border: 1px dashed  #ccc;
    background: none;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    padding: 4px 15px;
    font-size: 11px;
    position: relative;
    margin-left: -2px;
    display: block;
}

.sgx-flow-item.approved {border: 1px solid #009EF7;background: #F1FAFF;}
.sgx-flow-item.pending {border: 1px solid #FFC700;background: #FFF8DD;}
.sgx-flow-item.rejected {border: 1px solid #f1416c;background: #fff5f8;}
.sgx-flow-item.grey {border: 1px dashed #ccc;background: #fff;}

.sgx-flow-item.origin {
    background: #efefef;
    border: 1px solid #efefef;
    text-align: left;
}
.sgx-flow-item.blank {
   height: 26.5px;
   background: none;
   border: 0;
}
.sgx-flow-item a.flow-text {
   color: #007bff;
}
.sgx-flow-item a.flow-text:hover {
   color: #007bff;
}
.flow-date {
    font-size: 10px;
    opacity: .7;
}
.origin-arrow {
    width: 39px;
    height: 2px;
    position: absolute;
    left: -41px;
    background: #dedede;
    top: 50%;
    transform: translate(0,-50%);
}
.origin-arrow.half {
    width: 15px;
    left: -16px;
}
.origin-arrow.half:before {
    content: '';
    position: absolute;
    height: 38px;
    width: 2px;
    background: #dedede;
    left: 0px;
    bottom: 0;
}
.origin-arrow.half.height-2:before {height: 74px;}
.origin-arrow.half.height-3:before {height: 110px;}
.origin-arrow:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    right: 1px; width: 0; height: 0;
    border-left: 5px solid #dedede;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}


table.swimlane {
    background: white;
    width: 100%;
}
table.swimlane th,
table.swimlane td {
    border-right: 1px solid #eee;
    padding: 7px 20px;
    vertical-align: top;
}
table.swimlane td {
    padding-bottom: 5px;
}
table.swimlane tr:first-child td {
    padding-top: 18px;
}
table.swimlane tr:last-child td {
    padding-bottom: 20px;
}
table.swimlane th {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    background: #f3f3f3;
}

.sgx-modal-boxes a.item {
    color: #333;
}
.sgx-modal-boxes .item {
    padding: 15px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ececec;
    margin-bottom: 10px;
    text-align: center;
    height: calc(100% - 10px);
    transition: all 0.1s ease-in-out;
    display: block;
}
.sgx-modal-boxes .item:hover {
    background: #2196f3;
    border: 1px solid #2196f3;
    color: #fff;
    transform: scale(1.05);
}
.sgx-modal-boxes .item:active {
    background: #2196f3;
    border: 1px solid #2196f3;
    color: #fff;
    transform: scale(1.1);
}
.sgx-modal-boxes .item .title {
    font-weight: 700;
    line-height: 16px;
}
.sgx-modal-boxes .item .icon {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
}
h1.with-icon {
    position: relative;
    padding-left: 28px;
}
h1.with-icon .icon{
    position: absolute;
    top: -4px;
    left: 0;
    width: 20px;
}
.dash-filter {
    display: inline-block;
    padding: 8px 22px 8px 20px;
    background: white;
    border-radius: 10px;
    font-weight: 700;
    font-size: 11px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.dash-filter .icon {
    height: 13px;
    width: 13px;
    position: relative;
    top: -1.5px;
    margin-right: 5px;
}
.figma-card .head .meta {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0,-50%);
    z-index: 150;
}
.figma-card .head .meta.show {
    z-index: 160;
}
.figma-card .head .meta .parent {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    margin-left: 20px;
}
img.link-icon {
    height: 13px;
    width: 13px;
    position: relative;
    top: -1.5px;
    margin-right: 5px;
}
.counter-val .meta-val {
    font-size: 12px;
    opacity: .5;
}
.row-flag {
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
.row-flag:hover {
    transform: scale(1.1) !important;
}
.row-flag:active {
    transform: scale(1.2) !important;
}


.sgx-funnel-box {
    float: left;
    width: 33%;
    height: 100%;
    position: relative;
    text-align: center;
}
.sgx-funnel-box:hover {
    transition: all 0.1s ease-in-out;
    opacity: .9;
}
.sgx-funnel-box:active {
    transform: scale(1.01);
}
.sgx-funnel-box .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
}
.sgx-funnel-box .text .big {
    font-weight: 700;
    line-height: 20px;
    font-size: 20px;
}
.sgx-funnel-box .text .meta {
    opacity: .7;
}
.sgx-funnel-box .spinner-contain {
    color: white;
}
.sgx-funnel-box.green {background: #6e7c74;}
.sgx-funnel-box.green1 {background: #8aa797;}
.sgx-funnel-box.green2 {background: #719983;}
.sgx-funnel-box.blue {background: #469cc5;}
.sgx-funnel-box.blue1 {background: #6cb7c1;}
.sgx-funnel-box.blue2 {background: #507593;}
.sgx-funnel-box.red {background: #c95c76;}
.sgx-funnel-box.blank {background: none;}

.sgx-funnel-box.box-1-1 {width: 33%; height: 25%;}
.sgx-funnel-box.box-1-2 {width: 33%; height: 50%;}
.sgx-funnel-box.box-1-3 {width: 33%; height: 75%;}
.sgx-funnel-box.box-1-4 {width: 33%; height: 100%;}

.sgx-funnel-box.round-left-top {border-top-left-radius: 10px;}
.sgx-funnel-box.round-left-bottom {border-bottom-left-radius: 10px;}
.sgx-funnel-box.round-right-top {border-top-right-radius: 10px;}
.sgx-funnel-box.round-right-bottom {border-bottom-right-radius: 10px;}

@media (max-width: 576px) {
    .sgx-funnel-box {
        float: left;
        width: 100% !important;
        height: 60px !important;
        border-radius: 0px !important;
    }
}

.sgx-table-tabs {
   overflow: auto;
   white-space: nowrap;
   font-size: 0;
}
.table-tab {
   font-size: 11px;
   display: inline-block;
   background: white;
   padding: 8px 18px;
   color: #333;
   font-weight: 700;

   border-right: 1px solid #ececec;
   border-bottom: 1px solid #ececec;
}
.table-tab:not(.active):hover {
   background: #ececec;
   color: #333;
}
.table-tab.active {
   background: #333333;
   color: #ffffff;
}
.sgx-table-tabs .spinner-contain {
    height: 15px;
    width: 15px;
}
.promo-wrapper {
    background: white;
    padding: 15px;
}
.promo-box {
    padding: 10px 15px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    display: inline-block;
    margin-right: 10px;
    background: white;
    color: #333;
    position: relative;
}
.promo-box.has-ear {
    padding-right: 55px;
}
.promo-box.active {
    border: 1px solid #ccc;
}
.promo-box:hover {
    color: #333;
    background: #eee;
}
.promo-box .title {
    font-weight: 700;
}
.promo-box .meta {
    opacity: .5;
}
.ear-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0,-50%);
    width: 18px;
    height: 18px;
    opacity: .3;
}
.ear-icon.check {
    right: 15px;
    opacity: 1;
}
.table-tab .badge {
    display: inline-block;
    color: #f1416c;
    font-weight: 700;
    font-size: 10px;
    margin-top: -1px;
    margin-right: -10px;
}
.table-tab.active .badge {
    color: white;
    opacity: .5;
}
@media (max-width: 768px) {
    .sgx-inbox-list {
        width: 100%;
    }
    .sgx-inbox-content {
        display: none;
    }
}

.modal-open .modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.modal-body.alt {
    background:#f2f2f2;
}
.sgx-space {
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    height: 100%;
    background: white;
}
.sgx-space .icon {
    height: 30px;
    width: 30px;
    display: block;
}
.sgx-space:hover {
    
    transform: scale(1.03);
}
.sgx-space.active {
    background: #2196f3;
    color: white;
}
.card-cell {
    background: white;
    padding: 12px 15px;
    position: relative;
    margin-bottom: 10px;
}
.card-cell.with-status {
    padding-left: 65px;
}
.card-cell .status {
    position: absolute;
    width: 50px;
    background: #E7F7FE;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-cell .status .icon {
    height: 14px;
    width: 14px;
}
.card-cell .content {
    display: flex;
    justify-content: space-between;
}
.card-cell .left {
}
.card-cell .right {
    display: flex;
    justify-content: flex-end;
}
.card-cell .counters {
    display: flex;
    justify-content: flex-end;
    margin-left: 10px;
}
.card-cell .counter-clock {
    text-align: center;
    width: 50px;
}
.card-cell .counter-clock .big-val {
    color: #007BFF;
    font-weight: 700;
    font-size: 14px;
}
.info .meta {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}
.ticket-content .tools {
    text-align: right;
}
.modal-comments .item {
    padding: 12px 15px;
    border-bottom: 1px solid #ececec;
}
.modal-comments .item:first-child {
    border-top: 1px solid #ececec;
}
.modal-comments .author {
    position: relative;
    margin-bottom: 5px;
}
.modal-comments .author .left {
    font-weight: 700;
    color: #007bff;
}
.modal-comments .author .meta {
    opacity: .5;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}
.modal-comments .tools {
    text-align: right;
}
.figma-comments .item {
    padding: 12px 15px;
    border-bottom: 1px solid #ececec;
}
.figma-comments .item:first-child {
    border-top: 1px solid #ececec;
}
.figma-comments .author {
    position: relative;
    margin-bottom: 5px;
}
.figma-comments .author .left {
    font-weight: 700;
    color: #007bff;
}
.figma-comments .author .left.admin {
    color: #e91e63;
}
.figma-comments .author .meta {
    opacity: .5;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}
.figma-comments .tools {
    text-align: right;
}
.figma-comments .content {
    padding: 0px;
}
.modal-story {
    background: url(../img/consultant_3.jpg) center center no-repeat;
    background-size: cover;
    height: 150px;
    position: relative;
}
.modal-story .opaque {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    left: 0;
    top: 0;
    opacity: .7;
    z-index: 50;
}
.modal-story .content {
    position: relative;
    z-index: 60;
    font-size: 14px;
}
.th-help-icon {
    width: 10px;
    height: 10px;
    position: relative;
    top: -3px;
    margin-left: 3px;
}
.payroll-td {
    border-bottom: 1px solid #eee !important;
    line-height: 12px;
}
.payroll-td.not-allowed {
    background: #ddd;
    color: #888;
}
.payroll-td.no-config {
    background: #cdcdcd;
    color: #999;
}
.payroll-td .text {
    cursor: pointer;
}
.payroll-td .text:hover  {
    color: #007bff;
}
.payroll-td .publish-indicator {
    width: 14px;
    position: relative;
    top: -1px;
}

.payroll-td.bg-grey1 {background: #ddd;}
.payroll-td.bg-grey2 {background: #ececec;}
.payroll-td.bg-joined {background: #c5e1a5;}
.payroll-td.bg-resigned {background: #ffcdd2;}
.payroll-td.bg1 {background: #fff8e1;}
.payroll-td.bg2 {background: #ffecb3;}

.payroll-td.bg-pc-pending {background: #ffecb3;}

.icon.td-nav {
    width: 14px;
    position: relative;
    top: -1px;
    opacity: .5;
}
a.personal-shortcuts.wide {
    width: 310px;
} 
a.personal-shortcuts.red {
    border: 2px solid #f1416c;
    background: #fff5f8;
} 
@media (max-width: 425px) {
    a.personal-shortcuts.wide {
        width: 100%;
    } 
}
.filter-vice {
    display: inline-block;
    border: 1px dashed #009EF7;
    background: #F1FAFF;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    margin-left: 5px;
    margin-top: -3px;
    margin-bottom: -5px;
    font-size: 11px;
}
.filter-vice .icon {
    width: 11px;
    height: 11px;
}
.table-wrapper.ozone {
    height: 1000px;
}
.faux-scroll {
    height: 15px;
    width: 100%;
    overflow-x: scroll;
    overflow-y:hidden;
}
.faux-scroll .bar {
    width: 3000px;
    height: 20px;
}

.table-wrapper.ozone thead {
    position: sticky;
    top: 0;
    z-index: 99;
}
.item-cycle {
    border-bottom: 1px solid #ececec;
    background: #f2f2f2;
    padding-left: 80px !important;
    position: relative;
}
.item-cycle .name {
    font-size: 20px;
    font-weight: 700;
}
.item-cycle .num {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(0,-50%);

    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ddd;
    font-size: 17px;
    line-height: 40px;
    font-weight: 700;
    text-align: center;
}
.item-cycle .nav {
    position: absolute;
    right: 20px;
    bottom: -15px;

    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.item-cycle .nav.up {
    right: 55px;
}
.item-cycle .nav .icon {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    opacity: .7;
    width: 16px;
    height: 16px;
    -webkit-tap-highlight-color: transparent;
}
.item-cycle .nav:hover {
    background: #bbb;
}
input.verbal {
  background: #FFF;
  outline: 0px;
  padding: 5px 5px;
  BORDER: 1px solid #ccc;
  cursor: pointer;
}
select.verbal {
  border: 0;
  background: #fff;
  outline: 0px;
  padding: 2px 5px;
  BORDER: 1px solid #ccc;
  border-radius: 0px;
  cursor: pointer;
  height: 28.5px;
}
.loader .spinner-contain {
    opacity: 0;
    width: 19px;
    height: 19px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
}
.loader .spinner-contain .spinner-border {
    width: 100%;
    height: 100%;
    display: block;
}
.loader.spinning .spinner-contain {
    opacity: .8;
}
.loader.spinning .text {
    opacity: 0;
}
.icon-inside {
    width: 13px;
    position: relative;
    top: -2px;
    opacity: .5;
}
.dd-icon {
  width: 10px;
  height: 10px;
  position: relative;
  top: -1px;
  margin-right: 2px;
  margin-left: 2px;
}
.form-about.red {
    color: #fff5f8;
    background: #f1416c;
    font-weight: 700;
}
.simple-tab a {
    display: inline-block;
    margin-right: 10px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
}
.simple-tab a:not(.active) {
    color: #333;
    opacity: .5;
}
.simple-tab a .icon {
    width: 10px;
    height: 10px;
    position: relative;
    top: -1px;
    margin-right: 4px;
    opacity: .8;
}
.blog-inside .blog-post {
    padding: 3px;
}
.dashboard-scrollable {
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0px;
}
.dashboard-scrollable .personal-shortcuts-wrapper {
    display: inline-block;
    margin-right: 5px;
    white-space: normal;
}
.dashboard-scrollable .personal-shortcuts-wrapper .meta {
    font-size: 12px;
}
.cielo-card {
    padding: 12px 15px;
    border-radius: 8px;
    height: 100%;
    background: white;
    position: relative;
}
.cielo-card.with-meta {
    padding-right: 90px;
}
.cielo-card .meta {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0,-50%);
    font-size: 11px;
}
.cielo-card .meta .dropdown-menu {
    z-index: 30 !important;
}
.cielo-card .indicator {
    margin-left: -3px;
    margin-bottom: 5px;
}
.fixed-facade {
    max-height: 100vh;
    overflow-y: auto;
}
.post-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ececec;
    position: relative;
    overflow: hidden;
}

.card-img-wrapper {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 100%;
    padding: 15px;
    background: #282560;
    margin-bottom: 15px;
    width: 90px;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-elks {
    background: #f2f2f2;
    text-align: center;
}

.card-elks .card-title {
    margin-top: 64px;
}

div#elks-categories {
    margin-top: 5rem;
    margin-bottom: 3rem;
}


.blog-post .elks-categories {
     gap: 0;    

}

.elks-categories {
    margin-top: 5rem;
    margin-bottom: 3rem;

}

.card-elks .card-footer {
    background: transparent;
    border: none;
}

.td-progress-wrapper {
    position: relative;
    margin: 5px;
    background: #eee;
}
.td-progress-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #90caf9;
    top: 0;
    left: 0;
    z-index: 50;
}
.td-progress-text {
    position: relative;
    z-index: 60;
    font-size: 10px;
}
.stat-progress-wrapper {
    position: relative;
    margin: 5px 0;
    background: #eee;
    height: 8px;
}
.stat-progress-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #90caf9;
    top: 0;
    left: 0;
    z-index: 50;
}
.stat-progress-text {
    position: relative;
    z-index: 60;
    font-size: 10px;
}

/*
 * Tickets Support Management
 *
 */
.ticket-landing .container-fluid {
    margin-top: -50px;
    padding: 0px 50px;
}

.dashboard-hero .hero-content {
    font-weight: 600;
    padding: 50px 50px 100px;
    width: 50%;
    color: white;
    position: relative;
}

.dashboard-hero.custom-rangga .hero-overlay {
    background: linear-gradient(180deg, rgba(0 0 0 / .4) 0%, rgba(0 0 0 / 0) 50%);
    background: rgba(0 0 0 / .7);
}

.dashboard-hero.custom-rangga {
    height: auto;
    min-height: 280px;
}

a.figma-card {
    color: black;
    float: left;
    transition: all 0.3s;
}

a.figma-card:hover {
    background: #353654;
    color: white;
}

@media screen and (max-width:767px) {
    .dashboard-hero .hero-content {
        width: 100%;
    }

    .dashboard-hero.custom-rangga {
        height: auto;
    }

    .dashboard-hero .hero-content {
        padding: 30px 30px 100px;
    }

    .dashboard-hero.custom-rangga form {
        padding: 0px 15px;
    }

    .dashboard-hero.custom-rangga .hms-btn {
        /* padding: 16px 22px; */
    }

    .ticket-landing .container-fluid {
        padding: 0px 30px;
    }
}

/* End Of Ticket Support Management */

/* Laporan eLMP */
div#report-identity {
    background: none;
    border: none;
}

div#report-identity .card-header {
    background: none;
    border: none;
    padding: 10px;
    border-bottom: 1px solid red;
}

div#report-identity .tabs {
    border: none;
}

div#report-identity .nav li {
    width: 50%;
}

div#report-identity .nav li button {
    width: 100%;
}

#report-identity .tab-content {
    border: 1px solid #dee2e6;
    padding: 10px;
    margin-top: 2px;
}

#report-identity .btn-light:disabled {
    cursor: not-allowed;
}



/* kuiper vue  */

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link{
    border-color: #dee2e6;
    background-color: #ececec;
    border-bottom: 0;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover{
    border-color: #dee2e6;
    background-color: #ececec;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: #dee2e6;
    color: #fff;
    background-color: rgb(40 37 96);
  }

/* kuiper vue end  */

.btn-light-red{
    color: red;
}