/*Css Tambahan*/
.main-header .logo {
    height: 53px;
}
@media (min-width: 1200px) {
    .container {
        width: 100%;
    }
}

/*style untuk button profile di dropdown*/
.btn-profile {
    width: 100%;
}
/*end*/

/*Css di common/models/stageControl*/
/*Ini untuk angka jumlah hari*/
.rounded-background {
    border-radius: 50%;
    background: #ec5828;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 0px auto;
    color: white;
}
/*---------------------------*/
/*Ini untuk style button total maintenance di stage 5 sebelah expires in*/
.maintenance-button {
     margin-top: -47px;
     background-color: #ec5828;
     border-color: #ec5828;
 }
.maintenance-button:hover {
    background-color: #ec7b49; /* Green */
    color: white;
}
/*----------------------------------------------------------------------*/
body {
    font-size: 16px !important;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/* End dropdown header for user toggle */
@font-face{
    font-family:"Gotham-Light";
    src:url(fonts/Gotham-Light-0b2ea159a0bb39c34b82ae88168af34b.ttf) format("truetype"),url(fonts/Gotham-Light.otf) format("opentype")
}
@font-face{
    font-family:"Gotham-Book";
    src:url(fonts/Gotham-Book-5f7d567f046ec34a3ae40b39cea45aae.ttf) format("truetype"),url(fonts/Gotham-Book.otf) format("opentype")
}
@font-face{
    font-family:"Gotham-Medium";
    src:url(fonts/Gotham-Medium-6d175cdcdd8d1dfd000edc6c7d77ea80.ttf) format("truetype"),url(fonts/Gotham-Medium.otf) format("opentype")
}
@font-face{
    font-family:"Gotham-Bold";
    src:url(fonts/Gotham-Bold-e81b6544528f88635b2363e2caa5ac29.ttf) format("truetype"),url(fonts/Gotham-Bold.otf) format("opentype")
}
@font-face{
    font-family:"Roboto-Thin";
    src:url(fonts/Roboto-Thin-1ff1f579955469b6e5dd3753fa80beed.ttf) format("truetype")
}
@font-face{
    font-family:"Roboto-Bold";
    src:url(fonts/Roboto-Bold-92cf5ac58a4476475414ed6142a1008f.ttf) format("truetype")
}
@font-face{
    font-family:"Roboto-Light";
    src:url(fonts/Roboto-Light-3e53ec987278f48f285ecfa219af614a.ttf) format("truetype")
}
@font-face{
    font-family:"Roboto-Medium";
    src:url(fonts/Roboto-Medium-3b7827c129c55daa91f55ea94db10a09.ttf) format("truetype")
}
@font-face{
    font-family:"Roboto-Regular";
    src:url(fonts/Roboto-Regular-ac2e26306e02646880b9d30515d1eaca.ttf) format("truetype")
}
/* Start sidebar menu in layout */
@media (max-width: 767px) {
    .main-sidebar {
        transform: translate(-260px, 0) !important;
    }

    .sidebar-open .main-sidebar {
        transform: translate(0, 0) !important;
    }
}

@media (min-width: 768px) {
    .content-wrapper,
    .main-footer {
        -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease-in-out;
        -moz-transition: -moz-transform .3s ease-in-out, margin .3s ease-in-out;
        -o-transition: -o-transform .3s ease-in-out, margin .3s ease-in-out;
        transition: transform .3s ease-in-out, margin .3s ease-in-out;
        margin-left: 260px;
        z-index: 820
    }

    .main-header .logo {
        width: 260px;
    }

    .main-header .navbar {
        margin-left: 260px;
    }
}

.has-error .form-control-feedback {
    color: #a94442;
}

.has-success .form-control-feedback {
    color: #3c763d;
}

.main-sidebar, .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-menu > li:hover > .treeview-menu {
    width: 260px !important;
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
    left: 260px !important;
}

.skin-green .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #2f3a3e;
}
.skin-blue-light .main-header .navbar {
    background-color: #03548c;
}

