/*
	I'll just start here
*/

/*
	Font resize looks fancy
*/
* {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	transition: font-size 120ms ease-in-out;
}

/*
	Strip decoration from links
*/
a {
	text-decoration: none;
}

.line-separator-black {
	height: 1px;
	background-color: rgba(0, 0, 0, 0.1);
}

/* Will act as body for now */
.testAreaContainer {
	z-index: 4;
	position: absolute;
	/*top: 700px;*/
	width: 100%;
	height: 100%;
	background-color: var(--page-background-color);
	display: flex;
	flex-direction: column;
}

.topAreaContainer {
	display: none;
	z-index: 2;
	flex: 1;
	max-height: var(--header-height);
	background-color: white;
	border-bottom: solid 1px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0.20rem 0.35rem rgba(0, 0, 0, 0.15);
}

.centralAreaContainer {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: row;
}

.mainViewContainer {
	position: relative;
	flex: 1;
	overflow-y: hidden;
}

.mainViewContainerInternal {
	position: absolute;
	width: 100%;
	height: 100%;
}

.mainViewContainerOverlap {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	visibility: hidden;
	transition: background 250ms ease-in-out,
	visibility 250ms ease-in-out;
}

.mainSidebarInternal {

}

.mainSidebarOverlap {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	visibility: hidden;
	transition: visibility 250ms ease-in-out;
}

.paddedLarge {
	padding: 2rem;
}

.paddedMediumVertical {
	padding: 1rem 0;
}

.paddedMedium {
	padding: 1rem;
}

.paddedSmallVertical {
	padding: 0.5rem 0;
}

.paddedSmall {
	padding: 0.5rem;
}

.widescreenFlexbox {
	display: flex;
	flex-direction: row;
}

#biddingstuff {
	flex: 1;
}


#overviewarea {
	mix-blend-mode: multiply;
}

.graphicSurroundingBox {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 16px 24px 24px 16px;
	border-radius: var(--page-corner-radius);
	/*background: linear-gradient(#8CE1FF, #009BFF);*/
	background: linear-gradient(200deg, #00FFB4, #9CFF4E, #FFD74B, #FF6767);
	/*border: 1px solid rgba(0, 0, 0, 0.15);*/
	box-shadow: var(--page-foreground-shadow);
}

.overviewArea {
	/*position: relative;
	flex: 1;
	align-self: center;*/
}

#biddingFlexbox {
	display: flex;
	flex-direction: row;
}

/*
	I'll just end here
*/

* {
	border: none;
	font-family: var(--font-body);
	margin: 0px;
	padding: 0px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*width: 800px;
	height: 600px;*/
	/*border: solid black 1px;*/
	/*margin: 0px;*/
	background-color: #ffffff;
}

link {
	text-decoration: underline;
}

fixedWidthParagraph {
	width: 600px;
}

.phaseNavigation {
	position: absolute;
	width: 215px;
	height: 62px;
	top: 20px;
	border: none;
	cursor: pointer;
}

.phaseContainer {
	position: absolute;
	width: 720px; /* was 495px; */
	height: 457px;
	top: 105px;
	left: 40px;
	border: none;
	overflow: hidden;
	background-color: #ffffff;
}

.phase {
	position: absolute;
	width: 718px; /* was 493px;*/
	height: 455px;
	top: 0px;
	left: 0px;
	border: solid black 1px;
	overflow: hidden;
	background-color: #ffffff;
	/*border: 4px solid red;*/
	/*margin: 16px;*/
}

.phaseTab {
	position: absolute;
	width: inherit; /* was 493px; */
	height: 455px;
	left: 0px;
	top: 0px;
	border: none;
	background-color: #ffffff;
}

.phaseTabHead {
	position: absolute;
	width: inherit; /* was 495px; */
	height: 27px;
	top: 0px;
	left: 0px;
	border: none;
	background-image: url("../images/tab_close.jpg");
	margin: 0px;
	padding: 0px;
	padding-top: 3px;
	padding-left: 30px;
	vertical-align: central;
	cursor: pointer;
}

