diff --git a/assets/css/dashboard-free.css b/assets/css/dashboard-free.css new file mode 100644 index 0000000..f455216 --- /dev/null +++ b/assets/css/dashboard-free.css @@ -0,0 +1,18437 @@ +/*! + +========================================================= +* Black Dashboard - v1.0.1 +========================================================= + +* Product Page: https://www.creative-tim.com/product/black-dashboard +* Copyright 2019 Creative Tim (https://www.creative-tim.com) +* Licensed under MIT (https://github.com/creativetimofficial/black-dashboard/blob/master/LICENSE.md) + +* Coded by Creative Tim + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +*/ +/* brand Colors */ +/* navbar color */ +:root { + --blue: #5e72e4; + --indigo: #5603ad; + --purple: #8965e0; + --pink: #f3a4b5; + --red: #f5365c; + --orange: #fb6340; + --yellow: #ffd600; + --green: #2dce89; + --teal: #11cdef; + --cyan: #2bffc6; + --white: #ffffff; + --gray: #6c757d; + --gray-dark: #32325d; + --light: #ced4da; + --lighter: #e9ecef; + --primary: #e14eca; + --secondary: #f4f5f7; + --success: #00f2c3; + --info: #1d8cf8; + --warning: #ff8d72; + --danger: #fd5d93; + --light: #adb5bd; + --dark: #212529; + --default: #344675; + --white: #ffffff; + --neutral: #ffffff; + --darker: black; + --breakpoint-xs: 0; + --breakpoint-sm: 576px; + --breakpoint-md: 768px; + --breakpoint-lg: 992px; + --breakpoint-xl: 1200px; + --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(34, 42, 66, 0); +} + +article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; +} + +body { + margin: 0; + font-family: "Poppins", sans-serif; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + color: #525f7f; + text-align: left; + background-color: #1e1e2f; +} + +[tabindex="-1"]:focus { + outline: 0 !important; +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 0.5rem; +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +abbr[title], +abbr[data-original-title] { + text-decoration: underline; + text-decoration: underline dotted; + cursor: help; + border-bottom: 0; + text-decoration-skip-ink: none; +} + +address { + margin-bottom: 1rem; + font-style: normal; + line-height: inherit; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1rem; +} + +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} + +dt { + font-weight: 600; +} + +dd { + margin-bottom: .5rem; + margin-left: 0; +} + +blockquote { + margin: 0 0 1rem; +} + +b, +strong { + font-weight: bolder; +} + +small { + font-size: 80%; +} + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { + bottom: -.25em; +} + +sup { + top: -.5em; +} + +a { + color: #e14eca; + text-decoration: none; + background-color: transparent; +} + +a:hover { + color: #c221a9; + text-decoration: none; +} + +a:not([href]):not([tabindex]) { + color: inherit; + text-decoration: none; +} + +a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { + color: inherit; + text-decoration: none; +} + +a:not([href]):not([tabindex]):focus { + outline: 0; +} + +pre, +code, +kbd, +samp { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 1em; +} + +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; +} + +figure { + margin: 0 0 1rem; +} + +img { + vertical-align: middle; + border-style: none; +} + +svg { + overflow: hidden; + vertical-align: middle; +} + +table { + border-collapse: collapse; +} + +caption { + padding-top: 1rem; + padding-bottom: 1rem; + color: #6c757d; + text-align: left; + caption-side: bottom; +} + +th { + text-align: inherit; +} + +label { + display: inline-block; + margin-bottom: 0.5rem; +} + +button { + border-radius: 0; +} + +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} + +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +button, +input { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +select { + word-wrap: normal; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button:not(:disabled), +[type="button"]:not(:disabled), +[type="reset"]:not(:disabled), +[type="submit"]:not(:disabled) { + cursor: pointer; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + padding: 0; + border-style: none; +} + +input[type="radio"], +input[type="checkbox"] { + box-sizing: border-box; + padding: 0; +} + +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + -webkit-appearance: listbox; +} + +textarea { + overflow: auto; + resize: vertical; +} + +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + max-width: 100%; + padding: 0; + margin-bottom: .5rem; + font-size: 1.5rem; + line-height: inherit; + color: inherit; + white-space: normal; +} + +progress { + vertical-align: baseline; +} + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + outline-offset: -2px; + -webkit-appearance: none; +} + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} + +output { + display: inline-block; +} + +summary { + display: list-item; + cursor: pointer; +} + +template { + display: none; +} + +[hidden] { + display: none !important; +} + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: 0.5rem; + font-family: inherit; + font-weight: 400; + line-height: 1.2; + color: #32325d; +} + +h1, .h1 { + font-size: 2.0625rem; +} + +h2, .h2 { + font-size: 1.6875rem; +} + +h3, .h3 { + font-size: 1.4375rem; +} + +h4, .h4 { + font-size: 1.0625rem; +} + +h5, .h5 { + font-size: 0.8125rem; +} + +h6, .h6 { + font-size: 0.75rem; +} + +.lead { + font-size: 0.78125rem; + font-weight: 300; +} + +.display-1 { + font-size: 3.3rem; + font-weight: 600; + line-height: 1.2; +} + +.display-2 { + font-size: 2.75rem; + font-weight: 600; + line-height: 1.2; +} + +.display-3 { + font-size: 2.1875rem; + font-weight: 600; + line-height: 1.2; +} + +.display-4 { + font-size: 1.6275rem; + font-weight: 600; + line-height: 1.2; +} + +hr { + margin-top: 2rem; + margin-bottom: 2rem; + border: 0; + border-top: 0.0625rem solid rgba(34, 42, 66, 0.1); +} + +small, +.small { + font-size: 80%; + font-weight: 400; +} + +mark, +.mark { + padding: 0.2em; + background-color: #fcf8e3; +} + +.list-unstyled { + padding-left: 0; + list-style: none; +} + +.list-inline { + padding-left: 0; + list-style: none; +} + +.list-inline-item { + display: inline-block; +} + +.list-inline-item:not(:last-child) { + margin-right: 0.5rem; +} + +.initialism { + font-size: 90%; + text-transform: uppercase; +} + +.blockquote { + margin-bottom: 1rem; + font-size: 0.9625rem; +} + +.blockquote-footer { + display: block; + font-size: 80%; + color: #6c757d; +} + +.blockquote-footer::before { + content: "\2014\00A0"; +} + +.img-fluid { + max-width: 100%; + height: auto; +} + +.img-thumbnail { + padding: 0.25rem; + background-color: #1e1e2f; + border: 0.0625rem solid #e3e3e3; + border-radius: 0.25rem; + box-shadow: 0 1px 2px rgba(34, 42, 66, 0.075); + max-width: 100%; + height: auto; +} + +.figure { + display: inline-block; +} + +.figure-img { + margin-bottom: 0.5rem; + line-height: 1; +} + +.figure-caption { + font-size: 90%; + color: #6c757d; +} + +code { + font-size: 87.5%; + color: #f3a4b5; + word-break: break-word; +} + +a > code { + color: inherit; +} + +kbd { + padding: 0.2rem 0.4rem; + font-size: 87.5%; + color: #ffffff; + background-color: #212529; + border-radius: 0.2857rem; + box-shadow: inset 0 -0.1rem 0 rgba(34, 42, 66, 0.25); +} + +kbd kbd { + padding: 0; + font-size: 100%; + font-weight: 600; + box-shadow: none; +} + +pre { + display: block; + font-size: 87.5%; + color: #212529; +} + +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} + +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} + +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} + +.container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} + +.no-gutters { + margin-right: 0; + margin-left: 0; +} + +.no-gutters > .col, +.no-gutters > [class*="col-"] { + padding-right: 0; + padding-left: 0; +} + +.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, +.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, +.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, +.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, +.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, +.col-xl-auto { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; +} + +.col { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +} + +.col-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; +} + +.col-1 { + flex: 0 0 8.333333%; + max-width: 8.333333%; +} + +.col-2 { + flex: 0 0 16.666667%; + max-width: 16.666667%; +} + +.col-3 { + flex: 0 0 25%; + max-width: 25%; +} + +.col-4 { + flex: 0 0 33.333333%; + max-width: 33.333333%; +} + +.col-5 { + flex: 0 0 41.666667%; + max-width: 41.666667%; +} + +.col-6 { + flex: 0 0 50%; + max-width: 50%; +} + +.col-7 { + flex: 0 0 58.333333%; + max-width: 58.333333%; +} + +.col-8 { + flex: 0 0 66.666667%; + max-width: 66.666667%; +} + +.col-9 { + flex: 0 0 75%; + max-width: 75%; +} + +.col-10 { + flex: 0 0 83.333333%; + max-width: 83.333333%; +} + +.col-11 { + flex: 0 0 91.666667%; + max-width: 91.666667%; +} + +.col-12 { + flex: 0 0 100%; + max-width: 100%; +} + +.order-first { + order: -1; +} + +.order-last { + order: 13; +} + +.order-0 { + order: 0; +} + +.order-1 { + order: 1; +} + +.order-2 { + order: 2; +} + +.order-3 { + order: 3; +} + +.order-4 { + order: 4; +} + +.order-5 { + order: 5; +} + +.order-6 { + order: 6; +} + +.order-7 { + order: 7; +} + +.order-8 { + order: 8; +} + +.order-9 { + order: 9; +} + +.order-10 { + order: 10; +} + +.order-11 { + order: 11; +} + +.order-12 { + order: 12; +} + +.offset-1 { + margin-left: 8.333333%; +} + +.offset-2 { + margin-left: 16.666667%; +} + +.offset-3 { + margin-left: 25%; +} + +.offset-4 { + margin-left: 33.333333%; +} + +.offset-5 { + margin-left: 41.666667%; +} + +.offset-6 { + margin-left: 50%; +} + +.offset-7 { + margin-left: 58.333333%; +} + +.offset-8 { + margin-left: 66.666667%; +} + +.offset-9 { + margin-left: 75%; +} + +.offset-10 { + margin-left: 83.333333%; +} + +.offset-11 { + margin-left: 91.666667%; +} + +@media (min-width: 576px) { + .col-sm { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .col-sm-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-sm-1 { + flex: 0 0 8.333333%; + max-width: 8.333333%; + } + .col-sm-2 { + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .col-sm-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-sm-4 { + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + .col-sm-5 { + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-sm-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-sm-7 { + flex: 0 0 58.333333%; + max-width: 58.333333%; + } + .col-sm-8 { + flex: 0 0 66.666667%; + max-width: 66.666667%; + } + .col-sm-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-sm-10 { + flex: 0 0 83.333333%; + max-width: 83.333333%; + } + .col-sm-11 { + flex: 0 0 91.666667%; + max-width: 91.666667%; + } + .col-sm-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-sm-first { + order: -1; + } + .order-sm-last { + order: 13; + } + .order-sm-0 { + order: 0; + } + .order-sm-1 { + order: 1; + } + .order-sm-2 { + order: 2; + } + .order-sm-3 { + order: 3; + } + .order-sm-4 { + order: 4; + } + .order-sm-5 { + order: 5; + } + .order-sm-6 { + order: 6; + } + .order-sm-7 { + order: 7; + } + .order-sm-8 { + order: 8; + } + .order-sm-9 { + order: 9; + } + .order-sm-10 { + order: 10; + } + .order-sm-11 { + order: 11; + } + .order-sm-12 { + order: 12; + } + .offset-sm-0 { + margin-left: 0; + } + .offset-sm-1 { + margin-left: 8.333333%; + } + .offset-sm-2 { + margin-left: 16.666667%; + } + .offset-sm-3 { + margin-left: 25%; + } + .offset-sm-4 { + margin-left: 33.333333%; + } + .offset-sm-5 { + margin-left: 41.666667%; + } + .offset-sm-6 { + margin-left: 50%; + } + .offset-sm-7 { + margin-left: 58.333333%; + } + .offset-sm-8 { + margin-left: 66.666667%; + } + .offset-sm-9 { + margin-left: 75%; + } + .offset-sm-10 { + margin-left: 83.333333%; + } + .offset-sm-11 { + margin-left: 91.666667%; + } +} + +@media (min-width: 768px) { + .col-md { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .col-md-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-md-1 { + flex: 0 0 8.333333%; + max-width: 8.333333%; + } + .col-md-2 { + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .col-md-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-md-4 { + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + .col-md-5 { + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-md-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-md-7 { + flex: 0 0 58.333333%; + max-width: 58.333333%; + } + .col-md-8 { + flex: 0 0 66.666667%; + max-width: 66.666667%; + } + .col-md-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-md-10 { + flex: 0 0 83.333333%; + max-width: 83.333333%; + } + .col-md-11 { + flex: 0 0 91.666667%; + max-width: 91.666667%; + } + .col-md-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-md-first { + order: -1; + } + .order-md-last { + order: 13; + } + .order-md-0 { + order: 0; + } + .order-md-1 { + order: 1; + } + .order-md-2 { + order: 2; + } + .order-md-3 { + order: 3; + } + .order-md-4 { + order: 4; + } + .order-md-5 { + order: 5; + } + .order-md-6 { + order: 6; + } + .order-md-7 { + order: 7; + } + .order-md-8 { + order: 8; + } + .order-md-9 { + order: 9; + } + .order-md-10 { + order: 10; + } + .order-md-11 { + order: 11; + } + .order-md-12 { + order: 12; + } + .offset-md-0 { + margin-left: 0; + } + .offset-md-1 { + margin-left: 8.333333%; + } + .offset-md-2 { + margin-left: 16.666667%; + } + .offset-md-3 { + margin-left: 25%; + } + .offset-md-4 { + margin-left: 33.333333%; + } + .offset-md-5 { + margin-left: 41.666667%; + } + .offset-md-6 { + margin-left: 50%; + } + .offset-md-7 { + margin-left: 58.333333%; + } + .offset-md-8 { + margin-left: 66.666667%; + } + .offset-md-9 { + margin-left: 75%; + } + .offset-md-10 { + margin-left: 83.333333%; + } + .offset-md-11 { + margin-left: 91.666667%; + } +} + +@media (min-width: 992px) { + .col-lg { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .col-lg-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-lg-1 { + flex: 0 0 8.333333%; + max-width: 8.333333%; + } + .col-lg-2 { + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .col-lg-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-lg-4 { + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + .col-lg-5 { + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-lg-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-lg-7 { + flex: 0 0 58.333333%; + max-width: 58.333333%; + } + .col-lg-8 { + flex: 0 0 66.666667%; + max-width: 66.666667%; + } + .col-lg-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-lg-10 { + flex: 0 0 83.333333%; + max-width: 83.333333%; + } + .col-lg-11 { + flex: 0 0 91.666667%; + max-width: 91.666667%; + } + .col-lg-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-lg-first { + order: -1; + } + .order-lg-last { + order: 13; + } + .order-lg-0 { + order: 0; + } + .order-lg-1 { + order: 1; + } + .order-lg-2 { + order: 2; + } + .order-lg-3 { + order: 3; + } + .order-lg-4 { + order: 4; + } + .order-lg-5 { + order: 5; + } + .order-lg-6 { + order: 6; + } + .order-lg-7 { + order: 7; + } + .order-lg-8 { + order: 8; + } + .order-lg-9 { + order: 9; + } + .order-lg-10 { + order: 10; + } + .order-lg-11 { + order: 11; + } + .order-lg-12 { + order: 12; + } + .offset-lg-0 { + margin-left: 0; + } + .offset-lg-1 { + margin-left: 8.333333%; + } + .offset-lg-2 { + margin-left: 16.666667%; + } + .offset-lg-3 { + margin-left: 25%; + } + .offset-lg-4 { + margin-left: 33.333333%; + } + .offset-lg-5 { + margin-left: 41.666667%; + } + .offset-lg-6 { + margin-left: 50%; + } + .offset-lg-7 { + margin-left: 58.333333%; + } + .offset-lg-8 { + margin-left: 66.666667%; + } + .offset-lg-9 { + margin-left: 75%; + } + .offset-lg-10 { + margin-left: 83.333333%; + } + .offset-lg-11 { + margin-left: 91.666667%; + } +} + +@media (min-width: 1200px) { + .col-xl { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + } + .col-xl-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-xl-1 { + flex: 0 0 8.333333%; + max-width: 8.333333%; + } + .col-xl-2 { + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .col-xl-3 { + flex: 0 0 25%; + max-width: 25%; + } + .col-xl-4 { + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + .col-xl-5 { + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-xl-6 { + flex: 0 0 50%; + max-width: 50%; + } + .col-xl-7 { + flex: 0 0 58.333333%; + max-width: 58.333333%; + } + .col-xl-8 { + flex: 0 0 66.666667%; + max-width: 66.666667%; + } + .col-xl-9 { + flex: 0 0 75%; + max-width: 75%; + } + .col-xl-10 { + flex: 0 0 83.333333%; + max-width: 83.333333%; + } + .col-xl-11 { + flex: 0 0 91.666667%; + max-width: 91.666667%; + } + .col-xl-12 { + flex: 0 0 100%; + max-width: 100%; + } + .order-xl-first { + order: -1; + } + .order-xl-last { + order: 13; + } + .order-xl-0 { + order: 0; + } + .order-xl-1 { + order: 1; + } + .order-xl-2 { + order: 2; + } + .order-xl-3 { + order: 3; + } + .order-xl-4 { + order: 4; + } + .order-xl-5 { + order: 5; + } + .order-xl-6 { + order: 6; + } + .order-xl-7 { + order: 7; + } + .order-xl-8 { + order: 8; + } + .order-xl-9 { + order: 9; + } + .order-xl-10 { + order: 10; + } + .order-xl-11 { + order: 11; + } + .order-xl-12 { + order: 12; + } + .offset-xl-0 { + margin-left: 0; + } + .offset-xl-1 { + margin-left: 8.333333%; + } + .offset-xl-2 { + margin-left: 16.666667%; + } + .offset-xl-3 { + margin-left: 25%; + } + .offset-xl-4 { + margin-left: 33.333333%; + } + .offset-xl-5 { + margin-left: 41.666667%; + } + .offset-xl-6 { + margin-left: 50%; + } + .offset-xl-7 { + margin-left: 58.333333%; + } + .offset-xl-8 { + margin-left: 66.666667%; + } + .offset-xl-9 { + margin-left: 75%; + } + .offset-xl-10 { + margin-left: 83.333333%; + } + .offset-xl-11 { + margin-left: 91.666667%; + } +} + +.table { + width: 100%; + margin-bottom: 1rem; + color: #525f7f; + background-color: transparent; +} + +.table th, +.table td { + padding: 1rem; + vertical-align: top; + border-top: 0.0625rem solid #e3e3e3; +} + +.table thead th { + vertical-align: bottom; + border-bottom: 0.125rem solid #e3e3e3; +} + +.table tbody + tbody { + border-top: 0.125rem solid #e3e3e3; +} + +.table-sm th, +.table-sm td { + padding: 0.3rem; +} + +.table-bordered { + border: 0.0625rem solid #e3e3e3; +} + +.table-bordered th, +.table-bordered td { + border: 0.0625rem solid #e3e3e3; +} + +.table-bordered thead th, +.table-bordered thead td { + border-bottom-width: 0.125rem; +} + +.table-borderless th, +.table-borderless td, +.table-borderless thead th, +.table-borderless tbody + tbody { + border: 0; +} + +.table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(34, 42, 66, 0.05); +} + +.table-hover tbody tr:hover { + color: #525f7f; + background-color: rgba(34, 42, 66, 0.075); +} + +.table-primary, +.table-primary > th, +.table-primary > td { + background-color: #f7cdf0; +} + +.table-primary th, +.table-primary td, +.table-primary thead th, +.table-primary tbody + tbody { + border-color: #efa3e3; +} + +.table-hover .table-primary:hover { + background-color: #f3b7e9; +} + +.table-hover .table-primary:hover > td, +.table-hover .table-primary:hover > th { + background-color: #f3b7e9; +} + +.table-secondary, +.table-secondary > th, +.table-secondary > td { + background-color: #fcfcfd; +} + +.table-secondary th, +.table-secondary td, +.table-secondary thead th, +.table-secondary tbody + tbody { + border-color: #f9fafb; +} + +.table-hover .table-secondary:hover { + background-color: #ededf3; +} + +.table-hover .table-secondary:hover > td, +.table-hover .table-secondary:hover > th { + background-color: #ededf3; +} + +.table-success, +.table-success > th, +.table-success > td { + background-color: #b8fbee; +} + +.table-success th, +.table-success td, +.table-success thead th, +.table-success tbody + tbody { + border-color: #7af8e0; +} + +.table-hover .table-success:hover { + background-color: #a0fae8; +} + +.table-hover .table-success:hover > td, +.table-hover .table-success:hover > th { + background-color: #a0fae8; +} + +.table-info, +.table-info > th, +.table-info > td { + background-color: #c0dffd; +} + +.table-info th, +.table-info td, +.table-info thead th, +.table-info tbody + tbody { + border-color: #89c3fb; +} + +.table-hover .table-info:hover { + background-color: #a7d2fc; +} + +.table-hover .table-info:hover > td, +.table-hover .table-info:hover > th { + background-color: #a7d2fc; +} + +.table-warning, +.table-warning > th, +.table-warning > td { + background-color: #ffdfd8; +} + +.table-warning th, +.table-warning td, +.table-warning thead th, +.table-warning tbody + tbody { + border-color: #ffc4b6; +} + +.table-hover .table-warning:hover { + background-color: #ffcabf; +} + +.table-hover .table-warning:hover > td, +.table-hover .table-warning:hover > th { + background-color: #ffcabf; +} + +.table-danger, +.table-danger > th, +.table-danger > td { + background-color: #fed2e1; +} + +.table-danger th, +.table-danger td, +.table-danger thead th, +.table-danger tbody + tbody { + border-color: #feabc7; +} + +.table-hover .table-danger:hover { + background-color: #fdb9d0; +} + +.table-hover .table-danger:hover > td, +.table-hover .table-danger:hover > th { + background-color: #fdb9d0; +} + +.table-light, +.table-light > th, +.table-light > td { + background-color: #e8eaed; +} + +.table-light th, +.table-light td, +.table-light thead th, +.table-light tbody + tbody { + border-color: #d4d9dd; +} + +.table-hover .table-light:hover { + background-color: #dadde2; +} + +.table-hover .table-light:hover > td, +.table-hover .table-light:hover > th { + background-color: #dadde2; +} + +.table-dark, +.table-dark > th, +.table-dark > td { + background-color: #c1c2c3; +} + +.table-dark th, +.table-dark td, +.table-dark thead th, +.table-dark tbody + tbody { + border-color: #8c8e90; +} + +.table-hover .table-dark:hover { + background-color: #b4b5b6; +} + +.table-hover .table-dark:hover > td, +.table-hover .table-dark:hover > th { + background-color: #b4b5b6; +} + +.table-default, +.table-default > th, +.table-default > td { + background-color: #c6cbd8; +} + +.table-default th, +.table-default td, +.table-default thead th, +.table-default tbody + tbody { + border-color: #959fb7; +} + +.table-hover .table-default:hover { + background-color: #b7bdce; +} + +.table-hover .table-default:hover > td, +.table-hover .table-default:hover > th { + background-color: #b7bdce; +} + +.table-white, +.table-white > th, +.table-white > td { + background-color: white; +} + +.table-white th, +.table-white td, +.table-white thead th, +.table-white tbody + tbody { + border-color: white; +} + +.table-hover .table-white:hover { + background-color: #f2f2f2; +} + +.table-hover .table-white:hover > td, +.table-hover .table-white:hover > th { + background-color: #f2f2f2; +} + +.table-neutral, +.table-neutral > th, +.table-neutral > td { + background-color: white; +} + +.table-neutral th, +.table-neutral td, +.table-neutral thead th, +.table-neutral tbody + tbody { + border-color: white; +} + +.table-hover .table-neutral:hover { + background-color: #f2f2f2; +} + +.table-hover .table-neutral:hover > td, +.table-hover .table-neutral:hover > th { + background-color: #f2f2f2; +} + +.table-darker, +.table-darker > th, +.table-darker > td { + background-color: #b8b8b8; +} + +.table-darker th, +.table-darker td, +.table-darker thead th, +.table-darker tbody + tbody { + border-color: #7a7a7a; +} + +.table-hover .table-darker:hover { + background-color: #ababab; +} + +.table-hover .table-darker:hover > td, +.table-hover .table-darker:hover > th { + background-color: #ababab; +} + +.table-active, +.table-active > th, +.table-active > td { + background-color: rgba(34, 42, 66, 0.075); +} + +.table-hover .table-active:hover { + background-color: rgba(25, 31, 49, 0.075); +} + +.table-hover .table-active:hover > td, +.table-hover .table-active:hover > th { + background-color: rgba(25, 31, 49, 0.075); +} + +.table .thead-dark th { + color: #1e1e2f; + background-color: #212529; + border-color: #32383e; +} + +.table .thead-light th { + color: #525f7f; + background-color: #e9ecef; + border-color: #e3e3e3; +} + +.table-dark { + color: #1e1e2f; + background-color: #212529; +} + +.table-dark th, +.table-dark td, +.table-dark thead th { + border-color: #32383e; +} + +.table-dark.table-bordered { + border: 0; +} + +.table-dark.table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(255, 255, 255, 0.05); +} + +.table-dark.table-hover tbody tr:hover { + color: #1e1e2f; + background-color: rgba(255, 255, 255, 0.075); +} + +@media (max-width: 575.98px) { + .table-responsive-sm { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .table-responsive-sm > .table-bordered { + border: 0; + } +} + +@media (max-width: 767.98px) { + .table-responsive-md { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .table-responsive-md > .table-bordered { + border: 0; + } +} + +@media (max-width: 991.98px) { + .table-responsive-lg { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .table-responsive-lg > .table-bordered { + border: 0; + } +} + +@media (max-width: 1199.98px) { + .table-responsive-xl { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + .table-responsive-xl > .table-bordered { + border: 0; + } +} + +.table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.table-responsive > .table-bordered { + border: 0; +} + +.form-control { + display: block; + width: 100%; + height: calc(2.25rem + 2px); + padding: 0.5rem 0.7rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.428571; + color: rgba(255, 255, 255, 0.8); + background-color: transparent; + background-clip: padding-box; + border: 1px solid #cad1d7; + border-radius: 0.25rem; + box-shadow: none; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +@media (prefers-reduced-motion: reduce) { + .form-control { + transition: none; + } +} + +.form-control::-ms-expand { + background-color: transparent; + border: 0; +} + +.form-control:focus { + color: rgba(255, 255, 255, 0.8); + background-color: #ffffff; + border-color: rgba(50, 151, 211, 0.25); + outline: 0; + box-shadow: none, none; +} + +.form-control::placeholder { + color: #adb5bd; + opacity: 1; +} + +.form-control:disabled, .form-control[readonly] { + background-color: #e9ecef; + opacity: 1; +} + +select.form-control:focus::-ms-value { + color: rgba(255, 255, 255, 0.8); + background-color: transparent; +} + +.form-control-file, +.form-control-range { + display: block; + width: 100%; +} + +.col-form-label { + padding-top: calc(0.5rem + 1px); + padding-bottom: calc(0.5rem + 1px); + margin-bottom: 0; + font-size: inherit; + line-height: 1.428571; +} + +.col-form-label-lg { + padding-top: calc(0.875rem + 1px); + padding-bottom: calc(0.875rem + 1px); + font-size: 0.875rem; + line-height: 1.35; +} + +.col-form-label-sm { + padding-top: calc(0.25rem + 1px); + padding-bottom: calc(0.25rem + 1px); + font-size: 0.75rem; + line-height: 1.35; +} + +.form-control-plaintext { + display: block; + width: 100%; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + margin-bottom: 0; + line-height: 1.428571; + color: #525f7f; + background-color: transparent; + border: solid transparent; + border-width: 1px 0; +} + +.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { + padding-right: 0; + padding-left: 0; +} + +.form-control-sm { + height: calc(1.35em + 0.5rem + 2px); + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + line-height: 1.35; + border-radius: 0.2857rem; +} + +.form-control-lg { + height: calc(1.35em + 1.75rem + 2px); + padding: 0.875rem 1rem; + font-size: 0.875rem; + line-height: 1.35; + border-radius: 0.4285rem; +} + +select.form-control[size], select.form-control[multiple] { + height: auto; +} + +textarea.form-control { + height: auto; +} + +.form-group { + margin-bottom: 1rem; +} + +.form-text { + display: block; + margin-top: 0.25rem; +} + +.form-row { + display: flex; + flex-wrap: wrap; + margin-right: -5px; + margin-left: -5px; +} + +.form-row > .col, +.form-row > [class*="col-"] { + padding-right: 5px; + padding-left: 5px; +} + +.form-check { + position: relative; + display: block; + padding-left: 1.25rem; +} + +.form-check-input { + position: absolute; + margin-top: 0.3rem; + margin-left: -1.25rem; +} + +.form-check-input:disabled ~ .form-check-label { + color: #6c757d; +} + +.form-check-label { + margin-bottom: 0; +} + +.form-check-inline { + display: inline-flex; + align-items: center; + padding-left: 0; + margin-right: 0.75rem; +} + +.form-check-inline .form-check-input { + position: static; + margin-top: 0; + margin-right: 0.3125rem; + margin-left: 0; +} + +.valid-feedback { + display: none; + width: 100%; + margin-top: 0.25rem; + font-size: 80%; + color: #00f2c3; +} + +.valid-tooltip { + position: absolute; + top: 100%; + z-index: 5; + display: none; + max-width: 100%; + padding: 0.25rem 0.5rem; + margin-top: .1rem; + font-size: 0.75rem; + line-height: 1.5; + color: #ffffff; + background-color: rgba(0, 242, 195, 0.9); + border-radius: 0.25rem; +} + +.was-validated .form-control:valid, .form-control.is-valid { + border-color: #00f2c3; + padding-right: 2.25rem; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2300f2c3' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: center right calc(0.357143em + 0.25rem); + background-size: calc(0.714286em + 0.5rem) calc(0.714286em + 0.5rem); +} + +.was-validated .form-control:valid:focus, .form-control.is-valid:focus { + border-color: #00f2c3; + box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.25); +} + +.was-validated .form-control:valid ~ .valid-feedback, +.was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, +.form-control.is-valid ~ .valid-tooltip { + display: block; +} + +.was-validated textarea.form-control:valid, textarea.form-control.is-valid { + padding-right: 2.25rem; + background-position: top calc(0.357143em + 0.25rem) right calc(0.357143em + 0.25rem); +} + +.was-validated .custom-select:valid, .custom-select.is-valid { + border-color: #00f2c3; + padding-right: calc((1em + 1rem) * 3 / 4 + 1.7rem); + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2332325d' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.7rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2300f2c3' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") transparent no-repeat center right 1.7rem/calc(0.714286em + 0.5rem) calc(0.714286em + 0.5rem); +} + +.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { + border-color: #00f2c3; + box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.25); +} + +.was-validated .custom-select:valid ~ .valid-feedback, +.was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, +.custom-select.is-valid ~ .valid-tooltip { + display: block; +} + +.was-validated .form-control-file:valid ~ .valid-feedback, +.was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback, +.form-control-file.is-valid ~ .valid-tooltip { + display: block; +} + +.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { + color: #00f2c3; +} + +.was-validated .form-check-input:valid ~ .valid-feedback, +.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, +.form-check-input.is-valid ~ .valid-tooltip { + display: block; +} + +.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { + color: #00f2c3; +} + +.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { + border-color: #00f2c3; +} + +.was-validated .custom-control-input:valid ~ .valid-feedback, +.was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, +.custom-control-input.is-valid ~ .valid-tooltip { + display: block; +} + +.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { + border-color: #26ffd5; + background-color: #26ffd5; +} + +.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.25); +} + +.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { + border-color: #00f2c3; +} + +.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { + border-color: #00f2c3; +} + +.was-validated .custom-file-input:valid ~ .valid-feedback, +.was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, +.custom-file-input.is-valid ~ .valid-tooltip { + display: block; +} + +.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { + border-color: #00f2c3; + box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.25); +} + +.invalid-feedback { + display: none; + width: 100%; + margin-top: 0.25rem; + font-size: 80%; + color: #ff8d72; +} + +.invalid-tooltip { + position: absolute; + top: 100%; + z-index: 5; + display: none; + max-width: 100%; + padding: 0.25rem 0.5rem; + margin-top: .1rem; + font-size: 0.75rem; + line-height: 1.5; + color: #ffffff; + background-color: rgba(255, 141, 114, 0.9); + border-radius: 0.25rem; +} + +.was-validated .form-control:invalid, .form-control.is-invalid { + border-color: #ff8d72; + padding-right: 2.25rem; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff8d72' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23ff8d72' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); + background-repeat: no-repeat; + background-position: center right calc(0.357143em + 0.25rem); + background-size: calc(0.714286em + 0.5rem) calc(0.714286em + 0.5rem); +} + +.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { + border-color: #ff8d72; + box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.25); +} + +.was-validated .form-control:invalid ~ .invalid-feedback, +.was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, +.form-control.is-invalid ~ .invalid-tooltip { + display: block; +} + +.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { + padding-right: 2.25rem; + background-position: top calc(0.357143em + 0.25rem) right calc(0.357143em + 0.25rem); +} + +.was-validated .custom-select:invalid, .custom-select.is-invalid { + border-color: #ff8d72; + padding-right: calc((1em + 1rem) * 3 / 4 + 1.7rem); + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2332325d' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.7rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff8d72' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23ff8d72' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") transparent no-repeat center right 1.7rem/calc(0.714286em + 0.5rem) calc(0.714286em + 0.5rem); +} + +.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { + border-color: #ff8d72; + box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.25); +} + +.was-validated .custom-select:invalid ~ .invalid-feedback, +.was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, +.custom-select.is-invalid ~ .invalid-tooltip { + display: block; +} + +.was-validated .form-control-file:invalid ~ .invalid-feedback, +.was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback, +.form-control-file.is-invalid ~ .invalid-tooltip { + display: block; +} + +.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { + color: #ff8d72; +} + +.was-validated .form-check-input:invalid ~ .invalid-feedback, +.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, +.form-check-input.is-invalid ~ .invalid-tooltip { + display: block; +} + +.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { + color: #ff8d72; +} + +.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { + border-color: #ff8d72; +} + +.was-validated .custom-control-input:invalid ~ .invalid-feedback, +.was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, +.custom-control-input.is-invalid ~ .invalid-tooltip { + display: block; +} + +.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { + border-color: #ffb6a5; + background-color: #ffb6a5; +} + +.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.25); +} + +.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { + border-color: #ff8d72; +} + +.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { + border-color: #ff8d72; +} + +.was-validated .custom-file-input:invalid ~ .invalid-feedback, +.was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, +.custom-file-input.is-invalid ~ .invalid-tooltip { + display: block; +} + +.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { + border-color: #ff8d72; + box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.25); +} + +.form-inline { + display: flex; + flex-flow: row wrap; + align-items: center; +} + +.form-inline .form-check { + width: 100%; +} + +@media (min-width: 576px) { + .form-inline label { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0; + } + .form-inline .form-group { + display: flex; + flex: 0 0 auto; + flex-flow: row wrap; + align-items: center; + margin-bottom: 0; + } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .form-inline .form-control-plaintext { + display: inline-block; + } + .form-inline .input-group, + .form-inline .custom-select { + width: auto; + } + .form-inline .form-check { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding-left: 0; + } + .form-inline .form-check-input { + position: relative; + flex-shrink: 0; + margin-top: 0; + margin-right: 0.25rem; + margin-left: 0; + } + .form-inline .custom-control { + align-items: center; + justify-content: center; + } + .form-inline .custom-control-label { + margin-bottom: 0; + } +} + +.btn { + display: inline-block; + font-weight: 600; + color: #525f7f; + text-align: center; + vertical-align: middle; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 11px 40px; + font-size: 0.875rem; + line-height: 1.35em; + border-radius: 0.25rem; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + .btn { + transition: none; + } +} + +.btn:hover { + color: #525f7f; + text-decoration: none; +} + +.btn:focus, .btn.focus { + outline: 0; + box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); +} + +.btn.disabled, .btn:disabled { + opacity: 0.65; + box-shadow: none; +} + +.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active { + box-shadow: none; +} + +.btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled).active:focus { + box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); +} + +a.btn.disabled, +fieldset:disabled a.btn { + pointer-events: none; +} + +.btn-primary { + color: #ffffff; + background-color: #e14eca; + border-color: #e14eca; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-primary:hover { + color: #ffffff; + background-color: #db2dc0; + border-color: #d725bb; +} + +.btn-primary:focus, .btn-primary.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(230, 105, 210, 0.5); +} + +.btn-primary.disabled, .btn-primary:disabled { + color: #ffffff; + background-color: #e14eca; + border-color: #e14eca; +} + +.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, +.show > .btn-primary.dropdown-toggle { + color: #ffffff; + background-color: #d725bb; + border-color: #cd23b2; +} + +.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, +.show > .btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(230, 105, 210, 0.5); +} + +.btn-secondary { + color: #212529; + background-color: #f4f5f7; + border-color: #f4f5f7; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-secondary:hover { + color: #212529; + background-color: #dee1e7; + border-color: #d6dae2; +} + +.btn-secondary:focus, .btn-secondary.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(212, 214, 216, 0.5); +} + +.btn-secondary.disabled, .btn-secondary:disabled { + color: #212529; + background-color: #f4f5f7; + border-color: #f4f5f7; +} + +.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, +.show > .btn-secondary.dropdown-toggle { + color: #212529; + background-color: #d6dae2; + border-color: #cfd3dc; +} + +.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, +.show > .btn-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(212, 214, 216, 0.5); +} + +.btn-success { + color: #ffffff; + background-color: #00f2c3; + border-color: #00f2c3; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-success:hover { + color: #ffffff; + background-color: #00cca4; + border-color: #00bf9a; +} + +.btn-success:focus, .btn-success.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(38, 244, 204, 0.5); +} + +.btn-success.disabled, .btn-success:disabled { + color: #ffffff; + background-color: #00f2c3; + border-color: #00f2c3; +} + +.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, +.show > .btn-success.dropdown-toggle { + color: #ffffff; + background-color: #00bf9a; + border-color: #00b290; +} + +.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, +.show > .btn-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(38, 244, 204, 0.5); +} + +.btn-info { + color: #ffffff; + background-color: #1d8cf8; + border-color: #1d8cf8; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-info:hover { + color: #ffffff; + background-color: #0779e8; + border-color: #0772db; +} + +.btn-info:focus, .btn-info.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(63, 157, 249, 0.5); +} + +.btn-info.disabled, .btn-info:disabled { + color: #ffffff; + background-color: #1d8cf8; + border-color: #1d8cf8; +} + +.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, +.show > .btn-info.dropdown-toggle { + color: #ffffff; + background-color: #0772db; + border-color: #066ccf; +} + +.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, +.show > .btn-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(63, 157, 249, 0.5); +} + +.btn-warning { + color: #ffffff; + background-color: #ff8d72; + border-color: #ff8d72; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-warning:hover { + color: #ffffff; + background-color: #ff6e4c; + border-color: #ff643f; +} + +.btn-warning:focus, .btn-warning.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(255, 158, 135, 0.5); +} + +.btn-warning.disabled, .btn-warning:disabled { + color: #ffffff; + background-color: #ff8d72; + border-color: #ff8d72; +} + +.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, +.show > .btn-warning.dropdown-toggle { + color: #ffffff; + background-color: #ff643f; + border-color: #ff5932; +} + +.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, +.show > .btn-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(255, 158, 135, 0.5); +} + +.btn-danger { + color: #ffffff; + background-color: #fd5d93; + border-color: #fd5d93; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-danger:hover { + color: #ffffff; + background-color: #fd377a; + border-color: #fc2b71; +} + +.btn-danger:focus, .btn-danger.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(253, 117, 163, 0.5); +} + +.btn-danger.disabled, .btn-danger:disabled { + color: #ffffff; + background-color: #fd5d93; + border-color: #fd5d93; +} + +.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, +.show > .btn-danger.dropdown-toggle { + color: #ffffff; + background-color: #fc2b71; + border-color: #fc1e69; +} + +.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, +.show > .btn-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(253, 117, 163, 0.5); +} + +.btn-light { + color: #ffffff; + background-color: #adb5bd; + border-color: #adb5bd; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-light:hover { + color: #ffffff; + background-color: #98a2ac; + border-color: #919ca6; +} + +.btn-light:focus, .btn-light.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(185, 192, 199, 0.5); +} + +.btn-light.disabled, .btn-light:disabled { + color: #ffffff; + background-color: #adb5bd; + border-color: #adb5bd; +} + +.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, +.show > .btn-light.dropdown-toggle { + color: #ffffff; + background-color: #919ca6; + border-color: #8a95a1; +} + +.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, +.show > .btn-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(185, 192, 199, 0.5); +} + +.btn-dark { + color: #ffffff; + background-color: #212529; + border-color: #212529; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-dark:hover { + color: #ffffff; + background-color: #101214; + border-color: #0a0c0d; +} + +.btn-dark:focus, .btn-dark.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(66, 70, 73, 0.5); +} + +.btn-dark.disabled, .btn-dark:disabled { + color: #ffffff; + background-color: #212529; + border-color: #212529; +} + +.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, +.show > .btn-dark.dropdown-toggle { + color: #ffffff; + background-color: #0a0c0d; + border-color: #050506; +} + +.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, +.show > .btn-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(66, 70, 73, 0.5); +} + +.btn-default { + color: #ffffff; + background-color: #344675; + border-color: #344675; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-default:hover { + color: #ffffff; + background-color: #28365b; + border-color: #243152; +} + +.btn-default:focus, .btn-default.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(82, 98, 138, 0.5); +} + +.btn-default.disabled, .btn-default:disabled { + color: #ffffff; + background-color: #344675; + border-color: #344675; +} + +.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, +.show > .btn-default.dropdown-toggle { + color: #ffffff; + background-color: #243152; + border-color: #202c49; +} + +.btn-default:not(:disabled):not(.disabled):active:focus, .btn-default:not(:disabled):not(.disabled).active:focus, +.show > .btn-default.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(82, 98, 138, 0.5); +} + +.btn-white { + color: #212529; + background-color: #ffffff; + border-color: #ffffff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-white:hover { + color: #212529; + background-color: #ececec; + border-color: #e6e6e6; +} + +.btn-white:focus, .btn-white.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(222, 222, 223, 0.5); +} + +.btn-white.disabled, .btn-white:disabled { + color: #212529; + background-color: #ffffff; + border-color: #ffffff; +} + +.btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled).active, +.show > .btn-white.dropdown-toggle { + color: #212529; + background-color: #e6e6e6; + border-color: #dfdfdf; +} + +.btn-white:not(:disabled):not(.disabled):active:focus, .btn-white:not(:disabled):not(.disabled).active:focus, +.show > .btn-white.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(222, 222, 223, 0.5); +} + +.btn-neutral { + color: #212529; + background-color: #ffffff; + border-color: #ffffff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-neutral:hover { + color: #212529; + background-color: #ececec; + border-color: #e6e6e6; +} + +.btn-neutral:focus, .btn-neutral.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(222, 222, 223, 0.5); +} + +.btn-neutral.disabled, .btn-neutral:disabled { + color: #212529; + background-color: #ffffff; + border-color: #ffffff; +} + +.btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled).active, +.show > .btn-neutral.dropdown-toggle { + color: #212529; + background-color: #e6e6e6; + border-color: #dfdfdf; +} + +.btn-neutral:not(:disabled):not(.disabled):active:focus, .btn-neutral:not(:disabled):not(.disabled).active:focus, +.show > .btn-neutral.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(222, 222, 223, 0.5); +} + +.btn-darker { + color: #ffffff; + background-color: black; + border-color: black; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.btn-darker:hover { + color: #ffffff; + background-color: black; + border-color: black; +} + +.btn-darker:focus, .btn-darker.focus { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(38, 38, 38, 0.5); +} + +.btn-darker.disabled, .btn-darker:disabled { + color: #ffffff; + background-color: black; + border-color: black; +} + +.btn-darker:not(:disabled):not(.disabled):active, .btn-darker:not(:disabled):not(.disabled).active, +.show > .btn-darker.dropdown-toggle { + color: #ffffff; + background-color: black; + border-color: black; +} + +.btn-darker:not(:disabled):not(.disabled):active:focus, .btn-darker:not(:disabled):not(.disabled).active:focus, +.show > .btn-darker.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(38, 38, 38, 0.5); +} + +.btn-outline-primary { + color: #e14eca; + border-color: #e14eca; +} + +.btn-outline-primary:hover { + color: #ffffff; + background-color: #e14eca; + border-color: #e14eca; +} + +.btn-outline-primary:focus, .btn-outline-primary.focus { + box-shadow: 0 0 0 0 rgba(225, 78, 202, 0.5); +} + +.btn-outline-primary.disabled, .btn-outline-primary:disabled { + color: #e14eca; + background-color: transparent; +} + +.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, +.show > .btn-outline-primary.dropdown-toggle { + color: #ffffff; + background-color: #e14eca; + border-color: #e14eca; +} + +.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(225, 78, 202, 0.5); +} + +.btn-outline-secondary { + color: #f4f5f7; + border-color: #f4f5f7; +} + +.btn-outline-secondary:hover { + color: #212529; + background-color: #f4f5f7; + border-color: #f4f5f7; +} + +.btn-outline-secondary:focus, .btn-outline-secondary.focus { + box-shadow: 0 0 0 0 rgba(244, 245, 247, 0.5); +} + +.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { + color: #f4f5f7; + background-color: transparent; +} + +.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, +.show > .btn-outline-secondary.dropdown-toggle { + color: #212529; + background-color: #f4f5f7; + border-color: #f4f5f7; +} + +.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(244, 245, 247, 0.5); +} + +.btn-outline-success { + color: #00f2c3; + border-color: #00f2c3; +} + +.btn-outline-success:hover { + color: #ffffff; + background-color: #00f2c3; + border-color: #00f2c3; +} + +.btn-outline-success:focus, .btn-outline-success.focus { + box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.5); +} + +.btn-outline-success.disabled, .btn-outline-success:disabled { + color: #00f2c3; + background-color: transparent; +} + +.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, +.show > .btn-outline-success.dropdown-toggle { + color: #ffffff; + background-color: #00f2c3; + border-color: #00f2c3; +} + +.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.5); +} + +.btn-outline-info { + color: #1d8cf8; + border-color: #1d8cf8; +} + +.btn-outline-info:hover { + color: #ffffff; + background-color: #1d8cf8; + border-color: #1d8cf8; +} + +.btn-outline-info:focus, .btn-outline-info.focus { + box-shadow: 0 0 0 0 rgba(29, 140, 248, 0.5); +} + +.btn-outline-info.disabled, .btn-outline-info:disabled { + color: #1d8cf8; + background-color: transparent; +} + +.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, +.show > .btn-outline-info.dropdown-toggle { + color: #ffffff; + background-color: #1d8cf8; + border-color: #1d8cf8; +} + +.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(29, 140, 248, 0.5); +} + +.btn-outline-warning { + color: #ff8d72; + border-color: #ff8d72; +} + +.btn-outline-warning:hover { + color: #ffffff; + background-color: #ff8d72; + border-color: #ff8d72; +} + +.btn-outline-warning:focus, .btn-outline-warning.focus { + box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.5); +} + +.btn-outline-warning.disabled, .btn-outline-warning:disabled { + color: #ff8d72; + background-color: transparent; +} + +.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, +.show > .btn-outline-warning.dropdown-toggle { + color: #ffffff; + background-color: #ff8d72; + border-color: #ff8d72; +} + +.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.5); +} + +.btn-outline-danger { + color: #fd5d93; + border-color: #fd5d93; +} + +.btn-outline-danger:hover { + color: #ffffff; + background-color: #fd5d93; + border-color: #fd5d93; +} + +.btn-outline-danger:focus, .btn-outline-danger.focus { + box-shadow: 0 0 0 0 rgba(253, 93, 147, 0.5); +} + +.btn-outline-danger.disabled, .btn-outline-danger:disabled { + color: #fd5d93; + background-color: transparent; +} + +.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, +.show > .btn-outline-danger.dropdown-toggle { + color: #ffffff; + background-color: #fd5d93; + border-color: #fd5d93; +} + +.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(253, 93, 147, 0.5); +} + +.btn-outline-light { + color: #adb5bd; + border-color: #adb5bd; +} + +.btn-outline-light:hover { + color: #ffffff; + background-color: #adb5bd; + border-color: #adb5bd; +} + +.btn-outline-light:focus, .btn-outline-light.focus { + box-shadow: 0 0 0 0 rgba(173, 181, 189, 0.5); +} + +.btn-outline-light.disabled, .btn-outline-light:disabled { + color: #adb5bd; + background-color: transparent; +} + +.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, +.show > .btn-outline-light.dropdown-toggle { + color: #ffffff; + background-color: #adb5bd; + border-color: #adb5bd; +} + +.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(173, 181, 189, 0.5); +} + +.btn-outline-dark { + color: #212529; + border-color: #212529; +} + +.btn-outline-dark:hover { + color: #ffffff; + background-color: #212529; + border-color: #212529; +} + +.btn-outline-dark:focus, .btn-outline-dark.focus { + box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5); +} + +.btn-outline-dark.disabled, .btn-outline-dark:disabled { + color: #212529; + background-color: transparent; +} + +.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, +.show > .btn-outline-dark.dropdown-toggle { + color: #ffffff; + background-color: #212529; + border-color: #212529; +} + +.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5); +} + +.btn-outline-default { + color: #344675; + border-color: #344675; +} + +.btn-outline-default:hover { + color: #ffffff; + background-color: #344675; + border-color: #344675; +} + +.btn-outline-default:focus, .btn-outline-default.focus { + box-shadow: 0 0 0 0 rgba(52, 70, 117, 0.5); +} + +.btn-outline-default.disabled, .btn-outline-default:disabled { + color: #344675; + background-color: transparent; +} + +.btn-outline-default:not(:disabled):not(.disabled):active, .btn-outline-default:not(:disabled):not(.disabled).active, +.show > .btn-outline-default.dropdown-toggle { + color: #ffffff; + background-color: #344675; + border-color: #344675; +} + +.btn-outline-default:not(:disabled):not(.disabled):active:focus, .btn-outline-default:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-default.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(52, 70, 117, 0.5); +} + +.btn-outline-white { + color: #ffffff; + border-color: #ffffff; +} + +.btn-outline-white:hover { + color: #212529; + background-color: #ffffff; + border-color: #ffffff; +} + +.btn-outline-white:focus, .btn-outline-white.focus { + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); +} + +.btn-outline-white.disabled, .btn-outline-white:disabled { + color: #ffffff; + background-color: transparent; +} + +.btn-outline-white:not(:disabled):not(.disabled):active, .btn-outline-white:not(:disabled):not(.disabled).active, +.show > .btn-outline-white.dropdown-toggle { + color: #212529; + background-color: #ffffff; + border-color: #ffffff; +} + +.btn-outline-white:not(:disabled):not(.disabled):active:focus, .btn-outline-white:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-white.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); +} + +.btn-outline-neutral { + color: #ffffff; + border-color: #ffffff; +} + +.btn-outline-neutral:hover { + color: #212529; + background-color: #ffffff; + border-color: #ffffff; +} + +.btn-outline-neutral:focus, .btn-outline-neutral.focus { + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); +} + +.btn-outline-neutral.disabled, .btn-outline-neutral:disabled { + color: #ffffff; + background-color: transparent; +} + +.btn-outline-neutral:not(:disabled):not(.disabled):active, .btn-outline-neutral:not(:disabled):not(.disabled).active, +.show > .btn-outline-neutral.dropdown-toggle { + color: #212529; + background-color: #ffffff; + border-color: #ffffff; +} + +.btn-outline-neutral:not(:disabled):not(.disabled):active:focus, .btn-outline-neutral:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-neutral.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); +} + +.btn-outline-darker { + color: black; + border-color: black; +} + +.btn-outline-darker:hover { + color: #ffffff; + background-color: black; + border-color: black; +} + +.btn-outline-darker:focus, .btn-outline-darker.focus { + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); +} + +.btn-outline-darker.disabled, .btn-outline-darker:disabled { + color: black; + background-color: transparent; +} + +.btn-outline-darker:not(:disabled):not(.disabled):active, .btn-outline-darker:not(:disabled):not(.disabled).active, +.show > .btn-outline-darker.dropdown-toggle { + color: #ffffff; + background-color: black; + border-color: black; +} + +.btn-outline-darker:not(:disabled):not(.disabled):active:focus, .btn-outline-darker:not(:disabled):not(.disabled).active:focus, +.show > .btn-outline-darker.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); +} + +.btn-link { + font-weight: 400; + color: #e14eca; + text-decoration: none; +} + +.btn-link:hover { + color: #c221a9; + text-decoration: none; +} + +.btn-link:focus, .btn-link.focus { + text-decoration: none; + box-shadow: none; +} + +.btn-link:disabled, .btn-link.disabled { + color: #6c757d; + pointer-events: none; +} + +.btn-lg, .btn-group-lg > .btn { + padding: 15px 48px; + font-size: 1em; + line-height: 1.35; + border-radius: 0.4285rem; +} + +.btn-sm, .btn-group-sm > .btn { + padding: 5px 15px; + font-size: 0.75rem; + line-height: 1.35; + border-radius: 0.25rem; +} + +.btn-block { + display: block; + width: 100%; +} + +.btn-block + .btn-block { + margin-top: 0.5rem; +} + +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} + +.fade { + transition: opacity 0.15s linear; +} + +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} + +.fade:not(.show) { + opacity: 0; +} + +.collapse:not(.show) { + display: none; +} + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + transition: height 0.35s ease; +} + +@media (prefers-reduced-motion: reduce) { + .collapsing { + transition: none; + } +} + +.dropup, +.dropright, +.dropdown, +.dropleft { + position: relative; +} + +.dropdown-toggle { + white-space: nowrap; +} + +.dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} + +.dropdown-toggle:empty::after { + margin-left: 0; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0.125rem 0 0; + font-size: 0.875rem; + color: #525f7f; + text-align: left; + list-style: none; + background-color: #ffffff; + background-clip: padding-box; + border: 0 solid rgba(34, 42, 66, 0.15); + border-radius: 0.1428rem; + box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1); +} + +.dropdown-menu-left { + right: auto; + left: 0; +} + +.dropdown-menu-right { + right: 0; + left: auto; +} + +@media (min-width: 576px) { + .dropdown-menu-sm-left { + right: auto; + left: 0; + } + .dropdown-menu-sm-right { + right: 0; + left: auto; + } +} + +@media (min-width: 768px) { + .dropdown-menu-md-left { + right: auto; + left: 0; + } + .dropdown-menu-md-right { + right: 0; + left: auto; + } +} + +@media (min-width: 992px) { + .dropdown-menu-lg-left { + right: auto; + left: 0; + } + .dropdown-menu-lg-right { + right: 0; + left: auto; + } +} + +@media (min-width: 1200px) { + .dropdown-menu-xl-left { + right: auto; + left: 0; + } + .dropdown-menu-xl-right { + right: 0; + left: auto; + } +} + +.dropup .dropdown-menu { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: 0.125rem; +} + +.dropup .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0; + border-right: 0.3em solid transparent; + border-bottom: 0.3em solid; + border-left: 0.3em solid transparent; +} + +.dropup .dropdown-toggle:empty::after { + margin-left: 0; +} + +.dropright .dropdown-menu { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + margin-left: 0.125rem; +} + +.dropright .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0; + border-bottom: 0.3em solid transparent; + border-left: 0.3em solid; +} + +.dropright .dropdown-toggle:empty::after { + margin-left: 0; +} + +.dropright .dropdown-toggle::after { + vertical-align: 0; +} + +.dropleft .dropdown-menu { + top: 0; + right: 100%; + left: auto; + margin-top: 0; + margin-right: 0.125rem; +} + +.dropleft .dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; +} + +.dropleft .dropdown-toggle::after { + display: none; +} + +.dropleft .dropdown-toggle::before { + display: inline-block; + margin-right: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid transparent; + border-right: 0.3em solid; + border-bottom: 0.3em solid transparent; +} + +.dropleft .dropdown-toggle:empty::after { + margin-left: 0; +} + +.dropleft .dropdown-toggle::before { + vertical-align: 0; +} + +.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] { + right: auto; + bottom: auto; +} + +.dropdown-divider { + height: 0; + margin: 0.5rem 0; + overflow: hidden; + border-top: 1px solid #e9ecef; +} + +.dropdown-item { + display: block; + width: 100%; + padding: 0.25rem 1.5rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; +} + +.dropdown-item:hover, .dropdown-item:focus { + color: #16181b; + text-decoration: none; + background-color: #f6f9fc; +} + +.dropdown-item.active, .dropdown-item:active { + color: #ffffff; + text-decoration: none; + background-color: #e14eca; +} + +.dropdown-item.disabled, .dropdown-item:disabled { + color: #6c757d; + pointer-events: none; + background-color: transparent; +} + +.dropdown-menu.show { + display: block; +} + +.dropdown-header { + display: block; + padding: 0.5rem 1.5rem; + margin-bottom: 0; + font-size: 0.75rem; + color: #6c757d; + white-space: nowrap; +} + +.dropdown-item-text { + display: block; + padding: 0.25rem 1.5rem; + color: #212529; +} + +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-flex; + vertical-align: middle; +} + +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + flex: 1 1 auto; +} + +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover { + z-index: 1; +} + +.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { + z-index: 1; +} + +.btn-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +.btn-toolbar .input-group { + width: auto; +} + +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) { + margin-left: -1px; +} + +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.dropdown-toggle-split { + padding-right: 30px; + padding-left: 30px; +} + +.dropdown-toggle-split::after, +.dropup .dropdown-toggle-split::after, +.dropright .dropdown-toggle-split::after { + margin-left: 0; +} + +.dropleft .dropdown-toggle-split::before { + margin-right: 0; +} + +.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { + padding-right: 11.25px; + padding-left: 11.25px; +} + +.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { + padding-right: 36px; + padding-left: 36px; +} + +.btn-group.show .dropdown-toggle { + box-shadow: none; +} + +.btn-group.show .dropdown-toggle.btn-link { + box-shadow: none; +} + +.btn-group-vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group { + width: 100%; +} + +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { + margin-top: -1px; +} + +.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.btn-group-toggle > .btn, +.btn-group-toggle > .btn-group > .btn { + margin-bottom: 0; +} + +.btn-group-toggle > .btn input[type="radio"], +.btn-group-toggle > .btn input[type="checkbox"], +.btn-group-toggle > .btn-group > .btn input[type="radio"], +.btn-group-toggle > .btn-group > .btn input[type="checkbox"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} + +.input-group { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: stretch; + width: 100%; +} + +.input-group > .form-control, +.input-group > .form-control-plaintext, +.input-group > .custom-select, +.input-group > .custom-file { + position: relative; + flex: 1 1 auto; + width: 1%; + margin-bottom: 0; +} + +.input-group > .form-control + .form-control, +.input-group > .form-control + .custom-select, +.input-group > .form-control + .custom-file, +.input-group > .form-control-plaintext + .form-control, +.input-group > .form-control-plaintext + .custom-select, +.input-group > .form-control-plaintext + .custom-file, +.input-group > .custom-select + .form-control, +.input-group > .custom-select + .custom-select, +.input-group > .custom-select + .custom-file, +.input-group > .custom-file + .form-control, +.input-group > .custom-file + .custom-select, +.input-group > .custom-file + .custom-file { + margin-left: -1px; +} + +.input-group > .form-control:focus, +.input-group > .custom-select:focus, +.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { + z-index: 3; +} + +.input-group > .custom-file .custom-file-input:focus { + z-index: 4; +} + +.input-group > .form-control:not(:last-child), +.input-group > .custom-select:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group > .form-control:not(:first-child), +.input-group > .custom-select:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-group > .custom-file { + display: flex; + align-items: center; +} + +.input-group > .custom-file:not(:last-child) .custom-file-label, +.input-group > .custom-file:not(:last-child) .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group > .custom-file:not(:first-child) .custom-file-label { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-group-prepend, +.input-group-append { + display: flex; +} + +.input-group-prepend .btn, +.input-group-append .btn { + position: relative; + z-index: 2; +} + +.input-group-prepend .btn:focus, +.input-group-append .btn:focus { + z-index: 3; +} + +.input-group-prepend .btn + .btn, +.input-group-prepend .btn + .input-group-text, +.input-group-prepend .input-group-text + .input-group-text, +.input-group-prepend .input-group-text + .btn, +.input-group-append .btn + .btn, +.input-group-append .btn + .input-group-text, +.input-group-append .input-group-text + .input-group-text, +.input-group-append .input-group-text + .btn { + margin-left: -1px; +} + +.input-group-prepend { + margin-right: -1px; +} + +.input-group-append { + margin-left: -1px; +} + +.input-group-text { + display: flex; + align-items: center; + padding: 0.5rem 0.7rem; + margin-bottom: 0; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.428571; + color: #adb5bd; + text-align: center; + white-space: nowrap; + background-color: transparent; + border: 1px solid #cad1d7; + border-radius: 0.25rem; +} + +.input-group-text input[type="radio"], +.input-group-text input[type="checkbox"] { + margin-top: 0; +} + +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { + height: calc(1.35em + 1.75rem + 2px); +} + +.input-group-lg > .form-control, +.input-group-lg > .custom-select, +.input-group-lg > .input-group-prepend > .input-group-text, +.input-group-lg > .input-group-append > .input-group-text, +.input-group-lg > .input-group-prepend > .btn, +.input-group-lg > .input-group-append > .btn { + padding: 0.875rem 1rem; + font-size: 0.875rem; + line-height: 1.35; + border-radius: 0.4285rem; +} + +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { + height: calc(1.35em + 0.5rem + 2px); +} + +.input-group-sm > .form-control, +.input-group-sm > .custom-select, +.input-group-sm > .input-group-prepend > .input-group-text, +.input-group-sm > .input-group-append > .input-group-text, +.input-group-sm > .input-group-prepend > .btn, +.input-group-sm > .input-group-append > .btn { + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + line-height: 1.35; + border-radius: 0.2857rem; +} + +.input-group-lg > .custom-select, +.input-group-sm > .custom-select { + padding-right: 1.7rem; +} + +.input-group > .input-group-prepend > .btn, +.input-group > .input-group-prepend > .input-group-text, +.input-group > .input-group-append:not(:last-child) > .btn, +.input-group > .input-group-append:not(:last-child) > .input-group-text, +.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group > .input-group-append > .btn, +.input-group > .input-group-append > .input-group-text, +.input-group > .input-group-prepend:not(:first-child) > .btn, +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, +.input-group > .input-group-prepend:first-child > .btn:not(:first-child), +.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.custom-control { + position: relative; + display: block; + min-height: 1.3125rem; + padding-left: 3rem; +} + +.custom-control-inline { + display: inline-flex; + margin-right: 1rem; +} + +.custom-control-input { + position: absolute; + z-index: -1; + opacity: 0; +} + +.custom-control-input:checked ~ .custom-control-label::before { + color: #ffffff; + border-color: #e14eca; + background-color: #e14eca; + box-shadow: none; +} + +.custom-control-input:focus ~ .custom-control-label::before { + box-shadow: none, none; +} + +.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { + border-color: rgba(50, 151, 211, 0.25); +} + +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + color: #ffffff; + background-color: #e14eca; + border-color: #e14eca; + box-shadow: none; +} + +.custom-control-input:disabled ~ .custom-control-label { + color: #6c757d; +} + +.custom-control-input:disabled ~ .custom-control-label::before { + background-color: #e9ecef; +} + +.custom-control-label { + position: relative; + margin-bottom: 0; + vertical-align: top; +} + +.custom-control-label::before { + position: absolute; + top: 0.03125rem; + left: -3rem; + display: block; + width: 1.25rem; + height: 1.25rem; + pointer-events: none; + content: ""; + background-color: transparent; + border: #cad1d7 solid 1px; + box-shadow: none; +} + +.custom-control-label::after { + position: absolute; + top: 0.03125rem; + left: -3rem; + display: block; + width: 1.25rem; + height: 1.25rem; + content: ""; + background: no-repeat 50% / 50% 50%; +} + +.custom-checkbox .custom-control-label::before { + border-radius: 0.2857rem; +} + +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); +} + +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { + border-color: #e14eca; + background-color: #e14eca; + box-shadow: none; +} + +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffffff' d='M0 2h4'/%3e%3c/svg%3e"); +} + +.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: rgba(225, 78, 202, 0.5); +} + +.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { + background-color: rgba(225, 78, 202, 0.5); +} + +.custom-radio .custom-control-label::before { + border-radius: 50%; +} + +.custom-radio .custom-control-input:checked ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); +} + +.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: rgba(225, 78, 202, 0.5); +} + +.custom-switch { + padding-left: 3.9375rem; +} + +.custom-switch .custom-control-label::before { + left: -3.9375rem; + width: 2.1875rem; + pointer-events: all; + border-radius: 0.625rem; +} + +.custom-switch .custom-control-label::after { + top: calc(0.03125rem + 2px); + left: calc(-3.9375rem + 2px); + width: calc(1.25rem - 4px); + height: calc(1.25rem - 4px); + background-color: #cad1d7; + border-radius: 0.625rem; + transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + .custom-switch .custom-control-label::after { + transition: none; + } +} + +.custom-switch .custom-control-input:checked ~ .custom-control-label::after { + background-color: transparent; + transform: translateX(0.9375rem); +} + +.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { + background-color: rgba(225, 78, 202, 0.5); +} + +.custom-select { + display: inline-block; + width: 100%; + height: calc(2.25rem + 2px); + padding: 0.5rem 1.7rem 0.5rem 0.7rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.428571; + color: rgba(255, 255, 255, 0.8); + vertical-align: middle; + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2332325d' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.7rem center/8px 10px; + background-color: transparent; + border: 1px solid #cad1d7; + border-radius: 0.25rem; + box-shadow: inset 0 1px 2px rgba(34, 42, 66, 0.075); + appearance: none; +} + +.custom-select:focus { + border-color: rgba(50, 151, 211, 0.25); + outline: 0; + box-shadow: inset 0 1px 2px rgba(34, 42, 66, 0.075), 0 0 0 0 #e14eca; +} + +.custom-select:focus::-ms-value { + color: rgba(255, 255, 255, 0.8); + background-color: transparent; +} + +.custom-select[multiple], .custom-select[size]:not([size="1"]) { + height: auto; + padding-right: 0.7rem; + background-image: none; +} + +.custom-select:disabled { + color: #6c757d; + background-color: #e9ecef; +} + +.custom-select::-ms-expand { + display: none; +} + +.custom-select-sm { + height: calc(1.35em + 0.5rem + 2px); + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + font-size: 0.75rem; +} + +.custom-select-lg { + height: calc(1.35em + 1.75rem + 2px); + padding-top: 0.875rem; + padding-bottom: 0.875rem; + padding-left: 1rem; + font-size: 0.875rem; +} + +.custom-file { + position: relative; + display: inline-block; + width: 100%; + height: calc(2.25rem + 2px); + margin-bottom: 0; +} + +.custom-file-input { + position: relative; + z-index: 2; + width: 100%; + height: calc(2.25rem + 2px); + margin: 0; + opacity: 0; +} + +.custom-file-input:focus ~ .custom-file-label { + border-color: rgba(50, 151, 211, 0.25); + box-shadow: none; +} + +.custom-file-input:disabled ~ .custom-file-label { + background-color: #e9ecef; +} + +.custom-file-input:lang(en) ~ .custom-file-label::after { + content: "Browse"; +} + +.custom-file-input ~ .custom-file-label[data-browse]::after { + content: attr(data-browse); +} + +.custom-file-label { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 1; + height: calc(2.25rem + 2px); + padding: 0.5rem 0.7rem; + font-weight: 400; + line-height: 1.428571; + color: rgba(255, 255, 255, 0.8); + background-color: transparent; + border: 1px solid #cad1d7; + border-radius: 0.25rem; + box-shadow: none; +} + +.custom-file-label::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 3; + display: block; + height: 2.25rem; + padding: 0.5rem 0.7rem; + line-height: 1.428571; + color: rgba(255, 255, 255, 0.8); + content: "Browse"; + background-color: transparent; + border-left: inherit; + border-radius: 0 0.25rem 0.25rem 0; +} + +.custom-range { + width: 100%; + height: calc(1rem + 0); + padding: 0; + background-color: transparent; + appearance: none; +} + +.custom-range:focus { + outline: none; +} + +.custom-range:focus::-webkit-slider-thumb { + box-shadow: 0 0 0 1px #1e1e2f, none; +} + +.custom-range:focus::-moz-range-thumb { + box-shadow: 0 0 0 1px #1e1e2f, none; +} + +.custom-range:focus::-ms-thumb { + box-shadow: 0 0 0 1px #1e1e2f, none; +} + +.custom-range::-moz-focus-outer { + border: 0; +} + +.custom-range::-webkit-slider-thumb { + width: 1rem; + height: 1rem; + margin-top: -0.25rem; + background-color: #e14eca; + border: 0; + border-radius: 1rem; + box-shadow: 0 0.1rem 0.25rem rgba(34, 42, 66, 0.1); + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + appearance: none; +} + +@media (prefers-reduced-motion: reduce) { + .custom-range::-webkit-slider-thumb { + transition: none; + } +} + +.custom-range::-webkit-slider-thumb:active { + background-color: #fbe7f8; +} + +.custom-range::-webkit-slider-runnable-track { + width: 100%; + height: 0.5rem; + color: transparent; + cursor: pointer; + background-color: #e3e3e3; + border-color: transparent; + border-radius: 1rem; + box-shadow: inset 0 0.25rem 0.25rem rgba(34, 42, 66, 0.1); +} + +.custom-range::-moz-range-thumb { + width: 1rem; + height: 1rem; + background-color: #e14eca; + border: 0; + border-radius: 1rem; + box-shadow: 0 0.1rem 0.25rem rgba(34, 42, 66, 0.1); + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + appearance: none; +} + +@media (prefers-reduced-motion: reduce) { + .custom-range::-moz-range-thumb { + transition: none; + } +} + +.custom-range::-moz-range-thumb:active { + background-color: #fbe7f8; +} + +.custom-range::-moz-range-track { + width: 100%; + height: 0.5rem; + color: transparent; + cursor: pointer; + background-color: #e3e3e3; + border-color: transparent; + border-radius: 1rem; + box-shadow: inset 0 0.25rem 0.25rem rgba(34, 42, 66, 0.1); +} + +.custom-range::-ms-thumb { + width: 1rem; + height: 1rem; + margin-top: 0; + margin-right: 0; + margin-left: 0; + background-color: #e14eca; + border: 0; + border-radius: 1rem; + box-shadow: 0 0.1rem 0.25rem rgba(34, 42, 66, 0.1); + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + appearance: none; +} + +@media (prefers-reduced-motion: reduce) { + .custom-range::-ms-thumb { + transition: none; + } +} + +.custom-range::-ms-thumb:active { + background-color: #fbe7f8; +} + +.custom-range::-ms-track { + width: 100%; + height: 0.5rem; + color: transparent; + cursor: pointer; + background-color: transparent; + border-color: transparent; + border-width: 0.5rem; + box-shadow: inset 0 0.25rem 0.25rem rgba(34, 42, 66, 0.1); +} + +.custom-range::-ms-fill-lower { + background-color: #e3e3e3; + border-radius: 1rem; +} + +.custom-range::-ms-fill-upper { + margin-right: 15px; + background-color: #e3e3e3; + border-radius: 1rem; +} + +.custom-range:disabled::-webkit-slider-thumb { + background-color: #adb5bd; +} + +.custom-range:disabled::-webkit-slider-runnable-track { + cursor: default; +} + +.custom-range:disabled::-moz-range-thumb { + background-color: #adb5bd; +} + +.custom-range:disabled::-moz-range-track { + cursor: default; +} + +.custom-range:disabled::-ms-thumb { + background-color: #adb5bd; +} + +.custom-control-label::before, +.custom-file-label, +.custom-select { + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + .custom-control-label::before, + .custom-file-label, + .custom-select { + transition: none; + } +} + +.nav { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} + +.nav-link { + display: block; + padding: 0.5rem 1rem; +} + +.nav-link:hover, .nav-link:focus { + text-decoration: none; +} + +.nav-link.disabled { + color: #6c757d; + pointer-events: none; + cursor: default; +} + +.nav-tabs { + border-bottom: 0.0625rem solid #e3e3e3; +} + +.nav-tabs .nav-item { + margin-bottom: -0.0625rem; +} + +.nav-tabs .nav-link { + border: 0.0625rem solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { + border-color: #e9ecef #e9ecef #e3e3e3; +} + +.nav-tabs .nav-link.disabled { + color: #6c757d; + background-color: transparent; + border-color: transparent; +} + +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: #525f7f; + background-color: #1e1e2f; + border-color: #e3e3e3 #e3e3e3 #1e1e2f; +} + +.nav-tabs .dropdown-menu { + margin-top: -0.0625rem; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.nav-pills .nav-link { + border-radius: 0.25rem; +} + +.nav-pills .nav-link.active, +.nav-pills .show > .nav-link { + color: #ffffff; + background-color: #e14eca; +} + +.nav-fill .nav-item { + flex: 1 1 auto; + text-align: center; +} + +.nav-justified .nav-item { + flex-basis: 0; + flex-grow: 1; + text-align: center; +} + +.tab-content > .tab-pane { + display: none; +} + +.tab-content > .active { + display: block; +} + +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0.625rem 0.9375rem; +} + +.navbar > .container, +.navbar > .container-fluid { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} + +.navbar-brand { + display: inline-block; + padding-top: 0.406813rem; + padding-bottom: 0.406813rem; + margin-right: 0.9375rem; + font-size: 0.99925rem; + line-height: inherit; + white-space: nowrap; +} + +.navbar-brand:hover, .navbar-brand:focus { + text-decoration: none; +} + +.navbar-nav { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} + +.navbar-nav .nav-link { + padding-right: 0; + padding-left: 0; +} + +.navbar-nav .dropdown-menu { + position: static; + float: none; +} + +.navbar-text { + display: inline-block; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.navbar-collapse { + flex-basis: 100%; + flex-grow: 1; + align-items: center; +} + +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 0.99925rem; + line-height: 1; + background-color: transparent; + border: 0.0625rem solid transparent; + border-radius: 0.25rem; +} + +.navbar-toggler:hover, .navbar-toggler:focus { + text-decoration: none; +} + +.navbar-toggler-icon { + display: inline-block; + width: 1.5em; + height: 1.5em; + vertical-align: middle; + content: ""; + background: no-repeat center center; + background-size: 100% 100%; +} + +@media (max-width: 575.98px) { + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + padding-right: 0; + padding-left: 0; + } +} + +@media (min-width: 576px) { + .navbar-expand-sm { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-sm .navbar-nav { + flex-direction: row; + } + .navbar-expand-sm .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-sm .navbar-nav .nav-link { + padding-right: 1rem; + padding-left: 1rem; + } + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + flex-wrap: nowrap; + } + .navbar-expand-sm .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-sm .navbar-toggler { + display: none; + } +} + +@media (max-width: 767.98px) { + .navbar-expand-md > .container, + .navbar-expand-md > .container-fluid { + padding-right: 0; + padding-left: 0; + } +} + +@media (min-width: 768px) { + .navbar-expand-md { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-md .navbar-nav { + flex-direction: row; + } + .navbar-expand-md .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-md .navbar-nav .nav-link { + padding-right: 1rem; + padding-left: 1rem; + } + .navbar-expand-md > .container, + .navbar-expand-md > .container-fluid { + flex-wrap: nowrap; + } + .navbar-expand-md .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-md .navbar-toggler { + display: none; + } +} + +@media (max-width: 991.98px) { + .navbar-expand-lg > .container, + .navbar-expand-lg > .container-fluid { + padding-right: 0; + padding-left: 0; + } +} + +@media (min-width: 992px) { + .navbar-expand-lg { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-lg .navbar-nav { + flex-direction: row; + } + .navbar-expand-lg .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-lg .navbar-nav .nav-link { + padding-right: 1rem; + padding-left: 1rem; + } + .navbar-expand-lg > .container, + .navbar-expand-lg > .container-fluid { + flex-wrap: nowrap; + } + .navbar-expand-lg .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-lg .navbar-toggler { + display: none; + } +} + +@media (max-width: 1199.98px) { + .navbar-expand-xl > .container, + .navbar-expand-xl > .container-fluid { + padding-right: 0; + padding-left: 0; + } +} + +@media (min-width: 1200px) { + .navbar-expand-xl { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-xl .navbar-nav { + flex-direction: row; + } + .navbar-expand-xl .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-xl .navbar-nav .nav-link { + padding-right: 1rem; + padding-left: 1rem; + } + .navbar-expand-xl > .container, + .navbar-expand-xl > .container-fluid { + flex-wrap: nowrap; + } + .navbar-expand-xl .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-xl .navbar-toggler { + display: none; + } +} + +.navbar-expand { + flex-flow: row nowrap; + justify-content: flex-start; +} + +.navbar-expand > .container, +.navbar-expand > .container-fluid { + padding-right: 0; + padding-left: 0; +} + +.navbar-expand .navbar-nav { + flex-direction: row; +} + +.navbar-expand .navbar-nav .dropdown-menu { + position: absolute; +} + +.navbar-expand .navbar-nav .nav-link { + padding-right: 1rem; + padding-left: 1rem; +} + +.navbar-expand > .container, +.navbar-expand > .container-fluid { + flex-wrap: nowrap; +} + +.navbar-expand .navbar-collapse { + display: flex !important; + flex-basis: auto; +} + +.navbar-expand .navbar-toggler { + display: none; +} + +.navbar-light .navbar-brand { + color: rgba(34, 42, 66, 0.9); +} + +.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { + color: rgba(34, 42, 66, 0.9); +} + +.navbar-light .navbar-nav .nav-link { + color: rgba(34, 42, 66, 0.5); +} + +.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { + color: rgba(34, 42, 66, 0.7); +} + +.navbar-light .navbar-nav .nav-link.disabled { + color: rgba(34, 42, 66, 0.3); +} + +.navbar-light .navbar-nav .show > .nav-link, +.navbar-light .navbar-nav .active > .nav-link, +.navbar-light .navbar-nav .nav-link.show, +.navbar-light .navbar-nav .nav-link.active { + color: rgba(34, 42, 66, 0.9); +} + +.navbar-light .navbar-toggler { + color: rgba(34, 42, 66, 0.5); + border-color: transparent; +} + +.navbar-light .navbar-toggler-icon { + background-image: url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(34, 42, 66, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); +} + +.navbar-light .navbar-text { + color: rgba(34, 42, 66, 0.5); +} + +.navbar-light .navbar-text a { + color: rgba(34, 42, 66, 0.9); +} + +.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { + color: rgba(34, 42, 66, 0.9); +} + +.navbar-dark .navbar-brand { + color: rgba(255, 255, 255, 0.65); +} + +.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { + color: rgba(255, 255, 255, 0.65); +} + +.navbar-dark .navbar-nav .nav-link { + color: rgba(255, 255, 255, 0.95); +} + +.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { + color: rgba(255, 255, 255, 0.65); +} + +.navbar-dark .navbar-nav .nav-link.disabled { + color: rgba(255, 255, 255, 0.25); +} + +.navbar-dark .navbar-nav .show > .nav-link, +.navbar-dark .navbar-nav .active > .nav-link, +.navbar-dark .navbar-nav .nav-link.show, +.navbar-dark .navbar-nav .nav-link.active { + color: rgba(255, 255, 255, 0.65); +} + +.navbar-dark .navbar-toggler { + color: rgba(255, 255, 255, 0.95); + border-color: transparent; +} + +.navbar-dark .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} + +.navbar-dark .navbar-text { + color: rgba(255, 255, 255, 0.95); +} + +.navbar-dark .navbar-text a { + color: rgba(255, 255, 255, 0.65); +} + +.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { + color: rgba(255, 255, 255, 0.65); +} + +.card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #ffffff; + background-clip: border-box; + border: 0.0625rem solid rgba(34, 42, 66, 0.05); + border-radius: 0.2857rem; +} + +.card > hr { + margin-right: 0; + margin-left: 0; +} + +.card > .list-group:first-child .list-group-item:first-child { + border-top-left-radius: 0.2857rem; + border-top-right-radius: 0.2857rem; +} + +.card > .list-group:last-child .list-group-item:last-child { + border-bottom-right-radius: 0.2857rem; + border-bottom-left-radius: 0.2857rem; +} + +.card-body { + flex: 1 1 auto; + padding: 1.5rem; +} + +.card-title { + margin-bottom: 1.25rem; +} + +.card-subtitle { + margin-top: -0.625rem; + margin-bottom: 0; +} + +.card-text:last-child { + margin-bottom: 0; +} + +.card-link:hover { + text-decoration: none; +} + +.card-link + .card-link { + margin-left: 1.5rem; +} + +.card-header { + padding: 1.25rem 1.5rem; + margin-bottom: 0; + background-color: #f6f9fc; + border-bottom: 0.0625rem solid rgba(34, 42, 66, 0.05); +} + +.card-header:first-child { + border-radius: calc(0.2857rem - 0.0625rem) calc(0.2857rem - 0.0625rem) 0 0; +} + +.card-header + .list-group .list-group-item:first-child { + border-top: 0; +} + +.card-footer { + padding: 1.25rem 1.5rem; + background-color: #f6f9fc; + border-top: 0.0625rem solid rgba(34, 42, 66, 0.05); +} + +.card-footer:last-child { + border-radius: 0 0 calc(0.2857rem - 0.0625rem) calc(0.2857rem - 0.0625rem); +} + +.card-header-tabs { + margin-right: -0.75rem; + margin-bottom: -1.25rem; + margin-left: -0.75rem; + border-bottom: 0; +} + +.card-header-pills { + margin-right: -0.75rem; + margin-left: -0.75rem; +} + +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 1.25rem; +} + +.card-img { + width: 100%; + border-radius: calc(0.2857rem - 0.0625rem); +} + +.card-img-top { + width: 100%; + border-top-left-radius: calc(0.2857rem - 0.0625rem); + border-top-right-radius: calc(0.2857rem - 0.0625rem); +} + +.card-img-bottom { + width: 100%; + border-bottom-right-radius: calc(0.2857rem - 0.0625rem); + border-bottom-left-radius: calc(0.2857rem - 0.0625rem); +} + +.card-deck { + display: flex; + flex-direction: column; +} + +.card-deck .card { + margin-bottom: 15px; +} + +@media (min-width: 576px) { + .card-deck { + flex-flow: row wrap; + margin-right: -15px; + margin-left: -15px; + } + .card-deck .card { + display: flex; + flex: 1 0 0%; + flex-direction: column; + margin-right: 15px; + margin-bottom: 0; + margin-left: 15px; + } +} + +.card-group { + display: flex; + flex-direction: column; +} + +.card-group > .card { + margin-bottom: 15px; +} + +@media (min-width: 576px) { + .card-group { + flex-flow: row wrap; + } + .card-group > .card { + flex: 1 0 0%; + margin-bottom: 0; + } + .card-group > .card + .card { + margin-left: 0; + border-left: 0; + } + .card-group > .card:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { + border-top-right-radius: 0; + } + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { + border-bottom-right-radius: 0; + } + .card-group > .card:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { + border-top-left-radius: 0; + } + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { + border-bottom-left-radius: 0; + } +} + +.card-columns .card { + margin-bottom: 1.25rem; +} + +@media (min-width: 576px) { + .card-columns { + column-count: 3; + column-gap: 1.25rem; + orphans: 1; + widows: 1; + } + .card-columns .card { + display: inline-block; + width: 100%; + } +} + +.accordion > .card { + overflow: hidden; +} + +.accordion > .card:not(:first-of-type) .card-header:first-child { + border-radius: 0; +} + +.accordion > .card:not(:first-of-type):not(:last-of-type) { + border-bottom: 0; + border-radius: 0; +} + +.accordion > .card:first-of-type { + border-bottom: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.accordion > .card:last-of-type { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.accordion > .card .card-header { + margin-bottom: -0.0625rem; +} + +.breadcrumb { + display: flex; + flex-wrap: wrap; + padding: 0.75rem 1rem; + margin-bottom: 1rem; + list-style: none; + background-color: #1d253b; + border-radius: 0.25rem; +} + +.breadcrumb-item + .breadcrumb-item { + padding-left: 0.5rem; +} + +.breadcrumb-item + .breadcrumb-item::before { + display: inline-block; + padding-right: 0.5rem; + color: #ffffff; + content: "/"; +} + +.breadcrumb-item + .breadcrumb-item:hover::before { + text-decoration: underline; +} + +.breadcrumb-item + .breadcrumb-item:hover::before { + text-decoration: none; +} + +.breadcrumb-item.active { + color: #ffffff; +} + +.pagination { + display: flex; + padding-left: 0; + list-style: none; + border-radius: 0.25rem; +} + +.page-link { + position: relative; + display: block; + padding: 0 0.6875rem; + margin-left: -0.0625rem; + line-height: 1.25; + color: #ffffff; + background-color: transparent; + border: 0.0625rem solid #e3e3e3; +} + +.page-link:hover { + z-index: 2; + color: #6c757d; + text-decoration: none; + background-color: #e3e3e3; + border-color: #e3e3e3; +} + +.page-link:focus { + z-index: 2; + outline: 0; + box-shadow: none; +} + +.page-item:first-child .page-link { + margin-left: 0; + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +.page-item:last-child .page-link { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; +} + +.page-item.active .page-link { + z-index: 1; + color: #ffffff; + background-color: #e14eca; + border-color: #e14eca; +} + +.page-item.disabled .page-link { + color: #6c757d; + pointer-events: none; + cursor: auto; + background-color: transparent; + border-color: #e3e3e3; +} + +.pagination-lg .page-link { + padding: 0.75rem 1.5rem; + font-size: 0.99925rem; + line-height: 1.625rem; +} + +.pagination-lg .page-item:first-child .page-link { + border-top-left-radius: 0.4285rem; + border-bottom-left-radius: 0.4285rem; +} + +.pagination-lg .page-item:last-child .page-link { + border-top-right-radius: 0.4285rem; + border-bottom-right-radius: 0.4285rem; +} + +.pagination-sm .page-link { + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + line-height: 1.5; +} + +.pagination-sm .page-item:first-child .page-link { + border-top-left-radius: 0.2857rem; + border-bottom-left-radius: 0.2857rem; +} + +.pagination-sm .page-item:last-child .page-link { + border-top-right-radius: 0.2857rem; + border-bottom-right-radius: 0.2857rem; +} + +.badge { + display: inline-block; + padding: 0.25rem 0.5rem; + font-size: 0.62475rem; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + .badge { + transition: none; + } +} + +a.badge:hover, a.badge:focus { + text-decoration: none; +} + +.badge:empty { + display: none; +} + +.btn .badge { + position: relative; + top: -1px; +} + +.badge-pill { + padding-right: 0.875em; + padding-left: 0.875em; + border-radius: 0.875rem; +} + +.badge-primary { + color: #ffffff; + background-color: #e14eca; +} + +a.badge-primary:hover, a.badge-primary:focus { + color: #ffffff; + background-color: #d725bb; +} + +a.badge-primary:focus, a.badge-primary.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(225, 78, 202, 0.5); +} + +.badge-secondary { + color: #212529; + background-color: #f4f5f7; +} + +a.badge-secondary:hover, a.badge-secondary:focus { + color: #212529; + background-color: #d6dae2; +} + +a.badge-secondary:focus, a.badge-secondary.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(244, 245, 247, 0.5); +} + +.badge-success { + color: #ffffff; + background-color: #00f2c3; +} + +a.badge-success:hover, a.badge-success:focus { + color: #ffffff; + background-color: #00bf9a; +} + +a.badge-success:focus, a.badge-success.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(0, 242, 195, 0.5); +} + +.badge-info { + color: #ffffff; + background-color: #1d8cf8; +} + +a.badge-info:hover, a.badge-info:focus { + color: #ffffff; + background-color: #0772db; +} + +a.badge-info:focus, a.badge-info.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(29, 140, 248, 0.5); +} + +.badge-warning { + color: #ffffff; + background-color: #ff8d72; +} + +a.badge-warning:hover, a.badge-warning:focus { + color: #ffffff; + background-color: #ff643f; +} + +a.badge-warning:focus, a.badge-warning.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(255, 141, 114, 0.5); +} + +.badge-danger { + color: #ffffff; + background-color: #fd5d93; +} + +a.badge-danger:hover, a.badge-danger:focus { + color: #ffffff; + background-color: #fc2b71; +} + +a.badge-danger:focus, a.badge-danger.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(253, 93, 147, 0.5); +} + +.badge-light { + color: #ffffff; + background-color: #adb5bd; +} + +a.badge-light:hover, a.badge-light:focus { + color: #ffffff; + background-color: #919ca6; +} + +a.badge-light:focus, a.badge-light.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(173, 181, 189, 0.5); +} + +.badge-dark { + color: #ffffff; + background-color: #212529; +} + +a.badge-dark:hover, a.badge-dark:focus { + color: #ffffff; + background-color: #0a0c0d; +} + +a.badge-dark:focus, a.badge-dark.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.5); +} + +.badge-default { + color: #ffffff; + background-color: #344675; +} + +a.badge-default:hover, a.badge-default:focus { + color: #ffffff; + background-color: #243152; +} + +a.badge-default:focus, a.badge-default.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(52, 70, 117, 0.5); +} + +.badge-white { + color: #212529; + background-color: #ffffff; +} + +a.badge-white:hover, a.badge-white:focus { + color: #212529; + background-color: #e6e6e6; +} + +a.badge-white:focus, a.badge-white.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); +} + +.badge-neutral { + color: #212529; + background-color: #ffffff; +} + +a.badge-neutral:hover, a.badge-neutral:focus { + color: #212529; + background-color: #e6e6e6; +} + +a.badge-neutral:focus, a.badge-neutral.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); +} + +.badge-darker { + color: #ffffff; + background-color: black; +} + +a.badge-darker:hover, a.badge-darker:focus { + color: #ffffff; + background-color: black; +} + +a.badge-darker:focus, a.badge-darker.focus { + outline: 0; + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); +} + +.jumbotron { + padding: 2rem 1rem; + margin-bottom: 2rem; + background-color: #e9ecef; + border-radius: 0.4285rem; +} + +@media (min-width: 576px) { + .jumbotron { + padding: 4rem 2rem; + } +} + +.jumbotron-fluid { + padding-right: 0; + padding-left: 0; + border-radius: 0; +} + +.alert { + position: relative; + padding: 0.9rem 1.25rem; + margin-bottom: 1rem; + border: 0.0625rem solid transparent; + border-radius: 0.2857rem; +} + +.alert-heading { + color: inherit; +} + +.alert-link { + font-weight: 600; +} + +.alert-dismissible { + padding-right: 3.8125rem; +} + +.alert-dismissible .close { + position: absolute; + top: 0; + right: 0; + padding: 0.9rem 1.25rem; + color: inherit; +} + +.alert-primary { + color: #e14eca; + background-color: #e66ad2; + border-color: #e66ad2; +} + +.alert-primary hr { + border-top-color: #e254cb; +} + +.alert-primary .alert-link { + color: #d725bb; +} + +.alert-secondary { + color: #f4f5f7; + background-color: #f6f7f8; + border-color: #f6f7f8; +} + +.alert-secondary hr { + border-top-color: #e8eaed; +} + +.alert-secondary .alert-link { + color: #d6dae2; +} + +.alert-success { + color: #00f2c3; + background-color: #29f4cd; + border-color: #29f4cd; +} + +.alert-success hr { + border-top-color: #11f3c7; +} + +.alert-success .alert-link { + color: #00bf9a; +} + +.alert-info { + color: #1d8cf8; + background-color: #419ef9; + border-color: #419ef9; +} + +.alert-info hr { + border-top-color: #2891f8; +} + +.alert-info .alert-link { + color: #0772db; +} + +.alert-warning { + color: #ff8d72; + background-color: #ff9f89; + border-color: #ff9f89; +} + +.alert-warning hr { + border-top-color: #ff8a70; +} + +.alert-warning .alert-link { + color: #ff643f; +} + +.alert-danger { + color: #fd5d93; + background-color: #fd77a4; + border-color: #fd77a4; +} + +.alert-danger hr { + border-top-color: #fd5e93; +} + +.alert-danger .alert-link { + color: #fc2b71; +} + +.alert-light { + color: #adb5bd; + background-color: #bac1c8; + border-color: #bac1c8; +} + +.alert-light hr { + border-top-color: #acb4bd; +} + +.alert-light .alert-link { + color: #919ca6; +} + +.alert-dark { + color: #212529; + background-color: #45484b; + border-color: #45484b; +} + +.alert-dark hr { + border-top-color: #393b3e; +} + +.alert-dark .alert-link { + color: #0a0c0d; +} + +.alert-default { + color: #344675; + background-color: #54648b; + border-color: #54648b; +} + +.alert-default hr { + border-top-color: #4a597b; +} + +.alert-default .alert-link { + color: #243152; +} + +.alert-white { + color: white; + background-color: white; + border-color: white; +} + +.alert-white hr { + border-top-color: #f2f2f2; +} + +.alert-white .alert-link { + color: #e6e6e6; +} + +.alert-neutral { + color: white; + background-color: white; + border-color: white; +} + +.alert-neutral hr { + border-top-color: #f2f2f2; +} + +.alert-neutral .alert-link { + color: #e6e6e6; +} + +.alert-darker { + color: black; + background-color: #292929; + border-color: #292929; +} + +.alert-darker hr { + border-top-color: #1c1c1c; +} + +.alert-darker .alert-link { + color: black; +} + +@keyframes progress-bar-stripes { + from { + background-position: 0.5rem 0; + } + to { + background-position: 0 0; + } +} + +.progress { + display: flex; + height: 0.5rem; + overflow: hidden; + font-size: 0.65625rem; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 0.875rem; + box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3); +} + +.progress-bar { + display: flex; + flex-direction: column; + justify-content: center; + color: #ffffff; + text-align: center; + white-space: nowrap; + background-color: #e14eca; + transition: width 0.6s ease; +} + +@media (prefers-reduced-motion: reduce) { + .progress-bar { + transition: none; + } +} + +.progress-bar-striped { + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 0.5rem 0.5rem; +} + +.progress-bar-animated { + animation: progress-bar-stripes 1s linear infinite; +} + +@media (prefers-reduced-motion: reduce) { + .progress-bar-animated { + animation: none; + } +} + +.media { + display: flex; + align-items: flex-start; +} + +.media-body { + flex: 1; +} + +.list-group { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; +} + +.list-group-item-action { + width: 100%; + color: #525f7f; + text-align: inherit; +} + +.list-group-item-action:hover, .list-group-item-action:focus { + z-index: 1; + color: #525f7f; + text-decoration: none; + background-color: #f6f9fc; +} + +.list-group-item-action:active { + color: #525f7f; + background-color: #e9ecef; +} + +.list-group-item { + position: relative; + display: block; + padding: 1rem 1rem; + margin-bottom: -0.0625rem; + background-color: #ffffff; + border: 0.0625rem solid #e9ecef; +} + +.list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +.list-group-item.disabled, .list-group-item:disabled { + color: #6c757d; + pointer-events: none; + background-color: #ffffff; +} + +.list-group-item.active { + z-index: 2; + color: #ffffff; + background-color: #e14eca; + border-color: #e14eca; +} + +.list-group-horizontal { + flex-direction: row; +} + +.list-group-horizontal .list-group-item { + margin-right: -0.0625rem; + margin-bottom: 0; +} + +.list-group-horizontal .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; +} + +.list-group-horizontal .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; +} + +@media (min-width: 576px) { + .list-group-horizontal-sm { + flex-direction: row; + } + .list-group-horizontal-sm .list-group-item { + margin-right: -0.0625rem; + margin-bottom: 0; + } + .list-group-horizontal-sm .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-sm .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } +} + +@media (min-width: 768px) { + .list-group-horizontal-md { + flex-direction: row; + } + .list-group-horizontal-md .list-group-item { + margin-right: -0.0625rem; + margin-bottom: 0; + } + .list-group-horizontal-md .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-md .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } +} + +@media (min-width: 992px) { + .list-group-horizontal-lg { + flex-direction: row; + } + .list-group-horizontal-lg .list-group-item { + margin-right: -0.0625rem; + margin-bottom: 0; + } + .list-group-horizontal-lg .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-lg .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } +} + +@media (min-width: 1200px) { + .list-group-horizontal-xl { + flex-direction: row; + } + .list-group-horizontal-xl .list-group-item { + margin-right: -0.0625rem; + margin-bottom: 0; + } + .list-group-horizontal-xl .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-xl .list-group-item:last-child { + margin-right: 0; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } +} + +.list-group-flush .list-group-item { + border-right: 0; + border-left: 0; + border-radius: 0; +} + +.list-group-flush .list-group-item:last-child { + margin-bottom: -0.0625rem; +} + +.list-group-flush:first-child .list-group-item:first-child { + border-top: 0; +} + +.list-group-flush:last-child .list-group-item:last-child { + margin-bottom: 0; + border-bottom: 0; +} + +.list-group-item-primary { + color: #853d89; + background-color: #f7cdf0; +} + +.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { + color: #853d89; + background-color: #f3b7e9; +} + +.list-group-item-primary.list-group-item-action.active { + color: #ffffff; + background-color: #853d89; + border-color: #853d89; +} + +.list-group-item-secondary { + color: #8f94a0; + background-color: #fcfcfd; +} + +.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { + color: #8f94a0; + background-color: #ededf3; +} + +.list-group-item-secondary.list-group-item-action.active { + color: #ffffff; + background-color: #8f94a0; + border-color: #8f94a0; +} + +.list-group-item-success { + color: #109285; + background-color: #b8fbee; +} + +.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { + color: #109285; + background-color: #a0fae8; +} + +.list-group-item-success.list-group-item-action.active { + color: #ffffff; + background-color: #109285; + border-color: #109285; +} + +.list-group-item-info { + color: #1f5da1; + background-color: #c0dffd; +} + +.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { + color: #1f5da1; + background-color: #a7d2fc; +} + +.list-group-item-info.list-group-item-action.active { + color: #ffffff; + background-color: #1f5da1; + border-color: #1f5da1; +} + +.list-group-item-warning { + color: #955d5b; + background-color: #ffdfd8; +} + +.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { + color: #955d5b; + background-color: #ffcabf; +} + +.list-group-item-warning.list-group-item-action.active { + color: #ffffff; + background-color: #955d5b; + border-color: #955d5b; +} + +.list-group-item-danger { + color: #94456c; + background-color: #fed2e1; +} + +.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { + color: #94456c; + background-color: #fdb9d0; +} + +.list-group-item-danger.list-group-item-action.active { + color: #ffffff; + background-color: #94456c; + border-color: #94456c; +} + +.list-group-item-light { + color: #6a7282; + background-color: #e8eaed; +} + +.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { + color: #6a7282; + background-color: #dadde2; +} + +.list-group-item-light.list-group-item-action.active { + color: #ffffff; + background-color: #6a7282; + border-color: #6a7282; +} + +.list-group-item-dark { + color: #212735; + background-color: #c1c2c3; +} + +.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { + color: #212735; + background-color: #b4b5b6; +} + +.list-group-item-dark.list-group-item-action.active { + color: #ffffff; + background-color: #212735; + border-color: #212735; +} + +.list-group-item-default { + color: #2b395d; + background-color: #c6cbd8; +} + +.list-group-item-default.list-group-item-action:hover, .list-group-item-default.list-group-item-action:focus { + color: #2b395d; + background-color: #b7bdce; +} + +.list-group-item-default.list-group-item-action.active { + color: #ffffff; + background-color: #2b395d; + border-color: #2b395d; +} + +.list-group-item-white { + color: #9599a4; + background-color: white; +} + +.list-group-item-white.list-group-item-action:hover, .list-group-item-white.list-group-item-action:focus { + color: #9599a4; + background-color: #f2f2f2; +} + +.list-group-item-white.list-group-item-action.active { + color: #ffffff; + background-color: #9599a4; + border-color: #9599a4; +} + +.list-group-item-neutral { + color: #9599a4; + background-color: white; +} + +.list-group-item-neutral.list-group-item-action:hover, .list-group-item-neutral.list-group-item-action:focus { + color: #9599a4; + background-color: #f2f2f2; +} + +.list-group-item-neutral.list-group-item-action.active { + color: #ffffff; + background-color: #9599a4; + border-color: #9599a4; +} + +.list-group-item-darker { + color: #101420; + background-color: #b8b8b8; +} + +.list-group-item-darker.list-group-item-action:hover, .list-group-item-darker.list-group-item-action:focus { + color: #101420; + background-color: #ababab; +} + +.list-group-item-darker.list-group-item-action.active { + color: #ffffff; + background-color: #101420; + border-color: #101420; +} + +.close { + float: right; + font-size: 1.3125rem; + font-weight: 600; + line-height: 1; + color: rgba(0, 0, 0, 0.6); + text-shadow: none; + opacity: .5; +} + +.close:hover { + color: rgba(0, 0, 0, 0.6); + text-decoration: none; +} + +.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { + opacity: .75; +} + +button.close { + padding: 0; + background-color: transparent; + border: 0; + appearance: none; +} + +a.close.disabled { + pointer-events: none; +} + +.modal-open { + overflow: hidden; +} + +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +.modal { + position: fixed; + top: 0; + left: 0; + z-index: 1050; + display: none; + width: 100%; + height: 100%; + overflow: hidden; + outline: 0; +} + +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +.modal.fade .modal-dialog { + transition: transform 0.3s ease-out; + transform: translate(0, -50px); +} + +@media (prefers-reduced-motion: reduce) { + .modal.fade .modal-dialog { + transition: none; + } +} + +.modal.show .modal-dialog { + transform: none; +} + +.modal-dialog-scrollable { + display: flex; + max-height: calc(100% - 1rem); +} + +.modal-dialog-scrollable .modal-content { + max-height: calc(100vh - 1rem); + overflow: hidden; +} + +.modal-dialog-scrollable .modal-header, +.modal-dialog-scrollable .modal-footer { + flex-shrink: 0; +} + +.modal-dialog-scrollable .modal-body { + overflow-y: auto; +} + +.modal-dialog-centered { + display: flex; + align-items: center; + min-height: calc(100% - 1rem); +} + +.modal-dialog-centered::before { + display: block; + height: calc(100vh - 1rem); + content: ""; +} + +.modal-dialog-centered.modal-dialog-scrollable { + flex-direction: column; + justify-content: center; + height: 100%; +} + +.modal-dialog-centered.modal-dialog-scrollable .modal-content { + max-height: none; +} + +.modal-dialog-centered.modal-dialog-scrollable::before { + content: none; +} + +.modal-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + pointer-events: auto; + background-color: #ffffff; + background-clip: padding-box; + border: 1px solid rgba(34, 42, 66, 0.2); + border-radius: 0.2857rem; + box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5); + outline: 0; +} + +.modal-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 1040; + width: 100vw; + height: 100vh; + background-color: #222a42; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop.show { + opacity: 0.16; +} + +.modal-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 24px 24px 0 24px; + border-bottom: 1px solid #e9ecef; + border-top-left-radius: 0.2857rem; + border-top-right-radius: 0.2857rem; +} + +.modal-header .close { + padding: 24px 24px 0 24px; + margin: -1rem -1rem -1rem auto; +} + +.modal-title { + margin-bottom: 0; + line-height: 1.1; +} + +.modal-body { + position: relative; + flex: 1 1 auto; + padding: 24px 24px 16px 24px; +} + +.modal-footer { + display: flex; + align-items: center; + justify-content: flex-end; + padding: 24px 24px 16px 24px; + border-top: 1px solid #e9ecef; + border-bottom-right-radius: 0.2857rem; + border-bottom-left-radius: 0.2857rem; +} + +.modal-footer > :not(:first-child) { + margin-left: .25rem; +} + +.modal-footer > :not(:last-child) { + margin-right: .25rem; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } + .modal-dialog-scrollable { + max-height: calc(100% - 3.5rem); + } + .modal-dialog-scrollable .modal-content { + max-height: calc(100vh - 3.5rem); + } + .modal-dialog-centered { + min-height: calc(100% - 3.5rem); + } + .modal-dialog-centered::before { + height: calc(100vh - 3.5rem); + } + .modal-content { + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.17); + } + .modal-sm { + max-width: 380px; + } +} + +@media (min-width: 992px) { + .modal-lg, + .modal-xl { + max-width: 800px; + } +} + +@media (min-width: 1200px) { + .modal-xl { + max-width: 1140px; + } +} + +.tooltip { + position: absolute; + z-index: 1070; + display: block; + margin: 0; + font-family: "Poppins", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.75rem; + word-wrap: break-word; + opacity: 0; +} + +.tooltip.show { + opacity: 0.9; +} + +.tooltip .arrow { + position: absolute; + display: block; + width: 0.8rem; + height: 0.4rem; +} + +.tooltip .arrow::before { + position: absolute; + content: ""; + border-color: transparent; + border-style: solid; +} + +.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] { + padding: 0.4rem 0; +} + +.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow { + bottom: 0; +} + +.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { + top: 0; + border-width: 0.4rem 0.4rem 0; + border-top-color: #ffffff; +} + +.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] { + padding: 0 0.4rem; +} + +.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow { + left: 0; + width: 0.4rem; + height: 0.8rem; +} + +.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { + right: 0; + border-width: 0.4rem 0.4rem 0.4rem 0; + border-right-color: #ffffff; +} + +.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] { + padding: 0.4rem 0; +} + +.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow { + top: 0; +} + +.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { + bottom: 0; + border-width: 0 0.4rem 0.4rem; + border-bottom-color: #ffffff; +} + +.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] { + padding: 0 0.4rem; +} + +.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow { + right: 0; + width: 0.4rem; + height: 0.8rem; +} + +.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { + left: 0; + border-width: 0.4rem 0 0.4rem 0.4rem; + border-left-color: #ffffff; +} + +.tooltip-inner { + max-width: 200px; + padding: 0.25rem 0.5rem; + color: #222a42; + text-align: center; + background-color: #ffffff; + border-radius: 0.25rem; +} + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: block; + max-width: 276px; + font-family: "Poppins", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + word-spacing: normal; + white-space: normal; + line-break: auto; + font-size: 0.75rem; + word-wrap: break-word; + background-color: #ffffff; + background-clip: padding-box; + border: 1px solid rgba(34, 42, 66, 0.05); + border-radius: 0.4285rem; + box-shadow: 0px 0.5rem 2rem 0px rgba(34, 42, 66, 0.2); +} + +.popover .arrow { + position: absolute; + display: block; + width: 1.5rem; + height: 0.75rem; + margin: 0 0.4285rem; +} + +.popover .arrow::before, .popover .arrow::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; +} + +.bs-popover-top, .bs-popover-auto[x-placement^="top"] { + margin-bottom: 0.75rem; +} + +.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow { + bottom: calc((0.75rem + 1px) * -1); +} + +.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before { + bottom: 0; + border-width: 0.75rem 0.75rem 0; + border-top-color: transparent; +} + +.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after { + bottom: 1px; + border-width: 0.75rem 0.75rem 0; + border-top-color: #ffffff; +} + +.bs-popover-right, .bs-popover-auto[x-placement^="right"] { + margin-left: 0.75rem; +} + +.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow { + left: calc((0.75rem + 1px) * -1); + width: 0.75rem; + height: 1.5rem; + margin: 0.4285rem 0; +} + +.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before { + left: 0; + border-width: 0.75rem 0.75rem 0.75rem 0; + border-right-color: transparent; +} + +.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after { + left: 1px; + border-width: 0.75rem 0.75rem 0.75rem 0; + border-right-color: #ffffff; +} + +.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { + margin-top: 0.75rem; +} + +.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow { + top: calc((0.75rem + 1px) * -1); +} + +.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { + top: 0; + border-width: 0 0.75rem 0.75rem 0.75rem; + border-bottom-color: transparent; +} + +.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { + top: 1px; + border-width: 0 0.75rem 0.75rem 0.75rem; + border-bottom-color: #ffffff; +} + +.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 1.5rem; + margin-left: -0.75rem; + content: ""; + border-bottom: 1px solid #ffffff; +} + +.bs-popover-left, .bs-popover-auto[x-placement^="left"] { + margin-right: 0.75rem; +} + +.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow { + right: calc((0.75rem + 1px) * -1); + width: 0.75rem; + height: 1.5rem; + margin: 0.4285rem 0; +} + +.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before { + right: 0; + border-width: 0.75rem 0 0.75rem 0.75rem; + border-left-color: transparent; +} + +.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after { + right: 1px; + border-width: 0.75rem 0 0.75rem 0.75rem; + border-left-color: #ffffff; +} + +.popover-header { + padding: 0.75rem 0.75rem; + margin-bottom: 0; + font-size: 0.875rem; + color: #32325d; + background-color: #ffffff; + border-bottom: 1px solid #f2f2f2; + border-top-left-radius: calc(0.4285rem - 1px); + border-top-right-radius: calc(0.4285rem - 1px); +} + +.popover-header:empty { + display: none; +} + +.popover-body { + padding: 0.75rem 0.75rem; + color: #525f7f; +} + +.carousel { + position: relative; +} + +.carousel.pointer-event { + touch-action: pan-y; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} + +.carousel-inner::after { + display: block; + clear: both; + content: ""; +} + +.carousel-item { + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + backface-visibility: hidden; + transition: transform 0.6s ease-in-out; +} + +@media (prefers-reduced-motion: reduce) { + .carousel-item { + transition: none; + } +} + +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; +} + +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + transform: translateX(100%); +} + +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + transform: translateX(-100%); +} + +.carousel-fade .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; +} + +.carousel-fade .carousel-item.active, +.carousel-fade .carousel-item-next.carousel-item-left, +.carousel-fade .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; +} + +.carousel-fade .active.carousel-item-left, +.carousel-fade .active.carousel-item-right { + z-index: 0; + opacity: 0; + transition: 0s 0.6s opacity; +} + +@media (prefers-reduced-motion: reduce) { + .carousel-fade .active.carousel-item-left, + .carousel-fade .active.carousel-item-right { + transition: none; + } +} + +.carousel-control-prev, +.carousel-control-next { + position: absolute; + top: 0; + bottom: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: 15%; + color: #ffffff; + text-align: center; + opacity: 0.5; + transition: opacity 0.15s ease; +} + +@media (prefers-reduced-motion: reduce) { + .carousel-control-prev, + .carousel-control-next { + transition: none; + } +} + +.carousel-control-prev:hover, .carousel-control-prev:focus, +.carousel-control-next:hover, +.carousel-control-next:focus { + color: #ffffff; + text-decoration: none; + outline: 0; + opacity: 0.9; +} + +.carousel-control-prev { + left: 0; +} + +.carousel-control-next { + right: 0; +} + +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: 20px; + height: 20px; + background: no-repeat 50% / 100% 100%; +} + +.carousel-control-prev-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"); +} + +.carousel-control-next-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); +} + +.carousel-indicators { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 15; + display: flex; + justify-content: center; + padding-left: 0; + margin-right: 15%; + margin-left: 15%; + list-style: none; +} + +.carousel-indicators li { + box-sizing: content-box; + flex: 0 1 auto; + width: 30px; + height: 3px; + margin-right: 3px; + margin-left: 3px; + text-indent: -999px; + cursor: pointer; + background-color: #ffffff; + background-clip: padding-box; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + opacity: .5; + transition: opacity 0.6s ease; +} + +@media (prefers-reduced-motion: reduce) { + .carousel-indicators li { + transition: none; + } +} + +.carousel-indicators .active { + opacity: 1; +} + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #ffffff; + text-align: center; +} + +.align-baseline { + vertical-align: baseline !important; +} + +.align-top { + vertical-align: top !important; +} + +.align-middle { + vertical-align: middle !important; +} + +.align-bottom { + vertical-align: bottom !important; +} + +.align-text-bottom { + vertical-align: text-bottom !important; +} + +.align-text-top { + vertical-align: text-top !important; +} + +.bg-primary { + background-color: #e14eca !important; +} + +a.bg-primary:hover, a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: #d725bb !important; +} + +.bg-secondary { + background-color: #f4f5f7 !important; +} + +a.bg-secondary:hover, a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: #d6dae2 !important; +} + +.bg-success { + background-color: #00f2c3 !important; +} + +a.bg-success:hover, a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: #00bf9a !important; +} + +.bg-info { + background-color: #1d8cf8 !important; +} + +a.bg-info:hover, a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: #0772db !important; +} + +.bg-warning { + background-color: #ff8d72 !important; +} + +a.bg-warning:hover, a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: #ff643f !important; +} + +.bg-danger { + background-color: #fd5d93 !important; +} + +a.bg-danger:hover, a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: #fc2b71 !important; +} + +.bg-light { + background-color: #adb5bd !important; +} + +a.bg-light:hover, a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: #919ca6 !important; +} + +.bg-dark { + background-color: #212529 !important; +} + +a.bg-dark:hover, a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { + background-color: #0a0c0d !important; +} + +.bg-default { + background-color: #344675 !important; +} + +a.bg-default:hover, a.bg-default:focus, +button.bg-default:hover, +button.bg-default:focus { + background-color: #243152 !important; +} + +.bg-white { + background-color: #ffffff !important; +} + +a.bg-white:hover, a.bg-white:focus, +button.bg-white:hover, +button.bg-white:focus { + background-color: #e6e6e6 !important; +} + +.bg-neutral { + background-color: #ffffff !important; +} + +a.bg-neutral:hover, a.bg-neutral:focus, +button.bg-neutral:hover, +button.bg-neutral:focus { + background-color: #e6e6e6 !important; +} + +.bg-darker { + background-color: black !important; +} + +a.bg-darker:hover, a.bg-darker:focus, +button.bg-darker:hover, +button.bg-darker:focus { + background-color: black !important; +} + +.bg-white { + background-color: #ffffff !important; +} + +.bg-transparent { + background-color: transparent !important; +} + +.border { + border: 0.0625rem solid #e9ecef !important; +} + +.border-top { + border-top: 0.0625rem solid #e9ecef !important; +} + +.border-right { + border-right: 0.0625rem solid #e9ecef !important; +} + +.border-bottom { + border-bottom: 0.0625rem solid #e9ecef !important; +} + +.border-left { + border-left: 0.0625rem solid #e9ecef !important; +} + +.border-0 { + border: 0 !important; +} + +.border-top-0 { + border-top: 0 !important; +} + +.border-right-0 { + border-right: 0 !important; +} + +.border-bottom-0 { + border-bottom: 0 !important; +} + +.border-left-0 { + border-left: 0 !important; +} + +.border-primary { + border-color: #e14eca !important; +} + +.border-secondary { + border-color: #f4f5f7 !important; +} + +.border-success { + border-color: #00f2c3 !important; +} + +.border-info { + border-color: #1d8cf8 !important; +} + +.border-warning { + border-color: #ff8d72 !important; +} + +.border-danger { + border-color: #fd5d93 !important; +} + +.border-light { + border-color: #adb5bd !important; +} + +.border-dark { + border-color: #212529 !important; +} + +.border-default { + border-color: #344675 !important; +} + +.border-white { + border-color: #ffffff !important; +} + +.border-neutral { + border-color: #ffffff !important; +} + +.border-darker { + border-color: black !important; +} + +.border-white { + border-color: #ffffff !important; +} + +.rounded-sm { + border-radius: 0.2857rem !important; +} + +.rounded { + border-radius: 0.25rem !important; +} + +.rounded-top { + border-top-left-radius: 0.25rem !important; + border-top-right-radius: 0.25rem !important; +} + +.rounded-right { + border-top-right-radius: 0.25rem !important; + border-bottom-right-radius: 0.25rem !important; +} + +.rounded-bottom { + border-bottom-right-radius: 0.25rem !important; + border-bottom-left-radius: 0.25rem !important; +} + +.rounded-left { + border-top-left-radius: 0.25rem !important; + border-bottom-left-radius: 0.25rem !important; +} + +.rounded-lg { + border-radius: 0.4285rem !important; +} + +.rounded-circle { + border-radius: 50% !important; +} + +.rounded-pill { + border-radius: 50rem !important; +} + +.rounded-0 { + border-radius: 0 !important; +} + +.clearfix::after { + display: block; + clear: both; + content: ""; +} + +.d-none { + display: none !important; +} + +.d-inline { + display: inline !important; +} + +.d-inline-block { + display: inline-block !important; +} + +.d-block { + display: block !important; +} + +.d-table { + display: table !important; +} + +.d-table-row { + display: table-row !important; +} + +.d-table-cell { + display: table-cell !important; +} + +.d-flex { + display: flex !important; +} + +.d-inline-flex { + display: inline-flex !important; +} + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; + } + .d-sm-inline { + display: inline !important; + } + .d-sm-inline-block { + display: inline-block !important; + } + .d-sm-block { + display: block !important; + } + .d-sm-table { + display: table !important; + } + .d-sm-table-row { + display: table-row !important; + } + .d-sm-table-cell { + display: table-cell !important; + } + .d-sm-flex { + display: flex !important; + } + .d-sm-inline-flex { + display: inline-flex !important; + } +} + +@media (min-width: 768px) { + .d-md-none { + display: none !important; + } + .d-md-inline { + display: inline !important; + } + .d-md-inline-block { + display: inline-block !important; + } + .d-md-block { + display: block !important; + } + .d-md-table { + display: table !important; + } + .d-md-table-row { + display: table-row !important; + } + .d-md-table-cell { + display: table-cell !important; + } + .d-md-flex { + display: flex !important; + } + .d-md-inline-flex { + display: inline-flex !important; + } +} + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; + } + .d-lg-inline { + display: inline !important; + } + .d-lg-inline-block { + display: inline-block !important; + } + .d-lg-block { + display: block !important; + } + .d-lg-table { + display: table !important; + } + .d-lg-table-row { + display: table-row !important; + } + .d-lg-table-cell { + display: table-cell !important; + } + .d-lg-flex { + display: flex !important; + } + .d-lg-inline-flex { + display: inline-flex !important; + } +} + +@media (min-width: 1200px) { + .d-xl-none { + display: none !important; + } + .d-xl-inline { + display: inline !important; + } + .d-xl-inline-block { + display: inline-block !important; + } + .d-xl-block { + display: block !important; + } + .d-xl-table { + display: table !important; + } + .d-xl-table-row { + display: table-row !important; + } + .d-xl-table-cell { + display: table-cell !important; + } + .d-xl-flex { + display: flex !important; + } + .d-xl-inline-flex { + display: inline-flex !important; + } +} + +@media print { + .d-print-none { + display: none !important; + } + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: flex !important; + } + .d-print-inline-flex { + display: inline-flex !important; + } +} + +.embed-responsive { + position: relative; + display: block; + width: 100%; + padding: 0; + overflow: hidden; +} + +.embed-responsive::before { + display: block; + content: ""; +} + +.embed-responsive .embed-responsive-item, +.embed-responsive iframe, +.embed-responsive embed, +.embed-responsive object, +.embed-responsive video { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; +} + +.embed-responsive-21by9::before { + padding-top: 42.857143%; +} + +.embed-responsive-16by9::before { + padding-top: 56.25%; +} + +.embed-responsive-4by3::before { + padding-top: 75%; +} + +.embed-responsive-1by1::before { + padding-top: 100%; +} + +.flex-row { + flex-direction: row !important; +} + +.flex-column { + flex-direction: column !important; +} + +.flex-row-reverse { + flex-direction: row-reverse !important; +} + +.flex-column-reverse { + flex-direction: column-reverse !important; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.flex-nowrap { + flex-wrap: nowrap !important; +} + +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} + +.flex-fill { + flex: 1 1 auto !important; +} + +.flex-grow-0 { + flex-grow: 0 !important; +} + +.flex-grow-1 { + flex-grow: 1 !important; +} + +.flex-shrink-0 { + flex-shrink: 0 !important; +} + +.flex-shrink-1 { + flex-shrink: 1 !important; +} + +.justify-content-start { + justify-content: flex-start !important; +} + +.justify-content-end { + justify-content: flex-end !important; +} + +.justify-content-center { + justify-content: center !important; +} + +.justify-content-between { + justify-content: space-between !important; +} + +.justify-content-around { + justify-content: space-around !important; +} + +.align-items-start { + align-items: flex-start !important; +} + +.align-items-end { + align-items: flex-end !important; +} + +.align-items-center { + align-items: center !important; +} + +.align-items-baseline { + align-items: baseline !important; +} + +.align-items-stretch { + align-items: stretch !important; +} + +.align-content-start { + align-content: flex-start !important; +} + +.align-content-end { + align-content: flex-end !important; +} + +.align-content-center { + align-content: center !important; +} + +.align-content-between { + align-content: space-between !important; +} + +.align-content-around { + align-content: space-around !important; +} + +.align-content-stretch { + align-content: stretch !important; +} + +.align-self-auto { + align-self: auto !important; +} + +.align-self-start { + align-self: flex-start !important; +} + +.align-self-end { + align-self: flex-end !important; +} + +.align-self-center { + align-self: center !important; +} + +.align-self-baseline { + align-self: baseline !important; +} + +.align-self-stretch { + align-self: stretch !important; +} + +@media (min-width: 576px) { + .flex-sm-row { + flex-direction: row !important; + } + .flex-sm-column { + flex-direction: column !important; + } + .flex-sm-row-reverse { + flex-direction: row-reverse !important; + } + .flex-sm-column-reverse { + flex-direction: column-reverse !important; + } + .flex-sm-wrap { + flex-wrap: wrap !important; + } + .flex-sm-nowrap { + flex-wrap: nowrap !important; + } + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-sm-fill { + flex: 1 1 auto !important; + } + .flex-sm-grow-0 { + flex-grow: 0 !important; + } + .flex-sm-grow-1 { + flex-grow: 1 !important; + } + .flex-sm-shrink-0 { + flex-shrink: 0 !important; + } + .flex-sm-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-sm-start { + justify-content: flex-start !important; + } + .justify-content-sm-end { + justify-content: flex-end !important; + } + .justify-content-sm-center { + justify-content: center !important; + } + .justify-content-sm-between { + justify-content: space-between !important; + } + .justify-content-sm-around { + justify-content: space-around !important; + } + .align-items-sm-start { + align-items: flex-start !important; + } + .align-items-sm-end { + align-items: flex-end !important; + } + .align-items-sm-center { + align-items: center !important; + } + .align-items-sm-baseline { + align-items: baseline !important; + } + .align-items-sm-stretch { + align-items: stretch !important; + } + .align-content-sm-start { + align-content: flex-start !important; + } + .align-content-sm-end { + align-content: flex-end !important; + } + .align-content-sm-center { + align-content: center !important; + } + .align-content-sm-between { + align-content: space-between !important; + } + .align-content-sm-around { + align-content: space-around !important; + } + .align-content-sm-stretch { + align-content: stretch !important; + } + .align-self-sm-auto { + align-self: auto !important; + } + .align-self-sm-start { + align-self: flex-start !important; + } + .align-self-sm-end { + align-self: flex-end !important; + } + .align-self-sm-center { + align-self: center !important; + } + .align-self-sm-baseline { + align-self: baseline !important; + } + .align-self-sm-stretch { + align-self: stretch !important; + } +} + +@media (min-width: 768px) { + .flex-md-row { + flex-direction: row !important; + } + .flex-md-column { + flex-direction: column !important; + } + .flex-md-row-reverse { + flex-direction: row-reverse !important; + } + .flex-md-column-reverse { + flex-direction: column-reverse !important; + } + .flex-md-wrap { + flex-wrap: wrap !important; + } + .flex-md-nowrap { + flex-wrap: nowrap !important; + } + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-md-fill { + flex: 1 1 auto !important; + } + .flex-md-grow-0 { + flex-grow: 0 !important; + } + .flex-md-grow-1 { + flex-grow: 1 !important; + } + .flex-md-shrink-0 { + flex-shrink: 0 !important; + } + .flex-md-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-md-start { + justify-content: flex-start !important; + } + .justify-content-md-end { + justify-content: flex-end !important; + } + .justify-content-md-center { + justify-content: center !important; + } + .justify-content-md-between { + justify-content: space-between !important; + } + .justify-content-md-around { + justify-content: space-around !important; + } + .align-items-md-start { + align-items: flex-start !important; + } + .align-items-md-end { + align-items: flex-end !important; + } + .align-items-md-center { + align-items: center !important; + } + .align-items-md-baseline { + align-items: baseline !important; + } + .align-items-md-stretch { + align-items: stretch !important; + } + .align-content-md-start { + align-content: flex-start !important; + } + .align-content-md-end { + align-content: flex-end !important; + } + .align-content-md-center { + align-content: center !important; + } + .align-content-md-between { + align-content: space-between !important; + } + .align-content-md-around { + align-content: space-around !important; + } + .align-content-md-stretch { + align-content: stretch !important; + } + .align-self-md-auto { + align-self: auto !important; + } + .align-self-md-start { + align-self: flex-start !important; + } + .align-self-md-end { + align-self: flex-end !important; + } + .align-self-md-center { + align-self: center !important; + } + .align-self-md-baseline { + align-self: baseline !important; + } + .align-self-md-stretch { + align-self: stretch !important; + } +} + +@media (min-width: 992px) { + .flex-lg-row { + flex-direction: row !important; + } + .flex-lg-column { + flex-direction: column !important; + } + .flex-lg-row-reverse { + flex-direction: row-reverse !important; + } + .flex-lg-column-reverse { + flex-direction: column-reverse !important; + } + .flex-lg-wrap { + flex-wrap: wrap !important; + } + .flex-lg-nowrap { + flex-wrap: nowrap !important; + } + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-lg-fill { + flex: 1 1 auto !important; + } + .flex-lg-grow-0 { + flex-grow: 0 !important; + } + .flex-lg-grow-1 { + flex-grow: 1 !important; + } + .flex-lg-shrink-0 { + flex-shrink: 0 !important; + } + .flex-lg-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-lg-start { + justify-content: flex-start !important; + } + .justify-content-lg-end { + justify-content: flex-end !important; + } + .justify-content-lg-center { + justify-content: center !important; + } + .justify-content-lg-between { + justify-content: space-between !important; + } + .justify-content-lg-around { + justify-content: space-around !important; + } + .align-items-lg-start { + align-items: flex-start !important; + } + .align-items-lg-end { + align-items: flex-end !important; + } + .align-items-lg-center { + align-items: center !important; + } + .align-items-lg-baseline { + align-items: baseline !important; + } + .align-items-lg-stretch { + align-items: stretch !important; + } + .align-content-lg-start { + align-content: flex-start !important; + } + .align-content-lg-end { + align-content: flex-end !important; + } + .align-content-lg-center { + align-content: center !important; + } + .align-content-lg-between { + align-content: space-between !important; + } + .align-content-lg-around { + align-content: space-around !important; + } + .align-content-lg-stretch { + align-content: stretch !important; + } + .align-self-lg-auto { + align-self: auto !important; + } + .align-self-lg-start { + align-self: flex-start !important; + } + .align-self-lg-end { + align-self: flex-end !important; + } + .align-self-lg-center { + align-self: center !important; + } + .align-self-lg-baseline { + align-self: baseline !important; + } + .align-self-lg-stretch { + align-self: stretch !important; + } +} + +@media (min-width: 1200px) { + .flex-xl-row { + flex-direction: row !important; + } + .flex-xl-column { + flex-direction: column !important; + } + .flex-xl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xl-wrap { + flex-wrap: wrap !important; + } + .flex-xl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex-xl-fill { + flex: 1 1 auto !important; + } + .flex-xl-grow-0 { + flex-grow: 0 !important; + } + .flex-xl-grow-1 { + flex-grow: 1 !important; + } + .flex-xl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xl-shrink-1 { + flex-shrink: 1 !important; + } + .justify-content-xl-start { + justify-content: flex-start !important; + } + .justify-content-xl-end { + justify-content: flex-end !important; + } + .justify-content-xl-center { + justify-content: center !important; + } + .justify-content-xl-between { + justify-content: space-between !important; + } + .justify-content-xl-around { + justify-content: space-around !important; + } + .align-items-xl-start { + align-items: flex-start !important; + } + .align-items-xl-end { + align-items: flex-end !important; + } + .align-items-xl-center { + align-items: center !important; + } + .align-items-xl-baseline { + align-items: baseline !important; + } + .align-items-xl-stretch { + align-items: stretch !important; + } + .align-content-xl-start { + align-content: flex-start !important; + } + .align-content-xl-end { + align-content: flex-end !important; + } + .align-content-xl-center { + align-content: center !important; + } + .align-content-xl-between { + align-content: space-between !important; + } + .align-content-xl-around { + align-content: space-around !important; + } + .align-content-xl-stretch { + align-content: stretch !important; + } + .align-self-xl-auto { + align-self: auto !important; + } + .align-self-xl-start { + align-self: flex-start !important; + } + .align-self-xl-end { + align-self: flex-end !important; + } + .align-self-xl-center { + align-self: center !important; + } + .align-self-xl-baseline { + align-self: baseline !important; + } + .align-self-xl-stretch { + align-self: stretch !important; + } +} + +.float-left { + float: left !important; +} + +.float-right { + float: right !important; +} + +.float-none { + float: none !important; +} + +@media (min-width: 576px) { + .float-sm-left { + float: left !important; + } + .float-sm-right { + float: right !important; + } + .float-sm-none { + float: none !important; + } +} + +@media (min-width: 768px) { + .float-md-left { + float: left !important; + } + .float-md-right { + float: right !important; + } + .float-md-none { + float: none !important; + } +} + +@media (min-width: 992px) { + .float-lg-left { + float: left !important; + } + .float-lg-right { + float: right !important; + } + .float-lg-none { + float: none !important; + } +} + +@media (min-width: 1200px) { + .float-xl-left { + float: left !important; + } + .float-xl-right { + float: right !important; + } + .float-xl-none { + float: none !important; + } +} + +.overflow-auto { + overflow: auto !important; +} + +.overflow-hidden { + overflow: hidden !important; +} + +.position-static { + position: static !important; +} + +.position-relative { + position: relative !important; +} + +.position-absolute { + position: absolute !important; +} + +.position-fixed { + position: fixed !important; +} + +.position-sticky { + position: sticky !important; +} + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; +} + +@supports (position: sticky) { + .sticky-top { + position: sticky; + top: 0; + z-index: 1020; + } +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; +} + +.shadow-sm { + box-shadow: 0 0.125rem 0.25rem rgba(34, 42, 66, 0.075) !important; +} + +.shadow { + box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1) !important; +} + +.shadow-lg { + box-shadow: 0 1rem 3rem rgba(34, 42, 66, 0.175) !important; +} + +.shadow-none { + box-shadow: none !important; +} + +.w-25 { + width: 25% !important; +} + +.w-50 { + width: 50% !important; +} + +.w-75 { + width: 75% !important; +} + +.w-100 { + width: 100% !important; +} + +.w-auto { + width: auto !important; +} + +.h-25 { + height: 25% !important; +} + +.h-50 { + height: 50% !important; +} + +.h-75 { + height: 75% !important; +} + +.h-100 { + height: 100% !important; +} + +.h-auto { + height: auto !important; +} + +.mw-100 { + max-width: 100% !important; +} + +.mh-100 { + max-height: 100% !important; +} + +.min-vw-100 { + min-width: 100vw !important; +} + +.min-vh-100 { + min-height: 100vh !important; +} + +.vw-100 { + width: 100vw !important; +} + +.vh-100 { + height: 100vh !important; +} + +.stretched-link::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + pointer-events: auto; + content: ""; + background-color: rgba(0, 0, 0, 0); +} + +.m-0 { + margin: 0 !important; +} + +.mt-0, +.my-0 { + margin-top: 0 !important; +} + +.mr-0, +.mx-0 { + margin-right: 0 !important; +} + +.mb-0, +.my-0 { + margin-bottom: 0 !important; +} + +.ml-0, +.mx-0 { + margin-left: 0 !important; +} + +.m-1 { + margin: 0.25rem !important; +} + +.mt-1, +.my-1 { + margin-top: 0.25rem !important; +} + +.mr-1, +.mx-1 { + margin-right: 0.25rem !important; +} + +.mb-1, +.my-1 { + margin-bottom: 0.25rem !important; +} + +.ml-1, +.mx-1 { + margin-left: 0.25rem !important; +} + +.m-2 { + margin: 0.5rem !important; +} + +.mt-2, +.my-2 { + margin-top: 0.5rem !important; +} + +.mr-2, +.mx-2 { + margin-right: 0.5rem !important; +} + +.mb-2, +.my-2 { + margin-bottom: 0.5rem !important; +} + +.ml-2, +.mx-2 { + margin-left: 0.5rem !important; +} + +.m-3 { + margin: 1rem !important; +} + +.mt-3, +.my-3 { + margin-top: 1rem !important; +} + +.mr-3, +.mx-3 { + margin-right: 1rem !important; +} + +.mb-3, +.my-3 { + margin-bottom: 1rem !important; +} + +.ml-3, +.mx-3 { + margin-left: 1rem !important; +} + +.m-4 { + margin: 1.5rem !important; +} + +.mt-4, +.my-4 { + margin-top: 1.5rem !important; +} + +.mr-4, +.mx-4 { + margin-right: 1.5rem !important; +} + +.mb-4, +.my-4 { + margin-bottom: 1.5rem !important; +} + +.ml-4, +.mx-4 { + margin-left: 1.5rem !important; +} + +.m-5 { + margin: 3rem !important; +} + +.mt-5, +.my-5 { + margin-top: 3rem !important; +} + +.mr-5, +.mx-5 { + margin-right: 3rem !important; +} + +.mb-5, +.my-5 { + margin-bottom: 3rem !important; +} + +.ml-5, +.mx-5 { + margin-left: 3rem !important; +} + +.m-sm { + margin: 2rem !important; +} + +.mt-sm, +.my-sm { + margin-top: 2rem !important; +} + +.mr-sm, +.mx-sm { + margin-right: 2rem !important; +} + +.mb-sm, +.my-sm { + margin-bottom: 2rem !important; +} + +.ml-sm, +.mx-sm { + margin-left: 2rem !important; +} + +.m-md { + margin: 4rem !important; +} + +.mt-md, +.my-md { + margin-top: 4rem !important; +} + +.mr-md, +.mx-md { + margin-right: 4rem !important; +} + +.mb-md, +.my-md { + margin-bottom: 4rem !important; +} + +.ml-md, +.mx-md { + margin-left: 4rem !important; +} + +.m-lg { + margin: 6rem !important; +} + +.mt-lg, +.my-lg { + margin-top: 6rem !important; +} + +.mr-lg, +.mx-lg { + margin-right: 6rem !important; +} + +.mb-lg, +.my-lg { + margin-bottom: 6rem !important; +} + +.ml-lg, +.mx-lg { + margin-left: 6rem !important; +} + +.m-xl { + margin: 8rem !important; +} + +.mt-xl, +.my-xl { + margin-top: 8rem !important; +} + +.mr-xl, +.mx-xl { + margin-right: 8rem !important; +} + +.mb-xl, +.my-xl { + margin-bottom: 8rem !important; +} + +.ml-xl, +.mx-xl { + margin-left: 8rem !important; +} + +.p-0 { + padding: 0 !important; +} + +.pt-0, +.py-0 { + padding-top: 0 !important; +} + +.pr-0, +.px-0 { + padding-right: 0 !important; +} + +.pb-0, +.py-0 { + padding-bottom: 0 !important; +} + +.pl-0, +.px-0 { + padding-left: 0 !important; +} + +.p-1 { + padding: 0.25rem !important; +} + +.pt-1, +.py-1 { + padding-top: 0.25rem !important; +} + +.pr-1, +.px-1 { + padding-right: 0.25rem !important; +} + +.pb-1, +.py-1 { + padding-bottom: 0.25rem !important; +} + +.pl-1, +.px-1 { + padding-left: 0.25rem !important; +} + +.p-2 { + padding: 0.5rem !important; +} + +.pt-2, +.py-2 { + padding-top: 0.5rem !important; +} + +.pr-2, +.px-2 { + padding-right: 0.5rem !important; +} + +.pb-2, +.py-2 { + padding-bottom: 0.5rem !important; +} + +.pl-2, +.px-2 { + padding-left: 0.5rem !important; +} + +.p-3 { + padding: 1rem !important; +} + +.pt-3, +.py-3 { + padding-top: 1rem !important; +} + +.pr-3, +.px-3 { + padding-right: 1rem !important; +} + +.pb-3, +.py-3 { + padding-bottom: 1rem !important; +} + +.pl-3, +.px-3 { + padding-left: 1rem !important; +} + +.p-4 { + padding: 1.5rem !important; +} + +.pt-4, +.py-4 { + padding-top: 1.5rem !important; +} + +.pr-4, +.px-4 { + padding-right: 1.5rem !important; +} + +.pb-4, +.py-4 { + padding-bottom: 1.5rem !important; +} + +.pl-4, +.px-4 { + padding-left: 1.5rem !important; +} + +.p-5 { + padding: 3rem !important; +} + +.pt-5, +.py-5 { + padding-top: 3rem !important; +} + +.pr-5, +.px-5 { + padding-right: 3rem !important; +} + +.pb-5, +.py-5 { + padding-bottom: 3rem !important; +} + +.pl-5, +.px-5 { + padding-left: 3rem !important; +} + +.p-sm { + padding: 2rem !important; +} + +.pt-sm, +.py-sm { + padding-top: 2rem !important; +} + +.pr-sm, +.px-sm { + padding-right: 2rem !important; +} + +.pb-sm, +.py-sm { + padding-bottom: 2rem !important; +} + +.pl-sm, +.px-sm { + padding-left: 2rem !important; +} + +.p-md { + padding: 4rem !important; +} + +.pt-md, +.py-md { + padding-top: 4rem !important; +} + +.pr-md, +.px-md { + padding-right: 4rem !important; +} + +.pb-md, +.py-md { + padding-bottom: 4rem !important; +} + +.pl-md, +.px-md { + padding-left: 4rem !important; +} + +.p-lg { + padding: 6rem !important; +} + +.pt-lg, +.py-lg { + padding-top: 6rem !important; +} + +.pr-lg, +.px-lg { + padding-right: 6rem !important; +} + +.pb-lg, +.py-lg { + padding-bottom: 6rem !important; +} + +.pl-lg, +.px-lg { + padding-left: 6rem !important; +} + +.p-xl { + padding: 8rem !important; +} + +.pt-xl, +.py-xl { + padding-top: 8rem !important; +} + +.pr-xl, +.px-xl { + padding-right: 8rem !important; +} + +.pb-xl, +.py-xl { + padding-bottom: 8rem !important; +} + +.pl-xl, +.px-xl { + padding-left: 8rem !important; +} + +.m-n1 { + margin: -0.25rem !important; +} + +.mt-n1, +.my-n1 { + margin-top: -0.25rem !important; +} + +.mr-n1, +.mx-n1 { + margin-right: -0.25rem !important; +} + +.mb-n1, +.my-n1 { + margin-bottom: -0.25rem !important; +} + +.ml-n1, +.mx-n1 { + margin-left: -0.25rem !important; +} + +.m-n2 { + margin: -0.5rem !important; +} + +.mt-n2, +.my-n2 { + margin-top: -0.5rem !important; +} + +.mr-n2, +.mx-n2 { + margin-right: -0.5rem !important; +} + +.mb-n2, +.my-n2 { + margin-bottom: -0.5rem !important; +} + +.ml-n2, +.mx-n2 { + margin-left: -0.5rem !important; +} + +.m-n3 { + margin: -1rem !important; +} + +.mt-n3, +.my-n3 { + margin-top: -1rem !important; +} + +.mr-n3, +.mx-n3 { + margin-right: -1rem !important; +} + +.mb-n3, +.my-n3 { + margin-bottom: -1rem !important; +} + +.ml-n3, +.mx-n3 { + margin-left: -1rem !important; +} + +.m-n4 { + margin: -1.5rem !important; +} + +.mt-n4, +.my-n4 { + margin-top: -1.5rem !important; +} + +.mr-n4, +.mx-n4 { + margin-right: -1.5rem !important; +} + +.mb-n4, +.my-n4 { + margin-bottom: -1.5rem !important; +} + +.ml-n4, +.mx-n4 { + margin-left: -1.5rem !important; +} + +.m-n5 { + margin: -3rem !important; +} + +.mt-n5, +.my-n5 { + margin-top: -3rem !important; +} + +.mr-n5, +.mx-n5 { + margin-right: -3rem !important; +} + +.mb-n5, +.my-n5 { + margin-bottom: -3rem !important; +} + +.ml-n5, +.mx-n5 { + margin-left: -3rem !important; +} + +.m-nsm { + margin: -2rem !important; +} + +.mt-nsm, +.my-nsm { + margin-top: -2rem !important; +} + +.mr-nsm, +.mx-nsm { + margin-right: -2rem !important; +} + +.mb-nsm, +.my-nsm { + margin-bottom: -2rem !important; +} + +.ml-nsm, +.mx-nsm { + margin-left: -2rem !important; +} + +.m-nmd { + margin: -4rem !important; +} + +.mt-nmd, +.my-nmd { + margin-top: -4rem !important; +} + +.mr-nmd, +.mx-nmd { + margin-right: -4rem !important; +} + +.mb-nmd, +.my-nmd { + margin-bottom: -4rem !important; +} + +.ml-nmd, +.mx-nmd { + margin-left: -4rem !important; +} + +.m-nlg { + margin: -6rem !important; +} + +.mt-nlg, +.my-nlg { + margin-top: -6rem !important; +} + +.mr-nlg, +.mx-nlg { + margin-right: -6rem !important; +} + +.mb-nlg, +.my-nlg { + margin-bottom: -6rem !important; +} + +.ml-nlg, +.mx-nlg { + margin-left: -6rem !important; +} + +.m-nxl { + margin: -8rem !important; +} + +.mt-nxl, +.my-nxl { + margin-top: -8rem !important; +} + +.mr-nxl, +.mx-nxl { + margin-right: -8rem !important; +} + +.mb-nxl, +.my-nxl { + margin-bottom: -8rem !important; +} + +.ml-nxl, +.mx-nxl { + margin-left: -8rem !important; +} + +.m-auto { + margin: auto !important; +} + +.mt-auto, +.my-auto { + margin-top: auto !important; +} + +.mr-auto, +.mx-auto { + margin-right: auto !important; +} + +.mb-auto, +.my-auto { + margin-bottom: auto !important; +} + +.ml-auto, +.mx-auto { + margin-left: auto !important; +} + +@media (min-width: 576px) { + .m-sm-0 { + margin: 0 !important; + } + .mt-sm-0, + .my-sm-0 { + margin-top: 0 !important; + } + .mr-sm-0, + .mx-sm-0 { + margin-right: 0 !important; + } + .mb-sm-0, + .my-sm-0 { + margin-bottom: 0 !important; + } + .ml-sm-0, + .mx-sm-0 { + margin-left: 0 !important; + } + .m-sm-1 { + margin: 0.25rem !important; + } + .mt-sm-1, + .my-sm-1 { + margin-top: 0.25rem !important; + } + .mr-sm-1, + .mx-sm-1 { + margin-right: 0.25rem !important; + } + .mb-sm-1, + .my-sm-1 { + margin-bottom: 0.25rem !important; + } + .ml-sm-1, + .mx-sm-1 { + margin-left: 0.25rem !important; + } + .m-sm-2 { + margin: 0.5rem !important; + } + .mt-sm-2, + .my-sm-2 { + margin-top: 0.5rem !important; + } + .mr-sm-2, + .mx-sm-2 { + margin-right: 0.5rem !important; + } + .mb-sm-2, + .my-sm-2 { + margin-bottom: 0.5rem !important; + } + .ml-sm-2, + .mx-sm-2 { + margin-left: 0.5rem !important; + } + .m-sm-3 { + margin: 1rem !important; + } + .mt-sm-3, + .my-sm-3 { + margin-top: 1rem !important; + } + .mr-sm-3, + .mx-sm-3 { + margin-right: 1rem !important; + } + .mb-sm-3, + .my-sm-3 { + margin-bottom: 1rem !important; + } + .ml-sm-3, + .mx-sm-3 { + margin-left: 1rem !important; + } + .m-sm-4 { + margin: 1.5rem !important; + } + .mt-sm-4, + .my-sm-4 { + margin-top: 1.5rem !important; + } + .mr-sm-4, + .mx-sm-4 { + margin-right: 1.5rem !important; + } + .mb-sm-4, + .my-sm-4 { + margin-bottom: 1.5rem !important; + } + .ml-sm-4, + .mx-sm-4 { + margin-left: 1.5rem !important; + } + .m-sm-5 { + margin: 3rem !important; + } + .mt-sm-5, + .my-sm-5 { + margin-top: 3rem !important; + } + .mr-sm-5, + .mx-sm-5 { + margin-right: 3rem !important; + } + .mb-sm-5, + .my-sm-5 { + margin-bottom: 3rem !important; + } + .ml-sm-5, + .mx-sm-5 { + margin-left: 3rem !important; + } + .m-sm-sm { + margin: 2rem !important; + } + .mt-sm-sm, + .my-sm-sm { + margin-top: 2rem !important; + } + .mr-sm-sm, + .mx-sm-sm { + margin-right: 2rem !important; + } + .mb-sm-sm, + .my-sm-sm { + margin-bottom: 2rem !important; + } + .ml-sm-sm, + .mx-sm-sm { + margin-left: 2rem !important; + } + .m-sm-md { + margin: 4rem !important; + } + .mt-sm-md, + .my-sm-md { + margin-top: 4rem !important; + } + .mr-sm-md, + .mx-sm-md { + margin-right: 4rem !important; + } + .mb-sm-md, + .my-sm-md { + margin-bottom: 4rem !important; + } + .ml-sm-md, + .mx-sm-md { + margin-left: 4rem !important; + } + .m-sm-lg { + margin: 6rem !important; + } + .mt-sm-lg, + .my-sm-lg { + margin-top: 6rem !important; + } + .mr-sm-lg, + .mx-sm-lg { + margin-right: 6rem !important; + } + .mb-sm-lg, + .my-sm-lg { + margin-bottom: 6rem !important; + } + .ml-sm-lg, + .mx-sm-lg { + margin-left: 6rem !important; + } + .m-sm-xl { + margin: 8rem !important; + } + .mt-sm-xl, + .my-sm-xl { + margin-top: 8rem !important; + } + .mr-sm-xl, + .mx-sm-xl { + margin-right: 8rem !important; + } + .mb-sm-xl, + .my-sm-xl { + margin-bottom: 8rem !important; + } + .ml-sm-xl, + .mx-sm-xl { + margin-left: 8rem !important; + } + .p-sm-0 { + padding: 0 !important; + } + .pt-sm-0, + .py-sm-0 { + padding-top: 0 !important; + } + .pr-sm-0, + .px-sm-0 { + padding-right: 0 !important; + } + .pb-sm-0, + .py-sm-0 { + padding-bottom: 0 !important; + } + .pl-sm-0, + .px-sm-0 { + padding-left: 0 !important; + } + .p-sm-1 { + padding: 0.25rem !important; + } + .pt-sm-1, + .py-sm-1 { + padding-top: 0.25rem !important; + } + .pr-sm-1, + .px-sm-1 { + padding-right: 0.25rem !important; + } + .pb-sm-1, + .py-sm-1 { + padding-bottom: 0.25rem !important; + } + .pl-sm-1, + .px-sm-1 { + padding-left: 0.25rem !important; + } + .p-sm-2 { + padding: 0.5rem !important; + } + .pt-sm-2, + .py-sm-2 { + padding-top: 0.5rem !important; + } + .pr-sm-2, + .px-sm-2 { + padding-right: 0.5rem !important; + } + .pb-sm-2, + .py-sm-2 { + padding-bottom: 0.5rem !important; + } + .pl-sm-2, + .px-sm-2 { + padding-left: 0.5rem !important; + } + .p-sm-3 { + padding: 1rem !important; + } + .pt-sm-3, + .py-sm-3 { + padding-top: 1rem !important; + } + .pr-sm-3, + .px-sm-3 { + padding-right: 1rem !important; + } + .pb-sm-3, + .py-sm-3 { + padding-bottom: 1rem !important; + } + .pl-sm-3, + .px-sm-3 { + padding-left: 1rem !important; + } + .p-sm-4 { + padding: 1.5rem !important; + } + .pt-sm-4, + .py-sm-4 { + padding-top: 1.5rem !important; + } + .pr-sm-4, + .px-sm-4 { + padding-right: 1.5rem !important; + } + .pb-sm-4, + .py-sm-4 { + padding-bottom: 1.5rem !important; + } + .pl-sm-4, + .px-sm-4 { + padding-left: 1.5rem !important; + } + .p-sm-5 { + padding: 3rem !important; + } + .pt-sm-5, + .py-sm-5 { + padding-top: 3rem !important; + } + .pr-sm-5, + .px-sm-5 { + padding-right: 3rem !important; + } + .pb-sm-5, + .py-sm-5 { + padding-bottom: 3rem !important; + } + .pl-sm-5, + .px-sm-5 { + padding-left: 3rem !important; + } + .p-sm-sm { + padding: 2rem !important; + } + .pt-sm-sm, + .py-sm-sm { + padding-top: 2rem !important; + } + .pr-sm-sm, + .px-sm-sm { + padding-right: 2rem !important; + } + .pb-sm-sm, + .py-sm-sm { + padding-bottom: 2rem !important; + } + .pl-sm-sm, + .px-sm-sm { + padding-left: 2rem !important; + } + .p-sm-md { + padding: 4rem !important; + } + .pt-sm-md, + .py-sm-md { + padding-top: 4rem !important; + } + .pr-sm-md, + .px-sm-md { + padding-right: 4rem !important; + } + .pb-sm-md, + .py-sm-md { + padding-bottom: 4rem !important; + } + .pl-sm-md, + .px-sm-md { + padding-left: 4rem !important; + } + .p-sm-lg { + padding: 6rem !important; + } + .pt-sm-lg, + .py-sm-lg { + padding-top: 6rem !important; + } + .pr-sm-lg, + .px-sm-lg { + padding-right: 6rem !important; + } + .pb-sm-lg, + .py-sm-lg { + padding-bottom: 6rem !important; + } + .pl-sm-lg, + .px-sm-lg { + padding-left: 6rem !important; + } + .p-sm-xl { + padding: 8rem !important; + } + .pt-sm-xl, + .py-sm-xl { + padding-top: 8rem !important; + } + .pr-sm-xl, + .px-sm-xl { + padding-right: 8rem !important; + } + .pb-sm-xl, + .py-sm-xl { + padding-bottom: 8rem !important; + } + .pl-sm-xl, + .px-sm-xl { + padding-left: 8rem !important; + } + .m-sm-n1 { + margin: -0.25rem !important; + } + .mt-sm-n1, + .my-sm-n1 { + margin-top: -0.25rem !important; + } + .mr-sm-n1, + .mx-sm-n1 { + margin-right: -0.25rem !important; + } + .mb-sm-n1, + .my-sm-n1 { + margin-bottom: -0.25rem !important; + } + .ml-sm-n1, + .mx-sm-n1 { + margin-left: -0.25rem !important; + } + .m-sm-n2 { + margin: -0.5rem !important; + } + .mt-sm-n2, + .my-sm-n2 { + margin-top: -0.5rem !important; + } + .mr-sm-n2, + .mx-sm-n2 { + margin-right: -0.5rem !important; + } + .mb-sm-n2, + .my-sm-n2 { + margin-bottom: -0.5rem !important; + } + .ml-sm-n2, + .mx-sm-n2 { + margin-left: -0.5rem !important; + } + .m-sm-n3 { + margin: -1rem !important; + } + .mt-sm-n3, + .my-sm-n3 { + margin-top: -1rem !important; + } + .mr-sm-n3, + .mx-sm-n3 { + margin-right: -1rem !important; + } + .mb-sm-n3, + .my-sm-n3 { + margin-bottom: -1rem !important; + } + .ml-sm-n3, + .mx-sm-n3 { + margin-left: -1rem !important; + } + .m-sm-n4 { + margin: -1.5rem !important; + } + .mt-sm-n4, + .my-sm-n4 { + margin-top: -1.5rem !important; + } + .mr-sm-n4, + .mx-sm-n4 { + margin-right: -1.5rem !important; + } + .mb-sm-n4, + .my-sm-n4 { + margin-bottom: -1.5rem !important; + } + .ml-sm-n4, + .mx-sm-n4 { + margin-left: -1.5rem !important; + } + .m-sm-n5 { + margin: -3rem !important; + } + .mt-sm-n5, + .my-sm-n5 { + margin-top: -3rem !important; + } + .mr-sm-n5, + .mx-sm-n5 { + margin-right: -3rem !important; + } + .mb-sm-n5, + .my-sm-n5 { + margin-bottom: -3rem !important; + } + .ml-sm-n5, + .mx-sm-n5 { + margin-left: -3rem !important; + } + .m-sm-nsm { + margin: -2rem !important; + } + .mt-sm-nsm, + .my-sm-nsm { + margin-top: -2rem !important; + } + .mr-sm-nsm, + .mx-sm-nsm { + margin-right: -2rem !important; + } + .mb-sm-nsm, + .my-sm-nsm { + margin-bottom: -2rem !important; + } + .ml-sm-nsm, + .mx-sm-nsm { + margin-left: -2rem !important; + } + .m-sm-nmd { + margin: -4rem !important; + } + .mt-sm-nmd, + .my-sm-nmd { + margin-top: -4rem !important; + } + .mr-sm-nmd, + .mx-sm-nmd { + margin-right: -4rem !important; + } + .mb-sm-nmd, + .my-sm-nmd { + margin-bottom: -4rem !important; + } + .ml-sm-nmd, + .mx-sm-nmd { + margin-left: -4rem !important; + } + .m-sm-nlg { + margin: -6rem !important; + } + .mt-sm-nlg, + .my-sm-nlg { + margin-top: -6rem !important; + } + .mr-sm-nlg, + .mx-sm-nlg { + margin-right: -6rem !important; + } + .mb-sm-nlg, + .my-sm-nlg { + margin-bottom: -6rem !important; + } + .ml-sm-nlg, + .mx-sm-nlg { + margin-left: -6rem !important; + } + .m-sm-nxl { + margin: -8rem !important; + } + .mt-sm-nxl, + .my-sm-nxl { + margin-top: -8rem !important; + } + .mr-sm-nxl, + .mx-sm-nxl { + margin-right: -8rem !important; + } + .mb-sm-nxl, + .my-sm-nxl { + margin-bottom: -8rem !important; + } + .ml-sm-nxl, + .mx-sm-nxl { + margin-left: -8rem !important; + } + .m-sm-auto { + margin: auto !important; + } + .mt-sm-auto, + .my-sm-auto { + margin-top: auto !important; + } + .mr-sm-auto, + .mx-sm-auto { + margin-right: auto !important; + } + .mb-sm-auto, + .my-sm-auto { + margin-bottom: auto !important; + } + .ml-sm-auto, + .mx-sm-auto { + margin-left: auto !important; + } +} + +@media (min-width: 768px) { + .m-md-0 { + margin: 0 !important; + } + .mt-md-0, + .my-md-0 { + margin-top: 0 !important; + } + .mr-md-0, + .mx-md-0 { + margin-right: 0 !important; + } + .mb-md-0, + .my-md-0 { + margin-bottom: 0 !important; + } + .ml-md-0, + .mx-md-0 { + margin-left: 0 !important; + } + .m-md-1 { + margin: 0.25rem !important; + } + .mt-md-1, + .my-md-1 { + margin-top: 0.25rem !important; + } + .mr-md-1, + .mx-md-1 { + margin-right: 0.25rem !important; + } + .mb-md-1, + .my-md-1 { + margin-bottom: 0.25rem !important; + } + .ml-md-1, + .mx-md-1 { + margin-left: 0.25rem !important; + } + .m-md-2 { + margin: 0.5rem !important; + } + .mt-md-2, + .my-md-2 { + margin-top: 0.5rem !important; + } + .mr-md-2, + .mx-md-2 { + margin-right: 0.5rem !important; + } + .mb-md-2, + .my-md-2 { + margin-bottom: 0.5rem !important; + } + .ml-md-2, + .mx-md-2 { + margin-left: 0.5rem !important; + } + .m-md-3 { + margin: 1rem !important; + } + .mt-md-3, + .my-md-3 { + margin-top: 1rem !important; + } + .mr-md-3, + .mx-md-3 { + margin-right: 1rem !important; + } + .mb-md-3, + .my-md-3 { + margin-bottom: 1rem !important; + } + .ml-md-3, + .mx-md-3 { + margin-left: 1rem !important; + } + .m-md-4 { + margin: 1.5rem !important; + } + .mt-md-4, + .my-md-4 { + margin-top: 1.5rem !important; + } + .mr-md-4, + .mx-md-4 { + margin-right: 1.5rem !important; + } + .mb-md-4, + .my-md-4 { + margin-bottom: 1.5rem !important; + } + .ml-md-4, + .mx-md-4 { + margin-left: 1.5rem !important; + } + .m-md-5 { + margin: 3rem !important; + } + .mt-md-5, + .my-md-5 { + margin-top: 3rem !important; + } + .mr-md-5, + .mx-md-5 { + margin-right: 3rem !important; + } + .mb-md-5, + .my-md-5 { + margin-bottom: 3rem !important; + } + .ml-md-5, + .mx-md-5 { + margin-left: 3rem !important; + } + .m-md-sm { + margin: 2rem !important; + } + .mt-md-sm, + .my-md-sm { + margin-top: 2rem !important; + } + .mr-md-sm, + .mx-md-sm { + margin-right: 2rem !important; + } + .mb-md-sm, + .my-md-sm { + margin-bottom: 2rem !important; + } + .ml-md-sm, + .mx-md-sm { + margin-left: 2rem !important; + } + .m-md-md { + margin: 4rem !important; + } + .mt-md-md, + .my-md-md { + margin-top: 4rem !important; + } + .mr-md-md, + .mx-md-md { + margin-right: 4rem !important; + } + .mb-md-md, + .my-md-md { + margin-bottom: 4rem !important; + } + .ml-md-md, + .mx-md-md { + margin-left: 4rem !important; + } + .m-md-lg { + margin: 6rem !important; + } + .mt-md-lg, + .my-md-lg { + margin-top: 6rem !important; + } + .mr-md-lg, + .mx-md-lg { + margin-right: 6rem !important; + } + .mb-md-lg, + .my-md-lg { + margin-bottom: 6rem !important; + } + .ml-md-lg, + .mx-md-lg { + margin-left: 6rem !important; + } + .m-md-xl { + margin: 8rem !important; + } + .mt-md-xl, + .my-md-xl { + margin-top: 8rem !important; + } + .mr-md-xl, + .mx-md-xl { + margin-right: 8rem !important; + } + .mb-md-xl, + .my-md-xl { + margin-bottom: 8rem !important; + } + .ml-md-xl, + .mx-md-xl { + margin-left: 8rem !important; + } + .p-md-0 { + padding: 0 !important; + } + .pt-md-0, + .py-md-0 { + padding-top: 0 !important; + } + .pr-md-0, + .px-md-0 { + padding-right: 0 !important; + } + .pb-md-0, + .py-md-0 { + padding-bottom: 0 !important; + } + .pl-md-0, + .px-md-0 { + padding-left: 0 !important; + } + .p-md-1 { + padding: 0.25rem !important; + } + .pt-md-1, + .py-md-1 { + padding-top: 0.25rem !important; + } + .pr-md-1, + .px-md-1 { + padding-right: 0.25rem !important; + } + .pb-md-1, + .py-md-1 { + padding-bottom: 0.25rem !important; + } + .pl-md-1, + .px-md-1 { + padding-left: 0.25rem !important; + } + .p-md-2 { + padding: 0.5rem !important; + } + .pt-md-2, + .py-md-2 { + padding-top: 0.5rem !important; + } + .pr-md-2, + .px-md-2 { + padding-right: 0.5rem !important; + } + .pb-md-2, + .py-md-2 { + padding-bottom: 0.5rem !important; + } + .pl-md-2, + .px-md-2 { + padding-left: 0.5rem !important; + } + .p-md-3 { + padding: 1rem !important; + } + .pt-md-3, + .py-md-3 { + padding-top: 1rem !important; + } + .pr-md-3, + .px-md-3 { + padding-right: 1rem !important; + } + .pb-md-3, + .py-md-3 { + padding-bottom: 1rem !important; + } + .pl-md-3, + .px-md-3 { + padding-left: 1rem !important; + } + .p-md-4 { + padding: 1.5rem !important; + } + .pt-md-4, + .py-md-4 { + padding-top: 1.5rem !important; + } + .pr-md-4, + .px-md-4 { + padding-right: 1.5rem !important; + } + .pb-md-4, + .py-md-4 { + padding-bottom: 1.5rem !important; + } + .pl-md-4, + .px-md-4 { + padding-left: 1.5rem !important; + } + .p-md-5 { + padding: 3rem !important; + } + .pt-md-5, + .py-md-5 { + padding-top: 3rem !important; + } + .pr-md-5, + .px-md-5 { + padding-right: 3rem !important; + } + .pb-md-5, + .py-md-5 { + padding-bottom: 3rem !important; + } + .pl-md-5, + .px-md-5 { + padding-left: 3rem !important; + } + .p-md-sm { + padding: 2rem !important; + } + .pt-md-sm, + .py-md-sm { + padding-top: 2rem !important; + } + .pr-md-sm, + .px-md-sm { + padding-right: 2rem !important; + } + .pb-md-sm, + .py-md-sm { + padding-bottom: 2rem !important; + } + .pl-md-sm, + .px-md-sm { + padding-left: 2rem !important; + } + .p-md-md { + padding: 4rem !important; + } + .pt-md-md, + .py-md-md { + padding-top: 4rem !important; + } + .pr-md-md, + .px-md-md { + padding-right: 4rem !important; + } + .pb-md-md, + .py-md-md { + padding-bottom: 4rem !important; + } + .pl-md-md, + .px-md-md { + padding-left: 4rem !important; + } + .p-md-lg { + padding: 6rem !important; + } + .pt-md-lg, + .py-md-lg { + padding-top: 6rem !important; + } + .pr-md-lg, + .px-md-lg { + padding-right: 6rem !important; + } + .pb-md-lg, + .py-md-lg { + padding-bottom: 6rem !important; + } + .pl-md-lg, + .px-md-lg { + padding-left: 6rem !important; + } + .p-md-xl { + padding: 8rem !important; + } + .pt-md-xl, + .py-md-xl { + padding-top: 8rem !important; + } + .pr-md-xl, + .px-md-xl { + padding-right: 8rem !important; + } + .pb-md-xl, + .py-md-xl { + padding-bottom: 8rem !important; + } + .pl-md-xl, + .px-md-xl { + padding-left: 8rem !important; + } + .m-md-n1 { + margin: -0.25rem !important; + } + .mt-md-n1, + .my-md-n1 { + margin-top: -0.25rem !important; + } + .mr-md-n1, + .mx-md-n1 { + margin-right: -0.25rem !important; + } + .mb-md-n1, + .my-md-n1 { + margin-bottom: -0.25rem !important; + } + .ml-md-n1, + .mx-md-n1 { + margin-left: -0.25rem !important; + } + .m-md-n2 { + margin: -0.5rem !important; + } + .mt-md-n2, + .my-md-n2 { + margin-top: -0.5rem !important; + } + .mr-md-n2, + .mx-md-n2 { + margin-right: -0.5rem !important; + } + .mb-md-n2, + .my-md-n2 { + margin-bottom: -0.5rem !important; + } + .ml-md-n2, + .mx-md-n2 { + margin-left: -0.5rem !important; + } + .m-md-n3 { + margin: -1rem !important; + } + .mt-md-n3, + .my-md-n3 { + margin-top: -1rem !important; + } + .mr-md-n3, + .mx-md-n3 { + margin-right: -1rem !important; + } + .mb-md-n3, + .my-md-n3 { + margin-bottom: -1rem !important; + } + .ml-md-n3, + .mx-md-n3 { + margin-left: -1rem !important; + } + .m-md-n4 { + margin: -1.5rem !important; + } + .mt-md-n4, + .my-md-n4 { + margin-top: -1.5rem !important; + } + .mr-md-n4, + .mx-md-n4 { + margin-right: -1.5rem !important; + } + .mb-md-n4, + .my-md-n4 { + margin-bottom: -1.5rem !important; + } + .ml-md-n4, + .mx-md-n4 { + margin-left: -1.5rem !important; + } + .m-md-n5 { + margin: -3rem !important; + } + .mt-md-n5, + .my-md-n5 { + margin-top: -3rem !important; + } + .mr-md-n5, + .mx-md-n5 { + margin-right: -3rem !important; + } + .mb-md-n5, + .my-md-n5 { + margin-bottom: -3rem !important; + } + .ml-md-n5, + .mx-md-n5 { + margin-left: -3rem !important; + } + .m-md-nsm { + margin: -2rem !important; + } + .mt-md-nsm, + .my-md-nsm { + margin-top: -2rem !important; + } + .mr-md-nsm, + .mx-md-nsm { + margin-right: -2rem !important; + } + .mb-md-nsm, + .my-md-nsm { + margin-bottom: -2rem !important; + } + .ml-md-nsm, + .mx-md-nsm { + margin-left: -2rem !important; + } + .m-md-nmd { + margin: -4rem !important; + } + .mt-md-nmd, + .my-md-nmd { + margin-top: -4rem !important; + } + .mr-md-nmd, + .mx-md-nmd { + margin-right: -4rem !important; + } + .mb-md-nmd, + .my-md-nmd { + margin-bottom: -4rem !important; + } + .ml-md-nmd, + .mx-md-nmd { + margin-left: -4rem !important; + } + .m-md-nlg { + margin: -6rem !important; + } + .mt-md-nlg, + .my-md-nlg { + margin-top: -6rem !important; + } + .mr-md-nlg, + .mx-md-nlg { + margin-right: -6rem !important; + } + .mb-md-nlg, + .my-md-nlg { + margin-bottom: -6rem !important; + } + .ml-md-nlg, + .mx-md-nlg { + margin-left: -6rem !important; + } + .m-md-nxl { + margin: -8rem !important; + } + .mt-md-nxl, + .my-md-nxl { + margin-top: -8rem !important; + } + .mr-md-nxl, + .mx-md-nxl { + margin-right: -8rem !important; + } + .mb-md-nxl, + .my-md-nxl { + margin-bottom: -8rem !important; + } + .ml-md-nxl, + .mx-md-nxl { + margin-left: -8rem !important; + } + .m-md-auto { + margin: auto !important; + } + .mt-md-auto, + .my-md-auto { + margin-top: auto !important; + } + .mr-md-auto, + .mx-md-auto { + margin-right: auto !important; + } + .mb-md-auto, + .my-md-auto { + margin-bottom: auto !important; + } + .ml-md-auto, + .mx-md-auto { + margin-left: auto !important; + } +} + +@media (min-width: 992px) { + .m-lg-0 { + margin: 0 !important; + } + .mt-lg-0, + .my-lg-0 { + margin-top: 0 !important; + } + .mr-lg-0, + .mx-lg-0 { + margin-right: 0 !important; + } + .mb-lg-0, + .my-lg-0 { + margin-bottom: 0 !important; + } + .ml-lg-0, + .mx-lg-0 { + margin-left: 0 !important; + } + .m-lg-1 { + margin: 0.25rem !important; + } + .mt-lg-1, + .my-lg-1 { + margin-top: 0.25rem !important; + } + .mr-lg-1, + .mx-lg-1 { + margin-right: 0.25rem !important; + } + .mb-lg-1, + .my-lg-1 { + margin-bottom: 0.25rem !important; + } + .ml-lg-1, + .mx-lg-1 { + margin-left: 0.25rem !important; + } + .m-lg-2 { + margin: 0.5rem !important; + } + .mt-lg-2, + .my-lg-2 { + margin-top: 0.5rem !important; + } + .mr-lg-2, + .mx-lg-2 { + margin-right: 0.5rem !important; + } + .mb-lg-2, + .my-lg-2 { + margin-bottom: 0.5rem !important; + } + .ml-lg-2, + .mx-lg-2 { + margin-left: 0.5rem !important; + } + .m-lg-3 { + margin: 1rem !important; + } + .mt-lg-3, + .my-lg-3 { + margin-top: 1rem !important; + } + .mr-lg-3, + .mx-lg-3 { + margin-right: 1rem !important; + } + .mb-lg-3, + .my-lg-3 { + margin-bottom: 1rem !important; + } + .ml-lg-3, + .mx-lg-3 { + margin-left: 1rem !important; + } + .m-lg-4 { + margin: 1.5rem !important; + } + .mt-lg-4, + .my-lg-4 { + margin-top: 1.5rem !important; + } + .mr-lg-4, + .mx-lg-4 { + margin-right: 1.5rem !important; + } + .mb-lg-4, + .my-lg-4 { + margin-bottom: 1.5rem !important; + } + .ml-lg-4, + .mx-lg-4 { + margin-left: 1.5rem !important; + } + .m-lg-5 { + margin: 3rem !important; + } + .mt-lg-5, + .my-lg-5 { + margin-top: 3rem !important; + } + .mr-lg-5, + .mx-lg-5 { + margin-right: 3rem !important; + } + .mb-lg-5, + .my-lg-5 { + margin-bottom: 3rem !important; + } + .ml-lg-5, + .mx-lg-5 { + margin-left: 3rem !important; + } + .m-lg-sm { + margin: 2rem !important; + } + .mt-lg-sm, + .my-lg-sm { + margin-top: 2rem !important; + } + .mr-lg-sm, + .mx-lg-sm { + margin-right: 2rem !important; + } + .mb-lg-sm, + .my-lg-sm { + margin-bottom: 2rem !important; + } + .ml-lg-sm, + .mx-lg-sm { + margin-left: 2rem !important; + } + .m-lg-md { + margin: 4rem !important; + } + .mt-lg-md, + .my-lg-md { + margin-top: 4rem !important; + } + .mr-lg-md, + .mx-lg-md { + margin-right: 4rem !important; + } + .mb-lg-md, + .my-lg-md { + margin-bottom: 4rem !important; + } + .ml-lg-md, + .mx-lg-md { + margin-left: 4rem !important; + } + .m-lg-lg { + margin: 6rem !important; + } + .mt-lg-lg, + .my-lg-lg { + margin-top: 6rem !important; + } + .mr-lg-lg, + .mx-lg-lg { + margin-right: 6rem !important; + } + .mb-lg-lg, + .my-lg-lg { + margin-bottom: 6rem !important; + } + .ml-lg-lg, + .mx-lg-lg { + margin-left: 6rem !important; + } + .m-lg-xl { + margin: 8rem !important; + } + .mt-lg-xl, + .my-lg-xl { + margin-top: 8rem !important; + } + .mr-lg-xl, + .mx-lg-xl { + margin-right: 8rem !important; + } + .mb-lg-xl, + .my-lg-xl { + margin-bottom: 8rem !important; + } + .ml-lg-xl, + .mx-lg-xl { + margin-left: 8rem !important; + } + .p-lg-0 { + padding: 0 !important; + } + .pt-lg-0, + .py-lg-0 { + padding-top: 0 !important; + } + .pr-lg-0, + .px-lg-0 { + padding-right: 0 !important; + } + .pb-lg-0, + .py-lg-0 { + padding-bottom: 0 !important; + } + .pl-lg-0, + .px-lg-0 { + padding-left: 0 !important; + } + .p-lg-1 { + padding: 0.25rem !important; + } + .pt-lg-1, + .py-lg-1 { + padding-top: 0.25rem !important; + } + .pr-lg-1, + .px-lg-1 { + padding-right: 0.25rem !important; + } + .pb-lg-1, + .py-lg-1 { + padding-bottom: 0.25rem !important; + } + .pl-lg-1, + .px-lg-1 { + padding-left: 0.25rem !important; + } + .p-lg-2 { + padding: 0.5rem !important; + } + .pt-lg-2, + .py-lg-2 { + padding-top: 0.5rem !important; + } + .pr-lg-2, + .px-lg-2 { + padding-right: 0.5rem !important; + } + .pb-lg-2, + .py-lg-2 { + padding-bottom: 0.5rem !important; + } + .pl-lg-2, + .px-lg-2 { + padding-left: 0.5rem !important; + } + .p-lg-3 { + padding: 1rem !important; + } + .pt-lg-3, + .py-lg-3 { + padding-top: 1rem !important; + } + .pr-lg-3, + .px-lg-3 { + padding-right: 1rem !important; + } + .pb-lg-3, + .py-lg-3 { + padding-bottom: 1rem !important; + } + .pl-lg-3, + .px-lg-3 { + padding-left: 1rem !important; + } + .p-lg-4 { + padding: 1.5rem !important; + } + .pt-lg-4, + .py-lg-4 { + padding-top: 1.5rem !important; + } + .pr-lg-4, + .px-lg-4 { + padding-right: 1.5rem !important; + } + .pb-lg-4, + .py-lg-4 { + padding-bottom: 1.5rem !important; + } + .pl-lg-4, + .px-lg-4 { + padding-left: 1.5rem !important; + } + .p-lg-5 { + padding: 3rem !important; + } + .pt-lg-5, + .py-lg-5 { + padding-top: 3rem !important; + } + .pr-lg-5, + .px-lg-5 { + padding-right: 3rem !important; + } + .pb-lg-5, + .py-lg-5 { + padding-bottom: 3rem !important; + } + .pl-lg-5, + .px-lg-5 { + padding-left: 3rem !important; + } + .p-lg-sm { + padding: 2rem !important; + } + .pt-lg-sm, + .py-lg-sm { + padding-top: 2rem !important; + } + .pr-lg-sm, + .px-lg-sm { + padding-right: 2rem !important; + } + .pb-lg-sm, + .py-lg-sm { + padding-bottom: 2rem !important; + } + .pl-lg-sm, + .px-lg-sm { + padding-left: 2rem !important; + } + .p-lg-md { + padding: 4rem !important; + } + .pt-lg-md, + .py-lg-md { + padding-top: 4rem !important; + } + .pr-lg-md, + .px-lg-md { + padding-right: 4rem !important; + } + .pb-lg-md, + .py-lg-md { + padding-bottom: 4rem !important; + } + .pl-lg-md, + .px-lg-md { + padding-left: 4rem !important; + } + .p-lg-lg { + padding: 6rem !important; + } + .pt-lg-lg, + .py-lg-lg { + padding-top: 6rem !important; + } + .pr-lg-lg, + .px-lg-lg { + padding-right: 6rem !important; + } + .pb-lg-lg, + .py-lg-lg { + padding-bottom: 6rem !important; + } + .pl-lg-lg, + .px-lg-lg { + padding-left: 6rem !important; + } + .p-lg-xl { + padding: 8rem !important; + } + .pt-lg-xl, + .py-lg-xl { + padding-top: 8rem !important; + } + .pr-lg-xl, + .px-lg-xl { + padding-right: 8rem !important; + } + .pb-lg-xl, + .py-lg-xl { + padding-bottom: 8rem !important; + } + .pl-lg-xl, + .px-lg-xl { + padding-left: 8rem !important; + } + .m-lg-n1 { + margin: -0.25rem !important; + } + .mt-lg-n1, + .my-lg-n1 { + margin-top: -0.25rem !important; + } + .mr-lg-n1, + .mx-lg-n1 { + margin-right: -0.25rem !important; + } + .mb-lg-n1, + .my-lg-n1 { + margin-bottom: -0.25rem !important; + } + .ml-lg-n1, + .mx-lg-n1 { + margin-left: -0.25rem !important; + } + .m-lg-n2 { + margin: -0.5rem !important; + } + .mt-lg-n2, + .my-lg-n2 { + margin-top: -0.5rem !important; + } + .mr-lg-n2, + .mx-lg-n2 { + margin-right: -0.5rem !important; + } + .mb-lg-n2, + .my-lg-n2 { + margin-bottom: -0.5rem !important; + } + .ml-lg-n2, + .mx-lg-n2 { + margin-left: -0.5rem !important; + } + .m-lg-n3 { + margin: -1rem !important; + } + .mt-lg-n3, + .my-lg-n3 { + margin-top: -1rem !important; + } + .mr-lg-n3, + .mx-lg-n3 { + margin-right: -1rem !important; + } + .mb-lg-n3, + .my-lg-n3 { + margin-bottom: -1rem !important; + } + .ml-lg-n3, + .mx-lg-n3 { + margin-left: -1rem !important; + } + .m-lg-n4 { + margin: -1.5rem !important; + } + .mt-lg-n4, + .my-lg-n4 { + margin-top: -1.5rem !important; + } + .mr-lg-n4, + .mx-lg-n4 { + margin-right: -1.5rem !important; + } + .mb-lg-n4, + .my-lg-n4 { + margin-bottom: -1.5rem !important; + } + .ml-lg-n4, + .mx-lg-n4 { + margin-left: -1.5rem !important; + } + .m-lg-n5 { + margin: -3rem !important; + } + .mt-lg-n5, + .my-lg-n5 { + margin-top: -3rem !important; + } + .mr-lg-n5, + .mx-lg-n5 { + margin-right: -3rem !important; + } + .mb-lg-n5, + .my-lg-n5 { + margin-bottom: -3rem !important; + } + .ml-lg-n5, + .mx-lg-n5 { + margin-left: -3rem !important; + } + .m-lg-nsm { + margin: -2rem !important; + } + .mt-lg-nsm, + .my-lg-nsm { + margin-top: -2rem !important; + } + .mr-lg-nsm, + .mx-lg-nsm { + margin-right: -2rem !important; + } + .mb-lg-nsm, + .my-lg-nsm { + margin-bottom: -2rem !important; + } + .ml-lg-nsm, + .mx-lg-nsm { + margin-left: -2rem !important; + } + .m-lg-nmd { + margin: -4rem !important; + } + .mt-lg-nmd, + .my-lg-nmd { + margin-top: -4rem !important; + } + .mr-lg-nmd, + .mx-lg-nmd { + margin-right: -4rem !important; + } + .mb-lg-nmd, + .my-lg-nmd { + margin-bottom: -4rem !important; + } + .ml-lg-nmd, + .mx-lg-nmd { + margin-left: -4rem !important; + } + .m-lg-nlg { + margin: -6rem !important; + } + .mt-lg-nlg, + .my-lg-nlg { + margin-top: -6rem !important; + } + .mr-lg-nlg, + .mx-lg-nlg { + margin-right: -6rem !important; + } + .mb-lg-nlg, + .my-lg-nlg { + margin-bottom: -6rem !important; + } + .ml-lg-nlg, + .mx-lg-nlg { + margin-left: -6rem !important; + } + .m-lg-nxl { + margin: -8rem !important; + } + .mt-lg-nxl, + .my-lg-nxl { + margin-top: -8rem !important; + } + .mr-lg-nxl, + .mx-lg-nxl { + margin-right: -8rem !important; + } + .mb-lg-nxl, + .my-lg-nxl { + margin-bottom: -8rem !important; + } + .ml-lg-nxl, + .mx-lg-nxl { + margin-left: -8rem !important; + } + .m-lg-auto { + margin: auto !important; + } + .mt-lg-auto, + .my-lg-auto { + margin-top: auto !important; + } + .mr-lg-auto, + .mx-lg-auto { + margin-right: auto !important; + } + .mb-lg-auto, + .my-lg-auto { + margin-bottom: auto !important; + } + .ml-lg-auto, + .mx-lg-auto { + margin-left: auto !important; + } +} + +@media (min-width: 1200px) { + .m-xl-0 { + margin: 0 !important; + } + .mt-xl-0, + .my-xl-0 { + margin-top: 0 !important; + } + .mr-xl-0, + .mx-xl-0 { + margin-right: 0 !important; + } + .mb-xl-0, + .my-xl-0 { + margin-bottom: 0 !important; + } + .ml-xl-0, + .mx-xl-0 { + margin-left: 0 !important; + } + .m-xl-1 { + margin: 0.25rem !important; + } + .mt-xl-1, + .my-xl-1 { + margin-top: 0.25rem !important; + } + .mr-xl-1, + .mx-xl-1 { + margin-right: 0.25rem !important; + } + .mb-xl-1, + .my-xl-1 { + margin-bottom: 0.25rem !important; + } + .ml-xl-1, + .mx-xl-1 { + margin-left: 0.25rem !important; + } + .m-xl-2 { + margin: 0.5rem !important; + } + .mt-xl-2, + .my-xl-2 { + margin-top: 0.5rem !important; + } + .mr-xl-2, + .mx-xl-2 { + margin-right: 0.5rem !important; + } + .mb-xl-2, + .my-xl-2 { + margin-bottom: 0.5rem !important; + } + .ml-xl-2, + .mx-xl-2 { + margin-left: 0.5rem !important; + } + .m-xl-3 { + margin: 1rem !important; + } + .mt-xl-3, + .my-xl-3 { + margin-top: 1rem !important; + } + .mr-xl-3, + .mx-xl-3 { + margin-right: 1rem !important; + } + .mb-xl-3, + .my-xl-3 { + margin-bottom: 1rem !important; + } + .ml-xl-3, + .mx-xl-3 { + margin-left: 1rem !important; + } + .m-xl-4 { + margin: 1.5rem !important; + } + .mt-xl-4, + .my-xl-4 { + margin-top: 1.5rem !important; + } + .mr-xl-4, + .mx-xl-4 { + margin-right: 1.5rem !important; + } + .mb-xl-4, + .my-xl-4 { + margin-bottom: 1.5rem !important; + } + .ml-xl-4, + .mx-xl-4 { + margin-left: 1.5rem !important; + } + .m-xl-5 { + margin: 3rem !important; + } + .mt-xl-5, + .my-xl-5 { + margin-top: 3rem !important; + } + .mr-xl-5, + .mx-xl-5 { + margin-right: 3rem !important; + } + .mb-xl-5, + .my-xl-5 { + margin-bottom: 3rem !important; + } + .ml-xl-5, + .mx-xl-5 { + margin-left: 3rem !important; + } + .m-xl-sm { + margin: 2rem !important; + } + .mt-xl-sm, + .my-xl-sm { + margin-top: 2rem !important; + } + .mr-xl-sm, + .mx-xl-sm { + margin-right: 2rem !important; + } + .mb-xl-sm, + .my-xl-sm { + margin-bottom: 2rem !important; + } + .ml-xl-sm, + .mx-xl-sm { + margin-left: 2rem !important; + } + .m-xl-md { + margin: 4rem !important; + } + .mt-xl-md, + .my-xl-md { + margin-top: 4rem !important; + } + .mr-xl-md, + .mx-xl-md { + margin-right: 4rem !important; + } + .mb-xl-md, + .my-xl-md { + margin-bottom: 4rem !important; + } + .ml-xl-md, + .mx-xl-md { + margin-left: 4rem !important; + } + .m-xl-lg { + margin: 6rem !important; + } + .mt-xl-lg, + .my-xl-lg { + margin-top: 6rem !important; + } + .mr-xl-lg, + .mx-xl-lg { + margin-right: 6rem !important; + } + .mb-xl-lg, + .my-xl-lg { + margin-bottom: 6rem !important; + } + .ml-xl-lg, + .mx-xl-lg { + margin-left: 6rem !important; + } + .m-xl-xl { + margin: 8rem !important; + } + .mt-xl-xl, + .my-xl-xl { + margin-top: 8rem !important; + } + .mr-xl-xl, + .mx-xl-xl { + margin-right: 8rem !important; + } + .mb-xl-xl, + .my-xl-xl { + margin-bottom: 8rem !important; + } + .ml-xl-xl, + .mx-xl-xl { + margin-left: 8rem !important; + } + .p-xl-0 { + padding: 0 !important; + } + .pt-xl-0, + .py-xl-0 { + padding-top: 0 !important; + } + .pr-xl-0, + .px-xl-0 { + padding-right: 0 !important; + } + .pb-xl-0, + .py-xl-0 { + padding-bottom: 0 !important; + } + .pl-xl-0, + .px-xl-0 { + padding-left: 0 !important; + } + .p-xl-1 { + padding: 0.25rem !important; + } + .pt-xl-1, + .py-xl-1 { + padding-top: 0.25rem !important; + } + .pr-xl-1, + .px-xl-1 { + padding-right: 0.25rem !important; + } + .pb-xl-1, + .py-xl-1 { + padding-bottom: 0.25rem !important; + } + .pl-xl-1, + .px-xl-1 { + padding-left: 0.25rem !important; + } + .p-xl-2 { + padding: 0.5rem !important; + } + .pt-xl-2, + .py-xl-2 { + padding-top: 0.5rem !important; + } + .pr-xl-2, + .px-xl-2 { + padding-right: 0.5rem !important; + } + .pb-xl-2, + .py-xl-2 { + padding-bottom: 0.5rem !important; + } + .pl-xl-2, + .px-xl-2 { + padding-left: 0.5rem !important; + } + .p-xl-3 { + padding: 1rem !important; + } + .pt-xl-3, + .py-xl-3 { + padding-top: 1rem !important; + } + .pr-xl-3, + .px-xl-3 { + padding-right: 1rem !important; + } + .pb-xl-3, + .py-xl-3 { + padding-bottom: 1rem !important; + } + .pl-xl-3, + .px-xl-3 { + padding-left: 1rem !important; + } + .p-xl-4 { + padding: 1.5rem !important; + } + .pt-xl-4, + .py-xl-4 { + padding-top: 1.5rem !important; + } + .pr-xl-4, + .px-xl-4 { + padding-right: 1.5rem !important; + } + .pb-xl-4, + .py-xl-4 { + padding-bottom: 1.5rem !important; + } + .pl-xl-4, + .px-xl-4 { + padding-left: 1.5rem !important; + } + .p-xl-5 { + padding: 3rem !important; + } + .pt-xl-5, + .py-xl-5 { + padding-top: 3rem !important; + } + .pr-xl-5, + .px-xl-5 { + padding-right: 3rem !important; + } + .pb-xl-5, + .py-xl-5 { + padding-bottom: 3rem !important; + } + .pl-xl-5, + .px-xl-5 { + padding-left: 3rem !important; + } + .p-xl-sm { + padding: 2rem !important; + } + .pt-xl-sm, + .py-xl-sm { + padding-top: 2rem !important; + } + .pr-xl-sm, + .px-xl-sm { + padding-right: 2rem !important; + } + .pb-xl-sm, + .py-xl-sm { + padding-bottom: 2rem !important; + } + .pl-xl-sm, + .px-xl-sm { + padding-left: 2rem !important; + } + .p-xl-md { + padding: 4rem !important; + } + .pt-xl-md, + .py-xl-md { + padding-top: 4rem !important; + } + .pr-xl-md, + .px-xl-md { + padding-right: 4rem !important; + } + .pb-xl-md, + .py-xl-md { + padding-bottom: 4rem !important; + } + .pl-xl-md, + .px-xl-md { + padding-left: 4rem !important; + } + .p-xl-lg { + padding: 6rem !important; + } + .pt-xl-lg, + .py-xl-lg { + padding-top: 6rem !important; + } + .pr-xl-lg, + .px-xl-lg { + padding-right: 6rem !important; + } + .pb-xl-lg, + .py-xl-lg { + padding-bottom: 6rem !important; + } + .pl-xl-lg, + .px-xl-lg { + padding-left: 6rem !important; + } + .p-xl-xl { + padding: 8rem !important; + } + .pt-xl-xl, + .py-xl-xl { + padding-top: 8rem !important; + } + .pr-xl-xl, + .px-xl-xl { + padding-right: 8rem !important; + } + .pb-xl-xl, + .py-xl-xl { + padding-bottom: 8rem !important; + } + .pl-xl-xl, + .px-xl-xl { + padding-left: 8rem !important; + } + .m-xl-n1 { + margin: -0.25rem !important; + } + .mt-xl-n1, + .my-xl-n1 { + margin-top: -0.25rem !important; + } + .mr-xl-n1, + .mx-xl-n1 { + margin-right: -0.25rem !important; + } + .mb-xl-n1, + .my-xl-n1 { + margin-bottom: -0.25rem !important; + } + .ml-xl-n1, + .mx-xl-n1 { + margin-left: -0.25rem !important; + } + .m-xl-n2 { + margin: -0.5rem !important; + } + .mt-xl-n2, + .my-xl-n2 { + margin-top: -0.5rem !important; + } + .mr-xl-n2, + .mx-xl-n2 { + margin-right: -0.5rem !important; + } + .mb-xl-n2, + .my-xl-n2 { + margin-bottom: -0.5rem !important; + } + .ml-xl-n2, + .mx-xl-n2 { + margin-left: -0.5rem !important; + } + .m-xl-n3 { + margin: -1rem !important; + } + .mt-xl-n3, + .my-xl-n3 { + margin-top: -1rem !important; + } + .mr-xl-n3, + .mx-xl-n3 { + margin-right: -1rem !important; + } + .mb-xl-n3, + .my-xl-n3 { + margin-bottom: -1rem !important; + } + .ml-xl-n3, + .mx-xl-n3 { + margin-left: -1rem !important; + } + .m-xl-n4 { + margin: -1.5rem !important; + } + .mt-xl-n4, + .my-xl-n4 { + margin-top: -1.5rem !important; + } + .mr-xl-n4, + .mx-xl-n4 { + margin-right: -1.5rem !important; + } + .mb-xl-n4, + .my-xl-n4 { + margin-bottom: -1.5rem !important; + } + .ml-xl-n4, + .mx-xl-n4 { + margin-left: -1.5rem !important; + } + .m-xl-n5 { + margin: -3rem !important; + } + .mt-xl-n5, + .my-xl-n5 { + margin-top: -3rem !important; + } + .mr-xl-n5, + .mx-xl-n5 { + margin-right: -3rem !important; + } + .mb-xl-n5, + .my-xl-n5 { + margin-bottom: -3rem !important; + } + .ml-xl-n5, + .mx-xl-n5 { + margin-left: -3rem !important; + } + .m-xl-nsm { + margin: -2rem !important; + } + .mt-xl-nsm, + .my-xl-nsm { + margin-top: -2rem !important; + } + .mr-xl-nsm, + .mx-xl-nsm { + margin-right: -2rem !important; + } + .mb-xl-nsm, + .my-xl-nsm { + margin-bottom: -2rem !important; + } + .ml-xl-nsm, + .mx-xl-nsm { + margin-left: -2rem !important; + } + .m-xl-nmd { + margin: -4rem !important; + } + .mt-xl-nmd, + .my-xl-nmd { + margin-top: -4rem !important; + } + .mr-xl-nmd, + .mx-xl-nmd { + margin-right: -4rem !important; + } + .mb-xl-nmd, + .my-xl-nmd { + margin-bottom: -4rem !important; + } + .ml-xl-nmd, + .mx-xl-nmd { + margin-left: -4rem !important; + } + .m-xl-nlg { + margin: -6rem !important; + } + .mt-xl-nlg, + .my-xl-nlg { + margin-top: -6rem !important; + } + .mr-xl-nlg, + .mx-xl-nlg { + margin-right: -6rem !important; + } + .mb-xl-nlg, + .my-xl-nlg { + margin-bottom: -6rem !important; + } + .ml-xl-nlg, + .mx-xl-nlg { + margin-left: -6rem !important; + } + .m-xl-nxl { + margin: -8rem !important; + } + .mt-xl-nxl, + .my-xl-nxl { + margin-top: -8rem !important; + } + .mr-xl-nxl, + .mx-xl-nxl { + margin-right: -8rem !important; + } + .mb-xl-nxl, + .my-xl-nxl { + margin-bottom: -8rem !important; + } + .ml-xl-nxl, + .mx-xl-nxl { + margin-left: -8rem !important; + } + .m-xl-auto { + margin: auto !important; + } + .mt-xl-auto, + .my-xl-auto { + margin-top: auto !important; + } + .mr-xl-auto, + .mx-xl-auto { + margin-right: auto !important; + } + .mb-xl-auto, + .my-xl-auto { + margin-bottom: auto !important; + } + .ml-xl-auto, + .mx-xl-auto { + margin-left: auto !important; + } +} + +.text-monospace { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; +} + +.text-justify { + text-align: justify !important; +} + +.text-wrap { + white-space: normal !important; +} + +.text-nowrap { + white-space: nowrap !important; +} + +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.text-left { + text-align: left !important; +} + +.text-right { + text-align: right !important; +} + +.text-center { + text-align: center !important; +} + +@media (min-width: 576px) { + .text-sm-left { + text-align: left !important; + } + .text-sm-right { + text-align: right !important; + } + .text-sm-center { + text-align: center !important; + } +} + +@media (min-width: 768px) { + .text-md-left { + text-align: left !important; + } + .text-md-right { + text-align: right !important; + } + .text-md-center { + text-align: center !important; + } +} + +@media (min-width: 992px) { + .text-lg-left { + text-align: left !important; + } + .text-lg-right { + text-align: right !important; + } + .text-lg-center { + text-align: center !important; + } +} + +@media (min-width: 1200px) { + .text-xl-left { + text-align: left !important; + } + .text-xl-right { + text-align: right !important; + } + .text-xl-center { + text-align: center !important; + } +} + +.text-lowercase { + text-transform: lowercase !important; +} + +.text-uppercase { + text-transform: uppercase !important; +} + +.text-capitalize { + text-transform: capitalize !important; +} + +.font-weight-light { + font-weight: 300 !important; +} + +.font-weight-lighter { + font-weight: lighter !important; +} + +.font-weight-normal { + font-weight: 400 !important; +} + +.font-weight-bold { + font-weight: 600 !important; +} + +.font-weight-bolder { + font-weight: bolder !important; +} + +.font-italic { + font-style: italic !important; +} + +.text-white { + color: #ffffff !important; +} + +.text-primary { + color: #e14eca !important; +} + +a.text-primary:hover, a.text-primary:focus { + color: #c221a9 !important; +} + +.text-secondary { + color: #f4f5f7 !important; +} + +a.text-secondary:hover, a.text-secondary:focus { + color: #c8cdd7 !important; +} + +.text-success { + color: #00f2c3 !important; +} + +a.text-success:hover, a.text-success:focus { + color: #00a685 !important; +} + +.text-info { + color: #1d8cf8 !important; +} + +a.text-info:hover, a.text-info:focus { + color: #0666c2 !important; +} + +.text-warning { + color: #ff8d72 !important; +} + +a.text-warning:hover, a.text-warning:focus { + color: #ff4f26 !important; +} + +.text-danger { + color: #fd5d93 !important; +} + +a.text-danger:hover, a.text-danger:focus { + color: #fc1161 !important; +} + +.text-light { + color: #adb5bd !important; +} + +a.text-light:hover, a.text-light:focus { + color: #838f9b !important; +} + +.text-dark { + color: #212529 !important; +} + +a.text-dark:hover, a.text-dark:focus { + color: black !important; +} + +.text-default { + color: #344675 !important; +} + +a.text-default:hover, a.text-default:focus { + color: #1c2640 !important; +} + +.text-white { + color: #ffffff !important; +} + +a.text-white:hover, a.text-white:focus { + color: #d9d9d9 !important; +} + +.text-neutral { + color: #ffffff !important; +} + +a.text-neutral:hover, a.text-neutral:focus { + color: #d9d9d9 !important; +} + +.text-darker { + color: black !important; +} + +a.text-darker:hover, a.text-darker:focus { + color: black !important; +} + +.text-body { + color: #525f7f !important; +} + +.text-muted { + color: #6c757d !important; +} + +.text-black-50 { + color: rgba(34, 42, 66, 0.5) !important; +} + +.text-white-50 { + color: rgba(255, 255, 255, 0.5) !important; +} + +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.text-decoration-none { + text-decoration: none !important; +} + +.text-break { + word-break: break-word !important; + overflow-wrap: break-word !important; +} + +.text-reset { + color: inherit !important; +} + +.visible { + visibility: visible !important; +} + +.invisible { + visibility: hidden !important; +} + +@media print { + *, + *::before, + *::after { + text-shadow: none !important; + box-shadow: none !important; + } + a:not(.btn) { + text-decoration: underline; + } + abbr[title]::after { + content: " (" attr(title) ")"; + } + pre { + white-space: pre-wrap !important; + } + pre, + blockquote { + border: 0.0625rem solid #adb5bd; + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } + @page { + size: a3; + } + body { + min-width: 992px !important; + } + .container { + min-width: 992px !important; + } + .navbar { + display: none; + } + .badge { + border: 0.0625rem solid #222a42; + } + .table { + border-collapse: collapse !important; + } + .table td, + .table th { + background-color: #ffffff !important; + } + .table-bordered th, + .table-bordered td { + border: 1px solid #e3e3e3 !important; + } + .table-dark { + color: inherit; + } + .table-dark th, + .table-dark td, + .table-dark thead th, + .table-dark tbody + tbody { + border-color: #e3e3e3; + } + .table .thead-dark th { + color: inherit; + border-color: #e3e3e3; + } +} + +.alert { + border: 0; + color: #ffffff; +} + +.alert .alert-link { + color: #ffffff; +} + +.alert.alert-success { + background-color: #00bf9a; +} + +.alert i.fa, +.alert i.tim-icons { + font-size: 1rem; +} + +.alert .close { + color: #ffffff; + opacity: .9; + text-shadow: none; + line-height: 0; + outline: 0; +} + +.alert span[data-notify="icon"] { + font-size: 22px; + display: block; + left: 19px; + position: absolute; + top: 50%; + margin-top: -11px; +} + +.alert button.close { + position: absolute; + right: 15px; + top: 50%; + margin-top: -13px; + width: 25px; + height: 25px; + padding: 3px; +} + +.alert .close ~ span { + display: block; + max-width: 89%; +} + +.alert.alert-with-icon { + padding-left: 65px; +} + +.alert-dismissible .close { + top: 50%; + right: 1.25rem; + padding: 0; + transform: translateY(-50%); + color: rgba(255, 255, 255, 0.6); + opacity: 1; +} + +.alert-dismissible .close:hover, .alert-dismissible .close:focus { + color: rgba(255, 255, 255, 0.9); + opacity: 1 !important; +} + +@media (max-width: 575.98px) { + .alert-dismissible .close { + top: 1rem; + right: .5rem; + } +} + +.alert-dismissible .close > span:not(.sr-only) { + font-size: 1.5rem; + background-color: transparent; + color: rgba(255, 255, 255, 0.6); +} + +.alert-dismissible .close:hover > span:not(.sr-only), .alert-dismissible .close:focus > span:not(.sr-only) { + background-color: transparent; + color: rgba(255, 255, 255, 0.9); +} + +.btn, +.navbar .navbar-nav > a.btn { + border-width: 2px; + border: none; + position: relative; + overflow: hidden; + margin: 4px 1px; + border-radius: 0.4285rem; + cursor: pointer; + background: #344675; + background-image: -webkit-linear-gradient(to bottom left, #344675, #263148, #344675); + background-image: -o-linear-gradient(to bottom left, #344675, #263148, #344675); + background-image: -moz-linear-gradient(to bottom left, #344675, #263148, #344675); + background-image: linear-gradient(to bottom left, #344675, #263148, #344675); + background-size: 210% 210%; + background-position: top right; + background-color: #344675; + transition: all 0.15s ease; + box-shadow: none; + color: #ffffff; +} + +.btn.animation-on-hover:hover, +.navbar .navbar-nav > a.btn.animation-on-hover:hover { + background-position: bottom left; + transition: 0.3s ease-in-out; +} + +.btn:hover, .btn:focus, .btn:active, .btn.active, .btn:active:focus, .btn:active:hover, .btn.active:focus, .btn.active:hover, +.navbar .navbar-nav > a.btn:hover, +.navbar .navbar-nav > a.btn:focus, +.navbar .navbar-nav > a.btn:active, +.navbar .navbar-nav > a.btn.active, +.navbar .navbar-nav > a.btn:active:focus, +.navbar .navbar-nav > a.btn:active:hover, +.navbar .navbar-nav > a.btn.active:focus, +.navbar .navbar-nav > a.btn.active:hover { + background-color: #263148 !important; + background-image: linear-gradient(to bottom left, #344675, #263148, #344675) !important; + background-image: -webkit-linear-gradient(to bottom left, #344675, #263148, #344675) !important; + background-image: -o-linear-gradient(to bottom left, #344675, #263148, #344675) !important; + background-image: -moz-linear-gradient(to bottom left, #344675, #263148, #344675) !important; + color: #ffffff; + box-shadow: none; +} + +.btn:active, +.navbar .navbar-nav > a.btn:active { + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all .15s ease; +} + +.btn:not([data-action]):hover, +.navbar .navbar-nav > a.btn:not([data-action]):hover { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn.disabled, .btn.disabled:hover, .btn.disabled:focus, .btn.disabled.focus, .btn.disabled:active, .btn.disabled.active, .btn:disabled, .btn:disabled:hover, .btn:disabled:focus, .btn:disabled.focus, .btn:disabled:active, .btn:disabled.active, .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus, .btn[disabled].focus, .btn[disabled]:active, .btn[disabled].active, +fieldset[disabled] .btn, +fieldset[disabled] .btn:hover, +fieldset[disabled] .btn:focus, +fieldset[disabled] .btn.focus, +fieldset[disabled] .btn:active, +fieldset[disabled] .btn.active, +.navbar .navbar-nav > a.btn.disabled, +.navbar .navbar-nav > a.btn.disabled:hover, +.navbar .navbar-nav > a.btn.disabled:focus, +.navbar .navbar-nav > a.btn.disabled.focus, +.navbar .navbar-nav > a.btn.disabled:active, +.navbar .navbar-nav > a.btn.disabled.active, +.navbar .navbar-nav > a.btn:disabled, +.navbar .navbar-nav > a.btn:disabled:hover, +.navbar .navbar-nav > a.btn:disabled:focus, +.navbar .navbar-nav > a.btn:disabled.focus, +.navbar .navbar-nav > a.btn:disabled:active, +.navbar .navbar-nav > a.btn:disabled.active, +.navbar .navbar-nav > a.btn[disabled], +.navbar .navbar-nav > a.btn[disabled]:hover, +.navbar .navbar-nav > a.btn[disabled]:focus, +.navbar .navbar-nav > a.btn[disabled].focus, +.navbar .navbar-nav > a.btn[disabled]:active, +.navbar .navbar-nav > a.btn[disabled].active, +fieldset[disabled] +.navbar .navbar-nav > a.btn, +fieldset[disabled] +.navbar .navbar-nav > a.btn:hover, +fieldset[disabled] +.navbar .navbar-nav > a.btn:focus, +fieldset[disabled] +.navbar .navbar-nav > a.btn.focus, +fieldset[disabled] +.navbar .navbar-nav > a.btn:active, +fieldset[disabled] +.navbar .navbar-nav > a.btn.active { + background-color: #344675; + border-color: #344675; +} + +.btn.btn-simple, +.navbar .navbar-nav > a.btn.btn-simple { + color: #344675; + border-color: #344675; + background: transparent; +} + +.btn.btn-simple:hover, .btn.btn-simple:focus, .btn.btn-simple:active, .btn.btn-simple:not(:disabled):not(.disabled):active, +.navbar .navbar-nav > a.btn.btn-simple:hover, +.navbar .navbar-nav > a.btn.btn-simple:focus, +.navbar .navbar-nav > a.btn.btn-simple:active, +.navbar .navbar-nav > a.btn.btn-simple:not(:disabled):not(.disabled):active { + color: #344675; + border-color: #344675; + background-color: transparent !important; + background-image: none !important; + box-shadow: none; +} + +.btn.btn-simple.active, +.navbar .navbar-nav > a.btn.btn-simple.active { + border-color: #344675 !important; +} + +.btn.btn-simple.active:hover, .btn.btn-simple.active:focus, .btn.btn-simple.active:active, .btn.btn-simple.active:not(:disabled):not(.disabled):active, +.navbar .navbar-nav > a.btn.btn-simple.active:hover, +.navbar .navbar-nav > a.btn.btn-simple.active:focus, +.navbar .navbar-nav > a.btn.btn-simple.active:active, +.navbar .navbar-nav > a.btn.btn-simple.active:not(:disabled):not(.disabled):active { + color: #ffffff; + border-color: #344675; + background-image: linear-gradient(to bottom left, #344675, #263148, #344675) !important; + background-image: -webkit-linear-gradient(to bottom left, #344675, #263148, #344675) !important; + background-image: -o-linear-gradient(to bottom left, #344675, #263148, #344675) !important; + background-image: -moz-linear-gradient(to bottom left, #344675, #263148, #344675) !important; + background-color: #263148 !important; + box-shadow: none; +} + +.btn.btn-link, +.navbar .navbar-nav > a.btn.btn-link { + color: #344675; +} + +.btn.btn-link:hover, .btn.btn-link:focus, .btn.btn-link:active, +.navbar .navbar-nav > a.btn.btn-link:hover, +.navbar .navbar-nav > a.btn.btn-link:focus, +.navbar .navbar-nav > a.btn.btn-link:active { + background-color: transparent !important; + background-image: none !important; + color: #ffffff !important; + text-decoration: none; + box-shadow: none; +} + +.btn:hover, .btn:focus, +.navbar .navbar-nav > a.btn:hover, +.navbar .navbar-nav > a.btn:focus { + opacity: 1; + filter: alpha(opacity=100); + outline: 0 !important; +} + +.btn:active, .btn.active, +.open > .btn.dropdown-toggle, +.navbar .navbar-nav > a.btn:active, +.navbar .navbar-nav > a.btn.active, +.open > +.navbar .navbar-nav > a.btn.dropdown-toggle { + box-shadow: none; + outline: 0 !important; +} + +.btn .badge, +.navbar .navbar-nav > a.btn .badge { + margin: 0; +} + +.btn.btn-icon, +.navbar .navbar-nav > a.btn.btn-icon { + height: 2.375rem; + min-width: 2.375rem; + width: 2.375rem; + padding: 0; + font-size: 0.9375rem; + overflow: hidden; + position: relative; + line-height: normal; +} + +.btn.btn-icon.btn-simple, +.navbar .navbar-nav > a.btn.btn-icon.btn-simple { + padding: 0; +} + +.btn.btn-icon.btn-sm, .btn-group-sm > .btn.btn-icon, +.navbar .navbar-nav > a.btn.btn-icon.btn-sm, +.navbar .btn-group-sm.navbar-nav > a.btn.btn-icon { + height: 1.875rem; + min-width: 1.875rem; + width: 1.875rem; +} + +.btn.btn-icon.btn-sm .fa, .btn-group-sm > .btn.btn-icon .fa, +.btn.btn-icon.btn-sm .far, +.btn-group-sm > .btn.btn-icon .far, +.btn.btn-icon.btn-sm .fas, +.btn-group-sm > .btn.btn-icon .fas, +.btn.btn-icon.btn-sm .tim-icons, +.btn-group-sm > .btn.btn-icon .tim-icons, +.navbar .navbar-nav > a.btn.btn-icon.btn-sm .fa, +.navbar .btn-group-sm.navbar-nav > a.btn.btn-icon .fa, +.navbar .navbar-nav > a.btn.btn-icon.btn-sm .far, +.navbar .btn-group-sm.navbar-nav > a.btn.btn-icon .far, +.navbar .navbar-nav > a.btn.btn-icon.btn-sm .fas, +.navbar .btn-group-sm.navbar-nav > a.btn.btn-icon .fas, +.navbar .navbar-nav > a.btn.btn-icon.btn-sm .tim-icons, +.navbar .btn-group-sm.navbar-nav > a.btn.btn-icon .tim-icons { + font-size: 0.6875rem; +} + +.btn.btn-icon.btn-lg, .btn-group-lg > .btn.btn-icon, +.navbar .navbar-nav > a.btn.btn-icon.btn-lg, +.navbar .btn-group-lg.navbar-nav > a.btn.btn-icon { + height: 3.6rem; + min-width: 3.6rem; + width: 3.6rem; +} + +.btn.btn-icon.btn-lg .fa, .btn-group-lg > .btn.btn-icon .fa, +.btn.btn-icon.btn-lg .far, +.btn-group-lg > .btn.btn-icon .far, +.btn.btn-icon.btn-lg .fas, +.btn-group-lg > .btn.btn-icon .fas, +.btn.btn-icon.btn-lg .tim-icons, +.btn-group-lg > .btn.btn-icon .tim-icons, +.navbar .navbar-nav > a.btn.btn-icon.btn-lg .fa, +.navbar .btn-group-lg.navbar-nav > a.btn.btn-icon .fa, +.navbar .navbar-nav > a.btn.btn-icon.btn-lg .far, +.navbar .btn-group-lg.navbar-nav > a.btn.btn-icon .far, +.navbar .navbar-nav > a.btn.btn-icon.btn-lg .fas, +.navbar .btn-group-lg.navbar-nav > a.btn.btn-icon .fas, +.navbar .navbar-nav > a.btn.btn-icon.btn-lg .tim-icons, +.navbar .btn-group-lg.navbar-nav > a.btn.btn-icon .tim-icons { + font-size: 1.325rem; +} + +.btn.btn-icon:not(.btn-footer) .tim-icons, +.btn.btn-icon:not(.btn-footer) .fa, +.btn.btn-icon:not(.btn-footer) .far, +.btn.btn-icon:not(.btn-footer) .fas, +.navbar .navbar-nav > a.btn.btn-icon:not(.btn-footer) .tim-icons, +.navbar .navbar-nav > a.btn.btn-icon:not(.btn-footer) .fa, +.navbar .navbar-nav > a.btn.btn-icon:not(.btn-footer) .far, +.navbar .navbar-nav > a.btn.btn-icon:not(.btn-footer) .fas { + position: absolute; + font-size: 1em; + top: 50%; + left: 50%; + transform: translate(-12px, -12px); + line-height: 1.5626rem; + width: 24px; +} + +.btn:not(.btn-icon) .tim-icons, +.navbar .navbar-nav > a.btn:not(.btn-icon) .tim-icons { + position: relative; + top: 1px; +} + +.btn span, +.navbar .navbar-nav > a.btn span { + position: relative; + display: block; +} + +.btn.btn-link.dropdown-toggle, +.navbar .navbar-nav > a.btn.btn-link.dropdown-toggle { + color: #9A9A9A; +} + +.btn.dropdown-toggle:after, +.navbar .navbar-nav > a.btn.dropdown-toggle:after { + margin-left: 30px !important; +} + +.btn-primary { + background: #e14eca; + background-image: -webkit-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca); + background-image: -o-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca); + background-image: -moz-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca); + background-image: linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca); + background-size: 210% 210%; + background-position: top right; + background-color: #e14eca; + transition: all 0.15s ease; + box-shadow: none; + color: #ffffff; +} + +.btn-primary.animation-on-hover:hover { + background-position: bottom left; + transition: 0.3s ease-in-out; +} + +.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:focus, .btn-primary.active:hover { + background-color: #ba54f5 !important; + background-image: linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important; + background-image: -webkit-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important; + background-image: -o-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important; + background-image: -moz-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important; + color: #ffffff; + box-shadow: none; +} + +.btn-primary:active { + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all .15s ease; +} + +.btn-primary:not([data-action]):hover { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary:disabled, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled.focus, .btn-primary:disabled:active, .btn-primary:disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, +fieldset[disabled] .btn-primary, +fieldset[disabled] .btn-primary:hover, +fieldset[disabled] .btn-primary:focus, +fieldset[disabled] .btn-primary.focus, +fieldset[disabled] .btn-primary:active, +fieldset[disabled] .btn-primary.active { + background-color: #e14eca; + border-color: #e14eca; +} + +.btn-primary.btn-simple { + color: #e14eca; + border-color: #e14eca; + background: transparent; +} + +.btn-primary.btn-simple:hover, .btn-primary.btn-simple:focus, .btn-primary.btn-simple:active, .btn-primary.btn-simple:not(:disabled):not(.disabled):active { + color: #e14eca; + border-color: #e14eca; + background-color: transparent !important; + background-image: none !important; + box-shadow: none; +} + +.btn-primary.btn-simple.active { + border-color: #e14eca !important; +} + +.btn-primary.btn-simple.active:hover, .btn-primary.btn-simple.active:focus, .btn-primary.btn-simple.active:active, .btn-primary.btn-simple.active:not(:disabled):not(.disabled):active { + color: #ffffff; + border-color: #e14eca; + background-image: linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important; + background-image: -webkit-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important; + background-image: -o-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important; + background-image: -moz-linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important; + background-color: #ba54f5 !important; + box-shadow: none; +} + +.btn-primary.btn-link { + color: #e14eca; +} + +.btn-primary.btn-link:hover, .btn-primary.btn-link:focus, .btn-primary.btn-link:active { + background-color: transparent !important; + background-image: none !important; + color: #ffffff !important; + text-decoration: none; + box-shadow: none; +} + +.btn-success { + background: #00f2c3; + background-image: -webkit-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3); + background-image: -o-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3); + background-image: -moz-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3); + background-image: linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3); + background-size: 210% 210%; + background-position: top right; + background-color: #00f2c3; + transition: all 0.15s ease; + box-shadow: none; + color: #ffffff; +} + +.btn-success.animation-on-hover:hover { + background-position: bottom left; + transition: 0.3s ease-in-out; +} + +.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success:active:focus, .btn-success:active:hover, .btn-success.active:focus, .btn-success.active:hover { + background-color: #0098f0 !important; + background-image: linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3) !important; + background-image: -webkit-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3) !important; + background-image: -o-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3) !important; + background-image: -moz-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3) !important; + color: #ffffff; + box-shadow: none; +} + +.btn-success:active { + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all .15s ease; +} + +.btn-success:not([data-action]):hover { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success:disabled, .btn-success:disabled:hover, .btn-success:disabled:focus, .btn-success:disabled.focus, .btn-success:disabled:active, .btn-success:disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled].active, +fieldset[disabled] .btn-success, +fieldset[disabled] .btn-success:hover, +fieldset[disabled] .btn-success:focus, +fieldset[disabled] .btn-success.focus, +fieldset[disabled] .btn-success:active, +fieldset[disabled] .btn-success.active { + background-color: #00f2c3; + border-color: #00f2c3; +} + +.btn-success.btn-simple { + color: #00f2c3; + border-color: #00f2c3; + background: transparent; +} + +.btn-success.btn-simple:hover, .btn-success.btn-simple:focus, .btn-success.btn-simple:active, .btn-success.btn-simple:not(:disabled):not(.disabled):active { + color: #00f2c3; + border-color: #00f2c3; + background-color: transparent !important; + background-image: none !important; + box-shadow: none; +} + +.btn-success.btn-simple.active { + border-color: #00f2c3 !important; +} + +.btn-success.btn-simple.active:hover, .btn-success.btn-simple.active:focus, .btn-success.btn-simple.active:active, .btn-success.btn-simple.active:not(:disabled):not(.disabled):active { + color: #ffffff; + border-color: #00f2c3; + background-image: linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3) !important; + background-image: -webkit-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3) !important; + background-image: -o-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3) !important; + background-image: -moz-linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3) !important; + background-color: #0098f0 !important; + box-shadow: none; +} + +.btn-success.btn-link { + color: #00f2c3; +} + +.btn-success.btn-link:hover, .btn-success.btn-link:focus, .btn-success.btn-link:active { + background-color: transparent !important; + background-image: none !important; + color: #ffffff !important; + text-decoration: none; + box-shadow: none; +} + +.btn-info { + background: #1d8cf8; + background-image: -webkit-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8); + background-image: -o-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8); + background-image: -moz-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8); + background-image: linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8); + background-size: 210% 210%; + background-position: top right; + background-color: #1d8cf8; + transition: all 0.15s ease; + box-shadow: none; + color: #ffffff; +} + +.btn-info.animation-on-hover:hover { + background-position: bottom left; + transition: 0.3s ease-in-out; +} + +.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info:active:focus, .btn-info:active:hover, .btn-info.active:focus, .btn-info.active:hover { + background-color: #3358f4 !important; + background-image: linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8) !important; + background-image: -webkit-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8) !important; + background-image: -o-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8) !important; + background-image: -moz-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8) !important; + color: #ffffff; + box-shadow: none; +} + +.btn-info:active { + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all .15s ease; +} + +.btn-info:not([data-action]):hover { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info:disabled, .btn-info:disabled:hover, .btn-info:disabled:focus, .btn-info:disabled.focus, .btn-info:disabled:active, .btn-info:disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus, .btn-info[disabled]:active, .btn-info[disabled].active, +fieldset[disabled] .btn-info, +fieldset[disabled] .btn-info:hover, +fieldset[disabled] .btn-info:focus, +fieldset[disabled] .btn-info.focus, +fieldset[disabled] .btn-info:active, +fieldset[disabled] .btn-info.active { + background-color: #1d8cf8; + border-color: #1d8cf8; +} + +.btn-info.btn-simple { + color: #1d8cf8; + border-color: #1d8cf8; + background: transparent; +} + +.btn-info.btn-simple:hover, .btn-info.btn-simple:focus, .btn-info.btn-simple:active, .btn-info.btn-simple:not(:disabled):not(.disabled):active { + color: #1d8cf8; + border-color: #1d8cf8; + background-color: transparent !important; + background-image: none !important; + box-shadow: none; +} + +.btn-info.btn-simple.active { + border-color: #1d8cf8 !important; +} + +.btn-info.btn-simple.active:hover, .btn-info.btn-simple.active:focus, .btn-info.btn-simple.active:active, .btn-info.btn-simple.active:not(:disabled):not(.disabled):active { + color: #ffffff; + border-color: #1d8cf8; + background-image: linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8) !important; + background-image: -webkit-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8) !important; + background-image: -o-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8) !important; + background-image: -moz-linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8) !important; + background-color: #3358f4 !important; + box-shadow: none; +} + +.btn-info.btn-link { + color: #1d8cf8; +} + +.btn-info.btn-link:hover, .btn-info.btn-link:focus, .btn-info.btn-link:active { + background-color: transparent !important; + background-image: none !important; + color: #ffffff !important; + text-decoration: none; + box-shadow: none; +} + +.btn-warning { + background: #ff8d72; + background-image: -webkit-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72); + background-image: -o-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72); + background-image: -moz-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72); + background-image: linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72); + background-size: 210% 210%; + background-position: top right; + background-color: #ff8d72; + transition: all 0.15s ease; + box-shadow: none; + color: #ffffff; +} + +.btn-warning.animation-on-hover:hover { + background-position: bottom left; + transition: 0.3s ease-in-out; +} + +.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning:active:focus, .btn-warning:active:hover, .btn-warning.active:focus, .btn-warning.active:hover { + background-color: #ff6491 !important; + background-image: linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72) !important; + background-image: -webkit-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72) !important; + background-image: -o-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72) !important; + background-image: -moz-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72) !important; + color: #ffffff; + box-shadow: none; +} + +.btn-warning:active { + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all .15s ease; +} + +.btn-warning:not([data-action]):hover { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning:disabled, .btn-warning:disabled:hover, .btn-warning:disabled:focus, .btn-warning:disabled.focus, .btn-warning:disabled:active, .btn-warning:disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, +fieldset[disabled] .btn-warning, +fieldset[disabled] .btn-warning:hover, +fieldset[disabled] .btn-warning:focus, +fieldset[disabled] .btn-warning.focus, +fieldset[disabled] .btn-warning:active, +fieldset[disabled] .btn-warning.active { + background-color: #ff8d72; + border-color: #ff8d72; +} + +.btn-warning.btn-simple { + color: #ff8d72; + border-color: #ff8d72; + background: transparent; +} + +.btn-warning.btn-simple:hover, .btn-warning.btn-simple:focus, .btn-warning.btn-simple:active, .btn-warning.btn-simple:not(:disabled):not(.disabled):active { + color: #ff8d72; + border-color: #ff8d72; + background-color: transparent !important; + background-image: none !important; + box-shadow: none; +} + +.btn-warning.btn-simple.active { + border-color: #ff8d72 !important; +} + +.btn-warning.btn-simple.active:hover, .btn-warning.btn-simple.active:focus, .btn-warning.btn-simple.active:active, .btn-warning.btn-simple.active:not(:disabled):not(.disabled):active { + color: #ffffff; + border-color: #ff8d72; + background-image: linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72) !important; + background-image: -webkit-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72) !important; + background-image: -o-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72) !important; + background-image: -moz-linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72) !important; + background-color: #ff6491 !important; + box-shadow: none; +} + +.btn-warning.btn-link { + color: #ff8d72; +} + +.btn-warning.btn-link:hover, .btn-warning.btn-link:focus, .btn-warning.btn-link:active { + background-color: transparent !important; + background-image: none !important; + color: #ffffff !important; + text-decoration: none; + box-shadow: none; +} + +.btn-warning:not(:disabled):not(.disabled):active { + color: #ffffff; +} + +.btn-danger { + background: #fd5d93; + background-image: -webkit-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93); + background-image: -o-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93); + background-image: -moz-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93); + background-image: linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93); + background-size: 210% 210%; + background-position: top right; + background-color: #fd5d93; + transition: all 0.15s ease; + box-shadow: none; + color: #ffffff; +} + +.btn-danger.animation-on-hover:hover { + background-position: bottom left; + transition: 0.3s ease-in-out; +} + +.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger:active:focus, .btn-danger:active:hover, .btn-danger.active:focus, .btn-danger.active:hover { + background-color: #ec250d !important; + background-image: linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93) !important; + background-image: -webkit-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93) !important; + background-image: -o-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93) !important; + background-image: -moz-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93) !important; + color: #ffffff; + box-shadow: none; +} + +.btn-danger:active { + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all .15s ease; +} + +.btn-danger:not([data-action]):hover { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger:disabled, .btn-danger:disabled:hover, .btn-danger:disabled:focus, .btn-danger:disabled.focus, .btn-danger:disabled:active, .btn-danger:disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, +fieldset[disabled] .btn-danger, +fieldset[disabled] .btn-danger:hover, +fieldset[disabled] .btn-danger:focus, +fieldset[disabled] .btn-danger.focus, +fieldset[disabled] .btn-danger:active, +fieldset[disabled] .btn-danger.active { + background-color: #fd5d93; + border-color: #fd5d93; +} + +.btn-danger.btn-simple { + color: #fd5d93; + border-color: #fd5d93; + background: transparent; +} + +.btn-danger.btn-simple:hover, .btn-danger.btn-simple:focus, .btn-danger.btn-simple:active, .btn-danger.btn-simple:not(:disabled):not(.disabled):active { + color: #fd5d93; + border-color: #fd5d93; + background-color: transparent !important; + background-image: none !important; + box-shadow: none; +} + +.btn-danger.btn-simple.active { + border-color: #fd5d93 !important; +} + +.btn-danger.btn-simple.active:hover, .btn-danger.btn-simple.active:focus, .btn-danger.btn-simple.active:active, .btn-danger.btn-simple.active:not(:disabled):not(.disabled):active { + color: #ffffff; + border-color: #fd5d93; + background-image: linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93) !important; + background-image: -webkit-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93) !important; + background-image: -o-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93) !important; + background-image: -moz-linear-gradient(to bottom left, #fd5d93, #ec250d, #fd5d93) !important; + background-color: #ec250d !important; + box-shadow: none; +} + +.btn-danger.btn-link { + color: #fd5d93; +} + +.btn-danger.btn-link:hover, .btn-danger.btn-link:focus, .btn-danger.btn-link:active { + background-color: transparent !important; + background-image: none !important; + color: #ffffff !important; + text-decoration: none; + box-shadow: none; +} + +.btn-neutral { + background: #ffffff; + background-image: -webkit-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff); + background-image: -o-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff); + background-image: -moz-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff); + background-image: linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff); + background-size: 210% 210%; + background-position: top right; + background-color: #ffffff; + transition: all 0.15s ease; + box-shadow: none; + color: #e14eca; +} + +.btn-neutral.animation-on-hover:hover { + background-position: bottom left; + transition: 0.3s ease-in-out; +} + +.btn-neutral:hover, .btn-neutral:focus, .btn-neutral:active, .btn-neutral.active, .btn-neutral:active:focus, .btn-neutral:active:hover, .btn-neutral.active:focus, .btn-neutral.active:hover { + background-color: #ffffff !important; + background-image: linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff) !important; + background-image: -webkit-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff) !important; + background-image: -o-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff) !important; + background-image: -moz-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff) !important; + color: #ffffff; + box-shadow: none; +} + +.btn-neutral:active { + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all .15s ease; +} + +.btn-neutral:not([data-action]):hover { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-neutral.disabled, .btn-neutral.disabled:hover, .btn-neutral.disabled:focus, .btn-neutral.disabled.focus, .btn-neutral.disabled:active, .btn-neutral.disabled.active, .btn-neutral:disabled, .btn-neutral:disabled:hover, .btn-neutral:disabled:focus, .btn-neutral:disabled.focus, .btn-neutral:disabled:active, .btn-neutral:disabled.active, .btn-neutral[disabled], .btn-neutral[disabled]:hover, .btn-neutral[disabled]:focus, .btn-neutral[disabled].focus, .btn-neutral[disabled]:active, .btn-neutral[disabled].active, +fieldset[disabled] .btn-neutral, +fieldset[disabled] .btn-neutral:hover, +fieldset[disabled] .btn-neutral:focus, +fieldset[disabled] .btn-neutral.focus, +fieldset[disabled] .btn-neutral:active, +fieldset[disabled] .btn-neutral.active { + background-color: #ffffff; + border-color: #ffffff; +} + +.btn-neutral.btn-danger { + color: #fd5d93; +} + +.btn-neutral.btn-danger:hover, .btn-neutral.btn-danger:focus, .btn-neutral.btn-danger:active, .btn-neutral.btn-danger:active:focus { + color: #ec250d; +} + +.btn-neutral.btn-info { + color: #1d8cf8; +} + +.btn-neutral.btn-info:hover, .btn-neutral.btn-info:focus, .btn-neutral.btn-info:active, .btn-neutral.btn-info:active:focus { + color: #3358f4; +} + +.btn-neutral.btn-warning { + color: #ff8d72; +} + +.btn-neutral.btn-warning:hover, .btn-neutral.btn-warning:focus, .btn-neutral.btn-warning:active, .btn-neutral.btn-warning:active:focus { + color: #ff6491; +} + +.btn-neutral.btn-success { + color: #00f2c3; +} + +.btn-neutral.btn-success:hover, .btn-neutral.btn-success:focus, .btn-neutral.btn-success:active, .btn-neutral.btn-success:active:focus { + color: #0098f0; +} + +.btn-neutral.btn-default { + color: #344675; +} + +.btn-neutral.btn-default:hover, .btn-neutral.btn-default:focus, .btn-neutral.btn-default:active, .btn-neutral.btn-default:active:focus { + color: #263148; +} + +.btn-neutral.active, .btn-neutral:active, .btn-neutral:active:focus, .btn-neutral:active:hover, .btn-neutral.active:focus, .btn-neutral.active:hover, +.show > .btn-neutral.dropdown-toggle, +.show > .btn-neutral.dropdown-toggle:focus, +.show > .btn-neutral.dropdown-toggle:hover { + background-color: #ffffff; + color: #ba54f5; + box-shadow: none; +} + +.btn-neutral:hover, .btn-neutral:focus { + color: #ba54f5; +} + +.btn-neutral:hover:not(.nav-link), .btn-neutral:focus:not(.nav-link) { + box-shadow: none; +} + +.btn-neutral.btn-simple { + color: #ffffff; + border-color: #ffffff; + background: transparent; +} + +.btn-neutral.btn-simple:hover, .btn-neutral.btn-simple:focus, .btn-neutral.btn-simple:active, .btn-neutral.btn-simple:not(:disabled):not(.disabled):active { + color: #ffffff; + border-color: #ffffff; + background-color: transparent !important; + background-image: none !important; + box-shadow: none; +} + +.btn-neutral.btn-simple.active { + border-color: #ffffff !important; +} + +.btn-neutral.btn-simple.active:hover, .btn-neutral.btn-simple.active:focus, .btn-neutral.btn-simple.active:active, .btn-neutral.btn-simple.active:not(:disabled):not(.disabled):active { + color: #ffffff; + border-color: #ffffff; + background-image: linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff) !important; + background-image: -webkit-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff) !important; + background-image: -o-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff) !important; + background-image: -moz-linear-gradient(to bottom left, #ffffff, #ffffff, #ffffff) !important; + background-color: #ffffff !important; + box-shadow: none; +} + +.btn-neutral.btn-link { + color: #ffffff; +} + +.btn-neutral.btn-link:hover, .btn-neutral.btn-link:focus, .btn-neutral.btn-link:active { + background-color: transparent !important; + background-image: none !important; + color: #ffffff !important; + text-decoration: none; + box-shadow: none; +} + +.btn:disabled, .btn[disabled], .btn.disabled { + opacity: 0.5; + filter: alpha(opacity=50); + pointer-events: none; +} + +.btn-simple { + border: 1px solid; + border-color: #344675; + box-shadow: none; + padding: 10px 22px; + background-color: transparent; +} + +.btn-simple.disabled, .btn-simple.disabled:hover, .btn-simple.disabled:focus, .btn-simple.disabled.focus, .btn-simple.disabled:active, .btn-simple.disabled.active, .btn-simple:disabled, .btn-simple:disabled:hover, .btn-simple:disabled:focus, .btn-simple:disabled.focus, .btn-simple:disabled:active, .btn-simple:disabled.active, .btn-simple[disabled], .btn-simple[disabled]:hover, .btn-simple[disabled]:focus, .btn-simple[disabled].focus, .btn-simple[disabled]:active, .btn-simple[disabled].active, +fieldset[disabled] .btn-simple, +fieldset[disabled] .btn-simple:hover, +fieldset[disabled] .btn-simple:focus, +fieldset[disabled] .btn-simple.focus, +fieldset[disabled] .btn-simple:active, +fieldset[disabled] .btn-simple.active, +.btn-link.disabled, +.btn-link.disabled:hover, +.btn-link.disabled:focus, +.btn-link.disabled.focus, +.btn-link.disabled:active, +.btn-link.disabled.active, +.btn-link:disabled, +.btn-link:disabled:hover, +.btn-link:disabled:focus, +.btn-link:disabled.focus, +.btn-link:disabled:active, +.btn-link:disabled.active, +.btn-link[disabled], +.btn-link[disabled]:hover, +.btn-link[disabled]:focus, +.btn-link[disabled].focus, +.btn-link[disabled]:active, +.btn-link[disabled].active, +fieldset[disabled] +.btn-link, +fieldset[disabled] +.btn-link:hover, +fieldset[disabled] +.btn-link:focus, +fieldset[disabled] +.btn-link.focus, +fieldset[disabled] +.btn-link:active, +fieldset[disabled] +.btn-link.active { + background: transparent; +} + +.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); +} + +.btn-link { + border: 0; + box-shadow: none; + padding: 0.5rem 0.7rem; + background: transparent; + color: #e3e3e3; + font-weight: 600; +} + +.btn-link:hover { + box-shadow: none !important; + transform: none !important; +} + +.btn-lg, .btn-group-lg > .btn { + font-size: 0.875rem; + border-radius: 0.4285rem; + padding: 15px 48px; +} + +.btn-lg.btn-simple, .btn-group-lg > .btn-simple.btn { + padding: 14px 47px; +} + +.btn-sm, .btn-group-sm > .btn { + font-size: 0.875rem; + border-radius: 0.2857rem; + padding: 5px 15px; +} + +.btn-sm.btn-simple, .btn-group-sm > .btn-simple.btn { + padding: 4px 14px; +} + +.btn-wd { + min-width: 140px; +} + +.btn-group.select { + width: 100%; +} + +.btn-group .btn.active { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-group.select .btn { + text-align: left; +} + +.btn-group.select .caret { + position: absolute; + top: 50%; + margin-top: -1px; + right: 8px; +} + +.btn-group .btn.active { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-round { + border-width: 1px; + border-radius: 30px; +} + +.btn-round.btn-simple { + padding: 10px 22px; +} + +.no-caret.dropdown-toggle::after { + display: none; +} + +.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, +.show > .btn-secondary.dropdown-toggle { + color: #ffffff; +} + +.btn-group label.btn.active { + transform: translateY(0); + -webkit-transform: translateY(0); +} + +.dropdown-menu { + border: 0; + box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); + border-radius: 0.1428rem; + -webkit-transition: all 150ms linear; + -moz-transition: all 150ms linear; + -o-transition: all 150ms linear; + -ms-transition: all 150ms linear; + transition: all 150ms linear; +} + +.dropdown-menu.dropdown-menu-right:before, .dropdown-menu.dropdown-menu-right:after { + left: auto; + right: 10px; +} + +.dropdown-menu.dropdown-black { + background: linear-gradient(to bottom, #222a42 0%, #1d253b 100%); + border: 1px solid #344675; +} + +.dropdown-menu.dropdown-black .dropdown-item { + color: rgba(255, 255, 255, 0.7); +} + +.dropdown-menu.dropdown-black .dropdown-divider { + border-color: #344675; +} + +.dropdown-menu.dropdown-black:before { + color: #222a42; + z-index: 2; +} + +.dropdown-menu.dropdown-black:after { + display: inline-block; + position: absolute; + width: 0; + height: 0; + z-index: 1; + vertical-align: middle; + content: ""; + top: -6px; + left: 10px; + right: auto; + color: #344675; + border-bottom: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; +} + +.dropdown-menu.dropdown-black.dropdown-menu-right:after { + left: auto; + right: 10px; +} + +.dropup .dropdown-menu.dropdown-black:after { + color: #1d253b; + z-index: 2; +} + +.dropup .dropdown-menu.dropdown-black:before { + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: auto; + bottom: -6px; + right: auto; + left: 10px; + color: #555555; + border-top: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; + border-bottom: none; + z-index: 1; +} + +.dropdown-menu i { + margin-right: 5px; + position: relative; + top: 1px; +} + +.dropdown-menu .tim-icons { + margin-right: 10px; + position: relative; + top: 4px; + font-size: 18px; + margin-top: -5px; + opacity: .5; +} + +.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { + color: inherit; +} + +.dropup .dropdown-menu:before { + display: none; +} + +.dropup .dropdown-menu:after { + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: auto; + bottom: -5px; + right: auto; + left: 10px; + color: #ffffff; + border-top: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; + border-bottom: none; +} + +.dropup .dropdown-menu.dropdown-menu-right:after, .dropup .dropdown-menu.dropdown-menu-right:before { + right: 10px; + left: auto; +} + +.dropdown-menu:before { + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: -5px; + left: 10px; + right: auto; + color: #ffffff; + border-bottom: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; +} + +.dropdown-menu.dropdown-menu-right { + right: 0 !important; + left: auto !important; +} + +.dropdown-menu .dropdown-item, +.bootstrap-select .dropdown-menu.inner li a { + font-size: 0.75rem; + padding-top: .6rem; + padding-bottom: .6rem; + margin-top: 5px; + -webkit-transition: all 150ms linear; + -moz-transition: all 150ms linear; + -o-transition: all 150ms linear; + -ms-transition: all 150ms linear; + transition: all 150ms linear; +} + +.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, +.bootstrap-select .dropdown-menu.inner li a:hover, +.bootstrap-select .dropdown-menu.inner li a:focus { + background-color: rgba(222, 222, 222, 0.3); +} + +.dropdown-menu .dropdown-item.disabled, .dropdown-menu .dropdown-item:disabled, +.bootstrap-select .dropdown-menu.inner li a.disabled, +.bootstrap-select .dropdown-menu.inner li a:disabled { + color: rgba(182, 182, 182, 0.6); +} + +.dropdown-menu .dropdown-item.disabled:hover, .dropdown-menu .dropdown-item.disabled:focus, .dropdown-menu .dropdown-item:disabled:hover, .dropdown-menu .dropdown-item:disabled:focus, +.bootstrap-select .dropdown-menu.inner li a.disabled:hover, +.bootstrap-select .dropdown-menu.inner li a.disabled:focus, +.bootstrap-select .dropdown-menu.inner li a:disabled:hover, +.bootstrap-select .dropdown-menu.inner li a:disabled:focus { + background-color: transparent; + box-shadow: none; +} + +.dropdown-menu .dropdown-divider { + background-color: rgba(222, 222, 222, 0.5); +} + +.dropdown-menu .dropdown-header:not([href]):not([tabindex]) { + color: rgba(182, 182, 182, 0.6); + font-size: 0.62475rem; + text-transform: uppercase; + font-weight: 600; +} + +.dropdown-menu.dropdown-primary { + background-color: #df41c6; +} + +.dropdown-menu.dropdown-primary:before { + color: #df41c6; +} + +.dropdown-menu.dropdown-primary .dropdown-header:not([href]):not([tabindex]) { + color: rgba(255, 255, 255, 0.8); +} + +.dropdown-menu.dropdown-primary .dropdown-item { + color: #ffffff; +} + +.dropdown-menu.dropdown-primary .dropdown-item:hover, .dropdown-menu.dropdown-primary .dropdown-item:focus { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-primary .dropdown-divider { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-info { + background-color: #0e84f8; +} + +.dropdown-menu.dropdown-info:before { + color: #0e84f8; +} + +.dropdown-menu.dropdown-info .dropdown-header:not([href]):not([tabindex]) { + color: rgba(255, 255, 255, 0.8); +} + +.dropdown-menu.dropdown-info .dropdown-item { + color: #ffffff; +} + +.dropdown-menu.dropdown-info .dropdown-item:hover, .dropdown-menu.dropdown-info .dropdown-item:focus { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-info .dropdown-divider { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-danger { + background-color: #fd4e89; +} + +.dropdown-menu.dropdown-danger:before { + color: #fd4e89; +} + +.dropdown-menu.dropdown-danger .dropdown-header:not([href]):not([tabindex]) { + color: rgba(255, 255, 255, 0.8); +} + +.dropdown-menu.dropdown-danger .dropdown-item { + color: #ffffff; +} + +.dropdown-menu.dropdown-danger .dropdown-item:hover, .dropdown-menu.dropdown-danger .dropdown-item:focus { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-danger .dropdown-divider { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-success { + background-color: #00e3b7; +} + +.dropdown-menu.dropdown-success:before { + color: #00e3b7; +} + +.dropdown-menu.dropdown-success .dropdown-header:not([href]):not([tabindex]) { + color: rgba(255, 255, 255, 0.8); +} + +.dropdown-menu.dropdown-success .dropdown-item { + color: #ffffff; +} + +.dropdown-menu.dropdown-success .dropdown-item:hover, .dropdown-menu.dropdown-success .dropdown-item:focus { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-success .dropdown-divider { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-warning { + background-color: #ff8163; +} + +.dropdown-menu.dropdown-warning:before { + color: #ff8163; +} + +.dropdown-menu.dropdown-warning .dropdown-header:not([href]):not([tabindex]) { + color: rgba(255, 255, 255, 0.8); +} + +.dropdown-menu.dropdown-warning .dropdown-item { + color: #ffffff; +} + +.dropdown-menu.dropdown-warning .dropdown-item:hover, .dropdown-menu.dropdown-warning .dropdown-item:focus { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown-menu.dropdown-warning .dropdown-divider { + background-color: rgba(255, 255, 255, 0.2); +} + +.dropdown .dropdown-menu, +.dropup:not(.bootstrap-select) .dropdown-menu, +.bootstrap-select .dropdown-menu:not(.inner), .dropdown-menu.bootstrap-datetimepicker-widget.bottom { + -webkit-transform: translate3d(0, -20px, 0) !important; + -moz-transform: translate3d(0, -20px, 0) !important; + -o-transform: translate3d(0, -20px, 0) !important; + -ms-transform: translate3d(0, -20px, 0) !important; + transform: translate3d(0, -20px, 0) !important; + visibility: hidden; + display: block; + opacity: 0; + filter: alpha(opacity=0); + top: 100% !important; +} + +.dropdown-menu.bootstrap-datetimepicker-widget.top { + -webkit-transform: translate3d(0, -20px, 0) !important; + -moz-transform: translate3d(0, -20px, 0) !important; + -o-transform: translate3d(0, -20px, 0) !important; + -ms-transform: translate3d(0, -20px, 0) !important; + transform: translate3d(0, -20px, 0) !important; + visibility: hidden; + display: block; + opacity: 0; + filter: alpha(opacity=0); +} + +.dropdown-menu.bootstrap-datetimepicker-widget.top, .dropdown-menu.bootstrap-datetimepicker-widget.bottom { + -webkit-transform: translate3d(0, -20px, 0) !important; + -moz-transform: translate3d(0, -20px, 0) !important; + -o-transform: translate3d(0, -20px, 0) !important; + -ms-transform: translate3d(0, -20px, 0) !important; + transform: translate3d(0, -20px, 0) !important; +} + +.bootstrap-select.dropup .dropdown-menu:not(.inner) { + -webkit-transform: translate3d(0, 25px, 0) !important; + -moz-transform: translate3d(0, 25px, 0) !important; + -o-transform: translate3d(0, 25px, 0) !important; + -ms-transform: translate3d(0, 25px, 0) !important; + transform: translate3d(0, 25px, 0) !important; +} + +.dropup:not(.bootstrap-select) .dropdown-menu { + -webkit-transform: translate3d(0, 20px, 0) !important; + -moz-transform: translate3d(0, 20px, 0) !important; + -o-transform: translate3d(0, 20px, 0) !important; + -ms-transform: translate3d(0, 20px, 0) !important; + transform: translate3d(0, 20px, 0) !important; + top: auto !important; + bottom: 100%; +} + +.dropdown.show .dropdown-menu, +.bootstrap-select.show .dropdown-menu:not(.inner), .dropdown-menu.bootstrap-datetimepicker-widget.top.open, .dropdown-menu.bootstrap-datetimepicker-widget.bottom.open, +.dropup.show:not(.bootstrap-select) .dropdown-menu, +.navbar .dropdown.show .dropdown-menu { + opacity: 1; + filter: alpha(opacity=100); + visibility: visible; + -webkit-transform: translate3d(0, 1px, 0) !important; + -moz-transform: translate3d(0, 1px, 0) !important; + -o-transform: translate3d(0, 1px, 0) !important; + -ms-transform: translate3d(0, 1px, 0) !important; + transform: translate3d(0, 1px, 0) !important; +} + +.dropdown-menu.bootstrap-datetimepicker-widget.top.open, .dropdown-menu.bootstrap-datetimepicker-widget.bottom.open { + -webkit-transform: translate3d(0, 0px, 0) !important; + -moz-transform: translate3d(0, 0px, 0) !important; + -o-transform: translate3d(0, 0px, 0) !important; + -ms-transform: translate3d(0, 0px, 0) !important; + transform: translate3d(0, 0px, 0) !important; +} + +.dropup.show:not(.bootstrap-select) .dropdown-menu { + -webkit-transform: translate3d(0, -2px, 0) !important; + -moz-transform: translate3d(0, -2px, 0) !important; + -o-transform: translate3d(0, -2px, 0) !important; + -ms-transform: translate3d(0, -2px, 0) !important; + transform: translate3d(0, -2px, 0) !important; +} + +.dropdown-menu.dropdown-navbar { + left: -80px; +} + +.dropdown-menu.dropdown-navbar:before, .dropdown-menu.dropdown-navbar:after { + left: auto; + right: 17px; +} + +.btn { + cursor: pointer; +} + +.btn.dropdown-toggle[data-toggle="dropdown"] { + padding: 10px; + margin: 0; + margin-bottom: 5px; +} + +.btn.dropdown-toggle[data-toggle="dropdown"]:after { + content: ""; + margin-left: 5px; +} + +.btn span.bs-caret { + display: none; +} + +.btn.btn-link.dropdown-toggle { + height: 22px; + padding: 0; + margin-right: 5px; +} + +.dropdown-toggle:after { + content: unset; +} + +.btn:not(:disabled):not(.disabled).active:focus, +.btn:not(:disabled):not(.disabled):active:focus, +.show > .btn.dropdown-toggle:focus { + box-shadow: none; +} + +.dropdown-menu-sm { + min-width: 100px; + border: 0.4285rem; +} + +.dropdown-menu-lg { + min-width: 260px; + border-radius: 0.4285rem; +} + +.dropdown-menu-xl { + min-width: 450px; + border-radius: 0.4285rem; +} + +@media screen and (max-width: 991px) { + .dropdown-toggle:after { + display: inline-block; + width: 0; + height: 0; + margin-left: .255em; + vertical-align: .255em; + content: ""; + border-top: .3em solid; + border-right: .3em solid transparent; + border-bottom: 0; + border-left: .3em solid transparent; + } +} + +@media screen and (min-width: 992px) { + .dropdown-menu .dropdown-item { + color: #9A9A9A; + } +} + +.footer { + padding: 24px 0 24px 250px; +} + +.footer [class*="container-"] { + padding: 0; +} + +.footer .nav { + display: inline-block; + float: left; + margin-bottom: 0; + padding-left: 30px; + list-style: none; +} + +.footer .nav-item { + display: inline-block; +} + +.footer .nav-item:first-child a { + padding-left: 0; +} + +.footer .nav-link { + color: #ffffff; + padding: 0 0.5rem; + font-size: 0.75rem; + text-transform: uppercase; + text-decoration: none; +} + +.footer .nav-link:hover { + text-decoration: none; +} + +.footer .copyright { + font-size: 0.75rem; + line-height: 1.8; + color: #ffffff; +} + +.footer:after { + display: table; + clear: both; + content: " "; +} + +@media screen and (max-width: 991px) { + .footer { + padding-left: 0px; + } + .footer .copyright { + text-align: right; + margin-right: 15px; + } +} + +@media screen and (min-width: 992px) { + .footer .copyright { + float: right; + padding-right: 30px; + } +} + +@media screen and (max-width: 768px) { + .footer nav { + display: block; + margin-bottom: 5px; + float: none; + } +} + +@media screen and (max-width: 576px) { + .footer { + text-align: center; + } + .footer .copyright { + text-align: center; + } + .footer .nav { + float: none; + padding-left: 0; + } +} + +/* Form controls */ +.form-control::-moz-placeholder { + color: #6c757c; + opacity: 1; + filter: alpha(opacity=100); +} + +.form-control:-moz-placeholder { + color: #6c757c; + opacity: 1; + filter: alpha(opacity=100); +} + +.form-control::-webkit-input-placeholder { + color: #6c757c; + opacity: 1; + filter: alpha(opacity=100); +} + +.form-control:-ms-input-placeholder { + color: #6c757c; + opacity: 1; + filter: alpha(opacity=100); +} + +.form-control { + border-color: #2b3553; + border-radius: 0.4285rem; + font-size: 0.75rem; + -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; +} + +.form-control:focus { + border-color: #e14eca; + background-color: transparent; + box-shadow: none; +} + +.form-control:focus + .input-group-append .input-group-text, +.form-control:focus ~ .input-group-append .input-group-text, +.form-control:focus + .input-group-prepend .input-group-text, +.form-control:focus ~ .input-group-prepend .input-group-text { + border: 1px solid #e14eca; + border-left: none; + background-color: transparent; +} + +.has-success .form-control, +.has-error .form-control, +.has-success .form-control:focus, +.has-error .form-control:focus { + box-shadow: none; +} + +.has-danger .form-control.form-control-success, .has-danger .form-control.form-control-danger, +.has-success .form-control.form-control-success, +.has-success .form-control.form-control-danger { + background-image: none; +} + +.form-control + .form-control-feedback { + border-radius: 0.4285rem; + margin-top: -7px; + position: absolute; + right: 10px; + top: 50%; + vertical-align: middle; +} + +.open .form-control { + border-radius: 0.4285rem 0.4285rem 0 0; + border-bottom-color: transparent; +} + +.form-control + .input-group-append .input-group-text, +.form-control + .input-group-prepend .input-group-text { + background-color: #ffffff; +} + +.has-success .input-group-append .input-group-text, +.has-success .input-group-prepend .input-group-text, +.has-success .form-control { + border-color: #2b3553; +} + +.has-success .form-control:focus, +.has-success.input-group-focus .input-group-append .input-group-text, +.has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: #00bf9a; +} + +.has-danger .form-control, +.has-danger .input-group-append .input-group-text, +.has-danger .input-group-prepend .input-group-text, +.has-danger.input-group-focus .input-group-prepend .input-group-text, +.has-danger.input-group-focus .input-group-append .input-group-text { + border-color: #f33620; + color: #ec250d; + background-color: rgba(222, 222, 222, 0.1); +} + +.has-danger .form-control:focus, +.has-danger .input-group-append .input-group-text:focus, +.has-danger .input-group-prepend .input-group-text:focus, +.has-danger.input-group-focus .input-group-prepend .input-group-text:focus, +.has-danger.input-group-focus .input-group-append .input-group-text:focus { + background-color: transparent; +} + +.has-success:after, +.has-danger:after { + font-family: 'nucleo'; + content: "\ea1b"; + display: inline-block; + position: absolute; + right: 20px; + top: 13px; + color: #00f2c3; + font-size: 11px; +} + +.has-success.form-control-lg:after, +.has-danger.form-control-lg:after { + font-size: 13px; + top: 24px; +} + +.has-success.has-label:after, +.has-danger.has-label:after { + top: 37px; +} + +.has-success.form-check:after, +.has-danger.form-check:after { + display: none !important; +} + +.has-success.form-check .form-check-label, +.has-danger.form-check .form-check-label { + color: #00f2c3; +} + +.has-danger:after { + content: "\ea48"; + color: #ec250d; +} + +.has-danger.form-check .form-check-label { + color: #ec250d; +} + +img { + max-width: 100%; + border-radius: 0.2857rem; +} + +.img-raised { + box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); +} + +.modal-content { + border: 0; +} + +.modal-content .modal-header { + border-bottom: none; +} + +.modal-content .modal-header button { + position: absolute; + right: 27px; + top: 24px; + outline: 0; + padding: 1rem; + margin: -1rem -1rem -1rem auto; +} + +.modal-content .modal-header .title { + color: #222a42; + margin-top: 5px; + margin-bottom: 0; +} + +.modal-content .modal-header .modal-title { + color: #222a42; +} + +.modal-content .modal-header i.tim-icons { + font-size: 16px; +} + +.modal-content .modal-body { + line-height: 1.9; +} + +.modal-content .modal-body p { + color: #222a42; +} + +.modal-content .modal-footer { + border-top: 0; + -webkit-justify-content: space-between; + /* Safari 6.1+ */ + justify-content: space-between; +} + +.modal-content .modal-footer button { + margin: 0; + padding-left: 16px; + padding-right: 16px; + width: auto; +} + +.modal-content .modal-footer button.pull-left { + padding-left: 5px; + padding-right: 5px; + position: relative; + left: -5px; +} + +.modal-content .modal-body + .modal-footer { + padding-top: 0; +} + +.modal-backdrop { + background: rgba(0, 0, 0, 0.3); +} + +.modal.modal-default .modal-content { + background-color: #ffffff; + color: #222a42; +} + +.modal.modal-default .modal-body p { + color: rgba(255, 255, 255, 0.8); +} + +.modal.modal-default .form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-default .form-control:-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-default .form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-default .form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-default .form-control { + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-default .form-control:focus { + border-color: #ffffff; + background-color: transparent; + color: #ffffff; +} + +.modal.modal-default .has-success:after, +.modal.modal-default .has-danger:after { + color: #ffffff; +} + +.modal.modal-default .has-danger .form-control { + background-color: transparent; +} + +.modal.modal-default .input-group-prepend { + margin-right: 0; +} + +.modal.modal-default .input-group-prepend .input-group-text, +.modal.modal-default .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-default .input-group-focus .input-group-prepend .input-group-text, +.modal.modal-default .input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + border-color: #ffffff; + color: #ffffff; +} + +.modal.modal-default .form-group.no-border .form-control, +.modal.modal-default .input-group.no-border .form-control { + background-color: rgba(30, 30, 47, 0.2); + color: #ffffff; +} + +.modal.modal-default .form-group.no-border .form-control:focus, .modal.modal-default .form-group.no-border .form-control:active, .modal.modal-default .form-group.no-border .form-control:active, +.modal.modal-default .input-group.no-border .form-control:focus, +.modal.modal-default .input-group.no-border .form-control:active, +.modal.modal-default .input-group.no-border .form-control:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-default .form-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-default .form-group.no-border .form-control + .input-group-append .input-group-text, +.modal.modal-default .input-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-default .input-group.no-border .form-control + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); +} + +.modal.modal-default .form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, .modal.modal-default .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, .modal.modal-default .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-default .form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-default .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-default .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-default .input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.modal.modal-default .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-default .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-default .input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-default .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-default .input-group.no-border .form-control + .input-group-append .input-group-text:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-default .form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-default .form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.modal.modal-default .input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-default .input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-default .form-group.no-border .input-group-prepend .input-group-text, +.modal.modal-default .form-group.no-border .input-group-append .input-group-text, +.modal.modal-default .input-group.no-border .input-group-prepend .input-group-text, +.modal.modal-default .input-group.no-border .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border: none; + color: #ffffff; +} + +.modal.modal-default .form-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-default .form-group.no-border.input-group-focus .input-group-append .input-group-text, +.modal.modal-default .input-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-default .input-group.no-border.input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-primary .modal-content { + background-color: #e14eca; + color: #ffffff; +} + +.modal.modal-primary .modal-body p { + color: rgba(255, 255, 255, 0.8); +} + +.modal.modal-primary .form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-primary .form-control:-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-primary .form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-primary .form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-primary .form-control { + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-primary .form-control:focus { + border-color: #ffffff; + background-color: transparent; + color: #ffffff; +} + +.modal.modal-primary .has-success:after, +.modal.modal-primary .has-danger:after { + color: #ffffff; +} + +.modal.modal-primary .has-danger .form-control { + background-color: transparent; +} + +.modal.modal-primary .input-group-prepend { + margin-right: 0; +} + +.modal.modal-primary .input-group-prepend .input-group-text, +.modal.modal-primary .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-primary .input-group-focus .input-group-prepend .input-group-text, +.modal.modal-primary .input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + border-color: #ffffff; + color: #ffffff; +} + +.modal.modal-primary .form-group.no-border .form-control, +.modal.modal-primary .input-group.no-border .form-control { + background-color: rgba(30, 30, 47, 0.2); + color: #ffffff; +} + +.modal.modal-primary .form-group.no-border .form-control:focus, .modal.modal-primary .form-group.no-border .form-control:active, .modal.modal-primary .form-group.no-border .form-control:active, +.modal.modal-primary .input-group.no-border .form-control:focus, +.modal.modal-primary .input-group.no-border .form-control:active, +.modal.modal-primary .input-group.no-border .form-control:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-primary .form-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-primary .form-group.no-border .form-control + .input-group-append .input-group-text, +.modal.modal-primary .input-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-primary .input-group.no-border .form-control + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); +} + +.modal.modal-primary .form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, .modal.modal-primary .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, .modal.modal-primary .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-primary .form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-primary .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-primary .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-primary .input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.modal.modal-primary .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-primary .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-primary .input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-primary .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-primary .input-group.no-border .form-control + .input-group-append .input-group-text:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-primary .form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-primary .form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.modal.modal-primary .input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-primary .input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-primary .form-group.no-border .input-group-prepend .input-group-text, +.modal.modal-primary .form-group.no-border .input-group-append .input-group-text, +.modal.modal-primary .input-group.no-border .input-group-prepend .input-group-text, +.modal.modal-primary .input-group.no-border .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border: none; + color: #ffffff; +} + +.modal.modal-primary .form-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-primary .form-group.no-border.input-group-focus .input-group-append .input-group-text, +.modal.modal-primary .input-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-primary .input-group.no-border.input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-danger .modal-content { + background-color: #fd5d93; + color: #ffffff; +} + +.modal.modal-danger .modal-body p { + color: rgba(255, 255, 255, 0.8); +} + +.modal.modal-danger .form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-danger .form-control:-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-danger .form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-danger .form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-danger .form-control { + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-danger .form-control:focus { + border-color: #ffffff; + background-color: transparent; + color: #ffffff; +} + +.modal.modal-danger .has-success:after, +.modal.modal-danger .has-danger:after { + color: #ffffff; +} + +.modal.modal-danger .has-danger .form-control { + background-color: transparent; +} + +.modal.modal-danger .input-group-prepend { + margin-right: 0; +} + +.modal.modal-danger .input-group-prepend .input-group-text, +.modal.modal-danger .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-danger .input-group-focus .input-group-prepend .input-group-text, +.modal.modal-danger .input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + border-color: #ffffff; + color: #ffffff; +} + +.modal.modal-danger .form-group.no-border .form-control, +.modal.modal-danger .input-group.no-border .form-control { + background-color: rgba(30, 30, 47, 0.2); + color: #ffffff; +} + +.modal.modal-danger .form-group.no-border .form-control:focus, .modal.modal-danger .form-group.no-border .form-control:active, .modal.modal-danger .form-group.no-border .form-control:active, +.modal.modal-danger .input-group.no-border .form-control:focus, +.modal.modal-danger .input-group.no-border .form-control:active, +.modal.modal-danger .input-group.no-border .form-control:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-danger .form-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-danger .form-group.no-border .form-control + .input-group-append .input-group-text, +.modal.modal-danger .input-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-danger .input-group.no-border .form-control + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); +} + +.modal.modal-danger .form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, .modal.modal-danger .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, .modal.modal-danger .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-danger .form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-danger .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-danger .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-danger .input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.modal.modal-danger .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-danger .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-danger .input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-danger .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-danger .input-group.no-border .form-control + .input-group-append .input-group-text:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-danger .form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-danger .form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.modal.modal-danger .input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-danger .input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-danger .form-group.no-border .input-group-prepend .input-group-text, +.modal.modal-danger .form-group.no-border .input-group-append .input-group-text, +.modal.modal-danger .input-group.no-border .input-group-prepend .input-group-text, +.modal.modal-danger .input-group.no-border .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border: none; + color: #ffffff; +} + +.modal.modal-danger .form-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-danger .form-group.no-border.input-group-focus .input-group-append .input-group-text, +.modal.modal-danger .input-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-danger .input-group.no-border.input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-warning .modal-content { + background-color: #ff8d72; + color: #ffffff; +} + +.modal.modal-warning .modal-body p { + color: rgba(255, 255, 255, 0.8); +} + +.modal.modal-warning .form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-warning .form-control:-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-warning .form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-warning .form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-warning .form-control { + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-warning .form-control:focus { + border-color: #ffffff; + background-color: transparent; + color: #ffffff; +} + +.modal.modal-warning .has-success:after, +.modal.modal-warning .has-danger:after { + color: #ffffff; +} + +.modal.modal-warning .has-danger .form-control { + background-color: transparent; +} + +.modal.modal-warning .input-group-prepend { + margin-right: 0; +} + +.modal.modal-warning .input-group-prepend .input-group-text, +.modal.modal-warning .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-warning .input-group-focus .input-group-prepend .input-group-text, +.modal.modal-warning .input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + border-color: #ffffff; + color: #ffffff; +} + +.modal.modal-warning .form-group.no-border .form-control, +.modal.modal-warning .input-group.no-border .form-control { + background-color: rgba(30, 30, 47, 0.2); + color: #ffffff; +} + +.modal.modal-warning .form-group.no-border .form-control:focus, .modal.modal-warning .form-group.no-border .form-control:active, .modal.modal-warning .form-group.no-border .form-control:active, +.modal.modal-warning .input-group.no-border .form-control:focus, +.modal.modal-warning .input-group.no-border .form-control:active, +.modal.modal-warning .input-group.no-border .form-control:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-warning .form-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-warning .form-group.no-border .form-control + .input-group-append .input-group-text, +.modal.modal-warning .input-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-warning .input-group.no-border .form-control + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); +} + +.modal.modal-warning .form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, .modal.modal-warning .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, .modal.modal-warning .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-warning .form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-warning .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-warning .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-warning .input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.modal.modal-warning .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-warning .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-warning .input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-warning .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-warning .input-group.no-border .form-control + .input-group-append .input-group-text:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-warning .form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-warning .form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.modal.modal-warning .input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-warning .input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-warning .form-group.no-border .input-group-prepend .input-group-text, +.modal.modal-warning .form-group.no-border .input-group-append .input-group-text, +.modal.modal-warning .input-group.no-border .input-group-prepend .input-group-text, +.modal.modal-warning .input-group.no-border .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border: none; + color: #ffffff; +} + +.modal.modal-warning .form-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-warning .form-group.no-border.input-group-focus .input-group-append .input-group-text, +.modal.modal-warning .input-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-warning .input-group.no-border.input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-success .modal-content { + background-color: #00f2c3; + color: #ffffff; +} + +.modal.modal-success .modal-body p { + color: rgba(255, 255, 255, 0.8); +} + +.modal.modal-success .form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-success .form-control:-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-success .form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-success .form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-success .form-control { + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-success .form-control:focus { + border-color: #ffffff; + background-color: transparent; + color: #ffffff; +} + +.modal.modal-success .has-success:after, +.modal.modal-success .has-danger:after { + color: #ffffff; +} + +.modal.modal-success .has-danger .form-control { + background-color: transparent; +} + +.modal.modal-success .input-group-prepend { + margin-right: 0; +} + +.modal.modal-success .input-group-prepend .input-group-text, +.modal.modal-success .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-success .input-group-focus .input-group-prepend .input-group-text, +.modal.modal-success .input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + border-color: #ffffff; + color: #ffffff; +} + +.modal.modal-success .form-group.no-border .form-control, +.modal.modal-success .input-group.no-border .form-control { + background-color: rgba(30, 30, 47, 0.2); + color: #ffffff; +} + +.modal.modal-success .form-group.no-border .form-control:focus, .modal.modal-success .form-group.no-border .form-control:active, .modal.modal-success .form-group.no-border .form-control:active, +.modal.modal-success .input-group.no-border .form-control:focus, +.modal.modal-success .input-group.no-border .form-control:active, +.modal.modal-success .input-group.no-border .form-control:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-success .form-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-success .form-group.no-border .form-control + .input-group-append .input-group-text, +.modal.modal-success .input-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-success .input-group.no-border .form-control + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); +} + +.modal.modal-success .form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, .modal.modal-success .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, .modal.modal-success .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-success .form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-success .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-success .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-success .input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.modal.modal-success .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-success .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-success .input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-success .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-success .input-group.no-border .form-control + .input-group-append .input-group-text:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-success .form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-success .form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.modal.modal-success .input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-success .input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-success .form-group.no-border .input-group-prepend .input-group-text, +.modal.modal-success .form-group.no-border .input-group-append .input-group-text, +.modal.modal-success .input-group.no-border .input-group-prepend .input-group-text, +.modal.modal-success .input-group.no-border .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border: none; + color: #ffffff; +} + +.modal.modal-success .form-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-success .form-group.no-border.input-group-focus .input-group-append .input-group-text, +.modal.modal-success .input-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-success .input-group.no-border.input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-info .modal-content { + background-color: #1d8cf8; + color: #ffffff; +} + +.modal.modal-info .modal-body p { + color: rgba(255, 255, 255, 0.8); +} + +.modal.modal-info .form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-info .form-control:-moz-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-info .form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-info .form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.modal.modal-info .form-control { + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-info .form-control:focus { + border-color: #ffffff; + background-color: transparent; + color: #ffffff; +} + +.modal.modal-info .has-success:after, +.modal.modal-info .has-danger:after { + color: #ffffff; +} + +.modal.modal-info .has-danger .form-control { + background-color: transparent; +} + +.modal.modal-info .input-group-prepend { + margin-right: 0; +} + +.modal.modal-info .input-group-prepend .input-group-text, +.modal.modal-info .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border-color: rgba(255, 255, 255, 0.5); + color: #ffffff; +} + +.modal.modal-info .input-group-focus .input-group-prepend .input-group-text, +.modal.modal-info .input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + border-color: #ffffff; + color: #ffffff; +} + +.modal.modal-info .form-group.no-border .form-control, +.modal.modal-info .input-group.no-border .form-control { + background-color: rgba(30, 30, 47, 0.2); + color: #ffffff; +} + +.modal.modal-info .form-group.no-border .form-control:focus, .modal.modal-info .form-group.no-border .form-control:active, .modal.modal-info .form-group.no-border .form-control:active, +.modal.modal-info .input-group.no-border .form-control:focus, +.modal.modal-info .input-group.no-border .form-control:active, +.modal.modal-info .input-group.no-border .form-control:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-info .form-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-info .form-group.no-border .form-control + .input-group-append .input-group-text, +.modal.modal-info .input-group.no-border .form-control + .input-group-prepend .input-group-text, +.modal.modal-info .input-group.no-border .form-control + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); +} + +.modal.modal-info .form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, .modal.modal-info .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, .modal.modal-info .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-info .form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-info .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-info .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-info .input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.modal.modal-info .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-info .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.modal.modal-info .input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.modal.modal-info .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.modal.modal-info .input-group.no-border .form-control + .input-group-append .input-group-text:active { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-info .form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-info .form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.modal.modal-info .input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.modal.modal-info .input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal.modal-info .form-group.no-border .input-group-prepend .input-group-text, +.modal.modal-info .form-group.no-border .input-group-append .input-group-text, +.modal.modal-info .input-group.no-border .input-group-prepend .input-group-text, +.modal.modal-info .input-group.no-border .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.2); + border: none; + color: #ffffff; +} + +.modal.modal-info .form-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-info .form-group.no-border.input-group-focus .input-group-append .input-group-text, +.modal.modal-info .input-group.no-border.input-group-focus .input-group-prepend .input-group-text, +.modal.modal-info .input-group.no-border.input-group-focus .input-group-append .input-group-text { + background-color: rgba(30, 30, 47, 0.3); + color: #ffffff; +} + +.modal .modal-header .close { + color: #fd5d93; + text-shadow: none; +} + +.modal .modal-header .close:hover, .modal .modal-header .close:focus { + opacity: 1; +} + +.modal.modal-black .modal-content { + background: linear-gradient(to bottom, #222a42 0%, #1d253b 100%); + color: rgba(255, 255, 255, 0.8); +} + +.modal.modal-black .modal-content .modal-header .modal-title, .modal.modal-black .modal-content .modal-header .title { + color: rgba(255, 255, 255, 0.9); +} + +.modal.modal-black .modal-content .modal-body p { + color: rgba(255, 255, 255, 0.8); +} + +.modal.modal-black h1, .modal.modal-black h2, .modal.modal-black h3, .modal.modal-black h4, .modal.modal-black h5, .modal.modal-black h6, .modal.modal-black p { + color: #ffffff; +} + +.modal-search .modal-dialog { + margin: 20px auto; + max-width: 650px; +} + +.modal-search .modal-dialog input { + border: none; + font-size: 17px; + font-weight: 100; +} + +.modal-search .modal-dialog span { + font-size: 35px; + color: #b7b7b7; +} + +.modal-search .modal-content .modal-header { + padding: 24px; +} + +.modal-search .modal-header .close { + color: #555555; + top: 30px !important; +} + +.modal-search .modal-footer { + border-top: 2px solid #f9f9f9; + margin: 0px 25px 20px; +} + +.navbar { + padding: 10px 30px 10px 15px; + width: 100%; + z-index: 1050; + background: #1a1e34; +} + +.navbar .photo { + display: inline-block; + height: 30px; + width: 30px; + border-radius: 50%; + vertical-align: middle; + overflow: hidden; +} + +.navbar .photo img { + width: 100%; +} + +.navbar .navbar-wrapper { + display: flex; + align-items: center; +} + +.navbar .navbar-text { + color: #ffffff; +} + +.navbar .btn { + margin: 0 5px 0 10px; +} + +.navbar.navbar-absolute { + position: absolute; + z-index: 1050; +} + +.navbar.navbar-transparent { + background: transparent !important; +} + +.navbar.bg-white .navbar-nav .search-bar.input-group i { + color: #222a42; +} + +.navbar.bg-white .navbar-nav .search-bar.input-group .form-control { + background: rgba(34, 42, 66, 0.1); + border-radius: 4px; +} + +.navbar.bg-white .navbar-nav a.nav-link { + color: #222a42 !important; +} + +.navbar.bg-white .navbar-nav a.nav-link p { + color: #222a42; +} + +.navbar.bg-white .navbar-text, .navbar.bg-white .navbar-brand { + color: #222a42; +} + +.navbar.bg-white .form-control { + color: #222a42 !important; +} + +.navbar.bg-white .form-control::placeholder { + color: #9A9A9A !important; +} + +.navbar.bg-dark { + background: #222a42 !important; +} + +.navbar.bg-primary { + background-color: #e14eca !important; +} + +.navbar.bg-warning { + background-color: #ff8d72 !important; +} + +.navbar.bg-info { + background-color: #1d8cf8 !important; +} + +.navbar.bg-success { + background-color: #00bf9a !important; +} + +.navbar.bg-danger { + background-color: #fd5d93 !important; +} + +.navbar .navbar-brand { + position: fixed; + padding-top: .3125rem; + padding-bottom: .3125rem; + color: #ffffff; + margin-left: 17px; + margin-top: 3px; + text-transform: uppercase; + font-size: 1rem; +} + +.navbar .navbar-toggle button:focus, .navbar .navbar-toggler { + outline: none; +} + +.navbar-minimize-fixed { + position: fixed; + margin-left: 40px; + margin-top: 14px; + transition: 0.3s ease; + color: white; + z-index: 20; + opacity: 0; + transition: 0.2s ease; +} + +.navbar-minimize-fixed button i { + font-size: 20px; +} + +.notification { + background: #fd5d93; + color: #ffffff; + border-radius: 0.875rem; + height: 6px; + width: 6px; + position: absolute; + text-align: center; + font-size: 12px; + font-weight: 800; + top: 10px; + right: 10px; + border: 1px solid #fd5d93; +} + +.navbar-nav li { + padding: 0 10px; +} + +.navbar-nav li a { + color: #ffffff; +} + +.navbar-nav li i { + vertical-align: middle; + font-size: 20px; +} + +@media screen and (max-width: 991px) { + .navbar .container-fluid { + padding-right: 15px; + padding-left: 15px; + } + .navbar .navbar-collapse .input-group { + margin: 0; + margin-top: 5px; + } + .navbar .navbar-nav .btn { + margin-left: -3px; + display: flex; + } + .navbar .navbar-nav .btn i { + margin-right: 12px; + } + .navbar .navbar-nav .btn span { + margin: 0; + text-transform: uppercase; + font-weight: 300; + } + .navbar .navbar-nav .btn span, .navbar .navbar-nav .btn span:hover, .navbar .navbar-nav .btn span:focus, .navbar .navbar-nav .btn span:active, .navbar .navbar-nav .btn span:active:focus { + color: #222a42 !important; + } + .navbar .navbar-nav a.nav-link i { + opacity: 1; + margin-left: 4px; + margin-right: 5px; + } + .navbar .navbar-nav a.nav-link p { + display: inline-block; + text-transform: uppercase; + margin-left: 7px; + } + .navbar .navbar-nav .modal-search .modal-dialog { + padding: 0 40px; + } + .navbar .navbar-nav .dropdown { + margin: 5px 0; + } + .navbar .navbar-nav .dropdown .nav-link { + padding-bottom: 0; + } + .navbar .navbar-nav .dropdown .dropdown-menu .dropdown-item { + margin-top: 0; + padding-left: 24px; + } + .navbar .dropdown.show .dropdown-menu { + display: block; + } + .navbar .dropdown .dropdown-menu { + display: none; + } + .navbar .dropdown .dropdown-menu li a { + color: #222a42; + } + .navbar .dropdown.show .dropdown-menu, + .navbar .dropdown .dropdown-menu { + background-color: transparent; + border: 0; + transition: none; + -webkit-box-shadow: none; + box-shadow: none; + width: auto; + margin: 0px 1rem; + margin-top: 0px; + } + .navbar .dropdown.show .dropdown-menu:before, + .navbar .dropdown .dropdown-menu:before { + display: none; + } + .navbar .dropdown-menu .dropdown-item:focus, + .navbar .dropdown-menu .dropdown-item:hover { + color: #ffffff; + } + .navbar.bg-white .dropdown-menu .dropdown-item:focus, + .navbar.bg-white .dropdown-menu .dropdown-item:hover { + color: #344675; + } + .navbar button.navbar-toggler[data-target="#navigation"] { + padding-top: 0; + } + .navbar .navbar-toggler-bar { + display: block; + position: relative; + width: 22px; + height: 1px; + border-radius: 1px; + background: #ffffff; + } + .navbar .navbar-toggler-bar.navbar-kebab { + height: 4px; + width: 4px; + margin-bottom: 3px; + border-radius: 50%; + } + .navbar .navbar-toggler-bar + .navbar-toggler-bar { + margin-top: 7px; + } + .navbar .navbar-toggler-bar + .navbar-toggler-bar.navbar-kebab { + margin-top: 0px; + } + .navbar .navbar-toggler-bar.bar2 { + width: 17px; + transition: width .2s linear; + } + .navbar.bg-white:not(.navbar-transparent) .navbar-toggler-bar { + background-color: #344675; + } + .navbar .toggled .navbar-toggler-bar { + width: 24px; + } + .navbar .toggled .navbar-toggler-bar + .navbar-toggler-bar { + margin-top: 5px; + } + .navbar .navbar-brand { + margin-left: 20px; + position: relative; + } + .navbar-nav .nav-link i.fa, + .navbar-nav .nav-link i.tim-icons { + opacity: .5; + } + .bar1, + .bar2, + .bar3 { + outline: 1px solid transparent; + } + .bar1 { + top: 0px; + -webkit-animation: topbar-back 500ms linear 0s; + -moz-animation: topbar-back 500ms linear 0s; + animation: topbar-back 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + .bar2 { + opacity: 1; + } + .bar3 { + bottom: 0px; + -webkit-animation: bottombar-back 500ms linear 0s; + -moz-animation: bottombar-back 500ms linear 0s; + animation: bottombar-back 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + .toggled .bar1 { + top: 6px; + -webkit-animation: topbar-x 500ms linear 0s; + -moz-animation: topbar-x 500ms linear 0s; + animation: topbar-x 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + .toggled .bar2 { + opacity: 0; + } + .toggled .bar3 { + bottom: 6px; + -webkit-animation: bottombar-x 500ms linear 0s; + -moz-animation: bottombar-x 500ms linear 0s; + animation: bottombar-x 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + @keyframes topbar-x { + 0% { + top: 0px; + transform: rotate(0deg); + } + 45% { + top: 6px; + transform: rotate(145deg); + } + 75% { + transform: rotate(130deg); + } + 100% { + transform: rotate(135deg); + } + } + @-webkit-keyframes topbar-x { + 0% { + top: 0px; + -webkit-transform: rotate(0deg); + } + 45% { + top: 6px; + -webkit-transform: rotate(145deg); + } + 75% { + -webkit-transform: rotate(130deg); + } + 100% { + -webkit-transform: rotate(135deg); + } + } + @-moz-keyframes topbar-x { + 0% { + top: 0px; + -moz-transform: rotate(0deg); + } + 45% { + top: 6px; + -moz-transform: rotate(145deg); + } + 75% { + -moz-transform: rotate(130deg); + } + 100% { + -moz-transform: rotate(135deg); + } + } + @keyframes topbar-back { + 0% { + top: 6px; + transform: rotate(135deg); + } + 45% { + transform: rotate(-10deg); + } + 75% { + transform: rotate(5deg); + } + 100% { + top: 0px; + transform: rotate(0); + } + } + @-webkit-keyframes topbar-back { + 0% { + top: 6px; + -webkit-transform: rotate(135deg); + } + 45% { + -webkit-transform: rotate(-10deg); + } + 75% { + -webkit-transform: rotate(5deg); + } + 100% { + top: 0px; + -webkit-transform: rotate(0); + } + } + @-moz-keyframes topbar-back { + 0% { + top: 6px; + -moz-transform: rotate(135deg); + } + 45% { + -moz-transform: rotate(-10deg); + } + 75% { + -moz-transform: rotate(5deg); + } + 100% { + top: 0px; + -moz-transform: rotate(0); + } + } + @keyframes bottombar-x { + 0% { + bottom: 0px; + transform: rotate(0deg); + } + 45% { + bottom: 6px; + transform: rotate(-145deg); + } + 75% { + transform: rotate(-130deg); + } + 100% { + transform: rotate(-135deg); + } + } + @-webkit-keyframes bottombar-x { + 0% { + bottom: 0px; + -webkit-transform: rotate(0deg); + } + 45% { + bottom: 6px; + -webkit-transform: rotate(-145deg); + } + 75% { + -webkit-transform: rotate(-130deg); + } + 100% { + -webkit-transform: rotate(-135deg); + } + } + @-moz-keyframes bottombar-x { + 0% { + bottom: 0px; + -moz-transform: rotate(0deg); + } + 45% { + bottom: 6px; + -moz-transform: rotate(-145deg); + } + 75% { + -moz-transform: rotate(-130deg); + } + 100% { + -moz-transform: rotate(-135deg); + } + } + @keyframes bottombar-back { + 0% { + bottom: 6px; + transform: rotate(-135deg); + } + 45% { + transform: rotate(10deg); + } + 75% { + transform: rotate(-5deg); + } + 100% { + bottom: 0px; + transform: rotate(0); + } + } + @-webkit-keyframes bottombar-back { + 0% { + bottom: 6px; + -webkit-transform: rotate(-135deg); + } + 45% { + -webkit-transform: rotate(10deg); + } + 75% { + -webkit-transform: rotate(-5deg); + } + 100% { + bottom: 0px; + -webkit-transform: rotate(0); + } + } + @-moz-keyframes bottombar-back { + 0% { + bottom: 6px; + -moz-transform: rotate(-135deg); + } + 45% { + -moz-transform: rotate(10deg); + } + 75% { + -moz-transform: rotate(-5deg); + } + 100% { + bottom: 0px; + -moz-transform: rotate(0); + } + } + @-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + @-moz-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + @keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } +} + +@media screen and (min-width: 992px) { + .navbar-collapse { + background: none !important; + } + .navbar .navbar-toggle { + display: none; + } + .navbar-nav .nav-link.profile-photo { + padding: 0; + margin: 7px 0.7rem; + } + .navbar .caret { + position: absolute; + left: 80%; + top: 55%; + margin-left: 0; + } + .navbar-expand-lg .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; + } +} + +@media screen and (max-width: 576px) { + .navbar[class*='navbar-toggleable-'] .container { + margin-left: 0; + margin-right: 0; + } +} + +body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + line-height: 1.2; +} + +p { + font-weight: 300; +} + +button, +input, +optgroup, +select, +textarea { + font-family: "Poppins", sans-serif; +} + +.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card p { + color: rgba(255, 255, 255, 0.8); +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 400; + color: rgba(255, 255, 255, 0.8); +} + +a { + color: #ba54f5; + font-weight: 300; +} + +a:hover, a:focus { + color: #e14eca; +} + +h1, .h1 { + line-height: 1.05; + margin-bottom: 30px; +} + +h1 small, .h1 small { + font-weight: 600; + text-transform: uppercase; + opacity: .8; +} + +h2, .h2 { + margin-bottom: 30px; + line-height: 1.2; +} + +h3, .h3 { + margin-bottom: 30px; + line-height: 1.4em; +} + +h4, .h4 { + line-height: 1.45em; + margin-bottom: 15px; +} + +h4 + .category, +h4.title + .category, .h4 + .category, +.h4.title + .category { + margin-top: -10px; +} + +h5, .h5 { + line-height: 1.4em; + margin-bottom: 15px; +} + +h6, .h6 { + text-transform: uppercase; + font-weight: 600; +} + +p { + color: rgba(255, 255, 255, 0.8); + margin-bottom: 5px; +} + +p.description { + font-size: 1.14em; +} + +.title { + font-weight: 600; +} + +.title.title-up { + text-transform: uppercase; +} + +.title.title-up a { + color: #222a42; + text-decoration: none; +} + +.title + .category { + margin-top: -10px; +} + +.description, +.card-description, +.footer-big p, +.card .footer .stats { + color: #9A9A9A; + font-weight: 300; +} + +.category, +.card-category { + text-transform: capitalize; + font-weight: 400; + color: rgba(255, 255, 255, 0.6); + font-size: 0.75rem; +} + +.card-category { + font-size: 0.75rem; +} + +.blockquote { + border-left: none; + border: 1px solid #344675; + padding: 20px; + font-size: 0.9625rem; + line-height: 1.8; +} + +.blockquote small { + color: #344675; + font-size: 0.75rem; + text-transform: uppercase; +} + +.blockquote.blockquote-primary { + border-color: #e14eca; + color: #e14eca; +} + +.blockquote.blockquote-primary small { + color: #e14eca; +} + +.blockquote.blockquote-danger { + border-color: #fd5d93; + color: #fd5d93; +} + +.blockquote.blockquote-danger small { + color: #fd5d93; +} + +.blockquote.blockquote-white { + border-color: rgba(255, 255, 255, 0.8); + color: #ffffff; +} + +.blockquote.blockquote-white small { + color: rgba(255, 255, 255, 0.8); +} + +ul li, ol li { + color: #ffffff; +} + +pre { + color: rgba(255, 255, 255, 0.8); +} + +hr { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 1rem; + margin-bottom: 1rem; +} + +.table > tbody > tr > td { + color: rgba(255, 255, 255, 0.7) !important; +} + +.table > tbody > tr > td .photo { + height: 30px; + width: 30px; + border-radius: 50%; + overflow: hidden; + margin: 0 auto; +} + +.table > tbody > tr > td .photo img { + width: 100%; +} + +.table > tbody > tr.table-success > td { + background-color: #00bf9a; +} + +.table > tbody > tr.table-info > td { + background-color: #1d8cf8; +} + +.table > tbody > tr.table-primary > td { + background-color: #e14eca; +} + +.table > tbody > tr.table-warning > td { + background-color: #ff8d72; +} + +.table > tbody > tr.table-danger > td { + background-color: #fd5d93; +} + +.table .img-wrapper { + width: 40px; + height: 40px; + border-radius: 50%; + overflow: hidden; + margin: 0 auto; +} + +.table .img-row { + max-width: 60px; + width: 60px; +} + +.table .form-check { + margin: 0; + margin-top: 5px; +} + +.table .form-check label .form-check-sign::before, +.table .form-check label .form-check-sign::after { + top: -17px; + left: 4px; +} + +.table .btn { + margin: 0; +} + +.table small, .table .small { + font-weight: 300; +} + +.card-tasks .card-body .table { + margin-bottom: 0; +} + +.card-tasks .card-body .table > thead > tr > th, +.card-tasks .card-body .table > tbody > tr > th, +.card-tasks .card-body .table > tfoot > tr > th, +.card-tasks .card-body .table > thead > tr > td, +.card-tasks .card-body .table > tbody > tr > td, +.card-tasks .card-body .table > tfoot > tr > td { + padding-top: 5px; + padding-bottom: 5px; +} + +.table > thead > tr > th { + border-bottom-width: 1px; + font-size: 12px; + text-transform: uppercase; + font-weight: 700; + border: 0; + color: rgba(255, 255, 255, 0.7); +} + +.table .radio, +.table .checkbox { + margin-top: 0; + margin-bottom: 0; + padding: 0; + width: 15px; +} + +.table .radio .icons, +.table .checkbox .icons { + position: relative; +} + +.table .radio label:after, .table .radio label:before, +.table .checkbox label:after, +.table .checkbox label:before { + top: -17px; + left: -3px; +} + +.table > thead > tr > th, +.table > tbody > tr > th, +.table > tfoot > tr > th, +.table > thead > tr > td, +.table > tbody > tr > td, +.table > tfoot > tr > td { + border-color: rgba(255, 255, 255, 0.1); + padding: 12px 7px; + vertical-align: middle; +} + +.table.table-shopping tbody tr:last-child td { + border: none; +} + +.table .th-description { + max-width: 150px; +} + +.table .td-price { + font-size: 26px; + font-weight: 300; + margin-top: 5px; + position: relative; + top: 4px; + text-align: right; +} + +.table .td-total { + font-weight: 600; + font-size: 0.8125rem; + padding-top: 20px; + text-align: right; +} + +.table .td-actions .btn { + margin: 0px; +} + +.table > tbody > tr { + position: relative; +} + +.table > tfoot > tr { + color: rgba(255, 255, 255, 0.7); + text-transform: uppercase; +} + +.table-responsive { + overflow: scroll; + padding-bottom: 10px; +} + +#tables .table-responsive { + margin-bottom: 30px; +} + +table.tablesorter thead tr .header { + background-image: url("../img/bg.gif"); + background-repeat: no-repeat; + background-position: center right; + cursor: pointer; +} + +table.tablesorter thead tr .headerSortUp { + background-image: url("../img/asc.gif"); +} + +table.tablesorter thead tr .headerSortDown { + background-image: url("../img/desc.gif"); +} + +.dataTables_wrapper .table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(0, 0, 0, 0.05); +} + +.dataTables_wrapper .form-control-sm { + font-size: 10px; +} + +.form-check { + margin-top: .5rem; + padding-left: 0; +} + +.form-check .form-check-label { + display: inline-block; + position: relative; + cursor: pointer; + padding-left: 25px; + line-height: 18px; + margin-bottom: 0; + -webkit-transition: color 0.3s linear; + -moz-transition: color 0.3s linear; + -o-transition: color 0.3s linear; + -ms-transition: color 0.3s linear; + transition: color 0.3s linear; +} + +.radio .form-check-sign { + padding-left: 28px; +} + +.form-check-radio.form-check-inline .form-check-label { + padding-left: 5px; + margin-right: 10px; +} + +.form-check .form-check-sign::before, +.form-check .form-check-sign::after { + content: " "; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + left: 0; + cursor: pointer; + border-radius: 3px; + top: 0; + border: 1px solid #818181; + -webkit-transition: opacity 0.3s linear; + -moz-transition: opacity 0.3s linear; + -o-transition: opacity 0.3s linear; + -ms-transition: opacity 0.3s linear; + transition: opacity 0.3s linear; +} + +.form-check input[type="checkbox"]:checked + .form-check-sign::before, +.form-check input[type="checkbox"]:checked + .form-check-sign::before { + border: none; + background-color: #e14eca; +} + +.form-check .form-check-sign::after { + font-family: 'nucleo'; + content: "\ea1b"; + top: 0px; + text-align: center; + font-size: 14px; + opacity: 0; + color: #ffffff; + font-weight: 600; + border: 0; + background-color: inherit; +} + +.form-check.disabled .form-check-label, +.form-check.disabled .form-check-label { + color: #9A9A9A; + opacity: .5; + cursor: not-allowed; +} + +.form-check input[type="checkbox"], +.radio input[type="radio"] { + opacity: 0; + position: absolute; + visibility: hidden; +} + +.form-check input[type="checkbox"]:checked + .form-check-sign::after { + opacity: 1; + font-size: 10px; + margin-top: 0; +} + +.form-check input[type="checkbox"] + .form-check-sign::after { + opacity: 0; + font-size: 10px; + margin-top: 0; +} + +.form-control input[type="checkbox"]:disabled + .form-check-sign::before, +.checkbox input[type="checkbox"]:disabled + .form-check-sign::after { + cursor: not-allowed; +} + +.form-check input[type="checkbox"]:disabled + .form-check-sign, +.form-check input[type="radio"]:disabled + .form-check-sign { + pointer-events: none; +} + +.form-check-radio .form-check-label { + padding-top: 3px; +} + +.form-check-radio .form-check-sign::before, +.form-check-radio .form-check-sign::after { + content: " "; + width: 18px; + height: 18px; + border-radius: 50%; + border: 1px solid #818181; + display: inline-block; + position: absolute; + left: 0px; + top: 3px; + padding: 1px; + -webkit-transition: opacity 0.3s linear; + -moz-transition: opacity 0.3s linear; + -o-transition: opacity 0.3s linear; + -ms-transition: opacity 0.3s linear; + transition: opacity 0.3s linear; +} + +.form-check-radio input[type="radio"] + .form-check-sign:after, +.form-check-radio input[type="radio"] { + opacity: 0; +} + +.form-check-radio input[type="radio"]:checked + .form-check-sign::after { + width: 6px; + height: 6px; + background-color: #e14eca; + border-color: #e14eca; + top: 9px; + left: 6px; + opacity: 1; +} + +.form-check-radio input[type="radio"]:checked + .form-check-sign::before { + border-color: #e14eca; +} + +.form-check-radio input[type="radio"]:checked + .form-check-sign::after { + opacity: 1; +} + +.form-check-radio input[type="radio"]:disabled + .form-check-sign { + color: #9A9A9A; +} + +.form-check-radio input[type="radio"]:disabled + .form-check-sign::before, +.form-check-radio input[type="radio"]:disabled + .form-check-sign::after { + color: #9A9A9A; +} + +.fixed-plugin { + position: fixed; + right: 0; + width: 64px; + background: rgba(0, 0, 0, 0.3); + z-index: 1031; + border-radius: 8px 0 0 8px; + text-align: center; + top: 130px; +} + +.fixed-plugin li > a, +.fixed-plugin .badge { + transition: all .34s; + -webkit-transition: all .34s; + -moz-transition: all .34s; +} + +.fixed-plugin .fa-cog { + color: #ffffff; + padding: 10px; + border-radius: 0 0 6px 6px; + width: auto; +} + +.fixed-plugin .dropdown-menu { + right: 80px; + left: auto !important; + top: -52px !important; + width: 290px; + border-radius: 0.1875rem; + padding: 0 10px; + background: linear-gradient(#222a42, #1d253b); +} + +.fixed-plugin .dropdown .dropdown-menu .tim-icons { + top: 5px; +} + +.fixed-plugin .dropdown-menu:after, +.fixed-plugin .dropdown-menu:before { + right: 10px; + margin-left: auto; + left: auto; +} + +.fixed-plugin .fa-circle-thin { + color: #ffffff; +} + +.fixed-plugin .active .fa-circle-thin { + color: #00bbff; +} + +.fixed-plugin .dropdown-menu > .active > a, +.fixed-plugin .dropdown-menu > .active > a:hover, +.fixed-plugin .dropdown-menu > .active > a:focus { + color: #777777; + text-align: center; +} + +.fixed-plugin img { + border-radius: 0; + width: 100%; + height: 100px; + margin: 0 auto; +} + +.fixed-plugin .dropdown-menu li > a:hover, +.fixed-plugin .dropdown-menu li > a:focus { + box-shadow: none; +} + +.fixed-plugin .badge { + border: 2px solid #ffffff; + border-radius: 50%; + cursor: pointer; + display: inline-block; + height: 23px; + margin-right: 5px; + position: relative; + width: 23px; +} + +.fixed-plugin .badge.active, +.fixed-plugin .badge:hover { + border-color: #1d253b; +} + +.fixed-plugin .light-badge, .fixed-plugin .dark-badge { + margin: 0; + border: 1px solid #1d8cf8; +} + +.fixed-plugin .light-badge:hover, .fixed-plugin .dark-badge:hover { + border: 1px solid #1d8cf8; +} + +.fixed-plugin .light-badge { + background: #ffffff; +} + +.fixed-plugin .light-badge:hover { + background: #ffffff; +} + +.fixed-plugin .dark-badge { + background: #222a42; +} + +.fixed-plugin .dark-badge:hover { + background: #222a42; +} + +.fixed-plugin h5 { + margin: 10px; +} + +.fixed-plugin .dropdown-menu li { + display: block; + padding: 18px 2px; + width: 25%; + float: left; +} + +.fixed-plugin li.adjustments-line, +.fixed-plugin li.header-title, +.fixed-plugin li.button-container { + width: 100%; + height: 50px; + min-height: inherit; +} + +.fixed-plugin li.button-container { + height: auto; +} + +.fixed-plugin li.button-container div { + margin-bottom: 5px; +} + +.fixed-plugin #sharrreTitle { + text-align: center; + padding: 10px 0; + height: 50px; +} + +.fixed-plugin li.header-title { + color: #ffffff; + height: 30px; + line-height: 25px; + font-size: 12px; + font-weight: 600; + text-align: center; + text-transform: uppercase; +} + +.fixed-plugin .adjustments-line a { + color: transparent; +} + +.fixed-plugin .adjustments-line a .badge-colors { + position: relative; + top: -2px; +} + +.fixed-plugin .adjustments-line a a:hover, +.fixed-plugin .adjustments-line a a:focus { + color: transparent; +} + +.fixed-plugin .adjustments-line .togglebutton { + text-align: center; +} + +.fixed-plugin .adjustments-line .togglebutton .label-switch { + position: relative; + left: -10px; + font-size: 0.62475rem; + color: #ffffff; +} + +.fixed-plugin .adjustments-line .togglebutton .label-switch.label-right { + left: 10px; +} + +.fixed-plugin .adjustments-line .togglebutton .toggle { + margin-right: 0; +} + +.fixed-plugin .adjustments-line .color-label { + position: relative; + top: -7px; + font-size: 0.62475rem; + color: #ffffff; +} + +.fixed-plugin .adjustments-line .dropdown-menu > li.adjustments-line > a { + padding-right: 0; + padding-left: 0; + border-bottom: 1px solid #ddd; + border-radius: 0; + margin: 0; +} + +.fixed-plugin .dropdown-menu > li > a.img-holder { + font-size: 1rem; + text-align: center; + border-radius: 10px; + background-color: #ffffff; + border: 3px solid #ffffff; + padding-left: 0; + padding-right: 0; + opacity: 1; + cursor: pointer; + display: block; + max-height: 100px; + overflow: hidden; + padding: 0; +} + +.fixed-plugin .dropdown-menu > li > a.img-holder img { + margin-top: auto; +} + +.fixed-plugin .dropdown-menu > li a.switch-trigger:hover, +.fixed-plugin .dropdown-menu > li > a.switch-trigger:focus { + background-color: transparent; +} + +.fixed-plugin .dropdown-menu > li:hover > a.img-holder, .fixed-plugin .dropdown-menu > li:focus > a.img-holder { + border-color: rgba(0, 187, 255, 0.53); +} + +.fixed-plugin .dropdown-menu > .active > a.img-holder, +.fixed-plugin .dropdown-menu > .active > a.img-holder { + border-color: #00bbff; + background-color: #ffffff; +} + +.fixed-plugin .btn-social { + width: 50%; + display: block; + width: 48%; + float: left; + font-weight: 600; +} + +.fixed-plugin .btn-social i { + margin-right: 5px; +} + +.fixed-plugin .btn-social:first-child { + margin-right: 2%; +} + +.fixed-plugin .dropdown .dropdown-menu { + -webkit-transform: translateY(-15%); + -moz-transform: translateY(-15%); + -o-transform: translateY(-15%); + -ms-transform: translateY(-15%); + transform: translateY(-15%); + top: 27px; + opacity: 0; + transform-origin: 0 0; +} + +.fixed-plugin .dropdown .dropdown-menu:before { + border-bottom: 0.4em solid rgba(0, 0, 0, 0); + border-left: 0.4em solid rgba(0, 0, 0, 0.2); + border-top: 0.4em solid rgba(0, 0, 0, 0); + right: -16px; + top: 46px; +} + +.fixed-plugin .dropdown .dropdown-menu:after { + border-bottom: 0.4em solid rgba(0, 0, 0, 0); + border-left: 0.4em solid #222a42; + border-top: 0.4em solid rgba(0, 0, 0, 0); + right: -16px; +} + +.fixed-plugin .dropdown .dropdown-menu:before, .fixed-plugin .dropdown .dropdown-menu:after { + content: ""; + display: inline-block; + position: absolute; + top: 74px; + width: 16px; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); +} + +.fixed-plugin .dropdown.show .dropdown-menu { + opacity: 1; + -webkit-transform: translateY(-13%); + -moz-transform: translateY(-13%); + -o-transform: translateY(-13%); + -ms-transform: translateY(-13%); + transform: translateY(-13%); + transform-origin: 0 0; +} + +.fixed-plugin .bootstrap-switch { + margin: 0; +} + +.wrapper { + position: relative; + top: 0; + height: 100vh; +} + +.wrapper.wrapper-full-page { + min-height: 100vh; + height: auto; +} + +.sidebar-wrapper ul li div.collapse ul li div.collapse ul li a, +.sidebar-wrapper ul li div.collapse ul li div.collapsing ul li a, +.sidebar-wrapper ul li div.collapsing ul li div.collapse ul li a { + margin-left: 25px; +} + +.sidebar, +.off-canvas-sidebar { + background: #ba54f5; + background: -webkit-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); + background: -o-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); + background: -moz-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); + background: linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); + height: calc(100vh - 90px); + width: 230px; + position: fixed; + top: 0; + left: 0; + z-index: 1; + background-size: cover; + background-position: center center; + display: block; + box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6); + margin-top: 80px; + margin-left: 20px; + border-radius: 5px; + transition: 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); +} + +.sidebar .sidebar-wrapper, +.off-canvas-sidebar .sidebar-wrapper { + width: 100%; + min-height: 100%; + max-height: calc(100vh - 705px); + z-index: 4; + position: relative; + overflow: auto; +} + +.sidebar .sidebar-wrapper .dropdown .dropdown-backdrop, +.off-canvas-sidebar .sidebar-wrapper .dropdown .dropdown-backdrop { + display: none !important; +} + +.sidebar .sidebar-wrapper .navbar-form, +.off-canvas-sidebar .sidebar-wrapper .navbar-form { + border: none; +} + +.sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a span, +.sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a span, +.off-canvas-sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a span, +.off-canvas-sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a span { + display: inline-block; +} + +.sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, +.sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, +.off-canvas-sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, +.off-canvas-sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal { + margin: 0; + position: relative; + transform: translateX(0px); + opacity: 1; + white-space: nowrap; + display: block; + line-height: 23px; + z-index: 1; + color: rgba(255, 255, 255, 0.8); +} + +.sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, +.sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, +.off-canvas-sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, +.off-canvas-sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon { + text-transform: uppercase; + width: 34px; + margin-right: 10px; + margin-left: 0px; + font-size: 12px; + text-align: center; + line-height: 25px; + position: relative; + float: left; + z-index: 1; + display: inherit; + line-height: 24px; + color: rgba(255, 255, 255, 0.8); +} + +.sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a i, +.sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a i, +.off-canvas-sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a i, +.off-canvas-sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a i { + font-size: 17px; + line-height: 20px; + width: 26px; +} + +.sidebar .sidebar-wrapper [data-toggle="collapse"] ~ div > ul > li:hover > a .sidebar-mini-icon, .sidebar .sidebar-wrapper [data-toggle="collapse"] ~ div > ul > li:hover > a .sidebar-normal, +.off-canvas-sidebar .sidebar-wrapper [data-toggle="collapse"] ~ div > ul > li:hover > a .sidebar-mini-icon, +.off-canvas-sidebar .sidebar-wrapper [data-toggle="collapse"] ~ div > ul > li:hover > a .sidebar-normal { + color: #ffffff; +} + +.sidebar .sidebar-wrapper .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, +.off-canvas-sidebar .sidebar-wrapper .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon { + opacity: 0; +} + +.sidebar .navbar-minimize, +.off-canvas-sidebar .navbar-minimize { + position: absolute; + right: 20px; + top: 2px; + opacity: 1; +} + +.sidebar .logo-tim, +.off-canvas-sidebar .logo-tim { + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; +} + +.sidebar .logo-tim img, +.off-canvas-sidebar .logo-tim img { + width: 60px; + height: 60px; +} + +.sidebar .nav, +.off-canvas-sidebar .nav { + margin-top: 20px; + display: block; +} + +.sidebar .nav .caret, +.off-canvas-sidebar .nav .caret { + top: 14px; + position: absolute; + right: 10px; +} + +.sidebar .nav li > a + div .nav, +.off-canvas-sidebar .nav li > a + div .nav { + margin-top: 5px; +} + +.sidebar .nav li > a + div .nav li > a, +.off-canvas-sidebar .nav li > a + div .nav li > a { + margin-top: 0px; + padding: 8px 8px; +} + +.sidebar .nav li > a, +.off-canvas-sidebar .nav li > a { + margin: 10px 15px 0; + border-radius: 30px; + color: #ffffff; + display: block; + text-decoration: none; + position: relative; + text-transform: uppercase; + cursor: pointer; + font-size: 0.62475rem; + padding: 10px 8px; + line-height: 1.625rem; +} + +.sidebar .nav li:first-child > a, +.off-canvas-sidebar .nav li:first-child > a { + margin: 0 15px; +} + +.sidebar .nav li:hover:not(.active) > a p, .sidebar .nav li:hover:not(.active) > a i, +.sidebar .nav li:focus:not(.active) > a p, +.sidebar .nav li:focus:not(.active) > a i, +.off-canvas-sidebar .nav li:hover:not(.active) > a p, +.off-canvas-sidebar .nav li:hover:not(.active) > a i, +.off-canvas-sidebar .nav li:focus:not(.active) > a p, +.off-canvas-sidebar .nav li:focus:not(.active) > a i { + color: #ffffff; +} + +.sidebar .nav li:hover:not(.active) > a i, +.sidebar .nav li:focus:not(.active) > a i, +.off-canvas-sidebar .nav li:hover:not(.active) > a i, +.off-canvas-sidebar .nav li:focus:not(.active) > a i { + color: #ffffff; +} + +.sidebar .nav li.active > a:not([data-toggle="collapse"]), +.off-canvas-sidebar .nav li.active > a:not([data-toggle="collapse"]) { + background: transparent; +} + +.sidebar .nav li.active > a:not([data-toggle="collapse"]) i, .sidebar .nav li.active > a:not([data-toggle="collapse"]) p, +.off-canvas-sidebar .nav li.active > a:not([data-toggle="collapse"]) i, +.off-canvas-sidebar .nav li.active > a:not([data-toggle="collapse"]) p { + color: white; +} + +.sidebar .nav li.active > a:not([data-toggle="collapse"]):before, +.off-canvas-sidebar .nav li.active > a:not([data-toggle="collapse"]):before { + content: " "; + position: absolute; + height: 6px; + width: 6px; + top: 22px; + left: -4px; + background: #ffffff; + border-radius: 50%; +} + +.sidebar .nav li.active > a[data-toggle="collapse"], +.off-canvas-sidebar .nav li.active > a[data-toggle="collapse"] { + background: transparent; + box-shadow: none; + color: #ffffff; +} + +.sidebar .nav li.active > a[data-toggle="collapse"] i, +.off-canvas-sidebar .nav li.active > a[data-toggle="collapse"] i { + color: #ffffff; +} + +.sidebar .nav li.active > a[data-toggle="collapse"] + div .nav .active a, +.off-canvas-sidebar .nav li.active > a[data-toggle="collapse"] + div .nav .active a { + box-shadow: none; +} + +.sidebar .nav li.active > a[data-toggle="collapse"] + div .nav .active a .sidebar-mini-icon, .sidebar .nav li.active > a[data-toggle="collapse"] + div .nav .active a .sidebar-normal, +.off-canvas-sidebar .nav li.active > a[data-toggle="collapse"] + div .nav .active a .sidebar-mini-icon, +.off-canvas-sidebar .nav li.active > a[data-toggle="collapse"] + div .nav .active a .sidebar-normal { + color: #ffffff; + font-weight: 400; +} + +.sidebar .nav li.active > a[data-toggle="collapse"] + div .nav .active a:before, +.off-canvas-sidebar .nav li.active > a[data-toggle="collapse"] + div .nav .active a:before { + content: " "; + position: absolute; + height: 6px; + width: 6px; + top: 17px; + left: -4px; + background: #ffffff; + border-radius: 50%; +} + +.sidebar .nav li.active > a[data-toggle="collapse"]:before, +.off-canvas-sidebar .nav li.active > a[data-toggle="collapse"]:before { + content: " "; + position: absolute; + height: 6px; + width: 6px; + top: 22px; + left: -4px; + background: rgba(255, 255, 255, 0.6); + border-radius: 50%; +} + +.sidebar .nav p, +.off-canvas-sidebar .nav p { + margin: 0; + line-height: 30px; + position: relative; + display: block; + height: auto; + white-space: nowrap; +} + +.sidebar .nav i, +.off-canvas-sidebar .nav i { + font-size: 20px; + float: left; + margin-right: 12px; + line-height: 30px; + width: 34px; + text-align: center; + color: rgba(255, 255, 255, 0.8); + position: relative; +} + +.sidebar .logo, +.off-canvas-sidebar .logo { + position: relative; + padding: 0.5rem 0.7rem; + z-index: 4; +} + +.sidebar .logo a.logo-mini, +.off-canvas-sidebar .logo a.logo-mini { + opacity: 1; + float: left; + width: 34px; + text-align: center; + margin-left: 10px; + margin-right: 12px; +} + +.sidebar .logo a.logo-normal, +.off-canvas-sidebar .logo a.logo-normal { + display: block; + opacity: 1; + -webkit-transform: translate3d(0px, 0, 0); + -moz-transform: translate3d(0px, 0, 0); + -o-transform: translate3d(0px, 0, 0); + -ms-transform: translate3d(0px, 0, 0); + transform: translate3d(0px, 0, 0); +} + +.sidebar .logo:after, +.off-canvas-sidebar .logo:after { + content: ''; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background: rgba(255, 255, 255, 0.5); +} + +.sidebar .logo p, +.off-canvas-sidebar .logo p { + float: left; + font-size: 20px; + margin: 10px 10px; + color: #ffffff; + line-height: 20px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.sidebar .logo .simple-text, +.off-canvas-sidebar .logo .simple-text { + text-transform: uppercase; + padding: 0.5rem 0; + display: block; + white-space: nowrap; + color: #ffffff; + text-decoration: none; + font-weight: 400; + line-height: 30px; + overflow: hidden; +} + +.sidebar .logo-tim, +.off-canvas-sidebar .logo-tim { + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; +} + +.sidebar .logo-tim img, +.off-canvas-sidebar .logo-tim img { + width: 60px; + height: 60px; +} + +.sidebar[data="blue"], +.off-canvas-sidebar[data="blue"] { + background: #3358f4; + background: -webkit-linear-gradient(0deg, #3358f4 0%, #1d8cf8 100%); + background: -o-linear-gradient(0deg, #3358f4 0%, #1d8cf8 100%); + background: -moz-linear-gradient(0deg, #3358f4 0%, #1d8cf8 100%); + background: linear-gradient(0deg, #3358f4 0%, #1d8cf8 100%); +} + +.sidebar[data="green"], +.off-canvas-sidebar[data="green"] { + background: #0098f0; + background: -webkit-linear-gradient(0deg, #0098f0 0%, #00f2c3 100%); + background: -o-linear-gradient(0deg, #0098f0 0%, #00f2c3 100%); + background: -moz-linear-gradient(0deg, #0098f0 0%, #00f2c3 100%); + background: linear-gradient(0deg, #0098f0 0%, #00f2c3 100%); +} + +.sidebar .user, +.off-canvas-sidebar .user { + padding-bottom: 20px; + margin: 20px auto 0; + position: relative; +} + +.sidebar .user:after, +.off-canvas-sidebar .user:after { + content: ''; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background: rgba(255, 255, 255, 0.5); +} + +.sidebar .user .photo, +.off-canvas-sidebar .user .photo { + width: 34px; + height: 34px; + overflow: hidden; + float: left; + z-index: 5; + margin-right: 10px; + border-radius: 50%; + margin-left: 23px; + box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); +} + +.sidebar .user .photo img, +.off-canvas-sidebar .user .photo img { + width: 100%; +} + +.sidebar .user a, +.off-canvas-sidebar .user a { + color: #ffffff; + text-decoration: none; + padding: 0.5rem 15px; + white-space: nowrap; +} + +.sidebar .user .info > a, +.off-canvas-sidebar .user .info > a { + display: block; + line-height: 18px; +} + +.sidebar .user .info > a > span, +.off-canvas-sidebar .user .info > a > span { + display: block; + position: relative; + opacity: 1; +} + +.sidebar .user .info .caret, +.off-canvas-sidebar .user .info .caret { + position: absolute; + top: 8px; + right: 18px; +} + +.visible-on-sidebar-regular { + display: inline-block !important; +} + +.visible-on-sidebar-mini { + display: none !important; +} + +.off-canvas-sidebar .nav > li > a, +.off-canvas-sidebar .nav > li > a:hover { + color: #ffffff; +} + +.off-canvas-sidebar .nav > li > a:focus { + background: rgba(200, 200, 200, 0.2); +} + +.main-panel { + position: relative; + float: right; + width: 100%; + min-height: 100vh; + border-top: 2px solid #e14eca; + background: linear-gradient(#1e1e2f, #1e1e24); + -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); +} + +.main-panel[data="blue"] { + border-top: 2px solid #1d8cf8; +} + +.main-panel[data="green"] { + border-top: 2px solid #00f2c3; +} + +.main-panel[data="primary"] { + border-top: 2px solid #e14eca; +} + +.main-panel > .content { + padding: 78px 30px 30px 280px; + min-height: calc(100vh - 70px); +} + +.main-panel > .navbar { + margin-bottom: 0; +} + +.main-panel .header { + margin-bottom: 50px; +} + +.perfect-scrollbar-on .sidebar, +.perfect-scrollbar-on .main-panel { + height: 100%; + max-height: 100%; +} + +@media (min-width: 991px) { + .sidebar, + .main-panel, + .sidebar-wrapper { + -webkit-transition-property: top,bottom,width; + transition-property: top,bottom, width; + -webkit-transition-duration: .2s,.2s, .35s; + transition-duration: .2s,.2s, .35s; + -webkit-transition-timing-function: linear,linear,ease; + transition-timing-function: linear,linear,ease; + -webkit-overflow-scrolling: touch; + } + .sidebar-mini .visible-on-sidebar-regular { + display: none !important; + } + .sidebar-mini .visible-on-sidebar-mini { + display: inline-block !important; + } + .sidebar-mini .sidebar { + width: 80px; + } + .sidebar-mini .sidebar .sidebar-wrapper { + width: 100% !important; + } + .sidebar-mini .sidebar { + display: block; + z-index: 1030; + box-shadow: 0px 2px 22px 0 rgba(0, 0, 0, 0.2), 0px 2px 30px 0 rgba(0, 0, 0, 0.35); + } + .sidebar-mini .sidebar .logo a.logo-normal { + opacity: 0; + -webkit-transform: translate3d(-25px, 0, 0); + -moz-transform: translate3d(-25px, 0, 0); + -o-transform: translate3d(-25px, 0, 0); + -ms-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + .sidebar-mini .sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .sidebar-mini .sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .sidebar-mini .sidebar .sidebar-wrapper .user .info > a > span, + .sidebar-mini .sidebar .sidebar-wrapper > .nav li > a p { + -webkit-transform: translate3d(-25px, 0, 0); + -moz-transform: translate3d(-25px, 0, 0); + -o-transform: translate3d(-25px, 0, 0); + -ms-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + opacity: 0; + } + .sidebar-mini .sidebar .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon { + opacity: 1; + } + .sidebar-mini .sidebar:hover { + width: 260px; + } + .sidebar-mini .sidebar:hover .logo a.logo-normal { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + .sidebar-mini .sidebar:hover .navbar-minimize { + opacity: 1; + } + .sidebar-mini .sidebar:hover .sidebar-wrapper { + width: 260px; + } + .sidebar-mini .sidebar:hover .sidebar-wrapper > .nav li > a p, + .sidebar-mini .sidebar:hover .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .sidebar-mini .sidebar:hover .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .sidebar-mini .sidebar:hover .sidebar-wrapper .user .info > a > span { + -webkit-transform: translate3d(0px, 0, 0); + -moz-transform: translate3d(0px, 0, 0); + -o-transform: translate3d(0px, 0, 0); + -ms-transform: translate3d(0px, 0, 0); + transform: translate3d(0px, 0, 0); + opacity: 1; + } + .sidebar-mini .sidebar:hover .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon { + opacity: 0; + } + .sidebar-mini .main-panel > .content { + padding-left: 130px; + } + .sidebar-mini footer { + padding-left: 130px; + } + .navbar-minimize button { + margin-left: 10px; + } + .navbar-minimize button i { + color: #ffffff; + font-size: 20px; + } +} + +.panel-header { + height: 260px; + padding-top: 80px; + padding-bottom: 45px; + background: #141E30; + /* fallback for old browsers */ + background: -webkit-gradient(linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788)); + background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%); + position: relative; + overflow: hidden; +} + +.panel-header .header .title { + color: #ffffff; +} + +.panel-header .header .category { + max-width: 600px; + color: rgba(255, 255, 255, 0.5); + margin: 0 auto; + font-size: 13px; +} + +.panel-header .header .category a { + color: #ffffff; +} + +.panel-header-sm { + height: 135px; +} + +.panel-header-lg { + height: 380px; +} + +@media screen and (max-width: 991px) { + .sidebar { + position: fixed; + display: block; + top: 0; + height: 100%; + width: 260px; + right: auto; + left: 0; + margin: 0; + border-radius: 0; + z-index: 1032; + visibility: visible; + overflow-y: visible; + padding: 0; + transition: 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + -webkit-transform: translate3d(-260px, 0, 0); + -moz-transform: translate3d(-260px, 0, 0); + -o-transform: translate3d(-260px, 0, 0); + -ms-transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); + } +} + +@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) { + .sidebar { + transition: none; + } +} + +@media screen and (max-width: 991px) { + .wrapper { + transition: 0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1); + } +} + +@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) { + .wrapper { + transition: none; + } +} + +@media screen and (max-width: 991px) { + .main-panel { + width: 100%; + } + .main-panel .content { + padding-left: 30px; + } + .nav-open .main-panel { + right: 0; + -webkit-transform: translate3d(260px, 0, 0); + -moz-transform: translate3d(260px, 0, 0); + -o-transform: translate3d(260px, 0, 0); + -ms-transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); + } + .nav-open .sidebar { + transition: 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + -webkit-transform: translate3d(0px, 0, 0); + -moz-transform: translate3d(0px, 0, 0); + -o-transform: translate3d(0px, 0, 0); + -ms-transform: translate3d(0px, 0, 0); + transform: translate3d(0px, 0, 0); + } +} + +@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) { + .nav-open .sidebar { + transition: none; + } +} + +@media screen and (max-width: 991px) { + .nav-open .sidebar:before { + content: unset; + } + .nav-open body { + position: relative; + overflow-x: hidden; + } + .nav-open .menu-on-right .main-panel { + -webkit-transform: translate3d(-260px, 0, 0); + -moz-transform: translate3d(-260px, 0, 0); + -o-transform: translate3d(-260px, 0, 0); + -ms-transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); + } + .nav-open .menu-on-right .navbar-collapse, + .nav-open .menu-on-right .sidebar { + -webkit-transform: translate3d(0px, 0, 0); + -moz-transform: translate3d(0px, 0, 0); + -o-transform: translate3d(0px, 0, 0); + -ms-transform: translate3d(0px, 0, 0); + transform: translate3d(0px, 0, 0); + } + .nav-open .menu-on-right #bodyClick { + right: 260px; + left: auto; + } + .menu-on-right .sidebar { + left: auto; + right: 0; + -webkit-transform: translate3d(260px, 0, 0); + -moz-transform: translate3d(260px, 0, 0); + -o-transform: translate3d(260px, 0, 0); + -ms-transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); + } + #bodyClick { + height: 100%; + width: 100%; + position: fixed; + opacity: 1; + top: 0; + right: 0; + left: 260px; + content: ""; + z-index: 9999; + overflow-x: hidden; + background-color: transparent; + transition: 0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1); + } +} + +@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) { + #bodyClick { + transition: none; + } +} + +@media screen and (max-width: 768px) { + .main-panel .content { + padding-left: 15px; + padding-right: 15px; + } +} + +.color-swatch { + margin: 1rem 0; + border-radius: .25rem; + background-color: #F4F5F7; + width: 100% !important; + height: auto !important; + margin-bottom: 20px; +} + +.color-swatch:after { + content: " "; + display: table; + clear: both; +} + +.color-swatch-header { + position: relative; + height: 0; + padding-bottom: 50%; + border-radius: .25rem .25rem 0 0; + border: 1px solid transparent; +} + +.color-swatch-header.is-light { + border-color: #C1C7D0; +} + +.color-swatch-header .pass-fail { + position: absolute; + width: 100%; + bottom: 0; +} + +.color-swatch-header .pass-fail-item-wrap { + position: relative; + float: left; + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); +} + +.color-swatch-header .pass-fail-item-group { + display: inline-block; + padding: 0 5px; +} + +.color-swatch-header .pass-fail-item { + float: left; + display: inline-block; + text-align: center; + padding: 2px; +} + +.color-swatch-header .pass-fail-item.white .example { + color: #fff; +} + +.color-swatch-header .pass-fail-item.small .example { + font-size: 10px; +} + +.color-swatch-header .pass-fail-item .lozenge { + font-size: 11px; + text-transform: uppercase; + font-weight: 600; + background: #000; + color: #fff; + padding: 2px 4px; + line-height: 10px; + border-radius: 4px; + letter-spacing: 0.05em; +} + +.color-swatch-body { + position: relative; + left: 50%; + float: left; + padding: 10px 0; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); +} + +.color-swatch-body .prop-item-wrap { + float: left; + padding: 0 15px; + min-width: 65px; +} + +.color-swatch-body .prop-item { + padding: 15px 0; +} + +.color-swatch-body .prop-item .label { + font-size: 11px; + color: #62748C; + text-transform: uppercase; + line-height: 16px; +} + +.color-swatch-body .prop-item .value { + font-size: 14px; +} + +.table-colors .swatch { + display: inline-block; + float: left; + width: 40px; + height: 40px; + margin-right: 20px; + border: 1px solid transparent; + border-radius: 4px; +} + +.table-colors td:nth-child(1), +.table-colors:first-child td:nth-child(1) { + line-height: 40px; +} + +.table-colors .lozenge { + font-size: 10px; + font-weight: 600; + line-height: 10px; + display: inline-block; + float: left; + margin: 5px 10px 0 0; + padding: 2px 4px; + letter-spacing: .05em; + text-transform: uppercase; + color: #042a53; + border-radius: 4px; + background: #97a0af; +} + +.bd-example .row > .col span, +.bd-example .row > [class^=col-] span { + font-size: 0.75rem; + display: block; + margin: 1rem 0; + padding: .75rem; + color: #393f49; + background-color: #ffffff; + border-radius: 0.2857rem; +} + +.bd-docs .navbar .navbar-brand { + position: relative; +} + +/* Animations */ +.nav-pills .nav-link, +.navbar, +.nav-tabs .nav-link, +.sidebar .nav a, +.sidebar .nav a i, +.sidebar .nav p, +.navbar-collapse .navbar-nav .nav-link, +.animation-transition-general, +.sidebar .nav p, +.off-canvas-sidebar .nav p, +.sidebar .logo a.logo-mini, +.sidebar .logo a.logo-normal, +.off-canvas-sidebar .logo a.logo-mini, +.off-canvas-sidebar .logo a.logo-normal, +.sidebar .user .photo, +.off-canvas-sidebar .user .photo, +.sidebar .user a, +.off-canvas-sidebar .user a, +.sidebar .user .info > a > span, +.off-canvas-sidebar .user .info > a > span, +.tag, +.tag [data-role="remove"], +.animation-transition-general, +.sidebar .nav p, +.off-canvas-sidebar .nav p, +.sidebar .logo a.logo-mini, +.sidebar .logo a.logo-normal, +.off-canvas-sidebar .logo a.logo-mini, +.off-canvas-sidebar .logo a.logo-normal, +.sidebar .user .photo, +.off-canvas-sidebar .user .photo, +.sidebar .user a, +.off-canvas-sidebar .user a, +.sidebar .user .info > a > span, +.off-canvas-sidebar .user .info > a > span { + -webkit-transition: all 300ms ease 0s; + -moz-transition: all 300ms ease 0s; + -o-transition: all 300ms ease 0s; + -ms-transition: all 300ms ease 0s; + transition: all 300ms ease 0s; +} + +.bootstrap-switch-label:before, +.caret { + -webkit-transition: all 150ms ease 0s; + -moz-transition: all 150ms ease 0s; + -o-transition: all 150ms ease 0s; + -ms-transition: all 150ms ease 0s; + transition: all 150ms ease 0s; +} + +.dropdown-toggle[aria-expanded="true"]:after, +a[data-toggle="collapse"][aria-expanded="true"] .caret, +.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i, +.card-collapse .card a[data-toggle="collapse"].expanded i { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.caret { + width: 0; + height: 0; + vertical-align: middle; + border-top: 4px dashed; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + margin-top: -5px; + position: absolute; + top: 30px; + margin-left: 5px; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.card form label + .form-control { + margin-bottom: 20px; +} + +.card .map-title { + color: #ffffff; +} + +.card.card-chart .gmnoprint, +.card.card-chart .gm-style-cc { + display: none !important; +} + +.bd-docs h1, .bd-docs h2, .bd-docs h3, .bd-docs h4, .bd-docs h5, .bd-docs h6, .bd-docs p, .bd-docs ul li, .bd-docs ol li { + color: #2c2c2c; +} + +.bd-docs .bd-content > table > thead > tr > th { + color: #222a42; +} + +.bd-docs .blockquote, .bd-docs .blockquote p, .bd-docs .card p { + color: rgba(255, 255, 255, 0.8); +} + +.bd-docs .bd-example { + background: linear-gradient(#1e1e2f, #1e1e24); +} + +.bd-docs .navbar { + border-top: none; +} + +.bd-docs .navbar .navbar-nav .nav-link { + color: rgba(255, 255, 255, 0.8) !important; +} + +.bd-docs .bd-example .btn { + margin: 4px 0; +} + +.bd-docs .bd-example .btn .badge { + display: inline-block; +} + +.bd-docs .bd-example .tim-icons { + color: #ffffff; +} + +.bd-docs .bd-example .popover .popover-header { + color: rgba(181, 181, 181, 0.6); +} + +.bd-docs .bd-example .popover-body p { + color: #212529; +} + +.bd-docs .bd-example.tooltip-demo p { + color: rgba(255, 255, 255, 0.8); +} + +.bd-docs .card.card-body, +.bd-docs .card .card-body { + color: rgba(255, 255, 255, 0.8); +} + +.bd-docs label, +.bd-docs .form-check { + color: rgba(255, 255, 255, 0.8); +} + +.bd-docs .form-check + .btn { + margin-top: 20px; +} + +.bd-docs .bd-example thead th, +.bd-docs table thead th { + color: rgba(255, 255, 255, 0.8); +} + +.bd-docs .bd-example h1, .bd-docs .bd-example h2, .bd-docs .bd-example h3, .bd-docs .bd-example h4, .bd-docs .bd-example h5, .bd-docs .bd-example h6, +.bd-docs .bd-example .h1, .bd-docs .bd-example .h2, .bd-docs .bd-example .h3, .bd-docs .bd-example .h4, .bd-docs .bd-example .h5, .bd-docs .bd-example .h6, +.bd-docs table h1, +.bd-docs table h2, +.bd-docs table h3, +.bd-docs table h4, +.bd-docs table h5, +.bd-docs table h6, +.bd-docs table .h1, +.bd-docs table .h2, +.bd-docs table .h3, +.bd-docs table .h4, +.bd-docs table .h5, +.bd-docs table .h6 { + color: rgba(255, 255, 255, 0.8); +} + +.bd-docs .bd-example .datepicker thead th, .bd-docs .bd-example .datepicker table thead th, .bd-docs .bd-example .datepicker .tim-icons, +.bd-docs table .datepicker thead th, +.bd-docs table .datepicker table thead th, +.bd-docs table .datepicker .tim-icons { + color: #e14eca; +} + +.bd-docs .bd-example .picker-switch .tim-icons, +.bd-docs table .picker-switch .tim-icons { + color: #e14eca; +} + +.bd-docs .footer .container-fluid > nav { + display: inline-block; +} + +.modal.show .modal-dialog { + -webkit-transform: translate(0, 30%); + transform: translate(0, 30%); +} + +code { + color: #f3a4b5; +} + +@media screen and (max-width: 991px) { + .profile-photo .profile-photo-small { + margin-left: -2px; + } + .button-dropdown { + display: none; + } + #searchModal .modal-dialog { + margin: 20px; + } + #minimizeSidebar { + display: none; + } +} + +@media screen and (max-width: 768px) { + .landing-page .section-story-overview .image-container:nth-child(2) { + margin-left: 0; + margin-bottom: 30px; + } +} + +@media screen and (max-width: 576px) { + .page-header .container h6.category-absolute { + width: 90%; + } + .form-horizontal .col-form-label, .form-horizontal .label-on-right { + text-align: inherit; + padding-top: 0; + } + .form-horizontal .col-form-label code, .form-horizontal .label-on-right code { + padding: 0 10px; + } +} + +.rtl .sidebar, +.rtl .bootstrap-navbar { + right: 0; + left: auto; + margin-right: 20px; + margin-left: 0; +} + +.rtl .sidebar .nav i, +.rtl .bootstrap-navbar .nav i { + float: right; + margin-left: 15px; + margin-right: 0; +} + +.rtl .sidebar .nav p, +.rtl .bootstrap-navbar .nav p { + margin-right: 45px; + text-align: right; +} + +.rtl .sidebar .nav .caret, +.rtl .bootstrap-navbar .nav .caret { + left: 11px; + right: auto; +} + +.rtl .sidebar .logo a.logo-mini, +.rtl .bootstrap-navbar .logo a.logo-mini { + float: right; + margin-right: 20px; + margin-left: 10px; +} + +.rtl .sidebar .logo .simple-text, +.rtl .bootstrap-navbar .logo .simple-text { + text-align: right; +} + +.rtl .sidebar .sidebar-wrapper .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, +.rtl .sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, +.rtl .bootstrap-navbar .sidebar-wrapper .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, +.rtl .bootstrap-navbar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon { + float: right; + margin-left: 15px; + margin-right: 0; +} + +.rtl .sidebar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, +.rtl .sidebar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, +.rtl .bootstrap-navbar .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, +.rtl .bootstrap-navbar .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal { + text-align: right; +} + +.rtl .sidebar:before, +.rtl .bootstrap-navbar:before { + right: 30px; + left: auto; +} + +.rtl .main-panel .content { + padding: 80px 280px 30px 30px; +} + +.rtl .footer { + padding: 24px 300px 24px 0; +} + +.rtl .dropdown-toggle:after { + margin-right: .255em; + margin-left: 0; +} + +.rtl .dropdown-menu.dropdown-menu-right.dropdown-navbar { + right: -220px !important; + left: auto; +} + +.rtl .dropdown-menu.dropdown-menu-right.dropdown-navbar:before { + right: auto; + left: 35px; +} + +.rtl .notification { + left: 40px; + right: auto; +} + +.rtl .dropdown-menu { + right: auto; + left: 0; +} + +.rtl .minimize-sidebar { + float: right; +} + +.rtl .alert { + left: 0; + margin-left: 0; + margin-right: 0; +} + +.rtl .alert button.close { + left: 10px !important; + right: auto !important; +} + +.rtl .alert span[data-notify="icon"] { + right: 15px; + left: auto; +} + +.rtl .alert.alert-with-icon { + padding-right: 65px; + padding-left: 15px; +} + +.rtl .alert.alert-with-icon i[data-notify="icon"] { + right: 15px; + left: auto; +} + +.rtl .search-bar { + margin-left: 0; +} + +.rtl .modal-search .modal-header .close { + margin-right: auto; + left: 10px; +} + +@media (min-width: 991px) { + .rtl.sidebar-mini .main-panel .content { + padding-right: 130px; + padding-left: 50px; + } + .rtl.sidebar-mini footer { + padding-right: 130px; + padding-left: 50px; + } + .rtl .navbar-minimize button { + margin-right: -5px; + } +} + +@media screen and (max-width: 991px) { + .rtl .sidebar { + margin-right: 0; + } + .rtl .main-panel .content { + padding-right: 50px; + } + .rtl #bodyClick { + right: 260px; + left: auto; + } + .rtl .footer { + padding-right: 15px; + } +} + +.rtl .navbar .navbar-nav { + padding-right: 0; +} + +.rtl .navbar .navbar-nav a.nav-link { + text-align: right; +} + +.rtl .navbar .navbar-nav a.nav-link p { + margin-right: 7px; +} + +.rtl .navbar .navbar-nav .btn { + margin-right: 0; + padding: 0; +} + +.rtl .navbar .navbar-nav .btn i { + margin-left: 4px; + margin-right: 5px; +} + +.rtl .navbar .navbar-nav .search-bar span { + margin-right: 10px; +} + +.rtl .ps__rail-y { + right: auto !important; + left: 0; +} + +.rtl .main-panel { + position: fixed; + height: 100%; + overflow-y: scroll; + overflow-x: hidden; +} + +@media screen and (max-width: 768px) { + .rtl .main-panel .content { + padding-left: 15px; + padding-right: 15px; + } +} + +.form-group.has-danger .error, +.input-group.has-danger .error { + color: #ec250d; +} + +.form-group.has-success .error, +.input-group.has-success .error { + color: #00f2c3; +} + +.form-group.no-border.form-control-lg .input-group-append .input-group-text, +.input-group.no-border.form-control-lg .input-group-append .input-group-text { + padding: 15px 0 15px 19px; +} + +.form-group.no-border.form-control-lg .form-control, +.input-group.no-border.form-control-lg .form-control { + padding: 15px 19px; +} + +.form-group.no-border.form-control-lg .form-control + .input-group-prepend .input-group-text, +.form-group.no-border.form-control-lg .form-control + .input-group-append .input-group-text, +.input-group.no-border.form-control-lg .form-control + .input-group-prepend .input-group-text, +.input-group.no-border.form-control-lg .form-control + .input-group-append .input-group-text { + padding: 15px 19px 15px 0; +} + +.form-group.form-control-lg .form-control, +.input-group.form-control-lg .form-control { + padding: 14px 18px; + height: 100%; +} + +.form-group.form-control-lg .form-control + .input-group-prepend .input-group-text, +.form-group.form-control-lg .form-control + .input-group-append .input-group-text, +.input-group.form-control-lg .form-control + .input-group-prepend .input-group-text, +.input-group.form-control-lg .form-control + .input-group-append .input-group-text { + padding: 14px 18px 14px 0; +} + +.form-group.form-control-lg .input-group-prepend .input-group-text, +.form-group.form-control-lg .input-group-append .input-group-text, +.input-group.form-control-lg .input-group-prepend .input-group-text, +.input-group.form-control-lg .input-group-append .input-group-text { + padding: 14px 0 15px 18px; +} + +.form-group.form-control-lg .input-group-prepend .input-group-text + .form-control, +.form-group.form-control-lg .input-group-append .input-group-text + .form-control, +.input-group.form-control-lg .input-group-prepend .input-group-text + .form-control, +.input-group.form-control-lg .input-group-append .input-group-text + .form-control { + padding: 15px 18px 15px 16px; +} + +.form-group.no-border .form-control, +.input-group.no-border .form-control { + padding: 11px 19px; +} + +.form-group.no-border .form-control + .input-group-prepend .input-group-text, +.form-group.no-border .form-control + .input-group-append .input-group-text, +.input-group.no-border .form-control + .input-group-prepend .input-group-text, +.input-group.no-border .form-control + .input-group-append .input-group-text { + padding: 11px 19px 11px 0; +} + +.form-group.no-border .input-group-prepend .input-group-text, +.form-group.no-border .input-group-append .input-group-text, +.input-group.no-border .input-group-prepend .input-group-text, +.input-group.no-border .input-group-append .input-group-text { + padding: 11px 0 11px 19px; +} + +.form-group .form-control, +.input-group .form-control { + padding: 10px 18px 10px 18px; +} + +.form-group .form-control + .input-group-prepend .input-group-text, +.form-group .form-control + .input-group-append .input-group-text, +.input-group .form-control + .input-group-prepend .input-group-text, +.input-group .form-control + .input-group-append .input-group-text { + padding: 10px 18px 10px 0; +} + +.form-group .input-group-prepend .input-group-text, +.form-group .input-group-append .input-group-text, +.input-group .input-group-prepend .input-group-text, +.input-group .input-group-append .input-group-text { + padding: 10px 0 10px 18px; +} + +.form-group .input-group-prepend .input-group-text + .form-control, +.form-group .input-group-prepend .input-group-text ~ .form-control, +.form-group .input-group-append .input-group-text + .form-control, +.form-group .input-group-append .input-group-text ~ .form-control, +.input-group .input-group-prepend .input-group-text + .form-control, +.input-group .input-group-prepend .input-group-text ~ .form-control, +.input-group .input-group-append .input-group-text + .form-control, +.input-group .input-group-append .input-group-text ~ .form-control { + padding: 10px 19px 11px 16px; +} + +.form-group.no-border .form-control, +.form-group.no-border .form-control + .input-group-prepend .input-group-text, +.form-group.no-border .form-control + .input-group-append .input-group-text, +.input-group.no-border .form-control, +.input-group.no-border .form-control + .input-group-prepend .input-group-text, +.input-group.no-border .form-control + .input-group-append .input-group-text { + background-color: #242c45; + border: medium none; +} + +.form-group.no-border .form-control:focus, .form-group.no-border .form-control:active, .form-group.no-border .form-control:active, +.form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.form-group.no-border .form-control + .input-group-append .input-group-text:active, +.form-group.no-border .form-control + .input-group-append .input-group-text:active, +.input-group.no-border .form-control:focus, +.input-group.no-border .form-control:active, +.input-group.no-border .form-control:active, +.input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.input-group.no-border .form-control + .input-group-append .input-group-text:active, +.input-group.no-border .form-control + .input-group-append .input-group-text:active { + border: medium none; + background-color: #252e49; +} + +.form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: #252e49; +} + +.form-group.no-border .input-group-prepend .input-group-text, +.form-group.no-border .input-group-append .input-group-text, +.input-group.no-border .input-group-prepend .input-group-text, +.input-group.no-border .input-group-append .input-group-text { + background-color: #242c45; + border: none; +} + +.has-error .form-control-feedback, .has-error .control-label { + color: #ec250d; +} + +.has-success .form-control-feedback, .has-success .control-label { + color: #00f2c3; +} + +.input-group-append .input-group-text, +.input-group-prepend .input-group-text { + background-color: transparent; + border: 1px solid #2b3553; + border-radius: 0.4285rem; + color: #ffffff; + -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; +} + +.input-group-append .input-group-text i, +.input-group-prepend .input-group-text i { + opacity: .5; +} + +.has-danger.input-group-focus .input-group-append .input-group-text, .has-danger.input-group-focus +.input-group-prepend .input-group-text { + background-color: transparent; +} + +.has-success .input-group-append .input-group-text, .has-success +.input-group-prepend .input-group-text { + background-color: transparent; +} + +.has-danger .form-control:focus + .input-group-append .input-group-text, .has-danger .form-control:focus + +.input-group-prepend .input-group-text { + color: #ec250d; +} + +.has-success .form-control:focus + .input-group-append .input-group-text, .has-success .form-control:focus + +.input-group-prepend .input-group-text { + color: #00f2c3; +} + +.input-group-append .input-group-text + .form-control, +.input-group-append .input-group-text ~ .form-control, +.input-group-prepend .input-group-text + .form-control, +.input-group-prepend .input-group-text ~ .form-control { + padding: -0.5rem 0.7rem; + padding-left: 18px; +} + +.input-group-append .input-group-text i, +.input-group-prepend .input-group-text i { + width: 17px; +} + +.input-group-append, +.input-group-prepend .input-group-text, +.input-group-prepend .input-group-text { + background-color: transparent; + border: 1px solid #2b3553; + border-radius: 0.4285rem; + color: #ffffff; + margin: 0; +} + +.input-group-append .input-group-text { + border-left: none; +} + +.input-group-prepend .input-group-text { + border-right: none; +} + +.input-group-focus .input-group-prepend .input-group-text, +.input-group-focus .input-group-append .input-group-text { + background-color: #ffffff; + border-color: #e14eca; + background-color: transparent; + border-color: #e14eca; +} + +.input-group-focus.no-border .input-group-prepend .input-group-text, +.input-group-focus.no-border .input-group-append .input-group-text { + background-color: #252e49; +} + +.input-group, +.form-group { + margin-bottom: 10px; + position: relative; +} + +.input-group .form-control-static, +.form-group .form-control-static { + margin-top: 9px; +} + +.input-group[disabled] .input-group-prepend .input-group-text, +.input-group[disabled] .input-group-append .input-group-text { + background-color: #E3E3E3; +} + +.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child) { + border-radius: 0.4285rem; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0 none; +} + +.input-group .form-control:first-child, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { + border-right: 0 none; +} + +.input-group .form-control:last-child, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { + border-left: 0 none; +} + +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + background-color: #1d253b; + color: #344675; + cursor: not-allowed; +} + +.input-group-btn .btn { + border-width: 1px; + padding: 11px 0.7rem; +} + +.input-group-btn .btn-default:not(.btn-fill) { + border-color: #DDDDDD; +} + +.input-group-btn:last-child > .btn { + margin-left: 0; +} + +textarea.form-control { + max-width: 100%; + max-height: 80px; + padding: 10px 10px 0 0; + resize: none; + border: none; + border-bottom: 1px solid #2b3553; + border-radius: 0; + line-height: 2; +} + +textarea.form-control:focus, textarea.form-control:active { + border-left: none; + border-top: none; + border-right: none; +} + +.has-success.form-group .form-control, +.has-success.form-group.no-border .form-control, +.has-danger.form-group .form-control, +.has-danger.form-group.no-border .form-control { + padding-right: 40px; +} + +.form.form-newsletter .form-group { + float: left; + width: 78%; + margin-right: 2%; + margin-top: 9px; +} + +.input-group .input-group-btn { + padding: 0 12px; +} + +.form-group input[type=file] { + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} + +.form-text { + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.8); +} + +.form-control-lg { + padding: 0; + font-size: inherit; + line-height: 0; + border-radius: 0; +} + +.form-control-lg .form-control { + height: calc(2.875rem + 2px); +} + +.form-horizontal .col-form-label, .form-horizontal .label-on-right { + padding: 10px 5px 0 15px; + text-align: right; + max-width: 180px; +} + +.form-horizontal .checkbox-radios { + margin-bottom: 15px; +} + +.form-horizontal .checkbox-radios .form-check:first-child { + margin-top: 8px; +} + +.form-horizontal .label-on-right { + text-align: left; + padding: 10px 15px 0 5px; +} + +.form-horizontal .form-check-inline { + margin-top: 6px; +} + +.form-horizontal .form-check-inline .form-check-label { + margin-right: 1.5rem; +} + +.search-bar { + margin-left: 30px; +} + +.search-bar .btn { + margin: 0; +} + +.search-bar.input-group { + border-radius: 25px; + z-index: 4; + margin-bottom: 0; + height: 43px; + padding-right: 5px; +} + +.search-bar.input-group .input-group-addon { + padding: 10px; + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.7); +} + +.search-bar.input-group i { + font-size: 20px; + color: #ffffff; + margin-top: 0 !important; +} + +.search-bar.input-group input { + background: transparent; + border: none !important; + border-radius: 0; + padding: 12px !important; + font-size: 12px; + opacity: 0.5; +} + +.search-bar.input-group input:focus { + background: transparent; +} + +.search-bar.input-group .form-control { + opacity: 1; + color: #ffffff; +} + +.search-bar.input-group .form-control::placeholder { + color: white; +} + +.modal-search .modal-dialog { + max-width: 1000px; + margin: 20px auto; +} + +.modal-search .modal-dialog .form-control { + border: none; + color: #222a42; +} + +.modal-search .modal-dialog .form-control::placeholder { + color: #222a42; +} + +.input-group-prepend { + margin-right: 0; +} + +.input-group-prepend .tim-icons, +.input-group-append .tim-icons { + font-size: 1rem; +} + +/* + * Container style + */ +.ps { + overflow: hidden !important; + overflow-anchor: none; + -ms-overflow-style: none; + touch-action: auto; + -ms-touch-action: auto; +} + +/* + * Scrollbar rail styles + */ +.ps__rail-x { + display: none; + opacity: 0; + transition: background-color .2s linear, opacity .2s linear; + -webkit-transition: background-color .2s linear, opacity .2s linear; + height: 15px; + /* there must be 'bottom' or 'top' for ps__rail-x */ + bottom: 0px; + /* please don't change 'position' */ + position: absolute; +} + +.ps__rail-y { + display: none; + opacity: 0; + transition: background-color .2s linear, opacity .2s linear; + -webkit-transition: background-color .2s linear, opacity .2s linear; + width: 15px; + /* there must be 'right' or 'left' for ps__rail-y */ + right: 0; + /* please don't change 'position' */ + position: absolute; +} + +.ps--active-x > .ps__rail-x, +.ps--active-y > .ps__rail-y { + display: block; + background-color: transparent; +} + +.ps:hover > .ps__rail-x, +.ps:hover > .ps__rail-y, +.ps--focus > .ps__rail-x, +.ps--focus > .ps__rail-y, +.ps--scrolling-x > .ps__rail-x, +.ps--scrolling-y > .ps__rail-y { + opacity: 0.6; +} + +.ps .ps__rail-x:hover, +.ps .ps__rail-y:hover, +.ps .ps__rail-x:focus, +.ps .ps__rail-y:focus, +.ps .ps__rail-x.ps--clicking, +.ps .ps__rail-y.ps--clicking { + background-color: #eee; + opacity: 0.9; +} + +/* + * Scrollbar thumb styles + */ +.ps__thumb-x { + background-color: #aaa; + border-radius: 6px; + transition: background-color .2s linear, height .2s ease-in-out; + -webkit-transition: background-color .2s linear, height .2s ease-in-out; + height: 6px; + /* there must be 'bottom' for ps__thumb-x */ + bottom: 2px; + /* please don't change 'position' */ + position: absolute; +} + +.ps__thumb-y { + background-color: #aaa; + border-radius: 6px; + transition: background-color .2s linear, width .2s ease-in-out; + -webkit-transition: background-color .2s linear, width .2s ease-in-out; + width: 6px; + /* there must be 'right' for ps__thumb-y */ + right: 2px; + /* please don't change 'position' */ + position: absolute; +} + +.ps__rail-x:hover > .ps__thumb-x, +.ps__rail-x:focus > .ps__thumb-x, +.ps__rail-x.ps--clicking .ps__thumb-x { + background-color: #999; + height: 11px; +} + +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y, +.ps__rail-y.ps--clicking .ps__thumb-y { + background-color: #999; + width: 11px; +} + +/* MS supports */ +@supports (-ms-overflow-style: none) { + .ps { + overflow: auto !important; + } +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .ps { + overflow: auto !important; + } +} + +/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2015 Daniel Eden +*/ +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.animated.bounceIn, +.animated.bounceOut { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +.animated.flipOutX, +.animated.flipOutY { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +@-webkit-keyframes shake { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +@keyframes shake { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + +@-webkit-keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes fadeOutDown { + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes fadeOutDown { + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@-webkit-keyframes fadeOutUp { + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} + +.white-content { + background: #f5f6fa; +} + +.white-content .navbar.navbar-transparent .navbar-brand { + color: #1d253b; +} + +.white-content .navbar.navbar-transparent .navbar-toggler-bar { + background: #1d253b; +} + +.white-content .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item) { + color: #1d253b; +} + +.white-content .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item) i { + color: #1d253b; +} + +.white-content .navbar.navbar-transparent .navbar-minimize button i { + color: #1d253b; +} + +.white-content .navbar.navbar-transparent .search-bar.input-group i { + color: #1d253b; +} + +.white-content .navbar.navbar-transparent .search-bar.input-group .form-control { + color: #344675; +} + +.white-content .navbar.navbar-transparent .search-bar.input-group .form-control::placeholder { + color: #9A9A9A; +} + +.white-content .sidebar { + box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.15); +} + +.white-content .sidebar p { + color: rgba(255, 255, 255, 0.8); +} + +.white-content .main-panel { + background: #f5f6fa; +} + +.white-content h1, .white-content h2, .white-content h3, .white-content h4, .white-content h5, .white-content h6, .white-content p, .white-content ol li, .white-content ul li, .white-content pre { + color: #1d253b; +} + +.white-content .font-icon-detail i { + color: #222a42; +} + +.white-content .btn:not([data-action]):hover { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.white-content .btn-neutral.btn-link { + color: rgba(34, 42, 66, 0.7); +} + +.white-content .form-control::-moz-placeholder { + color: rgba(34, 42, 66, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.white-content .form-control:-moz-placeholder { + color: rgba(34, 42, 66, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.white-content .form-control::-webkit-input-placeholder { + color: rgba(34, 42, 66, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.white-content .form-control:-ms-input-placeholder { + color: rgba(34, 42, 66, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.white-content .has-danger .form-control, .white-content .has-danger .input-group-prepend .input-group-text { + border-color: #ec250d; +} + +.white-content .input-group-prepend .input-group-text { + border-color: rgba(29, 37, 59, 0.5); + color: #1d253b; +} + +.white-content .form-control { + color: #222a42; + border-color: rgba(29, 37, 59, 0.5); +} + +.white-content .form-control:focus { + border-color: #e14eca; +} + +.white-content .form-group.no-border .form-control, +.white-content .form-group.no-border .form-control + .input-group-prepend .input-group-text, +.white-content .form-group.no-border .form-control + .input-group-append .input-group-text, +.white-content .form-group.no-border .input-group-prepend .input-group-text, +.white-content .form-group.no-border .input-group-append .input-group-text, +.white-content .input-group.no-border .form-control, +.white-content .input-group.no-border .form-control + .input-group-prepend .input-group-text, +.white-content .input-group.no-border .form-control + .input-group-append .input-group-text, +.white-content .input-group.no-border .input-group-prepend .input-group-text, +.white-content .input-group.no-border .input-group-append .input-group-text { + background-color: rgba(222, 222, 222, 0.3); +} + +.white-content .form-group.no-border .form-control:focus, .white-content .form-group.no-border .form-control:active, .white-content .form-group.no-border .form-control:active, +.white-content .form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.white-content .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.white-content .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.white-content .form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.white-content .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.white-content .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.white-content .form-group.no-border .input-group-prepend .input-group-text:focus, +.white-content .form-group.no-border .input-group-prepend .input-group-text:active, +.white-content .form-group.no-border .input-group-prepend .input-group-text:active, +.white-content .form-group.no-border .input-group-append .input-group-text:focus, +.white-content .form-group.no-border .input-group-append .input-group-text:active, +.white-content .form-group.no-border .input-group-append .input-group-text:active, +.white-content .input-group.no-border .form-control:focus, +.white-content .input-group.no-border .form-control:active, +.white-content .input-group.no-border .form-control:active, +.white-content .input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.white-content .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.white-content .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.white-content .input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.white-content .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.white-content .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.white-content .input-group.no-border .input-group-prepend .input-group-text:focus, +.white-content .input-group.no-border .input-group-prepend .input-group-text:active, +.white-content .input-group.no-border .input-group-prepend .input-group-text:active, +.white-content .input-group.no-border .input-group-append .input-group-text:focus, +.white-content .input-group.no-border .input-group-append .input-group-text:active, +.white-content .input-group.no-border .input-group-append .input-group-text:active { + background-color: rgba(222, 222, 222, 0.5); +} + +.white-content .form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.white-content .form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.white-content .input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.white-content .input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: transparent; +} + +.white-content .input-group[disabled] .input-group-prepend .input-group-text, +.white-content .input-group[disabled] .input-group-append .input-group-text { + background-color: #222a42; +} + +.white-content .form-control[disabled], .white-content .form-control[readonly], .white-content fieldset[disabled] .form-control { + background: #E3E3E3; + border-color: rgba(29, 37, 59, 0.3); +} + +.white-content .input-group-focus .input-group-prepend .input-group-text, +.white-content .input-group-focus .input-group-append .input-group-text, +.white-content .input-group-focus .form-control { + border-color: #e14eca; +} + +.white-content .input-group-focus.no-border .input-group-prepend .input-group-text, +.white-content .input-group-focus.no-border .input-group-append .input-group-text { + background-color: rgba(222, 222, 222, 0.5); +} + +.white-content .input-group-prepend .input-group-text { + border-right: none; +} + +.white-content .input-group-append .input-group-text { + border-left: none; +} + +.white-content .has-danger .form-control:focus, .white-content .has-success.input-group-focus .input-group-append .input-group-text, .white-content .has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: #ec250d; +} + +.white-content .has-success .form-control:focus, .white-content .has-success.input-group-focus .input-group-append .input-group-text, .white-content .has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: #00bf9a; +} + +.white-content .btn.btn-link:hover, .white-content .btn.btn-link:active, .white-content .btn.btn-link:focus { + color: #9A9A9A !important; +} + +.white-content .btn-group .btn.active { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.white-content .card:not(.card-white) { + background: #ffffff; + box-shadow: 0 1px 15px 0 rgba(123, 123, 123, 0.05); +} + +.white-content .card:not(.card-white) .card-header { + color: #222a42; +} + +.white-content .card:not(.card-white) .card-header a[data-toggle="collapse"] { + color: #222a42; +} + +.white-content .card:not(.card-white) .card-header .card-title, .white-content .card:not(.card-white) .card-body .card-title { + color: #1d253b; +} + +.white-content .card:not(.card-white) .card-body .card-category, .white-content .card:not(.card-white) .card-body .card-description { + color: #1d253b; +} + +.white-content .card:not(.card-white) label:not(.btn) { + color: #344675; +} + +.white-content .card:not(.card-white).nav-pills .nav-item .nav-link { + color: #444444; + background-color: rgba(222, 222, 222, 0.3); +} + +.white-content .card:not(.card-white).nav-pills .nav-item .nav-link:not(.active):hover { + background: rgba(222, 222, 222, 0.5); +} + +.white-content .card:not(.card-white).nav-pills .nav-item .nav-link.active { + color: #ffffff; +} + +.white-content .card:not(.card-white) .tab-content .tab-pane { + color: #444444; +} + +.white-content .card:not(.card-white) .card { + box-shadow: none; +} + +.white-content .card:not(.card-white).card-plain { + background: transparent; + box-shadow: none; +} + +.white-content .card:not(.card-white).card-tasks .card-body i { + color: rgba(34, 42, 66, 0.7); +} + +.white-content .card:not(.card-white).card-tasks .card-body i:hover { + color: #222a42; +} + +.white-content .table > tbody > tr > td { + color: rgba(34, 42, 66, 0.7) !important; +} + +.white-content .table > thead > tr > th, +.white-content .table > tbody > tr > th, +.white-content .table > tfoot > tr > th, +.white-content .table > thead > tr > td, +.white-content .table > tbody > tr > td, +.white-content .table > tfoot > tr > td { + border-color: rgba(34, 42, 66, 0.2); + padding: 12px 7px; + vertical-align: middle; +} + +.white-content .table > thead > tr > th, .white-content .table button.btn-neutral.btn-link { + color: rgba(34, 42, 66, 0.7); +} + +.white-content .footer ul li a { + color: #1d253b; +} + +.white-content .footer .copyright { + color: #1d253b; +} + +.white-content .progress-container .progress, .white-content .progress-container.progress.sm .progress { + background: rgba(34, 42, 66, 0.1); + box-shadow: 0 0 0 3px rgba(34, 42, 66, 0.1); +} + +.white-content .progress-container .progress .progress-value, .white-content .progress-container.progress.sm .progress .progress-value { + color: #344675; +} + +.white-content .progress-container .progress-badge, .white-content .progress-container.progress.sm .progress-badge { + color: #1d253b; +} + +.white-content .full-page { + background: #f5f6fa; +} + +.white-content .full-page h1, .white-content .full-page h2, .white-content .full-page h3, .white-content .full-page h4, .white-content .full-page h5, .white-content .full-page h6, .white-content .full-page p, .white-content .full-page ol li, .white-content .full-page ul li, .white-content .full-page pre { + color: #1d253b; +} + +.white-content .full-page .description { + color: #9A9A9A; +} + +.white-content .full-page .footer ul li a { + color: #1d253b; +} + +.white-content .full-page .footer .copyright { + color: #1d253b; +} + +.white-content .nav-pills .nav-item .nav-link:not(.active) { + background: #d3d7e9; + color: #1d253b; +} + +.white-content .nav-pills .nav-item .nav-link:not(.active):hover { + background: #cccccc; +} + +.card { + background: #27293d; + border: 0; + position: relative; + width: 100%; + margin-bottom: 30px; + box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1); +} + +.card label { + color: rgba(255, 255, 255, 0.6); +} + +.card .card-title { + margin-bottom: .75rem; +} + +.card .card-body { + padding: 15px; +} + +.card .card-body.table-full-width { + padding-left: 0; + padding-right: 0; +} + +.card .card-body .card-title { + color: #ffffff; + text-transform: inherit; + font-weight: 300; + margin-bottom: .75rem; +} + +.card .card-body .card-description, .card .card-body .card-category { + color: rgba(255, 255, 255, 0.6); +} + +.card .card-header { + padding: 15px 15px 0; + border: 0; + color: rgba(255, 255, 255, 0.8); +} + +.card .card-header:not([data-background-color]) { + background-color: transparent; +} + +.card .card-header .card-title { + color: #ffffff; + font-weight: 100; +} + +.card .card-header .card-category { + color: #9A9A9A; + margin-bottom: 5px; + font-weight: 300; +} + +.card .map { + border-radius: 0.2857rem; +} + +.card .map.map-big { + height: 420px; +} + +.card.card-white { + background: #ffffff; +} + +.card.card-white .card-title { + color: #222a42; +} + +.card.card-white .card-category, .card.card-white .stats { + color: #808080; +} + +.card.card-white .form-control::-moz-placeholder { + color: rgba(34, 42, 66, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.card.card-white .form-control:-moz-placeholder { + color: rgba(34, 42, 66, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.card.card-white .form-control::-webkit-input-placeholder { + color: rgba(34, 42, 66, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.card.card-white .form-control:-ms-input-placeholder { + color: rgba(34, 42, 66, 0.4); + opacity: 1; + filter: alpha(opacity=100); +} + +.card.card-white .has-danger .form-control, .card.card-white .has-danger .input-group-prepend .input-group-text { + border-color: #ec250d; +} + +.card.card-white .input-group-prepend .input-group-text { + border-color: rgba(29, 37, 59, 0.2); + color: #1d253b; +} + +.card.card-white .form-control { + color: #222a42; + border-color: rgba(29, 37, 59, 0.2); +} + +.card.card-white .form-control:focus { + border-color: #e14eca; +} + +.card.card-white label:not(.btn) { + color: #344675; +} + +.card.card-white .form-group.no-border .form-control, +.card.card-white .form-group.no-border .form-control + .input-group-prepend .input-group-text, +.card.card-white .form-group.no-border .form-control + .input-group-append .input-group-text, +.card.card-white .form-group.no-border .input-group-prepend .input-group-text, +.card.card-white .form-group.no-border .input-group-append .input-group-text, +.card.card-white .input-group.no-border .form-control, +.card.card-white .input-group.no-border .form-control + .input-group-prepend .input-group-text, +.card.card-white .input-group.no-border .form-control + .input-group-append .input-group-text, +.card.card-white .input-group.no-border .input-group-prepend .input-group-text, +.card.card-white .input-group.no-border .input-group-append .input-group-text { + background-color: rgba(222, 222, 222, 0.3); +} + +.card.card-white .form-group.no-border .form-control:focus, .card.card-white .form-group.no-border .form-control:active, .card.card-white .form-group.no-border .form-control:active, +.card.card-white .form-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.card.card-white .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.card.card-white .form-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.card.card-white .form-group.no-border .form-control + .input-group-append .input-group-text:focus, +.card.card-white .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.card.card-white .form-group.no-border .form-control + .input-group-append .input-group-text:active, +.card.card-white .form-group.no-border .input-group-prepend .input-group-text:focus, +.card.card-white .form-group.no-border .input-group-prepend .input-group-text:active, +.card.card-white .form-group.no-border .input-group-prepend .input-group-text:active, +.card.card-white .form-group.no-border .input-group-append .input-group-text:focus, +.card.card-white .form-group.no-border .input-group-append .input-group-text:active, +.card.card-white .form-group.no-border .input-group-append .input-group-text:active, +.card.card-white .input-group.no-border .form-control:focus, +.card.card-white .input-group.no-border .form-control:active, +.card.card-white .input-group.no-border .form-control:active, +.card.card-white .input-group.no-border .form-control + .input-group-prepend .input-group-text:focus, +.card.card-white .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.card.card-white .input-group.no-border .form-control + .input-group-prepend .input-group-text:active, +.card.card-white .input-group.no-border .form-control + .input-group-append .input-group-text:focus, +.card.card-white .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.card.card-white .input-group.no-border .form-control + .input-group-append .input-group-text:active, +.card.card-white .input-group.no-border .input-group-prepend .input-group-text:focus, +.card.card-white .input-group.no-border .input-group-prepend .input-group-text:active, +.card.card-white .input-group.no-border .input-group-prepend .input-group-text:active, +.card.card-white .input-group.no-border .input-group-append .input-group-text:focus, +.card.card-white .input-group.no-border .input-group-append .input-group-text:active, +.card.card-white .input-group.no-border .input-group-append .input-group-text:active { + background-color: rgba(222, 222, 222, 0.5); +} + +.card.card-white .form-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.card.card-white .form-group.no-border .form-control:focus + .input-group-append .input-group-text, +.card.card-white .input-group.no-border .form-control:focus + .input-group-prepend .input-group-text, +.card.card-white .input-group.no-border .form-control:focus + .input-group-append .input-group-text { + background-color: transparent; +} + +.card.card-white .input-group[disabled] .input-group-prepend .input-group-text, +.card.card-white .input-group[disabled] .input-group-append .input-group-text { + background-color: #222a42; +} + +.card.card-white .form-control[disabled], .card.card-white .form-control[readonly], .card.card-white fieldset[disabled] .form-control { + background: #E3E3E3; + border-color: rgba(29, 37, 59, 0.3); +} + +.card.card-white .input-group-focus .input-group-prepend .input-group-text, +.card.card-white .input-group-focus .input-group-append .input-group-text, +.card.card-white .input-group-focus .form-control { + background-color: #ffffff; + border-color: #e14eca; +} + +.card.card-white .input-group-focus.no-border .input-group-prepend .input-group-text, +.card.card-white .input-group-focus.no-border .input-group-append .input-group-text { + background-color: rgba(222, 222, 222, 0.5); +} + +.card.card-white .input-group-prepend .input-group-text { + border-right: none; +} + +.card.card-white .input-group-append .input-group-text { + border-left: none; +} + +.card.card-white .has-danger .form-control:focus, .card.card-white .has-success.input-group-focus .input-group-append .input-group-text, .card.card-white .has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: #ec250d; +} + +.card.card-white .has-success .form-control:focus, .card.card-white .has-success.input-group-focus .input-group-append .input-group-text, .card.card-white .has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: #00bf9a; +} + +.card.card-plain { + background: transparent; + box-shadow: none; +} + +.card .image { + overflow: hidden; + height: 200px; + position: relative; +} + +.card .avatar { + width: 30px; + height: 30px; + overflow: hidden; + border-radius: 50%; + margin-bottom: 15px; +} + +.card label { + font-size: 0.75rem; + margin-bottom: 5px; +} + +.card .card-footer { + background-color: transparent; + border: 0; + padding: 15px; +} + +.card .card-footer .stats i { + margin-right: 5px; + position: relative; +} + +.card .card-footer h6 { + margin-bottom: 0; + padding: 7px 0; +} + +.card-body { + padding: 1.25rem; +} + +@media (max-width: 767.98px) { + .card.card-chart .card-header .btn-group-toggle .tim-icons { + font-size: .875rem; + top: -1px; + } +} + +.card-chart { + overflow: hidden; +} + +.card-chart .card-header .card-title i { + font-size: 16px; + margin-right: 5px; + margin-bottom: 3px; +} + +.card-chart .card-header .card-category { + margin-bottom: 5px; +} + +.card-chart .card-body { + padding-left: 5px; + padding-right: 5px; +} + +.card-chart .card-body .tab-space { + padding: 0; +} + +.card-chart .table { + margin-bottom: 0; +} + +.card-chart .table td { + border-top: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.card-chart .card-progress { + margin-top: 30px; + padding: 0 10px; +} + +.card-chart .chart-area { + height: 220px; + width: 100%; +} + +.card-chart .card-footer { + margin-top: 15px; +} + +.card-chart .card-footer .stats { + color: #9A9A9A; +} + +.card-chart .dropdown { + position: absolute; + right: 20px; + top: 20px; +} + +.card-chart .dropdown .btn { + margin: 0; +} + +.card-chart.card-chart-pie .chart-area { + padding: 10px 0 25px; + height: auto; +} + +.card-chart.card-chart-pie .card-title { + margin-bottom: 10px; +} + +.card-chart.card-chart-pie .card-title i { + font-size: 1rem; +} + +.map { + height: 500px; +} + +.card-user { + overflow: hidden; +} + +.card-user .image { + height: 120px; +} + +.card-user .author { + text-align: center; + text-transform: none; + margin-top: 25px; +} + +.card-user .author a + p.description { + margin-top: -7px; +} + +.card-user .author .block { + position: absolute; + height: 100px; + width: 250px; +} + +.card-user .author .block.block-one { + background: rgba(225, 78, 202, 0.6); + background: -webkit-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: -o-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: -moz-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=10); + -webkit-transform: rotate(150deg); + -moz-transform: rotate(150deg); + -ms-transform: rotate(150deg); + -o-transform: rotate(150deg); + transform: rotate(150deg); + margin-top: -90px; + margin-left: -50px; +} + +.card-user .author .block.block-two { + background: rgba(225, 78, 202, 0.6); + background: -webkit-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: -o-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: -moz-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=10); + -webkit-transform: rotate(30deg); + -moz-transform: rotate(30deg); + -ms-transform: rotate(30deg); + -o-transform: rotate(30deg); + transform: rotate(30deg); + margin-top: -40px; + margin-left: -100px; +} + +.card-user .author .block.block-three { + background: rgba(225, 78, 202, 0.6); + background: -webkit-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: -o-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: -moz-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=10); + -webkit-transform: rotate(170deg); + -moz-transform: rotate(170deg); + -ms-transform: rotate(170deg); + -o-transform: rotate(170deg); + transform: rotate(170deg); + margin-top: -70px; + right: -45px; +} + +.card-user .author .block.block-four { + background: rgba(225, 78, 202, 0.6); + background: -webkit-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: -o-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: -moz-linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + background: linear-gradient(to right, rgba(225, 78, 202, 0.6) 0%, rgba(225, 78, 202, 0) 100%); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=10); + -webkit-transform: rotate(150deg); + -moz-transform: rotate(150deg); + -ms-transform: rotate(150deg); + -o-transform: rotate(150deg); + transform: rotate(150deg); + margin-top: -25px; + right: -45px; +} + +.card-user .avatar { + width: 124px; + height: 124px; + border: 5px solid #2b3553; + border-bottom-color: transparent; + background-color: transparent; + position: relative; +} + +.card-user .card-body { + min-height: 240px; +} + +.card-user hr { + margin: 5px 15px; +} + +.card-user .button-container { + margin-bottom: 6px; + text-align: center; +} + +.card-user .card-description { + margin-top: 30px; +} + +.card-tasks { + height: 473px; +} + +.card-tasks .table-full-width { + max-height: 410px; + position: relative; +} + +.card-tasks .card-header .title { + margin-right: 20px; + font-weight: 400; +} + +.card-tasks .card-header .dropdown { + float: right; + color: #cccccc; +} + +.card-tasks .card-body i { + color: #9A9A9A; + font-size: 1.4em; +} + +.card-tasks .card-body i:hover { + color: #ffffff; +} + +.card-plain { + background: transparent; + box-shadow: none; +} + +.card-plain .card-header, +.card-plain .card-footer { + margin-left: 0; + margin-right: 0; + background-color: transparent; +} + +.card-plain:not(.card-subcategories).card-body { + padding-left: 0; + padding-right: 0; +} + +/*# sourceMappingURL=dashboard-free.css.map */ \ No newline at end of file diff --git a/assets/css/dashboard-free.css.map b/assets/css/dashboard-free.css.map new file mode 100644 index 0000000..2189af0 --- /dev/null +++ b/assets/css/dashboard-free.css.map @@ -0,0 +1,266 @@ +{ + "version": 3, + "file": "dashboard-free.css", + "sources": [ + "../scss/dashboard-free.scss", + "../scss/dashboard/core/custom/_functions.scss", + "../scss/dashboard/core/bootstrap/_functions.scss", + "../scss/dashboard/core/custom/_variables.scss", + "../scss/dashboard/core/bootstrap/_variables.scss", + "../scss/dashboard/core/custom/_mixins.scss", + "../scss/dashboard/core/custom/mixins/_alert.scss", + "../scss/dashboard/core/custom/mixins/_badges.scss", + "../scss/dashboard/core/custom/mixins/_background-variant.scss", + "../scss/dashboard/core/custom/mixins/_buttons.scss", + "../scss/dashboard/core/custom/mixins/_forms.scss", + "../scss/dashboard/core/custom/mixins/_icon.scss", + "../scss/dashboard/core/custom/mixins/_modals.scss", + "../scss/dashboard/core/custom/mixins/_popovers.scss", + "../scss/dashboard/core/custom/mixins/_page-header.scss", + "../scss/dashboard/core/custom/mixins/_vendor-prefixes.scss", + "../scss/dashboard/core/custom/mixins/opacity.scss", + "../scss/dashboard/core/custom/mixins/_modals.scss", + "../scss/dashboard/core/custom/mixins/_inputs.scss", + "../scss/dashboard/core/custom/mixins/_dropdown.scss", + "../scss/dashboard/core/custom/mixins/_wizard.scss", + "../scss/dashboard/core/bootstrap/_mixins.scss", + "../scss/dashboard/core/bootstrap/vendor/_rfs.scss", + "../scss/dashboard/core/bootstrap/mixins/_deprecate.scss", + "../scss/dashboard/core/bootstrap/mixins/_breakpoints.scss", + "../scss/dashboard/core/bootstrap/mixins/_hover.scss", + "../scss/dashboard/core/bootstrap/mixins/_image.scss", + "../scss/dashboard/core/bootstrap/mixins/_badge.scss", + "../scss/dashboard/core/bootstrap/mixins/_resize.scss", + "../scss/dashboard/core/bootstrap/mixins/_screen-reader.scss", + "../scss/dashboard/core/bootstrap/mixins/_size.scss", + "../scss/dashboard/core/bootstrap/mixins/_reset-text.scss", + "../scss/dashboard/core/bootstrap/mixins/_text-emphasis.scss", + "../scss/dashboard/core/bootstrap/mixins/_text-hide.scss", + "../scss/dashboard/core/bootstrap/mixins/_text-truncate.scss", + "../scss/dashboard/core/bootstrap/mixins/_visibility.scss", + "../scss/dashboard/core/bootstrap/mixins/_alert.scss", + "../scss/dashboard/core/bootstrap/mixins/_buttons.scss", + "../scss/dashboard/core/bootstrap/mixins/_caret.scss", + "../scss/dashboard/core/bootstrap/mixins/_pagination.scss", + "../scss/dashboard/core/bootstrap/mixins/_lists.scss", + "../scss/dashboard/core/bootstrap/mixins/_list-group.scss", + "../scss/dashboard/core/bootstrap/mixins/_nav-divider.scss", + "../scss/dashboard/core/bootstrap/mixins/_forms.scss", + "../scss/dashboard/core/bootstrap/mixins/_table-row.scss", + "../scss/dashboard/core/bootstrap/mixins/_background-variant.scss", + "../scss/dashboard/core/bootstrap/mixins/_border-radius.scss", + "../scss/dashboard/core/bootstrap/mixins/_box-shadow.scss", + "../scss/dashboard/core/bootstrap/mixins/_gradients.scss", + "../scss/dashboard/core/bootstrap/mixins/_transition.scss", + "../scss/dashboard/core/bootstrap/mixins/_clearfix.scss", + "../scss/dashboard/core/bootstrap/mixins/_grid-framework.scss", + "../scss/dashboard/core/bootstrap/mixins/_grid.scss", + "../scss/dashboard/core/bootstrap/mixins/_float.scss", + "../scss/dashboard/core/bootstrap/_root.scss", + "../scss/dashboard/core/bootstrap/_reboot.scss", + "../scss/dashboard/core/bootstrap/_type.scss", + "../scss/dashboard/core/bootstrap/_images.scss", + "../scss/dashboard/core/bootstrap/_code.scss", + "../scss/dashboard/core/bootstrap/_grid.scss", + "../scss/dashboard/core/bootstrap/_tables.scss", + "../scss/dashboard/core/bootstrap/_forms.scss", + "../scss/dashboard/core/bootstrap/_buttons.scss", + "../scss/dashboard/core/bootstrap/_transitions.scss", + "../scss/dashboard/core/bootstrap/_dropdown.scss", + "../scss/dashboard/core/bootstrap/_button-group.scss", + "../scss/dashboard/core/bootstrap/_input-group.scss", + "../scss/dashboard/core/bootstrap/_custom-forms.scss", + "../scss/dashboard/core/bootstrap/_nav.scss", + "../scss/dashboard/core/bootstrap/_navbar.scss", + "../scss/dashboard/core/bootstrap/_card.scss", + "../scss/dashboard/core/bootstrap/_breadcrumb.scss", + "../scss/dashboard/core/bootstrap/_pagination.scss", + "../scss/dashboard/core/bootstrap/_badge.scss", + "../scss/dashboard/core/bootstrap/_jumbotron.scss", + "../scss/dashboard/core/bootstrap/_alert.scss", + "../scss/dashboard/core/bootstrap/_progress.scss", + "../scss/dashboard/core/bootstrap/_media.scss", + "../scss/dashboard/core/bootstrap/_list-group.scss", + "../scss/dashboard/core/bootstrap/_close.scss", + "../scss/dashboard/core/bootstrap/_modal.scss", + "../scss/dashboard/core/bootstrap/_tooltip.scss", + "../scss/dashboard/core/bootstrap/_popover.scss", + "../scss/dashboard/core/bootstrap/_carousel.scss", + "../scss/dashboard/core/bootstrap/_utilities.scss", + "../scss/dashboard/core/bootstrap/utilities/_align.scss", + "../scss/dashboard/core/bootstrap/utilities/_background.scss", + "../scss/dashboard/core/bootstrap/utilities/_borders.scss", + "../scss/dashboard/core/bootstrap/utilities/_clearfix.scss", + "../scss/dashboard/core/bootstrap/utilities/_display.scss", + "../scss/dashboard/core/bootstrap/utilities/_embed.scss", + "../scss/dashboard/core/bootstrap/utilities/_flex.scss", + "../scss/dashboard/core/bootstrap/utilities/_float.scss", + "../scss/dashboard/core/bootstrap/utilities/_overflow.scss", + "../scss/dashboard/core/bootstrap/utilities/_position.scss", + "../scss/dashboard/core/bootstrap/utilities/_screenreaders.scss", + "../scss/dashboard/core/bootstrap/utilities/_shadows.scss", + "../scss/dashboard/core/bootstrap/utilities/_sizing.scss", + "../scss/dashboard/core/bootstrap/utilities/_stretched-link.scss", + "../scss/dashboard/core/bootstrap/utilities/_spacing.scss", + "../scss/dashboard/core/bootstrap/utilities/_text.scss", + "../scss/dashboard/core/bootstrap/utilities/_visibility.scss", + "../scss/dashboard/core/bootstrap/_print.scss", + "../scss/dashboard/core/custom/_alerts.scss", + "../scss/dashboard/core/custom/_buttons.scss", + "../scss/dashboard/core/custom/_dropdown.scss", + "../scss/dashboard/core/custom/_footer.scss", + "../scss/dashboard/core/custom/_forms.scss", + "../scss/dashboard/core/custom/_images.scss", + "../scss/dashboard/core/custom/_modal.scss", + "../scss/dashboard/core/custom/_navbar.scss", + "../scss/dashboard/core/custom/_type.scss", + "../scss/dashboard/core/custom/_tables.scss", + "../scss/dashboard/core/custom/_checkboxes-radio.scss", + "../scss/dashboard/core/custom/_fixed-plugin.scss", + "../scss/dashboard/core/custom/_sidebar-and-main-panel.scss", + "../scss/dashboard/core/custom/_misc.scss", + "../scss/dashboard/core/custom/_rtl.scss", + "../scss/dashboard/core/custom/_input-group.scss", + "../scss/dashboard/core/custom/vendor/_plugin-perfect-scrollbar.scss", + "../scss/dashboard/core/custom/vendor/_plugin-animate-bootstrap-notify.scss", + "../scss/dashboard/core/custom/_white-content.scss", + "../scss/dashboard/core/custom/_card.scss", + "../scss/dashboard/core/custom/cards/_card-chart.scss", + "../scss/dashboard/core/custom/cards/_card-map.scss", + "../scss/dashboard/core/custom/cards/_card-user.scss", + "../scss/dashboard/core/custom/cards/_card-task.scss", + "../scss/dashboard/core/custom/cards/_card-plain.scss" + ], + "sourcesContent": [ + "\n/*!\n\n=========================================================\n* Black Dashboard - v1.0.1\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/black-dashboard\n* Copyright 2019 Creative Tim (https://www.creative-tim.com)\n* Licensed under MIT (https://github.com/creativetimofficial/black-dashboard/blob/master/LICENSE.md)\n\n* Coded by Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n // Core\n\n@import \"dashboard/core/custom/functions\";\n@import \"dashboard/core/bootstrap/functions\";\n\n@import \"dashboard/core/custom/variables\";\n@import \"dashboard/core/bootstrap/variables\";\n\n@import \"dashboard/core/custom/mixins\";\n@import \"dashboard/core/bootstrap/mixins\";\n\n // Bootstrap components\n\n@import \"dashboard/core/bootstrap/root\";\n@import \"dashboard/core/bootstrap/reboot\";\n@import \"dashboard/core/bootstrap/type\";\n@import \"dashboard/core/bootstrap/images\";\n@import \"dashboard/core/bootstrap/code\";\n@import \"dashboard/core/bootstrap/grid\";\n@import \"dashboard/core/bootstrap/tables\";\n@import \"dashboard/core/bootstrap/forms\";\n@import \"dashboard/core/bootstrap/buttons\";\n@import \"dashboard/core/bootstrap/transitions\";\n@import \"dashboard/core/bootstrap/dropdown\";\n@import \"dashboard/core/bootstrap/button-group\";\n@import \"dashboard/core/bootstrap/input-group\";\n@import \"dashboard/core/bootstrap/custom-forms\";\n@import \"dashboard/core/bootstrap/nav\";\n@import \"dashboard/core/bootstrap/navbar\";\n@import \"dashboard/core/bootstrap/card\";\n@import \"dashboard/core/bootstrap/breadcrumb\";\n@import \"dashboard/core/bootstrap/pagination\";\n@import \"dashboard/core/bootstrap/badge\";\n@import \"dashboard/core/bootstrap/jumbotron\";\n@import \"dashboard/core/bootstrap/alert\";\n@import \"dashboard/core/bootstrap/progress\";\n@import \"dashboard/core/bootstrap/media\";\n@import \"dashboard/core/bootstrap/list-group\";\n@import \"dashboard/core/bootstrap/close\";\n@import \"dashboard/core/bootstrap/modal\";\n@import \"dashboard/core/bootstrap/tooltip\";\n@import \"dashboard/core/bootstrap/popover\";\n@import \"dashboard/core/bootstrap/carousel\";\n@import \"dashboard/core/bootstrap/utilities\";\n@import \"dashboard/core/bootstrap/print\";\n\n // Custom components\n\n @import \"dashboard/core/custom/alerts.scss\";\n @import \"dashboard/core/custom/buttons.scss\";\n @import \"dashboard/core/custom/dropdown.scss\";\n @import \"dashboard/core/custom/footer.scss\";\n @import \"dashboard/core/custom/forms.scss\";\n @import \"dashboard/core/custom/images.scss\";\n @import \"dashboard/core/custom/modal.scss\";\n @import \"dashboard/core/custom/navbar.scss\";\n @import \"dashboard/core/custom/type.scss\";\n @import \"dashboard/core/custom/tables\";\n @import \"dashboard/core/custom/checkboxes-radio\";\n @import \"dashboard/core/custom/fixed-plugin\";\n @import \"dashboard/core/custom/sidebar-and-main-panel.scss\";\n @import \"dashboard/core/custom/misc.scss\";\n @import \"dashboard/core/custom/rtl.scss\";\n @import \"dashboard/core/custom/input-group.scss\";\n\n\n // Vendor / Plugins\n\n@import \"dashboard/core/custom/vendor/plugin-perfect-scrollbar.scss\";\n@import \"dashboard/core/custom/vendor/plugin-animate-bootstrap-notify.scss\";\n\n// light mode\n\n@import \"dashboard/core/custom/white-content.scss\";\n\n// Cards\n\n@import 'dashboard/core/custom/card';\n@import \"dashboard/core/custom/cards/card-chart\";\n@import \"dashboard/core/custom/cards/card-map\";\n@import \"dashboard/core/custom/cards/card-user\";\n@import \"dashboard/core/custom/cards/card-task\";\n@import \"dashboard/core/custom/cards/card-plain\";\n", + "// Retrieve color Sass maps\n\n@function section-color($key: \"primary\") {\n\t@return map-get($section-colors, $key);\n}\n\n// Lines colors\n\n@function shapes-primary-color($key: \"step-1-gradient-bg\") {\n\t@return map-get($shapes-primary-colors, $key);\n}\n\n@function shapes-default-color($key: \"step-1-gradient-bg\") {\n\t@return map-get($shapes-default-colors, $key);\n}\n\n@function lines-light-color($key: \"step-1-gradient-bg\") {\n\t@return map-get($shapes-light-colors, $key);\n}\n\n@function shapes-dark-color($key: \"step-1-gradient-bg\") {\n\t@return map-get($shapes-dark-colors, $key);\n}", + "// Bootstrap functions\n//\n// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.\n\n// Ascending\n// Used to evaluate Sass maps like our grid breakpoints.\n@mixin _assert-ascending($map, $map-name) {\n $prev-key: null;\n $prev-num: null;\n @each $key, $num in $map {\n @if $prev-num == null or unit($num) == \"%\" {\n // Do nothing\n } @else if not comparable($prev-num, $num) {\n @warn \"Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !\";\n } @else if $prev-num >= $num {\n @warn \"Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !\";\n }\n $prev-key: $key;\n $prev-num: $num;\n }\n}\n\n// Starts at zero\n// Used to ensure the min-width of the lowest breakpoint starts at 0.\n@mixin _assert-starts-at-zero($map, $map-name: \"$grid-breakpoints\") {\n $values: map-values($map);\n $first-value: nth($values, 1);\n @if $first-value != 0 {\n @warn \"First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.\";\n }\n}\n\n// Replace `$search` with `$replace` in `$string`\n// Used on our SVG icon backgrounds for custom forms.\n//\n// @author Hugo Giraudel\n// @param {String} $string - Initial string\n// @param {String} $search - Substring to replace\n// @param {String} $replace ('') - New value\n// @return {String} - Updated string\n@function str-replace($string, $search, $replace: \"\") {\n $index: str-index($string, $search);\n\n @if $index {\n @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\n }\n\n @return $string;\n}\n\n// Color contrast\n@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {\n $r: red($color);\n $g: green($color);\n $b: blue($color);\n\n $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;\n\n @if ($yiq >= $yiq-contrasted-threshold) {\n @return $dark;\n } @else {\n @return $light;\n }\n}\n\n// Retrieve color Sass maps\n@function color($key: \"blue\") {\n @return map-get($colors, $key);\n}\n\n@function theme-color($key: \"primary\") {\n @return map-get($theme-colors, $key);\n}\n\n@function gray($key: \"100\") {\n @return map-get($grays, $key);\n}\n\n// Request a theme color level\n@function theme-color-level($color-name: \"primary\", $level: 0) {\n $color: theme-color($color-name);\n $color-base: if($level > 0, $black, $white);\n $level: abs($level);\n\n @return mix($color-base, $color, $level * $theme-color-interval);\n}\n", + "\n// Global settings\n\n$enable-caret: true !default;\n$enable-rounded: true !default;\n$enable-shadows: true !default;\n$enable-gradients: false !default;\n$enable-transitions: true !default;\n$enable-grid-classes: true !default;\n$enable-print-styles: true !default;\n\n\n// Color system\n\n$white: #ffffff !default;\n$gray-100: #f6f9fc !default;\n$gray-200: #e9ecef !default;\n$gray-300: #e3e3e3 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default; // Line footer color\n$gray-700: #525f7f !default; // Line p color\n$gray-800: #32325d !default; // Line heading color\n$gray-900: #212529 !default;\n$link-disabled: #666666 !default;\n$transparent-bg: transparent !default;\n$light-bg: #f5f6fa !default;\n$dark-background: #555555 !default;\n\n\n$grays: () !default;\n$grays: map-merge((\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n), $grays);\n\n$blue: #5e72e4 !default;\n$indigo: #5603ad !default;\n$purple: #8965e0 !default;\n$pink: #f3a4b5 !default;\n$red: #f5365c !default;\n$orange: #fb6340 !default;\n$yellow: #ffd600 !default;\n$green: #2dce89 !default;\n$teal: #11cdef !default;\n$cyan: #2bffc6 !default;\n\n$line-height-lg: 1.625rem !default;\n$line-height-sm: 1.5 !default;\n$line-height: 1.35em !default;\n\n\n$opacity-gray-3: rgba(222,222,222, .3) !default;\n$opacity-gray-5: rgba(222,222,222, .5) !default;\n$opacity-gray-8: rgba(222,222,222, .8) !default;\n\n\n$opacity-5: rgba(255,255,255, .5) !default;\n$opacity-6: rgba(255,255,255, .6) !default;\n$opacity-8: rgba(255,255,255, .8) !default;\n\n\n\n$opacity-1: rgba(255,255,255, .1) !default;\n$opacity-2: rgba(255,255,255, .2) !default;\n\n\n// end beniamin\n\n$colors: () !default;\n$colors: map-merge((\n \"blue\": $blue,\n \"indigo\": $indigo,\n \"purple\": $purple,\n \"pink\": $pink,\n \"red\": $red,\n \"orange\": $orange,\n \"yellow\": $yellow,\n \"green\": $green,\n \"teal\": $teal,\n \"cyan\": $cyan,\n \"white\": $white,\n \"gray\": $gray-600,\n \"light\": $gray-400,\n \"lighter\": $gray-200,\n \"gray-dark\": $gray-800\n), $colors);\n\n$default-color-opacity: rgba(182, 182, 182, .6) !default;\n$orange-color: #f96332 !default;\n\n$default: #344675 !default;\n$primary: #e14eca !default;\n$secondary: #f4f5f7 !default;\n$success: #00f2c3 !default;\n$info: #1d8cf8 !default;\n$warning: #ff8d72 !default;\n$danger: #fd5d93 !default;\n$black: #222a42 !default;\n\n\n// gradient\n$default-states: #263148 !default;\n$primary-states: #ba54f5 !default;\n$success-states: #0098f0 !default;\n$info-states: #3358f4 !default;\n$warning-states: #ff6491 !default;\n$danger-states: #ec250d !default;\n$black-states: #1d253b !default;\n\n$background-black: #1e1e2f !default;\n$background-states-black: #1e1e24 !default;\n\n// opacity\n$default-opacity: rgba(182, 182, 182, .6) !default;\n$primary-opacity: rgba(249, 99, 50, .3) !default;\n$success-opacity: rgba(24, 206, 15, .3) !default;\n$info-opacity: rgba(44, 168, 255, .3) !default;\n$warning-opacity: rgba(255, 178, 54, .3) !default;\n$danger-opacity: rgba(255, 54, 54, .3) !default;\n\n$light-gray: #E3E3E3 !default;\n$medium-gray: #DDDDDD !default;\n$dark-gray: #9A9A9A !default;\n$card-stats-gray: #808080 !default;\n$active-gray: #777777 !default;\n$nav-gray: #444444 !default;\n$search-gray: #b7b7b7 !default;\n$calendar-gray: #9499a7 !default;\n$active-blue: #00bbff !default;\n\n\n\n$light: $gray-500 !default;\n$dark: $gray-900 !default;\n$darker: darken($gray-900, 15%) !default;\n\n$facebook: #3b5998 !default;\n$facebook-states: darken($facebook, 5%) !default;\n$twitter: #55acee !default;\n$twitter-states: darken($twitter, 5%) !default;\n$google-plus: #dd4b39 !default;\n$google-plus-states: darken($google-plus, 5%) !default;\n$instagram: #125688 !default;\n$instagram-states: lighten($instagram, 6%) !default;\n$linkedin: #0077B5 !default;\n$linkedin-states: darken($linkedin, 5%) !default;\n$pinterest: #cc2127 !default;\n$pinterest-states: lighten($pinterest, 6%) !default;\n$youtube: #e52d27 !default;\n$youtube-states: lighten($youtube, 6%) !default;\n$dribbble: #ea4c89 !default;\n$dribbble-states: lighten($dribbble, 6%) !default;\n$github: #333333 !default;\n$github-states: #ccc !default;\n$reddit: #ff4500 !default;\n$reddit-states: lighten($reddit, 6%) !default;\n$tumblr: #35465c !default;\n$tumblr-states: lighten($tumblr, 6%) !default;\n$behance: #1769ff !default;\n$behance-states: lighten($behance, 6%) !default;\n\n$theme-colors: () !default;\n$theme-colors: map-merge((\n \"default\": $default,\n \"primary\": $primary,\n \"secondary\": $secondary,\n \"success\": $success,\n \"info\": $info,\n \"warning\": $warning,\n \"danger\": $danger,\n \"white\": $white,\n \"neutral\": $white,\n \"dark\": $dark,\n \"darker\": $darker\n), $theme-colors);\n\n$brand-colors: () !default;\n$brand-colors: map-merge((\n \"facebook\": $facebook,\n \"twitter\": $twitter,\n \"google-plus\": $google-plus,\n \"instagram\": $instagram,\n \"pinterest\": $pinterest,\n \"youtube\": $youtube,\n \"dribbble\": $dribbble,\n \"github\": $github,\n \"reddit\": $reddit,\n \"behance\": $behance,\n \"tumblr\": $tumblr,\n \"linkedin\": $linkedin,\n), $brand-colors);\n\n\n/* brand Colors */\n$brand-primary: $primary !default;\n$brand-info: $info !default;\n$brand-success: $success !default;\n$brand-warning: $warning !default;\n$brand-danger: $danger !default;\n$brand-inverse: $black !default;\n\n$topbar-x: topbar-x !default;\n$topbar-back: topbar-back !default;\n$bottombar-x: bottombar-x !default;\n$bottombar-back: bottombar-back !default;\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval: 8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold: 200 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark: $gray-900 !default;\n$yiq-text-light: $white !default;\n\n// Action colors\n\n$star-rating-color: $gray-400 !default;\n$star-rating-color-active: $yellow !default;\n\n$favorite-color: $yellow !default;\n$like-color: $blue !default;\n$love-color: $red !default;\n\n\n// Body\n\n$body-bg: $background-black !default;\n$body-color: $gray-700 !default;\n\n\n// Sections\n\n$section-colors: () !default;\n$section-colors: map-merge((\n \"primary\": $body-bg,\n \"secondary\": $secondary,\n \"light\": $gray-400,\n \"dark\": $dark,\n \"darker\": $darker\n), $section-colors);\n\n// Links\n\n$link-color: $primary !default;\n$link-decoration: none !default;\n$link-hover-color: darken($link-color, 15%);\n$link-hover-decoration: none !default;\n\n// Grid breakpoints\n\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px\n);\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints);\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n\n// Spacing\n\n$spacer: 1rem !default;\n$spacers: () !default;\n$spacers: map-merge((\n 0: 0,\n 1: ($spacer * .25),\n 2: ($spacer * .5),\n 3: $spacer,\n 4: ($spacer * 1.5),\n 5: ($spacer * 3),\n 'sm': ($spacer * 2),\n 'md': ($spacer * 4),\n 'lg': ($spacer * 6),\n 'xl': ($spacer * 8)\n), $spacers);\n\n$padding-base-vertical: .5rem !default;\n$padding-base-horizontal: .7rem !default;\n\n$padding-btn-vertical: 11px !default;\n$padding-btn-horizontal: 40px !default;\n\n$padding-round-horizontal: 23px !default;\n\n$padding-lg-vertical: 15px !default;\n\n$padding-input-vertical: 11px !default;\n$padding-input-horizontal: 19px !default;\n\n\n$margin-lg-vertical: 30px !default;\n$margin-base-vertical: 15px !default;\n\n// This variable affects the `.h-*` and `.w-*` classes.\n\n$sizes: () !default;\n$sizes: map-merge((\n 25: 25%,\n 50: 50%,\n 75: 75%,\n 100: 100%\n), $sizes);\n\n// Components\n\n$shape-height-xl: 1.5 !default;\n$shape-height-lg: 1.5 !default;\n$shape-height-sm: 1.5 !default;\n\n// border\n$none: 0 !default;\n$border-thin: 1px !default;\n$border-thick: 2px !default;\n$border-width: .0625rem !default;\n$border-color: $gray-200 !default;\n\n$border-radius: .25rem !default;\n$border-radius-xl: 0.875rem !default;\n$border-radius-lg: 0.4285rem !default;\n$border-radius-sm: 0.2857rem !default;\n$border-radius-xs: 0.1428rem !default;\n\n$margin-bottom: 10px !default;\n$border: 1px solid !default;\n\n$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);\n$box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);\n$box-shadow-lg: 0 1rem 3rem rgba($black, .175);\n\n$dropdown-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.125);\n$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);\n$box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1);\n$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35);\n\n$component-active-color: $white !default;\n$component-active-bg: theme-color(\"primary\") !default;\n$component-active-border-color: theme-color(\"primary\") !default;\n\n$component-hover-color: $gray-300 !default;\n$component-hover-bg: $gray-300 !default;\n$component-hover-border-color: $gray-300 !default;\n\n$caret-width: .3em !default;\n\n$transition-base: all .15s ease !default;\n$transition-fade: opacity .15s linear !default;\n$transition-collapse: height .35s ease !default;\n\n$fast-transition-time: 150ms !default;\n\n$transition-linear: linear !default;\n$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;\n$transition-ease: ease 0s;\n\n$select-coordinates: 50% -40px !default;\n$general-transition-time: 300ms !default;\n\n\n// Fonts\n\n$font-family-base: 'Poppins', sans-serif !default;\n$font-family-alt: 'Poppins', sans-serif !default;\n\n$font-size-dash: .875rem !default;\n\n$font-size-base: $font-size-dash !default; // Assumes the browser default, typically `16px`\n$font-size-xl: ($font-size-base * 1.428);\n$font-size-lg: ($font-size-base * 1.142);\n$font-size-sm: ($font-size-base * .85714286);\n$font-size-xs: ($font-size-base * .714);\n\n$h1-font-size: $font-size-base * 2.35714285 !default; //2.1875rem\n$h2-font-size: $font-size-base * 1.9285714 !default;\n$h3-font-size: $font-size-base * 1.642857 !default;\n$h4-font-size: $font-size-base * 1.2142857 !default;\n$h5-font-size: $font-size-base * 0.9285714 !default;\n$h6-font-size: $font-size-base * 0.8571428 !default;\n\n$font-weight-light: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-bold: 600 !default;\n$font-weight-extra-bold: 700 !default;\n\n$font-paragraph: 1rem !default;\n\n$font-weight-base: $font-weight-normal !default;\n$shape-height-base: 1.428571 !default;\n\n$headings-margin-bottom: ($spacer / 2);\n$headings-font-family: inherit !default;\n$headings-font-weight: $font-weight-normal !default;\n$headings-line-height: 1.2 !default;\n$headings-color: $gray-800 !default;\n\n$heading-letter-spacing: .025em !default;\n$heading-font-size: .95rem !default;\n$heading-text-transform: uppercase !default;\n$heading-font-weight: $headings-font-weight !default;\n\n$heading-title-letter-spacing: .025em !default;\n$heading-title-font-size: 1.375rem !default;\n$heading-title-font-weight: $font-weight-bold !default;\n$heading-title-text-transform: uppercase !default;\n\n$heading-section-letter-spacing: .025em !default;\n$heading-section-font-size: 1.375rem !default;\n$heading-section-font-weight: $font-weight-bold !default;\n$heading-section-text-transform: uppercase !default;\n\n$display1-size: 3.3rem !default;\n$display2-size: 2.75rem !default;\n$display3-size: 2.1875rem !default;\n$display4-size: 1.6275rem !default;\n\n$display1-weight: $font-weight-bold !default;\n$display2-weight: $font-weight-bold !default;\n$display3-weight: $font-weight-bold !default;\n$display4-weight: $font-weight-bold !default;\n$display-line-height: $headings-line-height !default;\n\n$paragraph-font-size: 0.625rem !default;\n$paragraph-font-weight: 300 !default;\n$paragraph-line-height: 1.7 !default;\n\n$lead-font-size: ($paragraph-font-size * 1.25);\n$lead-font-weight: 300 !default;\n\n$small-font-size: 80% !default;\n\n$text-muted: $gray-600 !default;\n\n$blockquote-small-color: $gray-600 !default;\n$blockquote-font-size: ($font-size-base * 1.1);\n\n$hr-border-color: rgba($black, .1);\n$hr-border-width: $border-width !default;\n\n$mark-padding: .2em !default;\n\n$dt-font-weight: $font-weight-bold !default;\n\n$list-inline-padding: .5rem !default;\n\n$mark-bg: #fcf8e3 !default;\n\n$hr-margin-y: $spacer * 2 !default;\n\n\n// Icons\n\n$icon-size: auto !default;\n$icon-size-regular: 2.375rem !default;\n$icon-font-size-regular: 0.9375rem !default;\n$icon-font-size-sm: 0.6875rem !default;\n$icon-size-sm: 1.875rem !default;\n$icon-font-size-lg: 1.325rem !default;\n$icon-size-lg: 3.6rem !default;\n$icon-size-xl: 5rem !default;\n\n\n// Tables\n\n$table-cell-padding: 1rem !default;\n$table-cell-padding-sm: .3rem !default;\n\n$table-bg: transparent !default;\n$table-accent-bg: rgba($black, .05);\n$table-hover-bg: rgba($black, .075);\n$table-active-bg: $table-hover-bg !default;\n\n$table-border-width: $border-width !default;\n$table-border-color: $gray-300 !default;\n\n$table-head-bg: $gray-200 !default;\n$table-head-color: $gray-700 !default;\n\n$table-dark-bg: $gray-900 !default;\n$table-dark-accent-bg: rgba($white, .05);\n$table-dark-hover-bg: rgba($white, .075);\n$table-dark-border-color: lighten($gray-900, 7.5%);\n$table-dark-color: $body-bg !default;\n\n\n// Buttons + Forms\n\n$input-btn-padding-y: .5rem !default;\n$input-btn-padding-x: .7rem !default;\n$input-btn-line-height: $shape-height-base !default;\n\n$input-btn-focus-width: 0 !default;\n$input-btn-focus-color: rgba($component-active-bg, 1);\n//$input-btn-focus-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);\n$input-btn-focus-box-shadow: none !default;\n\n$input-btn-padding-y-sm: .25rem !default;\n$input-btn-padding-x-sm: .5rem !default;\n$input-btn-line-height-sm: 1.35 !default;\n\n$input-btn-padding-y-lg: .875rem !default;\n$input-btn-padding-x-lg: 1rem !default;\n$input-btn-line-height-lg: 1.35 !default;\n\n$input-btn-border-width: 1px !default;\n\n$input-btn-font-size-sm: .75rem !default;\n$input-btn-font-size: .875rem !default;\n$input-btn-font-size-lg: .875rem !default;\n\n$input-padding-vertical: 11px !default;\n$input-padding-horizontal: 19px !default;\n\n// Buttons\n\n$btn-padding-y: 11px !default;\n$btn-padding-x: 40px !default;\n$btn-line-height: $line-height !default;\n\n$btn-padding-y-sm: 5px !default;\n$btn-padding-x-sm: 15px !default;\n$btn-line-height-sm: $input-btn-line-height-sm !default;\n\n$btn-padding-y-lg: 15px !default;\n$btn-padding-x-lg: 48px !default;\n$btn-line-height-lg: $input-btn-line-height-lg !default;\n\n$btn-border-width: $input-btn-border-width !default;\n\n$btn-font-size-lg: 1em !default;\n$btn-font-weight: 600 !default;\n$btn-text-transform: uppercase !default;\n$btn-letter-spacing: .025em !default;\n$btn-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);\n$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);\n$btn-focus-box-shadow: $btn-hover-box-shadow !default;\n$btn-focus-width: $input-btn-focus-width !default;\n\n\n$btn-active-box-shadow: none !default;\n$btn-round-radius: 30px !default;\n\n\n\n// Forms\n\n$input-padding-y: $input-btn-padding-y !default;\n$input-padding-x: $input-btn-padding-x !default;\n$input-line-height: $input-btn-line-height !default;\n\n$input-padding-y-sm: $input-btn-padding-y-sm !default;\n$input-padding-x-sm: $input-btn-padding-x-sm !default;\n$input-line-height-sm: $input-btn-line-height-sm !default;\n\n$input-padding-y-lg: $input-btn-padding-y-lg !default;\n$input-padding-x-lg: $input-btn-padding-x-lg !default;\n$input-line-height-lg: $input-btn-line-height-lg !default;\n\n$input-border-radius: $border-radius !default;\n$input-border-radius-xl: $border-radius-xl !default;\n$input-border-radius-lg: $border-radius-lg !default;\n$input-border-radius-sm: $border-radius-sm !default;\n\n$input-bg: $transparent-bg !default;\n$input-disabled-bg: $gray-200 !default;\n\n$input-muted-bg: #EDF0F5 !default;\n\n$input-alternative-box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);\n$input-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);\n\n$input-color: $opacity-8 !default;\n$input-border-color: #cad1d7 !default;\n$input-border-width: $input-btn-border-width !default;\n$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default;\n\n$input-focus-bg: $white !default;\n$input-focus-border-color: rgba(50,151,211,.25);\n$input-focus-color: $input-color !default;\n$input-focus-width: 0 !default;\n$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default;\n\n$input-placeholder-color: $gray-500 !default;\n$input-focus-placeholder-color: $gray-500 !default;\n\n$input-height-border: $input-border-width * 2 !default;\n$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;\n$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;\n\n$input-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n\n\n// Input groups\n\n$input-group-addon-color: $input-placeholder-color !default;\n$input-group-addon-bg: $input-bg !default;\n$input-group-addon-border-color: $input-border-color !default;\n\n$input-group-addon-focus-color: $input-focus-color !default;\n$input-group-addon-focus-bg: $input-focus-bg !default;\n$input-group-addon-focus-border-color: $input-focus-border-color !default;\n\n\n// Custom forms\n\n$custom-control-gutter: 1.75rem !default;\n$custom-control-spacer-x: 1rem !default;\n$custom-control-indicator-size: 1.25rem !default;\n\n$custom-control-indicator-bg: $input-bg !default;\n$custom-control-indicator-border-width: 1px !default;\n$custom-control-indicator-border-color: $input-border-color !default;\n$custom-control-indicator-box-shadow: none !default;\n\n$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default;\n\n$custom-control-indicator-hover-color: $component-hover-color !default;\n$custom-control-indicator-hover-bg: $component-hover-bg !default;\n$custom-control-indicator-hover-border-color: $component-hover-border-color !default;\n\n$custom-control-indicator-active-color: $component-active-color !default;\n$custom-control-indicator-active-bg: $component-active-bg !default;\n$custom-control-indicator-active-border-color: $component-active-border-color !default;\n$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default;\n\n$custom-control-indicator-checked-color: $component-active-color !default;\n$custom-control-indicator-checked-bg: $component-active-bg !default;\n$custom-control-indicator-checked-border-color: $component-active-border-color !default;\n$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default;\n$custom-control-indicator-checked-disabled-bg: rgba(theme-color(\"primary\"), .5);\n\n$custom-control-indicator-disabled-bg: $gray-200 !default;\n$custom-control-label-disabled-color: $gray-600 !default;\n\n$custom-checkbox-indicator-border-radius: $border-radius-sm !default;\n//$custom-checkbox-indicator-icon-checked: str-replace(url(\"data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E\"), \"#\", \"%23\") !default;\n\n$custom-toggle-slider-bg: #ddd !default;\n$custom-toggle-checked-bg: theme-color(\"primary\") !default;\n\n// Form validation\n\n$form-feedback-valid-bg: lighten($success, 15%);\n$form-feedback-valid-color: theme-color(\"success\") !default;\n$form-feedback-invalid-bg: lighten($warning, 15%);\n$form-feedback-invalid-color: theme-color(\"warning\") !default;\n\n\n// Allows for customizing button radius independently from global border radius\n\n$btn-border-radius: $input-border-radius !default;\n$btn-border-radius-xl: $input-border-radius-xl !default;\n$btn-border-radius-lg: $input-border-radius-lg !default;\n$btn-border-radius-sm: $input-border-radius !default;\n\n\n// No UI Slider\n\n$noui-target-bg: #eceeef !default;\n$noui-target-thickness: 5px !default;\n$noui-target-border-radius: 5px !default;\n$noui-target-border-color: 0 !default;\n$noui-target-box-shadow: inset 0 1px 2px rgba(90,97,105,.1);\n\n$noui-slider-connect-bg: $primary !default;\n$noui-slider-connect-disabled-bg: #b2b2b2 !default;\n\n$noui-handle-width: 15px !default;\n$noui-handle-bg: theme-color(\"primary\") !default;\n$noui-handle-border: 0 !default;\n$noui-handle-border-radius: 100% !default;\n\n$noui-origin-border-radius: 2px !default;\n\n\n// Dropdown\n\n$dropdown-bg: $white !default;\n$dropdown-border-width: 0 !default;\n$dropdown-border-color: rgba($black, .15);\n$dropdown-border-radius: $border-radius-xs !default;\n$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);\n\n$dropdown-link-active-color: $component-active-color !default;\n$dropdown-link-active-bg: $component-active-bg !default;\n\n// Navs\n\n$nav-link-padding-y: .5rem !default;\n$nav-link-padding-x: 1rem !default;\n$nav-link-color: $gray-700 !default;\n$nav-link-disabled-color: $gray-600 !default;\n\n$nav-pills-padding-y: .75rem !default;\n$nav-pills-padding-x: 1rem !default;\n\n$nav-pills-space-x: 1rem !default;\n\n$nav-pills-bg: $white;\n$nav-pills-border-width: 1px !default;\n$nav-pills-border-color: theme-color(\"primary\") !default;\n$nav-pills-border-radius: $border-radius !default;\n\n$nav-pills-link-color: theme-color(\"primary\") !default;\n$nav-pills-link-hover-color: darken(theme-color(\"primary\"), 5%);\n$nav-pills-link-active-color: color-yiq(theme-color(\"primary\"));\n$nav-pills-link-active-bg: theme-color(\"primary\") !default;\n$nav-pills-box-shadow: $btn-box-shadow !default;\n\n// Navbar\n\n$navbar-transition: all .15s linear !default;\n$navbar-padding-y: .625rem !default;\n$navbar-padding-x: .9375rem !default;\n\n$navbar-nav-link-padding-x: 1rem !default;\n$navbar-nav-link-padding-y: 1rem !default;\n\n$navbar-nav-link-font-family: $font-family-alt !default;\n$navbar-nav-link-font-size: .9rem !default;\n$navbar-nav-link-font-weight: 400 !default;\n$navbar-nav-link-text-transform: normal !default;\n$navbar-nav-link-letter-spacing: 0 !default;\n$navbar-nav-link-border-radius: $border-radius !default;\n\n/* navbar color */\n$navbar-color: #1a1e34 !default;\n$navbar-dark-bg: transparent !default;\n$navbar-dark-hover-bg: rgba(255, 255, 255, .1);\n$navbar-dark-active-bg: rgba(255, 255, 255, .1);\n$navbar-dark-color: rgba($white, .95);\n$navbar-dark-hover-color: rgba($white, .65);\n$navbar-dark-active-color: rgba($white, .65);\n$navbar-dark-disabled-color: rgba($white, .25);\n$navbar-dark-toggler-border-color: transparent !default;\n\n$navbar-light-bg: transparent !default;\n$navbar-light-hover-bg: rgba(0, 0, 0, .1);\n$navbar-light-active-bg: rgba(0, 0, 0, .1);\n$navbar-light-color: rgba($black, .5);\n$navbar-light-hover-color: rgba($black, .7);\n$navbar-light-active-color: rgba($black, .9);\n$navbar-light-disabled-color: rgba($black, .3);\n$navbar-light-toggler-icon-bg: str-replace(url(\"data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"), \"#\", \"%23\") !default;\n$navbar-light-toggler-border-color: transparent !default;\n$full-width: 100% !default;\n$navbar-padding: 10px 15px !default;\n\n\n// Alerts\n\n$alert-padding-y: .9rem !default;\n$alert-padding-x: 1.25rem !default;\n$alert-border-radius: $border-radius-sm !default;\n\n$alert-bg-level: -2 !default;\n$alert-border-level: -2 !default;\n$alert-color-level: 0 !default;\n\n\n// List group\n\n$list-group-bg: $white !default;\n$list-group-border-color: $border-color !default; //rgba($black, .125);\n$list-group-border-width: $border-width !default;\n$list-group-border-radius: $border-radius !default;\n\n$list-group-item-padding-y: 1rem !default;\n$list-group-item-padding-x: 1rem !default;\n\n$list-group-hover-bg: $gray-100 !default;\n$list-group-active-color: $component-active-color !default;\n$list-group-active-bg: $component-active-bg !default;\n$list-group-active-border-color: $list-group-active-bg !default;\n\n$list-group-disabled-color: $gray-600 !default;\n$list-group-disabled-bg: $list-group-bg !default;\n\n$list-group-action-color: $gray-700 !default;\n$list-group-action-hover-color: $list-group-action-color !default;\n\n$list-group-action-active-color: $list-group-action-color !default;\n$list-group-action-active-bg: $gray-200 !default;\n\n\n// Close\n\n$close-font-size: $font-size-base * 1.5 !default;\n$close-font-weight: $font-weight-bold !default;\n$close-bg: transparent !default;\n$close-hover-bg: transparent !default;\n$close-color: rgba(0, 0, 0, .6);\n$close-hover-color: rgba(0, 0, 0, .9);\n$close-text-shadow: none !default;\n\n\n// Popovers\n\n$popover-font-size: $font-size-sm !default;\n$popover-bg: $white !default;\n$popover-max-width: 276px !default;\n$popover-border-width: 1px !default;\n$popover-border-color: rgba($black, .05);\n$popover-border-radius: $border-radius-lg !default;\n$popover-box-shadow: 0px .5rem 2rem 0px rgba($black, .2);\n\n$popover-header-bg: $popover-bg !default;\n$popover-header-color: $headings-color !default;\n$popover-header-padding-y: .75rem !default;\n$popover-header-padding-x: .75rem !default;\n\n$popover-body-color: $body-color !default;\n$popover-body-padding-y: $popover-header-padding-y !default;\n$popover-body-padding-x: $popover-header-padding-x !default;\n\n$popover-arrow-width: 1.5rem !default;\n$popover-arrow-height: .75rem !default;\n$popover-arrow-color: $popover-bg !default;\n\n$popover-arrow-outer-color: transparent !default;\n\n// Breadcrumbs\n\n$breadcrumb-bg: $black-states !default;\n$breadcrumb-divider-color: $white !default;\n$breadcrumb-active-color: $white !default;\n\n\n\n\n// Badges\n\n$badge-font-size: $font-size-xs !default;\n$badge-font-weight: $font-weight-extra-bold !default;\n$badge-padding-y: .25rem !default;\n$badge-padding-x: .5rem !default;\n$badge-border-radius: $border-radius !default;\n$badge-text-transfom: uppercase;\n\n$badge-pill-padding-x: .875em !default;\n$badge-pill-border-radius: $border-radius-xl !default;\n\n$badge-circle-size: 2rem;\n\n// Pagination\n\n$pagination-padding-y: 0 !default;\n$pagination-padding-x: .6875rem !default;\n\n\n$pagination-color: $white !default;\n$pagination-bg: transparent !default;\n$pagination-border-width: $border-width !default;\n$pagination-border-color: $gray-300 !default;\n\n//$pagination-focus-box-shadow: $btn-hover-box-shadow !default;\n\n$pagination-hover-color: $gray-600 !default;\n$pagination-hover-bg: $gray-300 !default;\n$pagination-hover-border-color: $gray-300 !default;\n\n$pagination-active-color: $component-active-color !default;\n$pagination-active-bg: $component-active-bg !default;\n$pagination-active-border-color: $pagination-active-bg !default;\n$pagination-active-box-shadow: $btn-hover-box-shadow !default;\n\n$pagination-disabled-color: $gray-600 !default;\n$pagination-disabled-bg: transparent !default;\n$pagination-disabled-border-color: $gray-300 !default;\n\n\n// Cards\n\n$card-spacer-y: 1.25rem !default;\n$card-spacer-x: 1.5rem !default;\n$card-border-width: $border-width !default;\n$card-border-radius: $border-radius-sm !default;\n$card-border-color: rgba($black, .05);\n$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});\n$card-cap-bg: $gray-100 !default;\n$card-bg: $white !default;\n$card-black-background: #27293d !default;\n$card-img-overlay-padding: 1.25rem !default;\n\n//$card-group-margin: ($grid-gutter-width / 2);\n//$card-deck-margin: $card-group-margin !default;\n\n$card-columns-count: 3 !default;\n$card-columns-gap: 1.25rem !default;\n$card-columns-margin: $card-spacer-y !default;\n\n// Tooltips\n\n$tooltip-font-size: $font-size-sm !default;\n$tooltip-max-width: 200px !default;\n$tooltip-color: $black !default;\n$tooltip-bg: $white !default;\n$tooltip-border-radius: $border-radius !default;\n$tooltip-opacity: .9 !default;\n$tooltip-padding-y: .25rem !default;\n$tooltip-padding-x: .5rem !default;\n$tooltip-margin: 0 !default;\n\n$tooltip-arrow-width: .8rem !default;\n$tooltip-arrow-height: .4rem !default;\n$tooltip-arrow-color: $tooltip-bg !default;\n\n// Modals\n\n$modal-inner-padding: 24px 24px 16px 24px !default;\n\n$modal-lg: 800px !default;\n$modal-md: 500px !default;\n$modal-sm: 380px !default;\n$modal-title-line-height: 1.1;\n$modal-content-bg: $white !default;\n$modal-content-border-color: rgba($black, .2);\n$modal-content-border-width: 1px !default;\n$modal-content-border-radius: $border-radius-sm !default;\n$modal-content-box-shadow-xs: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);\n$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);\n\n$modal-backdrop-bg: $black !default;\n$modal-backdrop-opacity: .16 !default;\n$modal-header-border-color: $gray-200 !default;\n$modal-footer-border-color: $modal-header-border-color !default;\n$modal-header-border-width: $modal-content-border-width !default;\n$modal-footer-border-width: $modal-header-border-width !default;\n$modal-header-padding: 24px 24px 0 24px !default;\n\n// Progress bars\n\n$progress-height: .5rem !default;\n$progress-bg: rgba(0, 0, 0, 0.3) !default;\n$progress-border-radius: $border-radius-xl !default;\n$progress-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3) !default;\n$progress-bar-color: $white !default;\n\n// Datepicker\n\n$datepicker-border-radius: $card-border-radius !default;\n$datepicker-dropdown-padding: 20px 22px !default;\n\n$datepicker-cell-transition: $transition-base !default;\n$datepicker-cell-hover-background: lighten($gray-400, 55%);\n$datepicker-cell-border-radius: 50% !default;\n$datepicker-cell-width: 36px !default;\n$datepicker-cell-height: 36px !default;\n\n$datepicker-disabled-cell-color: $gray-300 !default;\n$datepicker-disabled-old-new-color: $gray-500 !default;\n\n$datepicker-header-cell-border-radius: $border-radius !default;\n\n$datepicker-active-color: $white !default;\n$datepicker-active-background: theme-color(\"primary\") !default;\n$datepicker-active-box-shadow: none !default;\n\n$datepicker-range-background: theme-color(\"primary\") !default;\n$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%);\n$datepicker-range-color: $white !default;\n$datepicker-range-highlighted-bg: $gray-200 !default;\n\n$datepicker-dropdown-border: lighten($gray-400, 40%);\n$datepicker-dropdown-bg: $white !default;\n$datepicker-highlighted-bg: $datepicker-active-background !default;\n\n\n// Footer\n\n$footer-link-font-size: .85rem !default;\n$footer-bg: theme-color(\"secondary\") !default;\n$footer-color: $gray-600 !default;\n$footer-link-color: $gray-600 !default;\n$footer-link-hover-color: $gray-700 !default;\n$footer-heading-color: $gray-600 !default;\n$footer-heading-font-size: $font-size-sm !default;\n", + "// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n$white: #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black: #000 !default;\n\n$grays: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$grays: map-merge(\n (\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n ),\n $grays\n);\n\n$blue: #007bff !default;\n$indigo: #6610f2 !default;\n$purple: #6f42c1 !default;\n$pink: #e83e8c !default;\n$red: #dc3545 !default;\n$orange: #fd7e14 !default;\n$yellow: #ffc107 !default;\n$green: #28a745 !default;\n$teal: #20c997 !default;\n$cyan: #17a2b8 !default;\n\n$colors: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$colors: map-merge(\n (\n \"blue\": $blue,\n \"indigo\": $indigo,\n \"purple\": $purple,\n \"pink\": $pink,\n \"red\": $red,\n \"orange\": $orange,\n \"yellow\": $yellow,\n \"green\": $green,\n \"teal\": $teal,\n \"cyan\": $cyan,\n \"white\": $white,\n \"gray\": $gray-600,\n \"gray-dark\": $gray-800\n ),\n $colors\n);\n\n$primary: $blue !default;\n$secondary: $gray-600 !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray-100 !default;\n$dark: $gray-800 !default;\n\n$theme-colors: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$theme-colors: map-merge(\n (\n \"primary\": $primary,\n \"secondary\": $secondary,\n \"success\": $success,\n \"info\": $info,\n \"warning\": $warning,\n \"danger\": $danger,\n \"light\": $light,\n \"dark\": $dark\n ),\n $theme-colors\n);\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval: 8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold: 150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark: $gray-900 !default;\n$yiq-text-light: $white !default;\n\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret: true !default;\n$enable-rounded: true !default;\n$enable-shadows: false !default;\n$enable-gradients: false !default;\n$enable-transitions: true !default;\n$enable-prefers-reduced-motion-media-query: true !default;\n$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS\n$enable-grid-classes: true !default;\n$enable-pointer-cursor-for-buttons: true !default;\n$enable-print-styles: true !default;\n$enable-responsive-font-sizes: false !default;\n$enable-validation-icons: true !default;\n$enable-deprecation-messages: true !default;\n\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n$spacer: 1rem !default;\n$spacers: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$spacers: map-merge(\n (\n 0: 0,\n 1: ($spacer * .25),\n 2: ($spacer * .5),\n 3: $spacer,\n 4: ($spacer * 1.5),\n 5: ($spacer * 3)\n ),\n $spacers\n);\n\n// This variable affects the `.h-*` and `.w-*` classes.\n$sizes: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$sizes: map-merge(\n (\n 25: 25%,\n 50: 50%,\n 75: 75%,\n 100: 100%,\n auto: auto\n ),\n $sizes\n);\n\n\n// Body\n//\n// Settings for the `` element.\n\n$body-bg: $white !default;\n$body-color: $gray-900 !default;\n\n\n// Links\n//\n// Style anchor elements.\n\n$link-color: theme-color(\"primary\") !default;\n$link-decoration: none !default;\n$link-hover-color: darken($link-color, 15%) !default;\n$link-hover-decoration: underline !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: 15% !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom: 1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px\n) !default;\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1140px\n) !default;\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns: 12 !default;\n$grid-gutter-width: 30px !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n$line-height-lg: 1.5 !default;\n$line-height-sm: 1.5 !default;\n\n$border-width: 1px !default;\n$border-color: $gray-300 !default;\n\n$border-radius: .25rem !default;\n$border-radius-lg: .3rem !default;\n$border-radius-sm: .2rem !default;\n\n$rounded-pill: 50rem !default;\n\n$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;\n\n$component-active-color: $white !default;\n$component-active-bg: theme-color(\"primary\") !default;\n\n$caret-width: .3em !default;\n$caret-vertical-align: $caret-width * .85 !default;\n$caret-spacing: $caret-width * .85 !default;\n\n$transition-base: all .2s ease-in-out !default;\n$transition-fade: opacity .15s linear !default;\n$transition-collapse: height .35s ease !default;\n\n$embed-responsive-aspect-ratios: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$embed-responsive-aspect-ratios: join(\n (\n (21 9),\n (16 9),\n (4 3),\n (1 1),\n ),\n $embed-responsive-aspect-ratios\n);\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$font-family-base: $font-family-sans-serif !default;\n// stylelint-enable value-keyword-case\n\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\n$font-size-lg: $font-size-base * 1.25 !default;\n$font-size-sm: $font-size-base * .875 !default;\n\n$font-weight-lighter: lighter !default;\n$font-weight-light: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-bold: 700 !default;\n$font-weight-bolder: bolder !default;\n\n$font-weight-base: $font-weight-normal !default;\n$line-height-base: 1.5 !default;\n\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $font-size-base * 2 !default;\n$h3-font-size: $font-size-base * 1.75 !default;\n$h4-font-size: $font-size-base * 1.5 !default;\n$h5-font-size: $font-size-base * 1.25 !default;\n$h6-font-size: $font-size-base !default;\n\n$headings-margin-bottom: $spacer / 2 !default;\n$headings-font-family: null !default;\n$headings-font-weight: 500 !default;\n$headings-line-height: 1.2 !default;\n$headings-color: null !default;\n\n$display1-size: 6rem !default;\n$display2-size: 5.5rem !default;\n$display3-size: 4.5rem !default;\n$display4-size: 3.5rem !default;\n\n$display1-weight: 300 !default;\n$display2-weight: 300 !default;\n$display3-weight: 300 !default;\n$display4-weight: 300 !default;\n$display-line-height: $headings-line-height !default;\n\n$lead-font-size: $font-size-base * 1.25 !default;\n$lead-font-weight: 300 !default;\n\n$small-font-size: 80% !default;\n\n$text-muted: $gray-600 !default;\n\n$blockquote-small-color: $gray-600 !default;\n$blockquote-small-font-size: $small-font-size !default;\n$blockquote-font-size: $font-size-base * 1.25 !default;\n\n$hr-border-color: rgba($black, .1) !default;\n$hr-border-width: $border-width !default;\n\n$mark-padding: .2em !default;\n\n$dt-font-weight: $font-weight-bold !default;\n\n$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;\n$nested-kbd-font-weight: $font-weight-bold !default;\n\n$list-inline-padding: .5rem !default;\n\n$mark-bg: #fcf8e3 !default;\n\n$hr-margin-y: $spacer !default;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-cell-padding: .75rem !default;\n$table-cell-padding-sm: .3rem !default;\n\n$table-color: $body-color !default;\n$table-bg: null !default;\n$table-accent-bg: rgba($black, .05) !default;\n$table-hover-color: $table-color !default;\n$table-hover-bg: rgba($black, .075) !default;\n$table-active-bg: $table-hover-bg !default;\n\n$table-border-width: $border-width !default;\n$table-border-color: $border-color !default;\n\n$table-head-bg: $gray-200 !default;\n$table-head-color: $gray-700 !default;\n\n$table-dark-color: $white !default;\n$table-dark-bg: $gray-800 !default;\n$table-dark-accent-bg: rgba($white, .05) !default;\n$table-dark-hover-color: $table-dark-color !default;\n$table-dark-hover-bg: rgba($white, .075) !default;\n$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;\n$table-dark-color: $white !default;\n\n$table-striped-order: odd !default;\n\n$table-caption-color: $text-muted !default;\n\n$table-bg-level: -9 !default;\n$table-border-level: -6 !default;\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y: .375rem !default;\n$input-btn-padding-x: .75rem !default;\n$input-btn-font-family: null !default;\n$input-btn-font-size: $font-size-base !default;\n$input-btn-line-height: $line-height-base !default;\n\n$input-btn-focus-width: .2rem !default;\n$input-btn-focus-color: rgba($component-active-bg, .25) !default;\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm: .25rem !default;\n$input-btn-padding-x-sm: .5rem !default;\n$input-btn-font-size-sm: $font-size-sm !default;\n$input-btn-line-height-sm: $line-height-sm !default;\n\n$input-btn-padding-y-lg: .5rem !default;\n$input-btn-padding-x-lg: 1rem !default;\n$input-btn-font-size-lg: $font-size-lg !default;\n$input-btn-line-height-lg: $line-height-lg !default;\n\n$input-btn-border-width: $border-width !default;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n$btn-padding-y: $input-btn-padding-y !default;\n$btn-padding-x: $input-btn-padding-x !default;\n$btn-font-family: $input-btn-font-family !default;\n$btn-font-size: $input-btn-font-size !default;\n$btn-line-height: $input-btn-line-height !default;\n\n$btn-padding-y-sm: $input-btn-padding-y-sm !default;\n$btn-padding-x-sm: $input-btn-padding-x-sm !default;\n$btn-font-size-sm: $input-btn-font-size-sm !default;\n$btn-line-height-sm: $input-btn-line-height-sm !default;\n\n$btn-padding-y-lg: $input-btn-padding-y-lg !default;\n$btn-padding-x-lg: $input-btn-padding-x-lg !default;\n$btn-font-size-lg: $input-btn-font-size-lg !default;\n$btn-line-height-lg: $input-btn-line-height-lg !default;\n\n$btn-border-width: $input-btn-border-width !default;\n\n$btn-font-weight: $font-weight-normal !default;\n$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width: $input-btn-focus-width !default;\n$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity: .65 !default;\n$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-disabled-color: $gray-600 !default;\n\n$btn-block-spacing-y: .5rem !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius: $border-radius !default;\n$btn-border-radius-lg: $border-radius-lg !default;\n$btn-border-radius-sm: $border-radius-sm !default;\n\n$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n\n// Forms\n\n$label-margin-bottom: .5rem !default;\n\n$input-padding-y: $input-btn-padding-y !default;\n$input-padding-x: $input-btn-padding-x !default;\n$input-font-family: $input-btn-font-family !default;\n$input-font-size: $input-btn-font-size !default;\n$input-font-weight: $font-weight-base !default;\n$input-line-height: $input-btn-line-height !default;\n\n$input-padding-y-sm: $input-btn-padding-y-sm !default;\n$input-padding-x-sm: $input-btn-padding-x-sm !default;\n$input-font-size-sm: $input-btn-font-size-sm !default;\n$input-line-height-sm: $input-btn-line-height-sm !default;\n\n$input-padding-y-lg: $input-btn-padding-y-lg !default;\n$input-padding-x-lg: $input-btn-padding-x-lg !default;\n$input-font-size-lg: $input-btn-font-size-lg !default;\n$input-line-height-lg: $input-btn-line-height-lg !default;\n\n$input-bg: $white !default;\n$input-disabled-bg: $gray-200 !default;\n\n$input-color: $gray-700 !default;\n$input-border-color: $gray-400 !default;\n$input-border-width: $input-btn-border-width !default;\n$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;\n\n$input-border-radius: $border-radius !default;\n$input-border-radius-lg: $border-radius-lg !default;\n$input-border-radius-sm: $border-radius-sm !default;\n\n$input-focus-bg: $input-bg !default;\n$input-focus-border-color: lighten($component-active-bg, 25%) !default;\n$input-focus-color: $input-color !default;\n$input-focus-width: $input-btn-focus-width !default;\n$input-focus-box-shadow: $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color: $gray-600 !default;\n$input-plaintext-color: $body-color !default;\n\n$input-height-border: $input-border-width * 2 !default;\n\n$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;\n$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;\n$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;\n\n$input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;\n$input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;\n$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;\n\n$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-text-margin-top: .25rem !default;\n\n$form-check-input-gutter: 1.25rem !default;\n$form-check-input-margin-y: .3rem !default;\n$form-check-input-margin-x: .25rem !default;\n\n$form-check-inline-margin-x: .75rem !default;\n$form-check-inline-input-margin-x: .3125rem !default;\n\n$form-grid-gutter-width: 10px !default;\n$form-group-margin-bottom: 1rem !default;\n\n$input-group-addon-color: $input-color !default;\n$input-group-addon-bg: $gray-200 !default;\n$input-group-addon-border-color: $input-border-color !default;\n\n$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$custom-control-gutter: .5rem !default;\n$custom-control-spacer-x: 1rem !default;\n\n$custom-control-indicator-size: 1rem !default;\n$custom-control-indicator-bg: $input-bg !default;\n\n$custom-control-indicator-bg-size: 50% 50% !default;\n$custom-control-indicator-box-shadow: $input-box-shadow !default;\n$custom-control-indicator-border-color: $gray-500 !default;\n$custom-control-indicator-border-width: $input-border-width !default;\n\n$custom-control-indicator-disabled-bg: $input-disabled-bg !default;\n$custom-control-label-disabled-color: $gray-600 !default;\n\n$custom-control-indicator-checked-color: $component-active-color !default;\n$custom-control-indicator-checked-bg: $component-active-bg !default;\n$custom-control-indicator-checked-disabled-bg: rgba(theme-color(\"primary\"), .5) !default;\n$custom-control-indicator-checked-box-shadow: none !default;\n$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;\n\n$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;\n$custom-control-indicator-focus-border-color: $input-focus-border-color !default;\n\n$custom-control-indicator-active-color: $component-active-color !default;\n$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;\n$custom-control-indicator-active-box-shadow: none !default;\n$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;\n\n$custom-checkbox-indicator-border-radius: $border-radius !default;\n$custom-checkbox-indicator-icon-checked: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n\n$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;\n$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;\n$custom-checkbox-indicator-icon-indeterminate: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$custom-checkbox-indicator-indeterminate-box-shadow: none !default;\n$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;\n\n$custom-radio-indicator-border-radius: 50% !default;\n$custom-radio-indicator-icon-checked: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n\n$custom-switch-width: $custom-control-indicator-size * 1.75 !default;\n$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;\n$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;\n\n$custom-select-padding-y: $input-padding-y !default;\n$custom-select-padding-x: $input-padding-x !default;\n$custom-select-font-family: $input-font-family !default;\n$custom-select-font-size: $input-font-size !default;\n$custom-select-height: $input-height !default;\n$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-font-weight: $input-font-weight !default;\n$custom-select-line-height: $input-line-height !default;\n$custom-select-color: $input-color !default;\n$custom-select-disabled-color: $gray-600 !default;\n$custom-select-bg: $input-bg !default;\n$custom-select-disabled-bg: $gray-200 !default;\n$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions\n$custom-select-indicator-color: $gray-800 !default;\n$custom-select-indicator: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)\n\n$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;\n$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;\n\n$custom-select-border-width: $input-border-width !default;\n$custom-select-border-color: $input-border-color !default;\n$custom-select-border-radius: $border-radius !default;\n$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;\n\n$custom-select-focus-border-color: $input-focus-border-color !default;\n$custom-select-focus-width: $input-focus-width !default;\n$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default;\n\n$custom-select-padding-y-sm: $input-padding-y-sm !default;\n$custom-select-padding-x-sm: $input-padding-x-sm !default;\n$custom-select-font-size-sm: $input-font-size-sm !default;\n$custom-select-height-sm: $input-height-sm !default;\n\n$custom-select-padding-y-lg: $input-padding-y-lg !default;\n$custom-select-padding-x-lg: $input-padding-x-lg !default;\n$custom-select-font-size-lg: $input-font-size-lg !default;\n$custom-select-height-lg: $input-height-lg !default;\n\n$custom-range-track-width: 100% !default;\n$custom-range-track-height: .5rem !default;\n$custom-range-track-cursor: pointer !default;\n$custom-range-track-bg: $gray-300 !default;\n$custom-range-track-border-radius: 1rem !default;\n$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;\n\n$custom-range-thumb-width: 1rem !default;\n$custom-range-thumb-height: $custom-range-thumb-width !default;\n$custom-range-thumb-bg: $component-active-bg !default;\n$custom-range-thumb-border: 0 !default;\n$custom-range-thumb-border-radius: 1rem !default;\n$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;\n$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge\n$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;\n$custom-range-thumb-disabled-bg: $gray-500 !default;\n\n$custom-file-height: $input-height !default;\n$custom-file-height-inner: $input-height-inner !default;\n$custom-file-focus-border-color: $input-focus-border-color !default;\n$custom-file-focus-box-shadow: $input-focus-box-shadow !default;\n$custom-file-disabled-bg: $input-disabled-bg !default;\n\n$custom-file-padding-y: $input-padding-y !default;\n$custom-file-padding-x: $input-padding-x !default;\n$custom-file-line-height: $input-line-height !default;\n$custom-file-font-family: $input-font-family !default;\n$custom-file-font-weight: $input-font-weight !default;\n$custom-file-color: $input-color !default;\n$custom-file-bg: $input-bg !default;\n$custom-file-border-width: $input-border-width !default;\n$custom-file-border-color: $input-border-color !default;\n$custom-file-border-radius: $input-border-radius !default;\n$custom-file-box-shadow: $input-box-shadow !default;\n$custom-file-button-color: $custom-file-color !default;\n$custom-file-button-bg: $input-group-addon-bg !default;\n$custom-file-text: (\n en: \"Browse\"\n) !default;\n\n\n// Form validation\n\n$form-feedback-margin-top: $form-text-margin-top !default;\n$form-feedback-font-size: $small-font-size !default;\n$form-feedback-valid-color: theme-color(\"success\") !default;\n$form-feedback-invalid-color: theme-color(\"danger\") !default;\n\n$form-feedback-icon-valid-color: $form-feedback-valid-color !default;\n$form-feedback-icon-valid: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\"), \"#\", \"%23\") !default;\n\n$form-validation-states: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$form-validation-states: map-merge(\n (\n \"valid\": (\n \"color\": $form-feedback-valid-color,\n \"icon\": $form-feedback-icon-valid\n ),\n \"invalid\": (\n \"color\": $form-feedback-invalid-color,\n \"icon\": $form-feedback-icon-invalid\n ),\n ),\n $form-validation-states\n);\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown: 1000 !default;\n$zindex-sticky: 1020 !default;\n$zindex-fixed: 1030 !default;\n$zindex-modal-backdrop: 1040 !default;\n$zindex-modal: 1050 !default;\n$zindex-popover: 1060 !default;\n$zindex-tooltip: 1070 !default;\n\n\n// Navs\n\n$nav-link-padding-y: .5rem !default;\n$nav-link-padding-x: 1rem !default;\n$nav-link-disabled-color: $gray-600 !default;\n\n$nav-tabs-border-color: $gray-300 !default;\n$nav-tabs-border-width: $border-width !default;\n$nav-tabs-border-radius: $border-radius !default;\n$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color: $gray-700 !default;\n$nav-tabs-link-active-bg: $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius: $border-radius !default;\n$nav-pills-link-active-color: $component-active-color !default;\n$nav-pills-link-active-bg: $component-active-bg !default;\n\n$nav-divider-color: $gray-200 !default;\n$nav-divider-margin-y: $spacer / 2 !default;\n\n\n// Navbar\n\n$navbar-padding-y: $spacer / 2 !default;\n$navbar-padding-x: $spacer !default;\n\n$navbar-nav-link-padding-x: .5rem !default;\n\n$navbar-brand-font-size: $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;\n\n$navbar-toggler-padding-y: .25rem !default;\n$navbar-toggler-padding-x: .75rem !default;\n$navbar-toggler-font-size: $font-size-lg !default;\n$navbar-toggler-border-radius: $btn-border-radius !default;\n\n$navbar-dark-color: rgba($white, .5) !default;\n$navbar-dark-hover-color: rgba($white, .75) !default;\n$navbar-dark-active-color: $white !default;\n$navbar-dark-disabled-color: rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg: str-replace(url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$navbar-dark-toggler-border-color: rgba($white, .1) !default;\n\n$navbar-light-color: rgba($black, .5) !default;\n$navbar-light-hover-color: rgba($black, .7) !default;\n$navbar-light-active-color: rgba($black, .9) !default;\n$navbar-light-disabled-color: rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg: str-replace(url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color: $navbar-light-active-color !default;\n$navbar-light-brand-hover-color: $navbar-light-active-color !default;\n$navbar-dark-brand-color: $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-min-width: 10rem !default;\n$dropdown-padding-y: .5rem !default;\n$dropdown-spacer: .125rem !default;\n$dropdown-font-size: $font-size-base !default;\n$dropdown-color: $body-color !default;\n$dropdown-bg: $white !default;\n$dropdown-border-color: rgba($black, .15) !default;\n$dropdown-border-radius: $border-radius !default;\n$dropdown-border-width: $border-width !default;\n$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;\n$dropdown-divider-bg: $gray-200 !default;\n$dropdown-divider-margin-y: $nav-divider-margin-y !default;\n$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;\n\n$dropdown-link-color: $gray-900 !default;\n$dropdown-link-hover-color: darken($gray-900, 5%) !default;\n$dropdown-link-hover-bg: $gray-100 !default;\n\n$dropdown-link-active-color: $component-active-color !default;\n$dropdown-link-active-bg: $component-active-bg !default;\n\n$dropdown-link-disabled-color: $gray-600 !default;\n\n$dropdown-item-padding-y: .25rem !default;\n$dropdown-item-padding-x: 1.5rem !default;\n\n$dropdown-header-color: $gray-600 !default;\n\n\n// Pagination\n\n$pagination-padding-y: .5rem !default;\n$pagination-padding-x: .75rem !default;\n$pagination-padding-y-sm: .25rem !default;\n$pagination-padding-x-sm: .5rem !default;\n$pagination-padding-y-lg: .75rem !default;\n$pagination-padding-x-lg: 1.5rem !default;\n$pagination-line-height: 1.25 !default;\n\n$pagination-color: $link-color !default;\n$pagination-bg: $white !default;\n$pagination-border-width: $border-width !default;\n$pagination-border-color: $gray-300 !default;\n\n$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;\n$pagination-focus-outline: 0 !default;\n\n$pagination-hover-color: $link-hover-color !default;\n$pagination-hover-bg: $gray-200 !default;\n$pagination-hover-border-color: $gray-300 !default;\n\n$pagination-active-color: $component-active-color !default;\n$pagination-active-bg: $component-active-bg !default;\n$pagination-active-border-color: $pagination-active-bg !default;\n\n$pagination-disabled-color: $gray-600 !default;\n$pagination-disabled-bg: $white !default;\n$pagination-disabled-border-color: $gray-300 !default;\n\n\n// Jumbotron\n\n$jumbotron-padding: 2rem !default;\n$jumbotron-color: null !default;\n$jumbotron-bg: $gray-200 !default;\n\n\n// Cards\n\n$card-spacer-y: .75rem !default;\n$card-spacer-x: 1.25rem !default;\n$card-border-width: $border-width !default;\n$card-border-radius: $border-radius !default;\n$card-border-color: rgba($black, .125) !default;\n$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;\n$card-cap-bg: rgba($black, .03) !default;\n$card-cap-color: null !default;\n$card-color: null !default;\n$card-bg: $white !default;\n\n$card-img-overlay-padding: 1.25rem !default;\n\n$card-group-margin: $grid-gutter-width / 2 !default;\n$card-deck-margin: $card-group-margin !default;\n\n$card-columns-count: 3 !default;\n$card-columns-gap: 1.25rem !default;\n$card-columns-margin: $card-spacer-y !default;\n\n\n// Tooltips\n\n$tooltip-font-size: $font-size-sm !default;\n$tooltip-max-width: 200px !default;\n$tooltip-color: $white !default;\n$tooltip-bg: $black !default;\n$tooltip-border-radius: $border-radius !default;\n$tooltip-opacity: .9 !default;\n$tooltip-padding-y: .25rem !default;\n$tooltip-padding-x: .5rem !default;\n$tooltip-margin: 0 !default;\n\n$tooltip-arrow-width: .8rem !default;\n$tooltip-arrow-height: .4rem !default;\n$tooltip-arrow-color: $tooltip-bg !default;\n\n// Form tooltips must come after regular tooltips\n$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size: $tooltip-font-size !default;\n$form-feedback-tooltip-line-height: $line-height-base !default;\n$form-feedback-tooltip-opacity: $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n\n\n// Popovers\n\n$popover-font-size: $font-size-sm !default;\n$popover-bg: $white !default;\n$popover-max-width: 276px !default;\n$popover-border-width: $border-width !default;\n$popover-border-color: rgba($black, .2) !default;\n$popover-border-radius: $border-radius-lg !default;\n$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;\n\n$popover-header-bg: darken($popover-bg, 3%) !default;\n$popover-header-color: $headings-color !default;\n$popover-header-padding-y: .5rem !default;\n$popover-header-padding-x: .75rem !default;\n\n$popover-body-color: $body-color !default;\n$popover-body-padding-y: $popover-header-padding-y !default;\n$popover-body-padding-x: $popover-header-padding-x !default;\n\n$popover-arrow-width: 1rem !default;\n$popover-arrow-height: .5rem !default;\n$popover-arrow-color: $popover-bg !default;\n\n$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;\n\n\n// Toasts\n\n$toast-max-width: 350px !default;\n$toast-padding-x: .75rem !default;\n$toast-padding-y: .25rem !default;\n$toast-font-size: .875rem !default;\n$toast-color: null !default;\n$toast-background-color: rgba($white, .85) !default;\n$toast-border-width: 1px !default;\n$toast-border-color: rgba(0, 0, 0, .1) !default;\n$toast-border-radius: .25rem !default;\n$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;\n\n$toast-header-color: $gray-600 !default;\n$toast-header-background-color: rgba($white, .85) !default;\n$toast-header-border-color: rgba(0, 0, 0, .05) !default;\n\n\n// Badges\n\n$badge-font-size: 75% !default;\n$badge-font-weight: $font-weight-bold !default;\n$badge-padding-y: .25em !default;\n$badge-padding-x: .4em !default;\n$badge-border-radius: $border-radius !default;\n\n$badge-transition: $btn-transition !default;\n$badge-focus-width: $input-btn-focus-width !default;\n\n$badge-pill-padding-x: .6em !default;\n// Use a higher than normal value to ensure completely rounded edges when\n// customizing padding or font-size on labels.\n$badge-pill-border-radius: 10rem !default;\n\n\n// Modals\n\n// Padding applied to the modal body\n$modal-inner-padding: 1rem !default;\n\n$modal-dialog-margin: .5rem !default;\n$modal-dialog-margin-y-sm-up: 1.75rem !default;\n\n$modal-title-line-height: $line-height-base !default;\n\n$modal-content-color: null !default;\n$modal-content-bg: $white !default;\n$modal-content-border-color: rgba($black, .2) !default;\n$modal-content-border-width: $border-width !default;\n$modal-content-border-radius: $border-radius-lg !default;\n$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;\n$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;\n\n$modal-backdrop-bg: $black !default;\n$modal-backdrop-opacity: .5 !default;\n$modal-header-border-color: $border-color !default;\n$modal-footer-border-color: $modal-header-border-color !default;\n$modal-header-border-width: $modal-content-border-width !default;\n$modal-footer-border-width: $modal-header-border-width !default;\n$modal-header-padding-y: 1rem !default;\n$modal-header-padding-x: 1rem !default;\n$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-xl: 1140px !default;\n$modal-lg: 800px !default;\n$modal-md: 500px !default;\n$modal-sm: 300px !default;\n\n$modal-fade-transform: translate(0, -50px) !default;\n$modal-show-transform: none !default;\n$modal-transition: transform .3s ease-out !default;\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n$alert-padding-y: .75rem !default;\n$alert-padding-x: 1.25rem !default;\n$alert-margin-bottom: 1rem !default;\n$alert-border-radius: $border-radius !default;\n$alert-link-font-weight: $font-weight-bold !default;\n$alert-border-width: $border-width !default;\n\n$alert-bg-level: -10 !default;\n$alert-border-level: -9 !default;\n$alert-color-level: 6 !default;\n\n\n// Progress bars\n\n$progress-height: 1rem !default;\n$progress-font-size: $font-size-base * .75 !default;\n$progress-bg: $gray-200 !default;\n$progress-border-radius: $border-radius !default;\n$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;\n$progress-bar-color: $white !default;\n$progress-bar-bg: theme-color(\"primary\") !default;\n$progress-bar-animation-timing: 1s linear infinite !default;\n$progress-bar-transition: width .6s ease !default;\n\n\n// List group\n\n$list-group-color: null !default;\n$list-group-bg: $white !default;\n$list-group-border-color: rgba($black, .125) !default;\n$list-group-border-width: $border-width !default;\n$list-group-border-radius: $border-radius !default;\n\n$list-group-item-padding-y: .75rem !default;\n$list-group-item-padding-x: 1.25rem !default;\n\n$list-group-hover-bg: $gray-100 !default;\n$list-group-active-color: $component-active-color !default;\n$list-group-active-bg: $component-active-bg !default;\n$list-group-active-border-color: $list-group-active-bg !default;\n\n$list-group-disabled-color: $gray-600 !default;\n$list-group-disabled-bg: $list-group-bg !default;\n\n$list-group-action-color: $gray-700 !default;\n$list-group-action-hover-color: $list-group-action-color !default;\n\n$list-group-action-active-color: $body-color !default;\n$list-group-action-active-bg: $gray-200 !default;\n\n\n// Image thumbnails\n\n$thumbnail-padding: .25rem !default;\n$thumbnail-bg: $body-bg !default;\n$thumbnail-border-width: $border-width !default;\n$thumbnail-border-color: $gray-300 !default;\n$thumbnail-border-radius: $border-radius !default;\n$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;\n\n\n// Figures\n\n$figure-caption-font-size: 90% !default;\n$figure-caption-color: $gray-600 !default;\n\n\n// Breadcrumbs\n\n$breadcrumb-padding-y: .75rem !default;\n$breadcrumb-padding-x: 1rem !default;\n$breadcrumb-item-padding: .5rem !default;\n\n$breadcrumb-margin-bottom: 1rem !default;\n\n$breadcrumb-bg: $gray-200 !default;\n$breadcrumb-divider-color: $gray-600 !default;\n$breadcrumb-active-color: $gray-600 !default;\n$breadcrumb-divider: quote(\"/\") !default;\n\n$breadcrumb-border-radius: $border-radius !default;\n\n\n// Carousel\n\n$carousel-control-color: $white !default;\n$carousel-control-width: 15% !default;\n$carousel-control-opacity: .5 !default;\n$carousel-control-hover-opacity: .9 !default;\n$carousel-control-transition: opacity .15s ease !default;\n\n$carousel-indicator-width: 30px !default;\n$carousel-indicator-height: 3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer: 3px !default;\n$carousel-indicator-active-bg: $white !default;\n$carousel-indicator-transition: opacity .6s ease !default;\n\n$carousel-caption-width: 70% !default;\n$carousel-caption-color: $white !default;\n\n$carousel-control-icon-width: 20px !default;\n\n$carousel-control-prev-icon-bg: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$carousel-control-next-icon-bg: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n\n$carousel-transition-duration: .6s !default;\n$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n\n// Spinners\n\n$spinner-width: 2rem !default;\n$spinner-height: $spinner-width !default;\n$spinner-border-width: .25em !default;\n\n$spinner-width-sm: 1rem !default;\n$spinner-height-sm: $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n\n\n// Close\n\n$close-font-size: $font-size-base * 1.5 !default;\n$close-font-weight: $font-weight-bold !default;\n$close-color: $black !default;\n$close-text-shadow: 0 1px 0 $white !default;\n\n\n// Code\n\n$code-font-size: 87.5% !default;\n$code-color: $pink !default;\n\n$kbd-padding-y: .2rem !default;\n$kbd-padding-x: .4rem !default;\n$kbd-font-size: $code-font-size !default;\n$kbd-color: $white !default;\n$kbd-bg: $gray-900 !default;\n\n$pre-color: $gray-900 !default;\n$pre-scrollable-max-height: 340px !default;\n\n\n// Utilities\n\n$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;\n$overflows: auto, hidden !default;\n$positions: static, relative, absolute, fixed, sticky !default;\n\n\n// Printing\n\n$print-page-size: a3 !default;\n$print-body-min-width: map-get($grid-breakpoints, \"lg\") !default;\n", + "@import \"mixins/alert.scss\";\n@import \"mixins/badges.scss\";\n@import \"mixins/background-variant.scss\";\n@import \"mixins/buttons.scss\";\n@import \"mixins/forms.scss\";\n@import \"mixins/icon.scss\";\n@import \"mixins/modals.scss\";\n@import \"mixins/popovers.scss\";\n@import \"mixins/page-header.scss\";\n@import \"mixins/vendor-prefixes.scss\";\n@import \"mixins/opacity.scss\";\n@import \"mixins/modals.scss\";\n@import \"mixins/inputs.scss\";\n@import \"mixins/dropdown.scss\";\n@import \"mixins/wizard.scss\";\n", + "@mixin alert-variant($background, $border, $color) {\n color: color-yiq($background);\n // @include gradient-bg($background);\n background-color: lighten($background, 5%);\n border-color: $border;\n\n hr {\n border-top-color: darken($border, 5%);\n }\n\n .alert-link {\n color: darken($color, 10%);\n }\n}\n", + "@mixin badge-variant($bg) {\n color: color-yiq($bg);\n background-color: $bg;\n\n &[href] {\n @include hover-focus {\n color: color-yiq($bg);\n text-decoration: none;\n background-color: darken($bg, 3%);\n }\n }\n .tagsinput-remove-link{\n color: $white;\n }\n}\n", + "// Contextual backgrounds\n@mixin bg-variant($parent, $color) {\n #{$parent} {\n background-color: $color !important;\n }\n a#{$parent},\n button#{$parent} {\n @include hover-focus {\n background-color: darken($color, 10%) !important;\n }\n }\n}\n\n@mixin bg-gradient-variant($parent, $color) {\n #{$parent} {\n background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;\n }\n}\n", + "@mixin btn-styles($btn-color, $btn-states-color) {\n @include diagonal-gradient($btn-color, $btn-states-color);\n background-color: $btn-color;\n transition: all 0.15s ease;\n box-shadow: none;\n &.animation-on-hover:hover{\n background-position: bottom left;\n transition:0.3s ease-in-out;\n }\n\n &:hover,\n &:focus,\n &:active,\n &.active,\n &:active:focus,\n &:active:hover,\n &.active:focus,\n &.active:hover\n {\n background-color: $btn-states-color !important;\n background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;\n background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;\n background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;\n background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;\n color: $white;\n box-shadow: none;\n }\n\n &:active{\n box-shadow: none !important;\n transform: translateY(1px) !important;\n transition: all .15s ease;\n }\n\n &:not([data-action]):hover{\n\n box-shadow: 2px 2px 6px rgba(0,0,0,0.4);\n transform: translateY(-1px);\n -webkit-transform: translateY(-1px);\n }\n\n &.disabled,\n &:disabled,\n &[disabled],\n fieldset[disabled] & {\n &,\n &:hover,\n &:focus,\n &.focus,\n &:active,\n &.active {\n background-color: $btn-color;\n border-color: $btn-color;\n }\n }\n\n // btn-neutral style\n @if $btn-color == $white{\n color: $primary;\n\n &.btn-danger{\n color: $danger;\n\n &:hover,\n &:focus,\n &:active,\n &:active:focus{\n color: $danger-states;\n }\n }\n\n &.btn-info{\n color: $info;\n\n &:hover,\n &:focus,\n &:active,\n &:active:focus{\n color: $info-states;\n }\n }\n\n &.btn-warning{\n color: $warning;\n\n &:hover,\n &:focus,\n &:active,\n &:active:focus{\n color: $warning-states;\n }\n }\n\n &.btn-success{\n color: $success;\n\n &:hover,\n &:focus,\n &:active,\n &:active:focus{\n color: $success-states;\n }\n }\n\n &.btn-default{\n color: $default;\n\n &:hover,\n &:focus,\n &:active,\n &:active:focus{\n color: $default-states;\n }\n }\n\n &.active,\n &:active,\n &:active:focus,\n &:active:hover,\n &.active:focus,\n &.active:hover,\n .show > &.dropdown-toggle,\n .show > &.dropdown-toggle:focus,\n .show > &.dropdown-toggle:hover {\n background-color: $white;\n color: $primary-states;\n box-shadow: none;\n }\n\n &:hover,\n &:focus{\n color: $primary-states;\n\n &:not(.nav-link){\n box-shadow: none;\n }\n\n }\n\n } @else {\n color: $white;\n }\n\n &.btn-simple{\n color: $btn-color;\n border-color: $btn-color;\n background: $transparent-bg;\n\n &:hover,\n &:focus,\n &:active,\n &:not(:disabled):not(.disabled):active{\n color: $btn-color;\n border-color: $btn-color;\n background-color: $transparent-bg !important;\n background-image: none !important;\n box-shadow: none;\n }\n\n &.active{\n border-color: $btn-color !important;\n &:hover,\n &:focus,\n &:active,\n &:not(:disabled):not(.disabled):active{\n color: $white;\n border-color: $btn-color;\n background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;\n background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;\n background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;\n background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;\n background-color: $btn-states-color !important;\n box-shadow: none;\n }\n }\n }\n\n &.btn-link{\n color: $btn-color;\n &:hover,\n &:focus,\n &:active{\n background-color: $transparent-bg !important;\n background-image: none !important;\n color: $white !important;\n text-decoration: none;\n box-shadow: none;\n }\n }\n}\n\n@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {\n color: color-yiq($background);\n @include gradient-bg($background);\n border-color: $border;\n @include box-shadow($btn-box-shadow);\n\n @include hover {\n color: color-yiq($hover-background);\n @include gradient-bg($hover-background);\n border-color: $hover-border;\n }\n\n &:focus,\n &.focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);\n }\n @else {\n box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);\n }\n } // Disabled comes first so active can properly restyle\n &.disabled,\n &:disabled {\n color: color-yiq($background);\n background-color: $background;\n border-color: $border;\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show>&.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n @if $enable-gradients {\n background-image: none; // Remove the gradient for the pressed/active state\n }\n border-color: $active-border;\n\n &:focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);\n }\n @else {\n box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);\n }\n }\n }\n}\n\n@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {\n color: $color;\n background-color: transparent;\n background-image: none;\n border-color: $color;\n\n &:hover {\n color: $color-hover;\n background-color: $active-background;\n border-color: $active-border;\n }\n\n &:focus,\n &.focus {\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n\n &.disabled,\n &:disabled {\n color: $color;\n background-color: transparent;\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show>&.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n border-color: $active-border;\n\n &:focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows and $btn-active-box-shadow !=none {\n box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);\n }\n @else {\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n }\n }\n}\n\n// Button sizes\n@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){\n font-size: $font-size;\n border-radius: $border;\n padding: $padding-vertical $padding-horizontal;\n\n &.btn-simple{\n padding: $padding-vertical - 1 $padding-horizontal - 1;\n }\n\n}\n\n// for social buttons\n@mixin social-buttons-color ($color, $state-color){\n @include diagonal-gradient($color, darken($color,20%));\n //background-color: $color;\n color: $white;\n background-size: 210% 210%;\n background-position: top right;\n background-repeat: space;\n\n &:focus,\n &:active,\n &:hover{\n background-color: $state-color;\n background-image: linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;\n background-image: -webkit-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;\n background-image: -o-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;\n background-image: -moz-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;\n color: $white;\n }\n\n &.btn-simple{\n color: $state-color;\n background-color: $transparent-bg;\n background-image: none !important;\n box-shadow: none;\n border-color: $state-color;\n\n &:hover,\n &:focus,\n &:active{\n color: $state-color;\n border-color: $state-color;\n }\n }\n\n &.btn-neutral{\n color: $color;\n background-color: $white;\n\n\n &:hover,\n &:focus,\n &:active{\n color: $state-color;\n }\n }\n}\n", + "@mixin form-control-focus() {\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n outline: 0;\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: $input-box-shadow, $input-focus-box-shadow;\n } @else {\n box-shadow: $input-focus-box-shadow;\n }\n }\n}\n\n\n@mixin form-validation-state($state, $color) {\n .#{$state}-feedback {\n display: none;\n width: 100%;\n margin-top: $form-feedback-margin-top;\n font-size: $form-feedback-font-size;\n color: $color;\n }\n\n .#{$state}-tooltip {\n position: absolute;\n top: 100%;\n z-index: 5;\n display: none;\n max-width: 100%; // Contain to parent when possible\n padding: .5rem;\n margin-top: .1rem;\n font-size: .875rem;\n line-height: 1;\n color: $white;\n background-color: rgba($color, .8);\n border-radius: .2rem;\n }\n\n .form-control,\n .custom-select {\n .was-validated &:#{$state},\n &.is-#{$state} {\n border-color: $color;\n\n &:focus {\n border-color: $color;\n //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n .form-check-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .form-check-label {\n color: $color;\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n .custom-control-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .custom-control-label {\n color: $color;\n\n &::before {\n background-color: lighten($color, 25%);\n border-color: lighten($color, 25%);\n }\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n\n &:checked {\n ~ .custom-control-label::before {\n @include gradient-bg(lighten($color, 10%));\n border-color: lighten($color, 25%);\n }\n }\n\n &:focus {\n ~ .custom-control-label::before {\n box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n }\n\n // custom file\n .custom-file-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .custom-file-label {\n border-color: $color;\n\n &::before { border-color: inherit; }\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n\n &:focus {\n ~ .custom-file-label {\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n }\n}\n", + "@mixin icon-shape-variant($color) {\n color: saturate(darken($color, 10%), 10);\n background-color: transparentize(lighten($color, 10%), .5);\n}", + "@mixin modal-colors($bg-color, $color) {\n .modal-content{\n background-color: $bg-color;\n color: $color;\n }\n\n .modal-body p{\n color: rgba($white, 0.8);\n }\n\n //inputs\n @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2);\n\n\n}\n", + "@mixin popover-variant($background) {\n background-color: $background;\n\n .popover-header {\n background-color: $background;\n color: color-yiq($background);\n opacity: .6;\n }\n\n .popover-body {\n color: color-yiq($background);\n }\n\n .popover-header{\n border-color: rgba(color-yiq($background), .2);\n }\n\n &.bs-popover-top {\n .arrow::after {\n border-top-color: $background;\n }\n }\n\n &.bs-popover-right {\n .arrow::after {\n border-right-color: $background;\n }\n }\n\n &.bs-popover-bottom {\n .arrow::after {\n border-bottom-color: $background;\n }\n }\n\n &.bs-popover-left {\n .arrow::after {\n border-left-color: $background;\n }\n }\n}\n", + "@mixin linear-gradient($color1, $color2){\n background: $color1; /* For browsers that do not support gradients */\n background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */\n background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */\n background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */\n background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */\n}\n", + "\n@mixin transform-translate-x($value){\n -webkit-transform: translate3d($value, 0, 0);\n -moz-transform: translate3d($value, 0, 0);\n -o-transform: translate3d($value, 0, 0);\n -ms-transform: translate3d($value, 0, 0);\n transform: translate3d($value, 0, 0);\n}\n\n@mixin transform-translate-y($value){\n -webkit-transform: translate3d(0,$value,0);\n -moz-transform: translate3d(0,$value,0);\n -o-transform: translate3d(0,$value,0);\n -ms-transform: translate3d(0,$value,0);\n transform: translate3d(0,$value,0);\n}\n\n@mixin transitions($time, $type){\n -webkit-transition: all $time $type;\n -moz-transition: all $time $type;\n -o-transition: all $time $type;\n -ms-transition: all $time $type;\n transition: all $time $type;\n}\n\n@mixin diagonal-gradient($start-color, $end-color){\n background: $start-color;\n background-image: -webkit-linear-gradient(to bottom left, $start-color, $end-color, $start-color);\n background-image: -o-linear-gradient(to bottom left, $start-color, $end-color, $start-color);\n background-image: -moz-linear-gradient(to bottom left, $start-color, $end-color, $start-color);\n background-image: linear-gradient(to bottom left, $start-color, $end-color, $start-color);\n background-size: 210% 210%;\n background-position: top right;\n}\n\n@mixin bar-animation($type){\n -webkit-animation: $type 500ms linear 0s;\n -moz-animation: $type 500ms linear 0s;\n animation: $type 500ms 0s;\n -webkit-animation-fill-mode: forwards;\n -moz-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n}\n\n@mixin rotate-180(){\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);\n -webkit-transform: rotate(180deg);\n -ms-transform: rotate(180deg);\n transform: rotate(180deg);\n}\n\n@mixin transform-translate-y-dropdown($value) {\n -webkit-transform: translate3d(0,$value,0) !important;\n -moz-transform: translate3d(0,$value,0) !important;\n -o-transform: translate3d(0,$value,0) !important;\n -ms-transform: translate3d(0,$value,0) !important;\n transform: translate3d(0,$value,0) !important;\n}\n\n@mixin linear-gradient($color, $states-color){\n background: $color;\n background: -webkit-linear-gradient(0deg, $color 0%, $states-color 100%);\n background: -o-linear-gradient(0deg, $color 0%, $states-color 100%);\n background: -moz-linear-gradient(0deg, $color 0%, $states-color 100%);\n background: linear-gradient(0deg, $color 0%, $states-color 100%);\n}\n\n@mixin linear-gradient-right($color, $states-color){\n background: $color;\n background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%);\n background: -o-linear-gradient(to right, $color 0%, $states-color 100%);\n background: -moz-linear-gradient(to right, $color 0%, $states-color 100%);\n background: linear-gradient(to right, $color 0%, $states-color 100%);\n}\n\n@mixin sidebar-color($color){\n &:after{\n background: $color;\n }\n\n .nav li.active > a{\n color: $color;\n\n i{\n color: $color;\n }\n }\n}\n\n@mixin transition-input-focus-color() {\n -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n}\n\n@mixin topbar-x-rotation(){\n @keyframes topbar-x {\n 0% {top: 0px; transform: rotate(0deg); }\n 45% {top: 6px; transform: rotate(145deg); }\n 75% {transform: rotate(130deg); }\n 100% {transform: rotate(135deg); }\n }\n @-webkit-keyframes topbar-x {\n 0% {top: 0px; -webkit-transform: rotate(0deg); }\n 45% {top: 6px; -webkit-transform: rotate(145deg); }\n 75% {-webkit-transform: rotate(130deg); }\n 100% { -webkit-transform: rotate(135deg); }\n }\n @-moz-keyframes topbar-x {\n 0% {top: 0px; -moz-transform: rotate(0deg); }\n 45% {top: 6px; -moz-transform: rotate(145deg); }\n 75% {-moz-transform: rotate(130deg); }\n 100% { -moz-transform: rotate(135deg); }\n }\n}\n\n@mixin topbar-back-rotation(){\n @keyframes topbar-back {\n 0% { top: 6px; transform: rotate(135deg); }\n 45% { transform: rotate(-10deg); }\n 75% { transform: rotate(5deg); }\n 100% { top: 0px; transform: rotate(0); }\n }\n\n @-webkit-keyframes topbar-back {\n 0% { top: 6px; -webkit-transform: rotate(135deg); }\n 45% { -webkit-transform: rotate(-10deg); }\n 75% { -webkit-transform: rotate(5deg); }\n 100% { top: 0px; -webkit-transform: rotate(0); }\n }\n\n @-moz-keyframes topbar-back {\n 0% { top: 6px; -moz-transform: rotate(135deg); }\n 45% { -moz-transform: rotate(-10deg); }\n 75% { -moz-transform: rotate(5deg); }\n 100% { top: 0px; -moz-transform: rotate(0); }\n }\n}\n\n@mixin bottombar-x-rotation(){\n @keyframes bottombar-x {\n 0% {bottom: 0px; transform: rotate(0deg);}\n 45% {bottom: 6px; transform: rotate(-145deg);}\n 75% {transform: rotate(-130deg);}\n 100% {transform: rotate(-135deg);}\n }\n @-webkit-keyframes bottombar-x {\n 0% {bottom: 0px; -webkit-transform: rotate(0deg);}\n 45% {bottom: 6px; -webkit-transform: rotate(-145deg);}\n 75% {-webkit-transform: rotate(-130deg);}\n 100% {-webkit-transform: rotate(-135deg);}\n }\n @-moz-keyframes bottombar-x {\n 0% {bottom: 0px; -moz-transform: rotate(0deg);}\n 45% {bottom: 6px; -moz-transform: rotate(-145deg);}\n 75% {-moz-transform: rotate(-130deg);}\n 100% {-moz-transform: rotate(-135deg);}\n }\n}\n\n@mixin bottombar-back-rotation{\n @keyframes bottombar-back {\n 0% { bottom: 6px;transform: rotate(-135deg);}\n 45% { transform: rotate(10deg);}\n 75% { transform: rotate(-5deg);}\n 100% { bottom: 0px;transform: rotate(0);}\n }\n @-webkit-keyframes bottombar-back {\n 0% {bottom: 6px;-webkit-transform: rotate(-135deg);}\n 45% {-webkit-transform: rotate(10deg);}\n 75% {-webkit-transform: rotate(-5deg);}\n 100% {bottom: 0px;-webkit-transform: rotate(0);}\n }\n @-moz-keyframes bottombar-back {\n 0% {bottom: 6px;-moz-transform: rotate(-135deg);}\n 45% {-moz-transform: rotate(10deg);}\n 75% {-moz-transform: rotate(-5deg);}\n 100% {bottom: 0px;-moz-transform: rotate(0);}\n }\n\n}\n\n\n@mixin nc-rotate($degrees, $rotation) {\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});\n -webkit-transform: rotate($degrees);\n -moz-transform: rotate($degrees);\n -ms-transform: rotate($degrees);\n -o-transform: rotate($degrees);\n transform: rotate($degrees);\n}\n\n@mixin nc-flip($horiz, $vert, $rotation) {\n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});\n -webkit-transform: scale($horiz, $vert);\n -moz-transform: scale($horiz, $vert);\n -ms-transform: scale($horiz, $vert);\n -o-transform: scale($horiz, $vert);\n transform: scale($horiz, $vert);\n}\n", + "// Opacity\n\n@mixin opacity($opacity) {\n opacity: $opacity;\n // IE8 filter\n $opacity-ie: ($opacity * 100);\n filter: #{alpha(opacity=$opacity-ie)};\n}\n", + "@mixin modal-colors($bg-color, $color) {\n .modal-content{\n background-color: $bg-color;\n color: $color;\n }\n\n .modal-body p{\n color: rgba($white, 0.8);\n }\n\n //inputs\n @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2);\n\n\n}\n", + "@mixin input-size($padding-vertical, $padding-horizontal){\n padding: $padding-vertical $padding-horizontal;\n}\n\n@mixin form-control-placeholder($color, $opacity){\n .form-control::-moz-placeholder{\n color: $color;\n @include opacity(1);\n }\n .form-control:-moz-placeholder{\n color: $color;\n @include opacity(1);\n }\n .form-control::-webkit-input-placeholder{\n color: $color;\n @include opacity(1);\n }\n .form-control:-ms-input-placeholder{\n color: $color;\n @include opacity(1);\n }\n}\n\n@mixin placeholder() {\n &::-moz-placeholder {@content; } // Firefox\n &:-ms-input-placeholder {@content; } // Internet Explorer 10+\n &::-webkit-input-placeholder {@content; } // Safari and Chrome\n}\n\n@mixin light-form(){\n border-radius: 0;\n border:0;\n padding: 0;\n background-color: transparent;\n\n}\n\n\n@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) {\n .form-group.no-border.form-control-lg,\n .input-group.no-border.form-control-lg{\n .input-group-append .input-group-text{\n padding: $padding-vertical 0 $padding-vertical $padding-horizontal;\n }\n\n .form-control{\n padding: $padding-vertical $padding-horizontal;\n\n & + .input-group-prepend .input-group-text,\n & + .input-group-append .input-group-text{\n padding: $padding-vertical $padding-horizontal $padding-vertical 0;\n }\n\n\n }\n }\n\n .form-group.form-control-lg,\n .input-group.form-control-lg{\n .form-control{\n padding: $padding-vertical - 1 $padding-horizontal - 1;\n height: 100%;\n\n & + .input-group-prepend .input-group-text,\n & + .input-group-append .input-group-text{\n padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;\n }\n }\n\n .input-group-prepend .input-group-text,\n .input-group-append .input-group-text{\n padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;\n\n & + .form-control{\n padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;\n }\n }\n }\n}\n\n\n\n@mixin input-base-padding($padding-vertical, $padding-horizontal) {\n .form-group.no-border,\n .input-group.no-border{\n .form-control{\n padding: $padding-vertical $padding-horizontal;\n\n & + .input-group-prepend .input-group-text,\n & + .input-group-append .input-group-text{\n padding: $padding-vertical $padding-horizontal $padding-vertical 0;\n }\n }\n\n .input-group-prepend .input-group-text,\n .input-group-append .input-group-text{\n padding: $padding-vertical 0 $padding-vertical $padding-horizontal;\n }\n }\n\n .form-group,\n .input-group{\n .form-control{\n padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;\n\n & + .input-group-prepend .input-group-text,\n & + .input-group-append .input-group-text{\n padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;\n }\n }\n\n .input-group-prepend .input-group-text,\n .input-group-append .input-group-text{\n padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;\n\n & + .form-control,\n & ~ .form-control{\n padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;\n }\n }\n }\n}\n\n\n//color1 = $opacity-5\n//color2 = $opacity-8\n//color3 = $white-color\n//color4 = $transparent-bg\n//color5 = $opacity-1\n//color6 = $opacity-2\n\n\n@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {\n @include form-control-placeholder(rgba($white, 0.4), 1);\n\n .form-control{\n border-color: $color1;\n color: $color2;\n\n &:focus{\n border-color: $color3;\n background-color: $color4;\n color: $color3;\n }\n }\n\n .has-success,\n .has-danger{\n &:after{\n color: $color3;\n }\n }\n\n .has-danger{\n .form-control{\n background-color: $color4;\n }\n }\n\n .input-group-prepend{\n margin-right: 0;\n }\n\n .input-group-prepend .input-group-text,\n .input-group-append .input-group-text{\n background-color: rgba($background-black, 0.2);\n border-color: $color1;\n color: $color2;\n\n\n }\n\n .input-group-focus{\n .input-group-prepend .input-group-text,\n .input-group-append .input-group-text{\n background-color: rgba($background-black, 0.3);\n border-color: $color3;\n color: $color3;\n }\n }\n\n .form-group.no-border,\n .input-group.no-border{\n .form-control{\n background-color: rgba($background-black,0.2);\n color: $color2;\n\n &:focus,\n &:active,\n &:active{\n background-color: rgba($background-black,0.3);\n color: $color3;\n }\n }\n\n .form-control + .input-group-prepend .input-group-text,\n .form-control + .input-group-append .input-group-text{\n background-color: rgba($background-black,0.2);;\n\n &:focus,\n &:active,\n &:active{\n background-color: rgba($background-black,0.3);\n color: $color3;\n }\n }\n\n .form-control{\n &:focus{\n & + .input-group-prepend .input-group-text,\n & + .input-group-append .input-group-text{\n background-color: rgba($background-black, 0.3);\n color: $color3;\n }\n }\n }\n\n .input-group-prepend .input-group-text,\n .input-group-append .input-group-text{\n background-color: rgba($background-black, 0.2);\n border: none;\n color: $color2;\n }\n\n &.input-group-focus{\n .input-group-prepend .input-group-text,\n .input-group-append .input-group-text{\n background-color: rgba($background-black, 0.3);\n color: $color3;\n }\n }\n }\n\n}\n", + "@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {\n background-color: $brand-color;\n\n &:before{\n color: $brand-color;\n }\n\n .dropdown-header:not([href]):not([tabindex]){\n color: $dropdown-header-color;\n }\n\n .dropdown-item{\n color: $dropdown-color;\n\n &:hover,\n &:focus{\n background-color: $background-color;\n }\n }\n\n .dropdown-divider{\n background-color: $background-color;\n }\n\n \n}\n", + "@mixin set-wizard-color($color) {\n .progress-with-circle .progress-bar{\n background: $color;\n }\n\n .nav-pills .nav-item .nav-link{\n color: $color;\n\n &.checked, &.active{\n background: $color;\n color: white;\n }\n &:hover{\n background: $white;\n }\n }\n\n .nav-pills .nav-item .nav-link.active,\n .nav-pills .nav-item .nav-link.checked:focus,\n .nav-pills .nav-item .nav-link.checked:hover,\n .nav-pills .nav-item .nav-link.active:focus,\n .nav-pills .nav-item .nav-link.active:hover{\n background: $color;\n }\n\n}\n", + "// Toggles\n//\n// Used in conjunction with global variables to enable certain theme features.\n\n// Vendor\n@import \"vendor/rfs\";\n\n// Deprecate\n@import \"mixins/deprecate\";\n\n// Utilities\n@import \"mixins/breakpoints\";\n@import \"mixins/hover\";\n@import \"mixins/image\";\n@import \"mixins/badge\";\n@import \"mixins/resize\";\n@import \"mixins/screen-reader\";\n@import \"mixins/size\";\n@import \"mixins/reset-text\";\n@import \"mixins/text-emphasis\";\n@import \"mixins/text-hide\";\n@import \"mixins/text-truncate\";\n@import \"mixins/visibility\";\n\n// // Components\n@import \"mixins/alert\";\n@import \"mixins/buttons\";\n@import \"mixins/caret\";\n@import \"mixins/pagination\";\n@import \"mixins/lists\";\n@import \"mixins/list-group\";\n@import \"mixins/nav-divider\";\n@import \"mixins/forms\";\n@import \"mixins/table-row\";\n\n// // Skins\n@import \"mixins/background-variant\";\n@import \"mixins/border-radius\";\n@import \"mixins/box-shadow\";\n@import \"mixins/gradients\";\n@import \"mixins/transition\";\n\n// // Layout\n@import \"mixins/clearfix\";\n@import \"mixins/grid-framework\";\n@import \"mixins/grid\";\n@import \"mixins/float\";\n", + "// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated font-resizing\n//\n// See https://github.com/twbs/rfs\n\n// Configuration\n\n// Base font size\n$rfs-base-font-size: 1.25rem !default;\n$rfs-font-size-unit: rem !default;\n\n// Breakpoint at where font-size starts decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n// Resize font-size based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != \"number\" or $rfs-factor <= 1 {\n @error \"`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.\";\n}\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-responsive-font-sizes to false\n$enable-responsive-font-sizes: true !default;\n\n// Cache $rfs-base-font-size unit\n$rfs-base-font-size-unit: unit($rfs-base-font-size);\n\n// Remove px-unit from $rfs-base-font-size for calculations\n@if $rfs-base-font-size-unit == \"px\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);\n}\n@else if $rfs-base-font-size-unit == \"rem\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == \"px\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == \"rem\" or $rfs-breakpoint-unit-cache == \"em\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);\n}\n\n// Responsive font-size mixin\n@mixin rfs($fs, $important: false) {\n // Cache $fs unit\n $fs-unit: if(type-of($fs) == \"number\", unit($fs), false);\n\n // Add !important suffix if needed\n $rfs-suffix: if($important, \" !important\", \"\");\n\n // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n @if not $fs-unit or $fs-unit != \"\" and $fs-unit != \"px\" and $fs-unit != \"rem\" or $fs == 0 {\n font-size: #{$fs}#{$rfs-suffix};\n }\n @else {\n // Variables for storing static and fluid rescaling\n $rfs-static: null;\n $rfs-fluid: null;\n\n // Remove px-unit from $fs for calculations\n @if $fs-unit == \"px\" {\n $fs: $fs / ($fs * 0 + 1);\n }\n @else if $fs-unit == \"rem\" {\n $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);\n }\n\n // Set default font-size\n @if $rfs-font-size-unit == rem {\n $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};\n }\n @else if $rfs-font-size-unit == px {\n $rfs-static: #{$fs}px#{$rfs-suffix};\n }\n @else {\n @error \"`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.\";\n }\n\n // Only add media query if font-size is bigger as the minimum font-size\n // If $rfs-factor == 1, no rescaling will take place\n @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {\n $min-width: null;\n $variable-unit: null;\n\n // Calculate minimum font-size for given font-size\n $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;\n\n // Calculate difference between given font-size and minimum font-size for given font-size\n $fs-diff: $fs - $fs-min;\n\n // Base font-size formatting\n // No need to check if the unit is valid, because we did that before\n $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);\n\n // If two-dimensional, use smallest of screen width and height\n $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n // Calculate the variable width between 0 and $rfs-breakpoint\n $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};\n\n // Set the calculated font-size.\n $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};\n }\n\n // Rendering\n @if $rfs-fluid == null {\n // Only render static font-size if no fluid font-size is available\n font-size: $rfs-static;\n }\n @else {\n $mq-value: null;\n\n // RFS breakpoint formatting\n @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {\n $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};\n }\n @else if $rfs-breakpoint-unit == px {\n $mq-value: #{$rfs-breakpoint}px;\n }\n @else {\n @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n }\n\n @if $rfs-class == \"disable\" {\n // Adding an extra class increases specificity,\n // which prevents the media query to override the font size\n &,\n .disable-responsive-font-size &,\n &.disable-responsive-font-size {\n font-size: $rfs-static;\n }\n }\n @else {\n font-size: $rfs-static;\n }\n\n @if $rfs-two-dimensional {\n @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n @else {\n @media (max-width: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n }\n }\n}\n\n// The font-size & responsive-font-size mixin uses RFS to rescale font sizes\n@mixin font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n\n@mixin responsive-font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n", + "// Deprecate mixin\n//\n// This mixin can be used to deprecate mixins or functions.\n// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to\n// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)\n@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {\n @if ($enable-deprecation-messages != false and $ignore-warning != true) {\n @warn \"#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.\";\n }\n}\n", + "// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n", + "// Hover mixin and `$enable-hover-media-query` are deprecated.\n//\n// Originally added during our alphas and maintained during betas, this mixin was\n// designed to prevent `:hover` stickiness on iOS-an issue where hover styles\n// would persist after initial touch.\n//\n// For backward compatibility, we've kept these mixins and updated them to\n// always return their regular pseudo-classes instead of a shimmed media query.\n//\n// Issue: https://github.com/twbs/bootstrap/issues/25195\n\n@mixin hover {\n &:hover { @content; }\n}\n\n@mixin hover-focus {\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin plain-hover-focus {\n &,\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin hover-focus-active {\n &:hover,\n &:focus,\n &:active {\n @content;\n }\n}\n", + "// Image Mixins\n// - Responsive image\n// - Retina image\n\n\n// Responsive image\n//\n// Keep images from scaling beyond the width of their parents.\n\n@mixin img-fluid {\n // Part 1: Set a maximum relative to the parent\n max-width: 100%;\n // Part 2: Override the height to auto, otherwise images will be stretched\n // when setting a width and height attribute on the img element.\n height: auto;\n}\n\n\n// Retina image\n//\n// Short retina mixin for setting background-image and -size.\n\n@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {\n background-image: url($file-1x);\n\n // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,\n // but doesn't convert dppx=>dpi.\n // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.\n // Compatibility info: https://caniuse.com/#feat=css-media-resolution\n @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx\n only screen and (min-resolution: 2dppx) { // Standardized\n background-image: url($file-2x);\n background-size: $width-1x $height-1x;\n }\n @include deprecate(\"`img-retina()`\", \"v4.3.0\", \"v5\");\n}\n", + "@mixin badge-variant($bg) {\n color: color-yiq($bg);\n background-color: $bg;\n\n @at-root a#{&} {\n @include hover-focus {\n color: color-yiq($bg);\n background-color: darken($bg, 10%);\n }\n\n &:focus,\n &.focus {\n outline: 0;\n box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);\n }\n }\n}\n", + "// Resize anything\n\n@mixin resizable($direction) {\n overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`\n resize: $direction; // Options: horizontal, vertical, both\n}\n", + "// Only display content to screen readers\n//\n// See: https://a11yproject.com/posts/how-to-hide-content/\n// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/\n\n@mixin sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n// Use in conjunction with .sr-only to only display content when it's focused.\n//\n// Useful for \"Skip to main content\" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n//\n// Credit: HTML5 Boilerplate\n\n@mixin sr-only-focusable {\n &:active,\n &:focus {\n position: static;\n width: auto;\n height: auto;\n overflow: visible;\n clip: auto;\n white-space: normal;\n }\n}\n", + "// Sizing shortcuts\n\n@mixin size($width, $height: $width) {\n width: $width;\n height: $height;\n @include deprecate(\"`size()`\", \"v4.3.0\", \"v5\");\n}\n", + "@mixin reset-text {\n font-family: $font-family-base;\n // We deliberately do NOT reset font-size or word-wrap.\n font-style: normal;\n font-weight: $font-weight-normal;\n line-height: $line-height-base;\n text-align: left; // Fallback for where `start` is not supported\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n word-spacing: normal;\n white-space: normal;\n line-break: auto;\n}\n", + "// stylelint-disable declaration-no-important\n\n// Typography\n\n@mixin text-emphasis-variant($parent, $color) {\n #{$parent} {\n color: $color !important;\n }\n @if $emphasized-link-hover-darken-percentage != 0 {\n a#{$parent} {\n @include hover-focus {\n color: darken($color, $emphasized-link-hover-darken-percentage) !important;\n }\n }\n }\n}\n", + "// CSS image replacement\n@mixin text-hide($ignore-warning: false) {\n // stylelint-disable-next-line font-family-no-missing-generic-family-keyword\n font: 0/0 a;\n color: transparent;\n text-shadow: none;\n background-color: transparent;\n border: 0;\n\n @include deprecate(\"`text-hide()`\", \"v4.1.0\", \"v5\", $ignore-warning);\n}\n", + "// Text truncate\n// Requires inline-block or block for proper styling\n\n@mixin text-truncate() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n", + "// stylelint-disable declaration-no-important\n\n// Visibility\n\n@mixin invisible($visibility) {\n visibility: $visibility !important;\n @include deprecate(\"`invisible()`\", \"v4.3.0\", \"v5\");\n}\n", + "@mixin alert-variant($background, $border, $color) {\n color: $color;\n @include gradient-bg($background);\n border-color: $border;\n\n hr {\n border-top-color: darken($border, 5%);\n }\n\n .alert-link {\n color: darken($color, 10%);\n }\n}\n", + "// Button variants\n//\n// Easily pump out default styles, as well as :hover, :focus, :active,\n// and disabled options for all buttons\n\n@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {\n color: color-yiq($background);\n @include gradient-bg($background);\n border-color: $border;\n @include box-shadow($btn-box-shadow);\n\n @include hover {\n color: color-yiq($hover-background);\n @include gradient-bg($hover-background);\n border-color: $hover-border;\n }\n\n &:focus,\n &.focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n } @else {\n box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n }\n }\n\n // Disabled comes first so active can properly restyle\n &.disabled,\n &:disabled {\n color: color-yiq($background);\n background-color: $background;\n border-color: $border;\n // Remove CSS gradients if they're enabled\n @if $enable-gradients {\n background-image: none;\n }\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show > &.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n @if $enable-gradients {\n background-image: none; // Remove the gradient for the pressed/active state\n }\n border-color: $active-border;\n\n &:focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows and $btn-active-box-shadow != none {\n box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n } @else {\n box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n }\n }\n }\n}\n\n@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {\n color: $color;\n border-color: $color;\n\n @include hover {\n color: $color-hover;\n background-color: $active-background;\n border-color: $active-border;\n }\n\n &:focus,\n &.focus {\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n\n &.disabled,\n &:disabled {\n color: $color;\n background-color: transparent;\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show > &.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n border-color: $active-border;\n\n &:focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows and $btn-active-box-shadow != none {\n box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);\n } @else {\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n }\n }\n}\n\n// Button sizes\n@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {\n padding: $padding-y $padding-x;\n @include font-size($font-size);\n line-height: $line-height;\n // Manually declare to provide an override to the browser default\n @include border-radius($border-radius, 0);\n}\n", + "@mixin caret-down {\n border-top: $caret-width solid;\n border-right: $caret-width solid transparent;\n border-bottom: 0;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-up {\n border-top: 0;\n border-right: $caret-width solid transparent;\n border-bottom: $caret-width solid;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-right {\n border-top: $caret-width solid transparent;\n border-right: 0;\n border-bottom: $caret-width solid transparent;\n border-left: $caret-width solid;\n}\n\n@mixin caret-left {\n border-top: $caret-width solid transparent;\n border-right: $caret-width solid;\n border-bottom: $caret-width solid transparent;\n}\n\n@mixin caret($direction: down) {\n @if $enable-caret {\n &::after {\n display: inline-block;\n margin-left: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @if $direction == down {\n @include caret-down;\n } @else if $direction == up {\n @include caret-up;\n } @else if $direction == right {\n @include caret-right;\n }\n }\n\n @if $direction == left {\n &::after {\n display: none;\n }\n\n &::before {\n display: inline-block;\n margin-right: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @include caret-left;\n }\n }\n\n &:empty::after {\n margin-left: 0;\n }\n }\n}\n", + "// Pagination\n\n@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {\n .page-link {\n padding: $padding-y $padding-x;\n @include font-size($font-size);\n line-height: $line-height;\n }\n\n .page-item {\n &:first-child {\n .page-link {\n @include border-left-radius($border-radius);\n }\n }\n &:last-child {\n .page-link {\n @include border-right-radius($border-radius);\n }\n }\n }\n}\n", + "// Lists\n\n// Unstyled keeps list items block level, just removes default browser padding and list-style\n@mixin list-unstyled {\n padding-left: 0;\n list-style: none;\n}\n", + "// List Groups\n\n@mixin list-group-item-variant($state, $background, $color) {\n .list-group-item-#{$state} {\n color: $color;\n background-color: $background;\n\n &.list-group-item-action {\n @include hover-focus {\n color: $color;\n background-color: darken($background, 5%);\n }\n\n &.active {\n color: $white;\n background-color: $color;\n border-color: $color;\n }\n }\n }\n}\n", + "// Horizontal dividers\n//\n// Dividers (basically an hr) within dropdowns and nav lists\n\n@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {\n height: 0;\n margin: $margin-y 0;\n overflow: hidden;\n border-top: 1px solid $color;\n}\n", + "// Form control focus state\n//\n// Generate a customized focus state and for any input with the specified color,\n// which defaults to the `$input-focus-border-color` variable.\n//\n// We highly encourage you to not customize the default value, but instead use\n// this to tweak colors on an as-needed basis. This aesthetic change is based on\n// WebKit's default styles, but applicable to a wider range of browsers. Its\n// usability and accessibility should be taken into account with any change.\n//\n// Example usage: change the default blue border and shadow to white for better\n// contrast against a dark gray background.\n@mixin form-control-focus() {\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n outline: 0;\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: $input-box-shadow, $input-focus-box-shadow;\n } @else {\n box-shadow: $input-focus-box-shadow;\n }\n }\n}\n\n\n@mixin form-validation-state($state, $color, $icon) {\n .#{$state}-feedback {\n display: none;\n width: 100%;\n margin-top: $form-feedback-margin-top;\n @include font-size($form-feedback-font-size);\n color: $color;\n }\n\n .#{$state}-tooltip {\n position: absolute;\n top: 100%;\n z-index: 5;\n display: none;\n max-width: 100%; // Contain to parent when possible\n padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;\n margin-top: .1rem;\n @include font-size($form-feedback-tooltip-font-size);\n line-height: $form-feedback-tooltip-line-height;\n color: color-yiq($color);\n background-color: rgba($color, $form-feedback-tooltip-opacity);\n @include border-radius($form-feedback-tooltip-border-radius);\n }\n\n .form-control {\n .was-validated &:#{$state},\n &.is-#{$state} {\n border-color: $color;\n\n @if $enable-validation-icons {\n padding-right: $input-height-inner;\n background-image: $icon;\n background-repeat: no-repeat;\n background-position: center right $input-height-inner-quarter;\n background-size: $input-height-inner-half $input-height-inner-half;\n }\n\n &:focus {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n // stylelint-disable-next-line selector-no-qualifying-type\n textarea.form-control {\n .was-validated &:#{$state},\n &.is-#{$state} {\n @if $enable-validation-icons {\n padding-right: $input-height-inner;\n background-position: top $input-height-inner-quarter right $input-height-inner-quarter;\n }\n }\n }\n\n .custom-select {\n .was-validated &:#{$state},\n &.is-#{$state} {\n border-color: $color;\n\n @if $enable-validation-icons {\n padding-right: $custom-select-feedback-icon-padding-right;\n background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;\n }\n\n &:focus {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n\n .form-control-file {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n .form-check-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .form-check-label {\n color: $color;\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n .custom-control-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .custom-control-label {\n color: $color;\n\n &::before {\n border-color: $color;\n }\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n\n &:checked {\n ~ .custom-control-label::before {\n border-color: lighten($color, 10%);\n @include gradient-bg(lighten($color, 10%));\n }\n }\n\n &:focus {\n ~ .custom-control-label::before {\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n\n &:not(:checked) ~ .custom-control-label::before {\n border-color: $color;\n }\n }\n }\n }\n\n // custom file\n .custom-file-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .custom-file-label {\n border-color: $color;\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n\n &:focus {\n ~ .custom-file-label {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n }\n}\n", + "// Tables\n\n@mixin table-row-variant($state, $background, $border: null) {\n // Exact selectors below required to override `.table-striped` and prevent\n // inheritance to nested tables.\n .table-#{$state} {\n &,\n > th,\n > td {\n background-color: $background;\n }\n\n @if $border != null {\n th,\n td,\n thead th,\n tbody + tbody {\n border-color: $border;\n }\n }\n }\n\n // Hover states for `.table-hover`\n // Note: this is not available for cells or rows within `thead` or `tfoot`.\n .table-hover {\n $hover-background: darken($background, 5%);\n\n .table-#{$state} {\n @include hover {\n background-color: $hover-background;\n\n > td,\n > th {\n background-color: $hover-background;\n }\n }\n }\n }\n}\n", + "// stylelint-disable declaration-no-important\n\n// Contextual backgrounds\n\n@mixin bg-variant($parent, $color) {\n #{$parent} {\n background-color: $color !important;\n }\n a#{$parent},\n button#{$parent} {\n @include hover-focus {\n background-color: darken($color, 10%) !important;\n }\n }\n}\n\n@mixin bg-gradient-variant($parent, $color) {\n #{$parent} {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;\n }\n}\n", + "// stylelint-disable property-blacklist\n// Single side border-radius\n\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n @if $enable-rounded {\n border-radius: $radius;\n }\n @else if $fallback-border-radius != false {\n border-radius: $fallback-border-radius;\n }\n}\n\n@mixin border-top-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n border-top-right-radius: $radius;\n }\n}\n\n@mixin border-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: $radius;\n border-bottom-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: $radius;\n border-bottom-left-radius: $radius;\n }\n}\n\n@mixin border-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n border-bottom-left-radius: $radius;\n }\n}\n\n@mixin border-top-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n }\n}\n\n@mixin border-top-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-right-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-left-radius($radius) {\n @if $enable-rounded {\n border-bottom-left-radius: $radius;\n }\n}\n", + "@mixin box-shadow($shadow...) {\n @if $enable-shadows {\n $result: ();\n\n @if (length($shadow) == 1) {\n // We can pass `@include box-shadow(none);`\n $result: $shadow;\n } @else {\n // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`\n @for $i from 1 through length($shadow) {\n @if nth($shadow, $i) != \"none\" {\n $result: append($result, nth($shadow, $i), \"comma\");\n }\n }\n }\n @if (length($result) > 0) {\n box-shadow: $result;\n }\n }\n}\n", + "// Gradients\n\n@mixin gradient-bg($color) {\n @if $enable-gradients {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;\n } @else {\n background-color: $color;\n }\n}\n\n// Horizontal gradient, from left to right\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n// Vertical gradient, from top to bottom\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {\n background-image: linear-gradient($deg, $start-color, $end-color);\n background-repeat: repeat-x;\n}\n@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {\n background-image: radial-gradient(circle, $inner-color, $outer-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {\n background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);\n}\n", + "// stylelint-disable property-blacklist\n@mixin transition($transition...) {\n @if $enable-transitions {\n @if length($transition) == 0 {\n transition: $transition-base;\n } @else {\n transition: $transition;\n }\n }\n\n @if $enable-prefers-reduced-motion-media-query {\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n", + "@mixin clearfix() {\n &::after {\n display: block;\n clear: both;\n content: \"\";\n }\n}\n", + "// Framework grid generation\n//\n// Used only by Bootstrap to generate the correct number of grid classes given\n// any value of `$grid-columns`.\n\n@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {\n // Common properties for all breakpoints\n %grid-column {\n position: relative;\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n }\n\n @each $breakpoint in map-keys($breakpoints) {\n $infix: breakpoint-infix($breakpoint, $breakpoints);\n\n // Allow columns to stretch full width below their breakpoints\n @for $i from 1 through $columns {\n .col#{$infix}-#{$i} {\n @extend %grid-column;\n }\n }\n .col#{$infix},\n .col#{$infix}-auto {\n @extend %grid-column;\n }\n\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n // Provide basic `.col-{bp}` classes for equal-width flexbox columns\n .col#{$infix} {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n }\n .col#{$infix}-auto {\n flex: 0 0 auto;\n width: auto;\n max-width: 100%; // Reset earlier grid tiers\n }\n\n @for $i from 1 through $columns {\n .col#{$infix}-#{$i} {\n @include make-col($i, $columns);\n }\n }\n\n .order#{$infix}-first { order: -1; }\n\n .order#{$infix}-last { order: $columns + 1; }\n\n @for $i from 0 through $columns {\n .order#{$infix}-#{$i} { order: $i; }\n }\n\n // `$columns - 1` because offsetting by the width of an entire row isn't possible\n @for $i from 0 through ($columns - 1) {\n @if not ($infix == \"\" and $i == 0) { // Avoid emitting useless .offset-0\n .offset#{$infix}-#{$i} {\n @include make-col-offset($i, $columns);\n }\n }\n }\n }\n }\n}\n", + "/// Grid system\n//\n// Generate semantic grid columns with these mixins.\n\n@mixin make-container($gutter: $grid-gutter-width) {\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n margin-right: auto;\n margin-left: auto;\n}\n\n\n// For each breakpoint, define the maximum width of the container in a media query\n@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {\n @each $breakpoint, $container-max-width in $max-widths {\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n max-width: $container-max-width;\n }\n }\n}\n\n@mixin make-row($gutter: $grid-gutter-width) {\n display: flex;\n flex-wrap: wrap;\n margin-right: -$gutter / 2;\n margin-left: -$gutter / 2;\n}\n\n@mixin make-col-ready($gutter: $grid-gutter-width) {\n position: relative;\n // Prevent columns from becoming too narrow when at smaller grid tiers by\n // always setting `width: 100%;`. This works because we use `flex` values\n // later on to override this initial width.\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n}\n\n@mixin make-col($size, $columns: $grid-columns) {\n flex: 0 0 percentage($size / $columns);\n // Add a `max-width` to ensure content within each column does not blow out\n // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari\n // do not appear to require this.\n max-width: percentage($size / $columns);\n}\n\n@mixin make-col-offset($size, $columns: $grid-columns) {\n $num: $size / $columns;\n margin-left: if($num == 0, 0, percentage($num));\n}\n", + "// stylelint-disable declaration-no-important\n\n@mixin float-left {\n float: left !important;\n @include deprecate(\"The `float-left` mixin\", \"v4.3.0\", \"v5\");\n}\n@mixin float-right {\n float: right !important;\n @include deprecate(\"The `float-right` mixin\", \"v4.3.0\", \"v5\");\n}\n@mixin float-none {\n float: none !important;\n @include deprecate(\"The `float-none` mixin\", \"v4.3.0\", \"v5\");\n}\n", + ":root {\n // Custom variable values only support SassScript inside `#{}`.\n @each $color, $value in $colors {\n --#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors {\n --#{$color}: #{$value};\n }\n\n @each $bp, $value in $grid-breakpoints {\n --breakpoint-#{$bp}: #{$value};\n }\n\n // Use `inspect` for lists so that quoted items keep the quotes.\n // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n --font-family-sans-serif: #{inspect($font-family-sans-serif)};\n --font-family-monospace: #{inspect($font-family-monospace)};\n}\n", + "// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n// 2. Change the default font family in all browsers.\n// 3. Correct the line height in all browsers.\n// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.\n// 5. Change the default tap highlight to be completely transparent in iOS.\n\n*,\n*::before,\n*::after {\n box-sizing: border-box; // 1\n}\n\nhtml {\n font-family: sans-serif; // 2\n line-height: 1.15; // 3\n -webkit-text-size-adjust: 100%; // 4\n -webkit-tap-highlight-color: rgba($black, 0); // 5\n}\n\n// Shim for \"new\" HTML5 structural elements to display correctly (IE10, older browsers)\n// TODO: remove in v5\n// stylelint-disable-next-line selector-list-comma-newline-after\narticle, aside, figcaption, figure, footer, header, hgroup, main, nav, section {\n display: block;\n}\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Set an explicit initial text-align value so that we can later use\n// the `inherit` value on things like `` elements.\n\nbody {\n margin: 0; // 1\n font-family: $font-family-base;\n @include font-size($font-size-base);\n font-weight: $font-weight-base;\n line-height: $line-height-base;\n color: $body-color;\n text-align: left; // 3\n background-color: $body-bg; // 2\n}\n\n// Suppress the focus outline on elements that cannot be accessed via keyboard.\n// This prevents an unwanted focus outline from appearing around elements that\n// might still respond to pointer events.\n//\n// Credit: https://github.com/suitcss/base\n[tabindex=\"-1\"]:focus {\n outline: 0 !important;\n}\n\n\n// Content grouping\n//\n// 1. Add the correct box sizing in Firefox.\n// 2. Show the overflow in Edge and IE.\n\nhr {\n box-sizing: content-box; // 1\n height: 0; // 1\n overflow: visible; // 2\n}\n\n\n//\n// Typography\n//\n\n// Remove top margins from headings\n//\n// By default, `

`-`

` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n// stylelint-disable-next-line selector-list-comma-newline-after\nh1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: $headings-margin-bottom;\n}\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `

`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Remove the bottom border in Firefox 39-.\n// 5. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-original-title] { // 1\n text-decoration: underline; // 2\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n border-bottom: 0; // 4\n text-decoration-skip-ink: none; // 5\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // Undo browser default\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari\n}\n\nsmall {\n @include font-size(80%); // Add the correct font size in all browsers\n}\n\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n//\n\nsub,\nsup {\n position: relative;\n @include font-size(75%);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n//\n// Links\n//\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n background-color: transparent; // Remove the gray background on active links in IE 10.\n\n @include hover {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href)\n// which have not been made explicitly keyboard-focusable (without tabindex).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n\n @include hover-focus {\n color: inherit;\n text-decoration: none;\n }\n\n &:focus {\n outline: 0;\n }\n}\n\n\n//\n// Code\n//\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-monospace;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\npre {\n // Remove browser default top margin\n margin-top: 0;\n // Reset browser default of `1em` to use `rem`s\n margin-bottom: 1rem;\n // Don't allow content to break outside\n overflow: auto;\n}\n\n\n//\n// Figures\n//\n\nfigure {\n // Apply a consistent margin strategy (matches our type styles).\n margin: 0 0 1rem;\n}\n\n\n//\n// Images and content\n//\n\nimg {\n vertical-align: middle;\n border-style: none; // Remove the border on images inside links in IE 10-.\n}\n\nsvg {\n // Workaround for the SVG overflow bug in IE10/11 is still required.\n // See https://github.com/twbs/bootstrap/issues/26878\n overflow: hidden;\n vertical-align: middle;\n}\n\n\n//\n// Tables\n//\n\ntable {\n border-collapse: collapse; // Prevent double borders\n}\n\ncaption {\n padding-top: $table-cell-padding;\n padding-bottom: $table-cell-padding;\n color: $table-caption-color;\n text-align: left;\n caption-side: bottom;\n}\n\nth {\n // Matches default `` alignment by inheriting from the ``, or the\n // closest parent with a set `text-align`.\n text-align: inherit;\n}\n\n\n//\n// Forms\n//\n\nlabel {\n // Allow labels to use `margin` for spacing.\n display: inline-block;\n margin-bottom: $label-margin-bottom;\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n//\n// Details at https://github.com/twbs/bootstrap/issues/24093\nbutton {\n // stylelint-disable-next-line property-blacklist\n border-radius: 0;\n}\n\n// Work around a Firefox/IE bug where the transparent `button` background\n// results in a loss of the default `button` focus styles.\n//\n// Credit: https://github.com/suitcss/base/\nbutton:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0; // Remove the margin in Firefox and Safari\n font-family: inherit;\n @include font-size(inherit);\n line-height: inherit;\n}\n\nbutton,\ninput {\n overflow: visible; // Show the overflow in Edge\n}\n\nbutton,\nselect {\n text-transform: none; // Remove the inheritance of text transform in Firefox\n}\n\n// Remove the inheritance of word-wrap in Safari.\n//\n// Details at https://github.com/twbs/bootstrap/issues/24990\nselect {\n word-wrap: normal;\n}\n\n\n// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n// controls in Android 4.\n// 2. Correct the inability to style clickable types in iOS and Safari.\nbutton,\n[type=\"button\"], // 1\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; // 2\n}\n\n// Opinionated: add \"hand\" cursor to non-disabled button elements.\n@if $enable-pointer-cursor-for-buttons {\n button,\n [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n &:not(:disabled) {\n cursor: pointer;\n }\n }\n}\n\n// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n padding: 0;\n border-style: none;\n}\n\ninput[type=\"radio\"],\ninput[type=\"checkbox\"] {\n box-sizing: border-box; // 1. Add the correct box sizing in IE 10-\n padding: 0; // 2. Remove the padding in IE 10-\n}\n\n\ninput[type=\"date\"],\ninput[type=\"time\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"] {\n // Remove the default appearance of temporal inputs to avoid a Mobile Safari\n // bug where setting a custom line-height prevents text from being vertically\n // centered within the input.\n // See https://bugs.webkit.org/show_bug.cgi?id=139848\n // and https://github.com/twbs/bootstrap/issues/11266\n -webkit-appearance: listbox;\n}\n\ntextarea {\n overflow: auto; // Remove the default vertical scrollbar in IE.\n // Textareas should really only resize vertically so they don't break their (horizontal) containers.\n resize: vertical;\n}\n\nfieldset {\n // Browsers set a default `min-width: min-content;` on fieldsets,\n // unlike e.g. `

`s, which have `min-width: 0;` by default.\n // So we reset that to ensure fieldsets behave more like a standard block element.\n // See https://github.com/twbs/bootstrap/issues/12359\n // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements\n min-width: 0;\n // Reset the default outline behavior of fieldsets so they don't affect page layout.\n padding: 0;\n margin: 0;\n border: 0;\n}\n\n// 1. Correct the text wrapping in Edge and IE.\n// 2. Correct the color inheritance from `fieldset` elements in IE.\nlegend {\n display: block;\n width: 100%;\n max-width: 100%; // 1\n padding: 0;\n margin-bottom: .5rem;\n @include font-size(1.5rem);\n line-height: inherit;\n color: inherit; // 2\n white-space: normal; // 1\n}\n\nprogress {\n vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.\n}\n\n// Correct the cursor style of increment and decrement buttons in Chrome.\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n // This overrides the extra rounded corners on search inputs in iOS so that our\n // `.form-control` class can properly style them. Note that this cannot simply\n // be added to `.form-control` as it's not specific enough. For details, see\n // https://github.com/twbs/bootstrap/issues/11586.\n outline-offset: -2px; // 2. Correct the outline style in Safari.\n -webkit-appearance: none;\n}\n\n//\n// Remove the inner padding in Chrome and Safari on macOS.\n//\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n//\n// 1. Correct the inability to style clickable types in iOS and Safari.\n// 2. Change font properties to `inherit` in Safari.\n//\n\n::-webkit-file-upload-button {\n font: inherit; // 2\n -webkit-appearance: button; // 1\n}\n\n//\n// Correct element displays\n//\n\noutput {\n display: inline-block;\n}\n\nsummary {\n display: list-item; // Add the correct display in all browsers\n cursor: pointer;\n}\n\ntemplate {\n display: none; // Add the correct display in IE\n}\n\n// Always hide an element with the `hidden` HTML attribute (from PureCSS).\n// Needed for proper display in IE 10-.\n[hidden] {\n display: none !important;\n}\n", + "// stylelint-disable declaration-no-important, selector-list-comma-newline-after\n\n//\n// Headings\n//\n\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6 {\n margin-bottom: $headings-margin-bottom;\n font-family: $headings-font-family;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n color: $headings-color;\n}\n\nh1, .h1 { @include font-size($h1-font-size); }\nh2, .h2 { @include font-size($h2-font-size); }\nh3, .h3 { @include font-size($h3-font-size); }\nh4, .h4 { @include font-size($h4-font-size); }\nh5, .h5 { @include font-size($h5-font-size); }\nh6, .h6 { @include font-size($h6-font-size); }\n\n.lead {\n @include font-size($lead-font-size);\n font-weight: $lead-font-weight;\n}\n\n// Type display classes\n.display-1 {\n @include font-size($display1-size);\n font-weight: $display1-weight;\n line-height: $display-line-height;\n}\n.display-2 {\n @include font-size($display2-size);\n font-weight: $display2-weight;\n line-height: $display-line-height;\n}\n.display-3 {\n @include font-size($display3-size);\n font-weight: $display3-weight;\n line-height: $display-line-height;\n}\n.display-4 {\n @include font-size($display4-size);\n font-weight: $display4-weight;\n line-height: $display-line-height;\n}\n\n\n//\n// Horizontal rules\n//\n\nhr {\n margin-top: $hr-margin-y;\n margin-bottom: $hr-margin-y;\n border: 0;\n border-top: $hr-border-width solid $hr-border-color;\n}\n\n\n//\n// Emphasis\n//\n\nsmall,\n.small {\n @include font-size($small-font-size);\n font-weight: $font-weight-normal;\n}\n\nmark,\n.mark {\n padding: $mark-padding;\n background-color: $mark-bg;\n}\n\n\n//\n// Lists\n//\n\n.list-unstyled {\n @include list-unstyled;\n}\n\n// Inline turns list items into inline-block\n.list-inline {\n @include list-unstyled;\n}\n.list-inline-item {\n display: inline-block;\n\n &:not(:last-child) {\n margin-right: $list-inline-padding;\n }\n}\n\n\n//\n// Misc\n//\n\n// Builds on `abbr`\n.initialism {\n @include font-size(90%);\n text-transform: uppercase;\n}\n\n// Blockquotes\n.blockquote {\n margin-bottom: $spacer;\n @include font-size($blockquote-font-size);\n}\n\n.blockquote-footer {\n display: block;\n @include font-size($blockquote-small-font-size);\n color: $blockquote-small-color;\n\n &::before {\n content: \"\\2014\\00A0\"; // em dash, nbsp\n }\n}\n", + "// Responsive images (ensure images don't scale beyond their parents)\n//\n// This is purposefully opt-in via an explicit class rather than being the default for all ``s.\n// We previously tried the \"images are responsive by default\" approach in Bootstrap v2,\n// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)\n// which weren't expecting the images within themselves to be involuntarily resized.\n// See also https://github.com/twbs/bootstrap/issues/18178\n.img-fluid {\n @include img-fluid;\n}\n\n\n// Image thumbnails\n.img-thumbnail {\n padding: $thumbnail-padding;\n background-color: $thumbnail-bg;\n border: $thumbnail-border-width solid $thumbnail-border-color;\n @include border-radius($thumbnail-border-radius);\n @include box-shadow($thumbnail-box-shadow);\n\n // Keep them at most 100% wide\n @include img-fluid;\n}\n\n//\n// Figures\n//\n\n.figure {\n // Ensures the caption's text aligns with the image.\n display: inline-block;\n}\n\n.figure-img {\n margin-bottom: $spacer / 2;\n line-height: 1;\n}\n\n.figure-caption {\n @include font-size($figure-caption-font-size);\n color: $figure-caption-color;\n}\n", + "// Inline code\ncode {\n @include font-size($code-font-size);\n color: $code-color;\n word-break: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\n// User input typically entered via keyboard\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm);\n @include box-shadow($kbd-box-shadow);\n\n kbd {\n padding: 0;\n @include font-size(100%);\n font-weight: $nested-kbd-font-weight;\n @include box-shadow(none);\n }\n}\n\n// Blocks of code\npre {\n display: block;\n @include font-size($code-font-size);\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\n// Enable scrollable blocks of code\n.pre-scrollable {\n max-height: $pre-scrollable-max-height;\n overflow-y: scroll;\n}\n", + "// Container widths\n//\n// Set the container width, and override it for fixed navbars in media queries.\n\n@if $enable-grid-classes {\n .container {\n @include make-container();\n @include make-container-max-widths();\n }\n}\n\n// Fluid container\n//\n// Utilizes the mixin meant for fixed width containers, but with 100% width for\n// fluid, full width layouts.\n\n@if $enable-grid-classes {\n .container-fluid {\n @include make-container();\n }\n}\n\n// Row\n//\n// Rows contain and clear the floats of your columns.\n\n@if $enable-grid-classes {\n .row {\n @include make-row();\n }\n\n // Remove the negative margin from default .row, then the horizontal padding\n // from all immediate children columns (to prevent runaway style inheritance).\n .no-gutters {\n margin-right: 0;\n margin-left: 0;\n\n > .col,\n > [class*=\"col-\"] {\n padding-right: 0;\n padding-left: 0;\n }\n }\n}\n\n// Columns\n//\n// Common styles for small and large grid columns\n\n@if $enable-grid-classes {\n @include make-grid-columns();\n}\n", + "//\n// Basic Bootstrap table\n//\n\n.table {\n width: 100%;\n margin-bottom: $spacer;\n color: $table-color;\n background-color: $table-bg; // Reset for nesting within parents with `background-color`.\n\n th,\n td {\n padding: $table-cell-padding;\n vertical-align: top;\n border-top: $table-border-width solid $table-border-color;\n }\n\n thead th {\n vertical-align: bottom;\n border-bottom: (2 * $table-border-width) solid $table-border-color;\n }\n\n tbody + tbody {\n border-top: (2 * $table-border-width) solid $table-border-color;\n }\n}\n\n\n//\n// Condensed table w/ half padding\n//\n\n.table-sm {\n th,\n td {\n padding: $table-cell-padding-sm;\n }\n}\n\n\n// Border versions\n//\n// Add or remove borders all around the table and between all the columns.\n\n.table-bordered {\n border: $table-border-width solid $table-border-color;\n\n th,\n td {\n border: $table-border-width solid $table-border-color;\n }\n\n thead {\n th,\n td {\n border-bottom-width: 2 * $table-border-width;\n }\n }\n}\n\n.table-borderless {\n th,\n td,\n thead th,\n tbody + tbody {\n border: 0;\n }\n}\n\n// Zebra-striping\n//\n// Default zebra-stripe styles (alternating gray and transparent backgrounds)\n\n.table-striped {\n tbody tr:nth-of-type(#{$table-striped-order}) {\n background-color: $table-accent-bg;\n }\n}\n\n\n// Hover effect\n//\n// Placed here since it has to come after the potential zebra striping\n\n.table-hover {\n tbody tr {\n @include hover {\n color: $table-hover-color;\n background-color: $table-hover-bg;\n }\n }\n}\n\n\n// Table backgrounds\n//\n// Exact selectors below required to override `.table-striped` and prevent\n// inheritance to nested tables.\n\n@each $color, $value in $theme-colors {\n @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));\n}\n\n@include table-row-variant(active, $table-active-bg);\n\n\n// Dark styles\n//\n// Same table markup, but inverted color scheme: dark background and light text.\n\n// stylelint-disable-next-line no-duplicate-selectors\n.table {\n .thead-dark {\n th {\n color: $table-dark-color;\n background-color: $table-dark-bg;\n border-color: $table-dark-border-color;\n }\n }\n\n .thead-light {\n th {\n color: $table-head-color;\n background-color: $table-head-bg;\n border-color: $table-border-color;\n }\n }\n}\n\n.table-dark {\n color: $table-dark-color;\n background-color: $table-dark-bg;\n\n th,\n td,\n thead th {\n border-color: $table-dark-border-color;\n }\n\n &.table-bordered {\n border: 0;\n }\n\n &.table-striped {\n tbody tr:nth-of-type(odd) {\n background-color: $table-dark-accent-bg;\n }\n }\n\n &.table-hover {\n tbody tr {\n @include hover {\n color: $table-dark-hover-color;\n background-color: $table-dark-hover-bg;\n }\n }\n }\n}\n\n\n// Responsive tables\n//\n// Generate series of `.table-responsive-*` classes for configuring the screen\n// size of where your table will overflow.\n\n.table-responsive {\n @each $breakpoint in map-keys($grid-breakpoints) {\n $next: breakpoint-next($breakpoint, $grid-breakpoints);\n $infix: breakpoint-infix($next, $grid-breakpoints);\n\n &#{$infix} {\n @include media-breakpoint-down($breakpoint) {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n // Prevent double border on horizontal scroll due to use of `display: block;`\n > .table-bordered {\n border: 0;\n }\n }\n }\n }\n}\n", + "// stylelint-disable selector-no-qualifying-type\n\n//\n// Textual form controls\n//\n\n.form-control {\n display: block;\n width: 100%;\n height: $input-height;\n padding: $input-padding-y $input-padding-x;\n font-family: $input-font-family;\n @include font-size($input-font-size);\n font-weight: $input-font-weight;\n line-height: $input-line-height;\n color: $input-color;\n background-color: $input-bg;\n background-clip: padding-box;\n border: $input-border-width solid $input-border-color;\n\n // Note: This has no effect on `s in CSS.\n @include border-radius($input-border-radius, 0);\n\n @include box-shadow($input-box-shadow);\n @include transition($input-transition);\n\n // Unstyle the caret on ` receives focus\n // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to\n // match the appearance of the native widget.\n // See https://github.com/twbs/bootstrap/issues/19398.\n color: $input-color;\n background-color: $input-bg;\n }\n}\n\n// Make file inputs better match text inputs by forcing them to new lines.\n.form-control-file,\n.form-control-range {\n display: block;\n width: 100%;\n}\n\n\n//\n// Labels\n//\n\n// For use with horizontal and inline forms, when you need the label (or legend)\n// text to align with the form controls.\n.col-form-label {\n padding-top: calc(#{$input-padding-y} + #{$input-border-width});\n padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});\n margin-bottom: 0; // Override the `
+
<div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <i class="tim-icons icon-simple-remove"></i>
+  </button>
+</div>
+ +

If you want to see more examples and properties please check the official Bootstrap Documentation.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/badge.html b/docs/1.0/components/badge.html new file mode 100644 index 0000000..5de1342 --- /dev/null +++ b/docs/1.0/components/badge.html @@ -0,0 +1,974 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Badges

+

Documentation and examples for badges, our small count and labeling component.

+

Example

+ +

Badges can be used as part of links or buttons to provide a counter.

+ +
+ +
+
<button type="button" class="btn btn-primary">
+  Notifications <span class="badge badge-default">4</span>
+</button>
+ +

Contextual variations

+ +

Add any of the below mentioned modifier classes to change the appearance of a badge.

+ +
+Primary +Info +Success +Danger +Warning +Default +
+
<span class="badge badge-primary">Primary</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-danger">Danger</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-default">Default</span>
+ +

Pill badges

+ +

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

+ +
+Primary +Info +Success +Danger +Warning +Default +
+
<span class="badge badge-pill badge-primary">Primary</span>
+<span class="badge badge-pill badge-info">Info</span>
+<span class="badge badge-pill badge-success">Success</span>
+<span class="badge badge-pill badge-danger">Danger</span>
+<span class="badge badge-pill badge-warning">Warning</span>
+<span class="badge badge-pill badge-default">Default</span>
+ + + +

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

+ + +
<a href="#" class="badge badge-primary">Primary</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-danger">Danger</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-default">Default</a>
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/breadcrumb.html b/docs/1.0/components/breadcrumb.html new file mode 100644 index 0000000..a61bc20 --- /dev/null +++ b/docs/1.0/components/breadcrumb.html @@ -0,0 +1,942 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + +
+

Breadcrumb

+

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.

+

Overview

+ +

Separators are automatically added in CSS through ::before and content.

+ +
+ + + + + +
+
<nav aria-label="breadcrumb" role="navigation">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item active" aria-current="page">Home</li>
+  </ol>
+</nav>
+
+<nav aria-label="breadcrumb" role="navigation">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Library</li>
+  </ol>
+</nav>
+
+<nav aria-label="breadcrumb" role="navigation">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    <li class="breadcrumb-item"><a href="#">Library</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Data</li>
+  </ol>
+</nav>
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/buttons.html b/docs/1.0/components/buttons.html new file mode 100644 index 0000000..c42b08b --- /dev/null +++ b/docs/1.0/components/buttons.html @@ -0,0 +1,1005 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Buttons

+

Use Black Dashboard's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

+

Examples

+ +

Black Dashboard has changed the predefined button styles from Bootstrap, each serving its own semantic purpose, with a few extras thrown in for more control.

+ +
+ + + + + + +
+
<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-info">Info</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-warning">Warning</button>
+<button type="button" class="btn btn-default">Default</button>
+ +

Animation on hover

+ +
+ + + + + + +
+
<button class="btn btn-primary animation-on-hover" type="button">Primary</button>
+<button class="btn btn-info animation-on-hover" type="button">Info</button>
+<button class="btn btn-success animation-on-hover" type="button">Success</button>
+<button class="btn btn-danger animation-on-hover" type="button">Danger</button>
+<button class="btn btn-warning animation-on-hover" type="button">Warning</button>
+<button class="btn btn-default animation-on-hover" type="button">Default</button>
+ +

Style buttons

+ +
+ + + + + + +
+
<button class="btn btn-primary">Default</button>
+<button class="btn btn-primary btn-round">Round</button>
+<button class="btn btn-primary btn-round">
+  <i class="tim-icons icon-heart-2"></i> With Icon
+</button>
+<button class="btn btn-primary btn-fab btn-icon btn-round">
+  <i class="tim-icons icon-heart-2"></i>
+</button>
+<button class="btn btn-primary btn-simple">Simple</button>
+<button class="btn btn-primary btn-link">Link</button>
+ +

Sizes

+ +

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

+ +
+ + + +
+
<button class="btn btn-primary btn-sm">Small</button>
+<button class="btn btn-primary">Regular</button>
+<button class="btn btn-primary btn-lg">Large</button>
+ +

Disabled state

+ +

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

+ +
+ + +
+
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
+<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
+ +

Disabled buttons using the <a> element behave a bit different:

+ +
    +
  • <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
  • +
  • Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
  • +
+ + +
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
+<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
+ +

If you want to see more examples and properties please check the official Bootstrap Documentation.

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/card.html b/docs/1.0/components/card.html new file mode 100644 index 0000000..3e8d984 --- /dev/null +++ b/docs/1.0/components/card.html @@ -0,0 +1,1312 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Cards

+

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

+

Example

+ +

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

+ +
+
+ Card image cap +
+

Card title

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
+
<div class="card" style="width: 20rem;">
+  <img class="card-img-top" src="..." alt="Card image cap">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+ +

Content types

+ +

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

+ +

Body

+ +

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

+ +
+
+
+ This is some text within a card body. +
+
+
+
<div class="card">
+  <div class="card-body">
+    This is some text within a card body.
+  </div>
+</div>
+ + + +

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

+ +

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

+ +
+
+
+

Card title

+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+
+
<div class="card" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+ +

Images

+ +

.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

+ +
+
+ Card image cap +
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
<div class="card" style="width: 20rem;">
+  <img class="card-img-top" src="..." alt="Card image cap">
+  <div class="card-body">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+ +

List groups

+ +

Create lists of content in a card with a flush list group.

+ +
+
+
    +
  • Cras justo odio
  • +
  • Dapibus ac facilisis in
  • +
  • Vestibulum at eros
  • +
+
+
+
<div class="card" style="width: 20rem;">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+</div>
+ +
+
+
+ Featured +
+
    +
  • Cras justo odio
  • +
  • Dapibus ac facilisis in
  • +
  • Vestibulum at eros
  • +
+
+
+
<div class="card card-nav-tabs" style="width: 20rem;">
+  <div class="card-header">
+    Featured  
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+</div>
+ + + +

Add an optional header and/or footer within a card.

+ +
+
+
+ Featured +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
<div class="card card-nav-tabs">
+  <div class="card-header card-header-warning">
+    Featured
+  </div>
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+ +

Card headers can be styled by adding .card-header to <h*> elements.

+ +
+
+

Featured

+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
<div class="card card-nav-tabs">
+  <h4 class="card-header card-header-info">Featured</h4>
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+ +
+
+
+ Quote +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+
+
+
+
<div class="card card-nav-tabs">
+  <div class="card-header card-header-success">
+    Quote
+  </div>
+  <div class="card-body">
+    <blockquote class="blockquote mb-0">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
+</div>
+ +
+
+
+ Featured +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+ +
+
+
<div class="card card-nav-tabs text-center">
+  <div class="card-header card-header-primary">
+    Featured
+  </div>
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+  <div class="card-footer text-muted">
+    2 days ago
+  </div>
+</div>
+ +

Text alignment

+ +

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

+ +
+
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+ +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+ +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
<div class="card" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+
+<div class="card text-center" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+
+<div class="card text-right" style="width: 20rem;">
+  <div class="card-body">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+ +

Images

+ +

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

+ +

Image caps

+ +

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

+ +
+
+ Card image cap +
+

Card title

+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
+

Card title

+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+ Card image cap +
+
+
<div class="card mb-3">
+  <img class="card-img-top" src="..." alt="Card image cap">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+</div>
+<div class="card">
+  <div class="card-body">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+  <img class="card-img-bottom" src="..." alt="Card image cap">
+</div>
+ +

Image overlays

+ +

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

+ +
+
+ Card image +
+

Card title

+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+

Last updated 3 mins ago

+
+
+
+
<div class="card bg-dark text-white">
+  <img class="card-img" src="..." alt="Card image">
+  <div class="card-img-overlay">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text">Last updated 3 mins ago</p>
+  </div>
+</div>
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/collapse.html b/docs/1.0/components/collapse.html new file mode 100644 index 0000000..395a1a1 --- /dev/null +++ b/docs/1.0/components/collapse.html @@ -0,0 +1,1041 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Collapse

+

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

+

Example

+ +

Click the buttons below to show and hide another element via class changes:

+ +
    +
  • .collapse hides content
  • +
  • .collapsing is applied during transitions
  • +
  • .collapse.show shows content
  • +
+ +

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

+ +
+

+ + +

+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. +
+
+
+
<p>
+  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+    Link with href
+  </a>
+  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+    Button with data-target
+  </button>
+</p>
+<div class="collapse" id="collapseExample">
+  <div class="card card-body">
+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+  </div>
+</div>
+ +

Accordion example

+ +

Using the card component, you can extend the default collapse behavior to create an accordion.

+ +
+
+
+ + +
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+ +
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+ +
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+
+
<div id="accordion" role="tablist" aria-multiselectable="true" class="card-collapse">
+  <div class="card card-plain">
+    <div class="card-header" role="tab" id="headingOne">
+        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+          Collapsible Group Item #1
+
+            <i class="tim-icons icon-minimal-down"></i>
+        </a>
+    </div>
+
+    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
+      <div class="card-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+      </div>
+    </div>
+  </div>
+  <div class="card card-plain">
+    <div class="card-header" role="tab" id="headingTwo">
+        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            Collapsible Group Item #2
+
+            <i class="tim-icons icon-minimal-down"></i>
+        </a>
+    </div>
+    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
+      <div class="card-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+      </div>
+    </div>
+  </div>
+  <div class="card card-plain">
+    <div class="card-header" role="tab" id="headingThree">
+        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+            Collapsible Group Item #3
+
+            <i class="tim-icons icon-minimal-down"></i>
+        </a>
+    </div>
+    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
+      <div class="card-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+      </div>
+    </div>
+  </div>
+</div>
+ +

If you want to see more examples and properties please check the official Bootstrap Documentation.

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/dropdowns.html b/docs/1.0/components/dropdowns.html new file mode 100644 index 0000000..f5bf1c2 --- /dev/null +++ b/docs/1.0/components/dropdowns.html @@ -0,0 +1,1259 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Dropdowns

+

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

+

Examples

+ +

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

+ +

Single button dropdowns

+ +

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

+ +
+ +
+
<div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Dropdown button
+  </button>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
+</div>
+ +

And with <a> elements:

+ + +
<div class="dropdown show">
+  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Dropdown link
+  </a>
+
+  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
+</div>
+ +

The best part is you can do this with any button variant, too:

+ + + +
<!-- Example single danger button -->
+<div class="btn-group">
+  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Action
+  </button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+ +

Split button dropdowns

+ +

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

+ +

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.

+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
<!-- Example split danger button -->
+<div class="btn-group">
+  <button type="button" class="btn btn-danger">Action</button>
+  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+ +

Dropup variation

+ +

Trigger dropdown menus above elements by adding .dropup to the parent element.

+ +
+ + +
+ + + +
+
+ +
<!-- Default dropup button -->
+<div class="btn-group dropup">
+  <button type="button" class="btn btn-secondary">Dropup</button>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <div class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </div>
+</div>
+
+<!-- Split dropup button -->
+<div class="btn-group dropup">
+  <button type="button" class="btn btn-secondary">
+    Split dropup
+  </button>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <div class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </div>
+</div>
+ +

Colors

+ +

Set for the dropdown-menu’s <div> .dropdown-black class to change the drodown background’s color.

+ +
+
+
+ +
+
+ +
+
+
+ +
<div class="dropdown show">
+    <div class="dropdown-menu">
+    ...
+    </div>
+</div>
+
+<div class="dropdown show">
+    <div class="dropdown-menu dropdown-black">
+    ...
+    </div>
+</div>
+ +

If you want to see more examples and properties please check the official Bootstrap Documentation.

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/forms.html b/docs/1.0/components/forms.html new file mode 100644 index 0000000..248ed2f --- /dev/null +++ b/docs/1.0/components/forms.html @@ -0,0 +1,1631 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Forms

+

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

+

Overview

+ +

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

+ +

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

+ +
+
+
+
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ +
+ + +
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <form>
+      <div class="form-group">
+        <label for="exampleInputEmail1">Email address</label>
+        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1">Password</label>
+        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+      </div>
+      <div class="form-check">
+          <label class="form-check-label">
+              <input class="form-check-input" type="checkbox" value="">
+              Option one is this
+              <span class="form-check-sign">
+                  <span class="check"></span>
+              </span>
+          </label>
+      </div>
+
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+  </div>
+</div>
+ +

Form controls

+ +

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

+ +

Be sure to explore our custom forms to further style <select>s.

+ +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <form>
+      <div class="form-group">
+        <label for="exampleFormControlInput1">Email address</label>
+        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
+      </div>
+      <div class="form-group">
+        <label for="exampleFormControlSelect1">Example select</label>
+        <select class="form-control" id="exampleFormControlSelect1">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="exampleFormControlSelect2">Example multiple select</label>
+        <select multiple class="form-control" id="exampleFormControlSelect2">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="exampleFormControlTextarea1">Example textarea</label>
+        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+      </div>
+    </form>
+  </div>
+</div>
+ +

Examples

+ +
+
+
+
+ +
+
+
+
+
<div class="card">
+    <div class="card-body">
+      <div class="form-group has-success">
+        <input type="text" value="Success" class="form-control form-control-success" />
+      </div>
+    </div>
+  </div>
+ +
+
+
+
+ +
+
+
+
+
<div class="card">
+    <div class="card-body">
+      <div class="form-group has-danger">
+          <input type="email" value="Error Input" class="form-control form-control-danger" />
+      </div>
+    </div>
+  </div>
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
<div class="card">
+    <div class="card-body">
+      <div class="input-group">
+          <div class="input-group-prepend">
+            <div class="input-group-text">
+              <i class="tim-icons icon-single-02"></i>
+           </div>      
+         </div>
+        <input type="text" class="form-control" placeholder="With Nucleo Icons">
+      </div>
+    </div>
+  </div>
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
<div class="card">
+    <div class="card-body">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <div class="input-group-text">
+            <i class="fab fa-dribbble"></i>
+          </div>      
+        </div>
+        <input type="text" class="form-control" placeholder="With Font Awesome Icons">
+      </div>
+    </div>
+  </div>
+ +

Checkboxes and radios

+ +

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

+ +

Disabled checkboxes and radios are supported, but to provide a not-allowed cursor on hover of the parent <label>, you’ll need to add the .disabled class to the parent .form-check. The disabled class will also lighten the text color to help indicate the input’s state.

+ +

Default (stacked)

+ +

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

+ +
+
+
+
+ +
+ +
+ +
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <div class="form-check">
+        <label class="form-check-label">
+            <input class="form-check-input" type="checkbox" value="">
+            Option one is this and that&mdash;be sure to include why it's great
+            <span class="form-check-sign">
+                <span class="check"></span>
+            </span>
+        </label>
+    </div>
+
+    <div class="form-check disabled">
+        <label class="form-check-label">
+            <input class="form-check-input" type="checkbox" value="" disabled>
+            Option two is disabled
+            <span class="form-check-sign">
+                <span class="check"></span>
+            </span>
+        </label>
+    </div>
+  </div>
+</div>
+ +
+
+
+
+ +
+
+ +
+ +
+ +
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <div class="form-check form-check-radio">
+        <label class="form-check-label">
+            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
+            Radio is off
+            <span class="form-check-sign"></span>
+        </label>
+    </div>
+    <div class="form-check form-check-radio">
+        <label class="form-check-label">
+            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked>
+            Radio is on
+            <span class="form-check-sign"></span>
+        </label>
+    </div>
+
+    <div class="form-check form-check-radio disabled">
+        <label class="form-check-label">
+            <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled>
+            Disabled radio is off
+            <span class="form-check-sign"></span>
+        </label>
+    </div>
+  </div>
+</div>
+ +

Inline

+ +

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <div class="form-check form-check-inline">
+      <label class="form-check-label">
+        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
+        <span class="form-check-sign"></span>
+      </label>
+    </div>
+    <div class="form-check form-check-inline">
+      <label class="form-check-label">
+        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
+        <span class="form-check-sign"></span>
+      </label>
+    </div>
+    <div class="form-check form-check-inline disabled">
+      <label class="form-check-label">
+        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
+        <span class="form-check-sign"></span>
+      </label>
+    </div>
+  </div>
+</div>
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <div class="form-check form-check-radio form-check-inline">
+      <label class="form-check-label">
+        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+        <span class="form-check-sign"></span>
+      </label>
+    </div>
+    <div class="form-check form-check-radio form-check-inline">
+      <label class="form-check-label">
+        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+        <span class="form-check-sign"></span>
+      </label>
+    </div>
+    <div class="form-check form-check-radio form-check-inline disabled">
+      <label class="form-check-label">
+        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
+        <span class="form-check-sign"></span>
+      </label>
+    </div>
+  </div>
+</div>
+ +

Layout

+ +

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

+ +

Form grid

+ +

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <form>
+      <div class="row">
+        <div class="col">
+          <input type="text" class="form-control" placeholder="First name">
+        </div>
+        <div class="col">
+          <input type="text" class="form-control" placeholder="Last name">
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+ +

Form row

+ +

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <form>
+      <div class="form-row">
+        <div class="col">
+          <input type="text" class="form-control" placeholder="First name">
+        </div>
+        <div class="col">
+          <input type="text" class="form-control" placeholder="Last name">
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+ +

More complex layouts can also be created with the grid system.

+ +
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+ +
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <form>
+      <div class="form-row">
+        <div class="form-group col-md-6">
+          <label for="inputEmail4">Email</label>
+          <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
+        </div>
+        <div class="form-group col-md-6">
+          <label for="inputPassword4">Password</label>
+          <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="inputAddress">Address</label>
+        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+      </div>
+      <div class="form-group">
+        <label for="inputAddress2">Address 2</label>
+        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+      </div>
+      <div class="form-row">
+        <div class="form-group col-md-6">
+          <label for="inputCity">City</label>
+          <input type="text" class="form-control" id="inputCity">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputState">State</label>
+          <select id="inputState" class="form-control">
+            <option selected>Choose...</option>
+            <option>...</option>
+          </select>
+        </div>
+        <div class="form-group col-md-2">
+          <label for="inputZip">Zip</label>
+          <input type="text" class="form-control" id="inputZip">
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="form-check">
+          <label class="form-check-label">
+              <input class="form-check-input" type="checkbox" value="">
+              Check me out
+              <span class="form-check-sign">
+                <span class="check"></span>
+              </span>
+          </label>
+        </div>
+      </div>
+      <button type="submit" class="btn btn-primary">Sign in</button>
+    </form>
+  </div>
+</div>
+ +

Disabled forms

+ +

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

+ +
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+ +

Add the disabled attribute to a <fieldset> to disable all the controls within.

+ +
+
+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+
+
+
+
+
<div class="card">
+  <div class="card-body">
+    <form>
+      <fieldset disabled>
+        <div class="form-group">
+          <label for="disabledTextInput">Disabled input</label>
+          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+        </div>
+        <div class="form-group">
+          <label for="disabledSelect">Disabled select menu</label>
+          <select id="disabledSelect" class="form-control">
+            <option>Disabled select</option>
+          </select>
+        </div>
+        <div class="form-check">
+          <label class="form-check-label">
+              <input class="form-check-input" type="checkbox" value="">
+              Can't check me out
+              <span class="form-check-sign">
+                <span class="check"></span>
+              </span>
+          </label>
+        </div>
+        <button type="submit" class="btn btn-primary">Submit</button>
+      </fieldset>
+    </form>
+  </div>
+</div>
+ +
+

Caveat with anchors

+ +

By default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Opera 18 and below, or in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.

+
+ +
+

Cross-browser compatibility

+ +

While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

+
+ +

If you want to see more examples and properties please check the official Bootstrap Documentation.

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/google-maps.html b/docs/1.0/components/google-maps.html new file mode 100644 index 0000000..79345e7 --- /dev/null +++ b/docs/1.0/components/google-maps.html @@ -0,0 +1,906 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + +
+
    +
+
+ + +
+

How to set up Google API Keys

+

+
    +
  1. Go to https://developers.google.com/maps/documentation/javascript/get-api-key
  2. +
  3. Scroll to the “Get an API key” Title and press “Get a Key” Button
  4. +
  5. Choose a name for your project then press on Create and Enable API
  6. +
  7. Get the Key and place it in your project where is this script:<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"><script>
  8. +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/modal.html b/docs/1.0/components/modal.html new file mode 100644 index 0000000..62b2f29 --- /dev/null +++ b/docs/1.0/components/modal.html @@ -0,0 +1,1371 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Modal

+

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

+

Examples

+ + + +

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

+ +
+ +
+ +
<div class="modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+          <i class="tim-icons icon-simple-remove"></i>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Modal body text goes here.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary">Save changes</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+ +

Live demo

+ +

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

+ + + +
+ +
+ +
<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+  Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+          <i class="tim-icons icon-simple-remove"></i>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+ +

Scrolling long content

+ +

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

+ + + +
+ +
+ +
<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
+  Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+          <i class="tim-icons icon-simple-remove"></i>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+ +

Tooltips and popovers

+ +

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

+ + + +
+ +
+ +
<div class="modal-body">
+  <h5>Popover in a modal</h5>
+  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
+  <hr>
+  <h5>Tooltips in a modal</h5>
+  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
+</div>
+ +

Embedding YouTube videos

+ +

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.

+ +

Optional sizes

+ +

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

+ +
+ + +
+ +
<!-- Large modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
+
+<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      ...
+    </div>
+  </div>
+</div>
+
+<!-- Small modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
+
+<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      ...
+    </div>
+  </div>
+</div>
+ + + + + +

Colors

+ +

Set for the modal’s <div> .modal-black class to change the modal background’s color.

+ +
+
+
+ +
+ +
+ +
+
+
+ +
<div class="modal show">
+  ...
+</div>
+
+<div class="modal modal-black show">
+  ...
+</div>
+ +

Usage

+ +

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

+ +

Via data attributes

+ +

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

+ +
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
+ +

Via JavaScript

+ +

Call a modal with id myModal with a single line of JavaScript:

+ +
$('#myModal').modal(options)
+ +

Options

+ +

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
backdropboolean or the string 'static'trueIncludes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboardbooleantrueCloses the modal when escape key is pressed
focusbooleantruePuts the focus on the modal when initialized.
showbooleantrueShows the modal when initialized.
+
+ +

If you want to see more examples and properties please check the official Bootstrap Documentation.

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/navbar.html b/docs/1.0/components/navbar.html new file mode 100644 index 0000000..a734fa0 --- /dev/null +++ b/docs/1.0/components/navbar.html @@ -0,0 +1,1788 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Navbar

+

Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

+

How it works

+ +

Here’s what you need to know before getting started with the navbar:

+ +
    +
  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  • +
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • +
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  • +
  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
  • +
  • Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.
  • +
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
  • +
+ +

Read on for an example and list of supported sub-components.

+ + + +

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

+ +

Active states—with .active—to indicate the current page can be applied directly to .nav-links or their immediate parent .nav-items.

+ +
+ +
+
<nav class="navbar navbar-expand-lg bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" href="#">Disabled</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+ +

You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.

+ +
+ +
+
<nav class="navbar navbar-expand-lg bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNavDropdown">
+      <ul class="navbar-nav">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Pricing</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown link
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+ +

Forms

+ +

Place various form controls and components within a navbar with .form-inline.

+ +
+ +
+
<nav class="navbar navbar-expand-lg bg-primary">
+    <div class="container">
+        <div class="navbar-translate">
+            <a class="navbar-brand" href="/presentation.html">Brand</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
+
+        <div class="collapse navbar-collapse">
+            <ul class="navbar-nav">
+                <li class="nav-item active">
+                    <a href="#pablo" class="nav-link">link</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#pablo" class="nav-link">link</a>
+                </li>
+            </ul>
+
+            <form class="form-inline ml-auto">
+                <div class="form-group no-border">
+                  <input type="text" class="form-control" placeholder="Search">
+                </div>
+                <button type="submit" class="btn btn-link btn-icon btn-round">
+                    <i class="tim-icons icon-zoom-split"></i>
+                </button>
+            </form>
+        </div>
+    </div>
+</nav>
+ +

Text

+ +

Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.

+ +
+ +
+
<nav class="navbar navbar-dark bg-primary">
+  <div class="container">
+    <span class="navbar-text">
+      Navbar text with an inline element
+    </span>
+  </div>
+</nav>
+ +

Mix and match with other components and utilities as needed.

+ +
+ +
+
<nav class="navbar navbar-expand-lg bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Navbar w/ text</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarText">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Pricing</a>
+        </li>
+      </ul>
+      <span class="navbar-text">
+        Navbar text with an inline element
+      </span>
+    </div>
+  </div>
+</nav>
+ +

Color schemes

+ +

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities. You can also add a border top using data-color attribute.

+ +
+ + + + + + + + + + + + + + +
+ +
<nav class="navbar navbar-expand-lg bg-dark" data-color="orange">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-expand-lg bg-success">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-expand-lg bg-danger">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-expand-lg bg-warning">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-expand-lg bg-white">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-expand-lg bg-primary">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-expand-lg bg-info">
+  <!-- Navbar content -->
+</nav>
+ +

Containers

+ +

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

+ +
+ +
+
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Navbar</a>
+  </div>
+</nav>
+ +

Placement

+ +

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

+ +

Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.

+ +
+ +
+
<nav class="navbar navbar-light bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Default</a>
+  </div>
+</nav>
+ +
+ +
+
<nav class="navbar fixed-top navbar-light bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Fixed top</a>
+  </div>
+</nav>
+ +
+ +
+
<nav class="navbar fixed-bottom navbar-light bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Fixed bottom</a>
+  </div>
+</nav>
+ +
+ +
+
<nav class="navbar sticky-top navbar-light bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Sticky top</a>
+  </div>
+</nav>
+ +

Responsive behaviors

+ +

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

+ +

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

+ +

Toggler

+ +

Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.

+ +

With no .navbar-brand shown in lowest breakpoint:

+ +
+ +
+
<nav class="navbar navbar-expand-lg bg-primary">
+  <div class="container">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+      <a class="navbar-brand" href="#">Hidden brand</a>
+      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" href="#">Disabled</a>
+        </li>
+      </ul>
+      <form class="form-inline ml-auto">
+          <div class="form-group has-white">
+            <input type="text" class="form-control" placeholder="Search">
+          </div>
+          <button type="submit" class="btn btn-link btn-icon btn-round">
+              <i class="tim-icons icon-zoom-split"></i>
+          </button>
+      </form>
+    </div>
+  </div>
+</nav>
+ +

With a brand name shown on the left and toggler on the right:

+ +
+ +
+
<nav class="navbar navbar-expand-lg bg-primary">
+  <div class="container">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" href="#">Disabled</a>
+        </li>
+      </ul>
+      <form class="form-inline ml-auto">
+          <div class="form-group no-border">
+            <input type="text" class="form-control" placeholder="Search">
+          </div>
+          <button type="submit" class="btn btn-link btn-icon btn-round">
+              <i class="tim-icons icon-zoom-split"></i>
+          </button>
+      </form>
+    </div>
+  </div>
+</nav>
+ +

With a toggler on the left and brand name on the right:

+ +
+ +
+
<nav class="navbar navbar-expand-lg bg-primary">
+  <div class="container">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    <span class="navbar-toggler-bar navbar-kebab"></span>
+    </button>
+    <a class="navbar-brand" href="#">Navbar</a>
+
+    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
+      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" href="#">Disabled</a>
+        </li>
+      </ul>
+      <form class="form-inline ml-auto">
+          <div class="form-group no-border">
+            <input type="text" class="form-control" placeholder="Search">
+          </div>
+          <button type="submit" class="btn btn-link btn-icon btn-round">
+              <i class="tim-icons icon-zoom-split"></i>
+          </button>
+      </form>
+    </div>
+  </div>
+</nav>
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/navs.html b/docs/1.0/components/navs.html new file mode 100644 index 0000000..afb0702 --- /dev/null +++ b/docs/1.0/components/navs.html @@ -0,0 +1,1092 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Navs

+

Documentation and examples for how to use Bootstrap's included navigation components.

+

Base nav

+ +

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

+ +

The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

+ +
+

The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.

+
+ +
+ +
+
<ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
+  </li>
+</ul>
+ +

Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, or roll your own with say a <nav> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.

+ +
+ +
+
<nav class="nav">
+  <a class="nav-link active" href="#">Active</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link disabled" href="#">Disabled</a>
+</nav>
+ +

Available styles

+ +

Change the style of .navs component with modifiers and utilities. Mix and match as needed, or build your own.

+ +

Horizontal alignment

+ +

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.

+ +

Centered with .justify-content-center:

+ +
+ +
+
<ul class="nav justify-content-center">
+  <li class="nav-item">
+    <a class="nav-link active" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
+  </li>
+</ul>
+ +

Right-aligned with .justify-content-end:

+ +
+ +
+
<ul class="nav justify-content-end">
+  <li class="nav-item">
+    <a class="nav-link active" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
+  </li>
+</ul>
+ +

Vertical

+ +

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

+ +
+ +
+
<ul class="nav flex-column">
+  <li class="nav-item">
+    <a class="nav-link active" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
+  </li>
+</ul>
+ +

As always, vertical navigation is possible without <ul>s, too.

+ +
+ +
+
<nav class="nav flex-column">
+  <a class="nav-link active" href="#">Active</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link disabled" href="#">Disabled</a>
+</nav>
+ +

If you want to see more examples and properties please check the official Bootstrap Documentation.

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/nucleo-icons.html b/docs/1.0/components/nucleo-icons.html new file mode 100644 index 0000000..6ba0251 --- /dev/null +++ b/docs/1.0/components/nucleo-icons.html @@ -0,0 +1,907 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + +
+
    +
+
+ + +
+

Nucleo Icons

+

+

Through most of the examples in this kit, we have used 100 Nucleo Icons for the Black Dashboard. View all the example icons. If you want more than 2100 icons please check the official Nucleo Icons Pack.

+ +
+ +
+
<i class="tim-icons icon-single-02"></i>
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/tables.html b/docs/1.0/components/tables.html new file mode 100644 index 0000000..94abaed --- /dev/null +++ b/docs/1.0/components/tables.html @@ -0,0 +1,1048 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Tables

+

All Boostrap classes for tables are supported and improved.

+

Examples

+ +

Simple Table with Actions

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#NameJob PositionSinceSalaryActions
1Andrew MikeDevelop2013€ 99,225 + + + +
2John DoeDesign2012€ 89,241 + + + +
3Alex MikeDesign2010€ 92,144 + + + +
+
+
<table class="table">
+    <thead>
+        <tr>
+            <th class="text-center">#</th>
+            <th>Name</th>
+            <th>Job Position</th>
+            <th>Since</th>
+            <th class="text-right">Salary</th>
+            <th class="text-right">Actions</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td class="text-center">1</td>
+            <td>Andrew Mike</td>
+            <td>Develop</td>
+            <td>2013</td>
+            <td class="text-right">&euro; 99,225</td>
+            <td class="td-actions text-right">
+                <button type="button" rel="tooltip" class="btn btn-info btn-sm btn-icon">
+                    <i class="tim-icons icon-single-02"></i>
+                </button>
+                <button type="button" rel="tooltip" class="btn btn-success btn-sm btn-icon">
+                    <i class="tim-icons icon-settings"></i>
+                </button>
+                <button type="button" rel="tooltip" class="btn btn-danger btn-sm btn-icon">
+                    <i class="tim-icons icon-simple-remove"></i>
+                </button>
+            </td>
+        </tr>
+        <tr>
+            <td class="text-center">2</td>
+            <td>John Doe</td>
+            <td>Design</td>
+            <td>2012</td>
+            <td class="text-right">&euro; 89,241</td>
+            <td class="td-actions text-right">
+              <button type="button" rel="tooltip" class="btn btn-info btn-sm btn-round btn-icon">
+                  <i class="tim-icons icon-single-02"></i>
+              </button>
+              <button type="button" rel="tooltip" class="btn btn-success btn-sm btn-round btn-icon">
+                  <i class="tim-icons icon-settings"></i>
+              </button>
+              <button type="button" rel="tooltip" class="btn btn-danger btn-sm btn-round btn-icon">
+                  <i class="tim-icons icon-simple-remove"></i>
+              </button>
+            </td>
+        </tr>
+        <tr>
+            <td class="text-center">3</td>
+            <td>Alex Mike</td>
+            <td>Design</td>
+            <td>2010</td>
+            <td class="text-right">&euro; 92,144</td>
+            <td class="td-actions text-right">
+                <button type="button" rel="tooltip" class="btn btn-info btn-link btn-icon btn-sm">
+                    <i class="tim-icons icon-single-02"></i>
+                </button>
+                <button type="button" rel="tooltip" class="btn btn-success btn-link btn-icon btn-sm">
+                    <i class="tim-icons icon-settings"></i>
+                </button>
+                <button type="button" rel="tooltip" class="btn btn-danger btn-link btn-icon btn-sm">
+                    <i class="tim-icons icon-simple-remove"></i>
+                </button>
+            </td>
+        </tr>
+    </tbody>
+</table>
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/components/typography.html b/docs/1.0/components/typography.html new file mode 100644 index 0000000..4616511 --- /dev/null +++ b/docs/1.0/components/typography.html @@ -0,0 +1,1101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Typography

+

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

+

Headings

+ +

All HTML headings, <h1> through <h6>, are available.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeadingExample
+

<h1></h1>

+ +
h1. Bootstrap heading
+

<h2></h2>

+ +
h2. Bootstrap heading
+

<h3></h3>

+ +
h3. Bootstrap heading
+

<h4></h4>

+ +
h4. Bootstrap heading
+

<h5></h5>

+ +
h5. Bootstrap heading
+

<h6></h6>

+ +
h6. Bootstrap heading
+
+ +
<h1>h1. Bootstrap heading</h1>
+<h2>h2. Bootstrap heading</h2>
+<h3>h3. Bootstrap heading</h3>
+<h4>h4. Bootstrap heading</h4>
+<h5>h5. Bootstrap heading</h5>
+<h6>h6. Bootstrap heading</h6>
+ +

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

+ +
+

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+

h5. Bootstrap heading

+

h6. Bootstrap heading

+
+
<p class="h1">h1. Bootstrap heading</p>
+<p class="h2">h2. Bootstrap heading</p>
+<p class="h3">h3. Bootstrap heading</p>
+<p class="h4">h4. Bootstrap heading</p>
+<p class="h5">h5. Bootstrap heading</p>
+<p class="h6">h6. Bootstrap heading</p>
+ +

.title, for when you want some bolder titles with a different font family.

+ +
+

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+
h5. Bootstrap heading
+
h6. Bootstrap heading
+
+
<h1 class="title">h1. Bootstrap heading</h1>
+<h2 class="title">h2. Bootstrap heading</h2>
+<h3 class="title">h3. Bootstrap heading</h3>
+<h4 class="title">h4. Bootstrap heading</h4>
+<h5 class="title">h5. Bootstrap heading</h5>
+<h6 class="title">h6. Bootstrap heading</h6>
+ +

Customizing headings

+ +

Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.

+ +
+ + Fancy display heading + With faded secondary text + +
+ +
<h3>
+  Fancy display heading
+  <small class="text-muted">With faded secondary text</small>
+</h3>
+ +

Blockquotes

+ +

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
+
+
<blockquote class="blockquote">
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+</blockquote>
+ +

Naming a source

+ +

Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+
+
<blockquote class="blockquote">
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+ +

Alignment

+ +

Use text utilities as needed to change the alignment of your blockquote.

+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+
+
<blockquote class="blockquote text-center">
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+
+
+
<blockquote class="blockquote text-right">
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/foundation/colors.html b/docs/1.0/foundation/colors.html new file mode 100644 index 0000000..958b159 --- /dev/null +++ b/docs/1.0/foundation/colors.html @@ -0,0 +1,1232 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Colors

+

Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

+

Primary colors

+ +

Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.

+ +
+ +
+
+
+
+
+
+
+
A
+
Fail
+
+
+
+
+
A
+
Pass
+
+
+
+
+
+
+
+
+
Name
+
Primary
+
+
+
+
+
Hex
+
#007bff
+
+
+
+
+
+ +
+
+
+
+
+
+
+
A
+
Fail
+
+
+
+
+
A
+
Pass
+
+
+
+
+
+
+
+
+
Name
+
Info
+
+
+
+
+
Hex
+
#17a2b8
+
+
+
+
+
+ +
+
+
+
+
+
+
+
A
+
Fail
+
+
+
+
+
A
+
Pass
+
+
+
+
+
+
+
+
+
Name
+
Success
+
+
+
+
+
Hex
+
#28a745
+
+
+
+
+
+ +
+
+
+
+
+
+
+
A
+
Fail
+
+
+
+
+
A
+
Pass
+
+
+
+
+
+
+
+
+
Name
+
Danger
+
+
+
+
+
Hex
+
#dc3545
+
+
+
+
+
+ +
+
+
+
+
+
+
+
A
+
Fail
+
+
+
+
+
A
+
Pass
+
+
+
+
+
+
+
+
+
Name
+
Warning
+
+
+
+
+
Hex
+
#ffc107
+
+
+
+
+
+ +
+
+
+
+
+
+
+
A
+
Fail
+
+
+
+
+
A
+
Pass
+
+
+
+
+
+
+
+
+
Name
+
Default
+
+
+
+
+
Hex
+
#ffc107
+
+
+
+
+
+ +
+ +

Light neutrals

+ +

Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Gray 100 +
+
Hex
+ #f6f9fc +
+
+ Gray 200 +
+
Hex
+ #e9ecef +
+
+ Gray 300 +
+
Hex
+ #e3e3e3 +
+
+ Gray 400 +
+
Hex
+ #ced4da +
+
+ Gray 500 +
+
Hex
+ #adb5bd +
+
+ Gray 600 +
+
Hex
+ #6c757d +
+
+ Gray 700 +
+
Hex
+ #525f7f +
+
+ Gray 800 +
+
Hex
+ #32325d +
+
+ Gray 900 +
+
Hex
+ #212529 +
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/getting-started/flask-deploy-on-heroku.html b/docs/1.0/getting-started/flask-deploy-on-heroku.html new file mode 100644 index 0000000..b0c6405 --- /dev/null +++ b/docs/1.0/getting-started/flask-deploy-on-heroku.html @@ -0,0 +1,1083 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

How to deploy Flask on Heroku

+

+

Flask Deploy on Heroku

+ +

This page explains how to deploy a Flask application on Heroku, the popular deployment platform.

+ +


+ +

Prerequisites

+ +
    +
  • Basic programming knowledge in Python
  • +
  • Basic Flask knowledge and WSGI concept
  • +
  • Comfortable using a terminal
  • +
  • Already familiar with GIT
  • +
+ +


+ +

What is Flask

+
+ +

Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. +Classified as a microframework, Flask is written in Python and it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

+ +
+

Flask Links

+
+ + + +


+ +

What is Heroku

+
+ +

Heroku’s a fully-managed platform that helps developers to deploy apps with ease. +Heroku is a cloud-based, fully-managed platform as a service (Paas) for building, running, and managing apps.

+ +
+

A short-list with features:

+
+ +
    +
  • Runtime - Heroku empowers developers to deliver products using a CLI, called Heroku Toolbelt
  • +
  • PostgreSQL DBMS - a powerful database already configured to be production-ready
  • +
  • Automatic scaling - Heroku scales in an instant, both vertically and horizontally.
  • +
  • Github integration - trigger production builds directly from Github commits
  • +
+ +
+

Heroku Links

+
+ + + +


+ +

To explain the process, we will use a simple Flask Boilerplate already enhanced for a Heroku deployment.

+ +

Sample project - Flask Boilerplate

+
+ +

Flask Boilerplate is a template codebase used by the AppSeed platform to generate Flask Apps enhanced with a basic set of features:

+ +
    +
  • UI-Ready, Jinja2 templating
  • +
  • SQLite database, Flask-SQLAlchemy ORM
  • +
  • Session-Based auth flow (login, register) via Flask-Login
  • +
  • Deployment scripts: Docker, Gunicorn / Nginx, Heroku
  • +
+ +

As mentioned, the project comes pre-configured for Heroku. The relevant files are listed below:

+ +
    +
  • runtime.txt - specify the Python version used by Heroku during the build and deploy
  • +
  • Procfile - configuration file that informs Heroku where to look for the WSGI interface
  • +
  • requirements.txt - must contain the gunicorn module
  • +
+ +


+ +

Gunicorn module

+
+ +

Gunicorn Green Unicorn is a Python WSGI HTTP Server for UNIX. It’s a pre-fork worker model ported from Ruby’s Unicorn project. The Gunicorn server is broadly compatible with various web frameworks, simply implemented, light on server resources, and fairly speedy.

+ +

For basic usage please access the PyPi page or the official docs.

+ +


+ +

File - runtime.txt

+
+ +

To build the deploy any python-based app, Heroku uses a default Python version python-3.6.10 or the one specified in the runtime.txt file. Supported environment, as per Heroku official documentation - Specifying a Python version:

+ +
    +
  • python-3.8.3
  • +
  • python-3.7.7
  • +
  • python-3.6.10 <– The Default Version
  • +
  • python-2.7.18
  • +
+ +


+ +

Procfile

+
+ +

Heroku apps include a Procfile that specifies the commands that are executed by the app on startup. +As specified in the official docs, the Procfile is always a simple text file that is named Procfile without a file extension.

+ +
web: gunicorn run:app --log-file=-
+
+ +

For our sample, gunicorn is called with run:app argument.

+ +


+ +

How to deploy on Heroku

+ +
    +
  • Create a FREE account on Heroku platform
  • +
  • Install the Heroku CLI that match your OS: Mac, Unix or Windows
  • +
  • Open a terminal window and authenticate via heroku login command
  • +
  • Clone the sources and push the project for LIVE deployment
  • +
+ +

The full command list, executed on our sample project.

+ +
$ # Clone the source code:
+$ git clone https://github.com/app-generator/boilerplate-code-flask.git
+$ cd boilerplate-code-flask
+$
+$ # Check Heroku CLI is installed
+$ heroku -v
+heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good
+$
+$ # Check Heroku CLI is installed
+$ heroku login
+$ # this command will open a browser window - click the login button (in browser)
+$
+$ # Create the Heroku project
+$ heroku create
+$
+$ # Trigger the LIVE deploy
+$ git push heroku master
+$
+$ # Open the LIVE app in browser
+$ heroku open
+
+ +

At this point, you should be able to visit the app in the browser.

+ +


+ +

Help & Resources

+ + + +


+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/getting-started/getting-started-flask.html b/docs/1.0/getting-started/getting-started-flask.html new file mode 100644 index 0000000..64de12a --- /dev/null +++ b/docs/1.0/getting-started/getting-started-flask.html @@ -0,0 +1,1592 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Black Dashboard Flask

+

+

Black Dashboard Flask

+ +

Black Dashboard Black is a free Bootstrap 4 Admin Template for Django - Features:

+ +
    +
  • Design - Black Dashboard (Free version)
  • +
  • UI-Ready, Django Native templating
  • +
  • SQLite database, Native Django ORM
  • +
  • Session-Based auth flow (login, register)
  • +
  • Deployment scripts: Docker, Gunicorn/Nginx stack
  • +
+ +
+

Links

+
+ + + +


+ +

Black Dashboard Flask - Free Django template

+ +


+ +

What is Flask

+
+ +

Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. +Classified as a microframework, Flask is written in Python and it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

+ +
+

Flask Links

+
+ + + +


+ +

Environment

+
+ +

To use the stater, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full-list with dependencies and tools required to build the app:

+ +
    +
  • Python3 - the programming language used to code the app
  • +
  • GIT - used to clone the source code from the Github repository
  • +
  • Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.
  • +
+ +


+ +
+

Check Python version (using the terminal)

+
+ +
+
+
+
+$ # Check Python version
+$ python --version
+Python 3.7.2 # <--- All good
+
+    
+
+
+ +


+ +
+

Check GIT command tool (using the terminal)

+
+ +
$ # Check git
+$ git --version
+$ git version 2.10.1.windows.1 # <--- All good
+
+ +


+ +

For more information on how to set up your environment please access the resources listed below. In case we’ve missed something, contact us on Discord.

+ + + +


+ +

Build the app

+
+ +

To built and start the app locally, follow the steps:

+ +
+

Get the source code

+
+ +
    +
  • Download the ZIP from Github Repository
  • +
  • Using GIT tool in the terminal to clone the source code
  • +
+ +
+

Change the current directory to source code directory

+
+ +
$ # Make sure you are running the commands INSIDE source code directory
+$
+$ # Create and activate a Virtualenv (Unix based systems)
+$ virtualenv env
+$ source env/bin/activate
+$
+$ # Create and activate a Virtualenv (Windows based systems)
+$ # virtualenv env
+$ # .\env\Scripts\activate
+$
+$ # Install requirements
+$ pip3 install -r requirements.txt
+$
+$ # Set the FLASK_APP environment variable
+$ (Unix/Mac) export FLASK_APP=run.py
+$ (Windows) set FLASK_APP=run.py
+$ (Powershell) $env:FLASK_APP = ".\run.py"
+$
+$ # Set up the DEBUG environment
+$ # (Unix/Mac) export FLASK_ENV=development
+$ # (Windows) set FLASK_ENV=development
+$ # (Powershell) $env:FLASK_ENV = "development"
+$
+$ # Run the application
+$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
+$ # --port=5000    - specify the app port (default 5000)  
+$ flask run --host=0.0.0.0 --port=5000
+$
+$ # Access the app in browser: http://127.0.0.1:5000/
+
+ +

At this point, we can visit the app in the browser http://127.0.0.1:5000/. +By default, the app will redirect guest users to the login page. To access the private pages:

+ +
    +
  • Create a new user using the registration page
  • +
  • Authenticate using the login page
  • +
+ +


+ +

App Codebase (simplified)

+
+ +

Starter uses a simple codebase (no Blueprints) with a structure presented bellow:

+ +
< PROJECT ROOT >
+   |
+   |-- app/                      # Implements app logic
+   |    |-- base/                # Base Blueprint - handles the authentication
+   |    |-- home/                # Home Blueprint - serve UI Kit pages
+   |    |
+   |   __init__.py               # Initialize the app
+   |
+   |-- requirements.txt          # Development modules - SQLite storage
+   |-- requirements-mysql.txt    # Production modules  - Mysql DMBS
+   |-- requirements-pqsql.txt    # Production modules  - PostgreSql DMBS
+   |
+   |-- .env                      # Inject Configuration via Environment
+   |-- config.py                 # Set up the app
+   |-- run.py                    # Start the app - WSGI gateway
+   |
+   |-- ************************************************************************
+
+ +


+ +

The bootstrap flow

+
+ +
    +
  • run.py loads the .env file
  • +
  • Initialize the app using the specified profile: Debug or Production +
      +
    • If env.DEBUG is set to True the SQLite storage is used
    • +
    • If env.DEBUG is set to False the specified DB driver is used (MySql, PostgreSQL)
    • +
    +
  • +
  • Call the app factory method create_app defined in app/init.py
  • +
  • Redirect the guest users to Login page
  • +
  • Unlock the pages served by home blueprint for authenticated users
  • +
+ +


+ +
+

.env (saved in the root of the project)

+
+ +
# File: `.env`
+
+DEBUG=True              # Enable/Disable the development environment
+
+SECRET_KEY=S3cr3t_Key   # The Key used by Flask to encrypt session information
+
+# Database production settings (If DEBUG=False)
+
+DB_ENGINE=postgresql    # DBMS
+DB_NAME=appseed-flask   # Database Name
+DB_HOST=localhost       # Database Host
+DB_PORT=5432            # Database Port
+DB_USERNAME=appseed     # DB Username
+DB_PASS=pass            # DB Password
+
+
+ +


+ +
+

run.py (simplified version)

+
+ +
# File: run.py
+
+DEBUG = config('DEBUG', default=True)
+
+# Create the WSGI app, using the app factory pattern
+app = create_app( app_config )
+
+# Migrate automaticaly the app using Flask Migrate library
+Migrate(app, db)
+
+ +


+ +
+

app/__init__.py (simplified version)

+
+ +
# File: app/__init__.py
+
+db            = SQLAlchemy()        # Invoke SQLAlchemy
+login_manager = LoginManager()      # Invoke Login Manager
+
+def register_extensions(app):
+    db.init_app(app)                # Inject SQLAlchemy magic
+    login_manager.init_app(app)     # Add Login Manager to the app
+
+# Register app blueprints: `base`, `home`
+def register_blueprints(app):
+    for module_name in ('base', 'home'):
+        module = import_module('app.{}.routes'.format(module_name))
+        app.register_blueprint(module.blueprint)
+
+# Create the tables (automaticaly)
+def configure_database(app):
+
+    @app.before_first_request
+    def initialize_database():
+        db.create_all()
+
+# Create the WSGI app using the factory pattern
+def create_app(config):
+    app = Flask(__name__, static_folder='base/static')
+    app.config.from_object(config)
+    register_extensions(app)
+    register_blueprints(app)
+    configure_database(app)
+    return app
+
+ +


+ +

The app/__init__.py constructs the app by putting together a short-list of things:

+ +
    +
  • Invoke SQLAlchemy
  • +
  • Invoke and inject the Login Manager into the app
  • +
  • Load the configuration from config.py file
  • +
  • Register the app blueprints
  • +
  • Check if the database tables are created
  • +
  • return the WSGI app
  • +
+ +


+ +

App Codebase

+
+ +

The starter defines two blueprints:

+ +
    +
  • Base blueprint - handles the authentication (routes and forms) and assets management
  • +
  • Home blueprint - serve HTML pages for authenticated users
  • +
+ +


+ +
+

App / Base Blueprint structure

+
+ +
< PROJECT ROOT >
+   |
+   |-- app/
+   |    |-- home/                                # Home Blueprint - serve app pages (private area)
+   |    |-- base/                                # Base Blueprint - handles the authentication
+   |         |-- static/
+   |         |    |-- <css, JS, images>          # CSS files, Javascripts files
+   |         |
+   |         |-- templates/                      # Templates used to render pages
+   |              |
+   |              |-- includes/                  #
+   |              |    |-- navigation.html       # Top menu component
+   |              |    |-- sidebar.html          # Sidebar component
+   |              |    |-- footer.html           # App Footer
+   |              |    |-- scripts.html          # Scripts common to all pages
+   |              |
+   |              |-- layouts/                   # Master pages
+   |              |    |-- base-fullscreen.html  # Used by Authentication pages
+   |              |    |-- base.html             # Used by common pages
+   |              |
+   |              |-- accounts/                  # Authentication pages
+   |                   |-- login.html            # Login page
+   |                   |-- register.html         # Registration page
+   |
+   |-- requirements.txt                          # Development modules - SQLite storage
+   |-- requirements-mysql.txt                    # Production modules  - Mysql DMBS
+   |-- requirements-pqsql.txt                    # Production modules  - PostgreSql DMBS
+   |
+   |-- .env                                      # Inject Configuration via Environment
+   |-- config.py                                 # Set up the app
+   |-- run.py                                    # Start the app - WSGI gateway
+   |
+   |-- ************************************************************************
+
+ +


+ +
+

App / Home Blueprint structure

+
+ +
< PROJECT ROOT >
+   |
+   |-- app/
+   |    |-- base/                     # Base Blueprint - handles the authentication
+   |    |-- home/                     # Home Blueprint - serve app pages (private area)
+   |         |
+   |         |-- templates/           # UI Kit Pages
+   |              |
+   |              |-- index.html      # Default page
+   |              |-- page-404.html   # Error 404 - mandatory page
+   |              |-- page-500.html   # Error 500 - mandatory page
+   |              |-- page-403.html   # Error 403 - mandatory page
+   |              |-- *.html          # All other HTML pages
+   |
+   |-- requirements.txt               # Development modules - SQLite storage
+   |-- requirements-mysql.txt         # Production modules  - Mysql DMBS
+   |-- requirements-pqsql.txt         # Production modules  - PostgreSql DMBS
+   |
+   |-- .env                           # Inject Configuration via Environment
+   |-- config.py                      # Set up the app
+   |-- run.py                         # Start the app - WSGI gateway
+   |
+   |-- ************************************************************************
+
+ +


+ +

App Configuration

+
+ +

The configuration file config.py (in the root of the project) define a dual configuration controlled via the .env file ( DEBUG variable)

+ +
+

DebugConfig - default configuration used for development

+
+ +

This configuration becomes active if .env file has the DEBUG file set to True

+ +
# Development/Debug configuration
+
+# Set up the App SECRET_KEY
+SECRET_KEY = config('SECRET_KEY', default='S#perS3crEt_007')
+
+# This will create a file in <app> FOLDER
+SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'db.sqlite3')
+SQLALCHEMY_TRACK_MODIFICATIONS = False
+
+
+ +

During the first request, the SQLite database and tables are automatically created in the root in the project.

+ +
+

Hint: to visualize the SQLite database content an external tool should be installed: DB Browser for SQLite it might be a good choice.

+
+ +


+ +
+

ProductionConfig - production configuration

+
+ +

This configuration becomes active if .env file has the DEBUG file set to False

+ +
# Production configuration
+
+SESSION_COOKIE_HTTPONLY  = True
+REMEMBER_COOKIE_HTTPONLY = True
+REMEMBER_COOKIE_DURATION = 3600
+
+# PostgreSQL database
+SQLALCHEMY_DATABASE_URI = '{}://{}:{}@{}:{}/{}'.format(
+    config( 'DB_ENGINE'   , default='postgresql'    ),
+    config( 'DB_USERNAME' , default='appseed'       ),
+    config( 'DB_PASS'     , default='pass'          ),
+    config( 'DB_HOST'     , default='localhost'     ),
+    config( 'DB_PORT'     , default=5432            ),
+    config( 'DB_NAME'     , default='appseed-flask' )
+)
+
+
+ +

In this configuration profile, the database defaults to a PostgreSQL DBMS. Make sure the .env has the right credentials to access the database.

+ +


+ +

App Tables

+
+ +

The file app/base/models.py (Base Blueprint) defines the table(s) used by the application. Being a simple starter, by default the following tabes are defined:

+ +
    +
  • Table #1 - User with fields: +
      +
    • Id - Primary key, unique
    • +
    • user - Store the username
    • +
    • email - The email address
    • +
    • password - Hashed password
    • +
    +
  • +
+ +


+ +

App Forms

+
+ +

The file app/base/forms.py (Base Blueprint) defines the table(s) used by the application. Being a simple starter, by default the following forms are defined:

+ +
    +
  • Form #1 - LoginForm with fields: +
      +
    • username
    • +
    • password
    • +
    +
  • +
+ +


+ +
    +
  • Form #2 - RegisterForm with fields: +
      +
    • username - used to authenticate
    • +
    • email - email address
    • +
    • password - used to authenticate
    • +
    +
  • +
+ +


+ +

App Routing

+
+ +

The routing rules are defined by Base and Home blueprints as specified below. This is the public zone of the app.

+ +
+

Base Blueprint - routing file app/base/routes.py

+
+ +
    +
  • /login route is resolved by login() method
  • +
  • /register route is resolved by register() method
  • +
  • /logout route calls the logout_user() defined in flask_login
  • +
+ +

Registered ERROR handlers

+ +
    +
  • 404 Error - Page not found
  • +
  • 403 Error - Access Forbidden
  • +
  • 500 Error - Internal Error
  • +
+ +


+ +
+

Home Blueprint - routing file app/home/routes.py

+
+ +

This blueprint will serve requested pages from app/home/templates directory to authenticated users. +The authentication status is checked by @login_required decorator.

+ +
    +
  • /<template> route resolved by route_template(). +
      +
    • If a requested page is not found a default 404 page is returned to the user
    • +
    +
  • +
+ +


+ +

Pages & Assets

+
+ +

Pages and all assets defined in the UI Kits are served by the app using both blueprints:

+ +
    +
  • Home Blueprint manage the static assets - app/base/static/assets
  • +
  • +

    Home Blueprint store the layout master pages, HTML chunks (footer. header, scripts) and login, registration pages

    +
  • +
  • Base Blueprint serve the HTML pages (index, page-404, etc) and the rest of the pages defined in the UI kit.
  • +
+ +
< PROJECT ROOT >
+   |
+   |-- app/
+   |    |-- base/                               # Base Blueprint
+   |    |    |-- static/assets/
+   |    |    |           |-- css/               # UI Kit css
+   |    |    |           |-- JS/                # Javascript files
+   |    |    |           |-- images/            # images used by the app
+   |    |    |           |-- scss/              # SCSS files (if any)
+   |    |    |
+   |    |    |-- templates/                      # Templates used to render pages
+   |    |         |
+   |    |         |-- includes/                  #
+   |    |         |    |-- navigation.html       # Top menu component
+   |    |         |    |-- sidebar.html          # Sidebar component
+   |    |         |    |-- footer.html           # App Footer
+   |    |         |    |-- scripts.html          # Scripts common to all pages
+   |    |         |
+   |    |         |-- layouts/                   # Master pages
+   |    |         |    |-- base-fullscreen.html  # Used by Authentication pages
+   |    |         |    |-- base.html             # Used by common pages
+   |    |         |
+   |    |         |-- accounts/                  # Authentication pages
+   |    |              |-- login.html            # Login page
+   |    |              |-- register.html         # Registration page
+   |    |
+   |    |-- home/                                # Home Blueprint - serve app pages (private area)
+   |         |-- templates/                      # UI Kit Pages
+   |              |
+   |              |-- index.html                 # Default page
+   |              |-- page-404.html              # Error 404 - mandatory page
+   |              |-- page-500.html              # Error 500 - mandatory page
+   |              |-- page-403.html              # Error 403 - mandatory page
+   |              |-- *.html                     # All other HTML pages
+   |
+   |-- ************************************************************************
+
+ +


+ +

Data Structures

+
+ +

The Flask starter exposes a short-list with data structures used globally across the app:

+ +


+ +

current_user object

+ +

Constructed by Flask-Login can be used to detect if the current request is executed by an authenticated user or not. The object has global visibility and can be used in all app controllers and handlers but also in views.

+ +


+ +
+

How it works

+
+ +

app/base/models.py define the callback functions required by Flask-Login library:

+ +
# File: app/base/models.py
+
+@login_manager.user_loader
+def user_loader(id):
+    return User.query.filter_by(id=id).first()
+
+@login_manager.request_loader
+def request_loader(request):
+    username = request.form.get('username')
+    user = User.query.filter_by(username=username).first()
+    return user if user else None
+
+
+ +


+ +
+

Usage in contoler (Sample file)

+
+ +

+def sample_method(path):
+
+    # Redirect guests users to login page
+    if not current_user.is_authenticated:
+        return redirect(url_for('login'))
+
+ +


+ +
+

Usage in view

+
+ +
    <div class="collapse navbar-collapse" id="navigation">
+        <ul class="navbar-nav ml-auto">
+
+        <!-- The Usage of <current_user> object -->
+        
+
+            <!-- Html chunk rendered for guests users-->
+
+            <li class="nav-item ">
+                <a href="" class="nav-link">
+                    <i class="tim-icons icon-laptop"></i> Register
+                </a>
+            </li>
+            <li class="nav-item ">
+                <a href="" class="nav-link">
+                    <i class="tim-icons icon-single-02"></i> Login
+                </a>
+            </li>
+
+        
+
+        </ul>
+    </div>
+
+ +


+ +

Flask resources

+
+ + + +


+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/getting-started/introduction.html b/docs/1.0/getting-started/introduction.html new file mode 100644 index 0000000..647d0d7 --- /dev/null +++ b/docs/1.0/getting-started/introduction.html @@ -0,0 +1,1069 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Introduction

+

Black Dashboard is a free Bootstrap 4 Admin Template.

+

Quick start

+ +

To start using the Admin Dashboard you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).

+ +

CSS

+ +

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

+ +
<!-- CSS Files -->
+<link href="../assets/css/black-dashboard-flask.css?v=1.0.0" rel="stylesheet" />
+ +

JS

+ +

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

+ +
<!--   Core JS Files   -->
+<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
+<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
+<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
+<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+<!--  Google Maps Plugin    -->
+<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+<!-- Chartist JS -->
+<script src="../assets/js/plugins/chartjs.min.js"></script>
+<!--  Notifications Plugin    -->
+<script src="../assets/js/plugins/bootstrap-notify.js"></script>
+<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
+<script src="../assets/js/black-dashboard-flask.js?v=1.0.0" type="text/javascript"></script>
+ +

Fonts and Icons

+ +

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load the Fonts and Icons.

+ +
<!--     Fonts and icons     -->
+<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
+<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
+ +

Starter template

+ +

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

+ +
<!doctype html>
+<html lang="en">
+  <head>
+    <title>Hello, world!</title>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <!--  Fonts and icons  -->
+      <!--     Fonts and icons     -->
+<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
+<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
+
+    <!-- Black Dashboard CSS -->
+    <link href="assets/css/black-dashboard-flask.css?v=1.0.0" rel="stylesheet" />
+  </head>
+  <body>
+<div class="wrapper ">
+  <div class="sidebar" data-color="purple" data-background-color="white">
+    <!--
+      Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
+
+      Tip 2: you can also add an image using data-image tag
+  -->
+    <div class="logo">
+      <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+        CT
+      </a>
+
+      <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+       Creative Tim
+      </a>
+    </div>
+
+    <div class="sidebar-wrapper">
+      <ul class="nav">
+        <li class="nav-item active  ">
+            <a class="nav-link" href="#0">
+                <i class="tim-icons icon-chart-pie-36"></i>
+                <p>Dashboard</p>
+            </a>
+        </li>
+
+         <!-- your sidebar here -->
+      </ul>
+    </div>
+  </div>
+  <div class="main-panel">
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
+      <div class="container-fluid">
+        <div class="navbar-wrapper">
+
+          <a class="navbar-brand" href="#pablo">Dashboard</a>
+        </div>
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="navbar-toggler-icon icon-bar"></span>
+          <span class="navbar-toggler-icon icon-bar"></span>
+          <span class="navbar-toggler-icon icon-bar"></span>
+        </button>
+
+        <div class="collapse navbar-collapse justify-content-end">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link" href="#pablo">
+                <i class="tim-icons icon-bell-55"></i>  Notifications
+              </a>
+            </li>
+             <!-- your navbar here -->
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <!-- End Navbar -->
+    <div class="content">
+      <div class="container-fluid">
+         <!-- your content here -->
+      </div>
+    </div>
+    <footer class="footer">
+      <div class="container-fluid">
+        <nav class="float-left">
+          <ul>
+              <li>
+                  <a href="https://www.creative-tim.com">
+                      Creative Tim
+                  </a>
+              </li>
+          </ul>
+        </nav>
+        <div class="copyright float-right">
+            &copy;
+            <script>
+                document.write(new Date().getFullYear())
+            </script>, made with <i class="tim-icons icon-heart-2"></i> by
+            <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
+        </div>
+
+         <!-- your footer here -->
+      </div>
+    </footer>
+  </div>
+</div>
+<!--   Core JS Files   -->
+<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
+<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
+<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
+<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+<!--  Google Maps Plugin    -->
+<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+<!-- Chartist JS -->
+<script src="../assets/js/plugins/chartjs.min.js"></script>
+<!--  Notifications Plugin    -->
+<script src="../assets/js/plugins/bootstrap-notify.js"></script>
+<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
+<script src="../assets/js/black-dashboard-flask.js?v=1.0.0" type="text/javascript"></script></body>
+</html>
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/getting-started/license.html b/docs/1.0/getting-started/license.html new file mode 100644 index 0000000..12b383a --- /dev/null +++ b/docs/1.0/getting-started/license.html @@ -0,0 +1,896 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + +
+

License

+

+

Currently, on Creative Tim you can get the products with two types of licenses: Personal or Developer. All the freebies are licensed to Personal License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what is the best fit for you. View the rights table and the description for each license on our Official License Page.

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/getting-started/setup-centos-for-development.html b/docs/1.0/getting-started/setup-centos-for-development.html new file mode 100644 index 0000000..3820e86 --- /dev/null +++ b/docs/1.0/getting-started/setup-centos-for-development.html @@ -0,0 +1,1048 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Set up CentOS

+

+

Set Up CentOS

+
+ +

CentOS is a Linux distribution that provides a free, community-supported computing platform functionally compatible with its upstream source, Red Hat Enterprise Linux (RHEL). In January 2014, CentOS announced the official joining with Red Hat while staying independent from RHEL under a new CentOS governing board.

+ +


+ +

Install basic development tools

+
+ +

The Development Tools package group provides the GNU Compiler Collection (GCC), GNU Debugger (GDB), and other related development tools.

+ +
$ # install Development Tools bundle
+$ sudo yum group install "Development Tools"
+
+
+ +


+ +

Install Git

+
+ +

Git is the most popular version control system on Linux. It is easy to use, amazingly fast, it’s very efficient with large projects, and it has an incredible branching system for non-linear development.

+ +
$ sudo yum install git
+
+ +


+ +

Install Python3

+ +

By default, CentOS is not installing python3, but we can easily set up the installation.

+ +
$ sudo yum install python3
+$
+
+ +
+

And Python3 libraries for development

+
+ +
sudo yum install python3-devel
+
+ +


+ +

Installing Apache

+ +

Apache is available within CentOS’s default software repositories, which means you can install it with the yum package manager.

+ +
$ sudo yum install httpd
+
+ +


+ +

Apache does not automatically start on CentOS once the installation completes. You will need to start the Apache process manually:

+ +


+ +
$ # this cmd will start the server
+$ sudo systemctl start httpd
+$
+$ # test server status
+$ sudo systemctl status httpd
+$
+$ # access the default page with `lynx`
+$ sudo yum install lynx
+$
+$ lynx http://localhost
+
+ +


+ +

Installing Node.js

+ +

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.

+ +
$ sudo yum install nodejs
+$
+$ # check the version
+$ node --version
+
+ +


+ +

Installing Yarn

+ +

The yarn is an advanced package management software for Node.js applications. It is a fast, secure, and reliable alternative that any other Nodejs package manager.

+ +
$ sudo npm install yarn -g
+$
+$ # check the version
+$ yarn -v
+
+ +


+ +

Installing Container Tools

+
+ +

RHEL 8 does not officially support Docker; in this section, we will show how to install the new set of container tools as well as the old lady, docker package. The docker package is replaced by the Container Tools module, which consists of tools such as Podman, Buildah, Skope, and several others.

+ +
$ dnf module install -y container-tools
+
+ +


+ +

Install Docker

+
+ +

Now install docker from the official repositories by running the following commands. Here, the yum-utils package provides the yum-config-manager utility.

+ +
$ dnf install yum-utils
+$ yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
+$ dnf install containerd.io docker-ce docker-ce-cli
+
+ +


+ +

Installation of DNF

+
+ +

For packages installation, we can use dnf tool instead of the traditional yum package manager. DNF is same as Yum that installs, updates and removes packages on RPM bas4ed Linux systems. DNF is introduced for improving the bottlenecks of Yum such as performance, Memory usages, Dependency resolution, speed, and some other factors.

+ +

To install DNF on RHEL/CentOS 7 systems, you need to set up and enable epel Yum repository before installing DNF

+ +
$ # Initial Setup
+$ yum install epel-release
+$
+$ # Install `DNF` tool
+$ yum install dnf
+$
+$ # test the installation
+$ dnf –help
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/getting-started/setup-ubuntu-for-development.html b/docs/1.0/getting-started/setup-ubuntu-for-development.html new file mode 100644 index 0000000..c48b196 --- /dev/null +++ b/docs/1.0/getting-started/setup-ubuntu-for-development.html @@ -0,0 +1,978 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Setup Ubuntu for Developers

+

+

Setup Ubuntu for developers

+
+ +

Ubuntu is a complete Linux operating system, freely available with both community and professional support. Ubuntu is suitable for both desktop and server use. The current Ubuntu release supports many architectures: Intel x86 (IBM-compatible PC), AMD64 (x86-64), ARMv7, ARMv8.

+ +

Ubuntu includes thousands of pieces of software, starting with the Linux kernel version 4.15 and GNOME 3.28, and covering every standard desktop application from word processing and spreadsheet applications to internet access applications, web server software, email software, programming languages and tools and of course several games. For more information please access the official website: Ubuntu.com

+ +


+ +

Install basic development tools

+
+ +

The Build Essential package group provides the GNU Compiler Collection (GCC), GNU Debugger (GDB), and other related development tools.

+ +
$ # install Development Tools bundle
+$ sudo apt install build-essential
+
+
+ +


+ +

Install Git

+
+ +

Git is the most popular version control system on Linux. It is easy to use, amazingly fast, it’s very efficient with large projects, and it has an incredible branching system for non-linear development.

+ +
$ sudo apt install install git
+
+ +


+ +

Install Python3

+ +

Ubuntu comes with both Python 2.7 and Python 3.5 by default. You can install Python 3.6 along with them via a third-party PPA by doing the following steps:

+ +
$ sudo add-apt-repository ppa:jonathonf/python-3.6
+
+ +
+

And Python3 libraries for development

+
+ +
$ sudo apt-get update
+$ sudo apt-get install python3.6
+
+ +


+ +

Installing Node.js

+ +

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.

+ +
$ sudo apt-get install install nodejs
+$
+$ # check the version
+$ node --version
+
+ +


+ +

Installing Yarn

+ +

The yarn is an advanced package management software for Node.js applications. It is a fast, secure, and reliable alternative that any other Nodejs package manager.

+ +
$ sudo npm install yarn -g
+$
+$ # check the version
+$ yarn -v
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/getting-started/setup-windows-for-development.html b/docs/1.0/getting-started/setup-windows-for-development.html new file mode 100644 index 0000000..de1444d --- /dev/null +++ b/docs/1.0/getting-started/setup-windows-for-development.html @@ -0,0 +1,998 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Setup Windows for Developers

+

+

Setup Windows for developers

+
+ +

Microsoft Windows, commonly referred to as Windows, is a group of several proprietary graphical operating system families, all of which are developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. Active Microsoft Windows families include Windows NT and Windows IoT; these may encompass subfamilies, e.g. Windows Server or Windows Embedded Compact (Windows CE). Defunct Microsoft Windows families include Windows 9x, Windows Mobile and Windows Phone.

+ +


+ +

Install basic development tools

+
+ +

This guide is written for Windows 10 version but can be used as a starting point for older versions of Windows.

+ +


+ +

Visual Studio Code

+ +

Visual Studio Code is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, MacOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

+ +

Links:

+ + + +


+ +

Install Python

+ +

It is highly unlikely that your Windows system shipped with Python already installed. Fortunately, installing does not involve much more than downloading the Python installer from the python.org website and running it. Let’s take a look at how to install Python3 on Windows:

+ +
    +
  • Access the download page
  • +
  • Click on the installer that matches your operating system version 32b or 64b
  • +
  • Run the installer and mark the option that includes Python executable to your PATH variable (image credit: RealPython )
  • +
+ +

Install Python - The Visual Installer Screen.

+ +

If the installation goes well, test the Python execution from the terminal:

+ +
$ python --version
+Python 3.7.2
+
+ +


+ +

Install Git

+ +

To install Git on Windows you will need to download the installer from the Git website:

+ +
    +
  • Download the installer
  • +
  • Execute the installer, using the default options
  • +
  • Test the installation by typing git
  • +
+ +
$ git
+usage: git [--version] [--help] [-C <path>] [-c name=value]
+           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
+           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
+           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
+           <command> [<args>]
+
+ +

For more information about Git please access:

+ + + +


+ +

Install Node.js

+ +

Node.js is a run-time environment that includes everything you need to execute a program written in JavaScript. It’s used for running scripts on the server to render content before it is delivered to a web browser. NPM stands for Node Package Manager, which is an application and repository for developing and sharing JavaScript code.

+ +

Download the installer

+ +

In a web browser, navigate to https://nodejs.org/en/download/. Click the Windows Installer button to download the latest default version. At the time this article was written, version 10.16.0-x64 was the latest version. The Node.js installer includes the NPM package manager.

+ +

NodeJs Installer.

+ +

Execute the installer, and choosing the default options should be enough to have a successfull installation:

+ +
$ node -v
+$ npm -v
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/plugins/bootstrap-notify.html b/docs/1.0/plugins/bootstrap-notify.html new file mode 100644 index 0000000..56ce6f9 --- /dev/null +++ b/docs/1.0/plugins/bootstrap-notify.html @@ -0,0 +1,1046 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + + + + +
+

Bootstrap Notify v3.1.5

+

+

The new Black Dashboard notifications are looking fresh and clean. They go great with the navbar.

+ +

If you want to use add special animations for them, we integrated a third party plugin called Bootstrap Notify. Out friend Robert McIntosh did a wonderful job. If you want to see a coded example, you can see it below.

+ +

For more information please check Full Documentation

+ +

Notifications Style

+ +
+
+ This is a plain notification +
+
+ + This is a notification with close button. +
+
+ + + This is a notification with close button and icon. +
+
+ + + This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style. +
+
+
<div class="alert alert-info">
+   <span>This is a plain notification</span>
+</div>
+<div class="alert alert-info">
+   <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+       <i class="tim-icons icon-simple-remove"></i>
+   </button>
+   <span>This is a notification with close button.</span>
+</div>
+<div class="alert alert-info alert-with-icon" data-notify="container">
+   <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+       <i class="tim-icons icon-simple-remove"></i>
+   </button>
+   <span data-notify="icon" class="tim-icons icon-bell-55"></span>
+   <span data-notify="message">This is a notification with close button and icon.</span>
+</div>
+<div class="alert alert-info alert-with-icon" data-notify="container">
+   <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+       <i class="tim-icons icon-simple-remove"></i>
+   </button>
+   <span data-notify="icon" class="tim-icons icon-bell-55"></span>
+   <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
+</div>
+ +

Notifications States

+ +
+
+ + Primary - This is a regular notification made with ".alert-primary" +
+ +
+ + Info - This is a regular notification made with ".alert-info" +
+
+ + Success - This is a regular notification made with ".alert-success" +
+
+ + Warning - This is a regular notification made with ".alert-warning" +
+
+ + Danger - This is a regular notification made with ".alert-danger" +
+
+
<div class="alert alert-primary">
+    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+        <i class="tim-icons icon-simple-remove"></i>
+    </button>
+    <span><b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
+</div>
+
+<div class="alert alert-info">
+    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+        <i class="tim-icons icon-simple-remove"></i>
+    </button>
+    <span><b> Info - </b> This is a regular notification made with ".alert-info"</span>
+</div>
+<div class="alert alert-success">
+    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+        <i class="tim-icons icon-simple-remove"></i>
+    </button>
+    <span><b> Success - </b> This is a regular notification made with ".alert-success"</span>
+</div>
+<div class="alert alert-warning">
+    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+        <i class="tim-icons icon-simple-remove"></i>
+    </button>
+    <span><b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
+</div>
+<div class="alert alert-danger">
+    <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+        <i class="tim-icons icon-simple-remove"></i>
+    </button>
+    <span><b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
+</div>
+ +
<!-- javascript for init -->
+type = ['','info','success','warning','danger'];
+
+function showNotification(from, align){
+  color = Math.floor((Math.random() * 4) + 1);
+
+  $.notify({
+      icon: "tim-icons icon-bell-55",
+      message: "Welcome to <b>Black Dashboard Pro</b> - a beautiful freebie for every web developer."
+
+    },{
+        type: type[color],
+        timer: 8000,
+        placement: {
+            from: from,
+            align: align
+        }
+    });
+}
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/plugins/chart-js.html b/docs/1.0/plugins/chart-js.html new file mode 100644 index 0000000..239efe3 --- /dev/null +++ b/docs/1.0/plugins/chart-js.html @@ -0,0 +1,994 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + +
+
    +
+
+ + +
+

Chart.js v2.7.2

+

+

Simple yet flexible JavaScript charting for designers & developers. Made by our friends from Charts.js. Please check the full documentation</a>.

+ +
+ + +
+
<!-- markup -->
+<canvas id="lineChartExample"></canvas>
+ +
<!-- javascript init -->
+// General configuration for the charts with Line gradientStroke
+gradientChartOptionsConfiguration =  {
+  maintainAspectRatio: false,
+  legend: {
+        display: false
+   },
+
+   tooltips: {
+     backgroundColor: '#fff',
+     titleFontColor: '#333',
+     bodyFontColor: '#666',
+     bodySpacing: 4,
+     xPadding: 12,
+     mode: "nearest",
+     intersect: 0,
+     position: "nearest"
+   },
+   responsive: true,
+   scales:{
+     yAxes: [{
+       barPercentage: 1.6,
+           gridLines: {
+             drawBorder: false,
+               color: 'rgba(29,140,248,0.0)',
+               zeroLineColor: "transparent",
+           },
+           ticks: {
+             suggestedMin:50,
+             suggestedMax: 110,
+               padding: 20,
+               fontColor: "#9a9a9a"
+           }
+         }],
+
+     xAxes: [{
+       barPercentage: 1.6,
+           gridLines: {
+             drawBorder: false,
+               color: 'rgba(220,53,69,0.1)',
+               zeroLineColor: "transparent",
+           },
+           ticks: {
+               padding: 20,
+               fontColor: "#9a9a9a"
+           }
+         }]
+     }
+};
+
+var ctx = document.getElementById("lineChartExample").getContext("2d");
+
+var gradientStroke = ctx.createLinearGradient(0,230,0,50);
+
+gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
+gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
+gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
+
+var data = {
+  labels: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
+  datasets: [{
+    label: "Data",
+    fill: true,
+    backgroundColor: gradientStroke,
+    borderColor: '#d048b6',
+    borderWidth: 2,
+    borderDash: [],
+    borderDashOffset: 0.0,
+    pointBackgroundColor: '#d048b6',
+    pointBorderColor:'rgba(255,255,255,0)',
+    pointHoverBackgroundColor: '#d048b6',
+    pointBorderWidth: 20,
+    pointHoverRadius: 4,
+    pointHoverBorderWidth: 15,
+    pointRadius: 4,
+    data: [ 60,110,70,100, 75, 90, 80, 100, 70, 80, 120, 80],
+  }]
+};
+
+var myChart = new Chart(ctx, {
+  type: 'line',
+  data: data,
+  options: gradientChartOptionsConfiguration
+});
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/plugins/datetimepicker.html b/docs/1.0/plugins/datetimepicker.html new file mode 100644 index 0000000..a43c75a --- /dev/null +++ b/docs/1.0/plugins/datetimepicker.html @@ -0,0 +1,934 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + +
+
    +
+
+ + +
+

DateTimePicker v4.17.47

+

+

We have created the design of the date-time picker made by Eonasdan. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.

+ +

For more information please check Full Github Documentation.

+ +

Here is a coded example:

+ +
+ +
+ + +
+
+
<!-- input with datetimepicker -->
+<div class="form-group">
+    <label class="label-control">Datetime Picker</label>
+    <input type="text" class="form-control datetimepicker" value="10/05/2018"/>
+</div>
+ +
<!-- javascript for init -->
+$('.datetimepicker').datetimepicker({
+    icons: {
+      time: "tim-icons icon-watch-time",
+      date: "tim-icons icon-calendar-60",
+      up: "fa fa-chevron-up",
+      down: "fa fa-chevron-down",
+      previous: 'tim-icons icon-minimal-left',
+      next: 'tim-icons icon-minimal-right',
+      today: 'fa fa-screenshot',
+      clear: 'fa fa-trash',
+      close: 'fa fa-remove'
+    }
+});
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/plugins/perfect-scrollbar.html b/docs/1.0/plugins/perfect-scrollbar.html new file mode 100644 index 0000000..625dbca --- /dev/null +++ b/docs/1.0/plugins/perfect-scrollbar.html @@ -0,0 +1,915 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + +
+
    +
+
+ + +
+

Perfect Scrollbar v1.4.0

+

+

“Minimalistic but perfect custom scrollbar plugin.”

+ +

!IMPORTANT Perfect Scrollbar is applied on the .main-panel and .sidebar .sidebar-wrapper so we will have a nice scrollbar that is visible only when you actually scroll. Since it is changing the overflows of the CSS it is also affecting the child elements which have a scroll so please make sure that you add the class .ps-child to any element that should have scroll.

+ +

For more information please check Full Github Documentation.

+ +
<!-- javascript for activating the Perfect Scrollbar -->
+$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
+
+<!-- javascript for detroying the Perfect Scrollbar -->
+$('.main-panel').perfectScrollbar('destroy');
+
+<!-- javascript for updating the Perfect Scrollbar when the content of the page is changing -->
+$('.main-panel').perfectScrollbar('update');
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/1.0/plugins/sweet-alert-2.html b/docs/1.0/plugins/sweet-alert-2.html new file mode 100644 index 0000000..18f1f54 --- /dev/null +++ b/docs/1.0/plugins/sweet-alert-2.html @@ -0,0 +1,913 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Black Dashboard Flask by Creative Tim + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to main content +
+
+ + + + +
+
+
+ + +
+ + +
+
    +
+
+ + +
+

Sweet Alert 2

+

+

If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colors for the plugin provided by Tristan Edwards.

+ +

For more information please check Full Documentation

+ +
+ + + +
+
<!-- markup -->
+<button class="btn btn-primary btn-fill" onclick='swal({ title:"Good job!", text: "You clicked the button!", type: "success", buttonsStyling: false, confirmButtonClass: "btn btn-success"})'>Try me!</button>
+    <!-- for more actions that you can use onclick, please check out assets/assets-for-demo/js/demo.js -->
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +