@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* ! BASE */
:root {
  --white: #f1faee;
  --black: #111111;
  --ultralight: #E0E0E0;
  --light-grey: #c5c5c5;
  --mid-grey: #555555;
  --dark-grey: #264653;
  --bg: var(--light-grey);
  --txt: var(--black);
  --bg-side: var(--dark-grey);
  --txt-side: var(--white);
  --bg-side-active: var(--light-grey);
  --dark-opacity: 0;
  --light-opacity: 1;
}
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}


body.login{
    background-color: rgba(255, 255, 255, .45);
    background-image: url("https://picsum.photos/1920/1080?random=1");
    background-size: cover;
    backdrop-filter: blur(5px);
    color: #f1faee;
    font-family: 'Roboto', sans-serif;
    height: 100vh;

}

.drag-image {
  border: 1px dashed #fff;
  height: 300px;
  width: 350px;
  border-radius: 5px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.drag-image.active {
  border: 2px solid #fff
}

.drag-image .icon {
  font-size: 30px;
  color: #fff
}

.drag-image h6 {
  font-size: 20px;
  font-weight: 300;
  color: #fff
}

.drag-image span {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  margin: 10px 0 15px 0
}

.drag-image button {
  padding: 10px 25px;
  font-size: 14px;
  font-weight: 300;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s
}

.drag-image button:hover {
  background-color: #fff;
  color: red
}

.drag-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 5px
}
.profilebox{
  background-size: cover;
  height:50px;
  width:50px;
  }


.profile_img{
  height:50px;
  width:50px;
  border-radius: 50%; 
  border: 1px solid #192c33 ;
  object-fit: cover;
}
.user_img{
  height:150px;
  width:150px;
  border-radius: 50%; 
  border: 1px solid #192c33 ;
  object-fit: cover;
}

.grid-flex{
  justify-content: space-around;
  display: flex;
}


.hidden {
    display: none;
}

/* ! DATEPICKER */


#box_stats input[type=date]{
  width: 30%;
}
#box_stats .label-input{
  justify-content: space-around;
}

/* ! SIDEBAR */

.sidebar{
  width: 345px;
  position: fixed;
  height: 100%;
  background: var(--bg-side);
  left: 0;
  top: 0;
  color: var(--txt-side);
  z-index: 100;
  transition: width 300ms;
}


.sidebar-brand{
  height: 150px;
  padding: 1.8rem 0rem 1.8rem 2rem;
}
.imgmembers{
  width:150px;
}
/* .sidebar-menu{
  margin-top: 1rem;
} */

.sidebar-menu li{
  width: 100%;
  margin-bottom: 1rem;
  padding-left: 1rem;
}
.sidebar-menu a{
  padding-left: 1rem;
  display: block;
  color: var(--txt-side);
  font-size: 1rem;
}
.sidebar-menu li a:hover{
  opacity: 0.5;
}
.sidebar-menu i.active{
  color: var(--txt);
}

.sidebar-menu a.active{
  background: var(--bg);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--txt);
  border-radius: 5px 0px 0px 5px;
}

.sidebar-menu a span:first-child{
  font-size: 1.5rem;
  padding-right: 1rem;
}

.sidebar-footer--links{
    width: 50%;
    margin-bottom: 1.3rem;
    padding-left: 2rem;
}

.sidebar-footer{
  width: 100%;
  position: absolute;
  display: flex;
  bottom:0;
  align-items: center;
  justify-content: space-between;
}

.sidebar-footer a{
  color: var(--txt-side);
}

#nav-toggle:checked + .sidebar{
  width: 70px;
}
#nav-toggle:checked + .sidebar li a span:last-child,
#nav-toggle:checked + .sidebar button .hide {
  display: none;
}
#nav-toggle:checked ~ .main-content{
  margin-left: 70px;
}
#nav-toggle:checked ~ .main-content header{
  width: calc(100% - 70px);
  left: 69px;
}

.main-content{
  transition: margin-left 300ms;
  margin-left: 345px;
  color: var(--txt);
}


/* ! HEADER */

header{
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  align-items: center;
  box-shadow: 6px 1px 5px rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 345px;
  width: calc(100% - 345px);
  top: 0;
  z-index: 100;
  background: var(--bg-side);
  color: var(--txt-side);
  transition: left 300ms;
}

#nav-toggle {
  display: none;
}

header label span{
  font-size: 1.7rem;
  padding-right: 1rem;
}

.user-wrapper{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.2rem;
  width: 400px;
}

.user-wrapper span{
  padding: 1rem;
}

