.ui-rotatable-handle {
    height: 16px;
    width: 16px;
    cursor: pointer;
    background-image: url(../ico_rotate.png);
    background-size: 100%;
    left: 2px;
    bottom: 2px;
}
		.picker {
			border-radius: 5px;
			width: 36px;
			height: 36px;
			cursor: pointer;
			-webkit-transition: all linear .2s;
			-moz-transition: all linear .2s;
			-ms-transition: all linear .2s;
			-o-transition: all linear .2s;
			transition: all linear .2s;
			border: thin solid #eee;
   width: 40%:
    height: 54px;
		}
		.picker:hover {
			transform: scale(1.1);
		}
 
.stackcontainer {
margin: 20px 0 10px 0;
}
  

#demo3 > div.inner {
background: lightyellow;
}
#demo1 h4, #demo3 h4 {
margin: 0;
}

  .nailitleft,  .nailitright {
     display:none; 
     }
     
     
 body {
  overflow:scroll;
  overflow-x:hidden;
  overflow-y:hidden;
  padding:25px;
 }
 
  #capture {
   width:600px;
   height:440px;
   position: relative;
 

 
   background-size:cover !important;
   
    
  }
  canvas {
   display:none;
  }
 #capture .watermark {
  
  height:60px;
  width:60px;
  position:absolute;
  bottom:20px;
  right:25px;
  background: url('../../cropped-2024winter_decalstamp_ficon4.png');
  background-repeat:no-repeat;
  background-size:cover;
  z-index:9000;
  filter:grayscale(1);
  opacity:0.2;
 }
 
 #capture-rawphotoarchive {
width: 100%;
height: 100%;
  z-index:8500;
  position:absolute;
    background:white;
        background-size: cover !important;
     /*    box-sizing: border-box;
         border:1px solid black; */
}



 #capture-vingette {
  width: 601px;
height: 442px;
 
  background:url('../dpa-vignette-3.png');
    position:absolute; z-index:8541;
    
    background-size:cover;
    pointer-events:none;
    display:none;
  }
  
.dp-punview-container {
 position: relative;
 left:-1px;
 top:-1px;
 
 
}
#capture-puncontent {
 
font-size:40px;
color:white;
text-shadow: #FC0 1px 0 10px;
  z-index:8550;
  text-align: center;
  font-family:arial;
  font-weight:bold;
 display:inline-block;
  padding:10px;
  cursor: pointer;
  position:absolute;
  border : 0px solid black; ;
}



#capture-puncontent:hover {
   border : 2px solid red; ;
}

#capture-decale {
 
font-size:40px;
color:white;
 
  z-index:8540;
 
  cursor: pointer;
  position:absolute;
 left: 28px;
    top: 235px;
          width:100px;
          display:none;
}

  .pngdecale {
          
        
         }
           .pngdecale img {
            width:100%;
            border :0px solid red;
            
           }
              .pngdecale img:hover {
                 border :2px solid red;
              }
 .imgcase:hover {
  
  width:100%;
  height:100%;

  left:0px;
  right:0px;
 }
 
 .imgcase {
    width:100%;
  height:100%;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
 }
 
 .dpphoto-info {
  display:none;
  
 }
 .dpphoto-dateadded {
  
    display:none;
 }
 
 /* toolbox */
 #fontstyle-tools {
     position: absolute;
     right: 37px;
    top: 45px;
    
    width: 17vw;
    background: #d5d5d5;
    padding: 15px;
    color: white;
    font-size: 10px;
    z-index: 9900;
    border-radius: 25px;
    /* -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.40); */
    /* box-shadow: 3px 0px 5px 5px rgb(151 151 151 / 40%); */
    border-radius: 5px;
    text-align: right;
    padding-top: 10px;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgb(255 255 255 / 35%) 15%, rgb(231 231 231 / 79%) 47%, rgb(249 249 249 / 54%) 78%);
 
    border: 1px solid white;
   
    top: 27px;
 }
 
 #fontstyle-tools h2{
  font-size:13px;
  font-weight:bold;
  margin:10px;
  color:#4a4a4a;
 }
 .color-container {
  position: relative;
  width: 100%;
  margin-top:25px;
  
    display: inline-flex;
 }
 .fs-tools-tleft {
width: 50%;
  text-align: left;
 }
 .fs-tools-tright {
  width: 50%;
  text-align: right;
  
 }
 .ui-widget-content {
  background:none;
  border :1px solid rgba(0,0,0,0.5);
 }
