* { box-sizing: border-box;}

body {

	--config-color  : #e1e1e1;
	--info-color    : #fefff9;
	--message-color : #fefff9;
	--offset-color  : #e4f7e3; /* Flange offset calculator */

	--bench-link	: #ff8200; /* hover background */
	
	margin:0;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 1.5;
	font-weight:400;
	font-size:90%;


}

.user-page-show {

	color:#00f;
	text-decoration:underline;
	margin-bottom:1.5rem;
	cursor:pointer;

}

.rm-logon {

	color:#484f94;
	background-color:#eed0e6;
	font-weight:bold;
	padding:0.25rem;
}

#userPage {

	margin:2rem 4rem;
	width:70%;
}


input[type="number"] {
	appearance: textfield;
}

input[type="number"]:hover {
	appearance: auto;
}


th {
	font-weight: 400;
}

#header-wrap {
	position:sticky;
	top:0;
	background-color:#445675;
	box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%), inset 0 -1px 5px rgb(0 0 0 / 25%);
	padding: 1rem;
}

#header {
	display:flex;
	align-items: center;
}


.dt-heading {
	font-size:0.9rem;
	font-weight:bold;
	text-align:right;
}

.dt-list-heading {
	color: #fff;
    background-color: #534e28;
}

#infoDtData td {
	padding-left:2rem;
}


#infoDtData label {
	cursor:pointer;
}



#wheelComponentsPrint,
#wd-cross-print,
#wd-user-lengths {
	display:none;
}


.calculation-notes p {
	border-radius:5px;
	background-color:#e8f1f5;
	width:fit-content;
	padding:0.2rem 0.5rem;
	margin-bottom:8px;
}

.calculation-warnings {
	padding:0.2rem 0.5rem;
}


.section-hide {
	display:none !important;
}

.section-visibility-hide {
	visibility:hidden !important;
}



#mainMenu,
.menu-components,
.menu-items,
#drawMenu {
	display:inline;
}



.wheel-select-wrap {

	margin-bottom:0.75rem;
}

.wheel-select {
	background-color: var(--config-color);
	border-radius:5px;
}


.option-list {

	color:#999;
}

.option-list div {
	margin:0.3rem 0;
}

.option-list label {
	cursor:pointer;
}


.option-list span {
	padding:0.1rem 0.3rem;
}

.option-reminder { /* Added by program to <span>*/
	background-color:#e4f4e3;
	border:1px solid #c26b79;
	border-radius:3px;
	color:#55326b;
}

.data-group {

	background-color: var(--config-color);
	margin-bottom:0.75rem;
	border-radius:5px;
}

.pairdata-alt {
	color:#9c9c9c;
}


.info-link,
.select-link,
.input-link {
	cursor:pointer;
	padding:0.2rem;
	border-radius:3px;

}

.info-link:hover {
	background-color:#f6f1a8;
}

.info-link-active {
	background-color:#f6f1a8;
	border-radius:3px;
	cursor:pointer;
}

.header-link {
	cursor:pointer;
	color: #f0efe6;
	padding: 0.25rem;
	display:inline;
}

.header-link:hover {
	color:#f6ff76;
}

.header-link-active {
	color:#fff025;
	font-weight:600;
}

.draw-link-active {
	color:#000;
	background-color:#fff;
	border-radius:5px;
}

.draw-link-active:hover {
	color:#000;
	background-color:#fff;
}

.system-link {
	cursor:pointer;
	margin-right:1rem;
	color:#666;
	text-decoration: underline;
	text-decoration-color:#ae96d4;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.system-link:hover {
	color:#000;
}

.layout { 
	display:flex;

}


#leftWrap { 
	position:sticky;
	top:4rem;
	height:calc(100vh - 4rem);
	overflow-y: auto;
	
	padding:15px 2rem;	
}




#leftWrap::-webkit-scrollbar {
    width: 6px;
    background-color: #eee;

}

#leftWrap::-webkit-scrollbar-thumb {
    background-color: #999;
}



#content {
	background-color:#fff;
	margin-bottom:1rem;
	margin-left:2rem;
	flex-grow: 1;
}


