/* Vars
-------------------------------------------------- */

:root {
	--Fade-Plannest: linear-gradient(90deg, #046CC3 0%, #00C4FF 100%);
	--fw300: 300;
	--fw400: 400;
	--fw500: 500;
	--fw600: 600;
	--fw700: 700;
/*
	--title:           #040415;
	--text:            #616161;
	--label:           #7F7F7F;
	--primary:         #00C4FF;
	--primary-hover:   #0066BE;
	--secondary:       #0066BE;
	--warning:         #C76161;
	--light:           #D8D8D8;
	--radius:          16px;
*/
}


/* Scrollbars
-------------------------------------------------- */

body.win {
  scrollbar-width: thin;
  scrollbar-color: #d1d1d1 transparent;
}
body.win ::-webkit-scrollbar {
  width: 8px;
}
body.win ::-webkit-scrollbar-track {
  background-color: transparent;
}
body.win ::-webkit-scrollbar-thumb {
	border-radius: 4px;
  background-color: #d1d1d1;
}


/* Html & typography
-------------------------------------------------- */

html {
	height: 100%;
	height: 100vh;
	font-size: 100%;
	overflow: hidden;
}
body {
	-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
	-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
	-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
	user-select: none;
	color: #17335E;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	background: #F1F1F1;
	overflow: auto;                             /* prevent margin-top on child element moves parent element  */
}
img {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
h1 {
	color: #193766;
	font-size: 28px;
	font-weight: var(--fw500);
	line-height: 42px;
	letter-spacing: -0.56px;
}
h2 {
	color: #17335E;
	font-size: 24px;
	font-weight: var(--fw500);
	line-height: 36px;
	letter-spacing: -0.48px;
}
h3 {
	color: #344767;
	font-size: 20px;
	font-weight: var(--fw500);
	line-height: 30px;
	letter-spacing: -0.4px;
}
h4 {
	color: #344767;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 21px;
	letter-spacing: -0.28px;
}
h5 {
	color: #344767;
	font-size: 16px;
	font-weight: var(--fw500);
	line-height: 24px;
	letter-spacing: -0.32px;
}
p {
	margin-bottom: 24px;
	color: #193766;
	font-size: 16px;
	font-weight: var(--fw300);
	line-height: 24px;
	letter-spacing: -0.32px;
}
b, strong {
	font-weight: var(--fw500);
}
sup {
	font-size: smaller;
	padding-bottom: 2px; /* => used on flex container */
	vertical-align: text-top;
}
label {
	color: #90A3BF;
	font-size: 16px;
	font-weight: var(--fw500);
	line-height: 24px;
	letter-spacing: -0.32px;
	text-transform: uppercase;
}
hr {
	border: none;
	height: 1px;
	background-color: #F3F3F3;
}




/* Buttons, Links, etc
-------------------------------------------------- */

a {
	color: #046CC3;
	cursor: pointer;
}
button {
	display: inline-flex;
	align-items: center;
	border: 0;
	border-radius: 10px;
	height: 36px;
	padding: 10px 24px;
	color: #F4F7FF;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: var(--fw700);
	line-height: normal;
	cursor: pointer;
	background: linear-gradient(90deg, #046CC3 0%, #00C4FF 100%);
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}
button .icon {
	margin-right: 10px;
}
button.light,
button.out {
	border: 1px solid #193766;
	height: 36px;
	padding: 10px 24px;
	color: #193766;
	font-size: 12px;
	font-weight: var(--fw500);
	line-height: 20px;
	letter-spacing: 0.2px;
	text-align: left;
	background: transparent;
}
button.out:active {
	color: #FFF;
	background-color: #193766;
	transition-property: background-color, background-image, color;
}
button.out:active img {
	filter: brightness(1000%);	
}
button.light {
	border-color: #E8E8E8;
	color: #344767;
	font-weight: var(--fw400);
}
button.out-success {
	justify-content: center;
	border: 1px solid #2FB519;
	padding: 10px 24px;
	color: #2FB519;
	font-weight: var(--fw700);
	background: transparent;
	box-shadow: 0px 0px 4px 0px rgba(59, 130, 246, 0.25);
}
button.out-success:active {
	color: #FFF;
	background-color: #2FB519;
	transition-property: background-color, background-image, color;
}
button.out-danger {
	justify-content: center;
	border: 1px solid #B51919;
	color: #B51919;
	font-weight: var(--fw700);
	background: transparent;
	box-shadow: 0px 0px 4px 0px rgba(59, 130, 246, 0.25);
}
button.out-danger:active {
	color: #FFF;
	background-color: #B51919;
	transition-property: background-color, background-image, color;
}
button.out-group {
	justify-content: center;
	border: 1px solid #8E59FE;
	padding: 10px 24px;
	color: #8E59FE;
	font-weight: var(--fw700);
	background: transparent;
	box-shadow: 0px 0px 4px 0px rgba(59, 130, 246, 0.25);
}
button.out-group:active {
	color: #FFF;
	background-color: #8E59FE;
	transition-property: background-color, background-image, color;
}
button.sm {
	height: 28px;
}
button.md {
	height: 32px;
}
button.block {
	display: block;
	height: 48px;
	width: 100%;
	padding: 12px 24px;
	font-size: 14px;
	line-height: 24px;
}
button.light.go {
	background: url(../img/chevron-right.svg) calc(100% - 16px) center no-repeat;
	transition-property: background-position-x;
}
button.light.go:active {
	background-position-x: calc(100% - 6px);
}
button.danger {
	border: 1px solid #CC2929;
	border-radius: 5px;
	height: 32px;
	padding: 6px 12px;
	color: #CC2929;
	font-size: 14px;
	font-weight: var(--fw600);
	line-height: 20px;
	background: transparent;
	transition-property: background-color, color;
}
button.danger i {
	display: inline-block;
	margin-bottom: 2px;
	margin-left: 10px;
	height: 16px;
	width: 16px;
	transition: filter 0.1s ease-in-out;
}
button.danger i.delete {
	background: url(../img/ico-trash.svg) center center no-repeat;
}
button.danger:active {
	color: #FFF;
	background-color: #CC2929;
}
button.danger:active i {
	filter: brightness(1000%);
}
button.warning {
	display: inline-flex;
	border-radius: 10px;
	height: 36px;
	padding: 10px 24px;
	background: linear-gradient(90deg, #E10D0D 0%, #CB0F0F 0.01%, #F00 100%);
	box-shadow: 0px 0px 4px 0px rgba(59, 130, 246, 0.25);
}
button.expand {
	padding: 10px 32px 10px 12px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw500);
	background: transparent url(../img/arrow_drop_down.svg) right center no-repeat;
	box-shadow: none;
}
button.expand.up {
	background-image: url(../img/arrow_drop_up.svg);
}
button.noborder {
	border-color: transparent;
	color: #046CC3;
	font-weight: var(--fw700);
	background: transparent;
}
.help {
	margin-left: 5px;
	height: 16px;
	width: 16px;
}
i.help {
	display: inline-block;
	background: url(../img/help-inline-grey.svg) center center no-repeat;
	background-size: contain;
	cursor: pointer;
}
.go-back {
	display: block;
	position: absolute;
	top: 16px; left: 16px;
	height: 24px;
	width: 24px;
	background: url(../img/arrow-back.svg) center center no-repeat;	
}
.btn-group a {
	display: inline-block;
	position: relative;
	z-index: 1;
	border: 1px solid #F5F6F7;
	padding: 9px 15px;
	color: #90A3BF;
	font-size: 12px;
	font-weight: var(--fw500);
	line-height: 20px;
	text-align: center;
	cursor: pointer;
}
.btn-group a:first-child {
	border-radius: 10px 0px 0px 10px;
}
.btn-group a:last-child {
	border-radius: 0px 10px 10px 0px;
}
.btn-group a:before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  opacity: 0;
	transition-property: opacity;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}
.btn-group a:first-child:before {
	border-radius: 10px 0px 0px 10px;
	background-image: linear-gradient(90deg, #046CC3 0%, #00C4FF 100%);
}
.btn-group a:last-child:before {
	border-radius: 0px 10px 10px 0px;
	background-image: linear-gradient(90deg, #00C4FF 0%, #046CC3 100%);
}
.btn-group a.active {
	color: #FFF;
}
.btn-group a.active:before {
	opacity: 1;
}
.link {
	color: #046CC3;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 18px;
	letter-spacing: -0.24px;
	cursor: pointer;
}
.app-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	height: 40px;
	padding: 8px 16px;
	font-size: 16px;
	font-style: normal;
	font-weight: var(--fw500);
	line-height: 150%;
	letter-spacing: -0.32px;
	text-decoration: none;
	background: linear-gradient(white, white) padding-box, linear-gradient(to right, #046CC3, #00C4FF) border-box;
}
.app-cta span {
	background: linear-gradient(90deg, #046CC3 0%, #00C4FF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#sidenav .app-cta {
	margin-top: 24px;
}
/* Firefox */
/*
* {
  scrollbar-width: thin;
  scrollbar-color: #EFEFEF #ffffff;
}
*/
/* Chrome, Edge, and Safari */
/*
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  background: #FFF;
}
*::-webkit-scrollbar-thumb {
  background-color: #EFEFEF;
  border-radius: 10px;
  border: 3px solid #ffffff;
}
*/




/* Utils
-------------------------------------------------- */

.mt-6 {
	margin-top: 6px !important;
}
.mb-0 {
	margin-bottom: 0px !important;
}
.mb-6 {
	margin-bottom: 6px !important;
}
.mb-8 {
	margin-bottom: 8px !important;
}
.mb-12 {
	margin-bottom: 12px !important;
}
.mb-16 {
	margin-bottom: 16px !important;
}
.mb-18 {
	margin-bottom: 18px !important;
}
.mb-24 {
	margin-bottom: 24px !important;
}
.mb-36 {
	margin-bottom: 36px !important;
}
.pt-0 {
	padding-top: 0px !important;
}
.pb-0 {
	padding-bottom: 0px !important;
}
.sp-10 {
	height: 10px !important;
}
.sp-15 {
	height: 15px !important;
}
.sp-20 {
	height: 20px !important;
}
.sp-25 {
	height: 25px !important;
}
.sp-30 {
	height: 30px !important;
}
.sp-35 {
	height: 35px !important;
}
.sp-40 {
	height: 40px !important;
}
.hide {
	display: none !important;
}
.success {
	color: #00D021 !important;
}
.o1 { order: 1 }
.o2 { order: 2 }
.o3 { order: 3 }
.o4 { order: 4 }
.o5 { order: 5 }
.o6 { order: 6 }
.o7 { order: 7 }
.o8 { order: 8 }
.o9 { order: 9 }
.o10 { order: 10 }
.o11 { order: 11 }
.o12 { order: 12 }
.o13 { order: 13 }
.o14 { order: 14 }
.o15 { order: 15 }
.o16 { order: 16 }
.o17 { order: 17 }
.o18 { order: 18 }
.o19 { order: 19 }
.o20 { order: 20 }
.o21 { order: 21 }
.o22 { order: 22 }
.o23 { order: 23 }
.o24 { order: 24 }
.o25 { order: 25 }
.o26 { order: 26 }
.o27 { order: 27 }
.o28 { order: 28 }
.o29 { order: 29 }
[class*=hint--]:after {
	border-radius: 10px;
	font-family: inherit;
	text-shadow: none;
	font-size: 11px;
	padding: 6px 8px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}
/* Touch devices */
[class*=hint--]:active:after,
[class*=hint--]:active:before {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: .1s;
       -moz-transition-delay: .1s;
            transition-delay: .1s;
}
.hint--top:active:after {
	-webkit-transform: translateX(-50%) translateY(-8px);
	   -moz-transform: translateX(-50%) translateY(-8px);
	        transform: translateX(-50%) translateY(-8px);
}
.hint--top:active:after {
	-webkit-transform: translateX(-50%) translateY(-8px);
	   -moz-transform: translateX(-50%) translateY(-8px);
	        transform: translateX(-50%) translateY(-8px);
}
.alert-error {
	display: inline-block;
	border-radius: 15px;
	border: 1px solid #D10000;
	max-width: 345px;
	padding: 16px 40px 16px 16px;
	color: #D10000;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 21px;
	letter-spacing: -0.28px;
	background: rgba(209, 0, 0, 0.20) url(../img/ico-error.svg) calc(100% - 14px) 14px no-repeat;
	background-clip: padding-box;
}
.alert-error a {
	font-weight: var(--fw600);
}
.alert-error,
.alert-warning {
	display: inline-block;
	border-radius: 15px;
	border: 1px solid #D10000;
	max-width: 345px;
	padding: 16px 40px 16px 16px;
	color: #D10000;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 21px;
	letter-spacing: -0.28px;
	background: rgba(209, 0, 0, 0.20) url(../img/ico-error.svg) calc(100% - 14px) 14px no-repeat;
}
.alert-error a,
.alert-warning a {
	font-weight: var(--fw600);
}
.alert-warning {
	border-color: #B56D19;
	color: #B56D19;
	background: rgba(181, 109, 25, 0.20) url(../img/ico-warning.svg) calc(100% - 14px) 14px no-repeat;
}
p.item {
	margin-bottom: 16px;
	padding-left: 30px;
	background: url(../img/check-circle.svg) left top no-repeat;
}
p.item .img-inline {
	margin-left: 10px;
	vertical-align: bottom;
}
p.notable {
	font-weight: var(--fw500);
}
p.notable b {
	font-weight: var(--fw600);
}
p.notice-info {
	border: 1px solid #193766;
	border-radius: 15px;
	padding: 12px 16px 12px 48px;
	color: #193766;
	background: url(../img/info-circle-blu.svg) 16px 12px no-repeat;
}
p.notice-warning {
	border: 1px solid #D28E28;
	border-radius: 15px;
	padding: 12px 16px 12px 48px;
	color: #D28E28;
	background: url(../img/info-circle-orange.svg) 16px 12px no-repeat;
}
p.notice-error {
	border: 1px solid #E90000;
	border-radius: 15px;
	padding: 12px 16px 12px 48px;
	color: #E90000;
	background: url(../img/info-circle-red.svg) 16px 12px no-repeat;
}
p.notice-success {
	border: 1px solid #09AE00;
	border-radius: 15px;
	padding: 12px 16px 12px 48px;
	color: #09AE00;
	background: url(../img/info-circle-green.svg) 16px 12px no-repeat;
}


/* Layout
-------------------------------------------------- */

#backdrop {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: -100%;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity ease-in-out 0.2s;
}
#backdrop.on {
	left: 0;
	opacity: 1;
}
.sidenav-main {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	border-right: 1px solid #E5E5E5;
	height: 100%;
	width: 250px;
	overflow-y: scroll;
	padding: 26px 15px;
	background: #FFF;
}
.sidenav-main .logo {
	display: block;
	margin: 0 auto;
	max-width: 160px;
	max-height: 80px;
}
.sidenav-main hr {
	margin: 18px 0;
	border: 0;
	height: 1px;
	width: 100%;
	background: rgba(0, 0, 0, 0.02);
}
.sidenav-main .drawer li {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
	margin-bottom: 8px;
	border-radius: 8px;
  height: 53px;
	width: 100%;
	padding: 10px 13px;
	color: #344767;
	font-size: 14px;
	font-weight: var(--fw400);
  line-height: 33px;
	letter-spacing: -0.15px;
	cursor: pointer;
	transition: color 0.1s ease-in-out;
}
.sidenav-main .drawer li:before {
	position: absolute;
	content: '';
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	border-radius: 8px;
	background-image: linear-gradient(90deg, #046CC3 0%, #00C4FF 100%);
	transition: opacity 0.2s ease-in-out;
	opacity: 0;
}
.sidenav-main .drawer li:hover:before,
.sidenav-main .drawer li.active:before {
	opacity: 1;
}
.sidenav-main .drawer li:hover,
.sidenav-main .drawer li.active {
	color: #FFF;
}
.sidenav-main .drawer li.active {
	font-weight: var(--fw500);
}
.sidenav-main .drawer li .icon {
	margin-right: 16px;
	height: 16px;
	width: 16px;
	transition: filter 0.1s ease-in-out;
}
.sidenav-main .drawer li:hover .icon,
.sidenav-main .drawer li.active .icon {
	filter: brightness(1000%);
}
.sidenav-main .drawer li.label {
	margin-bottom: 16px;
	height: 21px;
	padding: 0px 13px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 21px;
	letter-spacing: -0.28px;
	cursor: default;
}
.sidenav-main .drawer li.label:before {
	background: transparent;
}
.sidenav-main .drawer li .badge {
	position: absolute;
	right: 16px;
	border-radius: 13px;
	display: block;
	width: 20px;
	height: 20px;
	color: #FFF;
	font-size: 10px;
	font-weight: var(--fw500);
	line-height: 20px;
	letter-spacing: -0.2px;
	text-align: center;
	background: #046CC3;
}
.sidenav-main .drawer li:hover .badge,
.sidenav-main .drawer li.active .badge {
	color: #046CC3;
	background: #FFF;
}
.sidenav-main .owner {
	min-height: 48px;
	width: 100%;
}
.sidenav-main .owner .wrap {
	display: flex;
	align-items: center;
}
.sidenav-main .owner .photo {
	margin-right: 12px;
	border-radius: 50%;
	flex-grow: 0;     /* do not grow   - initial value: 0 */
	flex-shrink: 0;   /* do not shrink - initial value: 1 */
	flex-basis: 48px; /* width/height  - initial value: auto */
	height: 48px;
	background: url(../img/ico-user.svg) center center no-repeat;
	background-size: cover;
}
.sidenav-main .owner .name {
	margin-right: auto; /* align to left */
	color: #1A1B2D;
	font-size: 15px;
	font-weight: var(--fw500);
	line-height: 20px;
	letter-spacing: -0.15px;
}
.sidenav-main .owner .name span {
	display: block;
	margin-top: 4px;
	color: #535763;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 12px;
	letter-spacing: -0.12px;
}
.sidenav-main .owner .arrow-right {
	margin-left: auto; /* align to right */
}
.sidenav-main .spacer {
	display: none;
	height: 32px;
	flex: 0 0 32px;
}
.sidenav-main #end-trial-notice {
	display: none;
	justify-content: center;
	align-items: center;
	position: sticky;
	z-index: 100;
	top: auto; right: 0; bottom: 0px;
	margin: auto -16px 0;
	padding: 12px 0px;
	color: #FFF;
	font-size: 16px;
	font-weight: var(--fw700);
	line-height: 150%;
	letter-spacing: -0.32px;
	background: #046CC3;
	box-shadow: 0px 0px 23.6px 0px rgba(1, 111, 208, 0.50);
}
.sidenav-main #end-trial-notice.error {
	background: #CB0F0F;
	box-shadow: 0px 0px 23.6px 0px rgba(203, 15, 15, 0.50);
}
.sidenav-main.show-notice {
	padding-bottom: 0px;
}
.sidenav-main.show-notice #end-trial-notice {
	display: flex;
}
.sidenav-main.show-notice .spacer {
	display: block;
}
.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0; left: 0;
	z-index: 98;
	height: 72px;
	width: 100%;
	padding: 24px;
	background: #FFF;
	box-shadow: 0px 0px 3px rgba(0,0,0,.1);
}
.nav .logo {
	/* height: 24px; */
	max-height: 44px;
	max-width: 140px;
	cursor: pointer;
}
.nav .menu {
	float: right;
	cursor: pointer;
}
.nav .right-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-left: auto;
}
.nav .alerts,
.nav .bookings-alerts {
	display: block;
	width: 24px;
	height: 24px;
	background: transparent url(../img/notifications-no.svg) center center no-repeat;
	background-size: 24px;
	transition: background-color ease-in-out 0.2s;
}
.nav .alerts.active {
	background-image: url(../img/notifications-yes.svg);
}
.nav .bookings-alerts {
	background-image: url(../img/bookings-no.svg);
}
.nav .bookings-alerts.active {
	background-image: url(../img/bookings-yes.svg);
}
.nav .alerts:hover,
.nav .alerts:active,
.nav .bookings-alerts:hover,
.nav .bookings-alerts:active {
	background-color: #F6F6F6;
}
.main-content {
	position: relative;
	margin-top: 92px;
	height: calc(100vh - 92px);
	width: 100%;
	padding-left: 250px;
	overflow-y: auto;
}
.main-content > header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0; right: 0; bottom: auto; left: 250px;
	z-index: 11;
	height: 92px;
	padding: 24px 30px 24px 24px; 
	background: #FFF;
	box-shadow: 0px 0px 1px rgba(0,0,0,.2);
}
.main-content > header .owner {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.main-content > header .owner .photo {
	margin-right: 16px;
	border-radius: 50%;
	height: 44px;
	width: 44px;
	background: url(../img/ico-user.svg) center center no-repeat;
	background-size: cover;
}
.main-content > header .owner .name {
	color: #1A1B2D;
	font-size: 15px;
	font-weight: var(--fw500);
	line-height: 24px;
	letter-spacing: -0.15px;
}
.main-content > section {
	margin: 24px;
	border-radius: 20px;
	padding:  24px;
	background: #FFF;
}
.main-content > section.full-h {
	min-height: calc(100% - 48px);
}
.main-content > section > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}
.main-content > header .right-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-left: auto;
}
.main-content > header .alerts,
.main-content > header .bookings-alerts {
	display: block;
	border-radius: 19px;
	width: 38px;
	height: 38px;
	background: transparent url(../img/notifications-no.svg) center center no-repeat;
}
.main-content > header .alerts.active {
	background-image: url(../img/notifications-yes.svg);
}
.main-content > header .bookings-alerts {
	background-image: url(../img/bookings-no.svg);
}
.main-content > header .bookings-alerts.active {
	background-image: url(../img/bookings-yes.svg);
}

