/*-- Base Custom CSS --*/

/*-- Global Variable Declarations --*/
:root {
    /*-- Fonts --*/
        --logofont: "Teko", sans-serif;
        --titlefont: "Titillium Web", sans-serif;
        --bodyfont: "Montserrat", sans-serif;
    /*-- Colour Palette --*/
        --background-lvl0: #121212;
        --background-lvl1: #1F1F1F;
        --background-lvl2: #292929;
        --background-lvl3: #333333;
        --yellow: #FDDE86;
        --green: #4ED0AD;
        --greenhighlight: #33C19C;
        --pink: #FFAD99;
        --blue: #73DCE7;
        --bluehighlight: #3FCFDE;
        --white: #FAFAFA;
        --whitehighlight: #CCCCCC;
    }
    
/*-- HTML --*/
html {
    font-size: 62.5%;
}

/*-- Body, support for non WebP compatible browsers --*/
body {
    font-family: var(--bodyfont);
    color: var(--white);
    font-size: 1.6rem;
    min-height: 100vh;
    position: relative;
    padding-bottom: 20rem;
}

.body-home {
    height: 100vh;
}

.no-webp body {
    background:
        /* top, transparent black, with gradient */
        -webkit-linear-gradient(to bottom,  rgba(31, 31, 31, 1.0), rgba(31, 31, 31, 0.75)), /* Chrome10+,Safari5.1+ */
        /* bottom, image */
        url('/media/pexels-juan-pablo-serrano-arenas-894695.jpg') no-repeat center fixed; 
    background:
        /* top, transparent black, with gradient */
        linear-gradient(to bottom, rgba(31, 31, 31, 1.0), rgba(31, 31, 31, 0.75)),
        /* bottom, image */
        url('/media/pexels-juan-pablo-serrano-arenas-894695.jpg') no-repeat center fixed;
    background-size: cover;
    background-color: var(--background-lvl1);
}

/*-- Body, support added for WebP background image to improve performance for WebP compatible browsers--*/
.webp body {
    background:
        /* top, transparent black, with gradient */
        -webkit-linear-gradient(to bottom,  rgba(31, 31, 31, 1.0), rgba(31, 31, 31, 0.75)), /* Chrome10+,Safari5.1+ */
        /* bottom, image */
        url('/media/pexels-juan-pablo-serrano-arenas-894695.webp') no-repeat center fixed; 
    background:
        /* top, transparent black, with gradient */
        linear-gradient(to bottom, rgba(31, 31, 31, 1.0), rgba(31, 31, 31, 0.75)),
        /* bottom, image */
        url('/media/pexels-juan-pablo-serrano-arenas-894695.webp') no-repeat center fixed;
    background-size: cover;
    background-color: var(--background-lvl1);
}

/*-- Logo --*/
.logo-text {
    font-family: var(--logofont);
    font-size: 6.0rem;
}

.logo-image {
    width: 35px;
}

/*-- Navigation --*/
.navbar-dark .navbar-brand {
    color: var(--white);
}


.navbar-dark .navbar-toggler {
    color: rgba(250, 250, 250, 0.6);
    border: 2px solid rgba(250, 250, 250, 0.6);
}

.navbar-nav .form-control {
    background-color: var(--background-lvl1);
    border: 2px solid rgba(250, 250, 250, 0.6);
    color: var(--white); 
}

.navbar-nav .form-control::placeholder {
    color: var(--white);
    opacity: 1;
}

.navbar-nav .form-control:-ms-input-placeholder {
    color: var(--white);
    opacity: 1;
}

.navbar-nav .form-control::-ms-input-placeholder {
    color: var(--white);
    opacity: 1;
}

.navbar-nav .form-control:focus {
    background-color: var(--background-lvl2);
    border: 2px solid var(--green);
    box-shadow: 0 0 0 0.25rem rgb(78 208 173 / 25%);
}

.nav-item i,
.navbar-dark .navbar-nav .nav-link {
    color: var(--whitehighlight);
}

.nav-item i:hover,
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--white);
}

.navbar-dark .navbar-nav .dropdown-menu a:active {
    color: var(--background-lvl0)!important;
    background-color: var(--green)!important;
}

.dropdown-item {
    font-size: 1.2rem;
}

.search-input {
    font-size: 1.2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.2rem;
}

/*-- Tagline--*/
.tagline-text {
    font-family: var(--titlefont);
    font-weight: 600;
    font-size: 1.6rem;
}

/*-- Containers --*/
.container-dark {
    background-color: rgba(41, 41, 41, 0.8);
}

/*-- Dividers--*/
.divider-solid hr {
    height: 2px;
    background-color: var(--white);
    opacity: 1;
}

.divider-opaque hr {
    height: 2px;
    background-color: var(--white);
    opacity: 0.5;
}
    
/*-- Custom Utility Classes--*/
/*-- Black Background, level 0 --*/
.bg-black-0 {
    background-color: var(--background-lvl0);
}

/*-- Black Background, level 1 --*/
.bg-black-1 {
    background-color: var(--background-lvl1);
}

