@import "_color.css";
@import "_typography.css";
@import "_mixins.css";

:root {
	--t-fast: 100ms;
	--t-base: 200ms;
	--t-slow: 400ms;
	--gap: 20px;
	--r: 2px;
	--sidebar-width: 300px;
	--icon-size-small: 20px;
	--icon-size-medium: 40px;
}

/* CSS vars don't work in media queries - here's what we're using for reference */
/*
:root {
	--break-0: 1500px;
	--break-1: 1400px;
	--break-2: 1200px;
	--break-3: 1050px;
	--break-4: 900px;
	--break-m: 650px;
}
*/

*,
*:before,
*:after		{ box-sizing: border-box; }
html 		{ font-smoothing: antialiased; font-size: 16px; line-height: 1; }
body 		{ background: var(--c-body-grey); }

/* MACRO LAYOUT =============================================================== */

.main {
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-gap: 0;
}

/* MISC / REUSABLE ============================================================ */

button {
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
}

/* Common buttons ----------------------------------------- */
.btn {
	border: 1px solid var(--c-grey-2);
	border-radius: var(--r);
	color: var(--c-grey-2);
	font-size: 14px;
	padding: 11px var(--gap);
	max-height: var(--icon-size-medium);
	box-shadow: var(--f-in-drop);
	transition: all var(--t-base) var(--easing);
}
.btn:hover {
	border: 1px solid var(--c-grey);
	color: var(--c-grey);
	background: rgba( var(--c-l-grey-rgb), 0.05 );
}
.btn.btn-act {
	color: var(--c-b-blue);
	border-color: var(--c-b-blue);
}
.btn.btn-act:hover {
	border: 1px solid var(--c-blue);
	color: var(--c-blue);
	background: rgba( var(--c-blue-rgb), 0.05 );
}
.btn.btn-warn {
	color: var(--c-orange);
	border-color: var(--c-orange);
}
.btn.btn-warn:hover {
	border: 1px solid var(--c-r-orange);
	color: var(--c-r-orange);
	background: rgba( var(--c-r-orange-rgb), 0.05 );
}
.btn.btn-bad {
	color: var(--c-red);
	border-color: var(--c-red);
}
.btn.btn-bad:hover {
	border: 1px solid var(--c-r-red);
	color: var(--c-r-red);
	background: rgba( var(--c-r-red-rgb), 0.05 );
}
.btn.btn-light {
	color: #fff;
	border-color: #fff;
}
.btn.btn-light:hover {
	background: rgba( 255,255,255,0.1 );
}
.btn:disabled {
	border-color: var(--c-grey-2);
	color: var(--c-grey-2);
	pointer-events: none;
}

/* Download button ----------------------------------------*/
.btn-download {
	color: var(--c-b-blue);
	font-size: 16px;
	transition: all var(--t-base) var(--easing);
	text-align: left;
    transform: scale(1);
}
.btn-download svg {
	aspect-ratio: 1;
	width: var(--icon-size-medium);
	height: auto;
	display: inline-block;
	vertical-align: middle;
	margin-right: calc( var(--gap)*0.5 );
	transition: all var(--t-slow) var(--easing);
}
.btn-download svg * {
	fill: var(--c-b-blue);
}
.btn-download:hover {
	color: var(--c-blue);
}
.btn-download:hover svg {
	transform: rotate(360deg);
}
.btn-download:hover svg * {
	fill: var(--c-blue);
}

/* Shrink the button when clicked, to make it look like it's being pressed down */
.btn-download:active {
    transform: scale(0.95);
    transition: transform 0.1s var(--easing);
}

/* Return to original size when released */
.btn-download:active:hover {
    transform: scale(0.95);
}

/* Ensure smooth transition back to normal state */
.btn-download:not(:active) {
    transform: scale(1);
    transition: transform 0.2s var(--easing);
}

/* Status dots -------------------------------------------- */
@keyframes flashAnim {
	000% { transform: translateX(-50%) translateY(-50%) scale(0); opacity: 0; }
	050% { transform: translateX(-50%) translateY(-50%) scale(1); opacity: 0.25; }
	100% { transform: translateX(-50%) translateY(-50%) scale(0); opacity: 0; }
}

