/* ---- TABLE OF CONTENTS ---- */
/* ---- 1) Overwriting Styles ---- */
/* ---- 2) Utility Classes ---- */
/* ---- 3) Boilerplate Styles ---- */
/* ---- 4) Datepicker Styles ---- */
/* ---- 5) Tablet Media Queries ---- */
/* ---- 6) Mobile Media Queries ---- */

/* ---- 1) Overwriting Styles ---- */
body {
	font-family: 'Roboto', Arial, sans-serif;
	background-color: var(--l-gray);
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
	color: var(--d-gray2);
}
/* INCLUDE COSS-CONTAINER CSS FILE INTO NEW PAGES TO OVERWRITE LEGACY WHITE-CONTAINING-BOX CSS RULES */

/* ----- 2) Boilerplate Styles ----- */
@keyframes turn {
	25% {
		filter: blur(0.75px);
		stroke-dasharray: 40%;
	}
	50% {
		filter: blur(0px);
		stroke: var(--green3);
	}
	100% {
		transform: rotate(360deg);
	}
}

:root {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;

	/*blue*/
	--blue1: #157bb0;
	--blue2: #1394d7;
	--blue3: #55add8;
	--blue4: #78c3e9;

	/*lime*/
	--lime1: #0dba27;
	--lime2: #0fdf2f;
	--lime3: #4af364;
	--lime4: #81f793;

	/*green*/
	--green1: #00905d;
	--green2: #10ad74;
	--green3: #17da93;
	--green4: #41eeaf;

	/*orange*/
	--orange1: #fd7f35;
	--orange2: #ff9900;
	--orange3: #ffad1b;
	--orange4: #ffc358;

	/*greyscale*/
	--black: black;
	--d-gray1: #1f1f1f;
	--d-gray2: #383838;
	--d-gray3: #515151;
	--gray1: #6a6a6a;
	--gray2: #9b9b9b;
	--gray3: #cdcdcd;
	--l-gray: #eeeeee;

	/*alert*/
	--alert1: #b81313;
	--alert2: red;
	--alert3: #f94949;
	--ease: 0.15s ease;

	/*the pinkprint*/
	--pink: #ff7ba8;

	/*mild boys*/
	--mild: #c0e073;

	/*purple*/
	--purple: #4e307a;

	/*box shadow*/
	--shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15);

	/*margin*/
	--margin1: 1.5rem;

	/*popup bg*/
	--popup-bg: rgba(0, 0, 0, 0.6);
}

/*Skinny Scrollbar*/
div::-webkit-scrollbar {
	background-color: white;
	width: 5px;
}
div::-webkit-scrollbar-track {
	background-color: white;
}
div::-webkit-scrollbar-track-piece {
	background-color: white;
}
div::-webkit-scrollbar-thumb {
	background-color: #ebeef1;
	border-radius: 5px;
}
div::-webkit-scrollbar-thumb:hover {
	background-color: #cdcdcd;
	border-radius: 5px;
}

/* Utility Classes */
/* Flex Box */
.-flex {
	display: flex;
}
.-flex-column {
	flex-direction: column;
}
.-wrap {
	flex-wrap: wrap;
}
.-center-h {
	justify-content: center;
}
.-start-h {
	justify-content: flex-start;
}
.-end-h {
	justify-content: flex-end;
}
.-between-h {
	justify-content: space-between;
}
.-center-v {
	align-items: center;
}
.-start-v {
	align-items: flex-start;
}
.-end-v {
	align-items: flex-end;
}

/* Margins */
.-m-1 {
	margin: 0.25rem;
}
.-m-2 {
	margin: 0.5rem;
}
.-m-3 {
	margin: 0.75rem;
}
.-m-4 {
	margin: 1rem;
}
.-m-5 {
	margin: 1.25rem;
}
.-m-6 {
	margin: 1.5rem;
}
.-m-7 {
	margin: 1.75rem;
}
.-m-8 {
	margin: 2rem;
}
.-mt-1 {
	margin-top: 0.25rem;
}
.-mt-2 {
	margin-top: 0.5rem;
}
.-mt-3 {
	margin-top: 0.75rem;
}
.-mt-4 {
	margin-top: 1rem;
}
.-mt-5 {
	margin-top: 1.25rem;
}
.-mt-6 {
	margin-top: 1.5rem;
}
.-mt-7 {
	margin-top: 1.75rem;
}
.-mt-8 {
	margin-top: 2rem;
}
.-mr-1 {
	margin-right: 0.25rem;
}
.-mr-2 {
	margin-right: 0.5rem;
}
.-mr-3 {
	margin-right: 0.75rem;
}
.-mr-4 {
	margin-right: 1rem;
}
.-mr-5 {
	margin-right: 1.25rem;
}
.-mr-6 {
	margin-right: 1.5rem;
}
.-mr-7 {
	margin-right: 1.75rem;
}
.-mr-8 {
	margin-right: 2rem;
}
.-mb-1 {
	margin-bottom: 0.25rem;
}
.-mb-2 {
	margin-bottom: 0.5rem;
}
.-mb-3 {
	margin-bottom: 0.75rem;
}
.-mb-4 {
	margin-bottom: 1rem;
}
.-mb-5 {
	margin-bottom: 1.25rem;
}
.-mb-6 {
	margin-bottom: 1.5rem;
}
.-mb-7 {
	margin-bottom: 1.75rem;
}
.-mb-8 {
	margin-bottom: 2rem;
}
.-ml-1 {
	margin-left: 0.25rem;
}
.-ml-2 {
	margin-left: 0.5rem;
}
.-ml-3 {
	margin-left: 0.75rem;
}
.-ml-4 {
	margin-left: 1rem;
}
.-ml-5 {
	margin-left: 1.25rem;
}
.-ml-6 {
	margin-left: 1.5rem;
}
.-ml-7 {
	margin-left: 1.75rem;
}
.-ml-8 {
	margin-left: 2rem;
}

