/* Variables */
:root {
	--color-primary-rgb: 0, 125, 176;
	--color-primary: rgb(var(--color-primary-rgb));
	--color-primary-dark: rgb(0, 108, 150); /* #006C96 */

	--color-secondary-rgb: 118, 181, 79;
	--color-secondary: rgb(var(--color-secondary-rgb));
	--color-secondary-dark: rgb(102, 156, 68); /* #669C44 */

	--color-grey: #87888a;
	--color-grey-light: rgba(135, 136, 138, 0.15);
	--color-bg: white;

	--font-text: 'Fira Sans', sans-serif;
	--font-title: 'Barlow Condensed', sans-serif;
	--font-icon: 'Material Icons', sans-serif;

	--page-width: 1400px;
	--content-width: 1360px;
	--padding-width: 20px;

	--shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
	--grid-background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%),
					   linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.2) 75%);
}

/* Animations */
@keyframes opacity-0-1 { from {opacity: 0;} to {opacity: 1;} }
@keyframes opacity-1-0 { from {opacity: 0;} to {opacity: 1;} }
@keyframes scale-1-2 { from {transform: scale(1);} to {transform: scale(2);} }
@keyframes scale-2-1 { from {transform: scale(2);} to {transform: scale(1);} }
@keyframes left-0-100 { from {transform: translateX(0);} to {transform: translateX(100%);} }

