.primaryColor {
    background: #3d3c3c !important;
}

.secondaryColor {
    background: #fecc49 !important;
}

.tertiaryColor {
    background: #fff !important;
}

.topbar nav .nav-wrapper > ul.left {
    margin-left: 10px !important;
}

.font-20 {
    font-size: 20px !important;
}

input {
    border: 1px solid #DCDCE0 !important;
    border-radius: 5px !important;
    padding-left: 5px !important;
}

input:focus {
    -webkit-box-shadow: 0px 0px 4px 0px rgba(30, 136, 229, 0.79) !important;
    box-shadow: 0px 0px 4px 0px rgba(30, 136, 229, 0.79) !important;
}

td > .material-icons {
    font-size: 20px;
}

/* label color */
label {
    color: #000;
}

/* label focus color */
input:focus + label {
    color: #000;
}


.roof-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.roof-option {
    border: 3px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    text-align: center;
    width: 250px;
    transition: 0.2s ease;
    background-color: #f9f9f9;
}

.roof-option img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

.roof-option span {
    display: block;
    font-weight: bold;
}

.roof-option.selected {
    border-color: #FFD700; /* goudgeel */
    background-color: #FFF8DC; /* lichtgeel */
}



/* valid color */
input.valid {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
}

/* invalid color */
input.invalid {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
}

.cursor {
    cursor: pointer;
}

.topbar nav .nav-wrapper .search-box .app-search .form-control {
    border: 1px solid #bdbbb3;
}

.displayNone {
    display: none;
}

.productRowDeleteIcon {
    font-size: 32px;
    margin-top: 20px;
    color: red;
}

select[readonly] {
    pointer-events: none;
    touch-action: none;
    border: 1px solid #e0ded5 !important;
}

.w-100 {
    width: 100%;
    min-height: 10px;
}

.table-w75-center {
    width: 75% !important;
    margin: 0 auto;
    margin-top: 25px;
}

.w-50 {
    width: 50%;
}

.w-10 {
    width: 10%;
}

.topbar nav .nav-wrapper > ul.left {
    margin-left: 10px !important;
}

.vanDijk-logo {
    position: absolute !important;
    width: 300px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
    top: 10px !important;
    text-align: center !important;
    z-index: 1000 !important;
}

.info-gradient, .success-gradient, thead {
    background: rgb(255, 184, 0) !important;
    background: -moz-linear-gradient(90deg, rgba(255, 184, 0, 1) 10%, rgba(255, 223, 140, 1) 100%) !important;
    background: -webkit-linear-gradient(90deg, rgba(255, 184, 0, 1) 10%, rgba(255, 223, 140, 1) 100%) !important;
    background: linear-gradient(90deg, rgba(255, 184, 0, 1) 10%, rgba(255, 223, 140, 1) 100%) !important;
}

@media screen and (max-width: 500px) {
    .vanDijk-logo {
        width: 200px !important;
        top: 15px !important;
    }
}

.lds-circle {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 300px;
}

.lds-circle > div {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    background: #fff;
    animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes lds-circle {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(1800deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }
    100% {
        transform: rotateY(3600deg);
    }
}

.preloaderHolder {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}

.loadingText {
    position: relative;
    width: 200px;
    height: 200px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    color: white;
}

.m-t-45 {
    margin-top: 45px;
}

.modal-fixed-footer {
    height: 85% !important;
    max-height: 85%;
}

.page-wrapper, .container-fluid {
    min-height: calc(80vh - 64px) !important;
}

.swal2-content > .select-wrapper {
    display: none;
}

.dropdown-content li > span {
    color: unset !important;
}

input[type=range] + .thumb,
input[type=range]::-webkit-slider-thumb {
    background: #fecc49 !important;
}

.roof-select > .input-field > .select-wrapper {
    display: none !important;
}

.btn-remove {
    margin-top: 25px;
}

.tabs .tab a {
    color: #fecc49;
}

.tabs .tab a.active {
    color: #fecc49;
}

.tabs .tab a:hover {
    color: #fecc49;
}

.tabs .tab a:focus {
    background-color: RGBA(252, 233, 86, 0.46);
}

.tabs .tab a:focus.active {
    background-color: RGBA(252, 233, 86, 0.46);
}

.tabs .indicator {
    background-color: #fecc49;
}

html, body {
    height: 100%;
}

main {
    height: 100%;
    background-color: #eee;
}

td {
    padding: 7.5px 2.5px;
}

.p-0 {
    padding: 0 !important;
}

.btn-submit {
    position: fixed;
    right: 90px;
    bottom: 23px;
}

.thumbnail p {
    text-align: center;
    font-weight: 600;
}

.hidden {
    display: none;
}

.m-t-100 {
    margin-top: 100px !important;
}

.card-item {
    padding-bottom: 60px !important;
}

#chart-earnings.c3 path {
    opacity: 1 !important;
}

@media screen and (max-width: 767.5px) {
    .hide-between-med-and-down {
        display: none;
    }

    .mobile-card-content {
        padding: 8px !important;
    }
}

@media screen and (min-width: 767.5px) {
    .hide-between-med-and-up {
        display: none;
    }
}

.mobile-search {
    margin: 10px 8px 8px 10px;
    width: 90%;
}

.mobile-search > input {
    height: 2.5rem !important;
}

@media only screen and (max-width: 1024px), only screen and (max-height: 900px) {
    .modal {
        width: 100% !important;
        top: 0% !important;
    }

    .modal-fixed-footer {
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
    .modal-full-width {
        top: 25% !important;
    }
}

.modal-footer {
    height: 75px !important;
}