/*=== PG 2.0 Master CSS ===*/
@charset "UTF-8";
/* Web fonts */
@font-face { font-family: "DIRECTVCurve Light"; font-weight: normal; font-style: normal; src: url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Light.eot"); src: url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Light.eot?#iefix") format("embedded-opentype"), url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Light.woff") format("woff") }
@font-face { font-family: "DIRECTVCurve Regular"; font-weight: normal; font-style: normal; src: url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Regular.eot"); src: url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Regular.eot?#iefix") format("embedded-opentype"), url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Regular.woff") format("woff") }
@font-face { font-family: "DIRECTVCurve Medium"; font-weight: normal; font-style: normal; src: url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Medium.eot"); src: url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Medium.eot?#iefix") format("embedded-opentype"), url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Medium.woff") format("woff") }
@font-face { font-family: "DIRECTVCurve Bold"; font-weight: normal; font-style: normal; src: url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Bold.eot"); src: url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Bold.eot?#iefix") format("embedded-opentype"), url("/guia/PG-2.0/PG-2.0-fonts/DIRECTVCurve-Bold.woff") format("woff") }
@font-face { font-family: 'Helvetica Neue Light'; font-style: normal; font-weight: normal; src: url("/guia/PG-2.0/PG-2.0-fonts/HelveticaNeueLight.woff") format("woff"); }
@font-face { font-family: 'Helvetica Neue Regular'; font-style: normal; font-weight: normal; src: url("/guia/PG-2.0/PG-2.0-fonts/HelveticaNeueRegular.woff") format("woff"); }
@font-face { font-family: 'Helvetica Neue Medium'; font-style: normal; font-weight: normal; src: url("/guia/PG-2.0/PG-2.0-fonts/HelveticaNeueMedium.woff") format("woff"); }
@font-face { font-family: 'Helvetica Neue Bold'; font-style: normal; font-weight: normal; src: url("/guia/PG-2.0/PG-2.0-fonts/HelveticaNeueBold.woff") format("woff"); }

