// Colors $navy: #001f3f; $blue: #0074D9; $aqua: #7FDBFF; $teal: #39CCCC; $olive: #3D9970; $green: #2ECC40; $lime: #01FF70; $yellow: #FFDC00; $orange: #FF851B; $red: #FF4136; $maroon: #85144b; $fuchsia: #F012BE; $purple: #B10DC9; $black: #212121; $gray: #AAAAAA; $silver: #DDDDDD; $white: #FFFFFF;

/* CSS Reset */

html {

box-sizing: border-box;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

}

*, *:before, *:after {

box-sizing: inherit;

}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {

margin: 0;
padding: 0;
font-weight: normal;

}

ul {

list-style: circle inside;

} /* Lists */ ol {

list-style: decimal inside;

}

li {

margin-bottom: .5rem;

}

li > ul, li > ol {

margin: 1rem 0 1rem 1rem;

}

img {

max-width: 100%;
height: auto;

}

body {

line-height: 1;
color: $black;

}

// The grid

$col_size: 100%/12;

@for $i from 1 to 13 {

.col-#{$i} { width: $col_size * $i; }

}

.row {

width: 100%;
max-width: 1140px;
&:before,
&:after {
        content:"";
        display:table;
        clear:both;
}

}

.row [class=col-]{

padding: .2rem 0;
box-sizing: border-box;
float: left;

}

h1 {font-size: 3rem;} h2 {font-size: 2.5rem;} h3 {font-size: 2rem;} h4 {font-size: 1.75rem;} h5 {font-size: 1.5rem;} h6 {font-size: 1.25rem;} h1, h2, h3, h4, h5, h6 {

line-height: 1.2;

}

/* Forms and buttons */

input:not():not():not():not():not(), optgroup, select, textarea {

font-family: inherit;
font-size: 100%;
line-height: 150%;
-webkit-appearance: none;
background: #FFFFFF;
padding: .2rem .4rem;
color: $black;
border: 1px solid $gray;
border-radius: .2rem;
transition: border-color 0.2s ease;
width: 100%;
max-width: 100%;

&:focus {
        border-color: $aqua;
}

&:disabled {background-color: $silver}

&:invalid {
        border: 1px solid $red;
        box-shadow: none;
}

}

input:not():not(), select, textarea, optgroup {

margin: .5rem 0;

}

select{

padding-right: 24px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuNDEsOC41OEwxMiwxMy4xN0wxNi41OSw4LjU4TDE4LDEwTDEyLDE2TDYsMTBMNy40MSw4LjU4WiIgLz48L3N2Zz4=);
background-position: 100% 50%;
background-repeat: no-repeat;

}

label, legend {

display: block;

}

/* Buttons */

button, a.button, *[type=submit], *[type=reset] {

background-color: $white;
border: 1px solid $gray;
border-radius: .2rem;
line-height: 2rem;
color: $black;
padding: 0 2rem;
height: 2rem;
display: inline-block;
font-weight: bold;
box-sizing: border-box;
font-size: 1rem;

}

/* Alerts */ .alert {

display: block;
margin: 10px 0;
padding: .5rem;
border-radius: .2rem;

}

.primary, .success, .danger, .warning, .info, *:disabled{

color: #FFFFFF;

}

.primary {

background: $blue;
border-color: $blue;

}

.success {

background: $green;
border-color: $green;

}

.danger {

background: $red;
border-color: $red;

}

.warning {

background: $orange;
border-color: $orange;

}

.info {

background: $aqua;
border-color: $aqua;

}

/* Material Icons */ .material-icons {

display: inline;
vertical-align: middle;

}

/* Responsive iframes for YouTube videos and Iframes*/

.resp-iframe {

position: relative;
width: 100%;
padding-bottom:56.25%;
margin: auto;
height: 0;

iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
}

}

video, audio {

width: 100%;
max-width: 1280px;
height: auto;

}

/* Navbar and links */

.navbar {

line-height: 50px;
border-bottom: 1px solid $black;
margin-bottom: 10px;
padding: 0 .2rem;

a, .navbar-title {
        display: inline-block;
        margin-right: 5px;
}

nav {
        display: inline;
}

.navbar-title {
        font-weight: bold;
        font-size: 1.2rem;
}

&.fixed {
        position: sticky;
        top: 0;
        background: $white;
        z-index: 666;
}

&.navbar-vert {
        line-height: 1.5rem;
        display: table;
        border-bottom: 0;
        a, .navbar-title {
                display: block;
                padding: .2rem .5rem;
        }
}

}

a {

color: $blue;
text-decoration: none;
transition: color .5s ease;
&:hover {color: $black}

}

/* Tables */

table {

width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 10px 0;

td, th {
        padding: 5px;
        line-height: 150%;
        border-top: 1px solid $gray;
        border-bottom: 1px solid $gray;
        text-align: left;
}

&.strip {
        tbody tr:nth-of-type(2n+2) {
                background-color: $silver;
        }
}

&.bordered {
        td, th {
                border: 1px solid $gray;
                border-bottom: 1px solid $gray;
        }
}

}

/* Blockquote */

blockquote, pre {

font-family: monospace;
background-color: $black;
color: $gray;
border-radius: 3px;
padding: 1rem;
margin: 0;

}

pre {

white-space: pre-wrap;

}

ul, ol, p, table, blockquote, form, blockquote, pre, .resp-iframe, h1, h2, h3, h4, h5, h6, .card {

margin-bottom: 1rem;

}

/* Utilities */

.text-left {

text-align: left

}

.text-right {

text-align: right;

}

.text-center {

text-align: center;

}

.float-left {

float: left;

}

.float-right {

float: right;

}

/* Cards */

.card {

border-radius: .2rem;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .2),-1px -1px 1px rgba(0, 0, 0, .2);

.card-title, .card-body, .card-footer {
        padding: .5rem;
}
.card-title {
        font-size: 22px;
        font-weight: bold;
}

.card-footer {
        border-top: 1px solid $silver;
}

p {
        margin: 0;
}

}

@media (max-width: 639px){

table.responsive {
        & thead {display: none}
        & th, & td {
                display: block;
                padding-left: 50%;
                position: relative;
                border-bottom: 0;
        }
        & th:before, & td:before{
                display: inline-block;
                width: 50%;
                content: attr(data-title);
                position: absolute;
                left: 0;
                font-weight: bold;
                padding:0 5px;
        }
        & tr:nth-of-type(2n+2) {
                background-color: $silver;
        }
}

}

@media (max-width: 479px) {

.row *[class*=col-]{
        float: none;
        width: 100%;
}

table.responsive {
        & th, & td {
                display: block;
                width: 100%;
                padding-left: 5px;
        }
        & th:before, & td:before{
                display: block;
                width: 100%;
                position: relative;
                padding: 0;
        }
}

}