@charset "utf-8";
:root{
  --viewport-width: 518;
  --viewport-height: 670;
  --viewport-landingpage: 1036;
}

@font-face {
  font-family: title;
  src: url(../fonts/Comfortaa-Bold_1.ttf);
}

@font-face {
  font-family: gktitle;
  src: url(../fonts/DK_Crayon_Crumble.ttf);
}

@font-face {
  font-family: BookFont;
  src: url(../fonts/OpenSans-Semibold_0.ttf);
}

@font-face {
  font-family: Open Sans;
  src: url(../fonts/OpenSans-Bold_1.ttf);
}

@font-face {
  font-family: Times New Roman;
  src: url(../fonts/times.ttf);
}

@font-face {
  font-family: UI-font;
  src: url(../fonts/ChamsBold.ttf);
}

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

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

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

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
}

body {
  overflow: hidden;
  margin: 0;
  border: #f00 0px solid;
  width: 100%;
  height: 100%;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}



#appCont {
  transform-origin: top left;
  -webkit-transform-origin: top left;
  height: 100%;
  background: url(../images/bg.jpg);
  background-size: 100% auto;
  background-color: #d4e04d;
  background-repeat: repeat-x;
}

#blackBox {
  background-color: wheat;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  font-family: BookFont;
  font-size: 30px;
  color: red;
  z-index: 2;
  text-align: center;
  text-shadow: 2px 1px 2px #888;
}

#blackBox p {
  margin: 50% auto;
}

.default {
  height: 720px !important;
  width: 1280px !important;
}

video::-webkit-media-controls-fullscreen-button {
  display: none;
}

.page-wrapper {
  width: calc(var(--viewport-width) * 1px) !important;
}

#myEmbed {
  height: 302px;
  width: 96%;
  border: none;
  overflow: auto;
}

img {
  -ms-interpolation-mode: bicubic;
  -webkit-interpolation-mode: bicubic;
  -webkit-backface-visibility: hidden;
  image-rendering: crisp-edges;
}

.UIBtns {
  background-image: url("../images/tools.png");
  height: 44px;
  width: 44px;
}

.UIBtns img {
  width: 48px;
  height: 48px;
  margin-left: -7px;
  margin-top: -2px;

}

#_root {
  position: relative;
  width: 100% !important;
  height: 100%;
  left: 0px !important;
  margin: 0% !important;
  transform: scale(1) !important;
}
#root {
  position: absolute;
  height: 880px;
  background-image: url("../images/ebook_bg.png");
  overflow: hidden;
  padding: 0;
  background-size: cover;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  /* vinai */
  z-index: 1;
}

#ebook-cross-cont {
  position: fixed;
  right: 0.7%;
  top: 25px;
  margin-bottom: 5px;
}

#ebook-cross {
  display: block;
  width: 45px;
  height: 45px;
  background-image: url('../images/close.png');
  background-color: transparent;
  margin-bottom: 5px;
  cursor: pointer;
  outline: none;
}

#ebook-cross-tip {
  visibility: hidden;
  font-family: title;
  font-size: 14px;
  background-color: #000;
  color: #fff;
  padding: 6px 6px;
  line-height: 24px;
  border-radius: 10px;
  letter-spacing: 1px;
}

.forceHide {
  display: none !important;
}

#ebook-cross:hover~#ebook-cross-tip {
  visibility: visible;
}

.rootAnim {
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

#zoomedSoundcont {
  display: none;
  position: absolute;
  height: 50px;
  width: 100%;
  padding: 0;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
  justify-content: space-around;
}

.zoomedSoundDiv {
  display: inline-block;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.zoomedSoundDiv div {
  border: 2px solid #9d9d9d;
  border-radius: 15px;
  vertical-align: middle;
  background-color: rgba(255, 255, 255, 1);
  font-family: cursive;
  padding: 5px;
}

.zoomedSoundDiv div>img {
  vertical-align: middle;
}

#recordTitle {
  color: #FFF;
  font-family: BookFont;
  font-size: 18px;
  text-align: center;
  line-height: 32px;
  font-weight: bold;
  background-color: #356f9d;
  border-bottom: #FFF 2px solid;

}

