/*! Mustard UI v0.0.5 MIT License https://mustard-ui.com */* { margin: 0; padding: 0; } html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } body { display: flex; flex-direction: column; min-height: 100vh; background-color: #fff; } main { flex: 1; } .float-left { float: left; } .float-right { float: right; } .clear-fix::before, .clear-fix::after { content: ""; display: table; } .clear-fix::after { clear: both; } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .container { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 30px 0; } .container-small { max-width: 768px; } .container-large { max-width: 1440px; } .display-flex { display: flex; justify-content: space-around; } .display-none { display: none; } .display-sm-up { display: none; } @media (min-width: 425px) { .display-sm-up { display: initial; } }.display-md-up { display: none; } @media (min-width: 768px) { .display-md-up { display: initial; } }.display-lg-up { display: none; } @media (min-width: 1024px) { .display-lg-up { display: initial; } }.display-xlg-up { display: none; } @media (min-width: 1440px) { .display-xlg-up { display: initial; } }.display-sm-down { display: none; } @media (max-width: 424px) { .display-sm-down { display: initial; } }.display-md-down { display: none; } @media (max-width: 767px) { .display-md-down { display: initial; } }.display-lg-down { display: none; } @media (max-width: 1023px) { .display-lg-down { display: initial; } }.display-xlg-down { display: none; } @media (max-width: 1439px) { .display-xlg-down { display: initial; } }.display-sm-to-md { display: none; } @media (min-width: 425px) and (max-width: 767px) { .display-sm-to-md { display: initial; } }.display-sm-to-lg { display: none; } @media (min-width: 425px) and (max-width: 1023px) { .display-sm-to-lg { display: initial; } }.display-sm-to-xlg { display: none; } @media (min-width: 425px) and (max-width: 1439px) { .display-sm-to-xlg { display: initial; } }.display-md-to-lg { display: none; } @media (min-width: 768px) and (max-width: 1023px) { .display-md-to-lg { display: initial; } }.display-md-to-xlg { display: none; } @media (min-width: 768px) and (max-width: 1439px) { .display-md-to-xlg { display: initial; } }.display-lg-to-xlg { display: none; } @media (min-width: 1024px) and (max-width: 1439px) { .display-lg-to-xlg { display: initial; } }.row { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 15px; margin-bottom: 15px; } .row.row-reverse { flex-direction: row-reverse; } .row .col { flex-grow: 1; flex-basis: 100%; max-width: 100%; padding: 5px 5px; } .row .col.col-reverse { flex-direction: column-reverse; } .row .col-xs-1 { flex-basis: 8.33333%; max-width: 8.33333%} .row .col-xs-2 { flex-basis: 16.66667%; max-width: 16.66667%} .row .col-xs-3 { flex-basis: 25%; max-width: 25%} .row .col-xs-4 { flex-basis: 33.33333%; max-width: 33.33333%} .row .col-xs-5 { flex-basis: 41.66667%; max-width: 41.66667%} .row .col-xs-6 { flex-basis: 50%; max-width: 50%} .row .col-xs-7 { flex-basis: 58.33333%; max-width: 58.33333%} .row .col-xs-8 { flex-basis: 66.66667%; max-width: 66.66667%} .row .col-xs-9 { flex-basis: 75%; max-width: 75%} .row .col-xs-10 { flex-basis: 83.33333%; max-width: 83.33333%} .row .col-xs-11 { flex-basis: 91.66667%; max-width: 91.66667%} .row .col-xs-12 { flex-basis: 100%; max-width: 100%} .row .col-xs-offset-1 { margin-left: 8.33333%} .row .col-xs-offset-2 { margin-left: 16.66667%} .row .col-xs-offset-3 { margin-left: 25%} .row .col-xs-offset-4 { margin-left: 33.33333%} .row .col-xs-offset-5 { margin-left: 41.66667%} .row .col-xs-offset-6 { margin-left: 50%} .row .col-xs-offset-7 { margin-left: 58.33333%} .row .col-xs-offset-8 { margin-left: 66.66667%} .row .col-xs-offset-9 { margin-left: 75%} .row .col-xs-offset-10 { margin-left: 83.33333%} .row .col-xs-offset-11 { margin-left: 91.66667%} .row .col-xs-offset-12 { margin-left: 100%} @media (min-width: 425px) { .row .col-sm-1 { flex-basis: 8.33333%; max-width: 8.33333%} .row .col-sm-2 { flex-basis: 16.66667%; max-width: 16.66667%} .row .col-sm-3 { flex-basis: 25%; max-width: 25%} .row .col-sm-4 { flex-basis: 33.33333%; max-width: 33.33333%} .row .col-sm-5 { flex-basis: 41.66667%; max-width: 41.66667%} .row .col-sm-6 { flex-basis: 50%; max-width: 50%} .row .col-sm-7 { flex-basis: 58.33333%; max-width: 58.33333%} .row .col-sm-8 { flex-basis: 66.66667%; max-width: 66.66667%} .row .col-sm-9 { flex-basis: 75%; max-width: 75%} .row .col-sm-10 { flex-basis: 83.33333%; max-width: 83.33333%} .row .col-sm-11 { flex-basis: 91.66667%; max-width: 91.66667%} .row .col-sm-12 { flex-basis: 100%; max-width: 100%} .row .col-sm-offset-1 { margin-left: 8.33333%} .row .col-sm-offset-2 { margin-left: 16.66667%} .row .col-sm-offset-3 { margin-left: 25%} .row .col-sm-offset-4 { margin-left: 33.33333%} .row .col-sm-offset-5 { margin-left: 41.66667%} .row .col-sm-offset-6 { margin-left: 50%} .row .col-sm-offset-7 { margin-left: 58.33333%} .row .col-sm-offset-8 { margin-left: 66.66667%} .row .col-sm-offset-9 { margin-left: 75%} .row .col-sm-offset-10 { margin-left: 83.33333%} .row .col-sm-offset-11 { margin-left: 91.66667%} .row .col-sm-offset-12 { margin-left: 100%} }@media (min-width: 768px) { .row .col-md-1 { flex-basis: 8.33333%; max-width: 8.33333%} .row .col-md-2 { flex-basis: 16.66667%; max-width: 16.66667%} .row .col-md-3 { flex-basis: 25%; max-width: 25%} .row .col-md-4 { flex-basis: 33.33333%; max-width: 33.33333%} .row .col-md-5 { flex-basis: 41.66667%; max-width: 41.66667%} .row .col-md-6 { flex-basis: 50%; max-width: 50%} .row .col-md-7 { flex-basis: 58.33333%; max-width: 58.33333%} .row .col-md-8 { flex-basis: 66.66667%; max-width: 66.66667%} .row .col-md-9 { flex-basis: 75%; max-width: 75%} .row .col-md-10 { flex-basis: 83.33333%; max-width: 83.33333%} .row .col-md-11 { flex-basis: 91.66667%; max-width: 91.66667%} .row .col-md-12 { flex-basis: 100%; max-width: 100%} .row .col-md-offset-1 { margin-left: 8.33333%} .row .col-md-offset-2 { margin-left: 16.66667%} .row .col-md-offset-3 { margin-left: 25%} .row .col-md-offset-4 { margin-left: 33.33333%} .row .col-md-offset-5 { margin-left: 41.66667%} .row .col-md-offset-6 { margin-left: 50%} .row .col-md-offset-7 { margin-left: 58.33333%} .row .col-md-offset-8 { margin-left: 66.66667%} .row .col-md-offset-9 { margin-left: 75%} .row .col-md-offset-10 { margin-left: 83.33333%} .row .col-md-offset-11 { margin-left: 91.66667%} .row .col-md-offset-12 { margin-left: 100%} }@media (min-width: 1024px) { .row .col-lg-1 { flex-basis: 8.33333%; max-width: 8.33333%} .row .col-lg-2 { flex-basis: 16.66667%; max-width: 16.66667%} .row .col-lg-3 { flex-basis: 25%; max-width: 25%} .row .col-lg-4 { flex-basis: 33.33333%; max-width: 33.33333%} .row .col-lg-5 { flex-basis: 41.66667%; max-width: 41.66667%} .row .col-lg-6 { flex-basis: 50%; max-width: 50%} .row .col-lg-7 { flex-basis: 58.33333%; max-width: 58.33333%} .row .col-lg-8 { flex-basis: 66.66667%; max-width: 66.66667%} .row .col-lg-9 { flex-basis: 75%; max-width: 75%} .row .col-lg-10 { flex-basis: 83.33333%; max-width: 83.33333%} .row .col-lg-11 { flex-basis: 91.66667%; max-width: 91.66667%} .row .col-lg-12 { flex-basis: 100%; max-width: 100%} .row .col-lg-offset-1 { margin-left: 8.33333%} .row .col-lg-offset-2 { margin-left: 16.66667%} .row .col-lg-offset-3 { margin-left: 25%} .row .col-lg-offset-4 { margin-left: 33.33333%} .row .col-lg-offset-5 { margin-left: 41.66667%} .row .col-lg-offset-6 { margin-left: 50%} .row .col-lg-offset-7 { margin-left: 58.33333%} .row .col-lg-offset-8 { margin-left: 66.66667%} .row .col-lg-offset-9 { margin-left: 75%} .row .col-lg-offset-10 { margin-left: 83.33333%} .row .col-lg-offset-11 { margin-left: 91.66667%} .row .col-lg-offset-12 { margin-left: 100%} }@media (min-width: 1440px) { .row .col-xlg-1 { flex-basis: 8.33333%; max-width: 8.33333%} .row .col-xlg-2 { flex-basis: 16.66667%; max-width: 16.66667%} .row .col-xlg-3 { flex-basis: 25%; max-width: 25%} .row .col-xlg-4 { flex-basis: 33.33333%; max-width: 33.33333%} .row .col-xlg-5 { flex-basis: 41.66667%; max-width: 41.66667%} .row .col-xlg-6 { flex-basis: 50%; max-width: 50%} .row .col-xlg-7 { flex-basis: 58.33333%; max-width: 58.33333%} .row .col-xlg-8 { flex-basis: 66.66667%; max-width: 66.66667%} .row .col-xlg-9 { flex-basis: 75%; max-width: 75%} .row .col-xlg-10 { flex-basis: 83.33333%; max-width: 83.33333%} .row .col-xlg-11 { flex-basis: 91.66667%; max-width: 91.66667%} .row .col-xlg-12 { flex-basis: 100%; max-width: 100%} .row .col-xlg-offset-1 { margin-left: 8.33333%} .row .col-xlg-offset-2 { margin-left: 16.66667%} .row .col-xlg-offset-3 { margin-left: 25%} .row .col-xlg-offset-4 { margin-left: 33.33333%} .row .col-xlg-offset-5 { margin-left: 41.66667%} .row .col-xlg-offset-6 { margin-left: 50%} .row .col-xlg-offset-7 { margin-left: 58.33333%} .row .col-xlg-offset-8 { margin-left: 66.66667%} .row .col-xlg-offset-9 { margin-left: 75%} .row .col-xlg-offset-10 { margin-left: 83.33333%} .row .col-xlg-offset-11 { margin-left: 91.66667%} .row .col-xlg-offset-12 { margin-left: 100%} }.section, section { padding: 30px; } .section :last-child, section :last-child { margin-bottom: 0; } .section-primary { background: #ffca28; } .section-secondary { background: #f5f5f5; } .section-tertiary { background: #fff; } blockquote { display: block; margin: 15px 15px 30px; padding: 15px; font-size: 18px; font-weight: 400; border-left: 4px solid #4caf50; background: #fff; } blockquote :last-child { margin-bottom: 0; } .button, button, input[type='button'], input[type='reset'], input[type='submit'] { display: inline-block; height: 40px; margin: 0 2px 15px; padding: 0 20px; width: auto; background: none; overflow: visible; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all .1s ease-out; font-size: 14px; font-weight: 600; color: inherit; line-height: 40px; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; white-space: nowrap; border-radius: 4px; border-style: solid; border-width: 1px; } .button:focus, button:focus, input[type='button']:focus, input[type='reset']:focus, input[type='submit']:focus { outline: none; } .button:focus, .button:hover, button:focus, button:hover, input[type='button']:focus, input[type='button']:hover, input[type='reset']:focus, input[type='reset']:hover, input[type='submit']:focus, input[type='submit']:hover { opacity: 0.85; cursor: pointer; transform: scale(1.025); } .button:active, button:active, input[type='button']:active, input[type='reset']:active, input[type='submit']:active { opacity: 1; transform: scale(1); } .button:disabled, button:disabled, input[type='button']:disabled, input[type='reset']:disabled, input[type='submit']:disabled { opacity: 0.5; } .button:disabled:hover, button:disabled:hover, input[type='button']:disabled:hover, input[type='reset']:disabled:hover, input[type='submit']:disabled:hover { cursor: not-allowed; } .button-primary { background-color: #4caf50; color: #fff; border-color: #4caf50; } .button-primary-outlined { background-color: #fff; color: #4caf50; border-color: #4caf50; } .button-primary-text { color: #4caf50; border-color: transparent; } .button-success { background-color: #4caf50; color: #fff; border-color: #4caf50; } .button-success-outlined { background-color: #fff; color: #4caf50; border-color: #4caf50; } .button-success-text { color: #4caf50; border-color: transparent; } .button-info { background-color: #9e9e9e; color: #fff; border-color: #9e9e9e; } .button-info-outlined { background-color: #fff; color: #9e9e9e; border-color: #9e9e9e; } .button-info-text { color: #9e9e9e; border-color: transparent; } .button-warning { background-color: #ffb300; color: #fff; border-color: #ffb300; } .button-warning-outlined { background-color: #fff; color: #ffb300; border-color: #ffb300; } .button-warning-text { color: #ffb300; border-color: transparent; } .button-danger { background-color: #f44336; color: #fff; border-color: #f44336; } .button-danger-outlined { background-color: #fff; color: #f44336; border-color: #f44336; } .button-danger-text { color: #f44336; border-color: transparent; } .button-round { border-radius: 24px; } .button-large { height: 48px; line-height: 48px; padding: 0 30px; font-size: 16px; } .button-small { height: 30px; line-height: 30px; padding: 0 15px; font-size: 12px; } pre { display: block; margin: 15px 0; padding: 10px 15px; border-left: 4px solid #4caf50; background: #f5f5f5; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 15px; color: #212121; white-space: normal; overflow-x: auto; } code { background: #f5f5f5; color: #212121; font-family: Monaco, 'Courier New', Courier, monospace; white-space: pre; } .form-control { position: relative; margin-bottom: 10px; } .form-control-group { display: flex; justify-content: flex-start; } .form-control-group .form-control { flex: 1; padding-right: 15px; } .form-control-group .form-control:last-of-type { padding-right: 0; } .form-control-group .form-control.grow-1x { flex-grow: 1; } .form-control-group .form-control.grow-2x { flex-grow: 2; } .form-control-group .form-control.grow-3x { flex-grow: 3; } .validation-error { margin-top: 2px; font-size: 12px; color: #f44336; } label { font-size: 14px; font-weight: 400; } input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], input[type="text"], input[type="password"], select { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; padding: 10px; line-height: 20px; font-size: 16px; font-weight: inherit; background: #fff; border-radius: 5px; border: 1px solid #bdbdbd; } input::-webkit-input-placeholder, select::-webkit-input-placeholder, fieldset::-webkit-input-placeholder { color: #9e9e9e; } input:-ms-input-placeholder, select:-ms-input-placeholder, fieldset:-ms-input-placeholder { color: #9e9e9e; } input::-ms-input-placeholder, select::-ms-input-placeholder, fieldset::-ms-input-placeholder { color: #9e9e9e; } input::placeholder, select::placeholder, fieldset::placeholder { color: #9e9e9e; } input:focus, select:focus, fieldset:focus { outline: none; border-color: #4caf50; } input.invalid, input:invalid, select.invalid, select:invalid, fieldset.invalid, fieldset:invalid { border-color: #f44336; } fieldset { margin: 15px 0; padding: 15px; font-size: 14px; border: 1px solid #bdbdbd; border-radius: 5px; } fieldset legend { padding: 0 5px; } input[type="checkbox"], input[type="radio"] { margin-right: 10px; } input[type="range"] { -webkit-appearance: range; -moz-appearance: range; appearance: range; } input[type="color"] { display: initial; padding: 0 !important; height: 42px; } select { background-color: #fff; background-image: linear-gradient(45deg, transparent 50%, #bdbdbd 50%), linear-gradient(135deg, #bdbdbd 50%, transparent 50%), linear-gradient(to right, #bdbdbd, #bdbdbd); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; padding-right: 30px; } select:hover { cursor: pointer; } select:disabled { opacity: 0.5; } select:focus { background-image: linear-gradient(45deg, transparent 50%, #4caf50 50%), linear-gradient(135deg, #4caf50 50%, transparent 50%), linear-gradient(to right, #4caf50, #4caf50); } textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; padding: 10px 15px; min-height: 100px; font-size: 16px; font-weight: 300; line-height: 1.4; color: #000; background-color: #fff; border: 1px solid #bdbdbd; border-radius: 5px; } textarea::-webkit-input-placeholder { color: #9e9e9e; } textarea:-ms-input-placeholder { color: #9e9e9e; } textarea::-ms-input-placeholder { color: #9e9e9e; } textarea::placeholder { color: #9e9e9e; } textarea:focus { outline: none; border-color: #4caf50; } textarea.invalid, textarea:invalid { border-color: #ef9a9a; } a { text-decoration: none; color: #4caf50; font-weight: 400; transition: opacity .1s ease-out; } a:focus, a:hover { opacity: 0.75; } a:active { opacity: 1; } ul, ol, dl { list-style: none; margin-bottom: 15px; } ul { list-style: circle inside; } ol { list-style: decimal inside; } table { margin: 15px 0; width: 100%; border-spacing: 0; border-collapse: collapse; } table tr { border-bottom: 1px solid #eee; text-align: left; } table thead th { padding: 15px; font-weight: 300; color: #9e9e9e; } table tbody td { padding: 15px; font-weight: 300; } body { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 1.6; font-weight: 300; color: #424242; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; font-weight: 300; color: #424242; margin: 0 0 10px; font-weight: 600; } .h1, h1 { font-size: 40px; line-height: 60px; } .h2, h2 { font-size: 28px; line-height: 52px; } .h3, h3 { font-size: 26; line-height: 44px; } .h4, h4 { font-size: 24px; line-height: 40px; } .h5, h5 { font-size: 22px; line-height: 36px; } .h6, h6 { font-size: 20px; line-height: 32px; } p { margin-bottom: 15px; } p.magnify { font-size: 17.6px; line-height: 1.8; } strong, b { font-weight: 600; } .alert { margin: 15px 0; padding: 15px; border-radius: 5px; } .alert-danger { background: #ffebee; } .alert-info { background: #e3f2fd; } .alert-warning { background: #fff8e1; } .alert-success { background: #e8f5e9; } .breadcrumbs { display: flex; list-style: none; font-size: 14px; } .breadcrumbs li { display: block; } .breadcrumbs li::after { display: inline-block; content: "/"; padding: 0 5px; color: #9e9e9e; } .breadcrumbs li:last-of-type::after { display: none; } .card { margin: 15px; padding: 30px; background: #fff; overflow: hidden; border-radius: 5px; box-shadow: 0 4px 12px rgba(224, 224, 224, 0.5); } .card-title { font-size: 24px; margin-bottom: 5px; } .card-actions { display: flex; align-items: center; margin-top: 30px; list-style: none; justify-content: space-around; } .card-actions>* { margin-bottom: 0; } .footer, footer { padding: 30px; width: 100%; background: #757575; } .footer .copyright, footer .copyright { margin: 0; padding-top: 30px; font-size: 14px; color: #fff; border-top: 1px solid #9e9e9e; } .footer .copyright a, footer .copyright a { color: #bdbdbd; } .footer-text p { color: #fff; } .footer-links-category { color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .footer-links { list-style: none; } .footer-links li { margin-top: 5px; } .footer-links a { color: #bdbdbd; } header, .header { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 15px; height: 100vh; background: #ffc107; } header .title, .header .title { font-size: 50px; line-height: 50px; font-weight: 400; color: #424242; text-align: center; } @media (min-width: 768px) { header .title, .header .title { font-size: 60px; line-height: 60px; } }header .subtitle, .header .subtitle { font-size: 18px; line-height: 26px; font-weight: 300; color: #424242; text-align: center; } @media (min-width: 768px) { header .subtitle, .header .subtitle { font-size: 25.2px; line-height: 25.2px; } }header .disclaimer, .header .disclaimer { font-size: 12px; color: #424242; text-align: center; } header .scroll-down, .header .scroll-down { opacity: 1; transition: all .5s ease-in 3s; } header .scroll-down, .header .scroll-down { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 45px; left: 50%; margin-left: -16px; width: 32px; height: 32px; border: 2px solid #424242; border-radius: 50%; animation: bounce 2s infinite 2s; transition: all .2s ease-in; } header .scroll-down::before, .header .scroll-down::before { display: block; position: relative; bottom: 2px; content: ''; transform: rotate(-45deg); width: 12px; height: 12px; border: 2px solid #424242; border-width: 0px 0 2px 2px; } @keyframes bounce { 0%, 100%, 20%, 50%, 80% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }.menu { display: inline-block; list-style: none; background: #fff; border-radius: 5px; box-shadow: 0 4px 12px rgba(158, 158, 158, 0.5); } .menu li a { display: block; padding: 10px 30px; border-bottom: 1px solid #eee; } .menu li a:focus, .menu li a:hover { background: #fafafa; } .modal-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(97, 97, 97, 0.5); z-index: 10; } .modal { display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 50%; left: 50%; max-width: 540px; transform: translate(-50%, -50%); background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 12px rgba(117, 117, 117, 0.5); } .modal-head { padding: 10px 15px; } .modal-head .modal-title { font-size: 24px; } .modal-body { flex: 1; padding: 30px 15px; background: #eee; } .modal-footer { padding: 15px; } .modal-footer>* { margin-bottom: 0; } nav, .nav { padding: 0 15px; height: 60px; width: 100%; background: #ffc107; } nav a, .nav a { display: block; color: #424242; } .nav-container { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 0px; } .nav-logo { display: flex; align-items: center; font-size: 32px; line-height: 32px; } .nav-links { display: none; list-style: none; margin: 0; height: 100%} @media (min-width: 268px) { .nav-links { display: flex; } }.nav-links li, .nav-links a { height: 100%} .nav-links a { display: flex; align-items: center; padding: 0 0.6em; } .nav-links a:active { color: #4caf50; } .nav-links a.active { border-bottom: 4px solid #4caf50; } .mobile-menu-toggle { display: block; position: relative; height: 20px; width: 26px; } @media (min-width: 768px) { .mobile-menu-toggle { display: none; } }.mobile-menu-toggle:focus, .mobile-menu-toggle:hover { cursor: pointer; } .mobile-menu-toggle::before { position: absolute; top: 0; left: 0; width: 26px; height: 4px; content: ''; background: #424242; border-radius: 4px; box-shadow: 0 8px 0 0 #424242, 0 16px 0 0 #424242; } .pagination { display: flex; list-style: none; margin: 15px 0; } .pagination li { margin: 0 5px; } .pagination li a { display: block; padding: 5px 10px; border-radius: 5px; background: #fff; border: 1px solid #e0e0e0; } .pagination li a.active, .pagination li a:focus, .pagination li a:hover { opacity: 1; border-color: #4caf50; } .pagination li a.active { background: #4caf50; color: #fff; } .pagination li a:active { transform: scale(0.95); } .panel { background: #fff; border-radius: 5px; overflow: hidden; margin: 30px 0; box-shadow: 0 4px 12px rgba(224, 224, 224, 0.5); } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 10px 15px; background: #fafafa; } .panel-head .panel-title { font-size: 28px; } .panel-body { padding: 30px 15px; } .panel-footer { padding: 15px; background: #fafafa; } .panel-footer>* { margin-bottom: 0; } .pricing-table .package { display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; margin: 15px; padding: 30px; border: 1px solid #e0e0e0; border-radius: 5px; text-align: center; background: #fff; } .pricing-table .package.featured { border-color: #4caf50; border-width: 2px; } .pricing-table .package.featured .package-name { color: #4caf50; } .pricing-table .package hr { border: 0; border-bottom: 1px solid #e0e0e0; height: 1px; } .pricing-table .package .package-name { font-weight: 700; text-transform: uppercase; } .pricing-table .package .price { margin: 15px 0 0 0; font-size: 36px; line-height: 1.2; } .pricing-table .package .price-disclaimer { font-size: 12px; } .pricing-table .package .features { flex: 1; padding: 15px; list-style: none; } .pricing-table .package .features li { margin-bottom: 5px; } .progress-bar { position: relative; margin: 15px 0; height: 20px; background: #eee; border-radius: 5px; overflow: hidden; } .progress-bar>span { display: block; position: absolute; height: 100%; border-radius: 4px; overflow: hidden; } .progress-bar>span.progress-bar-green { background: #66bb6a; } .progress-bar>span.progress-bar-blue { background: #42a5f5; } .progress-bar>span.progress-bar-red { background: #ef5350; } .progress-bar.striped>span:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-size: 50px 50px; overflow: hidden; } .progress-bar.animated>span:after { animation: move 2s linear infinite; } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }.sidebar { padding: 15px; } .sidebar-left { border-right: 1px solid #e0e0e0; } .sidebar-right { border-left: 1px solid #e0e0e0; } .sidebar-category { padding: 10px; font-size: 18px; color: #757575; border-bottom: 1px solid #e0e0e0; background: url('data:image/svg+xml; utf8, ') center right no-repeat; } .sidebar-category:focus, .sidebar-category:hover { cursor: pointer; opacity: 0.75; } .sidebar-links { list-style: none; padding-left: 10px; } .sidebar-links a { display: block; padding: 5px 10px; } .sidebar-links a.active { font-weight: 700; } .stepper { margin: 30px 15px; } .stepper .step { position: relative; padding: 0 30px; margin-bottom: 30px; border-left: 1px solid #bdbdbd; } .stepper .step:last-of-type { border: none; } .stepper .step .step-number { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: -18px; height: 36px; width: 36px; z-index: 1; font-weight: 600; color: #fff; background: #8bc34a; border-radius: 50%; box-shadow: 0 2px 4px #e0e0e0; } .stepper .step .step-title { margin: 0; font-weight: 600; font-size: 20px; line-height: 36px; } .tabs { list-style: none; display: flex; margin: 15px 0 30px; } .tabs .tab { padding: 8px 45px; border-bottom: 1px solid #e0e0e0; color: #bdbdbd; } .tabs .tab.active { border-top: 2px solid #4caf50; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-bottom: none; color: #757575; } .tabs .tab:focus, .tabs .tab:hover { opacity: 1; color: #424242; } .tags { display: flex; flex-wrap: wrap; list-style: none; } .tags .tag { margin-right: 5px; padding: 5px 15px; font-size: 14px; font-weight: 400; border-radius: 4px; color: #fff; background: #9e9e9e; box-shadow: 0 2px 4px #eee; } .tags .tag a { display: block; color: #fff; } .tags .tag-rounded { border-radius: 16px; } .tags .tag-blue { background: #2196f3; } .tags .tag-red { background: #f44336; } .tags .tag-green { background: #4caf50; } .tags .tag-orange { background: #ff9800; } .tooltip { display: inline-block; position: relative; border-bottom: 1px dashed #bdbdbd; } .tooltip:focus, .tooltip:hover { cursor: pointer; } .tooltip:focus .tooltip-text, .tooltip:hover .tooltip-text { display: block; } .tooltip-text { display: none; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); min-width: 300px; padding: 10px 15px; color: #fff; text-align: center; background: #424242; border-radius: 5px; box-shadow: 0 2px 4px #9e9e9e; } .tooltip-text::after { position: absolute; content: ''; top: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: #424242 transparent transparent; } /*# sourceMappingURL=mustard-ui.min.css.map */