@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

[view_name="core/api"] .api_list{
			text-align:left;
		}

		[view_name="core/api"] .item{
			background-color: white;
			padding: 10px;
			margin-top: 20px;	
		}

		[view_name="core/api"] .content{
			border: dotted 1px gray;
			padding: 20px;
			margin:10px;
			display:none;
			white-space:pre;
		}		

		[view_name="core/api"] .label{
	    	color: var(--cl_sec3);
    		background: var(--background_primary);
    		border-radius:4px;
			padding: 10px;	
			display:inline-block;	
			margin-left:10px;
		}

		[view_name="core/api"] .hd{
			font-size: 20px;
			font-weight: bold;
			padding: 20px;	
			margin-top:20px;
			display:inline-block;
		}


[view_name="core/export"] .file_thumb{
			border:none;
			background:none;
			width:80px;
			height:170px;
			display:inline-block;
			padding:0;
			margin:20px;
		}

		[view_name="core/export"] .file_thumb [view_name="ui/svg"]{
			--reflect:1;
			cursor:pointer;
			display:inline-block;
			top:-25%;
		}

		[view_name="core/export"] .file_thumb:hover [view_name="ui/svg"]{
			transform:scale(1.15);
		}

[view_name="core/import"] .drop{
			padding: 60px;
			border: dashed 2px;
		}

		[view_name="core/import"] .step1{
		}	

		[view_name="core/import"] .collumns{
			white-space: nowrap;	
		}
		
		[view_name="core/import"] .field_icon [view_name="ui/svg"]{
			margin-left: 0;
		}

		[view_name="core/import"] .field_collumn{
			white-space: nowrap;
		}

		[view_name="core/import"] .field_name{
			font-weight: bold;
			font-size: medium;
			display: inline-block;
			white-space: normal;
			vertical-align: middle;
			border: 1px solid var(--cl_pri2);
			border-radius: 8px;
			padding: 5px;
			width: 49%;
			box-sizing: border-box;
			margin-bottom: 5px;
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;			
		}

		[view_name="core/import"] .field_model{
			display: inline-block;
			white-space: normal;
			vertical-align: middle;
			border: 1px solid var(--cl_pri2);
			border-radius: 8px;
			padding: 5px;
			width: 49%;
			box-sizing: border-box;
			height: 46px;
			margin-bottom: 5px;			
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
			margin-left: -1px;

		}		

		[view_name="core/import"] .field_drag{
			font-weight: bold;
			font-size: medium;
			display: inline-block;
			white-space: normal;
			vertical-align: middle;
			border: 1px solid var(--cl_pri2);
			border-radius: 8px;
			padding: 5px;
			width: 100%;
			height: 44px;
			line-height: 34px;
			cursor: move;
			margin-bottom: 5px;
			background: var(--cl_sec3);
			box-sizing: border-box;
			-webkit-touch-callout: none; 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-ms-user-select: none; 
			user-select: none;			
		}		

		[view_name="core/import"] .field_value{
			font-style: italic;
			font-weight: normal;
			font-size: small;
			white-space: normal;
		}

		[view_name="core/import"] .field_icon{
			display: inline-block;
			white-space: normal;
			vertical-align: middle;
			margin-left: 15px;
			margin-right: 15px;
		}

		[view_name="core/import"] .field_drop{
			height: 100%;
			padding: 5px;
			border: dotted 1px;
			box-sizing: border-box;
			line-height: 22px;
		}

		[view_name="core/import"] .lines{
			width: 66%;
			display: inline-block;
			vertical-align: top;
		}

		[view_name="core/import"] .fields{
			width: 33%;
			display: inline-block;
			vertical-align: top;
		}

		[view_name="core/import"] .field_model .field_drag{
			border: none;
			padding: 0;
			background: none;

		}

		[view_name="core/import"] .field_model .field_drag[dragging=true]{
			border: 1px solid var(--cl_pri2);
			padding: 5px;
			background: var(--cl_sec3);
		}

		[view_name="core/import"] .field_base{
			display: none;
		}

		[view_name="core/import"] .field_drag.field_base{
			border: 1px dashed var(--cl_pri3);
			color: var(--cl_pri3);

		}

		[view_name="core/import"] .coll{
			width: 33%;
			text-align: center;
			display: inline-block;
		}

		[view_name="core/import"] .bar{
			padding: 20px;
		}

		[view_name="core/import"] .progress_bar{
			width: 100%;
			height: 40px;
			border: 1px solid var(--cl_pri2);
			background: var(--cl_pri3);
		}
	
		[view_name="core/import"] .progress{
			width: 0%;
			height: 38px;
			background: var(--cl_sem1);
		}	

		[view_name="core/import"] .file_box{
			cursor:pointer;

			color: var(--cl_sec3);

			padding: var(--padding_box);

			border-radius: var(--border_radius_internal);

			/*DROP SHADOW*/
			-webkit-box-shadow: var(--shadow_box);
			-moz-box-shadow: var(--shadow_box);
			box-shadow: var(--shadow_box);

			/*BACK GRADIENT*/
			background: var(--background_box);

			/*EFFECT BACKGROUND BLUR*/
			--fx: var(--blur_map);

			margin-bottom:20px;
		}

[view_name="ui/administration"] .list{
			padding: 10px;
			border: 1px solid #666;
			border-radius: 6px;
			background-color: white;
			color: #333;
			text-align: left;
		}

		[view_name="ui/administration"] .item{
			padding: 5px;
			font-size: 18px;
		}

		[view_name="ui/administration"] .content{
			padding-left: 10px;
			margin-left: 10px;
			border-left: 1px dotted #999;
		}

		[view_name="ui/administration"] .module{

		}

[view_name="ui/button/primary"] button{
				color:var(--color_primary);
				border:var(--border_primary);
				border-radius:var(--radius_primary);
				background: var(--background_primary);
				box-shadow:var(--shadow_primary);

				cursor:pointer;
				width:100%;
				padding:12px;
				box-sizing:border-box;
				resize:vertical;
				
			}

			[view_name="ui/button/primary"] button:hover{
				box-shadow:var(--hover_shadow_primary,--shadow_primary);
				border:var(--hover_border_primary,--border_primary);
			}

[view_name="ui/button/secondary"] button{
				color:var(--color_secondary);
				border:var(--border_secondary);
				border-radius:var(--radius_secondary);
				background: var(--background_secondary);
				box-shadow:var(--shadow_secondary);

				cursor:pointer;
				width:100%;
				padding:12px;
				box-sizing:border-box;
				resize:vertical;
			}

			[view_name="ui/button/secondary"] button:hover{
				box-shadow:var(--hover_shadow_secondary,--shadow_secondary);
				border:var(--hover_border_secondary,--border_secondary);
			}

.card.filters{
			margin-left: 20px;
			vertical-align: top;
		}

		.card.filters .card-header{
			border-radius: 1rem;
		}

		.card.filters .card-body{
			position: absolute;
			background: #fff;
			z-index: 1;
			margin-top: -20px;
			border-radius: 0 0 1rem 1rem;
		}

		.counter-list{
			margin-left: 10px;
			margin-right: 10px;
		}

		.chev{
			float: right;
		}