.phaseTabHeadOpen {
	position: absolute;
	width: inherit; /* was 495px; */
	height: 27px;
	top: 0px;
	left: 0px;
	border: none;
	background-image: url("../images/tab_open.jpg");
	margin: 0px;
	padding: 0px;
	padding-top: 3px;
	padding-left: 30px;
	vertical-align: central;
	cursor: pointer;
}

.phaseTabImage {
	position: absolute;
	width: 25px;
	height: 25px;
	top: 1px;
	left: 140px;
}

.phaseTabContent {
	position: absolute;
	width: inherit; /* was 490px; */
	height: 428px;
	left: 0px;
	top: 27px;
	border: none;
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	padding-top: 3px;
	padding-left: 10px;
	overflow: hidden;
}

.interestTab {
	position: absolute;
	width: 255px;
	height: 180px;
	top: 0px;
	left: 0px;
	border: solid black 1px;
	background-color: #ffffff;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
}

.issueTab {
	position: absolute;
	width: 255px;
	height: 200px;
	top: 170px;
	left: 0px;
	border: none;
	background-color: transparent;
	padding-top: 3px;
	padding-left: 10px;
	z-index: 1;
}

.interestTabOpp {
	position: absolute;
	width: 700px; /* was 475px; */
	height: 180px;
	top: 0px;
	left: 0px;
	border: solid black 1px;
	background-color: #ffffff;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
}

.issueTabOpp {
	position: absolute;
	width: 700px; /*was 475px; */
	height: 248px;
	top: 180px;
	left: 0px;
	border: solid black 1px;
	background-color: #ffffff;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
}

.preparationOpp {
	position: absolute;
	width: 705px; /* was 480px; */
	height: 428px;
	left: 0px;
	top: 0px;
	border: none;
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	padding-top: 3px;
	padding-left: 10px;
}

.interestTabBig {
	position: absolute;
	width: 700px; /*was 475px; */
	height: 80px;
	top: 0px;
	left: 0px;
	border: solid black 1px;
	background-color: #ffffff;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: auto;
}

.issueTabBig {
	position: absolute;
	width: 700px; /* was 475px; */
	height: 348px;
	top: 80px;
	left: 0px;
	border: solid black 1px;
	background-color: #ffffff;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
}

.preferenceEdit {
	position: absolute;
	width: inherit; /* was 718 px;  eerder was 493px; */
	height: 400px;
	left: 0px;
	top: 0px;
	border: none;
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	padding-top: 3px;
	padding-left: 10px;
}

.smallPreferenceTab {
	position: absolute;
	top: 170px;
	left: 0px;
	border: solid black 1px;
	padding-top: 3px;
	padding-left: 10px;
}

#drag1 {
	width: 80px;
	height: 97px;
	background-image: url("../images/post_it.png");
	background-repeat: no-repeat;
	padding-top: 3px;
	padding-left: 3px;
	padding-bottom: 3px;
}

#mySideDrag {
	width: 80px;
	height: 97px;
	background-image: url("../images/post_it.png");
	background-repeat: no-repeat;
	padding-top: 3px;
	padding-left: 3px;
	padding-bottom: 3px;
}

#otherSideDrag {
	width: 80px;
	height: 97px;
	background-image: url("../images/post_it.png");
	background-repeat: no-repeat;
	padding-top: 3px;
	padding-left: 3px;
	padding-bottom: 3px;
}

.ui-draggable-helperMoving {
	border: 1px dotted #000000;
	padding: 6px;
	background: #fff;
	font-size: 1.2em;
	width: 100px;
	height: 100px;
}

.ui-draggable-helperStoped {
	border: 1px solid #000000;
	width: 5px;
	height: 5px;
}

.dragged1 {
	position: absolute;
	width: 80px;
	height: 100px;
	background-color: #f8e67a;
	border: 1px solid #999999;
}

.deletePostItButton {
	position: absolute;
	top: 0px;
	left: 65px;
	width: 15px;
	height: 15px;
	background-image: url("../images/del.png");
	cursor: pointer;
}

.appletClass {
	position: absolute;
	top: 48px;
	left: 12px;
}

.affectbutton {
	position: absolute;
	left: 15px;
	top: 48px;
}

.slider {
	position: absolute;
	left: 100px;
	width: 100px;
}