.main-content > header .alerts:hover,
.main-content > header .alerts:active,
.main-content > header .bookings-alerts:hover,
.main-content > header .bookings-alerts:active {
	background-color: #F6F6F6;
}


/* Table
-------------------------------------------------- */

.table-container {
	display: block;
	margin: 28px -24px 0;
	color: #344767;
	font-size: 14px;
	font-weight: var(--fw400);
	line-height: normal;
	letter-spacing: -0.32px;
}
.table-container .flex-table {
  display: flex;
  flex-flow: row wrap;
  transition: 0.5s;
}
.table-container .flex-table.header {
	border-top: solid 1px #F3F5F7;
	border-bottom: solid 1px #F3F5F7;
	color: #17335E;
	font-weight: var(--fw500);
}
.table-container .flex-table.header .flex-row {
	display: flex;
	min-height: 35px;
	font-size: 12px;
}
.table-container .flex-table.header .flex-row.datetime {
	flex: 1 0 15%;
}
.table-container .flex-table.row {
	border-bottom: solid 1px #F3F5F7;
	padding: 16px 0;
}
.table-container .flex-table.row:hover {
	background: #FAFAFA;
	transition: 500ms;
}
.table-container .flex-table .flex-row {
	display: flex;
	align-items: center;
	width: calc(100% / 6);
	padding: 0 0 0 24px;
	min-height: 50px;
}
.table-container .flex-table .flex-row .icon {
	margin-right: 10px;
}
.table-container .flex-table .flex-row .photo {
	flex-shrink: 0;
	margin-right: 10px;
	border-radius: 18px;
	height: 36px;
	width: 36px;
	background: url(../img/ico-user.svg) center center no-repeat;
	background-size: cover;
}
.table-container .flex-table .flex-row span {
	display: flex;
	align-items: center;
}