#recordTitle span {
  float: right;
  display: inline-block;
  width: 40px;
  font-size: 25px;
  color: #ffff00;
  cursor: pointer;
  text-shadow: 3px 3px #040000;
}

#spotRange {
  position: absolute;
  min-width: 100px;
  padding-left: 10px;
  background-color: #000;
  height: 48px;
  z-index: 1;
  left: 290px;
  border-radius: 25px;
  display: none;
  border: 2px solid white;
  bottom: 0px;
  justify-content: center;
  align-items: center;
}


#startR {
  width: 70px;
  font-size: 1rem;
  text-align: center;
  padding: 8px;
  background: #fff;
  color: #7f512b;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 1px #202020;
  cursor: pointer;
}

#stopR {
  width: 70px;
  font-size: 1rem;
  text-align: center;
  padding: 8px;
  background: #fff;
  color: #7f512b;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 1px #202020;
  cursor: pointer;
}

.disableBtn {
  color: #c1bcbc !important;
}

#closeBtn {
  position: absolute;
  visibility: hidden;
  z-index: 2000;
  left: 0;
  top: 0;
  cursor: pointer;
}


.ifFramDeco {
  left: 0px;
  border: none;
  width: calc(var(--viewport-width) * 1px);
  height: calc(var(--viewport-height) * 1px);
  border-left: 2px solid #ababab;
}

#book {
  width: calc(var(--viewport-landingpage) * 1px);
  height: calc(var(--viewport-height) * 1px);
  display: flex;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  position: absolute;
}

.bookAnim {
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

#bookpatch {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20100;
}

.showHide {
  display: none !important;
  width: 0px !important;
}

#bookin {
  position: absolute !important;
  /*background:#F99;*/
  /* background:url(../pages/blankPage.jpg);
  transform-origin: 50% 50% !important;
  -webkit-transform-origin: 50% 50% !important; */
}

#page-number {
  width: 100px;
  height: 30px;
  text-align: center;
  color: #fff;
}

#page-number::-moz-placeholder {
  color: #000000;
  opacity: 1;
}

input#page-number::-webkit-input-placeholder {
  color: #000000;
  opacity: 10;
}


#i_pauseMc {
  position: fixed;
  top: 0px;
  width: 1280px;
  height: 720px;
  z-index: 1;
  display: block;
  background-color: #fff;
  border: #ccc 1px solid;
  visibility: hidden;
}

#subject_top {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 135px;
  background-color: #eee918;
  padding: 11px 17px 5px 17px;
  -webkit-box-shadow: 0px -2px 2px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px -2px 2px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0px -2px 2px 2px rgba(0, 0, 0, 0.4);
  clip-path: polygon(0 34%, 100% 0, 100% 100%, 0% 100%);
}

#subject_top span {
  display: block;
  transform: rotate(-6deg);
}

#ioff-wrap{
    /* background: #ff00002e; */
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100vw;
    max-width: 1000px;
    transform: translate(-50%);
    /* transform: scale(0.93); */
    /* border: 1px solid red; */
    transform-origin: top left;
}

#pause_off {
  /* position: absolute;
  top: 671px;
  left: 1015px; */
  margin-left: 79%;
  cursor: pointer;
  background-position: -953px 0px;
  width: 57px;
  height: 49px;
}

#bookin .turn-page {
  background-color: white;
}

#bookin .cover {
  background: #F99;
}

#bookin .loader {
  background-image: url(../images/loader.gif);
  width: 24px;
  height: 24px;
  -webkit-height: 24px;
  display: block;
  position: absolute;
  top: 238px;
  left: 188px;
}

#controls {
  width: 100%;
  height: 49px;
  font: 30px arial;
  font-family: Verdana, Geneva, sans-serif;
  text-align: center;
  /* background-color: #FFD797; */
  background-color: #95c93d;
}

#bookCover {
  position: absolute;
  /*left:0px;*/
  top: 0px;
  display: block;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: #fff;
  border: #ccc solid 0px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

#bookCover img {
  box-shadow: 0px 0px 10px #888888;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}

