:root {
	--body_background_color: #F5F5F5;
	--success: #15CD72;
	--warning: #EDE04D;
	--error: #ED4F32;
	--info: #4bb1cf;
}

html, body {
	min-height: 100%;
	height: 100%;
}

.material-icons {
	vertical-align: middle;
}

.cancel {
	color: var(--error);
}

.cancel:hover {
	color: var(--error);
}

.link-icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.material-icons {
	font-size: 4.0rem;
}


.no-padding-top {
	padding-top: 0 !important;
}

.scroll-x {
	overflow-x: auto;
}

/* To prevent zoom-in in ios */
form,
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
select:focus,
textarea {
  font-size: 16px !important;
}


button, .button {
	width: 100%;
	font-size: 1.4rem;
	font-weight: inherit;
	height: 4.8rem;
	line-height: 4.8rem;
	margin-bottom: 0;
}

button + button,
button + .button,
.button + button,
.button + .button {
	margin-top: 1.6rem;
}

@media screen and (min-width: 480px) {
	button, .button {
		width: auto;
	}

	button + button,
	button + .button,
	.button + button,
	.button + .button {
		margin-top: inherit;
		margin-left: 1.6rem;
	}
}

input[type='email']:hover:not(:focus),
input[type='number']:hover:not(:focus),
input[type='password']:hover:not(:focus),
input[type='search']:hover:not(:focus),
input[type='tel']:hover:not(:focus),
input[type='text']:hover:not(:focus),
input[type='url']:hover:not(:focus),
input[type='date']:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
	border-color: #b1b1b1;
}

form {
	margin-bottom: 0;
}

/* App */




/* Inputs */

form + form {
    margin-top: 2.4rem;
    border-top: .2rem solid var(--inverse_text_color);
}

.field .title {
	display: block;
	font-size: 3.2rem;
	margin: 0 0 .8rem 0;
}

.field {
	padding-bottom: 1.6rem;
	display: flex;
	flex-direction: column;
}

/*.field.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.field.flex label {
	margin-bottom: 0;
}*/

/*.field.flex.flex-start {
	justify-content: flex-start;
}*/

.field label {
	display: flex;
	align-items: center;
	font-size: 2.0rem;
	font-weight: inherit;
	color: var(--primary_text_color);
	margin-bottom: 0;
}

.field label + input,
.field label + select,
.field label + textarea,
.field label + button,
.field label + .button,
.field label + .element {
	margin-top: .8rem;
}

.field label .info {
	margin-right: .8rem;
}

.field input,
.field select,
.field textarea {
	background: #fff;
	border-radius: 0;
	height: 4.8rem;
	margin-bottom: 0;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field input[type="email"] {
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M13.32 3.14a.81.81 0 0 0 0-1.1l-1.7-1.8a.69.69 0 0 0-1 0L9.27 1.65 12 4.57zM.47 11.08V14H3.2l8-8.6-2.7-2.92z" fill="%23aba6a6"/></svg>') no-repeat calc(100% - 1.6rem) 1.6rem;
	background-size: 1.6rem 1.6rem;
	padding-right: 4.0rem;
}

.field select {
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);transform-origin:50% 50%" viewBox="0 0 14 20"><path d="M.8 10L10.36.44 13.2 3.3 6.5 10l6.72 6.7-2.85 2.85L.8 10z" fill="%23aba6a6"/></svg>') no-repeat calc(100% - 1.6rem) 1.6rem;
	background-size: 1.6rem 1.6rem;
	padding-right: 4.0rem;
}

.field input[type="text"][readonly],
.field input[type="number"][readonly],
.field input[type="password"][readonly],
.field input[type="email"][readonly] {
	background-image: none;
	color: var(--primary_text_color);
	padding-right: 1.0rem;
}

.field input[type="text"]:valid:not(:placeholder-shown),
.field input[type="number"]:valid:not(:placeholder-shown),
.field input[type="password"]:valid:not(:placeholder-shown),
.field input[type="email"]:valid:not(:placeholder-shown) {
	border-color: var(--success) !important;
}

.field input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
.field input[type="number"]:invalid:not(:focus):not(:placeholder-shown),
.field input[type="password"]:invalid:not(:focus):not(:placeholder-shown),
.field input[type="email"]:invalid:not(:focus):not(:placeholder-shown) {
	background-color: pink !important;
	border-color: var(--error) !important;
}

