@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap);
:root {
    --header-height: 3rem;
    --nav-width: 72px;
    --first-color: #4723D9;
    --first-color-light: #AFA5D9;
    --white-color: #F7F6FB;
    --body-font: "Nunito", sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
}

*,
::before,
::after {
    box-sizing: border-box;
}

.sent-request-panel {
    border-radius: 40px;
    padding: 25px;
}

body {
    position: relative;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: 0.5s;
}

.supplier-rating-panel {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
}

.selection-panel {
    border-radius: 10px;
    border: 2px solid #DFDFDF;
    padding: 10px;
    background-color: #ffffff;
    font-weight: 500;
}

.warning-information-panel {
    padding: 10px;
    background-color: #FFDA6A;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 10px;
}

.uploaded-files-for-review-panel {
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
    font-weight: 500;
}

.events-primary-panel {
    padding: 25px;
    color: #000000;
    background-color: #ffffff;
    border-radius: 20px;
}

.event-companies {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
}

.event-stats-primary {
    background-color: #ffffff;
    color: #ffffff;
    padding: 30px;
    border-radius: 10px;
}

.event-stats-primary .header-stat {
    font-size: 15px;
    font-weight: bold;
}

.event-stats-primary .small-stats {
    font-size: 30px;
    color: #000000;
}

.events-danger-panel {
    padding: 25px;
    color: #ffffff;
    background-color: #dc3545;
    border-radius: 10px;
}

.art {
    background-color: #3300ff;
    padding: 5px;
    border-radius: 10px;
    color: #ffffff;
    margin-top: 30px;
}

.art-green {
    background-color: #ff002d;
    padding: 5px;
    border-radius: 10px;
    color: #ffffff;
    margin-top: 30px;
}

art p {
    font-size: 1.6rem;
}

.art-green p {
    font-size: 1.6rem;
}

.dashboard-stats-cards {
    padding: 10px;
    background-color: rgba(92, 39, 245, 0.8);
    border-radius: 10px;
    color: #ffffff;
}

.dashboard-stats-cards h5 p {
    font-weight: 900;
}

.dashboard-messages {
    padding: 10px;
    border-radius: 10px;
    font-weight: 900;
    /*background-color: rgba(92, 39, 245, 0.8) ;*/
}

.dashboard-messages p {
    /*padding : 10px;*/
    /*border-radius: 10px;*/
    font-weight: 300;
    /*background-color: rgba(92, 39, 245, 0.8) ;*/
}

.dashboard-messages-items {
    border: solid 1px rgba(92, 39, 245, 0.8);
    padding: 20px;
    /*background-color: rgba(92, 39, 245, 0.9);*/
    border-radius: 10px;
    color: #ffffff;
}

.dashboard-messages-items a {
    /*border: solid 1px rgba(92, 39, 245, 0.8);*/
    /*padding : 20px;*/
    /*background-color: rgba(92, 39, 245, 0.2);*/
    /*border-radius: 10px ;*/
    font-weight: 100;
    color: #5a5a5a;
}

.business-opportunities-panel {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-top: 10px;
}

.business-opportunities-panel .available-opportunities {
    background-color: rgba(45, 0, 255, 0.87);
    padding: 10px;
    border-radius: 10px;
    width: auto;
    color: #ffffff;
}

.business-opportunities-panel .header-panel {
    font-size: 26px;
    color: #ffffff;
}

.business-opportunities-panel .previous-opportunities {
    background-color: #edefef;
    padding: 10px;
    border-radius: 10px;
    width: auto;
}

.business-opportunities-panel .header-panel {
    font-size: 26px;
    color: #2b2b2c;
}

.submission-history-panel {
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
    background-color: #ffffff;
    margin-bottom: 25px;
}

.submission-history-panel .small-header {
    font-size: 16px;
    font-weight: 600;
}

.submission-history-panel .big-header {
    font-size: 24px;
    font-weight: 600;
}

