:root{
	--primary:
	rgb(6, 75, 23);
	--secondary: #6e7da3;
	--menu-bg: #fafafa;
	--menu-bg-hover: #f5f5f5;
	--menu-fg: #333;
	--error-bg: #ff3f3f;
	--error: #ff3f3f;
--light-bg: #f5f5f5;
}
*{font-family: Roboto;}
body,html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
	background:white;
    /*background: #f4f4f4;*/
	margin: 0;
}


.error{
	color: var(--error) !important;
}
.hidden{
	visibility: hidden;
}

/***COMPONENTES***/
.md-icon{
	color: inherit;
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

.button {
    font-size: 16px;
    background: var(--primary);
    text-align: center;
    color: white;
    padding: 0px 15px;
    border-radius: 10px;
    cursor: pointer;
    outline:none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary);
	font-weight: 500;
    box-sizing: border-box;
height: 28px;text-align: center;}
.button.outline-button {
   background: white;
   color: var(--primary);
}
.button.outline-button:hover {
    background: #f7f7f7;
}
.button.disabled{
	opacity: 0.5;
    background: #ccc;
    pointer-events: none;
    border-color: #ccc;
	pointer-events: none;
}
.button:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}
.button .md-icon{
    color: inherit;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    height: 17px;
    min-height: 17px;
    width: 17px;
    min-width: 17px;
    text-decoration: none;
    color: inherit;
    margin-left: -2px;
}
.button .text {
    color: inherit;
    font-size: 14px;
    font-weight: inherit;
    text-align: left;
    line-height: 1;
    text-decoration: none;
}
.button .md-icon + .text {
    margin-left: 5px;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    padding: 0px 4px;
}
.breadcrumbs a {
    font-size: 12px;
    
    text-decoration: none;
    color: var(--primary);
    font-weight: 500;
}
.breadcrumbs .md-icon {
    font-size: 18px;
    height: 18px;
    min-height: 18px;
    width: 18px;
    min-width: 18px;
    margin: 0px 4px;
    color: #aaa;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs span {
    font-size: 12px;
    
    font-weight: 500;
}



.form {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.form > .header{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    /* border-bottom: 1px solid #ccc; */
}
.form-section {
    width: 100%;
    padding: 20px 0px;
    box-sizing: border-box;
}
.form-section:first-child{
	padding-top: 0px;
}
.form-section:last-child{
	border-bottom: 0px;
}
.form .title {
	font-size: 24px;
	font-weight: 600;
	color: rgb(50, 49, 48);
	margin-bottom: 4px;
}
.form .subtitle {
    font-weight: 300;
    font-size: 14px;
    margin: 10px 0px 20px 0px;
    display: flex;
    align-items: center;
    max-width: 500px;
    color: #777;
}


.input-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #ebeef1;
    border-radius: 5px;
}
.input-table .header {
    width: 100%;
    display: flex;
    font-weight: 700;
    background: #f6f8fa;
    color: white;
    border-bottom: 1px solid #ebeef1;
    text-transform: uppercase;
    font-weight: 500;
    min-height: 44px;
}
.input-table .cell {
    font-size: 13px;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: rgb(64, 68, 82);
    padding: 8px 12px;
    position: relative;
}
.input-table .cell:not(:last-child) {
    border-right: 1px solid #ebeef1;
}
.input-table .body {
    display: flex;
    flex-direction: column;
    background: white;
}
.input-table .footer {
    width: 100%;
    display: flex;
    font-weight: 700;
    /* background: #f6f8fa; */
    color: white;
    border-top: 1px solid #ebeef1;
    text-transform: uppercase;
    font-weight: 500;
    min-height: 44px;
    flex-direction: column;
}
.input-table .row {
    display: flex;
    width: 100%;
    position: relative;
    min-height: 44px;
}
.input-table .cell input, .input-table .cell select {
    border: none;
    font-size: 14px;
    background: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 8px 0px 8px 12px;
    box-sizing: border-box;
    color: inherit;
    outline: none;
}
.input-table .cell input:focus, .input-table .cell select:focus {
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(1 150 237 / 36%) 0px 0px 0px 4px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}
.input-table .row:not(:last-child) {
    border-bottom: 1px solid #ebeef1;
}
.input-table .row .warning {
    position: absolute;
    left: 100%;
}
.input-table .cell input:focus, .input-table .cell select:focus {
    background: #f0f0f0;
}
.input-table .cell input.ng-invalid {
	background-color: var(--error-bg);
}

