/* CSS Vars */
:root {
	--primary-bg-color: #fff;
	--secondary-bg-color: #f6f6f6;
	--primary-border-color: #cccccc;
	--secondary-border-color: #666666;
	--primary-font-color: #333333;
	--primary-font-color-50: #ffffff;
	--secondary-font-color: #ffffff;
	--primary-fill-color: #000000;
	--primary-stroke-color: #000000;
	--secondary-fill-color: #ffffff;
	--secondary-stroke-color: #666666;
	--dark-fill-color: #000000;
	--dark-stroke-color: #000000;

	--success-color: #128618;
	--warning-color: #ffa500;
	--warning-light-color: #fbecd1;
	--alert-color: #ff0000;
	--primary-color: #5397f4;
	--secondary-color: #35478C;
	--secondary-color-300: #3d52a5;
	--box-shadow-color: #b3b3b3;

	--highlight-bg-color: #cccccc;
	--hover-font-color: #333333;
}

.dark-theme{
	--primary-bg-color: #191f25;
	--secondary-bg-color: #2f2e2e;
	--primary-border-color: #343434;
	--primary-font-color: #c8c8c8;
	--primary-font-color-50: #ffffff;
	--secondary-font-color: #272727;
	--primary-fill-color: #cccccc;
	--box-shadow-color: #3f3f3f;

	--dark-stroke-color: #939393;
	--primary-stroke-color: #cccccc;
	--secondary-fill-color: #cccccc;
	--secondary-stroke-color: #666666;

	--highlight-bg-color: #35455e;
}
/* || General styles */
body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	overflow: hidden;
	height: 100%;
	color: var(--primary-font-color);
	background-color: var(--primary-bg-color);
	user-select: none;
}

a {
	color: var(--primary-color);
}
svg {
	fill: var(--primary-fill-color);
	width: 24px;
	height: 24px;
}

h4 {
	font-size: 18px;
}
.h4, .h5, .h6, h4, h5, h6 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.fill-primary {
	fill: var(--primary-fill-color);
}
.stroke-primary {
	stroke: var(--primary-fill-color);
}
.svg-small {
	width: 15px;
	height: 15px;
}
.action-icon{
	height: 20px;
	width: 20px;
	vertical-align: middle;
}
#gamecanvas{
	display: block;
	position: fixed;
	left: 0px;
	top: 0px;
}

/* || Header and Main Navigation */
header{
	width: 100vw;
	height: 36px;
	position: absolute;
	z-index: 22;
	background-color: var(--primary-bg-color);
	font: 14px/24px arial;
	overflow: hidden;
	border-bottom: 1px solid var(--primary-border-color);
	box-shadow: 0px 0px 3px var(--box-shadow-color);
}

.singleline {
	min-height: 36px;
	height: 36px;
}

.menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu>li {
	margin: 0 .5rem;
	overflow: hidden;
}

.menu-button-container {
	display: none;
	height: 100%;
	width: 30px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#menu-toggle {
	display: none;
}

.navitem{
	border: none;
	padding: 0 1px;
	margin: 0 5px;
	background-color: transparent;
	height: 36px;
	vertical-align: middle;
}

.navitem svg{
	fill: var(--primary-fill-color);
	stroke: var(--primary-stroke-color);
}

.nav-link:hover svg{
	fill: var(--primary-fill-color);
	stroke: var(--primary-stroke-color);
}

nav button {
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: center;
	color : var(--primary-font-color)
}

a.navitem, div.navitem{
	line-height: 36px;
	text-decoration: none;
	color: var(--primary-font-color);
}

.navicon{
	height: 16px;
	width: 16px;
}

.usta-nav {
	width: 25px;
	height: 25px;
}

.dark-theme .inverse-line {
	stroke: var(--primary-font-color-50) !important;
}

.navitemlogin{
	white-space: nowrap;
	width: 80px;
	margin: 3px 4px;
	padding: 4px;
}

.loggedin{
	background-color: transparent;
	border-color: var(--primary-border-color);
	color: var(--primary-font-color);
}

#seekcount, #seekcountbot {
	padding: 7px 7px;
}

#seekcount {
	outline: 1px solid var(--primary-font-color-50);
}
.seek-badge {
	background-color: #d52929;
	outline: 1px solid #d52929 !important;
}

.badge {
	color: var(--light);
	background-color: var(--secondary);
	border-radius: 16px;
	padding: 0px 7px;
	font-size: 1em;
	min-width: 24px;
	font-weight: bold;
	line-height: inherit;
	overflow: hidden;
}