/* Paddings */
.-p-1 {
	padding: 0.25rem;
}
.-p-2 {
	padding: 0.5rem;
}
.-p-3 {
	padding: 0.75rem;
}
.-p-4 {
	padding: 1rem;
}
.-p-5 {
	padding: 1.25rem;
}
.-p-6 {
	padding: 1.5rem;
}
.-p-7 {
	padding: 1.75rem;
}
.-p-8 {
	padding: 2rem;
}
.-pt-1 {
	padding-top: 0.25rem;
}
.-pt-2 {
	padding-top: 0.5rem;
}
.-pt-3 {
	padding-top: 0.75rem;
}
.-pt-4 {
	padding-top: 1rem;
}
.-pt-5 {
	padding-top: 1.25rem;
}
.-pt-6 {
	padding-top: 1.5rem;
}
.-pt-7 {
	padding-top: 1.75rem;
}
.-pt-8 {
	padding-top: 2rem;
}
.-pr-1 {
	padding-right: 0.25rem;
}
.-pr-2 {
	padding-right: 0.5rem;
}
.-pr-3 {
	padding-right: 0.75rem;
}
.-pr-4 {
	padding-right: 1rem;
}
.-pr-5 {
	padding-right: 1.25rem;
}
.-pr-6 {
	padding-right: 1.5rem;
}
.-pr-7 {
	padding-right: 1.75rem;
}
.-pr-8 {
	padding-right: 2rem;
}
.-pb-1 {
	padding-bottom: 0.25rem;
}
.-pb-2 {
	padding-bottom: 0.5rem;
}
.-pb-3 {
	padding-bottom: 0.75rem;
}
.-pb-4 {
	padding-bottom: 1rem;
}
.-pb-5 {
	padding-bottom: 1.25rem;
}
.-pb-6 {
	padding-bottom: 1.5rem;
}
.-pb-7 {
	padding-bottom: 1.75rem;
}
.-pb-8 {
	padding-bottom: 2rem;
}
.-pl-1 {
	padding-left: 0.25rem;
}
.-pl-2 {
	padding-left: 0.5rem;
}
.-pl-3 {
	padding-left: 0.75rem;
}
.-pl-4 {
	padding-left: 1rem;
}
.-pl-5 {
	padding-left: 1.25rem;
}
.-pl-6 {
	padding-left: 1.5rem;
}
.-pl-7 {
	padding-left: 1.75rem;
}
.-pl-8 {
	padding-left: 2rem;
}

/*colors*/
.coss.blue1 {
	color: var(--blue1);
}
.coss.blue2 {
	color: var(--blue2);
}
.coss.blue3 {
	color: var(--blue3);
}
.coss.blue4 {
	color: var(--blue4);
}
.coss.green1 {
	color: var(--green1);
}
.coss.green2 {
	color: var(--green2);
}
.coss.green3 {
	color: var(--green3);
}
.coss.green4 {
	color: var(--green4);
}
.coss.orange1 {
	color: var(--orange1);
}
.coss.orange2 {
	color: var(--orange2);
}
.coss.orange3 {
	color: var(--orange3);
}
.coss.orange4 {
	color: var(--orange4);
}
.coss.lime1 {
	color: var(--lime1);
}
.coss.lime2 {
	color: var(--lime2);
}
.coss.lime3 {
	color: var(--lime3);
}
.coss.lime4 {
	color: var(--lime4);
}
.coss.black {
	color: var(--black);
}
.coss.d-gray1 {
	color: var(--d-gray1);
}
.coss.d-gray2 {
	color: var(--d-gray2);
}
.coss.d-gray3 {
	color: var(--d-gray3);
}
.coss.gray1 {
	color: var(--gray1);
}
.coss.gray2 {
	color: var(--gray2);
}
.coss.gray3 {
	color: var(--gray3);
}
.coss.l-gray {
	color: var(--l-gray);
}
.coss.alert1 {
	color: var(--alert1);
}
.coss.alert2 {
	color: var(--alert2);
}
.coss.alert3 {
	color: var(--alert3);
}
.coss.pink {
	color: var(--pink);
}
.coss.mild {
	color: var(--mild);
}
.coss.purple {
	color: var(--purple);
}
.coss.blue1b {
	background-color: var(--blue1);
}
.coss.blue2b {
	background-color: var(--blue2);
}
.coss.blue3b {
	background-color: var(--blue3);
}
.coss.blue4b {
	background-color: var(--blue4);
}
.coss.green1b {
	background-color: var(--green1);
}
.coss.green2b {
	background-color: var(--green2);
}
.coss.green3b {
	background-color: var(--green3);
}
.coss.green4b {
	background-color: var(--green4);
}
.coss.orange1b {
	background-color: var(--orange1);
}
.coss.orange2b {
	background-color: var(--orange2);
}
.coss.orange3b {
	background-color: var(--orange3);
}
.coss.orange4b {
	background-color: var(--orange4);
}
.coss.lime1b {
	background-color: var(--lime1);
}
.coss.lime2b {
	background-color: var(--lime2);
}
.coss.lime3b {
	background-color: var(--lime3);
}
.coss.lime4b {
	background-color: var(--lime4);
}
.coss.blackb {
	background-color: var(--black);
}
.coss.d-gray1b {
	background-color: var(--d-gray1);
}
.coss.d-gray2b {
	background-color: var(--d-gray2);
}
.coss.d-gray3b {
	background-color: var(--d-gray3);
}
.coss.gray1b {
	background-color: var(--gray1);
}
.coss.gray2b {
	background-color: var(--gray2);
}
.coss.gray3b {
	background-color: var(--gray3);
}
.coss.l-grayb {
	background-color: var(--l-gray);
}
.coss.alert1b {
	background-color: var(--alert1);
}
.coss.alert2b {
	background-color: var(--alert2);
}
.coss.alert3b {
	background-color: var(--alert3);
}
.coss.pinkb {
	background-color: var(--pink);
}
.coss.mildb {
	background-color: var(--mild);
}
.coss.purpleb {
	background-color: var(--purple);
}