.input-table .cell select {
    cursor: pointer;
}
.input-table .cell.disabled {
    pointer-events: none;
    color: rgba(0, 0, 0, 0.4);
}
.input-table .cell select option {
    padding: 8px 12px;
}
.input-table .footer .row{
	border: none;
}
.input-table .footer .cell{
	border: none;
}
.input-table .virtual-cell {
    position: absolute;
    left: 100%;
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.input-table .delete-button {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.input-table .delete-button .md-icon {
    font-size: 16px;
    color: var(--primary);
}



.input-group {
    display: flex;
    width: 100%;
    padding-bottom: 10px;
}
.input-container {
    display: flex;
    flex-direction: column;
    width: 25%;
    padding-right: 24px;
    margin: 4px 0px;
    box-sizing: border-box;
    align-items: baseline;
}
.input-container .error{
	font-size: 13px;
	color: red;
	display: flex;
	flex-direction: column;
	padding: 5px 4px;
	font-weight: 500;
}
.input-container[filepicker] {
    cursor: pointer;
}
.input-container[filepicker] button{
	font-size: 12px;
	margin-top: 4px;
	width: 200px;
margin-top: 12px;}
.input-container img{
	width: 200px;
	/* height: 100px; */
	/* border: 1px solid #ccc; */
	box-sizing: border-box;
}
.input-container input[type='checkbox'] {
    margin: 0;
}
.input-container label {
    font-size: 14px;
    margin-bottom: 4px;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: space-between; */
    min-height: 20px;
    font-weight: 500;
    color: #555;
}
.input-container label md-icon{
	font-size: 14px;
	height: 14px;
	min-height:14px;
	width: 14px;
	min-width: 14px;
	margin-left: 4px;
}
.input-container input[type='text'], .input-container input[type='number'], .input-container input[type='nif'], .input-container input[type='password'], .input-container input[type='date'], .input-container input[type='email']{
	border: none;
	width: 100%;
	height: 32px;
	box-sizing: border-box;
	outline: none;
	font-size: 12px;
	border-radius: 6px;
	padding: 8px 12px;
	box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}
.input-container select{
	border: none;
	width: 100%;
	height: 32px;
	box-sizing: border-box;
	outline: none;
	font-size: 12px;
	border-radius: 6px;
	padding: 8px 12px;
	box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}
.input-container textarea{
	border: none;
	width: 100%;
	height: 100px;
	box-sizing: border-box;
	outline: none;
	font-size: 12px;
	border-radius: 6px;
	padding: 8px 12px;
	box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}
.input-container input[disabled]{
	background:#eee;
}
.input-container input:focus{
	box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(1 150 237 / 36%) 0px 0px 0px 4px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}
.input-container select:focus{
	box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(1 150 237 / 36%) 0px 0px 0px 4px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}
.input-container textarea:focus{
	box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(1 150 237 / 36%) 0px 0px 0px 4px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}

.input-container input[type='checkbox']+label {
    padding-left: 8px;
}

.toggle {
    width: 100px;
    border: 1px solid #aaa;
    padding: 0px;
    height: 24px;
    box-sizing: border-box;
    display: flex;
    border-radius: 2px;
}
.toggle input {
    display: none;
}
.toggle .toggle-button {
    width: 50%;
    margin: 0;
    display: flex;
    cursor: pointer;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}
.toggle .toggle-button.checked {
    background: #3b4f7e;
    color: white;
}

.checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.checkbox .md-icon {
    font-size: 15px;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    color: var(--primary);
user-select: none;}


.input-container .popover{
	background: #eee;
	opacity: 0;
	padding: 4px 8px;
	border: 1px solid #aaa;
	font-size: 11px;
	max-width: 250px;
	pointer-events: none;
	transition: 0.1s ease-in all;
	color: #333;
	border-radius: 2px;
	display: flex;
	flex-direction: column;
}
.input-container *:hover > .popover{
	opacity: 1;
}
.locked {
    filter: grayscale(0.5) blur(1px);
    filter: blur(0.5px);
	pointer-events: none;
}
.link {
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
}
.link:hover{
	text-decoration: underline;
}

.tag-list {
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}
.tag {
    height: 32px;
    width: 150px;
    display: flex;
    align-items: center;
    background: #d8dce5;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 4px 12px;
    cursor: pointer;
}
.tag:not(:first-child) {
    margin-left: 12px;
}
.tag .input-container {
    width: 100%;
    height: 100%;
}

.map-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 5px;
    margin: 20px 0px;
}

*[flex='5']{ flex-basis: 5%; }
*[flex='15']{ flex-basis: 15%; }
*[flex='25']{ flex-basis: 25%; }
*[flex='35']{ flex-basis: 35%; }
*[flex='45']{ flex-basis: 45%; }
*[flex='55']{ flex-basis: 55%; }
*[flex='65']{ flex-basis: 65%; }
*[flex='75']{ flex-basis: 75%; }
*[flex='85']{ flex-basis: 85%; }
*[flex='95']{ flex-basis: 95%; }
*[flex='10']{ flex-basis: 10%; }
*[flex='20']{ flex-basis: 20%; }
*[flex='30']{ flex-basis: 30%; }
*[flex='40']{ flex-basis: 40%; }
*[flex='50']{ flex-basis: 50%; }
*[flex='60']{ flex-basis: 60%; }
*[flex='70']{ flex-basis: 70%; }
*[flex='80']{ flex-basis: 80%; }
*[flex='90']{ flex-basis: 90%; }

.page{
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
}
.layout{
	width: 100%;
	height: 100%;
	display: flex;
	overflow: auto;
}
.layout.layout-guest {
	flex-direction: column;
}
.layout.layout-dashboard {
	flex-direction: column;
}
.layout-guest > .footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0px;
}



