/* programmatic calculator */

/* reset jquery widget styling */

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br, .ui-widget-content, .ui-widget, .ui-spinner-input {
	border-radius: 0;
	border: none;
	font-size: 14px;
	margin: 0;
}

.ui-spinner {
	width: 100%;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	background: none;
	border: 0;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: "BT Futura W01", "Helvetica Neue", Helvetica, sans-serif;
}

.ui-widget input {
	width: 100%;
}

.calc-step {
	padding-top: 10px;
}

.btn.rounded {
	border-radius: 100px;
	padding-left: 10px;
	padding-right: 22px;
}

#programmatic-calculator-wrapper {
	font-size: .9em;
}

#programmatic-calculator-wrapper input {
	padding: 2px 5px;
	border: 2px solid #ffffff;
	background-color: #f2f2f2;
	max-width: 100%;
}

#programmatic-calculator-wrapper .selector select, #programmatic-calculator-wrapper select {
	padding: 0 !important;
	border: 2px solid #ffffff;
	background-color: #f2f2f2;
	opacity: 100;
	font-family: "BT Futura W01", "Helvetica Neue", Helvetica, sans-serif;
	width: 100% !important;
	max-width: 100%;
}

#programmatic-calculator-wrapper .btn {
	padding: 0;
	width: 98%;
	text-decoration: none;
	margin-right: 3px;
	font-size: 11px;
}

#programmatic-calculator-wrapper input.total {
	background-color: #f4d668;
	text-align: right;
	cursor: not-allowed;
}

#programmatic-calculator-wrapper input.sub-total {
	text-align: right;
	background-color: #F7ECC3;
	cursor: not-allowed;
}

#programmatic-calculator-wrapper input.sub-total-publisher {
	text-align: right;
	background-color: #CAF4C1;
	cursor: not-allowed;
}


.sub-inner {
	padding-left: 15px;
}

#programmatic-calculator-wrapper p.description {
	font-size: 13px;
	margin-bottom: 3px;
	margin-top: -5px;
	/*display: none;*/ /* if using tooltips instead of listing descriptions */
}

.ad-tech-layer {
	margin-top: 10px;
}

.calculator-results .col-2x {
	padding-right: 10px;
}

#programmatic-calculator-wrapper .buffer-top-small {
	margin-top: 10px;
}

@media screen and (min-width: 1180px) {
	
	#programmatic-calculator-wrapper .col-1 {
		width: 115px;
		float: left;
		text-align: right;
	}
	
	#programmatic-calculator-wrapper .col-2 {
		width: 462px;
		float: left;
		text-align: right;
	}
	
	#programmatic-calculator-wrapper .col-2 input {
		width: 100%;
	}
	
	#programmatic-calculator-wrapper .col-2a {
		width: 140px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-2a input {
		width: 100%;
	}
	
	#programmatic-calculator-wrapper .col-2b {
		width: 320px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-2x {
		width: 340px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-2b input {
		width: 100%;
	}
	
	#programmatic-calculator-wrapper .col-2bi {
		width: 100px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-2bii {
		width: 100px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-3 {
		width: 200px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-3 input {
		width: 100%;
		text-align: right;
	}
	
	#programmatic-calculator-wrapper .col-3a {
		width: 90px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-3b {
		width: 90px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-3c {
		width: 140px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-4 {
		width: 20px;
		float: left;
	}
	
	/* but, for step 1, the first column needs to be indented more because the text labels are too long */
	
	#calculator-media-plan .col-1 {
		width: 165px;
		font-size: 12px;
		padding-right: 4px;
	}
	
	#calculator-media-plan .col-2b {
		width: 271px;
	}
	
	/* shorten the 2b (budget) column if we're showing sub rows with percentages */
	/*#calculator-media-plan .initial-sub-totals .col-2b {
		width: 180px;
	}*/
	
	#calculator-media-plan .initial-sub-totals .col-2bi {
		width: 90px;
	}
	
}

@media screen and (min-width: 760px) and (max-width: 1179px) {
	
	#programmatic-calculator-wrapper .col-1 {
		width: 85px;
		float: left;
		text-align: right;
	}
	
	#programmatic-calculator-wrapper .col-2 {
		width: 462px;
		float: left;
		text-align: right;
	}
	
	#programmatic-calculator-wrapper .col-2 input {
		width: 100%;
	}
	
	#programmatic-calculator-wrapper .col-2a {
		width: 130px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-2a input {
		width: 100%;
	}
	
	#programmatic-calculator-wrapper .col-2b {
		width: 310px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-2x {
		width: 290px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-2b input {
		width: 100%;
	}
	
	#programmatic-calculator-wrapper .col-2bi {
		width: 100px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-2bii {
		width: 80px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-3 {
		width: 200px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-3 input {
		width: 100%;
		text-align: right;
	}
	
	#programmatic-calculator-wrapper .col-3a {
		width: 70px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-3b {
		width: 70px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-3c {
		width: 110px;
		float: left;
	}
	
	#programmatic-calculator-wrapper .col-4 {
		width: 20px;
		float: left;
	}
	
	/* but, for step 1, the first column needs to be indented more because the text labels are too long */
	
	#calculator-media-plan .col-1 {
		width: 85px;
		font-size: 12px;
		padding-right: 4px;
	}
	
	#calculator-media-plan .col-2b {
		width: 231px;
	}
	
	/*#calculator-media-plan .initial-sub-totals .col-2b {
		width: 180px;
	}*/
	
	#calculator-media-plan .initial-sub-totals .col-2bi {
		width: 90px;
	}
	
}

