@import "colors.css";
@import "icons.css";
/* Empty. Add your own CSS if you like */
.button.button-orange {
  border-color: #FD7E2C;
  background-color: #FD7E2C;
  color: #fff;
}
.height-100{
  height: 100%;
}
.height-60{
  height: 60%;
}
.height-40{
  height: 40%;
}
.nf-align-c{
  margin: 0 auto !important;
}
.offline-icon.button-clear{
  color:#F72D4D !important;
}.online-icon.button-clear{
  color:#2646C7 !important;
}
.offline-icon .spinner{
  stroke: #F72D4D;
  fill: #F72D4D;
}.online-icon .spinner{
  stroke:#2646C7;
  fill: #2646C7;
}
.nf-center{
  text-align: center !important;
}
.modal-view .line_settings{
  min-height: 90%;
}
.confirm-message{font-weight: bold;padding: 0 10px;}
.button-round{
  border-radius: 20px;
  padding: 0 1rem;
  margin: 6px 6px 0 6px;
  min-height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-weight: bold;
}
.button-round.button-energized.active{
  background-color: #E69500;
  border-color: #E69500;
}
/*----------------------------------------
    Common overrides
------------------------------------------*/
.spinner{
  stroke:#fff;
  fill:#fff
}
.spinner.nf-text-cyan{
  stroke:#00BCD4;
  fill:#00BCD4;
}
@media (min-width: 680px) {
  .bar-header {
    height: 65px; /*just an example*/
  }

  .bar-header .title {
    line-height: 65px !important;
    font-weight: bold;
    font-size: 22px !important;
    min-height: 65px;
  }

  .has-header {
    top: 65px;
  }

  .bar.bar-header .button {
    min-height: 65px;
    min-width: 65px;
    max-width: 69px;
    max-height: 65px;
    width: 69px;
  }
  .bar-footer {
    height: 65px;
  }
  .bar-footer .button{
    width: auto;
    height: auto;
    min-height: 44px;
  }
  .has-footer{
    bottom: 65px;
  }
}

.bar .bar-header .button{
  max-width: none !important;
  width: auto !important;
  height:100% !important;
  max-height: 100% !important;
}

.bar-footer .button{
  width: auto;
  max-width: none;
}
.button.button-fab{
  height:80px;
  width: 80px;
}
#thing {
  position: relative;
  left: 50px;
  top: 50px;
  transition: left .5s cubic-bezier(.42,-0.3,.78,1.25), top .5s cubic-bezier(.42,-0.3,.78,1.25);
}
/*--- modal window size change ---*/
@media (min-width: 680px) {
  .modal-view {
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    min-height: 100%;
    width: 100%;
    height: 100%;
  }
}
.bar-calm:hover{
  background-color: #11c1f3;
}
.padding-10{
  padding: 10px;
}

.padding-20{
  padding: 20px;
}


.padding-top{
  padding-top: 70px !important;
}
/*----------------------------*
        pop(ng-view) animation
*----------------------------*/
.pop {
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}
.pop.ng-enter,
.pop > .ng-enter{
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  opacity: 0;
}
.pop.ng-enter-active,
.pop > .ng-enter-active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.pop.ng-leave,
.pop > .ng-leave {
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  opacity: 0;
}
/*----------------------------------------
    Login Page
------------------------------------------*/
#login-page{
  margin: 0 auto;
}
.nf-login-form {
  width: 280px;
}
.nf-login-form-text{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
}
.nf-profile-image-login{
  width: 47px;
  margin: 0 auto;
}

