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

    /* For mobile btn-menu-top-rightones: */
    .sidebar {
        width: 144px !important;
        position: fixed !important;
        top:0px !important;
    }

    .sidebar-brand a{
        text-align: -webkit-center !important;
    }

    #logo_img, #sidebarMyToggle{
        display: none;
    }
    #logo_mark_img{
        display: block;
        margin-left:40px;
    }

}

*{
    font-family: Inter;
}

@media only screen and (min-width: 1440px) {
    .sidebar {
        width: 256px !important;
    }

}

.sidebar {
    background-color: white;
}

.sidebar.toggled .nav-item .nav-link {
    text-align: center;
    width: 56px;
}

.sidebar.toggled .nav-item .nav-link  span{
    display: none;
}


.sidebar-brand{
    height: 80px;
}

.logo_toggled{
    display: none;
}

#content-wrapper{
    padding-top: 16px !important;
}

.menu-bar{
    padding: 8px 12px 8px 24px;
}
.menu-bar>.nav-item{
    list-style: none;
}

.menu-bar .nav-item:hover{
    background: linear-gradient(311.21deg, rgba(73, 123, 213, 0.1) 0%, rgba(50, 188, 217, 0.1) 96.25%);
}

.menu-bar li.active{
    background: linear-gradient(311.21deg, rgba(73, 123, 213, 0.1) 0%, rgba(50, 188, 217, 0.1) 96.25%);
}

.nav-item a.nav-link{
    color: #4C4E64DE;
    padding: 12px 12px 12px 16px !important;
}

a.nav-link i{
    font-size: 24px !important;
    height: 56px !important;
}

a.nav-link span {
    font-size: 16px !important;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    vertical-align: super;
}

.logout{
    position: absolute !important;
    bottom: 0px !important;
}

.font-weight-bold{
    font-weight: 600 !important;
}

.text-info{
    color:#039FC0 !important
}

.bg-info{
    background-color: #039FC0 !important;
}

.btn-info{ 
    background-color: #005C94;
}

.text-underline{
    text-decoration: underline;
}

.desc{
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    white-space: pre-line;
}

.ellipse{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
    /* Adjust according to line height */
}

.tab {
    overflow: hidden;
    /* border: 1px solid #ccc; */
    /* background-color: #f1f1f1; */
}

.tab button {
    background-color: initial;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    width:154px;
    height:48px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;

}

.w-33{
    width:33.33% !important;
}

.w-45{
    width:45% !important;
}

.w-150px{
    width:150px !important;
}

.w-200px{
    width:200px !important;
}

.w-max-75 {
    max-width: 75% !important;
}

.min-vh-90{
    min-height: 90vh !important;
}

.min-vh-80{
    min-height: 80vh !important;
}

.min-vh-75{
    min-height: 75vh !important;
}

.chatroom{
    overflow: auto;
    max-height: 450px;
    overflow-x: clip;
}

.msg-nav:hover{
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.min-h-300px{
    min-height: 160px !important;
}

.tab button.active {
    background-color: white;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    /* border: 1px solid #ccc; */
    /* border-top: none; */
    background: white;
}


/* Custom Scrollbar Styles */

/* For WebKit browsers (Chrome, Safari) */
/* Custom Scrollbar Styles for Better UX */

/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    background: #f5f7fa;
}

::-webkit-scrollbar-track {
    background: #f5f7fa;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #c1c7d0;
    border-radius: 8px;
    border: 2px solid #f5f7fa;
    min-height: 40px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: #8fa3bf;
    width:12px;
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #c1c7d0 #f5f7fa;
}

/* Fallback for non-supported browsers */
body {
    overflow: auto; /* Ensure overflow is set for scrollbars to appear */
}

.profile-step-bar{
    height: 72px;
}

.profile-alert{
    background-size: cover;
    background-position-y: center;
    color:white;
    text-align: center;
}

.profile-basic-alert{
    background-image: url('../img/profile-alert-step12.png');
}

.profile-details-alert{
    background-image: url('../img/profile-alert-step22.png');
}

.profile-complete-alert{
    background-image: url('../img/profile-alert-step32.png');
    color: black;
}

.progress-bar {
  width: 100%;
  background-color: #ddd;
  border-radius:4px;
}

.current-pro {
  height: 8px;
  background-color: orange;
  line-height: 30px;
  color: white;
  border-radius:4px
}

.explain-step{
    background-image: url('../img/svg/step-grey.svg');
    background-size: cover;
    background-position:right;
    background-repeat: no-repeat;
}

.explain-step-active{
    background-image: url('../img/svg/step-green.svg');
    background-size: cover;
    background-position:right;
    background-repeat: no-repeat;
}


.btn{
    margin: 0px 8px 8px 0px;
}

.btn:hover{
    /* opacity: 0.8; */
    opacity: 0.8;
}

.btn-selected{
    /* opacity: 0.8; */
    background-color: #b4e3ed !important;
    border-color: #005C94 !important;
}

.btn-salary{
    min-width:150px !important;
}

.btn-city{
    width:100px !important;
}

.btn-next, .btn-skip{
    min-width: 100px !important;
}

.btn-country{
    min-width:100px !important;
}

.btn-people{
    width:180px !important;
}

.btn-custom {
    min-width: 92px !important;
    max-width: 120px !important;
}

.border-bottom-dot{
    border-bottom: 1px dotted lightgrey;
}

.cursor-pointer
{
    cursor: pointer;
}



table.history>thead>tr>th{
    padding: 4px 8px
}

.list-style-auto{
    list-style: auto;
    padding-inline-start: 32px !important;
    line-height: 28px !important;
}

