.not-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .shortBarMenu h4 {
      color: #2f4050;
      text-align: center;
      font-size: 17px;
  }
  
  .footer_icons button {
     padding: 0;
     width: 25px;
     height: 25px;
     background: none;
     border-radius: 100%;
     line-height: normal;
     border: none;
     margin: 0 7px;
     /* filter: drop-shadow(1px 1px 1px rgba(0,0,0,.25)); */
     /* -webkit-transition:all 0.1s linear; */
     -moz-transition:all 0.1s linear;
     -ms-transition:all 0.1s linear;
     -o-transition:all 0.1s linear;
     transition:all 0.1s linear;
  }
  
  .footer_icons button .fa {
         font-size: 15px;
         color: #ffffff;
         text-align: center;
  }
  
   
  .dock {
      /*position: absolute;
      bottom: 0;
          top: 100px;*/
      z-index: 9999;
      width: 100%;
      text-align: center;
  }
  .dock ul {
      position: relative;
      display: inline-block;
      padding: 0 5px;
      margin: 0;
      background:url(../img/dock-bg.png) repeat-x bottom;
  } 
  .dock ul:before, .dock ul:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 38px;
  }
  .dock ul:before {
      left: -37px;
      background: url(../img/dock-bg-left.png) no-repeat left bottom;
  }
  .dock ul:after {
      right: -37px;
      background: url(../img/dock-bg-right.png) no-repeat right bottom;
  }
  .dock li {
      display: inline-block;
      position: relative;
      margin: 0 0 10px 0;
      /*-webkit-box-reflect: below -16px -webkit-gradient(linear, left top, left bottom, from(#0000005e), color-stop(91%, rgba(255, 255, 255, .1)), color-stop(91.01%, transparent), to(transparent));*/
  } 
  .dock button { 
      -webkit-transition:all 0.1s linear;
      -moz-transition:all 0.1s linear;
      -ms-transition:all 0.1s linear;
      -o-transition:all 0.1s linear;
      transition:all 0.1s linear;
          outline: none;
  }
  .dock li.ok:hover button {
       width: 80px;
       height: 80px;
      -webkit-transition:all 0.15s linear;
      -moz-transition:all 0.15s linear;
      -ms-transition:all 0.15s linear;
      -o-transition:all 0.15s linear;
      transition:all 0.15s linear;
  }
  .dock li.prev button, .dock li.next button {
       width: 70px;
       height: 70px;
      -webkit-transition:all 0.15s linear;
      -moz-transition:all 0.15s linear;
      -ms-transition:all 0.15s linear;
      -o-transition:all 0.15s linear;
      transition:all 0.15s linear;
  }
  .dock li.prev-ancor button, .dock li.next-ancor button {
       width: 60px;
       height: 60px;
      -webkit-transition:all 0.15s linear;
      -moz-transition:all 0.15s linear;
      -ms-transition:all 0.15s linear;
      -o-transition:all 0.15s linear;
      transition:all 0.15s linear;
  }
   
  
  .bounce {
      -webkit-animation: bounce 0.4s 4 alternate ease-out;
      -moz-animation: bounce 0.4s 4 alternate ease-out;
      -ms-animation: bounce 0.4s 4 alternate ease-out;
      -o-animation: bounce 0.4s 4 alternate ease-out;
       animation: bounce 0.4s 4 alternate ease-out;
  }
  @-webkit-keyframes bounce {
        0% { -webkit-transform: translateY(0); }
      100% { -webkit-transform: translateY(-20px); }
  }
  
  @-moz-keyframes bounce {
        0% { -moz-transform: translateY(0); }
      100% { -moz-transform: translateY(-20px); }
  }
  @-ms-keyframes bounce {
        0% { -ms-transform: translateY(0); }
      100% { -ms-transform: translateY(-20px); }
  }
  
  @-o-keyframes bounce {
        0% { -o-transform: translateY(0); }
      100% { -o-transform: translateY(-20px); }
  }
  
  @keyframes bounce {
        0% { transform: translateY(0); }
      100% { transform: translateY(-20px); }
  }
  
  
  .footer_icons li:nth-child(1)>button {
      /* background: #00bfa8; */
  }
  .footer_icons li:nth-child(2)>button:nth-child(1) {
      background: none;
  }
  .footer_icons li:nth-child(2)>button:nth-child(2) {
      background: no-repeat;
  }
  .footer_icons li:nth-child(3)>button {
      background: #e86e26;
  }
  .footer_icons li:nth-child(3)>button:last-child {
      background: none;
  }
  .footer_icons li:nth-child(4)>button {
      background: none;
  }
  .footer_icons li:nth-child(4)>button:last-child {
      background: none;
  }
  .footer_icons li:nth-child(5)>button {
      background: none;
  }
  .footer_icons li:nth-child(6)>button {
      background: none;
  }
  .footer_icons li:nth-child(7)>button {
      background: #13a400;
  }
  .footer_icons li:nth-child(8)>button {
      background: #de3171;
  }
  
  .footer_icons li:nth-child(9)>button {
      background: #714a28;
  }
  
  .footer_icons li:nth-child(10)>button {
      background: #af347d;
  }
  .footer_icons li:nth-child(11)>button {
      background: #337ab7;
  }
  .footer_icons li:nth-child(12)>button {
      background: #f8ac59;
  }
  
  #book-viewport
  {
      position: relative;
      top: 0px;
  }
  
  
  .prev_next_buttons button {
      position: absolute;
      top: 50%;
      background: transparent;
      border: 1px transparent solid;
      color: #292929;
      font-size: 48px;
      margin-top: -48px;
      z-index: 99;
  }
  
  button#ebook-prev {
      left: 0;
      display:none;
  }
  
  button#ebook-next {
      right: 0;
      display:none;
  }
  ::-webkit-input-placeholder { /* Chrome */
    color: #fff !important;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #fff !important;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #fff !important;
    opacity: 1;
  }
  :-moz-placeholder { /* Firefox 4 - 18 */
    color: #fff !important;
    opacity: 1;
  }
  .navbar-form-custom .form-control {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0.01);
      border: 2px solid #ffffff;
      font-size: 14px;
      height: 40px;
      /* margin: 10px 0; */
      z-index: 2000;
      line-height: normal;
      color: #fff;
      border-radius: 50px;
      background: #69C8BD;
      width: 83.5%;
  }
  
  div#app-preloader {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #000;
      top: 0px;
      left: 0px;
      z-index: 99999999;
  }
  
  .preloader-container {
      text-align: center;
      width:100%;
      margin:0px auto;
      /*margin-top: 200px;*/
  }
  
  #btn-skip, #btn-play_video { 
      position: relative;
      
      background: #f63722;
      padding: 3px 20px;
      color: #fff;
      font-weight: bold;
      
      z-index: 99999;
      border: 3px #fbf103 solid;
      border-radius: 20px;
      font-size: 20px;
      letter-spacing: 1px;
      box-shadow: inset 0px 0px 1px 2px #00000040;
      margin-left: 10px;
  }
  
  .notes-fixicon {
      position: absolute;
      top: 5%;
      left: 5%;
      z-index: 999;
      width: 30px;
      cursor: pointer;
      height: 30px;
      z-index: 999;
      vertical-align: top;
  }
  
  .notes-fixicon img {
      width: 100%;
      vertical-align: top;
  }
  
  
  
        #snippet pre {
            margin: 10px auto;
            padding: 10px 0;
            background-color: #fff;
            width: 97%;
        }
        .info-box {
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -webkit-box-shadow: 1px 1px 3px #afafaf;
            -moz-box-shadow: 1px 1px 3px #afafaf;
            box-shadow: 1px 1px 3px #afafaf;
            font-size: 12px;
            border: 1px solid #24aa27;
            margin: 30px auto;
            padding: 10px;
            width: 70%;
            background-color: #74e276;
            font-family: sans-serif;
        }
        .info-box ul li {
            margin-top: 5px;
        }
        .info-box div {
            margin: 5px auto;
            width: 92%;
        }
  
  [class^="icon-"],
  [class*=" icon-"] {
      display: inline-block;
      width: 14px;
      height: 14px;
      line-height: 14px;
      vertical-align: text-top;
      background-image: url("../img/glyphicons-halflings.png");
      background-repeat: no-repeat;
      margin-top: 9px;
      padding: 3px;
      transition: all .2s ease-in;
  }
  
  
  
  a:hover > [class^="icon-"],
  a:hover > [class*=" icon-"]
  {
    background-image: url("../img/glyphicons-halflings-white.png");
  }	  
  
  .icon-align-left {background-position: 5px -70px;}
  .icon-align-center {background-position: -96px -72px;}
  .icon-align-right {background-position: -456px 0;}
  
  .toolbar-icons
  {
  opacity: 1;
  display: block;
  left: 406.5px;
  top: 616.40625px;
  right: auto;
  position: absolute;
  z-index: 9999999999999;
  background-color: #d0cbcb;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(14%, #d0cbcb), color-stop(100%, #e9e5e5));
  background: -moz-linear-gradient(top, #d0cbcb 14%, #e9e5e5 100%);
  background: -ms-linear-gradient(top, #d0cbcb 14%,#e9e5e5 100%);
  background: linear-gradient(to bottom, #d0cbcb 14%,#e9e5e5 100%);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxNCUiIHN0b3AtY29sb3I9IiNkMGNiY2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTllNWU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0cbcb', endColorstr='#e9e5e5',GradientType=0 );
  background-size: 100% 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 3px #000;
  height: 34px;
  }
  
  
  #user-options-small a
  {
  width: 105px;
  height: 100%;
  display: block;
  text-align: center;
  float: left;
  border-right: 1px solid #e2dfdf;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  transition: all .2s ease-in;
  text-decoration: none;
  color: rgb(139, 120, 120);
  transition: all .2s ease-in;
  overflow: hidden;
  text-align: center;
  color: rgb(139, 120, 120);
  }
  
  #user-options-small a:first-child{border-left: none;}
  #user-options-small a:last-child{border-right: none;}
  #user-options-small a:hover{
      /*width:105px;*/
  }
  
  .selection
  {
      color: white !important;
      background: #3297fd !important;
  }
  .highlighted
  {
      color: black;
      background: #FF0;
      cursor: pointer;
  }
  
  .highlighted.notes
  {
      background: red !important;
  }
  
  #menuHolder
  {
      background: yellow;
      padding: 8px 10px;
      color: white;
      font-family: Verdana;
  }
  
  #menuHolder span
  {
      display: inline-block;
      width: 150px;
      text-align: center;
      font-size: 25px;
      background: red;
      padding: 5px 0;
      cursor: pointer;
      transition: all .2s ease-in;
      border-radius: 20px;
  }
  
  #menuHolder span:hover
  {
      background: blue;
  }
  
  
  #yellow-notepad, #yellow-notepad-reader
  {
      background-color: rgba(0, 0, 0, 0.882353);
      box-shadow: black 0px 0px 5px;
      -webkit-box-shadow: black 0px 0px 5px;
      -moz-box-shadow: black 0px 0px 5px;
      -ms-box-shadow: black 0px 0px 5px;
      -o-box-shadow: black 0px 0px 5px;
      box-shadow: black 0px 0px 5px;
      width: 240px;
      height: 210px;
      position: absolute;
      left: 250px;
      top: 450px;
      z-index:9999999999999;
  }
  
  #yellow-notepad .notepad-editor, #yellow-notepad-reader .notepad-editor
  {
      background: url(../img/Yellow_Notepad.jpg);
      position: absolute;
      background-position-x: -74px;
      background-position-y: -46px;
      border: 1px solid rgb(216, 216, 93);
      box-shadow: 0px 0px 5px rgb(105, 105, 84);
      padding-left: 30px;
      color: rgb(77, 75, 53);
      font-family: arial;
      line-height: 23px;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 17px;
      text-align: left;
      width: 230px;
      height: 200px;
      margin: 4px;
  }
  
  .notepad-btns
  {
      position: absolute;
      bottom: -35px;
      right: 0px;
      background: black;
      line-height: 25px;
      width: 149px;
      box-shadow: 0px 0px 3px #000;
      border-radius: 0 0 2px 2px;
      text-align: center;
      margin-left: auto;
      border: 3px solid white;
  }
  
  .notepad-btns2
  {
      position: absolute;
      bottom: -35px;
      right: 0px;
      background: black;
      line-height: 25px;
      width: 149px;
      box-shadow: 0px 0px 3px #000;
      border-radius: 0 0 2px 2px;
      text-align: center;
      margin-left: auto;
      border: 3px solid white;
      left: 2px;
      width: 70px;
      right: auto;
  }
  
  #yellow-notepad .notepad-btns span
  {
      font-weight: bold;
      font-family: Verdana;
      vertical-align: top;
      color: white;
      cursor: pointer;
      display: block;
  }
  
  #yellow-notepad .notepad-btns span:hover
  {
      background: rgb(39, 39, 39);
      color: rgb(254, 255, 221);
  }
  
  #yellow-notepad .notepad-closeBtn, #yellow-notepad-reader .notepad-closeBtn
  {
      background: url(../img/closeBtn.png) no-repeat;
      position: absolute;
      width: 27px;
      height: 27px;
      right: -27px;
      top: 0px;
      box-shadow: black 0px 0px 5px;
      -webkit-box-shadow: black 0px 0px 5px;
      border-radius: 0 2px 2px 0;
      cursor: pointer;
      font-size: 20px;
  }
  
  [class^="icon-"]+span {
  position: relative;
  line-height: 4px;
  vertical-align: -webkit-baseline-middle;
  transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  color: rgb(82, 73, 73);
  font-size: 14px;
  }
  
  .notepad-deleteBtn, .notepad-saveBtn{
      font-weight: bold;
      font-family: Verdana;
      vertical-align: top;
      color: white;
      cursor: pointer;
      display: inline;
  }
  
  .canvas-paint {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
  }
  
  .record-audio {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 9999;
      height: 80%;
      height: calc(100% - 0px);
      background: #fefefe;
      width: 100%;
      display: none;
  }
  
  .iframe-blocker {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background: rgba(255, 255, 255, 0);
  }
  
  
  
  /**** start toolbox ******/
  .drawing-tools {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      background: #ffffff;
      z-index: 9999;
      padding-top: 100px;
      width: 220px;
      padding: 15px 15px 0px 15px;
      display: none;
      /*margin-top: 60px;*/
  }
  
  .pnt-tool {
      color: #031930;
      display: block;
      background: #ffffff;
      margin: 7px 0px;
      text-align: left;
      border-radius: 0;
      font-size: 14px;
      height: 40px;
      padding: 10px 20px;
      cursor: pointer;
      line-height: 16px;
      border: 1px #031930 solid;
      vertical-align: middle;
  }
  
  .pnt-tool.active, .pnt-tool:hover {
      background: #1f4c76;
      color: #fff;
  }
  
  .tools-title {
      color: #676a6c;
      text-align: center;
  }
  #tool-colorpicker > .colorpicker {
      right: 0px;
      position: absolute !important;
  }
  
  #pnt-color-select {
      width: 100%;
      height: 100%;
      border: 0px;
  }
  
  .duration02s {
      -webkit-animation-duration: .5s;
      animation-duration: .5s;
  }
  
  .popupVideo {
      /* width: 688px; */
      height: 617px;
      height: auto;
      box-shadow:0px 4px 16px 16px #000000cf;
  }
  
  .regionPos.regionPosAudio img {
      width: 100%;
  }
  
  .pnt-tool .fa {
      float: left;
      padding-right: 15px;
      line-height: 18px;
  }
  
  .drawing-tools-header {
      background: #ffffff;
      margin: -14px -15px 19px -15px;
      min-height: 16.43px;
      padding: 15px;
      border-bottom: 1px solid #e5e5e5;
  }
  
  .linking-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-transform-origin: top left;
      -moz-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      overflow: hidden;
      z-index: 1;
  }
  
  
  .linking-container div{
      pointer-events:auto;
  }
  
  .action-highlight .canvas-paint {
      z-index: 2;
  }
  
  .select-pageselection select {
      width: 100%;
      padding: 5px 20px;
      background: rgb(255, 255, 255);
      font-size: 16px;
      text-align: center;
      color: #000;
  }
  
  .select-pageselection {
      color: #FFF;
      margin-top: 45px;
  }
  
  .select-pageselection label {
      font-size: 18px;
      font-weight: bold;
  }
  
  .jp-jplayer {
      height: auto !important;
  }
  
  #color-selection {
      width: 100%;
      background: #0000FF;
      opacity: .5;
  }
  
  #color-selection option:nth-child(1),
  #color-selection option:nth-child(1):hover,
  #color-selection option:nth-child(1):active {
      background:#a3b6f5;
      opacity: .5;
  }
  #color-selection option:nth-child(2),
  #color-selection option:nth-child(2):hover,
  #color-selection option:nth-child(2):active {
      background: #aacf72;
      opacity: .5;
  }
  #color-selection option:nth-child(3),
  #color-selection option:nth-child(3):hover,
  #color-selection option:nth-child(3):active {
      background:#ffecb9;
      opacity: .5;
  }
  
  
  .saraswati_logo img {
      max-width: 60px;
  }
  
  .saraswati_logo {
      display: inline-block;
  }
  
  
  .fancybox-bg {
      width:100%;
      background:url('../img/app/bg-pattern.jpg') repeat !important;
          opacity: 1 !important;
  }
  .fancybox-slide {
      box-shadow: 5px 5px 5px grey;
  }
  .fancybox-content{
      box-shadow:0px 4px 16px 16px #000000cf !important;
  }
      
  .fancybox-button {
      width: 50px;
      height: 44px;
  }
  
  .fancybox-button--close:after, .fancybox-button--close:before {
      width: 25px;
      border: 3px solid;
  }
  
  .fancybox-button--fullscreen:before {
      width: 25px;
      height: 18px;
      border: 3px solid;
  }
  
   
  .fancybox-close-small:after{
      content: "\f00d";
      font-family: 'FontAwesome';
      background: rgba(30,30,30,.6);
      width: 40px;
      height: 40px;
      border-radius: 100%;
      color: #fff;
      font-size: 30px;
      line-height: 40px;
  }
  
  .fancybox-close-small:hover:after {
      background: rgba(30, 30, 30, 0.82);
      color: #fff;
  }
  
  #button_area
  {
      width: 100%;
      position: absolute;
      top: 90%;
      text-align:center;
  }
  
   .side_panel
  {
      background: #69c8bd;
  }
  
  .h_help_img {
      height: 65px;
      width: 100%;
      display:table;
  }
  
  .__txt {
      width: 70%;
      display: table-cell;
      vertical-align: middle;
  }
  
  .help-inner i
  {
      margin: 30% 0px!important;
      width: 100%;
      text-align: center;
  }