.toggle-wrapper {
	position: absolute;
	top: 25vh;
	border-radius: 2px;
	text-align: center;
	background-color: var(--secondary-bg-color);
	width: 20px;
	cursor: pointer;
	height: 40px;
}

.toggle-wrapper svg{
	fill: var(--primary-fill-color);
}

.rotate-arrow{
	transform: rotate(180deg);
}

.notation-toggle{
	left: 200px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

.chat-toggle{
	right: 200px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

/* || Notation */
#floating {
	position: fixed;
	top: 35px;
	z-index: 10;
	bottom: 0;
}

#rmenu {
	border: 1px solid var(--primary-border-color);
	width: 200px;
	text-align: left;
	overflow: hidden;
	background-color: var(--secondary-bg-color);
	top: 0;
	bottom: 0;
	left: 0;
	position: absolute;
}

.section-title{
	padding: 8px 0 8px 0;
}

.player-box{
	padding: 0px;
}

.rulebox{
	padding: 8px;
}

#komirule{
	text-align: right;
}

#piecerule{
	text-align: left;
}

.optlist svg {
	fill: var(--primary-fill-color);
}

.i-requested-undo, .i-offered-draw {
	fill: var(--alert-color);
}

.opp-requested-undo, .opp-offered-draw {
	fill: var(--primary-color);
}

.hurrytime {
	color: var(--alert-color);
}

.optlist a {
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 10px;
	margin-right: 10px;
	padding: 0px;
}

#notationbar {
	border-top: 1px solid var(--secondary-border-color);
	border-bottom: 1px solid var(--secondary-border-color);
	background-color: var(--primary-bg-color);
	overflow: auto;
}

#moveslist {
	display: table;
	width: 150px;
}

#moveslist a {
	color: inherit;
	text-decoration: none;
}

#moveslist tbody tr td + td {
	display: inline-block;
	height: 100%;
	width: 40%;
}

#moveslist tbody tr td {
	display: inline-block;
	height: 100%;
	width: 20%;
}

#moveslist tbody tr td a {
	display: block;
	height: 100%;
	width: 100%;
}

#moveslist tbody tr td a span {
	display: block;
	height: 100%;
	width: 100%;
	word-wrap: break-word;
}

#moveslist tbody tr td a span:hover {
	background-color: var(--highlight-bg-color);
}

.curmove {
	background-color: var(--highlight-bg-color);
}

/* Player styles */
.playerimg{
	height: 20px;
	width: 20px;
}

#player-opp-img.iswhite, #player-me-img.iswhite {
	fill: var(--secondary-fill-color);
	stroke: var(--primary-stroke-color);
	stroke-width: 70px;
}

#player-opp-img.isblack, #player-me-img.isblack {
	fill: var(--dark-fill-color);
	stroke: var(--dark-stroke-color);
	stroke-width: 70px;
}

#player-me, #player-opp {
	padding: 8px 0px;
	margin: 8px;
	border-radius: 8px;
}

.player1-name, .player2-name {
	color: var(--primary-font-color);
}

#player-me-time, #player-opp-time {
	font-size: x-large;
}

.selectplayer {
	background-color: var(--highlight-bg-color);
}

/* || Chat */
#chat {
	position: fixed;
	right: 0px;
	top: 36px;
	bottom: 0px;
	z-index: 10;
}

#cmenu {
	border: 1px solid var(--primary-border-color);
	padding: 5px;
	text-align: left;
	overflow: hidden;
	background-color: var(--secondary-bg-color);
	top: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	width: 180px;
	user-select: text;
}

#room_divs{
	flex :1;
	overflow: auto;
}

.roomheader{
	cursor: pointer;
	padding: 4px 8px;
	border: 1px solid var(--primary-border-color);
	border-radius: 30px;
	background-color: var(--primary-bg-color);
	word-wrap: break-word;
	margin-bottom: 2px;
}

.roomheader.selected{
	background-color: var(--highlight-bg-color);
}

.chat-bubble {
	content: " ";
	position: absolute;
	background-color: var(--alert-color);
	width: 15px;
	height: 15px;
	border-radius: 13px;
	margin-top: -8px;
	left: 0px;
}

.chatclose{
	border: none;
	background: none;
	text-align: center;
	line-height: 0px;
	color: var(--primary-font-color);
	font-size: 16px;
	font-weight: bold;
	padding: 0;
}

