body {
    font-family: 'Poppins', sans-serif;
    color: #333;
}

/* Contact Information */
.pre-navbar {
    background-color: #83bc2c;
    color: white;
    padding: 0.3em 0em 0.3em 0;
}

.pre-navbar i {
    font-size: 1.5em;
}

a {
    color: #83bc2c;
}

a:hover {
    color: #83bc2c;
    text-decoration: underline;
}

.dark-bg {
    background: #13122c;
    color: white;
}

.add {
    background: #83bc2c;
    border: 0;
    /* border-radius: 5px; */
    color: white;
    box-shadow: none;
}

.image_overlay {
    position: absolute;
    background-color: rgba(131, 188, 44, 0.7);
    color: white;
    padding: 0.5em;
    z-index: 9;
}

.image {
    height: 15em;
    width: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* Banner */
.banner {
    height: 70%;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.banner .overlay {
    max-height: 15em;
    width: 20em;
    padding: 1em;
    text-align: center;
    position: absolute;
    left: 1em;
    top: calc(50% - 10em);
    background: rgba(131, 188, 44, 0.7);
    color: white;
}

.section {
    text-align: center;
}

/* Articles */
.article {
    text-align: center;
    background: white;
}

.article img {
    width: 100%;
    height: 15em;
    object-fit: cover;
}

.article .content {
    padding: 1em;
}

.article b {
    font-size: 1.1em;
}

/* Custom */
.hidden {
    display: none;
}

/* About Page */
.accordion {
    border: 0;
    border-radius: 0;
}

.accordion .card .card-header {
    border-radius: 0;
    background: #83bc2c;
}

.accordion .card .card-header * {
    color: white;
}

/* Custom */
.number_plate {
    padding: 0.2em;
    background-color: yellow;
    border: 1px solid black;
    width: 100%;
    font-weight: bold;
    text-align: center;
    color: #212529 !important;
    border-radius: 5px;
    border-left: 20px blue solid;
}

/* Footer */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #13122c;
    padding: 0.5em;
    color: white;
}

/* Override Bootstrap CSS */
h1, h2, h3 {
    color: #333;
    font-weight: bold;
    margin: 0;
}

b {
    font-weight: bold;
    color: #13122c;
}

.text-red {
    color: red;
}

.text-green {
    color: #83bc2c;
}

.text-small {
    font-size: .8em;
}

.modal-header .close {
    color: #eaeaea;
}

.modal-header .close:hover, .modal-header .close:active, .modal-header .close:focus {
    color: white !important
}

.navbar {
    padding: 0.5em;
}

.sticky-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}

.sticky-navbar + .content {
    padding-top: 3.5em;
}

.btn-primary, .qq-upload-button {
    background: #248fc6;
    margin: 0.1em;
    border: 1px solid #248fc6 !important;
}

.btn-primary:hover {
    background: transparent;
    color: #248fc6;
    transition: .5s;
}

.btn-default {
    background-color: rgb(239, 239, 239);
    border: 0 !important;
    margin: 0.1em;
}

.full-width {
    width: 100%;
}

.qq-upload-button {
    width: 100% !important;
}

.overflow_elipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn {
    box-shadow: 0;
    border: 0;
    text-transform: none;
    margin: 0;
}

.btn-success {
    background: #83bc2c !important;
    border: 1px solid #83bc2c;
}

.btn-success:hover {
    background: transparent !important;
    border: 1px solid #83bc2c;
    color: #83bc2c;
    transition: .5s;
}

.btn-danger {
    background: red !important;
    border: 1px solid red !important
}

.red {
    color: red;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: #248fc6;
    border-radius: 0;
    margin: 2px;
    text-align: center;
}

.nav-pills .nav-link, .nav-pills .show > .nav-link {
    border-radius: 0;
    margin: 2px;
    text-align: center;
}

label {
    padding: 0;
    margin: 0;
}

.form-control, .dataTable input, .dataTable select {
    border: 1px solid #ced4da !important;
    box-shadow: 0;
    padding: .375rem .75rem !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #ced4da;
    cursor: not-allowed;
}

.is-invalid {
    border-color: #761b18 !important;
}

.invalid_form_control {
    border: 1px solid red !important;
}

.table-form-control {
    width: 100%;
    border: 0;
}

.table-form-control:focus {
    outline-color: #248fc6;
}

.invalid-feedback {
    display: block;
}

/* Table */
table {
    width: 100%;
    box-shadow: none;
}

.table-striped thead tr {
    background-color: #13122c !important;
    color: white;
}

.table.alt th:first-child {
    border-radius: 10px 0 0 0;
}

.table.alt th:last-child {
    border-radius: 0 10px 0px 0;
}

.table.alt thead tr {
    background-color: white !important;
    color: #13122c;
    font-weight: heavy;
}

.table.alt tbody tr:hover {
    background: #13122c;
    -webkit-backface-visibility: hidden;
    transition: background 300ms linear;
    color: white;
}

.tab-pane {
    padding-top: 1em;
}

.row {
    max-width: 100%;
    margin: 0;
}

/* Popups */
.modal-content {
    border-radius: 0 !important;
}

.modal-header {
    background: #13122c;
    color: white;
    border-radius: 0 !important;
    border: 0;
}

/* Jquery UI */
.jqyc-not-empty-td:hover {
    border-radius: 0 !important;
    background: #248fc6;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #248fc6;
    border: 0;
    color: white;
}

.ui-datepicker {
    min-width: 17em;
    width: 100%;
    max-width: 23em;
}

li.ui-timepicker-selected, .ui-timepicker-list li:hover, .ui-timepicker-list .ui-timepicker-selected:hover {
    background: #248fc6;
}

.media-buttons .form-row * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.diary-unassigned {
    padding: .5em;
    margin: .25em;
}

.form-row {
    vertical-align: middle;
}

.notification {
    font-size: 9px;
    text-align: center;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    background-color: red;
    color: white;
    display: inline-block;
    vertical-align: top;
}

.acknowledged {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: blue;
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.card-header {
    background-color: #13122c;
    color: white;
    font-size: 1.5em;
}

.card-header h1, .card-header h2, .card-header h3 {
    color: white;
}

.card-header .btn {
    position: absolute;
    right: 0.5em;
}

.table-calendar {
    text-align: center;
    cursor: pointer;
}

.table-calendar .past {
    background: #ababab;
}

.table-calendar .day:hover {
    background-color: #248fc6;
    color: white;
}

.table-calendar td, .table-calendar th {
    padding: 0.5em;
}

.table-calendar tr:first-child {
    background-color: #333;
    color: white;
}

.context-menu-item {
    padding: .3em .6em;
}

.select2-container--default .select2-selection--single {
    border-radius: 0;
    border: 1px solid #ced4da;
    height: 2.5em;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.5em;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.5em;
}

.calendar table {
    width: 49%;
}

.badge {
    line-height: 1.25em;
}

.fw-bold {
    font-weight: bold;
}

.page-item.d-none:nth-child(-n+3) {
    display: block !important;
}

.page-item.d-none:nth-last-child(-n+3) {
    display: block !important;
}

.page-item.d-none.active {
    display: block !important;
}

@media only screen and (max-width: 600px) {
    .pre-navbar {
        display: none;
    }

    .calendar table {
        width: 100%;
    }
}