@font-face {
font-family: 'RobotoMono-Medium';
src: url('/content/dam/open-digital/spotlight-on-heart-failure/font/RobotoMono-Medium.ttf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto-Bold';
src: url('/content/dam/open-digital/spotlight-on-heart-failure/font/Roboto-Bold.ttf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@media (min-width: 768px){
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, 
    .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
    .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: right !important;
    }
}
.heart-failure-hf-calculator .primary-navigation .container{
    width: auto!important;
}
/*.heart-failure-hf-calculator {*/
/*direction: ltr;*/
/*}*/
/*.heart-failure-hf-calculator header{*/
/*display: none;*/
/*}*/
/*.heart-failure-hf-calculator footer{*/
/*display: none;*/
/*}*/
/*.heart-failure-hf-calculator .footer-reference{*/
/*display: none;*/
/*}*/
p {
    font-family: 'Cairo', sans-serif!important;
    font-size: 16px;
}
.footer .action-link{
    font-family: 'Cairo', sans-serif!important;
}
#normal-exit-ramp .disclaimertext{
    font-family: 'Cairo', sans-serif!important;
}
a.btn.btn-default.exit-ramp-cancel{
    left: unset;
}
a.btn.btn-primary.exit-ramp-continue{
    left: unset;
}
.exitRampPage .modal-footer{
    column-gap: 0.5em;
}
.modal-dialog{
    max-width: 500px;
}
.primary-navigation .nav>li:first-child{
    padding-right:0;
}
.heart-failure-hf-calculator .container {
max-width: 1390px;
width: 100%;
}
.navbar-collapse.collapse{
    justify-content: center;
}
.heart-failure-hf-calculator .component-section{
padding: 29px 10px; 
}
.hf-calculator {
background: #CE3737;
padding: 50px 63px;
color: #fff;
margin-bottom: 52px;
}
.hf-calculator h4{
font-family: 'Cairo', sans-serif;
font-size: 40px;
line-height: 51px;
text-align: left;
border-bottom: 1px solid rgba(285,285,285,1);
padding-bottom: 33px;
margin-bottom: 33px;
font-weight: 600;
}
.hf-calculator p{
font-size: 28px;
line-height: 35px;
font-weight: 500;
}

.calc-lists {
display: flex;
justify-content: space-between;
align-items: center;
border: solid #707070;
border-width: 0 1px 1px 1px;
}
.calc-lists.calc-first{
border-top-width: 1px;
}
.ss-left{
width: 284px;
}
.hype-2 img{
height: 231px;
}
.f-img img {
  height: 107px;
}
.ss-right{
width: calc(100% - 360px);
}
.switch-sec{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 51px 20px 0;
}
.switch-titile{
font-size: 25px;
line-height: 35px;
font-family: 'Cairo', sans-serif;
color: #fff;
font-weight: 500;
}
.switch-titile span.colortext{
color: #CE3737;
}
.switch-titile span.plus-num{
background-color: #CE3737;
display: inline-block;
text-align : center;
width: 37px;
height: 34px;
line-height: 34px;
margin-left: 0;
}
.switch-sec.ss1{
border-bottom: 1px solid #707070;
}
.switch {
position: relative;
display: inline-block;
width: 130px;
height: 50px;
background-color: #fff;
border-radius: 25px;
border: 1px solid #707070;
}
.optionlable{
    position: absolute;
    color: #31325D;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transition: .4s;
    transition: .4s;
    font-size: 25px;
    line-height: 35px;
    font-family: 'Cairo', sans-serif;
}
.optionlable.op-no{
  left: 28px;
}
.optionlable.op-yes{
  right: 28px;
opacity: 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}

.switchslider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: .4s;
transition: .4s;
z-index: 99;
border-radius: 25px;
}

.switchslider:before {
position: absolute;
content: "";
height: 48px;
width: 48px;
right: 1px;
bottom: 0px;
background-color: #707070;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}

input:focus + .switchslider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .switchslider:before {
-webkit-transform: translateX(-78px);
-ms-transform: translateX(-78px);
transform: translateX(-78px);
background-color: #CE3737;
}
input:checked ~ .optionlable.op-yes{
  opacity: 1;
}
input:checked ~ .optionlable.op-no{
  opacity: 0;
}

#showScore {
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #EFEFEF 21%, #DEDEDE 71%, #D9D9D9 100%) 0% 0% no-repeat padding-box;
    text-align: center;
    padding: 20px 20px 25px;
    color: #CE3737;
    font-family: 'Cairo', sans-serif;
    font-size: 25px;
    line-height: 40px;
    cursor: pointer;
    user-select: none;
    max-width: 350px;
    margin: 25px auto;
    border-radius: 30px;
    font-weight: 500;
    position: relative;
}
#showScore:after {
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    background-image: url('/content/dam/open-digital/spotlightonheartfailure-eg/en/images/desktop/pointer.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    right: 13px;
    bottom: -3px;
}
#showScore span{
color: #31325D;
font-size: 15px;
line-height: 20px;
display: block;
}

