/*
 * Font
 */

/*
@font-face {
   font-family: 'roboto';
   src: url('./font/Roboto-Thin-webfont.woff');
   font-style: normal;
   font-weight: 100;
}

@font-face {
   font-family: 'roboto';
   src: url('./font/Roboto-Light-webfont.woff');
   font-style: normal;
   font-weight: 300;
}

@font-face {
   font-family: 'roboto';
   src: url('./font/Roboto-Regular-webfont.woff');
   font-style: normal;
   font-weight: 400;
}

@font-face {
   font-family: 'raleway';
   src: url('./font/raleway-light-webfont.woff');
   font-style: normal;
   font-weight: 300;
}

@font-face {
   font-family: 'montserrat';
   src: url('./font/montserrat-light-webfont.woff');
   font-style: normal;
   font-weight: 400;
}
*/

/*
 * Extended reset
 */

/* box-sizing */

html {
   box-sizing: border-box;
}

*, *:before, *:after {
   box-sizing: inherit;
}

/* font-size */

html{
   font-size: 100%;
}

body {
   font-size: 1rem;
}

/* always display scrollbar */

html {
   overflow-y: scroll;
}

/*
 * Custom
 */

body {
   font-family: 'Noto Sans', sans-serif;
   font-weight: 400;
   line-height: 1;
   background-color: hsl(0, 0%, 96%);
   color: hsla(0, 0%, 0%, 0.87);
}

button {
   font-family: 'Noto Sans', sans-serif;
   font-weight: 400;
   font-size: 1rem;
   padding: 0 !important; /* remove Chrome UA stylesheet */
}

input {
   font-family: 'Noto Sans', sans-serif;
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.5;
   color: hsla(0, 0%, 0%, 0.87);
}

/* Table ~ material rules */

table > caption {
   line-height: 1.5rem;
   text-align: center;
   font-size: 1rem;
   color: hsl(210, 65%, 45%);
   background-color: hsl(0, 0%, 96%);
}

thead tr {
   height: 1.5rem;
   line-height: 1.5;
   font-size: 0.8rem;
   color: hsla(0, 0%, 0%, 0.54);
   background-color: hsl(0, 0%, 96%);
}

tbody tr {
   height: 2.5rem;
}

th,  td {
   vertical-align: middle;
   text-align: right;
}

thead tr:first-child th {
   text-align: center;
   vertical-align: bottom;
}

thead tr:first-child th:first-child {
   text-align: left;
   vertical-align: middle;
}

thead tr:last-child th {
   vertical-align: top;
}

th:first-child, td:first-child {
   padding-left: 1.5rem;
}

th:not(:first-child), td:not(:first-child) {
   padding-left: 3.5rem;
}

th:last-child, td:last-child {
   padding-right: 1.5rem;
}

thead {
   border: thin solid hsl(0, 0%, 85%);
   border-width: thin 0;
}

tbody tr:hover {
   background-color: hsl(0, 0%, 96%);
}

/*
 * Elevation / Shadow
 */

.shadow-4 {
   box-shadow: 0 4px 8px rgba(0, 0, 0, .28);
}

.card {
   background-color: #ffffff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}

/*
 * SSP rules
 */

.ssp-button-flat {
   display: inline-block;
   padding: 1rem .5rem !important;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: hsl(160, 65%, 45%);
   background-color: #ffffff;

   transition: all .3s ease;
}

.ssp-button-flat:hover {
   background-color: hsla(160, 65%, 45%, 0.12);
}

.ssp-button-float {      
   display: block;
   width: 2.5rem;
   height: 2.5rem;
   border: none;
   border-radius: 50%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1.5rem;
   background-color: hsl(160, 65%, 45%);
   cursor: pointer;
   box-shadow: 0 6px 8px rgba(0, 0, 0, .28);
   
   transition: all .3s ease;
}

.ssp-button-float:hover {
   background-color: hsl(160, 65%, 41%);
}

.ssp-button-form-help {
   display: block;
   width: 1.5rem;
   height: 1.5rem;
   border: none;
   background-image: url('/src/assets/material.io/ic_help_black_24px.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   background-color: transparent;
   opacity: 0.54;

   transition: all .3s ease-in-out;
}

.ssp-button-form-help:hover {
   opacity: 1;
}

.ssp-button-form-help.close {
   background-image: url('/src/assets/material.io/ic_close_black_24px.svg');
   opacity: 1;
}

/* Doc */

.ssp-doc {
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
}

.ssp-doc p {
   margin: 1.375rem 0;
   font-size: 1rem;
   line-height: 1.375;
}

.ssp-doc h2 {
   margin: 1.75em 0 .5em 0;
   font-size: 2.25rem;
   color: hsl(210, 65%, 45%);
}

.ssp-doc h2:first-child {
   margin-top: 0;
}

/* Help */

.ssp-help  {
   margin: 2rem 0;
   font-size: 1rem;
   line-height: 1.375;
}

.ssp-help p {
   margin: 1.375rem 0;
   font-size: 1rem;
   line-height: 1.375;
}

.ssp-help dl {
   margin: 1.375rem 0;
   font-size: 1rem;
   line-height: 1.375;
}

.ssp-help dt {
   margin: 1.375rem 0;
   font-size: 1rem;
   line-height: 1.375;
}

/* Icons */

.ic-apps {
   background: url('/src/assets/material.io/ic_apps_white_48px.svg') no-repeat center / 24px;
}

.ic-location {
   background-image: url('/src/assets/material.io/ic_location_black_48px.svg');
}

.ic-date-range {
   background-image: url('/src/assets/material.io/ic_date_range_yg_black_48px.svg');
}

.ic-planet {
   background-image: url('/src/assets/material.io/ic_planet_yg_black_48px.svg');
}

.ic-settings {
   background-image: url('/src/assets/material.io/ic_settings_black_48px.svg');
}

/*
 * Debug wireframe
 */

.dbg {
   border: thin dotted orange;
}

/*
 * Responsive
 */

/*
@media screen and (max-width: 1440px) {
  html {
    font-size: .8rem;
  }
}
*/