/*****************************************/
/*    Highlight in different colors      */
/*****************************************/


.highlight-red {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(255, 20, 0, 0.2),
    rgba(255, 20, 0, 0.7) 95%,
    rgba(255, 20, 0, 0.1)
  );
}
.highlight-yellow {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(255, 224, 0, 0.2),
    rgba(255, 224, 0, 0.7) 95%,
    rgba(255, 224, 0, 0.1)
  );
}
.highlight-green {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(0, 255, 20, 0.2),
    rgba(0, 255, 20, 0.7) 95%,
    rgba(0, 255, 20, 0.1)
  );
}
.highlight-blue {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(0, 20, 255, 0.2),
    rgba(0, 20, 255, 0.7) 95%,
    rgba(0, 20, 255, 0.1)
  );
}
.highlight-pink {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(231, 72, 240, 0.2),
    rgba(231, 72, 240, 0.7) 95%,
    rgba(231, 72, 240, 0.1)
  );
}


/*****************************************/
/*    Highlight BAR style -  Green       */
/*****************************************/

.bar-highligt-green {
  position: relative;
}

.bar-highligt-green::before {
  /* Highlight color */
  background-color: #46b96c;

  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: 60%;
  left: -2px;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}

/*****************************************/
/*    Highlight BAR style -  Blue       */
/*****************************************/

.bar-highligt-blue {
  position: relative;
}

.bar-highligt-blue::before {
  /* Highlight color */
  background-color: #276CF7;

  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: 60%;
  left: -2px;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}

/*****************************************/
/*    Highlight BAR style -  Red       */
/*****************************************/

.bar-highligt-red {
  position: relative;
}

.bar-highligt-red::before {
  /* Highlight color */
  background-color: #F03134;

  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: 60%;
  left: -2px;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}

/*****************************************/
/*    Highlight BAR style -  Yellow       */
/*****************************************/

.bar-highligt-yellow {
  position: relative;
}

.bar-highligt-yellow::before {
  /* Highlight color */
  background-color: #EFCF29;

  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: 60%;
  left: -2px;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}

/*****************************************/
/*    Highlight BAR style -  Pink        */
/*****************************************/

.bar-highligt-pink {
  position: relative;
}

.bar-highligt-pink::before {
  /* Highlight color */
  background-color: #F73CE4;

  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: 60%;
  left: -2px;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}



/*****************************************/
/*    Dashed Bar style -  Red        */
/*****************************************/

.dashed-border-highlight-red{
  border: 4px dashed red;  
  padding:0.03em 0.25em;
}

.dashed-border-highlight-blue{
  border: 4px dashed blue;  
  padding:0.03em 0.25em;
}

.dashed-border-highlight-green{
  border: 4px dashed green;  
  padding:0.03em 0.25em;
}

.dashed-border-highlight-yellow{
  border: 4px dashed yellow;  
  padding:0.03em 0.25em;
}

.dashed-border-highlight-pink{
  border: 4px dashed pink;  
  padding:0.03em 0.25em;
}


/*****************************************/
/*    Painstrike style -  Yellow        */
/*****************************************/

.highlight-container-ps-yellow, .highlight-paintstrike-container-yellow {
  position: relative;
}

.highlight-container-ps-yellow {
  display: inline-block;
}
.highlight-container-ps-yellow:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: #ffd500;
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}

/*****************************************/
/*    Painstrike style -  Red        */
/*****************************************/

.highlight-container-ps-red, .highlight-paintstrike-container-red {
  position: relative;
}

.highlight-container-ps-red {
  display: inline-block;
}
.highlight-container-ps-red:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: #FD373A;
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}

/*****************************************/
/*    Painstrike style -  Green        */
/*****************************************/

.highlight-container-ps-green, .highlight-paintstrike-container-green {
  position: relative;
}

.highlight-container-ps-green {
  display: inline-block;
}
.highlight-container-ps-green:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: #43EC11;
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}


/*****************************************/
/*    Painstrike style -  Blue        */
/*****************************************/

.highlight-container-ps-blue, .highlight-paintstrike-container-blue {
  position: relative;
}

.highlight-container-ps-blue {
  display: inline-block;
}
.highlight-container-ps-blue:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: #2C6EF1;
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}


/*****************************************/
/*    Painstrike style -  Pink        */
/*****************************************/

.highlight-container-ps-pink, .highlight-paintstrike-container-pink {
  position: relative;
}

.highlight-container-ps-pink {
  display: inline-block;
}
.highlight-container-ps-pink:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: #F444FF;
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}


/* Dunne Underline */

.highlite-grow-underline {
  color: #18272F;
  position: relative;
  text-decoration: none;
}

.highlite-grow-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.highlite-grow-underline:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}


/* Vette Underline */

.highlite-grow-underline-fat {
  color: #18272F;
  position: relative;
  text-decoration: none;
}

.highlite-grow-underline-fat::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.highlite-grow-underline-fat:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}




/* Stike Over - Yellow */

.highlite-stikeover-yellow {
  box-shadow: inset 0 0 0 0 #B39600;
  color:#B39600;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.highlite-stikeover-yellow:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #B39600;
}

/* Stike Over - Red */

.highlite-stikeover-red {
  box-shadow: inset 0 0 0 0 #FD373A;
  color: #FD373A;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.highlite-stikeover-red:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #FD373A;
}

/* Stike Over - Green */

.highlite-stikeover-green {
  box-shadow: inset 0 0 0 0 #FD373A;
  color: #FD373A;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.highlite-stikeover-green:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #FD373A;
}

/* Stike Over - Blue */

.highlite-stikeover-blue {
  box-shadow: inset 0 0 0 0 #1224AD;
  color: #1224AD;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.highlite-stikeover-blue:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #1224AD;
}

/* Stike Over - Green */

.highlite-stikeover-green {
  box-shadow: inset 0 0 0 0 #0A4E02;
  color: #0A4E02;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.highlite-stikeover-green:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #0A4E02;
}

/* Stike Over - Green */

.highlite-stikeover-pink {
  box-shadow: inset 0 0 0 0 #8504A2;
  color: #8504A2;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.highlite-stikeover-pink:hover {
  color: #fff;
  box-shadow: inset 200px 0 0 0 #8504A2;
}