﻿
.track-subtitle {
    font-size: 12px;
    margin-top: 1.75px;
    font-weight: 500;
    line-height: normal;
    font-style: italic;
    text-transform: none;
}

@media(max-width:1920px) and (min-width:1551px) {
    .track-subtitle {
        font-size: 12px;
    }
}

div#PDFdiv .Hidden-Session,
div#PDFdiv .Hidden-Session {
    display: none !important;
}

.Hidden-Session {
    opacity: 0;
}

span.SessionHeadings_ {
    text-align: center;
    width: 100%;
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    margin-top: -12px;
    border: 1px solid #11858f94;
    color: #11858f;
    border-radius: 14px;
    text-transform: uppercase;
}

#day1 .card-columns1 .card {
    min-height: 350px;
}

#day2 .card-columns1 .card {
    min-height: 350px;
}

.agenda-container {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
    overflow-x: auto;
}

.track-column {
    flex: 1;
    min-width: 280px;
    background: #f7f9fc;
    border-radius: 10px;
    padding: 10px;
}

.hour-column {
    width: 100%;
    display: block;
}

.agenda-container .col-sm-3,
.agenda-container .col-sm-4,
.agenda-container .col-sm-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.SessionHeadings_ {
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    font-weight: bold;
}



#day1 .card-columns1 .card .SessionHeadings_ {
    display: none;
}

#day2 .card-columns1 .card .SessionHeadings_ {
    display: none;
}

.mainSeparatorHeading.AgendaHeading_inner {
    margin: 20px 0 20px 0;
}

p.Timediff span.agendaTimeCard {
    background: transparent;
    color: #000 !important;
    left: 0px;
    position: relative;
}

ul.tabs_Agenda li a {
    margin-bottom: 2px !important;
}

.card-columns1 .agendathumbCard {
    display: block;
    height: 100% !important;
    border: 2px solid #6c4038 !important;
    border-radius: 10px;
}

.ForDownloadButton {
    color: #fff !important;
    background: #088692;
    font-size: 18px !important;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 10px !important;
}

.tab_section ul.tabs_Agenda li.active a .date_tab {
    border-bottom: 2px solid #46b4ad;
    background: #088692 !important;
    color: #fff;
}

.stream-heading-container .Header_Date {
    font-size: 21px !important;
    font-weight: bold;
    padding: 10px !important;
}


.active .card-columns1:nth-child(odd) .agendathumbCard {
    background-image: linear-gradient(to top, #fac4dc 0%, #ffffff 100%) !important;
}


.card-columns1 .col-sm-3 .col-sm-12 {
    height: 100%;
}

.agendathumbCard span.agendaStageCard {
    margin: 2px 3px 2px 3px;
}

.classforTechnical_Showcases {
    background: #4d2dcf
}

.classforCarbon_Capture___Utilisation {
    background: #8A9A5B
}

.classforCommercial {
    background: #ff5500
}

.classforAmmonia {
    background: #5f79fb
}

.classforFertilizers {
    background: #2b649d
}

.classforGHG_emissions {
    background: #1ec9bc;
}

.classforHydrogen {
    background: #f77b10
}

.agendaspeakersList {
    margin-bottom: 10px;
}

.classforMelamine {
    background: #00a700
}

.classforMethanol {
    background: #40e940
}

.classforNitric_Acid {
    background: #aacb76
}

.classforSyngas {
    background: #CCCCFF
}

.classforUrea {
    background: #d11010
}

.classforSynthesis_gas {
    background: #AFE1AF
}

.classforInvestment {
    background: #84bd2a;
}

.classforDigitalisation {
    background: #b3215e
}

span.agendaStageCard.classforPlant_reliability___troubleshooting, .classforPlant_Reliability___Troubleshooting, .classforPlant_reliability___troubleshooting {
    background: #55a541 !important;
}

.classforAsset_integrity {
    background: #d317b3;
}

.classforFuture_Fuels {
    background: #a38412c7;
}

.classforAmmonium_Nitrate {
    background: #8c3b9b;
}

.classforTraining {
    background: #ed24af;
}

.Blur {
    width: 100%;
    height: 100%;
    filter: blur(5px);
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    opacity: 0.6;
    display: none;
    z-index: 9999;
}

.card .paragraph {
    -webkit-line-clamp: inherit !important;
    display: none;
}

.card {
    border: 0 !important;
}

.agendathumbCard {
    border: 1px solid #cbcbcb !important;
}

span.agendaStageCard.OuterFilter {
    width: 100%;
    text-align: center;
    padding: 6px 0 6px 0;
    font-size: 14px;
    min-height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.time-slot1.labeling p {
    color: #fff;
}

h3.h3cetclass {
    color: #088692;
    text-align: center;
    margin-top: 5px;
    font-size: 16px;
}

p.timingtagp {
    text-align: left !important;
}

.card div:nth-child(1) {
    padding-left: 0;
    padding-right: 0;
}

.agendathumbCard div img {
    margin: 0 auto;
    display: block;
}

div#day2 .card-columns1 .col-sm-3 .col-sm-12 {
    margin-bottom: 5px;
}

div#day3 .card-columns1 .col-sm-3 .col-sm-12 {
    margin-bottom: 5px;
}

