#nav_bug_report{
    background-color: #0000FF66;
    top:37%;
    left:350px;
    transform: translateY(-50%);

    opacity: 0.5;
    /* font-size: 0.8em; */
}

#nav_bug_report2{
    background-color: white;
    z-index: 500;
    top:25px;
    left:25px;
}

#nav_bug_report, #nav_bug_report2{
  
    padding: 5px 40px 10px;  
    position: absolute;
    transition: all .1s;
}

#nav_bug_report2:hover{
    background-color: #0000FFCC;
    color:white;
}

#nav_bug_report:hover{
    opacity: 1;
}

#nav_bug_report img, #nav_bug_report2 img{
    height:25px;
    margin-left:10px;

}

/* ***************************************************** */
/* HTML Normalization */
/* ***************************************************** */
html,body{
    background: var(--diamond-black);
    font-family: var(--body-font);
    height: 100vh;
    line-height: 1;
    margin: 0;
    overflow:hidden;
    position: fixed;
    width: 100vw;
}

a{
    text-decoration: none;
    color:inherit;
}

a:visited{
    color:inherit;
}

h1,h2,h3,h4,h5,h6{
    font-weight:inherit;
}

main{
    height:calc(100% - var(--nav-height));
    width:100vw;
    display: flex;
}


mango-template{
    position: relative;
}

.align_left {
    text-align: left;
}  

.align_right{
    text-align: right;
}

.bold_text{
    font-weight: bold;
}

.centered{
    text-align: center;
}

.automargin{
    margin: auto;
}

.auto_overflow{
    max-height: 60vh;
    overflow-y: auto;
}

.between{
    display: flex;
    justify-content: space-between;
}

.centered{
    text-align: center;
}

.center_abs{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.column{
    display: flex;
    flex-direction: column;
}

.clickable{
    cursor: pointer;
}

.clipboard_msg{
    display:none;
    position: absolute;
    color:var(--text-dark);
    font-style: italic;
}

.column_2{
    columns: 2;
}

.float_right{
    float: right;
}

.float_left{
    float: left;
} 

.flex{
    display: flex;
}

.full_width{
    width:100%;
}

.half_width{
    width:50%;
}

.hidden{
    position: absolute;
    z-index: -10;
    visibility: hidden;
}

.indent{
    text-indent: 10px;
}

.inline_block{
    display:inline-block;
}

.italic{
    font-style: italic;
}

.json_pre{
    word-break: break-all;
    max-width: 60vw;
    white-space: break-spaces;
}

.menu_content{
    border-radius: 5px;
    border:1px solid var(--border-dark);
    position: absolute;
    background-color: var(--light-background);
    padding:10px;
}

.middle{
    vertical-align: middle;
}

.red_text{
    color: var(--text-raven);
}

.std_link{
    color:#1071e5 !important;
    font-style: italic;
}


.relative{
    position: relative;
}

.underline{
    text-decoration: underline;
}

::-webkit-scrollbar {
    display: none;
}
body ::-webkit-scrollbar {
    display: none;
}


/* ***************************************************** */
/* Ice Wallet CSS */
/* ***************************************************** */

.action_bar{
    text-align: center;
    margin-top: 25px;
}

.broadcast_question_mark{
    height: 15px;
    transform: translateY(-10px);
}

.ice_broadcast_btn{
    width: 110px;
    margin: auto;
    margin-top: 30px;
}

.ice_show{
    
    display:none;
}

.ice_show, .ice_hide{
    opacity: 0;
}

.ice_header_icon{
    height:65px;
  }

  .ice_header h2{
    /* color: var(--text-dark); */
    text-align: center;
    font-size: 2em;
  }

  .ice_preview_pair{
    transform:translate(-50%,-5%);
  }

  .ice_preview_sign{
    transform:translate(-50%,-50%);
  }

  .ice_preview_sign_video, .ice_preview_pair_video{
    height: 275px;
  }

  
  .ice_sign_video_container{
    overflow: hidden;
    width: 275px;
    margin: auto;
  }

  .icewallet_icon{
    height: 75px;
  }

  #ice_confirm_btns{
    /* display: flex;
    justify-content: space-between;
    width: 50%;
    margin: 25px auto 0 auto; */
}

#ice_confirm_subheader{
    text-align: center;
    font-size: 1.8em;
}

  #ice_ui_container{
    display: flex;
    justify-content: space-between;
    padding: 40px;
    /* width:650px; */
  }

  #ice_ui_container > div{
    /* width:45% */
    /* width:300px; */
    /* height:300px; */
  }

  #ice_transmit_image_container img{
    width:260px;
    margin:auto;
  }

  #ice_transmit_container, #ice_receive_container{
    background-color: var(--text-dark);
    color:var(--text-light);
    padding: 15px 15px 45px 15px; 
    border-radius: 15px;
  }

  
  #ice_transmit_image_container img{
    border:5px solid white;
  }

  #ice_receive_container{
    margin-left: 40px;
}

  #ice_preview_target{
    position: absolute;
    height:215px;
    width:215px;
    border: 2px solid var(--text-raven);
    top:50%;
    left:50%;
    border-radius: 10px;
  }

  #ice_preview_video_container{
    width: 330px;
    overflow: hidden;
  }

  #ice_transmit_container, #ice_receive_container{
    height:320px;
    width:350px;
  }

  #ice_sign_precontainer{
    padding: 35px;
  }

  #ice_sign_container{
    min-width: 25vw;
    padding: 40px;
  }

  #jab_count_container{
    text-align: center;
    width:100%;
    position: absolute;
    bottom:0px;
    transform: translateY(125%);
    /* color:var(--text-light); */
    color:var(--text-raven);
    /* background-color: var(--header-background); */
  }

  #pair_ice_container{
    padding: 0px 40px 40px 40px;
  }

  #pair_ice_header h2{
    text-align: center;
    font-size: 1.8em;
  }

  #pair_ice_ui_container{
    height: 320px;
    width: 350px;
    background-color: var(--text-dark);
    color: var(--text-light);
    padding: 15px 15px 45px 15px;
    border-radius: 15px;
  }

  .pair_ice_subheader, .sign_ice_subheader{
    background-color: var(--header-background);
    text-align: center;
    width:calc(100% + 30px);
    transform: translate(-15px,-15px);
    border-radius: 15px 15px 0 0;
    padding:20px 0;
  }

  .pair_ice_subheader{
    margin-bottom: 10px;
  }

  .sign_number_icon {
    height: 16px;
    transform: translateY(2px);
  }

  .circle_text{
    border: 1px solid var(--text-light);
    border-radius: 50%;
    padding:2px 5px;
  }

  /* PUT THIS IN APPROPRIATE MEDIA QUERY OR QUERIES */
  @media (max-width:500px){

    .ice_header_icon{
        height: 65px;
    }

    .ice_broadcast_btn{
        margin-top: 15px;
    }

    .ice_preview_pair{
        transform: translate(-50%, 0%);
        height: 185px !important; /* overrides default #ice_preview_target values */
        width: 185px !important; /* overrides default #ice_preview_target values */
    }

    .ice_preview_sign{
        height: 100px !important; /* overrides default #ice_preview_target values */
        width: 120px !important; /* overrides default #ice_preview_target values */
    }

    .icewallet_icon{
        height: 65px;
        margin: 10px;
    }

    .pair_ice_subheader{
        padding: 20px 0;
        font-size: 1em;
    }

    .sign_ice_subheader{
        padding: 5px 0;
        font-size: 1em;
    }
    
    .sign_number_icon{
        height: 10px;
    }

    .ice_sign_video_container{
        width: 145px;
        height: 115px;
    }

    .ice_preview_pair_video{
        height: 325px;
        width: 300px;
    }

    #ice_preview_sign_video{
        height: 300px;
        width: 230px;
        margin: auto;
    }

    #ice_preview_video_container{
        width: 275px;
        height: 250px;
    }

    #ice_transmit_image_container img{
        height: 100px;
        width: 100px;
    }

    #ice_ui_container{
        padding: 20px 40px;
        flex-direction: column;
    }

    #ice_sign_container{
      height: 70vh;
      width: 70vw;
      overflow-y:scroll;
      padding: 15px;
      color: var(--text-dark);
      /* transform: translateY(-40px); */
    }

    #ice_receive_container, #ice_transmit_container{
        height: 125px;
        width: 180px;
        margin: auto;
    }

    #ice_receive_container{
        margin-top: 20px;
    }

    #pair_ice_container{
        width: 84vw;
        padding: 0;
    }

    #pair_ice_header h2{
        font-size: 1.2em;
    }

    #pair_ice_ui_container{
        height: 300px;
        width: 85%;
        margin: 10px;
    }

}

