  .msgcenterHeader{
      width: 96%!important
  }
  .msgcheader{
      width: 99% !important;
      margin-top: 20px;
      padding-left: 1rem;
      height: auto;
      margin-bottom: 10px;
      margin-left: 5px;
  }
  .message-center-intro{
      margin-top: -24px;
      width: 40% !important;
  }
  .message-center-intro-text{
      color: #555555;
      text-decoration: underline;
      font-size: 16px;
      cursor: pointer;
  }
  #msgCenterIntroLabel{
    color: #001F5F;
    font-family: Roboto;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 42px;
    margin-top: 15px;
  }
  #msgCenterIntroDesc {
    color: #545964;
    font-family: Roboto;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 28px;
  }
  #msgcenterintromodaldialog{
      width: 50% !important;
      top: 25%;
  }
 .message-center-intro-modal-button{
      margin-left: 2.5rem;
  }
 .msgcenter-default-msg, .history-default-msg{
      text-align: center;
      margin-top: 13%;
      font-family: Roboto;
      font-size: 16px;
      font-weight: 500;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      color: #333333;
  
  }
 .msgch1header{
      margin-top: -13px;
  }
  .searchResultsSection{
      margin-top: 11px;
      margin-bottom: 5px;
  }
.messageCenterHeader{
      font-size: 24px!important;
  }
  .searchIcon{
      
      height: 25px;
      margin-top: 7px;
      cursor: pointer;
      margin-left: -18px;
      z-index: 2;
      transform: translateX(-21px);
      position: absolute;
  }
  
  .searchSeparator{
      width: 1px;
      height: 40px;
      border: solid 1px #cccccc;
      margin: 0;
      position: relative;
      margin-right: 10px;
      margin-left: 10px;
  }
  .mobileSearchIcon{
   display: none !important;
  }
  .msgcSearchSection{
      padding: 0 !important;
      margin-right: 0px !important;
  }
  .msgcSearchSectionDiv1{
      padding: 0 !important;
  }
.searchText{
      height: 40px;
      margin-right: 10px;
      margin-top: 0px;
      padding-left: 10px !important;
      border: none;
      color: #545964;
      font-family: Roboto;
      font-size: 18px;
      letter-spacing: 0;
      line-height: 21px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
      white-space: nowrap;
      padding-right: 0!important;
      margin-left: 250px;
      border-bottom: 2.5px solid #d8d8d8;
      width: 35% !important; 
      margin-left: 41% !important;
  }
  .searchText::placeholder {
      color: #A1A5AA;
      font-family: Roboto;
      font-size: 18px;
      letter-spacing: 0;
      line-height: 21px;
  }
  .clearSearchResults{
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.63;
    letter-spacing: 1px;
    color: #1775d2;
  }
  .searchResults{
    font-family: Roboto;
    font-size: 16px;
    line-height: 1.63;
    letter-spacing: 0.4px;
    color: #001f5f;
    font-weight: bold;
    text-align: center;
  }
.deletebin{
      padding-right: 2rem;
      top: 2rem;
      font-size: 2rem !important;
      padding-left: 2rem;
  }
  .notstarreddetail{
      font-size: 2rem !important;
      background: transparent;
      color: #F1B434;
      cursor: pointer;
  }
  .starreddetail{
      font-size: 2rem !important;
      background: transparent; 
      color: #1775d2;
      cursor: pointer;
  }
  
  .mobilecontactclm{
    font-family: Roboto;
    font-size: 16px;
    font-weight: bold;
    color: #545964;
  }
  .mobilemailsubject{
    font-family: Roboto;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    color: #333333;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    width: 345px;
      /*margin-top: 8px;*/
  }
  .mobilecheckboxclm{
  padding-left: 10px !important;
  }
  .mobilemaildesc{
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
      white-space: nowrap;
      width: 198px;
      margin-top: -6px;
      font-family: Roboto;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #666666;
  }
  .mobilemessagedate{
  font-family: Roboto;
    font-size: 14px;
    color: #333;
    margin-top: 3px;
    margin-left: 1px;
  }
  .checkboxclm{
      padding:22px 2% 22px 32px !important;
      width:76px;
  }
  .mailcheckbox{
      height:20px;
      width:auto;
      color: #1775d2 !important;
      font-size: 20px !important;
  }
  .starclm{
      position:relative;
      padding: 15px 20px 0 30px !important;
  }
  .contactclm{
      padding: 15px 0px 15px 30px !important;
      width: 29% !important;
      font-family: Roboto;
      font-size: 16px;
      letter-spacing: 0.4px;
      color: #545964;
      font-weight:600;
  }
  .subjectclm{
      padding: 15px 0px 15px 15px !important;
      font-family:Roboto;
      font-size:16px;
      letter-spacing: 0.4px;
  }
  
  .newsubjectclm {
      color: #0088CE !important;
      font-weight: 800;
      margin-left: -22px;
  }
  .newsubjectclm:before {
      content: ' \25CF';
      font-size: 20px;
      margin: 0 5px!important;
      color: #0088CE !important;
  }
  
  .mailsubject{
      color:#555;
  }
  .attachmentclm{
      padding: 15px 8px !important;
  }
  .fa-paperclip{
      font-size:20px !important;
      width: auto;
      margin-left: 8px;
      transform: rotate(44deg);
      color: #666666 !important;
  }
  .mailattachment {
      top: 0;
  }
  .dateclm{
      padding: 15px 15px!important;
      width: 10% !important;
      text-align: right;
      color: #555;
      padding-right: 30px !important;
  }
  .trashclm{
      padding: 13px 30px 0px 0px !important;
      color: #1775d2 !important;
      cursor: pointer;
      text-align: right;
      width: 30px;
  }
  
  .fa-trash-o{
      font-size:25px !important;
      cursor: pointer;
      color: #001f5f !important;
      text-decoration: none !important;
  }
  .checkall{
      color: #1775d2 !important;
      font-size: 20px !important;
  }
  .notstarreddetailscreen{
      font-size: 2rem !important;
      background: transparent;
      color: #F1B434;
      margin-top : 2rem;
      cursor: pointer;
  }
  .starreddetailscreen{
      font-size: 2rem !important;
      background: transparent; 
      color: #1775d2;
      margin-top : 2rem;
      cursor: pointer;
  }
  
  .selecteditems {
      margin: 0;
      line-height: 1.71;
      letter-spacing: 0.4px;
      color: #333333;
      font-weight:normal;
      font-family: Roboto;
      font-size: 14px;
  }
