﻿/*html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow-x: hidden;

}
*/

/* Set padding to keep content from hitting the edges */
.body-content {
    height: 100vh;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
}

.disabled-input-span {
    height: 34px !important;
}

/* Overrride the default bootstrap container sizing as it will not go full width */
@media (min-width: 576px) {
    .container {
        max-width: 100% !important;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 100% !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 100% !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 100% !important;
    }
}

/* Override the default bootstrap modal sizing as it will not go full width */
@media (min-width: 1500px) {
    .modal-xl {
        max-width: 1400px;
    }
}

/*Page Loader Style*/
.spinner {
    flex-grow: 1;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#spinnerLoader, .spinnerLoader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #06568e;
    border-radius: 50% !important;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

#spinnerLoaderSm, .spinnerLoaderSm {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #06568e;
    border-radius: 50% !important;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.page-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
}



.push {
    height: 10px;
    left: 0;
    right: 0;
    max-width: 100%;
    padding: 0;
}

.wrapper {
    min-height: 81%;
    margin-bottom: -50px;
}

footer {
    height: 50px;
    left: 0;
    right: 0;
    max-width: 100%;
    padding: 0;
}

    footer p {
        padding: 0px 10px;
    }

    footer > hr {
        margin: 0;
    }

.autocomplete-suggestions {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    overflow: auto;
    -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-no-suggestion {
    padding: 2px 5px;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #000;
}

.autocomplete-group {
    padding: 2px 5px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    display: block;
    border-bottom: 1px solid #000;
}

.page-title {
    font-size: 1.75rem !important;
    color: rgba(0,0,0,0.60);
}

.btn.btn-default:hover, .btn.btn-primary:hover, .btn.btn-success:hover, .btn.btn-info:hover, .btn.btn-warning:hover, 
.btn.btn-danger:hover, .btn.btn-secondary:hover, .btn.btn-dark:hover, .btn.btn-light:hover {
    background-position: 0 9999px;
}

/*This code below of .validation-summary-valid fixes the problem with showing up the validation error message when the form loads.*/
.validation-summary-valid {
    display: none !important;
}

.chosen-container {
    width: 100% !important;
   
}

.field-validation-error {
    color: red !important;
}

.input-validation-error,
.input-validation-error.select2-hidden-accessible + .select2 .select2-selection {
    border: 2px solid red !important;
}

.input-validation-error.select2-hidden-accessible + .select2 .select2-selection {
    box-shadow: none;
}

/* Styles for status option in tables*/
.table-row-object-bullet-status {
    font-size: 34px;
    margin: 2px 2px 0 0;
    display: inline-block;
    vertical-align: middle;
    line-height: 10px;
}

.table-bullet-status-Active {
    color: #10c469;
}

.table-bullet-status-Inactive {
    color: #ff5b5b;
}

table.table tr th, table.table tr td {
    padding: 12px 15px;
    margin: 2px 2px 0 0;
    vertical-align: middle;
}

table.table-dense tr th, table.table-dense tr td {
    padding: 5px;
}

table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f1f1f1;
}

table.table-striped.table-hover tbody tr:hover {
    background: #e7e7e7;
}

table.dataTable thead > tr > th.sorting:before {
    font-size:1.5em;
    right: 5px;
}
table.dataTable thead > tr > th.sorting:after {
    font-size: 1.5em;
    right: 5px;
}
.table-header-dark tr th {
    background-color: #C0C0C0;
}

.table-bordered {
    border-collapse: separate;
    border-spacing: 0;
}

.label-required::after {
    content: " *";
}

.card-header.card-header-dense {
    padding: 0;
}

.form-group.form-group-dense {
    margin-bottom: 0.25rem;
}

.loadingOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,.25);
    z-index: 1000;
}

.loadingOverlaySpinner {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

.accordion .card .card-header .accordion-toggle-btn:after {
    font-family: 'FontAwesome';
    content: "\f077";
    font-weight: bold;
    float: right;
}

.accordion .card .card-header .accordion-toggle-btn.collapsed:after {
    content: "\f078";
}

.accordion-overflow .card:first-of-type {
    overflow: visible;
}

.accordion-single .card:first-of-type {
    border: 1px solid lightgray;
}

.accordion-single .card-header {
    border-bottom: 1px solid lightgray;
}