.card-columns1 .card .agendathumbCard:nth-child(2) {
    height: 100% !important;
}


.stream-heading-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    margin-top: -46px;
    margin-bottom: 10px;
    left: unset;
}


.card .agendathumbCard .classforproductdiv p {
    margin-bottom: 5px;
}

.classforproductdiv,
div#day1 .classforproductdiv {
    position: static;
    margin-bottom: 14px;
}

a.Add-Button.RestButton_Here {
    font-size: 14px;
    padding: 12px 10px 12px 10px;
    border-radius: 0;
    text-decoration: none;
    outline: 0;
}

a.Add-Button.YelloBg_.ResetButton.resetgreyBtn.w-100 {
    display: none;
}


ul.agenda-Comp {
    padding-left: 8px !important;
    display: block !important;
    text-align: center;
}

.card .agendathumbCard .classforproductdiv p {
    text-align: left !important;
    font-size: 14px !important;
    color: #000000;
}

.cardSessionTitle {
    margin-bottom: 15px;
}

ul.agenda-Comp li {
    display: inline-block;
    text-align: left;
    background: #fff;
    margin: 1px 3px 5px 3px !important;
    padding: 4px 6px 4px 6px !important;
    border-radius: 6px;
    border: 1px solid #fff;
}

    ul.agenda-Comp li.active {
        border-color: #088692;
    }

.classforTrack_One {
    background: #613c26 !important;
}

.classforTrack_Two {
    background: #11858f !important;
}

.classforTrack_Three {
    background: #fac4dc !important;
    color: #000000;
}

span.agendaStageCard.OuterFilter {
    background: #35302c;
}



.time-slot1.labeling.brwn {
    background: #ff5500;
}

p.productsulphurinfocard.lcw {
    background-color: #c55a11;
}

.time-slot1.labeling p {
    font-size: 15px;
    padding: 2px 0 2px 0px;
}

p.productsulphurinfocard {
    font-size: 15px;
    background: #088692;
    color: #fff;
    text-align: center;
    padding: 2px 0 2px 0;
}

    p.productsulphurinfocard.commercial {
        background: #c55a11;
    }

/*.card-columns1 .col-sm-4 {*/
.card-columns1 .col-sm-3 {
    display: block;
}

.time-slot1.labeling {
    color: white;
    width: 100%;
    text-align: center;
    background: #46b4ad;
    margin: 5px 0 10px 0;
}



.agendathumbCard {
    border: 0;
}

.card-columns1 .card:hover .agendathumbCard,
.card-columns1 .card:hover {
    background: #f6f6f6ee !important;
}

.time-slot1.labeling p {
    margin-bottom: 0;
}

p.time-slot-coffee.tsp {
    background: #088692;
}

.headingtimebrwn {
    width: 60%;
    text-align: center;
    background: #c55a11;
    margin: 0 auto;
    color: #fff;
    padding: 1px 0 1px 0;
    font-size: 15px;
    margin-bottom: 10px;
}

.headingtime {
    width: 100%;
    text-align: center;
    background: #088692;
    margin: 0 auto;
    color: #fff;
    padding: 4px 0 4px 0;
    font-size: 15px;
    margin-bottom: 10px;
}

span.CETtimsspan {
    font-weight: 600;
}

p.timingtagp span {
    font-size: 13px;
}

.card .agendathumbCard p {
    font-size: 18px !important;
    font-weight: 600;
    text-align: center;
    color: #088692;
}

.clstimelocation.removelilne {
    border-bottom: 0;
}

button.btnTRACK15,
button.btnTRACK14,
button.btnTRACK13,
button.btnTRACK12,
button.btnTRACK11 {
    color: #088692;
    font-weight: 600;
}

ul.agenda-Comp li {
    margin: 0;
}

.resetgreyBtn .fa {
    display: inline-block;
    margin: 0 0 0 10px;
}

p.time-slot-coffee.productsulphurinfocard_blue {
    background: #0070c0;
}

.modal-backdrop.fade.show {
    display: none;
}