/* Notifications
-------------------------------------------------- */

#notifications-backdrop {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	left: -100%;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity ease-in-out 0.2s;
}
#notifications-backdrop.on {
	display: block;
	left: 0;
	opacity: 1;
}
#notifications {
	display: flex;
	position: fixed;
	z-index: 101;
	top: 0px;
	right: -500px;
	/* width: 500px; */
	width: 422px;
	max-width: 100%;
	height: 100%;
	background-color: #FFF;
	transition: right ease-in-out 0.2s;
}
#notifications.on {
	right: 0px;
	box-shadow: -4px 0px 12.6px 0px rgba(91, 91, 91, 0.25);
}
#notifications .left-col {
	border-right: 1px solid #E4E4E4;
	border-left: 1px solid #E4E4E4;
	height: 100%;
	padding: 24px;
}
#notifications .left-col .close {
	display: block;
	border-radius: 14px;
	width: 28px;
	height: 28px;
	background: transparent url(../img/notifications-close.svg) center center no-repeat;
	transition: background-color ease-in-out 0.2s;
}
#notifications .left-col .close:hover,
#notifications .left-col .close:active {
	background-color: #F6F6F6;
}
#notifications .right-col {
	display: flex;
	flex-direction: column;
	/* width: calc(100% - 78px); */
	width: 100%;
	height: 100%;
}
#notifications .title-section {
	position: relative;
	border-bottom: 1px solid #E4E4E4;
	padding: 24px;
	color: #17335E;
	font-size: 24px;
	font-weight: var(--fw500);
	line-height: 28px;
	letter-spacing: -0.48px;
	background: #FFF;
}
#notifications #notifications-settings {
	display: block;
	position: absolute;
	top: 24px; right: 24px;
	border-radius: 14px;
	width: 28px;
	height: 28px;
	background: transparent url(../img/notifications-settings.svg) center center no-repeat;
	background-size: 22px;
	transition: background-color ease-in-out 0.2s;
}
#notifications #notifications-settings:hover,
#notifications #notifications-settings:active {
	background-color: #F6F6F6;
}
#notifications .title-section .close {
	display: block;
	position: absolute;
	top: 24px; right: 24px;
	border-radius: 14px;
	width: 28px;
	height: 28px;
	background: transparent url(../img/notifications-close.svg) center center no-repeat;
	transition: background-color ease-in-out 0.2s;
}
#notifications .title-section .close:hover,
#notifications .title-section .close:active {
	background-color: #F6F6F6;
}

