/* ---------------------------
   CSS Reset - http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   --------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}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:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

/* UNIVERSAL */
body {
    background: #f4f6f7;
    color: #262626;
    font-family: "Helvetica Now Display", "Microsoft JhengHei", sans-serif;
    font-size: 12pt;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

b { font-weight: 700 }

p { line-height: 1.5em; font-size: 1rem }

h1 {
    position: relative;
    line-height: 1.2em;
    font-size: 1.5rem;
    letter-spacing: .01rem;
    margin-left: 3%;
}

h1 b { letter-spacing: .03rem }

.padded { width: 94% !important; margin-left: auto; margin-right: auto }

/* MAIN MENU */
#menu {
	position: absolute;
	top: 0; left: 0;
	width: 300px;
	height: 100%;
	background: #262626;
	z-index: 0;
}

#menu .logo {
    display: block;
    width: calc(50% + 1px);
    height: 4.5rem;
	border-right: 1px solid #555;
    background: no-repeat 20px 51%/62% url("../img/logo_white.svg");
    float: left;
}
#menu .logo:hover { background-color: rgba(255, 247, 235, .3) }

#menu .inner-wrap .icons { display: table; border: 1px solid #555; border-left: 0 none; border-right: 0 none; width: 100%; table-layout: fixed }
#menu .inner-wrap .icons .icon {
    cursor: pointer;
	display: table-cell;
	height: 50px;
	background-size: 35%;
	background-position: center;
	background-repeat: no-repeat;
	filter: grayscale(100);
}
#menu .inner-wrap .icons .icon:hover { background-color: rgba(255, 247, 235, .3); filter: grayscale(0) }
#menu .inner-wrap .icons .icon.active { background-color: #fff; filter: grayscale(0) }
#menu .inner-wrap .icons .icon + .icon { border-left: 1px solid #555 }

#menu .inner-wrap .icons .icon:nth-child(1) { background-image: url('../img/toolbar/related.svg') }
#menu .inner-wrap .icons .icon:nth-child(2) { background-image: url('../img/toolbar/all.svg') }
#menu .inner-wrap .icons .icon:nth-child(3) { background-image: url('../img/toolbar/language.svg') }
#menu .inner-wrap .icons .icon:nth-child(4) { background-image: url('../img/toolbar/settings.svg') }

#menu .inner-wrap .menu-tab { display: none; height: calc(100vh - (4.5rem + 70px)); overflow-y: scroll }
#menu .inner-wrap .menu-tab.active { display: block }

#menu .inner-wrap .menu-tab h1 { color: #fff; font-size: .9rem; font-weight: 500; text-transform: uppercase; letter-spacing: .15rem; padding: 25px 0 5px 6px }
#menu .inner-wrap .menu-tab p { border-bottom: 1px solid #555; color: #fff; font-size: .95rem; padding: 10px 15px }
#menu .inner-wrap .menu-tab .link-item { cursor: pointer; display: block; position: relative; color: #fff; letter-spacing: .02rem; font-weight: 500; padding: 15px 15px }
#menu .inner-wrap .menu-tab .link-item:hover { background-color: rgba(255, 247, 235, .3) }
#menu .inner-wrap .menu-tab .link-item + .link-item { border-top: 1px solid #555 }

#menu .inner-wrap .menu-tab .link-item.active { padding-left: 2.6rem }
#menu .inner-wrap .menu-tab .link-item.active::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - .65rem); left: 0;
	height: 1rem;
	width: .6rem;
	border-bottom: 2.5px solid #ed7d31;
	border-right: 2.5px solid #ed7d31;
	transform: rotate(45deg);
	margin-left: 1.25rem;
}

#menu .inner-wrap .menu-tab .link-item.app { position: relative; color: #eee; padding-left: 53px }
#menu .inner-wrap .menu-tab .link-item.app .icon { position: absolute; top: calc(50% - .9rem); left: 13px; width: 1.8rem; height: 1.8rem; background-size: contain }
#menu .inner-wrap .menu-tab .link-item.app span { display: block; color: #aaa; line-height: 1.1em; font-size: .85rem; font-weight: 400; margin-top: 5px; white-space: nowrap; overflow: hidden }
#menu .inner-wrap .lang-sel-inner .loader { margin: 20px auto }


