@import 'fancy.css';
/* reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}* {-webkit-box-sizing: border-box;box-sizing: border-box;}
/* vars */
:root{
  /* fonts */
  --font-size: 17px;
  --font-size-sm: 15px;
  --font-size-xs: 13px;
  --font-size-lg: 32px;
  --font-size-xl: 40px;
  
  --font-weight: 400;
  --line-height: 1.5;
  --font: var(--font-weight) var(--font-size)/var(--line-height) 'Barlow', sans-serif;
  --screen-class: 'screen-hd-plus';
  --header-height: 100px;
  --sidebar-width: 100px;
  --sidebar-right-width: min(400px, calc(100% - var(--sidebar-width)));


  --transition-timing: ease-in-out;
  --transition-duration: .3s;
  --transition-property: all;
  --transition-delay: 0s;
  --transition: var(--transition-property) var(--transition-duration) var(--transition-timing) var(--transition-delay);

  --color-text: #FFF;
  --color-text-darkness: #7386B1;
  --color-text-featured: #c7ce2d;
  --color-dark: #242D45;
  --color-dark-lighter: #2E3853;
  --color-dark-darkness: #1B2237;
  --color-error: #ff2d20;

  --color-admin: #7386B1;
  --color-customer: #c7ce2d;


  --gap-lg: 64px;
  --gap: 48px;
  --gap-sm: 16px;
  --gap-xs: 6px;
  --gap-sidebar: 6px;
  --gap-fields: 24px;

  --border-width: 2px;

  --border-radius: 5px;
  --box-shadow: 0 1px 4px var(--color-dark-lighter), 0 10px 24px var(--color-dark-lighter);

  --fancybox-bg: rgba(41,44,53,.25);
  --fancybox-content-bg: transparent;

}
/* 
  - 1920
  - 1536
  - 1366
  - 1024
  - 768
  - 568
  - 375
*/ 
@media only screen and (max-width: 1920px){
  :root{
    --screen-class: 'screen-hd';
  }
}
@media only screen and (max-width: 1536px){
  :root{
    --screen-class: 'screen-laptop-plus';
    --header-height: 90px;
    --sidebar-width: 90px;
  }
}
@media only screen and (max-width: 1366px){
  :root{
    --screen-class: 'screen-laptop';
  }
}
@media only screen and (max-width: 1024px){
  :root{
    --screen-class: 'screen-tablet-plus';
    --header-height: 80px;
    --sidebar-width: 80px;
    /* --sidebar-right-width: min(300px, calc(100% - var(--sidebar-width))); */
  }
}
@media only screen and (max-width: 768px){
  :root{
    --screen-class: 'screen-tablet';
  }
}
@media only screen and (max-width: 568px){
  :root{
    --screen-class: 'screen-mobile-plus';
  }
}
@media only screen and (max-width: 375px){
  :root{
    --screen-class: 'screen-mobile';
  }
}



