@import url("login.css");
@import url("buttons.css");
@import url("mainmenu.css");
@import url("CMS.css");

/******************
    can use color picker to select hover colors 10% darker:
    https://www.w3schools.com/colors/colors_picker.asp
    can use any free font from https://fonts.google.com/
    -default has Montserrat 400/600/700
    -default has Cormorant Garamond 500
*******************/

:root {
    --text: #333;
    --primary: #cd1041;
    --primary-hover: #a60c35;
    --secondary: #7862ab;
    --secondary-hover: #655095;
    --info: #cd1041;
    --info-hover: #a60c35;
    --success: #1d954b;
    --success-hover: #26c061;
    --warning: #fbbc03;
    --warning-hover: #c88900;
    --danger: #ea4335;
    --danger-hover: #b71002;
    --light: #f8f9fa;
    --dark: #212324;
    --shaded: #ddd;
    --gray: #eee;
    --disabled: #777;
    --shadow: rgba(0,0,0,0.15);
    --dark50: rgba(0,0,0,0.5);
    --navbkg: var(--dark50);
    --navtext: var(--light);
    --navactive: var(--secondary);
    --navbkg-sticky: rgba(255,255,255,1);
    --navtext-sticky: var(--dark);
    --footer: var(--primary);
    --footer-text: var(--light);
    --footer-2: var(--dark50);
    --radius-base: 0.25rem;
    --base-font-size: 16px;
    --font-family-sans-serif: -apple-system, 'Open Sans', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-family-serif: 'Cormorant Garamond', 'Times New Roman', Times, serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --font-family-headings: var(--font-family-sans-serif);
}
body, td, p, li, label {
    font-family: var(--font-family-sans-serif);
    font-size: var(--base-font-size);
    color: var(--text);
    line-height: 1.85em;
}
h1, h2, h3, h4 {
    display: block;
    font-family: var(--font-family-headings);
    font-weight: 600;
}
h1 {
    padding-top: 90px;
    padding-left: 10px;
    font-size: 2em;
}
    h1 small {
        font-family: var(--font-family-sans-serif);
        font-size: var(--base-font-size);
    }
h2 {
    margin-top: 30px;
    margin-bottom: 4px;
    font-size: 1.7em;
}
h3 {
    font-size: 1.3em;
}
h4 {
    margin: 10px 0 4px 0;
    font-size: 1.1em;
    font-weight: 700;
}

#banner-site,
#banner-destination,
#banner-hotel,
#banner-activities,
#banner-agenda,
#banner-attire {
    background-color: var(--shaded);
    background-position: center center;
    background-image: none;
    width: 100%;
    height: 180px;
    color: var(--text);
}
/********************
    main content area
****************************/
#wrapper {
    position: relative;
    min-height: 100%;
    height: auto;
    /* Negative indent footer by its height */
    margin: 0 auto -200px;
    /* Pad bottom by footer height */
    padding: 0 0 200px 0;
}
.main-area {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 100%;
}
#timeout_warning {
    display: none;
    background-color: var(--light);
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
a {
    color: var(--info);
    text-decoration: underline;
}
    a:hover {
        color: var(--info-hover);
        text-decoration: none;
    }
/**prevents hyperlinked sup tags from inheriting underlines**/
sup {
    display: inline-block;
    font-size: 0.8em;
    text-transform: none;
}
pre,
code,
kbd,
samp {
    font-family: var(--font-family-monospace);
    font-size: 1em;
}
strong {
    font-weight: 700;
}
blockquote {
    margin-left: 12px;
}
.skip-link {
    background: var(--primary);
    color: var(--light);
    border: none;
    border-radius: 0 0 .25em .25em;
    text-decoration: none;
    height: 40px;
    left: 34%;
    padding: 12px 16px;
    position: absolute;
    transform: translateY(-100%);   
    transition: transform 0.5s;
}
    .skip-link:visited,
    .skip-link:hover {
        color: var(--light);
        text-decoration: underline;
    }
    .skip-link:focus {
        color: var(--light);
        text-decoration: underline;
        transform: translateY(0%);
        z-index: 1000;
    }
