@font-face {
    font-family: 'HandelGothic BT';
    src: url('https://bo.opinat.com/fonts/HandelGothicBT-Regular.eot');
    src: url('https://bo.opinat.com/fonts/HandelGothicBT-Regular.eot?#iefix') format('embedded-opentype'),
    url('https://bo.opinat.com/fonts/HandelGothicBT-Regular.woff') format('woff'),
    url('https://bo.opinat.com/fonts/HandelGothicBT-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HandelGothic BT';
    src: url('https://bo.opinat.com/fonts/HandelGothicBT-Regular_1.eot');
    src: url('https://bo.opinat.com/fonts/HandelGothicBT-Regular_1.eot?#iefix') format('embedded-opentype'),
    url('https://bo.opinat.com/fonts/HandelGothicBT-Regular_1.woff') format('woff'),
    url('https://bo.opinat.com/fonts/HandelGothicBT-Regular_1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* ==========================================================================

Base Stylesheet - https://matthewhartman.github.com/base/
Author: Matthew Hartman - https://www.matthewhartman.com.au/
Version: 1.2 - Last Updated: 12th January, 2013

========================================================================== */
/* ==========================================================================
/* --  Micro Clearfix, Resets and Common Classes
========================================================================== */
/* Micro Clearfix */
.clear:before,
.clear:after {
    content: "";
    display: table;
}
.clear:after {
    clear: both;
}
.clear {
    zoom: 1;
}
.section:before,
.section:after {
    content: "";
    display: table;
}
.section:after {
    clear: both;
}
.section {
    zoom: 1;
}
/* General Resets */
/* Start font size at 100% */
html {
    font-size: 100%;
}
/* Make all form fonts consistent */
button,
input,
select,
textarea {
    font-family: sans-serif;
}
/* Remove all default borders */
form,
fieldset,
a img {
    border: 0;
}
/* Common Classes */
.left {
    float: left;
}
.right {
    float: right;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
.inline {
    display: inline;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    left: -9999em;
}
.visuallyvisible {
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
    left: 0;
}
.strong {
    font-weight: bold;
}
.alert {
    background-color: #ffffcc;
    display: block;
    padding: 4px 8px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.nolist {
    list-style: none;
}
.nopadding {
    padding: 0;
}
.nomargin {
    margin: 0;
}
.none,
.nodesktop {
    display: none;
}
/* ==========================================================================
/* 1.0 - Document Setup (body, links, headings, code, tables, forms etc)
   ========================================================================== */
/* Body */
body {
    font-family: arial, helvetica, clean, sans-serif;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 22px;
    line-height: 1.375rem;
    background-color: #ffffff;
    color: #222222;
    margin: 0;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
/* Links */
a {
    color: #ff3300;
    text-decoration: underline;
}
a:visited {
    color: #ff3300;
}
a:hover {
    text-decoration: none;
}
a:active {
    color: #333333;
}
/* 1.1 Headings - h1, h2, h3, h4, h5, h6 & other (if any)
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    line-height: normal;
}
h1,
.h1 {
    font-size: 40px;
    font-size: 2.5rem;
    margin-bottom: 10px;
}
h2,
.h2 {
    font-size: 32px;
    font-size: 2rem;
    margin-bottom: 8px;
}
h3,
.h3 {
    font-size: 26px;
    font-size: 1.625rem;
    margin-bottom: 6px;
}
h4,
.h4 {
    font-size: 20px;
    font-size: 1.25rem;
    margin-bottom: 4px;
}
/* 1.2 Paragraphs, block quotes, code, pre, etc
   ========================================================================== */
small {
    font-size: 12px;
    font-size: 0.75rem;
}
/* Block Quotes, Pre and Code Blocks */
blockquote,
q {
    quotes: none;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    padding: .5em 1em;
    margin: 0;
    font-style: italic;
}
code,
pre {
    padding: 2px 6px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 12px;
    font-size: 0.75rem;
    background-color: #f1f1f1;
    border: 1px solid #dddddd;
    line-height: normal;
    color: #222222;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
/* Horizontal Rule */
hr {
    border: 0;
    background: none;
    outline: 0;
    height: 1px;
    background-color: #dddddd;
    margin: 2em 0;
}
/* 1.3 Tables
   ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    border-left: 0;
    background-color: #fff;
    border-spacing: 0;
    table-layout: fixed;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    *white-space: normal;
}
table th,
table td {
    padding: 8px;
    line-height: 18px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #eeeeee;
}
table thead th {
    vertical-align: bottom;
    font-weight: bold;
    background-color: #ffffff;
    color: #222222;
}
table tfoot td {
    font-weight: bold;
}
table caption {
    padding: .5em;
    font-style: italic;
    background-color: #eeeeee;
    border-bottom: 0;
    font-weight: bold;
}
/* 1.4 Lists
   ========================================================================== */
ul,
ul ul {
    list-style: disc;
    margin: 4px 0 4px 25px;
    padding: 0;
}
ol,
ol ol {
    list-style: decimal;
    margin: 4px 0 4px 25px;
    padding: 0;
}
/* 1.5 Forms, Labels and Inputs
   ========================================================================== */
/* ==========================================================================
/* 2.0 - Grid Layout (Responsive)
   ========================================================================== */
/* Sections & Content Blocks */
.section {
    position: relative;
}
.row {
    margin-bottom: 1em;
}
/*.container {*/
.surveyform {
    max-width: 960px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
}
/*.container-full {*/
.surveyform-full {
    max-width: 980px;
    margin: 0 auto;
}
/* Fluid Grid */
.col {
    margin-left: 2%;
    float: left;
}
/* Columns */
.one {
    width: 6.333%;
}
.two {
    width: 14.667%;
}
.three {
    width: 23.0%;
}
.four {
    width: 31.333%;
}
.five {
    width: 39.667%;
}
.six {
    width: 48.0%;
}
.seven {
    width: 56.333%;
}
.eight {
    width: 64.667%;
}
.nine {
    width: 73.0%;
}
.ten {
    width: 88%;
}
.eleven {
    width: 89.667%;
}
.twelve {
    width: 100%;
}
.half {
    width: 48.0%;
}
.one-third {
    width: 31.333%;
}
/* ==========================================================================
/* -- Tablet Devices (Layout, Modifications, etc)
   ========================================================================== */
@media only screen and (min-width: 720px) and (max-width: 959px) {
    html body {
        max-width: 959px;
        padding: 0;
        margin: 0;
    }
    .container {
        width: 700px;
    }
    .notablet {
        display: none;
    }
    .showtablet {
        display: block;
    }
}
/* End Tablet Media Query */
/* ==========================================================================
/* -- Mobile Devices (Layout, Modifications, etc)
   ========================================================================== */
@media only screen and (max-width: 319px) {
    html body {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    .one,
    .two,
    .three,
    .four,
    .five,
    .six,
    .seven,
    .eight,
    .nine,
    .ten,
    .eleven,
    .twelve {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        float: none;
    }
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    table th,
    table td {
        padding: 4px;
    }
    .nomobile {
        display: none;
    }
    .showmobile {
        display: block;
    }
}
/* End Mobile Media Query */


/* Personalizado encuesta base */
.principal_question {
    color:#002F6C;
    font-size:14px !important;
    font-family: 'Open Sans', sans-serif;;
    line-height: 18px;
    font-weight: 900;
}

.question_nps {
    font-size: 18px !important;
    font-family: 'Open Sans', sans-serif;;
    color: #002F6C;
    line-height: 22px;
    font-weight: bold;
}

.asterisc {
    font-size: 1.2em;
    color:red;
    display: none;
}

.sub_question {
    color: #aaaaaa;
    font-size: 0.9em;
    margin-left: 5px;
}


.question_help_min {
    color:#9F2B2F !important;
    font-size:14px;
    font-family: 'Open Sans', sans-serif;
    line-height: 19px;
    font-weight: normal !important;
}

.question_help_max {
    color:#485C00;
    font-size:14px;
    font-family: 'Open Sans', sans-serif;
    line-height: 19px;
    font-weight: normal !important;
}

.radionum {
    margin-left: 25px;
    text-align: center;
    color:#0784D8;
    font-size:16px;
    Font-family: 'Open Sans', sans-serif;
    line-height: 12px;
    font-weight: bold;
}

.surveyform {
    background-color: white;
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}

/*.surveyformqr {
  padding: 40px 20px;
  margin: 0 auto;
}*/

.emptynum {
    line-height: 1px;
}

.radionpsnum {
    margin: 9px 0 0 20px;
    font-size: 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 12px;
    font-weight: bold;
}

.radionumlast {
}

.checkbox {
    color:#505050;
    font-size:12px;
    font-family: 'Open Sans', sans-serif;;
    line-height: 17px;
    font-weight: normal;
}

div.social-media
{
    border: 1px solid #C9E0ED;
    margin: 20px 0 20px 0;
}

div.social-media-supporting
{
    border: 1px solid #C9E0ED;
    margin: 20px 5px 20px 5px;
    background-color: lightgrey;
}

div.social-media-copy-text
{
    border: 1px solid #C9E0ED;
    margin: 20px 5px 20px 5px;
    background-color: lightgrey;
}


.circle-radio{
    visibility: hidden;
}

.circle-label{
    cursor: pointer;
    display: inline-block;
    line-height: 40px;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background: #004D71;
    font-size: 22px;
    color: #ffffff;
}

.circle-span{
    position: absolute;
    text-align: center;
    width: 45px;
    height: 100%
}

.circle-checked {
    border: 2px solid #2196F3;
}

textarea{
    border-radius: 0.5rem;
    border: 2px solid #2196F3;
}

.tsc_buttons2 {
    padding: 8px 120px !important;

}

.buttons{
    text-align: center !important;
}

/*  Blue */
.tsc_buttons2.blue {
    -webkit-box-shadow: 0 1px 2px #002F6C, inset 0 1px 0 #002F6C !important;
    -moz-box-shadow: 0 1px 2px #002F6C, inset 0 1px 0 #002F6C !important;
    background: #002F6C !important;
    background: -moz-linear-gradient(top, #002F6C, #002F6C) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#002F6C), to(#002F6C)) !important;
    border-color: #002F6C #002F6C #002F6C !important;
    box-shadow: 0 1px 2px #002F6C, inset 0 1px 0 #002F6C !important;
    color: #fff;
    text-shadow: 0 1px 1px #0784D8 !important;
}
.tsc_buttons2.blue:hover,
.tsc_buttons2.blue:focus {
    -webkit-box-shadow: 0 0 1px #002F6C, inset 0 1px 0 #002F6C !important;
    -moz-box-shadow: 0 0 1px #002F6C, inset 0 1px 0 #002F6C !important;
    background: #002F6C !important;
    background: -moz-linear-gradient(top, #002F6C, #002F6C) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#002F6C), to(#002F6C)) !important;
    border-color: #002F6C !important;
    box-shadow: 0 0 1px #002F6C, inset 0 1px 0 #002F6C !important;
}
.tsc_buttons2.blue:active, .tsc_buttons2.blue.active {
    -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e !important;
    -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e !important;
    background: #e38512 !important;
    background: -moz-linear-gradient(top, #ffbb33, #eb7b1a) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffbb33), to(#eb7b1a)) !important;
    border-color: #d0680c !important;
    box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e !important;
}

/*  Black */
.tsc_buttons2.black {
    -webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #004D71 !important;
    -moz-box-shadow: 0 1px 2px #004D71, inset 0 1px 0 #004D71 !important;
    background: #004D71 !important;
    background: -moz-linear-gradient(top, #004D71, #004D71) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#004D71), to(#004D71)) !important;
    border-color: #004D71 #004D71 #004D71 !important;
    box-shadow: 0 1px 2px #004D71, inset 0 1px 0 #004D71 !important;
    color: #fff;
    text-shadow: 0 1px 1px #004D71 !important;
}
.tsc_buttons2.black:hover,
.tsc_buttons2.black:focus {
    -webkit-box-shadow: 0 0 1px #004D71, inset 0 1px 0 #004D71 !important;
    -moz-box-shadow: 0 0 1px #004D71, inset 0 1px 0 #004D71 !important;
    background: #004D71 !important;
    background: -moz-linear-gradient(top, #004D71, #004D71) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#004D71), to(#004D71)) !important;
    border-color: #004D71 !important;
    box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #004D71 !important;
}
.tsc_buttons2.black:active, .tsc_buttons2.black.active {
    -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #004D71 !important;
    -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #004D71 !important;
    background: #004D71 !important;
    border-color: #004D71 !important;
    box-shadow: 0 1px 0 #fff, inset 0 0 5px #004D71 !important;
}

/*******************/
/* Ajustes VSF */

div.surveyform{
    padding:0 !important;
}

div.surveyform .sub_question{
    display: none;
}

div.surveyform div[typeofelement="radiobutton"]{
    margin: 0;
}
div.surveyform div[typeofelement="radiobutton"] .principal_question{
    margin: 15px;
}
div.surveyform div[typeofelement="radiobutton"] .principal_question .question_nps{
    border-left: 3px solid #0784D8;
    padding: 0 15px;
    max-width: 340px;
    display: block;
}

div.surveyform div[typeofelement="radiobutton"] .questionhelpmaxmin{
    background: #F8F8F8;
    padding: 15px 33px 5px 33px;
    margin: 0;
}
div.surveyform div[typeofelement="radiobutton"] .questionhelpmaxmin .col{
    display: none;
}
div.surveyform div[typeofelement="radiobutton"] .questionhelpmaxmin .question_help_min,
div.surveyform div[typeofelement="radiobutton"] .questionhelpmaxmin .question_help_max{
    margin: 0;
    width: 50%;
    display: block;
}

#nps-content {
    background: #F8F8F8;
    padding: 0 33px 15px 33px;
}
#nps-content .col{
    margin: 0;
    width: 10%;
    text-align: center;
    float: left;
}
#nps-content .col:nth-child(2){
    width: 15px;
    margin-right: calc(5% - 15px);
}
#nps-content .col:nth-child(12){
    width: 15px;
    margin-left: calc(5% - 15px);
}

#nps-content .col .radionum {
    margin: 0;
    display: block;
}
#nps-content .col .radionpsnum {
    margin: 0;
    display: inline;
}

#nps-content .col .radionpsnum{
    display:none;
}
#nps-content .col .radionpsnum + label  {
    font-size: 14px;
    color: #838383;
    cursor: pointer;
    position: relative;
    font-weight: 700;
}
#nps-content .col .radionpsnum + label:before {
    content:"";
    display: block;
    margin: 0 auto 5px auto;
    width: 15px;
    height: 15px;
    background: url("/web/opinat/radio-off.png") no-repeat;
    background-size: cover;
    transition: all .3s ease-out;
}
#nps-content .col .radionpsnum:checked + label {
    color: #0784D8;
}
#nps-content .col .radionpsnum:checked + label:before {
    background-image: url("/web/opinat/radio-on.png")
}

div.surveyform div[typeofelement="checkbox"]{
    padding: 0 33px 0 33px;
}
div.surveyform div[typeofelement="checkbox"] .principal_question {
    color: #070707;
    font-weight: 400;
}
div.surveyform div[typeofelement="checkbox"] .row:not(.principal_question) {
    margin-bottom: 2px;
}

div.surveyform input[type="checkbox"] {
    display:none;
}
div.surveyform input[type="checkbox"] + span  {
    cursor: pointer;
}
div.surveyform input[type="checkbox"] + span:before {
    content:"";
    display: inline-block;
    margin: 0 10px 0 0;
    width: 12px;
    height: 12px;
    background: url("/web/opinat/check-off.png") no-repeat;
    background-size: cover;
    transition: all .3s ease-out;
}
div.surveyform input[type="checkbox"]:checked + span {
}
div.surveyform input[type="checkbox"]:checked + span:before {
    background-image: url("/web/opinat/check-on.png")
}

div.surveyform div[typeofelement="textarea"]{
    padding: 0 33px 0 33px;
}
div.surveyform div[typeofelement="textarea"] .principal_question {
    color: #070707;
    font-weight: 400;
}
#stextarea textarea{
    float:none;
    width: calc(100% - 6px);
}

input#surveysubmit,
input#surveynwasubmit {
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    box-shadow: none;
    padding: 10px 30px !important;
    min-width: 200px;
}

@media only screen and (max-width: 400px) {
    div.surveyform div[typeofelement="radiobutton"] .questionhelpmaxmin,
    #nps-content,
    div.surveyform div[typeofelement="checkbox"],
    div.surveyform div[typeofelement="textarea"]{
        padding-left: 15px;
        padding-right: 15px;
    }
}