.mobileMessageDelete{
      display: none;
  }
  #mobile-msg-intro{
      display: none;
  }
#addressChangeModal,
#accountChangeModal,
#personalDetailsChanegModal,
#beneficiaryChangesModal {
    margin-left: 23%;
}
.UserTabs{
    margin-bottom: 4rem;
    margin-left : 2rem;
    margin-top: 2rem;
    background-color: #ffffff;
    min-height: 60.8rem !important;
  }
#msg-center-intro-modal-content{
      padding: 15px !important;
  }
  #modalCloseButton{
      border: none!important;
      width: 20%;	
      margin-top: 25px;
      margin-bottom: 20px;
  }
  #msgIntroModalCloseButton{
      border: none!important;
      width: 22%;	
      margin-top: 25px;
      margin-bottom: 20px;
  }
  
@media all and (min-width:360px) and (max-width: 768px) {
    .submit-btn {
        margin-left: 4rem !important;
    }
    .mobiletrashclm {
        padding-right: 0px !important;
    }
    .panel-collapse {
        border-bottom: none !important;

    }
}

@media (max-width: 1023px) and (min-width: 1024px) {
    .nav-tabs>li {
        padding-left: 0 !important;
    }
}

.box{
    margin-right: 3%;
}
.pagination li a{
    border: none !important;
}
.pagination{
    margin-bottom: 21px !important;
    margin-right: 5px !important;
    margin-left: 0px !important;
    margin-top: -6px !important;
}
select[title="rowcounter"] {
    display: none;
}
#paginationNumbers:hover, #paginationNumbers:focus{
    background: none;
}
#paginationNumbers {
  font-family: Roboto;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.35px;
  color: #001f5f;
  float: right;
}
#leftArrow a, #rightArrow a{
    font-size: 20px;
    margin-top: -5px;
}
.pagination>.disabled>a{
    pointer-events : none !important;
}
@media all and (min-width:360px) and (max-width: 768px) {
   
    .pagination{
        width: 35%;
        float: right;
     }
     .box {
        margin-top: 0px !important;
        margin-bottom: 20px;
        margin-right: 0px;
    }
}
@media all and (min-width:300px) and (max-width: 768px) {
  .messageCenterHeader {
      margin-left: 0;
  }
  .mobileSearchIcon {
      display: block !important;
      float: right;
      margin: -1px 0 1px;
      background: #fff;
      padding: 10px 8px;
      font-size: 18px !important;
  }
  .searchText {
      font-size: 18px;
      margin-left: 10px !important;
      margin-top: 0;
      padding: 20px; 
      width: 100% !important;
  }
  }
    /*CSS for the New Message Center*/
  #msg-intro-info-icon{
      height: 20px;
      margin-left: 4px;
  }
  .msgcenterUserTabs {
      display: flex;
      margin-top: 0rem !important;
  }
  .innerusertabs {
      padding: 0 !important;
  }
  .col-sx-2.innerusertabs {
      border-right: 2px solid grey;
  }
  #messageCenterTabs {
      display: block;
  }
  #messageCenterTabs>li>a {
      padding: 1.3rem;
      text-align: center;
      border-radius: 0;
      margin: 0;
  }
  .testmsgctrtabs>li>a:hover {
      /*border-right: 5px solid #1775d2 !important;*/
      border-bottom: none !important;
      font-weight: normal;
      background-color: #ecf5fb !important;
      color: #001f5f !important;
  }
  #messageCenterTabs>li.active>a {
      border-right: 5px solid #1775d2 !important;
      border-bottom: none !important;
      font-weight: normal;
  }
  #messageCenterTabs>li.nav-item.columnhead {
      width: 100% !important;
      padding: 0;
  }
  .msg-tab-content {
      width: 99%;
      float: right;
  }
  #messageCenterTabs>.nav-item>.nav-link {
      width: auto;
  }
  
  .deletecrossbtn {
      opacity: 1 !important;
      margin: 1rem 1.5rem 0;
      position: absolute;
      right: 5px;
  }
  
  #msgCenterDeleteLabel {
      font-size:  36px;
      font-weight: 700;
      margin: -10px 0 0 2rem;
      letter-spacing: 0;
      line-height: 42px;
  }
  .deletemodalheader {
      border: none !important;
      margin-top: 30px;
  }
  .modaldesc {
      font-family: Roboto;
      font-size: 18px;
      line-height: 1.44;
      letter-spacing: 0.23px;
      color: #333;
      padding: .5rem 5rem 1.8rem;
      margin: 0;
      margin-top: -15px;
  }
  .message-center-delete-modal-button {
      padding: 0 5rem 3rem;
  }
  button#modalConfirmButton {
      border: none;
      font-size: 16px;
      font-weight: 700;
      margin-right: 2rem;
      padding: 10px 30px;
  }
  
  button#modalCancelButton {
      background: transparent;
      border: 1px solid #F1B434;
      padding: 10px 30px;
      font-weight: 700;
  }
  
  .deletethreadbtn {
      padding: 10px 20px;
      margin-left: 18px;
      background: transparent;
      border: 1px solid #f4b434;
  }
