//
// Email app
// --------------------------------------------------

.toggle-email-sidebar{
    display: none;
}
.email-wrapper {
    height: 100%;
    position: relative;
    // & > div {
    //     height: 100%;
    //     overflow: hidden;
    // }
    .email-sidebar {
        background: $color-info-dark;
        width: 250px;
        float: left;
        padding-left: 47px;
        height: 100%;
        .btn-compose {
            font-family: 'Montserrat';
            font-size: 13px;
            font-weight: normal;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }
        .menu-title {
            color: $color-master;
            opacity: .5;
            font-size: 10.8px;
            font-family: 'Montserrat';
            font-weight: normal;
            letter-spacing: 0.03em;
        }
        .main-menu {
            & > li{
                list-style: none;

                &.active{
                    & > a{
                        color: $color-complete;
                        & > .title{
                            position: relative;
                            &:after{
                                background: $color-complete;
                                border-radius: 50%;
                                content: "";
                                height: 7px;
                                position: absolute;
                                right: -14px;
                                top: 6.5px;
                                width: 7px;
                            }
                        }
                    }
                }
                a{
                    font-size: 14.92px;
                    color: rgba(255,255,255,.6);
                    line-height: 37px;
                }
            }
        }
        .sub-menu{
            li{
                list-style: none;
                padding: 0;
                &.active{
                    a{
                        color: #fff !important;
                    }
                }
                a{
                    color: $color-master !important; 
                    line-height: 25px;
                }
            }
        }
        .sub-menu li a, .main-menu li a {
            
            .badge {
               background: transparent;
               font-size: 13px;
               color: $color-master;
               line-height: 25px;
            }
        }
    }
    .email-list {
        float: left;
        width: 360px;
        background: #fff;
        height: 100%;
        overflow-y: auto;
        position: relative;
        -webkit-overflow-scrolling: touch;
        @include transition(all .5s ease);
        &.slideLeft{
            @include translate(-100%, 0);
        }
        .email-refresh{
            position: absolute;
            right: 18px;
            top: 5px;
            //color: #798591;
            color: $color-master;
            opacity: .34;
            z-index: 101;
        }
        .list-view-fake-header, .list-view-group-header{
            background: $color-master-lighter;
            height: 30px;
            color: fade($color-master, 70%);
            font-family: 'Montserrat';
            text-transform: uppercase;
            font-size: 10.8px;
            padding-left: 13px;
            padding-top: 6px;
            letter-spacing: 0.04em;
            width: 100%;
        }
        
        .item {
            height: 117px;
            list-style: none;
            position: relative;
            border-bottom: 1px solid fade($color-master-light, 70%);
            .inline {
                width: 230px;

                & > * {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-family: arial;
                }
            }
            .recipients {
                letter-spacing: 0.01em;
            }
            .checkbox{
            	float: left;
            	clear: left;
                display: none;
            }
            .subject {
                font-family: 'Helvetica';
                font-size: 14.33px;
                color: $color-info;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                height: 36px;
                display: -webkit-box;
                white-space: normal;
                line-height: 18px;
            }
            .body {
                // color: #75828e;
                font-size: 12.6px;
                opacity: .52;
                height: 22px;
            }
            .datetime {
                color: $color-master-darkest;
                font-family: arial;
                font-size: 11.1px;
                position: absolute;
                right: 20px;
                top: 15px;
            }
        }
    }
    .email-opened {
    	margin-left: 610px;
        position: relative;
        overflow: auto;
        height: 100%;
        .no-email{
           bottom: 0;
            left: 0;
            margin-top: -34px;
            opacity: 0.5;
            position: absolute;
            right: 0;
            text-align: center;
            top: 50%;
        }
    	.actions{
    		height: 50px;
    		display: none;
    		float: left;
    		li{
    			display: inline-block;
    			list-style: none;
    			position: relative;
    			&:last-child:after{
    				display: none;
    			}
    			&:after{
    				content: "";
				    height: 14px;
				    position: absolute;
				    right: -4px;
				    top: 18px;
				    width: 1px;
    				background: rgba(0,0,0,.07);
    			}
    			a{
    				font-size: 13.1px;
    				color: $color-master;
    				font-weight: 600;
    				padding: 0 13px;
    				line-height: 50px;
                    white-space: nowrap;
    			}
    		}
    	}
    	.email-content-wrapper{
    		background: #fff;
    		height: 100%;
            display: none;
            width: auto;
            overflow: auto;
            
            .actions-wrapper{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 50px;
                z-index: 998;
            }
    		.email-content{
    			margin:0 auto;
    			width: 600px;
    			display: block;
                padding-top: 62px;
                padding-bottom: 70px;
                padding-left: 20px;
            padding-right: 20px;
    			.email-content-header{
    				.sender{
	    				.name{
	    					font-size: 15px;
	    					color: $color-info;
	    				}
	    				.datetime{
	    					color: $color-master;
	    					opacity: .45;
	    					font-family: arial;
	    				}
	    			}
	    			.subject{
	    				font-family: arial;
	    				color: $color-info;
	    				font-size:15.2px;
	    				line-height: 17px;
	    			}
                    .fromto{
                        .btn-xs{
                            border-radius: 13px;
                        }
                    }
    			}
    			.email-content-body p{
    				line-height: 23px;
    				color: $body-color;
                    letter-spacing: 0.001em;
    			}
                .editor-wrapper{
                    border: 1px solid rgba(0,0,0,.05);
                    .wysihtml5-sandbox{
                        max-height: 150px;
                        min-height: 130px !important;
                        width: 100% !important;
                    }
                }
    			
    		}
    	}

    }

    .compose-wrapper{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
        background: $color-white;
        border-top: 1px solid $color-master-lighter;
        z-index: 101;
        .compose-email{
            font-size: 24px;
        }
    }
}