.exampleOutcomeTab {
	position: absolute;
	width: 220px;
	height: 428px;
	top: 0px;
	left: 0px;
	border: solid black 1px;
	border-top: solid black 1px;
	background-color: #ffffff;
}

.exampleOutcomeHead {
	width: 220px;
	height: 20px;
	top: 20px;
	left: 0px;
	font-weight: bold;
	border: none;
	background-color: #E8E8E8;
	margin: 0px;
	padding: 0px;
	padding-left: 3px;
	vertical-align: central;
	cursor: pointer;
}

.exampleOutcomeContent {
	width: 100%;
	height: 60%;
	left: 0px;
	top: 0px;
	background-color: #ffffff;
	padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
}

.exdesc {

}

.attrTable {
	width: 200px;
	background-color: #E8E8E8;
	margin-top: 3px;
	overflow: auto;
}

table.listing,.drag-table-item table {
	width: 200px;
}

table.listing,table.listing td,table.listing th,.drag-table-item table,.drag-table-item td
{
	padding: 1px;
	cursor: move;
}

.drag-table-item {
	background: #FFFFFF;
}

.preferences {
	position: absolute;
	width: inherit; /* was 493px; */
	height: 428px;
	top: 0px;
	left: 0px;
	border: solid black 1px;
	background-color: #ffffff;
	padding-top: 3px;
	padding-left: 3px;
}

.preferenceTab {
	position: absolute;
	width: inherit; /* was 493px; was 718px */
	height: 375px;
	top: 0px;
	left: 0px;
	border: none;
	border-top: solid black 1px;
	background-color: #ffffff;
}

.preferenceTabHead {
	width: inherit; /* was 490px; */
	height: 20px;
	top: 20px;
	left: 0px;
	font-weight: bold;
	border: none;
	background-color: #E8E8E8;
	margin: 0px;
	padding: 0px;
	padding-left: 3px;
	vertical-align: central;
	cursor: pointer;
}

.preferenceTabContent {
	position: absolute;
	/* can't inherit width from parent because padding-left is screwing up our size.
	 The padding is just ADDED to the inherited width, giving us an effectiv
	 width of 718+20px instead of reducing our effective width.  */
	width: 708px;
	height: 250px;
	/* determines height of scrollbar; must be overridden manually */
	left: 0px;
	top: 20px;
	background-color: #ffffff;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
}

/* check are we still using advice and coach css?*/
.advice {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 220px;
	border-top: solid 1px;
	overflow: scroll;
	background-color: #ffffff;
	cursor: pointer;
	font-size: 11pt;
}

.coachlink {
	font-size: 11pt; /*should be same size as .advice and .adviceFirst*/
}

.advice:hover {
	background-color: #cccccc;
}

.adviceFirst {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 220px;
	overflow: scroll;
	background-color: #ffffff;
	cursor: pointer;
	font-size: 11pt; /*should be same size as .advice*/
}

.adviceFirst:hover {
	background-color: #cccccc;
}

.avatar {
	position: absolute;
	left: 90px;
	top: 238px;
}

.popup {
	position: absolute;
	left: 200px;
	top: 200px;
	width: 300px;
	height: auto;
	z-index: 2;
	border: solid 1px;
	overflow: none;
	background-color: #ffffff;
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	font-size: 11pt;
}

.exitcross { /*image in popup, that allows for exiting popup*/
	float: right;
	width: 15px;
	height: 15px;
}

.mySideBidding {
	/*position: relative;*/
	/*overflow: none;*/
	/*width: 346px;  */
	/*background-color: #e1f8ff;*/
}

.otherSideBidding {
	/*position: relative;*/
	/*overflow: none;*/
	/*width: 346px; */
}

.otherSideLabel {
	/*position: relative;*/
	/*left: 220px;*/
	top: 0px;
}

.utilitySliderContainer {
	/*position: absolute;*/
	/*width: 236px;*/
	/*left: 15px;
	top: 200px;*/
}

.utilitySlider {
	background: transparent !important;
	width: 100% !important;
	height: 1rem !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	border-radius: 4px !important;
	margin: 0 0 12px;
}