#printDate {
	display:none;
}



select {
    padding: 0.1em;
}

input {
	border: 1px solid #999;
    padding: 0.2em;
    outline-style:none;
    border-radius: 4px;
}


input:focus {

}


#leftWrap input { 
	width: 3.5rem;
} 

#leftWrap input.small {
	width: 2.5rem;
}

#leftWrap input[type=checkbox] {

	width:auto;
}

#leftWrap th {
	text-align:left;
	padding: 0.2rem 0.9rem;
	white-space: nowrap;
}


#leftWrap td {
	padding:5px 10px;
}

#errorMessageWrap {
	display:none;
	border:1px solid #f00;
	margin:2rem 0;
	padding-bottom:1.5rem;

}



#mobileNoteWrap {display:none;}

#userPage {
	display:none;
}



h1 {
	font-size:1.4rem;
	margin:0 0 0.5rem 0;
	color:#23007a;
}

h2 {
	font-size:1.1rem;
	margin-bottom:0;
}

p {
	margin-top:0;
	margin-bottom:0.5rem;	
}

.mono {
	font-family:"courier new",courier;
}


ul {
	margin-top:0.5rem;
	padding-left:2rem;
}

table {
	border-collapse: collapse;
}


#support {

	margin-top:1rem;
}


.performance-table {

	border: 1px solid #ccc;
}

.performance-table td {


	text-align: left;
	padding: 0.5rem;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

}



a {
	text-decoration:none;
	color:#6565d7;
}

a:hover {
	color:#00f;
}

#hubName,#rimName {
	/* height: 24px; */

	width:12rem;
	margin-right:0.5rem;
}


#togglePair {
	cursor:pointer;
}


#calculationWrap {
	margin:3rem 0;
}


#infoHeader {
	margin-top:2rem;
}

.info-header {

	background-color:#fff;
	width:70%;
	text-align:right;
	padding:0px;
	border:none;
	line-height: 1;
}


.infoClose { 
	cursor:pointer;
	color:#999;
	
}

.info {
	width:70%;
	padding: 1rem 1.5rem 0.5rem 1.5rem;
	background-color:var(--info-color);
	border-radius:5px;
	border:1px solid #999;
	margin-bottom:6px;
	overflow-wrap: anywhere;
}

#calculationErrors {

	margin-top:2rem;

}

#infoStartup {
	display:block;
}

#infoWheelData h2 {
	color:#600;
}




#infoWheelData span {

cursor:pointer;
}

#publicHeader,
#publicFooter {

	width:70%;
	color:#666;

	display:none;
}


#publicHeader h1 {
	font-size:1.3rem;
	color:#333;
}

#publicHeader p {
	margin-top:1rem;
}

#publicFooter {

	margin-top:1rem
}


#demoFooter {

	margin-top:2rem
}

.wheelTypePublic { /* Replaces .wheelTypeUser */

	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color:#666;
}

.wheelTypePublic h2 {
	margin-bottom:1rem;
	color:#333;
}


#logonForm {
	display:none;
}

.logon-form {
	background-color:#e9fbe7;
	border-radius:5px;
	border:1px solid #999;
	padding:10px 15px;
	margin-bottom: 20px;
	width:fit-content;
}

.logon-form td {
	padding:0.5rem;
}

.logon-help {
	cursor:pointer;
	color:#00f;
}

.logon-help-active,
.calc-url-active {
	text-decoration: underline red;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.logon-start {

	width:60%;
	margin:3rem 0;
	display:none;
	overflow-wrap: anywhere;

}


.calc-url {
	cursor:pointer;
	color:#999;
}

#notAllowed {
	font-weight:bold;
}

#logonForm p {
	margin-top:0.5rem;
	margin-bottom:1rem;
}

#logOff {
	cursor:pointer;
}


.logon-result {

	color:#2b1cdb;

}


#systemMessageWrap {
	display:none;
	width:70%;
	padding: 0rem 1.5rem 1rem 1.5rem;
	border:1px solid #999;
	background-color:var(--message-color);
	border-radius:5px;


	margin-bottom:1rem;
}