h1.coss {
	font-size: 2rem;
	color: var(--d-gray3);
	font-weight: 300;
	text-transform: uppercase;
}
h2.coss {
	font-size: 1.75rem;
	color: var(--d-gray3);
	font-weight: 300;
}
h3.coss {
	font-size: 1.5rem;
	margin: 0.75rem auto;
	color: var(--d-gray3);
	font-weight: 300;
}
label.coss {
	display: block;
	margin: 0.75rem 0 0.25rem 0;
	font-size: 1.25rem;
	color: var(--gray2);
	font-weight: 500;
}
.sub.coss {
	font-size: 1rem;
}
label.unset.coss {
	color: unset;
	font-weight: 400;
	font-size: 1rem;
}

/*content boxes & organization*/
section.coss {
	margin: 1.5rem 0;
	width: auto;
	display: flex;
	align-items: flex-start;
	flex: 0 0;
}
section.coss > article {
	background-color: white;
	box-shadow: var(--shadow);
	border-radius: 0.25em;
	width: 100%;
	margin-right: 1.5rem;
}
section.coss > article:last-of-type {
	margin-right: 0;
}
section.coss > article > .title {
	padding: 1rem var(--margin1);
	margin-bottom: calc(var(--margin1) - 1rem);
	border-bottom: 1px solid var(--gray2);
}
section.coss > article > .title.with-btn {
	position: relative;
}
section.coss > article > .title.with-btn > button,
section.coss > article > .title.with-btn > .table-slider {
	position: absolute;
	right: var(--margin1);
	top: 1rem;
}
section.coss > article > .title > h2 {
	margin: auto;
}
section.coss > article > .content {
	padding: 1rem 0;
	margin: 0 var(--margin1);
	border-bottom: 1px solid var(--gray3);
}

section.coss > article > .content:last-of-type {
	padding-bottom: var(--margin1);
	border-bottom: none;
}
section.coss > article > .content > :first-of-type {
	margin-top: 0;
}
section.coss > article > .content .subsection {
	width: 100%;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gray3);
	margin-bottom: 1rem;
}
section.coss > article > .content.flex .subsection-wrapper {
	width: 100%;
	padding-right: 1rem;
	border-right: 1px solid var(--gray3);
	margin-right: 1rem;
}
section.coss > article > .content.flex .subsection-wrapper:last-of-type {
	padding-right: 0;
	border-right: none;
	margin-right: 0;
}
section.coss
	> article
	> .content.flex
	.subsection-wrapper
	> .subsection:last-of-type {
	padding-bottom: 0;
	border-bottom: none;
	margin-bottom: 0;
}
section.coss > article > .content .subsection > :first-of-type {
	margin-top: 0;
}
section.coss > article > .content .subsection:last-of-type {
	padding-bottom: 0;
	border-bottom: none;
	margin-bottom: 0;
}
section.coss > article > .content .subsection > .split {
	display: flex;
}
section.coss > article > .content .subsection > .split > div {
	width: 100%;
	padding-right: 0.75rem;
	border-right: 1px solid var(--l-gray);
	margin-right: 0.75rem;
}
section.coss > article > .content .subsection > .split > div > :first-of-type {
	margin-top: 0;
}
section.coss > article > .content .subsection > .split > div:last-of-type {
	width: 100%;
	padding-right: 0;
	border-right: 0;
	margin-right: 0;
}
section.coss .flex {
	display: flex;
}
section.coss .flex.wrap {
	flex-wrap: wrap;
}
section.coss .flex.column {
	flex-direction: column;
}
.material-icons.coss {
	display: inline;
	font-size: inherit;
	color: inherit;
}
button .material-icons.coss {
	margin-right: 0.75rem;
	vertical-align: middle;
}
a.coss,
a.coss:link {
	color: var(--blue2);
	transition: var(--ease);
}
a.coss:hover,
a.coss:visited {
	color: var(--blue3);
}
a.coss:active,
a.coss:link:active {
	color: var(--blue1);
}
a > .material-icons.coss {
	padding: 0.25em;
	color: var(--blue2);
	cursor: pointer;
	transition: var(--ease);
}
a > .material-icons.coss:hover {
	color: var(--blue3);
}
a > .material-icons.coss:active {
	color: var(--blue1);
}
a > .material-icons.coss.delete {
	color: var(--alert2);
}
a > .material-icons.coss.delete:hover {
	color: var(--alert3);
}
a > .material-icons.coss.delete:active {
	color: var(--alert1);
}
a > .material-icons.coss.xx {
	color: var(--pink);
}
a > .material-icons.coss.xx:hover {
	opacity: 0.75;
}
a > .material-icons.coss.xx:active {
	color: var(--alert1);
}

