/**Stylesheet for Digital Drams.*/
@font-face{
  font-family: icomoon;
  src: url('../Fonts/icomoon.woff') format('woff'),
     url('../Fonts/icomoon.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfit;
  src: url('../Fonts/Outfit-Regular.woff2') format('woff2'),
     url('../Fonts/Outfit-Regular.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfitbold;
  src: url('../Fonts/Outfit-ExtraBold.woff2') format('woff2'),
     url('../Fonts/Outfit-ExtraBold.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfitlight;
  src: url('../Fonts/Outfit-Light.woff2') format('woff2'),
     url('../Fonts/Outfit-Light.ttf') format('truetype');
  font-display: swap;  
}


/**Basic Styles*/
.mp_sections{
  position: relative;
  padding: 3em 0em;
}


/**Option Buttons*/
.page_option_buttons{
    position: relative;
    top: 0em;
    background: #020407;
    background: linear-gradient(to left, #020407, #161616, #020407);
    padding: .5em 0em;
    z-index: 3;
}

.option_buttons{
  display: block;
  position: relative;
  left: 50%;
  background: #0B0E10;
  width: 80%;
  color: #FA731C !important;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  padding: .5em;
  border-radius: .5em;
  border: 1px solid #FA731C;
  box-sizing: border-box;
  margin: .7em 0em;
  transform: translateX(-50%);
}

.option_buttons:hover{
  cursor: pointer;
  color: #F5F5F5 !important;
  border: 1px solid #F5F5F5;
}

.option_button_active{
  background: #FA731C !important;
  color: #0B0E10 !important;
}




/**NFT Modal*/
.nft_modal{
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  position: fixed;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  height: 100vh;
  z-index: 7;
  transition: flex 1s;
}

.showModal{
  display: flex;
}

.nft_modal_content{
  padding-bottom: 3.5em;
}

.nft_modal_cover{
  position: relative;
  width: 10%;
  height: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,.5);
}

.nft_modal_holder{
  position: relative;
  height: 100%;
  height: 100vh;
  width: 90%;
  padding: 3.5em 2em; 
  background: #0B0E10;
  border-left: 1px solid #FA731C;
  overflow: scroll;
}

.nft_modal_close_button{
  display: block;
  position: fixed;
  top: 1em;
  left: 10%;
  margin-left: -2em;
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  color: #0B0E10;
  background: #FA731C;
  z-index: 7;
}

.nft_modal_close_button:hover{
  cursor: pointer;
  background: #F5F5F5;
}

#marketplace_modal .nft_modal_cover, #home_modal .nft_modal_cover{
  width: 5%;
}

#marketplace_modal .nft_modal_holder, #home_modal .nft_modal_holder{
  width: 90%;
}

#marketplace_modal .nft_modal_close_button, #home_modal .nft_modal_close_button{
  left: 10%;
}

.nft_modal_intro_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: justify;
  padding: 1em 0em 3em 0em;
  align-items: center;
}

.nft_modal_intro_flex_left h2{
  font-family: outfitbold, sans-serif;
  text-transform: uppercase;
  margin: 0;
}

.nft_modal_intro_flex_left h3{
  font-size: 3em;
  margin: 0em;
}

.modal_cta_buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.modal_cta_button{
    display: block;
    font-family: outfit, sans-serif;
    font-size: 1.1em;
    color: #010B13 !important;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    margin-top: 2em;
    padding: .5em 1em;
    width: 100%;
    background: #FA731C;
    border: 1px solid #FA731C;
    box-sizing: border-box;
}

.modal_cta_button:hover{
    background-color: #FFF;
    border: 1px solid #FFF;
}

.modal_cta_buttons .modal_cta_button{
    width: 33.3%;
    width: calc(33.3% - 1em);
    margin: .5em 1em .5em 0em;
}






/**NFT Modal Storage Styles*/
.nft_modal_top_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: justify;
  align-items: center;
}

.nft_modal_top_flex_left, .nft_modal_top_flex_left{
  width: 100%;
}

.nft_modal_top_flex .nft_modal_img_holder{
  width: 14em;
}

.nft_modal_top_flex .nft_modal_img{
  width: 6.5em;
}

.nft_modal_top_flex_right h2{
  font-family: outfitbold, sans-serif;
  font-size: 1.3em;
  text-transform: uppercase;
  margin: 0;
}

.nft_modal_top_flex_right h3{
  font-size: 2em;
  margin: 0;
}

.nft_modal_content_info{
  position: relative;
  padding: 2.5em 0em 2em 0em;
}

