@import 'https://fonts.googleapis.com/css?family=Nunito:700|Raleway:400,400i,600,700';

:root {
    --ke-green: #7AC142;
    --ke-blue: #0B1E60;
    --ke-grey: #efefef
}

/* Text formatting
-------------------------------------------*/
body {
    font-family: 'Raleway', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Helvetica Neue', sans-serif;
}

.fs-small {
    font-size: 14px;
}

/*Set font and size for bootstrap datepicker*/
.datepicker {
    font-size: 14px;
    font-family: Roboto, sans serif
}

.ke-table {
    font-size: 14px;
    max-height: 400px;
    overflow: auto;
}

.ke-table-medium {
    font-size: 14px;
    max-height: 600px;
    overflow: auto;
}

.ke-grey-background {
    background-color: var(--ke-grey) !important;
}


/*
The next definition is necessary due to a bug in Bootstrap 5 which prevents tables with the table-striped class
from showing the text of stiped rows in color. It causes the even numbered rows to be shaded without using the Bottstrap 5 class to do it.
 */
.clickable-table tr:nth-child(even) {
    background-color: var(--ke-grey);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:not(.active) {
    color: #555555;
    cursor: pointer;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--ke-green) !important;
    cursor: pointer;
}

.spinner {
    font-size: 40px;
    color: grey;
}

.clickable-icon {
    cursor: pointer;
}

/* Overrides the size and background color of Bootstrap 5 switches*/
.form-check-lg {
    font-size: 175%;
}

.form-check-lg label {
    font-size: 60%
}

.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}

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

/* Override color of Bootstrap 5 checkbox */

.form-check-input:checked {
    background-color: var(--ke-green) !important;
    border: 0;
}

.form-check-input:focus, .label::after, label.form-check-label:focus, .form-check-input::after, .form-check-input:not(:disabled):not(.disabled):active:focus {
    color: grey;
    outline: 0;
    border: 0;
    box-shadow: 0 0 0 0.1rem lightgrey !important
}

/* Override background color of Bootstrap 5 checked radio button*/

.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
    color: #fff;
    background-color: var(--ke-green);
    border-color: var(--ke-green);
}

/*Tweaks to Bootstrap 5 accordion*/

.accordion-button:focus {
    box-shadow: inherit;
}

.accordion-button:not(.collapsed) {
    color: var(--ke-green);
    background: white;
}


/* HIDE ARROWS ON INPUT TYPE NUMBER
/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
}

.btn-link {
    color: #001e60;
}

.btn-link:hover {
    color: #1c449d;
}

.btn-link:active, .btn-link:focus {
    color: #002c8d;
}

.btn-link:link, .btn-link:visited {
    color: #001e60;
}

/*
Extra screen width break points for desktop computers.
Bootstrap treats anything with a screen width .+1400px the same which causes problems
when trying to deal with laptop screens and destop screens
 */
@media (min-width: 1600px) {
    .col-ke-dt-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-ke-dt-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-ke-dt-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-ke-dt-4 {
        -ms-flex: 0 0 33.3333333%;
        flex: 0 0 33.33333337%;
        max-width: 33.33333337%;
    }

    .col-ke-dt-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-ke-dt-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-ke-dt-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-ke-dt-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-ke-dt-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-ke-dt-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-ke-dt-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-ke-dt-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}