@font-face {
    font-family: SourceSansPro;
    src: url(fonts/SourceSansPro-Regular.woff) format("woff"),url(fonts/SourceSansPro-Regular.ttf) format("truetype");
}
body {
    margin: 0;
    padding: 0;
    height: 1500px;
	font-family: SourceSansPro !important;
	color: #5a5a5a;
}

nav a img {
    vertical-align: middle;
}

nav a {
    text-transform: uppercase;
}

.styled-input{
	height: 29px;
	overflow: hidden;
	width: 240px;
	border: 1px gray solid;
	text-align: left;
}
.styled-input input{
	padding-left: 10px;
	font-size: 12px;
}
.styled-input input:focus, .styled-select select:focus {
    outline: none;
}

.styled-select {
	height: 29px;
	overflow: hidden;
	width: 240px;
	border: 1px gray solid;
    background: url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat 96% 50%;
    background-size: 8px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.round-ends {
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   border-radius: 25px;
}

.hardwarename {
    margin-left: 10px !important;
}

.smallhardwarename,
.smallcompanylogo {
    display: none;
}

.companylogo {
    float: left;
}

.hero-image-container{
	text-align: center;
	align-content: center;
}
.hero-image{
	width: 50%;
}

.calc-header {
    background-color: #0096d6;
    box-shadow: 0 1px 1px #ccc;
    padding: 20px 40px;
    height: 80px;
    color: #ffffff;
    box-sizing: border-box;
    top: -100px;

    -webkit-transition: top 0.3s;
    transition: top 0.3s;
}

.calc-header .header-content {
    text-align: center;
    margin: 0 auto;
}

/*	The header placeholder. It is displayed when the header is fixed to the top of the
	browser window, in order to prevent the content of the page from jumping up. */

.calc-header-placeholder {
    height: 80px;
    display: none;
}

/* Logo */

.calc-header .header-content h1 {
    float: left;
    font: normal 28px, Arial, Helvetica, sans-serif;
    line-height: 40px;
    margin: 0;
}

.calc-header .header-content h1 span {
    color: #62d353;
}

/* The navigation links */

.calc-header .header-content a {
    color: #ffffff;
    text-decoration: none;
}

.calc-header .header-content nav {
    font: 16px Arial, Helvetica, sans-serif;
    line-height: 40px;
    float: right;
}

.calc-header .header-content nav a {
    display: inline-block;
    padding: 0 5px;
    text-decoration: none;
    color: #ffffff;
    opacity: 0.9;
	margin-left: 10px;
}

.calc-header .header-content nav a:hover {
    opacity: 1;
}

.calc-header .header-content nav a.selected {
    color: #608bd2;
    pointer-events: none;
    opacity: 1;
}

/* Fixed version of the header */

body.fixed .calc-header {
    padding: 10px 40px;
    height: 50px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

body.fixed .calc-header-placeholder {
    display: block;
}

body.fixed .calc-header .header-content h1 {
    font-size: 24px;
    line-height: 30px;
}

body.fixed .calc-header .header-content nav {
    line-height: 28px;
    font-size: 13px;
}
.calc-header .header-content h1 {
	font-size: 1.5em;
}


/* Making the header responsive */

@media all and (max-width: 980px) {
    nav a img {
        width: 20px;
    }

    .hardwarename {
        display: none;
    }
    .smallhardwarename {
        display: block;
        margin: 0;
        font-size: 1.1em;
    }
    .smallcompanylogo {
        margin: -10px auto 10px auto;
        display: inline-block;
    }
    .companylogo {
        display: none;
    }
	img.intel-logo{
	    margin: -10px auto 10px auto !important;
	}

    .calc-header {
        height: 9em;
    }
    .calc-header .header-content nav {
        float: none;
    }

}

@media all and (max-width: 600px) {

    .calc-header {
        padding: 20px 0;
        height: 9em;
    }

    .calc-header .header-content h1 {
        float: none;
        margin: -8px 0 10px;
        text-align: center;
        font-size: 24px;
        line-height: 1;
    }

    .calc-header .header-content nav {
        line-height: 1;
        float: none;
    }

    .calc-header .header-content nav a {
        font-size: 13px;

    }

    body.fixed .calc-header {
        display: none;
    }

    nav a img,
    .companylogo {
        display: none;
    }
    .smallhardwarename {
        font-size: 1.0em;
		max-width: 90%;
		margin: 10px auto;
    }

}

}

/*
	 We are clearing the body's margin and padding, so that the header fits properly.
	 We are also adding a height to demonstrate the scrolling behavior. You can remove
	 these styles.
 */

.content {
    max-width: 1200px;
    background-color: aqua;
    margin: 40px auto;
}
.bold{
	font-weight: bold;
}
.calc-header img{
	width: 25px;
	margin-right: 5px;
}
img.companylogo, img.smallcompanylogo{
	width: 35px;
}
img.intel-logo{
	width: 40px;
	margin-top: 5px;
}
.margin-center{
	margin: 0 auto;
}
.img-banner{
	width: 100%;
	height: 125px;
	background: url("../assets/pattern.svg");
}
.header-row{
	position: relative;
	margin: 20px auto 20px auto;
	padding-bottom: 15px;
	border-bottom: solid 1px black;
}
.header-row .title-row{
	font-size: 20px;
	font-weight: bold;
	margin-right: 10px;
	margin-bottom: 0px;
}
.header-row ul{
	margin-bottom: 0px;
}
.float-left{
	float: left;
}
.calc-box{
	background-color: #F1F1F1;
	width: 95%;
	width: calc(100% - 5px);
	text-align: center;
	padding: 20px 20px 0px 20px;
	margin: 0px 0px 10px 0px;
	position: relative;
	vertical-align: top;
}
.calc-box-2{
	background-color: #EFF9FB;
}
.calc-box-contents {
	position: relative;
	padding-bottom: 10px;
	margin-top: 20px;
}
.calc-box-2.adjusted .calc-box-contents{
	top: 50%;
	transform: translateY(-50%);
	margin-top: 0px;
}
.calc-box-3.adjusted .calc-box-contents{
	margin-top: 0px;
}
.calc-box-2 td{
	text-align: left;
}

.how-margin{
	margin-top: 1rem;
}
.no-side-padding{
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.no-left-padding{
	padding-left: 0px !important;
}
.no-right-padding{
	padding-right: 0px !important;
}
.calc-box-1 p{
	width: 100%;
	max-width: 300px;
	margin: 0 auto 10px auto;
	line-height: 1.1;
}
.calc-box-2{
	text-align: left;
	/* margin: 0px auto 10px auto; */
}
.calc-button label{
	font-size: 16px;
	display: inline-block;
	width: 150px;
	width: calc(100% - 30px);
	vertical-align: middle;
	margin-bottom: 0px;
	cursor: pointer;
}
#chart{
	margin-bottom: 10px;
}
.calc-button {
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
	background-color: #E2E7E8;
	border: 0px;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
	height: 60px;
	width: 100%;
	position: relative;
}
.calc-button.selected{
	background-color: #A1DEE8;
}
.calc-button .btn-content{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 90%;
	width: calc(100% - 10px);
}
.calc-button input, .chart-option-container input{
	display: none;
}
.device-group-1.primary-group, .device-group-2.primary-group{
	display: block;
}
.compare-group{
	display: none !important;
}
.radio-div{
	height: 24px;
	width: 24px;
	border-radius: 50%;
	background-color: #D5D6D6;
	display: inline-block;
	cursor: pointer;
	margin-top: 2px;
	transition-duration: 300ms;
	vertical-align: middle
}
.calc-button .radio-div{
	text-align: center;
	color: #707070;
}
.calc-button.selected .radio-div{
	height: 24px;
	width: 24px;
	background-color: #B4F3FD;
}
.calc-button .radio-div .checkmark{
	display: none;
}
.calc-button.selected .radio-div .checkmark{
	display: block;
}
.chart-container {
	padding: 10px;
}
.chart-container a, .table-title a{
	color: #1259a1;
}
.chart-header{
	background-color: #0096d6;
	padding-bottom: 5px;	
	display: none;
	padding: 20px 0px;
}
.chart-header.active{
	display: block;
}
.chart-header p, .chart-header h3{
	color: #050505;
	margin: 0 20px;
}
.chart-header p{
	font-size: 20px;
	margin-bottom: 0px;
}	
.sub-chart-header{
	margin-bottom: 15px;
	text-align: left;
}
.chart-options{
	margin-bottom: 15px;
}
.chart-options label{
	margin-bottom: 0px;
}
.chart-options .radio-div{
	margin-top: 0px;
	transform: translateY(-2px);
}
.customize-assumptions{
	border-bottom: solid 1px black;
	margin-top: 50px;
}
.reset-button{
	margin-left: 20px;
}
.percent-field{
	text-align: right;
}
.client-button{
	background-color: #0096d6;
	color: #050505;
	border: 0px;
	padding: 3px 20px;
	border-radius: 5px;
	font-size: 12px;
	cursor: pointer;
}
.calc-accordion{
	margin-top: 0px;
	margin-bottom: 25px;
}
input.currency-field{
	border-radius: 25px;
	padding-left: 5px;
}
.accordion-row {
	background-color: #f2f2f2;
	margin-left: 20px;
	font-size: 0px;
}
.accordion-row .book-end{
	display: inline-block;
	width: 20px;
	height: 45px;
}
.accordion-row input[type="number"]{
	border-radius: 25px;
	padding: 0px 10px 0px 10px;
    width: 100px;
	display: inline-block;
}
.accordion-row .accordion-content{
	font-size: 16px;
}
.accordion-content input[type="text"], .accordion-content textarea{
	border-radius: 25px;
	padding: 0px 10px;
}
.accordion-row-1{
	background-color: #EFF9FB;
}
.accordion-row-1 .book-end{
	background-color: #A1DEE8;
}
.accordion-row-1.clicked{
	background-color: #A1DEE8;
}
.accordion-row-1 .accordion-content{
	background-color: #EFF9FB;
}
.accordion-row-1 input, .accordion-row-1 textarea{
	background-color: #EFF9FB;
}
.accordion-row-2{
	background-color: #FDF4E3;
}
.accordion-row-2 .book-end{
	background-color: #FFDB96;
}
.accordion-row-2.clicked{
	background-color: #FFDB96;
}
.accordion-row-2 .accordion-content{
	background-color: #FDF4E3;
}
.accordion-row-2 input, .accordion-row-2 textarea{
	background-color: #FDF4E3;
}
.accordion-row-3{
	background-color: #EAFADF;
}
.accordion-row-3 .book-end{
	background-color: #AAE086;
}
.accordion-row-3.clicked{
	background-color: #AAE086;
}
.accordion-row-3 .accordion-content{
	background-color: #EAFADF;
}
.accordion-row-3 input, .accordion-row-3 textarea{
	background-color: #EAFADF;
}
.accordion-row-4{
	border-bottom: solid 3px #6B3B96;
}
.accordion-row-5{
	border-bottom: solid 3px #EB4563;
}
/*
.accordion-row-1 .accordion-content{
	background-color: #6FA9B2;
}
.accordion-row-2 .accordion-content{
	background-color: #21CCD1;
}
.accordion-row-3 .accordion-content{
	background-color: #21CCD1;
}
*/
.accordion-row p{
	margin-bottom: 0px;
	display: inline-block;
}
.last-row{
	border-bottom: 0px;
}
.accordion-open{
	color: #000;
	text-decoration: none;
}
.accordion-header{
	cursor: pointer;
	padding: 10px 20px;
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	cursor: pointer;
    width: 90%;
    width: calc(100% - 40px);
}
.accordion-arrow{
	border-right: solid 1px black;
	border-bottom: solid 1px black;
	transform: rotate(-45deg);
	width: 10px;
	height: 10px;
	display: inline-block;
	margin-left: 10px;
	transition-duration: 300ms;
}
.accordion-row.clicked .accordion-arrow{
	transform: rotate(45deg) translateY(-3px);
}
.persona-type{
	border: 0px;
}
.accordion-content input[type="text"], .accordion-content textarea{
	text-align: left;
	padding-right: 2px;
}
.accordion-content input[type="text"]{
	width: 75%;
	max-width: 100px;
}
input.persona-type{
	width: 100% !important;
	max-width: 175px !important;
}
input.persona-compensation {
    width: 75% !important;
    width: calc(100% - 30px) !important;
	max-width: 100px;
}
input.u5-cost, input.u7-cost, input.u5-perc, input.u7-perc {
    width: 90% !important;
    width: calc(100% - 20px) !important;
	max-width: 100px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.workers-by-type input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
.accordion-content textarea{
	#border: solid 2px #000;
	border: none;
}
.accordion-content{
	background-color: #f2f2f2;
	display: none;
}
.workers-by-type td {
    vertical-align: top;
}
.benchmark-type{
	background-color: #DAF0CB;
}
.accordion-row-1.clicked, .accordion-row-2.clicked, .accordion-row-3.clicked {
	border-bottom: none;
}
.accordion-row.clicked .accordion-content{
	overflow: auto;
}
calc-accordion tr{
	border-bottom: solid 1px #fff;
}
td {
	padding: 10px;
	text-align: right;
	vertical-align: middle;
}
th {
	padding: 10px;
	text-align: left;
}
.section-title{
	text-align: left;
}
.table-title{
	text-align: center;
	padding: 10px;
}
.text-center{
	text-align: center;
}
input.num-desktops {
	max-width: 100%;
	border: 0px;
}
.info-btn {
	color: white;
	background-color: #0171AD;
	width: 16px;
	height: 16px;
	font-size: 11px;
	border-radius: 50%;
	font-weight: bold;
	display: inline-block;
}
.tool-tip{
	max-width: 300px;
	position: absolute;
	background-color: white;
	border: solid 1px #0171AD;
	border-radius: 5px;
	display: none;
	padding: 10px;
	z-index: 10;
}
.results-tool-tip{
	width: 90%;
	width: calc(100% - 20px);
	max-width: 800px;
	background-color: white;
	border: solid 1px #0171AD;
	border-radius: 5px;
	display: none;
	padding: 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-height: 90vh;
	z-index: 99;
	overflow: auto;
	background: #fff;
	flex-direction: column;
}
.disclaimer-tool-tip{
	display: none;
	background-color: white;
	border: solid 1px #0171AD;
	border-radius: 5px;
	padding: 10px;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
	right: 0px;
	margin: 0 auto;
	max-width: 500px;
	z-index: 99;
}
.tool-tip-save{
	text-align: center;
}
.share-tool-tip, .tool-tip-save{
	display: none;
	background-color: white;
	border: solid 1px #0171AD;
	border-radius: 5px;
	padding: 10px;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
	right: 0px;
	margin: 0 auto;
	max-width: 500px;
	z-index: 99;
}
.overlay{
	display: none;
	background-color: black;
	opacity: 0.6;
	z-index: 1;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;				
}
.disclaimer-overlay{
	display: none;
}
p.tool-tip-intro {
    margin: 15px 0px 10px;
}
.tool-tip ul{
	padding-left: 20px;
	margin-bottom: 0px;
}
.show-tool-tip{
	display: block !important;
}
.close-tool-tip .tool-tip-header {
  flex: 0 0 auto;
  position: relative;
  padding: 8px;
}

.tool-tip-header .close-tool-tip {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
}

.tool-tip-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
}
.close-tool-tip img {
	width: 15px;
}
.tool-tip-export{
	position: fixed;
	left: 0px;
	right: 0px;
	top: 50%;
	margin: 0 auto;
	transform: translateY(-50%);
	transition-duration: 300ms;
	text-align: center;
	z-index: 2;
}
.export-pdf, .export-pdf:hover, .export-pptx, .export-pptx:hover{
	cursor: pointer;
	color: black;
	text-decoration: none;
}
.share-links p{
	margin: 0px;
}
.right-currency{
	display: none;
}
.calc-button .info-btn{
	width: 10px;
	height: 10px;
	font-size: 7px;
	transform: translateY(-2px);
}
.accordion-content table{
	width: 100%;
}
.hardware-costs{
    max-width: 800px;
    margin: 0 auto;	
}
.accordion-row input, .accordion-row label{
    margin-bottom: 0px;
	vertical-align: middle;
}
.styled-select{
	display: inline-block;
	background-color: white;
	height: 25px;
	transform: translateY(2px);
}
.styled-select select {
	font-size: 12px;
	height: 25px;
	padding: 3px 5px;
}
.calc-instructions{
	margin-bottom: 0px;
}
.calc-instructions p{
	margin: 0px;
}
.calc-instructions .input-container{
	margin: 10px 0px;
}
.calc-instructions li {
	margin-bottom: 3px;
}
.device-table{
	margin-left: 20px;
}
.customize-assumptions{
	font-size: 20px;
	color: #FFFCFC;
	background-color: #033E62;
}
.customize-assumptions p{
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 10px;
}
.no-margin-bottom{
	margin-bottom: 0px !important;
}
.andor{
	margin-left: 40px;
}
.disclaimer-buttons {
	text-align: center;
}
.pdf-chart-container{
	width: 800px;
	height: 450px;
}
#pdf-chart{
	width: 100% !important;
	height: 100% !important;
}
.persona-perc {
    width: 100px;
}
.persona-perc input{
    width: calc(100% - 30px) !important;
	max-width: 100px;
}
.percent-workers td{
	text-align: left;
	position: relative;
}
.percent-workers input[type="text"], .percent-workers input[type="number"] {
	font-size: 12px;
	background-color: #FDF4E3;
	border: solid 1px #707070;
	border-radius: 25px;
	padding-right: 5px;
	margin-left: 5px;
}
.percent-workers-slider{
  width: 100%;
  position: relative;
  display: inline-block;
  font-size: 0px;
}
input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
	vertical-align: middle;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  background: #707070;
}
input[type=range]::-webkit-slider-thumb {
  border: 1px solid #707070;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #FFDB96;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #707070;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  background: #707070;
}
input[type=range]::-moz-range-thumb {
  border: 1px solid #707070;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #FFDB96;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1px;
  border: 0px;
  margin: 5px 0px;
  cursor: pointer;
  animate: 0.2s;
  background: #707070;
}
input[type=range]::-ms-thumb {
  border: 1px solid #707070;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #FFDB96;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 0px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #707070;
}
input[type=range]:focus::-ms-fill-upper {
  background: #707070;
}
.range-auto-fill {
	display: inline-block;
	height: 1px;
	width: 0px;
	cursor: pointer;
	background: #707070;
	margin-left: -1px;
	vertical-align: middle;
}
.lock {
	position: absolute;
	top: -10px;
	opacity: 0.5;
	cursor: pointer;
	width: 30px;
}
.lock.locked{
	opacity: 1;
}
.lock-1{
	left: 10%;
	left: calc(10% - 9.2px);
}
.lock-2{
	left: 45%;
	left: calc(45% - 13.4px);
}
.lock-3{
	left: 15%;
	left: calc(15% - 9.7px);
}
.lock-4{
	left: 15%;
	left: calc(15% - 9.7px);
}
.lock-5{
	left: 15%;
	left: calc(15% - 9.7px);
}
.help-button, .share-button{
	display: none !important;
}
.hc.hidden{
	display: none;
}