#controls input,
#controls label {
  font: 20px arial;
}

#coverImg {
  background: #fff;
}

#bookin .odd {
  background-image: linear-gradient(left, #FFF 99%, #ddd 100%);
  background-image: -webkit-linear-gradient(left, #FFF 99%, #ddd 100%);
  background-image: -moz-linear-gradient(left, #FFF 99%, #ddd 100%);
  background-image: -o-linear-gradient(left, #FFF 99%, #ddd 100%);
  background-image: -ms-linear-gradient(left, #FFF 99%, #ddd 100%);
}

#bookin .even {
  background-image: -linear-gradient(right, #FFF 99%, #ddd 100%);
  background-image: -webkit-linear-gradient(right, #FFF 99%, #ddd 100%);
  background-image: -moz-linear-gradient(right, #FFF 99%, #ddd 100%);
  background-image: -o-linear-gradient(right, #FFF 99%, #ddd 100%);
  background-image: -ms-linear-gradient(right, #FFF 99%, #ddd 100%);
}

#childId {
  background-color: #FF9;
  color: #555;
}

.input_style {
  border: 0px solid #6A3738;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  font-weight: bold !important;
  background-color: RGBA(0, 0, 0, 0);
  outline: none;
  font-weight: bold;
}

/*==================================note css*/
#container {
  position: relative;
}

#notes {
  position: absolute;

  z-index: 1000;
}

#iconCont {
  display: flex;
  width: 100%;
  max-width: 1000px;
  justify-content: space-around;
}

.inumber {
  width: 100%;
  z-index: 1000;
  opacity: 1;
  display: flex;
  justify-content: center;
  height: 100%;
  position: relative;
}

.inumber::before {
  content: '';
  position: absolute;
  top: -42px;
  left: 0;
  width: 100%;
  height: 42px;
  background-image: url('../images/bottom_bg.png');
}

#tFullScr {
  position: absolute;
  z-index: 10000;
}

.UIBtns {
  background-image: url("../images/tools.png");
  height: 49px;
  width: 57px;
}

#newHome {
  background-position: 0px 0px;
}

#ispot {
  background-position: -64px 0px;
}

#record {
  background-position: -194px 0px;
}

#notesPin {
  opacity: 0.5;
  position: relative;
  background-position: -259px 0px;
}

#zoomReset {
  opacity: 0.5;
  position: relative;

  background-position: -323px 0px;
}

#zoomIn {

  background-position: -389px 0px;

}

#zoomOut {

  background-position: -454px 0px;

}

#prev {
  cursor: pointer;
  position: relative;
  background-position: -519px 0px;
}

#next {
  cursor: pointer;
  background-position: -693px 0px;
}

#gotosearch {
  background-image: url(../images/goto.png);
  background-size: 100% 100%;
  height: 44px;
  width: 129px;
}

#i_onOff {

  background-position: -823px 0px;

}

#i_music {
  cursor: pointer;
  position: relative;
  background-position: -758px 0px;
}

#help {
  background-position: -888px 0px;
}

.cellBg {
  border-radius: 10px;
  background: #666666;
}

.tocElement {
  cursor: pointer;
  margin-top: 10px;
  font-size: 20px;
  height: auto;
  background-color: #FC9;
  width: 400px;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.slimScrollDiv {
  height: auto !important;
}

#tableOfCont {
  width: 251px;
  padding-top: 35px;
  /* background: url(../images/baseBook.jpg),url(../images/tableOfCont.jpg);  */
}

#sideTop {
  width: 251px;
  text-align: center;
  height: 149px;
  position: relative;
}

.book-name {
  font-family: title;
  font-weight: bold;
  position: absolute;
  top: 65px;
  left: 0;
  width: 100%;
  text-align: center;
}

#sideLeft {
  background-image: url(../images/baseBook.png);
  width: 251px;
  height: 100%;
  position: relative;
}

.bottom_left_img {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
}

#sidebar {
  font-family: UI-font;
  padding-top: 0px;
  padding-left: 0px;
  top: 0px;
  left: 0px;
  margin: 0px;
  display: inline-block;
  width: 260px;
  /* background-color: rgba(0,0,0,0.1); */
}