/* ***************************************************** */
/* Access CSS */
/* ***************************************************** */

.access_header{
    font-size: 2.2em;

}

.access_header_logo{
    height: 50px;
    left: 50%;
    margin-left: 15px;
}

.access_header > div:nth-child(1){
    font-size: 0.6em;        
}

.access_header > div:nth-child(2){
    font-weight: bold;
}

.arrow_left{
    height: 30px;
}

.checkmark{
    height: 25px;
    transform: translateY(15px);
    margin-right: 10px;
}


.confirmation_circle, .rejection_circle{
    width: 16px;
    height: 16px;        
    border-radius: 10px;
    border: 1px solid gray;
    position: absolute;
    right:10px;
    top:45%;
    transform: translateY(-50%);
}

.confirmation_circle{
    background-image: linear-gradient(#9cce9f, #189020);  
}

.rejection_circle{
    background-image: linear-gradient(#bf2b2b, #fa0000);  
}

.import_seed_row{
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
    font-size: 0.9em;
}

.password_container span:first-child{
    font-size: 0.6em;        
}

.pin{
    text-align: center;
    line-height: 30px;
}

.pin_row_container{
    margin-top: 20px;
}
  
.registration_btn_container{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.seedword_input{
    text-indent: 10px;
    margin-top: 5px;
}

.terms_btn_container{
    display: flex;
    justify-content: center;
}

.terms_btn_container > a{
    width: 100px;
}

.triangle{
    height: 35px;
    margin-right: 30px;
}

#cancel_btn{
    padding: 5px 15px;
}

#import_seed_create_btn{
    padding: 5px 15px;
}

#access_heading{
    font-size: 2em;
    display: flex;
    flex-direction: column;
    left: 50%;
    top: 50%;
}

#access_subheading{
    font-size: 1em;
    display: flex;
    flex-direction: column;
    left: 50%;
    top: 50%;
}

#access_seedphrase_container{
    min-height: 30vh;
}

#asset_viewer_content{
    color: var(--text-dark);
    /* transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; */
    margin-bottom: 15px;
}

#checkbox_container{
    align-items: center;
    display: flex;
    font-size: 0.6em;
}

#confirm_seed_index{
    margin-left: 35px;
}

#exclaimation_point{
    height: 20px;
}

#import_seedphrase_contents{
    margin-top: 25px;
    margin-bottom: 25px;
    column-count: 2;
    font-size: 0.8em;
}

#login_btns_container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0px 20px 0px 20px;
}

#login_btns_container > :first-child{
    margin-bottom: 5px;
    font-size: 0.8em;
}

#login_container{
    /* width: 300px;
    height: 320px; */
}

#login_inputs{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px 30px 0px 20px;
}

#login_header{
    font-size: 2em;
    padding: 0px 20px 0px 20px;
}

#password_input{
    background: url(/resources/images/ui/key.svg) no-repeat 12px 6px;
    background-size: 12px;
    font-size: 0.6em;
    margin-top: 3px;
    text-align: left;
    padding: 3px 0px 0px 32px;
    margin-bottom: 30px;
}

#password_input_1{
    text-indent: 10px;
    background: url(/resources/images/ui/key.svg) no-repeat 12px 5px;
    background-size: 12px;
    padding-left: 21px;
    margin: 3px 0px 17px 0px;
}

#password_input_2{
    text-indent: 10px;
    background: url(/resources/images/ui/key.svg) no-repeat 12px 5px;
    background-size: 12px;
    padding-left: 21px;
    margin: 3px 0px 7px 0px;
}

#password_message{
    position: absolute;
    left: 50%;
    bottom: 10vh;
    transform: translateX(-50%);
    color: red;
}


#pin_cancel_btn{
    margin: 10px 0px 0px 0px;
    font-size: 0.8em;
}

#pin_triangle{
    height: 31px;
    margin-right: 10px;
}

#username_input{
    background: url(/resources/images/ui/user_icon.svg) no-repeat 12px 5px;
    background-size: 13px;
    font-size: 0.8em;
    margin-top: 1.5%;
    text-align: left;
    padding-left: 30px;      
}

#create_username_input{
    background: url(/resources/images/ui/user_icon.svg) no-repeat 12px 5px;
    background-size: 13px;
    font-size: 0.8em;
    margin-top: -0.3%;
    text-align: left;
    text-indent: 10px;
    padding-left: 20px;
    margin: 3px 0px 17px 0px;
}

#registration_container{
    padding: 35px;
}

#registration_header img{
    height: 20px;
    width: 20px;
}

#register_modal_btn{
    font-size: 0.8em; 
    margin-top: 10px;
}

/* Create your account template, three button */
#registration_type_btns{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30vh;
    margin: auto;
    margin-top: 40px;
}

#registration_type_btns > a{
    margin-bottom:15px;
}

#remember_container{
    margin-top: 5px;
    margin-bottom: 25px;
}

#remember_container label{
    display:inline-block;
    font-size:0.7em;
}

#seedphrase_contents{
    columns: 3 3vw;
    column-gap: 50px;
    font-size: 0.8em;
    padding-left: 16%;
    min-height: 8vh;
}

#seedphrase_confirmation_container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 33vh;
}

