/** Connect the dots css style begins **/

.gameBody {
    position: relative;
}

#interactivity_div .text-center {
    text-align: center;
}

#interactivity_div .home-cursor {
    cursor: pointer;
}
#gameBody .connect-the-dots-wrapper .connectthedots-game-text {
    visibility: hidden;
}

#interactivity_div .startgame-connectthedots-innerwrapper canvas {
    margin-top: 2em;
}

#svgOutline {
    visibility: hidden;
}

#game_div .connectthedots-canvas-container #svgOutline {
    /* max-height: 400px; */
    height: 100%;
    max-width: 600px;
}

#interactivity_div .connectthedots-container {
    height: 100%;
    top: 0;
    right: 0;
    /* background-color: #1e5799;
    background-color: -moz-linear-gradient(to bottom, #7ff1f6 2%, #e3fae5 10%, #f3fecc 26%, #e8f98b 60%, #e8f98b 60%);
    background: -webkit-linear-gradient(to bottom, #7ff1f6 2%, #e3fae5 10%, #f3fecc 26%, #e8f98b 60%, #e8f98b 60%);
    background: linear-gradient(to bottom, #7ff1f6 2%, #e3fae5 10%, #f3fecc 26%, #e8f98b 60%, #e8f98b 60%); */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7ff1f6', endColorstr='#7db9e8', GradientType=0);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

#interactivity_div .connectthedots-container:before {
    content: '';
    /* background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/connectthedots-full-bg.png) !important; */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    background-repeat: no-repeat;
    background-position: 0px bottom;
    background-size: 100%;
}

#interactivity_div .connectthedots-centerlized-wrapper {
    width: 100%;
    height: 600px;
}

#interactivity_div .connectthedots-canvas-container #canvas {
    display: block;
    top: 1em;
    left: 1em;
    position: absolute;
}

#interactivity_div .connectthedots-dotsContainer {
    position: absolute;
    top: 0px;
    z-index: 99;
    padding-left: 0px;
    padding-top: 0px;
    height: inherit;
}

#interactivity_div .canvas,
#interactivity_div .connectthedots-dotsContainer {
    left: 0em;
    padding-left: 0px;
    padding-top: 0px;
    height: 100%;
    /* z-index: 0; */
}

#interactivity_div .aletter {
    font-weight: bold;
}

#interactivity_div .connectthedots-dotsContainer ul {
    list-style-type: none;
    height: 100%;
    padding: 0;
    margin: 0;
    clear: both;
    overflow: hidden;
    width: 100%;
    position: relative;
    top: 0px;
    /* transform: scale(0.95); */
    z-index: 1;
}

#interactivity_div .connectthedots-canvas-container {
    margin-top: 0px;
    margin-left: 0px;
    position: relative;
    z-index: 1;
    height: inherit;
    top: 0px;
    width: 600px;
    height: 600px;
    /* transform: scale(0.95); */
}

#interactivity_div .connectthedots-dotsContainer ul li {
    font-family: Arial;
    position: absolute;
    z-index: 1;
    display: inline-block;
    border-radius: 50%;
    height: 23px;
    width: 23px;
    font-size: 24px;
    background-color: #ffffff !important;
    border: 2px solid black;
    cursor: pointer !important;
    text-align: center;
    line-height: 40px;
    color: #000;
    outline: 0;
}

#interactivity_div .connectthedots-container a,
#interactivity_div .connectthedots-container button,
#interactivity_div .connectthedots-container img {
    outline: 0;
}

#interactivity_div img.instructionPopUp {
    width: 100%;
}

#interactivity_div .connectthedots-dotsContainer ul li:before {
    content: '';
    position: absolute;
    top: -11px;
    left: -12px;
    z-index: 1;
    height: 50px;
    width: 50px;
}

#interactivity_div .connectthedots-dotsContainer ul li.reduce-dots-area:before {
    content: '';
    height: 0;
    width: 0;
}

#interactivity_div .connectthedots-dotsContainer ul li span {
    position: absolute;
    color: #151515;
    font-size: 1.1em;
}

#interactivity_div .connect-the-dots-wrapper {
    /* background:url(../images/connectthedots-full-bg.png) no-repeat; */
    background-size: cover;
    height: 100%;
    max-width: none;
    margin: 0 auto;
    width: 100%;
}

#interactivity_div .connectthedots-main-wrapper {
    position: relative;
    width: 100%;
    max-height: 99%;
    margin: 0% auto 0 auto;
    height: 800px;
    /* padding: 35% 0;8*/
}

#interactivity_div .connectthedots-innerwrapper {
    position: relative;
    float: none;
    text-align: center;
    height: 100%;
    max-height: 800px;
    background-size: contain;
    background-repeat: no-repeat;
    /* float: left; */
    margin: 0 auto;
    overflow: hidden;
}

#interactivity_div .connectthedots-innerwrapper figure {
    margin: 0;
    height: 100%;
    widows: 100%;
    display: block;
    margin: 0;
}

#interactivity_div .connectthedots-innerwrapper figure .bg-rotateImage {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: bottom;
}

#interactivity_div .connectthedots-score-innerwrapper {
    min-height: 300px;
}

#interactivity_div .connectthedots-start-game-container {
    /* background: url(../images/connectthedots-full-bg.png) no-repeat scroll 0 0 / contain; */
    clear: both;
    overflow: hidden;
    margin: 0% auto 0 auto;
    width: 90%;
    position: relative;
}

