@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap');
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Jakarta';
    src: url('/fonts/PlusJakartaSans-Regular.ttf');
}

:root {
    --color1: #e5e5e5;
    --color2: #000000;
    --color3: #e72828;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    /* border: 1px solid blue; */
    /* font-family: 'Jakarta', 'Roboto', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
}

body {
    /* background-color: #e4f4fd; */
    background: white;
}


/* #top-header-div{
  width: 100%;
  backdrop-filter: blur(50px);
} */

.top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    transition: transform 0.3s ease-in-out;
}


/* Locked image overlay styles */

.album-preview-img-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}


/* Locked overlay: use ::before for the lock icon and ::after for the localized text
   This lets us scale the icon independently from the text. */

.album-preview-img-wrapper.locked::before {
    /* Font Awesome lock glyph */
    content: "\f023";
    /* Unicode for lock in Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em;
    /* <--- enlarged icon size */
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    line-height: 1;
    display: block;
}

.album-preview-img-wrapper.locked::after {
    content: attr(data-locked-text);
    /* localized text */
    white-space: nowrap;
    text-align: center;
    position: absolute;
    top: calc(45% + 22px);
    /* place below the icon */
    left: 50%;
    transform: translate(-50%, 0);
    color: white;
    font-size: 15px;
    /* keep text small and readable */
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    line-height: 1;
}


/* Carousel specific overlay styles */

.album-view-img .album-preview-img-wrapper {
    display: inline-block;
    position: relative;
}

.album-view-img .album-preview-img-wrapper.locked::before {
    content: "\f023";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em;
    /* larger for main view */
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.album-view-img .album-preview-img-wrapper.locked::after {
    content: attr(data-locked-text);
    white-space: nowrap;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    color: white;
    font-size: 1.5em;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}


/* Full screen view overlay */

.full-screen-wrapper {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
}

.full-screen-wrapper.locked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.full-screen-wrapper.locked::before {
    content: "\f023";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 80px;
    /* very large for full screen */
    z-index: 11;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.full-screen-wrapper.locked::after {
    content: attr(data-locked-text);
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top: calc(50% + 48px);
    left: 50%;
    transform: translate(-50%, 0);
    color: white;
    font-size: 18px;
    z-index: 12;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.no-wrap {
    white-space: nowrap;
}

.top-header-hidden {
    transform: translateY(-100%);
    /* Moves out of view */
}

.top-header .nav-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    width: 100%;
}

.top-header-left {
    width: 100%;
    position: relative;
}

.top-header-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -10px;
}

.top-header .logo-container {
    margin-right: auto;
}

.top-header .nav-album-name-container {
    margin-top: -13px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: -9999999px;
}

.hide-desktop {
    display: none;
}

.search-bar-d {
    width: 258px;
    height: 35px;
    padding: 3px;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);     */
    /* font-size: 14px; */
    background: #ffffff;
    /* border-radius: 5px; */
    color: #797878;
    margin-right: 4px;
}

.menu-toggle {
    margin-left: 1.3rem;
    /* width: 10px; */
}

.menu-toggle img.hamburger {
    /* margin-right: 10px; */
    /* margin-top: 19px;  */
    margin-top: -5px;
}

.main-menu {
    position: fixed;
    right: -250px;
    top: 0;
    width: 250px;
    height: 100%;
    transition: right 0.5s ease;
    z-index: 999;
}

.main-menu ul {
    list-style: none;
    margin: 0;
    min-height: 100%;
    width: 250px;
    background: rgba(0, 0, 0, 0.9);
}

.main-menu ul li {
    /* padding: 0.75em; */
    display: flex;
    border-bottom: 1px solid #383838;
    padding-left: 0.3rem;
}

.main-menu ul li a {
    display: block;
    color: white;
    padding: 0.75em;
}

.main-menu ul li a.logout,
.main-menu ul li a.logout:target,
.main-menu ul li a.logout:focus {
    color: var(--color3);
    text-decoration: none;
}

#logout-layout-link-id {
    color: red;
    cursor: pointer;
}

.main-menu .user-profile .album-count {
    display: flex;
}

.main-menu li.signup-login-btn {
    margin-top: 50px;
}

.signup-button,
.login-button {
    border: 1px solid white;
}

.signup-button {
    background-color: white;
    color: red;
    border-radius: 50px;
}

.signup-button:hover {
    color: red;
}

.login-button {
    color: white;
    border-radius: 4px;
    margin-right: -20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 2px;
    margin-top: 4px;
}

.login-button:hover {
    color: white;
}

.main-menu .close-menu {
    position: absolute;
    right: 0;
    top: 0;
    color: white;
    padding: 0.7rem;
    margin-right: 0.5rem;
    font-size: x-large;
}

.main-menu:target {
    display: block;
    right: 0;
}

p.close-menu-p {
    color: white;
    position: absolute;
    left: 275px;
    font-weight: bold;
    top: 5px;
    user-select: none;
}

.main-menu:target .close-menu {
    z-index: 1001;
}

.main-menu:target ul {
    position: relative;
    z-index: 1000;
}

.main-menu:target+.backdrop {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: default;
}

.main-menu .user-profile {
    display: flex;
    flex-flow: column;
    margin-bottom: 20px;
}

.main-menu .user-profile span {
    text-align: center;
    margin: 0px 7px;
    line-height: 0.01rem;
    color: white;
}

.main-menu .user-profile span>* {
    line-height: 0.001rem;
}

.main-menu .nav-username {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 10px;
    /* margin-bottom: 30px; */
}

.menu-toggle img.user-icon {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.main-menu img.user-icon {
    height: 56px;
    width: 56px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.album-flex {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-container {
    /* margin-left: 3%;
    margin-right: 3%; */
    display: flex;
    flex-flow: column nowrap;
    /* gap: 10px; */
    min-height: 100vh;
}

.top-header-pad {
    margin-top: 80px;
}

.sales-message.full-width-break {
    width: 100%;
    grid-column: 1 / -1;
    display: none;
}

.hero-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(10vw, 450px, 90vw), 0.1fr));
    justify-content: center;
    gap: 10px;
    /* margin-top: 5px; */
    margin-left: 20px;
    margin-right: 20px;
}

.kb-display1 {
    position: relative;
}

.section2-right {
    position: relative;
    top: 1px;
    width: 28px;
    margin-left: 2px;
    text-decoration: none;
}

.section2-right:hover {
    outline: none;
    text-decoration: none;
}

.section2-left {
    position: relative;
    top: 1px;
    width: 28px;
    margin-left: 2px;
    text-decoration: none;
}

.section2-left:hover {
    outline: none;
    text-decoration: none;
}

.section2-all {
    font-family: Roboto Slab;
    font-size: 12px;
    font-weight: 400;
    line-height: 15.83px;
    text-align: left;
    position: relative;
    top: 1px;
    width: 58px;
}

.section2-rect {
    /* display: inline-block; */
    /* height: 25px; */
    /* position: absolute; */
    /* top: 121px; */
    /* left: 278px; */
    text-align: center;
    line-height: 25px;
    /* border-width: 0.15px 0px 0px 0px; */
    border-style: solid;
    /* opacity: 0; */
    color: black;
    border: 0.115px solid #00000054;
}

.section2-title {
    float: left;
    margin-bottom: 0px;
    margin-left: -1px;
}

.section2-header {
    display: flex;
    flex-wrap: nowrap;
    /* width: 100%; */
    position: relative;
    /* right:0; */
}

.section2-options {
    width: 100%;
    /* float:right; */
}

.kb-scroll-outer-container {
    position: relative;
    /* margin-top: 5px; */
    height: calc(100% - 10px);
    /* Adjust height as needed */
    padding: 0 10px;
    /* Adjust padding to match the shadow size */
    overflow: hidden;
    /* Hide vertical overflow */
    padding: 0;
}

.kb-scroll-inner-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Allow horizontal scrolling */
    overflow-y: hidden;
    /* Hide vertical overflow */
    gap: 10px;
    padding: 10px 0;
    /* Add vertical padding to prevent clipping of shadows */
}

.album-details-paragraph {
    font-weight: 400;
    color: grey;
    margin: 4px 0 4px 0;
}

.hero-section2 {
    gap: 10px;
    margin-top: 5px;
    display: flex;
    flex-wrap: nowrap;
    /* overflow-x: auto; */
    height: 100%;
    overflow: hidden;
    overflow-x: auto;
    /* gap: 10px;
    margin-top: 5px;
    display: flex;
    flex-wrap: nowrap;
    height: 100%; 
    overflow-x: auto;
    overflow-y: hidden; */
    /* display: inline-grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(20vw, 360px, 60vw), 1fr));
    gap: 10px;
    grid-row: 1;
    margin-top: 5px;
    overflow-x: auto; */
}

.section2-pane {
    position: absolute;
    width: 21px;
    text-align: center;
    z-index: 1;
    transition: opacity 0.375s ease;
}

.left-most-card {
    margin-left: 2px;
}

.right-most-card {
    margin-right: 9.45px;
}

.hero-section2-left-pane {
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    /* background: linear-gradient(to right, rgba(229, 245, 253, 1), rgba(229, 245, 253, 0)); */
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}

.hero-section2-right-pane {
    top: 0;
    bottom: 0;
    right: 0;
    /* background: linear-gradient(to left, rgba(229, 245, 253, 1), rgba(229, 245, 253, 0)); */
    background: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}

.album-card-row {
    display: flex;
    flex-basis: 120px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.album-card3 {
    width: 100%;
}

.album-card2 {
    border-bottom: 1px solid #f3f3f3;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: white;
    max-width: 450px;
    flex: 0 0 100%;
    width: 450px;
}

.album-card {
    border-bottom: 1px solid #f3f3f3;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: white;
    /* max-width: clamp(20vw, 450px, 60vw); */
    max-width: 450px;
}

.album-caption {
    padding: 6px;
    /* position: relative; */
}

.album-caption2 {
    padding: 10px;
}

.album-card-tags-container {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 23px;
    padding: 0px;
    /* margin-left: -2px; */
    margin-left: -0.5px;
    width: 100%;
}

.album-card-tag {
    margin: 0 0.1em;
}

.home-container .home-title {
    display: block;
    text-align: center;
    /* padding: 1.5rem; */
    /* margin-bottom: 0px; */
    /* padding-bottom: 0px; */
    /* padding-top: 5px; */
    /* font-size: 18px; */
    font-family: 'Adobe Garamond Pro';
    font-style: normal;
    /* font-weight: 700; */
    font-size: 22px;
    line-height: 14px;
    color: #000000;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.bold-blue {
    font-weight: bold;
    color: #007bff;
    display: inline-block;
    padding: 3px;
}


/* .hero-section{
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
} */

.hero-img {
    width: auto;
    /* height: 196px; */
}

.album-card2-img {
    object-fit: cover;
    width: 100%;
    height: 411px;
    background-image: linear-gradient(#cac8c8, white);
    margin: 0;
    /* border-radius: 5px; */
}

.single-album-card img {
    object-fit: cover;
    width: 100%;
    height: 386px;
    background-image: linear-gradient(#cac8c8, white);
    margin: 0;
    border-radius: 5px;
}

.album-card img {
    object-fit: cover;
    width: 100%;
    height: 386px;
    background-image: linear-gradient(#cac8c8, white);
    margin: 0;
    border-radius: 5px;
}

.album-name {
    /* border: 1px solid red; */
    font-weight: bolder;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    /* line-height: 23px; */
    color: #000000;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-photo-info {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 0.45rem;
    /* height: clamp(70px, 76px, 100px); */
    font-size: clamp(13px, 2vw, 14px);
    margin-top: -13px;
}

.user-photo-info img {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    margin-right: 0.4em;
}

.purchase-date {
    font-size: clamp(13px, 2vw, 14px);
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

.made-album-noc {
    padding: 0px;
    margin: 0px;
    text-align: right;
    margin-top: -12px;
    padding-right: 12px;
    font-size: clamp(13px, 2vw, 14px);
}

.photo-user-info {
    margin-right: auto;
    display: flex;
    flex-basis: 120px;
    justify-content: flex-start;
    align-items: center;
    padding: 0px;
}

.photo-user-info p {
    /* margin-top: 1rem; */
    padding: 0;
    display: inline;
    color: #042082;
}

.photo-user-info p a {
    color: #042082;
}

.buy-album-view-container {
    padding-top: 6px;
}

.buy-container img.index-author-avi {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    margin-right: 0.4em;
}

.index-photo-info {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(13px, 2vw, 14px);
    margin-left: 0.5px;
}

.index-photo-price-info {
    line-height: 15px;
    /* max-width: 145px; */
    width: 100%;
    min-width: 0px;
    display: flex;
    justify-content: flex-start;
}


/* .index-photo-price-info > * {
  width: 100%;
  font-size: clamp(13px, 2vw, 14px)
} */

.buy-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    margin-left: 1.27px;
}

#like-icon {
    /* border: 1px solid red; */
    background-image: none;
    width: 21.5px;
    height: 19.5px;
    cursor: pointer;
}

.like-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-right: 25px; */
    padding-top: 0.75px;
    /* width: 155.8px; */
    margin-right: 0px;
}

.vertical-margin-opx {
    margin-top: 0px;
    margin-bottom: 0px;
}

.num-of-likes {
    margin-left: 3px;
    font-size: 14px;
}

.index-album-buy-btn {
    text-align: right;
}

.index-album-buy-btn button {
    border-radius: 5px;
    padding: 5px 30px;
    color: #ffffff;
    cursor: pointer;
    /* max-width: 100px; */
    /* min-width: 60px; */
    padding-left: 0px;
    padding-right: 0px;
    width: 100px;
}

.photo-price-info {
    text-align: right;
    flex-grow: 1;
}

.photo-price-info>* {
    margin: 0px 5px;
    width: 100%;
}

.photo-price-info button {
    border: none;
    padding: 0.5rem 2.3rem;
    border-radius: 10px;
    color: white;
    /* background-color: var(--color3); */
}

.search-icon {
    display: none;
}

.user-tab-content {
    display: none;
    margin-top: 20px;
    position: relative;
}

.user-tab-content.active {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(20vw, 360px, 60vw), 1fr));
    gap: 10px;
    margin-top: 5px;
}

.user-tab-content.active .flex-wrapper {
    border: 1px solid palevioletred;
}

.user-albums {
    cursor: pointer;
    margin-bottom: 15px;
    width: 100%;
    max-width: 430px;
}

.user-tab-content.active .album-msg {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    margin-top: 10px;
}

