summaryrefslogtreecommitdiff
path: root/css/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'css/style.css')
-rw-r--r--css/style.css1155
1 files changed, 1155 insertions, 0 deletions
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..acbba75
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,1155 @@
+/* PrefaceCSS <https://github.com/cluzier/PrefaceCSS> , Copyright 2019, Conner Luzier */
+/* Imports */
+@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
+/* Define some variables we will need (colors) */
+/* Do the imports for other scss */
+* {
+ font-family: "Roboto Mono", monospace;
+ font-weight: 400;
+ color: #212121;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ word-wrap: break-word; }
+
+nav {
+ margin: 20px auto;
+ max-width: 960px;
+ width: 95%; }
+ nav label {
+ font-weight: bold; }
+ nav ul {
+ list-style: none;
+ float: right; }
+ nav ul li {
+ margin: 0 15px; }
+ nav * {
+ display: inline-block; }
+ @media screen and (max-width: 640px) {
+ nav {
+ text-align: center; }
+ nav > * {
+ display: block; }
+ nav ul {
+ float: none;
+ margin-top: 15px; } }
+
+.container {
+ max-width: 960px;
+ width: 95%;
+ margin: 0 auto; }
+
+.grid-flex {
+ display: flex; }
+
+.grid-flex-wrap {
+ display: flex;
+ flex-wrap: wrap; }
+
+.row:after {
+ content: '';
+ display: table;
+ clear: both; }
+
+.flex-1 {
+ flex: 1; }
+
+.flex-2 {
+ flex: 2; }
+
+.flex-3 {
+ flex: 3; }
+
+.flex-4 {
+ flex: 4; }
+
+.flex-5 {
+ flex: 5; }
+
+.flex-6 {
+ flex: 6; }
+
+.flex-7 {
+ flex: 7; }
+
+.flex-8 {
+ flex: 8; }
+
+.flex-9 {
+ flex: 9; }
+
+.flex-10 {
+ flex: 10; }
+
+/* Old grid system */
+.one.column, .one.columns {
+ width: 7.33333%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.two.columns {
+ width: 15.66667%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.three.columns {
+ width: 24%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.four.columns {
+ width: 32.33333%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.five.columns {
+ width: 40.66667%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.six.columns {
+ width: 49%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.seven.columns {
+ width: 57.33333%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.eight.columns {
+ width: 65.66667%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.nine.columns {
+ width: 74%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.ten.columns {
+ width: 82.33333%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.eleven.columns {
+ width: 90.66667%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+.twelve.columns {
+ width: 99%;
+ display: inline-block;
+ margin: 0 .5%;
+ float: left; }
+
+@media screen and (max-width: 750px) {
+ .columns.desktop, .column.desktop {
+ display: block !important;
+ width: 99% !important; } }
+
+@media screen and (min-width: 750px) {
+ .columns.mobile, .column.mobile {
+ display: block !important;
+ width: 99% !important; } }
+
+button {
+ display: inline-block;
+ padding: 8px 30px;
+ margin: 5px 0;
+ text-align: center;
+ text-transform: uppercase;
+ border: none;
+ outline: none;
+ border-radius: 2px;
+ color: #413a3a;
+ cursor: pointer;
+ background-color: #212121;
+ transition: 0.2s ease-in-out; }
+ button:hover, button:disabled {
+ background-color: #878787; }
+ button:active {
+ background-color: black; }
+ button.success {
+ background-color: #66cdaa;
+ transition: 0.2s ease-in-out; }
+ button.success:hover, button.success:disabled {
+ background-color: #a0e0ca; }
+ button.success:active {
+ background-color: #39ae86; }
+ button.error {
+ background-color: #f08080;
+ transition: 0.2s ease-in-out; }
+ button.error:hover, button.error:disabled {
+ background-color: #f8c4c4; }
+ button.error:active {
+ background-color: #e83c3c; }
+ button.warning {
+ background-color: #fef65b;
+ transition: 0.2s ease-in-out; }
+ button.warning:hover, button.warning:disabled {
+ background-color: #fefaa7; }
+ button.warning:active {
+ background-color: #fef20f; }
+ button.btn-shadow {
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
+ button.btn-shadow:hover {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+ button.btn-shadow:active {
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
+
+input, textarea, select {
+ display: block;
+ width: 100%;
+ padding: 5px;
+ margin: 5px 0;
+ border: 1px solid #c0c0c0;
+ outline: none;
+ border-radius: 2px;
+ background-color: #ffffff; }
+ input:hover, textarea:hover, select:hover {
+ border-color: #6e6e6e; }
+ input:focus, textarea:focus, select:focus {
+ border-color: #212121; }
+
+textarea {
+ resize: vertical;
+ min-height: 60px; }
+
+b, strong {
+ font-weight: 700; }
+
+a {
+ text-decoration: underline;
+ cursor: pointer; }
+ a:hover {
+ color: #6e6e6e; }
+ a.none {
+ text-decoration: none; }
+
+h1 {
+ font-size: 3rem; }
+
+h2 {
+ font-size: 2.6rem; }
+
+h3 {
+ font-size: 2.2rem; }
+
+h4 {
+ font-size: 1.8rem; }
+
+h5 {
+ font-size: 1.6rem; }
+
+h6 {
+ font-size: 1.4rem; }
+
+h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 10px;
+ font-weight: bold; }
+
+small {
+ font-size: .8rem; }
+
+p {
+ margin: 15px 0; }
+
+.text-left {
+ text-align: left; }
+
+.text-center {
+ text-align: center; }
+
+.text-right {
+ text-align: right; }
+
+.text-muted, .text-muted * {
+ color: #616161; }
+
+.text-success, .text-success * {
+ color: #66cdaa; }
+
+.text-error, .text-error * {
+ color: #f08080; }
+
+.text-warning, .text-warning * {
+ color: #fef65b; }
+
+.text-inverted, .text-inverted * {
+ color: #413a3a; }
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+ margin-top: .5em; }
+ @media screen and (max-width: 750px) {
+ table {
+ overflow-x: auto;
+ display: block; } }
+ table td, table th {
+ padding: 12px 15px;
+ text-align: left;
+ border-bottom: 1px solid #c0c0c0; }
+
+ul ul {
+ margin-left: 15px; }
+
+ul.inner, ul .inner {
+ list-style-position: inside; }
+
+ul.outer, ul .outer {
+ list-style-position: outside; }
+
+/**
+ * Thanks to Chris Bracco for this tooltip from https://codepen.io/cbracco/pen/qzukg
+ */
+/* Add this attribute to the element that needs a tooltip */
+[data-tooltip] {
+ position: relative;
+ z-index: 2;
+ cursor: pointer; }
+
+/* Hide the tooltip content by default */
+[data-tooltip]:before,
+[data-tooltip]:after {
+ visibility: hidden;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ opacity: 0;
+ pointer-events: none; }
+
+/* Position tooltip above the element */
+[data-tooltip]:before {
+ position: absolute;
+ bottom: 150%;
+ left: 50%;
+ margin-bottom: 5px;
+ margin-left: -80px;
+ padding: 7px;
+ width: 160px;
+ border-radius: 3px;
+ background-color: #000;
+ background-color: rgba(51, 51, 51, 0.9);
+ color: #fff;
+ content: attr(data-tooltip);
+ text-align: center;
+ font-size: 14px;
+ line-height: 1.2; }
+
+/* Triangle hack to make tooltip look like a speech bubble */
+[data-tooltip]:after {
+ position: absolute;
+ bottom: 150%;
+ left: 50%;
+ margin-left: -5px;
+ width: 0;
+ border-top: 5px solid #000;
+ border-top: 5px solid rgba(51, 51, 51, 0.9);
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+ content: " ";
+ font-size: 0;
+ line-height: 0; }
+
+/* Show tooltip content on hover */
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+ visibility: visible;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ opacity: 1; }
+
+.card {
+ margin: 15px;
+ border-radius: 1px;
+ border: 0.5px solid #c0c0c0; }
+ .card img {
+ width: 100%;
+ display: block;
+ border-radius: 1px 1px 0 0; }
+ .card .content {
+ padding: 10px; }
+ .card .footer {
+ border-top: 1px solid #c0c0c0;
+ padding: 5px 15px;
+ text-align: right; }
+ .card.card-shadow {
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ border: none; }
+
+hr {
+ border: none;
+ outline: none;
+ height: 1px;
+ width: 60%;
+ background-color: #c0c0c0; }
+
+.bg-success {
+ background-color: #66cdaa; }
+
+.bg-warning {
+ background-color: #fef65b; }
+
+.bg-error {
+ background-color: #f08080; }
+
+.bg-success-bright {
+ background-color: #66cdaa; }
+
+.bg-warning-bright {
+ background-color: #fef65b; }
+
+.bg-error-bright {
+ background-color: #f08080; }
+
+code {
+ background-color: #c0c0c0;
+ display: inline-block;
+ padding: 4px 8px;
+ font-family: monospace;
+ overflow-x: auto; }
+
+pre > code {
+ display: block;
+ white-space: pre; }
+
+.cover {
+ min-height: 60vh;
+ display: flex;
+ align-items: center;
+ justify-content: center; }
+ .cover > div {
+ flex: 1; }
+
+.progress {
+ display: block;
+ width: 100%;
+ height: 3px;
+ margin: 5px;
+ background-color: #c0c0c0; }
+ .progress .bar {
+ transition: width .5s ease-in-out;
+ display: block;
+ height: 100%;
+ width: 100%;
+ max-width: 100%; }
+
+img {
+ display: block;
+ width: 100%; }
+
+.pagination {
+ display: flex;
+ width: 100%;
+ text-align: center;
+ padding: 15px; }
+ .pagination * {
+ text-decoration: none; }
+ .pagination > * {
+ flex: 1;
+ padding: 3px; }
+ .pagination > *:hover {
+ background-color: #cdcdcd;
+ transition: .3s background-color ease-in-out; }
+ .pagination > *:hover, .pagination > *:hover * {
+ color: #212121; }
+ .pagination .action {
+ flex: .5; }
+ .pagination.no-flex {
+ display: block; }
+ .pagination.no-flex > * {
+ display: inline-block;
+ margin: 0 10px; }
+
+.lds-facebook {
+ display: inline-block;
+ position: relative;
+ margin: 25px;
+ width: 64px;
+ height: 64px; }
+
+.lds-facebook div {
+ display: inline-block;
+ position: absolute;
+ left: 6px;
+ width: 13px;
+ background: #413a3a;
+ animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; }
+
+.lds-facebook div:nth-child(1) {
+ left: 6px;
+ animation-delay: -0.24s; }
+
+.lds-facebook div:nth-child(2) {
+ left: 26px;
+ animation-delay: -0.12s; }
+
+.lds-facebook div:nth-child(3) {
+ left: 45px;
+ animation-delay: 0; }
+
+@keyframes lds-facebook {
+ 0% {
+ top: 6px;
+ height: 51px; }
+ 50%, 100% {
+ top: 19px;
+ height: 26px; } }
+
+.lds-roller {
+ display: inline-block;
+ position: relative;
+ margin: 25px;
+ width: 64px;
+ height: 64px; }
+
+.lds-roller div {
+ animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ transform-origin: 32px 32px; }
+
+.lds-roller div:after {
+ content: " ";
+ display: block;
+ position: absolute;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: #413a3a;
+ margin: -3px 0 0 -3px; }
+
+.lds-roller div:nth-child(1) {
+ animation-delay: -0.036s; }
+
+.lds-roller div:nth-child(1):after {
+ top: 50px;
+ left: 50px; }
+
+.lds-roller div:nth-child(2) {
+ animation-delay: -0.072s; }
+
+.lds-roller div:nth-child(2):after {
+ top: 54px;
+ left: 45px; }
+
+.lds-roller div:nth-child(3) {
+ animation-delay: -0.108s; }
+
+.lds-roller div:nth-child(3):after {
+ top: 57px;
+ left: 39px; }
+
+.lds-roller div:nth-child(4) {
+ animation-delay: -0.144s; }
+
+.lds-roller div:nth-child(4):after {
+ top: 58px;
+ left: 32px; }
+
+.lds-roller div:nth-child(5) {
+ animation-delay: -0.18s; }
+
+.lds-roller div:nth-child(5):after {
+ top: 57px;
+ left: 25px; }
+
+.lds-roller div:nth-child(6) {
+ animation-delay: -0.216s; }
+
+.lds-roller div:nth-child(6):after {
+ top: 54px;
+ left: 19px; }
+
+.lds-roller div:nth-child(7) {
+ animation-delay: -0.252s; }
+
+.lds-roller div:nth-child(7):after {
+ top: 50px;
+ left: 14px; }
+
+.lds-roller div:nth-child(8) {
+ animation-delay: -0.288s; }
+
+.lds-roller div:nth-child(8):after {
+ top: 45px;
+ left: 10px; }
+
+@keyframes lds-roller {
+ 0% {
+ transform: rotate(0deg); }
+ 100% {
+ transform: rotate(360deg); } }
+
+.lds-ripple {
+ display: inline-block;
+ position: relative;
+ margin: 25px;
+ width: 64px;
+ height: 64px; }
+
+.lds-ripple div {
+ position: absolute;
+ border: 4px solid #413a3a;
+ opacity: 1;
+ border-radius: 50%;
+ animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
+
+.lds-ripple div:nth-child(2) {
+ animation-delay: -0.5s; }
+
+@keyframes lds-ripple {
+ 0% {
+ top: 28px;
+ left: 28px;
+ width: 0;
+ height: 0;
+ opacity: 1; }
+ 100% {
+ top: -1px;
+ left: -1px;
+ width: 58px;
+ height: 58px;
+ opacity: 0; } }
+
+.lds-ellipsis {
+ display: inline-block;
+ position: relative;
+ margin: 25px;
+ width: 64px;
+ height: 64px; }
+
+.lds-ellipsis div {
+ position: absolute;
+ top: 27px;
+ width: 11px;
+ height: 11px;
+ border-radius: 50%;
+ background: #413a3a;
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
+
+.lds-ellipsis div:nth-child(1) {
+ left: 6px;
+ animation: lds-ellipsis1 0.6s infinite; }
+
+.lds-ellipsis div:nth-child(2) {
+ left: 6px;
+ animation: lds-ellipsis2 0.6s infinite; }
+
+.lds-ellipsis div:nth-child(3) {
+ left: 26px;
+ animation: lds-ellipsis2 0.6s infinite; }
+
+.lds-ellipsis div:nth-child(4) {
+ left: 45px;
+ animation: lds-ellipsis3 0.6s infinite; }
+
+@keyframes lds-ellipsis1 {
+ 0% {
+ transform: scale(0); }
+ 100% {
+ transform: scale(1); } }
+
+@keyframes lds-ellipsis3 {
+ 0% {
+ transform: scale(1); }
+ 100% {
+ transform: scale(0); } }
+
+@keyframes lds-ellipsis2 {
+ 0% {
+ transform: translate(0, 0); }
+ 100% {
+ transform: translate(19px, 0); } }
+
+.lds-circle {
+ display: inline-block;
+ margin: 25px;
+ transform: translateZ(1px); }
+
+.lds-circle > div {
+ display: inline-block;
+ width: 51px;
+ height: 51px;
+ margin: 6px;
+ border-radius: 50%;
+ background: #413a3a;
+ animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
+
+@keyframes lds-circle {
+ 0%, 100% {
+ animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
+ 0% {
+ transform: rotateY(0deg); }
+ 50% {
+ transform: rotateY(1800deg);
+ animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
+ 100% {
+ transform: rotateY(3600deg); } }
+
+.lds-hourglass {
+ display: inline-block;
+ position: relative;
+ margin: 25px;
+ width: 64px;
+ height: 64px; }
+
+.lds-hourglass:after {
+ content: " ";
+ display: block;
+ border-radius: 50%;
+ width: 0;
+ height: 0;
+ margin: 6px;
+ box-sizing: border-box;
+ border: 26px solid #413a3a;
+ border-color: #413a3a transparent #413a3a transparent;
+ animation: lds-hourglass 1.2s infinite; }
+
+@keyframes lds-hourglass {
+ 0% {
+ transform: rotate(0);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
+ 50% {
+ transform: rotate(900deg);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+ 100% {
+ transform: rotate(1800deg); } }
+
+.spinner {
+ position: relative;
+ display: inline-block;
+ margin: 25px;
+ width: 64px;
+ height: 64px; }
+
+.cube1, .cube2 {
+ background-color: #413a3a;
+ width: 15px;
+ height: 15px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ animation: sk-cubemove 1.8s infinite ease-in-out; }
+
+.cube2 {
+ animation-delay: -0.9s; }
+
+@keyframes sk-cubemove {
+ 25% {
+ transform: translateX(42px) rotate(-90deg) scale(0.5);
+ -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
+ 50% {
+ transform: translateX(42px) translateY(42px) rotate(-179deg);
+ -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); }
+ 50.1% {
+ transform: translateX(42px) translateY(42px) rotate(-180deg);
+ -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
+ 75% {
+ transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
+ -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
+ 100% {
+ transform: rotate(-360deg);
+ -webkit-transform: rotate(-360deg); } }
+
+.box-spinner {
+ position: relative;
+ display: inline-block;
+ margin: 25px;
+ width: 64px;
+ height: 64px;
+ background-color: #413a3a;
+ animation: sk-rotateplane 1.2s infinite ease-in-out; }
+
+@keyframes sk-rotateplane {
+ 0% {
+ transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+ -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
+ 50% {
+ transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+ -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
+ 100% {
+ transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+ -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
+
+.sk-cube-grid {
+ position: relative;
+ display: inline-block;
+ margin: 25px;
+ width: 64px;
+ height: 64px; }
+
+.sk-cube-grid .sk-cube {
+ width: 33%;
+ height: 33%;
+ background-color: #413a3a;
+ float: left;
+ animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
+
+.sk-cube-grid .sk-cube1 {
+ animation-delay: 0.2s; }
+
+.sk-cube-grid .sk-cube2 {
+ animation-delay: 0.3s; }
+
+.sk-cube-grid .sk-cube3 {
+ animation-delay: 0.4s; }
+
+.sk-cube-grid .sk-cube4 {
+ animation-delay: 0.1s; }
+
+.sk-cube-grid .sk-cube5 {
+ animation-delay: 0.2s; }
+
+.sk-cube-grid .sk-cube6 {
+ animation-delay: 0.3s; }
+
+.sk-cube-grid .sk-cube7 {
+ animation-delay: 0s; }
+
+.sk-cube-grid .sk-cube8 {
+ animation-delay: 0.1s; }
+
+.sk-cube-grid .sk-cube9 {
+ animation-delay: 0.2s; }
+
+@keyframes sk-cubeGridScaleDelay {
+ 0%, 70%, 100% {
+ transform: scale3D(1, 1, 1); }
+ 35% {
+ transform: scale3D(0, 0, 1); } }
+
+.sk-folding-cube {
+ margin: 25px;
+ width: 40px;
+ height: 40px;
+ position: relative;
+ display: inline-block;
+ transform: rotateZ(45deg); }
+
+.sk-folding-cube .sk-cube {
+ float: left;
+ width: 50%;
+ height: 50%;
+ position: relative;
+ transform: scale(1.1); }
+
+.sk-folding-cube .sk-cube:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #413a3a;
+ animation: sk-foldCubeAngle 2.4s infinite linear both;
+ transform-origin: 100% 100%; }
+
+.sk-folding-cube .sk-cube2 {
+ transform: scale(1.1) rotateZ(90deg); }
+
+.sk-folding-cube .sk-cube3 {
+ transform: scale(1.1) rotateZ(180deg); }
+
+.sk-folding-cube .sk-cube4 {
+ transform: scale(1.1) rotateZ(270deg); }
+
+.sk-folding-cube .sk-cube2:before {
+ animation-delay: 0.3s; }
+
+.sk-folding-cube .sk-cube3:before {
+ animation-delay: 0.6s; }
+
+.sk-folding-cube .sk-cube4:before {
+ animation-delay: 0.9s; }
+
+@keyframes sk-foldCubeAngle {
+ 0%, 10% {
+ transform: perspective(140px) rotateX(-180deg);
+ opacity: 0; }
+ 25%, 75% {
+ transform: perspective(140px) rotateX(0deg);
+ opacity: 1; }
+ 90%, 100% {
+ transform: perspective(140px) rotateY(180deg);
+ opacity: 0; } }
+
+.scrollbar {
+ margin-left: 30px;
+ float: left;
+ height: 300px;
+ width: 65px;
+ background: #F5F5F5;
+ overflow-y: scroll;
+ margin-bottom: 25px; }
+
+.force-overflow {
+ min-height: 450px; }
+
+#wrapper {
+ text-align: center;
+ width: 500px;
+ margin: auto; }
+
+/*
+ * STYLE 1
+ */
+#style-1::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ border-radius: 10px;
+ background-color: #F5F5F5; }
+
+#style-1::-webkit-scrollbar {
+ width: 12px;
+ background-color: #F5F5F5; }
+
+#style-1::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #555; }
+
+/*
+ * STYLE 2
+ */
+#style-2::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ border-radius: 10px;
+ background-color: #F5F5F5; }
+
+#style-2::-webkit-scrollbar {
+ width: 12px;
+ background-color: #F5F5F5; }
+
+#style-2::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #D62929; }
+
+/*
+ * STYLE 3
+ */
+#style-3::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5; }
+
+#style-3::-webkit-scrollbar {
+ width: 6px;
+ background-color: #F5F5F5; }
+
+#style-3::-webkit-scrollbar-thumb {
+ background-color: #000000; }
+
+/*
+ * STYLE 4
+ */
+#style-4::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5; }
+
+#style-4::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-4::-webkit-scrollbar-thumb {
+ background-color: #000000;
+ border: 2px solid #555555; }
+
+/*
+ * STYLE 5
+ */
+#style-5::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5; }
+
+#style-5::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-5::-webkit-scrollbar-thumb {
+ background-color: #0ae;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent)); }
+
+/*
+ * STYLE 6
+ */
+#style-6::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5; }
+
+#style-6::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-6::-webkit-scrollbar-thumb {
+ background-color: #F90;
+ background-image: -webkit-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); }
+
+/*
+ * STYLE 7
+ */
+#style-7::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5;
+ border-radius: 10px; }
+
+#style-7::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-7::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #7a99d9), color-stop(0.72, #497dbd), color-stop(0.86, #1c3a94)); }
+
+/*
+ * STYLE 8
+ */
+#style-8::-webkit-scrollbar-track {
+ border: 1px solid black;
+ background-color: #F5F5F5; }
+
+#style-8::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-8::-webkit-scrollbar-thumb {
+ background-color: #000000; }
+
+/*
+ * STYLE 9
+ */
+#style-9::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5; }
+
+#style-9::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-9::-webkit-scrollbar-thumb {
+ background-color: #F90;
+ background-image: -webkit-linear-gradient(90deg, 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); }
+
+/*
+ * STYLE 10
+ */
+#style-10::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5;
+ border-radius: 10px; }
+
+#style-10::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-10::-webkit-scrollbar-thumb {
+ background-color: #AAA;
+ border-radius: 10px;
+ background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent); }
+
+/*
+ * STYLE 11
+ */
+#style-11::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ background-color: #F5F5F5;
+ border-radius: 10px; }
+
+#style-11::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-11::-webkit-scrollbar-thumb {
+ background-color: #3366FF;
+ border-radius: 10px;
+ background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent); }
+
+/*
+ * STYLE 12
+ */
+#style-12::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
+ border-radius: 10px;
+ background-color: #444444; }
+
+#style-12::-webkit-scrollbar {
+ width: 12px;
+ background-color: #F5F5F5; }
+
+#style-12::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: #D62929;
+ background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); }
+
+/*
+ * STYLE 13
+ */
+#style-13::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
+ border-radius: 10px;
+ background-color: #CCCCCC; }
+
+#style-13::-webkit-scrollbar {
+ width: 12px;
+ background-color: #F5F5F5; }
+
+#style-13::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: #D62929;
+ background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); }
+
+/*
+ * STYLE 14
+ */
+#style-14::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+ background-color: #CCCCCC; }
+
+#style-14::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-14::-webkit-scrollbar-thumb {
+ background-color: #FFF;
+ background-image: -webkit-linear-gradient(90deg, black 0%, black 25%, transparent 100%, black 75%, transparent); }
+
+/*
+ * STYLE 15
+ */
+#style-15::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+ background-color: #F5F5F5;
+ border-radius: 10px; }
+
+#style-15::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-15::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: #FFF;
+ background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(0.6, #54DE5D)); }
+
+/*
+ * STYLE 16
+ */
+#style-16::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+ background-color: #F5F5F5;
+ border-radius: 10px; }
+
+#style-16::-webkit-scrollbar {
+ width: 10px;
+ background-color: #F5F5F5; }
+
+#style-16::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: #FFF;
+ background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); }