/*--Style: normal, Weight: Light---*/
@font-face {
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: lighter;
  src: url('../fonts/OpenSans-Light.ttf');
  }
/*--Style: normal, Weight: normal---*/
@font-face {
  font-family: 'OpenSans';
  font-style:  normal;
  font-weight: normal;
  src: url('../fonts/OpenSans-Regular.ttf');
  }
/*--Style: normal, Weight: semibold---*/
@font-face {
  font-family: 'OpenSans';
  font-style:  normal;
  font-weight: 600;
  src: url('../fonts/OpenSans-Semibold.ttf');
  }
  
/*--Style: normal, Weight: bold---*/
@font-face {
  font-family: 'OpenSans';
  font-style:  normal;
  font-weight: bold;
  src: url('../fonts/OpenSans-Bold.ttf');
  }
/*--Style: italic, Weight: Light---*/
@font-face {
  font-family: 'OpenSans';
  font-style: italic;
  font-weight: lighter;
  src: url('../fonts/OpenSans-LightItalic.ttf');
  }
/*--Style: italic, Weight: normal---*/
@font-face {
  font-family: 'OpenSans';
  font-style:  italic;
  font-weight: normal;
  src: url('../fonts/OpenSans-RegularItalic.ttf');
  }
/*--Style: italic, Weight: Semibold---*/
@font-face {
  font-family: 'OpenSans';
  font-style:  italic;
  font-weight: 600;
  src: url('../fonts/OpenSans-SemiboldItalic.ttf');
  }
/*--Style: italic, Weight: bold---*/
@font-face {
  font-family: 'OpenSans';
  font-style:  italic;
  font-weight: bold;
  src: url('../fonts/OpenSans-BoldItalic.ttf');
  } 

  
:root{

--action-group-width: 50px;

--menu-bar-width: 312px;
--in-color: #64c897;	
--out-color: hsl(0 100% 45% / 1);
/* blue */
 --sostachi-be-0:transparent;
 --sostachi-be-1:hsl(219deg 79% 9%);  
 --sostachi-be-2:hsl(219deg 79% 66%);
 --sostachi-be-3:hsl(219deg 79% 74%);
 --sostachi-be-4:hsl(219deg 79% 82%);
 --sostachi-be-5:hsl(219deg 79% 90%); 
 --sostachi-be-6:hsl(219deg 79% 98%);  
 --sostachi-be-65:hsl(219deg 79% 99%);   
 --sostachi-be-7:hsl(219deg 79% 100%);   
 
 --sostachi-outline-width: 2px;
 --sostachi-max-width: 376px;
 --sostachi-be-alpha-1:hsl(219deg 79% 9%/.2);  
 --sostachi-be-alpha-2:hsl(219deg 79% 66%/.2);
 --sostachi-be-alpha-3:hsl(219deg 79% 74%/.2);
 --sostachi-be-alpha-4:hsl(219deg 79% 82%/.2);
 --sostachi-be-alpha-5:hsl(219deg 79% 90%/.2); 
 --sostachi-be-alpha-6:hsl(219deg 79% 98%/.2);  
 --sostachi-be-alpha-65:hsl(219deg 79% 98%/.2);  
 --sostachi-be-alpha-7:hsl(219deg 79% 100%/.2);   
 --sostachi-toggle-on:inset 2px 2px 3px rgb(0 0 0 / 20%);
 
 --label-width: 120px;
 --sostachi-input-border-width: 2px;
 --top-bar-height:40px;
 --menu-bar-height:40px;
 --header-height: 50px;
 --footer-height: 50px;
 --search-box-height: 65px;
 --date-range-box-height:65px;
 --num-key-width:30.5%;
 --num-key-gap: 4px;
 --body-header-height:50px;
 
 --profile-dim:120px; 
 --selected-color: var(--sostachi-be-alpha-2);
 --exchange-rate-panel-width: 420px;
 
}
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, fTr, hDr, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea, input, a.btn, select, datalist, list, button, span {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:   OpenSans, 'segoe ui',sans-serif;
	font-weight: normal;
	box-sizing: border-box;
	line-height: 1.5;
	box-sizing: border-box;
	-moz-osx-font-smoothing: greyscale;
	-webkit-font-smoothing: antialiased;
	font-smooth: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	 color: var(--sostachi-be-1);
	font-size: 15px;
	font-weight: 600;

}
svg{
	flex-shrink:0;
}
 b{
	font-weight: bold;
 }

::placeholder{
	text-overflow:ellipsis; 
}

sub,sup {
    font-size: .7em; 
    margin-left: 1px;
	padding-top: 4px;
	color: darkslategray;
}
sup{
	margin-top: -3px;
	margin-left:1px;
} 

 
/*---------sostachi input ----------*/
 
.inputs,
.drop-down,
.form.exchange-rates span.currency{
	outline: var(--sostachi-outline-width) solid var(--sostachi-be-0);
    border: none;
    border: var(--sostachi-input-border-width) solid hsl(204deg 26% 79%);
    background-color: var(--sostachi-be-7);
    padding: 0 12px;
    transition: height .1s;
    min-height: 40px;
    height: 40px;
    padding: 6px 12px; 
  	display:block; 
  	border-radius: 1px;
  	max-width: 165px;
  	flex:1;
	text-overflow:ellipsis; 
	flex-shrink:0;
}
.inputs[type=number]{
	text-align:right;
	max-width:130px;
}
#inAmount {
    text-align: center;
    font-weight: bold;
    transition: all .2s ease;
    color: #301b2d;
    font-size: 36px;
    max-width: unset;
    height: 68px;
    width: 100%;
}
.c-group.screen {
    flex-direction: column;
	padding:12px;
	background-color: var(--sostachi-be-0);
}
#inAmount.highlight{ 
	border-right: 2px solid orange;
	border-top: 2px solid orange;
}
.search-box > .inputs{
	max-width: 270px;
}
.inputs:focus,
.drop-down:focus{
	 outline-color:var(--sostachi-be-3);
	 border-color:var(--sostachi-be-3);
} 
 
.drop-down{
	background-color: var(--sostachi-be-5);
	transition:none;
	min-width:110px;
} 
.drop-down:hover{
	background-color: var(--sostachi-be-6);
} 
textarea.inputs{
	min-height: 60px;
}

.lbl{
	    /* font-weight: bold; */
    color: var(--sostachi-be-1);
    letter-spacing: .5px;
    flex-shrink: 0;
    width: var(--label-width);
    justify-content: left;
    display: flex;
    gap: 3px;
}.lbl svg{
	 
    flex-shrink: 0;
	fill:grey;
}
.lbl:after{
	content:":";
}
.c-group{
	display:flex;
	justify-content:left;
	align-items:center;
	background: var(--sostachi-be-7);
	background: var(--sostachi-be-0);
	
	width: 100%; 
	padding:3px;  
	overflow:hidden;
	position:relative;
 
}
.btn-group {
	display:flex;
	justify-content:space-evenly;
	align-items:center;

}
.absolute{
	position: absolute;
}
#scripture {
	position: fixed;
	bottom: unset;
	left: 0;
	top: 0%;
	right: 0;
	  margin: auto;  
	display: block;
	height: fit-content;
	width: 332px;
	color: whitesmoke;
	font-size: 16px;
	padding: 12px;
	user-select:text;
}	
 
.l-item.selected .cols{ 
	/* background-color: var(--sostachi-be-0) !important;  */
}
.selected svg{
	fill:  var(--sostachi-be-2) !important;
}
/*---- sostachi -btn---------- */
.btn{ 
    padding: 6px 10px; 
    border-radius: 1px;
    background: var(--sostachi-be-0);
  	white-space: nowrap; 
  	display: flex;	
    align-items: center;
    justify-content: center;
  	flex-wrap: nowrap;
  	gap: 3px;
    overflow: hidden;
    min-height: 40px;
    min-width: 40px;
    height: 40px;
	  color: var(--sostachi-be-1);
    fill: var(--sostachi-be-1);
	transition: all .1s ease-out; 
	/* font-weight: bold; */
	flex-shrink:0;
	text-transform:uppercase;  
	user-select:none;
 
}

.hoverable:hover{
	background-color: var(--sostachi-be-6) !important;
	opacity: 1 !important;
}


   
.btn.primary:hover{
	background-color: var(--sostachi-be-3) !important;  
	box-shadow: 0 1px 2px 2px var(--sostachi-be-alpha-4);
	
}


 .selected,
.btn.toggle-on{
	background-color: var(--sostachi-be-5) !important;
	color:  var(--sostachi-be-2) !important;
	border-color:  var(--sostachi-be-2) !important;
	
	
}
.btn.toggle-on{
	background:red !important;
	
	
}
.selected:hover{
	
	background-color: var(--sostachi-be-5) !important;
}
.selected:hover  .cols{
	
}
.hDr .btn{
	justify-content:left;
}
.btn.focused{
	background:red;
} 

.num-screen {
	text-align: center;
    font-weight: bold;
    transition: all .2s ease;
    color: #301b2d; 
    font-size: 28px;
    height: 98%;
    /* flex: 1; */
    height: 60px;
    border: 3px solid #333333;
    max-width: unset;
	padding: 0 3px;
}

.numpad-calcs.panel > .hDr,
.numpad-calcs2.panel > .hDr{
	height: 100px;
}

.numpad-calcs.content.list-view ,
.numpad-calcs2.content.list-view {
	--header-height: 100px;
}
.list-view.numpad-calcs .group,
.list-view.numpad-calcs2 .group{
	display: flex;
    flex-wrap: wrap;
	overflow:hidden;
	height: 100%;
	gap: var(--num-key-gap);
	margin: 0;
} 

.list-view.numpad-calcs .grp1,
.list-view.numpad-calcs2 .grp1{
	width:75%;
}
.list-view.numpad-calcs .grp2,
.list-view.numpad-calcs2 .grp2{
	width: 25%; 
}
.list-view.numpad-calcs .grp2 .num-key,
.list-view.numpad-calcs2 .grp2 .num-key{
	width: 100%; 
}
.list-view.numpad-calcs,
.list-view.numpad-calcs2{
	gap:0;
}
.btn.num-key{
	 width: var(--num-key-width);
	 background: var(--sostachi-be-alpha-7);
	 /* margin: .5%; */
	 /* flex-shrink:0; */
	 flex-grow:1; 
	 height:24%;
	 box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
	 font-weight: bold;
	 font-size: 30px;
	 background-color: var(--sostachi-be-7);
 }
 .transactions .btn.num-key{
	 margin: .5%; 
	 
 }
 
 .btn.clear{
	 width: calc(97% - var(--num-key-width));
	 width: var(--num-key-width);
	 font-size: 18px;
	 background-color:red;
 } 
  .btn.num-key:hover{
	 background-color: var(--sostachi-be-5);
	 
 }
.btn svg{
   
    fill: var(--sostachi-be-1); 
	height: 90%;
	min-width: 20px;
	min-width: 20px;
	min-height: 20px;  
}
.btn.search:after{
	content:"";
}

.btn.toggle-on{
	box-shadow: var(--sostachi-toggle-on);
}
.btn.primary{
	background-color: var(--sostachi-be-2);
	color:var(--sostachi-be-7);
	/*  */
}
.btn.primary svg{
   
    fill: var(--sostachi-be-7);
	
}
.btn.secondary{
	background-color: var(--sostachi-be-5);
} 
.btn.tertiary{

	color: var(--sostachi-be-2);
}

.btn.tertiary svg{ 
	fill: var(--sostachi-be-2);
}
   
.btn.primary:hover{
	background-color: var(--sostachi-be-2);  
	box-shadow: 0 1px 2px 2px var(--sostachi-be-alpha-4);
	
}
.btn.secondary:hover{
	background-color: var(--sostachi-be-5);
	
}
.btn.tertiary:hover{
	background-color: var(--sostachi-be-65);
	
}
 .btn.toggle-on:hover{
	box-shadow: var(--sostachi-toggle-on);
}

.btn.new{
	display:none;
}
.btn.new.absolute {
    bottom: 20px;
    right: 20px;
    display: flex;
}
.btn.minimize,
.btn.maximize{
	display:none;
	padding:0;
	min-width:0;
}

.popup.maximized .btn.maximize svg {
    transform: rotate(90deg);
}
.btn.primary.sell{
	background: var(--in-color);
	background:  #1ccd1c;
 
	color:var(--sostachi-be-1);
}
 .btn.primary.sell svg{
	margin-left:3px;
}
 .btn.cols{
	border-radius: 0px;
	min-height: 0;
	border-color: whitesmoke;
	visibility:visible;
 }
 .btn.submit{
	min-width: 120px;
	
 } 
 
 
 .withdrawals .btn.submit,
 .deposits .btn.submit,{
	min-width: 120px;
	margin-left: 18%; 
	margin-top: 15px;
 }
 
 .btn.toggle-lv-view{
	margin-left: auto;
 }
 
/* ---- checkbox ---------*/
.check-box{
	min-width: 24px;
	min-height: 24px;
	width: 24px;
	height: 24px;
	border-radius: 3px;
	border: var(--sostachi-input-border-width) solid var(--sostachi-be-)
}
/*----- POPUP elements ---- */
 .top-bar{
	display:flex;
	justify-content: left;
	align-items:center;
	padding: 3px 6px;
	min-height:var(--top-bar-height);
	height: var(--top-bar-height);
	overflow:hidden;
	cursor:default;
 } 
 .top-bar .app-logo-icon{
	height: 90%;
	width: auto;
 }  
 .top-bar .app-logo-icon .btn-group{
	width: 100px;
	max-width: 100px;
 } 
 .m-item,
 .l-item,
 .c-item{
	display:flex; 
	justify-content:left;
	align-items:center;  
	flex-shrink:0;
 }
  .m-item,
  .c-item{
	cursor:default;
	text-decoration:none;
	flex:1;
	padding:3px 12px; 
	max-height:50px;
	font-size: 18px;
	gap:12px;  
 
 }  
 
 
 .m-item svg{
	 height: 80%;
 } 
 		/* Hiding scrollbar for Chrome, Safari and Opera */
	body>.menu-bar::-webkit-scrollbar {
		/* display: none; */
	}

	/* Hiding scrollbar for IE, Edge and Firefox */
	body>.menu-bar{
	  scrollbar-width: none;  /* Firefox */
	  -ms-overflow-style: none;  /* IE and Edge */
	}
	 
 .menu-bar{
	
	z-index:100;
	display:flex;
	justify-content:stretch;
	align-items:stretch;
	height: var(--menu-bar-height);
	width: 100%;
	cursor:default;
	transition: all .05s ease-in;
	overflow:auto;
 }
.menu-bar.in{
	transform:translateX(0%);
 
}


body > .hDr{
	padding:auto 12px;
	background:var(--sostachi-be-7);
	align-items:center;
	display:flex; 
	height: var(--body-header-height);
	justify-content:left;
    box-shadow: 0 1px 1px rgb(0 0 0 / 3%);
} 
body > .hDr .btn.shift{
	margin-left: auto;
	margin-right: 7px;
} 
 

body > .hDr .title2{
	visibility: visible;
    display: flex;
    align-items: center;
    color: #94117e;  
	font-weight: bold;
	height: 100%;
	white-space:nowrap;
	font-size:14px;
	display:none;
}
body > .hDr .title2.hide{
	visibility:hidden;
	display:none;
}
body > .hDr .title2 svg{
	margin-top:4px;
}
body> .hDr span {
    font-size: 20px;
	text-transform:uppercase;
	cursor:pointer
}
body> .menu-bar{
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	transform:translateX(-110%);
	flex-direction:column;
	height: 100%;
	width: var(--menu-bar-width); 
	background: var(--sostachi-be-2);
	padding:24px 0;
	padding-top:0;
	box-shadow:0px 1px 3px rgba(0,0,0,0.2);
 }
 body> .menu-bar .btn-group{ 
	justify-content:right;
	justify-content: space-between;
 }
 .btn.refresh-app{
	opacity:.5;
 }
 body> .menu-bar .btn-group svg{
	fill: white;
 }
 body> .menu-bar .m-item{
	color: var(--sostachi-be-6);
	    padding: 10px 50px;
		gap: 12px;
		white-space:nowrap;
		min-height:48px;
		position:relative;
 } 
 body> .menu-bar .line{
		/* margin-bottom: 24px */
		margin: 12px auto;
		border-bottom: 1px solid var(--sostachi-be-4);
		user-select:none
		box-shadow:none;
		width: 80%;
		pointer-events:none;
 } 
 
 
 body> .menu-bar>.m-item svg{
	fill: var(--sostachi-be-6);
	height: 24px;
 }
  body> .menu-bar>.m-item:hover{
	color: var(--sostachi-be-6);
	background: var(--sostachi-be-2);
	color: var(--sostachi-be-2);
 }  
 body> .menu-bar>.m-item:hover svg{
	fill: var(--sostachi-be-6);
	fill: var(--sostachi-be-2);
 } 
 body> .menu-bar>.profile-pic{
     background: var(--sostachi-be-alpha-0);
    padding: 3px;
    position: relative;
    height: 253px;
    overflow: hidden;
    flex-shrink: 0;
    top: 0;
    background: var(--sostachi-be-2) !important;
    z-index: 100;
    position: sticky;
    margin-top: -40px;
    padding-top: 30px;
 
 }  
 body> .menu-bar>.profile-pic .username {
  font-weight: bold;
  color:lightgreen;
  padding:6px;
}
 body> .menu-bar>.btn-group  {
	z-index: 102;
	position: sticky;
	top:0;
}

