@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

:root{
	--accent-color: 86, 84, 125;
	--gradient-color-1: 247, 129, 71;
	--gradient-color-2: 255, 98, 21;
}

html, body {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	font-family: 'Lato', sans-serif;
}

.maintenance_page{
	z-index: 1300;
	position: absolute;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	flex-direction: column;
}

.maintenance_container{
	max-width: 600px;
}
.maintenance_container .title{
	font-size: 3.3rem;
	text-align: center;
	margin-bottom: 10px;
}

.maintenance_container .body{
	font-size: 1.1rem;
	text-align: center;
}
.maintenance_page .img{
	font-size: 1.2rem;
	text-align: center;
	margin-top: 50px;
	width: 70%;
	max-width: 700px;
}

@media (max-width: 768px) {
	.maintenance_container .title{
		font-size: 1.9rem;
	}
	.maintenance_container .body{
		font-size: 1rem;
	}
	.maintenance_page .img{
		width: 80%;
	}
}

.barscroll {
	scrollbar-width: thin !important;  /* Firefox */
	scrollbar-width: 6px !important;
	scrollbar-color: light !important;
	transition: all 400ms !important;
}

.barscroll::-webkit-scrollbar{
	height: 6px;
	width: 6px;
}

.barscroll::-webkit-scrollbar-thumb {
    background-color: #CDCDCD;
    box-sizing: border-box;
    background-clip: content-box;
}

.redact {
	background-color: #1e1e1e;
	color: #1e1e1e;
	user-select: none;
	font-size: 0.75rem;
}

.hidden{
	display: none !important;
}

.s_temp_hide {
	display: none !important;
}


.menu .icon_container .active{
	box-shadow: inset 0 -0.175em white	
}

.logo_text {
    font-family: 'Poiret One', cursive;
	font-weight: 400;
	font-size: 106px;
	margin: 0px;
	color: #666666;
}
.logo_text:nth-of-type(1) {
    line-height: 3rem;
    margin-left: -44px;
}

.by_line {
	text-align: right;
	margin-top: -10px;
	margin-bottom: 40px;
	font-size: 16px;
	margin-right: 5px;
	font-weight: normal;
	color: #666666;
}

.splash {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 1400;
	background-color: white;
}

[data-form-target] {
	padding: 0px;
	margin: 0px;
	border: 0px;
	width: 100vw;
	height: 100%;
	display: none;
	will-change: opacity;
	background-color: white;
	position: absolute;
	left: 0px;
	top: 0px;
}

section.body {
	transition: transform 0.6s ease-in-out, height .6s ease-in-out;
	position: absolute;
    width: 100vw;
    height: calc(100vh - 175px);
    left: 0px;
    top: 65px;
}

section.body.expand {
	height: calc(100vh - 65px);
}

section.menu {
	height: 40px;
	justify-content: space-between;
	background-color: #333333;
	color: white;
	align-items: center;
	padding: 0px 20px;
	z-index: 600;
	position: relative;
	display: none;
}


section.menu .icon_container {
	display: flex;
	justify-content: center;
	align-items: center;
}





section.menu .icon_container > .disabled{
	opacity: .3;
	pointer-events: none;
	cursor: wait;
}

section.menu .icon_container i,
section.menu .icon_container svg {
	transform: scale(1.15);
}


section.menu .icon_container [data-action="reload"],
section.menu .icon_container [data-action="open"],
section.menu .icon_container [data-action="toggle_observer"],
section.menu .icon_container [data-action="notifications"] {
	height: 40px;
	width: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
    transition: box-shadow 0.4s, opacity 600ms;
}

section.menu .icon_container [data-action="reload"]:hover,
section.menu .icon_container [data-action="open"]:hover,
section.menu .icon_container [data-action="toggle_observer"]:hover,
section.menu .icon_container [data-action="notifications"]:hover {
	opacity: .5;
}

section.menu .icon_container [data-action="notifications"] .icon_alert,
section.menu .icon_container [data-action="notifications"] .icon_empty {
	position: absolute;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 50%;
	transform: translate(-50%);
}

section.menu .icon_container [data-action="notifications"] .icon_alert,
section.menu .icon_container [data-action="notifications"].alerts .icon_empty {
	display: none;
}

section.menu .icon_container [data-action="notifications"] .icon_empty,
section.menu .icon_container [data-action="notifications"].alerts .icon_alert {
	display: block;
}

section.menu .icon_container [data-action] > .indicator{
	position: absolute;
    width: 12px;
    height: 12px;
    background-color: #20cc24;
    border-radius: 50%;
    top: 14px;
    right: 4px;
    opacity: 1;
    box-sizing: border-box;
    border: 2px solid #333333;
    transform: translate(50%, -50%);
	transition: all 300ms;
}

section.menu .icon_container [data-action][data-state="off"] > .indicator{
	opacity: 0;
}

section.menu .icon_spacer {
	width: 30px;
}

section.menu .icon_divider {
	width: 60px;
	position: relative;
}

section.menu .icon_divider::before {
	content: '';
	width: 1px;
	height: 30px;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: rgba(255, 255, 255, 0.1);
}

.icon_spacer.rep--remove {
	width: 0px !important;
}

section.menu .lines {
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.6s;
}

section.menu .lines.open {
	transform: translate(-4px);
}

section.menu .lines div {
	width: 20px;
    background-color: white;
    margin: 2px 0px;
    border-radius: 20px;
    height: 2px;
    box-sizing: border-box;
	transition: transform 0.6s, margin 0.6s, opacity 0.4s;
	transform-origin: center center;
	will-change: transorm, margin, opacity;
}

section.menu .lines.open div:nth-of-type(1) {
	transform: rotate(45deg) translate(6px, 0px);   
    margin: 0px;
}

section.menu .lines.open div:nth-of-type(2) {
	opacity: 0;
	transform: translate(-6px, 0px);
}

section.menu .lines.open div:nth-of-type(3) {
	transform: rotate(-45deg) translate(6px, 0px);
    margin: 0px;
}

section.menu img {
	height: 20px;
}

section.menu .slide_out {
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: ghostwhite;
	color: #333333;
	box-sizing: border-box;
	margin: 0px;
	padding: 20px 0px;
	height: 100vh;
	transform: translate(-100%);
	transition: opacity 0.4s, transform 0.4s, box-shadow 1.2s;
	width: 320px;
	max-width: 100%;
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0);
	overflow-y: auto;
	overflow-x: hidden;
}

section.menu .slide_out ul {
	margin: 0px;
	padding: 0px;
	font-weight: 700;
	font-size: 14px;
}

section.menu .slide_out > ul {
	padding: 5px 15px;
	cursor: pointer;
}

section.menu .slide_out h2 {
	background-color: rgba(var(--accent-color), 1);
	color: white;
	padding: 5px 15px;
	margin: 20px 0px 0px;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	word-spacing: 2px;
}

section.menu .slide_out.open {
	transform: translate(0px);
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
}

section.menu .slide_out ul li {
	list-style-type: none;
	padding: 5px 0px;
	margin-left: 15px;
}

section.menu ul li[data-url] {
	transition: color 0.4s, background-color 0.4s;
	cursor: pointer;
	border-bottom: 1px dotted rgba(var(--accent-color), 1);
	display: inline-block;
	font-weight: 500;
}

section.menu ul li[data-placeholder] {
	transition: color 0.4s, background-color 0.4s;
	cursor: pointer;
	border-bottom: 1px dotted rgba(var(--accent-color), 1);
	display: inline-block;
	font-weight: 500;
	background-color: rgba(87, 86, 123, 0.1);
    transform: translate(-45px, 5px);
    width: calc(100% - 30px);
    padding-left: 75px;
    margin-left: 0px;
}

section.menu ul li[data-placeholder]:hover {
	color: rgba(var(--accent-color), 1);
}

section.menu .slide_out .shared_forms ul > li > ul > [data-url] {
	background-color: rgba(87, 86, 123, 0.1);
	transform: translate(-15px, 5px);
	width: calc(100% - 30px);
	padding-left: 45px;
	margin-left: 0px;
}

section.menu .slide_out .shared_forms ul > li > ul > li > ul [data-url] {
	background-color: rgba(87, 86, 123, 0.1);
	transform: translate(-45px, 5px);
	width: 100%;
	padding-left: 45px;
	margin-left: 0px;
}

section.menu .slide_out .shared_forms > ul > li > ul > li {
	padding: 5px 0px;
	margin-left: 30px;
}

section.menu .slide_out .shared_forms li[data-url]:hover {
	color: rgba(var(--accent-color), 1);
}

section.menu .slide_out .shared_forms li[data-url].selected {
	/* background-color: rgba(87, 86, 123, 0.66); */
	background-color: #323232;
	color: white;
}

section.menu .slide_out .shared_forms [data-practice-name] {
	cursor: pointer;
}

section.menu .slide_out .owned_forms {
	display: none;
}

section.menu .slide_out .owned_forms ul > li > ul > [data-url] {
	background-color: rgba(87, 86, 123, 0.1);
	transform: translate(-15px, 5px);
	width: calc(100% - 30px);
	padding-left: 45px;
	margin-left: 0px;
}

section.menu .slide_out .owned_forms ul > li > ul > li > ul [data-url] {
	background-color: rgba(87, 86, 123, 0.1);
	transform: translate(-45px, 5px);
	width: 100%;
	padding-left: 45px;
	margin-left: 0px;
}

section.menu .slide_out .owned_forms > ul > li > ul > li {
	padding: 5px 0px;
	margin-left: 30px;
}

section.menu .slide_out .owned_forms li[data-url]:hover {
	color: rgba(var(--accent-color), 1);
}

section.menu .slide_out .owned_forms li[data-url].selected {
	/* background-color: rgba(87, 86, 123, 0.66); */
	background-color: #323232;
	color: white;
}

section.menu .slide_out > ul > li ul {
	/* display: none; */
}

section.menu .slide_out .contacts ul {
	
}

section.menu .observer_menu.hidden {
	display: flex;
	opacity: 0;
	pointer-events: none;
	max-height: 0px;
}

section.menu .observer_menu{
	position: fixed;
	top: 40px;
	right: 0px;
	box-shadow: 0px 0px 40px rgba(0,0,0,.5);
	background-color: ghostwhite;
	color: #333333;
	max-height: min(470px, 75%);
	overflow-y: scroll;
	padding-right: 0px;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	width: 300px;
	opacity: 1;
	pointer-events: 1;
	flex-direction: column;
	display: flex;
	transition: all 400ms;
}

section.menu .notification_panel.hidden {
    opacity: 0;
    pointer-events: none;
    max-height: 0px;
}

section.menu .notification_panel {
	position: fixed;
	top: 40px;
	right: 0px;
	box-shadow: 0px 0px 40px rgba(0,0,0,.5);
	background-color: ghostwhite;
	color: #333333;
	/* max-height: calc(100vh - 40px); */
	width: 420px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    pointer-events: all;
    opacity: 1;

    transition: all 400ms;
    
}

section.menu .notification_panel {

}

