/** Font face **/


/* https://d2bc0dj7y9gvhz.cloudfront.net/ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
/* poppins font for reading menu  */

@font-face {
    font-family: "comicsans";
    src: url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/comicsans.woff") format("woff"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/comicsans.eot") format("eot");
    font-weight: normal;
    font-style: normal;
}

/* font for TextBook 1 short and long vowels */

@font-face {
    font-family: "poppins_regular";
    src: url(https://d2bc0dj7y9gvhz.cloudfront.net/reading/textbook1/fonts/Poppins-Regular.eot);
    src: url(https://d2bc0dj7y9gvhz.cloudfront.net/reading/textbook1/fonts/Poppins-Regular.eot) format("embedded-opentype"),
        url(https://d2bc0dj7y9gvhz.cloudfront.net/reading/textbook1/fonts/Poppins-Regular.woff) format("woff"),
        url(https://d2bc0dj7y9gvhz.cloudfront.net/reading/textbook1/fonts/Poppins-Regular.ttf) format("truetype");
}

body #letter-sequence .templateContainer .dynamic-layout-letter-sequence .flex-50 .alphabet .aplha {
    font-family: "poppins_regular" !important;
}

.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary.hover,
.btn-primary:active,
.btn-primary.active,
.open>.btn-primary.dropdown-toggle:hover,
.open>.btn-primary.dropdown-toggle:focus,
.open>.btn-primary.dropdown-toggle.focus {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}

#popover-positioned-scrolling-top .close {
    position: absolute;
    right: 3px;
    top: 0;
    opacity: 1;
}

div#recording-name-input {
    min-width: 210px;
}

div#emailFbShareDialog {
    width: 100%;
    height: 100%;
}

div#emailFbShareDialog.login-share-ui {
    width: auto;
    height: auto;
}

#emailFbShareDialog.logout-share-ui {
    width: 100%;
    height: auto;
}

/* End */

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Black.woff2') format('woff2'),
        url('../fonts/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
        url('Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Conv_ST Gothic Hv Heavy';
    src: url('../fonts/ST-Gothic-Hv-Heavy.eot');
    src: local('☺'), url('../fonts/ST-Gothic-Hv-Heavy.woff') format('woff'), url('../fonts/ST-Gothic-Hv-Heavy.ttf') format('truetype'), url('../fonts/ST-Gothic-Hv-Heavy.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FontAwesome";
    src: url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.eot");
    src: url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.woff2") format("woff2"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.woff") format("woff"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ADV_CALIBRI";
    src: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADV_CALIBRI_REGULAR.eot);
    src: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADV_CALIBRI_REGULAR.eot) format("embedded-opentype"), url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADV_CALIBRI_REGULAR.woff) format("woff"), url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADV_CALIBRI_REGULAR.ttf) format("truetype");
}

@font-face {
    font-family: 'Advance Calibri';
    src: url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/AdvCalibriBold.woff2') format('woff2'), url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/AdvCalibriBold.woff') format('woff'), url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/AdvCalibriBold.ttf') format('truetype'), url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/AdvCalibriBold.svg#AdvCalibriBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Advance Calibri';
    src: url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADVCalibri.woff2') format('woff2'), url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADVCalibri.woff') format('woff'), url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADVCalibri.ttf') format('truetype'), url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADVCalibri.svg#ADVCalibri') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


* {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
}

.fa,
.far,
.fas {
    font-family: FontAwesome !important;
}

.btn-primary {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}

.menuDialog .accordion__arrow {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -6px;
}

.menuDialog .accordion__button {
    background-color: transparent;
    color: #444;
    padding: 0;
    text-align: left;
    border: none;
}

.menuDialog .accordion__arrow::before,
.menuDialog .accordion__arrow::after {
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.menuDialog .accordion__arrow::before {
    left: 4px;
    transform: rotate(45deg);
}

.menuDialog .accordion__arrow::after {
    right: 4px;
    transform: rotate(-45deg);
}

.menuDialog .accordion__arrow::after,
.menuDialog .accordion__arrow::before {
    display: block;
    position: absolute;
    top: 50%;
    width: 10px;
    height: 2px;
    background-color: currentColor;
    content: '';
}

header.headerfull .sommer-logo::after {
    border-right: none;
}

li.nav-item.dispay-none {
    display: none;
}

.nav-bar-btn {
    float: left;
    margin-right: 20px;
    cursor: pointer;
}

p.category-text {
    background-color: #012e69;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 100%;
}

p.category-text:before {
    position: absolute;
    content: '';
    background-color: #012e69;
    height: 30px;
    width: 12px;
    top: 100%;
    left: 8%;
}

p.category-text:after {
    position: absolute;
    content: '';
    background-color: #012e69;
    height: 30px;
    width: 12px;
    top: 100%;
    right: 8%;
}

.box-content:hover {
    transform: scale(1.01);
    filter: brightness(0.5);
}

.tab-content button {
    margin: 10px 0;
}

.dynamic-layout-letter-sequence.letter-with-image .demofontface_ADV_CALIBRI {
    letter-spacing: 10px;
}

.Phonics-homepage-wraper {
    padding-top: env(safe-area-inset-top, 30px) !important;
}

.phonicsMain .MuiTooltip-tooltip {
    font-size: 1.3rem;
}

.course-view .image_btn {
    float: left;
    width: calc(25% - 10px);
    margin: 10px 5px;
    text-align: center;
    overflow: hidden;
}

.course-view img {
    clear: both;
    max-width: 100%;
    width: 22px;
    height: auto;
    margin-right: 6px;
}

button.image_btn img {
    width: auto;
}

header a.icon-menu {
    cursor: pointer;
}

header .rdmap-wrap li.icon-menu-bar a:hover,
header .rdmap-wrap li.icon-menu-bar a:focus,
header .rdmap-wrap li.icon-menu-bar a:focus-within,
header .rdmap-wrap li.icon-menu-bar a:focus-visible {
    outline: none !important;
}

#gameBody .blastGame .abcgame_abcpickrecommendedgame,
#gameBody .blastGame .abcgame_smsplashwrap,
#gameBody .blastGame .abcSound_maincontainerContent {

    background: none !important;
    width: auto !important;
    position: relative;
}

#gameBody .bingoMaincontainer,
#gameBody .abcgame_maincontainerContent,
#gameBody .blastGame .abcbingoMaincontainer,
#gameBody .blastGame .abcgame_smsplashwrap,
#gameBody .blastGame .abcSound_maincontainerContent {

    background: none !important;
    width: auto !important;
    position: relative;
}

#abcBingoMainDiv .gameContainer .abcgame_bingohomebuttonswrap {
    position: absolute;
    bottom: 2%;
}


/* changed css for Phonics : The RH menu should be properly aligned with the top triangle SL3-6157 */

.header .rdmap-wrap li .common-profile-wrap .common-profile-section .open>.dropdown-menu>li>a {
    color: #fff !important;
    border-bottom: 1px solid #ffffff;
    font-size: 11px !important;
    transition: 0.4s;
    animation-name: fade;
}

.common-profile-section .open>.dropdown-menu>li:last-child>a {
    border: none !important;
}

.common-profile-section .open>.dropdown-menu>li {
    width: 100%;
}

.header .rdmap-wrap li .common-profile-wrap .common-profile-section .open>.dropdown-menu>li>a:hover,
.header .rdmap-wrap li .common-profile-wrap .common-profile-section .open>.dropdown-menu>li>a:focus,
.header .rdmap-wrap li .common-profile-wrap .common-profile-section .open>.dropdown-menu>li>a:active {
    color: #971a1e !important;
    color: #971a1e !important;
    border-color: #971a1e !important;
    transition: 0.4s;
    animation-name: fade;
}

.header .rdmap-wrap li .common-profile-wrap .common-profile-section .dropdown.btn-group>ul.dropdown-menu {
    left: calc(10% - 6.5rem);
    min-width: calc(120px + 10px);
}

.portrait footer {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.portrait #phonicsHeader:has(.headerfull) .icon-menu,
.portrait .headerfull .icon-menu,
.portrait .headerfull .icon-menu {
    right: 100px !important;
    left: auto !important;
}

.portrait .headerfull a#wc-mobileMenuBtn {
    right: 60px !important;
}

.portrait #phonicsHeader:has(.headerfull) .logo-wrap,
.portrait .headerfull .logo-wrap,
.portrait .headerfull .logo-wrap {
    margin-left: 0 !important;
}

/* end  */


/* start css for audio instruction popup */

#introPopupWindow,
#homophonePopupWindow {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instruction-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40%;
    height: 40%;
    position: relative;
}

.instruction-wrap .learning-teaching {
    position: absolute;
    width: 50%;
    right: 90%;
    top: 30%;
}

.intruction-inner-wrap {
    position: absolute;
    width: 75%;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
}

.intruction-inner-wrap button {
    padding: 8px 11px;
    width: 100px;
    background-color: #4a9b44;
    box-shadow: 0px 2px 1px 3px rgb(88 185 80);
    border-radius: 7px;
    font-size: 20px;
    font-weight: 600;
    border: none;
    color: #fff;
    text-transform: capitalize;
}

.instruction-wrap #interactivityIntroDiv {
    z-index: 11;
    color: #32161d;
    font-size: 21px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 1px;
    flex-grow: 1;
    margin-bottom: 30px;
}

.instruction-wrap img {
    width: 100%;
}

.ancientScrolldiv {
    display: flex;
    justify-content: center;
    max-height: 100%;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
}


/* end */


/*dialogue menu Css*/

.menuTabHeader li button:before {
    position: absolute;
    content: "";
    border-left: 17px solid #58b950;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}

#lesson_ifr {
    -webkit-user-select: none;
}

.menuTabHeader .textbook_1:before {
    border-left: 17px solid #f69a1f;
}

.menuTabHeader .textbook_2:before {
    border-left: 17px solid #e72426;
}

.menuTabHeader .textbook_3:before {
    border-left: 17px solid #58b950;
}

.menuTabHeader .textbook_4:before {
    border-left: 17px solid #f36212;
}

.menuTabHeader .textbook_5:before {
    border-left: 17px solid #2a7aba;
}

.menuTabHeader .textbook_6:before {
    border-left: 17px solid #9e3e93;
}

.menuTabHeader .textbook_7:before {
    border-left: 17px solid #3eab4e;
}

.menuTabHeader .textbook_8:before {
    border-left: 17px solid #3a62a6;
}

.menuTabHeader li button {
    position: relative;
}

.menuTabHeader button i.fa.fa-check-circle {
    position: absolute;
    font-size: 15px;
}

#warning-message {
    display: none;
}

.letters-text-wrap .stageCnt::-webkit-scrollbar {
    display: none !important;
}

.letters-text-wrap .stageCnt {
    -ms-overflow-style: none !important;
}


/**-------- start css change activity icons(new changes 23 Sep)---------**/

.phonicsMain #noanim-tab-example a i {
    width: 30px;
    margin-bottom: 0px;
    height: 30px;
    padding: 0px;
    min-width: auto;
    min-height: auto;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    border: none !important;
}

.phonicsMain #noanim-tab-example .activity_area .activity_names {
    margin-left: 35px;
    width: 75% !important;
}

.phonicsMain #noanim-tab-example .activity_area i {
    right: 30px;
}

.phonicsMain #noanim-tab-example a span.activity_number {
    position: absolute;
    margin-left: 0 !important;
}

.phonicsMain #noanim-tab-example a i[width] {
    filter: brightness(0.2);
}

.phonicsMain #noanim-tab-example a button {
    display: flex;
    align-items: center;
}

.phonicsMain #noanim-tab-example a span {
    margin-left: 40px;
}

.phonicsMain #noanim-tab-example .lesson-number {
    position: absolute;
    right: 15px;
}

.phonicsMain #noanim-tab-example a .lesson-name {
    margin-left: 0;
}


/**-------- End css change activity icons(new changes 23 Sep)---------**/


/* Contraction Build Desktop style */

.flex-end-right {
    display: flex;
    justify-content: flex-end;
}

.word-span {
    background: white;
    padding: 0px 10px;
    border-radius: 9px;
}

.main-cards-data {
    width: 100%;
}

.fixed-mutated-card {
    display: flex;
    justify-content: center;
}

.wordCardDiv {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.pause-screen {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    background-color: #000000ba;
    z-index: 99;
    justify-content: center;
    align-items: center;
    display: flex;
}

#phonicsFooter .left-icon .fa.fa-arrow-circle-o-left {
    font-size: 35px;
    color: #fff;
    cursor: pointer;
}

#phonicsFooter .left-icon {
    position: absolute;
    left: 60px;
    max-width: fit-content;
}

.reading-home-page-wraper .header_setting_btn button::before {
    color: #007bff;
}

 #flipping_leatherbook.flip-book2 .right-btns-grp{
        right: 60px;
  }

/* @media only screen and (max-device-width: 464px) and (orientation: portrait) {
    #root {
        display: none;
    }

    #warning-message {
        display: block;
        text-align: center;
    } 
}*/
#LoginButton {
    background: rgba(20, 119, 243, 0.9) !important;
}

.landscape .phonic-login-menu #LoginButton {
    background: transparent !important;
}

.phonicsMain .menuTabHeader li button {
    font-size: 38px;
    color: #fff;
    border-radius: 0;
}

.phonicsMain .menuTabHeader li button:active,
.phonicsMain .menuTabHeader li button:focus {
    color: #fff !important;
}

.modal_content_wrapper .course_icon,
.modal_content_wrapper .game_icon,
.modal_content_wrapper .song_icon {
    margin: 0;
    width: 35px;
    border-radius: 100%;
    margin-bottom: 0px;
    background-size: contain;
    height: 35px;
    padding: 0;
    min-width: auto;
    min-height: auto;
    background-repeat: no-repeat;
    background-position: center;
}


/*end dialogue menu css*/

.course-view .active {
    color: #333;
    background: #193463;
}

.phonicsMain .modal-dialog {
    max-width: 1024px;
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    margin: 30px auto;
    transform: none !important;
}

.phonicsMain .modal-dialog .modal-content {
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    border: none;
    border-radius: 3px;
}

.phonicsMain .modal-header {
    position: relative;
    padding: 10px 15px;
    background: transparent;
    border-bottom: none;
}

.phonicsMain #example-custom-modal-styling-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 35px;
    font-weight: 700;
    color: #fff;
    margin: 0px 0px;
    padding-left: 20px;
}

.phonicsMain .modal-header .btn-close {
    margin-top: -1px;
    font-size: 32px;
}

.phonicsMain .modal-body {
    padding: 0;
}

.phonicsMain #noanim-tab-example {
    position: relative;
    /* min-height: 100px; */
    /* padding: 15px; */
    border-top: 2px solid #e9e9e9;
    border-bottom: 2px solid #e9e9e9;
    background: #fff;
    /* padding-top: 0px !important;  */
}

.phonicsMain #noanim-tab-example ul {
    padding-left: 0px;
    float: left;
    margin: 5px 0 0 0;
    padding: 0;
    list-style: none;
    border: none;
}

.phonicsMain #noanim-tab-example .nav-tabs>li {
    position: relative;
    display: block;
    position: relative;
    float: left;
    border: 2px solid #193463;
}

.phonicsMain #noanim-tab-example .nav-tabs>li a:hover {
    background-color: transparent;
}

.phonicsMain #noanim-tab-example .nav-tabs>li.active a {
    background-color: #193463;
}

.phonicsMain #noanim-tab-example a {
    display: block;
    position: relative;
    font-weight: 600;
    font-size: 18px;
    padding: 12px 25px;
    margin: 0 auto;
    z-index: 9;
    cursor: pointer;
    transition: all 0.25s linear;
    text-align: center;
    border: none;
    color: #555555;
    border-radius: 0;
}

.phonicsMain .ttheader {
    position: absolute;
    right: 0;
    padding: 15px;
    z-index: 9;
    top: -3px;
    text-align: center;
    margin-top: 0;
}

.phonicsMain .tab-content {
    width: 100%;
    float: left;
    /* margin-top: 30px; */
}

.course-view {
    position: relative;
    padding: 10px 0px 10px 10px;
    z-index: 9;
    display: inline-block;
    width: 100%;
}

.course-view button {
    color: #193463 !important;
    display: block;
    padding: 7px 10px;
    line-height: 20px;
    font-size: 13px;
    border: 2px solid #cccccc;
    border-radius: 0;
    font-weight: 400;
    background-color: #fff;
    width: 100%;
    text-align: left;
    font-family: 'Poppins', sans-serif !important;
}

.course-view button span,
.course-view button span div {
    font-family: 'Poppins', sans-serif !important;
}

.phonicsMain .ic-text {
    font-size: 13px;
}

.course-view .col-sm-4 {
    padding: 0 5px;
}

.course-view a.padding_react_button.react-user.edit-hover {
    padding: 0 !important;
    text-decoration: none;
}

.utube_container {
    width: 100%;
    position: relative;
}

#lesson_ifr {
    /* width: 100%; */
    display: flex;
    flex-wrap: wrap;
    z-index: 0;
}

.full-screen-control .btn-action {
    position: static;
}

.full-screen-control {
    z-index: 9;
    margin-left: 15px;
    width: 10%;
}

#recordingIframe {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #000;
    z-index: 0;
    height: 100%;
    align-items: center;
    flex-direction: row;
}

.recording-play-controls {
    text-align: center;
    width: 100%;
    align-items: center;
    display: flex;
    background-color: #ffcc00;
}

.utube_container .player {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.modal_content_wrapper {
    width: 100%;
    float: left;
    position: relative;
    z-index: 9;
    background-color: #fff;
}

body .recording-login-modal .modal_content_wrapper,
.landscape body .recording-login-modal .modal-header{
    background-color: #f39e26 !important;
}

/*.abcgame_abcpickparent.ng-scope,
.abcgame_abc-containerWrap,
.abcgame_abc-container,
.abcgameabcpick.ng-scope{
    height: 100% !important;
}*/

.abcMatchMainDiv {
    height: 100%;
}

.abcgame_abc-containerWrap,
.abcgameabcpick.ng-scope,
.abcgame_abcpickparent.ng-scope {
    height: 100%;
}


/***************video-controls***************/

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
    /*     height: calc(100vh - 156px); */
}
/* 
.portrait .video-container {
    padding-top: env(safe-area-inset-top, 20px) !important;
} */


/*add css for fit the ABC match game area*/

.abcgame_helpHome img.abcgame_customClass {
    cursor: pointer;
}

.abcgame_abcpick_section2 {
    height: 100%;
}

.content-pagination .fast-forward-buttons {
    left: 50%;
    position: absolute;
    top: -30px;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    display: none;
    -moz-transform: translate(-50%, 0);
}

.fast-forward-buttons ul {
    background: #ffcd01 none repeat scroll 0 0;
    border: none;
    float: left;
    margin: 0;
    padding: 10px 20px;
    width: 100%;
    border-radius: 30px 30px 0 0;
    display: flex;
    text-align: center;
}

.fast-forward-buttons ul li.active,
.fast-forward-buttons ul li:hover,
.fast-forward-buttons ul li:focus {
    outline: none;
}

.fast-forward-buttons ul li.fast-forward-dots {
    list-style-type: none;
    margin: 0 5px;
    padding: 0px 0;
}


.content-pagination li a {
    color: #000;
}

.content-pagination li.fast-forward-dots i {
    font-size: 17px;
    margin: 0 4px;
    vertical-align: middle;
}

.fullscreenEL {
    background: url(../images/toggle-screen.png) no-repeat 0 0;
    width: 32px;
    height: 32px;
    display: block;
    background-size: 100%;
}

#recordingIframe .btn-action .fullscreenEL {
    /* filter: brightness(1)invert(1); */
}

.content-pagination li.pager-control {
    text-align: center;
}


/*.content-pagination .btn-action {
    margin-top: 3px;
}*/

.content-pagination li .md-button {
    font-family: 'Poppins', sans-serif;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    line-height: 25px;
    min-height: 24px;
    min-width: 51px;
    font-weight: 600;
}

.icon-forward.md-button.md-ink-ripple {
    border: 2px solid;
    padding: 1px 4px 4px 0px;
    background-color: #fff;
    border-radius: 5px;
}


.phonicsMain #btn-theme {
    padding: 5px 10px;
}

.phonicsMain #theme-btn-close {
    padding: 5px 15px;
}

#appBody .LoginModal .btn-close {
    top: -25px !important;
    right: -35px;
}

.recording-login-modal .btn-close {
    position: absolute;
    right: 0%;
    color: rgb(255, 255, 255);
    height: 25px;
    width: 25px;
    outline: none;
    opacity: 1 !important;
    overflow: visible;
    border: none;
    text-align: center;
    border-radius: 50%;
    background: black;
    top: -5%;
    font-size: 24px;
    padding: 0px;
    font-weight: normal;
}

.recording-login-modal .btn-close:hover,
.recording-login-modal .btn-close:active,
.recording-login-modal .btn-close:focus {
    background: black;
    color: rgb(255, 255, 255);
    outline: none;
    box-shadow: none;
}

.recording-login-modal-body .recording-login-inner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
}

.portrait .modal-90w.recording-login-modal.modal-dialog {
    width: 75%;
}

.recording-login-modal-body .recording-login-inner-content,
.recording-login-modal-body .recording-login-inner-content .recording-login-inner-contnt_section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

.phonics_popup .search_bar-section {
    width: 100%;
    height: 100%;
    float: left;
}

.phonics_popup .search_bar-section .flex-end-right input.search-form-control {
    width: 40%;
    padding: 7px 15px;
    height: auto;
    min-height: auto;
    border: 2px solid #cccccc;
    border-radius: 4px;
    transition: 0.5s;
}

.phonics_popup .search_bar-section .flex-end-right input.search-form-control:hover,
.phonics_popup .search_bar-section .flex-end-right input.search-form-control:focus {
    border-color: #000;
    transition: 0.5s;
}

.phonics_popup .search_bar-section .content-pagination li md-icon {
    font-weight: 600;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.81);
}

.icon-backward.md-button.md-ink-ripple {
    border: 2px solid;
    padding: 1px 0px 4px 4px;
    background-color: #fff;
    border-radius: 5px;
}

.content-pagination li.pager-control md-icon.play {
    background: #ffcc00 url(../images/play.png) right 0px no-repeat;
}

.content-pagination li.pager-control md-icon.pause {
    background: #ffcc00 url(../images/pause.png) right 0px no-repeat;
}

.content-pagination li.pager-control button.volume-ctrl md-icon.volume {
    background: #ffffff url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/volume.png) center center no-repeat;
}

.content-pagination li .icon-backward i {
    margin: -2px 0 0 -8px;
}

#lesson_iframe.Phonics_ereader {
    height: calc(100%);
}

.landscape #lesson_iframe.Phonics_ereader .content_ereader_modify {
    height: calc(100% - 5%) !important;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#lesson_iframe.Phonics_ereader .ereader_bookimages {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
}

#lesson_iframe.Phonics_ereader .ereader_bookimages #ereader_images {
    flex-grow: 1;
}

.landscape #lesson_iframe.Phonics_ereader .content_ereader_modify .iframe_ereader {
    height: calc(100%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 10px;
}

.portrait #popover-positioned-scrolling-top {
    left: 0 !important;
    /* right: 0 !important; */
    margin: -11px auto;
}

.portrait #popover-positioned-scrolling-top.popover.top>.arrow {
    display: none !important;
}

.arrow i {
    display: flex;
    align-items: center;
    justify-content: center;
}

#flipping_leatherbook #flipbook-viewport .img_text {
    max-width: 69% !important;
    /* min-width: 70% !important; */
    width: auto !important;
    max-height: 70% !important;
}


/* Flip chart interactivity */

.flipcardInteractivity {
    flex-wrap: nowrap !important;
    justify-content: center;
    flex-direction: column;
}

.container.calendar-row {
    flex: 1 !important;
    display: flex;
}

.carousalFlipCard .container.calendar-row .upsideDownFlip,
.carousalFlipCard .container.calendar-row .row,
.carousalFlipCard .container.calendar-row .noCalendarFlip {
    height: 100%;
    max-height: 600px;
    overflow: visible;
}

.carousalFlipCard .container.calendar-row .upsideDownFlip .scene,
.carousalFlipCard .container.calendar-row .noCalendarFlip .cell-space {
    height: calc(100% - 12px) !important;
}

.carousalFlipCard .container.calendar-row .row {
    padding: 20px 0;
}

#flipping_leatherbook #flipbook-viewport .pageSpan {
    /* padding: 0 60px 0 45px; */
    display: flex;
    flex-direction: column;
}


/* .bookTemplate2 .flipbook-viewport .page .pageDiv .pageSpan {
    transform: translate(-50%, -71.3%);
    left: 50%;
} */

.commonProfileCss .modify_content:empty,
.commonProfileCss div:empty{
    display: none ;
}

#flipping_leatherbook #flipbook-viewport .fontfaceRed_ADV_CALIBRI:not(.textbook1) .pageSpan span {
    color: #000;
}

.fc-wrap .score-quiz,
.fc-wrap .score-quiz .scoreWrapper,
.fc-wrap .score_card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    flex-direction: column;
}

.phonics_popup {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
}

.billboard-words #billBoard .wordHighlight {
    color: red !important;
}

/* .billboard-words #play_interactivity .repeat-icon {
    text-transform: uppercase;
} */

.course-view button>.interactivity-name {
    font-weight: bold;
}

.phonics_popup .modal_content_wrapper md-icon {
    background-color: transparent;
    border: none;
    width: 40px;
    height: 35px;
    background-size: 40px;
}

.phonics_popup.menuDialog md-icon {
    width: 37px;
    height: 37px;
    background-size: 35px;
    border: none;
    background-repeat: no-repeat;
    border-radius: 0;
}


.course_icon {
    background: url(../images/cource.png);
}

#cat-search .course_icon {
    filter: brightness(1) invert(1);
}

.lesson_icon {
    background: url(../images/lesson.png);
    width: 45px;
    height: 36px;
    margin-bottom: 5px;
    padding: 25px;
    border-radius: 7px;
    background-position: center center;
    margin: 0;
    width: 35px;
    border-radius: 100%;
    margin-bottom: 0px;
    background-size: contain;
    height: 35px;
    padding: 0;
    min-width: auto;
    min-height: auto;
    display: inline-block;
    vertical-align: middle;
}

.video_icon {
    background: url(../images/video.png);
    width: 45px;
    height: 36px;
    margin-bottom: 5px;
    padding: 25px;
    background-position: center center;
    margin: 0;
    width: 35px;
    border-radius: 100%;
    margin-bottom: 0px;
    background-size: contain;
    height: 35px;
    padding: 0;
    min-width: auto;
    min-height: auto;
    display: inline-block;
    vertical-align: middle;
}

.interactivity_icon {
    background: url(../images/Interactivity-Icon.png);
    width: 45px;
    height: 35px;
    margin: 0 0 -5px;
    background-position: center center;
    padding: 25px;
    border-radius: 7px;
    margin: 0;
    width: 35px;
    border-radius: 100%;
    background-size: contain;
    height: 35px;
    padding: 0;
    min-width: auto;
    min-height: auto;
}

.game_icon {
    background: url(../images/game.png);
}

.story_icon {
    background: url(../images/two-page-story.png);
    width: 45px;
    height: 35px;
    margin: 0 0 -5px;
    background-position: center center;
    padding: 25px;
    border-radius: 7px;
    margin: 0;
    width: 35px;
    border-radius: 100%;
    background-size: contain;
    height: 35px;
    padding: 0;
    min-width: auto;
    min-height: auto;
}

.quizz_icon {
    background: url(../images/Quiz.png);
    width: 45px;
    height: 35px;
    margin: 0 0 -5px;
    background-position: center center;
    padding: 25px;
    border-radius: 7px;
    margin: 0;
    width: 35px;
    border-radius: 100%;
    background-size: contain;
    height: 35px;
    padding: 0;
    min-width: auto;
    min-height: auto;
}

#cat-search .quiz_icon {
    filter: brightness(1) invert(1);
    background: url(../images/Quiz.png);
}


.book_icon {
    background: url(../images/book.png);
    width: 45px;
    height: 35px;
    margin: 0 0 -5px;
    background-position: center center;
    padding: 25px;
    border-radius: 7px;
    margin: 0;
    width: 35px;
    border-radius: 100%;
    background-size: contain;
    height: 35px;
    padding: 0;
    min-width: auto;
    min-height: auto;
}

.story_time_icon {
    background: url(../images/storytime-Icon-white.png);
    width: 45px;
    height: 35px;
    margin: 0 0 -5px;
    background-position: center center;
    padding: 25px;
    border-radius: 7px;
    margin: 0;
    width: 35px;
    border-radius: 100%;
    background-size: contain;
    height: 35px;
    padding: 0;
    min-width: auto;
    min-height: auto;
}

.course-view button>.lesson-name {
    font-weight: normal;
    padding-left: 10px;
}


/* .course-view button.active .lesson-number {
    background: #fff !important;
    color: #193463;
} */

.course-view button>.course-lesson-no {
    float: left;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #193463;
    font-size: 15px;
    font-weight: normal;
    margin-right: 10px;
    position: relative;
}

.course-view button>.course-lesson-no:after {
    content: " ";
    background: #193463;
    height: 100%;
    width: 1px;
    right: -3px;
    position: absolute;
}

.course-view button>.lesson-number {
    float: right;
    border-radius: 50%;
    background: #bbb;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: normal;
}

.course-view button span:last-child {
    display: grid;
}

div#sectionDiv button,
div#lessonDiv button,
div#activityListing button,
.course-view button,
.portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
    position: relative;
    margin-bottom: 10px;
}

div#sectionDiv button i.fa.fa-check-circle,
div#lessonDiv button i.fa.fa-check-circle,
div#activityListing button i.fa.fa-check-circle,
.phonicsMain #noanim-tab-example .course-view button i.fa.fa-check-circle,
.portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button i.fa.fa-check-circle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    background-color: transparent !important;
    box-shadow: none;
    width: auto !important;
    height: auto !important;
    border: none;
}

#sectionDiv button span div:nth-child(2) {
    width: 88%;
    word-break: break-word;
}

.portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button i.fa.fa-check-circle {
    filter: none;
}

.course-view .active_1,
.course-view .active_2,
.course-view .active_3,
.course-view .active_4,
.course-view .active_5,
.course-view .active_6,
.course-view .active_7,
.course-view .active_8 {
    background: #d1d6e0 !important;
    color: #193463 !important;
}


.content-pagination li .icon-forward i {
    margin: -2px -8px 0 0;
}

header .h-left {
    display: block !important;
}

.content-pagination li.pager-control md-icon span {
    display: block;
    text-transform: uppercase;
    color: #000;
    font-size: 0px;
    margin: 0 auto;
    width: 100%;
    line-height: 36px;
    font-family: 'Poppins', sans-serif;
}


/*sentence pick Interactivity*/

.sentence-pickInteractivity-wrap {
    height: 100%;
}

.sentence-pick-leftside {
    text-align: center;
    width: 80%;
    margin: auto;
}


/*.sentence-pick-leftside h4 {
    color: #f31507;
    font-weight: 600;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
    border-radius: 5px;
    padding: 10px 85px;
    display: inline-block;
    margin-bottom: 60px;
    border: 1px solid #afafaf;
    background-color: #f9f9f9;
}*/

.sentence-pickInteractivity-wrap .volume {
    margin-left: 10px;
    background-image: url(../../../reading/css/images/volume.png);
    display: inline-block;
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.85;
}

.sentence-pickInteractivity-wrap .centered-heading h4 {
    color: #333;
    font-size: 24px;
    margin: 5px 0px;
    width: 100%;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}

.offset-margin-auto,
.sentence-pick-rightside {
    text-align: center;
}

.sentence-pick-rightside,
.sentence-pick-leftside {
    padding-top: 15px;
}

.sentence-pick-bottom-text .fa-star.checked {
    color: #dcba01;
}

.sentence-pick-bottom-text .fa-star {
    background-color: transparent;
    border: none;
    -webkit-text-stroke: snow;
    font-size: 30px;
}

.nosentense_carousel .split-text-cont {
    top: 0vh !important;
}

.instruction_text span.infoIcon {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sentence-pick-bottom-text .fa-star {
    border: none;
    -webkit-text-stroke: snow;
    font-size: 30px;
    color: #b7b7b7;
}

.sentence-pick-bottom-text {
    padding: 15px;
}

.sentence-pick-leftside ul {
    padding: 0;
}

.sentence-pick-leftside li span:first-child {
    list-style: none;
    font-weight: 600;
    border: 1px solid #afafaf;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 7px 65px;
    background-color: #f9f9f9;
    font-size: 20px;
    width: 100%;
}

.sentence-pick-leftside li {
    list-style: none;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    margin-bottom: 19px;
}

.sentence-pick-leftside li .speaker.volume {
    margin-left: 10px;
    background-image: url(../../../reading/css/images/volume.png);
    display: inline-block;
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.85;
}

.invalid-feedback {
    width: 100%;
    margin-top: .25rem;
    font-size: 14px !important;
    color: #dc3545;
    font-family: "ADV_CALIBRI" !important;
}

.abcpickbutterflyparent {
    display: none;
}

div[aria-label="modal open download pdf press tab to navigate"] button.close {
    position: absolute;
    top: 20px;
    right: 20px;
}

div[aria-label="modal open download pdf press tab to navigate"] button.close:hover {
    box-shadow: 0 0 5px #000;
}

div[aria-label="modal open download pdf press tab to navigate"] button.close span {
    display: flex;
    justify-content: center;
    align-items: center;
}
#wc-mobileDashboardBtn .fa.fa-bar-chart {
    font-size: 16px;
}   
/* #lgf_gamestarsrating {
    width: 50% ;
    text-align: center ;
    display: flex ;
    flex-wrap: wrap ;
    gap: 10px ;;
    margin: auto ;
}

/* wcag compliant color  */

body:has(.wc-content) .menuTabHeader .textbook_4:before,
body:has(.wc-content) .menuTabHeader .textbook_1:before{
    border-left: 17px solid #bb5b00;
}
.wc-active_level_color_4,
.wc-active_level_color_1,
body:has(.wc-content) .menuTabHeader .textbook_4,
body:has(.wc-content) .menuTabHeader .textbook_1 {
  background: #bb5b00 !important;
}
 .portrait .header .h-left.wc-active_level_color_4, .portrait .header .h-right.wc-active_level_color_4,
 .portrait .header .h-left.wc-active_level_color_1, .portrait .header .h-right.wc-active_level_color_1 {
    background: #bb5b00 !important;
    border-color: #bb5b00 !important;
}
body:has(.wc-content) .bgColor_on_currentModal.active_4,
body:has(.wc-content) .bgColor_on_currentModal.active_1 {
    background: linear-gradient(115deg, #bb5b00 20%, #193463 20%) !important;
}

/* Activity-2 */
body:has(.wc-content) .menuTabHeader .textbook_2:before{
    border-left: 27px solid #b70002;
}
.wc-active_level_color_2,
body:has(.wc-content) .menuTabHeader .textbook_2 {
  background: #b70002 !important;
}
 .portrait .header .h-left.wc-active_level_color_2, .portrait .header .h-right.wc-active_level_color_2 {
    background: #b70002 !important;
    border-color: #b70002 !important;
}
body:has(.wc-content) .bgColor_on_currentModal.active_2 {
    background: linear-gradient(115deg, #b70002 20%, #193463 20%) !important;
}

.wc-active_level_color_3,
body:has(.wc-content) .menuTabHeader .textbook_3 {
    background: #3A8334 !important;
}

body:has(.wc-content) .bgColor_on_currentModal.active_3 {
    background: linear-gradient(115deg, #3A8334 20%, #193463 20%) !important;
}

body:has(.wc-content) .menuTabHeader .textbook_3:before {
    border-left-color: #3A8334 !important;
}

.wc-active_level_color_7,
body:has(.wc-content) .menuTabHeader .textbook_7{
    background: #2E7F3A !important;
}

body:has(.wc-content) .bgColor_on_currentModal.active_7 {
    background: linear-gradient(115deg, #2E7F3A 20%, #193463 20%) !important;
}

body:has(.wc-content) .menuTabHeader .textbook_7:before {
    border-left-color: #2E7F3A !important;
}
body:has(.wc-content) .course-view button>.wc-lesson-number {
    background: #696363;
}

/* wcag compliant color end */
/* responsive css */

/* iPad Air 13-inch (2025) Portrait */
@media only screen
  and (min-width: 1024px)
  and (max-width: 1024px)
  and (orientation: portrait) {

  .video-container {
    height: calc(100dvh - 205px) !important;
  }

}

@media (min-width: 260px) and (max-width: 318px) and (orientation: portrait) {
    .portrait .survey-container .survey-main-class {
        width: 100%;
        height: calc(100% - 80px);
        margin-top: 35px;
    }
}

@media (min-width: 319px) and (max-width: 575.98px) and (orientation: portrait) {


    /* added css for Phonics->1->1->5->4->iphone 7 ->UI of result screen is distorted  */
    .portrait #abcsoundmatch .abcSoundMatchWrapper .abcgame_smplayagainbtn,
    .portrait #abcsoundmatch .abcSoundMatchWrapper .abcgame_smnextlevelbtn {
        height: 25px !important;
        font-size: 16px !important;
        line-height: 16px !important;
    }

    /* end */
    /* changed the layout to column wise from row wise for ebook phonics page   */
    /*    .portrait #lesson_ifr .ereader_bookimages .ereader_images .ereader-divider {
        margin: 7px !important;
        width: 95% !important;
        max-width: 100% !important;
        height: 100%;
    }  remove css for make images  proportions*/
    .portrait .ereader_bookimages .ereader_images .ereader-divider img {
        height: 100% !important;
    }

    .portrait #mainBodyContainer #lesson_iframe.Phonics_ereader .content_ereader_modify.ereader_bookimages {
        height: 100% !important;
    }

    /* end  */

    .portrait #words_rhyiming .rhyme_right {
        right: 10px;
    }

    .portrait .survey-container .survey-main-class {
        width: 100%;
        height: calc(100% - 100px);
    }

    .portrait .caraousal_interactive_custom {
        min-height: 100%;
    }

    .portrait .caraousal_interactive_custom .inner-flex-row {
        height: 68% !important;
    }

    /* added css for SL3-9265 */
    .portrait .caraousal_interactive_custom .inner-flex-row .inner-flex .inner-item .item {
        padding: 0 10px !important;
    }

    .portrait .caraousal_interactive_custom .inner-flex-row .inner-flex .inner-item .item>img {
        max-width: 95% !important;
    }

    /* END */
    .portrait .flipleather-book {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (min-width: 576px) and (max-width: 1200px) and (orientation: portrait) {
    .portrait .survey-container .survey-main-class {
        width: 100%;
        height: calc(100% - 100px);
    }

    .portrait #letter-sequence .aplha {
        padding-top: 20px;
    }

    .portrait .draggable-wrap,
    .portrait .source-preview,
    .portrait .matchingGamedragContainer .draggable-wrap,
    .portrait .matchingGamedragContainer .source-preview {
        min-height: 153px;
        padding: 5px;
        max-width: 300px;
        min-width: auto;
        max-height: none;
        height: 13vh;
        min-height: auto;
        width: 80%;
        margin: auto;
    }

    .portrait .btn-draggable {
        font-size: 10vw;
    }

}

@media (min-width: 560px) and (max-width: 1024px) and (orientation: landscape) {
    .landscape .survey-container .survey-main-class {
        width: 100%;
        height: calc(100% - 120px);
    }

    #letter-sequence .click-rating {
        padding-bottom: 0%;
    }

    .landscape .rdmap-wrap:has(#LoginButton),
    .landscape .rdmap-wrap:has(#dropdown-basic-button){
        right: -25px;
    }

    .landscape .common-profile-wrap{
        right: -10px;
        margin-bottom: 12px !important;
    }
}

@media only screen and (min-width:320px) and (max-width:1366px) and (orientation:portrait) {

    /* changed css for portrait devices  */
    #finished_interactivity {
        background-size: contain !important;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #000 !important;
    }

    /* end */
    .portrait #words_rhyiming #finished_interactivity {
        background-color: black !important;
    }

    .portrait #root>.segment {
        height: 100%;
    }
}


/* .bingoLogo {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.bingoLogo.abcgame_abcpickrecommendedgame{
margin: 14px auto;
background-position: center;
} */


/*SL3-6580....removed margin to set bingo image properly*/

.abcgame_bingoimage {
    margin: 0 !important;
}


/* bingo verticle images...*/

.abcgame_bingoimageV3 {
    height: 100%;
    width: 33%;
}

.abcgame_bingoimageV4 {
    height: 100%;
    width: 25%;
}

.abcgame_bingoimageV5 {
    height: 100%;
    width: 20%;
}


/* bingo horizontal images...*/

.abcgame_bingoimageH3 {
    height: 33%;
    width: 100%;
}

.abcgame_bingoimageH4 {
    height: 25%;
    width: 100%;
}

.abcgame_bingoimageH5 {
    height: 20%;
    width: 100%;
}


/* bingo diagonal images...use 100% width, height...since they are square 600x600*/

.abcgame_bingoimageRL3,
.abcgame_bingoimageRL4,
.abcgame_bingoimageRL5,
.abcgame_bingoimageLR3,
.abcgame_bingoimageLR4,
.abcgame_bingoimageLR5 {
    width: 100%;
    height: 100%;
}


/*End sentence pick Interactivity*/


/*start Css WordPick Interactivity*/

.picture-pick .offset-margin-auto {
    float: left;
    width: 100%;
}

.word-string {
    display: flex;
    justify-content: center;
    width: 100%;
}

.sentence-pick-rightside img {
    border: 2px solid #3a3a3a;
    width: 80%;
}


/* changed at 8 november 2019 */


/* .sentence-pick-rightside { */


/* padding: 15px; */


/* } */

.sentence-pick-rightside {
    padding: 15px;
    overflow: hidden;
    height: 450px;
    display: flex;
    justify-content: center;
    align-content: center;
}

.word-string h4 {
    list-style: none;
    font-weight: 600;
    border: 1px solid #afafaf;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 4px 65px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
}

.text-field {
    display: flex;
    align-items: center;
    border-radius: 0px;
    width: auto;
    height: 40px;
    border: 1px solid #f9f9f9;
    box-shadow: 0px 6px 6px -6px rgb(0 0 0 / 57%);
    text-align: center;
    font-size: 16px;
    justify-content: center;
    font-weight: 600;
}


/*End Css WordPick Interactivity*/


/*start css picture-pick-interactivity*/

.word-pick.picture-pick.sentence-pickInteractivity-wrap h4 {
    margin-bottom: 20px;
}

.offset-margin-auto .word-string h4 {
    margin-top: 50px;
}


/*end css picture-pick-interactivity*/


/** Flip Cards **/

.card {
    transition: transform 2s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.front,
.back {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

.front {
    border: 2px solid black;
    background: url("https://placehold.it/250x250");
}

.back {
    border: 2px solid black;
    background: url("https://placehold.it/100x100");
    transform: rotateY(180deg);
}


/*start-contraction-build-css*/

.interactivity-wrap-03 {
    padding: 20px 0;
}

.interactivity-flip .opposite_component .repeat_button_audio,
#flashCardTurnOver .opposite_component .repeat_button_audio {
    visibility: hidden;
}

.billboard_stars .bullets {
    margin: 0 5px;
    color: #DCDCDC;
}

.contraction-heading h3 {
    font-weight: 600;
    border: 1px solid #afafaf;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 4px 65px;
    background-color: #f9f9f9;
    display: inline-block;
    align-items: center;
}

.contraction-card {
    margin: 10px 0;
    width: 100%;
    float: left;
}

.hintbox .Contraction-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.portrait .apples_bg .hintbox {
    width: 33.33%;
}

.portrait .Contraction-wrap>div {
    font-size: 40px;
}

.Contraction-wrap img {
    position: relative;
    width: 60%;
    cursor: pointer;
}

.Contraction-wrap>div {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    top: 10px;
    left: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.65);
}

.interactivity-wrap-03 .w50 {
    width: 50%;
    margin: auto;
}

.interactivity-wrap-03 .w25 {
    width: 25%;
    margin: 30px auto 10px auto;
}

.contraction-string h3 {
    font-size: 40px;
    font-weight: bold;
    text-shadow: 0px 2px 0px rgba(255, 255, 255, 1);
}


/******************flip-letter***************/

#interactivity_div {
    width: 100% !important;
}

.landscape .gameParentDiv,
.landscape .interactivityParentDiv,
.landscape .ebookParentDiv {
    margin: 0;
}

/* .landscape .contentfull.gameParentDiv,
.landscape .contentfull.interactivityfullScreen,
.landscape .contentfull.ebookParentDiv {
    margin: 0px 0 69px 0;
} */

#recordingIframe {
    height: 100dvh;
    padding-top: 0px;
}

#recordingIframe a.sommer-logo,
#recordingIframe a.sommer-logo:hover,
#recordingIframe a.sommer-logo:active,
#recordingIframe a.sommer-logo:focus-within {
    color: transparent !important;
    box-shadow: none;
    text-decoration: none;
    outline: none;
    outline-offset: 0;
}

.landscape #recordingIframe iframe#recordingEreader {
    padding: 25px 0 25px 0;
    max-height: calc(100dvh - 150px);
}

#recordingIframe .common-profile-wrap.ms-2 {
    margin-top: 0;
}


/* added max width property to adjustment fort 5 to 6 card in row */

.flip-divider {
    width: 20%;
    margin: 0 auto;
    text-align: center;
    float: left;
    padding: 0;
    max-width: 20%;
}

.mainFlashcard_flip .cardflipfront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}


/*changed 1s to 1.3s to fix inverted word for flash card turnover interactivity.*/

.mainFlashcard_flip .flipTemp {
    backface-visibility: hidden;
    -webkit-transition: all 1.3s;
    -ms-transition: all 1.3s;
    transition: all 1.3s;
}

.mainFlashcard_flip .cardUp {
    position: absolute;
    margin: 0;
    font-family: Poppins;
    font-weight: bold;
    outline: 0;
    border: 10px solid #ffffff38;
    border-radius: 20px;
    z-index: 99;
}

.mainFlashcard_flip .flip-card-txt {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
}

.mainFlashcard_flip .cell-space .selected {
    border-color: #00a150;
}

#interactivity_div .media_box .image_box.selected {
    border: 3px solid #00a150 !important;
}

.mainFlashcard_flip .testcard2_ff {
    background: #fff;
    background-repeat: no-repeat;
    font-size: 6vw;
    height: 100%;
    width: 100%;
    border: 10px solid #23408e;
    border-radius: 20px;
    cursor: pointer !important;
}

.hidden {
    display: none !important;
}

.shown {
    display: block !important;
}

.content-pagination .left-icon {
    right: 40px;
}

.content-pagination .left-icon .fa-arrow-alt-circle-left {
    margin-left: 0px !important;
    margin-right: 15px;
}

.content-pagination .funIcon {
    margin-right: 15px;
    margin-left: 0 !important;
}


/* To display volume and mute volume icon in footer */

.content-pagination li.pager-control button.volume-ctrl md-icon.volume {
    background: #ffffff url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/volume.png) center center no-repeat !important;
}

.content-pagination li.pager-control button.volume-ctrl md-icon.mute {
    background: #ffcc00 url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/mute.png) center center no-repeat !important;
}

.phonicsMain div#wrapper {
    overflow-y: visible;
}

.icon-home i,
.icon-menu i {
    line-height: 24px;
}

.phonicsMain * .ui.segment {
    overflow: hidden;
}

.connectthedots-game-container.connectthedots-start-game-container.connectthedots-main-wrapper {
    max-width: 100%;
}

.mainFlashcard_flip,
#dragContainer,
.clicksoundinteractivity {
    height: 100%;
    overflow-y: auto;
}

.__react_component_tooltip.place-bottom {
    text-transform: capitalize !important;
}

.gameContainer #optionalScreen .abcgame_optgamethumbnail {
    background-size: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
}

.gameContainer #optionalScreen .optionalGameLogo {
    width: 135px;
    height: 97px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.gameContainer #optionalScreen .optionalGameLogo.gameLogo_3 {
    width: 168px;
    height: 102px;
}

.gameContainer #optionalScreen .optionalGameLogo.gameLogo_2 {
    width: 225px;
    height: 97px;
}

.gameContainer #optionalScreen .abcgame_optgamethumbnail a {
    width: 100%;
}

.gameContainer .abcgame_abcpickoptionalgamelist .abcgame_optgamethumbnail button {
    position: static;
}

#poptheballoons .leftSideBar img,
#abcsoundmatch .leftSideBar img,
#letsgofishing .leftSideBar img,
.shoottherocketsContainer .shootpg6contain .leftSideBar img {
    width: 100%;
    max-width: 90% !important;
}


/* #poptheballoons .rightSideBar .repeatIcon,
#abcsoundmatch .rightSideBar .repeatIcon,
#letsgofishing .rightSideBar .repeatIcon {
    display: none !important;
} */


/*Css for instructions pop for pop the balloon*/

.popBIclose.btn-closebtn {
    top: 11px;
    right: -9px;
}

.instructstep {
    padding: 29px 55px 0 55px;
    line-height: 33px;
    font-size: 14px;
}

.poptheballoonMainBackground .startshoot_go_pg1,
.shootrocketPage4 .startshoot_go_pg1 {
    text-align: center;
    top: auto !important;
    margin: 0 auto;
    width: 100%;
    left: 0;
    right: auto;
    bottom: 2%;
    position: relative;
    left: auto !important;
}

.poptheballoonMainBackground .popgameplaylvlbtnimg,
.shootrocketPage4 .rocketgameplaylvlbtnimg {
    background-image: none !important;
    background-repeat: no-repeat;
    border: none;
    padding-bottom: 10px;
    color: #fff;
    width: 90%;
    height: auto;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 36px;
    padding: 0;
    margin: auto;
}

#levelEasy {
    background-color: #b533e1;
    box-shadow: 0px 3px 2px 3px rgb(54, 8, 66);
}

button#levelMedium {
    background-color: #009ce1;
    box-shadow: 0px 3px 2px 3px rgb(0, 74, 109);
}

button#levelHard {
    background-color: #00b420;
    box-shadow: 0px 3px 2px 3px rgb(0, 97, 11);
}

.popBalloonRecommendedgamewrap {
    background-image: none !important;
}

.popBalloonLogo {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamebglogo.png") !important;
}

.gameinstructpglayernxtbtnimg {
    text-align: center;
    margin: 0 auto;
    background-repeat: no-repeat;
    margin-top: 0%;
    background-size: contain;
}

.gameContainer .balloom_imagex {
    width: auto;
}

.popBalloonRecommendedgamewrap .helpinstruction,
.shootrocketPage4 .helpinstruction {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 20px !important;
    right: 20px !important;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer !important;
    /* z-index: 10; removed due to popup button appear on backdrop( with popup cross button) */
    z-index: 1;
}


/*
bug fixed: slow icon show border around the icon 
*/

.slow_sound {
    display: inline-block;
    /* background: #444a79; */
    border-radius: 30px;
    padding: 0;
    width: 45px;
    height: 45px;
    margin-left: 14px;
    /* border: 2px solid #7a7fb3; */
    cursor: pointer;
    vertical-align: middle;
    position: relative;
}

.showBg {
    position: absolute;
    height: 100%;
    width: 100%;
}

.sentenceSpan {
    background: white;
    padding: 0px 10px;
    border-radius: 5px;
    text-align: left !important;
    /* SL3-10104 - Phonics : Sentence justification: Make the sentences left justified (new changes 24 Mar 22) */
}


/*
bug fixed: slow icon show border around the icon , so inc. the width of it
*/

.slow_sound i.icon-turtle-slow {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/turtle_slow.png);
    width: 45px;
    height: 45px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.popBalloonRecommendedgamewrap .gameinstructionbtnimg {
    margin: 0;
    border: none;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer !important;
    /* z-index: 9; removed due to popup button appear on backdrop( with popup cross button) */
    z-index: 1;
}

.poptheballoonContainer,
.shootrocketPage4 .shootrocketContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.shootrocketPage4 {
    height: 100%;
}


/*End Css for instructions pop*/


/*Css for stars of pop the balloon*/

.pop_left_layer #gamestarsrating li {
    width: 46px;
    height: 45px;
    background-size: 100%;
}

#SightWordBlast #confettiCanvasWB {
    width: auto !important;
    height: auto;
    right: 0;
    margin: auto;
}

#SightWordBlast .abcgame_readycount img {
    width: 100% !important;
    height: 100%;
}

#SightWordBlast .abcgame_readycount p {
    height: 100%;
    width: 100%;
}

#SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
}


/*end Css for stars of pop the balloon*/


/* save the planet css */

#shootthestars #confettiCanvasWB {
    width: auto !important;
    height: auto;
    right: 0;
    margin: auto;
}

#shootthestars .abcgame_readycount img {
    width: 100% !important;
    height: 100%;
}

#shootthestars .abcgame_readycount p {
    height: 100%;
    width: 100%;
}

#shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
    border-radius: 0px;
    overflow: hidden;
    margin: auto;
}


/* end save the planet css */


/*Css for ABC Bingo*/

.gameContainer .abcgame_bingologo {
    margin: 0 auto;
    background-repeat: no-repeat;
    margin-top: 0%;
    background-size: contain;
    background-position: center;
}

.gameContainer .abcgame_bingohomebuttonswrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    height: auto;
}

div#abcBingoMainDiv .abcgame_bingomatrix {
    padding-top: 0;
    width: auto;
    background-color: #fb49a7;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 120px;
    padding: 13px 32px;
    font-size: 23px;
    font-weight: bold;
    background-image: none;
    box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.25);
    text-indent: 42px;
}

div#abcBingoMainDiv .abcgame_bingomatrix:focus {
    outline: none;
}

#abcBingoMainDiv .bingo-buttons:before {
    content: "";
    position: absolute;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_img.png);
    width: 21px;
    height: 21px;
    background-repeat: no-repeat;
    top: 50%;
    background-size: 100%;
    transform: translateY(-50%);
    left: 32px;
    cursor: pointer;
}

#abcBingoMainDiv .bingo-buttons>input,
#abcBingoMainDiv .bingo-buttons>input:focus,
#abcBingoMainDiv .bingo-buttons>input:hover {
    font-size: 16px !important;
}

/* added css for Phonics : Bingo : 4X4 icon is coming wrong (coming fine at cp.bayatree.com) 10466 */
#abcBingoMainDiv .abcgame_bingohomebuttons_4 .bingo-buttons::before {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/bingo-4x4-icon1.png);
    height: 26px;
    background-size: 26px;
    width: 26px;
    background-position: center;
}

/* end */
#abcBingoMainDiv .bingo-buttons {
    display: inline-block;
    position: relative;
}

#abcBingoMainDiv .abcgamebingo.abcgamebingo-secondpage.ng-scope {
    width: 100%;
}

#abcBingoMainDiv .gameContainer .abcgame_bingohomebuttonswrap {
    align-items: center;
    justify-content: center;
    display: flex;
}

#abcBingoMainDiv .abcgame_bingoflipcardcont {
    background: #fff;
    border-radius: 8px;
    padding: 6px 8px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    height: 100%;
}

#abcBingoMainDiv .abcgame_bingoflipcard {
    text-align: center;
    font-size: 40px;
    display: inline-block;
    cursor: pointer !important;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 10px;
    margin: 6px;
    overflow: hidden;
    float: left;
}


/* changed css for better view of text in abc bingo game  */

#abcBingoMainDiv .abcgame_bingoflipcard4 {
    font-size: 25px;
}

#abcBingoMainDiv .abcgame_bingoflipcard3 .abcgame_bingofront,
#abcBingoMainDiv .abcgame_bingoflipcard4 .abcgame_bingofront {
    white-space: break-spaces;
    padding: 0 3px;
    /* word-break: break-word; */
}


/* end  */

#abcBingoMainDiv .abcgame_correctEffectborder .abcgame_bingoflippedback {
    border: 5px solid #00b4ff !important;
}

#abcBingoMainDiv .abcgame_correctEffectborder {
    border: none;
}

.leftSideBar img {
    max-width: 100%;
}

.abcgamebingo-secondpage {
    display: flex;
    align-items: center;
    justify-content: center;
}

#abcBingoMainDiv .abcgame_bingoContainerrow {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phonicsMain .menuTabHeader li button {
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 0.1em;
}

.phonicsMain .menuTabHeader li button span {
    font-family: 'Poppins', sans-serif !important;
    padding: 0px !important;
    font-weight: 700;
}

#abcBingoMainDiv .abcgame_bingoi {
    width: 50px;
    height: 60px;
    position: absolute;
    top: 20px;
    right: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer !important;
    z-index: 9;
}

.restartIncompleteAnim {
    left: 0 !important;
    right: 0 !important;
    margin: auto;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-self: center;
    flex-direction: column;
}

#interactivity_div .flipcardInteractivity .front img {
    height: auto !important;
    max-height: 100%;
}

#interactivity_div .flipcardInteractivity .audio-text .icon-volume {
    margin: 0 !important;
}

.icon-volume {
    width: 45px;
    height: 45px;
    min-height: 45px;
    min-width: 45px;
    background-size: contain !important;
}

.carousel-parent .text-top i.icon-volume {
    margin-left: 10px;
}

#interactivity_div .flipcardInteractivity .audio-text .align-middle {
    justify-content: center;
}


/* sight the blast agem css added by arjun @ 20/05/2020 */

#SightWordBlast .game_div,
#bowlingGame .game_div {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#SightWordBlast iframe,
#bowlingGame iframe {
    width: 100%;
    border: none;
    height: 100%;
    overflow: hidden;
}

/* #SightWordBlast iframe,
#bowlingGame iframe {
    height: 99.7% !important;
} */

#onOffSoundBtn {
    position: absolute;
    left: 0%;
    bottom: 15px;
    z-index: 9
}

#onOffSoundBtn img {
    width: 50% !important;
    height: 50% !important;
}

#onOffSoundBtn span {
    color: white
}


/* end */

#contactTypeDiv #billBoard {
    width: 100%;
    height: 100%;
    background-color: black;
}

.carousalFlipCard #SightWordBlast .restartIncompleteAnim {
    left: 0;
    right: 0;
    margin: auto;
}

#SightWordBlast .bsw_blocks {
    width: 100%;
}

.gameContainer input.abcgame_scoredetailbtn,
.gameContainer input.abcgame_scoredetailswrapbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #a5a5a5;
    border-radius: 35px;
    width: auto;
    padding: 10px 40px;
    font-size: 24px;
    margin: 20px 0;
    background-image: none !important;
}


/* syllable pick Game new css added by arjun  @ 19/02/2020 */

#syllablepick #syllable_contentbox {
    width: 60%;
    flex-direction: column;
    display: flex;
    /* height: 100% !important; */
    align-items: center;
    justify-content: center;
}

#syllablepick .circle_highlight::before {
    content: "\f005";
    color: #ba6307;
    -webkit-text-stroke: #ba6307;
}

#syllablepick .circle_highlight {
    background: none;
}

#syllablepick .circle_green::before {
    content: "\f005";
    color: green;
    -webkit-text-stroke: green;
}

#syllablepick .circle_green {
    background: none;
}

#syllablepick .circle_red::before {
    content: "\f005";
    color: red;
    -webkit-text-stroke: red;
}

#syllablepick .circle_red {
    background: none;
}


/* syllablepick css added by arjun sharma @27-08-2020 */

#syllablepick {
    background-image: url(../images/syllable-pick_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
}

#syllablepick_rightsidebar .infoIcon {
    border: none;
    height: 44px;
    width: 44px;
    background: #ffd942;
    border-radius: 50%;
    display: block;
    padding: 4px;
}

#syllablepick_rightsidebar .infoIcon i {
    color: #000;
}

.row_design {
    width: 100%;
    display: flex;
}

#syllablepick_lefttsidebar .curve_text_div {
    background-color: #ffd942;
    padding: 0;
    border-radius: 0px 55px 55px 0px;
    border-bottom: 8px solid #ba9e2f;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#syllablepick .syllablepick-heading.Syllable_stars {
    display: grid;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}

#syllablepick .interactivityDiv_syllablepick {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    z-index: 9;
}

.syllablepick-heading.Syllable_stars .stars_interactivity {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#syllablepick .infoIcon i {
    font-size: 37px;
}

.video-info-text {
    font-size: 10px;
    text-transform: uppercase;
}

#syllablepick .vowels-centerlized-wrapper {
    height: 85%;
    margin-bottom: 10px;
}

#syllablepick_lefttsidebar .curve_text_div h2 {
    padding: 0;
    font-size: 50px;
    white-space: normal;
    word-break: break-word;
    letter-spacing: -0.5px;
    margin: 0px !important;
    color: #000;
    text-shadow: 2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 0px 0 #fff;
    width: 100%;
}

#syllablepick_rightsidebar .circle_couting {
    width: 85%;
}

#syllablepick_rightsidebar .circle_couting ul {
    display: inline-block;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

#syllablepick_rightsidebar .circle_couting ul li {
    width: 50%;
    float: left;
    list-style-type: none;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    pointer-events: none;
}

#syllablepick_rightsidebar .circle_couting ul li>div {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: #ffd942;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 8px solid #ba9e2f;
    font-size: 45px;
    text-shadow: 2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 0px 0 #fff;
    pointer-events: all;
}

#syllablepick_rightsidebar .circle_couting ul li.disabled>div {
    pointer-events: none;
}

#syllablepick .vowels-game-container {
    padding: 0px !important;
}

#syllablepick_lefttsidebar {
    padding-left: 0px;
}


/* end? */

#syllablepick .syllable_div {
    width: 100%;
    flex-direction: column;
    display: flex;
    height: 88%;
    align-items: center;
    justify-content: center;
    /* background: #fff; */
    max-height: 600px !important;
}

#syllablepick .syllable_div .syllable_img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /* commented to remove white background from devics */
    object-fit: contain;
    cursor: pointer;
    /* background-color: #fff; */
}

#syllablepick .syllablepick_game .syllable_img {
    height: auto !important;
    /* changed css for border issue on count the syllablus 2>5>20>1 */
    width: auto !important;
}

#syllablepick .flexible-listing {
    padding: 0px;
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 15px 0px 0px 0px;
}

#syllablepick .flexible-listing li {
    padding: 0px 20px;
    list-style-type: none;
    display: flex;
    width: 33%;
    border: 2px solid #444;
    margin: 0 5px;
    font-size: 5vmin;
    cursor: pointer;
    justify-content: center;
}


/* end under progress */


/*Bill board light*/

#billBoardLight .board_String {
    height: auto !important;
    max-width: 100% !important;
    width: 95%;
    padding: 10px 20px !important;
    bottom: 50px !important;
    position: absolute;
}

#billBoardLight .board_String .lesson-sentence {
    background: #fff;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
}

#billBoardLight .flash-card-sq5 {
    height: 100%;
    min-height: inherit !important;
    width: 85% !important;
    border-radius: 0px;
    border-width: 10px;
}

#billBoardLight .flash-card-cont .demotrumpCard {
    width: 100%;
}

#billBoardLight .flash-card-cont .demotrumpCard img {
    width: 100%;
    object-fit: contain;
}

#billBoardLight h1 {
    font-size: 9vmin;
    font-weight: 700;
}


/*end*/


/* shoot the stars */

#shootthestars #sts_game_div {
    width: 100%;
    height: 100%;
}

#shootthestars #sts_game_div>iframe {
    height: 100%;
    width: 100%;
    border: none;
    overflow: hidden;
}


/* end */

.gameContainer input.abcgame_scoredetailbtn.abcgame_bingoplayagain {
    background-color: #8a25c3;
}

.gameContainer input.abcgame_scoredetailbtn.abcgame_bingodetail,
.gameContainer input.abcgame_scoredetailswrapbtn {
    background-color: #4b28c3;
}

.gameContainer .abcgame_scoredetailsbtnwrap1 {
    display: flex;
    justify-content: space-evenly;
    height: auto;
}

.gameContainer .abcgame_closescorebingo {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer !important;
    z-index: 111;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
}

.connectthedots-game-text {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    margin: auto;
    top: 15% !important;
    width: 80%;
}

#wordLadder .heading {
    margin: 0;
    width: 100%;
}

#wordLadder .heading h3 {
    font-size: 40px;
    color: red;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.gameContainer .abcgame_scoredetailsbtnwrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gameContainer input.abcgame_scoredetailswrapbtn {
    left: auto;
    right: auto;
    height: auto;
}

.gameContainer .abcgame_bingooverlay .abcgame_bingoScoreboard {
    top: 0;
    bottom: 0;
    margin: auto;
}

.gameContainer .abcgame_bingoscorewordno {
    height: auto;
    margin-top: 0;
}

.gameContainer canvas#confettiCanvas {
    left: 0;
    right: 0;
}

.gameContainer .abcgame_bingoscoredetailbox {
    padding: 30px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.gameContainer .abcgame_bingooverlay {
    overflow: hidden;
}

.gameContainer .abcgame_bingooverlay#showinstruct,
.gameContainer #instruction_div {
    position: fixed;
}

.gameContainer .abcgame_detailscorebingowrap {
    /* height: 53%; */
    margin-bottom: 0;
}


/*End Css for ABC Bingo*/

.abcgame_bingoContainerrow .abcgame_abcpickoptionalgamelist.ng-scope {
    flex-basis: 33%;
}

.abcgame_bingoContainerrow .abcgame_abcpickoptionalgametable {
    justify-content: center;
}


/* css for Toastify */

.Toastify .Toastify__toast--success {
    background: #3498db;
    opacity: 1 !important;
    font-size: 18px;
    letter-spacing: 0.5px;
    border-radius: 5px;
    color: #fff;
}

.Toastify .Toastify__toast--info {
    background: #f66b00;
    opacity: 1 !important;
    font-size: 18px;
    letter-spacing: 0.5px;
    border-radius: 5px;
    color: #fff;
}

.Toastify .Toastify__toast--warning {
    background: red;
    opacity: 1 !important;
    font-size: 18px;
    letter-spacing: 0.5px;
    border-radius: 5px;
    color: #fff;
}


/* End css for Toastify */


/* start css for lesson3 Quiz */

.CompanionReaderQuiz {
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow-y: auto;
    /* to fix content was getting hide in a few devices */
}

.CompanionReaderQuiz-wrap {
    width: 65%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;
}

.Quiz-inner-wrapper {
    position: relative;
    width: 100%;
}

.CompanionReaderQuiz img {
    width: 100%;
    height: 100%;
}


/* added on 04-02-2020*/

.bgc_game_img {
    position: absolute;
    width: 25%;
    height: 60%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    right: -6%;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgc_game_img img {
    object-fit: contain;
    width: 90%;
    margin: auto;
    height: 90% !important;
}

.height100 {
    height: 100%;
}

.quizz_reader .height100.layout-align-center-center {
    display: flex;
    align-items: center;
    padding: 0;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.CompanionReaderQuiz .Questioncount {
    padding: 7px 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: flex;
    font-weight: normal;
    width: 18%;
    position: absolute;
    border-radius: 13px 13px 0 0;
    flex-wrap: wrap;
    background: #29abe2;
    align-items: center;
    justify-content: center;
    left: 0;
    top: -37px;
    right: 0;
    margin: auto;
}

.CompanionReaderQuiz .Questioncount .Question:before {
    content: '';
    position: absolute;
    border-top: 36px solid transparent;
    border-left: 0px solid transparent;
    border-right: 36px solid #29abe2;
    right: 95%;
    top: 0;
    bottom: 0;
}

.CompanionReaderQuiz .Questioncount .Question:after {
    content: '';
    position: absolute;
    border-top: 36px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 36px solid #29abe2;
    left: 95%;
    top: 0;
    bottom: 0;
}

.CompanionReaderQuiz .Questioncount .Question {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 21px;
}

span.question-count {
    margin-left: 5px;
}

.CompanionReaderQuiz .QuestionCnt .question-count {
    height: 28px;
    border-radius: 100%;
    border: 2px solid #fff;
    margin-right: 15px;
    background: #ffc300;
    font-size: 16px;
    align-items: center;
    min-width: 28px;
    justify-content: center;
    font-weight: normal;
    padding: 0;
    display: flex;
}

.CompanionReaderQuiz .Questioncount .count.divider {
    justify-content: flex-start;
    position: relative;
    margin: 0 20px 0 0;
}

.CompanionReaderQuiz .Questioncount .count {
    font-weight: 100;
    width: 32%;
    font-size: 22px;
    /* Reduced font size as it was creating issue in quizes having more than 9 questions */
    margin: 0 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Advance Calibri';
}

.CompanionReaderQuiz .Questioncount .divider:before {
    position: absolute;
    content: '';
    width: 52px;
    height: 2px;
    background-color: #fff;
    left: 0;
    right: 0;
    margin: auto;
    top: auto;
    bottom: -1px;
    transform: translate(-10%) rotate(121deg);
}

.CompanionReaderQuiz .QuestionCnt {
    margin: auto;
    font-size: 30px;
    color: #333;
    font-family: 'Advance Calibri';
}

.CompanionReaderQuiz .speaker img {
    object-fit: contain;
    background-color: transparent;
    border-radius: 0;
    width: 80%;
    height: 80%;
    padding: 6px;
}

.CompanionReaderQuiz label.lableQuiz input {
    display: none;
}


/* SL3-4769: Phonics : Modify Quiz answer options color to improve readability and to meet WCAG 2.0 accessibility guidelines. */

.CompanionReaderQuiz .options label.lableQuiz {
    font-weight: normal;
    margin: 0;
    display: flex;
    align-items: center;
    color: #313131;
    font-size: 20px;
    cursor: pointer;
    width: 100%;
}

.CompanionReaderQuiz .options.wrong_clicked label.lableQuiz,
.CompanionReaderQuiz .options.correct_clicked label.lableQuiz {
    opacity: 1;
}

.CompanionReaderQuiz .options.correct_clicked button.optionChoice {
    background: #00ae70;
}

.CompanionReaderQuiz .options.wrong_clicked button.optionChoice {
    background: #ff2c2c;
}

.CompanionReaderQuiz button.optionChoice {
    height: 28px;
    border-radius: 100%;
    border: 2px solid #fff;
    margin-right: 15px;
    background: #ffc300;
    font-size: 16px;
    align-items: center;
    min-width: 28px;
    justify-content: center;
    font-weight: normal;
    padding: 0;
}

.CompanionReaderQuiz p {
    font-family: '' Poppins', sans-serif';
    font-weight: normal;
}


/* .CompanionReaderQuiz .options {
    margin-bottom: 20px;
} */


/* removed due to change in ui on 31-1-2020 */

.CompanionReaderQuiz .option-wrap {
    margin-top: 30px;
    width: 100%;
}

.CompanionReaderQuiz .QuestionCnt span {
    font-family: 'Poppins', sans-serif;
}

.CompanionReaderQuiz .QuestionCnt span.ng-binding {
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    background-color: #fff;
    display: flex;
    padding: 15px 25px 15px 25px;
    border-radius: 100px;
    font-size: 21px;
    position: relative;
}

.CompanionReaderQuiz .QuestionCnt span.ng-binding:before {
    background-color: #68c5e8;
    content: '';
    width: 100%;
    position: absolute;
    height: 30px;
    top: 0;
    left: 99%;
    right: 0;
    z-index: -1;
    bottom: 0;
    margin: auto;
}

.CompanionReaderQuiz .QuestionCnt span.ng-binding:after {
    background-color: #68c5e8;
    content: '';
    width: 100%;
    position: absolute;
    height: 30px;
    top: 0;
    right: 99%;
    z-index: -1;
    bottom: 0;
    margin: auto;
}

.CompanionReaderQuiz .QuestionCnt #quiz_speaker {
    cursor: pointer;
}

.CompanionReaderQuiz .options {
    margin-bottom: 30px;
    width: 47%;
    background-color: #ffff;
    padding: 10px 15px 10px 25px;
    border-radius: 100px;
    font-size: 21px;
    position: relative;
}

.CompanionReaderQuiz .option-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.CompanionReaderQuiz .controllQuiz button {
    outline: 0;
    border: 0;
    margin: 27px;
}

.CompanionReaderQuiz .btnPrev {
    position: relative;
    width: 140px;
    height: 57px;
    text-align: center;
    font-size: 2.5vh;
    color: #fff;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/tb2_previous.png) no-repeat;
    background-size: contain;
    padding: 0;
    background-position: center;
}

.CompanionReaderQuiz .btnPrev .material-icons {
    margin-left: 15px;
}

.CompanionReaderQuiz .btnNxt .material-icons {
    margin-left: -18px;
}

.CompanionReaderQuiz .controllQuiz button .material-icons {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    min-height: 0px;
}

.CompanionReaderQuiz .btnNxt {
    position: relative;
    width: 140px;
    height: 60px;
    text-align: center;
    font-size: 2.5vh;
    color: #fff;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/tb2_next.png) no-repeat;
    background-size: contain;
    background-position: center;
    padding: 0;
}

.controllQuiz {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 100%;
    z-index: 9;
    right: 0;
    left: 0;
}

.CompanionReaderQuiz .disabled {
    opacity: 0.5;
}

.CompanionReaderQuiz .speaker {
    position: absolute;
    z-index: 99;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    bottom: 0;
    top: 0;
    margin: auto;
    right: -10px;
}

.CompanionReaderQuiz .correctFnt,
.CompanionReaderQuiz .wrongFnt {
    position: absolute;
    z-index: 99;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    bottom: 0;
    top: 0;
    margin: auto;
    right: -10px;
}

.CompanionReaderQuiz .speaker {
    top: 0;
    border: none;
    background-color: #2071a1;
    box-shadow: 2px 8px 12px 4px rgb(0 176 114 / 9%);
    bottom: 0;
    margin: auto;
    right: -13px;
}

.CompanionReaderQuiz .options .wrong {
    display: flex;
}

.CompanionReaderQuiz .correctFnt {
    background: linear-gradient(90deg, rgba(0, 217, 138, 1) 0%, rgba(0, 173, 112, 1) 100%)
}

.CompanionReaderQuiz .wrongFnt {
    background-color: #ef1401;
}

.CompanionReaderQuiz .correctFnt img,
.CompanionReaderQuiz .wrongFnt img {
    object-fit: contain;
    background-color: #fff;
    border-radius: 100%;
    width: 80%;
    height: 80%;
    padding: 6px;
}


/* End  css for lesson3 Quiz */


/*interactivtiy drag css*/

.drag-container {
    margin-bottom: 20px;
    height: 100%;
}

.drag-drop-parent.layout-align-center-center.layout-row {
    height: calc(100% - 104px);
}

.drag-container .layout-align-space-around-center {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: 48%;
    margin-bottom: 6px;
}


.draggable-wrap,
.source-preview {
    padding: 20px;
    width: 20%;
    height: 34vh;
    min-height: 153px;
}

.matchingGamedragContainer .draggable-wrap,
.matchingGamedragContainer .source-preview {
    width: 16%;
}

.drag-container .draggable-wrap .btn-droppable,
.drag-container .draggable-wrap .btn-draggable {
    width: 100%;
    height: 100%;
    max-height: none;
}

.drag-container .draggable-wrap .space-padding {
    margin: 0;
    width: 100%;
    height: 100%;
}


/* end interactivtiy drag css*/


/*Login pop css*/

#appBody .LoginModal.fade.in {
    opacity: 1;
}

.phonic-login-menu #dropdown-basic-button:before {
    color: #fff !important;
}

.header_setting_btn .dropdown-menu,
.header_setting_btn .dropdown-menu.show {
    top: 33px !important;
    right: -15px !important;
}

.portrait .header_setting_btn .dropdown-menu,
.portrait .header_setting_btn .dropdown-menu.show {
    right: 0px !important;
}

.phonicsMain.modal-open .modal-backdrop.fade {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.phonicsMain.modal-open .modal-footer {
    border: none;
}

#appBody .LoginModal .modal-header {
    padding: 0;
    border-bottom: none;
    position: absolute;
    right: 20px;
    top: 8px;
    background-color: transparent;
}

.Phonics-homepage-wraper button.header_setting_btn.btn.btn-default:focus {
    box-shadow: none;
}

.login-form label {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, 'Poppins', sans-serif, sans-serif;
}

button.login-button.btn.btn-default {
    color: #fff !important;
    font-size: 16px;
    padding: 7px 38px;
    border-radius: 5px;
    background: #41cdf1 !important;
    text-transform: inherit;
    line-height: 22px;
    border: none;
    margin-top: 25px;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
}

.Phonics-homepage-wraper .common-profile-section .open ul.dropdown-menu {
    left: auto;
}

.Phonics-homepage-wraper .open ul.dropdown-menu {
    display: block;
    position: absolute;
    z-index: 999;
    background: #fff;
    right: 0;
    left: -60px;
    color: #000;
    top: 39px;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    font-size: 14px;
    min-width: 160px;
}

.Phonics-homepage-wraper .open ul.dropdown-menu li a:hover,
.Phonics-homepage-wraper .show .dropdown-menu a:hover {
    color: #fff;
    font-weight: bold;
    background: #7dacd1;
}

.Phonics-homepage-wraper .open ul.dropdown-menu li a,
.Phonics-homepage-wraper .show .dropdown-menu a {
    padding: 15px 16px 10px;
    color: #000;
    display: inline-block;
    width: 100%;
}

.Phonics-homepage-wraper .open ul.dropdown-menu li a:first-child,
.Phonics-homepage-wraper .show .dropdown-menu a:first-child,
.Phonics-homepage-wraper .open ul.dropdown-menu li:first-child a,
.Phonics-homepage-wraper .show .dropdown-menu li:first-child a{
    border-top: 1px solid #000;
}

.connectthedots-star-rating ul li {
    background: none !important;
}


/*End Login pop css*/
/* for fullscreen */
/* html.landscape header.headerfull+#mainBodyContainer.video-container {
    height: 100% !important;
} */

/* to disable primary button hover effect on recording list playlist menu in footer */
.footer-menu .icon-menu-bar .btn-primary:hover,
.footer-menu .icon-menu-bar .btn-primary:focus {
    background-color: transparent;
    border-color: transparent;
}

/* Responsive style for menu */

@media (max-width: 1280px) and (min-width: 768px) and (orientation: landscape) {
    .abcgame_sm_instruction_header {
        margin-bottom: 1%;
    }

    .abcgame_sm_closeinstruction {
        top: 17%;
        height: 9%;
    }
}

@media (max-width: 1140px) {
    .modal .modal-dialog {
        transform: scale(0.85) !important;
        -webkit-transform: scale(0.85) !important;
        -moz-transform: scale(0.85);
        -o-transform: scale(0.85);
        -ms-transform: scale(0.85);
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .landscape .stageChild {
        margin: 0px 2px 0px 2px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 10px;
    }

    .landscape .phonicsMain .ic-text {
        font-size: 11px;
    }

    .landscape .phonics_popup .modal_content_wrapper md-icon {
        background-color: transparent;
        border: none;
        width: 35px;
        height: 35px;
        background-size: 35px;
    }

    #wordLadder .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
        margin: 30px 0px;
    }

    .connectthedots-container .controlButtons ul li {
        width: calc(40% - 6px) !important;
    }

    /*   Fix SL3-10011: Footer in Android overlaping search 
    .content-pagination {
        z-index: 999;
    }*/
    .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
        align-items: center;
        display: flex;
    }

    #wordLadder.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column.contentBox .vowels-bg {
        height: 85% !important;
        width: 85% !important;
        padding: 20px 0px;
    }
}

@media (min-width: 940px) and (max-width: 1024px) and (orientation: landscape) {
    .sentence-pickInteractivity-wrap {
        margin-top: 76px;
    }

    #wordLadder.vowels-container .vowels-bg .vowels-img {
        width: 90%;
        height: 88px !important;
        margin: 15px auto !important;
    }

    #wordLadder .heading h3 {
        font-size: 25px !important;
    }

    .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
        align-items: center;
        display: flex;
    }

    #wordLadder.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        height: auto !important;
        padding: 20px 0px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1100px) {
    .landscape #interactivity_div #billBoard .boardString {
        font-size: 13.5px !important;
        max-width: 47% !important;
        padding: 0px 16px !important;
        line-height: 33px !important;
    }
}

@media (max-width: 940px) and (min-width: 650px) and (orientation: landscape) {
    .sentence-pickInteractivity-wrap {
        margin-top: 76px;
    }
}

@media (max-width: 1024px) and (min-width: 940px) {
    .landscape .sentence-pickInteractivity-wrap {
        margin-top: 30px;
        height: auto !important;
    }

    .flashcard-turnOver {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
    }

    .flashcardContainr {
        height: 100%;
    }

    .portrait .interactivityParentDiv {
        margin: 104px 0 65px 0;
    }

    /* .portrait div#lesson_ifr.interactivityfullScreen {
        margin: 50px 0 65px 0;
    } */

    .flashcardId .singleRowCard .flash-card-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .flashcardId .flip-divider {
        width: 50%;
        max-width: 50%;
    }
}

@media only screen and (min-height:245px) and (max-height:395px) and (orientation:landscape) {
    .landscape #phonicsGlobalSeachBar .letters-text-wrap .add-search-dd {
        height: 165px !important;
    }
}

@media (max-width: 1366px) {
    .globalSearchOverlay header::before {
        display: none;
    }

    .landscape #recordingIframe iframe#recordingEreader {
        max-height: calc(100dvh - 138px);
    }

    .globalSearchOverlay {
        overflow: hidden;
    }

    /*-------------hid lesson name on devices----------*/
    .portrait header .connect-dot-bg {
        display: none;
    }

    /*-------------end css hid lesson name on devices----------*/
    .globalSearchOverlay #interactivity_div::before,
    .globalSearchOverlay #phonicsFooter::before {
        position: absolute;
        height: 100%;
        width: 100%;
        background: rgb(0 0 0 / 50%);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        z-index: 999;
    }

    .globalSearchOverlay #phonicsHeader::after {
        content: "";
        background: rgb(0 0 0 / 50%);
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
        position: absolute;
    }

    .globalSearchOverlay #phonicsHeader .h-left {
        z-index: -1;
    }

    .globalSearchOverlay header .rdmap-wrap {
        pointer-events: none;
        z-index: -1;
        opacity: 0.4;
    }

    .portrait .globalSearchOverlay #phonicsHeader::after {
        z-index: 1 !important;
    }

    .portrait .globalSearchOverlay #phonicsHeader .h-left {
        z-index: 1 !important;
    }

    .portrait .globalSearchOverlay header .h-right {
        z-index: unset !important;
    }

    .landscape .globalSearchOverlay #phonicsHeader::after {
        display: none !important;
    }

    .landscape .globalSearchOverlay #phonicsHeader::before {
        display: block !important;
        position: absolute;
    }

    .landscape .globalSearchOverlay #phonicsHeader .h-left {
        z-index: -1 !important;
    }
    /*.landscape .globalSearchOverlay header .h-right {
        z-index: 99 !important;
    }*/
    .portrait #lesson_iframe #ereader {
        height: calc(94% - 35px);
        margin-bottom: 20px;
    }

    .landscape #root>.segment {
        height: 100%;
    }

    .phonicsMain .ttheader .nav-bar-btn {
        margin-top: 0 !important;
    }

    /*css sentence-pickInteractivity*/
    .portrait .sentence-pickInteractivity-wrap {
        margin-top: 70px;
    }

    /*Endcss sentence-pickInteractivity*/
}

@media (min-width: 992px) {

    .sentence-pickInteractivity-wrap,
    .interactivity-wrap-03 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
    }
     
}

@media (max-width: 991px) {
    .words_rhyiming {
        height: auto !important;
    }

    .CompanionReaderQuiz .Questioncount {
        width: 30%;
    }

    .mainFlashcard_flip .testcard1_ff {
        font-size: 18vmin;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 36vh;
        width: 90%;
    }

    .contraction-card {
        margin: 10px 0 0 0;
    }

    .landscape .contraction-card {
        margin: 5px 0 0 0;
    }

    .Contraction-wrap {
        margin-bottom: 30px;
    }

    .portrait .gameParentDiv {
        margin: 0;
    }

    .portrait .recommendedEbookBg #ereader_images {
        height: auto !important;
    }
  
               
}

@media (max-width: 900px) {
    .landscape #strocket-first {
        min-height: 100% !important;
    }

    .modal .modal-dialog {
        margin-left: 20px;
    }

    .portrait #syllablepick_rightsidebar .circle_couting {
        width: 85%;
    }

    .portrait #syllablepick .right_column {
        top: auto;
        position: absolute;
        right: 18px;
    }

    .flip-divider {
        width: 33.333%;
        margin: 15px auto;
    }

    .mainFlashcard_flip .flash-card-row {
        display: inline-block;
        margin-top: 20px;
        height: 100%;
    }

    .video-container {
        height: 100% !important;
    }

    .mainFlashcard_flip .testcard1_ff {
        border: 6px solid #23408e;
    }

    .mainFlashcard_flip .testcard2_ff {
        border: 6px solid #23408e;
    }

    .consonanat_pick .mainFlashcard_flip .cell-space .fa-check {
        right: -16px;
        font-size: 13px;
        width: 30px;
        height: 30px;
        line-height: 16px;
    }

    .clicksoundinteractivity .click-rating {
        margin-bottom: 14px;
    }

    .drag-container.layout-column {
        box-sizing: border-box;
        display: inline-block;
        float: left;
    }

    .drag-container.layout-column {
        width: 100%;
    }

    .drag-container .btn-droppable {
        width: 100%;
    }

    .modal .modal-dialog {
        margin-left: 0;
    }

    .modal .modal-dialog .accordion {
        border: none;
    }

    .modal .modal-dialog .accordion .accordion__item {
        border: 1px solid #d1d6e0 !important;
        margin-bottom: 10px !important;
        border-radius: 0px !important;
        float: left;
        width: 100%;
    }

    .modal .modal-dialog .accordion .accordion__item h3 {
        font-size: 12px !important;
        font-weight: 600 !important;
        width: 90% !important;
    }

    .modal .modal-dialog .accordion .accordion__item .accordion__title {
        padding: 10px !important;
    }

    .modal .modal-dialog .accordion .accordion__item h3 .accordion__arrow {
        right: -30px !important;
    }

    .phonicsMain #noanim-tab-example ul.menuList {
        margin: 0;
        width: calc(100% - -30px);
        margin-top: -20px;
        margin: 0 -15px;
    }

    .phonicsMain #noanim-tab-example ul.menuList li.menuItem {
        margin: 0;
    }

    .phonicsMain #noanim-tab-example ul.menuList li.menuItem a {
        margin: 0;
        padding: 0;
        text-align: left !important;
    }

    .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        margin: 0;
        font-size: 12px;
        font-weight: 600;
    }

    .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        border: none;
        background: transparent;
        text-align: left;
        line-height: 25px;
        padding: 0 15px;
    }

    .connectthedots-letter-select-option li::before {
        background-size: 100%;
        height: 100vh;
    }

    .clicksoundinteractivity .trumpCard_red {
        position: static;
        height: 28vh;
        width: 26vh;
    }

    .portrait .icon-backward.md-button.md-ink-ripple {
        border: 2px solid;
        padding: 0 4px 0 0;
        background-color: #fff;
        min-width: 37px !important;
        height: 37px !important;
        border-radius: 50% !important;
    }

    .portrait .icon-forward.md-button.md-ink-ripple {
        border: 2px solid;
        padding: 0 0 0 4px;
        background-color: #fff;
        min-width: 37px !important;
        height: 37px !important;
        border-radius: 50% !important;
    }

    .portrait header .letters-text-wrap {
        max-width: 280px;
    }

    .stageCnt {
        display: flex;
        overflow: visible !important;
        max-width: none;
    }

    /*******fix connect the dot height issue**********/
    .connectthedots-container {
        position: relative;
    }

    .connectthedots-canvas-container {
        top: 2.1em;
    }

    .clicksoundinteractivity .trumpCard_red {
        height: 18vh;
    }

    /*use for minimize the size of  inetractivity images*/
    .clicksoundinteractivity .trumpCard_red img {
        width: 70%;
    }

    #billBoard .boardString {
        bottom: -66px !important;
    }

    .board-stand:before,
    .board-stand:after {
        width: 67px;
    }

    .board-stand:before,
    .board-stand:after {
        width: 67px;
    }
}


/*range for pixel 3 device*/

@media (max-width: 877px) and (min-width: 877px) {
    .modal .modal-dialog {
        margin-left: 25px;
    }

    .landscape .stageCnt {
        display: flex;
        max-width: 156px;
        overflow-y: hidden;
        overflow-x: auto !important;
        height: 45px;
    }

    .landscape .corrCard i,
    .wrongCard i {
        right: 34px;
    }

    .landscape #firstSoundPick .corrCard i,
    .landscape #firstSoundPick .wrongCard i {
        right: -16px;
    }

    .vowels-left-column figure h3 {
        font-size: 30px !important;
    }

    .vowels-letter {
        width: 80% !important;
        margin: 0px !important;
    }

    .vowels-letter>.button_bg {
        width: 70% !important;
        height: 5em !important;
        line-height: 0.7;
    }

    .vowels-stars {
        margin-top: 10px !important;
    }

    .vowels-letter>.button_bg>span {
        font-size: 16px !important;
    }

    .vowels-game-event-icons ul {
        justify-content: space-between;
        display: flex;
        height: 100%;
        margin: 0;
    }

    .vowels-stars ul li {
        width: 20px !important;
        height: 20px !important;
    }

    .vowels-game-event-icons ul li {
        max-width: 40px;
        height: 40px;
        max-width: 40px;
        height: 40px;
        margin: 0 !important;
    }

    .landscape .vowels-game-event-icons ul li i,
    .landscape .vowels-game-event-icons ul li i.fa-play,
    .landscape .vowels-game-event-icons ul li i.fa-pause {
        width: 37px !important;
        height: 37px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vowels-img {
        height: 50px !important;
    }

    .vowels-letter-boxes .vowel-letter {
        height: auto !important;
    }

    .vowels-letter-boxes .vowel-letter h3 {
        font-size: 24px !important;
    }

    .vowels-letter-boxes .vowel-letter {
        border-width: 5px !important;
    }

    .orignal_letter {
        padding: 10px !important;
    }

    .orignal_letter .letter_column {
        width: 40% !important;
        height: 100% !important;
    }

    .letter_column span {
        font-size: 20px !important;
    }
}

.vowels-letter-boxes .vowel-letter:nth-child(2),
.vowels-letter-boxes .vowel-letter:nth-child(3),
.vowels-letter-boxes .vowel-letter:nth-child(4),
.vowels-letter-boxes .vowel-letter:nth-child(5) {
    border-bottom: 0px;
    border-radius: 0px;
}

.vowels-letter-boxes .vowel-letter:nth-child(1) {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 0px;
}

.vowels-letter-boxes .vowel-letter:nth-child(6) {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

@media (max-width: 1366px) and (min-width: 900px) {
    #interactivity_div .connectthedots-game-text {
        position: absolute;
        left: 0 !important;
        right: 0 !important;
        width: 75% !important;
        margin: auto !important;
        top: 15% !important;
        margin-top: 0 !important;
    }

    #billBoard .layout-fill {
        min-height: auto;
    }

    .landscape .shootrocketrow.shoot_4curdefault {
        width: 100%;
    }

    header .connect-dot-bg span {
        font-size: 12px !important;
    }

    .landscape .shootrocketrow .shoot_image1 {
        margin-top: 0;
        width: 600px;
        margin: auto;
        position: relative;
    }

    .landscape .shootgamelevel {
        margin: 0 auto;
        position: absolute;
        bottom: 14.6%;
        text-align: center;
        float: left;
        width: 90% !important;
        left: 0% !important;
        right: 0;
    }

    .landscape .shoot_instruct1 {
        left: auto !important;
        right: 40px;
    }

    .landscape .shootrocketMainPages {
        width: 100%;
    }

    .landscape .shoot_countdownclock {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .landscape div#shoot_countdownBar.shoot_countdownBar {
        background: none !important;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        margin-left: 10px;
        margin-top: 10px;
        top: 43% !important;
        left: auto !important;
    }

    .landscape .shoot_timeremaining,
    .landscape .shoot_timermode {
        margin-top: 69px;
        font-size: 18px;
        margin-left: -16px;
        background-color: #e8f66d;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 65px auto 0 auto;
        border-radius: 7px;
        height: 29px;
        border: 2px solid #ff0866;
    }

    .landscape .shoot_timermode {
        margin-top: 54px;
    }

    .landscape #shoot_countdownNumber,
    .landscape #shoot_timerselectedType {
        width: 50%;
        background: rgb(255, 95, 117);
        border-radius: 7px;
        font-size: 22px;
        display: inline-block;
        left: 0;
        right: 0;
        margin: auto;
    }

    .landscape .shoot_gameshoottitlebgimg {
        transform: scale(0.5, 0.65);
        -ms-transform: scale(0.5, 0.65);
        -webkit-transform: scale(0.5, 0.65);
        margin-left: -40px;
    }

    .landscape .shoot_gamelettermodeimg {
        transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        margin-left: 20px;
    }
}

.nav-bar-btn {
    float: left;
    margin-right: 20px;
    cursor: pointer;
}

.phonics_popup .nav-bar-btn {
    float: left;
    margin-right: 15px;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 10px;
    transition: 0.5s;
}

.tab-content button {
    margin: 10px 0;
}

.course-view .image_btn {
    float: left;
    width: calc(25% - 10px);
    margin: 10px 5px;
    text-align: center;
    overflow: hidden;
}

.course-view img {
    clear: both;
    max-width: 100%;
    width: 22px;
    height: auto;
    margin-right: 6px;
}

button.image_btn img {
    width: auto;
}

header a.icon-menu {
    cursor: pointer;
}

.course-view .active {
    color: #333;
    background: #193463;
    border: 2px solid #af8d0b !important;
}

/*menu modal background block color*/

.bgColor_on_currentModal {
    border-bottom: none;
}

.bgColor_on_currentModal.active_1 {
    background: linear-gradient(115deg, #f69a1f 20%, #193463 20%) !important;
}

.bgColor_on_currentModal.active_2 {
    background: linear-gradient(115deg, #e72426 20%, #193463 20%) !important;
}

.bgColor_on_currentModal.active_3 {
    background: linear-gradient(115deg, #58b950 20%, #193463 20%) !important;
}

.bgColor_on_currentModal.active_4 {
    background: linear-gradient(115deg, #f36212 20%, #193463 20%) !important;
}

.bgColor_on_currentModal.active_5 {
    background: linear-gradient(115deg, #2a7aba 20%, #193463 20%) !important;
}

.bgColor_on_currentModal.active_6 {
    background: linear-gradient(115deg, #9e3e93 20%, #193463 20%) !important;
}

.bgColor_on_currentModal.active_7 {
    background: linear-gradient(115deg, #3eab4e 20%, #193463 20%) !important;
}

.bgColor_on_currentModal.active_8 {
    background: linear-gradient(115deg, #3a62a6 20%, #193463 20%) !important;
}

.phonics_popup .nav-bar-btn.active md-icon {
    box-shadow: none;
    transition: 0.5s;
    filter: brightness(0.3);
    border-radius: 0px;
    background-size: 40px;
}

.bgColor_on_currentModal .nav-bar-btn.active .ic-text {
    color: #000;
}

.bgColor_on_currentModal.active_1 md-button.nav-bar-btn.active,
.bgColor_on_currentModal.active_2 md-button.nav-bar-btn.active,
.bgColor_on_currentModal.active_3 md-button.nav-bar-btn.active,
.bgColor_on_currentModal.active_4 md-button.nav-bar-btn.active,
.bgColor_on_currentModal.active_5 md-button.nav-bar-btn.active,
.bgColor_on_currentModal.active_6 md-button.nav-bar-btn.active,
.bgColor_on_currentModal.active_6 md-button.nav-bar-btn.active,
.bgColor_on_currentModal.active_7 md-button.nav-bar-btn.active,
.bgColor_on_currentModal.active_8 md-button.nav-bar-btn.active {
    background: #fff;
    border-radius: 0px;
}

.phonicsMain .modal-dialog {
    max-width: 1100px;
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    margin: 30px auto;
}

.landscape .phonicsMain #noanim-tab-example .search_bar-section .course-view i.fa.fa-check-circle {
    right: 45px;
}

/* end */

.phonicsMain .modal-dialog .modal-content {
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    border: none;
    border-radius: 3px;
}

.phonicsMain .modal-header {
    position: relative;
    padding: 0px 15px;
    border-bottom: none;
}

.landscape .phonicsMain .modal-header {
    display: flex;
    align-items: center;
}

.landscape .phonicsMain .ttheader {
    position: static;
    margin-left: auto;
}

.phonicsMain .modal-header .btn-close {
    margin-top: 0px;
    position: absolute;
    right: 6px;
    top: 15px;
    opacity: 1;
    background-color: #f69a1f;
    font-size: 100%;
    font-weight: 700;
    cursor: pointer;
    z-index: 99;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    text-shadow: none !important;
    border: 0;
}

.phonicsMain .modal-header .btn-close:before {
    content: "\2716";
}

.phonicsMain .modal-body {
    padding: 0;
}

.landscape .phonicsMain .modal-body {
    float: left;
    width: 100%;
    min-height: 560px;
}

.landscape #appBody .LoginModal .modal-body {
    min-height: 100%;
}

.menuDialog.modal-dialog .modal-body {
    max-height: 551px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}


/* start css for no content found */

.no-data-wrap,
.no-data-wrap .tab-content,
.no-data-wrap .search_bar-section,
.no-data-wrap .isDesktop1 {
    display: flex;
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1;
}

.no-data-wrap .isDesktop1 {
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 27px;
    opacity: 0.75;
}

.portrait .phonicsMain .menuTabHeader li button {
    border-radius: 0;
}

.portrait button.active.md-button.md-ink-ripple.activeLesson {
    right: 0;
}

.portrait .menuTabHeader li {
    margin: -17px 0 0 0;
}

.phonicsMain #noanim-tab-example {
    position: relative;
    /* min-height: 100px; */
    padding: 15px;
    border: none;
    background: #fff;
}

.phonicsMain #noanim-tab-example ul {
    padding-left: 0px;
    float: left;
    margin: 5px 0 0 0;
    padding: 0;
    list-style: none;
    border: none;
}

.phonicsMain #noanim-tab-example .nav-tabs>li {
    position: relative;
    display: block;
    position: relative;
    float: left;
    border: 2px solid #193463;
}

.phonicsMain #noanim-tab-example .nav-tabs>li a:hover {
    background-color: transparent;
}

.phonicsMain #noanim-tab-example .nav-tabs>li.active a {
    background-color: #193463;
}

.phonicsMain #noanim-tab-example a {
    display: block;
    position: relative;
    font-weight: 600;
    font-size: 18px;
    padding: 12px 25px;
    margin: 0 auto;
    z-index: 9;
    cursor: pointer;
    transition: all 0.25s linear;
    text-align: center;
    border: none;
    color: #555555;
    border-radius: 0;
}

.phonicsMain .ttheader {
    position: absolute;
    right: 0;
    padding: 5px 10px;
    z-index: 9;
    top: 0px;
    text-align: center;
    margin-top: 0;
}

.phonicsMain .tab-content {
    width: 100%;
    float: left;
    /* margin-top: 30px; */
}

.course-view {
    position: relative;
    padding: 10px 0px 10px 10px;
    z-index: 9;
    display: inline-block;
    width: 100%;
}

.course-view strong {
    color: #193463;
    text-transform: capitalize;
    font-size: 25px;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600;
}

.phonicsMain .menuDialog .ic-text {
    color: #fff;
    font-weight: normal;
    text-transform: capitalize;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 0.5px;
}

.phonicsMain .ic-text {
    font-size: 13px;
}

.course-view .col-sm-4 {
    padding: 0 5px;
}

.course-view a.padding_react_button.react-user.edit-hover {
    padding: 0 !important;
    text-decoration: none;
}

.youtube-video {
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.youtube_container {
    width: 100%;
    position: relative;
    height: 100%;
    /* padding-top: 56.25%;  */
}

.youtube_container>div {
    width: 100%;
    height: 100%;
}

.youtube_container .player,
.youtube_container iframe {
    width: 100%;
    height: 100%;
}

.modal.show,
.modal {
    opacity: 1;
}

#dropdown-basic-button {
    position: relative;
    background-color: transparent;
    border: 0;
    box-shadow: none !important;
}

.Phonics-homepage-wraper span.caret:before,
.header_setting_btn button:before {
    content: "\f107";
    font-family: FontAwesome;
    display: inline-block;
    font-size: 21px;
    top: -15px;
    position: absolute;
    color: #fff;
}

.Phonics-homepage-wraper .open ul.dropdown-menu,
.Phonics-homepage-wraper .show .dropdown-menu {
    display: block;
    position: absolute;
    z-index: 999;
    background: #fff;
    right: 0;
    left: -60px;
    color: #000;
    top: 39px;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    font-size: 14px;
    min-width: 160px;
}

.Phonics-homepage-wraper .open ul.dropdown-menu li a,
.Phonics-homepage-wraper .show .dropdown-menu a {
    padding: 15px 16px 10px;
    color: #000;
    display: inline-block;
    width: 100%;
}

.Phonics-homepage-wraper .open ul.dropdown-menu li a:first-child,
.Phonics-homepage-wraper .show .dropdown-menu a:first-child,
.Phonics-homepage-wraper .open ul.dropdown-menu li:first-child a,
.Phonics-homepage-wraper .show .dropdown-menu li:first-child a{
    border-top: 1px solid #000;
}

.pausedImageWrdLadder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.pausedImageWrdLadder div {
    right: 0;
    position: absolute !important;
    z-index: 9 !important;
    background-repeat: no-repeat !important;
    top: 40%;
    left: 0;
    bottom: 0px;
    margin: auto;
    background-size: contain;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/paused.png);
}

.abcgame_maincontainerContent .pausedImageWrdLadder {
    z-index: 9;
}

.utube_container {
    width: 100%;
    position: relative;
}


/* 31,jan 2020 for youtube */


/* for portrait mode ipad and ipad pro and kindle */


/*custom.css*/

@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
    .portrait #lesson_ifr .ereader_bookimages .ereader_images .ereader-divider {
        width: 33% !important;
        max-width: 33% !important;
    }

    .portrait #lesson_ifr .ereader_bookimages .ereader_images .flashcard-turnOver .flash-card-row,
    .portrait #ereader_images .flash-card-row {
        transform: scale(1.5);
    }

    /* syllable-pick */
    .portrait #syllablepick .vowels-game-container {
        flex-direction: row !important;
    }

    .portrait #syllablepick_lefttsidebar,
    #syllablepick_rightsidebar {
        padding: 0 20px !important;
    }

    .portrait #syllablepick_rightsidebar .circle_couting ul li {
        width: 25%;
        margin: 0;
    }

    .portrait #syllablepick_rightsidebar .circle_couting ul li>div {
        font-size: 35px;
    }

    .portrait #syllablepick_lefttsidebar .curve_text_div {
        border-radius: 55px;
        border: 5px solid #ba9e2f;
        height: 75px;
        width: 80%;
        margin: auto;
    }

    .portrait #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 35px;
    }

    .portrait #syllablepick_lefttsidebar,
    #syllablepick_rightsidebar {
        width: 100%;
    }

    /* end */
    .vowels-img {
        height: 100px !important;
        margin: 15px auto !important;
        width: 90% !important;
    }

    #wordLadder.vowels-container .vowels-letter-boxes .vowel-letter {
        height: 60px !important;
    }

    #wordLadder .tick-class {
        top: -7% !important;
        right: -7% !important;
    }

    #wordLadder .vowels-letter-boxes .vowel-letter {
        height: 70px !important;
    }

    #wordLadder .orignal_letter {
        padding-top: 10px !important;
    }

    #interactivity_div .contentBox .connectthedots-startgame-innerwrapper {
        transform: scale(1);
    }

    .portrait .interactivity #consonant_pick .flip-divider {
        width: 50%;
        max-width: 50%;
        max-height: 400px;
        padding: 0 30px;
    }

    .portrait .interactivity.interactivityfullScreen #consonant_pick .flip-divider {
        max-height: 450px;
    }

    .youtube-video {
        display: flex;
        align-items: center;
        background-color: black;
        justify-content: center;
        height: 100%;
        position: relative;
    }

    .youtube_container {
        height: 450px !important;
        margin: auto;
    }

    .CompanionReaderQuiz .options label.lableQuiz p {
        font-size: 19px;
    }

    .CompanionReaderQuiz .correctFnt,
    .CompanionReaderQuiz .wrongFnt,
    .CompanionReaderQuiz .speaker {
        right: -40px;
    }

    .CompanionReaderQuiz-wrap {
        border-radius: 80px;
        height: auto;
        width: 85% !important;
        max-height: none;
    }

    .bgc_game_img {
        position: absolute;
        width: 20%;
        height: 40%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: top;
        right: -4%;
        bottom: 0;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bgc_game_img img {
        object-fit: contain;
        width: 90%;
        margin: auto;
        height: 90% !important;
    }
      .add-search-dd {
            right: 0;
        }
}

@media screen and (min-width: 992px) and (max-width: 1200px) and (orientation: portrait) {
    .portrait #flipcardBehindDoor .flip-divider #flip-crd-main-wrd-span{
        font-size: 3.1vh !important;
    }
    .portrait #lesson_ifr .ereader_bookimages .ereader_images .ereader-divider {
        margin: 25px !important;
    }

    /* syllable-pick */
    /* .portrait #syllablepick .syllable_div .syllable_img {
        height: 100% !important;
    } */
    .portrait #syllablepick_rightsidebar .circle_couting {
        width: 100%;
    }

    .portrait #syllablepick #syllable_contentbox {
        width: 100%;
        height: 55vh;
        margin: 8px auto;
    }

    .portrait #syllablepick .right_column {
        right: 18px;
        top: auto;
        position: absolute;
    }

    .portrait #syllablepick_rightsidebar .circle_couting {
        width: 100%;
    }

    .portrait #syllablepick .vowels-centerlized-wrapper {
        height: 100%;
        margin-bottom: 0px;
    }

    .portrait #syllablepick .syllablepick-heading.Syllable_stars .stars_interactivity {
        grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto;
        display: grid;
        gap: 0;
        margin: 22px auto 0 !important;
    }

    .portrait #syllablepick .vowels-game-container {
        flex-direction: row !important;
    }

    .portrait #syllablepick_lefttsidebar,
    #syllablepick_rightsidebar {
        padding: 0 20px !important;
    }

    .portrait #syllablepick_rightsidebar .circle_couting ul li {
        width: 25%;
        margin: 0;
    }

    .portrait #syllablepick_rightsidebar .circle_couting ul li>div {
        font-size: 35px;
        height: 90px;
        width: 90px;
    }

    .portrait #syllablepick_lefttsidebar .curve_text_div {
        border-radius: 55px;
        border: 5px solid #ba9e2f;
        width: 90%;
        margin: auto;
    }

    .portrait #syllablepick #syllable_contentbox {
        width: 100%;
    }

    .portrait #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 38px;
    }

    .portrait #syllablepick_lefttsidebar,
    #syllablepick_rightsidebar {
        width: 100%;
    }

    /* end */
    /* .portrait #SightWordBlast .abcgame_abcpick_getreadyWrap {
        margin-top: 50% !important;
    } */
    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 405px;
        margin-top: 18%;
        margin-right: 7%;
    }

    .portrait #SightWordBlast .abcgame_readycount {
        height: 378px !important;
        margin-top: 50%;
        font-size: 35px;
    }

    .portrait #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 20px !important;
        right: auto;
        bottom: 45px;
        text-align: center;
        display: flex;
    }

    .portrait #SightWordBlast .jumpGameResultDiv .abcgame_nextlevel,
    .portrait #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 50px;
    }

    .portrait #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 20px;
    }

    .portrait #SightWordBlast .rightSideBar .row.clock {
        width: 60% !important;
        margin-left: 0;
    }

    .portrait #SightWordBlast .rightSideBar .row {
        width: 35%;
    }

    /* save the planet  */
    /* .portrait #shootthestars .abcgame_abcpick_getreadyWrap {
        margin-top: 50% !important;
    } */
    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 405px;
        margin-top: 18%;
        margin-right: 7%;
    }

    .portrait .gameWrapper #shootthestars .abcgame_readycount {
        height: 378px !important;
        margin-top: 0;
        font-size: 35px;
    }

    .portrait #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto !important;
        left: 0px !important;
        right: auto;
        bottom: 40px !important;
        text-align: center;
        display: flex;
    }

    .portrait #shootthestars .jumpGameResultDiv .abcgame_nextlevel,
    .portrait #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 50px;
    }

    .portrait #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 20px;
    }

    .portrait #shootthestars .rightSideBar .row.clock {
        width: 60% !important;
        margin-left: 0;
    }

    .portrait #shootthestars .rightSideBar .row {
        width: 35%;
    }

    .youtube-video {
        display: flex;
        align-items: center;
        background-color: black;
        justify-content: center;
        height: 100%;
        position: relative;
    }

    .drag-container.layout-column {
        box-sizing: border-box;
        display: inline-block;
        float: left;
    }

    .drag-container .layout-align-space-around-center.layout-row {
        box-sizing: border-box;
        display: inline-block;
        float: left;
        width: 50%;
    }

    .youtube_container {
        height: 450px !important;
        margin: auto;
    }

    .bgc_game_img {
        width: 30%;
        height: 40%;
        right: -6%;
    }

    /* shoot the rocket */
    .portrait #Shootthestars .rightSideBar .timer-wrap {
        margin-left: 15px;
    }

    .portrait #Shoottherocket .ScoreBar {
        flex-direction: column;
        width: 25% !important;
        margin-bottom: 0px;
        align-items: center;
        justify-content: center;
    }

    .portrait #Shoottherocket .rightSideBar .controlButtons {
        width: 25% !important;
    }

    .portrait #Shoottherocket #shoot_gamescoreviewbox,
    .portrait #Shoottherocket #shoot_gamemissedviewbox {
        font-size: 18px !important;
        padding-left: 7px;
        padding-right: 7px;
        width: 140px !important;
        margin: 10px 0px !important;
        margin-bottom: 15px;
    }

    .portrait #Shoottherocket .rightSideBar .row {
        width: 50% !important;
    }

    .portrait #Shoottherocket .timer {
        font-size: 28px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .portrait #Shoottherocket .mode {
        font-size: 28px;
    }

    .portrait #Shoottherocket .leftSideBar .row img {
        max-width: 80% !important;
    }

    .portrait #Shoottherocket .alphabetButton {
        width: 85% !important;
        font-size: 30px;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }

    .portrait #Shoottherocket .clock canvas {
        width: 140px !important;
        height: 140px !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p:first-child {
        text-shadow: 6px 4px 8px #000;
    }

    .portrait #calenderFlipCardMainDiv.blackboard-template .templatebox .template-word p,
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p {
        font-size: 6vw !important;
    }
}

#lesson_ifr {
    height: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #a8dfee;
}

.landscape .songParentDiv {
    margin: 79px 0 69px 0;
}

.gameParentDiv {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(168, 223, 238, 1) 49%) !important;
}

.leather-book-page .book3-click-flip .audio-text i {
    width: 38px;
    height: 33pxill;
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

#firstSoundPick .click-soundcard-wrap.layout-row {
    position: relative;
}

.leather-book-page i#icon-volume {
    margin-left: 10px;
}

.boardString .icon-volume {
    margin: 0 0 0 10px;
}


/* causing error in card pages with background color */


/* .video-container #lesson_ifr {
            background-color: #d7d7d7;
        } */

.utube_container .player {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.modal_content_wrapper {
    width: 100%;
    float: left;
    position: relative;
    z-index: 9;
    background-color: #fff;
}

.abcgame_abcpickparent.ng-scope,
.abcgame_abc-containerWrap,
.abcgame_abc-container,
.abcgameabcpick.ng-scope {
    height: 100% !important;
}

.abcgameabcpick.ng-scope.additonal_abcgame {
    height: auto !important;
}

.abcMatchMainDiv {
    height: 100%;
}

#abcMatchMainBody .abcMatchMainDiv {
    width: 100%;
}

#abcMatchMainBody .abcgame_centerGamePart.abcgame_abccol {
    overflow: hidden;
    margin: 0 auto;
}

#abcMatchMainBody .content.abcgame_abcrow.ng-scope {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* start css Bill-borad-interactivity  */

#billBoard .twoflash-cont {
    position: relative;
    background-color: transparent;
}

#billBoard.bill-board-light .twoflash-cont .layout-fill.layout-row .billboardlight-wrap .flex-30 {
    max-width: 40%;
    min-height: 70%;
    max-height: 70%;
}

#billBoard .twoflash-cont .layout-fill.layout-row .flex-30 {
    overflow: visible;
    max-width: 50%;
}

#billBoard .demotrumpCard.layout-fill .layout-fill {
    background-color: transparent;
}

#billBoard.bill-board-light .billboardlight-wrap .demotrumpCard.layout-fill .layout-fill {
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    overflow: visible;
    flex-direction: column;
    top: auto;
}

.billboard-screen-change #billBoard #carousel .board-effect .sq-animate2 {
    height: 100%;
    background-color: #fff;
    width: 70%;
    margin: 0 auto;
    min-height: auto;
    border: none;
    border-radius: 0;
}


/* Code for Bill Board Lights */


/* apcourseplayer */

#billBoard.bill-board-light .twoflash-cont .sq-animate2 {
    border: none !important;
    background-color: transparent;
    margin: auto;
    z-index: 999;
    position: relative;
    overflow: visible;
}

.bill-board-light div#carousel {
    overflow: visible;
}

#billBoard.bill-board-light .billboardlight-wrap {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/bill-board-lightson.png);
    background-color: transparent;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 9;
}

#billBoard.bill-board-light .twoflash-cont .sq-animate2:after {
    content: '';
    position: absolute;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/bill-board-moon.png);
    right: -100px;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: contain;
    top: 40px;
}

#billBoard.bill-board-light .billboardlight-wrap.light-turn-off {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    display: flex;
    background-color: transparent;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 9;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/bill-board-lightsoff.png);
}

#billBoard.bill-board-light .demotrumpCard img {
    height: 100%;
}


/* #billBoard.bill-board-light .demotrumpCard img.imgStroke {
    border: none !important;
} */

#billBoard.bill-board-light .demotrumpCard {
    min-height: auto;
}

#billBoard.bill-board-light .board-effect {
    position: static;
    width: 65%;
    padding: 0;
    margin-top: 0;
    z-index: 0;
}


/* Billboard light after adding repeat and game dots */

.bill-board-light .opposite_component.billboard_stars {
    z-index: 3;
}

#billBoard.bill-board-light .twoflash-cont .sq-animate2:after {
    z-index: 2;
}

.landscape #billBoard.bill-board-light .board-effect {
    width: 60%;
}

.landscape #billBoard.bill-board-light .twoflash-cont .layout-fill.layout-row .billboardlight-wrap .flex-30 .demotrumpCard.layout-fill.layout-align-center-center.layout-row {
    height: 100%;
}


/* div.abcgame_abcpick_alertSelectLevelOverlay.jumpGameOverlay {
    padding-top: 30%;
} */

.interactivity #billBoard.bill-board-light .align-middle .sentenceSpan {
    max-width: 66%;
    /* color: #fff; */
    /* text-shadow: 2px 3px 5px rgb(33, 31, 32); */
}


/* #billBoard.bill-board-light .board-effect .billiboard_two i, 
#billBoard.bill-board-light .board-effect .billiboard_one i {
    background: #671f13;
}*/

#billBoard.bill-board-light {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/bill-board-light-Bg.jpg);
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.portrait #billBoard.bill-board-light {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/bill-board-Mobile-bg.png);
}

.interactivity .billboard-screen-change #billBoard .audio-text {
    width: 100% !important;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/theater-chairs.png);
    background-size: cover;
    display: flex;
}

.interactivity .billboard-screen-change #billBoard .audio-text .align-middle {
    width: 100%;
}

.interactivity .billboard-screen-change #billBoard span.ng-binding {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: normal;
}

.interactivity .billboard-screen-change #billBoard .board-stand:before,
.interactivity .billboard-screen-change #billBoard .board-stand:after {
    display: none !important;
}


/* .interactivity .billboard-screen-change #billBoard .right-btns-grp {
    right: 0px;
} */

.interactivity .billboard-screen-change #billBoard .audio-text .align-middle {
    margin: auto;
}

.interactivity #billBoard .audio-text {
    z-index: 9;
    /* font-size: 1.8vw; */
    /* commented to make font size consistent */
}


/*SL3-5168  remove css to make bottom sentence width consistent */


/* .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
    max-width:78%;
} */

.interactivity #billBoard .align-middle .sentenceSpan {
    max-width: 66%;
}

#indexNext,
#previous {
    cursor: pointer;
}


/* stars animations css */

.twinkling {
    position: fixed;
    animation: twinkle-1 0.8s ease-in-out infinite;
    margin: 90px auto auto;
    z-index: 99;
}

.twinkling::before,
.twinkling::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    width: 10px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(45deg);
    border-radius: 100%;
    animation: twinkle-1 ease-in-out infinite;
}

.twinkling::after {
    transform: translateX(50%) rotateZ(-45deg);
}

.night {
    height: 100%;
    width: 100%;
    /* transform: translate(-22%, -50%) rotateZ(115deg); */
    position: fixed;
}

.shooting_star {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(255, 155, 255, 1));
    animation: tail 3000ms ease-in-out 1, shooting 3000ms ease-in-out 1;
}

.shooting_star::before,
.shooting_star::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    right: 1px;
    height: 2px;
    background: linear-gradient(-45deg, rgba(170, 170, 184, 0), rgb(255, 255, 255), rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(45deg);
    border-radius: 100%;
    animation: shining 3000ms ease-in-out 1;
}

.shooting_star::after {
    transform: translateX(50%) rotateZ(-45deg);
}

@keyframes tail {
    0% {
        height: 0;
    }

    30% {
        height: 100px;
    }

    100% {
        height: 0;
    }
}

@keyframes shining {
    0% {
        width: 0;
    }

    50% {
        width: 30px;
    }

    100% {
        width: 0;
    }
}

@keyframes shooting {
    0% {
        transform: translate(0, 0) rotate(-45deg);
    }

    100% {
        transform: translate(300px, 300px) rotate(-45deg);
    }
}


/* End stars animation css */


/* end css Bill-borad-interactivity  */


/* start css for contraction */

.hintbox .Contraction-wrap.wrong-Card {
    border: none !important;
}

.apples_bg {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/Section2/medium/Contraction-apple-bg.jpg);
    background-size: cover;
    background-position: center right;
    height: 100%;
    background-repeat: no-repeat;
    padding: 0;
}

.contraction-string {
    display: flex;
    align-items: center;
}

.three-box-wrapper {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/Section2/medium/apple-basket.png) center no-repeat;
    background-size: contain;
    width: auto;
    height: 232px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.width100.margin-auto {
    margin: -13px auto 0 auto !important;
    width: 100% !important;
}

.contraction-string {
    display: flex;
    align-items: center;
    justify-content: center;
}

.basket-apple img {
    width: 100%;
}

.basket-apple {
    position: relative;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
}

.basket-apple.contractionQuestion {
    margin-left: -12px;
    margin-top: 25px;
}

.basket-apple h3 {
    position: absolute;
    margin: auto;
    top: 50%;
    transform: translateY(6%);
    color: #fff;
    font-size: 27px;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.65);
}

.landscape #contraction-activity .sentenceSpan {
    /* font-size: 1.7vw; */
    /* commented to make font size consistent to other activities */
    margin: 5px auto;
    padding: 5px;
}


/* End css for contraction */


/***************video-controls***************/

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
}

.content-pagination .fast-forward-buttons {
    left: 50%;
    position: absolute;
    top: -30px;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    display: none;
    -moz-transform: translate(-50%, 0);
}

.fast-forward-buttons ul {
    background: #ffcd01 none repeat scroll 0 0;
    border: none;
    float: left;
    margin: 0;
    padding: 10px 20px;
    width: 100%;
    border-radius: 30px 30px 0 0;
    display: flex;
    text-align: center;
}


.fast-forward-buttons ul li.active,
.fast-forward-buttons ul li:hover,
.fast-forward-buttons ul li:focus {
    outline: none;
}

.fast-forward-buttons ul li.fast-forward-dots {
    list-style-type: none;
    margin: 0 5px;
    padding: 0px 0;
}

.content-pagination li {
    display: inline-block;
    padding: 0 5px;
    list-style: none;
    vertical-align: middle;
    font-family: 'Poppins', sans-serif;
    margin: 0 2px !important;
}

.content-pagination li a {
    color: #000;
}

.content-pagination li.fast-forward-dots i {
    font-size: 17px;
    margin: 0 4px;
    vertical-align: middle;
}

.page-main-controls {
    display: flex;
    width: 80%;
    height: auto;
    align-items: center;
    justify-content: center;
}

.page-main-controls ul,
.volume-control ul {
    padding-left: 0;
    margin-bottom: 0;
}

.footer-right-btn {
    display: flex;
    align-items: center;
    width: 10%;
    justify-content: end;
}


/*.content-pagination .btn-action {
    margin-top: 3px;
}*/

.content-pagination li .md-button {
    font-family: 'Poppins', sans-serif;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    line-height: 25px;
    min-height: 24px;
    min-width: 51px;
    font-weight: 600;
}

.icon-forward.md-button.md-ink-ripple {
    border: 2px solid;
    padding: 1px 4px 4px 0px;
    background-color: #fff;
    border-radius: 5px;
}

.content-pagination li md-icon {
    font-weight: 600;
    font-size: 14px;
    color: #000;
    background-color: #fff;
    width: 37px !important;
    height: 37px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid #000;
}

.content-pagination li a:hover {
    text-decoration: none;
}

.icon-backward.md-button.md-ink-ripple {
    border: 2px solid;
    padding: 1px 0px 4px 4px;
    background-color: #fff;
    border-radius: 5px;
}

.content-pagination li.pager-control md-icon.play {
    background: #ffcc00 url(../images/play.png) no-repeat;
    background-size: 22px;
    background-position: center;
}


.content-pagination li.pager-control md-icon.pause {
    background: #ffcc00 url(../images/pause.png) right 0px no-repeat;
}

.content-pagination li.pager-control button.volume-ctrl md-icon.volume {
    background: #ffffff url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/volume.png) center center no-repeat;
}

.content-pagination li .icon-backward i {
    margin: -2px 0 0 -8px;
}

.content-pagination li .icon-forward i {
    margin: -2px -8px 0 0;
}


/** Flip Cards **/

.card {
    transition: transform 2s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.front,
.back {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

.front {
    border: 2px solid black;
    background: url("https://placehold.it/250x250");
}

.back {
    border: 2px solid black;
    background: url("https://placehold.it/100x100");
    transform: rotateY(180deg);
}


/******************flip-letter***************/

#interactivity_div {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.mainFlashcard_flip .cardflipfront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}


/*changed 1s to 1.3s to fix inverted word for flash card turnover interactivity.*/

.mainFlashcard_flip .flipTemp {
    backface-visibility: hidden;
    -webkit-transition: all 1.3s;
    -ms-transition: all 1.3s;
    transition: all 1.3s;
}

.flash-card-row.layout-align-center-center.layout-row.behind-door .flipTemp {
    backface-visibility: visible;
    border: none;
    border-radius: 0;
    z-index: 9;
}

/* Changed flashcard flip layout */

.behind-door .testcard2_ff.cardUp.flipTemp.layout-align-start-center.layout-column.selected {
    z-index: 0;
    border: 0;
    border-radius: 0;
    transition: none;
}

.mainFlashcard_flip .behind-door .door {
    position: absolute;
    top: 0px;
    right: 0px;
    transform-origin: right;
    transition: all 0.5s ease-in-out;
    left: auto;
    background-color: transparent;
    border: 0;
    /* background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/door-01.png); */
    border-radius: 0;
    background-size: 100% 100%;
}

.mainFlashcard_flip .behind-door .door .cardfront-text {
    font-size: 0 !important;
}

.whatBehindTheDoor.flashcard-turnOver.mainFlashcard_flip.flashcardTurnOverTemp.layout-align-start-stretch.layout-column.flex-nogrow,
.whatBehindTheDoor.mainFlashcard_flip.interactivity-flip.flipthecard.ng-scope.layout-align-start-stretch.layout-column.flex-nogrow,
div#carousel,
div#flashCardPickID {
    background-image: none !important;
}

.portrait #interactivity_div .whatBehindTheDoor.mainFlashcard_flip.interactivity-flip.flipthecard.ng-scope.layout-align-start-stretch.layout-column.flex-nogrow {
    height: 100%;
    overflow-y: auto;
}

.mainFlashcard_flip .behind-door .door.doorOpen {
    position: absolute;
    top: 0px;
    right: 0px;
    transform-origin: right;
    /*Speed of the Door animation*/
    transition: all 0.5s ease-in-out;
    /*prespectiv creates the door open effect*/
    transform: perspective(1500px) translateZ(0px) translateX(0px) translateY(0px) rotateY(105deg);
    z-index: 9 !important;
}

/* End css */

.mainFlashcard_flip .cardUp {
    position: absolute;
    margin: 0;
    font-family: Poppins;
    font-weight: bold;
    outline: 0;
    border: 6px solid #7a7fb3;
    border-radius: 18px;
    z-index: 99;
    overflow: hidden;
}

.mainFlashcard_flip .flip-card-txt {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
}

.inner-flex-row {
    width: 100%;
    object-fit: contain;
    height: 73%;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0px;
}

.inner-flex-row .inner-flex .inner-item {
    height: 100%;
    width: 100%;
}

.inner-flex-row .inner-flex .inner-item .item img {
    width: 100%;
    object-fit: contain;
    height: 100%;
}

.carousel-parent .carousel-text {
    font-size: 2.4vw;
    text-align: center;
    padding: 0 15px;
    display: inline-block;
}

.mainFlashcard_flip .cell-space .selected {
    border-color: #00a150;
}

.mainFlashcard_flip .testcard2_ff {
    background: #fff;
    background-repeat: no-repeat;
    font-size: 6vw;
    height: 100%;
    width: 100%;
    border: 6px solid #23408e;
    border-radius: 20px;
    cursor: pointer !important;
}

.mainFlashcard_flip .homophonecard {
    font-size: 4vw !important;
}

.hidden {
    display: none !important;
}

.shown {
    display: block !important;
}


/* To display volume and mute volume icon in footer */

.content-pagination li.pager-control button.volume-ctrl md-icon.volume {
    background: transparent url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/volume.png) center center no-repeat !important;
    border: none;
    filter: invert(1) brightness(100);
    background-size: 100% !important;
}

.content-pagination li.pager-control button.volume-ctrl md-icon.mute {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/mute.png) center center no-repeat !important;
    border: none;
    filter: invert(1) brightness(100);
    background-size: 100% !important;
}

header.headerfull .logo-wrap {
    border-radius: 5px;
    padding: 10px 0 2px 2px;
    margin-left: 0 !important;
    background: transparent !important;
}

header.headerfull .save-progress-image {
    font-size: 0;
}

header.headerfull .save-progress-image {
    margin-top: 0px;
}

header.headerfull .save-progress-image img.icon-breathe {
    position: absolute;
    bottom: 0px;
}

.save-progress-image {
    margin-right: 5px !important;
    margin-left: 0px !important;

}

.phonicsMain div#wrapper {
    overflow-y: visible;
}

.icon-home i,
.icon-menu i {
    line-height: 24px;
}

.phonicsMain * .ui.segment {
    overflow: hidden;
}

.connectthedots-game-container.connectthedots-start-game-container.connectthedots-main-wrapper {
    max-width: 100%;
}

.mainFlashcard_flip,
#dragContainer,
.clicksoundinteractivity {
    height: 100%;
    overflow-y: auto;
}

#interactivity_div .mainFlashcard_flip.interactivity-flip.flipthecard.ng-scope.layout-align-start-stretch.layout-column.flex-nogrow {
    justify-content: space-between;
    overflow-y: hidden;
}

.portrait #interactivity_div .mainFlashcard_flip.interactivity-flip.flipthecard.ng-scope.layout-align-start-stretch.layout-column.flex-nogrow {
    overflow-y: visible;
    height: auto
}

#dragContainer {
    min-height: 449px;
}

.__react_component_tooltip.place-bottom {
    text-transform: capitalize !important;
}


/* css for fix ABC match image stretch issue*/

.abcgame_abccol.abcgame_abcpick_floatPlayArea {
    width: 600px;
    height: 600px;
    float: left;
    position: relative;
}

#abcMatchMainBody .abcgame_abcpick_imgbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    height: calc(100% - 45px);
    padding: 25px 0;
    align-items: flex-start;
}

#abcMatchMainBody .abcgame_abcpick_card {
    max-width: 20%;
    height: calc(50% - 20px);
    width: calc(20% - 20px);
    margin: 0 10px 10px 10px !important;
    min-height: 67px;
}

#abcMatchMainBody .abcgame_abcpick_card_back .ng-scope {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
}

#abcMatchMainBody .abcgame_abcpick_card_back .abcgame_abcpick_card_text {
    font-family: Poppins;
    font-weight: bolder;
}

#abcMatchMainBody .abcgame_abcpick_card_back .ng-scope img {
    object-fit: contain;
}

#abcMatchMainBody .abcgame_abcpick_card_front,
#abcMatchMainBody .abcgame_abcpick_card_frontMask {
    position: static;
    /* top: 0; */
    /* left: 0; */
    width: 100%;
    height: 100%;
    text-align: center;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_flip_card-new.png);
    background-size: contain;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #003471;
    border: 3px solid #52b3f5;
    border-radius: 9px;
}

#abcMatchMainBody .abcgame_abcpick_card_back {
    border: 3px solid #2e97e4;
}

#second_row .flipped.disabled-card.tb1 .abcgame_abcpick_card_back {
    background: rgba(0, 0, 0, 0.3)
}

#abcMatchMainBody .abcgame_abcMatchGameplayPage {
    padding: 0;
    overflow: hidden;
}

#abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:first-child {
    padding: 0;
    height: 53%;
}

#abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:first-child .abcgame_abcpick_imgbox {
    padding: 45px 0 0 0;
}

#abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) .abcgame_abcpick_imgbox.abcgame_abcpick_imgbox2 {
    padding: 10px 0;
    height: calc(100% - 28px);
}

#abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) {
    padding: 0;
    height: 46%;
}

#abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) .abcgame_abcpick_gametypeHead {
    padding: 10px 0 0 0;
}

#abcMatchMainBody .abcgame_abcpick_gametypeHead {
    font-size: 18px;
    padding: 20px 0 0 0;
    width: 100%;
    text-align: left;
    font-weight: bold;
}

#abcMatchMainBody .abcGameRowWrapper {
    width: 100%;
    height: 50%;
}

#abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow {
    padding: 0;
}

.abcgame_abcpick_letterSoundLabel.ng-binding {
    display: none !important;
}

#abcMatchMainBody .abcgame_abcpick_matchHead {
    background-size: contain;
    width: 241px;
    display: flex;
    justify-content: center;
    padding: 8px 0;
    height: 58px;
    right: 20px;
}

#abcMatchMainBody .abcgame_abcpick_matchHeadContent {
    font-size: 14px;
    color: #fff;
    padding: 0;
    margin: 0;
    width: auto;
}

#abcMatchMainBody .abcgame_abcpick_matchHeadContent div {
    font-size: 18px;
    line-height: 17px;
    width: auto !important;
}


/* End css for fix ABC match image stretch issue*/


/*start Lets Go Fishing Css */

.gameBody .startletsgofishingrow .lgfgameelementcenter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: static;
}

.letsgofishingContainer .lgfballoom_image_pg1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.gameBody .startletsgofishingrow .abcgame_SMtimermodeslow {
    box-shadow: 0px 10px 0px 1px #05479b;
    line-height: 44px;
    padding: 0 !important;
    margin: auto;
    border-radius: 6px;
}

.gameBody #letsplayfootball .startletsgofishingrow .abcgame_SMtimermodeslow span,
.gameBody #letsplayfootball .startletsgofishingrow .abcgame_SMtimermoderegular span,
.gameBody #letsplayfootball .startletsgofishingrow .abcgame_SMtimermodefast span {
    font-size: 100%;
}

.gameBody .startletsgofishingrow .abcgame_SMtimermodeslow span {
    width: 100%;
    height: 100%;
    background-color: #4cadfe;
    box-shadow: 0px 2px 1px 3px rgb(25, 152, 255);
    border-radius: 7px;
    border-bottom: 2px solid #2585fe;
}

.gameBody .startletsgofishingrow .abcgame_SMtimermoderegular {
    box-shadow: 0px 10px 0px 1px #9e1412;
    line-height: 44px;
    padding: 0 !important;
    margin: auto;
    border-radius: 6px;
}

.gameBody .startletsgofishingrow .abcgame_SMtimermoderegular span {
    width: 100%;
    height: 100%;
    background-color: #fc4245;
    box-shadow: 0px 2px 1px 3px rgb(255, 64, 80);
    border-radius: 7px;
    border-bottom: 2px solid #ea161b;
}

.gameBody .startletsgofishingrow .abcgame_SMtimermodefast {
    box-shadow: 0px 10px 0px 1px #0f9325;
    line-height: 44px;
    padding: 0 !important;
    margin: auto;
    border-radius: 6px;
}

.gameBody .startletsgofishingrow .abcgame_SMtimermodefast span {
    width: 100%;
    height: 100%;
    background-color: #63e962;
    box-shadow: 0px 2px 1px 3px rgb(64, 233, 82);
    border-radius: 7px;
    border-bottom: 2px solid #19d520;
}

.gameBody .startletsgofishingrow .lgf_gameinstructpglayernxtbtnimg {
    margin: 0 !important;
    padding: 0 !important;
    position: static;
}

.gameBody .abcgame_abcpickoptionaltitle {
    height: 47px;
    width: 243px;
    background-size: contain;
}


/*End Lets Go Fishing Css */

.landscape .letter-sequence .stress,
.landscape .letter-sequence .completWord,
.landscape .letter-sequence .upperLowerCase,
.landscape .letter-sequence .alphabet,
.landscape .highlight {
    font-size: 6vw !important;
}

.letter-sequence .stress,
.letter-sequence .completWord,
.letter-sequence .upperLowerCase,
.letter-sequence .alphabet {
    letter-spacing: 0px;
}

.letter-sequence .stress>span {
    margin-top: 0;
}
  .apples_bg.interactivity-wrap-03 .sentenceSpan {
      text-align: center !important;
  }
/* Responsive style for menu */

@media (max-width: 1280px) and (min-width: 768px) and (orientation: landscape) {
    .abcgame_sm_instruction_header {
        margin-top: -1px;
    }

    .abcgame_sm_closeinstruction {
        top: 17%;
        height: 9%;
    }

    .abcgame_abcpick_scoreboxeachlevelcongrats {
        margin-top: 55%;
    }
}

@media (max-width: 1140px) {
    .modal .modal-dialog {
        transform: scale(0.85);
        -webkit-transform: scale(0.85);
        -moz-transform: scale(0.85);
        -o-transform: scale(0.85);
        -ms-transform: scale(0.85);
    }
}

@media (max-width: 1024px) {

    .phonicsMain .menuTabHeader li button{
        display: flex;
        padding: 0 4px;
        justify-content: space-between;
    }

    .phonicsMain .menuTabHeader li button i.fa.fa-check-circle{
        right: 15px !important;    
    }

    .phonicsMain .ttheader .nav-bar-btn {
        margin-top: 0 !important;
        margin-right: 14px;
        padding: 5px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_gameResult {
        padding-top: 20% !important;
        padding-left: 12% !important;
    }

    .landscape #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        bottom: 10px !important;
    }

    .landscape #shootthestars .abcgame_abcpick_gameResult div {
        font-size: 9px !important;
    }
}

@media (max-width: 991px) {
    .phonicsMain .modal-header .btn-close {
        transform: scale(0.85);
    }

    .landscape .bgColor_on_currentModal.active_1 {
        background: linear-gradient(115deg, #193463 16%, #193463 16%) !important;
    }

    .landscape .bgColor_on_currentModal.active_2 {
        background: linear-gradient(115deg, #e72426 16%, #193463 16%) !important;
    }

    .landscape .bgColor_on_currentModal.active_3 {
        background: linear-gradient(115deg, #58b950 16%, #193463 16%) !important;
    }

    .landscape .bgColor_on_currentModal.active_4 {
        background: linear-gradient(115deg, #f36212 16%, #193463 16%) !important;
    }

    .landscape .bgColor_on_currentModal.active_5 {
        background: linear-gradient(115deg, #2a7aba 16%, #193463 16%) !important;
    }

    .landscape .bgColor_on_currentModal.active_6 {
        background: linear-gradient(115deg, #9e3e93 16%, #193463 16%) !important;
    }

    .landscape .bgColor_on_currentModal.active_7 {
        background: linear-gradient(115deg, #3eab4e 16%, #193463 16%) !important;
    }

    .landscape .bgColor_on_currentModal.active_8 {
        background: linear-gradient(115deg, #3a62a6 16%, #193463 16%) !important;
    }

    /* Added CSS For Pixel And Iphone Landscape Image Small Appear Issue */
    .My-carousel>.carousel-parent>.inner-flex-row>.inner-flex>.inner-item>.item.level0.visitedCard {
        padding: 3px 10px !important;
    }

    /* end */
    .mainFlashcard_flip .testcard1_ff {
        font-size: 18vmin;
    }

    .landscape .syllablepick-heading.Syllable_stars .stars_interactivity {
        margin: 0px 0 !important;
        padding: 0;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 36vh;
        width: 90%;
    }

    .interactivity-wrap-03 .w25 {
        width: 35%;
    }

    .Contraction-wrap img {
        width: 58%;
    }

    .portrait .Contraction-wrap>div {
        font-size: 30px;
    }

    .width100.margin-auto {
        margin: -13px auto 0 auto !important;
    }

    .landscape .three-box-wrapper {
        height: 90px;
    }

    .landscape .basket-apple {
        width: 17%;
        margin-top: 9px;
    }

    .landscape .basket-apple h3 {
        font-size: 17px;
    }

    .landscape .contraction-string h3 {
        font-size: 17px;
    }

    .landscape .basket-apple.contractionQuestion {
        margin-top: 12px;
    }

    .landscape .Contraction-wrap>div {
        top: 5px;
        font-size: 13px;
    }

}

@media (max-width: 900px) and (orientation: portrait) {
    .drag-container .layout-align-space-around-center.layout-row {
        box-sizing: border-box;
        display: inline-block;
        float: left;
        width: 50%;
    }
}

@media (max-width: 991px) {

    /*increased value from 900 to 991 to cover surface pro device */
    .modal .modal-dialog {
        margin-left: 20px;
    }

    .flip-divider {
        width: 33.333%;
        margin: 15px auto;
    }

    .mainFlashcard_flip .flash-card-row {
        display: inline-block;
        margin-top: 20px;
        height: 100%;
    }

    .video-container {
        height: 100% !important;
    }

    .mainFlashcard_flip .testcard1_ff {
        border: 4px solid #23408e;
    }

    .mainFlashcard_flip .testcard2_ff {
        border: 4px solid #23408e;
    }

    .clicksoundinteractivity .click-rating {
        margin-bottom: 14px;
    }

    /* this css is causing issue in Interactivity Drag columns on responsive 16-12-2019  */
    /* .drag-container.layout-column,
    .drag-container .layout-align-space-around-center .layout-row {
        box-sizing: border-box;
        display: inline-block;
        float:left;
    } */
    .drag-container.layout-column {
        width: 100%;
    }

    .drag-container .btn-droppable {
        width: 100%;
    }

    .modal .modal-dialog {
        /* margin-left: 0; */
    }

    .modal .modal-dialog .accordion {
        border: none;
    }

    .modal .modal-dialog .accordion .accordion__item {
        border: 1px solid #d1d6e0 !important;
        margin-bottom: 10px !important;
        border-radius: 0px !important;
        float: left;
        width: 100%;
    }

    .modal .modal-dialog .accordion .accordion__item h3 {
        font-size: 12px !important;
        font-weight: 600 !important;
        width: 90% !important;
        position: relative;
    }

    .modal .modal-dialog .accordion .accordion__item .accordion__title {
        padding: 10px !important;
        background: #d1d6e0 !important;
    }

    .modal .modal-dialog .accordion .accordion__item .accordion__title>.accordion__item {
        background: #d1d6e0 !important;
    }

    .modal .modal-dialog .accordion .accordion__item h3 .accordion__arrow {
        right: -30px !important;
    }

    .phonicsMain #noanim-tab-example ul.menuList {
        margin: 0;
        width: calc(100% - -30px);
        margin-top: -20px;
        margin: 0 -15px;
    }

    .phonicsMain #noanim-tab-example ul.menuList li.menuItem {
        margin: 0;
    }

    .phonicsMain #noanim-tab-example ul.menuList li.menuItem a {
        margin: 0;
        padding: 0;
        text-align: left !important;
    }

    .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        margin: 0;
        font-size: 12px;
        font-weight: 600;
    }

    .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        border: none;
        background: transparent;
        text-align: left;
        line-height: 25px;
        padding: 0 15px;
    }

    .connectthedots-letter-select-option li::before {
        background-size: 100%;
        height: 100vh;
    }

    .clicksoundinteractivity .trumpCard_red {
        position: static;
        height: 28vh;
        width: 26vh;
    }

    .landscape .clicksoundinteractivity .trumpCard_red {
        width: 21vh;
    }

    .portrait .icon-backward.md-button.md-ink-ripple {
        border: 2px solid;
        padding: 0 4px 0 0;
        background-color: #fff;
        min-width: 37px !important;
        height: 37px !important;
        border-radius: 50% !important;
    }

    .portrait .icon-forward.md-button.md-ink-ripple {
        border: 2px solid;
        padding: 0 0 0 4px;
        background-color: #fff;
        min-width: 37px !important;
        height: 37px !important;
        border-radius: 50% !important;
    }

    .portrait header .letters-text-wrap {
        max-width: 280px;
    }

    .stageCnt {
        display: flex;
        overflow: auto !important;
        max-width: none;
    }

    /*******fix connect the dot height issue**********/
    .connectthedots-container {
        position: relative;
    }

    .connectthedots-canvas-container {
        top: 2.1em;
    }

    .clicksoundinteractivity .trumpCard_red {
        height: 18vh;
    }

    /*use for minimize the size of  inetractivity images*/
    .clicksoundinteractivity .trumpCard_red img {
        width: 70%;
    }
}


/*range for pixel 3 device*/

@media (max-width: 877px) and (min-width: 877px) {
    .landscape .stageCnt {
        display: flex;
        max-width: 156px;
        overflow-y: hidden;
        overflow-x: auto !important;
        height: 45px;
    }

    .landscape .corrCard i,
    .wrongCard i {
        right: 34px;
    }

    .landscape #firstSoundPick .corrCard i,
    .landscape #firstSoundPick .wrongCard i {
        right: -16px;
    }
}


/*Css for fix issue while minimize the screen without selecting responsive mode*/

@media (max-width: 1200px) and (min-width: 900px) {
    .landscape .shootrocketrow.shoot_4curdefault {
        width: 100%;
    }

    .landscape .shootrocketrow .shoot_image1 {
        margin-top: 0;
        width: 600px;
        margin: auto;
        position: relative;
    }

    .landscape .shootgamelevel {
        margin: 0 auto;
        position: absolute;
        bottom: 14.6%;
        text-align: center;
        float: left;
        width: 90% !important;
        left: 0% !important;
        right: 0;
    }

    .landscape .shoot_instruct1 {
        left: auto !important;
        right: 40px;
    }

    .landscape .shootrocketMainPages {
        width: 100%;
    }

    .landscape .shoot_countdownclock {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .landscape div#shoot_countdownBar.shoot_countdownBar {
        background: none !important;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        margin-left: 10px;
        margin-top: 10px;
        top: 43% !important;
        left: auto !important;
    }

    .landscape .shoot_timeremaining,
    .landscape .shoot_timermode {
        margin-top: 69px;
        font-size: 18px;
        margin-left: -16px;
        background-color: #e8f66d;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 65px auto 0 auto;
        border-radius: 7px;
        height: 29px;
        border: 2px solid #ff0866;
    }

    .landscape .shoot_timermode {
        margin-top: 54px;
    }

    .landscape #shoot_countdownNumber,
    .landscape #shoot_timerselectedType {
        width: 50%;
        background: rgb(255, 95, 117);
        border-radius: 7px;
        font-size: 22px;
        display: inline-block;
        left: 0;
        right: 0;
        margin: auto;
    }

    .landscape .shoot_gameshoottitlebgimg {
        transform: scale(0.5, 0.65);
        -ms-transform: scale(0.5, 0.65);
        -webkit-transform: scale(0.5, 0.65);
        margin-left: -40px;
    }

    .landscape .shoot_gamelettermodeimg {
        transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        margin-left: 20px;
    }

    #shoot_gamestarsrating {
        transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        margin-left: -20px;
    }

    .drag-container .btn-draggable {
        width: 21vh;
    }

    /*start Css For ABC Match Result Screens*/
    #abcMatchMainBody .abcgame_playagain,
    #abcMatchMainBody .abcgame_timeup {
        background-image: none;
        width: 118px;
        background-repeat: no-repeat;
        height: auto;
        font-size: 16px;
        box-shadow: 0px 2px 0px 4px rgb(75, 69, 81);
        border-radius: 67px;
        line-height: 29px;
        padding: 0;
        margin: auto;
        background-color: #fcffc5;
        border: 4px solid #f6006d;
        border-top: none;
        font-weight: bold;
    }

    /*End Css For ABC Match Result Screens*/
    /* responsive style for abc match game ....*/
    .landscape .abcgame_abc-container .abcgame_centerGamePart,
    .landscape .abcgame_abc-container .abcgame_abcpick_floatPlayArea {
        width: 50%;
        overflow: hidden;
    }

    .landscape #abcMatchMainBody .abcgame_abc-container .abcgame_abcpick_floatPlayArea {
        width: 100% !important;
        height: 100%;
    }

    /* also resize cards according to available width */
    .landscape .abcgame_abcpick_card {
        max-width: 18%;
        margin-right: 4px;
        margin-bottom: 4px;
        height: 100%;
    }

    .landscape .abcgame_abcpick_card_front {
        width: 100%;
    }

    .landscape .abcgame_abcpick_card_back1,
    .landscape .abcgame_abcpick_card_back {
        width: 90%;
        height: 90%;
    }

    .landscape .abcgame_abcpick_card_back1 {
        margin-left: 5px;
    }

    .landscape .abcgame_abcpick_box_word {
        font-size: 30px;
    }

    /*.landscape .abcgame_abcpickparent .abcgame_centerGamePart{
        width: 622px;
    }*/
}


/*Css for fix issue while minimize the screen without selecting responsive mode*/
@media (max-width: 1200px) and (min-width: 900px) and (orientation: landscape) {

    .landscape .shoot_timeremaining,
    .landscape .shoot_timermode {
        margin-top: 69px;
        font-size: 18px;
        margin-left: -16px;
        background-color: #e8f66d;
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 65px auto 0 auto;
        border-radius: 7px;
        height: 29px;
        border: 2px solid #ff0866;
    }

    .landscape .shoot_timermode {
        margin-top: 54px;
    }

    .landscape #shoot_countdownNumber,
    .landscape #shoot_timerselectedType {
        width: 90%;
        background: rgb(255, 95, 117);
        border-radius: 7px;
        font-size: 22px;
        display: inline-block;
        left: 0;
        right: 0;
        margin: auto;
    }

    #billBoard .twoflash-cont {
        width: 100% !important;
    }
}

@media (max-width: 900px) and (min-width: 767px) {
    #wordLadder .heading h3 {
        font-size: 25px !important;
    }

    .shoot_gameplaybgimg .shootrocketPages,
    .shoot_gameplaybgimg .shootrocketPage1 {
        height: 100%;
    }

    .portrait #shootContainerGame {
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -o-transform: none;
    }

    .portrait #shoot_gamestarsrating {
        transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        margin-top: -19px;
    }

    .shootrocketrow .shoot_image1 {
        width: 100%;
        max-width: 600px;
        margin: auto;
    }

    .portrait .shoot_instruct1 {
        left: auto !important;
        right: 40px;
    }

    .portrait .shootgamelevel {
        width: 90% !important;
    }

    .portrait .abcgame_maincontainer {
        width: 100% !important;
        top: 0;
        transform: none;
        height: 100% !important;
    }

    .portrait .abcgame_abcpickrecommendedgame img {
        width: 100%;
    }

    .portrait .abcgame_smlogo {
        background-size: 100% 100%;
        background-size: contain;
        background-position-x: 50%;
        width: 100%;
    }

    .portrait .abcgame_SMtimermodeparent {
        position: absolute;
        bottom: 10%;
    }

    .portrait .abcSoundMobileView.abcgame_maincontainer {
        height: 70% !important;
        top: 34px;
    }

    .portrait #shoot_game_div {
        height: 66%;
        width: 87%;
        float: left;
    }

    .shoot_gameplaybgimg .shootrocketPages {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .portrait .shoot_countdownclock {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .portrait div#shoot_countdownBar.shoot_countdownBar {
        background: none !important;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        margin-left: 10px;
        margin-top: 10px;
        top: 43% !important;
        left: auto !important;
    }

    .portrait .shoot_timeremaining,
    .portrait .shoot_timermode {
        margin-top: 69px;
        font-size: 18px;
        margin-left: -16px;
        background-color: #e8f66d;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 65px auto 0 auto;
        border-radius: 7px;
        height: 29px;
        border: 2px solid #ff0866;
    }

    .portrait .shoot_timermode {
        margin-top: 54px;
    }

    .portrait #shoot_countdownCircle {
        margin-left: 8px !important;
    }

    .portrait .abcgame_abcpickparent {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* style for rhs clock on desktop screen < 900 */
    .portrait div.abcgame_abccol_portrait.abcgame_bottom.layout-fill {
        position: static;
        transform: none;
        -webkit-transform: none;
    }
}

@media (max-width: 900px) and (min-width: 767px) and (orientation: portrait) {
    .shootrocketrow .shoot_image1 {
        max-width: 100%;
    }

    .portrait #shootContainerGame {
        top: 88px;
    }

    .quizz_reader .col-md-12 {
        display: flex;
        align-items: center;
    }

    .portrait .abcgame_maincontainer {
        height: 70% !important;
        width: 100% !important;
        top: 50%;
        transform: translateY(-50%);
    }

    .portrait .abcSoundMobileView.abcgame_maincontainer {
        height: 63% !important;
        top: 42%;
        transform: translateY(-50%);
    }

    .portrait div.abcgame_soundMatchContainerrow {
        display: block;
    }

    .portrait #shoot_game_div {
        height: 100%;
        width: 100%;
        float: left;
    }

    .portrait .abcgame_soundMatchContainerwrap ul li {
        padding-bottom: 10px;
    }

    .drag-container .btn-droppable {
        width: calc(23vh - 20px);
    }

    /* .drag-container .btn-draggable {
        width: 100%;
    } */
}


/*end Css for fix issue while minimize the screen without selecting responsive mode*/

@media (max-width: 768px) {

     .portrait .gameBody#gameBody .abcgame_sminstructions,
     .portrait .gameBody#gameBody .lgf_helpinstruction,
    .portrait .gameBody#gameBody .helpinstruction {
            z-index: auto;
        }
    .portrait #flipping_leatherbook .bookTemplate3 .flipbook .page .book-wrapper .pageDiv {
        height: 30%;
    }

    .portrait #flipping_leatherbook .bookTemplate3 .flipbook .page .book-wrapper .audio-text {
        height: 70%;
    }

    .clicksoundinteractivity .eight-falsh-card-wrap .wordbeginingsound {
        height: calc(100% - 88px);
    }

    /*   Fix SL3-10011: Footer in Android overlaping search 
    .content-pagination {
        z-index: 999;
    }
    */
    .portrait .click-soundcard-wrap .flex-20 {
        flex: 1 1 40%;
        max-width: 33%;
    }

    .modal .modal-dialog .nav-bar-btn {
        margin-top: 0;
    }

    .clicksoundinteractivity .click-soundcard-wrap {
        display: inline-block;
    }

    .clicksoundinteractivity .md-padding.ng-scope.layout-align-center-center.layout-row.flex-25 {
        width: 25%;
        flex: auto;
        float: left;
        max-width: 25%;
        margin: 0;
        padding: 10px;
    }

    .phonicsMain #noanim-tab-example ul {
        margin: -80px 0 98px 0;
    }

    .phonicsMain #noanim-tab-example {
        margin-top: 20px;
    }

    .portrait .abcgame_sm_RP_repeatsound .abcgame_smrepeatletter {
        background-size: 75%;
        background-position: center center;
        padding-bottom: 20px;
        padding-top: 16px;
        height: 50px;
        margin-top: 0;
    }

    .landscape .abcgame_abcpickparent .abcgame_abc-container .abcgame_centerGamePart {
        width: 47%;
    }

    .abcgame_abcpick_scoreboxeachlevelcongrats {
        margin-top: 74% !important;
    }

    .abcgame_abcpick_gameResultWrapper {
        width: 50%;
        height: 20%;
    }

    .portrait .interactivity #consonant_pick .flip-divider {
        max-height: 325px;
    }

    .portrait .interactivity.interactivityfullScreen #consonant_pick .flip-divider {
        max-height: 380px;
    }

    .portrait .three-box-wrapper {
        height: 160px;
    }

    .portrait .basket-apple {
        width: 22%;
        margin-top: 33px;
    }

    .portrait .basket-apple h3 {
        transform: translateY(-3%);
        font-size: 22px;
    }

    .contraction-string h3 {
        font-size: 30px;
    }

    .portrait .apples_bg .audio-text {
        font-size: 12px !important;
    }

    .portrait .Contraction-wrap>div {
        font-size: 15px;
        top: 5px;
    }
        .add-search-dd {
            right: 0;
        }
}

@media (max-width: 1024px) {
    .landscape header .connect-dot-bg>div {
        width: 120px;
    }
}

@media (max-width: 940px) {
    .landscape header .connect-dot-bg>div {
        width: 145px;
        margin: 0 0 0 255px;
    }

    /* .landscape .stageCnt{
        display: flex;
        max-width: 120px;
    }*/
    header .h-right {
        width: 343px;
    }
}


/*@media (min-width:768px) and (max-width:934px){
    /*header .letters-text-wrap{
        float: right;
    }
    header a.icon-menu{
        float: left;
    }

    header .h-left{
        padding: 0;
    }
  header .titleWood{
    margin-top: 20px;
  }
  header .icon-home.homeBtn{
    margin-left: 25px;
  }

   .connectthedots-innerwrapper{
    width: 70%;
   }
}*/

@media (min-width: 768px) and (max-width: 934px) {
    .interactivity .carousalFlipCard .audio-text .align-middle {
        justify-content: center;
    }

    #interactivity_div .carousalFlipCard .flipcardInteractivity .click-rating {
        margin-bottom: 90px;
    }

    .pre-lesson {
        display: none;
    }
}


/*remove css from fixing width issue*/

@media (max-width: 600px) {
    .mainFlashcard_flip .flash-card-row .flip-divider {
        width: 50%;
    }

    .portrait .clicksoundinteractivity .md-padding.ng-scope.layout-align-center-center.layout-row.flex-25 {
        width: 50%;
        max-width: 50%;
    }

    .portrait .clicksoundinteractivity .trumpCard_red {
        height: 28vh;
        width: 100%;
    }

    .vowels-container .vowels-game-container {
        flex-direction: column !important;
    }

    .vowels-left-column .row.clock {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vowels-letter>.button_bg>span {
        font-size: 20px;
    }

    .vowels-container .vowels-left-column,
    .vowels-container .vowels-right-column {
        width: 100% !important;
        flex-direction: row !important;
    }

    .vowels-container .vowels-centered-column {
        width: 100% !important;
        padding: 0 15px !important;
    }

    .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        padding: 20px 0px;
    }

    .vowels-game-event-icons {
        width: auto !important;
    }
}

/*For kindle 8 device (601x962)..increased the range of media query for portrait...*/
@media (max-width: 767px) and (orientation: portrait) {
    .phonicsMain .menuTabHeader li button i.fa.fa-check-circle{
        right: 3px !important;    
    }

    .phonicsMain .menuTabHeader li button i.fa.fa-check-circle:after {
        display: block !important;
    }

    .portrait #phonicsHeader:has(.headerfull) .icon-menu,
    .portrait .headerfull .icon-menu,
    .portrait .headerfull .icon-menu {
        right: 88px !important;
    }

    .portrait .headerfull a#wc-mobileMenuBtn {
        right: 50px !important;
    }
    
    #phonicsFooter .left-icon .fa.fa-arrow-circle-o-left {
        font-size: 35px;
    }

    .portrait .letterHolder {
        flex-direction: column;
        align-items: center;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    .headerfull+div#mainBodyContainer {
        height: calc(100dvh - 106px) !important;
    }

    .portrait body#appBody .video-container .contentfull.interactivityfullScreen {
        margin: 0 0 0 0 !important;
    }

    .appPageParentDiv.reading-home-page-wraper .header_setting_btn button::before {
        color: #ffffff !important;
        top: 5px !important;
    }

    .ereader-right-footer-wrapper {
        width: auto !important;
        flex-direction: column-reverse !important;
    }

    #footer-recording-menu button {
        padding: 6px 12px;
    }

    button.btn.btn-primary {
        padding: 6px 8px;
    }

    .portrait .letterHolder .layout-align-space-around-center {
        max-width: 100%;
        min-width: 100%;
        flex: 1 1 100%;
    }

    #phonicsFooter .left-icon {
        position: absolute;
        left: 45px;
    }

    .portrait .phonicsMain #recordingIframe #recordingEreader {
        max-height: calc(100dvh - 153px);
    }

    .portrait .phonics_popup.menuDialog md-icon {
        background-size: 40px;
    }

    .portrait .phonics_popup .nav-bar-btn.active md-icon {
        background-size: 45px;
    }

    .mainFlashcard_flip .flash-card-row .flip-divider {
        width: 100%;
    }

    .mainFlashcard_flip .flash-card-row .flip-divider {
        width: 100%;
        max-width: 80%;
        float: none;
    }

    .portrait .interactivity div#calenderFlipCardMainDiv .audio-text {
        margin: 6px 0;
    }

    .portrait div#calenderFlipCardMainDiv {
        align-content: normal;
        flex-direction: column;
    }

    .portrait .carousalFlipCard .container.calendar-row .upsideDownFlip,
    .portrait .carousalFlipCard .container.calendar-row .row,
    .portrait .carousalFlipCard .container.calendar-row .noCalendarFlip {
        height: auto;
    }

    .clicksoundinteractivity .click-soundcard-wrap {
        height: auto;
    }

    .portrait .btn-droppable,
    .portrait .btn-draggable {
        width: 19vw;
        height: 19vw;
    }

    .MuiDialog-paper {
        margin: 20px !important;
    }

    /* game-logo */
    .portrait #interactivity_div #letsgofishing .gameWrapper .leftSideBar .row.logo img {
        width: 85% !important;
        max-width: 100% !important;
    }


}

.clicksoundinteractivity {
    height: 100%;
}


/* Remove background image as it was creating issues in different screen resolutions
.connectthedots-game-headline{
    background: #df2c5c;
    border-radius: 50px;
    border: 5px solid #b0633d;
    box-shadow: 0 0 10px #000 inset;
}
*/

@media only screen and (min-width:1026px) and (max-height:570px) {

    /* added css for Flashcard flip cards height issues above 570px height */
    .landscape #calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.flipallcard .front,
    .landscape #calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene .front,
    .landscape #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 40vh !important;
        min-height: 20vh;
    }

    /* end */
    /* .landscape #lesson_ifr #interactivity_div #letter-sequence {
        min-height: 450px;
    } */

    .landscape #interactivity_div #words_rhyiming .opposite_component {
        position: relative !important;
        top: 0px !important;
    }

    .landscape #interactivity_div #words_rhyiming .right_column {
        top: 18px;
    }
}

@media (max-height: 570px) {
    #appBody .phonics_popup {
        display: block;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        height: 100%;
    }

    #interactivity_div .connectthedots-container {
        position: relative;
        justify-content: inherit !important;
    }

    .draggable-wrap,
    .source-preview {
        min-width: auto;
    }

    #wordLadder .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        height: 100% !important;
    }

    #wordLadder.vowels-container {
        min-height: 450px !important;
    }

    #wordLadder .vowels-column .vowels-letter-boxes .vowel-letter {
        height: 55px !important;
    }

    #wordLadder .vowels-letter-boxes .vowel-letter h3 {
        font-size: 25px !important;
    }

    #wordLadder .heading h3 {
        font-size: 35px !important;
    }

    #wordLadder .vowels-column .vowels-img {
        height: 90px !important;
        margin: 10px auto !important;
        width: 95%;
    }

    #wordLadder .vowels-column .vowels-letter-boxes .vowel-letter h3 {
        margin: 3px 0px !important;
        line-height: 35px;
    }

    #wordLadder .vowels-letter-boxes .vowel-letter h3 {
        font-size: 18px !important;
        line-height: 30px !important;
        margin: 0 !important;
    }

    #wordLadder .vowels-column .vowels-letter-boxes .vowel-letter {
        height: auto !important;
        margin: 0px 0px !important;
    }

    #wordLadder .vowels-column .vowels-letter-boxes .vowel-letter h3 {
        margin: 3px 0px !important;
    }

    #wordLadder .vowels-bg {
        padding: 5px 0px;
    }

    #interactivity_div .connectthedots-container .connectthedots-centerlized-wrapper {
        margin-top: 0 !important;
        height: inherit !important;
    }

    #interactivity_div img.connectthedots-game-text {
        top: 15px !important;
    }

    #interactivity_div .connectthedots-star-rating {
        top: 10px !important;
    }

    #interactivity_div .gameContainer .connect-the-dots-wrapper {
        margin-top: 0 !important;
    }

    .leather-book.BookWood .lession-sentence {
        font-size: 9px;
    }

    .flipcardInteractivity,
    .interactivityDiv {
        height: 100% !important;
    }

    .landscape .interactivity .flip-divider {
        min-height: 279px;
    }

    #play_interactivity_pw {
        min-height: 420px;
    }

    .landscape #fisrt-sound-pick {
        overflow: visible;
    }
}

@media (max-height: 767px) {
     .gameBody  .abcgame_maincontainerContent  .abcgame_smgameplayWrap .abcgame_sm_alphabets {
            font-size: 16px !important;
        }
    .portrait #SightWordBlast .abcgame_abcpick_gameResult {
        padding-left: 15%;
        display: block;
        padding-top: 30%;
    }

    .logo a:nth-child(2) img {
        max-width: 135px;
    }

    .connectthedots-container .gameWrapper {
        height: auto !important;
        overflow-y: auto !important;
    }

    .vowels-letter-boxes .vowel-letter {
        height: 55px !important;
    }

    #wordLadder .vowel-bg {
        padding: 15px 0px;
    }

    .vowels-img {
        height: 145px !important;
        margin: 10px 0px !important;
    }

    .instruction_text {
        margin: 10px auto 0;
    }

    .container.calendar-row {
        width: 100%;
    }
}

@media (max-width: 980px) and (min-width: 768px) {

    /* to fix connect the dots game screen on google pixel */
    .landscape .connectthedots-game-headline {
        width: 105px;
        height: 75px;
    }

    .landscape .abcgame_SMtimermodeparent {
        margin-top: 19% !important;
    }

    .landscape .abcgame_abcpickrecommendedgame img {
        margin-top: 0;
    }

    .landscape .abcgame_abcpickrecommendedgame button {
        bottom: 33%;
    }
}


/* @media (min-width:300px) and (max-width:900px){

    .portrait .connectthedots-game-start-logo{
        width: 30%;
        top: 2% !important;
    }
    .portrait .connectthedots-game-headline {
        top: -04%;
        text-align: center;
        left: 0;
        width: 8em;
        height: 4.4em;
        background-size: contain;
        right: 0;
        margin: 3em auto 0 auto;
    }

    .portrait .connectthedots-sg-left-container .connectthedots-game-headline .connectthedots-star-rating{
        display: none;
    }

    .portrait .connectthedots-main-wrapper {
        height: 600px !important;
    }
    .portrait .connectthedots-innerwrapper{
        width: 100%;
    }
    .portrait .connectthedots-game-text {
        left: 0;
        right: 0;
        margin: 22% auto 0 auto;
    }

    .portrait .connectthedots-game-inner-container {
        width: 100%;
        margin: 0px auto;
        right: 3em;
        height: 75% !important;
    }
    .portrait .connectthedots-game-event-icons ul li {
        list-style: none;
        margin: 4px 10px 0 10px;
        display: inline-block;
    }
    .connectthedots-star-rating ul li .fa-star {
        font-size: 22px;
    }
    .portrait .connectthedots-star-rating ul li {
        margin: 0 2px !important;
    }

    .portrait .phonicsMain .connectthedots-startgame-innerwrapper .connectthedots-canvas-container canvas#canvas {
        width: auto !important;
        height: auto !important;
    }
    .portrait .connectthedots-outputimg-container {
        top: 0.1em;
        left: 0.1em;
    }
    .connectthedots-start-game-container .connectthedots-sg-left-container {
        width: 18%;
    }

    .portrait .content-pagination span.pre-lesson{
        display:none !important;
    }

    .portrait header{
        box-shadow: 0px 0px 4px 5px rgba(0,0,0,0.05);
    }
    .phonicsMain #noanim-tab-example ul.menuList li.menuItem a img {
        float: left;
        margin-right: 10px;
        width: 11%;
        margin-top: 4px;
    }
} */


/* styling for header footer on mobile portrait */

#root,
#root>.segment {
    height: 100%;
}

.ui.segment {
    padding: 0;
}

header.extra .connect-dot-bg,
header.headerfull .connect-dot-bg {
    display: none;
}

.flashcardContainr,
.ebookContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


/* Ebbok css start */

.ebookContainer {
    align-items: center;
}

.ebookContainer #ereader {
    width: 100%;
}

.ebookContainer .instruction_text {
    font-size: 1.6vw;
}

.fa-arrow-alt-circle-left {
    font-size: 34px;
    color: #000;
    margin-left: 13px;
    z-index: 9;
    cursor: pointer;
}

.left-icon {
    z-index: 10;
}

.ebookContainer #ereader_images {
    width: 100%;
}

.recommendedEbookBg #ereader_images {
    height: 100%;
}

.recommendedEbookBg #ereader_images .ereader-book {
    border-radius: 0px !important;
    box-shadow: none !important;
    background: transparent !important;
    position: relative;
    border: none !important;
}


/* 
.recommendedEbookBg #ereader_images .ereader-book::before,
.recommendedEbookBg #ereader_images .ereader-book::after {
    height: 100%;
    width: 10px;
    background-image: url(https://ap.bayatree.com/frontend/resources/phonics/css/images/books-rings.png);
    content: "";
    background-size: 5vw 1vh;
    background-position: left top;
    position: absolute;
    left: 0;
    display: block;
    z-index: 999;
} */

.recommendedEbookBg #ereader_images .ereader-book img {
    padding: 0 !important;
}

#ereader_images .ereader-book {
    position: relative;
    background: transparent;
    background-repeat: no-repeat;
    font-size: 6vw;
    height: 100%;
    width: 100%;
    border-radius: 0px;
    cursor: pointer !important;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: row;
}

.ereader_bookimages .ereader_images .ereader-divider .ereader-book {
    border: 5px solid #fff !important;
    border-radius: 8px !important;
    box-shadow: 1px 1px 8px #000 !important;
    background: #fff !important;
}


/* #ereader .ereader-book img{
    object-fit: fill;
} */


/* Ebbok css end */


/* styling for shoot rocket game.... */


/*#shoot_countdownBar {
    position: static;
    width: 100%;
    height: auto;
}

.shoot_timeremaining {
    margin: 0;
}

#shoot_countdownNumber, #shoot_timerselectedType {
    position: static;
    font-size: 22px;
    color: rgba(0,0,0, 0.75);
}

.shoot_timermode {
    margin: 0;
}*/


/* to fix abc match timer watch height issue */

.abcgame_abcpick_section3,
.abcgame_abcpick_section3 .custom-column {
    float: left;
    width: 100%;
}

.abcgame_abcpick_LL,
.abcgame_abcpick_RL,
.abcgame_abcpick_PL,
.abcgame_abcpick_leftMenuRow1 {
    /*     float: left; */
}

.abcgame_abcpick_timer {
    float: left;
    /*     position: relative; */
}

.abcgame_abcpick_clockbase {
    float: left;
    /*     position: relative; */
}

@media (min-width: 901px) {
    header.extra .connect-dot-bg.isDesktop {
        display: block;
    }

    .portrait header.extra .connect-dot-bg.isDesktop {
        display: none;
    }
}

@media (max-width: 901px) {
    header.extra .connect-dot-bg.isMobilePortrait {
        display: none;
    }
}

.activeMobileLink {
    background: #d1d6e0;
}

.modal .modal-dialog .accordion__body .accordion .accordion__item .accordion__title {
    background: #d1d6e0 !important;
}


/* style for menu activity icons on mobile and desktop lower resolutions*/

@media (max-width: 901px) {
    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        padding: 0 15px;
        width: 100%;
        margin: 0px 0;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button img {
        max-width: 20px;
        float: left;
        margin-right: 10px;
    }
}

#shoot_gamestarsrating {
    transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    margin-left: -20px;
}


/* responsive style for abc match game ....*/

.landscape .abcgame_abc-container .abcgame_abcpick_floatPlayArea {
    width: 50%;
    /* height: 50vw !important; */
}

.landscape #abcMatchMainBody .abcgame_abc-container .abcgame_abcpick_floatPlayArea {
    width: 100% !important;
    height: 100%;
}


/* also resize cards according to available width */


/* .landscape .abcgame_abcpick_card {
    max-width: 18%;
    margin-right: 4px;
    margin-bottom: 0px;
    /* height: 100%; */

.landscape .abcgame_abcpick_card_front {
    width: 100%;
}

#abcMatchMainBody .abcgame_abcpick_card_back1,
#abcMatchMainBody .abcgame_abcpick_card_back {
    width: 100%;
    height: 100%;
    margin: 0;
}

.landscape .abcgame_abcpick_box_word {
    font-size: 30px;
}

@media (max-width: 900px) and (min-width: 767px) {

    .shoot_gameplaybgimg .shootrocketPages,
    .shoot_gameplaybgimg .shootrocketPage1 {
        height: 100%;
    }

    .portrait #shootContainerGame {
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -o-transform: none;
    }

    .portrait #shoot_gamestarsrating {
        transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        margin-top: -19px;
    }

    .shootrocketrow .shoot_image1 {
        width: 100%;
        max-width: 600px;
        margin: auto;
    }

    .portrait .shoot_instruct1 {
        left: auto !important;
        right: 40px;
    }

    .portrait .shootgamelevel {
        width: 90% !important;
    }

    .portrait .abcgame_maincontainer {
        width: 100% !important;
        top: 0;
        transform: none;
        height: 100% !important;
    }

    .portrait .abcgame_abcpickrecommendedgame img {
        width: 100%;
    }

    .portrait .abcgame_smlogo {
        background-size: 100% 100%;
        background-size: contain;
        background-position-x: 50%;
        width: 100%;
    }

    .portrait .abcgame_SMtimermodeparent {
        position: absolute;
        bottom: 10%;
    }

    .portrait .abcSoundMobileView.abcgame_maincontainer {
        height: 66% !important;
        top: 34px;
    }

    .portrait #shoot_game_div {
        height: 66%;
        width: 87%;
        float: left;
    }

    .shoot_gameplaybgimg .shootrocketPages {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .portrait .shoot_countdownclock {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .portrait div#shoot_countdownBar.shoot_countdownBar {
        background: none !important;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -moz-transform: scale(1.1);
        margin-left: 10px;
        margin-top: 10px;
        top: 43% !important;
        left: auto !important;
    }

    .portrait .shoot_timeremaining,
    .portrait .shoot_timermode {
        margin-top: 69px;
        font-size: 18px;
        margin-left: -16px;
        background-color: #e8f66d;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 65px auto 0 auto;
        border-radius: 7px;
        height: 29px;
        border: 2px solid #ff0866;
    }

    .portrait .shoot_timermode {
        margin-top: 54px;
    }

    .portrait #shoot_countdownCircle {
        margin-left: 8px !important;
    }

    .portrait .abcgame_abcpickparent {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* style for rhs clock on desktop screen < 900 */
    .portrait div.abcgame_abccol_portrait.abcgame_bottom.layout-fill {
        position: static;
        transform: none;
        -webkit-transform: none;
    }
}

@media (max-width: 900px) and (min-width: 767px) and (orientation: portrait) {
    .shootrocketrow .shoot_image1 {
        max-width: 100%;
    }

    .portrait #shootContainerGame {
        top: 88px;
    }

    .portrait .abcgame_maincontainer {
        height: 70% !important;
        width: 100% !important;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
    }

    .portrait .abcSoundMobileView.abcgame_maincontainer {
        height: 63% !important;
        top: 42%;
        transform: translateY(-50%);
    }

    .portrait div.abcgame_soundMatchContainerrow {
        display: block;
    }

    .portrait #shoot_game_div {
        height: 100%;
        width: 100%;
        float: left;
    }

    .portrait .abcgame_soundMatchContainerwrap ul li {
        padding-bottom: 10px;
    }

    .drag-container .btn-droppable {
        width: calc(23vh - 20px);
    }

    .drag-container .btn-draggable {
        width: calc(23vh - 20px);
    }

    .drag-container .source {
        width: 80%;
    }
}


/*end Css for fix issue while minimize the screen without selecting responsive mode*/

@media (max-width: 768px) {

    .clicksoundinteractivity .click-soundcard-wrap {
        display: inline-block;
    }

    .clicksoundinteractivity .eight-falsh-card-wrap .click-soundcard-wrap {
        display: flex;
    }

    .clicksoundinteractivity .md-padding.ng-scope.layout-align-center-center.layout-row.flex-25 {
        width: 25%;
        flex: auto;
        float: left;
        max-width: 25%;
        margin: 0;
        padding: 10px;
    }

    .phonicsMain #noanim-tab-example ul {
        margin: -80px 0 98px 0;
    }

    .phonicsMain #noanim-tab-example {
        margin-top: 20px;
    }

    .portrait .abcgame_sm_RP_repeatsound .abcgame_smrepeatletter {
        background-size: 60%;
        background-position: center center;
        padding-bottom: 0;
        padding-top: 0;
        height: 46px;
        margin-top: 3px;
        vertical-align: middle;
        line-height: 34px;
        width: 192px;
        margin-left: -31px;
    }

    .landscape .abcgame_abcpickparent .abcgame_abc-container .abcgame_centerGamePart {
        width: 47%;
    }

    .landscape .abcgame_abcpick_rightmenuWrapper {
        height: 100%;
    }

    .landscape .abcgame_abcpick_ratingRow {
        width: 100%;
    }

    .landscape .abcgame_abcpick_letterSoundWrap {
        float: none;
        margin-right: auto;
        margin-left: auto;
    }

    .landscape .abcgame_abcpick_rightmenuWrapperlogo {
        width: 100%;
        float: none;
    }

    .landscape .abcgame_sidemenu {
        width: 24%;
        padding-top: 7%;
    }

    .landscape .abcgame_abcpick_leftmenuWrapper {
        overflow: visible;
    }

    .contraction-card .col-sm-3 {
        width: 33.33%;
        float: left;
    }

    .interactivity-wrap-03 .w25 {
        margin: 0px auto 10px auto;
        width: 50%;
    }
}

@media (max-width: 1024px) {
    .landscape header .connect-dot-bg>div {
        width: 120px;
    }
    
    .landscape #popover-positioned-scrolling-top {
        padding: 7px 25px 18px;
    }
}

@media (max-width: 940px) {
    .landscape header .connect-dot-bg>div {
        width: 145px;
        margin: 0 0 0 255px;
    }

    header .h-right {
        width: 437px;
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        -o-transform: scale(0.95);
    }
}

@media (min-width: 768px) and (max-width: 934px) {
    .pre-lesson {
        display: none;
    }

    #billBoard .demotrumpCard.layout-fill .layout-fill {
        width: 100%;
    }
}

@media (max-width: 630px) {
    .mainFlashcard_flip .flash-card-row .flip-divider {
        /* width: 50%;
        max-width: 50%; */
    }

    .clicksoundinteractivity .eight-falsh-card-wrap .wordbeginingsound {
        height: auto;
    }

    .portrait .clicksoundinteractivity .md-padding.ng-scope.layout-align-center-center.layout-row.flex-25 {
        width: 50%;
        max-width: 50%;
    }

    .portrait .clicksoundinteractivity .trumpCard_red {
        height: 28vh;
        width: 100%;
    }

    .contraction-card .col-sm-3 {
        width: 50%;
        float: left;
    }
}

/*For kindle 8 device (601x962)..increased the range of media query for portrait...*/
@media (max-width: 767px) and (orientation: portrait) {
    .mainFlashcard_flip .flash-card-row .flip-divider {
        width: 100%;
    }

    .mainFlashcard_flip .flash-card-row .flip-divider {
        width: 100%;
        max-width: 80%;
        float: none;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .clicksoundinteractivity .click-soundcard-wrap {
        height: auto;
    }

    .portrait .btn-droppable,
    .portrait .btn-draggable {
        width: 19vw;
        height: 19vw;
        font-size: 11vw;
    }

    .contraction-card .col-sm-3 {
        width: 100%;
    }

    .interactivity-wrap-03 .w50,
    .interactivity-wrap-03 .w25 {
        width: 100%;
        margin: 0;
    }

    .interactivity-wrap-03 .row {
        margin: 0;
    }
}

.clicksoundinteractivity {
    height: 100%;
    min-height: 420px;
}

.drag-container .source {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100% !important;
    width: 100% !important;
}

.drag-container .source img {
    width: 80%;
    object-fit: contain;
    height: 99% !important;
}

@media (max-height: 567px) {
    /*.drop_child p {
        font-size: 12vmin !important;
    }*/
}

@media (max-width: 980px) and (min-width: 768px) {

    /* to fix connect the dots game screen on google pixel */
    .landscape .connectthedots-game-headline {
        width: 105px;
        height: 75px;
    }

    .landscape .abcgame_SMtimermodeparent {
        margin-top: 10% !important;
    }

    .landscape .abcgame_abcpickrecommendedgame img {
        margin-top: 0;
    }

    .abcgame_abcpickrecommendedgame img {
        margin-top: 0;
    }

    .landscape .abcgame_soundMatchContainerrow {
        height: 616px;
        overflow: hidden;
    }

    .abcgame_soundMatchContainer {
        overflow-y: hidden;
    }

    .landscape .abcgame_sm_closeinstruction {
        top: 25%;
    }
}

.portrait .connectthedots-game-container.connectthedots-start-game-container .connectthedots-startgame-innerwrapper {
    transform: scale(0.5);
}


/* styling for header footer on mobile portrait */

#root,
#root>.segment {
    /*changed height:100vh to height:100%* to avoid scroll on devices*/
    height: 100%;
    overflow-y: auto;
}

.ui.segment {
    padding: 0;
}

header.extra .connect-dot-bg {
    display: none;
}


/* styling for shoot rocket game.... */


/*#shoot_countdownBar {
    position: static;
    width: 100%;
    height: auto;
}

.shoot_timeremaining {
    margin: 0;
}

#shoot_countdownNumber, #shoot_timerselectedType {
    position: static;
    font-size: 22px;
    color: rgba(0,0,0, 0.75);
}

.shoot_timermode {
    margin: 0;
}*/


/* to fix abc match timer watch height issue */

.abcgame_abcpick_section3,
.abcgame_abcpick_section3 .custom-column {
    float: left;
    width: 100%;
}

.abcgame_abcpick_LL,
.abcgame_abcpick_RL,
.abcgame_abcpick_PL,
.abcgame_abcpick_leftMenuRow1 {
    /*     float: left; */
}

.abcgame_abcpick_timer {
    float: left;
    /*     position: relative; */
}

.abcgame_abcpick_clockbase {
    float: left;
    /*     position: relative; */
}

@media (min-width: 901px) {
    header.extra .connect-dot-bg.isDesktop {
        display: block;
    }

    .portrait header.extra .connect-dot-bg.isDesktop {
        display: none;
    }
}

@media (max-width: 901px) {
    header.extra .connect-dot-bg.isMobilePortrait {
        display: none;
    }
}


/* style for menu activity icons on mobile and desktop lower resolutions*/

@media (max-width: 901px) {
    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        padding: 0 15px;
        width: 100%;
        margin: 0px 0;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button img {
        max-width: 20px;
        float: left;
        margin-right: 10px;
        margin-top: 3px;
    }
}


/******** css for ereader*******/

.recording.layout-column .fa,
.col-xs-2.play-recording .fa,
.col-xs-2.trash-recording .fa,
.recording-play-controls.share-recording-controls .fa {
    cursor: pointer;
}

.play-pause-recording,
.cross-button,
.facebook-email-share,
.btn-record,
#mg_top-ereader .fa.fa-play,
#mg_top-ereader .fa.fa-share-alt,
#mg_top-ereader .fa.fa-trash {
    cursor: pointer;
}

label.user_icon_title1 {
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.87);
}

.ebookControl.layout-column,
.user_icon_title1.readtype {
    width: 100%;
    display: inline-block;
    margin-top: 15px;
}

.ebookControl.layout-column .layout-column {
    width: 100%;
}

.audiocontrol_voice.user_custom_dropdown,
.audiocontrol_option.user_custom_dropdown {
    color: rgba(0, 0, 0, 0.87);
    display: block;
    padding: 4px 11px;
    line-height: 20px;
    font-size: 13px;
    border: 2px solid #cccccc;
    border-radius: 5px;
    font-weight: bold;
    background-color: #fff;
    width: 100%;
    text-align: left;
    font-family: 'Poppins', sans-serif !important;
}

.footer-switch {
    right: 75px;
}

.popover {
    border-radius: 15px;
    border: 2px solid #000;
    padding: 20px;
    background: #fff !important;
}

.popover.top>.arrow:after {
    content: " ";
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #1b3563;
}

.page-turn-switch .page-turn-title {
    position: relative;
    top: 10px;
    font-weight: bold;
    width: 50%;
    color: rgba(0, 0, 0, 0.87);
    font-size: 12px;
}

.ereader-right-footer-wrapper .btn-record i {
    margin: 0 5px 0 0px;
    width: 36px;
    height: 36px;
    position: relative;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    transition: 0.2s ease-in;
}

.rerecording-button i.fa.fa-microphone {
    margin: 0 5px 0 0px;
    width: 36px;
    height: 36px;
    position: relative;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    transition: 0.2s ease-in;
    font-size: 22px;
}

span.MuiSwitch-root.footer-switch {
    right: -10px;
    top: 11px;
}

.turn-switch-button {
    text-align: right;
    width: 50%;
}

#lesson_iframe {
    /* width: 100%; */
    height: 100%;
    padding-bottom: 0px;
}


/* .ereader-right-footer-wrapper .btn-record i span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    background: rgb(47, 47, 47) !important;
} */

span.btn-record {
    font-size: 11px;
    font-weight: bold;
    position: relative;
    float: left;
    text-transform: uppercase;
}

.ereader-right-footer-wrapper audio {
    display: none;
}

.ereader-right-footer-wrapper {
    display: flex;
    float: left;
    width: 30%;
}

div#popover-recording {
    bottom: 60px;
    top: unset !important;
}

#footer-recording-menu i.fa.fa-microphone.red {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 27px;
    border-radius: 8px;
    font-size: 20px;
    color: #fff;
    background-color: #e32122;
    transition: 0.3s ease-in;
    margin: 0px;
}

#footer-recording-menu button.btn.btn-default {
    margin: 1px;
    padding: 1px;
    background-color: #f72e30;
    border-radius: 8px;
    border: 2px solid #f72e30;
    height: 32px;
    width: 32px;
}

.ereader-right-footer-wrapper .layout-row.recording-wrap {
    margin-right: 5px;
}

#footer-recording-menu {
    background-color: #e32122;
    border-radius: 8px;
    border: 2px solid #e32122;
}

#popover-recording .popover-content {
    position: relative;
    border: 2px solid #1b3563;
    padding: 15px 35px;
    border-radius: 10px;
    min-width: 250px;
    z-index: 999;
    box-shadow: 0px 0px 11px 3px #ada5a5;
    -webkit-box-shadow: 0px 0px 11px 3px #ada5a5;
    -moz-box-shadow: 0px 0px 11px 3px #ada5a5;
    -ms-box-shadow: 0px 0px 11px 3px #ada5a5;
    -o-box-shadow: 0px 0px 11px 3px #ada5a5;
    background: #fff;
}

#popover-recording button.btn-close {
    position: absolute;
    right: -11px;
    top: -10px;
    background-color: #fc0;
    box-shadow: 0px 1px 5px 3px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    width: 20px;
    height: 20px;
    opacity: 1;
    color: #404040;
    font-size: 15px;
    border: 1px solid #000000;
}

#popover-recording .recording-options {
    background-color: #fff;
    text-align: center;
    color: rgba(0, 0, 0, 0.87);
    padding: 10px;
    width: 100%;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
    font-family: Poppins;
    font-size: 13px;
    font-weight: bold;
}

#popover-recording p {
    font-weight: 600;
    text-align: center;
}

div#popover-recording button.close {
    padding: 0 5px;
    position: absolute;
    right: -8px;
    top: -6px;
    background-color: #fc0;
    box-shadow: 0 1px 5px 3px rgba(0, 0, 0, .08);
    border-radius: 10px;
    width: 20px;
    height: 20px;
    opacity: 1;
    color: #404040;
    font-size: 15px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#popover-recording .recording-options:last-child {
    border-bottom: 1px solid transparent;
}

#popover-recording .recording-options:hover {
    color: #bb9500;
}

i#Resume,
i#pause,
i#Stop,
i#download,
.recording-timer {
    float: left;
    margin: 0 10px;
}

i#Stop::before {
    color: red;
}

.page-turn-switch {
    display: flex;
    width: 100%;
    align-items: center;
}

.recording {
    float: left;
    margin-top: 0px;
    z-index: 9;
}

.playlistLabel {
    position: relative;
    top: 10px;
    width: 100%;
    box-shadow: none;
    background: #ffcc00;
    border: 2px solid #d0a600;
    border-radius: 25px;
    color: #6f5900;
    font-size: 14px;
    height: auto;
    font-weight: bold;
    text-transform: initial;
    margin: 0px 0 10px 0;
    min-height: 28px;
    line-height: 28px;
    display: inline-block;
    text-align: center;
    margin-bottom: 20px;
}

.btn-record div {
    position: absolute;
    left: 35px;
    top: -10px;
}

#player {
    display: none;
}

#recording-name-input .MuiInputBase-input {
    height: 40px;
    padding: 0;
    color: #424242;
    font-size: 12px;
    padding: 0 15px;
}

#recording-name-input #recording-name-label.MuiInputLabel-shrink {
    transform: translate(14px, -9px) scale(0.75);
    background-color: #fff;
}

#recording-name-input label {
    font-size: 15px;
    transform: translate(14px, 1px) scale(1);
}

#recording-name-input p#recording-name-helper-text {
    font-size: 11px;
}

.btn-action .fullscreen.md-button.md-ink-ripple {
    min-width: auto;
    min-height: auto;
    padding: 0;
    margin: 0;
}

.trash-recording .fa,
.play-recording .fa {
    color: #525252;
}

.MuiDialogContent-root .mg_top {
    padding: 20px 0;
    border-bottom: 1px solid #d8d8d8;
    min-width: 572px;
}

html #appBody #mg_top-ereader.mg_top:has(.recording-name),
html #appBody #mg_top-ereader.mg_top:has(.recording-time),
html #appBody #mg_top-ereader.mg_top:has(.play-recording) {
    justify-content: space-between !important;
    display: flex;
}

html #appBody #mg_top-ereader.mg_top .recording-name {
    font-size: 16px !important;
}

.recording-name {
    text-overflow: ellipsis;
    /* overflow: hidden;  It was hiding file name label when we save recording*/
    font-size: 13px;
    font-weight: bold;
    color: #525252;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    min-width: 96px;
}


/*Ebook social media share*/

.react-sharing-button--facebook:hover,
.react-sharing-button--twitter:hover,
.react-sharing-button--facebook:focus,
.react-sharing-button--twitter:focus {
    color: #fff;
    text-decoration: none;
}

input.range-slider__range {
    -webkit-appearance: none;
    width: 80%;
    background: #ffffff;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    height: 10px;
    border-radius: 15px;
    border: 2px solid #bb9500;
}

.speed-range-wrap {
    display: flex;
    align-items: center;
}

.speed-range-wrap span {
    margin-left: auto;
    font-size: 13px;
    font-weight: bold;
}

input.range-slider__range:hover {
    opacity: 1;
}

input.range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffcc00;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    border: 2px solid #6f5900;
    cursor: pointer;
}

input.range-slider__range::-moz-range-thumb {
    background-color: #ffcc00;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    border: 2px solid #6f5900;
    background-color: #ffcc00;
    cursor: pointer;
}

.turn-switch-button .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb {
    box-shadow: 1px 5px 7px 0px rgba(0, 0, 0, 0.2), -1px 0px 3px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    background-color: #ffcc00;
}

.turn-switch-button .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track {
    background-color: #d0a600;
}

.facebook-share i.fa.fa-facebook-f {
    margin-right: 9px;
    font-size: 18px;
    vertical-align: middle;
}

.twitter-share,
.facebook-share {
    background: #3b5998;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 8px 15px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.share-recording-controls .recording-play-timer {
    width: auto;
    padding: 2px 10px;
}

#recordingIframe .rerecording-button {
    margin: 0 0 0 10px;
}

.recording-play-timer,
.cross-button,
.play-pause-recording,
.facebook-email-share {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0 5px !important;
    line-height: 30px;
    border-radius: 8px;
    font-size: 20px;
    color: #333;
    background: #fff;
    border: 2px solid #333;
    transition: 0.3s ease-in;
}

#recordingIframe .recording-play-controls#phonicsFooter .cross-button,
#recordingIframe .recording-play-controls#phonicsFooter .play-pause-recording,
#recordingIframe .recording-play-controls#phonicsFooter .facebook-email-share{
    width: auto;
    height: auto;
    font-size: 0;
    cursor: pointer;
    line-height: normal;
}

#recordingIframe .recording-play-controls#phonicsFooter .cross-button i,
#recordingIframe .recording-play-controls#phonicsFooter .play-pause-recording i,
#recordingIframe .recording-play-controls#phonicsFooter .facebook-email-share i{
    width: 30px;
    height: 30px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.recording-play-controls.share-recording-controls .play-pause-re-recording,
.recording-play-controls.share-recording-controls .save-re-recording,
.recording-play-controls.share-recording-controls .back-re-recording {
    margin-top: 0;
}

div.back-share-wrap {
    display: flex;
}

.play-pause-re-recording,
.save-re-recording,
.back-re-recording {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0px 5px 0 0;
    line-height: 30px;
    border-radius: 8px;
    font-size: 20px;
    color: #333;
    background: #fff;
    border: 2px solid #333;
    transition: 0.3s ease-in;
}

.recording-full-screen-control {
    z-index: 9;
    margin-left: 15px;
}

.share-recording-controls {
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 65px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#interactivity_div #wordPickSound .pickbeginingwrap .culminatingWrdImg img.img-responsive.imgStroke {
    height: 100% !important;
}

#interactivity_div .CulminatingPick .culminatingWrdImg .imgStroke {
    object-fit: contain;
    height: 100%;
    padding: 0;
}

#interactivity_div .CulminatingPick .culminatingWrdImg img {
    object-fit: contain;
    height: 100%;
    padding: 10px;
}


/*********replace css for resolved img stroke issue************/

#interactivity_div .imgStroke {
    border: 1px solid #3c3c3c !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    /* height: auto; */
    max-height: 100%;
    max-width: 100%;
    padding: 0;
}

#words_rhyiming .image_box img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
}

#interactivity_div #flipping_leatherbook .imgStroke {
    height: 100%;
}

#interactivity_div #billBoard .imgStroke {
    border: 1px solid #3c3c3c !important;
    width: auto !important;
    height: auto !important;

}

.imgStroke {
    border: 1px solid #3c3c3c;
    width: 96%;
}

.poptheballoonrowborder #rhs-canvas {
    margin-left: -20px;
}

.poptheballoonrowborder #popBalloonCountdownNmbr {
    top: 37.9%;
}

.poptheballoonrowborder #gamelvlintdicationPop {
    top: 45%;
}

.poptheballoonrowborder .rhs-image-wrap {
    margin-top: 25%;
}

.abcgame_abc-containerWrap .rhs-image-wrap {
    margin-top: 5%;
}

.abcgame_abc-containerWrap .abcgame_abcpick_countdown {
    top: 48%;
}

.abcgame_abc-containerWrap .abcgame_leftMenuLevelWindow {
    top: 53%;
}

.SyllablePick span.repeat-icon:hover,
.SyllablePick #icon-volume {
    cursor: pointer;
}

.consonanat_pick .repeat-icon {
    text-align: center;
    justify-content: center;
    width: 80%;
    background-color: #4a9a43;
}


/* Custom CSS for firstSoundPick */

#firstSoundPick .trumpCard_red {
    border: none;
    border: 10px solid #23408e;
    border-radius: 20px;
    padding: 0;
}

#firstSoundPick .trumpCard_red img {
    padding: 3px;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#firstSoundPick .speaker-icon {
    border: none;
}

#firstSoundPick {
    height: 100%;
}

#firstSoundPick .eight-falsh-card-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow-y: auto;
}

#firstSoundPick .click-sound-parent {
    padding-bottom: 0;
    height: auto !important;
    max-width: 90%;
}

#firstSoundPick .click-soundcard-wrap.layout-row {
    padding: 15px;
}

#firstSoundPick .preroll-text h2.heading {
    font-size: 3vmin;
}

#firstSoundPick .preroll-text {
    width: 100%;
    background: #b2161f;
    margin-bottom: 10px;
    border-radius: 10px 10px 0 0;
    color: #fff;
    padding: 20px 0;
}

.sq-animate2:before {
    content: "";
    position: absolute;
    display: block;
    background: #fff;
    width: 0;
    height: 95%;
    z-index: 1;
    left: 3px;
    transition: 0.5s ease-in;
}

.boardString {
    position: absolute;
    bottom: -75px;
    left: 0;
    right: 0;
    height: 49px;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    max-width: 40%;
    flex-wrap: wrap;
    align-items: center;
}

.boardString {
    z-index: 9;
}

.demotrumpCard img {
    border: 1px solid grey;
}


/* #billBoard .demotrumpCard img {
    max-width: 100%;
    max-height: 100%;
} */

#billBoard .img_text {
    height: 100%;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
}

#billBoard .flash-card-cont.layout-fill.layout-align-center-center:first-child {
    padding: 15px;
}

#billBoard .demotrumpCard.layout-fill.layout-align-center-center.layout-row {
    width: 100% !important;
    height: 100% !important;
}


/* .landscape #billBoard .demotrumpCard.layout-fill.layout-align-center-center.layout-row {
    width: 100%;
} */


/* start css for pick-the-word */


/* .pickthewordinteractivity .cardfront-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.landscape .pick-the-word .flash-card-table .cell-space {
    height: 28vh;
    width: 32vh;
    margin: 0px auto 20px auto;
}

div#finished_interactivity .complete-msg {
    margin-bottom: 5px;
    text-align: center;
}

#flipping_leatherbook .complete-msg,
#billBoard.bill-board-light .complete-msg {
    color: #fff;
    text-shadow: none;
}


/* End css for pick-the-word */


/* Style for Top bar */

.logo a:first-child img {
    border-right: 3px solid #d7d7d7;
    padding-right: 8px;
    margin-right: 5px;
    max-width: 60px;
}

.logo a:nth-child(2) img {
    max-width: 235px;
}

header.container-fluid {
    background: #fff;
    border: none;
    z-index: 2;
}

header.container-fluid .logo {
    width: 40%;
    float: left;
    display: flex;
    align-items: center;
}

header.container-fluid .mob-center:nth-child(2) {
    float: left;
    width: 60%;
}

.mob-center .btn-login {
    float: right;
}

header.container-fluid .row {
    padding: 20px 35px;
}

.store-btn {
    background: rgb(220, 97, 32) !important;
    margin: 0 8px;
    border: none !important;
    border-radius: 20px !important;
    width: 120px;
}

.store-btn:hover {
    background: rgba(202, 90, 31, 1) !important;
}

.store-btn i {
    margin-right: 10px;
}

.btn-login {
    background: transparent;
    width: auto;
    border-radius: 100px;
    float: right;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.Phonics-homepage-wraper .btn-login .common-profile-wrap {
    width: 70px;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
}

.common-profile-section button.btn-close,
#popover-positioned-scrolling-top button.btn-close {
    position: absolute;
    right: -11px;
    top: -10px;
    background-color: #fc0;
    box-shadow: 0px 1px 5px 3px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    width: 20px;
    height: 20px;
    opacity: 1;
    color: #404040;
    font-size: 15px;
    border: 1px solid #000;
}

.common-profile-section {
    display: flex;
    position: relative;
    align-items: center;
}

.Phonics-homepage-wraper .common-profile-section .dropdown.btn-group {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.Phonics-homepage-wraper .common-profile-section button#basic-drop {
    outline: none;
    box-shadow: none;
}

.Phonics-homepage-wraper .common-profile-section button#basic-drop {
    background-color: transparent;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    color: #007bff;
}

.Phonics-homepage-wraper span.caret {
    position: absolute;
    border: none;
    top: 0;
    right: 23px;
    font-weight: bold;
    bottom: 0;
    margin: auto;
    color: #007bff !important;
}

.common-profile-section .sb-avatar__text,
.common-profile-section .sb-avatar__image {
    object-fit: contain;
    height: 95% !important;
    width: 95% !important;
    margin: 0 auto;
}

/* .Phonics-homepage-wraper span.caret:before {
    content: "\f107";
    font-family: FontAwesome;
    display: inline-block;
    font-size: 21px;
    top: -15px;
    position: absolute;
} */

.Phonics-homepage-wraper .common-profile-section .dropdown-toggle::after {
    display: none;
}

.btn-login:hover {
    background: transparent;
}

.btn-login .btn-default,
.btn-login .btn-default:active:focus,
.btn-default:active:hover,
.open>.btn-default.dropdown-toggle,
.open>.btn-default.dropdown-toggle:hover {
    color: #fff;
    background-color: transparent;
    border-color: #ccc;
    border: none;
}

#appBody .LoginModal .modal-content {
    border: none;
}

@media only screen and (min-width: 992px) {

    /* added css for Phonics->3->1->7->5>On result screen the text is not center aligned */
    #abcsoundmatch .abcgame_smplayagainwithtrophy.abcgame_fastpawrap {
        height: 11% !important;
        min-width: 100%;
        max-width: 100%;
    }

    /* end */
    #appBody .LoginModal .modal-content {
        min-height: 525px;
    }

    .login-right {
        height: 465px;
    }

    .gameContainer canvas#confettiCanvas {
        width: 100%;
    }
}

#appBody .LoginModal .modal-dialog {
    margin: 0 !important;
}

ul.dropdown-menu {
    min-width: 120px;
    left: -25px;
    right: 10px;
}

.icon-menu-bar button.btn.btn-default {
    padding: 0;
}

.phonic-login-menu #basic-drop {
    font-size: 16px;
    padding: 0.875rem 0.75rem !important;
    line-height: unset;
    min-height: unset;
    text-transform: unset;
    background: #fff;
    width: 86px;
    border-radius: 22px;
    cursor: pointer;
    float: right;
    text-align: center;
    position: relative;
    color: #fff;
    /* border-color: #007bff; */
    font-weight: 400;
    right: 21px;
    text-transform: lowercase;
    bottom: 9px;
    /* content: close-quote; */
    border: 2px solid #81731b;
    color: #000;
}

.lesson-wrap li span {
    width: 30px;
    height: 30px;
    font-size: 10px;
    line-height: 25px;
    letter-spacing: 0;
}

.common-profile-section .sb-avatar__text,
.common-profile-section .sb-avatar__image {
    width: 28px !important;
    height: 28px !important;
}

.tsLogin .common-profile-section .sb-avatar__text,
.tsLogin .common-profile-section .sb-avatar__image {
    width: 40px !important;
    height: 40px !important;
}

.landscape .common-profile-section .sb-avatar__text,
.landscape .common-profile-section .sb-avatar__image {
    margin-top: -1px;
    margin-left: 9px;
}

.landscape .ML-store .common-profile-section .sb-avatar__text,
.landscape .ML-store .common-profile-section .sb-avatar__image {
    margin-top: 0px;
}

.Phonics-homepage-wraper .common-profile-section .sb-avatar {
    height: 32px !important;
    width: 32px !important;
}

.Phonics-homepage-wraper .common-profile-section .sb-avatar__image,
.Phonics-homepage-wraper .common-profile-section .sb-avatar__text {
    margin-top: 0;
    width: 100% !important;
    height: 100% !important;
    margin-left: 0;
}

.phonic-login-menu ul {
    padding: 0;
    margin-bottom: 0;
}


/* changed some css also added for better view for issue SL3-6157 */

.common-profile-section .open>.dropdown-menu {
    display: block;
    right: 0;
    left: auto;
    overflow: hidden;
    background: #971a1e;
}


/* end  */

.portrait .common-profile-wrap {
    float: right;
    margin-top: -12px;
}

.portrait header .h-right {
    z-index: -1;
}

.portrait body #phonicsHeader.header .h-right,
.landscape body #phonicsHeader.header .h-right .letters-text-wrap ,
.landscape body #phonicsHeader.header .h-right .headersearch-section {
    z-index: 9999 !important;
    background: transparent !important;
}

.portrait #phonicsHeader.header:has(.dropdown-menu.show) .h-right,
.portrait #phonicsHeader.header:has(.show.dropdown) .h-right ,
.landscape #phonicsHeader.header:has(.dropdown-menu.show) .h-right,
.landscape #phonicsHeader.header:has(.show.dropdown) .h-right {
    z-index: -1 !important;
}

.common-profile-section button#basic-drop:active,
.common-profile-section button#basic-drop.active {
    box-shadow: none !important;
}


/* css for ABC sound match instruction box*/

.abcgame_instruction_popup .abcgame_sm_instruction_content {
    padding: 0;
    width: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abcgame_instruction_popup .abcgame_sm_instruction_step {
    position: absolute;
    padding: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 80%;
    height: 240px;
}

.abcgame_instruction_popup .abcgame_sm_closeinstruction {
    width: 50px;
    height: 57px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: -15px;
    top: -6px;
    cursor: pointer !important;
    z-index: 9;
}

.abcgame_instruction_popup .abcgame_sm_instruction_header {
    margin: 8px 0 0 0;
    padding: 0;
    text-align: center;
    font-size: 21px;
}

.abcgame_soundMatchContainerwrap .abcgame_instruction_popup ul.instructionMenu {
    font-size: 15px;
    padding: 0;
    line-height: 24px;
    height: 77%;
    width: 61%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.abcgame_soundMatchContainerwrap ul.instructionMenu li {
    padding-bottom: 10px;
    font-weight: bold;
}


/* css added for abc sound match Bg Issue */

#abcsoundmatch .sound_match_game_bg {
    border: none !important;
    box-shadow: none !important;
    background-position: center;
}

#abcsoundmatch .sound_match_screen2_bg {
    background-size: cover;
    background-position: center;
    border: none !important;
}


/* end  */


/* css added for abc word bowl Bg Issue */

.popBalloonRecommendedgamewrap {
    background-size: cover !important;
    background-position: center !important;
    border-width: 1px !important;
    position: relative;
}

.bowling-game-main-div .bowlingGameDiv {
    background-size: cover !important;
    background-position: center !important;
    border-width: 1px !important;
}

#letsplayfootball .letsGoFishingGameFull {
    background-position: center;
}

.landscape div#letsplayfootball .startletsgofishingrow.col-xs-12.col-sm-6.col-md-8.col-lg-6.contentBox {
    padding: 7px !important;
}


/* end */


/* added css for issue Phonics : Lets play football : game should not jump on clicking play button */

#letsplayfootball .contentBox .lgfballoom_image_pg1 {
    overflow: hidden;
    border-radius: 0;
    border: none;
    position: relative;
    box-shadow: none;
    margin-bottom: 0;
    height: 100%;
    width: 100%;
}

.connectthedots-innerwrapper.col-xs-12.col-md-8.col-lg-6.contentBox,
#interactivity_div .connectthedots-container .connectthedots-centerlized-wrapper .contentBox {
    background-color: transparent;
    padding: 0 !important;
}

.gameBody .contentBox.main-game {
    background-color: transparent;
    padding: 0 !important;
}

.gameBody .contentBox.main-game .abcgame_maincontainerContent {
    border: none;
}


/* end */


/* added css for Phonics : (all Books/Sections) Lets go fishing/Blast game : Remove the  recommended game sign on the game */

.blastGame .recommendedbadge,
#letsgofishing .recommendedbadge,
#abcsoundmatch .recommendedbadge,
.savethePlanetLogo .recommendedbadge {
    display: none !important;
}


/* end  */

.abcgame_bingomatrix.abcgame_bingomatrix3 {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_3X3.png");
    background-repeat: no-repeat;
}

.abcgame_bingomatrix.abcgame_bingomatrix4 {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_4X4.png");
    background-repeat: no-repeat;
}

.abcgame_bingomatrix.abcgame_bingomatrix5 {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_5X5.png");
    background-repeat: no-repeat;
}

.flex-45,
.layout-column>.flex-45,
.layout-row>.flex-45 {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 45%;
    flex: 1 1 45%;
    box-sizing: border-box;
}

.flex-45,
.layout-row>.flex-45 {
    max-width: 45%;
    max-height: 100%;
}

.abcgame_bingomaincontainer {
    background: #ddffff;
}

.bingoMaincontainer {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_homebg.png) !important;
    background-size: cover !important;
    background-position: center;
}

#abcgame_bingoflipcardwrap {
    z-index: 0;
}

.abcgame_bingologo {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_logo.png");
}

.abcgame_bingoi {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_instructions.png");
}


/* .abcgame_bingohelp{
    background-image: url('https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_help.png');
} */


/* .abcgame_bingorefresh{
    background-image: url('https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_refresh.png');
} */

input.abcgame_bingo_closeinstruction {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingocross.png");
    background-color: transparent;
}

/* changed css for SL3-8481 */
.common-profile-section button#basic-drop {
    background-color: transparent;
    border: none;
    float: none;
    text-align: right;
    display: block;
    padding-left: 0 !important;
    padding-right: 0 !important;
    bottom: 0px !important;
    right: 0px;
    width: 65px;
    height: 30px;
}

#recordingIframe .common-profile-section button#basic-drop span.caret {
    top: 0;
    bottom: 0;
}

/* reading-homepage css */

.heading-homepage {
    display: flex;
    width: 100%;
}

.bigfont {
    font-size: 22px !important;
}

.reading-home-page-wraper span.caret {
    position: absolute;
    bottom: 0 !important;
    right: 23px !important;
}

/* end */

.common-profile-section button#basic-drop span.caret {
    right: 6px;
    position: absolute;
    bottom: 12px;
}

header .rdmap-wrap li.icon-menu-bar a {
    padding-left: 6px !important;
    padding-right: 2px !important;
    margin: 0 10px !important;
}

.common-profile-section .sb-avatar.sb-avatar--text {
    height: 32px !important;
}

.common-profile-section .sb-avatar__text,
.common-profile-section .sb-avatar__image {
    width: 32px !important;
    height: 32px !important;
}

.common-profile-section .btn-group.open .dropdown-toggle {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.abcgame_correctDisableClick {
    pointer-events: none;
}

.footer-menu .rdmap-wrap button.btn.btn-default {
    background-color: transparent;
    border: none;
}

button:focus {
    outline: none !important;
}

.footer-menu .rdmap-wrap a i,
.footer-menu .rdmap-wrap .icon-menu-bar a i {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 5px;
    line-height: 30px;
    border-radius: 8px;
    font-size: 20px;
    color: #333;
    background: #fff;
    border: 2px solid #333;
    transition: 0.3s ease-in;
}

.turn-switch-button .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb {
    box-shadow: 1px 5px 7px 0px rgba(0, 0, 0, 0.2), -1px 0px 3px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    background-color: #ffcc00;
}

.turn-switch-button .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track {
    background-color: #d0a600;
}

.content-pagination {
    overflow: visible;

}

.footer-menu .rdmap-wrap a:hover {
    text-decoration: none;
}

.footer-menu .rdmap-wrap a:focus {
    outline: none;
}

#popover-positioned-scrolling-top {
    position: absolute;
    width: 280px;
    border: 2px solid #1b3563;
    top: 67px;
    right: -31px;
    border-radius: 10px;
    background: #ffffff !important;
    z-index: 999;
    box-shadow: 0px 0px 11px 3px #ada5a5;
    -webkit-box-shadow: 0px 0px 11px 3px #ada5a5;
    -moz-box-shadow: 0px 0px 11px 3px #ada5a5;
    -ms-box-shadow: 0px 0px 11px 3px #ada5a5;
    padding: 15px 25px 35px;
    border-radius: 5px;
}

#popover-positioned-scrolling-top .popover-content {
    min-height: 200px;
    padding: 25px 35px;
    /* background: transparent; */
    border-radius: 5px;
    width: 100%;
    height: 100%;
}

#popover-positioned-scrolling-top.popover.top>.arrow {
    left: 50%;
    margin-left: -11px;
    border-bottom-width: 0;
    border-top-color: #999999;
    border-top-color: rgba(0, 0, 0, 0.25);
    bottom: -11px;
    top: auto;
    background-color: transparent;
    transform: none;
}

.footer-menu.h-right .rdmap-wrap.phonic-login-menu {
    position: relative;
}


/* Css for header activity bar */

.stageChild {
    position: relative;
    margin: 2px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-weight: normal;
    background-color: #999999;
    float: left;
    font-size: 10px;
    border-radius: 100%;
}


/* flipleather book css 21-11-2019 */


/* 18-12-2019 */

.wrapper-div {
    width: 80%;
    margin: auto;
}

#flipping_leatherbook .wrapper-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-direction: column;
    position: relative;
}

#flipping_leatherbook .bookTemplate {
    height: 73%;
}

.interactivity #flipping_leatherbook .audio-text {
    /* color: #fff; */
}

.interactivity #flipping_leatherbook .align-middle .sentenceSpan {
    max-width: 85%;
}

/* changed css for  */
.landscape .bookTemplate .fontfaceRed_ADV_CALIBRI:not(.textbook1),
.portrait .bookTemplate .fontfaceRed_ADV_CALIBRI:not(.textbook1) {
    font-size: 3.8vw;
    /* margin-top: 0px; */
}

.leather-book.BookWood .lession-sentence {
    text-align: center;
    margin: 10px auto 0 auto;
    background-color: #fff;
    width: 100%;
    display: table;
    padding: 10px;
}


/* .leather-book .bookTemplate {
    max-width: 70%;
} */

.leather-book .book-template-bg {
    position: relative !important;
    height: 100%;
    width: 100%;
    background: none !important;
}

/*.leather-book .book-template-bg::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    width: 100%;
    height: 100%;
    padding: 0;
    /* background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/bookwood.jpeg) 0 0 / 100% 100%; */
/*}*/

.MainCardTemplate.leather-book.BookWood {
    min-height: 420px;
    overflow-y: auto;
    /* background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/bookwood.jpeg) 0 0 / 100% 100%; */
}

.leather-book .turn-page-wrapper {
    padding-top: 0px;
    overflow: hidden !important;
}

.MainCardTemplate.leather-book.BookWood .container-flip {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.leather-book.BookWood .flipbook {
    margin: auto;
    height: 100%;
}

/* .leather-book.BookWood .flipbook .page-wrapper {
    height: 100% !important;
} */

.displayInline {
    display: inline-block;
}

.visibilityHidden {
    visibility: hidden;
}

.flipbook-viewport .container-flip {
    position: relative;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

@media (min-width: 570px) {

    html.landscape.iphoneLandscape #lesson_ifr.interactivityParentDiv {
        padding-top: 0px !important;
    }

    .landscape .leather-book.BookWood .flipbook {
        display: flex;
        align-items: center;
        top: 0%;
        transform: none !important;
    }

    .landscape #contactTypeDiv {
        overflow-y: visible;
        overflow-x: hidden;
    }

    .landscape #billBoard {
        margin-top: 0px;
        overflow-y: hidden;
        /* min-height: 418px; */
    }
}

.portrait .flipbook-viewport .leather-book-page {
    transform: none !important;
    top: 0 !important;
}

.leather-book .turn-page-wrapper div img {
    background-size: 100%;
    background-repeat: no-repeat;
}

#interactivity_div .leftSideBar img {
    max-width: 72%;
}

#interactivity_div .leftSideBar .lhsImage {
    width: 100%;
    height: 100px;
}

#interactivity_div .leftSideBar .lhsImage img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    object-fit: contain;
}

.connectthedotscenteralign {
    width: 100% !important;
}

.connectthedots-startgame-innerwrapper {
    width: auto;
    height: auto;
}

@media only screen and (max-width: 1024px) and (min-width: 768px),
only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
    .portrait #interactivity_div .connectthedots-game-inner-container {
        width: 100%;
    }

    .portrait #interactivity_div .connectthedots-startgame-innerwrapper {
        width: 100%;
        height: 100%;
        /* border-radius: 0px; */
    }

    .connectthedots-canvas-container .game_div {
        width: 100%;
        height: 100%;
    }
}


/* 
#interactivity_div figure{
    width: 100%;
    height: auto;
    margin: 0 ;
}
#interactivity_div .connectthedots-start-game-container .sg-right-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    margin: auto;
}
#interactivity_div .connectthedots-start-game-container .connectthedots-sg-left-container {
    display: flex !important;
    text-align: center !important;
    flex-direction: column !important;
    margin: auto !important;
    height: 100% !important;
    padding: 30px 30px !important;
}

@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait){
#interactivity_div .connectthedots-start-game-container .sg-right-container {
    padding: 50px 6px;
} */


/* flipleatherbook  end  here */


/*Recording css*/

.recording-timer-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
}

.recording-timer {
    margin: 0;
    font-size: 12px;
    float: right;
    color: #fff;
    font-weight: bold;
    font-family: 'Poppins', sans-serif !important;
}

.recording-play-timer,
.facebook-email-share {
    margin: 15px 5px 0 0;
    font-size: 16px;
    color: #333;
    display: inline-block;
    font-weight: bold;
    font-family: 'Poppins', sans-serif !important;
}

.cross-button,
.facebook-email-share {
    margin: 15px 5px 0 0;
    display: inline-block;
}

.play-pause-recording {
    display: inline-block;
    margin: 15px 5px 0 0;
}

i#Resume,
i#Save,
i#pause {
    width: 36px;
    height: 36px;
    margin: 0 5px;
    line-height: 30px;
    border-radius: 8px;
    font-size: 20px;
    color: #333;
    background: #fff;
    border: 2px solid #333;
    transition: 0.3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

#draggable-dialog-title {
    margin: 0;
    padding: 6px 15px;
    font-size: 28px;
    background: #ffcc00;
    color: #44402d;
}

.Phonics_dialogBox .MuiPaper-root #draggable-dialog-title {
    background-color: #366eaf !important;
    background: #82a3cc;
    color: #fff;
}

#draggable-dialog-title.Phonics_dialogBox h2.MuiTypography-root.MuiTypography-h6 {
    font-family: Poppins;
}

.Phonics_dialogBox .MuiDialog-paperWidthSm .MuiDialogContent-root {
    padding: 20px !important;
}

.Phonics_dialogBox .MuiDialogActions-root.MuiDialogActions-spacing {
    padding-right: 20px;
}

.Phonics_dialogBox .MuiDialogActions-root.MuiDialogActions-spacing button {
    margin-bottom: 20px;
}

.Phonics_dialogBox .MuiDialogActions-root.MuiDialogActions-spacing button.MuiButtonBase-root.MuiButton-root.theme-btn.MuiButton-text {
    background-color: #366eaf !important;
}

.Phonics_dialogBox #btn-theme,
.Phonics_dialogBox #theme-btn-close {
    padding: 12px 30px !important;
    box-shadow: none;
}

.Phonics_dialogBox .MuiDialogContent-root {
    font-size: 17px;
    padding: 20px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    min-width: 320px;
    color: rgba(0, 0, 0, 0.57);
}

.portrait .Phonics_dialogBox .MuiDialogContent-root {
    min-width: 120px !important;
}

.phonicsMain .Reading.Success_dialogBox #draggable-dialog-title {
    margin: 0;
    background-color: #366eaf !important;
    background: #82a3cc;
    padding: 6px 15px;
    color: #fff;
}

.phonicsMain .Reading.Success_dialogBox .MuiDialogContent-root {
    font-size: 17px;
    padding: 20px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    min-width: 320px;
    color: rgba(0, 0, 0, 0.57);
}

.phonicsMain .Reading.Success_dialogBox .MuiDialogActions-root.MuiDialogActions-spacing {
    padding: 0;
    margin: 0 20px 20px 0;
}

.phonicsMain .Reading.Success_dialogBox #btn-theme,
.phonicsMain .Reading.Success_dialogBox #theme-btn-close {
    padding: 12px 30px !important;
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 13px;
}

.phonicsMain .Reading.Success_dialogBox .MuiDialogActions-root.MuiDialogActions-spacing button.MuiButtonBase-root.MuiButton-root.theme-btn.MuiButton-text {
    background-color: #366eaf !important;
}

.MuiDialog-root.Reading.Success_dialogBox #draggable-dialog-title h2.MuiTypography-root.MuiTypography-h6 {
    font-size: 16px;
    padding: 0;
    color: #fff;
}

.portrait .ereader-right-footer-wrapper .btn-record i,
.portrait .footer-menu .rdmap-wrap li a i,
.portrait i#Resume,
.portrait i#Save,
.portrait i#pause,
.portrait .footer-menu .rdmap-wrap a i,
.portrait .footer-menu .rdmap-wrap .icon-menu-bar a i {
    width: 37px !important;
    height: 37px !important;
    border-radius: 50%;
    line-height: 34px;
    color: #333;
}

.portrait i#Save,
.portrait .ereader-right-footer-wrapper .btn-record {
    margin-right: 1px !important;
}

.page-main-controls ul li,
.portrait .page-main-controls ul li button.btn.btn-default {
    padding: 0;
}

#recordingIframe audio {
    display: none;
}


.phonicsMain .modal-header.recording-login-modal-header {
    box-shadow: 0px 0px 5px #000;
    padding: 0px;
    border-radius: 0 !important;
}

.landscape .phonicsMain .recording-login-modal .btn-close {
    position: absolute;
    right: -13px;
    color: rgb(255, 255, 255);
    background: rgb(27, 6, 6);
    top: -13px;
    font-size: 18px;
    padding: 2px;
    font-weight: normal;
}

.portrait .phonicsMain .recording-login-modal .btn-close {
    right: -8px;
    top: 4px;
}

.phonicsMain .recording-login-modal .modal-content {
    border: none
}

.reading-speed .speed-range-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reading-speed .input-range {
    width: 100%;
}

.reading-speed span.input-range__label.input-range__label--min,
.reading-speed span.input-range__label.input-range__label--max {
    display: none;
}

.reading-speed .input-range__track {
    cursor: pointer;
    display: block;
    position: relative;
    transition: left 0.3s ease-out, width 0.3s ease-out;
    background: #ffffff;
    outline: none;
    opacity: 1;
    height: 10px;
    border-radius: 15px;
    border: 2px solid #bb9500;
}

.reading-speed .input-range__track--active {
    background: #e8d380;
}

.reading-speed .input-range__slider {
    height: 20px;
    width: 20px;
    margin-top: -3.2rem;
    background: #ffcc00;
    border-radius: 50%;
    margin-left: -12px;
    border: 2px solid #bb9500;
}

.reading-speed .input-range__track.input-range__track--active {
    border: unset;
    height: 6px;
}

.reading-speed span.input-range__label.input-range__label--value {
    top: 3.5px;
    position: relative;
    right: 8px;
}

.reading-speed .input-range__slider-container {
    transition: left 0.3s ease-out;
}

.ereader_range {
    position: relative;
    padding: 5px 0 0;
    height: 40px;
    width: 100%;
}

.ereader_range .input-range {
    height: 100%;
    width: 60%;
    left: 0;
    top: -11px;
    right: 0;
    margin: auto;
    position: absolute;
}

.ereader_range .input-range__label {
    color: #fff;
    font-weight: normal;
    font-size: 1.5rem !important;
}

#recordingIframe header {
    border: 0px;
}

#recordingIframe .ML-store .common-profile-section .header_setting_btn .caret:before {
    top: 5px;
    right: -10px;
}

.ereader_range .input-range__track {
    border-radius: 0.3rem;
    cursor: pointer;
    display: block;
    height: .6rem;
    position: relative;
    transition: left 0.3s ease-out, width 0.3s ease-out;
    border: 1px solid #3f51b5;
    background: #eeeeee;
}

.ereader_range .input-range__label-container {
    font-size: 1.2rem !important;
    top: 2.5px !important;
    left: 0;
    position: relative;
}

#mainBodyContainer .ebookParentDiv.ebook {
    background-color: #fff;
}

.ereader_range .input-range__track--active {
    background: #3f51b5;
}

.ereader_range .input-range__slider {
    height: 1.5rem;
    width: 1.5rem;
    margin-top: -1.2rem;
    background: linear-gradient(173deg, #dcca35 -6%, #ff5722 51%, #ff5722 75%);
    border: 3px solid #bc510f;
    border-radius: 50%;
    margin-left: -3px;
}

.ereader_range .input-range__label--value {
    position: absolute;
    font-size: 1.5rem;
    top: 0;
    left: 1px;
}

.ereader_range span.input-range__label.input-range__label--min .input-range__label-container {
    left: 0;
    top: -8px !important;
}

.ebookContainer #ereader {
    height: calc(100% - 0px) !important;
    margin-bottom: 15px;
}

.input-range__label.input-range__label--max span.input-range__label-container {
    position: static;
}

.ebookParentDiv.ebook {
    background: #fff;
}

.ereader_range .input-range__label--max {
    top: -8px;
    position: absolute;
    right: -15px;
    width: 21px;
    text-align: center;
}

.ereader_range .input-range__slider-container {
    transition: left 0.3s ease-out;
}

.phonicsMain #recording-login-modal-id.recording-login-modal-title {
    color: #fff;
    font-size: 16px;
    text-align: left;
    display: block;
    font-weight: bold;
    padding: 15px 25px;
}

.phonicsMain .recording-login-modal .btn-close {
    position: absolute;
    right: 1%;
    color: rgb(255, 255, 255);
    background: rgb(27, 6, 6);
    top: 1%;
    font-size: 20px;
    padding: 2px;
    font-weight: normal;
}

.portrait .phonicsMain .recording-login-modal .btn-close {
    margin-top: -15px !important;
}

.reading-speed {
    display: flex;
    flex-direction: column;
}

.slow-text {
    padding-right: 15px;
    cursor: pointer;
}

.speed-range-wrap span.fast-text {
    padding-left: 15px;
    cursor: pointer;
}

span.normal-text {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
    cursor: pointer;
}

.modal-90w.recording-login-modal.modal-dialog {
    max-width: 400px;
    position: absolute;
    height: max-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0;
}

.landscape .phonicsMain .recording-login-modal-body.modal-body {
    min-height: unset;
    text-align: center;
}

.portrait .ebookContainer #ereader_images {
    margin-top: 20px;
}

.recording-login-modal .recording-login-modal-button,
.recording-login-modal .recording-login-modal-button:focus,
.recording-login-modal .recording-login-modal-button:active,
.recording-login-modal .recording-login-modal-button:hover {
    background: rgb(88 185 80) !important;
    width: 100px;
    border-radius: 100px;
    border-color: transparent;
    margin: 15px;
    padding: 7px !important;
    font-size: 15px;
    text-transform: capitalize;
}

.recording-login-modal-body {
    background-color: #fff !important;
    overflow-x: hidden;
    padding: 7px 30px !important;
    font-size: 16px;
}


/* .ebookfullScreen {
    height: 100%;
}

.ebookfullScreen {
    background-color: #000 !important;
} */

.ereaderFullScreen span.fullscreenEL {
    background: url(../images/toggle-screen-white.png) no-repeat 0 0;
    background-size: contain;
}

div#recordingIframe header {
    background-color: #ffcc00;
    display: flex;
    /*  to fix SL3-5408: Phonics :Book 3>>Section1/2:  Recording : Header >>logo/login/ profile pic are not coming properly */
}

#recordingIframe .ML-store .common-profile-section .header_setting_btn .caret:before {
    top: 5px;
    right: -10px;
}

/******** css for ereader end*******/

.abcgame_abcpick_activeEffectInner {
    pointer-events: none;
}


/* 
.flipped.abcgame_opcss {
    pointer-events: none;
} */

.flipped.disabled-card {
    pointer-events: none;
}

.portrait .recording-timer {
    margin: 0 5px 0 0;
}

/*For kindle 8 device (601x962)..increased the range of media query for portrait...*/
@media (max-width: 767px) and (orientation: portrait) {

    .portrait .phonicsMain .modal-header .btn-close:before {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }

    .portrait h2.category-name {
        margin-bottom: 25px;
    }

    .portrait .abcgame_sm_closeinstruction {
        right: 2%;
        top: 25%;
    }

    .portrait .abcgame_sm_instruction_step {
        width: 89%;
    }

    .content-pagination li i {
        font-size: 17px;
    }

    .MuiDialog-paper {
        margin: 20px !important;
    }
}

@media (max-width: 1040px) {

    .portrait .draggable-wrap,
    .portrait .source-preview {
        padding: 12px !important;
        height: 13vh !important;
    }

    .portrait .btn-draggable {
        font-size: 8vw;
    }

    /* added css for Phonics->3->1->7->5>On result screen the text is not center aligned */
    #abcsoundmatch .abcgame_smplayagainwithtrophy.abcgame_fastpawrap {
        height: 11% !important;
        min-width: 100%;
        max-width: 100%;
    }


    /* end */
    header.container-fluid {
        height: auto !important;
    }

    .speed-range-wrap span {
        font-size: 12px;
    }

    .portrait .draggable-wrap,
    .portrait .source-preview {
        padding: 20px;
        margin: auto;
        width: 80%;
        max-width: 404px;
        height: 15.5vh;
    }

    .portrait .interactivityfullScreen .draggable-wrap,
    .portrait .interactivityfullScreen .source-preview {
        height: 17.5vh;
    }

    .portrait .drag-drop-parent.layout-align-center-center.layout-row {
        height: auto;
    }

    /* css for customtemplate height issue on all devices portrait  */
    .portrait #appBody #lesson_ifr:has(.word_toknow) #carousel,
    .portrait #appBody #lesson_ifr:has(.blackboard-template) #calenderFlipCardMainDiv,
    .portrait #appBody #lesson_ifr:has(.droneContent) #calenderFlipCardMainDiv,
    .portrait #appBody #lesson_ifr:has(.slider-template) #calenderFlipCardMainDiv,
    .portrait #appBody #lesson_ifr:has(.bookTemplate4) #carousel {
        margin: 0 auto auto auto !important;
        height: calc(100% - 56px) !important;
    }

    .portrait #appBody #calenderFlipCardMainDiv.blackboard-template .contentBox,
    .portrait #appBody #calenderFlipCardMainDiv.slider-template .contentBox {
        max-height: calc(100% - 8%) !important;
        margin-top: 0 !important;
    }

    .portrait #appBody #calenderFlipCardMainDiv.Drone1 .Drone-ContentBox {
        height: calc(100% - 34%) !important;
        margin-top: 0 !important;
    }

    /* end  */
    .portrait .letterHolder.layout-row>.flex-50 {
        text-align: center;
        max-width: 100%;
    }

    .portrait .letterHolder.layout-row {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 900px) {
    header.container-fluid {
        min-height: auto !important;
    }

    /* added css for web : Iphone 11 (Portrait) : Phonics : after login : profile icon a bit skewed | dropdown arrow is not coming properly SL3-10197 */
    .portrait .common-profile-section button#basic-drop {
        width: 60px;
    }

    .portrait .common-profile-section button#basic-drop span.caret {
        bottom: 6px;
    }

    .landscape .common-profile-section button#basic-drop span.caret {
        right: 15px
    }

    .landscape .common-profile-section button#basic-drop {
        width: 30px;
    }

    .portrait .Phonics-homepage-wraper .common-profile-section .sb-avatar.sb-avatar--text,
    .landscape .Phonics-homepage-wraper .common-profile-section .sb-avatar.sb-avatar--text {
        height: 32px !important;
        width: 32px !important;
    }

    .landscape header.headerfull .rdmap-wrap .common-profile-wrap {
        margin-top: 5px !important;
    }

    .portrait .Phonics-homepage-wraper .common-profile-section button#basic-drop span.caret {
        bottom: 0;
        right: 20px;
    }

    .portrait header .common-profile-wrap {
        margin-top: 5px;
        position: absolute;
        top: 0;
        bottom: 0;
    }

    /* eND */
    .portrait #recordingIframe header .common-profile-wrap {
        margin-top: 0px !important;
    }

    .offset-margin-auto .word-string h4 {
        margin-top: 10px;
    }

    .word-string h4 {
        padding: 4px 35px;
    }

    .word-pick.picture-pick.sentence-pickInteractivity-wrap .row {
        margin-top: 20px;
    }

    .landscape #phonicsHeader .common-profile-wrap .common-profile-section .dropdown.btn-group {
        position: relative;
    }

    .landscape #recordingIframe #phonicsHeader .common-profile-wrap .common-profile-section .dropdown.btn-group {
        position: absolute;
    }

    .landscape #phonicsHeader .common-profile-section button#basic-drop {
        float: none;
        text-align: center;
    }
}

@media (max-width: 520px) {

    header.container-fluid .logo,
    header.container-fluid .mob-center:nth-child(2) {
        width: 100%;
        float: none;
        margin: auto;
    }

    .store-btn {
        float: left;
    }

    .btn-login,
    .store-btn,
    button.navbar-toggler.ms-2.p-0.mobile-menu {
        margin-top: 10px;
    }
}

@media (max-width: 767px) and (min-width: 320px) {

    .portrait .phonicsMain .menuTabHeader li button {
        margin-bottom: 10px;
    }

    .portrait .phonicsMain .modal-header {
        padding: 15px !important;
    }

    .portrait .head-level1 {
        left: -67px;
    }

    .portrait .bgColor_on_currentModal {
        background: #193463 !important;
    }

    /* added css for SL3- 9266 */
    .portrait #flipping_leatherbook #flipbook-viewport .pageSpan {
        padding: 0 15px 0 0px !important;
    }

    /* END */
    /* for ebook ereader issue css  */
    .portrait #mainBodyContainer #lesson_iframe.Phonics_ereader .content_ereader_modify {
        height: 100% !important;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    /* end  */
    /* for result screens issue SL3-6061 */
    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper,
    .landscape .abcgame_readycount,
    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper,
    .portrait .abcgame_readycount {
        height: 155px !important;
        /* margin-top: 0 !important; */
    }

    .landscape .abcgame_readycount img,
    .portrait .abcgame_readycount img {
        height: 100% !important;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_getreadyWrap,
    .portrait .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    .landscape .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay,
    .portrait .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
        display: flex;
        align-items: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns,
    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns {
        top: 135px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns button,
    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns button {
        height: 22px !important;
        margin: 0 !important;
    }

    /* end  */
    .abcgame_instruction_popup .abcgame_sm_instruction_header {
        font-size: 16px;
        line-height: 35px;
    }

    .abcgame_soundMatchContainerwrap ul.instructionMenu li {
        font-size: 12px;
    }

    .abcgame_instruction_popup .abcgame_sm_closeinstruction {
        width: 40px;
        height: 47px;
        top: -4px;
    }

    .speed-range-wrap span {
        font-size: 12px;
    }

    .portrait .MuiDialogContent-root .mg_top {
        min-width: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin: 0;
    }

    .landscape .MuiDialogContent-root .mg_top {
        min-width: 555px;
    }
}


/* word drag page */

.word-pick {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-top: 5%;
}

.p-25 {
    padding: 0px 25px;
}

.alphabet-div {
    width: 100%;
}

.shake {
    -webkit-animation-name: shakeit;
    animation-name: shakeit;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

.dragable-image {
    width: 100%;
    height: 158px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.dragable-image img {
    max-width: 100%;
    width: 75%;
    height: 100%;
    margin: auto;
    cursor: pointer;
    object-fit: contain;
}

.alphabet-div .form-group {
    margin-bottom: 0px;
}

.alphabet-div .form-group input {
    border-radius: 0px;
    margin-right: auto;
    text-align: center;
    height: 40px;
    font-size: 21px;
    border: 1px solid #ccc;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    font-weight: bold;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
}

.dagable-names {
    background: #fff;
    width: 100%;
    position: relative;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
}

.culminating_div {
    margin-bottom: 0px;
}

.dagable-names ul {
    padding-left: 0px;
    list-style-type: none;
    display: inline-flex;
    margin-bottom: 0px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.85);
    margin: 0 auto;
    justify-content: center;
    width: 100%;
}

.CulminatingPick {
    padding-bottom: 0px;
    position: relative;
}

.dagable-names ul li {
    display: block;
    padding: 5px 25px;
    justify-content: center;
    width: max-content;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.dagable-names ul li a:hover:focus {
    text-decoration: none;
    outline: 0;
}

.centered-heading {
    width: 100%;
    text-align: center;
}

.centered-heading .heading_one {
    color: #131313;
    font-size: 24px;
    margin: 0px 0px 20px 0px;
    width: 100%;
}

.centered-heading .heading_one .volume {
    margin-left: 10px;
    background-image: url(../../../reading/css/images/volume.png);
    display: inline-block;
    width: 35px;
    height: 35px;
    position: relative;
    top: 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.survey_icon {
    background-image: url(../../../reading/css/images/survey.png);
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-position: center;
    margin-right: 10px;
}

.question span:first-child {
    background-color: #fff;
    margin-right: 15px;
    color: #000;
    padding: inherit;
    font-size: 14px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    text-align: center;
    display: inline-table;
    align-items: center;
    justify-content: center;
    line-height: 28px;
    box-shadow: 0px 2px 5px #000;
}

.question {
    display: inline-flex;
    width: 100%;
}

.survey-container .edit-survey-wrapper .question {
    align-items: center;
}

.survey-container .edit-survey-wrapper .yes_no-icon i.fa.fa-times {
    background-color: #cbd3e3;
}

.centered-heading .heading_one .mute {
    margin-left: 10px;
    background-image: url(../../../reading/css/images/mute-01.png);
    display: inline-block;
    width: 35px;
    height: 35px;
    position: relative;
    top: 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.centered-heading .heading_two {
    color: #ec008c;
    font-size: 24px;
    margin: 5px 0px 10px 0px;
    width: 100%;
}

.correct-Card {
    border: 5px solid #00a150 !important;
}

.correct-Card i {
    position: absolute;
    right: 16px;
    top: -9px;
    width: 30px;
    height: 30px;
    background: #00a150;
    font-size: 23px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    display: block !important;
}

#wordLadder .disabled {
    opacity: 0.4;
}

.disabled {
    pointer-events: none;
    /* opacity: 0.4; */
}

.wrong-Card {
    border: 5px solid #ff0000 !important;
}

.wrong-Card i {
    display: none !important;
}

.word-pick-options {
    position: relative;
    cursor: pointer;
}

.word-pick-options .correct-Card i {
    right: 32px;
}


/*css for flip card calendar interactivity*/

.noCalendarFlip {
    margin: 12px auto 0 auto;
}

.carousalFlipCard .container.calendar-row .row {
    width: 95%;
    margin: auto;
}

.three-cards-int {
    height: 100%;
}

.one-card .main-flip.upsideDownFlip .scene {
    width: 90% !important;
}

.carousalFlipCard .container.calendar-row .one-card {
    width: 90% !important;
}

.main-flip.upsideDownFlip .scene.flipallcard {
    width: 100%;
}

.carousalFlipCard .container.calendar-row .one-card .main-cards-data {
    display: flex;
    align-items: center;
    justify-content: center;
}

.one-card .main-cards-data .mutated-word .pagespan span:last-child {
    color: 000;
}

.one-card .main-cards-data .mutated-word .pagespan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: normal;
}

.upsideDownFlip .scene {
    width: 100%;
    height: 50vh;
    margin: 12px auto 0 auto;
    -webkit-perspective: 2000px;
    -ms-perspective: 2000px;
    -o-perspective: 2000px;
    -moz-perspective: 2000px;
    perspective: 2000px;
    min-height: 234px;
}

.three-cards-wrapper .upsideDownFlip .scene {
    height: 20.2vh;
    min-height: 134px;
}

.three-cards .scene {
    height: 44vh;
}

#interactivity_div .three-cards .imgStroke {
    width: 98% !important;
}

.one-card .upsideDownFlip .scene {
    height: 43vh;
}

#calenderFlipCardMainDiv .container.calendar-row .three-cards-wrapper .upsideDownFlip .front {
    align-items: center;
}

.three-cards-wrapper .col-xs-12.main-flip.book-clips.upsideDownFlip {
    margin-top: 15px;
}

.upsideDownFlip .book {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.three-cards-wrapper {
    padding: 0 0 0 30px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 100%;
}

.upsideDownFlip .page {
    cursor: pointer;
    position: absolute;
    color: black;
    width: 100%;
    height: 100%;
    -webkit-transition: 1.5s -webkit-transform;
    -ms-transition: 1.5s -webkit-transform;
    -moz-transition: 1.5s -webkit-transform;
    -o-transition: 1.5s -webkit-transform;
    transition: 1.5s transform;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    -o-transform-origin: center top;
    -moz-transform-origin: center top;
    transform-origin: center top;
}

.upsideDownFlip .front,
.upsideDownFlip .back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #fff;
    border: 10px solid #23408e;
    border-radius: 20px;
}


/* #calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .front, #calenderFlipCardMainDiv .container.calendar-row .main-flip.book-clips.upsideDownFlip .scene.flipallcard .front {
    align-items: flex-start;
} */

.page.flipped .front {
    overflow: hidden !important;
}

.carousalFlipCard .main-flip.noCalendarFlip .cell-space.cardUp.width-85 .cardfront-text {
    justify-content: flex-start;
}

.main-flip.noCalendarFlip span {
    color: red;
}

#gameBody #syllablepick .infoIcon {
    background: none !important;
    border-color: none !important;
}

#syllablepick #finished_interactivity {
    width: 100% !important;
    height: 100% !important;
}

#calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.width-100 .front,
#calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.flipallcard .front {
    align-items: center;
}

#calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.width-100 .front h1,
#calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.flipallcard .front h1 {
    padding-left: 0;
}

#calenderFlipCardMainDiv .upsideDownFlip .front h1,
#calenderFlipCardMainDiv .container.calendar-row .main-flip.book-clips.upsideDownFlip .scene.flipallcard .front h1,
.carousalFlipCard .main-flip.noCalendarFlip .cell-space.cardUp.width-85 .cardfront-text span {
    padding-left: 20px;
}

#calenderFlipCardMainDiv .container.calendar-row .main-flip.book-clips.upsideDownFlip .scene.flipallcard .front h1 {
    padding-left: 20px;
}


/* css changed for TB6 s2 lesson 5 flipchart words going out issue 8163 */

#calenderFlipCardMainDiv .upsideDownFlip .front h1,
#calenderFlipCardMainDiv .container.calendar-row .main-flip.book-clips.upsideDownFlip .scene.flipallcard .front h1,
.carousalFlipCard .main-flip.noCalendarFlip .cell-space.cardUp.width-85 .cardfront-text span.fixed-word {
    font-size: 6vw !important;
    font-weight: 700;
}


/* end */

#calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.flipallcard .front h1.mutated-word {
    font-size: 5vw !important;
    text-align: center;
}

#calenderFlipCardMainDiv .three-cards-wrapper .upsideDownFlip .front h1 {
    font-size: 4vw !important;
    font-weight: 700;
}

.upsideDownFlip .back {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
}

.upsideDownFlip .page.active {
    z-index: 1;
}

.upsideDownFlip .page.flipped {
    z-index: 1;
}

.upsideDownFlip .page.flipped {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.upsideDownFlip .page.flipped:last-of-type {
    z-index: 1;
}

.upsideDownFlip p {
    margin: 30px auto 10px;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.flipcardInteractivity .front>p {
    height: auto;
}

.upsideDownFlip .back {
    display: none;
}

.upsideDownFlip img {
    width: 96%;
    margin-top: 0;
    height: 100%;
    object-fit: contain;
}

.upsideDownFlip .spiral {
    position: absolute;
    width: 100%;
    height: 50px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/Section1/books-rings.png);
    background-size: contain;
    top: -25px;
    background-repeat-y: no-repeat;
    margin: auto;
}

.upsideDownFlip .spiral-right {
    width: 100%;
    height: 52px;
    background-size: contain;
    background-repeat: repeat;
    background-repeat-y: no-repeat;
    margin: auto;
}

.carousalFlipCard .main-flip.noCalendarFlip .cardfront-text {
    overflow: hidden;
}

#calenderFlipCardMainDiv .click-rating {
    width: 100%;
    z-index: 99;
}

#calenderFlipCardMainDiv .main-flip .cell-space {
    height: 50vh;
    min-height: 234px;
}

#calenderFlipCardMainDiv h1 {
    font-size: 7vw;
    font-weight: 700;
}

div#calenderFlipCardMainDiv .main-flip {
    margin-bottom: 0;
}

div#calenderFlipCardMainDiv {
    position: relative;
    /* change height to auto to fill background starting after header and finishing before footer */
    height: 100%;
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* next prev-button for carousel and etc */

.click-flip-next-nav,
.click-flip-prev-nav {
    height: 50%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    position: absolute;
    cursor: pointer;
}

.cursor-pointer,
.click-flip-next-nav,
.click-flip-prev-nav {
    transition: 0.4s;
    z-index: 97;
}

.cursor-pointer:hover,
.click-flip-next-nav:hover,
.click-flip-prev-nav:hover,
#calenderFlipCardMainDiv .arrow:hover,
.carousalFlipCard .arrow:hover {
    background-color: rgb(21 116 142 / 55%);
    transition: 0.4s;
}

.cursor-pointer:hover i:before,
.cursor-pointer i:after,
.click-flip-next-nav:hover i:before,
.click-flip-prev-nav:hover i::before,
#calenderFlipCardMainDiv .arrow:hover i:before,
.carousalFlipCard .arrow:hover i:before {
    color: #134c6f !important;
    transition: 0.4s;
}

#readium-page-btns .glyphicon-chevron-right:before {
    color: #444;
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f051';
    display: block;
    position: relative;
    z-index: 2;
    font-size: 25px;
    text-align: right;
    left: 0;
    right: 0;
}

#readium-page-btns .glyphicon-chevron-left:before {
    color: #444;
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f048';
    display: block;
    position: relative;
    z-index: 2;
    font-size: 25px;
    text-align: left;
    left: 0;
    right: 0;
}

#readium-page-btns .glyphicon {
    background: #fff !important;
    border-radius: 50% !important;
    border: 1px dashed #726757 !important;
    width: 35px !important;
    height: 35px !important;
}

#calenderFlipCardMainDiv .arrow>i:after,
.carousalFlipCard .arrow>i:after,
.click-flip-next-nav>i:after,
.click-flip-prev-nav>i:after {
    height: 35px;
    width: 35px;
    background: #fff;
    border-radius: 50%;
    content: "";
    position: absolute;
    border: 1px dashed #726757;
}

#calenderFlipCardMainDiv.carousalFlipCard .arrow i:after {
    content: "";
    height: 35px;
    width: 35px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    border: 1px dashed #726757;
    top: 50%;
    left: 0;
    transform: translate(5%, -50%);
}


.click-flip-prev-nav .left-arrow,
.click-flip-prev-nav,
.carousalFlipCard .arrow.arrow-left {
    left: 0;
    z-index: 97;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.click-flip-next-nav .right-arrow,
.click-flip-next-nav,
.carousalFlipCard .arrow-right {
    right: 0px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* end */

/* css for what behiind door  activity */
#calenderFlipCardMainDiv.carousalFlipCard .arrow {
    transform: translateY(-50%);
    top: 50% !important;
}

#flashCardTurnOver .click-flip-next-nav,
#flashCardTurnOver .click-flip-prev-nav,
.carousalFlipCard .arrow {
    height: 50%;
    margin: 0;
    top: auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 40px;
    transform: none;
    position: absolute;
    bottom: auto;
    cursor: pointer;
}

.Drone-template.ancient-template .arrow {
    position: absolute !important;
}

.carousalFlipCard .arrow span.slider-arrow-right {
    width: auto;
    height: 30px;
    display: flex;
}

#lesson_ifr div#letter-sequence .arrow {
    position: absolute;
    transform: translateY(-50%);
    top: 50% !important;
}

div#calenderFlipCardMainDiv.ancient-template .ancientArrow {
    position: absolute;
    top: auto;
    transform: translateY(-50%);
    bottom: auto;
    height: 50%;
    width: auto;
}

/* end */


#calenderFlipCardMainDiv .arrow>i,
.carousalFlipCard .arrow>i,
.click-flip-next-nav>i,
.click-flip-prev-nav>i {
    height: 100% !important;
    width: 40px !important;
    display: flex;
    text-align: center;
    position: relative;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#calenderFlipCardMainDiv .arrow-left i.left-arrow::before,
.click-flip-prev-nav i::before {
    color: #444;
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f048';
    display: block;
    position: relative;
    z-index: 2;
    font-size: 25px;
    text-align: right;
}

#calenderFlipCardMainDiv .arrow-right i.right-arrow::before,
.click-flip-next-nav i::before {
    color: #444;
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f051';
    display: block;
    position: relative;
    z-index: 2;
    font-size: 25px;
    text-align: right;
}

/* End */

div#calenderFlipCardMainDiv .circle_new {
    background-size: contain;
}

.click-rating .bullets.fas {
    color: #193463 !important;
}

.click-rating .bullets.green-color {
    color: green !important;
}

.click-rating .bullets {
    color: #fff !important;
    margin: 0 5px;
    font-size: 2.1vmin;
}

.dark-light-bg .bullets {
    color: #444a79;
}

.dark-light-bg .repeat_button_audio {
    border: #444a79;
    color: #444a79;
}


/* count syllabus page and CulminatingPick*/

.count-syllabus,
.CulminatingPick {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    display: flex;
    align-content: space-between;
    padding-top: 0;
}

.pickbeginingwrap {
    min-height: 420px;
}

.CulminatingPick.mainFlashcard_flip {
    overflow-y: auto;
}

.count-syllabus .container-fluid,
.CulminatingPick .pickbeginingwrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.count-syllabus .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.CulminatingPick .container-fluid .row,
.CulminatingPick .pickbeginingwrap,
.count-syllabus .container-fluid .row {
    width: 100%;
}

.p-25 {
    padding: 0px 25px;
}

.syllabus-image-div {
    width: 100%;
}

.syllabus-image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0px !important;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid #e6e4e4;
    cursor: pointer;
}

.syllabus-image img {
    max-width: 100%;
    width: 75%;
    height: 100%;
    margin: auto;
    object-fit: contain;
}

.mt-1k {
    margin-top: 0.1em;
}

.mt-2k {
    margin-top: 0.2em;
}

.mt-3k {
    margin-top: 0.3em;
}

.mt-4k {
    margin-top: 0.4em;
}

.mt-5k {
    margin-top: 0.5em;
}

.mt-1 {
    margin-top: 1em;
}

.mt-2 {
    margin-top: 2em;
}

.mt-3 {
    margin-top: 3em;
}

.mt-4 {
    margin-top: 4em;
}

.mt-5 {
    margin-top: 5em;
}

.syllabus-image-div .form-group {
    margin-bottom: 0px;
}

.syllabus-div {
    height: 100%;
    margin-bottom: 10px;
}

.syllabus-div .input-div {
    height: 40px;
    border: 1px solid #ccc;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
}

.syllabus-div .input-div p {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.syllabus-div .steps {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.syllabus-div .steps ul {
    margin: 0px;
    padding-left: 0px;
    width: 100%;
    background-color: #fff;
}

.syllabus-div .steps ul li {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    padding: 12px 19px;
    text-align: center;
    border: 2px solid #000;
    cursor: pointer;
    width: 25%;
}

.syllabus-div .steps ul li:nth-child(2) {
    border-left: none;
}

.syllabus-div .steps ul li:nth-child(3) {
    border-left: none;
}

.syllabus-div .steps ul li:nth-child(4) {
    border-left: none;
}

.syllabus-div .steps ul li.active {
    background: yellow;
}

.top-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 10px;
}

.top-heading .syllabus_heading {
    color: #131313;
    font-size: 24px;
    margin: 0px 0px 10px 0px;
    width: 100%;
}

.interactivity .click-rating span.repeat-icon {
    margin: 0 0 0 20px !important;
}

.interactivity .click-rating,
.phonicsEreaderClass .click-rating {
    margin-top: 10px !important;
    margin-bottom: 10px;
    width: 100%;
}

.count-syllabus .container-fluid .row.mt-3k,
.CulminatingPick .container-fluid .row.mt-3k {
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.count-syllabus .container-fluid .row.mt-3k {
    width: 100%;
    text-align: center;
    margin: auto;
}

.countTheSyllabus-wrap {
    display: inline-block;
    width: 90%;
}

#countTheSyllabus .col-xl-12.col-lg-12 {
    position: static;
}

.clicksoundinteractivity .eight-falsh-card-wrap {
    position: relative;
}

.CulminatingPick .container-fluid .row.mt-3k {
    display: flex;
    flex-wrap: wrap;
}

.CulminatingPick .pickbeginingwrap {
    height: 100%;
    align-content: space-between;
}

.pickbeginingwrap .container-fluid {
    width: 100%;
    position: relative;
}

.pickbeginingwrap .alphabet-div .form-group input {
    margin-bottom: 0;
    pointer-events: none;
}

.CulminatingPick .pickbeginingwrap .dagable-names {
    margin: 20px 0 25px 0;
    padding: 0;
}

.CulminatingPick .container-fluid .row.mt-3k .col-lg-12 {
    width: 100%;
}

.Contraction-wrap i {
    right: 5px;
}

.bingoTitleBtn {
    display: inline-block;
    background: #1838de;
    border: 5px solid #fff;
    border-radius: 50px;
    color: #fff;
    box-shadow: 0 0 10px #3c5ead inset;
    -webkit-box-shadow: 0 0 10px #3c5ead inset;
    width: 100%;
    max-width: 170px;
    margin: auto;
    text-align: center;
    padding: 0px 0;
    font-size: 25px;
}

.ReactModalPortal h1 {
    font-size: 1.65em;
    text-align: center;
}

.writingimgs {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


/* .iFrameSec a {
    position: absolute;
    bottom: 9%;
    right: 9%;
    background: #FF9F0A;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    border: 3px solid #C1954E;
}
.iFrameSec a img {
    width: 27px;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
} */

.abcgame_abcpickrecommendedgamewrap .abcpopballonGameFull.popBalloonRecommendedgamewrap.abcgame_abcpickrecommendedgame.abcgame_abcpickrecommendedgamefull,
.abcgame_maincontainerContent.popBalloonRecommendedgamewrap.abclgfpopballon_image_pg1 {
    background-size: cover !important;
    background-image: none !important;
}

.popBalloonLogo,
.gameContainer .abcgame_maincontainerContent.popBalloonRecommendedgamewrap .gameinstructpglayernxtbtnimg.abcgame_smlogo {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/pop-the-balloon-new-coverlogo.jpg") !important;
    background-position: center;
}

.abcgame_abcpickrecommendedgamewrap .abcpopballonGameFull.popBalloonRecommendedgamewrap.abcgame_abcpickrecommendedgame.abcgame_abcpickrecommendedgamefull .popBalloonLogo.abcgame_smlogo.newabcpopballongamesmlogo.abcpopballonLogo,
.abcgame_maincontainerContent.popBalloonRecommendedgamewrap.abclgfpopballon_image_pg1 .gameinstructpglayernxtbtnimg.abcgame_smlogo.abclgfpopballon_gameinstructpglayernxtbtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamebglogo.png") !important;
    background-position: center;
}

.abcgame_splashwrap {
    justify-content: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bingoLogo {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_logo.png") !important;
    margin: 0 auto;
    background-position: center;
    border: none;
    background-repeat: no-repeat;
    margin-top: 0%;
    background-size: contain;
    box-shadow: none;
}

.abcgame_abcpickrecommendedgame button,
#abcsoundmatch .buttonDiv button {
    width: 151px;
    height: 100px;
}

.gameContainer .abcgame_abcpickoptionalgamelist button {
    width: 70px;
    height: 25px;
    background-size: contain;
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    bottom: 30px;
    transform: none;
    font-size: 0 !important;
    top: auto !important;
}

.gameContainer .abcgame_bingoscoreno {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0;
    margin: 0 auto;
    line-height: 39px;
    font-size: 24px;
}

.abcgame_abcpickrecommendedgame button,
.abcgame_abcpickoptionalgamelist button,
#abcsoundmatch .buttonDiv button {
    position: static;
    color: #fff;
    font-size: 0 !important;
    background-color: transparent;
    border: none;
    margin: 0 auto;
    background-position-y: center !important;
    background-position-x: center;
    background-size: contain;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/readingoptionalgameplay_button_Text.png);
    background-repeat: no-repeat;
}

.bingoRecomendedGame .abcgame_abcpickrecommendedgame {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_homebg.png) !important;
}

#interactivity_div .connectthedots-centerlized-wrapper .gameWrapper {
    width: 100%;
    height: 100%;
}


/* #interactivity_div .connectthedots-startgame-innerwrapper {
    height: 70ch !important;
    width: 70ch !important;
} */


/* #interactivity_div .connectthedots-canvas-container {
    height: 70ch !important;
    width: 70ch !important;
} */

#interactivity_div .connect-the-dots-wrapper {
    display: flex;
    align-items: center;
}


/* .bingoRecomendedGame.abcgame_abcpickrecommendedgamewrap.ng-scope{
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #fff;
    position: relative;
    box-shadow: #ccc 1px 2px 8px 2px;
    margin-bottom: 1%;
    height: 63% !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
} */


/***---------------------medal dialog box-----------------***/

.phonicsMain #medalDialogModal .modal-dialog .modal-content {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    left: 50%;
    border-radius: 0 !important;
}

.phonicsMain #medalDialogModal .modal-dialog .modal-content .modal-header {
    border-radius: 0 !important;
}

div#medalDialogModal:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.25);
}

.phonicsMain #medalDialogModal .MuiListItem-gutters span.material-icons.MuiIcon-root svg,
.phonicsMain #medalDialogModal .MuiListItem-gutters img {
    width: 120px;
    height: 80px;
    object-fit: contain;
}

.phonicsMain #medalDialogModal li {
    margin-bottom: 15px;
}

.phonicsMain #medalDialogModal li:last-child {
    margin-bottom: 0px;
}

.phonicsMain #medalDialogModal .material-icons.MuiIcon-root {
    width: auto;
    height: auto;
}

.phonicsMain #medalDialogModal li span:last-child {
    font-size: 14px;
    font-weight: bold;
}

.phonicsMain #medalDialogModal li span:first-child {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: normal;
}

.phonicsMain #medalDialogModal .MuiListItem-gutters img {
    margin: 15px 0;
}

.phonicsMain #medalDialogModal .modal-dialog .modal-content .modal-body {
    min-height: auto;
    padding: 15px;
    text-align: center;
    max-height: 500px;
    overflow: auto;
}

.phonicsMain #medalDialogModal .MuiList-padding li.MuiListItem-root.MuiListItem-gutters p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.phonicsMain #medalDialogModal .modal-dialog .modal-content .modal-body .dialog-head {
    font-size: 30px;
    color: #193463;
}

.phonicsMain #medalDialogModal .modal-dialog .modal-content .modal-body div ul .MuiTypography-root {
    font-size: 20px;
    color: #333;
}

.icon-wrap {
    position: relative;
}

.phonicsMain #medalDialogModal .icon-wrap span.material-icons.MuiIcon-root {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    margin: auto;
}

.phonicsMain #medalDialogModal .icon-wrap span.material-icons.MuiIcon-root svg {
    fill: #e38700;
    width: 40px;
    height: 40px;
}

.mg_top .recording-name {
    text-overflow: clip;
    overflow: hidden;
}
/* responsive */

@media only screen and (max-width: 500px) {
    .word-pick {
        height: auto;
    }

    .sentence-pick-rightside {
        height: 100%;
    }

    .correct-Card i {
        right: 10px;
        top: -11px;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 55px;
        left: 20px;
        right: 20px;
        padding: 10px 0px;
    }

    .syllabus-div .steps ul li {
        padding: 8px 16px;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .syllabus-div .steps ul {
        margin-bottom: 20px;
    }

    .mainFlashcard_flip .click-rating {
        margin-top: 55px;
    }

    .instruction_text {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: auto;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .audio-text {
        font-size: 17px !important;
    }

    .syllabus-div {
        margin-bottom: 20px;
    }

    .leather-book .turn-page-wrapper .bookTemplate .page.odd {
        height: 84% !important;
    }
}

#strocket-first .savethePlanetLogo,
#strocket-first .shootThestarModeScreen {
    background-size: cover !important;
    background-position: center !important;
    width: 100% !important;
}

.savethePlanetLogo {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/rocketwords/savetheplaner-welcome-bg.png) !important;
    height: 100%;
}

.saveThePLanetsmlogo {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/rocketwords/rocketwords-logo.png) !important;
}

.abcgame_abcpickrecommendedgamewrap .abcgame_abcpickrecommendedgame .abcgame_smlogo.saveThePLanetsmlogo.abcSaveThePLanetsmlogo,
.abcgame_smlogo.savePlanetModeLogo.abcSaveThePLanetsmlogo {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/shoottherockets/str_img/abc-rocket-blast.png) !important;
}


.shootThestarModeScreen {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/rocketwords/savetheplaner-welcome-bg.png) !important;
    height: 100%;
}

.savePlanetModeLogo {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/rocketwords/rocketwords-logo.png) !important;
    background-position: center;
}

@media only screen and (min-width: 501px) and (max-width: 650px) {
    #interactivity_div .connectthedots-startgame-innerwrapper {
        /* width: 163vh !important;
        height: 132vh !important; */
        transform: scale(0.5) !important;
    }

    .landscpe .phonicsMain .ttheader .nav-bar-btn {
        margin-right: 13px;
    }

    .word-pick {
        height: auto;
    }

    .sentence-pick-rightside {
        height: 100%;
    }

    .syllabus-image i {
        right: 15px !important;
    }

    .Contraction-wrap i {
        right: 6px;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        height: 278px;
        display: flex;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        align-items: center;
    }

    .text-field {
        width: 80%;
        margin: auto auto 40px auto;
    }

    .dragable-imag e img {
        width: 50%;
        height: 90%;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 55px;
        left: 20px;
        right: 20px;
        padding: 10px 0px;
    }

    .top-heading {
        margin-top: 70px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 135px;
    }

    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto;
        bottom: 15px;
        text-align: center;
        display: flex;
        width: 80%;
        justify-content: center;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 148px;
    }

    .landscape #SightWordBlast .jumpGameResultDiv .abcgame_nextlevel,
    .landscape #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 30px;
    }
}

@media only screen and (min-width: 561px) and (max-width: 570px) {

    /* abc sound match css */
    .landscape .abcgame_vertical.vertical_4 {
        height: 100% !important;
        margin-top: 6px !important;
        top: -2px !important;
    }

    .landscape .abcgame_horizontalbottom .abcgame_sm_drag {
        height: 98%;
    }

    .landscape .abcgame_vertical.vertical_5 .abcgame_sm_drag {
        max-height: 9.7% !important;
    }

    .landscape #smdraghb_0 {
        width: 20.9%;
        left: 0px !important;
    }

    .landscape .abcgame_horizontalbottom {
        right: 10px;
        height: 12.5%;
        width: 77.5%;
        display: flex;
        align-items: center;
    }

    .landscape #smdraghb_0:before {
        right: 80%;
        transform: scale(0.75);
    }

    .landscape .abcgame_horizontalbottom:after {
        left: -1px;
        width: 97%;
    }

    .landscape .abcgame_horizontalbottom:before {
        width: 95%;
        left: 0px;
        transform: scale(0.98);
        margin-bottom: 6px;
    }

    .landscape .abcgame_smgameplayWrap {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        padding: 5px;
    }

    .landscape .abcgame_vertical.vertical_5 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        height: 99.5%;
        float: none;
        right: 4px;
        border-radius: 7px 7px 0 0;
    }

    .landscape .abcgame_sm_gameRFT {
        width: 14%;
        height: 78%;
        position: relative;
    }

    /* end */
    .landscape .quizz_reader #quizPage .CompanionReaderQuiz-wrap {
        transform: scale(0.70) !important;
    }

    .landscape .interactivity #billBoard .align-middle .sentenceSpan {
        max-width: 50% !important;
    }

    .landscape .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 60%;
    }

    .landscape .billboard-words #billBoard {
        min-height: 200px !important;
        overflow-y: auto;
    }

    .landscape .phonicsMain .ttheader .nav-bar-btn {
        padding: 0 2px !important;
    }

    .landscape .phonicsMain .ttheader {
        padding: 8px 3px;
    }

    .landscape .billboard-screen-change #billBoard .slow_sound,
    .landscape .billboard-screen-change #billBoard .slow_sound i.icon-turtle-slow,
    .landscape .billboard-screen-change #billBoard i.icon-volume {
        width: 31px;
        height: 31px;
    }

    .landscape .phonicsMain header .h-right {
        width: 208px !important;
        margin: 0px -8px 0 0 !important;
    }

    .landscape #syllablepick .syllable_div {
        height: 70% !important;
    }

    .landscape .phonicsMain .ttheader .nav-bar-btn {
        margin-right: 3px;
        padding: 2px;
    }

    .landscape .phonicsMain .modal-dialog .modal-content,
    .landscape .phonicsMain .modal-header,
    .landscape .modal_content_wrapper {
        border-radius: 0 !important;
    }

    .landscape .phonicsMain .ic-text {
        font-size: 8px;
        letter-spacing: -0.2px;
    }

    /* syllable-pick */
    .landscape #syllablepick .vowels-game-container {
        flex-direction: row !important;
    }

    .landscape #syllablepick_lefttsidebar,
    .landscape #syllablepick_rightsidebar {
        padding: 0 20px !important;
    }

    .landscape #syllablepick_rightsidebar .circle_couting ul li {
        width: 50% !important;
        margin: 10px 0;
    }

    .landscape #syllablepick_rightsidebar .circle_couting ul li>div {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px;
        border-width: 3px;
    }

    .landscape #syllablepick_lefttsidebar .curve_text_div {
        border-radius: 0 55px 55px 0px !important;
        border-bottom: 4px solid #ba9e2f !important;
        height: 55px !important;
        border-width: 0 0 4px 0 !important;
    }

    .landscape #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 12px !important;
    }

    .landscape #syllablepick_lefttsidebar {
        padding-left: 0px !important;
    }

    .landscape #syllablepick_rightsidebar {
        padding-right: 0px !important;
    }

    .landscape #syllablepick_lefttsidebar,
    .landscape #syllablepick_rightsidebar {
        width: 25%;
    }

    /* end */
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 135px;
        margin-top: 20%;
    }

    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 10px !important;
        right: auto;
        bottom: 15px;
        text-align: center;
        display: flex;
        width: 80%;
        justify-content: center;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 128px;
        margin-top: 56%;
        font-size: 25px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 14px !important;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 95%;
        margin: auto;
        border-radius: 0;
    }

    .landscape #SightWordBlast .jumpGameResultDiv .abcgame_nextlevel,
    .landscape #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px !important;
    }

    .landscape #SightWordBlast .abcgame_abcpick_gameResult div {
        font-size: 7px;
    }

}

@media only screen and (min-width: 628px) and (max-width: 640px) {

    /* abc sound match css */
    .landscape .abcgame_horizontalbottom .abcgame_sm_drag {
        height: 96%;
    }

    .landscape #smdraghb_0 {
        width: 20.9%;
        left: 0px !important;
    }

    .landscape .abcgame_horizontalbottom {
        right: 10px;
        height: 12.5%;
        width: 77.5%;
        display: flex;
        align-items: center;
    }

    .landscape #smdraghb_0:before {
        right: 90%;
        transform: scale(0.85);
    }

    .landscape .abcgame_horizontalbottom:after {
        left: -4px;
        width: 96%;
    }

    .landscape .abcgame_horizontalbottom:before {
        width: 100%;
        left: 0px;
        transform: scale(0.95);
    }

    .landscape .abcgame_smgameplayWrap {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        padding: 5px;
    }

    .landscape .abcgame_vertical.vertical_5 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        height: 99.5%;
        float: none;
        right: 4px;
        border-radius: 7px 7px 0 0;
    }

    .landscape .abcgame_sm_gameRFT {
        width: 14%;
        height: 78%;
        position: relative;
    }

    /* end */
    .landscape .phonicsMain .ttheader {
        padding: 5px;
    }

    .landscape .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 66%;
    }

    .landscape .billboard-screen-change #billBoard .slow_sound,
    .landscape .billboard-screen-change #billBoard .slow_sound i.icon-turtle-slow,
    .landscape .billboard-screen-change #billBoard i.icon-volume {
        width: 31px;
        height: 31px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 15px !important;
        margin-top: 5%;
        position: absolute;
    }

    .landscape .phonicsMain .ttheader .nav-bar-btn {
        margin-right: 4px;
        padding: 3px;
    }

    .landscape .phonicsMain .ic-text {
        font-size: 9px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 138px;
        margin-right: 8%;
        margin-top: 25%;
    }

    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto;
        bottom: 15px;
        text-align: center;
        display: flex;
        width: 80%;
        justify-content: center;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 130px;
        margin-top: 0%;
        font-size: 25px;
    }

    .landscape #SightWordBlast .jumpGameResultDiv .abcgame_nextlevel,
    .landscape #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_gameResult div {
        font-size: 6.5px;
    }
}

@media (min-width: 465px) and (max-width: 767px) and (orientation: landscape) {
    #interactivity_div .connectthedots-startgame-innerwrapper {
        /* width: 165vh !important;
        height: 133vh !important; */
        /* width: 147vh !important;
        height: 118vh !important; */
    }

    .connectthedots-canvas-container {
        /* width: 165vh !important;
    height: 133vh !important; */
        /* width: 147vh !important;
        height: 118vh !important; */
    }
}

@media only screen and (min-width: 640px) and (max-width: 653px) and (max-height:280px) {
    .landscape .billboard-words #billBoard {
        min-height: 200px !important;
        overflow-y: auto;
    }

    .landscape .quizz_reader.container-fluid.height100 {
        min-height: 280px !important;
    }
}

@media only screen and (min-width: 651px) and (max-width: 667px) {

    /* abc bingo css */
    .landscape #abcBingoMainDiv .abcgame_smoverlay {
        position: absolute !important;
    }

    .landscape #abcBingoMainDiv .connectthedots-game-instruction-wrapper ul li {
        font-size: 16px !important;
    }

    /* end   */
    /* abc sound match css */
    .landscape .abcgame_horizontalbottom .abcgame_sm_drag {
        height: 95%;
    }

    .landscape .abcgame_vertical.vertical_5 .abcgame_sm_drag {
        max-height: 10.5% !important;
    }

    .landscape #smdraghb_0 {
        width: 20.9%;
        left: 0px !important;
    }

    .landscape .abcgame_horizontalbottom {
        right: 10px;
        height: 12.5%;
        width: 77.5%;
        display: flex;
        align-items: center;
    }

    .landscape #smdraghb_0:before {
        right: 90%;
        transform: scale(0.85);
    }

    .landscape .abcgame_horizontalbottom:after {
        left: -1px;
        width: 97%;
    }

    .landscape .abcgame_horizontalbottom:before {
        width: 97%;
        left: 0px;
        transform: scale(0.85);
        margin-bottom: 4px;
    }

    .landscape .abcgame_smgameplayWrap {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        padding: 5px;
    }

    .landscape .abcgame_vertical.vertical_5 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        height: 99.5%;
        float: none;
        right: 5px;
        border-radius: 7px 7px 0 0;
    }

    .landscape .abcgame_sm_gameRFT {
        width: 14%;
        height: 78%;
        position: relative;
    }

    /* end */
    .landscape .billboard-screen-change #billBoard .slow_sound,
    .landscape .billboard-screen-change #billBoard .slow_sound i.icon-turtle-slow,
    .landscape .billboard-screen-change #billBoard i.icon-volume {
        width: 31px;
        height: 31px;
    }

    .landscape .phonicsMain .ic-text {
        font-size: 10px;
    }

    .landscape .phonicsMain .ttheader .nav-bar-btn {
        padding: 0 2px !important;
    }

    .landscape .phonicsMain .ttheader {
        padding: 8px 3px;
    }

    .landscape #syllablepick_rightsidebar .circle_couting ul li {
        width: 50%;
        float: left;
        list-style-type: none;
        margin: 6px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .landscape #syllablepick_lefttsidebar .curve_text_div {
        height: 65px;
    }

    .landscape #syllablepick #syllable_contentbox,
    .gameContainer .contentBox {
        height: 50vh;
    }

    .landscape #syllablepick .vowels-centerlized-wrapper {
        height: 80%;
        margin-bottom: 5px;
    }

    .landscape #syllablepick .syllable_div {
        height: 80% !important;
    }

    .landscape #SightWordBlast .abcgame_abcpick_gameResult .jumpGameOverlay .jumpgameResultLeftDiv,
    .landscape #SightWordBlast .abcgame_abcpick_gameResult .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 7.5px;
    }

    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 125px;
        font-size: 25px;
        margin-top: 85%;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 17px !important;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-top: 32%;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 8px !important;
        right: auto;
        bottom: 15px;
    }

    .landscape #strocket-first {
        min-height: 400px;
    }

    .landscape #wordLadder .vowels-img {
        height: 50px !important;
        width: 95%;
        margin: 8px 0px !important;
    }

    .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        height: 80% !important;
    }

    #wordLadder .vowels-letter-boxes .vowel-letter h3 {
        font-size: 18px !important;
        line-height: 20px !important;
    }

    #wordLadder .vowels-bg {
        padding: 10px 0px !important;
    }

    .bgc_game_img {
        width: 35%;
        height: 35%;
        right: -10%;
        bottom: 28px;
    }

    .word-pick {
        height: auto;
    }

    .correct-Card i {
        right: 107px;
        top: -12px;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 55px;
        left: 20px;
        right: 20px;
        padding: 10px 0px;
    }

    .word-pick.picture-pick.sentence-pickInteractivity-wrap .row {
        margin-top: 10px;
    }

    .text-field {
        width: 70%;
        margin: auto auto 40px auto;
    }

    .top-heading {
        margin-top: 40px;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .Contraction-wrap i {
        right: 6px;
    }

    .flipthecard .instruction_text {
        margin-top: 50px;
    }

    .flipthecard .flip-divider {
        width: 50%;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_gameResult .jumpGameOverlay .jumpgameResultLeftDiv,
    .landscape #shootthestars .abcgame_abcpick_gameResult .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 7.5px;
    }

    #shootthestars .abcgame_abcpick_resultanim {
        position: relative;
    }

    #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 125px;
        font-size: 25px;
        margin-top: 0;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 17px !important;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-top: 32%;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto;
        bottom: 15px;
    }
}


/* for pixel 3 landscape 05-01-2021  */

/* @media only screen and (min-width: 731px) and (max-width: 740px) and (orientation: landscape) {

} */


/* ends here */

@media only screen and (min-width: 668px) and (max-width: 767px) and (orientation: landscape) {
    .landscape .phonicsMain .abcgame_vertical.vertical_4 {
        left: -1px !important;
    }

    .landscape .Phonics_ereader .ereader_range {
        width: 55% !important;
    }

    .landscape #syllablepick .vowels-centerlized-wrapper {
        height: 80%;
        margin-bottom: 0px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 17px !important;
    }

    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 135px !important;
        margin-top: 77%;
        font-size: 25px;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 10px !important;
        bottom: 15px;
        right: auto;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 147px;
        margin-top: 28%;
        margin-right: 8%;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 17px !important;
    }

    #shootthestars .abcgame_abcpick_resultanim {
        position: relative;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 135px !important;
        margin-top: 0;
        font-size: 25px;
    }

    #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 10px !important;
        bottom: 15px;
        right: auto;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 147px;
        margin-top: 28%;
        margin-right: 8%;
    }

    .menuTabHeader li button {
        transform: scale(0.9);
        margin: -6.5px 0;
    }

    .My-carousel {
        min-height: 100% !important;
    }
}

@media only screen and (min-width: 668px) and (max-width: 767px) {
    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0px !important;
        bottom: 15px;
        right: auto;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 147px;
        margin-top: 28%;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 98%;
        margin: auto;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 135px !important;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_resultanim {
        position: relative;
    }

    #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0px !important;
        bottom: 15px;
        right: auto;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 147px;
        margin-top: 28%;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        width: 100%;
        margin: auto;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 135px !important;
        min-height: 150px;
    }

    .word-pick {
        height: auto;
    }

    .syllabus-image i {
        right: 15px !important;
    }

    .Contraction-wrap i {
        right: 5px !important;
    }

    .correct-Card i {
        right: 58px;
        top: -12px;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 55px;
        left: 20px;
        right: 20px;
        padding: 10px 0px;
    }

    .word-pick.picture-pick.sentence-pickInteractivity-wrap .row {
        margin-top: 10px;
    }

    .text-field {
        width: 70%;
        margin: auto auto 40px auto;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .syllabus-div .steps ul {
        margin-bottom: 20px;
    }

    /* flipcard interactivity /phonics/interactivity/level:1/section:24/lesson:lesson2/activity:51 */
    .flipthecard .instruction_text {
        margin-top: 50px;
        font-size: 3vmin !important;
    }

    .flipthecard .flash-card-row {
        width: 90%;
    }

    .flipthecard .flip-divider {
        width: 50%;
        max-width: 50%;
    }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {

    .portrait .phonicsMain #recordingIframe #recordingEreader {
        max-height: calc(100dvh - 150px);
    }

    .portrait #words_rhyiming .connectthedots-game-instruction-wrapper ul {
        justify-content: center;
    }

    .portrait #words_rhyiming .connectthedots-game-instruction-wrapper {
        position: fixed !important;
        height: auto !important;
        width: 80% !important;
        max-height: 145px;
    }

    .portrait #words_rhyiming .rhyme_right {
        right: 8px;
    }

    .portrait #recordingIframe .isMobilePortrait {
        width: 100%;
        height: 100%;
        float: left;
        margin: 20px 0px !important;
    }

    .portrait #recordingIframe header .col-md-4 {
        width: 65%;
        float: left;
    }

    .portrait #recordingIframe header .col-md-8 {
        width: 35%;
        float: left;
    }

    .portrait #recordingIframe header .common-profile-wrap {
        margin-top: 25px;
        margin-right: 11px;
        display: flex;
        align-items: center;
    }

    .portrait #recordingIframe header .common-profile-wrap .common-profile-section {
        width: 70px;
    }

    .portrait #recordingIframe header .common-profile-wrap .common-profile-section .sb-avatar {
        width: 32px;
        height: 32px;
    }

    .portrait #recordingIframe header .ML-store #LoginButton {
        position: relative;
        margin-top: 25px;
    }

    .portrait #recordingIframe header .logo-wrap {
        justify-content: space-between;
        text-align: center;
        align-items: center;
        width: 100%;
    }

    .portrait #recordingIframe .sommer-logo {
        margin-right: 30px;
    }

    .portrait #recordingIframe .recording-play-controls {
        position: relative;
    }

    .portrait .phonics_popup .search_bar-section .flex-end-right input.search-form-control {
        width: 98.8% !important;
    }

    .portrait #recordingIframe header .isMobilePortrait .logo-wrap {
        justify-content: space-between;
        display: flex;
        text-align: center;
        align-items: center;
        width: 95%;
    }

    .portrait #recordingIframe header .col-md-4 {
        width: 60%;
        display: flex;
        align-items: center;
    }

    .portrait #recordingIframe header .col-md-8 {
        width: 40%;
        display: flex;
        align-items: center;
    }

    .portrait .phonics_popup .search_bar-section .flex-end-right input.search-form-control {
        width: 98.5% !important;
    }

    .portrait #recordingIframe header .logo-wrap {
        justify-content: space-between;
        text-align: center;
        align-items: center;
        width: 60%;
    }

    .portrait #recordingIframe header {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portrait #recordingIframe .sommer-logo {
        margin-right: 30px;
    }

    .portrait #recordingIframe .recording-play-controls {
        position: relative;
    }

    .portrait #recordingIframe .recording-play-controls .recording-full-screen-control .btn-action {
        top: 15px !important;
        left: 15px !important;
    }

    .portrait #lesson_iframe.Phonics_ereader .content_ereader_modify .iframe_ereader {
        height: calc(55% - 35px);
        margin-bottom: 20px;
        width: 100%;
    }

    .portrai #lesson_iframe.Phonics_ereader {
        width: 100%;
    }

    .portrait #lesson_ifr.ebookParentDiv {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portrait .abcgame_horizontalbottom #smdraghb_0 {
        width: 132px;
    }

    .portrait .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 60%;
    }

    .portrait .phonics_popup .modal-body {
        max-height: 650px;
        height: 650px;
    }

    /* .portrait .course_icon, .portrait .story_time_icon, .portrait .lesson_icon, .portrait .video_icon, .portrait .interactivity_icon, .portrait .game_icon, .portrait .story_icon, .portrait .quizz_icon, .portrait .book_icon {
        background-size: 60px !important;
        background-repeat: no-repeat;
        width: 65px !important;
        height: 65px !important;
        background-position: center;
        margin-bottom: 5px;
        background-color: transparent;
    } */
    .portrait .phonicsMain .ttheader {
        display: flex;
        position: relative;
        width: 100%;
        transform: scale(1);
        margin-left: auto;
        padding: 0;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
    }

    .portrait .head-level1 {
        top: 40px !important;
        left: -74px;
        position: absolute;
    }

    .portrait .head-level1 .menuTabHeader {
        width: 25%;
    }

    .portrait .phonicsMain .menuTabHeader li button {
        border-radius: 0;
        padding-bottom: 0px;
        height: 65px !important;
        border-right: none;
        min-width: 10px;
        margin-top: 0px;
    }

    .portrait .menuTabHeader li {
        margin: 10px 0 0 0;
    }

    .portrait button.active.md-button.md-ink-ripple.activeLesson {
        border-radius: 0;
        min-width: 71px;
        right: 0;
        box-shadow: none !important;
        background: #fff !important;
        margin-left: 4px;
    }

    .portrait button.active.textbook_1,
    .portrait button.active.textbook_1 span.ng-binding {
        color: #193463 !important;
    }

    .portrait button.active.textbook_2,
    .portrait button.active.textbook_2 span.ng-binding {
        color: #e72426 !important;
    }

    .portrait button.active.textbook_3,
    .portrait button.active.textbook_3 span.ng-binding {
        color: #58b950 !important;
    }

    .portrait button.active.textbook_4,
    .portrait button.active.textbook_4 span.ng-binding {
        color: #f36212 !important;
    }

    .portrait button.active.textbook_5,
    .portrait button.active.textbook_5 span.ng-binding {
        color: #2a7aba !important;
    }

    .portrait button.active.textbook_6,
    .portrait button.active.textbook_6 span.ng-binding {
        color: #9e3e93 !important;
    }

    .portrait button.active.textbook_7,
    .portrait button.active.textbook_7 span.ng-binding {
        color: #3eab4e !important;
    }

    .portrait button.active.textbook_8,
    .portrait button.active.textbook_8 span.ng-binding {
        color: #3a62a6 !important;
    }

    .portrait .menuTabHeader li button:before {
        display: none !important;
    }

    .portrait .menuTabHeader li {
        display: block !important;
        width: 20%;
        margin-top: 0px;
        height: 60px;
    }

    .portrait .phonicsMain .ttheader .nav-bar-btn {
        margin: 3px 3px 0 !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }

    .portrait .phonicsMain .ic-text {
        font-size: 8px;
        display: none;
    }

    .portrait .phonicsMain .modal-dialog .modal-content {
        border-width: 10px;
    }

    /* end  */
    .portrait #syllablepick_rightsidebar .circle_couting {
        width: 100%;
    }

    .nosentense_carousel .inner-flex-row {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 16% 0;
    }

    .nosentense_carousel .flex-item-div {
        top: -14vh !important;
        left: 0 !important;
    }

    /* added css for ipad portrait Scroll is coming on syllable pick issue  */
    .portrait #syllablepick #syllable_contentbox {
        margin: 0px auto !important;
        height: 50vh !important;
        padding: 10px 0 !important;
    }

    .portrait #syllablepick_lefttsidebar .curve_text_div {
        height: 60px !important;
        width: 70% !important;
    }

    .portrait #syllablepick_rightsidebar .circle_couting ul li>div {
        font-size: 30px !important;
        height: 90px !important;
        width: 90px !important;
    }

    .portrait #syllablepick_rightsidebar .circle_couting ul {
        padding: 0px 0 5px 0;
    }

    .portrait #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 30px !important;
        line-height: 1 !important;
    }

    .portrait #syllablepick .syllablepick-heading.Syllable_stars .stars_interactivity {
        margin: 10px auto !important;
    }

    .portrait #syllablepick .syllable_div {
        height: 100% !important;
    }

    /* end */
    #syllablepick .vowels-centerlized-wrapper {
        height: 100%;
        margin-bottom: 0px;
    }

    #syllablepick .syllablepick-heading.Syllable_stars .stars_interactivity {
        grid-template-columns: auto auto auto auto auto auto auto;
        display: grid;
    }

    .portrait #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        height: 101%;
    }

    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 16px !important;
        bottom: 35px;
        right: auto;
        text-align: center;
        display: flex;
    }

    .portrait #SightWordBlast .abcgame_readycount {
        height: 285px !important;
        margin-top: 45%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 35px;
        position: absolute;
    }

    .portrait #SightWordBlast .jumpgameResultLeftDiv,
    .portrait #SightWordBlast .abcgame_abcpick_fright {
        font-size: 16px;
        margin-bottom: 5px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 305px;
        margin-top: 16%;
        margin-right: 8%;
    }

    /* save the planet  */
    .portrait #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        height: 101%;
    }

    #shootthestars .abcgame_abcpick_resultanim {
        position: relative;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        bottom: 35px;
        right: auto;
        text-align: center;
        display: flex;
    }

    .portrait #shootthestars .abcgame_readycount {
        height: 285px !important;
        margin-top: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 35px;
        position: absolute;
    }

    .portrait #shootthestars .jumpgameResultLeftDiv,
    .portrait #shootthestars .abcgame_abcpick_fright {
        font-size: 15px;
        margin-bottom: 0px;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 305px;
        margin-top: 16%;
        margin-right: 8%;
    }

    .phonicsMain .menuDialog.modal-dialog {
        margin-left: 15px !important;
    }

    .vowels-container .vowels-game-container {
        flex-direction: column !important;
    }

    .vowels-left-column .row.clock {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vowels-letter>.button_bg>span {
        font-size: 20px;
    }

    .vowels-container .vowels-left-column,
    .vowels-container .vowels-right-column {
        width: 100% !important;
        flex-direction: row !important;
    }

    .vowels-container .vowels-centered-column {
        width: 100% !important;
        padding: 0 15px !important;
    }

    .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        padding: 20px 0px;
    }

    .vowels-game-event-icons {
        width: auto !important;
    }

    .word-pick {
        height: auto;
    }

    .correct-Card i {
        right: 30px;
    }

    .Contraction-wrap i {
        right: 6px !important;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 60px;
        left: 20px;
        right: 20px;
        padding: 17px 0px;
        margin-bottom: 55px;
    }

    .text-field {
        width: 90%;
        margin: auto auto 40px auto;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .syllabus-div .steps ul li {
        padding: 8px 16px;
    }

    .syllabus-image-div i {
        right: 10px;
    }

    /* flipcard interactivity /phonics/interactivity/level:1/section:24/lesson:lesson2/activity:51 */
    .flipthecard .instruction_text {
        margin-top: 50px;
        font-size: 3vmin !important;
    }

    .flipthecard .flash-card-row {
        width: 90%;
    }

    .flipthecard .flip-divider {
        width: 50%;
    }

    .portrait #billBoard.bill-board-light {
        background-position-y: 47% !important;
    }

    .portrait #billBoard.bill-board-light .twoflash-cont .board-effect .sq-animate2:after {
        right: -30px;
        width: 150px;
        height: 150px;
        top: -143px;
    }

    /* shoot the rocket */
    .portrait #Shoottherocket .ScoreBar {
        flex-direction: column;
        width: 20% !important;
        align-items: center;
        margin-left: 50px;
        margin-bottom: 0px;
    }

    .portrait #Shoottherocket #shoot_gamescoreviewbox,
    .portrait #Shoottherocket #shoot_gamemissedviewbox {
        font-size: 18px !important;
        padding-left: 7px;
        margin-left: 0px !important;
        padding-right: 7px;
        width: 120px;
        margin-bottom: 15px;
    }

    .portrait #Shoottherocket .rightSideBar .row {
        width: 33% !important;
    }

    .portrait #Shoottherocket .timer {
        font-size: 22px;
        width: 120px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .portrait #Shoottherocket .mode {
        font-size: 15px;
    }

    .portrait #Shoottherocket .leftSideBar .row img {
        max-width: 80% !important;
    }

    .portrait #Shoottherocket .alphabetButton {
        width: 100% !important;
        font-size: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .portrait #Shoottherocket .clock canvas {
        width: 120px !important;
        height: 120px !important;
    }

    .portrait #Shootthestars .rightSideBar .timer-wrap {
        margin-left: 25px;
    }
}

@media only screen and (min-width:800px) and (max-width:802px) {

    /* added css for SL3-9345  */
    #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img img {
        height: auto !important;
    }

    /* end */
    /* css only work for kindle portrait  Kindle (portrait) Phonics : Book 3 : Section 2  : Billboard words :Billboard should touch the ground */
    /* .portrait #billBoard.bill-board-light .board-effect {
        margin: 20vh auto auto auto !important;
    } */
    .portrait .interactivity .right_column:before {
        width: 20px;
        height: 25px;
        border-radius: 5px;
    }

    /* end */
    .portrait #words_rhyiming .connectthedots-game-instruction-wrapper ul {
        justify-content: center;
    }

    .portrait #words_rhyiming .connectthedots-game-instruction-wrapper.animated.bounceIn {
        position: fixed !important;
        height: auto !important;
        width: 80% !important;
        max-height: 165px;
        font-size: 14px;
    }

    .portrait #lesson_iframe.Phonics_ereader .content_ereader_modify .iframe_ereader {
        height: calc(55% - 35px);
        margin-bottom: 20px;
        width: 100%;
    }

    .portrait .words_rhyiming {
        height: auto !important;
        padding: 7px 0;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box {
        margin-bottom: 15px;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .right-btns-grp {
        margin: 10px auto;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan p {
        font-size: 40px;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .rhymmediabox {
        flex-direction: column-reverse;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext {
        width: 85% !important;
    }

    .portrait .words_rhyiming #rhymewordsgame {
        width: 95% !important;
    }

    .portrai #lesson_iframe.Phonics_ereader {
        width: 100%;
    }

    .portrait #lesson_ifr.ebookParentDiv {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portrait #recordingIframe header .col-md-4 .isMobilePortrait .logo-wrap {
        justify-content: space-between;
        text-align: center;
        align-items: center;
        width: 100%;
        display: flex;
    }

    .portrait #recordingIframe header .col-md-4 {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .portrait #recordingIframe header .col-md-8 {
        width: 40%;
        display: flex;
        align-items: center;
    }

    .portrait #recordingIframe header .col-md-8.ML-store {
        margin-top: 20px;
    }

    .portrait #recordingIframe header {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .portrait #recordingIframe .sommer-logo {
        margin-right: 30px;
    }

    .portrait #recordingIframe .recording-play-controls {
        position: relative;
    }

    .portrait #recordingIframe .recording-play-controls .recording-full-screen-control .btn-action {
        top: 15px !important;
        left: 15px !important;
    }
}

@media only screen and (min-width: 800px) and (max-width: 820px) {
    .portrait #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        display: flex;
    }
    /* added css for SL3-9241 / SL3-9244 Kindle Portrait View */
    .portrait #flipping_leatherbook.flip-book2 #flipbook-viewport .audio-text .sentenceSpan {
        max-width: 60% !important;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom span {
        font-size: 22px !important;
    }

    /* end */

    .portrait .abcgame_maincontainerContent .abcgame_horizontalbottom #smdraghb_0 {
        left: -11px !important;
        width: 22% !important;
    }

    .portrait .abcgame_horizontalbottom {
        width: 82% !important;
    }

    .portrait .phonicsMain #smdraghb_0:before {
        width: 116px !important;
    }

    .portrait .menuDialog.modal-dialog .modal-body {
        height: 551px;
    }

    .portrait .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 62%;
    }

    .portrait .phonics_popup .modal-body {
        max-height: 720px;
    }

    .portrait .phonicsMain .modal-header {
        background: #193463 !important;
    }

    .portrait .phonicsMain .ttheader {
        display: flex;
        position: relative;
        width: 100%;
        transform: scale(1);
        margin-left: auto;
        padding: 0;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
    }

    .portrait .head-level1 {
        top: 40px !important;
        left: -72px;
        position: absolute;
    }

    .portrait .head-level1 .menuTabHeader {
        width: 25%;
    }

    .portrait .phonicsMain .menuTabHeader li button {
        border-radius: 0;
        padding-bottom: 0px;
        width: 65px !important;
        height: 65px !important;
        border-right: none;
        min-width: 10px;
        margin-top: 0px;
    }

    .portrait .menuTabHeader li {
        margin: 10px 0 0 0;
    }

    .portrait button.active.md-button.md-ink-ripple.activeLesson {
        border-radius: 0;
        min-width: 70px;
        right: 0;
        box-shadow: none !important;
        background: #fff !important;
        margin-left: 4px;
    }

    .portrait button.active.textbook_1,
    .portrait button.active.textbook_1 span.ng-binding {
        color: #193463 !important;
        border-color: #193463 !important;
    }

    .portrait button.active.textbook_2,
    .portrait button.active.textbook_2 span.ng-binding {
        color: #e72426 !important;
        border-color: #e72426 !important;
    }

    .portrait button.active.textbook_3,
    .portrait button.active.textbook_3 span.ng-binding {
        color: #58b950 !important;
        border-color: #58b950 !important;
    }

    .portrait button.active.textbook_4,
    .portrait button.active.textbook_4 span.ng-binding {
        color: #f36212 !important;
        border-color: #f36212 !important;
    }

    .portrait button.active.textbook_5,
    .portrait button.active.textbook_5 span.ng-binding {
        color: #2a7aba !important;
        border-color: #2a7aba !important;
    }

    .portrait button.active.textbook_6,
    .portrait button.active.textbook_6 span.ng-binding {
        color: #9e3e93 !important;
        border-color: #9e3e93 !important;
    }

    .portrait button.active.textbook_7,
    .portrait button.active.textbook_7 span.ng-binding {
        color: #3eab4e !important;
        border-color: #3eab4e !important;
    }

    .portrait button.active.textbook_8,
    .portrait button.active.textbook_8 span.ng-binding {
        color: #3a62a6 !important;
        border-color: #3a62a6 !important;
    }

    .portrait .menuTabHeader li button:before {
        display: none !important;
    }

    .portrait .menuTabHeader li {
        display: block !important;
        width: 20%;
        margin-top: 0px;
        height: 60px;
    }

    .portrait .phonicsMain .ttheader .nav-bar-btn {
        margin: 3px 3px 0 !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }

    .portrait .phonicsMain .ic-text {
        font-size: 8px;
        display: none;
    }

    .portrait .phonicsMain .modal-dialog .modal-content {
        border-width: 10px;
    }

    /* end  */
    .portrait #syllablepick_rightsidebar .circle_couting {
        width: 100%;
    }

    #interactivity_div .contentBox .connectthedots-startgame-innerwrapper {
        transform: scale(1.2);
    }

    .portrait #syllablepick .syllable_div {
        width: 90%;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 318px;
        margin-top: 25%;
        margin-right: 8%;
    }

    .portrait #SightWordBlast .abcgame_readycount {
        height: 295px !important;
        margin-top: 68%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 35px;
        position: absolute;
    }

    .portrait #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        width: 89% !important;
    }

    .portrait #SightWordBlast .rightSideBar .controlButtons {
        width: 35%;
    }

    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 20px !important;
        right: auto;
        bottom: 40px;
        text-align: center;
    }

    .portrait #SightWordBlast .abcgame_abcpick_gameResult {
        font-size: 17px;
    }

    .portrait #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 17px !important;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 318px;
        margin-top: 25%;
        margin-right: 8%;
    }

    .portrait #shootthestars .abcgame_readycount {
        height: 295px !important;
        margin-top: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 35px;
        position: absolute;
    }

    .portrait #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        width: 89% !important;
    }

    .portrait #shootthestars .rightSideBar .controlButtons {
        width: 35%;
    }

    #shootthestars .abcgame_abcpick_resultanim {
        position: relative;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0px !important;
        right: auto;
        bottom: 40px;
        text-align: center;
    }

    .portrait #shootthestars .abcgame_abcpick_gameResult {
        font-size: 17px;
    }

    .portrait #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px !important;
        margin-bottom: 0px !important;
    }

    .portrait .modal .modal-dialog {
        margin-left: 15px !important;
    }

    .modal .modal-dialog {
        margin-left: 0px !important;
    }

    #shootthestars .restartIncompleteAnim {
        left: 0;
        right: 0;
        margin: auto;
        font-size: 20px !important;
    }

    #appBody .LoginModal .btn-close {
        top: -20px !important;
    }

    .landscape header .letters-text-wrap {
        right: 60% !important;
    }

    .CulminatingPick {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .CulminatingPick .pickbeginingwrap {
        height: 100%;
    }

    #wordLadder .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
        margin: 40px 0px;
    }

    .vowels-container .vowels-game-container {
        flex-direction: column !important;
    }

    #wordLadder.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column.contentBox .vowels-bg {
        height: 100% !important;
        width: 100% !important;
        padding: 20px 0px;
    }

    .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
        margin: 40px auto !important;
    }

    #wordLadder .vowels-img {
        margin: 20px auto !important;
        height: 140px !important;
    }

    #wordLadder.vowels-container .vowels-letter-boxes .vowel-letter {
        height: 90px !important;
    }

    #wordLadder .orignal_letter {
        padding-top: 26px !important;
    }

    .vowels-letter-boxes .vowel-letter h3 {
        font-size: 32px !important;
    }

    #billBoard .boardString {
        max-width: 55% !important;
    }

    .vowels-left-column .row.clock {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vowels-letter>.button_bg>span {
        font-size: 20px;
    }

    .vowels-container .vowels-left-column,
    .vowels-container .vowels-right-column {
        width: 100% !important;
        flex-direction: row !important;
    }

    .vowels-container .vowels-centered-column {
        width: 100% !important;
        padding: 0 15px !important;
    }

    .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        padding: 20px 0px;
    }

    .vowels-game-event-icons {
        width: auto !important;
    }

    .word-pick {
        height: auto;
    }

    .CulminatingPick .dagable-names ul {
        margin: 0;
    }

    .correct-Card i {
        right: 30px;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: relative;
        bottom: 0px;
        left: 20px;
        right: 20px;
        padding: 17px 0px;
        margin-bottom: 55px;
    }

    .text-field {
        width: 90%;
        margin: auto auto 40px auto;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-image i {
        right: 15px !important;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .Contraction-wrap i {
        right: 6px !important;
    }

    /* flipcard interactivity /phonics/interactivity/level:1/section:24/lesson:lesson2/activity:51 */
    .flipthecard {
        height: auto;
    }

    .flipthecard .instruction_text {
        margin-top: 50px;
        font-size: 3vmin !important;
    }

    .flipthecard .flash-card-row {
        width: 90%;
    }

    .flipthecard .flip-divider {
        width: 50%;
        max-width: 50%;
    }

    #firstSoundPick .click-soundcard-wrap.layout-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* shoot the rocket */
    .portrait #Shoottherocket .ScoreBar {
        flex-direction: column;
        width: 20% !important;
        align-items: center;
        margin-left: 50px;
        margin-bottom: 0px;
    }

    .portrait #Shoottherocket #shoot_gamescoreviewbox,
    .portrait #Shoottherocket #shoot_gamemissedviewbox {
        font-size: 18px !important;
        padding-left: 7px;
        padding-right: 7px;
        width: 120px;
        margin-bottom: 15px;
    }

    .portrait #Shoottherocket .rightSideBar .row {
        width: 33% !important;
    }

    .portrait #Shoottherocket .timer {
        font-size: 22px;
        width: 120px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .portrait #Shoottherocket .mode {
        font-size: 15px;
    }

    .portrait #Shoottherocket .leftSideBar .row img {
        max-width: 80% !important;
    }

    .portrait #Shoottherocket .alphabetButton {
        width: 100% !important;
        font-size: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .portrait #Shoottherocket .clock canvas {
        width: 120px !important;
        height: 120px !important;
    }
}

@media only screen and (min-width: 810px) and (max-width: 819px) {

    /* add css  for iphone x recommended books */
    .landscape #lesson_iframe.Phonics_ereader .content_ereader_modify {
        height: auto !important;
    }

    .landscape #ereader_images .ereader-book {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .landscape .ereader_bookimages .ereader_images .flash-card-row .ereader-divider {
        margin: 0px 5px !important;
        padding: 6px ​0 !important;
    }

    .landscape .ebookContainer .content_ereader_modify .instruction_text {
        font-size: 25px !important;
        max-width: 80%;
        margin-bottom: 0px;
    }

    /* end  */
    /* abc sound match css */
    .landscape .abcgame_horizontalbottom .abcgame_sm_drag {
        height: 96%;
    }

    .landscape .Phonics_ereader .ereader_range {
        width: 58% !important;
    }

    .landscape #smdraghb_0 {
        width: 20.9%;
        left: 0px !important;
    }

    .landscape .abcgame_horizontalbottom {
        right: 17px;
        height: 12.5%;
        width: 75.5%;
        display: flex;
        align-items: center;
    }

    .landscape #smdraghb_0:before {
        right: 100%;
    }

    .landscape .abcgame_horizontalbottom:after {
        left: -3px;
        width: 97%;
    }

    .landscape .abcgame_vertical.vertical_5 .abcgame_sm_drag {
        max-height: 10.5% !important;
    }

    .landscape .abcgame_horizontalbottom:before {
        width: 93%;
        left: -2px;
    }

    .landscape .abcgame_smgameplayWrap {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        padding: 10px;
    }

    .landscape .abcgame_vertical.vertical_5 {
        width: 77%;
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        float: none;
        right: 6px;
        border-radius: 7px 7px 0 0;
    }

    .landscape .abcgame_sm_gameRFT {
        width: 14%;
        height: 78%;
        position: relative;
    }

    /* end */
    .landscape .billboard-screen-change #billBoard .slow_sound,
    .landscape .billboard-screen-change #billBoard .slow_sound i.icon-turtle-slow,
    .landscape .billboard-screen-change #billBoard i.icon-volume {
        width: 31px;
        height: 31px;
    }

    .landscape .quizz_reader #quizPage .CompanionReaderQuiz-wrap {
        transform: scale(0.90);
    }

    .phonicsMain .modal-dialog .modal-content,
    .phonicsMain .modal-header,
    .modal_content_wrapper {
        border-radius: 0px !important;
    }

    .landscape .modal .modal-dialog {
        margin-left: 25px !important;
    }

    .landscape .phonicsMain .ttheader .nav-bar-btn {
        padding: 0 2px !important;
    }

    .landscape .phonicsMain .ic-text {
        font-size: 10px;
    }

    .landscape .phonicsMain .ttheader {
        padding: 7px 3px;
        margin: 0 !important;
    }

    .landscape #syllablepick .vowels-centerlized-wrapper {
        height: 80%;
        margin-bottom: 5px;
    }

    .landscape #syllablepick .syllable_div {
        height: 95% !important;
    }

    .landscape #SightWordBlast .abcgame_abcpick_gameResult div {
        font-size: 7px !important;
        margin-bottom: 1px !important;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        padding-top: 7%;
        width: 78%;
        margin: auto;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 130px;
        margin-top: 25%;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 8px !important;
        right: auto;
        bottom: 11px;
        text-align: center;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn,
    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevel {
        height: 22px !important;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 125px !important;
        font-size: 20px;
        margin-top: 22vh;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 16px !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_gameResult div {
        font-size: 6px !important;
        margin-bottom: 0px !important;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        padding-top: 0;
        width: 100%;
        margin: auto;
        height: 100%;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 130px;
        margin-top: 25%;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto;
        bottom: 11px;
        text-align: center;
    }

    #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn,
    #shootthestars .jumpGameResultDiv .abcgame_nextlevel {
        height: 22px !important;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 150px !important;
        font-size: 20px;
        margin-top: 22vh;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 16px !important;
    }

    /* shoot the rocket */
    .landscape #Shoottherocket .alphabetButton {
        max-width: 145px;
        font-size: 12px;
        margin: 0;
    }

    #Shoottherocket #shoot_game_div canvas {
        margin-top: 0px;
        height: 100% !important;
    }

    .landscape #Shoottherocket #shoot_game_div {
        height: 100% !important;
    }

    .landscape #Shoottherocket #shoot_gamescoreviewbox,
    .landscape #Shoottherocket #shoot_gamemissedviewbox {
        height: 35px !important;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0px;
        margin: 0 auto;
    }

    .landscape #Shoottherocket .ScoreBar {
        margin-top: 30px;
    }

    .landscape #Shoottherocket #balloonContainerGame {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (min-width: 821px) and (max-width: 851px) {

    .landscape .ebookContainer .content_ereader_modify .instruction_text {
        font-size: 25px !important;
        max-width: 80%;
        margin-bottom: 15px;
    }

    /* abc sound match css */
    .landscape .abcgame_horizontalbottom .abcgame_sm_drag {
        height: 90%;
    }

    .landscape .Phonics_ereader .ereader_range {
        width: 50% !important;
    }

    .landscape .abcgame_vertical.vertical_5 .abcgame_sm_drag {
        max-height: 10.7%;
    }

    .landscape #smdraghb_0 {
        width: 20.9%;
        left: 0px !important;
    }

    .landscape .abcgame_horizontalbottom {
        right: 17px;
        height: 12.5%;
        width: 75.5%;
        display: flex;
        align-items: center;
    }

    .landscape #smdraghb_0:before {
        right: 100%;
    }

    .landscape .abcgame_horizontalbottom:after {
        left: -3px;
        width: 97%;
    }

    .landscape .abcgame_horizontalbottom:before {
        width: 93%;
        left: -2px;
    }

    .landscape .abcgame_smgameplayWrap {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        padding: 10px;
    }

    .landscape .abcgame_vertical.vertical_5 {
        width: 77%;
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        float: none;
        right: 7px;
        border-radius: 7px 7px 0 0;
    }

    .landscape .abcgame_sm_gameRFT {
        width: 14%;
        height: 78%;
        position: relative;
    }

    /* end */
    .landscape .phonicsMain .ttheader .nav-bar-btn {
        padding: 0 5px !important;
    }

    .landscape #appBody .phonicsMain .ttheader {
        margin-top: 4px !important;
        padding: 5px !important;
    }

    .landscape #syllablepick .vowels-centerlized-wrapper {
        height: 80%;
        margin-bottom: 0px;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 8px !important;
        bottom: 15px;
        text-align: center;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 150px !important;
        margin-top: 70%;
        font-size: 28px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 16px !important;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 164px;
        margin-top: 25%;
        margin-right: 8%;
    }

    #SightWordBlast .abcgame_abcpick_gameResult div {
        font-size: 8px !important;
        margin-bottom: 2px !important;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 87%;
        margin: auto;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevel,
    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 25px !important;
    }

    /* save the planet  */
    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        bottom: 15px;
        text-align: center;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 150px !important;
        margin-top: 70%;
        font-size: 28px;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 16px !important;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 164px;
        margin-top: 25%;
        margin-right: 8%;
    }

    #shootthestars .abcgame_abcpick_gameResult div {
        font-size: 7px !important;
        margin-bottom: 1px !important;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        width: 87%;
        margin: auto;
    }

    #shootthestars .jumpGameResultDiv .abcgame_nextlevel,
    #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 25px !important;
    }

    .menuTabHeader li button {
        transform: scale(0.9);
        margin: -3.5px 0;
    }

    .landscape #billBoard .boardString {
        font-size: 15px;
        line-height: 18px;
    }

    .My-carousel {
        min-height: 100% !important;
    }

    .vowels-left-column figure h3 {
        font-size: 30px !important;
    }

    .vowels-letter {
        width: 80% !important;
        margin: 0px !important;
    }

    .vowels-letter>.button_bg {
        width: 70% !important;
        height: 5em !important;
        line-height: 0.7;
    }

    .vowels-stars {
        margin-top: 10px !important;
    }

    .vowels-letter>.button_bg>span {
        font-size: 16px !important;
    }

    .vowels-game-event-icons ul {
        justify-content: space-between;
        display: flex;
        height: 100%;
        margin: 0;
    }

    .vowels-stars ul li {
        width: 20px !important;
        height: 20px !important;
    }

    .vowels-game-event-icons ul li {
        max-width: 40px;
        height: 40px;
        max-width: 40px;
        height: 40px;
        margin: 0 !important;
    }

    .landscape .vowels-game-event-icons ul li i,
    .landscape .vowels-game-event-icons ul li i.fa-play,
    .landscape .vowels-game-event-icons ul li i.fa-pause {
        width: 37px !important;
        height: 37px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vowels-img {
        height: 50px !important;
    }

    .vowels-letter-boxes .vowel-letter {
        height: auto !important;
    }

    .vowels-letter-boxes .vowel-letter h3 {
        font-size: 24px !important;
    }

    #wordLadder.vowels-container {
        min-height: 330px !important;
    }

    .vowels-letter-boxes .vowel-letter {
        border-width: 5px !important;
    }

    .orignal_letter {
        padding: 10px !important;
    }

    .orignal_letter .letter_column {
        width: 40% !important;
        height: 100% !important;
    }

    .letter_column span {
        font-size: 20px !important;
    }

    .word-pick {
        height: auto;
    }

    .Contraction-wrap i {
        right: 5px !important;
    }

    .correct-Card i {
        right: 30px;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 50px;
        left: 20px;
        right: 20px;
        padding: 17px 0px;
        margin-bottom: 55px;
    }

    .text-field {
        width: 90%;
        margin: auto auto 40px auto;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    /* flipcard interactivity /phonics/interactivity/level:1/section:24/lesson:lesson2/activity:51 */
    .flipthecard {
        height: auto;
        overflow-y: auto;
    }

    .flipthecard .instruction_text {
        margin-top: 50px;
        font-size: 3vmin !important;
    }

    .flipthecard .flash-card-row {
        width: 90%;
    }

    .flipthecard .flip-divider {
        width: 50%;
        max-width: 50%;
    }

    /* shoot the rocket */
    .landscape #Shoottherocket .alphabetButton {
        max-width: 145px;
        font-size: 12px;
        margin: 15px auto;
    }

    .landscape #Shoottherocket #shoot_game_div canvas {
        margin-top: 0px;
    }

    .landscape #Shoottherocket #shoot_gamescoreviewbox,
    .landscape #Shoottherocket #shoot_gamemissedviewbox {
        height: 35px !important;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0px;
    }

    .landscape #Shoottherocket #balloonContainerGame {
        width: 100%;
        height: 95vh;
    }
}

@media only screen and (min-width: 852px) and (max-width: 877px) {
      

    /* abc sound match css */
    .landscape .abcgame_horizontalbottom .abcgame_sm_drag {
        height: 87%;
    }

    .landscape #smdraghb_0 {
        width: 20.9%;
        left: 0px !important;
    }

    .landscape .abcgame_horizontalbottom {
        right: 10px;
        height: 12.5%;
        width: 80%;
        display: flex;
        align-items: center;
    }

    .landscape #smdraghb_0:before {
        right: 100%;
    }

    .landscape .abcgame_horizontalbottom:after {
        left: -4px;
        width: 96%;
    }

    .landscape .abcgame_vertical.vertical_5 .abcgame_sm_drag {
        max-height: 10.75%;
    }

    .landscape .abcgame_horizontalbottom:before {
        width: 96%;
        left: 0px;
        transform: scale(0.90);
    }

    .landscape .abcgame_smgameplayWrap {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        padding: 5px;
    }

    .landscape .abcgame_vertical.vertical_5 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        height: 98.5%;
        float: none;
        right: 5px;
        border-radius: 7px 7px 0 0;
    }

    .landscape .abcgame_sm_gameRFT {
        width: 14%;
        height: 78%;
        position: relative;
    }

    /* end */
    .landscape .phonics_popup .nav-bar-btn {
        float: left;
        margin-right: 15px;
        cursor: pointer;
        padding: 0px 5px;
        border-radius: 10px;
        transition: 0.5s;
        position: relative;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 20px !important;
    }

    #SightWordBlast .abcgame_abcpick_gameResult {
        padding-top: 45px;
        padding-left: 17px;
        font-size: 1px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 10px !important;
        bottom: 22px;
        text-align: center;
    }

    #SightWordBlast .abcgame_readycount {
        height: 165px;
        margin-top: 65%;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 94%;
        margin: auto;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 175px;
        margin-top: 24%;
        margin-right: 8%;
    }

    #SightWordBlast .abcgame_abcpick_gameResult div {
        font-size: 10px !important;
        margin-bottom: 1px;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn,
    #SightWordBlast .jumpGameResultDiv .abcgame_nextlevel {
        height: 22px !important;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 162px !important;
        margin-top: 68%;
        font-size: 25px !important;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 20px !important;
    }

    #shootthestars .abcgame_abcpick_gameResult {
        padding-top: 45px;
        padding-left: 17px;
        font-size: 1px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 10px !important;
        bottom: 22px;
        text-align: center;
    }

    #shootthestars .abcgame_readycount {
        height: 165px;
        margin-top: 65%;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        width: 94%;
        margin: auto;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 175px;
        margin-top: 24%;
        margin-right: 8%;
    }

    #shootthestars .abcgame_abcpick_gameResult div {
        font-size: 10px !important;
        margin-bottom: 1px;
    }

    #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn,
    #shootthestars .jumpGameResultDiv .abcgame_nextlevel {
        height: 22px !important;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 162px !important;
        margin-top: 68%;
        font-size: 25px !important;
    }

    .modal .modal-dialog {
        margin-left: 25px;
    }

    #interactivity_div .carousalFlipCard .flipcardInteractivity .click-rating {
        margin-bottom: 20px;
    }

    #interactivity_div .carousalFlipCard .flipcardInteractivity .audio-text {
        margin-top: 20px;
    }

    .landscape #strocket-first {
        min-height: 100% !important;
    }

    #wordLadder .vowels-bg {
        padding: 8px 0px !important;
    }

    #wordLadder .vowels-letter-boxes .vowel-letter h3 {
        font-size: 18px !important;
        line-height: 25px !important;
    }

    #wordLadder.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        height: 75% !important;
    }

    #wordLadder .vowels-centered-column .vowels-bg .vowels-img {
        height: 60px !important;
        margin: 10px auto !important;
        width: 90% !important;
    }

    #wordLadder.vowels-container {
        min-height: 380px !important;
    }

    .word-pick {
        height: auto;
    }

    .bgc_game_img {
        position: absolute;
        width: 30%;
        height: 40%;
        right: -8%;
        bottom: 10px;
    }

    .correct-Card i {
        right: 37px;
        top: -10px;
    }

    .sentence-pick-rightside {
        height: 100%;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 55px;
        left: 20px;
        right: 20px;
        padding: 10px 0px;
    }

    .text-field {
        width: 85%;
        margin: auto auto 40px auto;
    }

    .Contraction-wrap i {
        right: 6px !important;
    }

    /* shoot the rocket */
    .landscape #Shoottherocket .alphabetButton {
        max-width: 145px;
        font-size: 12px;
        margin: 15px auto;
    }

    .landscape #Shoottherocket #shoot_game_div canvas {
        margin-top: 0px;
    }

    .landscape #Shoottherocket #shoot_gamescoreviewbox,
    .landscape #Shoottherocket #shoot_gamemissedviewbox {
        height: 35px !important;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0px;
    }
}

@media (max-width: 925px) {
    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 310px;
        height: 200px;
    }

    .landscape #ereader_images .ereader-book {
        width: 95% !important;
    }

    .portrait .interactivity .click-rating,
    .portrait .phonicsEreaderClass .click-rating {
        position: relative;
    }

    .portrait .right_column {
        top: 2px;
        right: 10px;
    }

    .portrait .refresh_content {
        top: 2px;
    }

    .portrait #syllablepick .syllablepick-heading.Syllable_stars {
        display: flex;
    }

    .click-rating .bullets {
        margin: 0 2px;
    }

    .portrait .click-rating .bullets {
        margin: 0 1px;
    }

    .portrait .bookTemplate3 .page .pageDiv .pageSpan span {
        font-size: 3vh;
    }

    .landscape .one-card .main-cards-data .mutated-word .pagespan {
        line-height: 40px;
    }

    /* .portrait .bookTemplate2 .flipbook-viewport .page .pageDiv .pageSpan {
        transform: translate(-50%, -51.3%);
    } */
    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_text p {
        font-size: 16px;
    }

    .landscape .words_rhyiming {
        padding: 5px 0 15px 0;
        height: 100% !important;
        overflow-y: auto;
        display: block;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo {
        margin-top: 30px;
        display: flex;
        flex: 0 0 50%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .landscape .col-landscape {
        width: 50%;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        width: 50%;
        max-height: 180px;
        display: flex;
        min-height: 200px;
        max-width: 280px;
    }

    .landscape .leather-book.BookWood {
        overflow-y: hidden;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 100% !important;
        overflow-y: auto;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box img {
        width: 66% !important;
    }

    .landscape #interactivity_div #dragContainer {
        min-height: 289px;
    }

    .landscape .head-level1 {
        left: -65px !important;
        top: 90px !important;
    }

    .CompanionReaderQuiz .correctFnt,
    .CompanionReaderQuiz .wrongFnt {
        font-size: 26px;
    }
}

@media only screen and (min-width: 878px) and (max-width: 900px) {

    /* for pixel/ iphone 11 and up landscape issue on full screen SL3-9148  */
    .landscape .contentfull #lesson_iframe .ereader_bookimages .click-rating .right_column {
        top: 9px !important;
        right: 7px !important;
        transform: scale(0.75);
    }

    .landscape .contentfull #lesson_iframe .ereader_bookimages .click-rating .refresh_content {
        top: 15px !important;
        transform: scale(0.75);
        right: 38px;
    }

    .landscape .phonicsEreaderClass .right_column:before {
        margin: 0 auto 0 !important;
    }

    /* END */

    /* add css  for iphone x recommended books */
    .landscape #lesson_iframe.Phonics_ereader .content_ereader_modify {
        height: calc(100% - 35px) !important;
    }

    .landscape #ereader_images .ereader-book {
        width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .landscape .ereader_bookimages .ereader_images .flash-card-row .ereader-divider {
        margin: 0px 5px !important;
        padding: 6px ​0 !important;
    }

    .landscape .ebookContainer .content_ereader_modify .instruction_text {
        font-size: 25px !important;
        max-width: 80%;
        margin-bottom: 15px;
    }

    /* end  */
    /* for iphone 11 carousel issue 6300  */
    .landscape #carousel.caraousal_interactive_custom .level0 {
        height: 80%;
    }

    .landscape #carousel.caraousal_interactive_custom .level1 {
        height: 70%;
        left: 53%;
    }

    .landscape #carousel.caraousal_interactive_custom .level2 {
        height: 60%;
        left: 61%;
    }

    .landscape #carousel.caraousal_interactive_custom .level-1 {
        height: 70%;
        left: 47% !important;
    }

    .landscape #carousel.caraousal_interactive_custom .level-2 {
        height: 60%;
        left: 44%;
    }

    /* end */
    .word-pick {
        height: auto;
    }

    .Contraction-wrap i {
        right: 5px !important;
    }

    .correct-Card i {
        right: 40px;
        top: -8px;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 55px;
        left: 20px;
        right: 20px;
        padding: 10px 0px;
    }

    .text-field {
        width: 85%;
        margin: auto auto 40px auto;
    }

    .syllabus-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .syllabus-image img {
        width: 40%;
        height: 95%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .flashcard-turnOver div .instruction_text {
        margin-bottom: 10px !important;
    }

    .flip-divider {
        width: 25%;
        margin: 15px auto;
    }

    .flashcard-turnOver .testcard1_ff {
        font-size: 6vmin !important;
    }
}

@media screen and (min-width: 901px) and (max-width: 991px) {
    .ereader_bookimages .ereader_images .ereader-divider {
        margin: 5px !important;
        width: 48%;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 310px;
        height: 200px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_text p {
        font-size: 16px;
    }

    .landscape .words_rhyiming {
        height: auto;
        margin: 5px auto 15px auto;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo {
        margin-top: 30px;
        display: flex;
        flex: 0 0 50%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .landscape .col-landscape {
        width: 50%;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        width: 50%;
        max-height: 180px;
        display: flex;
        min-height: 200px;
        max-width: 280px;
    }

    .landscape .leather-book.BookWood {
        overflow-y: hidden;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 100% !important;
        overflow-y: auto;
    }

    .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan p {
        font-size: 35px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box img {
        width: 66% !important;
    }

    .word-pick {
        height: auto;
    }

    .Contraction-wrap i {
        right: 5px !important;
    }

    .correct-Card i {
        right: 40px;
        top: -8px;
    }

    .word-pick .row {
        margin-top: 20px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: fixed;
        bottom: 55px;
        left: 20px;
        right: 20px;
        padding: 10px 0px;
    }

    .text-field {
        width: 85%;
        margin: auto auto 40px auto;
    }

    .syllabus-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .syllabus-image img {
        width: 40%;
        height: 95%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1024px) {

    /* added css for Ipad Pro 12.9 (Portrait). Phonics : Blast : Result screen : Play again | Next buttons are not aligned properly SL3-10154 */
    .portrait #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        bottom: 25px !important;
    }

    .portrait #SightWordBlast .abcgame_abcpick_gameResult {
        padding-top: 22% !important;
    }

    /* css added for ipad landscape i icon issue */
    .landscape #flipbook-viewport .click-rating,
    .landscape #carousel .click-rating {
        position: relative;
    }

    .landscape #flipbook-viewport .click-rating .right_column,
    .landscape #carousel .click-rating .right_column {
        top: 0 !important;
    }

    /* end */
    /* ipad landscape Ipad (Portrait/landscape) : Phonics: 3>2>11>1 count the syllables - red/green outline is not coming around the images */
    .landscape #syllablepick .interactivityDiv_syllablepick .syllable_div {
        height: 80% !important;
    }

    /* end */
    /* added css for Phonics : B1: S:1 L3 : Lets play football : UI distorts on Surface (mocked up by dragging window on desktop) */
    .landscape #strocket-first.bowling-game-main-div .abcgame_abcpickrecommendedgame,
    .landscape #abcMatchMainBody .abcgameabcpickContainer .abcgame_abcpickrecommendedgame {
        background-size: cover !important;
    }

    /* end */
    /* for result screens issue SL3-6061 */
    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper,
    .landscape .abcgame_readycount {
        height: 250px !important;
        margin-top: 0 !important;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    .landscape .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
        display: flex;
        align-items: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns {
        top: 190px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns button {
        height: 35px !important;
        margin: 0 !important;
    }

    .landscape .abcgame_abcpick_gameResult div.ng-scope div {
        font-size: 15px !important;
    }

    /* end  */
    .landscape #lesson_ifr .ereader_bookimages .ereader_images .ereader-divider {
        width: 20% !important;
        max-width: 22% !important;
    }

    .landscape .media_library .progress_div .heading_ml {
        width: 70%;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 292px;
        min-height: 266px;
        max-width: 500px;
    }

    /* syllable-pick new  */
    .landscape #syllablepick .right_column:before {
        width: 20px;
        height: 20px;
    }

    .landscape .phonicsMain .ttheader .nav-bar-btn {
        padding: 0 8px;
    }

    #syllablepick_rightsidebar,
    #syllablepick_lefttsidebar {
        width: 100% !important;
    }

    #syllablepick #syllable_contentbox {
        min-width: 500px !important;
    }

    #syllablepick_rightsidebar .circle_couting ul li>div {
        width: 85px;
        height: 85px;
        font-size: 35px;
    }

    #syllablepick_lefttsidebar .curve_text_div {
        height: 95px;
    }

    #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 25px;
    }

    /* end */
    #Shoottherocket #shoot_gamescoreviewbox,
    #Shoottherocket #shoot_gamemissedviewbox,
    #Shoottherocket #shoot_countdownBar {
        font-size: 12px;
        margin: 10px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 41px !important;
    }

    .portrait .interactivity .fisrt-sound-pick-wrapper {
        height: 31vh;
        max-height: none !important;
    }

    .portrait .interactivity.interactivityfullScreen .fisrt-sound-pick-wrapper {
        height: 35vh;
    }

    #Shoottherocket #shoot_gamescoreviewbox,
    #Shoottherocket #shoot_gamemissedviewbox {
        height: 50px !important;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
        letter-spacing: 2px;
    }

    #Shoottherocket .rightSideBar #rhs-canvas {
        width: 120px;
        height: 120px;
    }

    #Shoottherocket #shoot_game_div {
        width: 90%;
        height: 80% !important;
        margin: 0 auto !important;
    }

    /* sight word blast  */
    #SightWordBlast .abcgame_abcpick_resultanim {
        position: relative;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 225px !important;
        margin-top: 93%;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 15px !important;
        right: auto;
        bottom: 25px;
        text-align: center;
        display: flex;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 240px;
        margin-top: 35%;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_resultanim {
        position: relative;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 225px !important;
        margin-top: 93%;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto;
        bottom: 25px;
        text-align: center;
        display: flex;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 240px;
        margin-top: 35%;
    }

    .word-pick {
        height: auto;
    }

    .sentence-pick-rightside {
        height: 370px;
    }

    .word-pick .row {
        margin-top: 70px;
    }

    .word-pick .row:nth-child(2),
    .word-pick .row:nth-child(3) {
        margin-top: 10px;
    }

    .word-pick .row:nth-child(4) {
        margin-top: 35px;
    }

    .correct-Card i {
        right: 10px;
        top: -10px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        bottom: 0;
        width: calc(100% - 50px);
        left: 20px;
        right: 20px;
        position: relative;
    }

    .top-heading {
        margin-top: 85px;
    }

    .gameContainer img {
        width: 100%;
    }

    .landscape .gameContainer canvas#confettiCanvas {
        width: 100%;
    }

    .landscape .abcgame_abcpickoptionaltitle {
        font-size: 12px;
        line-height: 29px;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) and (orientation: landscape) {
    .word-pick {
        height: auto;
    }

    .landscape .billboard-words .demotrumpCard .level2,
    .landscape .billboard-words .demotrumpCard .level2,
    .landscape .billboard-words .demotrumpCard .level2 {
        font-size: 65px !important;
    }

    .CompanionReaderQuiz-wrap {
        width: 85%;
    }

    .CompanionReaderQuiz .QuestionCnt {
        font-size: 24px;
    }

    .CompanionReaderQuiz .controllQuiz button {
        margin: 12px;
    }

    .CompanionReaderQuiz .option-wrap {
        margin-top: 20px;
    }

    /* .landscape .interactivityParentDiv {
        margin: 67px 0 56px 0 !important;
    } */
    .gameBody .letsplaybasketball .leftSideBar .row {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .word-pick .row {
        margin-top: 0px;
    }

    .word-pick .row:nth-child(4) {
        margin-top: 35px;
    }

    .correct-Card i {
        right: 15px;
        top: -8px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        background: #fff;
        width: 100%;
        position: fixed;
        bottom: 70px;
        left: 0;
        right: 0;
        padding: 10px 0px;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .gameContainer img {
        width: 100%;
    }
}



@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    .word-pick {
        height: auto;
    }

    .portrait .interactivity .audio-text,
    .portrait .interactivity #billBoard .audio-text {
        min-height: 150px !important;
    }

    .portrait .flashcardContainr {
        align-content: initial;
    }

    .portrait .interactivity .audio-text .align-middle {
        min-height: 200px;
    }

    .word-pick .row {
        margin-top: 0px;
    }

    .word-pick .row:nth-child(4) {
        margin-top: 35px;
    }

    .correct-Card i {
        right: 15px;
        top: -8px;
    }

    .dragable-image {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .word-pick .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dagable-names {
        width: calc(100% - 50px);
        left: 20px;
        right: 20px;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .Contraction-wrap i {
        right: 5px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {

    /* css for image issue in ipad and ipadpro devices in portrait view */
    .portrait #interactivity_div .flipcardInteractivity .front img {
        height: auto !important;
        margin: 10px 0;
    }

    .portrait .flipcardInteractivity .front>p {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* end */
    /* for ebook  ereader issue on low end devices */
    .portrait #mainBodyContainer #lesson_iframe.Phonics_ereader .content_ereader_modify {
        height: 100% !important;
        width: 100%;
    }

    /* end */
    /*   Fix SL3-10011: Footer in Android overlaping search 
    .content-pagination {
        z-index: 999;
    }
    */
    .portrait .click-soundcard-wrap .flex-20 {
        flex: 1 1 40%;
        max-width: 33%;
    }

    .portrait .pick-the-word.book3-click-flip .flash-card-table .cell-space {
        width: 25vh;
    }

}

@media only screen and (min-width: 1201px) and (max-width: 1365px) {
    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 218px;
        min-height: 210px;
        border-radius: 4px;
        overflow: hidden;
        max-width: 375px;
        text-align: center;
    }

    .dragable-image {
        height: 140px;
    }

    .dagable-names {
        background: #fff;
        width: calc(100% - 50px);
        position: relative;
        bottom: 0;
        left: 20px;
        right: 20px;
        padding: 10px 0px;
    }

    .syllabus-image {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .Contraction-wrap i {
        right: 5px;
    }

    .syllabus-image img {
        width: 60%;
    }

    .syllabus-div .input-div {
        margin-bottom: 15px;
    }

    .Contraction-wrap i {
        right: 5px;
    }

    /* 08-01-2020 */
    .balloonContainerGame #game_div canvas {
        /* height: auto !important;
        width: 65% !important; */
    }
}

@media (min-width: 1601px) {

    /* added css for Book 1/Book3/Book4- All activities->Header gets trimmed at the beginning from 1367 to 1420 desktop size    */
    header .connect-dot-bg {
        width: 400px;
        left: 0;
    }

    /* end */
    .landscape #smdraghb_0:before {
        transform: scale(.88);
        bottom: -76px !important;
        right: 97% !important;
    }

    /*
    body .wordFinder-bluebook .book3-click-flip .testcard1_ff.cardUp .cardfront-text {
        font-size: 3.6vmin !important;
    }
    */
    .MainCardTemplate.leather-book.BookWood {
        overflow-y: hidden;
    }

    .interactivity #flipping_leatherbook .audio-text {
        padding-bottom: 10px;
    }

    .flipcardInteractivity,
    .interactivityDiv,
    div#play_interactivity_pw {
        align-content: space-between;
    }

    .interactivity div#fisrt-sound-pick .fisrt-sound-pick-wrapper .flip-divider {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ancient-scroll-wrapper {
        max-width: 90% !important;
    }

    .Drone-template.ancient-template .ancient-scroll-wrapper .arrow.arrow-left {
        left: -25px !important;
    }

    .Drone-template.ancient-template .ancient-scroll-wrapper .arrow.arrow-right {
        right: -25px !important;
    }

    /* Added css for Phonics : 6>1>13>1/ 6>1>14>1 : Ancient Scroll/ Words to Know : Seems like on the Apple 27 inch Thunderbolt display (2550 x 1440) it is not expanding enough */

    /* for Words to know  */
    .flipbook-viewport .container-flip {
        width: 90% !important;
    }

    /* for ancient scroll  */

    /* end */
    .interactivity #flipping_leatherbook .bookTemplate4 .audio-text .align-middle {
    width: 100%;
    height: auto !important;
}

}

@media (max-width: 1600px) {

    .flipcardInteractivity,
    .interactivityDiv,
    .flashcardContainr,
    #play_interactivity_pw {
        align-content: space-between;
    }

    .CulminatingPick .culminatingWrdImg {
        height: 320px;
    }
        
}


/* changed value for bigger screen upto 2100*/

@media (min-width: 1601px) and (max-width: 2100px) {

    /* changed  for issue Phonics : Lets play football : game should not jump on clicking play button  */
    #letsplayfootball .contentBox .lgfballoom_image_pg1 {
        background-size: cover !important;
    }

    /* end  */
    .landscape .abcgame_horizontalbottom:before {
        width: 90%;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 175%;
    }

    div#wsb_readycount img {
        /* object-fit: contain; */
        height: 220px;
    }
}

@media screen and (min-width: 1367px) and (max-width: 1595px) and (max-height: 650px) {
    .dragable-image {
        height: 142px;
    }

    #shootthestars .leftSideBar img {
        max-width: 50%;
    }

    #wordLadder .vowel-bg {
        padding: 10px 0px;
    }

    #wordLadder .tick-class {
        top: -14%;
        right: -8%;
    }

    #wordLadder .orignal_letter {
        padding-top: 25px !important;
    }

    #wordLadder .vowels-container .vowels-centerlized-wrapper {
        height: auto !important;
    }

    #wordLadder .vowels-centered-column {
        height: 100% !important;
    }

    #wordLadder .vowels-img {
        height: 115px !important;
        margin: 7px auto !important;
        width: 80%;
    }

    #wordLadder .vowels-letter-boxes {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    #wordLadder .vowels-letter-boxes .vowel-letter {
        width: 100% !important;
        height: 15% !important;
        margin: 0 !important;
    }

    #wordLadder .orignal_letter {
        padding-top: 25px !important;
    }

    #wordLadder .letter_column {
        margin-bottom: 10px !important;
        height: 30px !important;
    }

    #wordLadder .letter_column span {
        font-size: 25px !important;
        line-height: 20px !important;
    }

    #wordLadder .vowels-letter-boxes .vowel-letter h3 {
        font-size: 25px !important;
        padding: 8px 0px !important;
    }

    .dagable-names {
        background: #fff;
        width: 100%;
        position: relative;
        bottom: 20px;
        left: 0;
        right: 0;
        padding: 10px 0px;
    }

}


/* flash-card-pick-turn-Over */

.flashcard-turnOver,
#interactivity_div .flashcardId {
    padding-top: 0 !important;
    height: 100%;
    overflow-y: auto;
}

.flashcard-turnOver .flash-card-table {
    height: auto;
}

.clicksoundinteractivity .wordbeginingsound {
    height: calc(100% - 88px);
}

.clicksoundinteractivity .wordbeginingsound .trumpCard_red {
    position: static;
}

.clicksoundinteractivity .wordbeginingsound .trumpCard_red img {
    height: 100%;
    object-fit: contain;
}

.flashcard-turnOver div .instruction_text,
.interactivity .instruction_text {
    margin: 0px auto;
}

.interactivity .right_column:before,
.phonicsEreaderClass .right_column:before {
    position: absolute;
    content: '';
    width: 26px;
    height: 26px;
    background-color: #fff;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
}

.interactivity #syllablepick .right_column:before {
    display: none;
}

.flashcard-turnOver .flash-card-table,
.interactivity .flash-card-table {
    width: 100%;
    position: relative;
}

.interactivity .pickthewordinteractivity {
    flex-wrap: wrap;
}

.flashcard-turnOver .book3-click-flip .click-flip-next {
    top: 50%;
    right: 20px;
    transform: translateY(-0%);
    -webkit-transform: translateY(-0%);
    -moz-transform: translateY(-0%);
    -ms-transform: translateY(-0%);
    -o-transform: translateY(-0%);
    z-index: 99;
}

.interactivity .audio-text {
    padding: 5px 0px;
    margin: 0;
    min-height: 0;
    font-size: 1.35vw;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.interactivity .carousel-parent .carousel-text {
    min-height: 18%;
    margin-top: 15px;
}

.carousel-parent .text-top {
    font-weight: bold;
    font-size: 4vw;
    margin-bottom: 5px;
    /*Reduced Font size to resolve big words display issue. (SL3-9494) */
    /* to make right word font consistent */
}

.interactivity #consonant_pick .audio-text span.repeat-icon {
    padding: 7px 19px;
    background-color: #4a9a43;
    margin: 0 10px;
}

#carousel .carousel-parent .carousel-text .align-middle {
    height: 100%;
}

div#finished_interactivity {
    text-align: center;
    background-color: black;
}

#billBoard #finished_interactivity {
    z-index: 99;
}

.interactivity .audio-text .align-middle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.interactivity .align-middle {
    position: relative;
}

.interactivity .align-middle .sentenceSpan {
    max-width: 61%;
    display: inline-block;
}

.right-btns-grp {
    position: absolute;
    right: 18px;
}

.interactivity .audio-text .slow_sound {
    position: relative;
}

.flashcard-turnOver .cardUp {
    overflow: hidden;
}

div#consonant_pick.flashcardId .interactivityDiv .cardUp img {
    border-radius: 0;
}

.interactivity .flashcard-turnOver .flip-divider,
.interactivity .flip-divider {
    width: 20%;
    padding: 0 20px;
    max-width: 20%;
    height: 50vh;
    max-height: 550px;
    margin: 0;
}


/*SL3-4202, added extra class for 6 cards width...*/

.interactivity .sixCards.flip-divider {
    width: 16%;
    max-width: 16%;
}

.interactivity div#fisrt-sound-pick .fisrt-sound-pick-wrapper .flip-divider {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.interactivity .fisrt-sound-pick-wrapper {
    width: 20%;
    padding: 0 20px;
    max-width: 20%;
    float: left;
}

.interactivity .flashcard-turnOver .flash-card-table .flash-card-row {
    position: relative;
    flex-wrap: wrap;
}

.interactivity .flashcard-turnOver.mainFlashcard_flip .flash-card-table .cell-space,
.interactivity .mainFlashcard_flip .flash-card-table .cell-space {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

#interactivity_div .mainFlashcard_flip #fisrt-sound-pick .flash-card-table .cell-space:focus {
    outline: none;
}

div#fisrt-sound-pick {
    min-height: 420px;
}

.interactivity .cell-space .fa-check {
    visibility: visible;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
}

.landscape .interactivity .book3-click-flip .testcard1_ff {
    font-size: 7.5vmin;
}

.interactivity div#consonant_pick .book3-click-flip .testcard1_ff {
    background-color: #fff;
}

.interactivity .mainFlashcard_flip .flash-card-table {
    height: auto;
}

button.active.md-button.md-ink-ripple.activeLesson {
    right: 0;
    border-radius: 0;
    box-shadow: 0px 11px 12px -4px rgb(0 0 0 / 57%);
    /* background: #193463!important; */
    z-index: 99;
    overflow: visible;
}

.header .h-left div div ul li {
    list-style-type: none;
}

/* click the card css */

.main-flip .cardUp {
    font-family: Poppins;
    font-weight: bold;
    outline: 0;
    border: 10px solid #23408e;
    border-radius: 20px;
    z-index: 99;
}

.interactivityClickTheCard .click-rating {
    margin-bottom: 30px;
    margin-top: 40px;
}

.interactivityClickTheCard .main-flip {
    padding: 0px 25px;
    margin-bottom: 10px;
}

.interactivityClickTheCard .main-flip .cell-space {
    position: relative;
    width: 100%;
    height: 30vh;
    max-height: 151.51vw;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0;
    box-shadow: -2px 2px 15px -3px #000;
}

.interactivityClickTheCard .main-flip .cell-space .inner-content-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.interactivityClickTheCard .main-flip .cell-space .inner-content-image img {
    object-fit: cover;
    width: 80%;
    height: 100%;
    display: flex;
}

.interactivityClickTheCard .main-flip .cell-space .cardfront-text {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
    font-size: 9vmin;
}

.interactivityClickTheCard .arrow:before {
    display: none;
}

/* flipcard carousel css */

.carousalFlipCard .main-flip .cardUp {
    font-family: Poppins;
    font-weight: bold;
    outline: 0;
    border: 10px solid #23408e;
    border-radius: 20px;
    z-index: 99;
    overflow: hidden;
}

.carousalFlipCard .main-flip {
    padding: 0px 10px;
    overflow: hidden;
    padding-top: 0px;
}

.carousalFlipCard .main-flip .cell-space {
    position: relative;
    width: 100%;
    height: 50vh;
    max-height: 151.51vw;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0;
}

.carousalFlipCard .main-flip .cell-space .inner-content-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.carousalFlipCard .main-flip .cell-space .inner-content-image img {
    object-fit: cover;
    width: 80%;
    height: 100%;
    display: flex;
}

.carousalFlipCard .main-flip .cell-space .cardfront-text {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #fff;
}

.carousalFlipCard .main-flip .cell-space .cardfront-text span {
    font-size: 6vw !important;
}

#words_rhyiming .image_box img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box img {
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

.carousalFlipCard .arrow:before {
    display: none;
}

.nav-background {
    background-color: #b0b4e2;
}

#calenderFlipCardMainDiv .ancient-scroll-wrapper.ancientscrollCarousel .arrow.arrow-left {
    z-index: 9;
}

.container.calendar-row {
    position: relative;
}

.book-clips {
    position: relative;
}

.book-clips:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    top: -40px;
    background-image: url(../../../../public/images/books-rings.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#calenderFlipCardMainDiv .cell-space.cardUp.width-85 {
    width: 100%;
}

#calenderFlipCardMainDiv .width-100 {
    width: 80%;
}

.main-flip.upsideDownFlip:nth-child(2) .scene.flipallcard {
    width: 80%;
}


/* 14-november-2019 flipcard id css */

.instruction_text {
    /* margin: 10px auto 20px; */
}


/* 02-december-2019 css added  */


/* SyllablePick  Page */

.SyllablePick {
    width: 100%;
    overflow-y: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0%;
}

.SyllablePick .row {
    display: flex;
    width: 100%;
    flex-direction: row;
    height: auto;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}

.SyllablePick .syllablepick-heading {
    margin-bottom: 30px;
}

.SyllablePick .flex-columns {
    display: flex;
    width: 20%;
    padding: 0 15px;
    flex-direction: column;
}

.SyllablePick .flex-columns .syllablediv {
    height: 100%;
    width: 100%;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

.SyllablePick .flex-columns .syllablediv .syllableimage {
    display: flex;
    height: 180px;
    width: 100%;
    overflow: hidden;
}

.SyllablePick .flex-columns .syllablediv .syllableimage img {
    object-fit: contain;
    width: 64%;
    height: auto;
    margin: auto;
}

.SyllablePick .flex-columns .syllablediv .syllable-catname {
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.SyllablePick .flex-columns .syllablediv .syllable-catname span {
    font-size: 4vmin;
}

.SyllablePick .flexible-listing {
    padding: 0px;
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0px;
}

.SyllablePick .flexible-listing li {
    padding: 0px 20px;
    list-style-type: none;
    display: flex;
    width: auto;
    border: 2px solid #444;
    margin: 0 5px;
    font-size: 5vmin;
    cursor: pointer;
}

.disableIcon {
    opacity: 0.4 !important;
}

.content-pagination li.pager-control md-icon.replay {
    background: #ffcc00 url(../images/replay_black.png) right center no-repeat;
}

.flipcardInteractivity,
.interactivityDiv,
#play_interactivity_pw {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#calenderFlipCardMainDiv .flipcardInteractivity {
    min-height: 420px;
}

.interactivity #interactivity_div .preroll-img,
.interactivity .syllabus-image,
.interactivity .syllabus-div .input-div,
.interactivity .syllablediv {
    background-color: #fff;
}

#interactivity_div .mainFlashcard_flip #fisrt-sound-pick .flash-card-table .cell-space img {
    background-color: transparent;
}

.consonanat_pick .fc-imgwrap img {
    background-color: #fff;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0 0 15px 15px;
}

.CulminatingPick .culminatingWrdImg {
    background-color: #fff;
    padding: 0px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0px !important;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid #e6e4e4;
    cursor: pointer;
    height: 402px;
}

.CulminatingPick .dagable-names ul {
    margin: 0;
    padding-left: 0px;
    background-color: transparent;
    box-shadow: none;
}

.CulminatingPick .dagable-names ul li {
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 7px 19px;
    background-color: #4a9a43;
    margin: 0 10px;
    font-size: 26px;
    cursor: pointer;
    display: block;
    border: 2px solid;
    border-radius: 5px;
    line-height: 27px;
}

#finished_interactivity .preroll-img {
    background-color: transparent !important;
}

#finished_interactivity {
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.CulminatingPick .dagable-names {
    background-color: transparent;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: static;
}

@media (max-width: 1366px) {
    /* ADDED css for fun activity issue on small and large screens portrait and landscape mode 12407  */

    .portrait .left-icon,
    .landscape .left-icon {
        z-index: 10;
        height: 40px;
        width: 40px;
        position: relative;
        right: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portrait .left-icon .fa-arrow-alt-circle-left,
    .landscape .left-icon .fa-arrow-alt-circle-left {
        margin: 0px !important;
    }

    .portrait .funIcon,
    .landscape .funIcon {
        right: 50px;
        margin: 0 auto !important;
        width: 50px !important;
    }

    /* END */

    header .connect-dot-bg {
        width: 210px !important;
        left: 0;
    }

    header .titleWood {
        padding: 0 15px;
    }

    /* Zero to remove scroll */
    .MainCardTemplate.leather-book.BookWood {
        min-height: 420px;
        overflow-y: visible;
    }

    .gameContainer .abcgame_abcpickoptionalgamewrap {
        height: calc(36% - 47px);
    }

    .landscape .gameParentDiv,
    .landscape .interactivityParentDiv,
    .landscape .ebookParentDiv {
        /* margin: 78px 0 69px 0; */
    }

    .landscape .interactivityfullScreen .CompanionReaderQuiz:before,
    .landscape .interactivityfullScreen .CompanionReaderQuiz:after {
        height: 26%;
    }

    .landscape .interactivityfullScreen .CompanionReaderQuiz:after {
        background-position: bottom;
    }
}


/*Css for fix issue while minimize the screen without selecting responsive mode*/

@media (max-width: 1200px) {
    .CompanionReaderQuiz .options {
        color: #fff;
    }

    .inner-flex {
        width: 90% !important;
    }

    .carousel-parent.layout-fill {
        min-height: 90%;
        height: 90%;
    }

    .portrait #billBoard.bill-board-light {
        background-position-y: 40%;
    }

    .landscape .course-view button {
        padding: 7px 19px 7px 10px;
        display: flex;
    }

    .instruction-wrap {
        width: 53%;
    }

    .portrait #billBoard.bill-board-light .twoflash-cont .sq-animate2:after {
        right: -30px;
        width: 200px;
        height: 200px;
        top: -187px;
    }

    /* SL3-4620: billboard screen change -- sentence for champ word needs to be spaced from the billboard */
    .portrait .interactivity #billBoard .audio-text .align-middle {
        align-items: center;
    }

    .portrait .interactivity #billBoard.bill-board-light .audio-text .align-middle {
        align-items: center;
    }

    .portrait #billBoard.bill-board-light .flash-card-sq3 .demotrumpCard .level2,
    .portrait #billBoard.bill-board-light .flash-card-sq4 .demotrumpCard .level2,
    .portrait #billBoard.bill-board-light .flash-card-sq5 .demotrumpCard .level2 {
        width: 100%;
    }

    .portrait #billBoard.bill-board-light .imgStroke {
        width: auto !important;
    }

    .portrait #billBoard.bill-board-light .board-effect {
        width: 85%;
    }

    div#calenderFlipCardMainDiv .container.calendar-row {
        width: 100%;
    }

    .landscape .carousalFlipCard .container.calendar-row .row {
        width: 90%;
    }

    .Quiz-inner-wrapper {
        margin-top: 40px;
    }

    .carousalFlipCard .container.calendar-row .upsideDownFlip,
    .carousalFlipCard .container.calendar-row .row,
    .carousalFlipCard .container.calendar-row .noCalendarFlip {
        max-height: 400px;
    }

    .one-card .main-flip.upsideDownFlip .scene {
        width: 95% !important;
    }

    .landscape #calenderFlipCardMainDiv .mutated-word {
        font-size: 9vmin;
    }

    .portrait .interactivity .flip-divider,
    .portrait .interactivity .fisrt-sound-pick-wrapper {
        width: 33.33%;
        max-width: 33.33%;
        max-height: 370px;
        margin: 20px 0;
    }

    .portrait .interactivity .flip-divider {
        margin: 20px 15px;
    }

    .portrait #flipcardBehindDoor .flip-divider{
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .portrait .interactivity.interactivityfullScreen .flip-divider {
        max-height: 430px;
    }

    .portrait .interactivity .book3-click-flip .testcard1_ff {
        font-size: 6vmin;
    }

    .portrait .interactivity .flashcard-turnOver .flash-card-row,
    .portrait .interactivity .flash-card-row {
        width: 90%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .landscape .interactivity .flashcard-turnOver .flip-divider,
    .landscape .interactivity .flip-divider {
        height: 49vh;
        max-height: 306px;
    }

    .portrait #fisrt-sound-pick {
        overflow: hidden;
    }

    .portrait .CompanionReaderQuiz:before {
        background-position: top;
    }

    .portrait .CompanionReaderQuiz:after {
        background-position: bottom;
    }

    .portrait .CompanionReaderQuiz-wrap {
        width: 90%;
    }

    .portrait .CompanionReaderQuiz .controllQuiz button {
        margin: 50px 27px;
    }

    .portrait .click-rating .bullets {
        font-size: 1.7vmin;
    }

    .portrait .right_column {
        top: 0px;
    }

    .logo a:nth-child(2) img {
        max-width: 189px;
    }
.wordFinder-bluebook .cell-space .cardfront-text {
               margin-left: 28px;
           }
           #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word p {
            /* position: absolute; */
            font-size: clamp(24px, 5vw, 42px);
    
        }
    
        #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
            position: relative;
            min-height: 85px;
        }
}

@media (max-width: 1366px) {
    .isMobilePortrait .menuItem>a>button {
        height: 100%;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button[class] i.fa-check-circle {
        filter: none !important;
        right: 3px !important;
    }

    .portrait .phonicsMain #noanim-tab-example a span.activity_names {
        margin-left: 40px !important;
    }

    .isMobilePortrait .course-lesson-no {
        float: left;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #193463;
        font-size: 15px;
        font-weight: normal;
        margin-right: 10px;
        position: relative;
    }

    .isMobilePortrait .course-lesson-no:after {
        content: " ";
        background: #193463;
        height: 100%;
        width: 1px;
        right: -3px;
        position: absolute;
    }

    .isMobilePortrait a span.activity_number {
        position: absolute;
        margin-left: 0 !important;
    }


    .modal .modal-dialog .accordion__body .accordion .accordion__item .accordion__title>.activity_names {
        margin-left: 40px;
    }

    .isMobilePortrait .menuItem>a>button .course-lesson-no {
        margin-left: 0 !important;
        position: absolute;
        left: 10px;
    }

    .isMobilePortrait ul.menuList li.menuItem a button i {
        margin-left: 0 !important;
        position: absolute !important;
        right: 30px !important;
    }

    .isMobilePortrait ul.menuList li.menuItem a {
        height: 35px;
        display: flex;
        align-items: center;
    }

    .isMobilePortrait ul.menuList li.menuItem a button i.fa-check-circle {
        margin-left: 0 !important;
        position: absolute !important;
        right: 3px !important;
        filter: none !important;
    }

    .isMobilePortrait a i {
        width: 30px;
        margin-bottom: 0px;
        height: 30px;
        padding: 0px;
        min-width: auto;
        min-height: auto;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        border: none !important;
        line-height: 29px;
    }


    html.landscape.iphoneLandscape #lesson_ifr.game {
        padding: 0 !important;
    }

    #SightWordBlast .abcgame_abcpick_gameResult {
        padding-left: 14%;
        display: block;
        padding-top: 24%;
    }

    #JumpGame .abcgame_abcpick_gameResult {
        padding-left: 14%;
        display: block;
        padding-top: 24%;
    }

    .portrait .culminating_div {
        margin-bottom: 20px;
    }

    div#calenderFlipCardMainDiv .main-flip {
        padding: 0 10px;
    }

    .vowels-letter-boxes .vowel-letter h3 {
        font-size: 25px;
    }

    .portrait #flipping_leatherbook .bookTemplate {
        height: 50%;
    }

    .portrait #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .portrait #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 30vh !important;
        min-height: 117px;
    }

    .portrait #calenderFlipCardMainDiv .three-cards-wrapper .upsideDownFlip .scene {
        height: 14vh !important;
    }

    .portrait .interactivityfullScreen #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .portrait .interactivityfullScreen #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 40vh !important;
    }

    .portrait #calenderFlipCardMainDiv .main-flip .cell-space .cardfront-text span {
        font-size: 7vw !important;
    }

    .portrait #calenderFlipCardMainDiv h1 {
        font-size: 4.5vmin;
    }

    .portrait .carousalFlipCard .container.calendar-row .row {
        width: 90%;
    }

    .portrait .interactivity .audio-text .align-middle {
        height: auto !important;
    }

    /* When sentence has only single line then tortoise and sound icons are shown outside the sentence white area. */
    .portrait .interactivity .ancient-template .audio-text .align-middle {
        min-height: 100px !important;
    }

    .portrait #interactivity_div .ancient-scroll-wrapper {
        height: calc(100% - 340px);
        margin: 0 auto;
    }

    .logo a:nth-child(2) img {
        max-width: 158px;
    }
}

@media (max-width: 1230px) {
    .leather-book .turn-page-wrapper {
        padding-top: 0px;
        overflow: hidden !important;
    }
}


/* 
@media (max-height: 715px) {
    .CompanionReaderQuiz {
        height: auto;
    }
} */

@media only screen and (max-width: 500px) {
    .carousalFlipCard .click-rating {
        margin-top: 65px;
    }

    .carousalFlipCard {
        padding: 0;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .audio-text {
        margin-top: 25px;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 80%;
        height: 40vh;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 65px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 30px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 75%;
        height: 35vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 5vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 30px !important;
    }

    .leather-book .turn-page-wrapper {
        padding-top: 0px !important;
    }

    .portrait .leather-book-page .page img.img_text {
        margin-top: 0% !important;
    }

    .preroll-img {
        max-height: 40vh !important;
        margin-top: 60px !important;
    }

    #flipping_leatherbook .preroll-img {
        margin-top: 0 !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
        overflow: auto;
    }

    .flipthecard {
        height: auto;
        overflow-y: auto;
    }

    .flipthecard .instruction_text {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 725px) and (max-width:735px) and (orientation: landscape) {
    .landscape .phonicsMain .abcgame_vertical.vertical_4 {
        left: -2px !important;
    }
}

@media only screen and (min-width: 501px) and (max-width: 667px) and (orientation: landscape) {
    .landscape .head-level1 {
        left: -66px !important;
    }

    .landscape .phonicsMain .abcgame_vertical.vertical_4 {
        left: -2px !important;
    }

    .landscape #billBoard .boardString {
        font-size: 13px;
        line-height: 18px;
        max-width: 74% !important;
    }

    #shootthestars .button-book {
        width: 100%;
        min-width: 100px;
    }

    #shootthestars .controlButtons li {
        width: 30px;
        height: 30px;
    }

    #shootthestars .restartIncompleteAnim {
        right: 0;
    }

    .culminating_div .correct-Card i {
        right: 90px;
        top: 38px;
    }

    .landscape #strocket-first {
        min-height: 100% !important;
    }

    .landscape .menuTabHeader li button {
        margin-left: 10px !important;
    }

    #flipping_leatherbook {
        overflow-y: auto;
        min-height: 100% !important;
    }

    #flipping_leatherbook .home-cursor {
        margin-top: 0 !important;
        height: 100% !important;
    }

    .mainFlashcard_flip .click-rating {
        /* margin-top: 55px; */
    }

    .mainFlashcard_flip .flash-card-table {
        height: auto;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 28vh;
    }

    .book3-click-flip .click-flip-next {
        top: 30%;
        right: 20px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 85px;
    }

    .carousalFlipCard {
        padding: 0;
    }

    /* 
    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 80%;
        height: 80vh;
    } */
    .interactivityClickTheCard .click-rating {
        margin-top: 85px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 30px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 55%;
        height: 65vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 5vmin;
    }

    .flashcard-turnOver {
        display: flex;
        justify-content: center;
        height: auto;
    }

    .flashcardTurnOverTemp {
        height: inherit !important;
    }

    .flashcard-turnOver .click-flip-next {
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

    .preroll-img {
        max-height: 50vh !important;
        margin-top: 7px !important;
    }

    .leather-book .home-cursor {
        margin-top: 75px !important;
    }

    /* .flipbook-viewport {
        transform: scale(0.6);
        margin-top: 25px;
    } */
    .portrait .leather-book-page .page img.img_text {
        margin-top: 0% !important;
    }

    .leather-book .turn-page-wrapper {
        padding-top: 0px !important;
    }

    header .h-left {
        padding-left: 20px !important;
    }

    .flipthecard {
        height: auto;
        overflow-y: auto;
    }

    .flipthecard .instruction_text {
        margin-top: 50px;
    }

    .flipthecard .flip-divider {
        width: 50%;
    }

    .vowels-left-column figure h3 {
        font-size: 24px !important;
    }

    .vowels-letter {
        width: 80% !important;
        margin: 0px !important;
    }

    .vowels-letter>.button_bg {
        width: 100% !important;
        height: 5em !important;
        line-height: 0.7;
    }

    .vowels-stars {
        margin-top: 10px !important;
    }

    .vowels-letter>.button_bg>span {
        font-size: 16px !important;
    }

    .vowels-game-event-icons ul {
        justify-content: space-between;
        display: flex;
        height: 100%;
        margin: 0;
    }

    .vowels-stars ul li {
        width: 20px !important;
        height: 20px !important;
    }

    .vowels-game-event-icons ul li {
        max-width: 40px;
        height: 40px;
        max-width: 40px;
        height: 40px;
        margin: 0 !important;
    }

    .vowels-game-event-icons ul li i,
    .vowels-game-event-icons ul li i.fa-play,
    .vowels-game-event-icons ul li i.fa-pause,
    .vowels-game-event-icons ul li i.fa-play,
    .vowels-game-event-icons ul li i.fa-pause {
        width: 37px !important;
        height: 37px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vowels-letter-boxes .vowel-letter {
        height: auto !important;
    }

    .vowels-letter-boxes .vowel-letter h3 {
        font-size: 24px !important;
    }

    #wordLadder .tick-class {
        font-size: 15px;
        width: 20px;
        height: 20px;
        top: -20% !important;
        right: -14% !important;
    }

    .vowels-letter-boxes .vowel-letter {
        border-width: 5px !important;
    }

    .orignal_letter {
        padding: 10px !important;
    }

    .orignal_letter .letter_column {
        width: 40% !important;
        height: 100% !important;
    }

    .letter_column span {
        font-size: 20px !important;
    }
}

@media only screen and (min-width: 501px) and (max-width: 667px) {
    .landscape header .letters-text-wrap {
        right: 62%;
    }

    .landscape .Phonics_ereader .ereader_range {
        width: 58% !important;
    }

    #wordLadder.vowels-container {
        min-height: 300px !important;
    }

    #wordLadder .heading h3 {
        font-size: 20px !important;
    }

    #wordLadder .rightSideBar .row.clock {
        display: block !important;
        width: 100% !important;
    }

    #click_sound_interactivity .corrCard i,
    #click_sound_interactivity .wrongCard i {
        right: 20px;
        top: 0px;
    }

    .mainFlashcard_flip .click-rating {
        /* margin-top: 63px; */
    }

    .instruction_text {
        font-size: 14px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: auto;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 24vh;
    }

    .pickthewordinteractivity.flash-card-row.layout-align-center-center.layout-row .cell-space {
        width: 30vh;
        height: 25vh;
    }

    .book3-click-flip .click-flip-next {
        top: 30%;
        right: 20px;
    }

    /* .carousalFlipCard .click-rating {
        margin-top: 85px;
    }

    .carousalFlipCard {
        padding: 0;
    }
 */

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .audio-text {
        margin-top: 20px;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 80%;
        height: 80vh;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 85px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 30px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 55%;
        height: 65vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 5vmin;
    }

    /* this css for hide the scroller on devices 11-02-2020 */
    .flashcard-turnOver {
        display: flex;
        justify-content: center;
        height: auto;
        padding-top: 0%;
    }

    .interactivityfullScreen .flashcard-turnOver {
        height: 100%;
    }

    .flashcard-turnOver .flashcardContainr .flash-card-table {
        margin-top: 0px !important;
    }

    .flashcard-turnOver .flash-card-table {
        height: auto !important;
    }

    .flashcard-turnOver .click-flip-next {
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }

    .preroll-img {
        max-height: 50vh !important;
        margin-top: 7px !important;
    }

    .leather-book .home-cursor {
        margin-top: 75px !important;
    }

    /* .flipbook-viewport {
        transform: scale(0.6);
        margin-top: 25px;
    } */
    .portrait .leather-book-page .page img.img_text {
        margin-top: 0% !important;
    }

    .leather-book .turn-page-wrapper {
        padding-top: 0px !important;
    }

    header .h-left {
        padding-left: 20px !important;
    }

    .landscape #phonicsHeader .h-left {
        padding-left: 0 !important;
    }

    .landscape #phonicsHeader .h-left {
        padding-left: 0 !important;
    }

    .flipthecard {
        height: auto;
        overflow-y: auto;
    }

    .flipthecard .instruction_text {
        margin-top: 50px;
    }

    .flipthecard .flip-divider {
        width: 50%;
    }
}

@media only screen and (min-width: 721px) and (max-width: 750px) and (orientation: landscape) {
    #flipping_leatherbook {
        min-height: 100% !important;
        overflow-y: auto !important;
    }
}

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

    /* abc sound match css */
    .landscape .abcgame_horizontalbottom .abcgame_sm_drag {
        height: 94%;
    }

    .landscape .abcgame_vertical.vertical_5 .abcgame_sm_drag {
        max-height: 10.3% !important;
    }

    .landscape .abcgame_vertical.vertical_5 .abcgame_sm_drag {
        max-height: 10.5% !important;
    }

    .landscape #smdraghb_0 {
        width: 20.9%;
        left: 0px !important;
    }

    .landscape .abcgame_horizontalbottom {
        right: 10px;
        height: 12.5%;
        width: 77.5%;
        display: flex;
        align-items: center;
    }

    .landscape #smdraghb_0:before {
        right: 100%;
        transform: scale(0.97);
    }

    .landscape .abcgame_horizontalbottom:after {
        left: -1px;
        width: 98%;
    }

    .landscape .abcgame_horizontalbottom:before {
        width: 100%;
        left: 0px;
        transform: scale(0.95);
    }

    .landscape .abcgame_smgameplayWrap {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        padding: 5px;
    }

    .landscape .abcgame_vertical.vertical_5 {
        width: 77%;
        margin-left: auto;
        margin-right: auto;
        height: 99%;
        float: none;
        right: 5px;
        border-radius: 7px 7px 0 0;
    }

    .landscape .abcgame_sm_gameRFT {
        width: 14%;
        height: 78%;
        position: relative;
    }

    /* end */
    .landscape .billboard-screen-change #billBoard .slow_sound,
    .landscape .billboard-screen-change #billBoard .slow_sound i.icon-turtle-slow,
    .landscape .billboard-screen-change #billBoard i.icon-volume {
        width: 31px;
        height: 31px;
    }

    .landscape #billBoard .boardString {
        font-size: 15px;
        line-height: 18px;
    }

    .mainFlashcard_flip .click-rating {
        margin-top: 60px;
    }

    #click_sound_interactivity .corrCard i,
    #click_sound_interactivity .wrongCard i {
        right: 0px;
        top: 0px;
    }

    .mainFlashcard_flip .pickthewordinteractivity.flash-card-row.layout-align-center-center.layout-row .testcard1_ff {
        font-size: 6vmin !important;
    }

    #calenderFlipCardMainDiv .instruction_text {
        margin-top: 100px;
    }

    .instruction_text {
        font-size: 18px !important;
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: auto;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .flip-divider {
        width: 50%;
    }

    .flashcard-turnOver .flash-card-table .flash-card-row .flip-divider {
        max-width: 20% !important;
        margin: 0 !important;
    }

    .portrait .flashcard-turnOver .flash-card-table .flash-card-row .flip-divider {
        max-width: 50% !important;
        margin: 20px 15px !important;
    }

    .flashcard-turnOver .audio-text {
        margin: 0 !important;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 28vh !important;
    }

    .book3-click-flip .click-flip-next {
        top: 10%;
        right: 20px !important;
    }

    .carousalFlipCard .click-rating {
        margin-top: 65px;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .audio-text {
        margin-top: 27px;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 70%;
        height: 50vh;
    }

    #calenderFlipCardMainDiv .main-flip .cell-space {
        width: 100%;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 65px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 65%;
        height: 50vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 7vmin;
    }

    .flashcard-turnOver .flashcardContainr .flash-card-table.book3-click-flip.layout-align-center-center.layout-column {
        height: auto !important;
        margin: 0 !important;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 25px !important;
        top: 50%;
    }

    .leather-book .bookTemplate {
        max-width: 100% !important;
    }

    /* .flipbook-viewport {
        transform: scale(0.7);
    } */
    .portrait .leather-book-page .page img.img_text {
        margin-top: 0% !important;
    }

    .leather-book .turn-page-wrapper {
        padding-top: 0px !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }

    /* shoot the rocket */
    .landscape #Shoottherocket .alphabetButton {
        max-width: 145px;
        font-size: 12px;
        margin: 15px auto;
    }

    .landscape #Shoottherocket #shoot_game_div canvas {
        margin-top: 0px;
    }

    .landscape #Shoottherocket #shoot_gamescoreviewbox,
    .landscape #Shoottherocket #shoot_gamemissedviewbox {
        height: 35px !important;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0px;
    }

    .landscape #Shoottherocket #balloonContainerGame {
        width: 100%;
        height: 95%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 800px) {

    /* for result screens issue SL3-6061 */
    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper,
    .portrait .abcgame_readycount {
        height: 290px !important;
        /* margin-top: 0 !important; */
    }

    .portrait .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    .portrait .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
        display: flex;
        align-items: center;
    }

    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns {
        top: 218px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns button {
        height: 45px !important;
        margin: 0 !important;
    }

    .portrait .abcgame_abcpick_gameResult div {
        font-size: 15px !important;
    }

    /* end  */
    #shootthestars .restartIncompleteAnim {
        left: 0;
        right: 0;
        margin: auto;
        font-size: 20px !important;
    }

    .portrait .menuTabHeader li button:before {
        border-top: 18px solid #fff !important;
    }

    #click_sound_interactivity .corrCard i,
    #click_sound_interactivity .wrongCard i {
        right: 0px;
        top: 0px;
    }

    .mainFlashcard_flip .click-rating {
        margin-top: 55px;
    }

    .instruction_text {
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: auto;
    }

    .portrait .interactivity .audio-text {
        font-size: 26px !important;
    }

    .portrait .interactivity .audio-text .align-middle,
    .portrait #contraction-activity .audio-text .align-middle {
        height: 178px !important;
    }

    .portrait .interactivity .ancient-template .audio-text .align-middle {
        height: auto !important
    }

    .portrait .interactivity #billBoard .audio-text .align-middle {
        height: auto !important;
        /* remove fix height to fix sentence overlapping issue with footer*/
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .flip-divider {
        width: 50%;
    }

    .book3-click-flip .click-flip-next {
        top: 8%;
        right: 20px !important;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 23vh !important;
    }

    .carousalFlipCard .click-rating {
        margin-top: 90px;
    }

    .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 65%;
        height: 40vh;
    }

    #calenderFlipCardMainDiv .main-flip .cell-space,
    #calenderFlipCardMainDiv .width-100,
    .main-flip.upsideDownFlip:nth-child(2) .scene.flipallcard {
        width: 100%;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 90px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 65%;
        height: 50vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 8vmin;
    }

    .flashcard-turnOver {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
    }

    .flashcard-turnOver .instruction_text {
        font-size: 25px;
    }

    .flashcard-turnOver .audio-text {
        font-size: 20px;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 25px !important;
        top: 50%;
    }

    .leather-book .bookTemplate {
        max-width: 100% !important;
    }

    .leather-book.BookWood .bookTemplate {
        max-width: 60% !important;
    }

    /* .flipbook-viewport {
        transform: scale(0.7);
    } */
    .portrait .leather-book-page .page img.img_text {
        margin-top: -0% !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }
}

@media only screen and (min-width: 801px) and (max-width: 851px) {
    #flipping_leatherbook {
        min-height: 100%;
    }

    #flipping_leatherbook .preroll-img {
        height: 100% !important;
        max-height: 55vh !important;
    }

    .mainFlashcard_flip .click-rating {
        /* margin-top: 70px; */
    }

    .instruction_text {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: 100%;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 28vh;
    }

    .syllabus-image i {
        right: 12px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 90px;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 70%;
        height: 90vh;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 90px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 50%;
        height: 70vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 7vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 25px !important;
    }

    .leather-book .bookTemplate {
        max-width: 100% !important;
        height: 100%;
    }

    /* .flipbook-viewport {
        transform: scale(0.7);
    } */
    .portrait .leather-book-page .page img.img_text {
        margin-top: 0% !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }
}

@media only screen and (min-width: 852px) and (max-width: 877px) {
    #shootthestars .restartIncompleteAnim {
        right: 0;
        font-size: 20px;
        left: 0;
        margin: auto;
    }

    #flipping_leatherbook.leather-book.BookWood {
        min-height: 100%;
        overflow: hidden;
    }

    .mainFlashcard_flip .click-rating {
        margin-top: 70px;
    }

    .instruction_text {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: 100%;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .audio-text {
        font-size: 17px !important;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 28vh;
    }

    .book3-click-flip .click-flip-next {
        top: 30%;
        right: 20px !important;
    }

    .syllabus-image i {
        right: 12px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 90px;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .audio-text {
        margin: 20px 0;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 70%;
        height: 90vh;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 90px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 50%;
        height: 70vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 7vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 25px !important;
    }

    .flashcard-turnOver .audio-text {
        display: block !important;
    }

    .preroll-img {
        max-height: 50vh !important;
        margin-top: 20px !important;
    }

    /* .flipbook-viewport {
        transform: scale(0.7);
        margin-top: 5px;
        padding-top: 10px;
    } */
    .leather-book .turn-page-wrapper div img {
        background-size: contain !important;
        object-fit: contain;
    }

    .leather-book .turn-page-wrapper {
        padding-top: 0px !important;
    }

    .portrait .leather-book-page .page img.img_text {
        margin-top: 0% !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }

    .portrait .bookTemplate {
        height: 85%;
        transform: translateY(11%);
    }
}

@media only screen and (min-width: 899px) and (max-width: 940px) {
    header .connect-dot-bg span {
        font-size: 8px;
        width: 42%;
        right: 45px;
        position: relative;
        line-height: 14px;
        margin-right: 38px;
    }

    .sentence-pickInteractivity-wrap {
        margin-top: 0px !important;
    }

    .leather-book .bookTemplate {
        max-width: 100% !important;
    }

    /* .flipbook-viewport {
        transform: scale(0.7);
    } */
    .portrait .leather-book-page .page img.img_text {
        margin-top: 0% !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }
}

@media screen and (min-width :1200px) and (max-width:1280px) and (min-height:703px) and (max-height:800px) and (orientation:landscape) {
    .landscape #interactivity_div #billBoard #carousel .boardString {
        font-size: 17.5px !important;
        max-width: 50% !important;
        font-weight: 800;
        bottom: -67px !important;
        padding: 0px 25px;
        line-height: 30px;
    }

    .landscape #smdraghb_0 {
        height: 184%;
        top: -85%;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {

    /* for result screens issue SL3-6061 */
    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper,
    .landscape .abcgame_readycount {
        height: 280px !important;
        margin-top: 0 !important;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    .landscape .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
        display: flex;
        align-items: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns {
        top: 215px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns button {
        height: 35px !important;
        margin: 0 !important;
    }

    .landscape .abcgame_abcpick_gameResult div {
        font-size: 13px !important;
    }

    .landscape .jumpGameResultDiv {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 0;
    }

    /* end  */
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 255px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #billBoard .boardString {
        font-size: 17.5px !important;
        max-width: 50% !important;
        font-weight: 800;
        bottom: -67px !important;
        padding: 0px 25px;
        line-height: 30px !important;
    }

    .book3-click-flip .click-flip-next {
        top: 20%;
        right: 20px;
    }

    .landscape .vowels-letter-boxes .vowel-letter {
        height: 65px !important;
    }

    .landscape .vowels-letter-boxes .vowel-letter h3 {
        font-size: 35px !important;
    }

    .landscape #wordLadder .vowels-img {
        height: 115px !important;
        margin: 15px auto !important;
        width: 90% !important;
    }

    .landscape #wordLadder .vowels-bg {
        padding: 15px 0px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 60px;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 30px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 5vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 25px !important;
        top: 50%;
    }

    .portrait .leather-book-page .page img.img_text {
        margin-top: -4% !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }
}


/* flipcard id css  end*/

@media only screen and (min-width: 801px) and (max-width: 851px) {
    .mainFlashcard_flip .click-rating {
        /* margin-top: 70px; */
    }

    .instruction_text {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: 100%;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .syllabus-div .steps ul li {
        padding: 8px 16px;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 28vh;
    }

    .book3-click-flip .click-flip-next {
        top: 30%;
        right: 20px !important;
    }

    .syllabus-image i {
        right: 12px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 90px;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 70%;
        height: 90vh;
    }

    #calenderFlipCardMainDiv .main-flip .cell-space {
        width: 100%;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 90px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 50%;
        height: 70vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 7vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 25px !important;
    }

    .flashcard-turnOver .audio-text {
        display: block !important;
    }

    .stageCnt {
        max-width: 133px !important;
        width: 156px;
    }
}

@media only screen and (min-width: 852px) and (max-width: 877px) {
    .menuTabHeader li button {
        transform: scale(0.9);
    }

    button.active.md-button.md-ink-ripple.activeLesson {
        right: 5% !important;
    }

    .mainFlashcard_flip .click-rating {
        margin-top: 70px;
    }

    .instruction_text {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: 100%;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .audio-text {
        font-size: 17px !important;
    }

    .syllabus-div .steps ul li {
        padding: 8px 16px;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 28vh;
    }

    .book3-click-flip .click-flip-next {
        top: 30%;
        right: 20px !important;
    }

    .syllabus-image i {
        right: 12px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 90px;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .audio-text {
        margin: 20px 0;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 70%;
        height: 90vh;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 90px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 50%;
        height: 70vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 7vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 15px !important;
    }

    .flashcard-turnOver .audio-text {
        display: block !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }
}

@media only screen and (min-width: 852px) and (max-width: 877px) and (orientation: landscape) {
    .landscape .head-level1 {
        left: -67px !important;
    }

    .landscape #interactivity_div .quizz_reader .row.height100 {
        width: 100%;
        height: 100%;
    }

    .landscape .CompanionReaderQuiz .options label.lableQuiz p {
        font-size: 18px !important;
    }

    .CompanionReaderQuiz .options {
        font-size: 13px;
    }

    .mainFlashcard_flip .click-rating {
        margin-top: 70px;
    }

    .instruction_text {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: 100%;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
    }

    .audio-text {
        font-size: 17px !important;
    }

    .syllabus-div .steps ul li {
        padding: 8px 16px;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 28vh;
    }

    .book3-click-flip .click-flip-next {
        top: 30%;
        right: 20px !important;
    }

    .syllabus-image i {
        right: 12px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 90px;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .audio-text {
        margin: 20px 0;
    }

    .carousalFlipCard .main-flip .cell-space {
        width: 70%;
        height: 90vh;
    }

    #calenderFlipCardMainDiv .main-flip .cell-space {
        width: 100%;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 90px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 50%;
        height: 70vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 7vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 15px !important;
    }

    .flashcard-turnOver .audio-text {
        display: block !important;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }
}

@media only screen and (min-width: 899px) and (max-width: 940px) {
    header .connect-dot-bg span {
        font-size: 8px;
        width: 42%;
        right: 45px;
        position: relative;
        line-height: 14px;
        margin-right: 38px;
    }

    .stageCnt {
        max-width: 156px !important;
        width: 156px;
    }
}


/* added css only for iphone 11 series  */

@media only screen and (min-width: 880px) and (max-width: 899px) and (orientation: landscape) {

    /* added css for iphone 11 devices  Iphone 11 landscape : Book 2 : Sect 2 : L13 : Lets go fishing : image is cutting at the top right corner on play screen */
    .landscape #gameBody #letsgofishing .abcgame_abcpickrecommendedgamefull {
        background-size: 100% 85vh !important;
    }

    /* end */
    /* added css for iphone 11 Iphone 11 landscape : Phonics : Book 2 : L4/L7 : lets play football/basketball : game names are not coming properly on play screenden */
    .landscape #letsplaybaseball .abcgame_abcpickrecommendedgame,
    .landscape #letsplayfootball .abcgame_abcpickrecommendedgame {
        background-size: 100% 100vh !important;
        background-position-y: 40%;
    }

    /* end */
    /* added css for iphone 11    Iphone 11(web) Landscape : Book 1 : Sec 1 : L6 : Lets go bowling : play icon is too small  */
    .landscape #strocket-first.bowling-game-main-div .abcgame_abcpickrecommendedgame button {
        width: 100px !important;
        height: 80px !important;
        margin-top: 7% !important;
    }

    /* end */
    /* added css for iphone issue  Iphone 11(web) Landscape : Book 1 : Sec 1 : L6 : Lets go bowling : image is coming stretched  */
    .landscape #strocket-first .vowels-centerlized-wrapper .abcgame_maincontainerContent {
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .landscape #strocket-first .vowels-centerlized-wrapper .abcgame_maincontainerContent .abcgame_sminstructions {
        right: 50px !important;
    }

    /* end */
}


/* end */

@media only screen and (min-width: 878px) and (max-width: 991px) {

    #letsplayfootball .contentBox .lgfballoom_image_pg1,
    #letsplaysoccer .lgfballoom_image_pg1,
    .bowling-game-main-div .abcSound_maincontainerContent {
        background-size: 100% 100%;
    }

    .landscape .abcgame_readycount {
        height: 200px !important;
    }

    .landscape .abcgame_abcpick_gameResultWrapper {
        height: 203px;
        margin-top: 16%;
    }

    .landscape #abcsoundmatch .gameBody .contentBox .abcgame_smtrophy img {
        width: 80% !important;
    }

    .landscape .jumpGameResultDiv .abcgame_scoreBtns {
        top: 157px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .landscape .jumpGameResultDiv .abcgame_nextlevel,
    .landscape .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px !important;
    }

    #billBoard #carousel .boardString {
        font-size: 7px !important;
        max-width: 41% !important;
        font-weight: bold;
    }

    .mainFlashcard_flip .click-rating {
        margin-top: 0px;
    }

    header .connect-dot-bg span {
        font-size: 7px;
        padding: 0px 10px;
    }

    .syllabus-div .steps ul li {
        padding: 8px 16px;
    }

    .instruction_text {
        font-size: 14px !important;
        padding-bottom: 0px !important;
    }

    .mainFlashcard_flip .flash-card-table {
        height: auto;
    }

    .mainFlashcard_flip .flash-card-row {
        margin-top: 0px;
        height: auto;
        display: flex;
    }

    .audio-text {
        font-size: 17px !important;
    }

    .flashcard-turnOver .cardUp {
        font-size: 4.5vmin !important;
    }

    #Shoottherocket #shoot_gamescoreviewbox,
    #Shoottherocket #shoot_gamemissedviewbox {
        height: 50px !important;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    #Shoottherocket .rightSideBar #rhs-canvas {
        position: static;
        width: 120px;
        height: 120px;
    }

    #Shoottherocket .alphabetButton {
        font-size: 15px !important;
        width: 75% !important;
        margin: 25px auto !important;
        max-width: 95% !important;
    }
}


/* for ipad landscape */

@media only screen and (min-width: 992px) and (max-width: 1024px) and (orientation: landscape) {
    .phonicsMain .menuDialog.modal-dialog {
        margin-left: 25px !important;
    }

    .landscape #smdraghb_0 {
        height: 184%;
        top: -84%;
    }

    .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan p {
        font-size: 35px;
    }

    .CulminatingPick .culminating_div {
        padding: 0px 15px;
    }

    /* .mainFlashcard_flip .click-rating {
        margin-top: 120px;
    } */
    .letsplaybasketball .bottomStringRowBasketball {
        bottom: 5%;
        width: 100%;
    }

    .gameBody .letsplaybasketball .rightSideBar .row {
        margin-bottom: 10px !important;
    }

    .bottom_text-basketball {
        padding: 5px 10px 10px;
        background: transparent;
    }

    /* .letsplaybasketball #game_div canvas {
        margin-top: 20px;
    } */
    .bgc_game_img {
        width: 30%;
        height: 45%;
        bottom: 20px;
    }

    .syllabus-div {
        margin-bottom: 40px;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 30vh;
    }

    .book3-click-flip .click-flip-next {
        top: 30%;
        right: 20px !important;
    }

    .instruction_text {
        margin: 10px auto 0;
    }

    .carousalFlipCard .click-rating {
        margin-top: 115px;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .audio-text {
        margin: 20px 0;
    }

    .carousalFlipCard.main-flip .cell-space {
        width: 90%;
        height: 45vh;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 120px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 100%;
        height: 25vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 4vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 25px !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1023px) {

    
    .mainFlashcard_flip .click-rating {
        /* margin-top: 120px; */
    }

    .flashcard-turnOver .flip-divider {
        width: 50% !important;
        max-width: 50%;
    }

    .flip-divider {
        width: 25%;
    }

    .mainFlashcard_flip .flash-card-table .cell-space {
        height: 30vh;
    }

    .book3-click-flip .click-flip-next {
        top: 30%;
        right: 20px !important;
    }

    .flashcard-turnOver {
        padding-top: 0%;
        display: flex;
        justify-content: center;
    }

    .mainFlashcard_flip {
        height: 100% !important;
        /* padding-top: 8% !important; */
    }

    .carousalFlipCard .click-rating {
        margin-top: 115px;
    }

    .carousalFlipCard .main-flip {
        margin-bottom: 30px;
    }

    .carousalFlipCard .audio-text {
        margin: 20px 0;
    }

    .carousalFlipCard.main-flip .cell-space {
        width: 90%;
        height: 45vh;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 120px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 100%;
        height: 25vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 4vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 25px !important;
    }

    #billBoard {
        padding-top: 70px;
        overflow-y: visible;
    }

    #billBoard .twoflash-cont {
        min-height: 300px;
    }

    #billBoard .boardString {
        font-size: 14px;
        line-height: 19px;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {

    /* syllable-pick new  */
    #syllablepick_rightsidebar,
    #syllablepick_lefttsidebar {
        width: 100% !important;
    }

    #syllablepick #syllable_contentbox {
        min-width: 600px !important;
    }

    #syllablepick_rightsidebar .circle_couting ul li>div {
        width: 75px;
        height: 75px;
        font-size: 33px;
        border-width: 6px;
    }

    #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 28px;
    }

    /* end */
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 255px;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 255px;
    }

    .phonicsMain .menuDialog.modal-dialog {
        padding-left: 25px !important;
    }

    .book3-click-flip .click-flip-next {
        top: 20%;
        right: 20px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 60px;
    }

    .carousalFlipCard .audio-text {
        margin: 20px 0;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 30px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 100%;
        height: 30vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 5vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 20px !important;
        top: 45%;
    }
}

#SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
    font-size: 28px;
    margin-top: 5%;
    position: absolute;
    width: 100%;
    text-align: center;
}

#SightWordBlast .abcgame_readycount {
    height: 222px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

#shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
    font-size: 28px;
    margin-top: 5%;
    position: absolute;
    width: 100%;
    text-align: center;
}

#shootthestars .abcgame_readycount {
    height: 222px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) and (orientation: landscape) {
    .phonicsMain .menuDialog.modal-dialog {
        padding-left: 25px !important;
    }

    #SightWordBlast iframe {
        transform: scale(0.99);
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        /* height: 245px !important; */
        margin-right: 8%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 238px !important;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        /* left: 18px !important; */
        right: auto;
        text-align: center;
        bottom: 30px;
    }

    /* save the planet  */
    #shootthestars iframe {
        transform: scale(0.99);
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 255px;
        margin-right: 8%;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 270px !important;
    }

    #gameBody .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto !important;
        /* left: 18px !important; */
        right: auto;
        text-align: center;
        bottom: 20px !important;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 30px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 100%;
        height: 30vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 5vmin;
    }
}

@media only screen and (min-width: 1281px) and (max-width: 1450px) {

    /* for result screens issue SL3-6061 */
    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper,
    .landscape .abcgame_readycount {
        height: 280px !important;
        margin-top: 0 !important;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    .landscape .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
        display: flex;
        align-items: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns {
        top: 215px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns button {
        height: 45px !important;
        margin: 0 !important;
    }

    .landscape .abcgame_abcpick_gameResult div {
        font-size: 16px !important;
    }

    .landscape .jumpGameResultDiv {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 0;
    }

    /* end  */
    .landscape .abcgame_horizontalbottom:before {
        width: 84%;
    }

    /* syllable-pick new  */
    #syllablepick #syllable_contentbox {
        min-width: 600px !important;
    }

    #syllablepick_rightsidebar .circle_couting ul li>div {
        font-size: 35px;
    }

    #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 50px;
    }

    /* end */
    #SightWordBlast #scoreboard {
        height: 285px;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto;
        text-align: center;
        display: flex;
        width: 88%;
        justify-content: center;
        bottom: 25px;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 266px !important;
    }

    /* save the planet  */
    #shootthestars #scoreboard {
        height: 285px;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto;
        text-align: center;
        display: flex;
        width: 88%;
        justify-content: center;
        bottom: 25px;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 266px !important;
    }

    .book3-click-flip .click-flip-next {
        top: 20%;
        right: 20px;
    }

    .carousalFlipCard .click-rating {
        margin-top: 60px;
    }

    .interactivityClickTheCard .click-rating {
        margin-top: 30px;
    }

    .interactivityClickTheCard .main-flip {
        margin-bottom: 40px;
    }

    .interactivityClickTheCard .main-flip .cell-space {
        width: 100%;
        height: 30vh;
    }

    .interactivityClickTheCard .main-flip .cell-space .cardfront-text span {
        font-size: 5vmin;
    }

    .flashcard-turnOver .click-flip-next {
        position: absolute;
        right: 20px !important;
        top: 45%;
    }

    /* flipthecard  /phonics/interactivity/level:1/section:24/lesson:lesson2/activity:51 */
    .flipthecard .flash-card-table .cell-space {
        width: 36vh;
        height: 45vh;
    }
}

@media (min-width: 1601px) {

    .flipcardInteractivity,
    .interactivityDiv,
    div#play_interactivity_pw,
    .CulminatingPick .pickbeginingwrap {
        align-content: space-between;
        min-height: 530px;
    }

    .interactivity .align-middle .sentenceSpan {
        max-width: 62%;
    }

    /* css added only for Book4->Section3->Lesson13->Carousel->sentence is partially displayed  */
    #carousel.section_level_4 span.sentenceSpan {
        max-width: 78%;
    }

    /* end */
    .interactivity .audio-text {
        display: flex;
        align-items: center;
    }

    .interactivity .audio-text .align-middle {
        width: 100%;
    }

    #billBoard .flash-card-sq3 .demotrumpCard .level2,
    #billBoard .flash-card-sq4 .demotrumpCard .level2,
    #billBoard .flash-card-sq5 .demotrumpCard .level2 {
        font-size: 80px !important;
    }

    #billBoard.bill-board-light .billboardlight-wrap .billboardwords_textsection .level2 {
        font-size: 80px !important;
    }

    .interactivity #flipping_leatherbook .align-middle .sentenceSpan {
        max-width: 63%;
    }

    .flashcard-turnOver,
    #interactivity_div .flashcardId {
        height: 100%;
    }

    .mainFlashcard_flip .flipTemp .fontface_ADV_CALIBRI span {
        font-size: 6vh;
    }

    /* #interactivity_div .gameBody .stars li i {
        font-size: 37px !important;
    } */

    #interactivity_div .leftSideBar img {
        max-width: 90%;
    }

    #interactivity_div .gameBody .controlButtons ul li i {
        font-size: 26px;
    }

    #interactivity_div .gameBody .controlButtons ul li,
    #interactivity_div .gameContainer .controlButtons ul li {
        width: calc(33% - 6px);
        max-width: 64px;
        height: 64px;
    }

    #interactivity_div .gameContainer .rightSideBar #rhs-canvas {
        width: 220px;
        height: 220px;
    }

    #interactivity_div .gameBody .timer,
    #interactivity_div .gameContainer .timer {
        font-size: 28px;
        width: 220px;
        padding: 7px 0;
    }

    #gameBody .abcSoundMatchWrapper .timer-wrap .timer {
        width: 150px;
    }

    #interactivity_div .gameBody .mode,
    #interactivity_div .gameContainer .mode {
        font-size: 38px;
    }

    #interactivity_div .gameBody .alphabetButton,
    #interactivity_div .gameContainer .alphabetButton {
        max-width: 253px;
        padding: 12px 0;
        font-size: 31px;
    }

    #interactivity_div .gameBody .repeatButton {
        max-width: 253px;
        padding: 12px 0;
        font-size: 26px;
    }

    #interactivity_div #Shoottherocket .alphabetButton {
        max-width: 80%;
    }

    /* #interactivity_div .gameBody .stars li {
        max-width: none;
        margin: 2px 4px;
        width: auto;
    } */

    .gameContainer #optionalScreen .optionalGameLogo.gameLogo_4 {
        width: 191px;
        height: 117px;
    }

    .landscape .gameContainer .abcgame_abcpickoptionalgamelist button {
        width: 90px;
        height: 37px;
    }

    .gameContainer #optionalScreen .optionalGameLogo.gameLogo_3 {
        width: 212px;
        height: 161px;
    }

    .gameContainer #optionalScreen .optionalGameLogo.gameLogo_2 {
        width: 290px;
        height: 150px;
    }

    .click-rating .bullets {
        font-size: 3.2vmin;
    }

    .opposite_component .repeat_button_audio .repeat-icon {
        padding: 4px 24px;
        font-size: 21px;
    }

    .instruction_text .fa-info-circle {
        font-size: 39px !important;
    }

    /* commented to make font size consistent to https://ap.bayatree.com/phonics/lesson/level:3/section:121/lesson:lesson1/activity:1 */
    .carousalFlipCard .main-flip .cell-space .cardfront-text span {
        font-size: 7vw;
    }

    #calenderFlipCardMainDiv h1 {
        font-size: 7vw;
    }

    #calenderFlipCardMainDiv .upsideDownFlip .front h1,
    #calenderFlipCardMainDiv .container.calendar-row .main-flip.book-clips.upsideDownFlip .scene.flipallcard .front h1,
    .carousalFlipCard .main-flip.noCalendarFlip .cell-space.cardUp.width-85 .cardfront-text span {
        padding-left: 65px;
    }

    #calenderFlipCardMainDiv .upsideDownFlip .front h1 {
        font-size: 6vw !important;
        padding-left: 0 !important;
    }

    #billBoard.bill-board-light .twoflash-cont .sq-animate2:after {
        right: -150px;
        width: 200px;
        height: 200px;
        top: 10px;
    }

    /* Added CSS for SL3-9182 */

    .ereader_bookimages .ereader_images .flash-card-row {
        transform: scale(1.2);
    }

    .content_ereader_modify.ereader_bookimages #ereader_images .flashcard-turnOver.mainFlashcard_flip.layout-align-start-stretch.layout-column.flex-nogrow {
        overflow: visible !important;
    }

    /* End CSS for SL3-9182 */

    .CompanionReaderQuiz-wrap {
        transform: scale(1.15555);
    }

    .three-box-wrapper {
        transform: scale(1.4);
        margin-bottom: 90px;
    }

    .contraction-card {
        transform: scale(1.4);
    }
}

@media (max-width: 1600px) {

    .flipcardInteractivity,
    .interactivityDiv,
    .flashcardContainr {
        align-content: initial;
    }

    .interactivity-flip {
        display: flex;
        justify-content: space-between;
        height: 100%;
    }

    #play_interactivity_pw {
        align-content: space-between;
    }

    .CulminatingPick .culminatingWrdImg {
        height: 320px;
    }
}

@media (max-width: 1500px) {
    .instruction_text {
        margin: 0 auto;
    }

    .carousalFlipCard .click-rating {
        margin: 10px 0 !important;
    }

    /* added css for Book 1/Book3/Book4- All activities->Header gets trimmed at the beginning from 1367 to 1420 desktop size    */
    header .connect-dot-bg {
        width: 220px;
        left: 0;
    }

    /* end */
}

@media (max-width: 1400px) and (min-width:1300px) {

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape .billboard-words .demotrumpCard .level2,
    .landscape .billboard-words .demotrumpCard .level2,
    .landscape .billboard-words .demotrumpCard .level2 {
        font-size: 75px !important;
    }

    .landscape #billBoard.bill-board-light .billboardlight-wrap .billboardwords_textsection .level2 {
        font-size: 60px !important;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 266px !important;
    }

    #SightWordBlast .abcgame_readycount {
        height: 290px;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 25px !important;
        right: auto !important;
        bottom: 25px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 13px;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 266px !important;
    }

    #shootthestars .abcgame_readycount {
        height: 290px;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto !important;
        bottom: 25px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .upsideDownFlip .spiral {
        left: 0;
        width: 100%;
        height: 49px;
        right: 0;
    }

    .draggable-wrap,
    .source-preview {
        height: 30vh;
    }

    .interactivityfullScreen .draggable-wrap,
    .interactivityfullScreen .source-preview {
        height: 40vh;
    }

    .upsideDownFlip .spiral-right {
        width: 100%;
        height: 49px;
        left: 0;
        right: 0;
    }

    .drag-container .space-padding {
        margin: 20px 0;
    }

    .drag-container .btn-droppable {
        height: 32vh;
    }

    #Shoottherocket #shoot_gamescoreviewbox,
    #Shoottherocket #shoot_gamemissedviewbox {
        height: 80px !important;
        font-size: 20px !important;
        padding: 10px;
        letter-spacing: 1px;
    }

    #Shoottherocket .shootrocketPage4 {
        height: 100%;
    }
}


/* responsiveness */

@media (max-width: 1400px) {
    .drag-container .layout-align-space-around-center {
        width: 90%;
    }

    .landscape .drag-container .draggable-wrap .btn-droppable.dropElement .drop_child p {
        font-size: 6vmin;
    }

    #billBoard .boardString {
        font-size: 16px;
    }

    .three-box-wrapper {
        height: 217px;
    }

    .interactivity .wordFinder-bluebook .flash-card-row {
        width: 90%;
    }

    .landscape #billBoard.bill-board-light {
        background-size: 100% 100%;
    }

    .syllabus-image,
    .CulminatingPick .culminatingWrdImg {
        height: 230px;
    }

    .interactivityfullScreen .CulminatingPick .culminatingWrdImg {
        height: 280px;
    }

    .portrait .CulminatingPick .culminatingWrdImg {
        height: 380px;
    }

    .interactivity .flashcard-turnOver div .instruction_text,
    .interactivity div .instruction_text {
        margin: 0;
    }

    .landscape .interactivity .flashcard-turnOver .audio-text {
        padding: 10px 0px;
    }

    .interactivity .click-rating .circle_new {
        width: 25px;
        height: 25px;
    }

    .interactivity .flashcard-turnOver .flip-divider,
    .interactivity .flip-divider {
        height: 50vh;
    }

    .landscape .interactivity .flashcard-turnOver .flip-divider,
    .landscape .interactivity .flip-divider {
        height: 47vh;
        max-height: 353px;
    }

    .landscape .interactivity.interactivityfullScreen .flip-divider {
        height: 55vh;
        max-height: 370px;
    }

    .landscape .interactivity .flashcard-turnOver .flip-divider,
    .landscape .interactivity .flip-divider {
        padding: 0 20px;
    }

    .interactivity .flashcard-turnOver .flash-card-row,
    .interactivity .flash-card-row {
        width: 100%;
    }

    .landscape .interactivity .book3-click-flip .testcard1_ff {
        font-size: 6vmin;
    }

    .landscape #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .landscape #calenderFlipCardMainDiv .main-flip .cell-space,
    .landscape #calenderFlipCardMainDiv .three-cards .scene {
        height: 34vh;
    }

    .landscape #calenderFlipCardMainDiv .three-cards-wrapper .upsideDownFlip .scene {
        height: 18vh;
        min-height: 104px;
    }

    .landscape .interactivityfullScreen #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .landscape .interactivityfullScreen #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 48vh;
    }

    .interactivity .carousel-parent .carousel-text {
        min-height: 22%;
    }

    .landscape #calenderFlipCardMainDiv .scene.flipallcard h1 {
        font-size: 6vw;
    }
    .wordFinder-bluebook .cell-space .cardfront-text {
               margin-left: 28px;
               margin-right: 3px;
           }
}

@media (max-width: 1400px) and (max-height: 570px) {
    .phonicsMain .menuDialog.modal-dialog {
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .menuDialog.modal-dialog .modal-body {
        max-height: 475px;
        min-height: 475px;
    }
}


/*used for resolve recording save dialogue issue*/

@media (max-width: 1024px) {
    .landscape .phonicsMain .MuiPaper-root.MuiDialog-paper.MuiDialog-paperScrollPaper.MuiDialog-paperWidthSm.react-draggable.MuiPaper-rounded {
        max-height: calc(100% - 4px);
    }

    .landscape .phonicsMain .modal-header .btn-close:before {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }


    .landscape .phonicsMain button.MuiButtonBase-root.MuiButton-root {
        padding: 7px 30px;
    }

    .portrait body#appBody .video-container .interactivityParentDiv,
    .portrait .ebookParentDiv,
    .portrait .songParentDiv,
    .portrait .twinkling {
        margin: 0 !important;
    }

    .portrait body#appBody .video-container .contentfull.interactivityfullScreen,
    .portrait .contentfull.ebookParentDiv,
    .portrait .contentfull.songParentDiv,
    .portrait .contentfull.twinkling {
        margin-top: 0px !important;
    }
}

@media (max-width: 767px) {

    .portrait #appBody .bookTemplate4 .page,
    .portrait #appBody #flipping_leatherbook.flip-book2 {
        background: linear-gradient(to bottom, #ebc400 50%, #abe385 45%) !important;
    }

    .portrait #appBody #calenderFlipCardMainDiv.blackboard-template .contentBox,
    .portrait #appBody #calenderFlipCardMainDiv.slider-template .contentBox {
        max-height: calc(100% - 20%) !important;
        margin-top: 0 !important;
    }

    .portrait #appBody #calenderFlipCardMainDiv.Drone1 .Drone-ContentBox {
        height: calc(100% - 40%) !important;
        margin-top: 0 !important;
    }

    .portrait .clicksoundinteractivity .eight-falsh-card-wrap .wordbeginingsound {
        align-items: center;
        justify-content: flex-start;
        display: flex;
        padding-bottom: 0;
        overflow-y: hidden;
        height: 100%;
    }

    .portrait .clicksoundinteractivity .eight-falsh-card-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .portrait .clicksoundinteractivity .click-soundcard-wrap.layout-row {
        height: 43%;
    }

    .portrait .clicksoundinteractivity .click-soundcard-wrap.layout-row:first-child {
        margin-bottom: 4px !important;
    }

    .portrait .clicksoundinteractivity .md-padding.ng-scope.layout-align-center-center.layout-row.flex-25 {
        padding: 3px !important;
    }

    .portrait .CompanionReaderQuiz-wrap {
        width: 75%;
        /* to fix SL3-18915 - Android(Portrait) : Hybrid app : Reading : Quiz : 2-2-6-2 : User is not able to play audio of quiz */
    }

    .portrait #mainBodyContainer #lesson_iframe.Phonics_ereader .content_ereader_modify .iframe_ereader {
        width: 100%;
        height: 90%;
    }

    .portrait .recomendedBookImg .click-rating {
        position: inherit;
    }

    .portrait #words_rhyiming .connectthedots-game-instruction-wrapper ul {
        justify-content: center;
    }


    .portrait #words_rhyiming .connectthedots-game-instruction-wrapper.animated.bounceIn {
        position: fixed !important;
        height: auto !important;
        width: 80% !important;
        max-height: 165px;
        font-size: 14px;
    }

    .landscape .ebookContainer .instruction_text {
        font-size: 25px !important;
        max-width: 80%;
        margin-bottom: 15px;
    }

    .portrait .phonics_popup .search_bar-section .flex-end-right input.search-form-control {
        width: 96.5% !important;
    }

    .portrait body#appBody .video-container .interactivityParentDiv,
    .portrait .ebookParentDiv,
    .portrait body#appBody .songParentDiv,
    .portrait .twinkling {
        margin: 0 !important;
    }

    .portrait body#appBody .video-container .contentfull.interactivityfullScreen,
    .portrait .contentfull.ebookParentDiv,
    .portrait body#appBody .contentfull.songParentDiv,
    .portrait .contentfull.twinkling {
        margin-top: 0px !important;
    }

    .portrait #syllablepick_rightsidebar .circle_couting {
        width: 100%;
    }

    .portrait #syllablepick .syllable_div {
        width: 90%;
    }

    .one-card .upsideDownFlip .front,
    .one-card .upsideDownFlip .back {
        border: 5px solid #23408e;
        border-radius: 10px;
    }

    .one-card .upsideDownFlip .spiral,
    .one-card .upsideDownFlip .spiral-right {
        height: 25px !important;
        top: -14px !important;
    }

    .portrait #calenderFlipCardMainDiv .one-card .upsideDownFlip .front h1 {
        font-size: 12vw !important;
    }

    .portrait #calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.flipallcard .front h1.mutated-word {
        font-size: 8vw !important;
    }

    #calenderFlipCardMainDiv .one-card .upsideDownFlip p {
        margin: 15px auto 10px;
    }

    .portrait .three-box-wrapper {
        height: 180px;
    }

    .portrait .basket-apple {
        width: 32%;
        margin-top: 13px;
    }

    .portrait .basket-apple h3 {
        transform: translateY(-3%);
        font-size: 22px;
    }

    .contraction-string h3 {
        font-size: 30px;
    }

    .portrait .apples_bg .audio-text {
        font-size: 12px !important;
    }

    .portrait .Contraction-wrap>div {
        font-size: 13px !important;
        top: 5px;
    }

    .portrait .Contraction-wrap img {
        width: 60%;
    }
 
 .wordFinder-bluebook .cell-space .cardfront-text {
     margin-left: 18px;
     margin-right: 2px;
 }

}

@media (min-height: 769px) {
    #interactivity_div .connectthedots-canvas-container {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 991px) {
    .landscape #calenderFlipCardMainDiv.slider-template .contentarea .templatebox  .align-middle .sentenceSpan {
            max-width: 60%;
        }
    .landscape .phonicsMain #noanim-tab-example .activity_area .activity_names {
        width: 68% !important;
    }

    .landscape .phonicsMain #noanim-tab-example .activity_area i {
        right: 18px;
    }

    .landscape .carousel-parent .text-top {
        font-size: 3.5vw !important;
    }

    #calenderFlipCardMainDiv.carousalFlipCard .arrow {
        transform: translateY(-50%) scale(0.75) !important;
    }

    #calenderFlipCardMainDiv.carousalFlipCard .arrow i {
        transform: none !important;
    }

    #calenderFlipCardMainDiv .arrow>i,
    .carousalFlipCard .arrow>i,
    .click-flip-next-nav>i,
    .click-flip-prev-nav>i {
        transform: scale(0.75);
    }

    .portrait .CompanionReaderQuiz {
        overflow-y: auto;
        padding: 10px 0;
    }

    .portrait .phonicsMain .menuTabHeader li button {
        margin-bottom: 10px;
    }

    .portrait .phonicsMain .modal-header {
        padding: 15px !important;
    }

    .portrait .head-level1 {
        left: -67px;
    }

    .phonicsMain #example-custom-modal-styling-title {
        padding-left: 0px !important;
        font-size: 25px !important;
    }

    /* added css for landscape of iphone and etc   Iphone11/pixel3->Book 3- >Section 4->Lesson 6->Word bowl->Resultant screen got distorted  */
    .landscape .abcgame_abcpick_gameResult div {
        font-size: 9px !important;
    }

    /* end */
    .landscape #words_rhyiming .click-rating {
        margin: 0px 0 10px 0 !important;
    }

    .portrait .clicksoundinteractivity .eight-falsh-card-wrap .wordbeginingsound .trumpCard_red span {
        font-size: 8.5vw;
    }

    .learning-teaching {
        display: none;
    }

    .landscape .intruction-inner-wrap button {
        width: 80px;
        font-size: 15px;
    }

    .landscape .instruction-wrap #interactivityIntroDiv {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 15px;
    }

    .portrait .instruction-wrap {
        width: 80%;
    }

    .landscape .content-pagination span.pre-lesson .landscape #words_rhyiming .right_column {
        top: 8px;
        right: 8px;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan p {
        font-size: 45px !important;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan {
        max-width: 100% !important;
    }

    #calenderFlipCardMainDiv .instruction_text {
        margin-top: 0px;
    }

    .landscape .one-card .upsideDownFlip .front,
    .landscape .one-card .upsideDownFlip .back {
        border: 5px solid #23408e;
        border-radius: 10px;
    }

    .landscape .one-card .main-flip.upsideDownFlip .scene {
        width: 90% !important;
    }

    .landscape .upsideDownFlip p {
        margin: 15px auto 10px;
    }

    .landscape #calenderFlipCardMainDiv .instruction_text {
        margin-top: 0px !important;
    }

    /* .upsideDownFlip img {
        max-width: 20vh;
    } */
    .CompanionReaderQuiz .btnPrev,
    .CompanionReaderQuiz .btnNxt {
        width: 81px;
        height: 32px;
        margin: 3px 7px;
    }

    .CompanionReaderQuiz .controllQuiz button .material-icons {
        font-size: 9px;
    }

    .bgc_game_img img {
        height: 100% !important;
    }

    .CompanionReaderQuiz-wrap:after {
        width: 162px;
        height: 296px;
        right: -59px;
    }

    .landscape #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .landscape #calenderFlipCardMainDiv .main-flip .cell-space,
    .landscape #calenderFlipCardMainDiv .three-cards .scene {
        /* height: 30vh !important; */
        min-height: auto;
    }

    .landscape #calenderFlipCardMainDiv .three-cards-wrapper .upsideDownFlip .scene {
        height: 15vh !important;
        min-height: 53px;
    }

    .landscape #calenderFlipCardMainDiv .three-cards-wrapper .col-xs-12.main-flip.book-clips.upsideDownFlip {
        margin-top: 5px;
    }

    .landscape .interactivityfullScreen #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .landscape .interactivityfullScreen #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 48vh !important;
    }

    .portrait #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .portrait #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 30vh !important;
        min-height: 117px;
    }

    .portrait #calenderFlipCardMainDiv .three-cards-wrapper .upsideDownFlip .scene {
        height: 13.5vh !important;
    }

    .portrait .interactivityfullScreen #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .portrait .interactivityfullScreen #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 40vh !important;
    }

    #billBoard .boardString {
        font-size: 13px;
        line-height: 21px;
        max-width: 36%;
    }

    .portrait .interactivity .flip-divider {
        max-height: 265px;
    }

    .portrait .interactivity.interactivityfullScreen .flip-divider {
        max-height: 320px;
    }
    
}

@media only screen and (max-width: 800px) and (min-width: 769px) {
    .level1 {
        width: 100%;
        height: 100%;
    }

    .vowels-container .vowels-game-container {
        flex-direction: column !important;
    }

    .vowels-left-column .row.clock {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vowels-letter>.button_bg>span {
        font-size: 20px;
    }

    .vowels-container .vowels-left-column,
    .vowels-container .vowels-right-column {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .vowels-container .vowels-centered-column {
        width: 100% !important;
        padding: 0 15px;
    }

    .vowels-game-event-icons {
        width: auto !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) and (orientation: landscape),
(max-width: 991px) and (orientation: portrait) {

    /* .upsideDownFlip img {
        max-width: 30vh;
    } */
    .gameBody .container {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

}

@media only screen and (min-width: 668px) and (max-width: 768px) and (orientation: landscape) {
    .vowels-left-column figure h3 {
        font-size: 30px !important;
    }

    #billBoard .boardString {
        max-width: 60%;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
    }

    .vowels-letter {
        width: 80% !important;
        margin: 0px !important;
    }

    .vowels-letter>.button_bg {
        width: 100% !important;
        height: 5em !important;
        line-height: 0.7;
    }

    .vowels-stars {
        margin-top: 10px !important;
    }

    .vowels-letter>.button_bg>span {
        font-size: 16px !important;
    }

    .vowels-game-event-icons ul {
        justify-content: space-between;
        display: flex;
        height: 100%;
        margin: 0;
    }

    .vowels-stars ul li {
        width: 20px !important;
        height: 20px !important;
    }

    .vowels-game-event-icons ul li {
        max-width: 40px;
        height: 40px;
        max-width: 40px;
        height: 40px;
        margin: 0 !important;
    }

    .vowels-game-event-icons ul li i {
        width: 37px !important;
        height: 37px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vowels-img {
        height: 85px !important;
        margin: 10px 0px !important;
    }

    .vowels-letter-boxes .vowel-letter {
        height: auto !important;
    }

    .vowels-letter-boxes .vowel-letter h3 {
        font-size: 24px !important;
    }

    .vowels-letter-boxes .vowel-letter {
        border-width: 5px !important;
    }

    .orignal_letter {
        padding: 10px !important;
    }

    .orignal_letter .letter_column {
        width: 40% !important;
        height: 100% !important;
    }

    .letter_column span {
        font-size: 20px !important;
    }
}

@media only screen and (min-width: 668px) and (max-width: 768px) {
    #calenderFlipCardMainDiv .instruction_text {
        margin-top: 0px;
    }

    .vowels-letter-boxes .vowel-letter h3 {
        font-size: 30px !important;
    }

    #billBoard .boardString {
        max-width: 58% !important;
    }
}

@media only screen and (min-width: 760px) and (max-width: 768px) and (max-height: 1024px) and (orientation: portrait) {
    #billBoard .boardString {
        max-width: 65% !important;
        padding: 0px 15px !important;
    }

    #billBoard .demotrumpCard span.ng-binding {
        font-size: 6.55vmin !important;
    }
}

@media (max-width: 800px) {
    .portrait .CulminatingPick .culminatingWrdImg {
        height: 230px;
    }

    .portrait .interactivityfullScreen .CulminatingPick .culminatingWrdImg {
        height: 270px;
    }

    .portrait .culminating_div {
        padding: 0px 15px;
    }

    .portrait .interactivity .fisrt-sound-pick-wrapper {
        margin: 20px 0 0 0;
    }

    .CompanionReaderQuiz .QuestionCnt,
    .CompanionReaderQuiz .options {
        font-size: 20px;
    }

    .CompanionReaderQuiz .options,
    .CompanionReaderQuiz .option-wrap {
        margin-bottom: 10px;
    }

    .portrait .syllabus-div {
        margin-bottom: 30px;
    }

    .portrait .fisrt-sound-pick-wrapper .speaker-icon {
        padding: 10px 0px 0 0;
    }

    .portrait .draggable-wrap,
    .portrait .source-preview {
        margin: auto;
        width: 80%;
        max-width: 306px;
        max-height: 348px;
        height: 15.5vh;
    }

    .drag-drop-parent.layout-align-center-center.layout-row {
        height: auto;
    }
}

@media only screen and (min-width: 1140px) and (max-width: 1320px) and (orientation: landscape) {
    .landscape .wrapper-div .bookTemplate {
        max-width: 100%;
    }

    .landscape .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
        display: flex;
        align-items: center;
    }

    .landscape .vowels-letter-boxes .vowel-letter {
        height: 55px;
    }

    #wordLadder .vowels-img {
        height: 130px !important;
        margin: 5px 0px !important;
    }

    #wordLadder .tick-class {
        top: -7% !important;
        right: -7% !important;
    }

    .landscape .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        max-height: 800px;
        padding: 15px 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1024px) and (orientation: landscape) {
    .vowels-letter-boxes .vowel-letter h3 {
        font-size: 32px !important;
    }

    .vowels-letter-boxes .vowel-letter {
        height: 70px !important;
    }

    #calenderFlipCardMainDiv {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1366px) and (orientation: portrait) {

    /* for result screens issue SL3-6061 */
    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper,
    .portrait .abcgame_readycount {
        height: 370px !important;
        /* margin-top: 0 !important; */
    }

    .portrait .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    .portrait .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
        display: flex;
        align-items: center;
    }

    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns {
        top: 285px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portrait .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns button {
        height: 55px !important;
        margin: 0 !important;
    }

    .portrait .abcgame_abcpick_gameResult div {
        font-size: 22px !important;
    }

    /* end  */
    .portrait #recordingIframe .isMobilePortrait {
        width: 100%;
        height: 100%;
        float: left;
        margin: 20px 0px;
    }

    .portrait #recordingIframe header .col-md-4 {
        width: 65%;
        float: left;
    }

    .portrait #recordingIframe header .col-md-8 {
        width: 35%;
        float: left;
    }

    .portrait #recordingIframe header .common-profile-wrap {
        margin-top: 25px;
        margin-right: 11px;
        display: flex;
        align-items: center;
    }

    .portrait #recordingIframe header .common-profile-wrap .common-profile-section {
        width: 70px;
    }

    .portrait #recordingIframe header .common-profile-wrap .common-profile-section .sb-avatar {
        width: 32px;
        height: 32px;
    }

    .portrait #recordingIframe header .ML-store #LoginButton {
        position: relative;
        margin-top: 25px;
    }

    .portrait #recordingIframe header .logo-wrap {
        justify-content: space-between;
        text-align: center;
        align-items: center;
        width: 100%;
    }

    .portrait #recordingIframe .sommer-logo {
        margin-right: 30px;
    }

    .portrait #recordingIframe .recording-play-controls {
        position: relative;
    }

    .portrait .phonics_popup .search_bar-section .flex-end-right input.search-form-control {
        width: 98.8% !important;
    }

    .portrait #recordingIframe header .isMobilePortrait .logo-wrap {
        justify-content: space-between;
        display: flex;
        text-align: center;
        align-items: center;
        width: 95%;
    }

    .portrait #recordingIframe header .col-md-4 {
        width: 60%;
        display: flex;
        align-items: center;
    }

    .portrait #recordingIframe header .col-md-8 {
        width: 40%;
        display: flex;
        align-items: center;
    }

    .portrait #recordingIframe header {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .portrait #recordingIframe .sommer-logo {
        margin-right: 30px;
    }

    .portrait #recordingIframe .recording-play-controls {
        position: relative;
    }

    .portrait #recordingIframe .recording-play-controls .recording-full-screen-control .btn-action {
        top: 15px !important;
        left: 15px !important;
    }

    .portrait .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 65%;
    }

    .portrait #smdraghb_0 {
        width: 22% !important;
        height: 206% !important;
        top: -110% !important;
        left: 0px !important;
    }

    .portrait .phonics_popup .modal-body {
        max-height: 850px;
        height: 850px;
    }

    /* modal tab section changes  */
    .portrait .drag-container.layout-column {
        width: 100%;
    }

    .portrait .drag-container .btn-droppable {
        width: 100%;
    }

    .portrait .modal .modal-dialog {
        /* margin-left: 0; */
    }

    .portrait .modal .modal-dialog .accordion {
        border: none;
    }

    .portrait .modal .modal-dialog .accordion .accordion__item {
        border: 2px solid #193463 !important;
        margin-bottom: 10px !important;
        border-radius: 0px !important;
        float: left;
        width: 100%;
    }

    .portrait .modal .modal-dialog .accordion .accordion__item h3 {
        font-size: 12px !important;
        font-weight: 600 !important;
        width: 90% !important;
    }

    .portrait .modal .modal-dialog .accordion .accordion__item .accordion__title {
        padding: 10px !important;
        background: #d1d6e0 !important;
    }

    .portrait .modal .modal-dialog .accordion .accordion__item h3 .accordion__arrow {
        right: -30px !important;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList {
        margin: 0;
        width: calc(100% - -30px);
        margin-top: -20px;
        margin: 0 -15px;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem {
        margin: 0;
        margin-bottom: 5px;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a {
        margin: 0;
        padding: 0;
        text-align: left !important;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        margin: 0;
        font-size: 12px;
        font-weight: 600;
        border: none;
        background: transparent;
        text-align: left;
        line-height: 25px;
        padding: 5px 15px;
        flex-direction: row-reverse;
        width: 100%;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button img {
        margin-left: 10px;
    }

    .portrait .icon-backward.md-button.md-ink-ripple {
        border: 2px solid;
        padding: 0 4px 0 0;
        background-color: #fff;
        min-width: 37px !important;
        height: 37px !important;
        border-radius: 50% !important;
    }

    .portrait .icon-forward.md-button.md-ink-ripple {
        border: 2px solid;
        padding: 0 0 0 4px;
        background-color: #fff;
        min-width: 37px !important;
        height: 37px !important;
        border-radius: 50% !important;
    }

    /* end */
    /* cources-tab changes  */
    .portrait .phonicsMain .menuDialog.modal-dialog {
        margin-left: 20px !important;
    }

    .portrait .phonicsMain #noanim-tab-example a span {
        margin-left: 0;
    }

    .portrait .phonicsMain #noanim-tab-example a span.activity_names {
        width: 100%;
    }

    .portrait .phonicsMain .modal-header {
        background: #193463 !important;
    }

    .phonicsMain #noanim-tab-example a i {
        width: 30px !important;
        background-size: 27px !important;
        height: 30px !important;
        position: static;
        margin-right: 15px;
    }

    /* Added css for ipad pro */
    .phonicsMain #noanim-tab-example a i.fa-check-circle {
        right: 25px !important;
        background-color: white;
        height: 0px !important;
    }

    .portrait h3.u-position-relative .fa.fa-check-circle {
        font-size: 16px;
    }

    .portrait .fa-check-circle:after {
        width: 10px !important;
        height: 10px;
    }

    .portrait .phonicsMain .ttheader {
        display: flex;
        position: relative;
        width: 100%;
        transform: scale(1);
        margin-left: auto;
        padding: 0;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
    }

    .portrait .head-level1 {
        top: 40px !important;
        left: -76px;
        position: absolute;
    }

    .portrait .head-level1 .menuTabHeader {
        width: 25%;
    }

    .portrait .phonicsMain .menuTabHeader li button {
        border-radius: 0;
        padding-bottom: 0px;
        width: 68px !important;
        height: 80px !important;
        border-right: none;
        min-width: 10px;
        margin-top: 0px;
    }

    .portrait .menuTabHeader li {
        margin: 10px 0 0 0;
    }

    .portrait button.active.md-button.md-ink-ripple.activeLesson {
        border-radius: 0;
        min-width: 84px;
        right: 0;
        box-shadow: none !important;
        background: #fff !important;
        margin-left: 3px;
    }

    .portrait .menuTabHeader li button:before {
        display: none !important;
    }

    .portrait .menuTabHeader li {
        display: block !important;
        width: 20%;
        margin-top: 0px;
        height: 75px;
    }

    .portrait .phonicsMain .ttheader .nav-bar-btn {
        margin: 3px 3px 0 !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }

    .portrait .phonicsMain .ic-text {
        font-size: 8px;
        display: none;
    }

    .portrait .phonicsMain .modal-dialog .modal-content {
        border-width: 10px;
    }

    /* end  */
    #calenderFlipCardMainDiv {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    #abcMatchMainBody .abcgame_abccol_portrait.abcgame_abcpick_floatPlayArea_portrait {
        position: relative;
        height: 100% !important;
    }

    .portrait .gameBody .rightSideBar .row.clock {
        width: 67% !important;
    }

    .portrait .gameContainer .abcMatchMainDiv .row.controlButtons {
        width: 40%;
    }
}

@media (max-width: 991px) and (orientation: portrait) {

   
    /* .upsideDownFlip img {
        max-width: 24vw;
    } */
    #billBoard .demotrumpCard span.ng-binding {
        font-size: 6.55vmin;
    }

    .portrait #billBoard .twoflash-cont .flash-card-sq5.layout-fill {
        width: 100%;
    }

    /* .leather-book {
        padding-top: 54px;
    } */
    .leather-book .bookTemplate {
        height: 50% !important;
    }
}

@media (max-width: 991px) and (orientation: landscape) {
    .landscape #calenderFlipCardMainDiv.envelope-template 
    .contentarea .templatebox 
    .template-word {
        min-height: 50px;
    }

     .landscape #calenderFlipCardMainDiv.envelope-template 
    .contentarea .templatebox 
    .template-word p {
        font-size: clamp(16px, 4vw, 22px) !important;
    }

      .landscape .gameBody#gameBody .abcgame_sminstructions,
  .landscape .gameBody#gameBody .lgf_helpinstruction,
  .landscape .gameBody#gameBody .helpinstruction {
      z-index: auto;
  }
     .landscape .clicksoundinteractivity .eight-falsh-card-wrap .wordbeginingsound .trumpCard_red span {
        font-size: 3vw;
    }
    .landscape #root,
    .landscape #root>.segment {
        /*changed height:100vh to height:100%* to avoid scroll on devices*/
        height: 100%;
        overflow-y: visible;
    }

    .landscape .content-pagination {
        min-height: 56px !important;
    }
html.landscape #root header+div.video-container {
        height: 100% !important;
    }

 html.landscape #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img img {
    height: 100% !important;
    max-height: 150px;
}

    /* added css for recording page phonics  SL3-11535*/
    #recordingIframe .common-profile-section button#basic-drop span.caret {
        top: 0;
    }

    #billBoard .billBoardTextbook1 .textFirst.level1,
    #billBoard .billBoardTextbook1 .textFirst.level1 .level2 {
        min-height: 100%;
    }

    #billBoard .billBoardTextbook1 .textFirst.level1 span.ng-binding {
        min-height: 100%;
        margin: 0% 0 0 20px;
    }

    .image-container-col img {
        max-height: 25vh;
        object-fit: contain;
    }

    .logo-wrap {
        height: 68px;
    }

    /* end */

    /* added css for Phonics - Correct UI for drag interactivity Textbook1 9413 */
    .landscape #appBody .dragcontainer-wrap .drag-container .drop_child p.drop_childAfter {
        font-size: 6vh !important;
        bottom: 0;
    }

    /* end */
    /* added css for landscape cources view icon touching  */
    .landscape #lessonDiv button {
        padding: 7px 20px 7px 10px;
    }

    /* end */
    #firstSoundPick .trumpCard_red {
        border: 5px solid #23408e;
        border-radius: 10px;
    }

    #firstSoundPick .preroll-text {
        border-radius: 5px 5px 0 0;
        padding: 10px 0;
    }

    #firstSoundPick .preroll-text h2.heading {
        font-size: 3.5vmin;
    }

    #firstSoundPick .speaker-icon {
        margin-bottom: 15px;
    }

    .landscape #interactivity_div .connectthedots-game-text {
        width: 80% !important;
        top: 29px !important;
    }

 
}


/* 12-12-2019  evening*/

.letsplaybasketball .lgf_captionright {
    margin-top: 0px;
}

.letsplaybasketball .lgfcaption {
    margin-top: 10px;
}

.letsplaybasketball .abcgame_smrepeatletter {
    background-image: none !important;
    color: #fff;
    background-color: #2f88f7;
    border: 3px solid #444;
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.5);
    transition: 0.5s;
    border-radius: 30px;
    padding: 12px 24px;
    margin-top: 20px;
    margin-left: 9px;
    width: max-content;
}

.letsplaybasketball .abcgame_smrepeatletter:hover {
    background-image: none !important;
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.7);
}

.letsplaybasketball .letsgofishingrowborder {
    padding-top: 0px !important;
}

.letsplaybasketball .lgftheballoonPages {
    margin-top: 20px !important;
}

.letsplaybasketball .rhs-image-wrap {
    margin-top: 10% !important;
}

.letsplaybasketball .lgf_timeralign div {
    margin-top: 12% !important;
}

.letsplaybasketball #lgf_gamelvlintdication {
    top: 67%;
}

.letsplaybasketball .gameWrapper.row {
    width: 100%;
    float: left;
    /* height: calc(100% - 50px) !important; */
    height: 100% !important;
}

.gameBody .letsplaybasketball .contentBox {
    position: relative;
}

.letsplaybasketball .bottomStringRowBasketball {
    height: auto;
    float: none;
    width: 68%;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    margin-left: 0;
}

.letsplaybasketball .row.gameWrapper.wrapperHeight {
    height: 100% !important;
}


/* 24-12-2019 */

.bottom_text-basketball {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    top: 0;
    font-weight: normal;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    padding: 10px;
    border-radius: 10px;
}

.bottom_text-basketball h2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
}


/* #interactivity_div .letsplaybasketball .leftSideBar .row.logo img {
    max-width: 150px;
} */


/* .letsplaybasketball .row.gameImage img {
    max-width: 200px;
} */


/* commented to increase game area */


/* .letsplaybasketball .game_div canvas {
    border: 9px solid #dbc111;
} */

.portrait .letsplaybasketball {
    display: flex;
    flex-direction: column;
}

.letsplaybasketball .pop_left_layer {
    padding-top: 0 !important;
}

@media (max-width: 1365px) {
    #billBoard {
        /* overflow-y: visible; */
    }

    .letsplaybasketball .bottomStringRowBasketball {
        width: 60%;
    }
}

@media (max-width: 1300px) {
    .landscape #calenderFlipCardMainDiv h1 {
        font-size: 10vmin;
    }

    .carousalFlipCard .main-flip .cell-space .cardfront-text span {
        font-size: 7vw;
    }

    #wordLadder .tick-class {
        top: -14%;
        right: -8%;
    }

    .landscape .interactivity .flashcard-turnOver .flip-divider,
    .landscape .interactivity .flip-divider {
        height: 40vh !important;
        max-height: 306px !important;
    }

    .culminationImgDivs {
        width: 90%;
        margin: auto;
    }

    .landscape .interactivity .flashcard-turnOver .flip-divider,
    .landscape .interactivity .fisrt-sound-pick-wrapper {
        padding: 0 10px;
    }

    .landscape .interactivity .book3-click-flip .testcard1_ff {
        font-size: 5.5vmin;
    }

    .landscape .interactivity .flashcard-turnOver .flip-divider,
    .landscape .interactivity .flip-divider {
        padding: 0 10px;
    }

    .landscape #syllablepick .stars_interactivity {
        margin: 6px !important;
    }

    .landscape .interactivity #dragContainer .click-rating {
        margin-bottom: 20px;
    }

    .landscape .interactivity .audio-text {
        padding: 5px 0px;
        margin: 0;
    }

    .landscape .billboard-words .audio-text {
        padding: 0px;
    }

    .portrait .interactivity .audio-text,
    .portrait .interactivity #billBoard .audio-text {
        padding: 5px 0px;
        margin: 0;
        min-height: 0;
        font-size: 24px;
    }

    .portrait .interactivity .carousel-parent .carousel-text {
        margin-bottom: 5px;
    }

    .portrait .interactivity #billBoard.bill-board-light .audio-text {
        width: 100%;
    }

    /* .interactivity .carousel-parent .carousel-text {
        font-size: 30px;
    } */
    /* commented for consistent font size */
    .landscape .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 65%;
    }

    .landscape .interactivity .align-middle .sentenceSpan {
        max-width: 65%;
    }

    /* zero to remove scroll */
    .landscape #billBoard .flash-card-sq3 .demotrumpCard .level2,
    .landscape #billBoard .flash-card-sq4 .demotrumpCard .level2,
    .landscape #billBoard .flash-card-sq5 .demotrumpCard .level2 {
        font-size: 50px;
        padding: 0 18px !important;
    }

    .landscape #billBoard.bill-board-light .billboardlight-wrap .billboardwords_textsection .level2 {
        font-size: 56px !important;
    }

    .CompanionReaderQuiz .QuestionCnt {
        font-size: 28px;
    }

    .landscape .basket-apple.contractionQuestion {
        margin-top: 25px;
    }

    .landscape .basket-apple {
        width: 33%;
        margin-top: 20px;
    }

    .landscape .three-box-wrapper {
        height: 200px;
    }

    .score-trophy-img-wrap img {
        max-height: 180px;
    }
}


@media (max-width: 1024px) {

    

    /* Added css for SL3-11421 (IPhone 11/Pixel/ Ipad Pro 12.9 (Portrait) : Book 2/8 : Sections color is coming different to menu filter header ) */
    .dialog_bg_color_8.modal .modal-dialog .accordion .accordion__item {
        border-color: #2a4678 !important;
    }

    #firstSoundPick .preroll-text h2.heading {
        font-size: 2.2vmin;
    }

    #billBoard .demotrumpCard span.ng-binding {
        font-size: 6.1vmin;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button i {
        width: 30px !important;
        background-size: 30px !important;
        height: 30px !important;
        margin-right: 9px;
        box-shadow: none;
        background-color: transparent !important;
        position: static;
        border: none;
        filter: invert(0.75);
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        width: 100%;
        flex-direction: row-reverse;
        justify-content: flex-end !important;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    body #letter-sequence .templateContainer .dynamic-layout-letter-sequence .alphabet .aplha.highlight {
        -webkit-text-stroke: 1.5px black !important;
    }

    div#finalPage {
        margin: 90px 0 20px 0;
    }

    .draggable-wrap,
    .source-preview {
        padding: 10px;
        height: 29vh;
        max-width: 183px;
    }

    .interactivityfullScreen .draggable-wrap,
    .interactivityfullScreen .source-preview {
        height: 34vh;
    }

    .CompanionReaderQuiz-wrap {
        width: 85%;
    }

    .CompanionReaderQuiz .QuestionCnt {
        font-size: 24px;
    }

    .CompanionReaderQuiz .controllQuiz button {
        margin: 12px;
    }

    .CompanionReaderQuiz .option-wrap {
        margin-top: 20px;
    }
}

@media (max-width: 1280px) and (max-height: 570px) {
    .landscape .interactivity .carousel-parent .carousel-text {
        min-height: 32%;
    }
}

@media (max-width: 991px) {    
 
   
    
        .portrait #interactivity_div #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word p span.txt {
                font-size: 5.5vw !important;
            }
        
            .portrait #interactivity_div #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word p {
                font-size: clamp(18px, 6vw, 26px) !important;
            }
    body:has(.iphoneLandscape) #syllablepick .vowels-centerlized-wrapper{
        height: calc(100% - 40px) !important;
        margin-bottom: 0 !important;
    }

    body:has(.iphoneLandscape) #syllablepick #syllable_contentbox{
        height: 50vh !important;
    }

    body:has(.iphoneLandscape) #syllablepick_rightsidebar .circle_couting ul li {
        margin: 10px auto;
    }
    #firstSoundPick .eight-falsh-card-wrap {
        /* padding-top: 60px; */
        margin: 0;
    }

    .landscape .clicksoundinteractivity {
        min-height: auto !important;
    }

    .landscape .clicksoundinteractivity .wordbeginingsound .trumpCard_red {
        min-height: auto !important;
    }

    .clicksoundinteractivity .wordbeginingsound {
        height: auto;
    }


    div#finished_interactivity img {
        width: 60%;
    }

    .landscape .pickbeginingwrap {
        min-height: auto;
    }

    .landscape .culminating_div {
        margin-bottom: 0px;
    }

    .landscape #flipping_leatherbook .bookTemplate {
        max-width: 85%;
    }

    .landscape .CulminatingPick .pickbeginingwrap .dagable-names {
        margin: 10px 0 15px 0;
    }

    .portrait .CulminatingPick .container-fluid .row.mt-3k {
        width: 90%;
    }

    .landscape #fishingContainerGame {
        width: 100%;
        height: 95%;
    }

    .landscape .flex-item-div {
        right: 6%;
    }

    .landscape .interactivity .carousel-parent .carousel-text {
        min-height: 27%;
    }

    .fullscreenEL {
        width: 30px;
        height: 30px;
        background-size: contain;
    }
   .portrait .interactivity #flipping_leatherbook .align-middle .sentenceSpan {
       font-size: 12px !important;
   }

   .portrait .interactivity .align-middle .sentenceSpan,
   .portrait .interactivity #flipping_leatherbook .align-middle .sentenceSpan,
   .portrait .interactivity #billBoard .align-middle .sentenceSpan {
       max-width: 87%;
       padding: 0px 3px;
   }

    .landscape .click-rating .bullets {
        font-size: 4vmin;
    }

    .portrait .carousalFlipCard .container.calendar-row .row {
        width: 90%;
    }

    .landscape .carousalFlipCard .container.calendar-row .row {
        width: 93%;
        padding: 0;
    }

    .portrait #calenderFlipCardMainDiv .upsideDownFlip .front h1,
    .portrait #calenderFlipCardMainDiv .container.calendar-row .main-flip.book-clips.upsideDownFlip .scene.flipallcard .front h1,
    .portrait .carousalFlipCard .main-flip.noCalendarFlip .cell-space.cardUp.width-85 .cardfront-text span {
        padding-left: 5px;
    }

    .landscape .upsideDownFlip .spiral,
    .landscape .upsideDownFlip .spiral-right {
        height: 29px;
        top: -16px;
        left: 0;
        right: 0;
        margin: auto;
        width: 95%;
    }

    .landscape .one-card .upsideDownFlip .spiral,
    .landscape.one-card .upsideDownFlip .spiral-right {
        height: 25px !important;
        top: -14px !important;
    }

    .landscape #calenderFlipCardMainDiv .three-cards-wrapper .upsideDownFlip .spiral,
    .landscape #calenderFlipCardMainDiv .three-cards-wrapper .upsideDownFlip .spiral-right {
        height: 22px;
    }

    .landscape #calenderFlipCardMainDiv .three-cards-wrapper .upsideDownFlip .front h1 {
        font-size: 3vw !important;
    }

    .landscape .wordCardDiv {
        margin-top: 5px !important;
    }

    .landscape .col-xs-5.main-flip.book-clips.upsideDownFlip .scene .front .spiral {
        width: 96%;
    }

    /* Reduced font size for fix SL3-9151 issue */
    .landscape #billBoard.bill-board-light .billboardlight-wrap .billboardwords_textsection .level2 {
        font-size: 30px !important;
        letter-spacing: 0;
    }

    #billBoard.bill-board-light .billboardlight-wrap .billboardwords_textsection .level2 span {
        letter-spacing: 0;
        margin: 0;
        font-size: 30px !important;
    }

    .landscape #root #billBoard.bill-board-light .billboardlight-wrap .billboardwords_textsection .textFirst .level2 span {
        height: 100%;
    }

    .portrait #billBoard.bill-board-light .demotrumpCard span {
        font-size: 30px !important;
    }

    .landscape .upsideDownFlip .scene,
    .landscape .noCalendarFlip {
        margin: 7px auto 0 auto;
    }

    .landscape .carousalFlipCard .container.calendar-row .upsideDownFlip .scene,
    .landscape .carousalFlipCard .container.calendar-row .noCalendarFlip .cell-space {
        height: calc(100% - 10px) !important;
    }

    .landscape #calenderFlipCardMainDiv .main-flip .cell-space,
    .landscape #calenderFlipCardMainDiv .width-100,
    .landscape .main-flip.upsideDownFlip:nth-child(2) .scene.flipallcard {
        width: 90%;
    }

    .portrait #calenderFlipCardMainDiv .main-flip .cell-space .cardfront-text span {
        font-size: 7vw;
    }

    .portrait #calenderFlipCardMainDiv h1 {
        font-size: 6vw;
    }

    .landscape #calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.flipallcard .front h1.mutated-word {
        font-size: 4.5vw !important;
    }

    .landscape #calenderFlipCardMainDiv .upsideDownFlip .front h1,
    .landscape #calenderFlipCardMainDiv .container.calendar-row .main-flip.book-clips.upsideDownFlip .scene.flipallcard .front h1,
    .landscape .carousalFlipCard .main-flip.noCalendarFlip .cell-space.cardUp.width-85 .cardfront-text span {
        padding-left: 5px;
    }

    .portrait #interactivity_div .leftSideBar img {
        max-width: 60% !important;
        /* Changed 65% to 60% as the logo in kindle portrait wasn't coming properly also resulting in a portion of timer hide behind the footer */
    }

    .portrait .gameContainer #optionalScreen .optionalGameLogo.gameLogo_3 {
        width: 196px;
        height: 131px;
    }

    .portrait .gameContainer #optionalScreen .optionalGameLogo.gameLogo_2 {
        width: 234px;
        height: 122px;
    }

    .landscape .gameContainer #optionalScreen .optionalGameLogo.gameLogo_3 {
        width: 88px;
        height: 47px;
    }

    .landscape .gameContainer #optionalScreen .optionalGameLogo.gameLogo_2 {
        width: 100px;
        height: 43px;
    }

    .landscape .CulminatingPick .alphabet-div .form-group input {
        height: 32px;
        font-size: 14px;
        margin-bottom: 0;
    }

    .landscape .CulminatingPick .culminatingWrdImg {
        height: 111px !important;
    }

    .landscape .interactivityfullScreen .CulminatingPick .culminatingWrdImg {
        height: 160px !important;
    }

    .landscape .CulminatingPick .dagable-names ul li,
    .portrait .CulminatingPick .dagable-names ul li {
        font-size: 14px;
        padding: 0px 14px;
    }

    .landscape .count-syllabus .audio-text.visibilityHidden {
        display: none;
    }

    .landscape .count-syllabus .p-25,
    .landscape .culminating_div {
        float: left;
        width: 33.33%;
    }

    .landscape .interactivityfullScreen .culminating_div {
        padding: 0px 15px;
    }

    .landscape .syllabus-image {
        height: 83px !important;
    }

    .landscape .syllabus-div .steps ul li {
        padding: 6px 14px;
    }

    .landscape #fisrt-sound-pick {
        min-height: auto;
    }

    .landscape #calenderFlipCardMainDiv .flipcardInteractivity {
        min-height: auto;
    }

    .landscape div#calenderFlipCardMainDiv,
    .landscape div#calenderFlipCardMainDiv div#finished_interactivity {
        min-height: auto;
        height: 100%;
    }

    .landscape .pickthewordinteractivity .cell-space {
        width: 25vh !important;
        height: 27vh !important;
    }

    /* .landscape .pick-the-word.book3-click-flip .flash-card-table .cell-space {
        width: 50vh !important;
        height: 34vh !important;
    } */
    .landscape .consonanat_pick .flash-card-table .cell-space {
        width: 20vh !important;
        height: 25vh !important;
    }

    #pickWrdScreenchnge .flip-divider {
        width: 25%;
    }

    .landscape .leather-book.BookWood {
        overflow-y: auto;
    }

    .gameinstructpglayernxtbtnimg {
        width: 210px;
        height: 210px;
    }

    .landscape .poptheballoonMainBackground .popgameplaylvlbtnimg {
        width: 100%;
    }

    .landscape .poptheballoonMainBackground .startshoot_go_pg1 {
        width: 100%;
    }

    .portrait .poptheballoonMainBackground .rightSideBar .row,
    .portrait .lgfmainclass.gameWrapper .rightSideBar .row {
        width: 33%;
    }

    .landscape #abcBingoMainDiv .abcgame_bingoi {
        width: 38px;
        height: 50px;
    }

    .landscape #abcBingoMainDiv .bingo-buttons:before {
        width: 18px;
        height: 18px;
        left: 29px;
    }

    .landscape #abcBingoMainDiv .abcgame_bingomatrix {
        padding: 8px 22px;
        font-size: 19px;
        height: auto !important;
    }

    .landscape #abcBingoMainDiv .abcgame_bingohomebuttons.flex-30 input.abcgame_bingomatrix {
        font-size: 15px;
        padding: 8px 12px;
        text-indent: 33px;
        height: auto !important;
    }

    .landscape #abcBingoMainDiv .abcgame_bingohomebuttons.flex-30 .bingo-buttons:before {
        width: 14px;
        height: 14px;
        left: 19px;
    }

    #abcBingoMainDiv .abcgame_bingoflipcard {
        font-size: 20px;
    }

    #abcBingoMainDiv .abcgame_bingoflipcard.abcgame_bingoflipcard5 {
        width: calc(20% - 12px);
        height: calc(20% - 12px);
        font-size: 25px;
    }

    .portrait #abcBingoMainDiv .abcgame_bingoContainerrow {
        display: flex;
        flex-direction: column;
    }

    .landscape .abcgame_abcpickrecommendedgame button {
        width: 104px;
        height: 100px;
    }

    .landscape .gameContainer .abcgame_abcpickoptionalgamelist button {
        width: 45px;
        height: 25px;
    }

    .landscape .quizz_reader .col-md-12 {
        display: flex;
        align-items: center;
    }

    .abcgame_bingoscoreword,
    .gameContainer .abcgame_bingoscoreno {
        font-size: 14px;
    }

    .landscape .gameContainer .abcgame_bingooverlay .abcgame_bingoScoreboard {
        height: 68%;
    }

    .portrait .gameContainer .abcgame_bingooverlay .abcgame_bingoScoreboard {
        height: 55%;
    }

    .landscape .gameContainer .abcgame_abcpickoptionalgamelist button {
        bottom: 16px;
    }

    .landscape .gameBody .contentBox img {
        width: 100%;
        object-fit: fill;
        height: 100%;
    }

    /* .landscape #abcMatchMainBody .abcgame_abcMatchWelcomePage {
        height: 90%;
    } */
    .landscape .gameContainer input.abcgame_scoredetailbtn,
    .landscape .gameContainer input.abcgame_scoredetailswrapbtn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .landscape .abcgame_bingoscoreword {
        font-size: 12px;
    }

    .landscape .abcgame_bingoscorewordnoscorewrap {
        width: 93%;
    }

    .landscape .gameContainer .abcgame_bingoscoreno {
        line-height: 30px;
        font-size: 18px;
    }

    .landscape .gameContainer .abcgame_closescorebingo {
        width: 40px;
        height: 40px;
    }

    /*ABC <match Css For landscape */
    .landscape #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:first-child .abcgame_abcpick_imgbox {
        padding: 10px 0 0 0;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:first-child .abcgame_abcpick_card {
        height: calc(50% - 12px);
        width: calc(20% - 10px);
        margin: 0 5px 10px 5px !important;
    }

    #abcMatchMainBody .abcgame_abcpick_card {
        min-height: 0;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) .abcgame_abcpick_card {
        height: calc(50% - 11px);
        width: calc(20% - 10px);
        margin: 0 5px 10px 5px !important;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) .abcgame_abcpick_gametypeHead {
        padding: 6px 0 0 0;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) .abcgame_abcpick_imgbox.abcgame_abcpick_imgbox2 {
        padding: 6px 0;
        height: calc(100% - 19px);
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_card_back .abcgame_abcpick_box_word {
        font-size: 23px;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_matchHead {
        width: 160px;
        padding: 3px 0 !important;
        height: 44px;
        top: 7px;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_matchHeadContent {
        font-size: 11px;
        color: #fff;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_matchHeadContent div {
        font-size: 12px;
        line-height: 10px;
        width: auto !important;
    }

    #abcMatchMainBody .abcgame_abcpick_gametypeHead {
        font-size: 13px;
    }

    .landscape .gameBody .startletsgofishingrow .abcgame_SMtimermodeslow {
        box-shadow: 0px 5px 0px 1px #05479b;
    }

    .landscape .gameBody .startletsgofishingrow .abcgame_SMtimermodeslow span {
        box-shadow: 0px 2px 1px 0px rgb(25, 152, 255);
    }

    .landscape .gameBody .startletsgofishingrow .abcgame_SMtimermoderegular {
        box-shadow: 0px 5px 0px 1px #9e1412;
    }

    .landscape .gameBody .startletsgofishingrow .abcgame_SMtimermoderegular span {
        box-shadow: 0px 2px 1px 0px rgb(255, 64, 80);
    }

    .landscape .gameBody .startletsgofishingrow .abcgame_SMtimermodefast {
        box-shadow: 0px 5px 0px 1px #0f9325;
    }

    .landscape .gameBody .startletsgofishingrow .abcgame_SMtimermodefast span {
        box-shadow: 0px 2px 1px 0px rgb(64, 233, 82);
    }

    .landscape .gameBody .abcgame_abcpickoptionaltitle {
        height: 29px;
        width: 141px;
    }

    .landscape .gameContainer .abcgame_abcpickoptionalgamewrap {
        height: calc(36% - 29px);
    }

    .landscape .interactivity .flashcard-turnOver .flip-divider,
    .landscape .interactivity .flip-divider {
        height: 35vh;
        min-height: auto;
        padding: 0 13px;
    }

    .landscape .interactivity.interactivityfullScreen .flip-divider {
        height: 50vh !important;
    }

    .landscape .interactivity .flash-card-row {
        display: flex;
    }

    .landscape #play_interactivity_pw_pw .pickthewordinteractivity {
        margin-bottom: 0;
    }

    .landscape .interactivity i.icon-volume {
        height: 35px;
        width: 35px;
        min-height: 35px;
        min-width: 35px;
    }

    .landscape .interactivity div .instruction_text {
        margin: 0;
    }

    .landscape .interactivity .click-rating .circle_new {
        width: 20px;
        height: 20px;
    }

    .landscape .interactivity .repeat-icon {
        line-height: 22px;
        font-size: 11px;
    }

    .landscape .opposite_component .repeat_button_audio .repeat-icon {
        padding: 1px 16px;
    }

    .landscape .interactivity .cell-space .fa-check {
        right: -16px;
        top: -17px;
        font-size: 15px;
        width: 30px;
        height: 30px;
        line-height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .interactivity #consonant_pick .audio-text span.repeat-icon {
        padding: 0px 14px;
    }

    .letsplaybasketball .bottom_text-basketball h2 {
        font-size: 12px;
        line-height: 17px;
    }

    .landscape .letsplaybasketball .row.gameWrapper.wrapperHeight {
        min-height: 100%;
    }

    .landscape .gameBody .letsplaybasketball .leftSideBar img {
        max-width: 72% !important;
    }

    .landscape .letsplaybasketball .gameWrapper.row,
    .landscape .letsplaybasketball .row.gameWrapper.wrapperHeight {
        min-height: auto;
    }

    .landscape .gameBody .letsplaybasketball .leftSideBar .row {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .landscape .flashcard-turnOver .flashcardContainr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .landscape #interactivity_div .connectthedots-startgame-innerwrapper .game_div {
        height: 78ch;
        width: 100%;
        min-width: 600px;
    }

    .landscape #interactivity_div .connectthedots-container .connectthedots-startgame-innerwrapper {
        height: 58ch;
        width: 100%;
        transform: scale(0.5);
        min-width: 600px;
    }

    .interactivity .click-rating {
        margin-bottom: 10px;
    }

    .landscape .interactivity .click-rating {
        margin: 10px 0 !important;
    }

    .landscape .right_column {
        top: 12px;
    }

    .landscape #syllablepick .right_column {
        top: 2px;
    }

    .landscape .refresh_content {
        top: 12px;
    }

    .landscape .opposite_component .fa-star,
    .landscape .opposite_component .fa-star-o,
    .landscape .instruction_text .fa-info-circle {
        font-size: 19px;
    }

    .interactivity .right_column:before {
        width: 13px;
        height: 13px;
        border-radius: 100%;
    }

    .landscape #syllablepick .right_column:before {
        height: 16px;
    }

    .landscape #syllablepick .infoIcon i {
        font-size: 23px;
    }

    .landscape .interactivity #fisrt-sound-pick .audio-text {
        padding: 10px 0;
        margin: 0;
        font-size: 0 !important;
    }

    .landscape .interactivity .audio-text {
        padding: 5px 0px;
        margin: 0;
        font-size: 15px;
    }

    .landscape .interactivity #flipping_leatherbook .audio-text {
        padding: 5px 0px;
    }

    .landscape .interactivity #flipping_leatherbook .audio-text {
        font-size: 13px !important;
    }

    .interactivity .billboard-screen-change #billBoard .audio-text {
        width: 100% !important;
        height: auto;
    }

    .landscape .billboard-screen-change #billBoard #carousel .board-effect .sq-animate2 {
        width: 52%;
    }

    .landscape .interactivity #billBoard .audio-text {
        z-index: 9;
        font-size: 13px;
    }

    .landscape .board-stand {
        max-width: 90%;
    }

    .landscape .interactivityfullScreen .board-stand {
        max-width: 88%;
        height: 72px;
    }

    .landscape .interactivity #billBoard .align-middle .sentenceSpan {
        max-width: 60%;
    }

    .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 66%;
    }

    .portrait .gameContainer .rightSideBar #rhs-canvas {
        width: 140px;
        height: 140px;
    }

    .landscape .abcgame_abcpick_gotext {
        font-size: 110px;
    }

    .landscape .connectthedots-main-wrapperp {
        width: 100%;
    }

    .landscape .interactivity .slow_sound,
    .landscape .interactivity #carousel .carousel-parent .carousel-text .slow_sound {
        width: 35px;
        height: 35px;
        margin-left: 10px;
    }

    .landscape .interactivity .slow_sound i.icon-turtle-slow,
    .landscape .interactivity #carousel .carousel-parent .carousel-text .slow_sound i.icon-turtle-slow {
        width: 35px;
        height: 35px;
    }

    .landscape header.extra .h-left,
    .landscape header.headerfull .h-left {
        padding-left: 0px !important;
    }

    .landscape #play_interactivity_pw {
        min-height: auto;
    }

    .landscape .drag-drop-parent.layout-align-center-center.layout-row {
        height: calc(100% - 74px);
    }

    .landscape .draggable-wrap,
    .landscape .source-preview {
        height: 27vh;
        max-width: 147px;
        min-height: 99px !important;
    }

    .landscape .interactivityfullScreen .draggable-wrap,
    .landscape .interactivityfullScreen .source-preview {
        height: 35vh;
    }

    .landscape .drag-container .dragged-img {
        width: 60%;
    }

    .culminatingWrdImg.correct-Card.disabled {
        border: 2px solid #00a150 !important;
    }

    .landscape .flipbook-viewport .container-flip {
        max-width: 500px;
    }

    #flipping_leatherbook .bookTemplate .fontfaceRed_ADV_CALIBRI:not(.textbook1) {
        letter-spacing: 0px;
    }

    /* start css for billboard portrait mode */
    .portrait #billBoard .twoflash-cont {
        height: 100%;
    }

    .portrait #billBoard.bill-board-light .twoflash-cont {
        height: 100%;
    }

    .portrait .board-stand:before,
    .portrait .board-stand:after {
        width: 87px;
    }

    .portrait .board-stand {
        height: 60px;
        max-width: 80%;
    }

    .interactivity #billBoard .audio-text .align-middle {
        align-items: flex-end;
    }

    .landscape .billboard-screen-change #billBoard .audio-text .align-middle {
        align-items: center !important;
    }

    .landscape .interactivity #billBoard.bill-board-light .audio-text .align-middle {
        align-items: center;
    }

    .portrait #billBoard .twoflash-cont .flash-card-sq5.layout-fill {
        height: 100%;
        min-height: 100%;
    }

    .portrait .interactivity #billBoard .audio-text,
    .portrait .interactivity .billboard-screen-change #billBoard .audio-text .align-middle {
        width: 100%;
    }

    .portrait #billBoard.bill-board-light {
        background-position-y: 26%;
        background-size: 100% 100%;
    }

    .portrait #billBoard.bill-board-light .twoflash-cont .sq-animate2:after {
        right: -30px;
        width: 200px;
        height: 200px;
        top: -192px;
    }

    .landscape #billBoard.bill-board-light {
        background-size: 100%;
        background-position: center;
    }

    .landscape #billBoard.bill-board-light .twoflash-cont {
        height: 100% !important;
    }

    .landscape #billBoard.bill-board-light .twoflash-cont .sq-animate2 {
        max-width: 430px;
    }

    .landscape #billBoard.bill-board-light .twoflash-cont .sq-animate2:after {
        right: -79px;
        width: 50px;
        height: 50px;
        top: 0px;
    }

    .Contraction-wrap img {
        width: 50%;
    }

    .portrait .Contraction-wrap>div {
        font-size: 30px;
    }

    .width100.margin-auto {
        margin: -13px auto 0 auto !important;
    }

    .landscape .three-box-wrapper {
        height: 109px;
    }

    .landscape .basket-apple {
        width: 20%;
        margin-top: 1px;
    }

    .landscape .basket-apple h3 {
        font-size: 17px;
    }

    .landscape .contraction-string h3 {
        font-size: 13px;
    }

    .landscape .basket-apple.contractionQuestion {
        margin-top: 3px;
        margin-left: -8px;
    }

    .landscape .Contraction-wrap>div {
        top: 5px;
        font-size: 13px;
    }

    /* end css for billboard portrait mode */
    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext {
        width: auto !important
    }
}

@media (max-width:750px) {

    .landscape .draggable-wrap,
    .landscape .source-preview {
        max-width: 114px;
    }
}


/* bill board responsive */


/* for all screens */

#billBoard .flash-card-sq3::before,
#billBoard .flash-card-sq3::after,
#billBoard .flash-card-sq4::before,
#billBoard .flash-card-sq4::after,
#billBoard .flash-card-sq5::before,
#billBoard .flash-card-sq5::after {
    display: none;
}

#billBoard #carousel {
    margin: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-wrap: nowrap;
    align-content: space-between;
    flex-direction: column;
    height: 100%;
}


/* billboard flex css  */

#billBoard .board-effect {
    height: auto !important;
    max-height: 76%;
    flex: 1;
}

.billboard-screen-change #billBoard #carousel .board-effect {
    position: relative;
    width: 100%;
    padding: 0;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/theater-curtains.png);
    background-size: 100% 100%;
    background-repeat: repeat;
    background-position-y: bottom;
    margin: auto;
}

#billBoard .board-effect::before,
#billBoard .board-effect::after {
    display: none;
}

#billBoard .boardString {
    bottom: -67px;
}

#billBoard .billboardArrowLeft {
    left: -65px;
}

#billBoard .billboardArrowRgt {
    right: -65px;
}

#billBoard .twoflash-cont {
    height: 100%;
    padding: 0;
}

#billBoard .demotrumpCard img {
    max-width: 100%;
    object-fit: contain;
}

#billBoard .flash-card-sq3 .demotrumpCard .level2,
#billBoard .flash-card-sq4 .demotrumpCard .level2,
#billBoard .flash-card-sq5 .demotrumpCard .level2 {
    font-weight: bold;
    font-size: 60px;
}

#billBoard .flash-card-sq5 .demotrumpCard .level2 {
    top: auto;
}

#billBoard.bill-board-light .billboardlight-wrap .billboardwords_textsection .level2 {
    font-size: 61px;
}

#billBoard .demotrumpCard img {
    border: none;
}

@media only screen and (max-width: 800px) and (min-width: 769px) {
    .level1 {
        width: 100%;
    }
}


/* responsive breakpoints */

@media (min-width: 901px) and (max-height: 600px) {
    #billBoard {
        padding-top: 0;
        /* overflow-y: visible; */
        margin-top: 20px;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    #billBoard {
        margin-top: 0px;
    }

    #wordLadder {
        height: 100% !important;
    }

    .draggable-wrap,
    .source-preview {
        height: 32vh;
    }

    #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:first-child .abcgame_abcpick_imgbox {
        padding: 16px 0 0 0;
    }

    #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) .abcgame_abcpick_gametypeHead {
        padding: 5px 0 0 0;
    }

    #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) .abcgame_abcpick_imgbox.abcgame_abcpick_imgbox2 {
        padding: 5px 0;
    }

    #abcMatchMainBody .abcgame_abcpick_matchHead {
        width: 200px;
        padding: 5px 0 !important;
        height: 52px;
        top: 7px;
    }

    #abcMatchMainBody .abcgame_abcpick_matchHeadContent div {
        font-size: 14px;
        line-height: 14px;
    }

    #abcMatchMainBody .abcgame_abcpickrecommendedgame {
        /* height: 63%; */
    }

    #abcMatchMainBody #game_complete .abcgame_abcpick_eachlevelcongrats {
        height: 151px;
    }

    div#calenderFlipCardMainDiv,
    .landscape #calenderFlipCardMainDiv.envelope-template {
        align-content: normal;
        min-height: 420px;
        height: 100%;
    }

    #calenderFlipCardMainDiv .flipcardInteractivity {
        min-height: 477px;
    }

    div#calenderFlipCardMainDiv #finished_interactivity {
        height: 435px;
    }
}

@media (max-width: 1024px) {
    #billBoard {
        /* margin-top: 40px !important; */
        padding-top: 0 !important;
    }

    .portrait body #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word,
    .portrait body #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p:first-child,
    .portrait body #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p,
    .portrait body #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p span {
        color: #000 !important;
        text-shadow: none !important;
    }
}

@media (max-width: 900px) {
    #billBoard #carousel .level2 {
        left: 0% !important;
    }

    #billBoard {
        width: auto;
        height: auto;
        padding-top: 0 !important;
    }

    .billboard-screen-change #billBoard {
        height: 100%;
        width: 100%;
    }

    #billBoard .flash-card-sq3 .demotrumpCard .level2,
    #billBoard .flash-card-sq4 .demotrumpCard .level2,
    #billBoard .flash-card-sq5 .demotrumpCard .level2 {
        font-size: 45px !important;
    }
}

@media (max-height: 900px) {
    #firstSoundPick .trumpCard_red {
        height: 90% !important;
    }
}

@media only screen and (max-width: 800px) and (min-width: 769px) {
    .level1 {
        width: 100% !important;
    }
}

@media (max-width: 991px) {
    #billBoard .boardString {
        font-size: 14px;
        line-height: 30px;
        max-width: 40%;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
    }

    div#sectionDiv button i.fa.fa-check-circle,
    div#lessonDiv button i.fa.fa-check-circle,
    div#activityListing button i.fa.fa-check-circle,
    .phonicsMain #noanim-tab-example .course-view button i.fa.fa-check-circle,
    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button i.fa.fa-check-circle {
        right: 3px;
    }

    /* Added CSS for Pixel SL3-9217 Flip chart : Before Common Era : word is not coming properly */
    .landscape #calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.flipallcard .front h1.mutated-word .pagespan span {
        font-size: 22px;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .landscape #billBoard {
        margin-top: 0px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 100% !important;
    }

    #billBoard {
        /* margin-top: 60px !important; */
    }

    #billBoard .boardString {
        max-width: 70%;
        padding-top: 4px;
    }
}

.poptheballoonPages img {
    max-width: 100%;
}

.poptheballoonPages .clock canvas {
    /*
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 266px;
 */
}

.gameContainer a:hover {
    text-decoration: none;
}

.gameContainer img {
    max-width: 100%;
}

.gameContainer .rightSideBar #rhs-canvas {
    position: static;
    width: 150px;
    height: 150px;
}

.gameContainer .rightSideBar .timer-wrap {
    position: static;
}

.gameContainer .leftSideBar,
.gameContainer .rightSideBar {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0 20px;
    text-align: center;
}

.gameContainer .contentBox {
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 800px;
}

#Shoottherocket #shoot_game_div {
    margin: 0 auto !important;
    width: 100%;
    height: 100% !important;
}

#Shoottherocket .shootrocketPages {
    height: 100%;
}

.gameContainer .alphabetButton {
    display: inline-block;
    background: rgba(193, 31, 247, 1);
    background: -moz-linear-gradient(top, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(193, 31, 247, 1)), color-stop(100%, rgba(128, 29, 241, 1)));
    background: -webkit-linear-gradient(top, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    background: -o-linear-gradient(top, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    background: -ms-linear-gradient(top, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    background: linear-gradient(to bottom, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c11ff7', endColorstr='#801df1', GradientType=0);
    border: 5px solid #fff;
    border-radius: 50px;
    color: #fff;
    box-shadow: 0 0 10px #3c5ead inset;
    -webkit-box-shadow: 0 0 10px #3c5ead inset;
    width: 100%;
    max-width: 170px;
    margin: auto;
    text-align: center;
    padding: 5px 0;
    font-size: 25px;
}

#Shoottherocket .alphabetButton {
    display: inline-block;
    background: rgba(193, 31, 247, 1);
    background: -moz-linear-gradient(top, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(193, 31, 247, 1)), color-stop(100%, rgba(128, 29, 241, 1)));
    background: -webkit-linear-gradient(top, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    background: -o-linear-gradient(top, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    background: -ms-linear-gradient(top, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    background: linear-gradient(to bottom, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c11ff7', endColorstr='#801df1', GradientType=0);
    border: 5px solid #fff;
    border-radius: 50px;
    color: #fff;
    box-shadow: 0 0 10px #3c5ead inset;
    -webkit-box-shadow: 0 0 10px #3c5ead inset;
    width: 100%;
    max-width: 80%;
    margin: auto;
    text-align: center;
    font-size: 18px;
    padding: 10px 15px;
}

#Shoottherocket .ScoreBar {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

#Shoottherocket #shoot_gamepauselayerdiv {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}


.gameContainer .alphabetButton:hover,
.repeatButton:hover {
    color: #fff;
}

body.gameContainer {
    font-family: "Open Sans", sans-serif;
}

.gameContainer .stars {
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gameContainer .stars li {
    list-style: none;
    max-width: 30px;
    width: 11%;
    /* margin: 2.4%; */
    text-align: center;
    height: auto;
    clear: none;
    font-size: inherit;
}

/* css added for Mobiles | Laptops | Desktops : Phonics : Book 1 (Slider, Billboard words, Drone, Carousel etc): New Layout – Implement bigger fonts (new changes 20 Apr 22) SL3-10470 */

#root .textFirst .template-word p,
#root #spaceshipdiv .textFirst span,
#root .textFirst .contentWord span,
#root #billBoard.bill-board-light .textFirst span.ng-binding span.secondTxt,
#root #billBoard.bill-board-light .textFirst span,
#root .textFirst span,
#root .textFirst span.word-span,
#root .textFirst .menuboardSvg-Text,
#root .textFirst .threeCardContext .fixed-mutated-card,
#root .textFirst .wordCardDiv {
    font-size: 13vw !important;
    color: #333 !important;
    fill: #333 !important;
    line-height: 1;
    height: 50%;
}

#root .Drone-template .textFirst .contentWord span {
    height: 80% !important;
}

#billBoard .billBoardTextbook1 .demotrumpCard .textFirst span {
    line-height: normal;
}

#root .textFirst .menuboardSvg-Text {
    font-size: 15vw !important;
    /* for word Ww the word was coming out of menuboard in TB1*/
}

#root .envelope-template .textFirst .template-word {
    background: #ecf4cf !important;
}

#root .envelope-template .textFirst .template-word {
    background: #ecf4cf !important;
}

#root #spaceshipdiv .textFirst span {
    color: #fff !important;
}

#root .flipbook-viewport .textbook1.pageDiv {
    font-size: 13vw !important;
    height: 100% !important;
}

/* END */

/*05-02-2020 (abcmatch stars)*/

.gameContainer .stars li i {
    font-size: 25px;
    color: #ba6307;
    -webkit-text-stroke: #ba6307;
}

.gameContainer .contentBox img {
    width: 100%;
    object-fit: fill;
}

.gameContainer .abcgame_sm_drop .abcgame_dropimgwrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.gameContainer .controlButtons ul {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.gameContainer .gameWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.portrait .gameContainer .gameWrapper {
    flex-wrap: wrap;
    align-content: space-evenly;
}

.gameWrapper,
.row.abcSoundMatchWrapper {
    overflow: hidden;
}

.gameContainer .controlButtons ul li {
    display: inline-block;
    width: 33%;
    max-width: 44px;
    height: 44px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid;
    position: relative;
    box-shadow: 0 4px 5px #737373;
    -webkit-box-shadow: 0 4px 5px #737373;
    margin: 3px;
    cursor: pointer;
}

.gameContainer .controlButtons ul li i {
    color: #fff;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    cursor: pointer;
}

.gameContainer .infoIcon {
    background: #105fce;
    border-color: #013886;
}

#syllablepick .infoIcon {
    background: none !important;
    border-color: transparent !important;
    display: flex;
    flex-direction: column;
}

.gameContainer .playIcon {
    background: #f1661c;
    border-color: #a03800;
}

.gameContainer .repeatIcon {
    background: #f11c29;
    border-color: #b1000b;
}

.gameContainer .repeatButton {
    background: #2f88f7;
    border: 2px solid #3a3e39;
    border-radius: 50px;
    color: #fff;
    box-shadow: 0 0 10px #0068f7 inset;
    -webkit-box-shadow: 0 0 10px #0068f7 inset;
    width: 100%;
    max-width: 200px;
    margin: auto;
    text-align: center;
    padding: 5px 0;
    font-size: 15px;
    display: block;
}

.gameContainer,
.gameContainer .gameWrapper {
    height: 100% !important;
    width: 100%;
    padding: 0;
}

.shootrocketPage6.gameContainer {
    overflow-y: auto;
}

.connectDotWrapper {
    /* height: 600px !important; */
}

.landscape .row.gameWrapper.-btnabcgamebingo {
    width: auto;
}

.landscape .poptheballoonMainBackground.gameBody .row.gameWrapper {
    width: auto;
}

.gameContainer .clock {
    text-align: center;
}

div#fishingContainerGame {
    width: 100%;
    height: 95%;
}

.gameContainer #fishingContainerGame #game_div,
div#fishingContainerGame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gameContainer #game_div {
    /* max-height: 600px; */
    height: 100%;
    width: 100%;
}

.gameContainer.letsplaybasketball #game_div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#interactivity_div .connectthedots-startgame-innerwrapper {
    height: 100%;
}

.menuDialog.modal-dialog .modal-title {
    display: block;
}

.gameContainer .mode {
    text-align: center;
    color: #000;
    font-size: 22px;
    margin: 18px auto 0 auto;
    font-weight: bold;
}

.gameContainer .graphics img {
    margin: auto;
}

.gameContainer .timer {
    background: #072157;
    color: #fff;
    font-size: 22px;
    text-align: center;
    width: 150px;
    padding: 5px 0;
    margin: auto;
}

.leftPanelName {
    background: linear-gradient(to bottom, rgba(193, 31, 247, 1) 0%, rgba(128, 29, 241, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c11ff7', endColorstr='#801df1', GradientType=0);
    border: 5px solid #fff;
    border-radius: 50px;
    color: #fff;
    box-shadow: 0 0 10px #3c5ead inset;
    -webkit-box-shadow: 0 0 10px #3c5ead inset;
    width: 100%;
    max-width: 170px;
    margin: auto;
    text-align: center;
    padding: 5px 0;
    font-size: 25px;
}

.abcgame_bingorepeattelling {
    background-color: deeppink;
    border: 5px solid #fff;
    border-radius: 50px;
    color: #fff;
    width: 100%;
    max-width: 170px;
    margin: auto;
    text-align: center;
    padding: 5px 0;
}


/***** abc match css start**/

.img.abcgame_abclogo {
    width: 100% !important;
}

.abcgame_abcpick_letterSoundWrap {
    width: 100%;
    margin: 0;
}


/***** abc match css end **/


/* 06-01-2019 */


/* pop the balloon */


/* pop the balloon */


/*
  .xfact {
    width: 100%;
}
.bgclass_game {
    width: 100%;
}
#balloonContainerGame {
    width: 100%;
}

.pop_left_layer .leftPanelName{
    position: relative;
}
.pop_left_layer  .lvlmsg {
    font-size: 18px  !important;
    width: max-content;
    padding-left: 10px;
}
.pop_left_layer .lvltxt {
    font-size: 18px  !important;
    position: absolute;
    left: 55%;
    bottom: 7px !important;
}
#gamestarsrating {
    width: 100%;
    text-align: center;
    margin-top: 0px !important;
}

.gameDivfull {
    width: 100%;
    margin: 0;
}
.popLogoleft img {
    width: auto;
    position: relative;
    right: 30px;
}
.pop_left_layer{
    margin:0 auto;
    margin-top:10px;
}
.pop_left_layer .leftPanelName .lvlmsg {
    font-size: 25px;
    width: max-content;
    padding-left: 10px;
}
.pop_left_layer .leftPanelName .lvltxt {
    left: 55%;
    bottom: 10%;
    font-size: 25px;
}
.rightSideBar  .clock canvas {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 266px;
}

.pop_left_layer .leftPanelName {
    position: relative;
}
.hide-popthebaloon-for-mobile #gamestarsrating {
        position: relative;
}
 */


/* Responsive Breakpoints */


/* less than 576px */

@media (min-width:275px) and (max-width:319.99px) {
    .portrait .abcgame_horizontalbottom:before {
        width: 75% !important;
    }

    .portrait .menuDialog.modal-dialog .modal-body {
        height: 380px;
        min-height: 320px;
    }

    .portrait .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 50%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .landscape .billboard-words #billBoard {
        min-height: 219px !important;
        overflow-y: auto;
    }

    .phonicsMain .modal-header,
    .modal_content_wrapper {
        border-radius: 25px;
    }

    .phonicsMain .bgColor_on_currentModal.active_3.modal-header {
        border-radius: 25px 25px 0 0;
    }

    .phonicsMain .modal-dialog .modal-content {
        border-radius: 45px;
    }

    .portrait .course_icon,
    .portrait .lesson_icon,
    .portrait .video_icon,
    .portrait .interactivity_icon,
    .portrait .game_icon,
    .portrait .story_icon,
    .portrait .quizz_icon,
    .portrait .book_icon {
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 5px;
        border: none;
        background-color: transparent;
        border-radius: 0;
        width: 19px !important;
        height: 19px !important;
        background-size: 27px !important;
    }

    .portrait .phonicsMain .ttheader {
        display: flex;
        position: relative;
        width: 100%;
        transform: scale(1);
        margin-left: auto;
        padding: 0;
        align-items: center;
        justify-content: space-between;
    }

    .portrait .head-level1 {
        top: 40px !important;
        left: -60px;
        position: absolute;
    }

    .portrait .head-level1 .menuTabHeader {
        width: 25%;
    }

    .portrait .phonicsMain .menuTabHeader li button {
        border-radius: 0;
        padding-bottom: 0px;
        width: 42px !important;
        height: 48px !important;
        border-right: none;
        min-width: 10px;
        margin-top: 0px;
    }

    .portrait .menuTabHeader li {
        margin: 10px 0 0 0;
    }

    .portrait button.active.md-button.md-ink-ripple.activeLesson {
        border-radius: 0;
        min-width: 56px;
        right: 0;
        box-shadow: none !important;
        background: #fff !important;
        margin-left: 4px;
    }

    .portrait button.active.textbook_1,
    .portrait button.active.textbook_1 span.ng-binding {
        color: #193463 !important;
        border-color: #193463 !important;
    }

    .portrait button.active.textbook_2,
    .portrait button.active.textbook_2 span.ng-binding {
        color: #e72426 !important;
        border-color: #e72426 !important;
    }

    .portrait button.active.textbook_3,
    .portrait button.active.textbook_3 span.ng-binding {
        color: #58b950 !important;
        border-color: #58b950 !important;
    }

    .portrait button.active.textbook_4,
    .portrait button.active.textbook_4 span.ng-binding {
        color: #f36212 !important;
        border-color: #f36212 !important;
    }

    .portrait button.active.textbook_5,
    .portrait button.active.textbook_5 span.ng-binding {
        color: #2a7aba !important;
        border-color: #2a7aba !important;
    }

    .portrait button.active.textbook_6,
    .portrait button.active.textbook_6 span.ng-binding {
        color: #9e3e93 !important;
        border-color: #9e3e93 !important;
    }

    .portrait button.active.textbook_7,
    .portrait button.active.textbook_7 span.ng-binding {
        color: #3eab4e !important;
        border-color: #3eab4e !important;
    }

    .portrait button.active.textbook_8,
    .portrait button.active.textbook_8 span.ng-binding {
        color: #3a62a6 !important;
        border-color: #3a62a6 !important;
    }

    .portrait .menuTabHeader li button:before {
        display: none !important;
    }

    .portrait .menuTabHeader li {
        display: block !important;
        width: 20%;
        margin-top: 0px;
        height: 40px;
    }

    .portrait .phonicsMain .ttheader .nav-bar-btn {
        margin: 3px 3px 0 !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }

    .portrait .phonicsMain .ic-text {
        font-size: 8px;
        display: none;
    }

    .portrait .phonicsMain .modal-dialog .modal-content {
        border-width: 10px;
    }
}

@media (min-width:320px) and (max-width:365px) {
    .portrait .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 50% !important;
    }

    #appBody .portrait .course_icon,
    #appBody .portrait .lesson_icon,
    #appBody .portrait .video_icon,
    #appBody .portrait .interactivity_icon,
    #appBody .portrait .game_icon,
    #appBody .portrait .story_icon,
    #appBody .portrait .quizz_icon,
    #appBody .portrait .book_icon {
        background-size: 34px !important;
        width: 24px !important;
        height: 24px !important;
    }

    .portrait .bill-board-light .align-middle .sentenceSpan {
        max-width: 50% !important;
    }

    .portrait .modal .modal-dialog {
        margin-left: 15px;
    }

    .portrait #syllablepick .syllable_div {
        height: 72% !important;
        width: 85%;
    }

    .portrait #appBody .phonics_popup {
        display: flex;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        height: 100%;
    }

    .portrait .menuDialog.modal-dialog .modal-body {
        height: 380px !important;
        min-height: 320px;
    }

    .portrait .abcgame_horizontalbottom:before {
        width: 85% !important;
    }
}

@media (min-width: 320px) and (max-width: 575.98px) {
    .portrait .phonicsMain #example-custom-modal-styling-title {
        padding-left: 0px !important;
        font-size: 30px !important;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button i {
        filter: brightness(0.2) invert(0) !important;
    }

    /* added css for icon  multicolor issue  */
    .portrait .fa-check-circle:after {
        width: 10px;
        height: 12px;
    }

    /* end */

    /* added css for SL3-10610 ( Pixel 3-1>4>3>2->word should be spaced from top) */
    .portrait #root .ancient-scroll-wrapper .textFirst .contentWord span {
        font-size: 11vw !important;
    }

    /* end */

    /* abc bingo css */

    .portrait #abcBingoMainDiv .connectthedots-game-instruction-wrapper ul li {
        font-size: 16px !important;
    }

    /* end   */
    .portrait .letter-sequence .image {
        object-fit: contain;
    }

    .portrait .letter-sequence .imgHolder {
        margin-left: 0 !important;
        margin-bottom: 15px;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 195px;
        min-height: 185px;
        width: 85%;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box img {
        height: 100% !important;
    }

    .portrait #root {
        height: 100% !important;
    }

    .portrait #appBody .LoginModal .btn-close {
        top: -25px !important;
        right: -35px !important;
    }

    .portrait #medalDialogModal .modal-dialog {
        margin: auto;
    }

    .phonicsMain #medalDialogModal .modal-dialog .modal-content {
        width: 100%;
        border-radius: 0;
        border-width: 3px;
    }

    .phonicsMain #medalDialogModal li {
        text-align: center;
        margin-bottom: 15px;
    }

    .portrait .phonicsMain #medalDialogModal li span:first-child {
        font-size: 17px;
        line-height: normal;
    }

    .portrait #footer-menu {
        margin-right: 5px;
        margin-left: 5px;
    }

    #footer-recording-menu,
    #autoToggleInteractivity {
        transform: scale(0.7) !important;
    }

    .portrait #autoToggleInteractivity {
        width: 35px;
    }

    .portrait .ereader-right-footer-wrapper .layout-row.recording-wrap {
        margin-right: 0 !important;
    }

    .portrait .recording-timer {
        margin: 0 0px 0 0 !important;
    }

    .portrait #lesson_iframe.Phonics_ereader .content_ereader_modify .iframe_ereader {
        height: calc(55% - 35px);
        margin-bottom: 20px;
        width: 100%;
    }

    .portrai #lesson_iframe.Phonics_ereader {
        width: 100%;
    }

    .portrait #lesson_ifr.ebookParentDiv {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .phonicsMain #medalDialogModal .modal-dialog .modal-content .modal-header {
        border-radius: 0;
    }

    .portrait #smdraghb_0:before {
        width: 68px !important;
    }

    .portrait .abcgame_horizontalbottom:before {
        width: 94% !important;
        transform: scale(0.75);
    }

    .portrait .modal-header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .portrait .interactivity .billboard-screen-change #billBoard .align-middle .sentenceSpan {
        max-width: 61%;
        border-radius: 3px;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .interactivity .billboard-screen-change .click-rating {
        margin: 8px 0 !important;
    }

    .landscape .sentenceSpan {
        border-radius: 3px;
    }

    .portrait .menuDialog.modal-dialog .modal-body {
        height: 551px;
    }

    .portrait .course_icon,
    .portrait .lesson_icon,
    .portrait .video_icon,
    .portrait .interactivity_icon,
    .portrait .game_icon,
    .portrait .story_icon,
    .portrait .quizz_icon,
    .portrait .book_icon {
        background-size: 28px;
        background-repeat: no-repeat;
        width: 35px;
        height: 35px;
        background-position: center;
        margin-bottom: 5px;
        border: none;
        border-radius: 0;
        background-color: transparent;
    }

    .portrait .phonicsMain #noanim-tab-example a i {
        width: 30px;
        height: 30px;
        box-shadow: none;
        background-color: transparent !important;
        position: static;
        border: none;
        filter: invert(0.75);
    }

    /* added css for portrait device icon color change of progress tracking  */
    .portrait .phonicsMain #noanim-tab-example a button i.fa.fa-check-circle {
        filter: invert(0.0) !important;
    }

    /* end */
    .portrait .phonicsMain #noanim-tab-example ul.menuList button {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* modified css for tick icon touching the lesson name SL3-8256 */
    .portrait .phonicsMain #noanim-tab-example a button {
        flex-wrap: wrap;
        padding: 7px 20px 7px 10px;
    }

    h3.u-position-relative .fa.fa-check-circle.in-progress-status {
        margin-left: 7px;
        font-size: 15px;
    }

    /* end */
    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button {
        padding: 0 5px !important;
        font-size: 10px;
        justify-content: flex-end !important;
        color: #193463;
        width: 100% !important;
        flex-wrap: unset;
        line-height: 17px;
    }

    .portrait .phonicsMain #noanim-tab-example ul.menuList li.menuItem a button i {
        margin-right: 0px;
    }

    .portrait .phonicsMain #noanim-tab-example .lesson-number {
        position: static;
        margin-left: 6px;
    }

    .portrait .phonicsMain #noanim-tab-example a span.interactivity-name {
        margin-left: 0;
    }

    .portrait .phonicsMain .ttheader {
        display: flex;
        position: relative;
        width: 100%;
        transform: scale(1);
        margin-left: auto;
        padding: 0;
        align-items: center;
        justify-content: space-between;
    }

    .portrait .head-level1 {
        top: 40px !important;
        left: -55px !important;
    }

    .portrait .head-level1 .menuTabHeader {
        width: 25%;
    }

    .portrait .phonicsMain .menuTabHeader li button {
        border-radius: 0;
        padding-bottom: 0px;
        width: 45px !important;
        height: 40px !important;
        border-right: none;
        min-width: 10px;
        margin-top: 0px;
        font-size: 25px !important;
    }

    .portrait .menuTabHeader li {
        margin: 10px 0 0 0;
    }

    .portrait button.active.md-button.md-ink-ripple.activeLesson {
        border-radius: 0;
        min-width: 50px;
        right: 0;
        box-shadow: none !important;
        background: #fff !important;
        margin-left: 6px;
    }

    .portrait .phonicsMain .ttheader .nav-bar-btn.active {
        padding: 2px;
    }

    .portrait .phonics_popup .modal_content_wrapper md-icon {
        background-color: transparent;
        border: none;
        width: 27px !important;
        height: 27px !important;
        background-size: 30px !important;
    }

    .portrait .phonicsMain .modal-header {
        padding: 16px 8px;
        background: #193463 !important;
    }

    .portrait button.active.textbook_1,
    .portrait button.active.textbook_1 span.ng-binding {
        color: #193463 !important;
        border-color: #193463 !important;
    }

    .portrait button.active.textbook_2,
    .portrait button.active.textbook_2 span.ng-binding {
        color: #e72426 !important;
        border-color: #e72426 !important;
    }

    .portrait button.active.textbook_3,
    .portrait button.active.textbook_3 span.ng-binding {
        color: #58b950 !important;
        border-color: #58b950 !important;
    }

    .portrait button.active.textbook_4,
    .portrait button.active.textbook_4 span.ng-binding {
        color: #f36212 !important;
        border-color: #f36212 !important;
    }

    .portrait button.active.textbook_5,
    .portrait button.active.textbook_5 span.ng-binding {
        color: #2a7aba !important;
        border-color: #2a7aba !important;
    }

    .portrait button.active.textbook_6,
    .portrait button.active.textbook_6 span.ng-binding {
        color: #9e3e93 !important;
        border-color: #9e3e93 !important;
    }

    .portrait button.active.textbook_7,
    .portrait button.active.textbook_7 span.ng-binding {
        color: #3eab4e !important;
        border-color: #3eab4e !important;
    }

    .portrait button.active.textbook_8,
    .portrait button.active.textbook_8 span.ng-binding {
        color: #3a62a6 !important;
        border-color: #3a62a6 !important;
    }

    .portrait .menuTabHeader li button:before {
        display: none !important;
    }

    .portrait .menuTabHeader li {
        display: block !important;
        width: 20%;
        margin-top: 0px;
        height: 40px;
    }

    .portrait .phonicsMain .ttheader .nav-bar-btn {
        margin: 3px 3px 0 !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        padding: 5px 3px;
    }

    .portrait .phonicsMain .ic-text {
        font-size: 8px;
        display: none;
    }

    .portrait .phonicsMain .modal-dialog .modal-content {
        border-width: 5px;
    }

    .portrait #syllablepick .vowels-centerlized-wrapper {
        height: 100%;
        margin-bottom: 0px;
    }

    .portrait #syllablepick .syllable_div {
        height: 90% !important;
        width: 85%;
    }

    /* syllable-pick */
    #syllablepick .vowels-game-container {
        flex-direction: row !important;
    }

    #syllablepick_lefttsidebar,
    #syllablepick_rightsidebar {
        padding: 0 20px !important;
    }

    #syllablepick_rightsidebar .circle_couting ul li {
        width: 25%;
        margin: 0;
    }

    #syllablepick_rightsidebar .circle_couting ul li>div {
        width: 45px !important;
        height: 45px !important;
        font-size: 25px !important;
    }

    .portrait #syllablepick .interactivityDiv_syllablepick .vowels-centerlized-wrapper #syllablepick_rightsidebar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #syllablepick_lefttsidebar .curve_text_div {
        border-radius: 55px !important;
        border: 5px solid #ba9e2f !important;
        height: 60px !important;
    }

    #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 25px !important;
    }

    #syllablepick_lefttsidebar,
    #syllablepick_rightsidebar {
        width: 100%;
    }

    /* end */
    .gameContainer .container {
        max-width: 991px;
    }

    .gameContainer .logo a img {
        max-width: 110px;
    }

    .gameContainer .stars li {
        margin: 0;
        width: 10%;
    }

    .gameContainer .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .gameContainer .rightSideBar .row {
        width: 20%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .gameContainer .clock img,
    .gameContainer .graphics img {
        max-width: 75px;
    }

    .gameContainer .controlButtons {
        align-items: center;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 237px;
        height: 142px;
    }
}


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767.98px) {
    .landscape .phonics_popup .ttheader {
        transform: scale(0.95);
        max-width: 88%;
    }

    .landscape .phonicsMain .modal_content_wrapper #example-custom-modal-styling-title {
        padding-left: 0px !important;
        font-size: 22px !important;
    }

    .landscape .phonicsMain .ttheader {
        padding: 5px;
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

    .landscape .phonicsMain .ttheader .nav-bar-btn {
        padding: 0 4px !important;
        margin-right: 4px !important;
    }

    .landscape .phonicsMain .ic-text {
        font-size: 12px;
    }

    .landscape .phonicsMain .modal-header {
        background: #193463 !important;
    }

    .portrait #lesson_ifr .ereader_bookimages .ereader_images .ereader-divider {
        margin: 5px !important;
        width: 48% !important;
    }

    .gameContainer .container {
        max-width: 991px;
    }

    .gameContainer .logo a img {
        max-width: 110px;
    }

    .gameContainer .stars li {
        width: 10%;
    }

    .gameContainer .leftSideBar .row {
        width: 33%;
        text-align: center;
    }

    .gameContainer .rightSideBar .row {
        width: 20%;
        text-align: center;
    }

    .gameContainer .clock img,
    .gameContainer .graphics img {
        max-width: 75px;
    }

    .gameContainer .controlButtons {
        align-items: center;
    }

    /* pop the balloon */
    .xfact {
        width: 100%;
    }

    .bgclass_game {
        width: 100%;
    }

    #balloonContainerGame {
        width: 100%;
        height: 95%;
    }

    /* #game_div canvas {
        height: 100% !important;
        width: 95% !important;
        margin: auto;
    } */
    #game_div {
        margin: 0 auto;
        height: 100%;
        width: 100%;
    }

    .pop_left_layer .leftPanelName {
        position: relative;
        left: 0px;
    }

    .hide-popthebaloon-for-mobile #gamestarsrating {
        position: relative;
        left: 0px;
    }

    .pop_left_layer .lvlmsg {
        font-size: 12px !important;
        width: max-content;
        padding-left: 10px;
    }

    .pop_left_layer .lvltxt {
        font-size: 12px !important;
        bottom: 5px !important;
    }

    #gamestarsrating {
        width: 100%;
        text-align: center;
        margin-top: 0px !important;
    }

    .popLogoleft img {
        width: 80%;
        margin-top: 40px;
    }

    .pop_left_layer {
        margin: 0 auto;
        margin-top: 10px;
    }

    .gameContainer .controlButtons ul li i {
        transform: translate(-50%, -50%) !important;
    }

    .gameContainer .controlButtons ul {
        margin-top: 30px;
    }
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* added css for Phonics : B1: S:1 L3 : Lets play football : UI distorts on Surface (mocked up by dragging window on desktop) */
    .landscape #strocket-first.bowling-game-main-div .abcgame_abcpickrecommendedgame,
    .landscape #abcMatchMainBody .abcgameabcpickContainer .abcgame_abcpickrecommendedgame {
        background-size: cover !important;
    }

    /* end */
    /* for result screens issue SL3-6061 */
    /* changed css for lanscape iphone 11 and pixel3 */
    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper,
    .landscape .abcgame_readycount {
        height: 175px !important;
        margin-top: 0 !important;
    }

    .landscape #bowlingGame .abcgame_scoreBtns {
        bottom: 14px !important;
        top: auto !important;
    }

    /* end */
    .landscape .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    .landscape .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
        display: flex;
        align-items: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns {
        top: 135px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .landscape .jumpGameOverlay .abcgame_abcpick_gameResultWrapper .abcgame_scoreBtns button {
        height: 22px !important;
        margin: 0 !important;
    }

    .landscape .abcgame_abcpick_gameResult div.ng-scope div {
        font-size: 9px !important;
    }

    /* end  */
    .gameContainer .container {
        max-width: 991px;
    }

    .gameContainer .logo a img {
        max-width: 110px;
    }

    .gameContainer .stars li {
        margin: 0;
        width: 10%;
    }

    .row.abcgame_bingoleflogo {
        width: 100%;
    }

    .gameContainer .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #abcBingoMainDiv .abcgame_bingoContainerrow .leftSideBar .row,
    .portrait #abcBingoMainDiv .abcgame_bingoContainerrow .rightSideBar .row {
        width: 50%;
    }

    .gameContainer .rightSideBar .row {
        width: 25%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .letsplaybasketball .gameContainer .rightSideBar .row {
        width: 30%;
    }

    .portrait .gameContainer .abcMatchMainDiv .row.controlButtons {
        width: 40%;
    }

    .portrait .gameBody .rightSideBar .row.clock {
        width: 67% !important;
    }

    .gameBody #shootthestars .rightSideBar .row.clock {
        width: 75% !important;
    }

    .portrait .letsplaybasketball .gameBody .rightSideBar .row.clock {
        width: 69% !important;
    }

    .gameContainer .clock img,
    .gameContainer .graphics img {
        max-width: 75px;
    }

    .gameContainer .controlButtons {
        align-items: center;
    }

    .gameContainer .contentBox {
        padding: 0;
    }

    .gameContainer .leftSideBar,
    .gameContainer .rightSideBar {
        display: flex;
        align-items: center;
    }

    .portrait #syllablepick #syllable_contentbox {
        width: 100%;
        height: 55vh;
        margin: 8px auto;
    }

    .portrait #syllablepick .vowels-centerlized-wrapper {
        height: 100%;
        margin-bottom: 0px;
    }

    .portrait #syllablepick .syllablepick-heading.Syllable_stars .stars_interactivity {
        grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto;
        display: grid;
        gap: 0;
        margin: 20px auto !important;
    }

    .portrait .gameContainer .contentBox {
        height: 100%;
        width: 100%;
    }

    .gameContainer img {
        width: 70%;
    }

    .portrait #abcBingoMainDiv .abcgame_bingoContainerrow .leftSideBar .row img {
        width: 59%;
    }

    /* pop ballons game responsive new css */
    .portrait .xfact {
        width: 100%;
    }

    /* make it center on iPad portrait, etc..*/
    .letsgofishingMainBackground .gameContainer #game_div {
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }

    /* pop the balloon */
    .xfact {
        width: 100%;
    }

    .bgclass_game {
        width: 100%;
    }

    /* #game_div canvas {
        height: 100% !important;
        width: 100% !important;
    } */
    #game_div {
        margin: 0 auto;
        height: 100%;
        width: 100%;
    }

    .pop_left_layer .leftPanelName {
        position: relative;
    }

    .pop_left_layer .lvlmsg {
        font-size: 17px;
        width: max-content;
        padding-left: 10px;
    }

    .pop_left_layer .lvltxt {
        font-size: 15px;
        position: absolute;
        left: 55%;
        bottom: 7px;
    }

    #gamestarsrating {
        width: 100%;
        text-align: center;
        margin-top: 0px !important;
    }

    .popLogoleft img {
        width: 100%;
    }

    .pop_left_layer {
        margin: 0 auto;
        margin-top: 10px;
    }

    .portrait .gameBody .letsplaybasketball .contentBox {
        height: 52vh;
    }
}

@media (min-width: 1500px) {

    .gameContainer .abcgame_maincontainerContent.popBalloonRecommendedgamewrap,
    .landscape .gameBody .gameContainer .contentBox {
        max-height: 1000px !important;
    }
        #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word p {
            /* position: absolute; */
            font-size: clamp(24px, 5vw, 42px);
    
        }
    
        #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
            position: relative;
            min-height: 95px !important;
        }
}

@media (min-width: 1366px) {
    .gameContainer .abcgame_maincontainerContent {
        position: relative;
        margin: auto;
        height: 100%;
    }

    .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
        display: flex;
        align-items: center;
    }

    .gameContainer .abcgame_maincontainerContent.popBalloonRecommendedgamewrap,
    .landscape .gameBody .gameContainer .contentBox {
        max-height: 800px !important;
    }

    .gameContainer .contentBox {
        width: 80vh;
        margin: auto;
        max-height: 600px;
        /* min-width: 600px; */
    }

    .gameContainer {
        min-height: 420px;
        overflow-y: visible;
    }

    .shoottherocketsContainer {
        min-height: 420px;
    }

    /* #abcMatchMainBody .gameContainer {
        min-height: 600px;
    } */
    /* .MainCardTemplate.leather-book.BookWood {
        min-height: 550px;
        overflow-y: visible;
    } */
    .gameContainer #game_div,
    .gameContainer #fishingContainerGame #game_div {
        max-height: 800px;
    }

    #billBoard .boardString {
        font-size: 18px;
        line-height: 30px;
    }

    .board-stand {
        height: 147px;
    }

    #billBoard .twoflash-cont {
        padding: 0;
    }

    .gameContainer .abcgame_abcpickoptionalgamewrap {
        height: calc(36% - 47px);
    }
}

@media (max-width: 1366px) and (min-width: 992px) {
    .landscape #strocket-first {
        min-height: 400px !important;
    }

    .landscape .gameContainer .contentBox {
        height: 100% !important;
        max-height: 100% !important;
        /* min-width: 600px; */
    }

    .landscape .gameContainer #SightWordBlast .contentBox {
        height: 100% !important;
        max-height: 600px !important;
        min-width: 600px;
    }

    .landscape #interactivity_div .connectthedots-container .connectthedots-centerlized-wrapper .contentBox {
        height: 90%;
        max-height: 100% !important;
    }

    .landscape #interactivity_div .connectthedots-container .connectthedots-main-wrapper .contentBox {
        height: 100% !important;
        max-height: 100% !important;
    }

    .landscape .gameContainer {
        min-height: 420px;
        overflow-y: visible;
    }

    .landscape .shoottherocketsContainer {
        min-height: 420px;
    }

    #wordLadder .gameContainer {
        height: auto !important;
    }

    .letsplaybasketball .row.gameWrapper.wrapperHeight {
        height: 100% !important;
        min-height: 420px;
    }

    /* .landscape .gameContainer.letsplaybasketball {
        min-height: 100%;
    } */
    /* .landscape .gameContainer.letsplaybasketball {
        min-height: 100%;
    } */
    /* .landscape .leather-book .book-template-bg {
        padding-top: 55px;

    } */
    #interactivity_div .connectthedots-container {
        min-height: 420px;
    }

    .portrait .page-main-controls,
    .landscape .page-main-controls {
        width: 100% !important;
    }

    .portrait .page-main-controls li.Record,
    .landscape .page-main-controls li.Record {
        margin-right: 50px !important;
        width: auto !important;
    }

    .portrait .page-main-controls ul li #canvas_equalizer,
    .landscape .page-main-controls ul li #canvas_equalizer {
        margin: 0px !important;
    }

    .portrait .content-pagination li.arrow-left1,
    .portrait .content-pagination li.arrow-right1,
    .landscape .content-pagination li.arrow-left1,
    .landscape .content-pagination li.arrow-right1 {
        width: 10% !important;
    }

}


/* pop the balloon */

.xfact {
    width: 100%;
}

.bgclass_game {
    width: 100%;
    height: 100%;
}


/* #balloonContainerGame {
        width: 100%;
        height: 100%;
    } */


/* #game_div canvas {
        height: 100% !important;
        margin: auto;
    } */

#interactivity_div .connectthedots-container #game_div {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    max-height: 500px;
    min-height: 500px;
    min-width: 600px;
    height: 100%;
    width: 100%;
}

#Shoottherocket #balloonContainerGame {
    width: 100%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#balloonContainerGame {
    width: 100%;
    height: 95%;
}

.pop_left_layer .leftPanelName {
    position: relative;
    left: 0px;
}

.hide-popthebaloon-for-mobile #gamestarsrating {
    position: relative;
    left: 0px;
}

.pop_left_layer .lvlmsg {
    font-size: 15px !important;
    width: max-content;
    padding-left: 10px;
}

.pop_left_layer .lvltxt {
    font-size: 15px !important;
    bottom: 5px !important;
}

#gamestarsrating {
    width: 100%;
    text-align: center;
    margin-top: 0px !important;
}

.popLogoleft img {
    /* width: 90%;
        margin: auto;
        margin-top: 10px;
        margin-left: 25px; */
}

.pop_left_layer {
    margin: 0 auto;
    margin-top: 10px;
}

.gameContainer .controlButtons ul li i {
    transform: translate(-50%, -50%) !important;
}

.gameContainer .controlButtons ul {
    margin-top: 30px;
}

@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait) {
    html.landscape .video-container {
        height: calc(100dvh - 170px) !important;
    }
    
    .gameBody .gameContainer .contentBox {
        height: 100%;
        /* max-height: 100%; */
        width: 100%;
    }

    .portrait .interactivity #consonant_pick .flip-divider {
        width: 50%;
        max-width: 50%;
        padding: 0 50px;
        max-height: 450px;
    }

    .portrait .interactivity.interactivityfullScreen #consonant_pick .flip-divider {
        max-height: 500px;
    }

    .portrait .culminating_div {
        width: 50%
    }

    .portrait .CulminatingPick .culminatingWrdImg {
        height: 370px;
    }

    .portrait .interactivityfullScreen .CulminatingPick .culminatingWrdImg {
        height: 400px;
    }

    #interactivity_div .connectthedots-container #game_div {
        transform: scale(1.4);
    }

    .gameBody .leftSideBar,
    .gameBody .rightSideBar {
        display: flex;
        align-items: center;
        width: 100%;
    }

    #wordLadder .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
        width: 100%;
    }

    .gameParentDiv .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin: 0;
    }

    .portrait .gameBody .rightSideBar .row {
        width: 33%;
    }

    .gameBody .rightSideBar .row {
        width: 25%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .gameBody .rightSideBar .row.clock {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .leftSideBar .row img {
        width: 45% !important;
    }

    .letsgofishingMainBackground .gameContainer .rightSideBar .clock #rhs-canvas {
        position: static;
        left: 0;
        transform: none;
        width: 150px;
    }

    #gameBody .gameContainer .gameWrapper {
        flex-wrap: wrap;
    }

    .gameParentDiv {
        margin: 0 0 70px 0;
    }

    .portrait #interactivity_div .connectthedots-centerlized-wrapper .row {
        width: 50%;
        padding: 0 15px;
    }

    .portrait #interactivity_div .connectthedots-centerlized-wrapper .connectthedots-star-rating {
        display: none;
    }
}


/* added css for counting div issue */

#bowlingGame .abcgame_readycount.counter_div {
    height: auto !important;
}


/* end */

.jumpGameOverlay {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/count_background.png) !important;
    BACKGROUND-REPEAT: no-repeat;
    background-size: cover;
    margin: auto;
}

.jumpGameOverlay .abcgame_abcpick_readytext {
    font-size: 28px;
}

.jumpGameResultDiv .abcgame_abcpick_gameResultTitle {
    background-image: none !important;
}

.jumpGameResultDiv .abcgame_abcpick_gameResultWrapper {
    margin-top: 0px !important;
}

.jumpGameResultDiv {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/result_window.png) !important;
    background-repeat: no-repeat;
    /* padding-top: 53px;
    padding-left: 24px; */
}

.jumpGameOverlay .jumpgameResultLeftDiv,
.jumpGameOverlay .abcgame_abcpick_fright {
    font-size: 12px;
    text-align: left !important;
    width: auto !important;
    padding-left: 8px;
}

.jumpGameResultDiv .abcgame_nextlevel {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/playagain.png) !important;
}

.jumpGameResultDiv .abcgame_nextlevelBtn {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/next_level.png) !important;
}

.jumpGameResultDiv .abcgame_scoreBtns {
    /* top: 174px; */
    left: 0;
}

.landscape #bowlingGame .jumpGameResultDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0px;
}

.landscape #bowlingGame .abcgame_scoreBtns {
    bottom: 8px;
    top: auto;
}

#SightWordBlast .abcgame_scoreBtns {
    display: flex;
    align-items: center;
    justify-content: center;
}

#SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
    position: relative;
    /* margin-right: 0; */
}

.jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
    width: 40%;
    margin: auto 5%;
}

.landscape #bowlingGame .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
    margin: 0 3%;
    width: 40%;
    height: 240px;
}

.jumpGameOverlay#showgetReady {
    font-size: 24px;
}

.jumpGameOverlay #showgetReady {
    width: 40%;
    margin: auto 5%;
}

.jumpGameOverlay .abcgame_abcpick_getreadyWrap {
    margin-top: 0;
}

.noAnimation {
    animation: none;
}

.jumpGameResultDiv .abcgame_nextlevel {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/playagain.png) !important;
    float: left;
    background: transparent;
    background-repeat: no-repeat;
    width: 40%;
    background-size: 100% 100%;
}

.jumpGameResultDiv .abcgame_nextlevelBtn {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/next_level.png) !important;
    width: 40%;
    height: 100%;
    float: left;
    background: transparent;
    height: 40px;
    border: none;
    font-size: 15px;
    font-weight: bold;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.jumpGameResultDiv .abcgame_scoreBtns .center {
    float: none !important;
}

#shootthestars .abcgame_scoreBtns {
    display: flex;
    align-items: center;
    justify-content: center;
}

#shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
    position: relative;
    /* margin-right: 0; */
}

@media (max-width: 768px) {
    .portrait .words_rhyiming {
        height: 100% !important;
        overflow-y: auto;
        display: block;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box {
        margin-bottom: 15px;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .right-btns-grp {
        margin: 10px auto;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan p {
        font-size: 25px;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .rhymmediabox {
        flex-direction: column-reverse;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext {
        width: 85% !important;
    }

    .portrait .words_rhyiming #rhymewordsgame {
        width: 95% !important;
    }

    .click_functionality .string_name {
        font-size: 85% !important;
    }

    .portrait .draggable-wrap,
    .portrait .source-preview {
        height: 14.5vh;
        padding: 10px 20px;
        min-height: 148px
    }

    .portrait .interactivityfullScreen .draggable-wrap,
    .portrait .interactivityfullScreen .source-preview {
        height: 17vh;
    }

    .portrait #countTheSyllabus .audio-text.visibilityHidden {
        display: none;
    }
}

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) {
    .landscape #SightWordBlast .abcgame_abcpick_gameResult div {
        font-size: 11px;
        margin-bottom: 1px;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_gameResult div {
        font-size: 10px;
        margin-bottom: 1px;
    }

    #Shoottherocket .alphabetButton {
        max-width: 90%;
        font-size: 17px;
    }
}

.connectthedots-startgame-innerwrapper .game_div {
    height: 100% !important;
    width: 100% !important;
}

.connectthedots-startgame-innerwrapper #instruction_div {
    z-index: 999;
}


/* test */

@media (max-width: 1280px) and (min-width: 500px) {
    .connectthedots-canvas-container {
        top: 2.1em;
        width: 100% !important;
        height: 100% !important;
    }
}


/* Large devices (desktops, 992px and up)  and Ipad Pro */

@media (min-width: 992px) and (max-width: 1199.98px) {
    
     #contraction-activity.apples_bg .contraction-answer .contraction-string h3 {
            font-size: 30px;
        }

    .landscape .phonicsMain .modal-body {
        min-height: 480px !important;
        max-height: 500px !important;
    }
    
    #interactivity_div .letsplaybasketball .gameWrapper .leftSideBar .row.logo img {
        max-width: 150px !important;
    }

    .gameContainer .rightSideBar .row {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .gameContainer .leftSideBar .row {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    /* pop the balloon */
    .xfact {
        width: 100%;
    }

    .bgclass_game {
        width: 100%;
    }

    #balloonContainerGame {
        width: 100%;
        height: 95%;
    }

    #interactivity_div .connectthedots-startgame-innerwrapper {
        /* width: auto !important;
        height: auto !important; */
    }

    #game_div canvas {
        margin: auto;
    }

    #game_div {
        margin: 0 auto;
        height: 100%;
        width: 100%;
        /* max-height: 600px; */
    }

    .pop_left_layer .leftPanelName {
        position: relative;
        left: 0px;
    }

    .hide-popthebaloon-for-mobile #gamestarsrating {
        position: relative;
        left: 0px;
    }

    .pop_left_layer .lvlmsg {
        font-size: 12px !important;
        width: max-content;
        padding-left: 10px;
    }

    .pop_left_layer .lvltxt {
        font-size: 12px !important;
        bottom: 5px !important;
    }

    #gamestarsrating {
        width: 100%;
        text-align: center;
        margin-top: 0px !important;
    }

    .popLogoleft img {
        width: 80%;
        margin-top: 40px;
    }

    .pop_left_layer {
        margin: 0 auto;
        margin-top: 10px;
    }

    .gameContainer .controlButtons ul li i {
        transform: translate(-50%, -50%) !important;
    }

    .gameContainer .controlButtons ul {
        margin-top: 30px;
    }
}


/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {

    .gameContainer .leftSideBar .row,
    .gameContainer .rightSideBar .row {
        margin: 30px 15px;
    }

    .container.letsplaybasketball .leftSideBar .row,
    .container.letsplaybasketball .rightSideBar .row {
        margin: 10px 0;
    }

    .Phonics-homepage-wraper .mt-3 {
        flex-wrap: nowrap;
    }

    .carousalFlipCard .container.calendar-row {
        width: 100%;
    }
        #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word p {
            /* position: absolute; */
            font-size: clamp(24px, 5vw, 42px);
    
        }
    
        #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
            position: relative;
            min-height: 85px;
        }
}

@media (min-width:1601px) and (max-height: 569.98px) {
    .landscape #interactivity_div .gameContainer .rightSideBar #rhs-canvas {
        width: 190px;
        height: 190px;
    }
}

@media (min-width:1601px) and (max-height: 660px) {
    .leather-book #carousel.book-template-bg {
        height: auto;
    }

    div#flipping_leatherbook {
        min-height: auto;
    }

    #flipping_leatherbook .bookTemplate {
        margin: 10px auto 0 auto;
    }

    .landscape #interactivity_div .shoottherocketsContainer .gameContainer .rightSideBar #rhs-canvas {
        width: 130px;
        height: 130px;
    }

    .shoottherocketsContainer .gameContainer .leftSideBar .row,
    .shoottherocketsContainer .gameContainer .rightSideBar .row {
        margin: 15px 0;
    }
}

@media (max-height: 569.98px) {
    div#flipping_leatherbook {
        min-height: auto;
    }

    .quizz_reader.container-fluid.height100 {
        min-height: 420px;
    }

    .landscape #flipping_leatherbook .bookTemplate {
        margin: 0 auto;
    }

    .My-carousel {
        min-height: 500px;
    }

    #shootthestars #rhs-canvas {
        width: 100px;
        height: 100px;
    }

    .landscape #strocket-first {
        min-height: 500px;
    }

    div#calenderFlipCardMainDiv {
        align-content: normal;
        flex-direction: column;
        height: auto;
    }

    .landscape .gameBody .leftSideBar img {
        max-width: 72%;
    }

    .startlgf_go_pg1 {
        bottom: 3%;
    }

    .flashcard-turnOver .flashcardContainr {
        height: 100%;
    }

    .gameBody .letsplaybasketball .leftSideBar .row {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .letsplaybasketball .gameWrapper.row {
        min-height: 370px;
    }
}

@media (max-width: 991px) and (orientation: landscape) {
    .landscape #carousel.caraousal_interactive_custom {
        min-height: 100% !important;
    }

    .gameContainer,
    .gameWrapper {
        flex-direction: column;
        flex-wrap: wrap;
    }

    #interactivity_div .connectthedots-centerlized-wrapper .gameWrapper {
        flex-direction: row;
    }

    .landscape #syllablepick_rightsidebar .circle_couting {
        width: 85%;
    }

    .gameContainer .leftSideBar,
    .gameContainer .rightSideBar {
        flex-direction: column;
        width: 25%;
    }

    #syllablepick_rightsidebar .circle_couting ul li>div {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-width: 3px;
    }

    #syllablepick_lefttsidebar .curve_text_div {
        height: 95px;
    }

    #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 18px;
    }

    #syllablepick #syllable_contentbox,
    .gameContainer .contentBox {
        width: 50%;
        height: 60vh;
    }

    .poptheballoonContainer2 .leftSideBar .row:nth-child(1) {
        width: 70% !important;
        margin: auto;
    }

    .gameContainer .leftSideBar .row,
    .gameContainer .rightSideBar .row {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .gameContainer .rightSideBar .row {
        margin: 10px !important;
    }

    .gameContainer .stars li {
        width: 15%;
    }

    .gameContainer .repeatButton {
        margin: 5px auto;
        text-align: center;
        padding: 4px 0;
        font-size: 15px;
    }

    .gameContainer .clock img,
    .gameContainer .graphics img {
        max-width: 70px;
    }

    .gameContainer .timer {
        font-size: 18px;
        text-align: center;
        width: 70px !important;
        padding: 0px 0;
        margin-top: 0px;
    }

    .gameContainer .abcSoundMatchWrapper .timer {
        width: 70px !important;
    }

    .timer-wrap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
    }

    .landscape .gameContainer .rightSideBar #rhs-canvas {
        position: static;
        width: 70px;
        height: 70px;
    }

    .gameContainer .mode {
        text-align: center;
        color: #000;
        font-size: 17px;
        margin: 0px auto 0 auto;
        font-weight: bold;
    }

    .gameContainer .controlButtons ul li {
        max-width: 33px;
        height: 33px;
    }

    .abcgame_horizontalbottom #smdraghb_0 {
        border: 3px solid #93a831;
    }

    .gameContainer {
        overflow: hidden;
    }

    .letsplaybasketball .row.logo {
        margin: auto;
    }

    .letsplaybasketball .row.gameImage {
        width: 50% !important;
        margin: auto;
    }
}

@media (max-width: 991px) {
    .portrait .gameContainer .rightSideBar .row.clock {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .landscape .startshoot_go_pg1 .gameelementcenter {
        padding: 0 5px;
    }

    .quizz_reader.container-fluid.height100 {
        min-height: auto;
    }

    .culminating_div {
        margin-bottom: 20px;
    }

    .portrait .letsgofishingMainBackground .gameContainer .rightSideBar .clock #rhs-canvas {
        position: static;
        left: 0;
        transform: none;
        width: 150px;
    }

    .portrait .timer-wrap {
        position: static;
    }

    /* start Connect the dots portrait css */
    .portrait #interactivity_div .connectthedots-main-wrapper {
        height: 55vh;
    }

    .portrait #interactivity_div .connectthedots-centerlized-wrapper .row {
        width: 50%;
        padding: 0 15px;
    }

    .portrait #interactivity_div .connectthedots-centerlized-wrapper .connectthedots-star-rating,
    .portrait #interactivity_div .connectthedots-show-for-mobile-port {
        display: none;
    }

    /* End Connect the dots portrait css */
    .landscape .ebookContainer .instruction_text {
        margin: 0px auto;
        width: 65%;
    }
}

@media (min-height: 600px) {
    .gameContainer .contentBox img {
        height: 100%;
    }
}


/* theme css */

#billBoard .flash-card-sq3::before,
#billBoard .flash-card-sq3::after,
#billBoard .flash-card-sq4::before,
#billBoard .flash-card-sq4::after,
#billBoard .flash-card-sq5::before,
#billBoard .flash-card-sq5::after {
    height: 6%;
}

.letsplaybasketballMainPage {
    width: 1400px;
    margin: 0 auto;
}

.clockNBtnWrapper {
    float: left;
    width: 100%;
}

.letsplaybasketballMainPage #lgf_gamestarsrating {
    float: left;
    width: 100%;
}

.letsplaybasketballMainPage #rhs-canvas {
    transform: scale(1.11);
}

.letsgofishingpage3 .lgf_helpinstruction {
    right: 6%;
}


/* .letsgofishingpage3 .startlgf_go_pg1{
    left: 5.2%;
} */

.letsplaybasketballMainPage .lgfBOverlaycont {
    left: 14%;
}

.letsplaybasketballMainPage .lgf_go3_layerx,
.letsplaybasketballMainPage .lgf_go4_layerx {
    left: 10%;
}

.letsgofishingMainBackground .stars li i {
    font-size: 25px;
    color: #ba6307;
    -webkit-text-stroke: #ba6307;
}


/* .letsgofishingMainBackground .rightSideBar .clock #rhs-canvas{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 266px;
} */

.letsgofishingMainBackground img {
    max-width: 100%;
}


/*css fpor pick id*/

.flash-card-table .flash-card-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


/*end pick id css*/

.flash-card-table.book3-click-flip.layout-align-center-center.layout-column {
    height: auto !important;
    /* overflow: scroll; */
    margin-top: 0;
    z-index: 0;
}

.flashcardId .flash-card-table.book3-click-flip.layout-align-center-center.layout-column {
    height: auto !important;
}

.homophoneLayout.flashcardId .flash-card-table.book3-click-flip.layout-align-center-center.layout-column {
    height: auto !important;
    z-index: 0;
}


/* .board-effect .billiboard_one i {
    background: #511e1b;
}


.board-effect .billiboard_two i {
    background: #511e1b;
} */

.congratulations_trophy_div {
    font-size: 35px;
    margin: 0px;
    align-items: baseline !important;
}

@media (max-width: 1024px) and (min-width: 940px) {
    .flash-card-table.book3-click-flip.layout-align-center-center.layout-column {
        height: auto !important;
    }

    .portrait .words_rhyiming {
        height: 100% !important;
        margin: 00px 0;
    }

    .portrait .words_rhyiming .click-rating .right_column {
        position: relative;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box {
        margin-bottom: 15px;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .right-btns-grp {
        margin: 10px auto;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan {
        max-width: 61%;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan p {
        font-size: 25px;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .rhymmediabox {
        flex-direction: column-reverse;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext {
        width: 85% !important;
    }

    .portrait .words_rhyiming #rhymewordsgame {
        width: 95% !important;
        flex: 1;
    }

    #lesson_ifr .words_rhyiming #rhymewordsgame .rhymemaincontent {
        justify-content: space-evenly;
    }

    #lesson_ifr .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone,
    #lesson_ifr .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo {
        height: auto;
    }
}

@media (min-width: 1366.98px) and (max-height: 569.98px) {
    .landscape .gameBody .contentBox {
        width: 600px;
    }

    .gameContainer .popBalloonRecommendedgamewrap {
        min-width: 100%;
    }
}

#abcMatchMainBody .abcgame_abcpickrecommendedgame {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/optionalabcabcpick.png) !important;
    background-size: cover;
    background-position-y: top;
}

#abcMatchMainBody .abcgameabcpickContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

@media (max-height: 749px) {
    .landscape #interactivity_div .letsplaybasketball .gameWrapper .leftSideBar .row.logo img {
        max-width: 107px !important;
    }

    .landscape .shoottherocketsContainer .shootpg6contain1 .rightSideBar .row {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .clicksoundinteractivity .wordbeginingsound .trumpCard_red {
        height: 21vh;
    }
}

@media (max-height: 570px) {
    .landscape .CompanionReaderQuiz .controllQuiz button {
        margin: 3px 15px;
    }

    .phonicsMain #medalDialogModal .modal-dialog .modal-content .modal-body {
        max-height: 350px;
    }

    .landscape .wordCardDiv {
        margin-top: 5px;
    }

    .landscape #calenderFlipCardMainDiv .container.calendar-row .upsideDownFlip .scene.flipallcard .front h1.mutated-word {
        font-size: 3.1vw !important;
    }
}

.letsgofishingContainer .abcgame_abcpickoptionalgamelist button {
    position: absolute;
}

.startletsgofishingrow .letsGoFishingLogo {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abclgf/image/gamebglogo.png");
}


/* the new graphics have logo merged in background so to hide logo image */

#letsplaybasketball .startletsgofishingrow .letsGoFishingLogo {
    background-image: none;
}

#letsplaysoccer .startletsgofishingrow .letsGoFishingLogo {
    background-image: none;
}

#letsplayfootball .startletsgofishingrow .letsGoFishingLogo,
#gameBody #letsplayfootball .lgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg {
    background-image: none !important;
    background-position-y: initial;
}

#letsplayfootball .startletsgofishingrow .letsGoFishingLogo {
    display: none;
}

#gameBody .startletsgofishingrow .letsGoFishingGameFull {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abclgf/image/popballoonbgimg.png");
    background-position: center;
}


/* updated background image for each game */

#gameBody #letsplaysoccer .startletsgofishingrow .letsGoFishingGameFull,
#gameBody #letsplaysoccer .lgfballoom_image_pg1 {
    background-image: none;
}

#letsplaysoccer .startletsgofishingrow .soccerlogo,
.gameBody #letsplaysoccer .startletsgofishingrow .lgf_gameinstructpglayernxtbtnimg {
    background-image: none;
    background-position-y: initial;
}

#gameBody #letsplaybaseball .startletsgofishingrow .letsGoFishingGameFull {
    background-image: none;
}

/* added css for Phonics : ABC lets play baseball : cover image : 'Baseball' is overlapped on player images SL3-10452 */

#gameBody #letsplaybaseball .startletsgofishingrow .abcletsGoFishingLogo,
#gameBody #letsplaybaseball .abclgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg {
    width: 55% !important;
    height: 85% !important;
}

/* End */

#gameBody #letsplaybasketball .startletsgofishingrow .letsGoFishingGameFull {
    background-image: none;
}

#gameBody #letsplaybaseball .startletsgofishingrow .abcletsGoFishingLogo,
#gameBody #letsplaybaseball .abclgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg {
    background-image: none !important;
}

#gameBody #letsplaybasketball .startletsgofishingrow .abcletsGoFishingLogo,
#gameBody #letsplaybasketball .abclgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg {
    background-image: none !important;
}

#gameBody #letsplayfootball .startletsgofishingrow .letsGoFishingGameFull,
#gameBody #letsplayfootball .lgfballoom_image_pg1 {
    background-image: none;
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
}

#abcMatchMainBody i.fa.fa-star-o {
    display: inline-block;
    font: normal normal normal 25px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#gameBody .letsgofishingContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


/* .letsgofishingMainBackground .row{
    margin-right: 0px;
    margin-left: 0px;
} */

.gameWrapper.row {
    margin-right: 0px;
    margin-left: 0px;
}

#gameBody .startletsgofishingrow .letsGoFishingLogo {
    /* width: 350px; */
}


/* image change of lets go fihing on 18-01-2021 */

#gameBody #letsgofishing .startletsgofishingrow .letsGoFishingLogo,
#gameBody #letsgofishing .lgfballoom_image_pg1.letus_gofihing.abclgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg.abclgf_gameinstructpglayernxtbtnimg {
    background-image: none !important;
    width: 100%;
    background-size: contain;
}

#gameBody #letsgofishing .startletsgofishingrow .letsGoFishingLogo {
    display: none;
}

/* #gameBody #letsgofishing .abcgame_abcpickrecommendedgamefull {
    background-image: url(../images/let-sgofishing.png) !important;
} */

#gameBody #letsgofishing .abcgame_abcpickrecommendedgamefull .letsGoFishingLogo {
    background-image: none !important;
}

#gameBody #letsgofishing .lgfballoom_image_pg1.letus_gofihing.abclgfballoom_image_pg1,
#gameBody #letsgofishing .abcletsGoFishingGameFull.abcgame_abcpickrecommendedgame.letsGoFishingGameFull {
    background-image: none !important;
}

#gameBody #letsgofishing .lgfballoom_image_pg1 {
    background-image: url(../images/let-sgofishing.png) !important;
    border: none;
    position: relative;
    border-radius: 8px;
    box-shadow: none;
}


/* css added for wordLadder Game */

@media only screen and (min-width: 1024px) and (max-width: 1550px) and (max-height: 700px) {
    #billBoardLight .board_String {
        bottom: 15px !important;
    }

    #wordLadder.vowels-container {
        min-height: 400px !important;
    }

    #wordLadder .vowel-bg {
        padding: 15px 0px;
    }

    #wordLadder .vowels-column .vowels-letter-boxes .vowel-letter h3 {
        margin: 3px 0px !important;
        font-size: 20px !important;
        line-height: 30px !important;
    }

    #wordLadder .vowels-column .vowels-img {
        height: 100px !important;
        margin: 10px auto !important;
        width: 80% !important;
    }

    #wordLadder .vowels-game-container,
    #wordLadder .gameContainer {
        height: auto !important;
    }

    #wordLadder .vowels-letter-boxes .vowel-letter {
        height: auto !important;
    }

    #wordLadder .vowel-bg {
        padding: 15px 0px;
    }
}

@media only screen and (min-width: 1024.99px) and (max-width: 1550px) and (max-height: 750px) {
    .landscape .content-pagination {
        height: 70px;
    }

    .landscape body .gameBody .contentBox.gameGraphicsAuto,
    .landscape body .gameBody .gameGraphicsAuto {
        height: 100% ;
        padding: 7px !important;
    }
}


/* ----------- iPad Pro ----------- */


/* ref: https://stackoverflow.com/questions/41978487/correct-media-query-for-ipad-pro */


/* Portrait and Landscape */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {

    .portrait .abcgame_abcpick_card_front,
    .portrait .abcgame_abcpick_card_frontMask,
    .portrait .abcgame_abcpick_card,
    .portrait .abcgame_abcpick_activeEffectInner,
    .portrait .abcgame_abcpick_card_back,
    .portrait .abcgame_abcpick_card_back1 {
        height: 105px;
        width: 105px;
    }

    /* .landscape .interactivity .audio-text,
    .landscape .interactivity #billBoard .audio-text {
        min-height: 100px !important;
    } */


    .landscape #syllablepick .syllablepick_game .syllable_img {
        height: auto !important;
    }

    .landscape .lgf_helpinstruction {
        right: 3%;
    }

    .landscape .abcgame_abcpick_imgbox {
        padding-left: 0px;
    }

    #abcMatchMainBody .abcgame_abcpick_gametypeHead {
        font-size: 18px;
        padding-bottom: 0px;
    }

    #abcMatchMainBody .abcgame_abcpick_matchHeadContent {
        font-size: 14px;
    }

    .connectDotWrapper {
        height: 100%;
    }

}

@media (max-height: 464px) and (orientation: landscape) {
    .landscape .letsgofishingpage3 .lgf_helpinstruction {
        right: 8%;
    }

    /* .landscape .lgf_gameinstructpglayernxtbtnimg {
        height: 150px;
    } */
    #gameBody #letsplayfootball .startletsgofishingrow .abcletsGoFishingLogo,
    #gameBody #letsplayfootball .abclgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg {
        width: 200px;
        background-size: contain;
    }

    #gameBody #letsplaybasketball .startletsgofishingrow .abcletsGoFishingLogo,
    #gameBody #letsplaybasketball .abclgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg {
        width: 200px;
        background-size: contain;
    }

    #gameBody #letsplaybaseball .startletsgofishingrow .abcletsGoFishingLogo,
    #gameBody #letsplaybaseball .abclgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg {
        width: 200px;
        background-size: contain;
    }

    .drag-container .space-padding {
        margin: 0px;
    }

    .drag-container .btn-draggable {
        border: 2px solid #333;
        border-radius: 10px;
    }

    .drag-container .drop_After {
        border: 2px solid #00a150 !important;
        border-radius: 10px;
    }
}


/* Ipad Pro  */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

    .add-search-dd {
            right: 0;
        }
}
/* Landscape, starts with 1025 to avoid effects on iPad, etc... */

@media screen and (min-width: 1080px) and (max-width: 1099px) and (min-height: 560px) and (max-height: 579px) {
    .landscape .gameBody #abcsoundmatch .abcgame_SMtimermodeparent {
        bottom: 4% !important;
    }
}
/* Landscape, starts with 1025 to avoid effects on iPad, etc... */


@media only screen and (min-device-width: 1025px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {

    .landscape .gameBody.letsgofishingMainBackground.container.gameContainer .contentBox,
    .landscape .gameBody .poptheballoonMainBackground .gameContainer .contentBox {
        max-height: 800px;
    }

    .landscape #lesson_ifr.gameParentDiv.game {
        max-height: 96%;
    }
   .landscape #lesson_ifr.gameParentDiv.game  #abcsoundmatch .buttonDiv {
        bottom: 38px;
    }
    .landscape .interactivity #interactivity_div #consonant_pick .flip-divider {
        width: 23%;
        max-width: 23%;
        max-height: 460px;
        padding: 0 20px;
    }

    .landscape .flex-item-div {
        right: 8%;
    }

    .landscape .interactivity.interactivityfullScreen #interactivity_div #consonant_pick .flip-divider {
        max-height: 500px;
    }

    .CulminatingPick .culminatingWrdImg {
        height: 375px;
    }

    .interactivityfullScreen .CulminatingPick .culminatingWrdImg {
        height: 400px;
    }

    .culminating_div {
        padding: 0px 15px;
    }

    .landscape .vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
        max-height: 500px;
    }
}

@media (min-width: 1025px) and (max-width: 1376px) and (orientation: landscape) {
    /* html.landscape #mainBodyContainer.video-container {
        height: calc(100vh - 170px) !important;
    } */
}

@media (max-width: 1081px) and (max-height:571px) {
    .landscape #lesson_ifr.gameParentDiv.game {
        height: 100%;
    }
}

#abcMatchMainBody .abcgame_abcpick_logoGroup {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abc_logo.png);
    /* width: 350px;
    height: 238px; */
    margin: 0 auto;
    background-repeat: no-repeat;
    /* margin-top: 30px; */
    background-size: contain;
    position: static;
    background-position: center;
}

#abcMatchMainBody .abcgame_pageSection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#abcMatchMainBody .abcgame_abclevelContainer {
    background-repeat: no-repeat;
    height: 100%;
    bottom: 0%;
    position: static;
    background-size: 100% 100%;
    z-index: 7;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#abcMatchMainBody .abcgame_abcpick_modeContainer {
    width: 100%;
    text-align: center;
}

#abcMatchMainBody .abcgame_abcpick_modedivcss {
    display: inline-block;
    float: none;
}

.gameBody .startletsgofishingrow .abcgame_SMtimermodeparent {
    width: 100%;
    margin: 0 auto !important;
    text-align: center;
    margin-top: 0;
    display: flex;
    justify-content: center;
    position: static;
}


/* 30-jan-2020 */


/* for popTheBalloons stars */

.balloon-star-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: auto;
    justify-content: center;
    width: 50%;
}


/* for lets go fishing*/

.lgf-star-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: auto;
    justify-content: center;
    width: 50%;
}


/* for abcMatch */

/* .abcmatch-star-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto;
    justify-content: center;
    width: 50%;
} */

#abcMatchMainBody .abcgame_SMtimermode span {
    cursor: pointer;
}

#abcMatchMainBody .abcgame_SMtimermodeslow {
    background-color: #08ddec;
}

#abcMatchMainBody .abcgame_SMtimermoderegular {
    background-color: #53d500;
}

#abcMatchMainBody .abcgame_SMtimermodefast {
    background-color: #f8f38f;
}

#abcMatchMainBody .abcgame_SMtimermode {
    color: #474e4f;
}

#abcMatchMainBody .abcgame_abcpick_gameResult {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_result_window.png);
    background-size: contain;
    width: 333px;
    height: 200px;
    text-align: center;
    font-size: 1px;
    background-repeat: no-repeat;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 20px 0 0 0;
    background-position-x: center;
}

#abcMatchMainBody .restartIncompleteAnim {
    left: 0;
    padding-top: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
}


/* word to know css  */

#flipbook_interactivity.word_toknow .page.even {
    background-image: url(../images/reading-words-to-know-front.png) !important;
}

#flipbook_interactivity.word_toknow .page.odd {
    background-image: url(../images/reading-words-to-know.png) !important;
}


/* word to know css end here  */


/* word ladder css */

.landscape #flipbook_interactivity.word_toknow .align-middle .sentenceSpan {
    max-width: 94% !important;
}

/* 06 / Feb / 2020 */

.vowels-container {
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7ff1f6', endColorstr='#7db9e8', GradientType=0);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

.vowels-container .vowels-centerlized-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

#syllablepick .vowels-container .vowels-centerlized-wrapper {
    height: 90%;
}

.circle_couting div {
    cursor: pointer;
}

#syllablepick .right_column {
    right: 21px;
    top: auto;
}


/* SL3-5471: show hover only desktop devices...https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134 */

@media(hover: hover) {
    #syllablepick_rightsidebar .circle_couting ul li>div:hover {
        background: #efe9d4 !important;
    }
}

#syllablepick #syllablepick_rightsidebar .circle_couting ul li>div {
    background: #ffd942 !important;
}

.vowels-container .vowels-centerlized-wrapper .vowels-game-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    padding: 0 15px;
}


/* To resolve: Blast site word->icons needs to be placed in one line.-999*592 */

#strocket-first .vowels-centerlized-wrapper .vowels-game-container {
    padding: 0;
}

.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-left-column,
.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-right-column {
    width: 25%;
    text-align: center;
    padding: 0px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    justify-content: center;
}

.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column {
    width: 50%;
    padding: 0px;
}

.vowels-left-column figure {
    margin: 0;
    display: flex;
    justify-content: center;
    width: auto;
    align-items: center;
}

.vowels-left-column figure h3 {
    font-size: 50px;
    margin: 20px 0px;
    text-align: center;
    color: #f11c29;
}

.vowels-letter {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    align-items: center;
}

.vowels-letter>.button_bg {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/start-game-title.png) no-repeat;
    background-size: 100% 100%;
    padding: 7px 30px;
    width: 10em;
    height: 7em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
}

.vowels-letter>.button_bg>span {
    font-size: 24px;
}

.vowels-letter>.button_bg>span>span {
    margin: 0px 10px;
}

.vowels-stars {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 20px;
}

.vowels-stars ul {
    padding-left: 0;
    width: 100%;
    grid-template-areas: "auto auto auto";
    display: grid;
    justify-content: center;
    align-items: center;
}


/* .vowels-stars ul li {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_star_outline.png) no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;
    margin: 10px 10px;
    background-size: contain;
} */


/* center column css */

.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg {
    background: #dedcff;
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg .vowels-column.left,
.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg .vowels-column.right {
    width: 33.333%;
    padding: 0 15px;
}

.left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.centered_columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vowels-container .vowels-centerlized-wrapper .vowels-game-container .vowels-centered-column .vowels-bg .vowels-column.centered_columns {
    width: 33.333%;
    padding: 0px 15px;
}

.vowels-img {
    width: 90%;
    height: 140px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #fff;
}

.vowels-img img {
    width: 100%;
    object-fit: contain !important;
    height: 100%;
}

.vowels-letter-boxes {
    width: 90%;
    height: auto;
}

.vowels-letter-boxes .vowel-letter {
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: auto;
    border: 10px solid #9d6016;
    height: 80px;
}

.vowels-letter-boxes .vowel-letter h3 {
    font-size: 40px;
    margin: 0;
}

.vowels-letter-boxes .vowel-letter:first-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.vowels-letter-boxes .vowel-letter:last-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom: 10px solid #9d6016;
}

.orignal_letter {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: space-between;
    padding-top: 25px;
}

.letter_column {
    width: 30%;
    background: #fff;
    border: 2px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    cursor: pointer;
}

.letter_column span {
    height: 100%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    justify-content: center;
    line-height: 1;
}

.vowels-game-event-icons {
    width: 100%;
}

.vowels-game-event-icons ul {
    width: 100%;
    text-align: center;
    padding: 0;
}

.vowels-game-event-icons ul li {
    cursor: pointer !important;
    display: inline-block;
    margin: 30px 10px 0 10px;
    vertical-align: top;
    position: relative;
    z-index: 111;
}

.vowels-game-event-icons ul li i.fa-play,
.vowels-game-event-icons ul li i.fa-pause {
    background: #f1661c;
    border-color: #a03800;
    color: #f3f8ff;
    height: 45px !important;
    border-radius: 30px;
    border: 3px solid #a03800;
    width: 45px !important;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) and (min-width: 320px) {
    #shootthestars .leftSideBar .row {
        width: 50%;
    }

    .portrait .gameBody .letsGameContainer .leftSideBar .row {
        width: 50% !important;
    }

    /* Added Css For Iphone 11/Pixel 3 (Portrait) Phonics : Word Bowl : Result screen : Play again | Next buttons are not aligned properly SL3-10143 */
    .portrait .bowling-game-main-div #bowlingGame .jumpGameResultDiv {
        padding-bottom: 11px;
    }

    .portrait .bowling-game-main-div #bowlingGame .abcgame_scoreBtns {
        top: auto !important;
        bottom: 15px;
    }

    /* end */

}

@media (max-width: 415px) and (min-width: 410px) {
    .portrait .content-pagination div.left-icon .fa-arrow-alt-circle-left {
        font-size: 25px;
        margin-left: 10px;
        margin-top: 1px;
    }

    .portrait .page-main-controls #footer-recording-menu,
    .portrait #autoToggleInteractivity {
        transform: scale(1) !important;
    }

    .portrait .page-main-controls .ereader-right-footer-wrapper .layout-row.recording-wrap {
        margin-right: 10px !important;
    }

    .portrait .page-main-controls .recording-timer,
    .portrait .recording-timer-wrap {
        margin-right: 6px !important;
    }

    .portrait .content-pagination #autoToggleInteractivity {
        width: 45px !important;
    }

    .portrait .phonicsMain #lesson_iframe.Phonics_ereader .content_ereader_modify .iframe_ereader {
        height: calc(58% - 35px);
        margin-bottom: 20px;
        width: 100%;
    }
}


/* 06 / Feb / 2020 */


/* End word ladder */

@media (min-width: 768px) and (max-width: 991.98px) {
    .portrait .letsplaybasketball .rightSideBar {
        margin: 0 !important;
    }

    .portrait .gameBody .letsplaybasketball .rightSideBar .row.clock {
        width: 75% !important;
    }

    .landscape #interactivity_div .quizz_reader .CompanionReaderQuiz-wrap {
        width: 85%;
    }

    .portrait #syllablepick .syllablepick_game .syllable_img {
        height: auto !important;
    }
}

@media (max-width:991px) {
    .landscape #SightWordBlast .abcgame_readycount {
        min-height: 150px !important;
    }

    /* added max-height on ereader recording dialog box to resolve SL3-8789 */
    .portrait .phonicsMain .MuiDialog-paperScrollBody.MuiDialog-paperWidthSm.react-draggable .MuiDialogContent-root {
        max-height: 400px;
        padding: 8px !important;
        overflow-x: hidden;
    }
}


.container.letsplaybasketball {
    padding: 0 !important;
}

@media (max-height: 600px) {
    .landscape #interactivity_div .letsplaybasketball .leftSideBar .row.logo img {
        max-width: 80px !important;
    }

    .landscape #interactivity_div .leftSideBar .lhsImage {
        width: 100%;
        height: 100px !important;
    }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .gameBody .letsplaybasketball .rightSideBar .row {
        margin-top: 0;
        margin-bottom: 0;
    }
}

.gameBody .letsplaybasketball .startletsgofishingrow .lgf_gameinstructpglayernxtbtnimg {
    background-size: contain;
    background-position: top;
}

.tick-class {
    display: flex;
    justify-content: center;
    align-items: center;
    top: -6%;
    width: 25px;
    height: 25px;
    position: absolute;
    right: -7%;
    font-size: 18px;
    text-align: center;
    border-radius: 50%;
    background: #00a000;
    color: #fff;
    transition: 0.3s ease-in;
    z-index: 1;
}

#wordLadder .selectedCard {
    border: 3px solid #9d6016;
}

.isNumberActivity .pageDiv {
    height: 100% !important;
}

.isNumberActivity .audio-text {
    display: none !important;
}


/* To resolve flex wrap issue on Safari, This code won't affect display of web page in any other browser */

.row:before,
.row:after {
    display: none !important;
}

#interactivity_div #flipping_leatherbook .flipbook .img_text {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#interactivity_div #flipping_leatherbook .flipbook .isNumberActivity .img_text {
    height: auto;
}

#interactivity_div #flipping_leatherbook .bookTemplate3 .flipbook .img_text {
    height: auto;
}

.bookTemplate2 .page.even {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/sc1_page_left.png) 0 0/100% 100% no-repeat;
}

.bookTemplate2 .page.odd {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/sc1_page_right.png) 0 0/100% 100% no-repeat;
}


/*SL3-5183 Book 3 : Section 2 : Words to know : A line is coming around the book*/

.bookTemplate3 .page {
    border-radius: 0;
}

.bookTemplate3 .page.even {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/book3-left.png) 0 0/100% 100% no-repeat;
}

.bookTemplate3 .page.odd {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/book3-right.png) 0 0/100% 100% no-repeat;
}


/* .bookTemplate3 .page.first_page{
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/book3-Firstright.png) 0 0/100% 100% no-repeat;
} */

#interactivity_div #flipping_leatherbook #flipbook-viewport.bookTemplate3 .page.first_page img.img_text {
    max-width: 90% !important;
    transform: translate(0%, -51.5%);
    max-height: 90% !important;
}

.bookTemplate3 .duplicate .page.even {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/book3-left3.png) top right/100% 100% no-repeat;
}

.bookTemplate3 .duplicate .page.odd {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/book3-right3.png) top left/100% 100% no-repeat;
}


/* shoot the stars css  */

#strocket-first .st_img {
    margin: auto;
}

#strocket-first .st_img figure {
    margin: 0;
}

#strocket-first .st_img figure img {
    margin: auto;
}

.opposite_component .repeat_button_audio {
    float: right;
    margin: 0;
    text-align: center;
    z-index: 9;
}

#dragContainer .repeat_button_audio {
    display: none;
}

.opposite_component .repeat_button_audio .repeat-icon {
    padding: 2px 16px;
    margin: 0;
}

.right_column {
    margin: 0;
    right: 18px;
    position: absolute;
    top: 10px;
}

.ebookContainer .refresh_content {
    position: absolute;
    top: 14px;
    right: 56px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 31px;
    width: 31px;
}

.ebookContainer .refresh_content .refreshIcon {
    background: #444a79;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    font-size: 20px;
    border: 1px solid #2a2e4b;
}

.ebookContainer .refresh_content .refreshIcon .fa.fa-refresh {
    margin: 0;
    color: #fff;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-height: 670px) {
    .gameContainer #optionalScreen .optionalGameLogo {
        width: 69px;
        height: 51px;
    }

    .row.one-card .upsideDownFlip .scene {
        height: 37vh;
        min-height: 230px;
    }

    .three-cards-wrapper .upsideDownFlip .scene {
        height: 11.2vh;
        min-height: 132px;
    }

    .gameContainer #optionalScreen .optionalGameLogo.gameLogo_3,
    .gameContainer #optionalScreen .optionalGameLogo.gameLogo_2 {
        width: 109px;
        height: 57px
    }

    .landscape .syllabus-image {
        height: 176px;
    }

    .portrait .CulminatingPick .culminating_div .culminatingWrdImg {
        height: 13vh;
    }

    .landscape #billBoard.bill-board-light {
        background-size: cover;
    }
}

@media (max-width:1000px) and (min-width:991px) {
    .portrait #billBoard.bill-board-light .twoflash-cont .sq-animate2:after {
        right: -30px;
        width: 160px;
        height: 160px;
        top: -141px;
    }
}

@media (max-height: 620px) {
    .landscape #interactivity_div .connectthedots-startgame-innerwrapper {
        height: 54ch;
        transform: scale(0.8);
    }
}

.opposite_component .fa-star,
.opposite_component .fa-star-o,
.instruction_text .fa-info-circle {
    font-size: 37px;
    color: #444a79
}

.opposite_component .fa-star-o {
    color: #675e56;
    -webkit-text-stroke: #675e56;
    margin: 0 3px;
}

.opposite_component .fa-star {
    color: #ba6307;
    -webkit-text-stroke: #ba6307;
    margin: 0 3px;
}


/* #flashCardPickID .opposite_component, #play_interactivity_pw .opposite_component, #consonant_pick .opposite_component, #countTheSyllabus .opposite_component{ */

.opposite_component {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    align-items: center;
}

.gameBody .letsplaybasketball .gameWrapper .leftSideBar,
.gameBody .letsplaybasketball .gameWrapper .rightSideBar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

ul.gameVolControls {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    margin: 0;
    padding: 0;
    margin-bottom: 8px;
}

ul.gameVolControls li {
    list-style: none;
    width: 44px;
    height: 44px;
    margin: 0 5px;
    position: relative;
    cursor: pointer;
    border: 2px solid black;
    border-radius: 50%;
    -webkit-box-shadow: 0 4px 5px #737373;
    box-shadow: 0 4px 5px #737373;
}

ul.gameVolControls img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    max-width: 35px;
}

ul.gameVolControls img:hover {
    opacity: 1;
    cursor: pointer;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
}

ul.gameVolControls li.volumeBtnImg {
    background: green;
}

ul.gameVolControls li.turtleBtnImg {
    background: #6a5c9f;
}

.gameBody .letsplaybasketball .gameWrapper .rightSideBar .controlButtons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

#interactivity_div .leftSideBar .lhsImage .basketballStoryImg.hintImage {
    max-width: auto !important;
}

#interactivity_div .letsplaybasketball .gameWrapper .leftSideBar .lhsImage {
    width: 180px;
    height: 180px;
    overflow: hidden;
}

#interactivity_div .letsplaybasketball .gameWrapper .leftSideBar .lhsImage img.hintImage {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 100%;
    min-height: 100%;
}

#flashCardTurnOver .right_column {
    float: right;
}

.cardFontFace {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30%;
    color: white;
}

#SightWordBlast .button-book {
    /*https://server2.chicmic.in/CocosTests/TestSite/WebMiniGameSourceFile/res/img/red-button.png*/
    /*res/img/red-button.png*/
    display: inline-block;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/button-book-image.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 18px 20px;
    min-height: 48px;
    background-color: transparent;
    border: 0;
    color: #fff;
    line-height: 1.1;
    font-size: 16px;
    min-width: 140px;
}

#SightWordBlast .button-book:focus,
.button-book:hover {
    outline: 0 !important;
    border: 0;
}

#shootthestars .button-book,
#bowlingGamePar .button-book {
    /*https://server2.chicmic.in/CocosTests/TestSite/WebMiniGameSourceFile/res/img/red-button.png*/
    /*res/img/red-button.png*/
    display: inline-block;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/button-book-image.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 18px 20px;
    min-height: 48px;
    background-color: transparent;
    border: 0;
    color: #fff;
    line-height: 1.1;
    font-size: 16px;
    min-width: 140px;
}

#shootthestars .button-book:focus,
.button-book:hover {
    outline: 0 !important;
    border: 0;
}


/***********survey SES css************/

.survey-container {
    width: 100%;
    height: 100%;
}

.survey-container header,
.survey-container footer {
    z-index: 9;
}

.page-main-controls .survey-wrapper {
    margin-left: 10px;
    color: #fff;
}

.survey-container header.header.layout-align-start-center.active_level_color_2 {
    width: 100%;
    flex-direction: row;
}

.survey-container .survey-main-class {
    width: 100%;
    height: calc(100% - 150px);
    margin-top: 0;
}

.question span:nth-child(2) {
    word-break: break-all;
    display: block;
    align-items: center;
    justify-content: center;
    display: flex;
}

.survey-container .edit-survey-wrapper .thumbs-icon i {
    display: inline-block;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    background-color: #cbd3e3;
    text-align: center;
    color: #fff;
    font-size: 20px;
    padding: 5px 0;
    margin-right: 10px;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 5px;
}

.survey-container .edit-survey-wrapper .rating-icon i {
    color: #cbd4db;
    font-size: 17px;
    margin-left: 2px;
    cursor: pointer;
}

.survey-container .edit-survey-wrapper .yes_no-icon span {
    cursor: pointer;
}

.survey-container .edit-survey-wrapper .question {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.survey-toast-color,
.survey-toast-color:hover {
    color: #fff;
}

.survey-container .edit-survey-wrapper .rating-icon,
.survey-container .edit-survey-wrapper .thumbs-icon,
.survey-container .edit-survey-wrapper .yes_no-icon {
    margin: 10px 0;
    padding: 0px 42px;
}

.survey-container .edit-survey-wrapper .rating-icon {
    margin-bottom: 20px;
}

.ebookControl.layout-column {
    margin-top: 0px !important;
}

i.fa.fa-thumbs-up.active {
    background-color: #27b645;
}

.survey-container .edit-survey-wrapper .yes_no-icon i.fa.fa-check.active {
    background-color: #27b645;
}

i.fa.fa-thumbs-down.active {
    background-color: #ed2c23;
}

.survey-container .edit-survey-wrapper .yes_no-icon .fa.fa-times.active {
    background-color: #ed2c23;
}

.valid-survey-user {
    right: 0;
    vertical-align: middle;
    align-items: center;
    left: 0;
    margin: 0 auto;
    font-size: 20px;
    display: inline-flex;
    color: red;
    text-align: center;
    height: 100%;
    width: 100%;
    position: relative;
    justify-content: center;
}

.already-submitted-survey,
.loading-class,
.successfully-submitted-survey {
    right: 0;
    vertical-align: middle;
    align-items: center;
    overflow-y: auto;
    left: 0;
    margin: 0 auto;
    font-size: 20px;
    display: flex;
}

.survey-main-class .edit-survey-wrapper {
    height: 100%;
    overflow-y: auto;
    margin-top: 0;
    margin-bottom: 50px;
    padding-bottom: 18px;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.survey-container .edit-survey-wrapper .yes_no-icon i {
    background-color: #cbd3e3;
    margin: 5px 5px 10px;
    color: #fff;
    padding: 5px;
    font-size: 16px;
    border-radius: 25px;
    width: 26px;
    height: 26px;
    text-align: center;
}

.edit-survey-wrapper h4 {
    font-size: 25px;
    font-weight: bold;
    text-transform: capitalize;
    margin-left: 20px;
    margin-bottom: 10px;
    position: relative;
    width: auto;
    color: #1b3158;
    padding-top: 18px;
}

.edit-survey-wrapper h4:before {
    content: "";
    height: 3px;
    width: 100%;
    bottom: -5px;
    display: block;
    position: absolute;
    background: #1b3158;
    left: 0;
}

.survey-wrapper {
    margin-left: 15px;
    z-index: 99;
}

.survey-wrapper a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

@media only screen and (max-width:600px) and (orientation: portrait) {

    .survey-container .edit-survey-wrapper .rating-icon,
    .survey-container .edit-survey-wrapper .thumbs-icon,
    .survey-container .edit-survey-wrapper .yes_no-icon {
        padding: 0 43px;
    }
}

@media only screen and (min-width:601px) and (max-width:801px) and (orientation: portrait) {

    .survey-container .edit-survey-wrapper .rating-icon,
    .survey-container .edit-survey-wrapper .thumbs-icon,
    .survey-container .edit-survey-wrapper .yes_no-icon {
        padding: 0 5.7vw;
    }
}

@media only screen and (min-width:802px) and (max-width:1024px) and (orientation: portrait) {

    .survey-container .edit-survey-wrapper .rating-icon,
    .survey-container .edit-survey-wrapper .thumbs-icon,
    .survey-container .edit-survey-wrapper .yes_no-icon {
        padding: 0 4.5vw;
    }
}

@media only screen and (max-width:925px) and (orientation: landscape) {
    .landscape .ereader_bookimages .ereader_images .ereader-divider {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .landscape .carousel-parent.flipleather-book .abcgame_instruction_popup .abcgame_smoverlay {
        position: absolute;
    }

    .survey-container .edit-survey-wrapper .rating-icon,
    .survey-container .edit-survey-wrapper .thumbs-icon,
    .survey-container .edit-survey-wrapper .yes_no-icon {
        padding: 0 42px;
    }

    .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan p {
        font-size: 35px !important;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 168px;
        background: #fff;
        border: 3px solid #000;
        height: 105px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
}

@media only screen and (min-width:926px) and (max-width:1024px) and (orientation: landscape) {

    .survey-container .edit-survey-wrapper .rating-icon,
    .survey-container .edit-survey-wrapper .thumbs-icon,
    .survey-container .edit-survey-wrapper .yes_no-icon {
        padding: 0 42px;
    }
}


/***********survey SES css end***********/

header .connect-dot-bg {
    right: 0 !important;
    padding-right: 0px !important;
    padding-left: 0px !important
}


/* for tabs and ipad portraid mode - lets play basketball only */

@media (max-width: 1366px) and (orientation: portrait) {
    .portrait .carousalFlipCard .container.calendar-row .upsideDownFlip {
        max-height: 500px;
        /*cards get cut from bottom in surface pro*/
        height: auto;
    }

    /* save progress icon on phones and tablet portrait device SL3-8292 */
    /* .portrait .commonProfileCss .save-progress-image {
        position: absolute;
        right: 45px;
        top: 0;
        margin-top: 13px;
        font-size: 0;
        bottom: -2px;
    }

    .portrait .commonProfileCss .save-progress-image .save-progress-inner {
        width: 25px;
        height: 25px;
        border: none;
    }

    .portrait .commonProfileCss .save-progress-image img.icon-breathe {
        right: -5px;
    } */

    /* end */
    .portrait .gameBody .letsplaybasketball .gameWrapper .leftSideBar,
    .portrait .gameBody .letsplaybasketball .gameWrapper .rightSideBar {
        flex-direction: row;
    }

    .portrait .gameBody .letsplaybasketball .gameWrapper .rightSideBar .row {
        width: 33%;
    }

    .interactivity .billboard-screen-change #billBoard .audio-text {
        width: 100% !important;
        height: auto;
        padding-bottom: 5px !important;
    }

    /*  reverse the card direction for matching game */
    .matchingGamedragContainer .drag-container.layout-column {
        display: flex;
        flex-direction: row;
    }
}


/* for mobile devices - lets play basketball only */

@media (max-width: 925px) and (orientation: landscape) {

    #showinstruct .connectthedots-game-instruction-wrapper {
        max-width: 370px;
    }

    /* .bookTemplate2 .flipbook-viewport .page .pageDiv .pageSpan {
        transform: translate(-50%, -51.3%);
    } */
    .landscape .phonicsMain #recordingIframe.ereaderFullScreen {
        padding: 0 0 35px 0;
    }

    .landscape .letter-sequence .stress {
        top: -16px;
    }

    .landscape .phonicsMain #recordingIframe .recording-play-controls {
        background: #ffcc00;
        border-top: 5px solid #f3eb15;
        /* position: absolute; */
        bottom: 0px;
        left: 0;
    }

    .abcgame_smlogo.savePlanetModeLogo {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* #gameBody #letsgofishing .abcgame_abcpickrecommendedgamefull button {
        margin-top: 8%;
    } */
    .landscape .phonicsMain #recordingIframe .Toastify .Toastify__toast--success {
        font-size: 12px !important;
    }

    .landscape .phonicsMain #recordingIframe #recordingEreader {
        padding: 15px 0 10px 0 !important;
        max-height: calc(100dvh - 120px);
    }

    .landscape .phonicsMain #recordingIframe .col-md-4 {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .landscape .phonicsMain #recordingIframe .col-md-4 .logo-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .landscape .phonicsMain #recordingIframe .col-md-8 {
        width: 45%;
        text-align: center;
    }

    .landscape #recordingIframe header {
        display: flex;
        min-height: 45px !important;
        height: 50px !important;
        width: 100%;
    }

    .landscape .abcgame_vertical.vertical_4 {
        width: 93% !important;
        height: 95%;
        margin-top: 6px;
        border-radius: 7px 7px 0 0;
        top: 7px;
    }

    .landscape .abcgame_sm_gameRFT {
        position: relative;
        height: 78%;
    }

    .landscape .letsplaybasketball #lgf_gamestarsrating {
        height: auto;
    }

    .letsplaybasketball .bottomStringRowBasketball {
        bottom: -16%;
        width: 100%;
    }

    .letsgofishingpage0 .gameBody .letsplaybasketball .contentBox,
    .letsgofishingpage3 .gameBody .letsplaybasketball .contentBox {
        height: 75%;
        margin-top: -50px;
        overflow: visible;
    }

    .gameBody .letsplaybasketball .gameWrapper .rightSideBar {
        padding: 0;
    }

    .gameBody .letsplaybasketball .rightSideBar .row {
        margin: 5px !important;
    }

    .bottom_text-basketball {
        background: none;
    }

    /* .gameContainer.letsplaybasketball #game_div{
            height:85%;
    } */
    .letsplaybasketball .bottomStringRowBasketball {
        width: 100%;
    }

    .bottom_text-basketball {
        padding: 0;
    }
}

@media only screen and (min-width: 501px) and (max-width: 667px) and (orientation:landscape) {
    .menuTabHeader li button {
        transform: scale(0.8);
        margin: -8.9px 0;
    }

    .landscape .CompanionReaderQuiz .QuestionCnt {
        width: 85%;
    }

    .landscape .billboard-screen-change #billBoard .slow_sound,
    .landscape .billboard-screen-change #billBoard .slow_sound i.icon-turtle-slow,
    .landscape .billboard-screen-change #billBoard i.icon-volume {
        width: 31px;
        height: 31px;
    }

    .landscape .CompanionReaderQuiz .Questioncount {
        left: -29px;
    }

    .landscape .CompanionReaderQuiz-wrap {
        width: 90% !important;
    }

    .landscape .quizz_reader #quizPage .CompanionReaderQuiz-wrap {
        transform: scale(0.85);
    }

    button.active.md-button.md-ink-ripple.activeLesson {
        right: 5% !important;
    }

    .modal .modal-dialog {
        margin-left: 25px;
    }

    .landscape #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .landscape #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 30vh !important;
        min-height: auto;
    }

    .landscape .interactivityfullScreen #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .landscape .interactivityfullScreen #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 48vh !important;
    }

    .interactivity .flip-divider {
        min-height: auto !important;
        height: 35vh !important;
    }

    .landscape .CulminatingPick .culminatingWrdImg {
        height: 96px !important;
    }

    .landscape .col-xs-5.main-flip.book-clips.upsideDownFlip .scene .front .spiral {
        width: 95%;
    }

    /* shoot the rocket */
    .landscape #Shoottherocket .alphabetButton {
        max-width: 145px;
        font-size: 12px;
        margin: 15px auto;
    }

    .landscape #Shoottherocket #shoot_game_div canvas {
        margin-top: 0px;
    }

    .landscape #Shoottherocket #shoot_gamescoreviewbox,
    .landscape #Shoottherocket #shoot_gamemissedviewbox {
        height: 35px !important;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0px;
        margin: 0 auto;
    }

    .landscape #Shoottherocket .ScoreBar {
        margin-top: 30px;
    }

    .landscape #Shoottherocket #balloonContainerGame {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (min-width: 1360px) and (max-width: 1366px) and (min-height: 450px) and (max-height: 549px) {
    .landscape #SightWordBlast #scoreboard {
        margin-top: 0;
        margin-right: 7.5%;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        /* padding: 11% 0; */
    }

    .landscape .gameBody #SightWordBlast .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #SightWordBlast .contentBox .abcgame_readycount img {
        object-fit: fill;
        height: 100%;
    }

    /* save the planet  */
    .landscape #shootthestars #scoreboard {
        margin-top: 0;
        margin-right: 7.5%;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        /* padding: 11% 0; */
    }

    .landscape .gameBody #shootthestars .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #shootthestars .contentBox .abcgame_readycount img {
        object-fit: fill;
        height: 100%;
    }
}

@media only screen and (min-width: 1360px) and (max-width: 1366px) and (min-height: 550px) and (max-height: 570px) {
    .landscape #Shoottherocket {
        min-height: 100% !important;
    }

    .landscape #Shoottherocket .shoot_game_div {
        height: 417px !important;
        margin-left: 0% !important;
        margin-right: 0px !important;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 0;
        margin-right: 7.5%;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        /* padding: 10% 0; */
    }

    .landscape .gameBody #SightWordBlast .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #SightWordBlast .contentBox .abcgame_readycount img {
        object-fit: fill;
        height: 100%;
    }

    /* save the planet  */
    .landscape #shootthestars #scoreboard {
        margin-top: 0;
        margin-right: 7.5%;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0 !important;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        border-radius: 0px;
        overflow: hidden;
        margin: auto;
        /* padding: 10% 0; */
    }

    .landscape .gameBody #shootthestars .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #shootthestars .contentBox .abcgame_readycount img {
        object-fit: fill;
        height: 100%;
    }
}

@media only screen and (min-width: 1401px) and (max-width: 1500px) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        width: 100% !important;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 266px !important;
    }

    #SightWordBlast #scoreboard {
        height: 285px;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto !important;
        bottom: 25px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        width: 100% !important;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 266px !important;
    }

    #shootthestars #scoreboard {
        height: 285px;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0 !important;
        right: auto !important;
        bottom: 25px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media only screen and (min-width: 1401px) and (max-width: 1500px) and (min-height: 700) {
    #interactivity_div .contentBox .connectthedots-startgame-innerwrapper {
        transform: scale(1);
    }
}

@media only screen and (min-width: 1501px) and (max-width: 1600px) {

    /* added css for Book 1/Book3/Book4- All activities->Header gets trimmed at the beginning from 1367 to 1420 desktop size    */
    header .connect-dot-bg {
        width: 300px;
        left: 0;
    }

    /* end */
    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 250px;
    }

    .landscape .abcgame_horizontalbottom:before {
        width: 90%;
    }

    #SightWordBlast #scoreboard {
        height: 266px !important;
    }

    #SightWordBlast .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 25px !important;
        right: auto !important;
        bottom: 25px;
        width: 85%;
        display: flex;
        justify-content: center;
    }

    .CompanionReaderQuiz .options label.lableQuiz p {
        font-size: 20px;
    }

    .boardString {
        font-size: 18px !important;
        line-height: 36px !important;
        max-width: 48% !important;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 250px;
    }

    /* #shootthestars #scoreboard {
        height: 266px !important;
    } */

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        top: auto;
        left: 0px !important;
        right: auto !important;
        bottom: 25px;
        width: 85%;
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 1367px) and (min-height: 900px) {
    #interactivity_div .connectthedots-container #game_div {
        transform: scale(1.17);
    }
}

@media (min-width: 1501px) and (min-height: 1000px) {
    #interactivity_div .connectthedots-container #game_div {
        transform: scale(1.3);
    }
}

@media only screen and (min-width: 1365px) and (max-width: 1366px) and (min-height: 1023px) and (max-height: 1024px) and (orientation: landscape) {
    #interactivity_div .connectthedots-container #game_div {
        transform: scale(1.22);
    }

    .landscape #words_rhyiming .right_column {
        top: 10px;
    }

    .landscape .interactivity.interactivityfullScreen #interactivity_div .flip-divider {
        height: 55vh;
        max-height: 440px;
    }

    .landscape .interactivity #interactivity_div .flip-divider {
        height: 55vh;
        max-height: 400px;
    }

    .interactivity.interactivityfullScreen .draggable-wrap,
    .interactivity.interactivityfullScreen .source-preview {
        height: 36vh;
    }

    .interactivity .draggable-wrap,
    .interactivity .source-preview {
        height: 33vh;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        border-radius: 0px;
        width: 100%;
        margin: auto;
        padding-top: 0;
        height: 85%;
    }

    #SightWordBlast #scoreboard {
        margin-right: 8%;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        border-radius: 0px;
        width: 100%;
        margin: auto;
        /* padding-top: 15%; */
        height: 85%;
    }

    #shootthestars #scoreboard {
        margin-right: 8%;
    }

    /* shoot the rocket  */
    .landscape #Shoottherocket .contentBox {
        height: 100% !important;
        max-height: 700px !important;
        min-width: 700px;
    }

    .landscape #Shoottherocket #balloonContainerGame {
        height: 100% !important;
    }
}

@media (max-width:767px) {

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
        position: relative;
        min-height: 55px;
    }
    .save-progress-image {
        transform:scale(0.9) !important;
    }
    .portrait .letter-with-image .lettersequencetb1.demotrump img {
        padding: 0 !important;
    }

    .portrait .phonicsMain #noanim-tab-example a span.activity_names {
        width: 65%;
    }

    .portrait .ReactModalPortal .ReactModal__Content.ReactModal__Content--after-open {
        transform: translate(-50%, -50%) scale(0.5) !important;
    }

    .portrait .ReactModalPortal .ReactModal__Content.ReactModal__Content--after-open.instructionVideo {
        transform: translate(-50%, -50%) !important;
        position: absolute !important;
        width: auto !important;
        height: auto !important;
        top: 50% !important;
        left: 50% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-width: 100% !important;
    }

    .portrait .instruction-wrap img {
        width: 100%;
        height: 100%;
    }

    .portrait .menuTabHeader li button:before {
        display: none !important;
    }

    .portrait .head-level1 {
        left: 10px;
    }

    .portrait .intruction-inner-wrap button {
        width: 80px;
        font-size: 15px;
    }

    .instruction-wrap #interactivityIntroDiv {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 15px;
    }

    .landscape .ReactModalPortal .ReactModal__Content.ReactModal__Content--after-open {
        transform: translate(-50%, -50%) scale(0.5) !important;
    }

    .landscape #ereader_images .ereader-book {
        width: 78% !important;
    }

    .portrait .opposite_component .fa-star-o {
        margin: 0 2px;
        font-size: 30px;
    }

    .portrait #syllablepick .right_column {
        top: auto;
        position: absolute;
        right: 5px;
        width: auto;
        height: auto;
        left: auto;
    }

    .portrait #syllablepick_rightsidebar .circle_couting {
        display: flex;
        width: 100%;
    }

    .portrait .instruction_text .fa-info-circle {
        font-size: 23px;
    }

    .portrait #syllablepick .infoIcon i {
        font-size: 23px;
    }

    .portrait #syllablepick .infoIcon i#countins {
        margin-top: 10px;
    }

    .portrait .interactivity .right_column:before {
        width: 13px;
        height: 15px;
    }

    .portrait #syllablepick .right_column:before {
        /* width: 100%;
        height: 100%; */
        border-radius: 50%;
    }

    .portrait .CulminatingPick .container-fluid .row.mt-3k {
        width: 70%;
    }

    .portrait .interactivity .audio-text {
        font-size: 27px;
    }

    .portrait .draggable-wrap,
    .portrait .source-preview {
        padding: 5px;
        max-width: 115px;
        min-width: auto;
        max-height: none;
        height: 10vh !important;
        min-height: auto;
    }

    .portrait .clicksoundinteractivity .trumpCard_red {
        padding: 5px;
        max-width: 115px;
        min-width: auto;
        max-height: none;
        height: 15.5vh;
    }

    .portrait .interactivity .flashcard-turnOver .flash-card-row,
    .portrait .interactivity .flash-card-row {
        width: 85%;
    }

    .interactivity .flashcard-turnOver .flash-card-table .behind-door {
        width: 80%;
    }

    .portrait .interactivity .flip-divider {
        max-height: none;
        height: 24vh;
    }

    .portrait #syllablepick #syllable_contentbox {
        width: 100%;
    }

    .portrait .gameBody .contentBox {
        height: 50vh;
    }

    .portrait .connectthedots-centerlized-wrapper .contentBox {
        height: 78%;
    }

    .portrait .gameBody .abcSoundMatchWrapper .contentBox {
        height: 46vh;
    }

    .portrait #poptheballoons .poptheballoonspage4 .contentBox,
    .portrait .gameBody .lgfmainclass.gameWrapper .contentBox {
        height: auto;
        max-height: 50vh;
    }

    .portrait .gameContainer #game_div {
        width: 90%;
    }

    .portrait #syllablepick #syllable_contentbox {
        height: 28vh;
        margin-bottom: 0;
    }

    .portrait #interactivity_div {
        height: 100%;
    }

    .portrait #syllablepick .interactivityDiv_syllablepick #syllablepick_rightsidebar {
        margin-top: 0px !important;
    }

    .portrait .connectthedots-game-instruction-wrapper {
        width: 90%;
    }

    .gameBody .leftSideBar,
    .gameBody .rightSideBar {
        display: flex;
        align-items: center;
    }

    /* syllable-pick */
    .portrait #syllablepick .vowels-game-container {
        flex-direction: row !important;
    }

    .portrait #syllablepick_lefttsidebar {
        padding: 0 20px !important;
    }

    .portrait #syllablepick_rightsidebar .circle_couting ul li {
        width: 25%;
        margin: 0;
    }

    .portrait #syllablepick_rightsidebar .circle_couting ul li>div {
        width: 75px;
        height: 75px;
        font-size: 25px;
        border-bottom: 4px solid #ba9e2f;
    }

    .portrait #syllablepick_lefttsidebar .curve_text_div {
        border-radius: 55px;
        border: 5px solid #ba9e2f;
        height: 75px;
    }

    .portrait #syllablepick_lefttsidebar .curve_text_div h2 {
        font-size: 35px;
    }

    .portrait #syllablepick_lefttsidebar,
    .portrait #syllablepick_rightsidebar {
        width: 100%;
    }

    /* end */
    .portrait .gameBody .alphabetButton {
        border: 3px solid #fff;
        font-size: 18px;
    }

    .portrait .gameBody .leftSideBar .row {
        margin-left: 2px;
        margin-right: 2px;
    }

    /*Sl3-6533,stars shrinking on mobile device. Rev: Arjun */
    .portrait .gameBody .stars li i,
    .portrait #abcMatchMainBody .abcmatch_starBody .stars li i {
        font-size: 25px !important;
    }

    .portrait .gameBody .clock img,
    .portrait .gameBody .graphics img {
        max-width: 70px;
    }

    .portrait .gameBody .timer {
        font-size: 18px;
        text-align: center;
        width: 103px;
        padding: 0px 0;
        margin-top: 0px;
    }

    .portrait .timer-wrap {
        /*         position: absolute; */
        left: 0;
        right: 0;
        bottom: 8px;
    }

    .portrait .gameBody .clock canvas,
    .portrait .gameContainer .rightSideBar #rhs-canvas,
    .portrait .gameBody #sound-match-rhs-canvas {
        width: 70px;
        height: 70px;
    }

    .portrait .gameBody .rightSideBar .row.clock {
        width: 67% !important;
    }

    .portrait .gameBody .controlButtons ul li {
        max-width: 25px;
        max-height: 25px;
    }

    .portrait .gameBody .controlButtons ul li i {
        font-size: 12px;
    }

    .gameContainer #optionalScreen .abcgame_optgamethumbnail {
        background-size: cover;
    }

    .gameContainer #optionalScreen .optionalGameLogo {
        width: 83px;
        height: 56px;
    }

    .portrait .gameContainer #optionalScreen .optionalGameLogo.gameLogo_3 {
        width: 105px;
        height: 47px;
    }

    .portrait .gameContainer #optionalScreen .optionalGameLogo.gameLogo_2 {
        width: 139px;
        height: 50px;
    }

    .portrait .abcgame_SMtimermodewrap:first-child {
        margin-left: 2%;
    }

    .portrait .abcgame_SMtimermodewrap {
        width: 27%;
        margin-right: 2%;
    }

    .portrait .gameBody .rightSideBar .row {
        width: 33%;
    }

    .portrait #abcBingoMainDiv .abcgame_bingoflipcard {
        width: 30.79%;
        height: 30.9%;
        margin: 5px;
    }

    .portrait #abcBingoMainDiv .abcgame_bingoflipcard3 {
        width: calc(33.33% - 10px) !important;
        height: calc(33.33% - 10px);
    }

    .portrait #abcBingoMainDiv .abcgame_bingoflipcard4 {
        width: calc(25% - 10px) !important;
        height: calc(25% - 10px);
    }

    .portrait #abcBingoMainDiv .abcgame_bingoContainerrow {
        justify-content: space-between;
    }

    .portrait #abcBingoMainDiv .abcgame_bingoContainerrow .leftSideBar .row,
    .portrait #abcBingoMainDiv .abcgame_bingoContainerrow .rightSideBar .row {
        width: 50%;
    }

    #abcBingoMainDiv .abcgame_bingohomebuttons.flex-30 .bingo-buttons:before {
        width: 16px;
        height: 16px;
        left: 18px;
    }

    div#abcBingoMainDiv .abcgame_bingohomebuttons.flex-30 .abcgame_bingomatrix {
        padding: 10px 16px;
        font-size: 16px;
    }

    .portrait .abcgame_bingoContainer .abcgame_bingoscoredetailbox input[type="button"] {
        font-size: 15px;
        padding: 18px;
    }

    .portrait .abcgame_abccol_portrait.abcgame_abcpick_floatPlayArea_portrait.reducesize {
        width: 100%;
        height: 100% !important;
    }

    #abcMatchMainBody .abcgame_abcpick_card {
        height: calc(50% - 5px);
        width: calc(20% - 10px);
        margin: 0 5px 5px 5px !important;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_matchHead {
        background-size: contain;
        width: 160px;
        padding: 3px 0 !important;
        height: 44px;
        top: 7px;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_matchHeadContent {
        font-size: 11px;
        color: #fff;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_matchHeadContent div {
        font-size: 12px;
        line-height: 10px;
        width: auto !important;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:first-child .abcgame_abcpick_imgbox {
        padding: 16px 0 0 0;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_card {
        height: calc(50% - 5px);
        width: calc(20% - 10px);
        margin: 0 5px 5px 5px !important;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_gamePlayInnerRow:nth-child(2) .abcgame_abcpick_imgbox.abcgame_abcpick_imgbox2 {
        padding: 6px 0;
        height: calc(100% - 24px);
    }

    .portrait .abcgame_abcpick_box_word {
        font-size: 19px;
    }

    #abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_gameResultTitle {
        font-size: 14px;
        padding: 12px 14px;
    }

    .gameBody .startletsgofishingrow .lgf_gameinstructpglayernxtbtnimg {
        margin: 0 !important;
        padding: 0 !important;
        position: static;
        background-repeat: no-repeat;
        margin-top: 9%;
        margin-bottom: 4%;
        background-size: contain;
        background-position: center;
    }

    .portrait .gameBody .abcgame_SMtimermode {
        font-size: 15px !important;
        line-height: 34px;
        margin: auto;
        width: 90%;
    }

    .portrait .gameBody .startletsgofishingrow .abcgame_SMtimermodeslow {
        box-shadow: 0px 5px 0px 1px #05479b;
    }

    .portrait .gameBody .startletsgofishingrow .abcgame_SMtimermoderegular {
        box-shadow: 0px 5px 0px 1px #9e1412;
    }

    .portrait .gameBody .startletsgofishingrow .abcgame_SMtimermodefast {
        box-shadow: 0px 5px 0px 1px #0f9325;
    }

    .portrait #interactivity_div .leftSideBar img {
        max-width: 56px !important;
    }

    .portrait #interactivity_div .abcSoundMatchWrapper .leftSideBar img {
        max-width: 65% !important;
    }

    .portrait #abcBingoMainDiv .abcgame_bingoContainerrow img {
        padding: 10px 0 0 0;
        max-width: 70% !important;
    }

    .portrait .gameBody .mode {
        margin: 0px auto 0 auto;
    }

    .portrait .gameContainer #SightWordBlast {
        justify-content: space-evenly;
    }

    .portrait .gameContainer #shootthestars {
        justify-content: space-evenly;
    }

    .portrait .gameBody .abcgame_abcpickrecommendedgame button {
        width: 111px;
    }

    .portrait #interactivity_div .connectthedots-startgame-innerwrapper {
        width: 70ch;
        height: 58ch;
        min-width: 600px;
    }

    .portrait #interactivity_div .connectthedots-canvas-container {
        width: 75ch !important;
    }

    /* .portrait #interactivity_div .connectthedots-dotsContainer {
        width: 75ch;
    } */
    /* .portrait #interactivity_div .connectthedots-outputimg-container{
        width: 70ch;
    } */
    .portrait #abcMatchMainBody .abcgame_abcpick_gameResult {
        height: 143px;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_fleft {
        font-size: 11px;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_fright {
        font-size: 11px;
    }

    .portrait #abcMatchMainBody .abcgame_abcpick_getreadyParentWrap {
        width: 40%;
    }

    .portrait #abcMatchMainBody div#game_level_complete .abcgame_abcpick_gameResultWrapper {
        width: 60%;
    }

    .portrait .monkeystatic {
        width: 15%;
        height: 50%;
        top: 14%;
    }

    .portrait .birdstatic {
        width: 11%;
        height: 16%;
        right: 1px;
        top: 47%;
    }

    .portrait .gameContainer .abcgame_bingologo,
    .portrait .gameContainer .bingoLogo {
        width: 200px;
        height: 220px;
    }

    .portrait .CulminatingPick .culminatingWrdImg {
        height: 14.5vh;
    }

    .portrait .interactivityfullScreen .CulminatingPick .culminatingWrdImg {
        height: 19.5vh;
    }

    .portrait .CulminatingPick .pickbeginingwrap .dagable-names {
        margin: 0px 0 15px 0;
        padding: 0;
    }

    .portrait .alphabet-div .form-group input {
        height: 30px;
        font-size: 16px;
    }

    /* To resolve SL3-5423: Phonics->L3->S2->On opening instructions, the dark background should appear all over the screen */
    /* .portrait #flipping_leatherbook #carousel {
        height: 70%;
    } */
    .portrait #calenderFlipCardMainDiv .main-flip {
        width: 100%;
    }

    .portrait div#calenderFlipCardMainDiv .three-cards-wrapper .main-flip.upsideDownFlip {
        margin-top: 10px;
    }

    .portrait .col-xs-6.three-cards-wrapper {
        width: 100%;
        padding: 0;
        height: auto;
    }

    .portrait #calenderFlipCardMainDiv .main-flip:nth-child(2),
    .portrait #calenderFlipCardMainDiv .main-flip:nth-child(3) {
        width: 100%;
        margin-top: 20px;
    }

    .portrait #calenderFlipCardMainDiv .one-card .main-flip.upsideDownFlip {
        width: 100%;
    }

    .portrait .carousalFlipCard .container.calendar-row .upsideDownFlip,
    .portrait .carousalFlipCard .container.calendar-row .row,
    .portrait .carousalFlipCard .container.calendar-row .noCalendarFlip {
        max-height: none;
    }

    .carousalFlipCard .container.calendar-row .row {
        padding: 0;
    }

    .portrait #calenderFlipCardMainDiv .main-flip.noCalendarFlip {
        margin-top: 32px;
    }

    .portrait .interactivityfullScreen #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .portrait .interactivityfullScreen #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 23vh !important;
    }

    .portrait #calenderFlipCardMainDiv .main-flip:nth-child(2) .cell-space.cardUp,
    .portrait #calenderFlipCardMainDiv .main-flip .scene.flipallcard,
    .portrait #calenderFlipCardMainDiv .width-100 {
        width: 100%;
    }

    .portrait #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .portrait #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 18vh !important;
        min-height: 117px;
    }

    .portrait #calenderFlipCardMainDiv .one-card .upsideDownFlip .scene,
    .portrait #calenderFlipCardMainDiv .one-card .main-flip .cell-space {
        height: 22vh !important;
    }

    .portrait #calenderFlipCardMainDiv .main-flip .cell-space .cardfront-text span,
    .portrait #calenderFlipCardMainDiv h1 {
        font-size: 34px;
    }

    .portrait .upsideDownFlip .spiral,
    .portrait .upsideDownFlip .spiral-right {
        height: 35px;
        top: -21px;
        left: 0;
        right: 0;
        margin: auto;
        width: 95%;
    }

    .portrait .col-xs-5.main-flip.book-clips.upsideDownFlip .scene .front .spiral {
        width: 95%;
    }

    .portrait #billBoard.letter-with-image .twoflash-cont {
        height: 100%;
    }

    .portrait #billBoard .demotrumpCard.layout-fill .layout-fill {
        width: 100%;
        padding: 0;
    }

    .portrait #billBoard #carousel .level2 {
        padding: 0;
    }

    .portrait .board-stand:before,
    .portrait .board-stand:after {
        width: 62px;
        height: 40px;
    }

    .portrait .board-stand {
        height: 55px;
        max-width: 80%;
    }

    .portrait #billBoard .demotrumpCard {
        height: 26vh;
    }

    .portrait #billBoard.bill-board-light {
        background-size: 100% 100%;
        height: 90vh;
    }

    .portrait #billBoard.bill-board-light .twoflash-cont .sq-animate2:after {
        right: -20px;
        width: 100px;
        height: 100px;
        top: -96px;
    }

    .portrait #billBoard.bill-board-light .demotrumpCard span.ng-binding {
        letter-spacing: 2px;
        margin-top: 0;
    }

    .portrait #billBoard.bill-board-light img.preroll-img {
        margin: -60px auto 0 auto !important;
    }

    .portrait .interactivity #billBoard.bill-board-light .audio-text .align-middle {
        align-items: center;
    }

    .portrait .CompanionReaderQuiz .Questioncount {
        width: 53%;
        padding: 7px 4.5px !important;
    }

    .portrait .CompanionReaderQuiz .QuestionCnt {
        width: 100%;
    }

    .portrait .CompanionReaderQuiz:before,
    .portrait .CompanionReaderQuiz:after {
        height: 13%;
    }



    .portrait .CompanionReaderQuiz .Questioncount .count {
        font-size: 20px;
        margin: 0 0 0 16px;
    }

    .portrait .CompanionReaderQuiz .Questioncount .count.divider {
        margin: 0 16px 0 0;
    }

    .portrait .CompanionReaderQuiz .QuestionCnt,
    .portrait .CompanionReaderQuiz .options {
        font-size: 16px;
    }

    .portrait .CompanionReaderQuiz .options {
        margin-bottom: 20px;
    }

    .portrait .CompanionReaderQuiz button.optionChoice {
        height: 30px;
        font-size: 20px;
        min-width: 30px;
        display: inline-flex;
        /*SL3-5422: Phonics->L3->S2->Quiz-> The option numbers are right aligned*/
    }

    .portrait .CompanionReaderQuiz .options {
        width: 95%;
    }

    .CompanionReaderQuiz .QuestionCnt span.ng-binding {
        font-size: 18px;
    }

    .CompanionReaderQuiz .options label.lableQuiz {
        font-size: 16px;
    }

    .portrait .CompanionReaderQuiz .option-wrap {
        justify-content: center;
        margin-top: 20px;
    }

    .portrait .CompanionReaderQuiz .Questioncount .divider:before {
        transform: translate(-16%) rotate(121deg);
    }

    /** css added for SL3-6065**/
    #abcMatchMainBody #game_complete .abcgame_abcpick_eachlevelcongrats {
        height: 100px;
        margin-top: 10px;
    } 
    .portrait #interactivity_div .ancient-template .ancient-scroll-wrapper {
            height: calc(100% - 300px) ;
        }
    
        .portrait #interactivity_div .ancient-template .audio-text {
           margin: auto auto 10px !important;
        }
}

@media (max-width:600px) {

    .portrait .interactivity .flip-divider,
    .portrait .interactivity .fisrt-sound-pick-wrapper {
        width: 50%;
        max-width: 50%;
    }

    .interactivity .click-rating {
        margin: 10px 0 !important;
    }

    .portrait .interactivity .flip-divider {
        max-height: none;
        margin: 0 0 15px 0;
        height: 23vh;
        padding: 0 19px;
    }

    /* .portrait .interactivity.interactivityfullScreen .flip-divider {
        height: 20vh;
    } */
    .portrait .interactivity .book3-click-flip .testcard1_ff {
        font-size: 8vmin;
    }

    .portrait .audio-text {
        font-size: 13px !important;
    }

    .portrait .interactivity .audio-text .align-middle .visibilityHidden {
        display: none;
    }

    .portrait .interactivity .audio-text .align-middle {
        height: 85px !important;
    }

    .portrait .interactivity #flipping_leatherbook .wrapper-div .audio-text .align-middle {
        height: 150px !important;
    }

    .portrait .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .align-middle {
        height: auto !important;
    }

    .portrait .interactivityParentDiv .ancient-template .audio-text .align-middle,
    .portrait .interactivityfullScreen .ancient-template .audio-text .align-middle,
    .portrait div#calenderFlipCardMainDiv.Drone1 .audio-text .align-middle,
    .portrait #interactivity_div #calenderFlipCardMainDiv .flipcardInteractivity .audio-text .align-middle {
        height: auto !important;
    }

    .portrait .interactivity .click-rating span.repeat-icon {
        margin: 0 0 0 5px !important;
        padding: 0px 4px;
        line-height: 18px;
        font-size: 9px;
    }

    .portrait .opposite_component .fa-star,
    .portrait .opposite_component .fa-star-o {
        font-size: 14px;
    }

    .portrait .interactivity .flashcard-turnOver div .instruction_text,
    .portrait .interactivity div .instruction_text {
        margin: 0;
        padding: 0;
    }

    .portrait .right-btns-grp {
        right: 5px;
    }

    .portrait .icon-volume {
        width: 27px;
        height: 27px;
        min-width: 27px;
        min-height: 27px;
    }

    .portrait .slow_sound {
        width: 27px;
        height: 27px;
        margin: auto 0 auto 5px;
    }

    .portrait .slow_sound i.icon-turtle-slow {
        width: 27px;
        height: 27px;
    }

    .portrait .content-pagination li {
        padding: 0;
    }

    .fullscreenEL {
        width: 25px;
        height: 25px;
    }

    .portrait header .isMobilePortrait .logo-wrap {
        justify-content: center;
        display: flex;
        height: 45px;
    }

    .portrait .phonics-logo,
    .portrait .text-book2 .phonics-logo {
        width: 94px;
    }

    .portrait .abcgame_smplayagain {
        width: 41%;
    }
}

@media (max-height: 599.98px) {
    .portrait .interactivity .flip-divider {
        max-height: none;
        margin: 0 0 15px 0;
        height: 17vh;
        padding: 0 19px;
    }

    .portrait #calenderFlipCardMainDiv .one-card .upsideDownFlip .scene,
    .portrait #calenderFlipCardMainDiv .one-card .main-flip .cell-space {
        height: 16.8vh !important;
    }

    #calenderFlipCardMainDiv .flipcardInteractivity {
        min-height: 400px;
    }

    /* .portrait #root {
        height: 100vh !important; 
    } */
    .wordCardDiv {
        margin-top: 5px;
    }
}

@media (max-height:420px) {
    .landscape .clicksoundinteractivity .wordbeginingsound .trumpCard_red {
        height: 22vh;
        min-height: 119px;
    }

    .landscape.iphoneLandscape #flipping_leatherbook .bookTemplate {
        height: 65% !important;
        padding-bottom: 3px !important;
    }

    .landscape.iphoneLandscape:has(.headerfull) #flipping_leatherbook .bookTemplate{
        height: 70% !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width:350px) {
    .portrait .interactivity .click-rating span.repeat-icon {
        padding: 0px 4px;
        line-height: 20px;
        font-size: 11px;
    }

    .portrait .opposite_component .fa-star,
    .portrait .opposite_component .fa-star-o {
        margin: 0 1px;
        font-size: 18px;
    }

    .portrait .icon-volume,
    .portrait .slow_sound {
        width: 23px;
        height: 23px;
         min-width: 23px;
        min-height: 23px;
    }

    .portrait .slow_sound i.icon-turtle-slow {
        width: 23px;
        height: 23px;
    }
}

@media (max-height: 380px) {
    .landscape .clicksoundinteractivity .wordbeginingsound .trumpCard_red {
        height: 19vh;
    }

    /* Resolve SL3-4203: iphone 6- landscape- scroll should not get display  */
    .landscape #interactivity_div #dragContainer {
        min-height: 249px;
    }
}

@media (max-height:350px) {
    .landscape .Contraction-wrap>div {
        top: 5px;
        font-size: 13px;
    }

    .landscape .Contraction-wrap img {
        width: 55%;
    }

    .landscape #contraction-activity .sentenceSpan {
        font-size: 1.5vw !important;
    }

    .landscape #contraction-activity i.icon-volume,
    .landscape #contraction-activity .slow_sound,
    .landscape #contraction-activity .slow_sound i.icon-turtle-slow {
        height: 26px !important;
        width: 26px !important;
    }

    .landscape .contraction-card {
        margin: 0px 0 0 0;
    }

    .landscape .three-box-wrapper {
        height: 109px;
    }

    .landscape .basket-apple {
        width: 20%;
        margin-top: 1px;
    }

    .landscape .contraction-string h3 {
        font-size: 14px;
    }

    .landscape .basket-apple.contractionQuestion {
        margin-top: 4px;
        margin-left: -7px;
    }

    .landscape .interactivity .align-middle .sentenceSpan {
        max-width: 75%;
    }
}


/* @media (max-height: 374.95px) {
    .landscape .interactivity .flip-divider {
        min-height: auto !important;
        height: 29vh !important;
    }
    .landscape #calenderFlipCardMainDiv .upsideDownFlip .scene, .landscape #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 30vh !important;
        min-height: auto;
    }
} */

#interactivity_div .align-middle .d-flex {
    display: flex
}

.d-flex {
    display: flex
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.fullScreenIcon {
    position: absolute;
    bottom: 10px;
}


/* new css for iphone pixel devices portrait */

@media (max-width: 349px) and (min-width: 320px) and (orientation: portrait) {

    /* for nokia device and lower resolution then 350px  */
    .portrait .lesson-wrap li strong {
        font-size: 10px !important;
    }

    .portrait header .letters-text-wrap {
        max-width: 145px !important;
    }

    .portrait .stageCnt {
        transform: scale(0.90);
    }

    /* end */

    #Shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    .portrait #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 81%;
        margin: auto;
    }

    .portrait #strocket-first .abcgame_maincontainerContent {
        background-size: 100% 100% !important;
        background-position: center;
    }

    #SightWordBlast .contentBox {
        height: 45vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #SightWordBlast .leftSideBar,
    #SightWordBlast .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 15px auto; */
    }

    .portrait #SightWordBlast .row.clock canvas {
        width: 50px !important;
        height: 50px !important;
    }

    .portrait #SightWordBlast .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #SightWordBlast .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -45px;
    }

    .portrait #SightWordBlast .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #SightWordBlast .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #SightWordBlast .controlButtons ul li {
        width: 25px;
        height: 25px;
    }

    #SightWordBlast .controlButtons ul li i {
        font-size: 10px;
    }

    #SightWordBlast .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 15px;
        width: 75px;
    }

    #SightWordBlast .button-book {
        transform: scale(0.7);
        min-height: 50px;
        min-width: 100%;
        width: 100%;
        font-size: 12px;
        padding: 0;
    }

      /* Star alignment with flex done  */

    /* #SightWordBlast .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    #strocket-first .abcgame_sminstructions {
        top: 8%;
    }

    .portrait #strocket-first .abcgame_smlogo {
        width: 50%;
    }

    #strocket-first .abcgame_SMtimermodewrap:first-child {
        margin-left: 3%;
    }

    #strocket-first .abcgame_SMtimermodewrap {
        width: 27%;
        margin-right: 4%;
    }

    #SightWordBlast .abcgame_SMtimermode {
        font-size: 16px;
    }

    #button-book h4 {
        font-size: 12px;
    }

    .portrait #SightWordBlast .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 8px;
        left: 0px;
        font-size: 6.5px;
    }

    .portrait #SightWordBlast .abcgame_abcpick_resultanim {
        height: 108px;
        position: relative;
        margin-top: 32%;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 7% !important;
    }

    .portrait #SightWordBlast .abcgame_readycount {
        height: 105px !important;
        margin-top: 70%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 22px;
    }

    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 14px !important;
        position: absolute;
    }

    .portrait #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 20px;
    }

    #SightWordBlast .stars li i {
        font-size: 12px;
    }

    #SightWordBlast .mode {
        font-size: 14px;
        margin: 3px auto 0 15px;
        height: 10px;
    }

    #Shoottherocket .ScoreBar {
        flex-direction: column;
        width: 25% !important;
    }

    /* shoot the stars  */
    #shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    .portrait #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        width: 81%;
        margin: auto;
    }

    .portrait #strocket-first .abcgame_maincontainerContent {
        background-size: 100% 100% !important;
        background-position: center;
    }

    #shootthestars .contentBox {
        height: 38vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #shootthestars .leftSideBar,
    #shootthestars .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 15px auto; */
    }

    .portrait #shootthestars .row.clock canvas {
        width: 50px !important;
        height: 50px !important;
    }

    .portrait #shootthestars .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #shootthestars .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait #shootthestars .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #shootthestars .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #shootthestars .controlButtons ul li {
        width: 25px;
        height: 25px;
    }

    #shootthestars .controlButtons ul li i {
        font-size: 10px;
    }

    #shootthestars .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 15px;
        width: 75px;
    }

    #shootthestars .button-book {
        transform: scale(0.7);
        min-height: 50px;
        min-width: 100%;
        width: 100%;
        font-size: 12px;
        padding: 0;
    }
     /* Star alignment with flex done  */

    /* #shootthestars .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    .portrait .gameContainer #shootthestars {
        flex-direction: column;
    }

    #strocket-first .abcgame_sminstructions {
        top: 8%;
    }

    .portrait #strocket-first .abcgame_smlogo {
        width: 50%;
    }

    #strocket-first .abcgame_SMtimermodewrap:first-child {
        margin-left: 3%;
    }

    #strocket-first .abcgame_SMtimermodewrap {
        width: 27%;
        margin-right: 4%;
    }

    #shootthestars .abcgame_SMtimermode {
        font-size: 16px;
    }

    #button-book h4 {
        font-size: 12px;
    }

    .portrait #shootthestars .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 8px;
        left: 0px;
        font-size: 5px;
    }

    .portrait #shootthestars .abcgame_abcpick_resultanim {
        height: 108px;
        position: relative;
        margin-top: 32%;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 7% !important;
    }

    .portrait #shootthestars .abcgame_readycount {
        height: 105px !important;
        margin-top: 0%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 22px;
    }

    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 14px !important;
        position: absolute;
    }

    .portrait #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 20px;
    }

    #shootthestars .stars li i {
        font-size: 12px;
    }

    #shootthestars .mode {
        font-size: 14px;
        margin: 3px auto 0 15px;
        height: 10px;
    }
}

@media (max-width: 370px) and (min-width: 350px) and (orientation: portrait) {
    #Shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    #Shoottherocket .ScoreBar {
        flex-direction: column;
        width: 25% !important;
    }

    #SightWordBlast .mode {
        font-size: 14px;
        margin: 3px auto 0 15px;
        height: 10px;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 82%;
        margin: auto;
    }

    .portrait #strocket-first .abcgame_maincontainerContent {
        background-size: cover !important;
        background-position: center;
    }

    #SightWordBlast .contentBox {
        height: 45vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #SightWordBlast .leftSideBar,
    #SightWordBlast .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 30px auto; */
    }

    .portrait #SightWordBlast .row.clock canvas {
        width: 50px !important;
        height: 50px !important;
    }

    .portrait #SightWordBlast .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #SightWordBlast .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -45px;
    }

    .portrait #SightWordBlast .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #SightWordBlast .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #SightWordBlast .controlButtons ul li {
        width: 25px;
        height: 25px;
    }

    #SightWordBlast .controlButtons ul li i {
        font-size: 10px;
    }

    #SightWordBlast .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 15px;
        width: 75px;
    }

    #SightWordBlast .button-book {
        transform: scale(0.7);
        min-height: 50px;
        min-width: 100%;
        width: 100%;
        font-size: 12px;
        padding: 0;
    }
      /* Star alignment with flex done  */

    /* #SightWordBlast .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    #strocket-first .abcgame_sminstructions {
        top: 8%;
    }

    .portrait #strocket-first .abcgame_smlogo {
        width: 50%;
    }

    #strocket-first .abcgame_SMtimermodewrap:first-child {
        margin-left: 3%;
    }

    #strocket-first .abcgame_SMtimermodewrap {
        width: 27%;
        margin-right: 4%;
    }

    #SightWordBlast .abcgame_SMtimermode {
        font-size: 16px;
    }

    #button-book h4 {
        font-size: 12px;
    }

    .portrait #SightWordBlast .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 15px;
        left: 0px;
        font-size: 8px;
    }

    .portrait #SightWordBlast .abcgame_abcpick_resultanim {
        height: 135px;
        position: relative;
        margin-top: 28%;
    }

    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 7% !important;
    }

    .portrait #SightWordBlast .abcgame_readycount {
        height: 127px !important;
        margin-top: 70%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 22px;
    }

    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 15px !important;
        position: absolute;
    }

    .portrait #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    #SightWordBlast .stars li i {
        font-size: 12px;
    }

    /* save the planet  */
    #Shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    #shootthestars .ScoreBar {
        flex-direction: column;
        width: 25% !important;
    }

    #shootthestars .mode {
        font-size: 14px;
        margin: 3px auto 0 15px;
        height: 10px;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        width: 82%;
        margin: auto;
    }

    #shootthestars .contentBox {
        height: 38vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #shootthestars .leftSideBar,
    #shootthestars .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 30px auto; */
    }

    .portrait #shootthestars .row.clock canvas {
        width: 50px !important;
        height: 50px !important;
    }

    .portrait #shootthestars .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #shootthestars .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait #shootthestars .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #shootthestars .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #shootthestars .controlButtons ul li {
        width: 25px;
        height: 25px;
    }

    #shootthestars .controlButtons ul li i {
        font-size: 10px;
    }

    #shootthestars .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 15px;
        width: 75px;
    }

    #shootthestars .button-book {
        transform: scale(0.7);
        min-height: 50px;
        min-width: 100%;
        width: 100%;
        font-size: 12px;
        padding: 0;
    }
     /* Star alignment with flex done  */

    /* #shootthestars .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    .portrait .gameContainer #shootthestars {
        flex-direction: column;
    }

    #shootthestars .abcgame_SMtimermode {
        font-size: 16px;
    }

    .portrait #shootthestars .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 15px;
        left: 0px;
        font-size: 6px;
    }

    .portrait #shootthestars .abcgame_abcpick_resultanim {
        height: 135px;
        position: relative;
        margin-top: 7%;
    }

    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 7% !important;
    }

    .portrait #shootthestars .abcgame_readycount {
        height: 127px !important;
        margin-top: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 22px;
    }

    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 15px !important;
        position: absolute;
    }

    .portrait #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 22px;
    }

    #shootthestars .stars li i {
        font-size: 12px;
    }
}

@media (max-height: 600px) and (max-width: 1366px) {
    .landscape #billBoard.bill-board-light {
        background-size: 100%;
        padding: 0;
    }

    .landscape .gameBody #abcsoundmatch {
        overflow-y: visible;
    }
}

@media (max-width: 400px) {
    .portrait .gameBody .controlButtons ul li {
        margin: 0 2px;
    }

    .portrait #abcBingoMainDiv .abcgame_bingoflipcard {
        width: 30.4%;
    }
}

@media (max-width: 400px) and (min-width: 371px) and (orientation: portrait) {

    /* css for  Phonics->2->2->2->1->[Iphone 7]->The book appears to be trimmed from bottom */
    /* html.portrait #lesson_ifr #flipbook-viewport .flipbook-viewport .leather-book-page {
        height: 100% ​ !important;
    }

    html.portrait #flipbook-viewport .flipbook-viewport .leather-book-page .page-wrapper {
        height: 254px !important;
    }

    html.portrait #flipbook-viewport .flipbook-viewport .leather-book-page .page-wrapper>div {
        height: 240px !important;
    }

    html.portrait #flipbook_interactivity.word_toknow .page.even {
        height: 205px !important;
    }

    html.portrait #flipbook_interactivity.word_toknow .page.odd {
        height: 205px !important;
    } */
    /* end  */
    #Shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    #SightWordBlast .mode {
        font-size: 14px;
        margin: 3px auto 0 45px;
        height: 10px;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 100%;
        margin: auto;
        border-radius: 0;
    }

    .portrait #strocket-first .abcgame_maincontainerContent {
        background-size: cover !important;
        background-position: center;
    }

    #SightWordBlast .contentBox {
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #SightWordBlast .leftSideBar,
    #SightWordBlast .rightSideBar {
        display: flex;
        align-items: center;
        margin: 0px auto !important;
    }

    .portrait #SightWordBlast .row.clock canvas {
        width: 70px;
        height: 70px;
    }

    .portrait #SightWordBlast .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #SightWordBlast .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -45px;
    }

    .portrait #SightWordBlast .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #SightWordBlast .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #SightWordBlast .controlButtons ul li {
        width: 30px;
        height: 30px;
    }

    #SightWordBlast .controlButtons ul li i {
        font-size: 12px;
    }

    #SightWordBlast .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 40px;
        width: 70px;
    }

    #SightWordBlast .button-book {
        transform: scale(0.7);
    }

    /* Star alignment with flex done  */

    /* #SightWordBlast .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    #strocket-first .abcgame_sminstructions {
        top: 8%;
    }

    .portrait #strocket-first .abcgame_smlogo {
        width: 50%;
    }

    #strocket-first .abcgame_SMtimermodewrap:first-child {
        margin-left: 3%;
    }

    #strocket-first .abcgame_SMtimermodewrap {
        width: 27%;
        margin-right: 4%;
    }

    #SightWordBlast .abcgame_SMtimermode {
        font-size: 16px;
    }

    #button-book h4 {
        font-size: 15px;
    }

    .portrait #SightWordBlast .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 15px;
        left: 0px !important;
    }

    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 7% !important;
    }

    .portrait #SightWordBlast .abcgame_readycount {
        height: 152px !important;
        margin-top: 60%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 30px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 20px !important;
        position: absolute;
    }

    .portrait #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 25px;
    }

    #SightWordBlast .stars li i {
        font-size: 15px;
    }

    #SightWordBlast .button-book {
        transform: scale(0.8);
        min-height: 60px;
        min-width: 100%;
        width: 100%;
        font-size: 15px;
        padding: 2px;
    }

    #Shoottherocket .ScoreBar {
        flex-direction: column;
        width: 25% !important;
    }

    /* save the planet  */
    #shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    #shootthestars .mode {
        font-size: 14px;
        margin: 3px auto 0 45px;
        height: 10px;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        width: 100%;
        margin: auto;
        border-radius: 0;
    }

    #shootthestars .contentBox {
        height: 38vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #shootthestars .leftSideBar,
    #shootthestars .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 10px auto; */
    }

    .portrait #shootthestars .row.clock canvas {
        width: 70px;
        height: 70px;
    }

    .portrait #shootthestars .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #shootthestars .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -45px;
    }

    .portrait #shootthestars .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #shootthestars .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #shootthestars .controlButtons ul li {
        width: 30px;
        height: 30px;
    }

    #shootthestars .controlButtons ul li i {
        font-size: 12px;
    }

    #shootthestars .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 40px;
        width: 70px;
    }

    #shootthestars .button-book {
        transform: scale(0.7);
    }

     /* Star alignment with flex done  */

    /* #shootthestars .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    .portrait .gameContainer #shootthestars {
        flex-direction: column;
    }

    #shootthestars .abcgame_SMtimermode {
        font-size: 16px;
    }

    .portrait #shootthestars .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 15px;
        left: 0px !important;
    }

    .portrait #shootthestars .abcgame_abcpick_gameResult .abcgame_scoreBtns {
        bottom: 15px !important;
        top: auto !important;
    }

    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 7% !important;
        margin-top: 5%;
    }

    .portrait #shootthestars .abcgame_readycount {
        height: 152px !important;
        margin-top: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 30px;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 20px !important;
        position: absolute;
    }

    .portrait #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 25px;
    }

    #shootthestars .stars li i {
        font-size: 15px;
    }

    #shootthestars .button-book {
        transform: scale(0.8);
        min-height: 60px;
        min-width: 100%;
        width: 100%;
        font-size: 15px;
        padding: 2px;
    }

    /* shoot  the rocket  */
    .portrait #Shoottherocket .rightSideBar .row {
        width: 45% !important;
    }

    #Shoottherocket .mode {
        font-size: 14px;
        margin: 3px auto 0 25px;
        height: auto;
        width: 75%;
        text-align: center;
    }

    #Shoottherocket .abcgame_abcpick_alertSelectLevelOverlay {
        width: 100%;
        margin: auto;
        border-radius: 0;
    }

    #Shoottherocket .contentBox {
        height: 48vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #Shoottherocket .leftSideBar,
    #Shoottherocket .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 20px auto; */
    }

    .portrait #Shoottherocket .row.clock canvas {
        width: 70px;
        height: 70px;
    }

    .portrait #Shoottherocket .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #Shoottherocket .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -52px;
    }

    .portrait #Shoottherocket .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #Shoottherocket .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #Shoottherocket .controlButtons ul li {
        width: 30px;
        height: 30px;
    }

    #Shoottherocket .controlButtons ul li i {
        font-size: 12px;
    }

    #Shoottherocket .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 25px;
        width: 70px;
    }

    #Shoottherocket .button-book {
        transform: scale(0.7);
    }
/* 
    #Shoottherocket .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    .portrait .gameContainer #Shoottherocket {
        flex-direction: column;
    }

    #Shoottherocket .abcgame_SMtimermode {
        font-size: 16px;
    }

    .portrait #Shoottherocket .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 15px;
        left: 0px !important;
    }

    .portrait #Shoottherocket .abcgame_abcpick_resultanim {
        height: 162px;
        position: relative;
        margin-top: 20%;
    }

    .portrait #Shoottherocket .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 7% !important;
    }

    .portrait #Shoottherocket .abcgame_readycount {
        height: 152px !important;
        margin-top: 60%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 30px;
    }

    #Shoottherocket .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 20px !important;
        position: absolute;
    }

    .portrait #Shoottherocket .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 25px;
    }

    #Shoottherocket .stars li i {
        font-size: 15px;
    }

    #Shoottherocket .button-book {
        transform: scale(0.8);
        min-height: 60px;
        min-width: 100%;
        width: 100%;
        font-size: 15px;
        padding: 2px;
    }

    .portrait #Shoottherocket .rightSideBar .timer-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        bottom: 0 !important;
    }
}

@media (max-width: 415px) and (min-width: 401px) and (orientation: portrait) {
    #Shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    #SightWordBlast .mode {
        font-size: 14px;
        margin: 3px auto 0 40px;
        height: 10px;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 97%;
        margin: auto;
        border-radius: 0;
    }

    .portrait #strocket-first .abcgame_maincontainerContent {
        background-size: cover !important;
        background-position: center center;
    }

    #SightWordBlast .contentBox {
        height: 48vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #SightWordBlast .leftSideBar,
    #SightWordBlast .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 20px auto; */
    }

    .portrait #SightWordBlast .row.clock canvas {
        width: 70px;
        height: 70px;
    }

    .portrait #SightWordBlast .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #SightWordBlast .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -45px;
    }

    .portrait #SightWordBlast .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #SightWordBlast .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #SightWordBlast .controlButtons ul li {
        width: 30px;
        height: 30px;
    }

    #SightWordBlast .controlButtons ul li i {
        font-size: 12px;
    }

    #SightWordBlast .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 43px;
        width: 70px;
    }

    #SightWordBlast .button-book {
        transform: scale(0.7);
    }
        
    /* Star alignment with flex done  */ 

    /* #SightWordBlast .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    #strocket-first .abcgame_sminstructions {
        top: 8%;
    }

    .portrait #strocket-first .abcgame_smlogo {
        width: 50%;
    }

    #strocket-first .abcgame_SMtimermodewrap:first-child {
        margin-left: 3%;
    }

    #strocket-first .abcgame_SMtimermodewrap {
        width: 27%;
        margin-right: 4%;
    }

    #SightWordBlast .abcgame_SMtimermode {
        font-size: 16px;
    }

    #button-book h4 {
        font-size: 15px;
    }

    .portrait #SightWordBlast .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 15px;
        /* left: 10px !important; */
    }

    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 8% !important;
    }

    .portrait #SightWordBlast .abcgame_readycount {
        height: 150px !important;
        margin-top: 65%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 30px;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 20px !important;
        position: absolute;
    }

    .portrait #SightWordBlast .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 25px;
    }

    #SightWordBlast .stars li i {
        font-size: 15px;
    }

    #SightWordBlast .button-book {
        transform: scale(0.8);
        min-height: 60px;
        min-width: 100%;
        width: 100%;
        font-size: 15px;
        padding: 2px;
    }

    #Shoottherocket .ScoreBar {
        flex-direction: column;
        width: 25% !important;
    }

    /* save the planet  */
    #shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    #shootthestars .mode {
        font-size: 14px;
        margin: 3px auto 0 40px;
        height: 10px;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        width: 97%;
        margin: auto;
        border-radius: 0;
    }

    #shootthestars .contentBox {
        height: 48vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #shootthestars .leftSideBar,
    #shootthestars .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 10px auto; */
    }

    .portrait #shootthestars .row.clock canvas {
        width: 70px;
        height: 70px;
    }

    .portrait #shootthestars .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #shootthestars .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -45px;
    }

    .portrait #shootthestars .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #shootthestars .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #shootthestars .controlButtons ul li {
        width: 30px;
        height: 30px;
    }

    #shootthestars .controlButtons ul li i {
        font-size: 12px;
    }

    #shootthestars .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 43px;
        width: 70px;
    }

    #shootthestars .button-book {
        transform: scale(0.7);
    }
       /* Star alignment with flex done  */

    /* #shootthestars .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    .portrait .gameContainer #shootthestars {
        flex-direction: column;
    }

    #shootthestars .abcgame_SMtimermode {
        font-size: 16px;
    }

    .portrait #shootthestars .abcgame_abcpick_gameResult div {
        top: auto !important;
        bottom: 15px;
    }

    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 8% !important;
    }

    .portrait #shootthestars .abcgame_readycount {
        height: 150px !important;
        margin-top: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 30px;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 20px !important;
        position: absolute;
    }

    .portrait #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn {
        height: 25px;
    }

    #shootthestars .stars li i {
        font-size: 15px;
    }

    #shootthestars .button-book {
        transform: scale(0.8);
        min-height: 60px;
        min-width: 100%;
        width: 100%;
        font-size: 15px;
        padding: 2px;
    }
}

@media (max-width: 464px) and (min-width: 416px) and (orientation: portrait) {
    #Shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    #Shoottherocket .ScoreBar {
        flex-direction: column;
        width: 25% !important;
    }

    .portrait #SightWordBlast .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 15px;
        left: 0px !important;
    }

    .portrait #SightWordBlast .abcgame_nextlevel,
    .portrait #SightWordBlast .abcgame_nextlevelBtn {
        height: 22px !important;
    }

    #SightWordBlast .mode {
        font-size: 14px;
        margin: 3px auto 0 50px;
        height: 10px;
    }

    #SightWordBlast .abcgame_readycount {
        height: 155px !important;
        margin-top: 68%;
        font-size: 20px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .portrait #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 8% !important;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 23px !important;
        position: absolute;
        top: 45%;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        width: 97%;
        margin: auto;
        border-radius: 0;
    }

    .portrait #strocket-first .abcgame_maincontainerContent {
        background-size: 100% 100% !important;
        background-position: center;
    }

    #SightWordBlast .contentBox {
        height: 48vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #SightWordBlast .leftSideBar,
    #SightWordBlast .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 20px auto; */
    }

    .portrait #SightWordBlast .row.clock canvas {
        width: 70px;
        height: 70px;
    }

    .portrait #SightWordBlast .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #SightWordBlast .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -45px;
    }

    .portrait #SightWordBlast .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #SightWordBlast .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #SightWordBlast .controlButtons ul li {
        width: 30px;
        height: 30px;
    }

    #SightWordBlast .controlButtons ul li i {
        font-size: 12px;
    }

    #SightWordBlast .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 55px;
        width: 70px;
    }

    #SightWordBlast .button-book {
        transform: scale(0.7);
    }
        /* Star alignment with flex done  */

    /* #SightWordBlast .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    #strocket-first .abcgame_sminstructions {
        top: 8%;
    }

    .portrait #strocket-first .abcgame_smlogo {
        width: 50%;
    }

    #strocket-first .abcgame_SMtimermodewrap:first-child {
        margin-left: 3%;
    }

    #strocket-first .abcgame_SMtimermodewrap {
        width: 27%;
        margin-right: 4%;
    }

    #SightWordBlast .abcgame_SMtimermode {
        font-size: 16px;
    }

    #button-book h4 {
        font-size: 15px;
    }

    /* save the planet  */
    #shootthestars .rightSideBar .row {
        width: 55% !important;
    }

    .portrait #shootthestars .abcgame_abcpick_gameResult div {
        top: auto;
        bottom: 15px;
        left: 0px !important;
    }

    .portrait #shootthestars .abcgame_nextlevel,
    .portrait #shootthestars .abcgame_nextlevelBtn {
        height: 22px !important;
    }

    #shootthestars .mode {
        font-size: 14px;
        margin: 3px auto 0 50px;
        height: 10px;
    }

    #shootthestars .abcgame_readycount {
        height: 155px !important;
        margin-top: 68%;
        font-size: 20px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .portrait #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin-right: 8% !important;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_readytext {
        font-size: 23px !important;
        position: absolute;
        top: 45%;
    }

    .portrait #shootthestars .abcgame_abcpick_resultanim {
        height: 162px;
        position: relative;
        margin-top: 30%;
    }

    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        width: 97%;
        margin: auto;
        border-radius: 0;
    }

    #shootthestars .contentBox {
        height: 48vh;
        width: 100%;
        padding: 0;
        width: 100%;
    }

    #shootthestars .leftSideBar,
    #shootthestars .rightSideBar {
        display: flex;
        align-items: center;
        /* margin: 10px auto; */
    }

    .portrait #shootthestars .row.clock canvas {
        width: 70px;
        height: 70px;
    }

    .portrait #shootthestars .gameBody .leftSideBar .row {
        width: 33%;
        text-align: center;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait #shootthestars .gameBody .stars li {
        margin: 2px;
        width: 10%;
    }

    .portrait .common-profile-wrap {
        float: right;
        margin-top: -45px;
    }

    .portrait #shootthestars .rightSideBar .row.clock {
        width: 40%;
    }

    .portrait #shootthestars .rightSideBar .row.controlButtons {
        width: 40%;
        margin-right: 25px;
    }

    #shootthestars .controlButtons ul li {
        width: 30px;
        height: 30px;
    }

    #shootthestars .controlButtons ul li i {
        font-size: 12px;
    }

    #shootthestars .rightSideBar .timer {
        font-size: 14px;
        margin: auto 0px auto 55px;
        width: 70px;
    }

    #shootthestars .button-book {
        transform: scale(0.7);
    }

   /* Star alignment with flex done  */

    /* #shootthestars .abcmatch-star-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto;
        justify-content: center;
        width: 100%;
    } */

    .portrait .gameContainer #shootthestars {
        flex-direction: column;
    }

    #shootthestars .abcgame_SMtimermode {
        font-size: 16px;
    }
}


/* all desktop scrren media query starts here  */

@media (min-width:990px) and (max-width:1100px) {
    .landscape #flipping_leatherbook #flipbook-viewport .imgStroke {
        /* width: 70% !important; */
    }
    .icon-volume,
   .slow_sound i.icon-turtle-slow {
       width: 35px;
       height: 35px;
   }

   .icon-volume {
       min-height: 35px;
       min-width: 35px;
   }
   #flipping_leatherbook.flip-book2 #flipbook-viewport .audio-text .sentenceSpan {
       max-width: 70% !important;
   }
}

@media (min-width:990px) and (max-width:999px) and (max-height:449px) {
    /* .landscape #lesson_ifr #interactivity_div #letter-sequence {
        min-height: 450px;
    } */

    #Shoottherocket {
        min-height: 450px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport {
        min-height: 570px;
        padding-bottom: 30px;
        margin: 0 !important;
    }

    .landscape #Shoottherocket #shoot_game_div {
        width: 70%;
        margin: 0 auto !important;
        height: auto !important;
        margin: 0 auto !important;
        top: auto;
        left: auto;
        position: absolute;
        transform: none;
    }

    .landscape .gameContainer {
        min-height: 420px;
        overflow-y: visible;
    }

    .landscape #strocket-first {
        min-height: 400px !important;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }
}

@media (min-width:990px) and (max-width:999px) and (min-height:450px) and (max-height:570px) {
    .landscape #lesson_ifr #interactivity_div #letter-sequence {
        min-height: 450px;
    }

    #Shoottherocket {
        min-height: 450px;
    }

    .landscape #Shoottherocket #shoot_game_div {
        width: 70%;
        margin: 0 auto !important;
        height: auto !important;
        margin: 0 auto !important;
        top: auto;
        left: auto;
        position: absolute;
        transform: none;
    }

    .landscape .gameContainer {
        min-height: 420px;
        overflow-y: visible;
    }

    .landscape #strocket-first {
        min-height: 400px !important;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport {
        min-height: 570px;
        padding-bottom: 30px;
        margin: 0 !important;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }
}

@media (min-width:990px) and (max-width:999px) and (min-height:571px) and (max-height:650px) {
    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.90);
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.80);
    }

    .billboard-words #billBoard {
        /* min-height: 595px; */
        padding: 20px 0;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }
}

@media (min-width:990px) and (max-width:999px) and (min-height:651px) and (max-height:768px) {
    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    .landscape #words_rhyiming .right_column {
        top: 10px;
    }

    .landscape #words_rhyiming {
        height: auto;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.87);
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.92);
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    /* save the planet */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }
}

@media (min-width:1000px) and (max-width:1024px) and (max-height:449px) {
    .landscape #lesson_ifr #interactivity_div #letter-sequence {
        min-height: 450px;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    .landscape #flipping_leatherbook #flipbook-viewport {
        min-height: 570px;
        padding-bottom: 30px;
        margin: 0 !important;
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }
}

@media (min-width:1000px) and (max-width:1024px) and (min-height:450px) and (max-height:570px) {
    .landscape #lesson_ifr #interactivity_div #letter-sequence {
        min-height: 450px;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport {
        min-height: 570px;
        padding-bottom: 30px;
        margin: 0 !important;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }
}

@media (min-width:1000px) and (max-width:1024px) and (min-height:571px) and (max-height:650px) {
    .billboard-words #billBoard {
        min-height: 595px;
        padding: 20px 0;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.80);
        margin-top: -20px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.80);
    }

    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 23% 0; */
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 23% 0; */
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5%;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }
}

@media (min-width:1000px) and (max-width:1024px) and (min-height:651px) and (max-height:767px) {
    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
        height: 100% !important;
    }

    .landscape #words_rhyiming .right_column {
        top: 10px;
    }

    .landscape #words_rhyiming {
        height: auto;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        /* transform: scale(0.90); */
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.90);
    }

    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5% !important;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
        height: 100% !important;
    }

    #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        margin: 0% 10% 0% 5% !important;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 14px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }
}

@media (min-width:1022px) and (max-width:1024px) and (min-height:767px) and (max-height:768px) and (orientation:landscape) {
    #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        height: 85%;
    }

    .landscape #appBody .ttheader {
        margin-top: 2px !important;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.85);
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.95);
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 240px;
        margin-top: 30%;
        margin-right: 8%;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        height: 227px !important;
        margin-top: 80%;
    }

    /* save the planet  */
    #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        height: 100%;
        width: 102%;
        left: -5px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        height: 240px;
        margin-top: 30%;
        margin-right: 8%;
    }

    .landscape #shootthestars .abcgame_readycount {
        height: 227px !important;
        margin-top: 80%;
    }

    .landscape #Shoottherocket .contentBox {
        height: 100% !important;
        max-height: 600px !important;
        min-width: 600px;
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (max-height:449px) and (orientation:landscape) {
    .landscape #lesson_ifr #interactivity_div #letter-sequence {
        min-height: 450px;
    }

    #Shoottherocket {
        min-height: 520px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport {
        min-height: 570px;
        padding-bottom: 30px;
        margin: 0 !important;
    }

    .landscape .abcgame_vertical {
        height: 80.3%;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 600px;
        overflow-y: visible;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 11% 0; */
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 11% 0; */
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }

    /* responsive css fpor recommemded books page  */
    .landscape #ereader_images .ereader-book {
        width: 70% !important;
        margin: auto;
    }

    .landscape .ereader_bookimages .ereader_images .ereader-divider {
        margin: 0 5px 0 5px;
        padding: 0px !important;
    }

    .landscape .ereader_bookimages .page_heading {
        font-size: 3vw !important;
        line-height: 3vw !important;
        padding: 10px 0 10px 0;
    }

    /* end */
}

@media only screen and (min-width:1025px) and (max-width:1800px)and (min-height:450px) and (max-height:549px) and (orientation:landscape) {
    .landscape #lesson_ifr #interactivity_div #letter-sequence {
        min-height: 450px;
    }

    #Shoottherocket {
        min-height: 520px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport {
        min-height: 570px;
        padding-bottom: 30px;
        margin: 0 !important;
    }

    .landscape .abcgame_vertical {
        height: 80.3%;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 600px;
        overflow-y: visible;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 11% 0; */
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 11% 0; */
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }

    /* responsive css fpor recommemded books page  */
    .landscape #ereader_images .ereader-book {
        width: 70% !important;
        margin: auto;
    }

    .landscape .ereader_bookimages .ereader_images .ereader-divider {
        margin: 0 5px 0 5px;
    }

    .landscape .ereader_bookimages .page_heading {
        font-size: 3vw !important;
        line-height: 3vw !important;
        padding: 10px 0 15px 0;
    }

    /* end */
}

@media only screen and (min-width:1025px) and (max-width:1800px)and (min-height:550px) and (max-height:570px) and (orientation:landscape) {
    .landscape #lesson_ifr #interactivity_div #letter-sequence {
        min-height: 450px;
    }

    .phonicsMain .menuDialog.modal-dialog {
        transform: scale(0.85) !important;
    }

    .menuTabHeader li button{
        width: 75px !important;
        height: 75px !important;
    }

    #Shoottherocket {
        min-height: 420px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport {
        min-height: 420px;
        padding-bottom: 0px;
        margin: 0 !important;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 100%;
        overflow-y: visible;
    }

    .landscape .abcgame_vertical {
        height: 80.3%;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 12% 0; */
    }

    .billboard-words #billBoard {
        min-height: 400px;
        padding-top: 20px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 12% 0; */
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    .words_rhyiming {
        height: auto !important;
        margin-bottom: 12px;
    }

    /* responsive css fpor recommemded books page  */
    .landscape #ereader_images .ereader-book {
        width: 85% !important;
        margin: auto;
    }

    .landscape .ereader_bookimages .ereader_images .ereader-divider {
        margin: 0 5px 0 5px;
        padding: 0px !important;
    }

    .landscape .ereader_bookimages .page_heading {
        font-size: 3.4vw !important;
        line-height: 3.4vw !important;
        padding: 10px 0 15px 0;
    }

    /* end */
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:571px) and (max-height:625px) and (orientation:landscape) {

    /* responsive css fpor recommemded books page  */
    .landscape #ereader_images .ereader-book {
        width: 85% !important;
        margin: auto;
    }

    .landscape .ereader_bookimages .ereader_images .ereader-divider {
        margin: 0 5px 0 5px;
        padding: 0px !important;
    }

    /* end */
    .landscape .phonics_popup {
        display: block;
        margin: 30px auto;
        height: 100%;
    }

    .landscape .ebookContainer .ereader_images img {
        width: 75% !important;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo {
        margin-top: 20px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 165px !important;
        height: 105px !important;
    }

    .landscape .words_rhyiming #rhymewordsgame,
    .landscape .words_rhyiming .click-rating {
        margin: 25px auto 0 !important;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 150px !important;
        min-height: 170px !important;
        max-width: 300px !important;
        border-radius: 0;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.75);
        margin-top: -11px;
    }

    #flipping_leatherbook #flipbook-viewport .bookTemplate {
        height: 65% !important;
    }

    #flipbook-viewport .bookTemplate {
        margin-top: -6px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.90);
    }

    /* .landscape .gameBody #abcsoundmatch {
        min-height: 600px;
        overflow-y: visible;
    } */
    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    /* .landscape #smdraghb_0:before {
        width: 110px;
        transform: scale(.80);
        bottom: -76px;
    } */
    /* #Shoottherocket {
        min-height: 500px;
    } 
    .billboard-words #billBoard {
        min-height: 595px; 
         padding: 25px 0;
    }
    */
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 10% 0; */
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 32px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 10% 0; */
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 32px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    .landscape #words_rhyiming {
        padding-top: 00px;
    }

    .landscape #words_rhyiming .opposite_component {
        position: absolute;
        top: 10px;
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:636px) and (max-height:660px) and (orientation:landscape) {
    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        height: 210px;
        border-radius: 4px;
        width: 350px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 200px !important;
        height: 120px !important;
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:626px) and (max-height:680px) and (orientation:landscape) {
    .billboard-words #billBoard {
        /* min-height: 595px; */
        /* padding: 25px 0; */
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        border-radius: 4px;
        height: 205px;
        width: 315px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 200px !important;
        height: 120px !important;
    }

    .landscape #words_rhyiming {
        padding-top: 0px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.85);
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.92);
    }

    .landscape .abcgame_vertical {
        height: 80.3%;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape .phonics_popup {
        display: block;
        margin: 15px auto;
        height: auto;
    }

    /* commented css for abc shoot the stars  SL3-7691*/
    /*     
        #Shoottherocket {
            min-height: 530px;
        } */
    /* end */
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 18% 0; */
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 10px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 18% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 10px;
        margin-right: 8% !important;
    }

    .landscape #words_rhyiming .right_column {
        top: 18px !important;
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:681px) and (max-height:735px) and (orientation:landscape) {
    .words_rhyiming {
        height: auto !important;
        padding-top: 0px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 185px;
        min-height: 210px;
        border-radius: 4px;
        max-width: 365px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 200px !important;
        height: 120px !important;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 18% 0; */
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        /* transform: scale(0.85); */
    }

    .landscape .abcgame_vertical {
        height: 80.3%;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 18% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #words_rhyiming .right_column {
        top: 18px !important;
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:736px) and (max-height:768px) and (orientation:landscape) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    .landscape #words_rhyiming {
        padding-top: 0px !important;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 220px;
        min-height: 240px;
        max-width: 420px;
    }

    .landscape .abcgame_vertical {
        height: 80.3%;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    .landscape #words_rhyiming .right_column {
        top: 15px;
    }

    .landscape #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px;
    }

    .landscape .interactivityfullScreen #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px !important;
    }

    .landscape .interactivityfullScreen #words_rhyiming .right_column {
        top: 18px !important;
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:769px) and (max-height:799px) and (orientation:landscape) {
    .landscape #words_rhyiming .right_column {
        top: 10px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 300px;
        min-height: 280px;
        max-width: 500px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.85);
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.95);
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 13px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:800px) and (max-height:870px) and (orientation:landscape) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
    }

    .landscape #words_rhyiming .right_column {
        top: 18px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 300px;
        min-height: 280px;
        max-width: 515px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.85);
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.95);
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 13px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* added css for larger height device for bowling game result screen */
    .landscape #bowlingGame .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        width: 40%;
    }

    /* end */
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:871px) and (max-height:920px) and (orientation:landscape) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
    }

    .landscape #words_rhyiming .right_column {
        top: 18px;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .audio-text .sentenceSpan {
        /*SL3-5168: remove scaling from audio text class and provide to sentencespan class to aviod the audio and volume icon placement issue*/
        transform: scale(0.85);
    }

    .landscape #flipping_leatherbook #flipbook-viewport #flipbook_interactivity {
        transform: scale(0.95);
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        /* margin-right: 0 !important; */
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 13px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        /* margin-right: 0 !important; */
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:921px) and (max-height:950px) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 40% 0; */
        height: 80vh;
    }

    .landscape #words_rhyiming .right_column {
        top: 10px;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #Shoottherocket #balloonContainerGame {
        height: 65%;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 40% 0; */
        height: 80vh;
    }

    .landscape #Shoottherocket #balloonContainerGame {
        height: 65%;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 13px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        /* margin-top: 27px; */
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }
}

@media only screen and (min-width:1025px) and (max-width:1800px) and (min-height:951px) and (max-height:1080px) and (orientation:landscape) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
        height: 75vh;
    }

    .landscape #words_rhyiming .right_column {
        top: 10px;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -11px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
        height: 75vh;
        left: -17px;
        width: 103%;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* added css for larger height device for bowling game result screen */
    /* .landscape #bowlingGame .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        width: 32%;
    } */
    /* end */
}


/* 1801 to 1920 */

@media only screen and (min-width:1801px) and (max-width:1920px) and (max-height:449px) {
    .words_rhyiming {
        height: auto !important;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 630px;
        overflow-y: auto;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
        height: 80vh;
    }

    .landscape .abcgame_vertical.vertical_4 {
        height: 81%;
    }

    #Shoottherocket {
        min-height: 520px;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 11% 0; */
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 11% 0; */
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:450px) and (max-height:549px) {
    #Shoottherocket {
        min-height: 520px;
    }

    .words_rhyiming {
        height: auto !important;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
        height: 80vh;
    }

    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    .landscape .abcgame_vertical.vertical_4 {
        height: 81%;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 630px;
        overflow-y: auto;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 11% 0; */
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 11% 0; */
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:550px) and (max-height:570px) {
    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    .words_rhyiming {
        height: auto !important;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
        height: 80vh;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 630px;
        overflow-y: auto;
    }

    .landscape .abcgame_vertical.vertical_4 {
        height: 81%;
    }

    #Shoottherocket {
        min-height: 490px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 12% 0; */
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 12% 0; */
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 30px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:571px) and (max-height:625px) {
    .billboard-words #billBoard {
        min-height: 600px;
        padding-top: 20px;
    }

    .landscape .ebookContainer .ereader_images img {
        width: 75% !important;
    }

    .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
        max-height: 265px;
        min-height: 245px;
        margin: 15px;
        max-width: 400px;
    }

    .words_rhyiming {
        height: auto !important;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
        height: 80vh;
    }

    .landscape .gameBody #abcsoundmatch {
        min-height: 630px;
        overflow-y: auto;
    }

    .landscape .abcgame_vertical.vertical_4 {
        height: 81%;
    }

    #Shoottherocket {
        min-height: 530px;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 10% 0; */
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 32px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    .landscape #words_rhyiming {
        padding-top: 0px;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 10% 0; */
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 11px;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 32px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:626px) and (max-height:680px) {
    .billboard-words #billBoard {
        min-height: 595px;
        padding: 25px 0;
    }

    .words_rhyiming {
        height: auto !important;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #words_rhyiming {
        padding-top: 0px;
    }

    /* commented css for abc shoot the stars  SL3-7691*/
    /* #Shoottherocket {
        min-height: 530px;
    } */
    /* end */
    .landscape #interactivity_div .abcSoundMatchWrapper .leftSideBar img {
        max-width: 40% !important;
    }

    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 18% 0; */
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 10px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 18% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 11px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 10px;
        margin-right: 8% !important;
    }
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:681px) and (max-height:735px) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 18% 0; */
    }

    .landscape #words_rhyiming {
        padding-top: 0px;
    }

    .words_rhyiming {
        height: auto !important;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #interactivity_div .abcSoundMatchWrapper .leftSideBar img {
        max-width: 40% !important;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 18% 0;/ */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 11px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 11px;
    }
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:736px) and (max-height:768px) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    .landscape #words_rhyiming {
        padding-top: 0px;
    }

    .landscape #words_rhyiming .right_column {
        top: 15px;
    }

    .landscape #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px;
    }

    .words_rhyiming {
        height: auto !important;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #interactivity_div .abcSoundMatchWrapper .leftSideBar img {
        max-width: 40% !important;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 11px;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 11px;
        margin-bottom: 0px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:769px) and (max-height:900px) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% /0; */
    }

    .landscape #words_rhyiming {
        padding-top: 0px;
    }

    .landscape #words_rhyiming .right_column {
        top: 15px;
    }

    .landscape #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #interactivity_div .abcSoundMatchWrapper .leftSideBar img {
        max-width: 70% !important;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 27px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 15px;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 30% 0; */
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 27px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 12px;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
    }

    .landscape #words_rhyiming .right_column {
        top: 15px;
    }

    .landscape #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px;
    }

    .landscape .interactivityfullScreen #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px !important;
    }

    .landscape .interactivityfullScreen #words_rhyiming .right_column {
        top: 18px !important;
    }

    /* added css for larger height device for bowling game result screen */
    .landscape #bowlingGame .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        width: 230px;
        height: 230px;
    }

    /* end */
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:901px) and (max-height:950px) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
        height: 80vh;
    }

    .landscape #words_rhyiming .right_column {
        top: 10px;
    }

    .landscape #smdraghb_0 {
        width: 25.9%;
        height: 170%;
        top: -70%;
        left: -7px;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 0;
        height: 305px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
        height: 322px;
    }

    .landscape #SightWordBlast .abcgame_scoreBtns {
        top: auto;
        bottom: 30px;
        left: 20px !important;
    }

    .landscape #SightWordBlast #confettiCanvasWB {
        height: 100% !important;
    }

    /* save thr planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
        height: 80vh;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 0;
        height: 305px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
        height: 322px;
    }

    .landscape #shootthestars .abcgame_scoreBtns {
        top: auto;
        bottom: 30px;
        left: 0 !important;
    }

    .landscape #shootthestars #confettiCanvasWB {
        height: 100% !important;
    }

    .landscape #words_rhyiming .right_column {
        top: 15px;
    }

    .landscape #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px;
    }

    .landscape .interactivityfullScreen #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px !important;
    }

    .landscape .interactivityfullScreen #words_rhyiming .right_column {
        top: 18px !important;
    }

    /* added css for larger height device for bowling game result screen */
    .landscape #bowlingGame .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        width: 240px;
        height: 230px;
    }

    .landscape #bowlingGame .abcgame_scoreBtns {
        bottom: 18px;
        top: auto;
    }

    /* end */
}

@media only screen and (min-width:1801px) and (max-width:1920px) and (min-height:951px) and (max-height:1080px) {
    .landscape #SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
        height: 75vh;
    }

    .landscape #words_rhyiming .right_column {
        top: 15px;
    }

    .landscape #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px;
    }

    .landscape .interactivityfullScreen #words_rhyiming .opposite_component {
        position: absolute;
        top: 18px !important;
    }

    .landscape .interactivityfullScreen #words_rhyiming .right_column {
        top: 18px !important;
    }

    .landscape #SightWordBlast .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #SightWordBlast .abcgame_readycount {
        margin-top: 0px;
        height: 305px;
    }

    #SightWordBlast .jumpGameOverlay .jumpgameResultLeftDiv,
    #SightWordBlast .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .landscape #SightWordBlast #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
        height: 322px;
    }

    .landscape #SightWordBlast .abcgame_scoreBtns {
        top: auto;
        bottom: 30px;
        left: 0 !important;
    }

    .landscape #SightWordBlast #confettiCanvasWB {
        height: 100% !important;
    }

    /* save the planet  */
    .landscape #shootthestars .abcgame_abcpick_alertSelectLevelOverlay {
        margin: auto;
        /* padding: 25% 0; */
        height: 75vh;
    }

    .landscape #shootthestars .jumpGameOverlay .abcgame_abcpick_getreadyWrap {
        margin-top: 0;
    }

    .landscape #shootthestars .abcgame_readycount {
        margin-top: 0px;
        height: 305px;
    }

    #shootthestars .jumpGameOverlay .jumpgameResultLeftDiv,
    #shootthestars .jumpGameOverlay .abcgame_abcpick_fright {
        font-size: 13px !important;
        margin-bottom: 1px !important;
    }

    .landscape #shootthestars #scoreboard {
        margin-top: 15px;
        margin-right: 8% !important;
        height: 322px;
    }

    .landscape #shootthestars .abcgame_scoreBtns {
        top: auto;
        bottom: 30px;
        left: 0 !important;
    }

    .landscape #shootthestars #confettiCanvasWB {
        height: 100% !important;
    }

    /* added css for larger height device for bowling game result screen */
    .landscape #bowlingGame .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        width: 240px;
        height: 230px;
    }

    /* end */
}


/* all desktop scrren media query ends here  */

/* @media (max-height: 668px) {
    .portrait #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .portrait #calenderFlipCardMainDiv .main-flip .cell-space {
        height: 13vh !important;
        min-height: 99px;
    }
} */

@media (max-height: 667px) {

    .portrait .draggable-wrap,
    .portrait .source-preview {
        height: 13.5vh;
    }

    .portrait .clicksoundinteractivity .trumpCard_red {
        height: 13.5vh;
        max-width: 100px;
    }
}

.shootrocketPage6 #shoot_gamescoreviewbox {
    background-color: rgba(172, 0, 201, 0.4);
}

.shootrocketPage6 #shoot_gamemissedviewbox {
    background-color: rgba(0, 48, 75, 0.4);
}

#Shoottherocket #shoot_gamescoreviewbox,
#Shoottherocket #shoot_gamemissedviewbox {
    height: 50px !important;
    width: 100% !important;
}

#Shoottherocket .shootrocketMainPages {
    width: 100% !important;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.shoot_gameplaybgimg {
    background-image: none !important;
    background: #eecda3 !important;
    background: -webkit-linear-gradient(to left, #eecda3, #ecc3bc) !important;
    background: linear-gradient(to left, #eecda3, #ecc3bc) !important;
}

.shootRocketRecommendedgamewrap {
    background-size: cover !important;
    background-image: none !important;
}

.shootrocketPage4 .gameinstructpglayernxtbtnimg {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcstr/images/gamesplashlogo.png) !important;
}

.shootrocketPage4 .gameinstructionbtnimg {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcstr/images/gameinstruction_icon.png) !important;
}

.shoottherocketsContainer .shootpg6contain {
    margin-top: 0px !important;
}

@media (max-height: 1400px) and (min-width: 1400px) {
    .landscape #billBoard.bill-board-light {
        background-size: cover;
    }
}


/**************recording************/

.tagsClass.react-tags-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tagsClass.react-tags-wrapper .ReactTags__selected {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tagsClass.react-tags-wrapper .ReactTags__selected .tagInputClass>input {
    width: 100%;
    border-radius: 0px;
    border: 1px solid #c58a0a;
    height: 40px;
    padding: 0 10px;
    color: #000;
}

.MuiDialog-paperScrollPaper .MuiDialogActions-root {
    padding: 0;
    text-align: center;
    margin: 0 auto;
}

.class-head-tag {
    padding: 7px 21px !important;
    width: 100%;
}

.class-head-tag .tagInputFieldClass {
    height: 35px !important;
    width: 100%;
    position: relative;
    float: left;
}

.tagsClass.react-tags-wrapper .selectedClass {
    width: 400px;
}

.tag-wrapper.tagClass {
    background-color: #e1ecf5;
    padding: 6px 24px;
    border-radius: 20px;
    margin-bottom: 5px;
    float: left;
    margin-right: 2px;
}

.fbEmailShare {
    padding: 0;
    text-align: center;
    margin: 0 auto;
}

.MuiDialogActions-root.MuiDialogActions-spacing {
    text-align: center;
    margin: 0 auto;
}

.errorTags {
    margin: 0;
    margin-top: 8px;
    min-height: 1em;
    text-align: left;
    font-family: "Roboto";
    font-weight: 400;
    line-height: 1em;
    color: #f44336;
    float: left;
}

.facebook-share-btn {
    background: #fff;
    color: #333;
    cursor: pointer;
    display: inline-block;
    padding: 8px 15px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.ML-store {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ML-store .btn-login {
    cursor: pointer;
}

.ML-store .header_setting_btn {
    font-size: 16px;
    padding: 0.875rem 0.75rem !important;
    background: rgba(20, 119, 243, 0.9);
    width: 100px;
    border-radius: 100px;
    cursor: pointer;
    float: right;
    text-align: center;
    position: relative;
    color: #fff;
    border-color: transparent;
    font-weight: 400;
    margin-left: 15px;
    padding: 7px !important;
}

.ML-store .header_setting_btn:focus {
    box-shadow: none !important;
    outline: 0;
    color: #fff;
    border: none;
}

.ML-store .header_setting_btn:hover {
    box-shadow: none;
    background: rgba(20, 119, 243, 0.9);
}

.ML-store .common-profile-section .header_setting_btn {
    background-color: transparent;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 !important;
    color: #007bff;
    border: none;
}

.ML-store .common-profile-section .header_setting_btn:after {
    display: none;
}

.ML-store .common-profile-section .header_setting_btn .caret {
    font-size: 0;
    border: none;
    color: #007bff !important;
}

.ML-store .common-profile-section .header_setting_btn .caret:before {
    content: "\f107";
    font-family: FontAwesome;
    display: inline-block;
    font-size: 21px;
    top: 3px;
    position: absolute;
    right: 0px;
    font-weight: bold;
}

.ML-store .common-profile-section .header_setting_btn:hover {
    box-shadow: none !important;
}

.ML-store .common-profile-section .sb-avatar {
    margin-right: 5px;
}

.full-width {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.media-ereader div header.container-fluid {
    padding: 15px;
    height: 9%;
}

.open ul.dropdown-menu {
    display: block;
    position: absolute;
    z-index: 9999;
    background: #fff;
    right: 0;
    left: auto;
    color: #000;
    top: 39px;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 4px rgba(0, 0, 0, 0.25);
}

.common-profile-section {
    display: flex;
    position: relative;
    align-items: center;
}

.common-profile-wrap {
    width: 70px;
    margin-top: 0px;
    display: flex;
    margin-bottom: 12px;
}

header.headerfull .common-profile-wrap {
    margin-bottom: 0px;
}

.matchingGamedragContainer .drag-container .source p.cardfront-text {
    margin: auto;
}

.Reading_dialogBox .MuiPaper-root.MuiDialog-paper.MuiDialog-paperScrollBody .MuiDialogContent-root {
    font-size: 17px;
    padding: 20px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    min-width: 320px;
    color: rgba(0, 0, 0, 0.57);
}

.Reading_dialogBox #draggable-dialog-title {
    background-color: #366eaf !important;
    background: #82a3cc;
    color: #fff;
}

.phonicsMain .MuiButtonBase-root.MuiButton-root {
    padding: 12px 30px !important;
    box-shadow: none;
}

.phonicsMain .Reading_dialogBox #btn-theme {
    background-color: #366eaf !important;
}

.Reading_dialogBox .MuiDialogActions-root.MuiDialogActions-spacing {
    padding-right: 20px;
}

.Reading_dialogBox .MuiDialogActions-root.MuiDialogActions-spacing button {
    margin-bottom: 20px;
}

.open ul.dropdown-menu li a {
    padding: 15px 16px 10px;
    color: #000;
    display: inline-block;
    width: 100%;
}

.open ul.dropdown-menu li a:first-child ,
.open ul.dropdown-menu li:first-child a {
    border-top: 1px solid #000;
}

.open ul.dropdown-menu li a:hover {
    color: #fff;
    font-weight: bold;
    background: #7dacd1;
}

.common-profile-wrap .common-profile-section .dropdown.btn-group {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.open>.btn-default.dropdown-toggle:focus {
    color: currentColor;
    background-color: transparent;
    border-color: currentColor;
    box-shadow: none;
}

.landscape .interactivityfullScreen .preroll-img,
.landscape .interactivityfullScreen .text-book2 .preroll-img,
.landscape .interactivityfullScreen .text-book3 .preroll-img {
    max-height: 65vh;
}

@media (max-width: 731px) {
    .landscape #phonicsHeader .h-left {
        margin-left: -7px;
        margin-top: -8px;
    }

    .landscape #phonicsHeader .letters-text-wrap {
        right: 63%;
    }

    .landscape #phonicsHeader.extra .h-left,
    .landscape #phonicsHeader.headerfull .h-left {
        padding-left: 20px !important;
    }
}


/* lets play games welcome and home screen */


/* add new background to game mode screen */

#letsplaybaseball .lgfballoom_image_pg1 {
    background-image: none;
    border-radius: 8px;
    /* border: 2px solid #fff;
    box-shadow: #ccc 1px 2px 8px */
}

#letsplaybasketball .lgfballoom_image_pg1 {
    background-image: none;
    border-radius: 8px;
    /* border: 2px solid #fff;
    box-shadow: #ccc 1px 2px 8px; */
}

#letsplaysoccer .lgfballoom_image_pg1 {
    background-image: none;
    border-radius: 8px;
    /* border: 2px solid #fff;
    box-shadow: #ccc 1px 2px 8px; */
}

.ebookContainer .instruction_text {
    font-family: 'Conv_ST Gothic Hv Heavy';
    font-weight: normal;
    font-style: normal;
}


/* remove old logo from game mode screen */

#letsplaybaseball .startletsgofishingrow .letsGoFishingLogo {
    background-image: none;
}


/* welcome and game mode screens already have rich graphics background */

#letsplaysoccer .abcgame_abcpickrecommendedgamewrap,
#letsplaybasketball .abcgame_abcpickrecommendedgamewrap,
#letsplayfootball .abcgame_abcpickrecommendedgamewrap,
#letsplaybaseball .abcgame_abcpickrecommendedgamewrap {
    background: transparent;
}

@media only screen and (max-width: 1024px) and (min-width: 768px),
only screen and (max-width: 1024px) and (min-width: 768px) {

    /* as there's  not optional games area in these games but it's structure is slightly different from other games having no optional games so to occupy maximum screen area. Rev: Mehak, Akshat*/
    .portrait #letsplaysoccer .letsgofishingpage0 .abcgame_abcpickrecommendedgame,
    .portrait #letsplaybaseball .letsgofishingpage0 .abcgame_abcpickrecommendedgame,
    .portrait #letsplaybasketball .letsgofishingpage0 .abcgame_abcpickrecommendedgame,
    .portrait #letsplayfootball .letsgofishingpage0 .abcgame_abcpickrecommendedgame {
        height: 100% !important;
    }

    /* save progress icon white area  */
    .portrait .fa-check-circle:after {
        width: 5px;
        height: 10px;
    }

    /* } */
}


/* as mute and volume buttons div are added in this div so for alignment */


/* #contraction-activity .audio-text{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
} */


/* #contraction-activity .audio-text .right-btns-grp{
        position: static;
        display: flex;
    flex-direction: row;
        align-items: center;
    justify-content: center;
} */


/* .interactivity #contraction-activity .align-middle {
      min-width: 80%;
      text-align: center;
} */


/* Loader for SL3-4110*/


/*Copied From: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader*/

.loaderTmp {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite;
    z-index: 100;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
}


/* Safari */

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* transparent parent div for above loader .. align loader center in this*/

.loaderParent {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.35);
}

.rightnavwrap {
    position: relative;
    float: left;
    width: 100%;
}


/* to change card content layout on mobile portrait mode for billboard words and billboard screen change  - story id SL3-4083 in jira*/

/* used mobile portarit layout on devices portrait also so changed range 767px to 1024px */

@media (max-width:1200px) and (orientation:portrait) {
    /* to align card image and title vertically */

    /*SL3-11700.... corrected position for text element.... */
    .portrait .section_level_1 .carousel-parent .flex-item-div {
        transform: none;
    }

    .portrait .billboard-words #billBoard.bill-board-light .billboardlight-wrap,
    .portrait .billboard-screen-change #billBoard .twoflash-cont .sq-animate2 {
        flex-direction: column-reverse;
    }

    .portrait .ereader_bookimages .ereader_images .ereader-divider {
        margin: 4px;
    }

    .portrait .billboard-words #billBoard.bill-board-light .board-effect .billboardlight-wrap {
        flex-direction: column !important;
    }

    .portrait #billBoard.bill-board-light .board-effect {
        width: 80%;
    }

    .portrait .billboard-words #billBoard.bill-board-light .board-effect .billboardlight-wrap .demotrumpCard {
        height: 100% !important;
    }

    /* to put card image and text with in the card  area*/
    .portrait .billboard-words #billBoard .demotrumpCard,
    .portrait .billboard-screen-change #billBoard .twoflash-cont .layout-fill {
        height: auto;
    }

    .portrait .billboard-words #billBoard .billboardlight-wrap .layout-fill span {
        margin: 0px;
    }

    .portrait .billboard-words #billBoard .billboardlight-wrap .layout-fill {
        min-height: auto;
    }

    #billBoard.bill-board-light .billboardlight-wrap .demotrumpCard.layout-fill .layout-fill {
        height: 100%;
        /*Given height 100% so that div cover full area */
    }

    .portrait #billBoard.bill-board-light .twoflash-cont .layout-fill.layout-row .billboardlight-wrap .flex-30 {
        max-width: 80%;
        min-height: 25%;
        max-height: 25%;
    }

    #billBoard #carousel .board-effect .sq-animate2 {
        display: flex;
        flex-direction: column;
    }

    .portrait #billBoard .board-effect {
        max-height: 70%;
    }

    /*SL3-11705, give styling for TB2-8 bill board light image element.....*/
    .portrait #billBoard.bill-board-light .twoflash-cont .layout-fill.layout-row .billboardlight-wrap .flex-30:not(.textbook1):first-child {
        min-height: 40%;
        max-height: 40%;
    }

    /*SL3-11705, give styling for TB1 bill board light image element....*/
    .portrait #billBoard.bill-board-light .twoflash-cont .layout-fill.layout-row .billboardlight-wrap .flex-30.textbook1:nth-child(2) {
        min-height: 40%;
        max-height: 40%;
    }

    #billBoard .flash-card-cont.layout-fill.layout-align-center-center:first-child {
        padding: 10px;
    }

    .portrait .billboard-screen-change #billBoard .twoflash-cont .flash-card-cont.layout-fill {
        height: 30%;
        max-height: 30%;
        min-height: 30%;
    }

    .portrait .billboard-screen-change #billBoard .twoflash-cont .flash-card-cont.layout-fill:first-child {
        min-height: 70%;
        max-height: 70%;
        height: 70%;
    }

    .portrait .billboard-words #billBoard.bill-board-light .demotrumpCard.layout-fill.layout-align-center-center.layout-row {
        display: block;
        text-align: center;
        /* height: 100%;
        align-items: flex-start;
        width: 100%;
        flex:1; */
    }

    .portrait .twoflash-cont .flex-30,
    #billBoard .twoflash-cont .layout-fill.layout-row .flex-30 {
        max-width: 100%;
    }

    .portrait #billBoard.bill-board-light .imgStroke {
        width: auto !important;
    }

    /* for card image to use more than 50% area of the card verically */
    .portrait .billboard-words #billBoard .billboardlight-wrap .layout-fill:nth-child(2) {
        /* min-height: 65%; */
        align-items: flex-end;
    }
}


/* to fill background image in full height in contraction build; issue: SL3-4233: desktop issue--grey area around the footer needs to be removed */

@media (max-width: 1024px) and (min-width: 940px) {
    .landscape #contraction-activity {
        height: 100% !important;
    }
}


/* to resolve audion text overlapping with footer and hint image. screenshot attached in comments section of SL3-4233 */

@media (max-width:767px) and (orientation:landscape) {
   
    .landscape .shootrocketPage4 .rocketgameplaylvlbtnimg {
        /* to fix SL3-7729 */
        width: 100%;
        font-size: 16px;
    }

    .landscape #contraction-activity .sentenceSpan {
        font-size: 2vw;
        margin: 5px auto;
        padding: 5px;
    }

    .landscape .common-profile-section .open>.dropdown-menu {
        right: 50px;
    }

    .landscape #recordingIframe .common-profile-section .open>.dropdown-menu {
        right: 0;
    }
}

@media all {
    #interactivity_div .letsGameContainer .leftSideBar img {
        max-width: 100% !important;
    }

    .gameBody .letsGameContainer .leftSideBar {
        padding: 0 !important;
    }

    .portrait .gameBody .letsGameContainer .leftSideBar .row {
        width: 33%;
        /* changed 48% to 33% as the logos for few games are geting cropped in kindle portrait and also resulting in timer to be hide behind the footer */
    }
}

@media (max-width:767px) and (orientation:portrait) {

    .portrait header {
        padding: 0 0 3px 0;
    }

    .portrait #interactivity_div .letsGameContainer .leftSideBar img {
        max-height: 56px;
    }

    .portrait .gameBody .letsGameContainer .leftSideBar .row {
        margin: 0;
    }

    /* added css for iphone 11 sound match game result screen 100% text overlaps the BG SL3-10072 */
    .portrait .gameBody #abcsoundmatch .abcgame_smtimedetailsbox {
        font-size: 14px !important;
    }
}

@media (max-height: 749px) {
    .landscape #interactivity_div .letsGameContainer .gameWrapper .leftSideBar .row.logo img {
        max-width: 80% !important;
    }
}

.landscape .gameBody .letsGameContainer img {
    width: 100% !important;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    #interactivity_div .letsGameContainer .gameWrapper .leftSideBar .row.logo img {
        max-width: 50% !important;
    }
}

#lesson_iframe .connectthedots-close-icon-container {
    /* width: 40px;
    height: 40px; */
    text-align: right;
    display: inline-block;
    position: absolute;
    right: -22px;
    top: -22px;
    cursor: pointer !important;
}

#lesson_iframe .connectthedots-game-instruction-wrapper {
    position: absolute;
    color: #fff;
    padding: 0;
    z-index: 999;
    /* width: 79%; */
    border-radius: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    /* max-width: 450px; */
}


/* for recommended books UI */

.recomendedBookImg .recommendedEbookBg {
    background-image: url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/recomended-books/recommended-books-bg.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
}

.ebookContainer .instruction_text {
    font-size: 5vw !important;
    line-height: 5vw;
    color: #fff;
    text-shadow: 2px 1px 0px #000;
    -webkit-text-shadow: 2px 1px 0px #000;
    -moz-text-shadow: 2px 1px 0px #000;
    -ms-text-shadow: 2px 1px 0px #000;
    -o-text-shadow: 2px 1px 0px #000;
    text-stroke: 1px black;
    -webkit-text-stroke: 1px black;
    -moz-text-stroke: 1px black;
    -ms-text-stroke: 1px black;
    -o-text-stroke: 1px black;
    max-width: 50%;
}

.ebookContainer .instruction_text .infoIcon {
    text-shadow: none;
    -webkit-text-shadow: none;
    -o-text-shadow: none;
    -ms-text-shadow: none;
    -moz-text-shadow: none;
}

#ereader .mainFlashcard_flip .cardUp img {
    height: auto;
    box-shadow: 13px 0px 9px #000;
    -webkit-box-shadow: 13px 0px 9px #000;
    -ms-box-shadow: 13px 0px 9px #000;
    -o-box-shadow: 13px 0px 9px #000;
    -moz-box-shadow: 13px 0px 9px #000;
    border: 1px solid #8a8a8a;
}

#ereader .ereader-book {
    align-items: center;
    display: flex;
    flex-direction: row;
}

@media (max-width: 1400px) {

    #ereader .flashcard-turnOver .flip-divider,
    #ereader .flip-divider {
        height: 100%;
    }

    .landscape #billBoard.bill-board-light .board-effect {
        width: 75%;
        max-height: 70%;
    }

    .landscape .billboard-screen-change #billBoard #carousel .board-effect {
        max-height: 70%;
    }

    header .connect-dot-bg span {
        line-height: 18px;
        font-size: 12px;
    }
}

.phonicsEreaderClass .connectthedots-game-instruction-wrapper li {
    font-size: 19px;
    font-weight: 600;
}

#ereader_images .mainFlashcard_flip .cardUp img {
    height: auto;
    border: 2px solid #808080;
    box-shadow: 1px 1px 7px #000;
    -webkit-box-shadow: 1px 1px 7px #000;
    -ms-box-shadow: 1px 1px 7px #000;
    -o-box-shadow: 1px 1px 7px #000;
    -ms-box-shadow: 1px 1px 7px #000;
}


/* #ereader_images .flashcard-turnOver .flip-divider, #ereader_images .flip-divider {
    width: 23%;
    max-width: 24%;
    height: auto;
} */

.ereader_bookimages .ereader_images .ereader-divider {
    /*    width: 16.6667% !important;
    max-width: 16.6667% !important; remove css for make images  proportions*/
    display: inline-flex;
    justify-content: flex-start;
    padding: 10px 0 !important;
    align-items: stretch;
    margin: 15px;
}

.ereader_bookimages .ereader_images .ereader-divider img {
    width: 100% !important;
    object-fit: contain;
    height: auto !important;
    box-shadow: none !important;
    border: none !important;
}

.portrait #mainBodyContainer #lesson_iframe.Phonics_ereader .content_ereader_modify {
    justify-content: center;
}

#lesson_iframe.Phonics_ereader .ereader_bookimages {
    height: 100% !important;
    width: 100% !important;
}

.ebookContainer .ereader_images img {
    width: 85% !important;
}

.ereader_bookimages .click-rating {
    margin: 0 !important;
}

.ebookContainer .ereader_images .flashcard-turnOver {
    overflow: hidden !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ereader_bookimages .page_heading {
    font-size: 4vw !important;
    line-height: 4vw !important;
    padding: 10px 0 0px 0;
    cursor: text !important;
}

.portrait #ereader_images .flashcard-turnOver .flip-divider,
.portrait #ereader_images .flip-divider {
    width: 49% !important;
    max-width: 50% !important;
}

.portrait #ereader_images .flashcard-turnOver .flash-card-row,
.portrait #ereader_images .flash-card-row {
    width: 100%;
    justify-content: center;
}

.portrait .ebookParentDiv #lesson_iframe .right_column {
    top: 0 !important;
}

/* .portrait .ebookParentDiv #lesson_iframe .refresh_content {
    top: 0 !important;
} */

@media (min-width:1040px) and (orientation:portrait) {
    .mobile-view-only {
        display: none !important;
    }
}

/* for ipad pro portrait */

@media (min-width:1024px) and (orientation:portrait) {
    .portrait .ebookContainer .instruction_text {
        margin: 0 auto 0;
        font-size: 5vw !important;
        line-height: 5vw !important;
    }
}

@media (max-width:767px) and (orientation:portrait) {

    /* for issue Iphone 11 (Portrait) Phonics : Book 2 :S1:L3 : Word Drag :  'man' is not coming properly 
    .portrait #appBody .drag-container .drop_child p {
        font-size: 10vmin !important;
    }
    .portrait #appBody .matchingGamedragContainer .drop_child p,
    .portrait #appBody .matchingGamedragContainer .source p {
        font-size: 4vmin !important;
    }*/

    .portrait #appBody .contentfull.interactivityfullScreen .drag-container .draggable-wrap {
        height: 13.2vh !important;
    }

    /* end */
    /* resolved issue for iphone 8/7/6 and below  */
    .portrait #lesson_ifr.ebookParentDiv {
        display: block !important;
    }

    .portrait #mainBodyContainer #lesson_iframe {
        height: 100%;
    }

    /* end */
    .portrait .ebookContainer .instruction_text {
        max-width: 63%;
        font-size: 21px !important;
        line-height: 25px !important;
        margin-top: 30px;
        padding: 0;
    }

    /*start css for Fix issue SL3-9889*/
    #interactivity_div div#calenderFlipCardMainDiv .flipcardInteractivity .container.calendar-row .front img,
    #interactivity_div div#calenderFlipCardMainDiv .flipcardInteractivity .container.calendar-row .front>p {
        height: 100% !important;
    }

    #interactivity_div div#calenderFlipCardMainDiv .flipcardInteractivity .container.calendar-row .front>p {
        margin: 15px auto 5px;
    }

    /*end*/

    .portrait .ebookParentDiv #lesson_iframe .right_column {
        top: 0 !important;
    }

    .portrait .ebookParentDiv #lesson_iframe .refresh_content {
        top: 0 !important;
         right: 50px;
    }

    /* css added for recommended library page design issue on iphone 7 */
    .portrait .recomendedBookImg.ebookParentDiv #lesson_iframe .right_column {
        top: 15px !important;
    }

    .portrait .recomendedBookImg.ebookParentDiv #lesson_iframe .refresh_content {
        top: 19px !important;
    }

    /* end */
    .landscape #contraction-activity .sentenceSpan {
        font-size: 2vw;
        margin: 5px auto;
        padding: 5px;
    }
        
}


/* css for picture pick activity portrait issue  */

@media (max-width:580px) and (orientation:portrait) {
    .clicksoundinteractivity .md-padding.ng-scope.layout-align-center-center.layout-row.flex-25 {
        padding: 7px !important;
    }

    .clicksoundinteractivity .trumpCard_red {
        height: 8.5vh !important;
    }

    .portrait #Shoottherocket .gameContainer .gameWrapper {
        align-content: flex-start;
        padding-top: 10px;
        gap: 2.5%;
    }

    .portrait #Shoottherocket .gameWrapper .shoot-lhs-alphabet {
        font-size: 26px;
    }

        .portrait .interactivity .flip-divider {
            height: 19vh !important;
            width: auto !important;
            min-width: 42%;
        }
    
        .portrait .interactivity .wordFinder-bluebook .flip-divider {
            min-width: 50%;
        }
    .portrait .interactivity .wordFinder-bluebook .flip-divider {
        width: 50% !important;
    }

    .portrait .interactivity .flip-divider #flip-crd-main-wrd-span {
        font-size: 2.15vh;
    }
}

@media (max-width:580px) and (max-height:640px) {
    .clicksoundinteractivity .md-padding.ng-scope.layout-align-center-center.layout-row.flex-25 {
        padding: 2px 5px !important;
    }

    .clicksoundinteractivity .eight-falsh-card-wrap .wordbeginingsound {
        height: 100% !important;
    }

    .portrait .clicksoundinteractivity .trumpCard_red {
        height: 13.5vh !important;
    }
}

/* End  */

@media (max-width:767px) and (orientation:landscape) {
    .landscape .ebookParentDiv #lesson_iframe .right_column {
        top: 0 !important;
    }

    /* .landscape .ebookParentDiv #lesson_iframe .refresh_content {
        top: 0 !important;
    } */
}

@media (min-width:768px) and (orientation:landscape) {
    .landscape .ebookParentDiv #lesson_iframe .right_column {
        top: 0 !important;
    }

    /* .landscape .ebookParentDiv #lesson_iframe .refresh_content {
        top: 0 !important;
    } */
}

.ebookParentDiv #lesson_iframe {
    position: relative;
    background-color: #000;
}

.ebookContainer .instruction_text:first-child {
    font-size: 100% !important;
    line-height: 1;
    margin: 0;
}

.portrait .ebookContainer .instruction_text .infoIcon .fa-info-circle,
.landscape .ebookContainer .instruction_text .infoIcon .fa-info-circle {
    font-size: 37px !important;
}


/* for ipad pro */

@media (min-width:1024px) and (max-width: 1024px) {

    /* carousel responsive issue on ipad  */
    .portrait .My-carousel>.carousel-parent>.inner-flex-row>.inner-flex>.inner-item>.item {
        height: 70% !important;
        width: 100% !important;
        /* margin: 10vh 0; */
    }

    /* end */
    .portrait .iframe_ereader {
        height: calc(95% - 67px);
        width: 100%;
        margin-bottom: 25px;
    }

    /* .portrait .ebookParentDiv {
        margin: 104px 0 65px 0 !important;
    } */

    .portrait .Phonics_ereader #ereader {
        height: calc(65% - 35px);
        margin-bottom: 20px;
        width: 100%;
    }

    .portrait .Phonics_ereader .ereader_range {
        width: 100%;
    }

    .portrait #lesson_ifr .content_ereader_modify {
        height: calc(60% - 0px);
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }

    .portrait #lesson_ifr.ebookParentDiv.ebook {
        align-items: center;
        justify-content: center;
    }

    .landscape .phonicsMain #recordingIframe .recording-play-controls {
        background: #ffcc00;
        border-top: 5px solid #f3eb15;
        position: absolute;
        bottom: 0px;
        left: 0;
    }

    .landscape .phonicsMain #recordingIframe .Toastify .Toastify__toast--success {
        font-size: 12px !important;
    }

    .landscape .phonicsMain #recordingIframe #recordingEreader {
        padding: 15px 0 10px 0;
    }

    .landscape .phonicsMain #recordingIframe .col-md-4 {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .landscape .phonicsMain #recordingIframe .col-md-4 .logo-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .landscape .phonicsMain #recordingIframe .col-md-8 {
        width: 45%;
        text-align: center;
    }
}

@media (min-width:1024px) {
    .ML-store .common-profile-section .header_setting_btn .caret:before {
        right: -17px;
    }
}

@media all {
    .ebookParentDiv #lesson_iframe .click-rating .right_column {
        top: 9px !important;
    }

    .ebookParentDiv #lesson_iframe .click-rating .refresh_content {
        top: 9px !important;
    }
}


/* Commulating pick: Word pick sound - new changes: 31st Aug */

#interactivity_div #wordPickSound .culminatingWrdImg {
    border: 2px solid #000;
}

#interactivity_div #wordPickSound .culminatingWrdImg img {
    border: none !important;
}

#interactivity_div #wordPickSound .alphabet-div .form-group {
    max-width: 50%;
    border: 2px solid #000;
    margin: 10px auto 0;
    float: none;
}

#interactivity_div #wordPickSound .alphabet-div .form-group input {
    font-size: 25px !important;
}

#interactivity_div #wordPickSound .alphabet-div {
    float: left;
}

@media (max-width:1023px) and (orientation:landscape) {
    .landscape #interactivity_div #wordPickSound .alphabet-div .form-group input {
        font-size: 20px;
    }

    .landscape #interactivity_div #wordPickSound .alphabet-div .form-group {
        margin: 5px auto 0;
    }
}

@media (max-width:767px) and (orientation:portrait) {
    .portrait #recordingIframe .isMobilePortrait {
        width: 100%;
        height: 100%;
        float: left;
        margin: 20px 0px;
    }

    .portrait #recordingIframe header .col-md-4 {
        width: 65%;
        float: left;
    }

    .portrait #recordingIframe header .col-md-8 {
        width: 35%;
        float: left;
    }

    .portrait #recordingIframe header .common-profile-wrap {
        margin-top: 10px;
        margin-right: 4px;
        display: flex;
        align-items: center;
    }

    .portrait #recordingIframe .ML-store .common-profile-section .sb-avatar {
        margin-right: 23px;
    }

    .portrait #recordingIframe .common-profile-section button#basic-drop span.caret {
        bottom: 0;
        top: 0;
        right: 0;
    }

    .portrait #recordingIframe header .common-profile-wrap .common-profile-section {
        width: 70px;
        justify-content: space-around;
    }

    .portrait #recordingIframe header .common-profile-wrap .common-profile-section .sb-avatar {
        width: 32px;
        height: 32px;
    }

    .portrait #recordingIframe header .ML-store #LoginButton {
        position: relative;
        margin-top: 25px;
    }

    .portrait #recordingIframe header .logo-wrap {
        justify-content: space-between;
        text-align: center;
        align-items: center;
        width: 100%;
    }

    .portrait #recordingIframe .sommer-logo {
        margin-right: 30px;
    }

    .portrait #recordingIframe .recording-play-controls {
        background: #ffcc00;
        border-top: 5px solid #f3eb15;
        position: relative;
        bottom: 0px;
        left: 0;
    }

    .portrait #recordingIframe .recording-play-controls .recording-full-screen-control .btn-action {
        top: 23px !important;
        left: 15px !important;
    }

    .portrait #interactivity_div #wordPickSound .alphabet-div .form-group {
        margin: 5px auto 0;
    }

    .portrait #interactivity_div #wordPickSound .culminatingWrdImg {
        height: 12vh;
    }

    .portrait #wordPickSound .culminating_div {
        margin-bottom: 12px;
        width: 100%;
    }
}


/* SL3-4517: syllable pick- iphone6 --landscape--scroll needs to be removed */

@media (max-width:767px) and (orientation:landscape) {
    .landscape #syllablepick .interactivityDiv_syllablepick .row_design {
        height: 10%;
    }

    .landscape #syllablepick .interactivityDiv_syllablepick .vowels-centerlized-wrapper {
        height: 85%;
        margin-bottom: 0;
    }
}


/* SL3-4514: navigation hover needs to be properly displayed,it needs to be spaced.*/

#syllablepick .interactivityDiv_syllablepick #syllablepick_rightsidebar {
    padding-left: 0 !important;
}


/**************     animation for recording button 11-sept-2020       *************/

#footer-recording-menu {
    transform: scale(1);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(255 255 255 / 100%);
    }

    70% {
        transform: scale(0.85);
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0.2);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.no-animation {
    animation: none !important;
}

.landscape .songParentDiv {
    margin: 0;
}

/* .landscape .contentfull.songParentDiv {
    margin: 0px 0 69px 0;
} */


/**************        end of animation for recording button 11-sept-2020       *************/


/* to resolve stars almost overlapping with title in mobile portrait mode */

@media (max-width:767px) and (orientation: portrait) {
    .portrait #syllablepick_lefttsidebar {
        margin-top: 5px !important;
    }
}

@media (max-width:767px) and (orientation: portrait) {
    .portrait #syllablepick .interactivityDiv_syllablepick #syllablepick_rightsidebar {
        margin-top: -25px !important;
    }
}


/* SL3-4682 - Quiz--Replay icon needs to be displayed at the  resultant screen  and resultant screen with only score UI issue */

.quizz_reader .non-score-quiz::before {
    width: 100%;
    background-image: url(../images/quizScore-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    content: "";
    position: absolute;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    top: 0;
    left: 0;
}

.quizz_reader #finalPage .non-score-quiz .layout-align-end-end {
    border: none;
    border-radius: 35px;
    z-index: 999;
}

.quizz_reader #finalPage .non-score-quiz .fc-wrap {
    background-image: url(../images/trophy-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.quizz_reader #finalPage .preroll-wrap .fc-wrap {
    min-width: 450px;
    min-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quizz_reader #finalPage .preroll-wrap .fc-wrap img.preroll-img {
    border-radius: 10px;
    width: 80%;
}

.quizz_reader #finalPage .preroll-wrap .score-quiz-wraper {
    border-radius: 0px;
    width: 60%;
    height: 90%;
    background-color: #ebe6c7;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/quizScore-bg.png);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
}

.score-trophy-img-wrap,
.bookcover-img-wrap {
    position: absolute;
    bottom: 30px;
    display: inline-block;
    text-align: center;
    min-width: auto;
    width: 160px;
    max-width: none;
}

.score-trophy-img-wrap {
    right: 30px;
}

.bookcover-img-wrap {
    left: 30px;
    width: 130px;
}

.scoreWrapper img {
    width: 50%;
}

.score_card {
    position: absolute;
    width: 190px;
    text-align: center;
}

.score-trophy-img-wrap img,
.bookcover-img-wrap img {
    width: 100%;
    object-fit: contain;
}

.quizz_reader #finalPage .preroll-wrap .sc-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: transparent;
    border-radius: 0;
}

.scoreWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 100%;
    height: 100%;
}

.quizz_reader div#finalPage {
    overflow: auto;
}

.quizz_reader #finalPage .preroll-wrap .sc-wrap .scoreWrapper .score_card p {
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 45px;
    font-weight: bold;
}

.quizz_reader #finalPage .preroll-wrap .sc-wrap .scoreWrapper .score_card p span:last-child {
    font-size: 18px;
    line-height: normal;
    margin-top: 13px;
}

#interactivity_div .matchingGamedragContainer .drop_child p.drop_childAfter {
    position: relative !important;
    left: 0px !important;
    width: auto !important;
}

@media (max-width: 1200px) and (orientation: landscape) {
    .quizz_reader #finalPage .preroll-wrap .score-quiz-wraper {
        width: 80%;
    }

    .abcgame_helpHome img.abcgame_customClass {
        max-width: 60%;
    }

    .opposite_component .fa-star,
    .opposite_component .fa-star-o,
    .instruction_text .fa-info-circle {
        font-size: 33px;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {

    .landscape #appBody #interactivity_div #strocket-first {
        min-height: 100% !important;
    }

    .landscape #appBody #interactivity_div #strocket-first .abcgame_SMtimermode {
        font-size: 15px !important;
    }

    /* hybrid app menu distort issue resolved  */
    .landscape header .h-left {
        padding: 0 !important;
        display: flex !important;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .pageSpan {
        margin: 0 !important;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    /* end  */
    .quizz_reader #finalPage {
        margin: 0 !important;
    }

    .landscape .commonProfileCss .save-progress-image {
        margin-right: 10px;
    }

    .landscape header.extra .commonProfileCss .save-progress-image {
        font-size: 0px;
    }

    /*.landscape #appBody .matchingGamedragContainer .drop_child p,
    .landscape #appBody .matchingGamedragContainer .source p {
        font-size: 3vmin !important;
    }*/

    .landscape #appBody .matchingGamedragContainer .drop_child p.drop_childAfter {
        position: relative !important;
        left: 0px !important;
        width: auto !important;
    }

    .landscape #strocket-first .abcgame_SMtimermodewrap {
        min-width: 78px !important;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    .quizz_reader #finalPage .preroll-wrap .score-quiz-wraper {
        width: 90%;
        height: 60%;
    }

    .portrait #appBody .matchingGamedragContainer .drop_child p,
    .portrait #appBody .matchingGamedragContainer .source p {
        /* font-size: 4vmin !important; */
        font-weight: normal;
    }

    .portrait #appBody .matchingGamedragContainer .drop_child p.drop_childAfter {
        position: relative !important;
        left: 0px !important;
        width: auto !important;
    }

    .bookcover-img-wrap,
    .score-trophy-img-wrap {
        display: none;
    }

    .scoreWrapper img {
        width: 70%;
    }
}

@media (max-width:767px) and (orientation:portrait) {
    .portrait .quizz_reader #finalPage .preroll-wrap .fc-wrap {
        min-width: 300px;
        min-height: 300px;
    }

    .scoreWrapper img {
        width: 90%;
    }

    .quizz_reader #finalPage .preroll-wrap .sc-wrap .scoreWrapper .score_card p {
        font-size: 20px;
        line-height: 25px;
    }

    .score_card {
        width: 140px;
    }

    .quizz_reader #finalPage .preroll-wrap .sc-wrap .scoreWrapper .score_card p {
        font-size: 20px;
        line-height: 25px;
    }

    .quizz_reader #finalPage .preroll-wrap .sc-wrap .scoreWrapper .score_card p span:last-child {
        font-size: 11px;
        margin-top: 10px;
    }

    .quizz_reader #finalPage .score-quiz-outer {
        min-height: auto;
    }
}

@media (max-width:991px) and (orientation:landscape) {
        
    .landscape .funIcon {
            right: 70px !important;
        }
    
        .landscape #letter-sequence .letter-sequence .img-wrapper {
            width: 100% !important;
        }
    .landscape .phonicsMain #example-custom-modal-styling-title {
        padding-left: 0px !important;
        font-size: 25px !important;
    }

        .landscape #flipping_leatherbook.flip-book2 #flipbook-viewport .img_text {
            max-height: 80% !important;
        }
    #shootthestars #shootStarGameOverlay #scoreboard,
    .jumpGameOverlay #showgetReady {
        margin: auto !important;
    }

    /* .jumpGameOverlay #showgetReady,
    .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        width: 30%;
    } */

    .landscape .course-view button {
        display: flex;
        align-items: center;
    }

    .common-profile-wrap {
        margin-bottom: 0px;
    }

    .landscape .course-view button span:nth-child(2) {
        display: flex;
    }

    /* added css for SL3-10110 */
    .landscape #abcMatchMainBody #game_complete .abcgame_abcpick_gameResultWrapper.abcgame_abcpick_scoreboxeachlevelcongrats {
        height: 135px !important;
    }

    .landscape #abcMatchMainBody #game_complete .abcgame_abcpick_gameResult {
        height: 100px !important;
    }

    /* End */

    /* changed css for issue 6320   */
    .landscape #gameBody #letsplayfootball .startletsgofishingrow .letsGoFishingGameFull,
    .landscape #gameBody #letsplaysoccer .startletsgofishingrow .letsGoFishingGameFull {
        background-size: cover;
    }

    /* end */
    .landscape .quizz_reader #finalPage .preroll-wrap .fc-wrap {
        min-width: 160px;
        min-height: 160px;
    }

   .landscape #billBoard .flash-card-cont.layout-fill.layout-align-center-center:first-child {
       padding: 5px;
       max-width: 28%;
   }

    .landscape #calenderFlipCardMainDiv.envelope-template {
        min-height: auto;
    }

    .quizz_reader #finalPage .score-quiz-outer {
        min-height: auto;
    }

    .bookcover-img-wrap,
    .score-trophy-img-wrap {
        display: none;
    }

    .score_card {
        width: 140px;
    }

    .quizz_reader #finalPage .preroll-wrap .sc-wrap .scoreWrapper .score_card p {
        font-size: 20px;
        line-height: 25px;
    }

    .quizz_reader #finalPage .preroll-wrap .sc-wrap .scoreWrapper .score_card p span:last-child {
        font-size: 11px;
        margin-top: 10px;
    }

    .landscape .quizz_reader #finalPage .preroll-wrap .fc-wrap .score-quiz {
        flex-direction: row;
    }

    .landscape .quizz_reader #finalPage .preroll-wrap .fc-wrap .scoreWrapper .score_card h3 {
        margin-bottom: 0;
    }

    .bookTemplate3 .page .pageDiv .pageSpan span {
        font-size: 2.5vw;
    }
}


/* SL3-4873: All devices :Phonics : L3 : section 2:Lesson 6: Words to know : :Image border is coming wrong */

@media (min-width:768px) {

    .portrait .gameBody .abcgame_SMtimermode {
        font-size: 18px;
        font-weight: 600;
    }

    .portrait .phonicsMain .modal-header {
        background: #193463 !important;
    }

    #flipping_leatherbook .flipbook .page.even img.img_text {
        transform: translate(20px, -52.3%);
    }

    #flipping_leatherbook .bookTemplate3 .flipbook .page.even img.img_text {
        transform: translate(2%, -52.3%);
    }

    .portrait .letter-with-image .lettersequencetb1.demotrump {
        width: 100%;
    }

    .portrait .letter-with-image .lettersequencetb1.demotrump img {
        width: auto !important;
    }
}

@media (max-width:768px) {
    #flipping_leatherbook .flipbook .page.even img.img_text {
        transform: translate(5px, -52.3%);
    }

    .opposite_component .fa-star,
    .opposite_component .fa-star-o,
    .instruction_text .fa-info-circle {
        font-size: 24px;
    }

    #flipping_leatherbook .bookTemplate3 .flipbook .page.even img.img_text {
        transform: translate(11%, -52.3%);
    }

    .portrait #flipping_leatherbook .bookTemplate3 .flipbook .page.even img.img_text {
        transform: translate(2%, -52.3%);
    }

    .bookTemplate3 .page .pageDiv .pageSpan span {
        font-size: 3.2vw;
        letter-spacing: 1px;
    }

    .portrait .bookTemplate3 .page .pageDiv .pageSpan span {
        font-size: 19px;
    }
       /* #lgf_gamestarsrating {
    width: 85% ;
    gap: 14px ;
} */
}


/* Billboard with three words  upside down*/

.billboard-screen-change .fc-text {
    display: flex;
    flex-direction: column;
}

.billboard-screen-change .fc-text span.firstTxt+span {
    color: red;
}

.billboard-screen-change .fc-text {
    width: 100% !important;
}

@media (max-width:767px) and (orientation:portrait) {
    .billboard-screen-change .fc-text {
        padding: 0;
    }

    #billBoard #carousel .board-effect .sq-animate2 {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width:850px) and (orientation:landscape) {
    .billboard-screen-change .fc-text {
        padding: 0;
    }

    .landscape #words_rhyiming .rhyme_right {
        right: 10px;
    }

    .landscape #words_rhyiming .connectthedots-game-instruction-wrapper {
        position: fixed !important;
        height: 30%;
    }

    .landscape #words_rhyiming .abcgame_instruction_popup .abcgame_sm_instruction_content {
        align-items: flex-start;
        justify-content: flex-start;
    }
}

/* .CompanionReaderQuiz .right-arrow:hover {
    background-color: #b0b4e2;
} */

.header-search-bar {
    width: 100%;
    border: none;
}

.add-search-dd {
    position: absolute;
    top: 70px;
    width: 350px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 4px solid #d3bc36;
    border-radius: 10px;
    background: #fff;
    z-index: 999;
    /* right: 0; */
}

/* added css for Desktop/laptops : Phonics : Course player : Search overlay should be wider SL3-10463 */
#cat-search.add-search-dd {
    top: 35px;
    min-width: 320px;
    width: 100%;
}

/* END */
#course-search-col {
    z-index: 120;
}

.add-search-dd .top-filter-bar {
    float: left;
    width: 100%;
    background: #fffcd7;
    height: auto;
    text-align: center;
}

.add-search-dd .top-filter-bar ul {
    float: left;
    /* margin: 0 auto; */
    width: 100%;
    padding: 0;
    margin: 5px 2px;
}

.add-search-dd .top-filter-bar ul li {
    display: inline-block;
    line-height: 30px;
    font-size: 13px;
    float: left;
    width: 25%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#calenderFlipCardMainDiv .wordCardDiv {
    color: red;
}

.billboardlight-wrap .wordHighlight {
    color: red;
}

.menuboardSvg-Text.wordHighlight {
    fill: #ffd31c;
}

.menuboard-template .contentarea .templatebox .template-word p .wordHighlight {
    color: #ffd31c;
}


.ancient-template .contentWord span {
    color: #000 !important;
}

.ancient-template .contentWord span.wordHighlight {
    color: #1d2bee !important;
    background-color: transparent;
}

/* SL3-4382: Phonics : T3>>Section2>>Lesson Contractions1/2 :  Make picture larger/Put a red box around the ?( new changes 25 Aug) */


/* SL3-5196: Iphone 8 Portrait : Phonics :  Book 3 : Section 2 : Count the syllables : Ui is distorted (i.e. syllable numbers are not coming properly)*/

@media (max-width:767px) and (orientation:portrait) {
    .portrait #syllablepick .syllable_div {
        height: 75% !important;
    }

    /*    .portrait #lesson_ifr .ereader_bookimages .ereader_images .ereader-divider {
        width: 35% !important;
    } remove css for make images  proportions*/
    .portrait .ebookContainer #ereader_images {
        margin-top: 0;
    }

    .portrait #syllablepick .syllable_div .syllable_img {
        object-fit: cover;
    }
}


/* SL3-3917: Phonics : Logo/Menu is partially displayed on Iphone 11 landscape */

@media (max-width:850px) and (orientation:landscape) {
    .landscape #syllablepick .syllable_div .syllable_img {
        object-fit: cover;
    }

    .landscape header.headerfull .rdmap-wrap {
        margin-right: 20px;
        margin-top: 0;
    }
}


/* SL3-5098: Phonics new menu search */

.lesson-wrap li:nth-child(4) span {
    background: #80691e;
}

@media (min-width: 1366px) {
    /* header .h-right {
        width: 378px !important;
    } */

    header .connect-dot-bg {
        float: left;
        position: absolute;
    }

    .landscape #words_rhyiming .opposite_component {
        position: absolute;
        top: 10px;
    }

    .landscape .words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
        width: 250px;
        height: 160px;
    }
}

.phonicsSearch {
    margin-top: 22px;
}

.phonicsSearch input::placeholder {
    color: grey;
    font-size: 16px;
}

.phonicsSearch input {
    font-size: 16px;
}

.phonicsSearch input+i.fa-search {
    color: #193463;
    font-size: 70%;
}

@media (max-width: 1350px) {
    header .rdmap-wrap {
        margin-right: 0;
    }
}

.add-search-dd ul li i {
    background-size: contain !important;
    height: 25px !important;
    width: 25px !important;
    float: left;
    padding: 0;
    margin: 0;
    margin-top: 3px;
    background-repeat: no-repeat !important;
    border: none !important;
    filter: brightness(1)invert(1);
}
.add-search-dd .searchresulticon i {
    background-size: contain !important;
    display: block;
    background-position-y: center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    filter: brightness(1)invert(1);
}

.add-search-dd ul li i.video_icon,
.add-search-dd .searchresulticon i.video_icon {
    background: url(../images/video.png);
}

.add-search-dd ul li i.lesson_icon,
.add-search-dd .searchresulticon i.lesson_icon {
    background: url(../images/lesson.png);
}

.add-search-dd ul li i.interactivity_icon,
.add-search-dd .searchresulticon i.interactivity_icon {
    background: url(../images/Interactivity-Icon.png);
}

.add-search-dd ul li i.game_icon,
.add-search-dd .searchresulticon i.game_icon {
    background: url(../images/game.png);
}

.add-search-dd ul li i.story_icon,
.add-search-dd .searchresulticon i.story_icon {
    background: url(../images/two-page-story.png);
}

.add-search-dd ul li i.quizz_icon,
.add-search-dd .searchresulticon i.quizz_icon {
    background: url(../images/Quiz.png);
}

.add-search-dd ul li i.book_icon,
.add-search-dd .searchresulticon i.book_icon {
    background: url(../images/book.png);
}

.add-search-dd ul li i.story_time_icon,
.add-search-dd .searchresulticon i.story_time_icon {
    background: url(../images/storytime-Icon-white.png);
}

.add-search-dd ul li i+span {
    text-transform: initial;
    float: left;
}

.add-search-dd .search-output .searchitemList button {
    border: none;
    background: #fff;
    border-bottom: 2px solid #f2e5c9;
    margin-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    /* to fix SL3-6375: Phonics :Search : Searched data should not show gap (currently, is coming multiline with space) */
}

.add-search-dd .top-filter-bar ul li:first-child,
.add-search-dd .top-filter-bar ul li:nth-child(5) {
    width: 22%;
}

.add-search-dd .top-filter-bar ul li:nth-child(2),
.add-search-dd .top-filter-bar ul li:nth-child(6) {
    width: 20%;
}

.add-search-dd .top-filter-bar ul li:nth-child(3),
.add-search-dd .top-filter-bar ul li:nth-child(7) {
    width: 34%;
}

.add-search-dd .top-filter-bar ul li:nth-child(4),
.add-search-dd .top-filter-bar ul li:nth-child(8) {
    width: 23%;
}

#cat-search.add-search-dd .top-filter-bar ul li:nth-child(4),
#cat-search.add-search-dd .top-filter-bar ul li:nth-child(8) {
    width: 21%;
}

#cat-search.add-search-dd .top-filter-bar ul li:nth-child(3),
#cat-search.add-search-dd .top-filter-bar ul li:nth-child(7) {
    width: 33%;
}

#cat-search.add-search-dd .top-filter-bar ul li:nth-child(2),
#cat-search.add-search-dd .top-filter-bar ul li:nth-child(6) {
    width: 23%;
}

.add-search-dd .searchresulticon {
    float: left;
    width: 15%;
    overflow: hidden;
    height: auto;
}

.add-search-dd .searchresultlist {
    float: left;
    width: 84%;
    overflow: hidden;
}

.add-search-dd .searchresultlist .interactivity-name {
    color: #000;
    font-size: 14px;
    text-align: left;
    display: block;
}

.add-search-dd .searchresultlist p:nth-child(2) {
    font-size: 12px;
    text-align: left;
    color: #696969;
}

.add-search-dd .searchresultlist .book-name::after,
.add-search-dd .searchresultlist .section-name::after {
    content: ">";
    margin: 0 5px;
}

.add-search-dd .searchresultlist p {
    margin-bottom: 0;
    line-height: normal;
}

@media (max-width:1200px) {
 
    .phonicsSearch input+i.fa-search {
        margin-right: 5px;
    }


    .portrait .dynamic-layout-letter-sequence {
        flex-direction: column;
        width: 80%;
    }

    .portrait .letter-sequence .imgHolder,
    .portrait .layout-column.layout-align-space-around-center.flex-100,
    .portrait .layout-row.layout-align-center-center.flex-48 {
        width: 100%;
    }

    .portrait .letterHolder {
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    .layout-row.layout-align-center-center.flex-48 {
        margin: 5px auto;
    }

    .portrait .letter-sequence .stress>span {
        padding: 0 10px;
    }
    .gameContainer .rightSideBar #rhs-canvas {
    width: 129px;
    height: 129px;
}
}

.phonicsSearch input:focus {
    border: none;
    outline: none;
}

.portrait header .letters-text-wrap {
    top: 0 !important;
}


.add-search-dd .noDataFound {
    text-align: center;
    font-size: 14px;
    text-transform: initial;
    padding-top: 100px;
}

.add-search-dd .searchresulticon i.game_icon {
    padding: 12px;
}


/* to fix There is an extra line on the right border of the book */

.flipbook .page {
    border-radius: 0px;
}


/* SL3-5423: Phonics->L3->S2->On opening instructions, the dark background should appear all over the screen*/

@media (max-width: 464px) and (min-width: 320px) and (orientation: portrait) {
    .portrait .connectthedots-game-instruction-wrapper {
        width: 90%;
        left: 0;
    }
}

.nobglogo {
    background-image: none !important;
}


#gameBody .bowlingGameDiv,
#gameBody .gameGraphicsAuto .abcgame_smsplashwrap,
#gameBody .bowling-game-main-div .abcgame_smsplashwrap,
#gameBody #abcsoundmatch .abcgame_maincontainerContent,
#gameBody #abcMatchMainBody .abcgame_abcpickrecommendedgame,
#strocket-first .savethePlanetLogo,
#strocket-first .shootThestarModeScreen {
    background-image: none !important;
    width: auto !important;
}

#gameBody #abcsoundmatch .main-game .abcgame_maincontainerContent {
    position: absolute;
    width: 100% !important;
}

#gameBody #abcsoundmatch .abcgame_abcpickrecommendedgame {
    position: absolute;
    bottom: 0;
    background-image: none !important;
    width: 100% !important;
    top: 0;
}

#abcsoundmatch .sound_match_screen2_bg {
    position: relative;
}

#abcsoundmatch .buttonDiv {
    position: absolute;
    bottom: 0;
    left: auto;
    right: auto;
    background-image: none !important;
    width: 100% !important;
    top: 0;
}


#abcsoundmatch .abcgame_smgameplayWrap {
    left: 0;
    right: 0;
}

#gameBody .abcgame_abcpick_section2_small.abcgame_abcMatchWelcomePage.ng-scope {
    background-image: none !important;
    width: auto !important;
    overflow: hidden;
    border: none !important;
}

#gameBody #Shoottherocket .contentBox {
    position: relative;
}

#gameBody #Shoottherocket .early-screens {
    position: absolute;
    height: 100% !important;
    left: 0;
    width: 90% !important;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    right: 0;
}

#gameBody #Shoottherocket .early-screens button.shootTheRocketPlyBtn,
#gameBody #Shoottherocket .early-screens .startshoot_go_pg1.pop_gobtn_layer {
    position: absolute;
    bottom: 5%;
}


#gameBody #Shoottherocket .helpinstruction {
    top: 10px !important;
    right: 0px !important;
}

/* header global search css */

#phonicsGlobalSeachBar .letters-text-wrap .phonicsSearch input,
#phonicsGlobalSeachBar .letters-text-wrap .phonicsSearch i,
#phonicsGlobalSeachBar .letters-text-wrap .phonicsSearch {
    z-index: 9999;
}

.globalSearchOverlay header::before {
    content: "";
    background: rgb(0 0 0 / 54%);
    height: 100%;
    width: 100%;
    position: fixed;
    bottom: 0 !important;
    left: 0;
    right: 0;
    z-index: 99;
    margin: auto;
    border-bottom: 1px solid rgb(0 0 0 / 50%);
}

.globalSearchOverlay header .rdmap-wrap {
    pointer-events: none;
    z-index: -0;
}

.globalSearchOverlay #interactivity_div {
    overflow: hidden;
}

#phonicsGlobalSeachBar .letters-text-wrap .phonicsSearch {
    z-index: 9999999;
}

#phonicsGlobalSeachBar .letters-text-wrap .add-search-dd {
    z-index: 999;
}


/* end */


/* word rhyimig interactivity css  */

.words_rhyiming {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    position: relative;
    overflow-y: auto;
    min-height: 100%;
}

.words_rhyiming .click-rating {
    margin: 15px 0 !important;
}

.words_rhyiming #rhymewordsgame {
    width: 80%;
    margin: 0 auto;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone,
.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo {
    width: 100%;
    height: 100%;
    margin: 0;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .rhymmediabox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .image_box {
    box-sizing: border-box;
    padding: 2px;
    border: 4px solid #000;
    align-items: center;
    display: inline-flex;
    background: #fff;
    width: 100%;
    margin: 0px 15px;
    max-height: 100%;
    height: 285px;
    border-radius: 4px;
    overflow: hidden;
    max-width: 550px;
    text-align: center;
    grid-template-columns: auto;
    justify-content: center;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext {
    width: 20%;
    margin: 0 7px;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .align-middle {
    flex-direction: column;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan {
    width: 100%;
    max-width: 100%;
    border-radius: 4px;
    display: flex;
    justify-content: center;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .sentenceSpan p {
    font-size: 55px;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectionone .right_columntext .right-btns-grp {
    position: relative;
    right: 0;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo {
    margin-top: 50px;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box.wrong-Card {
    border: 3px solid #ff0000 !important;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_box {
    width: 210px;
    background: #fff;
    border: 3px solid #000;
    height: 130px;
    display: flex;
    padding: 2px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .right-btns-grp {
    position: relative;
    right: 0;
    width: 100%;
    text-align: center;
    margin: 10px 0 0 0;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_text {
    background: #fff;
    padding: 2px 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    width: 50%;
    max-width: 100%;
    text-align: center;
}

.words_rhyiming #rhymewordsgame .rhymemaincontent .rhymesectiontwo .media_box .image_text p {
    font-size: 25px;
    font-weight: 600;
}

.words_rhyiming .right-btns-grp .icon-volume {
    background: url(../images/rhymespeaker.png) center center/100% 100% no-repeat !important;
    width: 40px;
    height: 40px;
}


/* SL3-5450: Phonics->L3->S2->IPhone7->The images border are cut on the edges */

#billBoard .demotrumpCard {
    border-radius: 0;
}


/* SL3-5452: Phonics->L3->S2->Iphone7-> Repeat button stays yellow for a longer time when pressed. */

@media (hover: none) {
    .repeat-icon:hover {
        background: #fff;
    }

    .content-pagination li.arrow-right1 .md-button:hover .icon-next,
    .content-pagination li.arrow-left1 .md-button:hover .icon-prev {
        background-color: #fff;
    }
}

#interactivity_div img.imgStroke.syllable_img.corrCard {
    border: 6px solid #00a150 !important;
}


/* SL3-5424: Phonics->L3->S2->On clicking sound icon and slow icon, there is no click effect */

.icon-volume,
.icon-turtle-slow {
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    -o-transition: all linear 0.1s;
    -ms-transition: all linear 0.1s;
    border-radius: 50%;
}

.icon-volume:hover,
.icon-volume:focus,
.icon-volume:active,
.icon-turtle-slow:hover,
.icon-turtle-slow:focus,
.icon-turtle-slow:active {
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    -o-transition: all linear 0.1s;
    -ms-transition: all linear 0.1s;
    box-shadow: 2px 5px 6px 0px rgb(0 0 0 / 75%);
}


/* SL3-5873 phonics TB1 lessons writing links dialog*/

#writingLinks {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    display: flex;
    background-color: black;
}

#writingLinks iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
#writingLinks iframe svg {
    width: 100%;
    height: 100%;
    border: 0;
}
#writingLinks object {
    max-height: 100%;
    max-width: 100%;
}

.disabledaudioIcon {
    pointer-events: none;
    opacity: 0.4 !important;
}


/*Add css for iphone 11 multiple tabs*/

html.landscape.iphoneLandscape {
    overflow-y: auto;
}

html.landscape.iphoneLandscape .h-left.active_level_color_1 {
    background-color: transparent !important;
}

html.landscape.iphoneLandscape #recordingIframe #phonicsFooter {
    background: #ffcc00;
    border-top: 5px solid #f3eb15;
    /* position: absolute; */
    bottom: 0px;
    left: 0;
}

html.landscape.iphoneLandscape #phonicsFooter {
    position: relative;
}

html.landscape.iphoneLandscape #lesson_ifr {
    overflow: hidden;
    margin: 0 !important;
}

html.landscape.iphoneLandscape .game {
    padding: 0px 0 0px 0 !important;
}

html.landscape.iphoneLandscape #interactivity_div {
    overflow-y: hidden;
}

html.landscape.iphoneLandscape header .h-left {
    padding: 0px !important;
}

/* html.landscape.iphoneLandscape .video-container {
    height: calc(100% - 50px) !important;
} */

@media only screen and (min-device-width: 375px) and (orientation: landscape) {
    html.landscape.iphoneLandscape {
        min-height: 376px;
    }

    /* html.landscape.iphoneLandscape #syllablepick {
        min-height: 334px !important;
    }
    html.landscape.iphoneLandscape #gameBody {
        min-height: 334px !important;
    } */

}


/*end css for iphone 11 multiple tabs*/

@media only screen and (min-device-width: 414px) and (orientation: landscape) {
    html.landscape.iphoneLandscape {
        min-height: 415px;
    }

    /* html.landscape.iphoneLandscape #syllablepick {
        min-height: 369px !important;
    }
    html.landscape.iphoneLandscape #gameBody {
        min-height: 364px !important;
    } */
}


/*------add Css for games canvas height---------*/


/* iPhone 6, 7, 8 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

    /* to fix SL3-6448 logged in jira */
    /* The carousel left right arrow overlapping with text */


    #flipping_leatherbook .bookTemplate {
        height: 60%;
    }

    .landscape .interactivity .flip-divider {
        min-height: auto !important;
        height: 40vh !important;
    }

    .whatBehindTheDoor.mainFlashcard_flip.interactivity-flip.flipthecard .flip-divider {
        height: 40vh !important;
        max-height: 306px !important;
    }

    .landscape #calenderFlipCardMainDiv .upsideDownFlip .scene,
    .landscape #calenderFlipCardMainDiv .main-flip .cell-space {
        height: calc(100% - 12px) !important;
        min-height: auto;
    }

    /* added css only for tb1 */
    .landscape #root .textFirst .scene {
        height: calc(100% - 12px) !important
    }

    .landscape #root .textFirst .menuboardSvg-Text {
        font-size: 27vw !important;
    }

    /* end */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    .portrait .gameContainer #game_div {
        width: 84%;
    }

    .portrait .caraousal_interactive_custom .inner-flex-row {
        height: 64% !important;
    }

    .portrait #shootthestars .contentBox {
        height: 47vh !important;
    }

    .portrait .billboard-screen-change #billBoard .demotrumpCard span.ng-binding {
        font-size: 4.5vmin;
    }

    /* to fix SL3-6446: Phonics, Contractions (iPhone 7) instruction issues */
    .portrait #contraction-activity .connectthedots-game-instruction-wrapper ul li {
        font-size: 16px !important;
    }
}


/* iPhone 6+, 7+, 8+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    .portrait .gameContainer #game_div {
        width: 84%;
    }

    .portrait .caraousal_interactive_custom .inner-flex-row {
        height: 64% !important;
    }

    .portrait #shootthestars .contentBox {
        height: 47vh !important;
    }
}


/* iPhone X ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    #flipping_leatherbook .bookTemplate {
        height: 60%;
    }
}

/* iphone 15 */
@media only screen and (max-height: 378px) and (max-width: 860px) and (orientation: landscape) {
    .landscape .flipbook-viewport .container-flip {
        max-width: 720px;
        width: 100%;
    }
}

/* iPhone 11 ----------- */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .landscape #flipping_leatherbook .bookTemplate {
        height: 60%;
    }

    #interactivity_div .flipcardInteractivity .front img {
        max-height: 117px;
    }
}

@keyframes para {
    100% {
        background-position: 100% 0%, -100% 20%, 0 0;
    }
}


/* for all screens */

.landscape .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
    display: flex;
    align-items: center;
}

.landscape #bowlingGame .abcgame_abcpick_alertSelectLevelOverlay.ng-scope.jumpGameOverlay {
    justify-content: center;
}

.abcbowlingGameDiv {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/allgames-cover/ABC-Word-Bowl-Square-Cover.jpg") !important;
}

.bingoRecomendedGame .abcgame_abcpickrecommendedgame,
.bingoMaincontainer {
    background-image: none !important;
    background-position: center !important;
    background-size: contain !important;
}

.bingoLogo,
.abcgame_bingologo {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/gameLogs-Cover/logos/Bingo-Cover-logo.png") !important;
}

#gameBody #letsplayfootball .startletsgofishingrow .abcletsGoFishingGameFull {
    background-image: none !important;
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
}

#gameBody #letsplayfootball .startletsgofishingrow .abcletsGoFishingLogo,
#gameBody #letsplayfootball .abclgfballoom_image_pg1 .lgf_gameinstructpglayernxtbtnimg {
    background-image: none !important;
    display: none;
}

#letsplayfootball .abclgf_gameinstructpglayernxtbtnimg {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/gameLogs-Cover/logos/ABC-football-logo.png) !important;
}

#letsplayfootball .abclgfballoom_image_pg1 {
    background-image: none !important;
    background-position: top;
}

#gameBody #letsplaysoccer .startletsgofishingrow .abcletsGoFishingGameFull {
    background-image: none !important;
    background-position: center;
}

#gameBody #letsplaysoccer .startletsgofishingrow .abcletsGoFishingLogo,
.gameBody #letsplaysoccer .startletsgofishingrow .abclgf_gameinstructpglayernxtbtnimg {
    background-image: none !important;
}

#gameBody  #letsplaysoccer .startletsgofishingrow .letsGoFishingLogo, 
#gameBody #letsplaysoccer .startletsgofishingrow .abcletsGoFishingLogo {
    display: none;
}

#letsplaysoccer .abclgfballoom_image_pg1 {
    background-image: none !important;
}

.abcbowlingGameDiv {
    background-image: url('https://d25k2pvzisqrb6.cloudfront.net/assets/gameLogs-Cover/cover/ABC-Word-Bowl-Square-Cover.png') !important;
}

#gameBody #letsgofishing .lgf_gameinstructpglayernxtbtnimg {
    background-image: url('https://d25k2pvzisqrb6.cloudfront.net/assets/gameLogs-Cover/logos/Let_s-Go-Fishing-(Typing)-Logo.png') !important;
    background-size: 70%;
    background-position: center;
}

.bowlingGameDiv .abcgame_smlogo {
    width: 65% !important;
    height: 60% !important;
    background-image: url('https://d25k2pvzisqrb6.cloudfront.net/assets/gameLogs-Cover/logos/Word-Bowl-Square-Intro-cover-logo.png') !important;
    background-position: center;
}

#gameBody #letsplaybaseball .startletsgofishingrow .letsGoFishingGameFull,
#letsplaybaseball .lgfballoom_image_pg1 {
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
}

#letsplaybaseball .startletsgofishingrow .letsGoFishingLogo,
#letsplaybaseball .startletsgofishingrow .lgf_gameinstructpglayernxtbtnimg {
    background-image: none !important;
    width: 65%;
    height: 60%;
    background-position: initial;
}

#gameBody #letsplaybasketball .startletsgofishingrow .letsGoFishingGameFull,
#letsplaybasketball .lgfballoom_image_pg1 {
    background-image: none !important;
}

#letsplaybasketball .startletsgofishingrow .letsGoFishingLogo,
#letsplaybasketball .startletsgofishingrow .lgf_gameinstructpglayernxtbtnimg {
    background-position: initial;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/allgames-cover/basketball-logo-may2021.png) !important
}

#letsplaybasketball .startletsgofishingrow .letsGoFishingLogo {
    display: none;
}

#gameBody #letsgofishing .lgf_gameinstructpglayernxtbtnimg.abclgf_gameinstructpglayernxtbtnimg {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abclgf/image/gamebglogo.png) !important;
}


/* Bill board light updated background with road design change */

#billBoard.bill-board-light {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/bill-board-light-Bg1.jpg);
}

.portrait #billBoard.bill-board-light {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/bill-board-light-Bg-mobile.jpg);
}

.bowlingGameDiv .abcbowlingGameDiv {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/gameLogs-Cover/logos/ABC-Word-Bowl-Square-Cover-logo.png") !important;
}

#gameBody #letsgofishing .nologofishing {
    background-image: none !important;
}


/* end  */


/* To fix game jump issue in all the game when swithing from welcome to game modes screen */

.abcgame_abcpickrecommendedgame button,
.gameBody .abcgame_SMtimermodeparent,
#abcBingoMainDiv .gameContainer .abcgame_bingohomebuttonswrap,
#abcsoundmatch .buttonDiv button {
    min-height: 80px !important;
    max-height: 80px !important;
}

#abcBingoMainDiv .gameContainer .abcgame_bingohomebuttonswrap {
    position: absolute;
    bottom: 2%;
}

#abcsoundmatch .buttonDiv button {
    bottom: 2%;
    left: 0;
    right: 0;
}

@media only screen and (max-device-width: 767px) {
    .abcgame_bingoflipcard4 {
        font-size: 16px !important;
        /* To fix SL3-SL3-6658: Phonics : 4>4>17>4 : Bingo : words are not coming properly  */
    }
}

#bowlingGame .abcgame_readycount {
    margin-top: 0;
}

#gameBody #letsgofishing .startletsgofishingrow .letsGoFishingGameFull,
#gameBody #letsgofishing .letsgofishingContainer .letus_gofihing {
    background-image: none !important;
}

#gameBody #letsgofishing .abcgame_abcpickrecommendedgamefull .letsGoFishingLogo,
#gameBody #letsgofishing .lgf_gameinstructpglayernxtbtnimg {
    background-image: none !important;
    width: 100% !important;
    background-size: contain !important;
}

.abcgame_abcpick_innersection2 {
    padding: 0;
}

div#optionalScreen,
.abcgame_abcpickoptionaltitle,
.abcgame_abcpickoptionalgamewrap {
    display: none;
}

#SightWordBlast #scoreboard {
    /* top: 50% !important;
    transform: translateY(-50%) !important; */
    padding: 0 !important;
    /* margin-left: 0 !important; */
}

#SightWordBlast .abcgame_abcpick_alertSelectLevelOverlay {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
}

#bowlingGame .abcgame_scoreBtns {
    width: 100% !important;
}

canvas#confettiCanvasWB {
    z-index: -10 !important;
}

.red-color {
    color: red !important;
}

.green-color {
    color: green !important;
}

#shootthestars #scoreboard {
    margin: auto 5% !important;
}

.abcgame_scoreBtns {
    width: 100% !important;
}

#interactivity_div #wordPickSound .alphabet-div .form-group input {
    font-size: 25px !important;
}

#gameAreaWrapDiv {
    position: absolute;
    bottom: -50px;
    font-size: 25px;
    font-weight: bold;
    color: #000000;
    /* left: 50%; */
    background: #ddd;
    border-radius: 5px;
    padding: 0px 5px;
    /* transform: translateX(-50%); */
    right: 10px;
    margin: auto;
}

.gameBody .stars li i.green {
    color: #197b30;
    -webkit-text-stroke: #197b30;
}

.gameBody .stars li i.red {
    color: #ea1313;
    -webkit-text-stroke: #ea1313;
}

@media (max-width:850px) and (orientation:landscape) {
    .landscape #interactivity_div #wordPickSound .alphabet-div .form-group input {
        font-size: 20px !important;
    }
}


/* Writing pdfs popup */

.ReactModalPortal .ReactModal__Overlay--after-open {
    background-color: rgba(0, 0, 0, 0.75) !important;
    z-index: 999;
}

.ReactModalPortal .ReactModal__Overlay--after-open .ReactModal__Content--after-open {
    border-radius: 4px !important;
    outline: none !important;
    padding: 20px !important;
    margin-right: -50% !important;
    transform: translate(-50%, -50%) !important;
    background: #f6eecb !important;
    border: 10px solid #ffcc05 !important;
    overflow-x: hidden !important;
    /* to fix SL3-18503 - 1536x729 : Phonics | Reading : 1-2-3-1|1-2-3-2|1-2-3-3 : Horizontal scroll is showing */
}

.ReactModalPortal .ReactModal__Overlay--after-open .ReactModal__Content--after-open button {
    background: #838383 !important;
    border-radius: 50% !important;
    width: 25px !important;
    height: 25px !important;
    color: #fff !important;
    opacity: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ReactModal__Content.ReactModal__Content--after-open.instructionVideo {
    transform: none !important;
    margin-right: auto !important;
    max-width: 960px;
    margin: auto;
    margin-right: auto;
    background: transparent !important;
    border: none !important;
    height: 100%;
    position: relative;
}

.instructionVideo iframe  {
    height: 100%;
}

.instructionVideo:has(iframe) .modal-close-btn {
    top: 10px !important;
    right: 10px !important;
    font-size: 24px !important;
}

.ReactModalPortal .ReactModal__Overlay--after-open:has(.instructionVideo){
    display: flex;
    align-items: center;
    justify-content: center;
}

.ReactModal__Content.ReactModal__Content--after-open.instructionVideo{
    max-height: 70%;
    width: 100%;
    position: relative;
}

.ReactModal__Content.ReactModal__Content--after-open.instructionVideo>div {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.ReactModalPortal .ReactModal__Overlay--after-open .ReactModal__Content--after-open button span {
    color: #ffeb3b;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.writingimgs .writingPdfs {
    margin: 20px !important;
    cursor: pointer !important;
    border: 1px solid #ffcc05;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
}

.writingimgs .writingPdfs:hover {
    box-shadow: 0 0 20px #ffcc05;
    -webkit-box-shadow: 0 0 20px #ffcc05;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
}

@media (max-width:991px) and (orientation:landscape) {
  
    /* for mobile landscape */
    .landscape #calenderFlipCardMainDiv.blackboard-template .template-img {
        width: 60%;
    }

    .landscape #calenderFlipCardMainDiv.blackboard-template .templatebox .sentenceSpan {
        font-size: 12px;
    }
        .landscape .ancient-scroll-wrapper {
            width: 57% !important;
        }
    .landscape .ReactModalPortal .ReactModal__Overlay--after-open .ReactModal__Content--after-open {
        transform: translate(-50%, -50%) scale(0.6) !important;
        -webkit-transform: translate(-50%, -50%) scale(0.6) !important;
    }

    .landscape .ReactModalPortal .ReactModal__Overlay--after-open .ReactModal__Content--after-open.instructionVideo {
        transform: translate(-50%, -50%) !important;
        position: absolute !important;
        width: auto !important;
        height: auto !important;
        top: 50% !important;
        left: 50% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-width: 80% !important;
    }

    .landscape #billBoard.bill-board-light .board-effect,
    .landscape .billboard-screen-change #billBoard #carousel .board-effect {
        max-height: 63%;
    }
}


/* Scroll on less than 570px height on desktop */

@media (min-width:992px) and (max-height:570px) {
    .ReactModalPortal .ReactModal__Overlay--after-open .ReactModal__Content--after-open {
        height: 90vh;
    }
}


/* to hide activity title on full screen */

header.headerfull .connect-dot-bg {
    display: none !important;
}


/*CSS to adjust Youtube modal-- */

.gameWrapper .modal-video {
    z-index: 99;
}

div#syllablepick {
    position: relative
}

div#syllablepick .modal-video {
    position: absolute;
}

div#syllablepick .modal-video-movie-wrap {
    padding: 0 !important;
    height: 85%;
}

.slider-template .sentenceSpan {
    background: none;
}


/* Count the syllable video popup ui */

#syllablepick .modal-video-close-btn {
    position: absolute !important;
    z-index: 2 !important;
    top: -5px !important;
    right: -5px !important;
    display: inline-block !important;
    width: 30px !important;
    height: 30px !important;
    overflow: hidden !important;
    background: #3d3737 !important;
    border-radius: 50% !important;
    line-height: 20px !important;
    border: 2px solid #fff !important;
}

#syllablepick .modal-video-close-btn:before,
.modal-video-close-btn:after {
    content: "" !important;
    position: absolute !important;
    height: 2px !important;
    width: 60% !important;
    top: 50% !important;
    left: 5px !important;
    margin-top: -1px !important;
    background: #fff !important;
    border-radius: 5px !important;
}

#syllablepick .modal-video-movie-wrap iframe .html5-video-player:not(.ytp-big-mode) .ytp-chrome-top .ytp-copylink-button {
    display: none !important;
}

#syllablepick .modal-video-body {
    width: 90% !important;
}


/* Start equalizer css */

.page-main-controls ul li #canvas_equalizer {
    width: 30px;
    height: 50px;
    padding-bottom: 13px;
    margin-left: 34px;
}

.equalizer #canvas_equalizer {
    width: 30px;
    height: 50px;
    padding-bottom: 13px;
    padding-right: 5px;
}

.equalizer .hide_canvas_equalizer {
    display: none !important;
}


/* End equalizer css */

.ancient-template .carousel-root {
    width: 100%;
}

.ancient-scroll-wrapper .carousel-slider,
.ancient-scroll-wrapper .slider-wrapper,
.ancient-scroll-wrapper .slider,
.ancient-scroll-wrapper .slide,
.ancient-scroll-wrapper div {
    height: 100%;
}

.ancientWrapper {
    display: flex;
    position: relative;
    align-items: center;
}

.blackboard .contentarea .templatebox .template-word p span.blacktxt {
    color: black;
}

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px),
(max-device-width: 878px) and (min-device-width: 320px) {
    #gameAreaWrapDiv {
        font-size: 18px !important;
        bottom: -35px;
    }

    .landscape #Shoottherocket .shootrocketPage6 #shoot_gamescoreviewbox,
    .landscape #Shoottherocket .shootrocketPage6 #shoot_gamemissedviewbox,
    .landscape #Shoottherocket #shoot_countdownBar {
        height: auto !important;
        padding: 10px 5px;
        font-size: 11px;
        margin: 5px 1px;
    }
}

/*SL3-9661, styling for soundmatch temp word shown..for tablets*/
@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) {
    #gameAreaWrapDiv {
        font-size: 20px !important;
        bottom: -40px;
    }
}

/*SL3-9661.....use this container's relative position to display temp word element....*/
.abcgame_sm_gameLFT {
    position: relative;
}


/* media screen min-width: 1024px means if screen width is greater than equal to 1024 */

@media only screen and (min-width: 1024px) {

    /*we conside one unit is eqaul to 30px */
    /* So we consider e.g:- 9x6 is equal to 270px x 180px */
    img.book_size_9x6 {
        max-width: 270px !important;
        max-height: 180px !important;
    }

    img.book_size_6x9 {
        max-width: 180px !important;
        max-height: 270px !important;
    }

    img.book_size_8x10 {
        max-width: 240px !important;
        max-height: 300px !important;
    }

    img.book_size_8x11 {
        max-width: 240px !important;
        max-height: 330px !important;
    }

    img.book_size_10x8 {
        max-width: 300px !important;
        max-height: 240px !important;
    }

    img.book_size_5x8 {
        max-width: 150px !important;
        max-height: 240px !important;
    }
}


/* media screen max-width: 1024px means if screen width is less than equal to 1024 */

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

    .landscape #gameBody #Shoottherocket .helpinstruction {
        top: 12px !important;
        right: -12px !important;
        transform: scale(0.65);
    }

    .landscape .gameBody #Shoottherocket .early-screens {
        width: 100% !important;
    }

    .landscape #gameBody #Shoottherocket .early-screens .startshoot_go_pg1.pop_gobtn_layer {
        top: auto !important;
        left: 0 !important;
    }

    .landscape #gameBody #Shoottherocket .early-screens .startshoot_go_pg1.pop_gobtn_layer button {
        font-size: 1.3rem !important;
    }

    /*we conside one unit is eqaul to 20px */
    /* So we consider e.g:- 9x6 is equal to 180px x 120px */
    img.book_size_9x6 {
        max-width: 180px !important;
        max-height: 120px !important;
    }

    img.book_size_6x9 {
        max-width: 120px !important;
        max-height: 180px !important;
    }

    img.book_size_8x10 {
        max-width: 160px !important;
        max-height: 185px !important;
    }

    img.book_size_8x11 {
        max-width: 160px !important;
        max-height: 185px !important;
    }

    img.book_size_10x8 {
        max-width: 200px !important;
        max-height: 160px !important;
    }

    img.book_size_5x8 {
        max-width: 100px !important;
        max-height: 160px !important;
    }
}


/* to fix SL3-7202: Phonics :  Flip Chart : Keep greater distance between words. (Upper words) (new changes 20 June) */

#calenderFlipCardMainDiv .fixed-mutated-card {
    word-spacing: 10px;
}

#Shoottherocket .shootrocketPage4 .gameinstructpglayernxtbtnimg {
    width: 100% !important;
    height: 60%;
    background-size: contain !important;
    background-position: center;
}

#Shoottherocket .shootrocketPage6 .contentBox {
    background: transparent;
}

.fa-arrow-alt-circle-right {
    font-size: 34px;
    color: #000;
    margin-left: 13px;
    z-index: 9;
    cursor: pointer;
}

.shootTheRocketPlyBtn {
    width: 151px;
    height: 80px;
    position: static;
    color: #fff;
    font-size: 0;
    background-color: transparent;
    border: none;
    margin: 0 auto;
    background-position-y: center !important;
    background-position-x: center;
    background-size: contain;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/readingoptionalgameplay_button_Text.png);
    background-repeat: no-repeat;
    min-height: 80px !important;
    max-height: 80px !important;
}

.additional-resources {
    width: 40px;
    cursor: pointer;
}

.quizz_reader .quizbgImg::before {
    background: #111;
    content: "";
    width: 100%;
    z-index: -1;
    height: 100%;
}

.quizz_reader div#finalPage {
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.full-screen-control.funIcon {
    cursor: pointer;
    width: 40px;
    height: 38px;
    border-radius: 10px;
    border: 2px solid #333;
    background: #fff;
    text-align: center;
    position: relative;
}

.full-screen-control.funIcon .additional-resources {
    width: 30px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* story time page UI changes css  */

.storytime-container {
    width: 100%;
    background-color: #000;
    height: 100%;
}

.storytime-container .storytime-row {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storytime-container .storytime-row svg {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storytime-container .storytime-row svg image#book {
    outline: 2px solid #000;
}

.storytime-container .storytime-row #pare.youtube-video {
    width: 100%;
    height: 100%;
}


/* end */

#billBoard #writingLinks {
    z-index: 9;
}

.active_level_color_1 .lesson-wrap.title_Color li strong,
.active_level_color_1 .connect-dot-bg span,
.active_level_color_1 .rdmap-wrap.title_Color li a {
    color: #fff !important;
}

.dataTitle {
    top: 10%;
    position: absolute;
}

.shoot-lhs-alphabet {
    font-size: 46px;
    font-weight: bold;
    color: #6C2FF1;
}

.instruction-wrap-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
}


/*Header css*/

.landscape .rdmap-wrap.title_Color.isDesktop.phonic-login-menu {
    display: flex;
}


.landscape header .rdmap-wrap li {
    display: flex !important;
    align-items: center;
}

.save-reading {
    background-color: #fff;
    width: 32px;
    height: 32px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin-bottom: 7px;
    margin-top: 4px;
}

.save-progress-image img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: invert(0) brightness(100);
}

.save-progress-image img.icon-breathe {
    filter: none;
}

#phonics_page.reading-home-page-wraper .save-progress-image .save-reading {
    background-color: transparent !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

header .rdmap-wrap li .save-progress-image a {
    padding-bottom: 0;
    opacity: 0;
}

.save-progress-image {
    height: auto;
}

.save-progress-inner {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #333;
    background: #fff;
    border: 2px solid #84751a;
    transition: 0.3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.save-progress-image img.icon-breathe {
    position: absolute;
    width: 20px;
    bottom: 14px;
    height: 20px;
    right: -8px;
    animation: breathing 1s ease-out infinite normal;
}

/* added css for save progress icon merge with tb3 bg color SL3-8258 */
.active_level_color_3 .save-progress-image>img:nth-child(1) {
    filter: brightness(5);
}

/* end */

/* added css for Tracking :  Iphone11/pixel : Portrait : tracking icons seem touching the lesson names SL3-8282 */
h3.u-position-relative .fa.fa-check-circle.in-progress-status {
    margin-left: 7px;
}

/* end */
/* added css for Tracking :  Iphone11/pixel : Portrait : filters: tracking icons are not coming properly  SL3-8256*/
.fa.fa-check-circle.in-progress-status {
    filter: invert(0.0) !important;
}

/* end */

.fa-check-circle:after {
    content: "";
    width: 12px;
    height: 16px;
    display: block;
    background: #fff;
    position: absolute;
    top: 2px;
    z-index: -1;
    left: 3px;
    border-radius: 50px;
}

.landscape .mobile-view-only {
    display: none !important;
}

.menuboardSvg-Text {
    font-size: 90px;
    fill: #ffd31c !important;
    font-weight: bold;
}

.menuTabHeader button i.fa.fa-check-circle:after {
    width: 8px;
    height: 10px;
    left: 3px;
}

.common-profile-section .sb-avatar.sb-avatar--src {
    height: auto !important;
}

.mob-center .btn-login .commonProfileCss {
    align-items: center;
}

.billboard-screen-change #carousel {
    overflow-y: visible;
}

.homophoneLayout .cell-space .selected {
    background-color: #444B79;
    color: #fff;
}

.matchingGamedragContainer .drag-container .ui-draggable-disabled.ng-not-empty p {
    opacity: 0.4;
}

.matchingGamedragContainer .drag-container .btn-draggable {
    font-size: 4vmin !important;
}

.flipcardInteractivity .one-card .main-cards-data .mutated-word .pagespan {
    text-align: center;
}

/* to fix Iphone 11 : Portrait : Phonics : menu : White spots are coming */
.portrait h3.u-position-relative .fa.fa-check-circle {
    position: relative;
}

.matchingGamedragContainer .drag-container .source,
.matchingGamedragContainer .drag-container .source p {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
.matchingGamedragContainer .drag-container .drop_childAfter {
     font-size: 4vmin !important;  
}
*/
#calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p:first-child {
    color: #fff;
    text-shadow: 5px 7px 5px #000;
}

li.arrow-right1.layout-align-start-center.layout-row.disabled,
li.arrow-left1.layout-align-end-center.layout-row.disabled {
    opacity: 1;
}

#phonicsFooter ul li.arrow-right1.disabled,
#phonicsFooter ul li.arrow-right1.disabled #indexNext,
#phonicsFooter ul li.arrow-left1.disabled,
#phonicsFooter ul li.arrow-left1.disabled #previous {
    background-color: #8FA78B;
}

#phonicsFooter ul li.arrow-right1.disabled #indexNext,
#phonicsFooter ul li.arrow-left1.disabled #previous {
    opacity: 0.5;
}

#phonicsFooter ul li.arrow-left1.disabled::before {
    border-right-color: #8FA78B;
}

#phonicsFooter ul li.arrow-right1.disabled::before {
    border-left-color: #8FA78B;
}

/* Movie time css for TB1 */
.billBoardTextbook1 {
    flex-direction: row-reverse;
}

.portrait #billBoard #carousel .board-effect .billBoardTextbook1.sq-animate2 {
    flex-direction: column-reverse;
}

#billBoard .billBoardTextbook1 .demotrumpCard span.ng-binding {
    font-size: 10vmin !important;
}


/* to fix SL3-9434: Firefox : Phonics :  Flip chart : Animation is coming slower */
.main-flip.upsideDownFlip {
    overflow: hidden !important;
}

/* to fix SL3-9729 iPad pro (Fullscreen)-Book 2- >Section 5->Lesson 5->Activity 2 ->Flipchart->portrait->cards are partially displayed . */
.interactivityfullScreen div#calenderFlipCardMainDiv .main-flip.book-clips.upsideDownFlip {
    overflow: visible !important;
}

/* in TB1 Sec1 A,B,C,D,E... replaced by Aa, Bb, Cc.... */
.mainFlashcard_flip .testcard1_ff {
    font-size: 14vmin;
}

@media screen and (max-width:1400px) {
    .mainFlashcard_flip .testcard1_ff {
        font-size: 9vmin;
    }
}


.clicksoundinteractivity .wordbeginingsound .trumpCard_red {
    position: relative;
}

.clicksoundinteractivity .wordbeginingsound .trumpCard_red span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    transform: translate(-50%, -50%);
}

.clicksoundinteractivity .eight-falsh-card-wrap .wordbeginingsound .trumpCard_red span {
    font-size: 4.5vw;
}

.abcgame_bingomaincontainerContent .abcgame_abcpickrecommendedgamewrap {
    /* background: #060a57 !important; */
    border-radius: 15px !important;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .noSentence,
#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .noSentence {
    background: none !important;
    border: none !important;
    border-style: none !important;

}

.special_word {
    font-family: 'Open Sans', sans-serif;
}

.ancientArrow {
    background-image: none !important;
}

.interactivity .flashcard-turnOver .flash-card-table .behind-door,
.interactivity .flipthecard .flash-card-table .behind-door {
    justify-content: space-evenly;
    width: 89%;
}

.interactivity .flipthecard .flash-card-table #flipcardBehindDoor.behind-door {
    width: 97%;
}

.landscape .interactivity .flipthecard .flash-card-table #flipcardBehindDoor.behind-door .flip-divider {
    width: 17%;
}

.interactivity .flipthecard .flash-card-table #flipcardBehindDoor.behind-door .door.doorOpen {
    transform: perspective(1500px) translateZ(0px) translateX(0px) translateY(0px) rotateY(103deg);
}

/* flashcard flip new layout css */
/* 
.backDoor
{
  background-color: #333;
  position:relative;
  width:200px;
  height:300px;
  
  margin: 0 auto;
  margin-top:50px;
} */

.ltiuserLayout .headersearch-section,
.ltiuserLayout .phonic-login-menu .icon-menu-bar,
.ltiuserLayout .arrow-left1,
.ltiuserLayout .arrow-right1 {
    display: none !important;
}

.common-profile-section .open>.dropdown-menu>li.menuDD.ltiuserLayout {
    display: none;
}

.ltiuserLayout .nav_header #right_menu_sec,
.ltiuserLayout .practice-separator,
.ltiuserLayout .lesson-separator,
.ltiuserLayout .worksheet-separator,
.ltiuserLayout .lft_cont,
.ltiuserLayout .rgt_cont,
.ltiuserLayout .practicePage,
.ltiuserLayout .navigationBTn,
.ltiuserLayout li.menuDD.ltiuserMenuDD {
    display: none !important
}

/* to fix SL3-11573: Apple Thunderbolt screen : 2560x 1440 : Phonics : Recommended library : The refresh is far from the information icon on the Screen and a white dot appears.*/

.ebookParentDiv #lesson_iframe .click-rating .right_column .instruction_text:first-child {
    max-width: none;
    width: auto;
}

.carousalFlipCard .upsideDownFlip .mutated-word .fixed-word {
    /* color: red !important; */
}

.carousalFlipCard .container.calendar-row .main-cards-data {
    display: flex;
    align-items: center;
    justify-content: center;
}

.abbrevationDAta {
    display: flex;
    flex-direction: column;
}

.interactivity .homophoneLayout .book3-click-flip .testcard1_ff {
    transform: none !important;
}

.wordFinder-bluebook .book3-click-flip .cardUp.flipTemp {
    background-image: url(../images/wordFinder-Bluebook.png);
    background-size: 100% 100%;
    border: none;
    border-radius: 0 !important;
    background-color: transparent;
    z-index: 0;
}

.wordFinder-bluebook .flash-card-row.layout-align-center-center.layout-row {
    justify-content: space-evenly;
}

.wordFinder-bluebook .book3-click-flip .cardUp.flipTemp.wrong-Card {
    border: 0 !important
}

.wordFinder-bluebook .book3-click-flip .testcard1_ff.cardUp {
    transform: perspective(1500px) translateZ(0px) translateX(0px) translateY(0px) rotateY(0deg);
    left: 0px;
    transform-origin: left;
}

.wordFinder-bluebook .book3-click-flip .testcard1_ff.cardUp.flipTemp.cardflipback1 {
    transform: perspective(1500px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-104deg);
    z-index: 999;
    visibility: visible;
    display: block !important;
    left: 0px;
    transform-origin: left;
    overflow: visible;
    backface-visibility: visible;
    filter: contrast(1);
    z-index: 9;
}

/* .wordFinder-bluebook .book3-click-flip .testcard1_ff.cardUp.flipTemp:after {
    position: absolute;
    content: '';
    bottom: -1px;
    left: 0px;
    height: 4px;
    width: 100%;
    background-size: 3px 1px;
    background-image: -webkit-radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
    background-image: -moz-radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
    background-image: -ms-radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
    background-image: -o-radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
    background-image: radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
} */

/* .wordFinder-bluebook .book3-click-flip .testcard1_ff.cardUp.flipTemp:before{
    position: absolute;
    content: '';
    top: -5px;
    left: 0;
    height: 10px;
    width: 99%;
    background-size: 9px 12px;
    background-image: -webkit-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
    background-image: -moz-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
    background-image: -ms-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
    background-image: -o-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
    background-image: radial-gradient(circle at 5% 40%, transparent 70%, #555 20%);
} */
.wordFinder-bluebook .book3-click-flip .cell-space.disabled .cardUp.flipTemp {
    filter: brightness(0.4);
}

.wordFinder-bluebook .book3-click-flip .flipTemp.layout-align-start-center.layout-column.selected {
    filter: contrast(1);
}

.wordFinder-bluebook .book3-click-flip .flipTemp.layout-align-start-center.layout-column.selected:before {
    content: '';
    position: absolute;
    background-image: url(../images/front-spirla.png);
    background-size: inherit;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    left: -1px;
    z-index: 9;
}

.wordFinder-bluebook .book3-click-flip .cardUp.flipTemp.invisible.hide .cardfront-text {
    display: none;
}

.wordFinder-bluebook .book3-click-flip .fc-imgwrap {
    padding: 2px;
    background-color: #fff;
}

.wordFinder-bluebook .book3-click-flip .cardUp.flipTemp.cardflipback1 .cardfront-text {
    display: none;
}

.wordFinder-bluebook .cardfront-text {
    margin-left: 48px;
    margin-right: 18px;
}

.instruction_text span.infoIcon:after {
    content: '';
    position: absolute;
    border: 10px solid #fff;
    animation: ring 1.5s infinite;
    border-radius: 100%;
}

.instruction_text .fa-info-circle {
    z-index: 9;
}

@keyframes ring {
    0% {
        border: 10px solid #fff;
        opacity: 1;
    }

    100% {
        border: 25px solid #fff;
        opacity: 0;
    }
}

@media screen and (max-width:991px) {
   
    .landscape .book_size_9x6 {
        max-width: 180px !important;
        max-height: 100px !important;
    }

    .landscape img.book_size_6x9 {
        max-width: 180px !important;
        max-height: 120px !important;
    }

    .landscape img.book_size_8x10 {
        max-width: 240px !important;
        max-height: 120px !important;
    }

    .landscape img.book_size_8x11 {
        max-width: 240px !important;
        max-height: 120px !important;
    }

    .landscape img.book_size_10x8 {
        max-width: 300px !important;
        max-height: 120px !important;
    }

    .landscape img.book_size_5x8 {
        max-width: 150px !important;
        max-height: 120px !important;
    }

    .landscape #Shoottherocket .ScoreBar,
    .landscape #Shoottherocket .clock,
    .landscape .shoottherocketsContainer .shootpg6contain1 .rightSideBar .controlButtons {
        margin-bottom: 0 !important;
    }

    .landscape .gameBody .rightSideBar {
        padding-top: 25px !important;
    }

    /* css added for words to know portrait and landscape */

    .landscape #flipping_leatherbook .bookTemplate3 .flipbook .page.even img.img_text {
        transform: translate(2%, -52.3%);
    }

    .landscape #flipping_leatherbook .bookTemplate3 .flipbook .page .book-wrapper .pageDiv {
        height: 40%;
    }

    /* end */

    .instruction_text span.infoIcon:after {
        border: 5px solid #fff;
    }

   .wordFinder-bluebook .cardfront-text {
        margin-left: 10px;
    }

    @keyframes ring {
        0% {
            border: 5px solid #fff;
            opacity: 1;
        }

        100% {
            border: 15px solid #fff;
            opacity: 0;
        }
    }
}

@media (min-width:2000px) {
    .ereader_bookimages .ereader_images .flash-card-row {
        transform: scale(2);
    }
}

#calenderFlipCardMainDiv .spaceship-ContentBox,
#calenderFlipCardMainDiv .contentBox,
.flipcardInteractivity .calendar-row {
    z-index: 9;
}

#instruction_div {
    z-index: 98 !important;
}

.dynamic-layout-letter-sequence {
    width: 90%;
    justify-content: space-evenly;
    margin: auto;
    align-items: center;
    height: 90%;
}

.letter-sequence .imgHolder,
.layout-column.layout-align-space-around-center.flex-100,
.layout-row.layout-align-center-center.flex-48 {
    border-radius: 40px;
    background-color: #fff;
}

.letter-sequence .img-wrapper {
    width: 100%;
    height: 100%;
}

.letter-sequence .imgHolder {
    height: 100%;
    overflow: hidden;
    padding: 10px;
}

.letterHolder.layout-row.flex-60 {
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.letter-sequence .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.landscape .letter-sequence .stress {
    position: static;
    height: auto;
}

.letterHolder.layout-row.flex-100 {
    margin-top: 20px;
}

.letterHolder.layout-row.flex-100 {
    justify-content: space-between;
}

.layout-row.layout-align-center-center.flex-48 {
    width: 48%;
}

.content-pagination li md-icon span {
    font-size: 0;
    display: flex;
}

.content-pagination li i {
    font-size: 22px;
    vertical-align: inherit;
    margin: auto;
}

.page-main-controls ul {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

.content-pagination li.arrow-left1,
.content-pagination li.arrow-right1 {
    text-align: center;
    background-color: #fff;
    width: 15%;
    height: 70px;
    margin: 0 !important;
    position: relative;
}

.content-pagination li #indexNext,
.content-pagination li #previous,
.content-pagination li .md-button {
    cursor: pointer;
    margin: 0px auto;
}

button#playPausebtn {
    background-color: #ffcc00;
    border-radius: 0;
    border: 0;
    width: 100%;
    height: 70px;
    opacity: 1;
}
body:has(.storytime-container) button.storytimebtndisabled{
    opacity: 0.3 !important;
}

.content-pagination li.pager-control {
    text-align: center;
    width: 15%;
    margin: 0 !important;
}

#dropdown-basic-button:before,
.Phonics-homepage-wraper #dropdown-basic-button:before {
    color: #fff !important;
}

.landscape .page-main-controls li.Record,
.portrait .page-main-controls li.Record {
    margin: 0 50px 0 0px !important;
}

.landscape .page-main-controls li.Settings,
.portrait .page-main-controls li.Settings {
    margin: 0 0 0 50px !important;
}


.content-pagination li.pager-control.equalizer {
    width: auto;
}

.content-pagination li.arrow-right1:before {
    content: '';
    position: absolute;
    border-top: 70px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 59px solid #fff;
    left: 100%;
    top: 0;
    bottom: 0;
}

.content-pagination li.arrow-left1:before {
    content: '';
    position: absolute;
    border-top: 70px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 59px solid #fff;
    right: 100%;
    top: 0;
    bottom: 0;
}

header .connect-dot-bg span {
    font-size: 16px;
}

#letter-sequence .click-rating .bullets.fas {
    color: #193463;
}

#letter-sequence .click-rating .bullets {
    font-size: 90%;
    font-weight: 900;
    color: #fff;
}

@media (max-width:1366px) {
 
    .portrait .commonProfileCss:has(#LoginButton) {
        position: absolute;
        top: 5px;
        right: 12px;
        gap: 0 2px;
    }

    .portrait .icon-home,
    .portrait .icon-menu,
    .portrait .icon-dashboard {
        top: 5px !important;
    }

    .portrait .lesson-wrap ul {
        margin-top: 0;
    }

    .portrait .logo-wrap a {
        transform: none;
    }

    .portrait .logo-wrap {
        background: transparent;
        transform: none;
    }

    .portrait .letterHolder.layout-row.flex-60 {
        flex-direction: column;
        margin-top: 30px;
    }

    .portrait .letter-sequence .stress>span {
        margin-top: 0%;
    }
}

@media (max-width:991px) {
    
    .portrait .courseTracking img,
    .landscape .courseTracking img{
        position: relative;
        top:-1px !important;
        left:3px !important;
    }

    .letter-sequence .imgHolder,
    .layout-column.layout-align-space-around-center.flex-100,
    .layout-row.layout-align-center-center.flex-48 {
        border-radius: 20px;
    }

    .content-pagination li.arrow-right1:before,
    .content-pagination li.arrow-left1:before {
        display: none;
    }

    .content-pagination li.arrow-left1,
    .content-pagination li.arrow-right1 {
        height: 58px;
    }

    .content-pagination li.arrow-left1 .md-button,
    .content-pagination li.arrow-right1 .md-button {
        height: 58px;
    }

    .landscape header.headerfull .save-progress-image img.icon-breathe {
        bottom: 6px;
    }

    .portrait button#playPausebtn,
    .landscape button#playPausebtn {
        height: 58px;
    }

    .portrait .content-pagination li.arrow-left1,
    .content-pagination li.arrow-right1 {
        width: 15%;
    }

    .portrait .page-main-controls ul li #canvas_equalizer {
        margin-left: -25px !important;
        width: 25px !important;
    }

    .portrait .page-main-controls li.Record {
        margin-right: 5px !important;
    }

    .portrait .content-pagination ul {
        transform: scale(0.8);
    }

    .portrait .content-pagination li {
        max-width: 16%;
    }

    .portrait .page-main-controls,
    .landscape .page-main-controls {
        width: 100% !important;
        float: left;
    }

    .landscape .page-main-controls li.Record,
    .landscape .page-main-controls li.Settings {
        width: auto !important;
        margin-right: 0px !important;
    }

    .landscape .page-main-controls li.Settings {
        padding-left: 0px !important;
        padding-left: 0px !important;
        padding-left: 0px !important;
        margin-left: 0px !important;
    }

    .portrait .page-main-controls ul li.Settings {
        margin-top: 0px !important;
        margin-left: 0px !important;
    }

    .portrait .phonicsMain #recordingIframe .col-md-4 .logo-wrap,
    .landscape .phonicsMain #recordingIframe .col-md-4 .logo-wrap {
        background: transparent !important;
    }

    .portrait .phonicsMain #recordingIframe .col-md-4 .logo-wrap,
    .landscape .phonicsMain #recordingIframe .col-md-4 .logo-wrap {
        float: left;
        margin: 0 !important;
        padding: 0;
        height: auto !important;
    }

    .portrait #recordingIframe .full-screen-control .btn-action,
    .landscape #recordingIframe .full-screen-control .btn-action {
        padding: 5px;
    }

    .portrait #recordingIframe .full-screen-control .btn-action .fullscreenEL,
    .landscape #recordingIframe .full-screen-control .btn-action .fullscreenEL {
        filter: brightness(1.5) invert(10);
    }

    .portrait #recordingIframe.ereaderFullScreen .full-screen-control .btn-action .fullscreenEL,
    .landscape #recordingIframe.ereaderFullScreen .full-screen-control .btn-action .fullscreenEL {
        filter: none !important;
    }

    .portrait #recordingIframe.ereaderFullScreen,
    .landscape #recordingIframe.ereaderFullScreen {
        height: 100% !important;
    }

    .landscape #recordingIframe .ML-store .common-profile-section .header_setting_btn .caret:before {
        top: 5px !important;
        right: -50px !important;
        left: auto !important;
    }

    .portrait #recordingIframe .ML-store .common-profile-section .header_setting_btn .caret:before {
        top: 5px !important;
        right: -10px !important;
        left: auto !important;
    }

    .landscape .phonicsMain #recordingIframe {
        padding: 0px 0 0px 0;
    }
      .landscape .carousel-parent.flipleather-book .split-text-cont .text-top {
        font-size: 2.5vw !important;
    }
}

.abcgame_abcpick_gameResult {
    padding-left: 25px !important;
}

/* added css for abc match game result screen issue  */
#abcMatchMainBody #abc_match .abcgame_abcpick_gameResult {
    padding-left: 0px !important;
}

/* css ends here */
.instruction-popup-string {
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
}
.right-btns-grp.new-layout {
    position: static;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    padding-right: 10px;
    z-index: 1;
}

.right-btns-grp.new-layout #icon-volume {
    margin-right: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.book-wrapper {
    height: 100%;
}

.word_toknow .page .book-wrapper .pageDiv {
    height: 50%;
}

.interactivity #flipping_leatherbook.MainCardTemplate.leather-book.BookWood .container-flip.word_toknow .book-wrapper .audio-text {
    height: 50%;
    display: flex;
    width: 99%;
    flex-direction: column;
    justify-content: center;
    margin: auto;
}

.interactivity #flipping_leatherbook .book-wrapper .audio-text {
    height: 50%;
    display: flex;
    width: 90%;
    flex-direction: column;
    justify-content: start;
    margin: auto;
}

.interactivity #flipping_leatherbook #flipbook_interactivity.word_toknow .book-wrapper .audio-text {
    border-top: 1px solid #000;
}

.interactivity #flipping_leatherbook .book-wrapper .align-middle .sentenceSpan {
    text-align: center !important;
}

div#carouselCommonScreen,
div#writingLinks1,
iframe#lessonIntroLInk1,
iframe#commonScreenIntro1 {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#countins.fa-info-circle::before {
    content: " " !important;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/phonics-intro-screen/icon1111.png);
    height: 30px;
    width: 30px;
    background-size: 30px;
    background-repeat: no-repeat;
    display: block;
}

.privacy-policy {
    margin-bottom: 10px;
}

@media (min-width:992px) and (orientation:landscape) {
    .landscape .gameBody .abcgame_SMtimermode {
        font-size: 14px;
        font-weight: 600;
    }

    /* html.landscape.iphoneLandscape .video-container{
        height: calc(100% - 70px) !important;
    } */
    .landscape .content-pagination {
        height: 70px !important;
    }
}

@media (min-width:1025px) and (orientation:landscape) {

    html.landscape.iphoneLandscape #lesson_ifr.interactivityParentDiv,
    html.landscape.iphoneLandscape #lesson_ifr .ebookContainer {
        padding-top: 0 !important;
    }
}

@media (min-width: 1025px) {
    html.landscape .video-container {
        height: calc(100dvh - 150px) !important;
    }

        html.landscape header.headerfull+.video-container {
        height: calc(100dvh - 70px) !important;
    }
    
    /*
    .wordFinder-bluebook .book3-click-flip .testcard1_ff.cardUp .cardfront-text {
        font-size: 4vmin !important;
    }
    */
}

header {
    position: static !important;
}


@media (max-width: 1200px) {
    /* html.landscape .video-container {
        height: calc(100vh - 138px) !important;
    } */

    html.landscape header.headerfull+.video-container {
        height: calc(100dvh - 70px) !important;
    }

   /* html.portrait .video-container {
       height: calc(100vh - 120px) !important;
   } */

    html.portrait header.extra+.video-container {
        height: calc(100dvh - 120px) !important;
    }

    .landscape .connectthedots-game-instruction-wrapper.animated.bounceIn {
        padding: 10px 5px !important;
    }

    .connectthedots-game-instruction-wrapper ul li {
        margin-bottom: 5px;
    }
}

@media (max-width: 991px) {
    html.landscape .video-container {
        height: calc(100dvh - 124px) !important;
    }

    html.landscape header.extra+.video-container {
        height: calc(100dvh - 56px) !important;
    }

    .landscape #flipping_leatherbook #flipbook-viewport .fontfaceRed_ADV_CALIBRI:not(.textbook1) .pageSpan span,
    #flipping_leatherbook #flipbook-viewport .fontfaceRed_ADV_CALIBRI:not(.textbook1) .pageSpan>div {
        line-height: 1;
    }
   
}

@media (max-width:767px) {
    html.portrait .video-container {
        height: calc(100dvh - 160px) !important;
    }

    .portrait .gameParentDiv {
        margin-top: 0 !important;
    }

    .portrait .full-screen-control.funIcon {
        margin-right: 5px !important;
    }
                 .portrait .ancientWrapper .contentWord span {
        
                     font-size: 4vw;
                 }
}

@media only screen and (min-width:1024px) and (max-width:1024px) and (orientation:landscape) {
    .landscape .phonicsMain #recordingIframe #recordingEreader {
        max-height: calc(100dvh - 68px) !important;
        padding: 0 !important;
    }
}

.gameGraphicsAuto img.gameGraphicsImg,
.gameBody .letsGameContainer .gameGraphicsAuto img.gameGraphicsImg {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.gameBody .gameGraphicsAuto,
.portrait .gameBody .gameGraphicsAuto,
.landscape .gameBody .contentBox.gameGraphicsAuto,
.lgfballoom_image_pg1 {
    /* width: auto !important; */
    height: auto !important;
    max-width: 80vh !important;
    max-height: 100% !important;
    /* aspect-ratio: 1/1; */
    padding: 2px !important;
}

.lgfballoom_image_pg1 {
    height: 100% !important;
}

.gameContainer .balloom_imagex {
    width: auto !important;
}

.contentBox.gameGraphicsAuto {
    background: transparent !important;
    padding: 0 !important;
}

img.gameGraphicsImg {
    border-radius: 2% !important;
    border: 2px solid #fff !important;
    box-shadow: #ccc 1px 2px 8px 2px !important;
}

.lgf_gameinstructionbtnimg {
    width: 45px;
    height: 45px;
    background-size: contain;
}

.abcgame_abcpickrecommendedgamewrap {
    background: transparent !important;
}

.abcgame_abcpickrecommendedgame,
.abcgame_maincontainerContent {
    border: none !important;
    box-shadow: none !important;
}

#strocket-first .abcgame_SMtimermodewrap {
    width: auto;
    min-width: 90px;
}

.abcgame_abcpickrecommendedgame button {
    left: auto !important;
}

/* client feedback to change word highlight color for envelope activity */
.envelope-template .contentarea .templatebox .align-middle span.wordHighlight {
    color: #ff0 !important;
}

/* To fix pause screen is not aligned properly in few screens. */

body:has(.pause-screen) .abcgame_smoverlay{
    z-index:0 !important;
}

body:has(.abcgame_smoverlay) .pause-screen{
    z-index:999999999 !important;
}

.pause-screen img[alt="pause"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%
}

.wc-focus:focus {
    outline: none;
}

.wc-focus:focus-visible {
    box-shadow: 0px 0px 2px 3px black,
                0px 0px 2px 5px white;
}

.skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: #fff;
    color: #000;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
    clip: rect(1px, 1px, 1px, 1px);
    /* Hide visually */
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
    /* Prevent text wrap */
}

.skip-nav:focus {
    clip: auto;
    height: auto;
    width: auto;
    top: 0;
    /* Move into view when focused */
}

.landscape .abcgame_abcpick_gameResult div {
    font-size: 13px !important
}


html #appBody #mg_top-ereader.mg_top .recording-name{
white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width:1920px) and (orientation:portrait) {
    .portrait .video-container {
        height: calc(100dvh - 175px) !important;
    }

    .interactivity #flipping_leatherbook .align-middle .sentenceSpan {
        font-size: 22px;
    }
       .portrait .drop_childAfter {
        bottom: 0px !important;
    }
}

@media (max-width:862px) and (orientation:portrait) {
    .portrait .video-container {
        height: calc(100dvh - 175px) !important;
    }
        #shootthestars .jumpGameOverlay .abcgame_abcpick_gameResultWrapper {
        max-height: 100%;
        height: 50%;
    }

    #shootthestars .jumpGameResultDiv .abcgame_scoreBtns {
        bottom: 28px;
    }
    #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn,
    #shootthestars .jumpGameResultDiv .abcgame_nextlevel {
        height: 42px !important;
    }
}

@media (max-width:767px) and (orientation:portrait) {

    /* text alignment for booklet activity on mobile portrait  */
    .portrait .interactivity .bookTemplate2 .align-middle .sentenceSpan {
        font-size: inherit !important;
        width: auto !important;
    }

    .portrait .bookTemplate2 .right-btns-grp{
        width: 85%;
        margin: 0 0 0 auto;
    }

    /* end text alignment for words to know mobile portrait  */

    .portrait .video-container {
        height: calc(100dvh - 161px) !important;
    }

    .portrait #calenderFlipCardMainDiv .contentBox {
        height: calc(100% - 58px) !important;
    }

    header.extra+.video-container {
        height: calc(100dvh - 106px) !important;
    }

    header.headerfull.extra+.video-container {
        height: calc(100dvh - 106px) !important;
    }
          #shootthestars .jumpGameResultDiv .abcgame_nextlevelBtn,
          #shootthestars .jumpGameResultDiv .abcgame_nextlevel {
              height: 22px !important;
          }
           .portrait .click-sound-parent {
                    display: grid !important;
                    grid-template-columns: repeat(2, 1fr);
                    justify-items: center;
                    align-items: start;
                    
                }
        
        
                .portrait .click-soundcard-wrap {
                    display: contents !important;
                }
}
@media (max-width:767px) {

    .gameGraphicsAuto img.gameGraphicsImg,
    .gameBody .letsGameContainer .gameGraphicsAuto img.gameGraphicsImg {
        width: 100% !important;
        height: 100% !important;
    }

    .portrait #billBoard .board-effect {
        max-height: 60% !important;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .even{
        height: 50% !important;
    }

    #flipping_leatherbook.flip-book2 #flipbook-viewport:has(.pageSpan span:nth-child(2)) .pageSpan{
        gap: 10px 0;
    }

}


/* landscape view for Ipad8*/

/* @media only screen and (min-device-width: 810px) and (max-device-width: 1080px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .landscape .video-container {
        height: calc(100dvh - 124px);
    }

    .landscape header.headerfull+div.video-container {
        height: calc(100dvh - 56px) !important;
    }

    .landscape header.extra+div.video-container {
        height: calc(100dvh - 56px) !important;
    }
        .landscape header.extra+div.video-container .gameBody .abcgame_SMtimermodeparent {
            bottom: 21%;
        }
        .landscape header.headerfull+div.video-container .gameBody .abcgame_SMtimermodeparent {
            bottom: 2%;
        }
} */

/* Portrait view for Ipad8*/

@media only screen and (min-device-width: 810px) and (max-device-width: 1080px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .portrait #calenderFlipCardMainDiv.common .contentarea .templatebox span.sentenceSpan,
        .portrait #flipping_leatherbook.flip-book2 .audio-text.stringBottom span.sentenceSpan,
        .portrait .ancient-template .audio-text {
            font-size: 22px !important;
        }

    .portrait header.headerfull+div.video-container {
        height: calc(100dvh - 120px) !important;
    }

    html.portrait header.extra+.video-container {
        height: calc(100dvh - 120px) !important;
    }

    .portrait .gameBody .abcgame_SMtimermodeparent {
        bottom: 10%;
    }

    .portrait header.headerfull+div.video-container .gameBody .abcgame_SMtimermodeparent {
        bottom: 18%;
    }

.portrait .headerfull.extra .icon-menu,
.portrait .headerfull .icon-menu {
    right: 128px !important;
    left: auto !important;
}
    .portrait header.headerfull+div.video-container .gameBody .abcgame_SMtimermodeparent {
    bottom: 12%;
}
 .portrait .carousel-parent .text-top {
     margin: 21px 15px !important;
 }

 #lesson_ifr {
     height: 100%;
 }
   
}

/* wcag compliant color  */

/* book 1 colors  */

.wc-active_level_color_1,
body:has(.wc-content) .menuTabHeader .textbook_1 {
    background: #AB6407 !important;
}

body:has(.wc-content) .bgColor_on_currentModal.active_1 {
    background: linear-gradient(115deg, #AB6407 20%, #193463 20%) !important;
}

body:has(.wc-content) .menuTabHeader .textbook_1:before {
    border-left-color: #AB6407 !important;
}

/* book 2 colors  */

.wc-active_level_color_2,
body:has(.wc-content) .menuTabHeader .textbook_2 {
    background: #E1191C !important;
}

body:has(.wc-content) .bgColor_on_currentModal.active_2 {
    background: linear-gradient(115deg, #E1191C 20%, #193463 20%) !important;
}

body:has(.wc-content) .menuTabHeader .textbook_2:before {
    border-left-color: #E1191C !important;
}

/* book 3 colors  */

.wc-active_level_color_3,
body:has(.wc-content) .menuTabHeader .textbook_3 {
    background: #3A8334 !important;
}

body:has(.wc-content) .bgColor_on_currentModal.active_3 {
    background: linear-gradient(115deg, #3A8334 20%, #193463 20%) !important;
}

body:has(.wc-content) .menuTabHeader .textbook_3:before {
    border-left-color: #3A8334 !important;
}

/* book 7 colors  */

.wc-active_level_color_7,
body:has(.wc-content) .menuTabHeader .textbook_7{
    background: #2E7F3A !important;
}

body:has(.wc-content) .bgColor_on_currentModal.active_7 {
    background: linear-gradient(115deg, #2E7F3A 20%, #193463 20%) !important;
}

body:has(.wc-content) .menuTabHeader .textbook_7:before {
    border-left-color: #2E7F3A !important;
}

body:has(.wc-content) .skip-nav {
    color: #000;
}

/* wcag compliant color end */