body {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    font-weight: normal;
    background: #fff;
    color: #003300;
    background-image: url(graphics/bg-park2.jpg);
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center
}

a.nav-link {
    font-weight: 500;
    line-height: 33px;
}
li.nav-item.active {
    background: #59b45c;
    pointer-events: none;
}

/* th, td { 
    white-space: nowrap !important; 
} */
th, td
{
    white-space: nowrap !important; 
}
#parken_wrapper th, #parken_wrapper td, #ledenlijst_wrapper th, #ledenlijst_wrapper td {
    white-space: normal !important;
    vertical-align: top;
}
.main-container {
    max-width: 1320px;
    margin: 0 auto
}
.transform-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.card {
    border: none;
    height: auto;
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
}
.list-group {
    border-radius: 5px;
}
.navbar-dark.bg-dark, .list-group, .card, .shadow-box {
    -webkit-box-shadow: 0px 10px 34px -5px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 10px 34px -5px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 10px 34px -5px rgba(0, 0, 0, 0.24);
}
.card.login {
    padding: 3rem 2rem 2rem 2rem !important;
}
.card.lidnummer {
    padding: 3rem 2rem 2rem 2rem !important;
}
.forms-inputs{
    position: relative
}
.forms-inputs span{
    position: absolute;
    top:-23px;
    left: 10px;
    background-color: #fff;
    padding: 5px 10px;
    font-size: 15px
}
.forms-inputs input{
    height: 50px;
    border: 2px solid #eee;
    width: 100%;
    padding: 1px 20px
}
.forms-inputs input:focus{
    box-shadow: none;
    outline: none;
    border: 2px solid #000
}
/* .btn{
    height: 50px
} */
.success-data{
    display: flex;
    flex-direction: column
}
.bxs-badge-check{
    font-size: 90px
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
.custom-title {
    margin-top: -25px;
    margin-bottom: 20px
}
.custom-line {
    margin: 2rem 0
}

.btn.btn-orange {
    background: #eb9b66;
    border-color: #eb9b66;
    color: #fff;
}

.btn.btn-orange:hover {
    background: #d67534;
    border-color: #d67534;
    color: #fff;
}
.btn.btn-red {
    background: #e97052;
    border-color: #e97052;
    color: #fff;
}
.btn.btn-red:hover {
    background: #ec5833;
    border-color: #ec5833;
    color: #fff;
}
.btn.btn-green {
    background: #80d083 ;
    border-color: #80d083 ;
    color: #fff;
}
.btn.btn-green:hover {
    background: #59b45c ;
    border-color: #59b45c ;
    color: #fff;
}
.login .forms-inputs input.input-placeholder {
    padding: 12px 20px 1px;
}
.forms-inputs input.input-placeholder {
    letter-spacing: 0.5px;
    padding: 5px 20px 1px;
}
.forms-inputs input.input-placeholder::placeholder {
    letter-spacing: 0px;
}
.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: .25rem;
    margin-top: 15px
}
li.breadcrumb-item {
    width: 100%
}
li.nav-item {
    padding: 0 5px;
}
nav a.btn.btn-orange, nav a.btn.btn-red {
    color: #fff !important;
    line-height: 33px;
}
div#offcanvasNavbar2 {
    background: #80d083 !important;
}
.offcanvas {
    max-width: 85%;
}
.navbar-dark.bg-dark {
    background-color: #80d083 !important;
    min-height: 65px;
}
.btn-full {
    display: block;
    width: 100%;
}
.btn-dark {
    color: #fff !important
}
.btn-active {
    pointer-events: none
}
.no-padding {
    padding: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important
}
.edit-profile-inputs {
    margin-top: 25px;
    background: #fff
}
#parken th, #leden th, #lid_reserveringen th, #mijn_reserveringen th {
    font-size: 12px !important;
    vertical-align: top;
}
.dataTable td {
    font-size: 14px !important;
    height: 45px !important;
}

/* #parken_wrapper, #leden_wrapper, #lid_reserveringen_wrapper {
    background: #fff;
    padding: 25px;
    border-radius: .25rem;
    margin-top: 25px;
    -webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
} */
/* .card-body .btn-green {
    margin-right: 5px;
}
.card-body .btn.red {
    margin-right: 5px;
} */
.dataTable .btn {
    display: block;
    font-size: 12px !important;
    min-width: 65px;
}
.card .mh-5 {
    height: 75px;
    overflow-y: auto;
    margin: 10px 0 5px;
    font-size: 14px;
}

