input[type=text], textarea
{
	-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.5);
	box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.5);
	-webkit-appearance: none;

	outline: none;
	padding: 3px 0px 3px 3px;
	border: none;
	text-align: center;
}

input[type=text]:focus, textarea:focus
{
}

#market-conditions-table
{
	position: absolute;
	top: 198px;
	left: 25px;
	width: 270px;
	font-size: 12px;
}
#market-conditions-table .col1{ width: 150px; }
#market-conditions-table .col2{width: 100px;text-align: center;}
/*#market-conditions-table td.orange-border {  border:3px solid #FBB040; }*/
#market-price-input.orange-border {outline: 3px solid #FBB040;border: none;outline-offset: -2px;}

#unlevered-book-value-table
{
	top: 182px;
	font-size:12px;
}
#levered-book-value-table
{
	top: 375px;
	font-size:12px;
}
.book-value-table
{
	position: absolute;
	left: 325px;
	width: 565px;
	text-align: center;
}
.book-value-table .col1{ width: 145px; text-align: left; }
.book-value-table .col2{ width: 135px; text-align: center; }
.book-value-table .col3{ width: 10px; padding: 0px; }
.book-value-table .col4{ width: 75px; }
.book-value-table .col5{ width: 75px; }
.book-value-table .col6{ width: 75px; }