.user-tab-content.active .album-msg h3 {
    font-size: clamp(20px, 3vw, 24px);
}

.ownedAlbum-card,
.madeAlbum-card,
.sellingAlbum-card {
    border-bottom: 1px solid #f3f3f3;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: white;
    /* max-width: 320px; */
    /* cursor: pointer; */
}

.ownedAlbum-card .coverImg,
.madeAlbum-card .coverImg,
.sellingAlbum-card .coverImg {
    /* object-fit: cover;
  width: 100%;
  height: 386px;
  background-image: linear-gradient(#cac8c8, white);
  margin: 0;
  border-radius: 5px; */
    object-fit: cover;
    width: 100%;
    height: 386px;
    background-image: linear-gradient(#cac8c8, white);
    margin: 0;
    border-radius: 5px;
}


/* ====== About Page ======= */

.dropdown {
    /* border: 1px solid red; */
    min-width: 15em;
    position: relative;
    margin-top: 2em;
    margin-bottom: -3em;
}

.dropdown * {
    box-sizing: border-box;
}

.select {
    caret-color: transparent;
    background: white;
    color: #2a2f3b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.5em;
    padding: 1em;
    border: 2px solid #2a2f3b;
    cursor: pointer;
    transition: background 0.3s;
}


/* div.select-clicked {
  border: 1px solid #363a43;
  box-shadow: 0 0 0.8em #2a2f3b;
} */

.caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #2a2f3b;
    transition: 0.3s;
}

.caret-rotate {
    transform: rotate(180deg);
}

.menu {
    list-style: none;
    padding: 0.2em 0.5em;
    /* background: #fff; */
    background-color: rgb(107, 106, 106);
    border: 1px solid #363a4341;
    border-top: none;
    border-radius: 0.5em;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    color: #9fa5b5;
    position: absolute;
    top: 3em;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    opacity: 0;
    display: none;
    transition: 0.2s;
    z-index: 1;
    color: #2a2f3b;
}

.menu li {
    padding: 0.7em 0.5em;
    margin: 0.3em 0;
    border-radius: 0.3em;
    transition: 0.5s;
    cursor: pointer;
}

.menu li:hover {
    background: #2a2d354f;
}

.menu li a {
    width: 100%;
    display: inline-block;
    /* color: #2a2f3b; */
    color: #fff;
}

li.active-link {
    background: #23242a;
}

li.active-link a {
    color: white;
}

.menu-open {
    display: block;
    opacity: 1;
}

nav.guide-side-bar {
    display: none;
}

table.transaction-table {
    table-layout: fixed;
    width: 100%;
}

table.transaction-table,
tr,
th,
td {
    text-align: left;
    word-wrap: break-word;
}

table.transaction-table tr:nth-child(even) {
    background-color: #dddddf65;
}

table.transaction-table th {
    min-width: 15em;
}

.profile-album-section {
    /* border: 1px solid green; */
    max-width: 900px;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

.profile-album-section-tabs {
    max-width: 300px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(24, 24, 24);
    margin-bottom: 10px;
}

.album-section-btn {
    border-bottom: 1px solid gray;
    max-width: 250px;
    margin-right: 9px;
    cursor: pointer;
    text-align: center;
    font-size: clamp(18px, 2vw, 20px);
}

.album-section-btn.active {
    border-bottom: 2px solid rgba(99, 114, 255, 1);
    color: rgba(99, 114, 255, 1);
}

button.album-market-album-button {
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
    border-radius: 5px;
    padding: 2px 24px;
    color: #ffffff;
    cursor: pointer;
    max-width: 125px;
    min-width: 60px;
}

input.stop-sell-album-button {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 0px;
    color: #ffffff;
    cursor: pointer;
    /* max-width: 100px; */
    font-size: clamp(12px, 2vw, 14px);
}

div.album-view-owner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    max-width: 528px;
    margin-top: 14px;
    padding: 10px 0px;
    border-bottom: 1px solid rgba(196, 194, 194, 0.432);
    margin-left: 5px;
    margin-right: 5px;
    background: white;
    /* margin-bottom: 20px; */
    /* box-shadow: -1px 2px 3px 0px rgba(0, 0, 0, 0.25); */
}

div.album-view-owner>div {
    margin-right: 5px;
    margin-left: 12px;
    /* border: 1px solid hotpink; */
}

.buy-btn-container {
    margin-left: auto;
    flex-grow: 1;
}

img.av-owner-img {
    /* width: 70px; */
    /* height: 70px; */
    border-radius: 50%;
    width: clamp(50px, 10vw, 70px);
    height: clamp(50px, 10vw, 70px);
    margin-right: -12px;
}

a.av-owner-name {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(14px, 3vw, 18px);
    color: #000000;
}

.av-owner-details-div {
    margin-left: -50px;
}

.av-owner-details-div p {
    margin: 0;
}

.av-owner-purchased-p {
    font-size: clamp(12px, 2vw, 14px);
}

p.album-view-owner-selling-p {
    margin-top: 0px;
    font-size: clamp(12px, 2vw, 14px);
    color: red;
}

.buy-album-price {
    display: flex;
    justify-content: flex-end;
    margin-top: 3px;
}

div.buy-album-price p {
    margin-bottom: 0px;
    padding: 0px;
    font-size: clamp(10px, 2vw, 18px);
    min-width: 50px;
    margin-left: 5px;
}

#album-category-input {
    padding-left: 3px;
}

.submit-admin-tag {
    padding: 3px 5px;
    margin-left: 3px;
}

input.album-view-owner-selling-btn {
    margin-left: auto;
    display: block;
    height: 38px;
    padding: 0px 20px;
    /* margin-top: 40px; */
    bottom: 0px;
    max-width: 90px;
    background: #5a83ce;
    /* border-radius: 5px; */
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: clamp(13px, 2vw, 16px);
    color: #ffffff;
}

p.album-copies-mobile {
    color: #000000;
    margin: 0;
}

.view-album-mobile.container {
    padding-bottom: 30px;
}

.view-album-mobile {
    max-width: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding-top: 0px;
}

.view-album-mobile {
    display: block;
    height: auto;
    margin: auto;
}

.view-album-desktop {
    display: none;
}

.recommendations-header {
    text-align: center;
    margin-bottom: 20px;
}

.recommendations-section {
    margin-bottom: 40px;
    margin-top: 40px;
}


/* .like-btn, .inactive-like{
  border: 1px solid grey;
  background: none;
  color: black;
  padding: 4px;
}

.active-like{
  background-color: red;
  color: white;
} */

div.dashboard-white-box-div {
    margin-top: 100px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    max-width: 1365px;
    background: white;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0px 12px;
    min-height: 154px;
    padding-bottom: 30px;
}

.dashboard-table {
    /* max-width: 500px; */
    width: 100%;
    min-width: 50px;
}

div.dashboard-header-div {
    width: 217px;
    vertical-align: top;
}

p.dashboard-title {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 30px;
    /* identical to box height */
    /* text-align: justify; */
    color: #000000;
    margin-left: 52px;
}

.user-transaction-table-label {
    /* border: 1px solid red; */
    max-width: 960px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0px;
}

.user-transaction-table .detail {
    cursor: pointer;
}

img.dashboard-balance-arrow-img {
    width: 18px;
    height: 18px;
    /* border: 1px solid green; */
}

p.dashboard-last-transaction-p {
    font-weight: 600;
    font-size: larger;
    color: #000000;
    margin-left: 8px;
    /* border: 1px solid green; */
    margin-top: 1rem;
}

table.user-transaction-table {
    width: 100%;
    border-collapse: collapse;
}

.user-transaction-table th {
    font-weight: bold;
}

.user-transaction-table td {
    padding: 16px 6px;
    text-align: left;
    border: 1px solid black;
}


/* Force table to not be like tables anymore */

table.user-transaction-table,
.user-transaction-table thead,
.user-transaction-table tbody,
.user-transaction-table th,
.user-transaction-table td,
.user-transaction-table tr {
    display: block;
}


/* Hide table headers (but not display: none;, for accessibility) */

.user-transaction-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.user-transaction-table tr {
    margin-bottom: 5px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


/* Behave  like a "row" */

.user-transaction-table td {
    border: none;
    position: relative;
    padding-left: 50%;
}


/**/


/* .user-transaction-table td:before { */


/*     /* Now like a table header */


/*     position: absolute; */


/*     /* Top/left values mimic padding */


/*     top: 6px; */


/*     left: 6px; */


/*     width: 45%; */


/*     padding-right: 10px; */


/*     white-space: nowrap; */


/* } */


/**/


/* /* Label the data */


/* .user-transaction-table td:nth-of-type(1):before { */


/*     content: 'Album name'; */


/* } */


/* .user-transaction-table td:nth-of-type(2):before { */


/*     content: 'Operation'; */


/* } */


/* .user-transaction-table td:nth-of-type(3):before { */


/*     content: 'Source'; */


/* } */


/* .user-transaction-table td:nth-of-type(4):before { */


/*     content: 'Amount'; */


/* } */


/* .user-transaction-table td:nth-of-type(5):before { */


/*     content: 'Date'; */


/* } */


/* .user-transaction-table td:nth-of-type(6):before { */


/*     content: 'Detail'; */


/* } */

.user-transaction-table td:nth-of-type(1):before,
.user-transaction-table td:nth-of-type(2):before,
.user-transaction-table td:nth-of-type(3):before,
.user-transaction-table td:nth-of-type(4):before,
.user-transaction-table td:nth-of-type(5):before,
.user-transaction-table td:nth-of-type(6):before {
    font-weight: bold;
    padding: 10px 6px;
}

a.album-author-name-p {
    color: #002196;
    font-size: clamp(12px, 2vw, 14px);
    padding-left: 3px;
}

.view-album-mobile p.album-copies {
    color: #000000;
    margin: 0;
    /* border: 1px solid green; */
}

input.sign-up-register-button {
    height: 80px;
    width: 100%;
    max-width: 465px;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-size: 24px;
    margin-bottom: 5px;
    color: white;
    outline: none;
}

@media (min-width: 480px) {
    figure {
        max-width: 802px;
        max-height: 192px;
        margin: auto;
    }
}


/* Desktop view */

@media (min-width: 1081px) {
    .top-header {
        display: grid;
        grid-template-columns: 37% 3% 60%;
        grid-template-rows: 100%;
    }
    .menu-toggle,
    .main-menu .close-menu {
        display: none;
    }
    .top-header {
        padding-top: -150px;
        padding-bottom: 15px;
    }
    .top-header .row {
        align-items: center;
        grid-column: 1 / 2;
        margin-top: 15px;
    }
    .top-header-left {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .top-header .logo-container {
        margin-right: 0px;
        height: 40px;
    }
    .top-header .nav-album-name {
        margin-left: 5px;
        padding-top: 6px;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .main-menu {
        position: static;
        grid-column: 3 / 4;
        display: flex;
        width: 100%;
        margin-bottom: -90px;
    }
    .main-menu ul {
        height: auto;
        padding: 0;
        background: none;
        color: black;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }
    .main-menu ul li {
        color: var(--color2);
        padding: 0;
        /* flex-basis: 120px; */
        display: inline;
        border: none;
        margin-left: 10px;
        margin-right: 20px;
    }
    .main-menu ul li a {
        color: black;
        padding: 0;
    }
    .main-menu:target+.backdrop {
        display: none;
        position: static;
    }
    .main-menu .user-profile {
        order: 2;
    }
    .main-menu .user-profile .album-count {
        display: none;
    }
    .main-menu li.signup-login-btn {
        display: flex;
        flex-flow: row;
        justify-content: space-evenly;
        flex-basis: 200px;
        margin-top: 0;
    }
    .main-menu li.signup-login-btn[lang='hi'] {
        display: flex;
        flex-flow: row;
        justify-content: space-evenly;
        flex-basis: 250px;
        margin-top: 0;
    }
    .nav-icons {
        display: none;
    }
    .dropdown {
        display: none;
    }
    nav.guide-side-bar {
        display: block;
    }
    .main-menu .nav-username {
        display: flex;
        flex-direction: row-reverse;
        padding: 0px;
        padding-top: 7px;
        align-items: center;
    }
    .main-menu .nav-displayname {
        color: black;
        padding-top: 20px;
        padding-left: 3px;
    }
    .main-menu img.user-icon {
        margin-top: 8px;
        width: 35px;
        height: 35px;
    }
    .profile-album-section-tabs {
        max-width: 100%;
        margin: auto;
    }
    span.album-section-btn {
        border-bottom: 1px solid gray;
        min-width: 0px;
        padding: 10px 8px;
        margin-right: 5px;
        cursor: pointer;
        text-align: center;
    }
    div.album-view-owner>div {
        margin-right: 5px;
        margin-left: 12px;
    }
    img.av-owner-img {
        width: 77px;
        height: 77px;
        object-fit: cover;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        max-height: 77px;
        max-width: 77px;
        cursor: pointer;
        border-radius: 50%;
    }
    input.stop-sell-album-button {
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        /* width: 202px; */
        height: 39px;
        font-size: clamp(14px, 2vw, 16px);
        line-height: 42px;
        cursor: pointer;
        color: #ffffff;
    }
    .soldOutInfo {
        font-weight: bolder;
        margin: 0px;
        padding: 0px;
        /* text-align: right; */
    }
    button.album-market-album-button {
        border-radius: 5px;
        padding: 4px 54px;
        color: #ffffff;
        cursor: pointer;
        max-width: 190px;
        min-width: 60px;
        float: right;
    }
    .view-album-mobile {
        display: none;
    }
    .view-album-desktop {
        display: block;
        padding-bottom: 30px;
    }
    p.album-copies {
        color: #000000;
        margin: 0;
    }
    .top-header .nav-album-name-container {
        position: static;
        width: 100%;
        margin-top: -5px;
    }
    /* Revise user transaction table to default values */
    table.user-transaction-table {
        display: table;
    }
    .user-transaction-table thead {
        display: table-header-group;
    }
    .user-transaction-table tbody {
        display: table-row-group;
    }
    .user-transaction-table th {
        display: table-cell;
        padding: 12px;
    }
    .user-transaction-table tr {
        box-shadow: none;
        display: table-row;
    }
    .user-transaction-table td {
        display: table-cell;
        position: relative;
        padding-left: 0px;
        padding: 12px;
    }
    .user-transaction-table thead tr {
        position: static;
    }
    /* .user-transaction-table td:nth-of-type(1):before { */
    /*     content: ''; */
    /* } */
    /* .user-transaction-table td:nth-of-type(2):before { */
    /*     content: ''; */
    /* } */
    /* .user-transaction-table td:nth-of-type(3):before { */
    /*     content: ''; */
    /* } */
    /* .user-transaction-table td:nth-of-type(4):before { */
    /*     content: ''; */
    /* } */
    /* .user-transaction-table td:nth-of-type(5):before { */
    /*     content: ''; */
    /* } */
    /* .user-transaction-table td:nth-of-type(6):before { */
    /*     content: ''; */
    /* } */
    .buy-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    a.album-author-name-p {
        padding-top: 1px;
    }
    input.sign-up-register-button {
        width: 362px;
    }
}

#like-icon {
    /* border: 1px solid red; */
    background-image: none;
    width: 21.5px;
    height: 19.5px;
    cursor: pointer;
}


/* .like-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 25px;
} */

.num-of-likes {
    margin-left: 2px;
    font-size: 14px;
}

a.album-author-name-p {
    color: #002196;
    font-size: clamp(12px, 2vw, 14px);
    padding-left: 3px;
}

.view-album-mobile p.album-copies {
    color: #000000;
    margin: 0;
    /* border: 1px solid green; */
}

.logo-img {
    height: 30px;
    width: auto;
    margin-top: 3px;
    margin-bottom: 5px;
    margin-left: 0;
}

@media (min-width: 480px) {
    figure {
        max-width: 802px;
        max-height: 192px;
        margin: auto;
    }
    /* .menu-toggle {
    margin-left: 1.3rem;
    margin-top: 2px;
    
  } */
    .menu-toggle {
        /* margin-left: 1.3rem;
    margin-top: 2px; */
        position: relative;
        top: -27px;
    }
    .icon {
        position: relative;
        top: 2px;
        left: 9px;
        height: 24px;
    }
    .hamburger {
        position: relative;
        top: 29px;
        /* right: 13px; */
        right: 0.75px;
    }
    /* .logo-img {
        height: 25px;
        width: auto;
        margin-left: 10px;
        margin-top: 3px;
        margin-bottom: 12px;
    } */
}

@media screen and (max-width: 700px) {
    .box {
        width: 70%;
    }
    .popup {
        width: 70%;
    }
    .menu-toggle {
        /* margin-left: 1.3rem;
    margin-top: 2px; */
        position: relative;
        top: -27px;
    }
    .icon {
        position: relative;
        top: 2px;
        left: 9px;
        height: 24px;
    }
    .hamburger {
        position: relative;
        top: 29px;
        /* right: 13px; */
        right: 0.75px;
    }
    .logo-img {
        height: 25px;
        width: auto;
        margin-top: 3px;
        margin-bottom: 12px;
        margin-left: 0;
    }
}

div.page-container {
    /* display: block; */
    box-sizing: border-box;
    padding: 0px;
}

.has-search .form-control-sm {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    /* z-index: 2; */
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2rem;
    text-align: center;
    pointer-events: none;
    color: black;
}

.adjust-title {
    /* border: 1px solid red; */
    margin-top: 20px;
}

div.avatar-p-link-div {
    position: relative;
    top: 8px;
}

div.test-content {
    margin-top: 100px;
}

div.header-pad-div {
    position: relative;
    max-width: 1200px;
    top: 60px;
    margin: auto;
}

div.header-pad-div2 {
    position: relative;
    max-width: 1200px;
    margin: auto;
}

#accept-terms-div {
    padding-left: 76px;
}

img.top-header-user-icon {
    height: 56px;
    width: 56px;
    object-fit: cover;
    max-height: 81px;
    max-width: 81px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    vertical-align: middle;
    margin-left: 10px;
    position: relative;
    top: -6px;
    cursor: pointer;
    border-radius: 50%;
}

#top-header-username-line {
    margin-top: 0px;
    margin-bottom: 0px;
    width: 70px;
    height: 0px;
    border: 1px solid #000000;
    transform: rotate(90deg);
    vertical-align: super;
}

