/* Deep Bay Custom CSS for iMIS */
@font-face {
	font-family: Merienda;
	src: url('fonts/Merienda-Regular.ttf') format('truetype');
}

:root {
	/* Deep Bay colour swatches */
	--col-primary-1: #415364;
	--col-primary-2: #65baaf;
	--col-primary-3: #b0bfbc;
	--col-white: #ffffff;

	--btn-button-color-bg: var(--col-primary-1);
	--btn-button-color-text: var(--col-white);
	--btn-radius: 10px;

	/* Calculate the responsive range based on the site's maximum width */
	--vw-max: 1920;
	--vw-maxu: calc(1px * var(--vw-max));
	--vw-perc: calc(100vw / var(--vw-max));
}

.awesome {
	font-family: Merienda;
}

.item-show {
	display: unset;
}

.item-hide {
	display: none;
}

.rolodex {
	/* Map out the minimum and maximum sizes of the element */
	--rolodex-wmin: 200;
	--rolodex-wmax: 300;
	--rolodex-wcal: calc(var(--rolodex-wmax) * var(--vw-perc));
	--rolodex-xy: min(max(var(--rolodex-wcal), calc(1px * var(--rolodex-wmin))), calc(1px * var(--rolodex-wmax)));

	--rolodex-nav-wmin: 25;
	--rolodex-nav-wmax: 45;
	--rolodex-nav-wcal: calc(var(--rolodex-nav-wmax) * var(--vw-perc));
	--rolodex-nav: min(max(var(--rolodex-nav-wcal), calc(1px * var(--rolodex-nav-wmin))), calc(1px * var(--rolodex-nav-wmax)));
	--rolodex-nav-ycen: calc((var(--rolodex-xy) - var(--rolodex-nav)) / 2);

	--rolodex-font-wmin: 12;
	--rolodex-font-wmax: 20;
	--rolodex-font-wcal: calc(var(--rolodex-font-wmax) * var(--vw-perc));
	--rolodex-font: min(max(var(--rolodex-font-wcal), calc(1px * var(--rolodex-font-wmin))), calc(1px * var(--rolodex-font-wmax)));

	--rolodex-gap: 10px;

	margin: 0 auto;
	display: block;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	max-width: var(--vw-maxu);
	padding: 10px 0px;
	font-size: var(--rolodex-font);

	.rolodex-item {
		margin-right: var(--rolodex-gap);
		display: inline-block;
		width: var(--rolodex-xy);
		height: var(--rolodex-xy);
		transition: margin 0.5s ease-in-out, opacity 0.5s ease-in-out, box-shadow 0.25s ease-in-out;
		position: relative;
		overflow: hidden;

		img {
			display: block;
			width: 100%;
			height: 100% !important;
			object-fit: cover;
			transition: transform 0.25s ease-in-out;
			max-width: unset;
		}

		h4 {
			margin: 0px;
			position: absolute;
			left: 10px;
			bottom: 10px;
			width: calc(var(--rolodex-xy) - 40px);
			padding: 0px 10px;
			transition: color 0.25s ease-in-out;
			border-left: 5px solid var(--col-primary-2);
			overflow: hidden;
			white-space: wrap;
			text-overflow: ellipsis;
			font-size: 1.1em;
			text-transform: uppercase;
			color: rgba(255,255,255,0.6);
			line-height: 1.3em;
			height: 2.6em;
			z-index: 2;
		}

		&:after {
			content:'';
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			display: inline-block;
			background: linear-gradient(to bottom, rgba(0,0,0,0) 40%,rgba(65,83,100,1.0) 100%);
		}

		&:hover {
			cursor: pointer;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
			img {
				transform: scale(1.05);
			}
			h4 {
				color: rgba(255,255,255,1.0);
			}
		}
	}

	.rolodex-move {
		margin-left: calc(0px - var(--rolodex-gap) - var(--rolodex-xy));
		opacity: 0%;
	}

	.rolodex-control {
		--rolodex-ctl-wmin: 130;
		--rolodex-ctl-wmax: 180;
		--rolodex-ctl-wcal: calc(var(--rolodex-ctl-wmax) * var(--vw-perc));
		--rolodex-ctl: min(max(var(--rolodex-ctl-wcal), calc(1px * var(--rolodex-ctl-wmin))), calc(1px * var(--rolodex-ctl-wmax)));

		margin-right: var(--rolodex-gap);
		display: inline-block;
		height: var(--rolodex-xy);
		width: var(--rolodex-ctl);
		z-index: 1;
		position: relative;

		.rolodex-control-left, .rolodex-control-right {
			position: absolute;
			display: inline-block;
			width: var(--rolodex-nav);
			height: var(--rolodex-nav);
			cursor: pointer;
			top: var(--rolodex-nav-ycen);
		}
		.rolodex-control-left {
			right: calc(5px + var(--rolodex-nav));
			background: url("images/icon-less.svg") no-repeat;
			background-size: contain;
		}
		.rolodex-control-right {
			right: 5px;
			background: url("images/icon-greater.svg") no-repeat;
			background-size: contain;
		}
		.rolodex-control-top {
			position: absolute;
			right: 5px;
			top: 5px;
		}
	}

	/* This is an override style */
	.panel-body {
		padding: 10px 0px;
	}
}

.rolodex-hidden {
	display: none;
}

@media (max-width: 991px) {
	.rolodex {
		.rolodex-control {
			display: block;
			width: 100%;
			height: 60px;

			.rolodex-control-top {
				left: 5px;
				right: unset;
			}
			.rolodex-control-left, .rolodex-control-right {
				top: 10px;
			}
		}
	}
}

.button-outline {
	border-radius: var(--btn-radius);
	padding: var(--btn-radius) calc(var(--btn-radius) * 2);
	text-decoration: none;
	border: 1px solid var(--col-primary-1);
	color: var(--col-primary-1);
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
	background-color: var(--col-white);

	&:hover {
		text-decoration: none;
		background-color: var(--col-primary-1);
		color: var(--col-white);
	}
}

.dbc-children {
	padding: 15px;

	#ChildrenDetail {
		margin-bottom: 10px;
		td {
			padding-right: 10px;
		}
		input[type='text'] {
			width: 600px !important;
		}
		img {
			width: 30px;
		}
	}
}