[view_name="ui/component"] .header{
			margin-top:-10px;
			font:var(--semibold_font);
			font-size:x-large;
			color: var(--glow_color);
			text-shadow: var(--glow_text);
		}		

		[view_name="ui/component"]{
			border: var(--border_box);
			border-radius: var(--border_radius_box);
			display: inline-block;
			padding: 25px;

			/*DROP SHADOW*/
			-webkit-box-shadow: var(--shadow_box);
			-moz-box-shadow: var(--shadow_box);
			box-shadow: var(--shadow_box);

			/*BACK GRADIENT*/
			background: var(--background_box);

			/*EFFECT BACKGROUND BLUR*/
			/*--fx: var(--blur_map);*/
			backdrop-filter: blur(var(--back_blur));

		}		
		
		[view_name="ui/component"] .header [view_name = 'ui/svg']{
			--glow:var(--glow_tiny);
		}

		[view_name="ui/component"] .header [view_name = 'ui/svg']:hover{
			box-shadow:0 0 .75em;
			border-radius:50%;
			display:block;
			height:20px;
		}

		[view_name="ui/component"] .header .search{
			float: left;
			margin-top: 0px;
			color: black;
			width: 0;
		}

		[view_name="ui/component"] .header .search_content{
			position: relative;
			display: inline-block;
		}

		[view_name="ui/component"] .header .search [view_name = 'ui/svg']{
			position: absolute;
			top: 6px;
			right: 10px;
		}		

		[view_name="ui/component"] .header .close{
			float: right;
			margin-top: 12px;
			color: white;
			vertical-align: top;
			margin-left: 10px;
			cursor: pointer
		}

		[view_name="ui/component"] .header .config{
			float: right;
			margin-top: 12px;
			color: white;
			vertical-align: top;
			margin-left: 10px;
			cursor: pointer
		}

		[view_name="ui/component"] .header .external{
			float: right;
			margin-top: 12px;
			color: white;
			vertical-align: top;
			cursor: pointer
		}

		[view_name="ui/component"] .header .print{
			float: right;
			margin-top: 12px;
			color: white;
			vertical-align: top;
			cursor: pointer
		}				

		[view_name="ui/component"] .title{
			text-align: left;
			user-select:none;
			padding: 12px;
			padding-left: 0;
			font:var(--regular_font);
			font-size: 24px;
		}	

		[view_name="ui/component"] .solid{
			display:block;
			background:var(--background_internal);
			border:var(--border_internal);
			border-radius:var(--border_radius_internal);
			padding:var(--padding_internal);
			color:var(--cl_pri2);
		}	

		[view_name="ui/component"] .btn_back{
			max-width:200px;
			margin:auto;
			margin-top:20px;
		}

		[view_name="ui/component"] .btn_back [view_name="ui/svg"]{
			display:inline-block;
			margin-right:10px;
			vertical-align:middle;
		}

[view_name="ui/dataconfig"] .dc_menu_item{
			display:inline-block;
			padding:40px;
			cursor:pointer;
		}

		[view_name="ui/dataconfig"] .pg_view table{
			width:100%;
		}

table.dataview{
			border-radius: 4px;
			background: var(--cl_sec3);
			border-collapse: collapse;
			width:100%;
		}

		table.dataview td{
			border: none;
			border-bottom: 1px solid var(--cl_pri2);
			color: var(--cl_pri2);
			font: var(--regular_font);
		}

		table.dataview td.actions{
			padding-left:20px;
		}

		table.dataview td input, table.dataview td .input_label{
			border: none;
			color: var(--cl_pri2);
			font: var(--regular_font);
			text-align: center;
			font-weight: normal;
		}


		table.dataview td [view_name = 'ui/input'], 
		table.dataview td [view_name = 'ui/button/primary'],
		table.dataview th [view_name = 'ui/button/primary'] button,
		table.dataview td [view_name = 'ui/button/secondary']{
			margin: 0;
		}

		table.dataview td [view_name = 'ui/button/primary'],
		table.dataview td [view_name = 'ui/button/secondary']{
			margin-right: 15px;
		}

		table.dataview td [view_name = 'ui/button/primary'] button,
		table.dataview th [view_name = 'ui/button/primary'] button,
		table.dataview td [view_name = 'ui/button/secondary'] button{
			padding: 8px;
			line-height: 0;
		}

		table.dataview td .content-box [view_name = 'ui/button/primary'] button,
		table.dataview td .content-box [view_name = 'ui/button/secondary'] button{		
			height: 40px;
		}							

		table.dataview .dataview_head th{
			border: none;
			border-bottom: 1px solid var(--cl_pri2);
			color: var(--cl_sec1);
			font: var(--semibold_font);
			padding: 12px;
		}			


		.dataview_dragdrop{
			margin-bottom: -5px;
			display: block;
			cursor: move;
			-webkit-touch-callout: none; 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-ms-user-select: none; 
			user-select: none;
		}

		td.cell{
			display: table-cell;
		}

		.mobile [view_name = 'ui/dataview'] .dataview tr{
			display: block;
			padding-bottom: 15px;
			border-bottom: solid 1px;
			padding-top: 30px;
		}

		.mobile [view_name = 'ui/dataview'] [view_name = 'ui/input'] .label{
			display: block;
		} 

		.mobile [view_name = 'ui/dataview'] thead{
			display: none;
		} 				

		.mobile [view_name = 'ui/dataview'] table.dataview td{
			display: block;
			border: none;
			padding-bottom: 10px;
		}

		.import_box{
			max-width: 100%;
			margin: auto;
			padding: 20px;
			box-sizing: border-box;
		} 

		.export_box, .api_box, .webhook_box{
			width: 600px;
			max-width: 100%;
			margin: auto;
			padding: 20px;
			box-sizing: border-box;
		}

		.import_box span, .export_box span, .api_box span, .webhook_box span{
			font-weight: bold;
		}

		.import_box [view_name="ui/svg"], .export_box [view_name="ui/svg"], .api_box [view_name="ui/svg"], .webhook_box [view_name="ui/svg"]{
			margin-left: 20px;
			vertical-align: middle;
		}

		.export_box select{
			margin-left: 20px;
		}		

		.api_line{
			border: dashed 1px;
			padding: 10px;
		}

		.api_line span{
			font-weight: normal;
		}

		.api_check, .api_url{
			display: inline-block;
		}

		@media(max-width: 600px){
			.import_box [view_name="ui/svg"], .export_box [view_name="ui/svg"], .api_box [view_name="ui/svg"], .webhook_box [view_name="ui/svg"]{
				margin-left: 0;
				margin-top: 20px;
				display: block;
			}

			.export_box select{
				margin: auto;
				margin-top: 20px;
				display: block;
			}					
		}


		.widget_top{
			margin-bottom:10px;
		}