.list-group-item {
    font-size: 14px;
    padding: 5px 15px;
}

.card .list-group-item {
    font-size: 14px;
    padding: 5px 15px;
}
.card .list-group-item.bt {
    border-top: 1px solid grey
}
.card .fr {
    float: right;
}

.mobile-only {
    display: none;
}
.desktop-only {
    display: none;
}

/* .offcanvas-news {
    display: none;
} */

@media screen and (min-width: 680px)
{
    #parken .mh-5 {
        height: 100px;
        overflow-y: auto;
        margin: 0;
        font-size: 14px;
    }
    .desktop-only {
        display: inherit;
    }
    .mobile-only {
        display: none !important;
    }
}

@media screen and (max-width: 680px)
{
    /* table.dataTable > tbody > tr.child ul.dtr-details {
        width: 100%;
    } */
    /* #parken span.fr {
        float: right;
        margin-right: 15px;
    } */
    /* #parken th:nth-child(1), #parken th:nth-child(2), #leden th:nth-child(1), #leden th:nth-child(2) {
        min-width: 140px !important;
        max-width: 140px !important;
        width: 140px !important;
    } */
    .mobile-only {
        display: inherit;
    }
    .desktop-only {
        display: none !important;
    }
    /* #parken .btn.btn-green, #leden .btn.btn-green, #parken .btn.btn-red, #leden .btn.btn-red, #leden .btn.btn-orange {
        margin-top: -20px;
        font-size: 14px;
    } */
    .mobile-form #manual_time {
        width: 60%;
        max-width: 60%;
        padding: 1px 15px 0;
    }
    .mobile-form input[type=submit] {
        width: 30%;
        max-width: 30%;
        float: right;
    }
}
#leden_filter, #parken_filter, #kiesanderlid_filter, #lid_reserveringen_filter {
    width: 100% !important;
    display: block !important;
}
#leden_filter label, #parken_filter label, #kiesanderlid_filter label, #lid_reserveringen_filter label {
    display: block !important;
    width: 100% !important;
    float: left !important;
    text-align: left !important;
}
#leden_filter input, #parken_filter input, #kiesanderlid_filter input, #lid_reserveringen_filter input {
    display: block !important;
    width: 100% !important;
}
#leden_paginate, #parken_paginate {
    float: left;
    text-align: center;
    padding-top: 0.25em;
    width: 100%;
}
.card.park {
    padding: 3rem 2rem 2rem 2rem !important;
    margin-top: 25px;
}
.park-toevoegen label {
    display: block;
    background-color: #fff;
    padding: 0 10px 0px 20px;
    font-size: 15px;
    min-height: 55px;
    margin-top: -20px;
    min-height: 35px;
}
textarea.input-placeholder {
    display: block;
    width: 100%;
    letter-spacing: 0.5px;
    padding: 5px 20px 1px;
    border: 2px solid #eee;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: inherit !important;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    font-size: 12px !important;
}
.list-group-item.active {
    z-index: 2;
    color: #000;
    background-color: #80d083;
    border-color: #80d083;
}
.reserveren .table {
    table-layout: fixed;
    width: 100%;
}
.reserveren .table td {
    height: 40px !important;
    max-height: 40px !important;
    vertical-align: middle;
    text-align: center;
}
/* .reserveren .table td a {
    display: inline-block;
    width: 95%;
    height: 95%;
    text-align: center;
    padding: 9px 7px;
    border-radius: 4px;
} */
.table.boekingen td {
    font-size: 14px;
}
.table.boekingen th {
    font-size: 12px !important;
}
.alert p {
    font-size: 14px;
}
table.dataTable thead th, table.dataTable tfoot th {
    font-size: 12px;
}
table.dataTable tbody tr.even {
    background-color: #eaeaea;
}
.notbookednottodayselected {
    border: 1px solid #003300;
    background-image: none;
    /* background-color: #80d083 !important; */
    border-bottom-width: 1px !important;
}

