﻿/*
    VCIA FONTS
    Inter Bold - Titles / Subtitles / Button copy / Navigation
    Inter Regular - Regular copy / Paragraphs
    Calluna Semibold - Subtitles / Introduction or short paragraph / Quotes
*/


/* VCIA COLORS
    #47BDA0 = green
    #1F3D4A - dark blue
    #58595B - dark grey
*/
html, body, form {
    margin: 0px auto !important;
    padding: 0px !important;
}

body {
    font-family: 'inter-variable', Helvetica, Verdana, sans-serif !important;
    font-size: 1.0em;
    color: #272727;
    text-align: left;
    background-color: #1F3D4A;
    /*/background: linear-gradient(130deg, #1F3D4A, #47BDA0) no-repeat center fixed;*/
}

.pagewrapper {
    width: 1200px;
    clear: both;
    margin: 0px auto;
    padding: 0px 0px 0px 0px;
    text-align: center;    
    background-color: #fff;
    border: solid 2px #1F3D4A;
}

#header_wrapper {
    width: 100%;
    padding: 0px;
    text-align: center;
    overflow: hidden;
    margin: 0px auto 0px auto;
}
#header_wrapper img {
    width:1200px;
    height:auto;
}

.pagewrapper div.content_wrapper {
    width: 1200px;
    padding: 0px 0px 20px 0px;
    background-color: #fff;
    min-height: 500px;
}

.navMenu {
    margin: 0px auto;
    padding: 0px;
    width: 100%;
    overflow: hidden;
    background-color: white;
}

div.footer_wrapper {
    width: 1200px;
    margin: 0px auto 0px auto;
    padding: 0px;
    /*background: linear-gradient(to right,#1F3D4A 50%, #47BDA0 50%) no-repeat center fixed;*/
}

    div.footer_wrapper div.LargeText {
        font-size: 1.1em !important;
        margin: 0 !important;
        padding-top: 12px !important;
        padding-left: 10px;
        color: #fff !important;
        text-align: left !important;
        font-weight: bold !important;
    }

    div.footer_wrapper div.NormalText {
        font-size: 0.9em !important;
        margin: 0 !important;
        padding-top: 2px !important;
        padding-left: 10px;
        color: #fff !important;
        text-align: left !important;
        padding-bottom: 5px;
    }

div.footer_logo {
    margin: 0px auto 10px auto;
    background-color: #ed0080;
    width: 1000px;
    border: solid 2px #ed0080;
}

/* content class around all pages not using 3rd party controls*/
.pagewrapper div.content_wrapper div.content {
    margin: 0px auto;
    padding-top: 0px;
}

div.content img {
    border: none;
}

div.content hr {
    border: none;
    border-bottom: solid 1px #999;
    text-align: center;
    width: 90%;
    height: 1px;
}

div.content .hrdotted {
    border: none;
    border-bottom: dotted 1px #339;
    text-align: center;
    width: 90%;
    height: 1px;
}

div.content h1 {
    margin: 5px 0 5px 0;
    padding: 0;
    font-size: 1.4em;
    color: #003599;
    font-weight: bold;
}

div.content h2 {
    font-size: 1.4em;
    color: #47BDA0;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 5px;
    margin: 0px;
    margin-bottom: 5px;
    text-align: left;
    font-weight: bold;
}

div.content h3 {
    font-size: 1.2em;
    color: #1F3D4A;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 5px;
    margin: 0px;
    margin-bottom: 5px;
    text-align: left;
}

div.content h4 {
    font-size: 1.1em;
    color: #76b986;
    padding-bottom: 5px;
    margin: 0px;
    margin-bottom: 5px;
    text-align: left;
}

div.content h5 {
    color: #910021;
    font-size: 1.1em;
    padding-bottom: 5px;
    margin: 0px;
}

div.content .hrdotted {
    border: none;
    border-bottom: dotted 1px #1BA0E1;
    text-align: center;
    width: 90%;
    height: 1px;
}

.url a, .url a:link, .url a:active, .url a:visited {
    color: #0066CC;
    text-decoration: none;
    border-bottom: dotted 1px #0066CC;
    font-size: 1.0em;
}

    .url a:hover {
        text-decoration: none;
        color: #c00;
        border-bottom: solid 1px #c00;
        font-size: 1.0em;
    }
input[type="text"]:disabled, select:disabled {
    background: #efefef;
    color: #999;
}