.search-panel {
    padding: 25px;
    border-radius: 20px;
    margin-top: 10px;
    background-color: #ffffff;
    margin-bottom: 25px;
}

.document-panel {
    padding: 25px;
    border-radius: 10px;
    margin-top: 10px;
    background-color: #ffffff;
    margin-bottom: 25px;
}

.search-panel-market_place {
    padding: 25px;
    border-radius: 10px;
    background-color: #ffffff;
    margin-bottom: 25px;
}

.listing-panel {
    padding: 25px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #ffffff;
}

.list-background {
    padding: 6px;
    color: #3700ff;
    border: solid 2px #3700ff;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
}

.list-background-dark {
    padding: 6px;
    color: #424242;
    border: solid 2px #dfdfdf;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
}

.search-panel h5 {
    font-weight: 300;
}

.bid-list {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-top: 10px;
    /*margin-top : 10px;*/
}

.bg-orange-fill {
    background-color: #FFF1BF;
    color: #E9A845;
}

.bg-blue-fill {
    background-color: #AFE1FF;
    color: #37A1D1;
}

.bg-green-fill {
    background-color: #C6FFE0;
    color: #3DC87C;
}

.bid-list-rfq {
    padding: 25px;
    background-color: #ffffff;
    /* color: #000; */
    border-radius: 20px;
    margin-top: 10px;
    /* border: solid 2px rgba(45, 0, 255, 0.87); */
    /*margin-top : 10px;*/
}

.icon-styling {
    background-color: #ffe7f4;
    color: #e03a82;
}

.bid-list-tender {
    padding: 25px;
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    margin-top: 10px;
    border: solid 2px rgba(45, 0, 255, 0.87);
    /*margin-top : 10px;*/
}

.bid-list-proposal {
    padding: 25px;
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    margin-top: 10px;
    border: solid 2px rgba(45, 0, 255, 0.87);
    /*margin-top : 10px;*/
}

.mb-25 {
    margin-bottom: 100px;
}

.bid-list-proposal a {
    color: #000;
    font-weight: 600;
}

.bid-list-tender a {
    color: #000;
    font-weight: 600;
}

.bid-list-rfq a {
    /* color: #000; */
    font-weight: 600;
}

.upload_panel {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-top: 10px;
}

.tender-information-panel {
    padding: 25px;
    background-color: rgba(255, 210, 0, 0.25);
    border-radius: 10px;
    margin-top: 10px;
}

.tender-information-panel-expired {
    padding: 25px;
    background-color: rgba(255, 0, 0, 0.76);
    border-radius: 10px;
    margin-top: 10px;
    color: #ffffff;
}

.bid-list a {
    font-weight: bold;
}

.bid-list p {
    font-size: 16px;
}

.legend-opportunities {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-top: 10px;
}

.proposal-panel {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-top: 25px;
}

.task-panel {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-top: 10px;
}

.bid-list .bx {
    font-size: 1.25rem;
    color: #4723D9;
}

.bid-list .btn-light-blue {
    background-color: #e8f0fe;
    color: #1a73e8;
    border: solid 1px #1a73e8;
}

.bid-categories {
    border-radius: 10px;
}

.bid-list-header {
    /*padding : 10px ;*/
    background-color: #ffffff;
}

.bid-info-header {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    font-weight: 900;
    margin-top: 25px;
}

.bid-info-header h5 {
    font-weight: 600;
}

.bid-info-header p {
    font-weight: 200;
}

.bid-info-detail {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    font-weight: 900;
    margin-top: 25px;
    /*margin-bottom : 100px;*/
}

.supplier-detail-head {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    margin-top: 25px;
}

.supplier-detail-profile {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    margin-top: 25px;
}

.supplier-detail-head img {
    height: 100px;
    width: 100px;
}