.sidebarAnim {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
  transition-delay: 0s;
}

.hideSidebar {
  transform: translate3d(-240px, 0, 0);
  -webkit-transform: translate3d(-240px, 0, 0);

}

.showSidebar {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

#sideClick {
  cursor: pointer;
  position: absolute;
  width: 45px;
  height: 100%;
  background: url(../images/TOC.png);
  left: 247px;
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  text-align: center;
  line-height: 45px;
  font-weight: bolder;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transition: transform 0.3s;
  transition-delay: 0.5s;
  /*! transform: scaleX(-1); */
  /*! -webkit-transform: scaleX(-1); */
}

.flip {
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
}

#spotligheSize {
  visibility: hidden;
  width: 90%;
  background-color: #1bd7fc;
  height: 12px;
  border-radius: 7px;
}


#myCloseWin {
  z-index: 1000;
  right: 2px;
  top: 9px;

}

#closeBtnToolTip {
  visibility: hidden;
  width: 120px;
  height: 20px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9000;
  bottom: 150%;
  left: 95%;
  margin-left: -60px;
  font-size: 14px;
  top: 45px;
  line-height: 10px;
}

#myCloseWin:hover~#closeBtnToolTip {
  visibility: visible;
}

.newWidow {
  background: #fff;
  background-image: url(../images/loader.gif);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

.newWindIfrm {
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  left: 0px;
  /*width:1280px;
  height:720px;*/
  width: 100%;
  height: 100%;
  overflow: auto;
  position: absolute;
}


#activities {
  position: absolute;
  z-index: 10000;
  width: 100%;
  height: 100%;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  display: none;
  background-color: #fff;
}

#iball_record {
  visibility: hidden;
  position: absolute;
  z-index: 1000;
  background-color: #012847;
  border: 2px solid #fff;
  display: block;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  width: 215px;
  text-align: center;
}


#testGen {
  font-family: UI-font;
  font-weight: bold;
  font-size: 22px;
  width: 211px;
  /* padding: 0px 0 58px 0; */
  display: block;
  z-index: 999;
  cursor: pointer;
  background: url(../images/tg.png) no-repeat;
  background-size: 100% 68px;
  text-align: center;
  height: 68px;
  width: 215px;
  line-height: 50px;
}

#treeofknow {
  font-family: UI-font;
  font-weight: bold;
  font-size: 22px;
  width: 211px;
  /* padding: 0px 0 58px 0; */
  display: block;
  z-index: 999;
  cursor: pointer;
  background: url(../images/tg.png) no-repeat;
  background-size: 100% 61px;
  text-align: center;
  height: 67px;
  width: 211px;
  line-height: 26px;
}


#langLab {
  font-family: UI-font;
  font-weight: bold;
  font-size: 22px;
  width: 211px;
  /* padding: 0px 0 58px 0; */
  display: block;
  z-index: 999;
  cursor: pointer;
  background: url(../images/lang_lab.png) no-repeat;
  background-size: 100% 47px;
  text-align: center;
  height: 50px;
  width: 195px;
  line-height: 50px;
  margin-bottom: 5px;
}

/*Notes CSS....................*/
.noteTextFielf {
  position: absolute;
  border: #00F solid 1px;
  resize: none;
  margin: 0px;
  z-index: 200;
}

.noteBar {
  position: absolute;
  width: 200px !important;
  color: #FFF;
  text-align: left;
  border: thick #F00;
  position: relative;
  background: #7f512b;
  margin: 0px;
}

.NoteClass {
  position: absolute;
  transform: translate(0px, 0px);
  background: url(../images/flag_pin.png) no-repeat;
  height: 155px;
  background-position: -4px -1px;
}

.Cross {
  position: absolute;
  z-index: 201;
}

.lowerD {
  position: absolute;
  border: #F00 medium;
  background: #7f512b;

}

.lowerD-selected {
  box-shadow: #666 5px 5px 5px;
}

.saveNoteB {
  position: absolute;
  z-index: 205;
}

#listCont {
  position: absolute;
  overflow: hidden;
  width: 214px;
  height: 30px;
}