.nft_modal_ownership{
  font-family: outfit, sans-serif;
  font-size: 1.3em;
  text-transform: uppercase;
}

.pie {
  --w: 4em;
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  font-size: 1.5em;
}
.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#161616 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}


.dashboard_pf:after {
  position: relative;
  font-family: outfit, sans-serif;
  font-size: .95em;
  margin-left: .3em;
  color: #FA731C;
  content: "(1)";
}



/**Redemption Contact Form*/
.redemption_request_block{
  display: none;
  position: relative;
  padding: 3em 0em;
  margin: 2em 0em;
  border-top: 1px solid #242424;
  border-bottom: 1px solid #242424;
}

.redemption_request_block h3{
    font-family: outfitbold, sans-serif;
    font-size: 2em;
    text-align: center;
    text-transform: uppercase;
}

.flex_redemption{
    display: flex;
    flex-wrap: wrap;
    justify-content: justify;
    border-bottom: 1px solid #CCC;
}

.flex_redemption_left{
    width: 50%;
    padding-right: 1.5em;
    font-size: 1.1em;
    text-transform: uppercase;
}

.flex_redemption_right{
    width: 50%;
    padding-left: 1.5em;
    font-size: 1.1em;
    padding-bottom: 1em;
}

.redemption_form{
  position: relative;
  left: 50%;
  max-width: 34em;
  padding-top: 3em;
  transform: translateX(-50%);
}






/**Discovery Modal Styles*/
.discovery_modal_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.discovery_modal_flex_left{
  position: relative;
  width: 100%;
}

.discovery_modal_flex_right{
  position: relative;
  width: 100%;
}

.nft_modal_list h3, .nft_modal_transactions h3{
  font-family: outfitbold, sans-serif;
  font-size: 1.3em;
  text-transform: uppercase;
}

/**Modal Image Styles*/
.nft_modal_img_holder{
  position: relative;
  left: 50%;
  width: 18em;
  padding: 1.5em 0em;
  border-radius: 1em;
  background-image: radial-gradient(#343434, #0B0E10);
  border: 1px solid #1B1B1B;
  box-shadow: 0 0 10px #000;
  transform: translateX(-50%);
}

.nft_modal_img{
  position: relative;
  left: 50%;
  width: 8em;
  transform: translateX(-50%);
}

.nft_modal_img img{
  display: block;
  width: 100%;
  height: auto;
}

.nft_modal_list .grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: #161616;
  border: .5px solid #FA731C;
  overflow-wrap: break-word; 
}

.nft_modal_list .grid > span{
  padding: .7em;
  border: .5px solid #FA731C; 
}

.nft_modal_list .grid .grid_title{
  text-transform: uppercase;
}


/**Mint Section*/
#mint_submission_form{
  position: relative;
  left: 50%;
  width: 100%;
  max-width: 64em;
  padding: 0em 1em;
  transform: translateX(-50%);
  background-color: #161616;
  margin-top: 2em;
  box-shadow: 0 0 10px #000;
  box-sizing: border-box;
}

.nf-field-container .field-wrap .nf-element::placeholder {
    color: #CCC;
}

.nf-response-msg, .ninja-forms-noscript-message{
  font-family: outfit, sans-serif;
  font-size: 1em;
  text-align: center;
  margin-top: 1.5em;
}

.nf-field-label, .nf-form-fields-required, .nf-error-wrap.nf-error, .nf-error-msg.nf-error-field-errors, .nf-field-element:after{
  display: none;
}

#mint_submission_form h3{
  display: inline-block;
  font-family: outfitbold, sans-serif;
  font-size: 1.5em;
  margin: 0;
  line-height: 1.1em;
  text-transform: uppercase;
}

#nf-field-2-wrap .ninja-forms-field, #nf-field-3-wrap .ninja-forms-field, #nf-field-4-wrap .ninja-forms-field, #nf-field-5-wrap .ninja-forms-field,
#nf-field-6-wrap .ninja-forms-field, #nf-field-8-wrap .ninja-forms-field{
    font-family: outfit, sans-serif;
    font-size: 1em;
    color: #F5F5F5;
    border: none;
    padding: 1em;
    background: none;
    border-bottom: 1px solid #F5F5F5;
    box-sizing: border-box;
}

#nf-field-7-wrap select, #nf-field-11-wrap select{
  font-family: outfit, sans-serif;
  color: #CCC;
  background-color: #161616;
  border: 1px solid #F5F5F5;
}

#nf-label-field-9{
    font-size: .9em;
    margin-top: 1.5em;
}

