:root {
    --primary: #009ee0;
    --secondary: #fff;
    --accent-1: #009EE0;
    --accent-2: #757575;
    --accent-3: #D8275C;
    --accent-4: #235ec2;
    --accent-5: #eaeaea;
    --success: #03bc50;
    --text-light: #fff;
    --text-dark: #000;

    --type-color-doctor: #1267F9;
    --type-color-house_cleaning : #389A4D;
    --type-color-company: #5D1A59;
    --type-color-appointment: #E55F16;
    --type-color-miscellaneous: #AA2556;;
    --type-color-additional: #e9383a;
    
}

html {
    background-color: var(--primary);
     /* fallback for old browsers */
}

body {
    transition: all 0.3s ease-in-out;
}

body.hidden {
    opacity: 0;
    -moz-opacity:0;
    -khtml-opacity:0;
}

.main-content {
    min-height: 100vh;
}

/* Drags footer up by its height */
footer {
    margin-top: -56px;
}

/* NAV */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--primary);
}

.nav-pills .nav-link {
    background: none;
    border: 0;
    border-radius: 10px;
}

.nav-link:hover, .nav-link:focus {
    color: var(--accent-2);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover { 
    color: var(--accent-2);
}

.nav-link {
    padding: 0.5rem 1rem;
    color: var(--primary);
    transition: all 0.3s ease;
}

.navbar.main-menu {
    border-bottom: 3px solid var(--accent-1);
    background-color: var(--secondary);
}

.navbar-brand img {
    /* margin-top: -20px; */
    max-width: 200px;
    height: 100%; 
    
}

label {
    opacity: 0.8;
}

/* TEXT LAYOUT */

.text-dark {
    color: var(--text-dark) !important;
}

.text-light {
    color: var(--text-light) !important;
}

.text-warning{
    color: var(--accent-3) !important;
}

/* BUTTONS */

.btn{
    padding: 12px 24px;
    border-radius: 10px;
}

.btn-close {
    background-size: 1.5em;
    width: 1.5em;
    height: 1.5em;
}

.btn-primary {
    color: var(--secondary);
    background-color: var(--primary);
    border: none;
    opacity: 1;
    transition: all 0.3s ease;
}

.btn-primary:hover:not(.active) {
    color: var(--secondary);
    background-color: var(--accent-4);
    border: none;
    opacity: 1;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

.btn-primary:focus:not(.active) {
    color: var(--secondary);
    background-color: var(--accent-4);
    border: none;
    opacity: 1;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

.btn-success {
    color: var(--secondary);
    background-color: var(--success);
}

.btn-success:hover:not(.active) {
    color: var(--secondary);
    background-color: var(--accent-4);
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}


.btn-outline-primary {
    color: var(--primary);
    background-color: var(--secondary);
    border: 2px solid var(--primary);
    opacity: 1;
    transition: all 0.3s ease;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}

.btn-outline-primary:hover:not(.active) {
    color: var(--text-light) !important;
    background-color: var(--primary);
    border: 2px solid var(--primary);
    opacity: 1;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    /* box-shadow: 0 0 0 0.25rem var(--accent-1); */
    color: var(--text-light) !important;
    background-color: var(--primary);
    border: 2px solid var(--primary);
    opacity: 1;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}


.btn-link{
    color: var(--accent-1);
    transition: all 0.3s ease;
}

.btn-link:hover, .btn-link:focus {
    color: var(--accent-2);
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

.btn-outline-danger{
    color: var(--accent-3);
    background-color: var(--secondary);
    border: 2px solid var(--accent-3);
    opacity: 1;
    transition: all 0.3s ease;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}

.btn-outline-danger:hover:not(.active) {
    color: var(--text-light) !important;
    background-color: var(--accent-3);
    border: 2px solid var(--accent-3);
    opacity: 1;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

.btn-outline-pdanger, .btn-outline-danger:focus {
    /* box-shadow: 0 0 0 0.25rem var(--accent-1); */
    color: var(--text-light) !important;
    background-color: var(--accent-3);
    border: 2px solid var(--accent-3);
    opacity: 1;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

/* DROPDOWN */

ul.dropdown-menu {
    width: 100%;
}


.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
    
    color: var(--text-light) !important;
    background-color: var(--primary);
    opacity: 1;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: var(--text-light) !important;
    background-color: var(--primary);
    opacity: 1;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

label.dropdown{
    top: -5px !important;
}

/* FORMS */

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: var(--accent-1);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--accent-1);
}

.form-control input:hover {
    border-color: var(--accent-1);
}

.form-control select:hover {
    border-color: var(--accent-1);
}

.form-control button {
    border-radius: 0.25rem;
}

.form-control button:hover {
    border-color: var(--accent-1);
}

/* NAV */

.flex-grow-2 {
    flex-grow: 3;
}

.flex-grow-3 {
    flex-grow: 3;
}

.flex-grow-4 {
    flex-grow: 4;
}

.logo-local-messenger {
    width: 185px;
}

/* Searchbar */

#searchbar {
    background: var(--secondary);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding-left: 16px;
    padding-right: 16px;
    /* border-top-right-radius: 15rem !important;
    border-bottom-right-radius: 15rem  !important; */
}


#searchbar.focused {
    /* Box-shadow when the input is focused */
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.7);
}

#searchbar input.form-control {
    background: transparent;
    outline: 0;
    box-shadow: none;
}

