/* 
 * Quicksilver
 * Basic CSS Framework for MercurioHG Applications
 * 
 * Code Copyright (c) 2016 Rafael Henrique
 * This content is released under the MIT License (MIT)
 * 
 * The MIT License (MIT)
 * 
 * Copyright (c) 2016 Rafael Henrique
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

/* ============================================================================
 Mercurio - basic values (colors, sizes, etc)
 ============================================================================ */
@import url("qs-theme-light.css");



/* ============================================================================
 Fonts
 ============================================================================ */
@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  src: url('../fonts/Roboto-300/Roboto-300.eot');
  src: url('../fonts/Roboto-300/Roboto-300.eot?#iefix') format('embedded-opentype'),
       local('Roboto Light'),
       local('Roboto-300'),
       url('../fonts/Roboto-300/Roboto-300.woff2') format('woff2'),
       url('../fonts/Roboto-300/Roboto-300.woff') format('woff'),
       url('../fonts/Roboto-300/Roboto-300.ttf') format('truetype'),
       url('../fonts/Roboto-300/Roboto-300.svg#Roboto') format('svg');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Roboto-regular/Roboto-regular.eot');
  src: url('../fonts/Roboto-regular/Roboto-regular.eot?#iefix') format('embedded-opentype'),
       local('Roboto'),
       local('Roboto-regular'),
       url('../fonts/Roboto-regular/Roboto-regular.woff2') format('woff2'),
       url('../fonts/Roboto-regular/Roboto-regular.woff') format('woff'),
       url('../fonts/Roboto-regular/Roboto-regular.ttf') format('truetype'),
       url('../fonts/Roboto-regular/Roboto-regular.svg#Roboto') format('svg');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/Roboto-700/Roboto-700.eot');
  src: url('../fonts/Roboto-700/Roboto-700.eot?#iefix') format('embedded-opentype'),
       local('Roboto Bold'),
       local('Roboto-700'),
       url('../fonts/Roboto-700/Roboto-700.woff2') format('woff2'),
       url('../fonts/Roboto-700/Roboto-700.woff') format('woff'),
       url('../fonts/Roboto-700/Roboto-700.ttf') format('truetype'),
       url('../fonts/Roboto-700/Roboto-700.svg#Roboto') format('svg');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Roboto-Condensed-regular/Roboto-Condensed-regular.eot');
  src: url('../fonts/Roboto-Condensed-regular/Roboto-Condensed-regular.eot?#iefix') format('embedded-opentype'),
       local('Roboto Condensed'),
       local('Roboto-Condensed-regular'),
       url('../fonts/Roboto-Condensed-regular/Roboto-Condensed-regular.woff2') format('woff2'),
       url('../fonts/Roboto-Condensed-regular/Roboto-Condensed-regular.woff') format('woff'),
       url('../fonts/Roboto-Condensed-regular/Roboto-Condensed-regular.ttf') format('truetype'),
       url('../fonts/Roboto-Condensed-regular/Roboto-Condensed-regular.svg#RobotoCondensed') format('svg');
}



/* ============================================================================
 Mercurio - basic css styles
 ============================================================================ */
