/**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;  
}



:root {
  --main: #F8F8F8;
  --primary: #33B5FF;
  --secondary: #0080C6;
  --fg: #000118;
}


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

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


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

.option_buttons:hover{
  cursor: pointer;
  color: var(--fg)!important;
  border: 1px solid var(--fg);
}

.option_button_active{
  background: var(--primary) !important;
  color: var(--main) !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;
  left: 0em;
  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: var(--main);
  border-left: 1px solid var(--primary);
  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: var(--main);
  background: var(--primary);
  z-index: 7;
}

.nft_modal_close_button:hover{
  cursor: pointer;
  background: var(--fg);
}

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

#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: var(--fg) !important;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    margin-top: 2em;
    padding: .5em 1em;
    width: 100%;
    background: var(--primary);
    border: 1px solid var(--primary);
    box-sizing: border-box;
}

.modal_cta_button:hover{
    color: var(--main) !important;
    background-color: var(--fg);
    border: 1px solid var(--fg);
}

.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(--primary) calc(var(--p)*1%),#E9E9E9 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: var(--primary);
  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%);
}








/**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 var(--primary);
}

.collection_item:hover .redeemable, .redeemable_item:hover .redeemable{
  color: var(--primary);
  background: var(--fg);
}

.ci_inner{
  position: relative;
  width: 100%;
  padding: 1em;
  border-radius: 1em;
  background: #FFF;
  border: 1px solid #CCC;
  box-shadow: 0 0 10px #DCDCDC;
  overflow: hidden;
}

.ci_rarity_badge{
  font-family: outfitbold, sans-serif;
  font-size: 1.3em;
  color: var(--bg);
  background: var(--primary);
  width: 3em;
  padding: .3em;
  text-align: center;
  border-radius: .5em;
  box-sizing: border-box;
}

.ci_rarity_overlay{
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.ci_img{
  position: relative;
  left: 50%;
  width: 100%;
  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: #FFF;
}

.cf_info h3{
  margin: 0;
}

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


.redeemable{
  position: absolute;
  top: 50%;
  left: -10%;
  width: 130%;
  font-family: outfitbold, sans-serif;
  font-size: 1.4em;
  color: #FDFBF8;
  font-weight: normal;
  text-transform: uppercase;
  height: 2em;
  background: var(--primary);
  color: var(--main);
  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%;
  }
}

/**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;
  border: 1px solid #CCC;
  background-color: #FFF;
  box-shadow: 0 0 10px #DCDCDC;
  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: #F5F5F5;
  border: .5px solid var(--primary);
  overflow-wrap: break-word; 
}

.nft_modal_list .grid > span{
  padding: .7em;
  border: .5px solid var(--primary); 
}

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



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

.nf-field-container .field-wrap .nf-element::placeholder {
    color: var(--fg);
}

.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: var(--fg);
    border: none;
    padding: 1em;
    background: none;
    border-bottom: 1px solid #CCC;
    box-sizing: border-box;
}

#nf-field-7-wrap select, #nf-field-11-wrap select{
  font-family: outfit, sans-serif;
  color: var(--fg);
  background-color: #FFF;
  border: 1px solid #CCC;
}

#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: var(--primary);
    background: none;
    border: 1.5px solid var(--primary);
    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: var(--secondary);
    border: 1.5px solid var(--secondary);
}


#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: var(--fg);
    border: none;
    padding: 1em;
    background: none;
    border-bottom: 1px solid #CCC;
    box-sizing: border-box;
}

 #nf-field-21-wrap select{
  font-family: outfit, sans-serif;
  color: var(--fg);
  background-color: #FFF;
  border: 1px solid #CCC;
}


/**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: #FFF;
    border-radius: 2em;

    border: 1px solid #CCC;
    box-shadow: 0 0 10px #DCDCDC;
    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: var(--main);
  width: 1.5em;
  height: 1.5em;
  background-color: var(--primary);
  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: var(--primary);
}

.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: var(--main);
}

.status_progress{
  position: absolute;
  top: 5em;
  left: 0em;
  height: .5em;
  border-radius: .5em;
  background-color: var(--primary);
}

.status_point{
  position: absolute;
  top: 2.4em;
  font-size: 1.7em;
  width: 1.5em;
  height: 1.5em;
  background: #FFF;
  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: var(--main);
  background: var(--primary);
  border: .15em solid var(--primary);
}

.sp_active{  
  color: var(--main)
  background: var(--primary);
  animation: pulse 3s infinite;
  border: .15em solid var(--primary);
}

@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: var(--secondary);
  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%;
}



/**Dashboard Styles*/
#dashboard_menu{
  position: fixed;
  top: 0em;
  left: -13em;
  width: 13em;
  padding: 5em 0em 5em .5em;
  background: var(--main);
  color: var(--fg);
  border-right: 1px solid var(--fg);
  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: var(--main);
  background: var(--primary);
  z-index: 7;
}

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

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