/* MAIN */
#centrepiece {
    position: relative;
    width: 60%;
    height: auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 13px #ddd;
    margin: 20px auto;
    overflow: hidden;
}

#centrepiece #content { position: relative; width: 100%; height: 100%; background: #fff; transition: all .5s cubic-bezier(.65, .05, .36, 1) }
#centrepiece #content.active { transform: translateX(300px) }

#centrepiece #header::after { content: ""; display: table; clear: both }

#centrepiece #header .action {
    cursor: pointer;
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid #ccc;
    border-top: 0 none;
    border-left: 0 none;
    border-bottom-right-radius: 8px;
    background: no-repeat center/42% url("../img/language.svg") #FFF;
    filter: grayscale(100%);
    float: left;
	transition: transform .5s cubic-bezier(.65, .05, .36, 1);
}
#centrepiece #header .action:hover { background-color: #fff7eb; filter: grayscale(0%) }

#centrepiece #header .action.menu { background: no-repeat center/40% url("../img/menu.svg") #FFF }
#centrepiece #header .action.menu:hover { background-color: #fff7eb }
#centrepiece #content.active .action.menu { background: no-repeat center/40% url("../img/close.svg") #FFF }
#centrepiece #content.active .action.menu:hover { background-color: #fff7eb }

#centrepiece #header p {
    position: relative;
    width: calc(100% - 4.5rem);
    color: #262626;
    line-height: 1em;
    font-size: 1.4rem;
    float: left;
    padding: 2.05rem 1.7rem 1.05rem 1.7rem;
}

#centrepiece #header p.frontpage { width: calc(100% - 13.5rem) }
#centrepiece #header p.frontpage span { font-size: 1rem; letter-spacing: .03rem; margin-left: 10px }
#centrepiece #header p.frontpage span::before { content: '|'; margin-right: 8px }

#centrepiece #header p::after {
    content: "";
    position: absolute;
    top: 1.3rem; left: 1.7rem;
    width: 15%;
    height: 5px;
    background-image: repeating-linear-gradient(-45deg, 
    #ed7d31 3px,
    #ed7d31 4.5px,
    transparent 4.5px,
    transparent 8px);
}

#centrepiece #header .logo {
    display: block;
    width: 9rem;
    height: 4.5rem;
    border: 1px solid #ccc;
    border-top: 0 none;
    border-right: 0 none;
    border-bottom-left-radius: 8px;
    background: no-repeat 50% 47%/70% url("../img/logo.svg");
    float: left;
}
#centrepiece #header .logo:hover { background-color: #fff7eb }


/* Search Box */
#centrepiece .search-bar { width: 94%; margin: 10px auto 0 auto }
#centrepiece .search-bar .wrapper { position: relative }
#centrepiece .search-bar #home-search { width: 100%; border: 1px solid #ddd; padding: 10px 35px 10px 10px; box-shadow: none }
#centrepiece .search-bar .clear { cursor: pointer; display: none; position: absolute; top: calc(50% - .85rem); right: 6px; width: 1.7rem; height: 1.7rem; z-index: 1 }
#centrepiece .search-bar .clear:before,
#centrepiece .search-bar .clear:after { content: ""; position: absolute; top: calc(50% - .6rem); right: .75rem; width: 2px; height: 1.2rem; background-color: #888 }
#centrepiece .search-bar .clear:before { transform: rotate(45deg) }
#centrepiece .search-bar .clear:after { transform: rotate(-45deg) }

/* Main Menu*/
#centrepiece .main-menu { border-bottom: 1px solid #ccc; padding: 10px 0; white-space: nowrap; overflow-x: scroll }

#centrepiece .main-menu .item-btn {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #fff;
    font-size: .9rem;
    letter-spacing: .03rem;
    padding: .6rem 1rem;
    transition: .3s;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