#seedphrase_confirmation_contents{
    margin: 45px 0 45px 0;
    padding: 15px 35px 15px 15px;
    height: 30px;
}

#seed_confirmation_input{
    text-indent: 10px;
    width: 200px;
}

#seedphrase_footer #checkbox_container{
    font-size: 0.8em;
}

#sign_in_header{
    font-size: 0.7em;
    text-align: center;
}

#terms_container{
    max-width: 80vw;
}

#terms_content_container{
    font-size: 0.47em;
    margin: 25px 0px -10px 0px;
}

#terms_x{
    float: right;
    transform: translateY(-85px);
}

#user_terms{
    display: inline-block;
}

#userinfo_contents{
    font-size: 1.1em;
    margin-top: 30px;
}

#userinfo_inputs{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 300px;
}

#userpin_btn_container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0px 40px;
}


/* ***************************************************** */
/* Viewer CSS */
/* ***************************************************** */

#asset_viewer_container{
    min-width: 30vw;
    min-height: 50vh;
}

#main_asset_search_container{
    width:80%;
    margin:auto;
}

#main_asset_search_container input[type="text"]{
    width: 100%;
    background: url(/resources/images/ui/search.svg) no-repeat 7px 3px;
    background-size: 16px;
    text-indent: 30px;
    outline: 1px solid var(--text-dark);
    color: var(--text-dark);
}

#main_asset_search_autocomplete{
    background-color: var(--content-background);
    border-radius: 10px;
    position: absolute;
    max-height: 30vh;
    overflow-y: auto;
    width: 74%;
    margin-left: -1px;
}

#main_asset_search_autocomplete .autocomplete_item:first-child{
    margin-top:10px;
}

#main_asset_search_autocomplete .autocomplete_item{
    cursor: pointer;
    padding: 2px 10px;
}

#main_asset_search_autocomplete .autocomplete_item:hover{
    background-color: var(--text-dark);
    color:var(--text-light);
}

.active_autocomplete{
    background-color: var(--text-dark) !important; /*Overrides default autocomplete list styling */
    color:var(--text-light) !important;
}

#viewer_header{
    text-align: center;
}

#viewer_header h1{
    font-size: 2.5em;
    /* margin-left: 35px; */
    transform: translate(0px, 0px);
}

#viewer_header h2{
    font-size: 0.85em;
    /* margin: 0px 0px 0px 35px; */
    /* transform: translate(0px, -35px); */
}

#viewer_header img{
    height: 65px;
}

#viewer_media_container{
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden;
    background-color: var(--light-background);
    position: relative;
    z-index: 0;
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
    transform-style: flat;
    -webkit-transform-style: flat;
    margin-top: 20px;
}

#viewer_media_container video{
    max-height: 50vh;
}

/* ***************************************************** */
/* Nav Bar CSS */
/* ***************************************************** */

#nav_buttons{
    display: flex;
    /* filter: brightness(0.3); */
}

#nav_container{
    align-items: center;
    background: var(--nav-background);
    display: flex;
    font-size: 1.3em;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 50px;
    position: relative;
    transition: background-color 0.3s ease;
}

#nav_container:hover{
    background-color: var(--diamond-black);
}

#nav_container .logo_container {
    color: var(--text-light);
    font-family: var(--logo-font);
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
}

#nav_container .logo_container img{
    height: calc(var(--nav-height) * 0.6);
    /* transform: translate(-55%,-5%); */
}

#nav_container .logo_container div{
    margin-left: -20px;
}

/* .logo_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lands_logo {
    max-width: 100%;
    height: auto;
} */

#nav_container:hover .lands_logo {
    content: url('/resources/images/Lands_Collection_Logo_white.avif');
}

.nav_explorer{
    height: calc(var(--nav-height) * 0.33);
    margin-bottom: 2px;
    margin-left: 30px;
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(150deg) brightness(103%) contrast(95%);
}

.nav_search{
    height:calc(var(--nav-height) * 0.37);
}

.sequoir_link{
    color: var(--sequoir-color);
    font-family: var(--sequoir-font);
    font-size: 1.5em;
    font-weight: bold;
}

.sequoir_link_container div{
    font-size:0.75em;
}



/* ***************************************************** */
/* PIN CSS */
/* ***************************************************** */

.active_pin{
    border:2px solid var(--diamond-black) !important; /* needs to override default border to avoid layout jumps */
}

.pin_entry_message{
    text-align: center;
}

.pin_input{
    background-color: var(--content-background);
    border: 2px solid var(--light-background);
    border-radius: var(--button-border-radius);
    height: var(--mobile-pin);
    width: var(--mobile-pin);
    align-content: center;
    text-align: center;
}

.pin_row{
    display: flex;
    justify-content: space-between;
    max-width: 300px;
    margin: auto;
    margin-top: 5px;
}
/* 
.dialog_button_bar{
    position: absolute;
    bottom:35px;
    height:35px;
    width: 100%;
    text-align: center;
    
} */

/* ***************************************************** */
/* Theme CSS */
/* ***************************************************** */

/* Ice wallet button */

.text_light{
    color: var(--text-light) !important; /* has to override default button styling */
}

.blue_btn{
    color: var(--text-light) !important; /* has to override default button styling */
    background-image: var(--blue-btn);
}

 .container{
    background: var(--diamond-white);
    /* border: 2px solid var(--diamond-red);
    border-radius: var(--border-radius); */
    color: var(--text-black);    
    margin: auto; 
    padding: 3vh 1vw;
    position: relative;
}

.subcontainer{
    border: 2px solid var(--diamond-red);
    border-radius: var(--border-radius);
}

.error_feedback{
    color: var(--text-raven);
    margin:10px auto 10px auto;
}
.input_label{
    font-size:0.7em;
}

/* .main_access_logo{
    transform: translateX(100px);
} */

/* basic button and input styles for all */

.arrow_btn{
    padding: 11px;
    height: 20px;
    border-radius: 100%;
    background: var(--diamond-btn-red);
    box-shadow: 0px 7px 5px rgb(148 148 148 / 25%);
    cursor: pointer;
}

.main_btn{
    align-items: center;
    border: 2px double transparent;
    background-origin: border-box;
    background-clip: padding-box,border-box;
    box-shadow: 0 7px 5px rgb(148 148 148 / 25%);
    border-radius: var(--button-border-radius);
    color:var(--text-dark);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
}

.main_input{
    background-color: var(--light-background);;
    background-size: 12px;   
    border: 1px solid var(--border-dark);
    border-radius: var(--button-border-radius);
    height: 25px;
    /* width: calc(100% - 25px); */
}

.access_input{
    width: calc(104%); 
}

.creation_access_input{
    width: calc(100%);
}

/* colors */

.black{
    background-image: var(--diamond-btn-black);
    color: var(--diamond-white) !important; /* overrides inherit rule for visited links which turns button text black */
}

.red{
    background-image: var(--diamond-btn-red);
    color: var(--diamond-white) !important; /* overrides inherit rule for visited links which turns button text black */
}