button.coss {
	margin: auto;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	color: white;
	padding: 0.5em 1.5em;
	text-transform: uppercase;
	border-radius: 0.25em;
	background-color: var(--blue2);
	border: calc(0.075rem + 0.05em) solid var(--blue2);
	transition: var(--ease);
	cursor: pointer;
}
button.coss.alt {
	color: var(--blue2);
	background-color: transparent !important;
}
button.coss:focus {
	border-color: var(--blue3);
	outline: none;
}
button.coss:hover {
	background-color: var(--blue3);
	border-color: var(--blue3);
}
button.coss:active,
button.coss.active {
	background-color: var(--blue1);
}
button.coss:disabled {
	color: var(--gray1);
	background-color: var(--gray3);
	border-color: var(--gray3);
	cursor: not-allowed;
}
button.coss.alt:hover {
	color: var(--blue3);
	border-color: var(--blue3);
}
button.coss.alt:active,
button.coss.alt.active {
	color: var(--blue1);
}
button.coss.alt:disabled {
	color: var(--gray3);
	border-color: var(--gray3);
	cursor: not-allowed;
}
button.coss.green {
	background-color: var(--green2);
	border: calc(0.075rem + 0.05em) solid var(--green2);
}
button.coss.green:focus {
	border-color: var(--green3);
	outline: none;
}
button.coss.green:hover {
	background-color: var(--green3);
	border-color: var(--green3);
}
button.coss.green:active,
button.coss.green.active {
	background-color: var(--green1);
}
button.coss.green.alt {
	color: var(--green2);
	background-color: transparent !important;
}
button.coss.green.alt:hover {
	color: var(--green3);
	border-color: var(--green3);
}
button.coss.green.alt:active,
button.coss.green.alt.active {
	color: var(--green1);
}
button.coss.green.hover {
	background-color: var(--green3);
	border-color: var(--green3);
}
button.coss.green.alt.hover {
	color: var(--green3);
	border-color: var(--green3);
}
.coss.small {
	font-size: 0.8rem;
}
.coss.large {
	font-size: 1.2rem;
}
button.coss.alert {
	background-color: var(--alert3);
	border-color: var(--alert3);
}
button.coss.alert:hover {
	background-color: var(--alert2);
	border-color: var(--alert2);
}
button.coss.alert:active,
button.coss.alert.active {
	background-color: var(--alert3);
	border-color: var(--alert2);
}
button.coss.alert.alt {
	color: var(--alert3);
	border-color: var(--alert3);
}
button.coss.alert.alt:hover {
	background-color: var(--alert3);
	border-color: var(--alert3);
	color: var(--alert3);
}
button.coss.alert.alt:active,
button.coss.alert.alt.active {
	background-color: var(--alert3);
	border-color: var(--alert3);
	color: var(--alert2);
}
.slider.coss {
	background-color: var(--blue1);
	border-radius: 0.7em;
	padding: 0.2em;
	display: inline-block;
}
.slider.coss.green {
	background-color: var(--green2);
}
.slider button.coss.green {
	border: none;
	color: var(--green1);
}
.slider button.coss.green:focus {
	border-color: var(--green3);
}
.slider button.coss.green:not(.active):hover {
	background-color: var(--green3);
	color: var(--green1);
}
.slider button.coss {
	font-size: inherit;
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	border: none;
	background-color: var(--blue1);
	border-color: var(--blue1);
	color: var(--blue2);
}
.slider .active.coss {
	background-color: white !important;
	cursor: unset;
}
.slider button.coss:focus {
	border-color: var(--blue2);
}
.slider button.coss:not(.active):hover {
	background-color: var(--blue2);
	color: var(--blue3);
}
.slider.disabled button.coss:disabled {
	color: var(--gray1);
	background-color: var(--gray2);
	border-color: var(--gray2);
	cursor: not-allowed;
}
.slider.disabled button.coss.active:disabled {
	color: var(--gray1);
	background-color: var(--gray3) !important;
	border-color: var(--gray3);
	cursor: not-allowed;
}
.slider.disabled button.coss:not(.active):hover {
	color: var(--gray1);
	background-color: var(--gray2);
}
.slider.coss.disabled {
	background-color: var(--gray2);
}
.chip {
	font-size: 1.25rem;
	padding: calc(0.25em - 1px) calc(0.75em - 1px);
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	color: var(--gray2);
	border: calc(0.075rem + 0.05em) solid var(--gray3);
	border-radius: 1.5rem;
	width: fit-content;
	transition: var(--ease);
}
.chip .zmdi-close {
	text-align: center;
	font-size: inherit;
	width: 1rem;
}
.chip.small {
	font-size: 1rem;
	padding: calc(0.25em - 1px) calc(0.75em - 1px);
}
.chip.removable {
	cursor: pointer;
	padding: calc(0.25em - 1px) calc(0.75em - 1px) calc(0.25em - 1px)
		calc(0.5em - 1px);
}
.chip.removable:hover {
	border-color: var(--alert2);
}
.chip.removable:hover .zmdi-close {
	color: var(--alert2);
}
.coss.finePrint {
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--d-gray2);
}
.coss.errorMessage {
	font-family: 'Roboto', Arial, sans-serif;
	color: var(--alert2);
	font-style: italic;
	font-size: 1rem;
}
.coss.success {
	font-family: 'Roboto', Arial, sans-serif;
	color: var(--green2);
	font-style: italic;
	font-size: 1rem;
}