#nf-field-13-wrap .nf-field-label{
  display: block;
  font-size: 1.2em;
  text-transform: uppercase;
}

#nf-label-class-field-13-0, #nf-label-class-field-13-1{
  font-family: outfit, sans-serif;
  font-size: .95em;
} 

#nf-field-10, #nf-field-22{ 
    font-family: outfitbold, sans-serif;
    font-size: 1.2em;
    width: 100%;
    text-transform: uppercase;
    text-align: center; 
    transition: none;
    color: #FA731C;
    background: none;
    border: 1.5px solid #FA731C;
    padding: .5em 0em .5em 0em;
    margin-top: .5em;
    overflow-wrap: break-word; 
    box-sizing: border-box;
}

#nf-field-10:hover, #nf-field-22:hover{
    cursor: pointer;
    color: #F5F5F5;
    border: 1.5px solid #F5F5F5;
}


#nf-field-14-wrap .ninja-forms-field, #nf-field-15-wrap .ninja-forms-field, #nf-field-16-wrap .ninja-forms-field, #nf-field-17-wrap .ninja-forms-field,
#nf-field-18-wrap .ninja-forms-field, #nf-field-19-wrap .ninja-forms-field, #nf-field-20-wrap .ninja-forms-field{
    font-family: outfit, sans-serif;
    font-size: 1em;
    color: #F5F5F5;
    padding: 1em;
    background: none;
    border: 1px solid #F5F5F5;
    box-sizing: border-box;
}

 #nf-field-21-wrap select{
  font-family: outfit, sans-serif;
  color: #CCC;
  background-color: #161616;
  border: 1px solid #F5F5F5;
}





/**Instructions Styles*/
.instructions_grid{
  position: relative;
  padding-top: 2em;
}

#redemptions_grid, #minting_grid{
  position: relative;
  left: 50%;
  display: grid;
  width: 100%;
  max-width: 80%;
  grid-gap: 3em;
  height: auto;
  transform: translateX(-50%);
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "one"
    "two"
    "three"
    "four"
    "five"
    "six"
    "seven";
}

.redemptions_instructions_block, .minting_instructions_block{
    position: relative;
    padding: 1em;
    background: #0B0E10;
    border-radius: 2em;
    border: 1px solid #1B1B1B;
    border: 1px solid #343434;
    box-shadow: 0 0 10px #000;
    overflow: hidden;
}

#redemptions_grid .redemptions_instructions_block:nth-child(1), #minting_grid .minting_instructions_block:nth-child(1) {
  grid-area: one;
}

#redemptions_grid .redemptions_instructions_block:nth-child(2), #minting_grid .minting_instructions_block:nth-child(2) {
  grid-area: two;
}

#redemptions_grid .redemptions_instructions_block:nth-child(3), #minting_grid .minting_instructions_block:nth-child(3) {
  grid-area: three;
}

#redemptions_grid .redemptions_instructions_block:nth-child(4), #minting_grid .minting_instructions_block:nth-child(4) {
  grid-area: four;
}

#redemptions_grid .redemptions_instructions_block:nth-child(5), #minting_grid .minting_instructions_block:nth-child(5) {
  grid-area: five;
}

#redemptions_grid .redemptions_instructions_block:nth-child(6), #minting_grid .minting_instructions_block:nth-child(6) {
  grid-area: six;
}

#redemptions_grid .redemptions_instructions_block:nth-child(7) {
  grid-area: seven;
}

.instructions_block_inner{
  position: relative;
}

.instructions_block_number{
  position: relative;
  font-size: 2em;
  color: #0B0E10;
  width: 1.5em;
  height: 1.5em;
  background-color: #FA731C;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5em;
  z-index: 2;
}

.ib_img_block, .ib_img_block_lr{
  position: relative;
  left: 50%;
  width: 90%;
  height: 7em;
  margin-top: -3em;
  transform: translateX(-50%) rotate(7deg);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

.instructions_block_content h3{
  font-family: outfitbold, sans-serif;
  font-size: 1.5em;
  line-height: 1.1em;
  text-transform: uppercase;
  margin: .5em 0em;
}

.instructions_block_content p{
  margin: 0em 0em .5em 0em;
}

.instructions_block_content a{
    color: #FA731C;
}

.instructions_block_content a:hover{
    opacity: .7;
}


/**Grid Instruction Images*/
#rib_1 .ib_img_block{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/redeem-request-submitted.webp");
}
#rib_2 .ib_img_block_lr{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/redemption-pending.webp");
}
#rib_3 .ib_img_block{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/preparing-for-shipment.webp");
}
#rib_4 .ib_img_block{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/shipment-scheduled.webp");
}
#rib_5 .ib_img_block{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/in-transit.webp");
}
#rib_6 .ib_img_block_lr{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/bottle-delivered.webp");
}
#rib_7 .ib_img_block{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/redeem-request-closed.webp");
}
#mib_1 .ib_img_block_lr{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/submit-bottle-by-form.webp");
}
#mib_2 .ib_img_block{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/awaiting-shipment.webp");
}
#mib_3 .ib_img_block{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/in-transit.webp");
}
#mib_4 .ib_img_block_lr{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/shipment-received.webp");
}
#mib_5 .ib_img_block_lr{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/under-verification.webp");
}
#mib_6 .ib_img_block{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2024/09/result.webp");
}




