@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
	header {
        position: fixed;
        top: 0;
    }
    footer {
        position: fixed;
        bottom: 0;
    }
	.print-overflow {
		height: auto !important;
		overflow: visible !important;
  }
}

header{display:none;}
footer{display:none;}

body{
	font-size:1em;
}

.printtable tr td{
	background-color:white;
	vertical-align: middle !important;
	border:1px solid gray;	
}
select,input,textarea{
	border: 1px solid silver;
}
select:hover,input:hover,textarea:hover{
	border: 1px solid #1e88e5;
}
select:focus,input:focus,textarea:focus{
	border: 1px solid #1c81d9 !important;
}
.splitter>.gutter{	
	z-index:0!important;
}
.card-content{
	overflow-y:scroll;
	height:200px;
}
.avatar{
	border-radius:50%;
	width:50px;
	height:50px;
}
.borderBottomTransform:after {
  display:block;
  content: '';
  border-bottom: solid 2px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
.borderBottomTransform.fromLeft:after{  transform-origin:  0% 50%; }
.borderBottomTransform:hover:after { transform: scaleX(1); }
.borderBottomTransform.fromRight:after{ transform-origin:100% 50%; }
.userinfo-img{
	background:url('../image/user-info.jpg') no-repeat;
	background-size:cover;
}
.select1,.select3{
	font-size:1em !important;
}

.rainbow-gradient{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#24ceef+0,7174fe+32,207cca+61,b424ff+100 */
background: #24ceef; /* Old browsers */
background: -moz-linear-gradient(left,  #24ceef 0%, #7174fe 32%, #207cca 61%, #b424ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #24ceef 0%,#7174fe 32%,#207cca 61%,#b424ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #24ceef 0%,#7174fe 32%,#207cca 61%,#b424ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24ceef', endColorstr='#b424ff',GradientType=1 ); /* IE6-9 */
}
.blink {
  animation: blinkit 1s infinite;
}

@keyframes blinkit {
  0%, 49% {
    background-color: rgb(117, 209, 63);
  }
  50%, 100% {
    background-color: #e50000;
  }
}

/*metro tokenizers animation*/

/*tokenizers - animation1*/
.tokenizers-calenderstyle {
  display: flex;
  align-items: flex-start;
  position: relative;
  background: #3e372d;
  padding: 50px;
  justify-content: center;
}
.tokenizers-calenderstyle .char {
  display: inline-block;
  background: #ffffff;
  color: #282828;
  border-bottom: 4px coral solid;
  font-size: 48px;
  padding: 10px 8px 0;
  text-align: center;
  box-shadow: 2px 2px 4px #000;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0 4px;
  position: relative;
  width: 64px;
  height: 80px;
  transform-origin: 50% 6px;
}
.tokenizers-calenderstyle .char::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39342e;
  left: 50%;
  top: 6px;
  margin-left: -4px;
}
.tokenizers-calenderstyle .char.te-odd {
  margin-top: 3px;
}
.tokenizers-calenderstyle .char.te-even {
}
.tokenizers-calenderstyle .ts-M {
  animation: skew 2s linear infinite;
}
.tokenizers-calenderstyle .ts-e {
  animation: skew-reverse 2.2s linear infinite;
}
.tokenizers-calenderstyle .ts-t {
  animation: skew 3s linear infinite;
}
.tokenizers-calenderstyle .ts-r {
  animation: skew-reverse 2.8s linear infinite;
}
.tokenizers-calenderstyle .ts-o {
  animation: skew-reverse 3.2s linear infinite;
}
.tokenizers-calenderstyle .ts-4 {
  animation: skew 1.9s linear infinite;
}
@keyframes skew {
  0% {
    transform: skew(-10deg, 10deg)
  }
  25% {
    transform: skew(0deg, 0deg)
  }
  50% {
    transform: skew(8deg, -8deg);
  }
  75% {
    transform: skew(0deg, 0deg);
  }
  100% {
    transform: skew(-10deg, 10deg)
  }
}
@keyframes skew-reverse {
  0% {
    transform: skew(8deg, -8deg)
  }
  25% {
    transform: skew(0deg, 0deg)
  }
  50% {
    transform: skew(-10deg, 10deg);
  }
  75% {
    transform: skew(0deg, 0deg);
  }
  100% {
    transform: skew(8deg, -8deg)
  }
}

/*tokenizer - animation2*/
.tokenizer-2d {
  font-size: 38px;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  justify-content: center;
  padding: 50px;
  background: #3e372d;
  position: relative;
}
.tokenizer-2d .char {
  font-weight: bold;
  display: inline-block;
  width: 48px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
  opacity: .8;
}
.tokenizer-2d .char.te-odd {
  background: orangered;
  transform: skewY(-20deg);
}
.tokenizer-2d .char.te-even {
  background: orange;
  transform: skewY(20deg);
}

/*tokenizer-animation3*/
.tokenizer-multicolor {
  padding: 50px;
  background: #3e372d;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
}
.tokenizer-multicolor .te-odd {
  color: orange;
}
.tokenizer-multicolor .te-even {
  color: orangered;
}
.tokenizer-multicolor .ts-4, #example1 .ts-e {
  color: white;
}
.tokenizer-multicolor .ts-o {
  color: greenyellow;
}
.tokenizer-multicolor .ts-s {
  color: deepskyblue;
}
.tokenizer-multicolor .ts-a {
  color: #ffe34a;
}
.tokenizer-multicolor .ts-M, #example1 .ts-m {
  color: cyan;
}

.arrow {
    border-style: dashed;
    border-color: transparent;
    border-width: 0.20em;
    display: -moz-inline-box;
    display: inline-block;    /* Use font-size to control the size of the arrow. */
    font-size: 100px;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    width: 0;
    background-color:#fff;   /* change background color acc to bg color */ 
    border-left-width: 0.2em;
    border-left-style: solid;
    border-left-color: silver;
    left:0.25em;
}

.sortable-placeholder {
    background-color: #ddd;
    border: 2px dashed #aaa;
    height: 50px;
    margin-bottom: 5px;
}

.custom-dragging {
    opacity: 0.6;
    transform: scale(0.95); /* Adds a slight scaling effect during drag */
    transition: transform 0.2s ease;
}