.roi-it.fill-snapcomms.bg-color-alto.row {
  background: #ECEEF0;
  padding-top: 75px;
  padding-bottom: 55px;
}
.roi-it .form-group.row.question label.col-form-label.col-form-label-lg, .roi-it .row.answers .box p.title, .roi-it .form-group.row.downtime-question label.col-form-label.col-form-label-lg {
  font-size: 20px;
  font-weight: 700;
}
.roi-it .form-group.row.question label.col-form-label.col-form-label-lg span, .roi-it .row.answers .box p.description {
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  margin-top: 15px;
}
.roi-it .form-group.row.question input[type="number"] {
  max-width: 70%;
}
.roi-it .form-group.row.downtime-question input[type="text"] {
  max-width: 70%;
}
.roi-it .form-group.row.question sup, .roi-it .answers p.card-text sup {
  font-weight: 700 !important;
}
.roi-it .question .input-group.mb-3 {
  width: 70%;
}
.roi-it .answers {
  margin-top: 100px;
  margin-bottom: 60px;
}
.roi-it .answers .card {
  border-radius: 8px;
  border: 2px solid #BDBDBD;
}
.roi-it .answers .card .card-body {
  min-height: 155px;
  padding-top: 30px;
}
.roi-it .answers h5.card-title {
  color: #3E4E56;
  font-weight: 700;
}
.roi-it .answers h5.card-title span.highlight {
  color: #e46d16;
}
.roi-it .answers .card.last h5.card-title {
  color: #fff;
}
.roi-it .answers .card.last {
  border-radius: 8px;
  border: 2px solid #BDBDBD;
  background: #62737A;
  color: #fff;
}
.roi-it .answers .card.last a {
  color: #fff;
  font-weight: 700;
  opacity: 1;
}
.roi-it .answers .card.last a:hover {
  opacity: 0.8;
}
.roi-it .answers .card-footer {
  font-size: 40px;
  font-weight: 700;
  line-height: 68px;
  text-align: center;
  background: #fff;
  border-top: 1px solid #fff;
}
.roi-it .answers .card.last .card-footer {
  color: #fff;
  background: #62737A;
  border-top: 1px solid #62737A;
}
.roi-it .answers .card-footer p {
  color: #e46d16;
  font-size: 40px;
  font-weight: 700;
}
.roi-it .answers .card.last .card-footer p {
  color: #fff;
}
.roi-it .card.roi-final {
  background: #e46d16;
  border-radius: 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 60px;
  line-height: 50px;
}
.roi-it .card.roi-final p, .roi-it .card.roi-department p {
  margin: 0px;
}
.roi-it .card.roi-final p span, .roi-it .card.roi-department p span {
  float: right;
  font-size: 40px;
  font-weight: 700;
}
.roi-it .card.roi-department{
  background: #e46d16;
  border-radius: 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-top: 50px;
  line-height: 50px;
  border: none;
}
.roi-it .card.roi-department .card-body {
  min-height: 90px;
  padding-top: 20px;
}
.roi-it .bootstrap-chart {
  margin: 50px 0px;
  border-radius: 8px;
  border: 2px solid #BDBDBD;
  width:100%;
}
.roi-it .bootstrap-chart .card {
  border-radius: 0px;
  border: 0px solid #BDBDBD;
  padding: 0px;
}
.roi-it .bootstrap-chart .summary .card {
  border-radius: 8px;
  border: 3px solid #ECEEF0;
  background: #ECEEF0;
}
.roi-it .summary .card-footer {
  border-top: 0px solid #fff;
  background: #eceef0;
  text-align: center;
}
.roi-it .summary .card p.summary-sum {
  text-align: center;
  color: #e46d16;
  font-size: 40px;
  font-weight: 700;
}
.roi-it .summary .card .card-body {
  padding-bottom: 0px;
}
.roi-it .summary .card p.summary-title {
  text-align: center;
  font-size: 32px;
  color: #3E4E56;
  font-weight: 700;
  margin-bottom: 0px;
}
/*downtime accordion */
.container.downtime .accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.container.downtime button.accordion:focus, .container.downtime button.accordion.active:focus {
  outline-color: #fff;
}
.container.downtime button.accordion, .container.downtime button.accordion.active, .container.downtime button.accordion:hover {
  background: #e46d16;
  border-radius: 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 60px;
  margin-top: 60px;
  line-height: 50px;
}
.container.downtime .active, .container.downtime .accordion:hover {
  background-color: #ccc;
}
.container.downtime .accordion:after {
  content: '\002B';
  color: #fff;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.container.downtime .active:after {
  content: "\2212";
}
.container.downtime .panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.card.orange {
  background: #e16c17;
  color: #fff !important;
  border: 2px solid #e16c17 !important;
}
.card.orange .card-footer {
  background: #e16c17;
  color: #fff !important;
  border-top: 1px solid #e16c17;
}
.card.orange .card-footer p {
  color: #fff !important;
}
.card.orange h5.card-title {
  color: #fff !important;
}
/* //////////////////////// MEDIA QUERIES /////////////////////////*/
@media screen and (max-width: 992px) {
  .roi-it .form-group.row.question input[type="number"] {
    max-width: 100%;
  }
  .roi-it .question .input-group.mb-3 {
    width: 100%;
  }
  .roi-it .answers .card-footer p {
    font-size: 28px;
  }
  .roi-it .answers .card .card-body {
    min-height: 130px;
  }
  .roi-it .answers .card {
    margin-top: 30px;
  }
  .roi-it .answers .card.last {
    margin-bottom: 0px;
  }
  @media (min-width: 481px) and (max-width: 767px) {}
  /* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
  @media (min-width: 320px) and (max-width: 480px) {}