:root {
    --red: #dc3545;
    --cerise: #e91e63;
    --coal: #6c757d;
    --yellow: #FFC107;
    --lime: #CDDC39;
    --teal: #009688;
    --purple: #673AB7;
    --navy: #305496;

    --pier-color1: #f44336;
    --pier-color2: #e91e63;
    --pier-color3: #9c27b0;
    --pier-color4: #673ab7;
    --pier-color5: #3f51b5;
    --pier-color6: #2196f3;
    --pier-color7: #03a9f4;
    --pier-color8: #00bcd4;
    --pier-color9: #009688;
    --pier-color10: #4caf50;
    --pier-color11: #8bc34a;
    --pier-color12: #cddc39;
    --pier-color13: #ffc107;
    --pier-color14: #ff9800;
    --pier-color15: #ff5722;
    --pier-color16: #795548;
    --pier-color17: #607d8b;
    --pier-color18: #20c997;
    --pier-color19: #90caf9;
}

.bg-light-yellow, tr:hover .bg-light-yellow {background: #fff8e1cc !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;}

/*cargo colors*/
.cargo--red {background-color: var(--red) !important;color: white;}
.cargo--coal {background-color: var(--coal) !important;color: white;}
.cargo--yellow {background-color: var(--yellow) !important;color: white;}
.cargo--lime {background-color: var(--lime) !important;color: white;}
.cargo--teal {background-color: var(--teal) !important;color: white;}
.cargo--purple {background-color: var(--purple) !important;color: white;}

.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;}

.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;}

.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;}

.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;}
.fw-200 {font-weight: 200;}
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}
.fw-900 {font-weight: 900;}

.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;}

.cursor-ptr {cursor: pointer;}
.hms-alert {border-radius: 10px; font-size: 15x;}
.top-0 {top: 0px !important;}
.o5.o10-hover:hover {opacity: 1 !important;}
.valign-top {vertical-align: top;}
.row.gap-10px {margin: 0 -5px;}
.row.gap-10px > div {padding: 0 5px;}

.brd-bottom {border-bottom: 1px solid #ececec;}
.brd-top {border-top: 1px solid #ececec;}
.brd-top-bold {border-top: 1px solid #ccc !important;}
.brd-right {border-right: 1px solid #ececec !important;}
.brd-right-bold {border-right: 1px solid #ccc !important;}

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

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

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

.card-piers .pier-item {z-index: 150;}
.card-piers .pier-item .opaque,
.pier-slot-item .overlay {z-index: 152;}
.card-piers .pier-item .pier-content,
.pier-slot-item .value {z-index: 155;}

#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;}

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

a {
    text-decoration: none;
    color: rgb(32 201 151);
}
a:active,
a:focus,
a:visited {
    text-decoration: none !important;
    outline: none !important;
    color: rgb(32 201 151);
}
a:hover {
    text-decoration: none !important;
    outline: none !important;
    color: #0d9c72;
}
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.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);
}

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;
}
.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;}

.select2-container .select2-selection--single {
    height: 40px;
    border-radius: 5px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 15px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 8px;
    right: 5px;
}
.select2-container--default .select2-selection--multiple {
    border-radius: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 3px;
    padding-left: 20px;
}


/*CORE*/
#content {
    margin-left: 280px;
    margin-top: 50px;
    padding-bottom: 100px;
}
.hms-btn {
    font-size: 12px;
    border-radius: 5px;
    padding: 6px 22px 7px 22px;
    position: relative;
}
.hms-btn.list-btn {
    padding-left: 15px;
}
.hms-btn .icon {
    width: 13px;
    height: 13px;
    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 {
    height: 38px;
    padding: 15px;
    border: 0px;
    border-radius: 5px;
    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-radius: 5px;
    border: 1px solid #cecece;
    background: url("../icons/chevron-down.svg") no-repeat right 14px center/14px 14px;
    background-color: rgb(255 255 255 / 1);
    color: rgb(0 0 0 / .7);
    padding: 10px 40px 10px 12px;
    height: unset;
    position: relative;
    font-size: 12px;
}
.custom-select {
    font-size: 12px !important;
}
.custom-select option {
    background-color: rgb(255 255 255 / 1);
}
.btn-sea {
    color: #fff !important;
    background-color: rgb(32 201 151) !important;
        border-color: rgb(32 201 151) !important;
}
.btn-sea:active,
.btn-sea:focus,
.btn-sea:hover {    
    color: #fff !important;
    background-color: rgb(24 183 136) !important;
        border-color: rgb(24 183 136) !important;
}
svg {
    vertical-align: middle;
}
.text-blue {color: #03a9f4 !important;}
.text-purple {color: #9c27b0 !important;}
.text-sea {color: rgb(32 201 151) !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: 11px;
}
.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: 5px;
    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: 5px;
}
.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(32 201 151);
}
.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: 11px;
}
.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: 13px;
}
.dropdown-item .icon {
    position: relative;
    width: 14px;
    height: 14px;
    opacity: .2;
    margin-right: 10px;
    top: -2px;
}
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: 5px;
    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(32 201 151);
}
.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(32 201 151);
    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);
}
.hms-card.profile-card {
    position: relative;
    background: white;
    background-image: url(../img/abstract-4.svg);
    background-repeat: no-repeat;
    background-position: 102% top;
    background-size: 30% auto;
}
.profile-card .card-content {
    padding-left: 50px;
}
.profile-card .profile-name {
    font-size: 18px;
    font-weight: 600;
}
.profile-card .profile-meta {
    opacity: 1;
    color: rgb(32 201 151);
}
.profile-card .profile-meta .meta-link {
    color: #ccc;
    cursor: pointer;
}
.profile-card .thumb {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(0px, -50%);
}

