/*Lokala CSS Components*/

@media (max-width: 600px) {
    .container {
      width: 95% !important; /* Ensure the container is 90% width on mobile */
    }
}

.lokala-text-red {
    color: var(--lokala-red) !important;
}

.lokala-section {
    background-color: var(--lokala-cream);
    border-radius: var(--lokala-border-radius);
    border: var(--lokala-border);
    padding: var(--lokala-padding);
}

.lokala-section-no-padding {
    background-color: var(--lokala-cream);
    border-radius: var(--lokala-border-radius);
    border: var(--lokala-border);
}

.lokala-chip {
    color: var(--lokala-text-color-light);
    background-color: var(--lokala-green);
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    display: inline-block;
    height: 32px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.lokala-chip:hover {
    background-color: var(--lokala-blue);
    cursor: pointer;
}

.lokala-modal {
    max-width: 400px;
    border-radius: var(--lokala-border-radius);
}

.lokala-modal-close{
    background-color: var(--lokala-green)!important;
    color: var(--lokala-text-color-light) !important;
    border-radius: var(--lokala-border-radius) !important;
    border: var(--lokala-border) !important;
}

.tooltipped-row .input-field,
.tooltip-container {
    display: flex;
    align-items: center;
}

/* REQUIRED FIELD START */
label.required::after {
    content: ' *';
    color: var(--lokala-red);
}
/* REQUIRED FIELD END */


/* LOKALA CARDS START */
a.add-btn {
    width: 100% !important;
    margin-top: 20px;
    margin-bottom: 10px;
}

.product-icon-field{
    width: 100% !important;
}

.product-update-icon{
    position: absolute;
    z-index: 999;
}

.product-update-icon .material-symbols-outlined{
    color: var(--lokala-green) !important;
}

.product .col {
    width: 100% !important;
}

.card {
    border-radius: var(--lokala-border-radius) !important;
    border: var(--lokala-border);
    color: var(--lokala-text-color-dark);
    width: 100%;
}

.card:hover {
    scale: 1.025;
}

.card.small .card-image img{
    height: 200px;
    object-fit: cover;
}

.card-title {
    font-size: 1.2em !important;
    backdrop-filter: blur(10px);
    background-color: #0000001c;
    border-radius: 0 10px 0 0;
    padding: 10px !important;
}

card-subtitle {
    color: var(--lokala-text-color-light);
    font-size: 10px !important;
}

.card-price {
    color: var(--lokala-text-color-dark);
    font-weight: bold;
    margin-right: 0.5em;
}

.card-quantity, .card-mass {
    color: var(--lokala-text-color-light);
    background-color: var(--lokala-blue);
    padding: var(--lokala-chip-padding);
    border-radius: 5px;
}

.category-chip {
    display: inline-block;
    background-color: var(--lokala-dark-orange);
    border-radius: 5px;
    padding: 5px 5px 0 5px;
}

.category-chip i{
    color: var(--lokala-text-color-light) !important;
}

.category-chip .material-symbols-outlined {
    font-size: 20px;
    top: 10px;
}

.card .card-content {
    padding: 10px;
}

.card-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card .card-action {
    border-radius: 0  0 var(--lokala-border-radius) var(--lokala-border-radius)  !important;
    padding: 10px;
}

.card-action span {
    white-space: nowrap;
}
/* LOKALA CARDS END */


/*INPUT OVERRIDE START*/
/*material class*/
input {
    border-bottom-color: var(--lokala-blue) !important;
}

input[type=checkbox].filled-in:checked + span:not(.lever):after {
    background-color: var(--lokala-green) !important;
    border-color: var(--lokala-green) !important;
}

/*material class*/
input:focus {
    border-bottom-color: var(--lokala-green) !important;
}

/*material class*/
input li span {
    color: var(--lokala-text-color-dark) !important;
}

.input-field .prefix.active {
    color: var(--lokala-green) !important;
}

/*material class*/
.dropdown-content {
    border-radius: var(--lokala-border-radius) !important;
}

.dropdown-content li > span {
    color: var(--lokala-green) !important;
}

/*material class*/
.collapsible {
    border: var(--lokala-border) !important;
    border-radius: var(--lokala-border-radius) !important;
}

/*material class*/
.collapsible li:first-child div {
    border-radius: 10px 10px 0 0 !important;
}

/*material class*/
.collapsible li:last-child div {
    border-radius: 0 0 10px 10px !important;
}
/*INPUT OVERRIDE END*/


/*BTN OVERRIDE START*/
/*material class*/
.btn {
    background-color: var(--lokala-green)!important;
    color: var(--lokala-text-color-light) !important;
    border-radius: var(--lokala-border-radius);
    border: var(--lokala-border);
    margin-top: 10px;
}

.btn-blue {
    background-color: var(--lokala-light-blue) !important;
}

/*material class*/
.btn i {
    color: var(--lokala-text-color-light) !important;
}

.btn-red {
    background-color: var(--lokala-red) !important;
    color: var(--lokala-text-color-light) !important;
}

input[type="submit" i] {
    color: var(--lokala-text-color-light) !important;
}
/*BTN OVERRIDE END*/


/*DATEPICKER OVERRIDE START*/
.timepicker-digital-display {
    background-color: var(--lokala-green) !important;
}

.confirmation-btns {
    color: var(--lokala-green) !important;
}

.timepicker-svg line, .timepicker-svg circle{
    stroke: var(--lokala-green) !important;
    fill: var(--lokala-green) !important;
}
/*DATEPICKER OVERRIDE END*/


/* PAGINATION OVERRIDE START */

.pagination li.active {
    background-color: var(--lokala-green) !important;
    color: var(--lokala-text-color-light) !important;
    padding: 5px;
}
/* PAGINATION OVERRIDE END */


/*COLOR OVERRIDE START*/
a {
    color: var(--lokala-link-color) !important;
}
/*COLOR OVERRIDE END*/


/*TOAST OVERRIDE START*/
.toast {
    background-color: var(--lokala-green) !important;
    color: var(--lokala-text-color-light) !important;
    border: 1px solid var(--lokala-white) !important;
    margin-bottom: 1em !important;
}

.toast.error {
    background-color: var(--lokala-red) !important;
    color: var(--lokala-text-color-light) !important;
    margin-bottom: 1em !important;
}
/*TOAST OVERRIDE END*/


/* TOOL TIP OVERRIDE START */

.material-tooltip {
    background-color: var(--lokala-blue-transparent-90) !important;
    color: var(--lokala-text-color-light) !important;
    border-radius: var(--lokala-border-radius) !important;
}
/* TOOL TIP OVERRIDE END */

/* CHECKBOX CHECKMARK OVERRIDE START */
[type="checkbox"]:checked+span:not(.lever):before {
    border-right: 2px solid var(--lokala-green) !important;
    border-bottom: 2px solid var(--lokala-green) !important;
}
/* CHECKBOX CHECKMARK OVERRIDE END */

/* Spinner Override */

.spinner-layer {
    border-color: var(--lokala-light-blue) !important;
}

/* Spinner Override */