/**Status Styles*/
.status_block{
  position: relative;
}

.status_holder{
  position: relative;
  left: 50%;
  width: 95%;
  max-width: 60em;
  height: 9em;
  transform: translateX(-50%);
  font-size: .85em;
}

.status_line{
  position: absolute;
  top: 5em;
  left: 0em;
  height: .5em;
  border-radius: .5em;
  width: 100%;
  background-color: #CCC;
}

.status_progress{
  position: absolute;
  top: 5em;
  left: 0em;
  height: .5em;
  border-radius: .5em;
  background-color: #FA731C;
}

.status_point{
  position: absolute;
  top: 2.4em;
  font-size: 1.7em;
  width: 1.5em;
  height: 1.5em;
  background: #F29A61;
  border-radius: 50%;
  text-align: center;
  line-height: .8em;
  padding: .2em;
  margin-left: -.75em;
  border: .15em solid #CCC;
}

.status_point:hover{
  cursor: pointer;
}


.sp_complete{
  color: #F8C5A5;
  background: #FA731C;
  border: .15em solid #F29A61;
}

.sp_active{  
  color: #FFF;
  background: #FA731C;
  animation: pulse 3s infinite;
  border: .15em solid #FA731C;
}

@keyframes pulse {
  0%{
  transform: scale(1);
  }
  30%{
  transform: scale(1.3);
  }     
  50% {
  transform: scale(1);
  }
  70% {
  transform: scale(1);
  } 
  90% {
  transform: scale(1);
  }
} 


.status_output{
  position: relative;
  text-align: center;
  padding-top: 3em;
}

.status_output h5{
  font-family: outfitlight, sans-serif;
  color: #CCC;
  text-transform: uppercase;
  margin: 0;
}
.status_output h3{
  font-size: 1.5em;
  margin: .5em 0em 0em 0em;
}

#MintingStatus #sp1{
  left: 0%;
}

#MintingStatus #sp2{
  left: 20%;
}

#MintingStatus #sp3{
  left: 40%;
}

#MintingStatus #sp4{
  left: 60%;
}

#MintingStatus #sp5{
  left: 80%; 
}

#MintingStatus #sp6{
    left: 100%;
}

#MintingStatus .status_progress{
  width: 40%;
}




/**Redemption Status Styles.*/
#RedemptionStatus #sp1{
  left: 0%;
}

#RedemptionStatus #sp2{
  left: 16.6%;
}

#RedemptionStatus #sp3{
  left: 33.2%;
}

#RedemptionStatus #sp4{
  left: 49.8%;
}

#RedemptionStatus #sp5{
  left: 66.5%; 
}

#RedemptionStatus #sp6{
    left: 83%;
}

#RedemptionStatus #sp7{
    left: 100%;
}

#RedemptionStatus .status_progress{
  width: 66.5%;
}












/**My Collection Style.s*/
#MyCollection, #Redemptions{
  position: relative;
  padding-top: 2em;
}

#collection_holder, #redeemable_holder{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  box-sizing: border-box;
}

.collection_item, .redeemable_item{
  position: relative;
  padding: 1.5em 1em;
  width: 100%;
  box-sizing: border-box;
}

.collection_item:hover, .redeemable_item:hover{
  cursor: pointer;
}

.collection_item:hover .ci_inner, .redeemable_item:hover .ci_inner{
  border: 1px solid #FA731C;
}

.collection_item:hover .redeemable, .redeemable_item:hover .redeemable{
  color: #020407;
  background: #FA731C;
}