/* #interactivity_div .connectthedots-start-game-container .connectthedots-sg-left-container,
#interactivity_div .connectthedots-start-game-container .sg-right-container {
    float: left;
    height: 100%;
    max-height: 100%;
    min-height: 42.8em;
    vertical-align: top;
    width: 23%;
    padding: 30px;
    position: relative;
    /* background: url(../images/connect-dots-bg-panel.png) no-repeat scroll 0 0 / cover;    
    /* background-position: right top; 
} */

#interactivity_div .connectthedots-start-game-container .connectthedots-sg-left-container {
    padding: 0px 30px 30px !important;
    display: flex;
    justify-content: center;
}

#interactivity_div .connectthedots-game-inner-container {
    float: left;
    width: 50.5%;
    height: 100%;
    margin: 0px;
}

#interactivity_div .connectthedots-main-wrapper .contentBox {
    height: 100% !important;
}

.connectthedots-centerlized-wrapper .contentBox {
    height: 100%;
}


#interactivity_div .connectthedots-startgame-innerwrapper {
    background-color: #4c4c4c;
    /* border-top: 0;
    border-bottom: 0;
    float: left;
    margin: 0 auto;
    float: none;
   
    position: relative;
    text-align: center;*/
    border-radius: 40px;
    transform: scale(0.9);
}

#interactivity_div .connectthedots-game-event-icons ul {
    width: 100%;
    text-align: center;
    padding: 0;
}

#interactivity_div .connectthedots-game-event-icons ul li {
    cursor: pointer !important;
    display: inline-block;
    margin: 30px 10px 0 10px;
    vertical-align: top;
    position: relative;
    z-index: 111;
}

#interactivity_div .connectthedots-left-container,
#interactivity_div .connectthedots-right-container {
    position: relative;
    width: 25%;
    height: 100%;
    float: left;
    min-height: 43em;
}

#interactivity_div .connectthedots-left-container {
    float: left;
}

#interactivity_div .connectthedots-right-container {
    float: right;
}

#interactivity_div .connectthedots-main-wrapper .welcome-txt {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/connect-dots-btnbg.png) no-repeat;
    position: absolute;
    bottom: 1em;
    color: #ffffff;
    font-size: 1.6em;
    cursor: pointer;
    text-align: center;
    width: auto;
    background-size: cover;
    width: 5.5em;
    height: auto;
    line-height: 1.5em;
    font-family: Arial;
    text-transform: uppercase;
}

#interactivity_div .connectthedots-main-wrapper .play-game-btn {
    position: absolute;
    bottom: 38%;
    left: 42.1%;
    z-index: 11;
    background: none;
    border: 0;
    cursor: pointer;
}

#interactivity_div .connectthedots-main-wrapper .welcome-slide-btn span {
    position: absolute;
    top: 3px;
    left: 1.6em;
}

#interactivity_div .connectthedots-main-wrapper .instruction-btn {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/connect-dots-btnbg.png) no-repeat;
    background-size: contain;
    bottom: 9%;
    font-size: 1.8em;
    left: 45%;
    width: 126px;
    height: 53px;
    color: #ffffff;
    cursor: pointer;
    font-family: Arial;
    line-height: 1.5em;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    border: none;
}

#interactivity_div .connectthedots-main-wrapper .welcome-slide-btn3 {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/connectingdotsplay-button.png) no-repeat;
    bottom: 11% !important;
    font-size: 1.8em;
    left: 56% !important;
    width: 126px;
    height: 53px;
    color: #ffffff;
    cursor: pointer;
    font-family: Arial;
    line-height: 1.5em;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    border: none;
}

#interactivity_div .sm-slide-btn {
    width: 30%;
    padding: 8px 20px !important;
}

#interactivity_div .connectthedots-main-wrapper .welcome-txt {
    background: none;
    bottom: 2px;
    margin: 0;
    color: #e54e01;
    font-size: 1em;
    /*    left: 50%;*/
    width: 100%;
}

#interactivity_div .topCloudContainer {
    -webkit-animation: cloud_two 25s linear infinite;
    -moz-animation: cloud_two 25s linear infinite;
    -o-animation: cloud_two 25s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    margin: 0 auto;
    width: 10em;
}

#interactivity_div .topColudImage {
    position: absolute;
    top: 1em;
    left: 9.3em;
}

#interactivity_div .welcome-slide-btn {
    left: initial;
    right: 6%;
    bottom: 5%;
    background-size: cover;
    padding: 8px 34px;
    color: #fff;
    border: 0;
}

#interactivity_div .instruct-slide-btn {
    bottom: 1.6em !important;
    left: initial !important;
    right: 0.5em;
}

#interactivity_div .begin-btn {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/letsplay-btn.png) no-repeat;
    bottom: 1em !important;
    left: 56% !important;
    padding: 10px 24px;
    right: 0.5em;
    width: 164px;
    text-transform: capitalize !important;
}

#interactivity_div .begin-btn:after {
    border-bottom-color: #ff5400 !important;
}

#interactivity_div .connectthedots-main-wrapper .begin-btn span {
    background-color: #ff5400 !important;
}

#interactivity_div .connectthedots-outputimg-container {
    position: absolute;
    margin: 0px;
    width: 100%;
    float: left;
    clear: both;
    overflow: hidden;
    border: 3px solid #7dcebd;
    height: 100%;
    top: 0px;
    left: 0px;
}