#notifications .list {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
	gap: 16px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 24px;
	background: #F1F1F1;
}
#notifications .list h3 {
	color: #17335E;
	font-size: 20px;
	font-weight: var(--fw500);
	line-height: 150%;
	letter-spacing: -0.4px;
}
#notifications .list .notice-info {
	background-color: #FFF;
}
#notifications .box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	position: relative;
	border-radius: 10px;
	border: 0.8px solid #C4C4C4;
	width: 100%;
	padding: 16px;
	background: #FFF;
	cursor: pointer;
	transition: background-color ease-in-out 0.2s;
}
#notifications .box:hover,
#notifications .box:active {
	background-color: #f1fcff;
}
#notifications .box .title {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding-right: 50px;
	color: var(--title-app, #17335E);
	font-size: 16px;
	font-weight: var(--fw500);
	line-height: 22px;
	letter-spacing: -0.32px;
}
#notifications .box .title b {
	font-weight: var(--fw600);
}
#notifications .box i.ico {
	display: block;
	position: absolute;
	top: 16px; right: 16px;
	border-radius: 18px;
	border: 1px solid #E4E4E4;
	width: 36px;
	height: 36px;
	background-color: #FFF;
}
#notifications .box.type-followup i.ico {
	background: #FFF url(../img/notification-doc.svg) center center no-repeat;
}
#notifications .box.type-customer i.ico {
	background: #FFF url(../img/ico-user.svg) center center no-repeat;
	background-size: cover;
}
#notifications .box.type-booking i.ico {
	background: #FFF url(../img/notification-cal.svg) center center no-repeat;	
}
#notifications .box.type-booking i.ico.cancel,
#notifications .box.type-booking i.ico.penalty {
	background: #FFF url(../img/notification-cal-red.svg) center center no-repeat;	
}
#notifications .box.type-package i.ico {
	background: #FFF url(../img/notification-bag.svg) center center no-repeat;	
}
#notifications .box.type-package i.ico.expired,
#notifications .box.type-package i.ico.ended {
	background: #FFF url(../img/notification-bag-red.svg) center center no-repeat;	
}
#notifications .box .time {
	width: 100%;
	color: #90A3BF;
	text-align: right;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: normal;
}
#notifications .box .details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw300);
	line-height: 21px;
	letter-spacing: -0.28px;
}
#notifications .box .details > div {
	padding-left: 28px;
}
#notifications .box .details > div.session {
	background: url(../img/notification-session.svg) left center no-repeat;
}
#notifications .box .details > div.date {
	background: url(../img/notification-date.svg) left center no-repeat;
}
#notifications .box .details > div.rate {
	background: url(../img/notification-rate.svg) left center no-repeat;
}
#notifications .box .details > div.rate del {
	color: #90A3BF;
	padding-right: 4px;
}

@media only screen and (max-width: 1024px) {
	#notifications {
		right: -100%;
	}
	#notifications .left-col {
		display: none;
	}
	#notifications .right-col {
		width: 100%;
	}
	#notifications .title-section {
		border-bottom: none;
		padding-bottom: 16px;
		font-size: 20px;
		line-height: 25px;
		text-align: center;
	}
	#notifications #notifications-settings {
		width: 24px;
		height: 24px;
	}
	#notifications .go-back {
		top: 24px;
	}
	#notifications .list {
		background: #FFF;
	}
}