.status-dot {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: var(--c-l-grey);
	margin: 0 auto;
	position: relative;
}
.status-dot.status-complete {
	background: var(--c-green);
}
.status-dot.status-processing {
	background: var(--c-v-blue);
}
.status-dot.status-error {
	background: var(--c-orange);
}
.status-dot.status-error:before {
	content:'';
	display: block;
	width: var(--icon-size-small);
	height: var(--icon-size-small);
	border-radius: var(--icon-size-small);
	background: var(--c-orange);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	animation-duration: 1500ms;
	animation-name: flashAnim;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.800, 0.000, 0.145, 1.000);
}

/* Deletion info (under listing) -------------------------- */
.delete-info {
	font-size: 0.875rem;
	color: var(--c-grey-2);
	padding-left: 30px;
	line-height: 1.4;
	position: relative;
}
.delete-info svg {
	width: var(--icon-size-small);
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
}
.delete-info svg * {
	fill: var(--c-grey-2);
}

/* Loader (spinner) --------------------------------------- */
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes stretch {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -124px;
  }
}
.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 100%;
	height: 100%;
	transition: all var(--t-base) var(--easing);
	z-index: 2;
}
.loader .ring {
  --uib-size: 80px;
  --uib-speed: 1.5s;
  --uib-color: var(--c-v-blue);
  
  height: var(--uib-size);
  width: var(--uib-size);
  vertical-align: middle;
  transform-origin: center;
  animation: rotate var(--uib-speed) linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
}
.loader .ring circle {
  fill: none;
  stroke: var(--uib-color);
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
}
.loader-holder {
	opacity: 1;
	width: 80px;
	height: 400px;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0;
	pointer-events: none;
	z-index: 9;
	background: var(--c-body-grey);
	opacity: 0;
}
.loader-holder.active {
	opacity: 1;
}

#user-bar {
	position: absolute;
	top: var(--gap);
	right: calc( var(--gap) * 2 );
	color: var(--c-grey-1);
	font-size: 14px;
}
.labelling {
	position: absolute;
	top: var(--gap);
	left: 340px;
	color: var(--c-grey-1);
	font-size: 14px;
}

/* SIDEBAR ==================================================================== */
.sidebar {
	position: relative;
	width: var(--sidebar-width);
	height: 100%;
	min-height: 100vh;
}
.sidebar:before {
	content: '';
	position: fixed;
	bottom: 0;
	left: 0;
	width: var(--sidebar-width);
	height: 100vh;
	background: var(--c-n-blue);
	filter: brightness(50%);
	z-index: 0;
}
.sidebar .background-img {
	position: fixed;
	bottom: 0;
	left: 0;
	width: var(--sidebar-width);
	aspect-ratio: 402 / 1080;
	height: calc(300px * 1080 / 402);
	object-fit: cover;
	z-index: 0;
	filter: brightness(50%);
}
.sidebar-content {
	position: fixed;
	z-index: 1;
	width: var(--sidebar-width);
	height: 100vh;
	padding: calc( var(--gap)*4 ) calc( var(--gap)*2 ) calc( var(--gap)*2 );
	background: transparent;
}
.sidebar-content .atlas-logo-name * {
	fill: #fff;
}
.sidebar-content .atlas-logo-name {
	aspect-ratio: 140 / 58;
	width: 98px;
	transform: translateX(-50%);
	margin-top: var(--gap);
	position: absolute;
	top: 21px;
	left: 50%;
}
.sidebar-content h5, .sidebar-content p {
	color: #fff;
}
.sidebar-content hr {
	opacity: 0.2;
}
.sidebar-content h5 {
	margin: var(--gap) 0;
}
.sidebar-content p {
	font-size: 0.875rem;
	margin-top: -10px;
}
.sidebar-content p strong {
	display: block;
}
.sidebar-content .read-more {
	color: var(--c-v-blue);
}
.sidebar-content .read-more:hover {
	color: #fff;
}
.sidebar-content .mob-menu-btn {
	display: none;
	color: #fff;
	font-size: 3rem;
	position: absolute;
	top: 8px;
	right: var(--gap);
	z-index: 99;
}
.sidebar-content .mob-menu-btn:before {
	content: '\2630';
}
.sidebar-content .mob-menu-btn:hover {
	color: var(--c-v-blue);
}
.sidebar-content .mob-menu-btn.active {
	padding: 0 6px;
   	top: 5px;
}
.sidebar-content .mob-menu-btn.active:before {
	content:'\00d7';
  font-size: 4rem;
}
.sidebar-content .app {
	position: absolute;
	bottom: calc( var(--gap)*2 );
	left: 0;
	padding: 0 calc( var(--gap)*2 );
}
.sidebar-content .app .atlas-logo {
	position: absolute;
	bottom: calc(var(--gap) * 11);
	left: 50%;
	transform: translateX(-50%);
	width: 67px;
	height: auto;
}
.sidebar-content .app .formus-logo {
	aspect-ratio: 265.03799 / 80;
	width: 120px;
	display: block;
	margin: 0 auto;
}
.sidebar-content .app .formus-logo * {
	fill: #fff;
}
.sidebar-content .app a {
	display: block;
	color: #fff;
	font-size: 14px;
	margin-top: var(--gap);
}
.sidebar-content .app a:hover {
	color: var(--c-v-blue);
}
.sidebar-content .app span.version {
	display: block;
	margin-top: calc( var(--gap)*2 );
	color: #fff;
	font-size: 12px;
	opacity: 0.5;
}
.sidebar-content .grad {
	width: 100%;
	height: 100px;
	background: linear-gradient(0deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
}


/* CONTENT ==================================================================== */
.content {
	padding: calc( var(--gap)*2 );
	max-width: 1800px;
}

.ui-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: calc( var(--gap)*2 );
	padding-top: calc( var(--gap)*2 );
}
.ui-layout .col-left,  .ui-layout .col-right {
	position: relative;
}