.time-slot {
    display: none;
}

.time-slot-coffee {
    color: white;
    width: 100%;
    margin: 18px auto 12px;
    text-align: center;
    padding: 2px 0 2px 0;
    border: 1px solid #dede;
    background: #c55a11;
}

.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}

.AgendaImage_content h2 {
    font-size: 22px;
    margin-top: 0px !important;
    text-align: center;
    font-weight: 600;
    color: #088692;
}

span#DownloadAgenda_ {
    float: right;
    margin: 20px 0 20px 10px;
}

span#DownloadAgenda_1 {
    float: right;
    margin: 20px 0 20px 0;
}

#deleterecord {
    cursor: pointer;
}

.PopupTimings p.cruLocation {
    margin-top: 2px;
}

.pd-0 {
    padding: 0 !important;
}

.mb-3 {
    margin-bottom: 7px;
}

.SponSection img {
    width: 120px;
}

.LeftTimeHide {
    display: none;
}

#fixed {
    max-width: 265px;
}

p.agendaTimeCard {
    display: inline-block;
    margin-left: 4px;
}

.container {
    position: relative;
}

span.ForAbsolute {
    font-size: 15px;
    padding: 8px 8px 8px 8px;
    position: absolute;
    z-index: 99;
    right: 11px;
    top: 74px;
}

.Add-Button.ForDownloadButton {
    font-size: 15px;
    padding: 6px 10px 6px 10px;
}

#divtimedur {
    display: none !important;
}

.Add-Button.YelloBg_.ResetButton.resetgreyBtn {
    justify-content: center;
}

.choices__list--multiple .choices__item {
    display: inline-block;
    vertical-align: middle;
    border-radius: 20px;
    padding: 0px 10px;
    font-size: 13px;
    font-weight: 600;
    margin-right: 2px;
    margin-bottom: 3.75px;
    background-color: #088692;
    border: 1px solid #088692;
    color: #fff;
    word-break: break-all;
}

.choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #f9f9f9;
    padding: 5px 0px 0px 5px !important;
    border: 1px solid #ddd;
    border-radius: 2.5px;
    font-size: 14px;
    min-height: 0;
    overflow: hidden;
    margin-left: 0px;
}

.choices__list--dropdown {
    left: 0px;
    background: #fff;
    z-index: 3
}

.choices__inner,
.choices__input {
    background: #fff;
}

.PopupDesigningFvrt {
    background: #fff;
    width: 100%;
    padding: 30px 26px 30px 26px;
    height: 100%;
    margin-top: 110px;
    border-radius: 8px;
    position: relative;
}

    .PopupDesigningFvrt .Add-Button {
        font-size: 16px;
        padding: 6px 10px 6px 10px;
    }

.FilterStrip {
    padding: 0;
    border-radius: 0px;
    width: 70%;
    background: #f5f5f5;
    padding: 18px 0 0px 0;
    left: 4px;
    position: relative;
    margin: 0 auto;
}

    .FilterStrip h3 {
        font-size: 20px;
        color: #088692;
        text-align: center;
        margin: 0 0 15px 0;
    }

a.Add-Button.YelloBg_.ResetButton.resetgreyBtn {
    margin-left: -4px;
}

a.Add-Button.YelloBg_.ResetButton.resetgreyBtn {
    padding: 0;
    display: inline;
    color: #088692 !important;
    background: transparent !important;
    font-size: 24px;
    margin-left: 30px;
}

.AddToFvrt_.fvrted {
    color: #8fc7ff !important;
}

/*ul.nav.tabs_Agenda.nav-tabs li.active:before {
            position: absolute;
            content: '';
            left: 39%;
            top: 110%;
            background: #088692;
            width: 45%;
            height: 2px;
            transform: translate(-50%, -50%);
        }*/

ul.nav.tabs_Agenda.nav-tabs li.active:last-child:before {
    left: 50%;
    width: 57%;
    display: none;
}

table.SpeakerBox_ thead tr td {
    display: none;
}

.company_name {
    display: revert !important
}

table.SpeakerBox_ tr td {
    border: 0 !important;
}

li.FirstBtnStyle.active {
    position: relative;
}

.card .agendathumbCard p {
    font-size: 14px;
    line-height: 20px;
}

p.cruLocation {
    position: absolute;
    right: 144px;
    color: #088692;
}

.PopupDesigningFvrt .agendathumbCard .agendathumbSpeakers {
    width: 100%;
}

.clstimelocation span.agendaTimeCard:nth-child(1) {
    color: #088692;
}