/*CSS for message center dropdown menu on mobile*/
  @media (min-width: 319px) and (max-width: 768px) {
  .mobilemsgmenu.dropdown {
      display: table;
      width: 100%
  }
.msgcheader{
      margin-top: -54px;
}
.messageCenterMainSec {
    margin-left: -37px;
    margin-top: -8px;
    width: 110% !important;
}
  a.mobilemenuitem {
      display: flex;
      padding: 12px 25px 12px 15px;
      border-bottom: 1px solid #ececec;
      color: #545964;
      font-size: 18px;
      margin-left: 0rem;
      border-left: 10px solid transparent;
  }
  #mobile-msg-intro{
      display: block;
      width: 100% !important;
  }
  #dropdownMenuButton {
      width: 100%;
      text-align: left;
      padding: 13px 26px 13px 25px;
      background: #fff;
      border-bottom: 2px solid #ececec;
      font-size: 18px;
      color: #545964;
  }
  .rightarrow {
      color: #0088CE;
      float: right;
      font-size: 44px !important;
      position: absolute;
      right: 16px;
      top: 5px;
      transform: rotate(0deg);
      transition-property: transform;
      transition-duration: 0.8s;
  }
  
  .innerusertabs {
      display: none;
  }
  .msgmenucontainer {
      margin: 0 !important;
      border: none !important;
      width: 100%;
      padding: 0 !important;
      box-shadow: 0 8px 6px 0 rgb(0 0 0 / 30%) !important;
  }
  .msgcenterUserTabs .panel-body {
      padding: 0;
  }
  td.mobilecontactclm {
      padding-left: 6px !important;
      font-size: 14px;
  }
  tr.mobilemessagerow:before{
      content: ' \25CF';
      font-size: 25px;
      color: transparent;
      margin: 0 0 0 15px;
      position: relative;
      top: 15px;
  }
  
  td.mobilestarclm {
      padding-right: 15px !important;
      border-bottom: 1px solid #898989 !important;
  }
  .mobilemsgmenu.open .rightarrow{
       transform: rotate(-90deg);
       transition-property: transform;
       transition-duration: 0.8s;
  }
  .panel-group .panel+.panel {
        border: none !important;
    }
   .panel-default>.panel-heading {
        display: none;
        border: none !important;
    }
    .panel-group .panel {
        border: none !important;
        box-shadow: none !important;
    }
    .panel-default>.panel-heading+.panel-collapse>.panel-body {
        border: none !important;
    }
  }
/*CSS for message center table links*/
@media (min-width: 769px) and (max-width: 1000px) {
    #messageCenterTabs>.nav-item>.nav-link {
        width: auto;
        padding-left: 25px !important;
    }
}