/* Styling default body scrollbar */
* {
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Never add `scroll-behavior: smooth;` property as it is having some improper/lag scrolling behavior when controlled with JS */
}
*::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}
/* Re-usable styles starts here. */
.marginNone {
    margin: 0px;
}
.noScroll {
    overflow: hidden !important;
}
.floatNone {
    float: none !important;
}
.hideThis {
    display: none !important;
}
.grayLayover {
    display: block;
    position: fixed;
    top: 0;
    left :0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
    width: 100%;
    height: 100%;
}
.grayLayover .pgSpinner {
    position: absolute;
    top: calc((100vh - 2rem)/2); /* `2rem` is the height of `pgSpinner` div */
    left: calc((100vw - 2rem)/2); /* `2rem` is the width of `pgSpinner` div */
}
.markerElementForStickToTop {
    height: 0px;
}
@media only screen and (max-width: 575px) {
    .notInMobile {
        display: none;
    }
}
@media only screen and (min-width: 576px) {
    .inMobile {
        display: none;
    }
}
/* Re-usable styles ends here. */
html {
    height: 100%;
    background: #010101 0% 0% no-repeat padding-box;
}
body {
  /* Never get smaller than this */
  font-size: 16px; /* Do not change this font-size as it is effects the grid columns calculated dynamic height. */
}
@media only screen and (min-width: 576px) {
    body {
        font-size: 17px; /* Do not change this font-size as it is effects the grid columns calculated dynamic height. */
    }
}
@media only screen and (min-width: 1000px) {
    body {
        font-size: 18px; /* Do not change this font-size as it is effects the grid columns calculated dynamic height. */
    }
}
@media only screen and (min-width: 1400px) {
    body {
        /* Never get larger than this */
        font-size: 19px; /* Do not change this font-size as it is effects the grid columns calculated dynamic height. */
    }
}
table {
    border-spacing: 0px !important;
    border-collapse: collapse !important;
}
/*Channel details popup styles*/
div#channelDetailsPopup {
    background: transparent linear-gradient(180deg, #1A1B22 0%, #121419 100%) 0% 0% no-repeat padding-box;
    display: block;
    width: 100%;
    position: fixed;
    height: 100%;
    z-index: 502;
    overflow-x: hidden;
    overflow-y: scroll;
}
div#channelDetailsPopup span.closeDetailsScreen {
    background-image: url('/guia/PG-2.0/PG-2.0-images/close_ico.png');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 50px;
    right: 130px;
    cursor: pointer;
    height: 40px;
    width: 40px;
    z-index: 1; /* As it is within an element with z-index: 502 */
}
div#channelDetailsPopup div#channelDetailsContent {
    position: relative;
    left: 80px;
    top: 30px; 
    height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionOne {
    float: left;
    border: 1px solid #CCC;
    margin: 6px 16px 0 28px;
    width: 210px;
    height: 315px;
    text-align: center;
    position: relative; 
    background-image: url('/guia/PG-2.0/PG-2.0-images/channel-imag-bgnd.jpg');
    background-repeat: no-repeat;
    background-position: center top;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionOne img#channelImage {
    display: inline !important;
    width: 100%;
    margin: 45px 0px 0px;
}
div#channelDetailsPopup div#channelDetailsContent div.verticalSpacer {
    display: inline-block;
    width: 60px;
    position: relative;
    height: 100%;
    background-color: transparent;
    float: left;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo{
    padding-bottom: 100px;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo h2#ChannelNameHead {
    color: #EEEEEE;
    font-family: "DIRECTVCurve Medium", "Helvetica Neue Medium", Arial, Helvetica, sans-serif;
    font-weight: 500;
    margin-bottom: 0px;
    font-size: 2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo small#typeandCategory {
    display: block;
    color: #00AEEF;
    letter-spacing: 1.2px;
    font-family: "Helvetica Neue Medium", Arial, sans-serif;
    font-size: 0.6em;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-top: 10px;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel {
    height: 90px;
    line-height: 90px; 
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel {
    height: 65px;
    line-height: 60px;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span#shareContent,
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span#shareContent {
    display: inline-block;
    background-image: url('/guia/PG-2.0/PG-2.0-images/share_ico.png');
    background-size: 30%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 25px;
    border: 1px solid #3A3A40;
    border-radius: 30px;
    width: 45px;
    height: 45px;
    vertical-align: middle;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span.favouriteCheck,
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span.favouriteCheck {
    background-image: url('/guia/PG-2.0/PG-2.0-images/full_empty_ico.png');
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    height: 20px;
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align: middle;
    cursor: pointer;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span.favouriteCheck:hover,
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span.favouriteCheck.isFavorite,
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span.favouriteCheck.isFavorite {
    background-image: url('/guia/PG-2.0/PG-2.0-images/fav_full_white_icon.png');
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span.favouriteText,
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#shareAndReminderPanel span.favouriteText {
    color: #EEEEEE;
    font-family: "DIRECTVCurve Regular", "Helvetica Neue Medium", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 0.975em;
    letter-spacing: 0px;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo hr {
    border-top: 1px solid #222;
    float:left;
    width:45%;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable {
    table-layout: fixed;
    width:45%;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tr td {
    width: 30%;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable thead tr td.hora {
    width:15%;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable thead tr td.title {
    width: 55%;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable thead tr td {
    color: #EEEEEE;
    text-transform: uppercase;
    padding: 0px;
    font-family: "Helvetica Neue Regular", Arial, sans-serif;
    font-size: 0.8125em;
    letter-spacing: 0px;
    font-weight: 600;
    padding: 25px 0px 15px 0px;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td {
    color: #BBBBBB;
    padding: 0px;
    font-family: "Helvetica Neue Regular", Arial, sans-serif;
    font-size: 0.8em;
    letter-spacing: -0.5px;
    padding: 10px 0px;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td span.programTitle {
    font-family: "DIRECTVCurve Medium", "Helvetica Neue Medium", Arial, Helvetica, sans-serif;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td span.programDescription {
    font-size:0.875em;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td span.programDescriptionWithoutLeeMas {
    font-size:0.875em;
    cursor:pointer;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td span.programDescription a{
    color:#2272C9;
    cursor:pointer;
    text-decoration:underline;
}
/*div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td.grabarIcon {
    padding: 0px;
}*/
/*div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td.grabarIcon span {
    background-image: url('/guia/PG-2.0/PG-2.0-images/grabar_button_ico.png');
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    height: 30px;
    width: 30px;
}*/
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable thead tr td.grabarWidth {
    width:30%;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable thead tr td.comprarWidth {
    width:120px;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td.grabarIcon span.borderClass {
    display: block;
    border: 1px solid #2272C9;
    border-radius: 6px;
    opacity: 1;
    padding: 5px 8px;
    cursor: pointer;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td.grabarIcon span.borderClass span#dollarAndGSign {
    display: inline-block;
    font-family: "DIRECTVCurve Regular", "Helvetica Neue Regular", Arial, Helvetica, sans-serif;
    font-size: 0.65em;
    letter-spacing: 1.5px;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 30px;
    padding: 3px;
    width: 25px;
    text-align: center;
    margin-right: 10px;
}
div#channelDetailsPopup div#channelDetailsContent div.sectionTwo div#channelScheduleSectionInDesktop table#contentTable tbody tr td.grabarIcon span.borderClass span#buttonText {
    display: inline-block;
    font-family: "Helvetica Neue Medium", Arial, sans-serif;
    font-size: 0.8125em;
    font-weight: normal;
    letter-spacing: 0.8px;
    color: #FFFFFF;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
}
div#channelDetailsPopupInNonDesktop {
    background: transparent linear-gradient(180deg, #1A1B22 0%, #121419 100%) 0% 0% no-repeat padding-box;
    display: block;
    width: 100%;
    position: fixed;
    height: 100%;
    z-index: 999999;
    overflow-x: hidden;
    overflow-y: scroll;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent {
    width: 100%;
    position: absolute;
    height: 100%;
    display: block;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent span.closeDetailsScreen {
    background-image: url('/guia/PG-2.0/PG-2.0-images/close_ico.png');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    position: fixed;
    top: 30px;
    right: 20px;
    cursor: pointer;
    height: 50px;
    width: 50px;
    z-index: 1; /* As it is within an element with z-index: 502 */
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionOne {
    display: block;
    width: 100%;
    position: fixed;
    top: 0px;
    height: 100%;
    text-align:center;
    background:#FFFFFF;
    cursor: pointer;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionOne img#channelImage {
    display: inline;
    height:200px;
    /*width: 100%;
    position: absolute;
    margin-top: 70px;*/
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo {
    background: transparent linear-gradient(180deg, #1A1B22 0%, #121419 100%) 0% 0% no-repeat padding-box;
    display: block;
    width: 100%;
    position: absolute;
    top: 45%;
    padding: 0px;
    padding-bottom: 40px;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div.innerDiv {
    padding: 30px 30px 0px 30px;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div.innerDiv h2#ChannelNameHead {
    color: #EEEEEE;
    font-family: "DIRECTVCurve Medium", "Helvetica Neue Medium", Arial, Helvetica, sans-serif;
    font-weight: 500;
    margin-bottom: 0px;
    font-size: 24px;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div.innerDiv small#typeandCategory {
    display: block;
    font-family: "Helvetica Neue Light", Arial, sans-serif;
    font-weight: normal;
    margin-bottom: 15px;
    font-size: 14px;
    color: #00AEEF;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 10px;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo hr {
    border-top: 1px solid #222;
    margin: 0;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div.filterDiv select#calanderChannelDetailsNonDesktop {
    font-family: "Helvetica Neue Light", Arial, sans-serif;
    font-size: 0.9em;
    font-weight: normal;
    letter-spacing: 0.6px;
    width:110px;    
    height: 30px;
    position: relative;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div.filterDiv select#calanderChannelDetailsNonDesktop option {
    font-size: 0.8em;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable {
    table-layout: fixed;
    width: 100%;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tr td.hora {
    width: 30%;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tr td.titulo {
    width: 40%;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tr td.grabarIcon {
    width: 20%;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable thead tr td {
    color: #EEEEEE;
    text-transform: uppercase;
    padding: 0px;
    font-family: "Helvetica Neue Regular", Arial, sans-serif;
    font-size: 0.875em;
    letter-spacing: 0px;
    font-weight: 600;
    padding: 25px 0px 15px 0px;
}
@media only screen and (min-width: 401px) {
    div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable thead tr td {
        font-size: 0.9em;
    }
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td {
    color: #BBBBBB;
    padding: 0px;
    font-family: "Helvetica Neue Regular", Arial, sans-serif;
    font-size: 0.85em;
    letter-spacing: -0.5px;
    padding: 10px 0px;
}
@media only screen and (min-width: 401px) {
    div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td {
        font-size: 1em;
    }
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td span.programTitle {
    font-family: "DIRECTVCurve Medium", "Helvetica Neue Medium", Arial, Helvetica, sans-serif;
    font-size:0.85em;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td span.programDescription {
    font-size:0.83em;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td span.programDescriptionWithoutLeeMas {
    font-size:0.83em;
    cursor:pointer;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td span.programDescription a{
    color:#2272C9;
    cursor:pointer;
    text-decoration:underline;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td.grabarIcon {
    padding: 0px;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td.grabarIcon span {
    background-image: url('/guia/PG-2.0/PG-2.0-images/grabar_button_ico.png');
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    height: 30px;
    width: 30px;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td.comprarIcon {
    padding: 0px;
}
div#channelDetailsPopupInNonDesktop div#channelDetailsContent div.sectionTwo div#channelScheduleSection table#contentTable tbody tr td.comprarIcon span {
    background-image: url('/guia/PG-2.0/PG-2.0-images/PG_Purchase.png');
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    height: 30px;
    width: 30px;
}

span.calendarInChannelDetailsSpan{
    letter-spacing: 0;
    color: #BBBBBB;
    font-family:"Helvetica Neue Regular", Arial, Helvetica, sans-serif;
    font-size: 1em;
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    padding: 8px 0px 5px 0px;
    margin: 0px;
    z-index: 501;
}
span.calendarInChannelDetailsListSpan {
    position: absolute;
    display: block;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 4px;
    padding: 8px 0px 5px 0px;
    margin: 0px;
    z-index: 501;
    left: 320px;
}
ul.calendarInChannelDetails {
    list-style: none;
    margin:0px;
    display: inline-block;
    background: white;
    padding: 8px 0px 5px 0px;
    font-size: 0.65em;
    line-height: 20px;
    font-family: "DIRECTVCurve Regular", "Helvetica Neue Regular", Arial, Helvetica, sans-serif;
}
ul.calendarInChannelDetails li {
    padding: 0px 15px;
    cursor: pointer;
    font-family: "Helvetica Neue Medium", Arial, sans-serif;
}
ul.calendarInChannelDetails li.active  {
    background: #F5F5F7 0% 0% no-repeat padding-box;
    color: #000000;
    cursor: default;
    font-family: "DIRECTVCurve Regular", "Helvetica Neue Regular", Arial, Helvetica, sans-serif;
}
ul.calendarInChannelDetails li:hover:not(.active)  {
    background: #2272C9 0% 0% no-repeat padding-box;
    color: #FFFFFF;
}
span.calendarInChannelDetailsSpan::after {
    content: "<";
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-left: 5px;
    color: #BBBBBB;
    font-size: 1em;
    font-family: "DIRECTVCurve Medium", "Helvetica Neue Medium", Arial, Helvetica, sans-serif;
}
span.calendarInChannelDetailsSpan.active::after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
@media only screen and (max-width: 575px) {
    span.calendarInChannelDetailsListSpan {
    left: 30px;
}
}
.grayLayover {
    display: block;
    position: fixed;
    top: 0;
    left :0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
    width: 100%;
    height: 100%;
}
.grayLayover .pgSpinner {
    position: absolute;
    top: calc((100vh - 2rem)/2); /* `2rem` is the height of `pgSpinner` div */
    left: calc((100vw - 2rem)/2); /* `2rem` is the width of `pgSpinner` div */
}
body iframe#iframeForLoginBoxForPG {
    background-color: #FFFFFF;
    position: fixed;
    width: 99%;
    left: calc((100% - 99%)/2); /* `99%` is the width of `body#PG-twoPointO div#completeView iframe#iframeForLoginBoxForPG`. */
    height: 0px; /* `height` should be `0px` before loading the content. Dynamic `height` will be added through JS after content loads. */
    top: 50%; /* `top` should be `50%` before loading the content. Dynamic `top` will be added through JS after content loads. */
    opacity: 0; /* `opacity` should be `0` before loading the content. Dynamic `opacity` will be added through JS after content loads. */
    padding: 10px;
    z-index: 9999;
    border-radius: 7px;
    border: 0px;
}
@media only screen and (min-width: 520px) {
    body iframe#iframeForLoginBoxForPG {
        width: 520px;
        left: calc((100% - 520px)/2); /* `520px` is the width of `body#PG-twoPointO div#completeView iframe#iframeForLoginBoxForPG`. */
        padding: 20px;
    }
}