.skin-blue-light .main-header .logo{
    background-color: #ec5828;
}
.skin-blue-light .main-header .logo:hover{
    background-color: #fc6c1e;
}
.skin-blue-light .sidebar-menu .treeview-menu > li > a {
    background-color: none;
    border: 0px solid #ec5828;
    border-left-width: 0px;
    margin-left: 0px;
    transition: background-color .5s;
}

.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover,
.skin-blue-light .sidebar-menu .treeview-menu > li > a:active {
    background-color: #ec5828;
    color: white;
    border-left-width: 5px;
    margin-left: -5px;
}

/*OVERRIDE*/
.skin-blue-light .sidebar-menu>li:hover>a, .skin-blue-light .sidebar-menu>li.active>a {
    background: #ec5828;
    color: #ffffff;
}
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
    /*display: none !important;*/
    position: absolute;
    font-size: 1em;
    width: 180px;
    left: 50px;
}
@media (max-width: 767px) {
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
        display: block !important;
        left: 0px;
    }
}
/*-----------*/

/* End sidebar menu in layout */
/* COSTUM ADMIN LTE */
.btn {
    border-radius: 4px !important;
}

.btn-group > .btn:not(:first-child):not(:last-child) {
    margin-right: 4px;
}

.btn-group > .btn:not(:last-child) {
    margin-right: 4px;
}

.label-warning:hover, .label-warning:active, .label-warning.hover, .label-warning.active {
    background-color: #ffc107 !important;
    transition: all 0.2s linear;
}


.infotable.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
    background-image: linear-gradient(to right, #f5f5f5, white);
}

.btn-primary {
    background-color: #009bde;
    border-color: #009bde;
    transition: all 0.3s linear;
}

.btn-primary:hover, .btn-primary:active, .btn-primary.hover, .btn-primary.active {
    background-color: #3ac8f8;
    border-color: #008bc7;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-primary:active:hover {
    background-color: #32bdec;
    border-color: #008bc7;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.34);
}

.btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: #1abcf3;
    border-color: #009bde;
}


.btn-success {
    transition: all 0.3s linear;
}

.btn-success:hover, .btn-success:active, .btn-success.hover, .btn-success.active {
    background-color: #00c853;
    border-color: #388e3c;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-success:active:hover {
    background-color: #00c853;
    border-color: #388e3c;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.34);
}

.btn-success:focus, .btn-success.focus {
    color: #fff;
    background-color: #05a35b;
    border-color: #388e3c;
}

.btn-default {
    background-color: #e7e7e7;
    border-color: #e7e7e7;
    transition: all 0.3s linear;
}

.btn-default:hover, .btn-default:active, .btn-default.hover, .btn-default.active {
    background-color: #f4f4f4;
    border-color: #d2d2d2;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-default:active:hover {
    background-color: #e2e2e2;
    border-color: #cac9c9;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.34);
}

.btn-default:focus, .btn-default.focus {
    color: #020202;
    background-color: #e6e4e4;
    border-color: #e7e7e7;
}

.tooltip-inner {
    border-radius: 5px !important;
    background-color: #2f2f2fd6;

}

.tooltip-arrow {
    border-top-color: #2f2f2fd6 !important;
}

.tooltip {
    opacity: 0;
    -webkit-transition: opacity .3s linear !important;
    -o-transition: opacity .3s linear !important;
    transition: opacity .3s linear !important;
    -webkit-transition-delay: .3s !important;
    transition-delay: .3s !important;

}

.fade {
    opacity: 0;
    -webkit-transition: opacity .4s linear;
    -o-transition: opacity .4s linear;
    transition: opacity .4s linear;

}

/* Start table */

th {
    white-space: nowrap;
}

.kv-merged-header, .table-bordered > thead > tr > td {
    border-bottom: 0px !important;
}

.table tbody tr:focus {
    background-color: #E0FFFF !important;
}

.filter-badge {
    position: absolute !important;
    top: 3px !important;
    right: 3px;
    text-align: center;
    font-size: 9px;
    padding: 2px 3px;
}

/* End table */


/* Start custom kartik grid */

.kv-panel-after {
    display: none;
}

/* End custom kartik grid */

/* Start add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

/* End add sorting icons to gridview sort links */