.AddToFvrtStar {
    position: absolute;
    z-index: 1;
    color: #5e5e5e;
    padding: 1px 7px 1px 7px;
    cursor: pointer;
    right: 2px;
    top: 14px;
    opacity: 1;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    border-radius: 50%;
}

    .AddToFvrtStar i {
        font-size: 16px;
        margin: 0;
        padding: 0;
    }

p.agendaTimeCard {
    position: relative;
    right: 33px;
}

.toast {
    z-index: 999999;
    opacity: 1;
    visibility: visible;
}

a.Add-Button.ForFvrtPopup {
    font-size: 18px;
    padding: 8px 10px 8px 10px;
    position: absolute;
    top: 234px;
    right: 47px;
    z-index: 99;
}

table.SpeakerBox_ img.speakerimagetable {
    width: 80px !important;
    border-radius: 50%;
    max-width: inherit;
}

table.SpeakerBox_ td {
    font-size: 16px;
}

.PopupDesigningFvrt table tr td,
.PopupDesigningFvrt table tr th {
    font-size: 16px;
}

.PopupDesigningFvrt button.close {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 24px;
    opacity: 2;
    z-index: 999;
    background: #088692;
    color: #fff;
    width: 35px;
    height: 33px;
    border-radius: 0%;
    font-size: 15px;
}

.PopupDesigningFvrt h3.cardSessionTitle {
    width: 100%;
}

span.Add-Button.ForFvrtButton {
    background: transparent !important;
    color: #088692 !important;
    font-size: 15px;
    font-weight: 600 !important;
    border: transparent !important;
    right: 10px !important;
    padding-right: 0;
    padding-left: 20px;
}

.DownloadAndFvrtButtons {
    width: 100%;
    text-align: right;
}

.ForAgendaButtons_ h3 span {
    font-size: 15px;
    margin: 12px 0 0 0;
    display: block;
}

p.productsulphurinfocard.productsulphurinfocard_blue {
    background: #0070c0
}

.tabbed_area_ {
    width: 90%;
    margin: 0px auto;
}

.classsulphurclinic,
.classsulphurtechshowcase {
    color: #ffffff;
    background-color: #bd0e0d;
}

.classsulphuricclinic,
.classsulphuracidshowcase {
    background: #088692;
}

.classconferencesession {
    background-color: #c55a11;
}

.parallax-text-wrap {
    position: relative;
    text-align: center;
}

/**/

.divider {
    display: inline-block;
    border: 0;
    font-size: 0;
    line-height: 0;
    height: 3px;
    max-width: 100px;
    width: 100%;
}

.divider-default {
    background: #088692;
    margin-bottom: 0 !important;
}

.RestButtonSection a.Add-Button {
    padding: 3px 10px 3px 10px;
    font-size: 14px;
    margin: 4px 0 10px 0;
    border-radius: 3px;
    outline: 0;
    text-decoration: none;
}

.RestButtonSection {
    text-align: center;
}

p.allproducts {
    display: none;
}

span.Add-Button.ForFvrtButton:before {
    display: none;
}

.RestButtonSection a.Add-Button {
    color: #000 !important;
    border: 1px solid #000;
}





.herosliderText h2, .herosliderText h1.h1 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
    text-transform: inherit;
    line-height: 45px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

