body {
  background-color: grey;
  /* font-family: 'Source Sans Pro' !important; */
  font-family: 'Roboto', sans-serif !important;
  overflow-x:hidden;
  background: #E5E5E5 !important;
  
}

.menu-area{background: #393F44}
.mainmenu #register-button a{ padding:0 !important;}
.dropdown-menu{padding:0;margin:0;border:0 solid transition!important;border:0 solid rgba(0,0,0,.15);border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{
  color:#fff;
  font-size:14px;
  text-transform:capitalize;
  padding:12px 7px;
  display: block !important;
  font-family: 'Open Sans', sans-serif !important;
} 

a{

  cursor: pointer;
}

.navbar-nav{
  margin:0 auto;
  list-style:none;
  }

.navbar-nav li{
  float: left;
}

.navbar-nav .nav-link{
  display:block;
  text-align:center;
  width:150px; /* fixed width */
  text-decoration:none; 
} 

.mainmenu a{text-decoration:none !important;}
.navbar-expand-lg{padding-top:0 !important; padding-bottom:0 !important; padding-left:8% !important; padding-right:8% !important;}


.mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{background:grey;}

/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
@media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover> ul{display:block}
.mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}
.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul ul li{position:relative}
.mainmenu .collapse ul ul ul li:hover ul{display:block}
.mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}


}

.image-container{
  position: relative;
}

.top-image-div{
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.image-text-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  
 }

.image-text-block div{
  color: white;
  font-size: 50px;
  font-weight: bold;
}

section{
  background-color: #E5E5E5;
}

.vl {
  border-left: 3px solid #E5E5E5;
  height: auto;
}

.report-frame
{
  height: calc(1 * 55vw); /* 16:9 aspect ratio */
  width:  100%;
}

@media only screen and (max-width: 575px) {
  .report-frame {
      height: calc(0.5625 * 100vw); 
  }
}



.top-desc-container{
   text-align: center;
   color: #67707D;
   padding-top: 2rem;
   padding-bottom: 2rem;
   }

   .top-desc-container-2{
    text-align: center;
    color: #67707D;
    padding-top: 2rem;
    padding-bottom: 5px;
    }

#vision-statement{
   font-size: 22px; 
   font-weight: bold;
   margin-bottom: 1rem;
   color: #67707D;
}

#vision-desc{
  font-size: 17px; 
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #67707D;
}

 /*************************************************************/
  /* footer */
  .site-footer
  {
    background-color:#67707D;
    padding:20px 0 10px;
    font-size:14px;
    margin-top: 0px;
    font-family: 'Roboto';
    line-height:24px;
    color:#737373;
  }
  .site-footer hr
  {
    border-top-color:#bbb;
    opacity:0.5
  }
  .site-footer hr.small
  {
    margin:20px 0
  }
  .site-footer h6
  {
    color:#fff;
    font-size: 20px;
    font-weight: bold;
    text-transform:uppercase;
    margin-top:5px;
    letter-spacing:2px
  }
  .site-footer a
  {
    color:#737373;
  }
  .site-footer a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links
  {
    padding-left:0;
    list-style:none
  }
  .footer-links li
  {
    display:block
  }
  .footer-links a
  {
    color:#fff
  }
  .footer-links a:active,.footer-links a:focus,.footer-links a:hover
  {
    color:#fff;
    text-decoration:none;
  }
  .footer-links.inline li
  {
    display:inline-block
  }
  .site-footer .social-icons
  {
    text-align:left
  }
  .site-footer .social-icons a
  {
    width:30px;
    height:30px;
    line-height:25px;
    margin-left:0px;
    margin-right:5px;
    border-radius:100%;
    background-color:#fff
  }
  .copyright-text
  {
    margin:2px;
    color:white;
    font-size: 12px; 
    text-align: right;
    border-top: 1px solid white;
  }
  
  .copyright-text a
  {
    
    color:white;
    
  }
  
  @media (max-width:991px)
  {
    .site-footer [class^=col-]
    {
      margin-bottom:30px
    }
  }
  @media (max-width:767px)
  {
    .site-footer
    {
      padding-bottom:0
    }
    .site-footer .copyright-text,.site-footer .social-icons
    {
      text-align:center
    }

    
  }

  
  .social-icons
  {
    padding-left:0;
    margin-bottom:0;
    list-style:none
  }
  .social-icons li
  {
    display:inline-block;
    margin-bottom:4px
  }
  .social-icons li.title
  {
    margin-right:15px;
    text-transform:uppercase;
    color:#96a2b2;
    font-weight:700;
    font-size:13px
  }
  .social-icons a{
    background-color:#eceeef;
    color:#818a91;
    font-size:16px;
    display:inline-block;
    line-height:44px;
    width:44px;
    height:44px;
    text-align:center;
    margin-right:8px;
    border-radius:100%;
    -webkit-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear
  }
  .social-icons a:active,.social-icons a:focus,.social-icons a:hover
  {
    color:#fff;
    background-color:none
    
  }
  .social-icons.size-sm a
  {
    line-height:34px;
    height:34px;
    width:34px;
    font-size:14px
  }
  
  @media (max-width:767px)
  {
    .social-icons li.title
    {
      display:block;
      margin-right:0;
      font-weight:600
    }
  }

