/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);*/
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');*/

:root {
    /* Background colors */
    --green-primary: #01a85e;
    --green-shade2: #81e1a4;
    --green-shade3: #1a1f26;
    --blue-primary:rgb(99, 91, 255); /* #2582e0; /*#5894ff;*/
    --darkblue-primary:rgba(99, 91, 255, 0.741); /* #3871d7;*/
    --verydark-primary: #20262e;
    --lime-shade2: #1a1f26;
    --lime-shade3: #0573f0;
    --top-nav-bg: #f2f4f9;
    --body-bgcolor:#f6f8fb;
    --pure-white:#fff;
    --pure-white-cardbg:#fff;
    --dark-bg: #2a3646;
    --inbox-opt:#fff;

    /* Text colors */
    --body-color:#271941; /* #333; /*435363*/
    --default-lighttext: #c5c5c5;
    --default-text: #7288ac;
    --default-shade2: #cacaca;
    --default-shade3: #444;
    --default-white: #f9f9f9;
    --default-black: #2e333a;
    --default-input-color: #565656;
    --default-input-border-color: #d1d1d1;
    --border-color-light: #e2e6eb;
    --green-text-primary: #01a85e;
    --red: #ea3434;
    --red-light: #ff787c;
    --orange-light: #ffbb7d;
    --blue-light: #4290f2;
    --green-light: #3ca731;
    --default-placeholder: rgb(128, 139, 157);
    --bold:#271941; /* #37434e;*/
    
    /* Font sizes */
    --font-size-small: 9pt;
    --font-size-default: 0.992em; 
    --font-size-medium: 12.5pt; 
    --font-size-large: 16pt; 
    --font-size-xlarge: 23pt;

    /* Border colors */
    --default-bordercolor: #d4d4d4;
    --light-bordercolor: #e1e1e1; /*#dcdfe7; */

    /* Cards */
    --card-bg-focus:#2582e0; /*#6596eb;*/
    --card-bg: #6596eb;
}

.dark-theme {
    --blue-primary: rgb(99, 91, 255); /*#5894ff;*/
    --darkblue-primary: #3871d7;
    --top-nav-bg: #f2f4f9;
    --body-bgcolor:#151515;
    --pure-white:#fff;
    --body-color: #cacaca;
    --default-lighttext: #c5c5c5;
    --default-text: #7288ac;
    --default-placeholder: #9eaabd;
    --default-black:#2e333a;
    --pure-white-cardbg:#262626;
    --light-bordercolor:transparent;
    --pure-white:#f9f9f9;
    --bold: #f1f1f1;
    --inbox-opt:#262626;
}

*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
letter-spacing: 0.1px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

body, html, img, input, select, textarea {
margin:0;
padding:0;
border:0;
color: #333; /*5a6a79; /*rgb(46, 77, 140); /*#556e98; /*#7288ac;*/
color: var(--body-color);
font-size: 14px; /*0.910rem; /*10pt; /*10.4pt; */
-webkit-font-smoothing: antialiased;
font-weight:400;
font-family: 'Poppins', sans-serif;
-moz-osx-font-smoothing: grayscale; /* IMPORTANT for Firefox, else the text is bold & ugly */
}

.body-bg {
    overflow-x:hidden;
}

textarea::placeholder {
    white-space: pre-line;
}

.mobile-multimenu {
    min-height: 93vh;
}

.survey-name {
    display:inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; vertical-align:middle; font-weight:500;
}

@media ( min-resolution: 2dppx) {
    html {
       font-size: 9.5pt;
    }
}

div, html
{
    -webkit-tap-highlight-color:transparent;
}

b {
    font-weight: 600;
    color:#1c122e;
    color:var(--bold);
}

.main-container {
width:100%;
padding-left: 25px;
padding-right: 25px;
max-width:1395px;
padding-top:75px;
margin:0 auto;
}

.main-container-table {
display:table;
width:100%;
margin-top:67px;
}

.main-container-left {
width:50%;
padding-right:1.4%;
display:table-cell;
vertical-align: top;
}

.main-container-right {
padding-left:1.3%;
display:table-cell;
width:34%;
vertical-align: top;
}

.main-container-center {
vertical-align: top;
margin:0 auto;
width:67%;
}

@media all and (min-width: 1300px) {
.main-container-activefilter {
    padding-right:125px;
    margin-left:60px;
    }
}

.colorlabels {
display:inline-block;
padding-top: 7px;
}

.feed-wrapper {
display:table;
border-bottom:2px dashed rgb(212, 212, 212);
padding-top:20px;
padding-bottom:20px;
width:100%
}

.feed-leftside-small {
display:table-cell;
width:40px;
padding-right:5px;
vertical-align: top;
}

.feed-rightside {
display:table-cell;
padding-left:5px;
}

.feed-footer {
margin-top:15px;
}

.apexcharts-canvas {
margin:0 auto;
}

.grid-chart-header {
padding:12px;
}

pre {
    font-size: inherit;
    color: inherit;
    border: initial;
    padding: initial;
    font-family: inherit;
    max-width: 790px;
    }

.surveys-main-options {
    position:absolute;margin-top:35px;left: 15px;width: calc(100% - 100px); max-width:200px; opacity:0;z-index: 8; padding: 20px; color:#f9f9f9; color: var(--default-white); background-color: #414754; background-color:var(--dark-bg); transition: all .4s ease; will-change: auto;
    display:none;
}


.survessys-main-options-close {
    margin-top:50px;
    opacity:0;

}

.notify-cue-container {
    position:fixed; width: 100vw;text-align:center;z-index: 999; pointer-events: none;
    display:table;
}

.notify-cue-wrapper {
    margin:0 auto;display:table-cell;text-align:center; padding:0 32px 0 32px;
    transition:all .4s ease; padding-top:110px; opacity:0;
}

.notify-cue-content-wrapper {
    max-width: 670px;margin:0 auto;padding: 10px 20px 10px 20px;border-radius: 14px;display: inline-block;
}

.notify-cue-container-open .notify-cue-wrapper {
    padding-top:75px;
    opacity:1;
}

.main-menu-hovertitle {
    position:fixed;left: 0; margin-left: 0px; opacity:0; z-index:-1; display:inline-block; top: 192px; font-weight: 600; transition: all .4s ease;
    font-size:7pt;
}

.main-menu-2 {
    top: 263px;
    transition-delay: .15s;
}

.main-menu-3 {
    top: 335px;
    transition-delay: .3s;
}

.main-menu-4 {
    top: 407px;
    transition-delay: .43s;
}

.main-menu-show {
opacity:1;
z-index:100;
margin-left: 25px;
}

.main-menu {
    position:fixed;
    min-height:100%;
    z-index:6;
    font-weight: 600;
    text-align:right;
    width:53px;
    top:0;
    padding-top:15px;
    /*color: rgba(255, 255, 255, 0.81); s */
    background-color: transparent; /*#2a3646 */;
    /*background-color: var(--dark-bg);*/
    /*color:#f1f1f1;*/
}

.main-menu-top {
    position:fixed; display:block; background-repeat:no-repeat; width:100%; z-index:9;
    top:0;
    background-color:#2e3441;/*#3c3b4f;/*#3c3b4f, #3f4251;/*#3f4251;:rgba(255,255,255,0.8); /* rgba(245, 244, 250, 0.8); /*rgba(255,255,255,0.8);*/
    /*color:#f5f5f5;*/
    color:#f9f9f9;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom:1px solid rgba(0, 0, 0, 0.09);
    height:50px;
}

/* original, may 2025
.vert-nav {
    background-color:#fff;
    position:fixed;
    top:0;
    left:-183px;
    height:100%;
    z-index:7;
    padding:0;
    margin:0;
    border-right:1px solid rgba(0, 0, 0, 0.09);
    overflow:hidden;
    overflow-y:auto;
    display:block;
    transition:all 0.3s ease;
}
*/

.nav-menu-caret {
    transition: transform 0.3s ease;
}

.vert-nav {
background-color: #2e3441;
position: fixed;
top: 48px;
left: 153px;
/* height: 100%; */
z-index: 7;
padding: 0;
margin: 0;
/* color: #fff; */
/* border-right: 1px solid rgba(0, 0, 0, 0.09); */
overflow: hidden;
overflow-y: auto;
color: #fff;
display: block;
transition: all 0.3s ease;
display:none;
}

.vert-nav-item {
    display:table;
    transition:width 1s ease;
}

.vert-item-compact {
    display:table-cell;
    width:42px;
    padding-top:15px;
    padding-bottom:15px;
    vertical-align:top;
    padding-left:2px;
    cursor:pointer;
}

.vert-item-extended {
    display:table-cell;
    height:auto;
    padding:20px;
    padding-right:20px;
    padding-top:10px; /* was 15*/
    padding-bottom:10px;
    cursor:pointer;
     vertical-align:top;
}

.font-size-xxmedium {
    font-size:13.5pt;
}

.img-border {
    border:0;
    border:1px solid #d1d1d1;
    border-radius:5px;
    padding:3px;
}

/*
:hover.vert-nav-slide {
    left:0;
}

:hover.vert-nav .vert-item-extended {
   width:255px;
    height:auto;
}

:hover.vert-nav .vert-item-compact {
   display:none;
}

:hover.vert-item-extended-name {
    font-weight:600;
}

:hover.vert-item-extended-name .font-size-xxmedium {
    transform: scale(1.15);
}
*/

.vert-nav-close, :hover.vert-nav-close {
    left:-182px;
    box-shadow:none;
}

.vert-item-compact i {
will-change: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
    transition: transform .2s ease;
    -webkit-transition:transform .2s ease;
    -webkit-transform: translateZ(0) scale(1, 1);
    -webkit-font-smoothing: subpixel-antialiased;
}

:hover.vert-nav-close .vert-item-compact {
display:block;
}

:hover.vert-nav-close .vert-item-extended {
width:200px;
}

:hover.vert-item-compact i {
    transform:scale(1.41) rotate(2deg);
}

/* older version
.pricing-container {
    display:table; max-width:1300px; vertical-align:middle; margin:0 auto;
}

.pricing-content {
    display:table-cell; width:33%; padding-right:20px;
}

.pricing-card {
    border:1px solid #d4d4d4; border-radius:15px; padding:20px; vertical-align:middle; text-align:left; min-height:300px;
}

.pricing-feature {
    border-top:1px solid #dedede; padding:10px; padding-left:0; cursor:pointer;
}

*/

.pricing-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Flexible columns */
    gap: 5px; /* Space between cards */
    width: 90%;
    margin: 0 auto;
}

.pricing-content {
     padding-right:20px;
     margin-bottom:25px;
}

.pricing-card {
    box-shadow:rgba(10, 10, 10, 0.07) 0px 0px 1px 2px; -webkit-box-shadow:rgba(10, 10, 10, 0.07) 0px 0px 1px 2px;  border-radius:15px; padding:20px; vertical-align:middle; text-align:left; min-height:300px;
    font-size:0.95rem;
}

.pricing-feature {
    border-top:1px solid #dedede; padding:10px; padding-left:0; cursor:pointer;
}

.pricing-desc {
    min-height:70px;
}

.padding-top-medium {
    padding-top:25px;
}

.thick-glass {
    background-color:rgba(255,255,255,0.9);
}

.main-menu-topheader-bg {
    
    background-color:transparent; /*rgb(25 32 42 / 92%); /* rgba(213,214,224,0.6); */
    padding-top:0px;
    padding-bottom:0px;
    border-bottom:0;
}

.main-menu-top-container {
    display:block;
    width:100%;
}

.main-menu-top-wrapper {
    margin:0 auto;
    padding-left: 14px;
    padding-right: 15px;
    max-width: 1395px;
    position:relative;
}

.main-nav-area {
    margin-top:18px;
    margin-bottom:7px;
}

.main-menu-top-bg {
    /*background-color:transparent;*/
}

.main-nav-header {
    max-width:100%;
    margin-left:0;
    padding-left:14px;
}

.workspace-icon {
display: inline-block;
    background-color: transparent;
    padding: 5px 10px 4px 10px;
    vertical-align: middle;
    margin-right: 10px;
    font-weight: 600;
    margin-top: 0;
    border-radius: 4px;
    border: 1px solid #8396b2;
}

.main-menu-left {
display:table-cell;
width:200px;
vertical-align:middle
}

.main-menu-center {
display:table-cell;
text-align: center;
padding-top: 0;
    vertical-align: middle;
}

.main-menu-right {
display:table-cell;
width:140px;
text-align: right;
vertical-align: middle;
}

.main-nav-tab {
font-size: 19px;
    margin-top:25px;
    display:block;
}

:hover.main-nav-tab {
    font-weight: 600;
}

.main-nav-active {
font-weight:600;
}

.main-nav-active > i {
font-weight: 600;
}

.nav-tab-first {
margin-left:0;
}

.main-medium-container {
max-width:1150px;
margin:0 auto;
margin-top:20px;
}

.medium-left {
display:table-cell;
width:68%;
vertical-align: top;
padding-top:30px;
padding-right:30px;
}

.medium-right {
display:table-cell;
vertical-align: top;
padding-top:30px;
padding-left:30px;
}

.medium-content-block {
background-color:#fff;
padding:25px;
margin-bottom:30px;
border:1px solid #ebedf5;
}

.summary-item-block {
display:block;
border-bottom:1px solid #ebedf5;
padding:10px;
margin-right:25px;
padding-left:0;
}

.small-label {
font-size: 8pt;
    padding: 1px 6px 1px 6px;
    display: inline-block;
    margin-right: 10px;
    min-width: 65px;
    text-align: center;
    border: 1px solid #d4d4d4;
    border:1px solid var(--default-bordercolor);
    margin-bottom: 7px;
}

:hover.medium-content-block {
box-shadow: 0px 0px 28px 1px rgba(222,224,235,1);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(128, 139, 157);
  color: var(--default-placeholder);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #9eaabd;
    color: var(--default-placeholder);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #9eaabd;
    color: var(--default-placeholder);
}

.top-nav-bg {
background-color:#f2f4f9;
background-color:var(--top-nav-bg);
}

body {
background-color:#FFF;/*#fcfbfd; /* a#f6f8fb; /*#f5f5f7; /*#f6f6f9; /*#f1f2f7; /*#f4f5fa; /*f4f6fa; /*#f4f6f8; /*#fafcfd; /*#f2f5f9*/;
min-height: 100vh;
min-height: 100vh !important;
background-image: url('https://insights.smilejet.com/img/cloud-bg.png');
background-position:bottom left;
background-size:inherit;
background-repeat:repeat-x;
background-attachment: fixed;
}

/*
background-position: bottom center;
background-repeat:repeat-x;

background: url('https://www.smilejet.com/app/img/cloud-bg.png') repeat-x bottom center, -moz-linear-gradient(135deg, #f1f2f7 0, #f4f5f9 100%);
  background: url('https://www.smilejet.com/app/img/cloud-bg.png') repeat-x bottom center, -webkit-gradient(135deg, #f1f2f7 0, #f4f5f9 100%);
  background: url('https://www.smilejet.com/app/img/cloud-bg.png') repeat-x bottom center, -webkit-linear-gradient(135deg, #f1f2f7 0, #f4f5f9 100%);
  background: url('https://www.smilejet.com/app/img/cloud-bg.png') repeat-x bottom center, -o-linear-gradient(135deg, #f1f2f7 0, #f4f5f9 100%);
  background: url('https://www.smilejet.com/app/img/cloud-bg.png') repeat-x bottom center, -ms-linear-gradient(135deg, #f1f2f7 0, #f4f5f9 100%);
  background: url('https://www.smilejet.com/app/img/cloud-bg.png') repeat-x bottom center, linear-gradient(135deg, #f1f2f7 0, #f4f5f9 100%);
/*background: url('https://www.smilejet.com/app/img/cloud-bg.png') repeat-x bottom center */
}

.html {
scroll-behavior: smooth;
}

body, html {
height:100%;
}

.bold {
font-weight:600;
}

.bold-medium {
font-weight:500;
}

b {
font-weight:600;
}

.bold-thick {
font-weight:600;
}

ul, li {
margin:0;
padding:0;
}

div, a {
color:inherit;
}

a {
text-decoration:none;
cursor:pointer;
word-break: break-all;
}

img {
border:0;
}

.bold {
font-weight:600;
}

.choice-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:flex-start;
  margin-left:-10px;
  width:calc(100% + 10px);
  margin-top:4px;
}

.choice-box-block {
  display: block;
  margin-left:-10px;
  width:calc(100% + 10px);
  margin-top:5px;
}

.choice-item {
flex-basis:100%;
flex: 1 auto;
text-align: center;
margin:10px;
cursor:pointer;
max-width:auto;
position: relative;
}

.choice-block {
margin-bottom:5px;
}


:hover.choice-item {
font-weight:600;
}

.choice-item-active {
font-weight:600;
}

.choice-twoitem-block {
max-width:260px;
}

.choice-options-style {
    text-align: left;
    padding:16px;
    position: relative;
}

:hover.choice-options-style {
    text-align: left;
    padding:16px;
    font-weight:400;
    color: inherit;
}

.choice-box-block {
display:block;
}

.initPage {
    visibility: hidden;
}

.survey-searchbox {
display:inline-block;
width:220px;
padding-left:15px;
}

.survey-filteroptions {
display:block;
margin-top:7px;
margin-bottom:10px;
}


.grid-stack {
margin-left:-10px;
width: calc(100% + 20px);
}

.grid-stack-item-content {
background-color:#fff;
position:relative;
display: flex;
flex-direction: column;
}

.grid-chart-header {
padding:13px;
padding-bottom:10px;
}

.grid-chart-header-options {
float:right;
}

.chart-content {
    width: 100%;
    bottom: 0;
    padding: 20px;
    padding-top: 0;
}

.daterangepicker {
display:none;
}

/* horizontal bar chart */
.chart-bar {
display:block;
margin-bottom:6px;
width:100%;
}


.chart-bar-inner {
display:inline-block;
padding:4px;
text-align:right;
padding-right:10px;
}

.chart-orange-light {
background-color:#f7d8c1;
}

.chart-orange {
background-color:#ffb783;
}

.action-dropdown-width {
    max-width:200px;
}

.content-drawer {
    position:fixed;
    width:50%;
    top:0;
    right: 0;
    margin-right: -115vw;
    transition:margin 1s ease-in-out;
    background-color:#fff;
    height:100vh;
    overflow-y:auto;
    z-index:998;
    min-width:400px;
    will-change: auto;
}

.content-drawer-content {
   margin-top:10px;
}

.content-drawer-open {
    right:0;
    margin-right:0;
}

.summary-bar-wrap {
    -webkit-transition: width 1s; transition: width 1s; padding-left:0px; max-width:97%; overflow:hidden; white-space: nowrap;
    margin-bottom:10px;
}

.summary-bar-outer {
    width:99.99%; padding:7px; background-color:#f9ca9d; color:#945d26; white-space: nowrap;
}

.summary-perc {
    margin:0; display:inline-block; text-align:left; margin-right:15px; width:25px; vertical-align:middle 
}

.summary-content {
    display:inline-block;text-overflow: ellipsis; overflow:hidden; width:42vw; max-width:22vw; vertical-align:middle
}