.chatclose svg {
	width: 13px;
	fill: var(--primary-fill-color)
}

.roombody{
	display: none;
	padding: 3px;
	word-wrap: break-word;
}

.roombody.selected{
	display: block;
}

.chatname{
	font-weight: bold;
}

.context-player {
	cursor: pointer;
}

.chattime {
	text-align: center;
	font-size: 0.75em;
	opacity: 0.6;
	margin: 2px 0;
	padding-top: 2px;
}

.chattime[hidden] {
	display: none !important;
}

.chat-move-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.75em;
	opacity: 0.6;
	margin: 2px 0;
	padding-top: 2px;
	white-space: nowrap;
	overflow: hidden;
}

.chat-move-marker::before,
.chat-move-marker::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid currentColor;
	opacity: 0.4;
}

.chat-move-marker::before {
	margin-right: 0.5em;
}

.chat-move-marker::after {
	margin-left: 0.5em;
}

.chat-game-separator {
	border: none;
	border-top: 1px solid currentColor;
	margin: 6px 0;
	opacity: 0.4;
}

.roombody code {
	background: rgba(128,128,128,0.2);
	padding: 1px 3px;
	border-radius: 3px;
	font-size: 0.9em;
}

/* || Settings */
#settings-drawer {
	position: absolute;
	z-index: 30;
	background-color: var(--primary-bg-color);
	border-right: 1px solid var(--primary-border-color);
	width: 225px;
	height: inherit;
	overflow-y: scroll;
	overflow-x: hidden;
}

.settings-header {
	position: fixed;
	width: inherit;
	background-color: var(--primary-bg-color);
}

.settings-pane {
	padding: 0 8px 16px 8px;
}

.settings-drop-down li .active {
	background-color: var(--highlight-bg-color);
}
.settings-drop-down > li {
	display: flex;
}

/* || Modals */
.modal {
	text-align: center;
}

.modal-dialog {
	text-align: left;
}

.modal-auto-width {
	width: auto !important;
}

.modal-content{
	background-color: var(--primary-bg-color);
}
.modal-footer{
	border-top: 1px solid var(--primary-border-color);
}

.close {
	text-shadow: none;
	opacity: 1;
	color: var(--primary-font-color);
}
.close:hover {
	color: var(--primary-font-color);
}

#watchgame-modal, #joingame-modal{
	overflow-x: auto;
}

#help-modal ul li ul {
	font-weight: bold;
}

#help-modal ul li ul li {
	font-weight: normal;
}

#help-modal .tab-content {
	user-select: text;
}

#settings-modal ul li ul {
	font-weight: bold;
}

#settings-modal ul li ul li {
	font-weight: normal;
}

.playername {
	font-weight: bold;
}

.ratingequal{
	color: var(--primary-fill-color);
}

.ratingup{
	color: var(--alert-color);
}

.ratingdown{
	color: var(--success-color);
}

.privateseek{
	background-color: var(--highlight-bg-color);
}

.playernamegame {
	font-weight: bold;
	word-wrap: break-word;
	max-width: 100px;
}

.col-sm-6-custom{
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	float: left;
	width: 100%;
}

/* || Forms */
.form-control{
	background-color: var(--primary-bg-color);
	color: var(--primary-font-color);
	border: 1px solid var(--secondary-border-color);
}

input[type=range] {
	vertical-align: middle;
	margin: 0px;
	display: inline-block;
	background: transparent;
	width: 50%;
}

input:invalid {
	border: 1px solid var(--alert-color);
}

.radio-list-item {
	display: inline-block;
	margin: 0;
	width: auto;
}

.radio-list-item input[type=radio] {
	display: none;
}

.radio-list-img {
	margin: 0;
	border: 2px solid var(--primary-bg-color);
	cursor: pointer;
}

.radio-list-item input[type=radio]:checked + .radio-list-img {
	border: 2px solid var(--primary-color);
}

select, .select.dropdown-toggle {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url("data:image/svg+xml;utf8,<svg width='100px' height='100px' viewBox='0 0 24 24' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.8839 15.5303C12.3957 16.0185 11.6043 16.0185 11.1161 15.5303L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z'/></svg>") no-repeat;
	background-size: 20px;
	background-position: calc(100% - 10px) center;
	background-repeat: no-repeat;
}
.dark-theme select, .dark-theme .select.dropdown-toggle {
	background: url("data:image/svg+xml;utf8,<svg width='100px' height='100px' viewBox='0 0 24 24' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.8839 15.5303C12.3957 16.0185 11.6043 16.0185 11.1161 15.5303L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z'/></svg>") no-repeat;
	background-size: 20px;
	background-position: calc(100% - 10px) center;
	background-repeat: no-repeat;
}

