/* Base rules Bootstrap 5 dropped and this markup still relies on (moved from bs4-compat.css 2026-09-17)
 *
 * Links are not underlined until hovered. Bootstrap 5 underlines every link; the whole UI was drawn
 * against Bootstrap 4, which did not - the sidebar rail becomes a stack of underlined rows without this.
 * Two rules rather than --bs-link-decoration: none, which would lose the hover underline as well.
 *
 * .close is the modal header's x button, ~80 of them. Bootstrap 5 has no .close at all (its .btn-close
 * is an SVG icon with no text), so the rule is ours now: Bootstrap 4.3.1's values, unchanged, because
 * every header was laid out against them. Colours are the vendor's, not the palette - a component
 * moves to the palette when its modal is redesigned.
 */
a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.close {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .5;
}

.close:hover {
	color: #000;
	text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
	opacity: .75;
}

button.close {
	padding: 0;
	background-color: transparent;
	border: 0;
	appearance: none;
}

a.close.disabled {
	pointer-events: none;
}

/* Toggle -START */
    .toggle-div{
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 1px;
        cursor: pointer;
        background-color: white !important;
        justify-content: flex-end;
    }

    .toggle-div label{
        font-size: 0.9375rem;
        margin: 0rem 0.5313rem 0px 0px;
        font-family: sans-serif;
    }

    .toggle-body {
        background-color: lightgrey;
        border: 1px solid grey;
        width: 40px;
        border-radius: 20px;
        box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 10%);
        transition: all 0.2s ease;
    }

    .toggle-head{
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%);
        border: 1px solid gray;
        box-sizing: border-box;
        transition: all 0.1s ease;
    }

    .toggle-div.active .toggle-body{
        background-color:#51d88a;
    }

    .toggle-div.active .toggle-body .toggle-head{
        transform : translateX(100%);
    }

    .toggle-div input[type=checkbox]{
        display: none;
    }

/* Toggle -- END-- */

/* Data tables toolbar style --START */
	.top-toolbar {
		display: flex;
		align-items: center;
	}

	.top-toolbar .btn-div {
		display: inline-flex;
		align-items: center;
		margin-left: auto;
	}

	.top-toolbar .btn-div button {
		color: #1a73e8;
		padding: 6px 28px;
		margin-right: 20px;
	}

	.top-toolbar .btn-div button i{
		padding-right: 5px;
	}
/* Datatable toolbar style --- END -- */