.font-select  {
     text-align: right;
    padding: 6px;
    border-radius: 4px;
    font-size: 15px;
    color: #585555;
    border: 1px solid #8e8e8e;
        width: 100%;
 
}



 body {
  font-family:'Inter';
 }
 .dp-assembly-container {
  width:100vw;
  height:100vh;
 padding-top:25px;
  padding: 5px;
  display: inline-flex;
 }
 .windowslideA {
   
  width:25vw;
  height: 100%;
 }
 
 .windowslideA img {
    height: 19px;
    filter: invert(1);
    position: relative;
    left: -46px;
    top: 5px;
    opacity: 0.2;
 }
 
  .windowslideB {
    padding-left: 25px;
    width: 70vw;
    height: 100%;
    position: relative;
    top: -30px;
  
 }
 p {
  font-size:12px;
  font-weight:normal;
  
 }
 h1 {
  font-size:25pt;
  color:#000;
  margin:5px;
  
 }
 
 .title-spacer {
  margin-left:0px;
 
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-weight: bold;
    color:#cfcfcf;
 }
 p{
  margin-left:10px;
 }
 
 h2{
  
  margin-bottom:10px;
  margin-top:30px;
 }
 
 h{
  
  
 }
 
 #take_screenshoot {
 background: #fe1c2a;
    padding: 16px;
    width: 241px;
    border-radius: 5px;
    text-align: center;
    color:white;
    font-weight:bold;
    border:2px solid white;
    cursor: pointer;
     transition: all 0.2s ease;
  display:none;
 }
  #take_screenshoot:hover {
   background:black;
   border:2px solid  #fe1c2a;;
     color: white;
   
  }
  
  
 .member_benefits {
 
    padding: 16px;
    width: 241px;
    border-radius: 5px;
    text-align: center;
    color:white;
    font-weight:bold;
    border:2px solid white;
    cursor: pointer;
     transition: all 0.2s ease;
   
     background:black;
   border:2px solid  #black;
     color: white;
     
   
 }
 
  .member_benefits:hover {
  background: #fe1c2a;
   border:2px solid  #fe1c2a;;
     color: white;
   
  }
  
  
   #download_this {
 background: #fe1c2a;
    padding: 16px;
    width: 241px;
     border-radius: 5px;
    text-align: center;
    color:white;
    font-weight:bold;
    border:2px solid white;
    cursor: pointer;
     transition: all 0.2s ease;
   
 }
  
    #download_this:hover {
   background:black;
   border:2px solid  #fe1c2a;;
     color: white;
   
  }
 .vault_return {
  
    border:1px solid #d2d2d2;
    border-bottom-left-radius:25px;
    border-bottom-right-radius:25px;
    
  
   border: 1px solid #d2d2d2;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background: white;
    font-size: 14px;
    color: black;
    padding: 10px;
    padding-left: 15px;
    width: 79%;
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    height: 220px;
    position: relative;
    z-index: 9999;
 }
 
 .apun {
  padding:5px;
  margin-bottom:5px;
  border-bottom:1px  #d1d1d1;
  cursor: pointer;
 }
 .apun:hover  {
  background: #000000;
    color: #d94040;
    border: 1px solid #c4bfbf;
    font-weight: bold;
    opacity: 0.8;
 }
 .apun:hover::before  {
  content :'☞   ';

 }
 .dp-index  {
       border: 2px solid #585858;
    border-radius:5px;
   background:white;
   font-size:16px;
   color:black;
   padding:10px;
   padding-left:15px;
   width:80%;
    text-align: left;
  text-align: left;
       border-bottom-left-radius: 0;
           border-bottom-right-radius: 0;
 }
 
 
 
 .dp-index2  {
   text-align: left;
    border-radius:5px;
    background:white;
      font-size:15px;
   color:black;
   padding:10px;
    padding-left:15px;
     width:100%;
 
         border: 2px solid #585858;
      
 }
 .dp-index3  {
  
     border-radius:5px;
    background:white;
      font-size:15px;
   color:black;
   padding:10px;
    padding-left:15px;
     width:100%;
     text-align: center;
         border: 2px solid #585858;
      margin-top:87px;
          text-align: left;
     
 }
 
 .photonavigation {
width: 207px;
    position: absolute;
    text-align: center;
    z-index: 9500;
    top: 525px;
    left: 76px;
 }
 .photonavigation-text {
  
  
 }
  .photoleft  img, .photoright  img  {
   
  
  }
 .photoleft {
    position: absolute;
    left: -40px;
    top: -250px;
 }
 .photoright {
   position:absolute;
    right: -60px;
   top:-250px;
 }
 

 div.stackcontainer {
    width: 250px;
    height: 200px;
    border: 1px solid white;
 }
 .windowslideA p {
  font-size:14px;
  
 }
 .pass-num {
  
  font-size:13px;
 }