.blue-bar {
    background-color:#f7f8ff;
    color:var(--body-color);
}

:hover.bar-animation {
    filter: brightness(0.95);
    -webkit-filter: brightness(0.95);
}

:hover.summary-bar-outer {
    font-weight:bold;
}

[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    possition: absolute;
    color: gray;
    background-color: transparent;
}
    
[contenteditable]:focus {
    outline: 0px solid transparent;
}

/* VERY IMPORTANT, below forces browsers to not add a <div> <p> etc when they should be adding <br> */
*[contenteditable="true"]{display: inline-block;
word-break: break-word;
}

.editor-toolbar {
    display:none;
    padding: 10px;
    background-color: #fff;
    border-radius: 15px;
    position: absolute;
    z-index: 10;
    width: 400px;
    left: 50%;
    margin-left: -200px;
    box-shadow: 0 0 14px -2px rgba(0,0,0,0.2);
    margin-top: -60px;
    border: 1px solid #dedede;
    text-align: center;
}
.editor-toolbar button {
    margin-right: 5px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.editbox {
outline:0;
margin-top:5px;
display:inline-block;
}

h1 {
margin:0;
padding:0;
line-height: 23pt;
font-weight:500;
}

.link-light::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    padding-top:0px;
    border-bottom: 1px solid rgba(0,0,0,0.6);
    transition: width .3s;
}

.link-dark::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    padding-top:0px;
    border-bottom: 2px solid #565656;
    transition: width .3s;
}

.link-red::after {
    border-bottom: 2px solid var(--red);
}

.link-light:hover::after, .link-dark:hover::after {
    width: 100%;
}

.link-blue, .smj-link-blue {
color:rgb(99, 91, 255); /*#2c7be5;*/
cursor:pointer
}

:hover.link-blue, :hover.smj-link-blue {
color:#1250a0; /*1559b4;*/
}

.link-inline {
display:inline-block;
}

.link-underline {
padding-bottom:3px;
border-bottom:2px solid;
}

.link-bold {
font-weight:400;
opacity:0.8;
}

:hover.link-bold {
opacity:1;
font-weight: 600;
}

.link-visible {
border-bottom: 2px solid #565656;
}

.results-tabs-margin {
margin-top:-16px;
}

.dashboard-begin {
    /*margin-left:193px;*/
}

.topic-highlight {
    background-color:#f7faff; border:1px solid #709fe0; border-radius:3px; padding:0px 4px 0px 4px; margin:2px 4px 2px 4px; display:inline-block;
}

.topic-product {
    background-color:#fff9f9;
    border:1px solid #da6262;
}

.topic-location {
    background-color:#f3fff4;
    border:1px solid #51b949;
}

.topic-topic {
    background-color:#fef9ff;
    border:1px solid #db97e5;
}

.small-badge {
    padding: 1px 6px 3px 6px;
    font-size: 11px;
    /* margin-left: 10px; */
    display: inline-block;
    border: 1px solid;
    margin-right: 10px;
    /* vertical-align: middle; */
    margin-top: 5px;
    border-radius: 4px;
}

input[type=text],input[type=password],input[type=number], select, textarea {
-webkit-appearance: none;
background-color:#fff;
font-size:0.992em;
padding:7px;
    padding-left:7px;
outline:none;
    transition:padding .2s ease;
    will-change: auto;
    border:1px solid transparent;
border:1px solid #d5d5d5;
border:1px solid var(--light-bordercolor);
border-radius:7px;
}


.prod-survey-input > input, .prod-survey-input > textarea {
    border:0;
    border-radius:0;
    border-bottom:1px solid #c3c4cd;
    padding-left:0;
}

.input-fixed-leftpadding {
    padding-left:11px;
    padding-left:11px !important;
}

select {
    border:1px solid #d5d5d5;
    padding-left:11px;
}