.field input[type="text"]:invalid:focus:not(:placeholder-shown),
.field input[type="number"]:invalid:focus:not(:placeholder-shown),
.field input[type="password"]:invalid:focus:not(:placeholder-shown),
.field input[type="email"]:invalid:focus:not(:placeholder-shown) {
	border-color: var(--error) !important;
}

.field input[type="text"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
.field input[type="number"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
.field input[type="password"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
.field input[type="email"]:invalid:focus:not(:placeholder-shown) ~ .requirements {
	max-height: 20.0rem !important;
}

.field .requirements {
	max-height: 0;
	overflow: hidden;
	transition: 0.28s;
	color: red;
	font-style: italic;
}

.field label > input[type="checkbox"] {
	margin-right: .8rem;
}

.field .flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	--cols: 1;
}

.field .flex[data-cols="2"] { --cols: 2; }

.field .flex[data-cols="3"] { --cols: 3; }


.field .flex > * {
	width: calc((100% - (1.6rem * (var(--cols) - 1))) / var(--cols));
}

.field {
	padding-top: .8rem;
}

.field + .field {
	border-top: 2px solid #fff;
}

.field-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.field-inner .element {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-bottom: 1.6rem;
}

.field-inner .element > *:last-child {
	margin-bottom: 0;
}

.field-inner .element:last-of-type {
	padding-bottom: 0;
}

hr {
	margin: 0 0 2.4rem 0;
	border-top: .2rem solid #fff;
}

.result {
	display: block;
	color: var(--primary_color);
	font-size: 2.0rem;
}

.result + .result {
	margin-top: .8rem;
}

.link-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 2.4rem;
	width: 3.2rem;
	height: 3.2rem;
	margin: 0;
	cursor: pointer;
	outline: none;
}

.link-icon:hover {
	background-color: rgba(158, 158, 158, 0.2);
}

.link-icon:focus:not(:active) {
	background-color: rgba(0, 0, 0, 0.12);
}

.link-icon:active {
	background-color: rgba(158, 158, 158, 0.4);
}

.link-icon.small {
	padding: .8rem;
}



/*::-webkit-scrollbar {
	width: 0;
}
*/



/* Base styles for the element that has a tooltip */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition:    
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		-moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition:         
		opacity 0.2s ease-in-out,
		visibility 0.2s ease-in-out,
		transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform:    translate3d(0, -50%, 0);
  transform:         translate3d(0, -50%, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after{
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
[data-tooltip]:before {
  z-index: 1001;
  border: .6rem solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
[data-tooltip]:after {
  z-index: 1000;
  padding: .8rem;
  width: 16.0rem;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 1.4rem;
  line-height: 1.2;
  border-radius: .3rem;
}

/* Right */
[data-tooltip]:before,
[data-tooltip]:after {
  top: 50%;
  left: 100%;
}

[data-tooltip]:before {
  margin-bottom: 0;
  margin-left: -1.2rem;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
  -webkit-transform: translateX(1.2rem) translateY(-50%);
  -moz-transform:    translateX(1.2rem) translateY(-50%);
  transform:         translateX(1.2rem) translateY(-50%); 
}

@media screen and (max-width: 400px) {
	html {
		font-size: 50%;
	}
}

#tabs .tabs-inner {
	display: flex;
}

#tabs .tab {
	--tabs: 3;
	display: flex;
	width: calc(100% / var(--tabs));
	padding: .8rem 1.6rem;
	min-height: 6.4rem;
	color: var(--primary_text_color);
	align-items: center;
	background-color: #fff;
	border-bottom: .1rem solid #d1d1d1;
	pointer-events: none;
}

#tabs .tab + .tab {
	border-left: .1rem solid #fff;
}

#tabs .tab.enabled + .tab {
	border-left-color: #d1d1d1;
}

#tabs[data-tabs="2"] .tab{ --tabs: 2; }

#tabs .tab.enabled {
	background-color: inherit;
	pointer-events: auto;
}

#tabs .tab.active {
	background-color: inherit;
	border-bottom-color: var(--body_background_color);
}

#tabs .tab .number {
	font-weight: 500;
	line-height: 1.6rem;
	margin-right: .8rem;
	/*align-self: flex-start;*/
}

#tabs .tab .title {
	font-size: 1.4rem;
	line-height: 1.6rem;
	margin-right: .8rem;
}

#flash__wrapper {
	position: fixed;
	/*right: .8rem;*/
	/*top: .8rem;*/
	/*width: calc(100% - 1.6rem);*/
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 200;
}