.herosection:before {
    position: absolute;
    top: 0px;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(to right, #00838f, #02838e); */
    background-image: linear-gradient(to right, #00838f, #f78f8f);
    clip-path: none !important;
    /*background:url(https://www.tonesofbeautyexpo.com/images/TOB_Agenda_Banner_.jpg) no-repeat 50% 30%/cover;*/
    /*background:url(https://www.tonesofbeautyexpo.com/images/TOB_Agenda_Banner2.jpg) no-repeat 50% 30%/cover;*/
    background: url(https://www.tonesofbeautyexpo.com/images/TOB_AGENDA_IMG.jpg) no-repeat 50% 30%/cover;
}

.btn-style-three .btn-title {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: .2px;
    color: #01838f;
    font-weight: 600;
    padding: 10px 38px;
    min-height: 42px;
    /* background: #e6a9c4; */
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 0;
    z-index: 1;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}

.herosliderText h4 {
    font-weight: 600;
    color: #fff;
    font-size: 30px;
}

.brown-button {
    background: #a55151 !important;
    color: #fff !important;
}

.chat-btn {
    background: #fff !important;
    color: #169d53 !important;
    border-radius: 50px;
    margin-left: 20px;
}

.bg-white h4 {
    color: #01838e !important;
    font-size: 26px !important;
    text-align: center;
    padding: 10px 0px;
    margin: 0px;
}

.bg-white {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.herosection {
    width: 100%;
    padding: 55px 20px 0px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
}

.header-style-two .header-upper {
    position: absolute;
    background: transparent;
    padding-bottom: 20px;
    padding-top: 0px;
    width: 100%;
}

.fixed-header .header-upper {
    background: #fff;
}

.fixed-header .main-menu a {
    color: #000 !important;
}

.main-header .nav-outer .main-menu .collapse #NavigationControl2_nav li a {
    position: relative;
    color: #fff;
}

    .main-header .nav-outer .main-menu .collapse #NavigationControl2_nav li a:hover {
        color: #fff;
    }

ul.submenu_level_1 li a {
    color: #000 !important;
}

    ul.submenu_level_1 li a:hover {
        color: #088692 !important;
    }

.banner-stats p {
    font-size: 19px;
    color: #ffffff;
    margin-right: 30px;
    line-height: 33px;
}





@media screen and (min-device-width: 300px) and (max-device-width: 768px) {

    .AgendaMainCard {
        padding: 3.6% !important;
        margin: 1% 0% 7% 0% !important;
    }

    .mainSeparatorHeading h2 {
        font-size: 18px !important;
        padding: 2% 0% 3% 0% !important;
    }

    .AgendaHeader_as .col-lg-6.col-md-6.col-sm-6.col-xs-12 {
        width: 50% !important;
    }

    .AgendaNavTabs .AgendaNavLink {
        padding: 6px 12px 6px 12px !important;
        font-size: 16px !important;
    }

    .AgendaStageTabs {
        display: block !important;
        column-count: 2 !important;
        text-align: center !important;
    }

    .AgendaStageTabs .AgendaNavLink {
        padding: 6px 2px 6px 2px !important;
        font-size: 10px !important;
        margin: 0% 0% 5% 0% !important;
        display: inline-block !important;
        width: 95%;
    }

    .AgendaStageTabs {
        padding: 12px 0px 2px 0px !important;
    }

    .modal-dialog.stand-width {
        max-width: 100% !important;
    }
    button.close {
        z-index: 99;
    }
    /* STYLES HERE */
    .bg-white h4 {
        color: #01838e !important;
        font-size: 20px !important;
        text-align: center;
        padding: 10px 0px;
        margin: 0px;
    }

    .herosection {
        width: 100%;
        padding: 100px 20px 0px !important;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        position: relative;
    }

    .herosliderText h2, .herosliderText h1.h1 {
        color: #ffffff;
        font-size: 26px;
        font-weight: 800;
        text-transform: inherit;
        line-height: 38px;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 1.3px;
    }

    p.subheading.subheading2 {
        text-align: left;
        font-size: 20px !important;
    }

    .customSection.leftImageRTContent .flexBox .rightContentBoxSide {
        padding-top: 0px;
    }

    .left-logos {
        display: flex;
    }

        .left-logos .col-md-3 {
            width: 46%;
        }

    .heroVideoWrap img {
        display: none;
    }

    .heroVideoWrap {
        margin-top: 12% !important;
    }

    .herosliderText h4 {
        font-weight: 600;
        color: #fff;
        font-size: 24px !important;
    }

    .nav-outer .mobile-nav-toggler {
        color: #ffffff !important;
    }
}

.fixed-header .btn-title {
    color: #fff !important;
    background: #088692;
}

.tab_section .day_time {
    padding: 5px 15px;
    background-color: #088692;
    color: #fff;
    margin-right: 15px;
    font-weight: 700;
    border-right: 2px solid #FFF;
}

.tab_section ul.tabs_Agenda li.active a .date_tab {
    border-bottom: 2px solid #46b4ad;
}

.tab_section ul.tabs_Agenda li a .date_tab {
    border-bottom: 2px solid #46b4ad;
}

/*.tab_section .date_tab {
            display: flex;
            background: #fac4dc7a;
            align-items: center;
            cursor: pointer;
            font-weight: 600;
            color: #6c4038;
        }*/

.tab_section .date_tab {
    display: flex;
    background: #fff;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #6c4038;
    border: 1px solid #088692;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    background: #00000082;
}

button.close {
    position: absolute;
    top: 0;
    right: 0;
    background: #088692;
    opacity: 1;
    color: #fff;
    padding: 8px 12px 10px 12px;
}

.modal-content {
    margin: auto;
    width: 100%;
    border: 2px solid #088692 !important;
    padding: 20px;
    z-index: 999999999;
}

.PopupDesigningFvrt .Add-Button {
    font-size: 16px;
    padding: 6px 10px 6px 10px;
    background: #a55151 !important;
    color: #fff !important;
    cursor: pointer;
}



header.main-header.header-style-two .white-logo {
    display: block !important;
}

.fixed-header .color-logo {
    display: block !important;
}

.logo .color-logo {
    display: none !important;
}

.agendathumbCard .cardSessionTitle {
    color: #000;
    opacity: 1;
    color: #136a85;
    font-weight: 600;
    font-size: 18px;
    font-family: lato, sans-serif;
}

.card-columns1 .card {
    height: 100% !important;
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
    padding-bottom: 55px;
    margin-top: 0;
}

.mainSeparatorHeading h2 {
    position: relative;
    color: #088692;
    text-transform: uppercase;
    margin-bottom: 0;
    padding-bottom: 0;
    font-weight: 600;
    font-size: 30px;
    line-height: 36px;
}

p.top-para {
    font-size: 25px;
    color: #088692;
}

@media screen and (min-device-width: 300px) and (max-device-width: 768px) {
    /* STYLES HERE */
    div#fixed {
        position: relative !important;
        top: 0px !important;
        width: 100%;
    }

    .tabbed_area_ {
        width: 94%;
    }

        .tabbed_area_ .col-md-3 {
            text-align: center;
            display: flex;
            justify-content: center;
        }

    .DownloadAndFvrtButtons {
        display: flex;
        justify-content: center;
    }

    .agendathumbCard {
        margin-bottom: 32px;
    }

    span#DownloadAgenda_ {
        float: none;
        margin: 20px 10px 20px 10px;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    span#DownloadAgenda_1 {
        float: none;
        margin: 20px 10px 20px 10px;
        display: flex;
        justify-content: center;
    }
}