#login-sign-up-link {
    color: blue;
    cursor: pointer;
}

a.login-recover-password {
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    /* color: #002196; */
}

#server-error-txt {
    margin-top: 10px;
}

#sign-up-form-fields {
    max-width: 650px;
    margin: auto;
}

#checkbox-sign-up {
    margin-left: -70px;
}

.text-align-right {
    text-align: right;
}

.text-align-left {
    text-align: left;
}

.hidden {
    visibility: hidden;
    display: none;
}

div.hidden {
    visibility: hidden !important;
    display: none !important;
}

p.hidden {
    visibility: hidden;
    display: none;
}

p.visible {
    visibility: visible;
    display: inline;
}

#red-button-wrapper-div {
    text-align: center;
}

.login-form {
    max-width: 472px;
    margin: auto;
}

input.login-field {
    max-width: 472px;
    height: 70px;
    width: 100%;
    border-radius: 3px;
    font-size: 20px;
    padding: 7px 20px;
    outline: none;
    display: inline-block;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
    background-color: white;
}

input.centered {
    text-align: center;
}

div.item-list {
    /* white-space: nowrap ; */
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

div.green-entry-flag {
    width: 26.25px;
    height: 26.25px;
    background: #0e9901;
    border-radius: 0px;
}

div.red-entry-flag {
    width: 26.25px;
    height: 26.25px;
    background: #ff0000;
    border-radius: 0px;
}

.margin-10px {
    margin: 10px;
}

.side-margin-10px {
    margin-left: 10px;
    margin-right: 10px;
}

.form-group {
    display: flex;
    justify-content: center;
    max-width: 472px;
    margin: auto;
    position: relative;
}

.form-group2 {
    display: flex;
    justify-content: center;
    margin: auto;
    position: relative;
}

.sign-up-form .form-group {
    margin-top: 20px;
    position: relative;
    /* border: 1px solid red; */
    max-width: 500px;
    margin: 10px auto;
    display: block;
}

div.checkbox-sign-up-div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 500px;
    margin: 10px auto;
}

img.check-dob-pad {
    /* margin-top: 5px; */
    width: 27px;
    height: 27px;
    position: absolute;
    top: 30px;
    right: -30px;
}

img.check-pad {
    vertical-align: middle;
    width: 27px;
    height: 27px;
    margin-top: 23px;
    position: absolute;
    right: -30px;
}

img.check-pad-terms {
    vertical-align: middle;
    width: 27px;
    height: 27px;
    position: absolute;
    right: -30px;
    /* margin-top: -8px; */
}

input.hidden {
    visibility: hidden;
    display: none;
}

.no-width {
    width: 1px;
}

.invisible {
    visibility: hidden;
}

input.hidden-top-header-button {
    width: 1px;
    height: 60px;
}

img.hidden {
    visibility: hidden;
    display: none;
}

img.visible {
    visibility: visible;
    display: inline;
}

p.de-error-pad {
    margin-top: 32px;
}

p.de-dob-error-pad {
    margin-top: -2px;
}

p.item {
    display: inline-block;
    position: absolute;
    margin-top: 0px;
    margin-bottom: 0px;
}

p.create-album-error-prompt {
    font-size: 14px;
    color: red;
    font-weight: bold;
    font-family: Roboto;
    overflow-wrap: break-word;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 30px;
    /* margin-right: 20px; */
    margin-left: 10%;
    margin-right: 10%;
}

p.create-album-error-prompt2 {
    font-size: 14px;
    color: red;
    font-weight: bold;
    font-family: Roboto;
    overflow-wrap: break-word;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 0px;
    margin-right: 0px;
}

p.error-prompt {
    font-size: 14px;
    color: red;
    font-weight: bold;
    font-family: Roboto;
    padding-left: 10px;
    overflow-wrap: break-word;
    text-align: center;
    margin-top: 3px;
    margin-bottom: 0px;
}

p.error-prompt2 {
    font-size: 14px;
    color: red;
    font-weight: bold;
    font-family: Roboto;
    padding-left: 10px;
    overflow-wrap: break-word;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 6px;
}

p.error-prompt3 {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 125%;
    color: #e64646;
}

.report-err-msg {
    display: flex;
    justify-content: center;
    align-items: center;
}

span.report-error-prompt {
    font-size: 14px;
    color: red;
    font-weight: bold;
}

img.error-symbol {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-left: 5px;
}

.sign-up-form {
    /* padding: 5px 20px; */
    text-align: center;
}

input.red-border {
    border: 2px solid red;
}

p.dob-title {
    /* margin-top: 15px; */
    /* margin-right: 29px; */
    /* display: inline-block; */
    margin-left: 5px;
    height: 18px;
    border-radius: undefinedpx;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    /* text-align: left; */
    /* background: #494747 80%; */
    color: rgba(73, 71, 71, 0.8);
    margin-top: 40px;
    margin-bottom: 0px;
    text-align: center;
}


/* select.dob-select-month {
  margin: 5px;
  display: inline-block;
  outline: none;

  width: 130px;
  height: 30px;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px;

  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: left;
  color: #000000;
}

select.dob-select-day {
  margin: 5px;
  display: inline-block;
  outline: none;

  height: 30px;
  width: 100px;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px;

  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: left;
  color: #000000;
}

select.dob-select-year {
  display: inline-block;
  outline: none;

  height: 30px;
  width: 100px;
  border-radius: 20px;
  padding: 5px;

  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: left;
  color: #000000;
}

select.dob-select-pad {
  margin-left: 13px;
} */


/* .dob-div {
    text-align: center;
    display: flex;
    justify-content: center;
} */

.dob-fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.dob-fields select {
    margin: 5px;
    outline: none;
    height: 30px;
    width: 100px;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
    /* width: 100%; */
}

p.margin-left-5 {
    margin-left: 5px;
}

span.sign-up-txt-terms-of-service {
    margin-left: 6px;
    margin-top: 0px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    padding-right: 3px;
    /* text-align: left; */
    /* display: inline-block; */
}

a.sign-up-txt-terms-of-service-link {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    /* display: inline-block; */
}

h1.sign-up-form-title,
p.sign-up-form-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    color: #000000;
    margin-bottom: 20px;
    margin-bottom: 15px;
}

p.join-thousands-text {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    /* text-align: center; */
}

::placeholder {
    color: #494747 80%;
    font-size: 18px;
}

input.red-color {
    background: #e53935;
}

z input.grey-color {
    background: grey;
}

input.guide-search {
    border: none;
    border-radius: 15px;
    min-width: 150px;
    width: 320px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    outline: none;
}

input.invisible-login-red-button {
    visibility: hidden;
    height: 60px;
    width: 1px;
    border-radius: 35px;
    border: 0.25px solid #000000;
    box-sizing: border-box;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
    border-radius: 30px;
    font-size: 24px;
    color: white;
    outline: none;
    display: inline;
    margin: 0px;
    padding-bottom: 0px;
    border-top: 0px;
    border-bottom: 0px;
}

form.lost-password-form {
    text-align: center;
    max-width: 472px;
    margin: auto;
    padding: 0px 10px;
}

input.recover-email-field {
    max-width: 472px;
    height: 70px;
    width: 100%;
    border-radius: 3px;
    font-size: 20px;
    padding: 7px 20px;
    outline: none;
    display: inline-block;
    border: 1px solid rgba(172, 170, 170, 0.644);
}

form.change-password-form {
    text-align: center;
    padding: 0px 10px;
}

p.sign-up-notice-black {
    font-family: Roboto;
    font-size: 20px;
    line-height: 24px;
    color: black;
    border-radius: 3px;
    padding: 1em;
    margin: auto;
    margin-bottom: 10px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0px 2px 5px rgb(112, 112, 112);
    background-color: white;
}

p.sign-up-notice-red {
    font-family: Roboto;
    font-size: 20px;
    line-height: 24px;
    color: black;
    border: 1px solid red;
    border-radius: 3px;
    padding: 1em;
    margin: auto;
    margin-bottom: 10px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0px 2px 3px rgb(112, 112, 112);
    background-color: white;
}

p.sign-up-notice-green {
    font-family: Roboto;
    font-size: 20px;
    line-height: 24px;
    color: black;
    border: 1px solid green;
    border-radius: 3px;
    padding: 1em;
    margin: auto;
    margin-bottom: 10px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0px 2px 3px rgb(112, 112, 112);
    background-color: white;
}


/* div.error-box-sign-up{
    border:3px;
    border-style:solid;
    border-color:black;
    padding: 1em;
    width: 472px;
} */

input.purple-button-color-set {
    background: #6372ff;
    outline: none;
    text-align: center;
    cursor: pointer;
}

input.purple-button-color-set:hover {
    background: #6372ff;
    cursor: auto;
}

input.purple-button-color-set:active {
    background: #6372ff;
}

input.purple-button:active {
    background: #6372ff;
}

input.white-button-color-set {
    background: white;
    outline: none;
    text-align: center;
    cursor: pointer;
}

input.white-button-color-set:hover {
    background-color: lightgray;
}

input.white-button-color-set:active {
    background-color: darkgray;
}

input.white-button:active {
    background: white;
}

input.dark-blue-color-set {
    cursor: auto;
    outline: none;
    background: #002196;
}

input.dark-blue-color-set:hover {
    background: #1d43cb;
}

input.dark-blue-color-set:active {
    background: #061d6d;
}

input.gray-button-color-set:hover {
    background-color: #ae0905;
}

input.gray-button-color-set:active {
    background-color: #810c09;
}

input.red-button:active {
    background: #e58075;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    font-size: 20px;
    font-family: 'Roboto';
    -webkit-text-fill-color: black;
}

input.sign-up-txt {
    /* margin-bottom: 30px; */
    max-width: 472px;
    height: 70px;
    border: 0;
    border-radius: 5px;
    font-size: 20px;
    color: black;
    padding: 7px 20px;
    outline: none;
    display: inline-block;
}

input.sign-up-txt:-webkit-autofill::first-line {
    font-size: 20px;
    color: black;
}

.margin-top-35px {
    margin-top: 35px;
}

.margin-top-150 {
    margin-top: 150px;
}

.margin-top-220 {
    margin-top: 220px;
}

.margin-top-25px {
    margin-top: 25px;
}

.margin-left-5px {
    margin-left: 5px;
}

.margin-right-5px {
    margin-right: 5px;
}


/* div.screen-centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
} */

