@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "custom/tab";

.msg-details{
    @media (min-width: $screen-xs-max){
        max-height: 670px;
        overflow: auto;
    }
    ul{
        li{
            padding:20px;
            font-weight: $font-weight-semibold;
            border-bottom: 1px solid $border-color;
            border-left: 3px solid $light;
            .date{
                font-size: 13px;
                color: lighten($dark, 70%);
            }
            p span{
                color: lighten($dark, 40%);
            }
            span{
                color: lighten($dark, 20%);
            }
            &:last-child{
                border-bottom:0;
            }
            &.selected{
                background: #eee;
                border-left: 3px solid $brand-primary;
            }
        }
    }
}
.msg-content-section{
    @media (min-width: $screen-xs-max){
        max-height: 670px;
        overflow: auto;
    }
    ul{
        li{
            padding:20px 30px;
            border-bottom: 1px solid $border-color;
            color: lighten($dark, 40%);
            &:last-child{
                border-bottom:0;
            }
            h4,h2{
                color: lighten($dark, 20%);
            }
            &.merchant{
                background: lighten($dark, 97%);
                padding-left: 55px;
            }
//            &.msg-enter{
//                padding-left: 55px;
//            }
        }
    }
}
.head-strip{
   .createmail{
        margin: 7px 0 7px 15px;
   }  
}
.sortby{
    margin: 5px 0 0 15px;
    color: #666;
    display: inline-block;
    &.desc{
        .arw{
            border-top: 4px solid #999;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            display: inline-block;
            vertical-align: middle;
        }
    }
    &.asc{
        .arw{
            border-top: 0;
            border-bottom: 4px solid #999;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            display: inline-block;
            vertical-align: middle;
        }
    }
}


@media (max-width: 460px){
    .head-strip .createmail, .head-strip .tabsection, .order_tab ul li, .order_tab ul li .tab.cur_menu, .order_tab ul li .tab.active, .order_tab ul li .tab.selected, .order_tab ul li .tab{
        width: 100%;
    }
}
@media (max-width: $screen-xs-max){
    .msg-sec-left{
        border-right: 0;
        border-bottom: 1px solid #e4e4e4;
        display: inline-block;
        vertical-align: top;
        float: none;
         @include translate(0,0);
        transition: all 0.5s ease;
        &.msg-list-show{
            @include translate(-100%,0);
        }
    }
    .msg-sec-right {
        top: 0;
        @include translate(0,0);
        width:100%;
        opacity: 0;
        transition: all 0.5s ease;
        z-index: 10000;
        display: inline-block;
        vertical-align: top;
        float: none !important;
        border: 0;
        &.msg-show{
            @include translate(-100%,0);
            opacity: 1;
        }
        h4{
            line-height: 19px;
        }
    }
    .msg-container{
        white-space: nowrap;
        overflow: hidden;
        vertical-align: top;
        font-size: 13px;
        *{
            white-space: normal;
        }
    }
}



body.rtl{
    .head-strip .createmail {
        margin: 7px 15px 7px 0;
    }
}