.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;
}
table tr.cargo-control:hover {
    background: none;
}
table tr.cargo-control td {
    border: 0px;
    padding: 5px !important;
}
.cargo-control td .item {
    position: relative;
    padding: 10px !important;
    background: rgb(0 0 0 / .04);
    border-radius: 5px;
    opacity: .3;
    cursor: pointer;
}
.cargo-control td:hover .item {
    background: rgb(0 0 0 / .06);
}
.cargo-control td .item.active {
    opacity: 1;
}
.cargo-control.one-third td {
    width: 33% !important;
}
.cargo-control .val {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0,-50%);
}
.cargo-control td {transition: all 0.1s ease-in-out;}
.cargo-control td:active {transform: scale(1.05) !important;}

.cargo-control td .item span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 100px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}
.cargo-control td .item .orange1 {background: rgba(255, 159, 64);}
.cargo-control td .item .red1 {background: rgba(255, 99, 132);}
.cargo-control td .item .grey1 {background: rgba(0 0 0 / .6);}
.cargo-control td .item .green1 {background: #4caf50;}
.cargo-control td .item .blue1 {background: #2196f3;}
.cargo-control td .item .blue2 {background: #03a9f4;}
.cargo-control td .item .blue3 {background: #00bcd4;}

.card-piers .pier-item {
    width: 10%;
    height: 50px;
    border: 1px solid #ececec;
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9c27b0;
    position: relative;
}
.card-piers .pier-item .pier-content {
    position: relative;
    font-weight: 700;
    font-size: 12px;
}
.card-piers .pier-item .opaque {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: .8;
}
.card-piers .pier-item.occupied .opaque {
    opacity: .2;
}
.card-piers .pier-item:hover > .opaque {
    opacity: .4;
}

.color-choices {
    margin: 0 -10px;
}
.color-choices .item {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    float: left;
    background: red;
    margin: 6px;
    cursor: pointer;
    border: 2px solid #ececec;
}
.color-choices .item.active,
.color-choices .item:hover {
    border: 2px solid #999;
}
.color-choices .item {transition: all 0.1s ease-in-out;}
.color-choices .item:active {transform: scale(1.2) !important;}

.pier-color {
    width: 16px;
    height: 16px;
    position: relative;
    border-radius: 100px;
    display: inline-block;
}
.card-piers .pier-item.pier-color1 {background: var(--pier-color1);}
.card-piers .pier-item.pier-color2 {background: var(--pier-color2);}
.card-piers .pier-item.pier-color3 {background: var(--pier-color3);}
.card-piers .pier-item.pier-color4 {background: var(--pier-color4);}
.card-piers .pier-item.pier-color5 {background: var(--pier-color5);}
.card-piers .pier-item.pier-color6 {background: var(--pier-color6);}
.card-piers .pier-item.pier-color7 {background: var(--pier-color7);}
.card-piers .pier-item.pier-color8 {background: var(--pier-color8);}
.card-piers .pier-item.pier-color9 {background: var(--pier-color9);}
.card-piers .pier-item.pier-color10 {background: var(--pier-color10);}
.card-piers .pier-item.pier-color11 {background: var(--pier-color11);}
.card-piers .pier-item.pier-color12 {background: var(--pier-color12);}
.card-piers .pier-item.pier-color13 {background: var(--pier-color13);}
.card-piers .pier-item.pier-color14 {background: var(--pier-color14);}
.card-piers .pier-item.pier-color15 {background: var(--pier-color15);}
.card-piers .pier-item.pier-color16 {background: var(--pier-color16);}
.card-piers .pier-item.pier-color17 {background: var(--pier-color17);}
.card-piers .pier-item.pier-color18 {background: var(--pier-color18);}
.card-piers .pier-item.pier-color19 {background: var(--pier-color19);}

.pier-slot-item.pier-color1 {background: var(--pier-color1);}
.pier-slot-item.pier-color2 {background: var(--pier-color2);}
.pier-slot-item.pier-color3 {background: var(--pier-color3);}
.pier-slot-item.pier-color4 {background: var(--pier-color4);}
.pier-slot-item.pier-color5 {background: var(--pier-color5);}
.pier-slot-item.pier-color6 {background: var(--pier-color6);}
.pier-slot-item.pier-color7 {background: var(--pier-color7);}
.pier-slot-item.pier-color8 {background: var(--pier-color8);}
.pier-slot-item.pier-color9 {background: var(--pier-color9);}
.pier-slot-item.pier-color10 {background: var(--pier-color10);}
.pier-slot-item.pier-color11 {background: var(--pier-color11);}
.pier-slot-item.pier-color12 {background: var(--pier-color12);}
.pier-slot-item.pier-color13 {background: var(--pier-color13);}
.pier-slot-item.pier-color14 {background: var(--pier-color14);}
.pier-slot-item.pier-color15 {background: var(--pier-color15);}
.pier-slot-item.pier-color16 {background: var(--pier-color16);}
.pier-slot-item.pier-color17 {background: var(--pier-color17);}
.pier-slot-item.pier-color18 {background: var(--pier-color18);}
.pier-slot-item.pier-color19 {background: var(--pier-color19);}

.color-choices .item.color1 {background: var(--pier-color1);}
.color-choices .item.color2 {background: var(--pier-color2);}
.color-choices .item.color3 {background: var(--pier-color3);}
.color-choices .item.color4 {background: var(--pier-color4);}
.color-choices .item.color5 {background: var(--pier-color5);}
.color-choices .item.color6 {background: var(--pier-color6);}
.color-choices .item.color7 {background: var(--pier-color7);}
.color-choices .item.color8 {background: var(--pier-color8);}
.color-choices .item.color9 {background: var(--pier-color9);}
.color-choices .item.color10 {background: var(--pier-color10);}
.color-choices .item.color11 {background: var(--pier-color11);}
.color-choices .item.color12 {background: var(--pier-color12);}
.color-choices .item.color13 {background: var(--pier-color13);}
.color-choices .item.color14 {background: var(--pier-color14);}
.color-choices .item.color15 {background: var(--pier-color15);}
.color-choices .item.color16 {background: var(--pier-color16);}
.color-choices .item.color17 {background: var(--pier-color17);}
.color-choices .item.color18 {background: var(--pier-color18);}
.color-choices .item.color19 {background: var(--pier-color19);}

.card-piers .pier-item.selected .opaque {
    opacity: 0;
}

.photo-suggestion .uploaded-photo {
    border-radius: 5px;
}
.photo-suggestion .uploaded-photo:hover {
    transform: scale(1.03) !important;
}
.photo-suggestion .arrival label {
    background: rgb(0 0 0 /.03);
    padding: 10px 25px 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}
.photo-suggestion .arrival.file-name label {
    background: #e3f2fd;
}
.photo-suggestion .arrival label:hover {
    background: rgb(0 0 0 /.07);
}
.photo-suggestion .arrival label.remove {
    background: #ffecb3;
}
.photo-suggestion .arrival input {
    position: relative;
    top: 2px;
    margin-right: 10px;
}
.photo-suggestion .arrival label, .photo-suggestion .uploaded-photo {transition: all 0.1s ease-in-out;}
.photo-suggestion .arrival label:active {transform: scale(1.1) !important;}

.photo-suggestion .img-container {
    position: relative;
}
.photo-suggestion .img-container .index {
    position: absolute;
    left: 15px;
    top: 15px;
    background: white;
    border-radius: 100px;
    padding: 5px 10px;
    font-weight: 600;
    display: block;
    font-size: 13px;
}
.drone-thumb {
    position: relative;
}
.drone-thumb.minimized {
    height: 100px;
    overflow: hidden;
    border-radius: 5px;
}
.drone-upload-viewe-thumb {
    border-radius: 5px;
}
.minus-5 {
    margin-left: -.5rem;
    margin-right: -.5rem;
}
.drone-thumb .index {
    position: absolute;
    left: 5px;
    top: 5px;
    background: #ffffffcc;
    border-radius: 100px;
    padding: 3px 5px;
    display: block;
    font-size: 12px;
}
.card-pier-legends table {
    width: 100%;
    margin: 0 -5px;
}
.card-pier-legends td {
    padding: 5px;
    width: 50%;
}
.card-pier-legends .legend-item {
    border-radius: 5px;
    padding: 10px;
    font-size: 13px;
    width: 100%;
    cursor: pointer;
    background: rgb(0 0 0 / .03);
    border: 2px solid rgb(0 0 0 / .0);
}
.card-pier-legends .legend-item.active {
    border: 2px solid rgb(32 201 151);
}
.card-pier-legends .legend-item:hover {
    opacity: .8;
}
.card-pier-legends .legend-item span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 100px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}
img.cargo-slot {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    position: relative;
    top: 0px;
}
.legend a,
.legend a:active,
.legend a:hover {
    color: #333 !important;
}
.legend-toggle {transition: all 0.1s ease-in-out;}
.legend-toggle:active {transform: scale(1.05) !important;}
.arrival-drone-photo {
    cursor: pointer;
}
.arrival-drone-photo img {
    width: 100%;
    transition: all 0.1s ease-in-out;
}
.arrival-drone-photo:hover img {
    transform: scale(1.02);
}
.arrival-drone-photo .time {
    font-size: 13px;
    color: #aaa;
}
.status-infographic-wrapper {
    border-radius: 5px;
    overflow: hidden;
}
.side-view-quicks .item {
    margin-bottom: 10px;
    border-radius: 5px;
    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: 5px;
    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;
}
.anchor-modal .modal-header .close {
    color: white;
    text-shadow: none;
}
.anchor-modal .modal-header h5 {
    font-size: 18px;
}
.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;
}
.permission-matrix {
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    margin-top: -1px;
    padding-bottom: 10px;
}
.permission-matrix:last-child {
    border-bottom: 0px;
}
.permission-matrix .title {
    font-weight: 600;
}
.permission-matrix .item {
    margin-bottom: 10px;
    margin-left: -2px;
}
.choice-item label {
    border-radius: 5px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 12px 15px 5px 15px;
    background: rgb(0 0 0 / .03);
}
.choice-item label.p1015 {
    padding: 10px 15px !important;
}
.choice-item label:hover {
    background: rgb(0 0 0 / .05);
}

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

.choice-item label input {
    position: relative;
    top: 2px;
    margin-right: 5px;
}
.hms-table td.has-thumb {
    padding-left: 25px !important;
    position: relative;
}
.hms-table td.has-thumb .thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    width: 16px;
    height: 16px;
    border-radius: 100px;
}
.inline-icon {
    width: 12px;
    height: 12px;
    position: relative;
    top: -1px;
    margin-right: 5px;
    opacity: .5;
}
.inline-icon-a {
    position: relative;
    width: 12px;
    height: 12px;
    top: -1px;
    opacity: .3;
}
.tr-mobile .thumb {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    top: -2px;
    margin-right: 3px;
}
.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: 15px;
    background: rgb(0 0 0 / .02);
    padding: 15px;
    position: relative;
    margin-bottom: 15px;
    font-size: 12px;
}
.activity-branch .creator {
    position: relative;
    padding-left: 38px;
    font-weight: 600;
    line-height: 20px;
    padding-right: 60px;
}
.activity-branch .thumb {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    left: 0;
    position: absolute;
    top: 48%;
    transform: translate(0, -50%);
}
.activity-branch .content {
    padding-left: 10px;
    border-left: 3px solid rgb(0 0 0 / .05);
    margin-top: 10px;
    margin-left: 38px;
    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 / .3);
    text-align: right;
}
.activity-branch .name {
}
.activity-branch .role {
    opacity: .3;
    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: 5px;
    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;
}
.disc-progress-wrapper {
    position: relative;
}
.disc-progress-bar {
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: rgb(0 0 0 / .05);
    margin-top: 5px;
    position: relative;
}
.disc-achieved {
    position: absolute;
    height: 15px;
    border-radius: 5px;
    background: rgb(86 145 169 / 1);
}
.lineup-position {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    font-weight: 600;
    float: left;
    margin-right: 15px;
    position: relative;
    top: 5px;
}
.lineup-position.current {
    background: #00bcd4;
}
.discharge-row-has-pier {
    padding-left: 60px !important;
    position: relative;
}
.discharge-row-has-pier .pier-info {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translate(0,-50%);
    text-align: center;
}
.discharge-row-has-pier .pier-info .top {
    opacity: .3;
}
.discharge-row-has-pier .pier-info .pier {
    font-weight: 600;
    font-size: 20px;
}
.discharge-row-has-pier .pier-info .pier .dropdown > a {
    color: #333333aa;
}
.has-drone-creative {
    position: relative;
    overflow: hidden;
}
.creative-drone-view {
    position: absolute;
    right: 20px;
    bottom: -130px;
    width: 150px;
}
.creative-drone-view img {
    width: 100%;
}
@media (min-width: 450px) {
    .creative-drone-view {
        bottom: -170px;
        width: 170px;
    }
}
@media (min-width: 500px) {
    .creative-drone-view {
        bottom: -380px;
        width: 250px;
    }
}
ul.hms-ul {
    padding-left: 1px;
    list-style: none;
}