body> .menu-bar.scroll-started > .profile-pic{
	box-shadow:0 2px 12px rgb(0 0 0 / 20%);
	border-bottom:1px solid var(--sostachi-be-3);
	
}
body> .menu-bar>.profile-pic .role {
    width: 100%;
    font-size: 0.8em;
    text-align: center;
 
       color: beige;
}
 body> .menu-bar>.profile-pic:hover img{
	background: var(--sostachi-be-5);
 }
 .docked{
	height: calc(100% - var(--body-header-height));
	/* z-index:-1; */
	/* padding: 24px; */
 }    
 .form.transactions.docked{
	/* padding: 0; */
	border:1px solid hsl(0 0% 94% / 1);
	border-top:none;
	border-bottom:none;
	margin-top:3px;
	max-width: 550px;
	padding:0;
	gap:0;
 }   
 .form.transactions {
   --label-width: 50px;
   
 }    
 .form.transactions  .drop-down{
	min-width: 0;
 }   
 .docked>.top-bar{
	display:none;
 }  
 .btn.log-out {
	color: white;
	background: red;
 }
 .btn.log-out{
	background-color: red;
	color:pink;
	margin-top:20px;  
	bottom:5px; 
	width: 90%; 
	margin: auto;
}

.btn.maximize,
.btn.close{
	display:none;
	margin-left: auto;
}
.btn.back{
	display:flex;
}
   .btn.shift.close{
		/* background: var(--s); */
		display:flex;
		color: red;
		max-width: 295px;
		font-weight: bold;
   }
 .btn.log-out:hover,
 .btn.close-shift:hover{
	
	box-shadow:0 1px 12px rgba(255,0,0,0.2);
	
 }
  body> .menu-bar>.btn.log-out{
	
	margin: auto;
	margin-top: 10%;
	width: 80%;
	
 }  
  
 body> .form,
 body> .panel{
	background: #fafafa; 
	width: 100%; 
	 
 }

 
 .popup,body{
	box-shadow: 0 1px 12px var(--sostachi-be-2);
	position: absolute;
	/*max-height: 85vh;*/
	overflow:hidden;
	/* background:var(--sostachi-be-7); */
	/* filter:grayscale(70%); */

	height: 100%;
	width:100%;
	left: 0;
    top: 0;
    bottom: 0;
    right: 0; 
 }
 
body{ 
	display:flex;
	flex-wrap: wrap; 	
	align-content: flex-start;
	gap:0;
	box-shadow:none;
	padding: 0;
	background: #fafafa;
	--panel-width: calc(100% - var(--menu-bar-width));
	user-select:none;
}
 
 .form,
 .panel{
	display:flex;	
	flex-direction:column;
	flex-shrink:0;
	position:relative; 
 }
 .panel{ 
	width: var(--panel-width);
 }
 
 .form{ 
	/* background-color: var(--sostachi-be-4); */
 }
 
 body.login{
	background:var(--sostachi-be-3);
 }
 .form.logins{
	height: fit-content;
	margin: auto;
	--label-width: 120px;
	
 }  
 .form.logins .content{
	justify-content:center; 
	padding-top: 50px;
 }  
 .form.logins h2{
	font-size: 24px;
	padding:0 24px;
	font-weight: bold;
	margin-bottom: 24px;
 } 
 .form.logins .top-bar{
	display:none;
 }
 .form.transactions >.fTr{
	justify-content:space-between; 
	border-color: var(--sostachi-be-0);
	padding:0;
	gap:.1%;
	--footer-height: 65px;
	min-height: 63px;
 }  
 .form.transactions >.fTr .btn{
	 width: var(--num-key-width);
	 font-size: 20px;
	 font-weight: bold;
	 height: 100%;
	 margin:.5%;
	 min-width:unset;
 }  
  
 .form.transactions >.hDr .opened-at{
	display:flex;
	align-items:left;
	justify-content:left; 
	color: grey;
	flex-direction:column;
 }
.form.transactions >.content.open-shift{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap: 24px;
	justify-content:center;
	height: 100%;
}
 .form.transactions >.open-shift  h1{
	font-size: 2em;
	font-weight: bold;
	color: Orange;
	text-align:center;
 } 
 .profile-pic{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction: column;
 }
 .profile-pic .btn.camera{
	display:none;
 } 
 .profile-pic img{
	background: var(--sostachi-be-6);
	height:100%;

	border-radius: 100%;
	width: var(--profile-dim);
	width: auto;
	object-fit: cover; 
	flex-shrink: 0;
	padding: 2px;
	width: 80px;
	height: 80px;
	object-fit:contain;
 }
 .form.users .profile-pic{
	flex-direction:column;
 }
 .customers .profile-pic{
	height: 100px;
 }
 .customers .profile-pic svg{
	height: 100%;
    width: 100px;
    fill: var(--sostachi-be-0);
    border: 1px solid grey;
 }

 .search-box.form,
 .date-range-box.form{
	flex-direction:row;
	padding: 0 12px; 
	background: var(--sostachi-be-0);
	border-bottom: 1px solid whitesmoke;
 }  
.search-box.form{
	justify-content:flex-end;
    gap: 10px;
    /* padding-left: 35px; */
 }
  
 .date-range-box .from  .lbl,
 .date-range-box .to .lbl{
	text-align:left;
	padding-right: 5px;
 }  
 .date-range-box .btn.refresh{
	display:none;
 } 
 .date-range-box.expanded .btn.refresh{
	display:flex;
 } 
 .search-box.form .field-to-lookup{
	min-width:100px;
	display:none;
 }
 
 .top-bar,
 .hDr,
 .search-box, 
 .fTr{
 	display:flex;
	justify-content:space-between;
	align-items:center;
	width: 100%;
	/* gap:1%; */ 
 } 
  .form .fTr{
  padding: 12px;
 } 
 .hDr {
 	height: var(--header-height);
	overflow:hidden;
 }
  .form>.hDr,
  .panel>.hDr{
      padding: 0px 8px;
    justify-content: left;
    display: flex;
    align-items: center; 
  } 
  .form>.hDr{
      padding: 0px 24px;
     
  }
 .hDr .search-box{
 	  flex: 1;
	  width: fit-content;
 }  
.panel> .fTr{
 	height: var(--footer-height);
	
	border-top: 1px solid silver;
	justify-content:space-between;
	padding: 0 12px;
 } 
 .fTr .btn.submit{
	margin-left: auto;
 }
 
  .fTr .btn.new{
	margin-left: auto;
 }
  .fTr .btn.new{
	display:flex;
	margin-left: auto;
 }
 
 
 .hDr .btn-group,
 .hDr .btn.new{
 	margin-left: auto;
 }
 
 .count-screen,
 .fTr-count-screen{
	background-color:var(--sostachi-be-6);
	padding: 3px 14px;
	border-radius: 12px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-right: 12px;
 }
 .fTr-count-screen{
	 font-size: 12px;
 } 
 .fTr-count-screen:before{
	 content: 'Count:';
    font-size: .9em;
    color: grey;
    margin-right: 3px; 
 }
 
  .verb-screen, 
  .title{
  
	align-items:center;
	font-size: 24px;
	font-weight: bold;
	gap: 5px;
 }   
 .verb-screen{
	margin-right: 6px;
	color: var(--sostachi-be-2);
  }   
 .panel .hDr .title{
	/* text-transform: uppercase; */
	white-space: nowrap;
	font-size: 20px;
 }  
 
 .title *{
	font-size: 24px;
	
  } 
 .verb-screen{
 
	display:flex; 
	align-items:center;
	font-size: 24px;
 } 
 
 
 .content.form-view,
 .content.list-view,
 iframe.content{ 
 	display:flex; 
	width: 100%; 
	flex-direction:column;
	overflow-y:auto;
	position: relative;
	min-height: 50px;
	padding: 12px; 
	overflow-x:hidden;
	
	--menu-bar-height:0;
	/*height: calc(100% - (var(--top-bar-height) + var(--header-height) + var(--footer-height) + var(--search-box-height) + var(--date-range-box-height) + var(--menu-bar-height)));*/
	flex:1;
	align-content:flex-start;  
 } 
 
 .content.list-view{ 
 
    overflow-x: hidden;
	flex-direction:unset;
	padding:0;
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 20%);
 
	
 }
 .panel{
	overflow:auto;
 }
 .content.form-view > .c-group{
	margin: 3px 0;
	padding: 12px;
	padding: 3px 12px;
	flex-shrink: 0;
 }
.popup{
	
	position: absolute;
	max-height: 100%;
	max-width:100%;
	backdrop-filter:blur(100px); 
	transition: opacity .01s ease-in-out;
}
 
 .popup.maximized{
	box-shadow: none  !important;
	max-height: unset !important;
	max-width: unset !important;
	width: 100% !important;
	height: 100% !important;
	transform:none !important;
 }
 .popup.minimized{
	
	box-shadow: none;
	min-height: unset !important;
	min-width: unset !important;
	width: 100% !important;
	height: var(--top-bar-height) !important;
	width:100px !important;
	
 }
 .popup.active{
	 filter:grayscale(100%);
 }
 
 /*------- LIST-VIEW ---------*/
  .txt3{
    font-size: .8em;
    color: grey;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 4px;
    padding: 6px;
    width: 58%;
    font-weight: normal;
}
  .txt3 svg{
     height:18px;
	 width: 18px;
	 fill: grey;
}

  .list-view { 
	padding: 0;
	flex-direction:unset;
	flex-wrap: wrap; 
  }  
  .list-view .cols { 
	
	display:flex;
	justify-content:left;
	align-items:center;
	flex-shrink:0;
	padding:10px;
	height: 100%; 
	border-right: 1px solid whitesmoke;
  }
  
  .list-view.icon .cols { 
	
	 height: fit-content;
	 
  } 
  
  .list-view.icon .last-updated-by, 
  .list-view.icon .datetime-recorded, 
  .list-view.icon .recorded-by{
  
	color: silver;
	bottom:12px;
  }
  .recorded-by:before{
	content:"~";
	font-size: .9em;
	margin-right: 3px;
  }
 .l-item .cols{
	/* background-color: white; */
	cursor:default;
}

.l-item,
.list-view .hDr{ 
	width: 100%;
	min-height: 40px; 
	border: 1px solid var(--sostachi-be-0);
	border-bottom-color:whitesmoke;

	
} 
.l-item{
	position: relative;
	border-radius:1px;
	-webkit-transition: all .12s ease-in-out;
	-o-transition: all .12s ease-in-out;
	transition: all .12s ease-in-out;
	overflow:hidden;
	min-height: 72px;
	position:relative;
	border-bottom: 1px solid whitesmoke;
}
.list-view.shop-stocks .l-item,
.list-view.currencies .l-item{
	min-height: 60px;
}
.list-view.customer-loans .l-item{
	min-height: 120px;
}
 
.list-view .hDr{  
	
	position: sticky;
	/* border-top: 1px solid whitesmoke; */
	border-bottom: 1px solid white;
	box-shadow: 0 0 1px rgba(0,0,0,0.8);
	transition: all .2s ease;
	left: 0;
	right: 0;
	top: 0;
	background-color: white;
	z-index:1;
	border-left:none;
	border-right:none; 
}
.list-view .hDr>.cols{ 
	height: 100%;
	font-weight: bold; 
	cursor:pointer;
} 

.list-view .hDr .cols:nth-child(even),
.list-view .l-item .cols:nth-child(odd){
	/* background-color: #fafafa; */
}
.l-item >.action-group,
.l-item >.btn.more{
	margin-left: auto;
}
.list-view  .action-group .btn:hover >svg{
	fill:cornflowerblue;
 } 
  
 .list-view  .action-group .btn:hover.delete >svg{
	fill:red;
}
.list-view .group-hDr{
  padding-top:5px;
  padding-bottom:6px; 
  margin:0;
}

.list-view .group-hDr,
.list-view .group-fTr{
	 padding-left:12px;
	 display:flex;
	 width:100%;
	     align-items: center;
}

.list-view .group1{
	 padding:0 6px; 
	 margin: 6px;
}

 .list-view .group >.group-hDr,
 .list-view .group >.group-fTr{
	width:fit-content;
	display:inline-flex;
 }

.group-hDr .pill {
    padding: 5px 12px;
    overflow: hidden;
    border-radius: 24px;
    background-color: #f0d7f9;
    color: #94117e; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    min-height: 30px;
    min-width: 90px;
    overflow: hidden;
	font-size: 14px;
	white-space:nowrap;
	border-radius: 10px;
}
.list-view .group-hDr.group0 .pill {
    margin-left: 3%;
}
.list-view .group-hDr.group1 .pill {
	background: whitesmoke;
	color: var(--sostachi-be-2);
	margin-left: 5%;
}
.list-view .group-fTr.group0 { 
	margin-left: 3%;
}
.list-view .group-fTr.group0 { 
	margin-left: 3%;
}
.list-view .group-fTr.group1 {
    margin-left: 5%;
}
 .list-view .group-hDr.group1  .btn svg { 
	fill: var(--sostachi-be-2); 
}
  
.list-view .l-item.new *,
.list-view .l-item.updated * {
	font-weight: bold;
	
}
.list-view .l-item.scale-down{
	
	transform:scale(0);
	
}
.list-view .l-item.updated:before {
	content:"";
	width: 6px;
	height: 6px;
	border-radius:100%;
	position: absolute;
	top:6px;
	left:6px;
	font-weight: bold;
	font-style:italic;
	/* background-color: grey */
}
 
.list-view.scroll-started >.hDr {
	box-shadow: 0 1px 10px rgba(0,0,0,0.1);
	border-color: var(--sostachi-be-0);
}
 
 
.list-view > .hDr> .cols.sortable{ 
	cursor:pointer;
}
.list-view .hDr .cols.sort:before {
	content:url('../images/arrow-drop-up.svg');
	font-size:9.6px;
	position:absolute;
	top:0;
	right:0;
	bottom:0;	
	margin: auto;	
	color: grey;

	
}
.list-view .hDr .sort.desc:before{

	transform:rotate(180deg);
	
}
 
.list-view.icon .check-box {
	align-self:self-start;
} 
.list-view.icon.large .l-item {

	height: 220px;
}


.list-view.icon .l-item {
 
	display:flex;
	flex-direction:column;
	width: 20%;
	border-radius: 5px;
	margin: .5%;
	overflow:hidden;
	padding:12px;
	background-color: var(--sostachi-be-0);   
	box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    border-left: 3px solid #f0d7f9;
}
.list-view .action-group {
	display:flex;
	justify-content:center;
	align-items:center;
}

.list-view.borrowed-cash .action-group {
	
	gap: 6px;

	
}.list-view.icon .action-group {
	position: absolute;
	top:0;
	right:0;

	
}
.list-view.icon .l-item .cols{
 	width: 100%;
	justify-content:center;
	text-align:center;
	border:none;
	
}

 .list-view.icon .hDr .cols{
 	 visibility:hidden;
}
 
 
.list-view.icon.small .l-item {
  
	width: 19%;
	 
}
.list-view.icon.medium .l-item {
	width: 32.33%;
 
}
.list-view.icon.large .l-item {
	width: 49%;
 
}

 .list-view.icon .HDr{
 
	width: 100%;
 }
 
 .list-view.icon .HDr> .cols{
	visibility:hidden;
 }
 
.group-hDr.collapsed{
  margin-right:unset;
  width:50%;
}

.list-view .group-fTr {
   
  width:100%;
}

 
.list-view .group-hDr .pill:after{
	content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="silver"%3E%3Cpath d="M12 8l-6 6 1.41 1.41 4.59-4.58 4.59 4.58 1.41-1.41z" stroke="none"/%3E%3Cpath d="M0 0h24v24h-24z" fill="none"/%3E%3C/svg%3E'); 
	height: 23px;
	width: 24px; 
	 
}
.group.collapsed > .group-hDr .pill:after{
	content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="silver"%3E%3Cpath d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/%3E%3Cpath d="M0 0h24v24h-24z" fill="none"/%3E%3C/svg%3E');  
}

.list-view .group-hDr.collapsed .action-group .check-box{
	display:none;
}
 

.list-view .group .pill:hover{
	font-weight: bold;
	cursor:pointer;
}

.list-view .group.collapsed {
	overflow:hidden; 
	height:45px;
	flex-direction:row;
	align-items:center; 
}

.list-view .group.collapsed .pill
.list-view .group.collapsed>.record-count{
	padding:0 12px;
}
.list-view .group.collapsed > .group,
.list-view .group.collapsed > .l-item{
	display:none;
} 
  
/*------- list-view Currencies ------------*/

.list-view.currencies .col1{
	width: 60px;
	justify-content:center;
}
.list-view.currencies .col2{
	width: 100px; 
	justify-content:center;
}
.list-view.currencies .col3{
	width: calc(100% - (160px + var(--action-group-width))); 
}

/*-------list-view users ------------*/

.list-view.users .col1{
	width: 60px;
	justify-content:center;
}
 
