:root {
	--primary: #004c9a;

	--header_height: 0px;
	
	--grey_light: #efefef;
	--grey_lighter: #fafafa;
	--grey_lightest: #fcfcfc;
}

/* @font-face { font-family: Arial; src: url('/res/font/Gordita-Regular.otf'); } */



/* PRELOADING */
#preloading { position: fixed; z-index: 1000; left: 0; top: 0; width: 100vw; height: 100vh; background: #fff url('/res/img/favicon.png?v=ccc') no-repeat center center;  }



/* LOADING */
#loading { position: fixed; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 300ms; pointer-events: none; }
#loading.act { opacity: 1; transition-delay: 250ms; }
#loading img { width: 100px;}



/* OVERALL */
html, body { min-height: calc(100vh - var(--header_height)); }
body { font-family: Arial; font-size: 14px; height: 100%; margin: 0; padding: 0; color: #333; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
body.popup { overflow: hidden; }

h1, h2 { line-height: 1; border-bottom: 1px solid var(--grey_light); }
h1 { font-size: 24px; margin: 0; padding-bottom: 20px; }
h2 { font-size: 20px; margin-top: 50px; padding-bottom: 20px; }


#app { font-family: Arial; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; }
#app { border: 1px solid red; width: 730px; }






/* MSG */
#msg { position: fixed; z-index: 10; left: 0; bottom: 0; padding: 10px 5px; text-align: center; color: #fff; background-color: var(--green); width: 100%; }
#msg.info { background-color: var(--blue); }
#msg.warning { background-color: var(--orange); }
#msg.error { background-color: #e00; }




/* MAIN */
main { padding: 20px; line-height: 170%; text-align: left; }




/* FORMS */
input, select, textarea, button { height: 30px; line-height: 30px; padding: 0 8px; border: 1px solid #e5e5e5; border-radius: 2px; font-size: 14px; }
select { padding: 0 4px; }
button { background-color: var(--primary); color: #fff; border: none; user-select: none; }
button.grey { background-color: grey; }
button.ico { padding: 0; margin: 0; border: 0; background: none; height: auto; }
button.ico img { display: block; }

dl { display: grid; grid-template-columns: 200px 1fr; }
dd input, dd select, dd textarea { width: 100%; }
textarea { height: 100px; line-height: 160%; padding-top: 4px; padding-bottom: 4px; }









/* TOOLBAR */
.toolbar { background-color: var(--primary); padding: 10px 20px; margin: 0 -5px 10px; box-shadow: rgba(0,0,0,.2); border-radius: 5px; }
.toolbar button { background-color: var(--grey_light); color: #333; }
.toolbar button:not([disabled]):hover { color: #000; border-bottom: 1px solid #ccc; }
.toolbar button:not([disabled]):active { background-color: #e6e6e6; }
.toolbar input, select, button { font-size: 13px; }
.toolbar button[disabled] { color: #666; }





/* pseudo TABLE */
.table .row { display: grid; padding: 10px 20px; grid-gap: 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.1); margin-bottom: 10px; }
.table .row.thead { border-color: #ddd; }
.table .row.thead a { color: #000; text-decoration: none; }
.table .row div { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; height: 100%; }
.table button { font-size: 12px; }
.table .row:not(.thead):hover { background-color: var(--grey_lighter); }

.table-library .row { grid-template-columns: 1fr 70px 100px 55px; }
.table-library .row .th span { background: #efefef no-repeat center center / cover; display: block; width: 100px; height: 56px; }







/* TRANSITIONS */
.fade-enter-active, .fade-leave-active { transition: opacity .3s; }
.fade-enter, .fade-leave-to { opacity: 0; }

.slide_up-enter-active, .slide_up-leave-active { transition: margin .3s; }
.slide_up-enter, .slide_up-leave-to { margin-bottom: -70px; }




/* VENDORS */
/* .v-lazy-image { opacity: 0.1; transition: opacity 1s; } */
/* .v-lazy-image-loaded { opacity: 1; } */