.brand-animate {
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;

    transform-origin: 24px 24px;
    -webkit-transform-origin: 24px 24px;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;

    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.pace-running .brand-animate{
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.pace-done .brand-animate{
    opacity: 0;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/*my own works*/
.autocomplete-suggestions { text-align:right;border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { color: #fb6b5b;text-shadow: 0.2em 0.2em 0.2em rgba(0,0,0,0.2);}
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ghostwhite {
    background: ghostwhite;
}
.floralwhite {
    background: floralwhite;
}
.aliceblue {
    background: aliceblue;
}

.scolor{
  background:   #faf0ff;
  border-right: 15px dotted  white;
}

.alicewhite{
    background-color: #F6FAFB;
}

.azure{
    background-color: azure;
}

.b-b-firebrick {
  border-bottom-color: firebrick;
}
.reddel{
  text-decoration: line-through;
  color: #ef193c;
}

a.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}

.input-group-addon input:read-only {
    border: none;
    border-radius: 25%;
    text-align: center;
    color: #0275d8;
}

[v-cloak] {
  display: none;
}



input:invalid {
  border-right: 2px solid #ef193c;
}

.table > caption {
      text-align: center;
      caption-side: top;
}

.col2{
  columns: 2;
  column-gap: 3em;
  white-space: nowrap;
  text-overflow: clip ellipsis;
}
.col3{
  columns: 3;
  column-gap: 3em;
  white-space: nowrap;
  text-overflow: clip ellipsis;
/*  text-align: center;
    column-rule: 1px dotted #ddd;
    height: 140px;  */
}
.kourosh{
  font-family: 'B Kourosh' , 'Adobe Arabic' ;
}

.rem{
  text-decoration: line-through;
  text-decoration-color: #ef193c;
  text-decoration-style: dashed;
}

/* The delicately soft Lightest Sky is placed between the lush Grass Green and the refreshing Clearwater.
We can imagine an image of crystal clear lake water lapping against a green shore 
with an open sky stretching far into the distance above it. */
.Grass-Green {background:#7DB46CFF}
.Lightest-Sky{background:#E7EBE0FF}
.Clear-Water {background:#ABD6DFFF}


/*********************/
.hover-dot:hover {
  border: 2px dotted gray;
  border-radius: 50%;
}
.hover-flora:hover {
  border-top: thin solid #FF9800;
  /* border-right: thin solid #FF9800; */
  background: linear-gradient(#ffff8d,white);
  border-radius: 6px;
  cursor: pointer;
}
/*uigradients.com*/
.frost {
  background: #000428;  /* fallback for old browsers */
  background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 10px;
}
.hover-frost:hover {
  background: #000428;  /* fallback for old browsers */
  background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 10px;
  border :thin solid blue;
  cursor: pointer;
}

.terminal {
  background: linear-gradient(to right, #0f9b0f, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
.hover-terminal:hover {
  background: linear-gradient(to right, #0f9b0f, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 10px;
  border :thin solid green;
  cursor: pointer;
}

.Convex {
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
}
.Concave{
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
}

/*color names inspired from [html-color.org]*/
/*for voucher header and body form*/
.Saffron{
  background-image: linear-gradient(#ff6126,#ff9d2f);   
}
.Dania{
  background: linear-gradient(to top, floralwhite, #E0C998);
}

/*for invoice header and body form*/
.Bubbles{
  background-color: #e3fdf5;
}
.PaleGreen{
  background-color: PaleGreen;
}
.Rose{
  background-image: linear-gradient(to bottom, #fce2ea, #fafafa);
}

.PowderBlue  {
  background: linear-gradient(to top,WhiteSmoke ,PowderBlue);
}
.SeaGreen {
  background: linear-gradient(to top, #C1FFC1 ,PaleGreen );
}

.BlossomPink{
  background: #ffb3c9;  
  /*background: linear-gradient(to top, #ffb3c9, white);*/
  background-image: linear-gradient(20deg,white,#ffb3c9);
  clip-path: polygon(0 0,100% 0,100% 100%,0 83%);
}
.Cornsilk{
  background: cornsilk;
  background: linear-gradient(to top, white ,cornsilk); 
}
.Bisque{
  background: linear-gradient(to top, bisque, white); /* #ffe0b1  brownish :#90510e */  
  /*border-bottom: 10px dashed cornsilk;  */
}

option[disabled] {
  color: #D6CADD;
  cursor: not-allowed; 
}

.Wave{
  text-align: center;
  background: linear-gradient(to bottom , white , #ffb3c9 );
  position: relative;
}
.Wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat-x;
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, cornsilk 13px);
}
.Wave::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat-x;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 10px 15px, cornsilk 12px, transparent 13px);
}

input.qicon {
    background-image: url(../../images/icons8sorting.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    padding-right: 20px;
}

.p-zero {
  padding: 0;
}

.more-info{
  font-family: tahoma;
  font-size: smaller;
  
}