// Reusable LESS items
@import '/sites/all/themes/custom/bootstrap_iin/less/reusable.less';

#col-canvas {
  margin: 0 auto;
  display: none;
  &.col-results {
    display: block;
  }
  @media @desktop-tablet {
    display: block;
  }
}
  
form#webform-client-form-9351 {
  svg {
    display: block;
    margin: 0 auto;
  }
  .form-group {
    margin: 0;
  }
  clear: both;
  padding-bottom: 50px;
  min-height: 500px;
  label {
    display: block;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: normal;
    margin: 0 auto;
    margin-top: 6px;
  }
  a.ui-slider-handle:focus,
  a.ui-slider-handle:hover,
  .ui-state-focus {
    outline: none;
    border: none;
  }
  .ui-slider-range {
    background-color: #ccc;
    border: 0;
  }
    
  .ui-slider-handle {
    border-radius: 4px;
    color: black;
    width: 10px;
    height: 20px;
    top: -1px;
    margin-left: 0;
  }
  .ui-slider-range,
  .sliderfield-container {
    height: 10px;
    width: 100%;
    margin: 0 auto;
    padding: 0 5px;
    min-height: inherit;
    border-radius: 5px;
  }
  .slider-percent-fill {
    background-color: black;
    width: 80%;
  }
  
  .ui-widget.ui-widget-content {
    z-index: inherit;
  }
  
  .form-item---sliderfield-submitted-creativity {
    .ui-slider-handle { background-image: none; background-color: #e37a34;}
    .slider-selection { background-image: none; background-color: rgba(227, 122, 52, 0.32); }
    label {color: #e37a34; }
  }
  .form-item---sliderfield-submitted-finances {
    .ui-slider-handle { background-image: none; background-color: #f3a22f;}
    .slider-percent-fill { background-image: none; background-color: rgba(243, 162, 47, 0.32); }
    label {color: #f2a12f; }
  }
  .form-item---sliderfield-submitted-career{
    .ui-slider-handle { background-image: none; background-color: #f5d018;}
    .slider-selection { background-image: none; background-color: rgba(245, 208, 24, 0.32); }
     label {color: #f4d018; }
  } 
  .form-item---sliderfield-submitted-education{
    .ui-slider-handle { background-image: none; background-color: #ebe633;}
    .slider-selection { background-image: none; background-color: rgba(235, 229, 52, 0.32); }
    label {color: #ebe633; }
  }
  .form-item---sliderfield-submitted-health {
    .ui-slider-handle { background-image: none; background-color: #a8ca4b;}
    .slider-selection { background-image: none; background-color: rgba(168, 202, 75, 0.32); }
    label {color: #a8ca4b; }
  }
  .form-item---sliderfield-submitted-physical-activity {
    .ui-slider-handle { background-image: none; background-color: #4eb651;}
    .slider-selection { background-image: none; background-color: rgba(168, 202, 75, 0.32); }
    label {color: #4eb651; }
  }
  .form-item---sliderfield-submitted-home-cooking {
    .ui-slider-handle { background-image: none; background-color: #4eb552;}
    .slider-selection { background-image: none; background-color: rgba(78, 181, 82, 0.32); }
    label {color: #4eb552; }
  }
  .form-item---sliderfield-submitted-home-environment {
  .ui-slider-handle { background-image: none; background-color: #30c0ca;}
    .slider-selection { background-image: none; background-color: rgba(48, 192, 202, 0.32); }
    label {color: #30c0ca; }
  }
  .form-item---sliderfield-submitted-relationships {
    .ui-slider-handle { background-image: none; background-color: #2387b8;}
    .slider-selection { background-image: none; background-color: rgba(35, 135, 184, 0.32); }
    label {color: #2386b7; }
  }
  .form-item---sliderfield-submitted-social-life {
    .ui-slider-handle { background-image: none; background-color: #623c8a;}
    .slider-selection { background-image: none; background-color: rgba(98, 60, 138, 0.32); }
    label {color: #613b8a; }
  }
  .form-item---sliderfield-submitted-joy {
    .ui-slider-handle { background-image: none; background-color: #b53595;}
    .slider-selection { background-image: none; background-color: rgba(181, 53, 149, 0.32); }
    label {color: #b43494; }
  }
  .form-item---sliderfield-submitted-spirituality {
    .ui-slider-handle { background-image: none; background-color: #d93248;}
    .slider-selection { background-image: none; background-color: rgba(217, 50, 72, 0.32); }
    label {color: #d83248; }
  }      
  .webform-component--radar-graph {
    margin-left: -15px;
  }
  .webform-component.webform-component-textfield,
  .webform-component-hidden {
      padding: 0 12%;
      z-index: 777;
      position: relative;
      @media @desktop-tablet {
      display: none;
    }
    margin: 0 auto;
    margin-top: 35px;
  }
  .btn#edit-next {
    @media @desktop-tablet {
      margin-top: -40px;
      margin-left: 10%;
      width: auto;
      display: inline-block;
      clear: left;
      margin-left: 72%;

    }
    @media @desktop {
      display: block;
      width: 22%;
      margin-left: 15%;
      clear: both;
      margin-top: 0px;
    }
    margin-top: 50px;
    margin-bottom: 50px;
  }
  #edit-previous,
  #edit-submit {
    display: none;
  }
  @media @desktop-tablet {
    .webform-component--intro-text,
    .webform-component--circle-of-life-object,
    .webform-component--results,
    .webform-component--results-title {
      width: 52%;
      float: left;
      padding: 0 5%;
      h3 {
        font-size: @font-size-h2-large;
        font-weight: normal;
      }
      h4 {
        font-size: @font-size-h3;
        margin: 30px 0;
        font-weight: normal;
      }
    }
    .webform-component--circle-of-life-object,
    .webform-component--radar-graph {
      width: 46%;
      padding-top: 40px;
    }
    .webform-component--radar-graph {
      float: right;
    }
  }
  .policy-text {
    display: none;
  }
}