.fullbookednottodaynotselected {
    border: 1px solid #003300;
    background-image: none;
    border-bottom-width: 1px !important;
}
.notbookednottodaynotselected {
    border: 1px solid #003300;
    background-image: none;
    /* background-color: #eb9b66 !important; */
    border-bottom-width: 1px !important;
}
.fullbookednottodaynotselected, .fullbookedtodaynotselected {
    background-color: #FF0000 !important;
}
.fullbookedtodayselected, .fullbookednottodayselected {
    background-color: #FFF !important;
}
select#aantalHoles {
    padding: 5px 10px;
    margin-top: 1px;
    border-radius: 5px;
    font-size: 14px;
}
.card.rounded-circle:hover{
    -webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
}
.input-group-text {
    min-width: 150px;
    line-height: 24px;
    font-size: 14px;
}
.table>:not(caption)>*>* {
    padding: 0;
    border-bottom-width: 0;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

table.dataTable td {
    font-size: 14px !important;
}

.parkinfo h5.card-title {
    margin-top: 7px;
}

@media screen and (min-width: 680px)
{
    /* li.nav-item:not(.first) {
        border-left: 1px solid
    } */
    li.nav-item {
        padding: 0 5px;
        border-radius: 0.375rem;
        margin: 0 5px;
    }
    li.nav-item:hover {
        color: #80d083;
        background: #fff;
    }
    .nav-link:focus, .nav-link:hover {
        color: #003300;
    }
    .card-body.scrollY {
        max-height: 75vh;
        overflow-y: auto;
    }
    .fr i.fa-solid.fa-circle {
        display: none;
    }
}

@media screen and (max-width: 680px)
{
    select#aantalHoles {
        font-size: 16px !important;
    }
    .px-5.px-0-mobile {
        padding-right: 0!important;
        padding-left: 0!important;
    }
    .input-group, .input-group-prepend, .input-group-text {
        width: calc(100% - 1px);
        display: block;
        text-align: left;
        border-radius: 0;
    }
    .input-group input, select.form-control {
        width: calc(100% - 2.4px) !important;
        display: block;
        text-align: left;
        border-radius: 0;
        margin-left: .4px !important;
    }
    .input-group-prepend .input-group-text, .input-group input {
        border-radius: 0;
    }
    div.dt-buttons {
        width: 100%;
        display: inline-block;
    }
    button.dt-button {
        width: 32%;
        float: left;
    }
    .dt-container .dt-search {
        display: block;
        width: calc(100% - 5px);
    }
    .accordion .card {
        border: none;
        height: auto;
        width: 100%;
        overflow: hidden;
        background: #fff;
        border-radius: 5px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .accordion .card .card-body {
        padding: 0;
    }
    table.dataTable > tbody > tr.child ul.dtr-details {
        width: 100%;
    }
    table.dataTable > tbody > tr.child span.dtr-title, table.dataTable > tbody > tr.child span.dtr-data {
        min-width: 50% !important;
        display: inline-block !important;
    }
    #parken td ul li:nth-child(7) .dtr-title, #parken td ul li:nth-child(8) .dtr-title {
        display: none !important;
    }
    #parken td ul li:nth-child(7) .dtr-data, #parken td ul li:nth-child(8) .dtr-data {
        width: 100% !important;
    }
    .mrgn-bttm-mobile {
        margin-bottom: .5rem !important;
    }
    .list-group.nieuws {
        max-height: 30vh;
        overflow-y: scroll;
    }
}

.dt-buttons {
    width: 33%;
    float: right;
    text-align: right;
}
.dt-search {
    width: 66%;
    float: left;
}
.dt-search label {
    display: none;
}
div.dt-container .dt-search input {
    width: 100%;
    padding: 5px 15px !important;
}
button.dt-button {
    background: #eb9b66 !important;
    border-color: #eb9b66 !important;
    color: #fff !important;
}
button.dt-button:hover {
    background: #d67534 !important;
    border-color: #d67534 !important;
}
button.dt-button.new-btn {
    background: #80d083 !important;
    border-color: #80d083 !important;
    color: #fff !important;
}
button.dt-button.new-btn:hover {
    background: #59b45c !important;
    border-color: #59b45c !important;
}
.main-container:last-child {
    margin-bottom: 25px;
}
td.dtfc-fixed-start.dtfc-fixed-left, th.dt-orderable-none.dtfc-fixed-start.dtfc-fixed-left {
    background: #fff;
    z-index: 1;
    background-color: white;
}
div.dt-container .dt-search input {
    margin-left: 0 !important;
}
div.dt-container .dt-search input {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--bs-body-color) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-radius: 0 !important;
}
div.dt-container .dt-search input:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control, .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select, .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback), .input-group-text {
    border-radius: 0 !important;
}

@media (min-width: 1100px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1060px;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1160px;
    }
}

@media (min-width: 1300px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1260px;
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}

.list-group {
    --bs-list-group-border-radius: 0;
}

select:not(:disabled) {
    background: url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right;
    background-position-x: 95%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: #dad5d5;
}