/* Start custom and theming select2 */
.select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: 0px !important;
}

.select2-container--krajee.select2-container--open .select2-selection, .select2-container--krajee .select2-selection:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.select2-container--krajee .select2-dropdown {
}

/* End custom select2 */


/* Start dropdown header for user toggle */
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    right: 0px !important;
}

.dropdown-menu-account {
    padding: 0px;
}

.dropdown-menu-account > li {
    height: 50px;
}

.dropdown-menu-account > li > a {
    padding: 15px;
}


/* Fungsi CSS ini digunakan untuk tampilan step form di tiap page proses booking */

/*Form Wizard*/
.bs-wizard {margin-top: 10px;margin-bottom:10px;transform: translateX(100px)}
.bs-wizard { padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #333; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #EC5828; border-radius: 50px; position: absolute; top: 8px; left: 8px;}
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;background-color: #ECF0F5;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #03548C;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #ECF0F5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
.completed-step {position: absolute; width: 30px; height: 30px; display: block; background: #03548C; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;animation:clip-progress 2s linear 2s infinite alternate;}
.completed-step:after{content: ' '; width: 14px; height: 14px; background: #EC5828; border-radius: 50px; position: absolute; top: 8px; left: 8px;}
.bs-wizard > .bs-wizard-step.disabled > .completed-step {background-color: #ECF0F5;}
.bs-wizard > .bs-wizard-step.disabled > .completed-step:after {opacity: 0;}
.progress, .progress>.progress-bar, .progress .progress-bar, .progress>.progress-bar .progress-bar {border-radius: 0px;}
@keyframes clip-progress {
    0%   {background-color: #03548C;}
    50%   {background-color: #009BDE;;}
    75% {background-color: #03548C;}
    100% {background-color: #009BDE;}
}

@media (max-width: 991px) {
    .btn-change-password {
        width: 100%;
        margin-top: 5px;
    }
}

@media (max-width: 767px) {
    .container-items {
        overflow: auto;
    }
    .container-items .row, .item {
        width: 1080px;
    }
    .col-md-1 {
        float: left;
    }
    .bs-wizard {
        transform: translateX(7%);
    }
    /*.bs-wizard > .bs-wizard-step .bs-wizard-info {*/
        /*font-size: 0.8em;*/
    /*}*/
    .bs-wizard > .bs-wizard-step .bs-wizard-info {
        font-size: 0.6em;
        transform: rotate(90deg);
        margin-bottom: 30px;
        padding-left: 20px;
    }

    .btn-change-password {
        width: 100%;
        margin-top: 5px;
    }
}

@media (max-width: 320px) {
    .bs-wizard > .bs-wizard-step .bs-wizard-info {
        font-size: 0.5em;
    }
    .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
        font-size: 14px;
    }
}

.hide-class, .label-rwd, .button-footer-add, .label-name-rwd {
    display: none;
}
.show-class {
    display: block;
}
.button-delete {
    text-align: right;
    margin-bottom: 50px;
    display: none;
}
.item-industri {
    width: unset;
}
.container-items .row {
    width: unset;
}
.content-label, .content-label-industri {
    display: flex;
    flex-direction: row;
}
.item-label1, .item-label1-industri {
    width: 90%;
    padding-top: 5px;
}
.item-label2, .item-label2-industri {
    width: 10%;
}
@media(max-width:768px){
    .item-label1, .item-label1-industri {
        width: 90%;
    }
    .item-label2, .item-label2-industri {
        width: 10%;
    }
    .button-delete, .label-rwd, .button-footer-add, .label-name-rwd {
        display: block;
    }
    .button-rwd, .label-web {
        display: none;
    }
}
@media(max-width:767px){
    .container-items .row, .item.panel.item-prospecting {
        width: unset;
    }
    .item-label1, .item-label1-industri {
        width: 75%;
    }
    .item-label2, .item-label2-industri {
        width: 25%;
    }
    .button-delete, .label-rwd, .button-footer-add, .label-name-rwd {
        display: block;
    }
    .button-rwd, .label-web {
        display: none;
    }
}
