/* CSS Document */

/* MODAL & UI STYLES Color Adjustments
-------------------------------*/
   
/* UI Styles */
button:focus,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus, 
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(78,115,223, 0.2)!important;
  box-shadow: 0 1px .25px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(0,201,255, 0.6)!important;
  outline: 0 none !important;
}
 

select::-ms-expand{
	display: none;
}

select{
	-webkit-appearance: none;
	-moz-appearance: none;      
	appearance: none;
	padding: 2px 30px 2px 2px;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.btn-primary,
.btn-home-primary{
	background-color: #4e73df;
	color: #fff;
}

modal .form-group label{
	color: #000;
}

.card .form-group label{
	color: #000;
}

modal .modal .modal-container {
	position: relative;
	padding: 0px;
	background: #fff;
	flex: initial;
	/* margin exposes part of the modal background */
	/*height: 500px; */
	width: 500px;
	border-radius: 7px;
}

modal.large .modal .modal-container { 
	position: relative;
	padding: 0px; 
	background: #fff;
	flex: initial;
	/* margin exposes part of the modal background */
	/*height: 500px; */
	max-width: 1080px; 
	min-width: 350px;
	width: 90%;
	border-radius: 7px;
}

modal .modal .modal-container .modal-close{
	position: absolute;
	
	top:-15px;
	right:-15px;
	
	height: 50px;
	width: 50px;
	
	border-radius: 25px;
	background-color: #fff;
	color: #D7D9E6;
	display: flex;
  	align-items: center;
  	justify-content: center;
	
	font-size: 36px;
	padding: 0;
}
 
.modal-container .modal-head{
	background-color: #4e73df;
	padding: 15px 0;
	border-radius: 7px 7px 0 0;
}

.modal-container .modal-head h1{
	text-transform: uppercase;
	text-align: center;
	font-size: 26px;
	color: rgba(255, 255, 255, 0.8);
}

.modal .modal-container .modal-body{
	margin: 0;
	padding: 20px;
	background-color: #f8f9fc;
}

.modal-body .modal-form{
	
	border: 1px solid #ccc;	
}

.modal-body .modal-form .form-header{ 
	font-size: 27px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	color: #7ca6e8;
	margin-bottom: 36px;
	text-decoration: underline;
	text-underline-position: under;
}

.modal-body .modal-form select{
	background-color: #fff !important;
	background-clip: padding-box;
	border: 1px solid #d1d3e2 !important;
}

.modal-open #modal-collection .modal-background{
	/* modal background fixed across whole screen */
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
 
	/* semi-transparent black  */
	background-color: #000;
	opacity: 0.45;

	/* z-index must be below .modal and above everything else  */
	z-index: 900;
}

modal .choice-container .choice-item .choice-description{
	
	border: #ccc 1px solid;
	border-bottom: none;
} 

modal .form-hint{
	color: #666666;
}

modal .form-hint ul li{
	color: #666666; 	
}

modal#user-profile .modal-body .grid-container .menu-container .menu-item{
	width: 100%;
	height: 70px;
	text-align: center;
	background-color: #4e73df;
	display: flex;
	flex-direction: column;
	padding-right: 5px;
	padding-left: 5px;
	margin-bottom: 10px;
	color: #fff;
	text-transform: uppercase;
	justify-content: center;
	cursor: pointer;
}

modal#user-profile .modal-body .grid-container .menu-container .menu-item.active{
	
	border-right: #f3b10d 5px solid;
	padding-right: 0;
	
}

modal#user-profile .modal-body .grid-container .menu-container .menu-item:hover:not(.active){
	
	border-right: #7ca6e8 5px solid;
	padding-right: 0;
	
}

modal#user-profile .modal-body .grid-container .form-container { 
	grid-area: 1 / 3 / 6 / 6; 
	align-self: center;
	justify-self: center;
	width: 100%;
	height: 100%;
	background: #fff;
	padding: 20px 35px;
}

modal img-crop canvas {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

modal .cropArea {
    background: #E4E4E4;
    overflow: hidden;
    width:500px;
    height:350px;
}

modal .progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}
modal .progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}

#system-modal .modal-body{
	text-align: center;
}

.btn.table-control{
	background-color: #f0feff;
	border-color: black;
}

#console-window{
    background-color: #000;
    border: solid 1px #000;
    color: #fff;
    font-family: "Gill Sans";
    padding: 15px;
    height: 98%;
    overflow-y: scroll;
    word-wrap: normal;
    max-height: 640px;

}

#idata-controls{
    padding: 10px;
    border: #858796 solid 1px;
    background-color: #f8f9fc;
    min-height: 100%;
}
 
render-form input, render-form select{
    width: 100%;
    text-overflow: ellipsis;
    
}

service-card .card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

custom-card, chart-card, table-card{
    display: contents;
}

custom-card .line .graph,
custom-card .bar .graph{
	min-height: 600px;
}

chart-card .line .graph,
chart-card .bar .graph{
	min-height: 600px;
}

.four-x-four { 
  display: grid;
  grid-template-columns: 45% 55% ; /* Two columns with automatic widths */
  grid-template-rows: 200px 400px; /* Two rows with automatic heights */
  grid-gap: 5px; /* Gap between grid cells */
}

.four-x-four .information-box{
	padding: 0px 5px 10px;
	border-bottom: 1px solid #ccc; 
	
}