.ci_inner{
  position: relative;
  width: 100%;
  padding: 1em;
  border-radius: 1em;
  background-image: radial-gradient(#343434, #0B0E10);
  border: 1px solid #343434;
  overflow: hidden;
}

.ci_inner_content{
  background-color: #0B0E10;
}

.ci_rarity_overlay{
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#F0A06E, #EE7629);
  box-sizing: border-box;
}


.ci_img{
  position: relative;
  left: 50%;
  width: 7em;
  transform: translateX(-50%);
}

.ci_img img{
  width: 100%;
  height: auto;
}

.cf_info{
  position: relative;
  font-family: outfit, sans-serif;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.3em;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0em;
  padding: .3em;
  background-color: rgba(0,0,0,0);
}

.cf_info h3{
  margin: 0;
}

.cf_info h4{
  margin: .5em 0em;
}

.rarity_badge, .ci_rarity_badge{
  position: absolute;
  top: 1.5em;
  left: 1.5em;
  font-family: outfitbold, sans-serif;
  font-size: 1.3em;
  color: #020407;
  background: #FA731C;
  width: 3em;
  padding: .3em;
  text-align: center;
  border-radius: .5em;
  box-sizing: border-box;
}

.redeemable{
  position: absolute;
  top: 50%;
  left: -10%;
  width: 130%;
  font-family: outfitbold, sans-serif;
  font-size: 1.4em;
  color: #020407;
  font-weight: normal;
  text-transform: uppercase;
  height: 2em;
  background: #FA731C;
  color: #FA731C;
  background-color: #343434;
  transform: translateY(-50%) rotate(-15deg);
}

.ticker_wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2em;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  transform: translateY(-50%);
}

.ticker {
  display: inline-block;
  margin-top: 5px;
  animation: marquee 25s linear infinite;
}

.ticker_info_1{
  position: relative;
  left: 0%;
  animation: swap 25s linear infinite;
}

.item {
  display: inline-block;
  font-size: 1em;
  padding: 0em 0em 0em 1.5em;
}


/* Transition */
@keyframes marquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}

@keyframes swap {
  0%, 50% {
    left: 0%;
  }
  50.01%,
  100% {
    left: 100%;
  }
}





/**Dashboard Styles*/
#dashboard_menu{
  position: fixed;
  top: 0em;
  left: -13em;
  width: 13em;
  padding: 5em 0em 5em .5em;
  background-color: #020407;
  border-right: 1px solid #343434;
  transition: left .5s;
  z-index: 2;
  box-sizing: border-box;
}

.menu_active{
  left: 0em !important;
}

#menu_content{
  position: relative;
  height: 100vh;
  overflow: scroll;
}

#menu_content::-webkit-scrollbar, #dashboard_showcase .dcb_holder::-webkit-scrollbar{
  display: none;
}



#dashboard_button{
  position: absolute;
  top: 5em;
  right: -2em;
  display: block;
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  color: #0B0E10;
  background: #FA731C;
  z-index: 7;
}

#dashboard_button span{
  font-size: 2em;
}

.dashboard_active{
  transform: scale(-1, -1) !important;
}

#dashboard_button:hover{
  cursor: pointer;
  background: #F5F5F5;
}


/**Dashboard Links Styles*/
#dashboard_links{
  position: relative;
  background-color: #0B0E10;
  margin-top: 1em;
}

#dashboard_links ul{
  list-style: none;
  padding: 0em;
  margin: 0;
}

#dashboard_links li{
  margin: 0em;
  padding: 1em;
}

#dashboard_links a, #dashboard_profile_links a, #dashboard_notification_links a{
  font-family: outfit, sans-serif;
  font-size: .95em;
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
}

#dashboard_links a:hover, #dashboard_profile_links a:hover, #dashboard_notification_links a:hover{
  color: #FA731C;
}

.dbicon:before, #dashboard_profile h5:before, #dashboard_profile_links span:before, #dashboard_notification_links span:before{
  padding-right: .5em;
}


/**Dashboard Profile Styles*/
#dashboard_profile{
  position: relative;
  background-color: #0B0E10;
  padding: 1em;
}

#profile_icon{
  position: relative;
  width: 6em;
  height: 6em;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow: hidden;
}

#profile_icon img{
  width: 100%;
  height: auto;
}

#dashboard_profile h4{
  font-size: 1.3em;
  text-align: center;
  margin: .3em 0em .7em 0em;
}

#dashboard_profile h5{
  display: block;
  position: relative;
  text-align: center !important;
  margin: .5em;
}

#dashboard_profile_links, #dashboard_notification_links{
  position: relative;
  background-color: #0B0E10;
  margin-top: 0em;
  padding: 1em;
}



/**Dashboard Content Styles*/
#dashboard_content{
  position: relative;
  min-height: 100vh;
  margin: 1em 2.5em;
}

.dashboard_content_block{
  position: relative;
  margin: 1.5em 0em;
}