/* Booking requests
-------------------------------------------------- */

#booking-requests-backdrop {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	left: -100%;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity ease-in-out 0.2s;
}
#booking-requests-backdrop.on {
	display: block;
	left: 0;
	opacity: 1;
}
#booking-requests {
	display: flex;
	position: fixed;
	z-index: 101;
	top: 0px;
	right: -600px;
	width: 560px;
	max-width: 100%;
	height: 100%;
	background-color: #FFF;
	transition: right ease-in-out 0.2s;
}
#booking-requests.on {
	right: 0px;
	box-shadow: -4px 0px 12.6px 0px rgba(91, 91, 91, 0.25);
}
#booking-requests .left-col {
	border-right: 1px solid #E4E4E4;
	border-left: 1px solid #E4E4E4;
	height: 100%;
	padding: 24px;
}
#booking-requests .left-col .close {
	display: block;
	border-radius: 14px;
	width: 28px;
	height: 28px;
	background: transparent url(../img/notifications-close.svg) center center no-repeat;
	transition: background-color ease-in-out 0.2s;
}
#booking-requests .left-col .close:hover,
#booking-requests .left-col .close:active {
	background-color: #F6F6F6;
}
#booking-requests .right-col {
	display: flex;
	flex-direction: column;
	/* width: calc(100% - 78px); */
	width: 100%;
	height: 100%;
}
#booking-requests .title-section {
	position: relative;
	border-bottom: 1px solid #E4E4E4;
	padding: 24px;
	color: #17335E;
	font-size: 24px;
	font-weight: var(--fw500);
	line-height: 28px;
	letter-spacing: -0.48px;
	background: #FFF;
}
#booking-requests #booking-requests-settings {
	display: block;
	position: absolute;
	top: 24px; right: 24px;
	border-radius: 14px;
	width: 28px;
	height: 28px;
	background: transparent url(../img/notifications-settings.svg) center center no-repeat;
	background-size: 22px;
	transition: background-color ease-in-out 0.2s;
}
#booking-requests #booking-requests-settings:hover,
#booking-requests #booking-requests-settings:active {
	background-color: #F6F6F6;
}
#booking-requests .title-section .close {
	display: block;
	position: absolute;
	top: 24px; right: 24px;
	border-radius: 14px;
	width: 28px;
	height: 28px;
	background: transparent url(../img/notifications-close.svg) center center no-repeat;
	transition: background-color ease-in-out 0.2s;
}
#booking-requests .title-section .close:hover,
#booking-requests .title-section .close:active {
	background-color: #F6F6F6;
}

#booking-requests .list {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
	gap: 16px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 24px;
	background: #F1F1F1;
}
#booking-requests .list h3 {
	color: #17335E;
	font-size: 20px;
	font-weight: var(--fw500);
	line-height: 150%;
	letter-spacing: -0.4px;
}
#booking-requests .list .notice-info {
	background-color: #FFF;
}
#booking-requests .box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	position: relative;
	border-radius: 10px;
	border: 0.8px solid #C4C4C4;
	width: 100%;
	padding: 16px;
	background: #FFF;
	cursor: pointer;
	transition: background-color ease-in-out 0.2s;
}
/*
#booking-requests .box:hover,
#booking-requests .box:active {
	background-color: #f1fcff;
}
*/
#booking-requests .box .title {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding-right: 50px;
	color: var(--title-app, #17335E);
	font-size: 16px;
	font-weight: var(--fw500);
	line-height: 22px;
	letter-spacing: -0.32px;
}
#booking-requests .box .title b {
	font-weight: var(--fw600);
}
#booking-requests .box i.ico {
	display: block;
	position: absolute;
	top: 16px; right: 16px;
	border-radius: 18px;
	border: 1px solid #E4E4E4;
	width: 36px;
	height: 36px;
	background-color: #FFF;
}
#booking-requests .box.type-followup i.ico {
	background: #FFF url(../img/notification-doc.svg) center center no-repeat;
}
#booking-requests .box.type-customer i.ico {
	background: #FFF url(../img/ico-user.svg) center center no-repeat;
	background-size: cover;
}
#booking-requests .box.type-booking i.ico {
	background: #FFF url(../img/notification-cal.svg) center center no-repeat;	
}
#booking-requests .box.type-booking i.ico.cancel,
#booking-requests .box.type-booking i.ico.penalty {
	background: #FFF url(../img/notification-cal-red.svg) center center no-repeat;	
}
#booking-requests .box.type-package i.ico {
	background: #FFF url(../img/notification-bag.svg) center center no-repeat;	
}
#booking-requests .box.type-package i.ico.expired,
#booking-requests .box.type-package i.ico.ended {
	background: #FFF url(../img/notification-bag-red.svg) center center no-repeat;	
}
#booking-requests .box .time {
	width: 100%;
	color: #90A3BF;
	text-align: right;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: normal;
}
#booking-requests .box .details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding-bottom: 8px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw300);
	line-height: 21px;
	letter-spacing: -0.28px;
}
#booking-requests .box .details > div {
	padding-left: 28px;
}
#booking-requests .box .details > div.session {
	background: url(../img/notification-session.svg) left center no-repeat;
}
#booking-requests .box .details > div.date {
	background: url(../img/notification-date.svg) left center no-repeat;
}
#booking-requests .box .details > div.rate {
	background: url(../img/notification-rate.svg) left center no-repeat;
}
#booking-requests .box .details > div.rate del {
	color: #90A3BF;
	padding-right: 4px;
}
#booking-requests .box .notice {
	margin-bottom: 0px;
	padding-bottom: 8px;
	color: #D28E28;
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: var(--fw300);
	line-height: 150%;
	letter-spacing: -0.28px;
}
#booking-requests .box .notice.notice-error {
	padding-bottom: 12px;
	color: #E90000;
}
#booking-requests .box .notice.notice-success {
	padding-bottom: 12px;
	color: #09AE00;
}
#booking-requests .box .controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}
#booking-requests .box .controls > button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 50%;
	border-radius: 10px;
	height: 48px;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: var(--fw500);
	line-height: 24px;
	letter-spacing: -0.32px;
	text-align: center;
	transition: flex-basis 0.25s ease-in-out;
}
#booking-requests .box .controls > button.refuse {
	border: 1px solid #E4E4E4;
	color: #122748;
	background: #FFF;
}
#booking-requests .box .controls > button.refuse.loading {
	background: #F1F1F1;
}
#booking-requests .box .controls > button.confirm {
	margin-left: auto;
}
#booking-requests .box .controls > button.choose {
	flex-basis: 100%;
}
/*
#booking-requests .box .controls > button span {
	opacity: 0;
	transition: opacity .25s ease-in-out;
}
#booking-requests .box .controls > button.ready span {
	opacity: 1;
}
*/

@media only screen and (max-width: 1024px) {
	#booking-requests {
		right: -100%;
	}
	#booking-requests .left-col {
		display: none;
	}
	#booking-requests .right-col {
		width: 100%;
	}
	#booking-requests .title-section {
		border-bottom: none;
		padding-bottom: 16px;
		font-size: 20px;
		line-height: 25px;
		text-align: center;
	}
	#booking-requests #booking-requests-settings {
		width: 24px;
		height: 24px;
	}
	#booking-requests .go-back {
		top: 24px;
	}
	#booking-requests .list {
		background: #FFF;
	}
	#booking-requests .box .controls {
		flex-direction: column;
		justify-content: flex-start;
	}
	#booking-requests .box .controls > button.refuse {
		order: 2;
		justify-content: center;
		flex-basis: 100%;
		width: 100%;
	}
	#booking-requests .box .controls > button.confirm {
		order: 1;
		justify-content: center;
		flex-basis: 100%;
		width: 100%;
	}
}




