@font-face { font-family: 'Neue Haas Grotesk'; 
              src: url('https://vrynt-cdn.s3.amazonaws.com/_assets/fonts/NHaasGroteskTXPro-55Rg.ttf');
              font-weight: normal;
           } 
 @font-face { font-family: 'Neue Haas Grotesk'; 
              src: url('https://vrynt-cdn.s3.amazonaws.com/_assets/fonts/NHaasGroteskTXPro-75Bd.ttf');
              font-weight: bold;
           } 

html {
  scroll-behavior: smooth;
}


a:hover {
    text-decoration: underline !important;
}


:root {
    --purple: #6550e6;
    --purpledark:  #7334fc;
    --purplelight: #be61ff22;
    --purplefade: #be61ffDD;
    --blue:   #66ccff;
    --bluelight:   #66ccff55;
    --bluefade:   #66ccffDD;
    --lightgray:   #00000033;
    --darkgray: #AAA;
    --navpurple: #A77EFF;
    --text-color: rgba(0,0,0,0.87);
    --BorderSize: 4px;
    --BorderHL:   3px #be61ff solid;
    --BorderHLCCC: 3px #ccc dotted;
    --BorderHLSize:  calc(100% - ( var(--BorderSize) * 2 ) + 18px);
    --BorderHLSizeEdge:  calc(100% - ( var(--BorderSize) * 2 ) + 10px);
    --BorderRad:  10px;
    --MenuBorderHL: 4px #be61ff dotted;
    --BorderShadow: inset 0px 0px 6px 4px #66ccff, 0px 0px 0px 4px #66ccff, 0px -1px 11px 7px #fff, 0px -4px 2px 1px #000;
    --BorderShadowPurple: inset 0px 0px 6px 4px #7334fc, 0px 0px 0px 4px #66ccff,  inset 0px 0px 0px 11px #ffffff55, 0px -4px 2px 1px #000;
    --BorderShadowRed: inset 0px 0px 6px 4px #00000055,  inset 0px 0px 0px 11px #ffffff55;
    --backgroundcolor: #ededed;
    --darkcomp: linear-gradient(60deg, rgba(170,170,170,1) 0%, rgba(200,200,200,1) 50%, rgba(170,170,170,1) 100%);
    --darkcomptext:  #FFF;
    --lightcomp:  linear-gradient(60deg, rgba(255,255,255,1) 35%, rgba(240,240,240,1) 50%, rgba(255,255,255,1) 65%);
    --lightcomptext:  #222;
    --warning: #e91e63;
}

