/* General Styles */


/* MOVE TO VENDOR OVERRIDE SECTION (OR FILE .css) */
div.alert {
    margin-top: 25px;
}

body {
    /*padding-top: 60px;*/
    padding-bottom: 25px;
}



a:hover {
    cursor: pointer;
}

.pad-right {
    margin-right: 5px;
}

.pad-top {
    margin-top: 5px;
}

.pad-bottom {
    margin-bottom: 10px;
}

.crop {
    padding: 0;
}

.pointer {
    cursor: pointer;
}


/* Bootstrap Overrides */

.jumbotron, ol.breadcrumb {
    /*background-color: aliceblue;*/ /* equates to hsl(208, 100%, 97%); */
    background-color: hsl(208, 100%, 90%); 
}

.jumbotron h1 { 
    font-size: 53px;
}

ul.nav-tabs li a {
    padding-left: 50px;
    padding-right: 50px;
}

.nav-tabs li {
    padding-left: 10px;
    padding-right: 10px;
}




.debug {
    color: lightcoral;
    font-family: monospace;
}


/************
   Move to VENDOR-specific css: bootstrap-callout-override.css 

   Bootstrap Callout add-ons 
   https://cpratt.co/twitter-bootstrap-callout-css-styles/
 */

.bs-callout-sm {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

.bs-callout p:last-child {
    margin-bottom: 0;
}

.bs-callout code {
    border-radius: 3px;
}

.bs-callout+.bs-callout {
    margin-top: -5px;
}

.bs-callout-default {
    border-left-color: #777;
}

.bs-callout-default h4 {
    color: #777;
}

.bs-callout-primary {
    border-left-color: #428bca;
}

.bs-callout-primary h4 {
    color: #428bca;
}

.bs-callout-success {
    border-left-color: #5cb85c;
}

.bs-callout-success h4 {
    color: #5cb85c;
}

.bs-callout-danger {
    border-left-color: #d9534f;
}

.bs-callout-danger h4 {
    color: #d9534f;
}

.bs-callout-warning {
    border-left-color: #f0ad4e;
}

.bs-callout-warning h4 {
    color: #f0ad4e;
}

.bs-callout-info {
    border-left-color: #5bc0de;
}

.bs-callout-info h4 {
    color: #5bc0de;
}



/* MOVE TO VENDOR OVERRIDE SECTION (OR FILE .css) */
/* 
    Avoid applying specific styles globally -- i.e. "I don't want my buttons to be ALL CAPS" 
    Instead: 
    .btn.caps {...}  OR 
    standard-form .btn {...} 

*/

.btn {
    text-transform: uppercase;
}
/* Button enhancements */

.btn-wide {
    width: 160px;
}

.btn-extra-wide {
    width: 225px;
}

/* Form CSS

.css-form input.ng-invalid.ng-touched {
background-color: #FA787E;
} */


/* TODO: consider renaming ".css-form" to be more contextual to form validation:
    - E.g. ".validation", ".validation-status", ".status-indication", etc. 
    */

/*.css-form input.ng-valid.ng-touched
,.css-form select.ng-valid.ng-touched 
,.css-form textarea.ng-valid.ng-touched {
background-color: #CCFFCC;
}*/




/*****
 * Form selectors
 * 
 **/

.form-well {
    background-color: #F8FAFB;    
}

.form-panel-title {
    margin: 0 0 10px 0;
    padding: 0;
}

/* TODO: consider not globally applying specific characteristics to general-use tags 
    - labels are used for functionality, as well as for applying styles
    - suggest implementations: "label.my-form {...}" or ".my-form label {...}" or ".my-form-label {...}" to apply styles 
    
label {
    text-transform: uppercase;
    font-size: 0.9em;
    color: #6D696E;
}
*/

/* Enhancement of Bootstrap class */
.form-control-static-o {
    border: 1px solid #ccc;
    padding: 6px 12px;
    font-size: 14px;
}


/********
Move to VENDOR, breadcumb-override.css
*/
/* Bootstrap breadcrumb add-ons */

ol.breadcrumb {
    margin-top: -25px;
    margin-bottom: -20px;
    font-family: monospace;
    font-size: .95em;
}

.breadcrumb-active {
    font-weight: bold;
}

/* Print Styles */

@media print {
    /* Any entries should be defined in/for specific component */
}

/* MOVE TO COMPONENT (.css)*/
.spinner-message-component {
    padding-top: 15px;
}


/* MPT:105.20230906
.panel-heading small {
    color: white;
} */


/* DO NOT ASSIGN GLOBAL SETTINGS TO GENERIC OBJECTS */
/* 

***  From "A TIME TO ASTONISH" -- "...now imagine [background's] white."  ***

h3 a, h3 a:hover {
    color: white;
}
*/


/* Detail Panel Styles */

/* MOVE TO VENDOR OVERRIDE SECTION */
.panel-heading.detail-panel-heading {
    background-color: #F8FAFB;
}

.panel-watermark {
    color: #ccc;
    margin: 0;
    padding: 0;
}

.panel-watermark span {
    color: #777;
}

/* TODO: consider not globally applying specific characteristics to general-use tags 
    - perhaps "dt.my-panel {...}" or ".my-panel .dt {...}" or ".my-panel-dt {...}" 
    */
/* DO NOT ASSIGN GLOBAL SETTINGS TO GENERIC OBJECTS */
/*dt {
    font-size: 14px;
    font-weight: normal;
    color: #999;
}*/

/* TODO: consider not globally applying specific characteristics to general-use tags 
    - perhaps "dt.my-panel {...}" or ".my-panel .dt {...}" or ".my-panel-dt {...}" 
    */
dl.property-detail dd {
    padding-left: 15px;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 10px;
}

/* MOVE TO RESPECTIVE COMPONENT */
.panel last-update-information-component {
    color: #777;
}


/* MOVE TO VENDOR OVERRIDE SECTION */
/* MOVE TO SEPARATE "MODAL" SECTION (FILE) */

.modal-dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    min-height: calc(100vh - 60px);

    @media (max-width: 767px) {
        min-height: calc(100vh - 20px);
    }
}