/*
  You can add custom CSS rules or import files here.
*/


/* Import the Radzen CSS files */
@import './styles-generated.css';


.ManageMenusGrid {
    --rz-grid-cell-padding: 0.3rem .5rem;
}

.large-numeric-input {
    --rz-input-font-size: 24px;
    --rz-input-height: 50px;
    --rz-numeric-button-width: 30px;
    --rz-numeric-button-height: 50px;
}
.session-expire {
    top: 50%;
    left: 50%;
    color: var(--rz-primary);
    border: 2px solid var(--rz-on-primary-light);
    z-index: 99999;
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 20px;
    text-align: center;
    box-shadow: 0 0 20px var(--rz-primary-darker);
    font-family: sans-serif;
    text-shadow: 0 0 10px var(--rz-primary);
    text-transform: uppercase;
    padding:20px !important;
    background-color:white !important;
    max-width:420px;
    width:80%;
}

.ring {
    top: 50%;
    left: 50%;
    width: 150px;
    color: var(--rz-primary);
    height: 150px;
    border: 3px solid var(--rz-on-primary-light);
    z-index: 99999;
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 20px;
    text-align: center;
    background: transparent;
    box-shadow: 0 0 20px var(--rz-primary-darker);
    line-height: 150px;
    font-family: sans-serif;
    text-shadow: 0 0 10px var(--rz-primary);
    border-radius: 50%;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ring:before {
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    z-index: 99999;
    content: '';
    position: absolute;
    animation: animate 2s linear infinite;
    border-top: 3px solid var(--rz-primary);
    border-right: 3px solid var(--rz-primary);
    border-radius: 50%;
}



.ring-bg {
    top: calc(50% - 2px);
    left: 50%;
    width: 50%;
    height: 4px;
    display: block;
    position: absolute;
    animation: animate 2s linear infinite;
    background: transparent;
    transform-origin: left;
}

.ring-bg:before {
    top: -6px;
    right: -8px;
    width: 16px;
    height: 16px;
    content: '';
    position: absolute;
    background: var(--rz-primary);
    box-shadow: 0 0 20px var(--rz-primary);
    border-radius: 50%;
}

.overlay {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1;
}


@keyframes animateC {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animateC {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(405deg);
    }
}

.multiSelect {
    max-width: 300px;
    margin: 0px !important;
}

.optionsContainer {
    width: 100%;
    overflow-y: scroll;
    max-height: 280px;
    padding: 0px !important;
}

.optionContainer {
    width: 100%;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}


.optionContainer:nth-of-type(even) {
    background-color: var(--rz-base-500);
}

.butttonsContainer {
    width: 100%;
    margin: 0px !important;
    padding-bottom: 10px;
    padding-top: 10px;
}

.highlightStockLevelRow td {
    background-color: darkslategrey !important;
    font-weight: bold;
}

.childStockLevel ul li {
    padding: 0px !important;
}

.sticky {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    top: -16px;
    background-color: #151515;
    z-index: 9999999;
    padding-bottom: 8px;
    padding-top: 18px;
}

.weight-text-default {
    /* Define default text styles if needed; otherwise, this can be left empty */
}

.weight-text-highlighted {
    color: green;
    font-weight: bold;
}

/*head and sidebar custom styles*/

html:root {
    --header-color: #ffffff;
    --sidebar-color: #333333;
    --header-text: #ffffff;
    --sidebar-text: #ffffff;
    --rz-warning: #F6AC33;
}

.rz-header {
    background-color: var(--header-color);
    color: var(--header-text);
}

ul.rz-profile-menu {
    background-color: var(--header-color);
}

.rz-sidebar,
.rz-panel-menu {
    background-color: var(--sidebar-color);
    color: var(--sidebar-text);
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link {
    background-color: var(--sidebar-color);
    color: var(--sidebar-text);
}

/*.selectBusinessMainLayoutDropdown {
    color: var(--header-text);
}*/

.rz-column-title-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.addAttachment {
    position: relative;
    top: 4px;
    right: 132px;
    color: #5dbf74;
    cursor: pointer;
}

#chooseContainer .rz-fileupload-buttonbar {
    background-color: transparent !important;
    text-align: center !important;
}

#chooseContainer .rz-fileupload-content .rz-fileupload-files {
    border-radius: 8px !important;
}

.attachmentsCount {
    min-width: 1.6em;
    /* or width, explained below. */
    height: 1.6em;
    border-radius: 0.8em;
    /* or 50%, explained below. */
    background-color: #386A20;
    /* number size and position */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
}

#attachmentList .rz-datalist-data {
    width: 33%;
    float: left;
}

#attachmentList .rz-datalist-data li {
    padding: 3px !important;
}

.purchaseOrderPendingChanges {
    margin-left: 12px;
    padding: 8px !important;
    border: 1px inset darkkhaki !important;
    color: darkkhaki;
    font-weight: bold;
}

