.btn-danger {
    color: #fff;
    background-color: #c52128;
    border-color: #c52128;
    box-shadow: none;
}

.card-danger.card-outline {
    border-top: 3px solid #c52128;
}

.form-control:focus {
    border-color: #c52128;
}

.icheck-primary > input:first-child:not(:checked):not(:disabled):focus + input[type=hidden] + label::before, .icheck-primary > input:first-child:not(:checked):not(:disabled):focus + label::before {
    border-color: #c52128;
}

.icheck-primary > input:first-child:checked + input[type=hidden] + label::before, .icheck-primary > input:first-child:checked + label::before {
    background-color: #c52128;
    border-color: #c52128;
}

.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + input[type=hidden] + label::before, .icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before {
    border-color: #c52128;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #c52128;
    color: #fff;
}

.card-danger:not(.card-outline) > .card-header {
    background-color: #c52128;
}

label {
    margin-bottom: 1px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.card-light:not(.card-outline) > .card-header {
    background-color: #ebecec;
}

.select2-container--default .select2-selection--multiple {
    min-height: 29px !important;
    /* height: 29px !important; */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding-bottom: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search.select2-search--inline .select2-search__field {
    margin-top: 3px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    margin-right: 2px !important;
    background-color: #c52128 !important;
    border-color: #c52128 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #c52128 !important;
}

.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield;
}

.width-300px{
    width: 300px;
}

.width-200px{
    width: 200px;
}

.input-field-borderless {
    border: solid white;
    outline: none;
}

/*label:not(.form-check-label):not(.custom-file-label) {*/
/*    padding: 8px !important;*/
/*}*/
.dataTables_info{
    padding-left: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.dataTables_paginate{
    padding-right: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.dataTables_filter input{
    width: 250px !important;
}


.search-disabled{
    height: 20px;
    border: none;
    width: 10px;
    background-color: transparent;
}

.normal-search{
    height: 20px;
    border: none;
    width: 100%;
}

.select-search-field{
    height: 20px;
    border: none;
    appearance: none;
    width: 100%;
}


body {
    font-size: 14px !important;
}

.table-sm td, .table-sm th {
    padding: 3px 10px !important;
}

.form-control {
    padding: 3px 10px !important;
    font-size: 14px !important;
    height: auto !important;
}
/* .font-medium{
font-weight: 500px;
}
.text-indigo-500{
    --tw-text-opacity: 1;
  color: blue;
} */

.select2-container--default .select2-selection--single {
    padding: 3px 10px !important;
    height: 28px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: -4px !important;
}
.bg-light-gray{
    background-color: #e9ecef;
}

.select2-container--default .select2-selection--single {
    height: 29px !important;
}

/*grid*/
.display-grid {
    display: grid;
}

.grid-gap-1 {
    grid-gap: calc(4px * 1);
}

.grid-gap-2 {
    grid-gap: calc(4px * 2);
}

.grid-gap-3 {
    grid-gap: calc(4px * 3);
}

.grid-gap-4 {
    grid-gap: calc(4px * 4);
}

.grid-gap-5 {
    grid-gap: calc(4px * 5);
}

.grid-gap-6 {
    grid-gap: calc(4px * 6);
}

/*extra large*/
.grid-xl-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-xl-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-xl-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-xl-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-xl-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-xl-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-xl-cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-xl-col-8 {
    grid-template-columns: repeat(8, 1fr);
}

.grid-xl-cols-9 {
    grid-template-columns: repeat(9, 1fr);
}

.grid-xl-cols-10 {
    grid-template-columns: repeat(10, 1fr);
}

.grid-xl-cols-11 {
    grid-template-columns: repeat(11, 1fr);
}

.grid-xl-cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

.col-span-xl-1 {
    grid-column: span 1 / span 1;
}

.col-span-xl-2 {
    grid-column: span 2 / span 2;
}

.col-span-xl-3 {
    grid-column: span 3 / span 3;
}

.col-span-xl-4 {
    grid-column: span 4 / span 4;
}

.col-span-xl-5 {
    grid-column: span 5 / span 5;
}

.col-span-xl-6 {
    grid-column: span 6 / span 6;
}

.col-span-xl-7 {
    grid-column: span 7 / span 7;
}

.col-span-xl-8 {
    grid-column: span 8 / span 8;
}

.col-span-xl-9 {
    grid-column: span 9 / span 9;
}


/*large*/
@media screen and (max-width: 1200px) {
    .grid-lg-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-lg-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-lg-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-lg-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-lg-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-lg-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-lg-cols-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-lg-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-lg-cols-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-lg-cols-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-lg-cols-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-lg-cols-12 {
        grid-template-columns: repeat(12, 1fr);
    }

    .col-span-lg-1 {
        grid-column: span 1 / span 1;
    }

    .col-span-lg-2 {
        grid-column: span 2 / span 2;
    }

    .col-span-lg-3 {
        grid-column: span 3 / span 3;
    }

    .col-span-lg-4 {
        grid-column: span 4 / span 4;
    }

    .col-span-lg-5 {
        grid-column: span 5 / span 5;
    }

    .col-span-lg-6 {
        grid-column: span 6 / span 6;
    }

    .col-span-lg-7 {
        grid-column: span 7 / span 7;
    }

    .col-span-lg-8 {
        grid-column: span 8 / span 8;
    }

    .col-span-lg-9 {
        grid-column: span 9 / span 9;
    }
}


/*medium*/
@media screen and (max-width: 992px) {
    .grid-md-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-md-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-md-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-md-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-md-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-md-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-md-cols-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-md-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-md-cols-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-md-cols-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-md-cols-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-md-cols-12 {
        grid-template-columns: repeat(12, 1fr);
    }

    .col-span-md-1 {
        grid-column: span 1 / span 1;
    }

    .col-span-md-2 {
        grid-column: span 2 / span 2;
    }

    .col-span-md-3 {
        grid-column: span 3 / span 3;
    }

    .col-span-md-4 {
        grid-column: span 4 / span 4;
    }

    .col-span-md-5 {
        grid-column: span 5 / span 5;
    }

    .col-span-md-6 {
        grid-column: span 6 / span 6;
    }

    .col-span-md-7 {
        grid-column: span 7 / span 7;
    }

    .col-span-md-8 {
        grid-column: span 8 / span 8;
    }

    .col-span-md-9 {
        grid-column: span 9 / span 9;
    }
}


/*Small*/
@media screen and (max-width: 768px) {
    .display-grid {
        display: grid;
    }

    .grid-sm-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-sm-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-sm-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-sm-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-sm-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-sm-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-sm-cols-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-sm-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-sm-cols-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-sm-cols-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-sm-cols-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-sm-cols-12 {
        grid-template-columns: repeat(12, 1fr);
    }

    .col-span-sm-1 {
        grid-column: span 1 / span 1;
    }

    .col-span-sm-2 {
        grid-column: span 2 / span 2;
    }

    .col-span-sm-3 {
        grid-column: span 3 / span 3;
    }

    .col-span-sm-4 {
        grid-column: span 4 / span 4;
    }

    .col-span-sm-5 {
        grid-column: span 5 / span 5;
    }

    .col-span-sm-6 {
        grid-column: span 6 / span 6;
    }

    .col-span-sm-7 {
        grid-column: span 7 / span 7;
    }

    .col-span-sm-8 {
        grid-column: span 8 / span 8;
    }

    .col-span-sm-9 {
        grid-column: span 9 / span 9;
    }
}

/*extra small*/
@media screen and (max-width: 576px) {
    .display-grid {
        display: grid;
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-cols-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-cols-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-cols-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-cols-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid-cols-12 {
        grid-template-columns: repeat(12, 1fr);
    }

    .col-span-1 {
        grid-column: span 1 / span 1;
    }

    .col-span-2 {
        grid-column: span 2 / span 2;
    }

    .col-span-3 {
        grid-column: span 3 / span 3;
    }

    .col-span-4 {
        grid-column: span 4 / span 4;
    }

    .col-span-5 {
        grid-column: span 5 / span 5;
    }

    .col-span-6 {
        grid-column: span 6 / span 6;
    }

    .col-span-7 {
        grid-column: span 7 / span 7;
    }

    .col-span-8 {
        grid-column: span 8 / span 8;
    }

    .col-span-9 {
        grid-column: span 9 / span 9;
    }
}

.form-control-upload-image {
    display: grid;
    place-items: center;
    grid-row: span 4 / span 4;
}

.form-control-upload-image div {
    height: 150px;
    width: 150px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

.form-control-upload-image div img {
    height: 150px;
}

.form-control-upload-image div i {
    color: #d1d5db;
    font-size: 70px;
}

.form-control-upload-image div label {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    background: black;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
    transition: 0.2s;
}

.form-control-upload-image div label:hover, label:focus-within {
    opacity: 0.75;
}


.form-control-upload-image div input[type='file'] {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}