.four-x-four custom-card2 .line .graph canvas,
.four-x-four custom-card2 .bar .graph canvas{
	min-height: 395px;
} 

table-card table {
    table-layout: fixed; /* Ensures table columns respect the widths */
    width: 100%; /* Ensures the table takes up full available width */
}

table-card table th,table-card table td {
    min-width: 50px;  /* Minimum width */
    max-width: 400px;  /* Maximum width */
    overflow: hidden;
    text-overflow: ellipsis; /* Adds ellipsis (...) if content overflows */
    white-space: nowrap; /* Prevents text wrapping */
}

table-card table td.string{
	text-align: left;
}

table-card table td.action{
	width: 100px;
}

table-card .pagination-controls{
	display: flex;
    justify-content: space-evenly; /* Align pagination controls to the right */
    margin-top: 10px;  /* Optional: add margin to separate from the table */
}

table-card .pagination-controls select{
	padding-left: 15px;
	padding-right: 15px;
	width: 67px;
	position: relative;
	margin-right: 10px;
}

table-card .pagination-controls .btn{
	border: solid thin #ccc;
	
}

table-card .btn{
	margin-top: 5px;
	margin-bottom: 5px;
}

table-card .table-striped tbody tr:nth-of-type(2n+1) {
  background-color: rgb(248, 249, 252);
}


table-card .table-hover tbody tr:hover {
  background-color: rgba(248, 249, 252, .75) !important;
}

.verticle-span-2 { 
  grid-column: 2 / 3; /* Item spans from column line 2 to column line 3 */
  grid-row: 1 / span 2; /* Item starts at row line 1 and spans 2 rows */
}

.btn-toggle {
    color: #6b7381;
    margin: 0 0.5rem;
    padding: 0;
    position: relative;
    border: none;
    height: 1.5rem;
    width: 3rem;
    border-radius: 1.5rem;
    background-color: #858796;
} 

.btn-toggle.active > .handle {
    left: 1.6875rem;
    transition: left 0.25s;
}

.btn-toggle > .handle{
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;   
    border-radius: 1.125rem;
    background-color: #fff;
    transition: left 0.25s;
}
 
.btn-toggle.active{
    background-color: #4e73df;
}


.dropzone .dropzone-indicator{
	display: flex !important;
	position: absolute;
	top:0;
	left:0;
    width: 100%; /* Adjust based on your form size */
    height: 100%; /* Adjust based on your desired drop area size */
    box-sizing: border-box; 
    border: 2px dashed #ccc; /* Styled to indicate it’s a drop target */
    transition: background-color 0.3s ease;
    background-color: rgba(255, 255, 255, 0.8); /* White background with opacity */
	padding: 5px;
    justify-content: center;
    align-items: center;
	z-index: 5;
} 
 
.dropzone .dropzone-indicator label{
    font-size: 30px;
    font-weight: bold;
}

.dropzone-indicator{
	display: none;
  	justify-content: center;
  	align-content: center;
}

.context-form {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
}

.context-form table {
    width: 100%;
    border-collapse: collapse;
}

.context-form th, .context-form td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

search #search-container{
    flex-wrap: wrap;
}

search #search-container .form-group{
    width:100%;
}

.input-group-button-container{
	position: relative; 
}

.input-group-button-container .form-control{
	padding-right:40px;
    min-width: 100px;
}

.input-group-button{
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 200;
}

.input-group-button button{
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.readonly-input {
    width: calc(100% - 20px); /* Leaves space for the icon */
    padding-right: 20px; /* Prevents text from overlapping the icon */
}

.error-icon {
    position: absolute;
  	top: 49%;
  	right: 6px;
  	transform: translateY(-50%);
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	display: inline-block;
	padding: 0px 10px; 
	border-radius: 20px;
	background-color: #f00;
}

#stock_conversion_form{
	
}

#stock_conversion_form td {
    position: relative; /* Make the container a positioning reference */
	padding-bottom: 20px;
}

#stock_conversion_form input[type="number"]{
	width: 100%;
}

#stock_conversion_form span.error{
	position: absolute;
	bottom: 4px;
	left: 11px;
	color: #800000;
	font-size: calc(8px + 0.1vw);
	white-space: nowrap;
}

.notifications-container{
	max-height:500px;
	overflow-x: hidden;
	overflow-y: scroll !important;
}

.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    margin-left: 10px;
}

.copy-address-cell {
    position: relative;    /* needed for absolute overlay */
    cursor: pointer;
}

/* optional hover styling */
.copy-address-hover {
    background-color: #f8f9fa;
}

/* the overlay badge */
.copy-badge-overlay {
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 10;
    pointer-events: none;  /* do not block clicks on the cell */
    font-size: 0.7rem;
    opacity: 0.75;
}

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

@media (min-width: 576px) { 
	
}

@media (min-width: 768px) {      
    
	modal.large .modal .modal-container { 
		
	}
	
    .input-group{
		margin-right: 25px;
	}
     
    
} 

@media (min-width: 992px) {	
	
	search #search-container{
        flex-wrap: nowrap;
    } 
	
	search #search-container .form-group{
        width:auto;
    }
} 

@media (min-width: 1200px) {
	modal.large .modal .modal-container { 
		
	}
} 
.pulse-highlight { animation: pulse-bg 2s ease-in-out 1; }
@keyframes pulse-bg {
  0%   { background: rgba(255,235,59,.6); }
  100% { background: transparent; }
}