/* CARDS ====================================================================== */

/* Default card ---------------------------------------- */
.card {
	background: #fff;
	border: 1px solid var(--c-l-grey);
	border-radius: var(--r);
	padding: calc( var(--gap)*2 );
	margin-bottom: calc( var(--gap)*2 );
	box-shadow: var(--f-drop-lite);
	position: relative;
}
.card.draft-card {
	border: 1px dashed var(--c-grey-2);
}
.card.naked-card {
	border: 1px dashed var(--c-grey-2);
	background: var(--c-body-grey);
	box-shadow: none;
}
.card.naked-card p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	margin: 0;
	white-space: nowrap;
	color: var(--c-grey-2);
}

/* Case cards ------------------------------------------- */
#cases-listing {
	container-type: inline-size;
}
#cases-listing.restrict-height {
	max-height: 1060px;
	overflow: hidden;
}
#cases-listing.restrict-height:after {
	content:'';
	display: block;
	width: 100%;
	height: 100px;
	background: linear-gradient(0deg, rgba(250,250,250,1) 30%, rgba(250,250,250,0) 100%);
	position: absolute;
	bottom: 0;
	left: 0;
}

.case-card {
	display: grid;
	grid-template-columns: var(--gap) 1fr 170px 200px;
	grid-gap: var(--gap);
	transition: all var(--t-base) var(--easing);
}
@container (max-width: 660px) {
  .case-card {
    grid-template-columns: var(--gap) 1fr 200px;
  }
  .case-card .created {
  		display: none;
	}
}
.case-card:hover {
	border-color: var(--c-grey-2);
}
.case-card p {
	margin: 0;
}
.case-card span {
	font-size: 0.75rem;
	display: block;
	margin-bottom: calc( var(--gap)*0.25 );
	color: var(--c-grey-2);
	line-height: 1;
}
.case-card .status {
	width: var(--gap);
	height: var(--gap);
}
.case-card .status.status-error:before {
	width: var(--icon-size-medium);
	height: var(--icon-size-medium);
	border-radius: var(--icon-size-medium);
}
.case-card .ref {
	/*
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	*/
	line-height: 1.4;
}
@keyframes processingBar {
	000% { width: 0; }
	050% { width: 100%; }
	075% { width: 100%; opacity: 0; }
	100% { width: 0; opacity: 0; }
}
.case-card .processing {
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--c-l-grey);
	margin: 0 auto;
	margin-top: calc( var(--gap)*0.75 );
}
.case-card .processing span {
	display: block;
	width: 0%;
	height: 100%;
	border-radius: 2px;
	background: var(--c-v-blue);
	transition: all var(--t-base) var(--easing);
	/*Using animation until we can reliably track processing time*/
	animation-duration: 2000ms;
	animation-iteration-count: infinite;
	animation-name: processingBar;
	animation-timing-function: cubic-bezier(0.800, 0.000, 0.145, 1.000);
}
.case-card button {
	position: absolute;
	right: calc( var(--gap)*2 );
}
.case-card .actions .btn-download,
.case-card .actions .processing,
.case-card .actions .processing-label,
.case-card .actions .btn-warn {
	display: none;
}
.case-card .actions .btn-download.active,
.case-card .actions .processing.active,
.case-card .actions .processing-label.active,
.case-card .actions .btn-warn.active {
	display: block;
}