.layout-guest > .content{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
}

.layout-guest .login {width: 300px;height: auto;display: flex;flex-direction: column;max-width: 100%;margin-top: 100px;}
.layout-guest .login .header {width: 100%;overflow: hidden;height: 100px;display: flex;justify-content: center;}
.layout-guest .login .content {width: 100%;display: flex;flex-direction: column;box-sizing: border-box;margin: 50px 0px;}
.layout-guest .login .content .input-container {width: 100%;padding: 0px;margin-bottom: 20px;}
.layout-guest .login .content .input-container label {font-size: 14px;padding-left: 4px;color: #777;font-weight: 500;width: 100%;flex: none;}
.layout-guest .login .content .input-container input {/* height: 44px; *//* border-radius: 11px; *//* border: 1px solid #ccc; *//* font-size: 18px; *//* padding: 0px 10px; *//* box-sizing: border-box; *//* color: #777; *//* font-weight: 300; *//* flex: none; */}
.layout-guest .login .content .input-container .error {padding: 5px;width: 100%;flex: none;box-sizing: border-box;}
.layout-guest .login .footer {width: 100%;display: flex;align-items: center;}
.layout-guest .login .footer .button {width: 100%;height: 44px;}
.layout-guest .login .link {
    margin: 0px 10px;
}


.layout-guest .password-recovery {width: 300px;height: auto;display: flex;flex-direction: column; max-width: 100%;}
.layout-guest .password-recovery .header {width: 100%;overflow: hidden;height: 100px;display: flex;justify-content: center;}
.layout-guest .password-recovery .content {width: 100%;display: flex;flex-direction: column;box-sizing: border-box;margin: 20px 0px;}
.layout-guest .password-recovery .content .input-container {width: 100%;padding: 0px;margin-bottom: 20px;}
.layout-guest .password-recovery .content .input-container label {font-size: 14px;padding-left: 4px;color: #777;font-weight: 500;width: 100%;flex: none;}
.layout-guest .password-recovery .content .input-container input {/* height: 44px; *//* border-radius: 11px; *//* border: 1px solid #ccc; *//* font-size: 18px; *//* padding: 0px 10px; *//* box-sizing: border-box; *//* color: #777; *//* font-weight: 300; *//* flex: none; */}
.layout-guest .password-recovery .content .input-container .error {padding: 5px;width: 100%;flex: none;box-sizing: border-box;}
.layout-guest .password-recovery .footer {width: 100%;display: flex;align-items: center;}
.layout-guest .password-recovery .footer .button {width: 100%;height: 44px;}
.layout-guest .password-recovery .link {
    margin: 0px 10px;
}



.layout-dashboard .menu{
	background: var(--menu-bg);
	box-shadow: 2px 0px 3px rgb(0 0 0 / 10%);
	width: 250px;
	position: relative;
	z-index: 4;
	height: 100%;
	overflow: auto;
	display: flex;
	flex-direction: column;
	flex: none;
}
.layout-dashboard .menu > .content{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0px;
}
.layout-dashboard .menu > .content > .header {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 20px;
    flex: none;
}
.layout-dashboard .menu > .content > .header .title {
    font-weight: 600;
    color: var(--primary);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
font-size: 20px;}

.layout-dashboard .menu .menu-button {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0px 20px;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--menu-fg);
    flex: none;
}
.layout-dashboard .menu .menu-button.disabled{
	opacity: 0.3;
	pointer-events: none;
}
.layout-dashboard .menu .menu-button .md-icon {
    margin: 0;
    width: 20px;
    height: 20px;
    font-size: 20px;
    min-width: 20px;
    min-height: 20px;
    color: inherit;
}
.layout-dashboard .menu .menu-button .text {
    padding: 0px 6px 0px 6px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}
.layout-dashboard .menu .menu-button:hover {
    background: var(--menu-bg-hover);
}
.layout-dashboard .menu .menu-button.active {
    background: var(--primary);
}
.layout-dashboard .menu .menu-button.active .md-icon{
    color: white;
}
.layout-dashboard .menu .menu-button.active .text {
    color: white;
}
.layout-dashboard .menu .menu-button.main-button {
    margin: 10px 0px;
}
.layout-dashboard .menu .menu-section{
}
.layout-dashboard .menu .menu-section .title{
    margin: 24px 0px 8px 0px;
    font-size: 10px;
    font-weight: 600;
    color: var(-menu-fg);
    padding: 0px 24px;
    text-transform: uppercase;
}




.layout-dashboard > .body{
	width: 100%;
	height: 100%;
	flex: 1;
	display: flex;
	overflow: hidden;
position: relative;z-index: 1;}

.layout-dashboard > .header{
	width: 100%;
    height: 54px;
    background: white;
    box-shadow: 0px 1px 3px rgb(0 0 0 / 10%);
    flex: none;
    position: relative;
    z-index: 3;
}
.layout-dashboard > .header > .content{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
	
	box-sizing: border-box;
}
.layout-dashboard > .header .menu-button{
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	
	cursor: pointer;
	color: var(--primary);
margin-right: 12px;}
.layout-dashboard > .header .menu-button:hover{
	background: #fafafa;
}

.layout-dashboard > .header .alert-button {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary);
    margin-right: 12px;
    /* margin-left: auto; */
    position: relative;
}
.layout-dashboard > .header .alert-button:hover{
	background: #fafafa;
}
.layout-dashboard > .header .alert-button .alerts {
	display:none; 
    position: absolute;
    top: 100%;
    right: 0px;
    width: 400px;
    background: white;
    border: none;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}