#btn-search{
    font-size: 1.25em;
    padding: 8px 24px;
}


/* Cards */

.card {
    background: var(--secondary);
    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
   
}


.card.request-card:focus, .card.request-card:hover {
    /* Box-shadow when the input is focused */
    box-shadow: -3px 3px 20px rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
    outline: none;
}


.card .full-height {
    height: 300px;

}

.card-heading {
    margin-top: 20px;;
    color: #ffffff;
}

/* Overwrite all type colors if it is on a card */
.card-icon span{
    background: #ffffff !important;
}


/* LISTINGS */

.list-group-item .request-type {
    width: 10px;
    min-height: 100%;
}


.type-doctor {
    /* background: var(--accent-1); */
    background: var(--type-color-doctor);
}
.type-house_cleaning {
    /* background: #00CD9B; */
    background: var(--type-color-house_cleaning);
}
.type-company{
    /* background: #b223b9; */
    background: var(--type-color-company);
}
.type-appointment {
    /* background: #9A6B31; */
    background:var(--type-color-appointment);
}
.type-miscellaneous {
    /* background: #FC31B6; */
    background: var(--type-color-miscellaneous);
}
.type-additional {
    background: var(--type-color-additional);
}

.list-group-item h3, .list-group-item h4, .list-group-item h5 {
    margin-top: 0;
    margin-bottom: 0;
}

li.list-group-item:hover {
    background: var(--accent-5) !important;
    transition: all 0.3s ease-in-out;
}

.list-group-item.item-user h4 {
    font-size: 1.0rem;
}

.page-title {
    margin-bottom: 0px;
    font-size: 2.25rem;
    /* margin-top: 30px; */
    line-height: 1.5;
}

.field-label {
    font-size: 0.75rem;
    color: var(--accent-2);
}

.user-image img {
    width: 70px;
    /* vertical-align: middle; */
    /* display: none; */
}

.user-list .user-image .material-symbols-outlined {
    font-size: 3.5rem;
}

.user-image {
    /* background: url(https://mdbcdn.b-cdn.net/img/new/avatars/9.webp) no-repeat;
    object-fit:fill ;
    height:100px;
    width: 100px; */
}

/* MODAL */

.modal h2 {
    font-size: 1.5rem;
}

/* Request Assign */
/* Prevent modal from clipping dropdown list */

#request_assign .modal-content{
    min-height: 400px ;
    overflow: visible !important;
}

#request_assign .modal-body{
    overflow: visible !important;
}

/* FILTER */

.action-filter-wrapper div.mx-2:last-child {
    margin-right: 0px !important;
}