/*
 |--------------------------------------------------------------------------
 | HTML, BODY & Containers
 |--------------------------------------------------------------------------
 */
html,
body {
    height: auto;
    min-height: 100vh;
}

body {
    background: white;
    font-weight: 400;
    font-size: 0.9em; /* TODO: update base size in bootsrap  sass */
}

.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}

@media (min-width: 1200px) {
    .container-narrow {
        max-width: 860px;
    }
}

/*Logos*/
.tt_custom_logo_1, .tt_custom_logo_1_stacked {
    max-height: 200px;
}

.tt_custom_logo_2 {
    max-height: 150px;
}

.functional-bar-logo {
    max-height: 30px;
}

#mobile-menu-bar-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 2;
}

.mobile-menu-bar-partial-overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0,0,0,0.6); */
    z-index: -1;
}

/* Careers */



/* End of Careers */

/*
Bootstrap columns gutters adjustements
For no gutter, apply .no-gutters class to .row element
*/
.column-gutters-5 {
    margin-right: -5px;
    margin-left: -5px;
}
.column-gutters-5  > .col,
.column-gutters-5  > [class*="col-"]{
    padding-right: 5px;
    padding-left: 5px;
}

@media screen and (max-width: 576px) {
    .column-gutters-sm-5 {
        margin-right: -5px;
        margin-left: -5px;
    }

    .column-gutters-sm-5  > .col,
    .column-gutters-sm-5  > [class*="col-"]{
        padding-right: 5px;
        padding-left: 5px;
    }
}


.column-gutters-10 {
    margin-right: -10px;
    margin-left: -10px;
}

.column-gutters-10  > .col,
.column-gutters-10  > [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
}
/*
 |--------------------------------------------------------------------------
 | Utility classes
 |--------------------------------------------------------------------------
 */

.pt-9 {
    padding-top: 5.4rem!important;
}

.pb-9 {
    padding-bottom: 5.4rem!important;
}

.pl-9 {
    padding-left: 5.4rem!important;
}

.pr-9 {
    padding-right: 5.4rem!important;
}