.layout-dashboard > .header .alert-button.active .alerts {
	display:block;
}

.layout-dashboard > .header .alert-button .alerts .alert {
    display: flex;
    padding: 10px 0px;
    flex-direction: column;
}
.layout-dashboard > .header .alert-button .alerts .alert .text {
    flex: 1;
    font-size: 12px;
    color: #555;
}
.layout-dashboard > .header .alert-button .alerts .alert .date {
    font-size: 12px;
    font-weight: bold;
    color: #777;
    margin-left: 10px;
}
.layout-dashboard > .header .alert-button .alerts .alert .content {
    display: flex;
}

.layout-dashboard > .header .alert-button .alerts .alert .dismiss-button {
    font-size: 12px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: 600;
}
.layout-dashboard > .header .alert-button .badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--error);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-dashboard > .header .alert-button .alerts .alert .dismiss-button:hover {
    text-decoration: underline;
}

.layout-dashboard > .header .profile{
    height: 100%;
    position: relative;
	margin-left: auto;
}
.layout-dashboard > .header .profile .dropdown-button{
    height: 100%;
    width: 100%;
    display: flex;
    cursor: pointer;
    outline: none;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
}
.layout-dashboard > .header .profile .dropdown-button{
    /* background: #f5f5f5; */
}
.layout-dashboard > .header .profile .dropdown-button .thumb {
    height: 40px;
    width: 40px;
    box-sizing: content-box;
}
.layout-dashboard > .header .profile .dropdown-button .thumb img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
object-fit: cover;}
.layout-dashboard > .header .profile .dropdown-button .body {
    display: flex;
    flex-direction: column;
    padding-right: 10px;
}
.layout-dashboard > .header .profile .dropdown-button .body .email {
	color: var(--primary);
    font-size: 12px;
    text-align: right;
    font-weight: 600;
}
.layout-dashboard > .header .profile .dropdown-button .body .username {
	color: black;
	font-size: 14px;
	text-align: right;
	font-weight: 600;
}
.layout-dashboard > .header .profile .dropdown-button {
    /* cursor: pointer; */
    /* outline: none; */
}
.layout-dashboard > .header .profile .dropdown-button:hover {
    background: #eee;
}
.layout-dashboard > .header .profile .dropdown-body {
    display: flex;
    align-items: start;
}


