@tailwind base;
@tailwind components;
@tailwind utilities;

body {
	@apply text-lg
}
p {
	@apply text-xl
}
a.link {
	@apply text-blue-700 hover:text-blue-900 hover:underline underline-offset-2;
}
input.control-toggle-switch[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
    float:left;
}
label.control-toggle-switch {
    cursor: pointer;
    text-indent: -9999px;
    width: 65px;
    height: 35px;
    background: grey;
    display: block;
    border-radius: 35px;
    position: relative;
}
label.control-toggle-switch:after {
    content: 'Off';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 30px;
    height: 30px;
    color: #000;
    text-indent:3px;
    font-size:1rem;
    line-height:1.875;
    background: #fff;
    border-radius: 30px;
    transition: 0.3s;
}
input.control-toggle-switch:checked + label {
    background: #bada55;
}
input.control-toggle-switch:checked + label:after {
    content: 'On';
    left: calc(100% - 2px);
    transform: translateX(-100%);
}
label.control-toggle-switch:active:after {
    width: 20px;
}
label.control-toggle-switch-yes:after { content: 'No'; }
input.control-toggle-switch:checked + label.control-toggle-switch-yes:after {
    content: 'Yes';
}
.invalid {
	@apply border-2 border-red-600 bg-red-100
}
.table-dashboard {
	@apply text-sm border-separate border-spacing-0 overflow-hidden;

	width: 1500px;
	th, td {
		@apply border-t border-r border-gray-700 bg-white px-2 py-1 relative z-10 overflow-hidden text-ellipsis;
	}
	th:first-child, td:first-child {
		@apply border-l;
	}
	tr:last-child td {
		@apply border-b;
	}
	thead th {
		@apply bg-sky-200;

		width: 125px;
	}
	thead th:nth-child(1), tbody td:nth-child(1) { width: 100px; left:0; }
	thead th:nth-child(2), tbody td:nth-child(2) { width: 250px; left:100px; }
	th:nth-child(-n+2), td:nth-child(-n+2) {
		@apply sticky z-20;
	}
	thead th:nth-child(3) { width: 75px; }

	thead tr:first-child th:first-child {
		@apply rounded-tl-lg;
	}
	thead tr:first-child th:last-child {
		@apply rounded-tr-lg;
	}
	tbody tr:last-child td:first-child {
		@apply rounded-bl-lg;
	}
	tbody tr:last-child td:last-child {
		@apply rounded-br-lg;
	}
}
.table-list {
	@apply table-auto border-collapse;

	thead th {
		@apply p-3 border-b-2 border-gray-200; 
	}
	tbody tr:nth-child(even) {
		@apply bg-gray-100;
	}
	tbody tr td {
		@apply p-3 text-center transition-colors text-sm;
	}
	tbody tr td p {
		@apply text-sm;
	}
	tbody tr td.text-left {
		text-align: left;
	}
	tbody tr td.text-right {
		text-align: right;
	}
	tfoot tr td {
		@apply p-3 transition-colors;
	}
	.highlight td {
		@apply bg-yellow-200
	}
	.editing td {
		@apply bg-emerald-200
	}
	.fading td {
		@apply text-gray-400;
	}
}
.table-list:not([class*=mt]) {
	@apply mt-6;
}
.table-striped, .section-striped {
	tbody tr:nth-child(even), > :nth-child(even) {
		@apply bg-gray-100;
	}
	tbody tr:nth-child(even), > :nth-child(even) {
			@apply bg-gray-100;
	}
}
.table-list.alt-stripe, .section-alt-stripe {
	tbody tr:nth-child(even), > :nth-child(even) {
		@apply bg-gray-200;
	}
}
.table-list.clickable {
	tbody tr {
		cursor: pointer;

		&:hover td {
			@apply text-white bg-blue-700;
		}

		&.selected {
			@apply text-white bg-blue-800;
		}
	}
}
.offender_manage-box {
	@apply absolute w-11/12 h-full lg:h-5/6 inset-2/4 transform -translate-x-2/4 -translate-y-2/4 bg-gray-100 rounded-md shadow-md flex flex-col justify-between
}
.offender_manage-box article {
	@apply flex flex-grow flex-wrap;

	min-height: fit-content(50vh);
	min-height: fit-content(50dvh);
	overflow-y: auto;
}
.offender_manage-description {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"race gender height disability"
		"hair eye weight disability"
		"file file file disability";
}
.offender_manage-race-container { grid-area: race; }
.offender_manage-gender-container { grid-area: gender; }
.offender_manage-height-container { grid-area: height; }
.offender_manage-disability-container { grid-area: disability; }
.offender_manage-hair_color-container { grid-area: hair; }
.offender_manage-eye_color-container { grid-area: eye; }
.offender_manage-weight-container { grid-area: weight; }
.offender_manage-file-container { grid-area: file; }