div.create-album-processing-div {
    max-width: 962px;
    width: 100%;
    height: 100%;
    max-height: 632px;
    background: #ffffff;
    border: 0.5px solid #000000;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

p.create-album-processing-p {
    font-size: clamp(20px, 7vw, 64px);
    color: #000000;
}

p.create-album-complete-percent {
    font-size: clamp(18px, 7vw, 64px);
    color: #002696;
    margin: auto;
}

div.create-album-circle-div {
    max-width: clamp(60px, 20vw, 200px);
    width: 100%;
    max-height: clamp(60px, 20vw, 200px);
    height: 100%;
    border: 2px solid #002696;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


/* div#side-links-div .about {
  margin-top: -10.5px;
} */

img.create-album {
    margin-left: 10px;
    max-width: 20px;
    cursor: pointer;
    vertical-align: middle;
}

.inline-block {
    display: inline-block;
}

#header-username {
    display: inline-block;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    color: #000000;
    margin-top: 0px;
    margin-bottom: 0px;
}

div.title-container {
    width: 50%;
    float: left;
}


/* #side-links-div {
  margin-left: auto;
  order: 2;
} */

#sign-up-side-link-div {
    margin-top: 26px;
    float: right;
}


/* #top-header-div {
  flex-wrap: wrap;
  display: flex;
  align-items: baseline;
  height: 30px;
  padding: 50px 15px 30px 15px;
} */

a.side-link {
    padding-left: 30px;
    text-decoration: none;
    font-family: 'Roboto';
    font-weight: bolder;
}

a.main-title-mobile {
    display: none !important;
}

a.main-title {
    /* display: block !important; */
    font-size: 23px;
    text-decoration: none;
    font-family: Roboto;
    color: black;
}

#side-links-div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2rem;
    position: relative;
    height: auto;
}

div.mobile-navigation {
    display: none !important;
}

div.desktop-navigation {
    display: block !important;
    margin-top: -2.3px;
}

img.top-header-arrow-desc {
    margin-left: 20px;
    display: inline-block;
}

.top-header-page-desc {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    display: inline-block;
    margin-left: 9px;
    margin-top: 3px;
    margin-bottom: 0px;
    text-decoration: none;
}

.margin-top-8px {
    margin-top: 8px !important;
}

.margin-top-6px {
    margin-top: 6px !important;
}

.margin-top-5px {
    margin-top: 5px !important;
}

.margin-top-10px {
    margin-top: 10px !important;
}

.margin-top-15px {
    margin-top: 15px !important;
}

.mobile-margin-bottom-10px {
    display: none;
}

#create-album-fields {
    max-width: 1343px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: auto;
    margin-top: 100px;
    width: 100%;
}

#create-album-fields>div {
    margin-top: 20px;
    min-width: 0px;
}

#create-album-white-rectangle {
    /* width: 544px; */
    max-width: 472px;
    height: 560px;
    max-height: 100%;
    background: #ffffff;
    /* border-radius: 5px; */
    text-align: center;
    /* caret-color: transparent; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-self: center; */
    align-items: center;
    border: 1px solid black;
    width: 472px;
    /* height: 265px; */
    border-radius: 25px;
}

#create-album-upload-img {
    /* margin-top: 50px; */
    margin-top: 35px;
    text-align: center;
}

#create-album-drag-files-p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

input.create-album-white-rectangle-upload-button {
    width: 190px;
    height: 56px;
}

#create-album-form-container {
    width: 544px;
    /* max-width: 600px; */
    max-width: 472px;
    /* height: 506px; */
    max-height: 100%;
}

.display-flex {
    display: flex;
}

.display-block {
    display: inline-block;
}

.field-blocked {
    opacity: 0.4;
}

input.create-album-name {
    max-width: 510px;
    height: 50px;
}

input.create-album-quantity {
    max-width: 510px;
    height: 50px;
}

input.create-album-price {
    max-width: 510px;
    height: 50px;
}

input.create-album-tags {
    max-width: 510px;
    height: 50px;
}

input.create-album-radio {
    width: 20px;
    height: 20px;
    margin-top: 22px;
    background: #ffffff;
    border: 0.5px solid #000000;
    box-sizing: border-box;
}

p.create-album-eth-value {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #6b6b6b;
    margin-right: 9px;
    margin-left: 61px;
}

p.create-album-eth-label {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
}

textarea.create-album-description {
    width: 510px;
    /* height: 189px; */
    height: 179px;
    /* display:block; */
    padding: 15px 20px;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
}

p.create-album-usd {
    position: absolute;
    top: 18px;
    left: -45px;
}

P.create-album-char-count {
    width: 80px;
    height: 14px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    position: relative;
    left: 465px;
    /* margin-left: auto; */
    /* margin-right: 17px; */
}


/* #create-album-confirm-div {
  margin-left: 90px;
} */

input.create-album-cancel {
    width: 190px;
    height: 56px;
    /* background: #FFFFFF; */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    margin-right: 20px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    outline: none;
}

input.create-album-submit {
    width: 190px;
    height: 56px;
    background: #e53935;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-size: 24px;
    line-height: 28px;
    color: #ffffff;
    outline: none;
}

p.no-wrap {
    white-space: nowrap;
}

a.create-album-help {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    color: #002196;
}

#create-album-confirm-div p {
    text-align: right;
    margin-top: 7px;
}

.create-album-form>.form-input {
    text-align: right;
    width: 100%;
    /* display: flex; */
    /* justify-content: flex-start; */
    position: relative;
}

#create-album-confirm-div {
    text-align: right;
    /* width: 94%; */
    width: 100%;
}

.create-album-tags-wrap {
    max-width: 510px;
    width: 100%;
}

.create-album-text-field {
    font-size: 12px;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    color: #797878;
    border: 0;
    outline: none;
    padding: 7px 20px;
    margin-bottom: 15px;
    max-width: 100%;
}

.field-outline-success {
    outline: 1px solid rgba(16, 231, 16, 0.884);
    box-shadow: 0 0 5px rgba(16, 231, 16, 0.884), 0 0 5px rgba(50, 235, 50, 0.884);
}

.field-outline-error {
    outline: 1px solid red !important;
    box-shadow: 0 0 5px red, 0 0 5px red !important;
}

.tags {
    /* display: block; */
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    margin-bottom: 1.5em;
}

.tag {
    background: white;
    color: black;
    padding: 0.2em 0.5em;
    border-radius: 5px;
    /* margin-right: 0.3em;
  margin-left: 0.3em; */
    margin: 0.2em 0.3em;
    border: 0.25px solid #0015d088;
    width: fit-content;
    box-shadow: 0px 2px 4px 0px #00000026;
}

.tag .remove-btn {
    margin-left: 9px;
    cursor: pointer;
}

.tag b {
    padding-bottom: 1em;
}

.create-album-tags-wrap small {
    text-align: right;
    /* margin-top: -10px; */
    display: block;
    margin-left: 2px;
    font-weight: bold;
}

.tag-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    /* max-width: 510px; */
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-align: left;
    /* border: 1px solid red; */
    max-height: 230px;
    overflow-y: scroll;
    scrollbar-width: thin;
    /* Width of the scrollbar */
    scrollbar-color: #bbbaba #ddd;
    /* Color of the scrollbar */
    max-width: 472px;
}

.tag-dropdown-content div {
    border-bottom: 1px solid rgba(165, 164, 164, 0.486);
    /* border: 1px solid green; */
    padding-left: 4px;
    padding-top: 5px;
    padding-bottom: 0px;
    cursor: pointer;
}

.tag-dropdown-content div:hover {
    background-color: #ecebeb;
}

.tag-dropdown-content div p {
    /* border: 1px solid red; */
    padding: 0px;
    margin: 0px;
}

.tag-dropdown-content div .tag-name {
    margin-bottom: -8px;
    /* border: 1px solid red; */
    font-weight: 500;
}

.tag-dropdown-content div .tag-post {
    font-weight: 100;
    font-size: smaller;
    color: rgb(82, 82, 79);
}

.tag-dropdown-content p {
    color: black;
    text-decoration: none;
    display: block;
}

.tag-dropdown-content a:hover {
    background-color: #f1f1f1;
}

.show-tag {
    display: block;
}

p.create-album-quantity-p {
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    margin-right: 25px;
    margin-left: 5px;
    margin-top: 24px;
}

p.create-album-expire-p {
    font-family: Roboto;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    /* margin-right: 25px; */
    margin-left: 5px;
    margin-top: 24px;
}

img.create-album-validation-img2 {
    display: inline-block;
    position: relative;
    top: 6px;
    left: 6px;
}

img.create-album-validation-img {
    margin-top: 10px;
    width: 26px;
    height: 26px;
    margin-left: 5px;
}

#create-album-progress-div {
    margin-top: 150px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 1243px;
}

#create-album-white-bar {
    width: 1196px;
    height: 30px;
    background: white;
    position: absolute;
    border-radius: 25px;
}

#create-album-blue-bar {
    width: 1196px;
    height: 30px;
    background: #0038ff;
    position: absolute;
    border-radius: 25px;
}

#create-album-pictures-field {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin: 30px auto 0 auto;
    width: 100%;
    max-width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}

div.create-album-content-div {
    box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 10px;
}

div.create-album-error-div {
    text-align: center;
    margin-top: 15px;
}

.margin-bottom-0px {
    margin-bottom: 0px;
}

.display-flex {
    display: flex;
}

.vertical-line-1 {
    width: 13px;
    height: 0px;
    border: 1px solid #d1d3d4;
    transform: rotate(90deg);
    margin-top: 12px;
}

.margin-top-15px {
    margin-top: 15px;
}

div.create-album-col-1 {
    text-align: center;
    display: flex;
    flex-direction: column;
}

p.create-album-img-resolution-p {
    margin-top: 2px;
    margin-bottom: 0px;
}

p.create-album-img-mbsize-p {
    display: inline-block;
    margin-bottom: 0;
}

p.create-album-img-mbsize-p2 {
    margin-top: 7px;
    display: inline-block;
    font-weight: bold;
    color: red;
}

div.create-album-col-2 {
    width: 100%;
    max-width: 952px;
    min-width: 0px;
    flex-grow: 1;
    padding: 0px 5px;
}

div.create-album-col-2-row-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

div.create-album-col-2-row-2 {
    display: flex;
    flex-direction: column;
    text-align: center;
}

div.create-album-col-2-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

img.create-album-img {
    height: 263px;
    object-fit: cover;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 5px;
    width: 100%;
}

input.create-album-img-name {
    background: #ffffff;
    border: 0.5px solid #272626;
    box-sizing: border-box;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
    border-radius: 5px;
    height: 45px;
    line-height: 42px;
    color: #000000;
    margin-top: 15px;
    width: 100%;
    max-width: 926px;
    min-width: 0px;
    outline: none;
    padding: 7px 20px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    font-family: 'Roboto';
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
}

textarea.create-album-img-description {
    background: #ffffff;
    border: 0.5px solid #272626;
    box-sizing: border-box;
    border-radius: 5px;
    line-height: 19px;
    text-align: justify;
    margin-top: 15px;
    width: 100%;
    max-width: 926px;
    min-width: 0px;
    height: 124px;
    margin-bottom: 5px;
    outline: none;
    padding: 7px 20px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    /* font-family: Roboto; */
    font-family: 'Roboto';
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
}


/* div.create-album-img-col2-sub-header {
  display: flex;
  width: 926px;
} */

p.create-album-name {
    position: relative;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 12px;
    color: #000000;
    top: 26px;
    left: -80px;
}

input.create-album-cover {
    position: relative;
    width: 12px;
    height: 13px;
    background: #ffffff;
    border: 0.2px solid #000000;
    box-sizing: border-box;
    border-radius: 20px;
    left: -20px;
    top: -80px;
}