.dashboard_bg{
  position: relative;
  background: #0B0E10;
  border-radius: 2em;
  border: 1px solid #1B1B1B;
  box-shadow: 0 0 10px #000;
}



/**Investment Summary Styles*/
#investment_info{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  grid-gap: 1.5em;
}

.investment_info_block{
  position: relative;
  width: 100%;
  padding: 1.5em;
  text-align: center;
  background: #0B0E10;
  border-radius: 2em;
  border: 1px solid #1B1B1B;
  box-shadow: 0 0 10px #000;
}

.investment_info_block h4{
  margin: 0em 0em .5em 0em;
  text-transform: uppercase;
}

.investment_info_block h5{
  font-size: 1.7em;
  margin: 0em 0em 0em 0em;
}

.investment_value_increase{
  color: #FA731C;
}


/**Investment Graph Styles*/
#investment_graph{
  position: relative;
  margin: 3.5em 0em 3.5em 0em;
  padding: 2em 0em 1em 0em;
  background: #1B1B1B;
  border-radius: 2em;
  border: 1px solid #1B1B1B;
  box-shadow: 0 0 10px #000;
}

#investment_track_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  float: right;
  margin-right: 2em;
  align-items: center;
}

#investment_track_flex h4{
  font-size: .85em;
  color: #FA731C;
  text-transform: uppercase;
  padding-right: .5em;
}

#investment_graph_dropdown select{
  position: relative;
  padding: .3em .5em;
  font-family: outfit, sans-serif;
  text-transform: uppercase;
  color: #FA731C;
  background-color: #1B1B1B;
  outline: none;
  border: 1px solid #FA731C;
  appearance: none;
}

#investment_graph th{
  font-family: outiftbold, sans-serif;
  font-size: 1.1em;
  background-color: none;
  border: none;
}




/**Notification Styles.*/
#notification_box{
  position: relative;
  background: #1B1B1B;
  overflow: scroll;
  border-radius: 2em;
  border: 1px solid #1B1B1B;
  box-shadow: 0 0 10px #000;
  padding: 3em 2em 1em 2em;
}

#notification_close{
  position: absolute;
  top: 0em;
  right: .5em;
  font-size: 3em;
}

#notification_close:hover{
  color: #FA731C;
  cursor: pointer;
}

#notification_holder{
}

.notification_item{
  position: relative;
  padding: 1em 1.5em;
  margin: .5em 0em;
  border-bottom: 1px solid #343434;
}

.notification_item:last-of-type{
  border-bottom: none;
}

.notification_item h4{
  font-size: 1.2em;
  margin: 0;
}

.notification_item p{
  margin: .5em 0em;
}

.notification_item em{
  font-style: normal;
  font-size: .9em;
  color: #CCC;
}

.ni_increase{
  border-left: .5em solid #009F6B;
}

.ni_decrease{
  border-left: .5em solid #ED0A3F;
}

#notification_more_link{
  display: block;
  color: #FA731C;
  text-align: center;
}

#notification_more_link:hover{
  color: #F5F5F5;
}



    


/**Dashboard Showcase Styles.*/
#dashboard_showcase .dcb_holder{
  position: relative;
  width: 100%;
  padding: 2em 2em;
  overflow: scroll;
}

#dashboard_show_case_holder{
  width: 176em;
}

#dashboard_showcase_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.showcase_item{
  position: relative;
  padding: 1em;
  width: 16em;
  box-sizing: border-box;
}

