html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}


/*-------- Custom Validation ------*/
.validation-summary-errors ul li, .validation-summary-errors-modal {
    color: #023851;
    background-color: #c1e0ff;
    border-color: #c1e0ff;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.validation-summary-errors ul {
    list-style: none;
    padding-left: 0px !important;
}

/*.form-control:focus {
    box-shadow: 0 0 0 0.1rem rgba(1, 104, 250, 0.25);
}*/

label:focus {
    outline: none;
}

.error {
    color: #F44336;
    font-style: normal;
    padding-left: 7px;
}

.field-validation-error {
    color: #F44336;
    z-index: 2;
    display: block;
    pointer-events: none;
    padding-top: 5px;
}

    .field-validation-error.fa-check {
        color: #059A4A;
    }

.has-success .field-validation-error {
    color: #3c763d;
}

.input-validation-error {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.has-success input:focus {
    outline: #3c763d auto 1px;
}

.has-error .field-validation-error {
    color: #F44336;
}

.input-validation-error {
    border-color: #F44336;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.has-error input:focus {
    outline: #F44336 auto 1px;
}

/*.btn .svg-icon {
    flex-shrink: 0;
    line-height: 0;
    margin-right: 0.5rem;
}*/

/*.btn svg {
    padding-right: 0.35rem;
}*/

.h-fit {
    height: fit-content;
}

/*--------- start : Bootstrap Notify -------------*/
.alert[data-notify] {
    /*min-width: 300px;*/
    padding: 1rem 1.5rem;
}

    .alert[data-notify] .close:hover:before {
        opacity: 1;
        -webkit-transition: all 0.15s ease;
        transition: all 0.15s ease;
    }

@media (max-width: 991.98px) {
    .alert[data-notify] {
        max-width: 70%;
    }
}

@media (max-width: 991.98px) {
    .alert[data-notify] {
        max-width: 90%;
    }
}

.alert[data-notify][data-notify-position=top-center], .alert[data-notify][data-notify-position=bottom-center] {
    width: 30%;
}

@media (max-width: 991.98px) {
    .alert[data-notify][data-notify-position=top-center], .alert[data-notify][data-notify-position=bottom-center] {
        width: 70%;
    }
}

@media (max-width: 991.98px) {
    .alert[data-notify][data-notify-position=top-center], .alert[data-notify][data-notify-position=bottom-center] {
        width: 90%;
    }
}

.alert[data-notify] .icon {
    position: absolute;
    top: 53%;
    transform: translate(-50%, -50%);
    left: 23px;
}

.alert[data-notify] [data-notify=title] {
    display: block;
    font-weight: 500;
}

.alert[data-notify] .icon ~ [data-notify=title] {
    padding-left: 2.85rem;
}

.alert[data-notify] .icon ~ [data-notify=message] {
    display: inline-block;
    padding-left: 1.7rem;
    font-size: 13px;
    padding-right: 1.5rem;
}

.alert[data-notify] [data-notify=title]:not(:empty) ~ [data-notify=message] {
    margin-top: 0.2rem;
}

.alert[data-notify] .progress {
    margin-top: 0.5rem;
    line-height: 0.5rem;
    height: 0.5rem;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: .5;
}

@media (max-width: 1200px) {
    .close {
        font-size: calc(1.275rem + 0.3vw);
    }
}

.close:hover {
    color: #000000;
    text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
    opacity: .75;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    top: 50% !important;
    transform: translate(0%, -50%);
}

.alert.alert-primary {
    background-color: #0c6bce;
    border-color: #0c6bce;
    color: #FFFFFF;
}

    .alert.alert-primary .close i {
        opacity: 0.8;
        color: #FFFFFF;
    }

    .alert.alert-primary .close:focus i, .alert.alert-primary .close:hover i {
        opacity: 1;
        color: #FFFFFF;
    }

.alert.alert-success {
    background-color: white;
    border-color: white;
    color: black;
    box-shadow: 4px 0px 14px 4px lightgray;
}

    .alert.alert-success svg {
        color: green;
    }

    .alert.alert-success .close i {
        opacity: 1;
        color: red;
    }

    .alert.alert-success .close:focus i, .alert.alert-success .close:hover i {
        opacity: 1;
        color: red;
    }

.alert.alert-info {
    background-color: #8950FC;
    border-color: #8950FC;
    color: #ffffff;
}

    .alert.alert-info .close i {
        opacity: 0.8;
        color: red;
    }

    .alert.alert-info .close:focus i, .alert.alert-info .close:hover i {
        opacity: 1;
        color: #ffffff;
    }

.alert.alert-warning {
    background-color: #FFA800;
    border-color: #FFA800;
    color: #ffffff;
}

    .alert.alert-warning .close i {
        opacity: 0.8;
        color: red;
    }

    .alert.alert-warning .close:focus i, .alert.alert-warning .close:hover i {
        opacity: 1;
        color: #ffffff;
    }

.alert.alert-danger {
    background-color: white;
    border-color: white;
    color: black;
    box-shadow: 4px 0px 14px 4px lightgray;
}

.alert-danger svg {
    color: red;
}

.alert.alert-danger .close i {
    opacity: 0.8;
    color: red !important;
}

.alert.alert-danger .close:focus i, .alert.alert-danger .close:hover i {
    opacity: 1;
    color: red;
}
/*--------- end : Bootstrap Notify -------------*/


/*---------- Syncfusion Grid ------------*/

.e-grid.e-resize-lines .e-headercell .e-rhandler, .e-grid.e-resize-lines .e-headercell .e-rsuppress {
    border-right: 1px solid #5b828b;
}

.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
    color: #b2f4ff;
}