.supplier-detail-profile i {
    font-size: 20px;
    background-color: #ffca2c;
    color: #000;
    padding: 10px;
}

.bid-info-detail span {
    font-size: 15px;
    font-weight: 400;
}

.previous-bid-info {
    background-color: #ffffff;
    padding: 25px;
    margin-top: 20px;
    margin-bottom: 100px;
    border-radius: 10px;
    border: 1px solid rgba(76, 0, 255, 0.24);
}

.previous-bid-info .header-title {
    font-size: 30px;
    font-weight: 900;
    color: #787878;
}

.previous-bid-info .header-sub-title {
    font-size: 15px;
    font-weight: 300;
    color: #787878;
}

.previous-bid-info a {
    font-size: 14px;
    font-weight: 600;
    margin-top: 30px;
    color: #5500ff;
}

.bid-application-form {
    padding: 25px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #ffffff;
}

.bid-item-list {
    padding: 25px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #ffffff;
}

.bid-item-list a {
    font-weight: 600;
}

.bid-items-total {
    padding: 25px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #FFD700;
}

.bid-items-total .number-header {
    font-size: 16px;
    font-weight: 600;
}

.profile-info {
    padding: 25px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #ffffff;
}

.profile-info .paragraph {
    font-weight: 600;
    margin-top: 20px;
    font-size: 20px;
}

.profile-info .not-complete {
    font-weight: 600;
}

.profile-info h5 {
    font-weight: 600;
}

.profile-info small {
    font-weight: 600;
}

.profile-info .big-icons {
    font-size: 30px;
    /*color : rgb(0 0 0 / 52%);*/
}

.profile-info form {
    border-radius: 20px;
    padding: 25px;
}

profile-info label {
    font-weight: 600;
}

.applied-bids-filter {
    padding: 25px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #ffffff;
}

.my-bid-stats {
    margin-top: 20px;
    border-radius: 10px;
    width: 30%;
}

.my-bid-stats .active-bids {
    padding: 25px;
    border-radius: 10px;
    background-color: rgba(0, 48, 255, 0.63);
    color: #ffffff;
    border: solid 1px rgba(0, 39, 255, 0.93);
}

.my-bid-stats .active-bids .header-title {
    font-size: 30px;
    font-weight: 900;
}

.my-bid-stats .draft-bids {
    padding: 25px;
    border-radius: 10px;
    background-color: rgba(255, 247, 0, 0.57);
    color: #000000;
    border: solid 1px #000000;
}

.my-bid-stats .draft-bids .header-title {
    font-size: 30px;
    font-weight: 900;
}

.my-bid-stats .expired-bids {
    padding: 25px;
    border-radius: 10px;
    background-color: rgba(255, 1, 1, 0.57);
    color: #ffffff;
    border: solid 1px #000000;
}

.my-bid-stats .expired-bids .header-title {
    font-size: 30px;
    font-weight: 900;
}

.my-bid-stats .submitted-bids {
    padding: 25px;
    border-radius: 10px;
    background-color: rgba(0, 255, 0, 0.57);
    color: #ffffff;
    border: solid 1px #000000;
}

.my-bid-stats .submitted-bids .header-title {
    font-size: 30px;
    font-weight: 900;
}

.my-bid-comparison {
    padding: 25px;
    border-radius: 10px;
    background-color: #ffffff;
    width: 100%;
    /*color : #ffffff;*/
}

.my-bid-comparison .header-title {
    font-size: 18px;
    font-weight: 600;
}

.my-bid-comparison .icon-decoration {
    /*background-color: rgb(45 0 255 / 19%);*/
    /*border-radius : 20%;*/
    /*padding : 5px;*/
    font-size: 35px;
}

.my-bid-comparison .sub-title {
    font-size: 23px;
    font-weight: 900;
    color: rgba(59, 59, 59, 0.62);
}

.login-panel {
    padding: 25px;
    border-radius: 10px;
    background-color: #ffffff;
}