.red_outline{
    border-color: var(--diamond-btn-outline);
}

.yellow {
    background-image: var(--button-border);
}

.yellow_outline{
    background-image: var(--button-border-secondary);
}

.secondary_container {
    background-color: var(--diamond-grey);
    border-radius: 10px;
    padding: 25px;
    /* margin: 25px 0px; */
}

.secondary_send_container {
    background-color: var(--diamond-grey);
    border-radius: 10px;
    padding: 8px 50px 15px 10px;
    margin: 25px 0px;
}

/* Create common class for both buttons? */
/* Import seed button */
#submit_btn{
    background-color: transparent; 
    border: none;
    cursor: pointer;
}

#create_account_btn{
    background-color: transparent; 
    border: none;
    cursor: pointer;
    margin-top: 20px;
    padding: 10px 15px;
    text-indent: 10px;
}


/* ***************************************************** */
/* Hover CSS */
/* ***************************************************** */


.search_hover{
    position: relative;   
}

.search_hover div{
    color: white;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s, opacity 0.3s linear; 
    transition: visibility 0s, opacity 0.3s linear;
}
 
.search_hover:hover{
    cursor: pointer;
}
 
.search_hover:hover div{
    visibility: visible;
    opacity: 0.7;
}
  
.hover_text{
    left: 50%;
    position: absolute;
    white-space: nowrap;
    transform: translateX(-50%);
}

.explorer_hover{
    position: relative;   
}
 
.explorer_hover div{
    color: white;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s, opacity 0.3s linear; 
    transition: visibility 0s, opacity 0.3s linear;
    margin-left: 17px;
}

.explorer_hover:hover{
    cursor: pointer;
}
 
.explorer_hover:hover div{
    visibility: visible;
    opacity: 0.7; 
}

.main_btn:hover, .arrow_btn:hover{
    box-shadow: inset 2px -7px 11px rgba(80, 92, 51, .3);
}
    
.main_btn:active, .arrow_btn:active, .active_btn{
    box-shadow: inset 0 3px 3px rgba(0, 0, 0, .5) !important;    
}

.blue_btn:hover{
    box-shadow: inset 2px -7px 11px rgba(80, 92, 51, 0.17);
}
          
.blue_btn:active{
    box-shadow: inset 0 3px 7px #0d0d0d !important;   
}

.icon_hover{
    filter: brightness(120%);
}

.icon_hover:hover{
    filter: brightness(100%);
}

.icon_hover:active{
    filter: brightness(90%);
    border-radius: 5px;
}

.svg_hover:hover{
    filter: brightness(0.80);
}

.svg_hover:active{
    filter: brightness(0.50);
}

.asset_menu_hover:hover{
    filter: brightness(0.75);
}

.asset_menu_hover:active{
    filter: brightness(0.50) !important;
}

.attachment_menu_hover:hover{
    filter: invert(54%) sepia(7%) saturate(358%) hue-rotate(56deg) brightness(89%) contrast(83%);
}

.attachment_menu_hover:active{
    filter: invert(83%) sepia(5%) saturate(40%) hue-rotate(71deg) brightness(90%) contrast(87%) !important;
}

/* ***************************************************** */
/* Landing page CSS */
/* ***************************************************** */

/* ***************************************************** */
/* Wallet CSS */
/* ***************************************************** */

.address_container{
    padding: 30px 30px 50px 30px;
    color: var(--text-dark);
}

.admin_card_image{
    height:50px !important; /* must override default media styling for wallet asset cards */
    width:auto !important;
    object-fit: unset !important;
    border-radius: 0 !important;
    margin:auto;
}


.asset_menu{
    align-items: center;
    border: 1px solid var(--text-red);
    background-color: var(--text-dark);
    border-radius: 10px;
    color: var(--text-light);
    display:none;
    flex-direction: column;
    font-weight: lighter;
    /* height: 35px; */
    justify-content: space-between;
    padding: 15px;
    position: absolute;
    transform: translate(3px, 19px);
    z-index: 3;
    right:0;
    top:15px;
}

.asset_menu img{
    margin:5px 5px 10px 5px; 
    height:25px;
    filter: brightness(100);
}

.asset_card_menu_btn{
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(150deg) brightness(103%) contrast(95%);
    cursor: pointer;
    z-index: 2;
    position: relative;
    text-align: center;
    width:25px;
    /* border: 1px solid red; */
    transform: translateX(50%);
}


.asset_card_menu_control:checked ~ .asset_menu{
    display: flex;
}

.asset_viewer_attachment_container{
    padding: 5px;
}

.asset_viewer_attachments_container{
    position: absolute;
    display: inline-flex;
    flex-wrap: wrap;
}

.asset_viewer_description_container{
}

.asset_viewer_description_heading{
    margin-top: 0px;
    font-weight: bold;
}

.asset_viewer_field{
    font-weight: bold;
}

.asset_viewer_field_container{
    margin: 0px 0px 20px 0px;    
}

.asset_viewer_link_container{
    text-decoration: underline;
}

.asset_viewer_link_container{
    margin: 15px 0px 10px 0px;
}

.asset_viewer_tile{
    align-items: center;
    background: rgb(18, 30, 70);
    background: var(--asset-tile-background);
    background-origin: content-box;
    background-position-y: 40px;
    border: 1px solid black;
    border-radius: 8px;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    font-size: 0.7em;
    height: var(--asset-tile-size);
    justify-content: space-between;
    width: var(--asset-tile-size);
    position: relative;
    image-rendering: pixelated;
    opacity: 0.85;
    transition: opacity 0.1s linear;
}
.asset_viewer_tile:hover{
    opacity: 1;
}
.asset_viewer_tile > img, .asset_viewer_tile > video{
    height:100%;
    width:100%;
    object-fit: cover;
    border-radius: 8px;
}

.asset_viewer_tile_contents{
    display: flex;
    height: 100%;
    width: 100%;
}

.asset_viewer_tile_contents img{
    height: 45px;
    margin: auto;
}

.asset_wallet_img{
    height: 7
    5px;
}

.attachment_file_type{
    float: right;
    transform: translateY(30px);
    text-transform: uppercase;
}

.bulk_send_counter{
    text-align: left;
}

.column_2 > li{
    font-size: 0.8em;
    margin: 0px 15px 0px 10px;
    text-align: left;
}

.down_arrow{
    filter: brightness(20);
    height: 19px;
    transform:translateX(-5px);
}

.flip_btn{
    content: url('/resources/images/ui/flipbtn_red.png') !important;
    transform: rotateY(180deg) translateY(-110%)!important;
    float:left !important;
}

.info_btn{
    content: url('/resources/images/ui/infobtn_red.png');
}

.asset_card_btn_align{
    float:right;
    transform: translateY(-110%);
    height: 40px;
}

.asset_bothside{
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}

.flip{
    transform: rotateY(180deg) !important;
}

.center-flip{
    transform: rotateY(180deg) translateX(50%) !important;
}

