.btn-login {
	font-size: 0.9rem;
	letter-spacing: 0.05rem;
	padding: 0.85rem 1rem;
}

.loginImage{
	display: flex;
	justify-content: center;
}

.form-control:disabled, .form-control[readonly] {
	background-color: #ffffff;
	opacity: 1;
	border-style: None;
}

.form-select:disabled, .form-control[readonly] {
	background-color: #ffffff;
	opacity: 1;
	border-style: None;
}

.off-canvas{
	height: 100%; /* 100% Full-height */
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 1; /* Stay on top */
	top: 0;
	left: 0;
	background-color: #111; /* Black*/
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 60px; /* Place content 60px from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.itemlist{
	padding-left: 15px;
}

.request-overlay {
    z-index: 9999;
    position: fixed; /*Important to cover the screen in case of scolling content*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    background: rgba(200,200,200,0.5) no-repeat center; /*.gif file or just div with message etc. however you like*/
}

/*modal success/error message css */
.successmessageheader{
	background-color: #2597BA;
}

.errormessageheader{
	background-color:lightpink;
}

.model_success{
	border-radius: 0px;
}

/* eo custom card css */
.eosection {
	padding:10px;
	border-radius:10px;
	border-style: solid;
	border-color: lightgrey;
	border-width: 1px;
	box-shadow: 2px 2px 3px lightgrey;
	background-color: white;
}

.eocardcontent:hover{
	background-color: #f6f6f6;
}

.eocardcontent {
	padding: 10px;
	border-width: 1px;
	border-radius: 10px;
	border-color: lightgrey;
	border-style: solid;
	box-shadow: 2px 2px 3px lightgrey;
	background-color: white;
}

.eoflatcardcontent{
	padding: 10px;
	background-color: lightgrey;
	border-radius: 10px;
}

.eocard {
	padding: 5px;
	border-radius: 10px;
}

/* Buttons CSS */
.eobutton {
	background-color: white;
	border-style: solid;
	border-width: 1px;
	border-color: lightgray;
	border-radius: 10px;
	padding: 8px 32px;
	text-decoration: none;
	color: black;
	box-shadow: 0px 3px 5px lightgrey;
	text-align:center;
	cursor: pointer;
	display: inline-block;
}

.eocheckbox {
	vertical-align: middle;
}

.statusActive {
	background-color: green;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	border-radius: 5px;
	padding: 4px 16px;
	color: white;
	text-align: center;
	width: 200px;
	max-width: 200px;
}

.statusClosed {
	background-color: red;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	border-radius: 5px;
	padding: 4px 16px;
	color: white;
	text-align: center;
	width: 200px;
	max-width: 200px;
}

.statusNotStarted {
	background-color: yellow;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	border-radius: 5px;
	padding: 4px 16px;
	color: black;
	text-align: center;
	width: 200px;
	max-width: 200px;
}

.eoCenter {
	text-align:center;
}

.eobutton:hover {
	background: #2597BA;
	color: white;
	cursor: pointer;
}

.eobutton:active {
	box-shadow: 0px 0px 10px lightgrey;
	transform: translateY(4px);
}