ul.hms-ul li::before {
    content: "\2022";
    font-weight: bold;
    display: inline-block;
    width: 16px;
    opacity: .2;
    margin-left: 0px;
}
.quick-card {
    padding-bottom: 13px !important;
    position: relative;
    overflow: hidden;
}
.quick-card.blue {
    /*background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);*/
    background: #2196f3;
    color: white;
}
.quick-card.navy {
    /*background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);*/
    background: #3f51b5;
    color: white;
}
.quick-card.orange {
    background-image: linear-gradient( 228deg, #FEB692 10%, #EA5455 100%);
    color: white;
}
.quick-card.green {
    background-image: linear-gradient(229deg, #F4D03F 0%, #16A085 100%);
    color: white;
}
.quick-card.dashed {
    border: 2px dashed #ececec;
}
.quick-card .big {
    font-weight: 600;
}
.quick-card .title {
    opacity: .5;
}
.quick-card .expandable {
    cursor: pointer;
}
.quick-card .quick-title {
    font-size: 16px;
    font-weight: 700;
}
.quick-card .chevs {
    width: 18px;
    height: 18px;
    opacity: .3;
    position: relative;
    top: -2px;
    margin-left: 5px;
    transform: rotate(-90deg);
}
.quick-card .expandable:hover .title {
    opacity: .8;
}
.quick-card .expandable:hover .chevs {
    opacity: .8;
}
.quick-card-icon {
    width: 24px;
    height: 24px;
    opacity: .1;
    position: relative;
    top: -1px;
}
.card-img {
    position: absolute;
    right: 5px;
    top: -50px;
    width: 150px;
    opacity: .5;
    transform: scaleX(-1);
}
.card-img.pier {
    right: -1px;
    opacity: .3;
    width: 200px;
}
a.summary-btn {
    position: relative;
    border-radius: 5px;
    padding: 8px 15px;
    display: block;
    background: #f5f5f5;
}
a.summary-btn.blue {
    background-image: linear-gradient( 160deg , #0093E9 0%, #80D0C7 100%);
    color: white;
}
.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: 5px;
}
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%;
}
.sidebar-link.cta.has-spinner .spinner-border {
    opacity: .8;
    width: 100%;
    height: 100%;
}
.dashboard-ctas {
    margin-left: -10px;
    margin-right: -10px;
}
.dashboard-ctas > div {
    padding-left: 10px;
    padding-right: 10px;
}
.ctas-card {
    padding-left: 180px;
    overflow: hidden;
    position: relative;
    height: 100%;
}
.ctas-card .art {
    position: absolute;
    left: -90px;
    height: 130%;
    top: 50%;
    transform: translate(0,-50%);
    opacity: .7;
}
.ctas-card .card-content {
    position: relative;
}
.ctas-card .hms-btn {
    padding: 4px 22px 6px 22px;
}
.ctas-card .art {z-index: 100;}
.ctas-card .card-content {z-index: 120;}

@media (max-width: 992px) {
    .ctas-card .art {
        left: -110px;
    }
}
@media (max-width: 768px) {
    .ctas-card .art {
        left: -130px;
    }
}
@media (max-width: 576px) {
    .ctas-card .art {
        left: -180px;
    }
}
@media (max-width: 498px) {
    .ctas-card .art {
        left: -300px;
    }
}
a.status-link {
    padding: 10px 15px;
    border-radius: 5px;
    background: rgb(0 0 0 / .05);
    display: block;
    margin-bottom: 10px;
    color: #333;
}
a.status-link .icon {
    width: 14px;
    height: 14px;
    opacity: .3;
    margin-right: 8px;
    position: relative;
    top: -2px;
}
a.status-link:hover,
a.status-link:active,
a.status-link:focus {
    text-decoration: none !important;
    outline: none !important;
    background: rgb(0 0 0 / .1);
}
a.status-link.add-spinner .spinner-contain {
    left: 25px;
}
.gallery-row {
    margin-left: -10px;
    margin-right: -10px;
}
.gallery-row > div {
    padding-left: 10px;
    padding-right: 10px;
}
.card-photos {
    cursor: pointer;
}
.card-photos img {
    width: 100%;
    transition: all 0.1s ease-in-out;
}
.card-photos:hover img {
    transform: scale(1.02);
}
.card-photos .time {
    font-size: 13px;
    color: #aaa;
}
.tracker-item {
    padding: 10px 0;
    position: relative;
}
.tracker-item::before {
    content: " ";
    height: 70%;
    width: 2px;
    background: #33333311;
    position: absolute;
    left: 68px;
    top: 28px;
}
.tracker-item.current::before {
    background: rgb(32 201 151);
}
.tracker-item .title {
    opacity: .5;
    color: #333;
    position: relative;
}
.tracker-item .title::before {
    content: " ";
    height: 8px;
    width: 8px;
    background: #33333366;
    border-radius: 50%;
    position: absolute;
    left: -20px;
    top: 8px;
}
.tracker-item.current .title::before {
    background: rgb(32 201 151);
}
.tracker-item .mid {
    padding-left: 85px;
}
.tracker-item.current .title {
    opacity: 1;
    color: rgb(32 201 151);
}
.tracker-item .meta {
    font-size: 13px;
    opacity: .3;
}
.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;
}

