#{$main_wrapper} {

	.users-inline {

		>* {
			display: block;
		}

		.locked-pages {
			width: 100%;
			border: 2px solid rgb(185, 185, 185);
			border-top: none;
			margin-bottom: 25px;
			box-shadow: 0 0 12px -5px rgba(0, 0, 0, 0.75);

			>.page-boxes {
				display: flex;
				margin-bottom: 5px;
				background-color: rgb(227, 227, 227);

				> div:first-child,
				> div:last-child {
					flex: 2;
				}

				> div:nth-child(4) {
					flex: 1;
				}

				> div {
					flex: 12;
					background-color: rgb(68, 154, 230);
					color: white;
					margin-bottom: 15px;
					padding: 15px;
					border: 1px solid lightblue;
				}

				> div > h3 {
					margin-top: 0;
					color: white;
				}

				> div > span {
					font-size: 18px;
				}

				>div > .edit {
					margin-top: 28px;
					font-size: 18px;
					font-weight: 500;

					a {
						padding: 10px;
						color: rgb(255, 255, 255);
						background-color: rgb(97, 178, 248);
						transition: color 0.3s;
						transition: background-color 0.3s;
					}

					a:first-child {
						margin-right: 5px;
					}

					a:hover {
						color: rgb(0, 69, 129);
						background-color: rgb(143, 202, 253);
					}
				}
			}

			> .page-boxes.time {

				> div:nth-child(4) {
					flex: 3;
				}
			}

			> .user-boxes {

				* {
					word-break: break-word;
				}
				width: 100%;
				padding: 15px 2%;
				display: grid;
				$userbox-width: 16%;
				grid-template-columns: $userbox-width $userbox-width $userbox-width $userbox-width $userbox-width $userbox-width;
				$userbox-width: 19.2%;

				@media (max-width: 1600px) {

					& {
						grid-template-columns: $userbox-width $userbox-width $userbox-width $userbox-width $userbox-width;
					}
				}
				$userbox-width: 24.2%;

				@media (max-width: 1350px) {

					& {
						grid-template-columns: $userbox-width $userbox-width $userbox-width $userbox-width;
					}
				}
				$userbox-width: 32.4%;

				@media (max-width: 1060px) {

					& {
						grid-template-columns: $userbox-width $userbox-width $userbox-width;
					}
				}
				$userbox-width: 48.8%;

				@media (max-width: 700px) {

					& {
						grid-template-columns: $userbox-width $userbox-width;
					}
				}
				$userbox-width: 98%;

				@media (max-width: 578px) {

					& {
						grid-template-columns: $userbox-width;
					}
				}

				> .inline-boxes {
					vertical-align: top;
					margin-right: 10px;
					margin-bottom: 10px;
					padding: 8px;
					border: 2px solid lightgrey;
					background-color: rgb(227, 227, 227);
					display: inline-block;

					&.expired{
						background-color: #FF7370;
						border: 3px solid Crimson;
						border-top: 15px solid Crimson;
					}
					&.valid{
						background-color: #96CEFF;
						border: 3px solid DodgerBlue;
						border-top: 15px solid DodgerBlue;
					}
					&.red-palette > div {
						background-color: #bb4f4d;
						color: white;
						border: 1px solid lightblue;

						>h3 {
							background-color: #9a3d3b;
							color: white;
						}

						>.edit a {
							color: rgb(255, 255, 255);
							background-color: #9a3d3b;
						}

						>.edit a:hover {
							color: rgb(0, 69, 129);
							background-color: #c75954;
						}
					}

					>div {
						background-color: rgb(90, 176, 252);
						color: white;
						margin-bottom: 10px;
						padding-bottom: 0;
						border: 1px solid lightblue;
						> * {
							margin-bottom: 0;
							color: white;
						}
	
						* {
							margin-bottom: 0;
							color: white;
						}
	
						> h3 {
							background-color: rgb(68, 154, 230);
							color: white;
							padding: 15px;
							margin-top: 0;
						}
						> .padded-text {
							display: block;
							font-size: 16px;
							padding: 8px 15px;
							font-weight: 500;
							a.edit-link{
								float: right;
							}
						}
						.tooltip {
							text-decoration: underline;
							> .tooltiptext {
								width: 550px;
								left: -200px;
								text-align: left;
								padding: 25px;
								z-index: 99999;
								background-color: #004a94;
								&::after{
									left: 46%;
								}
								thead,
								tbody {
									display: inline-block;
									vertical-align: top;
								}
								td, th {
									border: none;
									text-align: left;
									padding: 0;
								}
								tr{
									background-color: transparent;
									border-bottom: 1px solid rgb(192, 192, 192);
									padding: 8px 0;
								}
								table{
									width: 100%;
								}
								thead{
									width: 50%;
								}
								tbody{
									width: 48%;
								}
								thead tr,
								tbody tr{
									display: inline-block;
									width: 100%;
								}
							}
						}
					}

					.pos-right {
						float: right;
					}

					>div > .edit {

						/* position: absolute; */
						right: 15px;
						top: 10px;
						display: block;
						padding: 10px;

						a {
							padding: 10px;
							color: rgb(255, 255, 255);
							background-color: rgb(41, 151, 248);
						}

						a:first-child {
							margin-right: 5px;
						}

						a:hover {
							color: rgb(0, 69, 129);
							background-color: rgb(101, 175, 240);
						}
					}
				}
				// > .inline-boxes:first-child {
				//     margin-left: 25px;
				// }
			}
		}
	}
}