*{font-family: 'Heebo', sans-serif;}

body {
    background: #2c2c2c;
    color: #fff;
    width: 100%;
    overflow-x: clip;
    left: 0;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto; 
}

*::-webkit-scrollbar {
    width: 0.7em;
    background-color:  rgb(25, 27, 32);
}
   
*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px rgb(0, 0, 0);
}
   
*::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgb(109, 112, 121);
    outline: 1px solid rgb(47, 56, 65);
}

.bg {
    background: #3a3e46;
}

.pending {
    border-radius: 0.2rem;
    background-color: #fff0c2;
    padding: 0.2rem 0.3rem;
    text-align: center;
    color: #a68b00;
    font-weight: bold;
}

.actv {
    border-radius: 0.2rem;
    background-color: #c8e6c9;
    padding: 0.2rem 0.3rem;
    text-align: center;
    color: #388e3c;
    font-weight: bold;
}

.inactv {
    border-radius: 0.2rem;
    background-color: #ffcdd2;
    padding: 0.2rem 0.3rem;
    text-align: center;
    color: #c62828;
    font-weight: bold;
}

.primary{
    background-color: #fcb415;
}

.primary-bg {
    background-color: #3a3e46;
}

.secondary-bg{
    background-color: #fcb415;
}

.round {
    border-radius: 15px;
}

.form-control, .form-select {
    background-color: #555a62;
    border: #343434 3px solid;
    color: white;
}

.form-control:focus, .form-select:focus {
    color: white;
    background-color: #1c1e22;
    border-color: #d19716;
    box-shadow: 0px 0px 0 0.25rem #d7ad2e2e;
}
.btn-warning {
    color: #000;
    background-color: #d19716;
    border-color: #d19716;
}
.bg-warning{
    background-color: #d19716 !important;
}
.logo-preview{
    width:130px;
    height: 130px;
    overflow: hidden;
}

input[type="checkbox"] {
    display: inline-grid;
    place-content: center;
    /* width: 16px;
    height: 16px; */
  }
  
input[type="checkbox"]::before {
    font-family: 'FontAwesome';
    content: ' \f14a';
    color: #f9b137;
    /* width: 1rem;
    height: 1rem; */
    transform: scale(0);
    box-shadow: inset 1em 1em var(--form-control-color);
}

.accordion-item {
    border-color: #53565a;
}
  input[type="checkbox"]:checked::before {
    transform: scale(1);
  }

input[name="plan_price"] {
    padding-left: 50px;
}
.curr-symbol {
    top: 9px;
    left: 14px;
    width: 35px;
    text-align: right;
    font-weight: bold;
    color: #adadad;
}

.accordion-button::after{
    border-radius: 3px;
    font-family: 'FontAwesome';
    content: " \f078";
    color:white;
    background-image: none;
}

.table-flow{
    overflow: auto;
}

img#dp_preview {
    min-width: 100%;
    min-height: 100%;
}

input.form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.invoice_description{
    min-height: 150px;
}

.item_image_preview_container{
    width:130px;
    height: 130px;
    overflow: hidden; 
}

@media only screen and (max-width: 991px) {
    .navbar-light .navbar-nav a.nav-link.active { 
        background: #2c2c2c;
        border:none;
    } 
     .navbar-light .navbar-nav a.nav-link{
         padding:10px 15px
     }
     .navbar-light .navbar-toggler-icon{
         background-color:#595959;
         display:inline-block;
         border-radius:8%
     }
     .logout{border-top:gray thin solid; margin-top:2rem; padding:1rem 0.5rem}
 }

 ul.pagination li a {
    background-color: #2c2c2c;
    border:none; 
    border-left: #494848 1px solid;
    color:#8e8e8e;
    padding: 6px 12px;
}
ul.pagination li a:focus {
    background-color: black;
}
ul.pagination li:first-child a{
    border-left: none;
}
ul.pagination li.disabled a{
    color:#666666 !important;
    background-color:rgb(43 43 43) !important;
    border-color: #494848 !important;
}

ul.pagination li.active a{
    color:#ffffff !important;
    background-color:rgb(100 100 100) !important;
    border-color: #494848 !important;
}
 
.dp_image{
    border-radius: 50%;
    border: #f9b137 5px solid;
    width: 150px;
    height: 150px;
    overflow: hidden;
    filter: drop-shadow(0px 0px 0px black);
    transform: scale(1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dp_image:hover{
    filter: drop-shadow(2px 4px 6px #1f1f1f);
    transform: scale(1.7);
    border-width: thin;
}

table.dataTable>tbody>tr.odd {
    background-color: #323844;
}
.col-sm-12:has(.dataTable) {
    overflow-x: auto;
}

.table {
    color: #fff;
    font-size: 15px;
}

thead, tr {
    border-color: rgba(0, 0, 0, 0);
    border-style: none;
    border-width: 0;
}

.table-bg {
    background-color: #49505a;
    color: #fcb415;
}

:focus-visible {
    outline: none;
}

.dataTables_wrapper {
    font-size: 14px;
}

.dataTables_length {
    padding-top: 4px;
    padding: 10px 0;
}

.dataTables_filter {
    padding: 7px 0;
}

div.dataTables_wrapper div.dataTables_filter label {
    font-size: 15px;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.8em;
}

.navbar-light .navbar-brand, .navbar-light .navbar-brand{
    transition:color 500ms ease-in-out;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover{
    color:#f19100 ;
}

.multi-selector-45{
    padding: 4px;
    flex: auto;
}

.multi-selector-45 option[selected] {
    background-color: rgb(226, 226, 226);
    color: #000000;
}

.multi-selector-45 option {
    float: left;
    border-radius: 5px;
    margin: 4px;
    background: #595959;
    color: #e1e1e1;
    border: #505050 2px solid;
    box-shadow: #4a4a4a 2px 2px 3px -3px;
    position:relative; 
    padding: 4px 14px 4px 32px !important;
}
.multi-selector-45 option:before {
    content:" ";
    z-index:1000;
    position:absolute;
    margin:8px 0px;
    border-radius:50%;
    width:14px;
    height:14px;
    left:12px;
    top:1px;
    border:#919191  3px solid;
    transition: background-color 0.2s ease;
}


.multi-selector-45 option[selected]:before {
    border:black 3px solid;
    background-color:#FF9800;
    filter: blur(0.5px);
}

.modal-dark{
    background-color: #3a3e46;
    border-radius: 15px;
}

.font-lightgray{
    color:#b1b1b1
}

.page-title{
    background-color: #3a3e46;
    border-radius: 15px;
}