.nomeutente{
  line-height: 0.5rem;
}
.nomeutente p {
    font-size: 1rem;
    margin-left: 52px;
}
.nomeutente h5 {
  text-align: right;
  font-size: 1rem;
  margin-left: 52px;
}



/* ! MEDIA QUERY */

@media only screen and (max-width: 1200px){
  .sidebar{
    width: 70px;
  }
  .sidebar li a span:last-child{
    display: none;
  }
  .main-content{
    margin-left: 70px;
  }
  .main-content header{
    width: calc(100% - 70px);
    left: 69px;
  }

  .sidebar:hover{
    width: 345px;
  }
  .sidebar:hover li a span:last-child{
    display: inline;
  }

}

@media only screen and (max-width: 960px){
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 768px){
  .cards {
    grid-template-columns: 100%;
  }
  .recent-grid {
    grid-template-columns: 100%;
  }
  .sidebar {
    left: 100% !important;
  }
  header h2 label{
    display: inline-block;
    text-align: center;
    padding-right: 0rem;
    margin-right: 1rem;
  }

  header h2 {
    font-size: 1.1rem;
  }

  .main-content{
    width: 100%;
    margin-left: 0rem;
  }
  header{
    width: 100% !important;
    left: 0 !important;
  }

  #nav-toggle:checked + .sidebar{
    left: 0 !important;
    z-index: 100;
    width: 345px;
  }

  #nav-toggle:checked + .sidebar li a span:last-child{
    display: inline;
  }

  #nav-toggle:checked ~ .main-content{
    margin-left: 0rem !important;
  }

}

/* ! TABLE */

table {
  font-family: 'Roboto', sans-serif;
  border-collapse: collapse;
  width: 90%;
  margin-left: 40px;
}

td, th{
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
h4{
  text-align: center;
  padding: 10px;
}
table.stats{
  align-content:center;
  text-align: center;
}
.centertable {
  margin-left: auto;
  margin-right: auto;
}

/* ! BUTTONS */

/* Set a style for all buttons */
button {
  background-color: #457b9d;
  color: #f1faee;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 200px;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

button.logout{
  width: auto;
}
button.logout a{
  text-decoration: none;
}
button a{
  color: #f1faee;
}

/* ! Dropdown user */

button.dropbtn {
  cursor: pointer;
  background: transparent;
  padding: 16px 10px;
  width: 50px;
  height: 50px;
}

.dropbtn:focus {
  background-color: var(--bg-side);
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bg-side);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top:95px;
  right: 0px;
}
.dropdown-content a {
  color: var(--txt-side);
  padding: 1rem;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd; color: var(--txt);}
.dropdown-btn {
  padding-left: 33px;
  padding-top:3px;
  padding-bottom:6px;
  text-decoration: none;
  font-size: 1rem;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  
}

.dropdown-btn span:first-child{
  font-size: 1.5rem;
  padding-right: 1rem;
}

.dropdown-container {
  display: none;
  padding-left: 45px;
}

.dropa{
  padding:7px;
}
.dropa a.active{
  background: var(--bg);
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--txt);
  border-radius: 5px 0px 0px 5px;
}
.dropa:hover{
  opacity: 0.5;
}


.dropa span:first-child{
  font-size: 1.5rem;
  padding-right: 1rem;
}
.dropa li{
  width: 100%;
}
.dropa li a:hover{
  opacity: 0.5;
}
.dropa i.active{
  color: var(--txt);
}
.eofbox{
  margin-bottom: 2rem;
}

.show {display:block;}


/* ! LOGIN FORM */

/* Bordered form */
#login_form {
    border-radius: 5px;
    background: rgba(0, 0, 0, .55);
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0 !important;
    overflow: hidden;
}

#login_form a{
  color: var(--white);
}

.login_content{
  width: 400px;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50vh;
  margin-left: -200px;
  margin-top: -250px;
  overflow: hidden;
}