.list-view.users .col2{
	width: calc(100% - (80px + var(--action-group-width))); 
}
  .list-view.users .col2 .has-active-shift{
	position: absolute;
	/* background-color: lightgreen; */
	color: var(--sostachi-be-7);
	border-radius: 12px;
	top: -1px;
	right: 6px;
	border-radius: 0;
	padding: 3px 5px;
	/* transform: rotate(-16deg); */
	justify-content: right;
	display: flex;
	/* padding-left: 20px; */
	border-radius: 0 0 3px 3px;
	/* box-shadow: 0px 1px 2px rgb(0 0 0 / 20%); */
	width: fit-content;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap: 6px;
	color: orange;
 }  
 .list-view.users .col2 .has-active-shift:before{
	content:'';
	 width: 12px;
	 height: 12px;
	 border-radius: 50%;
	 background-color: orange;
	
 }
.list-view.users .l-item .col2{
	flex-direction:column;
	align-items:flex-start;
}
 
/*-------list-view customers ------------*/
.list-view.customers .col1{
	width: calc(100% - var(--action-group-width));
	border:none;
	padding-bottom: 24px;
}
.list-view.customers .col2,
.list-view.customers .col3{
	display:none;
	width: 200px;
	justify-content:center;
}

 .list-view.customers .col3{
	color: red;
 } 
.list-view.customers .l-item .col1{
	flex-direction:column;
	align-items:flex-start;
}
.list-view.customers .l-item .col1 .customer-name{
	display:flex;
	align-items:center;
}
.list-view.customers .l-item .col1 .customer-name>svg{
	margin-right:6px;
	fill: grey;
}
.list-view.customers .col1 .c-group{
	 gap:3px;
}
 
.list-view.customers .col1 .deposits{
	width: 100%;
	
}
.list-view.customer-deposits .group-fTr{
	color: grey;
}
  
.list-view.customers .col1 .loans .nested-cols{
	color:red; 
}
 
/* .list-view.customers .l-item .col1 .c-group{
	display:none;
}
.list-view.customers .l-item .col1 .c-group{
	display:none;
} */
.list-view.customers .l-item .col1 .txt3{
	font-size: .8em;
	color: grey;
}
.list-view.customers.icon .col2:before{
	content:"Loan Limit:";
	margin-right:3px;
	color: grey;
	font-size:.9em;
}
/*-------list-view customer-loans ------------*/
.list-view.customer-loans .col1{
	width: calc(100% - (120px + var(--action-group-width))); 
} 
.list-view.customer-loans .col2{
	width: 120px;
	justify-content:center;
}  

.list-view.customer-loans .l-item { 
	border-top:2px solid whitesmoke;
}
.list-view.customer-loans .l-item .col1{
	display:flex;
	justify-content:left;
	white-space:nowrap;

}
.list-view.customer-loans .l-item .col2{
	display:flex;
	justify-content:left;

}
.list-view.customer-loans .l-item .col1 .txt3{
	font-size: .8em;
	color: grey;
}
.list-view.customer-loans.icon .col2{
	justify-content:left;
	color: red;
}
.list-view.customer-loans.icon .col2:before{
	content:"Loan:";
	margin-right:3px;
	color: grey;
	font-size:.9em;
}
  
/*-------list-view customer-deposits ------------*/
.list-view.customer-deposits .col1{
	width: calc(100% -  var(--action-group-width)); 
}
.list-view.customer-deposits .group-fTr,
.list-view.customer-loans .group-fTr{
	padding-left: 5%;
}
.list-view.customer-loans .group-fTr .cols,
.list-view.customer-deposits .group-fTr .cols{
	font-size: .8em;
	color: #94117e;
	font-style:normal;
	align-items: baseline;
}
.list-view.customer-deposits .group-fTr .cols sub,
.list-view.customer-deposits .group-fTr .cols sup{ 
	color: #94117e;
	
}
.list-view.customer-deposits .col2{
	width: 120px;
	justify-content:center;
	border-color: transparent;
} 

.list-view.customer-deposits .l-item .col1{
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	border-right:none;
}

.list-view.customer-deposits .l-item .col1>span{
	display:flex;
	justify-content:left;
	align-items:center;
	gap:6px;
	flex-direction: row;
}
 
.list-view.customer-deposits .l-item .col1 .txt3{
	font-size: .8em;
	color: grey;
}
.list-view.customer-deposits.icon .col2:before{
	content:"Deposit:";
	margin-right:3px;
	color: grey;
	font-size:.9em;
}
 
 

/*-------list-view float-balances ------------*/
.list-view.float-balances .col1{
	width: 120px;
}
.list-view.float-balances .col1 >svg{
	margin-right: 5px;
}
.list-view.float-balances .col2{
	
	width: calc(100% - 120px); 
	justify-content:center;
} 
 
 

/*-------list-view business-branches ------------*/

.list-view.business-branches .col1{
	width: 60px;
	justify-content:center;
}
 
.list-view.business-branches .col2{
	width: calc(100% - (60px + var(--action-group-width))); 
}
.list-view.business-branches .l-item .col2{
	flex-direction:column;
	align-items:flex-start;
	width:calc(100% - 196px);
	border: none; 
	justify-content: center;
}
.list-view.business-branches .cols.col3 {
	display: flex;
	flex-direction: column;
	justify-content: left;
	align-items: flex-start;
	width: 192px;
}

.list-view.business-branches .l-item .col2 .txt3{
	font-size: .8em;
	color: grey;
}
.list-view.business-branches .action-group{
	width: fit-content;
}
/*-------list-view transactions ------------*/

.list-view.transactions .col1,
.list-view.transactions .col3{
	--half: calc(var(--action-group-width) / 2);
	width: calc(44% - var(--half)); 
	flex-direction:column;
}
 .list-view.transactions .col2{
	justify-content:center;
	width:48px;
	
} 
 .list-view.transactions .col2 svg{ 
	flex-shrink:0;
	
} 
.list-view.transactions .col5{ 
	width: calc(100% - var(90px + 90px + 40px + 30px)); 
	flex-direction:column;
}  
.list-view.transactions .l-item .cols { 
	gap: 6px;
}
.list-view.transactions .l-item {
	margin-top:12px;
	width: 99%;
	margin-left:0.5%;
	height: 120px;
}
 
.list-view.transactions .l-item.sell,  
.list-view.transactions .l-item.withdrawn,
.list-view.transactions .l-item.deposit{
	border:1px solid transparent; 
} 
/*  */
.list-view.transactions .group .l-item:before{ 
    border-radius: 0;
    height: 28px;
    min-width: 27px;
    position: absolute;
    width: fit-content;
    top: 0;
    left: 0; 
	border: 1px solid grey; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 12px 0;
    padding: 0 3px;
	color:grey;
 } 
.list-view.transactions  .group .l-item:before{
	/* border-color: var(--in-color); */
	border-left:none;
	border-top:none; 
}
 
.list-view.transactions .withdrawn:after{
	content:'Withdrawal'; 
    background-color: lightgreen;
	color: black;
}
.list-view.transactions .deposit:after{
	content:'Deposit'; 
	background-color: orange;
	color: black;
}
.list-view.transactions .l-item.deposit:after{
	content:'Deposit'; 
	background-color: orange;
	color: black;
}
.list-view.transactions .l-item.requested:after{
	content:'Received'; 
	background-color: lightpink;
	color: black;
}
.list-view.transactions .l-item.transferred:after{
	content:'Given Out'; 
	background-color: var(--out-color);
	color: white;
}

.list-view.transactions .cols .amount{
	display: flex;
    justify-content: center; 
	white-space:pre-wrap;
	flex-wrap: nowrap;
	align-items:baseline;
	font-size: 18px;
	text-align: center;
}

.list-view.transactions  .amount .sub{
	 align-self: baseline;
}
.list-view.transactions .cols{
	display:flex;
	justify-content: center;
}
 .list-view.transactions .l-item.sell .gain,
 .list-view.transactions .deposit:after,
 .list-view.transactions .requested:after,
 .list-view.transactions .transferred:after,
 .list-view.transactions .withdrawn:after { 
	font-size: 18px; 
	padding: 0 6px;  
	border-radius: 0 0 3px 0;
	color: white;
    position: absolute;
	top:0;
    right:-12px;
	padding-right:12px; 
	display:flex;
	padding-right:20px;
    align-items: center; 
	justify-content:left;
}

.list-view.transactions .l-item.sell .gain{
	background: var(--in-color);
}
 .list-view.transactions .l-item.sell .gain sub{ 
	
	 color: whitesmoke;
	 margin-right: 12px;
}

 /*-------list-view exchange-rates ------------*/

 .list-view.exchange-rates0 .col1{
	 width: 30px;
	 font-size:18px;
	 
}
 
.list-view.exchange-rates0 .col1,
.list-view.exchange-rates0 .col3{
	 width: 90px;
	 flex-direction:column;
}

.list-view.exchange-rates0 .cols>svg{
	 margin-right: 3px;
}
 
 
.list-view.exchange-rates .col1{
	 width: 30px;
	 font-size:18px;
}
 
.list-view.exchange-rates .col2,
.list-view.exchange-rates .col4{
	 width: 90px;
}
.list-view.exchange-rates .cols{
	border:none;
}
 /*-------list-view user-groups ------------*/

.list-view.user-groups .col1 { 
	width: calc(100% - var(--action-group-width)); 
	background-color:white;
	min-height: 60px;
}
.list-view.user-groups .l-item .col1 { 
	flex-direction:column;
	align-items:start;
	
}
 
.list-view.user-groups .pill.group-type.admin,
.is-cash-account{
    display: inline-flex;
    border-radius: 12px;
    font-size: 12px;
}
.list-view.user-groups .pill.group-type,
.is-cash-account {
    background-color: lightgreen;
    color: green;
    transform: rotate(358deg);
    display: none;
    box-shadow: none;
    position: absolute;
    /* top: 0; */
    left: 50%;
    margin: auto;
    padding: 3px 12px;
    color: white;
	height: fit-content;
}

.panel.currencies .btn.exchange-rates{
	margin-right: auto;
}

 /*-------list-view nationalities------------*/

.list-view.nationalities .col1 { 
	width: calc(100% - var(--action-group-width)); 
	min-height: 60px;
 
} 

/*-------list-view postal-addresses ------------*/

.list-view.postal-addresses .col1 { 
	width: calc(100% - var(--action-group-width)); 
	min-height: 60px;
 
}
/*-------list-view postal-codes ------------*/

.list-view.postal-codes .col1 { 
	width: calc(100% - var(--action-group-width)); 
	min-height: 60px;
 
}
 /*-------list-view locations ------------*/

.list-view.locations  .col1{ 
	width: 60px;
	 justify-content:center;
}
.list-view.locations  .col1 svg{ 
	fill: grey;
	 
}
.list-view.locations  .col2{ 
	width: calc(100% - calc(60px + var(--action-group-width))); 
	min-height: 60px;
 
}
 
  /*-------list-view emails------------*/

.list-view.emails .col1 { 
	width: calc(100% - var(--action-group-width)); 
	background-color:white;
	min-height: 60px;
}
.list-view.emails .l-item .col1 { 
	flex-direction:column;
	align-items:start;
	
}
 
.list-view> .no-record {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 256px;
    height: 120px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    gap: 12px;
    background: radial-gradient(rgba(100,100,100,0.2), transparent 65%);
	opacity:.8;
} 
.list-view > .no-record .msg {
	color:gray;
	text-align:center;
	font-size: .8em;
} 
.list-view > .no-record svg {
	fill: gray;
} 


.list-view .group-fTr {
    font-size: 14.4px;
    color: grey;
    padding: 12px;
    font-style: italic;
    color: #94117e;
    display: flex;
	justify-content: left;
    align-items: center;
    width: fit-content;
	background: transparent;
}

.list-view .group-fTr {
    width: 100%;
}

.list-view .group-fTr {
    /* padding-left: 10%; */
} 
 .list-view .group-fTr .fTr-count-screen:before {
    content: "Count";
    color: silver;
    font-size: 12.8px;
    margin-right: 5px;
    color: #e7d1ef;
}


 
 
/*------------------------------*/
.search-box{
	min-height: var(--search-box-height);
	height: var(--search-box-height);
	justify-content:left;
	
}
.date-range-box {
	--label-width: 100px;
	display:flex;
	justify-content:space-evenly;
	align-items:center;
	padding:0 12px;
	height: var(--date-range-box-height);
	overflow:hidden;
	transition: all .2s ease-in-out;
	flex-wrap:wrap;
	justify-content:flex-start;
	width: 100%;
}

.date-range-box> .hDr,
.date-range-box >.fTr{
	width: fit-content;
	height:100%;
}
.date-range-box .fTr .btn{
	 
}
.date-range-box .fTr{
	justify-content:space-between;
	border:none;
}
.date-range-box .hDr{
	flex:1;
}

.date-range-box .c-group{
	display:none;
}
.date-range-box.expanded {
	height: 328px;
	margin-bottom: 12px;
	border-color: transparent;
}
.date-range-box.expanded .c-group {
	display:flex;
}
.date-range-box.expanded .hDr,
.date-range-box.expanded .fTr{
	width: 100%;
	height:var(--header-height);
}
 

.toast{
	position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 400;
	width:--webkit-fit-content;
	width:--moz-fit-content;
    width: fit-content;
	max-width: 80%;
	overflow:hidden;
	text-overflow:ellipsis;
    background-color: var(--in-color);
    color: #fafafa;
    padding: 9px 14px;
    font-size: 17.6px;
    border-radius: 35px;
	display:flex;
	justify-content:space-evenly;
	align-items:center; 
	user-select:none;
	
}
.toast svg{
	 fill:white; 
}
.toast:before{
	 /* content:url("../images/icons/icon-48x48.png"); */
	 width:36px;
	 height:24px;
	 margin-right:12px;
	 background-color: rgba(100,100,100,.7);
	 border-radius:20px;
	  padding-top:7px;
	 display: flex;
	 flex-wrap:wrap;
	 justify-content: center;
	 align-content: center;
	 object-fit: contain;
}
.toast .msg{
	 min-width: 0;
    color: inherit;
    margin: 0px 8px;
    display: block;
} 

.txt1{
	font-size: .91em;
}

 .widget.numpads{
	user-select:none;
	width: 100%;
	overflow:hidden;
	background:white;
	flex:1; 
 }  
 .widget.numpads .c-group{
	max-width: 100%;
	background-color:var(--sostachi-be-0);
	justify-content:space-around;
	padding: 6px 0;
 } 
 .widget.numpads .content{
	 display:flex;
	 justify-content:center;
	 flex-wrap:wrap;
	 align-content:flex-start;
	 gap:.1%;
	 height: 98.5%; 
	 background-color: #fafafa;
 } 
 .alert{
	position: fixed;
    width: 100%;
    height: fit-content;
    padding: 12px 24px;
	padding-top: 20px;
    border-radius: 12px 12px 0 0;
    z-index: 100;
    background: var(--sostachi-be-7);
    box-shadow: 0 -9px 23px rgb(0 0 0 / 35%);
    border-top: 1px solid hsl(0 100% 74% / 1);
    bottom: 0;
    transition: all .05s ease-in;
    transform: translateY(100%);
    gap: 24px;
    display: flex;
    border-radius: 24px 24px 0 0;
    max-width: 370px; 
    flex-direction: column;
    right: 0;
	z-index: 300;
	max-height: 98%;
  }
  .alert .btn-group{
	 padding:12px;
	 gap:12px;
  }
  .alert.confirm{
	 background-color:hsl(39deg 100% 89%);
  }  
  .alert.warning{
	 background-color:yellow;
  } 
  .alert.error{
	 background-color:red;
  }  
  .alert.warning >p> svg{
	 fill:black;
  }
  .alert  .btn{
	 flex:1;
	 max-width: 200px;.alert
  }
 .alert.in{
	transform:translateY(0%);
 }
 .alert p{
	display:flex;
	padding: 3px 12px;
	height: calc(100% - 40px);
	overflow:auto;
	overflow-x: hidden;
    flex-wrap: wrap;
	user-select:text;
	white-space:pre-wrap;
 }
 .alert p svg{
	margin-right: 5px;
 } 
 .alert.delete p svg{
	fill: red;
	width: 48px;
	height: 48px;
 } 
 .alert.delete p{
	align-items:center;
 }
 .online-status{
	border-radius: 100%;
    height: 15px;
    width: 15px;
    position: absolute;
    background: lightgreen;
    bottom: 57%;
    right: 37.5%;
    border: 2px solid var(--sostachi-be-6);
 }
 .last-updated-by, 
 .datetime-recorded, 
 .recorded-by,
  .time-recorded {
    position: absolute;
    right: 9px;
    font-style: italic;
    color: #b3b3b3;
	color: #333333;
    font-size: 0.6875rem;
    font-size: 0.9em;
    bottom: 3px;
    z-index: 0;
	height: fit-content;
}