.arrival-with-ship-icon {
    position: relative;
}
.arrival-with-ship-icon .ship-icon {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translate(0,-50%);
    width: 30px;
    height: 30px;
}
.arrival-with-ship-icon .info {
    padding-left: 35px;
}
@media (max-width: 576px) {
    .arrival-with-ship-icon .ship-icon {
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translate(0,-50%);
        width: 45px;
        height: 45px;
    }
    .arrival-with-ship-icon .info {
        padding-left: 55px;
    }
}
.link-style {
    text-decoration: none;
    color: rgb(32 201 151);
}
.link-style:hover,
.link-style:active,
.link-style:focus,
.link-style:visited {
    text-decoration: none !important;
    outline: none !important;
    color: rgb(32 201 151);
}
.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-a {
    position: relative;
    width: 14px;
    height: 14px;
    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: 3px;
}
.one-line .thumb.s15 {
    height: 15px;
    top: -2px;
}
.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;
}
.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: 5px;
    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: 5px;
    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: 5px;
    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(32 201 151);
}
.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: 5px;
}
.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(32 201 151);
}
.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: 5px;
    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;
}
.view-sea {
    border-radius: 5px;
    background: url(../img/sea-bg2.jpg);
    background-size: cover;
    padding: 25px;
    text-align: center;
}
.arrival-view-new .info-item p,
.arrival-view-new .value {
    font-size: 13px;
}
.arrival-view-new .tracker-item .title {
    font-size: 13px;
}
.arrival-view-new .tracker-item .pic {
    width: 40px;
    height: 40px;
}
.arrival-view-new .tracker-item .mid {
    padding-left: 75px;
}
.arrival-view-new .tracker-item:before {
    left: 58px;
}
.arrival-view-area {
    display: none;
}
.arrival-view-area.active {
    display: block;
}
.shots-wrapper {
}
.photo-card {
    overflow: hidden;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
.photo-card .desc {
    background: white;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
}
.photo-card:hover {
    transform: scale(1.03);
}
.shots-wrapper .row {
    margin-left: -5px;
    margin-right: -5px;
}
.shots-wrapper .row .photo-card {
    margin-left: -10px;
    margin-right: -10px;
}
.quick-card.float-card {
    position: relative;
    padding-bottom: 20px !important;
}
.float-card .quick-title {
    font-size: 24px;
}
.float-card .floating {
    font-size: 22px;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translate(0,-50%);
    font-weight: 600;
}
.rob-table {display: none;}
.rob-table.active {display: block;}
.rob-table-switcher {
    float: left;
    padding: 10px 25px 8px 20px;
    margin-right: 10px;
    background: rgb(0 0 0 / .05);
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
}
.rob-table-switcher:hover {
    background: rgb(0 0 0 / .1);
}
.rob-table-switcher.active,
.rob-table-switcher.active:hover {
    background: rgb(24 183 136);
    color: white;
}
.rob-table-switcher .icon{
    width: 16px;
    opacity: .5;
    position: relative;
    top: -2px;
    margin-right: 5px;
}
.anchor-pics {
    margin: -10px;
}
.anchor-pics .item {
    width: calc(25% - 20px);
    float: left;
    margin: 10px;
    display: block;
}
.anchor-pics .item .thumb {
    width: 100%;
    height: 130px;
    position: relative;
}
.anchor-pics .item .desc {
    font-size: 12px;
    margin-top: 10px;
}
.anchor-pics .item .title {
    font-weight: 700;
}
.anchor-pics .item .meta {
    opacity: .5;
}

.anchor-pics .item .more-photo {
    height: 130px;
    display: block;
    background: rgb(0 0 0 / .03);
    position: relative;
}
.anchor-pics .item .more-photo:hover {
    background: rgb(0 0 0 / .05);
}
.anchor-pics .item .more-photo .inside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
}
.anchor-pics .item .more-photo .icon {
    width: 16px;
    position: relative;
}
@media (min-width: 1366px) {
    .anchor-pics .item {width: calc(20% - 20px);}
    .anchor-pics .item .thumb {height: 150px;}
    .anchor-pics .item .more-photo {height: 150px;}
}
@media (max-width: 768px) {.anchor-pics .item {width: calc(33.33% - 20px);}}
@media (max-width: 500px) {.anchor-pics .item {width: calc(50% - 20px);}}
.anchor-pics.dashboard {
    position: relative;
}
.anchor-pics.dashboard .more-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgb(255 255 255 / .8);
    left: 0;
    top: 0;
    opacity: 0;
    transition: all 0.1s ease-in-out;
    pointer-events: none;
}
.anchor-pics.dashboard:hover .more-overlay {
    display: block;
    opacity: 1;
    pointer-events: unset;
}
.anchor-pics.dashboard .more-overlay .inside {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    font-weight: 600;
}
.anchor-pics.dashboard .more-overlay .spinner-contain {
    width: 30px;
    height: 30px;
    top: 40%;
}
.anchor-pics.dashboard .more-overlay .spinner-border {
    opacity: 1;
}
.photo-view .main {
    width: 100%;
}
.anchor-pics.view .item {
    width: calc(50% - 20px);
    float: left;
    margin: 10px;
    display: block;
    transition: all 0.1s ease-in-out;
}
.anchor-pics.view .item:active {
    transform: scale(1.05) !important;
}
.anchor-pics.view .item .thumb {
    width: 100%;
    height: 130px;
}
.anchor-pics.view .item .desc {
    font-size: 12px;
    margin-top: 5px;
}
.anchor-pics.view .item .title {
    font-weight: 700;
}
.anchor-pics.view .item .meta {
    opacity: .5;
}
.anchor-pics.view .item.active .desc {
    font-weight: 700;
}
.anchor-pics.view .item.active .meta {
    opacity: 1;
}
@media (min-width: 1400px) {
    .anchor-pics.view .item {width: calc(33.33% - 20px);}
    .anchor-pics.view .item .thumb {height: 100px;}
    .anchor-pics.view .item .more-photo {height: 150px;}
}
@media (max-width: 1400px) {
    .anchor-pics.view .item .thumb {height: 100px;}
}
@media (max-width: 768px) {.anchor-pics.view .item {width: calc(50% - 20px);}}
@media (max-width: 500px) {.anchor-pics.view .item {width: calc(50% - 20px);}}