/*date picker overwrite*/
.mobile_datepicker i {
	vertical-align: middle;
	font-size: 1.5rem;
	color: var(--blue2);
}
.mobile_a {
	color: white;
}
.date-picker-box2 {
	display: inline-block;
	vertical-align: middle;
	padding: 0.5rem 1rem !important;
	margin-left: 0px !important;
	width: auto;
	font-size: 1rem;
	line-height: 1rem !important;
	border-radius: 1px !important;
	border: 0.05em solid var(--l-gray) !important;
	background-color: var(--l-gray) !important;
	cursor: pointer;
	color: var(--black) !important;
}

/*TEXT MESSAGING*/
.coss.outbound span,
.coss.inbound span {
	padding: 1rem;
	background-color: var(--l-gray);
	display: inline-block;
	border-radius: 5px;
	max-width: 55%;
	line-height: 1.25;
	text-align: left;
	overflow-wrap: break-word;
}
.coss.outbound span {
	background-color: var(--blue2);
	color: white;
}
.coss.outbound {
	text-align: right;
}
.coss.inbound {
	text-align: left;
}
.coss.rightTriangle,
.coss.leftTriangle {
	width: 0;
	height: 0;
	margin-top: -3px;
	border-bottom: 12px solid transparent;
}
.coss.rightTriangle {
	float: right;
	border-right: 12px solid var(--blue2);
}
.coss.leftTriangle {
	border-left: 12px solid var(--l-gray);
}

/*CTA INPUT*/
@keyframes shadow-pulse {
	0% {
		box-shadow: 0 0 0 0px var(--blue2);
	}
	50% {
		box-shadow: 0px 0px 0px 2px var(--blue2);
	}
	100% {
		box-shadow: 0 0 0 0px var(--blue2);
	}
}
.coss.incomplete {
	animation: shadow-pulse 2s infinite;
}