.infoFileData { 
	display:none;
	width:90%;
	padding-top:1rem;
}




#wheelComponentNames {
	font-family:monospace;
}

.wheelTypeUser {
	margin:3rem 0 0.5rem 0;
	font-family:monospace;
	font-size:110%;
	color:#999;

}

	
.select-link {color:#0000ff;}	/* settings info dialog */
.input-link  {color:#006f00;}


.tabulatedData { margin-bottom:2rem;}

.tabulatedData th,
.tabulatedData td { 
	padding:0.3rem 1rem;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-align:center;
}

.tabulatedData thead th {
	text-align:left;
	text-wrap: nowrap;
}

.tabulatedData tbody th {
	text-align:left;
	font-weight:normal;
}

#calculationUrl { 
	word-wrap: break-word;
}



span.errorText { color:#f00;}	/* calcLog errors */ 
	
span.warning { 					/* calcLog warning message. */
	color:#cc0000;
	font-weight:bold;
}


#multipleLengths {
	display:flex;
	align-items: flex-start;
}

.multiple-lengths {
	margin-right:2rem;
}


.multiple-lengths .multiple-heading {
	writing-mode:horizontal-tb;

}

.multiple-lengths thead th {

	writing-mode: vertical-rl;
	border:1px solid #ccc;
}

.multiple-lengths td {
	padding:0.5rem !important;
}

.multiple-lengths td {
	border:1px solid #ccc;
}

.multiLeading {
	color:#d71212;
}

.multiTrailing {
	color:#053e97;
}

.multiRadial {
	color:#616c11;
}

.multiple-lo th,
.multiple-lo td { /* Set on the <div> */

	color:#ccc;

}

#erdHelperValue {
	font-size:120%;

}

#headerMessage {
	margin-top:1rem;
}

/*** displayNormal : standard view of the calculation result ***/


.displayNormal thead th {
	text-align:center;
	padding:0.5rem;
}

.displayNormal th {
	text-align:left;
	padding-right:2rem;
}

.displayNormal td {
	padding:0.5rem;
	text-align:center;
}

.displayNormal td:nth-child(2),  /* Spoke length table vertical bar between Left | Right */
.displayNormal th:nth-child(2) {
	border-right:1px solid #ccc;
}

.displayNormal tr {
	border-bottom:1px solid #ccc;
}

.displayNormal #dataUsed th {
	text-align:left;
	padding-right:2rem;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	white-space: nowrap;
}

.displayNormal #dataUsed td {
	padding:0.3rem 1rem;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-align:center;
}

.displayNormal #calculationDate {
	display:none;
}


.displayNormal #wheelComponentsSave {
	display:none;
}


.displayNormal #wheelSubTitleSave {
	display:none;
}



/*** End of save view styles ***/





#saveDataMenuLink {
	
}

span.bad {						/* span.bad used in Display Type help guide. */ 
	background-color:pink;
	padding:0 0.2rem;
}


/* Shown in the spoke table when re calculation is required. */

.re-calculate {
	background-color:#e54747;
	color:#fff;
	padding:0.2rem 1rem;
	font-weight:900;
	border-radius:3px;
}

.redraw-header {

}




#printTextArea {  /* textarea user input on print screen. */
	width:100%;
	height:80px;
	margin-bottom:1rem;
	padding:0.5rem;
}


#printTextWrap {
	display:none;
}



#calculationNotes {
	margin:2rem 0 0 0;
}


.wheelDescription {
	margin:2rem 0 1rem 0;
}



#freeFormatSettings td {
	padding-right:2rem;
}


.printHeader {
	display:none;
}

.printShow {
	display:none;
}

#multiWrap .user-lengths {
	display:none;
}

.print-export {

	margin: 2rem 0;
}

/*** Calculation utilities ***/

.calculation-utility {

	border:1px solid #999;
	padding:0.5rem;
	margin-bottom:1rem;
}

.calculation-utility table {
	border-collapse: separate;
    border-spacing: 0.5rem;
}

.calculation-utility input {
	width:5rem;
}

.calculation-utility button {
	text-align:right;
	padding-right:0.7rem;
}

