/* Colors */
.color-off-white, .off-white, .text-off-white { color: #fafafa; }
.text-white, .color-white { color: #ffffff; }
.bg-off-white { background-color: #fafafa }
.bg-white { background-color: #fafafa }

.text-ccc { color: #cccccc; }
.text-bold, .font-bold { font-weight: bold; }

/* Mouse */
.cursor-pointer { cursor: pointer; }
.cursor-move { cursor: move; }

.temp-layout { height:600px; }

.w-10 { width: 10%; }
.w-30 { width: 30%; }

@media (max-width: 576px) {  
    .display-4 {
        font-size: 2.8rem;
    }
}

/* Text utilities */
.font-size-110 { font-size: 110%; }
.font-size-100 { font-size: 100%; }
.font-size-90 { font-size: 90%; }
.font-size-80 { font-size: 80%; }
.font-size-70 { font-size: 70%; }

.fw-200 { font-weight: 200; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-800 { font-weight: 800; }

/* Link stuff */
a.no-underline:hover { text-decoration: none; }
a.text-underline { text-decoration: underline !important; }

.card-content:not(.modal) {
    position: relative;
}
.card-content > div {
    position: relative;
    z-index: 1;
}
/* Card default backgrounds */
.card-content:not(.modal):nth-child(odd), 
.card-content:nth-child(odd) .amenities-title {
    background-color: #ffffff;
}
.card-content:not(.modal):nth-child(even), 
.card-content:nth-child(even) .amenities-title {
    background-color: #fafafa;
}

.demo-mode-modal .modal-content {
    opacity: 0.9;
}
.btn-custom, .btn-custom:hover {
    background-color: var(--btn-icon-color);
    color: #fafafa;
}
.btn-custom:hover { 
    filter: brightness(90%);
}

.highlight-border { box-shadow: inset 0 0 0 6px rgba(38,154,250, 0.5) !important; }
img.highlight-border { box-shadow: 6px 6px rgba(38,154,250, 0.5) !important;}

.card-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}
.card-content a {
    color: var(--body-link-color, #007bff);
}
.card-status-banner { background-color: var(--btn-icon-color); }
.card-status-banner h3 { color: var(--btn-text-color) !important; }

#swipebox-title { padding-top: 10px; padding-left: 10px; padding-right: 60px; font-size: 1.0rem; line-height: 24px; }

@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) { #swipebox-title { text-align: left; } }
@media (max-width: 767.98px) {
    h1 { font-size: 2.0rem; }
}
@media (max-width: 575.98px) {
    .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}