/* THIS IS THE CSS FOR THE VISIBLE AREA VIEWS
PLEASE SEE THE DOCUMENTATION AT https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
FOR DETAILS CONFIGURING THIS PROJECT TO BUNDLE & MINIFY STATIC WEB ASSETS. */

/* FULL PAGE IMAGE IN LAYOUT */
.tuetr-com {
    position: fixed;
    inset: 0;       /* top:0; right:0; bottom:0; left:0; */
    z-index: -1;        /* BEHIND HEADER/FOOTER AND CONTENT */
    background-image: url('/static/tuetr-com.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;       /* OPTIONAL: PARALLAX - LIKE EFFECT */
    opacity: 0.6;       /* ADJUST FOR RELIABILITY */
    pointer-events: none;       /* CLICKS GO THROUGH */
}

/* SHOW ONLY ON LARGE SCREENS (ADJUST BREAKPOINT AS NEEDED) */
@media (max-width: 991.98px) {
    .tuetr-com {
        display: none;
    }
}

/* OPTIONAL: REDUCE CONTRAST OF THE IMAGE ON TOP OF CONTENT */
.tuetr-com::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.0); /* WEAK OVERLAY COLOUR/OPACITY IF NEEDED */
}

/* BODY */
body {
    padding-bottom: 20px;
    background-color: #ffffe6;
    font-family: Arial, Helvetica, sans-serif, Verdana;
}

.bg-base {
    background-color: #ffffe6;
    padding: 5px;
    min-height: 100vh;
}

.bg-fill {
    background-color: #ffffe6;
}

.bg-form {
    background-color: #efb73e;
}

/* CAROUSEL */
.carousel {
    background-color: #772953;
    border-radius: 3px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin: 0px auto;
    margin-top: 10px;
}

/* LIGHT HORIZONTAL RULE FOR PAGES THAT NEED A SUBTLE DIVIDER*/
.hr-light {
    border: 0;
    height: 3px;
    background-color: #FFFFFF;
    margin: 1rem 0;     /* ADJUST VERTICAL SPACING IF REQUIRED*/
}

/* FORMS */
.big-checkbox {
    transform: scale(1.5);
    margin: 10px;
}

.large-input {
    font-size: 1.25rem;     /* INCREASE FONT SIZE */
    padding: 8px;       /* INCREASE PADDING */
}

.suggestions-container {
    padding-left: 20px;     /* ADJUST THE VALUE AS NEEDED */
    border: 1px solid #ccc;
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;
}

.suggestions-container div {
    padding: 10px;
    cursor: pointer;
}

.suggestions-container div:hover {
    background-color: #f0f0f0;
}

@media (min-width: 768px) {
    .embed-responsive-16by9 {
        height: 400px;
    }
}

@media (min-width: 992px) {
    .embed-responsive-16by9 {
        height: 500px;
    }
}

@media (min-width: 1200px) {
    .embed-responsive-16by9 {
        height: 600px;
    }
}

/* FOOTERS*/
.footer .row > div {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}