.rz-state-disabled {
    border-color: #d3d3d3 !important;
    /* Example border color */
    cursor: default !important;
    /* Change cursor to not-allowed */
    opacity: 0.5 !important;
    /* Ensure opacity is set */
}

.rz-state-disabled.rz-dropdown-label {
    color: #d3d3d3 !important;
    /* Example border color */
    opacity: 0.8 !important;
    /* Ensure opacity is set */
}

div:not(.rz-form-field-content)>.rz-state-disabled.rz-dropdown .rz-inputtext {
    opacity: 0.8 !important;
    color: azure !important;
}

div:not(.rz-form-field-content)>.rz-textarea:disabled {
    opacity: 0.6 !important;
    color: azure !important;
}

/* Only affects elements inside the Landing Page */
.landing-page .dashboard-card {
    width: 100% !important;
    max-width: 700px;
}

/* Make columns stack on smaller screens */
@media (max-width: 1024px) {
    .landing-page {
        flex-wrap: wrap;
    }

    .landing-page .rz-column {
        width: 100% !important;
    }

    .rz-cell-data{
        font-size:12px !important;
    }
}

/* Force columns to stack vertically on small screens */
@media (max-width: 768px) {
    .landing-page .rz-row {
        flex-direction: column !important;
        align-items: center;
    }

    .landing-page .rz-column {
        width: 100% !important;
    }
}

@media (max-width: 340px) {
    .price-component-label-font {
        font-size: 8px !important;
    }
}

@media (min-width: 320px) and (max-width: 789px) {
    .price-component-label-font {
        padding-right:0px !important;
    }

    .rz-column-title {
        font-weight: bold !important;
        font-size:12px;
    }
}




@media (min-width: 320px) and (max-width: 600px) {
    .rz-header {
        padding: 5px !important;
    }

    .rz-profile-menu {
        padding: 5px !important;
    }

    /*.rz-text-h6 {
        font-size: 12px;
    }

    .rz-text-body1 {
        font-size: 3px;
    }

    .rz-text-body2 {
        font-size: 10px;
    }

    .rz-p-4{
        padding:3px !important;
    }

   .rz-badge{
       font-size:12px !important;
   }*/
}

@media (max-width: 600px) {
    .responsive-image {
        max-width: 200px;
        max-height: 40px !important;
    }
}

@media (max: 1024px) {
    .responsive-image {
        max-width: 350px;
    }

}

.responsive-image {
    height: auto;
    max-height: 70px;
    max-width: 150px; /* mobile default */
}


.responsive-login-image {
}

@media (max-width: 1024px) {
 
    .mobile-p5 {
        padding: 5px !important;
    }

    .login-info {
        max-height: 450px !important;
        overflow-y: auto;
    }
}

@media (max-width: 860px) {
    .rz-tabview-panel {
        padding: 5px !important;
    }

    .rz-fieldset-content {
        padding: 5px !important;
    }

    .rz-fieldset-legend {
        margin-bottom: 0px !important;
    }
}

@media (max-width: 768px) {
    .responsive-login-image {
        max-width: 200px;
        max-height: 40px !important;
    }

    .rz-register {
        margin: 8px 0px !important;
        padding: 5px !important;
    }
    .rz-body{
        padding: 5px !important;
    }

    .rx-card{
        margin:0px !important;
    }

    .mobile-p5 {
        padding: 5px !important;
    }

    .login-info {
        padding: 6px 15px !important;
        margin: 0px !important;
    }

}

/* Optional mobile-only overrides */
@media (max-width: 576px) {
    .rz-datepicker.rz-popup {
        width: 100% !important;
        max-width: 80%;
    }

    .rz-calendar {
        font-size: 12px;
    }

    .rz-dropdown-panel {
        width: 40% !important;
    }
}

@media (max-height: 520px) {
    .login-info {
        max-height: 390px !important;
        overflow-y: auto;
    }

    .rz-alert-message {
        font-size: 12px;
    }

    .rz-register {
        margin-top: 15px !important;
    }
}

@media (max-width: 420px) {

    .rz-register {
        margin: 8px 0px !important;
        padding: 5px !important;
    }

    .rz-textbox {
        padding-left: 5px !important;
    }

    .rz-inputtext {
        padding-left: 5px !important;
    }

    .rzi {
        font-size: 20px;
    }

    .rz-form-field-start {
        font-size: 16px;
        padding-left: 5px !important;
    }

    .account-title {
        font-size: 16px !important;
    }

    .account-description {
        font-size: 12px !important;
    }

    .rz-tabview-panel {
        padding: 5px !important;
    }

    .rz-fieldset-content {
        padding: 10px !important;
    }

    .rz-fieldset-legend {
        margin-bottom: 0px !important;
    }

    .rz-dialog-content {
        padding: 5px !important;
    }

    .rz-dialog-titlebar {
        padding: 2px !important;
    }

    .rz-alert-message {
        font-size: 12px;
    }

    .rz-datepicker-title .rz-dropdown {
        padding: 5px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        font-size: 12px !important;
    }

    .rz-datepicker-title .rz-dropdown:first-child {
        min-width: 100px !important;
        max-width: 100px !important;
    }

    .rz-dialog-confirm, .rz-dialog-alert {
        padding: 10px;
    }
}

