/**
*   '/css/custom.css'
*
*   Stylesheet: BOOTSTRAP tweaking
*
*   Just because... "Scrolling is not our hobby..." #hugemargins #hugepadding #hugefont
*
*   AZ: orange: FE6C1F
*   AZ: blue:   0E047E
*   Grey:       DBDBDB
*
*   Modified: 12-03-2018 | matthijs
*/
body {
    padding-bottom: 40px;
}

body, div, span, a, td, input, textarea, select {
    font-size: 13px;
}

@font-face {
    font-family: FontAwesome;
    src: url('../fonts/AwesomeFont/fontawesome-webfont.woff2') format("woff2"),
    url('../fonts/AwesomeFont/fontawesome-webfont.woff') format("woff"),
    url('../fonts/AwesomeFont/fontawesome-webfont.ttf') format("truetype");
}

HR {
    border: 0;
    border-bottom: 1px solid #999999;
    margin-bottom: 30px;
}

DIV.search {
    margin: 5px 0 15px 0;
    border: 0 solid orange; /* test option */
}

DIV.col-md-2.search {
    width: auto;
    text-align: left;
    padding: 0;
    margin-right: 4px;
}

DIV.col-md-2.search select {
    width: 100%;
}

/* Sub menu with action buttons */
.sub-menu {
    margin-bottom: 15px;
}

/* EDIT / VIEW icons width font Glyphicon */
.glyphicon.button {
    color: white;
    padding: 4px;
    border-radius: 3px;
    text-decoration: none;
}

.glyphicon.glyphicon-pencil.button {
    background-color: #FE6C1F;
}

.glyphicon.glyphicon-pencil.button:hover {
    background-color: #ffb802;
}

.glyphicon.glyphicon-eye-open.button {
    background-color: #47aa2b;
}

.glyphicon.glyphicon-eye-open.button:hover {
    background-color: #53ee2e;
}

.glyphicon.glyphicon-eye-close.button {
    background-color: #2185ba;
}

.glyphicon.glyphicon-eye-close.button:hover {
    background-color: #279cda;
}

.glyphicon.glyphicon-trash.button {
    background-color: red;
}

.glyphicon.glyphicon-trash.button:hover {
    background-color: #ff522c;
}

.glyphicon.glyphicon-road.button {
    background-color: #4585ff;
}

.glyphicon.glyphicon-road.button:hover {
    background-color: #5ab6ff;
}

.glyphicon.glyphicon-cog.button {
    background-color: #ee0004;
}

.glyphicon.glyphicon-cog.button:hover {
    background-color: #ee4b1f;
}

.glyphicon.glyphicon-envelope.button {
    background-color: #ee0004;
}

.glyphicon.glyphicon-envelope.button:hover {
    background-color: #ff432e;
}

.glyphicon.glyphicon-log-out.button {
    background-color: #ee0004;
    padding: 6px;
}

.glyphicon.glyphicon-log-out.button:hover {
    background-color: #ff7d2a;
}

.glyphicon.glyphicon-remove.button {
    background-color: #ee0004;
}

.glyphicon.glyphicon-remove.button:hover {
    background-color: #ee593a;
}

.button.purple {
    background-color: #ba00ae !important;
}

.button.purple:hover {
    background-color: #ff00f2 !important;
}

.button.cyaan {
    background-color: #00a7ba !important;
}

.button.cyaan:hover {
    background-color: #00cfe6 !important;
}

span.glyphicon-remove {
    color: red;
}

span.glyphicon-ok {
    color: green;
}

.button:hover {
    text-decoration: none;
}

.table-row td a {
    text-decoration: none;
}

.info-icon {
    cursor: help;
}
/* /EDIT / VIEW icons */


/* MESSAGES */
DIV.alert {
    border: 0;
}
/* /MESSAGES */


/* PANEL */
.panel-default > .panel-heading {
    background-color: #f5f5f5;
}

.panel-default {
    border-color: #cacaca;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #b2b2b2;
}

.panel-heading {
    padding: 4px 6px 4px 6px;
    font-size: 13px;
    font-weight: normal;
}
/* /PANEL */

ul.nav.sub-dropdown li a:hover {
    background-color: #0E047E !important;
    color: white;
}
/* /drown-down sub-menu */

.panel-danger {
    background-color: #ffb59f;
    color: #82020c;
    border: 1px solid #b80003;
}

.panel-danger DIV,
.panel-danger .form-group .control-label,
.panel-danger .form-group label {
    font-size: 16px !important;
}