.dp-search-bg-container {
 
        position: absolute;
    text-align: center;
    width: 313px;
    position: fixed;
    left: 37px;
    bottom: 75px;
    display: inline-flex;
    justify-content: center;
    z-index: 9500;
    top: 208px;
 }
 .dp-search {
  
  width:100%;
  

 }
 .helpfullinfo{
  position: absolute;
    bottom: 106px;
    width: 320px;
    font-size: 13px;
 }
 .faw-functions {
  
  
      position: fixed;
    bottom: 65px;
    right: 41px;
    z-index: 9600;
 
    bottom: 73px;
 
 }
 
  .pun-container {
            border-top-left-radius: 15px;
             border-top-left-radius: 15px;
  width:390px;
 
       position: fixed;   
       }
         
         .vault_return {
          display:none;
         }
         
           .dpa-functions {
            
    display: inline-flex;
    align-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    text-align: center;
    right: 0px;
    width: 100%;
    display: inline-flex;
    z-index:9999;
    border: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 5px;
    /* padding-right: 20vw; */
    /* padding-left: 28vw; */
    flex-direction: row;
    justify-content: center;
    
           }
             .dpa-functions div{
              margin-left:2px;
             }
            .dpa-functions img{
            height:42px;
             }  
         .reset {
          
       
          
          z-index:7000;
        
     
          cursor: pointer;
         }
           .reset img{
          
            transition: all linear .1s;
           }
             .reset img:hover{
         transform: scale(1.2, 1.2);
           }
           
         .toggledecale {
          
       
          z-index:7000;
          color:black;
          font-size:14px;
          font-family:'Inter';
          font-weight:bold;
          cursor: pointer; 
           transition: all linear .1s;
         }
         .toggledecale:hover {
                  transform: scale(0.9, 0.9);
         }
          .toggledecale img, .invertvingette img {
         
          }
            .vingetteorder {
     z-index:7000;
          color:black;
          font-size:14px;
          font-family:'Inter';
          font-weight:bold;
          cursor: pointer; ;
            transition: all linear .1s;
         }
           .vingetteorder:hover {
           transform: scale(0.9, 0.9);
           
           }
         .vingetteorder img{
      
         }
         .togglevingette {
          
         
        
       
          z-index:7000;
          color:black;
          font-size:14px;
          font-family:'Inter';
          font-weight:bold;
          cursor: pointer; ;
          
         }
          .dogtags{
          
         
         
          z-index:7000;
          color:black;
          font-size:14px;
          font-family:'Inter';
          font-weight:bold;
          cursor: pointer; ;
          
         }
            .dogtags:hover {
              transform: scale(1.1, 1.2);
            }
              .dogtags img {
               transition: all linear .1s;
          
              }
         .togglevingette img {
         transition: all linear .1s;
          
         }
        .togglevingette img:hover{
         transform: scale(1.2, 1.2);
           }
           
           .acustompun {
             transition: all linear .1s;
            cursor: pointer;
            color:Black;
           }
             .acustompun:hover {
               transform: scale(1.2, 1.2);
                   transform:rotate(45deg);
            cursor: pointer;
           }
           
            .ui-tooltip {
             
    padding: 10px 20px;
    color:#fefefe;
    background: #0e0e0e;
    border : 1px solid black;
    border-radius: 5px;
    font: bold 13px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 1px black;
    width:200px;
    text-align: center;
    z-index:9999999;
  }
  
  
  /* Color picker */
  .colorPickSelector {
  border-radius:5px;

  cursor:pointer;

  -webkit-transition:all linear .2s;
  -moz-transition:all linear .2s
  -ms-transition:all linear .2s;
  -o-transition:all linear .2s;
  transition:all linear .2s;
}
colorPickSelector:hover { transform: scale(1.1); }