/* filteration date ---START ---*/
	.main-div {
		display: inline-flex;
		align-items: center;
		padding-left: 3rem;
	}

	.main-div label {
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 0px;
		margin-left: 0px;
	}

	.main-div span {
		padding: 0px;
		font-size: 12px;
		color: #7d7d7d;
		font-weight: 600;
	}

	.main-div input,.main-div select{
		height: 30px;
		font-size: 13px;
		background-color: #f8f9fa;
		border: none;
		border-bottom: 1px solid #7d7d7d;
		border-radius: 0;
		padding: 6px 0px;
		color: #7d7d7d;
		font-weight: 600;
	}

	.main-div input:focus, .main-div select:focus{
		background-color: #f8f9fa;
		outline: none;
		border-color: #f8f9fa;
		box-shadow: none;
	}

	.main-div select{
		padding-top: 5px;
	}

	.main-div button{
		margin-left: 0px !important;
		font-size: 14px;
		height: 34px;
		padding: 0.25rem 35px;
		background-color: #30425a;
		margin-top: auto;
	}

	/* //--- */
	.main-div-lc {
		display: inline-flex;
		align-items: center;
		padding-left: 3rem;
	}

	.main-div-lc label {
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 0px;
	}

	.main-div-lc span {
		background-color: #f8f9fa;
		font-size: 12px;
		color: #7d7d7d;
		font-weight: 600;
	}

	.main-div-lc input,.main-div-lc select{
		font-size: 13px;
		background-color: #f8f9fa;
		border: none;
		height: 30px;
		padding: 0;
		color: #7d7d7d;
		border-bottom: 1px solid #30425a;
		border-radius: 0;
		font-weight: 600;
	}

	.main-div-lc input:focus,.main-div-lc select:focus{
		box-shadow: none;
		border: none;
		border-bottom: 1px solid #30425a;
		background-color: #f8f9fa;
	}

	.main-div-lc button{
		margin-left: 5px !important;
		font-size: 12px;
		height: 31px;
	}

	/* select */

	.stores2_location {
		visibility: hidden;
	}

	.select2-container {
		visibility: visible;
	}

	.main-div-select{
		position: relative;
		display: grid;
		padding-left: 3rem;
	}

	.main-div-select label{
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 0px;
		font-size: 12px;
		font-weight: 600;
		color: #7d7d7d;
	}
	
	.main-div-select .select2-container--default .select2-selection--single{
		background-color: #f8f9fa;
	}

	.main-div-select .select2-container--default .select2-selection--single {
		border: none;       
		border-radius: 0;  
		padding-bottom: 32px;
	}

	.main-div-select .select2-container {
		height: 34px;
		line-height: 18px;
		font-size: 13px;
	}

	.main-div-select .select2-container--default .select2-results__option {
		font-size: 12px !important;
	}

	.main-div-select .select2-container--default .select2-results__option {
		font-size: 12px !important;
	}
	
	.main-div-select .select2-container--default .select2-search__field {
		font-size: 12px !important;
	}

	.main-div-select .select2-container--open .select2-dropdown--below{
		margin-top: 9px !important;
	}

	/* Inentory modal - from locations */
	#materialrequestForm .select2-container .select2-selection--single,
	#purchaseOrderModal .select2-container .select2-selection--single,
	#materialTransferModal .select2-container .select2-selection--single,
	#grnModal .select2-container .select2-selection--single,
	#purchaseReturnform .select2-container .select2-selection--single,
	#adjustmentModal .select2-container .select2-selection--single {
		height: calc(1.5em + .75rem + 2px);
		font-size: 12px;
	}
	.main-div-select .select2-container--default .select2-results__option {
		font-size: 12px !important;
	}
	
	.main-div-select .select2-container--default .select2-search__field {
		font-size: 12px !important;
	}

	.main-div-select .select2-container--default .select2-selection--single .select2-selection__rendered{
		line-height: 31px !important;
		padding: 0px !important;
		color: #7d7d7d !important;
		font-weight: 600;
		border-bottom: 1px solid #30425a;
	}

/* Filteration date --- END --- */