/* home page grid of the buttons - attendee/exhibior/speaker/media */
.NewReg {
    padding: 20px 10px 0px 10px;
    margin: 0px auto;
    text-align: center;
}

    .NewReg .left {
        text-align: left !important;
    }

    .NewReg .options {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-flow: row wrap;
    }

    .NewReg .buttons {
        flex: 1;
        width: 50%;
        text-align: center;
    }

    .NewReg .flexcontainer {
        display: flex;
        padding-top: 10px;
        flex-wrap: wrap;
        flex-direction: row;
        flex-flow: row wrap;
    }
/* end home page grid */
/* flex container for most pages */
.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-flow: row wrap;
    padding-top: 5px;
}

    .flexcontainer .regformLeft {
        flex: 1 40%;
        max-width: 40% !important;
        padding: 0px 5px 0px 0px;
        margin: 0px;
        text-align: right;
    }

    .flexcontainer .regformRight {
        flex: 1 56%;
        max-width: 56% !important;
        text-align: left;
        padding: 0px 0px 0px 5px;
    }   
    .flexcontainer .regformBold {
        flex: 1;
        width: 65%;
        background-color: #fff;
        color: #ed0080;
        font-size: 1.0em;
        text-align: left;
        padding: 0px 0px 0px 5px;
        font-weight: bold;
        border-radius: 6px;
    }

    .flexcontainer .attendeeLeft {
        flex: 1 55%;
        max-width: 55%;
        padding: 5px 0px 0px 5px;
        margin: 0px;
        text-align: left;
    }

    .flexcontainer .attendeeRight {
        flex: 1 43%;
        max-width: 43%;
        text-align: left;
        padding: 5px 0px 0px 5px;
    }
    .flexcontainer .ratesLeft {
        flex: 1 50%;
        max-width: 50% !important;
        padding: 0px 5px 0px 0px;
        margin: 0px;
        text-align: right;
    }

    .flexcontainer .ratesRight {
        flex: 1 45%;
        max-width: 45% !important;
        text-align: left;
        padding: 0px 0px 0px 5px;
    }   

/* end flex container for most pages */
.pageheader {
    display: none;
}

div.content .required {
    font-size: 0.9em;
    COLOR: red;
}

div.content .notes, div.content .updateProgress {
    font-size: 0.8em;
}

div.content .updateProgress {
    color: #A62205;
}

div.content .error, div.content .rLarge {
    color: #c00;
}

.Saving {
    color: #eb2502;
    font-size: 1.6em;
    font-weight: bold;
}

.pinned {
    position: fixed;
    right: 0;
    top: 150px;
    background-color: #fff;
    color: Red;
    width: 50px;
    height: 50px;
}


div.greyBox {
    /*background-color: #f3f3f3;*/
    padding: 10px;
    margin: 0px auto;
    width: 100%;
}

    div.greyBox ul, li {
        margin: 0;
        padding: 3px;
        list-style: none;
        text-align: left;
    }

    div.greyBox div.innerBox {
        border: none;
        background-color: #fff;
        padding: 10px;
    }

        div.greyBox div.innerBox h2 {
            font-weight: normal;
            font-size: 1.3em;
            color: #4ca6dc;
            border-bottom: 1px solid #e3e3e3;
            padding-bottom: 5px;
            margin: 0px;
            margin-bottom: 5px;
            text-align: left;
        }

        div.greyBox div.innerBox h3 {
            font-size: 1.2em;
            color: #7bbd89;
            font-weight: bold;
            border-bottom: 1px solid #e3e3e3;
            padding-bottom: 5px;
            margin: 0px;
            margin-bottom: 5px;
            text-align: left;
        }

        div.greyBox div.innerBox div.colHeader {
            font-size: 1.1em;
            color: #fff;
            text-align: left;
            font-weight: bold;
            padding: 5px;
            /*margin: 10px auto;*/
            background-color: #7bbd89;
            flex-wrap: nowrap;
        }

        div.greyBox div.innerBox div.item {
            text-align: left;
        }

        div.greyBox div.innerBox div.title {
            font-size: 1.1em;
            font-weight: bold;
            font-style: italic;
        }

        div.greyBox div.innerBox .details {
            font-size: 0.9em;
            padding: 5px 10px;
            background-color: #f3f3f3;
            text-align: left;
        }

        div.greyBox div.innerBox .waitlist {
            background-color: #FFF8DC;
            text-align: left;
            padding: 5px;
            font-style: italic;
        }

        div.greyBox div.innerBox .bwaitlist {
            text-align: left;
            padding: 5px;
            font-style: italic;
        }