#dashboard_button:hover{
  cursor: pointer;
  background: var(--fg);
}


/**Dashboard Links Styles*/
#dashboard_links{
  position: relative;
  background-color: var(--main);
  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: var(--fg);
  text-transform: uppercase;
  text-decoration: none;
}

#dashboard_links a:hover, #dashboard_profile_links a:hover, #dashboard_notification_links a:hover{
  color: var(--primary);
}

.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: var(--main);
  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: var(--main);
  margin-top: 0em;
  padding: 1em;
}











/**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: #FFF;
  border: 1px solid var(--primary);
  overflow: hidden;
}

.sci_rarity_badge{
  position: absolute;
  top: 1.5em;
  left: 1.5em;
  font-family: outfitbold, sans-serif;
  font-size: 1.3em;
  color: #FDFBF8;
  background: var(--primary);
  width: 3em;
  padding: .3em;
  text-align: center;
  border-radius: .5em;
  box-sizing: border-box;
  z-index: 2;
}

.sci_img{
  position: relative;
  left: 50%;
  width: 100%;
  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;
}






/**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: var(--main);
  border-radius: 2em;
  border: 1px solid #CCC;
  box-shadow: 0 0 10px #DCDCDC;
}

/**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: #FFF;
  border-radius: 2em;
  border: 1px solid #CCC;
  box-shadow: 0 0 10px #DCDCDC;
  background: none;
}

.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: var(--primary);
}


/**Investment Graph Styles*/
#investment_graph{
  position: relative;
  margin: 3.5em 0em 3.5em 0em;
  padding: 2em 0em 1em 0em;
  background: var(--main);
  border-radius: 2em;
  border: 1px solid #CCC;
  box-shadow: 0 0 10px #DCDCDC;
}

#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: var(--fg);
  text-transform: uppercase;
  padding-right: .5em;
}

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

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





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

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

#notification_close:hover{
  color: var(--primary);
  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: #A0A0A0;
}

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

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

#notification_more_link{
  display: block;
  color: var(--primary);
  text-align: center;
}

#notification_more_link:hover{
  color: var(--secondary)
}














/**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 var(--fg);
}

th {
  position: sticky;
  top: 0em; 
  padding: 1em;
  background-color: var(--fg);
  color: var(--main);
}

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: var(--fg) !important;
  width: 100%;
  background-color: var(--main);
  outline: none;
  padding: .5em;
  border: 1px solid var(--primary);
  border-radius: 0;
}

.sell_flex input::placeholder{
  color: var(--fg);
}






/**Media Queries*/

@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: 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){
  
  .nft_modal_close_button{
    top: 4em;
  }

  /**Investment Summary Styles*/
  #investment_info{
    grid-gap: 0em;
    align-items: flex-start;
    background: var(--main);
    border-radius: 2em;
    border: 1px solid #CCC;
    box-shadow: 0 0 10px #DCDCDC;
  }

  .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: 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){

  
}