#interactivity_div #ouputImg {
    margin: 0px auto 0px auto;
    object-fit: contain;
    height: 100%;
}

#interactivity_div .outputimg img {
    width: 100%;
}

#interactivity_div .connectthedots-star-rating {
    clear: both;
    overflow: hidden;
    /* position: relative; */
    top: 5em;
    width: 100%;
    text-align: center;
    left: 0%;
    text-align: left;
    margin: 0 auto;
}

#interactivity_div .connectthedots-star-rating ul {
    text-align: center;
    padding: 0;
}

#interactivity_div .main-wrap {
    position: relative;
    top: 0px;
}

#interactivity_div .main-wrap [role="button"] {
    cursor: default;
}

/* overRidding ui segment */
.ui.segment {
    font-size: 1em;
}

#interactivity_div .connectthedots-play-button-container .next-level-btn,
#interactivity_div .connectthedots-play-button-container .play-again-btn {
    font-size: 1.3em;
    cursor: pointer;
    font-family: Arial;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    border: none;
    padding-bottom: 14px;
    right: 0;
    padding: 0;
    width: 28%;
    height: 1.8em;
    border-radius: 15px;
    line-height: 1.8em;
    color: #004c4a;
    background-color: #ffcc00;
    min-width: 135px;
    margin: 10px auto;
    height: auto;
    padding: 15px 0;
}

#interactivity_div .connectthedots-play-button-container .play-again-btn {
    background-color: #df2c5c;
    color: #ffffff;
}

#interactivity_div .connectthedots-play-button-container .play-again-btn:hover {
    background-color: #ca2551;
}

#interactivity_div .connectthedots-play-button-container.next-level-btn:hover {
    background-color: #ecbf07;
}

#interactivity_div .connectthedots-play-button-container.next-level-btn:hover,
#interactivity_div .connectthedots-play-button-container .play-again-btn:hover,
#interactivity_div .upper-lower-btn li:hover {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

@keyframes aletteranimate {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.5, 1.5, 1.5);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

#interactivity_div .connectthedots-star-rating 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: 0 1px;
    background-size: contain;
}

#interactivity_div .connectthedots-star-rating ul li.active,
#interactivity_div .connectthedots-star-rating ul li.activeStar {
    /* background: url('https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_star_fill.png') no-repeat; */
    background-size: contain;
}

#interactivity_div .info-icon {
    position: absolute;
    top: 1.7em;
    right: .8em;
    cursor: pointer !important;
    width: 47px;
    height: auto;
}

#interactivity_div #connectthedots-overlay,
#interactivity_div .game-result-overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 111;
}

#interactivity_div .game-result-overlay {
    cursor: default !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

#interactivity_div .wrong-selection-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    bottom: 0;
    margin: auto;
    right: 0;
    color: #fff;
    padding: 7.5% 0;
    z-index: 11;
    width: 26%;
    border-radius: 40px;
    display: none;
}

/* css added due to use of popup component in inner game page 30-1-2020 */

#showinstruct .connectthedots-game-instruction-wrapper {
    width: 80% !important;
    margin: auto;
    left: 0 !important;
    right: 0;
}

/* end */


.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;
}

.connectthedots-game-instruction-wrapper.animated.bounceIn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/instruction-bg.png);
    background-size: 100% 100%;
    height: auto;
    border-radius: 0px;
    padding: 30px 5px !important;
    position: relative;
}

#interactivity_div .connectthedots-start-game-instruction-wrapper {
    left: 0;
    width: 38%;
    padding: 0% 0% 0% 1%;
}


#interactivity_div .connectthedots-start-game-instruction-wrapper ul.wrong-select {
    width: 92% !important;
}

#interactivity_div .wrong-selection-wrapper ul {
    list-style-type: none;
    text-align: center;
    padding: 0;
    font-size: 1.5em;
}

#interactivity_div .wrong-selection-wrapper.active {
    display: block !important;
}

#interactivity_div .wrong-selection-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    background-color: #fd4191;
    opacity: 0.9;
    height: 100%;
    display: block;
    width: 100%;
    left: 0;
    border-top-left-radius: 75px;
    z-index: 11;
    border-bottom-right-radius: 75px;
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/wrong-selction.png) no-repeat;
    background-size: contain;
    /* background-position-y: 0px; */
}

/* .connectthedots-game-instruction-wrapper ul {
    position: absolute;
    z-index: 11;
    margin: 0;
    text-align: center;
    padding: 0px 0 0 0px;
    list-style-type: disc;
    width: 80%;
    
} */

.connectthedots-game-instruction-wrapper ul {
    position: relative;
    z-index: 11;
    margin: 0;
    text-align: center;
    padding-left: 25px;
    list-style-type: disc;
    width: 85%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.connectthedots-game-instruction-wrapper ul li {
    text-align: left;
    z-index: 11;
    color: #32161d;
    font-family: Arial;
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 600;
}

#interactivity_div .wrong-selection-wrapper ul li {
    position: relative;
    text-align: center;
    z-index: 11;
    color: #fff;
    font-family: Arial;
    margin-bottom: 1.2em;
    font-size: 1.2em;
}

.connectthedots-game-instruction-wrapper ul li:last-child {
    margin: 0;
}