/* Grey Box FLEX */
.greyBox .flexcontainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-flow: row wrap;
    padding-top: 5px;
}

    .greyBox .flexcontainer .col1 {
        flex: 1 45%;
        max-width: 45% !important;
        padding: 10px 0px 0px 5px;
        margin: 0px;
        text-align: left;
        vertical-align:top;
    }

    .greyBox .flexcontainer .col2 {
        flex: 1 30%;
        max-width: 30% !important;
        text-align: left;
        vertical-align: top;
        padding: 10px 0px 0px 5px;
        font-size:1.0em;
    }
    .greyBox .flexcontainer .col4 {
        flex: 1 15%;
        max-width: 15% !important;
        text-align: right !important;
        padding: 10px 5px 0px 0px;
        vertical-align: top !important;
    }
/* end  Grey Box FLEX */
/* Review page*/

.cancel .header {
    text-align: left;
    background-color: #1F3D4A;
    color: #fff;
    font-size: 1.2em;
    height: 30px;
    font-weight: bold;
    padding: 5px;
}

.review, .managereview {
    width: 100%;
    margin: 0px auto;
    padding: 0px;
    border: solid 1px #000;
    /*flex: 1;*/
    text-align: left;
}
.review div, .managereview div {
    text-align: left;
    
}

    .review .headerL, .managereview .headerL, .review .headerR, .managereview .headerR {
        text-align: left;
        background-color: #1F3D4A;
        color: #fff;
        font-size: 1.2em;
        height: 30px;
        font-weight: bold;
        padding: 5px;
    }

    .review .headerR, .managereview .headerR {
        text-align: right;
    }

        .review .headerR a, .managereview .headerR a {
            font-weight: normal;
            border-bottom-color: #fff;
            font-size: 1.1em;
        }

    .review .sectionL, .review .sectionR, .managereview .sectionL, .managereview .sectionR {
        font-weight: bold;
        padding: 5px;
        background-color: #efefef;
        font-size: 1.2em;
        color: #1F3D4A;
    }

    .review .sectionL, .managereview .sectionL {
        flex: 1 60%;
        min-width: 60% !important;
        text-align: left;
    }

    .review .sectionR, .managereview .sectionR {
        flex: 1 28%;
        min-width: 28% !important;
        text-align: right;
    }

    .review h3, .managereview h3 {
        color: #1F3D4A;
        display: inline;
        font-size: 1.2em;
        border: none;
        text-transform: none;
    }

    .review .colHeader, .managereview .colHeader {
        background-color: #D7D7D7;
        font-size: 1.1em;
        font-weight: normal;
        padding: 4px;
    }

    .review .groupHeader, .managereview .groupHeader {
        background-color: #D7D7D7;
        font-size: 0.9em;
        font-weight: normal;
        padding: 2px;
    }

    .review .title, .managereview .title {
        text-align: left;
        padding: 2px 0px;
        font-size: 1.1em;
        color: #ef4239;
        font-weight: normal;
    }
    /* need class files for the labels (Name:) vs the actual data */
    .review .labelcol1, .managereview .labelcol1 {
        flex: 1 19%;
        max-width: 19% !important;
        padding: 0px 0px 0px 5px;
        margin: 0px;
        text-align: left;
    }

    .review .datacol1, .managereview .datacol1 {
        flex: 1 29%;
        max-width: 29% !important;
        padding: 0px 0px 0px 5px;
        margin: 0px;
        text-align: left;
    }

    .review .labelcol2, .managereview .labelcol2 {
        flex: 1 19%;
        max-width: 19% !important;
        padding: 0px 0px 0px 5px;
        margin: 0px;
        text-align: left;
    }

    .review .datacol2, .managereview .datacol2 {
        flex: 1 29%;
        max-width: 29% !important;
        padding: 0px 0px 0px 5px;
        margin: 0px;
        text-align: left;
    }

    .review .item, .managereview .item {
        text-align: left;
        padding: 0px 10px;
        flex: 1;
    }

    .review .rate, .managereview .rate {
        text-align: right;
        padding: 0px 10px;
        flex: 1;
        color: red;
    }
    /* we need the following columns - Qty, Title, Date/Time, Rate */
    .review .col1, .managereview .col1, .review .col1, .managereview .col1 {
        flex: 1 5%;
        max-width: 5% !important;
        padding: 2px 0px 2px 5px;
        margin: 0px;
        text-align: left;
    }

    .review .col2, .managereview .col2, .review .col2, .managereview .col2 {
        flex: 1 65%;
        max-width: 65% !important;
        padding: 2px 0px 2px 5px;
        margin: 0px;
        text-align: left;
    }

    .review .col3, .managereview .col3, .review .col3, .managereview .col3 {
        flex: 1 15%;
        max-width: 14% !important;
        padding: 2px 0px 2px 0px;
        margin: 0px;
        text-align: right;
    }

    .review .col4, .managereview .col4, .review .col4, .managereview .col4 {
        flex: 1 15%;
        max-width: 14% !important;
        padding: 2px 5px 2px 0px;
        margin: 0px;
        text-align: right;
    }

    .review .details, .managereview .details {
        font-size: 0.9em;
        padding: 0px 10px;
    }

    .review .footerL, .managereview .footerL, .review .footerR, .managereview .footerR {
        background-color: #000;
        color: #fff;
        font-size: 1.2em;
        font-weight: bold;
        height: 30px;
        padding-right: 5px;
    }