.view-album .title {
    font-size: 20px;
    font-weight: 600;
}
.view-album .meta {
    opacity: .5;
    font-size: 13px;
}
.anchor-pics.view .item .thumb {
    position: relative;
}


.anchor-pics .item .thumb .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
}
.anchor-pics .item .thumb .spinner-contain {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
}
.anchor-pics .item .thumb .spinner-border {
    width: 100%;
    height: 100%;
}
.anchor-pics .item:hover .thumb .overlay {
    display: block;
    background: rgb(255 255 255 / .2);
}
.anchor-pics .item.loading:hover .thumb .overlay,
.anchor-pics .item.loading .thumb .overlay {
    display: block;
    background: rgb(255 255 255 / .8);
}
.anchor-pics .item.loading .thumb .spinner-contain {
    display: block;
}




.anchor-pics.view .item .thumb .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
}
.anchor-pics.view .item .thumb .spinner-contain {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
}
.anchor-pics.view .item .thumb .spinner-border {
    width: 100%;
    height: 100%;
}
.anchor-pics.view .item:hover .thumb .overlay {
    display: block;
    background: rgb(255 255 255 / .2);
}
.anchor-pics.view .item.loading:hover .thumb .overlay,
.anchor-pics.view .item.loading .thumb .overlay {
    display: block;
    background: rgb(255 255 255 / .8);
}
.anchor-pics.view .item.loading .thumb .spinner-contain {
    display: block;
}
.photo-view {
    position: relative;
}
.photo-tools {
    position: absolute;
    top: 20px;
    left: 20px;
}
.photo-tools .item {
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}
.photo-tools .bubble {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: rgb(32 201 151);
    transition: all 0.1s ease-in-out;
    position: relative;
}
.photo-tools .bubble .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    color: rgb(255 255 255 / .8);
}
.photo-tools .item:hover .text {
    opacity: 1;
}
.photo-tools .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;
}
.trans-progress {
    width: 100%;
}
.trans-progress .achieve-bar {
    height: 18px;
    background: #ccc;
    float: left;
    width: 75%;
    position: relative;
}
.trans-progress .number {
    float: right;
    width: 20%;
}
.trans-progress .achieve-bar .achieved {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(32 201 151);
}
.resource-box {
    padding: 10px;
    background: rgb(0 0 0 / .05);
    border-radius: 5px;
    font-size: 11px;
}
.resource-box .info-row {
    font-size: 13px;
    margin-bottom: 10px;
}
.merge-arrow {
    position: relative;
}
.merge-arrow img {
    position: absolute;
        left: 50%;
        top: 0px;
        transform: translate(-50%,0);
        width: 165px;
}
.row-img-wrapper {
    margin: 0 -3px;
}
.row-img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    overflow: hidden;
    float: left ;
    margin: 4px 2px;
    transition: all 0.1s ease-in-out;

}
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);
    font-size: 12px;
    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: 5px;
    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: 5px;
    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: 5px;
    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: 50%;
    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-circle.blue8 {background: #313e42;}
.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;
}
th.sortable:hover {
    color: rgb(32 201 151);
}
th.sortable.in-filter {
    color: rgb(32 201 151);
}
th.sortable.in-filter:after {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    margin-left: 5px;
    content:'';
    position: relative;
    top: -1px;
    opacity: .5;
}
th.sortable.in-filter.desc:after {
    border-top: 4px solid #333;
    border-right: 4px solid transparent;
    border-bottom: 0 dotted;
    border-left: 4px solid transparent;
}
th.sortable.in-filter.asc:after {
    border-bottom: 4px solid #333;
    border-right: 4px solid transparent;
    border-top: 0 dotted;
    border-left: 4px solid transparent;
    top: -2px;
}
.real-time-dot {
     width: 11px;
     height: 11px;
     margin-right: 3px;
     border-radius: 50%;
     background: #00bcd4;
     display: inline-block;
     position: relative;
     top: 1px;
}
.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;
     }
 }