.time-recorded {
	top:3px;
	
}
.not-closed{
	display:flex;
	padding:6px;
	border:1px solid silver;
	flex-direction:column;
	gap:6px;
}
.not-closed:before{
	content:"This shift is not closed yet";
	font-size: .8em;
}
.gain{
	background-image: linear-gradient(180deg,var(--in-color),transparent);
    background: var(--in-color);
    font-size: .7em;
    padding: 0 6px;
    border-radius: 0 0 3px 0;
    color: white;
    position: absolute;
    top: 0;
    right: -12px;
    padding-left: 12px;
    display: flex;
    justify-content: left;
    flex: 0;
    width: fit-content;
    left: unset;
}

	#scripture b {
		color: lightpink;
	}
	#frmLogins .btn-group{
		margin: 18px 0;
		max-width: var(--sostachi-max-width);
	}
	#frmLogins .btn-group .primary{
		min-width: 100px;
	}	
	#frmLogins .c-group{
		background: transparent;
	} 
 
	.form.exchange-rates .content {
		justify-content: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 210px;
	}
	.form.exchange-rates .currency-one{
		font-size: 25px;
		font-weight: bold;
		text-align: right;
		flex: 1;
		max-width: 130px;
		padding-right: 8px;
		
		 
		 
	}

	.form.exchange-rates  .col3{
		font-size: 25px;
		font-weight: bold;
		text-align: right;
		flex: 1;
		display:flex;
		justify-content:center;
		padding-right: 8px;
		 
	}
	.form.exchange-rates  .col3 svg{
		transform: rotate(90deg);
	}

 
 .form.exchange-rates .drop-down{
	min-width: 0;
 } 
 .form.exchange-rates .drop-down{
	min-width: 0;
 } 
 .form.exchange-rates .c-group{
	gap: 12px;
	max-width: unset;
	width: 76%;
	/* margin: auto; */

 } .form.exchange-rates .switch-places{
	display:none;
 }
 #lblInCurrency {
	width: 82px;
	align-items: center;
	display: flex;
	gap: 3px;
	padding: 5px;	
}

  
.form.user-groups section.extra {
    border: 2px dotted hsl(219deg 79% 77%);
    padding: 3px 9px;
    overflow: hidden;
    background-color: hsl(219deg 79% 94%);
    padding: 12px;
    border-radius: 5px;
    height: 214px;
    transition: height .3s ease;
    opacity: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 180px;
    padding: 0 12px;
}
.form.user-groups section.extra.collapsed {
    height: 40px;
    border: none;
    padding: 0;
    margin: 2px;
    background: transparent;
}
.form.user-groups section.extra .c-group{
    background-color: var(--sostachi-be-0);
}
.form.user-groups section.extra.collapsed>.c-group {
    display: none;
}
.with-btn-more {
   	display:flex;
	justify-content:left;
	align-items:center;

}
.with-btn-more .btn {
    margin-left: 6px;
    flex: unset;
    opacity: .5;
    width: 36px;

}
 .form.users .lbl{
		font-weight: normal;
	 }
 
  
  .panel.business-branches .search-box{
	display:none;
 }
 
.form.customers .content {
    flex-wrap: nowrap;
	padding: 24px 36px;
} 

.transactions.result{
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color: hsl(240 64% 97% / 1);
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction: column;
}
 
.transactions.result .transaction-type{
	color: white;
    transform: skew(-24deg);
    position: absolute;
    top: 12px;
    right: 0;
    padding-right: 20px;
    padding-left: 12px;
    margin-right: -12px;
    color: white;
    border-radius: 3px;
}
.transactions.result .transaction-type.buy{ 
	background:darkgreen; 
}
.transactions.result .transaction-type span{
	transform: skew(24deg);
	display:block;
	color: white; 
}
.transactions.result .transaction-type span:after{
	font-size: 12px; 
}
.transactions.result .transaction-type.buy span:after{
	content:"Purchase";	
} 
.transactions.result .transaction-type.sell{ 
	background:var(--in-color); 
	
}
.transactions.result .transaction-type.sell  span:after{
	content:"Sale"; 
}
.transactions.result>.content>.c-group{
	flex-direction: column;
    width: fit-content;
    min-width: 336px;
    max-width: unset;
    background: hsl(240deg 63% 93%);
    padding: 12px 24px;
    border-radius: 1px;
    border: 2px solid hsl(240deg 63% 83%);
    color: hsl(240deg 63% 37%);
	align-items:flex-start;
    min-height: 110px;
}

.transactions.result >.content .c-group{
	max-width:unset;
	width: 100%;
}.transactions.result >.content > .hDr .c-group{
	max-width:unset;
	width: 100%;
}
.transactions.result >.content> .c-group.lbl {
	width: 100%;
	font-weight: bold;
	
	font-size: 1.2em;
}
.panel.transactions >.fTr:before{
	content:"Profit:";
}
 
 
.panel.transactions >.fTr{
	overflow-x: auto;
	flex-wrap:nowrap;
	white-space:nowrap;
	gap:12px;
	justify-content:left;
	padding:0 12px;
	flex-shrink:0;
	
} 
.panel.transactions >.fTr .arrow-drop-up{
	display:flex;
	align-items:center;
}
.panel.transactions >.fTr .arrow-drop-up svg{
	transform:rotate(90deg);	
}

.total-curr {
    display: flex;
    align-items: center;
	gap:3px;
	flex-shrink:0;
	margin-right: 24px;
	width: 100px;
	padding: 0 12px;
}
.total-curr svg {
  
	flex-shrink:0;
 
}
.total-curr {
    display: flex;
    align-items: center;
	gap:3px;
	flex-shrink:0;
	margin-right: 24px;
	min-width: 100px;
	padding: 0 12px;
	min-width:27%; 
	width: fit-content;
}

.total-curr:last-child{
    margin-right:0;
}
.c-group.receive {
    background: hsl(240deg 61% 95%)!important;
    border: 1px solid transparent !important;
 
}
.transactions.result .figures~.lbl{

	font-size: 2em;
	font-weight: bold;
}
.transactions.result .figures {
    font-size: 2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: left;
   
    white-space: nowrap;
}
.transactions.result .figures svg{
    margin-right: 3px;
   
}
.transactions.result .figures sub{ 
	font-weight: bold;
}
 
.transactions.result .check-icn svg{
	width: 72px;
	height: 72px;
	fill: var(--in-color);
	border: 2px solid var(--in-color);
	border-radius: 100%;
	margin-bottom:12px;
	
}
.transactions.result >.btn{
	 width: 100px;
	 margin-top: 24px;
	 font-size:20px;
}
.transactions.result p{
	color: var(--in-color);
	height: 50px;
	align-items:center;
	display:flex;
	justify-content:center;
}
.panel.license-infos {
	 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-direction: column;
    transition-delay: .05s; 
	
}
 .panel.business-branches.popup.unlinked-user.in{ 
    height: 100%;
    max-width: unset;
    max-height: unset;
    z-index: 200; 
    top: 0;
    transform: none;
	background: orange;
	left: var(--menu-bar-width);
	width: calc(100% - var(--menu-bar-width));
}
 .panel.license-infos .app-logo{
	    
	width: 192px;
	object-fit:contain;
    height: auto;
    margin: 17px;
 }
 .panel.license-infos .app-description{
	font-size: 14.4px;
    color: grey;
    font-style: italic;
    margin-bottom: 12px;
    text-transform: capitalize;
 }
 .panel.license-infos .app-name {
    font-size: 1.4em;
    font-weight: bold;
    text-transform: uppercase;
}
.copy-right {
    text-align: center;
    font-size: 14.4px;
    color: grey;
}
.app-developer {
    text-transform: capitalize;
    color: var(--sostachi-be-2);
}
.app-developer.contact {
     
    color: var(--sostachi-be-1);
}
.gain svg {
    width: 20px;
    height: 100%;
    /* margin-bottom: -23px; */
    margin: 0 3px;
}

 
.panel.amount-only .col1{
	width: 80%;
	flex: 1;
}
.panel.amount-only .hDr .col1{
	width: 80%;
	flex: 1;
}
.form p.msg { 
	color: hsl(12 100% 35% / 1);
	color: red;
	display: flex;
	justify-content: center;
	width: 100%;
	position: absolute;
	bottom: 0;
	font-size: 12px;
} 
.form.customer-loans [name="Othernames"],
.form.customer-deposits [name="Othernames"]{
	border-color:transparent;
	background: var(--sostachi-be-0);
	border-bottom: 1px solid whitesmoke;
	color: hsl(12 100% 35% / 1);
	pointer-events:none;
	font-size: 23px;
}
.btn.loan-limits.change-color{
	background-color:  hsl(12 100% 35% / 1);
	color: white;
}
.btn.loan-limits:before{
	content:"Kes.";
}
.btn.loan-limits{
	pointer-events:none;
}
.app-logo-icon {
    height: 36px;
    width: 36px;
    margin: 4px;
}
 .removed{
	background-color:red!important;
	min-height:0 !important;
	height:0 !important;
	padding:0 !important;
	margin-top:0 !important;
	margin-bottom:0 !important;
	border:none !important;
	overflow:hidden !important;
} 
 .removed *{
	display: none;
} 
.list-view .l-item.collapsed{
 
	/* 
	box-shadow:0 1px 2px rgba(0,0,0, .2);
	min-height:0 !important;
	height:0 !important;
	padding:0 !important;
	margin-top:0 !important;
	margin-bottom:0 !important; */
	
	/* transform:scale(.8); */
	/* margin-left: 12px; */
}

.loader {
 
	width: 48px;
	overflow:unset;
	height: 48px;
	position: absolute;
	display: inline-block;
	left: calc(50% - 40px);
	top: calc(50% - 40px);
	-webkit-animation: blink .5s linear infinite;
	animation: blink 1.3s linear infinite;
	animation-direction:alternate-reverse;
	border: 2px dashed #abcbd9; 
	border-right: none;
    animation-direction: alternate;
    border-radius: 100%;
	background-image: url('../images/icons/icon-48x48.png');
	background-scroll: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size:50% 48%;
	filter:greyscale(50%);
	display:flex;
	align-items:center;
	font-size: 12.8px;
	color:grey;
	
}
 .loader:after{
	content:"fetching...";
	margin-left: 38px;
 }
 .loader.failed,
 .render-error{
	animation: none;
	color: red; 
	border:none;
 }
 .loader.empty-feedback, 
 .loader.no-records{
	animation:none;
	filter:greyscale(100%); 
	border:none;
 }
 
 .loader.failed:after {
	content:"...Failed!";
	margin-left: 36px;
	animation:none;
 }
  .loader.empty-feedback:after{
	content:"...EMPTY feedback!";
	margin-left: 36px;
	animation:none;
 }
 
 .loader.no-records:after{
	
	content:"...no records!";
	margin-left: 36px;
	animation:none;
 }
  .render-error:after{ 
	content:"...rendering error!";
	margin-left: 36px;
	animation:none;
 }
 .panel.users >.fTr{
	justify-content:space-between;
 }
 .deposits-loans{
	display;flex;
	align-items:center;
 }
 .panel.users .hDr .title,
 .panel.customers .hDr .title{
 
 }
 .dd-box{
	flex-direction:row !important;
	padding-left:0;
	padding-right:0;
	font-size: 12px;
	color: red;
	padding: 0;
}
.form.transactions .list-view.currencies{
	height: 40px;
	max-height: 40px;
	min-height: 0;
	border-bottom: 1px dashed cornflowerblue;
	margin-bottom: 12px;
}
.form.transactions .screen .c-group{
	display:flex;
	justify-content:center;
}

.form.transactions .list-view.currencies:before{
	content: "";
    font-size: 12px;
    width: 25px;
	padding:3px;
    font-weight: bold;
    color: orange; 
	display:flex;
	align-items:center;
	border-radius: 0 24px 24px 0;
}
.form.transactions .list-view.currencies.in:before{
	content:"In";
}
.form.transactions .list-view.currencies.out:before{
	content:"Out";
}
 .form.transactions .list-view.currencies{
	display:flex;
	gap: 20px;
	flex-wrap:nowrap;
 } 

 .btn.currency{
    width: 80px;
    max-width: 80px; 
    height: 90%;
    min-height: 28px; 

 }
 .screen-box{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 50px;
    width: 100%;
    justify-content: space-between;
}
.screen-box .c-group{
	justify-content:center;
	width: fit-content;
}
 .btn.switch-places{
	margin: 0 12px;
 }
 
.docked.form.transactions .c-group.currency-picker{
   justify-content:space-between;
   box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
   padding: 8px 24px;
   margin-bottom:5px;
   padding:10px;
}
.calc-msg{
	font-size: 12px;
	color:red;
	text-align: center;
}
	
.docked.form.transactions>.hDr{
 	justify-content:center;
	gap:12px;
    font-size: 28px;
    padding: 0px 50px; 
    margin: auto;
    /* box-shadow: 0 1px 1px rgb(0 0 0 / 20%);  */
    color: black; 
	white-space:nowrap;
	flex-wrap:nowrap;
	height: 70px;
	font-weight:bold;
}
.docked.form.transactions>.hDr svg{
 	flex-shrink: 0;
}
.docked.form.transactions>.hDr:before{
 	/* content:'Rate'; */
	font-size: 16px;
	color: grey;
}
.form.transactions .content.form-view{
	padding: 0;
}
.in-amount-box{
	width: 100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	
}
.btn.backspace{
	background-color:lightpink;
	
}
.btn.backspace svg{
	fill: red;
}
.group-fTr.ftr-count-screen{
	font-size: 12px;  
}
.group-fTr.ftr-count-screen:before{
	content:"count:";
	margin-right: 3px;
	color:silver;
}

.list-view.dashboard .db-group {
	
    padding:3px 24px;
    background-color: white;
    box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
    margin: 1% auto;
	--amount-width: 136px;
	 
    height: 68px;
	overflow:hidden;	
	width: 585px;
	margin-bottom:12px;
	transition: height .12s ease;
}
.list-view .db-group.expanded{
	width: 100%;
	height: fit-content;
	overflow-x: auto;
}
.list-view .db-group .title:hover{
   background: var(--sostachi-be-alpha-0) !important;
}

.list-view .db-group .title:after{
	content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="silver"%3E%3Cpath d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/%3E%3Cpath d="M0 0h24v24h-24z" fill="none"/%3E%3C/svg%3E');  
}
 
.list-view .db-group.expanded .title:after{
	content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="silver"%3E%3Cpath d="M12 8l-6 6 1.41 1.41 4.59-4.58 4.59 4.58 1.41-1.41z" stroke="none"/%3E%3Cpath d="M0 0h24v24h-24z" fill="none"/%3E%3C/svg%3E'); 
	height: 23px;
	width: 24px; 
	 
}
 .list-view.dashboard .db-group .title{
	cursor: default;
    user-select: none;
    display: flex;
    justify-content: space-between;
	align-items:stretch;
    padding: 12px;
	font-size: 23px;
	width: 100%;
} 
.list-view.dashboard .db-group .title:hover{
	background-color: var(--sostachi-be-alpha-0);
}
.list-view.dashboard .db-group.user-float.assigned{
	background-color: whitesmoke;
} 
.list-view.dashboard  .db-group.user-float.current{
    background: lightpink;
	padding-bottom: 24px;
}
.list-view.dashboard .db-group .hDr,
.list-view.dashboard .db-group .l-item{
   display:none;
   width:534px;
}
.list-view.dashboard .db-group.expanded .hDr,
.list-view.dashboard .db-group.expanded .l-item{ 
   
   display:flex;
}
.list-view.dashboard .db-group .hDr,
.list-view.dashboard .db-group .l-item{
    width: fit-content; 
	padding:0;
	min-height:0;
	    
}
 

.list-view.dashboard .db-group .hDr{
    background-color: #fafafa;
	position:relative;
	border-left:none;
	border-right:none;
	background-color: var(--sostachi-be-alpha-1);	
	background-color: hsl(219deg 79% 9% / 5%);
    box-shadow: none;
    border: none;
	border-bottom: 2px solid whitesmoke;
}
.list-view.dashboard .db-group .hDr .cols:last-child,
.list-view.dashboard .db-group .l-item .cols:last-child{
    
	border-right:none;
	
}
.db-group.tx{
	--col2-width: 127px;
	
}
.db-group .cols{
	min-width: 120px;
}
.db-group .cols.user{
	/* flex: 1; */
	width: 125px;
	color: #333333;
	background-color: #ffffff61;
	    position: sticky;
    left: 0;
}
.db-group.tx .col2{
	width: var(--col2-width);
	justify-content:center;
}
.db-group.assigned-float .col2,
.db-group.user-float .col2 {
    width: 100px;
    justify-content: center;
}
.db-group.money {
   --amount-width: 23.2%;
   overflow-x: auto;
}
.db-group .amount {
	width:var(--amount-width);
	justify-content:right;
	overflow:hidden;
}
.list-view.dashboard {
	overflow:hidden;
	height:fit-content;
	box-shadow:none; 
	
} 
.panel.dashboard{
	overflow: auto;
	display:block;
	padding-bottom: 24px;
	padding-top:0;
}
.db-group.money.out {
    background: #3fffa1;
}
.db-group.money.in {
    background: #c5f1ff;
}

.list-view.dashboard  .db-group.tx {
    background: #ffeddb;
}