section.transition-row, div.transition-row {
	@apply transition;

	&.editing {
		@apply bg-emerald-200
	}
	&.highlight {
		@apply bg-yellow-200
	}
	&.fading {
		@apply text-gray-400 opacity-30
	}
}

button.blue, .btn.blue { 
	@apply bg-blue-800 text-white hover:bg-blue-700 active:bg-blue-900 focus:border-blue-900 ring-blue-300
}
button.emerald, .btn.emerald { 
	@apply bg-emerald-800 hover:bg-emerald-700 active:bg-emerald-900 focus:border-emerald-900 ring-emerald-300
}
button.green, .btn.green { 
	@apply bg-green-700 text-white active:bg-green-900 border-green-700 hover:bg-green-800 hover:text-white focus:text-white
}
button.indigo, .btn.indigo {
	@apply bg-indigo-700 text-white active:bg-indigo-900 border-indigo-700 hover:bg-indigo-800 hover:text-white focus:text-white
}
button.light-gray, .btn.light-gray { 
	@apply bg-gray-300 text-gray-900 hover:bg-gray-200 active:bg-gray-400 focus:border-gray-400 ring-gray-200
}
button.middle-indigo, .btn.middle-indigo {
	@apply bg-indigo-500 text-white active:bg-indigo-700 border-indigo-500 text-white hover:bg-indigo-600 hover:text-white focus:text-white
}
button.red, .btn.red { 
	@apply bg-red-800 text-white hover:bg-red-700 active:bg-red-900 focus:border-red-900 ring-red-300
}
button.rose, .btn.rose { 
	@apply bg-rose-800 text-white hover:bg-rose-700 active:bg-rose-900 focus:border-rose-900 ring-rose-300
}
button.sky, .btn.sky { 
	@apply bg-sky-800 text-white hover:bg-sky-700 active:bg-sky-900 focus:border-sky-900 ring-sky-300
}
button.yellow, .btn.yellow {
	@apply bg-yellow-700 text-white active:bg-yellow-900 border-yellow-700 text-white hover:bg-yellow-800 hover:text-white focus:text-white
}
button.white, .btn.white {
	@apply bg-white active:bg-gray-100 border-blue-400 text-blue-600 hover:bg-gray-200 hover:text-blue-700 focus:text-blue-800
}

