/*default colours*/
:root {
    --primary: white;
    --secondary: #355c7d;
    --tertiary: #f67280;
    --text-icon-colour: black;
    --body: white;
    --text-outer: black;
    --bg-image: url(https://source.unsplash.com/random/600x800);

}

/* Dark theme coloured*/
[data-theme="dark"] {
    --primary: #2A2C2C;
    --secondary: #474747;
    --secondaryBorder: #474747;
    --tertiary: #2A2C2C;
    --text-icon-colour: white;
    --body: #373737;
    --text-outer: grey;
}

/* Candy coloured*/
[data-theme="purple"] {
    --primary: white;
    --secondary: #FF7A45;
    --tertiary: #BA68C8;
    --text--icon-colour: black;
    --body: white;
    --text-outer: black;
}

[data-theme="forest"] {
    --primary: white;
    --secondary: #45C5FF;
    --tertiary: #008933;
    --text-icon-colour: black;
    --body: white;
    --text-outer: black;

}

.sidebar,
.navbar,
body,.card {
    transition: 1s;
}

.body {
    background: var(--body) !important;

}

.primary {
    background: var(--primary) !important;
}

.secondary {

    background: var(--secondary) !important;
    color: white;

}

.secondaryBorder {
    border: var(--secondaryBorder) 1px solid !important;
}

.secondary:hover {
    color: white;
}


.tertiary {
    background: var(--tertiary) !important;
}

.tertiarySelect {
    background: var(--tertiary) !important;
    color: white;
}

.tertiarySelect:hover {
    color: white !important;
}

.icon-top {
    color: white;
}

/* Login form text colour (forgot password etc) */
.textOuter a, .textOuter h4 {
    color: var(--text-outer);
}

.textOuter a:hover {
    color: var(--text-outer);
    background-color: var(--primary);
}

/* Default a colours */
.dropdown-item,
a,
fas {
    color: var(--text-icon-colour);

}

.dropdown-item:hover,
a:hover,
.fas:hover {
    background-color: var(--secondary);
    color: white;
}

.dropdown-header {
    border: 0 !important;
}


.dropdown-toggle {
    color: white;
}

.dropdown-toggle:hover {
    color: white;
}

.collapse-header,
.collapse-item {
    color: var(--text-icon-color) !important;
}

.fa-bars {
    color: var(--secondary) !important;
}

/* Actual theme button styles */
.theme {
    place-self: center;
    margin-bottom: 10px;
    text-align: center;
}

.theme button {
    border: 1px white solid;
    border-radius: 50%;
    color: white;
    padding: 10px;

}

.theme #light {
    background-color: #f67280;
}

.theme #forest {
    background: linear-gradient(90deg, #45C5FF, #008933);
}

.theme #dark {
    background-color: #2A2C2C;
}

.theme #purple {
    background: linear-gradient(90deg, #BA68C8, #FF7A45);
}


i,
a {
    font-size: 1.2em;
}

.hide {
    display: none !important;
}

.selectors {
    padding: 0 !important;
    padding-left: 0.5vw !important;
    font-size: 1rem !important;
    border-radius: 10rem;
}

.blackout {
    background-color: black !important;
}

.alert-success {
    background-color: #1cc88a !important;
    color: white;
    border-color: #1cc88a !important;
}

.alert-danger {
    background-color: #e74a3b !important;
    color: white;
    border-color: #e74a3b !important;
}

.card {
    border: 1px;
}

.bg-login-image {
    background: var(--bg-image);
    background-position: center;
    background-size: cover;
}