.finder-directory-folder {
    position: fixed;
    /* width: 100%; */
    /* max-width: 1920px; */
    bottom: -580px;
    height: 600px;
    /* margin: 0 auto; */
    background: rgba(255,0,0,0);
    z-index: 200;
    text-align: left;
    user-select: none;
    left: 0px;
    right: 0px;
    transition: height 0.2s linear 0s;
    top:unset !important;
    bottom:0px !important;
}

.finder-directory-folder.show.ui-resizable-resizing{
    transition: height 0.0s linear 0s;
}

.finder-directory-folder.show {
    bottom:0px !important;
    
}


.finder-directory-folder.cancel {
    /*animation: minimizefolder 1s ease 1;*/
/*    top: calc(100% - 20px) !important;*/
    height:20px !important;
    bottom:0px !important;
}

.finder-folder {
    position: absolute;
    top: 0px;
    left: 2px;
    right: 2px;
    bottom: 1px;
    padding:10px;
    padding-right:0px;

}
.finder-folder:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: rgb(0 0 0 / 90%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
}
.finder-tab-container {
    position: absolute;
    top: -100px;
    left: 0px;
    display: inline-block;
    /* overflow: hidden; */
    background-color: rgba(255,0,0,0.0);
    height: 100px;
    padding: 6px;
    padding-bottom: 0px;
    z-index: 1;
    padding-left: 30px;
    padding-right: 30px;
    overflow-y: clip;
    overflow-x: visible;
}

.gradient-border-tab {
    --borderWidth: 3px;
    background: transparent;
    position: relative;
    border-radius: 10px;
    display: inline-block;
    z-index: 1;
    top: 55px;
    float:right;
    transition: top 0.15s linear 0s, opacity 10s linear 0s;
}

