.pagecontent textarea { width: 460px; height: 200px; padding: 10px 15px; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; }
.pagecontent textarea:focus { border-radius: 4px; background-color: #f8f8f8; resize: none; }
.pagecontent input[type=button], .pagecontent input[type=submit], .pagecontent input[type=reset] { background-color: #cc3366; border: 1px solid #cc3366; color: #ffffff; padding: 6px 20px; text-decoration: none; margin: 4px 2px; cursor: pointer; }
.pagecontent input[type=button]:hover, .pagecontent input[type=submit]:hover, .pagecontent input[type=reset]:hover { background-color: #ffffff; color: #cc3366; }
.pagecontent input, .pagecontent optgroup, .pagecontent select, .pagecontent textarea { color: inherit; font: inherit; font-size: 15px; }
.button.green { border: 1px solid seagreen; background-color: seagreen; color: #FFFFFF; }
.button.blue { border: 1px solid #0066cc; background-color: #0066cc; color: #FFFFFF; }
.button.pink { border: 1px solid #cc3366; background-color: #cc3366; color: #FFFFFF; }
.button.green:hover { border: 1px solid seagreen; background-color: #FFFFFF; color: seagreen; }
.button.green { border: 1px solid seagreen; background-color: seagreen; color: #FFFFFF; }
.button.blue:hover { border: 1px solid #0066cc; background-color: #FFFFFF; color: #0066cc; }
.button.pink:hover { border: 1px solid #cc3366; background-color: #FFFFFF; color: #cc3366; }
.success { padding: 10px; color: #58C43A; border: 1px solid #58C43A; background-color: #CBFFBC; text-align: center; }
.error { padding: 10px; color: #F93B3B; border: 1px solid #F93B3B; background-color: #F7CFCF; text-align: center; }
.forecast-error { padding: 10px; color: #F93B3B; border: 1px solid #F93B3B; background-color: #F7CFCF; text-align: center; }
.missing-value { color: #000; background-color: #F7CFCF; text-align: left ;}
#entered-data {font-family: monospace;  tab-size:20;}

.table-fill{border-radius:3px;border-collapse:collapse}
th{color:#fff;background:#0066cc;border-right:1px solid #C1C3D1;padding:7px;text-align:left;vertical-align:middle}
th:first-child{border-top-left-radius:3px}
th:last-child{border-top-right-radius:3px;border-right:none}
tr{border-top:1px solid #C1C3D1;border-bottom:1px solid #C1C3D1;color:#666B85;font-size:16px;font-weight:400;text-shadow:0 1px 1px rgba(256,256,256,0.1)}
tr:first-child{border-top:none}
tr:last-child{border-bottom:none}
tr:nth-child(odd) td{background:#EBEBEB}
tr:last-child td:first-child{border-bottom-left-radius:3px}
tr:last-child td:last-child{border-bottom-right-radius:3px}
td{background:#FFF;padding:7px;vertical-align:middle;border-right:1px solid #C1C3D1}
td:last-child{border-right:0}
th.left-aligned-text{text-align:left}
th.center-aligned-text{text-align:center}
th.right-aligned-text{text-align:right}
td.left-aligned-text{text-align:left}
td.center-aligned-text{text-align:center}
td.right-aligned-text{text-align:right}
.options .button{display:inline-block;border:1px solid #373C43;text-transform:uppercase;font-size:11px;letter-spacing:1px;text-decoration:none;margin-right:20px;margin-bottom:10px; height: 30px; padding: 15px 8px 0 8px; }
.options .button:hover{border:1px solid #373C43;background-color:#373C43;color:#FFF}
.options .button:hover a{color:#FFF}
.button.cancel{border:1px solid #d43f3a;background-color:#d9534f;color:#FFF}
.button.back-step{border:1px solid dimgrey;background-color:dimgrey;color:#FFF; padding: 6px;}
.button.continue{border:1px solid #2e8b57;background-color:#2e8b57;color:#FFF}
.button.cancel:hover{border:1px solid #ac2925;background-color:#FFF;color:#c9302c}
.button.back-step:hover{border:1px solid dimgrey;background-color:#FFF;color:dimgrey}
.button.continue:hover{border:1px solid #2e8b57;background-color:#FFF;color:#2e8b57}
.error{color:#F93B3B;border:1px solid #F06060;background-color:#F7CFCF;margin-bottom:15px;width:500px}
.warning{color:#FFAF6A;border:1px solid #F0A860;background-color:rgba(255,175,106,0.2);margin-bottom:15px;width:500px}
.options.scroll,.options.start-again{float:right}
.preview-results {margin: 0 0 25px 0; }
.forecast-methods-box {width: 100%; border: 1px solid #ccc; padding: 10px; float: left;}
.forecast-methods-holder {width: 230px;  height: 215px; border: 1px solid #ccc; padding: 10px; float : left; margin: 0 12px 12px 0 ;}
.forecast-methods-text { font-size: 20px; font-weight: bold ; }
.erlang-error { padding: 10px; color: #F93B3B; border: 1px solid #F93B3B; background-color: #F7CFCF; text-align: center ;}
/*Used for Erlang Calculator SVG*/
#calls          {-webkit-animation: slidein1 0.5s linear;}
#contacts       {-webkit-animation: slidein1 0.5s linear; }
#occupancy      {-webkit-animation: slidein2 2.5s linear; }
#max-calls      {-webkit-animation: slidein2 2.5s linear;}
#serviceLevel   {-webkit-animation: slidein3 4s linear; }
#avg-agents     {-webkit-animation: slidein3 4s linear;}
#max-agents     {-webkit-animation: slidein4 5s linear;}
#agents         { -webkit-animation: slidein4 5s linear; }
@-webkit-keyframes slidein1 { from{transform: translateX(-200px);} to{transform: translateX(0px);} }
@-webkit-keyframes slidein2 { from{transform: translateX(-400px);} to{transform: translateX(0px);} }
@-webkit-keyframes slidein3 { from{transform: translateX(-600px);} to{transform: translateX(0px);} }
@-webkit-keyframes slidein4 { from{transform: translateX(-800px);} to{transform: translateX(0px);} }
/* Erlang Calculator */
.erlang-table td:last-child { border-right: 0; }
.erlang-table th.text-center { text-align: center; }
.erlang-table tbody.table-hover { border-top: 3px solid gold; border-bottom: 3px solid gold;}
.erlang-enter-data-button {float:left; padding: 7px 15px; background-color: seagreen; color: #FFFFFF; text-align: center; width: 190px; margin-right: 20px;}
.erlang-form{float:left;background:linear-gradient(#F9F9F9, #FFFFFF);font-size:16px;margin-top:20px;border:4px solid #0066CC;border-radius:10px;width:600px;}
.erlang-form input{font-size: 16px;}
.erlang-form-header{background-color:#0066CC;font-size:20px;color:#FFFFFF;text-align:center;padding:0 0 8px 0;}
.erlang-form-row{width:100%;height:42px;padding:2px 10px;float:none;clear:both;}
.erlang-form-caption{text-align:center;float:none;padding:10px 10px 14px 10px;}
.erlang-spacer{height: 10px;clear:both;}
.erlang-form-row-label{width:42%;float:left;padding:2px;}
.erlang-form-box{width:25%;text-align:center;margin-left:10px;float:left;}
.erlang-form-box input{padding: 6px;width: 100px;text-align:center;}
.erlang-form-right{margin-left:10px;width:20%;float:left;padding:6px;}
.erlang-divider-row{border-top:3px dashed #A3A3A3;padding:10px 10px 6px 0;margin:10px 20px 0 20px;clear:both;}
.erlang-results{width:580px;height:auto;font-size:18px;}
.erlang-results-caption{font-size:18px;}
.erlang-results-value {font-size:21px;}
#erlang-period-box {width: 116px; height: 37px; font-size: 16px; padding: 0 0 0 10px;}
#erlang-multiple-days {display:none;}
.erlang-form-percent{width:40%;text-align:left;margin-left:28px;float:left;}
.erlang-form-percent input{padding: 6px 12px; width: 32px;text-align:left;}
#erlang-form-total-percent{width: 38px; margin: 0 15px 10px 0; height: 20px;background-color: #CFEA93 ; float:left; border: 1px solid #ccc ; padding:6px 12px; font-weight: bold;}
.erlang-form-percent-text {padding: 6px 12px; text-align:left; font-weight: bold;}
#erlang-reporting-interval-box {width: 116px; height: 37px; font-size: 16px; padding: 0 0 0 10px;}
tr.result td { background: gold; }
tr.result:nth-child(odd) td { background: gold; }
.cch-table tr.amber_warning td {background-color:#F0A860 !important;}
.erlang-input-options {height: 72px; width: 100%; clear: both;}
.erlang-input-text{float:left; height:32px; padding: 24px 20px 0 20px; }
.erlang-enter-data {tab-size: 19;}
.erlang-upload-form-box {     background-color: #0066cc; color: #FFFFFF; text-align: center; width: 190px; float: left; margin: 10px 6px 6px 14px; padding: 24px; clear:both;  font-size: 20px; }
#percentCallsPerDay0 , #percentCallsPerDay1, #percentCallsPerDay2, #percentCallsPerDay3, #percentCallsPerDay4, #percentCallsPerDay5, #percentCallsPerDay6 {width: 63px; margin: 0 15px 10px 0; }
.svg-month-result {margin: 20px 0 0 0 ;}
.svg-title {font-size:24px; color:red; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-anchor: middle; }
.svg-call-day-label {font-size:16px; fill:#999999; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-anchor: middle; width: 80px;}
.svg-call-day-text {font-size:16px; fill:black; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-anchor: middle; width: 80px;}
.svg-month-border{ fill: #ffffff;stroke:black;stroke-width:1;opacity:0.9; width: 246px; height: 190px;}
.svg-week-border{ fill: #ffffff;stroke:black;stroke-width:1;opacity:0.9; width: 469px; height: 190px;}
.svg-weekday{ fill: #0066cc;stroke:black;stroke-width:1;opacity:0.5; width: 24px; height: 15px;}
.svg-weekend{ fill: #ff7f1f;stroke:black;stroke-width:1;opacity:0.5; width: 24px; height: 15px;}
.svg-individual-weekday{ fill:#0066cc;stroke:black;stroke-width:1;opacity:0.5; width: 55px; height: 45px;}
.svg-individual-weekend{ fill: #ff7f1f;stroke:black;stroke-width:1;opacity:0.5; width: 55px; height: 45px;}
.svg-black-equals{ fill: #000;stroke:black;stroke-width:1; width: 25px; height: 5px;}
.try-scheduler-box{border: 2px dashed #cc3366; margin: 20px 0 0 0 ; padding: 0 10px 10px 10px; max-width: 75%; }

.error-invalid{border: 1px solid red; background-color: #F7CFCF; padding: 2px 6px; }
.highlight-different-data { border: 1px solid darkorange; background-color: #F6C07D; padding: 2px 6px; font-weight: bold; }

/* Forecasting */
.buttons-row {width: 100%; height: 36px; clear: both; margin: 6px 0 12px 0 ;  font-size: 16px;  }
.upload-data-button {float:left; padding: 7px 15px; background-color: seagreen; color: #FFFFFF; text-align: center; width: 190px; margin: 0 20px 0 0;}
.example-data-button {float:left; padding: 7px 15px; background-color: #0066cc; color: #FFFFFF; text-align: center; width: 190px; margin-right: 20px;}
.go-back-button {float:left; padding: 7px 15px; background-color: #d9534f; color: #FFFFFF; text-align: center; width: 190px; margin: 0 20px 6px 0 ;}
.make-forecast-button {float:left; padding: 7px 15px; background-color: seagreen; color: #FFFFFF; text-align: center; width: 190px; margin: 0 20px 6px 0;}
.scroll-down-button {float:right; padding: 7px 15px; background-color: seagreen; color: #FFFFFF; text-align: center; width: 190px; margin: 0 20px 6px 0;}
.enter-data-button { float: left; padding: 7px 15px; background-color: #007C00; color: #FFFFFF; text-align: center; width: 190px; margin: 0 20px 6px 0;}
.example-data-button:hover {background-color: #333333;}
.enter-data-button:hover {background-color: #333333;}
.go-back-button:hover {background-color: #333333;}
.scroll-down-button:hover {background-color: #333333;}
.make-forecast-button:hover {background-color: #333333;}
.calculate input:hover {background-color: #333333;}
.calculate-data-button {float:left; padding: 7px 15px; background-color: #0066cc; color: #FFFFFF; text-align: center; width: 190px; margin-right: 20px;}

.forecast-or-text{ float:left; margin: 22px 30px 20px 20px; font-weight: bold; }
.enter-data-title{clear:left; }
.excel-mockup{font-family: 'Courier New', monospace; }
.excel-mockup tr{color: black; }
.excel-mockup th{background-color: #007C00; height:15px;  }
.excel-mockup td{background-color:white; color: black; font-weight: bold; border: solid #ddd; border-width: 0 1px 1px 0;  }
.excel-mockup  tr:nth-child(odd) td { background: #FFFFFF;  }
.excel-mockup  tr:nth-child(2) td { background: #E6E6E6;  }
.excel-mockup  tr  td:nth-child(1) { background: #E6E6E6;  }
.forecast-excel-download { margin: 0 0 0 20px; float: left; width: 100%;   }
.svg-graph-axis-title { font: 16px sans-serif; font-weight: bold; transform: translateX(80px) rotate(0deg); transform-origin: bottom; position:absolute;}
.y-axis path { fill: none; stroke: #D4D8DA; stroke-width: 2px;  shape-rendering: crispEdges; }
.contacts-line { fill: none;  stroke: #0066CC;  stroke-width: 3px; }
.forecast-line { fill: none;  stroke: #fea101;  stroke-width: 3px; }
.fitted-line   { fill: none;  stroke: #0066CC;  stroke-width: 2px; stroke-dasharray: 3; }
.tooltip-overlay { fill: none;  pointer-events: all; }
.focus circle {fill: #0066cc; stroke: #0066cc; stroke-width: 1px;  }
.hover-line-blue {stroke: #0066CC; stroke-width: 2px;  stroke-dasharray: 3,3; }
.hover-line-orange {stroke: #fea101; stroke-width: 2px;  stroke-dasharray: 3,3; }
.tooltip {fill: white;  stroke: #cccccc;  font-size: 13px;  font-family: Arial, Helvetica, sans-serif; }
.tooltip-date  { font-weight: bold;  font-size: 13px;  font-family: Arial, Helvetica, sans-serif; }
.tooltip-contacts { font-weight: bold;  font-size: 13px;  font-family: Arial, Helvetica, sans-serif; }
.tooltip-forecast { font-weight: bold;  font-size: 13px;  font-family: Arial, Helvetica, sans-serif; }
.tooltip-label { font-weight: normal;  font-size: 13px;  font-family: Arial, Helvetica, sans-serif; }
.tick line{ stroke: #cccccc; }

.show-fitted-wrapper{ float: right; margin: 10px 10px 0 0; clear: right; background: #ffe5cc; padding: 3px 10px; }
textarea {tab-size: 19;}
.forecast-method {float: left; }

.forecast-method-chosen-title {font-weight: bold; float: left; padding: 0 10px 0 0 ;}
.forecast-methods-box {width: 98%; border: 1px solid #ccc; padding: 10px; float: left;}
.forecast-methods-holder {width: 230px;  height: 215px; border: 1px solid #ccc; padding: 10px; margin: 0 0 20px 0;  float : left; margin: 0 12px 12px 0 ;}
.forecast-methods-text { font-size: 16px; font-weight: bold ; }
.forecast-methods-holder .changeGraph:hover {border:2px solid green;}
.forecast-methods-holder .changeGraph {border:2px solid #ccc;}
.forecast-methods-holder .changeGraph.active {border:2px solid green;}
.forecast-input-list{list-style-type: none;}

.forecast-graph-legend {background-color: goldenrod; font-size: 12px;}

.forecast-graph-method { float:left; width: 320px; margin: 10px 10px 0 0; padding: 3px 10px;}
.show-fitted-wrapper  {float:right; margin: 10px 10px 0 0; clear: right;  background: #ffe5cc; padding: 3px 10px;}
#showFitted{  box-shadow: 2px 2px #888888;    }

/* hide chart, table data and forecast descriptions on initial load */
.forecast-svg-wrapper, .forecast_description{display:none ; float:left;  max-width:720px; }
.table-fill { float:left;  max-width:720px; }
/* loading spinner css */
.forecast-graph-wrapper {border: 1px solid #ccc; clear: both; width:100%;  min-height:446px; margin: 0 0 12px 0; }
.loading-spinner{display:block;background: #fff url("/tools/library/images/spinner-square-updating.svg") no-repeat center center;   margin: 0 auto; }
.loading-spinner#svg-div {width: 50%; height:300px;}
.loading-spinner#forecast-table-data{width:720px;height:200px}
.forecast-description {width: 250px;  float:left; margin: 10px 0 0 0;}
#forecast-description-text {max-width: 220px;}
.table-container {width: 100%;  }

@media (min-width:1900px){
    .forecast-graph-wrapper { clear: both; width: 100%; min-height: 446px; }
}
@media (min-width:1500px) and (max-width:1899px)  {

}
@media (min-width: 1350px) and (max-width:1499px) {
    .forecast-graph-wrapper{ width: 100%px; }
    .forecast-description{ width: 100%; margin: 10px 0 0 25px;  }
    #forecast-description-text{max-width: 100%; }
}
@media (min-width:1150px) and (max-width:1349px)  {
    .forecast-graph-wrapper{ width: 100%;}
    .forecast-description{ width: 100%; margin: 10px 0 0 25px;  }
    #forecast-description-text{max-width: 100%; }
}
@media (min-width:600px) and (max-width:1149px)   {
    .forecast-svg-wrapper, .forecast_description, .table-fill {display:none ; float:left;  max-width:100%; }
    .forecast-description{ width: 100%; margin: 10px 0 0 25px;  }
    #forecast-description-text{ max-width: 95%; }
    .table-container {width: 360px ; }
    .table-container td, th {font-size:13px;  }
}
@media (min-width:100px) and (max-width:599px)    {
    .forecast-graph-wrapper{border: 2px solid orange; width: 320px;}
    #svg-input-graph{width: 320px; height: auto; }
    .forecast-description{ width: 290px; margin: 10px 0 0 25px;  }
    .show-fitted-wrapper{ margin: 10px 60px 12px 0;}
    .table-container {width: 290px ;  }
    .button{ width: 125px;  }
    .preview-results {width: 290px;  }
    .preview-results td {font-size: 13px;  }
}