/*********************************************************************/
.investment-advice-form-container{
  background-color : white;
  padding-top : 4rem;
  padding-bottom : 1rem;
  padding-left : 8rem;
  padding-right : 8rem;
  margin-top : 0rem;
  margin-bottom : 0rem;
  color : #67707D;
}

#investment-advice-title{
  font-size : 34px;
  font-weight: bold;
  line-height: 1.4;
}

#investment-advice-desc{
  font-size: 18px;
  margin-top: 1.25rem;
}

.form .form-group input, .form .form-group select{
   background-color: #B3B8C2;
   color: #67707D;
   border-radius: 8px;
   border-color: transparent;
   font-size: 15.5px;
   padding-left: 1.25rem;
}

.form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px;
  border-color: transparent;
  border-radius: 2px;
  margin-right: 2rem;
  /* padding: 1rem;
  padding-right: 4rem; */
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
}
#submit-button{
  border-color: transparent;
  font-size: 15px;
  background-color: #67707D;
  color: white;
  border-radius: 8px;
  padding-left: 4rem;
  padding-right: 4rem;
}



#submit-buttonForm{
  border-color: transparent;
  font-size: 15px;
  background-color: #67707D;
  color: white;
  border-radius: 8px;
  padding-left: 4rem;
  padding-right: 4rem;
}

/**********************************************************************************/
.main-container{
  min-height: 3rem;
  background-color: white;
  margin-left : 8rem;
  margin-right : 8rem;
  box-shadow: 0px 4px 16px 8px rgba(0, 0, 0, 0.06);
  border-radius: 20px !important;
  padding: 2rem;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
  position: relative;
}



.card-title{
  font-size: 18px; 
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #67707D;
  opacity: 0.95;
}

.investor-type-card{
  background-color: #F3F3F3 !important;
  border-radius: 8.04766px !important;
  border-color: transparent !important;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  cursor: pointer;
}


.right-side-card{
  background-color: #F3F3F3 !important;
  border-radius: 8.04766px !important;
  border-color: transparent !important;
  padding: 0.5rem;
  min-height: 11rem;
}

.right-card-text{
  font-size: 13px;
  color: #67707D;
 }

.next-btn{
  width: 100%;
  margin-top: 1rem;
  border-color: transparent;
  font-size: 15px;
  background-color: #67707D;
  color: white;
  border-radius: 8px;
  padding-left: 4rem;
  padding-right: 4rem;
}

.p_message
{
  width: 100%;
  text-align:center;
}

/*********************************************************************************/
.back-button{
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #67707D;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.question-container{
  font-family: 'Roboto', sans-serif !important;
}
.questions-card{
    border: 1.5px solid #67707D !important;
    border-radius: 12px !important;
    padding:1rem 1.5rem 1rem 1.5rem;
    margin-bottom: 0.9rem;
    color:  #67707D;
}
.question-div{
    font-weight: 600;
    font-size: 15px;
    display:inline-block;
    margin-right: 1.25rem;
}
.expand-icon{
    font-weight: 600;
    display:inline-block;
    float:right;
    cursor:pointer;
    width: 20px;
    height: 20px;
}
.option-card{
  display: inline-block;
  font-size: 13px;
  padding: 0.4rem 0.5rem 0rem 0.5rem;
  border-radius: 20px;
  background-color: #F3F3F3;
  margin-right: 0.5rem;
  margin-bottom: 0.75rem;
  color: #67707D;
  cursor: pointer; /* added on 18-02-2022*/
}

.option-card-lg{
  font-size: 14px;
  padding: 0.4rem 0.5rem 0rem 0.5rem;;
  border-radius: 25px;
  margin-bottom: 1.15rem;
}

.selected-option{
  background-color: #C7C7C9 !important;
}


