@charset "UTF-8";
body {
      background-color: oldlace;
      font-family: Arial, Helvetica, sans-serif;
      }

.titlefont {
     font-family: Arial, Helvetica, sans-serif;
     color: #ffffff;
}

.sansserif {
     font-family: Arial, Helvetica, sans-serif;
}

.logininfo {
 font-size:12px;
 text-decoration:none;
 font-weight:normal;
 padding: 12px;
 margin-top:-35px;
 float:right;
}

.logininfo a{
 font-size:12px;
 text-decoration:none;
 font-weight:bold;
 padding: 12px;
 margin-top:-35px;
 float:right;
 color:white;
 cursor:pointer;
}

.vertical-menu {
   width: 100%;
}

.vertical-menu a{
 width: 100%;
 background: #eee ;
 background: #eee url(images/line1.png) repeat-x ;
 color: #880000;
 display: block;
 padding: 8px;
 padding-left: 12px;
 padding-right: 12px;
 margin-top:3px;
 text-decoration: none;
 border:1px solid #EAD07E;
 border-right:2px solid brown;
 border-top:2px solid #E26E54;
 border-bottom:3px solid #EAD07E;
}

.vertical-menu a:hover {
 width: 100%;
 background-color: #fff;
 color: #000088;
 border:1px solid magenta;
 border-right:2px solid magenta;
 border-top:2px solid magenta;
}

.vertical-menu a.active {
 width: 100%;
 background-color: #4caf50;
 background: #eee url(images/menu-bar-bg.gif) repeat-x ;
 color: white;
}

.poster {
  height: 400px;
  background: url(images/kp31-l.png) no-repeat top;
  padding: 0;
  margin-top:-9px;
  border:0px solid #ccc;
 }

.doculist {
   width:100%;
}

.doculist a{
 background-color: #eee;
 color: black;
 display: block;
 padding: 12px;
 text-decoration: none;
}

.doculist a:hover {
 background-color: #ccc;
}

.doculist a.active {
 background-color: #4caf50;
 color: white;
}

#addmodule {
   width:400px;
}
 table.upload{ 
  padding:10px 10px 10px 10px;
  border: solid 1px #333333;
  width: 80%;
  -webkit-transform: skew(0deg) rotate(0deg);
  -moz-transform: skew(0deg) rotate(0deg);
  transform: skew(0deg) rotate(0deg);
  -webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
 }

 table .borderfree{ 
  padding:10px;
  border: solid 0px #333333;
  }
 table .borderfree th { 
  height:75px;
  padding:10px;
  margin:5px;
  border: solid 0px #DF7136;
  text-align:left;
  background:#FFEE94;
  }
 table .borderfree td { 
  height:75px;
  padding:10px;
  margin:5px;
  border: solid 0px #DF7136;
  text-align:left;
  background:#FFFFFF;
  }

 table.formstbl{ 
  padding:10px 10px 10px 10px;
  border: solid 1px #333333;
  -webkit-transform: skew(0deg) rotate(0deg);
  -moz-transform: skew(0deg) rotate(0deg);
  transform: skew(0deg) rotate(0deg);
  -webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
 }
 table#formstbl th { 
  border: solid 1px #cccccc;
  border-collapse:collapse;
  background:#888888;
  color:#FFFFFF;
  font-size: 13px;
  font-weight: normal;
  font-family: verdana,sans-serif;
  }
 table#formstbl td { 
  border: solid 1px #cccccc;
  border-collapse:collapse;
  color:#104827;
  font-size: 14px;
  font-weight: normal;
  font-family: verdana,sans-serif;
  }

.rightpanel{ 
  padding:10px 10px 10px 10px;
  border: solid 1px #333333;
  -webkit-transform: skew(0deg) rotate(0deg);
  -moz-transform: skew(0deg) rotate(0deg);
  transform: skew(0deg) rotate(0deg);
  -webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
 }

input[type=file], [type=button], [type=submit], select {
  width: 90%;
  padding: 12px 10px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  color:#024282;
  background:#FAF7D8;
}

input [type=button],[type=submit] , select {
  cursor: pointer;
}
input [type=submit] {
  border-left: 3px solid #880000;
  border-right: 2px solid #330000;
  border-top: 3px solid #880000;
  border-bottom: 2px solid #330000;
}
.btnBg{
  background: url(images/kpbuttonBg.jpg);
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  border: 5px solid #E28442;
  border-radius: 5px;
  }
