/* Stylesheet content from css/mailbox.css in folder common */

/* Stylesheet content from css/mailbox.css in folder common */
h4{
	font-size:12px !important;
}
.btn-reply {
    border-color: #053c6d;
    padding-left: 30px;
    background: #053c6d url(../images/spp_canada/reply.png) no-repeat 12px center;
}
.btn-reply:hover, .btn-reply:focus, .btn-reply:active:focus {
	background: #053c6d url(../images/spp_canada/reply.png) no-repeat 12px center;
}
.btn-zip {
	color: #053c6d;
	text-decoration: underline;
	background: #fff url(../images/spp_canada/zip.png) no-repeat left center;
    padding-left: 30px;
}
.btn-zip:hover, .btn-zip:focus, .btn-zip:active:focus {
	background: #fff url(../images/spp_canada/zip.png) no-repeat left center;
}

.panel-group .panel+.panel {
    margin-top: 20px !important; 
}

 .panel-group p{
	color:black;
}
.rt180{
    transform: rotate(180deg);
}

.circle {    
	height: 20px;
    width: 20px;
     color: white; 
    border-radius: 20px;
  padding:4px;
    background-color: #e77817;
        margin-left: 10px;
    
}

.panel-group{
	margin:0 30px;
	margin-bottom: 20px;
}

.panel-body{
	color: #666666 !important;
	font-size:13px !important;
}

.panel{
	    border-radius: 6px !important;
    background-color: #ffffff !important;
    border: solid 1px #ececec !important;
    
}

.panel-heading{
	 background-color: #ffffff !important;
	     border-bottom: 1px solid #e0e0e0 !important;
}

.mail-head{
	color:black;
	margin-bottom: 20px;
	background: #fff;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    height: 47px;
}
.mail-head ul {
	
}
.mail-head ul li {
	display: inline-block;
	position: relative;
	margin-top: 15px;
}
.mail-head ul li.sent-icon {
}
.mail-head ul li:first-child {
	padding-left: 30px;
}
.mail-head ul li:last-child {
	padding-left: 30px;
	padding-right: 30px;
}
.mail-head ul li a {
	display: block;
	padding-left: 30px;
	color: #333;
	position: relative;
    /*z-index: 999;*/
}
.mail-head ul li.active {
    padding-bottom: 6px;
    border-bottom: 3px solid #f5821f;
}
.mail-head ul li.active a {
	color: #f5821f;
}
.mail-head ul li.inbox-icon a {
	padding-right: 20px;
    border-right: 1px solid #e5e5e5;
}
.mail-head ul li.sent-icon a {
}
.mail-head ul li:before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background: red;
	position: absolute;
	left: 0;
	top: 0;
}
.mail-head ul li.inbox-icon:before {
	background: url(../images/spp_canada/inbox@2xbl.png) no-repeat center;
	background-size: 100%;
	left: 30px;
}
.mail-head ul li.sent-icon:before {
	background: url(../images/spp_canada/sent@2xbl.png) no-repeat center;
	background-size: 100%;
	left: 30px;
}

.mail-head ul li.inbox-icon.active:before {
	background: url(../images/spp_canada/inbox@3xorg.png) no-repeat center;
	background-size: 100%;
	left: 30px;
}
.mail-head ul li.sent-icon.active:before {
	background: url(../images/spp_canada/sent@2xorg.png) no-repeat center;
	background-size: 100%;
	left: 30px;
}

.color-black{color:#000;}

.left-link{
	width:70%;
	display:inline-block;
	float: left;
}
.right-link {
    position: absolute;
    right: 30px;
    top: 7px;
}
.mail-body {
	height:100%;
	overflow: scroll;
	width:100%;
}
.mail-body .panel-title {
	height: 30px;
    line-height: 30px;
}
.mail-body .panel-title.unread {
	font-weight: bold;
}
.mail-body .panel-title.read {
	font-weight: normal;
}
.mail-body .panel-title span.left {
	display: inline-block;
	font-size: 16px;
	color: #053c6d;
	margin-right: 35px;
}
.mail-body .panel-title span.left.attachment {
	padding-right: 22px;
	background: url(../images/attachment.png) no-repeat right center;
	background-size: 18px;
	
}
.mail-body .panel-title a {
    display: inline-block;
    float: right;
}
.mail-body .panel-title a.collapsed span.circle {
	background-color: #053c6d;
}

.inbox{
    width: 24%;
    padding: 5px 0 7px 23px;
    border-right: 1px solid gray;
    display: inline-block;
    text-align:center;
   
}

/* .read-mails{background-color:#fff !important;}
.unread{background-color:#ccc !important;} */

.inbox img{
    width: 35%;
    min-width: 35px;
}

.sent img{
	    width: 29%;
    min-width: 35px;
}
    
.inbox .mail-length{
	font-weight:normal;
	font-size:12px;
	color:#666666;
}

.sent{
	display:inline-block;
	width:24%;
	text-align:center;
	 padding: 5px 0 7px 23px;
}

.inbox span{
	background:url('images/address.png');
}

.right-link button{
	background-color:#e77817;
	border-color:#e77817;
}

img{
	padding-right:10px;
}

.panel-heading > .title{
	color:#053c6d;
	/* font-weight:bold; */
	
}
.panel-heading > .subject{
	color:#333333;
	/* font-weight:bold; */
}
.panel-heading > .time{
	color:#333333;
	/* font-weight:bold; */
	text-align:right;
	    margin-right: 40px;
}
.panel-group .reply{
	float:right;
	background-color: #053c6d !important;
}

.mail-child-form-cls {
    height: calc(100% - 67px);
    overflow-y: scroll;
}
	
.active-box{
	  border-bottom: 3px solid #e77817;
	   color:#e77817;
	   font-weight:bold;
	   
}
.inactive-box{
	border-bottom: none;
}

.mail-bottom{
	    padding-top: 50px;
}

.demo-popup{
	color:#fafafa;;
}

.modal-header{
	color:white;
	text-align:center;
	background-color:#e77817;
	    border-top-left-radius: 6px;
	        border-top-right-radius: 6px;
}

.modal-footer > .cancel{
	background-color: #053c6d;
}

.modal-footer > .send{
	background-color: #e77817;
}
 
.modal-body input{
	width:100%;
	min-height:40px;
	padding:5px;
}

.modal-body textarea{
	width:100%;
	padding:6px;
}

.modal-footer{
	border-top:none !important;
	text-align:center !important;
}



.modal-body label{
	font-weight:normal;
}

.modal-body{
	float:left;
	width:100%;
}

.fnt-bold{font-weight:bold !important;}
.fnt-nrml{font-weight:normal !important;}
.attach{position: absolute;top: 5px;left: 45%;}
.img15{height:15px;width:auto;}
.fltrgt{float:right;}
/*----- CSS for mobiles ------*/

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
 
  
  
  .left-link{
  width:100%;
  }
  .inbox{
  width:49%;
  }
  .sent{
  width:49%;
  }
  
  .panel-body{
      font-size: 10px !important;
  }
  
  .panel-title{
      font-size: 11px !important;
  }
  
  .mail-bottom{
  padding-top:12px;
  }
  
  .new-mail-icon{
    width: 60px;
    height: 60px;
    background-color: #e77817;
    border-radius: 30px;
    position: fixed;
    bottom: 12px;
    right: 20px;
  }
  
  .new-mail-icon img{
  margin:16px 0 0 16px;
  }
  
  .panel-title{
  color:#666666 !important;
  }
  
}

