.page-content {
    width: 100%;
    padding-top: 20px;
    min-height: calc(100vh - 75px);
    padding-left: 4px;
    padding-right: 4px;
}

.blocks {
    margin-top: 20px;
}

.block-section {
    padding: 15px 8px 15px 8px;
    border-radius: 8px;
    margin: 0px;
    margin-top: 30px;
}

.block-all {
    background-color: #0B7A6B;
}

.block-normal {
    background-color: #008140;
}

.block-caution {
    background-color: #FBBC12;
}

.block-critical {
    background-color: #DB3B21;
}

.block-progress {
    background-color: #334986;
}

.block-overdue {
    background-color: #212337;
}

.block-vessels {
    background-color: #44546a;
}

.table .status-col {
    display: inline-block;
    border-radius: 6px;
    color: #fff;
    text-transform: capitalize;
    padding: 6px 13px;
}

.block-count {
    font-size: 25px;
    margin-top: 4px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.block-text {
    font-size: 23px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    margin-top: 2px;
}

.custom-input-textarea {
    border: 1px solid #000 !important;
    border-radius: 3px;
    width: 100%;
    padding: 5px;
    font-size: 12px;
}

.status-section {
    cursor: pointer;
}

.custom-select-gulf {
    position: relative;
    display: block;
    max-width: 400px;
    min-width: 100px;
    margin: 0 auto;
    border: 1px solid #3C1C78;
    background: #243271;
    border-radius: 3px;
    z-index: 10;
}

    .custom-select-gulf select {
        border: none;
        outline: none;
        background: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
        margin: 0;
        display: block;
        width: 100%;
        padding: 5px 45px 5px 15px;
        font-size: 14px;
        color: #fff;
    }

    .custom-select-gulf option {
        background: #243271;
    }

    .custom-select-gulf:after {
        position: absolute;
        right: 0;
        top: 5px;
        width: 35px;
        line-height: 20px;
        content: '\2228';
        text-align: center;
        color: #fff;
        font-size: 15px;
        border-left: 1px solid #fff;
        z-index: -1;
    }

.main-header .right-nav {
    width: 100%;
    float: left;
    height: 51px;
}

.wrap .bg-wrap:after {
    position: absolute;
    top: 0;
    left: -40px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 40px 40px;
    border-color: transparent transparent #413c69 transparent;
    z-index: -1;
}

.skin-blue .main-header li.user-header {
    background-color: #243271;
}

.main-header .right-nav .nav > li > a > .label {
    position: absolute;
    top: 6px;
    right: 13px;
    text-align: center;
    font-size: 9px;
    padding: 5px 5px;
    line-height: .9;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
}

.main-header .right-nav .label-warning {
    background-color: #000;
}

.main-header .right-nav .fa-bell-o {
    font-size: 16px;
}

.main-header .navbar-custom-menu .nav > li > a:focus, .main-header .navbar-custom-menu .nav > li > a:hover {
    background: transparent !important;
}

.page-nav {
    position: relative;
}

    .page-nav .navbar {
        border: 0px;
        border-radius: 0px;
    }

.main-header .navbar-nav > li > a {
    padding: 16px 14px;
}

.page-nav .navbar-default {
    background: #F26423;
    margin: 0px;
    width: 100%;
    float: right;
    min-height: auto;
    position: relative;
    height: 50px;
}

    .page-nav .navbar-default:after {
        position: absolute;
        top: 0;
        left: -39px;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0px 0 50px 39px;
        border-color: transparent transparent #F26423 transparent;
        z-index: -1;
    }

.main-header .navbar-default .navbar-nav > li > a {
    color: #fff;
}

.main-header .navbar-default .navbar-nav {
    float: right;
}

    .main-header .navbar-default .navbar-nav > li > a:focus, .main-header .navbar-default .navbar-nav > li > a:hover {
        color: #fff;
    }

    .main-header .navbar-default .navbar-nav > .open > a, .main-header .navbar-default .navbar-nav > .open > a:focus, .main-header .navbar-default .navbar-nav > .open > a:hover {
        background: #243271;
        color: #fff;
    }

.main-header .dropdown-menu > li > a:hover {
    background-color: #243271;
    color: #fff;
}

.sidebar-menu li.active > a > .fa-angle-right {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg) translate(50%,35%);
}