.connectthedots-close-icon-container {
    width: 40px;
    height: 40px;
    text-align: right;
    display: inline-block;
    position: absolute;
    right: -22px;
    top: -22px;
    cursor: pointer !important;
}

.connectthedots-close-icon-container .connectthedots-close-popup {
    position: absolute;
    top: 0;
    z-index: 99;
    width: 100%;
    left: 0;
    cursor: pointer;
}

#interactivity_div .bg-rotateImage {
    position: absolute;
    left: 0;
    margin: 0 0 0 0;
    width: 100%;
}

#interactivity_div .alphabet-text li {
    margin: 0 0px;
    width: 50px;
    display: inline-block;
}

#interactivity_div .connectthedots-game-text {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    width: 90% !important;
    margin: auto !important;
    top: 81px !important;
    margin-top: 0 !important;
    height: auto;
    object-fit: contain;
}

#interactivity_div .connectthedots-game-start-logo {
    top: 1.8em;
    width: 140px;
    margin: 0 auto;
    position: relative;
}

#interactivity_div .connectthedot-text {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-animation: scaling 5s ease-in-out infinite alternate;
    animation: scaling 5s ease-in-out infinite alternate;
}

@-webkit-keyframes scaling {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes scaling {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(2.0);
    }
}

#interactivity_div .connectthedots-play-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px auto;
}


/* Background for the container */

#interactivity_div .view-wrapper {
    margin: 0 !important;
}

#interactivity_div .secContainer {
    /* background-color: #2b1842; */
    max-width: 100% !important;
    margin: 0 !important;
}

#interactivity_div .connectthedots-game-headline {
    margin: 2em 0 0 0;
    color: #6062f0;
    font-family: Arial;
    position: absolute;
    top: 24%;
    text-align: center;
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/start-game-title.png) no-repeat;
    background-size: cover;
    padding: 0 20px 30px 24px;
    width: 16em;
    height: 11.4em;
}

#interactivity_div .connectthedots-game-headline h3 {
    font-family: Arial;
    font-size: 4.5em;
    font-weight: bolder;
    color: #ffffff;
    /* -webkit-text-stroke: 3px #ffffff;  */
    margin: 45px 0 0 -1px;
}

#interactivity_div .game-heading span {
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.53);
    width: 32px;
    height: 32px;
    line-height: 26px;
}

#interactivity_div .game-heading {
    width: 39em;
    top: 13em;
    left: 2.4em;
}

#interactivity_div .connectthedots-letter-select-option {
    font-size: 1em;
    padding: 0;
    width: 75%;
    text-align: center;
    list-style-type: none;
    margin-top: 3em;
    position: absolute;
    bottom: 10em;
    left: 5.2em;
    /* z-index: 1; */
}

#interactivity_div .connectthedots-letter-select-option li:before {
    content: '';
    position: absolute;
    z-index: -1;
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/pink-button.png) no-repeat;
    cursor: pointer !important;
    background-size: COVER;
    height: 100%;
    width: 100%;
    font-family: Arial;
    display: inline-block;
    color: #fff;
    BACKGROUND-POSITION: LEFT TOP;
    LEFT: 0;
    TOP: 0;
    cursor: pointer !important;
    background-size: cover;
    height: 100%;
    width: 100%;
    font-family: Arial;
    display: inline-block;
    color: #fff;
}

#interactivity_div .connectthedots-letter-select-option li:hover:before,
#interactivity_div .connectthedots-letter-select-option li:focus:before {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -ms-filter: "alpha(opacity=100)";
    opacity: 1;
}

#interactivity_div .connectthedots-letter-select-option li.green-bg:before {
    content: '';
    position: relative;
    z-index: -1;
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/yellow-button.png) no-repeat;
    background-size: cover;
    margin-left: 0em;
}

#interactivity_div .connectthedots-innerwrapper .upper-lower-btn {
    position: absolute;
    bottom: 3em;
}

#interactivity_div .upper-lower-btn {
    padding: 0;
    width: 95%;
    text-align: center;
    list-style-type: none;
    position: absolute;
    bottom: 3em;
    left: 1em;
}

#interactivity_div .upper-lower-btn li {
    cursor: pointer !important;
    background-size: contain;
    height: 78px;
    width: 5.5em;
    font-family: Arial;
    font-size: 1.8em;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    position: relative;
    -webkit-animation-name: scalex;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: scale;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    text-align: center;
    line-height: 78px;
    margin: 0 5px;
}

@-webkit-keyframes scalex {
    from {
        -webkit-transform: scale(0.9);
    }

    65% {
        -webkit-transform: scale(1.0);
    }

    to {
        -webkit-transform: scale(0.9);
    }
}

@-moz-keyframes scale {
    from {
        -moz-transform: scale(0.9);
    }

    65% {
        -moz-transform: scale(1.0);
    }

    to {
        -moz-transform: scale(0.9);
    }
}

#interactivity_div {
    width: 100% !important;
}

#interactivity_div .connectthedots-game-inner-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Connect the dots common css style ends */


/* Connect the dots iPhone portrait css starts */

#interactivity_div .connectthedots-show-for-mobile-port {
    display: none;
}

#interactivity_div .connectthedots-hide-for-mobile-port {
    display: block;
}

@media (max-width: 400px) and (orientation: portrait) {
    #interactivity_div .connectthedots-startgame-innerwrapper {
        transform: scale(.5) !important;
    }
}

