/* General CSS */

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
    /*padding: 0 !important;*/
    /*background-color: #1D1D1B;*/
    font-family: "Noto Sans";
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
}

.my-2rem {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mb-2rem {
    margin-bottom: 2rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.625rem;
    font-size: 0.875rem;
    /*margin-bottom: 1.25rem;*/
    background-color: #fff;
    background-image: none;
    border: 1px solid #d7d7d7;
    height: inherit;
    color: #2f2e2d;
}

.form-group {
    position: relative;
    margin-bottom: 0.9375rem;
}

.form-control::placeholder {
    color: #d7d7d7;
}

.form-height-se {
    min-height: 15.3125rem;
}

.input-group {
    margin-bottom: 0.9375rem;
}


.featured-communities-list {
    overflow-y: auto;
    max-height: 16.75rem;
    position: relative;
}

.recipients-list:after {
    position: sticky;
    content: "";
    top: initial;
    bottom: 0;
    height: 1.875rem;
    width: 100%;
    background: linear-gradient(0deg, #fff 40%, #0000);
    z-index: 9;
    display: inline-block;
}

.recipients-list ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
}

    .recipients-list ul li {
        border-bottom: 1px solid #d7d7d7;
        padding: 0.3125 0;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }

        .recipients-list ul li span {
            float: right;
        }

.form-control:focus {
    color: #000;
    box-shadow: inherit;
    border-color: #f48220;
    /*background: rgba(244,130,32,0.24);*/
}

.input-group .input-group-prepend span.input-group-text {
    background: #0000;
    border-right: none;
}

.input-group .input-group-prepend {
    border-right: none;
    background: #fff;
}

    .input-group .input-group-prepend + input.form-control {
        border-left: 0;
    }

.featured-communities-list:after {
    position: sticky;
    content: "";
    top: initial;
    bottom: 0;
    height: 1.875rem;
    width: 100%;
    background: linear-gradient(0deg, #fff, #ffffff29);
    z-index: 9;
    display: inline-block;
}

.featured-communities-list ul {
    padding: 0;
    list-style-type: initial;
}

    .featured-communities-list ul li.list-se {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid #d7d7d7;
    }

        .featured-communities-list ul li.list-se .list-left-box {
            position: relative;
            padding-left: 3.25rem;
            width: 62%;
        }

            .featured-communities-list ul li.list-se .list-left-box span {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 2.5rem;
                height: 2.5rem;
                /*border-radius: 30%;*/
                /*overflow: hidden;*/
            }

                .featured-communities-list ul li.list-se .list-left-box span img {
                    width: 100%;
                    border-radius: 30%;
                }

            .featured-communities-list ul li.list-se .list-left-box h6 {
                margin: 0;
                font-size: 0.875rem;
                line-height: 1.25rem;
                color: #1581e2;
            }

            .featured-communities-list ul li.list-se .list-left-box p {
                margin: 0;
                font-size: 0.75rem;
                color: #817f7e;
                width: 8.75rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0;
            }

.right-left-box p {
    margin: 0;
    color: #a6a3a0;
    padding-bottom: 0;
    font-size: 0.75rem;
}

.arrow-icon, .arrow-icon a {
    color: #bfbdba;
}

label {
    font-weight: 600;
    font-size: 0.875rem;
    font-weight: 500;
    color: #464544;
}

.right-left-box {
    width: 20%;
    text-align: right;
}

.text-left-right {
    margin-top: 1.25rem;
}

.dis-se:after {
    position: absolute;
    content: "";
    top: initial;
    bottom: 0;
    height: 1.875rem;
    width: 100%;
    background: linear-gradient(0deg, #fafafa 40%, rgba(250, 250, 250, 0.16));
    z-index: 9;
    display: inline-block;
}

.dis-se p {
    text-indent: 1.25rem;
    font-size: 0.75rem;
    color: #000;
    line-height: normal;
    margin: 0;
}

.dis-se {
    position: relative;
}

.twoicon-box {
    margin: 0.625rem 0;
}

.left-img-box p {
    font-size: 0.9375rem;
    margin: 0;
    padding: 0;
    color: #bfbdba;
}

.featured-communities-list ul li.list-se .list-left-box span i {
    position: absolute;
    right: -0.3125;
    bottom: -0.3125;
    background: #f48220;
    border-radius: 50%;
    padding: 0.1875rem;
    font-size: 0.625rem;
    z-index: 9;
}

@media (min-width: 768px) {
    header .navbar {
        padding: 0 1rem 0 0;
    }
}

.navbar-light .navbar-nav .nav-link {
    padding: 0.4375rem 0.9375rem;
    background: initial;
    color: #2f2e2d;
    border-radius: 5px;
    font-weight: 500;
    font-family: "Noto Sans";
    font-size: 0.875rem;
    margin-right: 0.25rem;
    line-height: 1.25;
}

    .navbar-light .navbar-nav .nav-link.active {
        background: #fefaf6;
        position: relative;
        color: #f48220;
    }

        .navbar-light .navbar-nav .nav-link.active:before {
            position: absolute;
            left: 0;
            right: 0;
            height: 0.0625rem;
            width: 100%;
            background: #f48220;
            bottom: -0.625rem;
            content: "";
        }

    .navbar-light .navbar-nav .nav-link.dropdown-toggle span {
        max-width: 11.25rem;
        word-wrap: break-word;
        line-height: normal;
        white-space: normal;
        font-family: "Noto Sans";
        font-weight: normal;
        font-size: 0.75rem;
        text-align: right;
        padding-right: 1rem;
        color: #464544;
    }

header {
    border-bottom: 1px solid #eae9e9;
    z-index: 999;
    background: #fff;
    position: fixed;
    width: 100%;
    top: 0;
}

.list-sidebar li a {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    padding: 0.625rem 1.25rem;
    color: #817f7e;
    font-weight: 500;
    position: relative;
    font-size: 0.875rem;
    /*font-family: "Noto Sans";*/
}

.layout {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.sidebar {
    width: 16rem;
    height: fit-content;
    overflow-y: auto;
    border-right: 1px solid #eae9e9;
    padding: 2rem 0;
    background: #ffffff;
    flex-shrink: 0;
}

.main {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.25rem 1rem 2.5rem;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    height: fit-content;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: center
}

p[name="menu-item-text"],
p[name="submenu-name"],
.pssidebar-menu-item p {
    margin: 14px 0px 16px;
}

.pslistarea-root {
    max-width: unset;
}

.psworkingarea-root {
    padding: 0px;
    background: #fafafa;
}

a {
    text-decoration: none;
}


.list-sidebar li {
    list-style-type: none;
}

.list-sidebar {
    padding: 0;
}

    .list-sidebar li a:hover, .list-sidebar li a.active {
        color: #f48220;
    }

        .list-sidebar li a.active img {
            fill: #f48220;
        }

    .list-sidebar li a svg, .list-sidebar li a img {
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.625rem;
        width: 1.5625rem;
    }

    .list-sidebar li a:before {
        position: absolute;
        content: "";
        height: 100%;
        width: 0.25rem;
        background: #0000;
        left: 0;
        top: 0;
        border-radius: 0px 0.625rem 0.625rem 0;
    }

    .list-sidebar li a.active:before {
        background: #f48220;
    }

.comman-padding {
    padding: 2rem 0;
}

.comman-title h1 {
    color: #2f2e2d;
    font-size: 1.25rem;
    font-family: "Noto Sans";
    font-weight: 500;
    line-height: 1.75rem;
    margin-bottom: 0.25rem;
}

.comman-title p {
    font-size: 0.875rem;
    padding: 0;
    font-family: "Noto Sans";
    color: #817f7e;
    font-weight: 400;
    line-height: 1.25rem;
}

    .comman-title p a {
        color: #1581e2;
    }

.footer-main {
    max-width: 100%;
    text-align: initial;
    background: #fff;
    border-top: 1px solid #eae9e9;
    padding: 0.5rem 2rem 0.5625rem;
    position: relative;
    z-index: 9;
}

    .footer-main p, .footer-main a {
        margin: 0;
        padding: 0;
        color: #817f7e;
        font-size: 0.75rem;
        font-family: "Noto Sans";
        line-height: 1rem;
    }

        .footer-main p span {
            display: inline-block;
            vertical-align: top;
            padding-right: 1rem;
        }

    .footer-main ul {
        list-style-type: none;
        padding: 0;
        display: inline-block;
        width: initial;
        margin: 0;
    }

        .footer-main ul li {
            display: inline-block;
            padding-left: 1rem;
            line-height: 1rem;
        }

.no-scroll {
    overflow: hidden;
}

@media (max-width: 768px) {
    .list-sidebar li a {
        font-size: 0;
        padding: 0.625rem;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 3.125rem;
        z-index: 9;
        /*display: none;*/
    }
}

@media (max-width: 768px) {
    .list-sidebar li a svg {
        margin: 0 auto;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .main {
        padding-left: 3.125rem;
        padding-bottom: 3.75rem;
        /*margin-bottom: -3.75rem;*/
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 40rem;
    }
}

@media (max-width: 768px) {
    .navbar-light .navbar-nav .nav-link.active:before {
        display: none;
    }
}

.mobile-profile {
}

    .mobile-profile .dropdown {
        color: #464544;
    }

        .mobile-profile .dropdown a {
            color: #464544;
        }

@media (max-width: 1366px) {
    .main .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 768px) {
    #headerbtn {
        display: none;
    }
}

.comman-btn a:before {
    content: "";
}

.comman-btn a {
    position: relative;
    margin: 0 0.5rem;
    vertical-align: middle;
}

    .comman-btn a:last-child:before {
        display: none;
    }

.fill-btn {
    display: inline-block;
    width: auto;
    padding: 0.5rem 1rem;
    border: 1px solid #f48220;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    background: #f48220;
    font-weight: 600;
    transition: 0.5s;
}

.gray-btn {
    display: inline-block;
    width: auto;
    padding: 0.5rem 1rem;
    border: 1px solid #eae9e9;
    border-radius: 8px;
    color: #bfbdba;
    font-size: 0.875;
    background: #eae9e9;
    font-weight: 500;
    transition: 0.5s;
}

.outline-btn {
    display: inline-block;
    width: auto;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: 0.5s;
    vertical-align: middle;
    float: initial;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: #f48220;
    background-color: transparent;
    color: #f48220;
    border: 1px solid #f48220;
}

    .outline-btn svg:first-child {
        margin-right: 0.5rem;
    }

    .outline-btn svg path, .outline-btn svg {
        /*stroke: #f48220;*/
        /*margin-left: 0.3125rem;*/
        display: inline-block;
        vertical-align: middle;
    }

.comman-btn a:last-child {
    /*margin-right: 0;*/
}

.fill-btn svg, .fill-btn path {
    fill: #fff;
}

.outline-btn:hover {
    background-color: #fbf2e9;
    border-color: #e66d05;
    color: #e66d05;
}

    .outline-btn:hover svg path {
        /*stroke: #fff;*/
    }

.outline-btn:focus:not(:focus-visible), .outline-btn:active {
    background-color: #fefaf6;
    color: #f48220;
    border-color: #f48220;
    outline: 4px solid #f9e7d8;
}

.btn-primary {
    display: inline-block;
    width: auto;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: 0.5s;
    vertical-align: middle;
    float: initial;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    background-color: #f48220;
    color: #fff;
    border: 1px solid #f48220;
}

    .btn-primary svg path, .btn-primary svg {
        /*stroke: #f48220;*/
        /*margin-left: 0.3125rem;*/
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.5rem;
    }

    .btn-primary:hover {
        background-color: #e66d05;
        color: #fff;
        border-color: #e66d05;
        /*border: 0 none;*/
    }

    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:focus {
        background: #f48220;
        outline: 4px solid #f9e7d8;
        color: #fff;
    }

.fill-btn:hover {
    background: #fff;
    color: #f48220;
}

label span svg {
    stroke: #817f7e;
    width: 1rem;
    height: 1rem;
}

label span {
    margin-left: 0.3125rem;
}

select.form-control option {
    background: #fff;
    padding: 0.625rem;
}

@media (max-width: 400px) {
    .form-control {
        margin-bottom: 0.3125rem;
    }
}

.comman-btn a:first-child {
    margin-left: 0;
}

.modal-content {
    padding: 1.5rem;
    border: none;
    box-shadow: 0px 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 0px 8px 16px rgba(0, 0, 0, 0.07);
}

    .modal-content .modal-body {
        padding: 0;
    }

.comman-popup-title-bar {
}

.popup-btn-se {
    margin-top: 2rem;
}

    .popup-btn-se .btn {
        width: 9rem;
    }

.outline-btn.outline-btn-light-orangr {
    border-color: #facea8;
    color: #f48220;
    background: #fefaf6;
    line-height: normal;
    text-shadow: none;
    opacity: 1;
}

.outline-btn.outline-btn-white {
    border-color: #bfbdba;
    color: #bfbdba;
    line-height: normal;
    text-shadow: none;
    opacity: 1;
}

.popup-btn-se .comman-btn a {
    width: 100%;
    margin: 0;
}

.outline-btn.outline-btn-white:hover {
    color: #fff;
    border-color: #f48220;
    opacity: 1 !important;
}

.custom-width-popup-box .modal-dialog {
    max-width: 25rem;
}

.comman-popup-title-bar h4 {
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: #2f2e2d;
    font-weight: 600;
}

.comman-popup-title-bar p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: #817f7e;
    margin-bottom: 0.5rem;
}

.custom-width-popup-box .modal-header {
    position: absolute;
    right: 1rem;
    top: 1rem;
    border: none;
    padding: 0;
    z-index: 9;
}

    .custom-width-popup-box .modal-header button {
        padding: 0.4375;
        border-radius: 5px;
        color: #a6a3a0;
        background: #fafafa;
        margin: 0;
        width: 2.5rem;
        height: 2.5rem;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }

.comman-popup-title-bar img {
    margin-bottom: 1rem;
}

.error-messages {
    color: #ee3a3a;
    font-size: 0.75rem;
}

    .error-messages img {
        width: 0.8125rem;
    }

.error-border .form-control {
    border-color: #ee3a3a;
}

.modal-backdrop.show {
    opacity: 1;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background-color: #46454463;
    /*filter: blur(16px);*/
}

.search-popup-result-title h5 {
    font-size: 1rem;
    font-weight: 500;
}

    .search-popup-result-title h5 span svg {
        width: 0.9375rem;
    }

    .search-popup-result-title h5 span {
        margin-left: 0.3125rem;
    }

.pagination .page-link {
    border-color: #d8d6d5 !important;
    color: #464544;
    font-size: 0.875rem;
}

.pagination .active .page-link {
    background-color: #fefaf6;
    color: #f48220;
    border-color: #facea8;
}

.pagination .disablrd .page-link {
    color: #bfbdba;
}

.pagination .page-link:focus {
    box-shadow: none;
}

.custom-width-popup-box .modal-header.back-btn {
    position: inherit;
    top: initial;
    left: initial;
    right: initial;
    margin-bottom: 0.9375rem;
}

.outline-btn.outline-btn-white.close {
    margin: 0;
    padding: 0.5rem 1rem;
    background: #fafafa;
    border: none;
}

.gray-btn:hover {
    background: #f48220;
    border-color: #f48220;
    color: #fff;
}

.list-sidebar li a span strong {
    color: #2f2e2d;
}

.more-btn {
    fill: #817f7e;
    stroke: #817f7e;
    display: inline-block;
    /*background: #eae9e9;*/
    border-radius: 50%;
}

    .more-btn:hover {
        background: #eae9e9;
    }

.welcome-se .comman-btn .dropdown {
    display: inline-block;
}

    .welcome-se .comman-btn .dropdown > .more-btn {
        padding: 0;
        margin: 0;
        border: none;
    }

        .welcome-se .comman-btn .dropdown > .more-btn:before {
            display: none;
        }

.fill-btn.red-fill-btn {
    background: #ee3a3a;
    border-color: #ee3a3a;
}

.outline-btn.red-outline-btn {
    color: #ee3a3a;
    border-color: #ee3a3a;
}

.fill-btn.red-fill-btn:hover {
    background: #ffffff;
    color: #ee3a3a;
}

.outline-btn.red-outline-btn:hover {
    background: #ee3a3a;
    color: #fff;
}

.nav-link.outline-btn {
    color: #f48220 !important;
}

.action-btn a {
    margin-left: 0.625rem;
}

input[type="checkbox"], input[type="radio"] {
    border: 2px solid #817f7e;
    padding: 0;
}

.styled-checkbox {
    position: absolute;
    opacity: 0;
    display: none;
}

    .styled-checkbox + label {
        position: relative;
        cursor: pointer;
        padding: 0;
    }

        .styled-checkbox + label:before {
            content: "";
            margin-right: 0.625rem;
            display: inline-block;
            vertical-align: text-top;
            width: 1.25rem;
            height: 1.25rem;
            background: white;
            border: 2px solid #817f7e;
            border-radius: 5px;
        }

    .styled-checkbox:hover + label:before {
        background: #f48220;
        border-color: #f48220;
    }

    .styled-checkbox:focus + label:before {
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
    }

    .styled-checkbox:checked + label:before {
        background: #f48220;
        border-color: #f48220;
    }

    .styled-checkbox:disabled + label {
        color: #b8b8b8;
        cursor: auto;
    }

        .styled-checkbox:disabled + label:before {
            box-shadow: none;
            background: #ddd;
        }

    .styled-checkbox:checked + label:after, .styled-checkbox:hover + label:after {
        content: "";
        position: absolute;
        left: 0.3125rem;
        top: 0.625rem;
        background: white;
        width: 0.125rem;
        height: 0.125rem;
        box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
        transform: rotate(45deg);
        border-color: #f48220;
    }

.outline-btn.join-btn svg path {
    stroke: #f48220;
}

span.error {
    display: block !important;
    padding: 0.5rem 0 0 1.5625rem;
    color: #fa1010;
    font-size: 0.75rem;
    position: relative;
}

    span.error:before {
        position: absolute;
        content: " ";
        background-image: url("Icon error.svg");
        background-repeat: no-repeat;
        background-size: cover;
        width: 0.9375rem;
        height: 0.9375rem;
        top: 0.5625rem;
        left: 0.3125rem;
    }

@media (max-width: 992px) {
    .comman-btn a {
        margin: 0.3125rem 0.3125rem 0 0;
        font-size: 0.75rem;
        padding: 0.3125rem 0.625rem;
    }
}

@media (max-width: 992px) {
    .comman-btn a:before {
        display: none;
    }
}

@media (max-width: 768px) {
    #invitemember-btn-id {
        margin-left: 1.25rem;
    }
}

@media (max-width: 768px) {
    #generalinfo-savechanges-btn-id {
        margin-left: 1.25rem;
    }
}

@media (max-width: 768px) {
    .cCreatebtn {
        margin-left: 1.25rem !important;
    }
}

.filter-btn-group {
    margin-bottom: 0.9375rem;
}

@media (max-width: 992px) {
    .filter-btn-group .outline-btn {
        font-size: 0.75rem;
        padding: 0.375rem;
    }
}

@media (max-width: 768px) {
    .pagination .page-link {
        padding: 0.3125rem 0.375rem;
        font-size: 0.75rem;
    }
}

/* responsive-custom-table */

@media only screen and (max-width: 767px) {
    .responsive-custom-table table, .responsive-custom-table thead, .responsive-custom-table tbody, .responsive-custom-table tr, .responsive-custom-table th, .responsive-custom-table td {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .responsive-custom-table thead tr {
        position: absolute;
        top: -624.9375rem;
        left: -624.9375rem;
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .responsive-custom-table td {
        position: relative;
        text-align: left;
        padding: 0.3125rem 0.625rem 0.3125rem calc(40% + 0.625rem) !important;
    }
}

@media only screen and (max-width: 567px) {
    .responsive-custom-table td {
        padding: 0.625rem !important;
    }
}

@media only screen and (max-width: 767px) {
    .responsive-custom-table td:before {
        content: attr(data-title);
        position: absolute;
        top: 0.0625rem;
        left: 0.0625rem;
        width: calc(50% – 1.25rem);
        padding: 0.3125rem 0.625rem;
        font-size: 0.75rem;
        /*display: block;*/
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}

@media only screen and (max-width: 567px) {
    .responsive-custom-table td:before {
        content: attr(data-title);
        position: relative;
        top: inherit;
        left: inherit;
        width: inherit;
        font-size: 0.75rem;
        padding: 0;
        display: block;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}

.navbar-toggler {
    border: none;
    padding: 0;
}

@media (max-width: 768px) {
    .mobile-profile .dropdown a {
        justify-content: end;
    }
}

@media (max-width: 768px) {
    .comman-title h1 {
        font-size: 1.125rem;
    }
}

@media (max-width: 768px) {
    .comman-title p {
        font-size: 0.75rem;
        font-weight: 500;
        margin-bottom: 0.625rem;
    }
}

@media (max-width: 768px) {
    #headerbtn {
        display: none;
    }
}

.footer-main {
    /*bottom: 0.3125rem;*/
}

@media (min-width: 992px) {
    .d-lg-flex {
        display: -ms-flexbox !important;
        display: flex !important;
    }
}

@media (min-width: 992px) {
    .d-lg-flex {
        display: -ms-flexbox !important;
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .page {
        margin-top: 1em;
    }
}

@media (min-width: 768px) {
    .pagination-1 hr {
        /*display: none!important;*/
    }
}

@media (min-width: 768px) {
    .pagination-1 hr {
        /*margin-top: 1em;*/
    }
}

@media (min-width: 768px) {
    .pagination hr {
        /*display: none;*/
    }
}

@media (min-width: 768px) {
    .cm2-m768hr {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .cm2-m768hr {
        /*display: none;*/
    }
}

@media (min-width: 768px) {
    .cm2-m768.page {
        -ms-flex-pack: center !important;
        /*justify-content: center!important;*/
    }
}

.comman-icon {
    width: 1.5625rem;
    height: 1.5rem;
    /*background: url("../image/icon_home.svg");*/
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0.625rem;
}

/*  */

.star-icon {
    background: url("../image/icon-star-gray.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.list-sidebar li a.active .star-icon, .list-sidebar li a:hover .star-icon {
    background: url("../image/icon-star-orange.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*  */

.personal-info-icon {
    background: url("../image/icon-book-gray.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.list-sidebar li a.active .personal-info-icon, .list-sidebar li a:hover .personal-info-icon {
    background: url("../image/icon-book-orange.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*  */

.login-credentials-icon {
    background: url("../image/carbon-beta-gray.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.tool-icon {
    background: url("../image/icon-tool-grey.svg");
    /*color: rgba(211,211,211,0.6);*/
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.list-sidebar li a.active .login-credentials-icon, .list-sidebar li a:hover .login-credentials-icon {
    background: url("../image/carbon-beta-orage.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.list-sidebar li a.active .tool-icon, .list-sidebar li a:hover .tool-icon {
    background: url("../image/icon-tool-orange.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*  */

.user-roles-icon {
    background: url("../image/icon_layout_gray.svg");
    background-position: center;
    background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
}

.list-sidebar li a.active .user-roles-icon, .list-sidebar li a:hover .user-roles-icon {
    background: url("../image/icon_layout_orange.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*  */

.communities-icon {
    background: url("../image/icon_users_gray.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.list-sidebar li a.active .communities-icon, .list-sidebar li a:hover .communities-icon {
    background: url("../image/icon_users_orange.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*  */

.back-icon {
    background: url("../image/icon_arrow-left_gray.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.list-sidebar li a.active .back-icon, .list-sidebar li a:hover .back-icon {
    background: url("../image/icon_arrow-left_orange.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*  */

.general-info-icon {
    background: url("icon_settings_gray.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.list-sidebar li a.active .general-info-icon, .list-sidebar li a:hover .general-info-icon {
    background: url("icon_settings_orange.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/*  */

.join-btn-icon {
    width: 1.5625rem;
    height: 1.5rem;
    display: inline-block;
    background: url("../image/icon_download_orange.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0.125rem;
}

.join-btn:hover .join-btn-icon {
    background: url("../image/icon_download_white.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*  */

.create-btn-icon {
    width: 1.5625rem;
    height: 1.5rem;
    display: inline-block;
    background: url("icon_plus_white.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0.125rem;
}

.create-btn:hover .create-btn-icon {
    background: url("icon_plus_orange.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*  */

.download-report-btn-icon {
    width: 1.5625rem;
    height: 1.5rem;
    display: inline-block;
    background: url("../image/icon_download_orange.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0.1875rem;
}

.download-report-btn:hover .download-report-btn-icon {
    background: url("../image/icon_download_white.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*  */

.download-report-outline-btn-icon {
    width: 1.5625rem;
    height: 1.5rem;
    display: inline-block;
    background: url("../image/icon_download_white.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 0.125rem;
}

.download-report-outline-btn:hover .download-report-outline-btn-icon {
    background: url("../image/icon_download_orange.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*  */

/*  */

.user-plus-btn-icon {
    width: 1.5625rem;
    height: 1.5rem;
    display: inline-block;
    background: url("../image/icon_user-plus_white.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 0.125rem;
}

.user-plus-btn:hover .user-plus-btn-icon {
    background: url("../image/icon_user-plus_orange.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*  */

.right-btn-icon {
    width: 1.5625rem;
    height: 1.25rem;
    display: inline-block;
    background: url("../image/icon_arrow-left_gray.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 0.125rem;
    font-size: 0;
    transform: rotate(180deg);
}

.right-btn:hover .right-btn-icon {
    background: url("../image/icon_arrow-left_gray.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*  */

.custom-accordion-box .card-header a[aria-expanded="true"]:before {
    content: "";
    width: 1.875rem;
    height: 1.875rem;
    position: absolute;
    right: 0;
    top: 0;
    background: url("../image/icon_chevron-down_gray.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    top: 0.625rem;
    transform: rotate(180deg);
    border: 1px solid rgba(129, 127, 126, 0.11);
    border-radius: 8px;
}

.custom-accordion-box .card-header {
    background: #0000;
}

.custom-accordion-box .card {
    border: none;
    background: #0000;
    padding-left: 9.375rem;
    position: relative;
}

.custom-accordion-box .card-header h5 {
    font-size: 1rem;
}

    .custom-accordion-box .card-header h5 span {
        color: #817f7e;
        position: absolute;
        left: -9.375rem;
        top: 1.0625rem;
        line-height: 1.25rem;
    }

.custom-accordion-box .card-header a {
    font-size: 0.875rem;
    color: #2f2e2d;
    font-weight: 500;
    position: relative;
    padding: 0.9375rem 0;
    padding-right: 1.875rem;
    width: 100%;
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    display: inline-block;
    vertical-align: middle;
    line-height: 1.25rem;
}

.custom-accordion-box .card-header {
    padding: 0;
    margin-bottom: 0;
    position: relative;
    border: none;
}

.custom-accordion-box .card-body {
    padding: 0;
    /*margin-bottom: 0.625rem;*/
}

.custom-accordion-box .card-header h5 {
    margin: 0;
    font-size: 0.875rem;
}

.card-header a[aria-expanded="false"]:before {
    content: "";
    position: absolute;
    right: 0.25rem;
    width: 1.5625rem;
    height: 1.5625rem;
    background: url("../image/icon_chevron-down_gray.svg");
    background-position: center;
    background-repeat: no-repeat;
    top: 0.75rem;
    background-size: contain;
}

.custom-accordion-box .card:before {
    position: absolute;
    content: "";
    background: #fff;
    width: 0.9375rem;
    height: 0.9375rem;
    border-radius: 50%;
    border: 3px solid #a6a3a0;
    box-shadow: 0px 0px 0px 4px #eae9e9;
    left: 7.45rem;
    top: 1.125rem;
    z-index: 9;
}

.custom-accordion-box .card:after {
    position: absolute;
    content: "";
    left: 7.8125rem;
    width: 0.125rem;
    background: #a6a3a0;
    height: 100%;
    bottom: 0;
}

.custom-accordion-box .card-body p {
    font-size: 0.875rem;
}

.custom-accordion-box .card-body ul li {
    font-size: 0.875rem;
    color: #464544;
}

.custom-accordion-box .card-first:after {
    height: 100%;
    top: 1rem;
}

.custom-accordion-box .card-middle:after {
    height: 100%;
    top: 2rem;
}

.custom-accordion-box .card-last:after {
    height: 100%;
    top: -1.5rem;
}

.accordion-button:focus,
.accordion-button:active,
.accordion-button:not(.collapsed) {
    box-shadow: none;
    outline: none;
    background-color: transparent; /* Optional: prevents blue/gray bg */
    color: inherit; /* Optional: prevent text color change */
}


@media (max-width: 576px) {
    .custom-accordion-box .card-header h5 span {
        position: initial;
        top: initial;
        left: initial;
    }
}

@media (max-width: 576px) {
    .custom-accordion-box .card-header a {
        padding-top: 0;
    }
}

@media (max-width: 576px) {
    .custom-accordion-box .card {
        padding-left: 1.25rem;
    }
}

@media (max-width: 576px) {
    .custom-accordion-box .card:after {
        left: 0.0781rem;
    }
}

@media (max-width: 576px) {
    .custom-accordion-box .card:before {
        left: -0.125rem;
        width: 0.5625rem;
        height: 0.5625rem;
        border-width: 2px;
    }
}

.card-header a[aria-expanded="false"] {
    border-bottom: 1px solid #d7d7d7;
    border-bottom: 0 none;
}

.custom-accordion-box .card .collapsing {
    border-bottom: 1px solid #d7d7d7;
    border-bottom: 0 none;
}

.custom-accordion-box .card div[role="tabpanel"] {
    display: block;
    padding-bottom: 0;
    margin-bottom: 0.625rem;
    border-bottom: 1px solid #d7d7d7;
}

.custom-accordion-box .card .collapse:not(.show) .card-body {
    display: none;
}

.custom-accordion-box .card div[role="tabpanel"] .card-body {
    padding-bottom: 0.625rem;
    margin-bottom: 0.625rem;
}

@media (max-width: 767px) {
    .mobile-profile span {
        display: none;
    }
}

@media (max-width: 768px) {
    .card-header a {
        padding-top: 0.625rem !important;
    }
}

@media (max-width: 768px) {
    .custom-accordion-box .card:first-child:after {
        height: 80%;
    }
}

@media (max-width: 768px) {
    .custom-accordion-box .card:last-child:after {
        /*height: 90%;*/
    }
}

.comman-btn a span {
    /*display: inline-block;*/
    vertical-align: inherit;
}

.loader {
    border: 7px solid #f3f3f3;
    border-top: 7px solid #f48220;
    border-bottom: 7px solid #f48220;
    border-radius: 50%;
    width: 105px;
    height: 105px;
    z-index: 100000;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -52.5px;
    margin-left: -52.5px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.content-box p {
    font-size: 0.875rem;
    font-family: "Noto Sans";
    line-height: 1.25rem;
    color: #5d5c5b;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.content-box p {
    margin-bottom: 1.5rem;
}

.custom-titlebox h5, .custom-titlebox h5 a {
    margin-top: 1.875rem;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.9375rem;
    color: #2f2e2d;
    line-height: 1.25rem;
}

.content-box ul li {
    font-size: 0.875rem;
    margin-bottom: 0.3125rem;
    font-family: "Noto Sans";
    color: #5d5c5b;
    line-height: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.content-box a {
    font-size: 0.875rem;
}

.back-icon-btn .back-icon {
    font-size: 0;
    width: 1.5625rem;
    height: 1.5625rem;
    display: inline-block;
    vertical-align: middle;
}

.back-icon-btn {
    width: 1.5rem;
    height: 1.5rem;
    color: #817f7e;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

    .back-icon-btn:hover {
        color: #464544;
    }

    .back-icon-btn:focus {
        color: #817f7e;
        border-bottom: 1px solid #817f7e;
    }

.back-page-se {
    margin-bottom: 0.9375rem;
}

.content-box p.discription-p {
    font-weight: normal;
    text-indent: 1.25rem;
}

.actions-box {
    border: 1px solid #eae9e9;
    padding: 1.25rem;
    border-radius: 0.625rem;
    margin-bottom: 1.25rem;
    position: relative;
    padding-left: 5rem;
    min-height: 5.625rem;
}

    .actions-box .actions-icon {
        position: absolute;
        left: 1.25rem;
        width: 3.125rem;
        height: 3.125rem;
    }

.right-btn {
    padding: 0;
    color: #0056b3;
}

.actions-box h5 {
    color: #000;
    font-size: 0.875rem;
    font-weight: 800;
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
}

.actions-box p {
    font-size: 0.875rem;
    font-weight: 500;
    color: #817f7e;
}

.musicinfo.active {
    display: block;
}

.more-info-box {
    display: none;
}

.custom-titlebox h5 a.toggle1 {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
}

    .custom-titlebox h5 a.toggle1:before {
        position: absolute;
        content: "";
        width: 1.875rem;
        height: 1.875rem;
        position: absolute;
        right: 0;
        top: 0;
        background: url(../image//icon_chevron-down_gray.svg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        top: -0.3125rem;
        transform: rotate(0deg);
        border: 1px solid rgba(129, 127, 126, 0.11);
        border-radius: 8px;
    }

.toggle1:focus:before {
    background: url(../image//icon_chevron-down_gray.svg);
    transform: rotate(180deg) !important;
}

@media (max-width: 768px) {
    .mobile-profile img {
        width: 1.875rem;
        /*height: 1.875rem;*/
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    .mobile-profile {
        padding: 0 !important;
        position: fixed;
        top: 0.875rem;
        right: 2.5rem;
        justify-content: end;
    }
}

@media (max-width: 768px) {
    .mobile-profile a {
        padding: 0 0.75rem !important;
    }
}

@media (max-width: 768px) {
    .navbar-nav {
        padding: 0.625rem 0;
    }
}

@media (max-width: 767px) {
    .footer-main {
        padding: 0.75rem 0.85rem 0.0625rem;
        bottom: 0;
    }
}

@media (max-width: 767px) {
    .footer-main p span + span {
        margin-top: 0.25rem;
    }
}

.right-dropdown {
    padding: 0 !important;
}

.dropdown-menu span {
    margin-right: 0.4375rem;
    height: 1.25rem;
    display: inline-block;
    vertical-align: middle;
}

.profile__photo-header {
    border-radius: 50%;
    margin-right: 1rem;
}

.navbar-light .navbar-nav .nav-link.dropdown-toggle:focus i, .navbar-light .navbar-nav .nav-link.dropdown-toggle:active i {
    color: #f48220;
    background: #fefaf6;
    border-color: #fbf2e9;
}

.navbar-light .navbar-nav .nav-link.dropdown-toggle:hover i {
    color: #f48220;
    background: #fbf2e9;
}

.navbar-light .navbar-nav .nav-link.dropdown-toggle i {
    padding: 0.25rem 0.3125rem;
    color: #817f7e;
    border-radius: 4px;
    border: 2px solid transparent;
}

.link-accent {
    color: #1581e2;
}

    .link-accent:hover {
        color: #065398;
    }

    .link-accent:focus, .link-accent:active {
        border-bottom: 1px solid #1581e2;
        color: #1581e2;
    }

.right-dropdoen {
    padding: 0 !important;
}

    .right-dropdoen img {
        margin-right: 0.625rem;
    }

.dropdown-toggle::after {
    border-width: 7px;
}

.mb-32px {
    margin-bottom: 2rem;
}

.custom-accordion-box .card-body ul {
    padding-left: 1.25rem;
}

#navbar-band-id img {
    margin-right: 0.625rem;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #f48220;
}

.navbar-light .navbar-nav .nav-link.dropdown-toggle:after {
    display: none;
}

.navbar-light .navbar-brand#navbar-band-id-1 {
    margin: 0;
    margin-right: 2rem;
}

btn.focus .btn:focus {
    outline: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .navbar-light .navbar-brand#navbar-band-id-1 {
        margin-right: auto;
    }
}


@media (min-width: 1161px) {
    .comman-padding .container {
        max-width: 52.5rem;
    }

    .version-item {
        max-width: 56.5rem;
    }
}