.refresh-decale {
 
   position: absolute;
    z-index: 9955;
    cursor: pointer;
    right: 19px;
    bottom: 244px;
    transition: all linear .2s;
    transition-behavior: normal;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition-property: all;
    opacity: 0.2;
    height: 5px;
    transition: all linear .2s;
    top:136px;
   
}

.refresh-decale img {
  opacity:1;
  height:25px;
  filter:invert(0);
  position: static;
  
}
.refresh-decale:hover {
 
 transform:rotate3d(360deg);
}

.refresh-bkg {
 
    position: absolute;
    z-index: 9955;
    cursor: pointer;
    right: 19px;
    bottom: 244px;
    transition: all linear .2s;
    transition-behavior: normal;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition-property: all;
    opacity: 0.2;
    height: 5px;
   transition:all linear .2s;
   top: 8px;
}

.refresh-bkg:hover {
 transform:rotate3d(360deg);
 
}

.refresh-bkg img {
  opacity:1;
  height:25px;
  filter:invert(0);
  position: static;
  
}

div.stackcontainer > div.inner > div {
   padding: 0px;
}
.container {
 position: relative;
}

#FileToUpload{
     position: absolute;
    top: 492px;
}

.fileToUpload {
 text-transform: uppercase;
    width: 209px;
    padding: 11px;
    background: black;
    position: absolute;
    top: 265px;
    color: white;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    left: 72px;
    z-index: 9500;
    font-size: 12px;
    font-weight: bold;
}
 
 .fileToUpload:hover {
  background: #fe1c2a;
 }
 
 
 
  #capture .watermark1 {
  
  height:25px;
  width:25px;
  position:absolute;
  bottom:20px;
  right:25px;
  background: url('../../cropped-2024winter_decalstamp_ficon4.png');
  background-repeat:no-repeat;
  background-size:cover;
     z-index: 9000;
  opacity:1;
 }
 
   #capture .watermark2 {
  
     height: 80px;
    width: 230px;
    position: absolute;
    bottom: 7px;
    right: 5px;
    background: url(../dadpuns_watermark2.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 9000;
    /* filter: grayscale(1); */
    opacity: 1;
 }
 
 .watermark {
  

 }
 
 .pun-container {
    border-top-left-radius: 15px;
    border-top-left-radius: 15px;
    width: 390px;
    left: 37px;
    position: fixed;
    top: 160px;
    z-index:9550;
 }
 
 
 
    
    .vault_return {

  &::-webkit-scrollbar {
   width: 5px;
   background:black;
   
  }

  &::-webkit-scrollbar-thumb {
   background-color: rgba(255,255,255,.4);
   border-radius: 3px;

   &:hover {
    background: rgba(255,255,255,.7);
   }
  }
}


.helpfullinfo {
    position: fixed;
    bottom: 106px;
    width: 320px;
    left: 37px;
    font-size: 13px;
    top: 388px;
    
}