/*********
* Header *
*********/

#header-cell {
	grid-area: h;
	background-color: white;
	display: grid;
	grid-template-areas: "n n" "a b" "d d";
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(3, auto);
	padding: 10px;
	grid-gap: 10px;
	border-bottom: 1px solid #aaa;
}

#header-cell input,
#header-cell textarea {
	background-color: #f4f4f4;
	border: none;
	font-family: inherit;
	border: 1px solid #bbb;
	resize: none;
}

#header-name {
	grid-area: n;
	text-align: center;
	font-size: 30px;
	height: 40px;
}

#header-partnera {
	grid-area: a;
}

#header-partnerb {
	grid-area: b;
}

#header-overview {
	grid-area: d;
	line-height: 1.2em;
}


/**************
* Bidding Box *
**************/

#bidding-box-cell {
	grid-area: b;
	z-index: 5;
}

#bidding-box {
	margin: 10px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-style: solid;
	border-color: #555;
	border-width: 0px 0px 1px 1px;
}

#bidding-box .bid {
	border-style: inherit;
	border-color: inherit;
	border-width: 1px 1px 0px 0px;
	text-align: center;
	user-select: none;
	height: 30px;
}

#bidding-box .bid:not(:diabled) {
	cursor: pointer;
}

#bidding-box .bid:hover:not(:disabled),
#bidding-box .bid.selected:not(:disabled) {
	filter: invert(20%);
}

#bidding-box .bid:disabled {
	background-color: #aaa;
	color: #ccc;
}

#bidding-box .bid.bid-pass {
	grid-column: 1/3;
}

#bidding-box .bid.bid-custom {
	grid-column: 1/4;
}


#bidding-box .bid.bid-step {
	grid-column: 4/6;
}


/**********
* Auction *
**********/

#auction-cell {
	grid-area: a;
}

#auction {
	border-top: 1px solid #aaa;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-style: solid;
	border-color: #555;
	border-width: 0px 0px 1px 1px;
	margin: 10px;
}

#auction .bid {
	border-style: inherit;
	border-color: inherit;
	border-width: 1px 1px 0px 0px;
	user-select: none;
	width: 50px;
	height: 30px;
}

#auction .bid.header {
	background-color: #4D6E5B;
	color: white;
}

#auction .bid.bid-multi {
	border: none;
}


/*************
* Visualiser *
*************/

#treeview-cell {
	grid-area: t;
	border-left: 1px solid #aaa;
	overflow: hidden;
	position: relative;
}

/* Mode bar */
#treeview-mode {
	overflow: hidden;
	font-size: 0px;
}

#treeview-mode .mode {
	font-size: 1rem;
	display: inline-block;
	background-color: #eee;
	width: 50%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	text-transform: capitalize;
	user-select: none;
	cursor: pointer;
}

#treeview-mode .mode.active {
	background-color: #ccc;
}

#treeview-mode .mode:hover {
	background-color: #ddd;
}

/* Viewer */
#treeview-main {
	text-align: left;
	overflow-y: hidden;
	overflow-x :scroll;
	position: absolute;
	width: 100%;
	height: calc(100% - 30px);
	display: flex;
	flex-direction: row;
}

#treeview-main .selectable:hover {
	filter: invert(10%);
	cursor: pointer;
}

/* Bid columns */
#treeview-main .column {
	float: left;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

#treeview-main .column.conventions {
	background-color: #ddd;
}

#treeview-main .column.opps {
	background-color: #eee;
}

#treeview-main .column.bid-pass {
	width: 20px;
	writing-mode: tb-rl;
	text-align: center;
	padding: 5px 0px 5px 6px;
	padding-top: 5px;
	height: 100%;
}

#treeview-main .column.bid.active {
	border-top: 5px solid;
	padding-top: 0px;
}

/* Individual bids */
#treeview-main .column .bid:not(.bid-multi) {
	display: block;
	border: 1px solid;
	border-radius: 3px;
	margin: 5px;
	width: 70px;
	height: 30px;
	padding-left: 4px;
}

#treeview-main .column .bid.bid-multi {
	
}

#treeview-main .column .bid.active {
	border-left: 5px solid;
	padding-left: 0px;
}