::-webkit-scrollbar-thumb {
    background-color: #80d083;
}

.alert {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 0;
    border-radius: 3px;
    border: none;
}

.alert.alert-succes {
    background: #59b45c;
    color: #fff;
}

.alert.alert-danger {
    background: #ec5833;
    color: #fff;
}

@media screen and (min-width: 680px)
{
    .dt-info {
        bottom: 0;
        left: 0;
        /* position: absolute; */
        width: 100%;
        text-align: left;
        float: right;
    }
    .dt-paging.paging_simple_numbers {
        bottom: 0;
        right: 0;
        /* position: absolute; */
        width: 100%;
        text-align: center;
        float: right;
    }
    div.dt-container .dt-paging .dt-paging-button {
        padding: 5px 15px;
        font-size: 14px;
        height: 40px;
        min-width: 50px;
    }
    .dt-info {
        height: 40px;
        font-size: 14px;
        line-height: 40px;
    }
    button.dt-paging-button.previous {
        position: absolute;
        left: 0;
    }
    button.dt-paging-button.next {
        position: absolute;
        right: 0;
    }
    div.dt-container {
        position: relative;
        clear: both;
    }
    .dt-scroll {
        margin-bottom: 15px;
    }
    div#boekingen_wrapper {
        min-height: auto;
    }
}

.head-item {
    font-size: 16px;
    padding: 8px 15px;
    font-weight: bold;
}

.error-message-danger {
    display: block; 
    margin-bottom: 10px; 
    background: #e97052; 
    color: #fff; 
    padding: 10px;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    border-radius: 3px;
}

.error-message-success {
    display: block; 
    margin-bottom: 10px; 
    background: #59b45c; 
    color: #fff; 
    padding: 10px;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    border-radius: 3px;
}

#parken_wrapper td .hide, #boekingen_wrapper td .hide, #mijn_reserveringen_wrapper .hide, .col.hide, #kiesanderlid .hide {
    display: none !important;
}

.nieuws .error-message-success, .nieuws .error-message-danger {
    margin-top: 0;
}

@media print {
    .hide-print {
        display: none !important;
    }
    .show-print {
        display: inherit !important;
    }
}

@media screen and (min-width: 680px)
{
    .modernWay {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
                line-clamp: 1; 
        -webkit-box-orient: vertical;
    }
    .row.calendar-form .col-lg-8.col-12 input {
        width: 45%;
        height: 31px;
        padding: 0 5px;
    }
}
@media screen and (max-width: 680px)
{
    .modernWay {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
                line-clamp: 3; 
        -webkit-box-orient: vertical;
    }
    #parken a.btn.btn-full.btn-sm.btn-red {
        min-width: 90px;;
    }
    li.nav-item.active {
        padding-left: 15px;
        border-radius: 5px;
    }
    nav a.btn.btn-orange, nav a.btn.btn-red {
        min-width: 48%;
    }
    nav a.btn.btn-orange {
        margin-right: 2% !important;
    }
    nav a.btn.btn-red {
        margin-left: 2% !important;
    }
    ul.navbar-nav.justify-content-center.flex-grow-1.pe-3 {
        padding-right: 0 !important;
    }
    .offcanvas-header {
        padding: 20px;
        border-bottom: 1px solid #fff;
        height: 65px;
    }
    .dt-paging.paging_simple {
        margin-top: 10px;
    }
    button.dt-paging-button.next {
        position: absolute;
        right: 0;
    }
    div.dt-container .dt-paging .dt-paging-button {
        border: 1px solid;
        font-size: 14px;
        padding: 5px 15px;
    }
    .card{
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
}

.btn-remark {
    background: transparent;
    padding: 0;
    border: none;
    text-align: left;
}

.modal-body p {
    margin-bottom: 0;
}

.print-reservering {
    display: none;
}

.print-reservering table td {
    width: 50%;
    line-height: 30px;
    border: 1px solid;
    padding: 5px 15px;
}

.print-reservering table {
    margin-top: 15px;
}

td.blur {
    color: transparent;
    text-shadow: 0 0 8px #000;
}

.debug {
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: #e97052;
    color: #fff;
    padding: 10px 15px;
    border-radius: 0.375rem;
}

#boekingen tbody tr {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

#boekingen tbody tr:nth-child(odd) td {
    background-color: #f9f9f9;
}

#boekingen tbody tr:hover td {
    background: #f6f6f6;
}

#manual_time {
    padding-left: 15px;
}