.sidebar-menu > li + li {
    margin-top: 0px;
}

.sidebar .treeview.active {
    background: #243271;
    color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

    .sidebar .treeview.active a {
        color: #fff;
    }

    .sidebar .treeview.active > a {
        padding-left: 5px;
    }

.sidebar-menu .treeview.active ul > li > a {
    color: #fff;
}

.sidebar-menu .treeview.dashboard {
    border-radius: 15px;
    background: #243271;
}

    .sidebar-menu .treeview.dashboard a {
        color: #fff;
        padding-left: 5px;
    }

.slider-part .item img {
    display: block;
    width: 100%;
}

.slider-part .carousel-item img {
    display: block;
    width: 100%;
}

.slider-part .carousel-caption {
    top: 42%;
    padding: 0;
    left: 0;
    right: 0;
    bottom: initial;
}

    .slider-part .carousel-caption h1 {
        font-size: 40px;
        font-weight: 600;
        margin: 0px;
        font-style: italic;
    }

.slider-part .carousel-indicators li {
    background: #fff;
}

    .slider-part .carousel-indicators li.active {
        width: 25px;
    }

.activeMenu {
    color: #F26423 !important;
    font-weight: bold;
}

.for-design {
    padding: 15px;
}

.wlcm-user {
    margin: 0 0 15px;
}

    .wlcm-user h3 {
        margin: 0px;
        color: #000;
        font-size: 2.3rem;
        font-weight: bold;
    }

    .wlcm-user .custom-select-gulf {
        float: right;
    }

.custom-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.form-horizontal .control-label {
    font-weight: 600;
}

.left-label .control-label {
    float: left;
}

.lube-oil .top-head h2 {
    width: 94%;
    float: left;
}

.block-left {
    margin: auto;
    text-align: center;
}

.close-icon {
    margin-left: 8px;
    margin-top: 8px;
}

.popup-body-section {
    width: 100%;
    float: left;
}

.close-link {
    float: right;
    right: 20px;
    margin-top: 6px;
    cursor: pointer;
    color: #000;
    position: absolute;
}

.error-message {
    color: red;
    font-size: 12px;
    float: left;
}

.common-col {
    position: relative;
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
}

.modal-target {
    cursor: pointer;
}

.success-message-section {
    margin-bottom: 5px !important;
}

.success-message {
    color: green;
    font-size: 14px;
    font-weight: bold;
}

.wlcm-user .col-md-4 {
    padding-left: 0px;
}

.chart-part .col-md-8 {
    padding-right: 0px;
}

.chart-part .col-md-4 {
    padding-left: 0px;
}

.chart-part .oil-chart {
    margin: 0 0 15px;
}

.chart-part .white-design {
    background: #FFFFFF;
    border-radius: 8px;
}

.chart-part .space-seprator {
    margin: 0 20px;
}

.chart-part .white-box {
    padding: 10px 0;
}

    .chart-part .white-box .oil-heading {
        display: flex;
        align-items: flex-start;
        height: 30px;
    }

        .chart-part .white-box .oil-heading h4 {
            font-size: 12px;
            color: #333176;
            margin: 0px;
            font-weight: 600;
            margin-left: 4px;
        }

    .chart-part .white-box .number {
        font-weight: 600;
        font-size: 22px;
        display: block;
        margin-left: 22px;
        margin-bottom: 0px;
    }

        .chart-part .white-box .number.blue {
            color: #333176;
        }

.chart-part .orange {
    color: #F57D20 !important;
}

.chart-part .green {
    color: #1A7066 !important;
}

.chart-part .chart-image {
    text-align: center;
    margin: 0 0 15px;
}

    .chart-part .chart-image canvas {
        height: 90px;
        width: 90px;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }

.chart-part .chart-values {
    width: 100%;
    text-align: center;
    float: left;
}

    .chart-part .chart-values .middle {
        margin: 0 20px;
    }

.chart-part .check-status {
    float: left;
    width: 33%;
}

.chart-part .output-value {
    color: #333176;
    font-weight: 600;
    margin: 0px;
    font-size: 20px;
}

.chart-part .output-status {
    margin: 0px;
    font-size: 12px;
}

.chart-part .normal {
    color: #008140;
}

.chart-part .caution {
    color: #FBBC12;
}

.chart-part .critical {
    color: #DB3B21;
}

.chart-part .outer-design {
    background: #334986;
    border-radius: 8px;
}

    .chart-part .outer-design.black {
        background: #212337;
    }

    .chart-part .outer-design.newgreen {
        background: #3790b7;
    }
    .chart-part .outer-design.orange {
        background: #F26423;
    }

.chart-part .progress-box {
    padding: 5px 0;
    cursor: pointer;
}

    .chart-part .progress-box .progress-heading {
        display: flex;
        align-items: flex-start;
        margin: 0 0 5px;
    }

        .chart-part .progress-box .progress-heading h4 {
            font-size: 12px;
            color: #fff;
            margin: 0px;
            margin-left: 5px;
        }

    .chart-part .progress-box .number {
        font-weight: 600;
        color: #fff;
        font-size: 22px;
        display: block;
        margin-bottom: 2px;
    }

.chart-part .modal-part {
    margin: 0 0 15px;
}

.progress-box .dot-list {
    display: flex;
}

    .progress-box .dot-list p + p {
        margin-left: 5px;
    }

    .progress-box .dot-list .p-number {
        color: #fff;
        margin-bottom: 0px;
        font-size: 12px;
    }

.mlr-design {
    background: #243271;
    padding: 10px 2px 2px;
    border-radius: 4px;
    height: 188px;
}

    .mlr-design.orange-box {
        background: #F26423;
        margin-left: 22px;
    }

    .mlr-design h2 {
        margin: 0 0 10px;
        color: #fff;
        padding: 0px 13px;
        font-weight: 600;
        font-size: 16px;
    }

    .mlr-design .white-inside {
        background: #fff;
        padding: 13px;
    }

    .mlr-design .vessel {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;
    }

        .mlr-design .vessel .approved-content {
            display: flex;
            align-items: flex-start;
        }

            .mlr-design .vessel .approved-content img {
                margin-top: 4px;
            }

            .mlr-design .vessel .approved-content p {
                margin: 0 0 0 10px;
                min-height: 40px;
            }

    .mlr-design .View-all {
        text-align: right;
    }

        .mlr-design .View-all a {
            display: inline-block;
            background: #F26323;
            color: #fff;
            padding: 5px 15px;
            border-radius: 15px;
        }

        .mlr-design .View-all.blue a {
            background: #243271;
        }

.notifications {
    background: #243271;
    padding: 10px 2px 2px;
    border-radius: 4px;
}

    .notifications h3 {
        margin: 0 0 10px;
        color: #fff;
        padding: 0px 10px;
        font-weight: 600;
        font-size: 16px;
    }

    .notifications .noti-inside {
        background: #fff;
        padding: 7px 10px;
        height: 480px;
        overflow: auto;
    }

    .notifications .noti-section {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
    }

        .notifications .noti-section img {
            margin-top: 3px;
        }

        .notifications .noti-section p {
            font-weight: 600;
            margin: 0 0 0 10px;
        }

.lube-oil .modal-content {
    border-radius: 13px;
}

.lube-oil .modal-body {
    padding: 25px;
}

.lube-oil .top-head {
    text-align: center;
    margin: 0 0 25px;
}

    .lube-oil .top-head h2 {
        color: #243271;
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 25px;
    }

.filter-part {
    display: flex;
    justify-content: center;
}

    .filter-part .custom-select-gulf {
        border: 1px solid #9C9A9A;
        background: transparent;
    }

        .filter-part .custom-select-gulf select {
            color: #000;
            font-size: 12px;
            padding: 6px 30px 3px 10px;
        }

        .filter-part .custom-select-gulf:after {
            border-left: 1px solid #000;
            color: #000;
            line-height: 10px;
            font-size: 12px;
            top: 9px;
            width: 25px;
        }

        .filter-part .custom-select-gulf option {
            background: #fff;
        }

.content-wrapper {
    min-height: 950px !important;
}

.date-pick {
    position: relative;
    display: block;
    border: 1px solid #000;
    background: #fff;
    border-radius: 3px;
    z-index: 10;
    color: #000;
    font-size: 12px;
    padding: 5px 50px 4px 10px;
    margin: 0;
}

    .date-pick:after {
        position: absolute;
        right: 0;
        top: 8px;
        width: 35px;
        line-height: 11px;
        font-family: "FontAwesome";
        content: "\f073";
        text-align: center;
        color: #000;
        font-size: 15px;
        border-left: 1px solid #000;
        z-index: -1;
    }

.submit {
    background: #F26423;
    color: #fff;
    text-align: center;
    border-radius: 15px;
    padding: 7px 30px;
    line-height: 30px;
    margin-left: 15px;
}

    .submit:hover {
        color: #fff;
    }

    .submit:focus {
        color: #fff;
    }

    .submit:active {
        color: #fff;
    }

.orange-btn {
    background: #F26423 !important;
}

.custom-dashboard-select {
    border: 1px solid #000 !important;
    border-radius: 3px;
}

.form-horizontal .custom-dashboard-select {
    margin-top: 6px;
}

.form-horizontal .date-pick {
    margin-top: 6px;
}

.form-horizontal .custom-input-textbox {
    margin-top: 6px;
}

.form-horizontal .custom-input-textarea {
    margin-top: 6px;
}

.form-horizontal .custom-input-file {
    margin-top: 6px;
}

.custom-input-textbox {
    border: 1px solid #000 !important;
    border-radius: 3px;
    width: 100%;
    padding: 5px;
    font-size: 12px;
}

.control-value {
    font-weight: normal;
    font-size: 14px;
    width: 100%;
}

.popup-view-section .control-label {
    font-size: 14px;
}

.center-footer {
    margin: auto;
}

.dropdown-toggle {
    height: 28px;
    min-height: 28px;
    border-radius: 3px !important;
    font-size: 12px;
}

.filter-part {
    display: flex;
    justify-content: center;
    width: 95%;
    margin: 0 auto;
}

.lube-oil .table {
}

.lube-oil .table-striped > thead {
    background-color: #F5F6F7;
}

    .lube-oil .table-striped > thead th {
        text-align: center;
    }

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

.lube-oil .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #F5F6F7;
}

