/*! * @name siimple 3.3.1 * @description Minimal CSS framework for flat and clean designs. * @homepage https://www.siimple.xyz/ * @repository https://github.com/siimple/siimple * @bugs https://github.com/siimple/siimple/issues * @license MIT **/ @charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Roboto:400,700); html { font-family: "Roboto", sans-serif; font-weight: 400; font-size: 16px; color: #546778; font-smooth: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; } .siimple-layout { display: block; overflow-x: hidden; width: 100%; height: 100%; font-family: "Roboto", sans-serif; font-size: 16px; color: #546778; font-weight: normal; } .siimple-layout--left { float: left; } .siimple-layout--right { float: right; } .siimple-brand { font-family: "Montserrat", "Roboto", sans-serif; } .siimple-blockquote { display: block; color: #879aab; font-size: 16px; line-height: 24px; border-left: 4px solid #879aab; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; padding-left: 20px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; } .siimple-code { color: #ee675d; text-decoration: none; font-size: 13px; font-weight: 600; background-color: #eef2f7; border-radius: 3px; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; } .siimple-code--dark { background-color: #546778 !important; color: #ffffff; } .siimple-h1 { display: block; font-size: 40px; font-weight: 600; line-height: 51px; color: #546778; padding: 0px; margin-bottom: 0.5em; } .siimple-h1:not(:first-child) { margin-top: 30px; } .siimple-h2 { display: block; font-size: 32px; font-weight: 600; line-height: 40px; color: #546778; padding: 0px; margin-bottom: 0.5em; } .siimple-h2:not(:first-child) { margin-top: 30px; } .siimple-h3 { display: block; font-size: 28px; font-weight: 600; line-height: 29px; color: #546778; padding: 0px; margin-bottom: 0.5em; } .siimple-h3:not(:first-child) { margin-top: 30px; } .siimple-h4 { display: block; font-size: 24px; font-weight: 600; line-height: 25px; color: #546778; padding: 0px; margin-bottom: 0.5em; } .siimple-h4:not(:first-child) { margin-top: 30px; } .siimple-h5 { display: block; font-size: 20px; font-weight: 600; line-height: 22px; color: #546778; padding: 0px; margin-bottom: 0.5em; } .siimple-h5:not(:first-child) { margin-top: 30px; } .siimple-h6 { display: block; font-size: 16px; font-weight: 600; line-height: 20px; color: #546778; padding: 0px; margin-bottom: 0.5em; } .siimple-h6:not(:first-child) { margin-top: 30px; } .siimple-link { color: #4e91e4; font-weight: 600; text-decoration: none; transition: color 0.3s; cursor: pointer; } .siimple-link:hover { color: #1b5eb1; } .siimple-paragraph, .siimple-p { display: block; line-height: 24px; font-size: 16px; margin-top: 0px; margin-bottom: 20px; } .siimple-paragraph--lead, .siimple-p--lead { font-size: 20px; line-height: 30px; } .siimple-pre { display: block; overflow-x: auto; width: calc(100% - 2 * 15px); color: #546778; line-height: 22px; font-size: 14px; background-color: #eef2f7; border-radius: 5px; padding: 15px; margin-bottom: 20px; margin-top: 0px; } .siimple-pre--dark { background-color: #546778 !important; color: #ffffff; } .siimple-small { font-size: 13px; color: #879aab; } .siimple-btn { display: inline-block; transition: background-color 0.3s; cursor: pointer; line-height: 24px; text-align: center; text-decoration: none; font-size: 16px; padding-left: 15px; padding-right: 15px; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; border: 0px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .siimple-btn:hover { text-decoration: none; background-color: #eef2f7; } .siimple-btn.siimple-btn--primary { background-color: #4e91e4; color: #ffffff; } .siimple-btn.siimple-btn--primary:hover { background-color: #1b5eb1; } .siimple-btn.siimple-btn--success { background-color: #4acf7f; color: #ffffff; } .siimple-btn.siimple-btn--success:hover { background-color: #268d4f; } .siimple-btn.siimple-btn--warning { background-color: #fbc850; color: #ffffff; } .siimple-btn.siimple-btn--warning:hover { background-color: #e09f05; } .siimple-btn.siimple-btn--error { background-color: #ee675d; color: #ffffff; } .siimple-btn.siimple-btn--error:hover { background-color: #cf2316; } .siimple-btn.siimple-btn--dark { background-color: #546778; color: #ffffff; } .siimple-btn.siimple-btn--dark:hover { background-color: #2a343c; } .siimple-btn.siimple-btn--light { background-color: #dde5ee; color: #546778; } .siimple-btn.siimple-btn--light:hover { background-color: #cbd8e6; } .siimple-btn.siimple-btn--navy { background-color: #546778; color: #ffffff; } .siimple-btn.siimple-btn--green { background-color: #93d260; color: #ffffff; } .siimple-btn.siimple-btn--teal { background-color: #60d2b6; color: #ffffff; } .siimple-btn.siimple-btn--blue { background-color: #4e91e4; color: #ffffff; } .siimple-btn.siimple-btn--purple { background-color: #ac94e8; color: #ffffff; } .siimple-btn.siimple-btn--pink { background-color: #e77eb8; color: #ffffff; } .siimple-btn.siimple-btn--red { background-color: #ee675d; color: #ffffff; } .siimple-btn.siimple-btn--orange { background-color: #f78055; color: #ffffff; } .siimple-btn.siimple-btn--yellow { background-color: #fbc850; color: #ffffff; } .siimple-btn.siimple-btn--grey { background-color: #dde5ee; color: #546778; } .siimple-btn--disabled { opacity: 0.6 !important; cursor: not-allowed !important; } .siimple-btn--small { padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; line-height: 16px; } .siimple-btn--big { padding-left: 20px; padding-right: 20px; padding-top: 9px; padding-bottom: 9px; font-size: 20px; line-height: 30px; } .siimple-btn--fluid { width: 100%; padding-left: 0px !important; padding-right: 0px !important; } .siimple-btn--rounded { border-radius: 50px !important; } .siimple-btn-group { display: inline-block; } .siimple-btn-group > .siimple-btn:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: -1px; } .siimple-btn-group > .siimple-btn:not(:last-child) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; margin-right: -2px; } .siimple-close { display: inline-block; width: 20px; height: 20px; cursor: pointer; transition: background-color 0.3s; position: relative; border-radius: 100px; background-color: rgba(84, 103, 120, 0.3); } .siimple-close:after, .siimple-close:before { content: ""; display: block; width: 12px; height: 2px; position: absolute; top: 9px; left: 4px; background-color: #ffffff; } .siimple-close:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .siimple-close:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .siimple-close:hover { background-color: rgba(84, 103, 120, 0.5); } .siimple-rule { display: block; height: 2px; background-color: #dde5ee; padding: 0px; margin-top: 15px; margin-bottom: 15px; border: 0px; } .siimple-rule:first-child { margin-top: 0px !important; } .siimple-rule:last-child { margin-bottom: 0px !important; } @-webkit-keyframes siimple-spinner-animation { 50% { background-color: transparent; } } @keyframes siimple-spinner-animation { 50% { background-color: transparent; } } .siimple-spinner { width: 10px; height: 10px; content: ""; -webkit-animation: siimple-spinner-animation 1s infinite ease-in-out; animation: siimple-spinner-animation 1s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; border-radius: 100px; display: block; text-indent: -9999em; font-size: 10px; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: 0.33s; animation-delay: 0.33s; margin-left: auto; margin-right: auto; margin-top: 0px; } .siimple-spinner:before { width: 10px; height: 10px; content: ""; -webkit-animation: siimple-spinner-animation 1s infinite ease-in-out; animation: siimple-spinner-animation 1s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; border-radius: 100px; position: absolute; left: calc(15px * -1); top: 0; } .siimple-spinner:after { width: 10px; height: 10px; content: ""; -webkit-animation: siimple-spinner-animation 1s infinite ease-in-out; animation: siimple-spinner-animation 1s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; border-radius: 100px; -webkit-animation-delay: 0.66s; animation-delay: 0.66s; position: absolute; left: 15px; top: 0; } .siimple-spinner.siimple-spinner--primary, .siimple-spinner.siimple-spinner--primary:after, .siimple-spinner.siimple-spinner--primary:before { background-color: #4e91e4; } .siimple-spinner.siimple-spinner--success, .siimple-spinner.siimple-spinner--success:after, .siimple-spinner.siimple-spinner--success:before { background-color: #4acf7f; } .siimple-spinner.siimple-spinner--warning, .siimple-spinner.siimple-spinner--warning:after, .siimple-spinner.siimple-spinner--warning:before { background-color: #fbc850; } .siimple-spinner.siimple-spinner--error, .siimple-spinner.siimple-spinner--error:after, .siimple-spinner.siimple-spinner--error:before { background-color: #ee675d; } .siimple-spinner.siimple-spinner--dark, .siimple-spinner.siimple-spinner--dark:after, .siimple-spinner.siimple-spinner--dark:before { background-color: #546778; } .siimple-spinner.siimple-spinner--light, .siimple-spinner.siimple-spinner--light:after, .siimple-spinner.siimple-spinner--light:before { background-color: #dde5ee; } .siimple-spinner.siimple-spinner--navy, .siimple-spinner.siimple-spinner--navy:after, .siimple-spinner.siimple-spinner--navy:before { background-color: #546778; } .siimple-spinner.siimple-spinner--green, .siimple-spinner.siimple-spinner--green:after, .siimple-spinner.siimple-spinner--green:before { background-color: #93d260; } .siimple-spinner.siimple-spinner--teal, .siimple-spinner.siimple-spinner--teal:after, .siimple-spinner.siimple-spinner--teal:before { background-color: #60d2b6; } .siimple-spinner.siimple-spinner--blue, .siimple-spinner.siimple-spinner--blue:after, .siimple-spinner.siimple-spinner--blue:before { background-color: #4e91e4; } .siimple-spinner.siimple-spinner--purple, .siimple-spinner.siimple-spinner--purple:after, .siimple-spinner.siimple-spinner--purple:before { background-color: #ac94e8; } .siimple-spinner.siimple-spinner--pink, .siimple-spinner.siimple-spinner--pink:after, .siimple-spinner.siimple-spinner--pink:before { background-color: #e77eb8; } .siimple-spinner.siimple-spinner--red, .siimple-spinner.siimple-spinner--red:after, .siimple-spinner.siimple-spinner--red:before { background-color: #ee675d; } .siimple-spinner.siimple-spinner--orange, .siimple-spinner.siimple-spinner--orange:after, .siimple-spinner.siimple-spinner--orange:before { background-color: #f78055; } .siimple-spinner.siimple-spinner--yellow, .siimple-spinner.siimple-spinner--yellow:after, .siimple-spinner.siimple-spinner--yellow:before { background-color: #fbc850; } .siimple-spinner.siimple-spinner--grey, .siimple-spinner.siimple-spinner--grey:after, .siimple-spinner.siimple-spinner--grey:before { background-color: #dde5ee; } .siimple-spinner--small, .siimple-spinner--small:before, .siimple-spinner--small:after { width: 8px !important; height: 8px !important; } .siimple-spinner--small:before { left: calc(13px * -1) !important; } .siimple-spinner--small:after { left: 13px !important; } .siimple-spinner--large, .siimple-spinner--large:before, .siimple-spinner--large:after { width: 15px !important; height: 15px !important; } .siimple-spinner--large:before { left: calc(20px * -1) !important; } .siimple-spinner--large:after { left: 20px !important; } .siimple-tag { display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; line-height: 19px; border-radius: 4px; padding-left: 8px; padding-right: 8px; vertical-align: text-top; } .siimple-tag--rounded { border-radius: 15px; } .siimple-tag.siimple-tag--primary { background-color: #4e91e4; color: #ffffff; } .siimple-tag.siimple-tag--success { background-color: #4acf7f; color: #ffffff; } .siimple-tag.siimple-tag--warning { background-color: #fbc850; color: #ffffff; } .siimple-tag.siimple-tag--error { background-color: #ee675d; color: #ffffff; } .siimple-tag.siimple-tag--dark { background-color: #546778; color: #ffffff; } .siimple-tag.siimple-tag--light { background-color: #dde5ee; color: #546778; } .siimple-tag.siimple-tag--navy { background-color: #546778; color: #ffffff; } .siimple-tag.siimple-tag--green { background-color: #93d260; color: #ffffff; } .siimple-tag.siimple-tag--teal { background-color: #60d2b6; color: #ffffff; } .siimple-tag.siimple-tag--blue { background-color: #4e91e4; color: #ffffff; } .siimple-tag.siimple-tag--purple { background-color: #ac94e8; color: #ffffff; } .siimple-tag.siimple-tag--pink { background-color: #e77eb8; color: #ffffff; } .siimple-tag.siimple-tag--red { background-color: #ee675d; color: #ffffff; } .siimple-tag.siimple-tag--orange { background-color: #f78055; color: #ffffff; } .siimple-tag.siimple-tag--yellow { background-color: #fbc850; color: #ffffff; } .siimple-tag.siimple-tag--grey { background-color: #dde5ee; color: #546778; } .siimple-tip { display: block; position: relative; width: calc(100% - 25px - 20px - 5px); border-left-style: solid; border-left-width: 5px; border-radius: 5px; padding-top: 10px; padding-right: 20px !important; padding-bottom: 10px; padding-left: 25px !important; margin-bottom: 20px; background-color: #eef2f7; font-size: 16px; color: #546778; line-height: 24px; } .siimple-tip::before { position: absolute; top: 10px; left: -12px; width: 20px; height: 20px; border-radius: 100px; color: #ffffff; text-align: center; line-height: 20px; } .siimple-tip.siimple-tip--primary { border-left-color: #4e91e4; } .siimple-tip.siimple-tip--primary::before { background-color: #4e91e4; } .siimple-tip.siimple-tip--success { border-left-color: #4acf7f; } .siimple-tip.siimple-tip--success::before { background-color: #4acf7f; } .siimple-tip.siimple-tip--warning { border-left-color: #fbc850; } .siimple-tip.siimple-tip--warning::before { background-color: #fbc850; } .siimple-tip.siimple-tip--error { border-left-color: #ee675d; } .siimple-tip.siimple-tip--error::before { background-color: #ee675d; } .siimple-tip.siimple-tip--dark { border-left-color: #546778; } .siimple-tip.siimple-tip--dark::before { background-color: #546778; } .siimple-tip.siimple-tip--light { border-left-color: #dde5ee; } .siimple-tip.siimple-tip--light::before { background-color: #dde5ee; } .siimple-tip.siimple-tip--navy { border-left-color: #546778; } .siimple-tip.siimple-tip--navy::before { background-color: #546778; } .siimple-tip.siimple-tip--green { border-left-color: #93d260; } .siimple-tip.siimple-tip--green::before { background-color: #93d260; } .siimple-tip.siimple-tip--teal { border-left-color: #60d2b6; } .siimple-tip.siimple-tip--teal::before { background-color: #60d2b6; } .siimple-tip.siimple-tip--blue { border-left-color: #4e91e4; } .siimple-tip.siimple-tip--blue::before { background-color: #4e91e4; } .siimple-tip.siimple-tip--purple { border-left-color: #ac94e8; } .siimple-tip.siimple-tip--purple::before { background-color: #ac94e8; } .siimple-tip.siimple-tip--pink { border-left-color: #e77eb8; } .siimple-tip.siimple-tip--pink::before { background-color: #e77eb8; } .siimple-tip.siimple-tip--red { border-left-color: #ee675d; } .siimple-tip.siimple-tip--red::before { background-color: #ee675d; } .siimple-tip.siimple-tip--orange { border-left-color: #f78055; } .siimple-tip.siimple-tip--orange::before { background-color: #f78055; } .siimple-tip.siimple-tip--yellow { border-left-color: #fbc850; } .siimple-tip.siimple-tip--yellow::before { background-color: #fbc850; } .siimple-tip.siimple-tip--grey { border-left-color: #dde5ee; } .siimple-tip.siimple-tip--grey::before { background-color: #dde5ee; } .siimple-tip--exclamation::before { content: "!"; } .siimple-tip--question::before { content: "?"; } .siimple-tip--heart::before { content: "❤"; } .siimple-alert { display: block; width: calc(100% - 15px - 30px); line-height: 24px; font-size: 16px; position: relative; border-radius: 5px; background-color: #eef2f7; color: #546778; padding-top: 10px; padding-right: 30px; padding-bottom: 10px; padding-left: 15px; margin-bottom: 20px; } .siimple-alert-title { font-size: 19px; font-weight: bold; line-height: 26px; } .siimple-alert-close { display: block; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; } .siimple-alert-close:hover { opacity: 1; } .siimple-alert-close::before, .siimple-alert-close::after { content: ""; width: 16px; height: 3px; background-color: #546778; position: absolute; border-radius: 1px; top: 6px; } .siimple-alert-close::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .siimple-alert-close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .siimple-alert.siimple-alert--primary { background-color: #a7c8f2; color: #1b5eb1; } .siimple-alert--primary .siimple-alert-close::before, .siimple-alert--primary .siimple-alert-close::after { background-color: #1b5eb1; } .siimple-alert.siimple-alert--success { background-color: #9be4b8; color: #268d4f; } .siimple-alert--success .siimple-alert-close::before, .siimple-alert--success .siimple-alert-close::after { background-color: #268d4f; } .siimple-alert.siimple-alert--warning { background-color: #fde7b4; color: #e09f05; } .siimple-alert--warning .siimple-alert-close::before, .siimple-alert--warning .siimple-alert-close::after { background-color: #e09f05; } .siimple-alert.siimple-alert--error { background-color: #f8beb9; color: #cf2316; } .siimple-alert--error .siimple-alert-close::before, .siimple-alert--error .siimple-alert-close::after { background-color: #cf2316; } .siimple-alert.siimple-alert--dark { background-color: #879aab; color: #2a343c; } .siimple-alert--dark .siimple-alert-close::before, .siimple-alert--dark .siimple-alert-close::after { background-color: #2a343c; } .siimple-alert.siimple-alert--light { background-color: #eef2f7; color: #cbd8e6; } .siimple-alert--light .siimple-alert-close::before, .siimple-alert--light .siimple-alert-close::after { background-color: #cbd8e6; } .siimple-alert.siimple-alert--navy { background-color: #788ea1; color: #34414b; } .siimple-alert.siimple-alert--green { background-color: #bce39c; color: #6cb332; } .siimple-alert.siimple-alert--teal { background-color: #9ce3d1; color: #32b393; } .siimple-alert.siimple-alert--blue { background-color: #90bbee; color: #1e6ac8; } .siimple-alert.siimple-alert--purple { background-color: #ded5f6; color: #7c57db; } .siimple-alert.siimple-alert--pink { background-color: #f3bedb; color: #db3d94; } .siimple-alert.siimple-alert--red { background-color: #f5a8a3; color: #e72618; } .siimple-alert.siimple-alert--orange { background-color: #fab69e; color: #f4490b; } .siimple-alert.siimple-alert--yellow { background-color: #fde09b; color: #fab005; } .siimple-alert.siimple-alert--grey { background-color: #eef2f7; color: #cbd8e6; } .siimple-alert .siimple-close { position: absolute !important; right: 5px !important; top: 5px !important; } .siimple-breadcrumb { display: block; height: 24px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; margin-bottom: 20px; background-color: #eef2f7; border-radius: 5px; border: 0px; } .siimple-breadcrumb-item, .siimple-breadcrumb-crumb { display: inline-block; float: left; position: relative; height: 24px; line-height: 24px; font-size: 14px; font-weight: 600; text-decoration: none; color: #4e91e4; transition: color 0.3s; cursor: pointer; } .siimple-breadcrumb-item:not(:first-of-type), .siimple-breadcrumb-crumb:not(:first-of-type) { padding-left: 8px; } .siimple-breadcrumb-item:hover, .siimple-breadcrumb-crumb:hover { color: #1b5eb1; } .siimple-breadcrumb-item:not(:first-of-type)::before, .siimple-breadcrumb-crumb:not(:first-of-type)::before { content: "/"; color: #879aab; font-weight: bold !important; padding-right: 8px; } .siimple-breadcrumb-item--selected, .siimple-breadcrumb-crumb--selected { color: #546778 !important; cursor: default !important; font-weight: normal !important; } .siimple-card { display: block; width: 100%; margin-bottom: 20px; color: #546778; font-size: 16px; } .siimple-card-header, .siimple-card-body, .siimple-card-footer, .siimple-card-link { display: block; line-height: 24px; border-left: 2px solid #eef2f7; border-right: 2px solid #eef2f7; border-top: 2px solid #eef2f7; } .siimple-card-header:first-child, .siimple-card-body:first-child, .siimple-card-footer:first-child, .siimple-card-link:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .siimple-card-header:last-child, .siimple-card-body:last-child, .siimple-card-footer:last-child, .siimple-card-link:last-child { border-bottom: 2px solid #eef2f7; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .siimple-card-header, .siimple-card-footer { padding: 12px; background-color: #eef2f7; } .siimple-card-header { font-weight: bold; } .siimple-card-body { padding: 12px; } .siimple-card-link { position: relative; color: #4e91e4; font-weight: bold; font-size: 15px; padding: 12px; cursor: pointer; transition: background-color 0.3s; } .siimple-card-link::before { display: block; content: ""; width: 11px; height: 11px; border-top: 3px solid #4e91e4; border-right: 3px solid #4e91e4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 2px; position: absolute; top: 17px; right: 15px; transition: right 0.3s; } .siimple-card-link:hover { background-color: #eef2f7; } .siimple-card-link:hover::before { right: 12px; } .siimple-card-title { display: block; font-size: 18px; font-weight: bold; margin-bottom: 5px; } .siimple-card-subtitle { display: block; font-size: 15px; color: #879aab; margin-bottom: 5px; line-height: 23px; } .siimple-card-title + .siimple-card-subtitle { margin-top: -5px !important; } .siimple-list { display: block; width: 100%; margin-bottom: 20px; color: #546778; font-size: 16px; line-height: 24px; } .siimple-list-item { display: block; padding: 10px; background-color: #eef2f7; transition: all 0.3s ease; text-decoration: none; color: #546778; } .siimple-list-item:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .siimple-list-item:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .siimple-list-item:not(:last-child) { border-bottom: 1px solid #dde5ee; } .siimple-list--hover .siimple-list-item:not(.siimple-list-item--selected):hover { background-color: #dde5ee; cursor: pointer; } .siimple-list-item--selected { background-color: #a7c8f2; } .siimple-list-item--selected, .siimple-list-item--selected .siimple-list-title, .siimple-list-item--selected .siimple-list-description { color: #1b5eb1; } .siimple-list-title { display: block; font-size: 16px; font-weight: bold; line-height: 24px; text-decoration: none; color: #546778; } .siimple-list-description { display: block; font-size: 14px; line-height: 20px; text-decoration: none; color: #879aab; } .siimple-list-item .siimple-tag { float: right; } .siimple-menu { display: block; width: 100%; margin-bottom: 20px; } .siimple-menu-group { display: block; width: 100%; height: 25px; line-height: 25px; transition: color 0.3s; font-size: 15px; font-weight: bold; text-decoration: none; color: #879aab; } .siimple-menu-group:not(:first-child) { margin-top: 10px; } .siimple-menu-group:hover { text-decoration: none !important; } .siimple-menu-item { display: block; height: 34px; line-height: 34px; border-radius: 5px; font-size: 15px; font-weight: bold; color: #879aab; text-decoration: none; padding-left: 10px; padding-right: 10px; transition: all ease 0.3s; cursor: pointer; } .siimple-menu-item:not(.siimple-menu-item--selected):hover { text-decoration: none !important; color: #4e91e4; } .siimple-menu-item--selected { background-color: #eef2f7; color: #546778; } .siimple-menu-sub, .siimple-menu-submenu { display: block; padding-left: 10px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px; border-left: 1px solid #cbd8e6; } .siimple-table { display: table; width: 100%; font-size: 16px; color: #546778; border-collapse: separate; border-spacing: 0; border-width: 0px; margin-bottom: 20px; background-color: transparent; box-sizing: border-box; } .siimple-table-row { display: table-row; box-sizing: border-box; } .siimple-table-cell { display: table-cell; line-height: 24px; padding: 10px; transition: background-color 0.3s; border-top: 1px solid #cbd8e6; box-sizing: border-box; vertical-align: top; } .siimple-table-cell--sortable { padding-right: 20px !important; cursor: pointer; position: relative; } .siimple-table-cell--sortable::before, .siimple-table-cell--sortable::after { display: block; content: ""; position: absolute; right: 5px; width: 0px; height: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent; transition: all 0.3s; } .siimple-table-cell--sortable::before { top: 12px; border-bottom: 8px solid #dde5ee; } .siimple-table-cell--sortable::after { bottom: 12px; border-top: 8px solid #dde5ee; } .siimple-table-cell--asc::before { border-bottom-color: #4e91e4; } .siimple-table-cell--desc::after { border-top-color: #4e91e4; } .siimple-table-cell--1 { width: 8.33%; } .siimple-table-cell--2 { width: 16.66%; } .siimple-table-cell--3 { width: 24.99%; } .siimple-table-cell--4 { width: 33.33%; } .siimple-table-cell--5 { width: 41.66%; } .siimple-table-cell--6 { width: 49.99%; } .siimple-table-cell--7 { width: 58.33%; } .siimple-table-cell--8 { width: 66.66%; } .siimple-table-cell--9 { width: 74.99%; } .siimple-table-cell--10 { width: 83.33%; } .siimple-table-cell--11 { width: 91.66%; } .siimple-table-cell--12 { width: 99.99%; } .siimple-table--border .siimple-table-cell { border: 1px solid #cbd8e6; } .siimple-table-header { display: table-header-group; box-sizing: border-box; } .siimple-table--border .siimple-table-header .siimple-table-row:first-child .siimple-table-cell:first-child { border-top-left-radius: 5px; border-left-width: 2px; } .siimple-table--border .siimple-table-header .siimple-table-row:first-child .siimple-table-cell:last-child { border-top-right-radius: 5px; border-right-width: 2px; } .siimple-table--border .siimple-table-header .siimple-table-row:first-child .siimple-table-cell { border-top-width: 2px; } .siimple-table-header .siimple-table-cell { vertical-align: bottom; border-bottom: 2px solid #cbd8e6; font-weight: 600; } .siimple-table-body { display: table-row-group; vertical-align: middle; } .siimple-table-body .siimple-table-row:not(:last-child) .siimple-table-cell { border-bottom: 1px solid #cbd8e6; } .siimple-table--border .siimple-table-body .siimple-table-row:last-child .siimple-table-cell:first-child { border-bottom-left-radius: 5px; } .siimple-table--border .siimple-table-body .siimple-table-row:last-child .siimple-table-cell:last-child { border-bottom-right-radius: 5px; } .siimple-table--border .siimple-table-body .siimple-table-row:last-child .siimple-table-cell { border-bottom-width: 2px; } .siimple-table--border .siimple-table-body .siimple-table-row .siimple-table-cell:first-child { border-left-width: 2px; } .siimple-table--border .siimple-table-body .siimple-table-row .siimple-table-cell:last-child { border-right-width: 2px; } .siimple-table--striped .siimple-table-body .siimple-table-row:nth-child(odd) .siimple-table-cell { background-color: rgba(238, 242, 247, 0.8); } .siimple-table--hover .siimple-table-body .siimple-table-row:hover .siimple-table-cell { background-color: rgba(221, 229, 238, 0.8); } .siimple-table--fixed { table-layout: fixed; } .siimple-table-responsive { display: block; width: 100%; overflow-x: auto; } .siimple-table-row--primary, .siimple-table-row--primary .siimple-table-cell { background-color: #a7c8f2 !important; } .siimple-table-row--success, .siimple-table-row--success .siimple-table-cell { background-color: #9be4b8 !important; } .siimple-table-row--warning, .siimple-table-row--warning .siimple-table-cell { background-color: #fde7b4 !important; } .siimple-table-row--error, .siimple-table-row--error .siimple-table-cell { background-color: #f8beb9 !important; } .siimple-tabs { display: block; position: relative; width: 100%; height: 40px; font-size: 16px; margin-bottom: 20px; border-bottom: 2px solid #dde5ee; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .siimple-tabs-tab, .siimple-tabs-item { display: inline-block; float: left; height: calc(40px - 2px); line-height: 40px; font-weight: 600; color: #879aab; padding-left: 15px; padding-right: 15px; margin-bottom: -1px; border: 2px solid transparent; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: pointer; transition: all 0.3s; } .siimple-tabs-tab:hover, .siimple-tabs-item:hover { border-top-color: #eef2f7; border-left-color: #eef2f7; border-right-color: #eef2f7; } .siimple-tabs-tab--selected, .siimple-tabs-item--selected { border-top-color: #dde5ee !important; border-left-color: #dde5ee !important; border-right-color: #dde5ee !important; border-bottom-color: #ffffff !important; background-color: #ffffff !important; color: #546778; } .siimple-box { display: block; vertical-align: top; width: calc(100% - 60px); background-color: #dde5ee; border-radius: 5px; padding: 30px; margin-bottom: 20px; } .siimple-box-title, .siimple-box-subtitle, .siimple-box-detail { display: block; text-decoration: none; } .siimple-box-title { font-weight: bold; font-size: 35px; } .siimple-box-subtitle { font-weight: 600; font-size: 22px; opacity: 0.75; } .siimple-box-detail { font-size: 16px; line-height: 22px; opacity: 0.5; } .siimple-box-title + .siimple-box-subtitle, .siimple-box-subtitle + .siimple-box-detail, .siimple-box-title + .siimple-box-detail { margin-top: 5px; } .siimple-box.siimple-box--primary { background-color: #4e91e4; color: #ffffff; } .siimple-box.siimple-box--success { background-color: #4acf7f; color: #ffffff; } .siimple-box.siimple-box--warning { background-color: #fbc850; color: #ffffff; } .siimple-box.siimple-box--error { background-color: #ee675d; color: #ffffff; } .siimple-box.siimple-box--dark { background-color: #546778; color: #ffffff; } .siimple-box.siimple-box--light { background-color: #dde5ee; color: #546778; } .siimple-box.siimple-box--navy { background-color: #546778; color: #ffffff; } .siimple-box.siimple-box--green { background-color: #93d260; color: #ffffff; } .siimple-box.siimple-box--teal { background-color: #60d2b6; color: #ffffff; } .siimple-box.siimple-box--blue { background-color: #4e91e4; color: #ffffff; } .siimple-box.siimple-box--purple { background-color: #ac94e8; color: #ffffff; } .siimple-box.siimple-box--pink { background-color: #e77eb8; color: #ffffff; } .siimple-box.siimple-box--red { background-color: #ee675d; color: #ffffff; } .siimple-box.siimple-box--orange { background-color: #f78055; color: #ffffff; } .siimple-box.siimple-box--yellow { background-color: #fbc850; color: #ffffff; } .siimple-box.siimple-box--grey { background-color: #dde5ee; color: #546778; } .siimple-content { display: block; padding-top: 30px; padding-bottom: 30px; } .siimple-content--extra-small { max-width: 480px; padding-left: calc(50% - 480px / 2); padding-right: calc(50% - 480px / 2); } @media screen and (max-width: 480px) { .siimple-content--extra-small { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-content--small { max-width: 600px; padding-left: calc(50% - 600px / 2); padding-right: calc(50% - 600px / 2); } @media screen and (max-width: 600px) { .siimple-content--small { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-content--medium { max-width: 768px; padding-left: calc(50% - 768px / 2); padding-right: calc(50% - 768px / 2); } @media screen and (max-width: 768px) { .siimple-content--medium { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-content--large { max-width: 960px; padding-left: calc(50% - 960px / 2); padding-right: calc(50% - 960px / 2); } @media screen and (max-width: 960px) { .siimple-content--large { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-content--extra-large { max-width: 1280px; padding-left: calc(50% - 1280px / 2); padding-right: calc(50% - 1280px / 2); } @media screen and (max-width: 1280px) { .siimple-content--extra-large { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-content--fluid { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } .siimple-footer { display: block; padding-top: 50px; padding-bottom: 50px; font-size: 14px; line-height: 21px; } .siimple-footer--extra-small { max-width: 480px; padding-left: calc(50% - 480px / 2); padding-right: calc(50% - 480px / 2); } @media screen and (max-width: 480px) { .siimple-footer--extra-small { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-footer--small { max-width: 600px; padding-left: calc(50% - 600px / 2); padding-right: calc(50% - 600px / 2); } @media screen and (max-width: 600px) { .siimple-footer--small { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-footer--medium { max-width: 768px; padding-left: calc(50% - 768px / 2); padding-right: calc(50% - 768px / 2); } @media screen and (max-width: 768px) { .siimple-footer--medium { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-footer--large { max-width: 960px; padding-left: calc(50% - 960px / 2); padding-right: calc(50% - 960px / 2); } @media screen and (max-width: 960px) { .siimple-footer--large { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-footer--extra-large { max-width: 1280px; padding-left: calc(50% - 1280px / 2); padding-right: calc(50% - 1280px / 2); } @media screen and (max-width: 1280px) { .siimple-footer--extra-large { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-footer--fluid { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } .siimple-footer--light { color: #879aab; background-color: #eef2f7; } .siimple-footer--dark { color: rgba(255, 255, 255, 0.8); background-color: #546778; } .siimple-footer-title { display: block; font-size: 20px; font-weight: bold; text-decoration: none; line-height: 30px; } .siimple-footer-subtitle { display: block; font-size: 15px; opacity: 0.8; text-decoration: none; } .siimple-footer-group { display: block; text-transform: uppercase; text-decoration: none; font-size: 15px; font-weight: bold; margin-bottom: 5px; } .siimple-footer--light .siimple-footer-group { color: #879aab; } .siimple-footer--dark .siimple-footer-group { color: rgba(255, 255, 255, 0.8); } .siimple-footer-link { display: block; text-decoration: none; font-weight: 600; transition: color 0.3s; cursor: pointer; opacity: 0.85; } .siimple-footer-link--inline { display: inline !important; } .siimple-footer-link--inline:not(:last-child) { margin-right: 10px; } .siimple-footer-link:hover { color: #4e91e4 !important; } .siimple-footer-link-description { display: block; font-size: 12px; font-weight: normal; margin-bottom: 3px; margin-top: -4px; } .siimple-footer--light .siimple-footer-link { color: #879aab; } .siimple-footer--light .siimple-footer-link-description { color: #879aab !important; } .siimple-footer--dark .siimple-footer-link { color: rgba(255, 255, 255, 0.8); } .siimple-footer--dark .siimple-footer-link-description { color: rgba(255, 255, 255, 0.8) !important; } .siimple-footer-paragraph { display: block; margin-bottom: 10px; } .siimple-footer-rule { display: block; width: 100%; height: 2px; margin-top: 20px; margin-bottom: 20px; opacity: 0.6; } .siimple-footer--light .siimple-footer-rule { background-color: #cbd8e6; } .siimple-footer--dark .siimple-footer-rule { background-color: rgba(255, 255, 255, 0.6); } .siimple-footer.siimple-footer--navy { background-color: #546778; color: #ffffff; } .siimple-footer.siimple-footer--green { background-color: #93d260; color: #ffffff; } .siimple-footer.siimple-footer--teal { background-color: #60d2b6; color: #ffffff; } .siimple-footer.siimple-footer--blue { background-color: #4e91e4; color: #ffffff; } .siimple-footer.siimple-footer--purple { background-color: #ac94e8; color: #ffffff; } .siimple-footer.siimple-footer--pink { background-color: #e77eb8; color: #ffffff; } .siimple-footer.siimple-footer--red { background-color: #ee675d; color: #ffffff; } .siimple-footer.siimple-footer--orange { background-color: #f78055; color: #ffffff; } .siimple-footer.siimple-footer--yellow { background-color: #fbc850; color: #ffffff; } .siimple-footer.siimple-footer--grey { background-color: #dde5ee; color: #546778; } .siimple-jumbotron { display: block; padding-top: 85px; padding-bottom: 85px; } .siimple-jumbotron--extra-small { max-width: 480px; padding-left: calc(50% - 480px / 2); padding-right: calc(50% - 480px / 2); } @media screen and (max-width: 480px) { .siimple-jumbotron--extra-small { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-jumbotron--small { max-width: 600px; padding-left: calc(50% - 600px / 2); padding-right: calc(50% - 600px / 2); } @media screen and (max-width: 600px) { .siimple-jumbotron--small { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-jumbotron--medium { max-width: 768px; padding-left: calc(50% - 768px / 2); padding-right: calc(50% - 768px / 2); } @media screen and (max-width: 768px) { .siimple-jumbotron--medium { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-jumbotron--large { max-width: 960px; padding-left: calc(50% - 960px / 2); padding-right: calc(50% - 960px / 2); } @media screen and (max-width: 960px) { .siimple-jumbotron--large { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-jumbotron--extra-large { max-width: 1280px; padding-left: calc(50% - 1280px / 2); padding-right: calc(50% - 1280px / 2); } @media screen and (max-width: 1280px) { .siimple-jumbotron--extra-large { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-jumbotron--fluid { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } .siimple-jumbotron-title, .siimple-jumbotron-subtitle, .siimple-jumbotron-detail { display: block; text-decoration: none; } .siimple-jumbotron-title { font-weight: bold; font-size: 40px; } .siimple-jumbotron-subtitle { font-size: 24px; font-weight: 600; opacity: 0.8; } .siimple-jumbotron-detail { line-height: 22px; font-size: 16px; opacity: 0.6; } .siimple-jumbotron-title + .siimple-jumbotron-subtitle, .siimple-jumbotron-title + .siimple-jumbotron-detail, .siimple-jumbotron-subtitle + .siimple-jumbotron-detail { margin-top: 5px; } .siimple-jumbotron.siimple-jumbotron--primary { background-color: #4e91e4; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--success { background-color: #4acf7f; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--warning { background-color: #fbc850; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--error { background-color: #ee675d; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--dark { background-color: #546778; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--light { background-color: #dde5ee; color: #546778; } .siimple-jumbotron.siimple-jumbotron--navy { background-color: #546778; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--green { background-color: #93d260; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--teal { background-color: #60d2b6; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--blue { background-color: #4e91e4; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--purple { background-color: #ac94e8; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--pink { background-color: #e77eb8; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--red { background-color: #ee675d; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--orange { background-color: #f78055; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--yellow { background-color: #fbc850; color: #ffffff; } .siimple-jumbotron.siimple-jumbotron--grey { background-color: #dde5ee; color: #546778; } .siimple-navbar { display: block; z-index: 3; max-width: calc(100% - 2 * 20px); height: 34px; padding-top: 15px; padding-bottom: 15px; padding-left: 20px; padding-right: 20px; } .siimple-navbar--extra-small { max-width: 480px; padding-left: calc(50% - 480px / 2); padding-right: calc(50% - 480px / 2); } @media screen and (max-width: 480px) { .siimple-navbar--extra-small { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-navbar--small { max-width: 600px; padding-left: calc(50% - 600px / 2); padding-right: calc(50% - 600px / 2); } @media screen and (max-width: 600px) { .siimple-navbar--small { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-navbar--medium { max-width: 768px; padding-left: calc(50% - 768px / 2); padding-right: calc(50% - 768px / 2); } @media screen and (max-width: 768px) { .siimple-navbar--medium { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-navbar--large { max-width: 960px; padding-left: calc(50% - 960px / 2); padding-right: calc(50% - 960px / 2); } @media screen and (max-width: 960px) { .siimple-navbar--large { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-navbar--extra-large { max-width: 1280px; padding-left: calc(50% - 1280px / 2); padding-right: calc(50% - 1280px / 2); } @media screen and (max-width: 1280px) { .siimple-navbar--extra-large { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } .siimple-navbar--fluid { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } .siimple-navbar-title { display: inline-block; height: 34px; line-height: 34px; text-decoration: none; font-weight: bold; font-size: 21px; padding-left: 0px; padding-right: 0px; cursor: pointer; } .siimple-navbar-subtitle { display: inline-block; height: 34px; line-height: 34px; font-size: 16px; text-decoration: none; cursor: pointer; padding-left: 5px; opacity: 0.8; } .siimple-navbar-item, .siimple-navbar-link { display: inline-block; height: 34px; line-height: 34px; padding-left: 10px; padding-right: 10px; text-decoration: none; text-align: center; font-size: 16px; transition: opacity 0.3s; cursor: pointer; opacity: 0.9; } .siimple-navbar-item:hover, .siimple-navbar-link:hover { opacity: 1; } .siimple-navbar.siimple-navbar--primary { color: #ffffff; background-color: #4e91e4; } .siimple-navbar.siimple-navbar--primary .siimple-navbar-title, .siimple-navbar.siimple-navbar--primary .siimple-navbar-subtitle, .siimple-navbar.siimple-navbar--primary .siimple-navbar-link, .siimple-navbar.siimple-navbar--primary .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--success { color: #ffffff; background-color: #4acf7f; } .siimple-navbar.siimple-navbar--success .siimple-navbar-title, .siimple-navbar.siimple-navbar--success .siimple-navbar-subtitle, .siimple-navbar.siimple-navbar--success .siimple-navbar-link, .siimple-navbar.siimple-navbar--success .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--warning { color: #ffffff; background-color: #fbc850; } .siimple-navbar.siimple-navbar--warning .siimple-navbar-title, .siimple-navbar.siimple-navbar--warning .siimple-navbar-subtitle, .siimple-navbar.siimple-navbar--warning .siimple-navbar-link, .siimple-navbar.siimple-navbar--warning .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--error { color: #ffffff; background-color: #ee675d; } .siimple-navbar.siimple-navbar--error .siimple-navbar-title, .siimple-navbar.siimple-navbar--error .siimple-navbar-subtitle, .siimple-navbar.siimple-navbar--error .siimple-navbar-link, .siimple-navbar.siimple-navbar--error .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--dark { color: #ffffff; background-color: #546778; } .siimple-navbar.siimple-navbar--dark .siimple-navbar-title, .siimple-navbar.siimple-navbar--dark .siimple-navbar-subtitle, .siimple-navbar.siimple-navbar--dark .siimple-navbar-link, .siimple-navbar.siimple-navbar--dark .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--light { color: #546778; background-color: #dde5ee; } .siimple-navbar.siimple-navbar--light .siimple-navbar-title, .siimple-navbar.siimple-navbar--light .siimple-navbar-subtitle, .siimple-navbar.siimple-navbar--light .siimple-navbar-link, .siimple-navbar.siimple-navbar--light .siimple-navbar-item { color: #546778; } .siimple-navbar.siimple-navbar--navy { background-color: #546778; color: #ffffff; } .siimple-navbar.siimple-navbar--navy .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--navy .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--navy .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--navy .siimple-navbar-link, .siimple-navbar.siimple-navbar--navy .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--green { background-color: #93d260; color: #ffffff; } .siimple-navbar.siimple-navbar--green .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--green .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--green .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--green .siimple-navbar-link, .siimple-navbar.siimple-navbar--green .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--teal { background-color: #60d2b6; color: #ffffff; } .siimple-navbar.siimple-navbar--teal .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--teal .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--teal .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--teal .siimple-navbar-link, .siimple-navbar.siimple-navbar--teal .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--blue { background-color: #4e91e4; color: #ffffff; } .siimple-navbar.siimple-navbar--blue .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--blue .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--blue .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--blue .siimple-navbar-link, .siimple-navbar.siimple-navbar--blue .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--purple { background-color: #ac94e8; color: #ffffff; } .siimple-navbar.siimple-navbar--purple .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--purple .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--purple .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--purple .siimple-navbar-link, .siimple-navbar.siimple-navbar--purple .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--pink { background-color: #e77eb8; color: #ffffff; } .siimple-navbar.siimple-navbar--pink .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--pink .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--pink .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--pink .siimple-navbar-link, .siimple-navbar.siimple-navbar--pink .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--red { background-color: #ee675d; color: #ffffff; } .siimple-navbar.siimple-navbar--red .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--red .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--red .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--red .siimple-navbar-link, .siimple-navbar.siimple-navbar--red .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--orange { background-color: #f78055; color: #ffffff; } .siimple-navbar.siimple-navbar--orange .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--orange .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--orange .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--orange .siimple-navbar-link, .siimple-navbar.siimple-navbar--orange .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--yellow { background-color: #fbc850; color: #ffffff; } .siimple-navbar.siimple-navbar--yellow .siimple-navbar-title { color: #ffffff; } .siimple-navbar.siimple-navbar--yellow .siimple-navbar-subtitle { color: #ffffff; } .siimple-navbar.siimple-navbar--yellow .siimple-navbar-subtitle::before { background-color: #ffffff; } .siimple-navbar.siimple-navbar--yellow .siimple-navbar-link, .siimple-navbar.siimple-navbar--yellow .siimple-navbar-item { color: #ffffff; } .siimple-navbar.siimple-navbar--grey { background-color: #dde5ee; color: #546778; } .siimple-navbar.siimple-navbar--grey .siimple-navbar-title { color: #546778; } .siimple-navbar.siimple-navbar--grey .siimple-navbar-subtitle { color: #546778; } .siimple-navbar.siimple-navbar--grey .siimple-navbar-subtitle::before { background-color: #546778; } .siimple-navbar.siimple-navbar--grey .siimple-navbar-link, .siimple-navbar.siimple-navbar--grey .siimple-navbar-item { color: #546778; } .siimple-checkbox { display: inline-block; position: relative; width: 18px; height: 18px; margin-left: 10px; margin-right: 10px; margin-top: 8px; margin-bottom: 8px; vertical-align: top; } .siimple-checkbox label { width: 18px; height: 18px; cursor: pointer; transition: all 0.3s; position: absolute; top: 0; left: 0; border-radius: 2px; background: #dde5ee; } .siimple-checkbox label:after { content: ""; opacity: 0.2; width: 8px; height: 4px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all 0.3s; position: absolute; top: 5px; left: 4px; background: transparent; border: 2px solid #546778; border-top: 0px; border-right: 0px; } .siimple-checkbox label:hover::after { opacity: 0.5; } .siimple-checkbox input[type=checkbox] { visibility: hidden; } .siimple-checkbox input[type=checkbox]:checked + label:after { opacity: 1; border-color: #ffffff; } .siimple-checkbox input[type=checkbox]:checked + label { background-color: #4e91e4; } .siimple-checkbox--success input[type=checkbox]:checked + label { background-color: #4acf7f; } .siimple-checkbox--error input[type=checkbox]:checked + label { background-color: #ee675d; } .siimple-checkbox--warning input[type=checkbox]:checked + label { background-color: #fbc850; } .siimple-field, .siimple-form-field { display: block; vertical-align: top; margin-bottom: 20px; margin-top: 0px; } .siimple-field-label, .siimple-form-field-label { display: block; vertical-align: top; font-weight: 600; font-size: 15px; color: #546778; margin-top: 0px; margin-bottom: 5px; } .siimple-field-helper, .siimple-form-field-helper { display: block; vertical-align: top; font-weight: normal; font-size: 13px; color: #879aab; margin-top: 5px; margin-bottom: 20px; } .siimple-form { display: block; width: 100%; margin-top: 0px; margin-bottom: 20px; font-size: 16px; } .siimple-form-title { display: block; width: 100%; vertical-align: top; font-weight: bold; font-size: 24px; color: #546778; margin-bottom: 10px; } .siimple-form-detail { display: block; width: 100%; vertical-align: top; font-size: 16px; line-height: 24px; color: #546778; margin-bottom: 20px; } .siimple-form-rule { display: block; width: 100%; border-bottom: 1px solid #cbd8e6; margin-top: 5px; margin-bottom: 20px; height: 0px; } .siimple-input { display: inline-block; height: 34px; line-height: 34px; font-size: 14px; font-weight: normal; color: #546778; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; border: 0px; border-radius: 5px; outline: 0px; background-color: #eef2f7; vertical-align: top; box-sizing: border-box; } .siimple-input--fluid { width: 100%; } .siimple-input--light { background-color: #ffffff; } .siimple-input--dark { background-color: #546778; color: #ffffff; } .siimple-label { display: inline-block; min-height: 34px; line-height: 34px; font-size: 15px; color: #546778; font-weight: 600; padding-right: 10px; padding-left: 0px; vertical-align: top; } .siimple-label--light { color: #ffffff; } .siimple-label--dark { color: #546778; } .siimple-radio { display: inline-block; width: 18px; height: 18px; position: relative; vertical-align: top; margin: 8px; cursor: pointer; } .siimple-radio > label { display: block; width: calc(18px - 2 * 3px); height: calc(18px - 2 * 3px); position: absolute; top: 0px; left: 0px; border-radius: 100px; border-width: 3px; border-style: solid; border-color: #dde5ee; transition: border-color 0.3s ease; cursor: pointer; } .siimple-radio > label:after { position: absolute; display: block; content: ""; width: 6px; height: 6px; background-color: transparent; border-radius: 100px; top: calc(50% - 6px / 2); left: calc(50% - 6px / 2); transition: all 0.3s ease; } .siimple-radio:hover > label:after { background-color: #dde5ee; } .siimple-radio input[type=radio] { visibility: hidden; } .siimple-radio input[type=radio]:checked + label:after { background-color: #4e91e4; } .siimple-radio input[type=radio]:checked + label { border-color: #4e91e4; } .siimple-radio--success input[type=radio]:checked + label:after { background-color: #4acf7f; } .siimple-radio--success input[type=radio]:checked + label { border-color: #4acf7f; } .siimple-radio--error input[type=radio]:checked + label:after { background-color: #ee675d; } .siimple-radio--error input[type=radio]:checked + label { border-color: #ee675d; } .siimple-radio--warning input[type=radio]:checked + label:after { background-color: #fbc850; } .siimple-radio--warning input[type=radio]:checked + label { border-color: #fbc850; } .siimple-select { display: inline-block; height: 34px; line-height: 34px; font-size: 14px; font-weight: normal; color: #546778; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; border: 0px; border-radius: 5px; outline: 0px; background-color: #eef2f7; vertical-align: top; box-sizing: border-box; } .siimple-select--fluid { width: 100%; } .siimple-select--light { background-color: #ffffff; } .siimple-select--dark { background-color: #546778; color: #ffffff; } .siimple-switch { display: inline-block; width: 32px; height: 18px; position: relative; border-radius: 50px; margin-left: 10px; margin-right: 10px; margin-top: 8px; margin-bottom: 8px; vertical-align: top; } .siimple-switch label { cursor: pointer; } .siimple-switch label::after { display: block; content: ""; width: 14px; height: 14px; border-radius: 50px; transition: all 0.3s ease; background: #879aab; position: absolute; top: 2px; left: 2px; z-index: 2; opacity: 0.6; } .siimple-switch label::after:hover { opacity: 1; } .siimple-switch label::before { display: block; content: ""; width: 100%; height: 100%; background-color: #dde5ee; border-radius: 50px; transition: all 0.3s; position: absolute; top: 0px; z-index: 1; } .siimple-switch input[type=checkbox] { visibility: hidden; } .siimple-switch input[type=checkbox]:checked ~ label::before { background-color: #4e91e4; } .siimple-switch input[type=checkbox]:checked ~ label::after { left: 16px; opacity: 1; background-color: #ffffff; } .siimple-switch--success input[type=checkbox]:checked ~ label::before { background-color: #4acf7f; } .siimple-switch--error input[type=checkbox]:checked ~ label::before { background-color: #ee675d; } .siimple-switch--warning input[type=checkbox]:checked ~ label::before { background-color: #fbc850; } .siimple-textarea { display: inline-block; line-height: 20px; font-size: 14px; color: #546778; padding: 10px; border: 0px; border-radius: 5px; outline: 0px; background-color: #eef2f7; vertical-align: top; box-sizing: border-box; resize: vertical; } .siimple-textarea--fluid { width: 100%; } .siimple-textarea--light { background-color: #ffffff; } .siimple-textarea--dark { background-color: #546778; color: #ffffff; } .siimple-grid { display: block; width: 100%; margin-left: auto; margin-right: auto; } .siimple-grid-row { display: block; margin-left: -12px; margin-right: -12px; } .siimple-grid-row:after { content: " "; clear: both; display: table; line-height: 0; } .siimple-grid-col { display: inline-block; vertical-align: top; float: left; padding: 12px; } .siimple-grid-col--1 { width: calc(8.33% - 2 * 12px); } .siimple-grid-col--2 { width: calc(16.66% - 2 * 12px); } .siimple-grid-col--3 { width: calc(24.99% - 2 * 12px); } .siimple-grid-col--4 { width: calc(33.33% - 2 * 12px); } .siimple-grid-col--5 { width: calc(41.66% - 2 * 12px); } .siimple-grid-col--6 { width: calc(49.99% - 2 * 12px); } .siimple-grid-col--7 { width: calc(58.33% - 2 * 12px); } .siimple-grid-col--8 { width: calc(66.66% - 2 * 12px); } .siimple-grid-col--9 { width: calc(74.99% - 2 * 12px); } .siimple-grid-col--10 { width: calc(83.33% - 2 * 12px); } .siimple-grid-col--11 { width: calc(91.66% - 2 * 12px); } .siimple-grid-col--12 { width: calc(99.99% - 2 * 12px); } @media (max-width: 1280px) { .siimple-grid-col--xl-1, .siimple-grid-col-xl--1 { width: calc(8.33% - 2 * 12px); } .siimple-grid-col--xl-2, .siimple-grid-col-xl--2 { width: calc(16.66% - 2 * 12px); } .siimple-grid-col--xl-3, .siimple-grid-col-xl--3 { width: calc(24.99% - 2 * 12px); } .siimple-grid-col--xl-4, .siimple-grid-col-xl--4 { width: calc(33.33% - 2 * 12px); } .siimple-grid-col--xl-5, .siimple-grid-col-xl--5 { width: calc(41.66% - 2 * 12px); } .siimple-grid-col--xl-6, .siimple-grid-col-xl--6 { width: calc(49.99% - 2 * 12px); } .siimple-grid-col--xl-7, .siimple-grid-col-xl--7 { width: calc(58.33% - 2 * 12px); } .siimple-grid-col--xl-8, .siimple-grid-col-xl--8 { width: calc(66.66% - 2 * 12px); } .siimple-grid-col--xl-9, .siimple-grid-col-xl--9 { width: calc(74.99% - 2 * 12px); } .siimple-grid-col--xl-10, .siimple-grid-col-xl--10 { width: calc(83.33% - 2 * 12px); } .siimple-grid-col--xl-11, .siimple-grid-col-xl--11 { width: calc(91.66% - 2 * 12px); } .siimple-grid-col--xl-12, .siimple-grid-col-xl--12 { width: calc(99.99% - 2 * 12px); } .siimple-grid-col--xl-hide { display: none !important; } } @media (max-width: 960px) { .siimple-grid-col--lg-1, .siimple-grid-col-lg--1 { width: calc(8.33% - 2 * 12px); } .siimple-grid-col--lg-2, .siimple-grid-col-lg--2 { width: calc(16.66% - 2 * 12px); } .siimple-grid-col--lg-3, .siimple-grid-col-lg--3 { width: calc(24.99% - 2 * 12px); } .siimple-grid-col--lg-4, .siimple-grid-col-lg--4 { width: calc(33.33% - 2 * 12px); } .siimple-grid-col--lg-5, .siimple-grid-col-lg--5 { width: calc(41.66% - 2 * 12px); } .siimple-grid-col--lg-6, .siimple-grid-col-lg--6 { width: calc(49.99% - 2 * 12px); } .siimple-grid-col--lg-7, .siimple-grid-col-lg--7 { width: calc(58.33% - 2 * 12px); } .siimple-grid-col--lg-8, .siimple-grid-col-lg--8 { width: calc(66.66% - 2 * 12px); } .siimple-grid-col--lg-9, .siimple-grid-col-lg--9 { width: calc(74.99% - 2 * 12px); } .siimple-grid-col--lg-10, .siimple-grid-col-lg--10 { width: calc(83.33% - 2 * 12px); } .siimple-grid-col--lg-11, .siimple-grid-col-lg--11 { width: calc(91.66% - 2 * 12px); } .siimple-grid-col--lg-12, .siimple-grid-col-lg--12 { width: calc(99.99% - 2 * 12px); } .siimple-grid-col--lg-hide { display: none !important; } } @media (max-width: 768px) { .siimple-grid-col--md-1, .siimple-grid-col-md--1 { width: calc(8.33% - 2 * 12px); } .siimple-grid-col--md-2, .siimple-grid-col-md--2 { width: calc(16.66% - 2 * 12px); } .siimple-grid-col--md-3, .siimple-grid-col-md--3 { width: calc(24.99% - 2 * 12px); } .siimple-grid-col--md-4, .siimple-grid-col-md--4 { width: calc(33.33% - 2 * 12px); } .siimple-grid-col--md-5, .siimple-grid-col-md--5 { width: calc(41.66% - 2 * 12px); } .siimple-grid-col--md-6, .siimple-grid-col-md--6 { width: calc(49.99% - 2 * 12px); } .siimple-grid-col--md-7, .siimple-grid-col-md--7 { width: calc(58.33% - 2 * 12px); } .siimple-grid-col--md-8, .siimple-grid-col-md--8 { width: calc(66.66% - 2 * 12px); } .siimple-grid-col--md-9, .siimple-grid-col-md--9 { width: calc(74.99% - 2 * 12px); } .siimple-grid-col--md-10, .siimple-grid-col-md--10 { width: calc(83.33% - 2 * 12px); } .siimple-grid-col--md-11, .siimple-grid-col-md--11 { width: calc(91.66% - 2 * 12px); } .siimple-grid-col--md-12, .siimple-grid-col-md--12 { width: calc(99.99% - 2 * 12px); } .siimple-grid-col--md-hide { display: none !important; } } @media (max-width: 600px) { .siimple-grid-col--sm-1, .siimple-grid-col-sm--1 { width: calc(8.33% - 2 * 12px); } .siimple-grid-col--sm-2, .siimple-grid-col-sm--2 { width: calc(16.66% - 2 * 12px); } .siimple-grid-col--sm-3, .siimple-grid-col-sm--3 { width: calc(24.99% - 2 * 12px); } .siimple-grid-col--sm-4, .siimple-grid-col-sm--4 { width: calc(33.33% - 2 * 12px); } .siimple-grid-col--sm-5, .siimple-grid-col-sm--5 { width: calc(41.66% - 2 * 12px); } .siimple-grid-col--sm-6, .siimple-grid-col-sm--6 { width: calc(49.99% - 2 * 12px); } .siimple-grid-col--sm-7, .siimple-grid-col-sm--7 { width: calc(58.33% - 2 * 12px); } .siimple-grid-col--sm-8, .siimple-grid-col-sm--8 { width: calc(66.66% - 2 * 12px); } .siimple-grid-col--sm-9, .siimple-grid-col-sm--9 { width: calc(74.99% - 2 * 12px); } .siimple-grid-col--sm-10, .siimple-grid-col-sm--10 { width: calc(83.33% - 2 * 12px); } .siimple-grid-col--sm-11, .siimple-grid-col-sm--11 { width: calc(91.66% - 2 * 12px); } .siimple-grid-col--sm-12, .siimple-grid-col-sm--12 { width: calc(99.99% - 2 * 12px); } .siimple-grid-col--sm-hide { display: none !important; } } @media (max-width: 480px) { .siimple-grid-col--xs-1, .siimple-grid-col-xs--1 { width: calc(8.33% - 2 * 12px); } .siimple-grid-col--xs-2, .siimple-grid-col-xs--2 { width: calc(16.66% - 2 * 12px); } .siimple-grid-col--xs-3, .siimple-grid-col-xs--3 { width: calc(24.99% - 2 * 12px); } .siimple-grid-col--xs-4, .siimple-grid-col-xs--4 { width: calc(33.33% - 2 * 12px); } .siimple-grid-col--xs-5, .siimple-grid-col-xs--5 { width: calc(41.66% - 2 * 12px); } .siimple-grid-col--xs-6, .siimple-grid-col-xs--6 { width: calc(49.99% - 2 * 12px); } .siimple-grid-col--xs-7, .siimple-grid-col-xs--7 { width: calc(58.33% - 2 * 12px); } .siimple-grid-col--xs-8, .siimple-grid-col-xs--8 { width: calc(66.66% - 2 * 12px); } .siimple-grid-col--xs-9, .siimple-grid-col-xs--9 { width: calc(74.99% - 2 * 12px); } .siimple-grid-col--xs-10, .siimple-grid-col-xs--10 { width: calc(83.33% - 2 * 12px); } .siimple-grid-col--xs-11, .siimple-grid-col-xs--11 { width: calc(91.66% - 2 * 12px); } .siimple-grid-col--xs-12, .siimple-grid-col-xs--12 { width: calc(99.99% - 2 * 12px); } .siimple-grid-col--xs-hide { display: none !important; } } .siimple-dropdown { position: relative; } .siimple-dropdown-toggle::after { display: inline-block; content: ""; height: 0px; width: 0px; margin-left: 4px; border-top: 6px solid #ffffff; border-left: 4px solid transparent; border-right: 4px solid transparent; vertical-align: middle; } .siimple-dropdown-toggle--light::after { border-top-color: #ffffff; } .siimple-dropdown-toggle--dark::after { border-top-color: #546778; } .siimple-dropdown-content { display: none; position: absolute; top: calc(100% + 2px); left: 0px; min-width: 150px; color: #546778; text-align: left; background-color: #ffffff; border-radius: 5px; border: 1px solid #dde5ee; } .siimple-dropdown--visible .siimple-dropdown-content { display: block; } .siimple-dropdown-item { display: block; line-height: 24px; font-size: 16px; padding-left: 15px; padding-right: 15px; padding-top: 4px; padding-bottom: 4px; white-space: nowrap; cursor: pointer; transition: background-color 0.3s; } .siimple-dropdown-item:hover { background-color: #eef2f7; } .siimple-dropdown-separator { display: block; height: 0px; border-top: 1px solid #dde5ee; margin-top: 5px; margin-bottom: 5px; } .siimple-modal { display: flex; width: calc(100% - 2 * 15px); height: calc(100% - 2 * 15px); position: fixed; top: 0px; left: 0px; z-index: 400; padding: 15px; overflow-x: hidden; overflow-y: hidden; justify-content: center; align-items: center; background-color: rgba(42, 52, 60, 0.4); } .siimple-modal-content { display: block; width: 100%; background-color: #ffffff; border-radius: 5px; padding: 0px; } .siimple-modal-header { display: block; height: 24px; padding: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid #dde5ee; } .siimple-modal-header-title { float: left; font-weight: bold; font-size: 20px; height: 24px; line-height: 24px; } .siimple-modal-header-close { display: block; float: right; position: relative; width: 16px; height: 24px; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; } .siimple-modal-header-close:hover { opacity: 1; } .siimple-modal-header-close::before, .siimple-modal-header-close::after { content: ""; width: 16px; height: 3px; background-color: #546778; position: absolute; border-radius: 1px; top: 10px; } .siimple-modal-header-close::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .siimple-modal-header-close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .siimple-modal-header:after { content: ""; clear: both; } .siimple-modal-body { display: block; overflow-y: auto; max-height: 50vh; padding: 20px; } .siimple-modal-footer { display: block; padding: 20px; color: #879aab; background-color: #eef2f7; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .siimple-modal--small .siimple-modal-content { max-width: 600px; } .siimple-modal--medium .siimple-modal-content { max-width: 768px; } .siimple-modal--large .siimple-modal-content { max-width: 960px; } @-webkit-keyframes siimple-progress-animation { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } @keyframes siimple-progress-animation { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .siimple-progress { display: block; width: 100%; height: 20px; padding: 0px !important; margin-top: 0px; margin-bottom: 20px; border-radius: 5px; background-color: #eef2f7; overflow: hidden; -webkit-appearance: none; -mz-appearance: none; } .siimple-progress > span { display: block; height: 100%; overflow: hidden; transition: all 0.3s; position: relative; text-align: center; line-height: 20px; font-size: 12px; } .siimple-progress--striped > span::after, .siimple-progress--striped-slow > span::after, .siimple-progress--striped-fast > span::after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1px; background-size: 50px 50px; 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); } .siimple-progress--striped > span::after { -webkit-animation: siimple-progress-animation 2.5s linear infinite; animation: siimple-progress-animation 2.5s linear infinite; } .siimple-progress--striped-fast > span::after { -webkit-animation: siimple-progress-animation 1s linear infinite; animation: siimple-progress-animation 1s linear infinite; } .siimple-progress--striped-slow > span::after { -webkit-animation: siimple-progress-animation 4s linear infinite; animation: siimple-progress-animation 4s linear infinite; } .siimple-progress.siimple-progress--primary > span { background-color: #4e91e4; color: #ffffff; } .siimple-progress.siimple-progress--success > span { background-color: #4acf7f; color: #ffffff; } .siimple-progress.siimple-progress--warning > span { background-color: #fbc850; color: #ffffff; } .siimple-progress.siimple-progress--error > span { background-color: #ee675d; color: #ffffff; } .siimple-progress.siimple-progress--dark > span { background-color: #546778; color: #ffffff; } .siimple-progress.siimple-progress--light > span { background-color: #dde5ee; color: #546778; } .siimple-steps { display: block; margin-bottom: 20px; text-align: center; } .siimple-steps-item { display: inline-block; padding-top: 40px; position: relative; } .siimple-steps-item-bubble { display: block; width: 34px; height: 34px; border-radius: 100px; position: absolute; left: calc(50% - 34px / 2); top: 0px; z-index: 10; line-height: 34px; font-size: 20px; color: #ffffff; } .siimple-steps-item-title { display: block; width: calc(100% - 2 * 5px); padding-left: 5px; padding-right: 5px; font-size: 15px; line-height: 22px; font-weight: bold; color: #cbd8e6; } .siimple-steps-item-description { display: block; width: calc(100% - 2 * 5px); padding-left: 5px; padding-right: 5px; font-size: 13px; line-height: 20px; color: #dde5ee; } .siimple-steps-item:not(:last-child)::after { content: ""; display: block; width: 100%; height: 8px; position: absolute; top: calc(26px / 2); left: 50%; } .siimple-steps-item--current ~ .siimple-steps-item .siimple-steps-item-bubble { background-color: #dde5ee !important; } .siimple-steps-item--current::after, .siimple-steps-item--current ~ .siimple-steps-item::after { background-color: #dde5ee !important; } .siimple-steps-item--current .siimple-steps-item-title { color: #546778 !important; } .siimple-steps-item--current .siimple-steps-item-description { color: #879aab !important; } .siimple-steps-item--check .siimple-steps-item-bubble::after, .siimple-steps-item--check .siimple-steps-item-bubble::before, .siimple-steps-item--cross .siimple-steps-item-bubble::after, .siimple-steps-item--cross .siimple-steps-item-bubble::before, .siimple-steps-item--exclamation .siimple-steps-item-bubble::after, .siimple-steps-item--exclamation .siimple-steps-item-bubble::before { display: block; content: ""; height: 3px; position: absolute; background-color: #ffffff; border-radius: 5px; } .siimple-steps-item--check .siimple-steps-item-bubble::after { width: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 19px; left: 6.5px; } .siimple-steps-item--check .siimple-steps-item-bubble::before { width: 18px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 16px; left: 10.5px; } .siimple-steps-item--cross .siimple-steps-item-bubble::after { width: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 15.5px; left: 7px; } .siimple-steps-item--cross .siimple-steps-item-bubble::before { width: 20px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 15.5px; left: 7px; } .siimple-steps-item--exclamation .siimple-steps-item-bubble::after { width: 3px; top: 22px; left: 15.5px; } .siimple-steps-item--exclamation .siimple-steps-item-bubble::before { width: 3px; height: 11px; top: 8px; left: 15.5px; } .siimple-steps--primary .siimple-steps-item-bubble { background-color: #4e91e4; } .siimple-steps--primary .siimple-steps-item:not(:last-child)::after { background-color: #4e91e4; } .siimple-steps--success .siimple-steps-item-bubble { background-color: #4acf7f; } .siimple-steps--success .siimple-steps-item:not(:last-child)::after { background-color: #4acf7f; } .siimple-steps--warning .siimple-steps-item-bubble { background-color: #fbc850; } .siimple-steps--warning .siimple-steps-item:not(:last-child)::after { background-color: #fbc850; } .siimple-steps--error .siimple-steps-item-bubble { background-color: #ee675d; } .siimple-steps--error .siimple-steps-item:not(:last-child)::after { background-color: #ee675d; } .siimple-steps--dark .siimple-steps-item-bubble { background-color: #546778; } .siimple-steps--dark .siimple-steps-item:not(:last-child)::after { background-color: #546778; } .siimple-steps--light .siimple-steps-item-bubble { background-color: #dde5ee; } .siimple-steps--light .siimple-steps-item:not(:last-child)::after { background-color: #dde5ee; } .siimple--color-primary { color: #4e91e4 !important; } .siimple--bg-primary { background-color: #4e91e4 !important; } .siimple--color-success { color: #4acf7f !important; } .siimple--bg-success { background-color: #4acf7f !important; } .siimple--color-warning { color: #fbc850 !important; } .siimple--bg-warning { background-color: #fbc850 !important; } .siimple--color-error { color: #ee675d !important; } .siimple--bg-error { background-color: #ee675d !important; } .siimple--color-dark { color: #546778 !important; } .siimple--bg-dark { background-color: #546778 !important; } .siimple--color-light { color: #dde5ee !important; } .siimple--bg-light { background-color: #dde5ee !important; } .siimple--color-white { color: #ffffff !important; } .siimple--bg-white { background-color: #ffffff !important; } .siimple--display-none { display: none !important; } .siimple--display-block { display: block !important; } .siimple--display-inline { display: inline !important; } .siimple--display-inline-block { display: inline-block !important; } .siimple--display-table { display: table !important; } .siimple--display-table-cell { display: table-cell !important; } .siimple--display-table-row { display: table-row !important; } .siimple--display-flex { display: flex !important; } .siimple--display-inline-flex { display: inline-flex !important; } @media (max-width: 1280px) { .siimple--display-xl-none { display: none !important; } .siimple--display-xl-block { display: block !important; } .siimple--display-xl-inline { display: inline !important; } .siimple--display-xl-inline-block { display: inline-block !important; } .siimple--display-xl-table { display: table !important; } .siimple--display-xl-table-cell { display: table-cell !important; } .siimple--display-xl-table-row { display: table-row !important; } .siimple--display-xl-flex { display: flex !important; } .siimple--display-xl-inline-flex { display: inline-flex !important; } } @media (max-width: 960px) { .siimple--display-lg-none { display: none !important; } .siimple--display-lg-block { display: block !important; } .siimple--display-lg-inline { display: inline !important; } .siimple--display-lg-inline-block { display: inline-block !important; } .siimple--display-lg-table { display: table !important; } .siimple--display-lg-table-cell { display: table-cell !important; } .siimple--display-lg-table-row { display: table-row !important; } .siimple--display-lg-flex { display: flex !important; } .siimple--display-lg-inline-flex { display: inline-flex !important; } } @media (max-width: 768px) { .siimple--display-md-none { display: none !important; } .siimple--display-md-block { display: block !important; } .siimple--display-md-inline { display: inline !important; } .siimple--display-md-inline-block { display: inline-block !important; } .siimple--display-md-table { display: table !important; } .siimple--display-md-table-cell { display: table-cell !important; } .siimple--display-md-table-row { display: table-row !important; } .siimple--display-md-flex { display: flex !important; } .siimple--display-md-inline-flex { display: inline-flex !important; } } @media (max-width: 600px) { .siimple--display-sm-none { display: none !important; } .siimple--display-sm-block { display: block !important; } .siimple--display-sm-inline { display: inline !important; } .siimple--display-sm-inline-block { display: inline-block !important; } .siimple--display-sm-table { display: table !important; } .siimple--display-sm-table-cell { display: table-cell !important; } .siimple--display-sm-table-row { display: table-row !important; } .siimple--display-sm-flex { display: flex !important; } .siimple--display-sm-inline-flex { display: inline-flex !important; } } @media (max-width: 480px) { .siimple--display-xs-none { display: none !important; } .siimple--display-xs-block { display: block !important; } .siimple--display-xs-inline { display: inline !important; } .siimple--display-xs-inline-block { display: inline-block !important; } .siimple--display-xs-table { display: table !important; } .siimple--display-xs-table-cell { display: table-cell !important; } .siimple--display-xs-table-row { display: table-row !important; } .siimple--display-xs-flex { display: flex !important; } .siimple--display-xs-inline-flex { display: inline-flex !important; } } .siimple--float-left { float: left !important; } .siimple--float-right { float: right !important; } .siimple--float-none { float: none !important; } @media (max-width: 1280px) { .siimple--float-xl-left { float: left !important; } .siimple--float-xl-right { float: right !important; } .siimple--float-xl-none { float: none !important; } } @media (max-width: 960px) { .siimple--float-lg-left { float: left !important; } .siimple--float-lg-right { float: right !important; } .siimple--float-lg-none { float: none !important; } } @media (max-width: 768px) { .siimple--float-md-left { float: left !important; } .siimple--float-md-right { float: right !important; } .siimple--float-md-none { float: none !important; } } @media (max-width: 600px) { .siimple--float-sm-left { float: left !important; } .siimple--float-sm-right { float: right !important; } .siimple--float-sm-none { float: none !important; } } @media (max-width: 480px) { .siimple--float-xs-left { float: left !important; } .siimple--float-xs-right { float: right !important; } .siimple--float-xs-none { float: none !important; } } .siimple--clearfix::after { display: block; content: ""; clear: both; } .siimple--lh-normal { line-height: 24px !important; } .siimple--lh-condensed { line-height: 18px !important; } .siimple--width-0 { width: 0% !important; } .siimple--mwidth-0 { max-width: 0% !important; } .siimple--height-0 { height: 0% !important; } .siimple--mheight-0 { max-height: 0% !important; } .siimple--width-25 { width: 25% !important; } .siimple--mwidth-25 { max-width: 25% !important; } .siimple--height-25 { height: 25% !important; } .siimple--mheight-25 { max-height: 25% !important; } .siimple--width-50 { width: 50% !important; } .siimple--mwidth-50 { max-width: 50% !important; } .siimple--height-50 { height: 50% !important; } .siimple--mheight-50 { max-height: 50% !important; } .siimple--width-75 { width: 75% !important; } .siimple--mwidth-75 { max-width: 75% !important; } .siimple--height-75 { height: 75% !important; } .siimple--mheight-75 { max-height: 75% !important; } .siimple--width-100 { width: 100% !important; } .siimple--mwidth-100 { max-width: 100% !important; } .siimple--height-100 { height: 100% !important; } .siimple--mheight-100 { max-height: 100% !important; } .siimple--mt-0 { margin-top: 0px !important; } .siimple--mb-0 { margin-bottom: 0px !important; } .siimple--ml-0 { margin-left: 0px !important; } .siimple--mr-0 { margin-right: 0px !important; } .siimple--mx-0 { margin-left: 0px !important; margin-right: 0px !important; } .siimple--my-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .siimple--pt-0 { padding-top: 0px !important; } .siimple--pb-0 { padding-bottom: 0px !important; } .siimple--pl-0 { padding-left: 0px !important; } .siimple--pr-0 { padding-right: 0px !important; } .siimple--px-0 { padding-left: 0px !important; padding-right: 0px !important; } .siimple--py-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .siimple--mt-1 { margin-top: 5px !important; } .siimple--mb-1 { margin-bottom: 5px !important; } .siimple--ml-1 { margin-left: 5px !important; } .siimple--mr-1 { margin-right: 5px !important; } .siimple--mx-1 { margin-left: 5px !important; margin-right: 5px !important; } .siimple--my-1 { margin-top: 5px !important; margin-bottom: 5px !important; } .siimple--pt-1 { padding-top: 5px !important; } .siimple--pb-1 { padding-bottom: 5px !important; } .siimple--pl-1 { padding-left: 5px !important; } .siimple--pr-1 { padding-right: 5px !important; } .siimple--px-1 { padding-left: 5px !important; padding-right: 5px !important; } .siimple--py-1 { padding-top: 5px !important; padding-bottom: 5px !important; } .siimple--mt-2 { margin-top: 10px !important; } .siimple--mb-2 { margin-bottom: 10px !important; } .siimple--ml-2 { margin-left: 10px !important; } .siimple--mr-2 { margin-right: 10px !important; } .siimple--mx-2 { margin-left: 10px !important; margin-right: 10px !important; } .siimple--my-2 { margin-top: 10px !important; margin-bottom: 10px !important; } .siimple--pt-2 { padding-top: 10px !important; } .siimple--pb-2 { padding-bottom: 10px !important; } .siimple--pl-2 { padding-left: 10px !important; } .siimple--pr-2 { padding-right: 10px !important; } .siimple--px-2 { padding-left: 10px !important; padding-right: 10px !important; } .siimple--py-2 { padding-top: 10px !important; padding-bottom: 10px !important; } .siimple--mt-3 { margin-top: 15px !important; } .siimple--mb-3 { margin-bottom: 15px !important; } .siimple--ml-3 { margin-left: 15px !important; } .siimple--mr-3 { margin-right: 15px !important; } .siimple--mx-3 { margin-left: 15px !important; margin-right: 15px !important; } .siimple--my-3 { margin-top: 15px !important; margin-bottom: 15px !important; } .siimple--pt-3 { padding-top: 15px !important; } .siimple--pb-3 { padding-bottom: 15px !important; } .siimple--pl-3 { padding-left: 15px !important; } .siimple--pr-3 { padding-right: 15px !important; } .siimple--px-3 { padding-left: 15px !important; padding-right: 15px !important; } .siimple--py-3 { padding-top: 15px !important; padding-bottom: 15px !important; } .siimple--mt-4 { margin-top: 25px !important; } .siimple--mb-4 { margin-bottom: 25px !important; } .siimple--ml-4 { margin-left: 25px !important; } .siimple--mr-4 { margin-right: 25px !important; } .siimple--mx-4 { margin-left: 25px !important; margin-right: 25px !important; } .siimple--my-4 { margin-top: 25px !important; margin-bottom: 25px !important; } .siimple--pt-4 { padding-top: 25px !important; } .siimple--pb-4 { padding-bottom: 25px !important; } .siimple--pl-4 { padding-left: 25px !important; } .siimple--pr-4 { padding-right: 25px !important; } .siimple--px-4 { padding-left: 25px !important; padding-right: 25px !important; } .siimple--py-4 { padding-top: 25px !important; padding-bottom: 25px !important; } .siimple--mt-5 { margin-top: 45px !important; } .siimple--mb-5 { margin-bottom: 45px !important; } .siimple--ml-5 { margin-left: 45px !important; } .siimple--mr-5 { margin-right: 45px !important; } .siimple--mx-5 { margin-left: 45px !important; margin-right: 45px !important; } .siimple--my-5 { margin-top: 45px !important; margin-bottom: 45px !important; } .siimple--pt-5 { padding-top: 45px !important; } .siimple--pb-5 { padding-bottom: 45px !important; } .siimple--pl-5 { padding-left: 45px !important; } .siimple--pr-5 { padding-right: 45px !important; } .siimple--px-5 { padding-left: 45px !important; padding-right: 45px !important; } .siimple--py-5 { padding-top: 45px !important; padding-bottom: 45px !important; } .siimple--mt-auto { margin-top: auto !important; } .siimple--mb-auto { margin-bottom: auto !important; } .siimple--ml-auto { margin-left: auto !important; } .siimple--mr-auto { margin-right: auto !important; } .siimple--mx-auto { margin-left: auto !important; margin-right: auto !important; } .siimple--my-auto { margin-top: auto !important; margin-bottom: auto !important; } .siimple--text-justify { text-align: justify !important; } .siimple--text-left { text-align: left !important; } .siimple--text-center { text-align: center !important; } .siimple--text-right { text-align: right !important; } .siimple--text-uppercase { text-transform: uppercase !important; } .siimple--text-lowercase { text-transform: lowercase !important; } .siimple--text-capitalize { text-transform: capitalize !important; } .siimple--text-bold { font-weight: 700 !important; } .siimple--text-italic { font-style: italic !important; } .siimple--text-normal { font-weight: 400 !important; } .siimple--text-small { font-size: 13px !important; } .siimple--rounded { border-radius: 5px; }