#progress-bar-container{
  /*position: absolute; */
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.progress{
  background-color: white !important;
  height: 0.85rem !important;
  border-radius: 0 !important;
  justify-content: center;
  font-size: .65rem !important;
}

.progress-bar{
  background-color: #E7E5E5 !important;
  margin-right: 0.2rem;
  width: 1.75rem;
}



.step-done{
  background-color: #67707D !important;
}
/**********************************************************************************/
.form-check{
  margin-bottom: 1.5rem;
  
}
.form-check-input{
  width: 25px;
  height: 18px;
  margin-top: 0.25rem;
  margin-right: 3rem;
  accent-color: #67707D;
}

 input[type="radio"] 
{
  cursor: pointer;
}

.form-check-label{
  color: #67707D;
  margin-left: 2rem;
  font-size: 17px;
  cursor: pointer;
}
/***************************************************************************************/
.range-slider-card{
  background-color: #F3F3F3;
  border-radius: 12px !important;
  border-color: transparent !important;
  padding:4rem 1.5rem 2.5rem 1.5rem;
  margin-top: 2rem;
  color:  #67707D;
}

input[type="range"] {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
#steplist {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: -5px;
  padding-top: 0px;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider-option {
  width: 2ex;
  display: flex;
  justify-content: center;
  height: 42px;
  align-items: end;
  background-image: url(assets/slider_tick.svg);
  height: 4ex;
  background-position-y: -15px;
  background-position-x: center;
  font-size: 13px;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #67707D;
  cursor: pointer;
  border-radius: 50px;
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #67707D;
  cursor: pointer;
  border-radius: 50px;
}

#range-tooltip-list{
  /* display: flex; */
  width: 100%;
  justify-content: space-between;
  margin-top: -5px;
  padding-top: 0px;
  display: none;
}

 .range-tooltip{
    width: 80px;
    height: 80px;
    border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
    border-color: green;
    border: 2px solid green;
    margin-top: 30px;
    background: white;
    transform: rotate(-225deg);
    visibility: hidden;
  }

.range-tooltip div{
  transform: rotate(-135deg);
  margin-right: -0.75rem;
  margin-left: 0.5rem;
  margin-top: 1.2rem;
  font-size: 8.5px;
  line-height: 1;
  text-align: center;
  width: 80%;
  font-weight: bold;
  color:black;
}

.range-tooltip span{
  font-size: 8px;
}
/***************************************************************************************************************/
.life-cycle-card{
 
  color: #67707D;
  box-shadow: 0px 0px 6px rgba(0.37254902720451355, 0.5843137502670288, 0.5921568870544434, 0.07000000029802322);
}
.right-card-title{
  font-size: 13px;
  font-weight: bold;
}
.chart-wrapper{
  margin-top: 1rem;
}



.innerHeadingSection
{
  text-align: center;
  width: 100%;
  margin-bottom: 1.5rem;
  color: #67707D;
}

.line-container {
  display: flex;
  width: 100%;
  margin: 20px auto;
  align-items: center;
  font-size: 9px;
  margin-top: 0;
}

.line {
  flex-grow: 1;
  height: 1px;
  background: #3090C7;
  position: relative;
}

.line.arrow-right:after {
  position: absolute;
  content: '';
  bottom: -5px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #3090C7;
}

.line.arrow-left:after {
  position: absolute;
  content: '';
  top: -5px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #3090C7;
}

/*******************************************************************************************************/

@media (min-width: 200px) { 
  .image-text-block div{
      font-size: 17px;
  }
  .main-container{
      margin-right: 0.75rem;
      margin-left: 0.75rem;
  }
  .investment-advice-form-container{
      padding-right: 2rem;
      padding-left: 2rem;
  }
  .investor-type-card{
    margin-bottom: 1.5rem;
    text-align: center;
  }
  #investment-advice-title{
    text-align: center;
  }
  #investment-advice-desc{
    text-align: center;
    margin-bottom: 3rem;
  }
  .footer-div{
    padding-left: 2rem;
  }
  .footer-menu-group{
    margin-bottom: 2.5rem;
  }
  .footer-menu-group .footer-menu-title{
     margin-bottom: 0.5rem;
  }
  .copyright-div{
    font-size: 16px;
  }
  .top-desc-container{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .form-check-label {
    font-size: 15px;
  }
  .life-cycle-card{
    margin-top: 2rem;
  }
  .option-card-lg{
    font-size: 13px;
    padding: 0.4rem 0.5rem 0rem 0.5rem;
   }

  
}

