html, body {
        max-width: 100%;
        overflow-x: hidden;
        font-family: 'Cabin', sans-serif !important;
        font-weight: normal;
        font-size: 16px;
    }

    img {
        /* Fix Ugly Images in IE */
        -ms-interpolation-mode: bicubic;
    }

    td {
        vertical-align: middle !important;
    }

    .btn-table {
        padding: 3px 4px;
        font-size: 14px;
        border-radius: 3px;
    }

    @font-face {
        font-family: "CaviarDreams";
        src: url(../img/CaviarDreams.ttf);
    }

    .italic {
        font-style: italic !important;
    }

    .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
    }

    font-family: 'Quicksand', sans-serif;
    font-family: 'Pacifico', cursive;
    font-family: 'Rubik', sans-serif;
    font-family: 'Cabin', sans-serif;
    font-family: 'VT323', monospace;
    font-family: 'Nunito', sans-serif;
    font-family: 'Nunito Sans', sans-serif;
    font-family: 'Inconsolata', monospace;
    font-family: 'Concert One', cursive;
    font-family: 'Acme', sans-serif;
    font-family: 'Poiret One', cursive;
    /* @media only print {
        .feedback_print * {
            page-break-after: always; margin-left: 50%;
        }
        .no-print, .no-print * {
            display: none !important;
        }
        div {
            /* left: 0px;
            right: 0px;
            /* float: none !important; */
            /*position: absolute !important; */
            /* display: inline; */
            /* box-sizing: content-box !important;*/
            page-break-before: always !important; 
            
        }
    } */

    .flat-blue {
        background-color: #EDECEC;
    }

    .hover-Drilldown {
        -moz-transition: 0.4s;
        -webkit-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        -khtml-transition: 0.4s;
        transition: 0.4s;
    }

    .hover-Drilldown:hover {
        box-shadow: 10px 10px 10px #888888;

        -moz-transform: translateX(-10px) translateY(-10px);
        -webkit-transform: translateX(-10px) translateY(-10px);
        -ms-transform: translateX(-10px) translateY(-10px);
        -o-transform: translateX(-10px) translateY(-10px);
        -khtml-transform: translateX(-10px) translateY(-10px);
        transform: translateX(-10px) translateY(-10px);

        -moz-transition: 0.4s;
        -webkit-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        -khtml-transition: 0.4s;
        transition: 0.4s;
    }

    .dark-text {
        color: #37474F !important;
        font-family: 'Quicksand';
    }

    .dark-black {
        background-color: #37474F;
    }

    .btn-xlarge {
        padding: 18px 28px;
        font-size: 24px; /* change this to your desired size */
        line-height: normal;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        width: 100%;
    }

    .ulPositionFix {
        display: block;
        padding: 10px 15px;
        position: relative;
    }

    .headingTellusfirst {
        font-size: 2.5em;
        font-weight: lighter;
    }

    h1.customfont {
        font-family: "Poiret One";
        font-size: 2.5em;
    }

    h2.customfont {
        font-family: "Poiret One";
        font-size: 2.0em;
    }

    .Quicksand {
        font-family: 'Quicksand';
    }

    .PacificoFont {
        font-family: 'Pacifico';
        color: #fff;
        font-size: 2em;
    }

    .customfont {
        font-family: "Poiret One";
        font-weight: bold;
    }

    .customfontHomepage {
        font-family: "Poiret One";
        text-align: center;
        color: #3e5062;
        font-weight: bold;
        font-size: 24px;
    }

    .white-quicksand {
        font-family: "Quicksand";
        color: #fff !important;
        font-size: 1.3em;
    }

    .dark-quicksand {
        font-family: "Quicksand";
        color: #37474F !important;
        font-size: 1.3em;
    }

    .huge {
        font-size: 35px;
    }

    .midText {
        font-size: 25px;
    }

    canvas {
        width: 100% !important;
        max-width: 2000px;
        height: auto !important;
    }

    div .nicebox {
        border: 1px #cccccc solid;
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 10px;
        /*background-color: #eeeeff;*/
    }

    .well-white {
        background-color: #ffffff;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
        margin-bottom: 20px;
        min-height: 20px;
        padding: 19px;
    }

    hr.black {
        border-color: #a3a3a3 -moz-use-text-color -moz-use-text-color;
    }

    .panel-green .panel-heading {
        background-color: #5cb85c;
        border-color: #5cb85c;
        color: #fff;
    }

    .panel-orange .panel-heading {
        background-color: #e48630;
        border-color: #e48630;
        color: #fff;
    }

    .panel-yellow .panel-heading {
        background-color: #f0ad4e;
        border-color: #f0ad4e;
        color: #fff;
    }

    .panel-red {
        background-color: #d9534f !important;
        border-color: #d9534f !important;
        color: #fff !important;
    }

    .panel-purple .panel-heading {
        background-color: #9C27B0;
        border-color: #9C27B0;
        color: #fff;
    }

    .btn-small {
        width: 67px;
        height: 25px;
        padding: 2px;
    }

    .btn-smallWidth {
        /* width:111px; */
        height: 25px;
        padding: 2px;
        margin-top: 28px;
    }

    .btn-small-wide {
        /* width:111px; */
        height: 25px;
        padding: 2px;
    }

    h1 {
        color: #555555;
    }

    h2 {
        color: #164077;
    }

    h2.blue {
        color: #34495e;
    }

    h2.underlined {
        border-bottom: 1px solid #eee;
    }

    h3 {
        color: #3060aa;
    }
 
    h4 {
        color: #164077;
    } 

    h5 {
        color: #164077;
    }

    .tuf-message-box {
        position: absolute;
        left: 200px;
        top: 200px;
    }

    .img small {
        height: 50px;
        width: 50px;
    }

    .hover-hand {
        cursor: pointer;
    }

    .hover-opacity {
        opacity: 1.0;
    }

    .hover-opacity:hover {
        opacity: 0.8;
    }

    .faded {
        opacity: 0.4 !important;
    }

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

    .margin-bottom-m {
        margin-bottom: 30px;
    }

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

    .smiley {
        position: relative;
    }

    .smiley-image-selected {
        max-width: 90%;
    }

    .requiredField {
        border: red solid 2px !important;
    }
    /* mobile portrait */

    @media screen and (max-width:480px) {
        h1 {
            font-size: 18pt;
        }
        h2 {
            font-size: 16pt;
        }
        h3 {
            font-size: 14pt;
        }
        .border {
            border: 1px gray solid;
        }
    }

    @media screen and (max-width:767px) {
        .sidemenu-item {
            display: none;
        }
        .smiley-image-selected {
            max-width: 35%;
        }
    
    }

    /* mobile landscape */

    @media screen and (min-width:480px) and (max-width: 768px) {
        .border {
            border: 1px gray solid;
        }
    }
    /* ipad portrait*/

    @media screen and (min-width:768px)and (max-width:1004px) {
        div .border {
            border: 1px gray solid; /* background-color:green; */
        }
    }
    /*@media screen and (max-width:1200px){

} // browser, ipad landscape

@media screen and (max-width:1600px){

} // browser

@media screen and (min-width:1601px){

} // browser*/
    /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

    @keyframes spinner {
        to {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spinner {
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    .whiteStrong {
        color: #fff !important;
        font-weight: bold;
    }

    .white {
        color: #fff !important;
    }

    .blue {
        color: #2b3643;
    }

    .spinner {
        min-width: 30px;
        min-height: 30px;
    }

    .spinner:before {
        content: 'Loading…';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-top: -13px;
        margin-left: -13px;
    }

    .spinner:not(:required):before {
        content: '';
        border-radius: 50%;
        border: 1px solid #ccc;
        border-top-color: #03ade0;
        animation: spinner .6s linear infinite;
        -webkit-animation: spinner .6s linear infinite;
    }

    @import "compass/css3";
    label.greylabel {
        display: block;
        padding: 5px 10px;
        margin: 5px 0;
        font: 14px/20px Arial, sans-serif;
        background-color: #ccc;
        border-radius: 7px;
        color: #555;
    }

    label.greylabel:hover {
        background-color: #2B3643;
        color: #fff !important;
    }

    input[type="checkbox"] {
        position: relative;
        top: 1px;
    }

    .isSelected {
        background-color: #0E91D2;
        color: #fff;
    }

    .map {
        min-width: 300px;
        min-height: 300px;
        wid .carousel-control>span>img {
            position: absolute;
            /*set position of image from top to be 50%...*/
            top: 50%;
            /*and then shift it down to make it perfectly center.*/
            transform: translate(-50%, -50%);
            z-index: 5;
            display: inline-block;
        }
    }

    .htmlorange {
        background: #E44D26 !important;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to left, #E44D26, #F16529);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to left, #E44D26, #F16529);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .carousel-control .icon-next {
        font-size: 100px;
        color: #31475E;
    }

    .carousel-control.left, .carousel-control.right {
        background-image: none
    }

    .carousel-control .icon-prev {
        font-size: 100px;
        color: #31475E;
    }

    .fullWidth {
        width: 100% !important;
    }

    .bodyContent {
        background: #4f9ecd;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to left, #4f9ecd, #5691c8);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to left, #457fca, #5691c8);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        padding-top: 30px;
    }

    .card {
        background-color: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 0.25rem;
        display: block;
        margin-bottom: 0.75rem;
        position: relative;
    }

    .card-block {
        padding: 1.25rem;
    }

    .card-title {
        margin-bottom: 0.75rem;
    }

    .card-img-top {
        border-radius: 0.25rem 0.25rem 0 0;
    }

    .picker {
        width: 200px;
        height: 200px
    }

    .slide {
        width: 30px;
        height: 200px
    }

    .glow {
        -webkit-box-shadow: 0 0 20px blue;
        -moz-box-shadow: 0 0 20px blue;
        box-shadow: 0 0 20px blue;
    }
    /* Absolute Center Spinner */
    .loading {
      position: fixed;
      z-index: 999;
      height: 2em;
      width: 2em;
      overflow: show;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

    /* Transparent Overlay */
    .loading:before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
      /* hide "loading..." text */
      font: 0/0 a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0;
    }

    .loading:not(:required):after {
      content: '';
      display: block;
      font-size: 10px;
      width: 1em;
      height: 1em;
      margin-top: -0.5em;
      -webkit-animation: spinner 1500ms infinite linear;
      -moz-animation: spinner 1500ms infinite linear;
      -ms-animation: spinner 1500ms infinite linear;
      -o-animation: spinner 1500ms infinite linear;
      animation: spinner 1500ms infinite linear;
      border-radius: 0.5em;
      -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
      box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    }

    /* Prevent colorpicker going above navbar */
    .sp-container {
        z-index: 1 !important;
    }
/*
    .modal-backdrop {
        background-color: #fff !important;
    }
*/
    .blinking {
        -webkit-animation: blinking 2s infinite linear;
        -moz-animation: blinking 2s infinite linear;
        -ms-animation: blinking 2s infinite linear;
        -o-animation: blinking 2s infinite linear;
        animation: blinking 2s infinite linear;
    }

    .notice-me {
        -webkit-animation: notice-me 2s infinite linear;
        -moz-animation: notice-me 2s infinite linear;
        -ms-animation: notice-me 2s infinite linear;
        -o-animation: notice-me 2s infinite linear;
        animation: notice-me 2s infinite linear;
    }

    .modal-dialog {
        margin: 70px auto;
    }

    #tutorialModal {
        z-index: 9999 !important;
    }

    /* Animation */

    @-webkit-keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @-moz-keyframes spinner {
        0% {
            -moz-transform: rotate(0deg);
        }
        100% {
            -moz-transform: rotate(360deg);
        }
    }

    @-ms-keyframes spinner {
        0% {
            -ms-transform: rotate(0deg);
        }
        100% {
            -ms-transform: rotate(360deg);
        }
    }

    @-o-keyframes spinner {
        0% {
            -o-transform: rotate(0deg);
        }
        100% {
            -o-transform: rotate(360deg);
        }
    }

    @keyframes spinner {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }


    @-webkit-keyframes blinking {
        0% {
            opacity: 0.5;
        }
        50% {
            opacity: 1.0;
        }
        100% {
            opacity: 0.5;
        }
    }

    @-moz-keyframes blinking {
        0% {
            opacity: 0.5;
        }
        50% {
            opacity: 1.0;
        }
        100% {
            opacity: 0.5;
        }
    }

    @-ms-keyframes blinking {
        0% {
            opacity: 0.5;
        }
        50% {
            opacity: 1.0;
        }
        100% {
            opacity: 0.5;
        }
    }

    @-o-keyframes blinking {
        0% {
            opacity: 0.5;
        }
        50% {
            opacity: 1.0;
        }
        100% {
            opacity: 0.5;
        }
    }

    @keyframes blinking {
        0% {
            opacity: 0.5;
        }
        50% {
            opacity: 1.0;
        }
        100% {
            opacity: 0.5;
        }
    }



    @-webkit-keyframes notice-me {
        0% {
            -webkit-transform: scale(1.0);
        }
        50% {
            color: #fff;
            background-color: #337ab7;
            -webkit-transform: scale(1.05);
        }
        100% {
            -webkit-transform: scale(1.0);
        }
    }

    @-moz-keyframes notice-me {
        0% {
            -moz-transform: scale(1.0);
        }
        50% {
            color: #fff;
            background-color: #337ab7;
            -moz-transform: scale(1.05);
        }
        100% {
            -moz-transform: scale(1.0);
        }
    }

    @-ms-keyframes notice-me {
        0% {
            -ms-transform: scale(1.0);
        }
        50% {
            color: #fff;
            background-color: #337ab7;
            -ms-transform: scale(1.05);
        }
        100% {
            -ms-transform: scale(1.0);
        }
    }

    @-o-keyframes notice-me {
        0% {
            -o-transform: scale(1.0);
        }
        50% {
            color: #fff;
            background-color: #337ab7;
            -o-transform: scale(1.05);
        }
        100% {
            -o-transform: scale(1.0);
        }
    }

    @keyframes notice-me {
        0% {
            transform: scale(1.0);
        }
        50% {
            color: #fff;
            background-color: #337ab7;
            transform: scale(1.05);
        }
        100% {
            transform: scale(1.0);
        }
    }



    @-webkit-keyframes slide-up {
        0% {
            -webkit-transform: translateY(500px);
        }
        100% {
            -webkit-transform: translateY(0px);
        }
    }

    @-moz-keyframes slide-up {
        0% {
            -moz-transform: translateY(500px);
        }
        100% {
            -moz-transform: translateY(0px);
        }
    }

    @-ms-keyframes slide-up {
        0% {
            -ms-transform: translateY(500px);
        }
        100% {
            -ms-transform: translateY(0px);
        }
    }

    @-o-keyframes slide-up {
        0% {
            -o-transform: translateY(500px);
        }
        100% {
            -o-transform: translateY(0px);
        }
    }

    @keyframes slide-up {
        0% {
            transform: translateY(500px);
        }
        100% {
            transform: translateY(0px);
        }
    }

#cookieConsentBar {
    position: fixed;
    margin: 0px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 2000000001 !important; /* Appear above the Tawk.to box */
    color: #000;
    box-shadow: 0px 0px 4px #000;
    background-color: rgba(255, 255, 255, 0.9);
    max-height: 90%;
    overflow: auto;

    -webkit-animation: slide-up 1s;
    -moz-animation: slide-up 1s;
    -ms-animation: slide-up 1s;
    -o-animation: slide-up 1s;
    animation: slide-up 1s;
}

.has-tooltip {
    cursor: help;
    background-image: URL('/img/tooltip.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 16px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.has-tooltip:hover {
    background-size: auto 18px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.anon-text {
    opacity: 0.4;
}

.customSelectBoxes .select2-selection{
    border-radius: 0.75rem;
    padding: 0.375rem 0.75rem;
    color: #495057;
    border: 1px solid #ced4da;
}

.customSelectBoxes .select2-container .select2-search--inline .select2-search__field {
    margin: 0px;
    height: 24px;
    vertical-align: middle;
}

.customSelectBoxes .select2-container .select2-selection--single {
    height: 38px; 
}

.customSelectBoxes .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px;
}

.customSelectBoxes .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0px;
}

.customSelectBoxes .select2 {
    width: 100% !important;
}

.double-border {
  border: solid 2px transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, #763091, #0E77BB);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.more-rounded {
    border-radius: 30px;
}