/* - Variable Branding- */
:root {
    --main-color: #FD5D00;
    --secondary-color: #153969;
    }
    
    /* Custom */
    .header-branding h1 a {
        height: 99px;
    }
    
    /* - #user-nav - */
    a {color: var(--main-color);}
        #user-nav {
        padding-top: 25px;
    }
    #page-links {
        display: inline-block;
    }
    #page-links a {
        display: inline-block;
        padding: 5px 10px 5px 0;
        font-size: 14px;
    }
    button#accountDropdown {
        padding: 5px 10px 5px 0;
    }
    /* - button/icon text - */
    .spinner, .btn-link, .btn-link:hover, .nav>li>a:hover, #page-links a:hover, .nav-tabs>li.active>a .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus, .product-tile .product-footer, .Analytics__Stats .Analytics__Statistic.active a, a.ember-view.admin-product-table__product-link:hover {
        /* color: var(--main-color); */
        color: #153969
    }
    /* - button/icon background - */
    .btn-info, .Icon__CircleWrap--info, .product-flag.product-flag-free, .ProductIcon__LargeCircle--course, .ProductIcon__SmallCircle--course {
        background: var(--main-color);
    }
    /* - button :hover - */
    .btn-info:hover, .btn-info:focus, .ProductIcon__LargeCircle--course:focus {
        background: var(--main-color);
        filter: brightness(85%);
    }
    .product-results .product-tile:hover {
        box-shadow: inset 0px -5px 0px var(--main-color);
    }
    /* - feature-search - */
    .feature-region {
        background-image: linear-gradient(#FE7D00,#FD5D00);
        height: fit-content;
    }
    
    #search-form .search-form-container {
        background-color: var(--secondary-color);
    }
    
    .product-account-image-wrapper {
        display: none;
    }
    
    /* Start Join Code CSS */
    
    /* End Join Code CSS */
    
    .AccountDropdown--margin-top {
        margin-top: 0px;
    }
    
    .header-branding {
        height: 70px;
    }
    
    .logo-customized > a > img{
        max-width: 200px;
        height: auto !important;
        padding-bottom: 10px;
    }
    
    .image-container .image-wrapper {
        background-size: contain;
        /* height: 0; */
        padding-top: 57.5%;
    }
    
    .product-tile .image-wrapper {
        max-height: fit-content;
    }
    
    .product-dates{
        float: right;
        padding-top: 10px;
        padding-right: 10px;
        overflow: visible !important;
    }
    
    #search-form.callout-region {
        margin-bottom: -8px;
    }
    
    #home-page{
        background-color: #f0f0f0;
    }
    
    .fft-text{
        font-size: 8pt;
    }
    
    .apple-copyright{
        font-size: 8pt;
    }
    
    #text-copy{
        text-align: left;
    }
    
    .logo-customized {
        padding-left:20px;
    }
    
    .callout-region {
        display:none;
    }
    
    /* Course Details Self-Paced */
    #feature > div > div > div:nth-child(2) > p:nth-child(2) > strong {
        display:none;
    }
    /* Registration Self-Paced */
    #registration > form > div.text-center.RegistrationHeader__DateInfo {
        display:none;
    }
    
    #registration > form > span.RegistrationFooter__SubmitButton > div > button{
        background-color: var(--main-color);
    }
    
    .product-tile .product-description {
        overflow: visible;
        height: fit-content;
    }
    
    .product-tile .product-heading{
        overflow: visible;
        min-height: 20px;
    }
    
    .registration-product-image {
        width: 100%;
    }
    
    #registration > form > div.text-center.RegistrationHeader__AuthenticationStatus > a {
        color: var(--main-color)
    }
    
    #registration > form > div.text-center.RegistrationHeader__AuthenticationStatus > button{
        color: var(--main-color)
    }
    
    #accountDropdown {
        color: var(--main-color)
    }
    
    #registration > form > div:nth-child(1) > div.image-container.registration-product-image.RegistrationHeader__ProductImage > img {
        margin: 0em;
        margin-bottom: .5em;
    }
    
    .coming-soon{
        margin-top: 5px;
        color: #666666;
        font-style: oblique
    }