.gradient-border-tab.glow:after {
    content: '';
    position: absolute;
    top: -2px;
    left: -4px;
    /* height: calc(100% + var(--borderWidth) * 2); */
    /* width: calc(100% + var(--borderWidth) * 2); */
    background: linear-gradient( 
60deg
 , #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: 8px;
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
    right: -4px;
    bottom: 10px;
    filter: blur(8px);
    opacity:1;
}
.gradient-border-tab:hover {
    top:50px;
}
.gradient-border-tab.active {
    top:40px;
    z-index: 10;
}

.gradient-border-tab:hover .finder-tab-label{
color:#000;
}

.gradient-border-tab.active .finder-tab{
    z-index: 1;
    font-size: 18px;
    top: 0px;
    padding-top: 6px;
    background-color: #fff;
    height: 70px;
}

.finder-tab{
    position: relative;
    float: right;
    display: inline-block;
    height: 60px;
    background-color: #f5f5f5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    padding: 10px;
    padding-left: 16px;
    padding-right: 16px;
    top: 0px;
    padding-top: 7px;
    cursor: pointer;
    transition: top 0.15s linear 0s, color 0.15s linear 0s;
}








.gradient-border-tab.active .finder-tab:before{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 15px;
    height: 2px;
    background-color: rgba(0,0,0,0.0);
}
.finder-tab-label{
    margin: 0px;
    text-shadow: 0px 1px #fff;
    color: #777777;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .3px;
    font-family: 'fontsub3' !important;
    text-transformxx: uppercase;
    pointer-events: none;
    display: inline-block;
    transition: color 0.15s linear 0s;
    float: left;
    margin-left:4px;
    margin-right:4px;
    padding-right:2px;
}

.gradient-border-tab.active .finder-tab-label{
    font-size: 20px;
    padding-top: 7px;
    padding-left: 14px;
    padding-right: 3px;
    color:#000;
}
.finder-tab-counter{
    margin: 0px;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .3px;
    font-family: 'fontsub1' !important;
    padding:0px;
    border-radius:50px;
    background:#d64242;
    position:relative;
    display:inline-block;
    padding:5px 8px;
    line-height: 14px;
    top: -2px;
    text-shadow:1px 1px rgba(0,0,0,0.25);
    min-width: 24px;
    text-align: center;
}
.gradient-border-tab.active .finder-tab-counter{
top:6px;
}
.finder-tab-counter.tab-red {
    background-color:#d64242;
}
.finder-tab-counter.tab-blue {
    background-color:#579cbd;
}
.finder-tab-counter.tab-green {
    background-color:#63bd71;
}
.finder-tab-counter.tab-orange {
    background-color:#f2b361;
}
.finder-tab-counter.tab-grey {
    background-color:#a9a9a9;
}
.tab-counter-bounds{
    position:relative;
    display:block;
    float:left;
    height:40px;
}


@keyframes minimizefolder {
	0% {
		top: calc(0% - 20px) !important;
	}
	100% {
		top: calc(100% - 20px) !important;
	}
}


@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.finder-tab-seperator{
    position: absolute;
    bottom: 0px;
    left: 30px;
    right: 30px;
    height: 2px;
    background: rgba(0,0,0,0.99);
    z-index: 2;
}
.finder-tab-seperator:before {
    content:'';
    bottom:0px;
    left:-5000px;
    right:-5000px;
    height:2px;
    background:#c3c3c3;
    z-index:1;
    position:absolute;
}





         
         @-webkit-keyframes bounce { 
            0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
            40% {-webkit-transform: translateY(-20px);} 
            60% {-webkit-transform: translateY(-10px);} 
         } 
         
         @keyframes bounce { 
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
            40% {transform: translateY(-20px);} 
            60% {transform: translateY(-10px);} 
         }
         
         .bounce { 
/*            -webkit-animation-name: bounce; 
            animation-name: bounce; */
           /* -webkit-animation-duration: 1s;
            animation-duration: 1s; 
            -webkit-animation-fill-mode: both; 
            animation-fill-mode: both;*/
            
            -webkit-animation: bounce, bounce, bounce, bounce, bounce, bounce, bounce, bounce;
  -webkit-animation-delay: 1s,2s, 10s,11s, 20s,21s, 30s,31s;
  -webkit-animation-duration: 1s;
  
  animation: bounce, bounce, bounce, bounce, bounce, bounce, bounce, bounce;
  animation-delay: 1s,2s, 10s,11s, 20s,21s, 30s,31s;
  animation-duration: 1s;
         }

.finder-folder-images {
    position: relative;
    display: block;
    float: left;
    background: rgba(255,0,0,0.0);
    width: calc(70% - 6px);
    height: 100%;
    min-width: 35%;
    max-width: 99.8%;

    
}
.finder-folder-details {
    position:relative;
    
    background:rgba(0,255,0,0.0);
    height:100%;
    overflow:hidden;
}
.finder-folder-padder{
    position:relative;
    display:block;
    float:right;
    background:rgba(0,0,255,0.0);
    width:0px;
    height:100%;
    z-index: 2;
}
.finder-folder-ratio{
    position:relative;
    display:block;
    float:left;
    width:4px;
    height:100%;
    cursor: w-resize;
    z-index: 2;
    margin-left: -2px;
    background: linear-gradient(70deg, rgb(14, 190, 255), rgb(255, 221, 64), rgb(174, 99, 228), rgb(71, 207, 115));
    border-radius: 50px;
}
.finder-details-inner {
    width:100%;height:100%;position:relative;
    overflow-y: scroll;
    overflow-x: clip;
    margin: 0px;
    padding:30px;
    padding-top:0px;
}
.finder-placeholder-info {
    position: absolute;
    display: inline-block;
    text-align: left;
    /* margin: auto auto; */
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1.5px;
    font-family: 'titillium web' !important;
    margin: 0px;
    font-family: 'Press Start 2P', cursive;
    line-height: 22px;
    padding: 20px;
    max-width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* text-shadow: -1px -1px 0 #111111, 1px -1px 0 #111111, -1px 1px 0 #111111, 1px 1px 0 #111111; */
    /* color: #fff;*/
}


.finder-placeholder-info:before,
.finder-placeholder-info:after {
        content: "";
        position: absolute;
        width: 50px;
        height: 50px;
        border: solid #555;
        border-width: 1px 1px 0 0;
        display: block;
    }
    
    .finder-placeholder-info:before {
        right: 5px;
        top: 5px;
    }
    
    .finder-placeholder-info:after {
        border-width: 0 0 1px 1px;
        bottom: 5px;
        left: 5px;
    }

    .finder-image-browser {
        background-color: rgba(255,0,0,0.0);
    position: relative;
/*    outline: 1px solid green;*/
    display: block;
    overflow-y: scroll;
    overflow-x: clip;
    /* height: fit-content; */
    height: -webkit-fill-available;
    height: 100%;
    padding-top: 40px;

    }




    .details-image-preview {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        background: #fff;
        box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
        padding: 10px;
        border-radius: 12px;
        margin-top: -10px;
        margin-bottom: 0px;
        pointer-events: none;
        user-select: none;
    }


    .details-image {
        position: relative;
        width: 100%;
        height: auto;
        display: inline-block;
        border-radius: 9px;
        border: 1px solid rgba(0,0,0,0.25);
    }


    




    /*******************************
     * image carosel
     ******************************/
     .owl-nav button {
        position: absolute;
        top: 50%;
        background-color: #000;
        color: #fff;
        margin: 0;
        transition: all 0.3s ease-in-out;
      }
      .owl-nav button.owl-prev {
        left: 0;
      }
      .owl-nav button.owl-next {
        right: 0;
      }
      
      .owl-dots {
        text-align: center;
        padding-top: 15px;
      }
      .owl-dots button.owl-dot {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        background: #ccc;
        margin: 0 3px;
      }
      .owl-dots button.owl-dot.active {
        background-color: #000;
      }
      .owl-dots button.owl-dot:focus {
        outline: none;
      }
      .owl-nav button {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(255, 255, 255, 0.38) !important;
      }
      span {
          font-size: 70px;    
          position: relative;
          top: -5px;
      }
      .owl-nav button:focus {
          outline: none;
      }

      .owl-carousel .owl-item {
      box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    padding:10px;  
    }














 /*
 pulse ring
 */
 .blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: var(--ringBlob,#fff);
  border-radius: 50%;
}

.ring, .pulse {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: solid var(--ringBorder,#fff);;
}

.ring {
  border-width: 2px;
}

.pulse {
  transform: scale(1, 1);
  border-width: 1px;
}
.pulse.pulse--1 {
  -webkit-animation: PULSE infinite;
          animation: PULSE infinite;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.pulse.pulse--2 {
  -webkit-animation: PULSE infinite;
          animation: PULSE infinite;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 0.6666666667s;
          animation-delay: 0.6666666667s;
}
.pulse.pulse--3 {
  -webkit-animation: PULSE infinite;
          animation: PULSE infinite;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1.3333333333s;
          animation-delay: 1.3333333333s;
}

@-webkit-keyframes PULSE {
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes PULSE {
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
/*
<div class="blob">
    <div class="ring"></div>
    <div class="pulse pulse--1"></div>
    <div class="pulse pulse--2"></div>
    <div class="pulse pulse--3"></div>
  </div>
*/






























































/**********************************************
 *  NOTIFICATION TOASTER
 **********************************************/


#notification-feed-container {
    position: relative;
    /* bottom: 200px; */
    left: 20px;
    left: calc(100% - 600px);
    width: 600px;
    height: 100px;
    max-height: 100px;
    background: rgba(255,0,0,0.0);
    /* display: inline-block; */
    top: -120px;
    overflow: visible;
    z-index: -1;
    user-select: none;
    pointer-events:none;
}

.user-avatar .gradient-text {





  /* Fallback: Set a background color. */
  background-color: #CA4246;
  
  /* Create the gradient. */
  /* background-image: linear-gradient(
        45deg,
        #CA4246 16.666%, 
        #E16541 16.666%, 
        #E16541 33.333%, 
        #F18F43 33.333%, 
        #F18F43 50%, 
        #8B9862 50%, 
        #8B9862 66.666%, 
        #476098 66.666%, 
        #476098 83.333%, 
        #A7489B 83.333%);
  */
        background-image: linear-gradient(90deg, #30ff90 0%, #ed2ded 25%, #c99826 50%, #30ffe6 75%, #30ff90 100%);

  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  
  /* Animate the text when loading the element. */
    /* This animates it on page load and when hovering out. */
    animation: rainbow-text-simple-animation-rev 0.75s ease forwards;

}

.gradient-text {
    font-family: "Archivo Black", sans-serif;
  font-weight: normal;
  font-size: 6em;
  text-align: center;
  margin-bottom: 0;
  margin-bottom: -0.25em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  width: 605px;
  font-family: mallory, futura, arial black, sans-serif;
    font-size: 40px;
    font-weight: 800;
}

.user-avatar .gradient-text:hover{
    animation: rainbow-text-simple-animation 0.5s ease-in forwards;
}


/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-simple-animation-rev {
    0% {
        background-size: 650%;
    }
    40% {
        background-size: 650%;
    }
    100% {
        background-size: 100%;
    }
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-simple-animation {
    0% {
        background-size: 100%;
    }
    80% {
        background-size: 650%;
    }
    100% {
        background-size: 650%;
    }
}




.js-snackbar {
    display: inline-flex !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
    color: unset !important;
    font-size: unset !important;
    background-color: unset !important;
    vertical-align: bottom !important;
    box-shadow: none !important;
    margin: 0px !important;
    flex-grow: 1;

}

.js-snackbar__message-wrapper {
    padding: 12px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-bottom: 14px !important;
    padding-top: 1px !important;
    
}

.js-snackbar__wrapper {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    
    overflow:visible !important;
}


.notification-itemxx {
    position:relative;
    display:block;
    width:400px;
    min-height:54px;
    border-radius: 5px;
    margin-bottom:24px;
    position:absolute;
    bottom:-74px;
    left:0px;
    opacity:0;
    max-height:54px;
}


.notification-item {
    position:relative;
    display:block;
    /*width:400px;*/
    min-height:54px;
    max-height:54px;
    border-radius: 5px;
    opacity:1;
    margin:0px;
}


.notification-item .nav-glass {
    position:relative;
    display:inline-block;
    /*width:400px;*/
    min-height:54px;
    left:unset;
    top:unset;
    right:unset;
    bottom:unset;
    padding:6px;
    background: linear-gradient( 
0deg
 ,transparent 0%,rgba(200,200,200,0.65) 12%,rgba(255,255,255,0.75));
display:flex;
border-radius: 5px;
box-shadow: rgb(0 0 0 / 20%) 0px 4px 4px, rgb(0 0 0 / 20%) 0px 10px 10px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
padding-bottom: 0px;
padding-top: 7px;
padding-right:6px;
}

.user-avatar.peer {
    width:40px;height:40px;
    display:inline-block;
    margin-left:2px;
}

.user-avatar.peer .iconDiv{
    width: 40px;
    height: 40px;
    font-size: 26px;
    line-height: 33px;
    overflow: visible;
    letter-spacing: -0.5px;
}

.notification-item .seperator-gradient-wrapper {
    bottom: 0px;
    height:5px;
    opacity:1;
animation:none;
bottom: -6px;
    height: 5px;
    opacity: 1;
    animation: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
    left:0px;right:0px;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.notification-item .seperator-gradient {
    background: var(--usercolor);
    z-index: -1;
    height:5px;
}

.notification-item .seperator-gradient-wrapper .seperator-gradient:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0px;
  right: 2px;
  bottom: 0px;
  z-index: 0;
    background-image: linear-gradient(to right, #30ff90 0%, #ed2ded 25%, #c99826 50%, #30ffe6 75%, #30ff90 100%);
    background-image: linear-gradient(to right, transparent 0%, #FFFFFF 25%, transparent 50%, #FFFFFF 75%, transparent 100%);
    animation: move 7s infinite linear;
}

@keyframes move {
  from {background-position: -3000px 10px;}
    to {background-position: 0px 10px;}
}


.peer-displayname-label {
    margin: 0px;
    text-shadow: 0px 1px rgb(255 255 255 / 65%);
    color: #595959;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .3px;
    font-family: 'fontsub3' !important;
    pointer-events: none;
    display: block;
    margin-left: 6px;
    margin-right: 4px;
    padding-right: 2px;
    margin-bottom:3px;
}

.notification-content{
    position:relative;
    display:inline-block;
    background:rgba(255,0,0,0);
    padding: 0px 4px;
    max-width:320px;
    z-index: 1;
    padding-top:1px;
    vertical-align: top;
}


.peer-displayfile-label{
    margin: 0px;
    text-shadow: 0px 1px rgb(255 255 255 / 65%);
    color: #595959;
    font-weight: 500;

    letter-spacing: 0px;
    font-family: 'fontsub3' !important;
    text-transformxx: uppercase;
    pointer-events: none;
    display: inline-block;
    float: left;
    margin-left: 6px;
    margin-right: 4px;
    padding-right: 2px;



    font-size: 12px;
    max-width: 320px;
    /* background: green; */
    word-break: break-all;
    line-height:10px;
}

.peer-action-tag{
    background-color: #1098ad;
    color: rgba(255,255,255,0.95);
    border-radius: 25px;
    text-shadow: 0px -1px rgb(0 0 0 / 80%);
    padding: 0px 8px;
    font-size: 12px;
    /* border: 1px solid rgba(255,255,255,0.65); */
    /* box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px; */
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 10%) 0px 2px 8px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    top: -2px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}


.peer-action-tag.tag-liked {
    background-color: #9565b3;
}
.peer-action-tag.tag-downvoted {
    background-color: #d66d6d;
}
.peer-action-tag.tag-approved {
    background-color: #63bd71;
}
.peer-action-tag.tag-uploaded {
    background-color: #1098ad;
}
.peer-action-tag.tag-noted {
    background-color: #e6a400;
}
.peer-action-tag.tag-connected {
    background-color: #7bcb82;
}

.peer-notification-image {
    position: absolute;
    width: 380px;
    height: 70px;
    top: 2px;
    right: 4px;
    /* background-color: pink; */
    overflow: hidden;

    z-index: 0;
    -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
}


.peer-notification-imagexxx:before {
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-image: url(https://derpling.io/uploads/7a49ba234345/1000_f_215554884_wapxooyssvuckdcbqtpznunimz5mnoj9--982d4378-d18f-4c1a-bc9d-adcc1796b89e.jpg);
    background-size: 50%;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: -1;
}

.peer-notification-image .peer-img {
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-image: url(https://derpling.io/uploads/7a49ba234345/1000_f_215554884_wapxooyssvuckdcbqtpznunimz5mnoj9--982d4378-d18f-4c1a-bc9d-adcc1796b89e.jpg);
    background-size: 50%;
    background-position: center right;
    background-repeat: no-repeat;
}







/**********************************************
 *  DEFAULT GLASS EFFECT as PARENT
 **********************************************/
.effect-glass {
   position: absolute;
   top: 0px;
   left: 0px;
   right:0px;
   bottom:0px;
   height: 60px;
   display: inline-block;
   padding: 0px;
   background-color: rgb(255 255 255 / 50%);
   background-image: url(whiteNoise2.png);
   background-size: 55px 55px;
   background-repeat: repeat-x;
   border-radius: 0px;
   z-index: 999999999;
   margin: 0;
   color: #fff;
   transform-style: preserve-3d;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 4px, rgba(0, 0, 0, 0.2) 0px 17px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }

 /* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .effect-glass {
        background-image:none;
      background-color: rgb(255 255 255 / 50%);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);

    }
  }
/**********************************************
 *  DEFAULT GLASS EFFECT as ::BEFORE
 **********************************************/
 .effect-glass-before:before {
     content:'';
   position: absolute;
   top: 0px;
   left: 0px;
   right:0px;
   bottom:0px;
   height: 74px;
   display: inline-block;
   padding: 0px;
   background-color: rgb(255 255 255 / 50%);
   background-image: url(whiteNoise2.png);
   background-size: 55px 55px;
   background-repeat: repeat-x;
   border-radius: 0px;
   z-index: -1;
   margin: 0;
   color: #fff;
   transform-style: preserve-3d;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 4px, rgba(0, 0, 0, 0.2) 0px 17px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }

 /* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .effect-glass-before:before {
        background-image:none;
      background-color: rgb(255 255 255 / 50%);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);

    }
  }




  .notification-item .effect-glass-before {
    position:relative;
    display:block;
    width:400px;
    height:74px;
    left:unset;
    top:unset;
    right:unset;
    bottom:unset;
    padding:6px;
    background: linear-gradient(
0deg
,transparent 0%,rgba(255,255,255,0.45) 16%,rgba(255,255,255,0.5));
display:flex;
border-radius: 5px;
z-index: 0;
}


:root {
    --cp-color-blue-hsl: 196.1825726141deg 100% 52.7450980392%;
    --cp-color-blue: hsl(var(--cp-color-blue-hsl));
}

.codepen {
    background: linear-gradient(70deg,var(--cp-color-blue),var(--cp-color-yellow),var(--cp-color-purple),var(--cp-color-green));
    background: linear-gradient(70deg, rgb(14, 190, 255), rgb(255, 221, 64), rgb(174, 99, 228), rgb(71, 207, 115))
}

.codepen {
    background: linear-gradient(70deg,var(--cp-color-blue),var(--cp-color-yellow),var(--cp-color-purple),var(--cp-color-green));
    background: linear-gradient(70deg, rgb(14, 190, 255), rgb(255, 221, 64), rgb(174, 99, 228), rgb(71, 207, 115))
}


































.finder-browser-wrapper{
	display:block;
position:relative;
overflow-y: scroll;
    overflow-x: clip;
    height:100%;
    padding:20px;
}






.finder-browser-wrapper .masonry-mosaic {
    columns: 6 200px;
    columns: 4 300px;
    column-gap: 1rem;
    column-gap: 0rem;
    display: inline-block;
    counter-reset: item;
  }
  .finder-browser-wrapper .masonry-mosaic .findr-img {
    width: 150px;
    background-color: #FFFFFF;
    color: white;
    margin: 0 1rem 1rem 0;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: system-ui;
    font-weight: 900;
    font-size: 2rem;
    font-size:0px;
    z-index: 0;
    transition: all 0.25s linear;
    position: relative;
    padding:10px;
    margin:0px;
    border-radius:10px;
    counter-increment: item;
    cursor:pointer;
  }

  .finder-browser-wrapper .masonry-mosaic .findr-img img{
width:100%;
 
border-radius:7px;
}

.finder-browser-wrapper .masonry-mosaic .findr-img:hover {
transform:scale(1.075);
z-index: 2;
box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
box-shadow: rgb(0 0 0 / 40%) 0px 0px 6px, rgb(0 0 0 / 50%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
border-radius:10px;
transition: all 0.25s linear;
}

.finder-browser-wrapper .masonry-mosaic .findr-img:hover img{
    -webkit-filter: contrast(1.4) brightness(0.9) sepia(0.05);
    filter: contrast(1.4) brightness(0.9) sepia(0.05);
}

/*.finder-browser-wrapper .masonry-mosaic .findr-img:hover:before {*/
.finder-browser-wrapper .masonry-mosaic .findr-img:before {
content:'';
position:absolute;
top:62px;left:62px;right:62px;bottom:62px;
/*box-shadow:  rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
*/
/*box-shadow: rgba(0,255,255,1) 0px 0px 3px;*/
z-index: 2;
border-radius:0px;
background-color: rgba(255,255,255,0.15);
transition: all 0.25s linear;
opacity:0;
}

.finder-browser-wrapper .masonry-mosaic .findr-img:hover:before {
    content:'';
    position:absolute;
    top:40px;left:40px;right:40px;bottom:40px;
    /*box-shadow:  rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    */
    /*box-shadow: rgba(0,255,255,1) 0px 0px 3px;*/
    z-index: 2;
    border-radius:0px;
    background-color: rgba(255,255,255,0.15);
    opacity:1;
    }


.finder-browser-wrapper .masonry-mosaic .findr-img:after {
    content:'';
position:absolute;
top:20px;left:20px;right:20px;bottom:20px;
    margin: 0rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    -webkit-clip-path: polygon(0 calc(100% - 1rem), 0 100%, 1rem 100%, 1rem 0, 0 0, 0 1rem, 100% 1rem, 100% 0, calc(100% - 1rem) 0, calc(100% - 1rem) 100%, 100% 100%, 100% calc(100% - 1rem));
            clip-path: polygon(0 calc(100% - 1rem), 0 100%, 1rem 100%, 1rem 0, 0 0, 0 1rem, 100% 1rem, 100% 0, calc(100% - 1rem) 0, calc(100% - 1rem) 100%, 100% 100%, 100% calc(100% - 1rem));
            transition: all 0.25s linear;
  }


  .finder-browser-wrapper .masonry-mosaic .findr-img:hover:after {
    content:'';
position:absolute;
top:30px;left:30px;right:30px;bottom:30px;
    margin: 0rem;
    border: 2px solid rgba(255, 255, 255, 0.99);
    -webkit-clip-path: polygon(0 calc(100% - 1.4rem), 0 100%, 1.4rem 100%, 1.4rem 0, 0 0, 0 1.4rem, 100% 1.4rem, 100% 0, calc(100% - 1.4rem) 0, calc(100% - 1.4rem) 100%, 100% 100%, 100% calc(100% - 1.4rem));
            clip-path: polygon(0 calc(100% - 1.4rem), 0 100%, 1.4rem 100%, 1.4rem 0, 0 0, 0 1.4rem, 100% 1.4rem, 100% 0, calc(100% - 1.4rem) 0, calc(100% - 1.4rem) 100%, 100% 100%, 100% calc(100% - 1.4rem));
  }


.finder-browser-wrapperxxx .masonry-mosaic .findr-img::after {
    /*content: counter(item);*/
    content: "" attr(image-top) "";
    display: block;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(115deg, #fc00ff, #00dbde);
    font-weight: 700;
    font-size: clamp(1.2rem, 2rem + 2vw, 3rem);
  }







  .pricing-pplan {
    --gradLeft: 0px;
    position: absolute;
    width: 300px;
    height: 500px;
    background: #fff;
    bottom: 300px;
    border-radius: 20px;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    z-index: 0;
  }

  .pricing-header {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.0);
     -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255 255 255);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1);
    box-shadow: inset 0px 0px 0px 2px rgb(255 255 255);



  }


    .pricing-header:before {
        content: '';
        position: absolute;
        width: 600px;
        height: 20px;
        top: 0px;
        left: var(--gradLeft, 0px);
        background-image: linear-gradient(70deg, rgb(14, 190, 255), rgb(255, 221, 64), rgb(174, 99, 228), rgb(71, 207, 115));
        background-image: linear-gradient(70deg, rgb(14, 190, 255),rgb(174, 99, 228), rgb(0, 0, 0));
        z-index: -1;


  }

  




























  /********************************
   * image preview tabs
   ********************************/
   @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
   :root {
     --primary-color: #185ee0;
     --secondary-color: #e6eef9;
   }
.finder-details-container {
    font-family: "Inter", sans-serif;
    position: sticky;
    left: 0;
    top: 0;
    right: 0;
    
    display: flex;
    align-items: center;
    justify-content: right;
    z-index:1;
    font-family: 'fontsub3' !important;
    text-transform: uppercase;
    background-color: #fff;
    padding-bottom:10px;
    margin-bottom:20px;
}

.finder-details-container:before{
    content:'';
    position:absolute;
    top:0px;bottom:0px;
    left:-30px;
    right:-30px;
    background-color:#fff;
}

.finder-details-container.shadowdrop:after{
    content:'';
    position:absolute;
    top:0px;bottom:0px;
    left:-30px;
    right:-30px;
    background-color:#fff;
    z-index: -1;
    box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
  
  .finder-details-tabs {
    display: flex;
    position: relative;
/*    background-color: #fff;
    box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
    padding: 0.75rem;
    border-radius: 99px;
*/  
}
  .finder-details-tabs * {
    z-index: 2;
  }
  
.finder-details-container input[type=radio] {
    display: none;
  }
  
  .finder-details-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 110px;
    font-size: 0.80rem;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color 0.15s ease-in;
  }
  
  .finder-details-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-left: 0.45rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    transition: 0.15s ease-in;
    font-size:0.7rem;
  }
  
  .finder-details-container input[type=radio]:checked + label {
    color: var(--primary-color);
  }


  .finder-details-container input[id=radio-1]:checked + label {
    color: #fff;
    color:#000;
  }
  .finder-details-container input[id=radio-2]:checked + label {
    color: #371010;
    color: rgba(255,255,255,1);
    text-shadow: 0px -1.5px rgb(0 0 0 / 35%);
  }
  .finder-details-container input[id=radio-3]:checked + label {
    color: #275d2f;
    color: rgba(255,255,255,1);
    text-shadow: 0px -1.5px rgb(0 0 0 / 35%);

  }


  .finder-details-container input[type=radio]:checked + label > .finder-details-notification {
    background-color: #56a4cb;
    color: #fff;
  }
  
  .finder-details-container input[id=radio-1]:checked ~ .finder-details-glider {
    transform: translateX(0);
    background-color:#f0f0f0;
  }
  
  .finder-details-container input[id=radio-2]:checked ~ .finder-details-glider {
    transform: translateX(100%);
    background-color: #d57070;
  }
  
  .finder-details-container input[id=radio-3]:checked ~ .finder-details-glider {
    transform: translateX(200%);
    
    background-color:#93d29d;
    background-color:#63bd71;
  }
  
  .finder-details-glider {
    position: absolute;
    display: flex;
    height: 36px;
    width: 110px;
    background-color: var(--secondary-color);
    z-index: 1;
    border-radius: 99px;
    transition: 0.25s ease-out;
    box-shadow: rgb(0 0 0 / 30%) 0px 2px 3px, rgb(0 0 0 / 0%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;

  }


  .finder-details-stats{
      position:absolute;
      top:0px;left:0px;
      bottom:0px;display:inline-block;

  }

  .finder-details-stats .details-label{
    margin: 0px;
    color: #000;
    margin-left: 8px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .7px;
    text-transform: none;
    margin-top: -2px;
    /* font-family: "Inter", sans-serif; */
    font-family: 'fontsub1' !important;
  }

  .finder-details-stats .details-label.user{
  font-size:12px;
  margin-bottom:1px;
}
.finder-details-stats .details-label.age{
    font-weight: bold;
    color:#138ebd;
}















 /********************************
   * comment system
   ********************************/
   @import url(&quot;https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&amp;display=swap&quot;);
:root {
    --c-grey-100: #f4f6f8;
    --c-grey-200: #e3e3e3;
    --c-grey-300: #b2b2b2;
    --c-grey-400: #7b7b7b;
    --c-grey-500: #3d3d3d;
    --c-blue-500: #688afd;
}

.finder-notes-container {
    position:relative;
    width:100%;
    display:inline-block;
    min-height:150px;
    background:rgba(255,0,0,0.0);
    font-family: "Outfit", sans-serif;
}


.finder-notes-container ol.timeline {
    list-style: none;
    width: 85%;
/*    max-width: 700px;*/
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    padding: 32px 0 32px 32px;
    border-left: 2px solid #ccc;
    font-size: 1.125rem;
}

.timeline-item {
    display: flex;
    gap: 24px;
}

.timeline-item + .extra-space {
    margin-top: 48px;
}

.timeline-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* border-radius: 50%; */
    margin-left: -54px;
    flex-shrink: 0;
    /* overflow: hidden; */
    box-shadow: 0 0 0 6px #ffffff;
    margin-top:2px;
}

.new-comment {
    width: 100%;
}

.new-comment input {
    border: 1px solid #ccc;
    border-radius: 6px;
    height: 48px;
    padding: 0 16px;
    width: 100%;
}


.timeline-item-description {
    display: flex;
    padding-top: 6px;
    gap: 8px;
    color: var(--c-grey-400);
}

.timeline-item-description p{
    margin:0px;

}

.timeline-item-description p span.peer{
    font-weight:bold;
    color:#555;

}

.comment {
    margin-top: 12px;
    color: var(--c-grey-500);
    border: 1px solid var(--c-grey-200);
    box-shadow: 0 4px 4px 0 var(--c-grey-100);
    border-radius: 6px;
    padding: 16px;
    font-size: 1rem;
}

.comment p {
    margin:0px;
    line-height:24px;
}













.finder-image-palette {
position: relative;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    padding: 10px;
    border-radius: 12px;
    width:100%;
    margin-top:20px;
}

.finder-palette-cardxxx {
    position:relative;
    width:12.5%;
    height:100px;
    display:inline-block;
    box-shadow:inset 0px 0px 2px black;
}

.finder-image-palette .inner {
    position: relative;
    width:100%;
    display:inline-block;
}



.finder-palette-block{
    /*display: flex;*/
    margin-top:12px;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    border-radius:12px;
    column-count: 8;
    padding: 10px;
    column-gap: 6px;
}


.finder-palette-card {
        /*width: 100px;
        width:12%;*/
        height: 170px;
        height: unset;
        background: transparent;
        border-radius: 10px;
        padding: 0px;
        /*float: left;*/
        user-select: none;
        position: relative;
        /*box-shadow: rgb(0 0 0 / 35%) 0px 2px 4px, rgb(0 0 0 / 10%) 0px 7px 13px -3px, rgb(0 0 0 / 15%) 0px -2px 0px inset;*/
}

.finder-palette-card .swatch {
position: relative;
    width: 100%;
    /* height: 128px; */
    height: 0px;
    background: red;
    border-radius: 3px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding-bottom: 100%;
    border-radius:6px;
}

.finder-palette-card .swatch .swatch-text {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    margin-top: 2px;
    margin-bottom: 0px;
    font-weight: 300;
    letter-spacing: 1.25;
    /* font-family: 'fontsub1' !important; */
    color: #fff;
    display: inline-block;
    bottom: 0px;
    text-transform: uppercase;
    padding: 2px 5px;
    line-height: 20px;
    position: absolute;
}


.finder-palette-card .palette-color-label {
    position: relative;
    width: 100%;
    display: inline-block;
    padding-left: 2px;
    overflow: hidden;
}

.finder-palette-card .palette-color-label .palette-color-name {
    font-family: 'Raleway', sans-serif;
    /* font-size: 16px; */
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: 0px;
    font-weight: 500;
    letter-spacing: .25px;
    font-family: 'fontsub1' !important;
    white-space: nowrap;
}

.finder-palette-card .palette-color-label .palette-color-hex {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .3px;
    font-family: 'fontsub3' !important;
    margin: 0px;
    margin-top: -1px;
    margin-bottom:-2px;
    pointer-events: all;
    user-select: all;
}

.details-image-detection{
    position: relative;
    width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 9px;
    border: 1px solid rgba(0,0,0,0.25);
}