#btnBg{
  background: url(images/kpbuttonBg.jpg);
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  }
input[type=text]{
  width: 85%;
  padding: 12px 10px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

input[type=password] {
  width: 85%;
  padding: 12px 10px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #FF9151;
  background: url(images/kpbuttonBg.jpg);
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  margin-bottom: 8px ;
  border: none;
  width: 100%;
  border: 0px solid #ccc;
}

button:hover {
  opacity: 0.8;
  padding: 14px 10px;
}

imgbutton {
  background-color: #FF9151;
  background: url(images/kpbuttonBg.jpg);
  color: white;
  border: none;
  width: 100%;
  border: 0px solid #ccc;
}

imgbutton:hover {
  opacity: 0.6;
}

imgarrow {
  background-color: #FF9151;
  color: #880000;
  border: none;
  width: 100%;
  border: 0px solid #ccc;
}

imgarrow:hover {
  opacity: 0.6;
}

.imgBtnS{
  font-size: 14px;
  font-weight: bold;
  padding: 7px ;
}
.imgBtnM{
  font-size: 15px;
  font-weight: bold;
  padding:9px ;
}
.imgBtnL{
  font-size: 16px;
  font-weight: bold;
  padding:13px ;
}

 #selButton  { width:400px; 
               background: url(images/kpbuttonBg.jpg);
               color:white;
               padding:5px; 
               font-weight:bold;
             }
 .selButton  { width:400px; 
               background: url(images/kpbuttonBg.jpg);
               color:white;
               padding:5px; 
               font-weight:bold;
             }
 .seltext {
            background-color: #fff;
            border:1px solid #91650D;
            padding:3px ;
	    font-family: verdana,sans-serif;
            font-size: 11pt;
            font-style: normal;
            font-variant: normal;
            font-weight: normal; 
            line-height: normal;
            font-stretch: normal; 
            color:  #91650D;
            float:left;
            -wewbkit-border-radius:8px;
            -moz-border-radius:8px;
            border-radius:8px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.5);
            -webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    }
/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 12px 0 12px 0;
  position: relative;
}

#header {background-color: #FF9151;
       padding:10px;
       height:70px;
       border:1px solid #fff;
       }
img.avatar {
  width: 50%;
  border-radius: 50%;
}
img.avatar-small {
  width: 45%;
  border-radius: 50%;
}

.textcontainer {
  padding: 10px;
  width: 95%;
}

.container {
  padding: 1px 16px 16px 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 20px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

.closex {
  position: absolute;
  right: 5px;
  top: 0;
  color: green;
  font-size: 35px;
  font-weight: bold;
  text-decoration: none;
}

.closex:hover,
.closex:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

.footer {
  color: #555555;
  font-size: 11px;
  text-align: center;
}

.pdfobject-container {
 height: 35rem;
 border: 1rem solid #a22a0f;
 }

.video-container {
 height: 35rem;
 border: 1rem solid #a22a0f;
 background: #525659;
 }
 
.audio-container {
 height: 35rem;
 border: 1rem solid #a22a0f;
 background: #525659;
 }

#audio {
  width: 70vw;
  height: 65vh;
  background: #000000;
  margin: 4px auto;
  border-radius: 5px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

#audio .button {
  position: absolute;
  top: 80%;
  left: 30%;
}

* { box-sizing: border-box; }
 
.pdfobject-com {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2016;
}
 
.pdfobject-com a:link, .pdfobject-com a:visited {
    color: #fff;
    font-weight: bold;
    display: block;
    padding: .25rem 1rem;
    background: #6699FF;
    text-decoration: none;
}
 
.pdfobject-com a:hover, .pdfobject-com a:visited:hover {
    color: #FFF;
    background: #FF3366;
    text-decoration: none;
}
 
.pdfobject-com a:before {
     content: "\2190";
     margin-right: .25rem;
}

@media (max-width: 768px) {
.container { width: 100%; }
}

#videoContainer {
  width: 70vw;
  height: 65vh;
  background: #000000;
  margin: 4px auto;
  border-radius: 5px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

#videoContainer.fullScreen {
  width: 100vw !important;
  height: 100vh !important;
}

#videoContainer.small .intensityBar { width: 50px !important; }

#videoContainer.small .playButton {
  margin: 0 !important;
  margin-right: 5px !important;
}

#videoContainer.small .timer { display: none !important; }

#videoContainer.small .playPause, #videoContainer.small .volume .icon, #videoContainer.small .scale .icon {
  width: 15px !important;
  height: 15px !important;
}

#videoContainer.small .progressBar { height: 6px !important; }

#videoContainer.small .overlay .button {
  width: 50px !important;
  height: 50px !important;
}

#videoContainer.small .time { display: none !important; }

#videoContainer .overlay {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(77, 191, 140, 0.9), rgba(41, 115, 82, 0.9));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  border-radius: 5px;
}

#videoContainer .overlay .button {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(images/play-button.svg);
  background-size: 100% 100%;
  transform: translate(-50%, calc(-50% - 30px));
  cursor: pointer;
  transition: width 0.2s, height 0.2s;
}

#videoContainer .overlay .button:hover {
  width: 90px;
  height: 90px;
}

#videoContainer #video {
  width: 100%;
  height: calc(100% - 60px);
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#videoContainer #video video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

#videoContainer #controls {
  width: 100%;
  height: 60px;
  background: #111111;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 9999;
}

#videoContainer #controls .playButton {
  width: 70px;
  height: 100%;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  cursor: pointer;
  transition: all 0.4s;
  border-bottom-left-radius: 5px;
}

#videoContainer #controls .playButton:hover { background: #222222; }

#videoContainer #controls .playButton .playPause {
  width: 25px;
  height: 25px;
  background: url(images/play.svg);
  background-size: 100% 100%;
}