#clearcolorbox {
	width: 95px;
	display: inline-block;
}

#open-game-over {
	top: 70px;
	position: absolute;
	z-index: 9;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 214px;
}

#open-game-over button {
	height: auto;
	background-color: var(--secondary-bg-color);
}

.game-over-action-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

/* || Alerts */
#alertbox {
	position: absolute;
	bottom: 30px;
	z-index: 999;
	left: 20%;
	right: 20%
}

.alert {
	margin: 0px;
}

.text-error{
	color: var(--alert-color);
}

/* || Table */
.linestable{
	width: 100%;
}
.table-overflow {
	max-height: 300px;
	min-height: 200px;
	overflow-y: scroll;
}
.linestable tr.headerrow{
	border-top: 2px solid var(--primary-border-color);
	border-bottom: 2px solid var(--primary-border-color);
}

.linestable tr{
	border-top: 1px solid var(--primary-border-color);
	border-bottom: 1px solid var(--primary-border-color);
}

.linestable td{
	padding: 8px 4px;
}

.linestable th{
	padding: 8px 4px;
}

.colourcircle circle{
	stroke: var(--primary-stroke-color);
}

/* || Tabs */
a.active svg {
	fill: var(--dark-fill-color);
}

/* || UTILITIES */

/* FLEX */
.flex {
	display: flex;
}

.flex-space-between {
	justify-content: space-between;
}

.flex-center {
	justify-content: center;
}
.flex-end {
	justify-content: end;
}

.flex-align-center {
	align-items: center;
}

.flex-align-start {
	align-items: start;
}

.flex--1 {
	flex: 1;
}

.flex--20 {
	flex: 20%
}
.flex--80{
	flex: 80%
}

.gap--8 {
	gap: 8px;
}
.gap--16 {
	gap: 16px;
}
.gap--32 {
	gap: 32px;
}

.verticle-align--middle {
	vertical-align: middle;
}

.verticle-align--bottom {
	vertical-align: bottom;
}

.display--inline-block {
	display: inline-block;
}
.bold {
	font-weight: bold;
}

.fullw {
	width: 100%;
}

.width-full {
	margin: 0 auto;
	width: 100%;
}

.height-full {
	margin: 0 auto;
	height: 100%;
}