.lube-oil .table-striped > tbody > tr td {
    text-align: center;
}

.lube-oil .table .serial {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .lube-oil .table .serial p {
        margin: 0 0 0 5px;
        text-align: left;
    }

        .lube-oil .table .serial p small {
            color: #8A8B8E;
            font-size: 8px;
            display: block;
        }

.lube-oil .table .status {
    display: inline-block;
    background: #008140;
    padding: 6px 13px;
    border-radius: 6px;
    color: #fff;
}

    .lube-oil .table .status.yellow {
        background: #FBBC12;
    }

    .lube-oil .table .status.pink {
        background: #DB3B21;
    }

.lube-oil .paginate a {
    background: #F1F1F2;
    border-radius: 8px;
    color: #000 !important;
    padding: 5px 10px;
    text-align: center;
    font-size: 12px;
}

.selectpicker {
    width: 100%;
    height: 30px;
}

.seprator-bar {
    padding-top: 5px;
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
}

.noti-section i {
    margin-top: 3px;
}

.copyright-section {
    position: absolute;
    bottom: -10px;
    left: 122px;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: bold;
    color: #000;
    width: 100%;
}

    .copyright-section p {
        margin-bottom: 5px;
    }

.chart-hyperlink {
    color: #243271 !important;
    font-style: italic;
    cursor: pointer;
    font-weight: 500;
}

.technical-section {
    padding: 15px 50px 15px 50px;
}

    .technical-section .technical-title label {
        font-size: 20px;
        font-weight: 600 !important;
        margin-bottom: 12px;
    }

    .technical-section .technical-description label {
        font-size: 14px;
        font-weight: normal !important;
        margin-bottom: 14px;
    }

    .technical-section .technical-readmore {
        text-align: right;
    }

.title-page {
    text-align: center
}

    .title-page h2 {
        color: #243271;
        font-size: 24px;
        font-weight: 600;
        text-align: center
    }

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

.visit-btn {
    background-color: #243271;
    margin-top: 0px;
}

.top-bulletins {
    height: 91px;
    overflow: auto;
}

.top-mlr {
    height: 91px;
    overflow: auto;
}

.overdue-tabs {
    float: left;
    width: 100%;
}

.customtab {
    width: 100%;
}

.tab-content {
    width: 100%;
}

.tooltip-section {
    font-size: 12px;
    max-height: 100px;
    width: 200px;
    overflow: auto;
    text-align: left;
}

.tooltip {
    position: fixed;
}

.overdue-tabs .dt-buttons {
    float: right;
}


.dataTables_filter .form-control {
    font-size: 14px;
}

.add-access {
    display: inline;
}
.edit-access {
    display: inline;
}
.delete-access {
    display: inline;
}
.no-add-access {
    display: none;
}
.no-edit-access {
    display: none;
}
.no-delete-access {
    display: none;
}

@media (min-width: 768px) {
    .md4 {
        -ms-flex: 0 0 31%;
        flex: 0 0 31%;
        max-width: 31%;
    }

    .md6 {
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
        max-width: 48%;
    }

    .lube-oil {
        width: 720px;
    }
}

@media (max-width: 1299px) {
    .main-header .navbar-nav > li > a {
        padding: 5px 8px;
    }

    .main-header .right-nav .nav > li > a > .label {
        top: 6px;
    }

    .main-header .navbar-custom-menu .navbar-nav > li > a {
        padding: 14px 15px;
    }

    .notifications .noti-inside {
        height: 479px;
    }

    .top-bulletins {
        height: 90px;
    }

    .top-mlr {
        height: 90px;
    }
}

@media (max-width: 1199px) {
    .page-nav {
        display: none;
    }

        .page-nav .navbar-header {
            float: none;
        }

        .page-nav .navbar-left, .navbar-right {
            float: none !important;
        }

        .page-nav .navbar-toggle {
            display: block;
        }

        .page-nav .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }

        .page-nav .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;
        }

        .page-nav .navbar-collapse.collapse {
            display: none !important;
        }

        .page-nav .navbar-nav {
            float: none !important;
            margin-top: 7.5px;
        }

            .page-nav .navbar-nav > li {
                float: none;
            }

                .page-nav .navbar-nav > li > a {
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

        .page-nav .collapse.in {
            display: block !important;
        }

        .page-nav .navbar-default:after {
            display: none;
        }

        .page-nav .navbar-default {
            position: absolute;
            right: 0;
        }

        .page-nav .navbar-toggle {
            padding: 10px 15px;
            background-color: #243271;
        }

        .page-nav .navbar-default .navbar-toggle:focus, .page-nav .navbar-default .navbar-toggle:hover {
            background-color: #243271;
        }

        .page-nav .navbar-default .navbar-toggle .icon-bar {
            background-color: #fff;
        }

    .md4 {
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
    }

    .chart-part .white-design {
        margin-bottom: 15px;
    }

    .chart-part .outer-design {
        margin-bottom: 15px;
    }

    .md6 {
        -ms-flex: 0 0 45%;
        flex: 0 0 45%;
        max-width: 45%;
    }

    .mlr-design .vessel .approved-content p {
        min-height: 60px;
    }

    .chart-part .technical-part {
        margin: 0 0 15px;
    }
}

