.optStep1 .optBody {
    height: calc(100% - 115px);
    overflow: visible;
}

.optStepCompare .optBody {
    height: calc(100% - 95px);
}

.optFooter {
    display: none;
}

@media only screen and (max-width: 767px) and (min-width: 375px) {
    .optPackages {
        font-size: 16px;
    }

    .optViewBundle {
        font-size: 1em;
    }

    .optClose {
        font-size: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .optHeader {
        padding: 20px;
    }

    .show-desk {
        display: none !important;
    }

    .optClose {
        top: 10px;
    }

    .optChannelLogos {
        display: none;
    }
}

.optChannelList::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.optChannelList::-webkit-scrollbar-track {
    background: #f7f7f7;
}

.optChannelList::-webkit-scrollbar-thumb {
    background: #0066e3;
    border-radius: 10px;
}

    .optChannelList::-webkit-scrollbar-thumb:hover {
        background: #0060d5;
    }

.optCompareTable::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.optCompareTable::-webkit-scrollbar-track {
    background: #f7f7f7;
}

.optCompareTable::-webkit-scrollbar-thumb {
    background: #0066e3;
    border-radius: 10px;
}

    .optCompareTable::-webkit-scrollbar-thumb:hover {
        background: #0060d5;
    }

.channel-lineup .module-page-intro,
.module-table-toolbar,
.module-table {
    display: none !important;
}

.optWrap {
    height: 680px;
}

.optHeader {
    background-color: #0066e3;
    color: white;
    padding: 10px 20px;
}

.optViewBundle {
    background-color: #ffc40c;
    color: #1d1d1d;
    padding: 12px 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: .9em;
    border-radius: 3px;
    font-family: ars-maquette-web, sans-serif;
}

.optHeader .optViewBundle {
    display: inline-block;
    position: absolute;
    right: 65px;
}

.optTableBody .optViewBundle {
    display: inline-block;
    margin: 5px 0;
}

.optPackages {
    background-color: transparent;
    border: 1px solid white;
    border-radius: 5px;
    color: white;
    padding: 10px;
    cursor: pointer;
    width: 200px;
    display: inline-block;
    position: relative;
}

    .optPackages:after {
        font-family: FontAwesome;
        font-weight: 900;
        content: "\f107";
        position: absolute;
        right: 10px;
        top: 12px;
    }

    .optPackages.open:after {
        content: "\f106";
    }

    .optPackages ul {
        display: none;
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: #0066e3;
        list-style: none;
        padding: 0;
    }

    .optPackages.open ul {
        display: block;
    }

        .optPackages.open ul li {
            cursor: pointer;
            margin: 5px 10px;
        }

            .optPackages.open ul li:hover {
                background-color: #0054bb;
            }

.optBody {
    background-color: white;
    padding: 10px 20px;
    height: calc(100% - 142px);
    overflow: hidden;
}

.optChannelLogos {
    background-color: #f7f7f7;
    margin-bottom: 5px;
    overflow: auto;
    white-space: nowrap;
}

    .optChannelLogos img {
        max-height: 60px;
        max-width: 100px;
        display: inline-block;
        margin: 12px;
        vertical-align: middle;
    }

.optSearchPanel {
    background-color: #f7f7f7;
    padding: 0px 20px;
    margin-bottom: 1px;
}

    .optSearchPanel .optTitle,
    .optTableHeader .optTitle {
        display: inline-block;
        font-weight: bold;
        font-size: 14px;
        width: 49%;
    }

.optChannelLogosTitle {
    background-color: #f7f7f7;
    padding: 0px 20px;
    margin-bottom: 1px;
    font-weight: bold;
    font-size: 14px;
    text-align: left;
    text-transform: uppercase;
}

.optSearchForm {
    position: relative;
}

.optSearchPanel .optSearchForm {
    display: inline-block;
    width: 50%;
    text-align: right;
}

    .optSearchPanel .optSearchForm input {
        padding: 5px;
        margin: 5px 0;
    }

.optSearchForm:after {
    content: "\f002";
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 14px;
    position: absolute;
    right: 9px;
    color: #0066e3;
    top: 13px;
    display: inline;
}

.optChannelList {
    display: flex;
    display: flex;
    flex-wrap: wrap;
    background-color: #f7f7f7;
    padding: 5px 20px;
    height: calc(100% - 165px);
    overflow: auto;
    color: #58595B;
}

.optChannelItem {
    width: 33%;
    line-height: 24px;
}

.optChannelsDiscplaimer {
    width: 100%;
    font-size: 11px;
    line-height: 12px;
    margin-top: 5px;
}

.optTableDisclaimer {
    width: 100%;
    font-size: 11px;
    line-height: 12px;
    background-color: #f2f2f2;
    padding: 10px;
    box-sizing: border-box;
}

.optFooter {
    background-color: #0066e3;
    color: white;
    padding: 10px 20px;
    height: 41px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.optCompare {
    margin: auto;
    color: white;
    width: auto;
    height: 41px;
    line-height: 41px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

    .optCompare:before {
        font-family: FontAwesome;
        font-weight: 900;
        content: "\f0c8";
        position: absolute;
        left: -20px;
        top: 1px;
    }

.optCheckCompare {
    display: inline-block !important;
    display: none !important;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: -18px;
    margin-top: -5px;
}

.optStepCompare {
    display: none;
}

.optBack {
    color: white;
    position: absolute;
    left: 20px;
    line-height: 40px;
    cursor: pointer;
    font-size: 18px;
}

.optStepCompare .optTitle {
    text-align: center;
    display: inline-block;
    width: 100%;
    font-size: 23px;
    line-height: 40px;
}

.optCompareTable {
    overflow: auto;
    height: 88%;
}

.optTableBody {
    display: table;
    width: 100%;
    /*border-collapse: collapse;*/
    background-color: #f2f2f2;
}

.optTableHeader {
    background-color: white;
    height: 50px;
}

    .optTableHeader .optTableCell {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
        background: white;
        border-bottom: 1px solid black;
    }

.optBottomRow {
    background-color: white;
    height: 50px;
}

    .optBottomRow .optTableCell {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1;
        background: white;
    }

.optTableRow {
    display: table-row;
    width: 100%;
}

.optTableCell {
    display: table-cell;
    width: 33%;
    border: 1px solid #b9b9b9;
    height: 40px;
    text-align: center;
    vertical-align: middle;
}

.optTableBody .optTableRow:first-child .optTableCell {
    border-top: 0;
}

.optTableBody .optTableRow .optTableCell:first-child {
    border-left: 0;
}

.optTableBody .optTableRow:last-child .optTableCell {
    border-bottom: 0;
}

.optTableBody .optTableRow .optTableCell:last-child {
    border-right: 0;
}

.optTableCell i {
    color: #0066e3;
    font-size: 15px;
}

.optStepCompare .optBody {
    overflow: initial;
}

.optCompareSearch {
    width: 100%;
    box-sizing: border-box !important;
}

.optStepCompare .optSearchForm {
    margin-bottom: 10px;
}

    .optStepCompare .optSearchForm:after {
        font-size: 20px;
        right: 13px;
        top: 13px;
    }

.optChannelsTitle {
    font-weight: bold;
}

.optStepCompare .optPackages {
    color: #0066e3;
    font-weight: 600;
    border-color: #f2f2f2;
    box-shadow: 1px 1px 8px #888888;
}

.optStepCompare .optSelectedPackage {
    color: #0066e3;
    font-weight: 600;
}

.optStepCompare .optPackages ul {
    background: white;
    color: #0066e3;
}

.optStepCompare .optPackages.open ul li:hover {
    background-color: #eaeaea;
}

.optStepCompare .optPackages:after {
    top: 11px;
    font-size: 20px;
}

.optClose {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
    color: white;
    padding: 5px;
    font-size: 25px;
}

@media only screen and (max-width: 767px) {
    .optPackages {
        width: auto;
        padding: 5px;
        padding-right: 25px;
        font-size: 13px;
    }

        .optPackages:after {
            right: 7px;
            top: 7px;
        }

    .optHeader .optViewBundle {
        right: 35px;
        padding: 5px 15px;
    }

    .optSearchPanel {
        display: flex;
        flex-direction: column-reverse;
        background-color: white;
        padding: 0;
    }

        .optSearchPanel .optSearchForm {
            width: 100%;
        }

            .optSearchPanel .optSearchForm input {
                width: 100%;
                box-sizing: border-box;
            }

        .optSearchPanel .optTitle {
            background-color: #f7f7f7;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }

    .optChannelList {
        padding: 5px 10px;
        height: calc(100% - 175px);
    }

    .optChannelItem {
        width: 100%;
    }

    .optTableCell {
        font-size: 14px;
    }

    .optStepCompare .optPackages {
        width: 100%;
        box-sizing: border-box;
    }

    .optTableCell {
        height: 30px;
    }

    .optStepCompare .optPackages:after {
        top: 5px;
        right: 3px;
    }

    .optTableHeader {
        height: 30px;
    }

    .optStepCompare .optTitle {
        font-size: 17px;
    }

    .optClose {
        right: 5px;
        top: 5px;
    }
}

@media only screen and (min-width: 768px) {
    #optChannelsModal .optChannelsModalInner {
        min-width: 768px;
    }
}

#optChannelsModal .optChannelsModalInner {
    width: 70%;
    height: 680px;
    height: 70%;
    padding: 0;
    max-width: 1000px;
}

#optChannelsModal iframe {
    height: 100%;
    width: 100%;
    border: none;
}

@media only screen and (max-width: 767px) {
    #optChannelsModal .optChannelsModalInner {
        width: 100%;
        height: 100%;
    }
}