.height-auto {
	height: auto;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.vertical-text {
	transform-origin: bottom right;
	transform: rotate(-90deg);
	float: left;
}

.border {
	border-radius: 20px;
	padding: 5px;
	margin: 2px;
	border: 1px solid var(--primary-border-color);
}
.border-none {
	border: none;
}

.fa-chevron-right {
	transition: all 0.3s ease;
 }
.btn-nav-accordion[aria-expanded="true"] .fa-chevron-right {
	transform: rotate(90deg);
}

.margin--0 {
	margin: 0px;
}
.margin-top--8{
	margin-top: 8px;
}
.margin-top--16 {
	margin-top: 16px;
}
.margin-top--32 {
	margin-top: 32px;
}
.margin-right--8{
	margin-right: 8px;
}
.margin-bottom--8{
	margin-bottom: 8px;
}

.margin-bottom--32 {
	margin-bottom: 32px;
}

.padding-0 {
	padding: 0px;
}
.padding--8 {
	padding: 8px;
}
.padding-top--32{
	padding-top: 32px;
}
.padding-left--8{
	padding-left: 8px;
}

.icon-40{
	width: 40px;
	height: 40px;
}

/* || Button CSS */
.btn.focus,
.btn:focus,
.btn:hover {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.btn-pill {
	background: transparent;
	border: 2px solid var(--secondary-color);
	border-radius: 30px;
	height: 40px;
	padding: 0 16px;
}

.btn-default {
	color: var(--primary-font-color);
	background-color: var(--secondary-bg-color);
}
.btn {
	color: var(--primary-font-color);
}
a.btn {
	color: var(--primary-font-color);
}
a.btn.btn-primary {
	color: var(--primary-font-color-50);
}
.btn-primary {
	background-color: var(--secondary-color);
	color: var(--primary-font-color-50);
	border-color: transparent;
}
.btn svg {
	fill: var(--primary-fill-color);
	vertical-align: middle;
}
.btn.btn-primary svg {
	fill: var(--secondary-fill-color);
	vertical-align: middle;
}
.btn-primary:hover, .btn-primary:focus {
	color: var(--primary-font-color-50);
	background-color: var(--secondary-color-300);
	cursor: pointer;
}
.btn-secondary{
	border-color: var(--secondary-border-color);
}
.btn-secondary:hover{
	color: var(--primary-font-color);
	background-color: var(--secondary-bg-color);
}
.btn-transparent {
	background-color: transparent;
	border: none;
}
.btn-error {
	border-color: var(--alert-color);
}
.btn-error:hover{
	background-color: rgba(255, 0, 0, 0.5);
}
.btn-slim {
	height: 30px;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
	cursor: not-allowed !important;
	opacity: 0.45;
}

.seek-button {
	padding: 6px 0px;
}

/* || Responsive CSS */
@media (min-width: 768px){
	.navbar-nav > li > a{
		padding: 8px;
	}

	.navbar{
		min-height: 36px;
		margin-bottom: 0px;
	}

	.navbar-btn {
		margin-top: 1px;
		margin-bottom: 1px;
	}
	
	.halfrow{
		display: inline-block;
		width: 269px;
		height: 280px;
	}

	.leftmost{
		margin-right: 18px;
	}
}
@media (max-width: 990px) {
	.hide-sm {
		display: none !important;
	}
}
/* hide md larger that 679 */
@media (min-width: 991px) {
	.hide-md {
		display: none !important;
	}
}
@media (max-width: 768px) {
	.nav-tabs {
		display: flex;
		gap: 8px;
	}
}

/* mobile menu */
@media (max-width: 1290px) {
	.menu-button-container {
		display: flex;
	}

	.menu {
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: center;
		z-index: 999;
		background-color: var(--primary-bg-color);
	}

	#menu-wrapper {
		width: 100vw;
		max-height: calc(100vh - 80px);
		overflow-y: scroll;
	}

	#menu-toggle {
		display: block;
	}

	.menu>li {
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0.5em 0;
		width: 100%;
		color: var(--primary-font-color);
	}

	.menu>li:not(:last-child) {
		border-bottom: 1px solid #444;
	}

	.menu .navitem {
		width: 100%;
		text-align: center;
	}
	
	.right-nav{
		flex: 80%;
	}
}

/* CSS specific to iOS devices */ 
@supports (-webkit-touch-callout: none) {
	#settings-drawer {
		height: -webkit-fill-available;
	}
}

/* max width 500 hide komi */
@media (max-width: 500px) {
	.komi-rule {
		display: none;
	}
	.komi-rule-menu {
		display: block !important;
	}
}

/* max width 430 hide time */
@media (max-width: 430px) {
	.time-rule {
		display: none;
	}
	.time-rule-menu {
		display: block !important;
	}
}

/* boostrap overrides */

@media (min-width: 576px) {
	.modal-dialog-centered {
		min-height: calc(100vh - 3.5rem);
	}
}

.form-control:disabled, .form-control[readonly] {
	background-color: var(--primary-bg-color);
	opacity: .4;
	cursor: not-allowed;
}

.dropdown, .dropleft, .dropright, .dropup {
	position: inherit;
}

.select.dropdown-toggle {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
	padding-right: 33px;
}

.dropdown-toggle::after {
	display: none !important;
}

.dropdown-menu {
	background-color: var(--primary-bg-color);
	border-color: var(--primary-border-color);
	filter: drop-shadow(2px 2px 9px #000);
	overflow-y: scroll;
	max-height: 60vh;
}
.dropdown-item {
	color: var(--primary-font-color);
	white-space: break-spaces;
	word-break: break-word;
}

.dropdown-item:focus, .dropdown-item:hover {
	color: var(--primary-font-color);
	text-decoration: none;
	background-color: transparent;
}
.dropdown-item.active, .dropdown-item:active {
	color: var(--primary-font-color);
	text-decoration: none;
	background-color: transparent;
}

.card {
	background-color: var(--primary-bg-color);
	border-color: var(--primary-border-color);
}

.form-control:focus {
	color: var(--primary-font-color);
	background-color: var(--primary-bg-color);
}

.nav-link, .nav-link:hover {
	color: var(--primary-font-color);
}

.active .stroke-primary {
	stroke: var(--dark);
}