/*-- Black Background, level 2 --*/
.bg-black-2 {
    background-color: var(--background-lvl2);
}

/*-- Black Background, level 3 --*/
.bg-black-3 {
    background-color: var(--background-lvl2);
}

/*-- Yellow Background --*/
.bg-yellow {
    background-color: var(--yellow);
}

/*-- Green Background --*/
.bg-green {
    background-color: var(--green);
}

/*-- Pink Background --*/
.bg-pink {
    background-color: var(--pink);
}

/*-- Blue Background --*/
.bg-blue {
    background-color: var(--blue);
}

/*-- Black Foreground, level 0 --*/
.fg-black-0 {
    color: var(--background-lvl0);
}

/*-- Black Foreground, level 1 --*/
.fg-black-1 {
    color: var(--background-lvl1);
}

/*-- Black Foreground, level 2 --*/
.fg-black-2 {
    color: var(--background-lvl2);
}

/*-- White Foreground --*/
.fg-white {
    color: var(--white);
}

/*-- Yellow Foreground --*/
.fg-yellow {
    color: var(--yellow);
}

/*-- Pink Foreground --*/
.fg-pink {
    color: var(--pink);
}

/*-- Green Foreground --*/
.fg-green {
    color: var(--green);
}

/*-- Green Foreground --*/
.fg-blue {
    color: var(--blue);
}

/*-- Text --*/
.title-text-small {
    font-family: var(--titlefont);
    font-weight: 600;
    font-size: 1.4rem;
}

.title-text-medium {
    font-family: var(--titlefont);
    font-weight: 600;
    font-size: 1.6rem;
}

.title-text-large {
    font-family: var(--titlefont);
    font-weight: 600;
    font-size: 1.8rem;
}

.rating-text {
    font-size: 1.3rem;
}

.text-small {
    font-size: 1.2rem;
}

.text-medium {
    font-size: 1.4rem;
}

.text-large {
    font-size: 1.6rem;
}

.text-semi-bold {
    font-weight: 500;
}

.text-bold {
    font-weight: 600;
}

.rating-text {
    font-size: 1.3rem;
}

/*-- Buttons --*/
.btn-outline-green {
    background-color: rgba(41, 41, 41, 0.9);
    border: 2px solid;
    border-color: var(--green);
    color: var(--white);
    font-weight: 600;
}

.btn-xl {
    font-size: 1.5rem;
}

/*-- File upload buttons --*/
.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    cursor: pointer;
}

/*-- Information Button Icons --*/
.button-info i {
    color: var(--blue);
}

.button-info i:hover {
    color: var(--bluehighlight);
}

/*-- Links --*/
.link-small {
    font-family: var(--bodyfont);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--green);
    text-decoration: None;
    text-align: right;
}

.link-small:hover {
    color: var(--greenhighlight);
    cursor: pointer;
}


/*-- Toast Messages --*/
.toast {
    border-bottom-left-radius: 1rem 1rem;
    border-bottom-right-radius: 1rem 1rem;
}

.toast-container {
    position: fixed;
    top: 8rem;
    right: 1.5rem;
    z-index: 11;
}

.toast-header{
    border: var(--white) 1px solid;
    background-clip: unset;
    border-bottom: None
}

.toast-body {
    border: var(--white) 1px solid;
    background-clip: unset;
    border-bottom-left-radius: 1rem 1rem;
    border-bottom-right-radius: 1rem 1rem;
}

.toast h5 {
    font-size: 1.4rem;
    font-weight: 600;
}

.toast-error i,
.toast-error h5 {
    color: var(--pink);
}

.toast-info i,
.toast-info h5 {
    color: var(--blue);
}

.toast-success i,
.toast-success h5 {
    color: var(--green);
}

.toast-warning i,
.toast-warning h5 {
    color: var(--yellow);
}

/*-- User Input Forms --*/
.form-user h1 {
    font-size: 2.0rem;
    font-weight: 600;
}

.form-user h2 {
    font-size: 1.6rem;
    font-weight: 600;
}

.form-user p {
    font-size: 1.4rem;
}

.form-user-link {
    font-weight: 700;
    color: var(--green);
    text-decoration: None;
}

.form-user-link:hover {
    color: var(--greenhighlight);
}

.form-label,
.field-label {
    font-size: 1.6rem;
    font-weight: 600;
}

.blockLabels {
    font-size: 1.4rem;
}

.form-user input,
.form-user select,
.form-user .form-control {
    box-sizing: border-box;
    font-size: 1.4rem;
    background-color: var(--background-lvl2);
    border: 2px solid rgba(250, 250, 250, 0.6);
    color: var(--white);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.7rem;
}

