@import url(animation.css);
/*--Root Color Variable--*/




  .container1
{	
  
    margin-top:3px ;
    margin-bottom: 10px;
    padding:0px;
	

}
  .imglink
  {
    position:relative;   
    color: var(--color-text-ddd);
    right:15px;
    -webkit-filter: drop-shadow(0px 0px 3px #888888);
    filter:         drop-shadow(0px 0px 3px #888888);
    }
   .img-filter{
    filter: drop-shadow(1px 1px 1px var(--color-drop-shadow));
    -webkit-filter: drop-shadow(1px 1px 1px var(--color-drop-shadow));
    -moz-filter: drop-shadow(1px 1px 1px var(--color-drop-shadow));
}
  .img-filter:hover
  {
    cursor: pointer;
    color: var(--color-text-hover);
    filter: drop-shadow(2px 1px 2px var(--color-drop-shadow-hover));
    -webkit-filter: drop-shadow(2px 1px 2px var(--color-drop-shadow-hover));
    -moz-filter: drop-shadow(2px 1px 2px var(--color-drop-shadow-hover));
    /*clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
    */
}  
 .img-footer-filter{
    filter: drop-shadow(1px 1px 3px var(--color-drop-shadow));
    -webkit-filter: drop-shadow(1px 1px 3px var(--color-drop-shadow));
    -moz-filter: drop-shadow(1px 1px 5px var(--color-drop-shadow));
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
}
  .img-footer-filter:hover
  {
    cursor: pointer;
    color: var(--color-text-hover);
    filter: drop-shadow(1px 3px 10px var(--color-drop-shadow-hover));
    -webkit-filter: drop-shadow(1px 3px 10px var(--color-drop-shadow-hover));
    -moz-filter: drop-shadow(1px 3px 10px var(--color-drop-shadow-hover));
    /*clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
        */
}  
  .imglink:hover
  {
      cursor: pointer;
      filter:         drop-shadow(0px 0px 3px #FFDD00);
      -webkit-filter:         drop-shadow(0px 0px 3px #FFDD00);
}
    /* General custome style */
  

  .dropdown-divider {

      border-top: 1px solid #ffffff37;
  }

  .p-shadow1 {
      -moz-box-shadow: 0px 0px 3px 0px #999999;
      -webkit-box-shadow: 0px 0px 3px 0px #999999;
      box-shadow: 0px 0px 3px 0px #999999;
  }

  .p-shadow {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  
  .lineheader {
    position: relative;
    width: 100%;
    min-height: 0.1em;
    background: var(--color-line-header);
    background-size: 600% 600%;
    animation: gradient 10s ease-out infinite ;
    -webkit-animation: gradient 10s ease-out infinite ;
}
.form-switch-md .form-check-input {
  height: 1.5rem !important;
  width: calc(2rem + 0.75rem)  !important;
  margin-right: 5px !important;
  border-radius: 3rem !important;
  -webkit-border-radius: 3rem !important;
  -moz-border-radius: 3rem !important;
  -ms-border-radius: 3rem !important;
  -o-border-radius: 3rem !important;
}
.table table
{
  width: 100% !important;
}
.animateBG,.book-modal-header {
    background: linear-gradient(263deg, var(--color-bg), var(--color-hover),var(--color-bg));
    color: var(--color-text-ddd);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}
@keyframes AnimationName {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}

/* animation class */
.blinking {
  color: red !important;
  background-color: rgba(255 173 51 / 0.25) !important;
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;
}

@keyframes blink {

  from,
  to {
      opacity: .3;
  }

  50% {
      opacity: 1;
  }
}

@-moz-keyframes blink {

  from,
  to {
      opacity: 0.3;
  }

  50% {
      opacity: 1;
  }
}

@-webkit-keyframes blink {

  from,
  to {
      opacity: 0.3;
  }

  50% {
      opacity: 1;
  }
}

@-ms-keyframes blink {

  from,
  to {
      opacity: 0.3;
  }

  50% {
      opacity: 1;
  }
}

@-o-keyframes blink {

  from,
  to {
      opacity: 0.3;
  }

  50% {
      opacity: 1;
  }
}
/* animation border */
.animateOutline {
  outline-width: 1px;
  outline-offset: 0;
  outline-color: rgba(0, 130, 206, 0.75);
  outline-style: solid;
  animation: animateOutline 2s ease infinite;
}
@keyframes animateOutline {
  0% {
      outline-width: 1px;
      outline-offset: 0;
      outline-color: rgba(0, 130, 206, 0);
  }

  10% {
      outline-color: rgba(0, 130, 206, 0.75);
  }

  /* The animation finishes at 50% */
  50% {
      outline-width: 5px;
      outline-offset: 3px;
      outline-color: rgba(0, 130, 206, 0);
  }

  100% {
      outline-width: 7px;
      outline-offset: 3px;
      outline-color: rgba(102, 102, 102, 0);
  }
}

/* button style */
.btn-over {
  color: rgba(50 50 50 / 0.85) !important;
  background: var(--color-bg-05);
  display: inline-block;
  border: 1px solid rgba(200, 200, 200, .4);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease 0s;
  max-height: 40px;
  height: 40px;
  min-width: 40px
      /* z-index: 1; */
}

.btn-over:hover,
.btn-over:focus {
  color: var(--color-text-fff) !important;
  background: var(--color-hover);
}

.btn-over:before,
.btn-over:after {
  content: "";
  position: absolute;
  height: 100%;
}

.btn-over:before {
  background: rgba(255, 255, 255, 0.2);
  width: 100%;
  transform: skewX(-30deg);
  top: 0;
  left: -100%;
  transition: all 1s ease-in-out;
}

.btn-over:after {
  background: rgba(255, 255, 255, 0.25);
  top: 0;
  left: 0;
  width: 0%;
  transition: all 0.5s ease-in-out;
}

.btn-over:hover:before {
  left: 100%;
}

.btn-over:hover:after {
  width: 100%;
}