/* Table elements
-------------------------------------------------- */

.table-container .rel {
	flex: 0 0 8px;
	display: inline-block;
	box-sizing: content-box;
	margin-right: 8px;
	border: 0;
	border-radius: 50%;
	height: 8px;
	width: 8px;
	background-color: #A9A9A9;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}
.table-container .rel.r0 {
	border: solid 4px rgba(208, 208, 208, 0.30);
	background-color: #A9A9A9
}
.table-container .rel.r1 {
	border: solid 4px rgba(96, 228, 85, 0.30);
	background-color: #2FB519;
}
.table-container .rel.r2 {
	border: solid 4px rgba(228, 214, 85, 0.30);
	background-color: #DEC800;
}
.table-container .rel.r3 {
	border: solid 4px rgba(228, 162, 85, 0.30);
	background-color: #B56D19;
}
.table-container .rel.r4 {
	border: solid 4px rgba(228, 119, 85, 0.30);
	background-color: #B51919;
}
.table-container .card {
	margin-right: 8px;
	width: 42px;
}




/* Fake table
-------------------------------------------------- */

.fake-table {
	width: 100%;
}
.fake-table .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 32px;
}
.fake-table .row.header {
	color: #17335E;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 21px;
	letter-spacing: -0.28px;
}




/* Modal
-------------------------------------------------- */

.modal {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 0;
	max-width: 100%;
	height: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	background: rgba(0,0,0,.55);
	opacity: 0;
	transition: opacity ease-in-out .2s;
	transition-delay: .01s;
}
.modal.show {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	opacity: 1;
}
.modal-dialog {
	display: flex;
	flex-direction: column;
	position: relative;
	margin-top: 200px;
	border-radius: 15px;
	height: auto;
	max-height: calc(100vh - 40px);
	width: 440px;
	max-width: calc(100% - 20px);
	opacity: 0;
	background-color: #FFF;
	box-shadow: 0px 60px 120px 0px rgba(38, 51, 77, 0.05);
	transition: margin-top ease-in-out .2s, opacity ease-in-out .2s;
}
.lg .modal-dialog {
	width: 660px;
}
.md .modal-dialog {
	width: 494px;
}
.show .modal-dialog {
	margin-top: 0;
	opacity: 1;
}
.modal-close {
	position: absolute;
	top: 16px; right: 16px;
	height: 24px;
	width: 24px;
	background: url(../img/close.svg) center center no-repeat;
	cursor: pointer;
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	height: 90px;
	color: #17335E;
	font-size: 20px;
	font-weight: var(--fw600);
}
.modal-body {
	overflow-y: auto;
	color: #193766;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 20px;
}
.modal-body.content {
	padding: 0 24px;
	color: var(--text, #193766);
	font-size: 14px;
	font-weight: var(--fw300);
	line-height: 21px;
	letter-spacing: -0.28px;
}
.modal-body.content p {
	margin-bottom: 16px;
}
.modal-body .row {
	display: flex;
	border-top: 2px solid #F5F6F7;
}
.modal-body .row .col {
	flex: 1 0 auto;
	position: relative;
	max-width: 100%;
	padding: 16px 16px 16px 60px;
}
.modal-body .row .col + .col:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background-color: #F5F6F7;
}
.modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 16px;
}
.modal-footer button.out {
	height: 36px;
	padding: 10px 12px;
}
.modal-footer button + button {
	margin-left: 12px;
}
.modal .modal-footer .btn-cancel {
	display: block;
	margin-right: 24px;
	height: 25px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 25px;
	cursor: pointer;
}
.modal-body .row .col {
	flex: 1 1 0px;
}
.modal-body .row .col.date {
	background: url(../img/blu-calendar.svg) 20px center no-repeat;
}
.modal-body .row .col.time {
	background: url(../img/blu-time-circle.svg) 20px center no-repeat;
}
.modal-body .row .col.location {
	background: url(../img/blu-pin.svg) 20px center no-repeat;
}
.modal-body .row .col.trainer {
	background: url(../img/blu-user.svg) 20px center no-repeat;
}
.modal-body .row .col.customer {
	background: url(../img/blu-users.svg) 20px center no-repeat;
}
.modal-body .row .col.service {
	display: flex;
	align-items: center;
	background: url(../img/blu-service.svg) 20px center no-repeat;
}
.modal-body .row .col.service-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4px 16px;
}
.modal-body .row .col.service-info b {
	font-weight: var(--fw700);
}
.modal-body .row .col.notes {
	padding-bottom: 0px;
	background: url(../img/blu-edit.svg) 20px 12px no-repeat;
}
.modal-body .row .col.notes textarea {
	border: none;
	border-radius: 0px;
	height: 40px;
	padding-top: 0px;
	padding-left: 0px;
}
.modal-body .row.recurring .col {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px 24px;
	line-height: 28px;
}
.modal-body .row .col.question {
	background: url(../img/blu-question.svg) 20px 11px no-repeat;
}
.modal-body .row .col.answer {
	background: url(../img/blu-answer.svg) 20px 11px no-repeat;
}
.modal-body .row .col.media {
	background: url(../img/blu-media.svg) 20px 11px no-repeat;
}
.modal-body select {
	min-width: 176px;
}
/* modal group slot */
/*
.group .modal-body .row .col.date {
	background-image: url(../img/purple-calendar.svg);
}
.group .modal-body .row .col.time {
	background-image: url(../img/purple-time-circle.svg);
}
.group .modal-body .row .col.location {
	background-image: url(../img/purple-pin.svg);
}
*/
.group .modal-body .row .col.customer {
	display: none;
}
.modal-body .row .col.customers {
	display: none;
}
.group .modal-body .row .col.customers {
	display: block;
	background: url(../img/blu-users.svg) 20px center no-repeat;
}
/*
.group .modal-body .row .col.notes {
	background-image: url(../img/purple-edit.svg);
}
*/
.group .modal-body .row .col.title {
	display: block;
	padding-left: 24px;
	color: #17335E;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}
.modal-body .row .col.customers {
	color: #17335E;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 20px;
}
.modal-body .row .col.customers em {
	display: inline-block;
	height: 30px;
	color: #90A3BF;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 30px;
	cursor: pointer;
}
.modal-body .row .col.customers span {
	display: inline-block;
	border: 1px solid #E1E1E1;
	border-radius: 10px;
	height: 30px;
	padding: 3px 30px 3px 12px;
	color: #193766;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 22px;
	background: url(../img/arrow-drop-down.svg) calc(100% - 6px) center no-repeat;
	cursor: pointer;
}

.modal.mini .modal-dialog {
	width: 260px;
	padding: 24px;
}
.modal.mini .modal-body {
	margin-bottom: 16px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw400);
	line-height: 21px; /* 25px; */
}
.modal.mini .modal-confirm {
	display: none;
	justify-content: space-between;
	align-items: center;
	margin-top: -8px;
	margin-bottom: 24px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw400);
	line-height: 25px;
}
.modal.mini .modal-confirm.show {
	display: flex;
}
.modal.mini .modal-footer {
	padding: 0;
}
.modal.mini .modal-footer a {
	display: block;
	margin-right: 0;
	margin-left: 16px;
	height: 25px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 25px;
	cursor: pointer;
}
.modal.mini.warning .modal-footer a.btn-confirm {
	color: #AF0505;
}
.modal.mini.warning .modal-footer a.btn-confirm.disabled {
	opacity: .5;
	cursor: default;
}
#modal-premium .modal-dialog {
	width: 486px;
	padding: 24px;
}
#modal-premium .modal-header {
	margin-bottom: 16px;
	height: auto;
	min-height: 42px;
	font-size: 32px;
	font-weight: var(--fw600);
	line-height: 42px;
	text-align: center;
}
#modal-premium .premium {
	text-align: center;
}
#modal-premium .unlock {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	min-height: 42px;
	font-size: 24px;
	font-weight: var(--fw500);
	line-height: 32px;
	text-align: center;
	background: linear-gradient(90deg, #9A5A1A 0.36%, #A1662A 2.35%, #B37C20 7.31%, #F7BC62 41.06%, #F5DA7A 63.9%, #F1A445 86.73%, #B77C24 98.65%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#modal-premium .title {
	background: linear-gradient(90deg, #046CC3 0%, #00C4FF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#modal-premium .subscription-price {
	display: block;
	margin-bottom: 16px;
	height: 54px;
	font-size: 32px;
	font-weight: var(--fw600);
	line-height: 54px;
	letter-spacing: -0.64px;
	text-align: center;
}
#modal-premium .subscription-price em {
	font-size: 16px;
	font-weight: var(--fw400);
	line-height: 32px;
	letter-spacing: -0.32px;
}
#modal-premium .pros-list {
	display: inline-block;
}
#modal-premium .pros {
	margin-bottom: 16px;
	padding: 2px 10px 2px 40px;
	color: #193766;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 16px;
	text-align: left;
	background: url(../img/check-circle.svg) 10px center no-repeat;
}