.dialog_backfilter{
			position:fixed;
			background: var(--back_filter);
			z-index:9;
			top:0;
			left:0;
			bottom:0;
			right:0;
		}

		.dialog_front{
			position:fixed;
			z-index:10;
			display:table;
			top:0;
			left:0;
			bottom:0;
			right:0;
			width: 100%;
   			height: 100%;
		}

		.dialog_box{
			display:table-cell;
			text-align:center;
			vertical-align:middle;
		}

		.dialog_msg{
			margin:20px;
			color: var(--glow_color);
			text-shadow: var(--glow_text);
			font:var(--regular_font);
		}

		@keyframes t1_flip {
			0% {transform: scale(0.01,0.01) rotate3d(-1, 1, 0, 90deg);}
			100% {transform: scale(1) rotate3d(-1, 1, 0, 0deg);}
		}

		@keyframes t1_flipout {
			0% {transform: scale(1) rotate3d(-1, 1, 0, 0deg);}
			100% {transform: scale(0.01,0.01) rotate3d(-1, 1, 0, 90deg);}
		}

		@keyframes t1_fadein {
			0% { opacity: 0; }
			100% { opacity: 1; } 
		}

		@keyframes t1_fadeout {
			0% { opacity: 1; } 
			100% { opacity: 0; }
		}

		.dialog_backfilter{
			animation:t1_fadein 0.7s linear both;
		}

		.dialog_box{
			animation:t1_flip 0.3s linear both;
		}

		.removed .dialog_backfilter{
			animation:t1_fadeout 0.7s linear both;
		}

		.removed .dialog_box{
			animation:t1_flipout 0.3s linear both;
		}

		.dialog_box .content input{
			margin-left: 15px;
		}

		.dialog_box .content .fields{
			display: inline-block;
			margin: auto;
			text-align: right;
		}

		.dialog_box .content .field{
			margin-top: 10px;
		}

		.notification_box{
			position: fixed;
			text-align: center;
			padding: 10px;
			top: 0;
			left: 0;
			right:  0;
			pointer-events: none;
			user-select: none;
			z-index: 9;
		}

		.notification{
			font-family: Helvetica, sans-serif;
			font-size: .9em;
			line-height: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 1ch 1.5ch;
			border-radius: .3ch;
			box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
			background: rgba(255,255,255,0.9);
			color: #333;
			opacity: 1;
  			transition: opacity 2s linear;
  			display: block;
  			width: fit-content;
  			margin: auto;
  			margin-bottom: 10px;
		}

		.notification.hide{
			opacity: 0;
			transition: opacity 2s linear;
		}

.dropdown{
			display: inline-block;
			cursor:pointer;
		}

		.dropdown-list{
			position: absolute;
			display: none;
			background: var(--cl_pri2);
			border-radius: 6px;

	 		color:var(--cl_sec3);
	        background:var(--background_box);
	        border-radius:var(--radius_box);
	        -webkit-box-shadow: var(--shadow_box);
	        -moz-box-shadow: var(--shadow_box);
	        box-shadow: var(--shadow_box);
	        /*--fx: var(--blur_map);*/
	        backdrop-filter: blur(var(--back_blur));
		}

		.dropdown:hover .dropdown-list{
			display: block;
		}

		.dropdown-item{
			position: relative;
			padding: 10px 15px;
			font: var(--regular_font);
			color: var(--cl_sec3);
			border-radius: 6px;
			min-width: 125px;
			padding-right:30px;
			transition: background 1s;
		}

		.dropdown-item:hover{
			background-color:var(--cl_menu_hover);
			transition: background 0s;
		}

		.dropdown-item img{
			vertical-align: middle;
		}

		.dropdown-label{
			border-radius: var(--border_radius_internal);

			/*DROP SHADOW*/
			-webkit-box-shadow: var(--shadow_box);
			-moz-box-shadow: var(--shadow_box);
			box-shadow: var(--shadow_box);

			/*BACK GRADIENT*/
			background: var(--background_box);

			/*EFFECT BACKGROUND BLUR*/
			/*--fx: var(--blur_map);*/
			backdrop-filter: blur(var(--back_blur));
		}

		.dropdown-item [view_name = 'ui/svg']{
			position: absolute;
			top: 50%;
			margin-top: -12px;
			right: 10px;
		}

		.dropdown-label .dropdown-item{
			text-align: center;
		}

		.dropdown-container{
			background-transparent;
			padding-top:10px;
		}

[view_name="ui/gallery"] .gallery{
			user-select: none;
			position:relative;
		}

		[view_name="ui/gallery"] .gallery_nav{
		    position: absolute;
		    left: 0;
		    bottom: 20px;
		    right: 0;
		    text-align:center;
		}

		[view_name="ui/gallery"] .gallery_nav_item{
			cursor:pointer;
			display:inline-block;
			width:20px;
			height:20px;
			border-radius:50%;
			background:var(--background_primary);
			margin:10px;
			border:2px solid transparent;

		}

		[view_name="ui/gallery"] .gallery_nav_item:hover,[view_name="ui/gallery"] .gallery_nav_item.active{
			border-color:var(--cl_sec3);
		}

		[view_name="ui/gallery"] .gallery_center{
			display:table;
			text-align:center;
			height:100%;
    		width: 100%			
		}

		[view_name="ui/gallery"] .gallery_list{
			white-space:nowrap;
			overflow:hidden;
			display:table-cell;
		}

		[view_name="ui/gallery"] .gallery_item{
			display:inline-block;
			width:100%;
		}

		[view_name="ui/gallery"] .gallery_item img{
			width:100%;
		}

		[view_name="ui/gallery"] .gallery_left,.gallery_right{
			display:table-cell;
			vertical-align:middle;
			color:#aaa;
			height:100%;

		}

		[view_name="ui/gallery"] .gallery_left:hover,.gallery_right:hover{
			color:#fff;
		}

		[view_name="ui/gallery"] .gallery_left:hover .gallery_hover,.gallery_right:hover .gallery_hover{
			background-color:rgba(0,0,0,0.2);
		}

		[view_name="ui/gallery"] .gallery_left .gallery_compound {
		    position: relative;
		    width: 1px;
		    cursor:pointer;
		    left:0;
		    height:100%;
		}

		[view_name="ui/gallery"] .gallery_right .gallery_compound {
		    position: relative;
		    width: 1px;
		    cursor:pointer;
		    right:90px;
		    height:100%;
		}

		[view_name="ui/gallery"] .gallery_hover{
			background-color:rgba(0,0,0,0);
		}

[view_name = 'ui/input'],[view_name = 'ui/button/primary'],[view_name = 'ui/button/secondary']{
			margin: 10px;
			display: block;
		}

		[view_name = 'ui/input'] view{
			display: block;
		}

		[view_name = 'ui/input'] .label{
			display: none;
		}

		[view_name = 'ui/input'] input, [view_name = 'ui/input'] select{
			background:var(--background_input);
			width:100%;
			padding:12px;
			box-sizing:border-box;
			resize:vertical;
		}

		[view_name = "ui/input"] input, [view_name = "ui/input"] select{
			border-radius: 4px;
			border: var(--border_input);
			padding: 10px;
		}

		.input_label{
			padding: 10px;
		}

		form input[type=checkbox]{
			width: 30px;
			margin-left: -30px;
		}

		form input[type=checkbox]::before {
		    display: block;
		    content: attr(placeholder);
		    margin-left: 30px;
		    line-height: 12px;
		}

		.input_label:hover{
			background-color: rgba(0,0,0,0.2);
		}

[view_name="ui/input/metric"] .input .unit{
				position: absolute;
				background-color: rgba(255,255,255,0.5);
				z-index: 2;
				text-align: left;
				display:none;
			}

			[view_name="ui/input/metric"] .input .unit .item{
				display: block;
				padding: 10px;
			}	 

			[view_name="ui/input/metric"] .unit .item:hover{
				background-color: rgba(0,0,0,0.7);
				color: white;
			}					

			[view_name="ui/input/metric"] .input{
				white-space: nowrap;
				position: relative;
			}

			[view_name="ui/input/metric"] .input div{
				display: inline-block;
			}			

			[view_name="ui/input/metric"] .input i{
				position: absolute;
				right: 0;
				padding: 10px;
				background: white;
			}

