@media only screen and (min-width: 992px) {
  button.orange{
    width: 8rem;
  }
  .showPivoteLG{
    display: inline;
  }
  .showPivoteSM{
    display: none;
  }
  .borderLeftLG{
    border-left: 1px solid grey;
  }
  .borderRightLG{
    border-Right: 1px solid grey;
  }
  .borderTopLG{
    border-Top: 1px solid grey;
  }
  .borderBottomLG{
    border-Bottom: 1px solid grey;
  }
  .borderLG{
    border: 1px solid grey;
  }
  .marginLeftLG{
    margin-left: 1rem;
  }
  .marginRightLG{
    margin-right: 1rem;
  }
}
@media only screen and (max-width: 991px) {
  div.stencil > div.left-side{
    float: left;
    width: 60px;
    display: none;
  }
  button.orange{
    width: auto;
  }
  .showPivoteSM{
    display:inline;
  }
  .showPivoteLG{
    display:none;
  }
  .borderSM{
    border: 1px solid grey;
  }
  .borderLeftSM{
    border-left: 1px solid grey;
  }
  .borderRightSM{
    border-Right: 1px solid grey;
  }
  .borderTopSM{
    border-Top: 1px solid grey;
  }
  .borderBottomSM{
    border-Bottom: 1px solid grey;
  }
}
body{
  font-size:0.9rem !important;
}
/*Main*/
div#app > nav.navbar{
	margin-left:55px; 
	height: 55px; 
	background-color: #e3f2fd;
}
.home{
    height:55px; 
    width:55px; 
    background-color: #E0E6F8;
    background-image: url('/img/logoApp.jpg');
    background-size: 55px 55px;
    cursor: pointer;
    z-index: 10;
}
div.stencil > div.left-size{
  float: left;
  width: 60px;
}

div.stencil > div.right-side{
	overflow: hidde;
}

/*Section Bar*/

div.header
{
  height: 55px;
  width:100%;
}
div[name="route"]>a, div[name="route"]>span
{
    color:grey;
    font-size:1rem;
    margin: 13px 2px 0 0;
    text-decoration: none;
}
div[name="route"] a:hover
{
    text-decoration: underline;
}
div.rutBut {
  text-align: right;
  margin-top:5px;
}

div.rutBut button{
  width: auto;
  height: auto;
  border:none;
  color: #F7BE81;
}
div.rutBut button:hover{
  color: #FF8000;
}
div.rutBut button:disabled{
  color: #D8D8D8;
}

div.rutBut input{
  width: 10rem;
  height: auto;
  margin: 5px 0;
}

/*Grid*/


table.general_grid{
  font-size:12px;
}
table.general_grid > thead{
  background-color: #0080FF;
  color:#ffffff;
}
span.lineIcon{
  color: #F7BE81;
}
span.lineIcon:hover{
  color: #FF8000;
}


/*Others*/
div.divSign{
  background-color: #FF8000;
  width:inherit;
  height:inherit;
  padding: 15px;

}

div.divSign > div > span > i {
  color: #ffffff;
  font-size: 60px;
}

span.sideComment{
  color:white;
  font-weight: 600;
  font-size: 1.2rem;
}
button.orange{
  /*custom sizes*/
  background-color: #F7BE81;
  color: white;
}
button.orange:disabled, button.orange:disabled:hover{
  background-color: grey;
  cursor:default;
}

button.orange:hover{
  background-color: #FF8000;
  color: white;
}
.helpText{
  border-radius: 10px;
  margin-top:60px;
  background-color: white;
  color:#FF8000;
  padding: 10px;
}
.helpText > p.helpTitle{
  font-weight: bold;  
  margin-bottom: 10px;
}

/*Forms*/
div.input-group-prepend, span.input-group-text {
  width:40px
}
span.input-group-text > i {
  margin:0 auto
}
.validation-false > div.input-group-prepend > span
{
  border-top: red solid 1px;
  border-left: red solid 1px;
  border-bottom: red solid 1px;
}
.validation-false > select
{
  border-top: red solid 1px;
  border-bottom: red solid 1px;
}
.validation-false > input.form-control,
.validation-false > select
{
  border-top: red solid 1px;
  border-bottom: red solid 1px;
}
.validation-false > input.input-right,
.validation-false > select.input-right
{
  border-right: red solid 1px;

}
.validation-false > div.input-group-append > span{
  border-top: red solid 1px;
  border-right: red solid 1px;
  border-bottom: red solid 1px;
}
div.false-msg{
  margin-top:5px;
  color:red;
  font-size:0.8rem;
  width:100%;
}
.errorStyle{
  border-color: #FF0040;
}
.error_msg{
  margin-top: 10px;
  color: #FF0040;
}

/*transition default*/
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0
}