.channel-lineup table {
    width: 96% !important;
    padding-left: 2px;
    padding-right: 2px;
}

.module-table-toolbar .toolbar-half {
    margin-right: -6px;
}

.table-disclamer {
    padding-left: 6px;
    padding-right: 2px;
}

.page-hero {
    min-height: 0px !important;
}

@media only screen and (max-width : 740px) and (orientation : landscape) {
    .channel-lineup table {
        width: 96% !important;
    }

    .module-table-toolbar .toolbar-half {
        width: 98% !important;
    }

    .table-disclamer {
        padding-left: 14px !important;
    }

    .page-hero {
        min-height: 0px !important;
    }
}

/*****Nexus 7******/
@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
    .channel-lineup table {
        width: 96% !important;
        padding-left: 2px;
        padding-right: 2px;
    }

    .module-table-toolbar .toolbar-half {
        margin-right: -6px;
    }

    .table-disclamer {
        padding-left: 6px;
        padding-right: 2px;
    }

    .page-hero {
        min-height: 0px !important;
    }
}

/***** Galaxy tab s4 ******/
@media only screen and (min-width : 710px) and (max-width : 713px) and (orientation: portrait) {
    .channel-lineup table {
        width: 96% !important;
        padding-left: 2px;
        padding-right: 2px;
    }

    .module-table-toolbar .toolbar-half {
        margin-right: -6px;
    }

    .table-disclamer {
        padding-left: 6px;
        padding-right: 2px;
    }

    .page-hero {
        min-height: 0px !important;
    }
}

