@charset "UTF-8";
@font-face { font-family: "raleway"; src: url("./raleway.ttf"); }

* {
	box-sizing: border-box;
}

[class*="col-"] { float: left; margin: 0px; }

/* For mobile phones: */
[class*="col-"] { width: 100%; }

[class*="col-"] h2:first-of-type { margin: 0px 0px 5px 0px; }

body { font-family: 'raleway'; padding: 0px; margin: 0px; }
h2 { border-bottom: 1px solid #e4e4e4; padding-bottom: 5px; margin: 30px 0px 10px 0px; }
h3 { border-bottom: 1px solid #e4e4e4; padding-bottom: 5px; margin: 20px 0px 10px 0px; }
fieldset { border: 1px solid #e4e4e4; border-radius: 8px;  }
legend { color: #acaeb0; }
#header { z-index: 50; height: 60px; width: 100%; position: fixed; top: 0px; left: 0px; background: rgb(238,238,238); background: linear-gradient(160deg, rgba(238,238,238,1) 0%, rgba(102,102,102,1) 100%); }
#header h1 { text-align: center; margin: 12px auto; padding: 0px; color: #fbfbfb; height: 38px; overflow: hidden; max-width: 80%; }
#header #logo { background-color: transparent !important; }
#container { z-index: 10; margin-top: 70px; padding-bottom: 40px; }
#logo { margin: 0px; padding: 0px; display: block; float: left; }
#logo:hover { cursor: pointer; }
#logo img { width: 40px; height: 40px; margin: 10px; }
.loader { display: flex; justify-content: center; align-items: center; min-height: 100vh; opacity: 0; }
.loader > img { width: 50%; height: auto; }
body > .loader  { width: 100%; background: url('../images/design/transparent.png') repeat center; position: fixed; width: 100%; height: 100%; z-index: 60; left: 0px; top: 0px; }
body > .loader > img { width: 20%; border-radius: 25%; padding: 1% }

#navigation-switch { display: block; float: right; width: 35px; height: 35px; margin: 14px 10px; border-radius: 1em; background-color: #acacac; cursor: pointer; border: 2px solid white; }

#navigation { position: fixed; background-color: #ececec; left: 0; top: 60px; text-align: left; float: left; padding: 5px 0 5px 0; width: 100%; height: 100%; border-left: 1px solid #444; z-index: 30; display: none; font-size: 150%; }
#navigation:hover { margin-left: 0; }
#navigation h2 { margin-top: 10px; color: white; background-color: #acacac; border-bottom: 1px solid #acaeb0; border-top: 1px solid #acaeb0; padding-bottom: 8px; padding-top: 8px; margin-bottom: 10px; text-align: center; font-size: 90%; }
#navigation h2 icon { display: inline-block; width: 20px; height: 20px; margin-top: -4px; margin-right: 3px; position: relative; top: 4px; }
#navigation ul { list-style-type: none; margin: 0; padding: 0; }
#navigation ul ul { display: none; padding-top: 5%; list-style-type: square; }
#navigation > ul { border-top: 1px solid #acaeb0;  }
#navigation > ul > li { border-left: 6px solid #acaeb0; padding: 5% 0 5% 35px; border-top: 1px solid #e0e2e4; border-bottom: 1px solid #acaeb0; font-size: 90%; }
#navigation > ul > li { border-top: 1px solid #e0e2e4; border-bottom: 1px solid #acaeb0; margin: 0; border-left: 6px solid transparent; }
#navigation > ul > li:hover { background: linear-gradient(to right, #fff 0, #eee 100%); border-left: 6px solid #072142; }
#navigation ul ul li { padding: 5%; border-top: 1px solid #acaeb0; }
#navigation ul ul li:last-of-type { border-bottom: 1px solid #acaeb0; }
#navigation li icon { float: left; margin: 2% 0px 0px -20px; width: 11px; height: 11px; border-radius: 1em; background-size: 50% !important; }
#navigation > ul > li b { font-weight: normal; }
#navigation > ul > li:hover b { font-weight: bold; }
#navigation li strong, #navigation li a:link, #navigation li a:visited { color: gray; }
#navigation a:link, #navigation a:visited { padding-left: 0; color: #072142; text-decoration: none; }
#navigation a:hover, #navigation a:focus, #navigation a:active { padding-left: 5px; text-decoration: none; color: #072142 !important; }


.form, ul.form li, .form td, .form th { position: relative; padding-top: 10px; }
.form legend { margin-left: 10px; }
.form label input[type="text"], .form label input[type="number"], .form label input[type="file"], .form label select  { display: inline-block; padding: 5px !important; margin-top: -6px; }
.form input[type="file"] { text-align: center; background-color: white; }
.form input[type="text"] + label, .form input[type="password"] + label, .form input[type="number"] + label, .form input[type="file"] + label, .form textarea + label, .form select + label { position: absolute; left: 8px; top: 2px; font-size: 14px; display: inline-block; padding: 0px 5px; font-weight: 400; background-color: white; }
.form input[type="text"], .form input[type="password"], .form input[type="number"], .form input[type="file"], .form textarea, .form select { border: 1px solid #dbdbdb; font-size: 1.2em; padding: .8em .5em; border-radius: 5px; display: block; box-sizing: border-box; width: 100%; outline: none; margin: 0px 0px 5px 0px; background-color: white; }
.form span { position: absolute; right: 1px; top: 11px; color: #fff; border-radius: 0px 5px 0px 5px; background-color: #acacac; display: inline-block; text-align: right; max-height: none !important; } 
.form span icon { display: inline-block; width: 45px; height: 45px; margin: 0px 2px -2px 2px; position: relative; top: 0px; padding: 2px; cursor: pointer; }

.form input[type="submit"], .form input[type="button"], .form input[type="reset"] { border-radius: 5px; border: none; cursor: pointer; font-size: 1.2em; line-height: 1.2em; outline: none; padding: .8em 0; }
.form input[type="submit"]:hover, .form input[type="button"]:hover, .form input[type="reset"]:hover, button:hover { text-shadow: 0 1px #999; }
.form input[type="submit"]:disabled, .form input[type="button"]:disabled, .form input[type="reset"]:disabled { background-color: #ddd !important; color: #aaa !important; text-shadow: 0 1px #aaa !important; box-shadow: 0 3px 0 0 #aaa; }
.form input[type="checkbox"], .form input[type="radio"] { display: none; }
.form input[type="checkbox"] + label, .form input[type="radio"] + label { padding-top: 5px; min-height: 30px; color: #777; position: relative; padding-left: 32px; cursor: pointer; display: inline-block; margin-top: 3px; }
.form input[type="checkbox"] + label:before { content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 2px solid #ccc; background: #fff; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); }
.form input[type="checkbox"] + label:after { content: '\2713\0020'; position: absolute; top: 6px; left: 6px; font-size: 1.5em; line-height: 0.8; transition: all .2s; font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial; }
.form input[type="checkbox"]:not(:checked) + label:after, .form input[type="radio"]:not(:checked) + label:after { opacity: 0; }
.form input[type="checkbox"]:checked + label:after, .form input[type="radio"]:checked + label:after { opacity: 1; }
.form input[type="checkbox"]:disabled + label:before, .form input[type="radio"]:disabled + label:before, .form-inline:disabled { box-shadow: none; border-color: #bbb; background-color: #ddd !important; }
.form input[type="checkbox"]:disabled:checked + label:after, .form input[type="radio"]:disabled:checked + label:after { color: #999; }
.form input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border: 2px solid #ccc; background: #fff; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); }
.form input[type="radio"] + label:after { content: '\2022'; position: absolute; top: -22px; left: -11px; font-size: 80px; line-height: 0.8; transition: all .2s; font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial; }
.form input[type="checkbox"]:disabled + label, .form input[type="radio"]:disabled + label, .form input[type="radio"]:checked:disabled + label  { color: #aaa !important; }
.form-inline { border: 1px solid #dbdbdb; font-size: 1.2em; padding: 10px !important; border-radius: 5px; box-sizing: border-box; width: 100%; outline: none; }

.flipswitch { position: relative; width: 40px; display: inline-block; top: 5px; user-select:none; margin-right: 5px; }
.flipswitch-checkbox { display: none; }
.flipswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999; border-radius: 20px; }
.flipswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; }
.flipswitch-inner:before, .flipswitch-inner:after { display: block; float: left; width: 50%; height: 16px; padding: 0; line-height: 16px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; }
.flipswitch-inner:before { content: ''; padding-left: 10px; color: #fff; }
.flipswitch-inner:after { content: ''; padding-right: 10px; background-color: #eee; color: #999; text-align: right; }
.flipswitch-switch { display: block; width: 22px; margin: -1px; background: #fff;  position: absolute; top: 0; bottom: 0; right: 20px; border: 2px solid #999; border-radius: 20px; transition: all 0.3s ease-in 0s; }
.flipswitch-checkbox:checked + .flipswitch-label .flipswitch-inner { margin-left: 0; }
.flipswitch-checkbox:checked + .flipswitch-label .flipswitch-switch { right: 0px; }

.info img { width: 18px; height: 18px; margin-top: -2px; position: relative; top: 2px; }

.box-shadow, #fader, #fader-notify { box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); }

.pulse { animation: pulse 3s infinite ease-in-out; }
.pulse-red { animation: pulse-r 1s infinite; border-color: darkred !important; border-style: solid !important; }
.pulse-red + label, .pulse-red legend { color: darkred !important; }
.pulse-green { animation: pulse-g 1s infinite; border-color: darkgreen !important; border-style: solid !important; }
.pulse-green + label { color: darkgreen !important; }

.dropzone { border: 1px dashed #777; border-radius: 10px; cursor: pointer; }
.dropzone input { width: 0%; height: 0%; visibility: hidden; }
.dropzone img, .dropzone video { width: 96%; height: 96%;  object-fit: contain; }

@keyframes pulse-r {
	0% { box-shadow: 0 0px 4px darkred, 0 0px 4px darkred; }
	50% { box-shadow: 0 0px 4px red, 0 0px 4px red; }
	100% {box-shadow: 0 0px 4px darkred, 0 0px 4px darkred; }
}
   
@keyframes pulse-g {
	0% { box-shadow: 0 0px 4px rgb(109, 109, 109), 0 0px 4px darkgreen; }
	50% { box-shadow: 0 0px 4px green, 0 0px 4px green; }
	100% {box-shadow: 0 0px 4px darkgreen, 0 0px 4px darkgreen; }
}

.fade-in { animation-name: fade-in; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; }
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.fade-out { animation-name: fade-out; animation-duration: 1s; animation-fill-mode: forwards; opacity: 1; }
@keyframes fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

.list-view { margin: 0px; padding: 0px; list-style-type: none; background-color: #fbfbfb; border: 1px solid #e4e4e4; border-radius: 10px; }
.list-view li { padding: .7em 1em; border-bottom: 1px solid #e4e4e4; position: relative; }
.list-view li:hover, .collapsible > li:hover { background-color: #f0f0f0; cursor: pointer; } 
.list-view li strong { display: block; }
.list-view li span { display: block; max-height: 20px; overflow: hidden; }
.list-view picture { display: block; width: 40px; height: 40px; float: left; margin: 0px 5px 0px -10px; background-repeat: no-repeat; background-size:cover; }
.list-view picture img { max-width: 100%; height: auto; }
.list-view li > icon { display: block; position: absolute; right: 10px; top: 50%; margin-top: -11px; min-width: 22px; height: 22px; border-radius: 1em; color: #fff; background-color: #acacac; }
.list-view li > icon[class="count"] { font-size: 80%; padding: 2px 5px; background-color: #acacac; }
.list-view.form input[type="text"] + label, .list-view.form input[type="password"] + label, .list-view.form input[type="number"] + label, .list-view.form input[type="file"] + label, .list-view.form textarea + label, .list-view.form select + label { left: 25px !important; }
.list-view.form input { margin: 12px 0px 10px 0px; }
.list-view.form span { right: 17px; top: 23px; }
.list-view.form input[type="text"] ~ label, .list-view.form input[type="number"] ~ label { top: 14px !important; }
.list-view icon.delete { background-size: 15px; }
.inline { list-style-type: none; margin: 0px; padding: 0px; } 

.collapsible { margin: 0px; padding: 0px; background-color: #fbfbfb; border: 1px solid #e4e4e4; border-radius: 10px; }
.collapsible > li { border-bottom: 1px solid #e4e4e4; }
.collapsible > li strong { display: block; padding: 10px; }
.collapsible > li strong icon { display: block; float: left; width: 19px; height: 19px; background-size: 9px 9px; background-color: #acacac; border-radius: 1em; padding: 2px; margin: 0px 10px 0px 0px; background-position: 5px 5px; }
.collapsible > li div { width: 100%; display: none; border-top: 1px solid #e4e4e4; padding: 10px; background-color: #fff; }
.collapsible .buttons { background-color: #acacac; border-radius: 10px; padding: 5px 5px 0px 5px; text-align: center; }
.collapsible .buttons icon { display: inline-block; min-width: 40px; height: 25px; background-size: 12px 12px; background-position: center; }

button { padding: .7em 1em; font-size: 1.2em; line-height: 1.2em; outline: none; background-color: #fbfbfb; border: 1px solid #e4e4e4; border-radius: 10px; display: block; text-align: center; }
button icon { margin-right: 5px; }
button icon.delete { background-size: 10px; }
icon { background-repeat: no-repeat; background-position: center; }
icon.carat-r, #navigation li icon { background-image: url('../images/iconset/carat-r-white.png'); }
icon.carat-d, #navigation li:hover icon { background-image: url('../images/iconset/carat-d-white.png'); }
icon.action { background-image: url('../images/iconset/action-white.png'); }
icon.open { background-image: url('../images/iconset/open.png'); }
icon.home { background-image: url('../images/iconset/home-white.png'); }
icon.bullets { background-image: url('../images/iconset/bullets-white.png'); }
icon.plus { background-image: url('../images/iconset/plus-white.png'); }
icon.minus { background-image: url('../images/iconset/minus-white.png'); }
icon.forward { background-image: url('../images/iconset/forward-white.png'); }
icon.back { background-image: url('../images/iconset/back-white.png'); }
icon.edit { background-image: url('../images/iconset/edit-white.png'); }
icon.save { background-image: url('../images/iconset/save.png'); }
icon.check { background-image: url('../images/iconset/check-white.png'); }
icon.cancel { background-image: url('../images/iconset/cancel-white.png'); }
icon.carat-l { background-image: url('../images/iconset/carat-l-white.png'); }
icon.carat-u { background-image: url('../images/iconset/carat-u-white.png'); }
icon.carat-r { background-image: url('../images/iconset/carat-r-white.png'); }
icon.carat-d { background-image: url('../images/iconset/carat-d-white.png'); }
icon.arrow-l { background-image: url('../images/iconset/arrow-l-white.png'); }
icon.arrow-u { background-image: url('../images/iconset/arrow-u-white.png'); }
icon.arrow-r { background-image: url('../images/iconset/arrow-r-white.png'); }
icon.arrow-d { background-image: url('../images/iconset/arrow-d-white.png'); }
icon.bars { background-image: url('../images/iconset/bars-white.png'); }
icon.refresh { background-image: url('../images/iconset/refresh-white.png'); }
icon.eye { background-image: url('../images/iconset/eye-white.png'); }
icon.search { background-image: url('../images/iconset/search-white.png'); }
icon.settings { background-image: url('../images/iconset/gear-white.png'); }
icon.calendar { background-image: url('../images/iconset/calendar-white.png'); }
icon.info { background-image: url('../images/iconset/info-white.png'); }
icon.grid { background-image: url('../images/iconset/grid-white.png'); }
icon.delete { background-image: url('../images/iconset/delete.png'); background-size: contain; }
icon.recipe { background-image: url('../images/iconset/recipe-white.png'); background-size: contain; }
icon.folder { background-image: url('../images/iconset/folder.png'); background-size: contain; }
icon.mime-lgf {  background-image: url('../images/iconset/mime_lgf.png'); background-size: contain; }
icon.play { background-image: url('../images/iconset/play-white.png'); background-size: contain; }
icon.pause { background-image: url('../images/iconset/pause.png'); background-size: contain; }
icon.download { background-image: url('../images/iconset/download.png'); background-size: contain; }
icon.upload { background-image: url('../images/iconset/upload.png'); background-size: contain; }
icon.alert { background-image: url('../images/iconset/alert-white.png'); }
icon.male { background-image: url('../images/iconset/male.png'); background-size: contain; }
icon.female { background-image: url('../images/iconset/female.png'); background-size: contain; }
icon.lock { background-image: url('../images/iconset/lock-white.png'); }

.footer { height: 40px; position: fixed; bottom: 0px; left: 0px; background-color: #fbfbfb; width: 100%; z-index: 20; border-top: 1px solid #e4e4e4; }
.footer ul { list-style-type: none; margin: 0px 1% 0 0; padding: 0px; text-align: right; }
.footer li { display: inline-block; position: relative; text-align: center; padding: 8px; font-size: 100%; border-left: 1px solid #e4e4e4; color: #333; }
.footer li:first-of-type { border-left: none; }
.footer li:hover, button:hover { background-color: #f0f0f0; cursor: pointer; }
.footer li icon, button icon { display: block; float: left; width: 19px; height: 19px; background-size: 9px 9px; background-color: #acacac; border-radius: 1em; padding: 2px; margin: 1px 5px 0px -4px; background-position: 5px 5px; }
.footer li b { position: absolute; top: 10px; left: 0px; width: 100%; max-height: 19px; padding-left: 28px; overflow: hidden; display: inline-block; }

#fader div[class*="col-"] {
	background-color: #fff;
	position: relative;
}

#fader, #fader-notify { vertical-align: top; position: relative; background-color: white; }
#fader h2, #fader-notify h2 { margin: 0px; padding: 10px; background-color: #fbfbfb; text-align: center; border-bottom: 1px solid #e4e4e4; }
#fader h2 icon { display: block; float: left; width: 30px; height: 30px; border-radius: 1em; background-color: #acacac; cursor: pointer; }
#fader-content, #fader-notify { min-height: 30vh; max-height: 70vh; overflow-x: hidden; overflow-y: scroll; margin-bottom: 50px; }
#fader ul, #fader-notify ul { list-style-type: none; margin: 5px; padding: 0px; }
#fader .footer, #fader-notify .footer { position: absolute; bottom: 7px; }
#fader .footer icon, #fader-notify .footer icon { float: none; }

#fader-notify h2 { text-align: left; }
#fader-notify p { text-align: left; padding: 10px; }
#fader-transparent { width: 90%; height: 90%; background-repeat: no-repeat; background-position: center; background-size: contain; text-align: right; cursor: pointer; }


/* For desktop: */
@media only screen and (min-width: 768px) {
	.col-1 { width: 8.33%; }
	.col-2 { width: 16.66%; }
	.col-3 { width: 25%; }
	.col-4 { width: 33.33%; }
	.col-5 { width: 41.66%; }
	.col-6 { width: 50%; }
	.col-7 { width: 58.33%; }
	.col-8 { width: 66.66%; }
	.col-9 { width: 75%; }
	.col-10 { width: 83.33%; }
	.col-11 { width: 91.66%; }
	.col-12 { width: 100%; }
	#navigation { width: 200px; margin-left: -190px; display: block; font-size: 100%; }
	#navigation-switch { display: none; }
	#navigation ul > li:hover ul { display: block; }
	.form span { max-height: none; }
	.form span icon { width: 20px; height: 20px; margin: 0px 2px -2px 2px; padding: 2px; }
	#container { padding-left: 10px; }
}

#alert { z-index: 30; position: fixed; bottom: 50px; left: -96%; width: 96%; text-align: center; padding: 20px; opacity: 0.8; font-weight: bold; padding-left: 40px; animation-name: alert-in; animation-duration: 1s; animation-fill-mode: forwards;}
#alert p { display: inline-block; margin: 0px; padding: 0px; text-align: center; }
#alert icon { display: inline-block; width: 25px; height: 25px; border-radius: 1em; padding: 2px; margin: -5px 5px 0px 0px; position: relative; top: 5px; }

.alert-success { background-color: #4CAF50; color: #fff; }
.alert-error { background-color: darkred; color: #fff; }
@keyframes alert-in {
	from { left: -96%; }
	to { left: 2%; }
}

.alert-out { animation-name: alert-out !important; animation-duration: 1s; animation-fill-mode: forwards; }
@keyframes alert-out {
	from { left: 2%; }
	to { left: 196%; }
}

#grid expand { display: flex; float: right; border: 1px solid #e4e4e4; border-radius: 14px; margin-left: 3px; }
#grid expand icon { display: inline-block; width: 28px; height: 28px; background-color: #acacac; border-radius: 14px; cursor: pointer; }
#grid expand input, #grid expand select { display: none; margin: 0px 14px 0px 5px; border: none; width: 140px; outline: none; background-color: #fff; }

.expand-open { animation-name: expand-in; animation-duration: 1s; animation-fill-mode: forwards;  }
.expand-close { animation-name: expand-out; animation-duration: 1s; animation-fill-mode: forwards;  }

@keyframes expand-in {
	from { width: 28px; }
	to { width: 190px; }
}

@keyframes expand-out {
	from { width: 190px; }
	to { width: 28px; }
}