/*@media screen and (min-width: 480px) {
	#flash__wrapper {
		width: auto;
	}
}
*/
.flash__message {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .8rem;
	/*border-radius: .3rem;*/
	word-wrap: break-word;
	/* background-color: #fff; */
	/* border-bottom: .1rem solid rgba(0,0,0,0.54); */
	/* color: rgba(0,0,0,0.54); */
	background: var(--primary_text_color);
	border-top: .1rem solid #000;
}
/*
.flash__message + .flash__message {
	margin-top: .8rem;
}*/

.flash__message.success {
	color: var(--success);
}

.flash__message.warning {
	color: var(--warning);
}

.flash__message.error {
	color: var(--error);
}

.flash__message.info {
	color: var(--info);
}

.flash__close-button {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: 201;
	cursor: pointer;
	margin: 0;
	padding: 0;
	border: none;
}

.list .list-link {
	display: flex;
	align-items: center;
	font-size: 1.8rem;
	height: 6.4rem;
	background: #fff;
	border-bottom: .1rem solid #d1d1d1;
	color: var(--primary_text_color);
}

.list .list-link-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.list .list-link-inner .element {
	display: flex;
	align-items: center;
}

.list .list-link-icon {
	width: 4.0rem;
	height: 4.0rem;
}

.list .list-link-icon.arrow {
	padding: .8rem;
	transform: rotate(180deg);
}

.list .list-link-icon path {
	fill: var(--secondary_text_color);
}

.list .list-link:focus-within {
	outline:0;
	background-color: #eee;
}

.list .list-link-inner-text {
	overflow: hidden;
}

.list .filtered {
	font-size: 1.6rem;
	color: #000;
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.list .filtered b {
	font-weight: bold;
	color: var(--inverse_color);
}

table.grid {
	border-collapse: collapse;
	margin-bottom: 0;
}

table.grid tr:nth-child(odd) {
	background-color: #fff;
}

table.grid td {
	padding: .4rem !important;
	border: 1px solid #d1d1d1;
}

table.grid .selected {
	color: var(--primary_color_darker);
}

table.grid thead td {
	word-wrap: break-word;
	background: var(--inverse_text_color);
	/*color: var(--primary_color);*/
	/*border-color: var(--primary_color);*/
}

table.grid tbody td {
	white-space: nowrap;
}

/* Cards */

.cards {
	position: relative;
	width: calc(100% + 2.4rem);
	left: -1.2rem;
	top: -3.2rem;
	--cols: 3;
	--cols_xs: 2;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.cards[data-cols="4"] { --cols: 4; }
.cards[data-cols="3"] { --cols: 3; }
.cards[data-cols="2"] { --cols: 2; }
.cards[data-cols="1"] { --cols: 1; }
.cards[data-cols_xs="1"] { --cols_xs: 1; }

.cards .card {
	width: calc(100% - 2.4rem);
	margin-left: 1.2rem;
	margin-right: 1.2rem;
	margin-top: 3.2rem;
}

.card {
	background: #fff;
	padding: 1.6rem;
	box-shadow: 0 .1rem .1rem rgba(0,0,0,0.1);
	border-radius: .3rem;
}

.card .title {
	margin-top: 0;
}

.cards .card .card-title {
	display: flex;
	align-items: center;
}

.cards .card .card-title-icon {
	width: 3.2rem;
	height: 3.2rem;
	margin-right: .8rem;
}

.card > *:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.cards .card {
		width: calc((100% - 2.4rem) / var(--cols_xs) - (2.4rem / var(--cols_xs) * (var(--cols_xs) - 1)));
	}
}

@media screen and (min-width: 1024px) {
	.cards .card {
		width: calc((100% - 2.4rem) / var(--cols) - (2.4rem / var(--cols) * (var(--cols) - 1)));
	}
}

#nprogress .bar {
	background: var(--primary_color) !important;
}
#nprogress .peg {
	box-shadow: 0 0 10px var(--primary_color), 0 0 5px var(--primary_color) !important;
}
#nprogress .spinner {
	display: none !important;
}

#nprogress .spinner-icon {
	border-top-color: var(--primary_color) !important;
	border-left-color: var(--primary_color) !important;
}

@media screen and (min-width: 1440px) {
#nprogress .bar {
	background: #fff !important;
}
#nprogress .peg {
	box-shadow: 0 0 10px #fff, 0 0 5px #fff !important;
}
#nprogress .spinner {
	display: block !important;
}

#nprogress .spinner-icon {
	border-top-color: #fff !important;
	border-left-color: #fff !important;
}
}


@media screen and (max-width:576px) {
	.snackbar {
		width: 100% !important;
	}
}