body{
    background-color: #f4f4f4;
}

h4{
    font-size: x-large !important;
}

nav ul a:hover{
    text-decoration: none;
    color:#bc57a1 !important;
}
nav ul a {
    color: #6e7dbd !important; 
}
nav .sidenav-trigger i{
    color: #6e7dbd !important; 
}

.thermometer{
    display: inline-flex;
    height: 10px;
    width: 100%;
    /* background-color: white; */
}
.thermometer > li{
    width: 25%;
    height: 10px;
    padding: 0 4px;
    margin: 0 4px;
}
.thermometer > li .active{
    height: 14px;
    margin-top: -3px
}
.rating_a{
    background-color: #ffe7e6;
}
.rating_b{
    background-color: #fff4e7;
}
.rating_c{
    background-color: #fffde5;
}
.rating_d{
    background-color: #dff4e3;
}
.rating_a.active{
    background-color: red;
}
.rating_b.active{
    background-color: orange;
}
.rating_c.active{
    background-color: yellow;
}
.rating_d.active{
    background-color: green;
}

.input-fields {
    margin-bottom: 0.5rem !important;
    margin-top: 0.7rem !important;
}

.gr-movil{
    background-image: url('../img/grmenumob.png');
    background-size: 80%;
    background-color: #000000;
    background-repeat: no-repeat;
    background-position-x: 5vw;
    background-position-y: 2vh;
}
.gr-user{
    padding-top: 8vh !important;
}

img {
    vertical-align: top !important;
    border-style: none;
}
.cave{
    background-image: url(../img/geometric-cave.png);
    background-size: 86%;
    background-color: #000000;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
}

.clientes-btn{
    height: 9vh;
    margin-left:5px;
    width:19vw;
}
.modal2 {
    left: 0;
    right: 0;
    background-color: #f4f4f4;
    padding: 0;
    height: 95% !important;
    max-height: 95% !important;
    top: 3% !important;
    will-change: top, opacity;
    z-index: 100;
  }
   
.modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #a5a5a5;
    padding: 4px 6px;
    height: 60px;
    width: 100%;
    text-align: right;
  }

.modal h5{
    text-align: center;
    }

.helper-text{
    display: none !important;
}

.tumbnail{
    width: 70px;
    max-height: 70px;
    overflow-y: hidden;
}
.perfile{
    width: 200px;
    max-height: 200px;
    overflow-y: hidden;
}

input[type="file"]#myImage, input[type="file"]#myImage2{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
label[for="myImage"], label[for="myImage2"] {
    font-size: 14px;
    color: #fff;
    background-color: #01579b;
    display: inline-block;
    transition: all .5s;
    cursor: pointer;
    padding: 7px 29px !important;
    text-transform: uppercase;
    width: fit-content;
    text-align: center;
    margin-right: 2vw;
    box-shadow: 0px 2px 6px -1px #8f8f8f;
    border-radius: 3px;
    line-height: 3vh;
}
/* Sugestions */
.selecter{
    width: auto;
}
/* .selecter >div{
    width: 40%;
} */
/* .selecter div{
    height: fit-content;
} */
.capitalize{
    text-transform: capitalize;
}
.lvl100{
    z-index: 100;
}
.lvl110{
    z-index: 110;
}

.grupe{
    display: block;
}

.grupe > input{
    width: 40% !important;
}
.movil-only{
    display: none !important;
}
.pc-only{
    display: inherit !important;
}
.pc-only-table-cell{
    display: table-cell !important;
}

.informative > label{
    width: 100% !important;
    color: black !important;
    font-size: 1rem !important;
}

.bigddown{
    width: 265px !important;
}

.dataOnly:hover{
    background-color: white !important;
    cursor: default !important;
}
.card{
    margin-top: 15vh !important;
}
.userinfo{
    margin-top: 5px;
    margin-left: 13px;
    color: #6e7dbd;
}
.userinfo:hover{
    color: rgba(188,87,161,1);
    cursor: pointer;
}

.backinblack{
    background-color: #000000 !important;
    height: 120vh;
    min-height: 120vh;
}