@media (max-width: 991px) {
    .chart-part .col-md-8 {
        padding-right: 15px;
    }

    .chart-part .col-md-4 {
        padding-left: 15px;
    }
}

@media (max-width: 767px) {
    .main-header .logo {
        text-align: center;
    }

    .main-header .right-nav {
        width: 100%;
        float: none;
    }

    .main-header {
        max-height: initial;
    }

    .page-nav .navbar-default {
        width: 100%;
    }

    .main-sidebar, .left-side {
        padding-top: 167px !important;
    }

    .main-header .sidebar-toggle {
        margin-left: 0px;
    }

    .wlcm-user .custom-select-gulf {
        float: left;
        margin-top: 15px;
    }

    .md4 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .md6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .chart-part .space-seprator {
        margin: 0px 0 15px;
    }

    .mlr-design .View-all {
        text-align: left;
    }

    .mlr-design.orange-box {
        margin: 15px 0 0;
    }

    .mlr-design .vessel .approved-content p {
        min-height: auto;
    }

    .slider-part .carousel-caption h1 {
        font-size: 20px;
    }

    .filter-part {
        flex-wrap: wrap;
        width: 100%;
        display: block;
    }

        .filter-part .custom-select-gulf {
            max-width: 100%;
            margin: 0 0 15px;
        }

        .filter-part .submit {
            margin: 7px 0 0;
            display: inline-block;
        }
}

@media (max-width: 480px) {
    .slider-part .carousel-caption {
        top: 20%;
    }
}