.break-all{
    word-break: break-all !important;
}

.sp-top-bar{
    position: sticky;
    top: 0px;
    z-index: 1000;
}

.sp-top-bar i{
    font-size: x-large;
}


.ranking{
    width: 64px;
    height: 64px;
    background-color: rgba(3, 159,192,0.05) ;
    border: 2px solid rgb(3, 159,192);
    border-radius: 32px;
    font-size: 32px;
    font-weight: bold;
}

.avatar{
    background: none;
}

.avatar-88{
    width:88px !important;
    height: 88px !important;
}

.avatar-64{
    width:64px !important;
    height: 64px !important;
}

.avatar-40{
    width:40px !important;
    height: 40px !important;
}

.avatar-30{
    width:30px !important;
    height: 30px !important;
}

.avatar-group .avatar-xs {
    margin-inline-start: -0.65rem;
}

.avatar-group .avatar:hover {
    z-index: 30;
    margin-top:-10px;
    transition: all .5s ease;
}

.plus-overlay {
    top:-10;
    right:-10;
    width:10px;
    height:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    color:#007bff;
}



.line-height-32{
    line-height: 32px !important;
}

.line-height-24{
    line-height: 24px !important;
}

.invite-me:hover{
    box-shadow: 0px 1px 4px rgb(223, 223, 223);
}

/* Default layout for screens larger than 768px (desktops) */
#language-container {
    column-count: 3;
    column-gap: 40px;
}

.abs-bottom{
    bottom: 0px;
}

.favorited{
    color: orange;
}

.add-member-card, .member-card{
    min-width: 100px;
    cursor: pointer;
}

.add-member-card img, .member-card img{
    width:80px; 
    height:80px;
    object-fit:cover;
}


.avatar-coustom {
    width: 32px !important;
    height: 32px !important;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    white-space: nowrap;
}

.badge-blue,
.annual_sales {
    background-color: #e7f5ff;
    /* Light blue */
    color: #1c7ed6;
    /* Darker blue */
}

.badge-green,
.industry {
    background-color: #e6f4ea;
    /* Light green */
    color: #37b24d;
    /* Darker green */
}

.badge-light-blue,
.average_annual_income {
    background-color: #edf2ff;
    /* Even lighter blue */
    color: #4c6ef5;
    /* Bold blue */
}

.badge-yellow,
.located_country {
    background-color: #fff9db;
    /* Light yellow */
    color: #f59f00;
    /* Bold yellow */
}

/* For tablets: screens between 600px and 768px */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    #language-container {
        column-count: 2;
        column-gap: 40px;
    }
}

@media only screen and (max-width: 768px) {
    .w-max-75 {
        max-width: 100% !important;
    }

    .w-sm-100{
        width:-webkit-fill-available !important;
    }
}


/* For mobile devices: screens smaller than 600px */
@media only screen and (max-width: 599px) {

    #content-wrapper{
        padding-top: 20px !important;
        margin-top: 60px !important;
        margin-bottom: 80px !important;
    }



    #language-container {
        column-count: 1;
        column-gap: 40px;
    }

    .sp-top-bar{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 1000;
    }

    .sp-menu{
        background: white;
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 1001;
        top: 0;
        left: 0;
    }

    .sp-menu-close-icon{
        position: absolute;
        top: 16px;
        right: 16px;
        font-size: 24px;
        color: #4C4E64DE;
    }

    .profile-step-bar{
        height: auto !important;
    }

    .profile-basic-alert{
        background-image: url('../img/profile-alert-step11.png');
    }

    .profile-details-alert{
        background-image: url('../img/profile-alert-step21.png');
    }

    .profile-complete-alert{
        background-image: url('../img/profile-alert-step31.png');
        color: black;
    }

    .profile-alert{
        min-height: 56px;
        font-size: 12px !important;
        
    }

    .profile-alert .h4{
        font-size: 12px;
        margin-bottom: 0px !important;
    }

    .profile-step-title{
        font-size: 16px;
        padding-bottom: 0px;
    }

    .btn-people{
        width:120px !important;
    }

    .btn-country{
        font-size: 14px !important;
        min-width: 60px !important;
    }
    
    .btn-salary{
        font-size: 14px !important;
    }

    .btn-next, .btn-continue, .btn-skip{
        width: 100% !important;
    }

    .btn-custom {
        width: 45% !important;
    }

    h1, .h1{
        font-size: 24px;
    }

    h2, .h2{
        font-size: 22px;
    }

    h3, .h3{
        font-size: 20px;
    }

    h4, .h4{
        font-size: 16px;
    }
    
    h5, .h5{
        font-size: 14px;
    }

    span{
        font-size: 13px;
    }

    .sticky-footer .nav-item a.nav-link{
        padding:4px !important;
        font-size: 14px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sticky-footer a.nav-link i{
        height: unset !important;
    }

    .sticky-footer .nav-item a.nav-link span{
        font-size: 14px !important;
    }

    .sticky-footer{
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 1000;
    }

    .list-style-auto{
        padding-inline-start: 16px !important;
        margin-left: 0px !important;
    }

    .ml-sm-li{
        padding-inline-start: 16px !important;
        margin-left: -8px !important;
    }

    .line-height-32{
        line-height: 32px !important;
    }

    .line-height-24{
        line-height: 24px !important;
    }

    .line-height-20{
        line-height: 20px !important;
    }

    .line-height-16{
        line-height: 16px !important;
    }

    .line-height-normal{
        line-height: normal !important;
    }

    .add-member-card, .member-card{
        width: 80px;
    }

    .add-member-card img, .member-card img{
        width:48px; height:48px;
    }
}