@media (max-width: 464px) and (orientation: portrait) {
    .connectthedots-game-instruction-wrapper ul li {
        font-size: 1.2em;
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    #interactivity_div .connectthedots-show-for-mobile-port {
        display: block;
    }

    .connectthedots-close-icon-container {
        right: -5%;
    }

    #interactivity_div .connectthedots-hide-for-mobile-port {
        display: none;
    }

    .connectthedots-game-instruction-wrapper .close-popup {
        width: 90%
    }

    #interactivity_div .connectthedots-innerwrapper {
        width: 100%;
    }

    #interactivity_div .connectthedots-game-text {
        width: 65%;
        margin-top: 20%;
    }

    #interactivity_div .connectthedots-instruction-bgimage {
        width: 100%;
    }

    #interactivity_div .connectthedots-mobileport-play-pause {
        width: 42%;
        float: right;
        margin-right: -16px;
        margin-top: -35px;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        height: 26px;
        width: 26px;
    }

    #interactivity_div .connectthedots-game-event-icons ul li img {
        width: 100%;
    }

    #interactivity_div .connectthedots-star-rating ul li {
        height: 25px;
        width: 25px;
    }

    #interactivity_div .connectthedots-mobileport-star {
        position: initial;
        margin-top: 7%;
    }

    #interactivity_div .connectthedots-game-inner-container {
        height: 100% !important;
        margin: 0px;
        top: 5%;
    }

    /* Game area */
    #interactivity_div .connectthedots-game-container.connectthedots-start-game-container {
        height: 100%;
        margin: 0 auto !important;
        width: 100%;
    }

    #interactivity_div .connectthedots-sg-left-container {
        width: 100% !important;
        height: 75px !important;
        min-height: 100% !important;
    }

    #interactivity_div .connectthedots-start-game-container .connectthedots-sg-left-container {
        padding: 0px !important;
        display: block;
    }

    .connectthedots-close-icon-container .connectthedots-close-popup {
        width: 90%;
    }

    #interactivity_div .connectthedots-game-start-logo {
        width: 30%;
        float: left;
        top: 2% !important;
        left: -4% !important;
    }

    #interactivity_div .connectthedots-game-headline {
        top: -04%;
        text-align: center;
        left: 40%;
        width: 8em;
        height: 4.4em;
        background-size: contain;
    }

    #interactivity_div .connectthedots-game-headline h3 {
        font-size: 1.8em;
        font-weight: bolder;
        color: #ffffff;
        margin: 16px 0 0 -30px;
    }

    #interactivity_div .connectthedots-sg-left-container .connectthedots-game-headline .connectthedots-star-rating {
        display: none;
    }

    #interactivity_div .connectthedots-game-inner-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 0%;
        position: absolute;
    }

    #interactivity_div .connectthedots-dotsContainer ul {
        position: initial;
    }

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

    /* .connectthedots-start-game-container .sg-right-container { */
    /* display: none; */
    /* } */
}


@media (max-height: 464px),
(max-width: 464px) and (orientation: landscape) {

    #interactivity_div .connectthedots-main-wrapper .connectthedots-game-inner-container {
        transform: scale(0.6, 0.6) !important;
        -webkit-transform: scale(0.6, 0.6) !important;
        -moz-transform: scale(0.6, 0.6) !important;
        -ms-transform: scale(0.6, 0.6) !important;
        -o-transform: scale(0.6, 0.6) !important;
    }
}

@media (max-height: 400px) and (max-width: 766px),
(max-height: 400px) and (orientation: landscape) {

    #interactivity_div .connectthedots-main-wrapper .connectthedots-game-inner-container {
        transform: scale(0.5, 0.5) !important;
        -webkit-transform: scale(0.5, 0.5) !important;
        -moz-transform: scale(0.5, 0.5) !important;
        -ms-transform: scale(0.5, 0.5) !important;
        -o-transform: scale(0.5, 0.5) !important;
    }
}