/*CHECKBOXES*/
/* The container */
.attrWrapper{
    color:red;
}
.attrList{
    margin-left: 15px;
}
.attrLabel{
    width: 12%;
    margin-right: 10px;
}

.chContainer {
    width: 15%;
    /* display: block !important; */
    margin-right:  5%;
    position: relative !important;
    padding-left: 35px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    /* font-size: 22px !important; */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }

  .chContainer_xl {
    width: 100%;
  }
  
  /* Hide the browser's default checkbox */
  .chContainer input {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
  }
  .chContainer > [type="checkbox"]+span:not(.lever):before{
      border: none;
  }
  .chContainer > [type="checkbox"]:checked+span:not(.lever):before{
      border: none !important;
  }
  .chContainer > [type="checkbox"]+span:not(.lever){
      padding: 0;
  }
  /* Create a custom checkbox */
  .checkmark {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 28px !important;
    width: 28px !important;
    background-color: #eee !important;
  }
  
  /* On mouse-over, add a grey background color */
  .chContainer:hover input ~ .checkmark {
    background-color: #ccc !important;
  }
  
  /* When the checkbox is checked, add a blue background */
  .chContainer input:checked ~ .checkmark {
    background-color: rgb(0, 150, 45) !important;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
  }
  
  /* Show the checkmark when checked */
  .chContainer input:checked ~ .checkmark:after {
    display: block !important;
  }
  
  /* Style the checkmark/indicator */
  .chContainer .checkmark:after {
    left: 8px !important;
    top: 0px !important;
    width: 11px !important;
    height: 18px !important;
    border: solid white !important;
    border-width: 0 3px 3px 0 !important;
    -webkit-transform: rotate(45deg) !important;
    -ms-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
  }
/*CHECKBOXES*/

@media (max-width: 470px) {
    .card{
        margin-top: 0 !important;
    }
.clientes-btn{
    height: 11vh !important;
    /* margin-left:5px; */
    width:95%;
}
    .pc-only-table-cell{
        display: none !important;
    }
    .movil-only{
        display: inherit !important;
    }
    .pc-only{
        display: none !important;
    }
    .modal{
        top:2% !important;
        width: 95% !important;  
    }
    .selecter >div{
        width: 100%;
    }
    .grupe > input{
        width: 100% !important;
    }
    .tumbnail{
        width: 60px;
    }
    td, th {
        padding: 5px 5px !important;
        font-size: 0.8rem;
    }
  }

  .gr_pattern{
      background-image: url('../img/gr_pattern.png');
      /* background-size: c */
  }
  .uploading{
      width: 94%;
      position: absolute;
      top:17%;
      z-index: 100;
  }

  .nmms .selecter{
      z-index: 3;
  }

  .light-goldeneye{
    background: rgba(188,87,161,1);
    background: -moz-linear-gradient(-45deg, rgba(188,87,161,1) 0%, rgba(110,124,189,1) 100%) !important;
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(188,87,161,1)), color-stop(100%, rgba(110,124,189,1))) !important;
    background: -webkit-linear-gradient(-45deg, rgba(188,87,161,1) 0%, rgba(110,124,189,1) 100%) !important;
    background: -o-linear-gradient(-45deg, rgba(188,87,161,1) 0%, rgba(110,124,189,1) 100%) !important;
    background: -ms-linear-gradient(-45deg, rgba(188,87,161,1) 0%, rgba(110,124,189,1) 100%) !important;
    background: linear-gradient(135deg, rgba(188,87,161,1) 0%, rgba(110,124,189,1) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc57a1', endColorstr='#6e7cbd', GradientType=1 );
    color:white !important;
  }

  .dark-goldeneye{
    background: rgba(0,0,0,1) !important;
    background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(22,22,22,1) 100%) !important;
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(22,22,22,1))) !important;
    background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(22,22,22,1) 100%) !important;
    background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(22,22,22,1) 100%) !important;
    background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(22,22,22,1) 100%) !important;
    background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(22,22,22,1) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#161616', GradientType=1 );
  }

  .txtGreen{
      color:green;
      font-size: x-large;
      font-weight: 700;
  }
  .txtBlue{
      color:#01579b; 
  }
  .txtBlack{
      color:black;
      font-size: large;
  }