/*-- https://stackoverflow.com/questions/66335238/changing-the-color-arrow-in-bootstrap --*/
.form-user select {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FAFAFA'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.form-user input::placeholder,
.form-user textarea::placeholder {
    color: var(--whitehighlight);
    opacity: 1;
}

/* Internet Explorer 10+ */
.form-user input:-ms-input-placeholder,
.form-user textarea:-ms-input-placeholder {
    color: var(--whitehighlight);
    opacity: 1;
}

/* Chrome/Opera/Safari */
.form-user input::-webkit-input-placeholder,
.form-user textarea::-webkit-input-placeholder {
    color: var(--whitehighlight);
    opacity: 1;
}

/* Firefox 18- */
.form-user input:-moz-placeholder,
.form-user textarea:-moz-placeholder {
    color: var(--whitehighlight);
    opacity: 1;
}

/* Firefox 19+ */
.form-user input::-moz-placeholder,
.form-user textarea::-moz-placeholder {
    color: var(--whitehighlight);
    opacity: 1;
}

/* Chrome/Opera/Safari */
.form-user input:-webkit-autofill,
.form-user input:-webkit-autofill:focus,
.form-user textarea:-webkit-autofill,
.form-user textarea:-webkit-autofill:focus,
.form-user select:-webkit-autofill,
.form-user select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--white);
    opacity: 1;
    transition: background-color 600000s 0s, color 600000s 0s;
}

.form-user select:invalid,
.form-user select option[value=""] {
    color: var(--whitehighlight);
}

.form-check-label {
    font-size: 1.2rem;
    font-weight: 600;
}

.form-check-input {
    width: 1.4rem;
    height: 1.4rem;
}

.checkboxinput {
    margin-left: 0.5rem;
    margin-top: 0.6rem;
}

.form-user .form-check-input:checked {
    background-color: var(--green);
    border-color: var(--greenhighlight);
}

.form-user .form-check-input:focus {
    border-color: var(--green)
}

.form-user input:focus,
.form-user .form-control:focus,
.form-user .form-select:focus {
    background-color: var(--background-lvl3);
    color: var(--white);
    border: 2px solid var(--green);
    box-shadow: 0 0 0 0.25rem rgb(78 208 173 / 25%);
}

.form-text-small p {
    font-size: 1.2rem;
    font-weight: 500;
}

.form-user .invalid-feedback {
    color: var(--pink);
}

.blockLabels span {
    color: var(--pink);
    font-size: 1.2rem;
    font-weight: 500;
}


/*-- Alerts --*/
.alert-danger {
    color: var(--pink);
    background-color: rgba(41, 41, 41, 0.5);
    border-color: rgba(41, 41, 41, 0.7);
}

.alert {
    font-size: 1.4rem;
    position: relative;
    padding: 0.2rem 0.2rem;
    margin-bottom: 0.2rem;
    border: None;
    border-radius: 0.25rem;
}

/*-- Cards --*/
.card {
    border: None;
    background-color: rgba(41, 41, 41, 0.0);
}

/*-- Tables --*/
.table-dark th,
.table-dark td {
    background-color: rgba(41, 41, 41, 0.0);
}

.table-dark .th {
    white-space: nowrap
}

/*-- Modals --*/
.modal-content {
    border-radius: 0rem;
}

.modal-header {
    border-top-left-radius: 0rem 0rem;
    border-top-right-radius: 0rem 0rem;  

}
.modal-content,
.modal-footer { 
    border-bottom-left-radius: 1rem 1rem;
    border-bottom-right-radius: 1rem 1rem;
}

.modal-content {
    border: var(--white) 1px solid;
}

.modal-header h5 {
    font-size: 1.4rem;
    font-weight: 600;
}

.modal-body p {
    font-size: 1.4rem;
}

.btn-close {
    color: var(--green);
}


/*-- Footer --*/
.footer-links a {
    color: var(--whitehighlight);
}

.footer-links a:hover {
    color: var(--white);
}

.footer-text {
    max-width: 80rem;
    margin: 0 auto;
}

.fixed-bottom {
    position: absolute;
    bottom: 0;
}

/*-- Media Queries --*/
/*-- Allow Space For Footer --*/
@media (max-width: 768px) {
    body {padding-bottom: 22rem;
    }
}

@media (max-width: 576px) {
    body {padding-bottom: 24rem;
    }
}

@media (max-width: 370px) {
    body {padding-bottom: 26rem;
    }
}

/*-- Custom Containers--*/
@media (min-width: 768px) {
    .container-custom {
        width: 720px;
    }
    .container-custom-sm {
        width: 500px;
    }
}

/*-- Logo, Text, Buttons, Toast Messages, Links, Form Labels --*/
@media (max-width: 370px) {
    .logo-text {
        font-size: 5.0rem;
    }
    .logo-image {
        width: 30px;
    }
    .tagline-text {
        font-size: 1.4rem;
    }
    .btn-xl {
        font-size: 1.4rem;
    }  
    .toast {
        max-width: 90vw;
    }
    .text-small {
        font-size: 1.0rem;
    }
    .text-medium {
        font-size: 1.2rem;
    }   
    .text-large {
        font-size: 1.4rem;
    }
    .form-label, .field-label {
        font-size: 1.4rem;
    }
    .link-small {
        font-size: 1.0rem;
    }
}