/* Connect the dots iphone 6 and 6+ landscape mode css starts */
@media (min-width: 465px) and (max-width: 767px) and (orientation: landscape) {

    #interactivity_div .connectthedots-left-container,
    #interactivity_div .connectthedots-right-container {
        width: 28%;
    }

    #interactivity_div .connectthedots-innerwrapper {
        width: 40%;
    }

    #interactivity_div .connectthedots-game-text {
        margin-top: 15%;
        width: 60%;
        left: 20%;
    }

    .connectthedots-game-instruction-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
    }

    .connectthedots-game-instruction-wrapper img {
        width: 90%;
    }

    #interactivity_div .connectthedots-innerwrapper .upper-lower-btn {
        bottom: 0px;
        left: 0em;
        width: 100%;
    }

    #interactivity_div .upper-lower-btn li {
        height: 3em;
        width: 7em;
        font-size: 1.2em;
    }

    /* Game screen CSS for Iphone device */
    #interactivity_div .connectthedots-start-game-container .connectthedots-sg-left-container {
        padding: 0px 10px 10px !important;
        width: 10%;
    }

    #interactivity_div .connectthedots-game-headline h3 {
        font-size: 1.5em;
        margin: 25px 0 0 0px;
    }

    #interactivity_div .connectthedots-start-game-instruction-wrapper {
        left: 0;
    }

    #interactivity_div .connectthedots-container:before {
        top: 0 !important;
    }

    #interactivity_div .connect-the-dots-wrapper {
        max-width: 100%;
    }

    #interactivity_div .connectthedots-sg-left-container .connectthedots-game-start-logo {
        left: 0px;
        width: 100px;
    }

    #interactivity_div .connectthedots-game-headline h3.tolowercaseletter {
        font-size: 2.2em;
        margin-top: 30px;
    }

    #interactivity_div .connectthedots-game-headline h3.touppercaseletter {
        font-size: 1.8em;
        margin-top: 30px;
    }

    #interactivity_div .connectthedots-game-event-icons ul {
        left: 15px;
        position: relative;
        top: 2em;
        z-index: 1;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        height: 35px;
        width: 35px;
        display: block;
    }

    #interactivity_div .connectthedots-game-event-icons ul li img {
        width: 100%;
    }

    #interactivity_div .connectthedots-main-wrapper .connectthedots-left-container,
    #interactivity_div .connectthedots-main-wrapper .connectthedots-right-container {
        width: 12%;
    }

    #interactivity_div .connectthedots-start-game-container .connectthedots-sg-left-container {
        width: 18%;
        padding: 0;
        top: 2em;
    }

    #interactivity_div .connectthedots-centerlized-wrapper .connectthedots-start-game-container .sg-right-container {
        width: 5%;
        padding: 0;
        left: 0px;
    }

    #interactivity_div .connectthedots-dotsContainer ul {
        width: 100%;
    }

    #interactivity_div .connectthedots-start-game-container .sg-connectthedots-left-container {
        padding: 0px 10px 0px !important;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        margin: 30px 10px 0 0px;
    }

    #interactivity_div .connectthedots-start-game-instruction-wrapper {
        left: 0;
        width: 40%;
    }

    .connectthedots-game-instruction-wrapper {
        top: 0;
        left: 0;
        width: 100% !important;
    }
     .connectthedots-game-instruction-wrapper ul {
        width: 95%;
    }

    .landscape .connectthedots-game-instruction-wrapper ul li {
        font-size: 14px !important;
    }

    .connectthedots-game-instruction-wrapper ul li {
        font-size: 12px;
    }

    .connectthedots-game-instruction-wrapper .connectthedots-instruction-bgimage {
        width: 90%;
    }

    #interactivity_div .connectthedots-start-game-container .connectthedots-game-instruction-wrapper {
        top: 0;
        bottom: 0;
        left: 0;
        width: 50%;
    }

    #interactivity_div .connectthedots-star-rating {
        /* left: -65%; */
        top: 3em;
    }

    #interactivity_div .connectthedots-star-rating ul li {
        height: 28px;
        width: 28px;
    }

    #interactivity_div .connectthedots-start-game-container {
        width: 100%;
    }

    #interactivity_div .connectthedots-centerlized-wrapper,
    #interactivity_div .connectthedots-main-wrapper {
        min-height: 100% !important;
        height: 100% !important;
    }

    #interactivity_div .connect-the-dots-wrapper {
        min-height: 100% !important;
        height: 100% !important;
    }

    #interactivity_div .connectthedots-main-wrapper .connectthedots-left-container,
    #interactivity_div .connectthedots-main-wrapper .connectthedots-right-container {
        width: 25%;
    }

    #interactivity_div .connectthedots-innerwrapper {
        width: 50% !important;
    }

    #interactivity_div .bg-rotateImage {
        width: 100%;
        height: 100%;
    }

    #interactivity_div .connectthedots-main-wrapper .connectthedots-game-inner-container {
        height: 100%;
        margin: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 75%;
    }

    #interactivity_div .connectthedots-startgame-innerwrapper {
        /* transform: scale(.8); */
    }

    #interactivity_div .connectthedots-dotsContainer ul {
        position: initial;
    }

    #interactivity_div .connectthedots-game-event-icons ul {
        left: 0 !important;
    }

    #interactivity_div .connectthedots-sg-left-container .connectthedots-game-headline {
        width: 7em;
        height: 5em;
        top: 6em;
    }

    #interactivity_div .connectthedots-play-button-container {
        bottom: 1em !important;
    }
}



