/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 3 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 2 */ text-decoration: underline dotted; /* 1 */ text-decoration: underline; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: .67em 0; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: .54; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: 10px; line-height: 1.42857143; -webkit-tap-highlight-color: transparent; } body { /** background: #fff; */ color: #333; font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", sans-serif; font-size: 1.4rem; overflow-x: hidden; } a { color: #5764c6; text-decoration: underline; } a:hover, a:focus { color: #283176; } [disabled], .disabled { cursor: default; opacity: .75; pointer-events: none; } .btn .icon, .toast .icon, .menu .icon { font-size: 1.3333em; line-height: .8em; margin-right: .2rem; vertical-align: -20%; } h1, h2, h3, h4, h5, h6 { color: inherit; font-weight: 300; line-height: 1.1; margin-bottom: 1.5rem; margin-top: 2.5rem; } h1 { font-size: 5rem; } h2 { font-size: 4rem; } h3 { font-size: 3rem; } h4 { font-size: 2.4rem; } h5 { font-size: 2rem; } h6 { font-size: 1.6rem; } p { margin: 0 0 1rem; } blockquote { border-left: .2rem solid #ddd; margin-left: 0; padding: 1rem 2rem; } blockquote p:last-child { margin-bottom: 0; } blockquote cite { color: #b3b3b3; } ul, ol { margin: 2rem 0 2rem 2rem; padding: 0; } ul ul, ol ul, ul ol, ol ol { margin: 1.5rem 0 1.5rem 2rem; } ul li, ol li { margin-top: 1rem; } ul { list-style: disc inside; } ul ul { list-style-type: circle; } ol { list-style: decimal inside; } ol ol { list-style-type: lower-alpha; } dl dt { font-weight: bold; } dl dd { margin: .5rem 0 1.5rem 0; } .lead { font-size: 120%; } mark, .highlight { background: #ffe5a3; border-radius: .2rem; display: inline; font-size: 1em; padding: .1em .3em; vertical-align: baseline; } pre { background: #f9f9f9; border-left: .2rem solid #5764c6; line-height: 1.8rem; margin-bottom: 1em; margin-top: 1em; overflow: auto; padding: 1.5rem; } code { background: #efefef; border-radius: .2rem; display: inline; font-size: 1em; padding: .1em .3em; vertical-align: baseline; white-space: nowrap; } pre code { background: transparent; border-left: 0; line-height: 1.8rem; margin-bottom: 0; margin-top: 0; } .img-responsive { display: block; height: auto; max-width: 100%; } .video-responsive { height: 0; overflow: hidden; padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */ padding-top: 3rem; position: relative; } .video-responsive iframe, .video-responsive object, .video-responsive embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .video-responsive video { height: auto; max-width: 100%; width: 100%; } .video-responsive-4-3 { padding-bottom: 75%; /* 4:3 */ } .table { border-collapse: collapse; border-spacing: 0; width: 100%; } .table.table-striped tbody tr:nth-of-type(odd) { background: #fcfcfc; } .table.table-hover tbody tr:hover { background: #f4f4f4; } .table.table-hover tbody tr.selected { background: #f2f2f2; } .table th, .table td { border-bottom: .1rem solid #efefef; padding: 1.5rem 1rem; text-align: left; } .table th { border-color: #c9c9c9; } .btn { -webkit-appearance: none; background: transparent; border: .1rem solid #5764c6; border-radius: .3rem; color: #5764c6; cursor: pointer; display: inline-block; font-size: 1.4rem; height: 3.2rem; line-height: 1.6rem; outline: 0; padding: .7rem 1.5rem; text-align: center; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; } .btn:focus { background: #f3f4fb; } .btn:hover { background: #5764c6; border-color: #4452c0; color: #fff; } .btn:active, .btn.active { background: #4452c0; border-color: #3b49af; color: #fff; } .btn.btn-primary { background: #5764c6; border-color: #4452c0; color: #fff; } .btn.btn-primary:focus { background: #4f5dc3; } .btn.btn-primary:hover { background: #4452c0; border-color: #3b49af; color: #fff; } .btn.btn-primary:active, .btn.btn-primary.active { background: #3b49af; border-color: #35419c; color: #fff; } .btn.btn-primary.loading::after { border-color: #fff; border-right-color: transparent; border-top-color: transparent; } .btn.btn-link { background: transparent; border-color: transparent; color: #5764c6; } .btn.btn-link:hover, .btn.btn-link:focus { color: #35419c; } .btn.btn-link:active, .btn.btn-link.active { color: #283176; } .btn.btn-sm { border-radius: .2rem; font-size: 1.2rem; height: 2.4rem; line-height: 1.4rem; padding: .4rem 1rem; } .btn.btn-lg { border-radius: .4rem; font-size: 1.8rem; height: 4.2rem; line-height: 2rem; padding: 1rem 1.8rem; } .btn.btn-block { display: block; width: 100%; } .btn.btn-clear { background: transparent; border: 0; color: #666; height: 2rem; margin-left: .3rem; opacity: .45; padding: 0; } .btn.btn-clear:hover { opacity: .85; } .btn.btn-clear::before { content: "\00d7"; font-size: 2rem; } .btn-group { display: inline-flex; display: -ms-inline-flexbox; display: -webkit-inline-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .btn-group .btn { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .btn-group .btn:first-child:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } .btn-group .btn:not(:first-child):not(:last-child) { border-radius: 0; margin-left: -.1rem; } .btn-group .btn:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -.1rem; } .btn-group .btn:hover, .btn-group .btn:focus { z-index: 99; } .btn-group.btn-group-block { display: flex; display: -ms-flexbox; display: -webkit-flex; } .form-group:not(:last-child) { margin-bottom: 1rem; } .form-input { -webkit-appearance: none; background: #fff; background-image: none; border: .1rem solid #c5c5c5; border-radius: .3rem; color: #333; display: block; font-size: 1.4rem; height: 3.2rem; line-height: 1.6rem; max-width: 100%; outline: 0; padding: .7rem .8rem; position: relative; width: 100%; } .form-input:focus { border-color: #5764c6; } .form-input[disabled] { background: #eeeff2; } .form-input.input-sm { border-radius: .2rem; font-size: 1.2rem; height: 2.4rem; padding: .3rem .6rem; } .form-input.input-lg { border-radius: .4rem; font-size: 1.6rem; height: 4.2rem; line-height: 2rem; padding: 1rem .8rem; } .form-input.input-inline { display: inline-block; vertical-align: middle; width: auto; } textarea.form-input { height: auto; line-height: 2rem; } .has-success .form-input, .form-input.is-success { border-color: #32b643; } .has-danger .form-input, .form-input.is-danger { border-color: #e85600; } .form-label { display: block; line-height: 1.6rem; margin-bottom: .5rem; } .form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: .1rem solid #c5c5c5; border-radius: .3rem; font-size: 1.4rem; line-height: 1.6rem; outline: 0; padding: .5rem .8rem; vertical-align: middle; } .form-select:not([multiple]) { background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem; height: 3.2rem; padding-right: 2.4rem; } .form-select:focus { border-color: #5764c6; } .form-select::-ms-expand { display: none; } .form-select.select-sm { border-radius: .2rem; font-size: 1.2rem; height: 2.4rem; padding: .4rem 2rem .4rem .6rem; } .form-select.select-lg { font-size: 1.6rem; height: 4.2rem; line-height: 2rem; padding: 1rem 2.4rem 1rem .8rem; } .form-checkbox input, .form-radio input, .form-switch input { clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; } .form-checkbox input:focus + .form-icon, .form-radio input:focus + .form-icon, .form-switch input:focus + .form-icon { box-shadow: 0 0 .3rem .1rem #efefef; } .form-checkbox, .form-radio { cursor: pointer; display: inline-block; line-height: 1.8rem; padding: .3rem 2rem; position: relative; } .form-checkbox .form-icon, .form-radio .form-icon { border: .1rem solid #c5c5c5; display: inline-block; font-size: 1.4rem; height: 1.4rem; left: 0; line-height: 2.4rem; outline: none; padding: 0; position: absolute; top: .5rem; transition: all .15s ease; vertical-align: top; width: 1.4rem; } .form-checkbox:hover .form-icon, .form-radio:hover .form-icon { border-color: #9f9f9f; } .form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon { background: #5764c6; border-color: #5764c6; } .form-checkbox .form-icon { border-radius: .2rem; } .form-checkbox input:checked + .form-icon::after { background-clip: padding-box; border: .2rem solid #fff; border-left-width: 0; border-top-width: 0; content: ""; height: 1rem; left: 50%; margin-left: -.3rem; margin-top: -.6rem; position: absolute; top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: .6rem; } .form-radio .form-icon { border-radius: .7rem; } .form-radio input:checked + .form-icon::after { background: #fff; border-radius: .2rem; content: ""; height: .4rem; left: 50%; margin-left: -.2rem; margin-top: -.2rem; position: absolute; top: 50%; width: .4rem; } .form-switch { cursor: pointer; display: inline-block; line-height: 1.8rem; padding: .3rem 2rem .3rem 3.6rem; position: relative; } .form-switch .form-icon { background: #c5c5c5; background-clip: padding-box; border: .1rem solid #c5c5c5; border-radius: .9rem; display: inline-block; height: 1.6rem; left: 0; line-height: 2.4rem; outline: none; padding: 0; position: absolute; top: .4rem; vertical-align: top; width: 2.6rem; } .form-switch .form-icon::after { background: #fff; border-radius: .8rem; content: ""; display: block; height: 1.4rem; left: 0; position: absolute; top: 0; transition: left .15s ease; width: 1.4rem; } .form-switch input:checked + .form-icon { background: #5764c6; border-color: #5764c6; } .form-switch input:checked + .form-icon::after { left: 1rem; } .input-group { display: flex; display: -ms-flexbox; display: -webkit-flex; } .input-group .input-group-addon { background: #f9f9f9; border: .1rem solid #c5c5c5; border-radius: .3rem; line-height: 1.6rem; padding: .7rem .8rem; } .input-group .input-group-addon.addon-sm { font-size: 1.2rem; padding: .3rem .6rem; } .input-group .input-group-addon.addon-lg { font-size: 1.6rem; line-height: 2rem; padding: 1rem .8rem; } .input-group .input-group-addon, .input-group .input-group-btn { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .input-group .form-input:first-child:not(:last-child), .input-group .input-group-addon:first-child:not(:last-child), .input-group .input-group-btn:first-child:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group .form-input:not(:first-child):not(:last-child), .input-group .input-group-addon:not(:first-child):not(:last-child), .input-group .input-group-btn:not(:first-child):not(:last-child) { border-radius: 0; margin-left: -.1rem; } .input-group .form-input:last-child:not(:first-child), .input-group .input-group-addon:last-child:not(:first-child), .input-group .input-group-btn:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -.1rem; } .input-group .form-input:focus, .input-group .input-group-addon:focus, .input-group .input-group-btn:focus { z-index: 99; } .container { margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; width: 100%; } @media screen and (min-width: 980px) { .grid-960 { width: 98rem; } } @media screen and (min-width: 500px) { .grid-480 { width: 50rem; } } .columns { display: flex; display: -ms-flexbox; display: -webkit-flex; margin-left: -1rem; margin-right: -1rem; } .columns.col-gapless { margin-left: 0; margin-right: 0; } .columns.col-gapless .column { padding-left: 0; padding-right: 0; } .columns.col-multiline { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .column { -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 1rem; } .column.col-12, .column.col-11, .column.col-10, .column.col-9, .column.col-8, .column.col-7, .column.col-6, .column.col-5, .column.col-4, .column.col-3, .column.col-2, .column.col-1 { -webkit-flex: none; -ms-flex: none; flex: none; } .col-12 { width: 100%; } .col-11 { width: 91.66666667%; } .col-10 { width: 83.33333333%; } .col-9 { width: 75%; } .col-8 { width: 66.66666667%; } .col-7 { width: 58.33333333%; } .col-6 { width: 50%; } .col-5 { width: 41.66666667%; } .col-4 { width: 33.33333333%; } .col-3 { width: 25%; } .col-2 { width: 16.66666667%; } .col-1 { width: 8.33333333%; } @media screen and (min-width: 481px) { .col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1 { -webkit-flex: none; -ms-flex: none; flex: none; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } } @media screen and (min-width: 601px) { .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1 { -webkit-flex: none; -ms-flex: none; flex: none; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } } @media screen and (min-width: 841px) { .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1 { -webkit-flex: none; -ms-flex: none; flex: none; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } } @media screen and (min-width: 841px) { .form-horizontal { padding: 1rem; } .form-horizontal .form-group { display: flex; display: -ms-flexbox; display: -webkit-flex; } .form-horizontal .form-label { margin-bottom: 0; padding: .8rem .4rem; } .form-horizontal .form-checkbox, .form-horizontal .form-radio { margin: .5rem 0; } } @media screen and (max-width: 480px) { .columns { display: block; } .columns .column { width: 100%; } } @media screen and (max-width: 480px) { .hide-xs { display: none !important; } } @media screen and (max-width: 600px) { .hide-sm { display: none !important; } } @media screen and (max-width: 840px) { .hide-md { display: none !important; } } @media screen and (max-width: 960px) { .hide-lg { display: none !important; } } @media screen and (max-width: 1280px) { .hide-xl { display: none !important; } } .empty { background: #f8f8f8; border-radius: .3rem; padding: 4rem; text-align: center; } .empty .empty-title { font-size: 1.8rem; margin: 1.5rem 0 .5rem 0; } .empty .empty-meta { color: #888; } .empty .empty-action { margin-top: 1.5rem; } .avatar { border-radius: 50%; display: inline-block; font-size: 1.4rem; font-weight: 300; height: 3.2rem; line-height: 1; margin: 0; position: relative; vertical-align: middle; width: 3.2rem; } .avatar.avatar-xs { font-size: .8rem; height: 1.6rem; width: 1.6rem; } .avatar.avatar-sm { font-size: 1rem; height: 2.4rem; width: 2.4rem; } .avatar.avatar-lg { font-size: 2rem; height: 4.8rem; width: 4.8rem; } .avatar.avatar-xl { font-size: 2.6rem; height: 6.4rem; width: 6.4rem; } .avatar img { border-radius: 50%; height: 100%; width: 100%; } .avatar .avatar-icon { background: #fff; bottom: -.2em; height: 50%; padding: 5%; position: absolute; right: -.2em; width: 50%; } .avatar[data-initial]::after { color: #fff; content: attr(data-initial); left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes slide-down { 0% { margin-top: -3rem; opacity: 0; } 100% { margin-top: 0; opacity: 1; } } @keyframes slide-down { 0% { margin-top: -3rem; opacity: 0; } 100% { margin-top: 0; opacity: 1; } } .form-autocomplete { position: relative; } .form-autocomplete .form-autocomplete-input { background: #fff; border: .1rem solid #c5c5c5; border-radius: .3rem; color: #333; display: block; font-size: 1.4rem; line-height: 1.6rem; max-width: 100%; min-height: 3.2rem; outline: 0; padding: .3rem .3rem 0 .3rem; width: 100%; } .form-autocomplete .form-autocomplete-input .chip-sm { margin-bottom: .3rem; } .form-autocomplete .form-autocomplete-input .form-input { background: #fff; border-color: transparent; display: inline-block; height: 2.4rem; margin-bottom: .3rem; padding: .3rem; vertical-align: top; width: auto; } .form-autocomplete .form-autocomplete-list { background: #fff; border: .1rem solid #d2d2d2; border-radius: .3rem; box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15); display: block; height: auto; left: 0; margin: .3rem 0 0 0; padding: .5rem; position: absolute; top: 100%; width: 100%; z-index: 1988; } .form-autocomplete .form-autocomplete-item { border-radius: .3rem; display: block; margin-top: .1rem; padding: .2rem 1rem; } .form-autocomplete .form-autocomplete-item:hover, .form-autocomplete .form-autocomplete-item:focus { background: #fff; } .form-autocomplete .form-autocomplete-item.active { background: #eff1fa; } .badge { position: relative; } .badge[data-badge]::after { background: #5764c6; background-clip: padding-box; border: .1rem solid #fff; border-radius: 1rem; color: #fff; content: attr(data-badge); display: inline-block; font-size: 1.1rem; height: 1.8rem; line-height: 1.2rem; min-width: 1.8rem; padding: .2rem .5rem; text-align: center; -webkit-transform: translate(-.2rem, -.8rem); transform: translate(-.2rem, -.8rem); white-space: nowrap; } .card { background: #fff; border: .1rem solid #efefef; border-radius: .3rem; display: block; margin: 0; padding: 0; text-align: left; z-index: 999; } .card .card-header, .card .card-body, .card .card-footer { padding: 1.5rem 1.5rem 0 1.5rem; } .card .card-header:last-child, .card .card-body:last-child, .card .card-footer:last-child { padding-bottom: 1.5rem; } .card .card-image { padding-top: 1.5rem; } .card .card-image:first-child { padding-top: 0; } .card .card-image:first-child img { border-top-left-radius: .3rem; border-top-right-radius: .3rem; } .card .card-image:last-child img { border-bottom-left-radius: .3rem; border-bottom-right-radius: .3rem; } .card .card-title { font-size: 1.4em; line-height: 1; margin-bottom: .5rem; margin-top: 0; } .card .card-meta { color: #b3b3b3; font-size: 1em; margin-bottom: 0; margin-top: 0; } .chip { -webkit-align-content: space-around; align-content: space-around; -webkit-align-items: center; align-items: center; border: .1rem solid transparent; border-radius: .3rem; display: flex; display: -ms-flexbox; display: -webkit-flex; -ms-flex-align: center; -ms-flex-line-pack: distribute; list-style: none; margin: 0; padding: .5rem 0; } .chip .chip-icon { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .chip .chip-content { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; padding: 0 1rem; text-overflow: ellipsis; white-space: nowrap; } .chip .chip-action { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .chip .chip-title { font-size: 1.4rem; } .chip .chip-meta { color: #b3b3b3; font-size: 1.2rem; } .chip-sm { -webkit-align-items: center; align-items: center; background: #eff1fa; border-radius: .3rem; color: #666; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-inline-flex; -ms-flex-align: center; font-size: 1.2rem; height: 2.4rem; max-width: 100%; padding: .3rem .6rem; text-decoration: none; vertical-align: middle; } .chip-sm:hover, .chip-sm:focus { background: #e8eaf7; } .chip-sm .btn-clear { margin-top: -.2rem; } .chip-sm .btn-clear::before { color: #3b49af; font-size: 1.6rem; } .chip-sm.selected { background: #5764c6; color: #fff; } .chip-sm.selected .btn-clear::before { color: #eff1fa; } .chip-sm .chip-name { margin-left: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-sm .avatar { font-size: .8rem; height: 1.6rem; width: 1.6rem; } .label { background: #efefef; border-radius: .2rem; color: #666; display: inline; font-size: 1em; padding: .1em .3em; vertical-align: baseline; white-space: nowrap; } .label.label-primary { background: #5764c6; border-color: #4f5dc3; color: #fff; } .label.label-primary a { color: #fff; } .label.label-primary a:hover, .label.label-primary a:focus, .label.label-primary a:active { opacity: .75; } .menu { background: #fff; border-radius: .3rem; box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3); display: block; margin: 0; padding: .5rem; text-align: left; z-index: 999; } .menu .menu-item { border-radius: .3rem; color: #333; display: block; line-height: 2.4rem; margin-top: .1rem; padding: .2rem 1rem; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .menu .menu-item a { border-radius: .3rem; color: inherit; display: block; margin: -.2rem -1rem; padding: .2rem 1rem; text-decoration: none; } .menu .menu-item a:hover, .menu .menu-item a:focus { color: #5764c6; } .menu .menu-item a:active, .menu .menu-item a.active { background: #eff1fa; color: #4452c0; } .menu .menu-header { color: #ccc; display: block; font-size: 1.2rem; line-height: 1.8rem; margin-top: 0; padding: .2rem 1rem; } .menu .menu-header .menu-header-text { background: #fff; display: inline-block; margin-left: -.6rem; padding: 0 .6rem; position: relative; z-index: 99; } .menu .menu-header::after { border-bottom: .1rem solid #efefef; content: ""; display: block; height: .1rem; -webkit-transform: translateY(-1rem); transform: translateY(-1rem); width: 100%; } .modal { -webkit-align-items: center; align-items: center; bottom: 0; display: none; -ms-flex-align: center; -ms-flex-pack: center; -ms-grid-row-align: center; -webkit-justify-content: center; justify-content: center; left: 0; opacity: 0; overflow: hidden; position: fixed; right: 0; top: 0; } .modal.active { display: flex; display: -ms-flexbox; display: -webkit-flex; opacity: 1; z-index: 1988; } .modal.active .modal-overlay { background: rgba(0, 0, 0, .75); bottom: 0; display: block; left: 0; position: absolute; right: 0; top: 0; } .modal.active .modal-container { -webkit-animation: slide-down .216s; animation: slide-down .216s; } .modal-container { -webkit-animation: slide-up .216s; animation: slide-up .216s; background: #fff; border-radius: .3rem; box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3); display: block; margin: 0 auto; padding: 0; text-align: left; z-index: 1988; } .modal-container .modal-header { padding: 1.5rem; } .modal-container .modal-header .modal-title { font-size: 1.5rem; margin: 0; } .modal-container .modal-body { max-height: 50vh; overflow-y: auto; padding: 1.5rem; position: relative; } .modal-container .modal-footer { padding: 1.5rem; text-align: right; } @media screen and (min-width: 640px) { .modal-container { width: 64rem; } } @media screen and (min-width: 320px) { .modal-sm .modal-container { width: 32rem; } } .breadcrumb, .tab, .pagination { list-style: none; margin: .5rem 0; } .breadcrumb { padding: 1.2rem; } .breadcrumb .breadcrumb-item { display: inline-block; margin: 0; } .breadcrumb .breadcrumb-item a { text-decoration: none; } .breadcrumb .breadcrumb-item:last-child, .breadcrumb .breadcrumb-item:last-child a { color: #666; pointer-events: none; } .breadcrumb .breadcrumb-item:not(:last-child)::after { color: #c5c5c5; content: "/"; padding: 0 .4rem; } .tab { border-bottom: .1rem solid #c5c5c5; display: flex; display: -ms-flexbox; display: -webkit-flex; } .tab .tab-item { margin-bottom: -.1rem; margin-top: 0; } .tab .tab-item a { border-bottom: .2rem solid transparent; color: #333; display: block; padding: .5rem 1.5rem; text-decoration: none; } .tab .tab-item a:hover, .tab .tab-item a:focus { border-bottom-color: #5764c6; color: #5764c6; } .tab .tab-item.active a { border-bottom-color: #3b49af; color: #3b49af; } .tab.tab-block .tab-item { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; text-align: center; } .tab.tab-block .tab-item .badge[data-badge]::after { position: absolute; right: 1.5rem; top: .6rem; -webkit-transform: translate(50%, -.8rem); transform: translate(50%, -.8rem); } .pagination { display: inline-block; padding: 1.2rem; } .pagination .page-item { display: inline-block; } .pagination .page-item span { display: inline-block; padding: .6rem .5rem; } .pagination .page-item a { border-radius: .3rem; display: inline-block; margin: 0 .1rem; padding: .6rem 1.2rem; text-decoration: none; } .pagination .page-item a:hover, .pagination .page-item a:focus { background: #eff1fa; } .pagination .page-item.active a { background: #5764c6; color: #fff; } .toast { background: #efefef; border: .1rem solid #eaeaea; border-radius: .3rem; color: #666; display: block; padding: 1.4rem; width: 100%; } .toast.toast-primary { background: #5764c6; border-color: #4f5dc3; color: #fff; } .toast.toast-primary a { color: #fff; } .toast.toast-primary a:hover, .toast.toast-primary a:focus, .toast.toast-primary a:active { opacity: .75; } .toast.toast-success { background: #32b643; border-color: #30ae40; color: #fff; } .toast.toast-success a { color: #fff; } .toast.toast-success a:hover, .toast.toast-success a:focus, .toast.toast-success a:active { opacity: .75; } .toast.toast-danger { background: #e85600; border-color: #de5200; color: #fff; } .toast.toast-danger a { color: #fff; } .toast.toast-danger a:hover, .toast.toast-danger a:focus, .toast.toast-danger a:active { opacity: .75; } .toast.toast-primary .btn-clear, .toast.toast-success .btn-clear, .toast.toast-danger .btn-clear { color: #fff; } .tooltip { position: relative; } .tooltip::after { background: rgba(51, 51, 51, .9); border-radius: .3rem; bottom: 100%; color: #fff; content: attr(data-tooltip); display: block; font-size: 1.2rem; left: 50%; line-height: 1.6rem; max-width: 32rem; opacity: 0; overflow: hidden; padding: .6rem 1rem; pointer-events: none; position: absolute; text-overflow: ellipsis; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); transition: all .216s ease; z-index: 99; } .tooltip:hover::after, .tooltip:focus::after { opacity: 1; -webkit-transform: translate(-50%, -.5rem); transform: translate(-50%, -.5rem); } .tooltip[disabled], .tooltip.disabled { pointer-events: auto; } .tooltip.tooltip-right::after { bottom: 50%; left: 100%; -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } .tooltip.tooltip-right:hover::after, .tooltip.tooltip-right:focus::after { -webkit-transform: translate(.5rem, 50%); transform: translate(.5rem, 50%); } .tooltip.tooltip-bottom::after { bottom: auto; top: 100%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .tooltip.tooltip-bottom:hover::after, .tooltip.tooltip-bottom:focus::after { -webkit-transform: translate(-50%, .5rem); transform: translate(-50%, .5rem); } .tooltip.tooltip-left::after { bottom: 50%; left: auto; right: 100%; -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } .tooltip.tooltip-left:hover::after, .tooltip.tooltip-left:focus::after { -webkit-transform: translate(-.5rem, 50%); transform: translate(-.5rem, 50%); } .clearfix::after, .container::after { clear: both; content: ""; display: table; } .float-left { float: left !important; } .float-right { float: right !important; } .rel { position: relative; } .abs { position: absolute; } .fixed { position: fixed; } .centered { display: block; float: none; margin-left: auto; margin-right: auto; } .mt-10 { margin-top: 1rem; } .mr-10 { margin-right: 1rem; } .mb-10 { margin-bottom: 1rem; } .ml-10 { margin-left: 1rem; } .mt-5 { margin-top: .5rem; } .mr-5 { margin-right: .5rem; } .mb-5 { margin-bottom: .5rem; } .ml-5 { margin-left: .5rem; } .pt-10 { padding-top: 1rem; } .pr-10 { padding-right: 1rem; } .pb-10 { padding-bottom: 1rem; } .pl-10 { padding-left: 1rem; } .pt-5 { padding-top: .5rem; } .pr-5 { padding-right: .5rem; } .pb-5 { padding-bottom: .5rem; } .pl-5 { padding-left: .5rem; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .flex { display: flex; display: -ms-flexbox; display: -webkit-flex; } .inline-flex { display: inline-flex; display: -ms-inline-flexbox; display: -webkit-inline-flex; } .hide { display: none !important; } .visible { visibility: visible; } .invisible { visibility: hidden; } .text-hide { background: transparent; border: 0; color: transparent; font: 0/0 a; text-shadow: none; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .text-normal { font-weight: normal; } .text-bold { font-weight: bold; } .text-italic { font-style: italic; } .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-clip { overflow: hidden; text-overflow: clip; white-space: nowrap; } .text-break { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-break: break-word; word-wrap: break-word; } .hand { cursor: pointer; } .shadow { box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3); } .light-shadow { box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15); } .rounded { border-radius: .3rem; } .circle { border-radius: 50%; } .divider { border-bottom: .1rem solid #efefef; display: block; margin: .5rem; } .loading { color: transparent !important; min-height: 1.6rem; pointer-events: none; position: relative; } .loading::after { -webkit-animation: loading 500ms infinite linear; animation: loading 500ms infinite linear; border: .2rem solid #5764c6; border-radius: .8rem; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: 1.6rem; left: 50%; margin-left: -.8rem; margin-top: -.8rem; position: absolute; top: 50%; width: 1.6rem; }