.table th {
    border-top: none !important;
}
.hidden {
    display: none;
    visibility: hidden;
    height: 0;
}
.disabled {
    color: var(--disabled);
    font-style: italic;
}
.inset {
    margin-left: 12px;
}
.text-red {
    font-weight: 600;
    color: var(--danger);
}
.highlighter {
    background-color: rgba(0, 255, 255, 0.5);
    padding: 2px 2px 0 2px;
}
.img-responsive {
    width: 100%;
    height: auto;
}
.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
.row-flex { 
  /* the bs.4 base row class */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.row-dark, .row-gray, .row-light {
    margin-left: 0;
    margin-right: 0;
    padding: 20px 12px;
    clear: both;
    overflow: hidden;
}
.row-dark {
    background-color: var(--shaded);
}
.row-dark .table td {
    border-color: #ccc;
}
.row-gray {
    background-color: var(--gray);
}
.row-gray .table td {
    border-color: #ddd;
}
.row-light {
    background-color: #fff;
}
.intro {
    font-size: 20px;
    font-weight: 600;
    padding-top: 20px;
}
h2 + .intro {
    padding-top: 10px;
}
.condensed {
    line-height: 1.1em;
}
.pad-top {
    padding-top: 1em;
}
.margin-top {
    margin-top: 1em;
}
.pad-bottom {
    padding-bottom: 1em;
}
.margin-bottom {
    margin-bottom: 1em;
}

/*****************
    used on terms and conditions page
***********************/
#page-terms .form-group {
    overflow: visible;
}
#page-terms .terms {
    border: 3px solid var(--gray);
    border-top-left-radius: 20px;
    padding: 20px;
    height: 300px;
    width: 92%;
    overflow: scroll;
}
#page-terms .agree-terms {
    padding: 16px;
    margin-left:20px;
    width: 90%;
}
    #page-terms .agree-terms label {
        display: inline;
    }

/*****************
    used on all registration pages
***********************/
.regTitle {
    /*margin-top: 80px;*/
}
label {
    font-weight: 700;
    display: inline;
}
.radio-list {
    margin-left: 12px;
}
.radio-list input[type="radio"] {
    width: 12px;
    height: 12px;
    margin: 4px;
}
.radio-list td > label {
    display: inline;
    font-weight: normal;
}
.input-group-append {
    margin-left: -6px;
}
input::placeholder {
    /*color: var(--shaded);
    font-size: .8em;
    text-transform: capitalize;*/
}
.help-block {
    /* hide help text for xs */
    display: none;
    font-size: .7em;
    font-style: italic;
    text-align: right;
}
.save-exit-area {
    text-align: right;
    margin: 60px 0 40px 0;
}
.alert-info, .alert-warning {
    /* WT66 to make info and warning the same
    background-color: @alert-info-bg;
    border-color: @alert-info-border;
    color: @alert-info-text;  */
}
span.required-demo,
.required label:after {
    color: var(--danger);
    content: '\2A'; /* asterisk (*) */
    padding-left: 2px;
    display: inline;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1em;
}
.warning {
    /* for system error messages that get classes switched to warning on reg pages */
    color: var(--danger);
    font-size: 1.3em;
}
.subsection {
    /* NOTE: if you switch the background color, be sure there is sufficient contrast 
       to the link color or else the edit links on the confirmation page will not show well */
    display: block;
    color: var(--primary);
    border-radius: var(--radius-base);
    text-transform: capitalize;
    margin-top: 20px;
    margin-bottom: 12px;
    background-color: var(--shaded);
    padding: 8px 12px;
    font-size: 1.25em;
}
.radio-list label {
    font-weight: normal;
}
input {
    margin-right: 5px;
}
    input::placeholder {
        font-size: 0.8em;
        opacity: 0.5;
        color: var(--text);
    }