.layout-dashboard > .header .profile .dropdown{
    position: absolute;
    top: 100%;
    right: 0px;
    width: 320px;
    box-shadow: 0 24px 54px rgba(0,0,0,.15), 0 4.5px 13.5px rgba(0,0,0,.08);
    background-color: white;
    display: none;
    flex-direction: column;
    z-index: 1;
    outline: none;
}
.layout-dashboard > .header .profile.active .dropdown{
	display: flex;
}
.layout-dashboard > .header .profile .dropdown > .header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* padding: 0px 12px; */
    box-sizing: border-box;
}
.layout-dashboard > .header .profile .dropdown > .header .link{
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0px 12px;
}
.layout-dashboard > .header .profile .dropdown .thumb {
    display: block;
    border-radius: 50%;
    overflow: hidden;
    width: 88px;
    height: 88px;
    margin-right: 24px;
}
.layout-dashboard > .header .profile .dropdown .thumb img {
    width: 100%;
    height: 100%;
object-fit: cover;}
.layout-dashboard > .header .profile .dropdown .body {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 12px 12px 18px 12px;
    box-sizing: border-box;
}
.layout-dashboard > .header .profile .dropdown .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* padding: 12px; */
    box-sizing: border-box;
}
.layout-dashboard > .header .profile .dropdown .username {
    font-size: 18px;
    font-weight: 700;
    padding: 1px;
    color: #333;
}
.layout-dashboard > .header .profile .dropdown .email {
    /* margin-top: 3px; */
    font-size: 14px;
    padding: 1px;
    color: #333;
    font-weight: 300;
}

.layout-dashboard > .body > .content{
	width: 100%;
	height: 100%;
	flex: 1;
	overflow: hidden;
	background: white;
	}
.layout-dashboard  .index{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
overflow: auto;padding: 10px 20px;box-sizing: border-box;}
.layout-dashboard  .index > .header {
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: none;
    z-index: 2;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    height: 44px;
    
position: sticky;top: -10px;background: white;}
.layout-dashboard  .index > .header .title {
    margin: 0;
    font-size: 14px;
}
.layout-dashboard .index > .header .info{
	display: flex;
	margin-left: 20px;
	margin-right: auto;
	font-size:12px;
	background: var(--light-bg);
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: 500;
	color: var(--secondary);
}
.layout-dashboard  .index > .header .button {
    width: auto;
    height: 28px;
    cursor: pointer;
    outline: none;
    display: flex;
    box-sizing: border-box;
    padding: 0px 10px;
    border-radius: 8px;
    margin-left: 10px;
    border: none;
}
.layout-dashboard  .index > .header .title+.button{
    margin-left: auto;
}

.layout-dashboard  .index > .toolbar {
    height: 44px;
    display: flex;
    /* overflow: hidden; */
    flex: none;
    box-sizing: border-box;
    position: relative;
    justify-content: space-between;
    align-items: center;
}
.layout-dashboard  .index > .toolbar .button{
	
	
	
	
	
	
	padding: 4px 8px;
	
	color: #000;
	justify-content: center;
	border-radius: 10px;
	min-width: 44px;
	background: none;
	border: none;
}
.layout-dashboard  .index > .toolbar .button.disabled {
    pointer-events: none;
    opacity: 0.5;
}
.layout-dashboard  .index > .toolbar .button.disabled  .search-box {
    display: flex;
    align-items: center;
    width: 320px;
    height: 24px;
    margin: 4px 0px;
    /* border-radius: 24px; */
    margin-right: 62px;
}


.index .filters {
    display: flex;
    align-items: center;
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px;
    flex: 1;
}
.index  .filters > .delete-all {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 24px;
    border-radius: 5px;
    padding: 2px 6px 2px 4px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    color: #aaa;
    pointer-events: none;
}
.index .filters > .delete-all .md-icon {
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-right: 4px;
    color: inherit;
}
.index  .filters > .delete-all.active {
    color: #777;
    pointer-events: all;
}
.index  .filters > .delete-all.active:hover {
    color: black;
}


.layout-dashboard  .index > .toolbar .pagination {
    display: flex;
    align-items: center;
	margin-left: auto;
}
.layout-dashboard  .index > .toolbar .searcher {
    position: relative;
    max-width: 500px;flex: 1;
	background: #eee;
	overflow: hidden;border-radius: 10px;
	height: 30px;box-sizing: border-box;
}
.layout-dashboard  .index > .toolbar .searcher .md-icon{
    position: absolute;
    z-index: 1;
    flex: none;
    right: 0px;
    padding: 0px;
    
    font-size: 17px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
	height: 30px;
	color: var(--primary);
}
.layout-dashboard  .index > .toolbar .searcher input {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px 30px 0px 10px;
    font-size: 12px;
    overflow: hidden;
    outline: none;
	background: none;
	border: none;
	font-weight: 500;
}
.layout-dashboard .index > .toolbar > input {
    position: relative;
    background: #eee;
    overflow: hidden;
    border-radius: 10px;
    height: 30px;
    box-sizing: border-box;
    border: none;
    margin-left: 10px;
    width: 140px;
    padding: 0 10px;
    outline: none;
}
.layout-dashboard  .index > .toolbar .searcher input:focus {
}
.layout-dashboard  .index > .toolbar .pagination{
	display: flex;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
	color: #777;
}
.layout-dashboard  .index > .list{
	width: 100%;
	height: 100%;
	flex: 1;
	
}