@media (min-width: 768px) {
    .pt-md-9 {
        padding-top: 5.4rem!important;
    }

    .pb-md-9 {
        padding-bottom: 5.4rem!important;
    }

    .pl-md-9 {
        padding-left: 5.4rem!important;
    }

    .pr-md-9 {
        padding-right: 5.4rem!important;
    }

    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.fade-out-icons .svg-inline--fa:hover{
    opacity: 0.5;
    transition: 500ms ease-out;
}

.underline-links a:hover {
    border-bottom: 2px solid currentColor;
}

.underline-links  a  {
    border-bottom: 2px solid transparent;
}

.underline-links a.active {
    border-bottom: 2px solid currentColor;
}


.h-40 {
    height: 40px;
}

.top-40 {
    top: 40px;
}

.mt-40 {
    margin-top:40px;
}

.z-999 {
    z-index: 999 !important;
}

.box-shadow-0 {
    box-shadow: none !important;
}

.hidden {
    display: none; /* NOTE: if you need a !important version of this use class d-none */
}

.cursor-pointer {cursor: pointer;}
.cursor-all-scroll {cursor: all-scroll;}

.fs-1-1 {
    font-size: 1.1em;
}

.fs-4 {
    font-size: 4em;
}

.border-2-transparent {
    border: 2px solid transparent !important;
}

.text-color-default {
    color: #333333;
}

.opacity-5 {
    opacity: 0.5;
}

.mouse-over-bold:hover {
    font-weight: bold;
}

.bottom-shadow-light {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
}

/*Used for long URL - so they wrap and don't break page layout'*/
.dont-break-out {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.transparent-background {
    background-color: transparent !important;
}

ul.compact-list li {
    font-size: 14.4px;
    margin-top: 5px;
}

/*
 |--------------------------------------------------------------------------
 | Pagination
 |--------------------------------------------------------------------------
 */
div.pagination ul {
    list-style-type: none;
}
div.pagination ul li,
ul.pagination li {
    border: solid 1px #dddddd;
    padding: 6px 12px;
    text-decoration: none;
    margin-left: -1px;
    cursor: pointer;
    float: left;
}
div.pagination ul li a,
ul.pagination li a {
    color: #428bca;
}
div.pagination ul li:first-child,
ul.pagination li:first-child {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
div.pagination ul li:last-child,
ul.pagination li:last-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;

}
div.pagination ul li:hover,
ul.pagination li:hover {
    background-color: #eeeeee;
}
div.pagination ul li:hover a,
ul.pagination li:hover a {
    text-decoration: none !important;
    color: #2a6496;
}
div.pagination ul li:hover span,
ul.pagination li:hover span {
    color: #fff;
}
div.pagination ul li.active,
ul.pagination li.active {
    color: #fff;
    background-color: #428bca;
    border-color: #428bca;
    cursor: default;
}
div.pagination ul .disabled {
    pointer-events: none;
    opacity: 0.8;
}

.stretch-input-container input {
    width: 200px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

@media (max-width: 576px) {
    .stretch-input-container {
        width: 100% !important;
        padding-right: 15px;
        padding-left: 15px;
    }

    .stretch-input-container input {
        width: 100% !important;
    }
}

@media (min-width: 576px) {
    .stretch-input-container input:focus {
        width: 400px !important;
    }
}

@media (min-width: 768px) {
    .stretch-input-container input:focus {
        width: 550px !important;
    }
}

/*
 |--------------------------------------------------------------------------
 | Dynamic effects
 |--------------------------------------------------------------------------
 */

.hide-fade {
    opacity:0;
    -webkit-transition: opacity 600ms ease-in-out;
    -moz-transition: opacity 600ms ease-in-out;
    -o-transition: opacity 600ms ease-in-out;
    transition: opacity 600ms ease-in-out;
}

.show-fade  {
    opacity:1;
    -webkit-transition: opacity 600ms ease-in-out;
    -moz-transition: opacity 600ms ease-in-out;
    -o-transition: opacity 600ms ease-in-out;
    transition: opacity 600ms ease-in-out;

}

.btn-img:hover .img-wrap {
    background-color: black;
}

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

/*------------ Images layout and effects ---------*/

.background_image_stretch {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fixed-ratio-image-container {
    width: 100%;
    position: relative;
}

.fixed-ratio-image-container-1x1 {
    padding-top: 100%;
}

.fixed-ratio-image-container-3x2 {
    padding-top: 66.66%;
}

.fixed-ratio-image-container-16x9 {
    padding-top: 56.25%;
}

.fixed-ratio-image-container-4x3 {
    padding-top: 75%;
}

.fixed-ratio-image-container > * {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

.fixed-ratio-image-container-full {
    align-items: center;
}

.fixed-ratio-image-container > * > img {
    object-fit: cover;
    min-width: 100%;
}

.fixed-ratio-image-container-full > * > img {
    object-fit: scale-down;
}

.event-detail-image {
    object-fit: unset !important;
}

.gradient-overlay-bottom {
    position: absolute;
    left: 0; right:0; bottom: 0;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
}

.fixed-ratio-image-container > a > .gradient-overlay-bottom {
    pointer-events: none;
}

.image-zoom-container {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.image-zoom-container img {
    background-color: white; /* Fix for semi transparent PNGs*/
    -webkit-transform: scale(1.01);-ms-transform: scale(1.01);transform: scale(1.01);
    -webkit-transition: -webkit-transform .2s;transition: -webkit-transform .2s;-o-transition: transform .2s;transition: transform .2s;transition: transform .2s, -webkit-transform .2s;
}

.image-zoom-container-img-hover {
    -webkit-transform: scale(1.05) !important;-ms-transform: scale(1.05) !important;transform: scale(1.05) !important;
}

.image-zoom-container-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0; top: 0;
    background-color: black;
    opacity: 0;
    z-index: 999;
}

.image-zoom-container-overlay-hover {
    opacity: 0.3;
}

.simple-zoom-1-1 {
    transition: transform .2s;
}

.simple-zoom-1-1:hover {
    transform: scale(1.1);
}

/*------------ END Images layout and effects ---------*/
.view
{
    position:relative;
    overflow:hidden;
    cursor:default
}
.view .mask
{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
    width:100%;
    height:100%;
    background-attachment:fixed;
    cursor: pointer;
}
.view img,.view video{position:relative;display:block}
    .overlay .mask{opacity:0;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
    .overlay .mask:hover{opacity:1}
    .img-fluid{max-width:100%;height:auto}
    .flex-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}.flex-center p{margin:0}
    .rgba-grey-slight,.rgba-grey-slight:after{background-color:rgba(158,158,158,.1)}
    .rgba-red-strong,.rgba-red-strong:after{background-color:rgba(244,67,54,.7)}
    .rgba-grey-strong,.rgba-grey-strong:after{background-color:rgba(158,158,158,.7)}
    .view-all-members:hover{cursor: pointer;}
    .close-faces-panel:hover{cursor: pointer;}
/*Photo swipe galleries - tagged users*/

span.gallery_tagged_user {
    color: #fff;
    padding: 5px 10px 5px 10px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-right: 3px;
    margin-top: 5px;
}

span.gallery_tagged_user a {
    color: #fff;
}





/*
 |--------------------------------------------------------------------------
 | Sections
 |--------------------------------------------------------------------------
 */

section,
.container,
.container-fluid {
    position: relative;
    word-wrap: break-word;
}


section {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

section.customisation-section {
	background-color: #fff;
}

.tt-section {
    min-height: 300px;
}

.ttsection-arrow-title {
    top:-160;
}

.tt-section-background-container {
    position: absolute;
    bottom:0; left:0; right:0;
    min-height: 100% !important;
    height: 100% !important;

	background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.tt-section-background-container-no-image-support {
    position: absolute;
    bottom:0; left:0; right:0;
    min-height: 100% !important;
    height: 100% !important;
}

.tt-section-overlay {
    background-color: #000;
    opacity: .5;
    position: absolute;
    bottom: 0; left: 0; right: 0; top: 0;
    z-index: 0;
}

.tt-section-background-image {
    position: absolute;
    bottom: 0; left: 0; right: 0; top: 0;

    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;

    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;

    z-index: -1;
}


.ttsection-arrow-header {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    z-index: 1000;
    pointer-events:none;
    background-color:#3a4751;
    height:40px !important;
    width:180px !important;
    margin-left:auto;
    margin-right:auto;
    opacity: 0.9;
    color: white;
}

.ttsection-arrow-header:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: solid 20px #3a4751;
    border-left: solid 90px transparent;
    border-right: solid 90px transparent;
}

.tt-background-image {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.tt-edit-section {
    background-image: none;
    background-color: #EEECEE;
}
/*
 |--------------------------------------------------------------------------
 | Big date
 |--------------------------------------------------------------------------
 */

.date {
    position:relative;
    top: 0;
    left: 0;
    width: 110px;
    height: 55px;
    padding: 0px;
    display: table;
    /* margin: auto; */
}

.dateHolder, .noDateHolder {
    margin: 0px auto;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    font-size: 20px;
    line-height: 21px;
    padding-left:4px;
}

.dateHolder {
    border-left: 1px solid;
}

.day {
    font-size: 50px;
    font-weight: bold;
    line-height: 50px;
    display: table-cell;
    vertical-align: middle;
}

.dateHolder > span {
    display: block;
}


/*
 |--------------------------------------------------------------------------
 | Buttons
 |--------------------------------------------------------------------------
 */

.btn-hover-effect {
    background-color: white !important;
}

.btn-hover-effect:hover, .btn-hover-effect:focus, .btn-hover-effect:active, .btn-hover-effect.active, .open>.dropdown-toggle.btn-hover-effect {
    background-color: #cccccc !important;
    border-color: #dddddd;
}



/*
 |--------------------------------------------------------------------------
 | Forms
 |--------------------------------------------------------------------------
 */

.form-control {
    font-size: 1.0em; /* TODO: update size in boostrap sass */
    border-radius: 0;
}

.form-control.disabled:not(.bootstrap-select.disabled) {
    cursor: not-allowed;
    opacity: 0.65;
}

.bootstrap-select {
    font-size: 1.0em; /* TODO: update size in boostrap sass */
}

.bootstrap-select .dropdown-toggle {
    border-radius: 0;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover,
.form-placeholder label,
.grey-a6 {
    color: #a6a6a6;
}

/*Deselect option button*/
.bootstrap-select .filter-option-inner-close {
    width: 1.2rem;
    text-align: center;
    background: inherit;
    margin-top: -.3rem;
    font-weight: bold;
    font-size: larger;
    float: right;
    display: none;
}

.bootstrap-select .filter-option-inner-close::after {
    content: "\00D7";
}

/*Reduce left padding when select picker is narrow*/
.dropdown-items-reduced-padding-left .dropdown-item {
    padding-left: .5em !important;
}

.tt-transparant-input {
    background-color: #3a4751;
    opacity: 0.8;
    color: white !important;
    /*border:none;*/
}

input.tt-transparant-input {
    background-color: #3a4751 !important;
    opacity: 0.8;
    color: white !important;
}

input.tt-transparant-input:placeholder {
    color: white !important;
}

input.tt-transparant-input::-moz-placeholder {
    color: white;
}
input.tt-transparant-input:-ms-input-placeholder {
    color: white;
}
input.tt-transparant-input::-webkit-input-placeholder {
    color: white;
}

input.form-control[type=checkbox] {
    height: 30px;
}


/*select-picker custom styles*/
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .btn-light:not(:disabled):not(.disabled):active,
.bootstrap-select.show > .dropdown-toggle {
    background-color: white;
    border-color: #ced4da;
    font-size: inherit;
}

.bootstrap-select .dropdown-menu {
    font-size: 100%;
    width: 100%;
}

/*Bootstrap tooltips*/
.tt-tooltip {
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.tooltip-inner {
    border: solid 1px #a6a6a6;
    background-color: #fff !important;
    color: #333333;
}
.tooltip.show,
.tooltip.in {
    opacity: 1;
    filter:alpha(opacity=100);
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #fff !important;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #fff !important;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #fff !important;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #fff !important;
}

/*Croppie - custom styles*/
.croppie-container .cr-slider-wrap {
    margin-bottom: 0;
}

/*Quill RTE - custom styles*/
.ql-toolbar {
    background-color: #dedede;
    text-align: left !important;
}

.ql-container {
    background-color: #ffffff;
    height:auto;
}

.ql-editor p {
    margin-bottom: 1rem;
}

/*Tag-it*/
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Ubuntu, Helvetica, Arial, sans-serif !important;
    font-size: 100% !important;
}
ul.tagit li.tagit-new {
    width: 98%;
}

ul.tagit {
    border-radius: 0;
    margin-bottom: 0;
}

/*Placeholder for editable divs*/
[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #a6a6a6;
}

[data-placeholder]:focus:before {
    display: none;
}

/*Hide mentions div*/
.mentions {
    display: none;
}

/*Styling*/
.mentions-autocomplete-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/*Hover box*/
.tipsy-inner {
    border-radius: 5px;
}

/*
 |--------------------------------------------------------------------------
 | Owl Carousel plugin
 |--------------------------------------------------------------------------
 */

.owl-carousel {
    position: relative;
}
.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
        touch-action: auto;
}


.owl-prev,
.owl-next {
    color: #3a4751 !important;
    position: absolute;
    top: 30%;
    margin-top: -10px;
    opacity: 0.7;
}

.owl-prev:focus,
.owl-next:focus  {
    outline:0;
}

.owl-prev {
    left: 20%;
}

.owl-next {
    right: 20%;
}

.owl-prev.hidden {
    left: 0% !important;
    opacity: 0 !important;
}

.owl-next.hidden {
    right: 0% !important;
    opacity: 0 !important;
}

.animate-owl-arrows .owl-prev, .animate-owl-arrows .owl-next {
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.owl-theme .owl-nav {
    margin-top: 0;
}

.owl-theme .owl-nav .disabled {
    color: #3a4751 !important;
    opacity: 0.7;
    cursor: default;
}

.owl-stage .first-item,
.owl-stage .last-item {
    opacity: 0.4;
}

.owl-stage .first-item.no-opacity,
.owl-stage .last-item.no-opacity {
    opacity: 1;
}

/** Owl carousel hover over images **/

.hoverfx {
    position: relative;
    display: block;
    overflow: hidden;
    text-align: center;
}

.hoverfx img {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
}

.hoverfx:before {
    display: inline-block;
    padding-top: 60%;
    content: '';
    vertical-align: middle;
}

.hoverfx .figure {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 10px 15px;
    max-width: 60%;
    border: 3px solid #e9e9e9;
    color: #ecf0f1;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 1.2rem;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition-property: all .3s ease;
}

.hoverfx .figure:hover {
    background: #e9e9e9;
    color: #333;
}

.hoverfx .overlay {
    position: absolute;
    bottom: 0;
    min-height: 25%;
    width: 100%;
    z-index: 1;
    padding: 5px;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    color: #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition-property: all .3s ease;
}

.item:hover .figure,
.item:hover .overlay {
    opacity: 1;
}

/** horizintal line with center cirlcle **/

hr.linewithdot  {
  color: black;
  border-width: 3px;
  border-color: black;
  margin: 0em;
}

hr.linewithdot:before {
  content: '';
  border-radius: 100%;
  position: absolute;
  height: 20px;
  width: 20px;
  background: black;
  left: 50%;
  margin: -11px;
  box-shadow: inherit
}

hr.linewithdotcustom  {
    color: black;
    border-width: 3px;
    border-color: black;
    margin: 0em;
}

hr.linewithdotcustom:before {
    content: '';
    border-radius: 100%;
    position: absolute;
    height: 20px;
    width: 20px;
    background: black;
    left: 50%;
    margin: -11px;
    box-shadow: inherit
}

/*
 |--------------------------------------------------------------------------
 | Twitter Type Ahead (autocomplete) plugin
 |--------------------------------------------------------------------------
 */

.twitter-typeahead,
.typeahead,
.tt-query {
    width: 100%;
}

.tt-hint {
    display: none;
}

.typeahead {
  background-color: #fff !important;
}


.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-menu {
  min-width: 480px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 14px;
    line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.text-red,
span.required {
    color: red;
}

/* set CSS for placeholders on FORM's elements */
.form-placeholder {
    position: absolute;
    display: block;
    z-index: 100;
    height: auto;
    width: auto;
    top: 2px;
    left: 11px;
    padding-top: 6px;
    /* pointer-events: none; If this allowed, then Bootstrap tooltip not working ovver input fields */
}

::placeholder {
    color: #a6a6a6 !important;
}


.dropdown-toggle.bs-placeholder, /* bootstrap dropdown lists' label */
.placeholder-label,
.form-placeholder label {
    font-weight: normal;
    line-height: 1.5;
    color: #a6a6a6 !important;
    font-size: inherit;
}

/* form hint or show password container visibility */
.form-hint-password {
    position: absolute;
    display: block;
    z-index: 100;
    height: auto;
    width: auto;
    bottom: 6px;
    right: 8px;
    cursor: pointer;
	max-height: 25px;
}
.form-hint-password span {
    font-weight: normal;
    line-height: 1.5;
    font-size: 14px;
    padding-top: 6px;
    font-weight: 400;
    color: #212529;
    font-size: 1.0em;
    color: #a6a6a6;
}

/* error message container for form elements */
.general-error-msg-container,
.form-error-msg-container {
    display: block;
    width: auto;
    height: 14px;
    font-size: 12px;
    color: #f00;
    margin-top: 3px;
    top: -23px;
    left: 0px !important;
}

.form-error-msg-container {
    position: absolute;
    z-index: 2;
}

/* social-icons */
.progress-bar-success{background-color:#5cb85c}
.progress-bar-danger{background-color:#d9534f}

.facebook-bg-img {
    background-image: url(/addons/main/modules/bbusers/img/f-icon.png);
    background-repeat: no-repeat;
}
.linkedin-bg-img {
    background-image: url(/addons/main/modules/bbusers/img/icon-linkedin.png);
    background-repeat: no-repeat;
}
.google-bg-img {
    background-image: url(/addons/main/modules/bbusers/img/google-signin.png);
    background-repeat: no-repeat;
}
.google-bg-color {
    background-color: #4285F4;
}
.apple-bg-color {
    background-color: #000000;
}
.linkedin-bg-color {
    background-color: #0376b4;
}
.facebook-bg-color {
    background-color: #3b5998;
}

/* highlighting */
.highlight-bg {
    background-color: #f2f2f2;
}

/* cursor */
.cursor-pointer {
    cursor: pointer;
}

.quill-rte.error,
select.error,
input.error,
textarea.error,
.error-border,
.btn.dropdown-toggle.error {
    border: 1px solid #f00 !important;
}
input[type=checkbox].error {
    -webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
    -moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
    box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
}

@media screen and (min-width: 320px) and (max-width: 576px) {
    /* for bootstrap selections */
    .bootstrap-select .dropdown-menu {
        max-width: 280px !important;
        width: 280px !important;
        min-width: 280px !important;
    }
    ul.dropdown-menu {
        white-space: pre !important;
    }

    .view{position:relative;overflow:hidden;cursor:default}
    .view .mask{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;width:100%;height:100%;background-attachment:fixed}
    .view img,.view video{position:relative;display:block}
    .overlay .mask{opacity:0;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
    .overlay .mask:hover{opacity:1}
    .img-fluid{max-width:100%;height:auto}
    .flex-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}.flex-center p{margin:0}
    .rgba-grey-slight,.rgba-grey-slight:after{background-color:rgba(158,158,158,.1)}
    .rgba-red-strong,.rgba-red-strong:after{background-color:rgba(244,67,54,.7)}
    .rgba-grey-strong,.rgba-grey-strong:after{background-color:rgba(158,158,158,.7)}
    .view-all-members:hover{cursor: pointer;}
    .close-faces-panel:hover{cursor: pointer; margin-left: 300px !important;}
    .arrow_box:before{display: none;}
    .rounded-circle-pic{ width: 300px !important; height: 300px !important; overflow: hidden; border-radius: 50%;}
    .toast-body{padding: 3px !important; width: 180px !important;}
    .lastLogin{ position: absolute !important; margin-left: 10px !important;}
    .overflowAuto{overflow: auto; height: 200px; top: 60% !important;}
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    /* for bootstrap selections */
    .bootstrap-select .dropdown-menu {
        max-width: 536px !important;
        width: 536px !important;
        min-width: 536px !important;
    }
    ul.dropdown-menu {
        white-space: pre !important;
    }

    .view{position:relative;overflow:hidden;cursor:default}
    .view .mask{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;width:100%;height:100%;background-attachment:fixed}
    .view img,.view video{position:relative;display:block}
    .overlay .mask{opacity:0;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
    .overlay .mask:hover{opacity:1}
    .img-fluid{max-width:100%;height:auto}
    .flex-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}.flex-center p{margin:0}
    .rgba-grey-slight,.rgba-grey-slight:after{background-color:rgba(158,158,158,.1)}
    .rgba-red-strong,.rgba-red-strong:after{background-color:rgba(244,67,54,.7)}
    .rgba-grey-strong,.rgba-grey-strong:after{background-color:rgba(158,158,158,.7)}
    .view-all-members:hover{cursor: pointer;}
    .close-faces-panel:hover{cursor: pointer;}
    .arrow_box:before{display: none;}
    .toast-body{padding: 3px !important; width: 180px !important;}
    .lastLogin{ position: absolute !important; margin-left: 10px !important;}
    .overflowAuto{overflow: auto; height: 200px; top: 65% !important;}
}

@media screen and (max-width: 768px) {
    .column-gutters-sm-5 {
        margin-right: -5px;
        margin-left: -5px;
    }

    .column-gutters-sm-5  > .col,
    .column-gutters-sm-5  > [class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }
}

/*
 |--------------------------------------------------------------------------
 | Bootstrap modals
 |--------------------------------------------------------------------------
 */

 /* setting here to make sure modals that are in sections
 with a font colour setting inherit from this */
.modal-content {
    color: black !important;
}

@media (min-width: 576px) {
    .modal-dialog.flexible-width {
       max-width: 80%;
    }
    .clip-circle-for-forum-post
    {
        width: 50px !important;
        height: 50px !important;
    }
    .paddingLeftMobileViewIcons{
        padding-left: 0px !important;
    }
}


/*QUILL EDITOR CLASSES*/
/*font sizes for quill content on the front-end: small, large, huge*/
.ql-size-small {
    font-size: 0.75em;
}
.ql-size-large {
    font-size: 1.5em;
}
.ql-size-huge {
    font-size: 2.5em;
}
/*text aligns for quill content on the front-end: right to left, center, justify and right*/
.ql-direction-rtl {
    direction: rtl;
    text-align: inherit;
}
.ql-align-center {
    text-align: center;
}
.ql-align-justify {
    text-align: justify;
}
.ql-align-right {
    text-align: right;
}
/*fix for bold inside custom content*/
.customisation-section strong, strong{
    -webkit-font-smoothing: antialiased;
    font-weight: bold !important;
    -webkit-font-smoothing: antialiased;
}

.v3-bg-dark-grey {
    background-color: #333333 !important;
}
.v3-bg-mid-grey {
    background-color: #a6a6a6 !important;
}
.v3-bg-Light-grey {
    background-color: #f2f2f2 !important;
}
/*
 |--------------------------------------------------------------------------
 | Youtube background videos
 |--------------------------------------------------------------------------
 */

.youtube-background-video,
.youtube-background-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

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

    .customisation-section h1 {
        font-size: 1.5rem !important;
    }

}

/*Translations toggle control*/
#tt-admin-translations-toggle {
    cursor: pointer;
    position: fixed;
    bottom: 0;
    right: 0;
    color: grey;
    background-color: white;
    border-left: 1px solid lightgray;
    border-top: 1px solid lightgray;
    z-index: 99999;
    padding: 2px 10px;
    font-size: 10px;
    opacity: .5;
}

#tt-admin-translations-toggle:hover {
    opacity: 1;
}

.ql-align-left {
    text-align: left;
}

.text-on-white-bg {
    padding: 1px;
}

.tt-pt-md-3 {
    padding-top: 1rem !important
}


.shown-usergroup, .hidden-usergroup, .shown-fieldanswer, .hidden-fieldanswer {
    font-size: 10px !important;
    color: #333333 !important;
    cursor: pointer;
}

.hidden-usergroup, .hidden-fieldanswer {
    display:none !important;
}

/*
    Making font sizes responsive in Quill contents
    This conversion working togethet with function: customizationHelper_FontSizeAdjustment in file: ..\modules\network_settings\helpers\customization_helper.php
*/
:root { --8px: 0.5rem}
:root { --9px: 0.5625rem}
:root { --10px: 0.625rem}
:root { --11px: 0.6875rem}
:root { --12px: 0.75rem}
:root { --13px: 0.8125rem}
:root { --14px: 0.875rem}
:root { --15px: 0.9375rem}
:root { --16px: 1rem}
:root { --17px: 1.0625rem}
:root { --18px: 1.125rem}
:root { --19px: 1.1875rem}
:root { --20px: 1.25rem}
:root { --21px: 1.3125rem}
:root { --22px: 1.375rem}
:root { --23px: 1.4375rem}
:root { --24px: 1.5rem}
:root { --25px: 1.5625rem}
:root { --26px: 1.625rem}
:root { --27px: 1.6875rem}
:root { --28px: 1.75rem}
:root { --29px: 1.8125rem}
:root { --30px: 1.875rem}
:root { --31px: 1.9375rem}
:root { --32px: 2rem}
:root { --33px: 2.0625rem}
:root { --34px: 2.125rem}
:root { --35px: 2.1875rem}
:root { --36px: 2.25rem}
:root { --37px: 2.3125rem}
:root { --38px: 2.375rem}
:root { --39px: 2.4375rem}
:root { --40px: 2.5rem}
:root { --41px: 2.5625rem}
:root { --42px: 2.625rem}
:root { --43px: 2.6875rem}
:root { --44px: 2.75rem}
:root { --45px: 2.8125rem}
:root { --46px: 2.875rem}
:root { --47px: 2.9375rem}
:root { --48px: 3rem}
:root { --49px: 3.0625rem}
:root { --50px: 3.125rem}
:root { --51px: 3.1875rem}
:root { --52px: 3.25rem}
:root { --53px: 3.3125rem}
:root { --54px: 3.375rem}
:root { --55px: 3.4375rem}
:root { --56px: 3.5rem}
:root { --57px: 3.5625rem}
:root { --58px: 3.625rem}
:root { --59px: 3.6875rem}
:root { --60px: 3.75rem}
:root { --61px: 3.8125rem}
:root { --62px: 3.875rem}
:root { --63px: 3.9375rem}
:root { --64px: 4rem}
:root { --65px: 4.0625rem}
:root { --66px: 4.125rem}
:root { --67px: 4.1875rem}
:root { --68px: 4.25rem}
:root { --69px: 4.3125rem}
:root { --70px: 4.375rem}
:root { --71px: 4.4375rem}
:root { --72px: 4.5rem}

@media (max-width: 768px) {
    :root { --8px: 0.4rem}
    :root { --9px: 0.45rem}
    :root { --10px: 0.5rem}
    :root { --11px: 0.55rem}
    :root { --12px: 0.6rem}
    :root { --13px: 0.65rem}
    :root { --14px: 0.7rem}
    :root { --15px: 0.75rem}
    :root { --16px: 0.8rem}
    :root { --17px: 0.85rem}
    :root { --18px: 0.9rem}
    :root { --19px: 0.95rem}
    :root { --20px: 1rem}
    :root { --21px: 1.05rem}
    :root { --22px: 1.1rem}
    :root { --23px: 1.15rem}
    :root { --24px: 1.2rem}
    :root { --25px: 1.25rem}
    :root { --26px: 1.3rem}
    :root { --27px: 1.35rem}
    :root { --28px: 1.4rem}
    :root { --29px: 1.45rem}
    :root { --30px: 1.5rem}
    :root { --31px: 1.55rem}
    :root { --32px: 1.6rem}
    :root { --33px: 1.65rem}
    :root { --34px: 1.7rem}
    :root { --35px: 1.75rem}
    :root { --36px: 1.8rem}
    :root { --37px: 1.85rem}
    :root { --38px: 1.9rem}
    :root { --39px: 1.95rem}
    :root { --40px: 2rem}
    :root { --41px: 2.05rem}
    :root { --42px: 2.1rem}
    :root { --43px: 2.15rem}
    :root { --44px: 2.2rem}
    :root { --45px: 2.25rem}
    :root { --46px: 2.3rem}
    :root { --47px: 2.35rem}
    :root { --48px: 2.4rem}
    :root { --49px: 2.45rem}
    :root { --50px: 2.5rem}
    :root { --51px: 2.55rem}
    :root { --52px: 2.6rem}
    :root { --53px: 2.65rem}
    :root { --54px: 2.7rem}
    :root { --55px: 2.75rem}
    :root { --56px: 2.8rem}
    :root { --57px: 2.85rem}
    :root { --58px: 2.9rem}
    :root { --59px: 2.95rem}
    :root { --60px: 3rem}
    :root { --61px: 3.05rem}
    :root { --62px: 3.1rem}
    :root { --63px: 3.15rem}
    :root { --64px: 3.2rem}
    :root { --65px: 3.25rem}
    :root { --66px: 3.3rem}
    :root { --67px: 3.35rem}
    :root { --68px: 3.4rem}
    :root { --69px: 3.45rem}
    :root { --70px: 3.5rem}
    :root { --71px: 3.55rem}
    :root { --72px: 3.6rem}

    .tt-pt-sm-5 {
        padding-top: 3rem !important;
    }

    img.pyro-image {
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 85vw !important;
    }

    div.storyBody table {
        max-width: 100% !important;
    }
}

/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7adnpV-BGlaFfdAhLQo6btP&skey=36a3d5758e0e2f58&v=v11) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aYnpV-BGlaFfdAhLQgUp5aHRge&skey=8b00183e5f6700b6&v=v11) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7afnpV-BGlaFfdAhLEY6w&skey=a1029226f80653a8&v=v11) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aanpV-BGlaFfdAjAo9_pxqHw&skey=cd2dd6afe6bf0eb2&v=v11) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  min-height: 100% !important;
  min-width: 100% !important;
}

.video-background iframe {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 100vw;
  height: 100vh;
  transform: translate(-100%, -100%);
}

@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}
/* Media query for mobile devices for news article images in content box*/
@media only screen and (max-width: 768px) {
    img.pyro-image {
        float: none !important; /* overrides the inline style */
        display: block !important; /* Ensures the image is a block-level element */
        margin-left: auto !important; /* Centers the image */
        margin-right: auto !important;
    }
}

/*
 |--------------------------------------------------------------------------
 | Tables
 |--------------------------------------------------------------------------
 */

 /* borderless table like BS 4.1 */
.table-borderless thead th {border:0;}
.table-borderless th{border:0;}
.table-borderless td{border:0;}

/*
 |--------------------------------------------------------------------------
 | +/- Number input buttons
 |--------------------------------------------------------------------------
 */

.btn-tt-number-input {
    border: 0;
    font-size: 0.85rem !important;
    box-shadow: none;
}

.btn-tt-number-input:hover,.btn-tt-number-input:focus, .btn-tt-number-input:active  {
    border: 0;
    box-shadow: none;
}

.input-number {
    font-size: 0.85rem !important;
    padding: 0 0;
    max-width: 50px;
    margin: 0 10px;
    text-align: center;
    border-color: #9b9b9bab !important;
}

.ticket-summary-table hr {
    margin: 0;
}