.tabcontrol01#fixed {
    position: relative !important;
    top: auto !important;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .tabcontrol01 .tabs_Agenda.nav-tabs li {
        width: 30%;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    /* STYLES HERE */
    .herosection {
        width: 100%;
        padding: 115px 20px 0px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        position: relative;
    }

    .header-style-two .main-menu .navigation > li > a {
        padding: 15px 5px !important;
        font-size: 12px !important;
        font-weight: 600;
        line-height: 30px;
    }

    .my-account .btn-style-three .btn-title {
        padding: 10px 8px !important;
    }

    .btn-style-three .btn-title {
        position: relative;
        display: block;
        font-size: 14px !important;
        line-height: 22px;
        letter-spacing: .2px;
        color: #01838f;
        font-weight: 600;
        padding: 10px 38px;
        min-height: 42px;
        /* background: #e6a9c4; */
        background: #ffffff;
        border: 2px solid transparent;
        border-radius: 0;
        z-index: 1;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
    }

    .white-btn {
        background: #6c4038;
        color: #fff;
        padding: 10px 8px !important;
        position: relative;
        display: block;
        font-size: 14px !important;
        line-height: 22px;
        letter-spacing: .2px;
        font-weight: 600;
        padding: 10px 8px;
        min-height: 42px;
        border: 2px solid transparent;
        border-radius: 0;
        z-index: 1;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
    }

    .my-account {
        margin-left: 2px;
    }
}
/*.card-columns1 .col-sm-4 {*/
.card-columns1 .col-sm-3 {
    display: grid;
    align-items: stretch;
}

@media screen and (min-device-width: 300px) and (max-device-width: 768px) {
    /* STYLES HERE */
    .modal-dialog.stand-width {
        width: 94%;
        left: 1%;
        top: 5%;
    }

    .stream-heading-container {
        display: none;
    }

    #day1 .card-columns1 .card .SessionHeadings_ {
        display: block;
    }

    #day2 .card-columns1 .card .SessionHeadings_ {
        display: block;
    }
}

.col-sm-12.mb-12 {
    margin-bottom: 60px;
}

    .col-sm-12.mb-12 .time-slot1.labeling {
        padding: 8px;
        border-radius: 6px;
    }

        .col-sm-12.mb-12 .time-slot1.labeling p {
            font-size: 18px;
            font-weight: 600;
        }

.herosliderText p {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    margin: 15px 0 0;
    padding: 0;
}