/* Conventions */
#treeview-main .column.conventions {
	width: 200px;
}

#treeview-main .convention {
	display: flex;
	background-color: white;
	border-bottom: 1px solid #ccc;
	align-items: center;
}

.convention.new-convention {
	text-align: center;
}


#treeview-main .convention .name {
	background-color: #e6e6e6;
	flex: 1;
}

	#treeview-main .convention.active .name {
		font-weight: bold;
	}


#treeview-main .column.conventions li .bid {
	margin: 0;
	border-radius: 0 !important;
	border: none !important;

}

/* Special Border Colours */

#treeview-main .bid.bid-pass {
	border-color: #203b05 !important;
}

#treeview-main .bid.bid-double {
	border-color: #690000 !important;
}

#treeview-main .bid.bid-redouble {
	border-color: #040438 !important;
}


/**************
* Current Bid *
**************/

#curbid-cell {
	grid-area: c;
	border-top: 1px solid #aaa;
	padding: 10px;
	display: grid;
	grid-template-areas: "n o d b";
	grid-template-columns: 60px 150px auto 150px;
	grid-gap: 10px;
}

#curbid-name {
	grid-area: n;
}

#curbid-name .bid {
	border: 1px solid black;
	border-radius: 3px;
	height: 30px;
	margin: auto;
}

#curbid-name .bid .bid {
	border: none;
}

#curbid-name .seat {
	text-align: center;
	font-size: 25px;
}

#curbid-options {
	grid-area: o;
}

#curbid-buttons {
	grid-area: b;
	text-align: center;
}

/* Button styling */
#curbid-buttons button {
	border: 1px solid black;
	border-radius: 3px;
	padding: 2px 5px;
	font-family: inherit;
	outline: none;
	margin: 2px;
}

#curbid-delete {
	background-color: #cb2431;
	color: white;
}
#curbid-delete:active {
	background-color: #bb1421;
	border: 1px solid black;
}
#curbid-delete:disabled {
	background-color: #805b5d;
	color: grey;
}

#curbid-moveup, #curbid-movedown {
	background-color: #3fab3f;
	color: white;
	width: 30px;
}
button#curbid-moveup {
	margin-right: 0px;
	border-radius: 3px 0px 0px 3px;
	border-right: none;
}
button#curbid-movedown {
	margin-left: -4px;
	border-radius: 0px 3px 3px 0px;
}
#curbid-moveup:active, #curbid-movedown:active {
	background-color: #0c780c;
}
#curbid-moveup:disabled, #curbid-movedown:disabled {
	background-color: #556b2f;
	color: grey;
}

#curbid-assign-convention {
	background-color: #a4c8d8;
	color: black;
	width: 100%;
}
#curbid-assign-convention:active {
	background-color: #ddd;
}
#curbid-assign-convention:disabled {
	background-color: #aaa;
	color: #444;
}

#curbid-description {
	grid-area: d;
	background-color: #ddd;
	padding: 5px;
	border-radius: 2px;
	font-family: inherit;
}


/***********
* Tooltips *
***********/

.tooltip {
	display: none;
	background-color: #eee;
	border: 1px solid #aaa;
	border-radius: 4px;
	color: black;
	position: absolute;
	font-family: Arial, sans-serif;
	padding: 3px;
	font-size: 10px;
	text-align: left;
	max-width: 100px;
	margin: 3px 0px 0px 5px;
	user-select: none;
	cursor: default;
}

#treeview-cell .tooltip {
	margin-top: 8px;
}

#treeview-cell .bid-pass .tooltip,
#treeview-cell .bid-double .tooltip,
#treeview-cell .bid-redouble .tooltip {
	margin-top: 23px;
}

#auction .bid-pass .tooltip,
#auction .bid-double .tooltip,
#auction .bid-redouble .tooltip {
	margin-top: 32px;
}


.bid:hover .tooltip {
	display: block;
}

.bid .tooltip:hover {
	display: none;
}

.tooltip .convention-name {
	color: blue;
	font-weight: bold;
}

.tooltip .hcprange {
	font-weight: bold;
}

.tooltip .description {

}