#lister {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 214px;
  height: 30px;
  background: #66C;
  z-index: 0;
}

#cListbar {
  color: #fff;
  padding: 5px;
  padding-bottom: 3px;
  background: #963;
  text-align: center;
  font: 21px arial;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
}

#listing {
  height: 200px;
  background: #f9f7f7;
  overflow-y: scroll;
  overflow-x: hidden;
}

.cSingleNote {
  padding: 6px 0px 6px 6px;
  height: 18px;
  background: #FFF;
  font: 11px arial;
  border-bottom: 1px #f6f6f6 solid;
  cursor: pointer;
}

.cSingleNote-selected {
  background: #CCC;
}

.closedNote {
  background: url(../images/flag_pin.png);
  width: 50px;
  height: 41px;
}

.draggable.switch-bg {
  background-color: #f40;
}

.draggable.large {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

.rotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*Notes CSS ends.......................................*/

#gramVocab {
  clear: both;
  text-align: center;
}

.popupDisplay {
  width: 500px;
  height: 150px;
  border-radius: 15px;
  background: rgba(44, 157, 249, 0.50);
  border: #fff solid 2px;
}

.popupDisplaybt {
  width: 160px;
  height: 50px;
  z-index: 1000;
  background: #00f;
  cursor: pointer;
  border-radius: 15px;
}

.blackPatch {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  top: 0px;
  left: 0px;
}

#soptLightId {
  position: absolute;
  top: 100px;
  left: 100px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 2500px rgba(0, 0, 0, .85);
}

#spotContainer {
  overflow: hidden;
  position: absolute;
  top: 0;
  visibility: hidden;
}

/*===============================================*/
#npspan {
  position: absolute;
  bottom: 1%;
  left: 0px;
  pointer-events: none;
  width: 90%;
  margin-left: 5%;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9000;
  bottom: 48px;
  font-size: 14px;
  margin-left: -36px !important;

}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
  /*transform: rotate(-270deg)*/
  ;
}

.tooltip .tooltiptextRight {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9000;
  bottom: 125%;
  font-size: 14px;
}

.tooltip .tooltiptextRight::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 73%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip .tooltiptextLeft {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9000;
  bottom: 125%;
  font-size: 14px;
}

.tooltip .tooltiptextLeft::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 23%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.even>.ifFramDeco {
  border-left: 2px solid #ababab;
}

.jstree-container-ul {
  overflow: hidden;
  overflow-Y: scroll;
  padding: 0;
  margin: 0px;
}

.jstree-icon {
  display: none !important;
}

.tooltip {
  display: flex;
  align-items: center;
  opacity: 1 !important;
}

.jstree-anchor {
  display: block !important;
  font-family: 'GosmickSansBold' !important;
  color: #000 !important;
  font-weight: bold !important;
  margin-left: 0px !important;
  text-align: center !important;
  /*! margin-bottom: 5px !important; */
  padding: 14px;
  background-size: 100% 100% !important;
  outline: none;
  padding-top: 25px;
}


.nbook {
  font-size: 22px !important;
  background: url(../images/nbook.png) no-repeat !important;
  width: 195px !important;
  background-size: 100% 100% !important;
}

.creditClass {
  font-size: 22px !important;
  background: url(../images/nbook.png) no-repeat !important;
  width: 195px !important;
  background-size: 100% 100% !important;
}

.chapter {
  font-size: 17px !important;
  background: url(../images/chapter.png) no-repeat !important;
  width: 210px !important;
  background-size: 100% 100% !important;
}

.book-1 {

  font-size: 15px !important;
  background-image: url('../images/toc_seperator.png');
  background-repeat: no-repeat;
  background-position: 33px bottom;
  background-size: 200px auto !important;
  color: #ed2229 !important;
}

.book-2 {
  font-size: 15px !important;
  background: url(../images/classLr.png) no-repeat !important;
  background-size: 100% 100% !important;
}

.classAk {
  font-size: 15px !important;
  background: url(../images/classAk.png) no-repeat !important;
  background-size: 100% 100% !important;
}