.review .footerL {
    flex: 1 50;
    max-width: 50% !important;
    padding: 5px 0px 0px 5px;
    margin: 0px;
    text-align: left;
}

.review .footerR {
    flex: 1 50%;
    max-width: 50% !important;
    padding: 5px 5px 0px 0px;
    margin: 0px;
    text-align: right;
}

.cancelHeader {
    margin-top: 15px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
}

.cancelText {
    padding: 0px 10px 10px 10px;
    text-align: center;
    font-size: 0.9em;
}

/*checkout page*/
#paymentPage {
    text-align: left;
}

#checkout {
    border: dotted 1px #1F3D4A;
    text-align: center;
    padding: 10px;
    background-color: #dbeaf0;
    max-width: 500px;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    margin: 0px auto;
}

div.box {
    border: dotted 1px #1F3D4A;
    text-align: center;
    padding: 10px;
    background-color: #dbeaf0;
    max-width: 500px;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    margin: 0px auto;
}

div.Help {
    padding: 5px 10px;
    text-align: left;
    color: #333;
    font-size: 13px;
}

.waitHeader {
    background-color: #339;
    color: #fff;
    font-size: 1.0em;
    font-weight: normal;
    padding-left: 5px;
}

div.trackBar {
    margin: 0px auto;
    padding: 0px;
    text-align: center;
}

    div.trackBar td {
        margin: 0px auto;
        padding: 0px;
        text-align: center;
        width: 100px;
    }

    div.trackBar img {
        width: 88px;
        height: 94px;
    }

div.viewreg {
    margin: 0px auto;
    padding: 0px;
    text-align: center;
}

    div.viewreg td {
        margin: 0px auto;
        padding: 0px;
        text-align: center;
        width: 172px;
    }


/* ADMIN Loign Page styles*/
div.HomeBox {
    margin: 0px auto 0px auto !important;
    padding: 0px !important;
    background-color: white !important;
    text-align: left;
}

    div.HomeBox h3 {
        background-color: #47BDA0;
        color: white !important;
        padding: 10px !important;
        font-size: 1.4em;
        margin: 0px auto;
    }

    div.HomeBox h4 {
        background-color: #47BDA0;
        color: white !important;
        padding: 10px !important;
        font-size: 1.4em;
        margin: 0px auto;
    }

    div.HomeBox h2 {
        font-size: 1.2em !important;
        border-bottom: 1px solid #272727;
        color: #272727;
    }

    div.HomeBox td {
        text-align: left;
        padding: 10px;
        vertical-align: top;
        line-height: 1.4em;
    }
.OkSummary {
    padding: 0px 0px 5px 0px;
    border: solid 1px #008000;
    margin: 0px 0px 10px 0px;
    background-color: #fff;
    width: 90%;
    font-size: 13px;
    color: #272727;
    font-weight: normal;
    text-align: left;
}

    .OkSummary .header {
        background: #e6ffe6 url(../Images/Checkbox.png) no-repeat 5px;
        text-align: left;
        color: #272727;
        height: 30px;
        padding-left: 40px !important;
        padding-top: 10px !important;
        vertical-align: text-bottom;
    }