::-webkit-scrollbar {width:10px; height: 10px;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background:transparent}
::-webkit-scrollbar-thumb {
    border-radius:1px;
    border:0px solid var(--purple);
    background:linear-gradient(45deg,#CCCCCC88 0,#33333388);
}
::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(45deg,#CCCCCC 0,#333333);
}
.swal-button-container .swal-button{background:linear-gradient(90deg,#333 0,#999)}


*:not(.vtbBtn):not(.material-symbols-outlined) { 
    argin: 0; adding: 0; 
    font-family: 'Neue Haas Grotesk' !important;
}


body {
    background-color: transparent;
}

.VRYNTText {
    color: var(--purple) !important;
}

.container-fluid {
    overflow: hidden;
}

.canvas-container {
    position: absolute !important;
}

.upper-canvas {
    cursor: default;
}

.NFTSpace {
    width: fit-content;
    margin-left:0px;
    vertical-align: top;
    touch-action: none;
    user-select: none;
}

.CheckerBG {
  
  background: #eee url('data:image/svg+xml,\
   <svg xmlns="http://www.w3.org/2000/svg" width="617" height="617"         fill-opacity=".25" >\
            <rect x="200" width="200" height="200" />\
            <rect y="200" width="200" height="200" />\
            </svg>');
    background-size: 20px 20px;

}

.CheckerBGAB {
  
  background: url(../img/checkerbg.png);
  background-size: 617px 617px;

}

.NFTCompCount {
    position: absolute;
    margin-top: -70px;
    font-weight: 600;
    width: 617px;
}

.NFTSide {
    position: relative;
    overflow: hidden;
    width: 617px;
    height: 700px;
    display: inline-block;
    vertical-align: top;
    margin-left: 50px;
}


.NFTArtboard {
    position: relative;
    overflow: auto;
    width: 617px;
    height: 617px;
    display: inline-block;
    vertical-align: top;
    background-color: #333
}

.NFTArtboard.Minting:after {
    content: '';
    position: absolute;
    background-color: var(--backgroundcolor) !important;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background: url(https://vrynt-cdn.s3.amazonaws.com/_assets/VRYNT_Loading.gif);
    background-position: center;
    background-size: 50%;
    z-index: 10000;
    background-repeat: no-repeat;
}

.NFTCanvasClamp {
    position: relative;
    overflow: hidden;
    left: 52px;
    top: 52px;
}

.NFTCanvasCont {
    position: relative;
    verflow: overlay;
    width: 512px;
    height: 512px;
    isplay: inline-block;
    vertical-align: top;
    background-color: #FFFFFF;
}

.NFTCanvasZoom {
    width: 512px;
    height: 512px;
    position: relative;
    verflow: hidden;
}

.NFTCanvas {
    width: 1024px;
    height: 1024px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
}


.NFTInstr {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);          
    font-size: 2em;
    padding: 25px;
}

.NFTCompSlot .NFTComp {
    margin: auto;    
}   


.NFTCompSlot.NFTCompUsed .NFTCompIconWrapper {
    filter: grayscale(1) invert(1) contrast(7%);
    opacity: .2;
}

.NFTCompSlot.NFTCompUsed .NFTCompIconWrapper.vty-Dark {
    opacity: .1;   
}


.NFTComponentSpace{
    width: 617px;
    display: inline-block;
    vertical-align: top;
    margin-left: 0px;
}  

.NFTComponentTools {
    text-align: center;
    width: 617px;
}

.NFTHeader {
    margin-bottom: 20px;
    clear: both;
    min-height: 50px;
    max-height: 50px;
}  

#NFTBranding {
    float: left;
    margin-right: 10px;
}

#NFTBranding img {
    max-height: 70px;
    max-width: 64px;
}

#NFTName {
    font-size: 2rem;
    font-weight: 200;
    margin-bottom: 5px;
    height: 38px;
    max-height: 38px;
    float: left;
    text-transform: uppercase;
}

#NFTDesc {
  font-size: .8rem;
  max-height: 33px;
  float: left;
  max-width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
}

#NFTValMsg {
    position: absolute;
    cursor:default;
    transform: translateX(670px) translateY(-42px);
    max-width: 465px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var( --purple);  
}

.error {
  color: var(--warning) !important;  
}

.NFTComponents {
    --border-top: 1px #ccc dotted;
    --border-bottom: 1px #ccc dotted;
    display: grid;
    gap: 25px 25px;
    align-content: stretch; 
    block-size: max-content;
    height:617px; 
    width: 617px;
    overflow: overlay; 
    overflow-x: hidden; 
    position:relative;
    padding-right: 10px; /* For Scrollbar */
}

.NFTCompCard {
    position: relative;    
}

.NFTCompCard:hover:before {
    content: '';
    left: 0px;
    top: 0px;
    width: calc(100%);
    height: calc(100%);
    position: absolute;
    z-index: 0;
    border: var(--purple) 3px solid;
    pointer-events:  none;
}


.NFTCompCardHide {
    display: none;    
}