.mail-body .collapse {
	display: block;
    height: 55px !important;
}
.mail-body .collapse.in {
	height: auto !important;
}
.mail-body .collapsing {
	height: 55px !important;
	-webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: inherit;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: height,visibility;
    -o-transition-property: height,visibility;
    transition-property: height,visibility;
}
.mail-body .panel-body {
	display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    height: 55px;
    -webkit-box-orient: vertical;
}
.mail-body .collapse.in .panel-body {
	display: block;
	height: auto;
}

.mail-body .collapse {
	display: block;
    /* height: 80px !important; */
}
.mail-body .panel-body{
	/* height:74px; */
}


/************** Template Css Starts ***************/
.mailMain .secureList .main-order-list{list-style-type:decimal;font-size: 13px;padding-left: 15px;}
.mailMain .secureList .sub-order-list{list-style-type: lower-alpha;padding-left: 18px;}
.mailMain .secureList h5{padding-bottom:5px;font-size:13px !important;}
.mailMain .secureList .main-order-list li{padding:5px}
.mailMain .secureList .noteDiv{font-weight: bold;color: #000;font-style: italic;}
.mailMain .panel-body .secureList span:nth-child(2){font-size: 13px;top: 0;}
.mailMain .secureList .acNoFund li{list-style-type:square;}
.mailMain .secureList .acNoFund {font-size: 13px;padding-left: 20px;}
.mailMain .secureList .table{font-size:13px;}
.mailMain .secureList .table td {width: 0px;}
.mailMain .secureList .transferDetails{width: 100%;background: #053c6d;color: #fff;font-size: 15px;padding: 5px;}
.mailMain .secureList .printBorder{width: 100%;border: 1px solid #ccc;margin-top:15px;padding:15px;}
.mailMain .secureList .printbtn{background: #97291e;color: #fff;text-decoration: underline;width: 10%;}
.mailMain .secureList.setborderDetails{
	border: 1px solid;
}
.mailMain .secureList.setpaddingDetails{
	padding: 0px 18px;
}
.mailMain .secureList.fetchColorDetails{
	color: #ea8f3e;
	font-size: 15px;
}
.mailMain .secureList.setborderhrtag{
	border-block-end: 1px solid;
}
.setborderDetails{
	border: 1px solid;
}
.setpaddingDetails{
	padding: 0px 18px;
}
.fetchColorDetails{
	color: #ea8f3e;
	font-size: 15px;
}
.setborderhrtag{
	border-block-end: 1px solid;
}

.mailMain .bkgroundBlue{background: #053c6d;
    color: white;
    margin-top: 10px;
    width: 100%;
    padding: 5px;
    }
.depositTdWidth{width:150px;text-align:right;}   
.depositTdWidth50per{width:50%;}    
    
@media screen and (min-width: 993px){
	.modal-dialog{
	    width: 60% !important;
    margin: 100px auto !important;
    float: none !important;
	}
}
    
    
/************** Template Css Ends ****************/



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

.dashBoard_Main{
	position: relative;
    width: 100%;
}
.modal-dialog{
	    width: 75% !important;
	    margin: 100px auto !important;
	    float: none !important;
}
.float{
	float: right;
}
.img-user{
	
}
.img15{
	height: 16px;
	width: auto;
}
.navigation{
	display:flex;
	justify-content: space-between;
	align-items:center;
	position: relative;
}
.hamburger, .toggle-menu{
	display:block;
}
.menu{
	display: flex;
	justify-content:start;
	flex-direction:column;
	align-items:left;
	position:fixed;
	top: 60px;
	left:0;
	width:50%;
	height:100%;
	/* padding-top: 80px; */
	z-index: 02;
	background-color: rgba(245,130,31,1.55);
}
.menu li{
	list-style-type:none;
	padding:15%
}
.mail-body .panel-title {
	height: 85px;
	line-height: 30px;
}
.mobblock{
	display:block;
}
.right-link {
    position: absolute;
   /* right: 3%;*/
    top: 7px;
}
}