.flex-center {

    display: flex;

    align-items: center;

    justify-content: center;

}







.main-section {

    margin-top: 50px;

    position: relative;

    font-family: var(--bs-font-sans-serif);

    font-size: 1rem;

    font-weight: 600;

    line-height: 1.5;

}



.main-section li {

    list-style: none;

}



.menu-panel,

.content-area {

    background: #fff;

    border: 1px solid var(--border_clr);

    border-radius: 5px;

    padding: 20px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .06);

}



.menu-panel {

    position: relative;

}



.user-profile,

.user-details {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.user-profile {

    gap: 13px;

}



.user-image {

    width: 110px;

    height: 110px;

    border-radius: 50%;

    overflow: hidden;

}



.user-details h4 {

    font-size: 20px;

}



.user-details p {

    color: var(--secondary_clr);

}



.menu-items {

    margin-top: 30px;

}



.menu-item {

    padding: 10px 0;

    cursor: pointer;

}



.menu-title,

.dropdown-menu-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.menu-title,

.dropdown-menu-title {

    color: #101010;

    font-size: 18px;

    position: relative;

}



.dropdown-menu-item.active span {

    color: var(--bs-primary);

}



.dropdown-menu-item.active .dropdown-menu-title::before {

    border: 3px solid var(--bs-primary);

}



.dropdown-menu-title::before {

    content: '';

    position: absolute;

    top: 50%;

    left: -20px;

    transform: translateY(-50%);

    width: 0;

    height: 0;

    border: 3px solid #101010;

    border-radius: 50%;

}



.menu-title:hover,

.dropdown-menu-title:hover {

    color: #101010;

}



.menu-title p {

    font-size: 18px;

}



.menu-item i {

    font-size: 14px;

}



.dropdown-menu-title p {

    font-size: 16px;

}



.pc-dropdown-menu {

    display: none;

    padding-left: 25px;

}



.dropdown-menu-item {

    padding: 5px 0;

    font-size: 16px;

    position: relative;

}



.dropdown-submenu-item {

    padding: 5px 0;

}



.dropdown-submenu-item a {

    font-size: 16px;

    font-weight: 400;

    color: #101010;

}



.pc-dropdown-submenu {

    display: none;

    padding-left: 20px;

}



/* content panel */

.section-title {

    margin-bottom: 30px;

}



.section-title h3 {

    font-size: 22px;

}#0B0C2A



.table-heading {

    border-bottom: 1px solid #C4C4C4;

}



.single-content-list tbody td,

.single-content-list tbody th {

    padding: 20px 0 !important;

    max-width: 160px;

}



.single-row {

    border-bottom: 1px dashed #C4C4C4;

}



.single-row td {

    margin: auto;

}



.single-cell {

    height: 50px;

}



.single-cell p {

    margin: auto;

}



.issue-date {

    padding: 5px 12px;

    background: #ECECEF;

    color: var(--secondary_clr);

    font-size: 14px;

    border-radius: 5px;

    display: inline-block;

}



.download-invoice {

    width: 34px;

    height: 34px;

    background: var(--bs-primary);

    border-radius: 5px;

}



.download-invoice i {

    color: #fff;

}



/* click events */

.rotate {

    transform: rotate(180deg);

}



.expand-btn {

    display: none;

    width: 50px;

    height: 50px;

    position: absolute;

    top: 30px;

    left: -25px;

    background: red;

    border-radius: 50%;

}



.menu-item.active .pc-dropdown-menu {

    display: block;

}



.menu-item.active .menu-title i {

    transform: rotate(180deg);

}





.dropdown-menu-item.active .pc-dropdown-submenu {

    display: block;

}



.dropdown-menu-item.active .dropdown-menu-title i {

    transform: rotate(180deg);

}



.dropdown-submenu-item.active a {

    color: #949494;

}



@media screen and (max-width: 768px) {



    .single-cell p,

    .table-heading th {

        font-size: 14px;

    }



    .single-row th {

        max-width: 50px;

    }

}



@media screen and (max-width: 630px) {

    .single-content-list table {

        max-width: 100%;

        min-width: 500px;

    }



    .single-content-list {

        overflow-x: scroll;

    }

}



.userPhoto,

.profile-img {

    background: #fff;

}



.userPhoto img {

    width: 5rem !important;

    height: 5rem !important;

    object-fit: cover;

    object-position: center;

}



.profile-img img {

    width: 6.875rem !important;

    height: 6.875rem !important;

    object-fit: cover;

    object-position: center;

}



.tabs-top {

    padding: 0 !important;

}



.creator-menu {

    padding: 0;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: space-around;

}



.creator-menu li {

    list-style: none;

}



.creator-menu-item {

    position: relative;

}



.creator-menu-item::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 0.1875rem;

    background: #0B0C2A;

    border-radius: 0.1875rem;

    -webkit-border-radius: 0.1875rem;

    -moz-border-radius: 0.1875rem;

    -ms-border-radius: 0.1875rem;

    -o-border-radius: 0.1875rem;

    transition: .3s;

    -webkit-transition: .3s;

    -moz-transition: .3s;

    -ms-transition: .3s;

    -o-transition: .3s;

}



.creator-menu-item:hover:before,

.creator-menu-item.active:before {

    width: 100%;

}



.tabs-top .dropdown .dropdown-menu {

    padding: 0 !important;

}



.creator-dropdown-menu {

    min-width: 10rem;

    padding: .5rem !important;

    margin: 0;

    background-color: #fff;

    background-clip: initial;

    border: 1px solid rgba(0, 0, 0, .15);

    border-radius: .25rem;

    box-shadow: 0 1px 15px rgba(0, 0, 0, .10);

    font-size: 1rem;

    color: #212529;

    text-align: left;

    list-style: none;

    position: absolute;

    top: 80%;

    right: -22px;

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transition: .4s;

    -webkit-transition: .4s;

    -moz-transition: .4s;

    -ms-transition: .4s;

    -o-transition: .4s;

}



button.post-type.show-menu~.creator-dropdown-menu {

    opacity: 1;

    visibility: visible;

    top: 105%;

    right: -22px;

}



button.post-type {

    display: inline-block;

    font-size: 1rem;

    font-weight: 600;

    line-height: 1.375rem;

    color: #101010 !important;

    padding-left: 0;

    padding-right: 0;

    padding: 1.125rem 0;

    position: relative;

    z-index: 1;

    transition: all 0.3s;

    background: transparent;

    border: none;

}



.creator-menu-link {

    display: inline-flex;

    font-size: 1rem;

    font-weight: 600;

    line-height: 1.375rem;

    color: #101010 !important;

    padding-left: 0;

    padding-right: 0;

    padding: 1.125rem 0;

    position: relative;

    z-index: 1;

    transition: all 0.3s;

}



.creator-menu-item li:hover {

    background: #10101010;

}



.creator-menu-item li {

    padding: .5rem 0;

    border-radius: 3px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -ms-border-radius: 3px;

    -o-border-radius: 3px;

}



.creator-menu-item .dropdown-item:hover {

    background: transparent !important;

}



.creator-menu-item .dropdown-item {

    font-size: .85rem;

    font-weight: 600;

    line-height: 1.375rem;

    color: #101010 !important;

    padding: 0 .5rem;

}



.alert.payout p,

.payout-note {

    font-size: 14px;

}