html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
    height: auto;
}

/*
    General useful classes
*/

.cursor-pointer {
    cursor: pointer;
}

.dir-rtl {
    direction: rtl;
}

.dir-ltr {
    direction: ltr;
}

.display-none {
    display: none;
}

.font-size-large {
    font-size: large;
}

.font-size-x-large {
    font-size: x-large
}

.font-size-xx-large {
    font-size: xx-large
}

.w-fit-content {
    width: fit-content;
}

.white-space-pre-line {
    white-space: pre-line;
}

/*
Environment
*/
.environment-message {
    color: #636363;
    font-size: 24px;
    font-weight: bold;
    font-family: sans-serif;
    background-color: lightgoldenrodyellow;
    padding: 4px;
}

/*
Site footer placement
*/

.footer-space {
    padding-bottom: 24px;
}
.footer {
    background-color: #00a3da !important;
    text-align: center !important;
    color: white !important;
    position: absolute;
    height: 24px;
    width: 100%;
    bottom: 0;
}


/*
    TABs
*/

.nav-tabs {
    border-bottom-color: #00a3da;
}
    
    .nav-tabs .nav-link {
        font-size: 24px;
        color: #00a3da;
    }    
        
        .nav-tabs .nav-link.active {
            border-color: #00a3da;
            background-color: #00a3da;
            color: #fff;
        }
        .nav-tabs .nav-link:hover {
            border-color: #e9ecef #e9ecef #00a3da
        }
        .nav-tabs .nav-link.active:hover {
            border-color: #00a3da;
        }

/*
    datepickers
*/

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:hover {
    background-color: lightgray;
}


/*
    Modals
*/
.loading-modal {
    color: black;
}

    .loading-modal .modal-dialog {
        top: 50%;
        transform: translateY(-50%) !important;
        margin: 0 auto;
    }

    .loading-modal img {
        float: left;
    }

/*
    Form elements
*/

.form-control.error,
.form-select.error,
.bootstrap-select.form-control.error {
    border-color: #d00;
}

.bootstrap-select .dropdown-toggle .filter-option {
    text-align: right;
}

.field-required::before {
    content: "* ";
    color: red;
}

/*
    Grids
*/
.jsgrid-cell {
    overflow: hidden !important;
}

@media only screen and (max-width: 720px) {
    .table th, td {
        display: table-cell !important;
    }
}