#centrepiece .main-menu .item-btn:active { transition: none; box-shadow: inset 1px 2px 2px rgba(0,0,0,.15) }
#centrepiece .main-menu .item-btn:first-child { margin-left: 3% }
#centrepiece .main-menu .item-btn:last-child { margin-right: 3% }
#centrepiece .main-menu .item-btn + .item-btn { margin-left: 10px }
#centrepiece .main-menu .item-btn:hover { background-color: #eee }

section {
    margin-top: 35px;
}

section.tool-panel { margin-top: 15px }

section h1[id^="MENU_TARGET_"],
section h1[class*="MENU_TARGET_"] {
    display: table;
    border-radius: 8px;
    padding: 6px 7px 5px 7px;
    margin: -5px calc(3% - 7px);
    transition: box-shadow, font-weight .5s cubic-bezier(0.645,  0.045, 0.355, 1.000);
}
section h1.highlight { display: table; outline: 2px solid #ed7d31; font-weight: 500; box-shadow: 0 0 15px #ed7d31 }

/* GRIDPIECE */
.table-grid-menu {
    display: block;
    width: 100%;
    border-top: 1px solid #eee;
    table-layout: fixed;
    margin-top: 1.4rem;
}

.table-grid-menu::after { content: ""; display: table; clear: both }

.table-grid-menu .grid-cell {
    display: table-cell;
    width: 20%;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    float: left;
    padding: 1.5rem 1.4rem;
}

.table-grid-menu .grid-cell:hover { background: #fff7eb }
.table-grid-menu .grid-cell:hover h2 { color: #d37d23 }

.table-grid-menu .grid-cell .icon {
    width: 3.6rem;
    height: 3.6rem;
    background-size: 100%;
    background-position: center;
    margin: 0 0 1.2rem 0;
}

.table-grid-menu .grid-cell h2 {
    height: 2em;
    line-height: 1.1em;
    font-size: 1.2rem;
    font-weight: 700;
	letter-spacing: .03rem;
    margin-bottom: .8rem;
}

.table-grid-menu .grid-cell p { display: -webkit-box; height: 5.9em; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; line-height: 1.5em; font-size: .95rem; letter-spacing: .04rem; overflow: hidden }


/* FOOTER */
footer { width: 100% }

footer ul { background: #f5f5f5; padding: 5px 3%; overflow: auto }
footer ul li { display: block; position: relative; width: 100%; float: left; overflow: auto }
footer ul li::before,
footer ul li::after {
	content: "";
	position: absolute;
	background: #666;
	-moz-transition: all 200ms ease-in-out;
	-webkit-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

footer ul li::before { top: calc(.725rem + 3.5px); right: 1px; width: 9px; height: 1px }
footer ul li::after { top: calc(.725rem - 0.5px); right: 5px; width: 1px; height: 9px }
footer ul li.active::before,
footer ul li.active::after { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg) }
footer ul li + li { border-top: 1px solid #ccc }
footer ul li h6 { cursor: pointer; display: block; width: 100%; font-size: .85rem; letter-spacing: .02rem; float: left; padding: .6rem 0 }
footer ul li h6:hover { color: #d37d23 }
footer ul li.active h6 { color: #d37d23; font-weight: 700 }
footer ul li div { display: none; width: 100%; line-height: 1.4em; font-size: .85rem; letter-spacing: .01rem; float: left; padding: 5px 0 15px 0 }
footer ul li div.highlight { border-left: 3px solid #ccc; line-height: 1.6em; font-size: .9rem; padding: 0 0 0 .88rem; margin: .3rem 0 .8rem 0 }

footer p { background: #262626; color: #fff; font-size: .8rem; padding: .7rem 3% 1.2em 3% }

/* MODULES */
/* Lightbox */
.popup-bg {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9998;
}

.popup-wrapper {
    position: fixed;
    top: 40px; left: 0; bottom: 0; right: 0;
    overflow-y: scroll;
    z-index: 9999;
    opacity: 0;
    -webkit-visibility: hidden;
    visibility: hidden;
    transition: 400ms all ease-in-out;
}

.popup-wrapper.active {
    top: 0;
    opacity: 1;
    visibility: visible;
}

.popup-wrapper .popup-window {
    position: relative;
    width: 40%;
    height: 1000px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .9);
    color: #262626;
    padding: 20px;
    margin: 40px auto;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.1);
}

.popup-wrapper .popup-window .close {
    position: absolute;
    top: 10px; right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: #DDD;
    opacity: 0.5;
    z-index: 9999;
}

.popup-wrapper .popup-window .close:hover { opacity: 1 }

.popup-wrapper .popup-window .close:before,
.popup-wrapper .popup-window .close:after {
    content: "";
    position: absolute;
    top: 7.5px; left: 19.5px;
    height: 25px;
    width: 1px;
    background-color: #222;
}

.popup-wrapper .popup-window .close:before { transform: rotate(45deg) }
.popup-wrapper .popup-window .close:after { transform: rotate(-45deg) }

.popup-wrapper .popup-window.options-panel { width: 35%; height: auto; padding: 25px 0 15px 0 }
.popup-wrapper .popup-window.options-panel .option-row { display: table; width: 100%; table-layout: fixed; padding: 5px 5% }
.popup-wrapper .popup-window.options-panel .option-row + .option-row { border-top: 1px solid #ddd }
.popup-wrapper .popup-window.options-panel .option-row .option-cell { display: table-cell; vertical-align: middle; padding: .5rem 0 }
.popup-wrapper .popup-window.options-panel .option-row .option-cell:first-child { width: 4.5rem }

.popup-wrapper .popup-window.options-panel .option-row .option-cell h3 { line-height: 1.15em; font-size: 1rem; font-weight: 500; letter-spacing: .04rem; margin-bottom: 2px }
.popup-wrapper .popup-window.options-panel .option-row .option-cell p { line-height: 1.2em; font-size: .8rem; letter-spacing: 0.03rem }

@media only screen and (max-width: 768px) {
    .popup-wrapper .popup-window { width: 92%; margin: 15px }
    .popup-wrapper .popup-window.lang-sel { width: 90% }
    .popup-wrapper .popup-window.options-panel { width: 92%; margin: 15px 4% }
}

/* Tabs */
.tabs {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border: 3px solid #eee;
	border-bottom: 0 none;
	width: 94%;
	background: #eee;
	margin: 2% auto 0 auto;
	white-space: nowrap;
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none }

.tabs .tabs-btn {
    display: inline-block;
    cursor: pointer;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
	color: #000;
    font-size: .95rem;
    font-weight: 500;
	letter-spacing: .04rem;
    padding: .9rem 1.2rem;
    transition: 0.3s;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tabs .tabs-btn:hover { color: #777 }
.tabs .tabs-btn.active { background-color: #fff; color: #651481 }

.tabs-content {
    display: none;
    border: 3px solid #eee;
	border-top: 0 none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #fff;
    padding: 2% 3% 2% 3%;
    margin: 0 3% 3% 3%;
}

.tabs-content p,
.tabs-content li { color: #262626; line-height: 1.6em; font-size: 1.1rem; letter-spacing: .025rem }
.tabs-content li { margin-left: 2px }

.module.plain .tabs { border: 0 none; background: none; margin-top: 0 }
.module.plain .tabs .tabs-btn {
    border-bottom: 2px solid transparent;
    border-radius: 0;
	font-size: 1.05rem;
    margin-top: 0;
	margin-bottom: 0;
    padding: .7rem 0;
    box-shadow: none;
}
.module.plain .tabs .tabs-btn + .tabs-btn { margin-left: 15px }
.module.plain .tabs .tabs-btn:hover { border-bottom: 2px solid #ccc; background-color: unset }
.module.plain .tabs .tabs-btn.active { border-bottom: 2px solid #ed7d31; background-color: unset; color: #262626 }
.module.plain .tabs-content { border: 0 none; padding: 0 3%; margin: 20px 0 0 0; box-shadow: none }

.module.file-upload { position: relative; border-radius: 8px; border: 2px dashed #ccc; text-align: center; overflow: hidden }
.module.file-upload * { pointer-events: none }
.module.file-upload input[type="file"] { display: none }
.module.file-upload .inner { cursor: pointer; padding: 12% 20% 11% 20% }
.module.file-upload .inner .icon-row { display: flex; justify-content: center }
.module.file-upload .inner .icon-row img { position: relative; width: 3.5rem; height: 2.3rem; padding: 0 .7rem; opacity: .4; pointer-events: auto }
.module.file-upload .inner .icon-row img:hover { opacity: 1 }
.module.file-upload .inner .icon-row img + img { border-left: 1px solid #CCC }
.module.file-upload .inner span { display: block; color: #777; line-height: 1.2em; font-size: .9rem; letter-spacing: .02rem; margin: 10px 0 20px 0; word-wrap: break-word }
.module.file-upload .inner input { width: auto; padding: .6rem 15px; margin: 0 auto; pointer-events: auto }
.module.file-upload .drop-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.6) }
.module.file-upload .drop-overlay.active { display: table }
.module.file-upload .drop-overlay span { display: table-cell; color: #FFF; font-weight: 700; letter-spacing: .02rem; vertical-align: middle }

/* Forms */
label {
    display: table;
    line-height: 1.4em;
    font-size: .9rem;
    letter-spacing: .02rem;
}

input, textarea, select, .viewbox {
    border: 1px solid #ccc;
    border-radius: 8px;
    background: none;
    font-family: "Helvetica Now Display", sans-serif;
    font-size: 12pt;
    letter-spacing: .03rem;
    padding: .65rem 1rem;
    box-shadow: 2px 2px 1px rgba(0,0,0,.15);
}

select { padding: .584rem .75rem .59rem .75rem }
input:active { box-shadow: inset 1px 3px 2px rgba(0,0,0,.2) }

input:focus,
textarea:focus,
select:focus { outline: 2px solid #ed7d31 }

input.fullwidth,
textarea.fullwidth,
select.fullwidth { width: 100% }
input[type="button"].action { display: block; width: 100%; border: 1px solid #ed7d31; background: #ed7d31; color: #fff; font-weight: 700 }

input.viewer,
textarea.viewer,
.viewbox {
    font-size: 18pt;
    letter-spacing: .05rem;
    padding: 15px 20px;
    margin: 20px 0 0 3%;
}

.viewbox { line-height: 1.5em; padding: 20px 25px }

textarea.readonly { resize: none }
textarea.longcode { display: block; height: 12em; line-height: 1.4em; font-family: "Red Hat Mono", sans-serif; padding: 20px; margin: 0 auto }

.btn-loader-wrapper { position: relative }
.btn-loader-wrapper .loader { position: absolute; top: calc(50% - .66rem); left: calc(50% - .66rem) }

.input-cell-adaptive { display: table; position: relative; width: 100%; table-layout: auto; }
.input-cell-adaptive div,
.input-cell-adaptive label { display: table-cell }

.input-cell-adaptive div {
    width: 100%;
    max-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.input-cell-adaptive div input { border-top-right-radius: 0; border-bottom-right-radius: 0 }
.input-cell-adaptive select { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: .6rem .2rem .55rem .6rem }

.input-cell-adaptive label {
	display: block;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
	border: 1px solid #ccc;
	border-left: 0 none;
    background: #fff;
    font-weight: 500;
    padding: .72rem 10px .65rem 12px;
    box-shadow: 2px 2px 1px rgba(0,0,0,.15);
	vertical-align: 7%;
    white-space: nowrap;
}

/* Radio */
.radio-wrapper {
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin: 10px 0;
    font-size: .9rem;
	letter-spacing: .04rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.radio-wrapper + .radio-wrapper { margin-left: 20px }
.radio-wrapper input { cursor: pointer; position: absolute; opacity: 0 }

.radio-btn {
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
	border: 1px solid #ccc;
    border-radius: 100%;
    background-color: #fff;
    float: left;
    margin: -2px 10px 0 0;
    box-shadow: inset 1px 2px 2px rgba(0,0,0,.15);
}

.radio-wrapper:hover input ~ .radio-btn { border-width: 2px }
.radio-wrapper:active input ~ .radio-btn { box-shadow: inset 1px 3px 2px rgba(0,0,0,.2) }
.radio-wrapper input:checked ~ .radio-btn { border: 2px solid #ed7d31; box-shadow: none; }

.radio-btn::after { content: ""; position: absolute; display: none }
.radio-wrapper input:checked ~ .radio-btn:after { display: block }

.radio-wrapper .radio-btn::after {
	top: calc(50% - 6px); left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #ed7d31;
}

/* Toggle Button */
.switch {
	display: inline-block;
    position: relative;
    width: 3.2rem;
    height: 2rem;
    -webkit-tap-highlight-color: transparent;
}

.switch input { width: 0; height: 0; opacity: 0 }

.switch .slider {
	cursor: pointer;
	position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    border: 1px solid #cfcfcf;
    border-radius: 2rem;
    background-color: #eee;
    overflow: hidden;
}

.switch .slider:active { box-shadow: inset 1px 2px 3px rgba(255,255,255,.3) }
.switch .slider,
.switch .slider:before {
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.switch .slider:before {
	content: "";
    position: absolute;
    top: calc(50% - 0.86rem); left: .08rem;
    width: 1.72rem;
    height: 1.72rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 1.5px 2px 5px rgba(0,0,0,.3);
}

.switch input:checked + .slider { border-color: #ed7d31; background: #ed7d31 }

.switch input:checked + .slider:before {
	-webkit-transform: translateX(1.2rem);
    -ms-transform: translateX(1.2rem);
    transform: translateX(1.2rem);
}

/* Loader */
.loader {
    display: grid;
    width: 1.5rem;
    border-radius: 50%;
    background:
        linear-gradient(0deg, rgb(9,13,69,.5) 27%, #0000 0 73%, rgb(9,13,69,1) 0) 50%/8% 100%,
        linear-gradient(90deg, rgb(9,13,69,.25) 27%, #0000 0 73%, rgb(9,13,69,.75) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    aspect-ratio: 1;
    animation: rotary 1s infinite steps(12);
}

.loader.white {
    background:
        linear-gradient(0deg, rgb(255,255,255,.6) 27%, #0000 0 73%, rgb(255,255,255,1) 0) 50%/8% 100%,
        linear-gradient(90deg, rgb(255,255,255,.4) 27%, #0000 0 73%, rgb(255,255,255,.8) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: rotaryne 1s infinite steps(12);
}

.loader.small { width: 1.3rem }

.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.915;
    transform: rotate(30deg);
}

.loader::after { opacity: 0.83; transform: rotate(60deg) }
@keyframes rotary { 100% { transform: rotate(1turn) } }
@keyframes rotaryne { 100% { transform: rotate(1turn) } }

@media only screen and (max-width: 1520px) {
    #centrepiece { width: 75% }
}

@media only screen and (max-width: 1280px) {
    #centrepiece { width: calc(100% - 40px) }
}

@media only screen and (max-width: 768px) {
    h1 { font-size: 1.3rem }
    
    #menu { width: 270px }
    #menu .inner-wrap .logo { height: calc(3.4rem - 1px); background-size: 60%; background-position: 15px }
    #menu .inner-wrap .menu-tab { display: none; height: calc(100vh - 10.2rem); height: calc(100svh - (3.4rem + 51px)); overflow-y: scroll }
    #menu .inner-wrap .menu-tab .link-item.app span { font-size: .8rem }

    #centrepiece { width: 100%; border-radius: 0; box-shadow: 0 none; margin: 0 }
    #centrepiece #content { width: 100%; -webkit-text-size-adjust: none; text-size-adjust: none }
    #centrepiece #content.active { transform: translateX(270px) }
    
    #centrepiece #header .action { width: 3.4rem; height: 3.4rem }
    
    #centrepiece #header p {
        width: calc(100% - 3.4rem);
        line-height: 1.2em;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .03rem;
        padding: 1.5rem .9rem .35rem .9rem;
    }
    
    #centrepiece #header p::after { top: 1rem; left: .9rem; height: 5px; width: 30% }

    #centrepiece #header p.frontpage {
        width: calc(100% - 9.9rem);
        line-height: 1.2em;
        font-size: .9rem;
        font-weight: 500;
        padding: .68rem .9rem .3rem .9rem;
    }
	#centrepiece #header p.frontpage span { display: block; font-size: .9rem; font-weight: 400; letter-spacing: .02rem; margin-left: 0 }
	#centrepiece #header p.frontpage span::before { content: unset; margin-right: 0 }

    #centrepiece #header p.frontpage::after { display: none }
    #centrepiece #header .logo { width: 6.5rem; height: 3.4rem; background-size: 75%; background-position: center; }
    
    #centrepiece .main-menu::-webkit-scrollbar { display: none }
    #centrepiece .main-menu .item-btn { font-size: .85rem; -webkit-tap-highlight-color: transparent }
    #centrepiece .main-menu .item-btn + .item-btn { margin-left: 7px }
    
    section { margin-top: 30px }
    section:first-of-type { margin-top: 20px }
    section.tool-panel { margin-top: 10px }

    .table-grid-menu { margin-top: 1rem }
    
    .table-grid-menu .grid-cell { width: calc(100% / 3); padding: .8rem .4rem .85rem .7rem; -webkit-tap-highlight-color: transparent }
    
    .table-grid-menu .grid-cell:hover { background: unset }
    .table-grid-menu .grid-cell:hover h2 { color: unset }
    .table-grid-menu .grid-cell:active { background: #fff7eb }
    .table-grid-menu .grid-cell:active h2 { color: #d37d23 }
    
    .table-grid-menu .grid-cell .icon { width: 2.5rem; height: 2.5rem; margin: 0 0 .7rem 0 }
    .table-grid-menu .grid-cell h2 { height: 1.7em; line-height: 1.1em; font-size: 1rem; letter-spacing: .02rem }
    .table-grid-menu .grid-cell p { height: 5.1em; line-height: 1.3em; font-size: .85rem; letter-spacing: .02rem }

    footer { margin-top: 20px }
    footer ul li::before { top: calc(.9rem + 1px); right: .5px; width: 8px; height: 1px }
    footer ul li::after { top: calc(.9rem - 2.5px); right: 4px; width: 1px; height: 8px }
    footer span { line-height: 1.2em; font-size: .6rem; padding: 1rem 3% 1.3em 3% }
    footer p { font-size: .8rem; padding: .6rem 3% 1.2em 3% }
    
    /* MODULES */
    /* Forms */
    label { font-size: .85rem; letter-spacing: .02rem }
    input, textarea, select, .viewbox { border: 1px solid #ddd; font-size: .95rem; padding: .7rem .8rem; box-shadow: 1px 1px 3px rgba(0,0,0,.2) }
    select { padding: .65rem .6rem .85rem .6rem }
    input.viewer,
    textarea.viewer,
    .viewbox { font-size: 1.3rem; letter-spacing: .03rem }
    .viewbox { text-align: center; line-height: 1.5em; padding: 20px 5% }

	.input-cell-adaptive label { box-shadow: 1px 1px 3px rgba(0,0,0,.2) }
	.input-cell-adaptive select { padding: .65rem .2rem .8rem .5rem }
    
    .radio-wrapper { display: table; margin: 0 }
	.radio-wrapper + .radio-wrapper { margin-top: 13px; margin-left: 0 }
    
    /* Tabs */
    .tabs { margin-top: 4% }
    .tabs .tabs-btn { letter-spacing: .03rem; padding: .9rem 1rem .95rem 1rem }
    .tabs-content { padding: 3.5% 4% 3% 4% }
    .tabs-content p,
    .tabs-content li { color: #333; line-height: 1.7em; font-size: 1rem; letter-spacing: .04rem }
    .tabs-content li { line-height: 1.4em }
    
    .module.plain .tabs { margin-bottom: 20px }
    .module.plain .tabs .tabs-btn { font-size: .95rem; padding: .7rem 0 }
    
    .module.file-upload .inner { padding: 12% 15% 11% 15% }
}