input.create-album-free {
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 0.5px solid #000000;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

p.create-album-free-label {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    color: #000000;
    margin-bottom: 0;
    margin-left: 5px;
}

p.create-album-cover-label {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 35px;
    color: #ff0000;
    margin-bottom: 0;
}

img.create-album-trash-icon {
    height: 24px;
    cursor: pointer;
}

div.create-album-col-3 {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

img.create-album-up-down-arrow {
    cursor: pointer;
}

img.create-album-trash-icon-img {
    margin-left: auto;
    order: 2;
    height: 36px;
    cursor: pointer;
}

p.create-album-img-position-label {
    font-family: Roboto;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 0;
}

input.create-album-edit {
    position: relative;
    width: 65px;
    height: 21px;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 13px;
    color: #000000;
    top: -90px;
    left: 110px;
}

input.create-album-delete {
    position: relative;
    width: 65px;
    height: 21px;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 13px;
    color: #000000;
    top: -60px;
    left: 44px;
}

input#create-album-browse {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 16px 42px;
    cursor: pointer;
    color: white;
    font-size: large;
    background: #e53935;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.custom-file-upload:hover {
    background: #f54340;
    border: 1px solid rgb(230, 54, 54);
}

a.link-sideways-pad {
    margin-left: 5px;
    margin-right: 5px;
}

p.hamburger-menu {
    display: none;
}

div.user-guide-wrapper {
    padding: 0;
    max-width: 960px;
    max-height: auto;
    margin: auto;
    margin-top: 70px;
    /* border: 1px solid red; */
    background-color: white;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-radius: 15px;
}

nav.guide-side-bar {
    min-width: 250px;
    max-width: 250px;
    background: #cccccf;
    color: #fff;
    width: 250px;
    height: inherit;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

nav.guide-side-bar ul {
    padding: 20px 0;
}

nav.guide-side-bar ul li {
    list-style-type: none;
}

nav.guide-side-bar ul li a {
    color: black;
    padding: 19px 10px;
    font-size: 1.1em;
    display: block;
    text-decoration: none;
}

nav.guide-side-bar ul li a:hover {
    background: rgb(233, 230, 230);
    border-radius: 7px;
    /* width: 270px; */
}

nav.guide-side-bar ul li.active a {
    background: #fff;
    border-radius: 7px;
    /* width: 270px; */
}

div.guide-content {
    border: 1px solid black;
    padding: 10px;
    /* padding-left: 15px; */
    padding-top: 25px;
    /* text-align: justify; */
    /* line-height: 18px; */
    width: 710px;
    background-color: #fff;
}

div.guide-content ol {
    padding-left: 1.2rem;
}

div.guide-content li[data-list='bullet'] {
    list-style-type: disc;
}

.btn-danger {
    background-color: red;
}

.white-color {
    color: white !important;
}

.bold-text {
    font-weight: bold;
}

p.red-bold-text {
    color: red;
    font-weight: bold;
}

p.tabbed-text {
    margin-left: 15px;
}

#index-title {
    margin: 0 auto;
    /* width: 944px; */
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    margin-top: 90px;
}

p.index_category {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 26px;
    color: #002196;
    margin-top: 30px;
    margin-bottom: 0;
    margin-left: 10px;
}

div.home-desktop-view {
    display: block !important;
}

div.mobile-album-display {
    display: none !important;
}

p.home-album-name {
    position: absolute;
    top: 76px;
    left: 145px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    color: #000000;
    margin: 0px;
    width: 175px;
    text-align: center;
    margin-bottom: 20px;
}

p.home-album-description {
    position: absolute;
    top: 112px;
    left: 144px;
    width: 175px;
    height: 79px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 15px;
    text-align: justify;
    color: #5b5b5b;
    margin: 0px;
    word-wrap: break-word;
    /* border: 1px solid red; */
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 0;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
}

p.home-album-remaining {
    position: absolute;
    text-align: right;
    top: 190px;
    right: 18px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    color: #000000;
    margin: 0;
}

p.home-album-price {
    position: absolute;
    text-align: right;
    top: 210px;
    right: 18px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    color: #000000;
    margin: 0;
}

.display-contents {
    display: contents;
}

a.home-album-author-name {
    position: absolute;
    margin: 0;
    top: 203px;
    left: 50px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    color: #000000;
}

div.home-album-cover-img-div {
    position: absolute;
    top: 0px;
    left: 8px;
    width: 128px;
    height: 191px;
    /* right: 0px; */
    /* text-align: center; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: top 0.2s, left 0.2s;
}

img.home-album-cover-img {
    /* position: absolute;
  top: 0px;
  left: 8px; */
    z-index: 50000;
    width: 128px;
    height: auto;
    max-height: 191px;
    transition: transform 0.2s;
    /* Animation */
    /* position: relative;  */
}


/* img.home-album-cover-img:hover {
  transform: scale(1.2);
} */

img.home-album-author-img {
    position: absolute;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    object-fit: cover;
    left: -34px;
    top: -6px;
    max-width: 25px;
    max-height: 25px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

div.home-album-white-background {
    position: absolute;
    width: 334px;
    height: 163px;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    top: 69px;
}

div.home-album-div {
    display: inline-block;
    width: 334px;
    margin: 15px;
    height: 232px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

div.home-album-div-hover-on {
    opacity: 50%;
}

div.index-albums-display {
    max-width: 1456px;
    margin: 0 auto;
    /* text-align: center; */
}

div.text-align-center {
    text-align: center;
}

a.back-albums-p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    /* line-height: 16px; */
    color: #002196;
}

div.back-to-album-div {
    display: flex;
    margin-bottom: 10px;
    width: 280px;
}

img.back-to-album-arrow {
    width: 10px;
    height: 10px;
    margin-right: 10px;
    margin-left: 23px;
}

div.album-preview-div {
    display: inline-block;
    margin-top: 0px;
    width: 200px;
}

#album-preview-imgs-container-desktop {
    text-align: center;
}

#album-preview-imgs-container-desktop img.album-preview-img {
    max-width: 170px;
    max-height: 230px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 5px;
    margin-bottom: 13px;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.album-preview-imgs-div-desktop-height {
    height: 1274px;
}

div.album-preview-imgs-div {
    overflow: auto;
    /* height: 1274px; */
    /* width: 200px; */
}

img.album-preview-img-selected {
    border: 2px solid #1027f9;
    box-sizing: border-box;
}

div.album-view-header-div {
    display: flex;
    /* width: 1200px; */
    width: 1017px;
    margin-top: 75px;
    /* margin: 0 auto; */
    margin-left: auto;
    margin-right: auto;
}

div.album-view-div {
    /* display: inline-block; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 25px;
}

img.album-view-side-arrow2 {
    margin-left: 1%;
    margin-right: 1%;
    object-fit: contain;
    max-width: 5%;
    cursor: pointer;
}

img.album-view-side-arrow {
    margin-left: 1%;
    margin-right: 1%;
    object-fit: contain;
    max-width: 4%;
    cursor: pointer;
}

img.album-view-side-arrow:hover {
    opacity: 0.5;
}

img.album-view-side-arrow2:hover {
    opacity: 0.5;
}

.album-view-img {
    /* width: auto; */
    /* height: 100%; */
    margin-top: 8px;
    min-width: 170px;
    max-width: 899px;
    max-height: 1327px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 5px;
    cursor: pointer;
}

.album-view-img img {
    width: 100%;
}

img.album-full-screen-view-img-vertical {
    max-width: 86%;
    width: 86%;
    max-height: 100%;
    height: 100%;
    margin: 0;
}

img.album-full-screen-view-img-horizontal {
    max-width: 90%;
    max-height: 100%;
    width: 90%;
    margin: 0;
}

div.gray-hover-div:hover {
    opacity: 0.4;
    background-color: gray;
    height: 100%;
}


/* width */

#album-preview-imgs-div::-webkit-scrollbar {
    width: 7px;
}


/* Track */

#album-preview-imgs-div::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}


/* Handle */

#album-preview-imgs-div::-webkit-scrollbar-thumb {
    background: #313131;
    border-radius: 10px;
}


/* Handle on hover */

#album-preview-imgs-div::-webkit-scrollbar-thumb:hover {
    background: black;
}


/* width */

#view-user-description::-webkit-scrollbar {
    width: 7px;
}


/* Track */

#view-user-description::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}


/* Handle */

#view-user-description::-webkit-scrollbar-thumb {
    background: #313131;
    border-radius: 10px;
}


/* Handle on hover */

#view-user-description::-webkit-scrollbar-thumb:hover {
    background: black;
}

.fetch-album-btns {
    margin: auto;
    text-align: center;
    margin-top: 10px;
}

.fetch-album-btns button {
    padding: 7px 25px;
    margin: 0px 4px;
    border: 1px solid rgb(187, 185, 185);
    border-radius: 25px;
    background-color: #fff;
}

.fetch-album-btns button:hover {
    background-color: rgb(216, 212, 212);
}

div.full-screen-div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    /* border: 1px solid red; */
    z-index: 3;
}

img.full-screen-loading-img {
    width: 128px;
    height: 128px;
    position: absolute;
    top: 35%;
    left: 50%;
}

div#full-screen-fade-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

div.full-screen-black-div {
    opacity: 0.8;
    background-color: black;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

.full-screen-z-index {
    z-index: 10500;
}

.position-relative {
    position: relative;
}

.pointer-hover {
    cursor: pointer;
}

#full-screen-img-container {
    width: 1200px;
}

img.contain-fit {
    object-fit: contain;
}

.album-tab {
    margin: auto 10px;
}

p.album-view-comments-header {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    /* margin-bottom: 10px; */
}

.pagination_btns {
    max-width: 210px;
    min-width: 0px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding: 5px 15px;
    /* background-color: rgb(8, 177, 189); */
    background-image: linear-gradient(rgb(209, 237, 248), rgb(139, 176, 190));
}

.active-page-btn {
    background: local;
    background-color: rgb(1, 68, 136);
    color: white;
}

.pagination_btns span {
    background: none;
    font-size: larger;
    border: none;
    cursor: pointer;
}

span.album-card-price {
    font-weight: bolder;
    margin-right: 5px;
}

p.album-price {
    color: #000000;
}

.clear-both {
    clear: both;
}

div.sub-img-div {
    margin-left: 25px;
    padding-top: 25px;
    width: 771px;
}

#album-view-right-panel {
    width: 792px;
    margin-left: 25px;
    margin-top: 41px;
}

#album-view-right-panel .album-title {
    text-align: center;
    margin-bottom: 30px;
}

.ten-size-pad {
    padding-left: 5px;
    padding-right: 5px;
}

.top-bottom-16-pad {
    margin-top: 16px;
    margin-bottom: 16px;
}

#album-view-user-comment-text-area {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    color: #797878;
    border: 0;
    outline: none;
    padding: 15px 20px;
    /* width: 731px; */
    width: 769px;
}

div.album-view-user-comment-box-div {
    margin-top: 20px;
    /* width: 772px; */
    width: 100%;
}

button.album-view-comment-button {
    margin-right: 38px;
    float: right;
    width: 120px;
    height: 37px;
    margin-top: 15px;
    color: #ffffff;
    border-radius: 5px;
    /* font-size: 20px; */
    line-height: 23px;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
}

input.album-cancel-comment-button {
    float: right;
    width: 130px;
    margin-right: 20px;
    height: 37px;
    margin-top: 15px;
    border-radius: 25px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #ffffff;
}

input.red-button {
    background: #e53935;
    /* box-shadow: 0px 4px 4px rgb(0 0 0 / 25%); */
    border-radius: 20px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #ffffff;
}

button.album-view-cancel-button {
    /* width: 150px;
    padding: 10px 20px;
    background: #ffffff;
    border: 0.5px solid #e5e5e5;
    box-sizing: border-box;
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    margin-left: 55%;
    margin-top: 13px; */
    margin-right: 38px;
    float: right;
    width: 120px;
    height: 37px;
    margin-top: 15px;
    color: #000;
    border: none;
    border-radius: 5px;
    /* font-size: 20px; */
    line-height: 23px;
    background: #ffffff;
}

input.white-button {
    float: right;
    width: 130px;
    margin-right: 20px;
    height: 37px;
    margin-top: 15px;
    background: #ffffff;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
    border-radius: 25px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

.view-album-tab-content {
    padding-left: 7px;
    padding-right: 7px;
}

#login-comment-a,
#login-comment-a-mobile {
    color: #002196;
    cursor: pointer;
    text-decoration: underline;
}

#album-need-to-login-to-comment-div {
    max-width: 650px;
    margin-left: 7px;
    margin-right: 7px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 0px;
    background: white;
    text-align: center;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 5px;
    padding: 10px 6px;
}

div.album-view-comment {
    display: flex;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 30px;
    /* max-height: 117px; */
    height: auto;
    margin-top: 14px;
    /* max-height: 270px; */
    padding: 10px 7px;
    /* overflow: scroll; */
}

a.av-commentbox-userName {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

p.av-commentbox-comment {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: medium;
    height: auto;
    line-height: 28px;
    color: #000000;
    width: auto;
}

div.comment-right-side {
    margin-left: 10px;
}

div.comment-right-side-top {
    display: flex;
}

p.av-commentbox-lastEdit {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    margin-top: 10px;
    margin-left: 10px;
}

img.av-commentbox-img {
    width: 77px;
    height: 77px;
    object-fit: cover;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    max-height: 77px;
    max-width: 77px;
    cursor: pointer;
    border-radius: 50%;
}

div.view-user-left-div {
    padding-right: 10px;
    padding-left: 10px;
}

div.view-user-white-box-div {
    margin: auto;
    margin-top: 50px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    max-width: 1185px;
    background: white;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 0px 10px 25px 10px;
    padding-bottom: 50px;
}

div.view-user-right-div {
    max-width: 550px;
    min-width: 50px;
    text-align: left;
    margin-top: 29px;
    flex-grow: 1;
}

div.user-icon-container {
    position: relative;
}

img.view-user-icon {
    height: 170px;
    object-fit: cover;
    width: 170px;
    max-height: 100%;
    border-radius: 50%;
    max-width: 100%;
    filter: drop-shadow(2px 5px 6px rgba(0, 0, 0, 0.45));
    margin-top: 84px;
    cursor: pointer;
}

img.view-user-icon:hover {
    opacity: 70%;
}

img.view-user-camera-img {
    position: absolute;
    right: 0px;
    bottom: 0px;
    /* top: 211px;
  position: absolute;
  left: 116px; */
    cursor: pointer;
}

p.view-user-display-name {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    color: #000000;
}

p.view-user-about-me {
    display: inline-block;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #737373;
    margin-top: 0px;
    margin-bottom: 14px;
}

div.view-user-edit-description-div {
    float: right;
}

img.view-user-edit-description-img {
    /* display: inline-block; */
    position: relative;
    left: 0px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

p.view-user-edit-description-p {
    /* display: inline-block; */
    /* float: right; */
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    margin-left: 10px;
    position: relative;
    top: 2px;
    left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    cursor: pointer;
}

textarea.view-user-description {
    margin: 0px;
    height: 181px;
    /* max-width: 684px; */
    /* width: 100%; */
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    padding: 15px 20px;
    outline: none;
    /* overflow-x: hidden; */
}

p.view-user-payment-method {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    display: inline-block;
}

.crypto-wallet-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 80%;
    padding-top: 10px;
}

input.view-user-add-other-payment-button {
    /* display: inline-block; */
    border: 0.25px solid #262627;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 8px;
    width: 160px;
    height: 33px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    position: relative;
    top: -5px;
    /* float: right; */
    /* margin-left: 100px; */
}

.user-album-div {
    max-width: 334px;
    max-height: 163px;
    display: flex;
    border-radius: 30px;
    padding: 10px 9px;
    position: relative;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 70px;
}

.user-album-cover-img-div {
    position: relative;
    bottom: 50px;
}

.user-album-cover-content {
    margin-left: 10px;
    /* line-height: 2px; */
}

.user-album-cover-content p {
    margin-bottom: 15px;
}

.user-album-name {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    color: #000000;
    margin: 0px;
    width: 175px;
    text-align: center;
    margin-bottom: 20px;
}

.user-album-description {
    /* position: absolute; */
    top: 112px;
    left: 144px;
    width: 175px;
    height: 79px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 15px;
    text-align: justify;
    color: #5b5b5b;
    margin: 0px;
    word-wrap: break-word;
    /* border: 1px solid red; */
    overflow-y: scroll;
}

.user-album-created-time {
    text-align: right;
}

.user-album-white-background {
    max-width: 334px;
    max-height: 163px;
}

.tabset>input[type='radio'] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
.tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
.tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
.tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5),
.tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6) {
    display: block;
}

.tabset>label {
    position: relative;
    display: inline-block;
    padding: 5px 10px 25px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
}

.tabset>label::after {
    content: '';
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 22px;
    height: 4px;
    background: #8d8d8d;
}

.tabset>label:hover,
.tabset>input:focus+label {
    color: #06c;
}

.tabset>label:hover::after,
.tabset>input:focus+label::after,
.tabset>input:checked+label::after {
    background: #06c;
}