.sp-angle {
	font-size:90%;
	color:#999;
	padding-left:2rem;
}

/* Flange offet utility */

.offsetValue {
	padding-right:0.7rem;
}

.offsetResult {
	pointer-events: none;
	background-color:var(--info-color); /* Set to var(--offset-color) by program */
}

.offsetW {
	pointer-events: none;
	background-color:var(--info-color);
}


#offsetButton {
	visibility:hidden;
	cursor:pointer;
	text-align:right;
	padding-right:0.7rem;
}





/***  svg  ***/

#svgContainer {

	margin-bottom:3rem;

}

#svgDiv {

	width:600px;
	height:600px;
	touch-action:none;
	cursor:all-scroll;

}

.svg-wrap {

	width:600px;

}

.svg-div {	/* Asigned by the program when the view is altered */
	border:1px solid #ddd;
	border-radius:5px;

}

.svg-navigation {
	display:flex;
	margin-bottom:5px;
}


.reality-box {

	flex-grow:100;
	text-align:right;
}
.reality-text {
	color:#82bdb8;
	cursor:pointer;
}

.zoom-hub,
#svgReset {
	color:#82bdb8;
	cursor:pointer;
	margin-left:1rem;
}

.zoom-hub:hover {
	color:#c93030;

}
.zoom-hub-on {

	color:#c93030;
	font-weight:bold;
}




#drawingParametersWrap {	/* Used by Svg.print */
	display:none;
}



#drawingParameters {
	margin-top:1rem;
}


#drawingParametersWrap th,
#drawingParametersWrap td {
	border:1px solid #ccc;
	padding:0.5rem;

}

#drawingParameters th {
	text-align:left;
}

#drawingParameters td {
	text-align:center;
}


#lineLengthWrap {
	display:flex;
}

#lineLengthLeft {
	margin-right:5rem;
}

#lineLengthWrap td {
	padding:0.25rem;
}

#lineLengthLeft,
#lineLengthRight {
	display:none;
}


/*** End of svg ***/


/*** Bench ***/

#benchControl {
	text-align:right;
	margin-top:1rem;;
}

.bench-contents {

	width:95%;
}

.bench {

	margin-top:2rem;
	border-radius:10px;
	padding:1rem 1rem 0 1rem;

	border:1px solid #478947;

	background-color:var(--info-color);

	overflow-wrap: anywhere;
}

.bench h1 {
	cursor:pointer;
}

.bench-header {
	display:flex;
}

.bench-description {
	flex-grow:1;
}

.bench-items {
}


.bench-header-menu {
	text-wrap:nowrap;
}

.bench-menu {
	cursor:pointer;
	color:#999;
	display:inline;
	padding:0.2rem 0.5rem;
	border-radius:3px;
	text-wrap:nowrap;
}

.bench-item:hover {
	background-color:#e6e4dc;
	cursor:pointer;
}

.bench-item-name {
	text-align:left;
	padding: 0 1rem 0 0.2rem;
	color:#00a;
	white-space:nowrap;
}

.bench-data,
.bench-front,
.bench-rear,
.bench-cross {
	text-align:right;
	padding:0 1rem;
	color:#605454;
	white-space:nowrap;
}

.bench-front {color:#ce6b2a;}
.bench-rear  {color:#0c89d8;}

.bench-cross {
	text-align:center;
}

.bench-date {
	color:#999;
	padding-left:2rem;
	font-family:monospace;
	white-space:nowrap;
}


.save-required {
	color:#f00;
}

.collection-footer {
	margin-top:1rem;
}


.item-delete {
	color:#fff;
	padding:0 0.5rem;
	font-family:monospace;
	border-radius:3px;
	display:table-cell !important;
	text-wrap: nowrap;
}

.bench-menu:hover,
.item-delete:hover {
	color:#fff;
	background-color:var(--bench-link);
}



.bench-footer {
	text-align:right;
	margin-top:1rem;
	margin-bottom:0.5rem

}

.bench-filename {
	margin-top:1rem;
	color:#999;
}

.data-update {
	background-color:rgb(182 203 129);
}


.bench-selected {
	border: 1px solid #28317c;
	background-color: #badff9;
}

#benchDataLengths {
	border: 1px solid #000;
	padding: 0.5rem 1rem;
	border-radius: 10px;
	background-color:var(--info-color);
}

.bench-data-lengths-wrap {
	margin: 1.5rem 0 2rem 0;

}

.hubs-heading {
	cursor:pointer;
}

.hubs-heading:hover {
	color:var(--bench-link);
}



/* Calculation data dialog */

.data-request {
	color:#00f;
	cursor:pointer;
}

.data-request:hover {
	background-color:#efefef;
}


/*** Dialog ***/

.confirm-action {
	border-radius: 10px;
	padding: 1rem;
	border: 4px solid #28317c;
	width: 50%;
	background-color:var(--info-color);
}

#benchTitle {
	width:80%;
}