.lifeCycleState
   {
     display: block;
   }

   .section10Radio
{
  display: none;
}

@media (max-width: 767px) {
  .lifeCycleState
   {
     display: none;
   }

   .section10Slider
   {
     display: none;
   }
  
   
   .exp-pdf-btn
   {
    /* visibility: hidden; */
   }


   .section10Radio
   {
     display: block;
   }

  

   
   
}


.tools a{

  cursor: pointer;
  padding-right: 5px;

}

  

  
   


@media (min-width: 300px) { 
  .image-text-block div{
      font-size: 20px;
  }
}

@media (min-width: 400px) { 
.option-card-lg{
  font-size: 14px;
  padding: 0.4rem 0.5rem 0rem 0.5rem;
 }
}

@media (min-width: 420px) { 
  .option-card-lg{
    font-size: 14px;
    padding:0.4rem 0.5rem 0rem 0.5rem;
  }
}

@media (min-width: 500px) { 
  .image-text-block div{
    font-size: 30px;
   }
   .copyright-div{
    font-size: 20px;
  }
}   

@media (min-width: 768px) { 
  .image-text-block div{
    font-size: 50px;
   }
  .main-container{
      margin-right: 3rem;
      margin-left: 3rem;
  }
  .investment-advice-form-container{
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .investor-type-card .card-title{
    font-size: 15px;
  }
  .investor-type-card img{
    width: 30px !important;
  }
  #investment-advice-title{
    text-align: left;
  }
  #investment-advice-desc{
    text-align: left;
    margin-bottom: 0;
  }
  .footer-div{
    padding-left: 3rem;
  }
  .top-desc-container{
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .life-cycle-card{
    margin-top: 0;
  }
}

@media (min-width: 1024px) { 
.form-check-label {
  font-size: 17px;
}
}

@media (min-width: 1300px) { 
  .main-container{
      margin-right: 8rem;
      margin-left: 8rem;
      font-size: 14px;
  }
  .investment-advice-form-container{
    padding-right: 8rem;
    padding-left: 8rem;
  }
  .footer-div{
    padding-left: 8rem;
  }
  .investor-type-card .card-title{
    font-size: 16px;
  }
  .investor-type-card img{
    width: 45px !important;
  }
  .top-desc-container{
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1400px) { 
  .investor-type-card .card-title{
    font-size: 18px;
  }
}


/***** for showing all the cards on a single page  *******/

/*Hide all except first card*/
.main-container:not(:first-of-type) {
	display: none;
}

/*for testing*/
/* .main-container:not(:last-of-type) {
	display: none;
} */

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/***********************************************/
.ps-tag{
  cursor: pointer;
  opacity: 0.3;
}

.ps-tag-hidden{
  display: none !important;
  color: green;
}

/* for slider bubble */
 .range-slider-container{
  padding-top: 100px;
  margin: 0 auto;
 }

.range-control {
  position: relative;
}

output {
  position: absolute;
  top: -35px;
  display: none !important;
  width: 45px;
  height: 30px;
  border: 2px solid #64e764;
  background-color: #fff;
  border-radius: 50px;
  color: #777;
  font-size: .8em;
  line-height: 24px;
  text-align: center;
}

#range-slider:active + output {
  display: block !important;
  transform: translateX(-50%);
}

/**************************************************/
/*added on 21-02-2022*/
.range-specifier-container{
  padding: 1rem;
  padding-bottom: 0.1rem;
  background-color: #C4C4C4;
  border-radius: 8px;
  border-color: transparent;
}

.risk-range-wrapper .line-container {
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 9px;
}

.risk-range-wrapper .line {
  flex-grow: 1;
  height: 1px;
  background: #67707D;
  position: relative;
}

.risk-range-wrapper .line-container span{
  font-size: 15px;
  color: #67707D;
  font-weight: 600;
}

.risk-range-wrapper .line.arrow-right:after {
  position: absolute;
  content: '';
  bottom: -5px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #67707D;
}

.risk-range-wrapper .line.arrow-left:after {
  position: absolute;
  content: '';
  top: -5px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #67707D;
}
.preference-wrapper{
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}


.preference-wrapper datalist option{
 color: #67707D;
 font-size: 13px;
 font-weight: 600; 
}

/* .preference-slider .slider::-webkit-slider-thumb {
  background: #d3d3d3;
}
.preference-slider .slider::-moz-range-thumb {
   background: #d3d3d3;
} */