.layout-dashboard > .body > .content > .create{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	padding: 10px 20px;
	box-sizing: border-box;
}
.layout-dashboard > .body > .show{
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
}
.layout-dashboard > .body > .show > .content{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	box-sizing: border-box;
}
.layout-dashboard .create{
	padding: 10px 20px;
}
.layout-dashboard .edit{
	padding: 10px 20px;
}





.list{
    display: flex;
    flex-direction: column;
}
.list .list-header {
    width: 100%;
    box-sizing: border-box;
    flex: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: 44px;
}
.list .list-header .list-item {
    color: #3b4f7e;
    font-weight: 700;
}

.list .list-body {
    /* overflow: scroll; */
    /* overflow-x: hidden; */
    flex: 1;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.list .list-item {
    display: flex;
    outline: none;
    align-items: center;
    height: 44px;
    box-sizing: border-box;
    width: 100%;
    text-decoration: none;
    font-size: 12px;
    color: #555;
    font-weight: 600;
    max-height: 100%;
}
.list .list-item:not(:last-child){
    border-bottom: 1px solid #ddd;
}
.list .list-item.list-item-clickable{
	cursor:pointer;
}
.list .list-item.list-item-clickable:hover{
	background: rgb(0 0 0 / 3%);
}
.list .list-item.disabled {
    background: #fafafa;
    pointer-events: none;
	opacity: 0.7;
}
.list .list-item.ui-sortable-helper {
    background: rgba(255, 255, 255, 0.7);
    transform: rotate(1deg);
}



.list .list-cell {
    font-size: inherit;
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 0px 2px;
    box-sizing: border-box;
    position: relative;
}
.list .list-cell > .md-icon{
	font-size:16px;
	margin-right: 8px;
}
.list .list-cell[it-sorts] {
    cursor: pointer;
    border-radius: 5px;
}
.list .list-cell[it-sorts].active {
    background: #fafafa;
    box-shadow: 0px 0px 7px inset rgb(0 0 0 / 7%);
}
.list .list-cell[it-sorts]:hover {
    background: rgba(0, 0, 0, 0.03);
}
.list .list-cell[it-sorts] .md-icon {
    color: #3b4f7e;
    font-size: 18px;
    width: 18px;
    min-width: 14px;
    height: 14px;
    min-height: 14px;
    margin-left: 4px;
    margin-top: -4px;
    user-select: none;
}
.list .list-cell-icon-button {
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list .list-cell-icon-button .md-icon {
    font-size: 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    color: var(--primary);
}
.list .list-cell-check-box {
    outline: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.list .list-cell-check-box .md-icon {
    font-size: 16px;
    color: #0078d4;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
}
.list .list-cell .thumb {
    width: 32px;
    height: 32px;
    border-radius: 8px;
	object-fit: cover;
}
.list-cell.list-cell-splitted {
    height: 100%;
    padding: 0px 8px;
}

.list-cell.list-cell-splitted > .list-cell {
    height: 100%;
    flex: 1;
    flex-direction: column;
    padding: 0;
}

.list-cell.list-cell-splitted > .list-cell > * {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
}

.list-cell:last-child {
    padding-right: 0;
    margin-right: 0;
}
.list-footer {
    position: sticky;
    bottom: 0px;
    z-index: 1;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 36px;
    background: #f7f7f7;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
    background: #617065;
}
.list-footer .list-item {
    font-size: 15px;
    font-weight: 700;
    color: white;
}

.toolbar {
    height: 36px;
    border-bottom: 1px solid rgba(204,204,204,.8);
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    
    
    background: white;
    justify-content: space-between;
	flex: none;
}
.edit .toolbar{
	position: sticky;
	top: 0px;
	z-index: 2;
}
.create .toolbar{
	position: sticky;
	top: -10px;
	z-index: 2;
}

.toolbar .button {
    
    /* display: flex; */
    /* align-items: center; */
    
    /* cursor: pointer; */
    margin-left: auto;
/* background: none; */
    border: none;}
.toolbar .button + .button{
	margin-left:4px;    
}
.toolbar .button.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.toolbar .button:hover{
	background:#f3f3f3;
}
.toolbar .button .md-icon{
    font-size: 15px;
    height: 15px;
    min-height: 15px;
    width: 15px;
    min-width: 15px;
    margin-right: 6px;
    margin-left: -4px;
    color: #3b4f7e;
}
.toolbar .button .text{
    font-size: 13px;
    color: #333;
    line-height: 0.5;
}



.floating-label {
    flex: 0 !important;
    align-items: center;
    background: #d8dce5;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 1px 5px;
    cursor: pointer;
    font-size: 9px;
    top: 0px;
    left: 0px;
    width: 100%;
    border-radius: 0;
    text-align: center;
    font-weight: 700;
}


.factory {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 20px;
    overflow: auto;
    box-sizing: border-box;
    height: 100%;
}
.factory > .header {
    display: flex;
    width: 100%;
    padding-bottom: 50px;
}
.factory .toolbar {
    position: sticky;
    top: -10px;
    z-index: 2;
}
.factory .header .icon-placeholder {
    width: 100px;
    height: 100px;
    margin-right: 20px;
}
.factory .header .icon-placeholder .md-icon {
    font-size: 100px;
    color: var(--primary);
}
.factory .header > .content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.factory .header .title {
    font-size: 30px;
    font-weight: 600;
}
.factory .header .description {
    font-size: 18px;
    color: #777;
    margin-top: auto;
    margin-bottom: 5px;
}
.factory .input-table {
    margin: 50px 0px;
}



.point-of-sale {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 20px;
    overflow: auto;
    box-sizing: border-box;
    height: 100%;
}
.point-of-sale > .header {
    display: flex;
    width: 100%;
    padding-bottom: 50px;
}
.point-of-sale .toolbar {
    position: sticky;
    top: -10px;
    z-index: 2;
}
.point-of-sale .header .icon-placeholder {
    width: 100px;
    height: 100px;
    margin-right: 20px;
}
.point-of-sale .header .icon-placeholder .md-icon {
    font-size: 100px;
    color: var(--primary);
}
.point-of-sale .header > .content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.point-of-sale .header .title {
    font-size: 30px;
    font-weight: 600;
}
.point-of-sale .header .description {
    font-size: 18px;
    color: #777;
    margin-top: auto;
    margin-bottom: 5px;
}
.point-of-sale .input-table {
    margin: 50px 0px;
}





.search-box {
    height: 100%;
    position: relative;
    width: 100%;
}
.search-box .searcher {
    width: 100%;
    height: 32px;
    border-radius: 6px;
    /* overflow: hidden; */
    /* box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px; */
    min-width: 264px;
}
.search-box .searcher:focus-within {
    /* box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(1 150 237 / 36%) 0px 0px 0px 4px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px; */
}
.search-box .searcher input {
    border: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    outline: none;
    font-size: 12px;
    border-radius: 6px;
    padding: 8px 12px;
    padding-right: 32px;
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}
.search-box .searcher input:focus{
	box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(1 150 237 / 36%) 0px 0px 0px 4px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}

.search-box .searcher .md-icon {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--secondary);
    pointer-events: none;
}

.search-results {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 1px 2px 5px 2px rgb(0 0 0 / 10%);
    z-index: 1;
}
.search-result {
    width: 100%;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
    background: #fafafa;
    cursor: pointer;
}
.search-result img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 6px;
    margin: 10px;
    border: 1px solid #ddd;
}
.search-result:hover {
    background: #eee;
}
.search-result .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eee;
    justify-content: center;
}
.search-result .content .title {
    font-size: 11px;
    font-weight: 500;
    color: #333;
}