.utilitySlider > div {
	transition: width 250ms ease-in-out;
	background: linear-gradient(#FF88A7, #F72E5F) !important;
	border: 1px solid #FF88A7 !important;
}

/* this color is used for the utility progress bar */
.ui-progressbar.redprogressbar .ui-progressbar-value {
	background: red;
}

.bid {
	position: absolute;
	margin: 0px;
	padding: 0px;
	padding-top: 3px;
	padding-left: 0px;
	vertical-align: central;
	cursor: pointer;
}

.bidText {
	font-size: 9pt;
}

.bidImage {
	position: relative;
	width: 25px;
	height: 25px;
	top: 1px;
	left: 1px;
}

.pareto {
	position: absolute;
	left: 0px;
	top: -10px;
}

.paretobid {
	position: absolute;
	margin: 0px;
	padding: 0px;
	padding-top: 3px;
	padding-left: 0px;
	vertical-align: central;
	cursor: pointer;
}

.bidDetails {
	border: solid 1px;
	display:none;
	background: white;
	position:relative;
	z-index : 1;
}

.tipballoon {
	position: absolute;
	background-image: url("../images/tipballoon.png");
	width: 35px;
	height: 28px;
}

.tipanchor {
	position: relative;
	display: inline;
}

.labels {
	width: 600px;
	background-color: #f9f9f9;
	border: solid 1px #ddd;
	padding: 30px;
}

.sliderlabel {
	font-size: 11px;
	font-weight: bold;
}

/* reserved for interestwidget. Do not use elsewhere.*/
.issueweightslider {
	width: 300px;
	position: relative;
	display: inline-block;
}

/** Used for prefslider-with-pie elements */
/*.prefslider {
	width: 500px;
	min-height:200px;
	position: relative;
	display: inline-block;
	background-color: #f9f9f9;
	border: solid 1px #ddd;
}*/

/* parent of scrollArea should have the correct size */
.scrollArea {
	overflow: scroll;
	width: inherit;
	height: inherit;
}

.bidcopiedmessage {
	position: absolute;
	width: 65px;
	height: 62px;
	left: 60px;
	top: 200px;
	background-color: yellow;
	text-align: center;
}

.interestweightslider {

}

.interestlabel {
	cursor: pointer;
	position: relative;
	width:150px;
	max-width:200px;
	display: block;
	overflow: hidden;
}

.onoffswitch {
	position: relative;
	width: 50px;
	left: 140px;
	top: 5px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.onoffswitch-checkbox {
	display: none;
}

.onoffswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid #999999;
	border-radius: 20px;
}

.onoffswitch-inner {
	width: 200%;
	margin-left: -100%;
	-moz-transition: margin 0.3s ease-in 0s;
	-webkit-transition: margin 0.3s ease-in 0s;
	-o-transition: margin 0.3s ease-in 0s;
	transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,.onoffswitch-inner:after {
	float: left;
	width: 50%;
	height: 19px;
	padding: 0;
	line-height: 19px;
	font-size: 14px;
	color: white;
	font-family: Trebuchet, Arial, sans-serif;
	font-weight: bold;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.onoffswitch-inner:before {
	content: "";
	padding-left: 10px;
	background-color: #EEEEEE;
	color: #999999;
}

.onoffswitch-inner:after {
	content: "";
	padding-right: 10px;
	background-color: #2FCCFF;
	color: #FFFFFF;
	text-align: right;
}

.onoffswitch-switch {
	width: 17px;
	margin: 1px;
	background: #FFFFFF;
	border: 2px solid #999999;
	border-radius: 20px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	-moz-transition: all 0.3s ease-in 0s;
	-webkit-transition: all 0.3s ease-in 0s;
	-o-transition: all 0.3s ease-in 0s;
	transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
	right: 0px;
}

.loginbutton {
	position: absolute;
	top:1px;
	width:300px; /* required width after login.*/
	left: 500px;
	cursor: pointer;
	text-align:left;
}

.helpbutton {
	position: absolute;
	top:1px;
	left: 430px;
	cursor: pointer;
	text-align:left;
}


.helptoolbar
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #ddeedd;
}

.helpcontent
{
	position: absolute;
	top:20px;
	width:100%;
}