.parent {
  overflow: hidden; /* required */
  width: 50%; /* for demo only */
  margin: 10px auto; /* for demo only */
  position: relative; /* required  for demo*/
}

.ribbon {
  margin: 0;
  padding: 0;
  background: slateblue;
  color: white;
  padding: 1px;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(30%) translateY(0%) rotate(45deg);
  transform-origin: top left;
  text-transform: capitalize;
}
.ribbon:before,
.ribbon:after {
  content: "";
  position: absolute;
  top: 0;
  margin: 0 -1px; /* tweak */
  width: 100%;
  height: 100%;
  background: slateblue;
}
.ribbon:before {
  right: 100%;
}

.ribbon:after {
  left: 100%;
}


.stroked {
	z-index: 1; 
	white-space: initial;
	text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;"
}

.watermarked::before {
  position: fixed;
  /* top: 0%;
  left: 0%; */
  top: -150%;
  left: -200%;

  display: block;
  width: 500%;
  height: 300%;

  transform: rotate(-45deg);
  content: attr(data-watermark);

  font-size: 25px;
  opacity: 0.40;
  line-height: 1.5em;
  letter-spacing: 1px;
  color: #cccccc;
}


.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  text-transform: capitalize;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.shadow {
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
  margin-bottom: 5px;
}

.imglogo
{
  width: 25em;
}


.profile-card {
  display: flex;
  align-items: center;
  /* border: 1px solid #ccc; */
  padding: 5px;
  border-radius: 5px;
  /* width: 500px; */
  background-color: white;
  /* height: 100%; */
}

.profile-pic {
  border-radius: 50%;
  /* width: 200px;
  height: 200px; */
  margin-right: 20px;
  /* background-color: cyan; */
}

.profile-info {
  display: flex;
  flex-direction: column;
  /* background-color: yellow; */
}

.profile-title {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  /* background-color: green; */
}

.profile-description {
  margin: 0;
  font-size: 11px;
  /* background-color: orange; */
}

@keyframes blink {  
  0% { color: greenyellow; }
  100% { color: orange; }
}
@-webkit-keyframes blink {
  0% { color: greenyellow; }
  100% { color: orange; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 

.xcontainer {
  /* position: relative; */
  width: 100%;
  /* height: 50px; */
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  align-items: flex-start;
}

.xsubheader {
  /* position: absolute; */
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #999;
  font-size: 13px;
}

.xlabel-text {
  top: 50%;
  left: 0;
  right: 0;
  font-size: 14px;
  white-space: nowrap;
}
.xxlabel-text {
  top: 50%;
  left: 0;
  right: 0;
  font-size: 14px;
  white-space: nowrap;
  /* // need ajust space */
}

.ripple-effect {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple-effect:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  /* background: rgba(255, 255, 255, .5); */
  background: lightskyblue;
  border-radius: 100%;
  transform: scale(1);
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(100); opacity: 0; }
}


.profile-card {
  border: 10px solid transparent;
  border-image: url('../border.png') 30 stretch;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: calc(6*30px);
  height: 50px;
  display: flex;
  color: green;
  filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
  clip-path: inset(0 100% 0 0);
  animation: l12 2s infinite steps(7);
}
.loader:before {
  content: "";
  width: 30px;
  height: 25px;
  --c:no-repeat radial-gradient(farthest-side,currentColor 92%,#0000);
  background: 
    var(--c) left /70% 70%,
    var(--c) right/20% 20%,
    var(--c) top    0 right 15%/20% 20%,
    var(--c) bottom 0 right 15%/20% 20%;
}
@keyframes l12 {
  100% {clip-path: inset(0 -30px 0 0)}
}