@charset "UTF-8";

#MNBtnGroup{
	background : #ffffff;
	width : 100%;
}
  .dragAndDropDiv {
      border: 2px dashed #92AAB0;
      width: 1%;
      height: 100px;
      color: #92AAB0;
      text-align: center;
      vertical-align: middle;
      padding: 10px 0px 10px 10px;
      font-size:200%;
      display: table-cell;
  }
  .progressBar {
      width: 200px;
      height: 22px;
      border: 1px solid #ddd;
      border-radius: 5px; 
      overflow: hidden;
      display:inline-block;
      margin:0px 10px 5px 5px;
      vertical-align:top;
  }
   
  .progressBar div {
      height: 100%;
      color: #fff;
      text-align: right;
      line-height: 22px; /* same as #progressBar height if we want text middle aligned */
      width: 0;
      background-color: #0ba1b5; border-radius: 3px; 
  }
  .statusbar{
      border-top:1px solid #A9CCD1;
      min-height:25px;
      width:99%;
      padding:10px 10px 0px 10px;
      vertical-align:top;
  }
  .statusbar:nth-child(odd){
      background:#EBEFF0;
  }
  .filename{
      display:inline-block;
      vertical-align:top;
      color : black;
      width:250px;
  }
  .filesize{
      display:inline-block;
      vertical-align:top;
      color:#30693D;
      width:100px;
      margin-left:10px;
      margin-right:5px;
  }

  .delBtn{
  	vertical-align: middle;
    margin: 0px 5px;
  }
  
  .scroller{
  	 height: 80px;
 	 overflow-y: auto;
  }
  
  .sidepanel {
  position:absolute;
  right : 0px;
  height:100%;
  background-color:white;
  width:20%;
  margin-left:0;
  z-index:3;
  font-size:14px;
  line-height:1.5em;
  color:black;
  font-family:Helvetica;
  text-align:left;
  border-left-style: solid;
  border-width: 2px;
  border-left-color: rgba(98, 142, 193, 0.8);
  overflow-y: auto;
}
.panelShadow {
  content:'';
  position:absolute;
  height:100%;
  width:10px;
  top:0;
  right: 0;
  background-image:linear-gradient(to right,#fff,rgba(0,0,0,0.3) 10px);
  z-index:1;
}

.sidepanel span {
  position:relative;
  display:block;
  width:100%;
  min-width:100px;  
  padding: 2px 5px;
  background-color:white;
}

.circle {
  position:absolute;
  width:30px;
  height:60px;
  border-radius:20% 0 0 20%;
  font-size:16px;
  background-color:#628ec1;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  top:calc(50% - 22px);
  right: 20%;
  z-index:5;
  cursor:pointer;
}
.fa-chevron-left {
  margin-right:5px;
  
}
.fa-chevron-right {
  margin-left:5px;
}
.hide {
  display:none;
}

.col2 {
	margin-bottom: 15px;
}
.col4 {
	margin-bottom: 15px;
}

span.email-ids {
    float: left;
    /* padding: 4px; */
    border: 1px solid #ccc;
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    background: #f5f5f5;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 5px;
}
span.cancel-email {
    border: 1px solid #ccc;
    width: 18px;
    display: block;
    float: right;
    text-align: center;
    margin-left: 20px;
    border-radius: 49%;
    height: 18px;
    line-height: 15px;
    margin-top: 1px;    cursor: pointer;
}

.email-id-row{
	min-height: 40px;
    padding-left: 16px;
    border: 1px solid #e4e4e4;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 16px;
    /* line-height: 20px; */
    color: #939393;
}
.email-id-row:hover{
	cursor : text;
}

.email-id-row:after{
	content:""; 
	clear:both; 
	display:block;
}

.email-id-row .enter-mail-id{
	border: 0px; 
	outline:0px;
	height: 39px;
    padding-left: 0px;
    font-size: 16px;
    line-height: 20px;
    background-color: transparent; 
    float : left;
}