.login-panel .login-header {
    font-size: 35px;
    font-weight: 900;
}

.setting-small-panel {
    margin-top: 20px;
    background-color: #ffffff;
}

.setting-panel {
    padding: 25px;
    border-radius: 10px;
    background-color: #ffffff;
}

.bid-type-selection {
    padding: 25px;
    border-radius: 10px;
    background-color: #ffffff;
}

.bid-type-selection .header-text {
    font-weight: 600;
    font-size: 16px;
}

.bid-type-selection .icon-decoration .la {
    font-size: 28px;
}

.bid-type-selection .sub-title {
    font-size: 26px;
    font-weight: 600;
    color: #020202;
}

.bid-list-header h4 {
    font-weight: 600;
}

.bid-list table {
    background-color: #ffffff;
}

.bid-list-form-table {
    padding: 20px;
    border: solid 1px #b5adad;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.19);
}

.bid-list-form-table .badge-danger {
    background-color: #fd0a21e3;
    padding: 2px;
}

.create-bid-panel {
    padding: 25px;
    border-radius: 10px;
    background-color: #ffffff;
}

.bid-created-by-panel {
    padding: 25px;
    border-radius: 10px;
    background-color: #ffffff;
    margin-top: 25px;
}

.bid-created-by-panel .icon-decoration {
    font-size: 24px;
}

.bid-created-by-panel li span {
    font-size: 10px;
}

.bid-created-by-panel .btn-purple {
    background-color: rgba(151, 0, 255, 0.15);
    color: #9700ff;
    border: solid 1px #9700ff;
    font-weight: bold;
}

.setting-small-panel .list-group .list-item {
    padding: 15px 10px 10px 10px;
    color: #000000;
}

.active-list-item {
    padding: 10px 10px 10px 10px;
    border-color: #2d00ff;
    background-color: rgba(45, 0, 255, 0.87);
    color: #ffffff;
    font-weight: bold;
}

.profile-info .btn-light-blue {
    background-color: #e8f0fe;
    color: #1a73e8;
    border: solid 1px #1a73e8;
}

.form-modal-styling {
    padding: 20px;
    border: solid 1px rgba(221, 221, 221, 0.8);
    border-radius: 10px;
}

.form-modal-styling .btn-light-blue {
    background-color: #e8f0fe;
    color: #1a73e8;
    border: solid 1px #1a73e8;
}

.form-modal-styling .btn-light-red {
    background-color: rgba(255, 0, 0, 0.15);
    color: red;
    border: solid 1px red;
}

.bid-statistic-panel {
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 10px;
}

.bid-statistic-panel .title-header {
    font-weight: 600;
    font-size: 16px;
    margin-left: 10px;
}

.outline-header-line {
    border-radius: 10px;
    border: solid 2px #ffca2c;
    font-weight: 700;
    font-size: 14px;
    padding: 10px;
    color: #ffca2c;
}

.bid_review-panel {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
}

.notes-panel {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
}

.bid_review-panel .header-title {
    font-weight: 600;
    font-size: 20px;
}

.bid_review-panel .categories-background-blue {
    padding: 5px;
    border-radius: 10px;
    border: 2px solid #1a73e8;
    background-color: #e8f0fe;
    color: #1a73e8;
    font-weight: bold;
}