.slider-option-tick:before{
  content: url(assets/slider_tick.svg);
  display: flex;
  justify-content: center;
  height: 20px;
  margin-top: -7px;
  transform: scale(1);
}

/******************************************************************/

.ps-checkbox, .ps-radio{
  opacity:0;
  position:fixed;
}

.ps-checkbox:checked + label .option-card{
  background-color: #C7C7C9 !important;
}

.ps-checkbox:checked + label .option-card .fa-check{
  display: inline-block !important;
}

.ps-radio:checked + label .ps-tag{
  opacity: 1 !important;
}

.ps-options-wrapper{
  display: inline-block;
}
.investorType input[type="radio"] {
	 display: none;
   
}

.investorType_label {
	 height: 100%;
	 display: block;
   background: #F3F3F3;
	 border-radius: 10px;
	 padding: 1rem;
	 margin-bottom: 1rem;
	 text-align: center;
	 box-shadow: 0px 3px 10px -2px rgba(161, 170, 166, 0.5);
	 position: relative;
   width: 100%;
   cursor: pointer;
}

.investorType_label:hover {
  height: 100%;
  display: block;
  background: #B3B8C2;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  box-shadow: 0px 3px 10px -2px rgba(161, 170, 166, 0.5);
  position: relative;
  width: 100%;
  cursor: pointer;
}

.investorType input[type="radio"]:checked + label {
	 background: #F3F3F3;
	 color: rgba(255, 255, 255, 1);
	 box-shadow: 0px 0px 20px #67707D;
   border: 1px solid #67707D;
}
.investorType input[type="radio"]:checked + label::after {
  border: 1px solid #67707D;
	 color: rgba(61, 63, 67, 1);
	 font-family: FontAwesome;
	 content: "\f00c";
	 font-size: 24px;
	 position: absolute;
	 top: -25px;
	 left: 50%;
	 transform: translateX(-50%);
	 height: 50px;
	 width: 50px;
	 line-height: 50px;
	 text-align: center;
	 border-radius: 50%;
	 background: white;
	 box-shadow: 0px 0px 20px #67707D;
}

/******************************************************/
/*added on 23-02-2022*/
.range-specifier-container{
  padding: 1rem;
  padding-bottom: 0.1rem;
  background-color: #C4C4C4;
  border-radius: 8px;
  border-color: transparent;
}

.risk-range-wrapper .line-container {
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 9px;
}

.risk-range-wrapper .line {
  flex-grow: 1;
  height: 1px;
  background: #67707D;
  position: relative;
}

.risk-range-wrapper .line-container span{
  font-size: 15px;
  color: #67707D;
  font-weight: 600;
}

.risk-range-wrapper .line.arrow-right:after {
  position: absolute;
  content: '';
  bottom: -5px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #67707D;
}

.risk-range-wrapper .line.arrow-left:after {
  position: absolute;
  content: '';
  top: -5px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #67707D;
}
.preference-wrapper{
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}


.preference-wrapper datalist option{
 color: #67707D;
 font-size: 10.5px;
 font-weight: 600; 
}

/* .preference-slider .slider::-webkit-slider-thumb {
  background: #d3d3d3;
}
.preference-slider .slider::-moz-range-thumb {
   background: #d3d3d3;
} */

.slider-option-tick:before{
  content: url(assets/slider_tick.svg);
  display: flex;
  justify-content: center;
  height: 20px;
  margin-top: -4px;
  transform: scale(1);
}

.icon-action {
  margin-top: 5px;
  float: right;
  font-size: 80%;
}

.list-group-item .title {
  margin-top: 5px;
  margin-bottom: 12px;
  font-weight: 600;
}

.collapse_title {
  cursor: pointer;
}

.MuiSlider-markLabel
{font-size: 12px !important;}

/* bio data modal (modified on 28-02-2022) */

#biodata-modal .modal-dialog{
  max-width: 600px !important;
}

#biodata-modal .modal-content{
  border-color: transparent !important;
  background-color: #E6E6E6 !important;
  border-radius: 15px !important;
  opacity: 0.9;
}

#biodata-modal .modal-content .modal-body{
  /* padding: 2.5rem 3.5rem !important; */
}

#TanC-modal .modal-dialog{
  max-width: 100% !important;
}

#TanC-modal .modal-content{
  border-color: transparent !important;
  background-color: #E6E6E6 !important;
  border-radius: 15px !important;
  opacity: 0.9;
  font-size: 10px;
}

#TanC-modal .modal-content .modal-body{
  /* padding: 2.5rem 3.5rem !important; */
}