.e-grid .e-headercell, .e-grid .e-detailheadercell {
    height: 36px;
}

.e-grid.e-default.e-horizontallines .e-grouptopleftcell {
    border: none;
}

.e-grid .e-filtered::before {
    color: #dba86f !important;
}

.e-pager .e-spacing, .e-pager .e-numericitem:hover, .e-pager .e-currentitem {
    padding: 3px 10px;
}

.rounded-grid,
.rounded-grid .e-gridheader,
.rounded-grid .e-gridcontent {
    border-radius: 7px 7px 0px 0px; /* Adjust the value as needed for the desired corner roundness */
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: 0 0 0 1px #003642 inset;
}

.e-pager .e-pagercontainer .e-firstpage, .e-pager .e-pagercontainer .e-prevpage, .e-pager .e-pagercontainer .e-firstpagedisabled, .e-pager .e-pagercontainer .e-prevpagedisabled, .e-pager .e-pagercontainer .e-nextpage, .e-pager .e-pagercontainer .e-lastpage, .e-pager .e-pagercontainer .e-nextpagedisabled, .e-pager .e-pagercontainer .e-lastpagedisabled {
    padding: 5px;
}

.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    background: #003642;
}

    .e-pager .e-currentitem.e-numericitem.e-focused {
        background: #003642;
    }

.e-grid .e-gridheader {
    padding-right: 0px !important;
}

    .e-grid .e-gridheader tr th {
        background-color: #003642 !important;
        color: white;
    }

.e-grid th.e-headercell[aria-sort=ascending] .e-headertext, .e-grid th.e-headercell[aria-sort=descending] .e-headertext, .e-grid th.e-headercell[aria-sort=ascending] .e-sortfilterdiv, .e-grid th.e-headercell[aria-sort=descending] .e-sortfilterdiv {
    color: white;
}

.e-grid .e-rowcell {
    font-size: 13px !important;
    font-family: Poppins, Helvetica, "sans-serif" !important;
    padding: 8px 8px !important;
}

.e-grid .e-headercelldiv {
    font-size: 12px !important;
    font-weight: 500 !important;
}

.e-grid .e-gridheader .e-sortfilter .e-headercelldiv {
    padding: 0px 0px 0px 7px !important;
}

.e-grid .e.e-rowcell {
    border-color: #f3f3f3 !important;
}

.e-grid td.e-active {
    background: #EBF7F9 !important;
}

.e-grid .e-ftrchk {
    padding-top: 0px !important;
    padding-bottom: 2px !important;
}

.e-grid th.e-headercell[aria-sort=ascending] .e-sortfilterdiv, .e-grid th.e-headercell[aria-sort=ascending]:not(.e-columnselection) .e-headertext, .e-grid th.e-headercell[aria-sort=descending] .e-sortfilterdiv, .e-grid th.e-headercell[aria-sort=descending]:not(.e-columnselection) .e-headertext {
    color: #14c7ee !important;
}

.e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label {
    font-size: 14px !important;
}

.e-checkbox-wrapper .e-stop, .e-css.e-checkbox-wrapper .e-stop {
    font-size: 14px !important;
    line-height: 15px !important;
}

.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
    height: 16px !important;
    width: 16px !important;
    line-height: 14px !important;
}

.e-dialog .e-dlg-content {
    padding: 24px 14px 0 24px !important;
    margin-bottom: 0px !important;
}

.e-dialog .e-dlg-content {
    padding: 14px !important;
    margin-bottom: 0px !important;
}

.e-excelfilter.e-dialog .e-dlg-content {
    padding-left: 3px !important;
}

.e-excelfilter .e-dlg-content {
    padding-bottom: 10px !important;
}

.e-excelfilter .e-dlg-content {
    padding-top: 5px !important;
}

.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #003642;
    border-color: #003642;
    color: #fff;
}

.e-checkbox-wrapper:hover .e-frame.e-check, .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: #003642;
    border-color: #003642;
    color: #fff;
}

.e-checkbox-wrapper:hover .e-frame, .e-css.e-checkbox-wrapper:hover .e-frame {
    font-size: 11px;
}

.e-checkbox-wrapper .e-stop, .e-css.e-checkbox-wrapper .e-stop {
    font-size: 15px;
}

.e-checkbox-wrapper .e-frame.e-stop, .e-css.e-checkbox-wrapper .e-frame.e-stop {
    background-color: #fff;
    border-color: #003642;
    color: #003642;
}

.e-checkbox-wrapper .e-check, .e-css.e-checkbox-wrapper .e-check {
    font-size: 11px;
    font-weight: 800;
}

.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
    border: 1px solid;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: e-icons;
    height: 17px;
    line-height: 15px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 17px;
}
/*---------- Syncfusion Grid ------------*/

.modal-footer {
    padding: 10px !important;
}

.card .card-header .card-toolbar {
    flex-wrap: nowrap;
}

.blockui .blockui-message {
    background: white !important;
}


/* -------------- TypeAhead ------------- */
.typeahead {
    width: 200px;
}

.tt-menu {
    width: 200px;
    margin: 12px 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 0px 15px;
    font-size: 13px;
}

    .tt-suggestion:hover {
        cursor: pointer;
        color: #fff;
        background-color: #0097cf;
    }

    .tt-suggestion.tt-cursor {
        color: #fff;
        background-color: #0097cf;
    }
/* -------------- TypeAhead ------------- */