.tabset>input:checked+label {
    border-color: #ccc;
    border-top-left-radius: 25px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-panel {
    padding: 30px 0;
    border-top: 1px solid #ccc;
}

.tabset {
    max-width: 65em;
    margin-top: 20px;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 70px auto;
    padding: 15px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 5s ease-in-out;
    height: 250px;
}

.popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.popup .close:hover {
    color: red;
}

.popup .content {
    max-height: 30%;
    overflow: auto;
}

.report-popup-content p {
    margin-top: 65px;
    margin-bottom: 40px;
}

@media screen and (max-width: 700px) {
    .box {
        width: 70%;
    }
    .popup {
        width: 70%;
    }
    .dob-div {
        text-align: center;
        display: block;
    }
    .dob-fields {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-top: 4px;
    }
}

p.toggle-desc {
    color: #244fe9;
    border: 1px solid #244fe9;
    width: 5px;
    padding: 0px 9px 0px 6px;
    border-radius: 35px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    /* margin: 0; */
    margin-top: 7px;
}

p.toggle-desc:hover {
    opacity: 0.5;
}

#album-desc-popup-box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
}

#album-desc-popup-box #box {
    width: 500px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
    margin: auto;
    position: absolute;
    top: 20%;
    left: 30%;
    padding: 10px;
}

#album-desc-popup-box p {
    margin-top: 30px;
    text-align: justify;
    line-height: 1.2rem;
}

#user-view-pic-browse {
    position: relative;
    top: -24px;
    left: 13px;
}

#view-user-progress-div {
    /* margin-top: 150px; */
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 163px;
    height: 65px;
}

#view-user-white-bar {
    width: 161px;
    height: 10px;
    background: white;
    position: absolute;
    border-radius: 25px;
}

#view-user-blue-bar {
    width: 161px;
    height: 10px;
    background: #0038ff;
    position: absolute;
    border-radius: 25px;
}

#view-user-progress-p {
    margin-bottom: 7px;
}

div.right-div-left-padding {
    margin-right: 61px;
}

div.view-user-icon-div {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

input.blue-button {
    background: #1c32ff;
    color: #ffffff;
    cursor: pointer;
}

input.blue-button:hover {
    background-color: #0b1743;
}

input.blue-button:active {
    background-color: #030c2d;
}

input.blue-button:disabled {
    background-color: #b3b9d1;
    color: #e0e0e0;
    cursor: not-allowed;
    opacity: 0.7;
    outline: none;
    /* removes blue outline */
    box-shadow: none;
    /* removes any glow (Safari/Chrome) */
}

div.payments-white-box-div {
    padding: 0px 7px;
    margin-top: 100px;
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    max-width: 1109px;
    margin-left: auto;
    margin-right: auto;
}

p.payment-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    color: #000000;
    padding-top: 41px;
    margin-bottom: 0px;
}

p.payments-sub-header {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    color: #000000;
}

div.payment-title-div {
    margin-top: 25px;
}

div.warning-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    gap: 6px;
    background: #f2f2f2;
    border-radius: 8px;
}

p.warning-box-p {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #000000;
}

div.payments-left-pad {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px 0px;
}

div.payments-left-pad>div {
    margin: 20px 12px;
}

div.payment-method-div {
    width: 256px;
    margin-top: 43px;
    box-shadow: 4px 4px 7px black;
    max-height: 139px;
    position: relative;
    right: 90px;
}

div.payment-method-div:hover {
    box-shadow: 0px 0px 4px black;
}

div.payment-credit-card-div {
    /* border: 0.75px solid #002196; */
    box-sizing: border-box;
    border-radius: 5px;
    text-align: center;
    /* height: 139px; */
    display: flex;
    justify-content: center;
}

p.payment-credit-card-p {
    position: relative;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    /* line-height: 42px; */
    color: #000000;
    padding-top: 50px;
    margin-left: 14px;
}

img.payment-crypto-img {
    margin-top: 10px;
    width: 60px;
    height: 120px;
    animation: ethImg 5s infinite;
}

@keyframes ethImg {
    50% {
        transform: rotateY(180deg);
    }
}

div.payment-bi-div {
    width: 391px;
    display: inline-block;
    vertical-align: top;
    margin-left: 113px;
}

div.payment-ci-div {
    max-width: 391px;
    vertical-align: top;
    min-width: 0px;
}

p.payment-bi-p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    margin-top: 17px;
    margin-left: 12px;
}

a.need-help-payment {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
}

ul.help-ul {
    margin-left: 30px;
}

input.payment-input-wallet {
    /* Input */
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 16px;
    gap: 8px;
    /* width: 331px; */
    height: 40px;
    /* White */
    background: #ffffff;
    /* Neutral/04/100% */
    border: 1px solid #6c7275;
    border-radius: 6px;
    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

input.payment-input-wallet::placeholder {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 19px;
    color: #6c7275;
} 

input.payment-input {
    background: #ffffff;
    border: 0.5px solid #000000;
    box-sizing: border-box;
    border-radius: 25px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 19px;
    line-height: 19px;
    /* identical to box height */
    /* box-shadow: 0px 4px 4px rgb(0 0 0 / 25%); */
    color: #494747;
    outline: none;
    padding: 7px 20px;
    padding-right: 46px;
    /* margin-bottom: 21px; */
}

input.payment-input::placeholder {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 19px;
    line-height: 19px;
    /* padding: 7px 20px; */
    color: #494747;
}

input.payment-input-big {
    width: 390px;
    height: 50px;
}

input.payment-input-medium {
    width: 190px;
    height: 50px;
}

.payment-input-medium-pad {
    margin-left: 10px;
}

.add-wallet-btn {
    text-align: right;
}

select.payment-country {
    background: #ffffff;
    border: 0.5px solid #000000;
    box-sizing: border-box;
    border-radius: 25px;
    width: 390px;
    height: 50px;
    outline: none;
    padding: 7px 20px;
}

div.payment-divider-div {
    width: 35px;
    display: inline-block;
}

div.payment-need-help-div {
    /* margin-top: 14px; */
    margin-right: 14px;
}

div.payment-divider-line {
    border: 1px solid #000000;
    transform: rotate(90deg);
    width: 254px;
    height: 0px;
    position: relative;
    left: -103px;
    top: 51px;
}

select.payment-credict-card-expiration-select {
    background: #ffffff;
    border: 0.5px solid #000000;
    box-sizing: border-box;
    border-radius: 25px;
    width: 190px;
    height: 50px;
    outline: none;
    padding: 7px 20px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 19px;
    line-height: 14px;
    /* identical to box height */
    /* box-shadow: 0px 4px 4px rgb(0 0 0 / 25%); */
    color: #494747;
    /* margin-bottom: 21px; */
}

div.margin-bottom-21 {
    margin-bottom: 21px;
}

#payment-cvc-img {
    z-index: 10;
    position: absolute;
    top: 17px;
    left: 398px;
}

#payment-cvc-dialog-div {
    position: relative;
    top: -134px;
    left: 425px;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width: 450px;
}

p.payment-cvc-dialog-p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 26px;
    line-height: 30px;
    color: #000000;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 12px;
    margin: 0;
}

#payment-cvc-dialog-triangle {
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    transform: rotate(-45deg);
}

.position-absolute {
    position: absolute;
    border: 1px solid red;
}

input.accept-btn, .blue-card-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    background: #5a83ce;
    font-family: 'IBM Plex Sans Thai Looped';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    align-items: center;
    text-align: center;
    color: #ffffff;
    border: none;
    outline: none;
}

input.cancel-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    background: #ffffff;
    font-family: 'IBM Plex Sans Thai Looped';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    align-items: center;
    text-align: center;
    color: #5a83ce;
    box-sizing: border-box;
    border: 1px solid #5a83ce;
}

.payment-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'exclusivity exclusivity' 'preview     form';
    gap: 1rem;
    max-width: 1080px;
    margin: 0 auto;
}

.payments-kb-container {
    grid-area: preview;
}

.payments-exclusivity-container {
    grid-area: exclusivity;
}

.payment-form-container {
    grid-area: form;
}

.payment-form-max-width-div {
    max-width: 472px;
}

input.payment-confirm-btn {
    padding: 20px 30px;
    padding-right: 0px;
    padding-left: 0px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    /* identical to box height */
    color: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    width: 150px;
}

input.payment-cancel-btn {
    width: 150px;
    /* height: 56px; */
    padding: 20px 30px;
    background: #ffffff;
    border: 0.5px solid #e5e5e5;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    /* identical to box height */
    color: #000000;
    margin: 0px 5px;
}

img.check-pay-img-big {
    vertical-align: middle;
    position: relative;
    /* top: -57px; */
    /* left: 348px; */
    /* left: 170px; */
    left: -35px;
    top: 15px;
    width: 25px;
    height: 25px;
}

img.check-pay-img-medium {
    vertical-align: middle;
    position: relative;
    top: -39px;
    left: 122px;
}

div.relative {
    position: relative;
}

.payment-default-p-make-default {
    display: none;
    margin-left: 7px;
    margin-top: 15px;
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 0px;
}

div.payment-graybox-div {
    background: #ececec;
    border: 0.25px solid #272626;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    height: 58px;
    width: 327px;
    position: relative;
}

div.payment-graybox-crypto-div {
    background: #ececec;
    border: 0.25px solid #272626;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    height: 58px;
    max-width: 360px;
    width: 100%;
    min-width: 0px;
    display: flex;
    justify-content: flex-start;
    cursor: pointer;
    padding-top: 17px;
    position: relative;
}

div.payment-graybox-crypto-div:hover {
    background: #c6dfc5;
}

div.payment-graybox-crypto-div:hover+.payment-default-p-make-default {
    display: block;
}

div.payment-graybox-crypto-div:active {
    background: #5f6e5f;
}

div.payment-greenbox-crypto-div {
    background: rgba(5, 158, 2, 0.35);
    border: 0.25px solid #272626;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    max-height: 58px;
    max-width: 360px;
    width: 100%;
    min-width: 0px;
    display: flex;
    justify-content: flex-start;
    padding-top: 17px;
    position: relative;
    flex-grow: 2;
}

p.payment-default-p {
    color: #000000;
    margin-left: 7px;
    margin-top: 15px;
    padding: 0px;
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 0px;
}

input.payment-default-checkbox {
    width: 15.43px;
    height: 15.43px;
    border: 0.964286px solid #090909;
}

.gap-5px {
    gap: 5px;
}

label.payment-make-default-p {
    /* font-size: 16px; */
    /* color: #000000; */
    /* transform: translate(5%, 17%); */
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #151515;
}

a.payment-need-help-a {
    font-size: 16px;
    color: #0d25ff;
}

p.wallet-address {
    font-size: 18px;
    min-width: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    margin-left: 26px;
    margin-right: 13px;
}

div.payments-div {
    width: 100%;
    margin-bottom: 24px;
    margin-top: 42px;
    padding-left: 20px;
}

div.payment-kb-info {
    width: 100%;
    max-width: 536px;
}

img.payment-kb-img {
    /* object-fit: cover;
    width: 100%;
    height: 386px;
    background-image: linear-gradient(#cac8c8, white);
    margin: 0;
    border-radius: 5px; */
    object-fit: contain;
    width: 100%;
    height: 321px;
    margin: 0;
    border-radius: 5px;
}

p.payment-kb-title {
    font-family: 'Adobe Garamond Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-top: 0.5rem;
}

p.payment-p2 {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}

div.payment-profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

div.payment-tags-container {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px;
    margin-top: 8px;
}

div.payment-profile-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

a.payment-tag {
    font-family: 'Adobe Garamond Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    color: #1064ff;
    margin: 0 0.1em;
}

p.payment-row-p {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}

.width-100pcent {
    width: 100%;
}

div.payment-price-div {
    justify-content: center;
    align-items: center;
    padding: 5.00245px 6.0049px;
    /* gap: 15.01px; */
    /* width: 46.01px; */
    height: 24px;
    background: #f1f1f0;
    position: relative;
    top: 9.5px;
}

div.card-album-price-bump {
    position: relative;
    top: 3px;
}

div.album-price-div {
    justify-content: center;
    align-items: center;
    padding: 5.00245px 6.0049px;
    /* gap: 15.01px; */
    /* width: 46.01px; */
    height: 24px;
    background: #f1f1f0;
}

p.payment-profile-right-p {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}

p.payment-kb-price {
    font-family: 'Adobe Garamond Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    color: #151515;
}

div.red-box-error-div {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    box-sizing: border-box;
    width: 100%;
    background: rgba(255, 59, 59, 0.1);
    border: 1px solid #dc3545;
    border-radius: 4px;
    gap: 12px;
}

p.red-box-error-p {
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.3px;
    color: #000000;
    margin: 0;
}

img.red-box-cross-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.text-guide-padding {
    margin-left: 5px;
}

span.space {
    content: ' ';
    /* Add a space as content */
    /* display: inline-block; */
    padding-left: 5px;
    /* Adjust the desired padding value */
}

a.space {
    content: ' ';
    /* Add a space as content */
    /* display: inline-block; */
    padding-left: 5px;
    /* Adjust the desired padding value */
}

.inline {
    display: inline;
}

.inline p,
.inline span,
.inline a {
    display: inline;
    margin: 0;
}

img.guide-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 75%;
}

div.payment-div {
    margin-bottom: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0px;
    /* position: relative; */
}

img.user-payment-card-type {
    position: relative;
    top: 8px;
    left: 114px;
}

img.user-payment-crypto-type {
    height: 30px;
    width: 17px;
    margin-right: 20px;
    margin-top: -4px;
}

img.user-payment-delete {
    position: relative;
    top: 13px;
    left: 11px;
    cursor: pointer;
}

img.user-payment-delete-crypto {
    cursor: pointer;
    margin-right: 19px;
    height: 30px;
    /* margin-top: 10px; */
}

img.user-payment-delete-crypto:hover {
    opacity: 50%;
}

img.user-payment-delete:hover {
    opacity: 50%;
}

div.pop-up-grey-rectangle-div {
    text-align: center;
    width: 866px;
    height: auto;
    padding: 30px 10px;
    margin: 15px 0px;
    max-width: 100%;
    margin: 0px 150px;
    opacity: 100%;
    background: #cfd8dc;
    border: 0.5px solid #000000;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    z-index: 1000;
    /* position: relative; */
}

p.pop-up-header {
    font-size: clamp(30px, 2vw, 40px);
    line-height: 33px;
    color: #000000;
}

p.pop-up-description {
    font-size: clamp(16px, 2vw, 40px);
    color: #000000;
}

p.pop-up-description-aux {
    font-size: 36px;
    color: #000000;
    width: 100%;
}

input.pop-up-red-button {
    max-width: 250px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-size: 36px;
    margin-right: 10px;
    margin-top: 6px;
    color: #ffffff;
}

input.pop-up-white-button {
    width: 250px;
    height: 50px;
    cursor: pointer;
    background: #ffffff;
    border: 0.25px solid #c4c4c4;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-size: 36px;
    margin-top: 6px;
    color: #000000;
    margin-right: 10px;
}