select {
background-image: url(https://insights.smilejet.com/img/dropdown-arrow.svg);
background-repeat: no-repeat;
background-position: 95% center;
background-size: 20px;
padding-right:40px;
border-radius:7px;
max-width:100%;
max-height: 36px;
vertical-align: middle;
}

input[type=text]:focus,input[type=password]:focus,input[type=number]:focus, textarea:focus, select:focus {
border:1px solid #d1d7e1;
-webkit-box-shadow: 0px 0px 29px -16px rgba(0,0,0,0.44);
-moz-box-shadow: 0px 0px 29px -16px rgba(0,0,0,0.44);
box-shadow: 0px 0px 6px 1px #d1d7e1;
    padding-left:11px;
}

.main-menu-searchbar {
    position:relative;
    width: 70%;
    text-align:center;
    margin:0 auto;
    z-index:9999;
}

.text-center {
    text-align:center;
}

.main-menu-searchbar input {
height: 31px;
width:75%;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

#searchbar-results {
    position:absolute;
    width:100%;
    padding:20px;
    background-color:#fff;
    text-align:left;
    top:42px;
    border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;
    color:initial;
    max-height:85vh;
    overflow-y:auto;
    box-shadow:0px 0px 29px -16px rgba(0,0,0,0.60);
}

.clouds-top {
    position: absolute; top: 0px; left:0; width:100vw; height: 27vh;background: linear-gradient(180deg, rgb(240,244,255) 0%, rgba(254,254,254,1) 100%); overflow:hidden; pointer-events:all; z-index:-1;
}

.full-width-input {
width:100%;
margin-top:4px;
}

input[type="radio"] {
margin:8px 0px 7px 0px;
}

.input-full-width {
width:100%;
}

.big-content-drawer {
position:fixed;
width:34vw;
height:100vh;
z-index:995;
min-width:370px;
top:0;
right:0;
margin-right:-101%;
padding:20px;
background-color:#fff;
transition:all .7s ease;
overflow-y:auto;
}

.big-content-drawer-overlay {
position:fixed;
width:100vw;
height:100vh;
z-index:990;
opacity: 0.4;
background-color:#414f61;
}

.drawer-open {
margin-right:0;
}

.pointer {
cursor:pointer;
}

.editbox {
outline:none;
}
.pulse-wrapper {
    position: relative;
    display: inline-block;
  }
  
  /* basis-pulse-stijl */
  .pulse-wrapper::before,
  .pulse-wrapper::after,
  .pulse-wrapper .pulse {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    background-color:var(--blue-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    animation: growAndFade 3s ease-out 5;
  }
  
  /* delays voor golf-effect */
  .pulse-wrapper::before {
    animation-delay: 0s;
  }
  .pulse-wrapper::after {
    animation-delay: 1s;
  }
  .pulse-wrapper .pulse {
    animation-delay: 2s;
  }
  
  /* zorg dat je knop of icoon erboven blijft */
  .pulse-wrapper > *:not(.pulse) {
    position: relative;
    z-index: 1;
  }
  
  /* extra pulse element injecteerbaar in HTML of via JS */
  .pulse-wrapper .pulse {
    position: absolute;
  }
  
  /* animatie */
  @keyframes growAndFade {
    0% {
      opacity: 0.25;
      transform: translate(-50%, -50%) scale(0);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .pulse-wrapper-small::before,
  .pulse-wrapper-small::after,
  .pulse-wrapper-small .pulse {
    width: 80px;
    height: 80px;
    background-color: #633ae9;
  }
  
  

.small-loader-width {
width:50px; display:inline-block;
}

.vertical-chart-wrapper {
    position:relative; height: 76px;overflow-x: auto;overflow-y: hidden;padding-right: 25px;
}

.vertical-chart {
    width: calc(100% - 20px);
display:table;
    position: absolute;
    bottom: 10px;
    overflow:hidden;
}

.vertical-bar {
    height:50px;
    margin: 1px;
    min-width:16px;
    overflow:hidden;
    display: table-cell;
    vertical-align: bottom;
    cursor:pointer;
}

.vertical-bar-stack {
    display:block;
    position: relative;
    background-color: #5894ff; /*rgba(0, 143, 251, 0.85); /*#5894ff; /*#78a0eb;*/
    border-radius:7px;
    margin-right:10px;
    max-width: 15px;
    transition: all .5s ease;
}

.bar-purple {
background-color:#a66ded;
}

@keyframes barChartAnimation {
0% {
    transform: translateX(-100%);
}
100% {
    transform: translateX(0);
}
}

.bar-animation {
    animation: 0.7s ease-out 0s 1 barChartAnimation;
}

.vertical-bar-stack-event {
    background-color:#f2f4f9;
    border-left:4px dashed #bcccea;
}

.delay-2 {
    animation-delay: .5;
}

.loader-bars,
.loader-bars:before,
.loader-bars:after {
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 0.8em;
  height: 2em;
}
.loader-bars {
  text-indent: -9999em;
  margin: 20px 9px;
  position: relative;
  font-size: 10px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader-bars:before,
.loader-bars:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader-bars:before {
  left: -1.4em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader-bars:after {
  left: 1.4em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 2em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 3em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 2em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 3em;
  }
}

.loader-bars-white,
.loader-bars-white:before,
.loader-bars-white:after {
  background: #ffffff;
  color: #ffffff;
}

.loader-bars-grey,
.loader-bars-grey:before,
.loader-bars-grey:after {
  background: #b4bbcd;
  color: #b4bbcd;
}


/* CIRCLE ANIMATION */

.radial-progress {
  margin: 0px;
  margin-left:7px;
  margin-bottom:13px;
  width: 130px;
  height: 130px;
  background-color: #f4f6fa;
  border-radius: 50%;
}
.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
  width: 130px;
  height: 130px;
  position: absolute;
  border-radius: 50%;
}
.radial-progress .circle .shadow {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) inset;
}
.radial-progress .circle .mask,
.radial-progress .circle .fill {
  -webkit-backface-visibility: hidden;
  transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s;
}
.radial-progress .circle .mask {
  clip: rect(0px, 130px, 130px, 65px);
}
.radial-progress .circle .mask .fill {
  clip: rect(0px, 65px, 130px, 0px);
  background-color: #6596eb;
}
.radial-progress .inset {
  width: 120px;
  height: 120px;
  position: absolute;
  margin-left: 5px;
  margin-top: 5px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}


/* on/off toggle */
.switch2 {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch2 input {display:none;}


/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: -12px;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  top: 3px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--blue-primary);
}

input:focus + .slider {
  box-shadow: 0 0 1px #7c879d;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 9px;
}

.slider.round:before {
  border-radius: 50%;
}

/* end on/off toggle */

.underline {
    text-decoration:underline;
}

/* COLORS */
/* Background colors */
.main-bg-darker { background-color: #20262e; background-color: var(--main-bg-darker); }
.yellow-bg { background-color: #f8c66f; }
.orange-bg { background-color: #f79646; }
.orange-lightbg { background-color: #FFECDBFF; }
.lightblue-bg { background-color:#f3f3f8; }

/* Text colors */
.default-lighttext { color: #C5C5C5; color:var(--default-lighttext); }
.default-text { color: #7288ac; color:var(--default-text); }
.default-lightgray { color: #8f9092; }
.default-darkgray { color: #6b7193; }
.green-primary { color: #01a85e; color: var(--green-primary); }
.blue-primary { color:rgb(99, 91, 255); /* #2582e0; /*#5894ff; /*#6596eb;*/ }
.darkblue-primary { color: #3871d7; }
.orange { color: #ff8f00; }
.orange-light { color:#f7aa64; }
.red { color: #ea3434; }
.white { color: #fff; }
.pink { color: #d693f3; }
.blue { color: #76a5f6; }
.yellow { color: #f8c66f; }
.dark-brown { color: #744e0c; }
.red-light { color: #f89c9b; }
.purple { color: #b15ee1; /*#d46daa*/; }
.red-bg { background-color: #d03033; }
.orange-bg { background-color: #ee9e49; }
.green-bg { background-color: #049f59; }
.ratings-color {
    color:#ffd700;
}

/* font sizes*/
.font-size-xxxsmall { font-size:7pt;}
.font-size-xxsmall { font-size:8pt;}
.font-size-xsmall { font-size:9pt;  }
.font-size-small { font-size:10pt;  }
.font-size-default { font-size: 10pt;  }
.font-size-xsmedium { font-size: 10.5pt;  }
.font-size-smedium { font-size: 11pt;  }
.font-size-medium { font-size: 12.5pt;  }
.font-size-xmedium { font-size: 15pt; }
.font-size-xxmedium { font-size: 13pt; }
.font-size-large { font-size: 18pt; }
.font-size-xlarge { font-size: 23pt; }
.font-size-xxlarge { font-size: 28pt; }


.h1-style {
font-size:17pt;
font-weight:500;
display:inline-block;
padding-bottom:5px;
font-family: inherit;
line-height: 24pt;
}

.h2-style {
font-size:13pt;
font-weight:400;
display:inline-block;
padding-bottom:1px;
font-family: inherit;
}

.h1-small {
font-size:13pt;
}

.h1-xsmall {
    font-size:14pt;
}

h2 {
font-size:14pt;
font-weight:400;
display:inline-block;
padding-bottom:10px;
margin:0;
font-family: inherit;
}

.light {
font-weight: 300;
}

.regular {
font-weight: 400;
}

ul, li {
padding:0;
margin:0;
list-style-type: none;
}

li {
padding:7px 0px 7px 0px;
}

.team-inline-block {
display:inline-block;
}

.tagging {
    border: 1px solid #b6b8c3;
    height: auto;
    padding: 7px;
    padding-top: 2px;
}

.tagging.editable {
    cursor: text;
}

.tag {
    background: none repeat scroll 0 0 #ffffff;
    cursor: default;
    border: 1px solid #b6b8c3;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    padding: 4px 12px 4px 12px;
    margin-right:10px;
    margin-bottom:10px;
    font-size:10px;
    vertical-align: middle;
    text-align: center;
}

.tag span {
    background: none repeat scroll 0 0 #D66806;
    border-radius: 2px 0 0 2px;
    margin-right: 5px;
    padding: 5px 10px 5px;
}

.tag .tag-i {
    color: #6596eb;
    font-weight:600;
    cursor: pointer;
    font-size: 1.3em;
    height: 0;
    line-height: 0.1em;
    position: absolute;
    right: 5px;
    top: 0.7em;
    text-align: center;
    width: 10px;
}

.tag .tag-i:hover {
    color: black;
    text-decoration: underline;
}

.type-zone {
    border: 0 none;
    height: auto;
    width: auto;
    min-width: 20px;
    display: inline-block;
}

.type-zone:focus {
    outline: none;
}

.premium-lable {
    display:inline-block;
    position:absolute;
    border-radius:6px;
    background-color: #3f4251; /*#ff0000; */
    color:#fff;
    padding:5px 10px 5px 10px;
    top:-5px;
    right:-5px;
    text-align: center;
}


/* BUTTONS */
.secundary-button, .choice-item {
    background-color: #fff;
    /*color: #4f81d6;*/
    padding: 6px 15px 6px 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid;
    display:inline-block;
    cursor:pointer;
    border:1px solid #bbc7d2;
    color:#271941; /*var(--blue-primary);*/
}

:hover.secundary-button, :hover.choice-item {
color:var(--blue-primary);
border: 1px solid rgb(99, 91, 255); /*#4e82db; */
border-bottom:1px solid;
-webkit-text-stroke-width: 0.3px;
box-shadow: 0px 0px 14px -7px #6596eb;
}

:hover.secundary-button > * {
font-weight: 600;
}

:hover.choice-item-active {
        font-weight:600;
        color:#fff;
        border: 1px solid var(--blue-primary); /*#4e82db; */
        box-shadow: 0px 0px 14px -7px #6596eb;
    }

.primary-button, .upgrade-button, .choice-item-active {
    background-color: var(--blue-primary);
    color: #fff;
    padding: 6px 15px 6px 15px;
    border-radius: 10px;
    /*background:linear-gradient(rgb(59, 130, 246) 0%, rgb(45 113 222) 100%);*/
    text-align: center;
    border:1px solid var(--blue-primary);
    border-bottom:1px solid var(--blue-primary);
    display:inline-block;
    transition: all 0.4s ease;
    cursor:pointer;
    
}

.primary-button-space {
margin-right:14px;
}

:hover.primary-button, :hover.upgrade-button {
background-color: var(--darkblue-primary);
    font-weight:600;
    box-shadow: 0px 0px 14px -7px #6596eb;
}

.primary-compact {
    padding-top:5px;
    padding-bottom:5px;
}

.secundary-active {
border: 2px solid !important;
font-weight:600 !important;
}

.secundary-active > * {
font-weight:600 !important;
}

.third-button {
padding-bottom:1px;
border-bottom:1px solid;
display:inline-block;
}

.deletebutton {
margin:0;
padding: 6px 16px 6px 16px;
background-color:#ef7070;
color:#ffffff;
display:inline-block;
text-align:center;
border-radius:5px;
border-bottom:2px solid #d85353;
/*border:1px solid #ef7070;*/
}

a:hover.deletebutton {
background-color:#e75757;
/*border:1px solid #e75757;*/
}

.setup-toggle-off {
display:inline-block;
padding-left:30px;
}

.email-embedcode {
height:175px;
overflow-y:auto;
}

.h1-gradient {
    background: linear-gradient(75deg, rgb(99, 91, 255), #7511c9);
    -webkit-background-clip: text;
    color: transparent;
    border:0;
}

.card-hamburger {
position:absolute; z-index:3; right:15px; top:15px; padding:6px; cursor:pointer; padding-bottom:15px;
}

.survey-search {
width:100%;
}

.survey-sort-status, .survey-sort-color {
margin-left: 12px;
width: 170px;
}

/* General html5 slider */
input[type=range].general-slider {
  -webkit-appearance: none;
  width: 100%;
  margin: 4.95px 0;
  margin-top:15px;
}
input[type=range].general-slider:focus {
  outline: none;
}
input[type=range].general-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 9.1px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #bfc7d4;
  border-radius: 0px;
  border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].general-slider::-webkit-slider-thumb {
  box-shadow: 0.6px 0.6px 1.2px rgba(0, 0, 0, 0.73), 0px 0px 0.6px rgba(13, 13, 13, 0.73);
  border: 1px solid rgba(0, 0, 0, 0.22);
  height: 19px;
  width: 15px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4.95px;
}
input[type=range].general-slider:focus::-webkit-slider-runnable-track {
  background: #eaecf1;
}
input[type=range].general-slider::-moz-range-track {
  width: 100%;
  height: 9.1px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #bfc7d4;
  border-radius: 0px;
  border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].general-slider::-moz-range-thumb {
  box-shadow: 0.6px 0.6px 1.2px rgba(0, 0, 0, 0.73), 0px 0px 0.6px rgba(13, 13, 13, 0.73);
  border: 1px solid rgba(0, 0, 0, 0.22);
  height: 19px;
  width: 15px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range].general-slider::-ms-track {
  width: 100%;
  height: 9.1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].general-slider::-ms-fill-lower {
  background: #94a2b7;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range].general-slider::-ms-fill-upper {
  background: #bfc7d4;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range].general-slider::-ms-thumb {
  box-shadow: 0.6px 0.6px 1.2px rgba(0, 0, 0, 0.73), 0px 0px 0.6px rgba(13, 13, 13, 0.73);
  border: 1px solid rgba(0, 0, 0, 0.22);
  height: 19px;
  width: 15px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  height: 9.1px;
}
input[type=range].general-slider:focus::-ms-fill-lower {
  background: #bfc7d4;
}
input[type=range].general-slider:focus::-ms-fill-upper {
  background: #eaecf1;
}

.dynamic-content-width {
    max-width:350px;
}

.onboarding-guide {
    position:fixed; bottom:0px; left:70px; z-index:3;
}

.onboarding-rel {
    position:relative; width:100%;
}


/* RADIO AND CHECKBOX BUTTONS */

.ac-custom {
	max-width: 900px;
}

.ac-custom label {
	display: inline-block;
	position: relative;
	padding: 30px; /* padding left from svg */
    padding-left:34px;
    padding-top:7px;
    padding-bottom:9px;
	vertical-align: top;
	cursor: pointer;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

/* CHECKMARK */
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
	width: 18px;
    height: 18px;
    top: 50%;
    left: 0;
    margin-top: -12px;
	position: absolute;
	cursor: pointer;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
	opacity: 0;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	z-index: 2;
}

.ac-custom label::before {
	content: '';
	border: 1px solid #b6b8c3; /* CHECHMARK SQUARE BORDER AND COLOR! */
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.ac-radio label::before {
	border-radius: 50%;
}

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
	color: #fff;
} 

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
	opacity: 1;
}


/* General SVG and path styles */

.ac-custom svg {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	margin-top: -14px;
	left: 5px;
	pointer-events: none;
}

.ac-custom svg path {
	stroke: #4F5A68; /* SVG RADIO & CHECKBOX BORDER COLOR */
	stroke-width: 10px;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

/* Specific input, SVG and path styles */

/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
	width: 17px; /* CHANGE INNER CIRCLE size*/
	height: 17px;
	margin-top: -11px;
	left: 10px;
	position: absolute;
}

.ac-circle label::before {
	background-color: #4F5A68; /* INNER CIRCLE COLOR! */
	border: none;
}

.ac-circle svg {
	width: 40px; /* svg circle size */
	height: 40px;
	margin-top: -23px;
	left: -2px;
}

.ac-circle svg path {
	stroke-width: 5px;
} 

/* Box Fill */
.ac-boxfill svg path {
	stroke-width: 8px;
} 

/* Swirl */
.ac-swirl svg path {
	stroke-width: 8px;
}

/* List */
.ac-list ol {
	list-style: decimal;
	list-style-position: inside;
}

.ac-list ol li {
	font-size: 2em;
	padding: 1em 1em 0 2em;
	text-indent: -40px;
}

.ac-list ol li label {
	font-size: 1em;
	text-indent: 0;
	padding-left: 30px;
}

.ac-list label::before {
	display: none;
}

.ac-list svg {
	width: 100%;
	height: 80px;
	left: 0;
	top: 1.2em;
	margin-top: 0px;
}

.ac-list svg path {
	stroke-width: 4px;
}

.ac-radio { margin-left:-10px; }

/* END RADIO/CHECKBOX */





/* RATING ------------------------------------------------------- */
.rating-container {
padding-top:-4px;
width:100%;
clear:both;
}

fieldset, label { margin: 0; padding: 0; }

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 2.3em;
  font-family: 'Font Awesome 5 Pro';
  display: inline-block;
  content: "\f005";
}

.rating > label { 
  color: #ddd; 
 float: right;
 padding-right:8px;
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #fbaa57;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #fbaa57;  } 

/* END RATING -------------------------------------------------   */


/* HAMBURGER (MENU) / CLOSE ANIMATION */
.hamburger-ani {
  width: 20px;
  height: 20px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.hamburger-ani span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background:#555; /*var(--default-darkgray);*/
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.card-hamburger .open span {
background-color:#d6d6d6;
background-color:var(--main-bg-white);
}


/* Icon 4 */

.hamburger-ani span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.hamburger-ani span:nth-child(2) {
  top: 6px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.hamburger-ani span:nth-child(3) {
  top: 12px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.hamburger-ani.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -1px;
  left: 2px;
}

.hamburger-ani.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.hamburger-ani.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 13px;
  left: 2px;
}

.new-lightbox-bg {
position: fixed;
z-index:4;
background-color:#000;
opacity: 0.5;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:none;
}

.new-lightbox-container {
position: fixed;
width: 528px;
top: 50%;
z-index: 5;
left: 50%;
margin-left: -264px;
max-height: 260px;
margin-top: -130px;
padding: 30px;
text-align: left;
background-color: #fff;
-webkit-box-shadow: 0px 0px 33px -9px rgba(0,0,0,0.49);
-moz-box-shadow: 0px 0px 33px -9px rgba(0,0,0,0.49);
box-shadow: 0px 0px 33px -9px rgba(0,0,0,0.49);
display:none;
}

.no-left-padding {
padding-left:0;
}

.no-right-padding {
padding-right:0;
}

.lightbox-scrolldiv {
display:block;
max-height:152px;
overflow-y:auto;
}

.upgrade-main-feature {
    width:100vw; height:100vh; display:table; margin:0; padding:0; position: fixed; left: 0; top: 0; text-align: center;
}

.upgrade-wrapper {
    display:table-cell; vertical-align:middle;
}

.upgrade-box {
    text-align:left;margin:0 auto; border-radius:6px; max-width:1200px; padding:60px; background-color:#fff; box-shadow:0px 0px 27px -7px rgba(0,0,0,0.1); display:inline-block;
}

.upgrade-box-content {
    display:table-cell; width:50%; vertical-align:middle;
}

.upgrade-box-video {
    display:table-cell; width:50%; vertical-align:top; padding-left:30px;
}

/*
.segments-bar {
    white-space:pre;
    text-wrap: nowrap;
    overflow-x: auto;
    width:100%;
    padding-bottom:5px;
    display:block;
}
*/

.segments-bar {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.segments-list {
    display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  padding-top:2px;
  width:100%;
}

.segment-item {
    flex-shrink: 0;
  padding: 5px 10px;
  margin-right: 5px;
  white-space: nowrap;
}

.segment-dropdown {
    flex-shrink: 0;
    text-align:right;
    width:250px;
    padding-left: 35px;
}

@media (max-width: 768px) {
  .segment-item {
    display: none;
  }
  .segment-dropdown {
    width: 100%;
    padding-left: 0;
  }
  .segment-dropdown select {
    width: 100%;
  }
}

::-webkit-scrollbar {
    width: 10px;
    height:9px;
}

::-webkit-scrollbar-track {
    background-color: transparent; /*#f2f4f9;*/
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color:#69707f;
    -wesbkit-boxx-shadow: inset 0 0 6px rgba(0,0,0,1); 
}

/* START MAIN CSS */

.chart-dashboard-content {
    margin-top:-10px;
}

.main-wrapper {
width:100%;
height:100%;
position:relative;
margin:0; padding:0;
z-index:1;
display:table;
}

.nav {
height:100%;
width:219px;
display:table-cell;
vertical-align: top;
position:relative;
}

.page-title {
    margin-left: 108px;
    margin-top: 30px;
    display:inline-block;
}

.main-nav-options {
padding-top:7px;
margin-left: -5px;
}

.nav-container {
position:fixed;
width:100%;
padding:2px 60px 2px 112px;
/*background-color: #fff;
border-bottom: 1px solid #d1d9e0;
background-color:#32425a;
background: #edf2f9 -webkit-gradient(linear,left top,left bottom,from(#eff3fa),to(#edf2f9)) repeat-x!important;
background: #edf2f9 linear-gradient(180deg,#eff3fa,#edf2f9) repeat-x!important;
background-repeat:repeat-x;
*/
z-index:99;
}

.nav-item-text {
/*color:#d2d8e2;*/
color:#2c7be5; /*#2c7be5;*/
padding-right:10px;
}

:hover.nav-item-text {
/*color:#fff;*/
color:#1559b4; /*1559b4;*/
}

.subnav-option

    {
    padding-right:0;
    }

.nav-option {

}

.account-area {
float:right;
display:inline-block;
margin-top:22px;
}

.white-block {
position:fixed;
z-index:5;
height:calc(100% - 100px);
top:100px;
left:76px;
width:1px;
background-color:#f0f2f5;
background-color:var(--border-color-light);
}

.visual-small-nps {
display: inline-block;
    background-color: #fff;
    /* padding: 3px; */
    text-align: center;
    width: 21px;
    height: 21px;
    /* padding-top: 1px; */
    vertical-align: middle;
    border-radius: 50%;
    font-weight:600;
}

.visual-small-nps-green {
border: 1px solid #4ccb5e;
color: #4ccb5e;
}

.visual-small-nps-orange {
border: 1px solid #f8a96a;
color: #f8a96a;
}

.visual-small-nps-red {
border: 1px solid #ff8d8c;
color: #ff8d8c;
}

.content {
width:100%;
margin-top:100px;
}

.content-container {
min-height:80vh;
display:table;
width:100%;
}

.content-vertical-center {
height: calc(100% - 100px);
}

.content-table {
display: table;height: calc(100% - 100px);vertical-align: middle;margin: 0 auto;
}

.content-cell {
display:table-cell; vertical-align:middle
}

.white-border {
    height:3px;
    border-top:2px solid #fff;
    margin-top:2px;
    margin-bottom:2px;
}

.actions-flexcontainer {
    flex-direction: row;
    display:flex;
    flex-wrap:wrap;
    margin-left:-15px;
    width:calc(100% + 20px);
}

.actions-leftpadding {
    padding-left:5px;
}

.actions-statbox {
    flex-grow:1;
    flex-wrap:wrap;
    flex-basis:auto;
    min-width: 260px;
    margin:9px;
    width:20%;
    position:relative;
}

.actions-statbox-content {
    padding:15px;
}

.actions-40p {
    width:45%;
}

.actions-30p {
    width:30%;
}

.actions-deadlinebar {
    position:absolute; margin-top:-1px; height:3px;
}

.invisible-card {
    background:transparent;
    border:transparent;
    box-shadow:none;
    -webkit-box-shadow:none;
    visibility:hidden;
}


.actions-header {
    color:#fff;
    padding:7px;
    padding-left:15px;
}

.actions-itemrow-wrapper {
    display:table; width:100%; margin-top:12px;
}

.actions-itemleft {
    display:table-cell; width:49%; position:relative; box-shadow:0px 0px 33px -27px rgb(88 107 140);
    padding-right:10px;
}

.actions-itemright {
    display:table-cell; width:49%; margin-top:20px; position:relative; box-shadow:0px 0px 33px -27px rgb(88 107 140);
    padding-left:10px;
}

.white-bg {
    background-color:#fff;
    border:1px solid var(--light-bordercolor);
    border-radius:8px;
}

.white-bg-nohover {
    background-color:#fff;
}

:hover.white-bg {
    box-shadowOFF: 0px 0px 15px 1px rgba(222,224,235,1);
}

.recording-frame {
    height: calc(100vh - 75px);
}

.settings-area {
display:table-cell;
vertical-align: middle;
width:50%;
padding-left:10%;
}

.settings-border {
display:table-cell;
padding-right:82px;
padding-bottom:8%;
vertical-align: middle;
height:100%;
}

.right-area {
display:table-cell;
vertical-align: middle;
padding-left:30px;
transition:all 0.7s;
}

.right-area > * {
transition:all 0.7s;
}

.start-bg {
background-image: url(https://insights.smilejet.com/img/campaign-step1-bg.svg);
background-repeat: no-repeat;
background-position: center center;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }

  .grid-item {
    padding: 0;
    flex: 1 1 calc(33.333% - 20px);
    min-width: 0;
    border: 0 !important;
    max-width:100% !important;
  }

  @media (max-width: 900px) {
    .grid-item {
      flex: 1 1 calc(50% - 15px);
    }
  }

  @media (max-width: 600px) {
    .grid-item {
      flex: 1 1 100%;
    }
  }

.preview-wrapper {
min-height:400px;
position: fixed;
margin-top: 43px;
}

.preview-widget-wrapper {
position:relative;
}

.preview-emoticon {
margin-bottom:7px;
}

.preview-widget-content {
position:relative;
}

.preview-widget-cta {
position: absolute;
margin-top: 45px;
margin-left: 50px;
width: 280px;
padding: 15px;
border-radius: 4px;
background-color: #fff;
}

.preview-widget {
position:absolute;
margin-top:100px;
margin-left:20px;
}

.logic-wrapper {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 8px;
    margin-right: -15px;
    margin-bottom: 18px;
    border-bottom: 1px dashed #cacaca;
}

.big-slider {
position:fixed;
height:100%;
width:50%;
top:0;
left:0;
z-index:-1;
background-color:#fff;
background-image:url(https://insights.smilejet.com/img/sphere.jpg);
background-repeat: no-repeat;
background-position: top right;
background-size:contain;
transition:all 0.7s;
}

.big-slider-small {
width:400px;
}

.logo {
width:50px;
vertical-align: middle;
display:inline-block;
}

.logo-img {
border:0;
vertical-align: middle;
height:37px;
}

.nav-option {
display:inline-block;
margin-right:12px;
padding:10px;
padding-top:25px;
padding-bottom:15px;
font-weight:600;
}

.nav-options {
display:inline-block;
}

.nav-icon-padding {
padding-right:10px;
font-size:11pt;
margin-bottom:3px;
}

.setting-link {
margin-top:10px;
padding:5px;
padding-left:0;
}

.trial-area {
position:relative;
margin-top: 50px;
margin-bottom:32px;
padding-bottom:30px;
/*
border-bottom:1px solid #f0f2f5;
border-bottom:1px solid var(--border-color-light);
*/
}

.boarding-circle-text {
position:absolute;
top:28px;
line-height:37px;
left:44px;
text-align: center;
}

.circle {
    background-color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    vertical-align: middle;
    display: inline-block;
}

.add-circle {
    width: 39px;
    color: #fff;
    padding-left: 10px;
    padding-top: 8px;
    font-size: 25pt;
    height: 39px;
    background-color:#6596eb;
    cursor:pointer;
}

.account-circle {
    width: 29px;
    color: #fff;
    /* padding-left: 9px; */
    padding-top: 4px;
    font-size: 11pt;
    text-align: center;
    height: 28px;
    background-color: #6596eb;
    cursor: pointer;
    border-radius: 50%;
    vertical-align: middle;
    display: inline-block;
}

.circlabel {
border:4px solid #fbfbfb;
margin-left:-14px;
width: 39px;
height: 39px;
cursor:pointer;
}

.unfocus {
    opacity:40%;
    pointer-events:none;
}

.user-circ-leftmarg {
    margin-left: -12px;
}

.user-circle {
    width: 32px;
    border:1px solid #8396b2;
    height: 30px;
    color: #fafafa;
    font-weight: 600;
    border-radius: 50%;
    vertical-align: middle;
    padding-top: 5px;
    text-align: center;
    padding-left: 1px;
    font-size:9pt;
    display: inline-block;
    margin-right: 5px;
    margin-top: -4px;
    position:relative;
}

.nav-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    vertical-align: middle;
    padding-top: 11px;
    text-align: center;
    display: inline-block;
    border:1px solid transparent;
}


:hover.nav-circle {
    background-color:#fff;
    color:var(--blue-primary);
    border: 1px solid var(--blue-primary);
}

.nav-circle-active, :hover.nav-circle-active {
    border: 2px solid var(--blue-primary);
    color:var(--blue-primary);
}

.circ-blue {
background-color:#4184ea;
}

.circ-green {
background-color:#4ccb5e;
}

.circ-orange {
background-color:#f8a96a;
}

.circ-red {
background-color:#ff8d8c;
}

.circ-pink {
background-color:#ff8cd5;
}

.circ-purple {
background-color:#c790ff;
}

.circ-default {
    color:#435363;
    color: var(--body-color);
}


.circinactive-blue {
background-color:#61b1f5;
}

.circinactive-green {
background-color:#73e48a;
}

.circinactive-orange {
background-color:#fccf97;
}

.circinactive-red {
background-color:#ffbab9;
}

.circinactive-pink {
background-color:#ffb9ea;
}

.circinactive-purple {
background-color:#e1bdff;
}

.colorlabel-floatright {
float:right;
display:inline-block;
margin-top:-5px;
}

.widget-settings-input {
margin-top:9px;
width:90%;
}

.widget-visual-nav {
padding:9px;
    width: 46%;
    margin-right: 4%;
    margin-bottom: 4%;
cursor:pointer;
}

.widget-option {
padding:13px;
padding-left:0;
border-bottom:1px solid #d8d8d8;
}

.edit-top-nav {
  font-size:0.920rem;
  color: #ebebeb;
}

:hover.edit-top-nav {
color:#ebebeb; /*#2582e0;*/
font-weight:600;
}

.top-nav-trackerbar {
    position: absolute;
    height: 3px;
    left: 0;
    bottom: -1px;
    background-color: #6b9cff;
    width: 0px;
    left: 0px;
    opacity:0;
    margin-left:0;
    transition: all .4s ease;
}

.flex {
display:flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
}

.flex-space-between {
justify-content: space-between;
}

.text-center {
text-align: center;
}

.text-right {
text-align: right;
}

/* This should be on top of flex! */
.cta-option, .alignment-option, .slots-option, .size-option {
display:none;
}

.div-block {
padding:25px;
background-color:#fff;
display:block;
border-radius:6px;
    bsssorder:1px solid var(--light-bordercolor);
    box-shadow: 0px 0px 33px -30px rgb(88, 107, 140);
}

.table {
display:table;
width:100%;
}

.table-cell {
display:table-cell;
vertical-align: top;
}

.table-row {
display:table-row;
}

.table-cell-50 {
width:50%;
}

.table-cell-10 {
    width:70px;
}

.table-cell-15 {
    width:15%;
}

.table-cell-33 {
    width:33%;
}

.table-cell-35 {
    width:35%;
}

.table-cell-85 {
    width:85%;
}

.table-cell-left-padding {
padding-left:15px;
}

.table-cell-right-padding {
padding-right:15px;
}

.table-cell-right-padding-medium {
    padding-right:50px;
}

.table-middle-bpadding {
    padding-bottom:10px;
    vertical-align:middle;
}

.talk-bubble-left {
    background-color: #5751f8;
    color: #fff;
    padding: 15px;
    border-radius: 16px;
    border-top-left-radius: 0;
    max-width: 600px;
    clear:both;
    margin-bottom:30px;
    max-width:450px;
}

.talk-bubble-right {
    background-color: #5751f8;
    color: #fff;
    padding: 15px;
    border-radius: 16px;
    border-top-right-radius: 0;
    max-width: 600px;
    float:right;
    margin-bottom:30px;
    clear:both;
    max-width:450px;
}

/* table session monitoring */
.sessions-table {
    display: flex;
    flex-direction: column;
    min-width: 100%;
  }
  .sessions-header-row {
    display: flex;
    background-color: #f6f6f6;
    font-weight: bold;
    position: sticky;
    top: 46px;
    z-index:1;
    border: 1px solid var(--light-bordercolor);
    padding: 5px;
  }
  .sessions-row {
    display: flex;
    width: 100%;
    border: 1px solid var(--light-bordercolor);
    border-top:0;
    padding: 3px;
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    margin-top: 0;
    align-items: center;
  }
  .sessions-row:hover {
    background-color:#f6f6f6;
  }
  .sessions-cell {
    flex: 1;
    padding: 7px;
    font-size:13px;
    align-items: center;
  justify-content: center;
    word-break: break-all;
    vertical-align: middle;
  }
  
  .sessions-play {
      max-width:60px; padding-left:15px;
  }
  
  .sessions-country {
      max-width:40px;
  }
  
  .sessions-page {
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  
  .sessions-actions {
      max-width:132px;
  }

  .active-top-nav {
    color:#fff;
}
  
  @media (min-width: 1700px) {
      .main-container {
          max-width:80vw;
      }
  }
  
  @media (max-width: 1900px) {
      .actions-30p {
          width:48%;
      }
  }
  
  @media (max-width: 1000px) {

      .actions-30p {
          width:100%;
      }

      pre {
        width: 87vw;
        }

      .dynamic-content-width {
        max-width:165px;
    }  
      
    .pricing-container {
        display:block;
        width:100%;
    }
    
    .nav-logo {
        padding-top:8px;
        margin-left:44px;
    }
    
    .pricing-content {
        display:block;
        width:100%;
        margin-bottom:25px;
        padding-right:0;
    }
    
    .pricing-card {
         min-height:auto;
    }  
      
    .sessions-container {
      overflow-x: none;
    }
    .sessions-row {
      display: table;
    margin-bottom: -1px;
    border: 1px solid #d5d5d5;
    width: 100%;
    border-radius: 10px;
    padding:7px;
    }
    
    .main-menu-top {
    border-bottom:0;
    height:60px;
    }
    
    .sessions-table {
        display:block;
        border:0;
    }
    .sessions-cell {
      display: table-cell;
      padding:10px;
    }
    .sessions-header-row {
      display:none;
    }
    
    .sessions-page {
      width:45%;
      max-width:170px;
    }
  }
  
  .sessions-play {
    width: 15px;
    padding-left: 10px; 
  }
  
  .sessions-country {
      width: 40px;
      padding-left: 0;
  }
  
  
  
  .sessions-actions {
    /* padding-right: 0; */
    text-align: right;
  }


.options-block-top {
    display:block;
    font-weight:600;
}

.options-block-content {
    display:block;
    margin-top:10px;
    margin-bottom:20px;
}

.align-right {
text-align: right;
}

.vertical-middle {
vertical-align: middle;
}

.cta-right {

}

.big-slider {

}

.stagetitle-control {
display:none;
}

.widget-stage2-title, .widget-stage2-desc {
display:block;
}

.question_nr {
    position:absolute; left: 21px; top: 14px; z-index:3;
}

.replay-nav {
    position:absolute; width:95vw; padding:10px; top:0; left:0; background-color: #f6f8fb; z-index: 5; border-bottom: 1px solid #ced6e0;
}

.survey-main-options {
position:fixed;
z-index:3;
bottom:30px;
text-align:center;
margin:0 auto;
background-color:#fff;
border-radius:8px;
width:480px;
left: 50%;
margin-left: -240px;
padding: 15px;
}

:hover.survey-options-li {
    color:#fff;
    font-weight:600;
}

.survey-main-option {
display:inline-block;
margin-left:20px;
}

.custom-dropdown {
position:relative;
border: 1px solid #d4d4d4;
border:1px solid var(--default-bordercolor);
padding: 10px;
cursor:pointer;
padding-right:20px;
}

.custom-dropdown-content {
display:none;
width: 100%;
position: absolute;
top: 100%;
left:0;
background-color: #fff;
max-height: 164px;
border: 1px solid #d4d4d4;
border:1px solid var(--default-bordercolor);
border-top: 0;
overflow-y: auto;
cursor:pointer;
-webkit-box-shadow: inset 0px 16px 27px -20px rgba(224,231,241,1);
-moz-box-shadow: inset 0px 16px 27px -20px rgba(224,231,241,1);
box-shadow: inset 0px 16px 27px -20px rgba(224,231,241,1);
}

.custom-dropdown-active {
-webkit-box-shadow: 0px 0px 29px -16px rgba(0,0,0,0.44);
-moz-box-shadow: 0px 0px 29px -16px rgba(0,0,0,0.44);
box-shadow: 0px 0px 6px 1px #d1d7e1;
}

.custom-dropdown-content-wrapper {
position:relative;
}

.custom-dropdown-item {
display:block;
border-top:1px solid #d4d4d4;
border-top:1px solid var(--default-bordercolor);
}

:hover.custom-dropdown-item {
background-color:#f7f7f7;
}

.custom-dropdown-paddingleft {
padding:10px 0px 10px 15px;
}

.custom-dropdown-icon {
float:right;
vertical-align: middle;
}

.custom-dropdown-close {
display:none;
}

.settings-block {
    padding:20px;
    background-color:#fafafa;
}

.box-shadowOFF {
-webkit-box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
-moz-box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
}

.box-shadow {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.09);
border-radius: 12px;
border:0;
}

.minimal-shadow {
    box-shadow: 0px 0px 33px -30px rgb(88 107 140);
}

.box-shadow-mobile {
    box-shadow: 0px 2px 22px -12px rgb(88 107 140);
}

.template-wrapper {
    text-align: center;
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    right: 0;
    transition:all 0.8s;
}

.template-wrapper-container {
position:absolute; width:400px; display:table;
    height: 450px;
    top: 50%;
    left: 50%;
    margin-top: -230px; margin-left: -220px;
    transition:all 0.8s;
}

.template-preview {
    width: 400px; height: 450px; top: 50%; left: 50%; margin-top: -240px;
text-align: left;
margin-left: -240px;
display: table-cell;
}

.template-preview-inner {
display:table; width:400px; height:100%; background-color: #fff;
border-radius: 4px;
padding: 30px 0px 30px 0px;
}

.template-options {
text-align: left;
padding-left: 50px;
width:350px;
}

.template-start-text {
text-align: center;
display: table-cell;
vertical-align: middle;
}

.implement {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0%;
    z-index: 11;
    display: table;
    min-height: 100%;
    vertical-align: middle;
    transition: all 0.5s;
    }

.implement-content {
/*
padding:35px;
margin-top:100px;
background-color:#fff;
margin-bottom:60px;
*/
margin-bottom: 60px;
display: table-cell;
vertical-align: middle;
padding: 0px 25px 25px 25px;
}

.implement-animation-move-left {
right:50%;
margin-right: -412px;
}

.deployments-advanced-disabled {
opacity:0.5;
pointer-events:none;
}

.deployment-option {
border:1px solid var(--border-color-light);
padding:13px;
display:block;
background-color:#fff;
margin-bottom:-1px;
position:relative;
}

.deployments-itemwrapper {
    /*max-height: calc(100vh - 405px);*/
    /*overflow-y: auto;*/
    
}

.deployment-toggle {
float:right;
vertical-align: middle;
padding-right:10px;
}

.implement-content-wrapper {
display:none;
}

.deployment-option-details {
border-top:1px solid var(--border-color-light);
padding:12px;
padding-top:22px;
}

.deployment-30width {
    width:30%;
}

/* SURVEY FORM ELEMENTS PROD STYLES */
.prod-h1-style {
font-size:17pt;
font-weight:400;
padding:0;
line-height:26pt;
margin:0;
display:block;
width:100%;
padding-bottom:0px;
}

.prod-content {
/*margin-bottom:26px;*/
margin-bottom:0;
}

.prod-survey-input {
margin-top:9px;
margin-bottom:0px;
}

.prod-full-width {
width:100%;
}

.prod-smiley-container {
display:flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
height:40px;
max-width:350px;
}

.prod-smiley-item {
font-size:28pt;
font-weight:300;
margin-top:3px;
transition: all .2s;
cursor:pointer;
}

.prod-smiley-item-content {
width:47px;
text-align: center;
display:table;
position:relative;
}

.prod-smiley-item-text {
display:none;
transition: all .3s;
position:absolute;
background-color:#444;
color:#fcfcfc;
font-size:8.5pt;
padding: 4px;
border-radius:4px;
min-width:105px;
text-align: center;
top: -30px;
opacity:0;
}

:hover.prod-smiley-item-content .prod-smiley-item-text {
display:inline-block;
opacity:1;
}

.prod-smiley-item-cell {
display:table-cell;
vertical-align: middle;
}

:hover.prod-smiley-item {
height:47px;
border-radius:50%;
}

:hover.prod-smiley-container .prod-smiley-item {
opacity:0.5;
}

.entrydetails {
display:block; width:100%; padding:25px; margin-top:-1px; margin-bottom:25px; background-color:#fafafa;
background-image:url(https://insights.smilejet.com/img/inbox-shadow.png);
background-repeat:no-repeat;background-size:100% 1.4%; background-position: center top;
}

.inbox-shuffle-bar {
    background-color:#5894ff; background-color: var(--blue-primary); position:absolute; top:0; left:0; z-index:2;
    height:100%; width:50%; color:#fff; transition:all .2s ease; font-weight:600;
    border-radius:6px; text-align:center; padding: 9px; margin-left:0;
}

.inbox-shuffle-bar-results {
margin-left:50%;
}

.inbox-feedback-cues {
display:inline-block;
}

.feedback-inbox-opt {
    position:absolute; background-color:#fff; background-color:var(--inbox-opt); text-align:right; top:11px;
    min-width: 165px;
    padding: 15px;
    padding-bottom:12px;
    right: 20px;
    padding-right: 0;
    z-index: 3;
}

.inbox-left-head {
    position: fixed;
    background-color: #f7f7f7;
    z-index: 1;
    width: calc(50% - 100px);
    padding: 20px 0 10px 0;
    margin-top: -17px;
}

.inbox-main-controls, .inbox-checkbox-actions {
display:inline-block;
}

.inbox-item {
border-top:1px solid #e7ebf3; padding:14px 0px 14px 0px; display:table; width:100%; cursor:pointer;
}

:hover.inbox-item {
background-color:#f2f4f9;
}

.card-arrow-special {
position:absolute;right:0;height:calc(100% + 1px);top:0;background-color: #f2f4f9;width:20px;
background-image: url(https://insights.smilejet.com/img/spacer-inbox.png);
    background-repeat: repeat-y;
    background-position: right;
}

.card-arrow-special-active {
background-image: url(https://insights.smilejet.com/img/inbox-item-arrow.svg);
background-position:-1px;
background-size:cover;
}

.inbox-item-arrow {
display:table-cell; padding:14px 0 14px 0;vertical-align:middle; text-align:right; width:20px; background-color:#fff; background-repeat:no-repeat; background-size:auto; background-position:top left;
    background-imagsse: url(https://insights.smilejet.com/img/spacer-inbox.png);
    background-repeat: repeat-y;
    background-position: right;
}

.inbox-item-arrow-active {
background-image:url(https://insights.smilejet.com/img/inbox-item-arrow.svg); 
background-position: -1px;
background-size:cover;
}

.inbox-filter {
    display: block;
    position: fixed;
    top:0;
    max-width: 450px;
    min-width: 250px;
    padding: 25px;
    overflow-x: hidden;
    background-color: #fff;
    transition: all .7s ease;
    z-index: 100;
    height: 100%;
    right: 0;
    box-shadow: 0px 0px 20px rgb(204, 210, 226);
}

.inbox-filter-close {
margin-right:-475px;
}

.inbox-filter-minimize {
width:7%; min-width:75px;
}

.inbox-filter-content {
width:100%;
transition: all 1s ease;
margin-left:0;
}

.make-round {
border-radius:50%;
-webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
}

.prod-smiley-container :hover.prod-smiley-item {
opacity:1;
}

.prod-nav-area {

}

.prod-nav-left {
float:left;
width:40%;
display:inline-block;
text-align: left;
}

.prod-nav-right {
float:right;
width:60%;
display:inline-block;
text-align:right;
padding-top:7px;
padding-bottom:5px;
}

.prod-submit-button {

}

:hover.prod-submit-button {

}

.prod-thumbs-container {
display:flex;
justify-content: space-between;
flex-wrap: nowrap;
width:60px;
position:relative;
height:30px;
}

.prod-thumbs-item {
font-size:15pt;
font-weight:300;
margin-top:3px;
margin-right:20px;
position:absolute;
transition:all .2s;
}

.prod-thumbs-up {
left:50px;
}

:hover.prod-thumbs-up {
margin-top:-8px;
}

:hover.prod-thumbs-down {
margin-top:12px;
}


.prod-primary-button {
background-color:var(--blue-primary);
color:#fff;
border-radius:4px;
padding: 7px 14px 7px 14px;
transition: all 0.4s ease;
cursor:pointer;
}

:hover.prod-primary-button {
background-color: var(--darkblue-primary);
}

.prod-secundary-button {
border:1px solid #c1c9d4;
border-radius:2px;
padding:7px 14px 7px 14px;
}

:hover.prod-secundary-button {
background-color: var(--blue-primary);
color:#fff;
border:1px solid var(--blue-primary);
cursor:pointer;
}

.prod-multiple-choice {
    display: block;
    /*grid-template-columns: repeat(auto-fill,minmax(150px, 1fr));*/
    margin-left:-10px;
    width:calc(100% + 10px);
    margin-top:0px;
}

.prod-multiplechoice-button {
    margin-left:10px;
    margin-top:9px;
    text-align: center;
    display:inline-block;
    border-radius:10px;
    -webkit-border-radius:10px;
}

.prod-multiplechoice-vertical {
    display:table;
}

.prod-ces-container {
    display:table;
    width:100%;
}

.prod-ces-item {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
    font-size:10px;
    width:19%;
    padding-right:1%;
    height:40px;
}

.prod-ces-red {
    border-bottom:7px solid #f75f5e;
    color:#f75f5e;
    padding-bottom:6px;
}

.prod-ces-orange {
    border-bottom:7px solid #f6ad42;
    color:#f6ad42;
    padding-bottom:6px;
}

.prod-ces-green {
    border-bottom:7px solid #359c58;
    color:#359c58;
    padding-bottom:6px;
}

.prod-ces-item-text {
    padding-bottom:0;
    border:0;
}

.prod-ces-mobile-left {
    float:left;
    color: #f75f5e;
}

.prod-ces-mobile-right {
    float:right;
    padding-right:1%;
    color: #359c58;
}

.prod-ces-colorcontrol {
    transition:all .15s ease-in-out;
}

:hover.prod-ces-item > .prod-ces-colorcontrol {
    border-bottom:15px solid;
}

@media all and (max-width: 650px) {
    .prod-ces-item-text {
        display:none;
    }
    
    .sessions-page {
      width:70px;
      max-width:35vw;
    }

    .sessions-heatmap-page {
        max-width:54vw;
    }

    .mobile-black {
        color:#333;
    }
}

.prod-ces-clean {
clear: both;
}

.prod-nps-container {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
border: 1px solid #c1c9d4;
border-right: 0;
}

.prod-nps-item {
border-right: 1px solid #c1c9d4;
width: 10%;
text-align: center;
padding: 1% 1.2% 1% 1.2%;
cursor:pointer;
}

:hover.prod-nps-item {
background-color: var(--blue-primary);
border-right:1px solid var(--blue-primary);
color:#fff;
}

.prod-nps-help {
margin-top:8px;
color:#96a6c3;
}

.prod-font-size-small {
font-size:9pt;
}

.survey-publish-control {
    border-radius:5px;
}

.prod-div-goal4 {
text-align: center;
margin:0 auto;
}

.prod-inner-goal4 {
padding-top:10px;
margin:0 auto;
text-align:center;
}

.implement-progress {
display:block;
border-bottom:1px solid #d1d1d1;
}

.implement-progress-step {
display:inline-block;
text-align: center;
padding:10px 15px 10px 15px;
border:1px solid #d1d1d1;
border-bottom:0;
margin-bottom:-1px;
background-color: #fafafa;
}

.implement-progress-step-active {
border-bottom:2px solid #fff;
font-weight:600;
margin-bottom:-1px;
background-color: #fff;
}

.clear-float {
clear:both;
}

.sjtooltip-div {
background-color:#2e3441;
/*bacskground-color:var(--verydark-primary);*/
padding:9px;
color:#f9f9f9;
color:var(--default-white);
display:none;
position:absolute;
z-index:2000;
border-radius:4px;
}


.inline-tooltip-div {
    background-color:var(--verydark-primary);
    padding:10px 14px 12px 14px;
    color:#f9f9f9;
    color:var(--default-white);
    position:absolute;
    border-radius:10px;
    margin-top:12px;
    z-index:99;
    }
    
/* Pijltje linksboven */
.inline-tooltip-div::before {
    content: "";
    position: absolute;
    top: -18px; /* boven de div */
    left: 10px; /* iets vanaf de linkerkant */
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #20262e transparent;
}

.implement-conditions {

}

.overview-created-by-orb {
    width: 90px;
}

.guide-wrapper {
display:table; width:100%; margin-left:30px;
}

.guide-row {
display:table-row; margin-bottom:10px;
}

.guide-left {
display:table-cell; width:30px; border-left:1px solid #cbd0d3;
}

.vertical-align {
    vertical-align: middle;
}

.vertical-middle {
    vertical-align: middle;
}

.guide-right {
display:table-cell;
padding-bottom: 25px;
}

.guide-orb {
background-color: var(--blue-primary);
margin: 0;
margin-left: -13px;
width: 25px;
height: 25px;
text-align: center;
padding-top: 3px;
color: #fff;
padding-left:1px;
border-radius: 50%;
display:inline-block;
}

/* GUIDE ORB ANIMATION */
.orb-ripple {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 34px;
  width: 34px;
  border-radius: 100%;
  background: #6596eb;
  box-shadosw: 0 0 20px 0 rgba(0, 0, 0, 0.25);
}
.orb-ripple .span {
  position: relative;
  top: 0px;
  left: 8px;
  color:#fff;
}
.orb-ripple::before {
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -4px;
  left: -3px;
  right: 0;
  bottom: 0;
  content: '';
  height: 100%;
  width: 100%;
  border: 3px solid #bec7d4;
  border-radius: 100%;
  -webkit-animation-name: ripple;
          animation-name: ripple;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
          animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
  z-index: -1;
}
.orb-ripple::after {
  opacity: 0;
  displtay: flex;
  flex-directtion: row;
  justify-conttent: center;
  align-itetms: center;
  position: absolute;
  top: -4px;
  left: -3px;
  right: 0;
  bottom: 0;
  content: '';
  height: 100%;
  width: 100%;
  border: 3px solid #cbd3de;
  border-radius: 100%;
  -webkit-animation-name: ripple;
          animation-name: ripple;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
          animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
  z-index: -1;
}

@-webkit-keyframes ripple {
  from {
    opacity: 1;
    -webkit-transform: scale3d(0.75, 0.75, 1);
            transform: scale3d(0.75, 0.75, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1);
            transform: scale3d(1.5, 1.5, 1);
  }
}

@keyframes ripple {
  from {
    opacity: 1;
    -webkit-transform: scale3d(0.75, 0.75, 1);
            transform: scale3d(0.75, 0.75, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1);
            transform: scale3d(1.5, 1.5, 1);
  }
}

.orb-ripple-inner {
width: 34px;
                    height: 34px; padding-top:6px; display:inline-block; vertical-align:middle;
}
/* END GUIDE ANI*/

.sum-ul li {
    display: flex; /* Gebruik flexbox voor een nette uitlijning */
    align-items: top;
}

.sum-ul li i {
    margin-right:5px;
}

.fadeout-when-scrolldown {
transition:opacity .3s ease;
opacity:1;
}

.fadeout-when-scrolldown-on {
opacity:0;
}


/* BUTTON RIPPLE */
/* Ripple effect */
.primary-button {
  background-position: center;
  transition: background 0.8s;
}
.primary-button:hover {
  background: var(--blue-primary) radial-gradient(circle, transparent 1%, var(--darkblue-primary) 1%) center/15000%;
}
.primary-button:active {
  background-color: var(--blue-primary);
  background-size: 100%;
  transition: background 0s;
}


.implement-guide {
max-height:290px;
overflow-y:auto;
overflow-x:hidden;
padding-right:20px;
}

.choice {
border:2px solid transparent;
padding:3px;
cursor:pointer;
border-radius:8px;
}

.choice-active {
border:3px solid var(--blue-primary);
}

.choice:hover {
border:3px solid var(--blue-primary);
}

.implement-conditions input[type=text] {
width:90px;
}


.inbox-nav-item {
display:inline-block;
margin-left:12px;
}

.inbox-nav-item:last-child {
margin-right:12px;
}

.full-width {
width:100%;
width:100% !important;
}

.half-width {
width:50%;
width:50% !important;
min-width:100px;
}

.search-form-name {

}

.default-right-margin {
    margin-right:10px;
}

.default-right-xsmargin {
    margin-right:15px;
}

.default-right-xmargin {
    margin-right:25px;
}

.default-left-margin {
    margin-left:10px;
}

.medium-left-margin {
    margin-left:20px;
}

.default-left-xmargin {
    margin-left:30px;
}

.default-left-padding {
    padding-left:15px;
}

.default-right-padding {
    padding-right:10px;
}

.medium-right-padding {
    padding-right:25px;
}

.large-perc-right-padding {
    margin-right:2%;
}

.medium-bottom-margin {
    margin-bottom:25px;
}

.xmedium-bottom-margin {
    margin-bottom:50px;
}

.margin-bottom {
    margin-bottom:20px;
}

.default-top-margin {
    margin-top:10px;
}

.default-top-xmargin {
    margin-top:15px;
}

.default-bottom-margin {
    margin-bottom:10px;
}

.medium-top-margin {
    margin-top:25px;
}

.default-top-padding {
    padding-top:15px;
}

.default-bottom-padding {
    padding-bottom:15px;
}

.default-border {
border:1px solid #d4d4d4;
border:1px solid var(--default-bordercolor);
}

.small-top-padding {
    padding-top:10px;
}

.xsmall-top-padding {
    padding-top:6px;
}

.small-bottom-padding {
    padding-bottom:10px;
}

.medium-top-padding {
    padding-top:28px;
}

.large-top-padding {
    padding-top:33px;
}

.small-bottom-padding {
    padding-bottom:10px;
}

.clear {
    clear:both;
}

.center-box {
width:100%;
display:table;
height:100vh;
    text-align: center;
}

.center-box-container {
display:table-cell;
vertical-align: middle;
width:100%;
}

.center-box-width {
max-width:1395px;
padding-top:85px;
padding-left:88px;
padding-right:40px;
padding-bottom:100px;
text-align:left;
margin:0 auto;
}

.center {
    margin:0 auto;
    text-align:center;
}

/* Survey edit */
.survey-table {
    margin: 0 auto;
    padding: 0px 10px 0px 10px;
    display: table;
    width: 100%;
    padding-top: 105px;
    max-width: 990px;
    padding-left:35px;
    padding-right:35px;

}

.survey-table-wide {
max-width:1395px;
}

.survey-table-overview {
max-width:1395px;
}

.survey-option-tab {
    padding:8px 12px 8px 12px;
    background-color:rgba(255, 255, 255, 1);
    display:block;
    position:relative;
    margin-bottom:15px;
    cursor:pointer;
    min-width:100px;
}

:hover.survey-option-tab {
    background-color:rgba(255, 255, 255, 1);
    font-weight:600;
    webkit-box-shadow: 0px 0px 17px -10px rgb(88 107 140);
    -moz-box-shadow: 0px 0px 17px -10px rgb(88 107 140);
    box-shadow: 0px 0px 17px -10px rgb(88 107 140);
}

.survey-option-tab-active {
    /*webkit-box-shadow: 0px 0px 17px -10px rgb(88 107 140);
    -moz-box-shadow: 0px 0px 17px -10px rgb(88 107 140);
    box-shadow: 0px 0px 17px -10px rgb(88 107 140);
     */
    background-color: #fff;
    font-weight:600;
    color:#37434e;
}

.survey-option-active {
    webkit-box-shadow: 0px 0px 17px -10px rgb(88 107 140);
    -moz-box-shadow: 0px 0px 17px -10px rgb(88 107 140);
    box-shadow: 0px 0px 17px -10px rgb(88 107 140);
    background-color: #fff;
    font-weight:600;
}


.survey-option-items-table {
    display:table;
    width:100%;
    vertical-align: top;
}


.survey-option-items {
    width: 380px;
    display:table-cell;
    vertical-align: top;
    padding-left:25px;
}

.signup-loader {
    vertical-align:middle;
    display:inline-block;
}

.card-window {
    background-color:#fff; width:185px;
    padding:20px; display:inline-block; margin-left:20px; margin-top:20px;
    border:1px solid #dcdfe7;
    border-radius:3px;
    border:1px solid var(--light-bordercolor);
    box-shadow: 0px 0px 46px -35px rgb(88, 107, 140); /*0px 0px 33px -30px rgb(88, 107, 140);*/
    background-image:url(https://insights.smilejet.com/img/card-window-shadowgradient.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50px 100px;
}

.card-window-options {
    width:100%; text-align:center; padding-top:25px; visibility:hidden;
}

.card-window-views {
opacity:0.3;
transition:opacity .5s ease;
}

:hover.card-window {
    box-shadow: 0px 0px 30px 1px rgba(222,224,235,1);
    border:1px solid #fff;
}

:hover.card-window > .card-window-options {
    visibility:visible;
}

:hover.card-window > .card-window-views {
    opacity:1;
}

.thankyou-editable {
padding:5px;
display:inline-block;
border:1px solid transparent;
}

:hover.thankyou-editable {
border:1px dashed;
padding:5px;
}

.filter-panel {
    position: fixed;
    width: 455px;
    width:25vw;
    margin-right: -101vw;
    min-width:400px;
    max-width:520px;
    padding: 24px;
    padding-top:16px;
    top: 0;
    right: 0;
    transition:margin .3s ease;
    will-change: auto;
    background-color: rgba(255,255,255,1);
    /*backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);*/
    z-index: 12;
    margin-top:50px;
    height: calc(100% - 50px);
    padding-top:0px;
    overflow-y: auto;
    -webkit-box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
-moz-box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
}

.filter-header {
    position: fixed;
    background-color: rgba(255,255,255,0.9);
    margin-top:0;
    min-width: 220px;
    width: calc(25vw - 20px);
    display:inline-block;
    z-index:99;
    padding-top: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #efefef;
    backdrop-filter: blur(1px);
}

.filter-panel-open {
    margin-right: 0px;
}

.results-right {
    width:16%;
    min-width:340px;
}

.results-meta-width {
width:110px;display: inline-block;
}

.results-padding {
    /*padding-right:10px;*/
}

.overview-left {
width:50%;
}

.overview-left-inbox {
    width:55%;
}

.overview-right {
width:44%;
}

.dashboard-icons {
    display:block; height:60px; border-bottom:1px solid var(--light-bordercolor);
    background-repeat:no-repeat; background-position:center; background-size:contain;
}

.survey-option-items-rightside {
    display:table-cell;
    vertical-align: top;
}

.survey-option-items-content {
    background-coloroff:#fff;
    padding:20px;
    borderoff:1px solid var(--light-bordercolor);
    border-radius:5px;
    word-break: break-all;
}

.arrow {
    border-style: dashed;
    border-color: transparent;
    border-width: 0.20em;
    display: -moz-inline-box;
    display: inline-block;
    font-size: 46px;
    height: 0;
    line-height: 0;
    position: absolute;
    vertical-align: middle;
    width: 0;
    /* background-color: #fff; */
    border-left-width: 0.2em;
    border-left-style: solid;
    border-left-color: #fff;
    right: -18px;
    /* float: right; */
    margin-top: 0;
}

.survey-options-cell {
    width:100px;
    padding-right:30px;
    display:table-cell;
    vertical-align: top;
}

.survey-content-cell {
width:auto;
    vertical-align: top;
    padding-top:10px;
}

.survey-settings {
width:0%;
display:table-cell;
transition:all 0.6s;
vertical-align: top;
}

.survey-preview {
display:table-cell;
vertical-align: middle;
text-align:center;
}

.survey-wrapper {
    position: relative;
    /*Removed in jul 2024 so that editor toolbar (b, a, link etc) can be visible for first questionoverflow-x: hidden;*/ 
    text-align: center;
    border-radius:5px;
    /*background-color:#fff;*/
}

.survey-content {
text-align:left;
}

.survey-add-head {
    padding:12px 0px 12px 16px;
}

.survey-add-head-right {
    float:right; padding:12px; padding-right:1px;
}

.survey-main-options-fixed {
    position:absolute;top:1px;left:1px;width: calc(100% - 10px);z-index: 8;padding:13px 20px 6px 22px;cursor:pointer;background: linear-gradient(to left top, rgba(255,255,255,0.84), rgba(255,255,255,1));border-bottom: 1px solid #efefef;
}

.survey-main-options-buttons {
    position: absolute;padding-right: 25px;right: 0;z-index: 9; padding-top: 16px;padding-left: 20px;padding-bottom: 20px;text-align: right;
}

:hover.survey-main-options-fixed > .surveys-main-options {
opacity:1;
    display:block;
}

.survey-options-wrapper {
    position: relative;
    width: 100%;
    background-color: #fff;
    padding: 25px;
    padding-top:0;
    border: 1px solid var(--light-bordercolor);
    border-radius:5px;
}

.fixed-options-wrapper {
position:fixed;
    max-width: calc(50% - 93px);
    min-height: 75%;
    z-index:4;
    border: 1px solid var(--light-bordercolor);
}

.card-wrapper {
/* margin-left:-20px;
width: calc(100% + 20px); */
margin-top:16px;
}

.card-container-focus {
    height: 2px;
    width: 0%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #6596eb;
    background-color: var(--card-bg-focus);
    transition: width .3s ease;
    will-change: auto;
    }

.card-container-focus-open {
    width:100%;
}

.flex-table {
    display: flex;
    flex-direction: column;
    border-collapse: collapse;
    width:100%;
}

.flex-header,
.flex-row {
    display: flex;
    position:relative;
    width: 100%;
    padding: 10px;
    justify-content: space-between;
    border-bottom: 1px solid #d4d4d4;
}

.flex-play,
.flex-flag {
    width: 40px;
}

.flex-element {
    flex-grow: 1;
}

.flex-actions {
    width: 135px;
}

@keyframes float {
    0% {
        box-shadow: 0 5px 5px -5px rgba(0,0,0,0.3);
        transform: translatey(0px);
    }
    50% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.1);
        transform: translatey(-10px);
    }
    100% {
        box-shadow: 0 5px 5px -5px rgba(0,0,0,0.3);
        transform: translatey(0px);
    }
}

.feedback-view, .feedback-subview  {
    position: absolute;
    overflow-x: hidden;
    width: calc(100% - 45px);
    max-height: calc(100% - 150px);
    overflow-y: auto;
    padding-right:10px;
}

.survey-head-nav {
margin:0 auto;
visibility: hidden;
text-align:center;
margin-top:0;
background-image:url(https://insights.smilejet.com/img/survey-head-bg.png);
background-position:bottom center;
background-repeat:no-repeat;
width:100%;
    display:none;
/*padding-bottom:13px;*/
}

.survey-nav-content {
position: relative;
margin: 0 auto;
max-width: 650px;
padding: 18px;
padding-left: 50px;
z-index: 20;
}

.survey-nav-item {
display:inline-block;
margin-right:50px;
}

.survey-nav-slider {
position: absolute;
bottom: -4px;
left:224px;
transition: left 0.5s;
}

.survey-question-list {
    padding-left: 22px;
    padding-bottom: 15px;
    padding-top: 18px;
}

.survey-question-sortable {
    display:table;
    cursor:pointer;
    width:100%;
    padding:8px 0 8px 0;
    position:relative;
}

:hover.survey-question-sortable {
    background-color:#f4f5fa;
    border-radius:6px;
}

.question-sortable-item-type {
    padding-left:6px;
    display:table-cell;
    width:40px;
    vertical-align: middle;
}

.question-sortable-item {
    display:table-cell;
    vertical-align: middle;
    padding-right:6px;
}

.survey-content-head {
    padding:15px;
}

.survey-add-menu-new {
    position: fixed;
    width: 280px;
    background-color: #fff;
    z-index: 3;
}

.survey-content-head-right {
    padding-right: 0;
    margin-top: -20px;
    position: absolute;
    right: 0;
    padding-right: 15px;
}

.survey-content-center {
    display:block;
    width:100%;
    min-height:150px;
    position:relative;
}

.question-sortable-hover {
    display: none;
    padding: 5px;
    padding-right: 15px;
    position: absolute;
    right: 0;
    width: 40px;
    text-align: right;
    z-index: 2;
    height: 100%;
    padding-top:9px;
    margin-top:-8px;
    background-color: #fff;
}

:hover.survey-question-sortable > .question-sortable-hover {
    display:inline-block;
}

:hover.survey-question-sortable {
    font-weight: 600;
}

.survey-content-vertical-center {
    width:100%;
    height:100%;
}

.survey-content-wrapper {
    display:block;
}

.survey-content-option {
    display:inline-block;
    margin-left:15px;
}

.survey-change-type {
    background-color: #fff;
    width: calc(100% - 2px);
    padding: 20px 22px 20px 22px;
    top:1px;
    left:1px;
    will-change: auto;
    transition: all .5s ease;
    overflow-y: auto;
}

.survey-change-type-open {
    margin-left:0;
}

.survey-change-type-wrapper {
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    /*z-index:1;*/
}

.send-button {
    text-align: center;;
}

.actions-topdropdowns {
    display:inline-block;
    margin-right:10px;
}

.survey-edit-settings {
/*position:absolute;
z-index:6;
margin-top: 115px;

max-height:40%;
/*-webkit-transform: translateX(-100%);
transform: translateX(-100%);

overflow-y: auto;
overflow-x: hidden;
*/

    height: 100%;
    overflow-y: auto;
}

.survey-edit-settings-content {
    padding-top:54px;
}

.survey-edit-settings-wrap {
background-color:#fefefe;
min-height:100%;
}

.survey-edit-settings-open {
/*
-webkit-transform: translateX(75px);
transform: translateX(75px);

margin-left:calc(49% - 410px);
transition: margin-left 600ms ease;
will-change: margin;

 */
}

.survey-edit-settings-width {
width:50%;
}

.survey-wrapper-settings {
/*left:10px;*/
}

.survey-settings-tab {
border-bottom:1px solid #c1c9d4;
margin-top:25px;
width:100%;
display:table;
}

.survey-settings-tab-item {
display: table-cell;
    text-align: center;
    padding-bottom: 13px;
    width: 33%;
}

.question-save-ok-button {
    display:inline-block;
}

.survey-question-settings-toggle {
border-bottom:1px solid #c1c9d4;
padding:13px 0px 13px 0px;
}

.survey-question-settings-topborder {
border-top:1px solid #c1c9d4;
margin-top:15px;
}

.survey-question-settings {

    margin-top:5px;
}

.variableSelectorDiv {
    position:fixed;
    display:none;
    z-index:2;
}

.variableSelectorHtml {
    padding:15px;
    background-color:#fff;
    max-width:500px;
    border:1px solid #d4d4d4;
    max-height: 250px;
    overflow-y: auto;
}

.variableSelectorOption {
    display:block;
    padding:9px;
    padding-left:12px;
    cursor:pointer;
}

:hover.variableSelectorOption {
    background-color:#f4f5fa;
    font-weight:600;
}

.variableField {
    color:#fff;
    border-radius:5px;
    background-color:#f7aa64;
    padding:4px 7px 4px 7px;
    margin:5px;
    font-size:11px;
    line-height: 33px;
    white-space: nowrap;
    cursor: pointer;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.click-matrix {
display:block;
padding:8px 10px 7px 10px;
text-align: left;
margin-bottom:5px;
margin-right:15px;
position:relative;
}


:hover.click-matrix {
    background-color:#f4f5fa;
    border-radius:10px;
    font-weight:600;
}

.click-matrix-active {
border:1px solid var(--blue-primary);
font-weight: 600;
color:var(--blue-primary);
border-radius:10px;
}


.active-questiontype {
position:absolute;
top:3px;
right:8px;
padding:8px;
}

.survey-addquestion {
width:170px;
margin-top: -14px;
}

.survey-addquestion-open {
left: 0;
margin-left: 130px;
}

.prod-question-block {
padding:15px 25px 15px 21px;
border: 1px solid var(--light-bordercolor);
border-bottom: transparent;
border-top: 1px solid #e9e9e9;
cursor: move;
margin-bottom: 0;
position:relative;
cursor:move;
display:table;
width:100%;
max-width:920px;
word-wrap: break-word;
background-color:#fff;
transition:box-shadow .3s ease;
border-radius:5px;
    /*
    border-top: 5px solid #f1f2f7;
    border-bottom: 5px solid #f1f2f7;
    */
}


:hover.prod-question-block {
    box-shadow: 0px 0px 35px -23px rgb(88, 107, 140);
    border-bottom: 2px solid var(--blue-primary);
    opacity:1;
}

.prod-question-block-nopadding {
padding:14px 0px 14px 0px;
}

.prod-question-block-chatpadding {
    padding-top: 2px;
    padding-bottom: 2px;
}

.prod-question-conversational {

}

.prod-question-side {
    position:absolute; left:-43px; top:0; padding:10px; border-radius:8px; display:none; background-color:#fff; box-shadow:1px 1px 6px rgba(200,200,200,0.7);
}


.prod-qtype-helper {
    position: relative; color:#fafafa; background-color:#2e3441;padding: 7px 15px;margin-bottom:15px;margin-left: 25px; margin-top:-10px;text-align:left;display: block;border-radius: 10px;border-top-left-radius: 0;border-top-right-radius: 0;
}

.prod-qtype-helper::before {
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    right: 0;
    bottom: -3px;
    z-index: -1;
    background: linear-gradient(220deg, #463161,#c227bf, #d875ff, #c105ff);
    background-size: 600% 600%;
    border-radius: 10px;
    border-top-left-radius: 0;border-top-right-radius: 0;
    animation: borderAnimation 3s ease infinite;
  }
  
  @keyframes borderAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

.logic-info {
padding-top:10px;
}

.prod-question {
cursor:text;
width:100%;
padding-left:1px;
max-width:80%;
padding:3px;
padding-left:0;
border-bottom:1px solid transparent;
transition: padding .3s ease;
}

:focus.prod-question {
padding:5px;
background-color:rgb(246, 246, 250);
border-bosttom:1px solid #000;
}

.prod-compact-view .prod-question {
    max-width:95%;
}

.prod-compact-view {
    display: table-cell;
    width: 42%;
    vertical-align: middle;
    padding-right:20px;
}

.prod-chat-bubble {
    width: auto;
    max-width:70%;
    background-color: #f4f4f4;
    border-radius: 10px;
    border-top-left-radius: 0;
    padding: 12px;
    display: inline-block;
    text-align: left;
}

.prod-chat-bubble:empty {
    padding-right: 200px;
}

.prod-h1-color {
    /*color:#8395a5;*/
}

.block-active {
    border-left:2px dashed #b7bac6;
    border-bottom: 2px solid var(--blue-primary);
}

/* make sure that on hover on active div, you dont see the lighter hover left border*/
:hover.block-active {
    border-left:2px dashed #b7bac6;
}

.slide-placeholder {
    position: relative;
    background-color:transparent;
    height:20px;
}

/*
.slide-placeholder:after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    background-color: #FFF;
}*/

.input-white-bg {
background-color:#fff !important;
}

.formbuilder-subnav {
    margin-top: 49px;
    padding: 9px;
    position: fixed;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 14px;
    z-index: 2;
    border-bottom: 1px solid rgb(214 217 230 / 60%);
    backdrop-filter: blur(17px);
    background-color: rgba(255, 255, 255, 0.3);
}

.google-sign-in-button {
    cursor: pointer;
    transition: background-color .3s, box-shadow .3s;
        
    padding: 12px 16px 12px 42px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .35);
    
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 12px 11px;
}

.google-sign-in-button:hover {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
}

.google-sign-in-button:active {
    background-color: #eeeeee;
}

.google-sign-in-button:active {
    outline: none;
        box-shadow: 
        0 -1px 0 rgba(0, 0, 0, .04),
        0 2px 4px rgba(0, 0, 0, .25),
        0 0 0 3px #c8dafc;
}

.google-sign-in-button:disabled {
    filter: grayscale(100%);
    background-color: #ebebeb;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    cursor: not-allowed;
}


.configure {

position: absolute;
top: 0;
width: 100%;
right: 0%;
z-index: 11; /* important to overrule the add question hidden div*/
display: table;
min-height: 100%;
vertical-align: middle;
transition: all 0.5s;
}

.configure-content {
margin-bottom: 60px;
display: table-cell;
vertical-align: middle;
padding: 0px 0% 0px 30px;
}

.config-option-wrapper {
margin-right:3.5%; /* to keep it hori centered because we add 3% margin to settings overview */
}

.config-settings-width {
max-width:1055px;
margin:0 auto;
}


.slide-pos-right {
right:0;
margin-right:-100%;
}

.implement-pos-right {
right:0;
margin-right:-100%;
}

.implement-pos-center {
/*right: 50%;
margin-right: -412px;
*/
}

.build-pos-left {
left: 0;
margin-left: -440px;
transition: all 0.5s;
}

.configure-pos-left {
margin-right: 100%;
}

.addsquestion-pos-left {
left: 0;
margin-left: -170px;
transition: all 0.5s;
}

.configure-smallbox {
    background-color: #fff;
    width: 47%;
    margin-left: 3%;
    padding: 22px;
    margin-bottom: 30px;
    display: inline-block;
    border:1px solid #c8cdd8;
}

.settings-options {
    width: calc(100%);
    margin-left: -3%;
}

.survey-options-wrap {
padding:4px; padding-left:0; margin:0; width:100%; margin-top:3px;
}

.survey-options-plusminus {
margin:0; padding:0; float:right; padding-top:0px; display:inline-block;
}

.survey-options-plusminus-block {
padding:7px; border:1px solid #d4d4d4; border:1px solid var(--default-bordercolor); text-align:center; width:31px; background-color:#fff; cursor:pointer;
display:inline-block;
margin-left:6px;
}

.settings-design-form-contents {
background-color: #fff;
position: relative;
width: 400px;
max-height: 65vh;
padding: 15px 0px 30px 0px;
overflow-y: auto;
overflow-x: hidden;
text-align: center;
margin:0 auto;
margin-top:30px;
}

.settingsbar-preview {
width:calc(100% + 60px);
display:block;
margin-left:-30px;
text-align: center;
background-image:url(//insights.smilejet.com/img/wing-bg.svg);
background-position: bottom center;
background-repeat:no-repeat;
background-size:contain;
margin-bottom:-5px;
}

.design-input-mini {
width:118px;
}

.design-input-ultramini {
    width:60px;
}

.no-results-height {
min-height:150px;
}

.design-toggle {
width:160px;
}

.survey-settings-general {
background-color:#fff;
padding:30px;
max-width: 700px;
margin: 0 auto;
}

.check-input {
background-image:url(https://insights.smilejet.com/img/check.svg);
background-position: 97% 50%;
background-repeat:no-repeat;
background-size:14px;
}

.light-bg-wrapper {
padding:15px;
background-color:#f6f8fb;
}

/* lightbox */
.smilejet-modal-overlay {
    position: fixed;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 998;
    cursor: pointer;
    opacity: 0.5;
    transition:opacity .3s ease;
    background-color: #414f61; /*#eef1f5; /*#f5f7fa; /*rgb(224, 229, 236)*/;
}

.smilejet-modal-wrapper {
position: fixed;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: table;
    transition: height 0.6s ease 0s, opacity 0.6s ease 0s;
}

.smilejet-modal-pos {
display:table-cell; vertical-align:middle; text-align:center; padding:20px;
}

.smilejet-modal-hanger {
    position: fixed;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 1001;
    display: table;
    background-color:transparent;
    transition: all 0.6s ease 0s, opacity 0.6s ease 0s;
    width: 100%;
    transition: all 2s ease;
    will-change: auto;
    -webkit-box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
    -moz-box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
    box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
}

.hanger-to-white {
background-coslor:#fff;
}

.smilejet-modal-hanger-open {
    margin-left: -101vw;
}

.smilejet-modal-content-wrapper {
max-width: 650px;
padding:25px;
border-radius:5px;
max-height: 89vh;
margin: 0 auto;
background-color: #fff;
position: relative;
overflow-y: auto;
text-align: left;
overflow-x: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
    will-change: auto;
    transition: all .5s ease;
}

.deploy-modal-wide {
    max-width:1175px;
    paddding:0;
}

.is-login-page {
    max-width: 460px;
    padding: 20px;
    background-color:transparent;
    /*box-shadow: 0 0 19px 0 rgb(63 73 105 / 8%);*/
}

.smilejet-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index:9;
    padding: 20px;
    cursor:pointer;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 15px;
}

.smilejet-modal-fullscreen {
max-width: 52vw;
padding: 20px;
padding-right: 0;
padding-top: 0;
height: 100vh;
max-height: 100vh;
overflow-y:hidden; /* disable default scrollbar */
min-width:810px;
}

.smilejet-modal-fullscreen-wide {
    max-width: 95vw;
    height: calc(100vh - 20px);
    max-height: 100vh;
    /* TURNED OFF MARCH 2022 when implementing video sessions: min-width: 810px; */
}

/* end lightbox */


.login-spans {
padding-right:20px;
}

.login-table {
    display:block;
    padding-top:10px;
    width:100%;
}

.login-cell {
    display:block;
    padding-bottom:5px;
}

.disable-submit {
background-color:#a8a8a8;
border:1px solid #a8a8a8;
}

:hover.disable-submit, :active.disable-submit {
background-color:#a8a8a8;
border:1px solid #a8a8a8;
}

.rating-red {
background-color:#ef4c4c;
}

.rating-orange {
background-color:#f69f4c;
}

.rating-green {
background-color:#3bbf3e;
}

.password-rating {
position: absolute;
right: 30px;
padding: 2px;
border-radius:4px;
/* top: 0; */
/* margin-top: -10px; */
padding-left: 8px;
padding-right: 8px;
font-size: 9pt;
text-align: center;
/* width: 60px; */
margin-top: 6px;
margin-right: 8px;
color: #fff;
border: 0;
}

/* surveys dashboard styles */
.surveys-center {
margin:0 auto;
max-width: 1260px;
}

.main-content {
padding-left:112px;
padding-right:60px;
margin-top:20px;
width:100%;
}

.main-nav-icon {
display:block;
padding-top:20px;
padding-bottom:20px;
text-align:center;
}

.main-sub-nav {
border-bottom: 2px solid #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 55px;
    text-align: center;
    margin-left: 7%;
    margin-right: 7%;
    display: block;
}

.main-sub-nav-content {
max-width:1000px;
margin:0 auto;
text-align: center;
}

.main-sub-nav-item {
margin-left:30px;
display:inline-block;
vertical-align: middle;
}

.surveys-table {
width:100%;
display:block;
/*height: calc(100vh - 110px);*/
}

.surveys-left {
display:table-cell;
vertical-align: top;
width:295px;
padding-left:0px;
border-right:1px solid #d4d4d4;
border-right:1px solid var(--default-bordercolor);
padding-right: 20px;
}

.surveys-right {
padding-left:40px;
display:table-cell;
vertical-align: top;
margin-top:0px;
}

.survey-content-builder {
    max-width: 920px;
    margin: 0 auto;
}

/* may 2025
.builder-settings {
    width: 380px;
    min-height: 400px;
    display: table-cell;
    vertical-align: top;
    position: relative;
    padding-top:2px;
}*/

.builder-settings {
width: 400px;
height: 100vh;
display: block;
vertical-align: top;
top: 0;
position: relative;
position: fixed;
padding-top: 2px;
right: -500px;
z-index:5;
overflow-y:auto;
border-left:1px solid #e4e4e4;
background-color:#fff;
transition:all .5s ease;
}

.builder-questions {
    width:auto;
    display:block;/*table-cell;*/
    vertical-align: top;
    padding-right:0; /*25pxz*/
}

.builder-questions-content {
    position:relative;
        word-break: break-all;
}

.builder-settings-content {
    background-color: #fff;
    height: 85%;
    width: 380px;
    position: absolute;
    border: 1px solid var(--light-bordercolor);
    border-radius:5px;
}

.feedback-forms-topmargin {
height:calc(100% - 190px);
}

.dash-title {
margin-bottom:20px;
font-size:15pt;
}

.question-type-help-overlay {
    position:absolute;height:100%;width:100%;background-color:#fff;opacity:0.9;z-index:1; display:none;
}

.question-type-help-wrapper {
    position: fixed;
    height: calc(100vh - 170px);
    width: 450px; z-index:2; display:none;
}

.question-help-table {
    display:table;
    width:100%;
    height:100%;
    vertical-align: middle;
    text-align:center;
}

.question-help-table-cell {
    vertical-align: middle;
    display:table-cell;
    padding:25px;
    text-align:left;
    padding-bottom:70px;
}

.blurDiv {
    filter:blur(4px);
    transition:all .5s ease;
}

.account-support, .account-area-right, .trial-days {
display:inline-block;
cursor:pointer;
}

.account-content {
    background-color:#fff;
}

.account-items {
cursor:pointer;
    margin-bottom:5px;
    padding: 10px 0px 10px 0px;
}

:hover.account-items {
font-weight:600;
color:#fff;
color:var(--pure-white);
}

.builder-settings-open {
    right:0;
}

.trial-days, .account-support {
padding-right:20px;
}

.account-options {
position: fixed;
background-color: #414754;
background-color:var(--dark-bg);
color:#f9f9f9;
color:var(--default-white);
width: 70%;
min-width:240px;
padding: 25px;
max-width:425px;
right: -80%;
top: 0;
height:100vh;
transition: all .2s ease;
z-index: 100;
font-size:12pt;
}

.account-options-open {
    right:0;
}


.survey-folder-wrapper {
display: inline-block;
width: 150px;
background-color: #fff;
padding: 6px 14px 6px 12px;
border: 1px solid #d4d4d4;
border: 1px solid var(--default-bordercolor);
border-radius:3px;
cursor:pointer;
position:relative;
z-index:10;
}

.folder-overlay {
position: fixed;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
width: 100%;
z-index: 10;
cursor: pointer;
opacity: 0.6;
background-color: #414f61;
}

.survey-folder {
display:block;
padding-top:10px;
cursor:pointer;
position:relative;
}

:hover.survey-folder {
font-weight:600;
}

.survey-sub-folder {
margin-left:25px;
padding-top:12px;
cursor:pointer;
position:relative;
}

.survey-folder-content {
    background-color: #fff;
    z-index: 9;
    padding: 20px;
    position: fixed;
    top: 0;
    margin-top: 61px;
    width: 240px;
    max-height: 500px;
    border:1px solid #d8d8d8;
    overflow-y: auto;
    margin-left: 115px;
    border-radius:4px;
    -webkit-box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
    -moz-box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
    box-shadow: 0px 0px 33px -23px rgb(88, 107, 140);
}

.folder-wrapper-caret {
display:inline-block;
float:right;
font-size:15pt;
}

.folderOptions {
display:none;
padding-left:7px;
position:absolute;
right:0;
}

:hover.survey-sub-folder .folderOptions {
display:inline-block;
}

:hover.survey-folder .folderOptions {
display:inline-block;
}

.survey-dirup {
margin-top:20px;
}

.survey-last-sub {
margin-bottom:30px;
}

.survey-item {
background-color:#fff; width:190px; padding:20px; height:175px; border-top:5px solid #d46daa; margin-right:15px; display:inline-block; margin-bottom:20px;
}

.deployment-page-log {
    display:inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 95%;
    font-weight:600;
    vertical-align: middle;
}

.inbox-shuffle {
    border-radius:5px;
}

.card-container {
display: block;
    padding: 10px;
    width: 100%;
    margin-left: 0px;
    background-color: #fff;
    background-color: var(--pure-white-cardbg);
    position: relative;
    margin-top: 8px;
    border:1px solid #dcdfe7;
    border:1px solid var(--light-bordercolor);
    box-shadow: 0px 0px 33px -30px rgb(88, 107, 140);
    border-radius:7px;
}

.card-box-container {
position:relative;
transition: all .4s ease;
}

.card-show-edit {
    display:none
}

.low-opacity {
opacity:0.7;
}

:hover.card-box-container {
background-color:#fff;
box-shadow: 0px 0px 30px 1px rgba(222,224,235,1);
}

.card-box-center {
text-align: left;
padding-left: 30px;
padding-top: 55px;
}

:hover.card-box-container > .card-box-footerwrap {
visibility: visible;
}

:hover.card-container > .card-box-footerwrap {
display:inline-block;
}

.card-box-name {
}

.card-box-footerwrap {
display:none;
}

.card-box-footer {
position:absolute;
bottom:0;
width:100%;
    padding-bottom:15px;
    text-align:center;
}



.grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
}

.grid>* {
  background-color: #fff;
  min-height: 170px;
  max-width:320px;
  border:1px solid #e5e7f0;
}

.survey-card-delete {
float:right;
display:none;
margin-top:3px;
padding-right: 0px;
}

.card-show-res {
        display:inline-block;
    }

:hover.card-container > .survey-card-delete {
display:inline-block;
}

:hover.card-container {
background-color:#fff;
background-color:var(--inbox-opt);
border:1px solid transparent;
box-shadow: 0px 0px 20px 1px rgba(222,224,235,1);
}

:hover.card-container > * .card-content {
font-weight:600;
}

:hover.card-container .card-show-res {
visibility:hidden;
}

:hover.card-container .card-show-edit {
    display:inline-block;
}

:hover.card-container .feedback-inbox-opt {
    /*display:inline-block;*/
}

.gradient {
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #fafafa 0%, #fff 38%, #fafafa 44%);
    background-size: 2000px 800px;
    position: relative;
    
}

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 968px 0
    }
}

.loading-card {
    min-height:60px;
    background-color:#fff;
}

:hover.loading-card {
    box-shadow: 0px 0px 33px -30px rgb(88, 107, 140);
    border:1px solid #dcdfe7;
    border:1px solid var(--light-bordercolor);
}

.signup-hideoptions {
    display:none;
}

.fade-loop {
    animation: fadeInOut 1.5s infinite;
  }
  
  @keyframes fadeInOut {
    0%   { opacity: 1; }
    50%  { opacity: 0.3; }
    100% { opacity: 1; }
  }

/* for text on white bg */
.blue-faded {
color:#95a0bd;
}

/* for text that is on the light blue bg */
.blue-bluefaded {
color:#8390b3;
}

.card-colorlabel {
width:100%; height:15px; left:0; right:0; position:absolute;
}

.card-settings {
position:absolute; z-index:2; background-color:#444; width:100%; top:1px; padding:20px; padding-top: 45px; padding-left:35px;left:0; right:0; bottom:0; display:none;
}

.card-hamburger {
position:absolute; z-index:3; right:15px; top:15px; padding:6px; cursor:pointer; padding-bottom:15px;
}

.card-content {
position:relative; display:block; vertical-align:middle; text-align:center; cursor:pointer; margin-bottom:8px; height:65px;
}

.card-footer {
text-align:center; padding-top:3px;
visibility: hidden;
}

:hover.card-main > div {
visibility: visible;
}


.white-circle {
    background-color: transparent;
    border: 1px solid #fff;
    color: inherit;
    font-weight: 400;
    margin: 0;
}

.question-type-icon {
    vertical-align: middle;
    height: 20px;
    margin-bottom: 3px;
    margin-left: -5px;
    padding-right:7px;
}

.tab-type-content {
    overflow-x:visible;
    padding-top:55px;
}

/* HAMBURGER (MENU) / CLOSE ANIMATION */
.account-menu {
display:inline-block;
    float: right;
    padding-left: 15px;
padding-top:4px;
}

.hamburger-ani {
  width: 20px;
  height: 20px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.hamburger-ani span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #f5f5f5;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}



/* Icon 4 */

.hamburger-ani {
}

.hamburger-ani span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.hamburger-ani span:nth-child(2) {
  top: 6px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  margin-left:3px;
}

.hamburger-ani span:nth-child(3) {
  top: 12px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.hamburger-ani.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -1px;
  left: 2px;
}

.hamburger-ani.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.hamburger-ani.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 13px;
  left: 2px;
}


.input-error {
border:1px solid #ff6262 !important;
border:1px solid var(--red) !important;
color:#ff6262;
    padding-left:11px;
    padding-left:11px !important;
color:var(--red);
}

:focus.input-error {
-webkit-box-shadow: 0px 0px 6px 1px rgba(255,98,98,0.24) !important;
-moz-box-shadow: 0px 0px 6px 1px rgba(255,98,98,0.24) !important;
box-shadow: 0px 0px 6px 1px rgba(255,98,98,0.24) !important;
}

.feedback_answers {
    margin-left: 40px;
    margin-top: 10px;
    margin-bottom: 30px;
    padding-top: 6px;
    padding-right: 15px;
    border-top: 2px dashed rgb(212, 212, 212);
}


.builder-add-menu {
display:inline-block; width:49%; padding:10px; padding-top:12px; text-align:center; margin-bottom:-2px; margin-right:-3px;
}

.builder-edit-menu {
display:inline-block; width:49%; padding:10px; padding-top:12px; text-align:center; border-left:1px solid #d4d4d4; border-left: 1px solid var(--default-bordercolor); margin-bottom:-2px;
}

.builder-add-menu-active {
background-position:bottom right; background-repeat:no-repeat;
border-bottom:2px solid #fff; font-weight:600;
}

.builder-edit-menu-active {
background-position:bottom left; background-repeat:no-repeat;
border-bottom:2px solid #fff; font-weight:600;
}

/* Deployments and slider */
.deployment-rules-content {
padding:30px;
}

.smilejet-slider {
background-color:#fff;
position:fixed;
width:610px;
height:100%;
right:-615px;
top:0;
overflow-y:auto;
z-index:10000;
-webkit-transition: right 0.6s;
	transition: right 0.6s;
}

.smilejet-slider-show {
right:0;
}

.smilejet-slider-wrapper {
position:fixed;
width:100%;
height:100%;
z-index:9999;
top:0;
right:0;
left:0;
bottom:0;
background-color:transparent;
}

.smilejet-slider-content {
padding:30px;
}

.deployments {
background-color:#fff;
margin-bottom:40px;
position:relative;
z-index:999;
border-radius:6px;
}

.deployments-wrapper {
text-align: left;
}

.deployments-padding {
padding:18px;
}

.deployment-details-block {
display:block;
}

.deployment-item-right {
float:right;
}

.deployment-item-butt-margin

{
margin-top:-6px;
}

.deployment-item, .general-item {
border-top:1px solid #d3dbe6;
padding-top:10px;
padding-bottom:10px;
padding-left:0px;
padding-right:0px;
cursor:pointer;
}

:hover.deployment-item {

}

:hover.general-item {
font-weight:600;
    color:#37434e;
}

.designNav {
transition: all .2s ease;
cursor:auto;
}

.designNav-active {
font-size:12pt;
}

.designHead {
padding:10px 40px 10px 0px;
cursor:pointer;
}

.general-item {
padding-top:12px;
padding-bottom:12px;
padding-left:0px;
padding-right:0px;
}

.deployment-details-left {
margin-top:3px;
width:90px;
display:inline-block;
color:#a1abc8;
}

.deployment-details-right {
display:inline-block;
color:#757d94;
margin-top:3px;
}

.deployment-code {
padding: 9px;
padding-left: 12px;
background-color: #fff;
    display: inline-block;
    margin-bottom: 15px;
}

.settings-translate-content {
padding-top:90px;
padding-bottom:90px;
padding-right:12px;
}

.translate-input {
display:table-cell;
}

.translate-plus {
display:block; width:65px
}

.translate-unavailable {
opacity:0;
}

.default-left-right-padding {
padding-left:30px;
padding-right:30px;
}

.reset-padding {
    padding:0;
}

.default-padding {
    padding:20px;
}

.default-xsmall-padding {
    padding:15px;
}

.default-small-padding {
    padding:10px;
}

.default-medium-padding {
padding:25px;
}

.default-mobile-padding {
    padding:8px;
}

.surveys-topmargin {
margin-top:18px;
}

.surveys-notopmargin {
margin-top:0;
}

.notice-bar {
border:1px solid #5894ff;
border:1px solid var(--blue-primary);
background-color:rgba(249, 251, 255, 0.6);
color: #143f8f;
border-radius:5px;
}

.delete-bar {
    background-color:#fff6f6;
    border:1px solid #ea3434;
}

.workspace-section {
max-width: 180px;
margin-left: 85px;
margin-top: 30px;
position: fixed;
}

.ws-mobile {
background-color:transparent;
color:var(--dark-bg);
border:1px solid var(--dark-bg);
font-weight:400;
}

.surveys-detail-section {
width: 50%;
float: right;
padding:30px;
padding-left:38px;
padding-right:70px;
position: absolute;
right: 0px;
top: 0px;
height:100%;
}

.survey-entries-loading {
    background: linear-gradient(270deg, #d9dde6, #f5f5f5);
    background-size: 400% 400%;
    width:calc(100% - 65px);
    height:35px;
    margin-left: 9px;
    margin-bottom:15px;
    -webkit-animation: gradientLoadAni 1s ease infinite;
    -moz-animation: gradientLoadAni 1s ease infinite;
    animation: gradientLoadAni 1s ease infinite;
}

@-webkit-keyframes gradientLoadAni {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradientLoadAni {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradientLoadAni {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.survey-detail-table {
display:table; height:100%; width:100%;
}

.survey-detail-cell {
display:table-cell; height:100%; vertical-align:middle; text-align:center;
}

.entry-unread {
width:8px; height:8px; background-color:#ff0000; border-radius:50%; position:absolute; left:-3px; top:-3px;
}

.active-survey-details {
background-color:#fff;
background-image: url(https://insights.smilejet.com/img/list-item-shadow.jpg), url(https://insights.smilejet.com/img/list-item-shadow.jpg);
    background-position: top right, bottom right;
    background-repeat: no-repeat;
}

:hover.active-survey-details {
background-color:#fff;
}

.surveys-slide-section {
margin: 0;
/*overflow-y: auto;*/
overflow-x: hidden;
overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.surveys-slide-section::-webkit-scrollbar { /* WebKit */
    wsisdth: 0;
    heisght: 0;
}


.surveys-slide-header {
position:fixed;
background-color:#fff;
padding-bottom:21px;
padding-top:30px;
width: calc(48% - 142px);
padding-right: 14px;
margin-left: -10px;
padding-left: 10px;
z-index:2;
}

.surveys-inbox-header {
position: fixed;
    background-color: #fff;
    padding-bottom: 21px;
    margin-left: -25px;
    padding-left: 32px;
    margin-top: -30px;
    padding-top: 30px;
    z-index: 99;
    width: calc(52vw - 10px);
    min-width: 802px;
}

.surveys-slide-entries {
position: fixed;
    margin: 0;
    width: calc(48% - 75px);
    height: 100vh;
    margin-left: -52%;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 20;
    will-change: auto;
    transition: all .7s ease;
}

.slide-entries-open {
margin-left: 57px;
}

.surveys-slide-entries-header {
position: absolute;
padding-top: 26px;
background-color: #fff;
margin-top: 0;
padding-left: 25px;
padding-bottom: 15px;
width: 100%;
z-index: 1;
background-image: url(https://insights.smilejet.com/img/inbox-spacer.jpg);
background-repeat: repeat-y;
background-position: right;
}

.survey-details-marginright {
margin-right:15px;
}

.summary-result-block {
display:block;
background-color: #fff;
padding: 16px;
border-radius: 5px;
text-align: left;
}

.summary-result-question {
margin-bottom:9px;
}

.inbox-pic {
display:table-cell; border-top:1px solid #e7ebf3; padding:14px 0 14px 0;  width:50px; vertical-align:middle;
}

.inbox-question {
display:table;
width:100%;
}

.inbox-float {
    position:absolute;width:40px;height:40px;margin-top: 2px;z-index: 9;color: #fff;padding-top: 10px;margin-left: -25px;
    font-size: 20px; cursor:pointer; overflow: hidden; box-shadow: 0 5px 15px 0px rgb(183 206 247);
    transform: translatey(0px); animation: float 5s ease-in-out infinite;
    border-radius:50%;text-align: center;
    background-color: #6596eb;
}

.dynamic-text {
    max-width: 275px;
    display:inline-block;
    word-wrap: normal;
    white-space: nowrap;
    /*overflow: hidden !important;*/
    text-overflow: ellipsis;
}

.inbox-resultdata-content {
width: 100%;
}

.inbox-wrapper {
width: 100%;
height: 100vh;
overflow-y: auto;
margin-top: -30px;
padding-top: 30px;
padding-bottom: 30px;
}

.inbox-answer-wrapper {
    padding: 12px 15px 12px 0px;
    max-width:calc(100% - 30px);
    border-bottom:1px dashed rgb(212, 212, 212); padding-top: 15px; padding-bottom: 5px;
}

:hover.answer-wrapper-hover {
font-weight:600;
}

.inbox-snippet {
opacity:1;
transition:opacity .5s ease;
word-break: break-all;
}

.inbox-snippet-lowopacity {
opacity:0.3;
}

.survey-inbox {
position:relative;
padding-top: 30px;
}

.survey-inbox-details {
top:0;
position:absolute;
height: 100vh;
overflow-y: auto;
width: calc(100% - 26px);
display:none;
}

.survey-inbox-details {
padding-top:60px;
}

.details-summary {
height:100vh;
overflow-y:auto;
padding-top:30px;
}

.hide-center-menu {
    display:block;
    margin-top:-10px
}

.hide-center-buttons {
    display:none;
}

.margin-top-report-dropdowns {
    display:inline-block;
}

.preview-iframe-wrapper {
    position: absolute;
    z-index: 1;
    resize: horizontal;
    top: 48px;
    left: 0;
    overflow: auto;
    width: 100%;
    height: calc(100% - 65px);
}

.preview-iframe {
    border:0; width:100%; height:100%; display: flex; transition:width .3s ease; margin: 0 auto; overflow-x:hidden; border:1px solid #d8d8d8;
}

.deployment-stats-grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(11em, 13em));
}

.survey-options-list-mobile {
    display:none;
    position:fixed;
    z-index: 4;
    width: calc(100% - 44px);
    margin-left: -25px;
    padding-left: 25px;
    margin-top: -35px;
    padding-right: 15px;
    padding-bottom: 15px;
    background-color: #fcfbfd; /*rgba(244,244,245,0.85); /*rgb(240,242,247,0.8);*/
    backdrop-filter: blur(3px);
    
}

.inbox-right-30 {
    display:flex; flex: 0 0 32.5%; vertical-align:top;
}

.add-top-header {
    display:none;
}

.surveys-mobile-head-nav {
    display:none;
    text-align: center;
    padding-top: 12px;
}

.survey-close-addquestion {
    display:none;
    float:right;margin-bottom:2px;cursor:pointer;padding-right: 20px;
}

.mobile-settings {
    vertical-align: middle;
    position: absolute;
    top: 0;
    right: 0;
    padding:10px;
    padding-top: 13px;
    padding-right: 22px;
}

.meta-icons {
    position:absolute;right:0; padding-top:1px;
    background-color: #fff;
padding-left: 15px;
}

.show-mobile {
    display:none;
}

.live-tile {
    -webkit-transition: -webkit-transform .3s ease;
    -moz-transition: -moz-transform .3s ease;
    -o-transition: -o-transform .3s ease;
    transition:transform .3s ease;
    will-change: auto;
    backface-visibility: hidden;
}

:hover.live-tile {
    transform:scale(1.04);
}

:hover.live-tile-subtle {
    transform: translateZ(0);
    transform:scale(1.01);
    backface-visibility: hidden;
    border:1px solid transparent;
}

#omnisearch::placeholder {
    color: #ddd; /* Standard syntax */
}

#omnisearch::-webkit-input-placeholder {
    color: #ddd; /* Chrome, Safari, Opera */
}

#omnisearch:-ms-input-placeholder {
    color: #ddd; /* Internet Explorer 10-11 */
}

#omnisearch::-ms-input-placeholder {
    color: #ddd; /* Microsoft Edge */
}

#omnisearch:focus, #omnisearch:hover {
    outline:none;
    -webkit-box-shadow: 0px 0px 22px -6px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 22px -6px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 22px -6px rgba(0,0,0,0.5);
}

/*
.team-orb-colorcode1 { border: 2px solid #4184ea; background-color:#fff; color:#4184ea; padding-top:4px; }
.team-orb-colorcode2 { border: 2px solid #f8a96a; background-color:#fff; color:#f8a96a; padding-top:4px; }
.team-orb-colorcode3 { border: 2px solid #ff8d8c; background-color:#fff; color:#ff8d8c; padding-top:4px;  }
.team-orb-colorcode4 { border: 2px solid #ff8cd5; background-color:#fff; color:#ff8cd5; padding-top:4px; }
.team-orb-colorcode5 { border: 2px solid #c790ff; background-color:#fff; color:#c790ff; padding-top:4px;  }
.team-orb-colorcode6 { border: 2px solid #4ccb5e; background-color:#fff; color:#4ccb5e; padding-top:4px; }
*/

.team-orb-colorcode0 { background-color:#c790ff; color:#fff; border:1px solid #c790ff;padding-top:6px;  }
.team-orb-colorcode1 { background-color:#f7eeff; color:#6527a4; border:1px solid #c790ff;padding-top:6px; }
.team-orb-colorcode2 { background-color:#f8a96a; color:#fff; border:1px solid #f8a96a;padding-top:6px; }
.team-orb-colorcode3 { background-color:#ff8cd5; color:#fff; border:1px solid #ff8cd5; padding-top:6px; }
.team-orb-colorcode4 { background-color:#ffefee; color:#ef5750; border:1px solid #ef5750; padding-top:6px; }
.team-orb-colorcode5 { background-color:#c790ff; color:#fff; border:1px solid #c790ff;padding-top:6px;  }
.team-orb-colorcode6 { background-color:#4ccb5e; color:#fff; border:1px solid #4ccb5e;padding-top:6px; }
.team-orb-colorcode7 { background-color:#4184ea; color:#fff; border:1px solid #4184ea;padding-top:6px; }
.team-orb-colorcode8 { background-color: #f7eeff; color: #6527a4; border:1px solid #c790ff; padding-top:6px;  }
.team-orb-colorcode9 { background-color: #f7eeff; color: #6527a4; border:1px solid #c790ff; padding-top:6px;  }

.colorcode-4184ea {
    border-left:3px solid #4184ea;
    border-left:3px solid #4184ea !important;
}

.colorcode-ff8d8c {
    border-left:3px solid #ff8d8c;
    border-left:3px solid #ff8d8c !important;
}

.colorcode-ff8cd5 {
    border-left:3px solid #ff8cd5;
    border-left:3px solid #ff8cd5 !important;
}

.colorcode-c790ff {
    border-left:3px solid #c790ff;
    border-left:3px solid #c790ff !important;
}

.colorcode-f8a96a {
    border-left:3px solid #f8a96a;
    border-left:3px solid #f8a96a !important;
}

.colorcode-4ccb5e{
    border-left:3px solid #4ccb5e;
    border-left:3px solid #4ccb5e !important;
}

/* color codes for ux detctions */
.ux-cursor {
    background-color:#f7eeff; color:#6527a4; border:1px solid #c790ff;
}

.ux-dead {
    background-color: #f0f0f0;
    color: #2d2d2d;
    border: 1px solid #7a7a7a;
}

.ux-rage {
    background-color: #ffece4;
    color: #8c1515;
    border: 1px solid #e9c6b7;
}

.ux-slow {
    background-color: #e8ffeb;
    color: #033512;
    border: 1px solid #42bb93;
}

.ux-friction {
    background-color: #ffeae6;
    color: #562f03;
    border: 1px solid #bb7442;
}

.ux-scroller {
    background-color: #ffe6f3;
    color: #530430;
    border: 1px solid #bb42b1;
}

.ux-error {
    background-color: #ffe6e6;
    color: #ae1616;
    border: 1px solid #ff9090;
}

.prod-helpquestion {
    opacity:0.7;
    -webkit-opacity:0.7;
}

/* chat style per q type*/
.prod-survey-input-chatstyle > .prod-nps-container {
    max-width: 65%;
    margin-left: auto;
    margin-right: 0;
}

.prod-survey-input-chatstyle > .rating-container {
    max-width: 80%;
    margin-left: auto;
    margin-right: 0;
}

.prod-survey-input-chatstyle > .rating-container > .rating {
    float:none;
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-textfield {
    max-width: 65%;
    margin-left: auto;
    margin-right: 0;
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-textarea {
    max-width: 65%;
    margin-left: auto;
    margin-right: 0;
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-smileys {
    max-width: 70%;
    margin-left: auto;
    margin-right: 0;
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-ces {
    max-width: 65%;
    margin-left: auto;
    margin-right: 0;
}

.prod-survey-input-chatstyle > .prod-thumbs-container {
    max-width: 65%;
    margin-left: auto;
    margin-right: 20px;
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-dropdown {
    max-width: 65%;
    margin-left: auto;
    margin-right: 0;
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-checkbox {
    max-width: 65%;
    margin-left: auto;
    margin-right: 0;
}

.prod-survey-input-chatstyle .cb-checkbox {
    width: calc(100% - 8px);
    border-bottom:1px solid #d4d4d4;
    padding:8px;
    margin-bottom:5px;
    padding-left:30px;
    margin-left:5px;
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-multiple-choice {
    max-width: 65%;
    margin-left: auto;
    margin-right: 0;
}

.prod-survey-input-chatstyle > .prod-multiplechoice-vertical {
width:calc(100% - 10px);
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-screenshot {
    float:right;
}

/* dont add a space between the classes! */
.prod-survey-input-chatstyle.prod-fileupload {
    max-width: 65%;
    margin-left: auto;
    margin-right: 0;
}

.mobile-page-name {
    color:initial;
    font-size:14px;
}

.page-name {
    font-weight:500;
}


.choice-item-options-active {
    border:1px solid var(--blue-primary);
    -webkit-box-shadow: 0px 0px 14px -7px rgb(88, 107, 140);
    -moz-box-shadow: 0px 0px 14px -7px rgb(88, 107, 140);
    box-shadow: 0px 0px 14px -7px #6596eb;
}

.choice-item-options-active:after {
    content: "\f058";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: "Font Awesome 5 Pro";
    position:absolute;
    color:#01a85e;
    font-size:14px;
    top:15px;
    right:16px;
}

.feedback-goals {
    margin-right:12px;
    margin-bottom:4px;
}

.default-margin-bottom {
    margin-bottom:10px;
}

.reporting-nav-daterange {
    margin-left:9px;
}

.reporting-nav {
    margin-bottom:8px;
}

.textanalysis_list {
    margin-left:9px;
}

.question-inline-options {
    display:none;
    padding-top:13px;
    padding-bottom:10px;
    text-align:center;
    margin:0 auto;
}

.account-menu-desktop {
    display:none;
}

.survey-content-dropdown {
    display:none;
    margin-right:20px;
}

.mobile-export-butt {
    margin-left:25px;
}

.main-container {
    padding-top:80px;   
   }

@media all and (min-width: 1200px) {
    .survey-table {
        padding-top: 105px;
        margin-top:0;
    }
} 

@media all and (max-width: 1500px) {
    .main-container {
    /*padding-left: 90px;*/
    }
}

@media all and (max-width: 1400px) {
    .results-right {
    width:30%;
    }

    .upgrade-box {
        margin:0 35px 0 90px;
    }

    .overview-right {
        width:41%;
    }

    .survey-name {
        width:30%;
    }

    .survey-table-wide {
    padding-right:30px;
    }
    
}

@media all and (max-width: 1300px) {
    .results-right {
        width:30%;
    }

    pre {
        max-width: 700px;
        }

    .overview-right {
        width:37%;
    }

    .overview-created-by-orb {
        display:none;
    }

    .results-padding {
        padding:0;
    }

    .uxmonitoring-break-1000 {
        flex-direction: column;
    }

    .uxmonitoring-break-1000 > .actions-40p {
        width:calc(100% - 20px);
    }
}


@media all and (max-width: 1210px) {

   .surveys-slide-section {
   width: calc(80% - 75px);
   }

   .results-tabs-margin {
    margin-top:30px;
    }
   
   .surveys-slide-header {
   width:calc(80% - 142px);
   }

   .mobile-visible-results {
    display:block;
    margin-top:-16px;
   }
   
   .surveys-detail-section {
   display:none;
   }

    .results-right {
        display:none;
    }

   .content-drawer {
        width:70%;
    }

    .surveys-mobile-head-nav {
        display:inline-block;
    }
    
}

@media all and (max-width: 1150px) { 
    .vert-nav {
        display:none;
    }

    .survey-table, .main-container {
        padding-left:25px;
        padding-right:25px;
    }

    .main-nav-header {
        padding-left:25px;
        padding-right:25px;
    }

    .upgrade-box {
        margin:0 25px 0 25px;
    }

    .survey-name, .hide-desktop-nav {
        display:none;
    }

    .account-menu-desktop {
        display:inline-block;
    }

    .headnav-button {
        display:none;
    }

    .deployment-30width {
        width:100%;
        display:block;
    }

    .choice-item {
        padding:9px;
    }

    .how-preview {
        display:none;
    }

    .choice-twoitem-block {
        width:100%;
    }

    .deployment-wrapper {
        margin-left:-20px;
        width:calc(100% + 39px);
    }
}


@media all and (max-width: 1049px) {
    
    .filter-panel {
        width:30vw;
        min-width:400px;
    }

    pre {
        max-width: 895px;
        }
    
    .upgrade-wrapper {
        display: block;
        margin-bottom: 30px;
    }

    .upgrade-main-feature {
        position:absolute;
        display:block;
        margin-top:80px;
        width:100%;
        height:auto;
    }
    .upgrade-box-video {
        display: block;
        width:100%;
        padding-left:0;
        margin-top: 24px;
    }

    .upgrade-box {
        padding:25px;
    }

    .surveys-table {
    /*width:100%;*/
    }

    .smilejet-modal-fullscreen {
    width: 100vw;
    max-width: 100%;
    }
    
    .surveys-inbox-header {
    width: calc(100vw - 10px);
    max-width: 100%;
    }
    
    .smilejet-modal-fullscreen {
    padding:0px 0px 20px 20px;
    }

    /* survey editor page media queries */
    .survey-table {
        display:block;
    }

    .survey-options-cell {
        display:block;
        width:100%;
    }

    .survey-option-tab {
        display:inline-block;
        margin-right:12px;
    }

    .main-menu-left {
        width:200px;
    }

    .main-menu-right {
        width:150px;
    }

    .survey-option-items {
        display:none;
    }
    
}

@media all and (max-width: 940px) {

    .overview-created-by-orb {
        width: 60px;
    }

    .recording-frame {
        height: calc(100vh - 125px);
    }

    body, html, input, select, textarea {
        font-size:10pt;
    }

    .hide-center-buttons {
        display:inline-block;
    }

    .main-container-table {
        display:block;
        width:100%;
    }

    .deployment-page-log {
        word-break: break-word;
        white-space: normal;
    }

    .main-container-left {
        width: 100%;
        padding-right: 0;
        display: block;
    }

    .main-container-right {
        padding-left: 0;
        display: block;
        width: 100%;
    }

    .builder-questions {
        padding-right:0;
    }

    .survey-wrapper {
        height:auto;
    }

    .add-top-header {
        display:inline-block;
    }

    .content-drawer {
        transition:margin .4s ease-in-out;
    }

    .filter-header {
        min-width: 100px;
        width: calc(100vw - 50px);
    }

}

@media all and (max-width: 1000px) {
    
    .survey-options-list-mobile {
        display:block;
    } 

    .survey-content-dropdown {
        display:inline-block;
    }

    .omnisearch-center {
        display:none;
    }

    .survey-edit-settings {
        height:80vh;
    }

    .survey-table {
        padding-top:0;
    }

    [contenteditable][placeholder]:empty:before{
        width:95%;
        word-break: break-all;
        word-wrap: break-word;
        height:20px;
        overflow:hidden;
        display:block;
        white-space: normal;
        text-wrap: ellipsis;
    }

    .actions-leftpadding {
    padding-left:0;
    }

    .mobile-export-butt {
        margin-left:0;
        margin-top:10px;
        width:100%;
    }

    .mobile-multimenu {
        right:0; margin-top:48px;
        /*height:83vh;*/
        }

    .builder-settings {
        display:none;
    }    
    
    .table {
        display:block;
        width:100%;
    }
    
    .table-cell {
     display:block;   
    }
    
    .table-cell-50, .table-cell-right-padding, .table-cell-right-padding-medium {
        width:100%;
        padding-right:0;
    }

    .table-cell-mobile-100 {
        width:100%;
    }
    
    .live-tile .table {
        display: table;
    }
    
    .live-tile .table-cell {
        display: table-cell;
    }
    
    .card-container .table-cell-50 {
        width: 50%;
    }

    .hamburger-ani span {
        background-color:#555;
    }
    
.content-drawer {
    width:95%;
}

.reporting-nav-opt {
    margin-left:0;
}

.textanalysis_list {
    margin-left:0;
}

.reporting-nav-daterange {
    margin-left:0;
    display:block;
    margin-top:5px;
}

.main-menu-top-wrapper {
    padding-left:0;
    padding-right:0;
}

    .survey-search {
    /*width:150px;*/
    }

    .survey-options-list {
        display:none;
    }

    .hide-center-menu {
        display:none;
    }
    
    .inbox-hide-mobile {
    display:none;
    }
    
    .dynamic-text {
    max-width: 150px;
    word-wrap: normal;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
    
     .surveys-slide-section {
   width: 100%;
   margin-left:0;
   }
   
   .surveys-slide-header {
   width:calc(100% - 142px);
   }
   
   .main-menu {
   }
   
   .smilejet-modal-fullscreen {
   min-width:100%;
   }

    .survey-close-addquestion {
        display:block;
    }

    .survey-option-items-topmargin {
        margin-top:19px;
    }

    .show-mobile {
        display:inline-block;
    }
    
    .hide-mobile {
        display:none;
        display:none !important;
    }

    .survey-option-items-table {
    /* EDIT: margin-top:27px; */
    margin-top:22px;
    }

    .feedback-inbox-content {
        margin-left: -20px;
        margin-right: -20px;
    }

    .feedback-inbox-content > .card-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .publish-content {
    margin-top:15px;
        margin-left: -25px;
        margin-right: -25px;
    }

    .survey-option-items-content {
        padding: 25px;
        margin-left: -20px;
        margin-right: -19px;
    }

    /* to get wide view on mobile */
    .mobile-margin {
        margin-left:-24px; margin-right:-19px;
        padding-left: 25px;
        padding-right: 25px;
    }
    
    .survey-table {
        margin-top:115px;
    }
    
    .main-container {
    padding-left:25px;
    }
    
}

@media all and (max-width: 1000px) {
    
    body, html, input, textarea, select {
        font-size:10.5pt;
    }

    .qsettings-mobile-height {
        height:200px; display:block;
    }
    
    .default-padding {
        padding:25px;
    }

    .survey-table {
        margin-top:85px;
    }
    
    .filter-panel {
        width:95vw;
        max-width:500px;
        background-color: rgba(255,255,255,1);
        margin-top:0px;
        height:100%;
    }
    
    .filter-header {
        width:86vw;
    }
    
    .inbox-answer-wrapper {
        max-width:100%;
    }
    
    .workspace-icon {
    color:initial;
    }
    
    
    .main-menu-topheader-bg {
        border-radius:12px;
    }
    
    .main-nav-area, .main-menu-center {
    display:none;
    }
    
    .main-container {
     padding-top:68px;   
    }
    
    .reporting-nav {
        margin-top:30px;
    }
    
    .dashboard_list {
        display:block;
        margin-bottom:5px;
    }
    
    .center-box-width {
        max-width:1450px;
        padding-left:25px;
        padding-right:20px;
    }

    .survey-folder-content {
    margin-left: 37px;
    margin-top: 71px;
    }

    .survey-main-nav {
    display:none;
    }

    .feedback_answers {
        margin-left: 0px;
    }

    .feedback-inbox-opt {
        height:46px;
        right:33px;
    }

    .meta-icons {
        position:absolute;right:20px; padding-top:1px;
    }

    .results-tabs-margin {
        margin-top:66px;
    }

    input[type=text],input[type=password],input[type=number], select, textarea {

    }

    .prod-question-block {
    padding:14px 25px 14px 22px;
    }

    .prod-question-conversational {
        padding:50px 25px 50px 22px;
    }

    .conversational-style-bar {
        padding-top:25px;
    }

    .survey-searchbox {
    display:inline-block;
    padding-left:0;
    width: calc(100% - 35px);
    }

    .card-show-edit {
        display:none;
        display:none !important;
    }

    .card-show-res {
        display:inline-block;
        display:inline-block !important;
    }

    .survey-edit-settings-content {
    padding-top:0;
    }

    .tab-type-content {
    padding-top:0;
    }

    .survey-options-list-mobile {
        width:100%;
        padding-top:10px;
    }

    .smilejet-modal-hanger {
     transition:all 1s ease;
    }

    .main-menu {
        display: none;
    }

    .survey-option-items-topmargin {
        margin-top:2px;
    }

    .survey-wrapper {
        /*background-color:transparent;*/
        /*background: linear-gradient(to left top, rgba(255,255,255,0.7), rgba(255,255,255,1));*/
        margin-top:41px;
    }

    .survey-wrapper input, .survey-wrapper select, .survey-wrapper textarea {
        background-color:transparent;
    }

    .builder-questions-content {
        /*margin-left:-25px;
        margin-right:-25px;
        margin-top:-15px;*/
        margin-left: -20px;
        margin-right: -18px;
        margin-top: -15px;
    }

    .hide-center-buttons {
        display:none;
    }

    .show-mobile-nav-center-buttons {
        display:inline-block;
    }

    .margin-top-report-dropdowns {
    margin-top:10px;
    display:inline-block;
        width:50%;
        padding-right:10px;
    }

    .margin-top-report-dropdowns > input {
        width:calc(100% - 6px);
    }


    .main-h1 {
        font-weight:400;
        font-size: 14pt;
    }

    .main-container, .main-menu-top, .survey-table {
        padding-left:20px;
        padding-right:20px;
    }

    .main-menu-top {
        backdrop-filter: blur(3px);
    }

    .main-menu-top {
        padding-top: 14px;
        padding-bottom: 10px;
        background-color:transparent;
    }

    .colorlabels-surveys-overview {
        display:none;
    }

    .survey-search {
        /*width:60%;*/
    }

    .main-container {
        margin-bottom:25px;
    }

    .card-box-center {
        padding-left:20px;
    }

    .hamburger-ani span {

    }

    .survey-option-items-table {
        display:table;
        width:100%;
    }

    .builder-settings-open {
        width: calc(100% - 10px);
        padding-top:65px;
        z-index: 2;
        left: 0;
        display: table-cell;
        margin-left: 6px;
    }

    .builder-settings-content {
        height:auto;
        position:relative;
    }

    .survey-change-type-wrapper {
        /* was : height:100%; */
    }

    .type-help-control {
        display:none;
    }

    .builder-settings-content {
        width:100%;
    }

}

@media all and (max-width: 470px) {

    .survey-change-type-wrapper {
        padding-top:40px; 
    }
    
    .inbox_selected_survey {
        display: block;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 12px;
    }
    
    .inbox-head-options {
        padding-left:0;
    }
    
    .card-window {
    width:calc(50% - 24px);
    padding:10px;
    }

    .grid {
        display:block;
        width:100%;
    }

    .grid>* {
        max-width:100%;
        min-height:25px;
        margin-bottom: 16px;
    }

    .card-box-name, .card-box-center {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .card-box-footer {
        padding-bottom: 25px;
        padding-right: 20px;
        width: auto;
        right:0;
    }

    .colorcode-4184ea {
        border-left:3px solid #4184ea;
        border-left:1px solid #e5e7f0;
    }

    .colorcode-ff8d8c {
        border-left:3px solid #ff8d8c;
        border-left:1px solid #e5e7f0;
    }

    .colorcode-ff8cd5 {
        border-left:3px solid #ff8cd5;
        border-left:1px solid #e5e7f0;
    }

    .colorcode-c790ff {
        border-left:3px solid #c790ff;
        border-left:1px solid #e5e7f0;
    }

    .colorcode-f8a96a {
        border-left:3px solid #f8a96a;
        border-left:1px solid #e5e7f0;
    }
    
    .main-container {
     padding-top:60px;   
    }


}

.question-nr-padding {
    padding-left:45px;
}

.ui-helper {
    width: 70% !important;
    /*
    border:1px dashed #6596eb;
    background-color:#fff !important;

     */
    background-color:#fff;
    z-index:5;
}

.trumbowyg-editor > p {
margin:0;
padding:0;
}

@media all and (max-width: 395px) {
    .card-window {
    width:calc(100% - 20px);
    }

}

.hidden {
    display:none;
    }

/* OFFLINE DETECTOR */
/* line 4, ../sass/_offline-theme-base.sass */
.offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 7, ../sass/_offline-theme-base.sass */
.offline-ui {
  display: none;
  position: fixed;
  background: white;
  z-index: 2000;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
}
/* line 17, ../sass/_offline-theme-base.sass */
.offline-ui .offline-ui-content:before {
  display: inline;
}
/* line 20, ../sass/_offline-theme-base.sass */
.offline-ui .offline-ui-retry {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: none;
}
/* line 24, ../sass/_offline-theme-base.sass */
.offline-ui .offline-ui-retry:before {
  display: inline;
}
/* line 29, ../sass/_offline-theme-base.sass */
.offline-ui.offline-ui-up.offline-ui-up-5s {
  display: block;
}
/* line 32, ../sass/_offline-theme-base.sass */
.offline-ui.offline-ui-down {
  display: block;
}
/* line 37, ../sass/_offline-theme-base.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
  display: block;
}
/* line 42, ../sass/_offline-theme-base.sass */
.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
  display: none;
}

@-webkit-keyframes offline-fadein {
  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@-moz-keyframes offline-fadein {
  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@-ms-keyframes offline-fadein {
  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@-o-keyframes offline-fadein {
  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@keyframes offline-fadein {
  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes offline-fadeout-and-hide {
  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@-moz-keyframes offline-fadeout-and-hide {
  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@-ms-keyframes offline-fadeout-and-hide {
  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@-o-keyframes offline-fadeout-and-hide {
  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes offline-fadeout-and-hide {
  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes offline-rotation {
  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

@-moz-keyframes offline-rotation {
  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

@-ms-keyframes offline-rotation {
  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

@-o-keyframes offline-rotation {
  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

@keyframes offline-rotation {
  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

/* line 21, ../sass/offline-theme-default.sass */
.offline-ui {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  font-family: "Helvetica Neue", sans-serif;
  padding: 1em;
  top: 1em;
  width: 38em;
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 38em) {
  /* line 21, ../sass/offline-theme-default.sass */
  .offline-ui {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    top: 0;
  }
}
/* line 34, ../sass/offline-theme-default.sass */
.offline-ui .offline-ui-content:before {
  line-height: 1.25em;
}
/* line 37, ../sass/offline-theme-default.sass */
.offline-ui .offline-ui-retry {
  position: absolute;
  right: 3em;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  line-height: 3.5em;
  height: 3.5em;
  margin: auto;
  padding: 0 1em;
}
/* line 50, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-up {
  -webkit-animation: offline-fadeout-and-hide forwards 0.5s 2s;
  -moz-animation: offline-fadeout-and-hide forwards 0.5s 2s;
  -ms-animation: offline-fadeout-and-hide forwards 0.5s 2s;
  -o-animation: offline-fadeout-and-hide forwards 0.5s 2s;
  animation: offline-fadeout-and-hide forwards 0.5s 2s;
  -webkit-backface-visibility: hidden;
  background: #d6e9c6;
  color: #468847;
}
/* line 55, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down {
  -webkit-animation: offline-fadein 0.5s;
  -moz-animation: offline-fadein 0.5s;
  -ms-animation: offline-fadein 0.5s;
  -o-animation: offline-fadein 0.5s;
  animation: offline-fadein 0.5s;
  -webkit-backface-visibility: hidden;
  background: #ec8787;
  color: #551313;
}
/* line 60, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting {
  background: #f8ecad;
  color: #7c6d1f;
  padding-right: 3em;
}
/* line 65, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after {
  -webkit-animation: offline-rotation 0.7s linear infinite;
  -moz-animation: offline-rotation 0.7s linear infinite;
  -ms-animation: offline-rotation 0.7s linear infinite;
  -o-animation: offline-rotation 0.7s linear infinite;
  animation: offline-rotation 0.7s linear infinite;
  -webkit-backface-visibility: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  content: " ";
  display: block;
  position: absolute;
  right: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 1em;
  width: 1em;
  border: 2px solid rgba(0, 0, 0, 0);
  border-top-color: #7c6d1f;
  border-left-color: #7c6d1f;
  opacity: 0.7;
}
/* line 82, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down.offline-ui-waiting {
  padding-right: 11em;
}
/* line 85, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s {
  padding-right: 0;
}

/* OFFLINE LANG */
/* line 6, ../sass/_content.sass */
.offline-ui .offline-ui-retry:before {
  content: "Reconnect";
}
/* line 11, ../sass/_content.sass */
.offline-ui.offline-ui-up .offline-ui-content:before {
  content: "Your computer is connected to the internet.";
}
@media (max-width: 1024px) {
  /* line 11, ../sass/_content.sass */
  .offline-ui.offline-ui-up .offline-ui-content:before {
    content: "Your device is connected to the internet.";
  }
}
@media (max-width: 568px) {
  /* line 11, ../sass/_content.sass */
  .offline-ui.offline-ui-up .offline-ui-content:before {
    content: "Your device is connected.";
  }
}
/* line 22, ../sass/_content.sass */
.offline-ui.offline-ui-down .offline-ui-content:before {
  content: "Your computer lost its internet connection.";
}
@media (max-width: 1024px) {
  /* line 22, ../sass/_content.sass */
  .offline-ui.offline-ui-down .offline-ui-content:before {
    content: "Your device lost its internet connection.";
  }
}
@media (max-width: 568px) {
  /* line 22, ../sass/_content.sass */
  .offline-ui.offline-ui-down .offline-ui-content:before {
    content: "Your device isn't connected.";
  }
}
/* line 33, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:before, .offline-ui.offline-ui-down.offline-ui-connecting-2s .offline-ui-content:before {
  content: "Attempting to reconnect...";
}
/* line 42, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " seconds...";
}
@media (max-width: 568px) {
  /* line 42, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "s...";
  }
}
/* line 50, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " second...";
}
@media (max-width: 568px) {
  /* line 50, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "s...";
  }
}
/* line 58, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " minutes...";
}
@media (max-width: 568px) {
  /* line 58, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "m...";
  }
}
/* line 66, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " minute...";
}
@media (max-width: 568px) {
  /* line 66, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "m...";
  }
}
/* line 74, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " hours...";
}
@media (max-width: 568px) {
  /* line 74, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "h...";
  }
}
/* line 82, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " hour...";
}
@media (max-width: 568px) {
  /* line 82, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "h...";
  }
}
/* line 90, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
  display: none;
}
/* line 93, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s .offline-ui-content:before {
  content: "Connection attempt failed.";
}