html{ font-size:9px; /* base font site to use with REMs (10px) */ }
body{
    font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:var(--fontweight-default);font-size:1.4rem;line-height:1.3;
    margin:0;padding:0;overflow-y:scroll;
    background-color:var(--bgcolor_default);color:var(--color_default);
}
* { -webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box; }
article,section{ margin:0 0 7.2rem 0; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:"Roboto Condensed","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:var(--fontweight-strong); }
h1,.h1{ font-size:3.2rem; }
h2,.h2{ font-size:2.6rem; }
h3,.h3{ font-size:2.0rem; }
h4,.h4{ font-size:1.8rem; }
h5,.h5{ font-size:1.7rem; }
h6,.h6{ font-size:1.6rem; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ margin:3.2rem 0 1rem 0; }
hgroup{ margin:3.2rem 0 1rem 0; }
hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{ margin:0; }
hr{ border:none;border-bottom:1px dotted var(--bordercolor_default);margin:1.6rem 0; }
p{ margin:0 0 1rem 0; }
code{ background-color:#282b2e;background-color:rgba(40,43,46,.75);color:#EEE;padding:0 2px;border-radius:2px; }
pre{  }
blockquote{  }
blockquote footer{ font-size:80%; }
blockquote footer::before{ content:'\2014 \00A0'; }
a,a:link,a:visited,a:hover,a:active{ color:var(--color_highlight); }
a:link,a:visited{ text-decoration:underline; }
a:hover,a:active{ text-decoration:none; }

/* Helper classes */
.pull-left{ float:left !important; }
.pull-right{ float:right !important; }
.show {display:block !important;}
.hidden {display:none !important;}
.invisible {visibility:hidden;}

.ellipsis {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ellipsis:not(td,th) {width:100%;}
td.ellipsis, th.ellipsis {max-width:0;}



/* ============================================================================
 Structural styles - used for macro page alignment
 ============================================================================ */
.str-center{ position:relative;margin-left:auto;margin-right:auto;width:100%;max-width:1280px; }
.str-clearfix:before,.str-clearfix:after { content:" ";display:table; }
.str-clearfix:after { clear:both; }
.str-clearfix { *zoom:1; }

.str-table{ display:table;width:100%;vertical-align:top }
.str-cell{ display:table-cell;vertical-align:top }
.left{ text-align:left; }
.right{ text-align:right; }
/*
.str-cell:first-child{ text-align:left }
.str-cell:last-child{ text-align:right }
*/



/* ============================================================================
 Page Layout styles - used for macro page layout
 ============================================================================ */
#wrapper{  }
#wrapper > header{ padding:1.6rem; }
#wrapper > main{ padding:0.8rem 1.6rem; }
#wrapper > footer{ padding:1.6rem 1.6rem 6.4rem 1.6rem;border-top:1px dotted var(--bordercolor_default); }
.str-wrapper > *{ padding:1.6rem; }

/*
#wrapper > header{ position:fixed;top:0;z-index:1;height:50px;padding:10px;display:table;color:#d2d5d7;background-color:#1d2022; }
#wrapper > header > *{ display:table-cell;vertical-align:middle;width:50%; }
#wrapper > header > *:first-child{ text-align:left }
#wrapper > header > *:last-child{ text-align:right }
#wrapper > header h4{ margin:0;padding:0;text-transform:uppercase; }
#wrapper > header h4 a,#wrapper > header h4 a:link,#wrapper > header h4 a:visited{ color:#d2d5d7;text-decoration:none; }
#wrapper > header h4 a:hover,#wrapper > header h4 a:active{ color:#fff;text-decoration:underline; }
#wrapper > header input[name=search]{ width:200px;line-height:1.5;padding:0 10px; }
*/




/* ============================================================================
 Material Icons Font - from Google Material Design
 http://google.github.io/material-design-icons/#icon-font-for-the-web
 ============================================================================ */
@font-face{
    font-family:'Material Icons';
    font-style:normal;
    font-weight:var(--fontweight-strong);
    src:url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src:local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons{
    font-family:'Material Icons';
    font-weight:normal;
    font-style:normal;
    font-size:3.6rem;  /* Preferred size: 18px, 24px, 36px, 48px */
    vertical-align:sub;
    
    display:inline-block;
    line-height:1;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:normal;
    white-space:nowrap;
    direction:ltr;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings:'liga';
}




.hero{
    position:relative;
    /*padding:3.2rem 3.2rem 4.0rem 3.2rem;*/
    padding:1.6rem 1.6rem 2.0rem 2.4rem;
    margin:0 0 1rem 0;
    border-radius:4px;
    
    color:var(--color_inverse);
    background-color:var(--semantic_bgcolor_default);
    background:-moz-linear-gradient(left, var(--semantic_bgcolor_default-75) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--semantic_bgcolor_default-75) 25%, transparent 100%);
    background:linear-gradient(to right, var(--semantic_bgcolor_default-75) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf434857', endColorstr='#00434857',GradientType=1 );
}
.hero.primary{
    background-color:var(--semantic_color_primary);
    background:-moz-linear-gradient(left,  var(--semantic_color_primary-75) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--semantic_color_primary-75) 25%, transparent 100%);
    background:linear-gradient(to right, var(--semantic_color_primary-75) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf1ca8dd', endColorstr='#001ca8dd',GradientType=1 );
}
.hero.success{
    background-color:var(--semantic_color_success);
    background:-moz-linear-gradient(left, var(--semantic_color_success-75) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--semantic_color_success-75) 25%, transparent 100%);
    background:linear-gradient(to right, var(--semantic_color_success-75) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf398439', endColorstr='#00398439',GradientType=1 );
}
.hero.info{
    background-color:var(--semantic_color_info);
    background:-moz-linear-gradient(left, var(--semantic_color_info-75) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--semantic_color_info-75) 25%, transparent 100%);
    background:linear-gradient(to right, var(--semantic_color_info-75) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf286090', endColorstr='#00286090',GradientType=1 );
}
.hero.warning{
    background-color:var(--semantic_color_warning);
    background:-moz-linear-gradient(left, var(--semantic_color_warning-75) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--semantic_color_warning-75) 25%, transparent 100%);
    background:linear-gradient(to right, var(--semantic_color_warning-75) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfff8800', endColorstr='#00ff8800',GradientType=1 );
}
.hero.danger{
    background-color:var(--semantic_color_danger);
    background:-moz-linear-gradient(left, var(--semantic_color_danger-75) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--semantic_color_danger-75) 25%, transparent 100%);
    background:linear-gradient(to right, var(--semantic_color_danger-75) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfc9302c', endColorstr='#00c9302c',GradientType=1 );
}

.hero.cyan{
    background-color:var(--color_cyan);
    background:-moz-linear-gradient(left, var(--color_cyan) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--color_cyan) 25%, transparent 100%);
    background:linear-gradient(to right, var(--color_cyan) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf00ACC1', endColorstr='#0000ACC1',GradientType=1 );
}
.hero.purple{
    background-color:var(--color_purple);
    background:-moz-linear-gradient(left, var(--color_purple) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--color_purple) 25%, transparent 100%);
    background:linear-gradient(to right, var(--color_purple) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9C27B0', endColorstr='#009C27B0',GradientType=1 );
}
.hero.darkpurple{
    background-color:var(--color_darkpurple);
    background:-moz-linear-gradient(left, var(--color_darkpurple) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--color_darkpurple) 25%, transparent 100%);
    background:linear-gradient(to right, var(--color_darkpurple) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf4A148C', endColorstr='#004A148C',GradientType=1 );
}
.hero.amber{
    background-color:var(--color_amber);
    background:-moz-linear-gradient(left, var(--color_amber) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--color_amber) 25%, transparent 100%);
    background:linear-gradient(to right, var(--color_amber) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfFFA000', endColorstr='#00FFA000',GradientType=1 );
}



.hero h1,.hero h2,.hero h3,.hero h4,.hero h5,.hero h6{ margin:0; }
.hero h1,.hero .h1{ font-size:3.84rem; }
.hero h2,.hero .h2{ font-size:3.12rem; }
.hero h3,.hero .h3{ font-size:2.4rem; }
.hero h4,.hero .h4{ font-size:2.16rem; }
.hero h5,.hero .h5{ font-size:2.04rem; }
.hero h6,.hero .h6{ font-size:1.92rem; }
.hero p{ font-family:"Roboto Condensed","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:var(--fontweight-strong);font-size:1.7rem; }

.hero .material-icons{ /*font-size:inherit;*/line-height:inherit;opacity:0.6; }




.thumbnail{
    display:inline-block;
    position:relative;
    width:200px;/* default size, you may override if needed */
    /*height:200px;*/
    
    overflow:hidden;
    
    padding:8px;
    
    text-align:center;
    border:1px solid transparent;
    background-color:transparent;
    transition:all .25s ease-in-out;
}
.thumbnail.crop > img{
    object-fit:cover;
    height:100%;
    width:100%;
}

.thumbnail__1.crop > img{
    position:absolute;
    left:-1000%;
    right:-1000%;
    top:-1000%;
    bottom:-1000%;
    margin:auto;
    min-height:100%;
    min-width:100%;
    width:auto;
    height:auto;
}
.thumbnail__2{
    display:inline-block;
    position:relative;
    width:250px;
    height:250px;
    border:16px solid #434857;
    background-color:transparent;
    transition:border .15s ease-in-out, background-color .15s ease-in-out;
}
.thumbnail__2.crop > img{
    object-fit:cover;
    height:100%;
    width:100%;
}

.thumbnail.active, .thumbnail:focus, .thumbnail:hover{
    background-color:rgba(28,168,221,.25);
    border:1px solid var(--color_highlight);
}




/* ============================================================================
 Grid System - 12 columns
 ============================================================================ */
.grid12{}
.grid12:before,.grid12:after { content:" ";display:table; }
.grid12:after { clear:both; }

[class*="grid12-"]{float:left;margin:0;/*padding:16px;*/}
.grid12-1{width:8.333333%;width:calc(1 / 12 * 100%);}
.grid12-2{width:16.666666%;width:calc(2 / 12 * 100%);}
.grid12-3{width:25%;width:calc(3 / 12 * 100%);}
.grid12-4{width:33.333333%;width:calc(4 / 12 * 100%);}
.grid12-5{width:41.666666%;width:calc(5 / 12 * 100%);}
.grid12-6{width:50%;}
.grid12-7{width:58.333333%;width:calc(7 / 12 * 100%);}
.grid12-8{width:66.666666%;width:calc(8 / 12 * 100%);}
.grid12-9{width:75%;}
.grid12-10{width:83.333333%;width:calc(10 / 12 * 100%);}
.grid12-11{width:91.666666%;width:calc(11 / 12 * 100%);}
.grid12-12{width:100%;}



/* ============================================================================
 Grid System - Flexbox 12 columns
 ============================================================================ */
.flexgrid12{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    align-content:flex-start;
    flex-wrap:nowrap;
    justify-content:center;
}
.flexgrid12:before,.flexgrid12:after { content:" ";display:table; }
.flexgrid12:after { clear:both; }

.flexgrid12 [class*="flexgrid12-"]{ flex-grow:0;flex-shrink:0;flex-basis:auto; }
.flexgrid12 .flexgrid12-1{ flex-basis:8.333333%;flex-basis:calc(1 / 12 * 100%); }
.flexgrid12 .flexgrid12-2{ flex-basis:16.666666%;flex-basis:calc(2 / 12 * 100%); }
.flexgrid12 .flexgrid12-3{ flex-basis:25%;flex-basis:calc(3 / 12 * 100%); }
.flexgrid12 .flexgrid12-4{ flex-basis:33.333333%;flex-basis:calc(4 / 12 * 100%); }
.flexgrid12 .flexgrid12-5{ flex-basis:41.666666%;flex-basis:calc(5 / 12 * 100%); }
.flexgrid12 .flexgrid12-6{ flex-basis:50%; }
.flexgrid12 .flexgrid12-7{ flex-basis:58.333333%;flex-basis:calc(7 / 12 * 100%); }
.flexgrid12 .flexgrid12-8{ flex-basis:66.666666%;flex-basis:calc(8 / 12 * 100%); }
.flexgrid12 .flexgrid12-9{ flex-basis:75%; }
.flexgrid12 .flexgrid12-10{ flex-basis:83.333333%;flex-basis:calc(10 / 12 * 100%); }
.flexgrid12 .flexgrid12-11{ flex-basis:91.666666%;flex-basis:calc(11 / 12 * 100%); }
.flexgrid12 .flexgrid12-12{ flex-basis:100%; }

.flexgrid12 .flexgrid12-auto{ flex-grow:1;flex-shrink:0;flex-basis:auto; }


/* ============================================================================
 Grid System - Flexbox 
 ============================================================================ */
.flexgrid{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    align-content:flex-start;
    flex-wrap:wrap;
    justify-content:center;
}
.flexgrid:before,.flexgrid:after { content:" ";display:table; }
.flexgrid:after { clear:both; }

.flexgrid.flexnowrap{ flex-wrap:nowrap; }
.flexgrid.flexleft{ justify-content:flex-start; }
.flexgrid.flexright{ justify-content:flex-end; }

.flexgrid .flexgrid-item{ flex-grow:0;flex-shrink:0;flex-basis:auto; }
.flexgrid.flexgrow .flexgrid-item{ flex-grow:1; }
.flexgrid.flexshrink .flexgrid-item{ flex-shrink:1; }






/* ============================================================================
 Basic Layout styles - used for commom elements
 ============================================================================ */
.navbar{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    
    margin:0 0 1.0rem 0;
    margin:0;
    padding:0 0 1.0rem 0;
    border-bottom:1px dotted var(--bordercolor_default);
}
.navbar h1{ font-family:"Roboto Condensed","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:var(--fontweight-strong);font-size:2.6rem;padding:0 1.2rem 0 0;margin:0; }
.navbar-control{ text-align:right; }
.navbar-navigation{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    list-style:none;
    margin:0;
    padding:0;
}
.navbar-navigation a{
    display:block;
    font-size:1.2rem;
    line-height:1.5;
    padding:1rem 0 0.1rem 0;
    margin:0 1rem 0.9rem 1rem;
    font-weight:700;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--color_default);
    border-bottom:2px solid transparent;
    transition:border-color .15s ease-in-out;
}
.navbar-navigation a.active,
.navbar-navigation a:hover {
    color:var(--color_strong);
    border-bottom:2px solid var(--bordercolor_default);
}

.navside{ margin:0;padding:0 1.6rem 0 0; }
.navside h1,.navside h2,.navside h3,.navside h4,.navside h5,.navside h6{
    font-family:"Roboto Condensed","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:700;
    color:var(--color_faint);
    text-transform:uppercase;
    padding:1rem 0;
    margin:0;
}
.navside h1,.navside h2,.navside h3{font-size:1.6rem;}
.navside h4,.navside h5,.navside h6{font-size:1.1rem;}
.navside ul{
    list-style:none;
    margin:0;
    padding:0;
}
.navside ul li a{
    display:block;
    font-size:1.1rem;
    line-height:1;
    padding:1rem 0;
    margin:0;
    font-weight:700;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--color_default);
    border-top:1px dotted var(--bordercolor_default);
}
.navside ul li:last-child a{
    border-bottom:1px dotted var(--bordercolor_default);
}
.navside ul li.active a, .navside ul li a:hover{ color:var(--color_strong); }
.navside ul li.active a{
    padding:1rem 0 1rem 1rem;
    background-color:var(--semantic_color_primary-5);
    background:-moz-linear-gradient(left,  var(--semantic_color_primary-5) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--semantic_color_primary-5) 25%, transparent 100%);
    background:linear-gradient(to right, var(--semantic_color_primary-5) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#401ca8dd', endColorstr='#001ca8dd',GradientType=1 );
}
.navside ul li.active a:before{ content:"\000bb";padding:0 0.4rem 0 0;font-size:1.4rem;color:var(--color_default); }

.navside ul li.backtrack a:before{ content:"\000ab";padding:0 0.4rem 0 0;font-size:1.4rem;color:var(--color_default); }



.navside form{margin:0;padding:0;}
.navside form input[type="checkbox"],.navside form input[type="radio"]{display:none;}
.navside form input[type="submit"],.navside form input[type="reset"]{display:none;}
.navside form label{
    display:block;
    font-size:1.1rem;
    line-height:1;
    padding:1rem 0;
    margin:0;
    font-weight:700;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--color_default);
    border-top:1px dotted var(--bordercolor_default);
    cursor:pointer;
}
.navside form label:last-child{
    border-bottom:1px dotted var(--bordercolor_default);
}
.navside form label.active, .navside form label:hover{ color:var(--color_strong); }
.navside form label.active{
    padding:1rem 0 1rem 1rem;
    background-color:var(--semantic_color_primary-5);
    background:-moz-linear-gradient(left,  var(--semantic_color_primary-5) 25%, transparent 100%);
    background:-webkit-linear-gradient(left, var(--semantic_color_primary-5) 25%, transparent 100%);
    background:linear-gradient(to right, var(--semantic_color_primary-5) 25%, transparent 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#401ca8dd', endColorstr='#001ca8dd',GradientType=1 );
}
.navside form label.active:before{ content:"\000bb";padding:0 0.4rem 0 0;font-size:1.4rem;color:var(--color_default); }





/*
#mainmenu{
    position:fixed;
    top:50px;
    z-index:5;
    padding:10px;
    color:#d2d5d7;
    background-color:#1d2022;
    -webkit-box-shadow:inset 0px 25px 15px -15px rgba(0,0,0,0.35), 0px 5px 15px 0 rgba(0,0,0,0.35);
       -moz-box-shadow:inset 0px 25px 15px -15px rgba(0,0,0,0.35), 0px 5px 15px 0 rgba(0,0,0,0.35);
            box-shadow:inset 0px 25px 15px -15px rgba(0,0,0,0.35), 0px 5px 15px 0 rgba(0,0,0,0.35);
}
#mainmenu .item-table{ display:table;width:100%;vertical-align:top }
#mainmenu .item-cell{ display:table-cell;vertical-align:top;line-height:2rem;padding:5px 10px }
#mainmenu .item-cell:first-child{ padding-left:0 }
#mainmenu .item-cell:last-child{ padding-right:0 }

#mainmenu h4{ margin:0;padding:0;text-transform:uppercase; }
#mainmenu ul{ list-style:none;margin:0;padding:10px 0; }
#mainmenu li{ list-style:none;margin:0;padding:0; }
#mainmenu li a{ padding:5px 0 }
#mainmenu li a:link,
#mainmenu li a:visited{ color:#d2d5d7; }
#mainmenu li a:hover,
#mainmenu li a:active{ color:#fff;text-decoration:none; }
*/


.breadcrumb{ /*display:inline-block;*/list-style:none;margin:0;margin:1.6rem 0;padding:0;color:var(--color_faint); }
.breadcrumb > li{ display:inline;font-size:1.0rem;font-weight:700;text-transform:uppercase; }
.breadcrumb > li + li:before{ content:"\000bb";padding:0 4px;color:var(--color_faint); }
.breadcrumb > li > a:link,.breadcrumb > li > a:visited{ color:var(--color_faint); }
.breadcrumb > li > a:hover,.breadcrumb > li > a:active{ color:var(--color_strong); }



.pagination{ display:inline-block;list-style:none;margin:1.6rem 0;padding:0;border-radius:4px;border:1px solid var(--bordercolor_default); }
.pagination > li{ display:inline;font-size:1.2rem;text-transform:uppercase; }
.pagination > li > a{ position:relative;float:left;padding:10px 16px;border-left:1px solid var(--bordercolor_default);text-decoration:none;transition:all .25s ease-in-out; }
.pagination > li:first-child > a{ border:none; }
.pagination > li.active > a{ background-color:var(--bgcolor_active); }
.pagination > li > a:hover{ background-color:var(--bgcolor_interaction); }






/* ============================================================================
 List styles - used for all lists of objects and entities 
 ============================================================================ */
.datatable{ display:table;width:100%;margin:1.6rem 0;padding:0; }
.datatable th, .datatable td { padding:0.8rem;line-height:1.5;text-align:left; }
.datatable th{ vertical-align:bottom;border-bottom:2px solid var(--bordercolor_default);color:var(--color_faint);font-weight:var(--fontweight-default); }
.datatable th.header-sort{ color:var(--color_highlight);border-bottom-color:var(--bordercolor_highlight); }
.datatable th.header-sort:after {
    display:inline-block;content:"";width:0;height:0;
    margin-right:-10px;margin-bottom:2px;margin-left:5px;
    border:4px solid transparent;
    border-bottom-color:var(--bordercolor_highlight);
}
.datatable tbody td{ vertical-align:top;border-bottom:1px solid var(--bordercolor_default); }
.datatable tfoot td{ vertical-align:top;color:var(--color_faint);font-weight:var(--fontweight-default); }

.datatable.interactive tbody tr{ transition:all .25s ease-in-out; }
.datatable.interactive tbody tr.active{ background-color:var(--bgcolor_active); }
.datatable.interactive tbody tr.inactive {
    opacity:.75;
    background:repeating-linear-gradient(45deg, rgba(205,205,205,0.25), rgba(205,205,205,0.25) 2px, transparent 2px, transparent 4px);
}
.datatable.interactive tbody tr:not(.datatable-separator):hover{ background-color:var(--bgcolor_interaction); }





/* ============================================================================
 List styles - used for all lists of objects and entities 
 ============================================================================ */
.datalist{ display:block;width:100%;list-style:none;margin:1.6rem 0;padding:0; }
.datalist > li{ display:block;position:relative;margin:0;padding:0;text-align:left;border-bottom:1px solid var(--bordercolor_default); }
.datalist > li.datalist-header{ vertical-align:bottom;border-bottom:2px solid var(--bordercolor_default);color:var(--color_faint);font-weight:var(--fontweight-default); }
.datalist > li.datalist-footer{ vertical-align:top;border-bottom:none;color:var(--color_faint);font-weight:var(--fontweight-default); }
.datalist > li.datalist-header .header-sort{ position:relative;bottom:-2px;border-bottom:2px solid var(--bordercolor_highlight);color:var(--color_highlight); }
.datalist > li.datalist-header .header-sort:after {
    display:inline-block;content:"";width:0;height:0;
    margin-right:-10px;margin-bottom:2px;margin-left:5px;
    border:4px solid transparent;
    border-bottom-color:var(--bordercolor_highlight);
}

.datalist.interactive li{ transition:all .25s ease-in-out; }
.datalist.interactive li:not(.datalist-header):not(.datalist-footer).active{ background-color:var(--bgcolor_active); }
.datalist.interactive li.inactive {
    opacity:.75;
    background:repeating-linear-gradient(45deg, rgba(205,205,205,0.5), rgba(205,205,205,0.5) 2px, rgba(205,205,205,0.2) 2px, rgba(205,205,205,0.2) 4px);
}
.datalist.interactive li:not(.datalist-header):not(.datalist-footer):hover{ background-color:var(--bgcolor_interaction); }

.datalist > li .item-table{ display:table;width:100%;vertical-align:top }
.datalist > li .item-cell{ display:table-cell;vertical-align:top;line-height:2rem;padding:0.8rem; }
.datalist > li .item-cell{ vertical-align:top }
.datalist > li .item-cell *{ vertical-align:middle }

.datalist .datalist > li{ border-top:1px dotted rgba(255,255,255,0.15) }





/* ============================================================================
 Calendar
 ============================================================================ */
.datacalendar{ display:table;width:100%;margin:1.6rem 0;padding:0; }
.datacalendar caption{ text-align:center;color:var(--color_faint);font-weight:var(--fontweight-default); }
.datacalendar caption > .caption-wrapper{ display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center; }
.datacalendar caption > .caption-wrapper > *{ margin:0.8rem;flex-shrink:0; }
.datacalendar caption > .caption-wrapper > *:not(.pagination){ flex-shrink:1; }
.datacalendar th, .datacalendar td { position:relative;padding:1.6rem 0.8rem;line-height:1.5;text-align:left; }
.datacalendar th{ vertical-align:bottom;border-bottom:2px solid var(--bordercolor_default);color:var(--color_faint);font-weight:var(--fontweight-default); }
.datacalendar tbody td{ vertical-align:top;;border-bottom:1px solid var(--bordercolor_default); }
.datacalendar tbody td *{ vertical-align:top; }
.datacalendar tbody td.active{ background-color:var(--bgcolor_interaction); }

.datacalendar tfoot td{ vertical-align:top;color:var(--color_faint);font-weight:var(--fontweight-default); }
.datacalendar tfoot .tfoot-wrapper{ display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center; }
.datacalendar tfoot .tfoot-wrapper > *{ flex-shrink:0; }
.datacalendar tfoot .tfoot-wrapper > *:not(.pagination){ flex-shrink:1; }

.datacalendar tbody td.datacalendar-month-past,
.datacalendar tbody td.datacalendar-month-future{ opacity:.65;background:repeating-linear-gradient(45deg, rgba(205,205,205,0.3), rgba(205,205,205,0.3) 2px, rgba(205,205,205,0.1) 2px, rgba(205,205,205,0.1) 4px); }

.datacalendar .datacalendar-day{ margin:0;padding:0;color:var(--color_faint);font-weight:var(--fontweight-default);font-size:1.8rem; }
.datacalendar .datacalendar-day-past .datacalendar-day{ opacity:.65; }
.datacalendar .datacalendar-day-today .datacalendar-day{ color:var(--color_highlight);font-weight:var(--fontweight-strong); }
.datacalendar .datacalendar-day-future .datacalendar-day{}

.datacalendar .datacalendar-allevents{}
.datacalendar .datacalendar-event{ margin:0 0 2rem 0; }
.datacalendar .datacalendar-event-time{ margin:0;padding:0;font-size:1.4rem;border-bottom:1px dotted var(--bordercolor_default); }
.datacalendar .datacalendar-event-title{ margin:0;padding:0;font-size:1.8rem; }

.datacalendar a.datacalendar-addevent
{
    font-family:'Material Icons';
    font-weight:normal;
    font-style:normal;
    font-size:2.1rem;
    
    display:inline-block;
    line-height:1;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:normal;
    white-space:nowrap;
    direction:ltr;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:'liga';
    
    position:absolute;
    top:1.6rem;
    right:0.8rem;
    text-decoration:none;
    color:var(--color_highlight);
    opacity:0.15;
    transition:opacity .25s ease-in-out;
    
}

.datacalendar td{ width:14.2%;/*height:12rem;min-height:12rem;*/ }


.datacalendar.interactive tbody td{ transition:all .25s ease-in-out; }
.datacalendar.interactive tbody td.active{ background-color:var(--bgcolor_active); }
.datacalendar.interactive tbody td:hover{ background-color:var(--bgcolor_interaction); }
.datacalendar.interactive tbody td:hover a.datacalendar-addevent{ opacity:0.5; }
.datacalendar.interactive tbody td:hover a.datacalendar-addevent:hover{ opacity:1; }

@media (max-width:60rem){
    .datacalendar, .datacalendar caption, 
    .datacalendar thead, .datacalendar tbody, .datacalendar tfoot, 
    .datacalendar tr, .datacalendar th, .datacalendar td{ display:block;text-align:left; }
    
    .datacalendar .datacalendar-day{ display:inline-block;width:7.5rem; }
    .datacalendar .datacalendar-allevents{ display:inline-block;width:calc(100% - 8rem); }
    
    .datacalendar th, .datacalendar tbody td.datacalendar-out{ display:none; }
    
    .datacalendar td{ width:100%; }
    
    .datacalendar tbody td:nth-child(1) .datacalendar-day:after { content:" Dom"; }
    .datacalendar tbody td:nth-child(2) .datacalendar-day:after { content:" Seg"; }
    .datacalendar tbody td:nth-child(3) .datacalendar-day:after { content:" Ter"; }
    .datacalendar tbody td:nth-child(4) .datacalendar-day:after { content:" Qua"; }
    .datacalendar tbody td:nth-child(5) .datacalendar-day:after { content:" Qui"; }
    .datacalendar tbody td:nth-child(6) .datacalendar-day:after { content:" Sex"; }
    .datacalendar tbody td:nth-child(7) .datacalendar-day:after { content:" Sab"; }
}





/* ============================================================================
 Tags
 ============================================================================ */
.tags{
    display:inline-block;
    list-style:none;
    vertical-align:middle;
    white-space:nowrap;
    margin:0;
    padding:0;
}
.tags > .tag{
    display:inline;
    font-size:1.2rem;
    font-weight:var(--fontweight-default);
    line-height:1;
    padding:4px 8px;
    text-transform:lowercase;
    position:relative;float:left;
    
    color:var(--color_inverse);
    border-left:1px solid var(--bordercolor_default);
    background-color:var(--semantic_bgcolor_default) !important;
}
.tags > .tag:first-child{ border-top-left-radius:4px;border-bottom-left-radius:4px; }
.tags > .tag:last-child{ border-top-right-radius:4px;border-bottom-right-radius:4px; }

.tags.tags-inline{ white-space:normal; }
.tags.tags-inline > .tag{ border-radius:4px;margin:0 .2rem .2rem 0; }

.tags > .tag a{ color:var(--color_inverse); }



/* ============================================================================
 Files
 ============================================================================ */
.files{
    display:block;
    list-style:none;
    vertical-align:middle;
    margin:0;
    padding:0;
}
.files > .file{
    display:block;
    padding:4px 8px 4px 4px;
    position:relative;
    /*font-size:1.4rem;*/
    border-radius:2px;
    margin:0 .2rem .2rem 0;
    
    color:var(--color_default);
    background-color:var(--bgcolor_lightgray-5);
    border:1px solid var(--semantic_color_primary-25);
    border-left:3px solid var(--semantic_color_primary);
    transition:all .25s ease-in-out;
}
.files > .file:hover{ color:var(--color_highlight);background-color:var(--bgcolor_interaction) !important; }
.files > .file a{ color:inherit;text-decoration:none; }
.files > .file .material-icons{ font-size:2.4rem; }
.files > .file .info{ font-size:1.2rem;font-style:italic;opacity:0.8; }
.files > .file .file-delete{ float:right;color:inherit;opacity:0.4; }
.files > .file .file-delete:hover{ color:var(--semantic_color_danger);opacity:1; }
.files > .file:hover .file-delete{ opacity:0.8; }
.files > .file > *{ vertical-align:middle; }






/* ============================================================================
 Button styles
 ============================================================================ */
.button-group{ position:relative;display:inline-block;vertical-align:middle;white-space:nowrap; }
.button-group > .button{ position:relative;float:left; }
.button-group > .button:first-child:not(:last-child){ border-top-right-radius:0;border-bottom-right-radius:0; }
.button-group > .button:not(:first-child):not(:last-child){ border-radius:0; }
.button-group > .button:last-child:not(:first-child){ border-top-left-radius:0;border-bottom-left-radius:0; }
.button-group .button + .button, 
.button-group .button + .button-group, 
.button-group .button-group + .button, 
.button-group .button-group + .button-group{ border-left:none; }

.button, a.button{
    display:inline-block;
    position:relative;
    white-space:nowrap;
    margin:0;
    padding:6px 12px;
    min-width:7.5rem;

    font-family:"Roboto Condensed","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:var(--fontweight-strong);
    font-size:1.2rem;
    line-height:1.5;
    
    text-transform:uppercase;
    text-decoration:none !important;
    text-align:center;
    vertical-align:middle;

    border:1px solid var(--bordercolor_default);
    border-radius:4px;
    transition:all .15s;
    
    /*color:var(--color_default);*/
    color:var(--color_inverse);
    background-color:transparent;
    text-shadow:0px 1px 1px rgba(0,0,0,0.5);
    
    cursor:pointer;
    outline:none;
    -ms-touch-action:manipulation;
    touch-action:manipulation;
    
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* COLOR VARIATIONS */
.button, a.button{                       background-color:var(--semantic_bgcolor_default-75); }
.button.primary, a.button.primary{       background-color:var(--semantic_color_primary-75);   }
.button.success, a.button.success{       background-color:var(--semantic_color_success-75);   }
.button.info, a.button.info{             background-color:var(--semantic_color_info-75);      }
.button.warning, a.button.warning{       background-color:var(--semantic_color_warning-75);   }
.button.danger, a.button.danger{         background-color:var(--semantic_color_danger-75);    }

/* COLOR VARIATIONS - "FLAT" COLOR (color ONLY in hover) */
.button.flat-color, a.button.flat-color{                 color:var(--semantic_color_default);background-color:transparent;text-shadow:none; }
.button.flat-color.primary, a.button.flat-color.primary{ color:var(--semantic_color_primary);background-color:transparent; }
.button.flat-color.success, a.button.flat-color.success{ color:var(--semantic_color_success);background-color:transparent; }
.button.flat-color.info, a.button.flat-color.info{       color:var(--semantic_color_info);background-color:transparent;    }
.button.flat-color.warning, a.button.flat-color.warning{ color:var(--semantic_color_warning);background-color:transparent; }
.button.flat-color.danger, a.button.flat-color.danger{   color:var(--semantic_color_danger);background-color:transparent;  }


/* COLOR VARIATIONS - HOVER COLOR */
.button:hover, a.button:hover,
.button.add:hover, a.button.add:hover,
.button.save:hover, a.button.save:hover,
.button.secondary:hover, a.button.secondary:hover,
.button.critical:hover, a.button.critical:hover,
.button.action:hover, a.button.action:hover,
.button.selected:hover, a.button.selected:hover,
.button:active, a.button:active{
    /*color:#FFF;*/
    /*color:var(--color_strong) !important;*/
    /* SPECIFIC FOR LIGHT CSS */
    color:var(--color_inverse) !important;
    text-shadow:0px 1px 2px rgba(0,0,0,0.85);
}

/* COLOR VARIATIONS - HOVER BACKGROUND */
.button:hover, a.button:hover{                 background-color:var(--semantic_bgcolor_default); }
.button.primary:hover, a.button.primary:hover{ background-color:var(--semantic_color_primary); }
.button.success:hover, a.button.success:hover{ background-color:var(--semantic_color_success); }
.button.info:hover, a.button.info:hover{       background-color:var(--semantic_color_info); }
.button.warning:hover, a.button.warning:hover{ background-color:var(--semantic_color_warning); }
.button.danger:hover, a.button.danger:hover{   background-color:var(--semantic_color_danger); }

/* SIZE VARIATIONS */
.button.large{ padding:8px 18px;font-size:1.6rem;line-height:2; }
.button.small{ padding:5px 10px;font-size:1.2rem;line-height:1.3;min-width:3rem; }
.button.tiny{  padding:4px 8px; font-size:1.0rem;line-height:1.1;min-width:3rem; }

/* DISABLED VARIATION */
.button.disabled,.button:disabled{ opacity:0.35;cursor:not-allowed; }



/* ICON BUTTONS */
.button.icon{
    font-family:'Material Icons';
    font-weight:normal;
    font-style:normal;
    font-size:2.4rem;
    
    width:3.6rem;min-width:3.6rem;max-width:3.6rem;
    height:3.6rem;min-height:3.6rem;max-height:3.6rem;
    padding:0.5rem;
    border-radius:50%;
    
    display:inline-block;
    line-height:1;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:normal;
    white-space:nowrap;
    direction:ltr;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:'liga';
}



/*
.button.mainmenu{
    min-width:2.4rem;width:2.4rem;height:2.4rem;margin:0;padding:0;
    background-color:#1f2326;background-image:url('images/icon_mainmenu.png');background-repeat:no-repeat;background-position:center center;
}
.button.collapse{
    border-radius:50%;
    min-width:2.4rem;width:2.4rem;height:2.4rem;margin:0;padding:0;
    background-color:#1f2326;background-image:url('images/icon_collapse.png');background-repeat:no-repeat;background-position:center center;
    transition:.15s ease-in-out;
}
.button.collapse.collapsed{
    -webkit-transform:rotate(180deg);
       -moz-transform:rotate(180deg);
         -o-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
            transform:rotate(180deg);
}
*/




/* ============================================================================
 Special Button styles - Status Buttons
 ============================================================================ */
.statusbutton-group{ position:relative;display:inline-block;vertical-align:middle; }
.statusbutton-group > .button{ position:relative;float:left; }
.statusbutton-group > .button:first-child:not(:last-child){ border-top-right-radius:0;border-bottom-right-radius:0; }
.statusbutton-group > .button:not(:first-child):not(:last-child){ border-radius:0; }
.statusbutton-group > .button:last-child:not(:first-child){ border-top-left-radius:0;border-bottom-left-radius:0; }
.statusbutton-group .button + .button, 
.statusbutton-group .button + .statusbutton-group, 
.statusbutton-group .statusbutton-group + .button, 
.statusbutton-group .statusbutton-group + .statusbutton-group{ border-left:none; }

.button.statusbutton,.button.statusbutton:hover,a.button.statusbutton:hover{
    position:relative;
    background-color:var(--semantic_bgcolor_default-75);
}
.button.statusbutton.statusactive,.button.statusbutton.statusactive:hover,a.button.statusbutton.statusactive:hover{
    background-color:var(--semantic_color_primary);
}
.button.statusbutton.disabled,.button.statusbutton:disabled{ opacity:1 }
/*
.button.statusbutton:not(:first-child){padding-left:25px;}
.button.statusbutton:not(:first-child):before{
    content:"";
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-left:15px solid #FFF;
    position:absolute;
    left:0;
    top:0;
}
.button.statusbutton:not(:first-child):after{
    content:"";
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-left:15px solid var(--semantic_color_default-50);
    position:absolute;
    left:-1px;
    top:0px;
}
*/






.alert {
    display:block;
    position:relative;
    /*white-space:nowrap;*/
    margin:1rem 0 3.2rem 0;
    padding:12px 16px;
    min-width:7.5rem;

    border:1px solid var(--bordercolor_default);
    border-radius:4px;

    color:var(--color_inverse);
    background-color:transparent;
    text-shadow:0px 1px 1px rgba(0,0,0,0.35);

    transition:all .25s ease-in-out;

    cursor:default;
    outline:none;
    /*-webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;*/
}
.alert a,.alert a:link,.alert a:visited,.alert a:hover,.alert a:active{ color:inherit !important; }

.alert.icon{ padding-left:40px; }
.alert.icon:before{
    position:absolute;top:0;left:0;padding:12px;
    font-family:'Material Icons';
    font-weight:normal;
    font-style:normal;
    font-size:16px;/*preferrable: 18px*/
    
    display:inline-block;
    line-height:1;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:normal;
    white-space:nowrap;
    direction:ltr;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:'liga';
}

.alert.icon:before{ content:"message"; }
.alert.icon.primary:before{ content:"feedback"; }
.alert.icon.success:before{ content:"check_circle"; }
.alert.icon.info:before{ content:"info"; }
.alert.icon.warning:before{ content:"warning"; }
.alert.icon.danger:before{ content:"report"; }
/*.alert.icon.help:before{ content:"help"; }*/

/* COLOR VARIATIONS */
.alert{            background-color:var(--semantic_bgcolor_default-75); }
.alert.primary{    background-color:var(--semantic_color_primary-75); }
.alert.success{    background-color:var(--semantic_color_success-75); }
.alert.info{       background-color:var(--semantic_color_info-75); }
.alert.warning{    background-color:var(--semantic_color_warning-75); }
.alert.danger{     background-color:var(--semantic_color_danger-75); }

/* COLOR VARIATIONS - "FLAT" COLOR (color ONLY in hover) */
.alert.flat-color{            color:var(--semantic_color_default);background-color:transparent; }
.alert.flat-color.primary{    color:var(--semantic_color_primary);background-color:transparent; }
.alert.flat-color.success{    color:var(--semantic_color_success);background-color:transparent; }
.alert.flat-color.info{       color:var(--semantic_color_info);background-color:transparent; }
.alert.flat-color.warning{    color:var(--semantic_color_warning);background-color:transparent; }
.alert.flat-color.danger{     color:var(--semantic_color_danger);background-color:transparent; }

/* COLOR VARIATIONS - HOVER COLOR */
.alert:hover,
.alert.add:hover,
.alert.save:hover,
.alert.secondary:hover,
.alert.critical:hover,
.alert.action:hover,
.alert.selected:hover{
    /*color:var(--color_strong) !important;*/
    /* SPECIFIC FOR LIGHT CSS */
    color:var(--color_inverse) !important;
    text-shadow:0px 1px 1px rgba(0,0,0,0.65);
}

/* COLOR VARIATIONS - HOVER BACKGROUND */
.alert:hover{         background-color:var(--semantic_bgcolor_default); }
.alert.primary:hover{ background-color:var(--semantic_color_primary); }
.alert.success:hover{ background-color:var(--semantic_color_success); }
.alert.info:hover{    background-color:var(--semantic_color_info); }
.alert.warning:hover{ background-color:var(--semantic_color_warning); }
.alert.danger:hover{  background-color:var(--semantic_color_danger); }



.panel{ 
    padding:1.6rem;margin:0 auto 1.6rem auto;
    color:var(--color_default);
    background-color:var(--bgcolor_default);
    border:1px solid var(--bordercolor_default);border-radius:4px;
}
.panel header{
    padding:1.6rem;margin:-1.6rem -1.6rem 1.6rem -1.6rem;
    background-color:var(--bgcolor_lightgray-25);
    border-bottom:1px solid var(--bordercolor_default);border-top-left-radius:4px;border-top-right-radius:4px;
    display:flex;/* qs-v3 */
    justify-content:space-between;/* qs-v3 */
    align-items:center;/* qs-v3 */
}
.panel header h1,.panel header h2,.panel header h3,.panel header h4,.panel header h5,.panel header h6{ margin:0;display:inline-block; }
.panel footer{
    padding:1.6rem;margin:1.6rem -1.6rem -1.6rem -1.6rem;
    background-color:var(--bgcolor_lightgray-5);
    border-top:1px solid var(--bordercolor_default);border-bottom-left-radius:4px;border-bottom-right-radius:4px;
}

.modal{
    position:fixed;top:0;left:0;z-index:9;
    padding:6.4rem;width:100%;height:100%;
    opacity:1;
    background-color:rgba(0,0,0,0.75);
    background:-moz-linear-gradient(top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 85%, rgba(0,0,0,0) 100%);
    background:-webkit-linear-gradient(top, rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 85%, rgba(0,0,0,0) 100%);
    background:linear-gradient(to bottom, rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 85%, rgba(0,0,0,0) 100%);
    transition:all .25s ease-in-out;
}
.modal.newmodal{top:-16rem;opacity:0;}
.modal .panel{
    width:100%;max-width:600px;
    box-shadow:0px 4px 8px 2px rgba(0,0,0,0.75), 0px 8px 48px 0 rgba(0,0,0,0.5);
    max-height:75vh;overflow-y:auto;
}



/* ============================================================================
 Form styles
 ============================================================================ */
form{ margin:0;padding:10px 0 }
fieldset{ margin:0;padding:1.6rem 0 3.2rem 0;border:none;border-top:1px solid var(--bordercolor_default); }
legend{ font-weight:700;text-transform:uppercase;padding-right:.8rem }
label{ display:block;margin:0;padding:2px 0; }

.form-row{ margin-bottom:2rem; }
.form-helper,.form-error{
    margin:0;
    padding:8px 12px;
    border-radius:2px;
    background-color:rgba(67,72,87,.1); /*434857*/
    background:-moz-linear-gradient(left, rgba(67,72,87,.1) 0%, rgba(67,72,87,0) 100%);
    background:-webkit-linear-gradient(left, rgba(67,72,87,.1) 0%,rgba(67,72,87,0) 100%);
    background:linear-gradient(to right, rgba(67,72,87,.1) 0%,rgba(67,72,87,0) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#19434857', endColorstr='#00434857',GradientType=1 );
}
.form-error{ color:#C9302C; }

input[type=text],
input[type=password],
input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=range],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week],
input[type=file],
select,
textarea{
    margin:3px 0;
    padding:6px;
    width:100%;
    height:3.2rem;
    line-height:1.6rem;
    font-family:"Roboto",Arial,Helvetica,"Helvetica Neue",sans-serif;
    border:1px solid rgba(0,0,0,0.25);
    border-radius:2px;
    background-color:#FFF;
    color:#16222A;
    transition:border-color ease-in-out .15s, background-color ease-in-out .15s;
}
input[type=file]{
    padding:0;
}
input[type=checkbox],input[type=radio]{
    margin:3px 0;
    padding:0;
    width:2rem;
    height:2rem;
    outline:none;
    border:1px solid rgba(0,0,0,0.25);
    border-radius:2px;
    vertical-align:middle;
}
select[multiple]{ height:8rem; }
textarea{ height:12rem; }

input[type=text]:focus,
input[type=password]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=range]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
input[type=file]:focus,
select:focus,
textarea:focus {
    border-color:var(--bordercolor_highlight);
    background-color:#FFF;
    outline:0;
}


input[type=text][disabled],
input[type=password][disabled],
input[type=color][disabled],
input[type=date][disabled],
input[type=datetime][disabled],
input[type=datetime-local][disabled],
input[type=email][disabled],
input[type=month][disabled],
input[type=number][disabled],
input[type=range][disabled],
input[type=search][disabled],
input[type=tel][disabled],
input[type=time][disabled],
input[type=url][disabled],
input[type=week][disabled],
input[type=file][disabled],
select[disabled],
textarea[disabled] {
    font-style:italic;
    background-color:#EEE;
    cursor:text;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border:1px solid var(--bordercolor_highlight) !important;
    -webkit-text-fill-color:#16222A !important;
    -webkit-box-shadow:0 0 0px 1000px #FFF inset !important;
}
input::-moz-placeholder{color:#16222A;opacity:.5;}
input:-ms-input-placeholder {color:#16222A;opacity:.5;}
input::-webkit-input-placeholder {color:#16222A;opacity:.5;}








/*
.icon-star{position:relative;display:inline-block;width:2.6rem;height:2.6rem;}
.icon-star > input[type=checkbox]{opacity:0;z-index:-1;}
.icon-star > input[type=checkbox]+label{}
.icon-star > input[type=checkbox]+label:after{
    position:absolute;top:0;left:0;z-index:1;
    display:inline-block;
    cursor:pointer;
    
    font-family:'Material Icons';
    font-weight:normal;
    font-style:normal;
    font-size:2.6rem;
    color:rgba(255,153,0,0.35);
    
    display:inline-block;
    line-height:1;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:normal;
    white-space:nowrap;
    direction:ltr;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings:'liga';
}
*/
[class^="icon-"]{position:relative;display:inline-block;width:2.6rem;height:2.6rem;}
[class^="icon-"] > input[type=checkbox]{opacity:0;z-index:-1;}
[class^="icon-"] > input[type=checkbox]+label{}
[class^="icon-"] > input[type=checkbox]+label:after{
    position:absolute;top:0;left:0;z-index:1;
    display:inline-block;
    cursor:pointer;
    
    font-family:'Material Icons';
    font-weight:normal;
    font-style:normal;
    font-size:2.6rem;
    
    display:inline-block;
    line-height:1;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:normal;
    white-space:nowrap;
    direction:ltr;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings:'liga';
}

.icon-star > input[type=checkbox]+label:after{content:'star_border';color:rgba(255,153,0,0.35);}
.icon-star > input[type=checkbox]:checked+label:after{content:'star';color:rgba(255,153,0,0.85);}

.icon-archive > input[type=checkbox]+label:after{content:'archive';color:rgba(67,72,87,0.35);}
.icon-archive > input[type=checkbox]:checked+label:after{content:'archive';color:rgba(67,72,87,0.85);}




/* FORM VARIANT - INLINE FORM FIELDS */
form.form-inline{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    align-content:flex-start;
    
    margin:0;
    width:100%;
}
form.form-inline > *{
    flex-grow:0;
    flex-shrink:0;
    flex-basis:auto;
    margin:0;
    white-space:nowrap;
}
form.form-inline > .form-inline-grow{ flex-grow:1; }
form.form-inline > *:not(:last-child){ margin-right:.25rem; }

/* FORM VARIANT - INLINE FORM COMPLETELLY 'TRANSPARENT' */
form.form-transparent{ margin:0;padding:0; }


/* RESPONSIVE SEARCH FORMS */
form.form-inline input,
form.form-inline select,
form.form-inline textarea{ max-width:16rem; }
/*
@media (max-width:100rem){
    form.form-inline{
        margin:0;
        width:100%;
        display:block;
    }
    form.form-inline > input,
    form.form-inline > select,
    form.form-inline > textarea{ font-size:1.4rem; }
    form.form-inline > *{
        margin:0;
        white-space:nowrap;
        display:inline-block;
        vertical-align:top;
    }
    form.form-inline > .form-inline-grow{ display:block;margin-bottom:.75rem; }
    form.form-inline > *:not(:last-child){ margin-right:0; }
}
*/
@media print {
    #wrapper > header .navbar{display:none;}
    #wrapper > main .grid12-2{display:none;}
    #wrapper > main .grid12-10{width:100%;}
    #wrapper > footer{display:none;}
}