.data-table
{
	border-collapse: collapse;
	border-spacing: 0px;
	table-layout: fixed;
	color: rgb(49, 54, 58);
}
.data-table td
{
	padding: 0px 5px;
}
.data-table .bordered {border: 1px solid #A7A79D;}
.data-table .input-col {  padding: 0px;  }
.data-table input
{
	height: calc(100% + 0px);
	width: calc(100% + 1px);
	position: absolute;
	top: 0px;
	left: 0px;
	border: 1px solid rgb(130, 171, 235);
	box-sizing: border-box;
	box-shadow: 0 0 10px rgb(130, 171, 235);
}
.data-table input:focus
{
}

.data-table tr {height: 36px;}
.data-table .dummy {  height: 0px;  }
.data-table .dummy td {  border: 0px solid red;  }

.table-title{font-weight: bold;background-color: rgb(239, 240, 240);}
.table-title.centred{ text-align: center; }

.data-table tr.black-border {border: 2px solid rgb(171, 175, 176);}
.data-table tr.orange-border {  border:3px solid #FBB040;  }

.data-table td.orange-border.left {border-left: 3px solid #FBB040;border-top: 3px solid #FBB040;border-bottom: 3px solid #FBB040;}
.data-table td.orange-border.mid {  border-top: 3px solid #FBB040; border-bottom: 3px solid #FBB040;  }
.data-table td.orange-border.right {  border-right: 3px solid #FBB040; border-top: 3px solid #FBB040; border-bottom: 3px solid #FBB040;  }

.state-table
{
	position: absolute;
	top: 60px;
}
.state-table table{ width: 590px; }

.state-table .col1{width: 150px;font-size: 11px;/* font-style: italic; */text-align: right;line-height: 1.3em;}
.state-table .col2{ width: 15px; }
.state-table .col3{width: 200px;}
.state-table .col4{ width: 75px; text-align: center; }
.state-table .col5{ width: 75px; text-align: center; }
.state-table .col6{ width: 75px; text-align: center; }


.characteristics-table
{
	position: absolute;
	top: 329px;
	left: 24px;
	border-top: 1px solid#ccc;
	padding-top: 10px;
	width: 622px;
}
.characteristics-table table{ width: 515px; }

.characteristics-table .col1{ width: 145px;  }
.characteristics-table .col2{ width: 135px; text-align: center; }
.characteristics-table .col3{ width: 10px; padding: 0px;  }
.characteristics-table .col4{ width: 75px; text-align: center; }
.characteristics-table .col5{ width: 75px; text-align: center; }
.characteristics-table .col6{ width: 75px; text-align: center; }

.characteristics-table-title
{
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 14pt;
	/* width: 100px; */
	line-height: 1.3em;
	font-weight: 700;
}

.state-table-title
{
	position: absolute;
	top: -30px;
	left: 35px;
	font-size: 14pt;
	/* width: 100px; */
	line-height: 1.3em;
	font-weight: 700;
}

.profit-table
{
	position: absolute;
	top: 130px;
	left: 70px;
}
.profit-table table{ width: 440px; }

.profit-table .col1{ width: 150px; font-size: 11px; font-style: italic; text-align: right; line-height: 1.3em; }
.profit-table .col2{ width: 15px; text-align: center; }
.profit-table .col3{width: 200px;}
.profit-table .col4{ width: 75px; text-align: center; }


.slide0-title
{
	position: absolute;
	top: 150px;
	left: 330px;
	width: 300px;
	font-size: 16pt;
	font-weight: bold;
	line-height: 1.3em;
}
.slide0-description
{
	position: absolute;
	top: 20px;
	left: 25px;
	width: 420px;
	font-size: 12px;
	line-height: 1.5em;
}

.slide0-input-description
{
	position: absolute;
	top: 370px;
	left: 60px;
	width: 200px;
	font-size: 8pt;
	line-height: 1.4em;
	color: #68685F;
}
#input-desc0{ font-style: italic; text-align: center; }
#input-desc1{ display: none; text-align: left; }
#input-desc2{ display: none; text-align: left; }

#navigation
{
	position: absolute;
	bottom: 70px;
	left: calc((240px - 168px) / 2);
}
.navigation-table
{
	border-collapse: collapse;
	border-spacing: 0px;
	table-layout: fixed;
	padding: 0px;
	color: #68685F;
	width: 160px;
}

.navigation-row
{
}

.navigation-cell
{
	width: 27px;
	height: 27px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	background: none;
	padding:0px;
	color: rgb(0,0,0);
	cursor: default;
	background-position: 0px 0px;
	cursor: pointer;
	box-sizing: border-box;
}

.navigation-cell.selected {color: #FFFFFF;background: rgb(49, 54, 58);border-radius: 16px;}
.navigation-cell.disabled {  height: 24px; color: #E6E6DB;  }

.navigation-arrow {  width: 34px;  background-position: 0px 0px;  }
.navigation-arrow.disabled {  background-position: 0px -34px;  }

.navigation-left {background: url(../assets/nav-arrow-left.png);display: none;}
.navigation-right {background: url(../assets/nav-arrow-right.png);display: none;}
.navigation-table .clickable {  cursor: pointer;  }


.left-panel
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 240px;
	background-color: #F3F3F3;
	-moz-border-top-left-radius: 6px;
	border-top-left-radius: 6px;
	-moz-border-bottom-left-radius: 6px;
	border-bottom-left-radius: 6px;

}

.right-panel
{
	position: absolute;
	top: 0px;
	left: 240px;
	height: 100%;
	width: 680px;

}
.svg-holder
{
	position: relative;
	top: 130px;
	margin-left: auto;
	margin-right: auto;
	width: 500px;

}

.svg-outer-label
{
	font-family: Arial;
	color: #343431;
	fill: #343431;
	font-size: 14px;
	text-anchor:left;
}
.svg-text-total
{
	font-family: Arial;
	color: #FFFFFF;
	fill: #FFFFFF;
	font-size: 16px;
	text-anchor:left;
}
.svg-text-title
{
	font-family: Arial;
	color: #FFFFFF;
	fill: #FFFFFF;
	font-size: 20px;
	text-align: center;
	text-anchor:middle;
	width: 220px;
}
.svg-text-title .subtitle
{
	font-size: 15px;
	font-style: italic;
}
.right-panel-title
{
	font-family: Arial;
	color: #000;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	position: absolute;
	width: 100%;
	left: -90px;
	top: 10px;
	text-align: left;
	padding: 28px;
	top: -109px;
}
.balance-sheet-title
{
	font-family: Arial;
	color: rgb(49, 54, 58);
	font-size: 14px;
	text-align: center;
	position: relative;
	width: 100%;
	left: 0px;
	top: -5px;
	margin-bottom: 10px;
	font-weight: 700;
}

.menu-title
{
	color: #000;
	font-size: 12pt;
	font-weight: bold;
	padding-left: 20px;
	margin-top: 25px;
	margin-bottom: 15px;
}

.menu table
{
	border-collapse: collapse;
	border-spacing: 0px;
	table-layout: fixed;
	padding: 0px;
	color: #292920;
	margin-top: 0px;
	font-size: 9pt;
}

.menu .menu-row
{
	height: 65px;
	display: block !important;
}

.menu .menu-row.selected
{
	background-color: #585852;
	box-shadow: 0 0 10px rgba(0,0,0,0.45);
	background: white;
}

.menu .num-col
{
	width: 23px;
	vertical-align: top;
	padding-top: 8px;
}
.menu .num-col > .num-holder
{
	padding-top: 0px;
	font-size: 11px;
	vertical-align: top;
	text-align: right;
	font-weight: 700;
}

.num-holder {}
.menu .text-col
{
	padding-left: 10px;
	padding-right: 10px;
	color: #292920;
	padding: 8px;
	font-size: 11px;
	line-height: 15px;
	vertical-align: top;
	padding-top: 10px;
	visibility: hidden;
}

.menu .menu-row.selected > .num-col > .num-holder {  color: #292920; background-position: 0 -39px;  }
.menu .menu-row.selected > .text-col {/* color: #FFFFFF; */}

.index-btn
{
	display: inline-block;
	font-size: 12px;
	line-height: 1.3em;
	color: #292920;
	text-decoration: underline;
	cursor: pointer;
	position: absolute;
	right: 26px;
	top: 14px;
	z-index: 1;
}

.index-btn:hover
{
	color: #0000aa;
}

.reset-btn
{
	display: inline-block;
	width: 33px;
	height: 33px;
	background-image: url(../assets/reset-btn.png);
	/*margin-left: 70px;*/
	color: #292920;
	font-size: 10pt;
	cursor: pointer;
	position:absolute;
	top: 2px;
	right: 3px;
	display: none !important;
}

.reset-btn:hover
{
	color: #0000aa;
}




#market-conditions-table td {
    padding: 3px;
    position: relative;
}

td.table-title.centred.bordered {
    background: rgb(0, 106, 174);
    color: white;
}

.explanation-cell {
    padding: 0px !important;
    height: 26px !important;
    text-align: center;
    font-size: 11px;
}

td.initial-highlight {
    background: yellow;
}

#market-conditions-table td {
    padding: 5px;
}

.button {
    background: rgb(252, 253, 253);
    position: absolute;
    width: 200px;
    height: 43px;
    font-size: 15px;
    line-height: 43px;
    text-align: center;
    border:  1px solid rgb(204, 204, 204);
    box-shadow: 0 0 10px rgba(204, 204, 204, 25);
    cursor: pointer;
}

div#step0-next-step {
    top: 490px;
    left: 60px;
}

td.highlighted {
    background: yellow;
}

.num-holder::after {content: '.';}

.menu {
}

.popout {
    background: white;
    position: absolute;
    z-index: 5;
    padding: 15px;
    width: 873px;
    box-shadow: 0 0 10px rgba(0,0,0,0.55);
    height: 410px;
}

.popout .button, .popout .slide0-description {
    display: none;
}
.popout-contents {
	pointer-events: none;
}

.close-popout {
    position: absolute;
    right: -3px;
    top: -5px;
    color: rgb(171, 175, 176);
    cursor: pointer;
    padding: 15px;
}

.close-popout:hover {
    color: black;
}

.popout-contents {
    position: relative;
    top: -130px;
    left: -23px;
}

#reset-button, #next-step-button {
    width: 100px;
    left: 50%;
    margin-left: -50px;
    height: 36px;
    margin-top: 10px;
    line-height: 36px;
}

.menu .viewable .text-col {
    visibility: visible;
}

.button.disabled {
    display: none;
}
.asset-sheet, .liability-sheet, .equity-sheet {
	line-height: 32px
}
.balance-sheet .small .left {
	font-size: 14px;
	line-height: 9px;
	padding-top: 9px;
}
.asset-sheet {
    position: absolute;
    background: rgb(58, 101, 0);
    width: 230px;
    height: 313px;
    left: 10px;
    top: 20px;
}

.liability-sheet {
    position: absolute;
    background: rgb(177, 0, 33);
    height: 155px;
    width: 230px;
    left: 243px;
    top: 20px;
}

.equity-sheet {
    position: absolute;
    background: rgb(93, 133, 169);
    height: 155px;
    width: 230px;
    left: 243px;
    top: 178px;
}

.total-assets {
    position: absolute;
    background: rgb(239, 240, 240);
    height: 55px;
    width: 230px;
    left: 10px;
    top: 336px;
}

.total-liabilities {
    position: absolute;
    background: rgb(239, 240, 240);
    height: 55px;
    width: 230px;
    left: 243px;
    top: 336px;
}

.asset-sheet::before {content: "Assets";position: absolute;color: rgb(58, 101, 0);transform: rotate(-90deg);left: -36px;top: 11px;font-size: 13px;}

.liability-sheet::before {
    position: absolute;
    content: "Liabilities";
    color: rgb(177,0,33);
    left: 216px;
    transform: rotate(90deg);
    top: 16px;
}

.equity-sheet::before {
    position: absolute;
    content: "Equity";
    color: rgb(93,133,169);
    left: 225px;
    transform: rotate(90deg);
    top: 8px;
}

.balance-sheet:not([step="1"]) [step="1"],
.balance-sheet:not([step="2"]) [step="2"],
.balance-sheet:not([step="3"]) [step="3"],
.balance-sheet:not([step="4"]) [step="4"] {
	display: none;
}
.balance-sheet[step="5"] {
	display: none;
}

.balance-sheet > div {
    display: table;
}

.balance-sheet .center-text {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color:white;
	font-size: 30px;
}

.balance-sheet .middle-text {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color:white;
	font-size: 30px;
}
.balance-sheet .bottom-text {
	display: table-cell;
	vertical-align:bottom;
	padding-bottom: 8px;
}
.balance-sheet .left {
	width: calc(53% - 3px);
	display: inline-block;
	padding-left:10px;
	text-align: left;
	box-sizing:border-box;
	font-size: 24px;
}
.balance-sheet .right {
	width: 45%;
	display: inline-block;
	text-align:right;
	font-size:30px;
	padding-right:10px;
	box-sizing:border-box;
}

.balance-sheet .total-liabilities .left, .total-assets .left {
    font-size: 15px;
}

.balance-sheet .total-liabilities .value, .total-assets .value {
    font-size: 24px;
}

.balance-sheet .padding[step="3"] {
    height: 65px;
}

.balance-sheet .padding[step="4"] {
    height: 45px;
}
.characteristics-table .table-title,
.state-table .table-title {
    background: rgb(239, 240, 240) !important;
    color: rgb(49, 54, 58) !important;
}

.characteristics-table .data-table {
    position: absolute;
    top: 40px;
    left: 26px;
}

.characteristics-table td.col4.table-title.centred.bordered.smaller {
    font-size: 11px;
    background: white !important;
}

.curved-arrow-caption {
    position: absolute;
    font-weight: 700;
    font-size: 11px;
}

.curved-arrow-caption::after {content: "";position: absolute;width: 28px;height: 28px;top: -32px;left: 35px;background: url('../assets/arrow-curve.png');background-size: contain;background-repeat: no-repeat;}

.star::before {
	content: "";
	width: 15px;
	height: 15px;
	position: absolute;
	background: url('../assets/star.png');
	background-size: contain;
	background-repeat: no-repeat;
	right: calc(100% + 4px);
}

#step2 .state-table .curved-arrow-caption {
    top: 192px;
    left: 116px;
}
#step1 .state-table .curved-arrow-caption {
    top: 156px;
    left: 116px;
}

#step1 .profit-table .curved-arrow-caption {
    top: 118px;
    left: 118px;
}
#step2 .profit-table .curved-arrow-caption {
    top: 118px;
    left: 118px;
}

#levered-equity-price {
    display: block;
    height: 46px;
    box-sizing: border-box;
    border: 0px;
    padding: 0px !important;
    width: 109px !important;
}

.unclickable {
    pointer-events: none;
    color: rgb(136, 136, 136);
}

#reset-button {
    text-align: left;
    padding-left: 15px;
    box-sizing: border-box;
    background-image: url('../assets/reset-btn.png');
    background-repeat: no-repeat;
    background-position: 64px 7px;
    background-size: 17px;
}

.popout-handle {
    width: calc(100% - 40px);
    height: calc(100% - 0px);
    position: absolute;
    top: 0px;
    left: 0px;
}

.popout-handle.left {
    height: calc(100% - 40px);
    top: 40px;
    width: 100%;
}

.popout-contents .filler {
    background: white !important;
}

.popout-contents .market-price-input {
    box-shadow: none;
}

span.font {
    font-size:12px;
}