@media screen and (max-width: 759px) {
	
	.channel .col-1 {
		font-weight: bold;
	}
	
	.gutter {
		margin-left: 0;
		margin-right: 0;
	}
	
	.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br, .ui-widget-content, .ui-widget, .ui-spinner-input {
		font-size: 16px;
	}
	
	.col-4 {
		float: right;
		width: 20px;
		margin-right: 5px;
	}
	
	#calculator-media-plan .row, #calculator-ad-tech .row {
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc;
	}
	
	#calculator-media-plan .col-2a .ui-spinner {
		width: 175px;
	}
	
	#calculator-media-plan .col-2b .ui-spinner {
		width: 227px;
	}
	
	#calculator-media-plan .col-3 input {
		width: 133px;
	}
	
	#media-plan-total .col-2a span, #media-plan-total .col-2b span, #media-plan-total .col-3 span,
	.sub-channel-row .col-2bii span, .sub-channel-row .col-3a span, .sub-channel-row .col-3b span, .sub-channel-row .col-3c span,
	.layer-total-row .col-3a span, .layer-total-row .col-3b span, .layer-total-row .col-3c span {
		width: 138px;
		display: inline-block;
	}
	
	#media-plan-total .col-2a input, #media-plan-total .col-2b input,	#media-plan-total .col-3 input, .layer-total-row input {
		width: 142px;
	}
	
	#calculator-results span.mobile-only {
		width: 98px;
		display: inline-block;
	}
	
	#calculator-results input {
		width: 170px;
	}
	
	.sub-channel-row .col-2a {
		font-weight: bold;
	}
	
}

@media screen and (min-width: 400px) and (max-width: 759px) {
	
}

.ruled-header {
	margin-top: 20px; 
	border-bottom: 2px solid #000000;
}

#programmatic-calculator-wrapper h1 {
	font-size: 22px;
}

#programmatic-calculator-wrapper h2 {
	display: inline;
	margin-left: 5px;
	font-size: 18px;
}

#calculator-ad-tech p {
	margin-top: 0;
	margin-left: 18px;
}

.sub-total-row {
	display: none; /* because we decided not to show totals within step 1 */
}

.toaster {
	background-color: #eee;
	color: #000000;
	position: fixed;
	right: -400px;
	bottom: 0;
	width: 400px;
	z-index: 9999;
}

.toaster .content {
	padding: 20px;
}

.prog-calc-notes {
	 font-size: 90%;
}

.prog-calc-notes ul {
	padding-left: 2em;
}

/**
 * Adjustments for new UI (new IAB site launch).
 */
#programmatic-calculator-wrapper .iabicon-arrow-in-circle-right {
  display: none;
}

#programmatic-calculator-wrapper .col-1,
#programmatic-calculator-wrapper .col-2a,
#programmatic-calculator-wrapper .col-2b,
#programmatic-calculator-wrapper .col-2x,
#programmatic-calculator-wrapper .col-2bi,
#programmatic-calculator-wrapper .col-2bii,
#programmatic-calculator-wrapper .col-3,
#programmatic-calculator-wrapper .col-3a,
#programmatic-calculator-wrapper .col-3b,
#programmatic-calculator-wrapper .col-3c,
#programmatic-calculator-wrapper .col-3d,
#programmatic-calculator-wrapper .col-4 {
  padding-right: 15px;
}

#programmatic-calculator-wrapper input[type=text] {
  padding-top: 5px;
  padding-bottom: 5px;
}