/* Styles for the top headers */
@media (max-width: 360px){
    .dc-logged-user-name{
        text-align: right !important; 
        display : flex !important;
    }
    .bapi-top-bar__brand{
        display: none !important ;
    }
    .grid-and-invite{
        margin-left: -8px;
    }
    #group-info-content{
        width: 330px !important;
    }
    .mygroup-heading{
        width: 81px !important;
    }
    .editable-button.edit-button{
        margin-top: -24px;
        margin-left: 45px;
    }
    .edit-container{
        width: 330px !important;
    }
    #membersContainter{
        width: 330px !important;
    }
    .group-info-entity-list-right-content-description{
        text-wrap: pretty;
    }
    .group-info-entity-list-right-content-emailaddress input[type="text"]{
        width: 200px !important;
    }
    .group-info-entity-list-right-content-invitebtn{
        margin-left: 207px !important;
    }
    .profile-card {
        margin-left: 45px !important;
    }
    .two-boxes{
        width: 285px !important;
        margin: 0px !important;
    }
    .view-pagination {
        display: flex;
        justify-content: center !important;
    }
    select#selectTimezone {
        width: 275px !important;
    }
    .warning-content{
        width: 280px !important;
        text-wrap: balance;
        padding: 3px !important;
    }

    /* Badge */
    input.submit-btn.btn.btn-primary.form-action-container-left.request-badge-btn{
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .badge-container {
        gap: 55px !important;
    }
    .badge-content {
        padding-right: 0px !important;
        width: 114px;
        align-items: center;
    }
    select#selectTimezone {
        width: 225px !important;
    }
    .content-section-description-section-row{
        width: 290px !important;
    }
}

@media (min-width: 361px) and (max-width: 640px){
    .mygroup-heading{
        width: 85px !important;
    }
    .editable-button.edit-button{
        margin-top: -24px !important;
    }
    .group-info-content-entitylist-row-sectionBlockLayout{
        width: 640px !important;
        margin-left: -23px !important;
    }
    .memberSearchText{
        width: 370px !important;
    }
    .group-info-entity-list-columnBlockLayout{
        width: 370px !important;
    }
    .grid-and-invite{
        display: flex;
        flex-direction: row;
    }
    #divbGroupMembers .entitylist{
        width: 370px !important;
    }
    .group-info-entity-list-rightcolumnBlockLayout{
        width: 198px !important;
        margin-left: 24px !important;
    }
    .group-info-entity-list-right-content-emailaddress{
        width: 198px !important;
    }
    .group-info-entity-list-right-content-emailaddress input[type="text"] {
        width: 198px !important;
    }
    .group-info-entity-list-right-content-invitebtn{
        margin-left: 0px !important;
        margin-top: 8px !important;
    }
    .left-rail{
        margin-left: 180px;
    }
    .self-view{
        display: flex !important;
        align-items: center !important; 
        justify-content: center !important;
        width: 251px;
    }
    .self-view-about {
        text-align: center !important;
        width: 251px;
        align-items: center !important;
        margin-left: 50px;
    }
    .profile-card {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #btnMyhub{
        margin-left: -40px;
    }
    div#userProfileDetail{
        margin-left: -60px;
    }
    #loginUserName{
        margin-left: -40px;
    }
    div#emailWarning{
        width: 150px !important;
        text-wrap: wrap;
    }
    .warning-content.message-bar{
        width: 198px !important;
        margin-top: 50px;
    }
    .two-boxes{
        margin: 0px !important;
    }
    .view-pagination {
        display: flex;
        justify-content: center !important;
    }

    /* Badge */
    input.submit-btn.btn.btn-primary.form-action-container-left.request-badge-btn{
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .badge-container {
        gap: 0px !important;
    }
    .badge-content {
        align-items: center;
        width: 136px;
    }
}