@charset "UTF-8"; /* Styles */ /* Font (Options: 'Lucida Console' or 'DOS') */ /* Characters */ /* Theme */ /* Responsive */ /* Scrool */ /* Grid */ @font-face { font-family: 'DOS'; src: url("./fonts/Perfect DOS VGA 437 Win.ttf"); } /* Global Definitions */ html { font-family: "Lucida Console", "monospace"; font-size: 18px; box-sizing: border-box; } body { margin: 0px; } *, *:before, *:after { font-family: inherit; font-size: inherit; box-sizing: inherit; } ul { margin: 0px; padding: 0px; list-style-type: none; } ul li { list-style-type: none; } ul li a { display: block; } a { color: inherit; text-decoration: none; } span { margin: 0px; } hr { border: none; border-bottom: 2px solid white; } input, select, textarea { width: 200px; } /* Font (Options: 'Lucida Console' or 'DOS') */ /* Characters */ /* Theme */ /* Responsive */ /* Scrool */ /* Grid */ @media only screen and (max-width: 600px) { .hide-on-small-only, .hide-on-small-and-down { display: none !important; } } @media only screen and (max-width: 992px) { .hide-on-med-and-down { display: none !important; } } @media only screen and (min-width: 601px) { .hide-on-med-and-up { display: none !important; } } @media only screen and (min-width: 600px) and (max-width: 992px) { .hide-on-med-only { display: none !important; } } @media only screen and (min-width: 993px) { .hide-on-large-only { display: none !important; } } @media only screen and (min-width: 1201px) { .hide-on-extra-large-only { display: none !important; } } @media only screen and (min-width: 1201px) { .show-on-extra-large { display: block !important; } } @media only screen and (min-width: 993px) { .show-on-large { display: block !important; } } @media only screen and (min-width: 600px) and (max-width: 992px) { .show-on-medium { display: block !important; } } @media only screen and (max-width: 600px) { .show-on-small { display: block !important; } } @media only screen and (min-width: 601px) { .show-on-medium-and-up { display: block !important; } } @media only screen and (max-width: 992px) { .show-on-medium-and-down { display: block !important; } } /* Font (Options: 'Lucida Console' or 'DOS') */ /* Characters */ /* Theme */ /* Responsive */ /* Scrool */ /* Grid */ /* Theme */ .primary { background-color: #0000a8; } .primary-text { color: #0000a8; } .primary-border { border-color: #0000a8; } .primary-hover:hover { background-color: #0000a8; } .primary-text-hover:hover { color: #0000a8; } .primary-border-hover:hover { border-color: #0000a8; } .secondary { background-color: #a8a8a8; } .secondary-text { color: #a8a8a8; } .secondary-border { border-color: #a8a8a8; } .secondary-hover:hover { background-color: #a8a8a8; } .secondary-text-hover:hover { color: #a8a8a8; } .secondary-border-hover:hover { border-color: #a8a8a8; } .success { background-color: #00a800; } .success-text { color: #00a800; } .success-border { border-color: #00a800; } .success-hover:hover { background-color: #00a800; } .success-text-hover:hover { color: #00a800; } .success-border-hover:hover { border-color: #00a800; } .danger { background-color: #a80000; } .danger-text { color: #a80000; } .danger-border { border-color: #a80000; } .danger-hover:hover { background-color: #a80000; } .danger-text-hover:hover { color: #a80000; } .danger-border-hover:hover { border-color: #a80000; } .warning { background-color: #a8a800; } .warning-text { color: #a8a800; } .warning-border { border-color: #a8a800; } .warning-hover:hover { background-color: #a8a800; } .warning-text-hover:hover { color: #a8a800; } .warning-border-hover:hover { border-color: #a8a800; } .info { background-color: #00a8a8; } .info-text { color: #00a8a8; } .info-border { border-color: #00a8a8; } .info-hover:hover { background-color: #00a8a8; } .info-text-hover:hover { color: #00a8a8; } .info-border-hover:hover { border-color: #00a8a8; } /* 168 */ .black-168 { background-color: black !important; } .blue-168 { background-color: #0000a8 !important; } .green-168 { background-color: #00a800 !important; } .cyan-168 { background-color: #00a8a8 !important; } .red-168 { background-color: #a80000 !important; } .purple-168 { background-color: #a800a8 !important; } .yellow-168 { background-color: #a8a800 !important; } .white-168 { background-color: #a8a8a8 !important; } .orange-168 { background-color: #a85600 !important; } .black-168-text { color: black !important; } .blue-168-text { color: #0000a8 !important; } .green-168-text { color: #00a800 !important; } .cyan-168-text { color: #00a8a8 !important; } .red-168-text { color: #a80000 !important; } .purple-168-text { color: #a800a8 !important; } .yellow-168-text { color: #a8a800 !important; } .white-168-text { color: #a8a8a8 !important; } .orange-168-text { color: #a85600 !important; } .black-168-border { border-color: black !important; } .blue-168-border { border-color: #0000a8 !important; } .green-168-border { border-color: #00a800 !important; } .cyan-168-border { border-color: #00a8a8 !important; } .red-168-border { border-color: #a80000 !important; } .purple-168-border { border-color: #a800a8 !important; } .yellow-168-border { border-color: #a8a800 !important; } .white-168-border { border-color: #a8a8a8 !important; } .orange-168-border { border-color: #a85600 !important; } .black-168-hover:hover { background-color: black !important; } .blue-168-hover:hover { background-color: #0000a8 !important; } .green-168-hover:hover { background-color: #00a800 !important; } .cyan-168-hover:hover { background-color: #00a8a8 !important; } .red-168-hover:hover { background-color: #a80000 !important; } .purple-168-hover:hover { background-color: #a800a8 !important; } .yellow-168-hover:hover { background-color: #a8a800 !important; } .white-168-hover:hover { background-color: #a8a8a8 !important; } .orange-168-hover:hover { background-color: #a85600 !important; } .black-168-text-hover:hover { color: black !important; } .blue-168-text-hover:hover { color: #0000a8 !important; } .green-168-text-hover:hover { color: #00a800 !important; } .cyan-168-text-hover:hover { color: #00a8a8 !important; } .red-168-text-hover:hover { color: #a80000 !important; } .purple-168-text-hover:hover { color: #a800a8 !important; } .yellow-168-text-hover:hover { color: #a8a800 !important; } .white-168-text-hover:hover { color: #a8a8a8 !important; } .orange-168-text-hover:hover { color: #a85600 !important; } .black-168-border-hover:hover { border-color: black !important; } .blue-168-border-hover:hover { border-color: #0000a8 !important; } .green-168-border-hover:hover { border-color: #00a800 !important; } .cyan-168-border-hover:hover { border-color: #00a8a8 !important; } .red-168-border-hover:hover { border-color: #a80000 !important; } .purple-168-border-hover:hover { border-color: #a800a8 !important; } .yellow-168-border-hover:hover { border-color: #a8a800 !important; } .white-168-border-hover:hover { border-color: #a8a8a8 !important; } .orange-168-border-hover:hover { border-color: #a85600 !important; } /* 255 */ .black-255 { background-color: black !important; } .blue-255 { background-color: blue !important; } .green-255 { background-color: lime !important; } .cyan-255 { background-color: cyan !important; } .red-255 { background-color: red !important; } .purple-255 { background-color: magenta !important; } .yellow-255 { background-color: yellow !important; } .white-255 { background-color: white !important; } .orange-255 { background-color: #ffa800 !important; } .black-255-text { color: black !important; } .blue-255-text { color: blue !important; } .green-255-text { color: lime !important; } .cyan-255-text { color: cyan !important; } .red-255-text { color: red !important; } .purple-255-text { color: magenta !important; } .yellow-255-text { color: yellow !important; } .white-255-text { color: white !important; } .orange-255-text { color: #ffa800 !important; } .black-255-border { border-color: black !important; } .blue-255-border { border-color: blue !important; } .green-255-border { border-color: lime !important; } .cyan-255-border { border-color: cyan !important; } .red-255-border { border-color: red !important; } .purple-255-border { border-color: magenta !important; } .yellow-255-border { border-color: yellow !important; } .white-255-border { border-color: white !important; } .orange-255-border { border-color: #ffa800 !important; } .black-255-hover:hover { background-color: black !important; } .blue-255-hover:hover { background-color: blue !important; } .green-255-hover:hover { background-color: lime !important; } .cyan-255-hover:hover { background-color: cyan !important; } .red-255-hover:hover { background-color: red !important; } .purple-255-hover:hover { background-color: magenta !important; } .yellow-255-hover:hover { background-color: yellow !important; } .white-255-hover:hover { background-color: white !important; } .orange-255-hover:hover { background-color: #ffa800 !important; } .black-255-text-hover:hover { color: black !important; } .blue-255-text-hover:hover { color: blue !important; } .green-255-text-hover:hover { color: lime !important; } .cyan-255-text-hover:hover { color: cyan !important; } .red-255-text-hover:hover { color: red !important; } .purple-255-text-hover:hover { color: magenta !important; } .yellow-255-text-hover:hover { color: yellow !important; } .white-255-text-hover:hover { color: white !important; } .orange-255-text-hover:hover { color: #ffa800 !important; } .black-255-border-hover:hover { border-color: black !important; } .blue-255-border-hover:hover { border-color: blue !important; } .green-255-border-hover:hover { border-color: lime !important; } .cyan-255-border-hover:hover { border-color: cyan !important; } .red-255-border-hover:hover { border-color: red !important; } .purple-255-border-hover:hover { border-color: magenta !important; } .yellow-255-border-hover:hover { border-color: yellow !important; } .white-255-border-hover:hover { border-color: white !important; } .orange-255-border-hover:hover { border-color: #ffa800 !important; } /* Misc */ .black { background-color: black !important; } .black-text { color: black !important; } .black-border { border-color: black !important; } .black-hover:hover { background-color: black !important; } .black-text-hover:hover { color: black !important; } .black-border-hover:hover { border-color: black !important; } .white { background-color: white !important; } .white-text { color: white !important; } .white-border { border-color: white !important; } .white-hover:hover { background-color: white !important; } .white-text-hover:hover { color: white !important; } .white-border-hover:hover { border-color: white !important; } .left { float: left !important; } .right { float: right !important; } .center { text-align: center; } .left-align { text-align: left; } .right-align { text-align: right; } .center-align { text-align: center; } .full-width { width: 100% !important; } .full-height { height: 100% !important; } .inline { display: inline !important; } .inline-block { display: inline-block !important; } .block { display: block !important; } .valign-top { vertical-align: top !important; } .valign-middle { vertical-align: middle !important; } .valign-bottom { vertical-align: bottom !important; } .fixed { position: fixed !important; } .absolute { position: absolute !important; } .relative { position: relative !important; } .static { position: static !important; } .no-shadow { box-shadow: none !important; } .no-padding { padding: 0px !important; } .no-border { border: none !important; } .content { padding: 12px; } .disable-select { user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .cursor-pointer { cursor: pointer !important; } .cursor-default { cursor: default !important; } .disabled { cursor: not-allowed !important; } /* Components */ .tui-button { display: inline-block; outline: 0; padding: 1px 10px; background-color: #00a800; color: black; border: none; cursor: pointer; text-align: center; box-shadow: 10px 10px black; border-radius: 0px; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-button.disabled { text-decoration: line-through; } .tui-button:active { background-color: #00a8a8 !important; color: black !important; box-shadow: none !important; } .tui-button:focus { color: cyan !important; } input[type=button] { width: initial; } /* Font (Options: 'Lucida Console' or 'DOS') */ /* Characters */ /* Theme */ /* Responsive */ /* Scrool */ /* Grid */ .tui-checkbox { display: block; position: relative; cursor: pointer; color: white; padding-left: 30px; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-checkbox.disabled { color: #a8a8a8; } .tui-checkbox input { position: absolute; opacity: 0; cursor: pointer; top: 0px; left: 0px; pointer-events: none; } .tui-checkbox span { position: absolute; width: 10px; height: 10px; cursor: pointer; top: 0px; left: 0px; } .tui-checkbox input:checked ~ span::after { content: "[√]"; color: cyan; } .tui-checkbox input:not(checked) ~ span::after { content: "[ ]"; } .tui-divider { border-bottom: 2px solid white; display: block; } .tui-black-divider { border-bottom: 2px solid black; display: block; } .tui-dropdown { position: relative; display: inline-block; cursor: pointer; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-dropdown-content { display: none; position: absolute; background-color: #a8a8a8; min-width: 200px; padding: 6px; z-index: 9; } .tui-dropdown-content ul { border: 2px black solid; } .tui-dropdown-content ul li { display: block !important; margin: 6px; } .tui-dropdown-content ul li a:hover { background-color: #00a800; } .tui-dropdown:hover > .tui-dropdown-content:first-of-type { display: block; } .tui-fieldset { border: 6px white double; padding: 12px; background-color: inherit; margin-bottom: 6px; } .tui-fieldset.no-legend { margin-top: 6px; } .tui-input-fieldset { border-top: 6px white double; border-bottom: 6px white double; border-left: 2px white solid; border-right: 2px white solid; padding: 5px; background-color: inherit; } .tui-input-fieldset legend { color: white; } .tui-input-fieldset:hover { border-color: yellow; } .tui-input-fieldset:hover legend { color: yellow; } .tui-fieldset-button { position: absolute; top: 0px; right: 16px; color: white; background-color: inherit; z-index: 2; border: none; cursor: pointer; outline: 0; padding: 2px; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-fieldset-button.left { right: initial; left: 16px !important; } .tui-fieldset-button.bottom { bottom: 0px; top: initial; } .tui-fieldset-text { position: absolute; bottom: 0px; left: 16px; color: white; background-color: inherit; z-index: 2; padding: 2px; } .tui-fieldset-text.right { left: initial; right: 16px; } .tui-fieldset-text.top { top: 0px; bottom: initial; } .tui-fieldset-button::before { content: "["; } .tui-fieldset-button::after { content: "]"; } .tui-fieldset-button:active { color: cyan !important; } .tui-input { background-color: black; color: white; outline: 0; border: none; border-radius: 0px; } .tui-input.disabled { background-color: #a8a8a8; color: black; } .tui-input:focus { background-color: yellow !important; color: black !important; } .tui-nav { width: 100%; background-color: #a8a8a8; padding: 0px 2px; z-index: 9; display: block; position: fixed; } .tui-nav ul li { display: inline-block; margin-left: 10px; padding: 1px 3px; } .tui-nav ul li a { display: block; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-nav ul li:hover { background-color: #00a800; } .tui-panel { background-color: #0000a8; display: inline-block; color: white; box-shadow: 10px 10px black; } .tui-panel-content { padding: 12px; } .tui-panel-header { padding-top: 2px; display: block; background: white; text-align: center; } .tui-progress-bar { display: block; position: relative; height: 20px; width: 200px; background-color: #00a8a8; overflow: hidden; } .tui-progress { position: absolute; left: 0px; background-color: cyan; height: 100%; display: inline-block; } .tui-progress-bar .tui-indeterminate { position: absolute; left: 0px; background-color: cyan; height: 20px; width: 20px; display: inline-block; animation: indeterminate 1s backwards; animation-iteration-count: infinite; animation-timing-function: linear; } .tui-progress-label { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1; } @keyframes indeterminate { from { margin-left: -10%; } to { margin-left: 100%; } } /* Font (Options: 'Lucida Console' or 'DOS') */ /* Characters */ /* Theme */ /* Responsive */ /* Scrool */ /* Grid */ .tui-radio { display: block; position: relative; cursor: pointer; color: white; padding-left: 30px; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-radio.disabled { color: #a8a8a8; } .tui-radio input { position: absolute; opacity: 0; cursor: pointer; top: 0px; left: 0px; pointer-events: none; } .tui-radio span { position: absolute; width: 10px; height: 10px; cursor: pointer; top: 0px; left: 0px; } .tui-radio input:checked ~ span:after { content: "(•)"; color: cyan !important; } .tui-radio input:not(checked) ~ span:after { content: "( )"; } /* Font (Options: 'Lucida Console' or 'DOS') */ /* Characters */ /* Theme */ /* Responsive */ /* Scrool */ /* Grid */ /* Default */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-image: url(images/scroll-cyan.png); background-repeat: repeat; } ::-webkit-scrollbar-thumb { background-color: #00a8a8; } ::-webkit-scrollbar-thumb:hover { background-color: #00a8a8; } /* Styles */ .tui-scroll-blue ::-webkit-scrollbar-track { background-image: url(images/scroll-blue.png); } .tui-scroll-blue ::-webkit-scrollbar-thumb { background-color: #0000a8; } .tui-scroll-blue ::-webkit-scrollbar-thumb:hover { background-color: #0000a8; } .tui-scroll-green ::-webkit-scrollbar-track { background-image: url(images/scroll-green.png); } .tui-scroll-green ::-webkit-scrollbar-thumb { background-color: #00a800; } .tui-scroll-green ::-webkit-scrollbar-thumb:hover { background-color: #00a800; } .tui-scroll-cyan ::-webkit-scrollbar-track { background-image: url(images/scroll-cyan.png); } .tui-scroll-cyan ::-webkit-scrollbar-thumb { background-color: #00a8a8; } .tui-scroll-cyan ::-webkit-scrollbar-thumb:hover { background-color: #00a8a8; } .tui-scroll-red ::-webkit-scrollbar-track { background-image: url(images/scroll-red.png); } .tui-scroll-red ::-webkit-scrollbar-thumb { background-color: #a80000; } .tui-scroll-red ::-webkit-scrollbar-thumb:hover { background-color: #a80000; } .tui-scroll-purple ::-webkit-scrollbar-track { background-image: url(images/scroll-purple.png); } .tui-scroll-purple ::-webkit-scrollbar-thumb { background-color: #a800a8; } .tui-scroll-purple ::-webkit-scrollbar-thumb:hover { background-color: #a800a8; } .tui-scroll-yellow ::-webkit-scrollbar-track { background-image: url(images/scroll-yellow.png); } .tui-scroll-yellow ::-webkit-scrollbar-thumb { background-color: #a8a800; } .tui-scroll-yellow ::-webkit-scrollbar-thumb:hover { background-color: #a8a800; } .tui-scroll-white ::-webkit-scrollbar-track { background-image: url(images/scroll-white.png); } .tui-scroll-white ::-webkit-scrollbar-thumb { background-color: #a8a8a8; } .tui-scroll-white ::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; } .tui-sidenav { position: fixed; top: 0px; left: 0px; background-color: #00a8a8; min-width: 200px; box-shadow: 10px 10px black !important; padding: 6px; z-index: 10; height: 100%; z-index: 8; display: none; } .tui-sidenav.right { left: initial; right: 0px; } .tui-sidenav.active { display: block !important; } .tui-sidenav ul { margin-top: 20px; border: 2px black solid; } .tui-sidenav ul li { display: block; margin: 6px; } .tui-sidenav ul li a { display: block; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-sidenav ul li:hover { background-color: yellow; } .tui-sidenav-button { cursor: pointer; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-statusbar { width: 100%; background-color: #a8a8a8; padding: 0px 1px; left: 0px; bottom: 0px; z-index: 9; position: fixed; } .tui-statusbar ul li { display: inline-block; margin-left: 10px; padding: 2px 3px; } .tui-statusbar ul li:active { background-color: #0000a8; color: white; } .tui-statusbar ul li a { user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-statusbar-divider { border-right: 2px black solid; display: inline; margin: 0px 3px; } .tui-table { border: 2px solid #a8a8a8; padding: 5px; border-collapse: collapse; } .tui-table.hovered-blue tbody tr:hover { background-color: blue !important; color: black; } .tui-table.hovered-green tbody tr:hover { background-color: lime !important; color: black; } .tui-table.hovered-cyan tbody tr:hover { background-color: cyan !important; color: black; } .tui-table.hovered-red tbody tr:hover { background-color: red !important; color: white; } .tui-table.hovered-purple tbody tr:hover { background-color: magenta !important; color: white; } .tui-table.hovered-yellow tbody tr:hover { background-color: yellow !important; color: black; } .tui-table.hovered-white tbody tr:hover { background-color: white !important; color: black; } .tui-table.hovered-orange tbody tr:hover { background-color: #ffa800 !important; color: black; } .tui-table.hovered tbody tr:hover { background-color: cyan !important; color: black; } .tui-table.striped-blue tbody tr:nth-child(even) { background-color: #0000a8; } .tui-table.striped-green tbody tr:nth-child(even) { background-color: #00a800; } .tui-table.striped-cyan tbody tr:nth-child(even) { background-color: #00a8a8; } .tui-table.striped-red tbody tr:nth-child(even) { background-color: #a80000; } .tui-table.striped-purple tbody tr:nth-child(even) { background-color: #a800a8; } .tui-table.striped-yellow tbody tr:nth-child(even) { background-color: #a8a800; } .tui-table.striped-white tbody tr:nth-child(even) { background-color: #a8a8a8; color: black; } .tui-table.striped-orange tbody tr:nth-child(even) { background-color: #a85600; } .tui-table tbody { background-color: inherit; color: white; } .tui-table tbody tr td { border-right: 2px solid #a8a8a8; padding: 0px 2px; } .tui-table thead { background-color: inherit; color: yellow; text-align: center; } .tui-table tfoot { background-color: inherit; color: yellow; text-align: center; } .tui-table-grid { border-collapse: collapse; width: 100%; } .tui-table-grid thead tr td, .tui-table-grid tbody tr td, .tui-table-grid thead tr th, .tui-table-grid tbody tr th { border: 2px solid black; padding: 10px; vertical-align: top; } .tui-tabs { background-color: #0000a8; width: 100%; padding: 0px 10px 0px 10px; } .tui-tabs ul li { display: inline-block; } .tui-tabs ul li a { display: block; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } .tui-tab { padding: 2px 10px 0px 10px; color: #a8a8a8; cursor: pointer; } .tui-tab.active { background-color: #a8a8a8; color: #0000a8; } .tui-tab.disabled { text-decoration: line-through; } .tui-tab-content { display: none; } .tui-textarea { background-color: inherit; border: none; padding: 0px; color: yellow; outline: none; } .tui-textarea.disabled { background-color: #a8a8a8; color: black; } .tui-window { background-color: #0000a8; padding: 1px; display: inline-block; position: relative; box-shadow: 10px 10px black; color: white; } .tui-screen-640-480 { width: 640px; height: 480px; } .tui-screen-800-600 { width: 800px; height: 600px; } .tui-screen-1024-768 { width: 1024px; height: 768px; } .tui-screen-640-480, .tui-screen-800-600, .tui-screen-1024-768 { position: relative; overflow: hidden; } .tui-screen-640-480.bordered, .tui-screen-800-600.bordered, .tui-screen-1024-768.bordered { border: 2px solid black; } .tui-screen-640-480.centered, .tui-screen-800-600.centered, .tui-screen-1024-768.centered { margin: auto; margin-top: 20px; } .tui-datetime { padding: 1px 0px 1px 0px; margin-right: 10px; float: right; } .tui-shortcut { float: right; } .tui-shadow, .tui-shadow-1 { box-shadow: 10px 10px black !important; } .tui-shadow-2 { box-shadow: 15px 15px black; } .tui-shadow-3 { box-shadow: 20px 20px black; } .tui-shadow-4 { box-shadow: 25px 25px black; } .tui-shadow-5 { box-shadow: 30px 30px black; } .tui-shadow-left, .tui-shadow-left-1 { box-shadow: -10px 10px black !important; } .tui-shadow-left-2 { box-shadow: -15px 15px black !important; } .tui-shadow-left-3 { box-shadow: -20px 20px black !important; } .tui-shadow-left-4 { box-shadow: -25px 25px black !important; } .tui-shadow-left-5 { box-shadow: -30px 30px black !important; } .tui-no-shadow { box-shadow: none !important; } .tui-bg-blue-white { background-image: url("./images/bg-blue-white.png"); background-repeat: repeat; } .tui-bg-blue-black { background-image: url("./images/bg-blue-black.png"); background-repeat: repeat; } .tui-bg-green-white { background-image: url("./images/bg-green-white.png"); background-repeat: repeat; } .tui-bg-green-black { background-image: url("./images/bg-green-black.png"); background-repeat: repeat; } .tui-bg-cyan-white { background-image: url("./images/bg-cyan-white.png"); background-repeat: repeat; } .tui-bg-cyan-black { background-image: url("./images/bg-cyan-black.png"); background-repeat: repeat; } .tui-bg-red-white { background-image: url("./images/bg-red-white.png"); background-repeat: repeat; } .tui-bg-red-black { background-image: url("./images/bg-red-black.png"); background-repeat: repeat; } .tui-bg-purple-white { background-image: url("./images/bg-purple-white.png"); background-repeat: repeat; } .tui-bg-purple-black { background-image: url("./images/bg-purple-black.png"); background-repeat: repeat; } .tui-bg-yellow-white { background-image: url("./images/bg-yellow-white.png"); background-repeat: repeat; } .tui-bg-yellow-black { background-image: url("./images/bg-yellow-black.png"); background-repeat: repeat; } .tui-bg-orange-white { background-image: url("./images/bg-orange-white.png"); background-repeat: repeat; } .tui-bg-orange-black { background-image: url("./images/bg-orange-black.png"); background-repeat: repeat; } .tui-border-solid { border-style: solid !important; border-width: 2px !important; } .tui-border-dashed { border-style: dashed !important; border-width: 2px !important; } .tui-border-dotted { border-style: dotted !important; border-width: 2px !important; } .tui-border-double { border-style: double !important; border-width: 6px !important; } /* Font (Options: 'Lucida Console' or 'DOS') */ /* Characters */ /* Theme */ /* Responsive */ /* Scrool */ /* Grid */ .container { margin: 0 auto; max-width: 1280px; width: 90%; } @media only screen and (min-width: 601px) { .container { width: 85%; } } @media only screen and (min-width: 993px) { .container { width: 70%; } } .col .row { margin-left: -0.75rem; margin-right: -0.75rem; } .section { padding-top: 1rem; padding-bottom: 1rem; } .section.no-pad { padding: 0; } .section.no-pad-bot { padding-bottom: 0; } .section.no-pad-top { padding-top: 0; } .row { margin-left: auto; margin-right: auto; margin-bottom: 20px; } .row:after { content: ""; display: table; clear: both; } .row .col { float: left; box-sizing: border-box; padding: 0 0.75rem; min-height: 1px; } .row .col[class*="push-"], .row .col[class*="pull-"] { position: relative; } .row .col.s1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; } .row .col.s2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; } .row .col.s3 { width: 25%; margin-left: auto; left: auto; right: auto; } .row .col.s4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; } .row .col.s5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; } .row .col.s6 { width: 50%; margin-left: auto; left: auto; right: auto; } .row .col.s7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; } .row .col.s8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; } .row .col.s9 { width: 75%; margin-left: auto; left: auto; right: auto; } .row .col.s10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; } .row .col.s11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; } .row .col.s12 { width: 100%; margin-left: auto; left: auto; right: auto; } .row .col.offset-s1 { margin-left: 8.33333%; } .row .col.pull-s1 { right: 8.33333%; } .row .col.push-s1 { left: 8.33333%; } .row .col.offset-s2 { margin-left: 16.66667%; } .row .col.pull-s2 { right: 16.66667%; } .row .col.push-s2 { left: 16.66667%; } .row .col.offset-s3 { margin-left: 25%; } .row .col.pull-s3 { right: 25%; } .row .col.push-s3 { left: 25%; } .row .col.offset-s4 { margin-left: 33.33333%; } .row .col.pull-s4 { right: 33.33333%; } .row .col.push-s4 { left: 33.33333%; } .row .col.offset-s5 { margin-left: 41.66667%; } .row .col.pull-s5 { right: 41.66667%; } .row .col.push-s5 { left: 41.66667%; } .row .col.offset-s6 { margin-left: 50%; } .row .col.pull-s6 { right: 50%; } .row .col.push-s6 { left: 50%; } .row .col.offset-s7 { margin-left: 58.33333%; } .row .col.pull-s7 { right: 58.33333%; } .row .col.push-s7 { left: 58.33333%; } .row .col.offset-s8 { margin-left: 66.66667%; } .row .col.pull-s8 { right: 66.66667%; } .row .col.push-s8 { left: 66.66667%; } .row .col.offset-s9 { margin-left: 75%; } .row .col.pull-s9 { right: 75%; } .row .col.push-s9 { left: 75%; } .row .col.offset-s10 { margin-left: 83.33333%; } .row .col.pull-s10 { right: 83.33333%; } .row .col.push-s10 { left: 83.33333%; } .row .col.offset-s11 { margin-left: 91.66667%; } .row .col.pull-s11 { right: 91.66667%; } .row .col.push-s11 { left: 91.66667%; } .row .col.offset-s12 { margin-left: 100%; } .row .col.pull-s12 { right: 100%; } .row .col.push-s12 { left: 100%; } @media only screen and (min-width: 601px) { .row .col.m1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; } .row .col.m2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; } .row .col.m3 { width: 25%; margin-left: auto; left: auto; right: auto; } .row .col.m4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; } .row .col.m5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; } .row .col.m6 { width: 50%; margin-left: auto; left: auto; right: auto; } .row .col.m7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; } .row .col.m8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; } .row .col.m9 { width: 75%; margin-left: auto; left: auto; right: auto; } .row .col.m10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; } .row .col.m11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; } .row .col.m12 { width: 100%; margin-left: auto; left: auto; right: auto; } .row .col.offset-m1 { margin-left: 8.33333%; } .row .col.pull-m1 { right: 8.33333%; } .row .col.push-m1 { left: 8.33333%; } .row .col.offset-m2 { margin-left: 16.66667%; } .row .col.pull-m2 { right: 16.66667%; } .row .col.push-m2 { left: 16.66667%; } .row .col.offset-m3 { margin-left: 25%; } .row .col.pull-m3 { right: 25%; } .row .col.push-m3 { left: 25%; } .row .col.offset-m4 { margin-left: 33.33333%; } .row .col.pull-m4 { right: 33.33333%; } .row .col.push-m4 { left: 33.33333%; } .row .col.offset-m5 { margin-left: 41.66667%; } .row .col.pull-m5 { right: 41.66667%; } .row .col.push-m5 { left: 41.66667%; } .row .col.offset-m6 { margin-left: 50%; } .row .col.pull-m6 { right: 50%; } .row .col.push-m6 { left: 50%; } .row .col.offset-m7 { margin-left: 58.33333%; } .row .col.pull-m7 { right: 58.33333%; } .row .col.push-m7 { left: 58.33333%; } .row .col.offset-m8 { margin-left: 66.66667%; } .row .col.pull-m8 { right: 66.66667%; } .row .col.push-m8 { left: 66.66667%; } .row .col.offset-m9 { margin-left: 75%; } .row .col.pull-m9 { right: 75%; } .row .col.push-m9 { left: 75%; } .row .col.offset-m10 { margin-left: 83.33333%; } .row .col.pull-m10 { right: 83.33333%; } .row .col.push-m10 { left: 83.33333%; } .row .col.offset-m11 { margin-left: 91.66667%; } .row .col.pull-m11 { right: 91.66667%; } .row .col.push-m11 { left: 91.66667%; } .row .col.offset-m12 { margin-left: 100%; } .row .col.pull-m12 { right: 100%; } .row .col.push-m12 { left: 100%; } } @media only screen and (min-width: 993px) { .row .col.l1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; } .row .col.l2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; } .row .col.l3 { width: 25%; margin-left: auto; left: auto; right: auto; } .row .col.l4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; } .row .col.l5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; } .row .col.l6 { width: 50%; margin-left: auto; left: auto; right: auto; } .row .col.l7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; } .row .col.l8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; } .row .col.l9 { width: 75%; margin-left: auto; left: auto; right: auto; } .row .col.l10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; } .row .col.l11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; } .row .col.l12 { width: 100%; margin-left: auto; left: auto; right: auto; } .row .col.offset-l1 { margin-left: 8.33333%; } .row .col.pull-l1 { right: 8.33333%; } .row .col.push-l1 { left: 8.33333%; } .row .col.offset-l2 { margin-left: 16.66667%; } .row .col.pull-l2 { right: 16.66667%; } .row .col.push-l2 { left: 16.66667%; } .row .col.offset-l3 { margin-left: 25%; } .row .col.pull-l3 { right: 25%; } .row .col.push-l3 { left: 25%; } .row .col.offset-l4 { margin-left: 33.33333%; } .row .col.pull-l4 { right: 33.33333%; } .row .col.push-l4 { left: 33.33333%; } .row .col.offset-l5 { margin-left: 41.66667%; } .row .col.pull-l5 { right: 41.66667%; } .row .col.push-l5 { left: 41.66667%; } .row .col.offset-l6 { margin-left: 50%; } .row .col.pull-l6 { right: 50%; } .row .col.push-l6 { left: 50%; } .row .col.offset-l7 { margin-left: 58.33333%; } .row .col.pull-l7 { right: 58.33333%; } .row .col.push-l7 { left: 58.33333%; } .row .col.offset-l8 { margin-left: 66.66667%; } .row .col.pull-l8 { right: 66.66667%; } .row .col.push-l8 { left: 66.66667%; } .row .col.offset-l9 { margin-left: 75%; } .row .col.pull-l9 { right: 75%; } .row .col.push-l9 { left: 75%; } .row .col.offset-l10 { margin-left: 83.33333%; } .row .col.pull-l10 { right: 83.33333%; } .row .col.push-l10 { left: 83.33333%; } .row .col.offset-l11 { margin-left: 91.66667%; } .row .col.pull-l11 { right: 91.66667%; } .row .col.push-l11 { left: 91.66667%; } .row .col.offset-l12 { margin-left: 100%; } .row .col.pull-l12 { right: 100%; } .row .col.push-l12 { left: 100%; } } @media only screen and (min-width: 1201px) { .row .col.xl1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; } .row .col.xl2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; } .row .col.xl3 { width: 25%; margin-left: auto; left: auto; right: auto; } .row .col.xl4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; } .row .col.xl5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; } .row .col.xl6 { width: 50%; margin-left: auto; left: auto; right: auto; } .row .col.xl7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; } .row .col.xl8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; } .row .col.xl9 { width: 75%; margin-left: auto; left: auto; right: auto; } .row .col.xl10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; } .row .col.xl11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; } .row .col.xl12 { width: 100%; margin-left: auto; left: auto; right: auto; } .row .col.offset-xl1 { margin-left: 8.33333%; } .row .col.pull-xl1 { right: 8.33333%; } .row .col.push-xl1 { left: 8.33333%; } .row .col.offset-xl2 { margin-left: 16.66667%; } .row .col.pull-xl2 { right: 16.66667%; } .row .col.push-xl2 { left: 16.66667%; } .row .col.offset-xl3 { margin-left: 25%; } .row .col.pull-xl3 { right: 25%; } .row .col.push-xl3 { left: 25%; } .row .col.offset-xl4 { margin-left: 33.33333%; } .row .col.pull-xl4 { right: 33.33333%; } .row .col.push-xl4 { left: 33.33333%; } .row .col.offset-xl5 { margin-left: 41.66667%; } .row .col.pull-xl5 { right: 41.66667%; } .row .col.push-xl5 { left: 41.66667%; } .row .col.offset-xl6 { margin-left: 50%; } .row .col.pull-xl6 { right: 50%; } .row .col.push-xl6 { left: 50%; } .row .col.offset-xl7 { margin-left: 58.33333%; } .row .col.pull-xl7 { right: 58.33333%; } .row .col.push-xl7 { left: 58.33333%; } .row .col.offset-xl8 { margin-left: 66.66667%; } .row .col.pull-xl8 { right: 66.66667%; } .row .col.push-xl8 { left: 66.66667%; } .row .col.offset-xl9 { margin-left: 75%; } .row .col.pull-xl9 { right: 75%; } .row .col.push-xl9 { left: 75%; } .row .col.offset-xl10 { margin-left: 83.33333%; } .row .col.pull-xl10 { right: 83.33333%; } .row .col.push-xl10 { left: 83.33333%; } .row .col.offset-xl11 { margin-left: 91.66667%; } .row .col.pull-xl11 { right: 91.66667%; } .row .col.push-xl11 { left: 91.66667%; } .row .col.offset-xl12 { margin-left: 100%; } .row .col.pull-xl12 { right: 100%; } .row .col.push-xl12 { left: 100%; } } .tui-modal { position: absolute; left: 0px; right: 0px; top: 100px; z-index: 101; display: none; } .tui-modal.active { display: block !important; } .tui-overlap { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 100; display: none; } .tui-overlap.active { display: block !important; } /* Chart container */ .tui-chart-vertical { position: relative; background-color: black; } .tui-chart-horizontal { position: relative; background-color: black; } /* Chart display */ .tui-chart-vertical .tui-chart-display { display: flex; position: absolute; top: 0px; left: 50px; right: 0px; bottom: 30px; align-items: flex-end; border-bottom: 2px solid white; border-left: 2px solid white; } .tui-chart-vertical .tui-chart-display.no-x-axis { bottom: 0px; } .tui-chart-vertical .tui-chart-display.no-y-axis { left: 0px; } .tui-chart-horizontal .tui-chart-display { display: flex; position: absolute; flex-direction: column; top: 0px; left: 50px; right: 0px; bottom: 30px; align-items: stretch; border-bottom: 2px solid white; border-left: 2px solid white; } .tui-chart-horizontal .tui-chart-display.no-x-axis { bottom: 0px; } .tui-chart-horizontal .tui-chart-display.no-y-axis { left: 0px; } /* Chart X axis */ .tui-chart-x-axis { display: flex; position: absolute; height: 30px; left: 50px; right: 0px; bottom: 0px; line-height: 30px; } /* Chart Y axis */ .tui-chart-y-axis { display: flex; flex-direction: column; position: absolute; top: 0px; left: 0px; bottom: 30px; width: 50px; } /* Chart legends */ .tui-chart-vertical .tui-chart-x-axis .tui-chart-legend { flex: 0 1 100%; text-align: center; } .tui-chart-vertical .tui-chart-y-axis .tui-chart-legend { flex: 1; text-align: right; padding-right: 2px; display: flex; align-items: flex-start; justify-content: flex-end; } .tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend { flex: 0 1 100%; text-align: right; } .tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend { flex: 1; text-align: right; padding-right: 2px; display: flex; align-items: center; justify-content: flex-end; } /* Chart value */ .tui-chart-vertical .tui-chart-display .tui-chart-value { flex: 0 1 100%; text-align: center; overflow: hidden; } .tui-chart-horizontal .tui-chart-display .tui-chart-value { flex: 1; text-align: right; display: flex; align-items: center; align-content: flex-start; justify-content: flex-end; overflow: hidden; }