.heroVideoWrap img {
    display: none;
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .herosection {
        padding: 168px 20px 30px !important;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1920px) {
    .herosection {
        padding: 178px 20px 30px !important;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
    .herosection.aiIntroWrap .herosliderText {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .herosection.aiIntroWrap .heroVideoWrap {
        display: none;
    }

    .herosliderText h2, .herosliderText h1.h1 {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    .herosliderText p {
        line-height: normal;
    }

    .herosection:before {
        background: url(https://www.tonesofbeautyexpo.com/images/TOB_AGENDA_IMG.jpg) no-repeat 78% 50%/cover;
    }

    .herosection {
        padding: 180px 20px 0px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    .fixed-header .header-upper .btn-style-three .btn-title {
        background: #01838f !important;
    }
}

.filter-container {
    justify-content: center !important;
    display: flex !important;
    text-align: center !important;
    width: 100%;
}

    .filter-container a {
        background: #088692;
        margin: 15px 10px 30px 10px;
        border-color: #088692;
    }

        .filter-container a:hover {
            background: #613c26;
            margin: 15px 10px 30px 10px;
            border-color: #613c26;
        }

        .filter-container a.active-filter {
            background: #6c4038 !important;
            border-color: #6c4038 !important;
        }

@media screen and (min-device-width: 320px) and (max-device-width: 768px) {
    /* STYLES HERE */
    .tab_section ul li {
        width: 50%;
        margin: 0px 0 !important;
    }

    ul.nav.tabs_Agenda.nav-tabs {
        display: flex;
        justify-content: center;
        margin: 0px 0px 25px;
        padding: 0;
        flex-wrap: wrap;
    }

    .date_tab {
        font-size: 16px;
    }

    .tab_section .day_time {
        margin-right: 0px;
    }

    .filter-container a {
        margin: 5px;
    }

    .filter-container {
        margin-bottom: 20px;
    }

        .filter-container a:hover {
            background: #613c26;
            margin: 5px 10px 5px 10px !important;
            border-color: #613c26;
        }
}

#agendaFilter {
    border: none;
    padding: 15px 10px;
    background: #088692;
    color: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    font-size: 16px;
    line-height: normal;
    width: 16vw;
    position: relative;
    overflow: hidden;
}

    #agendaFilter::before {
        content: "";
        position: absolute;
        background: url(https://tonesofbeautyexpo.com/images/filter.png) no-repeat center/cover;
        width: 20px;
        height: 20px;
        right: 0;
        top: 0;
    }

    #agendaFilter option {
        background: #fff;
        border-bottom: 1px solid #fff;
        font-size: 16px;
        line-height: normal;
        color: #000;
    }

        #agendaFilter option:hover {
            background: #088692;
        }

        #agendaFilter option:first-child {
            margin: 10px 0 0;
        }

        #agendaFilter option:last-child {
            border-bottom: none !important;
        }

@media(max-width:768px) {
    #agendaFilter {
        width: 85%;
    }

    .Downloaddiv_ {
        text-align: center;
    }

    .ForDownloadButton {
        font-size: 12px !important;
        padding: 10px 6px !important;
        width: 42%;
        display: inline !important;
        position: relative;
        float: inherit !important;
        margin: auto !important;
    }

    .card-columns1 .card {
        padding-bottom: 0 !important;
        min-height: inherit !important;
    }

    .card.Hidden-Session {
        display: none;
    }

    .track-filter {
        margin-bottom: 30px !important;
    }
}