#videoContainer #controls .ProgressContainer {
  color: #224535;
  width: calc(100% - 100px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

#videoContainer #controls .ProgressContainer .progressBar {
  width: 100%;
  height: 8px;
  background: #39a072;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
}

#videoContainer #controls .ProgressContainer .progressBar:hover + .time {
  opacity: 1;
  transform: translateY(0);
}

#videoContainer #controls .ProgressContainer .progressBar .progress {
  width: 0%;
  height: 100%;
  background: #224535;
  border-radius: 20px;
}

#videoContainer #controls .ProgressContainer .timer {
  margin: 0 10px;
  font-family: Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  font-weight: 300;
  color: #2c7a57;
  letter-spacing: 1px;
}

#videoContainer #controls .ProgressContainer .time {
  width: 80px;
  height: 25px;
  background: #2c7a57;
  position: absolute;
  top: -20px;
  left: 0;
  border-radius: 5px;
  color: #224535;
  font-family: Arial, sans-serif;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 0.3s, opacity 0.3s;
}

#videoContainer #controls .ProgressContainer .time::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 25px;
  left: 33px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #2c7a57;
}

#videoContainer #controls .volume {
  width: 150px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

#videoContainer #controls .volume .icon {
  width: 25px;
  height: 25px;
  background: url(images/volume.svg);
  background-size: 100% 100%;
  cursor: pointer;
  margin-right: 10px;
}

#videoContainer #controls .volume .intensityBar {
  width: 100px;
  height: 4px;
  background: #39a072;
  border-radius: 20px;
  max-width: 100px;
  overflow: hidden;
  transform-origin: right center;
  cursor: pointer;
  transition: all 0.5s;
}

#videoContainer #controls .volume .intensityBar .intensity {
  width: 50%;
  height: 100%;
  background: #224535;
}

#videoContainer #controls .scale {
  width: 70px;
  height: 100%;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  cursor: pointer;
  transition: all 0.4s;
  border-bottom-right-radius: 5px;
}

#videoContainer #controls .scale:hover { background: #222222; }

#videoContainer #controls .scale .icon {
  width: 25px;
  height: 25px;
  background-size: 100% 100%;
  background: url(images/expand.svg);
  background-size: 100% 100%;
}
 #gobutton1 {
  width:45px;
  height:45px;
  border-radius:50%;
  padding-top :22px;
  padding-left :22px;
  border:2px solid #aaa;
  font-weight:bold;
  color:white;
  cursor: pointer;
  background-color: #FF9151;
  }

 #gobutton {
  width:75px;
  height:50px;
  cursor: pointer;
  background: url(images/GO.jpg) no-repeat bottom;
  background-size: 100% 100%;
  }

 #greenbg_point { background:#B6F5B6; height:40px;border:1px solid green; cursor: pointer;  }
 #pinkbg_point { background:#F5B6E3; color:#880000; height:40px;border:1px solid #880000; cursor: pointer; }
 #greenbg { background:#B6F5B6; height:25px;padding-top:15px;}
 #pinkbg { background:#F5B6E3; height:25px;padding-top:15px; }
 #creambg { background:#FAF7D8; height:25px; padding-top:15px;}

.docuscreen {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 10px;
}

.jpgscreen {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  padding-top: 10px;
}

.docutitle {
 margin-bottom: -10px;
}

.rsltscreen {
  background-color: lightyellow;
  border:10px solid #e28442;
  margin-top:50px;
  margin-left:100px;
  padding: 8px;
  z-index: 10; 
  width: 50%;
  text-align:center;
  opacity: 0.8;
}

#kpgobutton{
    width:50px;
    background: url(images/kpbuttonBg.jpg) bottom;
    border:10px solid #e28442;
    font-size:18px;
    font-weight:bold;
    padding:8px;
    text-align:center;
    color:#ffffff;
    border-radius:8px;
}
  #gpLogo{
           width:300px; 
           height:50px;
           margin-top:9px;
           margin-left:1px;
           padding:2px;
           border: 1px solid #ffffff;
           float:left;
  }
  
  #akam{
          background:auto ;
          position:absolute;
          right:4px;
          top:21px;
          width:200px;
          height:95px;
          margin:7px;
          margin-bottom:1px;
          margin-left:100px;
          padding:5px;
          border: 0px solid #cccccc;
  }
  
  engGp {
    height:25px;
    font-family: Arial, Helvetica, sans-serif;
    position:absolute;
    left:275px;
    top:90px;
    font-size:14pt;
    font-weight:bold;
    color:#760522;
  }

  .idlediv {
    position:absolute;
    left:250px;
    top:200px;
    z-index: 100;
    background-color: #f5deb3;
    color: #880000;
    font-size:10pt;
    padding:20px;
    border: 3px double #880000;
    text-align:center;
    -webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    border-radius: 10px;
  }

  msg {
    background-color: #f5deb3;
    color: #880000;
    font-size:12pt;
    margin-left : 20px;
    margin-top : 50px;
    padding:20px;
    border: 1px double #880000;
    text-align:center;
    -webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    border-radius: 8px;
  }