.label-input_login{
  justify-content: space-between;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 20px;
}



  /* Full-width inputs */
  input[type=mail],
  input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 5px;
  }

  .message_error{
    background: red;
    color: #f1faee;
    font-size: 20px;
    height: auto;
    padding: 10px;
    justify-content: center;
    display: flex;
  }



  /* Center the avatar image inside this container */
  .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    top:50vh;
  }

  .imgcontainer img{
    max-width: 250px;
    max-height: 250px;
  }

  /* Avatar image */
  img.avatar {
    width: 40%;
    border-radius: 50%;
  }

  /* Add padding to containers */
  .content_form {
    padding: 16px;
    top: 50vh;
  }

  /* The "Forgot password" text */
  span.password {
    float: right;
    padding-top: 0px;
  }

  /* ! CONTENT */

  main{
    margin-top: 60px;
    padding: 2rem 1.5rem;
    background: var(--bg);
    min-height: calc(100vh - 90px);
  }

  .cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    margin-top: 1rem;
  }

  .card-single{
    display: flex;
    justify-content: space-between;
    background: var(--ultralight);
    padding: 2rem;
    border-radius: 5px;
  }

  .card-single div:last-child span{
    color: var(--mid-grey);
    font-size: 3rem;
  }

  .card-single div:first-child span{
    color: var(--dark-grey);
  }

  .container{
   border-color: transparent;
  }


  /* ! FORM CONTENT */

  .recent-grid{
    margin-top: 3.5rem;
    display: flex;
  }

  .card{
    background: var(--ultralight);
    border-radius: 5px;
    justify-content: space-between;
    height: fit-content;
  }

  /* .card-header,
  .card-body{
    padding: 1rem;
  } */

  /* .card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  } */



/* ! INPUT FORM */
#form_fibra,
#form_incident,
#form_motork,
#form_change,
#form_register-cc,
#form_dvo-ent,
#form_dvo-firma,
#form_dvo-spid,
#form_motork-modify,
#search_form-motork,
#form_register-riconoscimenti,
#form_motork_insert{
  position: relative;
  display: block;
  border-radius: 5px;
  /*box-shadow: 0px 0px 8px 8px rgb(255 255 255 / 15%);*/
  margin: auto;
  height: fit-content;
  padding: 10px;
}
#search_form-motork .label-button{
  padding: 20px;
}

input[type=text].search_form--campo-ricerca{
  width: 60%;
}



input[type=number],
input[type=text],
input[type=time],
input[type=datetime-local],
select#status,
select#applicativo,
select#register-cc_fascia-oraria,
select#register-riconoscimenti_esito,
select#role,
select#of_1,
select#of_2,
select#of_3,
select#of_4,
select#check_reparto,
select#tdl,
select#mese,
select#check_operatore,
select#reparto{
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 5px;
  right: 10%;
}


#form_motork-modify input[type=number],
#form_motork-modify input[type=text],
#form_motork-modify input[type=time],
#form_motork-modify input[type=datetime-local],
select#status,
select#register-cc_fascia-oraria,
select#register-riconoscimenti_esito,
select#applicativo{
  width: 50%;
}

.card-center{
  justify-content: space-around;
  padding: 10px;
}

.search_form-motork{
  display:flex;
  align-items: center;
  justify-content: space-between;
}

.nonono{
  justify-content: center;
  align-items: center;
  padding: 25px;
}
.nonono img{
  margin-left: 25%;
}

input[type=date]{
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 5px;
  right: 10%;
}

#form_register-riconoscimenti input[type=date]{
    width: 20%;
}

textarea{
  width: 100%;
  height: fit-content;
}

.content_form--imput {
  padding: 16px;
  background-color: rgba(255, 255, 255, .15);
  height: fit-content;
}
.content_form--imput h3{
  text-align: center;
  padding: 10px;
}
.label-input{
  justify-content: space-between;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 2px 5px;
}
.label-input label{
  width: 50%;
  padding: 20px;
}

.label-button{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  bottom: 0%;
  position: relative;
  right: 0%;
}

.label-link
{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  bottom: 0%;
  position: relative;
  right: 0%;
  padding:20px;
}
.fa, .fab, .fad, .fal, .far, .fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  width: 30;
}


/* ! Grid System */
.grid { margin: 50px auto; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: space-between; min-height: 80vh;}
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-40{ width: 42%; }
.col-50{ width: 50%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-100{ width: 100%; }
.col-150{ width: 150%; }
.col-200{ width: 200%; }

@media (max-width: 991px) {
  .tab-20 { width: 20%; }
  .tab-25 { width: 25%; }
  .tab-33 { width: 33.33%; }
  .tab-50 { width: 50%; }
  .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
  [class*='col-'] { width: 100%;}
  .sma-20 { width: 20%; }
  .sma-25 { width: 25%; }
  .sma-33 { width: 33.33%; }
  .sma-50 { width: 50%; }
  .sma-100 { width: 100%; }

  .sma-hide{display:none}
}

* {
  margin: 0;
  padding: 0;
  }
  
  .loader {
     display: none;
     top: 50%;
     left: 50%;
     position: absolute;
     transform: translate(-50%, -50%);
  }
  
  .loading {
     border: 5px solid #ccc;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border-top-color: #264653;
     border-left-color:  #264653;
     animation: spin 1s infinite ease-in;
  }
  
  @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
  }