div.content .list ul, li {
    margin: 0;
    padding: 3px;
    list-style: disc;
    text-align: left;
}
.sTable th, .sTable td {
    padding: 1px !important;
    padding-left: 3px !important;
}

.sTable th {
    background-color: #58595B;
    font-size: 1.1em;
    color: white;
}

.sTable tr.even {
    background-color: #d8d8da;
}

.sTable tr.odd {
    background-color: #f2f2f3;
}
.RadCalendar_Bootstrap .rcRow th
{
    color:#efefef;
}
.RadCalendar .rcRow a, .RadCalendar .rcRow span {
    width: 1.7em !important;
    text-align: center;    
}
.RadCalendar .rcHover a {
    width: 1.7em !important;
    background-color: #58595B !important;
    color: white !important;
    text-align: center;
}
.RadCalendar_Bootstrap .rcSelected a, .RadCalendar_Bootstrap .rcSelected span {
    border-color: #1F3D4A;
    color: #fff !important;
    background-color: #1F3D4A !important;
    text-align: center;
}
.RadCalendar_Silk .rcSelected a, .RadCalendar_Silk .rcSelected span {
    border-color: #47BDA0 !important;
    color: #fff;
    background-color: #47BDA0 !important;
}
.calDate {
    background-color: #dbeaf0;
}
/* radtab strip custom styles - SILK*/
.RadTabStrip_Silk .rtsLevel1 .rtsSelected .rtsLink {
    color: #1F3D4A !important;
}

    .RadTabStrip_Silk .rtsLevel1 .rtsSelected .rtsLink:before {
        border-color: #1F3D4A !important;
    }
.RadTabStrip_MetroTouch .rtsLevel1 {
    border-color: #1F3D4A !important;
}
/* radtab strip custom styles - SILK*/
.RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected .rtsLink {
    border-color: #1F3D4A !important;
    color: #fff;
    background-color: #1F3D4A !important;
}   

.RadTabStrip .rtsUL li {
    padding: 0px !important;
}

/* override the Telerik Grid styles */
.RadGrid_Bootstrap td, .RadGrid_Bootstrap th, .RadGrid_Default td, .RadGrid_Default th {
    font-family: 'inter-variable', Helvetica, Verdana, sans-serif;
    font-size: 0.85em !important;
}
/* Rad Button Styling - replacing all the image buttons */
.RadButton.RadButton_Silk.rbLinkButton.css3Grad { /* this is the pink button */
    border: 0;
    border-radius: 10px;
    height: 42px !important;
    font-size: 1.2em;
    color: #fff !important;
    background-color: #47BDA0 !important;
    padding: 7px 10px !important;
    min-width: 200px;
    text-align: center !important;
    vertical-align: top !important;
    white-space: pre-wrap !important;
    background-image: none !important;
}
.RadButton.RadButton_Windows7.rbLinkButton.css3Grad { /*this is the dark blue button */
    border: 0;
    border-radius: 10px;
    height: 38px !important;
    font-size: 1.2em;
    color: #fff !important;
    background-color: #003599 !important;
    padding: 10px !important;
    min-width: 120px;
    text-align: center !important;
    vertical-align: top !important;
    white-space: pre-wrap !important;
    background-image: none !important;
}
.rbText {
    text-align: center !important;
    vertical-align: top !important;
    white-space: normal !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-family: 'inter-variable', Helvetica, Verdana, sans-serif !important;
    font-weight: bold;
}

.RadButton.rbLinkButton.css3Grad:hover, .RadButton.rbLinkButton.css3Grad.rbLinkButtonChecked:hover {
    color: white !important;
    background-color: #1F3D4A !important;
    vertical-align: top !important;
}
/* rad styling to override the ALL standard .NET button hover style - purple */
.rfdSkinnedButton:hover, .rfdSkinnedButton:focus {
    background-color: #47bda0 !important;
    background-image: linear-gradient(#47bda0, #36967e) !important;
    border: 1px solid #36967e !important;
    color: white !important;
    font-family: 'inter-variable', Helvetica, Verdana, sans-serif !important;
}
.rfdSkinnedButton {
    background-color: #1f3d4a !important;
    background-image: linear-gradient(#35687e, #1f3d4a) !important;
    border: 1px solid #1f3d4a !important;
    color: white !important;
    font-family: 'inter-variable', Helvetica, Verdana, sans-serif !important;
}
/* override the left icon in the radwindows */
.RadWindow_Windows7 a.rwIcon {
    background-image: url('../images/favicon.png') !important;
}