.subfilter {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .subfilter li {
        cursor: pointer;
        padding: 8px 12px;
    }

.track-filter {
    position: relative;
    width: 280px;
    font-family: Arial, sans-serif;
    margin: 0 auto;
}

.mainfilter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .mainfilter:hover {
        border-color: #999;
    }

.arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.mainfilter.active .arrow {
    transform: rotate(180deg);
}

.subfilter {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 6px;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
}

    .subfilter li {
        padding: 10px 15px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .subfilter li:hover {
            background: #f5f5f5;
        }

        .subfilter li.active {
            background: #e9f2ff;
            font-weight: 600;
        }

.TimeCard_as {
    color: #fff !important;
    background-color: #088692 !important;
    padding: 2px 10px;
    border-radius: 2px;
    font-size: 14px;
}

.TimeCardMinutes_as {
    position: relative;
    text-align: right;
}

    .TimeCardMinutes_as:before {
        content: "\f017";
        font-family: 'Font Awesome 5 Free';
        margin-right: 5px;
    }

.AgendaMainCard h3 {
    /*text-transform: capitalize;*/
    font-weight: 600 !important;
    color: #136a85;
    font-size: 18px;
    margin: 0;
    margin-bottom: 1%;
    cursor: pointer;
}

.SpeakersDetails h3 {
    font-size: 16px;
}
.AgendaMainCard p {
    margin: 0;
    font-size: 13px;
}
span.CompanyName {
    color: #088692;
    font-weight: 800;
}

/*.SpeakerImg_as {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}*/

.SpeakerImg_as {
    width: 20%;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.SpeakersDetails {
    width: 80%;
}

.MainSpeakers_as {
    display: flex;
    align-items: center;
    margin: 3% 0% 2% 0%;
}

.AgendaSpeakers_as h5 {
    font-size: 18px;
    margin-bottom: 1%;
    color: #136a85;
    font-family: lato, sans-serif;
    font-weight: 600;
}

.AgendaSpeakers_as {
    margin-top: 1%;
    padding-top: 1%;
}

.AgendaHeader_as {
    border-bottom: 1px solid #178e998f;
    padding-bottom: 1%;
    margin-bottom: 1.4%;
}

.AgendaMainCard {
    border: 1px solid #178e998f;
    padding: 1%;
    border-radius: 10px;
    margin: 1% 0% 1% 0%;
}
/**/
.AgendaNavTabs {
    justify-content: center;
    margin-top: 5%;
    margin-bottom: 1%;
}

.AgendaStageTabs .AgendaNavLink,
.AgendaNavTabs .AgendaNavLink {
    color: #136a85;
    font-weight: 600;
    padding: 0.3vw 0.8vw 0.3vw 0.8vw;
    font-size: 1.2vw;
    margin: 11px;
    border: 1px solid #136a85;
    border-radius: 7px;
}

.AgendaNavTabs .AgendaNavLink.active {
    background: #136a85;
    color: #fff;
    border-color: #136a85;
}

.AgendaStageTabs .AgendaNavLink.active {
    background: #088692;
    color: #fff;
}

.AgendaStageTabs {
    justify-content: space-between;
    border: 1px solid #0000002e;
    padding: 15px 0 15px 0;
    border-radius: 10px;
}

.AgendaStageTabs .AgendaNavLink {
    padding: 0.5vw 0.8vw 0.5vw 0.8vw;
    font-size: 0.9vw;
}

span.AddToFvrt_ {
    position: absolute;
    right: 20px;
    top: 0px;
}

.tab_section ul li {
    width: auto !important;
}

.modal-dialog.stand-width {
    max-width: 60%;
}

.AgendaImage_content p {
    text-align: left;
}

.AgendaStageTabs li:nth-child(2) a {
    border: 1px solid #fac4dc !important;
}

.AgendaStageTabs li:nth-child(3) a {
    color: #613c26;
    border: 1px solid #613c26 !important;
}

.AgendaStageTabs li:nth-child(4) a {
    color: #35302c;
    border: 1px solid #35302c !important;
}

/**/

.AgendaStageTabs li:nth-child(2) a.active {
    background: #fac4dc !important;
    color: #136a85;
    border: 1px solid #fac4dc !important;
}

.AgendaStageTabs li:nth-child(3) a.active {
    background: #613c26 !important;
    color: #fff;
    border: 1px solid #613c26 !important;
}

.AgendaStageTabs li:nth-child(4) a.active {
    background: #35302c !important;
    color: #fff;
    border: 1px solid #35302c !important;
}

/**/

#conversations-day1 span.TimeCard_as {
    background-color: #fac4dc !important;
    color: #000 !important;
}

#professionals-day1 span.TimeCard_as {
    background-color: #613c26 !important;
    color: #fff !important;
}

#business-day1 span.TimeCard_as {
    background-color: #35302c !important;
    color: #fff !important;
}


.mainSeparatorHeading h2 {
    text-transform: capitalize;
    font-size: 26px;
    line-height: normal;
}

div#insights-day1 .AgendaMainCard.MessageBoxCard,
div#insights-day2 .AgendaMainCard.MessageBoxCard {
    background: #088692;
}

    div#business-day1 .AgendaMainCard.MessageBoxCard h3,
    div#professionals-day1 .AgendaMainCard.MessageBoxCard h3,
    div#insights-day1 .AgendaMainCard.MessageBoxCard h3,
    div #business-day2 .AgendaMainCard.MessageBoxCard h3, 
    div#professionals-day2 .AgendaMainCard.MessageBoxCard h3, 
    div#insights-day2 .AgendaMainCard.MessageBoxCard h3 {
    color: #fff;
}

div#conversations-day1 .AgendaMainCard.MessageBoxCard,
div#conversations-day2 .AgendaMainCard.MessageBoxCard {
    background: #fac4dc;
}

div#professionals-day1 .AgendaMainCard.MessageBoxCard,
div#professionals-day2 .AgendaMainCard.MessageBoxCard {
    background: #613c26;
}

div#business-day1 .AgendaMainCard.MessageBoxCard,
div#business-day2 .AgendaMainCard.MessageBoxCard {
    background: #35302c;
}



.AgendaMainCard.MessageBoxCard {
    text-align: center;
}

.AgendaMainCard.MessageBoxCard .AgendaHeader_as {
    display: none;
}

.AgendaMainCard.MessageBoxCard h3 {
    margin: 1% 0% 1% 0%;
}