.noteTooltip {
	position: relative;
	display: inline-block;
}
.noteTooltip .noteTooltipText {
    visibility: hidden;
    background-color: #ef3c3c;
    color: #ffffff;
    position: absolute;
    z-index: 1;
    height: fit-content;
    width: 230px;
    white-space: normal;
    padding: 12px;
    overflow: scroll;
    left: 30px;
    font-size: 10px;
    line-height: normal;
    bottom: -8px;
    font-weight: bold;
}
.noteTooltip:hover .noteTooltipText {
	visibility: visible;
}
.modalNote {
    white-space: normal;
    color: #ef3c3c;
}
.modal-dialog {
	max-width: 1000px;
}
.modal-body {
	margin-top: 15px;
    padding: 0 15px 15px;
}
#devSheetTable i.fa-circle-info,
.modalTable i.fa-circle-info {
    color: #ef3c3c;
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
}
p, ol, ul, th, td {
	font-family: 'Roboto', sans-serif;
}
#home .section-content {
	overflow: scroll;
}
.modalTable {
	width: 100%;
}
#devSheetTable th, #devSheetTable td,
.modalTable th, .modalTable td {
	padding: 8px;
	font-size: 10px;
	white-space: nowrap;
}
#devSheetTable th, .modalTable th {
	cursor: pointer;
    background-color: #1569b2;
    color: #ffffff;
}
#devSheetTable th:not(:last-child),
.modalTable th:not(:last-child) {
    border-right: 1px solid #ffffff;
}
#devSheetTable td:not(:last-child),
.modalTable td:not(:last-child) {
    border-right: 1px solid #ffffff;
}
#devSheetTable tr:nth-child(even) td,
.modalTable tr:nth-child(even) td {
	background-color: #f2f2f2
}
#devSheetTable tr:nth-child(odd) td,
.modalTable tr:nth-child(odd) td {
    background-color: #ffffff;
}
.devSheetBody {
    max-width: 1200px;
    height: calc(100vh - 200px);
    margin: 100px 15px;
    overflow: scroll;
}
.modeButtons {
    text-align: center;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: auto;
}
.modeButtons a {
    background-color: #1b69b2;
    padding: 15px 20px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
}
#devSheetTable tr td:nth-child(10) {
    text-transform: uppercase;
}
#devSheetTable th i {
    font-size: 15px;
}
#devSheetTable i,
.modalTable i {
	margin-left: 5px;
	font-size: 9px;
}
#devSheetTable a,
.modalTable a {
    color: #1569b2;
	transition: .5s;
}
#devSheetTable a:hover,
#devSheetTable a:focus,
.modalTable a:hover,
.modalTable a:focus {
    color: #212529;
}
#devSheetTable tr:nth-child(odd) td:not(:last-child),
.modalTable tr:nth-child(odd) td:not(:last-child) {
    border-right: 1px solid #f2f2f2;
}
#devSheetTable tr th:first-child,
#devSheetTable tr td:first-child,
.modalTable tr th:first-child,
.modalTable tr td:first-child {
	position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
}
#devSheetTable tr:first-child,
.modalTable tr:first-child {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
}
body.dark .modeButtons a {
    background-color: #1d1d1d;
    color: #8e8e8e;
}
body.dark {
	background-color: #000000;
}
body.dark #devSheetTable a,
body.dark .modalTable a {
    color: #ffffff;
}
body.dark .modeButtons a:nth-child(2) {
    pointer-events: none;
    background-color: #121212;
    color: #5e5e5e;
}
body:not(.dark) .modeButtons a:first-child {
	pointer-events: none;
    background-color: #1a5892;
    color: #dfdfdf;
}
#devSheetTable td,
#devSheetTable td span,
.modalTable td,
.modalTable td span {
	outline-color: #1569b2;
}
body.dark #devSheetTable td,
body.dark #devSheetTable td span,
body.dark .modalTable td,
body.dark .modalTable td span {
	outline-color: #000000;
}
body.dark #devSheetTable th,
body.dark .modalTable th {
    background-color: #494949;
    color: #fcfcfc;
}
body.dark #devSheetTable th:not(:last-child),
body.dark .modalTable th:not(:last-child) {
    border-right: 1px solid #000000;
}
body.dark #devSheetTable tr:nth-child(odd) td,
body.dark .modalTable tr:nth-child(odd) td {
    background-color: #000000;
    color: #8e8e8e;
}
body.dark #devSheetTable tr:nth-child(odd) td:not(:last-child),
body.dark .modalTable tr:nth-child(odd) td:not(:last-child) {
    border-right: 1px solid #1a1a1a;
}
body.dark #devSheetTable tr:nth-child(even) td,
body.dark .modalTable tr:nth-child(even) td {
    background-color: #1d1d1d;
    color: #8e8e8e;
}
body.dark #devSheetTable td:not(:last-child),
body.dark .modalTable td:not(:last-child) {
    border-right: 1px solid #000000;
}
@media only screen and (min-width: 768px) {
	#devSheetTable th, #devSheetTable td,
	.modalTable th, .modalTable td {
		padding: 20px;
		font-size: 16px;
	}
	.noteTooltip .noteTooltipText {
		width: 300px;
		padding: 20px;
		font-size: 14px;
		bottom: -20px;
	}
}
@media only screen and (min-width: 768px) {
	#devSheetTable i, .modalTable i {
		font-size: 12px;
	}
}
@media only screen and (min-width: 992px) {
	.devSheetBody {
		max-width: calc(100% - 100px);
		margin: 100px auto;
	}
}
@media only screen and (min-width: 1230px) {
	.devSheetBody {
		max-width: calc(100% - 200px);
	}
}