.asset_frontside, .asset_backside{
    /* backface-visibility: hidden;
    transform-style: flat;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: flat; */
}

.mobile_search{ /* name change for this incoming */
    margin-left: 15px;
    display: flex;
    vertical-align: middle;
    z-index: 2;
}

.mobile_toggle{ /* name change for this incoming */
    transform: translate(35px,0px);
}

.no_ipfs_content{
    background: var(--wallet-card-background);
    min-height: 70vh;
}

.no_ipfs_backside{
    background: var(--no-ipfs-background);
    /* background-position-x: 45%; */
    /* min-height: 70vh;
    min-width: 33vw; */
}

.send_rvn_container{
    min-height: 35vh;
}

.send_recipient_input{
    width: 250px; 
}

.send_rvn_address{
    margin-left: 18px;
    text-indent: 10px;
    width: 310px;
}

.tools_info{
    margin: 20px 0px;
    font-size: 13px;
}

.view_seed_icon{
    margin-right: 10px;
    transform: translateY(4px);
}

.viewer_metadata_iframe{
    height:70vh;
    min-width: 33vw; 
}

.wallet_address_list_item{
    display: flex;
    padding: 2px;
    color: var(--text-dark);
}

.wallet_address_icon{
    margin-right: 10px;
}

.wallet_address_index{
    text-align: right;
    width:30px;
}

.wallet_asset_header {
    align-items: center;
    background-color: var(--header-background);
    border-radius: 8px 8px 0 0;
    display: flex;
    font-size: 1.25em;
    font-weight: bold;
    height: 25px;
    justify-content: space-between;
    position: absolute;
    width: calc(100% - 20px);
    padding: 5px 10px;
    
}

.wallet_asset_header > div:first-child{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wallet_card_click_overlay{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    z-index: 1;
    /* background-color: rgba(255, 0, 0, 0.5); */
}

.walletview_toggle:checked ~ img{
    transform: rotate(180deg) translateY(0px);
}

.add_recipient_btn{
    height:24px;
    position: relative;
    float: right;
    transform: translate(40px, -40px);
}

.remove_recipient_btn {
    height: 21px;
    position: absolute;
    float: right;
    transform: translate(17.5px, 2px);
}

#address_list_switch_container{
    position: absolute;
    right:10px;
    bottom:10px;
}

#address_list_switch ~ label:after {
    content: "External";
    display: block;
    font-size:0.75em;
}

#address_list_switch:checked ~ label:after{
    content: "Change";
}

#address_list_switch ~ label img{
    height: 20px;
}

#address_list_switch:checked ~ label img{
    transform: rotate(180deg);
}

#address_list_header{
    display:flex;
    position: relative;
    flex-direction: column;
}

#address_list_header > h2 {
    text-indent: 75px;
    margin: -15px 0px 5px 0px;
}

#advanced_tools{
    background: var(--diamond-grey);
    padding: 40px;
    margin: 30px 0px;
    color: var(--text-dark);
    border-radius: 20px;
    border: 2px solid var(--diamond-red);
}

#advanced_tools_btns {
    margin-top: 50px;
    font-size: 13px;
}

#advanced_tools_header {
    font-size: 1.4em;
    margin-bottom: 40px;
}

#advanced_tools_options .testnet_switch{
    height: 20px;
}

#advanced_tools_btns div:not(:last-child){
    margin-bottom: 15px;
}

#amount_owned{
    position: absolute;
    left:0;
    bottom:0;
    transform: translate(25%,50%);
    font-size:0.8em;
    font-style: italic;
}

#asset_container{
    min-width: 30vw;
    /* min-height: 50vh; */
    transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}

#asset_name_container{
    margin-top: 15px;
}

#asset_send_heading{
    font-size: 1.5em;
}

#asset_send_import_container{
    display:none;
}

#asset_send_import_container label{
    width: 140px;
}

#asset_send_recipient_container{
    overflow: auto;
    max-height: 50vh;
}

#builder_btn{
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 90%;
    transform: translateX(65%);
}

#builder_img{
    height: 80px;
}

#builder_availability_message{
    position: absolute;
    right: 10px;
    top: 34px;
    font-size: 0.8em;
    vertical-align: middle;
}

#display_btn{
    padding: 5px 20px;
    margin-right: 15px;
}

#display_icon{
    margin-right: 5px;
}
    
#input_box{
    display: none;
}

#import_file_label{
    flex-wrap: nowrap;
}

#inputs_hidden_checkbox{
    position: absolute;
    z-index: -10;
    visibility: hidden;
}

#inputs_hidden_checkbox:checked ~ #input_box{
    display: block;
}

#inputs_hidden_checkbox:checked ~ #inputs_menu_button{
    /* color: transparent;
    line-height: 0; */
}

#inputs_hidden_checkbox:checked ~ #inputs_menu_button::after {
    /* display: block;
    line-height: initial;
    color: initial; */
}

.input_output_btns{
    padding: 8px 9px;
    font-size: 0.8em;
}

#inputs_outputs_container{
    align-items: center;
    display: flex;
    height: 75px;
    justify-content: space-between;
    margin: 0 auto;
}

.input_output_img{
    vertical-align: middle;
    margin-right: 5px;
    height: 20px;
}

.ipfs_hash{
    text-indent: 30px !important; /* overrides default text-indent to make space for ipfs logo */
    margin: 30px 0px 50px 0px;
    background: url(/resources/images/ui/ipfs.svg) no-repeat 7px;
    background-size: 17px;
    background-color: var(--light-background);
    
}

.issue_send_icon{
    height: 20px;
    padding: 0px 5px;
}

.new_address_loader{
    padding: 125px;
    height: 50px;
}

.new_address_mail_icon{
    padding: 10px 10px 0px 15px;
}

.dynamic_preloader{
    animation: spinner 3s linear infinite;
}

#media_slideshow_content{
    text-align: center;
}

#media_slideshow_content img{
    max-height: 80vh;
    max-width: 80vw;
    object-fit: contain;
}

#media_slideshow_asset_name{
    text-align: center;
    height:50px;
    color: var(--text-dark);
}

#memo_container{
    text-align: left;
}

#memo_button img{
    height:25px;
    width:25px;
    vertical-align: middle;
    margin-right: 15px;
}

.memo_btn_pos{
    width: 135px !important; /* overrides default width for send container labels */
}

.memo_view_asset_name{
    display: flex;
    justify-content: center;
}

#memo_view_container{
    color: var(--text-dark);
}

.memo_view_icon{
    filter: brightness(0%);
    height: 35px;
    transform: translateY(5px);
}

.message_line{
    text-decoration: underline;
}

.message_link{
    color: var(--text-dark);
}

#mobile_pin_input{
    position: absolute;
    opacity:0;
    z-index: -10;
    /* height:1px; */
}

#netmode_toggle:checked ~ .net_selector:after {
    content: "Testnet";
}

.net_selector:after {
    content: "Mainnet";
    font-size: 1.25em;
}

#new_address {
    font-size: 1em;
    text-align: center;
}