.sci_inner{
  border-radius: 1em;
  background-image: radial-gradient(#343434, #0B0E10);
  border: 1px solid #1B1B1B;
}

.sci_rarity_badge{
  position: absolute;
  top: 1.5em;
  left: 1.5em;
  font-family: outfitbold, sans-serif;
  font-size: 1.3em;
  color: #020407;
  background: #FA731C;
  width: 3em;
  padding: .3em;
  text-align: center;
  border-radius: .5em;
  box-sizing: border-box;
}

.sci_img{
  position: relative;
  left: 50% ;
  width: 6em;
  transform: translateX(-50%);
}

.sci_img img{
  width: 100%;
  height: auto;
}

.sci_info{
  position: relative;
  font-family: outfit, sans-serif;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.3em;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0em;
  padding-bottom: .5em;
}

.sci_info h3{
  margin: .5em 0em;
}

.sci_info h4{
  margin: 0;
}




/**NFT Transaction Styles.*/
.nft_modal_transactions{
  position: relative;
  padding-bottom: 4em;
}

.nft_transactions_holder{
  height: 21em;
  overflow-x: auto;
  overflow: auto;
}

table {
  text-align: left;
  position: relative;
  min-width: 48em;
  table-layout: fixed;
  border-collapse: collapse; 
}

td {
  padding: 1em;
  border: 1px solid #242424;
}

th {
  position: sticky;
  top: 0em; 
  padding: 1em;
  background-color: #FFF;
  color: #0B0E10;
}

thead tr{
  font-family: outfitbold, sans-serif;
  text-transform: uppercase;
  padding: .5em 1em;
  text-align: left;
}

td span{
  padding-right: .5em;
}


/**Storage Sell Price.*/
.sell_price_block{
  display: none;
  padding-top: 3.5em;
}

.sell_flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.sell_flex_left, .sell_flex_right{
  position: relative;
  width: 100%;
}

.sell_flex h4{
  font-size: 1.2em;
  text-transform: uppercase;
  margin: 0em 0em .3em 0em;
}

.sell_flex input{
  position: relative;
  font-family: outfit, sans-serif;
  color: #FFF !important;
  width: 100%;
  background-color: #121212;
  outline: none;
  padding: .5em;
  border: 1px solid #FA731C;
  border-radius: 0;
}

.sell_flex input::placeholder{
  color: #FFF;
}






/**Media Queries*/

@media only screen and (min-width: 18.75em){


}


@media only screen and (min-width: 20em){

    
}


@media only screen and (min-width: 22em){

  
}
  

@media only screen and (min-width: 25.625em){


}


@media only screen and (min-width: 28em){ 



}




@media only screen and (min-width: 30.313em){



      
}


@media only screen and (min-width: 33.125em){

    /**Mint Section*/
    #mint_submission_form{
      width: 80%;
    }

}






@media only screen and (min-width: 36.875em){

  /**Option Buttons*/
  .page_option_buttons{
    position: -webkit-sticky; 
    position: sticky;
    top: 0em;
  }

  .page_option_buttons .margins{
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
  }

  .option_buttons{
    left: auto;
    width: 10em;
    transform: none;
    margin: 0em .7em 0em 0em;
  }

  /**Mint Section*/
  #mint_submission_form{
    padding: 1.5em 2em .5em 2em;
  }


  /**My Collection Styles.*/
  .collection_item, .redeemable_item{
    width: 50%;
  }


  /**Minting Styles*/
  .status_holder{
    font-size: 1em;
  }



}





@media only screen and (min-width: 38.5em){ 



}

  
@media only screen and (min-width: 41em){ 


  
  
}


@media only screen and (min-width: 44em){ 

 /**Option Buttons*/
  .option_buttons{
    width: 12em;
  }

   /**Instruction Styles*/
    #redemptions_grid {
      display: grid;
      width: 100%;
      max-width: 80em;
      grid-gap: 2.5em;
      height: auto;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "one two"
        "one two"
        "three four"
        "three four"
        "five six"
        "five six"
        "seven ."
        "seven .";
    }

    #minting_grid {
      display: grid;
      width: 100%;
      max-width: 80em;
      grid-gap: 2.5em;
      height: auto;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "one two"
        "one two"
        "three four"
        "three four"
        "five six"
        "five six";
    }

}




@media only screen and (min-width: 48em){
  

  /**Investment Summary Styles*/
  #investment_info{
    grid-gap: 0em;
    align-items: flex-start;
    background: #0B0E10;
    border-radius: 2em;
    border: 1px solid #1B1B1B;
    box-shadow: 0 0 10px #000;
  }

  .investment_info_block{
    width: 25%;
    text-align: left;
    background-color: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
  }

  .investment_info_block h5{
    font-size: 2em;
  }



  /**Modal Styles*/
  .nft_modal_holder{
    padding: 3.5em 4em; 
  }

  /**Storage Sell Price.*/
  .sell_flex_left{
    width: 50%;
    padding-right: 1em;
  }

  .sell_flex_right{
    width: 50%;
    padding-left: 1em;
  }


}


@media only screen and (min-width: 50em){





}




@media only screen and (min-width: 54em){

  /**Basic Styles*/
  .mp_sections{
    position: relative;
    padding: 4em 0em;
  }


  /**Mint Section*/
  #mint_submission_form{
    padding: 2.5em 3em 1.5em 3em;
  }

  /**NFT Modals*/
  .nft_modal_intro_flex_left{
    width: 40%;
    padding-right: 2em;
  }

  .nft_modal_intro_flex_right{
    width: 60%;
    padding-left: 2em;
  }

  /**NFT Modal Storage Styles*/
  .nft_modal_top_flex_left{
    width: 40%;
    padding-right: 2em;
  }

  .nft_modal_top_flex_right{
    width: 60%;
    padding-left: 2em;
  }

  .nft_modal_top_flex_right h3{
    font-size: 3em;
  }

}