.ajust_autocomplete{
				position: relative;
				width: 0;
				height: 0;

			}

			.pos_autocomplete{
				position: absolute;
			}

			.autocomplete_item{
				padding: 5px;
			}

			.autocomplete_item:hover{
				background-color: #F0F0F0;
			}

			.autocomplete{
				position: fixed;
				border: 1px solid var(--cl_sec2);
				padding:10px;
				background-color: var(--cl_sec3);
			    box-sizing: border-box;

			}

			[view_name = 'ui/input'] .main_autocomplete [view_name = 'ui/button/primary']{
				display: none;!impotant
			}

			@media (max-width: 600px){
				.main_autocomplete.active .autocomplete{
					position: fixed;
					top: 30px;
					left: 0;
					right: 0;
					bottom: 30px;
					overflow: auto;
					z-index: 10;
				}

				.main_autocomplete.active input{
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					height: 30px;
					z-index: 10;
				}				
				
				[view_name = 'ui/input'] .main_autocomplete.active [view_name = 'ui/button/primary']{
					position: fixed;
					left: 0;
					right: 0;
					bottom: 0;
					height: 30px;
					display: block;
					margin-right: 0;
				}				
			}

[view_name="ui/input/email"] input{
				
			}

/*[view_name="ui/input/date"] input{
				display:flow-root;
			}*/

/*[view_name="ui/input/color"] input{
				display:flow-root;
			}*/

[view_name="ui/input/model"] .list{
				position: fixed;
				background-color: rgba(255,255,255,1);
				z-index: 2;
			}

			.list.inside_input{
				position: absolute;
				background-color: rgba(255,255,255,1);
				z-index: 2;
			}

			.list.inside_input .item{
				font-size: 12px;
				padding: 10px;
				text-align: left;
			}

			.list.inside_input .item:hover{
				background-color: rgba(0,0,0,0.7);
				color: white;
			}

			[view_name="ui/input/model"] .item{
				font-size: 12px;
				padding: 10px;
				text-align: left;
			}

			[view_name="ui/input/model"] .item:hover{
				background-color: rgba(0,0,0,0.7);
				color: white;
			}

			[view_name="ui/input/model"] .input{
				white-space: nowrap;
				position: relative;
			}

			[view_name="ui/input/model"] .input i{
				position: absolute;
				top: 0;
				right: 0;
				padding: 10px;
				background: white;
			}

			[view_name="ui/input/model"] .view{
				white-space: nowrap;
				position: relative;			
			}

			[view_name="ui/input/model"] .view .content{
				white-space: normal;
				display: inline-block;
				min-width: 150px;		
			}

			[view_name="ui/input/model"] .view .check{
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -11px;
				background: white;	
				display: inline-block		
			
			}

			[view_name="ui/input/model"] .view .list{
				padding: 15px;
				text-align: left;
				display:none;
			}

[view_name="ui/input/permission_actions"] .active button{
				background:#006000;
			}

[view_name="ui/input/subitems"] .btn-chevron{
				white-space: nowrap;
			}

			[view_name="ui/input/subitems"] .btn-chevron view{
				display: inline-block;
			}

			[view_name="ui/input/subitems"] [view_name="core/language"]{
				vertical-align: middle;
			    font-size: 15px;
			    margin-top: -10px;
			    margin-right: 10px;
			}

[view_name="ui/input/upload"] .upload_progress_bar{
				width: 100%;
				height: 40px;
				border: 1px solid black;
			}

			[view_name="ui/input/upload"] .upload_progress_bar_internal{
				height: 38px;
				width: 1px;
				background-color: green;
			}
			[view_name="ui/input/upload"] .upload_label{
				height: 40px;
			}

			[view_name="ui/input/upload"] .upload_hover{
				display:none;
			}

			[view_name="ui/input/upload"] .main_upload_img:hover .upload_hover{
				display:block;
			}

			.upload_view svg, .upload_do svg{
				padding:5px;
			}

[view_name="ui/input/user"] .content{
				white-space:nowrap;
			}

			[view_name="ui/input/user"] .content view{
				display:inline-block;
				vertical-align:middle;
			}

			[view_name="ui/input/user"] .content-box{
				background: var(--background_content);
				border: var(--border_content);
				border-radius: var(--border_radius_content);
				color: var(--color_content);
				padding: var(--padding_content);
			} 

			[view_name="ui/input/user"] .float-box{
				position: absolute;
				font-size: 12px;
				display: none;
			}

			[view_name="ui/input/user"] .thumb{
				width:25px;
				height:25px;
				border-radius:50%;
				vertical-align:middle;
				margin-left:10px;
			}

			[view_name="ui/input/user"] .content-box{
				text-align:left;
				font-size:15px;
			}

			[view_name="ui/input/user"] .content-box b{
				display:inline-block;
				width:200px;
			}
[view_name = 'ui/input/aggregation'] .agg_content{
				color: var(--cl_pri2);
			}

[view_name = 'ui/input/aggregation'] .agg_content{
				color: var(--cl_pri2);
			}

[view_name="ui/input/choice"] .choice_item{
				display: inline-block;
				margin: 10px;
				cursor:pointer;
				font-weight: normal;
				padding: 5px;
				border-radius: 4px;
				border: 1px solid rgba(0,0,0,0);
			}

			[view_name="ui/input/choice"] .choice_item::before{
				padding-right: 5px;
				content: "\2717";
			}

			[view_name="ui/input/choice"] .choice_item.selected{
				border: 1px solid rgba(0,0,0,0.3);
				background-color: rgba(0,0,0,0.05);
			}

			[view_name="ui/input/choice"] .choice_item.selected::before{
				content: "\2713";
			}

[view_name="ui/input/address"] .list{
				position: fixed;
				background-color: rgba(255,255,255,1);
				z-index: 2;
			}
			[view_name="ui/input/address"] .item{
				font-size: 12px;
				padding: 10px;
				text-align: left;
			}

			[view_name="ui/input/address"] .item:hover{
				background-color: rgba(0,0,0,0.7);
				color: white;
			}

			[view_name="ui/input/address"] .input{
				white-space: nowrap;
				position: relative;
			}

			[view_name="ui/input/address"] .input i{
				position: absolute;
				right: 0;
				padding: 10px;
				background: white;
			}

			[view_name="ui/input/address"] .view{
				white-space: nowrap;
				position: relative;			
			}

			[view_name="ui/input/address"] .view .content{
				white-space: normal;
				display: inline-block;		
			}

			[view_name="ui/input/address"] .view .mark{
				position: absolute;
				right: 0;
				padding: 5px 10px;
				top: 50%;
				margin-top: -18px;
				background: white;	
				display: inline-block		
			
			}

			[view_name="ui/input/address"] .view .list{
				padding: 15px;
				text-align: left;
				display:none;
			} 

			[view_name="ui/input/address"] .view:hover .list{
				display: block;
			}

[view_name="ui/input/ocr"] .sticon{
				display: inline-block;
			}

			[view_name="ui/input/ocr"] .content-box{
				background: var(--background_content);
				border: var(--border_content);
				border-radius: var(--border_radius_content);
				color: var(--color_content);
				padding: var(--padding_content);
			} 

			[view_name="ui/input/ocr"] .float-box{
				position: absolute;
				font-size: 12px;
				display: none;
			}

			[view_name="ui/input/ocr"] .sticon:hover .float-box{
				display: block;
			}

			[view_name="ui/input/ocr"] .hover{
				display: none;
				position: absolute;
				text-align: left;
			}

			[view_name="ui/input/ocr"] .hover div{
				white-space: nowrap;
			}			


			[view_name="ui/input/ocr"] .hover b{
				display: inline-block;
				width: 200px;
			}

			[view_name="ui/input/ocr"] .iconEdit{
				float: right;
			}