.classCr {
  font-size: 15px !important;
  background: url(../images/classCr.png) no-repeat !important;
  background-size: 100% 100% !important;
}

.class1 {

  font-size: 15px !important;
  background-image: url('../images/toc_seperator.png');
  background-repeat: no-repeat;
  background-position: 33px bottom;
  background-size: 200px auto !important;
}

.class2 {
  font-size: 15px !important;
  background-image: url('../images/toc_seperator.png');
  background-repeat: no-repeat;
  background-position: 33px bottom;
  background-size: 200px auto !important;
}
.class3 {
  font-size: 15px !important;
  background-image: url('../images/toc_seperator.png');
  background-repeat: no-repeat;
  background-position: 33px bottom;
  background-size: 200px auto !important;
}

.teacherClass {
  font-size: 14px !important;
  background: url(../images/Asset.png) no-repeat !important;
  background-size: 100% 100% !important;
}

.Asset {
  font-size: 17px !important;
  background: url(../images/Asset.png) no-repeat !important;
  width: 195px !important;
  background-size: 100% 100% !important;
}

.teacherAsset {
  font-size: 17px !important;
  background: url(../images/tg.png) no-repeat !important;
  width: 195px !important;
  background-size: 100% 100% !important;
}

.turnAnim {
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes turnLeft {
  from {
    -webkit-transform: scale(1);
  }

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

/* Standard syntax */
@keyframes turnLeft {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

input[type=range] {
  -webkit-appearance: none;

  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #1bd7fc;
  border-radius: 25px;
  border: 0px solid #000101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #1bd7fc;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #683302;
  border-radius: 25px;
  border: 0px solid #000101;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
}


/* From MainCSS.css */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

#goHome {
  position: absolute;
  top: 0px;
  cursor: pointer;
}

/*Asset container ...................*/
#asset-cont {
  position: absolute;
  display: none;
  top: 0;
  height: 100%;
  width: 100%;
  /* background: rgba(255, 255, 255, 0.9); */
  z-index: 15;
  /* background-image: url('../images/asset-cont.png'); 
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: 50%;*/
  transition-property: transform, width;
  transition-duration: 300ms;
  transition-timing-function: ease-out;
  padding: 9% 10% 5% 3%;
  text-align: left;
}

#asset-cont::after {
  content: "";
  position: absolute;
  width: 20%;
  max-width: 290px;
  height: 674px;
  background-image: url(../images/right_kids.gif);
  right: 0;
  bottom: 0;
  background-size: 100% auto;
  background-position: bottom right;
  background-repeat: no-repeat;
  bottom: 0;
}

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

.hideCrossButton {
  display: none;
}

#pure-toggle-left:checked~#asset-cont {
  width: calc(100% - 300px);
  transform: translate(300px, 0);
}

.closeButton {
  position: absolute;
  background-color: transparent;
  width: 45px;
  height: 45px;
  /* position: absolute; */
  background-image: url('../images/close.png');
  top: 25px;
  right: 4%;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  border: none;
}


#chapter-assets {
  /* margin: 0px 20px 20px 20px; */
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#icon-container {
  height: calc(100% - 80px);
  overflow: auto;
}

.header-subedar {
  display: inline-block;


  width: calc(90% - 15px);
  max-width: calc(90% - 15px);
  display: flex;
  justify-content: center;
}

#ct-left {
  width: 54px;
  background-image: url(../images/cl_left.png);
}

#chapter-title {
  font-family: 'GosmickSansBold';
  background-image: url(../images/cl_mid.png);
  min-height: 70px;
  padding: 0px 30px;
  float: left;
  font-size: 150%;
  flex-flow: wrap;
  color: #f15b2b;
  display: flex;
  align-items: center;
  background-position: left top;
}

#ct-right {
  width: 54px;
  background-image: url(../images/cl_right.png);
  background-position: right;
}

.leftPin {
  float: left;
  clear: both;
  /* margin-left: -30px; */
}

.rightPin {
  float: right;
  /* margin-right: -30px; */
}

.assetBox {

  display: inline-block;
  font-family: UI-font;
  text-align: center;
  background-image: url('../images/icons_new.png');
  cursor: pointer;
  margin: 31px 56px;
}