.modal-body
{
  padding: 0rem 1rem !important;
}

.modal-header
{
  padding:1rem 0rem 0rem 0rem  !important;
}

 .modal-heading{
  color: #67707D;
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 0rem;
  text-align: center;
}

#biodata-modal .modal-content .form-group select, #biodata-modal .modal-content .form-group input{
  background-color: white !important;
}

#biodata-modal .modal-content .modal-footer{
  border-top: none !important;
}

[type="date"] {
  background:#fff url(assets/calender.svg)  97% 50% no-repeat ;
  color: #67707D;
  border-radius: 8px;
  border-color: transparent;
  font-size: 15.5px;
  padding-left: 1.25rem;
}

[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.modal-next-btn{
  width: 100% !important;
}
.modal-back-btn{
  background-color: white !important;
  color: #67707D !important;
  width: 100% !important;
}
.fade{
  
  opacity: 0;
  transition: all .2s linear;
  display: block !important;
}

.fade2.show{
  opacity: 1;
  transform: scale(1);
}
/*********************************************************/

/*** modified on 02-03-2022 ***/

.donut-chart-wrapper{
  text-align: center;
}
.risk-assessment-div{
  background-image: url('/assets/watar_logo_background.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
  margin-top: 2rem;
}
#risk-assessment-heading{
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #67707D;
}
.risk-assessment-level{
  display: inline-block;
  width: 100%;
  background: #E3E3E3;
  color: #FF7F50;
  font-size: 38px;
  text-align: center;
  font-weight: bolder;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 10px;
  margin-top: 1rem;
}
.risk-calculation-btn{
  display: inline-block !important;
  width: 80% !important;
  background: #67707D !important;
  color: white !important;
  font-size: 15px !important;
  text-align: center !important;
  font-weight: bold !important;
  border-radius: 10px !important;
  margin-top: 3rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.optimize-portfolio-div{
  color: #066BFE;
  font-size: 20px;
  font-weight: 600;
  margin-top: 4rem;
  border-bottom: 2px solid #066BFE;
  display: inline-block;
  line-height: 0.9em;
}
.risk-assessment-table-wrapper{
  border-radius: 11.041px !important;
  border-color: transparent !important;
}
.risk-assessment-table-wrapper .table{
  border-collapse: separate;
  border-spacing: 0 5px;
  font-size: 14px;
}
.borderless td, .borderless th {
  border: none;
}

.risk-assessment-table-wrapper .table thead th {
  border-color: transparent;
}

.risk-assessment-table-wrapper .table tr {
  background: #E3E3E3;
  border-radius: 2.7439px;
}

.risk-assessment-table-wrapper .table tr:first-child td:first-child, .risk-assessment-table-wrapper .table tr:first-child th:first-child { border-top-left-radius: 0px; }
.risk-assessment-table-wrapper .table tr:first-child td:last-child, .risk-assessment-table-wrapper .table tr:first-child th:last-child { border-top-right-radius: 0px; }
.risk-assessment-table-wrapper .table tr:last-child td:first-child, .risk-assessment-table-wrapper .table tr:last-child th:first-child  { border-bottom-left-radius: 0px; }
.risk-assessment-table-wrapper .table tr:last-child td:last-child, .risk-assessment-table-wrapper .table tr:last-child th:last-child  { border-bottom-right-radius: 0px; }

.modal-back-btn{
  margin-top: 0;
}
@media (min-width: 200px) { 
  .optimize-portfolio-div{
      font-size: 12px;
  }
  .risk-assessment-div{
    background-image: url('/assets/watar_logo_background.svg');
      text-align: center;
  }
}
@media (min-width: 200px) { 
  .optimize-portfolio-div{
      font-size: 13px;
  }
}
@media (min-width: 500px) { 
  .optimize-portfolio-div{
      font-size: 20px;
  }
}
@media (min-width: 768px) { 
  .optimize-portfolio-div{
      font-size: 16px;
  }
  .risk-assessment-div{
    background-image: url('/assets/watar_logo_background.svg');
    text-align: center;
}
}
@media (min-width: 888px) { 
  .optimize-portfolio-div{
      font-size: 20px;
  }
}
/**********************************************************/
/* modified at 08-03-2022 */
.risk-assessment-tabs .nav-link{
  /* margin-top: -0.5rem !important; */
  color: #67707D;
  font-size: 16px;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-right: 1.25rem !important;
  padding-left: 1.25rem !important;
}

/* .risk-assessment-tabs .nav-item{
  margin-top: -0.5rem !important;
} */
.risk-assessment-tabs .line.arrow-left:after {
  position: absolute;
  content: '';
  top: -5px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #CAC3C3;
}

.risk-assessment-tabs .line.arrow-right:after {
  position: absolute;
  content: '';
  bottom: -5px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #CAC3C3;
}

.risk-assessment-tabs .line-container {
  display: flex;
  width: 25%;
  margin: 20px 3px;
  align-items: center;
  font-size: 9px;
  margin-top: 0;
}

.risk-assessment-tabs .line {
  flex-grow: 1;
  height: 1px;
  background: #CAC3C3;
  position: relative;
}

.risk-assessment-tabs .nav-pills .nav-link.active{
  background-color:white !important;
}

.risk-assessment-tabs .nav-item .nav-link.active#recommendations{
  color: white !important;
  background-color: #5ABBFC !important;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 20px;

}
.risk-assessment-tabs .nav-pills .nav-link.active#customized{
  color: white !important;
  background-color: #C15DCA !important;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.risk-assessment-tabs .nav-pills .nav-link.active#moderate{
  color: white !important;
  background-color: #67707D!important;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.risk-assessment-tabs .table{
  border-collapse: separate;
  border-spacing: 0 1px;
  font-size: 14px;
  text-align: center;
}
.borderless td, .borderless th {
  border: none;
}