div.pop-up-black-div {
    opacity: 0.8;
    background-color: black;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

div.pop-up-full-screen-div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 35px 30px;
    z-index: 9;
}


/* div.pop-up-buttons-div {
  position: absolute;
  bottom: 35px;
  left: 154px;
} */

div.pop-up-aux-div {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 188px;
    word-wrap: break-word;
}

div.album-author-sub-div-top {
    display: flex;
    padding: 0px 5px;
    justify-content: space-between;
    align-items: center;
}

.album-author-sub-div-bottom {
    display: flex;
    padding: 0px 5px;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 600;
    margin-top: 10px;
}

img.album-author-img {
    height: 35px;
    width: 35px;
    object-fit: cover;
    max-height: 35px;
    max-width: 35px;
    /* filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); */
    vertical-align: middle;
    margin-left: 10px;
    position: relative;
    /* top: -6px; */
    cursor: pointer;
    border-radius: 50%;
}

a.album-name-mobile-a {
    display: block;
    font-weight: 700;
    font-size: clamp(14px, 2vw, 18px);
}

.album-publish-date-mobile {
    margin-bottom: 0px;
    font-size: clamp(14px, 2vw, 18px);
    text-align: right;
}

.created-by-box {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
}

.created-by-box img.album-author-img {
    width: 20px;
    height: 20px;
    margin: 0px;
    margin-right: 2px;
}

p.album-author-sub-p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
}

div.buy-white-box-div {
    max-width: 1271px;
    height: auto;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    background: white;
    margin: auto;
    margin-top: 50px;
    padding: 10px 5px 12px 5px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    text-align: center;
}

.border-r {
    border: 1px solid red;
}

div.buy-white-box-left {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

div.buy-white-box-right {
    padding: 0px 10px;
    text-align: center;
}

div.buy-img-div {
    max-width: 377px;
    text-align: center;
    position: relative;
    top: -29px;
}

div.buy-album-details-div {
    max-width: 350px;
    width: initial;
    flex-grow: 1;
    margin: auto;
    margin: 0px 0px;
    padding: 0px 10px;
    padding-top: 25px;
}

div.buy-description-container {
    max-width: 375px;
    width: 100%;
    text-align: left;
}

div.buy-description-div {
    margin-top: 7px;
    max-height: 241px;
    overflow: auto;
    position: relative;
}

div.buy-album-finance-div {
    max-width: 374px;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 253px;
}

p.buy-album-payments-p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #000000;
}

div.buy-album-transaction-details-div {
    margin-top: auto;
    text-align: right;
}

.album-cost {
    margin-top: 50px;
    /* padding-top: 50px; */
    margin-bottom: -10px;
}

div.buy-album-line {
    border: 1px solid #000000;
    max-width: 372px;
    width: 100%;
    height: 0px;
}


/* div.buy-album-operation-buttons-div {
  border: 1px solid green;
} */

input.accept-buy-button {
    /* background: #e53935; */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    color: #ffffff;
    padding: 12px 32px;
    margin: 5px 9px;
}

input.cancel-buy-button {
    cursor: pointer;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 12px 32px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    color: #000000;
    margin: 5px 9px;
}

div.buy-album-title-div {
    /* display: inline-block; */
    text-align: left;
    margin-bottom: 0;
}

h2.buy-album-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    /* font-size: 36px; */
    font-size: x-large;
    color: #000000;
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.buy-author-name {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    line-height: 19px;
    color: #7a7878;
    position: relative;
    left: 7px;
    top: -9px;
    font-size: 16px;
}

.margin-auto {
    margin: auto;
}

.margin-top-15 {
    margin-top: 15px;
}

img.buy-author-img {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 10px;
    /* position: relative;
  top: -580px;
  left: 435px; */
    position: relative;
    top: -11px;
}

p.buy-album-description-header {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    /* position: relative;
  top: -586px;
  left: 436px; */
}

p.buy-album-description {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    margin-top: 7px;
}

p.buy-album-cost {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    /* font-size: 16px; */
    font-size: medium;
    color: #000000;
    margin-bottom: 4px;
}

p.buy-album-cost-pad {
    margin-bottom: 4px;
}

p.buy-album-fees {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: medium;
    color: #000000;
}

p.buy-album-total {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: large;
    line-height: 21px;
    color: #000000;
    margin-bottom: 0;
}

img.buy-cover-img {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 5px;
    max-width: 283px;
    width: 100%;
    max-height: 341px;
}

div.buy-album-line-pad {
    margin-bottom: 7px;
}

.black-scrollbar::-webkit-scrollbar {
    width: 7px;
}

.black-scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

.black-scrollbar::-webkit-scrollbar-thumb {
    background: #313131;
    border-radius: 10px;
}

.black-scrollbar::-webkit-scrollbar-thumb:hover {
    background: black;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

input.buy-album-add-payment {
    background: #1c32ff;
    border: 0.25px solid #262627;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    /* width: 160px; */
    height: 33px;
    padding: 0px 32px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    /* font-size: 14px; */
    color: #ffffff;
    margin-top: 15px;
}

.ui-icon.default {
    background: url('/mastercard.png') 0 0 no-repeat;
}

.ui-icon.visa {
    background: url('/visa.png') 0 0 no-repeat;
}

.ui-icon.mastercard {
    background: url('/mastercard.png') 0 0 no-repeat;
}

select.buy-album-payment-select {
    background: #ececec;
    border: 0.25px solid #272626;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    max-width: 344px;
    max-height: 58px;
    width: 100%;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    /* line-height: 21px; */
    /* identical to box height */
    color: #000000;
    padding: 16px;
    outline: none;
}

div.white-space-nowrap {
    white-space: nowrap;
}

p.buy-album-error-prompt {
    font-size: 14px;
    color: red;
    font-weight: bold;
    font-family: Roboto;
    overflow-wrap: break-word;
    text-align: center;
    margin-top: 23px;
    margin-bottom: 10px;
    padding-bottom: 0px;
}

div.confirm-album-details-div {
    margin-top: 25px;
}

.white-box-div-404 {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    max-width: 1365px;
    width: 100%;
    min-width: 30px;
    text-align: center;
    background: white;
    margin: auto;
    margin-top: 100px;
    justify-content: space-evenly;
    padding-bottom: 73px;
    padding-top: 73px;
}

div.confirm-album-white-box-div {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    max-width: 1365px;
    width: 100%;
    min-width: 30px;
    text-align: center;
    background: white;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    margin-top: 100px;
    margin-bottom: 30px;
    justify-content: space-evenly;
    padding-bottom: 73px;
    /* padding-top: 73px; */
    /* margin-left: 10px;
  margin-right: 10px; */
}

div.confirm-album-picture-div {
    max-width: 294px;
    margin-left: 5px;
    margin-right: 5px;
}

img.confirm-album-cover-picture {
    max-width: 294px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 15px;
}

div.confirm-album-description-div {
    max-width: 665px;
    width: 100%;
    padding-left: 7px;
    padding-right: 7px;
    vertical-align: top;
}

p.confirm-album-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 42px;
    color: #000000;
    margin-top: 0px;
}

p.confirm-album-description {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 30px;
    text-align: justify;

    color: #4b4b4b;
}

p.sell-album-description {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 30px;    
    color: #4b4b4b;
}

p.confirm-album-description2 {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 30px;
    text-align: justify;
    color: #4b4b4b;
    margin-bottom: 5px;
    margin-top: 5px;
}

p.confirm-album-detail-header-p {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
    text-align: justify;
    color: #000000;
    margin: 0;
}

a.confirm-album-detail-header-a {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
    text-align: justify;
    color: #000000;
    margin: 0;
}

p.confirm-album-detail-p {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    text-align: justify;
    color: #000000;
    margin: 0;
}

div.confirm-album-detail-row-div {
    display: flex;
    justify-content: space-between;
}

div.confirm-album-detail-margin {
    margin-bottom: 10px;
}

div.confirm-album-detail-width-div {
    text-align: left;
    width: 176px;
}

p.not-found-header {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 42px;
    color: #000000;
}

.white-box-div-404 {
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
    border-radius: 30px;
    max-width: 1365px;
    width: 100%;
    min-width: 30px;
    text-align: center;
    background: white;
    margin: auto;
    margin-top: 100px;
    justify-content: space-evenly;
    padding-bottom: 73px;
    padding-top: 73px;
}

.white-box-div-404 h1 {
    font-family: Noto Sans;
    font-style: normal;
    /* font-weight: normal;
  font-size: xx-large; */
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
}

.not-found-code {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    /* font-size: xx-large; */
    line-height: 92px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
}

p.not-found-msg {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 25px;
    color: #4b4b4b;
}

div.not-found-back-link-div {
    width: 100%;
    margin-top: 50px;
    padding: 15px;
}

p.not-found-back-to-home {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    color: #002196;
    margin-left: 15px;
    padding-top: 16px;
}

div.not-found-back-link-div a {
    text-decoration: none;
}

.back-home-btn {
    border: 1px solid var(--color3);
    display: flex;
    max-width: 160px;
    justify-content: space-around;
    align-items: center;
    /* padding: 5px 12px; */
    color: white;
    border-radius: 5px;
    text-decoration: none;
}

.back-home-arrow {
    font-size: xx-large;
    margin-bottom: 10px;
}

.vertical-align-middle {
    vertical-align: middle;
}

p.bold {
    font-weight: bold;
}

p.no-vertical-margin {
    margin-bottom: 0px;
    margin-top: 0px;
}

p.confirm-album-state {
    margin-left: 8px;
}

.confirm-album-spinning {
    position: relative;
    top: -7px;
    left: 35px;
}

.spin2 { 
    position: relative;
    top: -45px;
    left: -26px;    
}

.spin3 { 
    position: relative;
    top: 0px;
    left: -26px;    
}

.spin4{
    position: relative;
    top: -37px;
    left: 301px;  
}

.spin4::before {
 animation: 1.5s linear infinite spinner2;
    animation-play-state: inherit;
    border: dashed 5px transparent;
    border-top: dashed 5px white;
    border-right: dashed 3px white; 
    border-bottom: dashed 2px white; 
    border-radius: 50%;
    content: '';
    height: 20px;
    width: 20px;    
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}

.spin3::before {
 animation: 1.5s linear infinite spinner2;
    animation-play-state: inherit;
    border: dashed 2.5px transparent;
    border-top: dashed 2.5px white;
    border-right: dashed 1.5px white; 
    border-bottom: dashed 1px white; 
    border-radius: 50%;
    content: '';
    height: 40px;
    width: 40px;
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}

.spin2::before {
 animation: 1.5s linear infinite spinner2;
    animation-play-state: inherit;
    border: dashed 5px transparent;
    border-top: dashed 5px white;
    border-right: dashed 3px white; 
    border-bottom: dashed 2px white; 
    border-radius: 50%;
    content: '';
    height: 40px;
    width: 40px;
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}

.spin::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 5px #cfd0d1;
    border-bottom-color: #1c87c9;
    /* border-bottom-color: rgb(7, 56, 131); */
    border-radius: 50%;
    content: '';
    height: 40px;
    width: 40px;
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}

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

@keyframes spinner2 {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(-50%, -50%, 0) rotate(-360deg);
    }
}

h2.report-title {
    color: red;
    font-weight: 500;
}

a.report-link {
    /* text-decoration: none; */
    color: blue;
    /* font-weight: bold; */
    position: relative;
    top: -9px;
}

h2.suspended-title {
    text-align: center;
    vertical-align: bottom;
    margin-top: 35px;
}

img.dashboard-dollar-img {
    position: relative;
    top: 5px;
    left: 14px;
}

div.dashboard-balance-div {
    width: 270px;
    height: 100px;
    max-width: 278px;
    background: #ffffff;
    border: 0.2px solid #000000;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    margin-top: 30px;
}

p.dashboard-balance-p {
    position: relative;
    top: 8px;
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 30px;
    /* identical to box height */
    text-align: justify;
    color: #000000;
    margin-left: 29px;
}

p.dashboard-no-transactions-legend {
    margin-left: 35px;
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
}

div.dashboard-transactions-div {
    background: #ffffff;
    border: 0.2px solid #000000;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    width: 100%;
    max-width: 769px;
    min-width: 0px;
    vertical-align: top;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 5px 10px;
}

p.dashboard-dollar-value-p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height */
    color: #000000;
    margin-right: 17px;
    float: right;
}

p.zero-margin-top {
    margin-top: 0px !important;
}

div.dashboard-transaction-cell-1 {
    max-width: 45px;
    vertical-align: top;
    margin-right: 3px;
}

div.dashboard-transaction-cell-1 img {
    width: 25px;
}

div.dashboard-transaction-cell-2 {
    display: flex;
    flex-direction: column;
}

div.dashboard-transaction-cell-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

div.dashboard-transaction-cell-3 {
    text-align: left;
    min-width: 0px;
    padding-left: 15px;
    margin-top: 25px;
}

div.dashboard-transaction-cell-2-user-div {
    width: 35px;
    vertical-align: top;
}

img.dashboard-transaction-user-icon-img {
    width: 25px;
    height: 25px;
    /* filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); */
    object-fit: cover;
    border-radius: 50%;
    margin-right: 7px;
}

p.dashboard-transcation-cell-title-p {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bolder;
    font-size: 18px;
    line-height: 18px;
    /* text-align: justify; */
    color: #4b4b4b;
    margin-bottom: 7px;
    margin-top: 1px;
    margin-left: 12px;
    width: auto;
}

p.transaction-cell-user-p {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 14px;
    text-align: justify;
    font-weight: bolder;
    color: #858484;
    /* margin-right: 4px; */
    margin-bottom: 0px;
    margin-top: 0px;
}

a.transaction-cell-user-a {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 14px;
    text-align: justify;
    /* color: #858484; */
    margin-bottom: 0px;
    margin-top: 0px;
}

p.transaction-cell-cost-p {
    margin-top: 0px;
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    color: #000000;
    margin-bottom: 1px;
    text-align: right;
}

p.transaction-cell-cost-value-p {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 18px;
    color: #000000;
    margin-top: 0px;
    /* text-align: right; */
    margin-bottom: 0px;
}

div.dashboard-transaction-div {
    /* white-space: nowrap; */
    border-top: 1px solid rgba(185, 184, 184, 0.233);
    padding-top: 10px;
}