.assetBox:nth-child(odd) {
  padding-top: 40px;
}


.assetText {
  font-family: 'Segoe UI';
  display: block;
  font-size: 15px;
  padding-top: 37px;
}

.assetBox:nth-child(even) .assetText {
  padding-top: 75px;
}

.icon-box {
  width: 100%;
}

#rslogoSm {
  display: none;
}

/*Asset container ...................end*/
@media screen and (max-width:850px) {
  #ebook-cross-cont {
    /* right: -27px; */
    top: 5px;
  }

  #ebook-cross {
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
  }

  .closeButton {
    right: 43px;
    top: 5px;
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
  }

  .inumber::before {
    display: none;
  }
}

@media screen and (max-width:1700px) {
  #root {
    background-image: none;
  }
}

@media screen and (max-width: 1000px) {
  .assetBox {
    margin: 20px 35px
  }
}

@media screen and (max-width: 780px) {
  #chapter-title {
    padding: 0;
    font-size: 120%;
    background-image: none;
  }

  .header-subedar {
    background-image: url(../images/clouds_sm.png);
    background-size: 100% 100%;
    min-width: 300px;
  }

  .assetBox {
    margin: 20px 1px
  }

  #ct-left {
    display: none;
  }

  #ct-right {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  #iconCont {
    transform: scale(0.93);
  }

  #ioff-wrap {
    transform: scale(0.93) translate(-50%);
  }
}
@media screen and (max-width: 680px) {
  #iconCont {
    transform: scale(0.9);
  }

  #ioff-wrap {
    transform: scale(0.8) translate(-50%);
  }
}
@media screen and (max-width: 650px) {
  #iconCont {
    transform: scale(0.82);
  }

  #ioff-wrap {
    transform: scale(0.82) translate(-50%);
  }
}

@media screen and (max-width: 520px) {
  #iconCont {
    transform: scale(0.8);
  }

  #ioff-wrap {
    transform: scale(0.8) translate(-50%);
  }
}

@media screen and (max-width: 500px) {
  #iconCont{
    transform: scale(0.8);
  }

  #ioff-wrap {
    transform: scale(0.8) translate(-50%);
  }
}

@media screen and (max-width: 460px) {
  #iconCont{
    transform: scale(0.75);
  }

  #ioff-wrap {
    transform: scale(0.75) translate(-50%);
  }

  .header-subedar {
    min-width: 200px;
  }

  #chapter-title {
    font-size: 110%;
  }
}

@media screen and (max-width: 430px) {
  #iconCont {
    transform: scale(0.73);
  }

  #ioff-wrap {
    transform: scale(0.73) translate(-50%);
  }
}

@media screen and (max-width: 400px) {
  #iconCont {
    transform: scale(0.68);
  }

  #ioff-wrap {
    transform: scale(0.68) translate(-50%);
  }
}


@media screen and (max-height: 700px) {
  .jstree-anchor {
    padding: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #asset-cont::after {
    width: 15%;
  }

  .book-name {
    top: 14px;
  }

  #rslogo {
    display: none;
  }

  #rslogoSm {
    display: block;
    margin: auto;
  }

  #sideTop {
    height: 50px;
  }

  #sideLeft {
    background-position: left -56px;
  }

  #tableOfCont {
    padding-top: 80px;
  }

  .bottom_left_img img {
    display: none;
  }

  #subject_top {
    top: 79px;
  }
}

@media screen and (max-height: 600px) {
  #asset-cont::after {
    width: 0px;
  }
  #asset-cont{
    padding: 2% 10% 5% 3%;
  }
  #icon-container{
    height: calc(100% - 60px);
  }
}

@media screen and (max-width: 950px) {
  #asset-cont::after {
    width: 0px;
  }
}

.removeButton {
  display: none !important;
}
/*vina start*/
#menu1{
  display: none;
}
#sideClick{
  /* display: none !important; */
}
#sideLeft {
  /* display: none !important; */
}
#sidebar {
  /* display: none !important; */
}
#iconCont{
  transform: scale(1) !important;
}
/*vina end*/