.bid_review-panel .stats-panel {
    padding: 10px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.inbox-selection {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
}

.inbox-selection-menu-option {
    padding: 10px;
    background-color: #ffffff;
    border-radius: 10px;
}

.inbox-selection-menu-option .active {
    background-color: rgba(98, 60, 255, 0.94);
    border-radius: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.inbox-selection i {
    font-size: 20px;
}

.inbox-selection .active {
    background-color: rgba(45, 0, 255, 0.87);
    color: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

.inbox-selection .non-active {
    background-color: #ffffff;
    color: #000000;
    padding: 10px;
    border-radius: 10px;
}

.mt-100 {
    margin-top: 50px;
}

.mb-100 {
    margin-bottom: 50px;
}

.card {
    border-radius: 1px !important;
}

.card-header {
    background-color: #fff;
}

.card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.btn-sm,
.btn-group-sm>.btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.765625rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.view-bid-submission {
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
}

.view-bid-submission .container-box {
    background-color: #edefef;
    padding: 5px;
    border-radius: 10px;
    width: auto;
    height: auto;
}

.view-bid-submission .container-box .header-title {
    font-size: 26px;
    color: #2b2b2c;
    font-weight: 700;
}

/* Dropdown */
.dropdown {
    display: inline-block;
    position: relative;
}

.dd-button {
    display: inline-block;
    border: 1px solid gray;
    border-radius: 4px;
    padding: 10px 30px 10px 20px;
    background-color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
}

.dd-button:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
}

.dd-button:hover {
    background-color: #eeeeee;
}

.dd-input {
    display: none;
}

.dd-menu {
    position: absolute;
    top: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    margin: 2px 0 0 0;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    list-style-type: none;
}

.dd-input+.dd-menu {
    display: none;
}

.dd-input:checked+.dd-menu {
    display: block;
}

.dd-menu li {
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
}

.dd-menu li:hover {
    background-color: #f6f6f6;
}

.dd-menu li a {
    display: block;
    margin: -10px -20px;
    padding: 10px 20px;
}

.dd-menu li.divider {
    padding: 0;
    border-bottom: 1px solid #cccccc;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 6px 6px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 500;
}

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

.dropdown:hover .dropdown-content {
    display: block;
}

/*.bid-item-list .bx {*/
/*    font-size : 16px;*/
/*}*/
a {
    text-decoration: none;
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--white-color);
    z-index: var(--z-fixed);
    transition: 0.5s;
}

.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer;
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}

.header_img img {
    width: 40px;
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--first-color);
    padding: 0.5rem 1rem 0 0;
    transition: 0.5s;
    z-index: var(--z-fixed);
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    padding: 0.5rem 0 0.5rem 1.5rem;
}

.nav_logo {
    margin-bottom: 2rem;
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color);
}

.nav_logo-name {
    color: var(--white-color);
    font-weight: 700;
}

.nav_link {
    position: relative;
    color: var(--first-color-light);
    margin-bottom: 1.5rem;
    transition: 0.3s;
}

.nav_link:hover {
    color: var(--white-color);
}

.nav_icon {
    font-size: 1.25rem;
}

.show {
    left: 0;
}

.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}

.active {
    color: var(--white-color);
}

.active::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white-color);
}

.height-100 {
    height: 100vh;
}


.stats-panel {
    border-radius: 10px;
    background-color: #FFF;
}

.stats-panel .title {
    font-weight: 600;
    font-size: 16px;
}

.stats-panel p {
    font-weight: 600;
    color: #697ff9;
    font-size: 30px;
}

.announcement-panel {
    background-color: #FFF;
    border-radius: 20px;
    padding: 20px;
}

.graphs-panel {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    margin-top: 25px;
}

.main-image-background {
    border: solid 3px #ffffff;
    padding: 10px;
    border-radius: 50%;
    background-color: #ffffff;
}

.request-panel {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
}

.request-panel .header-title {
    font-size: 18px;
    font-weight: bold;
}

.request-panel .img {
    height: 40px;
    width: 40px;
}

.request-panel .number-count {
    font-weight: bolder;
    font-size: 20px;
}

.request-list-panel {
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
}

.header-light-blue {
    color: #9ab8ff;
}

.round-number-style {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 20px;
}

.custom-green-background {
    background-color: #94C776;
}

.custom-light-blue-background {
    background-color: #7598EF;
}

.custom-light-pink-background {
    background-color: #FF4181;
}