.section-toggle {
    cursor: pointer;
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
button.close {
    box-shadow: none;
}
/*** removing the datepicker from DOB field ***/
.disableDatePicker::-webkit-calendar-picker-indicator {
    display: none;
}
/*****************
     modals 
 ***********************/
.modal-header h1 {
    text-align: left;
    color: var(--text);
    font-size: 2em;
}
.modal-body {
    max-height: 500px;
}
    .modal-body .jumbotron-fluid/*, .modal-body img*/ {
        display: none !important;
    }
    .modal-body div {
        /*width: 100% !important;
        margin: 10px 0;
        padding: 0 10px;*/
    }
/* used on confirm page */ 
    #modalAbandon a.btn-block, 
    #modalAbandon input.btn-block {
        width: 96%;
        white-space: normal;
        text-transform: none;
        letter-spacing: 0;
        font-size: 16px;
        font-weight: normal;
    }
    #modalAbandon a.btn-block, 
    #modalAbandon input.btn-block {
        margin-top: 4px;
    }
/*****************
    used on fees.aspx
***********************/
.fees-table table thead tr th, table tfoot tr td {
    width: 20%;
}
    .fees-table table thead tr th:first-child, .fees-table table tfoot tr td:first-child {
        width: 80%;
    }
    .fees-table .event-table {
        margin-bottom: 0;
    }
/*****************
    used on profile.aspx
***********************/
.badge-preview {
    background-image: url(../../images/speakers/preview.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 300px;
    min-height: 400px;
    padding-top: 330px;
    text-align: center;
}
/*****************
    used on event confirm.aspx
***********************/
.field-display {
    display: block;
    margin-bottom: 6px;
}
.spacer {
    display: block;
    height: 40px;
    width: 100%;
}
#submitDisplay {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: var(--light);
    text-align: center;
    padding: 6px 0;
    z-index: 2000;
    box-shadow: 0 -5px 10px 0 rgba(0,0,0,.2);
}
    #submitDisplay .btn {
        display: inline-block;
        position: relative;
        margin: 0 12px;
    }

/*****************
    used on event summary page (reportviewer.aspx)
***********************/
#report {
    max-width: 810px;
}

/*****************
    used on photoupload.aspx
***********************/
.image-container {
    margin: 10px 0;
}
.pax-image .caption {
    padding: 5px 0;
    width: 95%;
}
    .pax-image .header {
        font-size: 16px;
        border-bottom: 1px solid var(--light);
    }
    .pax-image img {
        width: 95%;
        height: auto;
    }
    .pax-image caption {
        display: block;
        padding: 5px 0;
    }
.bootstrap-datetimepicker-widget.dropdown-menu {
    display: block;
    margin: 2px 0;
    padding: 4px;
    /*width: 14rem;*/
    min-width: 320px;
    z-index: 999;
}
/* ----------------------------------*/
/* Scroll Top Arrow */
/* ----------------------------------*/
.scroll-button {
    width: 56px;
    height: 56px;
    line-height: 56px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-align: center;
    padding-left: 12px;
    font-size: 20px;
    background: var(--info);
    border-radius: var(--radius-base);
    z-index: 99;
    display: none;
    transition: none;
    -o-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    box-shadow: 0px 3px 10px -3px var(--shadow);
    scroll-behavior: smooth;
}
footer.main-footer a.scroll-button {
    color: var(--light) !important;
}
.scroll-button:focus, .scroll-button:hover {
    outline: none;
    box-shadow: 0px 10px 15px -3px var(--shadow);
    transform: translateY(-2px);
    background: var(--navactive);
    text-decoration: none;
    color: var(--light);
}
.to-content {
    display: none;
}
/*****************
    used on global footer 
***********************/
footer.main-footer {
    height: auto;
    min-height: 140px;
    position: relative;
    background-color: var(--footer);
    padding: 30px 0 100px 0;
    margin: 0 auto;
    overflow: hidden;
    z-index: 200;
}
    footer.main-footer h2 {
        color: var(--footer-text);
        margin-top: 0;
        font-size: 22px;
    }
    footer.main-footer .fa-solid, 
    footer.main-footer .fa-regular, 
    footer.main-footer .fa-light, 
    footer.main-footer .fa-brand {
        font-size: 1em;
        padding-right: 12px;
    }
footer.main-footer ul {
    list-style: none;
    margin: 0 0 12px 0;
    padding-left: 0;
}
    footer.main-footer ul.contact li {
        font-size: 1em;
        font-weight: 600;
        line-height: 1.8em;
        color: var(--footer-text);
    }
    footer.main-footer h3 {
        color: var(--footer-text);
        margin-bottom: 0;
        font-size: 22px;
    }
    footer.main-footer p {
        font-size: 0.8em;
        color: var(--footer-text);
        line-height: 1.25em;
    }