table.var_tbl{
				display: table;
				width: 100%;
			}

			.var_row{
				display: table-row;
			}

			table.dataview td.var_cell{
				display: table-cell;
				border:1px solid rgba(0,0,0,0.125);
				padding:4px;
				text-align: center;
			}

			.var_btn{
				width:18px;
				height:18px;
				line-height: 18px;
				border-radius: 50%;
				text-align: center;
				border:1px solid rgba(0,0,0,0.125);
				cursor:pointer;
				display: inline-block;
			}

[view_name="ui/input/textarea"] .textarea{
				display: none;
				position: relative;
				z-index: 1;
			}

			[view_name="ui/input/textarea"] .textarea textarea{
			    font-size: 16px;
				position: absolute;
				top:0;
				left:0;
			    height: 300px;
			    width: 200px;
			    padding: 12px;
			    box-sizing: border-box;
			}

[view_name="ui/input/tablecode"] .textarea{
				display: none;
				position: relative;
				z-index: 1;
			}

			[view_name="ui/input/tablecode"] .textarea textarea{
			    font-size: 16px;
				position: absolute;
				top:0;
				left:0;
			    height: 300px;
			    width: 200px;
			    padding: 12px;
			    box-sizing: border-box;
			}

[view_name="ui/input/richtext"] .textarea{
				display: none;
				position: relative;
				z-index: 1;
			}

			.hicheditorbox{
				width: CALC(100% - 40px);
				min-height: 400px;
				position:fixed;
				top:20px;
				left:20px;
				bottom:20px;
				right:20px;
				z-index: 992;
				display: none;
				background-color: white;
			}

			.hicheditorback{
				position:fixed;
				top:0px;
				left:0px;
				bottom:0px;
				right:0px;
				z-index: 991;
				display: none;
				background-color: rgba(0,0,0,0.9);
			}

			.ql-container{
				height:CALC(100% - 40px)!important;
			}

[view_name="ui/input/editor"] .textarea{
				display: none;
				position: relative;
				z-index: 1;
			}

			[view_name="ui/input/editor"] .textarea textarea{
			    font-size: 16px;
				position: absolute;
				top:0;
				left:0;
			    height: 300px;
			    width: 200px;
			    padding: 12px;
			    box-sizing: border-box;
			}

[view_name="ui/input/rate"] [view_name = 'ui/svg'] {
			    display: inline-block;
			}

[view_name="ui/svg"]{
			display:inline-block;
		}

[view_name="ui/thumb"]{
			width: var(--thumb_size);
			height: var(--thumb_size);
			display: inline-block;
		}

		[view_name="ui/thumb"] img{
			width: 100%;
			height: 100%;
			border-radius: var(--thumb_radius);
			text-decoration: none;
			box-sizing: border-box;
		}

		.selected > [view_name="ui/thumb"] img{
			border: var(--thumb_selected);
		}

/* START TOOLTIP STYLES */
		[tooltip] {
		  position: relative; /* opinion 1 */
		}

		/* Applies to all tooltips */
		[tooltip]::before,
		[tooltip]::after {
		  text-transform: none; /* opinion 2 */
		  font-size: .9em; /* opinion 3 */
		  line-height: 1;
		  user-select: none;
		  pointer-events: none;
		  position: absolute;
		  
		}
		[tooltip]::before {
		  content: '';
		  border: 5px solid transparent; /* opinion 4 */
		  z-index: 1001; /* absurdity 1 */
		}
		[tooltip]::after {
		  content: attr(tooltip); /* magic! */
		  
		  /* most of the rest of this is opinion */
		  font-family: Helvetica, sans-serif;
		  text-align: center;
		  
		  /* 
		    Let the content set the size of the tooltips 
		    but this will also keep them from being obnoxious
		    */
		  min-width: 3em;
		  max-width: 21em;
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  padding: 1ch 1.5ch;
		  border-radius: .3ch;
		  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
		  background: #333;
		  color: #fff;
		  z-index: 1000; /* absurdity 2 */
		}

		/* Make the tooltips respond to hover */
		[tooltip]:hover::before,
		[tooltip]:hover::after {
		  display: block;
		}

		/* don't show empty tooltips */
		[tooltip='']::before,
		[tooltip='']::after {
		  display: block !important;
		}

		/* FLOW: UP */
		[tooltip]:not([flow])::before,
		[tooltip][flow^="up"]::before {
		  bottom: 100%;
		  border-bottom-width: 0;
		  border-top-color: #333;
		}
		[tooltip]:not([flow])::after,
		[tooltip][flow^="up"]::after {
		  bottom: calc(100% + 5px);
		}
		[tooltip]:not([flow])::before,
		[tooltip]:not([flow])::after,
		[tooltip][flow^="up"]::before,
		[tooltip][flow^="up"]::after {
		  left: 50%;
		  transform: translate(-50%, -.5em);
		}

		/* FLOW: DOWN */
		[tooltip][flow^="down"]::before {
		  top: 100%;
		  border-top-width: 0;
		  border-bottom-color: #333;
		}
		[tooltip][flow^="down"]::after {
		  top: calc(100% + 5px);
		}
		[tooltip][flow^="down"]::before,
		[tooltip][flow^="down"]::after {
		  left: 50%;
		  transform: translate(-50%, .5em);
		}

		/* FLOW: LEFT */
		[tooltip][flow^="left"]::before {
		  top: 50%;
		  border-right-width: 0;
		  border-left-color: #333;
		  left: calc(0em - 5px);
		  transform: translate(-.5em, -50%);
		}
		[tooltip][flow^="left"]::after {
		  top: 50%;
		  right: calc(100% + 5px);
		  transform: translate(-.5em, -50%);
		}

		/* FLOW: RIGHT */
		[tooltip][flow^="right"]::before {
		  top: 50%;
		  border-left-width: 0;
		  border-right-color: #333;
		  right: calc(0em - 5px);
		  transform: translate(.5em, -50%);
		}
		[tooltip][flow^="right"]::after {
		  top: 50%;
		  left: calc(100% + 5px);
		  transform: translate(.5em, -50%);
		}

		[tooltip][flow="top"]{ bottom: -6px;}
		/*[tooltip][flow="left"]{ right: -6px;}
		[tooltip][flow="right"]{ left: -6px;}*/
		[tooltip][flow="down"]{ top: -6px;}		

		/* KEYFRAMES */
		@keyframes tooltips-vert {
		  to {
		    opacity: .9;
		    transform: translate(-50%, 0);
		  }
		}

		@keyframes tooltips-horz {
		  to {
		    opacity: .9;
		    transform: translate(0, -50%);
		  }
		}

		[tooltip][success]::after{
			background-color: green;
		}

		[tooltip][success][flow^="top"]::before{
			border-top-color: green;
		}

		[tooltip][success][flow^="down"]::before{
			border-botton-color: green;
		}

		[tooltip][success][flow^="left"]::before{
			border-left-color: green;
		}

		[tooltip][success][flow^="right"]::before{
			border-right-color: green;
		}				

		/* FX All The Things  
		[tooltip]:not([flow]):hover::before,
		[tooltip]:not([flow]):hover::after,
		[tooltip][flow^="up"]:hover::before,
		[tooltip][flow^="up"]:hover::after,
		[tooltip][flow^="down"]:hover::before,
		[tooltip][flow^="down"]:hover::after {
		  animation: tooltips-vert 300ms ease-out forwards;
		}

		[tooltip][flow^="left"]:hover::before,
		[tooltip][flow^="left"]:hover::after,
		[tooltip][flow^="right"]:hover::before,
		[tooltip][flow^="right"]:hover::after {
		  animation: tooltips-horz 300ms ease-out forwards;
		}
		*/