#new_address_qr{
    margin: auto;
    margin-top: 45px;
}  

#output_box{
    display: none;
}

#output_box_checkbox:checked ~ #output_popup{
    display: none;
}

#outputs_container{
    margin-left: 30px;
}

#outputs_hidden_checkbox{
    position: absolute;
    z-index: -10;
    visibility: hidden;
}

#outputs_hidden_checkbox:checked ~ #output_box{
    display: block;
}

#outputs_hidden_checkbox:checked ~ #outputs_menu_button{
    /* color: transparent;
    line-height: 0; */
}

#outputs_hidden_checkbox:checked ~ #outputs_menu_button::after {
    /* display: block;
    line-height: initial;
    color: initial; */
}

#send_rvn_btn_container{
    color: var(--text-dark);
    transform: translateY(15px);
    margin: 30px;
}

#send_rvn_btn_container img.dynamic_preloader{
    width: 25px;
}

#send_container label{
    color: var(--text-dark);
}

#send_receive_btns {
    justify-content: space-between;
}

#tx_confirm_action {
    font-size: 1.5em;
}
#tx_confirm_asset {
    font-size: 1.7em;
    /* transform: translateY(-37px); */
    text-align: center;
}
#tx_confirm_container{
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    /* height: 230px; */
    justify-content: space-between;
    padding: 10px;
}

#tx_confirm_contents{
    /* display: flex;
    flex-direction: column;
    /* height: 50%; */
    /* justify-content: space-between; */
}

#tx_confirm_contents > div:not(:last-child){
    margin-bottom:15px;
}

#tx_confirm_fee{
    text-align: center;
}

#tx_to_label{
    text-align: left;
    display: inline;
}

#rvn_amount_container{
    margin-bottom: 15px;
    margin-top: 20px;
}

#receive_btn{
    width: 140px;
    height: 15px;
    margin-left: 25px;
}

#refresh_btn{
    height: 25px;
    margin-top: 17px;
}

#receive_container{
    color: var(--text-dark);
    min-width: 20vw;
    min-height: 45vh;
}

#recipient_address_container{
    margin: 15px 0px;
}

#recipient_address_input{
    margin-left: 8px;
}

#search_input{
    /* height: 22px;
     */
    font-size:1.1em;
    width:30vw;
    border-radius: 5px;
    border: 1px solid var(--diamond-black); ;
    margin-left: 20px;
    /* position: absolute; */
}

#send_btn{
    width: 140px;
    height: 15px;
}

#send_container{
    color: var(--text-dark);
    text-align: center;
    max-height: 80vh;
    padding: 20px 35px;
}

#send_container h1{
    font-size: 2.5rem;
}

.send_container_labels{
    display: inline-block;
    vertical-align: middle;
    width: 35px;
}

.burn_container_labels{
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    margin-right: 5px;
}

.burn_btn{
    /* background: url(/resources/images/ui/burn.svg) no-repeat 50%/50%, linear-gradient(#F9F9F9, #F9F9F9), radial-gradient(circle at left top, #FFCF66, #FFBF34); */
}

.bulk_send_container{
    /* min-height: 20vh; */
    min-width: 10vw;
    max-height: 75vh;
}

.bulk_send_container h1{
    font-size: 2em !important; /* overrides default send_container h1 rule */
}

.confirmation_recipient_line{
    font-family: monospace;
    display:flex;
    width:100%;
    justify-content: space-between;
}

.confirmation_recipient_addr{
    /* text-align: left; */
}

.confirmation_recipient_amount{
    /* text-align: right; */
}

.send_question_mark{
    right: 0;
    top: 0;
    position: absolute;
    height: 15px;
    filter: invert(12%) sepia(45%) saturate(1724%) hue-rotate(185deg) brightness(50%) contrast(95%);
}

.send_btn{
    
}

#send_rvn_btn{
    margin: auto;
    margin-top: 30px;
    padding: 10px 50px;
}

.send_rvn_button{
    vertical-align: middle;
    margin-right: 5px;
    height: 20px;
}

.show_more_btn{
    border-radius: 0px 0px 10px 10px;
}

.show_more_text{
    transform:translateX(-5px);
}

#testnet_switch{
    height: 20px;
}

#tools_arrow{
    margin-right: 15px;
    height: 22px
}

#view_seed_container{
    text-align: left;
    color: var(--text-dark);
    padding: 30px 45px;
}

#view_seed_btns{
    margin-top:25px;
}

#view_seed_container > h1{
    font-size: 1.4em;
}

#pin_container > h2{
    font-size: 0.8em;
    margin-bottom: 30px;
}

#wallet_address_list{
    max-height: 60vh;
    overflow-y: auto;
    padding: 15px 20px 15px 5px;
    border-radius: 10px 10px 0px 0px;
}

#wallet_asset_grid{
    height: 60vh;
    overflow-y: auto;
    background-color: var(--diamond-grey);
    border-radius: var(--border-radius);
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--asset-tile-size));
    justify-content: center;
    grid-gap: 25px;
    padding: 40px;
}

#wallet_display{
    margin: 3vh auto;
    min-height: 70vh;
    width:85vw;
    flex-grow: 1;
    overflow: scroll;
}

#wallet_display_toolbar{
    align-items: center;
    background: var(--diamond-grey);
    border-radius: var(--border-radius-btn);
    display: flex;
    padding: 10px 0px;
    justify-content: space-between;
    margin: 0px 10px 50px 10px;
    color: var(--diamond-black);
    position: relative;
}

#wallet_display_toolbar img{
    height: 22px;
}

#wallet_info{
    color: var(--text-dark);
}

#wallet_loading_indicator{
    position: absolute;
    top: -23px;
    left: 50%;
    
    font-size: 0.9em;
}

#wallet_display_template{
    display: block;
    width: 100%;
}

#address_loading_wallet{
    text-align: center;
}

.wallet_loading_indicator{
    -webkit-animation: pulse 1.5s infinite ease-in-out;
    -o-animation: pulse 1.5s infinite ease-in-out;
    -ms-animation: pulse 1.5s infinite ease-in-out;
    -moz-animation: pulse 1.5s infinite ease-in-out;
    animation: pulse 1.5s infinite ease-in-out;
    font-style: italic;
}

#wallet_sort{
    margin-right: 30px;
}

#wallet_tools{
    margin:5vh 3vw 0 3vw;
    width:15vw;
    color: var(--text-dark);
    padding: 10px 30px;
    margin-right: 75px;
}

#wallet_tools_btns{
    font-size: 0.8em;
}

#wallet_tools_btns > div{
    display: flex;
    margin: 25px 0;
}

#wallet_tools_btns > div a{
    width:45%;
}

#wallet_tools_btns img{
    height: 15px;
    margin-right: 5px;
}

#wallet_sort ~ label[for="wallet_sort"]{
    background-image: url(/resources/images/ui/sort_black.png);
    background-size: 25px;
    height:25px;
    width:25px;
    display:inline-block;
    cursor: pointer;
}