.panel-danger H3 {
    font-size: 18px;
    color: #82020c;
    margin: 0 0 10px 0;
    font-weight: bold;
}

.panel-danger > .panel-heading {
    background-color: #b80003;
    color: white;
    border-bottom: 1px solid #b80003;
}
/* /FORMS */

/* datepicker*/
/* ----------| cellphone viewport |---------- */
@media (min-width: 768px) {
    #chooseDatepicker .datepicker > .ui-datepicker {
        width: 100% !important; /*what ever width you want*/
        height: auto !important; /*what ever width you want*/
    }

    #chooseDatepicker {
        width: 300px !important;
        height: auto !important;
        border: 0px solid red;
    }

    #chooseDatepicker div, #chooseDatepicker a, #chooseDatepicker td, #chooseDatepicker td a, #chooseDatepicker span {
        font-size: 20px !important;
    }

    #chooseDatepicker .ui-datepicker-prev span,
    #chooseDatepicker.ui-datepicker-next span {
        background-image: none !important;
    }


    #chooseDatepicker .ui-datepicker-prev span,
    #chooseDatepicker .ui-datepicker-next span {
        background-image: none !important;
    }

    #chooseDatepicker .ui-datepicker-prev:before,
    #chooseDatepicker .ui-datepicker-next:before {
        font-family: FontAwesome;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        font-weight: normal;
        align-items: center;
        justify-content: center;
    }

    #chooseDatepicker .ui-datepicker-prev:before {
        content: "\f100";
    }

    #chooseDatepicker .ui-datepicker-next:before {
        content: "\f101";
    }


}
/* ----------| cellphone viewport |---------- */
@media (max-width: 768px) {

    #chooseDatepicker {
        width: 90% !important;
        height: auto !important;
        border: 0px solid red;
    }

    #chooseDatepicker .datepicker > .ui-datepicker {
        width: 100% !important; /*what ever width you want*/
        height: auto !important; /*what ever width you want*/

    }

}
/* /datepicker*/

/* MODAL - Modal dialog setting - bootstrap component */
#myModal {
    z-index: 1000000000000;
}

/* Modify the close icon in the right top corner of the modal */
.modal-header > .close {
    color: #FFFFFF;
    opacity: 1;
    border: 0;
    background-color: red;
    padding: 3px 9px 7px 9px;
    font-weight: normal;
    border-radius: 4px;
}

.modal-header > .close:hover {
    color: #FFFFFF;
    opacity: 1;
    background-color: #ff5b22;
    border: 0;
}

.modal-footer {
    text-align: center;
}

.modal-footer button {
    background-color: #FE6C1F;
    color: white;
    border: 0;
    border-radius: 2px;
    font-size: 22px;
    margin: 0;
    padding: 2px 10px 2px 10px;
    font-weight: normal;
}

.modal-footer button:hover {
    background-color: #0E047E;
    color: white;
}

.modal-header {
    color: #ffff;
}

.modal-content {
    background-color: #a3e5ff;
}

.modal-body {
    background-color: #FFFFFF;
}
/* /MODAL */

/* TABS */

#myTabs {
    /* border-bottom: 1px solid #6a6a6a; */
    border: 0;
}

.tab-content {
    background-color: white;
    padding: 20px 10px 10px 10px;
}

#myTabs > li > a {
    background-color: #DDDDDD !important;
    color: #5a5a5a;
    /* border: 1px solid #a8a8a8;
    border-bottom: 1px solid #6a6a6a; */
    border: 0;
    margin-top: 4px;
}

#myTabs > li > a:hover {
    background-color: #FE6C1F !important;
    color: #FFFFFF;
    /* border: 1px solid #6a6a6a;
    border-bottom: 1px solid #FE6C1F; */
    border: 0;
}

/* Selected tab link */
#myTabs > li.active > a {
    background-color: #FFFFFF !important;
    color: #FE6C1F;
    /* border: 1px solid #6a6a6a;
    border-bottom: 1px solid #FFFFFF; */
    border: 0;
}
/* /TABS */

/* HEADERS */
H1, DIV.header {
    font-size: 30px;
    font-weight: bold;
    color: #0E047E;
}

H2 {
    font-size: 20px;
    color: #FE6C1F;
}

H3, DIV.subHeader {
    font-size: 15px;
    font-weight: normal;
    color: #FE6C1F;
}
/* /HEADERS */