[view_name="ui/widget"]{
			display:inline-block;
			max-width:100%;
		}

		.widget{
			/*padding: 5px;*/
			box-sizing: border-box;
			display: table;
		}

		.widget_dragdrop{
			position: absolute;
			cursor: move;
			-webkit-touch-callout: none; 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-ms-user-select: none; 
			user-select: none;
			z-index:1;
			color:white;
		}

		.widget_resize{
			position: absolute;
			cursor: move;
			-webkit-touch-callout: none; 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-ms-user-select: none; 
			user-select: none;
			pointer-events: none;
			display: none;
			border: 1px dotted gray;
			z-index: 10;
			color:var(--cl_sec3);
		}

		.widget_resize_item{
			position: absolute;
			width: 7px;
			height: 7px;
			background-color:var(--cl_sec3);
			pointer-events: all;
		}

		.widget_resize_item.rs0{ top:   -3px; left: -3px; cursor: nwse-resize;}
		.widget_resize_item.rs1{ top:   -3px; right:-3px; cursor: nesw-resize;}		
		.widget_resize_item.rs2{ bottom:-3px; left: -3px; cursor: nesw-resize;}		
		.widget_resize_item.rs3{ bottom:-3px; right:-3px; cursor: nwse-resize;}		
		.widget_resize_item.rs4{ top:-3px;    left: CALC(50% - 3px); cursor: ns-resize;}		
		.widget_resize_item.rs5{ top:CALC(50% - 3px); left:-3px; cursor: ew-resize;}		
		.widget_resize_item.rs6{ top:CALC(50% - 3px); right:-3px; cursor: ew-resize;}		
		.widget_resize_item.rs7{ bottom:-3px; left:CALC(50% - 3px); cursor: ns-resize;}		

		[view_name="ui/widget"] .widget_dragdrop{
			display: none;
		}

		[view_name="ui/widget"].editing:hover .widget_dragdrop{
			display: block;
		}

		[view_name="ui/widget"].editing:hover .widget_resize{
			display: block;
		}

		.onresize [view_name="ui/widget"]:hover .widget_resize{
			display: none;
		}

		.onresize [view_name="ui/widget"] .widget_resize.resizing{
			display: block;
		}



		.widget_content{
			border-radius: var(--border_radius_internal);

			display: table-cell;
			padding: 5px;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			color:var(--cl_sec3);
			vertical-align: middle;
			text-align: center;

			/*DROP SHADOW*/
			-webkit-box-shadow: var(--shadow_box);
			-moz-box-shadow: var(--shadow_box);
			box-shadow: var(--shadow_box);

			/*BACK GRADIENT*/
			background: var(--background_box);

			/*EFFECT BACKGROUND BLUR*/
			/*--fx: var(--blur_map);*/
			backdrop-filter: blur(var(--back_blur));

		}



		.widget_menu{
			color:var(--cl_sec3);
			position:absolute;
			right:0;
			padding:10px;
			z-index:1;
		}

		[view_name="ui/widget"] .widget_menu_itens{
			border-radius:6px;
			background:var(--cl_pri2);
			position:absolute;
			z-index:11;
			cursor:pointer;

	        color:var(--cl_sec3);
	        background:var(--background_box);
	        border-radius:var(--radius_box);
	        -webkit-box-shadow: var(--shadow_box);
	        -moz-box-shadow: var(--shadow_box);
	        box-shadow: var(--shadow_box);
	        /*--fx: var(--blur_map);*/
	        backdrop-filter: blur(var(--back_blur));
		}

		[view_name="ui/widget"] .widget_menu_iten{
			border-radius:6px;
			display:block;
			white-space:nowrap;
			padding:10px 15px;
			transition: background 1s;
		}


		[view_name="ui/widget"] .widget_menu_iten:hover{
			background-color:var(--cl_menu_hover);
			transition: background 0s;
		}

		[view_name="ui/widget"] .widget_menu_iten [view_name="ui/svg"]{
			display:inline-block;
			margin-right:10px;
			vertical-align:middle;
		}			

		[view_name="ui/widget"] .widget_menu_label{
			display:inline-block;
			vertical-align:middle;
		}			

		[view_name="ui/widget"] .widget_content>view{
			display:block;
			padding:10px;
			margin-top:-10px;
		}

		[view_name="ui/widget"] .widget_content>view:first-child{
			margin-top:0;
		}

[view_name="ui/widget/label"]{
				cursor:pointer;
			}

[view_name="ui/widget/restore"] .restore{
		float:right;
	}

[view_name="ui/widget/search"] .search{
				margin-top: 0px;
				color: black;
				position: relative;
				display: inline-block;
			}

			[view_name="ui/widget/search"] .search [view_name = 'ui/svg']{
				position: absolute;
				top: 6px;
				right: 10px;
			}	

			[view_name="ui/widget/search"] .search input{
				width: 100%;
				box-sizing:border-box;
			}

.logo{
			text-align: center;
			margin-bottom:40px;
			margin-top:20px;
		}

		.logo img{
			max-height: 200px;
			max-width: 90vw;
		}

		form input[type=checkbox]::before{
			width:max-content;
		}

		form input[type=checkbox]{
			margin-left:0;
		}

 


			.lst{
				clear:both;
				margin-top:20px;
				padding:20px;
				border:1px solid #67748e;
				border-radius: 10px;
			}

			.lst_label{
				font-weight: bold;
			}

			.lst_body{

			}

			.lst_edit{
				float:right;
				margin-top:-18px;
			}

			.lst_sel{
				user-select: none;
				text-align: left;
				padding-left:10px;
				padding-right:10px;
				border:1px solid transparent;
			}

			.lst_sel.lst_act{
				background-color: rgba(0,0,0,0.5);
				color:white;
			}

			.lst_sel.lst_top{
				border-top:1px solid #67748e;
			}

			.lst_sel.lst_end{
				border-bottom:1px solid #67748e;
			}

			.lst_sel.lst_mid,.lst_sel.lst_top,.lst_sel.lst_end{
				border-left:1px solid #67748e;
				border-rihgt:1px solid #67748e;
			}

			.lst_item{
				display: inline-block;
				border-radius: 5px;
				border-bottom:1px solid #67748e;	
				padding-left:5px;
				padding-right:5px;
				margin-right:5px;
			}

			.lst_con{
				color:white;
				background-color: rgba(0, 255, 0, .6);
			}

			.lst_ext{
				color:white;
				background-color: rgba(255, 0, 0, .6);
			}

			.list_title{
				font-weight: bold;
				font-size: 20px;
			}

			.list_dg2 [view_name="ui/button/primary"] button{
				margin-bottom:0;
			}

			.sidenav {
				z-index: 1;
			}

			.tiny_btn{
				margin:0;
			}

			[view_name="ui/button/primary"].tiny_btn button{
				margin-bottom:0;
				padding:6px;
				width:40px;
			}

			[view_name="ui/button/primary"].tiny_btn.lb button{
				width:auto;
			}

			[view_name="ui/button/primary"].tiny_btn.full button{
				width:100%;
			}

			.lst_gpr::after{
				float:right;
				content:"⌄";
				width: 27px;
				border-radius: 50%;
				cursor: pointer;
				font-size: 21px;
				clear: both;
    			height: 27px;
    			line-height: 12px;
			}

			.lst_ct{
				float:right;
				font-size: 12px;
				border-radius: 50%;
				background-color: #CDD;
				color:#fff;
				margin-top: 4px;
    			width: 18px;
			}

			.lst_gpr:hover::after{
				color:red;
			}

			.lst_subs{
				padding-left:25px;
				display: none;
			}

			.tbtrrow .lb button{
				height: 40px;
			}

			[view_name="ui/button/primary"].btn-all button{
				font-size: 8px;
				margin-top:7px;
				margin-right:10px;
				width:55px;
			}

		