.calc-result-sec {
display: flex;
overflow: hidden;
background-color: #EEEEEE;
margin-top: 16px;
justify-content: space-between;
}

.calc-score-result {
display: flex;
width: calc(100% - 548px);
position: relative;
padding: 29px 0 17px;
}
.calc-table-heading {
width: 548px;
font-size: 28px;
line-height: 38px;
color: #fff;
padding: 29px 96px 50px 49px;
font-family: 'Cairo', sans-serif;
position: relative;
}
.calc-table-heading span{
position: relative;
}
.calc-table-heading:before{
position: absolute;
content: '';
left: -42px;
top: -2px;
right: 30px;
bottom: -2px;
background-color: #CE3737;
transform: skew(-20deg);
}

.score-col {
color: #31325D;
font-family: 'RobotoMono-Medium';
font-size: 30px;
line-height: 39px;
text-align: center;
width: 147px;
border-right: 1px solid #fff;
}
.score-col.active{
background-color: #CE3737;
color: #fff;
}
.score-col:last-child{
border-right: none;
position: relative
}
.score-col .score{
border-bottom: 1px solid #fff;
height: 56.5px;
display: flex;
justify-content: center;
align-items: center;
}
.score-col .probability{
height: 72.5px;
display: flex;
justify-content: center;
align-items: center
}
.score-col.score-col-head{
text-align: left;
font-size: 22px;
line-height: 25px;
width: 293px;
}
.score-col.score-col-head .score{
justify-content: left;
padding-left: 10px;
font-family: 'Roboto-Bold';
}
.score-col.score-col-head .probability{
justify-content: left;
font-family: 'Roboto-Bold';
}
.score-col:last-child::after {
position: absolute;
content: '';
width: 48.5px;
height: 10px;
background-color: #eeeeee;
right: 0;
top: 53px;
}
.score-col.active:last-child::after{
background-color: transparent;
}
#calcPopup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #EEEEEE 0% 0% no-repeat padding-box;
box-shadow: 0px 13px 6px #0000007B;
border: solid #FFFFFF;
border-width: 4px 7px 4px 7px;
border-radius: 94px;
width: 972px;
height: 557px;
display: none;
z-index: 9999;
}

.popup-text {
height: 283px;
background: #111124 0% 0% no-repeat padding-box;
border-radius: 94px 94px 0px 0px;
text-align: center;
font-family: 'RobotoMono-Medium';
font-size: 30px;
line-height: 39px;
color: #fff;
padding-top: 90px;
}

#patientScore {
width: 171px;
height: 171px;
background: #CE3737 0% 0% no-repeat padding-box;
border-radius: 50%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: 9px solid #111124;
font-family: 'RobotoMono-Medium';
font-size: 82px;
line-height: 108px;
color: #ffffff;
margin: auto;
margin-top: -86px;
}

#patientProbability {
text-align: center;
margin-top: 39px;
color: #31325D;
font-size: 30px;
line-height: 39px;
font-family: 'RobotoMono-Medium';
}

#percentageValue {
color: #CE3737;
}