input.confirm-album-retry-fund-button {
    background: #e53935;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-size: 24px;
    line-height: 28px;
    color: #ffffff;
    width: 280px;
    height: 56px;
    float: right;
    margin-top: 13px;
}

.ml-tab-5 {
    margin-left: 5px;
}

.inline {
    display: inline;
}

input.sell-album-usd-text {
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* border-radius: 25px; */
    width: 100%;
    height: 50px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #797878;
    /* border: 0; */
    outline: none;
    padding: 7px 20px;
}

p.sell-album-usd-value {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #6b6b6b;
    position: relative;
    left: -43px;
}

p.sell-album-eth-label {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    margin-left: 6px;
}

p.sell-album-usd-label {
    /* border: 1px solid green; */
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    /* position: relative;
  top: -30px;
  right: -140px; */
    position: relative;
    top: -32px;
    right: -72%;
}

p.pb-10 {
    padding-bottom: 10px;
}

div.mb-10 {
    margin-bottom: 10px;
}

p.album-author-title-p {
    font-size: 18px;
    margin: auto;
    padding-bottom: 1px;
}

.album-display-state {
    font-weight: 900;
    margin: auto 0px;
}

a.sell-album-author-name {
    /* position: absolute; */
    margin: 0;
    /* top: 203px;
  left: 50px; */
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    color: #000000;
    /* position: relative;
  top: '0px';
  left: '0px'; */
    /* margin-left: 33px;
    margin-bottom: 5px;
    position: relative;
    top: -3px; */
}

img.sell-album-author-img {
    /* position: absolute; */
    border-radius: 50%;
    width: 25px;
    height: 25px;
    object-fit: cover;
    /* left: -34px;
  top: -6px; */
    max-width: 25px;
    max-height: 25px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: relative;
    top: 6px;
    left: -73px;
}

div.sell-album-input-div {
    text-align: left;
}

#buy-album-error-prompt {
    padding-bottom: 13px;
    margin-top: 14px;
}

button.album-tab-button {
    width: 213px;
    height: 44px;
    margin-top: 21px;
    margin-left: 19px;
    border: none;
    border-bottom: 1px solid grey;
    font-style: normal;
    font-weight: normal;
    color: black;
    background-color: transparent;
    outline: transparent;
}

.active-album-tab-button[disabled] {
    /* background-color: red; */
    color: #0038ff;
    border-bottom: 1px solid #0038ff;
    /* background-color: transparent; */
}

.color-white {
    color: white;
}

.color-black {
    color: black;
}

div.album-description-overflow-div {
    overflow: auto;
    height: 500px;
}


/* .margin-bottom-0px {
  margin-bottom: 0px;
}

.margin-bottom-2px {
  margin-bottom: 2px;
} */

p.album-view-owner-selling-val-p {
    margin-top: 0px;
    margin-left: 5px;
    font-size: clamp(12px, 2vw, 14px);
    font-weight: 700;
}

p.av-owner-purchased-timestamp-p {
    margin-left: 5px;
    font-size: clamp(12px, 2vw, 14px);
    font-weight: 700;
}

div.report-wrapper {
    background-color: #fff;
    border-radius: 15px;
    font-family: Roboto;
}

legend {
    text-align: center;
}

.report-form .report-form-file-icon {
    padding: 10px 10px;
    border-radius: 250px;
    width: 80px;
    box-shadow: 2px 1px 4px 2px rgba(0, 0, 0, 0.25);
}

.report-form fieldset {
    /* border: 1px solid red; */
    border-radius: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding-bottom: 10px;
}

.report-form h2 {
    text-align: center;
}

.report-form select {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.report-form textarea {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#handleReportSubmission {
    color: white;
    cursor: pointer;
}

.report-form button {
    border-radius: 18px;
    padding: 5px 32px;
    /* text-align: center; */
}

.report-form button:hover {
    background: #f54340;
}

.nav-boxes {
    margin-top: 13px;
    margin-bottom: 50px;
}

.nav-box {
    width: 21px;
    height: 22px;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    margin-right: 8px;
}

.gray-nav-box {
    width: 21px;
    height: 22px;
    background: #b5b2b2;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    margin-right: 8px;
}

.a-box {
    display: block;
    width: 100%;
    height: 100%;
}

.btn-custom {
    color: #0038ff;
    border-bottom: 1px, #0038ff, solid;
}

.shareFacebook {
    background-color: black;
    color: #fff;
    border: none;
    margin-left: 10px;
}

.fa-facebook-f {
    color: #fff;
}

.fa-twitter {
    color: #fff;
}

.shareTwitter {
    background-color: black;
    color: white;
    border: 1px solid white;
    margin: 10px;
}

.share-logo {
    width: 24px;
    height: 24px;
}

p.promo-title {
    font-size: 15px;
    padding-top: 11px;
    text-align: center;
    margin-bottom: 0px;
}

div.promo-container {
    position: relative;
    /* height: 439px; */
    width: 418px;
    height: 544px;
}

div.promo-text-container {
    line-height: 24px;
    color: black;
    /* border: 1px solid red; */
    border-radius: 3px;
    padding: 1em;
    margin: auto;
    margin-bottom: 10px;
    width: 100%;
    /* max-width: 350px; */
    box-shadow: 0px 2px 3px rgb(112, 112, 112);
    background-color: white;
    position: relative;
    top: 100%;
    margin: 0;
    width: 500px;
    margin-left: 19px;
}

div.desktop-flex {
    display: flex;
    flex-flow: wrap;
    /* align-items: center; */
    justify-content: center;
}

img.promo-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    width: auto;
    height: auto;
}

img.promo-img2 {
    /* position: absolute; */
    top: 0;
    left: 0;
    opacity: 1;
    width: 100%;
}

h1.promo-h1 {
    font-weight: bold;
    font-size: 22px;
}

h2.promo-h2 {
    font-size: 20px;
}

button.promo-sign-up-btn {
    width: 100%;
}

.flex {
    display: flex;
}

.social-auth-button {
    cursor: pointer;
    width: 8rem;
    height: 2.5rem;
    gap: 5px;
    display: flex;
    /* padding: 5px 0; */
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color .3s, box-shadow .3s;
    border: 0.5px solid black;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    font-family: 'Adobe Garamond Pro';
    &:hover {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }
    &:active {
        background-color: #eeeeee;
    }
    &:focus {
        outline: none;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #c8dafc;
    }
    &:disabled {
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }
}

.social-auth-button .social-img {
    width: 20px;
    height: 20px;
}

.divider1 {
    width: 90%;
    margin: 0 auto;
    height: 0px;
    border: 1px solid #d1d3d4;
    flex: none;
    order: 3;
    flex-grow: 0;
}

.divider2 {
    width: 35%;
    height: 0px;
    border: 1px solid #d1d3d4;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.divider3 {
    height: 0px;
    border: 0.5px dashed #d1d3d4;
}

.divider4 {
    width: 90%;
    margin: 0 auto;
    height: 0px;
    border-top: 0.5px solid rgba(209, 211, 212, 0.7);
}

.divider2-white {
    width: 5%;
    height: 0px;
    border: white;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.flow1 {
    /* width: 300px; */
    height: 17px;
    font-family: 'Adobe Garamond Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: #000000;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.flow2 {
    /* width: 300px; */
    height: 30px;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.flow3 {
    /* width: 284px; */
    /* height: 32px; */
    font-family: 'Adobe Garamond Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 24.7813px;
    line-height: 130%;
    text-align: center;
    letter-spacing: -0.01em;
    color: #000000;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.flow4 {
    /* width: 322px; */
    /* height: 32px; */
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 400;
    font-size: 13.1651px;
    line-height: 125%;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    flex: none;
    order: 1;
    flex-grow: 0;
}

.flow5 {
    height: 17px;
    font-family: 'Adobe Garamond Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: #5a83ce;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.flow6 {
    height: 30px;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

.highlight-blue {
    color: #5a83ce;
}

.padding-2px {
    padding: 2px;
}

.flow-img {
    width: 80%;
}

.flow-div1 {
    display: flex;
    justify-content: center;
    /* Makes sure child is centered */
}

.divider2-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.divider2-img {
    /* height: 24px;  
    width: 24px;   */
    width: auto;
    display: block;
    width: 10%;
    max-width: 32px;
    max-height: 32px;
}

.flow-1-space {
    margin-bottom: 36px;
}

.flow-2-space {
    margin-bottom: 24px;
}

.flow-3-space {
    margin-bottom: 12px;
}

.flow-1-text-container {
    width: 75%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
}

.flow-2-text-container {
    width: 90%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
}

.reddit-signin-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #FF4500;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
}

.login-social-separator {
    height: 5vh
}

#social-signins {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#register-user-red-button {
    margin-bottom: 20px;
}

.twitter-login {
    background-color: #1da1f2;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    border: none;
}

.editor-div {
    width: 90%;
    position: relative;
    right: -5%;
}

.editor-input {
    width: 100%;
}

p.blog-p {
    margin-top: 10px;
    margin-bottom: 0px;
}

#blog-submit-btn {
    margin-top: 10px;
    float: right;
    width: 150px;
}

.blog-list-div {
    margin: 20px;
    font-family: sans-serif;
}

.blog-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
}

.blog-header {
    font-weight: bold;
    border-bottom: 2px solid #000;
}

.blog-col {
    flex: 1;
    padding: 0 10px;
}

.cover-form {
    margin-top: 10px;
    display: flex;
}

.revert-all {
    all: revert;
}

.zero-margin {
    margin: 0px;
}

.blog-edit-img-preview {
    max-width: 200px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.blog-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.blog-card {
    width: 300px;
    display: block;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    /* <-- Important: shows pointer on hover */
    background-color: #fff;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* subtle shadow on hover */
    text-decoration: none;
    /* prevent underline if any */
}

.blog-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content {
    padding: 1rem;
    text-align: justify;
    line-height: 1.6;
    hyphens: auto;
    word-break: break-word;
}

.blog-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
}

.blog-description {
    color: #666;
    font-size: 0.95rem;
}

.blog-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.cover-image-container {
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
}

.cover-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    /* Stretches while keeping aspect ratio */
    border-radius: 8px;
}

.blog-post-container {
    display: flex;
    justify-content: center;
}

.blog-content-wrapper {
    max-width: 800px;
    width: 100%;
    margin-top: 2rem;
}

.blog-content-wrapper li {
    margin-bottom: 10px;
    /* font-size: 1.1em;
    line-height: 1.6; */
    list-style-position: inside;
}


/* .blog-content-wrapper ol li::marker { */


/* font-weight: bold; */


/* } */

.blog-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.blog-content {
    font-size: 1rem;
    line-height: 1.6;
}

.quill-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.container {
    padding-left: 5px;
    padding-right: 5px;
}

.blog-page-divider {
    margin: 40px 0;
    border: none;
    height: 1px;
    background-color: #ddd;
}

.blog-page-other-posts {
    margin-top: 40px;
}

.blog-page-other-posts h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.blog-page-other-posts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.blog-page-other-posts-container .blog-card {
    flex: 1 1 250px;
    /* Grow and shrink nicely, minimum 250px */
    max-width: 300px;
}

.read-more {
    color: #007bff;
    /* nice blue, you can change it */
    /* margin-left: 6px; */
    font-weight: 500;
    font-size: 0.9em;
}

.read-more:hover {
    text-decoration: underline;
}


.red-border-color{ 
    border-color: red;
}


/* Tab content base styles - animated via JavaScript */

.view-album-tab-content {
    display: block;
    overflow: hidden;
    /* Ensure hardware acceleration for smooth transitions */
    will-change: height;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}


/* Ensure initially shown content is visible */

.view-album-tab-content.show-tab-content {
    display: block;
}


/* Images tab needs overflow-y always */

.view-album-tab-content[data-content="images"] {
    overflow-y: auto !important;
    overflow-x: hidden;
}

.view-album-tab-content.show-tab-content:not([data-content="images"]) {
    overflow: visible;
}


/* Mobile tab indicator transitions */

.mobile-tabs-active-indicator {
    transition: left 0.3s ease-out, width 0.3s ease-out;
}


/* Sticky container transitions */

.sticky-bottom-container {
    transition: transform 0.3s ease-out;
}


/* Tab text transitions */

.view-album-tabs {
    position: relative;
    transition: color 0.3s ease-out;
}

.view-album-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}

.view-album-tabs.view-album-active-tab::after {
    transform: scaleX(1);
}


/* Tab content transitions - NO fade, only height animation */

.view-album-tab-content {
    display: block;
    overflow: hidden;
    scroll-behavior: smooth;
    /* Height will be animated via JavaScript */
}


/* Special handling for images tab - always keep overflow-y for scrolling */

.view-album-tab-content[data-content="images"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}


/* Non-images tabs should have visible overflow when shown */

.view-album-tab-content.show-tab-content:not([data-content="images"]) {
    overflow: visible;
}


/* Respect user's motion preferences */

@media (prefers-reduced-motion: reduce) {
    .view-album-tab-content {
        transition: none !important;
    }
}


/* Mobile tabs active indicator transitions */

.mobile-tabs-active-indicator {
    transition: left 0.3s ease-out, width 0.3s ease-out;
}


/* Sticky container transitions */

.sticky-bottom-container {
    transition: transform 0.3s ease-out;
}


/* Tab text transitions */

.view-album-tabs {
    position: relative;
    color: var(--text-color);
    transition: color 0.3s ease-out;
}

.view-album-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}

.view-album-tabs.view-album-active-tab {
    color: var(--color2);
}

.view-album-tabs.view-album-active-tab::after {
    transform: scaleX(1);
}

.transactions-table {
  width: 100%;
  border-collapse: collapse;
}

.transactions-table thead th {
  text-align: left;
  padding: 0.75rem;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
}

.transactions-table tbody td {
  padding: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.transactions-table tbody tr:hover {
  background-color: #f9fafb;
}

p.email-preference{
    margin-bottom: 0px;
    text-align: left;
    margin-left: 5px; 
}

div.width-90percent{
    width: 90%;
}

.width-100percent{
    width: 100%;
}

div.email-preference-container {
    justify-content: flex-start;
    padding: 10px;
    text-align: left;
}

.font-weight-bold{
    font-weight: bold;
}

.new-line {
    flex-basis: 100%;
}

#email-preference-update {
    min-width: 50%; 

    justify-content: center;
    gap: 10px;    
    height: 54px;
    background: #5a83ce;
    font-family: 'IBM Plex Sans Thai Looped';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    align-items: center;
    text-align: center;
    color: #ffffff;
    border: none;
    outline: none;
}

.align-item-flex-start{
    align-items: flex-start;
}