:root {
    --blue-lighten-5: rgba(227, 242, 253, 1);
    --blue-lighten-4: rgba(187, 222, 251, 1);
    --blue-lighten-3: rgba(144, 202, 249, 1);
    --blue-lighten-2: rgba(100, 180, 246, 1);
    --blue-lighten-1: rgba(66, 164, 245, 1);

    --blue: #2196F3;

    --blue-darken-1: #1e88e5ff;
    --blue-darken-2: #1976d2ff;
    --blue-darken-3: #1565c0ff;
    --blue-darken-4: #0d47a1ff;
    
    --blue-accent-1: #82b1ff;
    --blue-accent-2: #448aff;
    --blue-accent-3: #2979ff;
    --blue-accent-4: #2962ff;

    --orange-accent: #FF9800ff;
    
    --main-bg-color: #f0f0f0;
    --panel-color-dark: rgba(9, 30, 66, 1);
    --scrollbar-color: #757575;

    --side-menu-background: #0747A6;
    --side-menu-color: #DEEBFF;
    --side-menu-background-hover: rgba(9, 30, 66, 0.42);
    --side-menu-color-hover: #DEEBFF;
    --side-menu-footer-background: #0747A6;
    --side-menu-footer-color: #DEEBFF;

    /*--content-header-background: #0093ff;*/
    --content-header-background: var(--blue-darken-3);

    --content-header-color: var(--blue-lighten-5);

    --content-background: var(--blue-lighten-5);
    --content-color: black;

    --content-mr-background: #ddd;

    --content-sr-background: var(--blue-lighten-1);

    --content-footer-background: var(--blue-darken-3);
    --content-footer-color: var(--blue-lighten-5);

    --header-height: 3em;
    --side-menu-width: 250px;    
    --content-mr-heigt: 70%;
    --footer-height: 3em;   

    --grid-rows-l: 
        var(--header-height) 
        auto 
        var(--footer-height);

    --grid-columns-l: 
        var(--side-menu-width) 1fr;    

    --grid-area-l-w-menu: 
        "side_menu_header content_header content_header"
        "side_menu_panel content_panel property_panel"
        "side_menu_footer content_footer content_footer";              

    --grid-area-l-wo-menu: 
        "side_menu_header content_header content_header"
        "content_panel content_panel property_panel"
        "side_menu_footer content_footer content_footer";

    --grid-area-s-w-menu:
        "side_menu_header"
        "side_menu_panel"
        "side_menu_footer";    
        
    --grid-area-s-wo-menu:
        "side_menu_header"
        "content_header"
        "content_panel"
        "content_footer";  
        
    --grid-rows-s-wo-menu:
        var(--header-height)
        var(--header-height)
        1fr
        var(--footer-height);

    --grid-rows-s-w-menu:
        var(--header-height)
        1fr
        var(--footer-height);

    --grid-columns-s: 1fr; 
    
}


/* PAGE GRID DEFINITION */
.side-menu-header { grid-area: side_menu_header; }
.side-menu-panel { grid-area: side_menu_panel; }
.side-menu-footer { grid-area: side_menu_footer; }

.content-header { grid-area: content_header; }
.content-panel { grid-area: content_panel; }
.content-footer { grid-area: content_footer; }

.property-panel { grid-area: property_panel; }

/* COMMON STYLING */
html {
    background-color: var(--content-background);
}

body {
    font-family: Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size: 1em;
}

html, body, div, p, h1, h2, h3 {
    margin: 0;
    padding: 0;
    border: none;
}

p {
    padding: 0.8em;
}

h3 {
    font-size: 120%;
    font-weight: 400;
    padding-left: 1em;
    padding-top: 0.6em;
}

.hidden-label {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
}
  
input,
select, 
textarea {
  font-family: Tahoma, sans-serif;
  font-size: 100%;
}

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 3px;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="textarea"],
input[type="number"],
input[type="tel"],
select {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 0 1em;
  height: 3em;
  margin-bottom: 1em;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  outline: none;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="textarea"],
input[type="number"]:focus,
input[type="tel"]:focus {
  border: 3px solid #4CAF50ff;
  border-radius: 3px;
}

textarea {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 1em 1em;
  height: 8em;
  margin-bottom: 1em;
  border: 1px solid #cdcdcd;
  outline: none;
}

::-webkit-scrollbar { 
    height: 8px; 
    width: 8px;
}

::-webkit-scrollbar-corner { 
    display: none;
}

::-webkit-scrollbar-thumb { 
    background-color: rgba(0, 0, 0, 0);
}

:hover::-webkit-scrollbar-thumb { 
    background-color: var(--scrollbar-color);
    border-radius: 8px;
}

.ellipsis {
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }
  
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    letter-spacing: -0.5em;
    display: inline-block;
}

.logo-with-title,
.logo-area,
.logo-area p,
.logo,
.logo-area .logo-img,
.logo-area .logo-title
 {
    margin: 0;
    padding: 0;    
    display: inline-block; 
}

.logo-area p
 {
    position: absolute;
    margin-top: 16px;
    margin-left: 2px;
}

.logo.yellow {
    color: #FF9800;
}

.logo.chevron{
    font-size: 18px;
    letter-spacing: -8px;
    vertical-align: bottom;
}

.logo.mood{
    font-size: 24px;
    letter-spacing: -8px;
}

.logo-title {
    padding-left: 10px;
    display: inline-block;
}

/* BUTTON */
.button {
    border: none;
    /*color: var(--blue-lighten-5);
    background: var(--blue-darken-4);
    box-shadow: 3px 3px 2px 0px #757575ff;*/
    margin: 0;
    padding: 0.3em 1.5em 0.7em 1.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
}

.button.green {
    border: 2px solid #4CAF50ff;
    color: #fff;
}

.button.green:hover {
    color: #4CAF50ff;
}

.button.green:active {
    color: #8BC34A;
    border: 2px solid #8BC34A;
}

.button.yellow {
    border: 2px solid var(--orange-accent);
    color: #fff;
}

.button.yellow:hover {
    color: var(--orange-accent);
}

.button.yellow:active {
    color: #FFC107;
    border: 2px solid #FFC107;
}

.green-button {
    background-color: var(--side-menu-background);
    color: var(--side-menu-color);
    padding: 1em;
    font-size: 90%;    
    margin: 0;
    padding: 0.4em 1.5em 0.4em 1.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
    border: 2px solid #4CAF50ff;
    color: #fff;
}

.orange-button {
    background-color: var(--side-menu-background);
    color: var(--side-menu-color);
    padding: 1em;
    font-size: 90%;    
    margin: 0;
    padding: 0.4em 1.5em 0.4em 1.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
    border: 2px solid var(--orange-accent);
}

div .green-button {
    margin: 8px;
}

.green-button:hover {
    color: #4CAF50ff;
}

.green-button:active {
    background-color: #8BC34A;
    color: var(--side-menu-color);
}

div .orange-button {
    margin: 8px;
}

.orange-button:hover {
    color: var(--orange-accent);
}

.orange-button:active {
    background-color: #FFC107;
    color: var(--side-menu-color);
} 

.inline-block-show {
    display: inline-block;
}

.inline-block-hide {
    display: none;
}