
/* ISIS demos */

/* General Layout */

canvas {
	padding:5px;
	background-color:black;
	position:relative;
}

.app-container {
	position:relative;
	margin:15px 0 15px 0;
	background-color:grey;
}

.console {
	z-index:6;
	background-color:grey;
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
	-moz-user-select: none; /* mozilla browsers */
	-khtml-user-select: none; /* webkit (konqueror) browsers */
	-ms-user-select: none; /* IE10+ */
}

.bottom {
	position:relative;
	bottom:0;
}

.bottom .text {
	margin:5px;
	font-family:sans-serif;
	font-size:1em;
}

.bottom span > span {
	font-size:1em;
	display:inline-block;
	margin:0;
}

.right {
	display:inline-block;
	width:110px;
	float:right;
}

.right > * {
	margin:5px;
	font-size:.9em;
	font-family:sans-serif;
}


.right span {
	margin:0;
}

.app-container textarea {
	resize:none;
	font-size:.9em!important;
	display:block;
}

.updateMessage {
	color:white;
}

/* Buttons */

#calcsize, .console button {
	font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
	font-size: 0.8rem;
	line-height: .9;
	color: #fff;
	background-color: #005ea2;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	align-items: center;
	border: 0;
	border-radius: .15rem;
	cursor: pointer;
	-moz-column-gap: .3rem;
	column-gap: .3rem;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	margin-right: .3rem;
	padding: .50rem 1rem;
	text-align: center;
	text-decoration: none;
	margin-top: .3rem;
	min-width: 5rem;
}

#calcsize:hover, .console button:hover {
	background-color: #1a4480;
}

#calcsize:active, .console button:active {
	background-color: #162e51;
}

.console button:disabled {
	color: #454545;
	background-color: #c9c9c9;
	cursor:not-allowed;
}

.console .reset-button {
	background-color: #bd0801;
}

.console .reset-button:hover {
	background-color: #b50909;
}

.console .reset-button:active {
	background-color: #8b0a03;
}

.console .inverse-button {
	box-shadow: inset 0 0 0 2px #e6e6e6;
	background-color: transparent;
	color: #e6e6e6;
}

.console .inverse-button:hover {
	background: linear-gradient(
        90deg,
        rgb(133, 0, 0) 0%,
        rgba(133, 77, 0, 1) 10%,
        rgba(104, 111, 16, 1) 20%,
        rgba(40, 110, 37, 1) 30%,
        rgba(32, 109, 108, 1) 40%,
        rgba(24, 100, 113, 1) 50%,
        rgba(14, 63, 119, 1) 60%,
        rgba(48, 10, 121, 1) 70%,
        rgba(93, 6, 124, 1) 80%,
        rgba(125, 3, 108, 1) 90%,
        rgba(133, 0, 0, 1) 100%
    );
}

.console .inverse-button:active {
	background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

/* demo form elements */

.right label {
	font-family: sans-serif;
	margin:0 5px -10px 5px;
	display: inline-block;
}

.bottom input[readonly] {
	border:0;
	background-color:grey;
	display:inline-block;
	font-size:1em;
	width:35px;
	padding:0;
} 

.app-container input[type=text]:not([readonly]), .boxcarContainer>input {
	position:relative;
	background-color:white;
	color:black;
	display:block;
	width:50px;
	float:left;
	margin: 10px 5px;
}

/* Layout of specific demos */

#isis-pixels {
	width:500px;
}

#isis-pixels .right {
	width: 198px;
}

#isis-subpixels {
	width:290px;
}

#isis-multiplier {
	width:480px;
}

#isis-multiplier .right {
	width: 198px;
}

#isis-special-pixels {
	width:430px;
}

#isis-special-pixels .right {
	width:130px;
}

#trueDn {
	width:100px;
}

#isis-cube {
	width:810px;
	height:610px;
	background-color:LightGrey; 
}

#isis-cube .right {
	width:210px;
	padding-left:10px;
}

#isis-cube canvas {
	position:absolute;
}

#isis-destripe {
	width:805px;
}

#isis-destripe .special-width {
	width:120px;
}

#isis-seams .special-width {
	width:120px;
}

#isis-seams {
	width:805px;
}

#isis-seams .right textarea {
	height:67px;
}

#isis-destripe .right {
	width:290px;
}

#isis-seams .right {
	width:290px;
}

.app-container input[type=checkbox] {
	background-color:grey;
}

#isis-seams-chooseArea label {
	display:block;
	width:100%;
	margin:5px;
}


.legend {
	height:25px;
	width:100px;
	line-height:25px;
	text-align:center;
}

/* Image Data Size Calculator */

.app-container {
	color: black;
}

.app-container > div > form > table {
	border-spacing: 1px;
}

.app-container > div > form > table > tbody > tr {
	background-color: lightgray;
}