#modal-premium .modal-footer {
	justify-content: space-between;
	padding: 24px 0 0 0;
}
#modal-premium button {
	justify-content: center;
	margin: 0;
	height: 48px;
	/* width: 50%; */
	font-size: 16px;
	font-weight: var(--fw700);
	padding: 10px 24px;
}
#modal-premium button.out {
	justify-content: center;
	border-color: transparent;
	color: #193766;
}
#modal-premium button.out:active {
	color: #FFF;
}
#modal-premium p {
	font-size: 16px;
	line-height: 150%;
}
@media only screen and (max-width: 1024px) {
	#modal-premium .modal-footer {
		justify-content: space-between;
		gap: 8px;
	}
	#modal-premium button {
		flex: 1 1 auto;
		margin: 0;
	}
	#modal-premium button.out {
		padding: 10px 0;
	}
	#modal-premium p {
		font-size: 16px;
		line-height: 150%;
	}
}




/* Form elements
-------------------------------------------------- */

input, textarea {
	border: 0.8px solid #D2D6DA;
	border-radius: 10px;
	padding: 4px 12px;
	color: #495057;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 18px;
	letter-spacing: -0.24px;
	background-color: #FFF;
}
input[type=time] {
	height: 32px;
	width: 100px;
}
textarea {
	height: 60px;
	max-height: 200px;
	width: 100%;
	color: #193766;
	resize: vertical;
}
textarea::placeholder,
input[type=number]::placeholder {
  color: #90A3BF;
	opacity: 1;
}
select {
	appearance: none;
	border: 1px solid #E1E1E1;
	border-radius: 10px;
	height: 30px;
	max-width: 100%;
	padding: 3px 30px 3px 12px;
	color: #193766;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: var(--fw400);
	line-height: 20px;
	background: url(../img/arrow-drop-down.svg) calc( 100% - 6px ) center no-repeat;
}
select.disabled {
	color: #90A3BF;
}
.switch {
	position: relative;
	display: inline-block;
	height: 20px;
	width: 40px;
	min-width: 40px;
}
.switch input { 
	height: 0;
	width: 0;
	opacity: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 10px;
	background-color: #CCC;
	transition-duration: .15s;
	transition-timing-function: ease-in-out;
}
.slider:before {
	content: "";
	position: absolute;
	left: 2px;
	bottom: 2px;
	border-radius: 50%;
	height: 16px;
	width: 16px;
	background-color: #FFF;
	transition-duration: .15s;
	transition-timing-function: ease-in-out;
}
input:checked + .slider {
	background-color: #2196F3;
	background-image: linear-gradient(310deg, #1171ef, #11cdef);
}
input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
	transform: translateX(20px);
}
input:disabled, input[readonly],
select:disabled, select[readonly],
textarea:disabled, textarea[readonly] {
	background-color: #e9ecef;
	opacity: 1;
}
.form input[type=text][readonly] {
	background-color: #fafafa;
	color: #999;
}
input[type="radio"] {
	appearance: none;
	display: inline-block;
	margin-right: 10px;
	border: 2px solid #046CC3;
	width: 20px;
	height: 20px;
	padding: 2px;
}
input[type="radio"]:checked {
	background-color: #046CC3;
	background-clip: content-box;
}
input[type=checkbox] {
	appearance: none;
	flex: 0 0 18px;
	border-radius: 3px;
	border: 2px solid #193766;
	height: 18px;
	width: 18px;
	padding: 0;
	cursor: pointer;
}
input[type=checkbox]:checked {
	background: url(../img/checkbox-checked.svg) center center no-repeat;
}
#drop-zone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 6px;
	border-radius: 10px;
	border: 1px dashed #046CC3;
	height: 156px;
	width: 300px;
	background: rgba(4, 108, 195, 0.10);
	cursor: pointer;
	transition: background ease-in-out 0.2s;
}
#drop-zone.simple-upload-dragover {
	background: rgba(4, 108, 195, 0.25);
}
#drop-zone .icon {
	margin-bottom: 2px;
}
#drop-zone .title {
	margin-bottom: 2px;
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 21px;
	letter-spacing: -0.28px;
	text-align: center;
}
#drop-zone .subtitle {
	margin-bottom: 2px;
	color: #90A3BF;
	font-size: 12px;
	font-weight: var(--fw300);
	line-height: 18px;
	letter-spacing: -0.24px;
	text-align: center;
}
#drop-zone .info {
	color: #90A3BF;
	font-size: 10px;
	font-style: normal;
	font-weight: var(--fw300);
	line-height: 15px;
	letter-spacing: -0.2px;
	text-align: center;
}
.file-wrapper {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 10px;
	border: 1px solid #D2D6DA;
	margin-right: 16px;
	height: 40px;
	width: 299px;
	padding: 8px 16px;
	color: #495057;
	font-size: 14px;
	font-weight: var(--fw400);
	line-height: 21px;
	letter-spacing: -0.28px;
	vertical-align: bottom;
}
#upload-message {
	display: inline-block;
	border-radius: 10px;
	margin-bottom: 6px;
	padding: 8px 10px;
	font-size: 12px;
	color: rgb(8 137 20 / 100%);
	background: rgb(4 195 22 / 15%);
	opacity: 0;
	transition: opacity ease-in-out .2s;
}
#upload-message.show {
	opacity: 1;
}
#upload-message.err {
	color: rgb(195 4 4 / 80%);
	background: rgb(195 4 4 / 15%);
}
.form {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	gap: 24px;
}
.form .form-group {
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: calc(50% - 12px);
}
.form .form-group.full-w {
	flex-basis: 100%;
}
.form .form-group-inline {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 10px;
}
.form .form-group-inline .help {
	margin: 0;
}
.form .form-group.note,
.form .form-group .note {
	color: #193766;
	font-size: 14px;
	font-weight: var(--fw300);
	line-height: 21px;
	letter-spacing: -0.28px;
}
.form label {
	display: block;
	margin-bottom: 8px;
	color: #344767;
	font-size: 14px;
	font-weight: var(--fw500);
	line-height: 21px;
	letter-spacing: -0.28px;
	text-transform: none;
}
.form input[type=text],
.form input[type=email],
.form input[type=phone],
.form input[type=number],
.form input[type=date],
.form input[type=time],
.form input[type=password],
.form textarea {
	position: relative;
	border: 0.8px solid #D2D6DA;
	border-radius: 10px;
	height: 48px;
	width: 100%;
	padding: 8px 40px 8px 16px;
	color: #344767;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: var(--fw300);
	line-height: 21px;
	letter-spacing: -0.28px;
	background-position: calc(100% - 16px) center;
	background-repeat: no-repeat;
	background-color: #FFF;
}
.form textarea {
	height: 100px;
}
.form label.light {
	color: #90A3BF;
	font-weight: var(--fw300);
}
.form .half-w {
	position: relative;
	width: 50%;
}
.form .full-w .half-w {
	width: calc(50% - 12px);
}
.form .full-w .three-quarters-w {
	width: 75%;
}
.form .one-third {
	flex-basis: calc(33% - 16px);
}
.form .form-group.block {
	display: block;
	flex-basis: 100%;
}
.form input::placeholder {
	color: #90A3BF;
	opacity: 1;
}
.form input[type=date].empty {
	color: #90A3BF;
}
.form input[type=date] {
	padding-right: 16px;
}
.form input[type=date]::-webkit-calendar-picker-indicator {
	height: 20px;
	width: 20px;
	background-image: url(../img/input-date.svg);
	cursor: pointer;
}
.form button[type=submit] {
	margin-right: 0;
	margin-left: auto;
	padding: 10px 24px;
}
.form select {
	display: inline-flex;
	align-self: center;
	height: 40px;
}
.form button {
	align-self: center;
}
input.date {
	background-image: url(../img/input-date.svg);
}
input.mail {
	background-image: url(../img/input-mail.svg);
}
input.pwd {
	background-image: url(../img/input-show.svg);
}
input.hide-pwd {
	background-image: url(../img/input-hide.svg);
}
input.tel {
	background-image: url(../img/input-tel.svg);
}
input.fb {
	background-image: url(../img/input-fb.svg);
}
input.ig {
	background-image: url(../img/input-ig.svg);
}
input.tk {
	background-image: url(../img/input-tk.svg);
}
input.yt {
	background-image: url(../img/input-yt.svg);
}
input.users {
	background-image: url(../img/input-users.svg);
}
.form .form-group .toggle-view {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 48px;
	width: 40px;
	cursor: pointer;
}
.form .form-group .toggle-view.toggle-top {
	top: 0;
	bottom: auto;
}