.header-wrapper-email{
    font-size: 14.92px;
    .dropdown > .btn{
        color:$color-complete;
    }
    .btn:hover{
        text-decoration: none;
    }
}

/* Landscape view of all tablet devices */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){

.email-wrapper .email-sidebar{
            float: none;
            height: auto;
            left: 50%;
            margin-left: -155px;
            padding: 20px;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 9999;
            display: none;
            border-radius: 10px;
            .btn-compose{
                display: none;
            }
        }

        .email-wrapper .email-opened{
    margin-left: 0;
}

     .toggle-email-sidebar{
    
            font-size: 18px;

            display: block;

    font-size: 18px;
    left: 50%;
    margin-left: -36px;
    position: absolute;

            & ~ .brand{
                display: none !important;
            }
        }

}




/*** General tablets and phones ***/
@media (max-width: 979px) {

.email-wrapper .email-sidebar{
            float: none;
            height: auto;
            left: 50%;
            margin-left: -125px;
            padding: 20px;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 9999;
            display: none;
            border-radius: 10px;
            .btn-compose{
                display: none;
            }
        }

.email-wrapper{
        // position: absolute;
        // left: 0;
        // top: 0;
        // bottom: 0;
        // right: 0;
        // overflow: hidden;
        
        .email-list{
            width: 100%;
            height: auto;
            bottom: 50px;
           left: 0;
           top: 0;
             position: absolute;
            z-index: 2000;
            float: none;
            .item{
                padding: 8px;
                .inline{
                    margin-left: 5px;
                    width: 188px;
                }
            }
        }
        
        .email-opened{
            margin-left: 0;
            width: 100%;
          //   height: auto;
          // bottom: 50px;
          //  left: 0;
          //  top: 0;
          //    position: absolute;
          //    overflow: hidden;

            .email-content-wrapper{
                overflow: auto;
                padding: 0;
                height: calc(~'100% - 50px');
                .email-content{
                    width: 90%;
                }
            }
        }
        .compose-wrapper {
            display: block !important;
            .btn-compose{
                display: block !important;
            }
        }
    } 

         .toggle-email-sidebar{
          
            font-size: 18px;
            position: static;
            display: block;
            & ~ .brand{
                display: none !important;
            }
        }


}

@media (max-width: 767px) {
 .email-wrapper{
        height: 100%;
        // .email-sidebar{
        //     float: none;
        //     height: auto;
        //     left: 50%;
        //     margin-left: -125px;
        //     padding: 20px;
        //     position: absolute;
        //     right: 0;
        //     top: 80px;
        //     z-index: 102;
        //     display: none;
        //     border-radius: 10px;
        // }
        .email-opened{
            margin-left: 0;
        }
    } 

    
}