.btn-show-more-cases {
	margin: 0 auto calc( var(--gap) * 2 );
	padding: 21px var(--gap) 21px;
	max-height: none;
	display: none;
}
.btn-show-more-cases.active {
	display: block;
}

/* Case cards display options --------------------------- */
#cases-listing {
	padding-top: calc( var(--gap) * 2 );
}
.list-display-options {
	position: absolute;
	top: calc( var(--gap) * 5.4 );
	right: 0;
	text-align: right;
	display: none;
}
.list-display-options.active {
	display: block;
}
.list-display-options span,
.list-display-options button {
	display: inline-block;
	vertical-align: middle;
}
.list-display-options span {
	font-size: 14px;
	padding-right: var(--gap);
	color: var(--c-grey-1);
}
.list-display-options button {
	width: var(--icon-size-medium);
	height: var(--icon-size-medium);
	position: relative;
	z-index: 1;
}
.list-display-options button:nth-of-type(1) {
	left: 5px;
}
.list-display-options button.active {
	z-index: 2;
}
.list-display-options button svg {
	pointer-events: none;
}
.list-display-options button.active svg * {
	stroke: var(--c-b-blue);
}
.list-display-options button:hover svg * {
	stroke: var(--c-blue);
}

/* Case cards as table ---------------------------------- */
.as-table {
	margin-bottom: var(--gap);
}
.as-table .case-card {
	padding: var(--gap);
	box-shadow: none;
	top: none;
	margin: 0;
	background: none;
	border-top: none;
}
.as-table .case-card:nth-of-type(1) {
	border-top: 1px solid var(--c-l-grey);
}
.as-table .case-card:nth-of-type(even) {
	background: rgba(0,0,0,0.01);
}
.as-table .case-card span,
.as-table .case-card .actions .processing-label.active,
.as-table .case-card .btn-download svg {
	display: none;
	margin: 0;
}
.as-table .case-card .actions .processing {
	margin: 8px 0 0 0;
}
.as-table .case-card .actions .processing span {
	display: block;
}
.as-table .case-card div {
	font-size: 14px;
}
.as-table .case-card .btn-download {
	border: none;
	position: static;
	padding: 0;
	box-shadow: none;
	font-size: 14px;
}
.as-table .case-card .actions .btn-warn.active  {
	border: none;
	position: static;
	padding: 0;
	box-shadow: none;
}
.as-table .case-card .actions .btn-warn.active:hover {
	background: none;
	color: var(--c-r-orange);
}
.as-table .case-card .status {
	width: calc( var(--gap) * 0.5 );
	height: calc( var(--gap) * 0.5 );
	position: relative;
	top: 2px;
}