@media (max-width: 356px) {

    .login-info {
        padding: 6px 15px !important;
        margin: 0px !important;
    }

    .mobile-p0 {
        padding: 0px !important;
    }

    .mobile-p5 {
        padding: 5px !important;
    }

    .mobile-m0 {
        margin: 0px !important;
    }

    .rz-login .rz-form .rz-form-row {
        gap: 10px !important;
    }

    .rz-login .rz-form {
        gap: 10px !important;
    }

    .rz-fieldset-legend {
        font-size: 12px !important;
    }

    .rz-datepicker-title .rz-dropdown {
        padding: 5px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        font-size: 12px !important;
    }

    .rz-datepicker-title .rz-dropdown:first-child {
        min-width: 90px !important;
        max-width: 90px !important;
    }

    #SocialSecurityNumber {
        padding-right:3px !important;
    }

    .rz-dialog-confirm, .rz-dialog-alert {
        max-width: 300px !important;
        padding:10px;
    }

}

@media (orientation: landscape) and (max-height: 500px) {
    .login-info {
        max-height: 450px !important;
        overflow-y: auto;
    }

    .rz-alert-message {
        font-size: 12px;
    }
}

@media (orientation: landscape) and (max-height: 400px) {
    .login-info {
        max-height: 360px !important;
        overflow-y: auto;
    }

    .rz-alert-message {
        font-size: 12px;
    }
}

.fab-container {
    position: fixed;
    bottom: 54px;
    right: 24px;
    z-index: 1000;
    cursor: grab;
}

.fab-container .rz-button-icon-left {
    font-size: 1.50rem !important;
}

.overlay-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0,0,0,0.2);
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loader-wrapper {
    width:100%;
}

/* Target both parent and child grid cells */
.rz-cell-data,
.rz-grid-table .rz-cell-data,
.rz-datalist-data .rz-cell-data,
.rz-grid-table td .rz-cell-data {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle;
}

/* Additional specificity for nested grids */
.rz-grid-table .rz-grid-table .rz-cell-data {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle;
}

/* Target the detail template grid cells specifically */
.rz-grid-detail-template .rz-cell-data {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle;
}

.rz-grid-table td {
    vertical-align: middle !important;
}

.rz-column-title-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

#menuComponent
{
    display:none !important;
}

#notice-content .rz-html-editor-content{
    background-color: transparent !important;
}

.sticky-t {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    top: 0px;
    z-index: 9999999;
    padding-bottom: 8px;
    padding-top: 8px;
}

.warning-alert {
    padding: 6px;
    display: flex;
    align-items: center;
    color: #4d4d4c;
    float: right;
    width: 100%;
    background-color: #fcf9e7;
    border-left: 5px solid #f0c100;
    font-size: 14px;
}

.error-alert {
    padding: 6px;
    display: flex;
    align-items: center;
    color: var(--rz-on-danger-lighter);
    float: right;
    width: 100%;
    background-color: #f9e1de;
    border-left: 5px solid red;
    font-size: 16px;
    border-radius:5px;
}

.error-alert .rzi {
    font-size: 24px;
    margin-right: 8px;
    color: red
}


.info-alert {
    padding: 6px;
    display: flex;
    align-items: center;
    color: var(--rz-on-info-lighter);
    float: right;
    width: 100%;
    background-color: var(--rz-info-lighter);
    border-left: 5px solid steelblue;
    font-size: 16px;
    border-radius: 5px;
}

.info-alert .rzi {
    font-size: 24px;
    margin-right: 8px;
    color: steelblue;
}

.rz-sidebar-toggle {
    color: rgba(var(--sidebar-text-rgb), 0.8);
    background-color: color-mix(in srgb, currentColor 15%, transparent);
    border-radius: var(--rz-sidebar-toggle-hover-border-radius);
}

@keyframes fadeIn {
    from

{
    opacity: 0;
    transform: scale(0.95);
}

to {
    opacity: 1;
    transform: scale(1);
}

}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}

.session-warning-modal svg {
    width: 5rem;
    height: 5rem;
}

.emoji-safe {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.2rem;
}

.phone-input-container {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    gap: 8px;
}

.phone-dropdown {
    flex: 0 0 80px;
    min-width: 120px;
    border: 1px solid var(--border-color);
}

.phone-number-box {
    flex: 1;
}

.btn-primary {
    background-color: #2563eb !important;/* blue-600 */
    color: white;
}

    .btn-primary:hover:not(:disabled) {
        background-color: #1d4ed8 !important; /* blue-700 */
    }

.btn-disabled {
    background-color: #e5e7eb !important; /* gray-300 */
    color: #9ca3af !important; /* gray-500 */
    cursor: not-allowed !important;
}