html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: #dddddd;
    margin-bottom: 60px;
}

.mb-6 {
    margin-bottom: 4rem !important;
}

.mb-7 {
    margin-bottom: 5rem !important;
}

#app_logo {
    max-height: 1.5em;
    margin-right: 5px;
}

.main-footer {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

a {
    color: #7b2371;
}

    a:hover {
        color: #571950;
    }

.kpr-blue {
    color: #008fcd;
}

.kpr-green {
    color: #00764d;
}

.bg-kpr-purple {
    background-color: rgba(123, 35, 113, 1);
}

.bg-kpr-header {
    background-color: rgba(123, 35, 113, 1);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #7b2371;
}

/***************************************************************/
/* Buttons Start */

.btn-tall {
    padding: 1.375rem 0.75rem;
}

.btn-primary {
    color: #fff;
    background-color: #7b2371;
    border-color: #7b2371;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #571950;
        border-color: #571950;
    }

    .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
        box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #992b8c;
        border-color: #992b8c;
    }

    .btn-primary:focus, .btn-primary.focus {
        color: #fff;
        background-color: #992b8c;
        border-color: #992b8c;
        box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
    }

.btn-outline-primary {
    color: #571950;
    background-color: transparent;
    background-image: none;
    border-color: #571950;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #571950;
        border-color: #571950;
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: #7b2371;
        border-color: #571950;
    }

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgb(123 35 113 / 50%);
            box-shadow: 0 0 0 0.2rem rgb(123 35 113 / 50%);
        }

    .btn-outline-primary:focus, .btn-outline-primary.focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgb(123 35 113 / 50%);
        box-shadow: 0 0 0 0.2rem rgb(123 35 113 / 50%);
    }

.btn-success {
    color: #fff;
    background-color: #5cba48;
    border-color: #55ad42;
}

.btn-success {
    background-image: none;
    background-image: none;
    background-repeat: no-repeat;
}

    .btn-success:hover {
        color: #fff;
        background-color: #55ad42;
        border-color: #55ad42;
    }

    .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
        color: #fff;
        background-color: #5cba48;
        border-color: #55ad42;
    }

        .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgb(42 85 33 / 50%);
            box-shadow: 0 0 0 0.2rem rgb(42 85 33 / 50%);
        }

    .btn-success:focus, .btn-success.focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgb(42 85 33 / 50%);
        box-shadow: 0 0 0 0.2rem rgb(42 85 33 / 50%);
    }

    .btn-success:focus, .btn-success.focus {
        color: #fff;
        background-color: #5cba48;
        border-color: #55ad42;
        box-shadow: 0 0 0 0.2rem rgb(100 46 94 / 50%);
    }

.btn-info {
    color: #fff;
    background-color: #0386b1;
    border-color: #0386b1;
}

    .btn-info:hover {
        color: #fff;
        background-color: #0079a1;
        border-color: #0079a1;
    }

    .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
        box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
    }

    .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
        color: #fff;
        background-color: #00a1d7;
        border-color: #00a1d7;
    }

    .btn-info:focus, .btn-info.focus {
        color: #fff;
        background-color: #0079a1;
        border-color: #0079a1;
        box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
    }

.btn-warning {
    color: #fff;
    background-color: #f26a2a;
    border-color: #dc6329;
}

.btn-warning {
    background-image: none;
    background-image: none;
    background-repeat: no-repeat;
}

    .btn-warning:hover {
        color: #fff;
        background-color: #dc6329;
        border-color: #dc6329;
    }

    .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle {
        color: #fff;
        background-color: #f86f2f;
        border-color: #dc6329;
    }

        .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgb(97 43 18 / 50%);
            box-shadow: 0 0 0 0.2rem rgb(97 43 18 / 50%);
        }

    .btn-warning:focus, .btn-warning.focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgb(97 43 18 / 50%);
        box-shadow: 0 0 0 0.2rem rgb(97 43 18 / 50%);
    }

    .btn-warning:focus, .btn-warning.focus {
        color: #fff;
        background-color: #f86f2f;
        border-color: #dc6329;
        box-shadow: 0 0 0 0.2rem rgb(100 46 94 / 50%);
    }

.btn-danger {
    color: #fff;
    background-color: #C71C22;
}

.btn-danger {
    background-image: none;
    background-image: none;
    background-repeat: no-repeat;
}

.btn-kprblue {
    color: #fff;
    background-color: #1085b1;
    border-color: #10779e;
}

