/**************************************
 * default: #3a3a3a;
 * primary: #6699ff;
 * muted  : #dadada;
 *
 * layout : #eaeaea;
 *
 *
 **************************************/

/**************************************
 * DEFAULT
 **************************************/
* {
    box-sizing: border-box;
}

img {
    vertical-align: middle;
}

body {
    margin: 0px;
    padding: 0px;
    padding-bottom: 100px;
    color: #3a3a3a;
    font-size: 1em;
}

/**************************************
 * MEDIA
 **************************************/
.media {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px 0;
}

.media:not(:last-child) {
    margin-bottom: 10px;
}

.media > div {
    display: flex;
    flex: 1;
    flex-flow: row wrap;
}

.media > .media-tight {
    flex: none;
    word-break: keep-all;
    white-space: nowrap
}

.media > .media-middle {
    align-items: center;
}

.media > .media-right {
    justify-content: right;
}

/**************************************
 * TEXT
 **************************************/
body,
button,
select {
    font-family: Roboto,Verdana,Arial,Sans-Serif;
}

.text-bold {font-weight: bold}
.text-center {text-align: center}

a,
.text-link {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: #6699ff;
}

a:hover,
.text-link:hover,
.text-link.active {
    text-decoration: underline;
}

.text-muted {color: #dadada}
.text-danger {color: #ff0000}
.text-default {color: #3a3a3a}
.text-primary {color: #6699ff}

.text-sm {font-size: 0.8em;}

/**************************************
 * SPACER
 **************************************/
ul.spacer {
    margin: 0px;
    padding: 0px;
}

ul.spacer > li {
    display: inline-block;
    vertical-align: middle;
}

ul.spacer > li > * {
    display: inline-block;
}

ul.spacer > li:not(:last-child)::after {
    content: '';
    margin: 0 5px;
    color: #eaeaea;
    cursor: default !important;
    pointer-events: none;
}

ul.spacer-pipe > li:not(:last-child)::after {
    content: '|';
}

/**************************************
 * DISPLAY
 **************************************/
.px-1 {padding-left: 0.5em !important; padding-right: 0.5em !important;}
.px-2 {padding-left: 0.8em !important; padding-right: 0.8em !important;}
.px-3 {padding-left: 1.3em !important; padding-right: 1.3em !important;}
.px-4 {padding-left: 2em !important; padding-right: 2em !important;}

.py-0 {padding-top: 0em !important; padding-bottom: 0em !important;}
.py-1 {padding-top: 0.5em !important; padding-bottom: 0.5em !important;}
.py-2 {padding-top: 0.8em !important; padding-bottom: 0.8em !important;}
.py-3 {padding-top: 1.3em !important; padding-bottom: 1.3em !important;}
.py-4 {padding-top: 2em !important; padding-bottom: 2em !important;}

.mx-1 {margin-left: 0.5em !important; margin-right: 0.5em !important;}
.mx-2 {margin-left: 0.8em !important; margin-right: 0.8em !important;}
.mx-3 {margin-left: 1.3em !important; margin-right: 1.3em !important;}
.mx-4 {margin-left: 2em !important; margin-right: 2em !important;}

.my-0 {margin-top: 0em !important; margin-bottom: 0em !important;}
.my-1 {margin-top: 0.5em !important; margin-bottom: 0.5em !important;}
.my-2 {margin-top: 0.8em !important; margin-bottom: 0.8em !important;}
.my-3 {margin-top: 1.3em !important; margin-bottom: 1.3em !important;}
.my-4 {margin-top: 2em !important; margin-bottom: 2em !important;}

.mb-1 {margin-bottom: 0.5em !important;}
.mb-2 {margin-bottom: 0.8em !important;}
.mb-3 {margin-bottom: 1.3em !important;}
.mb-4 {margin-bottom: 2em !important;}

/**************************************
 * SPACING
 **************************************/

.w-100 {width:100%;}

/**************************************
 * SPINNER
 **************************************/
.spinner::before {
    content: '+';
    margin: 0 5px;
    display: inline-block;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {transform:rotate(0deg)}
    to {transform:rotate(360deg)}
}

/**************************************
 * HEADER
 **************************************/
.header {
    height: 30px;
    line-height:30px
}

.header > img,
.header > a > img {
    height: 30px
}

/**************************************
 * CONTAINER
 **************************************/
.container {
    margin: 0 auto;
    padding: 0 30px;
    max-width: 600px
}

.container-xs {
    max-width: 200px
}

.container-sm {
    max-width: 400px
}

.container-lg {
    max-width: 800px
}

.container-xl {
    max-width: 1000px
}

/**************************************
 * THUMBNAIL
 **************************************/
.thumbnail {
    display: inline-block;
    width: 150px;
    height: 150px;
    line-height: 142px;
    padding: 2px;
    text-align: center;
    border: solid #eaeaea 1px;
}

.thumbnail > img {
    width: 100%;
}

.thumbnail-sm {
    width: 100px;
    height: 100px;
    line-height: 92px;
}


/**************************************
 * HR
 **************************************/
hr {
    margin: 15px 0;
    border-top: none;
    border-bottom-color: #eaeaea
}

/**************************************
 * HEADING
 **************************************/
h1 {
    margin: 15px 0
}

/**************************************
 * BUTTON
 **************************************/
.btn,
button {
    font-size: 0.8em;
    padding: 4px 8px
}

.btn-sm {
    font-size: 0.6em;
    padding: 2px 6px;
}

/**************************************
 * INPUT
 **************************************/
.input-group {
    margin-bottom: 10px;
}

.input-group > input[type=text],
.input-group > input[type=password] {
    width: 100%;
    padding: 5px;
}


/**************************************
 * SELECT
 **************************************/
select {
    font-size: 0.8em;
    padding: 4px 8px
}