/* CSS Document 
 * AXCEL CSS Style v.1
 *
 * Copyright AXCEL TECH @2022
 * http://www.axcel-tech.com
 * Designed with passion for Web Based System
 *
*/


/* Page Styles */

a.btm {
  font-size: 15px;
  color: #FFC107;
  cursor: pointer;
  text-align: right;
}

a:hover.btm {
  color: #999;
  cursor: pointer;
  text-decoration: none;
}

a.sbar {
  display: block;	
  font-size: 14px;
  color: #012970;
  cursor: pointer;
  padding: 0.5rem 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#act {
  display: block;	
  color: #ff0000;
  cursor: pointer;
}

a:hover.sbar {
  color: #666;
  cursor: pointer;
  text-decoration: none;
}

.txt-head {
  font-family: Barlow;
  font-weight: normal;
  letter-spacing: 2px;  
}

.txt-p {
  font-family: Jost, serif;
  font-size: 18px;
  letter-spacing: 2px; 
  color:#000;  
}

.txt-wp {
  font-family: Jost, serif;
  font-size: 18px;
  letter-spacing: 2px; 
  color:#fff;  
}

.txt-btns {
  font-family: Barlow, serif;
  letter-spacing: 2px; 
  color:#fff;  
}

.list-txt {
  color: #000;
}

a.cnt {
  color: #012970;
  cursor: pointer;
  text-align: right;
}

a:hover.cnt {
  color: #ff0000;
  cursor: pointer;
  text-decoration: none;
}

a#mnu {
  color: #7B0000;
  cursor: pointer;
}

a:hover#mnu {
  color: #666;
  cursor: pointer;
  text-decoration: none;
}

.txt-tip {
  font-family: Barlow, serif;
  font-size: 15px;
  letter-spacing: 2px; 
  color:#fff;  
}

.txt-bk {
  font-family:Arial; 
  font-size:15px; 
  color: #007BFF;
  letter-spacing:2px;
  border: 1px solid #171E3B;
  padding: 1.5% 3% 1.5% 3%;
}

.txt-h {
  text-transform:uppercase; 
  padding-top:3%; 
  padding-bottom:1%;
  letter-spacing:8px; 
  color:#012970;
  font-family: Roboto;
  font-size:20px;  
  font-style:italic; 
  font-weight: 500; 
  border-bottom:1px solid #ccc;
}

.form-signin {
  width: 100%;
  max-width: 420px;
  padding: 35px;
  margin: auto;
}

.dot {
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin: 5px 5px;
  background-color: #999;
  border-radius: 50%;
  display: inline-block;
  transition: 0.6s ease;
}

.dot:hover {
   background-color: #F1B612;
}

.mark {
  width: 100px;
  height: 1px;
  margin-bottom: 5px;
  background-color: #F1B612;
  border-radius: 10%;
  display: block; 
}

.remark {
   font-size: 15px; 
   letter-spacing: 2px; 
   line-height: 1.5; 
   text-align: center;
}

.chat-box {
  position: fixed;
  bottom: 50px;
  right: 0px;
  z-index:50px;
  max-width: 300px;
}

.chat-box-body {
  padding: 15px;
  color: #7B0000;
}

.img-op-fill {
  cursor: pointer;
}

.img-op-fill:hover {
  cursor: pointer;
  animation-name: zoomout;
  animation-duration: 2s;
  animation-delay: 0.5s;
  transition: 1s;
}

@keyframes zoom {
  from {transform:scale(0.8)}
  to {transform:scale(1)}
}

@keyframes zoomout {
  from {transform:scale(1)}
  to {transform:scale(1.1)}
}

@keyframes slideup {
  from {transform:translateY(25%)}
  to {transform:translateY(0%)}
}

@keyframes slidebottom {
  from {transform:translateY(0%)}
  to {transform:translateY(25%)}
}

@keyframes slideleft {
  from {transform:translateX(0%)}
  to {transform:translateX(25%)}
}

@keyframes slideright {
  from {transform:translateX(25%)}
  to {transform:translateX(0%)}
}

.anm-zoom {
  animation-name: zoom;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  transition: 2s;
}

.anm-left {
  animation-name: slideleft;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  transition: 2s;
}

.anm-right {
  animation-name: slideright;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  transition: 2s;
}

.anm-up {
  animation-name: slideup;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  transition: 2s;
}

.anm-bottom {
  animation-name: slidebottom;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  transition: 2s;
}


/* Table Scrollbar Section */
#scrl::-webkit-scrollbar {
    width: 8px;
	height: 325px;
}

#scrl::-webkit-scrollbar-track {
    width: 8px;
	height: 325px;
}

#scrl::-webkit-scrollbar-thumb {
    width: 8px;
	background: #ccc;
}

/* Table Header Section */

.th-stick {
    position:sticky; 
	top:0px; 
	background-color: #f2f2f2;
}