/******************
    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


@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(/tasks/fonts/material_ui_font_icons_v53.woff2) format('woff2');font-display:swap}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

@font-face {
    font-family: Montserrat;
    src: url('https://www.spintel.net.au/assets/frontend/fonts/montserrat-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url('https://www.spintel.net.au/assets/frontend/fonts/material_ui_font_icons_v53.woff2') format('woff2');font-display:swap}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
*/
@font-face {
    font-family: Montserrat;
    src: url('/upload/fonts/montserrat-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    font-family: Montserrat,sans-serif !important;
    background-color: #faf9f7 !important;
}
p, .fruity .text-info {
 font-family: Montserrat,sans-serif !important;   
}

.hero { 
  background: none !important;
  height: auto !important;
}  

.material-icons {
    font-family: 'Material Icons' !important;
} 
.bottom-nav-home {
    height: 4px !important;
    margin-top: 30px;
} 


.fruity .nav-link {
    color: #fff !important;
}
.fruity .nav-link:hover {
    color: #afd1e2 !important;
}

.fruity a {
    color: #09b5f3;
}
.fruity a:hover {
    color: #23527c;
}
.fruity .navbar a {
    font-size: 14px;
}

.fruity .navbar {
    background-color: #09b5f3;
}

.fruity .footer {
    background-color: #131924;
    border-top: 0px;
}
.fruity .btn-primary:hover {
    color: #fff;
    background-color: #023f55;
    border: 1px solid #023f55;
}
.fruity .btn-primary {
    color: #fff;
    background-color: #09b5f3;
    border: 1px solid #09b5f3;
}

.homepage-link-box {
    padding: 0px !important;
    height: 4px !important;
}
.homepage-link-box.mobilesim:hover {
    background-color: #49d0c1;
}
.homepage-link-box.mobilebroadband:hover {
    background-color: #14a3e7;
}
.homepage-link-box.homebroadband:hover {
    background-color: #eb6907;
}
.homepage-link-box.nbn:hover {
    background-color: #04e762;
}
.homepage-link-box.business:hover {
    background-color: #14a3e7;
}
.homepage-link-box.homephone:hover {
    background-color: #fbbf00;
}
.bottom-nav-home {
    height: 4px;
}
.top-container {
    display: none;
}
.radio-item .ls-label-xs-visibility {
    overflow: visible;
    border: 1px solid #000;
    padding: 24px;
    border-radius: 50%;
    line-height: 0px;
    text-indent: -5px;
    color: #09b5f3;
    font-size: 18px;
    z-index: 10;
}
.radio-item .ls-label-xs-visibility:hover {
    background-color: #f0f0f0 !important;
}
.answer_cell_AO11 label {
  text-indent: -11px !important;  
}
.table-array-radio, .table-array-radio td, .table-array-radio th {
    border: 0px !important;
    background: #ffffff;
    table-layout: auto;
}
.table-array-radio .col-answers, .table-array-radio .answertextright {
    width: 8% !important;
}
.table-array-radio thead {
    display: none;
}
.table-array-radio td, .table-array-radio th {
    background: #fff !important;
    z-index: 1;
}
.table-array-radio .radio-item label.ls-label-xs-visibility:before {
    display: none !important;
}
.table-array-radio .radio-item label:after {
  width: 48px;
  height: 48px;
  left: 0px;
  top: 0px; 
  z-index: -1;
}
.table-array-radio .radio-item label{
    background: transparent !important;
    border:2px solid #09b5f3;
}    
.table-array-radio .answer-item label::after {
    background-color: #ccc;
}
.fruity .text-info {
    color: #165ec7;
}
.survey-form-container .group-outer-container .space-col {
    margin-bottom: 0em;
}
.survey-form-container .group-title {
    margin-bottom: 20px !important;
}
.center-logo img {
    margin: 0 auto;
    margin-top: 25px;
}
.ls-answers tbody .answertext, .ls-answers .answertextright {
    text-transform: uppercase;
    font-size: 10px;
    color: #777;
    padding-top: 48px;
}
.question-container {
    box-shadow: none !important;
}
.bottom-nav-home {
    margin-top: 100px;
}
.completed-text  {
    float: right;
    width: 100%;
    margin-top: 30px;
}
.nav-link {
    font-size: 14px !important;
}
.survey-description h2 {
    font-family: 'Lilita One', cursive;
}
.endhide{
   display: none; 
}

@media (max-width: 767px) {
  .table-array-radio td {
    float: left;
     padding-left: 10px !important;
  } 
  .radio-item .ls-label-xs-visibility {
    padding: 12px 18px;
    width: 50px !important;
}

.table-array-radio .radio-item label::after {
    width: 46px;
    height: 45px;
}
.radio-item label.ls-label-xs-visibility::after {
    margin-left: 0px !important;
}
 .table-array-radio .answertextright {
     width: 100% !important;
     padding-top: 15px;
     float: right;
 }

 .ls-answers tbody .answertext {
    padding-top: 0px !important;  
}
#navigator-container, .group-description, .question-container {
    margin-right: 0px !important;
}
.question-title-container {
    margin-top: 12px;
}
.group-description {
    margin-bottom: 15px;
}
.answer_cell_AO11 label {
  padding-right: 0px !important;
  padding-left: 23px !important; 
}
.fruity .navbar-toggle {
    background-color: transparent !important; 
}
.navbar {
    margin-bottom: 1px !important;
}

}
@media (min-width: 767px) {
  .question-container, .group-description  {
       width: 86%;
       margin: 0 auto !important;
       margin-bottom: 27px !important;
   }  
   #welcome-container, #navigator-container{
       width: 86%;
       margin: 0 auto !important;
   }
}

/* Five star */

.five-star-emoji .answer-item label {
    filter: grayscale(100%);
    opacity: 0.8;
    background-size: 54px !important;
    border: none;
    height: 54px;
    width: 54px;
    font-size: 0px;
    
}
.five-star-emoji .answer-item label:after {
  display: none !important; 
}    
.five-star-emoji .answer-item label:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.five-star-emoji input[type="radio"]:checked+label{ 
    filter: grayscale(0%);
    opacity: 1;
} 

.answer-container input[type="radio"]:checked + label {
    background: transparent ;
}

.five-star-emoji .answer_cell_AO01 label {
     background-image: url("/upload/surveys/747148//emoji1.png") !important;
}
.five-star-emoji .answer_cell_AO02 label {
     background-image: url("/upload/surveys/747148//emoji2.png") !important;
}
.five-star-emoji .answer_cell_AO03 label {
     background-image: url("/upload/surveys/747148//emoji3.png") !important;
}
.five-star-emoji .answer_cell_AO04 label {
     background-image: url("/upload/surveys/747148//emoji4.png") !important;
}
.five-star-emoji .answer_cell_AO05 label {
     background-image: url("/upload/surveys/747148//emoji5.png") !important;
}

/* Five star */