.dashboard {
    padding:0;
	
}
.dashboard >.list-view{
	/* padding: 0 24px; */
}
.dashboard>.hDr {
    position: sticky;
    top: 0;
    z-index: 1;
	background-color: #fafafa;
	 justify-content:space-between;
} 
.panel.dashboard .sub-title{
	font-size: 14px;
	color: orange;
	width: 100%;
	display:flex;
	justify-content:center;
	align-items:center;
	padding: 12px;
}
  .result >.content{
	width: 100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	height: 100%;
	}
	.change-box .inputs{
		padding: 0;
		height: 50px;
		font-size: 27px;
		font-weight: bold;
		padding: 0 12px;
		align-items: center;
		display: flex;
		
	}
	#spanCustomerChange{
	
	}
  .result >.content .num-key{
		height: 12.5%;
	}  
	
	.result >.content .hDr{
		flex-direction:column;
	}
	.change-box{
		--label-width:140px;
		width: 100%;
		padding:1px 24px;
		
	}	
	
	.result>p{
		height:30px;
	}
	.form-view .c-group .check-box{
		margin-right:3px;
	}
	.customer-loan-limits .content.form-view >.c-group,
	.business-branch-loan-limits .content.form-view > .c-group{
		padding:24px;
	}
	.content.open-shift span {
    width: 80%;
}
.fTr .primary {
    margin-left: auto;
}
.list-view.customer-loans .col2,
.list-view.customer-deposits .col2{
	width: width: 110px;;   
}
 
.list-view.my-floats,
.list-view.customer-loan-balances{
	padding: 12px;

}
.list-view.my-floats .cols,
.list-view.customer-loan-balances .cols{
	border:none;

}
.list-view.my-floats .kes .cols{
	color: var(--in-color);

}
.list-view.my-floats .ugx .cols{
	color: orange;

}
.list-view.my-floats .usd .cols{
	color: blue;

}

.list-view.my-floats  .col4,
.list-view.customer-loan-balances  .col4{ 
	/* box-shadow: 0 1px 3px rgba(0,0,0,.2); */
	font-size: 20px;
	font-weight: bold;
	border-right:none;
	border:none;
	border-radius:3px;
	background: linear-gradient(90deg,transparent,white);
}
 
.list-view.my-floats .l-item,
.list-view.customer-loan-balances.l-item{
	margin-bottom: 6px;
}.list-view.my-floats .col1,
}.list-view.customer-loan-balances .col1{
	width: 120px;
}
.list-view.my-floats .col2,
.list-view.my-floats .col3,
.list-view.my-floats .col4{
	width: 160px;
	justify-content:right;
	font-size: 20px;
}

.btn.my-floats{
	font-weight: bold;
	color: purple;
	border: 2px solid purple;
	margin:3px 12px;
}
.list-view.assigned-floats .col1{
	width: 50%;
	display: flex;
	align-items: center;
	gap: 12px;
	border:none;
}
.assigned-floats .col2{
	width: 42%;
	display: flex;
	align-items: center;
	gap: 12px;
}
.report-viewer  .value{
	border: none;
	font-weight: bold;
	font-size: 18px;
	white-space: nowrap;
	font-family: consolas;
	width: fit-content;
	max-width: unset;
	min-width:unset;
 }
 .report-viewer  .col1{
	width: calc(80% - 120px);
	display: flex;
	align-items: center;
	gap: 0;
} 
.report-viewer  .col1 svg{
	margin: 12px;
}
.report-viewer  .col2{
	justify-content:center;
	width: 20%;
}
 
.report-viewer  .col3{
	display:flex;
	justify-content: right;
	width: 120px;
}
.report-viewer  .rpt-hDr .col3 {
    padding-right: 28px;
}
.report-viewer  .col3:before{ 
	color: grey;
}
 .assigned-to-box{
	display:flex;
	flex-direction:column;
	overflow:hidden;
	align-items:flex-start;
	

} 

.report-viewer   .l-item{
	justify-content:space-between; 
    height: fit-content; 
    min-height: 40px;

}
.report-viewer  .cols{
	overflow:hidden;
	flex-wrap:wrap;

}
.report-viewer  .hDr .title{
	font-size: 36px;
}

  .rpt-title{
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    margin-top: 18px;
    padding: 0;
    font-weight: bold;
    padding: 6px;
    font-size: 18px;
}
.btn.verify{
	background-color: var(--sostachi-be-3);
}
.closing-floats .action-group {
    width: 116px;
	width:fit-content;
    display: flex; 
}
.list-view.closing-floats .col1{
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	flex-shrink:0;
	width: 68%;
}
.list-view.closing-floats .col2{
	position: absolute;
    top: 0px;
	padding:0 3px;
    left: 3px;
    white-space: nowrap;
    width: fit-content;
    height: fit-content;
	text-align:center;
	 
	/* background-color: lightpink; */
	color:red;
	
 
}
.list-view.closing-floats.verified .col2{
	background-color: hsl(120deg 73% 92%);
	color: var(--in-color);
	
}
 

.list-view.closing-floats .hDr .col2{
 
	display:none;
 
}
.list-view.closing-floats .l-item{
	/* padding-top:20px; */
}
.list-view.closing-floats .col2 svg{
	
	margin-right:3px;
	
}
.list-view.closing-floats .col1 .entry{
    display: flex;
    justify-content: left;
    gap: 12px;
    align-items: center;
    height: 58px;
    overflow: hidden;
    white-space: nowrap; 
	flex-shrink:0;
}
.assigned-box{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width: 100%;
}
.report-viewer.closing-floats .entry{
	display: flex;
    justify-content: left;
    gap: 12px;
    align-items: center;
    height: 58px;
    overflow: hidden;
    white-space: nowrap; 
	flex-shrink:0;
}
.report-viewer.closing-floats .entry svg{
	width: 36px;
	flex-shrink:0;
}
.rpt-fTr{
	position: relative;
	
}

.closing-floats .rpt-fTr{
	
	padding-top:24px;
}
.rpt-fTr.closed-by{
	margin-bottom: 24px;
	
}
.rpt-fTr.closed-by:before{
	content:"Closed By";
}
.rpt-fTr.verified-by{
	margin-bottom: 24px;
	
}
.rpt-fTr.verified-by:before{
	content:"Confirm By";
}
.rpt-fTr:before{
    width: 100px;
	top:0;
    position: absolute;
    text-decoration: underline;
}
.report-viewer.closed-by .rpt-fTr{
	justify-content:left;
	
}
.list-view.closing-floats .col2 svg{
	fill: var(--in-color);
}
.closing-time{

	align-items:center;
}
.closing-floats.report-viewer .cont {
    display: flex;
    flex-direction: column;
    width: 58.5%;
}
.closing-floats.report-viewer .profit-box .cont {
   display: flex;
    flex-direction: row;
    gap: 56px;
    justify-content: center;
    border-right: 2px solid red;
    overflow: hidden;
    border: 1px solid var(--in-color);
    width: 100%;
    border-radius: 2px;
}
.closing-floats.report-viewer .profit-box .cont .l-item {
	width:fit-content;
}
.exchange-rates .btn.toggle{
	background-color: var(--in-color);
	color: white;
}
 .exchange-rates .btn.toggle:hover{ 
	color: black;
	background-color: inherit;
} 
body> .menu-bar .m-item:nth-child(3n):after {
    content: '';
    width: 100%;
    display: block;
    border-bottom: 1px solid white;
    position: absolute;
    bottom: 0;
    width: 83%;
    left: 10%;
}
.list-view.shifts .l-item {
	padding-bottom: 24px;
}
.list-view.shifts .l-item .col1{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100px;
    align-items: flex-start;
	width: 80%;
}
.list-view.shifts .l-item .col1 .c-group{
    width: 100%;
    max-width: unset;
    flex-direction: column;
    overflow: hidden;
    align-items: flex-start;
	padding:0;
}

.list-view.shifts .dates{
    overflow: hidden;
    white-space: nowrap;
    height: 30px; 
}
.rpt-content{

	display:flex;
	justify-content:space-between;
	align-items:center;
}
 .list-view.customer-deposits .dates .closed {
    border: 2px solid orange;
    border-radius: 12px;
}
.list-view.customer-deposits .l-item.open {
    background: white;
    box-shadow: 0 1px 12px rgb(0 0 0 / 20%);
}

.list-view .dates:before{
	content:'';
	color: grey;
	font-size: 1em;
	margin-right:5px;
	
}
.list-view .dates.opened{
	background-image:linear-gradient(90deg, white,transparent);
	display:flex;
	justify-content:left;
	align-items:center;
	padding: 3px 12px;
	background: white;
}
.list-view .dates.closed{
	background-image:linear-gradient(90deg,transparent,white);
	display:flex;
	justify-content:left;
	align-items:center;
	padding: 3px 12px;
	background: lightpink;
}
.list-view .dates.opened:before{
	content:'Shift Opened: '; 

	color: var(--in-color);
}
.list-view .dates.closed:before{
	content:'Closed: '; 
}
.by-box{
	display:flex;
	justify-content:space-between;
	align-items:center;


}
.signature-box {
    border: 1px solid black;
    width: 2in;
    height: 1in;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
	padding:3px;
	margin-left: auto;
} 
.signature-box:before {
    content:'Sign';
	font-size: 13px;
	white-space:nowrap;
	border-top:1px solid whitesmoke;
	
} 

.rpt-list-view {
    min-height: 100px;
    border: 1px solid whitesmoke;
    border-right: none;
    border-left: none;
}

.rpt-hDr,
.rpt-fTr{
    min-height: 50px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	overflow:hidden;
	
}
.rpt-fTr{
	margin-top: 12px;
	--label-width:150px;
	display:flex;
	justify-content:left;
}
.rpt-hDr .cols {
	font-weight: bold;
	
} 
.assigned-floats.report-viewer .content {
    padding: 24px;
}
.assigned-floats.report-viewer .rpt-hDr{
	border-top:1px solid silver;
	border-bottom: 1px solid black;
	/* margin-top:24px; */
}
 .report-viewer.assigned-floats .hDr{
	justify-content: center;
	/* padding-left: 30%;  */
} 

.date-assigned {
    display: flex;
    justify-content: right;
    --label-width: 50px;
    width: fit-content;
    overflow: hidden;
    /* border: 1px solid black; */
}
.date-assigned .value {
    display: block;
    /* justify-content: right; */
    --label-width: 50px;
    width:190px;
    overflow: hidden;
    /* border: 1px solid black; */
	
}
.closing-floats.popup .date-assigned .value {
    display: block;
    /* justify-content: right; */
    --label-width: 50px;
    width: fit-content;
    overflow: hidden;
    /* border: 1px solid black; */
    min-width: 0;
    width: 88px;
}
.report-viewer body{
	overflow: auto;
}

.acknowledge{
	font-size:18px;
	margin: 24px;
}
/* --------------- report ----------------------- */

.report-viewer{
 	overflow:auto;
	display:block;
}
 
.report-viewer .page{
	width: 11.29in;
	border-radius: 2px;
	padding: 24px;
	box-shadow: 0 1px 12px 2px rgb(0 0 0 / 10%);
	position: relative;
	margin: 24px auto;
	overflow: hidden;
	display: block;
	min-height: 7.87in; 
	background-color: white; 
} 
.report-viewer.assigned-floats .page{
	width: 7.87in;
	min-height:11.29in;
}
.page-list-view-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	height: 40px;
}

.page-list-view-header .cols{
   font-weight:bold;
   display:flex;
   width:fit-content;
}
.report-viewer .page.landscape{
	width: 11in; 
	min-height: 8in; 
} 
.report-viewer .page .page-header,
.report-viewer.assigned-floats .hDr{
	display: flex;
   
    align-items: center;
    justify-content: center;
    padding: 24px;
	
}
.report-viewer.assigned-floats .hDr .title{
	width: fit-content;
	color: #333333;
	font-size: 32px;
	text-decoration:none;
	
}
.report-viewer .page .business-logo{
	width: 72px;
	height: 72px;
}
.report-viewer .page .page-title-bar{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.report-viewer .page .page-title-bar .c-group{
	width: 150px;
}
.report-viewer .page .title,
.profit-bar:before{
	font-size: 16px;
    display: flex;
    justify-content: center;
    white-space: nowrap; 
    padding: 12px;
    text-decoration: underline;
	font-weight: bold;
	
}
.profit-bar span {
    align-items: center;
    display: flex;
    gap: 6px;
}
.report-viewer .page .hDr{
	justify-content:center; 
	height: 100px;
}
.report-viewer .page .hDr .app-logo{
	justify-content:center;
 
}
.report-viewer .page .hDr .printer{
	position: absolute;
	right: 0;
	top: 0 ;
}
.closed-by-box:before,
.verified-by-box:before{
    color: black;
    
    font-weight: bold;
    position: absolute;
    text-decoration: underline;
	top:0;
}

.closed-by-box:before{
	content: "Closed By";
}
.verified-by-box:before{
	content: "Verified By";
}


.report-viewer  .closed-by-box,
.report-viewer  .verified-by-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin:12px 0;
	padding-top:24px;
	position: relative;
	page-break-inside: avoid;
}

.page .lbl{
	font-weight: bold;
	white-space:nowrap;
}
.list-view.shifts .col1 .c-group span {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: left;
}
.list-view.shifts .shift-times{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 12px;
	flex-direction:column;
    align-items: flex-start;
 
}
.list-view.shifts .profit-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding:12px;
     flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.list-view.shifts .cols{
	border-color: var(--sostachi-be-0);
}

.list-view.shifts .profit-box:before{
	content:'Profit';
	padding: 0 12px;
		
}
.list-view.shifts .profit-box span{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:7px;
 
}
.taken-by:before,
.reason:before,
.paid:before,
.loan-amount:before,
.date-loaned:before,
.date-deposited:before{
	
	color: hsl(0 0% 58% / 1);
	margin-right: 3px;
}
.taken-by:before{
	content:'Taken by';
}
.reason:before{
	content:'Reason:';
}
.paid:before{
	content:'Paid: ';
}
.loan-amount:before{
	content:'Loaned: ';
}
.date-loaned:before{
	content:'Date Loaned: ';
}
.date-deposited:before{
	content:'Date Deposited: ';
}

.list-view.customer-loans .col1>span,
.list-view.customer-deposits .col1>span{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
}
.list-view.customer-loans .col1>span{
	display:flex;
	flex-direction:row; 
}
.list-view .item-icon{
	width: 54px;
	height: 54px;
	object-fit:cover;
	overflow:hidden;
	border-radius: 100%;
	box-shadow: 0 1px 1px rgba(0,0,0,.2);
	padding: 2px;
	margin: 0 12px;
	/* background-image:url('../images/fallback-image.png'); */
}
.field.invalid {
	border: 2px solid red;
} 
 
.list-view.customer-loans .loan-amount {
    display: flex;
    gap: 6px;
}

.shop-stocks .col1{
	width: 140px;
    gap: 12px;
}
.shop-stocks .col2{
	flex: 1;
}
.list-view.customer-loan-limits .l-item,
.list-view.business-branch-loan-limits .l-item{
	gap: 12px;
	padding-left:10%;
}

.list-view.customer-loan-limits .l-item,
.list-view.business-branch-loan-limits .l-item,
.list-view.remaining-limits .l-item,
.list-view.business-branch-remaining-limits .l-item{ 
	min-height:70px;
}

.list-view.customer-loan-payments .col1{
	width: 100px;
}
.list-view.customer-loan-payments .col2{
	width: 200px;
}
.list-view.customer-loan-payments .col3{
	width: 200px;
}
 
.l-item.utilized .col2{
	text-decoration:line-through;
	
}
.l-item.utilized .col2:before{
	content:'Used';
	font-size: .9em;
	color: red;
	 
}
.remaining-limit{

	color: red;
	font-size: 20px;
}
/*------------- REPORTS ---------------- */
.report.header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width: 100%;
	height: 50px;
	border: 1px solid black;
	padding: 12px;
	border-left:none;
	border-right: none;
	
}
.report-viewer.customer-loans .cols{
	width: 16%;
	white-space: nowrap;
	justify-content:left;
}
 .report-viewer.customer-loans .col2{
	width: 12%;
	white-space: nowrap;
	justify-content:left;
}
 
.report-viewer.customer-loans .header .cols{
	font-weight: bold;
	
}

.report-viewer.customer-loans .col3,
.report-viewer.customer-loans .col4{
	width: 100px;
}

.report-viewer.customer-loans .date-range-box{
	padding: 0;
	height:fit-content;
}
 
.report-viewer.customer-loans .rpt-header{
	width: fit-content;
	padding-right:12px;
	border:1px solid black;
	border-radius: 3px;
	width: 100%;
	padding: 24px;
	margin: 12px 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.report-viewer.customer-loans .rpt-header .c-group .lbl{
	width: fit-content;
	font-weight: bold;
	margin-right: 12px;
}

.report-viewer.customer-loans .rpt-footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:12px;
	margin: 12px 0;
	border-radius: 3px;
	border:1px solid black;
}

.report-viewer.customer-loans .rpt-footer span{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:6px;

}

.report-viewer .business-info-name { 
	font-size: 32px;
	font-weight: bold;
	color: #333333;
}

 .group{
	width: 100%; 
 } 
 .group.group1 .l-item:first-child{
	margin-top:6px;;
 }
 .group .l-item:first-child{
	border-top:none;
 }
 .group .l-item:last-child{
	border-bottom:none;
 }

 .panel.side-tallies .content.list-view{
	flex-wrap:wrap;
	/* gap:12px; */
	padding: 6px;
	/* padding: 14px;  */
	
 } 
 #lvSideTally{
	background: var(--sostachi-be-alpha-4);
	height: 26%;
	flex: unset;
 }
 .side-tallies .hDr{
	justify-content:space-between;
 }
 
 .side-tallies .l-item{
	width: fit-content;
	padding: 0;
	min-height: 0;
	padding: 12px;
	background: var(--sostachi-be-6);
	
	border-radius: 16px;
	padding:0 12px;
	padding-right: 0;
	border: 1px solid var(--sostachi-be-3);
	margin: 2px;
 } 
 .side-tallies .l-item .amount {
    display: flex;
    align-items: center;
    gap: 3px;
	
}
 .shop{
	display:flex;
	justify-content:left;
	align-items:center; 
	color: yellow;
	margin-bottom: 8px;

 }
