﻿/*========== CTA Containers Stylesheet 
            Produced by JL Systems, Inc.    
==========*/

.container-wrapper {
    width: 100%;
}

.container-title {
    display: block;
}

.container-gray-header {
    background-color: #595959;
    font-weight: 500;
    color: var(--color-white-10);
    text-align: center;
}

.container-box-shadow {
    -moz-box-shadow: var(--base-2px) var(--base-2px) var(--base-5px) rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: var(--base-2px) var(--base-2px) var(--base-5px) rgba(0, 0, 0, 0.15);
    box-shadow: var(--base-2px) var(--base-2px) var(--base-5px) rgba(0, 0, 0, 0.15);
}

.container-inner-padding {
    padding: 5px 10px;
}

input.containerTitle.LabelEditTextClass {
    color: var(--color-black-10) !important;
}

/*========== Light-Blue-Bkgrd ==========*/
.blueBlockBase {
}

.blueBlock {
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    background-size: cover;
    position: relative;
    display: inline-block;
    padding: 3em;
    float: left;
}

    .blueBlock p,
    .blueBlock i,
    .blueBlock a,
    .blueBlock h1,
    .blueBlock h2,
    .blueBlock h3,
    .blueBlock h4,
    .blueBlock h5,
    .blueBlock h6 {
        color: var(--color-white-10) !important;
    }
/*========== End Light-Blue-Bkgrd ==========*/
/*========== Blue Heading w/Yellow border ==========*/
.blueHeading {
    text-align: center;
}

    .blueHeading h1 {
        color: var(--primary-color);
        font-weight: var(--base-primary-font-weight);
    }

    .blueHeading .yellowLine {
        border: 0;
        border-top: var(--base-4px) solid var(--third-color);
        width: 125px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1em;
    }
/*========== End Blue Heading w/Yellow border ==========*/
/*========== Black Heading w/Yellow border ==========*/
.blackHeading {
    text-align: center;
}

    .blackHeading h1 {
        color: var(--fourth-color);
        font-weight: var(--base-primary-font-weight);
    }

    .blackHeading .yellowLine {
        border: 0;
        border-top: 4px solid #FFB612;
        width: 125px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1em;
    }
/*========== End Black Heading w/Yellow border ==========*/
/*========== Black Heading w/Yellow border and background-color ==========*/
.blackHeadingBkgrd {
    text-align: center;
    background-color: #f8f8f8;
}

    .blackHeadingBkgrd .yellowLine {
        border: 0;
        border-top: 4px solid #FFB612;
        width: 125px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1em;
    }

/*========== End Black Heading w/Yellow border and background-color ==========*/
/*========== Blue box - heading only with button ==========*/
.smallcontainerBlue {
    background-color: var(--primary-color);
    width: 100%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    z-index: 105;
}

.contBlueM {
    margin-top: 2em;
}

.containerTitle {
    color: var(--color-white-10) !important;
    font-size: 1.8125em;
    font-family: var(--base-roboto-font-family);
    text-align: center;
    top: .5em;
    position: relative;
    display: block;
    font-weight: var(--base-primary-font-weight);
    line-height: 1.2em;
}

.containerBtnL {
    position: relative;
    top: 1.5em;
    text-align: left;
}

    .containerBtnL p, .containerBtnR p {
        margin: 0;
    }

.containerBtnR {
    position: relative;
    top: 1.5em;
    text-align: right;
    float: right;
}

    .containerBtnL a,
    .containerBtnR a {
        text-decoration: none !important;
    }
/*========== End Blue box - heading only with button ==========*/
.smallcontainerBlueLeft {
    background-color: var(--primary-color);
    width: 100%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    z-index: 105;
}
    .smallcontainerBlueLeft::before {
        content: '';
        display: block;
        width: calc(100% + 15px);
        height: calc(100% + 15px);
        position: absolute;
        top: -7px;
        left: -7px;
        border-top: 3px solid var(--color-white-10);
        border-right: 3px solid var(--color-white-10);
        border-left: 3px solid var(--color-white-10);
    }

.smallContBlueLeft {
    background-color: var(--primary-color);
    width: 100%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    z-index: 105;
    border: none;
    margin: 1em 0;
}

/*========== White Text w/Yellow separator and blue background-color ==========*/
.whiteHeadingBkgrd {
    text-align: center;
    background-color: var(--primary-color);
    margin-top: .5em;
    margin-bottom: 1em;
}

    .whiteHeadingBkgrd .yellowLine {
        border: 0;
        border-top: 4px solid #FFB612;
        width: 125px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1em;
    }

    .whiteHeadingBkgrd .whiteHeadingTitle {
        color: var(--color-white-10) !important;
    }

    .whiteHeadingBkgrd .whiteHeadingText,
    .whiteHeadingBkgrd .whiteHeadingText p,
    .whiteHeadingBkgrd .whiteHeadingText i,
    .whiteHeadingBkgrd .whiteHeadingText a,
    .whiteHeadingBkgrd .whiteHeadingText h1,
    .whiteHeadingBkgrd .whiteHeadingText h2,
    .whiteHeadingBkgrd .whiteHeadingText h3,
    .whiteHeadingBkgrd .whiteHeadingText h4,
    .whiteHeadingBkgrd .whiteHeadingText h5,
    .whiteHeadingBkgrd .whiteHeadingText h6 {
        color: var(--color-white-10) !important;
        padding: .25em;
        padding-top: 0;
    }

/*========== End White Text w/Yellow separator and blue background-color ==========*/