/* Global Styles */
    /* total width */
    body *::-webkit-scrollbar {
        background-color: #ffffff;
        width: 13px;
    }

    /* background of the scrollbar except button or resizer */
    body *::-webkit-scrollbar-track {
        background-color: #ffffff;
    }

    /* scrollbar itself */
    body *::-webkit-scrollbar-thumb {
        background-color: #babac0;
        border-radius: 20px;
        border: 2.5px solid #ffffff;
    }

    /* set button(top and bottom of the scrollbar) */
    body *::-webkit-scrollbar-button {
        display:none;
    }

    /* Customizing scrollbar --- END */


    .required-field{
        color: red;
        font-weight: 500;
        padding-left: 4px;
    }

    .global-add-btn{
        padding: 6px 50px;
        background-color: #1a73e8;
        color: white;
    }

    .global-add-btn i, .global-save-btn i{
        padding-right: 5px;
    }

    .global-save-btn{
        padding: 6px 50px;
        background-color: green;
        color: white;
    }

    .global-add-btn:hover{
        background-color: #226ed1;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        border: 1px solid #226ed1;
        color: white !important;
    }

    .global-save-btn:hover{
        background-color: rgb(5, 146, 5);
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        border: 1px solid green;
    }

    .global-modal-save-btn{
        padding: 10px 50px;
        width: 230px;
        background-color: green;
        font-size: 15px;
    }

    .global-modal-save-btn:hover{
        background-color: rgb(5, 146, 5);
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        border: 1px solid green;
    }

    .global-modal-add-btn{
        padding: 10px 50px;
        width: 230px;
        background-color:#226ed1;
        font-size: 15px;
    }
    
    .global-modal-add-btn:hover{
        background-color: #226ed1;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        border: 1px solid #226ed1;
    }
    
    .global-modal-close-btn{
        padding: 10px 50px;
        width: 230px;
        font-size: 15px;
    }

    .global-content{
        min-height: 100%;
        background-color: white;
        padding: 0.625rem 0.3125rem;
        border-radius: 0px;
        min-width: 700px;
    }

    .global-content thead tr{
        background-color: #30425a;
        color: white;
        font-weight: 500;
    }

    .global-content th,.global-content td{
        padding: 5px 10px ;
    }

    .global-content tbody tr {
        border-bottom: 1px solid #dddddd;
    }

    .global-content tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

    .global-content tbody tr:last-of-type {
        border-bottom: 1px solid #30425a;
    }

    .global-content tbody tr.active-row {
        font-weight: bold;
        color: #30425a;
    }

    .global-content tbody td{
        vertical-align: middle;
        white-space: nowrap;
    }

    .global-content thead th{
        font-weight: 400 !important;
    }

    .global-content .fa-check-circle{
        color: green;
    }

    .global-content .fa-times-circle{
        color: red;
    }

    .global-content .fa-edit,
	.global-content .fa-print,
	.global-content .fa-times,
	.global-content .fa-xmark{
        cursor: pointer;
        color: black;
    }

    .global-header .header-select{
        padding: 5px 10px;
        border-radius: 5px;
    }

	.header-input{
        padding: 3px 8px;
        border-radius: 5px;
    }

	.header-label{
        margin-bottom: 0;
		padding-right: 10px;
		padding-left: 15px;
    }

    .global-header .modal label{
        font-size: 13.5px;
        /* margin-bottom: 10px; */
        letter-spacing: 0.1px;
        margin-top: 10px;
    }

    .global-header .modal .clearerror{
        padding-top: 5px;
        color: red;
        font-weight: 600;
    }

    .global-header .modal .required-field{
        color: red;
        font-weight: 500;
        padding-left: 4px;
    }

    .global-header .modal .help-block{
        padding: 2px 0px !important;
        font-weight: 500 !important;
        font-size: 12px;
    }

    .global-header .modal .modal-body{
        padding: 10px 20px;
    }

    .global-header .modal .close:hover{
        color: black;
    }

    .global-header .modal .modal-footer{
        padding: 10px 30px !important;
    }

    .global-header .modal input, .global-header .modal select,.global-header .modal textarea{
        font-size: 0.8rem;
    }

    .global-header .modal input[type="text"] {
        text-transform: capitalize;
    }

    .global-header .modal .row
    {
        margin-right: -15px;
        margin-left: -15px;
    }
    
    .global-header .modal input:focus,.global-header .modal select:focus,.global-header .modal textarea:focus{
        outline: none;
        box-shadow: none;
        border: 2px solid grey;
    }

    .global-loader{
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0000004a;
        z-index: 1051;
    }

    .global-loader.hide{
        display: none;
    }

    .ui-timepicker-container {
        z-index: 9999 !important; /* Adjust the value as needed */
    }

	.long-page-content{
		min-height: 100%;
		background-color: white;
		padding: 1.25rem 2.1875rem 6.875rem 2.1875rem;
		border-radius: 0px;
		min-width: 700px;
	} 

	.long-page-content input,
	.long-page-content select{
		height: 33px !important;
		font-size: 14.5px !important;
	}

	.long-page-content input::placeholder,
    .long-page-content textarea::placeholder,
	.long-page-content select::placeholder{
        color: rgb(202, 202, 202);
		font-size: 12px;
    }
/* Custome input type file --- START */
	.custom-upload-label{
		display: inline-block;
		background-color: #007bff;
		color: white;
		padding: 6px 12px;
		border-radius: 5px;
		cursor: pointer;
		border: none;
		font-size: 13.5px;
		margin-bottom: 10px;
		letter-spacing: 0.1px;
		margin-top: 10px;
	}

	.custom-upload-span{
		font-size: 13px;
    	font-weight: normal;
	}

	.custom-upload-input{
		display: none;
	}
/* Custome input type file --- END */

/* Customer adding modal  */
    /* Add customer */
      #customerAddModal #credit_customer, #customerEditModal #credit_customer{
        margin-right: 6px;
    }