@media (min-width:768px) and (max-width:1024px) and (orientation: portrait) {
    #interactivity_div .connectthedots-show-for-mobile-port {
        display: none;
    }

    .connectthedots-close-icon-container {
        right: -4%;
    }

    #interactivity_div .connectthedots-hide-for-mobile-port {
        display: block;
    }

    #interactivity_div .connectthedots-startgame-innerwrapper {
        margin: 0 auto;
    }

    #interactivity_div .connect-the-dots-wrapper {
        height: 100%;
        max-width: 100%;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        display: block !important;
    }

    #interactivity_div .connectthedots-start-game-container .sg-right-container {
        padding-left: 10px;
    }

    #interactivity_div .connectthedots-start-game-container .sg-connectthedots-left-container {
        width: 26%;
    }

    #interactivity_div .connectthedots-game-inner-container {
        width: 65%;
    }

    #interactivity_div .connectthedots-start-game-container .sg-right-container {
        width: 8%;
    }

    #interactivity_div .startgame-connectthedots-innerwrapper {
        left: 2.6em;
        margin-left: 14px;
    }

    #interactivity_div .connectthedots-outputimg-container {
        margin-top: 0;
    }

    #interactivity_div .connectthedots-game-start-logo {
        width: 120px;
        top: 2.8em;
    }

    #interactivity_div .upper-lower-btn {
        bottom: 5em;
    }

    #interactivity_div .connectthedots-left-container,
    #interactivity_div .connectthedots-right-container {
        position: relative;
        width: 20% !important;
    }

    #interactivity_div .connectthedots-game-event-icons {
        text-align: center;
        float: left;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        cursor: pointer !important;
        display: block;
        margin: 30px 10px 0 -10px;
    }

    #interactivity_div .connectthedots-dotsContainer ul,
    #interactivity_div .connectthedots-start-game-container {
        width: 100%;
    }

    .connectthedots-game-instruction-wrapper {
        left: 0;
        width: 78%;
    }

    #interactivity_div .connectthedots-start-game-instruction-wrapper {
        left: 0;
        width: 46%;
    }

    #interactivity_div .connectthedots-start-game-container .connectthedots-game-instruction-wrapper {
        width: 48% !important;
        top: 0;
    }

    #interactivity_div .connectthedots-start-game-container {
        width: 100%;
    }

    #interactivity_div .connectthedots-game-headline {
        height: 7em;
        width: 9.8em;
        top: 20%;
    }

    #interactivity_div .connectthedots-star-rating ul li {
        width: 25px;
        height: 25px;
    }

    #interactivity_div .connectthedots-game-headline h3 {
        font-size: 2em;
        margin-top: 1.2em;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        display: block;
        width: 100%;
    }

    #interactivity_div .connectthedots-main-wrapper .connectthedots-game-inner-container {
        transform: scale(0.9, 0.9) !important;
        -webkit-transform: scale(0.9, 0.9) !important;
        -moz-transform: scale(0.9, 0.9) !important;
        -ms-transform: scale(0.9, 0.9) !important;
        -o-transform: scale(0.9, 0.9) !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

/* I-pad Potrait Media query ends */

/* I-pad Landscape Media query start */

/* @media (min-width:768px) and (max-width:1024px) {
    #interactivity_div .connectthedots-start-game-container .sg-connectthedots-left-container,
    #interactivity_div .connectthedots-start-game-container .sg-right-container {
        width: 19%;
    }
    #interactivity_div .connectthedots-start-game-instruction-wrapper {
        left: 21.5em;
    }
    #interactivity_div .startgame-connectthedots-innerwrapper {
        left: 2.6em;
        margin-left: 14px;
    }
    #interactivity_div .connectthedots-outputimg-container {
        margin-top: 0;
    }
    #interactivity_div .connectthedots-game-start-logo {
        left: 2.5em !important;
    }
    #interactivity_div .upper-lower-btn {
        bottom: 5em;
    }
    #interactivity_div .connectthedots-left-container,
    #interactivity_div .connectthedots-right-container {
        position: relative;
        width: 21.3%;
    }
    #interactivity_div .game-event-icons ul {
        margin-left: -30px;
    }
} */


/* I-pad Landscape Media query ends */

/* Connect the dots I-pad landscape mode css start */
@media only screen and (min-width: 768px) and (max-width: 1024px),
only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* #appBody header .connect-dot-bg .layout-align-center-center.layout-row.layout-fill{
        display: block;
        width: 100%;
        margin: 0px;
    }
    #appBody header .connect-dot-bg{
        width: 14%;
        margin-top: 5%;
        margin-left: 42%;
        padding : 0px;
    } */
    #interactivity_div .connectthedots-play-button-container #playagain,
    #interactivity_div .connectthedots-play-button-container #nextlvl {
        line-height: 1em;
    }

    #interactivity_div .connectthedots-game-start-logo {
        top: 3.8em;
    }

    #appBody .extra .connect-dot-bg.isDesktop {
        display: none;
    }

    #interactivity_div .connectthedots-star-rating {
        /* left: -25% */
    }

    #interactivity_div .connectthedots-startgame-innerwrapper {
        margin: 0 auto;
    }

    #interactivity_div .connect-the-dots-wrapper {
        height: 100%;
        max-width: 100%;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        display: block !important;
    }

    #interactivity_div .connectthedots-start-game-container .sg-right-container {
        padding-left: 10px;
    }

    #interactivity_div .connectthedots-start-game-container .sg-connectthedots-left-container {
        width: 26%;
    }

    #interactivity_div .connectthedots-game-inner-container {
        width: 65%;
    }

    #interactivity_div .connectthedots-start-game-container .sg-right-container {
        width: 8%;
    }

    #interactivity_div .startgame-connectthedots-innerwrapper {
        left: 2.6em;
        margin-left: 14px;
    }

    #interactivity_div .connectthedots-outputimg-container {
        margin-top: 0;
    }

    #interactivity_div .connectthedots-game-start-logo {
        width: 120px;
    }

    #interactivity_div .upper-lower-btn {
        bottom: 5em;
    }

    #interactivity_div .connectthedots-left-container,
    #interactivity_div .connectthedots-right-container {
        position: relative;
        width: 20% !important;
    }

    #interactivity_div .connectthedots-game-event-icons {
        text-align: center;
        float: left;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        cursor: pointer !important;
        display: block;
        margin: 30px 10px 0 -10px;
    }

    #interactivity_div .connectthedots-dotsContainer ul,
    #interactivity_div .connectthedots-start-game-container {
        width: 100%;
    }

    .connectthedots-game-instruction-wrapper {
        width: 75%;
        font-size: 8px;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    #interactivity_div .connectthedots-start-game-container .connectthedots-game-instruction-wrapper {
        width: 50% !important;
        top: 0;
        bottom: 0;
        left: 0%;
        right: 0;
    }

    .connectthedots-close-icon-container {
        right: -5%;
    }

    .connectthedots-game-instruction-wrapper ul li {
        font-size: 12px;
    }

    #interactivity_div .connectthedots-start-game-instruction-wrapper {
        left: 0;
        width: 46%;
    }

    #interactivity_div .connectthedots-start-game-container {
        width: 100%;
    }

    #interactivity_div .connectthedots-game-headline {
        height: 7em;
        width: 9.8em;
        top: 20%;
    }

    #interactivity_div .connectthedots-star-rating ul li {
        width: 25px;
        height: 25px;
    }

    #interactivity_div .connectthedots-game-headline h3 {
        font-size: 2em;
        margin: 36px 0px 0px 0px;
    }

    #interactivity_div .connectthedots-game-event-icons ul li {
        display: block;
        width: 100%;
    }
}


