@charset "UTF-8";
/*
	CSS for skaleo dashboard
	Syntax: CSS
	Created by: Bartłomiej Kowalczyk
	Date: 24/11/22
	Last update: 28/03/24
	Version: 0.8
*/


		/* VARIABLES */
	:root {
		--skaleo-global-secondary: #fefefe;
		--skaleo-global-accent: #2b70f0;
		--skaleo-global-accent-alpha: rgba(43, 112, 240, 0.8);
		--skaleo-global-accent-lighter: #e0eafc;
		--skaleo-global-text-color: #2f3542;
		--skaleo-table-divider: #2b70f01c;
		--skaleo-disabled-bg: #f0f1f2;
		--skaleo-disabled-text: #5c636f;
		--skaleo-light-grey-blueish: #ecf2fe;
		--skaleo-very-light-grey-blueish: #f3f7fe;
		--skaleo-light-grey-red: #ffd1dd;
		--skaleo-font-satoshi: "satoshi", Sans-serif;
	}

	.skaleo-card, .skaleo-card-text, .skaleo-card-title,
	.skaleo-link, .skaleo-input, .skaleo-input-label,
	.skaleo-checkbox-label, .skaleo-button,
	.skaleo-view-headline, .skaleo-notice {
		font-family: var(--skaleo-font-satoshi);
	}

	.skaleo-pager, .skaleo-flexbox-row, .skaleo-flexbox-column,
	.skaleo-center-items, .skaleo-align-left-items, .skaleo-view-headline,
	.skaleo-view-headline-right, .skaleo-select-multiple-content-item,
	.skaleo-table, .skaleo-table-header, .skaleo-table-row, .skaleo-table-cell {
		display: flex;
	}
	
	.info-icon { width:15px; } 

	/* COMPONENTS */

	/* cards */
	.skaleo-card {
		margin: 4em auto;
		width: 80vw;
		box-shadow: 0px 8px 80px rgba(0, 0, 0, 0.07), 0px 3.34221px 33.4221px rgba(0, 0, 0, 0.0503198),
			0px 1.7869px 17.869px rgba(0, 0, 0, 0.0417275), 0px 1.00172px 10.0172px rgba(0, 0, 0, 0.035),
			0px 0.532008px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.221381px 2.21381px rgba(0, 0, 0, 0.0196802);
		border-radius: 15px;
		padding: 1em 3em;
		background-color: #fff;
	}

	.skaleo-card-small {
		width: 30vw;
		padding: 1em 5em;
	}

	.skaleo-card-info {
		width: 40vw;
		padding: 1em 3em;
	}

	.skaleo-card-sub {
		width:auto;
		background-color: var(--skaleo-very-light-grey-blueish);
	}

	.skaleo-card-reports {
		width: auto;
		padding: 1em;
		margin: 2em abs(calc(2em - 10px)) 0 abs(calc(2em - 20px));
	}

	.skaleo-flexbox-row, .skaleo-view-headline {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 1em 1.2em;
		width: 100%;
	}

	.skaleo-flexbox-column {
		flex-direction: column;
		flex-wrap:wrap;
		flex-basis: 100%;
		flex: 1;
		justify-content: end;
		gap: .5em;
	}


	.skaleo-card-title {
		color: var(--skaleo-global-text-color);
		font-size: 3.5em;
		font-weight: bold;
	}

	.skaleo-card-sub-title {
		color: var(--skaleo-global-text-color);
		font-size: 2em;
		font-weight: bold;
	}

	.skaleo-card-text {
		text-align: center;
		color: var(--skaleo-global-text-color);
		font-size: 1.2em;
	}

	/* card tables */
	.skaleo-table {
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 1em auto;
		flex-flow: column nowrap;

		overflow: hidden;
	}

	.skaleo-table-header, .skaleo-table-row {
		flex-flow: row nowrap;
		justify-content: space-evenly;
		border-bottom: 1px solid var(--skaleo-table-divider);
	}

	.skaleo-table-row .skaleo-loader {
		margin: 2em 1em;
	}

	.skaleo-table-header {
		padding: .5em;
		background-color: var(--skaleo-global-accent);
		color: var(--skaleo-global-secondary);
		font-weight: 600;
	}

	.skaleo-table-row:nth-child(2n - 1) {
		background-color: var(--skaleo-light-grey-blueish);
	}

	.skaleo-table-cell {
		padding: .5em .25em;
		flex: 1;
		text-align: center;
		align-items: center;
		justify-content: center;
		border-right: 1px solid var(--skaleo-table-divider);

		transition: all 150ms cubic-bezier(0, .41, .62, 1.12);
		box-sizing: border-box;
		overflow: auto;
	}

	.skaleo-table-cell .skaleo-checkbox {
		width: 1.8em;
		height: 1.8em;
		background-color: var(--skaleo-global-secondary);
		box-shadow: 2px 3px var(--skaleo-global-accent-lighter);
		overflow:hidden;
	}
	
	.skaleo-table-cell div.skaleo-checkbox.skaleo-selected {
		background-color: #2b70f022;
		box-shadow: none;
	}

	.skaleo-table-cell div.skaleo-checkbox.skaleo-selected::before {
		width: 2.3em;
		position: relative;
  	top: 1px;
	}

	.skaleo-table .skaleo-table-row:hover {
		background-color: var(--skaleo-global-accent-lighter);
	}

	.skaleo-table-row:last-child, .skaleo-table-cell:last-child {
		border-right: 0;
	}

	/* admin head */
	.skaleo-view-headline {
		justify-content: flex-start;
		padding-top: 1.25em;
		padding-bottom: 1.25em;
	}

	.skaleo-view-headline-line {
		margin: 0;
	}

	.skaleo-view-headline-title {
		padding: .75em;
		background-color: var(--skaleo-very-light-grey-blueish);
		border-radius: .2em;
		box-shadow: 0px 8px 80px rgba(0, 0, 0, 0.04), 0px 3.34221px 33.4221px rgba(0, 0, 0, 0.02),
				0px 1.7869px 17.869px rgba(0, 0, 0, 0.04), 0px 1.00172px 10.0172px rgba(0, 0, 0, 0.05),
				0px 0.532008px 5.32008px rgba(0, 0, 0, 0.05), 0px 0.221381px 2.21381px rgba(0, 0, 0, 0.06);
		font-weight: bold;
		color: var(--skaleo-global-accent)
	}

	/* class need better name */
	.skaleo-view-headline-right {
		justify-content: space-between;
		margin-left:auto;
	}

	/* text */

	.skaleo-text-left {
		text-align: left !important;
	}

	.skaleo-text-small {
		font-size: .65em !important;
	}

	.skaleo-text-medium {
		font-size: .8em !important;
	}

	.skaleo-text-large {
		font-size: 1.4em !important;
	}

	.skaleo-text-extra-large {
		font-size: 2em !important;
	}

	.skaleo-text-greyed-out {
		opacity: .5 !important;
	}

	.skaleo-text-highlight {
		color: var(--skaleo-global-accent);
		font-weight: 600;
	}

	/* inputs, selects, buttons */
	.skaleo-input-label {
		display:block;
		font-weight: 400;
		font-size: 1.2em;
		cursor:pointer;
	}

	.skaleo-helper { width:100%; }

	.skaleo-invalid > input.skaleo-input {
		background: var(--skaleo-light-grey-red);
	}

	.skaleo-input.skaleo-disabled::placeholder {
		color: var(--skaleo-disabled-text);
	}

	input.skaleo-input, textarea.skaleo-input, select.skaleo-select, .skaleo-button-select {
		display:block;
		color: var(--skaleo-global-accent);
		font-weight: 700;
		background-color: var(--skaleo-light-grey-blueish);
		border-width: 0px !important;
		border-radius: 6px !important;
	}

	input.skaleo-input[readonly], select.skaleo-select[readonly] {
		color: var(--e-global-color-text);
		opacity: .7;
		cursor: default;
	}

	input.skaleo-input::placeholder {
		color: var(--skaleo-global-accent);
		opacity: .3;
	}

	input.skaleo-input {
		padding: .5em 1rem;
	}

	select.skaleo-select {
		padding: 10px 1rem;
	}

	.skaleo-helper > input.skaleo-input, .skaleo-helper > select.skaleo-select, .skaleo-helper > textarea.skaleo-input { 
		width:70%;
		max-width: 100%;
	}

	.skaleo-flexbox-column-checkbox {
		flex-direction: row;
		justify-content: normal;
	}

	.skaleo-checkbox {
		display:block;
		color: var(--skaleo-global-accent);
		background-color: var(--skaleo-light-grey-blueish);
		border-width: 0px !important;
		border-radius: 6px !important;
		transition: all 250ms ease-in-out;
	}

	div.skaleo-checkbox.skaleo-selected {
		background-color: var(--skaleo-very-light-grey-blueish);
	}

	.skaleo-checkbox-label { 
		width:60%;
		display: block;
		font-weight: 400;
		font-size: 1.2em;
		cursor:pointer;
	}

	/* buttons only */
	.skaleo-button {
		width: fit-content;
		font-size: 1.3em;
		font-weight: 500;
		fill: #FFFFFF;
		color: var(--skaleo-global-secondary);
		padding: .2em 1em;
		background-color: #2B70F0;
		border-color: var(--skaleo-global-accent);
		border-radius: 199px 199px 199px 199px;
		box-shadow: 0px 6px 16px 0px rgba(10.49999999999998, 9.769565217391285, 9.769565217391285, 0.14);
		cursor: pointer;
		transition: all 200ms cubic-bezier(0, .41, .62, 1.12);
	}

	.skaleo-button:hover {
		color: var(--skaleo-global-accent);
		background: #fff;
		border-color: #fff;
	}

	.skaleo-button:focus {
		color: #FFFFFF;
		background-color: #2B70F0; 
		border-color: var(--skaleo-global-accent);
		outline: none !important;
	}

	.skaleo-button-secondary {
		font-size: 1em;
		fill: #FFFFFF;
		color: var(--skaleo-global-text-color);
		background-color: var(--skaleo-global-secondary);
		border-color: var(--skaleo-global-text-color);
	}
	
	.skaleo-button-round {
		display:flex;
		justify-content: center;
		align-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
	}

	.skaleo-button-select {
		display: block;
		color: var(--skaleo-global-accent-alpha) !important;
		font-weight: 700;
		background-color: var(--skaleo-light-grey-blueish) !important;
	}

	.skaleo-button-squared {
		border-radius: .2em !important;
		box-shadow: 0px 6px 16px 0px rgba(10.49999999999998, 9.769565217391285, 9.769565217391285, 0.14) !important;
	}

	.skaleo-button-secondary:hover {
		color: var(--skaleo-global-accent);
		background: #fff;
		border-color: #fff;
	}

	.skaleo-button-secondary:focus {
		color: var(--skaleo-global-accent);
		background-color: var(--skaleo-global-secondary); 
	}

	/* Groups button for the same font-size */
	.skaleo-button-group-big .skaleo-button {
		font-size: 1.3em;
	}

	.skaleo-button-group .skaleo-button {
		font-size: 1em !important;
	}
	
	/* pager */
	.skaleo-pager {
		flex-wrap: nowrap;
		flex-direction: column;
		padding: .5em 0 .5em 0;
	}

	.skaleo-button-pager {
		font-size: 1em;
		color: var(--skaleo-global-text-color);
		background-color: var(--skaleo-vary-light-grey-blueish);
		border-color: var(--skaleo-global-text-color);
		box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.14);
	}

	.skaleo-button-pager:hover {
		color: var(--skaleo-global-accent);
		background-color: var(--skaleo-global-accent-lighter); 
	}

	.skaleo-button-pager:focus {
		color: var(--skaleo-global-accent);
		background-color: var(--skaleo-global-accent-lighter); 
		border: none;
	}

	.skaleo-button-pager.skaleo-selected { 
		font-weight: 900;
		background-color: var(--skaleo-light-grey-blueish);
	}

	/* icons */
	.skaleo-icon-container {
		position: relative;
		width: 102px;
		height: 102px;
	}

	.skaleo-icon {
		position: absolute;
		left: 25%;
		top: 25%;
	}

	/* multi select, dropdown */
	.skaleo-dropdown, .skaleo-select-multiple {
		position: relative;
		display: inline-block;
	}

	.skaleo-dropdown-content, .skaleo-select-multiple-content {
		display: none;
		position: absolute;
		background-color: var(--skaleo-very-light-grey-blueish);
		border-radius: .2em;
		min-width: 80%;
		max-height: 35vh;
		box-shadow: 0px 6px 16px 0px rgba(10.49999999999998, 9.769565217391285, 9.769565217391285, 0.14);
		z-index: 1;
		margin-top: .5em;
		overflow-y: scroll;
	}

	.skaleo-dropdown-content .skaleo-dropdown-content-item,
	.skaleo-select-multiple-content .skaleo-select-multiple-content-item,
	.skaleo-select-multiple-content .skaleo-select-multiple-content-category {
		color: var(--skaleo-global-accent);
		border-radius: .2em;
		padding: 1em 1em 1em 1em;
		cursor: pointer;
		user-select: none;
		transition: all 200ms ease-in-out;
		-webkit-transition: all 200ms ease-in-out;
		-moz-transition: all 200ms ease-in-out;
	}

	.skaleo-dropdown-content .skaleo-dropdown-content-item {
		border-radius: 0;
		border-bottom: 1px solid #2b70f021;
	}

	.skaleo-select-multiple-content .skaleo-select-multiple-content-category {
		color: var(--skaleo-global-text-color);
		font-weight: 700;
		font-size: 1.1em;
		background-color: var(--skaleo-light-grey-blueish);
		/* padding-left: 3em; */
		border: solid rgba(47, 53, 66, 0.1) 1px;
		z-index: 100;
	}

	.skaleo-select-multiple-content {
		width: max-content;
	}

	.skaleo-dropdown-content .skaleo-dropdown-content-item:hover,
	.skaleo-select-multiple-content .skaleo-select-multiple-content-item:hover {
		background-color: var(--skaleo-light-grey-blueish);
	}

	.skaleo-select-multiple-content .skaleo-select-multiple-content-item.skaleo-selected {
		width: 100%;
		color: var(--skaleo-global-text-color);
		font-weight: 500;
		background-color: var(--skaleo-global-accent-lighter);
	}

	.skaleo-select-multiple-content-item .skaleo-checkbox, div.skaleo-checkbox {
		margin: 0;
		padding: 0 auto;
		width: 1.3em;
		height: 1.3em;
		background-color: var(--skaleo-global-accent-lighter);
		transition: all 200ms ease-in-out;
	}

	.skaleo-select-multiple-content-item .skaleo-checkbox:checked::before, div.skaleo-checkbox::checked::before {
		width: 1.8em;
		margin-left: -.3em;
	}

	div.skaleo-checkbox.skaleo-selected::before {
		display: block;
		content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E");
		margin: -.25em 0 0 -.3em;
		width: 1.8em;
	}

	.skaleo-select-multiple-content .skaleo-select-multiple-content-item.skaleo-selected .skaleo-checkbox{
		background-color: var(--skaleo-global-secondary);
	}

	.skaleo-flexbox-column-button {
		flex:none;
	}

	.skaleo-notice > p {
		font-size: .85em;
		font-weight: 500;
	}


	/* LOADER */

	.skaleo-loader {
		width: 48px;
		height: 48px;
		border: 5px solid var(--skaleo-global-accent-lighter);
		border-bottom-color: var(--skaleo-global-accent);
		border-radius: 50%;
		display: inline-block;
		box-sizing: border-box;
		animation: rotation 1s linear infinite;
	}

		@keyframes rotate {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		} 




	/* UTILITIES */
	.skaleo-flexbox-nowrap { flex-wrap: nowrap; }
	.skaleo-gap-top { margin-top: .5em; }
	.skaleo-gap-bottom { margin-bottom: .5em; }
	.skaleo-gap-left { margin-left: 1.2em; }
	.skaleo-gap-right { margin-right: 1.2em; }
	.skaleo-no-margins { margin: 0 !important; }
	.skaleo-no-paddings { padding: 0 !important; }
	.skaleo-hidden { display: none; }
	.skaleo-text-center { text-align: center; }
	.skaleo-align-text-input { align-items: center; }
	.skaleo-self-stretch { align-self: stretch; } /* helpful when we use align-items: center, but some item changes height */
	.skaleo-flexbox-gap { gap: 1em; }
	.skaleo-center-items { justify-content: center; }
	.skaleo-align-left-items { justify-content: left; }
	.skaleo-allow-transition { transition: all 200ms cubic-bezier(0, .41, .62, 1.12); }
	.skaleo-max-height { height: 100% !important }
	.skaleo-allow-scrollX { overflow-x: scroll; }
	.skaleo-cursor-pointer { cursor: pointer; }
	/* Default, should be override for specific cases */
	.skaleo-disabled { 
		background-color: var(--skaleo-disabled-bg) !important;
		color: var(--skaleo-global-text-color) !important;
		user-select: none !important;
		cursor: no-drop !important;
	}

	/* MOBILE */

	@media screen and (max-width: 1700px) {
		.skaleo-card-small {
			width: 40vw;
			padding: 1em;
		}

		.skaleo-flexbox-column-mobile { 
			display: flex;
			flex-direction: column;
			flex-wrap:wrap;
			flex-basis: 100%;
			flex: 1;
			justify-content: end;
			gap: .5em;
		}

	}

	@media screen and (max-width: 900px) {

			.skaleo-card {
				padding: 1em;
			}

			.skaleo-card-small {
				width: 80vw;
				padding: 1em;
			}

			.skaleo-card-info {
				width: 80vw;
				padding: 1em;
			}

			.skaleo-card-sub {
				padding: 2em .5em;
			}

			.skaleo-card-sub-title {
				text-align: center;
			}

			.skaleo-flexbox-row, .skaleo-flexbox-column {
				display: block;
			}

			.skaleo-flexbox-row {
				padding: 0 1.2em;
			}

			.skaleo-flexbox-column {
				padding: 1em 0;
			}

			.skaleo-input-label {
				padding-bottom: 1em;
			}

			.skaleo-card-sub, .skaleo-card-sub .skaleo-input,
			.skaleo-card-sub .skaleo-select, .skaleo-button-select { font-size: .8em; }

			.skaleo-helper > .skaleo-input, .skaleo-helper > .skaleo-select { width: 100%; }

			.skaleo-mobile-helper > .skaleo-input, .skaleo-mobile-helper > .skaleo-select { width: 100% !important; max-width: 100% !important; }

			.skaleo-card-title {
				font-size: 2.5em !important;
			}

			.skaleo-card-text {
				font-size: .8em;
			} 


			.skaleo-flexbox-column-checkbox {
				display:flex;
			}

			.skaleo-checkbox-label { 
				width:90%;
			}

			.skaleo-icon-container {
				transform: scale(0.7);
			}

			.skaleo-pager {
				font-size: .8em;
			}

			.skaleo-view-headline {
				gap: 1em;
			}

			.skaleo-view-headline-title {
				width: 100%;
				text-align: center;
			}

			.skaleo-view-headline-right {
				flex-basis: 100%;
			}

			.skaleo-dropdown-button.skaleo-gap-right {
				margin-right: auto;
			}


			/* UTILITY */

			.skaleo-mobile-hidden { display:none; }
			.skaleo-center-items {
				display:flex;
				max-width: 100% !important; /* should this be here? */
			}
			.skaleo-flexbox-wrap-mobile { flex-wrap: wrap; }
	}

	@media screen and (max-width: 960px) {
		.skaleo-card-reports {
			margin: 2em 1em;
		}
	}

	@media screen and (max-width: 600px) {
			.skaleo-card-sub .skaleo-select, .skaleo-card-sub .skaleo-input {
				max-width: 90% !important;
			}

			.skaleo-pager .skaleo-button-pager {
				font-size: .7em;
				padding: .2em .5em;
			}
	}

	@media screen and (max-width: 400px) {


		.skaleo-pager .skaleo-button-pager {
			font-size: .6em;
			padding: .2em .5em;
		}
}