@media only screen and (min-width: 59em){

  /**Discovery Modal Styles*/
  .discovery_modal_flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .discovery_modal_flex_left{
    width: 40%;
  }

  .discovery_modal_flex_right{
    width: 60%;
  }

  /**NFT Modals*/
  .nft_modal_cover{
    width: calc(100% - 44em);
  }

  .nft_modal_holder{
    width: 44em;
  }

  .nft_modal_close_button{
    top: 4.5em;
    left: auto;
    right: 44em;
    margin-left: 0;
  }


  #marketplace_modal .nft_modal_cover, #home_modal .nft_modal_cover{
    width: 5em
  }

  #marketplace_modal .nft_modal_holder, #home_modal .nft_modal_holder{
    width: calc(100% - 5em);
  }

  #marketplace_modal .nft_modal_close_button, #home_modal .nft_modal_close_button{
    left: 3em;
  }



  /**Form Styles*/
  #nf-field-2-container, #nf-field-5-container, #nf-field-7-container,
  #nf-field-14-container, #nf-field-17-container, #nf-field-19-container{
    display: inline-block;
    width: 46.5%;
    margin-right: 2.5%;
  }

  #nf-field-3-container, #nf-field-6-container, #nf-field-8-container,
  #nf-field-15-container, #nf-field-18-container, #nf-field-20-container{
    display: inline-block;
    width: 46.5%;
    margin-left: 2.5%;
  } 


  /**My Collection Styles.*/
  .collection_item, .redeemable_item{
    width: 33.3%;
  }





  /**Dashboard Styles*/
  #dashboard_menu{
    left: 0em;
    width: 13.5em;
    border: none;
    padding: 5em 0em 5em 1em;
  }

  #dashboard_button{
    display: none;
  }

  #dashboard_content{
    margin: 1em 2em 1em 14.5em;
  }

  /**Dashboard Content Styles*/
  .dashboard_content_block{
    position: relative;
    margin: 3em 0em;
  }


  
}


@media only screen and (min-width: 64em){
    
    /**Instruction Styles*/
    #redemptions_grid {
      max-width: 80em;
      grid-template-columns: repeat(3, 1fr);
      grid-template-areas:
        "one two two"
        "one two two"
        "one two two"
        "three four five"
        "three four five"
        "three four five"
        "six six seven"
        "six six seven"
        "six six seven";
    }

     #minting_grid {
      max-width: 80em;
      grid-template-columns: repeat(3, 1fr);
      grid-template-areas:
       "one one two"
        "one one two"
        "one one two"
        "three four four"
        "three four four"
        "three four four"
        "five five six"
        "five five six"
        "five five six";
    }

    .instructions_big_flex{
      display: flex;
      flex-wrap: wrap;
      justify-content: justify;
      flex-direction: row-reverse;
      align-items: flex-end;
    }

    .instructions_flex_right{
      width: 40%;
    }

    .instructions_flex_left{
      width: 60%;
    }

    .ib_img_block_lr{
      height: 12em;
    }

}



@media only screen and (min-width: 67em){


} 



@media only screen and (min-width: 70em){

  /**Sticky Option Buttons*/
  .page_option_buttons{
    top: 3.5em;
  }

  /**Modal Product*/
  .nft_modal{
    top: 3.5em;
  }



  /**My Collection Styles.*/
  .collection_item, .redeemable_item{
    width: 25%;
  }


  /**Dashboard Styles*/
  #dashboard_content{
    margin: 1em 2.5em 1em 15em;
  }


}




@media only screen and (min-width: 80em){
  
  /**Mint Section*/
  #mint_submission_form{
    padding: 3.5em 4em 2.3em 4em;
  }
   


  /**Discovery Modal Styules*/
  #marketplace_modal .nft_modal_cover, #home_modal .nft_modal_cover{
    width: calc(100% - 70em);
  }

  #marketplace_modal .nft_modal_holder, #home_modal .nft_modal_holder{
    width: 70em;
  }

  #marketplace_modal .nft_modal_close_button, #home_modal .nft_modal_close_button{
    left: auto;
    right: 70em;
  }


  
}


@media only screen and (min-width: 95em){


}

@media only screen and (min-width: 105em){

   /**My Collection Styles.*/
  .collection_item, .redeemable_item{
    width: 20%;
  } 
}

@media only screen and (min-width: 115em){

  
}