.menu-selection-panel {
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 20px;
    border: solid 1px rgba(255, 0, 55, 0.7);
}

.menu-selection-panel .menu-header-title-styling {
    color: rgba(255, 0, 55, 0.7);
    font-size: 18px;
    font-weight: 700;
}

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

.file-style-upload {
    border-radius: 20px;
    padding: 20px;
    background-color: #ffffff;
}

.pricing-card-search {
    padding: 10px;
    border: solid 1px #c8c6d2;
    border-radius: 10px;
    background-color: #FFF;
    margin-bottom: 10px
}

.border-rad-5px {
    border-radius: 5px;
}

.border-rad-10px {
    border-radius: 10px;
}

.border-rad-20px {
    border-radius: 20px;
}

.statistics_panel {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
}

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

.border-radius-20-px {
    border-radius: 20px;
}

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

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

.padding-20-px {
    padding: 20px;
}

/* .logs-panel {} */

.login-panel {
    border-radius: 20px;
    padding: 20px;
    background-color: #FFF;
    height: 580px;

}

.badge-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
}


@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem);
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem);
    }

    .header_img {
        width: 40px;
        height: 40px;
    }

    .header_img img {
        width: 45px;
    }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0;
    }

    .show {
        width: calc(var(--nav-width) + 156px);
    }

    .body-pd {
        padding-left: calc(var(--nav-width) + 188px);
    }

    .product-description {
        background: #00000012;
        color: #535050;
        border-radius: 10px;
        padding: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }


    /*
        Custom Border Colours
    */
    .card-text-danger-border {
        border-bottom: 1px solid rgba(255, 0, 55, 0.7) !important;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgba(255, 0, 55, 0.7);
        border-color: rgba(255, 0, 55, 0.7) !important;
    }



    /* .white-bg-color {
        color: #FFF;
    } */

    /* Markdown Styling */
    .markdown-content h1,
    .markdown-content h2,
    .markdown-content h3,
    .markdown-content h4,
    .markdown-content h5,
    .markdown-content h6 {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-weight: bold;
    }

    .markdown-content h1 {
        font-size: 2rem;
    }

    .markdown-content h2 {
        font-size: 1.75rem;
    }

    .markdown-content h3 {
        font-size: 1.5rem;
    }

    .markdown-content h4 {
        font-size: 1.25rem;
    }

    .markdown-content h5 {
        font-size: 1rem;
    }

    .markdown-content h6 {
        font-size: 0.875rem;
    }

    .markdown-content p {
        margin-bottom: 1rem;
    }

    .markdown-content ul,
    .markdown-content ol {
        margin-bottom: 1rem;
        padding-left: 2rem;
    }

    .markdown-content li {
        margin-bottom: 0.5rem;
    }

    .markdown-content strong {
        font-weight: bold;
    }

    .markdown-content em {
        font-style: italic;
    }

    .markdown-content code {
        background-color: #f8f9fa;
        padding: 0.2rem 0.4rem;
        border-radius: 0.25rem;
        font-family: monospace;
    }


    .menu-background-circle {
        background-color: #f7f7f7;
        padding: 5px;
        border-radius: 50%;
    }


    /*
        Sub Menu Styling
    */
    .custom-scroll::-webkit-scrollbar {
        height: 6px;
    }

    .custom-scroll::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 10px;
    }

    .custom-scroll::-webkit-scrollbar-track {
        background-color: #f5f5f5;
    }

    .divider {
        height: 24px;
        width: 1px;
        background-color: #D2B48C;
        /* light brown */
        margin: 0 8px;
    }


    /*
        Custom Badge Backgrounds
    */
    .badge-bg-blue {
        background-color: #007bff;
        color: white;
    }

    .blue-btn-xs {
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 6px;
        background-color: #007bff;
        color: white;
        border: none;
    }

    .blue-btn-xs:hover {
        background-color: #0056b3;
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 123, 255, 0.2);
    }
}