#simulation-wrapper body, #simulation-wrapper p, #simulation-wrapper div, #simulation-wrapper span, #simulation-wrapper a, #simulation-wrapper li { font-size: 14px; }
.source { display: none; position: relative; }
.comparison { display: none; position: relative; }
.item-image { text-align: center; }
.table th { vertical-align: middle; }
.table td { padding: 1px 5px; position: relative; vertical-align: middle; }
.hide-on-mobile, .hide-on-mobile-xs { display: initial; width: 100%; }
th.hide-on-mobile, td.hide-on-mobile { display: table-cell; }
.show-on-mobile, .show-on-mobile-xs, .show-on-small { display: none; }
input.form-control, select.form-control { padding: 2px 6px !important; font-size: 15px; height: 30px; }
.input-group-text { padding: 2px 5px; }
i.info-tag { cursor: pointer; }
img[src=*] { visibility: visible; }
img[src="#"] { visibility: hidden; }
.text-dark-blue { color: rgb(0, 30, 150); }
#undo-button-gun1 { position: fixed; bottom: 55px; left: 50px; }
#redo-button-gun1 { position: fixed; bottom: 55px; left: 180px; }
#undo-button-gun2 { position: fixed; bottom: 55px; right: 180px; }
#redo-button-gun2 { position: fixed; bottom: 55px; right: 50px; }
.undo-button, .redo-button { display: none; z-index: 2; }
.comparison-table img.stat-img { width: 100%; height: 25px; }
.bg-custom.bg-secondary { background-color: rgb(217, 217, 217) !important; color: #333 !important; }
.bg-custom.bg-primary { background-color: rgb(0, 176, 240) !important; color: #fff !important; }
.bg-custom.bg-success { background-color: rgb(84, 130, 53) !important; color: #fff !important; }
.bg-custom.bg-warning { background-color: rgb(255, 192, 0) !important; color: #333 !important; }
.bg-custom.bg-danger { background-color: rgb(255, 0, 0) !important; color: #fff !important; }
td.toi-box { text-align: center; vertical-align: middle; position: relative; }
.toi-text { position: absolute; display: block; width: 100%; left: 0; color: #fff; z-index: 2; }
.toi-img { display: block; position: relative; }
.fish-text { position: absolute; display: block; width: 100%; left: 0; color: #fff; z-index: 2; }
.stat-img { display: block; position: relative; }
#modal-select-gun .modal-header { padding: 2px; }
#modal-select-gun .modal-header .close { padding: 5px 5px 10px 5px; margin: 1px 1px 1px auto; line-height: 0.2; }
table#comparison-table tr.fish-name-xs { display: none; }
table#comparison-table td.border-top-strong { border-top: 1px solid #777 !important; }
table#comparison-table td.border-bottom-strong { border-bottom: 1px solid #777 !important; }
.fish-pict img { height: 40px; }
@keyframes blinking {
	0% {
		background-color: rgba(255, 0, 0, .5);
	}
	100% {
		background-color: rgba(255, 0, 0, 1);
	}
}
#gun-selector-button { display: none; }
#gun-selector-button button {
	animation: blinking 1s infinite;
	max-width: 100%;
}
#gun-selector-button button img { max-width: 100%; }
.popover { max-width: 600px !important; }
.color-scale { display: inline-block; width: 65px; height: 20px; text-align: center; line-height: 18px; font-size: 12px; }
.btn-float-footer-box { position: fixed; bottom: 50px; left: 0; width: 100%; text-align: center; z-index: 1; display: none; background-color: rgba(0, 0, 0, .2); }
.btn-float-footer-box .btn-float-footer { margin: 5px; }
.orientation-vertical { writing-mode: vertical-lr; text-orientation: upright; font-size: 13px; letter-spacing: 0.5px; }
.loading-animation { position: absolute; background-color: rgba(255, 255, 255, .8); height: 100%; width: 100%; top: 0; left: 15px; display: none; }
.loading-animation > span { display: inline-block; margin: calc(50% - 17px) 0 0 calc(50% - 15px); }
@media (min-width: 1367px) {
	#table-comparison.container { max-width: 80%; }
}
@media (max-width: 1366px) {
	.input-box-1 { padding-right: 0; }
	.input-box-2 { padding-left: 0; }
	.input-box, .input-box p, .input-box div, .input-box span, .input-box a, .input-box li, .input-box input, .input-box select { font-size: 13px; }
	.input-box small { font-size: 11px; }
	.rubber-box, .rubber-box p, .rubber-box div, .rubber-box span, .rubber-box a, .rubber-box li, .rubber-box input, .rubber-box select { font-size: 13px; }
	.rubber-box input, .rubber-box select { height: 50px; }
	.rubber-box table tbody th small { font-size: 12px; }
	#table-comparison.container { max-width: 100%; }
	.input-box table td { height: 35px; }
}
@media (max-width: 1286px) {
	table#comparison-table thead tr:nth-child(2) th .big-font,
	table.table-sm tr th,
	table.table-sm tr th strong,
	table.table-sm tr td strong,
	table.table-sm tr td span,
	table.table-sm tr td { font-size: 11px !important; }
	table#comparison-table img.stat-img { height: 17px; }
}
@media (max-width: 1024px) {
	.input-box { width: 100%; max-width: 100%; flex: 0 0 100%; }
	.input-box-1 { padding-right: 15px; }
	.input-box-2 { padding-left: 15px; }
	.input-box-2 > table { border-top: none; }
	.show-on-small { display: contents; }
	.rubber-box table thead tr:nth-child(2) > th:nth-child(1) { display: none; }
	.rubber-box table tbody tr > th { display: none; }
	.rubber-box table tbody tr { position: relative; }
	.rubber-box table tbody tr td { height: 60px; vertical-align: bottom !important; }
	.rubber-box table tbody tr td:nth-child(1) { position: absolute; z-index: 1; border-top: none; border-bottom: none; padding: 5px 10px; height: 30px; background-color: #fff; width: 100%; }
	/*.rubber-box table tbody tr td:nth-child(2) { border-left: 1px solid #ccc; }*/
	.rubber-box input, .rubber-box select { height: 30px; border-top: 1px solid #999 !important; }
}
@media (max-width: 800px) {
	table#comparison-table thead tr:nth-child(2) th .big-font,
	table.table-sm tr th,
	table.table-sm tr th strong,
	table.table-sm tr td strong,
	table.table-sm tr td span,
	table.table-sm tr td { font-size: 9px !important; }
	.fish-1 { width: 35px; }
	.fish-2 { width: 45px; }
	.fish-3 { width: 55px; }
	.fish-4 { width: 65px; }
	.fish-5 { width: 55px; }
	.fish-6 { width: 70px; }
	.fish-7 { width: 80px; }
	.fish-8 { width: 90px; }
	.fish-pict img { height: 25px; }
	.btn-float-footer-box .btn-float-footer, .btn-float-footer-box a, .btn-float-footer-box span { font-size: 13px !important; }
	#undo-button-gun1 { font-size: 13px; }
	#redo-button-gun1 { font-size: 13px; left: 150px; }
	#undo-button-gun2 { font-size: 13px; right: 150px; }
	#redo-button-gun2 { font-size: 13px; }
}
@media (max-width: 600px) {
	td.fish-pict { display: none; }
	.hide-on-mobile, th.hide-on-mobile, td.hide-on-mobile { display: none; }
	.show-on-mobile-xs, th.show-on-mobile-xs, td.show-on-mobile-xs { display: none; }
	.hide-on-mobile, .hide-on-mobile-xs, .show-on-mobile { display: initial; }
	th.show-on-mobile, td.show-on-mobile { display: table-cell; }
	#undo-button-gun1 { left: 20px; }
	#redo-button-gun1 { left: 20px; left: 120px; }
	#undo-button-gun2 { right: 20px; right: 120px; }
	#redo-button-gun2 { right: 20px; }
	.popover { max-width: 300px !important; }
}
@media (max-width: 500px) {
	table.table-sm tr td { font-size: 12px !important; }
	table#comparison-table tr { position: relative; }
	table#comparison-table td.fish-name { display: none; }
	table#comparison-table tr.fish-name-xs { display: table-row; }
	table#comparison-table td.gun-name { display: none; }
	table#comparison-table td.gun-stat { width: 20px; }
	table#comparison-table td.border-bottom-strong.border-hide-xs { border-bottom: 1px solid #dee2e6 !important; }
	.hide-on-mobile, .hide-on-mobile-xs, .show-on-mobile, th.show-on-mobile, td.show-on-mobile { display: none; }
	.show-on-mobile-xs { display: initial; }
	tr.show-on-mobile-xs { display: table-row; }
	th.show-on-mobile-xs, td.show-on-mobile-xs { display: table-cell; }
	#undo-button-gun1 { padding: 5px; bottom: 45px; }
	#redo-button-gun1 { padding: 5px; bottom: 45px; left: 100px; }
	#undo-button-gun2 { padding: 5px; bottom: 45px; right: 100px; }
	#redo-button-gun2 { padding: 5px; bottom: 45px; }
	.btn-float-footer-box { bottom: 35px; }
	.btn-float-footer-box .btn-float-footer { margin: 5px 5px 45px 5px; padding: 5px; }
}
@media (max-width: 400px) {
	.rubber-box, .rubber-box p, .rubber-box div, .rubber-box span, .rubber-box a, .rubber-box li, .rubber-box input, .rubber-box select { font-size: 11px; }
	.rubber-box a.add-rubber { font-size: 15px !important; }
	.rubber-box select { width: 55px; }
	table.table-sm tr td { font-size: 9px !important; }
	.bt-print { position: relative; left: -10px; }
	.bt-save { position: relative; left: -8px; }
	.bt-newsim { position: relative; left: -5px; }
	#undo-button-gun1 { font-size: 11px; left: 10px; }
	#redo-button-gun1 { font-size: 11px; left: 80px; }
	#undo-button-gun2 { font-size: 11px; right: 95px; }
	#redo-button-gun2 { font-size: 11px; right: 25px; }
}