.search-box .selection {
    box-sizing: border-box;
    font-size: 16px;
    display: flex;
    align-items: stretch;
    background: #eee;
    width: 100%;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
    min-width: 264px;
}
.search-box .selection .text {
    font-size: 12px;
    display: flex;
    align-items: center;
    color: var(--primary);
    flex: 1;
    padding: 8px 12px;
    padding-right: 32px;
}
.search-box .selection .md-icon {
    color: var(--primary);
    font-size: 16px;
    width: 16px;
}
.search-box .selection .icon-button {
    font-size: 12px;
    background: #eee;
    border-radius: 0px 10px 10px 0px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 32px;
    position: absolute;
    right: 0px;
}







.progresses-placeholder {
	border-radius: 8px;
	height: auto;
	display: flex;
	flex-direction: column;
}
.progresses {
	margin-top: 20px;
}
.progresses > .content {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0px;
}
.progresses > .content > .tabset {
	display: flex;
	align-items: center;
	padding: 12px 12px 0px 12px;
}
.progresses > .content > .tabset .prev-button, .progresses > .content > .tabset .next-button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    color: black;
}
.progresses > .content > .tabset .prev-button.disabled, .progresses > .content > .tabset .next-button.disabled {
    opacity: 0.3;
    cursor: initial;
}
.progresses > .content > .tabset .prev-button md-icon, .progresses > .content > .tabset .next-button md-icon {
    font-size: 17px;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    color: inherit;
    user-select: none;
}