html {scroll-behavior: smooth;}
html,textarea,iframe,[contenteditable] {scrollbar-width: thin;scrollbar-color: var(--color-text-featured) var(--color-dark);scrollbar-gutter: auto;}
body{font: var(--font);-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;font-feature-settings: 'liga';background-color: var(--color-dark-lighter);will-change: auto;-webkit-transition: opacity ease-out .3s .2s;transition: opacity ease-out .3s .2s;position: relative;padding: var(--header-height) 0 0 var(--sidebar-width);color: var(--color-text);}
body.loading{opacity: 0;}
body::-webkit-scrollbar, textarea::-webkit-scrollbar, iframe::-webkit-scrollbar, [contenteditable]::-webkit-scrollbar {width: var(--gap-xs);height: var(--gap-xs);}
body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb, [contenteditable]::-webkit-scrollbar-thumb  {background-color: var(--scrollbar-color-ovewrite);}
body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb, [contenteditable]::-webkit-scrollbar-thumb{background-color:  var(--color-text-featured);}
body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, iframe::-webkit-scrollbar-track, [contenteditable]::-webkit-scrollbar-track  {background: var(--color-dark);}
a {color: var(--color-text-featured);text-decoration: underline dotted;text-underline-offset: 4px;}
a > * {pointer-events: none;}
strong{font-weight: 500;}
h1, h2, h3, h4{font-size: var(--font-size-lg);font-weight: 500;}
h1{font-size: var(--font-size-xl);}
h2{font-size: calc(var(--font-size-xl) - 3px);}
h4{font-size: calc(var(--font-size-lg) - 3px);}
video{display: block;margin: 0;}
/* INFO: material-icons */
[class^="material-"]{user-select: none;}
.hide{display: none !important;}
.grow{flex-grow: 1;}
.text-danger {color: var(--color-error);}
/* INFO: background-video */
.background-video{position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 0;}
.background-video > video{width: 100%;height: 100%;object-fit: cover;}
/* INFO: selection-area */
.selection-area{background: rgba(0,0,0,.25);opacity: 1;-webkit-border-radius: calc( var(--border-radius) + var(--border-width) );border-radius: calc( var(--border-radius) + var(--border-width) );-webkit-box-shadow: inset 0 0 0 var(--border-width) var(--color-text-featured);box-shadow: inset 0 0 0 var(--border-width) var(--color-text-featured);}
/* INFO: status- */
span[class^="status-"]{display: inline-flex;line-height: 1;align-items: center;justify-content: center;vertical-align: middle;font-size: 32px;color: var(--color-dark);font-family: 'Material Icons Outlined';}
span[class^="status-"]::before{content: "\e9f5"; }
span.status-1::before{ content: "\e9f6";color: var(--color-text-featured);}
/* INFO: actions */

.actions{display: flex;align-items: center;justify-content: flex-end;flex-wrap: wrap;}
* + .actions, .actions + *{margin-top: var(--gap);}
.actions + .actions {margin-top: var(--gap-sm);}