.shop svg{
	
	fill: yellow !important;
	
 }
 
 .profile-pic .btn>svg{
	fill: black !important;
 }
.panel.side-tallies{
	
}
/* .btn.hoverable.side-tallies {
	position: absolute;
	right: 6%;
} */
.form.transactions svg {
    height: 30px;
    min-width: 0;
    min-height: 0;
}
.context-menu{
	gap:0;
	background-color: var(--sostachi-be-5);
	z-index: 200;
	border-top:none;
	padding:0;
	overflow:hidden;
	width: 100%;
}
.c-item{ 
	max-height:unset;
	min-height:58px;
	display:flex;
	padding: 20px;
	overflow:hidden; 
	width: 96%;
	margin: auto;
	padding: 15px;
	
	border-bottom: 1px solid var(--sostachi-be-6);
} 
 
.list-view.customer-loans .col1{
	width: 144px;
	flex: unset;
	min-width: 0;
}
.list-view.customer-loans .col2{
 
    flex-direction: column; 
	align-items:flex-start;
	gap:12px;
	width: 160px;
 
}
.list-view.customer-loans .col3{
	display:flex;
	justify-content: center;
	gap:3px;
 
 
}
.list-view.customer-loans .col3{
	width: 160px;
 
}
.list-view.remaining-limits .col1,
.list-view.business-branch-remaining-limits .col1{
	width: 120px;
	
    gap: 6px;
}
.list-view.business-branch-remaining-limits .col2,
.list-view.business-branch-remaining-limits .col3{
	width: 120px;
	display:flex;
	justify-content:right;
}

.list-view.business-branch-remaining-limits .l-item{
	min-height: 0;
}

.panel.business-branch-remaining-limits{ 
	width: 360px;
	height: 370px;
}
.panel.business-branch-remaining-limits{ 
	width: 360px;
	height: 370px;
	left: 82%;
    top: 64%;

}
.list-view.remaining-limits .col1{
	width: 100px;
}
.list-view.remaining-limits .col2,
.list-view.remaining-limits .col3{
	width: 120px;
	display:flex;
	justify-content:right;
}

 


.list-view .hDr .cols:last-child,
.list-view .l-item .cols:last-child{
	border-right: none;
}


.business-branch-remaining-limits .toggle-lv-view,
.remaining-limits .toggle-lv-view{
	display:none;
}
.list-view.remaining-limits .hDr,
.list-view.business-branch-remaining-limits .hDr{
	justify-content:left;
	
}
.list-view.remaining-limits .col1{
	gap: 6px;

}
.panel.assigned-shop-stocks .cols.col1 {
    width: 50%;
    gap: 6px;
	border-right:none;
}
.customer-loan-balances  .l-item{
	justify-content:space-between;
	
}
.btn.close-and-transfer{
	max-width: unset;
	overflow: hidden;
	
}
.my-floats.close-shift .fTr .form {
    display: flex;
    justify-content: left;
    flex-direction: row;
	width: fit-content;
}
.my-floats .l-item{
	justify-content:space-between;
}
#ddAssignedToUser{
    min-width: 53px;
    width: 108px;
}
.group{ 
	overflow:hidden;
	width: 99%;
	margin:6px auto;
    margin-top: 3px; 
	padding: 3px;
}
.group.collapsed {
    height:fit-content;
}
.group.collapsed .l-item ,
.group.collapsed .group{
    display:none;
}

 
.list-view.customer-deposit-balances .cols.col1,
.list-view.business-branches-loan-limits .cols.col1 ,
  {
    width: 120px;
    gap: 12px;
    border: none;
}

.list-view.customer-deposit-balances .cols.col4,
.list-view.business-branches-loan-limits .cols.col4{
    width: calc(100% - 120px);
    justify-content: right;
}


.list-view.cash-transfers .cols{
	border:none;
}

.list-view.my-floats .cols.col1 {
	 width: calc(100% - 120px);
}
.list-view.my-floats .cols.col4 {
	 width: 120px;
    justify-content: right;
}
/* 
#btnCurrencySwitch {
    position: absolute;
    right: 16%;
} */

.list-view.cash-transfers .col1 {
    gap: 9px;
}

.form.customers .c-group{
	padding: 7px;
}
#fldStLoanInfo[disabled=true]{
	height: 100px;
	
}
#fldStLoanInfo[disabled=true] *{
	display:none;
	
} 
 .customer-deposits #fldsExtraInfo .c-group{
	padding: 8px;
 }

 
 .panel.remaining-limits .date-range-box,
 .panel.business-branch-remaining-limits .date-range-box{
	display:none;
 }

.list-view.customers .col1{
	width:92%;
}

.list-view.customers .col2{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
	padding: 6px;
	
}
.list-view.customers .col2 >span:before{
	color: grey;
	font-size: .9em;
	

}
 

/*-------------- REPORT ----------------- */


.report-viewer .top-bar{
	position: sticky;
	top:0;
	z-index: 100;
	background-color: whitesmoke;
}
.report-header{

	display:flex;
	justify-content:space-evenly;
	align-items:center;
	position: sticky;
	top:var(--top-bar-height);
	width: 100%; 
	z-index:100;
	margin-bottom: 24px;
	box-shadow: 0px 2px 3px rgb(0 0 0 / 20%);
	background-color: whitesmoke;
}

.report-viewer > .hDr{

	display:flex;
	justify-content:left;
	align-items:center; 
	top:0;
	width: 100%; 
	background:whitesmoke;
	z-index:100;
	padding:12px 24px;
}
.report-viewer .page-shop-date-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.report-viewer .page-shop-date-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.report-viewer .page-shop-date-bar  .c-group{
	--label-width: 100px;
}
.report-viewer .page-shop-date-bar  .c-group .lbl{
	font-weight:bold;
}

.report-viewer .page-shop-date-bar  .c-group,

.report-viewer .page-shop-date-bar  .c-group > span{
	width: fit-content;
}
.report-viewer .date-range-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
	position: sticky;
	top:0;
	z-index:100;
	background-color: transparent;
	
}
.page-list-view .cols:last-child{
	border-right:none;
}
.page-item{
	display: flex;
	justify-content: left;
	align-items: center;
	height: 40px;
}
	 
.panel .letter-head {
    display: flex;
    justify-content: left;
    height: 100px;
    align-items: center;
    padding: 28px;
}
.panel .letter-head {
      display: flex;
    justify-content: left;
    height: 100px;
    align-items: center;
    padding: 28px;
    justify-content: center;
}
.panel .letter-head .business-name{
	font-size: 2em;
}
.panel .letter-head .branch-name{
	font-size: 1em;
	color: grey;	
    text-align: center;
}
 /* 
.page{
	width: 8in;
	min-height: 11in;
	background-color: white;
	margin: auto;
	box-shadow: 0 1px 12px rgb(0 0 0 / 10%);
	padding: 12px;
} */
.page .list-view .hDr,
.page .list-view .l-item{
	display:block;
	min-height:0;
}
.page .list-view .cols{
	display:inline-flex;
}
.page .hDr .title{
	font-size: 18px;
	color: darkorange;
	text-align:center;
	display: flex;
    justify-content: center;
    width: 100%;
} 
 
.panel.customer-statements .cols,
.panel.user-statements .cols{
	width: 16%;
}

.panel.customer-statements .col4,
.panel.customer-statements .col5,
.panel.customer-statements .col6,
.panel.user-statements .col4,
.panel.user-statements .col5,
.panel.user-statements .col6{
	justify-content:right;
}

.panel.customer-statements .particulars,
.panel.user-statements .particulars{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-left: 2%; */
    border: 1px solid black;
    padding: 12px;
	margin: 12px 0;
}
.panel.customer-statements .particulars .lbl,
.panel.user-statements .particulars .lbl{
	width: fit-content;
	margin-left: 5%;
	font-weight: bold;
	margin-right:6px;
}
.panel.customer-statements .particulars .lbl:first-child,
.panel.user-statements .particulars .lbl:first-child{
	margin-left: 0%;
}