#wallet_sort:checked ~ label[for="wallet_sort"]{
    background-image: url(/resources/images/ui/sort_reverse_black.png);
}



/* ***************************************************** */
/*  Viewer CSS */
/* ***************************************************** */

.testnet_text_pos{
    transform: translateX(-2px);
}

#asset_viewer_menu{
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(10px,-4px);
}

#asset_viewer_blockchain_data{
    text-align: center;
    font-size:1.25em;
    margin-top:15px;
}

#asset_viewer_title{
    font-size: 2.5em;
    text-align:center;
    position: relative;
    width:fit-content;
    left:50%;
    transform: translateX(-50%);
    margin-top: 35px;
    padding: 0px 40px;
}

#asset_menu_checkbox:checked ~ #viewer_menu_options{
    display: flex;
}

#hash_clipboard_msg{
    color: var(--text-raven);
    transform: translateY(10px);   
}

#link_clipboard_msg{
    color: var(--text-raven);
    transform: translateY(10px);   
}

#no_info_container > div{
    font-style: italic;
}

#non_custom_backside > div{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    padding:50px;
    border-radius: 15px;;
    background-color: var(--content-background);
} 

#non_custom_backside h1{
    margin: 0 0 10px 0;
    text-align: left;
}

#non_custom_backside img{
    margin-right: 5px;
    height: 25px;
}

#show_more_label{
    /* display:none; */
    cursor: pointer;
    z-index: 1000;
}

#viewer_menu_button{
    position: absolute;
    right:0;
    transform: translate(-25px, 7px);
}

#viewer_menu_options{
    display:none;
    /* transform:translate(-50%,-150%); */
    top:0;
    transform: translate(-50%,-100%);
    font-size:0.5em;
}

.asset_media{
    max-height: var(--viewer-media-maxheight);
    max-width: var(--viewer-media-maxwidth);
    text-align: center;
}

.asset_media img{
    object-fit: contain;
    image-rendering: pixelated;
    /* min-height: 30vh; */
    max-height: var(--viewer-media-maxheight);
    max-width: var(--viewer-media-maxwidth);
}

.asset_menu_btn{
    display: flex;
    flex-direction: column;
}

.viewer_menu_item{
    cursor: pointer;
    margin: 0px 5px;
    color: #0e2748;
}

.viewer_menu_item img{
    height: 24px;
    filter: brightness(0.2);
}


/* ***************************************************** */
/*  Builder CSS */
/* ***************************************************** */

.add_attach{
    height: 35px;
}

.add_custom_close{
    transform: translateY(8px);
}

.arrow_btn{
    min-width: 20px;
    min-height: 20px;
}

.question_mark{
    filter: invert(12%) sepia(45%) saturate(1724%) hue-rotate(185deg) brightness(50%) contrast(95%);
}

#builder_container{
    position: relative;
    margin: auto;
    min-width: 21vw;
    display:none;
    /* display: flex; */
    /* align-items: center; */
    /* height: calc(100vh - 75px); */
    /* padding:50px; */
    padding-right: 25px;
    color: var(--text-dark);
}

#builder_container img.dynamic_preloader{
    width: 25px;
    margin: auto;
}

#asset_asset_name {
    width: 310px;
    margin-bottom: 30px;
}

#asset_quant_info{
    display:flex;
    justify-content: space-between;
    margin-top:5px;  
}
#asset_quant_info div{
    width: 40%;
}

#asset_units {
    width: 120px
}

#builder_attachment_container{
    display:flex;
    
}

#builder_attachment_container > div{
    position: relative;
}

#builder_attachment_container > div > span:last-child{
    position: absolute;
    top:0;
    right:0;
}

#builder_container label.builder_lbl{
    font-size:0.8em;
    cursor: pointer;
    line-height: 2;
}


#builder_container h1{
    margin:0 auto;
    text-align: center;
}

#builder_container h2{
    margin: 0 auto;
    text-align: center;
    font-size:.9em;
    color:var(--text-dark);
    margin-bottom:5px;
}

#builder_container h2 img{
    height:15px;
}

#builder_container iframe{
    max-height:50vh;
}

#builder_container .container{
    padding: 40px 40px 60px 40px;
    min-width:15vw;
    /* margin-bottom: 100px; */
}

#builder_custom_attachment_menu{
    display: none;    
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(6.5vw, -5vh);
}

#builder_submit_btn{
    padding: 10px 25px;
}

#custom_asset_content{
    transform: rotateY(180deg);
    position: absolute;
    top:0;
    right:0;
    opacity: 0;
    overflow-y: auto;
    max-height: calc(var(--viewer-media-maxheight) - 45px);
    max-width: calc(var(--viewer-media-maxwidth) - 120px);
    min-height: 66%;
    /* transform-style: flat;
    -webkit-transform-style: flat; */
    display: none;
    padding: 45px 60px 0px 60px;
    width: calc(100% - 120px);
    height: calc(80% - 45px);
    z-index: 10;
    /* background-color: var(--light-background); */
      /* transition: opacity 0.8s ease-in; */
}

#custom_text_data{
    padding:0 7px;
    margin-top: 15px;
}

#description_close{
    transform: translateY(-25px);
}

#field_container input {
    width: 240px;
    text-indent: 10px;
}

#description_container textarea{
    width:500px;
    height:50px;
    font-family:inherit;
    text-indent: 10px;
    outline: 1px solid var(--text-dark);
    color: var(--text-dark);
}

#url_container input{
    width: 500px;
    text-indent: 10px;
}

.custom_data_container > div{
    margin-bottom:15px;
}


#existing_qty_container{
    font-size: 0.8em;
    white-space: nowrap;
}

.builder_action_bar{       
    position: relative;
    margin-top:25px;
}

#builder_action_bar{
    height:75px;
    position: relative;
    /* margin-top: 35px; */
    width:100%;
    transform: translateY(15px);
    text-align: center;
}

.builder_txid_container{
    display: inline-flex;
    margin-bottom: 15px;
    color: var(--text-dark);
    font-size: 1rem;
    top:50%;
}

#builder_custom_attachment_disp img{
    height: 35px;
}

#builder_custom_attachment_disp:checked + #builder_custom_attachment_menu{
    display:block;
}

#asset_meta_options{
    margin: 35px;
    min-width: 17vw;
}

#asset_meta_options input[type="radio"]:checked + label{
    color: var(--text-light) !important; /* has to override default button styling */
    background-image: var(--blue-btn) !important;
}

#asset_meta_options div{
    display:flex;
    justify-content: space-between;
    margin: 0 auto 40px auto;
}

#asset_meta_options label{
    width:40%;
    padding: 4px 3px;
}

.attachment_container{
    background-color: var(--content-background);
    border-radius: 10px;
    padding: 10px;
}

#custom_content_container{
    display: flex;
    max-height: 61vh;
    overflow: auto;
}

#custom_icons{
    margin: 15px 40px 35px 45px;
    height: 35px;
    max-width: 310px;
    position: relative;
}

