/* Main calculator form CSS */
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #000;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}


.width_auto{
  width:auto ! important;
}

#form2, #inflationIncrease { display:none; }

div.calculator_form { width:auto; font-family:'Raleway', "Trebuchet MS", Arial; position: relative; z-index: 1; background: #f6f6f6; border:1px solid #ccc; padding: 40px 20px; border-radius:10px; margin-top:25px; margin-bottom:30px; }
.tabsAbove, .spellingBoxAbove { margin-top:0px !important; border-top-left-radius:0px !important; } /* If there are tabs or spelling box above the form, remove the border radius from the top of the form */

div.calculator_form form { margin:auto; max-width:330px; background:#eee; color:#333; border: 1px solid #ccc; border-radius: 10px; }
div.formIcon form { /* If present, adds an icon to the top right of the form */
	background-position: 94% 5%; background-size: 60px 60px; background-repeat: no-repeat;
}

div.single-field, div.single-field-noHighlight, div.submitButtons { clear:both; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div.single-field, div.single-field-noHighlight { padding:10px 20px; }
form > div.single-field:first-of-type { padding-top:20px; border-top-left-radius: 10px; border-top-right-radius: 10px;  } /* Need this to stop curFocusDiv from displaying colour over border. Need the extra > to stop elements surrounded by spans from doing the same thing further down */
form > h2 + div.single-field:first-of-type, form > p + div.single-field:first-of-type { border-top-left-radius: 0px; border-top-right-radius: 0px;  } /* Ensures no top rounded corners if there's an <h2> or <p> tag before it in the form */

div.submitButtons { text-align:right; margin:15px; }
div.single-field label { display:block;  }
div.notRequired { background-color:#ddd; }
div.notRequired input { background-color:#eee; }
div.notRequired label:after { content: ' (optional)' !important; color:#888; }
div.hiddenOption { border-top:1px solid transparent !important; border-radius:0px !important; } /* needed, as when items are unhidden, they take on first-of-type status */

span.clearElement { display:block; clear:both; } /* Correctly spaces out each calculator div.single-field for height */

/* Labels */
form label { width:auto; font-size:13px; }
form label.gdpr { line-height:1.1em !important; margin-top:10px; margin-bottom:10px; color:#000; font-weight:400; text-transform:none; }

/* Inputs */
input[type="text"], input[type="number"], input[type="time"], input[type="date"], textarea, select, .currSymbol {
	height: 40px; padding: 6px 5px 6px 12px; font-size: 20px; line-height: 22px; border-color: #aaa; color: #555; box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent;
}
textarea { width:100%; height:auto; font-size:16px; line-height:18px; }

select {
    font-size: 17px; line-height: 1.3; padding-right:25px;
    background-color: #fff;
   	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>"), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat; background-position: right .5em top 50%, 0 0; background-size: .65em auto, 100%;
}
select::-ms-expand { display: none; }

input:hover, select:hover { border-color: #888; }
input:focus, select:focus { border-color: #aaa; box-shadow: 0 0 1px 3px rgba(200, 200, 200, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222;  outline: none; }
input:required:valid { border-right: 1px solid green; }
input:required:invalid { border-right: 1px solid #cc6102; }

input[type=checkbox] { transform: scale(1.5); }
form input.calculatorInput, form input.calculatorShortInput, form input.calculatorMedInput, form select, .curr, .spacer { display:inline-block;  }
form input.calculatorInput { width:10em; -webkit-appearance: none; }
form input.calculatorMedInput { width:7em; -webkit-appearance: none; }
form input.calculatorShortInput { width:5em; -webkit-appearance: none; }
form .tinyInput { width:3em !important; }

input[type="date"] { background:#fff url("../images/date-calendar.png")  95% 50% no-repeat; background-size: 16px 16px; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #aaa;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { color: #aaa; } /* Internet Explorer 10-11 */
::-ms-input-placeholder { color: #aaa; } /* Microsoft Edge */

/* Toggle switch (for check boxes)*/
.toggleSwitch { position: relative; display: inline-block; width: 70px !important; height: 34px; margin-top:5px; -webkit-tap-highlight-color: transparent; }
/* Hide default HTML checkbox */
.toggleSwitch input { opacity: 0; width: 0; height: 0; }
/* The slider */
.toggleSlider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px; }
.toggleSlider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%; }
input:checked + .toggleSlider { background-color: #cc6102; }
input:focus + .toggleSlider { box-shadow: 0 0 1px #cc6102; }
input:checked + .toggleSlider:before { -webkit-transform: translateX(36px); -ms-transform: translateX(36px); transform: translateX(36px); }

/* Radio button option switches (instead of select boxes)*/
.radio-switch { display: flex; overflow: hidden; font-family:Arial,sans-serif; }
.radio-switch input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; }
.radio-switch label { background-color: #e6e6e6; color:#777; font-size: 16px; line-height: 1; padding: 12px 16px; margin-right: -1px;
    border: 1px solid #aaa; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); transition: all 0.1s ease-in-out; -webkit-tap-highlight-color: transparent;
}
.radio-switch label:hover { cursor: pointer; }
.radio-switch input:checked + label { background-color: #cc6102; color:#fff; box-shadow: none; }
.radio-switch label:first-of-type { border-radius: 10px 0 0 10px; }
.radio-switch label:last-of-type { border-radius: 0 10px 10px 0; }

/* Currency symbol box for beginning of inputs */
.currSymbol { float:left; width:35px; font-family:Arial,sans-serif; font-size:18px; line-height:18px; display: flex; align-items: center; background-color: #eee; color:#666; border:1px solid #aaa; border-top-right-radius: 0; border-bottom-right-radius: 0;  }
/* change the input box immediately following .currSymbol */
.currSymbol + input { border-left:0px; border-top-left-radius: 0; border-bottom-left-radius: 0;  }
form input.curr {
	background-color: transparent; border:none !important; width:21px; padding:2px;
}

/* Rounding switch options for converters */
.roundingOptions { background-color:#ddd; }
.roundingOptions > label:first-of-type { font-size:11px; color:#666; display:block; }
.roundingOptions .calculatorButton { min-width:15% !important; margin-left:5px !important; float:right; font-size:14px; }
.roundingOptions .radio-switch { clear:left; display: inline-block; margin-top: 8px; position: relative; overflow: visible; }
.roundingOptions .radio-switch label { font-size: 12px; line-height: 1; padding: 8px 12px; }

form select.select_inline { margin-left:5px; position:relative; bottom:1px; }
form fieldset { display: inline; font-size:15px;  border:0px; padding-left: 0px; padding-bottom:0px;}
form fieldset input { float:initial !important; display:initial !important; font-size:20px !important; height:30px; line-height:26px;}

.percentIcon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1'><text x='95%' y='25' text-anchor='end' fill='gray' font-size='18' font-family='Raleway,Arial'>%</text></svg>") !important; background-repeat:no-repeat; padding-right: 22px !important;
}

/* Field highlighting */
.curFocus {}
.curFocusDiv {
	background: #FF6 !important; -moz-box-shadow: 0 0 2px #aaa; -webkit-box-shadow: 0 0 2px #aaa; box-shadow: 0 0 2px #aaa; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.3s ease;
}

/* Buttons */
input[type="button"], input[type="submit"], button { -webkit-appearance: button; cursor: pointer; color: #fff; background-color: #cc6102; border: 1px solid #804003;
	border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; font-family:'Raleway',Arial,sans-serif; font-size:16px; min-width:40%; padding:8px;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover { background-color: #804003; border-color: #4d2600; color: #fff; }
button { background-color: #804003; }
#swap { position:relative; float:right; border:0; background: transparent; min-width:32px; margin-right:50px; padding:0px; }  /* button for swapping between select options on individual converters */

/* Other form items */

.no_border { border: 0px !important; -moz-border-radius: none !important; -webkit-border-radius: none !important; border-radius: none !important;  -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; }
.spacer { width:21px; }

.additional { font-size:15px; margin-left:3px; display:inline-block; }
.additional a { color:#aaa; text-decoration:none; }
.additional a:hover { color:#666; text-decoration:underline; }

.boxLeft .additional, .boxRight .additional { width:auto; position:relative !important; float:left !important; margin-left:5px; margin-right:10px; }

.calculator_form h2, .calculator_form h3 { width:auto; margin:20px 20px 10px 20px; }
.calculator_form > form > p, .calculator_form > span > form > p { margin-left:20px; margin-right:20px; }
.calculator_results h2 { text-align:left; margin-top:12px !important; margin-bottom:1em !important; color: #cc6102; }

.calculator_form a { text-decoration:underline; }
.calculator_form a:hover { color:#cc6102; }

/* For cooking calculators */
#ingredientList { border-top:1px solid #ccc; border-bottom:1px solid #aaa; background:#ff6; margin:10px 0px 15px 0px; }
#ingredientList label, #ingredientList a { color:#000; }
#ingredientList select { font-size:15px; }
#ingredientList p { font-size:13px; margin-top:5px; }
#ingredientList .addOwn { font-size:90%; margin-left:5px; }

/* Calculator 'processing' interim message https://loading.io/spinner/message/ */
/* Previous image from http://preloaders.net */

#loading_msg { width: 200px; height: 120px; margin: auto; margin-top:10px; margin-bottom:30px; }
#loading_msg { display:none; }
#ScrollTo { display:block; }

@keyframes lds-message {
  0% { -webkit-transform: scale(0); transform: scale(0); }
  50% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0); transform: scale(0); }
}
@-webkit-keyframes lds-message {
  0% { -webkit-transform: scale(0); transform: scale(0); }
  50% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0); transform: scale(0); }
}
.lds-message { position: relative; }
.lds-message > div {
  position: absolute; width: 24px; height: 24px; border-radius: 50%; top: 48px;
  -webkit-animation: lds-message 1s cubic-bezier(0.3, 0, 0.7, 1) infinite;
  animation: lds-message 1s cubic-bezier(0.3, 0, 0.7, 1) infinite;
}
.lds-message > div:nth-of-type(4n + 1) { background: #1d0e0b; }
.lds-message > div:nth-of-type(4n + 2) { background: #774023; }
.lds-message > div:nth-of-type(4n + 3) { background: #d88c51; }
.lds-message > div:nth-of-type(4n) { background: #f3e7c9; }
.lds-message > div:nth-of-type(4n + 1) { left: 28px; -webkit-animation-delay: -0.75s; animation-delay: -0.75s; }
.lds-message > div:nth-of-type(4n + 2) { left: 68px; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.lds-message > div:nth-of-type(4n + 3) { left: 108px; -webkit-animation-delay: -0.25s; animation-delay: -0.25s; }
.lds-message > div:nth-of-type(4n + 4) { left: 148px; -webkit-animation-delay: 0s; animation-delay: 0s; }
.lds-message { width:100% !important; height:100% !important; -webkit-transform: translate(-88.5px, -88.5px) scale(0.885) translate(88.5px, 88.5px); transform: translate(-88.5px, -88.5px) scale(0.885) translate(88.5px, 88.5px); }

/* ################################################### */
/* Calculation results area */
.calculator_results, .converter_results, .converter_results_longer { clear:both; background-color: #fff; border: 1px solid #bbb; padding: 15px; margin: 0px 0px 30px 0px; text-align:left; }
.calculator_results input { background-color: #fff; border: none; }
.calculator_results textarea { width:570px; font-size:1.1em; }
.calculator_results .curr { background-color: #fff; border:none !important; color:#fff !important; }
.resultText, .resultInfo { width:48%; position:relative; float:left; font-size:14px; line-height:24px; }
.calculator_results td { font-size:13px; line-height:17px; }
.amendLink { clear:both; width:150px; margin-top:0px; position:relative; float:right; text-align:right; }
.calculator_results label { font-family:arial; color:#555; }
.calculator_results .curr { color:#aaa !important; }
.compoundTable { font-size:14px; line-height:22px; padding-bottom:40px; }

.fbShareCalc { margin-top:10px; }
.amendCalc { width:150px; margin-top:10px; position:relative; float:right; text-align:right; }

.resultInfoRight { width:40%; position:relative; float:right; text-align:right; }
.resultInfoLeft { width:30%; position:relative; float:left; }

/* Graphs */
#chart_div { width:580px; height:350px; }
#chart_div2  { width:580px; height:350px; margin-top:20px; }

/* These are the headers for the reports (used in compound interest calculator, etc, in finance_func.php */
.reporthead { background-color:#544a48;; color:#fff; }
.timeperiod-year-head, .timeperiod-month-head { background-color:#f0942d; color:#fff; }
.timeperiod-year-row, .timeperiod-month-row { background-color:#ffc; font-weight:bold; }
.reportdata td { padding-left:10px; border-bottom:1px solid #ddd; }

/* DIV table layout used in weight-converter.php, height-converter.php, etc */
.resultTable { display: table; width: 100%; margin-bottom:10px; font-size:25px; line-height:25px; }
.resultTableRow { display: table-row; }
.resultTableCell { display: table-cell; padding: 15px 10px; width:auto; border-bottom:1px solid #ccc; vertical-align:middle; }
.resultTableRow:first-of-type .resultTableCell { border-top:1px solid #ccc; }
.resultTable .orOption { width: 80px; font-weight:bold; color:#999; }
.resultTableRow:nth-child(1) { background-color: #f2f2f2; }
.resultTableCell:first-of-type { border-left:1px solid #ccc; }
.resultTableCell:last-of-type { width: 50px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
.resultTable .singleResult { font-size:30px; font-weight:bold; line-height:35px; }

.goBtn { background-color: white; color: #cc6102; border: 2px solid #cc6102; border-radius: 8px; font-size:15px; cursor: pointer; transition: 0.3s; display: inline-block; }
.goBtn:hover {border: 2px solid #4CAF50; color: #4CAF50; background:#fff; }

/* Calculation results table element highlights */
.subtotal { background-color:#eee; }
.total, .total2 { font-weight:bold; background-color:#ffc; }
.total_withdrawal { background-color:#ffecdc; }
.withdrawal { color:#f00; }

.calctypeText { width:200px; position:relative; float:right; text-align:center; font-size:19px; line-height:28px; background-color: #eee; border:1px solid #ccc; }
.calctypeWithdrawal { background-color: #ffecdc; }
.calctypeDeposit { background-color: #ffc; }

.converter_results { padding:0; height:190px; }
.converter_results_longer { padding:0; height:220px; }
.jscalculator { width:150px; height:190px; position:relative; float:right; border:1px transparent; border-left:1px solid #bbb; background-color:#eee; -webkit-border-radius: 10px; border-radius: 10px; }
.results1 { width:99%; height:180px; }
.results_longer { width:99%; height:230px; }
.results2 { height:170px; width:603px; }
.grouping { position:relative; float:right; margin-right:10px; color:#fff; }

.calcnote { clear:both; font-size:10px; margin-top:5px; padding:5px 0px; border-bottom:1px dotted #999; }
.noline { border-bottom:none; margin-bottom:0; }

.note { font-size:12px; line-height:13px; }
.error { font-size:10px; color:red; }
.warning { font-size:12px; color:red; }
.input { font-size:12px; border: 1px solid #999999; background-color:#fff; border-collapse:collapse; }
.inputoutput { font-family:Tahoma, Verdana, Arial; font-size:12px; border:#999999 1px solid; border-collapse:collapse; padding-left:3px; }
.output { border: 1px solid #999999; background-color:#fff; border-collapse:collapse; }
.resultheader { background-color:#cc6102; color:white; font-size:12px !important; border: 1px solid #8a480c; }
.npv { background-color:#f0942d; color:white; font-size:12px; line-height:14px; border: 1px solid #cc6102; }
.age1 { background-color:#ffecdc; color:#333; font-size:12px; border: 1px solid #fff; }
.age2 { background-color:white; color:#333; font-size:12px; border: 1px solid #fff; }
.retirement-table2 { width:50%; position:relative; float:left; }
.retirePad { padding:0 !important;}
.orange a { color:#f0942d; text-decoration:none; padding-right:10px; margin-bottom:10px; }
.orange a:hover, .orange a:focus { color:#f0942d; text-decoration:underline; }

/***** no script *****/
noscript { color:#000; font-size:16px; position:relative; z-index:9999; }

div#header_error { position: fixed; bottom: 0px; left: 50%; z-index: 99; margin-bottom: 10px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.header_error { font-weight:normal; margin:0; padding:15px; border-top:1px solid #333; border-bottom:1px solid #333; text-align:center; background:#FFFF0A; }

/* ===================================== */
/* ==== Mobile Landscape size from 480px up to 767px (i.e. just below tablet)  - incorporates portrait as well ==== */
@media
only screen and (max-width: 767px),
only screen and (max-device-width: 767px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 767px) {

	.calculator_form { border-radius:0px; }
	input[type="time"], input[type="date"] { width:10em !important; }
	.substancesList select { width:200px; }

	.results1, .results2, .results_longer { width:100%; height:220px; padding-bottom:10px; }
	.converter_results_longer, .results_longer { height:250px; }

	.resultTable { font-size:20px; }

	.grouping { clear:both; float:none; margin-right:0; margin-left:120px; margin-bottom:20px; }

	.additional { font-size:13px; }

	/*
	div.single-field { height: auto; display: flex; align-items: center; border:1px solid #ccc !important;
    }
	*/

	/* Hide calculator and right panel */
	.jscalculator, .rightpanel { display:none; }

	/* Graphs */
	#chart_div { width:430px; height:170px; }
	#chart_div2  { width:430px; height:170px; margin-top:20px; }

}

/* ==== Mobile Portrait Only for standard 320px - portrait on an iPhone, but not landscape ==== */
@media
only screen and (max-width: 479px) {

	div.calculator_form { width:auto; background:#fff; border:0px; padding:0 0 1px 0; border-radius:0px;  } /* padding-bottom needed to solve issue with Android showing bottom of results on view */
	div.calculator_form form { margin:0; max-width:100%; }
	.tabsAbove form, .spellingBoxAbove form { border-top-left-radius:0px !important; }

	.calculator, .rightpanel { display:none; }
	.output { font-size:9px;}
	.retirement-table2 { width:100%; }
	.resultheader { font-size:10px !important; }
	.note { font-size:10px; line-height:12px; }
	.retirePad td { padding:4px 2px !important; font-size:8px !important; line-height:11px !important; }

	.resultText, .resultInfo { font-size:12px; line-height:19px; }
	.resultText { width:190px; }
	.resultInfo { width:70px; }
	.resultInfoRight { width:100%; position:relative; float:none; text-align:left; border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:10px;}
	.resultInfoLeft { width:60%; }
	.converter_results { padding:0px;}

	.calculator_results label { font-size:11px; line-height:13px; width:100px; margin-right: 10px; }
	.calculator_results td { font-size:11px; line-height:13px; }
	.calculator_results .reportdata td { font-size:10px; line-height:12px; padding-left:3px; }
	.calculator_results input.calculatorInput { width:130px; padding:2px; }
	.calculator_results textarea { width:270px !important; border:none; }
	.compoundTable .reportdata td { font-size:60% !important; }
	.calctypeText { position:relative; float:none; width:auto; font-size:13px; line-height:15px; text-align:left; padding:3px; padding-left:0px; }

	.resultTable .orOption { width: 50px; }

	.spacer { width:18px; }

	/* Graphs */
	#chart_div { width:270px; height:170px; }
	#chart_div2  { width:270px; height:170px; margin-top:20px; }

}