/* Font from CDN, https://developers.google.com/fonts/docs/getting_started */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import 'layout.css';
@import 'material.css';

/*https://google-webfonts-helper.herokuapp.com*/
/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans Local Fallback';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), 
        url('../fonts/open-sans-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/open-sans-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin */
@font-face {
    font-family: 'Open Sans Local Fallback';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), 
        url('../fonts/open-sans-v28-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/open-sans-v28-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans Local Fallback';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), 
        local('OpenSans-Bold'), 
        url('../fonts/open-sans-v28-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ 
        url('../fonts/open-sans-v28-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
    background-color: #1f3040;
    background-image: url('/chrome/theme/bap_background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

body {
    color: #000;
    font-family: 'Open Sans', 'Open Sans Local Fallback', sans-serif;
    font-size: .8em;
    height: 100%;
    margin: 0;
    min-width: 0;
    overflow-y: scroll;
    padding: 0
}

button {
    font-size: 1em;
    min-width: 10em;
    padding: .2em .5em;
    width: auto;
}

dd {
    margin: 0 0 0.5em;
    padding: 0
}

fieldset {
    /*background-color: #FFF;*/
    border: none;
    margin: 8px;
    padding: 8px
}

fieldset legend {
    background: var(--gradient-header);
    border: var(--border-light);
    font-weight: 600;
    padding: 7px 20px;
}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, img + p {
    margin-top: .2em;
}

h1, h2 { 
    font-size: 130%;
}

h1, h2, h3, h4, h5, h6 { margin-bottom: .2em }

h3 { font-size: 125% }

h4 {
    font-size: 115%;
    margin-top: 0.2em;
    padding-top: 0.1em
}

h5 { font-size: 110% }

h6 { font-size: 105% }

h7 { font-weight: 700 }

hr { border: var(--border-standard) }

input { width: 220px }

input[type=image] { width: auto; }

kbd {
    background: var(--color-neutral-lightest);
    border-style: outset;
    border-width: 1px 2px 2px 1px;
    font-size: 100%;
    margin: .1em;
    padding: 0 .2em
}

label {
    display: block;
    margin: .5em 0 .2em
}

table.checkBoxList label { display: inline; }

p { line-height: 1.5 }

pre { font-size: 1.2em }

select { width: 228px; }

input, select, textarea, button {
    font-family: inherit;
    border-radius: var(--radius-standard);
    outline-color: var(--color-secondary);
    outline-offset: 1px;
}

textarea {
    font-size: 1em;
    font-weight: 400;
    height: 120px;
    text-align: left;
    width: 220px;
    padding: 2px 0px 2px 3px;
}

textarea.bigarea { width: 100%; }

:root {
    --shadow-box-neutral: 0 2px 2px 0px rgb(0 0 0 / 8%), 0 1px 1px 0.5px rgb(0 0 0 / 10%); /*Shadow for large 'container' type boxes*/
    --shadow-box-neutral-inset: inset 0px 0px 0px 1px rgb(0 0 0 / 5%); /*Subtle shadow for better visibility against background*/
    --shadow-box-white: 0 2px 3px -1px rgb(0 0 0 / 5%), 0 1px 1px 0.6px rgb(0 0 0 / 12%); /*Shadow for small 'container' type boxes*/
    --shadow-box-white-inset: inset 0.5px 0.5px 0 0.5px rgb(0 0 0 / 13%); /*Subtle inset shadow for better visibility against background*/
    --shadow-box-white-large: 1px 1px 7px rgb(0 0 0 / 30%); /*Large shadow for menus, balloon popups etc*/
    --shadow-box-input: inset 1px 1px 1px rgb(88 146 196 / 15%); /*Subtle 3D effect on input fields*/
    --shadow-button: inset 0px 0px 0 1px rgb(0 0 0 / 12%), inset 0px -1px 0px rgb(0 0 0 / 7%), inset 2px 2px 0px rgb(255 255 255 / 20%); /*Shadow on light buttons*/
    --shadow-button-dark: inset 0 1.3px 0 rgb(255 255 255 / 10%), inset 0 -0.4px 0 1px rgb(0 0 0 / 8%), 0 1px 0px rgb(0 0 0 / 8%); /*Shadow on dark buttons*/
    --shadow-text-dark: 0px 0px 1px rgb(255 255 255 / 40%); /*Shadow for dark text on bright background*/
    --shadow-text-light: 1px 1px 0px rgb(0 0 0 / 15%), 0px 0px 2px rgb(0 0 0 / 25%); /*Shadow for bright text on dark background*/
    --shadow-header: 0 -1px 0px rgb(0 0 0 / 17%), inset 0px -1px 0px rgb(0 0 0 / 9%), inset 0px 0px 0px 1px rgb(255 255 255 / 25%); /*Shadow top and bottom for better visibility*/
    --shadow-header-dark: 0 -1px 0px rgb(0 0 0 / 8%), inset 0px -1px 0px rgb(0 0 0 / 12%); /*Shadow top and bottom for better visibility*/
    --shadow-horisontal-divider: 0px 1px 0px rgb(0 0 0 / 13%), 0px 2px 0px rgb(255 255 255 / 100%); /*3D line divider*/
    --shadow-table: 0 2px 2px 0px rgb(0 0 0 / 8%), 0 1px 1px 0.5px rgb(0 0 0 / 10%); /*Shadow for tables*/
    --shadow-table-header: inset 0px 1px 0px rgb(0 0 0 / 30%), inset 0px -1px 0px rgb(0 0 0 / 30%); /*Subtle shadow for better visibility*/
    --shadow-bevel-down: inset 0px 1px 0px rgb(0 0 0 / 8%);
    --radius-standard: 3px;
    --radius-small: 2px;
    --radius-large: 5px;
    --color-button-light: #F3F5F8;
    --color-icon: #8c93a8;
    --color-icon-light: #bdcdff;
    --color-menu-background: #303237;
    --color-menu-selected: #2BD481;
    --color-menu-tab: #4c4e54;
    --color-menu-tab-hover: #358c60;
    --color-pagebackground: #E8E8EA;
    --color-neutral-lightest: #FCFCFD;
    --color-neutral-lighter: #F7F7F8;
    --color-neutral-light: #f3f3f4;
    --color-neutral: #DEDEDF;
    --color-neutral-dark: #B5B5B6;
    --color-neutral-darker: #666677;
    --color-neutral-darkest: #2D2D2D;
    --color-primary-lightest: #d2ddff;
    --color-primary-lighter: #7dbaee;
    --color-primary-hover: #5da6e5;
    --color-primary: #5f9dd2;
    --color-primary-dark: #316ab7;
    --color-secondary-lighter: #d6f6e5;
    --color-secondary-light: #8cedbd;
    --color-secondary: #4cb481;
    --color-secondary-hover: #52C68D;
    --color-secondary-dark: #299560;
    --color-link-hover: #5b76c7;
    --color-link-dark: #203983;
    --color-link: #2E4DAD; /*Links on light backgrounds*/
    --color-link-light: #d2ddff; /*Links on dark backgrounds*/
    --color-bluish-grey-light: #ccd3d8;
    --color-bluish-grey: #5d6d7c;
    --color-bluish-grey-dark: #373E47;
    --color-blue: #084298;
    --color-blue-light: #cfe2ff;
    --color-blue-lighter: #dee8f0;
    --color-yellow-light: #FFC;
    --color-yellow: #ffed92;
    --color-orange: #c68e13;
    --color-green-light: #cce4d9;
    --color-green: #5cb85c;
    --color-green-dark: #10854b;
    --color-red-light: #FED7D7;
    --color-red: #ff1616;
    --color-red-dark: #991111;
    --gradient-header: transparent linear-gradient(180deg, #FDFDFE 0%, #eeeeef 5%, #e6e6e8 100%); /*Use for headings in small 'container' type boxes*/
    --gradient-button-light: transparent linear-gradient(180deg, #eff2f4 0%, #e6ebf0 100%);
    --gradient-neutral: transparent linear-gradient(180deg, var(--color-neutral-lightest) 0%, var(--color-neutral-light) 100%); /*Use for table headers and footers, etc*/
    --gradient-neutral-dark: transparent linear-gradient(180deg, #e2e2e2 0%, #dbdbdb 100%); /*Use for table headers and footers etc, darker variant*/
    --gradient-bluish-grey: transparent linear-gradient(180deg, #c8cfd3 0%, #cad5dc 8%, #c4cbd2 100%);
    --border-light: solid 1px rgb(0 0 0 / 10%); /*Lighter border. A slightly darker tone of the current box color*/
    --border-standard: solid 1px rgb(0 0 0 / 20%); /*Standard border. A darker tone of the current box color*/
    --border-dark: solid 1px rgb(0 0 0 / 35%); /*Slightly darker border. A darker tone of the current box color*/
}