.gemst{
				position: absolute;
				z-index:1;
				box-shadow:rgba(0, 0, 0, 0.2) 3px 3px 3px;
				border:1px solid rgb(204, 204, 204);
				padding:10px;
				background-color: white;
				display: none;
			}

			td.user_item_sel{
				cursor: pointer;
			}

			td.user_item_sel_active{
				background-color: rgba(0,0,0,0.6);
				color:white;
			}

			.label-float{
				border:1px solid #ccc;
				padding:5px;
				position: absolute;
				background-image:linear-gradient(310deg, #141727 0%, #3A416F 100%);
				color:white;
				z-index: 10;
				border-radius: 0.5rem;
			}

			.label-main{

			}

			.card-mode{
				width: 500px;
				transition: 1s;
				position: relative;
				z-index: 1;
			}		

			.card-mode .card-filter{
				transition: 1s;
			}

			.card-mode .card-vendor{
				transition: 1s;
			}

			.card-mode .card-filter .card-header span{
				width:100%;
				display: block;
				overflow: hidden;
				transition: 1s;
			}

			.card-mode .card-body{
				transition: 1s;
				width: 500px;
			}

			.card-mode .card-body div{
				transition: 1s;
			}

			.card-mode.sider{
				width: 78px;
			}

			.card-mode.sider .card-filter{
				width: 76px;
				overflow: hidden;
			}

			.card-mode.sider .card-vendor{
				width: 76px;
				overflow: hidden;
			}

			.card-mode.hide-filter .card-filter .card-header{
				padding-bottom: 0;
			}

			.card-mode.sider .card-filter .card-header span{
				width: 0;
				height: 30px;
			}

			.card-mode.hide-filter .card-filter .card-body{
				overflow: hidden;
				height: 0;
			}

			.card-mode.hide-filter .card-filter .card-body div{
				opacity: 0;
			}

			.card-mode.sider:hover .card-filter{
				width: 500px;
			}

			.card-mode.hide-filter:hover .card-filter .card-header{
				padding-bottom: 1.5rem;
			}

			.card-mode.sider:hover .card-filter .card-header span{
				width:100%;
			}

			.card-mode.sider:hover .card-vendor{
				width: 500px;
			}

.btn-sub-menu{
				position: absolute;
				margin-top:-80px;
				margin-left:-50px;
				display: none;
			}
			.btn-sub-menu-item{
				padding:5px 10px;
				border:1px solid #ccc;
				cursor: pointer;
				margin-bottom:-1px;
				background: white;
			}

			.btn-sub-menu-item:hover{
				background-color:#f0f8ff;
			}

			.btn-tiny:hover .btn-sub-menu{
				display: block;
			}

			.table-hover tr:hover td{
				background-color:#f0f8ff;
			}

[view_name="template_soft_ui/cart/qtd"] .qtd_row{
	white-space: nowrap;
}

[view_name="template_soft_ui/cart/qtd"] .qtd_btn,[view_name="template_soft_ui/cart/qtd"] .qtd_amount{
	display: inline-block;
	vertical-align: middle
}

[view_name="template_soft_ui/cart/qtd"] .qtd_btn{
	border-radius: 50%;
	width: 15px;
	height: 15px;
	line-height: 15px;
	font-size: 15px;
	box-shadow: 2px 2px 8px 0 rgb(0 0 0 / 15%);
	cursor: pointer;
	margin: 8px;
}

[view_name="template_soft_ui/login"] h1{
			color: var(--cl_pri2);
			font: var(--title_font);
		}

		[view_name="template_soft_ui/login"] a{
			color: var(--cl_pri2);
		}

		[view_name="template_soft_ui/login"] [view_name="core/language"]{
			color: var(--cl_pri2);
		}

.short-menu .navbar-vertical.navbar-expand-xs:hover

.navbar-main .menu_btn{
	margin-right: 15px;
	cursor: pointer;
	display: none;
}

@media only screen and (min-width: 800px) {
	.has-menu .main-content{
		margin-left: 250px;
	}
}

@media only screen and (max-width: 799px) {
	.sidenav.navbar{
		background-color: white;
		margin: 0!important;
		padding: 1rem;
		border-radius: 0;
		display: none;
	}

	.has-menu .navbar-main .menu_btn{
		display: inline-block;
	}

	.active-menu .sidenav.navbar{
		display: block;
	}
}


.short-menu .sidenav{
	width:62px;
	z-index: 2;
}

.short-menu .navbar-vertical.navbar-expand-xs .navbar-nav .nav-item{
	width: 72px;
	overflow: hidden;
}

.short-menu .navbar-vertical.navbar-expand-xs .navbar-nav .nav-item i{
	margin-right: 15px;
}

.short-menu .main-content{
	margin-left:60px;
}

.short-menu .navbar-vertical.navbar-expand-xs:hover{
	width: 250px;
}

.short-menu .navbar-vertical.navbar-expand-xs:hover .navbar-nav{
	background-color: #f3f3f8;
	border-radius: .5rem;
	box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
}

.short-menu .navbar-vertical.navbar-expand-xs:hover .navbar-nav .nav-item{
	width: 250px;
}

.short-menu .navbar-vertical.navbar-expand-xs:hover .navbar-nav.nav-item i{
	margin-right: 0;
}

.short-menu .navbar-vertical.navbar-expand-xs:hover{
	overflow: visible!important;
}

.short-menu .navbar-vertical.navbar-expand-xs:hover .navbar-collapse{
	overflow: visible!important;
}

.short-menu .navbar-vertical.navbar-expand-xs .navbar-brand{
	padding: 0;
}

.short-menu .navbar-vertical.navbar-expand-xs .sidenav-header{
	width: 72px;
}

[view_name="template_soft_ui/recoverpassword"] h1{
			color: var(--cl_pri2);
			font: var(--title_font);
		}

		[view_name="template_soft_ui/recoverpassword"] a{
			color: var(--cl_pri2);
		}

		[view_name="template_soft_ui/recoverpassword"] [view_name="core/language"]{
			color: var(--cl_pri2);
		}

[view_name="template_soft_ui/resetpassword"] h1{
			color: var(--cl_pri2);
			font: var(--title_font);
		}

		[view_name="template_soft_ui/resetpassword"] a{
			color: var(--cl_pri2);
		}

		[view_name="template_soft_ui/resetpassword"] [view_name="core/language"]{
			color: var(--cl_pri2);
		}

::-webkit-scrollbar {
		    width: 10px;
		    height: 10px;
		}
		 
		::-webkit-scrollbar-track {
		    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2); 
		    border-radius: 5px;
		}
		 
		::-webkit-scrollbar-thumb {
		    border-radius: 5px;
		    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,100,0.4); */
		    background-color: #67748e;
		}

		html,body{
			height: 100%;
			background-color: #f3f3f8!important;
		}

		.main-content{
			margin-top: 0!important;
		}

		.navbar-nav.session-in .nav-item:hover .dropdown-menu{
			opacity: 1;
			pointer-events: all;
			top: -20px;
		}

		.dataview_body tr:last-child{
			border-bottom: none;
		}

		.dataview_foot tr:last-child{
			border-bottom: none;
		}

		.pages{
			.margin-left: -24px;
		}

		div.table{
			overflow: auto;
    		max-width: CALC(100vw - 60px);
    		max-height: CALC(100vh - 300px);
    		display: block;
    		padding-bottom: 40px;
		}

		@media only screen and (min-width: 800px) {
			div.table{
				max-width: CALC(100vw - 340px);
			}
		}

		div.table table.dataview{
			/*margin-bottom: 10px;*/
		}

		body{

			--cl_sec2: #d2d6da;
			--cl_sec3: #495057;

			/*INPUT*/
			--border_input:1px solid var(--cl_sec2);
			--radius_input:0.5rem;
			--color_input:var(--cl_sec3);

			--back_filter: rgba(0,0,0,0.1);

		}

		[view_name = "ui/input"] label, [view_name = "ui/input"] input, [view_name = "ui/input"] select{
			width: 100%;
		}

		.table [view_name = "ui/input"] input,.table [view_name = "ui/input"] select{
			min-width:initial;
		}

		[view_name="ui/button/primary"] button:hover{
		   box-shadow: 0 3px 5px -1px rgb(0 0 0 / 9%), 0 2px 3px -1px rgb(0 0 0 / 7%);
		   transform: scale(1.02);
		   border: 1px solid transparent;
		}

		[view_name="ui/button/primary"] button {

			display: inline-block;
			font-weight: 700;
			line-height: 1.4;
			color: #67748e;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			user-select: none;
			background-color: transparent;
			border: 1px solid transparent;
			padding: 0.75rem 1.5rem;
			font-size: 0.75rem;
			border-radius: 0.5rem;
			transition: all 0.15s ease-in;
			transform: scale(1.001);

			margin-bottom: 1rem;
			letter-spacing: -0.025rem;
			text-transform: uppercase;
			box-shadow: 0 4px 7px -1px rgb(0 0 0 / 11%), 0 2px 4px -1px rgb(0 0 0 / 7%);
			background-size: 150%;
			background-position-x: 25%;

			color:#fff;

			background-image: linear-gradient(310deg, #141727 0%, #3A416F 100%);

		}


		[view_name="ui/button/secondary"] button:hover{
		   box-shadow: 0 3px 5px -1px rgb(0 0 0 / 9%), 0 2px 3px -1px rgb(0 0 0 / 7%);
		   transform: scale(1.02);
		   border: 1px solid transparent;
		}

		[view_name="ui/button/secondary"] button {

			display: inline-block;
			font-weight: 700;
			line-height: 1.4;
			color: #67748e;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			user-select: none;
			background-color: transparent;
			border: 1px solid transparent;
			padding: 0.75rem 1.5rem;
			font-size: 0.75rem;
			border-radius: 0.5rem;
			transition: all 0.15s ease-in;
			transform: scale(1.001);

			margin-bottom: 1rem;
			letter-spacing: -0.025rem;
			text-transform: uppercase;
			box-shadow: 0 4px 7px -1px rgb(0 0 0 / 11%), 0 2px 4px -1px rgb(0 0 0 / 7%);
			background-size: 150%;
			background-position-x: 25%;

			background-image: linear-gradient(310deg, #ffffff 0%, #fefefe 100%);

		}

		.v-center-out{
			display:table;
			height:100%;
			width:100%;
		}

		.v-center-in{
			display:table-cell;
			vertical-align:middle;
			text-align: center;
		}

		table.dataview {
			min-width: 0;
			word-wrap: break-word;
			background-color: #fff;
			background-clip: border-box;
			border: 0 solid rgba(0, 0, 0, 0.125);
			border-radius: 1rem;
			box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
		}


	table.dataview td [view_name = 'ui/button/primary'] button, table.dataview td [view_name = 'ui/button/secondary'] button{
		margin-top: -2px;
    	margin-bottom: 0px;
    }

    table.dataview td label{
    	width: 100%;
    }

    .dialog_box [view_name='ui/component']{
		background-color: #fff;
		background-clip: border-box;
		border: 0 solid rgba(0, 0, 0, 0.125);
		border-radius: 1rem;
		box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
    }

	.main-content{
		z-index:1;
	}

	.nav-item{
		border-radius: 1rem;
		cursor:pointer;
	}

	.nav-item.active{
		background-color:white;
		box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
	}

	.card.blur{
	    backdrop-filter: saturate(100%) blur(4px);
	    background:transparent!important;
	}

	.no-menu [view_name="template_soft_ui/menu"]{
		display: none;
	}

	.no-menu .main-content{
		margin-left: 24px!important;
	}

	.no-header .navbar-main{
		display: none;
	}

	.no-header .main-content .container-fluid.py-4{
		max-height: 100vh;
	}

	.no-border .main-content{
		margin-left: 0px!important;
	}

	.no-menu.no-border .main-content{
		margin-left: 0px!important;
	}

	.no-border .container-fluid.py-4{
		padding: 0;
		padding-top: 0!important;
		padding-bottom: 0!important;
	}

	.no-border .main-content{
		border-radius: 0;
	}

	[type=checkbox].form-control{
		appearance: auto;
	}


	.main-content .container-fluid.py-4{
		overflow: auto;
    	max-height: CALC(100vh - 80px);
    }


.bg-content{

z-index:0;
width:100;

margin-bottom:-150px;
height:150px;

/*
background-color: #000;
opacity: 0.05;*/

background: linear-gradient(0deg, rgba(230,230,230,0) 0%, rgba(230,230,230,1) 100%);

/*
background: linear-gradient(135deg, #00000055 25%, transparent 25%) -22px 0/ 44px 44px, linear-gradient(225deg, #000000 25%, transparent 25%) -22px 0/ 44px 44px, linear-gradient(315deg, #00000055 25%, transparent 25%) 0px 0/ 44px 44px, linear-gradient(45deg, #000000 25%, #ffffff 25%) 0px 0/ 44px 44px;
*/
}

.dataview td{
	padding: 0 0.5rem;
}

.dataview.text-left td{
	text-align: left;
}

.dataview.text-tiny td{
	font-size: 10px;
}

.dataview.text-tiny th{
	font-size: 12px;
}

.dialog_front{
	pointer-events: none;
}

.dialog_front [view_name="ui/component"]{
	pointer-events: all;
}

[view_name="ui/dialog"]{
	position: fixed;
	z-index: 9999;
}

.dialog .nav-item{
	
}

div.table {
    margin-bottom: -40px;
}

[view_name="ui/input/subitems"] [view_name="ui/button/primary"] [view_name="core/language"]{
	margin-top: 0;
	font-size: 12px;
}
[view_name="ui/input"] label{
	margin-bottom: 0px;
}

table.dataview td [view_name = 'ui/button/primary'] button, table.dataview td [view_name = 'ui/button/secondary'] button{
	padding: 5px;
}

.navbar-nav ul{
	list-style: none;
}

.list.inside_input{
	background-color: white;
}

.form-label, label {
    font-size: inherit;
    font-weight: inherit;
    margin-bottom: inherit;
    color: inherit;
    margin-left: inherit;
}