#benchDescription {
	width:80%;
	height:7rem;
}

.confirm-action::backdrop {
	background-color: #a3a89e;
	opacity:0.3;
}

.confirm-buttons {
	margin-top:1rem;
}

.confirm-buttons button {
	margin-right:1rem;
}


/*** popover ***/

.popover-default {
	margin: 0;
	inset:auto;
	padding:0.5rem 1rem;
	border:1px solid #999;
	border-radius:10px;
	background-color:rgb(210 238 139);
}

.duplicate-message {

	top: anchor(top);
	left:anchor(left);
}

.clipboard-copied {

	top: calc(anchor(top) + 10px);
	right:calc(anchor(right) + 10px);
}


#sL, #sR {
	cursor:pointer;
}

#sL:hover,
#sR:hover {
	color:#00f;
	font-weight:bold;
}

.calculation-single {
	display:flex;
	column-gap:40px;
}


.rounding-wrap {
	margin-top:40px;

}

#spokeRounding {

	margin: 0;
	inset:auto;
	padding:0.5rem 1rem;
	border:1px solid #999;
	border-radius:10px;
	background-color:var(--info-color);
}

#spokeRounding tr {
	border:0;
}

#spokeRounding th {
	font-weight:bold;
}

#spokeRounding th,
#spokeRounding td {
	padding: 0 1rem;
	text-align:center;
	border:0;
	white-space: nowrap;
}

#spokeRounding span {
	color:#999;
	padding-left:0.5rem;
}



/****  Print  ***/


@media print {


	body {
		margin:0;
		padding:0;
	}

	#content { 
		margin:0;
		padding:0;
	}

	
	.info,
	#header-wrap,
	#leftWrap, 
	#infoHeader,
	#mobileNoteWrap,
	#wheelComponentsSave,
	#wheelTypeDescription,
	#svgContainer,
	#drawMenu,
	#headerMessage,
	.calc-url,
	.rounding-wrap {

		display:none !important;
	}

	#wheelTypeDescription {
		margin-left:0.5rem;
	}

	#wd-cross-print,
	#wd-user-lengths {
		display:table-row-group;
	}


	.printHeader {
		display:flex;
		align-items: center;
		padding:0.5rem 1.5rem;
		border:1px solid #000;
	}
	
	.spokes-fr-print {
		flex-grow:1;
		font-weight:bold;

		font-size:1rem;
	}

	#wheelComponentsPrint {

		font-weight:bold;
		font-size:20px;
		text-align:right;

		display:block;
	}

	#calculationWrap thead th { /* Overrides any styles set by .displayNormal */
		color:#000;
		text-align:center;
		padding:0.5rem;
	}

	#calculationWrap th {
		border-bottom:1px solid #ccc;
		text-align:left;
		padding:0.5rem 2rem 0.5rem 1rem;
	}

	#calculationWrap td {
		padding:0.5rem 2rem;
		letter-spacing: 0.8px;
		text-align:center;
	}

	#wd-user-lengths {
		border:2px solid #000;
	}

	#wd-user-lengths td {
		padding-top:0.7rem;
		padding-bottom:0.7rem;

	}

	#calculationNotes {
		margin:1.5rem 0;
	}

	#dataUsed table {
		border:1px solid #ccc;
	}

	.printHide { display:none  !important; }
	.printShow { display:block !important;}


	#multiWrap .user-lengths {
		padding:2rem;
		display:table-cell;
	}


	#userText {	/* User text on print. */
		border:1px solid #000;
		border-radius:5px;
		padding:0.5rem;
	}

	#userText h1 {
		margin:0;
	}

	#userText p {
		margin:0.2rem 0;
	}


	#printDate {
		margin-top:1rem;
		display:block;
	}
		

	.multiple-lo td,		/* multiple-lo may be set, just make both sides match. Cannot update just the class because the other side will be coloured */
	#multipleLengths td {
	color:#000;

	}

} /***  End of print  ***/