/* Login card ---------------------------------------------- */
body.login-page {
	background-image: url('../img/atlas-background.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100vh;
	display: flex;
	align-items: start;
	justify-content: center;
}
.login-card {
	margin: calc(var(--gap) * 4) auto calc(var(--gap) * 4);
	width: 576px;  /* 80% of 720px */
	position: relative;
	min-height: 400px;
	height: auto;
}
.login-card p {
	color: var(--c-black);
}
.login-card p.in-error {
	color: var(--c-red);
}

/*
.demo-mode {
	overflow-x: hidden;
	.case-card {
		opacity: 0;
		transition: all var(--t-slow) var(--easeOut);
		transform: translateX(120%);
		&.active {
			transform: translateX(0);
			opacity: 1;
		}
	}
}
*/

/* ALL JOBS STATUS ============================================================ */

.all-cases-status {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0;
	align-items: center;
	margin-bottom: calc( var(--gap) * 2 );
	padding-top: calc( var(--gap)*2  );
}
.all-cases-status h1 {
	margin: 1px 0 0;
}
.all-cases-status .the-cases {
	text-align: right;
	white-space: nowrap;
}
.all-cases-status .all-status-label {
	display: none;
	vertical-align: middle;
	margin-left: calc( var(--gap)*0.5 );
}
.all-cases-status .all-status-label.active {
	display: inline-block;
}
.all-cases-status .all-status-label .status {
	display: inline-block;
	vertical-align: middle;
	margin: 0 calc( var(--gap) * 0.25 ) 0 0;
}
.all-cases-status .all-status-label span {
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
}

/* MODALS ===================================================================== */
.modal {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.9);
	z-index: 9;
	opacity: 0;
	pointer-events: none;
	transition: all var(--t-base) var(--easeOut);
}
.modal.active {
	opacity: 1;
	pointer-events: auto;
}
.modal-content {
	width: 600px;
	border-color: #000;
	box-shadow: var(--f-drop-heavy);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(0%);
	border-radius: calc( var(--r)*2 );
	transition: all var(--t-slow) var(--easeIn);
	opacity: 0;
	pointer-events: none;
}
.modal-content.active {
	transform: translateX(-50%) translateY(-50%);
	opacity: 1;
	pointer-events: auto;
	transition-timing-function: var(--easeOut);
}
.modal-content h2 {
	margin-bottom: var(--gap);
}
.modal-content h3 {
	margin-bottom: 0;
}
.modal-content p {
	margin-bottom: calc( var(--gap) * 0.5 );
}
.modal-content p em {
	font-style: normal;
	color: var(--c-black-1);
}
.modal-content .form-actions {
	margin-top: calc( var(--gap)*2 );
}
#modal-more {
	max-height: 80%;
	overflow-y: scroll;
}
#modal-upload {
	text-align: center;
	box-shadow: none;
}
#modal-upload h4 {
	color: #fff;
	margin: 160px 0 0 0;
}

/* FORMS ====================================================================== */

/* Default form control ----------------------------------- */
.form-control {
	position: relative;
	display: block;
	margin-bottom: calc(var(--gap) * 2);
	container-type: inline-size;
}

.form-control label {
	display: block;
	margin-bottom: calc(var(--gap) * 0.5);
}
.form-control .validation {
	font-size: 0.75rem;
	color: var(--c-red);
	display: none;
	position: absolute;
	padding-top: calc( var(--gap)*0.5 );
	top: 100%;
	right: 0;
}
.form-control .note {
	font-size: 0.75rem;
	position: absolute;
	padding-top: calc( var(--gap)*0.5 );
	top: 100%;
	right: 0;
}
.form-control:focus-within label {
	color: var(--c-black);
}
.form-control.in-error {
	margin-bottom: calc( var(--gap) * 3 );
}
.form-control.in-error .validation {
	display: block;
}
.form-control.in-error input[type="text"] {
	border-color: var(--c-red);
}
.form-control.in-error label {
	color: var(--c-red);
}
.form-control.in-error .note {
	padding-top: calc( var(--gap)*1.5 );
}

/* Columns within form ------------------------------------ */
.form-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--gap);
}

/* Form actions ------------------------------------------- */
.form-actions {
	text-align: right;
}
.form-actions button {
	margin-left: var(--gap);
}
.form-control .btn-start {
	width: 50%;
	padding: 21px var(--gap) 21px;
	max-height: none;
}

/* Form elements ------------------------------------------ */
fieldset {
	margin-top: calc( var(--gap)*2 );
	border: none;
	padding: 0;
	outline: none;
}
select,
textarea,
input[type="text"],
input[type="password"] {
  font-size: 1rem;
  line-height: 1;
  padding: 12px var(--gap);
  outline: none;
  border: 1px solid var(--c-l-grey);
  border-radius: var(--r);
  display: block;
  width: 100%;
  opacity: 1;
  background: #fff;
  padding: 17px calc( var(--gap)*1.25 );
}
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
	color: var(--c-black);
	border-color: var(--c-grey);
}
select:disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled {
	background: var(--c-body-grey);
}
select::placeholder,
textarea::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder {
	color: var(--c-grey-2);
}
label {
	color: var(--c-grey-1);
}
select {
	appearance: none;
	padding: 21px calc( var(--gap)*1.25 );
}
.svg-chevron {
	width: 12px;
	height: auto;
	position: absolute;
	top: 50%;
	right: calc( var(--gap)*1.25 );
	transform: translateX(50%) translateY(-50%);
}
.svg-chevron * {
	fill: var(--c-grey-2);
}