.nf-login-text {
  margin-top: -6px;
  margin-left: -6px !important;
}
.nf-h-center{
  margin: 0 auto;
}
.nf-login-error{
  color: #c7211a;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}
/*----------------------------------------
    Home Page
------------------------------------------*/
.home-page .scroll{
  height: 100% !important;
}
.btn-controls .card .item{
  text-align: center;
}
.btn-large .item{
  height: 100%;
}
.btn-medium .item{
  height: 100px;
}
.btn-medium .btn-label{
  margin: 0 0 9px;
  font-size: 1.5rem;
  clear: both;
  height: 40%;
}
.btn-medium .btn-value{
  margin: 0 0 9px;
  font-size: 4rem;
  height: 60%;
}
.btn-large .btn-label{
  margin: 0 0 9px;
  font-size: 3rem;
  clear: both;
  height: 40%;
}
.btn-large .btn-value{
  margin: 0 0 9px;
  font-size: 6rem;
  height: 60%;
}

/*----------------------------------------
    Defects category Page
------------------------------------------*/
.categorylist .item:first-child{
  border-top-width: 0;
}
.categorylist .item{
  border-color: #ddd;
  border-width: 1px 0;
  border-style: solid;
}
.categorylist .item:last-child{
  border-bottom-width: 0;
}

.animate-repeat {
  list-style:none;
  box-sizing:border-box;
}
.defect-list .item{
  border:1px solid #ddd;
}
.defect-list .item.active{
  border-color: #ccc;
  background-color: #D9D9D9;
}
.defect-list .item-icon-right .icon{
  font-size: 23px;
  color: #b1b1b1;
}
.defect-list .item-delete .button.icon{
  padding: 5px;
}
.valign-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.valign-wrapper .valign {
  display: block;
  text-align: center;
  width: 100%;
}
.empty-message{
  height: 300px;
  text-align: center;
  width: 100%;
}
.empty-message i{
  font-size: 50px;
  font-style: oblique;
  color: #11C1F3;
}

/*----------------------------------------
    Measles page
------------------------------------------*/
.position-bottom{
  position: absolute;
  top: auto;
  right:auto;
  bottom: 16px;
  left: 16px;
}
/*----------------------------------------
    Popup window formatting
------------------------------------------*/
.custom-popup.popup-container .popup .popup-body{
  min-height: 200px;
}.custom-popup.popup-container .popup{
   width: auto !important;
}
.popup{
  /*min-height: 300px;8*/
  width: auto !important;
}

/*----------------------------------------
    Form formattings
------------------------------------------*/
.item-input input{
  border-bottom: 1px solid #b8b8b8;
}
.nf-form .item .input-label{
  text-transform: uppercase;
  font-weight: bold;
}
.nf-form input{
  color: #7f7f7f;
}
.action-form .item{
  font-weight: bold;
}
.stat-number{
  font-size: 28px;
  color: #7f7f7f;
}

/*----------------------------------------
    Operations selection page
------------------------------------------*/
.operation-list .item{
  border:1px solid #ddd;
}
.operation-list .item.active{
  border-color: #ccc;
  background-color: #D9D9D9;
}

.operation-list .item-icon-right .icon{
  font-size: 23px;
  color: #b1b1b1;
  opacity: 0;
}
.operation-list .item-delete .button.icon{
  padding: 5px;
}
.operation-list .item-icon-right.active .icon{
  color: #4caf50;opacity: 1;
}

.pagenumber{
  font-size: 16px;
  font-weight: 600;
  line-height: 47px;
  display: inline-block;
}
.style-number{
  width: auto !important;
  max-width: 100% !important;
  font-weight: 600 !important;
}

.sizewise_event{
  margin-bottom: 15%;
  overflow-y: scroll;
}
/*----------------------------------------
    Operations and Issues selection page
------------------------------------------*/
.defects-done{
  position: absolute;
  right: 16px;
  bottom: 16px;
}
.defect-page .scroll{
  height: 100% !important;
}
.number{
  padding: 0 10px;
  font-size: 17px;
}
.button-wrapper{
  position: absolute;
  bottom: 4%;
  z-index: 100;
}
.button-set{
  margin: 0 auto;
}
.button-set .button.button:disabled{
  background: none;
}
.align-center{
  text-align: center;
}
.margin-top-20{
  margin-top:20px!important;
}
/*--------------------
*     login page
----------------------*/
.login-content *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login-content form{
  display: inline;
}
.login-content .scroll{height: 100%;}
.login-content {
  overflow: hidden;
  height: 100%;
}
ion-content.login-content {
  text-align: center;
}
ion-content.login-content:before {
  height: 50%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #00bcd4;
  content: "";
  z-index: 0;
}
ion-content.login-content:after {
  content: "";
  vertical-align: middle;
  display: inline-block;
  width: 1px;
  height: 100%;
}
.lc-block:not(.lcb-alt) {
  padding: 35px 55px;
}
.lc-block.toggled {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 10;
}
.lc-block {
  background: #fff;
  box-shadow: 0 1px 11px rgba(0,0,0,0.27);
  border-radius: 2px;
  width: 500px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.m-b-20 {
  margin-bottom: 20px!important;
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group:not(.input-group-lg):not(.input-group-sm) .input-group-addon:not(.last) {
  padding-right: 10px;
}
.input-group .input-group-addon {
  vertical-align: bottom;
  padding: 0;
  display: table-cell;
  width: 1%;
  white-space: nowrap;
}
.input-group-addon {
  padding: 6px 12px;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
}
.input-group-addon:first-child {
  border-right: 0;
}
.login-content i{font-size: 20px;}
.login-content p{color:#555;}
.input-group .fg-line {
  padding: 0 10px;
}
.fg-line:not(.form-group) {
  display: inline-block;
  width: 100%;
}
.fg-line {
  position: relative;
  vertical-align: top;
}
.fg-line .form-control {
  resize: none;
}
.form-control:not(.fc-alt) {
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid #e0e0e0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table-cell;
}
.lc-block:not(.lcb-alt) .btn-login {
  top: 50%;
  margin-top: -25px;
  right: -25px;
}
.btn-float:not(.m-btn) {
  position: absolute!important;
}
.btn:not(.btn-link) {
  box-shadow: 0 2px 5px rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12);
}
.btn:disabled{
  background-color: #DFDFDF;
  box-shadow: none;
  color: #9F9F9F;
}
.btn-float {
  color: #fff;
  background-color: #f44336;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 45px!important;
  border: none;
}


/*.list .item {*/
  /*width: auto !important;*/
/*}*/