#overlaypopup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.74);
z-index: 999;
display: none;
}
.primary-navigation .nav>li a {
    font-family: 'Cairo', sans-serif !important;
}
@media screen and (max-width: 1340px){
    .navbar-default{
        padding: 20px 0 0;
    }
}
@media screen and (max-width: 1210px){
  .calc-table-heading{
      width: 480px;
      padding: 29px 70px 50px 30px;
  }
  .calc-score-result{
      width: calc(100% - 480px);
  }
  .switch-btns {
      margin-left: 20px;
  }
  .score-col:last-child::after{
    width: 35px;
  }
}
@media screen and (max-width: 991px){
  .hf-calculator h4{
    font-size: 25px;
    line-height: 36px;
  }
  .hf-calculator p{
    font-size: 16px;
    line-height: 23px;
  }
  .hf-calculator{
    padding: 25px 31px;
  }
  .calc-lists{
      padding-right: 20px;
  }
  .ss-left{
      width: 470px;
  }
  .hype-2 img {
      height: 100%;
  }
  .f-img img{
      height: 100%;
  }
  .ss-right{
      width: 100%;
  }
  .switch-sec{
      padding: 20px 0;
  }
  .switch-titile{
      font-size: 16px;
      line-height: 23px;
  }
  .switch{
      width: 100px;
      height: 40px;
  }
  .switchslider:before{
      width: 38px;
      height: 38px;
  }
  .optionlable{
      font-size: 22px;
      line-height: 29px;
  }
  input:checked + .switchslider:before {
      -webkit-transform: translateX(-58px);
      -ms-transform: translateX(-58px);
      transform: translateX(-58px);
      background-color: #CE3737;
  }
  .optionlable.op-no {
      left: 18px;
  }
  .optionlable.op-yes{
      right: 18px;
  }
  #showScore{
      font-size: 22px;
      line-height: 30px;
      max-width: 300px;
  }
  .calc-table-heading{
      width: 35%;
  }
  .calc-table-heading{
    padding: 29px 60px 50px 20px;
  }
  .calc-score-result{
      width: 65%;
  }
  .calc-table-heading{
      font-size: 16px;
      line-height: 22px;
  }
  .score-col.score-col-head{
      font-size: 16px;
      line-height: 20px;
  }
  .score-col{
      font-size: 20px;
      line-height: 30px;
  }
  #calcPopup{
      width: 90%;
      height: 400px;
      border-radius: 50px;
  }
  .popup-text{
      font-size: 20px;
      line-height: 30px;
      height: 200px;
      padding-top: 50px;;
      border-radius: 50px 50px 0 0;
  }
  #patientScore{
      width: 100px;
      height: 100px;
      font-size: 40px;
      line-height: 70px;
      border-width: 5px;
      margin-top: -50px;
  }
  #patientProbability{
      font-size: 20px;
      line-height: 40px;
      margin-top: 30px;
  }
  .score-col:last-child::after{
    width: 20px;
  }
  #showScore:after{
      width: 30px;
      height: 30px;
      bottom: -1px;
  }
}

@media screen and (max-width: 700px){
  .hf-calculator{
      padding: 25px 20px;
  }
  .hf-calculator h4{
    font-size: 22px;
    line-height: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.calc-lists{
    flex-wrap: wrap;
    padding: 20px 20px;
}
.calc-result-sec{
    flex-wrap: wrap;
}
.calc-table-heading{
    width: 100%;
    padding: 20px;
}
.calc-table-heading:before{
    transform: none;
    left: 0;
    right: 0;
}
.calc-score-result{
    flex-wrap: wrap;
    width: 100%;
    padding: 20px;
}
.score-col .score{
    width: 50%;
}
.score-col .probability{
    width: 50%;
}
.score-col{
    display: flex;
    width: 100%;
    border-right: 0;
}
.score-col.score-col-head{
    width: 100%;
}
.score-col.score-col-head .score{
    justify-content: center;
    padding-left: 0;
    height: auto;
    padding: 10px 0;
}
.score-col.score-col-head .probability{
    justify-content: center;
    text-align: center;
    height: auto;
    padding: 10px 0;
}
.score-col .score{
    border-right: 1px solid #ffffff;
    height: auto;
}
.score-col .probability{
    border-bottom: 1px solid #ffffff;
    height: 64px;
}
.score-col:last-child .score{
    border-bottom: none;
}
.score-col:last-child .probability{
    border-bottom: none;
}
.score-col:last-child::after{
  display: none;
}
.switch-sec{
  padding-bottom: 0;
}
.switch-sec.ss1{
  padding-bottom: 20px;
}
.switch-titile span.plus-num{
  width: 25px;
  height: 25px;
  line-height: 25px;
  margin-left: 0;
}
.hype-2 img {
    height: 80px;
}
.f-img img {
  height: 50px;
}
.switch {
  width: 70px;
  height: 30px;
}
.optionlable {
  font-size: 16px;
  line-height: 22px;
}
.switchslider:before {
  width: 28px;
  height: 28px;
}
input:checked + .switchslider:before {
  -webkit-transform: translateX(-38px);
  -ms-transform: translateX(-38px);
  transform: translateX(-38px);
  background-color: #CE3737;
}
.optionlable.op-no {
  left: 14PX;
}
.optionlable.op-yes {
  right: 15px;
}
#calcPopup{
  height: 300px;
  max-width: 90%;
  width: 500px;
}
.popup-text{
  height: 150px;
}
#patientScore {
    width: 70px;
    height: 70px;
    font-size: 25px;
    line-height: 25px;
    border-width: 5px;
    margin-top: -40px;
}
#patientProbability {
  font-size: 20px;
  line-height: 30px;
  margin-top: 10px;
  padding: 10px;
}
}

@media screen and (max-width: 991px) and (orientation: landscape){
#calcPopup{
  height: 300px;
  max-width: 90%;
  width: 500px;
}
.popup-text{
  height: 150px;
}
#patientScore {
    width: 70px;
    height: 70px;
    font-size: 25px;
    line-height: 25px;
    border-width: 5px;
    margin-top: -40px;
}
#patientProbability {
  font-size: 20px;
  line-height: 30px;
  margin-top: 10px;
  padding: 10px;
}
}