/* Loader
-------------------------------------------------- */

.loader {
	display: none;
	position: absolute;
	z-index: 100000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height:100%;
	width: 100%;
	text-align: center;
	background: rgba(0,0,0,.6);
}
.loader.show {
	display: flex;
	align-items: center;
	justify-content: center;
}
.loader.show:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #009fe5;
	border-color: #11cdef transparent #11cdef transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}



/* Button state
-------------------------------------------------- */

button.save {
	position: relative;
}
button.save > span {
	transition: all 0.2s;
}
button.save.loading > span,
button.save.done > span {
  visibility: hidden;
  opacity: 0;
}
button.save.loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 4px solid transparent;
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: button-loading-spinner 1s ease infinite;
}
@keyframes button-loading-spinner {
	from {
		transform: rotate(0turn);
	}
	to {
		transform: rotate(1turn);
	}
}
button.save.done {
	background: linear-gradient(90deg, #1FC304 0%, #36C304 0.01%, #00FF47 100%) !important;
}
button.save.done::after {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
  transform: rotate(45deg);
  height: 18px;
  width: 10px;
  border-bottom: 3px solid #FFF;
  border-right: 3px solid #FFF;
 	transition: all 0.2s;
}



/* Mobi utils
-------------------------------------------------- */

@media only screen and (min-width: 1025px) {
	.show-m {
		display: none !important;
	}
}
@media only screen and (max-width: 1024px) {
	.hide-m {
		display: none !important;
	}
}
@media only screen and (min-width: 769px) {
	.show-xs {
		display: none !important;
	}
}
@media only screen and (max-width: 768px) {
	.hide-xs {
		display: none !important;
	}
}




/* Mobile
-------------------------------------------------- */

@media only screen and (max-width: 1024px) {
	body {
		height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
		padding-top: 74px;
		padding-bottom: 80px;
		background: #FFF;
	}
	h1 {
		color: #17335E;
		font-size: 24px;
		font-style: normal;
		font-weight: var(--fw600);
		line-height: normal;
	}
	/*
	h2 {
		font-size: 20px;
		line-height: 30px;
		letter-spacing: -0.4px;
	}
	*/
	p {
		font-size: 14px;
		/* font-weight: var(--fw400); */
		line-height: 21px;
		letter-spacing: -0.28px;
	}
	button {
		padding: 8px 16px;
	}
	#backdrop {
		display: block;
	}
	.sidenav-main {
		top: 0;
		left: -80vw;
		width: 80vw;
		padding: 24px 24px 24px;
		overflow-y: scroll;
		transition: left ease-in-out 0.2s;
	}
	.sidenav-main.show-notice #end-trial-notice {
		left: -24px;
		margin: 0px -24px;
	}
	.sidenav-main.on {
	  left: 0;
	}
	.sidenav-main hr {
		margin: 12px 0;
	}
	.sidenav-main .drawer li {
		height: 48px;
		padding: 12px;
		font-weight: var(--fw500);
		line-height: 24px;
	}
	.sidenav-main .drawer li .icon {
		height: 24px;
		width: 24px;
	}
	.main-content {
		margin-top: 0px;
		height: auto;
		overflow-y: visible;
		padding-left: 0;
	}
	.main-content > header {
		left: 0;
	}
	.main-content > section {
		margin: 0;
	}
	body.reduced {
		padding-top: 0;
	}
	body.reduced > .nav {
		display: none;
	}
	body.reduced > .main-content {
		margin-top: 0;
		height: auto;
	}
	.table-container {
		margin: 24px -8px 0;
	}
	.table-container .flex-table.header {
		display: none;
	}
	.table-container .flex-table .flex-row {
		justify-content: space-between;
    margin-bottom: 16px;
		width: 100%;
		padding: 0;
		height: 24px;
    min-height: auto;
	}
	.table-container .flex-table .flex-row .icon {
		margin-right: 12px;
		height: 64px;
		width: 64px;
	}
	.table-container .flex-table .flex-row .photo {
		margin-right: 12px;
		border-radius: 32px;
		height: 64px;
		width: 64px;
	}
	.form .form-group:not(.half-mobi) {
		flex-basis: 100%;
	}
	.form .full-w .half-w,
	.form .full-w .three-quarters-w {
		width: 100%;
	}
	button.out-success,
	button.out-danger,
	button.out-group {
		height: 44px;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 0.2px;
	}
}