@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

body {
    /*min-height: 75rem;*/
    padding-top: 93px;
    background-color: #eee;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;  
}
.navbar {
    background: #093c7e;
}
#logo-link{
    text-decoration: none;
}
#small-logo{
   display: none; 
}
.prop-log-title {
    color: #fff;
    font-size: 1.25rem;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    padding: 1rem;
    border-left: 1px solid #fff;
    text-decoration: none;
    margin-left: 1rem;
}
.prop-log-title:hover {
    text-decoration: none;
    color: rgba(255,255,255,.75);
}
#main-content {
    background-color: #fff;
    padding: 2rem 3rem;
}
#main-content h1 {
    margin-bottom: 2rem;
}

/******************************* PORTAL **************************/

#print-btn {
    height: 3rem;
}
#print-btn i {
    margin-right: .5rem;
}
.filter-form {
    padding: 2rem;
    margin-bottom: 1rem;
    background-color: #e9ecef;
    border-radius: .3rem;
}
.property-card {
    box-shadow: 5px 5px 12px #999999;
}
.address-row {
    margin: 0;
    padding: .5rem;
    background: #333333;
    color: #FFFFFF;
}
.status-contact {
    background: #ca37ad;
}
.status-purchased {
    background: #b85917;
}
.status-recommend {
    background: #005480;
}
.status-reject {
    background: #555555;
}
.status-flood {
    background: #2173e2;
}
.status-research {
    background: #047A00;
}
.status-waiting {
    background: #AE0000;
}
.price-col {
    text-align: center;
}
.status-col {
    text-align: right;
}
#details-row {
    padding-bottom: 1rem;
}
#details-col {
    margin-top: 1rem;
    padding-right: 2rem;
}
.property-img img {
    width: 100%;
}
.link-wrapper {
    margin-top: .5rem;
    padding-left: 1rem;
    text-align: center;
}
#bed-bath-car {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px dotted #CCC;
}
#more-details {
    border-right: 2px dotted #CCC;
}
.agent-notes {
    margin-top: 1rem;
}
#comments-row{
    margin: 0rem 1rem 1rem;
    padding-top: 1rem;
    border-top: 2px dotted #CCC;
}
.client-notes {
    margin: 0 1rem 2rem;
    padding-bottom: 2rem;
    border-top: 2px dotted #CCC;
}
#client-notes-txt {
    width:100%; 
    margin: .5rem 0;
}
.face-rating{
    font-size: 1.75rem;
}

/******************************* MY DETAILS **************************/

.save-cancel, #pw-details{
    display: none;
}
.form-alt-row{
    background: #EFEFEF;
}
#pw-details, #pw-details-toggle, #status-msg-pw{
    background-color: #fdfae6;
}

/******************************* PROPERTY LIST **************************/

#staff-notes-print{
    background: #EEEEEE;
    padding: 0.5rem;
}
.star-info-btn {
    height: 28px;
    width: 28px;
    border-radius: 15px;
    padding: 0;
    font-size: 0.9rem;
    /*margin-top: 0.5rem;
    margin-bottom: 0.5rem;*/
}
#comments-row .rating-input{
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
#comments-row .rating-input i{
    font-size: 1.4rem;
}
#comments-row .rating-input i.star-grey{
    color: #CCCCCC;
}
/******************************* ADD PROPERTY **************************/

#import-prop{
    background: #ECF4FE;
}
#import-prop .form-text{
    color: #5C646A;
}
.rating-input{
    margin-bottom: 0.5rem;
    margin-top: 0.25rem;
    color: #888;
    display: inline-block;
    vertical-align: middle;
}
.rating-input i{
    font-size: 1.5rem;
}
.rating-input i.star-grey{
    color: #888;
}
.rating-input i.star-yellow{
    color: #fcb041;
}
.rating-clear{
    padding-left: 1rem;
    color: #888;
}
/******************************* CLIENT LIST **************************/

#client-assignments{
    border-top: 2px dotted #CCC;
    border-bottom: 2px dotted #CCC;
}

/******************************* CLIENT LIST **************************/

#staff-list thead{
    background: #005480;
    color: #FFF;
}
#staff-list>:not(:first-child){
    border-color: #FFF;
}

/******************************* RESPONSIVE **************************/

/* `lg` applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
    
    #main-content {
        padding: 1rem;
    }
    #main-content h1 {
        padding: 1rem;
    }
    #details-col {
        padding-left: 2rem;
    }
    .property-img{
        background-color: #EEE;
    }
    .property-img img{
        width: 50%;
    }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    #small-logo{
       display: inline; 
    }
    #main-logo{
        display: none;
    }
    .property-img img{
        width: 100%;
    }

}

/******************************* PRINT **************************/
@media print {
    
   /* .container {
        width: auto;
    }*/
    .navbar {
        position: absolute !important;
        background-color: transparent;
    }
    .prop-log-title {
        color: #000;
    }
    #main-content {
        padding: 0.5rem !important;
    }
    .filter-form {
        display: none !important;
    }
    .property-card, .footer {
        font-size: 9pt;
    }
    .property-card {
        margin-bottom: 1rem;
        box-shadow: none;
        border-bottom: 2px solid #000;
    }
    .address-row {
        color: #000;
        border-bottom: 2px dotted #CCC;
    }
    .address-row .add-col {
        display: inline-grid;
        width: 50%;
    }
    .address-row .price-col, .address-row .status-col {
        display: inline-grid;
        width: 25%;
    }
    #details-col {
       display: inline-grid;
        width: 100%;
    }
    #bed-bath-car .col-sm-3{
        display: inline-grid;
        width: 20%;
    }
    #bed-bath-car .col-sm-2{
        display: inline-grid;
        width: 10%;
    }
    #bed-bath-car .print-prop-img{
        display: inline-grid;
        width: 30%;
    }
    .print-prop-img img {
        width: 100%;
    }
    #bed-bath-car sup{
        display:none;
    }
    #more-details, #stat-details {
        display: inline-grid;
        width: 50%; 
    }
    .agent-notes {
        margin-top: 0.5rem;
    }
    #comments-row .star-col{
        display: inline-grid;
        width: 50%;
    }
    .star-col .star-cat-col, .star-col .star-rate{
        display: inline-grid;
        width: 50%;
    }
    .star-col .star-info{
       display: block; 
        width: 100%;
    }
    #comments-row .rating-input i{
    font-size: 1rem;
}
    .client-notes {
        padding-bottom: 0;
    }
    #notes-submit {
        display: none;
    }
    .back-to-top {
        display: none;
    }
    .footer{
        padding: 0 !important;
    }
}