/***  Small screens  ***/

@media screen and (max-width:1250px) {

	#userPage {

		margin:2rem 0.5rem;
		width:auto;
	}


	#drawMenu {
		display:block;
		padding-top:10px;

	}


	#logonForm p {
		margin-top:5px;
		margin-bottom:10px;
	}


}


@media screen and (max-width:800px) {

	#logonForm {

		margin-right:0;
	}


	.logon-start {
		width:auto;
	}


	#header-wrap {

		position:static;
		padding:5px;
	}

	#header {

		display:block;

	}

	#mainMenu {
		display:block;
	}

	.menu-components {
		display:block;
		padding-bottom:5px;

	}

	.menu-items {
		display:block;
	}

	#drawMenu {
		display:block;
	}

	#content {
		margin:0 10px;
		padding-top:10px;
	}


	#calculationWrap {
		margin-top:0;
	}

	#infoHeader {
		width:100%;
		margin-top:10px;
	}

	#hubName, #rimName {
		height: auto;
		margin:0.2rem 0.2rem 0 0.2rem;
		width: 15rem;
    
    }
	.layout {
		display:block;
	}
	
	#leftWrap {
		width:100%;
		position:static;
		height:auto;
		padding:10px;
		border:0;


	}

	#leftWrap input {
		width: 2.5rem;
	}

	#leftWrap td {
		padding:5px;
	}

	#optionReminder {
		margin-left: 0.5rem;
		font-size:90%;
	}

	#multipleLengths {
		display:block;

	}


	.info {
		width:100%;
		padding:10px;
	}
	
	.bench-contents {
		width:100%;
		border-radius:20px;

	}

	/* Shorten the table rows to fit the small width */

	.bench-list-h td:nth-child(n+3) {
		display:none;
	}

	.bench-list-r td:nth-child(n+3) {
		display:none;
	}

	.bench-list-w td:nth-child(n+2) {
		display:none;
	}

	.bench-delete {
		color:#666;
	}

	.infoFileData {
	    width: 100%;
	}



	#fileDataLengths {
		display:none;
	}
	
	#wheelType {
		margin-right:10px;
	}

	#fr, #rimName {	margin-right:10px;}


	#message {
		width:100%;
		padding:10px;
	}
	
	#freeFormatSettings td { /* more room for finger taps */
		padding-right:2rem;
		padding-bottom:1rem;
	}


	.dataFile td:nth-child(n+3) { /* truncate the row so it fits */
	
		display:none;
	}

	.dataFileWrapper p {
		margin: 0 0 0.2rem 0;
		padding-left:0.2rem;
		width: 100%;
		
	}
	
	.offsetValue {
		padding-right:0.5rem;
	}
	
	
	#offsetCalcWrap input {
		width:2.5rem;
	}
	
	#offsetButton {
		padding-right:0.5rem;
	}
	
	.offsetButton {
		padding-right:0.5rem;
	}

	.zoom-buttons button {
		margin-right:10px;
	}

	#svgDiv {
		background-color:#eee;
		padding:5px;
	}

	.svg-wrap {
		margin-left:10px;

	}

	.confirm-action {
		border-radius: 5px;
		border-width:2px;
		padding: 0.5rem;
		width: 80%;
	}

	.bench-data-lengths-wrap {
		display:none !important;
	}

	.bench-header {
		display:block;
	}

	.calculation-single {
		display:block;
	}



}	/*** End of small screen  **/