/* Keyboard style -- START */

	.keyboard-modal{
		position: absolute; /* Fixed to center it on the screen */
		background-color: #eef7ff;
		z-index: 2000;
		padding: 8px;
		display: none; /* Initially hidden */
		border: 1px solid gray;
		transition: height 0.3s ease;
		width: 100%;
		max-width: 50%; /* Adjust width */
		max-height: 272px; /* Set max height for keyboard */
		border-radius: 10px;
	}

	#keyboardModal {
		width: 100%;
		max-width: 50%; /* Adjust width */
		max-height: 272px; /* Set max height for keyboard */
	}

	#numberKeyboardModal {
		width: max-content;
		max-height: max-content;
	}

	#numberKeyboardModal .jline ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 3 columns of equal width */
		gap: 10px; /* Space between keys */
		list-style: none;
		padding: 0;
		justify-items: center; /* Center the keys horizontally */
	}

	#numberKeyboardModal .jline ul li{
		padding: 20px;
		text-align: center;
		font-size: 24px;
		box-sizing: border-box;
		cursor: pointer;
		background-color: #f8f8f8;
	}

	.keyboard-modal.closed {
		height: 0;
		display: none;
	}

	.keyboard-modal.opened {
		display: block;
		height: auto;
	}

	.keyboard-modal #keyboardholder {
		width: 100%;
	}

	.keyboard-modal .jkeyboard .jline ul li {
		flex: 1 !important;
		margin: 3px;
		height: 46px !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.keyboard-modal #keyboardholder .jkeyboard .jline ul {
		display: flex !important;
	}

	.keyboard-modal #keyboardholder .jkeyboard .jline ul li.space {
		min-width: 60%;
	}

	.keyboard-modal #keyboardholder .jkeyboard .jline ul li.shift {
		min-width: 20%;
	}

	.keyboard-modal #keyboardholder .jkeyboard .jline ul li.backspace {
		min-width: 20%;
	}

	.keyboard-modal .jkeyboard .jline {
		margin-left: 0;
	}

	.keyboard-modal .modal-body .col-md-12 {
		padding: 0;
	}

	.keyboard-modal .jkeyboard .jline ul li:hover, .jkeyboard .jline ul li:active {
		background-color: #3a6083 !important;
		color: white;
	}

	.customerkeyboard{
		max-width: 70% !important;
		max-height: 350px !important;
	}

	.customerkeyboard.opened{
		height: 350px !important;
	}

	.customerkeyboard .jkeyboard .jline ul li{
		height: 61px !important;
	}
/* Keyboard style -- END */


