/*-------------------------------------------------------------------------
= Transcripts
--------------------------------------------------------------------------*/

.vjs-ts-content-container {
    background-color: #FFF;
}

.vjs-ts-view-container {
    text-align: left;
}

.vjs-ts-view-container button,
div.vjs-transcript-widget button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    width: auto;
}

/*= View Transcript Button
--------------------------------------------------------------------------*/

#vjs-transcript-show {
    font-family: 'jaxfont2', verdana, serif;
    font-size: 1.5rem;
    margin: 20px 0 0 25px;
    padding: 0;
}

/*= Transcript Title Bar
--------------------------------------------------------------------------*/

.vjs-ts-close-container {
    border-bottom: 1px solid #c8c8c8;
    box-sizing: border-box;
    padding: 14px 25px;
}

.vjs-ts-header,
#page #jl-wrapper p.vjs-ts-header {
    color: #cc4000;
    font-size: 1.5rem;
    font-weight: bold;
}

/*= Close Button
--------------------------------------------------------------------------*/

button.vjs-ts-close-button {
    background: url(/jl/icons/x.gif) no-repeat right center transparent;
    color: #00005d;
    font-size: 1.083rem;
    padding: 0 20px 0 0;
    text-decoration: underline;
}

/*= Timeline
--------------------------------------------------------------------------*/

div.vjs-transcript-widget {
    background-color: #FFF;
    box-sizing: border-box;
    font-size: medium;
    margin-top: 40px;
}

div.vjs-transcript-widget .vjs-ts-content-container button {
    align-items: initial !important;
    box-sizing: border-box;
    font-size: 1.083rem;
    line-height: 1.5rem;
    margin-bottom: 20px;
    padding: 0 25px 0 75px;
    position: relative;
    width: 100%;
}

div.vjs-transcript-widget .vjs-ts-content-container button:first-child {
    margin-top: 20px;
}

div.vjs-transcript-widget .vjs-ts-content-container button span {
    color: #686868;
    left: 25px;
    position: absolute;
    top: 0;
}

/*-------------------------------------------------------------------------
= Mobile
--------------------------------------------------------------------------*/

@media only screen and (max-device-width: 767px) {

    /*= View Transcript Button
    --------------------------------------------------------------------------*/

    #vjs-transcript-show {
        font-size: 1.167rem;
    }

    #jl-newcard #vjs-transcript-show {
        color: #174071;
        font-weight: bold;
        margin-left: 20px;
        text-decoration: underline;
    }

    /*= Transcript Title Bar
    --------------------------------------------------------------------------*/

    #agi-brightcove {
        height: auto !important;
    }

    .vjs-ts-close-container {
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 15px 10px;
    }

    #page #jl-wrapper p.vjs-ts-header,
    body#jl-preview .mobile p.vjs-ts-header {
        float: left;
        font-size: 1.167rem;
        margin: 0;
        padding: 0;
    }

    /*= Close Button
    --------------------------------------------------------------------------*/

    div.vjs-transcript-widget button.vjs-ts-close-button {
        align-self: auto;
        float: right;
        font-size: 1rem;
    }

    /*= Timeline
    --------------------------------------------------------------------------*/

    div.vjs-transcript-widget {
        margin-left: 3%;
        margin-right: 3%;
        max-height: 355px;
        width: 94%;
    }

    div.vjs-transcript-widget .vjs-ts-content-container button {
        padding: 0 10px 0 50px;
    }

    div.vjs-transcript-widget .vjs-ts-content-container button span {
        left: 10px;
    }
}