/* Things to be centralised */
.center {
 	margin-left: auto !important;
	margin-right: auto !important;
}

.align-bottom {
	vertical-align: bottom;
}

/* Things with a simple border */
.simple-border {
    border: 1px solid var(--tbl-border);
    border-radius: var(--radius);
}

/* Give div.simple-border boxes internal breathing room */
div.simple-border {
    padding: 1rem 1.25rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

/* Positioning */
.absolute {
	position: absolute;
	display: block;
}

.fixed {
	position: fixed;
}

.relative {
	position: relative;
}

.inline-block {
	display: inline-block;
}

.block {
	display: block;
}

.inline {
	display: inline;
}

/* Padding */

.padding-half {
	padding: 0.5em;
}

.padding-1em {
	padding: 1em;
}

/* Margin */

.margin-2em {
	margin-top: 2em;
	margin-bottom: 2em;
}

.margin-1em {
	margin: 1em;
}

/* Search-by row centering */

p:has(.js-search-select) {
    text-align: center;
}

/* Float properties */
.clear {
	clear: both;
}

.right {
	float: right;
}

.left {
	float:left;
}

/* For stretching divs */
.stretcher {
	margin-top: 100%;
}

/* Widths and heights*/
.width-5 {
	width:5%;
}

.width-20 {
	width:20%;
}

.width-11 {
	width: 11%;
}

.width-17 {
	width: 17%;
}

.width-25 {
	width:25%;
}

.width-40 {
	width: 40%;
}

.content-box-60, .width-60 {
	width: 60%;
}

.width-70 {
	width: 70%;
}

.width-80 {
	width: 80%;
}

.width-98 {
	width: 98%;
	margin: 1%;
}

.height-120px {
	height: 120px;
}


.height-400px {
	height: 400px;
}

.width-20px {
	width: 20px;
}

.width-170px {
	width: 170px;
}

.min-height-3em{
	min-height: 3em;
}

.height-40em{
	height: 40em;
}
.width-1em{
	width: 1em;
}

/* Vertical text */
.vertical-text {
	position: absolute;
	top: -1em;
	transform: rotate(90deg);
	transform-origin: top right;
	display: block;
}

/* Aligning text */
.text-right {
	text-align: right; 
}

.text-center {
	text-align: center;
}

/* Content items */

.content-box {
	position:relative;
	background-color: #FAFAFF;
}

.floating-box {
	width: 170px;
	height: 60px;
	margin: 1em;
	display: inline-block;
}

.divider {
	width: 98%;
	height: 2px;
	color: #666699;
	background-color: #666699;
	opacity: 0.7;
}

.bar {
	width: 3em;
	background-color: #99CCFF;
	display: inline-block;
	position: relative;
	vertical-align: bottom;
}

.bar-horizontal {
	height: 2em;
	background-color: #99CCFF;
	position: relative;
	margin-bottom: 0.5em;
	white-space: nowrap;
}

.horizontal-graph-text {
	margin: 0.5em;
}

.graph-box {
	
	border: 1px solid black;
	clear: both;
}

.y-axis {
	background-color: transparent;
	border-right: 1px solid black;
}

.long {
	width: 20em;
	position: absolute;
	left: -18em;
	top: 30em;
}

.bar-text {
	width: 15em;
	position: absolute;
	left: -12em;
	top: 1em;
}

.icon {
	width: 30px;
}

.small-img {
	width: 10px;
}

.customer-input {
	border-radius: 2px;
}

.customer-list {
	padding: 0;
	margin: 0;
}

.customer-list-li:hover {
	background-color: #99CCFF;
}

.drop-down-div {
	margin: auto;
}

.customer-list,.customer-list-li, .customer-input, .drop-down-div {
	width:200px;
}

.customer-list-li, .customer-input {
	padding: 0.5em;
	border: 1px solid #bdbdbd;
	background-color: white;
}