.progresses > .content > .tabset .tabs .tab {
    user-select: none;
    font-size: 11px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    padding: 4px 8px;
    cursor: pointer;
    white-space: nowrap;
}
.progresses > .content > .tabset .tabs .tab.selected {
    font-weight: 600;
    position: relative;
}
.progresses > .content > .tabset .tabs .tab.selected:after {
	content: "";position: absolute;bottom: 0px;width: 100%;background: #3e3885;left: 0px;border-radius: 4px;height: 2px;
}
.progresses > .content > .tabset .tabs .tab:hover {
    background: #eee;
}
.progresses > .content > .tab-content {
    width: 100%;
    flex: 1;
    overflow: auto;
    padding: 0px 12px;
    margin-top: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.progresses .view-more-button {
    display: flex;
    align-items: center;
    color: #A7A9A6;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    margin: 12px auto;
}
.progresses .view-more-button .button-text {
    font-size: 11px;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
}
.progresses .view-more-button .button-icon {
    color: inherit;
    height: 16px;
    min-height: 16px;
    width: 16px;
    min-width: 16px;
    font-size: 16px;
}
.progresses .view-less-button {
    display: flex;
    align-items: center;
    color: #A7A9A6;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    margin: 12px auto;
}
.progresses .view-less-button .button-text {
    font-size: 11px;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
}
.progresses .view-less-button .button-icon {
    color: inherit;
    height: 16px;
    min-height: 16px;
    width: 16px;
    min-width: 16px;
    font-size: 16px;
}

.progresses .course-progress{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 18px;
}
.progresses .course-progress .progress-tracker{
	width: 100%;
}
.progresses .course-progress .info {
    display: flex;
    align-items: center;
}
.progresses .course-progress .info .name {
    font-size: 14px;
    font-weight: 600;
    color: #34609F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.progresses .course-progress .info .continue-button {
    display: flex;
    align-items: center;
    margin-left: 12px;
    color: #A7A9A6;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}
.progresses .course-progress .info .continue-button .button-text {
    font-size: 11px;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
}
.progresses .course-progress .info .continue-button .button-icon {
    color: inherit; 
    height: 16px;
    min-height: 16px;
    width:16px;
    min-width:16px;
    font-size:16px;
}


.home {
    flex: 1;
    background: rgb(247,247,247);
    overflow: auto;
    width: 100%;
    height: 100%;
}

.kpi-placeholder {
    width: 50%;
    box-sizing: border-box;
    overflow: hidden;
    height: 300px;
}
.kpi-placeholder:nth-child(2n+1) {
    padding-right: 10px;
}
.kpi {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: white;
    max-width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 250px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.kpi .header {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0px 12px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.kpi .header .title {
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
}
.kpi .content {
    width: 100%;
    flex: 1;
    overflow: auto;
    padding: 0px 12px;
    margin-top: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}



.sales-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 18px;
    position: relative;
}
.progress-tracker {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
.progress-tracker .rail {
    box-shadow: 0px 0px 3px inset rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 20px;
    background: #EBE9EB;
    border-radius: 4px;
    padding: 2px;
    box-sizing: border-box;
    position: relative;
}
.progress-tracker .fill {
    height: 100%;
    background: var(--primary);
    transition: 0.3s ease-in-out all;
    border-radius: 5px;
}
.progress-tracker .label {
    position: absolute;
    right: 8px;
    top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #a1a1a1;
}
.sales-track:first-child .label {
    color: white;
}
.sales-track .info {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0px;
    z-index: 1;
}
.sales-track .info .name {
    font-size: 12px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding: 3px 8px;
}



.inventory-placeholder {
    margin: 50px 0px;
    width: 100%;
    display: flex;
}

.home .inventory {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.home .inventory > .header {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0px 10px;
}

.home .inventory > .header .title {
    color: var(--primary);
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
}

.kpis {
    display: flex;
    width: 100%;
}

.home > .header {
    width: 100%;
    display: flex;
    padding-bottom: 20px;
}

.home > .header > .title {
    color: var(--primary);
}
.home > .content {
    width: 1024px;
    max-width: 100%;
    margin: 0 auto;
    padding: 50px 0px;
}