.risk-assessment-tabs .table thead th {
  border-color: transparent;
  font-weight: bold;
  background-color: #FF7F50;
}

.risk-assessment-tabs .table tr {
  background: #E3E3E3;
  /* border-radius: 2.7439px; */
  border-radius: 3px;
  margin-bottom: 2px;
}


.risk-assessment-tabs .table td {
/* border-right: 1px solid #dee2e6; */
border-right: none;
}

/* .risk-assessment-tabs .table tr:first-child td:first-child, .risk-assessment-tabs .table tr:first-child th:first-child { border-top-left-radius: 10px; }
.risk-assessment-tabs .table tr:first-child td:last-child, .risk-assessment-tabs .table tr:first-child th:last-child { border-top-right-radius: 10px; }
.risk-assessment-tabs .table tr:last-child td:first-child, .risk-assessment-tabs .table tr:last-child th:first-child  { border-bottom-left-radius: 10px; }
.risk-assessment-tabs .table tr:last-child td:last-child, .risk-assessment-tabs .table tr:last-child th:last-child  { border-bottom-right-radius: 10px; }
 */

 .risk-assessment-tabs #recommendation-tab .asset-table td, .risk-assessment-tabs #recommendation-tab .asset-table th{
  border-radius: 4px;
}
.portfolio-table td:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.portfolio-table td:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.risk-assessment-tabs #recommendation-tab .asset-table td:nth-child(1){
  background:  #F3F3F3;
  border-radius: 4px;
}
.risk-assessment-tabs #recommendation-tab .asset-table th:nth-child(1){
  background:  #E3E3E3;
  border-radius: 4px;
}
.risk-assessment-tabs #recommendation-tab .asset-table td:nth-child(2){
  background: #FFAE91;
  border-radius: 4px;
}
.risk-assessment-tabs #recommendation-tab .asset-table th:nth-child(2){
  background: #FF7F50;
  border-radius: 4px;
}

.asset-table td, .asset-table th {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
  text-align: left !important;
}

.growth-chart{
  margin-top: 0rem;
}
.export-buttons-div{
   margin-top: 1.5rem;
   float: right;
}
.share-btn{
  display: inline-block;
  background: #67707D;
  color: white !important;
  font-size: 14px;
  text-align: center;
  border-radius: 10px;
  margin-top: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  cursor: pointer;

}
.edit-icon{
 
  margin-right: 1rem;
  height: 18px;
  width: 18px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}
.edit-input
{
  width: 3.75rem;
}
.risk-assessment-tab-bar{
  margin-top: -3rem;
  margin-left: -2rem;
  margin-right: -2rem;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  border-radius: 16.1px 16.1px 0px 0px;
}

.tab-content
{

  padding: 10px;
}


.tab-content>.tab-pane {
  display: none !important;
}
.tab-content>.active {
  display: block !important;
}

.customized-table td:nth-child(1){
}