.btn-kprblue {
    background-image: none;
    background-image: none;
    background-repeat: no-repeat;
}

    .btn-kprblue:hover {
        color: #fff;
        background-color: #10779e;
        border-color: #10779e;
    }

    .btn-kprblue:not(:disabled):not(.disabled):active, .btn-kprblue:not(:disabled):not(.disabled).active, .show > .btn-kprblue.dropdown-toggle {
        color: #fff;
        background-color: #10779e;
        border-color: #10779e;
    }

        .btn-kprblue:not(:disabled):not(.disabled):active:focus, .btn-kprblue:not(:disabled):not(.disabled).active:focus, .show > .btn-kprblue.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
            box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
        }

    .btn-kprblue:focus, .btn-primary.focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
        box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
    }

    .btn-kprblue:focus, .btn-primary.focus {
        color: #fff;
        background-color: #10779e;
        border-color: #10779e;
        box-shadow: 0 0 0 0.2rem rgb(60 17 55 / 50%);
    }

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

    .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
        color: #fff;
        background-color: #545b62;
        border-color: #4e555b;
    }

    .btn-secondary.focus, .btn-secondary:focus {
        box-shadow: 0 0 0 0.2rem rgb(108 117 125 / 50%);
    }

    .btn-secondary:hover {
        color: #fff;
        background-color: #5a6268;
        border-color: #545b62;
    }

.btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    background-image: none;
    border-color: #6c757d;
}

    .btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .btn-outline-secondary.focus, .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0.2rem rgb(108 117 125 / 50%);
    }

    .btn-outline-secondary:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

/* Buttons End */
/***************************************************************/

.red-text {
    color: #ee0000;
}

.req {
    color: #cc0000;
    font-weight: bold;
}

.grow-textarea {
    resize: none;
    min-height: 65px;
    overflow: hidden;
    box-sizing: border-box;
}

.tab-pane {
    padding: 20px 15px;
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(10, 63, 140, 1);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

.div_form_output {
    display: block;
    width: 100%;
    height: auto;
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.page-link {
    position: relative;
    display: block;
    color: #7b2371;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .page-link:hover {
        z-index: 2;
        color: #fff;
        background-color: #571950;
        border-color: #571950;
    }

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #7b2371;
    border-color: #7b2371;
}

.mr-5 {
    margin-right: 5px;
}

.br-15 {
    border-radius: 15px;
}

/* From original PHP */

.search-box {
    background-color: #eee;
    margin-bottom: 10px;
    border-radius: 12px;
}

.btnNav {
}

.btnMenu {
    float: right;
    padding: 7px 10px;
    border-radius: 10px;
    background-color: #eee;
}

    .btnMenu a {
        color: #555;
        padding: 5px;
        border-radius: 5px;
    }

        .btnMenu a:hover {
            background-color: #ccc;
        }

.td-profile-image {
    vertical-align: middle;
    text-align: center;
    max-width: 110px;
}

.td-button {
    vertical-align: middle;
    text-align: center;
    max-width: 110px;
}

/* Profile-image-container added by Gab*/
.profile-image-container {
    width: 160px;
    max-height: 160px;
    overflow: hidden;
    border-radius: 50%;
}

.profile-image {
    max-width: 100%;
    max-height: 100%;
    /* border-radius: 50%; */
}

.card-title a {
    color: white;
    text-decoration: none;
}

    .card-title a:hover {
        color: #ccc;
        text-decoration: none;
    }

.teams-grid .card {
    margin-bottom: 10px;
    background: black;
}

.teams-grid .card-img {
    opacity: 0.5;
}

button.profile-button {
    border: none;
    background: transparent;
}

box.heightwidth {
    height: 202px;
    width: 285px;
}

/* END From original PHP */

div.info-box {
    border: 1px solid #ccc;
    border-radius: 10px;
    color: white;
    margin-bottom: 20px;
}

.info-box-bg-1 {
    background-color: #0a3f8c;
    background-image: linear-gradient(-45deg, rgb(123, 35, 113)  0%, #0a3f8c 30%, #01a2d9 80%, #ffffff 100%);
}

.info-box-bg-2 {
    background-color: #3c9940;
    background-image: linear-gradient(-45deg, #0a3f8c 0%, #01a2d9 80%, #ffffff 100%);
}

div.info-box > div {
    /*position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);*/
    text-align: center;
    font-size: 1.4em;
    padding: 20px 10px;
}

a.info-box-link {
    color: white;
    text-decoration: none;
    -webkit-transition: text-shadow 0.1s linear;
    -moz-transition: text-shadow 0.1s linear;
    -ms-transition: text-shadow 0.1s linear;
    -o-transition: text-shadow 0.1s linear;
    transition: text-shadow 0.1s linear;
}

    a.info-box-link:hover {
        text-shadow: 5px 5px 5px rgba(37, 37, 37, 1);
    }

a.card-title-link {
    color: #0386b1;
    text-decoration: none;
}

    a.card-title-link:hover {
        color: #f26a2a;
    }

hr.top-hr {
    border-top: 3px solid rgb(123 35 113);
}

div#searchResults {
    display: none;
    margin-top: 20px;
}

.coordinator {
    font-size: 0.5em;
    color: #999;
}