input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(255,255,255,0);
	margin: 0;
	width: var(--icon-size-small);
	height: var(--icon-size-small);
	border: 1px solid var(--c-l-grey);
	border-radius: 50%;
	position: relative;
	cursor: pointer;
}
input[type="radio"]:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-grey);
	transition: all var(--t-base) var(--easeOut);
	display: block;
	transform: translateX(5px) translateY(5px) scale(0);
}
input[type="radio"]:checked {
	border-color: var(--c-grey);
}
input[type="radio"]:checked:before {
	transform: translateX(5px) translateY(5px) scale(1);
}
/* checkbox not used in MVP, keeping this here for reference */
/*
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background-color: rgba(255,255,255,0);
    margin: 0;
    width: var(--gap);
    height: var(--gap);
    border: 1px solid var(--c-l-grey);
    border-radius: var(--r);
    position: relative;
    cursor: pointer;
    &:hover {
        border-color: var(--c-grey);
    }
    &:before {
        content:"";
        width: calc( var(--gap)*0.5 );
        height: calc( var(--gap)*0.5 );
        background: var(--c-grey);
        transition: all var(--t-base) var(--easing);
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%) scale(0) rotate(90deg);
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }
    &:checked {
        border-color: var(--c-grey);
        &:before {
            transform: translateX(-50%) translateY(-50%) scale(1) rotate(0deg);
        }
    }
}
*/

/* Upload files ------------------------------------------ */
#files {
	display: none;
}
.btn-file-select {
	color: var(--c-b-blue);
	cursor: pointer;
}
.btn-file-select svg {
	width: var(--icon-size-medium);
	height: auto;
	display: inline-block;
	vertical-align: middle;
	margin-right: calc( var(--gap) * 0.5 );
	position: relative;
	top: -4px;
	transition: all var(--t-fast) var(--easing);
}
.btn-file-select svg * {
	fill: var(--c-b-blue);
}
.btn-file-select:hover {
	color: var(--c-blue);
}
.btn-file-select:hover svg {
	transform: translateY(-4px);
}
.btn-file-select:hover svg * {
	fill: var(--c-blue);
}
.in-error .btn-file-select svg * {
	fill: var(--c-red);
}

/* FOUC handler =============================================================== */
html.active {
    visibility: visible;
    opacity: 1;
}

/* CT protocol page =============================================================== */
.ct-protocol {
	max-width: 800px;
	padding-bottom: calc( var(--gap) * 4 );
}
.ct-protocol .atlas-logo-name {
	width: 160px;
	margin-left: -18px;
}
.ct-protocol .atlas-logo-name * {
	fill: var(--c-blue);
}
.ct-protocol .atlas-logo-name * {
	display: flex;
	justify-content: left;
	align-items: flex-start;
}
.ct-protocol h3,
.ct-protocol h4 {
	margin: calc( var(--gap) * 2 ) 0 var(--gap) 0;
}
.ct-protocol table {
	 border-collapse: collapse;
	 width: 100%;
	 font-size: 14px;
}
.ct-protocol table td {
	padding: calc( var(--gap) * 0.5 );
	border: 1px solid var(--c-l-grey);
	line-height: 1.4;
}
.ct-protocol table td:nth-child(1) {
	color: var(--c-black);
}
.ct-protocol .skip-to {
	float: right;
	border: 1px solid var(--c-l-grey);
	padding: var(--gap);
	border-radius: var(--r);
	margin: 0 0 calc( var(--gap) * 2 ) calc( var(--gap) * 4 );
}
.ct-protocol .skip-to ul {
	padding: 0;
	list-style-type: none
}
.ct-protocol .skip-to li {
	margin-bottom: var(--gap);
}
.ct-protocol table thead {
	background: var(--c-blue);
	color: #fff;
}
.ct-protocol table thead td:nth-child(1) {
	color: #fff;
}
.ct-protocol table.case-outputs td.yes {
	background: var(--c-green);
	color: #fff;
}
.ct-protocol table.case-outputs td.less {
	background: var(--c-yellow);
	color: var(--c-black);
}
.ct-protocol table.case-outputs td.no {
	background: var(--c-red);
	color: #fff;
}
.ct-protocol table.case-outputs ul {
	padding-left: var(--gap);
}
.ct-protocol .ideal {
	background: var(--c-b-blue);
	color: #fff;
	padding: calc( var(--gap) * 0.25) calc( var(--gap) * 0.5);
	border-radius: var(--r);
	display: inline-block;
}