.hms-card.no-bg {
 background: unset;
}
.hms-table.table-white td {
 background: white;
}
tr.group-head th {
 padding-top: 25px;
}
.btn-option {
 padding-left: 18px;
 padding-right: 18px;
}
.btn-option .icon {
 width: 16px;
 height: 16px;
 position: relative;
 top: -2px;
 margin-right: 5px;
}
@media (max-width: 1100px) {
    .hms-table.mobile-fix th {
        min-width: 150px;
    }
}
.glance-wrap {
    padding: 30px 10px;
}
.glance-big {
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 28px;
}
.glance-big sup {
    font-size: 14px;
    opacity: .3;
}
.glance-meta {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    opacity: .5;
}
.glance-meta.color {
    color: rgb(32 201 151);
    opacity: 1;
}
.glance-thumb-title {
    position: relative;
    margin-bottom: -35px;
}
.glance-thumb-title .title {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    padding: 20px 10px;
}
.glance-thumb-title .thumb {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}

#system-tray {
    font-family: 'Rubik', sans-serif;
}
.tray-alarms {
    width: 500px;
    position: fixed;
    right: 25px;
    bottom: 0;
    background: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    z-index: 250;
    transform: translate(0,400px);
    transition: all 0.1s ease-in-out;
}
.tray-alarms.active {
    transform: translate(0,0);
}
.tray-head {
    background: #292B38;
    color: white;
    padding: 15px;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-weight: 500;
    cursor: pointer;
}
.tray-head:hover {
    background: #2F3456;
}
.tray-body {
    position: relative;
    height: 400px;
    overflow: auto;
    padding-bottom: 100px;
}
.tray-head .toggle-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0,-50%);
    width: 18px;
    height: 18px;
    opacity: 1;
}
.tray-head .overdue {
    position: absolute;
    right: 55px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    top: 50%;
    transform: translate(0,-50%);
    color: #FD1F9B;
    font-weight: 700;
}
.tray-head .toggle-icon.close {
    display: none;
}
.tray-alarms.active .toggle-icon.close {
    display: block;
}
.tray-alarms.active .toggle-icon.open {
    display: none;
}
.system-tray-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / .6);
    top: 0;
    z-index: 240;
    display: none;
}
.system-tray-overlay.active {
    display: block;
}
.alarm-item {
    background: #FAFAFA;
    border-top: 1px solid #DADADA;
    border-bottom: 1px solid #DADADA;
    margin-top: -1px;
    padding: 15px 15px;
    position: relative;
}
.alarm-item.overdue {
    background: #FFEAF6;
    border-top: 1px solid #FD269E;
    border-bottom: 1px solid #FD269E;
}
.alarm-item.header {
    padding: 10px 15px;
}
.alarm-item .left {
}
.alarm-item .left.has-thumb {
    padding-left: 55px;
    padding-right: 120px;
}
.alarm-item .thumbl {
    position: absolute;
    left: 15px;
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translate(0,-50%);
}
.alarm-item .right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0,-50%);
    text-align: right;
}
.alarm-item .right .time {
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
}
.alarm-item .right .time-meta {
    font-size: 12px;
}
.alarm-item .desc {
    opacity: .5;
    padding: 10px 0;
}
.alarm-item.overdue .right .time {
    color: #FD1F9B;
}
@media (max-width: 726px) {
    .tray-alarms {
        width: 100%;
        position: fixed;
        right: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .tray-head {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

body.figma-dash #content {
    font-family: 'Rubik', sans-serif;
}
.dashboard-hero {
    background: url(../img/aerials/4425125.jpg) no-repeat center;
    background-size: cover;
    height: 500px; 
    position: relative;
}
.hero-welcome {
    background: #00bcd4;
    border-radius: 5px;
    padding: 25px 70px 25px 30px;
    color: white;
    position: absolute;
    bottom: 70px;
    left: 10px;
}
.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%);
}
.hero-description {
    position: absolute;
    top: 30px;
    left: 10px;
    color: white;
}
.hero-description h1 {
    padding: 0;
    margin: 0;
    line-height: 24px;
    font-size: 20px;
}
.hero-description .meta {
    font-weight: 300;
}
.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: 5px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.figma-card.grey {background: #E9E9E9;}
.figma-card.fh-100 .content {height: 100px;}
.figma-card.fh-300 .content {height: 300px;}
.figma-card .head {
    border-bottom: 1px solid #DADADA;
    padding: 18px 20px;
    padding-left: 60px;
    position: relative;
}
.figma-card .head.no-bb {border-bottom: 0px;}
.figma-card .head h1 {
    font-size: 16px;
    line-height: 18px;
    margin: 0;
    padding: 0;
}
.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 .content {
    padding: 20px;
    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: 26px;
    line-height: 26px;
    font-weight: 500;
    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.blue {background: #00bcd4cc;}
.counter-val .cue.red {background: #F2AFC2cc;}
.counter-val .cue.green {background: #97C1A9cc;}
.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: #97C1A9;
    font-weight: 500;
}

.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: 5px;
    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: 15px 30px;
    background: white;
    margin-right: 5px;
    display: inline-block;
    border-radius: 5px;
    line-height: 12px;
    padding-left: 48px;
    position: relative;
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}
.roundx-item.active {
    background: #00bcd4;
    color: white;
}
.roundx-item:hover {
}
.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: 22px;
    height: 22px;
    opacity: .2;
    left: 15px;
    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;
}



table.data-table  {
    font-size:  12px !important;
}
table.dataTable thead th, 
table.dataTable thead td {
    border-bottom: 0px !important;
}
table.dataTable thead th, 
table.dataTable tfoot th {
    font-weight: normal !important;
}
table.dataTable.no-footer {
    border-bottom: 1px solid #ececec !important;
}
table.dataTable.hms-table th {
    font-weight: bold !important;
}
table.dataTable.hms-table td {
    border-bottom: 0px !important;
}
.dataTables_info,
.dataTables_paginate {
    font-size: 12px !important;
}
table.dataTable.hms-table th,
table.dataTable.hms-table td {
    padding: 10px 5px;
}
.dataTables_info {
    color: #cecece !important;
    font-style: italic;
    padding: 10px 5px;
    padding-left: 1rem!important;
}
.dataTables_wrapper .dataTables_filter input {
    padding: 5px 15px !important;
    margin-top: 0 !important;
    border-radius: 50px !important;
    border: 0px solid #ddd !important;
    background: #ececec !important;
}
.dataTables_wrapper .dataTables_filter input:focus-visible,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
}
.dataTables_filter {
    padding: 3px !important;
    padding-right: 10px !important;
    font-size: 12px !important;
}
.dataTables_filter label {
    margin-bottom: 0px !important;
}
.dataTables_info,
.dataTables_filter {
    float: left !important;
    width: 50%;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border:  0 !important;
}
html body.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html body.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    border:  0 !important;
    color: #0d9c72 !important;
    background: unset !important;
    box-shadow: none;
}
.form-about {
    background: #333;
    color: white;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 10px;
    padding: 8px 15px;
}
.sgx-title {
    background: white;
    padding: 18px 15px;
    border-bottom: 1px solid #ececec;
}
.sgx-title h1 {
    font-size: 14px;
    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 .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;
    opacity: .5;
    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;}

