.hidden {
    display: none !important;
}

.e-item select, .e-dlg-content select {
    height: 31px;
    width: 100%;
    border-color: #ced4da;
}

.e-item input, .e-dlg-content input {
    height: 38px;
    width: 100%;
    border: 1px solid #ced4da;
    padding-left: 8px;
    text-indent: 0;
    border-radius: 4px;
}

.e-item label, btn.span, .e-dlg-content label {
    font-weight: 400;
    font-size: 14px;
    height: 40px;
    padding: 10px;
}

.e-item h3, .e-dlg-content h3 {
    color: #212529;
    font-size: 16px;
    font-weight: 500;
}

.btnSpan {
    font-weight: 600;
    font-size: 18px;
}

.custom-event-editor td {
    padding: 7px;
    padding-right: 16px;
}

.btn {
    border: none;
    display: inline-block;
    padding: 8px 13px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0;
    text-transform: uppercase;
}

    .btn:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

.box-shadow {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.navigation-drawer section:hover {
    /* background-color: #333; */
    /* color: #fff; */
}

    .navigation-drawer section:hover a span {
        color: #fff;
    }

    .navigation-drawer section:hover ul.setting-list a span {
        color: #333;
    }

.bg-blue {
    color: #fff !important;
    background-color: #2196F3 !important;
}


.bg-branding {
    color: #fff !important;
    background-color: var(--branding) !important;
}

.bg-green {
    color: #fff !important;
    background: #f8f9fa;
    border-bottom: 1px solid #dadada;
    background: -webkit-linear-gradient(to left, #845cb8, #8963bb);
    /* background: linear-gradient(to left, #845cb8, #8963bb); */
}

.bg-black {
    color: #fff !important;
    background-color: #444 !important;
}

.mt-2 {
    margin-top: 2rem;
}

@media only screen and (max-width: 1368px) and (min-width: 991px) {
    .navbar-brand img {
        width: 140px;
        height: auto;
    }
}

.nav > li > a {
    padding: 10px !important;
}

.pac-container {
    z-index: 999999999999999 !important;
}

.blocklist, .business-blocklist {
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
}

.cardetails {
    font-size: 14px;
}

.mb-1 {
    margin-bottom: .5rem;
    z-index: 999999 !important;
}

.mybtn, .mybtn:hover, .mybtn:active, .mybtn:focus, .mybtn:visited {
    font-size: 20px;
    display: inline-block;
    height: 25px !important;
    width: 25px !important;
    line-height: 25px;
    background: white;
    border-radius: 100%;
    cursor: pointer;
    -moz-box-shadow: #919191 0 0 10px;
    -webkit-box-shadow: #919191 0 0 10px;
    box-shadow: #919191 0 0 10px;
    text-align: center !important;
    text-decoration: none;
}

.summary-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .summary-box ul li {
        display: inline-block;
        background: #4CAF50;
        padding: 10px 15px;
        color: #fff;
    }

        .summary-box ul li strong {
            padding-right: 20px;
        }




.modal-open .modal {
    overflow-y: auto !important;
}

.referenceBlock {
    background: #ddd;
    padding: 5px 15px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-radius: 5px;
}

.referenceBox {
    background: #fff;
    padding: 10px 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

.color-yellow {
    color: #fff400;
}

.color-red {
    color: #ff0018;
}

.cardetails {
    font-size: 12px;
}

.glyphicon {
    font-size: 12px;
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.e-text-ellipsis .e-resource-text {
    font-size: 16px;
    font-weight: 600;
}

.controls a.btn:hover {
    color: #fff;
}

#app {
    width: 100% !important;
}


.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
    padding: 10px;
}

.row.jobbooking-form-contact {
    margin-bottom: 10px;
}


/*Syncfusion*/
.e-control-wrapper.conversion .e-textbox {
    text-transform: uppercase;
}

.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 {
    stroke: green;
}

.green-button {
    background-color: green !important;
    color: white !important;
}


/*Support Font Awesome icons (https://fontawesome.com) in e-icons*/
.fa,
.fas {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 900 !important;
}

.far {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 400 !important;
}

.fal {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 300 !important;
}

.fad {
    position: relative;
    font-family: 'Font Awesome 5 Duotone' !important;
    font-weight: 900 !important;
}

.fab {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}


.e-spin-overlay {
    z-index: 9999999999 !important;
    position: fixed; /* Ensure that the spinner is positioned relative to the viewport */
    top: 50%; /* Position the spinner in the center of the viewport */
    left: 50%;
    transform: translate(-50%, -50%); /* This is necessary to center the spinner exactly, as the top and left properties position the spinner's top-left corner, not its center */
    /* Other styles here */
}

.finger-pointer {
    cursor: pointer;
    user-select: none;
}

.sn-display-data {
    color: black;
    background: #c8c8c8;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}
.sn-required-field::after {
    content: '*';
    color: rgb(225, 12, 12);
}


.green-button {
    background-color: green !important;
    color: white !important;
}


.yellow-button {
    background-color: green !important;
    color: white !important;
}


/*Responsive Css*/
/*small screens 2k command above*/ 
@media (min-width: 2560px) {
    .ultra2k-xl-1 {
        flex: 0 0 8.33333% !important;
        max-width: 8.33333% !important;
    }
}

/*xl screen form laptop*/
@media (min-width: 1200px) and (max-width: 1400px) {
    .laptop-l-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}