.ipfs_hash_attachment_input{
    width:500px;
    text-indent: 10px;
}

.ipfs_hash_attachment_msg{
    position: absolute;
    right: 35px;
    top: 7px;
    font-size: 0.8em;
}

#primary_media_dropzone{
    width: 18vw;
    height: 30vh;
    margin: 15px 10px 30px 30px;
    border-radius: 15px;
    border:1px solid var(--text-dark);
}

#primary_media_container{
    max-width: 40vw;
    max-height:50vh;
}

#primary_media_container > img, #primary_media_container > video{
    object-fit: contain;
    height:100%;
    width:100%;
}

#upload_title{
    font-size: 1.4em;
    margin-top: 20px;
}


.active_uploader_drop{
    border-color: var(--border-yellow) !important;
   
}

.attachment_preloader{
    height:20px;
}

.close_primary_media {
    float: left;
    transform: translate(-30px, -215px);
}


.magic_radio{
opacity:0;
position: absolute;
}

.builder_nav{
    height:66px;
    display:block;
}

.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 1;
    max-width: 22vw;
    margin: auto;
    margin-bottom: 20px;
}
.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 5px solid #D9E2ED;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #D9E2ED;
    margin-bottom: 6px;
}

.stepper-item.active {
    background-color: var(--text-dark);
    font-weight: bold;
}

.stepper-item.completed .step-counter {
    background-color: var(--text-dark);
    color: #ffffff;
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #4bb543;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
}

.stepper-item:first-child::before{
    content: none;
}

.stepper-item:last-child::after{
    content: none;
}

.upload_container{
    width:50%;
    margin:auto;
    border: 2px solid var(--text-dark);
    text-align: center;
    cursor: pointer;
    background: var(--diamond-black);
    color: var(--text-light);
}

.upload_container div{
    margin:5px;
    font-size: 0.8em;
}

#upload_container{
    padding: 10px 30px 25px 30px;
    transform: translateY(45px);
    margin-top: -45px;
    margin-bottom: 60px;
}

#upload_svg{
    padding-top: 25px;
    height: 85px;
}

#upload_svg_custom{
    padding-top: 30px;
    height: 100px;
}

.ipfs_icon{
    height: 20px;
    transform: translateY(4px);
}

#upload_icon{
    height: 20px;
    transform: translateY(4px);
}

.ipfs_icon_pos{
    margin-right: 3px;
}

.value{
    color: #617EA3;
}


/* ***************************************************** */
/*  INPUT/OUTPUT STYLING                                 */
/* ***************************************************** */

.tx_popup_label{
    margin-bottom: 10px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.3em;
}

.ok_btn{
    display: inline-block;
    width: 5vw;
    margin-bottom: 15px;
}


#ok_btn_container{
    margin-top: 10px;
    text-align: center;
}

.input_output_btns img{
    filter: invert(11%) sepia(82%) saturate(1621%) hue-rotate(187deg) brightness(56%) contrast(95%);
}

.tx_popup{
    color: var(--text-dark);
    z-index: 2;
    position: absolute;
    height: calc(100% - 30px);
    width: calc(100% - 50px);
    overflow: auto;
    border-radius: 30px;
    top:0;
    left:0;
    border:none !important; /* overrides default menu_content styling */
    padding:25px 25px 5px 25px;
    display:flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.tx_input_line, .tx_output_line{
    text-align: left;
    margin-bottom: 20px;
    font-family: monospace;
    display:flex;
}

.tx_link{
    margin-right:10px;
}


/* ***************************************************** */
/*  EXPLAINER CSS                                        */
/* ***************************************************** */

#user_message_container{
    text-align: left;
    padding: 0px 35px 35px 35px;
}

#user_message_content{
    display: none;
    position: absolute;
    font-size: 1rem;
    font-weight: normal;
    top:0;
    right:0;
    min-width: 25vw;
    transform: translate(92%,-75%);
    z-index: 10;
    border: 2px solid var(--text-dark);
    border-radius: 10px;
} 

.user_message_triangle{
    height: 25px !important; /* overrides builder h2 img rule for questionmark */ 
    transform: translate(0px, 40px);
    padding-bottom: 5px;
}

#message_line_one{
    text-indent: 30px;
    padding: 2px;
}

/* 
.explainer_container{
    background: var(--light-background);
    border: 2px solid var(--border-yellow);
    border-radius: var(--border-radius);  
    margin: auto; 
    padding: 3vh 1vw;
}

#ok_btn_container{
    text-align: center;
    display:none;
}

#user_message_container{
    right: 0;
    bottom:0;
    transform: translate(-40px, -40px);
    padding: 30px;
    font-size: 0.63em;
}

#user_message_container img{
    float: left;
    height: 33px;
    padding: 0px 10px 0px 0px;
}

#user_message_content{
    display: none;
    position: absolute;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.1;
} */

/* ***************************************************** */
/*  RVN CHART CSS                                        */
/* ***************************************************** */

#rvn_chart{
    min-width: 40vw;
    min-height: 53vh;
    padding: 0px 115px 15px 115px;
    color: var(--text-dark);
}

#rvn_chart img{
    height: 150px;
    transform: translate(-102px, 50px);
}

#rvn_chart_container{
    min-height: 35vh;
    border: 2px solid #254063;
}

#rvn_footer_calendar{
    float: right;
    transform: translate(0px, -30px);
}

#rvn_footer_link{
    text-align: center;
}

#rvn_footer_link div{
    margin-top: 20px;
}

#rvn_header{
    margin-top: -35px;
}

#rvn_chart_title{
    font-size: 40px;
    position: absolute;
    left: 0;
    transform: translate(113px, 95px);
}

a#sequoir_btn{
    color: var(--text-raven);
}

/* ***************************************************** */
/*  Animations CSS                                       */
/* ***************************************************** */

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(0.99); opacity: 0.7; }
    50% { -webkit-transform: scale(1); opacity: 1; }
    100% { -webkit-transform: scale(0.99); opacity: 0.7; }
}

@keyframes pulse {
    0% { transform: scale(0.99); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.99); opacity: 0.7; }
}  


/* ***************************************************** */
/*  Input CSS */
/* ***************************************************** */


#action_bar input[type="button"]{
    margin:auto;
    transform: translateY(20px);
}

#send_container input[type="text"], #send_container input[type="number"]{
    /* border: 1px solid red; */
    width: 295px;
    text-indent: 10px;
    outline: 1px solid var(--text-dark);
    color: var(--text-dark);
}

#builder_container input[type="text"], #builder_container input[type="number"]{
    outline: 1px solid var(--text-dark);
    color: var(--text-dark);
}

input[type=checkbox] {
    accent-color: var(--diamond-black); ;
}

#main_asset_search_container input[type="number"]{
    outline: 1px solid var(--text-dark);
    color: var(--text-dark);
}

#wallet_display_toolbar input[type="text"]{
    outline: 1px solid var(--text-dark);
    color: var(--text-dark);
}