/*** loading overlay ***/
.loading-container {
    background-color: black;
    height          : 100%;
    left            : 0;
    opacity         : 0.6;
    position        : fixed;
    top             : 0;
    width           : 100%;
    z-index         : 1100;
}

.loading-container>img.spinner {
    height     : 50px;
    left       : 50%;
    margin-left: -25px;
    margin-top : -85px;
    position   : absolute;
    top        : 50%;
    width      : 50px;
}

/*** bootstrap overrides and additions ***/

div.navbar-header a.navbar-brand {
    padding: 0 5px 0 0;
}

.dropdown:hover .dropdown-menu {
    display: block !important;
}

.row.form-small-padding>div {
    padding-right: 7px;
    padding-left : 10px;
}

.btn:not(.btn.dropdown-toggle) {
    white-space: normal;
}

/* vertical nav list */

ul.nav.vertical-list-nav {
    cursor     : pointer;
    margin-left: 15px;
}

ul.nav.vertical-list-nav li.list-group-item {
    padding      : 10px !important;
    white-space  : normal;
    text-overflow: ellipsis;
}

ul.nav.vertical-list-nav li.list-group-item:hover {
    background-color: #eee;
    color           : #2c3e50;
}

ul.nav.vertical-list-nav li.list-group-item.selected-item {
    background-color: #222;
    border-color    : #080808;
    color           : #bbb;
}

ul.nav.vertical-list-nav li.list-group-item.selected-item:hover {
    background-color: #000;
    border-color    : #080808;
    color           : #fff;
}

@media (max-width: 1750px) {
    ul.nav.vertical-list-nav {
        margin-left: 10px;
        width      : 5%;
    }

    ul.nav.vertical-list-nav li.list-group-item {
        text-overflow: ellipsis;
    }
}

/* horizontal navbar */

nav.navbar {
    border-radius: 0;
    margin       : 0;
}

div.navbar-collapse {
    padding: 0;
}

.navbar-right-anchor {
    cursor: pointer;
}

.navbar .divider-vertical {
    border-left : 1px solid #f4f4f4;
    border-right: 1px solid #ffffff;
    height      : 50px;
    margin      : 0 9px;
}

.navbar-inverse .divider-vertical-inverse {
    border-left       : 1px solid #f2f2f2;
    border-left-color : #111111;
    border-right      : 1px solid #ffffff;
    border-right-color: #222222;
    height            : 50px;
    margin            : 0 9px;
}

.dropdown-menuitem {
    cursor: pointer;
}

.dropdown-menu.dropdown-menu-inverse {
    background-color: #222;
    border-color    : #080808;
}

.dropdown-menu.dropdown-menu-inverse>li>a {
    color: #bbb;
}

.dropdown-menu.dropdown-menu-inverse>li>a:hover {
    background-color: #000;
    color           : #fff;
}

.dropdown-menu.dropdown-menu-inverse>.divider {
    background-color   : #000;
    border-bottom      : 1px solid #f2f2f2;
    border-bottom-color: #111111;
    border-top         : 1px solid #ffffff;
    border-top-color   : #222222;
}

@media (max-width: 767px) {
    .navbar-collapse .nav>.divider-vertical {
        display: none;
    }
}

/* panels */

.panel.panel-primary.panel-black {
    border-color: #080808;
}

.panel.panel-primary.panel-black>.panel-heading {
    background-color: #222;
    border-color    : #080808;
    color           : #bbb;
}

.panel.panel-primary.panel-darkblue {
    border-color: #080808;
}

    .panel.panel-primary.panel-darkblue > .panel-heading {
        background-color: #0b2452;
        border-color: #080808;
        color: #eee;
    }

/* uib tabs */

uib-tab,
uib-tab:focus {
    outline: none;
}

uib-tab-heading div {
    color: #000;
}

.tab-padding {
    padding-top: 5px;
}

/* ui grid */

div.ibt-grid {
    font-size: 12px !important;
    height   : 600px;
}

div.ibt-grid-large {
    font-size: 12px !important;
    height   : 770px;
}

div.ibt-subgrid {
    font-size: 12px !important;
    height   : 150px;
}

div.ibt-subgrid-large {
    font-size: 12px !important;
    height   : 320px;
}

.canceled .ui-grid-cell {
    background-color: #f8c6c6 !important;
}

.warning .ui-grid-cell {
    background-color: #fcf8e3 !important;
}

