@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --theme-color: #7fba01;
  --theme-color-rgba: 127, 186, 1;
  --theme-border-color: #7fba01;
  --theme-button-color: #7fba01;
  --border-color: #E1E1E1;
  --white: #ffffff;
  --black: #000000;
}

.action-secondary {
    &:hover {
        background-color: var(--theme-color);
        border-color: var(--theme-color);
    }
}
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Red Hat Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    select, input{
        border-color: var(--border-color);
        &[type="radio"], &[type="checkbox"] {
            height: 16px !important;
            box-shadow: none;
        }
    }
    input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"] {
        height: 35px;
    }
    .block-collapsible-nav .item.current strong, .block-collapsible-nav .item.current a{
        border-color: var(--theme-color);
    }
    
    .sidebar ul li a:hover {
        color: var(--theme-color);
    }
    a:hover {
        color: var(--theme-color);
    }
    .primary .action.primary, .action.primary, .action-close  {
        padding: 10px 20px !important;
        color: var(--white) !important;
        background: var(--theme-color) !important;
        border-radius: 0 !important;
        border: 0 !important;
        &:hover {
            background: var(--black) !important;
        }
    }
    .action-close {
        &:before {
            color: var(--white) !important;
        }
    }
    .page-title-wrapper h1 span {
        font-size: 30px;
    }
    .dt-container {
        .dt-layout-row {
            .dt-length {
                display: flex;
                flex-direction: column-reverse;
                gap: 2px;
                label {
                    text-transform: capitalize;
                }                
            }
        }
        .dt-search input {
            margin-left: 0 !important;
        }
    }
    table {
        thead {
            th {
                background: rgba(var(--theme-color-rgba), 0.1);
                color: var(--theme-color);
                font-weight: bold;
            }
        }
        strong {
            font-weight: bold;
        }
    }
    .dataTable {
        
        tbody {
            tr {
                td { 
                    .action {
                        padding: 0 5px !important;
                    }
                    .field {
                        &.qty {
                            display: flex;
                            justify-content: center;
                            padding: 0 10px;
                            max-width: 150px;
                            a {
                                background: var(--theme-color);
                                color: var(--white);
                                padding: 7px 10px !important;
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                &:hover, &:active {
                                    text-decoration: none;
                                    background: var(--black);
                                }
                            }
                            .control {
                                input {
                                    border-radius: 0 !important;
                                    border-color: var(--theme-color) !important;
                                    height: 100% !important;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    table.dataTable.stripe > tbody > tr:nth-child(odd) > *, table.dataTable.display > tbody > tr:nth-child(odd) > * {
        box-shadow: none;
    }
    table.dataTable.stripe > tbody > tr:nth-child(even) > *, table.dataTable.display > tbody > tr:nth-child(even) > * {
        background: rgba(var(--theme-color-rgba), 0.03);
    }
    div.dt-container .dt-paging .dt-paging-button:hover {
        border: 1px solid var(--theme-color);
        background: var(--theme-color);
    }
    .fieldset {
        .field {
            &.choice {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                &:before {
                    display: none;
                }
                input {
                    order: 2;
                    margin: 0;
                    position: static;
                }
                label {
                    display: block !important;
                    white-space: normal;
                    width: 25.8%;
                }
            }
            label {
                font-weight: bold !important;
            }
        }
    }
    .artwork-info-main {
        form {
            &:after {
               display: table;
                content: '';
                clear: both;
            }
            .dropzone  {
                min-height: auto;
                ~ .primary {
                    float: right;
                    margin-top: 20px;
                }
            }
        }
    }
}

/* Login Pages */
body {
    .header-container .header .for-full-withmenu .actions-header a:hover {
        color: var(--theme-color) !important;
    }
    .form.customer-form .actions-toolbar>.primary {
        align-items: center;
    
    }
    .modal-slide {
        left: auto;
        max-width: 90dvw;
        width: 800px;
        &.full-popup{
            width: 100%;
            .product {
                &.media {
                    .fotorama__thumb-border {
                        border-color: var(--theme-color) !important;
                    }
                }
            }
            .product-info-main {
                .product-info-price {
                    margin-bottom: 20px;
                    .title-quickview-product {
                        margin-bottom: 5px;
                    }
                    .product-info-stock-sku {
                        margin-bottom: 10px;
                        .stock {
                            text-transform: none;
                            &.available {
                                span {
                                    color: var(--theme-color);
                                }
                            }
                        }
                        .sku {
                            color: #666;
                            strong {
                                font-weight: 700;
                                margin-right: 0;
                            }
                        }
                    }
                    .price-box {
                        span {
                            line-height: normal;
                            color: var(--black);
                        }
                    }
                }
                .product-add-form {
                    .product-options-wrapper {
                        .field {
                            .legend {
                                border-bottom: 0;
                                padding-bottom: 0;
                                font-size: 13px;
                            }
                            .control {
                                .options-list {
                                    display: flex;
                                    flex-wrap: wrap;
                                    align-items: flex-start;
                                    gap: 10px;
                                    cursor: pointer;
                                    .choice {
                                        margin: 0;
                                        label {
                                            width: auto;
                                            padding: 5px 10px;
                                            border: 1px solid var(--theme-color);
                                            cursor: pointer;
                                            .price-container {
                                                font-size: 18px;
                                                padding-left: 5px;
                                            }
                                        }
                                        input {
                                            position: absolute;
                                            opacity: 0;
                                            &:checked {
                                                + label {
                                                    background-color: var(--theme-color);
                                                    color: var(--white);
                                                }
                                            }
                                        }
                                    }
                                }
                                .note {
                                    font-size: 12px;
                                    margin: 0;
                                    font-weight: 700;
                                }
                            }
                        }
                    }
                    .box-tocart {
                            .fieldset {
                                .field {
                                    &.qty {
                                        display: inline-flex;
                                        justify-content: center;
                                        max-width: 150px;
                                        margin-bottom: 0;
                                        &:before, &:after {
                                            display: none;
                                        }
                                        a {
                                            background: var(--theme-color);
                                            color: var(--white);
                                            padding: 10.5px 10px !important;
                                            line-height: normal;
                                            height: auto;
                                            min-height: auto;
                                            display: inline-flex;
                                            align-items: center;
                                            justify-content: center;
                                            &:hover, &:active {
                                                text-decoration: none;
                                                background: var(--black);
                                            }
                                        }
                                        .control {
                                            input {
                                                border-radius: 0 !important;
                                                border-color: var(--theme-color) !important;
                                                height: 100% !important;
                                                text-align: center;
                                                line-height: normal;
                                            }
                                        }
                                    }
                                }
                                .actions {
                                    padding-top: 0px;
                                    button {
                                        .icons {
                                            padding-right: 5px;
                                        }
                                    }
                                }
                            }
                        }
                }
            }
        }
    }
}
/* modal popup style */
.modal-popup {
    .action-close {
        padding: 5px !important;
        &:before {
            font-size: 30px;
            line-height: normal;
        }
    }
    .modal-footer {
        padding-bottom: 0;
        button {
            padding: 13px 26px;
            &.action-primary {
                background: var(--theme-color);
            }
        }
    }
}