.NFTCompSlot  {
    vertical-align: middle;
    padding: 5px;
    box-sizing: border-box;
    background: url(https://vrynt-cdn.s3.amazonaws.com/_assets/Grid.png);
    box-sizing: content-box;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    align-content: stretch; 
    grid-template-rows:min-content auto min-content;
}

.NFTCompSlot P {
    position: absolute;
}

.NFTCompScarcity-1 {
    background: url(/2d/img/scCommon.png);
}
.NFTCompScarcity-2 {
    background: url(/2d/img/scLegendary.png);
}
.NFTCompScarcity-3 {
    background: url(/2d/img/scRare.png);
}
.NFTCompScarcity-4 {
    background: url(/2d/img/scUltraRare.png);
}
.NFTCompScarcity-5 {
    background: url(/2d/img/scUncommon.png);
}



.NFTCompIcon, .NFTCompIconWrapper, .NFTCompBGWrapper {
    width: 100%;
    height: 100%;
    -padding: 5px;
    box-sizing: border-box;
}

.NFTCompIconComp, .NFTCompIconWrapper, .NFTCompBGWrapper {
    background-repeat: no-repeat !important;
    background-position: center center !important;   
    overflow: hidden; 
}

.is-dropped .NFTCompIcon {
    np-background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    width: 100%;
    height: 100%;
}


.NFTDropTarget:not(.vty-Background) .NFTCompIcon:hover:before, .NFTCompHL .NFTCompIcon:before {
    content: '';
    left: -1px;
    top: -1px;
    width: var(--BorderHLSize);
    height: var(--BorderHLSize);
    position: absolute;
    border-radius: 10px;
    z-index: -2;
    border: var(--BorderHL);
    box-shadow: var(--BorderShadowPurple);
    pointer-events:  none;
}    


.CompSelected .NFTCompIcon:before {
    content: '';
    left: -1px;
    top: -1px;
    width: var(--BorderHLSize);
    height: var(--BorderHLSize);
    position: absolute;
    z-index: 0;
    border: var(--BorderHL);
    box-shadow: var(--BorderShadowRed) !important;
    pointer-events:  none;
}  

.CompSelected.vty-Background .NFTCompIcon:before {
    width: var(--BorderHLSizeEdge);
    height: var(--BorderHLSizeEdge);
}


.CompSelected.NFTCompCard:before {
    content: '';
    left: 0px;
    top: 0px;
    width: calc(100%);
    height: calc(100%);
    position: absolute;
    z-index: 0;
    border: #7334fc dotted 3px;
    pointer-events:  none;
}  

.NFTCompUsed.NFTCompCard:after {
    content: '';
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    background-image: url('https://vrynt-cdn.s3.amazonaws.com/_assets/SelectedCheck.png');
    background-size: contain;
    pointer-events:  none;
}  



.NFTCompInfo {
    display: inline-block;
    margin-left: 20px;
    color: var(--text-color);
    vertical-align: middle;
    width: 60%;
    overflow: hidden;
}

.NFTCompName {
    font-size: .9em;
    font-weight: 600;
    width: 92%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: .6em;
    text-transform: uppercase;
    margin-left: 5px;
    right: 5px;
    margin-top: 5px;
    letter-spacing: .5px;
}    


.NFTCompDesc {
    margin-top: 5px;
    font-size: .7em;
    overflow: hidden;
    max-height: 80px;
    margin-bottom: 10px;
}

.NFTCompScarcity {
    margin-bottom: 5px;
    font-size: .9em;  
    font-weight: 600;
    margin-left: 5px;
}


.NFTCompScarcityDesc {
    margin-top: 5px;
    font-size: .7em;   
}

.NFTCompScarcityDescScore {
    font-weight: 600;   
}

/* A Component */
.-NFTComponent {
    animation-duration: .5s;
    animation-delay: .1s;
    transition-duration:  .5s;
} 

/* Assign when a component is dropped on a Drop Target */
.NFTComponentDropped {
    position: relative;
}   


/* If the drop target requires a fixed position */
.NFTComponentDroppedFixed {
    transform: translate(0px, 0px) !important;
}
    

/* A Drop Target for a Component */
.NFTDropTarget {
    border: 0px transparent dashed;
    position: absolute;
    z-index: 1;
    min-height: 50px;
    min-width: 50px;
}

/* A Drop Target for a Component Background */
.NFTDropTargetBG {
    border: 0px transparent dashed;
    position: absolute !important;
    z-index: 0 !important;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
    


.NFTDropTarget:not(.NFTDropTargetBG):hover {
    z-index: 1000000 !important;
}    



.NFTDropTarget:hover:not(.NFTDropTargetBG):before, .NFTDropTargetHL .NFTDropTarget:before {
    content: '';
    left: -1px;
    top: -1px;
    width: var(--BorderHLSize);
    height: var(--BorderHLSize);
    position: absolute;
    border-radius: 10px;
    z-index: 0;
    border: var(--BorderHL);
    box-shadow: var(--BorderShadow);
    pointer-events:  all !important;
}


.NFTDropTargetHL .NFTDropTargetBG {
    border: none !important;
}

/* When the Component is over the Drop Target */
.NFTDropTargetOver:not(.NFTComponentSpace):not(.NFTComponents) {
    position: absolute;
}

.NFTDropTargetOver:before:not(.NFTComponentSpace):not(.NFTComponents) {
    content: '';
    left: 0px;
    top: 0px;
    width: calc(100% - ( var(--BorderSize) * 2));
    height: calc(100% - ( var(--BorderSize) * 2));
    position: absolute;
    border-radius: 10px;
    z-index: 0;
    border: var(--BorderHL);
    cursor: move !important;
    pointer-events:  none;
}


.pressed {
    mix-blend-mode: difference;
}

.CompDrag {
  width: 50px;
  height: 50px;
  color: white;
  box-sizing: content-box;
  touch-action: none;
  user-select: none;
  transform: translate(0px, 0px);
  z-index: 100;
  position: relative;
}

.CompItem svg {
    pointer-events: none;
} 

body:not(.DidADropped1) .CompDrag:not(.is-dropped) .CompItem:hover:before {
    content: '';
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    pointer-events:  none;
    background-image: url('https://vrynt-cdn.s3.amazonaws.com/_assets/DragDrop.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}


.NFTCompList1 {
    grid-template-columns:auto;
    grid-auto-rows: 378px;
}

.NFTCompList2 {
    grid-template-columns:auto auto;
    grid-auto-rows: 300px;
}

.NFTCompList3 {
    grid-template-columns:186px 186px 186px;
    grid-auto-rows: 188px;
}

.NFTCompList1.NFTComponents:not(.NFTCompIcon) .CompDrag  {
    max-height: 378px;
    max-width: 378px;
}

.NFTCompList2.NFTComponents:not(.NFTCompIcon) .CompDrag {
    max-width: 300px;
}

.NFTCompList3.NFTComponents:not(.NFTCompIcon) .CompDrag, .NFTCompList3 .NFTCompWrapper {
    max-height: 188px;
    max-width: 188px;
 }

.NFTCompList3 .NFTCompWrapper {
    padding: 0px 0px;
    box-sizing: border-box;
    background-clip: content-box;
    background-clip: content-box !important;
}


/*

border-radius: 0.75em;
  padding: 10px;

*/
.NFTComponents:not(.NFTCompIcon) .CompDrag {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}


.NFTMenuHL.CompDrag:before {
    content: '';
    left: 0px;
    top: 0px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    position: absolute;
    border-radius: 5px;
    z-index: 0;
    border: var(--MenuBorderHL);
    pointer-events:  none;
}


.NFTDropTarget  p {
    position: absolute;
}



small {
    font-size: .75rem;
}



.draggable {
	
}

.iconFront {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="white"><path d="M86.63 214.6L160 141.3V320c0 17.69 14.31 32 32 32s32-14.31 32-32V141.3l73.38 73.38C303.6 220.9 311.8 224 320 224s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25l-128-128c-12.5-12.5-32.75-12.5-45.25 0l-128 128c-12.5 12.5-12.5 32.75 0 45.25S74.13 227.1 86.63 214.6zM352 416H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h320c17.69 0 32-14.31 32-32S369.7 416 352 416z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60% !important;
}

.iconForward {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="white"><path d="M374.6 246.6C368.4 252.9 360.2 256 352 256s-16.38-3.125-22.62-9.375L224 141.3V448c0 17.69-14.33 31.1-31.1 31.1S160 465.7 160 448V141.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160C387.1 213.9 387.1 234.1 374.6 246.6z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60% !important;
}

.iconBackward {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="white"><path d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60% !important;
}

.iconBack {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="white"><path d="M297.4 297.4L224 370.8V192c0-17.69-14.31-32-32-32S160 174.3 160 192v178.8L86.63 297.4C80.38 291.1 72.19 288 64 288S47.63 291.1 41.38 297.4c-12.5 12.5-12.5 32.75 0 45.25l128 128c12.5 12.5 32.75 12.5 45.25 0l128-128c12.5-12.5 12.5-32.75 0-45.25S309.9 284.9 297.4 297.4zM32 96h320c17.69 0 32-14.31 32-32s-14.31-32-32-32H32C14.31 32 0 46.31 0 64S14.31 96 32 96z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60% !important;
}


.vty-Background {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.NFTComponentDropped.is-dropped.vty-Background {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    width: -webkit-fill-available; !important;
    height: -webkit-fill-available; !important;
    top: 0px;
    border-radius: 0px !important;
    transform: translate(0px, 0px) !important;
    cursor: default !important;
    z-index: -1;
}

.vty-Dark {
    background: var(--darkcomp) !important;
    color: var(--darkcomptext) !important;
}


.vty-Light {
    background: var(--lightcomp) !important;
    color: var(--lightcomptext) !important;
}

.drop-active {
    z-index: 100 !important;
}



.vsc-1 .NFTCompIcon {
    filter: drop-shadow(0px 2px 0px #FFFFFFAA) drop-shadow(0px -2px 0px #FFFFFFAA) drop-shadow(0px 0px 6px #FFFFFF88)
}    
.vsc-2 .NFTCompIcon {
    filter: drop-shadow(0px 2px 0px #FFFFFFAA) drop-shadow(0px -2px 0px #FFFFFFAA) drop-shadow(0px 0px 6px #FFFFFF88)
}    
.vsc-3 .NFTCompIcon {
    filter: drop-shadow(0px 2px 0px #FFFFFFAA) drop-shadow(0px -2px 0px #FFFFFFAA) drop-shadow(0px 0px 6px #FFFFFF88)
}    
.vsc-4 .NFTCompIcon {
    filter: drop-shadow(0px 2px 0px #FFFFFFAA) drop-shadow(0px -2px 0px #FFFFFFAA) drop-shadow(0px 0px 6px #FFFFFF88)
}    
.vsc-5 .NFTCompIcon {
    filter: drop-shadow(0px 2px 0px #FFFFFFAA) drop-shadow(0px -2px 0px #FFFFFFAA) drop-shadow(0px 0px 6px #FFFFFF88)
}    


.vty-Light1 .NFTCompIcon {
    filter: drop-shadow(0px 1px 2px #fff) drop-shadow(0px 1px 1px var(--bluefade))    
}    

.is-dropped.vty-Dark, .is-dropped.vty-Light {
    background-color: transparent !important;
    background: transparent;
    border: none;
}

.is-dropped.vty-Dark .NFTCompIcon, .is-dropped.vty-Light .NFTCompIcon {
    filter: none;
}


.vtbToolBox {
    margin-top: 10px;
    padding: 0px 6px;
    background-color: white;
    position: relative;
    height: fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;

}


.vtbMintReq {
    position: absolute;
    right: 10px;
    top: 81px;
    bottom: 0px;
    margin-bottom: 0;
    z-index: 997;
    margin-right: 0px;
    Padding: 6px 0px 0px 11px;
    color: black;
    border: 1px black solid;
    background-color: transparent;
    height: 35px;
    border-radius: 25px;
}

.BlackCircle {
    background: black;
    line-height: 9px;
    padding: 7px 4px 0px 4px;
    margin: 0px 4px 0px 4px;
    color: white;
    border-radius: 100%;
    position: static;
    display: inline-block;
    height: 23px;
    min-width: 24px;
    text-align: center;
}

.vtbMint {
    position: absolute;
    right: 10px;
    top: 81px;
    bottom: 0px;
    margin-bottom: 0;
    z-index: 997;
    Padding: 7px 22px 7px 22px;
    color: white;
    background-color: var(--purple);
    height: 35px;
    border-radius: 25px;
}


.vtbMintCont {
    color: white;
    background-color: var(--purple);
    border: 1px var(--purple) solid !important;
}

.BtnDisabled {
     background-color:#ddd !important;
     color: #AAA !important;
     cursor: default !important;
     pointer-events: none !important;
}    

.vtbToolBox::after1 {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 23px;
    left: 0px;
    width: 100%;
    border-top: 3px var(--backgroundcolor) solid;
}    

.vtbDivider {
    position: relative;
    height: 18px;
    border-left: var(--backgroundcolor) 3px solid;
    display: inline-block;
    margin-right: 4px;
    margin-left: 4px;
    transform: translate(0px, 0px) scaleY(1.85);
}

.vtbBtn {
    cursor: pointer;
    position: relative;
    margin-left: 1px;
    margin-right: 1px;
    min-width: 16px;
    font-size: 17px;
    transform: translate(0px, 4px);
}    

.vtbBtn:hover:before {
    content: '';
    left: -2px;
    top: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    position: absolute;
    background-color: var(--lightgray);
    z-index: 0;
    border-radius: 3px;
    box-shadow: inset 1px 2px 2px 1px #00000044;
    opacity: .5;
    pointer-events:  none;
}    


.vtb-dot {
    color:  #b0b0b0;
    font-size: 8px;
    border-radius: 30px;
    border: solid 1px #b0b0b0;
    padding: 7px;
    letter-spacing: -2px;
    padding-right: 9px;
    margin: 0px 3px 15px 3px;
    cursor: pointer;
}
.vtb-sel {
    color: black;
     border-color: black;
}




.vtbPressed.vtbBtn {
    position: relative;
}

.vtbActive.vtbBtn {
    position: relative;
    pointer-events: none;
    transition:1s;
}

.vtbActive.vtbBtn:before, .vtbPressed.vtbBtn:before   {
    content: '';
    left: -2px;
    top: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    position: absolute;
    background-color: var(--darkgray);
    z-index: 0;
    border-radius: 3px;
    box-shadow: inset 1px 2px 2px 1px #00000044;
    opacity: .5;
    pointer-events:  none;
    transition:1s;
}    

.vtbInactive {
    opacity: .3;
    pointer-events: none;
}

.CompLocked {
    pointer-events: none !important;
}

.CompHide {
    opacity: .05;
    pointer-events: none;
}

.CompSurface {
    z-index: 200015 !important;
}

.CompToTop {
    z-index: 200010 !important;
}

.CanvasDark {
    background: var(--darkcomp) !important;
    color: var(--darkcomptext) !important;
}

.CanvasLight {
    background: var(--lightcomp) !important;
    color: var(--lightcomptext) !important;
}




.NFTCompToolbar {
    position: absolute;
    height: min-content;
    left: 10px;
    top: 5px;
}  

.NFTCompBtn {
    display: none;
    font-size: 2.5em;
    -background: #AAA;
    padding: 2px;
    margin: 2px;
    box-sizing: border-box;
}

.NFTComponentDropped:hover .NFTCompToolbar::before {
    content: "";
    position: absolute;
    width: 100%;
    left: -0px;
    height: -webkit-fill-available;
    background-color: #ffffff88;
    top: 2px;
    z-index: -1;
    border-radius: 5px;
    pointer-events:  none;
}

.vtAllRot {
    position: absolute;
    color: #000000;
    font-size: 4em;
    display: none;
}

.vty-Dark .vtAllRot {
    color: #FFFFFF;
}


.NFTCompRot.vtAllRot {
    display:  block;
    filter: drop-shadow(white 3px 3px 0px);
    font-weight: bold;
}
}

.NFTComponentDropped:hover.vtAllRot {
    cursor: url('/2d/img/rotate.png'), auto !important;    
}

.PointerEventsInactive {
   pointer-events:  none;  
}
.PointerEventsInactiveForce {
   pointer-events:  none !important;  
}

.PointerEventsActive:not(.PointerEventsInactiveForce .PointerEventsActive) {
   pointer-events: all;  
}
.PointerEventsActiveForce {
   pointer-events: all !important;  
}

.PointerEventsDeactive {
   pointer-events: none !important;  
}


.NFTToolTipSmall {
    font-size: .8em;
}

.ImageShadow {

}

  html[style*="cursor: ew"] .vtnoResizeWidth
, html[style*="cursor: ns"] .vtnoResizeHeight
, html[style*="cursor: nwse"] .vtnoResizeWidth
, html[style*="cursor: nesw"] .vtnoResizeWidth
, html[style*="cursor: nwse"] .vtnoResizeHeight
, html[style*="cursor: nesw"] .vtnoResizeHeight
{
    cursor: default !important;    
}


.warning {
    color: var(--warning);
}

#img-out {
    position: fixed;
    z-index: 10000;
    top: -15px;
    margin-left: 100px;
    margin-right: auto;
    border: 3px solid var(--purple);
    margin-top: 50px;
    box-shadow: 0px 0px 10px 5px #00000033;
    object-fit: scale-down;
    width: auto !important;
    max-height: 80vh !important;
}

#img-out::before {
    content: '';
    position: absolute;
    left: -100px;
    top: -100px;
    height: 999px;
    width: 999px;
    background-color: #00000088;
}

.ScrollBtn {
    position: absolute;
    right: 10px;
}
.btnTryScroll {
    font-size: 1em;
    cursor: pointer;
    font-weight: 600;
}

.smalltttext {
    font-size: .8em;
}

.BlackCircle {
    background: black;
    line-height: 9px;
    padding: 7px 4px 0px 4px;
    margin: 0px 4px 0px 4px;
    color: white;
    border-radius: 100%;
    position: static;
    display: inline-block;
    height: 23px;
}

.MintingReq {
    max-width: 450px;
    white-space: normal;
}

.ComponentTab {
    border: 1px var(--purple) solid;
    background-color: #EEE;
    border-radius: 14px;
    margin: 5px;
    padding: 3px 10px;
    width: fit-content;
    display: inline-block;
    pointer-events: none;
    cursor: default;
}

.ComponentTabImg {
    height: 1.5em;
    width: 1.5em;
    border-radius: 50px;
    border: 1px var(--purple) solid;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #FFF;
}

.vryBtn {
    transition-property: box-shadow, transform, opacity, background;
    transition-duration: 0.28s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.vryBtn:hover {
    border: solid 1px #000 !important;
    font-weight: 400;
    cursor: pointer;
    color: black;
    background-size: cover;
    background-position: center center;
    background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAR2gAwAEAAAAAQAAACQAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/AABEIACQBHQMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2wBDAAEBAQEBAQIBAQIDAgICAwQDAwMDBAYEBAQEBAYHBgYGBgYGBwcHBwcHBwcICAgICAgJCQkJCQsLCwsLCwsLCwv/2wBDAQICAgMDAwUDAwULCAYICwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwv/3QAEABL/2gAMAwEAAhEDEQA/APcLEkXe3HGc17d4bfYFbGSMdPevD7EKLncOOa9o8PORtLdq/qvHbn+cHAavhj6F8PyDg55NeuaW+SGrxPw8+Co4r1/SpTtFeNWXus+4qL30z1XSGIZcflXs3h8kKteJ6M2WGK9o8PNsCkfWvzLiWPus/Z+A56xPY9O4iHQVna6xER21b0/HljsazdeZfIOev1r8mhH/AGg/esXP/ZPkfMvjr+JlOD6fjXyH4xkCpI3T19ulfWnjphtbb+B78ZFfHfjaUIsmPxr904QhdRP4+8U6/LGp8z5v8STZkKg+1Ymj2+66Rhxz39uat64+64Pb29K0/DFvulV+vI5x3r9XxMuShofyjlFL2+Z69z6E8JwBIFyOgxXpqnIC159oLCKMCuzhnBAr8sx8XKo2f2twvVhRw0YnX6PFmQHHcV9Q+AZo7dFUYGfxx3r5Y0i6SNw1e2+G9YSJlYn0618xmVGUo2P0jLczgmrM+8fCesxxRrzkdete26TryMi4PWvhnQvFIjUeY2cfyr1zS/GCoVUtn1NfC4vLpXdkfd4PN4tLU+uoNXjZevH1qG71JChwea8ItPFw2/K4P0PStr/hJPMH3uevWvHrYKSR7lDGQbNnW7jIbHPWvnbxgryK69PQd69YvNUWdMMfzrzTXV89SP8A69Y4XDtVE2e5TxK5dD5D8aWUjbxjOTzn/PtXzP4k0p3csozjPavuLxLowkySCQfSvCNe8Mja2B+Ir9TyLGRppI4sT7x8h3li0Z6VWtd0Zwa9h1nw6Uzkfh3rz64014m4GK+/o4uNSJ5UqbTOo0G8wwyOn4f1r3jw5qGdu4+5/WvmrT5GhfPpXrWgakUIXNfL57glUi7I9XBVrPU+ptHv8qOa9As7zIGDXz7o2rgqvPJ6c16Hp2rZHXpX43muVy5nofU4fEKx60tym0ZOao3d+qqTniuQ/tlFXBbH/wBauY1fxJGqn5sYrxcPlE5zSSOueKSRq6trigH5sdRmuSOsl5CN2c/1rznVvEqtLhDkZwOaXSL03MozX3VDIvZUeaSPIljOaVj3TR7h32k969Es+Y6808PqSAPavUbVP3QHSvhc2sp2PWw2qP/Q9vswRcgnufrXr+huFK768js8C6A98V6foz421/VeN3P85OAmvq2h7voEvKr3r1/SJuVJPWvB9Enxt/ya9d0e5LAA15FRaH3daHvHuOhOGI4Fe4eHiGxivn/w7cZwc/5Ne9+HGOAwGM1+b8TR91n6rwNO0onsGnuPK5rI1+QCEs3OO1aVicR8dBWHr7/uyCOv51+SwX+0H7zip/7J8j5o8cNy+zoevQcmvjfxy8jFvxIx69Pwr7H8ZoQH2jkcZr4/8c2zFZNo/D6j0r924QaSifxx4rczUz5c1Zgbg4/Gui8MuglAPVsZrE1iP/SCRz7imabdtbuMHv8AlX6piKXtKVkfyvlmLWGxvPLufSemXQVRW+t+V5B5ryLSdZBTBPHQDNdRHqStzmviMRl0lJ6H9E5TxdB0VaR6VZ6uY2GTXdaT4lEXGecivAU1AjkH9a1bbVXTAzXnVsq5lsfT4TjBRfxH1vpfjHyVVt34+mK9B03xx+72l84Pfof8/Wviyz1+RBjd+vrXWWXih043dO/evFr5Cn0PscDxtHT3j7o07xsWChH2/j64rsLPxisgGWyK+E9P8YlMRs3XjBOcD/P1rutL8ZuGwzZHv3/D+VeFisgt0Ptcu4vjK3vH2rD4jWXgHjpzTpdQSXOTXzRpnjFZACrV39h4iWYAFunv6183iMocHex95l/EUZpe8dzfQJOpXsa4LV9DjkBYLXWQX6yjqOatFEmXsRWVOUqTPq8Pjo1FufOOt+GmZcAf5+leNa14caNyuORX2lqWkJMpx2FeWa74cVskr1z+VfSYDNGtGzscVJXR8fXWnSW7Zxx/hV2wvHgIUcV6Pr2gFGLKMc15je2j2zEqOhr6qFSNeFmY6xdz0TTtd2D5j9a7q08SqgwDx7183pqMkJxnj61ej8Quo+VunT3ry8VkMarvY7aeOcT6MufFiopJbBxnr/WuH1vxYXBweCD1rya48SSFSC3vXPz6s0zYBowXDcISUmgrZg2rXPQhqsl3Nlj14616z4TiDsrN7fpXgehBpJQfSvpbwdafKoxngDrXHxFy0KLijXA3nK7Pc/DsICAqMV6NbjEYFcfokO2NRjH6120afLX4HmlTmqNn2eHjaJ//0fdIsCfgenNei6MSdo9s150n+v8AxFeiaL1X6Cv6sxu5/m/wB/BXoeo6K7bsHnFeraRK/X0/xrybRfvn6V6rpPQ/5715FTY/Rqu57Z4ZkZkQnqxxX0V4cYkgdBgHj3r5y8L/AOri/wB6vovw195fov8AKvzribqfpfBfxL5Hr1mx8oH1rH1lQylT3rXs/wDUr9KytX6V+RL/AHg/eK/+6r0Pnfxio8uR+4r5S8aW8ZBGT8xwfpnFfV3jD/US/Wvljxn0H+8P/QjX7XwltE/k7xRStP8ArqfK3iG3iE5ZRiuR+6cjtXaeIv8AWn6f0riz3+tfsmH+BH8a5grYiVu5v2E0q4CnArrrW4l2bs+lcZY9RXWWv+q/KuLExV9j6HKJytudDFK5wM1pQyMcH1rIh6j6mtOHoK8uaR9phpy01NeCWTIwetasM8oYDPU1iw9RWpF99frXLVSPoMDUl3NqC5mDiPPBNdFZX9xu6/5xXLQ/65frW7Z/eH+e1eRioq2x9vlVSfMtWei6dqV2hADdv5V6v4f1O8aDzN/8X+Irxmx+8Poa9X8O/wDHr/wL/GvlMwirPQ/WcknK61PadIu52iDE8iu5sZ5GTJNee6N/qPzrvdP/ANUP89q+KxiV2frGVSdlqb5561zuqWsLx/MPU10Xp9axtS/1f4GuKg/ePuMM/dPCtetLdomfaBwa8Q1q0hcF2HPWveNc/wBQ3+6f5V4hq/8Aqz9K+1ytuxdQ8bv0C8jv/hXNzSuMtmun1Hp+X8q5Oboa+0obHFMiaWTnmn27Fn59qgbvU1r9/wDEV1S2ZhHc9M8MH5t+PQfnmvq3waisiAjoN35V8o+Gen4r/WvrDwZ91f8AcNfmHGL9xn02V7o950lQOB24/nXXIg2g1yWldT9f8a69PuD6V+DYz+Iz7Ol8KP/Z');
}

.MintWarning {
    margin-top: 50px;
    padding: 0px 5px;
    color: #888;
}

b {
    font-weight: 600 !important;
}


.vryPulse {
    position: absolute;
    margin-left: -3px;
    margin-top: 0px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
}
  
.vryPulse:before,
.vryPulse:after {
    content: '';
    position: absolute;
    border: 2px solid var(--purple);
    border-radius: 50%;
    animation: vryAnimate 3s linear infinite;
    width: 25px;
    height: 25px;
    transform: scale(1.5);
    opacity: 0;
}

.vryPulse:after {
    animation-delay: 3s;
}

@keyframes vryAnimate {
    0% {
        transform: scale(1.8);
        opacity: .5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}