.mail-box {background:#FFF; border-collapse: collapse; border-spacing: 0;width: 100%; }
.mail-box .sm-side {

    background:#e5e8ef;
    border-radius: 4px 0 0 4px;
}
.mail-box .lg-side {
    border-radius: 0 4px 4px 0;
}
.mail-box .sm-side .user-head { 
    display: block;
    height: 129px;
    width: 100%;
    background: url(../images/profile-menu.png) center center no-repeat;
    background-size: cover;
    border-radius: 4px 0 0; 
    color: #FFF; 
}

.user-head .inbox-avatar { display: block;padding:10px;}

.user-head .inbox-avatar img { width: 55px;height: 55px;border-radius: 50%;border: 3px solid rgba(0,0,0,.14); }

.user-head .user-name { position:relative;display: block;background:rgba(0,0,0,0.6); padding:10px;bottom:-1px; }

.user-head .user-name h5 { font-size: 14px;margin:0px; }
.user-head .user-name span { font-size: 12px;font-weight: 300; }

a.mail-dropdown {
    background:#80d3d9;
    border-radius: 2px;
    color: #01a7b3;
    font-size: 10px;
    margin-top: 20px;
    padding: 3px 5px;
}
.lg-side .inbox-body { padding: 20px; }
.btn-compose {  background:#ff6c60; color: #fff;padding: 12px 0;text-align: center;border-radius: 0px; width: 100%; }
.btn-compose:hover { background:#f5675c; color: #fff; }

.inbox-divider { border-bottom: 1px solid #d5d8df; }
ul.inbox-nav { display: inline-block;margin: 0;padding: 0; width: 100%; }
ul.inbox-nav li { display: inline-block;line-height: 45px;  width: 100%; }
ul.inbox-nav li a {   color: #6a6a6a;display: inline-block;line-height: 45px; padding: 0 20px;width: 100%; }
ul.inbox-nav li a:hover, 
ul.inbox-nav li.active a, 
ul.inbox-nav li a:focus { background: #d5d7de; color: #6a6a6a; }
ul.inbox-nav li a i { color: #6a6a6a;font-size: 16px; padding-right: 10px; }
ul.inbox-nav li a span.label { margin-top: 13px; }
ul.labels-info li h4 {
    color: #5c5c5e;
    font-size: 13px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    text-transform: uppercase;
}
ul.labels-info li {
    margin: 0;
}
ul.labels-info li a {
    border-radius: 0;
    color: #6a6a6a;
}
ul.labels-info li a:hover, ul.labels-info li a:focus {
    background: none repeat scroll 0 0 #d5d7de;
    color: #6a6a6a;
}
ul.labels-info li a i {
    padding-right: 10px;
}
.nav.nav-pills.nav-stacked.labels-info p {
    color: #9d9f9e;
    font-size: 11px;
    margin-bottom: 0;
    padding: 0 22px;
}
.inbox-head { background:#FFF;border-radius: 0 4px 0 0;border-bottom:1px solid #e5e8ef;color: #333;min-height: 60px; padding: 10px;}
.inbox-head h3 { display: inline-block; font-size:14px;font-weight: bold; margin: 0; padding:14px 0 0 10px; }
.inbox-head .form-control {border-color:#F5F5F5;color: #8a8a8a;height: 42px;line-height: 42px; padding: 0 10px 0 0;border-radius: 0 4px 4px 0;  box-shadow: none;}
.inbox-head .input-group-addon {
    background: #FFF;
    border-color:#F5F5F5;
    border-radius: 4px 0px 0px 4px;
    color: #00a6b2;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0 10px;
}
.table-inbox {  border: 1px solid #d3d3d3; margin-bottom: 0; }
.table-inbox tr td {  padding: 12px !important; }
.table-inbox tr td:hover {  cursor: pointer; }
.table-inbox tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover {  color: #f78a09; }
.table-inbox tr td .fa-star {  color: #d5d5d5; }
.table-inbox tr.unread td {  background: #f7f7f7; font-weight: 600; }
ul.inbox-pagination {  float: right; }
ul.inbox-pagination li {   float: left; }
.mail-option {  display: inline-block; margin-bottom: 10px;  width: 100%; }
.mail-option .chk-all, .mail-option .btn-group {  margin-right: 5px; }
.mail-option .chk-all, .mail-option .btn-group a.btn {
    background: none repeat scroll 0 0 #fcfcfc;
    border: 1px solid #e7e7e7;
    border-radius: 3px !important;
    color: #afafaf;
    display: inline-block;
    padding: 5px 10px;
}

.mail-option .chk-all input[type="checkbox"] {
    margin-top: 0;
}
.mail-option .btn-group a.all {
    border: medium none;
    padding: 0;
}
.inbox-pagination a.np-btn {
    margin-left: 5px;
}
.inbox-pagination li span {
    display: inline-block;
    margin-right: 5px;
    margin-top: 7px;
}
.fileinput-button {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #e6e6e6;
}
.inbox-body .modal .modal-body input, .inbox-body .modal .modal-body textarea {
    border: 1px solid #e6e6e6;
    box-shadow: none;
}
.btn-send, .btn-send:hover {
    background: none repeat scroll 0 0 #00a8b3;
    color: #fff;
}
.btn-send:hover {
    background: none repeat scroll 0 0 #009da7;
}

.heading-inbox h4 {
    border-bottom: 1px solid #ddd;
    color: #444;
    font-size: 18px;
    margin-top: 20px;
    padding-bottom: 10px;
}
.sender-info {
    margin-bottom: 20px;
}
.sender-info img {
    height: 30px;
    width: 30px;
}
.sender-dropdown {
    background: none repeat scroll 0 0 #eaeaea;
    color: #777;
    font-size: 10px;
    padding: 0 3px;
}
.view-mail a {
    color: #ff6c60;
}
.attachment-mail {
    margin-top: 30px;
}
.attachment-mail ul {
    display: inline-block;
    margin-bottom: 30px;
    width: 100%;
}
.attachment-mail ul li {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 150px;
}
.attachment-mail ul li img {
    width: 100%;
}
.attachment-mail ul li span {
    float: right;
}
.attachment-mail .file-name {
    float: left;
}
.attachment-mail .links {
    display: inline-block;
    width: 100%;
}

.fileinput-button {
    float: left;
    margin-right: 4px;
    overflow: hidden;
    position: relative;
}
.fileinput-button input {
    cursor: pointer;
    direction: ltr;
    font-size: 23px;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-300px, 0px) scale(4);
}
.fileupload-buttonbar .btn, .fileupload-buttonbar .toggle {
    margin-bottom: 5px;
}
.files .progress {
    width: 200px;
}
.fileupload-processing .fileupload-loading {
    display: block;
}
* html .fileinput-button {
    line-height: 24px;
    margin: 1px -3px 0 0;
}
* + html .fileinput-button {
    margin: 1px 0 0;
    padding: 2px 15px;
}
@media (max-width: 767px) {
.files .btn span {
    display: none;
}
.files .preview * {
    width: 40px;
}
.files .name * {
    display: inline-block;
    width: 80px;
    word-wrap: break-word;
}
.files .progress {
    width: 20px;
}
.files .delete {
    width: 60px;
}
}
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
 


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

    .mail-box {display: table;table-layout: fixed; }
    .mail-box aside { display: table-cell; float: none; height: 100%; padding: 0; vertical-align: top;}
        .mail-box .sm-side {

        background:#e5e8ef;
        border-radius: 4px 0 0 4px;
        width: 20%;
    }
    .mail-box .lg-side {
        border-radius: 0 4px 4px 0;
        width: 80%;
    }

    .inbox-pagination a.np-btn {
    background:  #fcfcfc;
    border: 1px solid #e7e7e7;
    border-radius: 3px !important;
    color: #afafaf;
    display: inline-block;
    padding: 5px 15px;
}

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

.inbox-head { display: block;height: auto  !important;min-height: auto  !important; }
.inbox-head h3 { display:block;padding:10px;text-align: center; }
.inbox-head form { display:none;float:none !important; }
.mail-option { text-align: center; }
.chk-all, .mail-option .btn-group{ margin:0 0 2px 0 !important; }
ul.inbox-pagination { float:none !important;display: block; }
ul.inbox-pagination li {float:none;}

ul.inbox-pagination li:first-child { display: block;float:none; }
ul.inbox-pagination li span { margin:5px; }
ul.inbox-pagination li:nth-child(2),
ul.inbox-pagination li:nth-child(3){ display: inline-block; }
ul.inbox-pagination li a.np-btn { 
     background:  #fcfcfc;
    border: 1px solid #e7e7e7;
    border-radius: 3px !important;
    color: #afafaf;
    display: inline-block;
    padding: 5px 15px;
margin: 0px !important;
    display: inline-block;
    font-size:16px;
}

.table-inbox { border:0px !important; } 
.table-inbox > tbody > tr { display:block;margin-bottom:10px;border:1px solid #F1F1f1; } 
.table-inbox > thead > tr > th, 
.table-inbox > tbody > tr > td { display: block !important;border:0px !important; }

.table-inbox > tbody > tr > td:first-child,
.table-inbox > tbody > tr > td:nth-child(2),
.table-inbox > tbody > tr > td:nth-child(5) { display: none !important; }

.table-inbox > tbody > tr > td:nth-child(3) { font-weight:bold;padding-bottom:5px !important; }
.table-inbox > tbody > tr > td:last-child { padding-top:5px !important; }
.table-inbox > tbody > tr > td:nth-child(4) { padding-top:0px !important; padding-bottom:0px !important; }
.table-inbox > tbody > tr > td:nth-child(4) { border-top:0px !important; }


.table-inbox > tbody > tr > td:last-child {text-align: left !important;}
}