/* Tags */
*, :before, :after {box-sizing: border-box;}
body, h1, h2, h3, h4, h5, h6, ul{margin:0;}
header, footer, nav, article{display:block;}
a{color:inherit;text-decoration:none;}
input, select, textarea, button{font-family:inherit;border:0;outline:none;}
button{background:none;color:inherit;}
label[for], a[href], button{cursor:pointer;}
html, body {display: block; width: 100%; height: 100%;}
body {background: var(--color-bg); color: #222; font: 20px var(--font-text);}

/* Globals */
mi {
	display: inline-block;
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	line-height: 0;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}
.global-center-page{width: 100%; max-width: var(--page-width); margin: 0 auto;}
.global-center-content{max-width: var(--content-width); margin: 0 auto;}
.global-bg-image{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.global-hover-blurred{background: rgba(var(--color-primary-rgb), 0.5); color: white; padding: 20px 30px; margin: auto; z-index: 1;}
.global-hover-blurred{backdrop-filter: blur(8px); font: 700 24px/1 var(--font-title); text-transform: uppercase; border-radius: 5px;}
.global-text-ellipsis{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}


/* Breadcrumb */
.breadcrumb{padding: 20px; display: flex; align-items: center; gap: 15px;}
.breadcrumb-item{position: relative; display: flex; gap: 5px; align-items: center; font: 600 16px/20px var(--font-text); color: #999;}
.breadcrumb-item mi{font-size: 20px;}
.breadcrumb-item:hover, .breadcrumb-item:last-child{color: var(--color-primary);}

/* Button */
.button{position:relative;display: inline-flex; vertical-align:middle;height:40px;background-color:#333;padding: 0 15px 0 0; gap: 15px; overflow: hidden;}
.button{color: white; text-align:center;font:600 20px/40px var(--font-title);text-transform:uppercase;}
.button > mi{height: 40px; width: 40px; line-height: 40px; background-color: rgba(0, 0, 0, 0.1);}
.button:hover{opacity:0.9;}
.button:hover::after{position: absolute; top:0; bottom: 0; left: -20%; width: 20px; transform: skewX(-20deg); background: rgba(255, 255, 255, 0.5); animation: button-bright 0.5s;content: '';}
@keyframes button-bright {
	from {left: -20%;}
	to {left: 120%;}
}
.button.main{background-color:hsl(var(--hue), 24%, 41%);}
.button.red{background-color:#a54040;}
.button.green{background-color:#70b949;}
.button.blue{background-color:#2186de;}
.button.purple{background-color:#7a6dbb;}
.button.brown{background-color:#c37f4a;}
.button.grey{background-color:#777777;}
.button.black{background-color:#444444;}

/* ContentEditor */
.contentEditor{display: flex; width: 100%; height: 100%;}
.contentEditor-view{flex: 1; background: #444; height: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; overflow: hidden auto;}
.contentEditor-controls{flex-basis: 500px; background: white; height: 100%; box-shadow: var(--shadow); z-index: 5;}
.contentEditor-controls{display: flex; flex-direction: column; padding: 0 20px;}
.contentEditor-viewports{display: flex; padding: 10px 0; justify-content: center; gap: 5px;}
.contentEditor-viewport{padding: 5px 8px; border-radius: 5px;}
.contentEditor-viewport:hover{background: #eee;}
.contentEditor-viewport.selected{background: #333; color: white;}
.contentEditor-form{flex: 1; display: flex; overflow: auto; padding: 20px; margin-inline: -20px; background: #eee;}
.contentEditor-form-content{display: flex; flex-direction: column; gap: 20px; width: 100%;}
.contentEditor-form-title{display: flex; align-items: center; justify-content: center; gap: 10px; background: #ddd; margin: -20px -20px 20px; padding: 10px 20px; font-size: 16px;}
.contentEditor-form-component{display: flex; align-items: center; background: #eee; border-radius: 5px; padding: 4px 8px; gap: 5px;}
.contentEditor-form-message{font: italic 100 24px/30px var(--font-title); margin: auto; padding: 20px;}
.contentEditor-buttons{display: flex; padding: 10px 0; justify-content: center; gap: 20px;}
.contentEditor-category{display: flex; flex-direction: column; gap: 20px;}
.contentEditor-add{display: flex; flex-wrap: wrap; gap: 20px;}
.contentEditor-add-list{display: flex; flex-wrap: wrap; gap: 10px; margin-top: -10px;}
.contentEditor-add-item{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.contentEditor-add-item{width: 130px; height: 130px; padding: 10px; border: 2px solid #fff; background: white; border-radius: 5px; cursor: pointer;}
.contentEditor-add-item:hover{border-color: #333;}
.contentEditor-add-item mi{font-size: 48px; line-height: 60px;}
.contentEditor-add-item span{font: 400 20px/1 var(--font-title); text-align: center;}
.contentEditor-content{position: relative; background: white; min-width: 100%; max-width: 100%;}
.contentEditor-content-body{min-height: 50px; height: 100%; display: flex;}
.contentEditor-content-body a{pointer-events: none;}
.contentEditor-content-controls{position: absolute; top: 10px; right: 10px; z-index: 5; display: none; gap: 10px; text-align: center; user-select: none;}
.contentEditor-content-controls > *{width: 40px; background: white; line-height: 40px; border-radius: 10px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);}
.contentEditor-content-controls > *:hover{cursor: pointer; border: 2px solid #000; line-height: 36px;}
.contentEditor-content:hover{position: relative;}
.contentEditor-content::after{position: absolute; inset: 0; border: 2px solid transparent; pointer-events: none; z-index: 10; content: '';}
.contentEditor-content:hover::after{border-color: black;}
.contentEditor-content.editing::after{border-color: #70b949;}
.contentEditor-content.dragging{z-index: 50;}
.contentEditor-content.dragging::after{border-color: #a54040;}
.contentEditor-content:hover .contentEditor-content-controls{display: flex;}

.contentHybrid{flex: 1; display: flex; z-index: 1; }
.contentHybrid.cover{background-size: cover;}
.contentHybrid.fixed{background-size: cover; background-attachment: fixed; background-position: center;}
.contentHybrid-content{position: relative; width: 100%; backdrop-filter: blur(5px);}
.contentHybrid-bg{position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; border-radius: 5px; z-index: -1;}
.contentHybrid-text{white-space: pre-wrap;}

.contentImage{flex: 1; display: flex;}
.contentImage img{max-width: 100%; max-height: 100%; margin: auto;}
.contentImage.contain{background-size: contain; background-position: center; background-repeat: no-repeat;}
.contentImage.cover{background-size: cover;}
.contentImage.fixed{background-size: cover; background-attachment: fixed; background-position: center;}
.contentImage.image{background-image: none !important;}
.contentImage:not(.image) img{display: none;}

.contentText{flex: 1; display: flex;}
.contentText-text{white-space: pre-wrap;}
.contentText .ql-editor{height: auto;}

.contentComponent{background: white; padding: 100px; text-align: center;}

.contentViewer{display: flex; flex-wrap: wrap;}
.contentViewer-item{display: flex;}

/* Footer */
.footer{position: relative; background: var(--color-secondary); color: white; z-index: 99;}
.footer-center{display: flex; align-items: center; gap: var(--padding-width); padding: 40px var(--padding-width);}
.footer-column{flex: 1;}
.footer-contact{display: flex; flex-direction: column; gap: 10px;}
.footer-data{display: flex; gap: 10px; align-items: center; font-size: 18px;}
.footer-data:hover{font-weight: 700;}
.footer-main{display: flex; flex-direction: column; gap: 30px; text-align: center;}
.footer-main h1{font: 700 36px/1 var(--font-text); letter-spacing: 0.0em;}
.footer-main h2{font: 300 italic 22px/1 var(--font-text); margin-top: -15px;}
.footer-networks{display: flex; justify-content: center; gap: 20px;}
.footer-network{width: 50px; height: 50px; border-radius: 5px; padding: 10px; background: var(--color-secondary-dark); transition: 0.2s;}
.footer-network :is(img, svg){width: 100%; height: 100%; object-fit: contain;}
.footer-network svg *{fill: white; transition: 0.2s;}
.footer-network:hover{background: white;}
.footer-network:hover svg *{fill: var(--color-secondary);}
.footer-links{margin: 0 auto; max-width: 200px; display: flex; flex-direction: column; gap: 10px;}
.footer-link{font: 400 18px/1.2 var(--font-text);}
.footer-link:hover{font-weight: 700;}
.footer-connection{display: flex; padding: 10px 15px; border-radius: 5px; background: var(--color-secondary-dark); transition: 0.2s;}
.footer-connection{align-items: center; gap: 10px; font: 700 18px/1.5 var(--font-title); margin-top: 10px;}
.footer-connection:hover{background: white; color: var(--color-secondary);}
.footer-copyright{padding: 10px var(--padding-width); background: var(--color-secondary-dark);}
.footer-copyright{display: flex; justify-content: center; gap: 30px;}
.footer-copyright a:hover{text-decoration: underline;}

/* Form */
form[loading]::before{position: absolute;top:0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.2);content: '';z-index: 1000;}

/* Header */
.header{position: static; left: 0; top: 0; width: 100%;  z-index: 100;}
.header-main{padding: 0 var(--padding-width); display: flex; height: 90px; align-items: center;}
.header-logo img{max-height: 75px;}
.header-title{flex: 1; text-align: center;}
.header-title h1{font: 700 36px/1 var(--font-text);}
.header-title h2{font: 100 italic 22px/1 var(--font-text);}
.header-title h2 b{font-weight: 100;}
.header-menu{border: solid rgba(var(--color-primary-rgb), 0.1); border-width: 1px 0;}

/* InputCheckbox */
.inputCheckbox{display: flex; gap: 10px;&+&{margin-top:5px;}}

/* InputFile */
.inputFile{display: grid; grid-template: repeat(4, auto) / 1fr auto; gap: 5px;}
.inputFile input[type='file']{display: none;}
.inputFile-view{position: relative; background-image: var(--grid-background); background-position: 0 0, 10px 10px; background-size: 20px 20px;grid-row: 1 / -1;}
.inputFile-content{display: flex; align-items: center; justify-content: center; padding: 10px; height: 135px; cursor: pointer;}
.inputFile-content > *{max-width: 100%; max-height: 100%; object-fit: contain;}
.inputFile-content video{background: black; min-width: 220px;}
.inputFile-text{background: white; padding: 5px; font: 10px/16px monospace; white-space: pre-wrap; tab-size: 4; overflow: auto; word-break: break-all;}
.inputFile-message{background: rgba(239, 239, 239, 0.8); padding: 10px; font-size: 16px;}
.inputFile-metadata{position: absolute; top: 0; right: 0; background: rgba(239, 239, 239, 0.8); padding: 4px 6px; font-size: 12px; text-align: right;}
.inputFile-data{display: flex; flex: 1; color: white; line-height: 30px; font-size: 12px; min-width: 150px;}
.inputFile-key{background: #333; padding: 0 5px;}
.inputFile-value{background: #444; padding: 0 5px; flex: 1; max-width: 200px;}
.inputFile + .inputFile{margin-top: 10px;}
.inputFile-controls{position: absolute; top: 0; left: 0; display: flex; gap: 5px; z-index: 5;}
.inputFile-btn{width: 30px; line-height: 30px; text-align: center; background: #333; color: #DDD;}
.inputFile-btn:hover{color: white; cursor: pointer;}
.inputFile-btn.disabled{display: none;}
.inputFile-progress{position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: #333; z-index: 5; display: none;}
.inputFile-bar{height: 100%; background: #70b949; width: 0%;}
.inputFile[upload=uploading] .inputFile-progress{display: block;}
.inputFile[upload=error] .inputFile-progress{display: block;}
.inputFile[upload=error] .inputFile-bar{width: 100%; background: #a54040;}

.map{position: relative; width: 100%; --shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;}
.map-filters{position: absolute; top: 10px; left: 188px; align-items: flex-start; display: flex; gap: 10px; z-index: 10; --color: var(--color-primary);}
.map-filters input{display: none;}
.map-filters-item{position: relative; padding: 3px; border-radius: 2px; flex: 1 0 auto; min-width: 250px;}
.map-filters > .map-filters-item{position: relative; background: white; box-shadow: var(--shadow);}
.map-filters-item:hover > .map-filters-view::before{position: absolute; inset: 3px; background: var(--color); opacity: 0.1; content: "";}
.map-filters-item:hover > .map-filters-children{display: flex;}
.map-filters-item .map-filters-item{margin-bottom: -3px;}
.map-filters-view{height: 34px; display: flex; padding: 0 10px; gap: 10px; align-items: center; color: var(--color);}
.map-filters-name{flex: 1; font-size: 16px; white-space: nowrap;}
.map-filters-box::after{content: "check_box_outline_blank";}
input:checked + .map-filters-view > .map-filters-box::after{content: "check_box";}
.map-filters-children{position: relative; flex-direction: column; display: none; background: white; z-index: 1;}
.map-filters > .map-filters-item > .map-filters-children{margin: 0 -3px;}
.map-filters-children .map-filters-children{position: absolute; top: 0; left: calc(100% - 3px); box-shadow: var(--shadow); border-radius: 2px;}
.map-filters-children .map-filters-children .map-filters-item{margin-bottom: 0;}
.map-actions{position: absolute; top: 10px; right: 10px; display: flex; gap: 10px; z-index: 10;}
.map-action{display: flex; height: 40px; padding: 0 10px; align-items: center; gap: 10px; border-radius: 2px; background: white; box-shadow: var(--shadow);}
.map-action span{font-size: 16px;}
.map-action mi{font-size: 20px;}
.map-view{width: 100%; height: 100%;}
.map-view-title{position: relative; background: var(--color); color: white; font: 700 16px/1.3 var(--font-title); text-transform: uppercase; padding: 5px 12px; border-radius: 30px; border: 2px solid white;}
.map-view-title::before{content: ""; position: absolute; left: 50%; top: 100%; border: 5px solid white; transform: rotate(45deg); margin: -4px 0 0 -6px;}
.map-view-title::after{content: ""; position: absolute; left: 50%; top: 100%; border: 5px solid var(--color); transform: rotate(45deg); margin: -6px 0 0 -6px;}
.map-view-marker path{box-shadow: var(--shadow);}
.map-view-marker mi{position: absolute; top: 0; left: 0; width: 100%; text-align: center; line-height: 40px; color: var(--color); font-size: 24px;}
.map-model{position: absolute; right: 10px; bottom: 20px; max-height: calc(100% - 80px); width: 360px; background: white; border-radius: 2px; box-shadow: var(--shadow);}
.map-model{display: none; flex-direction: column; overflow: hidden; --color: #333;}
.map-model-head{display: flex; align-items: center; height: 50px; background: var(--color); color: white; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); z-index: 1;}
.map-model-head mi{width: 50px; line-height: 50px; text-align: center; cursor: pointer;}
.map-model-head mi:hover{background: rgba(255, 255, 255, 0.1);}
.map-model-head h3{flex: 1; font: 700 20px/1.5 var(--font-title); text-transform: uppercase; text-align: center;}
.map-model-body{flex: 1; overflow: auto;}
.map-model-image{width: 100%; aspect-ratio: 16/9; object-fit: cover;}
.map-model-content{display: flex; flex-direction: column; gap: 20px; padding: 20px;}
.map-model-category{position: relative; display: flex; align-items: center; gap: 10px; align-self: flex-start; padding: 5px 8px;}
.map-model-category::before{position: absolute; inset: 0; border-radius: 5px; background: var(--color); opacity: 0.2; content: "";}
.map-model-category > *{position: relative; color: var(--color); z-index: 1;}
.map-model-category mi{font-size: 20px;}
.map-model-category span{font-size: 14px; font-weight: 700;}
.map-model-description{font: 18px/1.5 var(--font-text); color: #777;}
.map-model-data{display: flex; flex-direction: column; gap: 8px;}
.map-model-data > *{display: flex; align-items: center; gap: 10px;}
.map-model-data mi{font-size: 20px;}
.map-model-data span{font-size: 16px;}
.map-model-data a:hover{color: var(--color);}
.map-model-form{display: flex; flex-direction: column; gap: 20px; padding: 20px;}
.map-model-foot{display: flex; justify-content: center; gap: 20px; padding: 5px 20px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); z-index: 1;}

/* Menu */
.menu{display: flex; }
.menu-item{flex: 1; position: relative;}
.menu-item-name{position: relative; display: flex; align-items: center; font: 600 20px/1 var(--font-title); gap: 0.5em; }
.menu > .menu-item > .menu-item-name{justify-content: center; text-transform: uppercase; border: solid transparent; border-width: 3px 0; height: 50px; letter-spacing: 0.05em;}
.menu-item-name mi{font-size: 24px;}
.menu-item-children{display: none; position: absolute; top: 100%; left: 0; min-width: 100%; background: white; box-shadow: var(--shadow); z-index: 100;}
.menu-item-children{white-space: nowrap;}
.menu-item:is(:hover, [selected]) > .menu-item-name{color: var(--color-primary);  border-bottom-color:  var(--color-primary); z-index: 101}
.menu-item:hover > .menu-item-children{display: flex; flex-direction: column; padding: 8px 0;}
.menu-item-children .menu-item-name{justify-content: flex-start; text-transform: none; padding: 0 16px; font: 16px/1 var(--font-text); height: 40px;}
.menu-item-children .menu-item-name span{flex: 1;}
.menu-item-children .menu-item-children{top: -8px; left: 100%; width: 100%;}
.menu-item-children .menu-item:hover > .menu-item-name{background: rgba(var(--color-primary), 0.05)}

/* Module */
.module{position: relative;display:inline-block;vertical-align:top;margin:50px;background-color:white;box-shadow:0 0 25px 0 rgba(0, 0, 0, 0.2);font-size:16px;}
.module-head{display:flex;height:50px;align-items:center;background-color:white;font-size:0;}
.module-head-icon{flex:0;min-width:50px;text-align:center;font-size:24px;line-height: 50px;}
.module-head-icon[href]:hover, .module-head-icon[type=button]:hover{background-color:#eeeeee;cursor:pointer;}
.module-head-icon.close{order:99;}
.module-head-title{flex:1;font:700 20px/1 var(--font-title);padding:0 24px 0 0;text-transform:uppercase;}
.module-head-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.module-head-title strong{font-weight:200;}
.module-body{background-color:#eeeeee;padding:25px;}
.module-body .module-foot{margin:25px -25px -25px -25px;}
.module-foot{background-color:white;padding:5px 25px;text-align:right;}
.module.red .module-head{color:#de4f4f;}
.module.red .module-body{color:#de4f4f;background-color:rgba(222, 79, 79, 0.1);}
.module.green .module-head{color:#4CAF50;}
.module.green .module-body{color:#4CAF50;background-color:rgba(76, 175, 80, 0.1);}

/* MosaicPages */
.mosaicPages{width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));}
.mosaicPages-item{position: relative; aspect-ratio: 16/12; display: flex; overflow: hidden;}
.mosaicPages-item img{transition: 0.4s;}
.mosaicPages-item:hover img{transform: scale(1.1);}

/* NewsCard */
.newsCard{display: grid; grid-template: auto auto 1fr auto / auto 1fr; height: 100%; background: white; border-radius: 5px; overflow: hidden; gap: 15px; padding-bottom: 20px; transition: 0.25s;}
.newsCard-img{grid-column: 1 / -1; width: 100%; aspect-ratio: 4/3; background: #333; overflow: hidden;}
.newsCard-img img{display: bloc; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: 0.25s;}
.newsCard-name{grid-column: 1 / -1; font: 500 24px/1.1 var(--font-title); padding: 0 20px; color: var(--color-primary);}
.newsCard-description{grid-column: 1 / -1; font: 16px/1.2 var(--font-text); padding: 0 20px; text-align: justify;}
.newsCard-description span{text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 6;}
.newsCard-date{justify-self: flex-start; background: #eee; color: #333; border-radius: 5px; padding: 5px 10px; font-size: 14px; margin-left: 20px;}
.newsCard-category{justify-self: flex-end; background: var(--color-secondary); color: white; border-radius: 5px; padding: 5px 10px; font-size: 14px; margin-right: 20px;}
.newsCard:hover{transform: scale(1.02) translateY(-0px); box-shadow: 0px 10px 30px -5px rgb(0 0 0 / 20%);}
.newsCard:hover img{transform: scale(1);}

/* NewsList */
.newsList{width: 100%; background: rgba(var(--color-primary-rgb), 0.05);}
.newsList-list{display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px; list-style: none; padding: 40px 20px;}

/* NewsTitle */
.newsTitle{position: relative; width: 100%;  background: rgba(var(--color-primary-rgb), 0.05); padding: 100px 50px 0; overflow: hidden;}
.newsTitle-content{position: relative; max-width: 1000px;  background: linear-gradient(to bottom, rgb(255 255 255 / 75%), white); box-shadow: var(--shadow);}
.newsTitle-content{display: flex; flex-direction: column; gap: 20px; padding: 50px 50px 20px; border-radius: 10px 10px 0 0; backdrop-filter: blur(8px); z-index: 1;}
.newsTitle-title{font: 700 28px/1.2 var(--font-title); color: var(--color-primary); text-transform: uppercase; text-align: center;}
.newsTitle-description{font: 20px/1.2 var(--font-text); text-align: justify; white-space: pre-wrap;}
.newsTitle-date{text-align: right; color: #666; font-style: italic; font-size: 16px;}
.newsTitle img{top: -100px; height: calc(100% + 100px);}
.newsTitle-image{display: block; width: 100%;}


/* PageTitle */
.pageTitle{position: relative; display: flex; width: 100%; min-height: 200px; padding: 20px; overflow: hidden;}
.pageTitle img{top: -100px; height: calc(100% + 100px);}
.pageTitle h1{font-size: 48px;}

/* Popup */
.popup{position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 50px; overflow: auto; display: flex; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(30px); animation: opacity-0-1 0.3s; z-index: 10000;}
.popup[closed] {transition: 0.5s;opacity: 0;}
.popup > * {margin: auto; animation: opacity-0-1 0.3s, scale-2-1 0.3s;}
.popup[closed] > * {animation: opacity-1-0 0.5s, scale-1-2 0.5s;}

/* SeoPreview */
.seoPreview{display: grid; grid-template-columns: auto 1fr; background: white; padding: 10px; border: 2px solid #ddd; width: min(100%, 565px); margin: 0 auto;}
.seoPreview-logo{width: 28px; height: 28px; object-fit: contain; margin-right: 12px; align-self: center; grid-row: 1/3;}
.seoPreview-url{color: #4d5156; font: 12px/18px Arial, sans-serif;}
.seoPreview-name{color: #202124; font: 14px/20px Arial, sans-serif;}
.seoPreview-title{color: #1a0dab; font: 20px/1.3 Arial, sans-serif; grid-column: 1/3; margin: 5px 0 3px;}
.seoPreview-title:hover{text-decoration: underline;}
.seoPreview-description{color: #4d5156; font: 14px/1.58 Arial, sans-serif; grid-column: 1/3;}

/* SideToolbar */
.sideToolbar{position: fixed; left: 0; top: 50%; transform: translateY(-50%); box-shadow: var(--shadow); z-index: 1000;}
.sideToolbar-button{display: block; width: 50px; font: 24px/50px "Material Icons"; background: white; color: #333; text-align: center;}
.sideToolbar-button:hover{background: #eee;}

/* TabPages */
.tabPages{display: flex; margin: 0 auto; padding: 10px; justify-content: center; gap: 20px;}
.tabPages-item{padding: 10px 20px; border-radius: 5px;  color: var(--color-primary); font: 700 24px/1.2 var(--font-title); text-transform: uppercase;}
.tabPages-item:hover{background: rgba(var(--color-primary-rgb), 0.1);}
.tabPages-item.selected{background: var(--color-primary); color: white;}
.tabPages-item:empty{display: none;}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;background-color:#eee;}
.tabs-handle{position: relative;flex:1 auto;display:flex; align-items: center; justify-content: center; gap: 5px; height:50px;background-color:#ddd;padding:0 25px;order:1;}
.tabs-handle{font:700 20px/50px var(--font-title);cursor: pointer;}
.tabs-handle:hover{background-color:#e5e5e5;}
.tabs-handle ~ .tabs-handle::before{position:absolute;top:10px;bottom:10px;left:-1px;border-right:2px solid #ccc;content:'';}
.tabs-content{min-width:100%;min-height:50px;display:none;order:2;}
.tabs-handle[selected]{background-color:#eee;}
.tabs-content[selected]{display: block;}

/* Tree */
.tree{--radius: 5px; background: #333; padding: 2px 4px 4px; border-radius: calc(var(--radius) + 4px);}
.tree-item{margin-top: 2px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius);}
.tree-item-view{display: flex; height: 40px; align-items: center; background: white; gap: 5px; padding: 0 5px; overflow: hidden;}
.tree-item-children{padding-left: 40px;}
.tree-item-name{flex: 1;}
.tree-item-color{width: 100px; height: 32px; border-radius: 5px; overflow: hidden;}
.tree-item-color input{margin: -10px; width: 120px; height: 52px; background: none; border: none; padding: 0; cursor: pointer;}
.tree-item-url{flex-basis: 300px; color: #666; font-size: 13px;}
.tree-item input[type="text"]{padding: 0 5px; text-align: inherit; font: inherit; color: inherit; line-height: 32px; width: 100%; border-radius: 5px;}
.tree-item input[type="text"]:focus{background: #eee;}
.tree-item input[type="checkbox"]{display: none;}
.tree-item input[type="checkbox"]:not(:checked) + label{opacity: 0.2;}
.tree-item mi{width: 30px; font-size: 20px; line-height: 30px; border-radius: 50%; text-align: center; position: relative;}
.tree-item mi > input{cursor: pointer; position: relative; z-index: 1; background: none;}
.tree-item mi:has(input:placeholder-shown)::before{position: absolute; width: 100%; text-align: center; content:"insert_drive_file"; opacity: 0.2;}
.tree-item-name > input{margin-left: -5px; width: calc(100% + 5px);}
.tree-item-icon:hover{background: #eee; cursor: pointer;}

.tree > .tree-item:first-child > .tree-item-view{border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);}
.tree-item:last-child > .tree-item-view{border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);}
.tree-item:has(.tree-item) > .tree-item-view{border-bottom-left-radius: var(--radius);}
.tree-item:has(.tree-item) + .tree-item > .tree-item-view{border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);}
.tree-item:has(.tree-item) + .tree-item{margin-top: 4px;}

/* UserCard */
.userCard{position: relative; white-space: nowrap;}
.userCard-view{position: relative; display: flex; height: 40px; gap: 10px; align-items: center; border-radius: 5px; padding: 0 15px; z-index: 110;}
.userCard-view mi{font-size: 20px;}
.userCard-view span{font: 400 16px/1 var(--font-text);}
.userCard-links{position: absolute; top: -15px; right: -15px; background: white; padding: 70px 15px 15px;}
.userCard-links{display:none; border-radius: 5px; box-shadow: var(--shadow); z-index: 105;}
.userCard-link{display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 15px; border-radius: 5px;}
.userCard-link mi{font-size: 28px; line-height: 1;}
.userCard-link span{font: 400 16px/1 var(--font-text);}
.userCard-link:hover{color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.1);}
.userCard:hover .userCard-links{display: grid; grid-template-columns: repeat(2, auto);}

/* .Wysiwyg */
.wysiwyg{background: white; margin: 0 0px;}
.wysiwyg-input{display: none;}
.wysiwyg-editor{height: auto !important; max-height: 500px; overflow: auto;}
.wysiwyg .ql-toolbar.ql-snow{padding: 5px;}
.wysiwyg .ql-snow.ql-toolbar button{padding: 5px; width: 28px; height: 28px;}
.wysiwyg .ql-container.ql-snow{border: 0; font-family: var(--font-text);}
.wysiwyg .ql-toolbar.ql-snow{border: 0; background: #333;}
.wysiwyg .ql-snow .ql-picker-options{background: #333;}
.wysiwyg .ql-toolbar.ql-snow .ql-fill{fill: #fff;}
.wysiwyg .ql-toolbar.ql-snow .ql-stroke{stroke: #fff;}
.wysiwyg .ql-snow.ql-toolbar button:hover{background: #444;}



/* Input */
.form-grid{display: grid; gap: 25px;}
.form-item{display:block;}
.form-label{min-width:100%;font-weight:400;font-size:18px;line-height:20px;margin-bottom:10px;}
.form-label.required:after{margin-left:2px;color:#a54040;content:'*';}
.form-help{display:block;font-size:14px;line-height:20px;opacity:0.8;font-style:italic;margin:-5px 0 5px;}
.form-help a{font-weight: 700;}
.form-help a:hover{text-decoration: underline;}
.form-invisible{display:none;}
.form-input{display:block;width:100%;height:40px;padding:0 10px;font-size:16px;font-family:inherit;background-color:#444;color:white;border: 0;outline: none;}
textarea.form-input{min-height:150px;padding:10px;resize:vertical;}
.form-input[type=number]{direction:rtl;}
.form-input:disabled{background-color:#ddd;color:#777;}
.form-container{display:flex;}
.form-container .form-input{order:99;}
.form-container + .form-container{margin-top: 4px;}
.form-prefix{flex:0;background-color:#333;color:white;font-weight:700;white-space:nowrap;line-height:40px;font-size:14px;padding:0 10px;}
.form-icon{min-width:40px;height:40px;line-height:40px;text-align:center;font-size:20px;background-color:#333;color:white;}
.form-icon svg{margin:10px;}
.form-icon svg > *{fill:white;}
.form-icon img{padding:2px;max-width:100%;max-height:100%;}
.form-row{display:flex;margin:0 -12.5px;}
.form-row-item{flex:1;margin:0 12.5px;}
.form-translation{background-color:#555;}
.form-translation .form-container + .form-container{margin-top:2px;}
.textarea-translation{display:flex;background-color:#555;flex:1;}
.textarea-translation-languages{width:50px;}
.textarea-translation-language{padding:5px;}
.textarea-translation-language img{display:block;}
.textarea-translation-language.selected{background-color:#444;}
.textarea-translation-areas{flex:1;min-height:150px;display:flex;}
.textarea-translation-area{display:flex;flex:1;}
.textarea-translation-area > textarea{min-height:100%;}
.textarea-translation-area .redactor-box{width:100%;}
.textarea-translation-area .redactor-in{cursor: auto;}
.form-checkbox-text{display:block;cursor:pointer;}
.form-checkbox-text:hover span{color:#555;}
.form-inline{display:inline;padding:0 2px;text-align:center;background:none;border-bottom:1px solid #333;}
.form-checkable:before{vertical-align:middle;font-size:1.2em;font-family:var(--font-icon);content:'check_box_outline_blank';}
input:checked + .input-checkable:before{content:'check_box';}


.grid-2{grid-template-columns: repeat(2, auto);}
.item-full{grid-column: 1 / -1;}