section.menu .notification_panel .empty_message {
	text-align: center;
	padding: 0px 15px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
section.menu .observer_menu::-webkit-scrollbar,
section.menu .notification_panel::-webkit-scrollbar {
	display: none;
}

section.menu .observer_menu .body > ul{
	padding: 0px;
    margin: 0px;
    list-style: none;
}
section.menu .observer_menu .body > ul > li{
	padding: 15px 30px 15px 20px;
	display: flex;
	flex-wrap: wrap;
	cursor: pointer;
	position: relative;
}

section.menu .observer_menu .body > ul > li.hide{
	display: none;
}


section.menu .observer_menu .body > ul > li.active::before{
	content: '';
	position: absolute;
    width: 12px;
    height: 12px;
    background-color: #20cc24;
    border-radius: 50%;
    top: 50%;
    right: 20px;
    box-sizing: border-box;
    border: 3px solid #98e6ac;
    transform: translate(50%, -50%);
    transition: all 300ms;
}

section.menu .observer_menu .body > ul > li:hover{
	background-color: rgba(var(--accent-color), .2) !important;
}

section.menu .observer_menu .body > ul > li:not(.hide):nth-of-type(even){
	background-color: #E8E8F2;
}

section.menu .observer_menu .body > ul > li .practice{
	font-weight: bold;
	flex: 1 1 100%;
}

section.menu .observer_menu .body > ul > li .name{
	padding-top: 3px;
    display: block;
    font-size: 12px;
    font-weight: normal;
	flex: 1 1 100%;
}


section.menu .notification_panel table{
	display: flex;
	flex-direction: column;
	border-collapse: collapse;
}
section.menu .notification_panel table > tr:nth-of-type(even){
	background-color: #E8E8F2;
}
section.menu .notification_panel table > tr:nth-of-type(odd){
}
section.menu .notification_panel table > tr[data-new="true"]:nth-of-type(even){
	border-left: 10px solid rgba(var(--accent-color), 1);
}
section.menu .notification_panel table > tr[data-new="true"]:nth-of-type(odd){
	border-left: 10px solid rgba(var(--accent-color), .95);
}
section.menu .notification_panel table > tr{
	border-left: 10px solid rgba(var(--accent-color), .1);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10px 20px;
}

section.menu .notification_panel table > tr > td{
	padding: 6px 0px;
}
section.menu .notification_panel table > tr > td[data-column="title"]{
	order: 1;
	font-weight: bold;
}
section.menu .notification_panel table > tr > td[data-column="title"].clickable{
	cursor: pointer;
}
section.menu .notification_panel table > tr > td[data-column="title"].clickable:hover{
	text-decoration: underline;
}
section.menu .notification_panel table > tr > td[data-column="date"] {
	order: 2;
	font-size: 12px;
}
section.menu .notification_panel table > tr > td[data-column="message"] {
	order: 3;
	flex: 0 0 100%;
	line-height: 1.4rem;
}

section.menu .slide_out .contacts h3{
	font-size: 0.85rem;
    padding: 0 15px 0;
    margin: 15px 0 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

section.menu .slide_out .contacts [data-contact-category] {
    padding: 5px 0px;
    margin-left: 15px;
}

section.menu .slide_out .contacts ul li {
	cursor: pointer;
	margin-left: 0px;
	padding: 5px 0px 5px;
}

section.menu .slide_out .contacts ul li .contact_name {
	padding: 5px 0px 0px;
	display: block;
	margin-left: 30px;
}

section.menu .slide_out .contacts ul li .contact_practice_type {
	margin-left: 30px;
	display: block;
}

section.menu .slide_out .contacts ul li .contact_practice {
	padding-top: 3px;
	display: block;
	font-size: 12px;
	font-weight: normal;
	margin-left: 30px;
}

section.menu .slide_out .contacts ul li .contact_phone {
	padding-top: 3px;
	display: block;
	font-size: 12px;
	font-weight: normal;
	margin-left: 30px;
}

section.menu .slide_out .contacts ul li .contact_custom_label_2,
section.menu .slide_out .contacts ul li .contact_custom_label {
	padding-top: 3px;
	display: block;
	font-size: 12px;
	font-weight: normal;
	margin-left: 30px;
}


section.body .content {
	position: absolute;
	background-color: white;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 20;
}

section.body .content_content {
	width: 100%;
    height: 100%;
    display: flex;
	justify-content: center;
	align-items: center;
    position: relative;
}

section.login form {
	width: 320px;
	margin: 0px;
	padding: 0px;
	display: block;
	font-family: 'Lato', sans-serif;
	position: relative;
}

section.login form.hide {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

section.login {
	position: absolute;
	display: none;
	left: 0px;
	top: 0px;
	z-index: 1200;
	background-color: white;
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
	justify-content: center;
	align-items: center;
}

section.login .form_container{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

section.login .password,
section.login .set_password {
	transition: height 0.4s, opacity 0.4s;
	height: 120px;
}

section.login .password.hide,
section.login .set_password.hide {
	height: 0px;
	pointer-events: none;
	user-select: none;
}

section.login fieldset {
	border: 0px;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 320px;
}

section.login label {
	display: block;
	width: 320px;
	box-sizing: border-box;
	position: relative;
	padding: 0px;
	margin: 0px;
	font-size: 12px;
	font-weight: 700;
}

section.login form input {
	border-radius: 3px;
	border: 1px solid grey;
	font-size: 18px;
	display: flex;
	width: 320px;
	box-sizing: border-box;
	position: relative;
	padding: 0px;
	height: 44px;
	display: flex;
	margin: 5px 0px;
	padding: 0px 10px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
}

section.login form input {
	justify-content: center;
	align-items: center;
	transition: height 0.4s, margin 0.4s, opacity 0.4s;
}


section.login form input[type="submit"] {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	color: #464646;
}

section.login form input[type="submit"].hide {
	height: 0px;
	margin: 0px;
	opacity: 0;
	pointer-events: none;
}

section.login .lightbox.enter_pin .lightbox_container{
	max-width: 500px;
}

section.login .lightbox.enter_pin .lightbox_content{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

section.login .lightbox.enter_pin .digits{
    gap: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
	margin: 24px 0 ;
}

section.login .lightbox.enter_pin .digits > .digit{
	text-align: center;
	width: 46px;
    height: 46px;
    border: none;
    border-bottom: 2px solid rgba(var(--accent-color), .25);
	background-color: rgba(var(--accent-color), .1);
    box-sizing: border-box;
    font-size: 2rem;
	border-radius: 2px;
}

section.login .lightbox.enter_pin .digits > .digit:focus{
	background-color: rgba(var(--accent-color), .15);
    outline: none;
    border-bottom: 2px solid rgba(var(--accent-color), 1);
}

section.login .lightbox.enter_pin .close{
	cursor: pointer;
}

section.login .lightbox.enter_pin .icon_container{
	display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: rgba(var(--accent-color), 1);
    background-color: rgba(var(--accent-color), .1);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    margin: auto;
}

section.login .lightbox.enter_pin .title_container{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}

section.login .lightbox.enter_pin .body_container{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #1e1e1e;
	line-height: 1.35rem;
}

section.login .lightbox.enter_pin .body_container p{
	margin: 10px 0 0 0;
}

section.login .lightbox.enter_pin .body_container .highlight{
	color: rgba(var(--accent-color), 1);
	font-weight: bold;
}

section.login .lightbox.enter_pin .button_container{
	display: flex;
	justify-content: center;
	align-items: center;
}

section.login .lightbox.enter_pin .button_container input{
	padding: 10px 44px;
    text-transform: uppercase;
    text-align: center;
    font-size: 1rem;
    background-color: rgba(var(--accent-color), 1);
    color: white;
    letter-spacing: 1px;
    box-sizing: border-box;
    border: none;
    border-radius: 3px;
    transition: all 300ms;
}

section.login .lightbox.enter_pin .button_container input:hover{
    background-color: rgba(var(--accent-color), .8);
}




optgroup[label],
option[disabled] {
	/* background-color: rgba(var(--accent-color), 1);
	color: white; */
	color: rgba(var(--accent-color), 1);
}
optgroup[label] > option{
	color: #323232;
	
}


/* ----- */

section.body .content form {
	display: flex;
	width: 640px;
	flex-wrap: wrap;
}

section.body fieldset {
	border: 0px;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	position: relative;
	display: block;
	flex: 1 1 100%;
	margin: 5px;
}

section.body fieldset.half {
	flex: 1 1 45%;
}

section.body fieldset.third {
	flex: 1 1 30%;
}

section.body label {
	display: block;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding: 0px;
	margin: 0px;
	font-size: 12px;
	font-weight: 700;
}

section.body textarea,
section.body input,
section.body select {
	border-radius: 3px;
	border: 1px solid grey;
	font-size: 18px;
	display: flex;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding: 0px;
	height: 44px;
	display: flex;
	margin: 5px 0px;
	padding: 0px 10px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
}

section.body input,
section.body select {
	justify-content: center;
	align-items: center;
	transition: height 0.4s, margin 0.4s, opacity 0.4s;
}

section.body textarea{
    height: 200px;
}

section.body input[type="submit"] {
	width: 320px;
	justify-self: center;
	margin: 5px auto;
}

/* ----- */

section.body p {
	line-height: 1.4rem;
}
/* section.body .content::before {
	content: '';
	position: absolute;
	width: 100%;
	border-top: 20px solid rgba(var(--accent-color), 1);
	left: 0px;
	top: 0px;
} */

section.body .content.home {
	flex-direction: column;
}

section.body .content.home .name_container {
	user-select: none;
	width: 500px;
	text-align: center;
}

section.body .content.home .name_container img {
    max-width: 100%;
    margin-bottom: 20px;
	opacity: 0.8;

	
}

section.body .content.home .name_container .by_line {
	margin-bottom: 20px;
}

section.body .content.home .button_container {
	display: flex;
	width: 500px;
}

section.body .content.home .button_container .button {
	flex: 1 0 30%;
	margin: 5px;
	padding: 10px 0px;
	text-align: center;
	border-radius: 3px;
	color: white;
	border-bottom: 1px solid rgba(var(--accent-color), 1);
	background-color: rgba(var(--accent-color), 1);
	cursor: pointer;
	transition: background-color 0.6s, color 0.6s;
	font-size: 14px;
}

section.body .content.home .button_container div:hover {
	background-color: rgba(var(--accent-color), .075);
	color: rgba(var(--accent-color), 1);
	border-radius: 0px;
	border-bottom: 1px solid rgba(var(--accent-color), .5);
}

section.body .content.home .practice_name_container{
	/* opacity: .6; */
	user-select: none;
    text-align: center;
	margin: 0px 0 30px;
	width: 480px;
	display: flex;
    align-items: center;
    justify-content: center;
}
section.body .content.home .practice_name_container h2{
	color: rgba(var(--accent-color), 1);
    font-size: 2.1rem;
    /* width: 500px; */
    text-align: center;
    line-height: normal;
	letter-spacing: 2px;
	margin: 0px 0 0px;
	position: relative;
	
}
section.body .content.home .practice_name_container img{
	width: 100%;
	display: none;
	max-width: 300px;
}

section.body .content.observer_card .card{
	position: relative;
	transform: translate(0px, 40px);
	transition: transform 0.6s;
	width: 90%;
	max-width: 1360px;
	height: 100%;
	max-height: 600px;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	border-radius: 15px;
	/* overflow: hidden; */
	color: #333333;
	display: flex;
    flex-direction: column;
}

section.body .content.form_analytics .card,
section.body .content.content.pdf_viewer .card{
	position: relative;
	/* transform: translate(0px, 40px); */
	transition: transform 0.6s;
	width: 1000px;
	height: 100%;
	max-height: 600px;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	border-radius: 15px;
	overflow: hidden;
	color: #333333;
	display: flex;
    flex-direction: column;
}

section.body .content.contact_card .card,
section.body .content.form_upgrade_card .card {
	position: relative;
	transform: translate(0px, 40px);
	transition: transform 0.6s;
	width: 800px;
	height: 100%;
	max-height: 600px;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	border-radius: 15px;
	overflow: hidden;
	color: #333333;
}


section.body .content.observer_card .card,
section.body .content.form_analytics .card{
	display: flex;
	flex-direction: column;
}

section.body .content.observer_card .card.slide,
section.body .content.form_analytics .card.slide,
section.body .content.pdf_viewer .card.slide,
section.body .content.contact_card .card.slide,
section.body .content.form_upgrade_card .card.slide {
	transform: translate(0px, 0px);
}



section.body .content.contact_card .card .contact_container,
section.body .content.form_upgrade_card .card .upgrade_container {
	overflow: hidden;
	overflow-y: auto;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 20;
	padding: 20px;
	box-sizing: border-box;
}


section.body .content.form_analytics .card .form_analytics_container{
	overflow: auto;
	z-index: 20;
	padding: 10px 50px;
	box-sizing: border-box;
}

section.body .content.observer_card .card .form_analytics_container .canvas_content,
section.body .content.form_analytics .card .form_analytics_container .canvas_content{
	display: block;
}




section.body .content.observer_card .card .form_analytics_container .canvas_content.inactive,
section.body .content.form_analytics .card .form_analytics_container .canvas_content.inactive{
	display: none;
}

section.body .content.observer_card .card .form_analytics_container,
section.body .content.form_analytics .card .form_analytics_container{
	-ms-overflow-style: none;
	scrollbar-width: none;
}

section.body .content.content.pdf_viewer .canvas_container{
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
	overflow-y: auto;
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
}
section.body .content.content.pdf_viewer .canvas_container canvas{
	flex: 1 1 auto;
	width: calc(80% - 30px);
	margin: 10px 15px;
	box-shadow: 0px 0px 13px rgba(0, 0, 0, .2);

}

section.body .content.form_upgrade_card .card .upgrade_container {
	padding: 40px;
}

section.body .content.contact_card .card .contact_container .contact_details {
	display: flex;
	flex-wrap: wrap;
}

section.body .content.form_upgrade_card .card .upgrade_container .upgrade_details {
	
}

section.body .content.form_upgrade_card .card .upgrade_container .upgrade_details h2 {
	color: rgba(var(--accent-color), 1);
}

section.body .content.form_upgrade_card .card .upgrade_container .upgrade_details a {
	color: rgba(var(--accent-color), 1);
	font-weight: bold;
	transition: color 0.4s;
	text-decoration: none;
}

section.body .content.form_upgrade_card .card .upgrade_container .upgrade_details a:hover {
	color: #333333;	
}

section.body .content.form_upgrade_card .card .upgrade_container .upgrade_details ul li {
	line-height: 1.4rem;
}

section.body .content.contact_card .card .contact_container .contact_details .contact_name {
	font-size: 42px;
	flex: 0 0 100%;
	margin-bottom: 3px;
}

section.body .content.contact_card .card .contact_container .contact_details .contact_practice {
	font-size: 18px;
	line-height: 1rem;
}

section.body .content.contact_card .card .contact_container .contact_details  .contact_practice + .contact_phone {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 2px solid rgba(var(--accent-color), 1);
}

section.body .content.contact_card .card .contact_container .contact_details  .contact_phone {
	font-size: 18px;
	line-height: 1rem;
}

section.body .content.contact_card .card .contact_container .contact_buttons {
	display: flex;
	margin: 20px 0px 40px;
}

section.body .content.contact_card .card .contact_container .contact_buttons .button {
	background-color: rgba(var(--accent-color), 1);
	border-radius: 3px;
	color: white;
	padding: 6px 20px;
	box-sizing: border-box;
	cursor: pointer;
	border-bottom: 1px solid rgba(var(--accent-color), 1);
	transition: background-color 0.6s, color 0.6s;
}

section.body .content.contact_card .card .contact_container .contact_buttons .button:hover {
	background-color: rgba(var(--accent-color), .075);
	color: rgba(var(--accent-color), 1);
	border-radius: 0px;
	border-bottom: 1px solid rgba(var(--accent-color), .5);
}

section.body .content.contact_card .card .contact_container .contact_buttons .button:not(:first-of-type) {
	margin-left: 5px;
}

section.body .content.contact_card .form_container {
	position: absolute;
	width: 320px;
    height: 100%;
    padding: 0px 20px;
	top: 0px;
	right: 0px;
	background-color: white;
	transform: translate(100%, 0px);
	transition: transform 0.5s, box-shadow 0.5s, opacity 0.4s;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0);
	opacity: 0;
	color: #333333;
	z-index: 100;
	overflow: hidden;
}

section.body .content.contact_card .form_container ul {
	padding-left: 0px;
}

section.body .content.contact_card .form_container ul ul {
	padding-left: 30px;
}

section.body .content.contact_card .form_container ul li[data-header] {
	font-weight: 700;
}

section.body .content.contact_card .form_container ul li {
	list-style-type: none;
	margin: 5px 0px;
	font-weight: normal;
}

section.body .content.contact_card .form_container ul li[data-url] {
	cursor: pointer;
	transition: color 0.4s;
}

section.body .content.contact_card .form_container ul li[data-url]:hover {
	color: rgba(var(--accent-color), 1);
}

section.body .content.contact_card .form_container.slide {
	transform: translate(0px, 0px);
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
	opacity: 1;
}

section.body .content.observer_card,
section.body .content.form_analytics,
section.body .content.form_history{
	/* display: flex; */
	flex-direction: column;
}

section.body .content.observer_card .toolbar,
section.body .content.form_analytics .toolbar,
section.body .content.content.pdf_viewer .toolbar,
section.body .content.observer_card .toolbar,
section.body .content.form_analytics .toolbar,
section.body .content.form_history .toolbar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
	box-sizing: border-box;
	box-shadow: 10px -10px 40px rgba(0, 0, 0, 0.1);
	color: white;
	border-radius: 15px 15px 0 0;
	width: 100%;
	max-width: 1360px;
	background-color: rgba(var(--accent-color), 1);
	min-height: 50px;
}
section.body .content.observer_card .toolbar .right,
section.body .content.form_analytics .toolbar .right,
section.body .content.content.pdf_viewer .toolbar .right,
section.body  content.form_analytics .toolbar .right,
section.body .content.form_history .toolbar .right{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}
section.body .content.observer_card .toolbar > .right > div + div,
section.body .content.form_analytics .toolbar > .right > div + div,
section.body .content.content.pdf_viewer .toolbar > .right > div + div,
section.body .content.observer_card .toolbar > .right > div + div,
section.body .content.form_analytics .toolbar > .right > div + div,
section.body .content.form_history .toolbar > .right > div + div{
	margin-left: 15px;
}


section.body .content.content.pdf_viewer .toolbar .left,
section.body .content.observer_card .toolbar .left,
section.body .content.form_analytics .toolbar .left,
section.body .content.form_history .toolbar .left{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
}
section.body .content.observer_card .toolbar > .left > div + div,
section.body .content.form_analytics .toolbar > .left > div + div,
section.body .content.content.pdf_viewer .toolbar > .left > div + div,
section.body .content.content.observer_card .toolbar > .left > div + div,
section.body .content.content.form_analytics .toolbar > .left > div + div,
section.body .content.form_history .toolbar > .left > div + div{
	margin-right: 15px;
}
section.body .content.content.pdf_viewer .toolbar > .right > div,
section.body .content.observer_card .toolbar > .left > div,
section.body .content.form_analytics .toolbar > .left > div,
section.body .content.observer_card .toolbar > .right > div,
section.body .content.form_analytics .toolbar > .right > div,
section.body .content.form_history .toolbar > .right > div,
section.body .content.content.pdf_viewer .toolbar > .left > div,
section.body .content.content.observer_card .toolbar > .left > div,
section.body .content.content.form_analytics .toolbar > .left > div,
section.body .content.form_history .toolbar > .left > div{
	padding: 0px 10px;
	cursor: pointer;
	font-size: 1.2rem;
	transition: opacity 600ms;
	
}

section.body .content.observer_card .toolbar .disabled,
section.body .content.form_analytics .toolbar .disabled,
section.body .content.content.pdf_viewer .toolbar .disabled,
section.body .content.observer_card .toolbar .disabled,
section.body .content.form_analytics .toolbar .disabled,
section.body .content.form_history .toolbar .disabled{
	opacity: .3;
	pointer-events: none;
}

section.body .content.content.pdf_viewer .toolbar > .right > .zoom_container{
	display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 60px;
    cursor: auto;
	position: relative;
}

section.body .content.content.pdf_viewer .toolbar > .right > .zoom_container > [data-action="zoom_in"],
section.body .content.content.pdf_viewer .toolbar > .right > .zoom_container > [data-action="zoom_out"]{
	padding: 8px 12px;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.body .content.content.pdf_viewer .toolbar > .right > .zoom_container > [data-action="zoom_out"]:before{
	content: '';
    border-left: 1px solid rgba(255,255,255, 0.1);
    position: absolute;
    width: 1px;
    height: 32px;
    top: 0px;
    left: 50%;
}

section.body .content .toolbar > .right > .search_container{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, .1);
	border-radius: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 240px;
	cursor: auto;
}
section.body .content .toolbar .search_container > [data-action="search_clear"]{
	cursor: pointer;
    padding: 0 10px;
    font-size: 1.2rem;
    height: 40px;
    width: auto;
    opacity: 0;
	display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
	pointer-events: none;

}
section.body .content .toolbar .search_container > [data-action="search_clear"]::after{
	position: absolute;
	content: '';
	border-right: 1px solid rgba(255, 255, 255, .2);
	width: 1px;
	height: 80%;
	right: 0px;
	top: 50%;
	transform: translate(0%, -50%);
}
section.body .content .toolbar .search_container > [data-action="search_history"]{
	cursor: pointer;
    padding: 0 10px;
    font-size: 1rem;
    height: 40px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
section.body .content .toolbar .search_container > input{
	height: 40px;
	border: none;
	background-color: transparent;
	margin: 0px;
	color: white;
}
section.body .content .toolbar .search_container > input:focus{
	outline: none;
}
section.body .content.observer_card .toolbar .left .content_label{
	cursor: text !important;
	opacity: 0;
	transition: 400ms opacity;
}

section.body .content.observer_card .toolbar .left .content_label.loaded{
	opacity: 1;
}

section.body .content.form_analytics .toolbar .selection_container{
	position: relative;
	height: 100%;
	width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

section.body .content.form_analytics .toolbar .selection_container .selection_field{
	height: 100%;
	height: 35px;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	box-sizing: border-box;
	display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 0px 15px;
	font-size: 1rem;
}

section.body .content.form_analytics .toolbar .selection_container .selection_field .select{
	padding: 5px 5px;
	text-transform: capitalize;
}

section.body .content.form_analytics .toolbar .selection_container .selection_options{
	display: flex;
    position: absolute;
    flex-direction: column;
    background-color: white;
    border: 1px solid rgba(var(--accent-color), .3);
	box-sizing: border-box;
    font-size: 1rem;
	z-index: 100;
	top: 0;
	left: 0;
	top: 100%;
    left: 0px;
	margin: 0 10px;
	transform: translate(0px, -9px);
	width: inherit;
	display: none;
}

section.body .content.form_analytics .toolbar .selection_container .selection_options .option{
	padding: 8px 16px;
	background-color: rgba(var(--accent-color), .85);
	user-select: none;
}

section.body .content.form_analytics .toolbar .selection_container .selection_options .option:hover{
	background-color: rgba(var(--accent-color), .95);
}

section.body .content.form_analytics .toolbar .selection_container .selection_options .option:first-of-type{
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}
section.body .content.form_analytics .toolbar .selection_container .selection_options .option:last-of-type{
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}
section.body .content.form_analytics .toolbar .selection_container .selection_options .option + .option{
	border-top: 1px solid rgba(255, 255, 255, .5);
}

section.body .content.observer_card .toolbar .tabs,
section.body .content.form_analytics .toolbar .tabs{
	display: flex;
	align-self: flex-end;
	height: 100%;
}
section.body .content.observer_card .toolbar .tabs > .item,
section.body .content.form_analytics .toolbar .tabs > .item{
	display: flex;
    justify-content: center;
	align-items: center;
    font-size: 1rem;
    padding: 7px 25px 7px;
    /* margin: 0 .5px; */
	overflow: hidden;
	background-color: rgba(255, 255, 255, .05);
	border-top: 1px solid rgba(255, 255, 255, .05);
    border-left: 1px solid rgba(255, 255, 255, .05);
    border-right: 1px solid rgba(255, 255, 255, .05);
}

section.body .content.observer_card .toolbar .tabs > .item:not(.active):hover,
section.body .content.form_analytics .toolbar .tabs > .item:not(.active):hover{
	background-color: rgba(var(--accent-color), .95);
}
section.body .content.observer_card .toolbar .tabs > .item.active,
section.body .content.form_analytics .toolbar .tabs > .item.active{
	background-color: rgba(255, 255, 255, .3);
	border-top: 1px solid rgba(255, 255, 255, .15);
    border-left: 1px solid rgba(255, 255, 255, .15);
    border-right: 1px solid rgba(255, 255, 255, .15);
}

section.body .content.observer_card .form_analytics_container{
	/* padding: 20px; */
	box-sizing: border-box;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
	color: #333333;
	border-radius: 0 0 15px 15px;
	max-height: 640px;
	height: 100%;
	overflow-y: auto;
	width: 100%;
	max-width: 1360px;
}
section.body .content.observer_card .form_analytics_container .form_analytics_details{
	padding: 10px;
	width: fit-content;
}

section.body .content.form_history .history {
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
	color: #333333;
	border-radius: 0 0 15px 15px;
	max-height: 640px;
	height: 80%;
	overflow-y: auto;
	width: 100%;
	max-width: 1360px;
	
	
}
section.body .content.observer_card .analytics .analytics_content,
section.body .content.form_analytics .analytics .analytics_content,
section.body .content.form_history .history .history_content {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

section.body .content.observer_card .analytics > div,
section.body .content.form_analytics .analytics > div,
section.body .content.form_history .history > div{
	align-self: center;
}

.lightbox .lightbox_content table,
section.body .content.observer_card .form_analytics_container table,
section.body .content.form_analytics .form_analytics_container table,
section.body .content.form_history .history table,
section.body .content.contact_card .recent table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0px 20px 0px;
}
section.body .content.observer_card .form_analytics_container table tr td:first-of-type,
section.body .content.form_analytics .form_analytics_container table tr td + td,
section.body .content.form_history .history table tr td:first-of-type {
	text-align: center;
}



section.body .content.observer_card .form_analytics_container table tr:first-of-type,
section.body .content.form_analytics .form_analytics_container table tr:first-of-type,
.lightbox .lightbox_content table tr:first-of-type,
section.body .content.form_history .history table tr:first-of-type,
section.body .content.contact_card .recent table tr:first-of-type {
	background-color: rgba(var(--accent-color), 1);
	color: white;
}

.lightbox .lightbox_content table th,
.lightbox .lightbox_content table td,
section.body .content.observer_card .form_analytics_container table th,
section.body .content.observer_card .form_analytics_container table td,
section.body .content.form_analytics .form_analytics_container table th,
section.body .content.form_analytics .form_analytics_container table td,
section.body .content.form_history .history table th,
section.body .content.form_history .history table td,
section.body .content.contact_card .recent table th,
section.body .content.contact_card .recent table td {
	/* padding: 3px 10px; */
	padding: 5px 12px;
	box-sizing: border-box;
	vertical-align: top;
	border: 1px solid white;
	border-bottom: 1px solid #eaeaea;
}

section.body .content.observer_card .form_analytics_container table tr+tr:hover,
section.body .content.form_analytics .form_analytics_container table tr+tr:hover{
	background-color: rgba(var(--accent-color), .1) !important;
	cursor: pointer;
}

section.body .content.observer_card .form_analytics_container table tr:nth-of-type(odd):not(:first-of-type),
section.body .content.form_analytics .form_analytics_container table tr:nth-of-type(odd):not(:first-of-type){
	background-color: #fdfdfd;
}
section.body .content.observer_card .form_analytics_container table tr:nth-of-type(odd):not(:first-of-type) td:last-of-type,
section.body .content.form_analytics .form_analytics_container table tr:nth-of-type(odd):not(:first-of-type) td:last-of-type{
	background-color: rgba(var(--accent-color), .1);
}
section.body .content.observer_card .form_analytics_container table tr:nth-of-type(even):not(:first-of-type) td:last-of-type,
section.body .content.form_analytics .form_analytics_container table tr:nth-of-type(even):not(:first-of-type) td:last-of-type{
	background-color: rgba(var(--accent-color), .075);
}

.lightbox .lightbox_content table tr[data-select]{
	cursor: pointer;
}

.lightbox .lightbox_content table tr[data-select="1"]{
	background-color: rgba(var(--accent-color), .075);
}

section.body .content table tr.hide {
	display: none;

}

section.body .content table tr.unhide {
	/* background-color: rgba(var(--accent-color), .2) !important; */
	opacity: .33
}

section.body .content table tr.unhide:hover {
	/* background-color: rgba(var(--accent-color), .25) !important; */
	opacity: .6
}

section.body .content.observer_card .form_analytics_container table tr:nth-of-type(odd):not(:first-of-type):not(.notes),
section.body .content.form_history .history table tr:nth-of-type(odd):not(:first-of-type):not(.notes),
section.body .content.contact_card .recent table tr:nth-of-type(odd):not(:first-of-type):not(.notes) {
	background-color: #fdfdfd;
}

section.body .content.observer_card .form_analytics_container table [data-column="files"],
section.body .content.form_history .history table [data-column="files"],
section.body .content.contact_card .recent table [data-column="files"] {
	width: 300px;
}

section.body .content.observer_card .form_analytics_container table [data-column="files"] div.unread,
section.body .content.form_history .history table [data-column="files"] div.unread,
section.body .content.contact_card .recent table [data-column="files"] div.unread {
	color: #ea0f0f;
}

section.body .content.observer_card .form_analytics_container table [data-column="files"] div,
section.body .content.form_history .history table [data-column="files"] div,
section.body .content.contact_card .recent table [data-column="files"] div {
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
}
section.body .content.observer_card .form_analytics_container table tr[data-focus="1"],
section.body .content.form_history .history table tr[data-focus="1"],
section.body .content.contact_card .recent table tr[data-focus="1"]{
	transform: scale(1,1);
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	box-shadow: 0 2px 8px  rgba(var(--accent-color), .4);
	-webkit-box-shadow: 0 2px 8px  rgba(var(--accent-color), .4);
	-moz-box-shadow: 0 2px 8px  rgba(var(--accent-color), .4);
}
section.body .content.observer_card .form_analytics_container table tr,
section.body .content.form_history .history table tr,
section.body .content.contact_card .recent table tr{
	transition: transform 600ms, box-shadow 600ms;
}

section.body .content.observer_card .form_analytics_container table [data-column="files"] div span,
section.body .content.form_history .history table [data-column="files"] div span,
section.body .content.contact_card .recent table [data-column="files"] div span {
	display: inline-block;
	border-bottom: 1px dotted rgba(var(--accent-color), 1);
	transition: color 0.4s;
}

section.body .content.observer_card .form_analytics_container table [data-column="files"] div:hover,
section.body .content.form_history .history table [data-column="files"] div:hover,
section.body .content.contact_card .recent table [data-column="files"] div:hover {
	color: rgba(var(--accent-color), 1);
}

section.body .content.observer_card .form_analytics_container table [data-column="files"] div:not(:last-of-type),
section.body .content.form_history .history table [data-column="files"] div:not(:last-of-type),
section.body .content.contact_card .recent table [data-column="files"] div:not(:last-of-type) {
	margin-bottom: 5px;
}

section.body .content.observer_card .form_analytics_container table [data-column="files"] svg,
section.body .content.form_history .history table [data-column="files"] svg,
section.body .content.contact_card .recent table [data-column="files"] svg {
	margin-right: 10px;
	transition: color 0.4s;
}

section.body .content.observer_card .form_analytics_container table [data-column="notes"] .button,
section.body .content.form_history .history table [data-column="notes"] .button,
section.body .content.contact_card .recent table [data-column="notes"] .button {
	text-align: center;
	cursor: pointer;
	width: min-content;
	margin: auto;
	font-size: 1.35rem;
}

section.body .content.observer_card .form_analytics_container table [data-column="notes"] .button:hover,
section.body .content.form_history .history table [data-column="notes"] .button:hover,
section.body .content.contact_card .recent table [data-column="notes"] .button:hover {
	border-bottom: 1px dotted rgba(var(--accent-color), 1);
}








section.body .content.observer_card .form_analytics_container table tr.notes,
section.body .content.form_history .history table tr.notes,
section.body .content.contact_card .recent table tr.notes {
	overflow: hidden;
	max-height: 100px;
	background-color: rgba(var(--accent-color), .1);
}

section.body .content.observer_card .form_analytics_container table tr.notes.collapsed,
section.body .content.form_history .history table tr.notes.collapsed,
section.body .content.contact_card .recent table tr.notes.collapsed {
	display: none;
}

section.body .content.observer_card .form_analytics_container table tr.notes .note_container,
section.body .content.form_history .history table tr.notes .note_container,
section.body .content.contact_card .recent table tr.notes .note_container {
	margin: 0;
	padding: 0px;
}

section.body .content.observer_card .form_analytics_container table tr.notes .note_container .note_content,
section.body .content.form_history .history table tr.notes .note_container .note_content,
section.body .content.contact_card .recent table tr.notes .note_container .note_content {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

section.body .content.observer_card .form_analytics_container table tr.notes .note_container .note_content .note,
section.body .content.form_history .history table tr.notes .note_container .note_content .note,
section.body .content.contact_card .recent table tr.notes .note_container .note_content .note {
	display: flex;
    flex-direction: column;
    text-align: left;
    padding: 10px;
    margin: 0px 10px;
    width: 100%;
    flex: 1 1 100%;
}

section.body .content.observer_card .form_analytics_container table tr.notes .note_container .note_content .note:not(:last-of-type),
section.body .content.form_history .history table tr.notes .note_container .note_content .note:not(:last-of-type),
section.body .content.contact_card .recent table tr.notes .note_container .note_content .note:not(:last-of-type) {
	border-bottom: 1px solid rgba(var(--accent-color), .2);
}

section.body .content.observer_card .form_analytics_container table tr.notes .note_container .note_content .note .text,
section.body .content.form_history .history table tr.notes .note_container .note_content .note .text,
section.body .content.contact_card .recent table tr.notes .note_container .note_content .note .text {
	margin: 10px 0;	
}
section.body .content.observer_card .form_analytics_container table tr.notes .note_container .note_content .note .date,
section.body .content.form_history .history table tr.notes .note_container .note_content .note .date,
section.body .content.contact_card .recent table tr.notes .note_container .note_content .note .date {
	margin: 5px 0;
    color: #353535;
    font-weight: 400;
    font-size: 0.85rem;
}

section.body .content.observer_card .form_analytics_container table tr.notes h5,
section.body .content.form_history .history table tr.notes h5,
section.body .content.contact_card .recent table tr.notes h5 {
	color: #4c4c4c;
    text-align: center;
    font-weight: normal;
    font-size: 1rem;
	flex: 1 1 100%;
	margin: 10px 0 5px;
}


section.body .content.observer_card .form_analytics_container table tr.notes .button,
section.body .content.form_history .history table tr.notes .button,
section.body .content.contact_card .recent table tr.notes .button {
	flex: 0 0 15%;
	margin: 10px;
	padding: 10px 0px;
	text-align: center;
	border-radius: 3px;
	color: white;
	border-bottom: 1px solid rgba(var(--accent-color), 1);
	background-color: rgba(var(--accent-color), 1);
	cursor: pointer;
	transition: background-color 0.6s, color 0.6s;
	font-size: 14px;
}


section.body .content.observer_card .form_analytics_container table tr.notes .button:hover,
section.body .content.form_history .history table tr.notes .button:hover,
section.body .content.contact_card .recent table tr.notes .button:hover {
	background-color: rgba(var(--accent-color), .075);
	color: rgba(var(--accent-color), 1);
	border-radius: 0px;
	border-bottom: 1px solid rgba(var(--accent-color), .5);
}

section.body .content.observer_card .form_analytics_container table tr.notes .button.alt,
section.body .content.form_history .history table tr.notes .button.alt,
section.body .content.contact_card .recent table tr.notes .button.alt {
	background-color: rgba(var(--accent-color), 0.05);
    color: rgba(var(--accent-color), 1);
}


section.body .content.observer_card .form_analytics_container table tr.notes .button.alt:hover,
section.body .content.form_history .history table tr.notes .button.alt:hover,
section.body .content.contact_card .recent table tr.notes .button.alt:hover {
	background-color: rgba(var(--accent-color), .1);
	border-bottom: 1px solid rgba(var(--accent-color), .5);
}

section.body .content.observer_card .form_analytics_container table [data-column="status"],
section.body .content.form_history .history table [data-column="status"] {
	position: relative;
	width: 320px;
}


section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container,
section.body .content.form_history .history table [data-column="status"] .status_list_container {
	min-height: 1rem;
	position: relative;
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container ul,
section.body .content.form_history .history table [data-column="status"] .status_list_container ul {
	display: flex;
	flex-direction: column;
	padding: 0px 0px;
	margin: 0px;
	text-align: left;
	justify-content: left;
	align-items: flex-start;
	list-style-type: none;
	position: absolute;
	top: 100%;
	left: 0px;
	/* width: calc(100% - 24px); */
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.33);
	background-color: white;
	transform: translate(-14px, 10px);
	width: 240px;
	border-radius: 3px;
	z-index: 20;
	border: 2px solid rgba(var(--accent-color), 1);
	display: none;
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container .selected_status_container,
section.body .content.form_history .history table [data-column="status"] .status_list_container .selected_status_container {
	cursor: pointer;
	transition: color 0.4s;
	line-height: 1.4rem;
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container .selected_status_container:hover,
section.body .content.form_history .history table [data-column="status"] .status_list_container .selected_status_container:hover {
	color: rgba(var(--accent-color), 1);
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container .selected_status_container svg,
section.body .content.form_history .history table [data-column="status"] .status_list_container .selected_status_container svg {
	margin-left: 5px;
	transform: translate(0px, 2px);
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container ul li,
section.body .content.form_history .history table [data-column="status"] .status_list_container ul li {
	border-bottom: 0px;
	padding: 8px 12px;
	cursor: pointer;
	transition: color 0.4s;
	line-height: 1.4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container ul li:last-of-type,
section.body .content.form_history .history table [data-column="status"] .status_list_container ul li:last-of-type {
	background-color: rgba(var(--accent-color), 1);
	color: white;
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container ul li:last-of-type:hover,
section.body .content.form_history .history table [data-column="status"] .status_list_container ul li:last-of-type:hover {
	background-color: rgba(var(--accent-color), .9);
	color: white;
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container ul li:hover,
section.body .content.form_history .history table [data-column="status"] .status_list_container ul li:hover {
	color: rgba(var(--accent-color), 1);
	background-color: rgba(var(--accent-color), .08);
}

section.body .content.observer_card .form_analytics_container table [data-column="status"] .status_list_container ul li:not(:last-of-type),
section.body .content.form_history .history table [data-column="status"] .status_list_container ul li:not(:last-of-type) {
	border-bottom: 1px solid #eaeaea;
}


section.body .content.observer_card .form_analytics_container table [data-column="sender"],
section.body .content.observer_card .form_analytics_container table [data-column="recipients"],
section.body .content.form_history .history table [data-column="sender"],
section.body .content.form_history .history table [data-column="recipients"],
section.body .content.contact_card .recent table [data-column="sender"],
section.body .content.contact_card .recent table [data-column="recipients"] {
	width: 200px;	
}

section.body .content.observer_card .form_analytics_container table [data-column="submissions_form_category"],
section.body .content.form_history .history table [data-column="submissions_form_category"],
section.body .content.contact_card .recent table [data-column="submissions_form_category"] {
	width: 160px;
}

section.body .content.observer_card .form_analytics_container table [data-column="submissions_submission_date"],
section.body .content.observer_card .form_analytics_container table [data-column="submission_date_formatted"],
section.body .content.form_history .history table [data-column="submissions_submission_date"],
section.body .content.form_history .history table [data-column="submission_date_formatted"] {
	width: 220px;
}

section.body .content.contact_card .recent table [data-column="submissions_submission_date"],
section.body .content.contact_card .recent table [data-column="submission_date_formatted"] {
	width: 160px;
}

section.body .content.contact_card .recent h3 {
	margin: 0px;
	font-size: 16px;
}

section.footer {
	width: calc(100% - 100px);
	/* background-color: #fff; */
	height: 80px;
	position: absolute;
	z-index: 20;
	left: 0px;
	bottom: 0px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	color: rgba(var(--accent-color), 1);
	/* box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1); */
	padding: 0 50px 40px;
	transition: left 500ms, background-color 300ms, padding 500ms, width 500ms;
}

section.footer .logo_container {
	flex: 0 0 300px;
	display: flex;
	transition: width 500ms;
}
section.footer .logo_container img{
	width: 100%;
	opacity: .8;
	user-select: none;
}
section.footer .support_container {
	flex: 0 0 auto;

}
section.footer .client {
	/* position: absolute; */
	width: 100%;
	text-align: left;
	/* padding: 0px 20px; */
	box-sizing: border-box;
	color: #333333;
}

section.footer a {
	font-weight: bold;
	text-decoration: none;
	color: rgba(var(--accent-color), 1);
	transition: color 0.4s;
}

section.footer a:hover {
	color: #333333;
}

section.footer .nonclient {
	/* position: absolute; */
	width: 100%;
	text-align: left;
	/* padding: 0px 20px; */
	box-sizing: border-box;
	color: rgba(var(--accent-color), 1);
}

section.notifications {
	position: fixed;
	bottom: 0px;
	left: 0px;
	transform: translate(0px, 100%);
	padding: 20px;
	box-sizing: border-box;
	transition: transform 0.4s, background-color 0.4s;
	z-index: 1600;
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: center;
	font-family: arial;
	letter-spacing: 0.15px;
	line-height: initial;
	min-height: 100px;
	display: flex;
	align-items: center;
}

section.notifications.show {
	transform: translate(0px, 0px);
}

section.notifications.error {
	background-color: #cc3434;
}

section.notifications.notification {
	background-color: #4965a8;
}

section.notifications.other {
	background-color: #4965a8;
}

section.notifications.other {
	background-color: #4965a8;
}

section.notifications .notification_content {
	width: 100%;
	max-width: 800px;
	color: white;
	text-align: center;
	line-height: 1.4rem;
}

section.notifications .notification_content .form_recipient {
	display: flex;
	justify-content: center;
	align-items: center;
}

section.notifications .notification_content .form_recipient > div {
	margin: 0px 5px;
}

section.notifications .notification_content .form_recipient .button.cancel {
	background-color: white;
	border-radius: 3px;
	color: #4965a8;
	padding: 3px 20px;
	box-sizing: border-box;
	cursor: pointer;
	transition: opacity 0.4s;
}

section.notifications .notification_content .form_recipient .button.cancel:hover {
	opacity: 0.9;
}

section.notifications .notification_content .new_form_available {
	display: flex;
	justify-content: center;
	align-items: center;
}

section.notifications .notification_content .new_form_available > div {
	margin: 0px 5px;
}

section.notifications .notification_content .new_form_available .button.cancel {
	background-color: white;
	border-radius: 3px;
	color: #4965a8;
	padding: 3px 20px;
	box-sizing: border-box;
	cursor: pointer;
	transition: opacity 0.4s;
}

section.notifications .notification_content .new_form_available .button.cancel:hover {
	opacity: 0.9;
}

.load_circle {
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 0.20;
	display: none;
	z-index: 1000;
	pointer-events: none;
}

.load_circle.loading {
	animation-name: spin;
	animation-duration: 5000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.practice_circle {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid #cccccc;
	border-radius: 50%;
	box-sizing: border-box;
	margin-right: 5px;
	transition: border 0.4s;
}

li:hover .practice_circle {
	border-color: rgba(var(--accent-color), 1);
}

input[type="submit"] {
	transition: opacity 0.4s;
	cursor: pointer;
}

input[type="submit"].locked {
	pointer-events: none;
	opacity: 0.5;
}

.flex_break {
	flex: 0 0 100%;
}

.lightbox.select_contact .lightbox_head{
	padding: 30px 30px 5px;
}

.lightbox.select_contact .lightbox_content{
	padding: 5px 30px 30px;
}

.lightbox.select_contact .lightbox_buttons{
	justify-content: flex-end;
}

.lightbox .form_submit{
	margin: 10px 0px;
    font-size: 14px;
    background-color: rgba(var(--accent-color), 1);
    padding: 10px 40px;
    color: white;
    cursor: pointer;
	border-radius: 3px;
    transition: opacity 0.4s;
}

.lightbox .form_submit.disabled{
	opacity: .5;
	pointer-events: none;
}

.lightbox:not(.add_note) .form_cancel{
	margin: 5px 10px 0px;
	font-size: 14px;
	border-bottom: 1px dotted rgba(var(--accent-color), 1);
	padding: 0px 10px 4px;
	color: #333333;
	cursor: pointer;
	transition: color 0.4s;
}

.form_cancel {
	margin: 10px auto 0px;
	font-size: 14px;
	border-bottom: 1px dotted rgba(var(--accent-color), 1);
	padding: 0px 10px 4px;
	color: #333333;
	cursor: pointer;
	transition: color 0.4s;
}

.form_cancel:hover {
	color: rgba(var(--accent-color), 1);
}

.lightbox{
	opacity: 0;
    pointer-events: none;
    z-index: 500;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
	transition: all 600ms;
}

.lightbox .close{
	position: absolute;
    top: 18px;
    right: 20px;
    font-size: 1.8rem;
    transform: translate(50%, -50%);
    color: rgba(0,0,0,0.6);
}

.lightbox_container{
	border-radius: 3px;
    background-color: white;
    position: relative;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 80%;
    overflow: hidden;
	height: auto;
    max-height: 70%;
	display: flex;
	flex-direction: column;
	max-width: 1024px;
}

.lightbox_content{
	padding: 30px 30px;
	overflow-y: auto;
	display: flex;
	width: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
}


.lightbox[data-lightbox="show"]{
	opacity: 1;
	pointer-events: all;
	z-index: 500;
}

.lightbox .lightbox_content form{
	display: flex;
	flex-wrap: wrap;
}

.lightbox .lightbox_content form{
	display: flex;
	flex-wrap: wrap;
}

.lightbox .lightbox_content form fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    position: relative;
    display: block;
    flex: 1 1 100%;
    margin: 5px;
}
.lightbox .lightbox_content form textarea, 
.lightbox .lightbox_content form input, 
.lightbox .lightbox_content form select {
	border-radius: 3px;
    border: 1px solid grey;
    font-size: 18px;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 0px;
    height: 44px;
    display: flex;
    margin: 5px 0px;
    padding: 0px 10px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
	resize: none;
}
.lightbox .lightbox_content form .tox-tinymce{
	border: 1px solid grey;
	border-radius: 1px;
	margin: 5px 0px;
}

.lightbox .lightbox_content form .tox-tinymce,
.lightbox .lightbox_content form textarea{
	height: 400px;
} 

.lightbox .lightbox_content form input[type="radio"],
.lightbox .lightbox_content form input[type="checkbox"]{
	height: 20px;
}

.lightbox .lightbox_content form fieldset label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: 700;
}

.lightbox .lightbox_content form fieldset.inline {
    display: flex;
}

.lightbox .lightbox_content form fieldset.inline {
    display: flex;
}

.lightbox .lightbox_content form fieldset.half {
    flex: 1 1 45%;
}

.lightbox .lightbox_content form fieldset.third {
    flex: 1 1 30%;
}

.lightbox .lightbox_content form .button[data-selection] {
	/* background-color: rgba(var(--accent-color), .9); */
	background-color: #EFEFEF;
    border: 1px solid grey;
    color: black;
    border-radius: 3px;
    padding: 4px 6px;
    text-align: center;
    width: fit-content;
    cursor: default;
    font: 400 13.4333px Arial;
	line-height: 16px;
	text-transform: capitalize;
	margin-top: 8px;
	display: inline-block;
}
.lightbox .lightbox_content form .button[data-selection]:hover {
	background-color: #e0e0e0;
	border: 1px solid #646464;
}


.lightbox .lightbox_content form .selected_info{
	font-size: 18px;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 0px;
    height: 44px;
    display: flex;
    margin: 5px 0px;
    padding: 0px 2px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
	display: inline;
}


.lightbox .lightbox_content form input[type="submit"] {
	width: 320px;
    justify-self: center;
    margin: 5px auto;
	display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox .lightbox_buttons{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 25px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
}

.lightbox .lightbox_buttons .button{
	padding: 8px 18px;
	background-color: rgba(var(--accent-color), .9);
	color: white;
	border-radius: 3px;
	cursor: pointer;
}
.lightbox .lightbox_buttons .button[data-action="cancel_select"]{
    border-bottom: 1px dotted rgba(var(--accent-color), 1);
    color: #333333;
    transition: color 0.4s;
	background-color: unset;
	border-radius: 1px;
}



.lightbox .lightbox_buttons .left{
	display: flex;
}

.lightbox .lightbox_buttons .right{
	display: flex;	
}
.lightbox .lightbox_buttons .right div + div{
	margin-left: 10px;
}


section.body .content.main_dashboard,
section.body .content.analytics_dashboard{
	background-color: rgba(var(--accent-color), .05);
}


.content.main_dashboard .dashboard_container,
.content.analytics_dashboard .dashboard_container{
	width: 100%;
	height: 100%;
	display: flex;
	/* border-bottom: 1px solid rgba(0, 0, 0, .05); */
	position: relative;
}

.content.main_dashboard .dashboard_container .menu_container,
.content.analytics_dashboard .dashboard_container .menu_container{
	background-color: white;
	flex: 0 0 auto;
	max-width: 60px;
	width: 100%;
	height: calc(100vh - 65px);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: height 500ms, max-width 500ms;
}

section.banner.banner--active ~ section.body .content.main_dashboard .dashboard_container .menu_container,
section.banner.banner--active ~ section.body  .content.analytics_dashboard .dashboard_container .menu_container {
	height: calc(100vh - 85px);
}

.content.main_dashboard .dashboard_container .menu_container.expand,	
.content.analytics_dashboard .dashboard_container .menu_container.expand{	
	max-width: 200px;
}

.body.shrink_down .content.main_dashboard .dashboard_container .menu_container,
.body.shrink_down .content.analytics_dashboard .dashboard_container .menu_container{
	height: calc(100vh - 85px);
}
.content.main_dashboard .dashboard_container .menu_container.disabled .menu .tab_list,
.content.analytics_dashboard .dashboard_container .menu_container.disabled .menu .tab_list{
	opacity: .3;
	pointer-events: none;
	cursor: none;
}

.content.main_dashboard .dashboard_container .menu_container .menu.disabled .tab_list,
.content.main_dashboard .dashboard_container .menu_container .menu.disabled .misc_list,
.content.analytics_dashboard .dashboard_container .menu_container .menu.disabled .tab_list,
.content.analytics_dashboard .dashboard_container .menu_container .menu.disabled .misc_list{
	opacity: .3;
	pointer-events: none;
	cursor: none;
}

.content.main_dashboard .dashboard_container .menu_container .menu,
.content.analytics_dashboard .dashboard_container .menu_container .menu{
	height: 96%;
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	z-index: 200;
}

.content.main_dashboard .dashboard_container .menu_container .menu > * > *,
.content.analytics_dashboard .dashboard_container .menu_container .menu > * > *{
	cursor: pointer;
}
.content.main_dashboard .dashboard_container .menu_container .menu .action_list,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	transition: all 400ms;
	position: relative;
}
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * + *,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * + *{
	margin-top: 5px;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list{
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	width: 100%;
	transition: all 400ms;
	position: relative;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * + *,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * + *{
	margin-bottom: 5px;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > *,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > *,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > *,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > *{
	color: #323232;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 15%;
    padding: 5px;
    transition: all 500ms;
    cursor: pointer;
	position: relative;
	perspective: 1000;
}

.content.main_dashboard .dashboard_container .menu_container.expand .menu .misc_list > *,
.content.main_dashboard .dashboard_container .menu_container.expand .menu .action_list > *,
.content.analytics_dashboard .dashboard_container .menu_container.expand .menu .misc_list > *,
.content.analytics_dashboard .dashboard_container .menu_container.expand .menu .action_list > *{
	width: 150px;
	border-radius: 3px;

}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .label,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .label,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .label,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .label{
	width: 46%;
	max-width: 0px;
	overflow: hidden;
	height: auto;
	white-space: nowrap;
	transition: max-width 500ms;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .icon.flip,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .icon.flip,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .icon.flip,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .icon.flip{
	transform: rotateY(180deg);
}

.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .icon,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .icon{
	transition: transform 500ms;
	width: 20px;
}
.content.main_dashboard .dashboard_container .menu_container.expand .menu .misc_list > * > .label,
.content.main_dashboard .dashboard_container .menu_container.expand .menu .action_list > * > .label,
.content.analytics_dashboard .dashboard_container .menu_container.expand .menu .misc_list > * > .label,
.content.analytics_dashboard .dashboard_container .menu_container.expand .menu .action_list > * > .label{
	max-width: 100%;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > *:hover,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > *:hover,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > *:hover,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > *:hover{
	background-color: #f0f0f0;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > .active,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > .active,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > .active,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > .active{
	background-color: rgb(0, 0, 0, .2);
	/* border-radius: 50%; */
	box-shadow: none;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > .active:hover,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > .active:hover,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > .active:hover,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > .active:hover{
	background-color: rgb(0, 0, 0, .25);
	/* border-radius: 15%; */
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > .disabled,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > .disabled,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > .disabled,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > .disabled{
	opacity: .6;
	pointer-events: none;
	cursor: default;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > .in_use,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > .in_use,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > .in_use,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > .in_use{
	opacity: .9;
	pointer-events: none;
	cursor: wait;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert{
	position: absolute;
    opacity: 0;
    pointer-events: none;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 100%;
    transform: translate(0%, -50%);
	transition: opacity 600ms ease-in;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert .pointer,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert .pointer,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert .pointer,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert .pointer{
	width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid rgba(0, 0, 0, 0.75);
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert .message,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert .message,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert .message,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert .message{
	padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 6%;
    color: white;
    font-size: 0.9rem;
    line-height: normal;
    box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert .message .icon,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert .message .icon,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert .message .icon,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert .message .icon{
	margin-left: 5px;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert.show,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert.show,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .alert.show,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .alert.show{
	opacity: 1;
	transition: opacity 400ms ease-in;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .status,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .status,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .status,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .status{
	position: absolute;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    right: 0px;
    transition: opacity 300ms ease-in, top 600ms, right 600ms;
	opacity: 0;
}

.content.main_dashboard .dashboard_container .menu_container.expand .menu .misc_list > * > .status,
.content.main_dashboard .dashboard_container .menu_container.expand .menu .action_list > * > .status,
.content.analytics_dashboard .dashboard_container .menu_container.expand .menu .misc_list > * > .status,
.content.analytics_dashboard .dashboard_container .menu_container.expand .menu .action_list > * > .status{
	top: 0px;
	right: 110px;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status] > .status,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status] > .status,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status] > .status,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status] > .status{
	opacity: 1;

}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > * > .status .circle,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > * > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > * > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > * > .status .circle{
	width: 12px;
	height: 12px;
	z-index: 100;
	border-radius: 50%;
	transition: background-color 300ms, border 300ms;
	border: 2px solid rgba(0, 0, 0, .0);
	box-sizing: border-box;
	
}


.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status] > .status .circle,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status] > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status] > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status] > .status .circle{
	background-color: rgba(var(--accent-color), 1);
	border: 2px solid white;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status]:hover > .status .circle,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status]:hover > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status]:hover > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status]:hover > .status .circle{
	border: 2px solid #f0f0f0;
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status="green"] > .status .circle,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status="green"] > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status="green"] > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status="green"] > .status .circle{
    background-color: rgba(32, 204, 36, 1);
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status="yellow"] > .status .circle,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status="yellow"] > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status="yellow"] > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status="yellow"] > .status .circle{
    background-color: rgba(225, 217, 25, 1);
}

.content.main_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status="red"] > .status .circle,
.content.main_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status="red"] > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .misc_list > *[data-status="red"] > .status .circle,
.content.analytics_dashboard .dashboard_container .menu_container .menu .action_list > *[data-status="red"] > .status .circle{
    background-color: rgba(241, 69, 69, 1);
}


.content.main_dashboard .dashboard_container .menu_container .menu .tab_list,
.content.analytics_dashboard .dashboard_container .menu_container .menu .tab_list{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	transition: all 400ms;
	position: relative;
}

.content.main_dashboard .dashboard_container .menu_container .menu .tab_list[data-hidden="1"],
.content.analytics_dashboard .dashboard_container .menu_container .menu .tab_list[data-hidden="1"]{
	margin-top: -42px;
}

.content.main_dashboard .dashboard_container .menu_container .menu .tab_list .tab_overlay,
.content.analytics_dashboard .dashboard_container .menu_container .menu .tab_list .tab_overlay{
	content: "";
    height: 1.4rem;
    position: absolute;
    background: rgba(0, 0, 0, .2);
    width: 100%;
    padding: 10px 0;
	top: 0px;
    left: 0px;
	pointer-events: none;
	transition: top 500ms;
}

.content.main_dashboard .dashboard_container .menu_container .menu .tab_list .tab,
.content.analytics_dashboard .dashboard_container .menu_container .menu .tab_list .tab{
	font-size: 1rem;
    color: rgba(0,0,0,0.9);
	padding: 10px 10px;
	width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    height: 1.4rem;
    height: 22px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
	transition: width 500ms,  height 500ms, padding 500ms, opacity 500ms;
}

.content.main_dashboard .dashboard_container .menu_container .menu .tab_list .tab.hidden,
.content.analytics_dashboard .dashboard_container .menu_container .menu .tab_list .tab.hidden{	
	opacity: 0;
	pointer-events: none;
	cursor: auto;
}

.content.main_dashboard .dashboard_container .menu_container .menu .tab_list .tab[active],
.content.analytics_dashboard .dashboard_container .menu_container .menu .tab_list .tab[active]{
	/* background-color: rgba(var(--accent-color) , .25); */
	color: black;
}

.content.main_dashboard .dashboard_container .menu_container .menu .tab_list .tab .label,
.content.analytics_dashboard .dashboard_container .menu_container .menu .tab_list .tab .label{
	width: 80%;
	max-width: 0px;
	overflow: hidden;
	height: auto;
	white-space: nowrap;
	transition: max-width 500ms;
}

.content.main_dashboard .dashboard_container .menu_container.expand .menu .tab_list .tab .label,
.content.analytics_dashboard .dashboard_container .menu_container.expand .menu .tab_list .tab .label{
	max-width: 80%;
}
.content.main_dashboard .dashboard_container .menu_container .menu .tab_list .tab .icon,
.content.analytics_dashboard .dashboard_container .menu_container .menu .tab_list .tab .icon{
	margin: auto;
}


.content.main_dashboard .dashboard_container .analytics_container,
.content.analytics_dashboard .dashboard_container .analytics_container{
	flex: 1 1 auto;
	width: calc(100% - 60px);
	margin-left: 60px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	transition: margin-right 400ms, margin-left 400ms, width 400ms;
	box-sizing: border-box;
}

.content.main_dashboard .dashboard_container .analytics_container.shrink_right,
.content.analytics_dashboard .dashboard_container .analytics_container.shrink_right{
	margin-right: 300px;
	width: calc(100% - 310px);
}

.content.main_dashboard .dashboard_container .analytics_container.shrink_left,
.content.analytics_dashboard .dashboard_container .analytics_container.shrink_left{
	margin-left: 200px;
	width: calc(100% - 200px);
}

.content.main_dashboard .dashboard_container .analytics_container.shrink_left.shrink_right,
.content.analytics_dashboard .dashboard_container .analytics_container.shrink_left.shrink_right{
	margin-left: 200px;
	margin-right: 300px;
	width: max(calc(100% - 510px), 300px);
}

.content.main_dashboard .dashboard_container .analytics_container .grid_top_bar,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar{
	height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 90%;
	flex-wrap: wrap;
}

.content.main_dashboard .dashboard_container .analytics_container .grid_top_bar .left,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .left{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 10px;
}

.content.main_dashboard .dashboard_container .analytics_container .grid_top_bar .right,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .right{
	display: flex;
	margin-top: 10px;
	max-width: 100%;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .report_title,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .title{
	font-size: 1.45rem;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .report_divider,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .divider{
	color: rgba(0, 0, 0, .5);
    font-size: 1.1rem;
    padding: 6px 10px 3px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection{
	position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
	position: relative;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection.empty_list .selection_field{
	border-bottom: 1px solid rgba(102, 102, 102, 0);
	cursor: text;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection.empty_list .selection_field svg{
	display: none;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection.empty_list .shared_field .share{
	top: 1px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_field{
	font-size: 1.2rem;
    line-height: 1.3rem;
    border-bottom: 1px solid #666;
    padding: 0 3px;
    color: #161616;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 25px;
    margin-top: 5px;
	cursor: pointer;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_field .selected{
	max-width: 200px;
	min-width: 30px;
	white-space: nowrap;
	overflow: hidden;
	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_field svg{
	margin-left: 10px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field{
	margin: 0 10px 0 5px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field .share{
	margin-left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 15%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 400ms, box-shadow 400ms;
	cursor: pointer;
	position: relative;
	left: 0px;
	top: 3px;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field .share:hover{
	background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .20);
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field:not([data-shared]) .share{
	visibility: hidden;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list{
	position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 1px 1px 10px rgb(0 0 0 / 15%);
    border-radius: 2px;
    z-index: 400;
    background-color: rgb(245, 245, 245);
    margin-top: 5px;
	/* opacity: 0; */
	pointer-events: none;
	max-height: 0px;
	overflow: hidden;
	transition: all 400ms;
	width: max-content;
	

	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list.show{
	/* opacity: 1; */
	pointer-events: all;
	max-height: 1000px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list .selection_item{
	padding: 8px 16px;
	cursor: pointer;	
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list .selection_item .title{

}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list .selection_item .share{
	margin-left: 10px;
	width: 20px;
    height: 20px;
    border-radius: 15%;
    padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 400ms, box-shadow 400ms;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list .selection_item .share:hover{
	background-color: rgba(255, 255, 255, 0.05);	
	box-shadow: 0 0 10px rgba(0, 0, 0, .20);
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field:not([data-shared]) .share .icon.sharing{
	display: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list .month_item .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list .selection_item .share .icon.sharing{
	color: #1E8E3E;
}


.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list .month_item .share .icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field .share .icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab .share .icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item .share .icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list .selection_item .share .icon.not_sharing{
	color: #cc8a34;
}

 
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list .month_item[data-shared="0"] .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field[data-shared="0"] .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab[data-shared="0"] .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item[data-shared="0"] .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list .selection_item[data-shared="0"] .share .icon.sharing{
	display: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list .month_item[data-shared="1"] .share .icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .shared_field[data-shared="1"] .share .icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab[data-shared="1"] .share .icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item[data-shared="1"] .share .icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list .selection_item[data-shared="1"] .share .icon.not_sharing{
	display: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list.show .selection_item:hover{
	background-color: rgba(var(--accent-color) , 1);
	color: white;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list.show .selection_item:hover .share .icon.sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .selection_list.show .selection_item:hover .share .icon.not_sharing{
	color: white;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list{
	display: flex;
	overflow-x: auto;
	scrollbar-width: thin;  /* Firefox */
	scrollbar-width: 6px;
	scrollbar-color: light;
	transition: all 400ms;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list::-webkit-scrollbar{
	height: 8px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list::-webkit-scrollbar-thumb {
    background-color: #CDCDCD;
    box-sizing: border-box;
	border-top: 4px solid rgba(0, 0, 0, .0);
    background-clip: content-box;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list::-webkit-scrollbar-track {
    /* background-color: #f0f0f0; */
}



.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab{
	padding: 4px 8px;
	min-height: 30px;
	cursor: pointer;
	display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	overflow: hidden;
	transition: opacity 500ms;

	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list.disabled .tab{
	opacity: .3;
	pointer-events: none;
	cursor: wait;
	
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab .share{
	margin-left: 5px;
	width: 20px;	
	height: 20px;	
    border-radius: 15%;
    padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 400ms, box-shadow 400ms;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab .share:hover{
	background-color: rgba(255, 255, 255, 0.05);	
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .20);
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab + .tab{
	margin-left: 15px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab[active]{
	background-color: rgba(var(--accent-color) , 1);
	color: white;
	border-radius: 2px;	
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab.disabled{
	pointer-events: none;
	cursor: not-allowed;
	opacity: .25;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab[active] .share .icon.icon.not_sharing,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_top_bar .tab_list .tab[active] .share .icon.sharing{
	color: white;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_container{
	height: 80%;
	width: 90%;
	margin: 0 auto;
	padding-top: 20px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid{
	display: grid;
	gap: 10px 10px;
	max-width: 100%;
	width: 100%;
	height: 100%;
	grid-auto-rows: 100%;
    grid-template-columns: 100%;
	/* overflow: auto; */
	-ms-overflow-style: none;
	scrollbar-width: none;
	transition: all 400ms;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid.shrink_right{
	max-width: calc(100% - 250px);
}

@media (max-width: 425px) {
	.content.analytics_dashboard .dashboard_container .analytics_container .grid{
		grid-template-columns: repeat(auto-fit, 100%);
	}
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid::-webkit-scrollbar{
	display: none;
}

.reviews_container{
	display: flex;
	overflow-y: auto;
    overflow-x: hidden;
	padding-right: 0px;
	scrollbar-width: thin;  /* Firefox */
	scrollbar-width: 6px;
	scrollbar-color: light;
}

.reviews_container::-webkit-scrollbar{
	width: 6px;
}

.reviews_container::-webkit-scrollbar-thumb {
    background-color:#CDCDCD;
    box-sizing: border-box;
}

.reviews_container::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}

.reviews{
	overflow: auto;
    display: flex;
    flex-direction: column;
	scrollbar-width: thin;
}

.reviews::-webkit-scrollbar {
    width: 6px;
}

.reviews::-webkit-scrollbar-thumb {
    background-color: #CDCDCD;
    box-sizing: border-box;
}

.reviews .review.hide{
	display: none;
}

.reviews .review{
    margin: 10px 10px;
    background-color: rgba(0,0,0, .025);
    border-radius: 3px;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reviews .review{

}

.reviews .review .review__header{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.reviews .review .review__header .left{
    display: flex;
}

.reviews .review .review__header .left .left__icon{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c5ab8a;
    box-sizing: border-box;
    margin-right: 15px;
    font-size: 1.8rem;
	flex: 0 0 auto;
}

.reviews .review .review__header .left .left__content{
    display: flex;
    flex-direction: column;
}

.reviews .review .review__header .right{
    display: flex;
    flex-direction: column;
}
.reviews .review .review__header .right .rating{
    display: flex;
    justify-content: flex-end;
}
.reviews .review .review__header .right .comments{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.reviews .review .review__header .right .comments .comments__icon{
    margin-right: 5px;
}

.reviews .review .author{
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 5px 0;
    color: #4e4d4d;
}

.reviews .review .review__body{
    width: 100%;
    display: flex;
}

.reviews .review .body{
    font-size: 1rem;
    margin: 25px 0;
    color: #4e4d4d;
    text-align: left;
    line-height: 1.6rem;
}

.reviews .review .rating{
    margin: 5px 0;
}

.reviews .review .rating .stars .star{
    font-size: 1rem;
    margin: 0 2px;
    color: rgba(var(--accent-color), .9);
}

.reviews .review .rating .stars .star--inactive{
    color: rgba(0, 0, 0, .25);
}

.content.analytics_dashboard .dashboard_container .analytics_container .note_item{
	border-radius: 3px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
	background-color: white;
	display: flex;
	flex-direction: column;
	position: relative;
}

.content.analytics_dashboard .dashboard_container .analytics_container .note_item .note_container{
	width: 100%;
	height: 100%;
	overflow: auto;
}

.content.analytics_dashboard .dashboard_container .analytics_container .note_item .note{
	padding: 30px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .note_item .head .button_container .new_window{
	color: #323232;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	border-radius: 15%;
	padding: 5px;
	transition: all 500ms;
	cursor: pointer;
}

.content.analytics_dashboard .dashboard_container .analytics_container .note_item .head .button_container .new_window:hover{
	background-color: #f0f0f0;
}



.content.analytics_dashboard .dashboard_container .analytics_container .grid_item{
	border-radius: 3px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
	background-color: white;
	display: flex;
	flex-direction: column;
	position: relative;
}

.content.analytics_dashboard .options_container .months_content .head,
.content.analytics_dashboard .options_container .options_content .head,
.content.analytics_dashboard .dashboard_container .analytics_container .note_item .head,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fafafa;
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	padding: 5px 10px;
	flex: 0 0 auto;
	height: 30px;
	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.content.analytics_dashboard .options_container .months_content .head .title,
.content.analytics_dashboard .options_container .options_content .head .title,
.content.analytics_dashboard .dashboard_container .analytics_container .note_item .head .title,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .title{
	font-weight: bold;
}

.content.analytics_dashboard .dashboard_container .analytics_container .note_item .head .title_container,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .title_container{
	display: flex;
	text-transform: capitalize;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .title_container .divider{
	padding: 2px 8px 0px;
    font-size: 0.9rem;
    color: rgba(0, 0, 0, .5);
}

.content.analytics_dashboard .dashboard_container .analytics_container .note_item .head .button_container,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container{
	display: flex;
	transition: opacity 500ms;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item[data-type="chart"] .head .button_container > *:not([data-item="chart"]) {
	display: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item[data-type="table"] .head .button_container > *:not([data-item="table"]) {
	display: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container.disabled{
	cursor: wait;
	pointer-events: none;
	opacity: .3;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container > *{
	margin-left: 3px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .chart_type{
	color: #323232;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	border-radius: 15%;
	padding: 5px;
	transition: all 500ms;
	cursor: pointer;
	font-size: 1.15rem;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .chart_type:hover{
	background-color: #f0f0f0;
}


.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .chart_type[data-type="bar"] .table,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .chart_type[data-type="bar"] .bar{
	display: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .chart_type[data-type="line"] .bar,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .chart_type[data-type="line"] .line{
	display: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .chart_type[data-type="table"] .table,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .chart_type[data-type="table"] .line{
	display: none;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .toolbar_toggle,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .options,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .refresh{
	color: #323232;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	border-radius: 15%;
	padding: 5px;
	transition: all 500ms;
	cursor: pointer;
	
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .button_container .toolbar_toggle:hover,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .refresh:hover,
.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .options:hover{
	background-color: #f0f0f0;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .head .options.active{
	background-color: #eeeeee;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid_item .canvas_container{
	flex: 1 1 auto;
	overflow: hidden;
	padding: 0px 10px 0px 0px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid .not_found{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	border-radius: 3px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
    background-color: white;
	padding: 30px 30px 40px;
	max-width: 600px;
    /* max-height: 230px; */
    align-self: center;
    justify-self: center;
	margin: auto;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid .not_found .icon{
	font-size: 4rem;
    margin: 10px 10px 5px;
    color: rgba(var(--accent-color), 1);
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid .not_found .title{
	font-size: 1.8rem;
    margin: 10px 0px;
	font-weight: 500;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid .not_found .body{
	font-size: 1.1rem;
    margin: 10px 0 10px;
}

.content.analytics_dashboard .dashboard_container .analytics_container .grid .not_found .button{
	padding: 10px 12px;
    background-color: rgba(var(--accent-color), 1);
    color: white;
	font-weight: 500;
    border-radius: 2px;
    cursor: pointer;
    margin: 20px 0 10px;
    text-align: center;
	transition: background-color 400ms, color 400ms;
}
.content.analytics_dashboard .dashboard_container .analytics_container .grid .not_found .button:hover{
	background-color: rgba(var(--accent-color), .75);
	/* color: rgba(var(--accent-color), 1); */
}

.content.main_dashboard .dashboard_container .analytics_container + .options_container,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container{
	flex: 0 0 auto;
    max-width: 250px;
    width: 100%;
    /* height: 100%; */
    position: absolute;
    display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    top: 0px;
	right: -250px;
    transition: right 400ms;
    margin-top: 100px;
	pointer-events: none;
	padding-top: 20px;
}

.content.main_dashboard .dashboard_container .analytics_container + .options_container.expand,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container.expand{
	pointer-events: all;
	right: 0px;
}

.content.main_dashboard .dashboard_container .analytics_container + .options_container > div + div,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container > div + div{
	margin-top: 10px;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content{
	display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 3px 0 0 3px;
    width: 100%;
    height: 80%;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
	
	
}
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item{
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 14px;
	padding-right: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	pointer-events: all;
	max-height: 50px;
	/* opacity: 1; */
	transition: max-height 600ms ease-in, padding-top 600ms ease-in, padding-bottom 600ms ease-in, opacity 500ms;
	overflow: hidden;
	position: relative;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item > *{
	opacity: 1;
	transition: opacity 600ms ease-in;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item.active::before{
	content: '';
	background-color: rgba(var(--accent-color) , 1);
	position: absolute;
	width: 4px;
	height: 100%;
	left: 0px;
	top: 0px;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list.disabled .chart_item{
	pointer-events: none;
	opacity: .3;
	cursor: wait;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item .share{
	display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 15%;
    padding: 5px;
    transition: all 500ms;
    cursor: pointer;
	margin-left: 10px;
}
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item .share:hover{
	background-color: #ffffff;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .20);
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item.disabled {
	pointer-events: none;
    max-height: 0px;
    padding-top: 0px;
	padding-bottom: 0px;
	transition: max-height 500ms ease-out, padding-top 500ms ease-out, padding-bottom 500ms ease-out, border-top 500ms ease-out;
}
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item.disabled > * {
	opacity: 0;
	border-top: 0px;
	transition: opacity 700ms ease-out, ;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item:hover{
	background-color: rgba(var(--accent-color), .05);
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item + .chart_item.disabled{
	border-top: 0px solid rgba(0, 0, 0, .1);
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .options_content .chart_list .chart_item + .chart_item{
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider{
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	padding: 10px 16px;
	transition: 500ms opacity;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider.disabled{
	pointer-events: none;
	opacity: .3;
	cursor: wait;
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider input[type="range"]{
	all: revert;
	
	flex: 1 1 auto;
	width: 100%;
	margin: 2px 0px 0px;
	height: auto;
	border: none;
	padding: 0px;
	/* -webkit-appearance: none; */
	position: relative;
	z-index: 1;
}

/* .content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider input[type="range"]::before{
	content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 98%;
    height: 5px;
    background-color: rgba(var(--accent-color), 1);
    border-radius: 10px
} */

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider input[type="range"]:focus,
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider input[type="range"]:focus-visible{
	outline: none;

}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list{
	display: flex;
    flex: 1 1 auto;
    width: 100%;
    justify-content: space-between;
}


.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list .month_item{
	width: 12px;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	position: relative;
	margin-top: 3px;
	
}
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list .month_item .share{
	color: #323232;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 15%;
    padding: 5px;
    transition: all 500ms;
    cursor: pointer;
	margin-top: 1px;
}
.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list .month_item .share:hover{
	background-color: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 15%);
}

.content.analytics_dashboard .dashboard_container .analytics_container + .options_container .months_content .month_slider .month_list .month_item::before{
	content: '';
    position: absolute;
    top: -8px;
    height: 4px;
    width: 1px;
    background-color: rgba(0, 0, 0, .3);
    z-index: 0;
	
}




section.footer[data-with="analytics_dashboard"] {
	z-index: -10;
	padding: 10px 50px 20px;
	background-color: rgba(var(--accent-color), .05);
}


section.footer[data-with="analytics_dashboard"][data-load="1"] {
	width: calc(100% - 160px);
	left: 60px;
}

section.footer[data-with="analytics_dashboard"][data-load="1"].shrink_left {
	padding-left: 200px;
	width: calc(100% - 310px);
}
	
section.footer[data-with="analytics_dashboard"] .logo_container{
	flex: 0 1 auto;
	width: 30%;
	min-width: 250px;
	max-width: 300px;
}

section.footer[data-with="analytics_dashboard"] .support_container{
	flex: 0 1 auto;
    padding-left: 20px;
}


.alert_box{
	overflow: hidden;
    max-height: 0px;
    /* pointer-events: none; */
    z-index: 500;
    position: absolute;
    top: 40px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: max-height 500ms, background-color 500ms, color 500ms, border-bottom 500ms, left .4s, width .4s;
	background-color: rgba(var(--accent-color), 1);
	border-bottom: 0px solid rgba(var(--accent-color), 1);
	box-sizing: border-box;
}
.alert_box.shrink_left{
	width: calc(100% - 300px);
    left: 300px;
}

.alert_box .alert_container{
	height: 100%;
	width: 90%;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;	
}
.alert_box .alert_content{
	color: white;
	font-size: 1.1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgb(5, 5, 5);
	opacity: 0;
	transition: opacity 300ms;
}

.alert_box .alert_content .icon{
	transition: color 500ms;	
}
.alert_box .alert_content .title{
	margin-left: 5px;
	font-weight: bold;
}
.alert_box .alert_content .message{
	margin-left: 5px;
	font-weight: 400;
}

.alert_box[data-alert="show"]{
	max-height: 45px;
}

.alert_box[data-alert="show"] .alert_content{
	opacity: 1;
}

.alert_box[data-type="warning"]{
	background-color: #FFE4C7;
	border-bottom: 5px solid #FA9D19;
}
.alert_box[data-type="warning"] .icon{
	color: #FA9D19;
}

.alert_box[data-type="error"]{
	background-color: #FDE3DE;
	border-bottom: 5px solid #E44F3C;
}
.alert_box[data-type="error"] .icon{
	color: #E44F3C;
}

.alert_box[data-type="success"]{
	background-color: #3DC18C;
	border-bottom: 5px solid #06AC50;
}

.alert_box[data-type="success"] .icon{
	color: #06AC50;
}

.alert_box[data-type="info"]{
	background-color: #C4E8FA;
	border-bottom: 5px solid #416DB0;
}
.alert_box[data-type="info"] .icon{
	color: #416DB0;
}

section.body.shrink_down > .content{
}

section.body.shrink_down > .content{
	height: calc(100% - 20px);
    margin-top: 20px;
}

.audio_player_container{
	position: absolute;
    z-index: 0;
    width: 100%;
    left: 0px;
    bottom: 0px;
    background-color: #333333;
    border-radius: 0 0 3px 3px;
    box-shadow: 0px -2px 0px rgba(var(--accent-color), .9);
	display: flex;
	justify-content: space-between;
	padding: 10px 14px;
	align-items: center;
	height: 58px;
	box-sizing: border-box;
}

.audio_player_container > div + div{
	margin-left: 10px;
}

.audio_player_container[data-audio-player="not-selected"]{
	
}


.audio_player_container .audio_player_id{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 400px
}


.audio_player_container .audio_player_date{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 400px
}

.audio_player_container .audio_player_time{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 400px
}

.audio_player_container .audio_player_tracking{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 400px
}

.audio_player_container .audio_player_tracking .label,
.audio_player_container .audio_player_time .label,
.audio_player_container .audio_player_date .label,
.audio_player_container .audio_player_id .label{
	display: flex;
	align-items: center;
	width: 100%;
	font-weight: 400;
	font-size: .75rem;
	color: #464646;
	height: 12px;
	white-space: nowrap;
}

.audio_player_container .audio_player_tracking .value,
.audio_player_container .audio_player_time .value,
.audio_player_container .audio_player_date .value,
.audio_player_container .audio_player_id .value{
	width: 100%;
	font-weight: 600;
	font-size: 1.05rem;
    color: #1e1e1e;
    height: 20px;
	white-space: nowrap;
}

.audio_player_container .audio_player_controls{
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
	width: 400px
}

.audio_player_container .audio_player_controls audio{
	width: 100%;
}

/* .audio_player_container + .responsive_table {
	margin-bottom: 60px;
} */

/* .audio_player_container + .responsive_table .row .col:last-of-type {
	width: 80px;
} */

.audio_player_container + .responsive_table .row .col:last-of-type .actions{
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	gap: 5px;
}


.audio_player_container + .responsive_table .row.selected .col:last-of-type .actions,
.audio_player_container + .responsive_table .row:hover .col:last-of-type .actions{
	opacity: 1;
}



.audio_player_container + .responsive_table .row .col:last-of-type .actions > *{
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #2a2a2a;	
	position: relative;
	padding: 5px;
	box-sizing: border-box;
	
}

.audio_player_container + .responsive_table .row .col:last-of-type .actions > *::before{
	content: "";
	position: absolute;
	width: 0%;
	height: 0%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .1);
	transition: all 200ms;
	
}

.audio_player_container + .responsive_table .row .col:last-of-type .actions > *:hover::before{
	width: 100%;
	height: 100%;
}


.audio_player_container + .responsive_table .row[data-file="disabled"]{
	cursor: default;
}

.audio_player_container[data-agent="chrome"]{
	background-color: #f1f3f4
}

.audio_player_container[data-agent="firefox"]{
	background-color: #1e1e1e;
	color: #f1f3f4
}

.audio_player_container[data-agent="firefox"] .audio_player_tracking .label,
.audio_player_container[data-agent="firefox"] .audio_player_time .label,
.audio_player_container[data-agent="firefox"] .audio_player_date .label,
.audio_player_container[data-agent="firefox"] .audio_player_id .label{
	color: #c4c4c4
}
.audio_player_container[data-agent="firefox"] .audio_player_tracking .value,
.audio_player_container[data-agent="firefox"] .audio_player_time .value,
.audio_player_container[data-agent="firefox"] .audio_player_date .value,
.audio_player_container[data-agent="firefox"] .audio_player_id .value{
	color: #FFFFFF
}

.audio_player_container[data-agent="safari"]{
	background-color: #3b3b3b;
}



.audio_player_container + .responsive_table .row .col .play_stop > * {
	width: 100%;
	height: 100%;
	font-size: 1rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 8px;
	box-sizing: border-box;
}
.audio_player_container + .responsive_table .row .col .play_stop .not-playing{
	margin-left: 1px;
}



.audio_player_container + .responsive_table .row[data-audio-state="playing"] .col .audio_indicator .playing {
	color: rgba(var(--accent-color) , 1);
}

/* Playing */
.audio_player_container + .responsive_table .row[data-audio-state="playing"] .col .actions .play_stop .playing {
	display: flex;
}
.audio_player_container + .responsive_table .row[data-audio-state="playing"] .col .actions .play_stop .not-playing {
	display: none;
}

.audio_player_container + .responsive_table .row[data-audio-state="playing"] .col .audio_indicator .playing {
	opacity: 1;
}

.audio_player_container + .responsive_table .row[data-audio-state="played"] .col .audio_indicator .playing,
.audio_player_container + .responsive_table .row[data-audio-state="not-playing"] .col .audio_indicator .playing,
.audio_player_container + .responsive_table .row[data-audio-state="paused"] .col .audio_indicator .playing {
	opacity: 0;
}

/* Not playing or paused or ended/played */
.audio_player_container + .responsive_table .row[data-audio-state="played"] .col .actions .play_stop .playing,
.audio_player_container + .responsive_table .row[data-audio-state="not-playing"] .col .actions .play_stop .playing,
.audio_player_container + .responsive_table .row[data-audio-state="paused"] .col .actions .play_stop .playing{
	display: none;
}

.audio_player_container + .responsive_table .row[data-audio-state="played"] .col .actions .play_stop .not-playing,
.audio_player_container + .responsive_table .row[data-audio-state="not-playing"] .col .actions .play_stop .not-playing,
.audio_player_container + .responsive_table .row[data-audio-state="paused"] .col .actions .play_stop .not-playing {
	display: flex;
}



/* Beginning of responsive tbale */


/* ++++ End of responsive tbale  */

.lightbox.select_list .lightbox_container{
	border-radius: 5px;
	max-width: 600px;
	overflow: initial;
	background-color: unset;
}
.lightbox.select_list .lightbox_container[data-size="md"]{
	max-width: 600px;
}
.lightbox.select_list .lightbox_container[data-size="sm"]{
	max-width: 400px;
}
.lightbox.select_list .lightbox_container[data-size="lg"]{
	max-width: 800px;
}

.lightbox.select_list .lightbox_container .lightbox_content{
	padding: 0px;
	position: relative;
	overflow: initial;
	
	max-height: min(600px, 80vh);
}

.lightbox.select_list .lightbox_container .lightbox_content .close{
	font-size: 1.4rem;
    right: 2px;
    top: 5px;
    transform: translate(0%, 0%);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.75);
	cursor: pointer;
}

.lightbox.select_list .lightbox_container .lightbox_content .icon_container{
	background-color: rgba(var(--accent-color), 1);
    color: white;
    text-align: center;
    font-size: 1.4rem;
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 50%;
    top: 2px;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1);
	z-index: 20;
}

.lightbox.select_list .lightbox_container .lightbox_content .title_container{
	padding: 30px 50px 20px;
    background-color: white;
    text-align: center;
    font-size: 1.4rem;
    border-top: 5px solid rgba(var(--accent-color), 1);
	border-radius: 3px 3px 0px 0px;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, .15);
	z-index: 10;
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container{
	/* padding: 20px 50px; */
	background-color: #f5f5f5;
	overflow-y: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list{
	display: flex;
	flex-direction: column;
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item{
	display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 16px;
	cursor: pointer;
	box-shadow: 0px -1px 0px rgba(0, 0, 0, 5%), 0px 1px 0px rgba(0, 0, 0, 5%);
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item:hover{
	background-color: rgba(0, 0, 0, .1);
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item.selected{
	background-color: rgba(0, 0, 0, .15);
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item.selected:hover{
	background-color: rgba(0, 0, 0, .2);
}

/* .lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item + .item{
	border-top: 1px solid rgba(0, 0, 0, .15);
} */

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item .cell{
	
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item .cell .label{
	font-size: 0.7rem;
    color: #787878;
	text-transform: capitalize;
	text-align: left;
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item .cell .value{
	/* text-align: center; */
	font-size: 1rem;	
}

.lightbox.select_list .lightbox_container .lightbox_content .list_container .list .item .cell .value > .icon{
	width: 100%;
	margin: auto;
	text-align: center;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.lightbox.select_list .lightbox_container .lightbox_content .list_container::-webkit-scrollbar {
	display: none;
}



.lightbox.select_list .lightbox_container .lightbox_content .button_container{
	padding: 10px 50px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	border-radius: 0px 0px 3px 3px;
	box-shadow: 0px -1px 6px rgba(0, 0, 0, .15);
	z-index: 10;
}

.lightbox.select_list .lightbox_container .lightbox_content .button_container input[type="submit"]{
	flex: 1 1 auto;
	margin-top: 5px;
	padding: 9px 5px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, .15);
}

.lightbox.select_list .lightbox_container .lightbox_content .button_container input[type="submit"] + input[type="submit"]{
	margin-left: 10px;
}

.lightbox.select_list .lightbox_container .lightbox_content .button_container input[type="submit"]#button-confirm{
	background-color: rgba(var(--accent-color) , 1);
	color: white;
}

.lightbox.select_list .lightbox_container .lightbox_content .button_container input[type="submit"]#button-cancel{
	background-color: #fbfbfb;
}

.lightbox.select_list .lightbox_container .lightbox_content .button_container input[type="submit"]#button-additional{
	background-color: #fbfbfb;
}

.error_notice{
	position: absolute;
    backdrop-filter: blur(2px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    border-radius: inherit;
    transition: backdrop-filter 600ms, opacity 600ms;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}
.error_notice .error_container{
	background-color: rgba(255, 255, 255, 1);
    border-radius: inherit;
    box-sizing: border-box;
    width: 80%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}

.error_notice .close{
	position: absolute;
    top: 0px;
    right: 5px;
    font-size: 1.1rem;
    color: rgba(0,0,0,0.5);
	cursor: pointer;
}
.error_notice .error_content{
	color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
.error_notice .error_content .title{
	font-size: 1.1rem;
    text-align: center;
    margin: 10px 0px 10px;
    font-weight: bold;
	
}

.error_notice .error_content .body{
	font-size: 1rem;
    text-align: center;
    margin: 10px 0px 10px;
}

.error_notice .error_content .button{
	box-sizing: border-box;
    padding: 10px 10px;
    background-color: rgba(var(--accent-color), 1);
    color: white;
    margin: 10px 0px 10px;
    width: fit-content;
    cursor: pointer;
}





/* FOR DEMO */


/* reviews */
.filter{
    position: relative;
}


.filter .filter_list{
    position: absolute;
    top: 100%;
    right: 0px;
    background-color: #f9f3ef;
    box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 15%);   
    border-radius: 3px;

	display: flex;
	flex-direction: column;
	min-width: 250px;
}



.filter .filter_button{
    /* padding: 10px;
    box-sizing: border-box;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: black;
	position: relative; */
}

.filter .filter_button::before{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #20cc24;
	position: absolute;
    top: 12px;
    left: 25px;
    transform: translate(-50%, -50%);
	opacity: 0;
}
.filter .filter_button.on::before{
	opacity: 1;
}

.filter .filter_button:hover{
    background-color: rgba(0,0,0,.15)
}

.filter.active .filter_button{
	background-color: rgba(0,0,0,.25)
}

.filter .filter_button .icon{	
	/* margin-right: 10px; */
}

.filter.active .filter_button:hover{
    background-color: rgba(0,0,0,.25)
}

.filter .filter_list .filter_item{
    color: black;
	display: flex;
	flex-direction: column;
}

.filter .filter_list .filter_label{
	padding: 15px 10px 5px 10px;
    font-weight: bold;
    font-size: .9rem;
}


.filter .filter_list{
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms;
	
	max-height: 500px;
	overflow: auto;
}

.filter.active .filter_list{
	opacity: 1;
	pointer-events: all;
}

.filter.active .filter_list .filter_sub_list_item{
    pointer-events: all;
	cursor: pointer;
}

.filter.active .filter_list .filter_list_buttons .button{
	cursor: pointer;
    pointer-events: all;
}

.filter .filter_list .filter_sub_list{
    /* background-color: rgba(0, 0, 0, .05); */
}

.filter .filter_list .filter_sub_list .label{
    color: black;
}

.filter .filter_list .filter_sub_list .filter_sub_list_item{
	padding: 10px 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.filter .filter_list .filter_sub_list .filter_sub_list_item:hover{
	background-color: rgba(0,0,0,0.03);
}

.filter .filter_list .filter_sub_list .filter_sub_list_item input.checkbox{
	flex: 0 0 auto;
	height: 20px;
	width: 20px;
	margin: 0 10px 0 0;
	pointer-events: none;
}

.filter .filter_list .filter_list_buttons{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 10px;
	position: sticky;
	bottom: 0px;
	left: 0px;
	background-color: inherit;
	flex: 1 1 auto;
	width: 100%;
    box-sizing: border-box;
	gap: 10px
}

.filter .filter_list .filter_list_buttons .button{
	padding: 10px;
	text-align: center;
	background-color: #ECE7E3;
	flex: 1 1 auto;
	border-radius: 3px;
}

.filter .filter_list .filter_list_buttons .button.button--primary{
	color: white;
	background-color: rgba(var(--accent-color) , 1);
}


.filter .filter_list .filter_list_buttons .button.button--w-100{
	width: 100%;
}


.content.analytics_dashboard .dashboard_container .analytics_container .reviews .reviews__toolbar{
    display: flex;
    background: #FFF9F6;
    margin-right: 20px;
    box-sizing: border-box;
    position: sticky;
    border-radius: 2px;
    height: 40px;
    top: 0px;
    left: 0px;
    justify-content: flex-end;
    align-items: center;
}
.filter .toolbar_right{
    position: relative;
}


/* Dashboard disabled */
.content.analytics_dashboard .dashboard_container.disable .options_container .options_content .chart_list .chart_item{
	pointer-events: none;
	opacity: .3;
}

.content.analytics_dashboard .dashboard_container.disable .options_container .months_content .month_slider{
	pointer-events: none;
	opacity: .3;
}


.content.analytics_dashboard .dashboard_container.disable .menu_container .tab_list{
	pointer-events: none;
	opacity: .3;
}

.content.analytics_dashboard .dashboard_container.disable .menu_container .misc_list{
	pointer-events: none;
	opacity: .3;
}

.content.analytics_dashboard .dashboard_container.disable .analytics_container .grid_top_bar .tab_list{
	pointer-events: none;
	opacity: .3;
}

.content.analytics_dashboard .dashboard_container.disable .analytics_container .grid_item .head .button_container{
	pointer-events: none;
	opacity: .3;
}

/* home */

.content.home .home_toolbar{
    width: 90%;
    max-width: 1200px;
    max-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 2px;
	margin: 15px 0 0 0;
	/* transition: all 400ms; */
	flex-wrap: wrap;
}

.content.home .home_toolbar.reduced{
	max-height: 600px;
	flex-direction: column;
}

.content.home .home_toolbar .left{
	display: flex;
	margin: 5px 10px;
}

.content.home .home_toolbar .left .title{
	font-size: 2rem;
	white-space: nowrap;
}

.content.home .home_toolbar.reduced .left .title{
	margin: 0px 0 30px;
	color: rgba(var(--accent-color), 1);
    font-size: 2.1rem;
    /* width: 500px; */
    text-align: center;
    line-height: normal;
    letter-spacing: 2px;
    /* margin: 0px 0 0px; */
    position: relative;
}

.content.home .home_toolbar .right{
    display: flex;
	margin: 5px 10px;
	overflow-x: auto;
}

.content.home .home_toolbar .right .button{
    cursor: pointer;
    width: 140px;
    height: 3rem;
    background: #eaeaea;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 300ms;
	white-space: nowrap;
	padding: 0 10px;
	box-sizing: border-box;
}
.content.home .home_toolbar .right .button:hover{
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
    background: #d3d3d3;
}

.content.home .home_toolbar.reduced .right .button{
	/* flex: 1 0 30%; */
    margin: 5px;
    padding: 10px 0px;
    text-align: center;
    border-radius: 3px;
    color: white;
    border-bottom: 1px solid rgba(var(--accent-color), 1);
    background-color: rgba(var(--accent-color), 1);
    cursor: pointer;
    transition: background-color 0.6s, color 0.6s;
    font-size: 14px;
}

.content.home .home_toolbar.reduced .right .button:hover{
	background-color: rgba(var(--accent-color), .075);
    color: rgba(var(--accent-color), 1);
    border-radius: 0px;
    border-bottom: 1px solid rgba(var(--accent-color), .5);
}

.content.home .home_toolbar .right .button + .button{
    margin-left: 20px;
}




@media (max-width: 769px) {
	.content.home .home_toolbar .left .title{
		font-size: 1.6rem;
	}

	.content.home .home_toolbar .right .button{
		height: 2.4rem;
	}

	.content.home .home_toolbar .right .button + .button{
		margin-left: 10px;
	}
}



.content.home .home_container{
	display: flex;
    width: 90%;
    max-width: 1200px;
    justify-content: space-between;
    align-items: center;
    margin: 50px 0 0;
    min-height: 250px;
	transition: all 500ms;
	overflow-y: auto;
}

.content.home .home_container.hidden{
	display: none;
}

.content.home .home_container .home_widget{
	flex: 1 1 25%;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    justify-content: center;
    align-items: center;
    /* cursor: pointer; */
    border: 4px solid white;
    border-radius: 2px;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 10%);;
	margin: 10px;
    transition: all 500ms;
	padding: 10px
}





@media (max-width: 1025px) {
	.content.home .home_container[data-size="full"]{
		flex-wrap: wrap;
		/* min-height: 250px; */
	}
	
	.content.home .home_container[data-size="full"] .home_widget{
		min-height: 180px;	
		min-width: 140px;
	}
	.content.home .home_container[data-size="half"]{
		flex-wrap: wrap;
		/* min-height: 250px; */
	}
	
	.content.home .home_container[data-size="half"] .home_widget{
		min-height: 180px;	
		min-width: 140px;
	}
	.content.home .home_container[data-size="low"]{
		flex-wrap: wrap;
		/* min-height: 250px; */
	}
	
	.content.home .home_container[data-size="low"] .home_widget{
		min-height: 180px;	
		min-width: 140px;
	}
}

@media (max-width: 769px) {
	.content.home .home_container[data-size="full"]{
		flex-wrap: wrap;
		/* min-height: 250px; */
	}
	.content.home .home_container[data-size="full"] .home_widget{
		min-height: 180px;	
	}
	.content.home .home_container[data-size="full"] .home_widget .data_label{
		font-size: 1.8rem;
	}
	.content.home .home_container[data-size="full"] .home_widget .data_sublabel{
		font-size: .9rem;
	}
	.content.home .home_container[data-size="full"] .home_widget .icon_container{
		width: 40px;
		height: 40px;
	}
	
	
	.content.home .home_container[data-size="half"]{
		flex-wrap: wrap;
		/* min-height: 250px; */
	}
	.content.home .home_container[data-size="half"] .home_widget{
		min-height: 180px;	
	}
	.content.home .home_container[data-size="half"] .home_widget .data_label{
		font-size: 1.8rem;
	}
	.content.home .home_container[data-size="half"] .home_widget .data_sublabel{
		font-size: .9rem;
	}
	.content.home .home_container[data-size="half"] .home_widget .icon_container{
		width: 40px;
		height: 40px;
	}
	
	.content.home .home_container[data-size="low"]{
		flex-wrap: wrap;
		/* min-height: 250px; */
	}
	.content.home .home_container[data-size="low"] .home_widget{
		min-height: 180px;	
	}
	.content.home .home_container[data-size="low"] .home_widget .data_label{
		font-size: 1.8rem;
	}
	.content.home .home_container[data-size="low"] .home_widget .data_sublabel{
		font-size: .9rem;
	}
	.content.home .home_container[data-size="low"] .home_widget .icon_container{
		width: 40px;
		height: 40px;
	}
	
}



.content.home .home_container[data-size="empty"]{
	
}

.content.home .home_container[data-size="empty"] .home_widget{

}





.content.home .home_container .home_widget .icon_container{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: whitesmoke;
}

.content.home .home_container .home_widget:nth-of-type(5) .icon_container{
    background-color: rgba(0, 100, 161, .5);
}

.content.home .home_container .home_widget:nth-of-type(6) .icon_container{
    background-color: rgba(253, 111, 46, .5);
}

.content.home .home_container .home_widget:nth-of-type(7) .icon_container{
    background-color: rgba(80, 178, 178, .5)
}

.content.home .home_container .home_widget:nth-of-type(8) .icon_container{
    background-color: rgba(114, 21, 126, .5)
}

.content.home .home_container .home_widget:nth-of-type(9) .icon_container{
    background-color: rgba(178, 80, 140, 0.5)
}

.content.home .home_container .home_widget:nth-of-type(10) .icon_container{
    background-color: rgba(21, 126, 77, 0.5)
}

.content.home .home_container .home_widget:nth-of-type(11) .icon_container{
    background-color: rgba(234, 97, 95, 0.5)
}

.content.home .home_container .home_widget .data_label{
    font-size: 2.2rem;
    font-weight: 800;
    margin: 20px 0 5px;
    text-align: center;
}

.content.home .home_container .home_widget[data-key="service"] .data_label{
	font-size: 1.4rem;
}

.content.home .home_container .home_widget .data_sublabel{
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 10px;
    text-align: center;
}

.content.home .home_container .home_widget[data-key="service"] .data_sublabel{
	font-size: .85rem;
}


.content.home .home_container .home_widget.home_widget--skeleton {
	position: relative;
	overflow: hidden;
}

.content.home .home_container .home_widget.home_widget--skeleton::after {
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,rgba(255,255,255, 0) 0,rgba(255,255,255, 0.2) 20%,rgba(255,255,255, 0.5) 60%,rgba(255,255,255, 0));
	animation: shimmer 2s infinite;
	content: '';
}

@keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
}

.content.home .home_container .home_widget.home_widget--skeleton .data_label{
	width: 80px;
	height: 2.2rem;
	background-color: rgba(0, 0, 0, .15);
}

.content.home .home_container .home_widget.home_widget--skeleton .data_sublabel{
	width: 40px;
	height: 1rem;
	background-color: rgba(0, 0, 0, .15);
}

.content.home .home_container .home_widget.home_widget--skeleton .icon_container{
	background-color: rgba(0, 0, 0, .15);
}


/* Templates */

.template{
	display: flex;
    height: 100%;
    width: 100%;
	max-width: 1200px;
}

/* -- Table List Page */
.template--table-list{
	flex-direction: column;
	justify-content: flex-start;
    align-items: center;
}

/* Widgets Above Lists */

.widgets{
	height: 110px;
	margin: 20px 0 0;
	width: 90%;
	display: none;
	position: relative;
    justify-content: space-between;
    align-items: stretch;
	gap: 10px;
}

.widgets.in-use{
    display: flex;
}

.widget{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    border-radius: 2px;
    flex: 1 1 auto;
    padding: 10px;
    position: relative;
    /* height: %; */
    overflow: hidden;
}

.widget.hide{
    display: none;
}



.widget .icon_container{
    width: 60px;
    height: 60px;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    background-color: rgba(0, 0, 0, .5);
    color: white;
    border-radius: 0% 50% 50% 50%;
    position: absolute;
    z-index: -1;
    opacity: .75;
    top: -5px;
    left: -5px;
}

.widget:nth-of-type(3n - 1) .icon_container{
    background-color: rgba(253, 111, 46, .5);
}

.widget:nth-of-type(3n) .icon_container{
    background-color: rgba(80, 178, 178, .5)
}

.widget:nth-of-type(3n + 1) .icon_container{
    background-color: rgba(114, 21, 126, .5)
}

/* .widget:nth-of-type(3n + 2) .icon_container{
    background-color: rgba(178, 80, 140, 0.5)
} */

.widget:first-of-type .icon_container{
    background-color: rgba(0, 100, 161, .5);
}

.widget:last-of-type .icon_container{
    background-color: rgba(21, 126, 77, 0.5)
}

.widget .data_label{
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;

}

.widget .data_sublabel{
    font-size: .9rem;
    text-align: center;
}

@media (max-width: 1025px) {
    .widget .icon_container{
        width: 50px;
        height: 50px;
    }

    .widget .data_label{
        font-size: 1.4rem;
        font-weight: bold;
        text-align: center;
    
    }
    
    .widget .data_sublabel{
        font-size: .75rem;
        text-align: center;
    }
}


.widget-details{
	height: 10px;
	position: absolute;
	left: 0;
	top: 0;
	text-align: left;
	font-size: .75rem;
}

/* Window Design (New Card) */

/* .widgets.in-use + .window{
    height: calc(100% - 120px);
    margin: 0;
} */

.window{
	width: 90%;
    height: calc(100% - 20px);
    margin: 20px 0 20px;
	display: flex;
	flex-direction: column;

    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    overflow: hidden;
    box-sizing: border-box;
}

.window.window--popup{
	width: min(90%, 800px);
    height: min(90%, 600px);
	margin: auto;
	background-color: white;
}

.window.window--popup-xl{
	width: min(90%, 1200px);
    height: min(90%, 800px);
	margin: auto;
	background-color: white;
}

.window.window--popup-lg{
	width: min(90%, 800px);
    height: min(90%, 800px);
	margin: auto;
	background-color: white;
}

.window.window--popup-md{
	width: min(90%, 600px);
    height: auto;
	max-height: 600px;
	margin: auto;
	background-color: white;
}

.window.window--popup-sm{
	width: min(90%, 400px);
    height: auto;
	max-height: 600px;
	margin: auto;
	background-color: white;
}

.window_head{
	height: 40px;
	width: 100%;
    z-index: 2;
}

.window_head--auto-height {
	height: auto;
}

.window_body{
    overflow: auto;
	width: 100%;
	height: calc(100% - 40px);
	position: relative;
    z-index: 1;
    display: flex;
}

.window_body > .reviews_container,
.window_body > .table_container{
	height: 100%;
    width: 100%;
}

.window_body > .table_container[data-with="audio_player"]{
	height: calc(100% - 60px);
}

/* Type Box */


.type_box{
	display: flex;
    align-items: flex-end;
    padding: 4px;
}

.type_box .type_area {
	flex: 1 1 auto;
    line-height: 1.4rem;
    padding: 6px 10px;
    width: calc(100% - 80px);
    max-height: 210px;
    overflow: auto;
    background-color: white;
    border: 1px solid #f7f7f7;
    border-radius: 2px;
    font-size: 0.875rem;
    box-sizing: content-box;
	display: inline-block;
	/* white-space: pre-wrap; */
}

.type_box .type_area[placeholder]:empty::before {
	content: attr(placeholder);
    color: rgba(0, 0, 0, 0.33); 
}

.type_box .type_area[placeholder]:empty:focus::before {
	content: "";
}

.type_box .button {
	flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0px 0px 0px 4px;
    border-radius: 2px;
}

.type_box .button:hover{
	background-color: rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .025);
}



/* Chat/Message */

.messages {
	display: flex;
    flex-direction: column;
	flex: 1 1 auto;
}

.messages > .messages_head {
    height: 46px;
    background-color: #fafafa;
    padding: 0 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #efefef;
    font-weight: bold;
    box-shadow: 0 0 10px 10px rgb(0 0 0 / 5%);
    box-sizing: border-box;
    font-size: .875rem;
    position: sticky;
    top: 0px;
    left: 0px;
	z-index: 1;
}

.messages > .messages_body {
	font-size: .875rem;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    margin: 10px;
	position: relative;
	z-index: 0;
}

.messages > .messages_body > .message_break {
	width: 100%;
    display: flex;
    flex-direction: column;
	margin: 50px 0 30px 0;
    text-align: center;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}
.messages > .messages_body >.message_break:last-of-type {
	margin: 6px 0 30px 0;
}

.messages > .messages_body > .message_break::before {
	content: '';
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,.25);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.messages > .messages_body > .message_break .label {
    width: fit-content;
    background-color: white;
    z-index: 1;
    padding: 0 10px;
	color: rgba(0,0,0,0.75);
}

.messages > .messages_body > .message {
	width: 90%;
    display: flex;
    flex-direction: column;
    margin: 6px 0;
}

.messages > .messages_body > .message.message--left {
	align-items:flex-start;
}

.messages > .messages_body > .message.message--right {
	align-self: flex-end;
    align-items: flex-end;
}


.messages > .messages_body > .message > .message_title {
	display: flex;
    margin: 4px 0;
	font-size: 0.75rem;
}

.messages > .messages_body > .message > .message_title > .author{
	font-weight: bold;
}

.messages > .messages_body > .message > .message_title > .date{
	font-weight: 400;
	margin-left: 6px;
}

.messages > .messages_body > .message > .message_content {
	background-color: #e5e4e4;
    padding: 4px 8px;
    border-radius: 3px;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,.05);
}
.messages > .messages_body > .message > .message_content.blue--message{
	background-color: rgba(var(--accent-color) , 1);
	color:white;
}
.messages > .messages_body > .message > .message_content > .text {
	line-height: 1rem;
    min-height: 1rem;
    min-width: 10px;
}



/* Tabs Upgraded */

/* -- */

.not_available{
    max-width: 400px;
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.not_available .icon{
    font-size: 3rem;
}

.not_available .title{
    font-size: 1.6rem;
    font-weight: bold;
    margin: 15px 0 5px;
}

.not_available .body{
    font-size: 1rem;
    line-height: 1.4rem;
}

/* Notes for forms */


.content.main_dashboard .dashboard_container .analytics_container + .options_container {
	margin: 0px;
	padding: 0px;
	height: 100%;
	box-sizing: border-box;
}

.options_container .notes {
	display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 5px;
	margin: 20px 0;
    box-sizing: border-box;
    height: auto;
    overflow: auto;
}
.options_container .notes .note {
    background-color: white;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 3px;
    margin-top: 8px;
}
.options_container .notes .note .date {
	font-size: 0.75rem;
	color: rgba(0, 0, 0, .8);
	margin-top: 10px;
}

.options_container .notes .button {
    padding: 12px;
    margin: 12px 8px 8px 0px;
	color: white;
    background-color: rgba(var(--accent-color) , 1);
    cursor: pointer;
    display: inline-block;
    border-radius: 3px;
}
.options_container .notes .button.alt{
    padding: 12px;
    margin-top: 12px;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    color: #323232;
    display: inline-block;
    border-radius: 3px;
    background-color: rgb(226, 226, 226);
}

/* New Notifications Panel/Dropdown */

section.menu .panel{
    max-height: min(470px, 75%);
}
section.menu .panel .head{
    flex: 0 0 auto;
    height: 40px;
    background-color: rgba(var(--accent-color), 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: white;
}

section.menu .panel .head.head--border-left{
	border-left: 10px solid rgba(var(--accent-color), 1);
}

section.menu .panel .head .title{
    font-weight: bold;
    letter-spacing: 1px;
}

section.menu .panel .head .actions > *.hidden{
	display: none;
}

section.menu .panel .head .actions .btn{
    cursor: pointer;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0);
    box-sizing: border-box;
	opacity: 1;
    transition: all 300ms;
	position: relative;
}

section.menu .panel .head .actions .btn > .dot{
    width: 10px;
	height: 10px;
	border-radius: 50%;
	box-sizing: border-box;
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: transparent;
	border: 1px solid transparent;
	transition: all 300ms;
}

section.menu .panel .head .actions .btn.btn--active > .dot{
    background-color: rgba(32, 204, 36, 1);
	border-color: rgba(var(--accent-color), 1);
}



section.menu .panel .head .actions .btn:hover{
    background-color: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .1);
}

section.menu .panel .head .actions .btn.btn--active:hover > .dot{
	border-color: rgba(var(--accent-color), .75);
}
section.menu .panel .head .actions > .hidden{
	pointer-events: none;
	opacity: 0;
	display: none;
}
section.menu .panel .body{
    flex: 1 1 auto;
    height: calc(100% - 40px);
    overflow: auto;
}

/* New Popups */
.popup{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: calc(100% - 65px);
	background-color: rgba(0, 0, 0, .5);
	display: flex;
	justify-content: center;
	align-items: center;

	transition: opacity 300ms;
}

.popup.popup--global{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}


.popup[data-popup="show"] {
	opacity: 1;
	pointer-events: all;
}

.popup .popup_head{
	height: 40px;
    width: 100%;
    z-index: 2;
}
.popup .popup_body{
	overflow: auto;
    width: 100%;
    height: calc(100% - 40px);
    position: relative;
    z-index: 1;
    display: flex;
}

.popup .popup_foot{

}

/* Forms */

.form {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.form .form_head {
	display: flex;
	flex-direction: column;
}

.form .form_head .title{
	font-size: 2rem;
	font-weight: bold;
}

.form .form_body {
	display: flex;
	flex-wrap: wrap;
	height: fit-content;
	gap: 20px;
}

.form .form_body .field {
	display: flex;
    flex-direction: column;
    flex: 1 1 auto;
	width: auto;
    height: fit-content;
	padding: 0px;
	border: none;
	box-sizing: border-box;
	margin: 0px;
	transition: opacity 400ms;
}

.form .form_body .field.disable {
	opacity: .5;
	pointer-events: none;
	cursor: not-allowed;
}

.form .form_body .field > .checkboxes,
.form .form_body .field > .radios {
	min-height: 40px;
    box-sizing: border-box;
    border: none;
    padding: 8px 10px;
    border-radius: 2px 2px 2px 2px;
    background-color: rgba(var(--accent-color), 0.05);
    border-bottom: 1px solid rgba(var(--accent-color), .3);

	display: flex;
	gap: 12px;
	align-items: center;
}

@media (max-width: 769px) {
	.form .form_body .field > .checkboxes,
	.form .form_body .field > .radios {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}
}

.form .form_body .field > .checkboxes > .checkbox,
.form .form_body .field > .radios > .radio {
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
	gap: 5px;
}



.form .form_body .field > .checkboxes > .checkbox > input,
.form .form_body .field > .radios > .radio > input {
	height: 18px;
    margin: 1px 0 0 0;
}


.form .form_body .field > .checkboxes label + input,
.form .form_body .field > .radios label + input {
	margin: 0px 0px 0px 10px;
}

.form .form_body .field > select,
.form .form_body .field > input{
	min-height: 40px;
    box-sizing: border-box;
    border: none;
    padding: 8px 8px;
    border-radius: 2px 2px 2px 2px;
    background-color: rgba(var(--accent-color), 0.05);
    border-bottom: 1px solid rgba(var(--accent-color), .3);
}

.form .form_body .field > .checkboxes:focus-within,
.form .form_body .field > .radios:focus-within,
.form .form_body .field > select:focus,
.form .form_body .field > input:focus{
	outline: none;
    border-bottom: 1px solid rgba(var(--accent-color), 1);
}

.form .form_body .field > label + .checkboxes,
.form .form_body .field > label + .radios,
.form .form_body .field > label + select,
.form .form_body .field > label + input{
	margin-top: 10px;
}

.form .form_body .field > label,
.form .form_body .field > label,
.form .form_body .field > label,
.form .form_body .field > label{
	font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: rgba(0,0,0, .9);
}


.form .form_body .field.field--1 {
	width: 100%;
}


/* Previews */

.preview{
	display: flex;
    flex-direction: column;
    /* width: 600px;
    position: absolute;
    top: 0px;
	right: 0px; */
	height: 100%;
	background-color: #F9F9F9;
	box-sizing: border-box;
	border-radius: 3px;
}

.preview .preview_head{
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 0 0 auto;
    height: fit-content;
}

.preview[data-type="email"] .preview_body{
	flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100% - 120px);
}

.preview[data-type="text"] .preview_body{
	flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    height: calc(100% - 80px);
    gap: 8px;
}

.preview .preview_head .title{
	height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 18px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0,0,0,0.1);
	background-color: rgba(var(--accent-color) , 1);
	color: white;
	font-weight: bold;
}


.preview .message .value [data-social-selector] {
	display: none;
}

.preview .message .value [data-social-selector].selected {
	display: table-cell;
}

.preview .message .value table{
	width: 100% !important;
}

.preview[data-type="text"] .subject{
	display: none;
}

.preview[data-type="text"] .recipients{
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 18px;
    box-sizing: border-box;
    gap: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}


.preview[data-type="text"] .message{
	width: 50%;
    flex: 1 1 auto;
    margin: 8px 0  8px 18px ;
    align-self: flex-end;
    box-sizing: border-box;
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 5px;
    max-height: 300px;
	min-height: 35px;
    overflow: auto;
	line-height: 1.2rem;
}

.preview .send{
	margin: 8px 18px 8px 0px;
    align-self: flex-end;
}

.preview .send .button{
	align-self: flex-end;
    padding: 8px 18px;
    background: rgba(var(--accent-color), 1);
	border: none;
    border-radius: 2px;
    color: white;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 400ms;
}

.preview .send .button:hover{
	background: rgba(var(--accent-color), .8);
}

.preview[data-type="email"] .send .button.button--sent,
.preview[data-type="text"] .send .button.button--sent{
	align-self: flex-end;
    padding: 8px 12px;
    background: rgba(var(--accent-color), 1);
    border-radius: 2px;
    color: white;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
	cursor: default;
}

.preview[data-type="email"] .send .button.button--sent:hover,
.preview[data-type="text"] .send .button.button--sent:hover{
	background: rgba(var(--accent-color), 1);
}


.preview .send .button.disable{
	opacity: .5;
	pointer-events: none;
	cursor: not-allowed;
}

/*  */



.preview[data-type="email"] .recipients{
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 18px;
    box-sizing: border-box;
    gap: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
	flex: 0 0 auto;
}

.preview[data-type="email"] .subject{
	display: flex;
	height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 18px;
    box-sizing: border-box;
    gap: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
	flex: 0 0 auto;
}

.preview[data-type="email"] .message{
	width: 100%;
    flex: 1 1 auto;
    align-self: flex-end;
    box-sizing: border-box;
    max-height: 800px;
    overflow: auto;
}

.preview[data-type="email"] .send{
	margin: 8px 18px 10px 0px;
    align-self: flex-end;
}

.preview[data-type="email"] .send .button{
	align-self: flex-end;
    padding: 8px 18px;
    background: rgba(var(--accent-color), 1);
    border-radius: 2px;
    color: white;
	box-sizing: border-box;
	cursor: pointer;
}

.preview[data-type="email"] .send .button:hover{
	background: rgba(var(--accent-color), .8);
}

/* Device */

.device {
	position: relative;
	box-sizing: border-box;
	width: min(660px, 50%);
	/* overflow: hidden; */
	transition: width 400ms, height 400ms;
}


.device .preview{
	width: 100%;
}

.device.device--phone {
	width: min(360px, 100%);
	height: 700px;
	margin: auto;
	border: 16px black solid;
	border-top-width: 60px;
	border-bottom-width: 60px;
	border-radius: 36px;
}

.device.device--phone:before {
	content: '';
	display: block;
	width: 60px;
	height: 5px;
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #333;
	border-radius: 10px;
  }

.device.device--phone:after {
	content: '';
	display: block;
	width: 35px;
	height: 35px;
	position: absolute;
	left: 50%;
	bottom: -65px;
	transform: translate(-50%, -50%);
	background: #333;
	border-radius: 50%;
}

.device.device--tablet {
	width: min(600px, 100%);
	height: 700px;
	margin: auto;
	border: 16px black solid;
	border-top-width: 60px;
	border-bottom-width: 60px;
	border-radius: 36px;
}

.device.device--tablet:before {
	content: '';
	display: block;
	width: 60px;
	height: 5px;
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #333;
	border-radius: 10px;
  }

.device.device--tablet:after {
	content: '';
	display: block;
	width: 35px;
	height: 35px;
	position: absolute;
	left: 50%;
	bottom: -65px;
	transform: translate(-50%, -50%);
	background: #333;
	border-radius: 50%;
}


.device.device--responsive-h {
	height: 100%;
}

/* Popup ReviewsGPS */

.popup.reviews_gps .window_body{
	justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    padding: 10px;
    overflow: auto;
    box-sizing: border-box;
}

.popup.reviews_gps .form{
	width: min(400px, 100%);
    flex: 0 1 auto;
    margin: auto;
}

/* Confirmation Popup */
.confirmation.popup .confirmation_content {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
	width: 100%;
    box-sizing: border-box;
}

.confirmation.popup .confirmation_content .icon_container{
	width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--accent-color), .15);
    border-radius: 50%;
    color: rgba(var(--accent-color), 1);
    font-size: 1.2rem;
}

.confirmation.popup .confirmation_content .title_container{
	text-align: center;
	font-size: 1.2rem;
	color: rgba(var(--accent-color), 1);
	font-weight: bold;
}
.confirmation.popup .confirmation_content .body_container{
	text-align: center;
	font-size: 1rem;
	color: #1e1e1e;
}
.confirmation.popup .confirmation_content .button_container{
	display: flex;
	justify-content: center;
}

.confirmation.popup .confirmation_content .button_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 20px 0 0;
}

.confirmation.popup .confirmation_content .button_container .button {
	background-color: rgba(var(--accent-color), 1);
    border: none;
    padding: 10px 14px;
    color: white;
    text-transform: capitalize;
    border-radius: 2px;
    letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 400ms;
}

.confirmation.popup .confirmation_content .button_container .button:hover {
	background-color: rgba(var(--accent-color), .8);
}

.confirmation.popup .confirmation_content .button_container .button.button--confirm {
	background-color: rgba(var(--accent-color), 1);
}

.confirmation.popup .confirmation_content .button_container .button.button--confirm:hover {
	background-color: rgba(var(--accent-color), .8);
}

.confirmation.popup .confirmation_content .button_container .button.button--cancel {
	background-color: rgba(var(--accent-color), .15);
	color: rgba(var(--accent-color), 1);
}

.confirmation.popup .confirmation_content .button_container .button.button--cancel:hover{
	background-color: rgba(var(--accent-color), .05);
	color: rgba(var(--accent-color), .8);
}

.confirmation.popup .confirmation_content .button_container .button.button--additional {
}


/* Camerons CSS */

section.menu .rep_slider{
	position: fixed;
    right: 0px;
    top: 41px;
    background-color: ghostwhite;
    color: #333333;
    box-sizing: border-box;
    transition: all 400ms;
    width: min(450px, 100%);
    display: flex;
    flex-direction: column;
    max-height: 500px;
	box-shadow: 0px 0px 40px rgb(0 0 0 / 50%);
    pointer-events: all;
    opacity: 1;
}

section.menu .rep_slider.hidden{
	max-height: 0px;
	opacity:0;
	pointer-events: none;
}

section.menu .rep_slider .footer{
	border-top:1px solid #ededed;
}
section.menu .icon_container .rep_profile{
	height: 40px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.4s, opacity 600ms;
	cursor:pointer;
}
section.menu .rep_slider .body .rep_card{
	display: flex;
    flex-direction: row;
    width: 100%;
    padding: 10px;
    align-items: center;
	box-sizing: border-box;
	position: sticky;
	background:ghostwhite;
	gap: 10px;
	box-shadow: inset 0 0 10px 1px rgba(0, 0,  0, .2);
}


section.menu .rep_slider .body .listy .listy_item:hover{
	background-color: #ddd;
}
section.menu .rep_slider .body .listy .listy_item.open{
	display:block;
}


section.menu .rep_slider .head .toolbox.toolbox--title-close .right .button.tool.tool--selection.tool--xxs svg{
	background-color: #20cc24;;
	border-radius: 50%;
}
section.menu .rep_slider .head .toolbox.toolbox--title-close .left{
	align-items: center;
	font-weight: bold;
	letter-spacing: 1px;
}
section.menu .rep_slider .body .rep_card .image_container{
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}
section.menu .rep_slider .body .rep_card .image_container img{
    width: 100%;
    height: auto;
}
section.menu .rep_slider .body .rep_card .salesrep_info{
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	gap:10px;
}
section.menu .rep_slider .body .rep_card .salesrep_info h4{
	margin:0px;
}

section.chatbox_container{
	bottom:-600px;
	right:0px;
	position:absolute;
}

section.menu .rep_slider .body .rep_card .button_container{
    display: flex;
    justify-content: center;
	gap:10px;
}

section.menu .rep_slider .body .button{
    padding: 5px 10px;
    box-sizing: border-box;
	/* box sizing prevents button overflow at smaller screen */
    text-align: center;
    border-radius: 3px;
    color: white;
    color: rgba(var(--accent-color), 1);
    cursor: pointer;
    transition: background-color 0.6s, color 0.6s;
    font-size: 14px;
	background-color: rgba(var(--accent-color), .075);
	color: rgba(var(--accent-color), 1);
	border-radius: 0px;
	border-bottom: 1px solid rgba(var(--accent-color), .5);
	position:relative;
}

section.menu .rep_slider .body .button:hover {
	background-color: rgba(var(--accent-color), 1);
	color: white;
	border-radius: 0px;
	border-bottom: 1px solid rgba(var(--accent-color), .5);
}

section.chatbox_container{
	bottom:0px;
	right:0px;
	position:absolute;
}
section.chatbox_container.open{
	z-index:20;
	color:#333333;
	position: absolute;
	bottom:-20px;
	right:20px;
	transition: opacity 0.4s,transform 0.4s,box-shadow 1.2s;
	width:100%;
	max-width:1900px;
	box-shadow: 0px 0px 40px rgb(0 0 0 / 0%);
	display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
	pointer-events: none;
}
section.chatbox_container.open .chatbox{
	width: 300px;
    height: 600px;
    margin: 0px 0px 20px 20px;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 20px rgb(0 0 0 / 20%);
    overflow: hidden;
    box-sizing: border-box;
	background-color:rgb(233 231 231);
	pointer-events: auto;
	background:white;
}
section.chatbox_container.open .chatbox.minimized{
	transform: translateY(560px);
}
section.chatbox_container.open .chatbox .chatbox_head{
	height:40px;
	background-color:rgba(var(--accent-color), 1);
	z-index:1;
}
section.chatbox_container.open .chatbox .chatbox_head .toolbox.toolbox.toolbox--title-close.toolbox--blue .left{
	color:white;
	padding-left: 10px;
	display: flex;
    align-items: center;
}
section.chatbox_container.open .chatbox .chatbox_body{
	height:100%;
	overflow: auto;
	display:flex;
	flex-direction:column-reverse;
}
section.chatbox_container.open .chatbox .chatbox_footer{
	border-top:1px solid rgb(186,186,191);
	background-color:rgb(243 243 243);
}
/* section.menu .chatbox_container.open .chatbox .chatbox_body .messages{
	overflow-y: scroll;
	flex-direction: column-reverse;
} */


/* ##CAN_DELETE */
/* .panel{
	max-height: min(470px, 75%);
}
.panel .head{
	flex: 0 0 auto;
    height: 40px;
    background-color: rgba(var(--accent-color), 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: white;
}
.panel .body{
    flex: 1 1 auto;
    height: calc(100% - 40px);
    overflow: auto;
} */


.addchat_search{
	max-height: 300px;
}
.addchat_search > .search_head{
	flex: 0 0 auto;
	max-height: 240px;
    background-color: rgba(var(--accent-color) , 1);
    display: flex;
    flex-direction: column;
	min-height: 60px;
}
.addchat_search > .search_body{
	flex: 1 1 auto;
    height: calc(100% - 100px);
    overflow: auto;
	display: flex;
    flex-direction: column;
	background-color: white;
}

.addchat_search > .search_footer{
	height:50px;
	display:flex;
	flex-direction:row;
	background-color: rgba(var(--accent-color) , 1);
	justify-content: center;
}

.addchat_search > .search_footer > .button_container{
	display: flex;
    width: 130px;
    height: 50px;
    flex-direction: row;
}

.addchat_search > .search_footer > .button_container .button{
	flex: 1 0 30%;
    margin: 5px;
    padding: 10px 0px;
    text-align: center;
    border-radius: 3px;
    color: rgba(var(--accent-color), 1);
    border-bottom: white;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.6s, color 0.6s;
    font-size: 14px;
}
.addchat_search .search_container{
	display: flex;
	order:0;
    margin: 5px 25px 5px 25px;
    background-color: white;
    border-radius: 5px;
	max-height: 40px;
}
.addchat_search .listy{
	background-color: white;
	max-height: 250px;
}
.addchat_search .listy .no_users_found{
	padding: 0px 40px;
}
.addchat_search .listy > .listy_item:hover{
	background-color:#ddd;
}
.addchat_search .listy > .listy_item > .date{
	font-size: unset;
} 
.addchat_search > .search_head > .users_list{
    background-color: rgba(var(--accent-color) , 1);
	max-height:200px;
	overflow: auto;
}
.addchat_search > .search_head > .users_list > .participants_container{
	margin: 10px 35px;
	display:flex;
	flex-wrap: wrap;
	gap:5px;
	height:100%;
	justify-content: center;
}
.participants_container > .participant_butt{
	display: flex;
    width: 130px;
    padding: 4px;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid white;
    border-radius: 5px;
    background-color: white;
	margin: 6px;
}
.participant_butt > .tool.tool--btn{
	cursor:pointer;
}

.addchat_search > .search_head > .search_container > input{
	height: 24px;
	width:90%;
    background: transparent;
    margin: 0;
    padding: 7px 8px;
    font-size: 14px;
    color: inherit;
    border: 1px solid transparent;
    border-radius: inherit;
}
.addchat_search > .search_head > .search_container > [data-action="search_clear"]{
	cursor: pointer;
    padding: 0 10px;
    font-size: 1.2rem;
    height: 40px;
	opacity:0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
	pointer-events: none;
}
.addchat_search > .search_head > .search_container > [data-action="search_clear"] > svg{
	color:rgba(var(--accent-color), 1);
}
.addchat_search > .search_head > .search_container > [data-action="search_all_users"] > svg{
	color:rgba(var(--accent-color), 1);
}
.addchat_search > .search_head > .search_container > [data-action="search_all_users"]{
	cursor: pointer;
    padding: 0 10px;
    font-size: 1rem;
    height: 40px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.listy{
	display: flex;
    flex-direction: column;
    border-collapse: collapse;
}
.listy > .listy_item{
	border-left: 10px solid rgba(var(--accent-color), .1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 20px;
	cursor: pointer;
}
.listy >.listy_item >.title{
	cursor: pointer;
	order: 1;
    font-weight: bold;
}

.listy >.listy_item >.message{
	order: 3;
    flex: 0 0 100%;
    line-height: 1.4rem;
}
.listy >.listy_item >.date{
	order: 2;
    font-size: 12px;
}
.listy > .listy_item.listy_item--indicate {
	border-left: 10px solid rgba(var(--accent-color), 1);
}
.listy >.listy_item--centered-icon{
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}
.listy >.listy_item--centered-icon >.title{
	text-align: center;
    font-size: 1.2rem;
    color: rgba(var(--accent-color), 1);
    font-weight: bold;
}
.listy >.listy_item--centered-icon >.icon{
	width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--accent-color), .15);
    border-radius: 50%;
    color: rgba(var(--accent-color), 1);
    font-size: 1.2rem;
}
.listy >.listy_item--centered-icon >.message{
	text-align: center;
    font-size: 1rem;
    color: #1e1e1e;
}

.listy--options{
	position: absolute;
	top: 127px;
    left: 163px;
    transform: translateX(-50%);
    opacity: 0;
	z-index:1;
    pointer-events: none;
    transition: 300ms;
    background-color: #f9f3ef;
    display: flex;
    flex-direction: column;
    min-width: 250px;
    max-width: 500px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .15);
    border-radius: 3px;
	color:black;
	padding:5px;
}
.listy--options.phone--options{
	top: 127px;
    left: 214px;
    transform: translate(-50%, 0%);
}

.listy--options:after{
	top: 0;
    left: 50%;/* position the little arrow */
    margin-left: -10px;
		margin-top:-10px; /* Set margin equal to border px */
    width: 0;
    z-index:1;
    height: 0;
	border-bottom: solid 10px #f9f3ef; /* Creates the arrow pointing up, to change to a notch instead user border-top */
    border-left: solid 10px transparent; /* Creates triangle effect */
    border-right: solid 10px transparent; 
	content:''; /* Required to display content */
    position: absolute;
}
.listy--options>.listy_item{
	display:flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 5px;
	text-decoration: none;
}
.listy--options>.listy_item:hover{
	background-color: #ddd;
}
.listy--options.listy--active{
	opacity:1;
	pointer-events: all;
}
.listy--options.listy--active .option_label{
	color:black
}
.chat_option_container{
	display:flex;
	flex-direction: column;
	text-decoration: none;
}
.status_option_container{
	display:flex;
	flex-direction: row;
	text-decoration: none;
	gap:5px;
}
.status_indicator{
	display:flex;
	align-items:center;
	gap:5px;
}
.status_indicator::after{
	content: "";
    width: 12px;
    height: 12px;
    background-color: rgb(247, 155, 17);
    border-radius: 50%;
    opacity: 1;
    box-sizing: border-box;
    border: 2px solid ghostwhite;
    transition: all 300ms;
}
.status_indicator.status_indicator--online::after{
    background-color: #20cc24;
}
.status_indicator.status_indicator--offline::after{
    background-color: #e21b1b;
}


/* Loading Animations */

.loading_animation {
	font-size: 10px; /* change size here */
	position: relative;
	width: 4em;
	height: 1em;
	margin: 6px auto;
}

.loading_animation.loading_animation--absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.loading_animation.loading_animation--ellipse {
	
}

.loading_animation.loading_animation--ellipse .dot {
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 0.5em;
	background: #555; /* change color here */
	position: absolute;
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.loading_animation.loading_animation--ellipse .dot:nth-child(1),
.loading_animation.loading_animation--ellipse .dot:nth-child(2) {
	left: 0;
}
.loading_animation.loading_animation--ellipse .dot:nth-child(3) { 
	left: 1.5em;
}
.loading_animation.loading_animation--ellipse .dot:nth-child(4) { 
	left: 3em;
}

@keyframes ellipse-reveal {
	from {
		transform: scale(0.001);
	}

	to {
		transform: scale(1);
	}
}

@keyframes ellipse-slide {
	to {
		transform: translateX(1.5em)
	}
}

.loading_animation.loading_animation--ellipse .dot:nth-child(1) {
	animation-name: ellipse-reveal;
}

.loading_animation.loading_animation--ellipse .dot:nth-child(2),
.loading_animation.loading_animation--ellipse .dot:nth-child(3) {
	animation-name: ellipse-slide;
}

.loading_animation.loading_animation--ellipse .dot:nth-child(4) {
	animation-name: ellipse-reveal;
	animation-direction: reverse;
}

.loading_animation.loading_animation--spinner {

}

/* Progress Bar ---- Start */
.progress_bar {
	display:flex;
	width: 100%;
}

.progress_bar__action{
	flex: 0 0 100px;
	position: relative;  
}

.progress_bar__main{
	display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: calc(100% - 130px);
    margin: 0 20px 0 10px
}

.progress_bar__main .top {
	display:flex;
	align-items:flex-end;
}

.progress_bar__main .top .amount {
	font-size: 3rem;
	font-weight: bolder;
	color: rgba(var(--accent-color) , 1);
	margin-right: 20px;
}

.progress_bar__main .top .text {
	font-size: 1.1rem;
	color: grey;
	margin-bottom: 10px;
}

.progress_bar__main .bottom {}

.progress_bar__main .bottom .load_container{
	width:100%;
	background-color:#e7ebed;
	border-radius: 3px;
}

.progress_bar__main .bottom .load_container__bar{
	width:0%;
	height: 14px;
	background-color: rgba(var(--accent-color) , 1);
	border-radius: 3px;
}

.progress_bar .my_svg{
	color: rgba(var(--accent-color) , 1);
	position:absolute;
	top:50%;
	left:50%;
	height: 100%;
	width: 100%;
	transform:translate(-50%,-50%);
}

.progress_bar .my_svg{
	color: rgba(var(--accent-color) , 1);
	position:absolute;
	top:50%;
	left:50%;
	height: 100%;
	width: 100%;
	transform:translate(-50%,-50%);
}

.progress_bar .my_svg .circle {
	stroke: rgba(var(--accent-color) , 1);
	stroke-linecap: round;
	stroke-width: 14px;
	stroke-dasharray: 670;
	stroke-dashoffset: 740;
}

.progress_bar .my_svg .circle.complete {
	transition: all 300ms ease-in;
	fill:  rgba(var(--accent-color) , 1);
	opacity: 1;
	animation: fill 500ms linear;
	stroke-dasharray: 1700;
}

.progress_bar .my_svg .check {
	display: block;
	stroke: white;
	stroke-width: 30px;
	stroke-linejoin: round;
	stroke-dasharray: 580;
	stroke-dashoffset: 330;
	animation: check 280ms linear;
}

.progress_bar .my_svg .lilcircle1 {
	animation: moveq1 1500ms ease-out;
	animation-delay: 300ms;
}

.progress_bar .my_svg .done {
	opacity: 0;
}

.progress_bar .my_svg .lilcircle2 {
	animation: moveq2 1500ms ease-out;
	animation-delay: 300ms;
}

.progress_bar .my_svg .lilcircle3 {
	animation: moveq3 1500ms ease-out;
	animation-delay: 300ms;
}

.progress_bar .my_svg .lilcircle4 {
	animation: moveq4 1500ms ease-out;
	animation-delay: 300ms;
}

.progress_bar .my_svg .lilcircle5 {
	animation: moveq2 1500ms ease-out;
	animation-delay: 300ms;
}

.progress_bar .my_svg .line1 {
	stroke-dasharray: 150;
	stroke-dashoffset: 450;
	animation: line1 1500ms ease-out;
	animation-delay: 300ms;
}

.progress_bar .my_svg line1.drawn {
	stroke-dasharray: 260;
}

.progress_bar .my_svg .line2 {
	stroke-dasharray: 150;
	stroke-dashoffset: 450;
	animation: line2 1500ms ease-out;
	animation-delay: 300ms;
}

.progress_bar .my_svg line2.drawn {
	stroke-dasharray: 260;
}

.progress_bar .my_svg .line3 {
	stroke-dasharray: 150;
	stroke-dashoffset: 450;
	animation: line3 1500ms ease-out;
	animation-delay: 300ms;
}

.progress_bar .my_svg line3.drawn {
	stroke-dasharray: 260;
}

.progress_bar .my_svg.loading {
	transition: all 300ms ease-in;
	animation:rotate 2.3s linear infinite;
}
.progress_bar .my_svg.loading .circle {
	fill: none;
}

.progress_bar .my_svg.loading .check {
	display: none;
}

.progress_bar .my_svg.loading .lilcircle1 {
	display: none;
}

.progress_bar .my_svg.loading .lilcircle2 {
	display: none;
}

.progress_bar .my_svg.loading .lilcircle3 {
	display: none;
}

.progress_bar .my_svg.loading .lilcircle4 {
	display: none;
}

.progress_bar .my_svg.loading .lilcircle5 {
	display: none;
}

.progress_bar .my_svg.loading .line1 {
	display: none;
}

.progress_bar .my_svg.loading .line2 {
	display: none;
}

.progress_bar .my_svg.loading .line3 {
	display: none;
}


@keyframes rotate {
    from {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    to { 
        transform: translate(-50%,-50%) rotate(360deg);
    }
}
/* @keyframes fill {
    from {
        stroke-dasharray: 810;
    }
    to { 
        stroke-dasharray: 1700;
    }
} */
@keyframes check {
    from {
        stroke-dasharray: 330;
    }
    to { 
        stroke-dasharray: 580;
    }
}
@keyframes opacity {
    from{
        display:block;
        opacity: .9;
    }
    to{
        opacity:0;
        display:none;
    }
}
@keyframes moveq1 {
    from{
        display:block;
        opacity: .9;
        transform: translate(0px,0px);
    }
    to{
        transform: translate(-10px,-20px);
        opacity:0;
    }
}
@keyframes moveq2 {
    from{
        display:block;
        opacity: .9;
        transform: translate(0px,0px);
    }
    to{
        transform: translate(20px,-10px);
        opacity:0;
    }
}
@keyframes moveq3 {
    from{
        display:block;
        opacity: .9;
        transform: translate(0px,0px);
    }
    to{
        transform: translate(10px,20px);
        opacity:0;
    }
}
@keyframes moveq4 {
    from{
        display:block;
        opacity: .9;
        transform: translate(0px,0px);
    }
    to{
        transform: translate(-10px,20px);
        opacity:0;
    }
}
@keyframes line1{
    0% {
        display:block;
        opacity: .9;
        stroke-dasharray: 150;
    }
    50%{
        opacity: .5;
    }
    80%{
        opacity:.3;
    }
    90%{
        opacity:0;
    }
    100% { 
        opacity:0;
        stroke-dasharray: 320;
    }
}
@keyframes line2{
    0% {
        display:block;
        opacity: .9;
        stroke-dasharray: 150;
    }
    50%{
        opacity: .5;
    }
    80%{
        opacity:.3;
    }
    90%{
        opacity:0;
    }
    100% { 
        opacity:0;
        stroke-dasharray: 320;
    }
}
@keyframes line3{
    0% {
        display:block;
        opacity: .9;
        stroke-dasharray: 150;
    }
    50%{
        opacity: .5;
    }
    80%{
        opacity:.3;
    }
    90%{
        opacity:0;
    }
    100% { 
        opacity:0;
        stroke-dasharray: 320;
    }
}

/* Progress Bar ---- End */

.w-100p {
	width: 100%;
}