/*profile images*/
.coss.profileImage img {
	height: 5rem;
	width: 5rem;
	border-radius: 50%;
}
.coss.profileImage .svg {
	height: 40%;
	opacity: 0.5;
	width: 50%;
	background-color: transparent;
	cursor: pointer;
}
.coss.profileImage {
	height: 5rem;
	width: 5rem;
	background: linear-gradient(var(--gray3), var(--gray2));
	border-radius: 50%;
	cursor: pointer;
}
.coss.profileImage.addPhoto {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*popups*/
.popup-background.coss {
	position: fixed;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: var(--popup-bg);
	z-index: 300;
}
.popup-background-transparent.coss {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	z-index: 12;
}
.popup-background.coss article {
	background: none;
	box-shadow: none;
}
.popup.coss {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	box-shadow: var(--shadow);
	height: auto;
	width: 28rem;
	max-height: 40rem;
	border-radius: 0.5rem;
	margin: 15vh auto;
	padding-bottom: 1.5rem;
	background-color: white;
}
.popup .title.coss {
	flex-grow: 0;
	flex-shrink: 0;
	color: var(--d-gray1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 3rem;
	border-bottom: 1px solid var(--gray3);
	vertical-align: middle;
	transition: var(--ease);
}
.popup .coss.noHeader {
	position: relative;
	height: 2rem;
}
.popup .coss.noHeader > div {
	position: absolute;
	right: 1rem;
	top: 0.75rem;
}
.popup .content.coss {
	padding: 0.5rem 3rem;
	margin-bottom: 0.5rem;
}
.popup .content.scroll.coss {
	overflow-x: hidden;
	overflow-y: scroll;
}
.popup .buttons.coss {
	padding: 0 3rem;
}
/* POPUP WITH BLACK OVERLAY */
.popup-container {
	position: fixed;
	z-index: 500;
}
.popup.coss.confirmation-popup {
	position: fixed;
	left: 50%;
	top: 20%;
	transform: translate(-50%, -20%);
	z-index: 501;
	line-height: 1.5;
}
.popup-container.hidden {
	display: none;
}

/* SHADOW BOX FADE */
.fade_d_o {
	animation-name: show;
}
@keyframes show {
	0% {
		opacity: 0;
	}
}
.animated {
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

.close.coss:before {
	content: '\2715';
}
.close.coss {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 1.25rem;
	width: 1.5em;
	height: 1.5em;
	padding: 0.25em;
	background-color: transparent;
	border-radius: 50%;
	text-align: center;
	transition: var(--ease);
	margin-right: -0.25em;
	cursor: pointer;
}
.close.coss:hover {
	background-color: var(--l-gray);
	color: var(--alert3);
}
.popup button.coss {
	width: 100%;
	flex-shrink: 0;
	margin-bottom: 0.5rem;
}

input.coss,
textarea.coss,
select.coss {
	box-sizing: border-box;
	font-size: 1rem;
	height: auto;
	padding: 0.5em 0.75em !important;
	border: 0.05em solid var(--l-gray);
	background-color: var(--l-gray);
	border-radius: 1px;
	outline: none;
	transition: var(--ease);
}
input.coss {
	display: inline-block;
	margin: 0.25rem;
	margin-left: 0;
}
select.coss {
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-block;
	margin: 0.25rem 0;
	background-size: 2rem;
	background-position: right 50%;
	background-repeat: no-repeat;
	background-image: url(https://assets-cdn.carwars.com/platform_a/img/down_arrow.png);
	padding-right: 2em !important;
}
textarea.coss {
	line-height: 1.5em;
	min-width: 50%;
	min-height: 10.5em;
	display: block;
	margin: 0.25rem 0;
	resize: none;
}
input.coss:focus,
textarea.coss:focus,
select.coss:focus {
	border-color: var(--blue3);
}
input.coss:hover,
textarea.coss:hover,
select.coss:hover {
	border-color: var(--gray2);
}
.coss::placeholder,
.coss::-webkit-input-placeholder,
.coss:-ms-input-placeholder {
	color: var(--gray2);
}
.checkbox {
	font-size: 2rem;
	cursor: pointer;
	color: var(--blue2);
}
.checkbox:hover {
	color: var(--blue3);
}
.checkbox.green {
	color: var(--green2);
}
.checkbox.green:hover {
	color: var(--green3);
}
.checkbox-with-label {
	display: flex;
	align-items: center;
}
.checkbox-with-label label.coss {
	padding: 0;
	margin: 0;
}
.checkbox .zmdi {
	left: 0;
	top: 0;
	width: 1.5rem;
	font-size: 1.5rem;
	text-align: center;
	position: absolute;
	z-index: 0;
	color: var(--blue2);
}
.checkbox input[type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	opacity: 0;
	margin: 0;
	cursor: pointer;
	width: 1.5rem;
	height: 1.5rem;
	z-index: 9;
}
.checkbox input[type='checkbox']:hover ~ .zmdi {
	color: var(--blue3);
}
.checkbox input[type='checkbox'] ~ .zmdi-square-o,
.checkbox input[type='checkbox']:checked ~ .zmdi-check-square {
	opacity: 1;
}
.checkbox input[type='checkbox']:checked ~ .zmdi-square-o,
.checkbox input[type='checkbox'] ~ .zmdi-check-square {
	opacity: 0;
}
input.coss.error,
textarea.coss.error,
select.coss.error {
	border-color: var(--alert2);
}

.load.coss {
	padding: 1rem;
	filter: blur(0.25px);
	stroke-dasharray: 42.5%;
	stroke: var(--green2);
	width: 3rem;
	height: 3rem;
	animation: turn 1s both infinite;
}

.zmdi-female.coss {
	color: var(--pink);
}
.zmdi-male-alt.coss {
	color: var(--blue2);
}

.table.coss {
	width: 100%;
}
.table.coss tr {
	text-align: right;
}
.table.coss:not(.all-white) tr:nth-child(even) {
	background: var(--l-gray);
}
.table.coss tr > th {
	border-bottom: 0.05rem solid var(--gray3);
}
.table.coss tr > th,
.table.coss tr > td {
	padding: 0.5rem 0.3rem;
	vertical-align: middle;
}
.table.coss.updated tr > th,
.table.coss.updated tr > td {
	max-width: 10rem;
}
.table.coss tr > th:first-child,
.table.coss tr > td:first-child {
	text-align: left;
}
.table.coss th label {
	margin: 0;
}
.table.coss th.sortable label {
	transition: var(--ease);
	cursor: pointer;
}
.table.coss th.sortable label:hover {
	color: var(--gray3);
}
.table.coss.updated th.sortable.sorted .zmdi {
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	text-align: center;
}
.table.coss.updated th.sortable .zmdi {
	display: none;
}
.table.coss.updated th.sortable.sorted.desc .zmdi {
	transform: rotate(180deg);
}
.table.coss .td-with-img {
	position: relative;
	font-size: 0;
}
.table.coss .td-with-img img {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin: 0px;
	margin-right: 0.8rem;
	padding: 0px;
	width: 1.2rem;
	height: 1.2rem;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	overflow: hidden;
}
.table.coss .td-with-img span {
	display: inline-block;
	vertical-align: middle;
	font-size: 1rem;
	width: calc(100% - 2rem);
	width: -ms-calc(100% - 2rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.data.coss {
	font-weight: 700;
	font-size: 3rem;
}
.data.big.coss {
	font-size: 6rem;
}
.data.small.coss {
	font-size: 1.5rem;
}
.donut.coss {
	width: 6.5rem;
	height: 6.5rem;
}
.donut.big.coss {
	width: 8.5rem;
	height: 8.5rem;
}
.donut.small.coss {
	width: 5rem;
	height: 5rem;
}
.donut.wide.coss {
	height: 10rem;
	width: 16rem;
}
.donut.wide.big.coss {
	height: 12rem;
}
.donut.wide.small.coss {
	height: 7rem;
}
.donut.coss label {
	font-size: 1.5rem;
}
.donut.big.coss label {
	font-size: 2rem;
}
.donut.small.coss label {
	font-size: 1rem;
}
.donut.coss .donut-text {
	display: flex;
	width: inherit;
	height: inherit;
	position: absolute;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
.donut.coss .donut-text label {
	position: relative;
	z-index: 4;
	margin: 0;
}
.donut.coss canvas {
	position: relative;
	z-index: 11;
}

.line.coss {
	width: 28rem;
}
.line.big.coss {
	width: 36rem;
}
.line.small.coss {
	width: 20rem;
}
.graph.coss {
	width: 36rem;
}
.graph.big.coss {
	width: 54rem;
}

/* Misc */
.alertCounter.updated {
	width: 1.75rem;
	height: 1.75rem;
	background: var(--alert2);
	margin: 0.25rem;
	display: flex;
	font-weight: 500;
	font-size: 1rem;
	color: white;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.alertCounter.long.updated {
	font-size: 0.8rem;
}
.zmdi.button.updated {
	font-size: 1.5rem;
	margin: 0 0.25rem;
	width: 1.5rem;
	text-align: center;
	cursor: pointer;
	transition: var(--ease);
}
.zmdi.button.updated:hover {
	opacity: 0.75;
}
.zmdi.button.updated:not(.coss) {
	color: var(--blue2);
}
.popup.coss.wide.updated {
	width: 32rem;
}
.popup.coss.twoColumn.updated {
	width: 55rem;
}
.popup.coss.twoColumn.updated .content.coss {
	display: flex;
	justify-content: space-between;
}
.popup.coss.twoColumn.updated .left,
.popup.coss.twoColumn.updated .right {
	width: calc(50% - 0.5rem);
}
.popup.wide.updated .title.coss,
.popup.twoColumn.updated .title.coss {
	padding: 0.5rem 2rem;
}
.popup.wide.updated .content.coss,
.popup.twoColumn.updated .content.coss {
	padding: 0.5rem 2rem;
}
.popup.wide.updated .buttons.coss,
.popup.twoColumn.updated .buttons.coss {
	padding: 0 2rem;
}
.popup.twoColumn.updated .buttons.coss {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}
.popup.twoColumn.updated .buttons button.coss {
	width: calc(50% - 0.5rem);
	margin-left: 0;
	margin-right: 0;
}
hr.coss {
	border: none;
	border-bottom: 1px solid var(--l-gray);
}
button.updated:not(.solo) .zmdi {
	margin-right: 0.5rem;
	margin-left: -0.25rem;
	font-size: inherit;
}
button.updated.coss.solo {
	padding: 0.5em 1.25em;
}
.upload.updated.coss {
	display: flex;
	align-items: center;
	margin: 0.25rem;
	margin-left: 0;
}
.upload.updated.coss button {
	margin: 0;
}
.upload.updated.coss label {
	margin: 0;
	margin-left: 0.5rem;
}
.upload.updated input[type='file'] {
	display: none;
}
.calendarWrap.updated {
	display: flex;
	margin: 0.25rem;
	margin-left: 0;
	align-items: center;
}
.calendarWrap.updated input {
	margin: 0;
	margin-left: 0.25rem;
}
.calendarWrap.updated .zmdi {
	width: 2rem;
	text-align: center;
	font-size: 1.5rem;
	color: var(--blue2);
	cursor: pointer;
}
.checkwrap.updated {
	display: flex;
	margin: 0.25rem;
	margin-left: 0;
	align-items: center;
}
.pagination.updated {
	margin: 0.25rem auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.pagination.updated button.coss {
	padding: 0.25rem 0.75rem;
	margin: 0;
}
.pagination.updated select.coss {
	margin: 0 0.5rem;
}
.pagination.updated .zmdi {
	font-size: 1.5rem;
}
.pagination.updated label.coss {
	margin: 0 1rem;
	color: var(--gray1);
}
.pagination.updated label.coss.ofpages {
	margin-left: 0;
	color: var(--gray2);
}
.pagination.updated label.coss.ofpages:before {
	content: 'OF';
	margin-right: 0.25rem;
}
.searchDrop.updated input {
	padding-right: 2rem !important;
}
.searchDropIcons.updated {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-right: -100%;
}
.searchDropIcons.updated .zmdi {
	margin: 0;
}
.searchDropIcons.updated .zmdi-chevron-down {
	cursor: pointer;
}
.checkWrap.updated label {
	margin: 0;
	margin-left: 0.25rem;
}
.checkWrap.updated.all {
	border-bottom: 1px solid var(--gray3);
	padding-bottom: 0.25rem;
}
.checkWrap.all.updated label {
	color: var(--gray1);
	text-transform: uppercase;
}
.dropdownWrapper.updated,
.inputWrapper.updated {
	width: 100%;
	display: flex;
	align-items: center;
	margin: 0.25rem auto;
}
.dropdownWrapper.updated .zmdi,
.inputWrapper.updated .zmdi {
	width: 2rem;
	text-align: center;
	font-size: 1.25rem;
	color: var(--gray2);
	margin-right: -2rem;
	z-index: 9;
}
.dropdownWrapper.updated select,
.inputWrapper.updated input {
	width: 100%;
	display: block;
	margin: 0;
	padding-left: 2rem !important;
}
.fusedInput.updated {
	display: flex;
	width: 100%;
	align-items: center;
	margin: 0.25rem auto;
}
.fusedInput.updated input {
	margin: 0;
	width: 100%;
}
.fusedInput.updated button {
	margin-left: calc(-1px - 0.1em - 0.075rem);
}
.addressHolder.updated > div {
	display: flex;
	margin-bottom: 0.25rem;
	width: 100%;
}
.addressHolder.updated input,
.addressHolder.updated select {
	width: 100%;
	margin: 0;
	margin-right: 0.25rem;
}
.addressHolder.updated select.state {
	width: 5.5rem;
}
.addressHolder.updated input.zip {
	width: 6.5rem;
}
.iconChip.updated {
	display: flex;
	align-items: center;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	width: calc(100% / 5 - 0.5rem);
}
.iconChip.updated .zmdi {
	font-size: 2rem;
	width: 2rem;
	text-align: center;
}
.iconChip.updated .zmdi:not(.coss) {
	color: var(--gray1);
}
.iconChip.updated .zmdi.live {
	width: 2rem;
	font-size: 1rem;
}
.iconChip.updated .small {
	width: 1.5rem;
	font-size: 1.5rem;
}
.iconChip.updated .zmdi.alert2 {
	color: var(--alert2);
}
.iconChip.updated .zmdi.orange2 {
	color: var(--orange2);
}
.iconChip.updated label.coss {
	margin: 0;
	margin-left: 0.5rem;
}
.iconChip.updated .zmdi.zmdi-swap-vertical-circle {
	transform: rotate(90deg);
}

/* ---- 3) Datepicker Custom CSS ---- */
input#trigger-range {
	box-sizing: border-box;
	box-shadow: none;
	font-size: 1rem;
	height: auto;
	/* color: var(--gray1); */
	color: #6a6a6a;
	padding: 0.5em 0.75em !important;
	/* border: 0.05em solid var(--l-gray); */
	border: 0.05em solid #eeeeee;
	/* background-color: var(--l-gray); */
	background-color: #eeeeee;
	border-radius: 1px;
	outline: none;
	user-select: none;
	min-width: 12.5rem;
	cursor: pointer;
	/* transition: var(--ease); */
	transition: 0.15s ease;
}
input#trigger-range:hover {
	/* border-color: var(--gray2); */
	border-color: #9b9b9b;
}
input#trigger-range:focus {
	/* border-color: var(--blue3); */
	border-color: #55add8;
}
.datepicker-trigger * {
	box-sizing: border-box;
}
.asd__day-button {
	outline: none;
	font-size: 0.85rem;
}
.asd__day--disabled button,
.asd__day--empty button {
	/* color: var(--gray3); */
	color: #cdcdcd;
}

/* ---- 4) BEGIN TABLET SIZES ---- */
@media screen and (max-width: 1050px), screen and (max-device-width: 1050px) {
	:root {
		font-size: 11px;
	}
	/* section.coss>article>.content .subsection .line.coss, section.coss>article>.content .subsection .line.big.coss, section.coss>article>.content .subsection .line.small.coss, section.coss>article>.content .subsection .graph.coss, section.coss>article>.content .subsection .graph.big.coss { */
	.line.coss,
	.line.big.coss,
	.line.small.coss,
	.graph.coss,
	.graph.big.coss {
		width: 48vw;
	}
}

/* ---- 5) BEGIN MOBILE SIZES ---- */
@media screen and (max-width: 450px), screen and (max-device-width: 450px) {
	:root {
		font-size: 10px;
	}
	section.coss {
		display: inherit;
	}
	section.coss article {
		margin: 1.5rem 0;
	}
	section.coss .flex {
		display: inherit;
	}
	section.coss > article > .content.flex .subsection-wrapper {
		padding-right: 0;
		border-right: none;
		border-bottom: 1px solid var(--gray3);
	}
	section.coss > article > .content.flex .subsection-wrapper:last-of-type {
		border-bottom: none;
		padding-top: 1rem;
	}
	section.coss > article > .content .subsection > .split {
		display: inherit;
	}
	section.coss > article > .content .subsection > .split > div {
		width: 100%;
		padding-bottom: 0.75rem;
		padding-right: 0;
		border-bottom: 1px solid var(--l-gray);
		border-right: 0;
		margin-bottom: 0.75rem;
		margin-right: 0;
	}
	section.coss > article > .content .subsection > .split > div:last-of-type {
		width: 100%;
		padding-bottom: 0;
		border-bottom: 0;
		margin-bottom: 0;
	}
	.line.coss,
	.line.big.coss,
	.line.small.coss,
	.graph.coss,
	.graph.big.coss {
		width: 100%;
	}
}