.page-hero .hero-content h2, .page-hero .hero-content h4 {
    color: #f26529;
}

@media only screen and (min-width: 48em) {
    .page-hero .hero-content {
        margin-top: -75px;
    }

    .page-hero {
        min-height: 0px !important;
    }
}

.page-hero .hero-content h2 {
    margin-top: 37px !important;
}

.optViewBundle span {
    display: inline !important;
}

.checkbox span {
    display: inline !important;
}

.modal-body span {
    display: block !important;
}

@media only screen and (max-width: 400px) {
    .channel-lineup table {
        width: 96% !important;
    }
}

#optChannelsModalDiv {
    height: 100%;
    width: 100%;
    border: none;
    background-color: white;
}

.optChannelLogos {
    margin-bottom: 0;
    text-align: center;
    white-space: normal;
}

    .optChannelLogos img {
        margin: 0.6%;
        max-width: none;
        width: 6.5% !important;
    }

.optBody,
.optChannelList {
    height: calc(100% - 110px);
}

.optMediumLogos {
    display: block;
}

.optHeader .optViewBundle {
    margin-left: 10px;
    position: static;
}

input[type=search], input[type=number], input[type=tel], textarea {
    color: #333;
    border: 1px solid #a1a1a1;
    border-radius: 3px;
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

input {
    line-height: normal;
}

#optChannelsiFrame {
    height: 100%;
    width: 100%;
    border: none;
}

@media only screen and (max-width: 767px) and (min-width: 375px) {
    .optPackages {
        font-size: 16px;
    }

    .optClose {
        font-size: 30px;
    }

    .optViewBundle {
        font-size: 1em;
    }
}

@media only screen and (max-width: 767px) {
    .optPackages {
        width: auto;
        padding: 5px;
        padding-right: 25px;
        font-size: 13px;
    }

    .optHeader {
        padding: 20px;
    }

        .optHeader .optViewBundle {
            right: 35px;
            padding: 5px 15px;
        }

    .optChannelLogos {
        display: none;
    }

    .optSearchPanel {
        display: flex;
        flex-direction: column-reverse;
        background-color: white;
        padding: 0;
    }

    .optChannelList {
        padding: 5px 10px;
        height: calc(100% - 175px);
    }

    .optChannelItem {
        width: 100%;
    }

    .optClose {
        top: 10px;
    }

    .optTableCell {
        font-size: 14px;
    }

    .optTableCell {
        height: 30px;
    }
    /* Start 11/18 deployment fix for UAT environment - rlittle 11/15/2019 */
    .c-offer-title-span {
        max-width: 330px;
        white-space: normal;
        text-align: center;
        margin: 0 auto;
    }
    /* End 11/18 deployment fix */
}

.module-table {
    max-width: 940px;
    width: 100%;
    margin: 0 auto 100px;
}

.channel-lineup table thead {
    background: #f4f4f4;
    border-top: 1px solid #ddd;
    box-shadow: 0 0 4px #ddd;
}

table thead {
    line-height: 20px;
}

input[type=search] {
    padding: 12px 8px;
    margin-bottom: 5px;
}

input[type=search], textarea {
    color: #333;
    border: 1px solid #a1a1a1;
    border-radius: 3px;
}

.optChannelsModalInner {
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 -1px 20px rgba(0,0,0,.16), 0 1px 0 rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    padding: 20px;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 375px;
    z-index: 4;
}

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}


/*media query for IPhone*/
@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio: 2) and (orientation : portrait) {
    .modal-overlay.active {
        top: 60px !important;
    }

    .optHeader .optViewBundle {
        font-size: 13px !important;
    }
}


@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio: 2) and (orientation : landscape) {
    .modal-overlay.active {
        top: 40px !important;
    }

    .optHeader .optViewBundle {
        font-size: 13px !important;
    }
}

/* CSS for other than iOS devices */
@media only screen and (min-device-width: 360px) and (orientation : portrait) {
    @supports not (-webkit-overflow-scrolling: touch) {
        .modal-overlay.active {
            top: 58px !important;
        }

        .optHeader .optViewBundle {
            font-size: 13px !important;
        }
    }
}