/* ##### COLORS ##### */
:root {
    --app-text: #ffffff;
    --app-text-v: #aaaaaa;
    --app-background: #292529;
    --app-primary: #d8277e;
    --app-primary-shade: #ae2065;
    --app-primary-shadow: #d8277e40;
    --app-secondary: #522c9e;
    --app-secondary-shade: #442483;
    --app-secondary-shadow: #522c9e40;
    --app-accent: #47d1ac;
    --app-footer: #150a11;
    --app-grey: #696969;
}

::selection {
    color: white;
    background-color: var(--app-primary);
}

em::selection {
    background-color: var(--app-accent);
}

/* Background-color */
.app-primary {
    background-color: var(--app-primary) !important;
}

.app-secondary {
    background-color: var(--app-secondary) !important;
}

.app-bg {
    background-color: var(--app-background) !important;
}

.app-bg-2 {
    background-color: var(--app-footer) !important;
}

/* Text color */
.app-primary-text {
    color: var(--app-primary) !important;
}


/* ##### DEFAULTS ##### */
body {
    color: var(--app-text) !important;
    background-color: #0c0007 !important;
    font-family: 'Trebuchet MS', sans-serif;
    overflow: hidden;
    height: 100vh;
    margin: 0rem;
}

a {
    color: #fefefe !important;
    text-decoration: none;
    transition: ease-in-out .15s all;
}

a:hover {
    color: var(--app-primary) !important;
}

p,
h1, h2, h3 {
    margin-bottom: 0;
}

div.center,
p.center {
    text-align: center;
} 

div.justify,
p.justify {
    text-align: justify;
}

div.left,
p.left {
    text-align: left;
}

div.right,
p.right {
    text-align: right;
}

em {
    color: var(--app-primary);
}


/* ##### AESTHETICS ✨ ##### */
.hide,
.hidden {
    display: none;
}

.invisible {
    visibility: none !important;
}

.uppercase {
    text-transform: uppercase;
}


/* ##### BUTTONS ##### */
.btn:not(#sidebarToggle) > svg {
    margin-right: 0.5rem;
}

.btn-primary {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--app-primary-shade) !important;
    border-color: var(--app-primary-shade) !important;
    color: white !important;
}

.btn-secondary {
    background-color: var(--app-secondary) !important;
    border-color: var(--app-secondary) !important;
}

.btn-secondary:hover {
    background-color: var(--app-secondary-shade) !important;
    border-color: var(--app-secondary-shade) !important;
}

.btn-accent {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
}

.centerSingleBtn {
    margin-inline: auto !important;
}

.btnBar {
    display: flex;
    flex-direction: row;
}

.btnBar > a:not(:last-child),
.btnBar > button:not(:last-child) {
    margin-right: .75rem;
}

.btnBar.center {
    justify-content: center;
}

/* ##### INPUTS ##### */
a,
select,
input[type="file"],
input[type="checkbox"] {
    cursor: pointer;
}

.nav-link:hover {
    cursor: pointer;
}

.form-control:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--app-primary-shadow) !important;
}

.form-split {
    width:100%; 
    display:flex; 
    justify-content:space-between;
}

.form-split > div {
    width: 48%;
}

.form-checkbox {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    padding-left: .25rem;
}

.form-checkbox input[type="checkbox"] {
    transform: scale(1.25);
    margin-left: .5rem;
}

.form-checkbox h5 {
    margin: 0;
}

.form-input-text {
    padding-left: .25rem;
}

.dropdown-item:active {
    color: #1e2125;
    text-decoration: none;
    background-color: #dfe4e9;
}

.dropdown-item:focus-visible {
    outline: none;
}


/* ##### SEARCH BAR ##### */
#searchInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 100%; /* Increase font-size */
    padding: 12px 20px 12px 12px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#searchUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#searchUL li a {
    border: 1px solid #ddd; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove default text underline */
    font-size: 100%; /* Increase the font-size */
    color: black; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
}

#searchUL li a:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
}

#searchUL li:first-child a {
    border-radius: .25rem .25rem 0 0;
}

#searchUL li:last-child a {
    border-radius: 0 0 .25rem .25rem;
}

#searchUL li:first-child:last-child a {
    border-radius: .25rem;
}