.icon-svg {
	position: relative;
	display: inline-block;
	font-style: normal;
	font-feature-settings: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;	
}
.icon-svg:before {
	content: '';
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
a.icon-svg:before {
	width: 16px;
	height: 16px;
	left: -16px;
}
.active .icon-svg-status:before { background-image: url(../img/icons/play-circle-green.svg); }
.inactive .icon-svg-status:before { background-image: url(../img/icons/pause-circle-gray.svg); }
.icon-svg-add:before { background-image: url(../img/icons/plus.svg); }
.icon-svg-address-card-o:before { background-image: url(../img/icons/address-card-o.svg); }
.icon-svg-area-chart:before { background-image: url(../img/icons/area-chart.svg); }
.icon-svg-book:before { background-image: url(../img/icons/book.svg); }
.icon-svg-building:before { background-image: url(../img/icons/building-o.svg); }
.icon-svg-check:before { background-image: url(../img/icons/check.svg); }
.icon-svg-check-square:before { background-image: url(../img/icons/check-square-o.svg); }
.icon-svg-checkbox-checked:before { background-image: url(../img/icons/checkbox-checked.svg); }
.icon-svg-checkbox-unchecked:before { background-image: url(../img/icons/checkbox-unchecked.svg); }
.icon-svg-cancel:before { background-image: url(../img/icons/close.svg); }
.icon-svg-clear:before { background-image: url(../img/icons/times-circle.svg); }
.icon-svg-close:before { background-image: url(../img/icons/times-circle.svg); }
.icon-svg-copy:before  { background-image: url(../img/icons/copy.svg); }
.icon-svg-court:before { background-image: url(../img/icons/court.svg); }
.icon-svg-delete:before { background-image: url(../img/icons/trash.svg); }
.icon-svg-download:before { background-image: url(../img/icons/download.svg); }
.icon-svg-edit:before { background-image: url(../img/icons/pencil.svg); }
.icon-svg-edit-pencil:before { background-image: url(../img/icons/edit.svg); }
.icon-svg-email:before { background-image: url(../img/icons/paper-plane.svg); }
.icon-svg-factory:before { background-image: url(../img/icons/location_city.svg); }
.icon-svg-fax:before { background-image: url(../img/icons/fax.svg); }
.icon-svg-flask:before { background-image: url(../img/icons/flask.svg); }
.icon-svg-folder-open:before { background-image: url(../img/icons/folder-open.svg); }
.icon-svg-hammer:before { background-image: url(../img/icons/hammer.svg); }
.icon-svg-hospital-o:before { background-image: url(../img/icons/hospital-o.svg); }
.icon-svg-long-arrow-left:before { background-image: url(../img/icons/long-arrow-left.svg); }
.icon-svg-long-arrow-right:before { background-image: url(../img/icons/long-arrow-right.svg); }
.icon-svg-jpg:before { background-image: url(../img/icons/file-image-o.svg); }
.icon-svg-object-group:before  { background-image: url(../img/icons/object-group.svg); }
.icon-svg-png:before { background-image: url(../img/icons/file-image-o.svg); }
.icon-svg-sign-out:before { background-image: url(../img/icons/sign-out.svg); }
.icon-svg-thumbs-down:before { background-image: url(../img/icons/thumbs-down.svg); }
.icon-svg-thumbs-up:before { background-image: url(../img/icons/thumbs-up.svg); }
.icon-svg-truck:before { background-image: url(../img/icons/truck.svg); }
.icon-svg-unlock:before { background-image: url(../img/icons/unlock.svg); }
.icon-svg-user:before { background-image: url(../img/icons/user.svg); }
.icon-svg-unlock:before { background-image: url(../img/icons/unlock.svg); }
.icon-svg-view:before { background-image: url(../img/icons/eye.svg); }
.icon-svg-zoom:before { background-image: url(../img/icons/search-plus.svg); }
.icon-svg-gif:before, .icon-svg-image:before { background-image: url(../img/icons/file-image-o.svg); }
.icon-svg-jpg:before { background-image: url(../img/icons/file-image-o.svg); }
.icon-svg-png:before { background-image: url(../img/icons/file-image-o.svg); }
.icon-svg-mp3:before, .icon-svg-audio:before { background-image: url(../img/icons/file-audio-o.svg); }
.icon-svg-mp4:before, .icon-svg-video:before { background-image: url(../img/icons/file-movie-o.svg); }
.icon-svg-pdf:before { background-image: url(../img/icons/file-pdf-o.svg); }
.icon-svg-docx:before, .icon-svg-document:before { background-image: url(../img/icons/file-word-o.svg); }
.icon-svg-xlsx:before, .icon-svg-spreadsheet:before { background-image: url(../img/icons/file-excel-o.svg); }
.icon-svg-pptx:before, .icon-svg-presentation:before { background-image: url(../img/icons/file-powerpoint-o.svg); }
.icon-svg-unk:before, .icon-svg-unknown:before { background-image: url(../img/icons/file-text-o.svg); }
.icon-svg-none:before { background-image: url(../img/icons/ban.svg); }
.gray\:icon-svg-user:before { background-image: url(../img/icons/user-gray.svg); }
.white\:icon-svg-add:before { background-image: url(../img/icons/plus-white.svg); }
.white\:icon-svg-building:before { background-image: url(../img/icons/building-o-white.svg); }
.white\:icon-svg-check:before { background-image: url(../img/icons/check-white.svg); }
.white\:icon-svg-check-square:before { background-image: url(../img/icons/check-square-o-white.svg); }
.white\:icon-svg-clear:before { background-image: url(../img/icons/times-circle-white.svg); }
.white\:icon-svg-cancel:before { background-image: url(../img/icons/close.svg); }
.white\:icon-svg-copy:before  { background-image: url(../img/icons/copy-white.svg); }
.white\:icon-svg-delete:before { background-image: url(../img/icons/trash-white.svg); }
.white\:icon-svg-download:before { background-image: url(../img/icons/download-white.svg); }
.white\:icon-svg-edit:before { background-image: url(../img/icons/pencil-white.svg); }
.white\:icon-svg-edit-pencil:before { background-image: url(../img/icons/edit-white.svg); }
.white\:icon-svg-email:before { background-image: url(../img/icons/paper-plane-white.svg); }
.white\:icon-svg-factory:before { background-image: url(../img/icons/location_city-white.svg); }
.white\:icon-svg-flask:before { background-image: url(../img/icons/flask-white.svg); }
.white\:icon-svg-long-arrow-left:before { background-image: url(../img/icons/long-arrow-left-white.svg); }
.white\:icon-svg-long-arrow-right:before { background-image: url(../img/icons/long-arrow-right-white.svg); }
.white\:icon-svg-object-group:before  { background-image: url(../img/icons/object-group-white.svg); }
.white\:icon-svg-thumbs-down:before { background-image: url(../img/icons/thumbs-down-white.svg); }
.white\:icon-svg-thumbs-up:before { background-image: url(../img/icons/thumbs-up-white.svg); }
.white\:icon-svg-truck:before { background-image: url(../img/icons/truck-white.svg); }
.white\:icon-svg-view:before { background-image: url(../img/icons/eye-white.svg); }
.white\:icon-svg-zoom:before { background-image: url(../img/icons/search-plus-white.svg); }

.idc-modal-wrapper {
	@apply w-full h-full inset-0 fixed z-20 bg-gray-900 bg-opacity-50 transition transition-opacity duration-300 ;
	content:'';
}
.idc-modal-wrapper.opacity-0 {
	opacity: 0;
}
.idc-modal {
	@apply absolute z-20 w-2/5 h-2/5 inset-2/4 transform -translate-x-2/4 -translate-y-2/4 transition transition-opacity duration-300 bg-gray-100 rounded-md shadow-md flex flex-col;

	header {
		@apply flex-none h-16 text-left border-b-2 border-gray-300 p-4;
	
		h1 {
			@apply font-semibold uppercase text-xl text-gray-800 leading-tight tracking-wider m-0 p-0;
		}
		h2 {
			@apply text-lg text-gray-700 italic m-0 p-0;
		}
	}

	article {
		@apply flex flex-col flex-grow p-4
	}

	footer {
		@apply flex-none h-20 text-left border-t-2 border-gray-300 p-4;

		button {
			@apply inline-flex items-center px-6 py-4 border-2 rounded-md font-semibold text-sm uppercase tracking-widest ring-blue-300 transition ease-in-out duration-150 bg-blue-700 border-blue-700 text-white
		}
		button:disabled {
			@apply opacity-25
		}
		button:hover {
			@apply no-underline bg-blue-800 text-white
		}
		button:active {
			@apply bg-blue-900
		}
		button:focus {
			@apply text-white no-underline outline-none border-blue-800 ring;
		}
		button.white {
			@apply bg-white border-blue-400 text-blue-400;
		}
		button.white:hover {
			@apply text-blue-400 bg-gray-200;
		}
		button.white:focus {
			@apply text-blue-400;
		}
	}
}