@media (min-width: 1800px){
	.header-row .title-row{
		font-size: 36px;
	}
	li, p, td, th, span, .calc-button label, .chart-header p, .chart-devices {
		font-size: 24px;
	}
	h3 span{
		font-size: 1.75rem;
	}
	.accordion-row input[type="number"]{
		width: 150px;
	}
	.percent-workers input[type="text"], .percent-workers input[type="number"], .client-button{
		font-size: 20px;
	}
	.accordion-row .book-end {
		display: inline-block;
		width: 20px;
		height: 60px;
	}
	.calc-button .radio-div, .calc-button.selected .radio-div {
		height: 36px;
		width: 36px;
	}
	.calc-button label {
		width: 150px;
		width: calc(100% - 50px);
	}
}
@media (min-width: 1500px){
	.header-row .title-row{
		font-size: 32px;
	}
}
@media (max-width: 1850px){
	.hero-image{
		width: 75%;
	}
}
@media (max-width: 1499px){
	.hero-image{
		width: 100%;
	}
}
@media (max-width: 1200px){
	.calc-header .header-content h1{
		font-size: 1.10em;
	}
}
@media (max-width: 900px){
	.calc-header .header-content h1{
		font-size: 1em;
	}
	.hero-image{
		width: 100%;
	}
}
@media (max-width: 767px){
	.calc-box{
		width: 100%;
	}
	.calc-box-3{
		margin: 0px 0px 10px 0px;
	}
	.styled-select select {
		width: 180px;
	}
	.styled-select {
		width: 160px;
	}
	.device-table{
		margin-left: 10px;
	}
}

@media (max-width: 500px){
	.accordion-header {
		padding: 10px;
		font-size: 14px;
	}
	.customize-assumptions {
		font-size: 16px;
	}
	.reset-button {
		margin-left: 10px;
		padding: 3px 10px;
	}
}
@media (max-width: 400px){
	.calc-button label{
		line-height: 12px;
		font-size: 12px;
	}
}