/* Connect the dots I-pad landscape mode css ends */


/*  Connect the dots Laptop screen css starts */

@media(max-height:600px) and (max-width:1366px) {

    .connectthedots-startgame-innerwrapper .game_div {
        /* height: 135vh !important; */
    }
}

@media(max-height:700px) and (max-width:1366px) {

    #interactivity_div .connectthedots-centerlized-wrapper,
    #interactivity_div .connect-the-dots-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
    }

    #interactivity_div .bg-rotateImage {
        height: 100%;
        width: 100%;
    }

    #interactivity_div .connectthedots-play-button-container #playagain,
    #interactivity_div .connectthedots-play-button-container #nextlvl {
        line-height: 1em;
    }
}

@media(min-width:1025px) and (max-width:1366px) {

    #interactivity_div .info-icon {
        top: 46px !important;
    }

    #interactivity_div .connectthedots-main-wrapper {
        height: 100%;
        width: 100%;
        /* max-height: 100%; */
    }

    #interactivity_div .connectthedots-game-headline {
        width: 14em;
        height: 10em;
    }

    .connectthedots-game-instruction-wrapper ul li {
        font-size: 16px !important;
    }

    .connectthedots-game-instruction-wrapper {
        width: 80% !important;
    }

    #interactivity_div .connectthedots-play-button-container #playagain,
    #interactivity_div .connectthedots-play-button-container #nextlvl {
        line-height: 1em;
    }
}


/*  Connect the dots Laptop screen css ends */


/*  Connect the dots from desktop mode css starts */

@media (max-width:1025px) {

    #interactivity_div .connectthedots-dotsContainer ul,
    #interactivity_div .connectthedots-start-game-container {
        /* width: 100% !important; */
    }
}


/*  Connect the dots from desktop mode css ends */


/* Connect the dots I-pad Landscape Media quere */

@media (min-width:768px) and (max-width:1024px) {
    #interactivity_div .connectthedots-dotsContainer {
        width: 100% !important;
    }
}

.fa-info.ctd_gameinstructionbtnimgpg {
    background-color: #105fce;
    border: 3px solid #003886;
    color: #f3f8ff;
}

.ctd_gameinstructionbtnimgpg {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.fa-redo-alt.ctd_gamerestartbtnimg {
    background-color: #f11c29;
    color: #fff0f1;
    border: 3px solid #b1000b;
}

.ctd_gamerestartbtnimg {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

@media (max-width:925px) {
    .landscape #interactivity_div #game_div .connectthedots-game-instruction-wrapper ul li {
        font-size: 24px !important;
    }
    .portrait #interactivity_div .connectthedots-play-button-container .next-level-btn, 
    .portrait #interactivity_div .connectthedots-play-button-container .play-again-btn {
        font-size: 1em;
        padding: 12px 0;
    }
}


@media (min-width: 768px) and (orientation: portrait) {
    .portrait #interactivity_div .connectthedots-play-button-container {
        flex-direction: row;
    }

    .portrait #interactivity_div .connectthedots-play-button-container .next-level-btn,
    .portarit #interactivity_div .connectthedots-play-button-container .play-again-btn {
        margin: 0 10px;
    }

    .portrait .controlButtons {
        max-width: 35%;
    }
    
}

/* SL3-4652: connect the dot  -->instruction icon and resume icon to the left does seems to be good when there is no play or next button displayed to the right .*/

.portrait #interactivity_div .connectthedots-play-button-container {
    margin: 2px auto;
    display: flex;
    flex-direction: row;
}

.portrait .connectthedots-container .rightSideBar {
    min-height: auto;
    flex-direction: column;
    justify-content: flex-end;
}

.portrait #interactivity_div .connectthedots-container .rightSideBar .fulWide {
    width: 100% !important;
    max-width: 100% !important;
}

.portrait #interactivity_div .connectthedots-play-button-container button {
    margin: 0 5px;
}

/* SL3-4685: Connect the dot --border needs to be removed in the around the image */
#interactivity_div .connectthedots-outputimg-container {
    border: none;
}

/* SL3-4652: icon should be fixed at one position currently they move up and down when the buttons play again and next gets displayed. */
.portrait .gameContainer.connectDotWrapper .gameWrapper {
    align-content: flex-start;
}

.portrait .connectthedots-container .leftSideBar {
    margin-top: 4px;
}