.whitspce-nowp{
  white-space:nowrap;
}

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.line-separator{
    background:black;

    padding-left:5;
    padding-right:5;
    margin-right:5px;
    margin-left:5px;
}


.button{

font: 400 15px Arial;    
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}

.buttonred{
font: 400 15px Arial;    
  background:#ff5050;
  color:#fff;
  border:none;
  position:relative;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}

.buttonblue{
font: 400 15px Arial;    
  background:#5cb6ff;
  color:#fff;
  border:none;
  position:relative;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}

.myLabel {
  text-align:center;
  padding:10px;
}

.desc{
 
 margin: auto;
  width: 50%;
  text-align: center;
}
.maDiv {
 padding-top:10;
  margin:0 auto;max-width:50%;
    text-align:center;
}
.maDiv2 {
 padding-top:10;
  margin:0 auto;max-width:100%;
    text-align:center;
}
.maDivjexcel {
 
 padding:30;
  margin:0 auto;max-width:100%;
    text-align:center;
}

.jexcel{
overflow:scroll;max-width:100%;height:500px;
}
@media screen and (max-width: 800px) {
  
  
.whitspce-nowp{
  white-space:normal;
}

  .desc{
 padding-top:10px;
     margin-top:10px;
    width:100%;
}

.jexcel{
overflow:scroll;
max-width:100%;
height:200px;
}
.form-group{
     margin :0;
    width:100%;
    display: block;
    text-align: left;

  }  
  
   .file-upload {
     margin :0;
    width:100%;
    display: block;
    text-align: left;

  }  
  .button {
    width:100%;
    margin-bottom:15px;
    display: block;
    text-align: left;
  }
    .buttonred {
    width:100%;
    margin-bottom:15px;
    display: block;
    text-align: left;
  }
   .buttonblue {
    width:100%;
    margin-bottom:15px;
    display: block;
    text-align: left;
  }



.exception{

}
  
.line-separator{
    background:black;
    margin:0;
    padding-top:15px;
    padding-bottom:5px;
    padding-left:50%;
    padding-right:50%;
 
}

  .titrebutton { 
      font-size:50px;
  }
  
.myLabel {
  text-align:left;
}

  .maDiv {
    max-width: 100%;
  }
.maDivjexcel {
  padding:0;
 max-width: 100%;
}
  .temp {
    width:100%;
  }


}
*{margin:0; padding:0}
label{
    padding: 20px ;
    display: inline-block;
    font: 400 15px Arial;    
 }


.button:hover{
  background:#fff;
  color:#1AAB8A;
}
.button:before,.button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
.button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.button:hover:before,.button:hover:after{
  width:100%;
  transition:800ms ease all;
}

.buttonred:hover{
  background:#fff;
  color:#ff5050;
}
.buttonred:before,.buttonred:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #ff5050;
  transition:400ms ease all;
}
.buttonred:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.buttonred:hover:before,.buttonred:hover:after{
  width:100%;
  transition:800ms ease all;
}



.buttonblue:hover{
  background:#fff;
  color:#5cb6ff;
}
.buttonblue:before,.buttonblue:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #5cb6ff;
  transition:400ms ease all;
}
.buttonblue:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.buttonblue:hover:before,.buttonblue:hover:after{
  width:100%;
  transition:800ms ease all;
}


form{
  margin-bottom: 0em;
}

.container{
  margin:0 auto;
  max-width: 600px;
  overflow:hidden;
  position: relative;
  height: 100px;    
}


[id^=myBar] {
  width: 150px;
  height: 50px;
  position:absolute;
  bottom : 0;
  text-align: center;
  color: white;
}

.help {
  overflow-x: auto;

}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

h3, p {
  text-align: center;
}


.file-upload .form-control {
  height: 110px;
  outline: 1px dashed #ccc;
  outline-offset: -15px;
  background-color: #eee;
}
.file-upload .form-control:before {
  content: "Input file (.tsv, .xlsx, .ods)";
  font-size: 1.5em;
  left: 0;
  right: 0;
  display: block;
  margin: 20px auto;
  text-align: center;
}
.file-upload .form-control:after {
  content: attr(data-message);
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  display: block;
}
.file-upload .form-control input[type="file"] {
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

body.dragged:after {
  opacity: 1;
  visibility: visible;
}