button.eoLink {
	background: none;
	color: blue;
	text-decoration: underline;
	cursor: pointer;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.eoLink {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

.disabled-link {
	pointer-events: none;
	color: gray;
	text-decoration: none;
	cursor: not-allowed;
}

/* Product listing css */
.clickablecard {
	border-radius:10px;
	border-style: solid;
	border-color: lightgrey;
	border-width: 1px;
	background-color: white;
}

.clickablecard:hover{
	/* box-shadow: 2px 2px 2px 2px lightblue; */
	box-shadow: 3px 3px 10px lightgrey;
	background-color: rgb(252, 252, 252);
}

.clickablecard:active {
	box-shadow: 0px 0px 10px lightgrey;
	transform: translateY(4px);
}

/* Nav bar css */
.eoNavbar{
	background-color: #2597BA;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	padding-right: 10px;
}

.eonavbarbottom {
	padding-left: 30px;
	padding-right: 30px;
}

.eonavbartop {
	padding-left: 30px;
	padding-right: 30px;
	height: 5px;
}

.eofloatright {
	float: right;
}

.eofloatleft {
	float: left;
}

.eoNavlink {
	color: white !important;
}

.eoNavitem {
	color: white !important;
}

.eoNavlink:hover,
.eoNavitem:hover {
	background: #3AB3D8;;
	box-shadow: 2px 2px 5px #1A5364;
	color: rgb(241, 241, 241) !important;
}

.eoNavdropdown {
	background: #2597BA;
	border-radius: 0px;
	padding: 1px;
}

.eoFooter {
	background-color: #2597BA;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: center;
	color: white !important;
	position: fixed;
	left:0;
	bottom: 0;
	width: 100%;
}

.eosmall {
	transform: scale(0.8, 0.8);
	-ms-transform: scale(0.8, 0.8); /* IE 9 */
	-webkit-transform: scale(0.8, 0.8); /* Safari and Chrome */
	-o-transform: scale(0.8, 0.8); /* Opera */
	-moz-transform: scale(0.8, 0.8); /* Firefox */
  }

.close-icon > i{
	opacity: 0.5;
	cursor: pointer;
	transition: 0.5s;
	transition-timing-function: cubic-bezier(0.1, 0.7, 0.5, 1);
}

.close-icon:hover > i {
	color:indianred;
	opacity: 1;
	cursor: pointer;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

.accordion-button:not(.collapsed) {
	color: black;
	background-color: #ffffff;
}

.table > tbody > tr > td {
	vertical-align: middle;
}

pre {
	font-size: inherit;
	color: inherit;
	border: initial;
	padding: initial;
	font-family: inherit;
}

body.modal-open { 
	overflow: visible !important; 
}

.sales_stage_999 {
	color: red;
}

.sales_stage_101 {
	color: blue;
}

.sales_stage_104 {
	color: green;
}

.sales_stage_777 {
	color: purple;
}


.filename-text{
	cursor: pointer;
}

.image-number{
	position: absolute;
	font-size: 2rem;
	color:#1A5364;
	top:0;
	left:0;
	margin: 0 0 0 1rem;
	-webkit-filter: invert(100%);
    filter: invert(100%);
}

.ui-sortable-handle{
	cursor: grab;
}

.unsortable{
	cursor: not-allowed;
}

.fa-square-minus{
	cursor: pointer !important;
	color: red;
	font-size: 20px;
}

.fa-square-plus{
	cursor: pointer !important;
	color:#2597BA;
	font-size: 20px;
}

#images-to-upload{
	background-color: #d8d8d854;
}

.error{
	color: red;
}

.banner-card{
	cursor: pointer;
}

.inventory-table > .row:first-child{
	font-weight: 600;
	color: #232323;
}

.inventory-table .row:not(:first-child):hover{
	background-color: #f2f2f2;
}

.inventory-table .col{
	max-width: 122px;
}

.media-based-hide {
	display: none;
}

.media-based-show {
	display: inherit;
}

@media handheld, (max-width: 420px) and (max-height: 920px) {
	.dropdown-menu {
		max-height: 250px;
		overflow-y: scroll;
	}

	.media-based-hide {
		display: block;
	}

	.media-based-show {
		display: none;
	}
}

@media all and (min-width: 1122px) {
	.dropdown-menu li{ 
		position: relative; 	
	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	
	.dropdown-menu > li:hover{ 
		background-color: #3AB3D8;
		box-shadow: 2px 2px 5px #1A5364;
		color: rgb(241, 241, 241) !important; 
	}
	
	.dropdown-menu > li:hover > .submenu{ 
		display: block; 
	}
}	

@media (max-width: 991px) {
	.dropdown-menu .dropdown-menu{
		margin-left:0.7rem; 
		margin-right:0.7rem; 
		margin-bottom: .5rem;
	}
}

.modal {
	overflow: hidden;
}

.dashboard-box {
	padding:10px;
	border-radius: 5px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

.paystatusgreen {
	height: 15px;
	width: 15px;
	background-color: green;
	border-radius: 50%;
	display: inline-block;
  }

.paystatusyellow {
	height: 15px;
	width: 15px;
	background-color: yellow;
	border-radius: 50%;
	display: inline-block;
  }

.paystatusorange {
	height: 15px;
	width: 15px;
	background-color: orange;
	border-radius: 50%;
	display: inline-block;
  }

.paystatusred {
	height: 15px;
	width: 15px;
	background-color: red;
	border-radius: 50%;
	display: inline-block;
  }

.paystatusgrey {
	height: 15px;
	width: 15px;
	background-color: grey;
	border-radius: 50%;
	display: inline-block;
  }

.paystatuscyan {
	height: 15px;
	width: 15px;
	background-color: cyan;
	border-radius: 50%;
	display: inline-block;
  }

.ms-choice {
	border: 0px;
}

.ms-choice div {
	display: none;
}

.ms-choice .placeholder {
	display: none;
}



.loading {
	--speed-of-animation: 0.9s;
	--gap: 6px;
	--first-color: #4c86f9;
	--second-color: #49a84c;
	--third-color: #f6bb02;
	--fourth-color: #f6bb02;
	--fifth-color: #2196f3;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	gap: 6px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
   }
   
   .loading span {
	width: 4px;
	height: 50px;
	background: var(--first-color);
	animation: scale var(--speed-of-animation) ease-in-out infinite;
   }
   
   .loading span:nth-child(2) {
	background: var(--second-color);
	animation-delay: -0.8s;
   }
   
   .loading span:nth-child(3) {
	background: var(--third-color);
	animation-delay: -0.7s;
   }
   
   .loading span:nth-child(4) {
	background: var(--fourth-color);
	animation-delay: -0.6s;
   }
   
   .loading span:nth-child(5) {
	background: var(--fifth-color);
	animation-delay: -0.5s;
   }
   
   @keyframes scale {
	0%, 40%, 100% {
	 transform: scaleY(0.05);
	}
   
	20% {
	 transform: scaleY(1);
	}
}

table {
	font-size: 95%;

	thead {
		font-weight: bold;
	}
}

#modal_ekyc_view_files .modal-body img{
	max-width: 500px;
	max-height: 600px;
	object-fit: contain;
}

#combined_log_table{
	max-height: 600px;
}