/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/


/* Fronts - Roboto */

@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap');


/* body text */
body .p {
  color: #000000 !important;
  font-family: "Roboto" !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 23px !important;
  word-spacing: 1px !important;
}

/* headings */
.h1 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 50px !important; }
.h2 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 45px !important; }
.h3 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 40px !important; }
.h4 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 35px !important; }
.h5 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 30px !important; }
.h6 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 27px !important; }
.h7 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 24px !important; }
.h8 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 20px !important; }
.h9 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 18px !important; }
.h10 { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 17px !important; }



/* set margins and centering on The Cofounders Hub logo */
.logo-container {

    display: block;
    margin-left: auto;
    margin-right: auto;

}


/* navbar set color to navy blue */
.fruity .navbar { 
    background-color: #1b3448 !important; 
}


/* menu in the header */
ul.nav a { color: #fff !important; }
ul.nav a:hover { color: #fff !important; }
@media (min-width: 769px) {
  .fruity .navbar a.animate::after {
    text-align: right;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #fff;
  }
}

/* survey name */
.survey-name { font-family: "Roboto" !important; color: #02a1bc !important; font-size: 35px !important; }

/* Survey description */
.fruity .survey-description { font-family: "Roboto" !important; color: #000 !important; font-size: 18px !important; line-height: 24px !important; font-weight: 300 !important; }

/* Survey description */
.fruity .survey-welcome { font-family: "Roboto" !important; color: #000 !important; font-size: 18px !important; line-height: 24px !important; font-weight: 300 !important; margin-bottom: -30px !important;}


/* center the forms in the middle */
.outerframe {
    max-width: 800px;
   /* border: 1px solid red; */
    display: flex;
    justify-content: center; 
    margin-bottom: 30px;
}

/* add margin between top conatiner / progress bar and surveys container */
body .top-container {
    margin-bottom: 70px;
}

/* ?? not sure what this is *?
.survey-form-container{
    border: 1px solid purple; 
} 



/* pull the navigation buttons closer to the question forms  */
.group-outer-container {
    margin-bottom: -90px; 
    margin-top: -60px;
    z-index: -1;
}
/* navigation container bottom - add padding-top */
#navigator-container {
    margin-top: 60px;
}


/* hide the asterisk */
 .asterisk { display:none; }
 
 
 /* trying to center the progress bar in it's container */
.top-container {
 /*  border: 1px solid red; */
   display: flex;
   justify-content: center;
}
.container-fluid {
 /*   max-width: 800px; */
 width: 800px;
 /* border: 1px solid blue;  */
}
.fruity .progress-bar {
    background-color: #02a1bc;
}


.group-title {
  color: #000000 !important;
  font-family: "Roboto" !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 23px !important;
  word-spacing: 1px !important;
}

/* */
.ls-label-question {
  color: #000000 !important;
  font-family: "Roboto" !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 23px !important;
  word-spacing: 1px !important;
}



.question-container {
/*  
color: red !important;
  font-family: "Roboto" !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  word-spacing: 1px !important;
  */
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important; 
  z-index: -1000;
}

.question-title-container {
    z-index: 1000;
}

.answer-container{
  color: #000000 !important;
  font-family: "Roboto" !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 23px !important;
  word-spacing: 1px !important;
}

/* control label */
.control-label {
  color: #000000 !important;
  font-family: "Roboto" !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 23px !important;
  word-spacing: 1px !important;
}

/* nav buttons  style at the bottom of forms */
#ls-button-previous {
   background-color: #f7931e;
   border-width: 1px;
   border-style: solid;
   border-color: #f7931e;
   color: #fff;
}
#ls-button-previous:hover {
   background-color: #fff;
   border-width: 1px;
   border-style: solid;
   border-color: #f7931e;
   color: #f7931e;
}
#ls-button-submit {
   background-color: #f7931e;
   border-width: 1px;
   border-style: solid;
   border-color: #f7931e;
   color: #fff;
}
#ls-button-submit:hover {
   background-color: #fff;
   border-width: 1px;
   border-style: solid;
   border-color: #f7931e;
   color: #f7931e;
}

/* modal dialog button */
/* THIS NEEDS WORK, DRAG/DROP ON BUTTON REVEALS OLD STATE STYLE */
.fruity .btn-outline-secondary {
   background-color: #f7931e;
   border-width: 1px;
   border-style: solid;
   border-color: #f7931e;
   color: #fff;
}
.fruity .btn-outline-secondary:hover {
   background-color: #f7931e;
   border-width: 1px;
   border-style: solid;
   border-color: #f7931e;
   color: #fff;
}
/* modal dialog popup - remove borders, center text */
.modal-header {
	border: none !important;
}
.modal-body {
	text-align: center !important;
}
.modal-footer {
	border: none !important;
}


/* custom css for report - test */
.report-title {
    font-size: 24px;
    color: #02a1bc;
    font-weight: 500;
    }
    

.report-sub-title {
    font-size: 18px;
    color: #000;
    }

.report-body {
 color: #000000 !important;
  font-family: "Roboto" !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 21px !important;
  word-spacing: 1px !important;
}
 
.report-chart {
    margin-top: -100px;
    margin-bottom: -60px;
    border: 20px;
    border-style: solid;
}
 
 .row {
   /*  background-color: red !important; */
     margin-bottom: 0px;
 }
 
/* checkbox list bottom margins */
li.checkbox-item, li.checkbox-text-item {
    margin-bottom: 0px;
    margin-top: -6px;
}

/* other */
.fruity .alert-warning {
    margin-bottom: 50px;
}

    
/* brand logo */
.brand-logo {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

/* setting min height on matrix tables to compensate for answer line wrapping */
tr {
   height: 75px;
}

/* setting radio / check boxes / content to align to in columns for matrix tables */
/* to compensate for the min height set for the <tr> selector above */
td {
    vertical-align: middle !important;
}

.fruity .checkbox-item label::after {
background-color: #02a1bc !important; 
}
.fruity .radio-item label::after {
background-color: #02a1bc !important;
    margin-bottom: -30px;