/*! * snack.css - v2.1.2 * A minimal CSS framework for web. * https://nzbin.github.io/snack/ * * Copyright (c) 2017 nzbin * Released under MIT License */ html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: .67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: inherit; font-weight: bolder; } code, kbd, samp { font-family: monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: 12px; } body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #333; line-height: 1.42858; } a { text-decoration: none; color: #348fe2; } code, kbd, pre, samp { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } pre { display: block; font-size: 13px; line-height: 1.42858; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; overflow: auto; } code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 3px; } kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px; } h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; } small, .small { font-weight: 400; line-height: 1; color: #777; font-size: 65%; } h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; } hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; } .btn { display: inline-block; padding: 4px 12px; text-align: center; vertical-align: middle; line-height: 1.42858; font-size: 14px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; outline: none; } .btn.default { color: #fff; background-color: #b6c2c9; } .btn.default:hover { background-color: #a7b6be; } .btn.default:focus { background-color: #a7b6be; } .btn.default:active { background-color: #a7b6be; } .btn.primary { color: #fff; background-color: #348fe2; } .btn.primary:hover { background-color: #2083dd; } .btn.primary:focus { background-color: #2083dd; } .btn.primary:active { background-color: #2083dd; } .btn.info { color: #fff; background-color: #49b6d6; } .btn.info:hover { background-color: #34aed1; } .btn.info:focus { background-color: #34aed1; } .btn.info:active { background-color: #34aed1; } .btn.success { color: #fff; background-color: #84b547; } .btn.success:hover { background-color: #77a340; } .btn.success:focus { background-color: #77a340; } .btn.success:active { background-color: #77a340; } .btn.danger { color: #fff; background-color: #ff5b57; } .btn.danger:hover { background-color: #ff423e; } .btn.danger:focus { background-color: #ff423e; } .btn.danger:active { background-color: #ff423e; } .btn.warning { color: #fff; background-color: #f59c1a; } .btn.warning:hover { background-color: #eb900a; } .btn.warning:focus { background-color: #eb900a; } .btn.warning:active { background-color: #eb900a; } .btn.inverted { color: #fff; background-color: #2d353c; } .btn.inverted:hover { background-color: #434f59; } .btn.inverted:focus { background-color: #434f59; } .btn.inverted:active { background-color: #434f59; } .btn.link { color: #348fe2; background-color: transparent; border-color: transparent; } .btn.link:hover { color: #1c75c7; text-decoration: underline; background-color: transparent; } .btn.link:focus { color: #1c75c7; text-decoration: underline; background-color: transparent; } .btn.link:active { color: #1c75c7; text-decoration: underline; background-color: transparent; } .btn.outline { background-color: transparent; } .btn.outline.default { color: #b6c2c9; border-color: #b6c2c9; } .btn.outline.default:hover { color: #fff; background-color: #b6c2c9; } .btn.outline.default:focus { color: #fff; background-color: #b6c2c9; } .btn.outline.default:active { color: #fff; background-color: #b6c2c9; } .btn.outline.primary { color: #348fe2; border-color: #348fe2; } .btn.outline.primary:hover { color: #fff; background-color: #348fe2; } .btn.outline.primary:focus { color: #fff; background-color: #348fe2; } .btn.outline.primary:active { color: #fff; background-color: #348fe2; } .btn.outline.info { color: #49b6d6; border-color: #49b6d6; } .btn.outline.info:hover { color: #fff; background-color: #49b6d6; } .btn.outline.info:focus { color: #fff; background-color: #49b6d6; } .btn.outline.info:active { color: #fff; background-color: #49b6d6; } .btn.outline.success { color: #84b547; border-color: #84b547; } .btn.outline.success:hover { color: #fff; background-color: #84b547; } .btn.outline.success:focus { color: #fff; background-color: #84b547; } .btn.outline.success:active { color: #fff; background-color: #84b547; } .btn.outline.danger { color: #ff5b57; border-color: #ff5b57; } .btn.outline.danger:hover { color: #fff; background-color: #ff5b57; } .btn.outline.danger:focus { color: #fff; background-color: #ff5b57; } .btn.outline.danger:active { color: #fff; background-color: #ff5b57; } .btn.outline.warning { color: #f59c1a; border-color: #f59c1a; } .btn.outline.warning:hover { color: #fff; background-color: #f59c1a; } .btn.outline.warning:focus { color: #fff; background-color: #f59c1a; } .btn.outline.warning:active { color: #fff; background-color: #f59c1a; } .btn.outline.inverted { color: #2d353c; border-color: #2d353c; } .btn.outline.inverted:hover { color: #fff; background-color: #2d353c; } .btn.outline.inverted:focus { color: #fff; background-color: #2d353c; } .btn.outline.inverted:active { color: #fff; background-color: #2d353c; } .btn.fluid { display: block; width: 100%; } .btn.pill { border-radius: 16px; } .btns { position: relative; display: inline-block; vertical-align: middle; } .btns > .btn { position: relative; float: left; border-radius: 0; margin-left: -2px; } .btns > .btn:first-child { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .btns > .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btns.vertical > .btn { position: relative; display: block; float: none; border-radius: 0; width: 100%; max-width: 100%; margin-left: 0; margin-top: -2px; } .btns.vertical > .btn:first-child { margin-top: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; } .btns.vertical > .btn:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .container { max-width: 1170px; margin: 0 auto; padding-left: 15px; padding-right: 15px; } .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter .col, .row.no-gutter .col-1, .row.no-gutter .col-2, .row.no-gutter .col-3, .row.no-gutter .col-4, .row.no-gutter .col-5, .row.no-gutter .col-6, .row.no-gutter .col-7, .row.no-gutter .col-8, .row.no-gutter .col-9, .row.no-gutter .col-10, .row.no-gutter .col-11, .row.no-gutter .col-12 { padding: 0; } .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { position: relative; width: 100%; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 576px) { .col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } .col-offset-1 { margin-left: 8.33333%; } .col-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } .col-offset-2 { margin-left: 16.66667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-offset-3 { margin-left: 25%; } .col-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } .col-offset-4 { margin-left: 33.33333%; } .col-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } .col-offset-5 { margin-left: 41.66667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-offset-6 { margin-left: 50%; } .col-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } .col-offset-7 { margin-left: 58.33333%; } .col-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } .col-offset-8 { margin-left: 66.66667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-offset-9 { margin-left: 75%; } .col-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } .col-offset-10 { margin-left: 83.33333%; } .col-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } .col-offset-11 { margin-left: 91.66667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .col-offset-12 { margin-left: 100%; } .cols-10 > .col-1 { flex: 0 0 10%; max-width: 10%; } .cols-10 > .col-offset-1 { margin-left: 10%; } .cols-10 > .col-2 { flex: 0 0 20%; max-width: 20%; } .cols-10 > .col-offset-2 { margin-left: 20%; } .cols-10 > .col-3 { flex: 0 0 30%; max-width: 30%; } .cols-10 > .col-offset-3 { margin-left: 30%; } .cols-10 > .col-4 { flex: 0 0 40%; max-width: 40%; } .cols-10 > .col-offset-4 { margin-left: 40%; } .cols-10 > .col-5 { flex: 0 0 50%; max-width: 50%; } .cols-10 > .col-offset-5 { margin-left: 50%; } .cols-10 > .col-6 { flex: 0 0 60%; max-width: 60%; } .cols-10 > .col-offset-6 { margin-left: 60%; } .cols-10 > .col-7 { flex: 0 0 70%; max-width: 70%; } .cols-10 > .col-offset-7 { margin-left: 70%; } .cols-10 > .col-8 { flex: 0 0 80%; max-width: 80%; } .cols-10 > .col-offset-8 { margin-left: 80%; } .cols-10 > .col-9 { flex: 0 0 90%; max-width: 90%; } .cols-10 > .col-offset-9 { margin-left: 90%; } .cols-10 > .col-10 { flex: 0 0 100%; max-width: 100%; } .cols-10 > .col-offset-10 { margin-left: 100%; } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } } .media { display: flex; align-items: flex-start; } .media-body { flex: 1; } .media-left { padding-right: 10px; } .media-right { padding-left: 10px; } .media-heading { margin-top: 0; margin-bottom: 5px; } .media-content { font-size: 13px; } .avatar { display: inline-block; border-radius: 100%; overflow: hidden; } .avatar img { display: block; } input[type="file"] { display: block; } textarea { resize: vertical; } label { display: inline-block; margin-bottom: 5px; } .form-control { display: block; width: 100%; padding: 4px 8px; border: 2px solid #ddd; border-radius: 4px; background-color: #fff; background-clip: padding-box; font-size: 14px; line-height: 1.42858; color: #333; } .form-control:focus { border-color: #348fe2; outline: 0; } .form-control[disabled] { cursor: not-allowed; } .form-control:disabled, .form-control[readonly] { background-color: #e9ecef; opacity: 1; } .form-label { padding-top: 5px; padding-bottom: 5px; margin-bottom: 0; } .form-group { margin-bottom: 15px; } .form-inline { display: flex; flex-flow: row wrap; align-items: center; } .form-inline input[type="file"], .form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; } .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } .checkbox, .radio { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; padding-left: 20px; } .checkbox label, .radio label { position: relative; display: inline-block; min-height: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; } .checkbox.disabled label, .radio.disabled label { cursor: not-allowed; } .checkbox.inline, .radio.inline { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; font-weight: 400; } .checkbox + .checkbox, .radio + .radio { margin-top: -5px; } .checkbox.inline + .checkbox.inline, .radio.inline + .radio.inline { margin-top: 0; margin-left: 10px; } .checkbox input[type="checkbox"], .radio input[type="radio"] { position: absolute; margin-top: 4px; margin-left: -20px; } fieldset[disabled] .form-control, fieldset[disabled] .checkbox label, fieldset[disabled] .radio label { cursor: not-allowed; } .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; } table { background: transparent; border-spacing: 0; border-collapse: collapse; } .table { width: 100%; max-width: 100%; margin-bottom: 15px; text-align: left; line-height: 1.42858; } .table th { padding: 12px 8px; } .table td { padding: 8px; } .table > thead { background-color: rgba(100, 100, 150, 0.04); } .table > thead > tr > th, .table > thead > tr > td { border-bottom: 1px solid #ddd; } .table > tbody > tr + tr > th, .table > tbody > tr + tr > td { border-top: 1px solid #ddd; } .table > tfoot { background-color: rgba(100, 100, 150, 0.04); } .table > tfoot > tr > th, .table > tfoot > tr > td { border-top: 1px solid #ddd; } .table.rounded { max-width: none; border-collapse: separate; border-radius: 5px; } .table.bordered { border: 2px solid #ddd; } .table.bordered > thead > tr > th + th, .table.bordered > thead > tr > td + td, .table.bordered > tbody > tr > th + th, .table.bordered > tbody > tr > td + td, .table.bordered > tfoot > tr > th + th, .table.bordered > tfoot > tr > td + td { border-left: 1px solid #ddd; } .table.striped > tbody > tr:nth-of-type(2n+2) { background-color: rgba(100, 100, 150, 0.04); } .table.hover > tbody > tr:hover { background-color: rgba(100, 100, 150, 0.04); } .table-overflow { min-height: .01%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .box { padding: 10px 15px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; } .boxes { border: 2px solid transparent; border-radius: 5px; margin-bottom: 15px; } .boxes > .box { border-width: 0; border-radius: 0; margin-bottom: 0; } .boxes > .box:first-child { border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; } .boxes > .box:last-child { border-bottom-left-radius: 3px !important; border-bottom-right-radius: 3px !important; } .boxes > .box.box-header { background-color: #f5f5f5; } .boxes > .box.box-body { padding-top: 15px; padding-bottom: 15px; } .boxes > .box.box-footer { background-color: #f5f5f5; } .boxes .box + .box { border-top-width: 1px; } .boxes .boxes { margin-bottom: 0; } .boxes.default { border-color: #ddd; } .boxes.primary { border-color: #348fe2; } .boxes.info { border-color: #49b6d6; } .boxes.success { border-color: #84b547; } .boxes.danger { border-color: #ff5b57; } .boxes.warning { border-color: #f59c1a; } .boxes.inverted { border-color: #2d353c; } .boxes.transparent { background-color: transparent; } .boxes.transparent .box { background-color: transparent; } .boxes.raised { box-shadow: 0 3px 30px 3px rgba(50, 50, 100, 0.1); } .boxes.raised .box { border-color: #f7f7f7; } .boxes.secondary { border-width: 0; } .boxes.secondary > .box { border-width: 1px; border-radius: 4px; } .boxes.secondary > .box.box-header { background-color: transparent; margin-bottom: 0; border-width: 0; border-radius: 0 !important; } .boxes.secondary > .box.box-body { padding-top: 15px; padding-bottom: 15px; margin-bottom: 0; } .boxes.secondary > .box.box-footer { background-color: transparent; border-width: 0; border-radius: 0 !important; } .bg-primary { background-color: #348fe2; } .bg-info { background-color: #49b6d6; } .bg-success { background-color: #84b547; } .bg-danger { background-color: #ff5b57; } .bg-warning { background-color: #f59c1a; } .bg-inverted { background-color: #2d353c; } .text-muted { color: #555; } .text-white { color: #fff; } .text-primary { color: #348fe2; } .text-info { color: #49b6d6; } .text-success { color: #84b547; } .text-danger { color: #ff5b57; } .text-warning { color: #f59c1a; } .text-inverted { color: #2d353c; } .pull-right { float: right; } .pull-left { float: left; } .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; }