/* user css file */
:root
{ 
--MainColour: #D93954;
--SecondaryColor: #2d2d2d;
}

/*Installing PwC Brand fonts - do not edit */
@font-face /* PwC ITC Charter - used for Titles */
{
  font-family: PwC ITC Charter;
  src: url(https://www.pwcresearch.com/uc/S4JourneyGuide/images/ITCCharterCom-Regular.ttf);
}


@font-face /* PwC Helvetica Neue - used for all other text */
{
  font-family: PwC Helvetica Neue;
  src: url(https://www.pwcresearch.com/uc/images/HelveticaNeueLTPro-Roman.ttf);
}  

/* Controlling the stretch of the background image */
body 
{
  min-height:100%;
  position:relative;
  background-repeat: none;
   height: 100%;
  /* Center and scale the image nicely */
  background-position: center;       
  background-repeat: no-repeat;		 
  background-size: cover;			 
}

/* Sets font for survey title */
.topbar-row 
{
  font-family: 'PwC ITC Charter'
}

/* Calculation that controls the size of the title in the header */
.text-responsive 
{
  font-size: calc(100% + 1vw);
  padding-right:20px;
  margin-right:20px;
}

/* Media Query - used for content on devices smaller than 1000px wide */
@media only screen and (max-width: 1000px) 
{
  .container-wrap-pwc /* Sets survey to full screen */
  {
    width:100% !important;
    margin-left: 0% !important;
  	margin-right 0% !important;
  }
  
  .logo /* Increases logo to full size of the div */
  {
    width:100%;
  }
  
  .col-2 /* Used to align the title */
  {
    padding-right:0px;
  }
  
  .row /* Increases logo to full size of the div */
  {
    margin-right:0px;
  }
  
  
  .text-responsive /* Different calcuation to scale the text better for smaller devices */
  {
  	font-size: calc(100% + 2vw);
  	padding-right:0px;
  }
  
}

/* Keeps the entire survey centered with even spacing on either side */
.container-wrap-pwc 
{
  width:80%;
  margin-left: 10%;
  margin-right: 10%;
}


.title.mb-1
{
   color: var(--MainColour);
}
/* Removes large white gap at the bottom of the page */
.buttonbar 
{
  margin-bottom: 0px !important; 
}

/* Gives links a light grey colour */
a:hover, a:active, .link:hover, .link:active, a:visited 
{
  color: #d9d9d9;
}

/* Gives buttons their roundness */
.btn, input[type="button"], input[type="submit"], input[type="reset"], 
.buttonbar input, .buttonbar button, .button 
{
  text-transform: none;
    border-radius: 5px;
  outline-style:none;
}

/* Causes buttons to move on click */
.submitbutton:active, .backbutton:active 
{
  background-color: #3e8e41;
  transform: translateY(4px);
  border-radius: 5px;
  outline-style:none; !important;
}

/* Maintains button styling on hover */
.submitbutton:hover, .backbutton:hover 
{
  border-radius: 5px;
  outline-style:none !important;
}

/* Fixes weird bug where border will sometimes appear */
.btn:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .buttonbar input:hover, .buttonbar button:hover, .button:hover, .btn:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, .buttonbar input:focus, .buttonbar utton:focus, .button:focus
{
    outline-style:none; !important;
  outline: 0px; !important;
}

/* Adds grey outline to radio buttons */
input[type=radio] ~ label span.label-radio:before, input[type=checkbox] ~ label span.label-checkbox:before 
{
      border-color: var(--SecondaryColor);
}

/* Keeps accordian answer text white after being selected */
.question.hide-formelement .qtype li.item.selected .label-text {
 color: white !important;
}

/* Round corners on various question types */
.question.hide-formelement .qtype li.item.selected{
  border-radius: 5px;
}

/* Accordion Matrix - Hover Coloured Background */
.type-matrix-accordion .answer-elements li.item:hover {
  background: var(--MainColour);
  border-radius: 5px;
}

/* Accordion Matrix - Hover White Text */
.type-matrix-accordion .answer-elements li.item:hover .label-text {
  color: white;
}

/* Click Ranking - Make Ranking numbers circles and not squares */
.js .matrix.type-matrix-ranking .circle {
  border-radius: 50%;
}

/* Setting Helvetica Neue fonts for questions */
.question .header h2.title, .question .tag-header h2.title, h1, .question .header h3.subtitle, .question .tag-header h3.subtitle, h2, h3, label, .layout-select-wrapper, .layout-select-wrapper span, .btn, input[type="button"], input[type="submit"], input[type="reset"], .buttonbar input, .buttonbar button, .button, .dac .dac__label, html, body, .ui-datepicker, .qwrap {
  font-family: "PwC Helvetica Neue" !important;
  font-weight: normal !important;
}

/* Centering text on click rankings */
.qtype.wrapword .labeltext, .qtype.wrapword label, .qtype.wrapword .wrap
{
  margin-top: 3px;
}

/* Centering numbers on click rankins */
.js .matrix.type-matrix-ranking .circle
{
  padding-left: 1px;
    padding-top: 2px;
}

/* Changing color of datepicker */
.ui-datepicker-prev, .ui-datepicker-next
{
  background-color:var(--MainColour); !important;
}

/* Styling footer */
.footersection{
  background-color:var(--SecondaryColor);
  color:white;
  padding: 10px 10px;
  font-size: 12px;
}
/* Link font colour on footer */
a{
  color:#d9d9d9;
}
/* Link hover font colour on footer */
a:hover{
  color:white;
}

/* Hiding help button */
.question .header .help button, .question .tag-header .help button
{
  display:none;
}

/* Background color of dropdown list */
.layout-select-wrapper ul li:hover, .layout-select-wrapper .list li:hover
{
  background-color: var(--MainColour) !important;
}

/* background color of slider */
.slider.ui-slider-horizontal .ui-slider-range-min
{
  background-color: var(--MainColour) !important;
}

.tooltip {
      position: relative;
      display: inline-block;
      cursor:pointer;
  }
  
  .tooltip .tooltiptext {
      visibility: hidden;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 150%;
      left: 50%;
      margin-left: -75px;margin-right: -75px;
      font-weight:normal !important;
      font-size:12px;
    text-shadow: none !important;
  }
  
.tooltip .tooltiptext.wide {
  width:400px;
}
  
  
  .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
      visibility: visible;
  }