@media only screen  and (max-width : 1500px) {
	.global-add-btn{
		padding: 6px 25px;
	}
}
/* Customer Add Modal : START */
/* #customerAddModal ships on the POS sales page AND the CRM customer list, and
   commanstyle.css is the one stylesheet both load - that is why this lives here
   and not pos.css. POS touch scale on purpose; everything is scoped to the
   modal id so nothing leaks into module pages. Palette: the 9 core colours. */
	#customerAddModal .ca-dialog{
		max-width: 420px;
		width: 100%;
		margin: 30px auto;
	}
	#customerAddModal .ca-content{
		border: none;
		border-radius: 18px;
		box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
	}
	#customerAddModal .ca-head{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		padding: 20px 22px 12px;
	}
	#customerAddModal .ca-head h2{
		margin: 0;
		font-size: 17px;
		font-weight: 800;
		color: #1E293B;
	}
	#customerAddModal .ca-head p{
		margin: 3px 0 0;
		font-size: 11.5px;
		color: #64748B;
	}
	#customerAddModal .ca-close{
		width: 34px;
		height: 34px;
		/* the button also carries .global-modal-close-btn (the comman.js close hook), whose
		   padding: 10px 50px is for a wide text button - it squeezed the x to nothing */
		padding: 0;
		flex-shrink: 0;
		border: 1px solid #E2E8F0;
		border-radius: 8px;
		background: #F8FAFC;
		color: #64748B;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	#customerAddModal .ca-close svg{
		width: 15px;
		height: 15px;
	}
	#customerAddModal .ca-body{
		padding: 2px 22px 6px;
	}
	#customerAddModal .ca-field{
		margin-bottom: 14px;
	}
	#customerAddModal .ca-field label{
		display: block;
		margin: 0 0 6px;
		font-size: 12px;
		font-weight: 700;
		color: #1E293B;
	}
	#customerAddModal .ca-req{
		color: #DC2626;
		margin-left: 2px;
	}
	#customerAddModal .ca-field input{
		width: 100%;
		height: 42px;
		padding: 0 13px;
		font-size: 14px;
		color: #1E293B;
		background: #FFFFFF;
		border: 1px solid #CBD5E1;
		border-radius: 10px;
		transition: border-color 0.15s, box-shadow 0.15s;
	}
	#customerAddModal .ca-field input:focus{
		outline: none;
		border-color: #1A3A6B;
		box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.15);
	}
	#customerAddModal .ca-field input::placeholder{
		color: #64748B;
	}
	/* Same idea as #customerinfo .hd-phone, at the touch scale this modal uses: the wrapper
	   carries the 42px height, the 10px radius and the border, and the input inside is bare. */
	#customerAddModal .ca-phone{
		display: flex;
		align-items: center;
		height: 42px;
		padding: 0 13px;
		background: #FFFFFF;
		border: 1px solid #CBD5E1;
		border-radius: 10px;
		transition: border-color 0.15s, box-shadow 0.15s;
	}
	#customerAddModal .ca-phone:focus-within{
		border-color: #1A3A6B;
		box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.15);
	}
	#customerAddModal .ca-phone-code{
		flex: none;
		padding-right: 10px;
		margin-right: 10px;
		border-right: 1px solid #CBD5E1;
		font-size: 14px;
		color: #64748B;
		white-space: nowrap;
	}
	/* Beats `#customerAddModal .ca-field input` on specificity - three ids/classes to two -
	   so the wrapper keeps the border and this one does not draw a second. */
	#customerAddModal .ca-field .ca-phone input{
		/* flex:1 rather than leaning on the base rule's width:100%, which resolves against the
		   wrapper and would overflow it once the code chip has taken its share. */
		flex: 1;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		border-radius: 0;
		min-width: 0;
	}
	#customerAddModal .ca-field .ca-phone input:focus{
		box-shadow: none;
	}

	#customerAddModal .ca-error .help-block{
		margin: 5px 0 0;
		font-size: 11.5px;
		color: #DC2626;
	}
	#customerAddModal .ca-toggles{
		margin-top: 4px;
		border-top: 1px solid #E2E8F0;
	}
	#customerAddModal .ca-switch{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: 13px 0;
		cursor: pointer;
		user-select: none;
	}
	#customerAddModal .ca-switch + .ca-switch{
		border-top: 1px solid #E2E8F0;
	}
	#customerAddModal .ca-switch-label{
		font-size: 13px;
		font-weight: 600;
		color: #1E293B;
	}
	#customerAddModal .ca-switch-label small{
		display: block;
		margin-top: 2px;
		font-size: 10.5px;
		font-weight: 500;
		color: #64748B;
	}
	/* checkbox stays focusable but invisible; it must sit immediately before
	   .ca-track or the sibling selector breaks */
	#customerAddModal .ca-switch input{
		position: absolute;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		border: none;
		opacity: 0;
		pointer-events: none;
	}
	#customerAddModal .ca-track{
		position: relative;
		flex-shrink: 0;
		width: 40px;
		height: 22px;
		border-radius: 11px;
		background: #CBD5E1;
		transition: background 0.15s;
	}
	#customerAddModal .ca-knob{
		position: absolute;
		top: 2px;
		left: 2px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #FFFFFF;
		box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
		transition: left 0.15s;
	}
	#customerAddModal .ca-switch input:checked + .ca-track{
		background: #1A3A6B;
	}
	#customerAddModal .ca-switch input:checked + .ca-track .ca-knob{
		left: 20px;
	}
	#customerAddModal .ca-switch input:focus-visible + .ca-track{
		box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.15);
	}
	#customerAddModal .ca-footer{
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 12px;
		padding: 14px 22px 20px;
	}
	#customerAddModal .ca-btn{
		height: 48px;
		border: none;
		border-radius: 11px;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
	}
	#customerAddModal .ca-btn.ghost{
		background: #FFFFFF;
		border: 1px solid #CBD5E1;
		color: #1E293B;
	}
	#customerAddModal .ca-btn.ghost:hover{
		background: #F1F5F9;
	}
	#customerAddModal .ca-btn.commit{
		background: #15803D;
		color: #FFFFFF;
	}
	#customerAddModal .ca-btn.commit:hover{
		background: #166534;
	}
	#customerAddModal .ca-btn:disabled{
		opacity: 0.6;
		cursor: default;
	}
	@media (max-width: 768px){
		#customerAddModal .ca-dialog{
			max-width: 94vw;
			margin: 14px auto;
		}
	}
/* Customer Add Modal : END */