.sgx-table.compact .table th, 
.sgx-table.compact .table td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.table-wrapper {
    overflow: auto;
    white-space: nowrap;
}
.table-wrapper.boxed {
    margin: 15px;
}
.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-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-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-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;
}
.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: -2px;
    margin-right: 5px;
}
.sgx-title .separate {
    width: 14px;
    height: 14px;
    opacity: .3;
    position: relative;
    top: -2px;
}
.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;
    top: -2px;
    margin-right: 3px;
}
.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: 24px;
    font-weight: 700;
    line-height: 24px;
}
.sgx-stats .item .small-val {
    opacity: .5;
}

td.input-td {
    padding: 0 !important;
}
td.input-td input {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #00000000;
    border-radius: 0px;
    font-size: 12px;
    line-height: 12px;
    background: none;
    width: 100%;
    height: 34px;
}
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: 34px;
    width: 100%;
    border: 1px solid #00000000;
    background: none;
}
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;
}
.select2-dropdown {
    border-radius: 0;
    border: 1px solid #ececec;
}
.select2-search--dropdown {
    padding: 0;
}
body .select2-search--dropdown input {
    padding: 0;
}
.input-td .select2-selection:focus,
.select2-search--dropdown input:focus {
    outline: none !important;
    border: 0;
}
.cell-title {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    line-height: 20px;
}
.input-td textarea {
    padding: 5px;
    padding-left: 15px;
}

.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%;
}
.modal-content {
    border: 0;
    border-radius: 0;
}
.modal-desc {
    background: #292b38;
    color: #ffffffdd;
    padding: 8px 15px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.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;}

/*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;
}

.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;
}
img.sgx-icon-img {
    height: 41px;
    width: 41px;
}
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;
}

.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;
}

.checkbox-td label {
    margin: 0;
    padding: 8px 15px;
    cursor: pointer;
    line-height: 6px;
}
.checkbox-td input {
    margin: 0;
    margin-top: 3px;
}

.bg-light-yellow, tr:hover .bg-light-yellow {background: #fff8e1cc !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-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;}


.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;
}

.td-liner {
    margin-bottom: 10px;
}
.td-liner span {
    color: rgb(32 201 151);
}
.td-liner:last-child {
    margin-bottom: 0px;
}