.finished .ui-grid-cell {
    background-color: #c7f8c6 !important;
}

div.refreshable-grid {
    float       : right;
    margin-right: 5px;
    width       : 97%;
}

/* forms */

input.form-control[type="checkbox"] {
    margin: 0;
}

.has-error input {
    background: #f8c6c6;
}

.has-error>div>ol.nya-bs-select>button.btn {
    background  : #f8c6c6;
    border-color: #a94442;
}

.form-control,
.has-feedback .form-control {
    padding: 6px 6px;
}

.btn:focus {
    outline      : dotted;
    outline-color: black;
    outline-width: 1px;
}

.btn.btn-custom {
    background-color: #8a81c4;
    border-color    : #7063c7;
    color           : #eee;
}

.btn.btn-custom:hover {
    background-color: #7063c7;
    border-color    : #5a4ac4;
    color           : #fff;
}

.btn.btn-inverse {
    background-color: #222;
    border-color    : #080808;
    color           : #bbb;
}

.btn.btn-inverse:hover:enabled {
    background-color: #000;
    border-color    : #080808;
    color           : #fff;
}

.btn.btn-refresh {
    float       : left;
    margin-left : 5px;
    margin-right: -10px;
}

.btn.btn-vertical-nav {
    margin-left: -20px;
}

.btn-big span {
    font-size     : 130px;
    padding-bottom: 15px;
    padding-left  : 15px;
}

label.ibt-radio {
    cursor: pointer;
}

label.unchecked-radio {
    font-weight: normal !important;
}

label.padding-radio {
    padding-left: 20px;
}

.clickable-element-cursor {
    cursor: pointer;
}

/* nya bs select */

li.ng-scope.nya-bs-option.active a {
    color           : black;
    background-color: transparent;
}

li.ng-scope.nya-bs-option.active a:hover {
    background-color: #f5f5f5;
}

ol.nya-bs-select[disabled] {
    background-color: #ddd;
    border          : 1px solid #ccc;
    color           : #444;
}

ol.nya-bs-select[disabled]:focus {
    border-color: #66afe9;
    box-shadow  : inset 0 1px 1px #000000, 0 0 8px #66afe9;
    box-shadow  : inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    outline     : 0;
}

/*** misc very specific css ***/

body {
    padding-top   : 65px;
    padding-bottom: 40px;
}

.ibt-sticky-footer {
    min-height : 25px !important;
    padding-top: 5px;
    text-align : center;
}

.ibt-main-header {
    background-color: #eee;
    color           : #2c3e50;
    font-size       : 1.4em;
    padding         : 15px 20px;
}

.clickable-icon,
.clickable-icon-inverse {
    cursor: pointer;
}

.clickable-icon:hover {
    color: #000;
}

.clickable-icon-inverse:hover {
    color: #fff;
}

.flag-icon {
    margin: 3px;
}

.no-padding-label {
    /* padding 0 pt ca checkboxes din bootstrap par sa aiba niste padding dubios la labels, implicit */
    padding: 0;
}

.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}

.multi-icon-margin {
    margin-left: 7px;
}

hr {
    margin-bottom: 10px;
    margin-top   : 10px;
}

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

.small-text {
    font-size: 7pt;
}

.blue-text {
    color: #2339a3
}

table.table th:first-child,
table.table td:first-child {
    padding-left: 20px;
}

table.table th:last-child,
table.table td:last-child {
    padding-right: 20px;
}

.btn.add-button {
    margin-top: -3px;
}

textarea {
    resize: none;
}

/* file upload */

input[type="file"] {
    display: none;
}

.ibt-file-upload {
    border : 1px solid #ccc;
    cursor : pointer;
    display: inline-block;
    margin : 20px 0 0 20px;
    padding: 6px 12px;
}

.ibt-file-upload-modal {
    margin: 10px 0 0 20px;
}

/* tracking: */

/* maps */

/* still TBD, do not like fixed px size */
.ibt-map {
    border      : 1px solid;
    border-color: #000;
}

@media (max-height: 767px) {
    .ibt-map {
        height: 500px;
    }
}

/* table */

.ibt-panel-row {
    background-color: #fdfdfd;
    padding         : 6px 0px;
    margin-bottom   : 0;
    font-size       : 14px;
    font-weight     : normal;
    line-height     : 1.42857143;
    text-align      : left;
    white-space     : nowrap;
    vertical-align  : middle;
    /*border-top    : 1px solid black;*/
}