/* Login page =============================================================== */
.login-card .atlas-logo-name {
	position: absolute;
	top: calc( var(--gap) * 2 );
	right: calc( var(--gap) * 2 );
	width: 120px;
	height: auto;
}

/* ONBOARDING ============================================================== */
.onboarding-step-1,
.onboarding-step-2 {
	overflow: hidden;
}
.onboarding-step-1 .modal,
.onboarding-step-2 .modal {
	opacity: 0.8;
}
.onboarding-step-1 .draft-card {
	z-index: 99;
	pointer-events: none;
}
.onboarding-step-1 .draft-card * {
	z-index: 1;
}
.onboarding-step-2 .sidebar {
	z-index: 99;
	pointer-events: none;
}
.onboarding-msg {
	position: absolute;
	z-index: 99;
	width: 400px;
	background: var(--c-b-blue);
	padding: calc( var(--gap) * 2);
	border-radius: calc( var(--r) * 2 );
	box-shadow: var(--f-drop-lite);
	transition: all var(--t-slow) var(--easing);
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}
.onboarding-msg.active {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.onboarding-msg .tri {
	position: absolute;
	top: calc( var(--gap) * 4 );
	transform: translateY( calc( var(--gap) * 0.5 ) ) translateX( 2px);
	right: 100%;
	width: 10px;
}
.onboarding-msg .tri * {
	fill: var(--c-b-blue);
}
.onboarding-msg .progress {
	color:rgba(255,255,255,0.65);
	position: absolute;
	top: var(--gap);
	right: var(--gap);
}
.onboarding-msg .progress em {
	font-style: normal;
	color: #fff;
}
.onboarding-msg h3 {
	color: #fff;
	margin-bottom: calc( var(--gap) *0.5);
}
.onboarding-msg p {
	color:rgba(255,255,255,0.65);
	margin-bottom: var(--gap);
}
.onboarding-msg.onboarding-msg-1 {
	top: calc( var(--gap) * 2 );
	right: var(--gap);
}
.onboarding-msg.onboarding-msg-2 {
	top: 50%;
	left: 340px;
	margin-top: -115px;
}
@keyframes btnWiggle {
	000% { transform: translateX(0px); }
	025% { transform: translateX(-10px); }
	050% { transform: translateX(10px); }
	075% { transform: translateX(-4px); }
	100% { transform: translateX(0px); }
}
.do-btn-wiggle {
	animation-duration: 500ms;
	animation-name: btnWiggle;
	animation-timing-function: cubic-bezier(0.800, 0.000, 0.145, 1.000);
}

/* USER SURVEY ============================================================= */
.new-case-card {
	transition: all var(--t-slow) var(--easeOut);
}
.user-survey {
	position: absolute;
	top: 100%;
	left: 0;
	padding: calc( var(--gap) * 1.5 ) 0 0 5px;
	transition: all calc( var(--t-slow) * 2 ) var(--easeOut);
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	z-index: 2;
}
.new-case-card.survey-active {
	margin-bottom: calc( var(--gap) * 4);
}
.new-case-card.survey-active .user-survey {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.user-survey p {
	font-size: 14px;
	margin: 0 0 var(--gap) 40px;
	color: var(--c-b-blue);
	font-weight: bold;
}
.user-survey input {
	display: inline-block;
	vertical-align: middle;
}
.user-survey label {
	margin-right: var(--gap);
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	cursor: pointer;
}
.user-survey label:hover {
	color: var(--c-grey);
}
.user-survey input:checked + label {
	color: var(--c-black);
}
.user-survey button {
	color: var(--c-b-blue);
	font-size: 14px;
	margin-left: var(--gap);
}
.user-survey button:after {
	content:'';
	display: block;
	width: 100%;
	height: 1px;
	background: var(--c-b-blue);
}
.user-survey button:disabled {
	color: var(--c-l-grey);
	pointer-events: none;
}
.user-survey button:disabled:after {
	background: var(--c-l-grey);
}
@keyframes surveyBtnAnim {
	000% { width: 0; }
	100% { width: 100%; }
}
.user-survey button:hover {
	color: var(--c-blue);
}
.user-survey button:hover:after {
	background: var(--c-blue);
	animation-duration: 500ms;
	animation-name: surveyBtnAnim;
	animation-iteration-count: 1;
}
.user-survey svg {
	width: var(--icon-size-medium);
	height: auto;
	position: absolute;
	top: calc( var(--gap) + 3px );
	left: 0;
}
.user-survey svg * {
	fill: var(--c-b-blue);
}
@keyframes surveyAnim {
	000% { transform: translateY(0) scale(1); }
	020% { transform: translateY(-8px) scale(1); }
	040% { transform: translateY(0) scale(1); }
	060% { transform: translateY(-4px) scale(1); }
	080% { transform: translateY(0) scale(1); }
	100% { transform: translateY(0) scale(1); }
}
.new-case-card.survey-active .user-survey svg {
	animation-duration: 1000ms;
	animation-name: surveyAnim;
	animation-iteration-count: 3;
	animation-timing-function: cubic-bezier(0.800, 0.000, 0.145, 1.000);
}
.user-survey.thx p {
	color: var(--c-green);
}
.user-survey.thx svg * {
	fill: var(--c-green);
}

body.login-page .atlas-logo {
	position: fixed;
	bottom: calc(var(--gap) * 3);
	left: calc(var(--gap) * 3);
	width: 91px;
	height: auto;
	z-index: 1;
}

/* width and height adjustments */
@media all and (max-width: 1000px) and (max-height: 800px) {
	body.login-page .atlas-logo {
		display: none;
	}
}


/* height adjustments */
@media all and (max-height: 250px) {
	body.login-page .atlas-logo {
		display: none;
	}
}
@media all and ( max-height: 420px ) {
	.sidebar-content .atlas-logo-name {
		display: none;
	}
}
@media all and ( max-height: 600px ) {
	.sidebar-content p {
		display: none;
	}
}


/* width adjustments */
/* Mobile Layout Adjustments (650px) */
@media all and ( max-width: 650px ) {
	.list-display-options {
		top: calc( var(--gap) * 6.4 );
	}

	.case-card {
		display: block;
	}
	.case-card .status {
		margin: 0 0 var(--gap);
	}
	.case-card .created {
		position: absolute;
		top: 44px;
		right: calc( var(--gap) * 2 );
		display: block;
		font-size: 12px;
		color: var(--c-grey-2);
	}
	.as-table .case-card .created {
		top: var(--gap);
		right: var(--gap);
	}
	.case-card .created span {
		display: inline;
		margin-right: 6px;
	}
	.case-card .refname {
		margin-bottom: var(--gap);
		white-space: normal;
	}
	.case-card button {
		position: static;
	}
	
	.all-cases-status {
		display: block;
	}
	.all-cases-status .the-cases {
		text-align: left;
	}
	.all-cases-status .the-cases div {
		margin: 0 var(--gap) 0 0;
	}

	.modal-content {
		width: 80%;
	}
	
	.svg-chevron {
		top: 56px;
	}
	
	.login-card .atlas-logo-name {
		display: none;
	}
	
	.user-survey {
		white-space: normal;
	}
	.user-survey label {
		display: table;
		padding-left: 30px;
		position: relative;
		top: -16px;
	}
	.new-case-card.survey-active {
		margin-bottom: 200px;
	}
}

@media all and ( max-width: 720px ) {
	.login-card {
		max-width: 80%;
	}
}

@media all and ( max-width: 800px ) {
	.onboarding-msg {
		display: none;
	}
}

@media all and ( max-width: 900px ) {
	.main {
		display: block;
	}

	.labelling {
		top: 100px;
		left: var(--gap);
		max-width: 100%;
		padding-right: var(--gap);
	}
	.sidebar, .sidebar-content {
		display: none;
	}
	.content {
		padding: var(--gap);
	}
	
	.ui-layout {
		padding-top: calc( var(--gap)*6 );
	}
}

@media all and ( max-height: 940px ) {
	.sidebar-content h5,
	.sidebar-content hr {
		display: none;
	}
	.sidebar-content p strong {
		padding-top: calc( var(--gap) * 2 );
	}
}

@media all and ( max-width: 980px ) {
	.user-survey label {
		margin-right: calc( var(--gap) * 0.5 );
	}
	.user-survey button {
		margin: 0;
	}
}

@media all and ( max-width: 1070px ) {
	.labelling {
		max-width: 240px;
	}
}

@media all and ( max-width: 1400px ) {
	.user-survey button {
		display: inline-block;
		margin-top: 0;
	}
	.ui-layout {
		display: block;
	}
}

@media all and ( max-width: 1570px ) {
	.user-survey button {
		display: block;
		margin: var(--gap) 0 0 0;
	}
}