.customized-table tbody tr:last-child , .customized-table tbody tr:last-child td{
  background-color: white !important;
}
/*
.customized-table tbody tr:nth-last-child(2) , .customized-table tbody tr:nth-last-child(2) td{
  background-color: white !important;
}
*/
.customized-table th:nth-child(2), .customized-table th:nth-child(4){
  background: #FF7F50;
  text-align: center !important;
}
.customized-table td:nth-child(2), .customized-table td:nth-child(4){
  background: #FFAE91;
  text-align: center !important;
}

.customized-radio-wrapper{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.customized-radio-input{
  margin-left: 0 !important;
  margin-right: 0.75rem !important;
}
.customized-radio-wrapper label{
  font-size: 19px !important;
}
.customized-table th{
  
}

.reload-btn{
  display: inline-block;
  background: #67707D;
  color: white !important;
  font-size: 15px;
  text-align: center;
  border-radius: 10px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  cursor: pointer;
  margin-bottom: 5px;
}

.disabled-btn{
  opacity: 0.2;
}

.annual-charts-wrapper{
  margin-top: 2rem;
}

.annual-charts-wrapper .col-md-6{
  text-align: center;
  
}
.charts-images{
  width: 400px;
  height:350px;
}
.customized-table td:focus {
  /* border: 1px inset white;
  border-width: 2px; */
  border: none;
  content: '';
  position: absolute;
  background: #FFAE91;
  padding-right: 13.75%;
  padding-left: 13.75%;
  display: block;
}
nav > .nav.nav-tabs{

  border: none;
    color:#fff;
    background:#272e38;
    border-radius:0;

}
nav > div a.nav-item.nav-link
{
  border: none;
    padding: 18px 25px;
    color:#fff;
    background:#272e38;
    border-radius:0;
}


nav > div a.nav-item.nav-link.active
{
  border: none;
    padding: 18px 25px;
    color:#fff;
    background:#FF7F50;
    border-radius:0;
}

nav > div a.nav-item.nav-link.active:after
 {
  content: "";
  position: relative;
  bottom: -50px;
  left: -5rem;
  border: 15px solid transparent;
  border-top-color: #FF7F50 ;
}
.tab-content{
  background: #fdfdfd;
    border: 1px solid #ddd;
    border-top:5px solid #FF7F50;
    border-bottom:5px solid #FF7F50;
    padding:30px 5px;
}



nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus
{
  border: none;
    background: #FF7F50;
    color:#fff;
    border-radius:0;
    transition:background 0.20s linear;
}

.css-1eoe787-MuiSlider-markLabel, .css-yafthl-MuiSlider-markLabel
{
  width: 20% !important;
  white-space: normal !important;
}


/* ///////////////////////////////////////////// LOGIN AND SIGNUP */ 



.wrapper {
    max-width: 350px;
    min-height: 500px;
    margin: 80px auto;
    padding: 40px 30px 30px 30px;
    background-color: #ecf0f3;
    border-radius: 15px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}

.logo {
    width: 80px;
    margin: auto;
}

.logo img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0px 0px 3px #5f5f5f,
        0px 0px 0px 5px #ecf0f3,
        8px 8px 15px #a7aaa7,
        -8px -8px 15px #fff;
}

.wrapper .name {
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 1.3px;
    padding-left: 10px;
    color: #555;
}

.wrapper .form-field input {
    width: 100%;
    display: block;
    border: none;
    outline: none;
    background: none;
    font-size: 1.2rem;
    color: #666;
    padding: 10px 15px 10px 10px;
    /* border: 1px solid red; */
}

.wrapper .form-field {
    padding-left: 10px;
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}

.wrapper .form-field .fas {
    color: #555;
}

.wrapper .btn {
    box-shadow: none;
    width: 100%;
    height: 40px;
    background-color: #03A9F4;
    color: #fff;
    border-radius: 25px;
    box-shadow: 3px 3px 3px #b1b1b1,
        -3px -3px 3px #fff;
    letter-spacing: 1.3px;
}

.wrapper .btn:hover {
    background-color: #039BE5;
}

.wrapper a {
    text-decoration: none;
    font-size: 0.8rem;
    color: #03A9F4;
}

.wrapper a:hover {
    color: #039BE5;
}

@media(max-width: 380px) {
    .wrapper {
        margin: 30px 20px;
        padding: 40px 15px 15px 15px;
    }
}

.loginbox
{

margin-bottom: 3rem;
border-radius: 10px;
background: white;
padding: 15px;

}

@media screen and (max-width: 40em)
{
.responsiveTable td.pivoted {
  border: none !important;
  position: relative;
  padding-left: calc(35% + 10px) !important;
  text-align: left !important;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

}


/* ////////////////////////////////////// */


/* /////////////////// */