.page >.hDr {
    justify-content: center;
}
 
 .report-viewer.customer-loans .l-item{
	display:flex;
	justify-content:left;
	flex-shrink:0;
 }

 .customer-statements .page,
 .user-statements .page{
	width: 11in;
	min-height: 8in;
 }

 .panel.borrowed-cash,
 .panel.money-requests {
    transform: none!important;
	box-shadow:0 1px 3px rgba(0,0,0,0.1);
	top: 0`;
	left: 0;
	border-radius:6px;
 }
 .panel.reports iframe{
	width: 100%;
	height: 100%;
 }
 .borrowed-cash .l-item,
 .money-requests .l-item{
	justify-content:space-between;
	min-height:100px;
 }
 
 
 .borrowed-cash .l-item:before,
 .money-requests .l-item:before {
    content: 'Cash Request -';
    position: absolute;
    top: 0;
    color: grey;
    padding: 6px;
    font-size: 18px;
    color: var(--sostachi-be-2);
	color: orange;
}
  .panel.borrowed-cash .list-view,
  .panel.money-requests .list-view{ 
	 border:none;
	 box-shadow:none;
  }

 .list-view.borrowed-cash .cols,
 .list-view.money-requests .cols{
	border:none;
 }
 .list-view.borrowed-cash .cols .l-item,
 .list-view.money-requests .cols .l-item{
	padding: 0 12px;
 }
 
 .money-requests .action-group .btn{
	    width: 80px;
 }
 
 img{
	/* background-image: url('../images/fallback-image.png'); */
	
 }

 .report-viewer.user-statements  .list-view .hDr{
	border-bottom: 1.2px solid black;
	border-top: 1px solid black;
	
 }
  .report-viewer.user-statements  .list-view .hDr .cols{
	 white-space:nowrap;
 }
 
.user-statements .group-hDr{
	justify-content:space-between;
	align-items:center;
	width: 40% !important;
}  
.user-statements .group-hDr .pill:after{
	content:'';
}
.user-statements .group-hDr .pill{
	background: transparent;
	border-bottom: 1px solid black;
	color: black;
	border-radius: 0;
}

.user-statements .group-hDr .customer-name{
	border-bottom: 1px solid black;
}

.user-statements .group-fTr{
	justify-content:space-between;
	align-items:center;
	width: 100% !important;
	padding: 0 !important;
}
.user-statements .group-fTr .col1{
	justify-content:space-between;
	align-items:center;
	width: calc(100% - 200px);
}



 
.user-statements .group{
	padding: 0 !important;
	border:none !important;
	margin: 0 !important;
	
} 
.user-statements .group .group0{
	border-bottom: 1px solid whitesmoke;
}

.form .c-group{
	padding: 10px 6px;
}
.nested-list-view{
	 overflow-x: auto;
	
}
.nested-list-view .nested-hdr,
.nested-list-view .nested-item{
	display:flex;
	justify-content:left;
	align-items:stretch;
	min-height: 49px; 
	width: fit-content;
}
.nested-list-view .nested-item{
	 
	
	border-top:1px solid white;
}

.customers .nested-list-view .nested-cols{
    width: 120px;
    display: flex;
	justify-content:right;
    align-items: center;
    gap: 5px;
	flex-shrink:0;
	border-right: 1px solid white;
	padding: 5px;
 }
 
 .customers .nested-list-view .nested-col0{
	width: 100px;
	justify-content:left;
	padding-left: 12px;
}
 .customers .nested-list-view{
	 
	background-color: whitesmoke;  
	margin: 12px;
	border-radius: 12px;
	width:fit-content;
	max-width: 100%;
	border: 2px solid #fafafa;
	
 }
 .customers .action-group{
	position: absolute;
	right: 0;
	top: 3px;
 }
  .customers .nested-hdr .nested-col:last-child,
  .customers .nested-item .nested-col:last-child{
	border-right:none;
}
  .panel.assigned-shop-stocks .form-view{
     /* width: 412px; */
    gap: 18px;
 }

 .calculators .btn.key{
    width: 32%;
    height: 33%;
    font-size: 2em;
    font-weight: bold;
    display: inline-flex;
    background: white;
    margin: .5%;	
 } 
 .calculators .calc-screen{
	 width: 100%;
	 height: 100px;
	 border: 2px solid beige;
 }
  .calculators .calc-numpad{
	display:flex;
	flex-wrap: wrap;
	align-items:flex-start;
 }

 .profile-pic.selected .shop svg{
	fill: yellow;
 }
 
.dashboard .cols{
	width: 27.5%;
    min-width: 100px;
	display:flex;
	justify-content:left;
	align-items:center;
} 
.dashboard .cols.col1{  
	text-align: left;
	justify-content:left;
	background-color: #ffffff5c;	
	min-width: 50px;
	width: 76px; 
	text-overflow: ellipsis;
	 
 } 
  
 .dashboard .group-hDr{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	padding: 0; 
	width: 100%;
 }   
 .dashboard .group-hDr .hDr {
	border:none;
	/* margin-top: 12px; */
	justify-content:left;
	border-bottom: 1px solid whitesmoke;
	box-shadow:none;
	background: var(--sostachi-be-0);
	height: 38px;
	border-radius:3px;
	
 } 
 .dashboard .group-hDr .hDr .cols {
	 background-color: #ffffff5c;	
 }
 .dashboard .group-hDr .hDr .col1{
	/* background-color: var(--sostachi-be-alpha-0); */
 }
 .dashboard .group .l-item{
	background: #ffffffc7;
	border-radius: 3px;
	min-height: 46px;
 }
 
.list-view.dashboard .group >.group-hDr{
	width: 100%;
}
.dashboard .group.collapsed .hDr{
	display:none;
}
 
 .dashboard .group{
	 
	padding: 0;
	padding-bottom: 12px;
	padding-top:0;
	width: 97%;
    margin: 3px auto;
	border-radius:3px;

 }
 .dashboard .group .group-hDr{
	padding: 0;
} 
.dashboard .group .group0 .pill {
    
    width: 100%;
    justify-content: space-between;
    margin: auto; 
	/* background: var(--sostachi-be-0); */
	height: 50px;
	background-color: var(--sostachi-be-0);
	color: #333333;
}

.dashboard .group .group0 .pill,
.dashboard .group .group0 .pill>span {
	font-size: 22px;
	font-weight: bold;
}
.dashboard .group .group0 .pill>span {
	margin-right: auto;
	margin-left:6px;
	/* background-color: beige; */
	text-decoration:underline;
	text-decoration-thickness:1px;
 
}
.dashboard .group.current-cash,
.dashboard .group.current-float{ 
	background-color: hsl(351 88% 86% / 1);
}
.dashboard .group.current-float{ 
	background-color: hsl(351 88% 86% / 1);
}
.dashboard .group.cash-in,
.dashboard .group.float-in{
	background-color: #c5f1ff;
}
.dashboard .group.cash-out,
.dashboard .group.float-out{
	background-color: #3fffa1;
	background-color: hsl(151 100% 86% / 1);
	background-color:hsl(219 79% 90% / 1);
}
.dashboard .group.assigned-cash,
.dashboard .group.assigned-float{
	background-color: var(--sostachi-be-alpha-4);
}
.dashboard .group.profit{
	background-color: hsl(120 73% 94% / 1);
	background-color: white;
}
.dashboard .group.no-of-transactions{
	background-color: #ffeddb; 
}
.dashboard .group.collapsed{
	padding-bottom: unset;
	height: 54px;
}
.dashboard .group.no-of-transactions .cols.col2{
    justify-content:center;
} 
.dashboard >.list-view { 
    padding-top: 3%;
}
.borrowed-from ,
.transferred-from {
    position: absolute; 
    font-size: .9em; 
    color: grey;
    font-style: italic;
    color: chocolate; 
    left: 7px;
    top: 2px;
}
.transferred-from {
	color: orange;
}
 
 .assigned-floats.list-view .l-item{
	position:relative;
 }
 
 .panel.customers> .search-box{
	display:flex;
 }
  
 .list-view.transactions.desc .l-item {
	counter-increment: section -1;
	min-height: 145px;
 }
    
 .list-view.transactions .l-item {
	counter-increment: section 1;	
 }
  
 .list-view.transactions .group .l-item:before{  
	content: counter(section); 
 }
  
 .list-view.transactions .group .l-item:before{ 
    border-radius: 0;
    height: 28px;
    min-width: 27px;
    position: absolute;
    width: fit-content;
    top: 0;
    left: 0;
    /* background: whitesmoke; */
	border: 1px solid grey; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 12px 0;
    padding: 0 3px;
	color:grey;
 } 
 
 .list-view.transactions  .group .l-item.sell:before,
 .list-view.transactions  .group .l-item.deposit:before,
 .list-view.transactions  .group .l-item.transferred:before,
 .list-view.transactions  .group .l-item.withdrawn:before,
 .list-view.transactions  .group .l-item.requested:before{
	border-left:none;
	border-top:none; 
 }
 .list-view.transactions  .group .l-item.sell:before {
	border-color: var(--in-color);
 }  
 
 .list-view.transactions  .group .l-item.deposit:before {
	border-color: orange;
 } 
 
 .list-view.transactions  .group .l-item.transferred:before {
	border-color: var(--out-color);
 } 
  .list-view.transactions  .group .l-item.requested:before {
	border-color: lightpink;
 } 
 
 .list-view.transactions  .group .l-item.withdrawn:before{
	border-color: lightgreen;
 }
  .list-view.transactions .l-item.sell{  
	border-color: var(--in-color);
	background: hsl(151 48% 96% / 1) !important; 
}
.list-view.transactions .l-item.withdrawn{  
	border-color: lightgreen; 
}
.list-view.transactions .l-item.deposit {
    border-color: orange;
   
}
.list-view.transactions .l-item.withdrawn,
.list-view.transactions .l-item.deposit{
	min-height: 185px;
}
.list-view.transactions .seleted.l-item:before{
	border-left:none;
	border-top:none; 
}
   
 .btn.side-tallies svg,
 .btn.toggle-currency svg,
 .btn.switch-places svg,
 .btn.recent-five,
 .btn.borrow-cash,
 .btn.request-cash{
	fill:hsl(218 47% 50% / 1);
	color: hsl(218 47% 50% / 1);
	font-weight: bold;
 }
 
 #rlFtrInfo{
	color: grey;
 }
 
.list-view.accounts .cols.col1 {
    width: 50%;
}
.list-view.accounts .cols.col2 {
    width: 40%;
	min-height: 100px;
}

 
.withdrawals-deposits .new-balance:before,
.withdrawals-deposits .amount:before{
	color: grey;
	font-size: .9em;
	margin-right: 3px;
}

.withdrawals-deposits .amount:before{
	content:'Dep.: '; 
}
.withdrawals-deposits .new-balance:before{
	content:'New Bal.: ';
 
}
.withdrawals-deposits .new-balance{
	font-size: .9em; 
	margin-top:3px;
}
.withdrawals-deposits .col2,
.withdrawals-deposits .col3{
	width: 96px;
	display:flex;
	justify-content:right;
}
.withdrawals-deposits .col3{
	border-right: none;
}
.withdrawals-deposits .l-item{
	min-height: 100px;
}  
.list-view.withdrawals-deposits .l-item{
	margin-bottom: 3px;
}
.list-view.withdrawals-deposits .l-item:before{
	position:absolute;
	top:0;
	left:0; 
	color: white;
	padding: 3px 12px; 
}
.list-view.withdrawals-deposits .withdrawn{
	border: 1px solid turquoise;
}
.list-view.withdrawals-deposits .deposit{
	border: 1px solid lightpink;
}
  
.list-view.withdrawals-deposits .col1{
 
	width: 30%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 35px;
	
}
.list-view.withdrawals-deposits .notes{
	color: grey;
	font-size: .98em;
	padding-left:2px;
	font-style:italic;
}
.list-view.withdrawals-deposits .notes{
	color: grey;
	font-size: .98em;
	padding-left:2px;
	font-style:italic;
}

.panel.withdrawals-deposits .hDr .btn.deposit{
	background-color: lightpink;
	background-color: orange;
	margin-left: auto;
}
.panel.withdrawals-deposits  .btn.withdrawal{
	background-color: turquoise;
	margin:0 12px;
}

.btn.sort{
	margin-left: auto;

}
.btn.sort.desc svg{
	transform:rotate(180deg); 
}
.search-box.form{
	min-width: 0;
	overflow:hidden;
}
.search-box.form .inputs{
	min-width: 0;
}
.list-view.accounts .cols.col2{
 
	justify-content:right;
}
.list-view.money-requests .col1{
	width: 30%;
	font-size: 16px;
}
.list-view.money-requests .col2{
	width: 30%;
}
.list-view.money-requests .col3{
	width: 10%;
}
.txt2{
	font-size: .9em;
	color: grey;
	padding-left: 3px;
}
.list-view.closing-account-balances .col1{
	width:50%;
	border:none;
}
.list-view.closing-account-balances .col2{
	width: 50%;
	font-weight:bold;	
	justify-content:left;
	font-size:16px; 
}
.list-view.closing-account-balances .col1{
	font-size: 16px;
}
.list-view.closing-account-balances .l-item{
	border-top: 1px dashed silver;
	min-height: 50px;
	
}

.form.accounts .c-group{
	flex-direction:column;
	align-items:flex-start;
	gap:3px;
	margin-top:12px;
}
.form.accounts .c-group .lbl{
	width: 100%;
	
}
.panel.withdrawals-deposits .hDr> .title{
	display:none;
}
.menu-bar .profile-pic .btn-group .btn svg{
	fill: lightgreen !important;
}
.form.transactions .btn-group{
	margin-top:12px; 
}
.form.transactions .btn-group .btn{
	 width: 100%; 
}

.dashboard .profit .cols.col2{
	width: 90px; 
	min-width: 40px;
	background-color:whitesmoke;
	color: silver;
	filter:grayscale(100%);
	display:none;
}
.dashboard .profit .col3,
.dashboard .profit .col4{
	width: 38.5%;
}
.dashboard .profit .col1{
	width: 96px;
}
.list-view.tags .col1{
	width: 50%;
	border-right: none;
}
.num-screen .value {
    display: flex;
    align-items: center;
    background: lightblue;
    width: fit-content;
    border-radius: 12px;
    padding: 3px;
    margin: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2); 
	height: 40px;
}
.list-view.transactions .l-item .cols .bal{
	display:flex;
	align-items:baseline;
	font-size: .99em;
}
.list-view.transactions .l-item .cols .bal:before{
	content:'Bal.';
	color: grey;
	font-size: .9em;
}

.screen-box .c-group .lbl{
	font-size: 12.9px;
}
.side-tallies .numpads .num-key{
	height: 18%;
}
.txt{
	color: grey;
   
}
.panel.customer-loan-payments .txt{
	 margin-right: 4px;
}
.panel.customer-loan-payments .txt:after{
	 content:'.';
}

.particulars .c-group {
	display:flex;
	flex-wrap:nowrap; 
}
 
 #spanTotalAdded{ 
	font-size:20px;	 
 } 
 
 #spanTotalAdded:before{
	content:"Sum:";
	font-size:.99em;
	color: var(--out-color);
	margin-right: 3px;
 }
 
 .balance-screen{
 
    text-align: center;
    font-weight: bold;
    transition: all .2s ease;
    color: #301b2d; 
    font-size: 23px;
 
    height: 60px;
    border: 3px solid #333333;
    max-width: unset;
    padding: 0 3px;
	color: maroon;
	flex:1;
 
 }
 .balance-calc .btn.ok{
	height: 48%;
 }
 .balance-calc .c-group .lbl{
	font-size: 18px;
	width: 140px;
 } 
 .balance-calc .c-group span{
	flex: 1;
	margin: 3px 0;
 }
 .side-tallies .btn.clear{ 
    position: absolute;
    top: 50px;
    width: 80px;
    right: 0;
	font-size: 18px;
 }
 .customer-statements .printer,
 .user-statements .printer {
    position: absolute;
    top: 0;
    right: 0;
}
.page .l-item.hide{
	display:none;
}
 
.confirmed-cash{
	width: 120px;
	height: 48px;
	border: 1px solid grey;
	display:none;
	border-radius: 3px;
}
.rpt-content .confirmed-cash{
	display:block;
}
.report-viewer .l-item{
	border:none;
} 
 .closing-floats.report-viewer .rpt-content .l-item:first-child{
	padding-top: 24px;
 }
 .closing-floats.report-viewer .l-item:first-child .confirmed-cash:before {
    content: 'Verified balance';
    font-size: .9em;
    color: grey;
	/* text-decoration: underline; */
	text-align:center;
	width: 100%;
	margin-top: -22px;  
    width: 100%;
    display: block; 
    /* padding: 0 2px; */
}
.profit-box legend {
    text-align: center;
    font-size: 20px;
    font-weight: bold; 
	color: var(--in-color);
	margin: auto;
	margin-top: 22px;
}
.user-guides .caption {
    color: grey;
    font-size: .8em;
    margin: 12px;
    margin-top: 18px;
    font-weight: 200;
}
.user-guides .caption:after {
   content:')';
}
.user-guides .caption:before {
   content:'(Image:';
}

.user-guides .l-item img{
	max-height: 360px;
	max-width: 100%;
	object-fit:contain;
}
.user-guides .sub-info {
    color: grey;
    font-weight: 100; 
    font-style: italic;
}
.list-view.payment-modes .cols.col1 {
    width: 50%;
}
.list-view.archived-users .cols.col2{
	flex-direction:column;
}
 
.notification-count {
    position: absolute;
    width: fit-content;
    height: fit-content;
    background: red;
    border-radius: 5px;
    padding: 2px 5px;
    color: white;
    font-size: 12px !important;
    font-weight: bold;
    right: 3px;
    top: 1px;
}



#frmWithdrawals input[type=number]{
	text-align: right; 
    height: 45px;
    font-size: 26px;
    font-weight: bold;
	max-width: calc(99% - var(--label-width));
} 

.form.shop-budgets{
    width: 303px;
    height: 240px;
}
.budget:before,
.aggregate:before{
	font-size:.8em;
	color:grey;
	margin-right:3px;
	
	
}
.aggregate:before{
	content:'Issued: Kes.'; 
}

.budget:before{
   content:'Budget: Kes.'; 
}
.aggregate,.budget{
	font-size: 20px;
}
.business-branches .under-assigned{
	position:absolute;
	color:red;
}
 .under-assigned{
 
	color: red;
	font-size: 18px; 
	height: fit-content;
	width: fit-content;
	  
}
.page-list-view .cols{
    width: 17%;
    display: flex;
    justify-content: right;
    align-items: center;
    border-right: 1px solid silver;
    height: 100%;
    padding: 5px;
    border-bottom: 1px solid whitesmoke;
}
.page-list-view .col0{
   /*  width: 20%;  */
	justify-content:left;
	white-space:nowrap;
	font-size: .98em;
}
.page-list-view-header .cols{
	white-space:nowrap;
	max-width: auto;
}

.page-list-view .cols.col6{
    border-right: none;
	margin-left: 0.5%;
    height: 85%;
 
}
.page-list-view {
    border-bottom: 1px solid black;
}
.page-list-view .verified{
	border-radius: 3px;
	border: 1px solid grey;
	border-right: 1px solid grey !important;

}
.profit-bar { 
	display:flex;
    align-items: center; 
    position: relative; 
    border: 1px solid whitesmoke;
    width: 100%;
    justify-content: space-between;
    height: 50px;
}
.profit-bar>.row{

	display:flex;
	justify-content:space-between;
	align-items:center;
	width: 100%;
	border-bottom: 1px solid whitesmoke;
}	
.profit-bar>.row.header{
	font-weight: bold;
}	
.profit-bar>.row.header> span{
	font-size: 16px;
	font-weight: bold;
	border-right: 1px solid whitesmoke;
}	
.profit-bar>.row .app-col{
	
}	
.profit-bar>.row span{
	width:33%;
}	
.profit-bar>.row .app-profit-col{
	
}
.profit-bar>.row .custom-profit-col{
	
}	  
.profit-bar .l-item {
    width: fit-content;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    border: 1px solid grey;
}
.profit-bar .l-item:last-child {
	border-left: none;
}
.profit-bar .entry {
    width: fit-content;
    display: flex;
    align-items: center;
}
.report-viewer {
    overflow: auto;
    width: 100%; 
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0; 
    height: 100%;
    z-index: 200;
	overflow:auto; 
	background-color: whitesmoke;
	transform:none !important;
	max-width: unset;
	max-height: unset;
}
.report-viewer .page .save{
	margin: 24px;
	margin-left: auto;
}

 
 .form.actual-balances .c-group .cols,
 .form.actual-balances .header .cols{
	width: 15%;
	display:flex;
	max-width:unset;
	justify-content:right;
	padding-right:6px;
	margin: 0.5%;
	
 } 
 .form.actual-balances .header .cols{
	background-color: gainsboro;
 }  
 
 .form.actual-balances .c-group .col0,
 .form.actual-balances .header .col0{
	width: 24px;
	height: 24px;
	margin-right: 10px; 
 }

 .actual-balances .header{
	display:flex;
	justify-content:left;
	align-items:center;
	height: 40px;
 }
 .form.actual-balances .header .cols{
	padding-left: 3px;
 }  
   .form.actual-balances  .cols.col1{
	justify-content:left;
 } 
 @media only screen and (min-width:767px){
 .form.actual-balances{
	width: calc(98% - var(--menu-bar-width));
	max-width: unset !important;
	height: 80%;
	left:71.9%;
	
 }
.panel.popup.transactions {
     width: 654px;
    height: 594px;
}
.form.withdrawals{
		max-height: 505px;
		height:fit-content;
		width: 361px;
	}
.panel.remaining-limits,
.panel.business-branch-remaining-limits{
	 
	
	width: 440px;
	height: 374px;
	left: 82%;
    top: 64%;

}
.user-guides.panel{
	width: 387px;
	height: 676px;
 }
 
.list-view.transactions .l-item.withdrawn,
.list-view.transactions .l-item.deposit,
.list-view.transactions .l-item.requested,
.list-view.transactions .l-item.transferred{
	min-height: 145px;
}
.list-view.transactions .l-item.requested{
	border-color: lightpink;
}
.list-view.transactions .l-item.transferred{
	border-color: var(--out-color);
}
.list-view.closing-floats .col1{ 
	width: 36%;
}
.menu-bar{
	z-index:0;
}
.panel.upfronts{
     height: 520px;
    width: 426px;
	}
.form.money-requests{ 
	height: 618px;
	width: 343px; 
 } 
.side-tallies .c-group{
	max-width: unset !important;
	padding: 3px 12px;
}
.c-group{
	max-width: var(--sostachi-max-width);
}
.form.actual-balances .c-group{
    max-width: unset;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    border-bottom: 1px solid silver;
    padding: 0;
}
 .panel.nationalities{
	width: 323px;
	height: 252px;
 }
 .panel.customer-loan-limits{
	height: 374px;
	width: 378px;
 }
.panel.numpad-calcs,
.panel.numpad-calcs2{
	width: 433px;
	height: 511px;
}

 .panel.tags{
	width: 308px;
	height: 431px;
 }
 .panel.closing-account-balances{
  
	height: 516px;
	width: 390px; 
}
 
 .list-view.accounts .cols.col2 {
    width: 38%;
	min-height: unset;
}
 .panel.withdrawals-deposits .hDr> .title{
	display:flex;
}
  .last-updated-by, 
 .datetime-recorded, 
 .recorded-by,
  .time-recorded {
	
    right: 45px; 
}

  .list-view.transactions.desc .l-item {
	
	min-height: 148px;
 }
 .list-view.accounts .cols.col2{
	width: 20%;
	
	
}
.form.deposits {
	max-height: 430px;
	width: 355px;
}

 

 .form.account-ins,
 .form.account-outs{
	height: 420px;
	width: 367px; 
 }
 
.form.tags{
	height: 239px;
	width: 328px;
}
 .form.users .c-group {
    padding: 4px 6px;
}
.form.users .content{
	padding: 0;
}
	#spanRemainingLimit {
		text-align: right;
		padding-right: 47px;
	}
 
  .screen-box{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 50px;
    width: 100%;
    justify-content: center;
}
  .panel.customers>.hDr .search-box{
	display:flex;
 }
 .panel.customers> .search-box{
	display:none;
 }
 
 .borrowed-from {
    position: relative;  
    
}
 .dashboard >.list-view { 
    padding-top: 3%;
	min-height: 80vh;
}
 .dashboard .group.no-of-transactions{ 
 
	width: 265px;
}
 .calculators.panel{
	width: 534px;
	height: 551px;
 }
 .dashboard .group {
	width: 398px; 
    width: 48%;
    background: white;
    margin: 1%; 
    border-radius: 3px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
	padding: 5px;
	padding-top: 2px;
}

.dashboard .col1{ 
	
	width: 24.5%;
 } 
  
 .panel.popup.customers{
	width: 422px;
	height: 654px;
 }
 .panel.popup.currencies{
	height: 436px;
	width: 429px;
 }
 .panel.popup.exchange-rates {
	width: 468px;
    height: 620px;
 }
  .panel.payment-modes{
	width: 357px;
	height: 516px;
  }
 .panel.customer-loan-payments{
	width: 497px;
	height: 562px;
 }
.panel .hDr .title{
 
	font-size: 24px;
 }  
.form.customers .content {
    flex-wrap: wrap;
	padding: 24px 36px;
} 
  .panel.borrowed-cash, 
  .panel.money-requests{
	top: 27px;
	right: 27px; 
	left: unset;
	height: 500px;
    width: 350px; 
	position:absolute;

 }
  
 .borrowed-cash.form{
     width: 335px;
    height: 432px;
 }
 
.customer-loan-payments .col2{
	display:flex;
	flex-direction:column;
	border:none;
	align-items:flex-end;
}
.panel.my-floats.close-shift{
	width: 500px;
	height: 489px;
}

.customer-debt-payment-statements .l-item{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.panel.customer-loans-balances,
.panel.customer-deposit-balances{
	width: 362px;
    height: 465px;
} 

 .panel.assigned-shop-stocks{
     /* width: 412px; */
    height: 688px;
 }



.form.job-titles,
.form.postal-addresses,
.form.postal-codes {
	width: 350px;
	height: 274px; 
}
.form.assigned-shop-stocks{
    width: 336px;
    height: 432px;
}
 .panel.side-tallies,
 .panel.balance-calc{
	height: 560px;
	width: 425px; 
 } 
 
 .balance-calc>.c-group{
    justify-content: center;
    display: flex;
    width: 100%;
    max-width: unset;
    padding: 3px 12px;

 }
.btn.close{
	display:flex;
	
}
.btn.back{
	display:none;
}
 .btn.menu{
	display:none;
 }
 .panel.postal-codes,
 .panel.postal-addresses,
 .panel.job-titles{
	width: 438px;
	height: 512px;

 }  
  .panel.customer-loan-limits,
  .panel.business-branch-loan-limits{
	width: 387px;
    height: 409px;
  }
.list-view.customer-loans .col1>span{
	
	flex-direction:row;
	align-items:center;
	justify-content:left;
}
.panel.shop-stocks{
	width: 432px; 
	height: 349px; 
}
.panel.shop-stocks .cols{ 
	border-color:var(--sostachi-be-0);
}
.panel.shop-stocks .col2{ 
	justify-content:right;
}
 .list-view.shifts .shift-times,
 .list-view.shifts .profit-box{
	flex-direction:row;
 }
 .list-view.customer-deposits .col2{
	width: 120px;
	justify-content:center;
	border-color: whitesmoke;
} 
.list-view.customer-deposits .col1 .c-group{
	flex-direction:row;
}
 .list-view.users .col2 .has-active-shift{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 50%;
	height: fit-content;
	padding: 6px;
 }
 .list-view.closing-floats .col2{
	position: relative;
	top:unset;
	right:unset;
	width: 30%;
	border:none;
	padding:12px;
	display: flex;
    justify-content: center;
	color: chocolate;
 } 
 .list-view.closing-floats .l-item.verified .col2{
	background-color: transparent;
	color: var(--in-color);
 } 
 .list-view.closing-floats .l-item.verified .col2 svg{
	fill: var(--in-color) !important;
 }
 .panel.my-floats{
	min-width: 0;
	min-height: 0;
	width: 327px;
	height: 368px;
}
/* HTML: <div class="loader"></div> */
 .btn-loader { 
  aspect-ratio: 1;
  position: relative;
}
.btn-loader:before,
.btn-loader:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  margin: -8px 0 0 -8px;
  width: 16px;
  aspect-ratio: 1;
  background: #3FB8AF;
  animation:
    l1-1 2s  infinite,
    l1-2 .5s infinite;
}
.btn-loader:after {
  background:#FF3D7F;
  animation-delay: -1s,0s;
}
@keyframes l1-1 {
  0%   {top:0   ;left:0}
  25%  {top:100%;left:0}
  50%  {top:100%;left:100%}
  75%  {top:0   ;left:100%}
  100% {top:0   ;left:0}
}
@keyframes l1-2 {
   80%,100% {transform: rotate(0.5turn)}
}
 /*------------- SCROLL BAR ---------*/

.btn .clicked{
	
}
::-webkit-scrollbar {
	width: 9px !important;
	scroll-behavior: smooth !important;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3) !important;
}
::-webkit-scrollbar-thumb {

	border-radius: 1px !important;
	background-color: hsl(51deg 3% 51%) !important;
  
}
::-webkit-scrollbar-button {
	border-radius: 0 2px 0 2px;
	background:#acb5bd ;
	background: #051229a3;
	height: 6px;
	border: 1px solid grey;
}
::-webkit-scrollbar-button:hover, ::-webkit-scrollbar-thumb:hover {
	background-color: slategrey !important;
}
 .panel.emails,
 .panel.locations,
 .panel.nationalities{
	    width: 630px;
    height: 454px;
 } 
 .form.locations,
 .form.payment-modes{
    height: 508px;
    width: 410px; 
 }
 /* 
 height: 526px;
    width: 412px; */
 .form.customer-loan-payments{
    height: 508px;
    width: 410px;
 }
 
 
 .panel.business-branch-users{
     width: 562px;
    height: 484px;
 }
 
 .list-view.dashboard .db-group.expanded{ 
	 min-height: 300px;
	height: fit-content;
}
 .docked{
	padding: 24px;
 }
  .result >.content{
	width: 50%;
  }
.list-view.dashboard .db-group.expanded.tx{
	width: 38%;
} 
.list-view.dashboard .db-group.expanded{
	width: 585px;
} 

.db-group .l-item .cols:last-child {
    border-right: none;
}
 .form.transactions >.fTr{
	--footer-height:50px;
 }

 .fTr{
	padding: 6px 24px;
   } 
   .fTr .btn.new{
	 display:none;
   }
   .form.business-branches{
	--label-width:140px;
	height: 460px;
    width: 412px;
 }
  .transactions.result{
	left:var(--menu-bar-width);
	width: calc(100% - var(--menu-bar-width));
	gap:5%;
  }

  .panel.business-branches .search-box{
	display:flex;
 }

 
  /*-------list-view customers ------------*/
  .panel.users .hDr .title,
  .panel.customers .hDr .title {
	display:flex;
 }
.list-view.customer-loans .group0,
.list-view.customer-deposits .group0{

	/* display:none; */
	
} 
/* .list-view.customer-loans .col1,
.list-view.customer-deposits .col1{
	width: calc(70% - (200px + var(--action-group-width))); 
	
}  */
.list-view.customer-loans .col2,
.list-view.customer-deposits .col2{
	display:flex;
	width: 250px;
}   
.list-view.customers .col1 .c-group{
	display:none;
}
.list-view.customers .col2,
.list-view.customers .col3{
	display:flex;
} 
 
.list-view.locations .cols.col1,
.list-view.postal-addresses .cols.col1,
.list-view.postal-codes .cols.col1,
.list-view.payment-modes  .cols.col1 {
    flex-direction: column;
    align-items: flex-start;
	width: 80%;
}

 .popup.form.customers{
	height: 444px;
	width: 732px;
    max-width: unset;
    max-height: unset;
 }
 .popup.maximized{
	max-width: calc(100% - var(--menu-bar-width)) !important; 
	top:0 !important;
	right: 0 !important;
	left: unset !important;
	bottom: 0 !important;
	transform:none;
	
 }
 .popup.panel.customer-loans,
 .popup.panel.customer-deposits{
    width: 613px;
    height: 540px;
	max-width: unset;
 }
 .panel.float-balances{
	width: 371px;
    height: 481px;
 }
 .form.customer-loans  { 
	width: 372px;
	max-height: 620px;
	height:fit-content;
 }
 .form.customer-deposits { 
	width: 446px; 
	height: 512px;
 }
 .form.emails{
     width: 354px;
    height: 332px;
 }
 .form.customer-loan-limits{
	width: 370px;
    height: 340px;
 }
 .form.customer-loan-limits .verb-screen,
 .form.customer-loan-limits .title{
	font-size: 15px;
 }
 
.alert{ 
	flex-direction: column;
	right: 0;
	background: var(--sostachi-be-65);
} 
.panel.popup.report-viewer.in {
    top: 0;
    position: fixed;
}

.form>.fTr > .btn.primary{
	margin-left: auto;
}

	#scripture {
		position: fixed; 
		top: 50%;
		right: 0;   
		transform:translateX(-90%) translateY(-50%);
	}	
	.docked.form.transactions{
	    width: calc(100% - (var(--exchange-rate-panel-width) + var(--menu-bar-width)));
		margin: auto;
		width: 50%;
		/* padding: 10px 5%; */
		padding:0;
		
	}	

	.form.logins{
		left: 45%;
		transform: translateX(-20%) translateY(-50%);
	}
	.panel .hDr .title{
		display:flex;
		white-space:nowrap;
	}
	.with-btn-more .btn { 
		opacity: .5; 
	}
	.with-btn-more .btn:hover {
		opacity: 1;
	}
	.btn.new{
		display:flex;
	}
	.btn.new.absolute{
		display:none;
	}
	
	.panel.user-groups{
		width: 393px;
		height: 488px;
	 }	
	 
	 .form.user-groups{
		width: 380px;
		height: fit-content;
	 }
	
 
	.popup.form.users{
		max-width: unset; 
		width: 770px;
		height: 592px;
	}	
 
	.btn.clear{ 
		box-shadow:none;
		font-size: 20px;
	}
	.dd-box{
		flex-direction:row;
	}
	.form.exchange-rates{
		height: 364px;
		width: 365px;
	}	
	 
	.form.exchange-rates b{
		 color: var(--sostachi-be-1);
	}	
	.form.exchange-rates span.currency{
		 border:none;
		 display:flex;
		 align-items:center;
		 gap:4px;
	}
	.form.currencies{
		width: 333px;
		height: 322px; 
	}
	.popup.form.transactions{
	    width: 550px;
		height: 596px;
	}	
	 .form.transactions .drop-down{
	    min-width: 0; 
		width: 100%;
	}	
	.form.transactions .content>.c-group{
	    width: 100%;
		max-width:unset;
	}
	.form.transactions >.content{
		/* padding: 0 24px; */
		padding:0;
	}
	.form.assigned-floats{
		width: 357px; 
		height: 656px;
	}
	
	.form.customer-loan-limits{ 		
		height: 433px; 
	}
	 
	.form.money-requests.is-editing{
		height: fit-content;
	}
	.form.accounts{
		width: 271px;
		height: 430px;
	}
	 .form.assigned-floats .c-group .check-box{
		margin-right: 12px;
	 }
 
	.form.user-passwords{
	  width: 430px; 
	  height: 478px;
	  resize:block; 
	}
	.popup.logins{ 
		height: 370px; 
		width: 407px;
	}

 
	 .btn.minimize,
	 .btn.maximize{
		display:flex;
	}

	.docked{
		max-width: calc(100% - var(--menu-bar-width)); 
		
		
	} 
	.popup{
		--xT: calc(20% - (50% + var(--menu-bar-width)));
		resize: both;
		max-width: 50%;
		top: 50%;
		left: calc(50% + var(--menu-bar-width));
		transform: translateX(var(--xT)) translateY(-50%);
		max-height: 99%;
		border-radius: 1px;
 
	} 
 
	body>.menu-bar{
		transform: translateX(0);
		position: relative;
		height: 100%;
		overflow-y:auto;
		margin-top: calc(0px - var(--header-height));
	}		
 

	body>.hDr{
		
		width: calc(100% - var(--menu-bar-width));
		margin-left: var(--menu-bar-width);
		border-bottom: 1px solid whitesmoke;
	}	
	body>.hDr .btn{
		/* display:none; */
	}	
	body>.menu-bar  .btn.close-menu-bar{
		visibility:hidden;
	}
	.exchange-rates.docked {
		/* background: var(--sostachi-be-6); */
		/* background: var(--sostachi-be-6); */
		/* width: var(--exchange-rate-panel-width); */
		/* padding: 12px; */
		border-radius: 20px;
		/* border: 18px solid var(--sostachi-be-alpha-5); */
 
		/* height: 85%;  */
		/* top:4%; */
		padding: 0;
	}
 
	.panel.exchange-rates.docked .list-view { 
		background-color: var(--sostachi-be-0);
		padding:12px;
		border-radius: 1px
	}
	.form.transactions >.hDr .opened-at{
		gap:6px;
		flex-direction:row;
		font-size: 15px;
	}
	

	.form.users .content{ 
		flex-wrap: wrap; 
		align-content: flex-start;
		gap: 0;
		padding: 30px;
		justify-content:center;
	 }	
	 
	 .popup.form.user-passwords { 
		width: 392px;
		height: 415px;
		
	 }	 .form.user-passwords .content{ 
 
		flex-wrap: nowrap;
		
	 }	
	.form.users fieldset {
		width: 50%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	 
	 .form.users .content fieldset:last-child{ 
		padding-left:30px;
	 }
 
	.date-range-box .hDr,
	.date-range-box .btn.expander{
		display:none;
	}
	.date-range-box .btn.expander{
		flex-wrap:nowrap;
	}
	.date-range-box .c-group {
		display: flex;
		width: fit-content;
		background-color: transparent;
		
	} 
	.date-range-box .from  .lbl,
	.date-range-box .to .lbl{
		text-align:right;
		padding-right: 5px;
		width: 50px;
	} 
	 .date-range-box .btn.refresh,
	 .date-range-box.expanded .btn.refresh{
		display:flex;
	 } 
 	 .search-box.form,
	.date-range-box.form{
		flex-wrap:nowrap;
	}  

	.date-range-box.form >.fTr{
		padding: 0 6px;
	}  
	
	

	.report-viewer{
		top:0 !important;
		left:0;
		width: 100%;
		max-width: 100%;
	}
	
 }
  

.report-viewer > .hDr{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.report-viewer .list-view .hDr{
	display:flex;
	justify-content:left;
}

  
 
 .report-viewer.customer-statements .hDr,
 .report-viewer.user-statements .hDr{
	min-height: fit-content;
	height: fit-content;
	justify-content:space-between;
 } 
 
 .report-viewer.customer-statements .cols,
 .report-viewer.user-statements .cols{
	justify-content:left;
	flex-shrink:0;
 } 
  .report-viewer.customer-statements .col1,
  .report-viewer.user-statements .col1{
	width: 100px;
 } 
   
   .report-viewer.user-statements .group-fTr .col1{
	    width: calc(100% - 232px);
		} 
 
 .report-viewer.customer-statements .col2,
 .report-viewer.customer-statements .col3,
 .report-viewer.customer-statements .col4,
 .report-viewer.user-statements .col2,
 .report-viewer.user-statements .col3,
 .report-viewer.user-statements .col4{ 
    width: 175px;
    justify-content: left;
 }
 .report-viewer.customer-statements .col4,
 .report-viewer.user-statements .col4{
	width: 100px;
 } 
 
 .report-viewer.customer-statements .col5,
 .report-viewer.user-statements .col5{
	width: 110px;
 } 
 .report-viewer.customer-statements .col6,
 .report-viewer.customer-statements .col7,
 .report-viewer.customer-statements .col8,
 .report-viewer.user-statements .col6,
 .report-viewer.user-statements .col7,
 .report-viewer.user-statements .col8{
	width: 120px;
	justify-content:right;
 }
 .report-viewer.customer-statements .list-view,
 .report-viewer.user-statements .list-view{
	min-height: 200px;
 }
 .report-viewer.customer-statements .l-item,
 .report-viewer.user-statements .l-item{
	display:flex;
	
 } 
 .report-viewer.customer-statements .c-group,
 .report-viewer.user-statements .c-group,
 
 .user-statements .group-fTr{
	width: 100%; 
 } 
 .user-statements .group-fTr .col7{
	font-weight: bold;
 }
 #spanCurrency{
	display:flex;
	align-items:center;
	justify-content:left;
	gap:5px;
	
 }

[disabled]{
	background-color: gainsboro;
	color: grey;
	filter:grayscale(100%);
}

[readonly]{
	outline-color: var(--sostachi-be-0);
	pointer-events:none;
}

.assigned-floats .l-item .col1 svg{
	width: 38px;
}
.list-view.users .pwd{
	display:flex;
	justify-content:left;
	align-items:center;
	gap: 3px;
}

.list-view.users .l-item.selected .pwd  svg{
	fill: silver;
}
.list-view.users .pwd:hover{
	color: cornflowerblue;
}
.list-view.users .pwd:hover svg{
	fill: cornflowerblue;
}

.btn.cancel-cash{
	background-color: red;
	margin-left: 6px;
}
#btnChange{
	margin-left: auto;
}
.c-group.to-exchange {
    background: lightblue;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid cornflowerblue;
	flex-direction:column;
	/* height: 30px; */
	background: transparent;
	border:none;
	transition:height .2s ease;
}
.c-group.to-exchange>p {
	color: cornflowerblue;
	width: 100%;
	text-align: left;
	margin-bottom: 10px;
	font-size: 20px;
	color: #333333;
	font-weight: bold;
}
.c-group.to-exchange>.c-group {
	display:none;
}
.c-group.to-exchange.expanded{
    height: 135px;
	background: #6664ed36;
	border:1px solid cornflowerblue;
}
.c-group.to-exchange.expanded >.c-group{
    display:flex;
}

@media print{

	
	.report-viewer{
		left:0;
		right: 0;
		 
	}
	@page{
		/* margin: .5in; */
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0; 
		border-right: 3px solid red;
		margin:0.2in; 
	 
	}
	 .cols{
		flex-shrink: 0 !important;
	}
	.no-print{
		display:none !important;
	}
	.c-group{
		max-width: fit-content;
	}
	.assigned-floats .page,
	.closing-floats .page{
		width: 100%;
	}
	body,
	div {
		background: transparent !important;
	}
	body> div,
	.date-range-box{
		display:none !important; 
	}
	body > div.report-viewer{  
		overflow:hidden;
		max-height: unset;
		max-width: unset;
		height: fit-content;
		width: fit-content; 
		position:relative;
		padding: 0; 
		display:block !important;
		box-shadow:none !important;  
		
	}	 	
	body > .report-viewer > *{ 
		display:none !important;
		
	}	 	
	body > .report-viewer> .page  { 
		visibility:visible;
		padding:0;
		box-shadow: none;
		position: relative; 
		transform: none;
		top: unset;
		left: unset;
		overflow:hidden;
		page-break-before: always;
		box-shadow:none !important;
		display:block !important; 
		background:yellow: !important;		
	}
}