/* -----
SVG Icons - svgicons.sparkk.fr
----- */

.svg-icon {
  width: 1.4vw;    
  border-radius: 50%;  
  height: 1.4vw;  
  padding: 0.2em;    
  margin-left: 0.3em;    
  border: solid 2px #fff;
  box-shadow: 6px 6px 9px rgba(0,0,0,0.3), -6px -6px 9px rgba(255,255,255,0.5);
  stroke-width: 0.1;  
  stroke: rgba(0,0,0,0.8);    
}
.animated {
  width: 5vw;
  border-radius: 10px;
  animation: toNormal 0.6s ease 0s 1 forwards;
}
.svg-icon:hover {  
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3), -2px -2px 3px rgba(255,255,255,0.5);      
}
.svg-icon:active {
  box-shadow: inset 3px 3px 4px rgba(0,0,0,0.3), inset -3px -3px 4px #ffffff;    
}
.svg-icon-hidden {    
  /* display: none; */
  animation: hideIcon 1s ease 0s 1 forwards;
}
.svg-icon-show {
  display: inline;
  animation: showIcon 1s ease 0s 1 forwards;
}

@keyframes showIcon {
  from {
    background: rgb(241,243,244);
    background: linear-gradient(142deg, rgba(241,243,244,1) 0%, rgba(222,234,237,1) 30%, rgba(194,214,224,1) 100%);
  }
  to {
    background-color: transparent;
  }
}
@keyframes hideIcon {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: rgba(0,0,0,0.8);
}

.svg-icon circle {
  stroke: rgba(0,0,0,0.8);
  stroke-width: 0.1;
}

.svg-icon-moreOptions {
  width: 1.4vw;
  height: 2.8vh;  
  padding: 0.2em;
  border-radius: 50%;
  margin-left: 0.3em;    
  border: solid 2px #fff;
  box-shadow: 6px 6px 9px rgba(0,0,0,0.3), -6px -6px 9px rgba(255,255,255,0.5);
  stroke-width: 0.1;  
  stroke: rgba(0,0,0,0.8);  
  animation: makeButton 1s ease 0s 1 forwards;
}
.svg-icon-moreOptions text {
  display: inline !important;
  font-size: 1.2rem;
  stroke-width: 2;  
  stroke: rgba(0,0,0,0.8); 
}
.svg-icon-moreOptions path {
  display: none;
}
.svg-icon-moreOptions:hover {  
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3), -2px -2px 3px rgba(255,255,255,0.5);        
}
.svg-icon-moreOptions:active {
  box-shadow: inset 3px 3px 4px rgba(0,0,0,0.3), inset -3px -3px 4px rgba(255,255,255,0.3);
}
@keyframes makeButton {
  to {
    border-radius: 10px 10px 0 0;
    width: 5vw;   
    border: solid 2px rgb(241,243,244);
    background: rgb(241,243,244);
    background: linear-gradient(142deg, rgba(241,243,244,1) 0%, rgba(222,234,237,1) 30%, rgba(194,214,224,1) 100%);
  }
}
@keyframes toNormal {
  to {
    width: 1.4vw;    
    border-radius: 50%;
    background-color: transparent;
  }
}