.ibt-panel-row.odd {
    background-color: #f3f3f3;
}

.ibt-panel-row.hover:hover {
    color           : #333;
    background-color: #d9d9d9;
    cursor          : pointer;
}

.ibt-panel-row.success {
    background-color: #dff0d8;
}

.ibt-panel-row.odd.success {
    background-color: #d1eac8;
}

.ibt-panel-row.success:hover {
    background-color: #c2e2b6;
}

.ibt-panel-row.success.selected {
    background-color: #a4d491;
}

.ibt-panel-row.warning {
    background-color: #faf3d1;
}

.ibt-panel-row.odd.warning {
    background-color: #f7edba;
}

.ibt-panel-row.warning:hover {
    background-color: #f5e7a3;
}

.ibt-panel-row.warning.selected {
    background-color: #f0db75;
}

.ibt-panel-row.collapsable {
    color                : #333;
    background-color     : #a6a6a6;
    border-bottom        : 1px solid black;
    margin               : 0px;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select  : none;
    /* Chrome/Safari/Opera */
    -khtml-user-select   : none;
    /* Konqueror */
    -moz-user-select     : none;
    /* Firefox */
    -ms-user-select      : none;
    /* Internet Explorer/Edge */
    user-select          : none;
    /* Non-prefixed version, currently
                                not supported by any browser */
}

.ibt-panel-row.collapsable:hover {
    color           : #333;
    background-color: #a6a6a6;
    cursor          : pointer;
}

.ibt-subpanel-header {
    padding         : 6px 15px;
    margin-bottom   : 0;
    font-size       : 14px;
    font-weight     : bold;
    line-height     : 1.42857143;
    text-align      : left;
    white-space     : nowrap;
    vertical-align  : middle;
    /*border-top    : 1px solid black;*/
    background-color: #e1e1ea;
}

.ibt-subpanel-row {
    padding       : 6px 15px;
    word-wrap     : break-word;
    overflow      : hidden;
    margin-bottom : 0;
    font-size     : 14px;
    font-weight   : normal;
    line-height   : 1.42857143;
    text-align    : left;
    white-space   : normal;
    vertical-align: middle;
    border-top    : 1px solid #d9d9d9;
}

.ibt-subpanel-footer {
    background-color: #e1e1ea;
    border-top      : 1px solid #d9d9d9;
    height          : 3px;
}

/* special tiny displays */

@media (max-height: 800px) {
    .ibt-map {
        height: 500px !important;
    }
}

@media (max-height: 700px) {
    .ibt-map {
        height: 400px !important;
    }
}

@media (max-height: 600px) {
    .ibt-map {
        height: 300px !important;
    }
}

@media (min-width: 1554px) {

    body,
    .btn,
    div,
    span,
    input,
    li>a :not(div.popup-label) {
        font-size: 0.75vw !important;
    }

    h4 {
        font-size: 1vw !important;
    }

    .btn-big span {
        font-size: 6vw !important;
    }
}

@media (max-width: 1554px) {

    body,
    .btn,
    div,
    span,
    input,
    li>a {
        font-size: 0.75vw !important;
    }

    h4 {
        font-size: 1vw !important;
    }

    .btn-big span {
        font-size   : 6vw !important;
        padding-left: 11px;
    }

    .btn :not(.btn.btn-refresh) {
        padding: 6px !important;
    }

    input.form-control {
        height: 27px;
    }

    .input-group-btn input {
        padding: 0px 0px 0px 2px !important;
    }

    .ibt-info-textbox {
        font-weight  : bold;
        line-height  : 1.2;
        padding-right: 19%;
    }
}

/* TODO: between width of 1182px and 1730px the vertical list buttons are weird? ¯\_(ツ)_/¯ */

@media (max-width: 1330px) {

    body,
    .btn,
    div,
    span,
    input,
    li>a {
        font-size: 0.75vw !important;
    }

    h4 {
        font-size: 1vw !important;
    }

    .btn-big span {
        font-size   : 6vw !important;
        padding-left: 9px;
    }

    br {
        line-height: 1.75;
    }
}

@media (max-width: 1200px) {

    body,
    .btn,
    div,
    span,
    input,
    li>a {
        font-size: 8px !important;
    }

    h4 {
        font-size: 12px !important;
    }

    .btn-big span {
        font-size: 60px !important;
    }

    br {
        line-height: 1.95;
    }
}