[class^="ri-"], [class*=" ri-"] {
    font-size: x-large;
}



.skill{
    width: 160px;
    height: 160px;
    background-color: transparent;
    position: relative;
    border-radius: 50%;
}

.inner{
    width: 120px;
    height: 120px;
    border: 1px solid aqdua;
    border-radius: 50%;
    box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
      0.5px 0.5px 0px rgba(0, 0, 0, 0.15);
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.outer{
    width: 160px;
    height: 160px;
    padding: 20px;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.2),
    -0.5px -0.5px 0px rgba(0, 0, 0, 0.15);
    
    border-radius: 50%;
}

.num{
    font-size: 20px;
    font-weight: 700;
    color: #000;

}

.circle{
    fill:none;
    stroke-width: 20px;
}

.circleBg{
    stroke: #fff;
    stroke-width: 19px;
}

.circleBar{
    stroke: url(#GradientColor);
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    transition: 0.7s linear all;
}

svg.circle{
    transform: rotate(-90deg) scale(1,1);
    position: absolute;
    top: 0;
    left: 0;
}

#uploading .drag-area{
   animation: linearGradientMove .7s infinite linear;
}


.drag-area{
  width: 100%;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.5s;
}
.drag-area .icon{
  font-size: 100px;
  color: #000000;
}
.drag-area header{
  font-size: 30px;
  font-weight: 500;
  color: #000000;
}
.drag-area span{
  font-size: 25px;
  font-weight: 500;
  color: #000000;
  margin: 10px 0 15px 0;
}

.drag-over{
  outline: 2px dashed #564aff;
  border-radius: 15px;
  transition: border-radius 0s !important;
}

input[type="text"].psw{
  -webkit-text-security: disc;
  text-security: disc;
}

.qr-img{
  image-rendering: pixelated;
}

.loc-acc{
  padding: 0.5em;
  cursor: pointer;
}
.loc-acc:hover{
  border-radius: 1em;
  background-color: #f0f0f0;
}

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

.search-result:hover{
  background-color: #f0f0f0;
}

.card-title{
  display: inline-block;
  padding-right: 0.5em;
}

.breadcrumb {
  background-color: transparent;
  display: inline-flex;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

.breadcrumb-item a{
  background: #ede4e4;
  padding: 0.1em 0.5em;
  border-radius: 0.5em;
}

.breadcrumb-item:last-child a{
  color: #000;
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item:before {
  content: "/";
  font-size: 1.5em;
  color: #535f6b;
  font-weight: 900;
  margin-top: 0;
}

.breadcrumb-item i {
  margin-right: 0 !important;
}


@keyframes fadeIn {
  0%   { opacity: 0; }
  66%  { opacity: 0; }   /* Stay invisible for ~1s of total 1.5s */
  100% { opacity: 0.8; } /* Then fade in over 0.5s */
}

@keyframes pulse {
  0%   { opacity: 0.8; }
  50%  { opacity: 0.6; }
  100% { opacity: 0.8; }
}

.pulse-fade-in {
  opacity: 0;
  animation:
    fadeIn 1s ease-in-out forwards, /* starts after 1s */
    pulse 2s ease-in-out infinite 1.2s;  /* starts after fadeIn ends */
}


.modal-title{
  min-width: 0;
}

.main_officejs_container:has(#stl_cont){
  overflow: hidden !important;
}