footer.main-footer a {
    display: inline-block;
    color: var(--footer-text);
    text-decoration: none;
}
        footer.main-footer a:visited, 
        footer.main-footer a:hover {
            text-decoration: underline;
        }
    #footer-copyright {
        position: absolute;
        bottom: 0;
        background-color: var(--footer-2);
        width: 100%;
        text-align: center;
        padding-top: 10px;
        margin: 0;
    }
    #footer-copyright p {
        color: var(--light);
        font-size: .9em;
        line-height: 2em;
    }

/*************************** 
    Small grid (tablets)
*************************/
@media (min-width: 576px) {

/*****************
    creates banner background to page titles
***********************/
    #banner-site,
    #banner-destination,
    #banner-hotel,
    #banner-activities,
    #banner-agenda,
    #banner-attire {
        background-image: url(../../images/banner-bkg.jpg);
        background-attachment: scroll;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        max-height: 500px;
        min-height: 400px;
    }

    h1 {
        text-align: center;
        padding-top: 5%;
        font-size: 2.625em;
        line-height: 3.2em;
        color: var(--light);
        letter-spacing: 1px;
    }
        h1 small {
            display: inline-block;
            background: var(--dark50);
            margin: -5px auto 0 auto;
            padding: 12px 36px;
            border-radius: 120px 40px;
            font-family: var(--font-family-sans-serif);
            font-size: 20px;
            line-height: 1.85em;
            letter-spacing: 0;
        }
    h2 {
        font-size: 2em;
        letter-spacing: 0.5px;
        color: var(--primary);
    }
    h3 {
        font-size: 1.625em;
        color: var(--secondary);
    }
    h4 {
        font-size: 1.25em;
        font-weight: 700;
        color: var(--primary);
    }
    h5 {
        font-size: 1em;
        font-weight: 700;
        color: var(--primary);
    }
    .flex-vertical {
        display: flex;
        align-items: center;
    }
    .single-col-text {
        max-width: 780px;
        margin: 0 auto;
        padding: 0 12px;
    }
    .row-dark, .row-gray, .row-light {
        padding: 30px 0;
    }
    h3.q-collapsible {
        font-size: 1.3em;
        padding: 8px 20px 0 20px;
    }
    .modal-content {
        position: absolute;
        margin-top: 120px;
        max-height: 700px;
    }
    .modal-body {
        width: 100% !important;
    }
    #modalAbandon {
        /*used on confirm page for OBT flow*/
        overflow: visible;
    }
    #submitDisplay .btn {
        margin: 0;
    }
    #submitDisplay .btn-primary {
        margin: 0;
        float: right;
    }
    #submitDisplay .btn-outline-primary {
        margin: 0;
        float: left;
    }
    .parallax {
        /* Set a specific height */
        min-height: 500px;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .help-block {
        /*show help text for non-xs*/
        display: inline;
    }
    footer.main-footer h2 {
        margin-top: 0;
        font-size: 26px;
    }
    .to-content {
        display: inline-block;
    }
    footer.main-footer .fa-solid,
    footer.main-footer .fa-regular,
    footer.main-footer .fa-light,
    footer.main-footer .fa-brand {
        font-size: 1.2em;
        padding-right: 12px;
    }
    #footer-copyright p {
        line-height: 3em;
    }
}
/*************************** 
    Med grid 
*************************/
    @media (min-width: 768px) {
        .navigation #menu-button {
            display: none;
        }
        .row-dark, .row-gray, .row-light {
            padding: 50px 0;
        }
        .cms-login-form {
            width: 33%;
        }
    }
/*************************** 
    Large grid
*************************/
    @media (min-width: 992px) {
        .row-dark, .row-gray, .row-light {
            padding: 60px 0;
        }
    }
/*************************** 
    Extra Lg grid 
*************************/
    @media (min-width: 1200px) {
        .row-dark, .row-gray, .row-light {
            padding: 70px 0;
        }
    }
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
    }
}