body{
  height:100%;
  position:relative;
  font-family:'Manrope', 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 193, 119, 0.22), transparent 40%),
    radial-gradient(circle at 90% 88%, rgba(255, 128, 57, 0.16), transparent 32%),
    #f7f9fc;
}

.main{
  padding-bottom:70px;
  margin-bottom:50px;
}

.margin-5vh{
    margin:5vh;
}

.center-content{
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-credits{
    font-size:0.5em;
    position:relative;
    top:3px;
}

.navbar-brand{
  margin:0;
  letter-spacing:0.3px;
}

.btn-transparent{
    background:none;
}

.logout{
    font-size:20px;
}

.logout:hover{
    color:#dae0e5 !important;
}

.text-small{
    font-size:0.8rem;
}

.text-big{
    font-size:1.2rem;
}

.no-padding{
    padding:0;
}

.no-padding-right{
    padding-right:0;
}

.no-margin-top{
    margin-top:0 !important;
}

.no-margin-bottom{
    margin-bottom:0 !important
}

.margin-bottom-10{
    margin-bottom:10px;
}

.margin-bottom-20{
    margin-bottom:20px;
}

.margin-bottom-30{
    margin-bottom:30px;
}

.margin-top-70{
    margin-top: 70px;
}

.margin-top-30{
    margin-top: 30px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-left-20{
  margin-left:20px;
}

.spinner{
  position: fixed; /* Sit on top of the page content */  
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.6); /* White background with opacity */
  z-index:1055;
  font-size:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center; 
  color:#fe7701;
}

.spinner-caption{
  margin-top:10px;
  font-weight:bold;
  color:black;
}

.btn.fab{
  position:fixed;
  bottom:30px;
  right:30px;
  height:50px;
  width:50px;
  border-radius:50%;
  font-size:24px;
  box-shadow: .1rem .4rem .3rem rgba(0,0,0,.075)!important;  
  z-index:3;
}
.module-image img{
    width:100%;
}

.zoom{
    -webkit-transition: transform 0.35s;    
    -moz-transition: transform 0.35s;    
    transition: transform 0.35s; 
}

.zoom:hover{
    -ms-transform: scale(1.5);    
    -moz-transform: scale(1.5);  
    -webkit-transform: scale(1.5);  
    -o-transform: scale(1.5);  
    transform: scale(1.5);    
    position:relative;      
    z-index:100;  
}

.fab.small{
  height:40px;
  width:40px;
  border-radius:50%;
  font-size:16px;
  box-shadow: .1rem .4rem .3rem rgba(0,0,0,.075)!important; 
}

.fab-group .fab.small{
  position:fixed;
  bottom:35px;
  right:100px; 
}

.header-with-add h4{
  display:inline;
  margin-right:10px;
}

.header-with-add .btn.fab{
  position:initial;
  margin-top:-10px;
  margin-right:10px;
  display:inline;
  height:37px;
  width:37px;
  font-size:16px;
}

.header-with-add .btn.fab i{
  position:relative;
  right:1px;
  top:0px;
}

.header-with-add .btn.fab.h-icon i{
  position:relative;
  right:3px;
  top:-1px;
}

.vectorial{
  font-size:small;
  max-width:100%;
  overflow-x:auto;
}

.vectorial table{
  border:1px solid #bbbbbb;
  border-bottom:none;
  border-right:none;
  border-spacing:0;
}

.vectorial table tr td{
  padding:0;
}

.vectorial-item{
  width:60px;
  height:40px;
  border:1px solid #bbbbbb;
  border-top:none;
  border-left:none;
  padding:3px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.vectorial-item:hover{
  cursor:pointer;
  background-color:#ff902e;
  color:white;
  font-weight:500;
}

.vectorial.dash_side .vectorial-item.status--1{
  pointer-events:none !important;
   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.no-border{
  border:none;
}

.status--1{
    background-color:#060606;
    color:#060606;
}

.status-1-alt{
  background-color:#30b7ff;
}

.status-1{
    background-color:#ffffff;
}

.status-2{
    background-color:#d2d2d2;
}

.status-3{
    background-color:#88b187;
}

.status-4{
    background-color:#9059d2;
}

.status-5{
    background-color:#d4a850;
}

.status-6{
    background-color:#f11616;
}

.repair{
  background-color:#fff000;
}

.replace{
  background-color:#f11616;
}

.truncate_left{
    overflow: hidden;
    width: 50px;
    direction: rtl; 
    white-space: nowrap;
    text-overflow: ellipsis;
}

.disabled{
  pointer-events:none;
}

.break_word{
  word-break: break-all;
}

.btn-card{
    margin:10px;
    width:100%;
    max-width:200px;
    cursor:pointer;
  border:1px solid #eef1f6;
    text-decoration:none !important;
    color:initial !important;
  box-shadow:0 10px 24px rgba(21, 31, 56, 0.08)!important;
  border-radius:12px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-card .card-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.btn-card i{
    color:#ff902e;
    font-size:36px;
    margin-bottom:10px;
}

.btn-card:hover {
  background-color:#ffffff;
  transform:translateY(-3px);
  box-shadow:0 16px 26px rgba(21, 31, 56, 0.12)!important;
}

.bigger_icon i{
  font-size:20px !important;
  margin-top:3px;
}

strong.disabled {
  color:#6c757d;
}

.legend-item{
    margin:7px 0;
    height:100%;
}

.legend-item-color{    
    width:30px !important;    
    height:30px;
    border:1px solid #f1f1f1;
    border-radius:2px;
    margin-right:5px;
    flex:none;
}

.legend-item-label{
    font-size:0.9em;
}

.small-legend{
  font-size:0.9em;
}

.small-legend h5{
  font-size:1.2em;
}

.small-legend .legend-item-color{    
    width:20px !important;    
    height:20px;   
}

.separator{
    position: relative;
    text-align: center;
}

.separator label{
    background-color:#fff;
    padding: 0 0.4em;
    position: relative;
}

.separator:before{
    content: '';
    border-style: solid;
    border-width: 0 0 1px 0;
    position: absolute;
    left: 0;
    top: 45%;
    width: 100%;
    border-color:#c2c2c2;
}

.small-icon-label i{
    font-size:8px;
    margin-right:5px;
    position:relative;
    bottom:1px;
    color:#b7b7b7;
}

.icon-label i{
    color:#ff902e;
    margin-right:7px;
}

.icon-label.grey i{
    color:#969696;
}

.icon-label a{
    color:initial;
}

.card-title.icon-label i{
    position:relative;
    top:1px;
}

.subtitled{
  margin-bottom:0;
}

.subtitle{
  font-size:1em;
  color:#9e9e9e;
  font-weight:400;
  text-align:center;
}

.top-back-button{
  position:absolute;
  z-index:999;
  top:100px;
}

.alert i{
  margin-right:5px;
}

@media (max-width: 768px) { 
  .navbar .btn{
    width:40px !important;
  }
}