/* INFO: actions-icons */
.actions-icons{display: flex;justify-content: flex-end;gap: var(--gap-xs);}
.actions-icons > a{position: relative;background-color: var(--color-text-darkness);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);color: var(--color-text);}
.actions-icons > a:hover, .actions-icons > a:focus{background-color: var(--color-text-featured);z-index: 2;}
.actions-icons > a.danger{background-color: var(--color-dark);color: var(--color-text-darkness);}
.actions-icons > a.danger:hover, .actions-icons > a.danger:focus{background-color: var(--color-text);color: var(--color-error);}
.actions-icons > a > span{line-height: 32px;width: 32px;text-align: center;font-size: var(--font-size);}
/* INFO: fancybox related */
html.with-fancybox > body > section{filter: blur(3px);}
.fancybox__content{padding: 0;}
/* INFO: modal */
.modal{ background-color: var(--color-dark); border-radius: var(--border-radius);padding: var(--gap);color: var(--color-text);width: 800px;max-width: 100%;}
.modal > .title{font-size: var(--font-size-lg);}
.modal > .title > strong{font-weight: 500;color: var(--color-text-featured);}
.modal > .intro{color: var(--color-text-darkness);font-size: calc(var(--font-size) + 2px);}
.modal > form{margin-top: var(--gap-sm);}
/* INFO: tabs */
.tabs > nav.tabs{display: flex;align-items: flex-end;width: 100%;}
.tabs > nav.tabs::before,.tabs > nav.tabs::after{content: " ";height: 1px;background-color: var(--color-text-darkness);}
.tabs > nav.tabs::before{width: var(--gap-xs);}
.tabs > nav.tabs::after{flex-grow: 1;}
.tabs > nav.tabs > a{ text-decoration: none;line-height: 1;font-weight: 500;font-size: var(--font-size-sm);text-transform: uppercase;white-space: nowrap;-webkit-border-radius: var(--border-radius) var(--border-radius) 0 0;border-radius: var(--border-radius) var(--border-radius) 0 0;padding: 18px;color: var(--color-text-darkness);border-bottom: 1px solid var(--color-text-darkness);}
.tabs > nav.tabs > a:focus{outline: none;color: var(--color-text);}
.tabs > nav.tabs > a:hover{color: var(--color-text);}
.tabs > nav.tabs > a.active{ border: 1px solid var(--color-text-darkness);border-bottom: 1px solid transparent;color: var(--color-text);pointer-events: none;}
.tabs > .items > .item{padding: var(--gap-sm);}
.tabs > .items > .item:not(.active){display: none;}
/* INFO: data-title- */
/* TODO:  & title-top */
a:is([data-title-right], [data-title-left], [data-title-top], [data-title-bottom])::after{font-weight: 500;position: absolute;content: attr(data-title-right) attr(data-title-left) attr(data-title-top) attr(data-title-bottom);background-color: var(--color-dark);color: var(--color-text-darkness);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);line-height: 1.4;padding: var(--gap-xs) calc(var(--gap-xs) * 2);font-size: var(--font-size-xs);opacity: 0;visibility: none;pointer-events: none;-webkit-box-shadow: 0 0 0 2px var(--color-text-darkness);box-shadow: 0 0 0 2px var(--color-text-darkness);white-space: nowrap;}
a:is([data-title-right], [data-title-left], [data-title-top], [data-title-bottom]):hover{z-index: 2;}
a:is([data-title-right], [data-title-left], [data-title-top], [data-title-bottom]):is(:hover, :focus)::after{opacity: 1;visibility: visible;}
a[data-title-right]::after{left: calc(100% - var(--gap-xs));}
a[data-title-left]::after{right: calc(100% - var(--gap-xs));}
a[data-title-bottom]::after{left: 50%;transform: translateX(-50%);top: calc(100% + var(--gap-xs));}
/* INFO: table */
.sortable-title{display: flex;align-items: center;line-height: 1;text-decoration: none;color: var(--color-text-darkness);}
.sortable-title::before{font-family: 'Material Icons Outlined';content: "\e5cf";margin-right: var(--gap-xs);}
.sortable-title.current{color: var(--color-text-featured);}
/* INFO: table.editor */
table.editor{width: 100%;border-collapse: separate;}
table.editor td{padding: var(--gap-sm);align-items: center;vertical-align: middle;}
table.editor thead tr > td:first-child {padding-left: 0;}
table.editor thead tr > td:last-child {padding-right: 0;}
table.editor thead {color: var(--color-text-darkness);font-size: var(--font-size-sm);font-weight: 500;text-transform: uppercase;}
table.editor thead tr > td:last-child{text-align: right;}
table.editor tbody tr > td{ -webkit-transition: var(--transition);transition: var(--transition); z-index: 1;}
table.editor tbody tr:hover > td{background-color: var(--color-dark-darkness); z-index: 2;}
table.editor tbody tr > td:first-child {border-radius: var(--border-radius) 0 0 var(--border-radius);}
table.editor tbody tr > td:last-child {border-radius: 0 var(--border-radius) var(--border-radius) 0;}
table.editor .table-picture{width: 72px;}
table.editor .table-picture picture {width: 72px;aspect-ratio: 1;position: relative;display: block;background-color: var(--color-text-darkness);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);outline: 2px solid var(--color-text-darkness);overflow: hidden;}
table.editor .table-picture picture > img{position: absolute;width: 100%;height: 100%;object-fit: cover;}
/* INFO: tags */
.tags{display: flex;flex-wrap: wrap;gap: var(--gap-xs);}
.tag{display: inline-flex;color: var(--color-text);font-weight: 500;text-transform: uppercase;font-size: var(--font-size-xs);padding: 8px;line-height: 1;white-space: nowrap;border-radius: var(--border-radius);background-color: var(--color-text-darkness);text-decoration: none;user-select: none;}
span.tag{ background-color: var(--color-dark);}
.tag.sm{font-size: calc(var(--font-size-xs) - 2px);font-weight: 700;padding: 4px 6px;}
.tag.date{background-color: var(--color-dark);color: var(--color-text-darkness);font-weight: 700;letter-spacing: 1px;align-items: center;}
.tag.date::before{font-family: 'Material Icons Outlined';content: "\e935";display: block;margin-right: var(--gap-xs);font-size: var(--font-size);color: var(--color-text);}
a.tag{-webkit-transition: var(--transition);transition: var(--transition);}
a.tag:hover, a.tag:focus{background-color: var(--color-dark) !important;-webkit-box-shadow: inset 0 0 0 1px var(--color-text);box-shadow: inset 0 0 0 1px var(--color-text); }
/* INFO: background colors */
.background-success{background-color: var(--color-text-featured) !important;}
.background-error{background-color: var(--color-error) !important;}
.background-admin{background-color: var(--color-admin) !important;}
.background-customer{background-color: var(--color-customer) !important;}
/* INFO: admin-header */
.letter-avatar{aspect-ratio: 1;background-color: var(--color-dark-lighter);-webkit-border-radius: 50%;border-radius: 50%;display: flex;align-items: center;justify-content: center;text-transform: uppercase;font-weight: 500;height: 48px;color: var(--color-text);text-decoration: none;}
a.letter-avatar:hover, a.letter-avatar:focus {outline: solid 2px #FFF;}
#admin-header .letter-avatar{width: calc(var(--header-height) - var(--gap-sm) * 2);height: calc(var(--header-height) - var(--gap-sm) * 2);font-size: calc(var(--header-height) / 4);}
/* IMPORTANT: .login */
body:is(.login, .register){background-color: var(--color-dark);padding: 0;}
body:is(.login, .register) #admin-notifications{left: 0;}
:is(#login, #register) {min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: var(--gap-lg);position: relative;}
:is(#login, #register) > form{width: min(100%, 400px);padding: var(--gap);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-box-shadow: 0 0 0 var(--border-width) var(--color-text-featured);box-shadow: 0 0 0 var(--border-width) var(--color-text-featured);z-index: 2;position: relative;overflow: hidden;}
#register > form{
  width: min(100%, 600px);
}
:is(#login, #register) > form::before{content: " ";position:absolute;inset: 0;z-index: -1;opacity: .75;display: block;background-color: var(--color-dark-lighter);}
:is(#login, #register) > form > .logo{display: flex;align-items: center;justify-content: center;margin-bottom: var(--gap-lg);}
:is(#login, #register) > form > .logo > img{width: 200px;user-select: none;}
/* IMPORTANT: admin-header */
#admin-header{position: fixed;top: 0;left: var(--sidebar-width);right: 0;height: var(--header-height);background-color: var(--color-dark);z-index: 1;}
#admin-header > .content{display: flex;align-items: center;gap: var(--gap);height: var(--header-height);padding: 0 var(--gap-sm);width: 100%;}
/* IMPORTANT: admin-logo */
#admin-logo{position: fixed;top: 0;left: 0;width: var(--sidebar-width);height: var(--header-height);padding: var(--gap-sm);display: flex;align-items: center;justify-content: center;
  -webkit-transition: var(--transition);transition: var(--transition);
}
#admin-logo:hover{background-color: var(--color-dark-lighter);padding: calc(var(--gap-sm) - var(--gap-xs));}
#admin-logo img{display: block;width: 100%;height: 100%;display: block;object-fit: contain;-webkit-transition: var(--transition);transition: var(--transition);}
/* IMPORTANT: header-sticky */
#header-sticky{position: sticky;z-index: 1;top: var(--header-height);background-color: var(--color-dark-lighter);border-bottom: var(--border-width) solid var(--color-dark);padding: var(--gap-sm);}
/* IMPORTANT: admin-sidebar */
#admin-sidebar{z-index: 1;position: fixed;top: var(--header-height);left: 0;width: var(--sidebar-width);bottom: 0;background-color: var(--color-dark);padding: var(--gap-xs);}
#admin-sidebar nav, #admin-sidebar nav{display: grid;grid-template-columns: 1fr;grid-gap: var(--gap-xs);}
#admin-sidebar nav .group {background-color: var(--color-dark-lighter);border-radius: var(--border-radius);padding: var(--gap-xs);}
#admin-sidebar nav .group + *,#admin-sidebar nav .group > * + * {margin-top: var(--gap-xs);}
#admin-sidebar nav .group > a {display: flex;aspect-ratio: 1;width: 100%;position: relative;background-color: var(--color-dark);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);align-items: center;justify-content: center;text-decoration: none;color: var(--color-text-darkness);-webkit-transition: var(--transition);transition: var(--transition);}
#admin-sidebar nav .group > a:hover, #admin-sidebar nav .group > a:focus, #admin-sidebar nav .group > a.current{outline: none;background-color: var(--color-text-featured);color: var(--color-text);}
#admin-sidebar nav .group > a > span{font-size: 24px;}
/* IMPORTANT: admin-sidebar-rigth */
#admin-sidebar-right{position: fixed;top: 0;right: calc( 0px - var(--sidebar-right-width) );bottom: 0;width: var(--sidebar-right-width);background-color: var(--color-dark);transition: var(--transition);z-index: 2;border-left: var(--border-width) solid var(--color-text-featured); }
#admin-sidebar-right > .close{bottom: var(--gap-sm);position: absolute;transform: translateX(-100%);text-decoration: none;padding: 12px;line-height: 1;font-size: 24px;background-color: var(--color-dark);-webkit-border-radius:   calc(var(--border-radius) + var(--border-width)) 0 0 calc(var(--border-radius) + var(--border-width));border-radius:   calc(var(--border-radius) + var(--border-width)) 0 0 calc(var(--border-radius) + var(--border-width));border: var(--border-width) solid var(--color-text-featured);border-right: 0;}
#admin-sidebar-right > .close::before{font-family: 'Material Icons Outlined';content: "\e145";display: block;}
#admin-sidebar-right.active{right: 0;}
#admin-sidebar-right.active > .close::before{content: "\e15b";}
#admin-sidebar-right > .content{padding: var(--gap);display: grid;grid-template-columns: 1fr;grid-gap: var(--gap-sm);}
body.has-admin-actions #admin-sidebar-right > .close{bottom: calc(var(--header-height) + var(--gap-sm));}
/* IMPORTANT: admin-content */
#admin-content{background-color: var(--color-dark-lighter);padding: var(--gap-sm);}
/* IMPORTANT: admin-actions */
#admin-actions{position: fixed;bottom: 0;right: 0;height: var(--header-height);left: var(--sidebar-width);padding: var(--gap-sm);background-color: var(--color-dark-lighter);border-top: var(--border-width) solid var(--color-dark);display: flex;align-items: center;justify-content: flex-end;gap: var(--gap-xs);}
body.has-admin-actions  #admin-content{padding-bottom: calc(var(--header-height) + var(--gap) + var(--border-width));}
/* IMPORTANT: admin-notifications */
#admin-notifications{position: fixed;bottom: 0;left: var(--sidebar-width);z-index: 1100;}
#admin-notifications .notification{margin: 0 0 var(--gap-sm) var(--gap-sm);-webkit-box-shadow: var(--box-shadow);box-shadow: var(--box-shadow);}
.notification {cursor: pointer;padding: var(--gap-sm);color: var(--color-text);background-color: var(--color-text-darkness);display: flex;align-items: center;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
.notification::before{font-family: 'Material Icons Outlined';content: "\e0f0";width: 48px;height: 48px;text-align: center;line-height: 48px;font-size: 24px;display: block;margin-right: var(--gap-sm);-webkit-border-radius: 50%;border-radius: 50%;background-color: var(--color-dark-lighter);}
.notification.success::before{content: "\e5ca";background-color: var(--color-text-featured);}
.notification.error{background-color: var(--color-dark);font-weight: 500;outline: 2px solid var(--color-error);outline-offset: -1px;}
.notification.error::before{background-color: var(--color-dark-lighter);color: var(--color-error);content: "\e624";box-shadow: inset 0 0 0 2px var(--color-error);}
.notification.inline{padding: var(--gap-sm);}
.notification.inline + *, * + .notification.inline {margin-top: var(--gap-sm);}
.notification.inline::before{width: 36px;height: 36px;line-height: 36px;font-size: 18px;}

/* INFO: form.filters */
form.filters{display: flex;gap: var(--gap);justify-content: space-between;align-items: flex-end;}
form.filters > .actions{margin: 0;}
form.filters .fields {display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: var(--gap-sm); }
form.filters label {color: var(--color-text-darkness);}



.fields{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: var(--gap-fields);}
.fields > .full{grid-column: auto / span 2;}

#admin-content form .fields{grid-template-columns: repeat(4, 1fr);}
#admin-content form .fields > .full{grid-column: 1 / span 4;}
#admin-content form .fields > .double{grid-column: auto / span 2;}


label {color: var(--color-text);font-size: var(--font-size-xs);text-transform: uppercase;font-weight: 500;display: block;margin: 0;}
label > small{font-size: calc(var(--font-size-xs) - 2px) !important;}
label > .required{color: var(--color-error);margin-left: 2px;text-shadow: 0 0 2px var(--color-dark-darkness);}
label > .gray{font-size: var(--font-size-xs);color: var(--color-text-darkness);}
label + * {margin-top: var(--gap-xs);}

fieldset{padding: var(--gap-fields);background-color: var(--color-dark);border-radius: var(--border-radius);}

.field{display: block;}
.field.required > label::after{content: "*";margin-left: 2px;color: var(--color-error);display: inline-block;}
input:where([type=text], [type=number], [type=email], [type=date], [type=password], [type=search], [type=url]), select, textarea{font: var(--font);color: var(--color-text-darkness);background: var(--color-dark);padding: 12px;-webkit-box-shadow:  0 0 0 1px var(--color-text-darkness);box-shadow:  0 0 0 1px var(--color-text-darkness);width: 100%;font-size: var(--font-size-sm);display: block;line-height: 1;border: none;outline: none;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-transition: var(--transition);transition: var(--transition);background-color: var(--color-dark-lighter);}
textarea {line-height: 1.6;aspect-ratio: 4;max-height: 20vh;}
textarea[rows]{aspect-ratio: auto;}
input:where([type=text], [type=number], [type=email], [type=date], [type=password], [type=search], [type=url]):focus, select:focus, textarea:focus{color: var(--color-text);-webkit-box-shadow:  0 0 0 1px var(--color-text-featured);box-shadow:  0 0 0 1px var(--color-text-featured);border: none;}
input:where([type=text], [type=number], [type=email], [type=date], [type=password], [type=search], [type=url]).lg, select.lg, textarea.lg{font-size: var(--font-size-lg);}
input:where([type=text], [type=number], [type=email], [type=date], [type=password], [type=search], [type=url]).sm, select.sm, textarea.sm{font-size: var(--font-size-sm);padding: 8px;}

input[type=color] {-webkit-appearance: none;border: 1px solid var(--color-text-darkness);width: 42px;height: 42px;padding: var(--gap-xs);cursor: pointer;background-color: transparent;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);transition: var(--transition);}
input[type=color]:hover, input[type="color"]:focus {border-color: var(--color-text-featured);}
input[type=color]::-webkit-color-swatch-wrapper {padding: 0;}
input[type=color]::-webkit-color-swatch {-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);border:none;}


.legend{padding: var(--gap-xs) 0;color: var(--color-text-darkness);font-size: calc( var(--font-size-lg) - 4px);display: flex;gap: var(--gap-sm);align-items: center;user-select: none;}
.legend > span[class^="material-"]{color: var(--color-text-featured);font-size: var(--font-size-lg);line-height: 1;padding: 8px;-webkit-box-shadow: 0 0 0 2px var(--color-text-featured);box-shadow: 0 0 0 2px var(--color-text-featured);-webkit-border-radius: calc(var(--border-radius) + 2px);border-radius: calc(var(--border-radius) + 2px);}

.field input:where([type=checkbox], [type=radio]){opacity: 0;float: left;position: absolute;}
.field input:where([type=checkbox], [type=radio]) + label{display: inline-flex; align-items: center;gap: var(--gap-sm);line-height: var(--font-size-sm);padding: 12px 0;/* margin-top: var(--gap-xs);*/cursor: pointer;position: relative;}
.field input:where([type=checkbox], [type=radio]) + label::before{content: " ";width: 40px;height: 20px;background-color: var(--color-text-darkness);-webkit-border-radius: 32px;border-radius: 32px;-webkit-transition: var(--transition);transition: var(--transition);}
.field input:where([type=checkbox], [type=radio]) + label::after{position: absolute;content: " ";display: block;left: 2px;width: 16px;height: 16px;background: var(--color-dark);-webkit-border-radius: 50%;border-radius: 50%;-webkit-transition: var(--transition);transition: var(--transition);}
.field input:where([type=checkbox], [type=radio]):checked + label::before{background-color: var(--color-text);}
.field input:where([type=checkbox], [type=radio]):checked + label::after{background-color: var(--color-text-featured);left: 22px;}

:disabled{opacity: .5;pointer-events: none;}

input[type=submit], a.btn{
  display: block;
  background-color: var(--color-text-featured);
  color: var(--color-text);
  font: var(--font);
  line-height: 1;
  padding: 16px 32px;
  text-align: center;
  border: none;
  text-transform: uppercase;
  line-height: var(--font-size-sm);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 2px;
  width: auto;
  outline: none;
  text-decoration: none;
  -webkit-border-radius: var(--border-radius);
  border-radius: var(--border-radius);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
input[type=submit]:hover, a.btn:hover,
input[type=submit]:focus, a.btn:focus
{background-color: var(--color-dark-lighter);-webkit-box-shadow: inset 0 0 0 var(--border-width) var(--color-text-featured);box-shadow: inset 0 0 0 var(--border-width) var(--color-text-featured);color: var(--color-text-featured);}
input[type=submit].sm, a.btn.sm{font-size: calc(var(--font-size-xs) - 1px);padding: 12px 24px;}
input[type=submit].lg, a.btn.lg{font-size: calc(var(--font-size-xs) + 2px);padding: 20px 40px;}
input[type=submit].full-width, a.btn.full-width{width: 100%;}
input[type=submit].secondary, a.btn.secondary{background-color: var(--color-text-darkness);}
input[type=submit].secondary:hover, a.btn.secondary:hover,
input[type=submit].secondary:focus, a.btn.secondary:focus
{background-color: var(--color-dark-lighter);-webkit-box-shadow: inset 0 0 0 2px var(--color-text-darkness);box-shadow: inset 0 0 0 2px var(--color-text-darkness);color: var(--color-text-darkness);}
input[type=submit].danger, a.btn.danger{background-color: var(--color-error);color: var(--color-text);}
input[type=submit].danger:hover, a.btn.danger:hover,
input[type=submit].danger:focus, a.btn.danger:focus
{background-color: var(--color-dark-lighter);-webkit-box-shadow: inset 0 0 0 2px var(--color-error);box-shadow: inset 0 0 0 2px var(--color-error);color: var(--color-error);}




/* INFO: field > error */
.field > .error{display: block;font-size: var(--font-size-sm);font-weight: 500;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);padding: var(--gap-sm);background-color: var(--color-error);color: var(--color-text);}
.field > .error + *, .field > * + .error{margin-top: var(--gap-sm);}
/* INFO: empty */
section.empty {display: flex;gap: var(--gap);padding: var(--gap);background-color: var(--color-dark);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);color: var(--color-text-darkness);align-items: center;}
section.empty > span{font-size: var(--font-size-xl);color: var(--color-text);}
/* INFO: .repeater-items */

.repeater-items > * + * {margin-top: var(--gap-xs);}
.repeater-item{padding: var(--gap-sm);background-color: var(--color-dark-lighter);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
.repeater-item.dragging{opacity: .25;}

.extra-info label{color: var(--color-text-darkness);line-height: 1;}
.extra-info label + *{background-color: var(--color-dark-lighter);padding: var(--gap-sm);display: block;margin-top: var(--gap-xs);border-radius: var(--border-radius);font-weight: 500;font-size: var(--font-size-sm);}
/* INFO: .dasboard-welcome */
.dasboard-welcome{padding: var(--gap);position:relative;background-color: var(--color-dark-darkness);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);overflow: hidden;}
.dasboard-welcome > .info{padding-top: 10vh;display: flex;gap: var(--gap-sm);align-items: center;z-index: 2;align-items: center;}
.dasboard-welcome > .info > h1{text-transform: uppercase;font-weight: 700;font-size: var(--font-size-lg);}
.dasboard-welcome > .info > .logo {display: block;width: min(50%, 300px);}
.dasboard-welcome > .info > .logo img{width: 100%}
.dasboard-welcome > picture{position: absolute;top: 0;right: 0;bottom: 0;aspect-ratio: 2;max-width: 50%;z-index: 1;}
.dasboard-welcome > picture > img{width: 100%;height: 100%;object-fit: cover;object-position: left center;}
/* INFO: .ql-bubble */
.ql-bubble{z-index: 1;}
.ql-bubble .ql-tooltip{background-color: var(--color-dark-lighter);outline: 1px solid var(--color-text-darkness);}
.ql-bubble .ql-picker-options{background-color: var(--color-dark-lighter);outline: 1px solid var(--color-text-darkness);}
.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{display: none;}
label + .ql-container{margin-top: var(--gap-xs);}
.ql-editor{font: var(--font);color: var(--color-text);padding: var(--gap);font-size: calc(var(--font-size) + 4px);font-weight: 300;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-box-shadow: 0 0 0 1px var(--color-text-darkness);box-shadow: 0 0 0 1px var(--color-text-darkness);}
.ql-editor:focus{-webkit-box-shadow: 0 0 0 1px var(--color-text-featured);box-shadow: 0 0 0 1px var(--color-text-featured);}
.ql-editor strong{font-weight: 500;}
.ql-editor.ql-blank::before{font-style: normal;left: var(--gap);color: var(--color-text-darkness);opacity: .5;}


/* INFO: [upload-file] */
[upload-file] > .preview{width: 160px;border-radius: var(--border-radius);aspect-ratio: 1;outline: 1px solid var(--color-text-darkness);background-color: var(--color-dark-darkness);cursor: pointer;display: flex;align-items: center;justify-content: center;}
[upload-file] > .preview > img{width: 100%;height: 100%;padding: 8px;object-fit: contain;}
[upload-file] {display: flex;gap: var(--gap-sm);align-items: center;}
[upload-file] > .preview > input{opacity: 0;float: left;position: absolute;}
[upload-file]:hover > .preview{outline: 1px solid var(--color-text-featured);}
[upload-file-selected] img{display: none;}
[upload-file][upload-file-selected] > .preview::before{font-family: 'Material Icons Outlined';content: "\e2c6";font-size: 24px;color: var(--color-text-featured);}
[upload-file-selected]::after{content: attr(upload-file-selected);text-transform: uppercase;font-size: 13px;}
[upload-file-selected] > .preview{width: 40px;}


.form-groups {display: flex;flex-direction: column;gap: var(--gap-lg);}
.form-groups > .group{display:flex;gap: var(--gap-lg);align-items: stretch;}
.form-groups > .group > .description{width: 360px;}
.form-groups > .group > .fields{flex-grow: 1;}

#select-language{display: flex;gap: var(--gap-sm);text-transform: uppercase;font-size: var(--font-size-sm);font-weight: var(--font-weight-bold);}
#select-language > a{text-decoration: none;}


.change-language {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-lg);
  align-items: center;
  font-size: var(--font-size-xs);
}