@import url('https://fonts.cdnfonts.com/css/galano-grotesque-alt');

body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'Galano Grotesque Alt', sans-serif;
}

main {
    display: flex;
}

/* ////// SIDE BAR MENU //////  */
.sidebar-menu {
    padding: 2rem 2rem 2rem 4rem;
    position: fixed;
    height: 100%;
    overflow: auto;
    background-color: #ffffff;
    border-right: 2px solid #00000026;
}

.sidebar-menu::-webkit-scrollbar{
    display: none;
}

.logo {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
}

.logo a {
    font-size: 1.437rem;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}

.create-new-token {
    margin-bottom: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #00000026;
}

.create-new-token button {
    border: 1px dashed #00000026;
    border-radius: 0.5rem;
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    font-family: 'Galano Grotesque Alt', sans-serif;
    color: #01C09B;
    background-color: transparent;
    cursor: pointer;
}

.my-token, .marketplace, .account, .help {
    border-radius: 0.5rem;
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.my-token a, .marketplace a, .account a, .help a {
    text-decoration: none;
    color: #01C09B;
    font-size: 1rem;
}

.marketplace.active {
    background-color: #01C09B;
}

.marketplace.active a {
    color: #ffffff;
}

.help {
    margin-top: 70%;
    margin-bottom: 0;
    border-top: 1px solid #00000026;
    border-radius: 0;
}

/* ////// MAIN SECTION //////  */
.main-page {
    margin-left: 17.6rem;
    width: 100%;
    padding-bottom: 3rem;
}

/* top bar  */
.top-bar {
    /* display: flex; */
    padding: 1.5rem 3rem;
    border-bottom: 2px solid #00000026;
    align-items: center;
}

.menu-button, .close-menu-btn {
    display: none;
}

.search-connect {
    display: flex;
    justify-content: end;
    gap: 2rem;
    align-items: center;
}

.top-bar input {
    width: 50%;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #00000026;
    padding-left: 0.8rem;
    font-size: 1.25rem;
    background-color: transparent;
    cursor: pointer;
}

.top-bar input::placeholder {
    color: #01C09B;
}

.top-bar input:focus {
    outline: none;
    color: #01C09B;
}

.top-bar button {
    font-size: 1.25rem;
    color: #ffffff;
    padding: 0.4rem 1.5rem;
    background-color: #01C09B;
    border: 2px solid #01C09B;
    font-family: 'Galano Grotesque Alt', sans-serif;
    cursor: pointer;
    border-radius: 0.5rem;
}

.logo-mobile {
    display: none;
}


/* market place content  */
.marketplace-content, .property-info, .create-token-container {
    padding: 2rem 3rem;
    background-color: #F2FAFF;
}

.marketplace-content h1, .marketplace-content h2 {
    font-size: 2rem;
    margin-top: 0;
}

.marketplace-content h2 {
    margin-top: 5rem;
}

.market-items, .most-green {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.item, .most-green-item {
    padding: 0.6rem;
    border: 0.95px solid #00000026;
    border-radius: 0.5rem
}

.marketplace-content a {
    text-decoration: none;
}

.asset-image {
    width: 100%;
}

.owner-and-veriry {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.owner-and-veriry small {
    color: #01C09B;
}

.item-name {
    font-size: 1.1875rem;
    font-weight: bold;
    margin-top: 0;
    color: black;
}

.item-price {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
}

.item-price p {
    font-size: 1.275rem;
    font-weight: bold;
    margin: 0;
    color: black;
}

.item-price p .price-figure {
    font-size: 0.5938rem;
    font-weight: 400;
    color: #01C09B;
}

/* ////// PROPERTY INFO //////  */
.property-info {
    display: flex;
    gap: 2rem;
    height: 100%;
    
}

.property-imgs {
    width:100%;
}

.info-image {
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

.img-sections {
    display: flex;
    gap: 1rem;
}

.img-sections img {
    width: 22%;
    border-radius: 0.3rem;
    cursor: pointer;
}

.img-sections img.active {
    border: 4px solid #01C09B;
}

.property-name {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 0.3rem;
}

.property-text-info .owner-and-veriry small {
    font-size: 1rem;
}

.property-text-info .item-price {
    margin-top: 1rem;
    margin-bottom: 0.3;
}

.property-text-info .item-price p {
    color: #01C09B;
    font-size: 2.5rem;
}

.property-text-info .item-price p .price-figure {
    font-size: 1rem;
}

.property-details {
    font-size: 1rem;
    color: #01C09B;
    margin-top: 0;
}

.property-text-info button {
    width: 100%;
    padding: 0.5rem 0;
    font-size: 1.5rem;
    font-family: 'Galano Grotesque Alt', sans-serif;
    background-color: #01C09B;
    border: 2px solid #01C09B;
    border-radius: 0.5rem;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
}

/* ////// SECTION FOR CREAT NEW TOKEN //////  */
.create-token-container {
    height: 100%;
}

.marketplace img.active {
    filter: invert(100%);
}

.create-token-container h1 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 3rem;
}

.number-sections {
    display: flex;
    align-items: center;
}

.number-sections a {
    text-decoration: none;
}

.number-sections p {
    padding: 0.3rem 0.8rem;
    margin: 0;
    background-color: #D0D5D9;
    border-radius: 100%;
    color: #ffffff;
    cursor: pointer;
}

.number-sections hr {
    width: 10rem;
    margin: 0;
    border: 2px solid #D0D5D9;
}

.number-sections p.active {
    background-color: #01C09B;
    box-shadow: 0 0 4px 4px rgba(163, 143, 143, 0.3);
}

.number-sections hr.active {
    border: 2px solid #01C09B;
}

/* asset selection */
.form-sections {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.form-sections div {
    cursor: pointer;
}

.form-sections h3 {
    font-size: 1rem;
    margin: 0;
    color: #6E7172;
}

.form-sections p {
    color: #ABB0B3;
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
}

.form-sections h3.active {
    color: #000000;
}

.form-sections p.active {
    color: #707375;
}

.asset-selection-form, .proof-form, .token-detail-form, .sustainability-form {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.asset-selection-form span, .proof-form span, .token-detail-form span, .sustainability-form span {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.asset-selection-form input, .asset-selection-form select, .asset-selection-form textarea, .proof-form input {
    
    height: 3rem;
    margin-bottom: 2rem;
    border: 1px solid #0000001F;
    font-size: 1rem;
    padding-left: 0.8rem;
    background-color: #00000008;
    font-family: 'Galano Grotesque Alt', sans-serif;
    color: #707375;
    border-radius: 0.5rem;
}

.asset-selection-form small, .proof-form small, .token-price-alert, .fractions-alert, .branch-alert, .how-alert, .example-alert {
    color: red;
}

.asset-selection-form small.inactive, .proof-form small.inactive, .token-price-alert.inactive, .fractions-alert.inactive, .branch-alert.inactive, .how-alert.inactive, .example-alert.inactive {
    display: none;
}


.asset-selection-form input::placeholder {
    color: #8E8F94;
}

.asset-selection-form input:focus, .asset-selection-form select:focus, .asset-selection-form textarea, .proof-form input {
    outline: none;
}

.asset-selection-form textarea {
    height: 8rem;
    padding-top: 0.8rem;
}

.next-btn, .proof-next-btn, .token-detail-btn, .sustainability-btn {
    width: 100%;
    padding: 0.5rem 0;
    font-size: 1.5rem;
    background-color: transparent;
    border: 2px solid #0000001F;
    font-family: 'Galano Grotesque Alt', sans-serif;
    color: #CBD5D7;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

/* Proof of ownership */
.input-file {
    display: none;
}

.proof-form label {
    margin-bottom: 2rem;
    height: 8rem;
    border: 1px solid #0000001F;
    padding: 0.8rem;
    background-color: #00000008;
    font-family: 'Galano Grotesque Alt', sans-serif;
    border-radius: 0.5rem;
}

.proof-form label div {
    border: 1px dashed #0000001F;
    border-radius: 0.5rem;
    height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.drag-file {
    margin: 0;
    font-size: 0.75rem;
    color: #8E8F94;
    width: 40%;
    text-align: center;
}

.browse-file {
    color: #0199FA;
    margin: 0;
    font-size: 0.75rem;
    text-decoration: underline;
}

.display-file div {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.display-file .created-file {
    justify-content: space-between;
}

.display-file {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.display-file div p {
    margin: 0;
    color: #0000008C;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.created-file img:last-child {
    cursor: pointer;
}

.upload-btn {
    width: 70%;
    padding: 0.5rem 0;
    font-size: 1.5rem;
    background-color: transparent;
    border: 2px solid #0000001F;
    font-family: 'Galano Grotesque Alt', sans-serif;
    color: #CBD5D7;
    border-radius: 0.5rem;
    cursor: pointer;
}

.add-new-doc-container {
    display: flex;
    width: 70%;
    justify-content: center;
    gap: 2rem;
}

.add-new-doc, .upload-new-doc {
    font-size: 1rem;
    padding: 0.5rem 0.7rem;
    font-family: 'Galano Grotesque Alt', sans-serif;
    color: #CBD5D7;
    border: 2px dashed #CBD5D7;
    border-radius: 0.5rem;
    background-color: transparent;
    width: fit-content;
    margin-top: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upload-new-doc {
    border: 1px solid #CBD5D7;
    padding: 0.5rem 1.5rem;
}


.add-new-doc p {
    margin: 0;
}

.proof-next-btn {
    margin-top: 2rem;
}

.proof-next-btn.active, .add-new-doc.active,.upload-btn.active, .label-file.active, .select-span.active, .upload-new-doc.active {
    display: none;
}


/* .token-detail */
.token-detail-form .usdt-amount, .how-many-fractions input, .sustainability-form select, .sustainability-form textarea {
    height: 3rem;
    border: 1px solid #0000001F;
    font-size: 1rem;
    padding-left: 0.8rem;
    background-color: #00000008;
    font-family: 'Galano Grotesque Alt', sans-serif;
    color: #707375;
    border-radius: 0.5rem;
}

.token-detail-form input:focus, .sustainability-form select:focus, .sustainability-form textarea {
    outline: none;
}

.token-small, .how-many-fractions .each-fraction, .sustainability-form .small {
    margin-top: 0.2rem;
    margin-bottom: 2rem;
    color: #0000008C;
    font-size: 0.75rem;
}

.is-it-fractional {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.is-it-fractional span {
    margin-bottom: 0;
}

.is-it-fractional input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: #626262;
}

.how-many-fractions {
    display: flex;
    flex-direction: column;
    
}

.how-many-fractions.active {
    display: none;
}


/* .sustainability audit */
.sustainability-form textarea {
    height: 8rem;
    padding: 0.8rem;
}


/* /////////// MEDIA RESPONSIVENESS ////////// */

@media (max-width:1120px) {
    /* ////// PROPERTY INFO //////  */
    .img-sections img {
        width: 20%;

    }

    .img-sections img.active {
        border: 2px solid #01C09B;
    }

    .property-name {
        font-size: 1.5rem;
    }

    .property-text-info .owner-and-veriry small {
        font-size: 0.8rem;
    }

    .property-text-info .item-price p {
        font-size: 1.5rem;
    }

    .property-text-info .item-price p .price-figure {
        font-size: 0.8rem;
    }

    .property-details {
        font-size: 0.8rem;

    }

    .property-text-info button {
        font-size: 1rem;
        border: 1px solid #01C09B;
    }
}

@media (max-width:1070px) {
    /* ////// SIDE BAR MENU //////  */
    .sidebar-menu {
        padding: 2rem;
    }

    /* ////// MAIN SECTION //////  */
    .main-page {
        margin-left: 15.6rem;
    }

    /* top bar  */
    .top-bar input, .top-bar button {
        font-size: 1rem;
    }

    .top-bar button {
        padding: 0.4rem 1rem;
    }

    /* market place content  */
    .market-items {
        gap: 1rem;
    }

    .item-name {
        font-size: 1rem;
    }

    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .number-sections hr {
        width: 8rem;
    }
}

@media (max-width:940px) {
    /* ////// SIDE BAR MENU //////  */
    .sidebar-menu {
        padding: 2rem 1rem;
    }

    .logo img {
        width: 2rem;
        height: 2rem;
    }

    .logo a {
        font-size: 1rem;
    }

    .create-new-token button, .my-token, .marketplace, .account, .help {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    /* ////// MAIN SECTION //////  */
    .main-page {
        margin-left: 12rem;
    }

    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .number-sections hr {
        width: 7rem;
    }
}

@media (max-width:900px) {
    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .form-sections {
        gap: 1rem;
    }

    .form-sections h3 {
        font-size: 0.8rem;
    }

    .form-sections p {
        font-size: 0.6rem;
    }

    .number-sections hr {
        width: 6rem;
    }
}

@media (max-width:875px) {    
    /* ////// MAIN SECTION //////  */
    .create-connect {
        margin-right: 2rem;
    }

    /* market place content  */
    .marketplace-content, .property-info, .create-token-container {
        padding: 2rem 2rem;
    }

    .marketplace-content h1, .marketplace-content h2, .create-token-container h1 {
        font-size: 1.5rem;
    }
}

@media (max-width:800px) {
    /* ////// SIDE BAR MENU //////  */
    .sidebar-menu {
        display: none;
    }

    .sidebar-menu.active {
        display: inline;
        height: fit-content;
    }

    /* ////// MAIN SECTION //////  */
    .main-page {
        margin-left: 0;
    }

    /* top bar  */
    .top-bar {
        display: flex;
        padding: 1rem 3rem;
        justify-content: space-between;
        position: fixed;
        width: 100%;
        background-color: white;
    }

    .logo-mobile {
        display: flex;
        align-items: center;
    }
    
    .logo-mobile a {
        font-size: 1.2rem;
        color: #000000;
        text-decoration: none;
        font-weight: bold;
    }

    .menu-button, .close-menu-btn {
        display: flex;
        font-size: 1.5rem;
        cursor: pointer;
        color: #01C09B;
        margin-right: 4rem;
    }      

    .search-connect {
        /* width: 80%;
        justify-content: space-between;
        gap: 0;
        margin-right: 4rem; */
        display: none;
    }

    /* .top-bar input {
        width: 60%;
    } */

    .close-menu-btn.inactive {
        display: none;
    }

    .menu-button.inactive {
        display: none;
    }

    /* market place content  */
    .marketplace-content, .property-info, .create-token-container  {
        padding-top: 7rem;
    }

    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .number-sections hr {
        width: 7rem;
    }

}

@media (max-width:650px) {
    /* ////// MAIN SECTION //////  */
    /* top bar  */
    .top-bar {
        padding: 1rem 1.5rem;
    }

    /* .top-bar input {
        font-size: 0.8rem;
    }

    .top-bar button {
        padding: 0.3rem 0.8rem;
        font-size: 0.8rem;
    } */

    /* market place content  */
    .market-items, .most-green {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ////// PROPERTY INFO //////  */
    .property-info {
        flex-direction: column;
    }

    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .number-sections p {
        padding: 0.25rem 0.6rem;
        font-size: 0.7rem;
    }

    .number-sections hr {
        width: 6rem;
    }

    .form-sections {
        margin-top: 1rem;
    }

    .asset-selection-form, .proof-form, .token-detail-form, .sustainability-form {
        width: 90%;
    }

    .upload-btn {
        width: 90%;
    }


}

@media (max-width:550px) {
    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .number-sections hr {
        width: 4.5rem;
    }

    .form-sections h3{
        font-size: 0.6rem;
    }

    .form-sections p {
        font-size: 0.4rem;
    }

    .asset-selection-form span,.proof-form span, .token-detail-form span, .sustainability-form span {
        font-size: 0.8rem;
    }

    .asset-selection-form input, .asset-selection-form select, .asset-selection-form textarea, .proof-form input {
        font-size: 0.8rem;
        height: 2rem;
    }

    .asset-selection-form textarea {
        height: 6rem;
    }

    .asset-selection-form small, .proof-form small, .token-price-alert, .fractions-alert, .branch-alert, .how-alert, .example-alert {
        font-size: 0.6rem;
    }

    /* Proof of ownership */
    .add-new-doc-container {
        width: 100%;
    }
    
    .add-new-doc, .upload-new-doc {
        font-size: 0.8rem;
    }

    .token-detail-form .usdt-amount, .how-many-fractions input, .sustainability-form select, .sustainability-form textarea {
        font-size: 0.8rem;
        height: 2rem;
    }

}

@media (max-width:500px) {
    /* market place content  */
    .marketplace-content, .property-info, .create-token-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .asset-selection-form, .proof-form, .token-detail-form, .sustainability-form {
        width: 100%;
    }

    .upload-btn {
        width: 100%;
    }

    .next-btn, .proof-next-btn, .token-detail-btn, .sustainability-btn {
        font-size: 1rem;
    }

    
}

@media (max-width: 450px) {

    .logo-mobile img {
        width: 2rem;
        height: 2rem;
    }

    .logo-mobile a {
        font-size: 1rem;
    }

    
    /* market place content  */
    .market-items, .most-green {
        grid-template-columns: repeat(1, 1fr);
    }

    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .number-sections hr {
        width: 4rem;
        border: 1px solid #D0D5D9;
    }

    .number-sections hr.active {
        border: 1px solid #01C09B;
    }
    
}

@media (max-width:400px) {
    /* ////// PROPERTY INFO //////  */
    .property-name {
        font-size: 1rem;
    }

    .property-text-info .item-price p {
        font-size: 1rem;
    }
    
    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .number-sections hr {
        width: 3.5rem;
    }
}

@media (max-width:375px) {
    /* ////// SECTION FOR CREAT NEW TOKEN //////  */
    .number-sections hr {
        width: 3rem;
    }
}