/**
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

*, html, body {
  scroll-behavior: smooth !important;
}

:root {
  --white: #ffffff;
  --black: #000000;
  --dark-grey: #454545;
  --light-grey: #878787;
  --lighter-grey: #c7c7c7;
  --off-white: #eeeeee;
  --red: #D91D2D;
  --red-trasparent: #6650527d;
  --green: #209630;
  --dark-green: #0c6819;
  --hover-dark-green: #0c681977;
  --orange: #FF9800;
  --light-orange: #ffc977;
  --dark-orange: #D9621D;
  --hover-dark-orange: #D9621D77;

  --selected-menu: #c6c6c6;
}

.overlay{
  display: flex;
  position:fixed;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index:99999;
  width: 100%;
  height: 100%;
  transition: all 0.4s;
  color: #fff;
}

#overlay-green{
  background: #0c6819ee;
}

.overlay span{
  font-size: 1.4em;
  font-weight: 400;
  margin-top: 10px;
}

.hidden{
  display: none;
}

.short{

  height:12px!important;

}
.square {
    width: 25px;
    height: 25px;
}

caption {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  font-family: "Helvetica","Arial",sans-serif!important;
  margin-bottom: 1%;
}
.ck-editor__editable {
  min-height: 180px !important;
}
.demo-avatar {
  width: 32px;
  height: 32px;
  border-radius: 24px;
  margin-top: 10px;
}
.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
  margin-bottom: 16px;
}
.demo-drawer {
  border: none;
}
/* iOS Safari specific workaround */
.demo-drawer .mdl-menu__container {
  z-index: -1;
}
.demo-drawer .demo-navigation {
  z-index: -2;
}
/* END iOS Safari specific workaround */
.demo-drawer .mdl-menu .mdl-menu__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.demo-drawer-header {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 15px;
  background-color: var(--white);
  /* height: 151px; */
}
.demo-avatar-dropdown {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin-top: 10px;
  color: var(--dark-grey);
}

.demo-navigation {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.demo-layout .demo-navigation .mdl-navigation__link {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--white);
  font-weight: 500;
}
.demo-layout .demo-navigation .mdl-navigation__link:hover {
  background-color: #00000033;
  color: var(--white);
}
.demo-navigation .mdl-navigation__link .material-icons {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.56);
  margin-right: 10px;
}

.demo-content {
  max-width: 108%;
}



.demo-charts {
  -webkit-align-items: flex-start;
     -ms-flex-align: flex-start;
       align-items: flex-start;
  -webkit-justify-content: center;
    -ms-flex-justify: center;
       justify-content: center;
       padding-top: 5px;
       border-radius: 16px;
       text-align: center!important;
       margin: 5px;
}
.demo-chart:nth-child(1) {
  color: #ACEC00;
}
.demo-chart:nth-child(2) {
  color: #00BBD6;
}
.demo-chart:nth-child(3) {
  color: #BA65C9;
}
.demo-chart:nth-child(4) {
  color: #EF3C79;
}
.demo-graphs {
  padding: 16px 32px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
/* TODO: Find a proper solution to have the graphs
 * not float around outside their container in IE10/11.
 * Using a browserhacks.com solution for now.
 */
_:-ms-input-placeholder, :root .demo-graphs {
  min-height: 664px;
}
_:-ms-input-placeholder, :root .demo-graph {
  max-height: 300px;
}
/* TODO end */
.demo-graph:nth-child(1) {
  color: #00b9d8;
}
.demo-graph:nth-child(2) {
  color: #d9006e;
}

.demo-options h3 {
  margin: 0;
}
.demo-options .mdl-checkbox__box-outline {
  border-color: rgba(255, 255, 255, 0.89);
}
.demo-options ul {
  margin: 0;
  list-style-type: none;
}
.demo-options li {
  margin: 4px 0;
}
.demo-options .material-icons {
  color: rgba(255, 255, 255, 0.89);
}


.selectedMenu {
  background:#89e1ed; 
  color:#37474F!important;
  font-weight: bold!important;
}

.green {
  background: darkgreen!important;
  color: white!important;
}
.green-gradient {
  background: linear-gradient(to left, darkgreen, lawngreen)!important;
  /* background: lawngreen!important; */
  color: white!important;
}
.itemgreen {
  color: green!important;
}

.orange {
  background: orange!important;
  color: whitesmoke!important;
}
.itemorange {
  color: orange!important;
}

.red {
  background: rgb(182, 44, 44)!important;
  color: whitesmoke!important;
}
.itemred {
  color: rgb(182, 44, 44)!important;
}

.grey {
  background: lightgrey!important;
  color: whitesmoke!important;
}
.itemgrey {
  color: lightgrey!important;
}

.tabsSection {
  background: #424242;
  color: whitesmoke!important;
  text-align: left;
  padding: 10px;
}

.invisible {
  visibility: hidden;
  height: 0px;
}

.errorField {
    background-color: #d5000050!important;
}
.warningField {
    background-color: #e8fc3b50!important;
}
.successField {
    background-color: #2ccf4250!important;
}
.errorLabel {
  color: #d50000!important;
  font-weight: 700;
}
.warningLabel {
    color: #ff962a!important
}
.successLabel {
    color: #1b982c!important;
}

 /* The alert message box */
 .message {
  padding: 20px;
  background-color: orange;
  color: black;
  font-weight: bold;
  font-size: 13pt;
  margin-bottom: 15px;
  border-radius: 25px;
  display:none;
}


.requiredField {
  background-color: #fff5cf;
  border: 2px solid #00bcd4;
  padding: 5px;
}

.container{
  margin: 0 auto;
  width: 50%;
 }
 
 .content{
  padding: 5px;
  margin: 0 auto;
 }
 .content span{
  width: 250px;
 }
 
 .dz-message{
  text-align: center;
  font-size: 28px;
 }

.dropdown-container {
  width: 100%;
  display: none;
  background-color: var(--black);
  padding: 10px 10px 10px 10px;
  margin: 0px;
}

.dropdown-container a {
  margin-top: 5%;
}

.sidenav a, .dropdown-btn {
  text-decoration: none;
  color: var(--white);
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: var(--light-grey);
}

/* Add an active class to the active dropdown button */
.active {
  color: white;
}

.container-fa-caret-down{
  float: left;
}

/* .mdl-cell {
    padding: 5px 0px 0px 5px;
} */
.mdl-cell.col-label {
    background: #f5f5f5;
}

.mdl-color--blue-grey-800 {
  background-color: var(--red)!important;
}

.mdl-color-text--blue-grey-400 {
  color: var(--white)!important;
}

.mdl-navigation__link {
  opacity: 1!important;
}

.mdl-layout__header-row {
  background-color: var(--red);
}

.mdl-layout-title {
  color: var(--white);
}

.demo-avatar-dropdown.mdl-grid {
  padding-top: 0px;
  padding-bottom: 0;
  background: var(--dark-grey);
  margin-left: -15px;
  padding-right: 22px;
  margin-bottom: -15px;
  color: var(--white);
  width: calc(100% + 30px) !important;
}

.menugroup {
  background: var(--white);
  padding: 5px 0px 5px 10px;
  color: var(--red);
  margin: 5px 0px 0px 0px;
}

.mdl-navigation__link i{
  font-size: 1.4em !important;
  margin-right: 10px;
}

table.dataTable tbody tr.selected {
  background-color: var(--lighter-grey)!important;
  color: var(--dark-grey)!important;
}

.menuselected {
  background-color: #00000030;
}

.submenuselected {
  color: var(--red)!important;
  font-weight: 900;
}

/* .mdl-chip__action {
    cursor: default!important;
    margin: 0 5px 0 0!important;
} */

td.mdl-data-table__cell--non-numeric p {
    margin-bottom: 0px;
}

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');

.dashboard_title{
  animation: slideleft 0.6s ease-in-out;
  opacity: 1;
  /*font-family: 'Kaku Gothic Antique', sans-serif !important;*/
}

/*.dashboard_title mark{
  color: #808080; 
  background: none;
}*/

@keyframes slideleft {
  0%{ opacity: 0; margin-left: -50px;}
  40%{ opacity: 0; margin-left: -50px;}
  100%{ opacity: 1; margin-left: 0px;}
}

.task_container{
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #dedede;
  border-radius: 16px;
  margin-bottom: 5px;
}

.type {
    height: 32px;
    width: 50%;
    border-radius: 16px;
    margin-right: 8px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Kaku Gothic Antique', sans-serif !important;
    font-weight: 400;
    color: #fff;
}
.date{
  font-size: 16px;
  color: #222;

}

.mdl-chip__text a{
  color: var(--dark-grey);
  text-decoration: none;
}

.info-file-size{
  cursor: pointer;
  padding-left: 0.5rem;
  transition: color 0.2s ease;
}
.info-file-size:hover{
  color: #00000088 !important;
  transition: color 0.2s ease;
}

/* a .mdl-chip--contact
{
transition: background-color 0.3s;
margin-top: 0px;
animation: slidedown 0.6s ease;
}

a .mdl-chip__text{
  padding: 0 3px 0 0 ;
  font-size: 0.8rem!important;
}

a .mdl-chip--contact:hover{
  background-color:#b4b4b4;
  transition: background-color 0.3s;
} 

@keyframes slidedown {
  0%{ opacity: 0; transform: translateY(-20px);}
  100%{ opacity: 1; transform: translateY(0px);}
}*/

.mdl-card {
  align-items: center;
  justify-content: center;
  min-height: 0px;
  margin-bottom: 5px;
}

#tab_logs_title{
  animation: appear 1.2s ease;
}
#tab_logs{
  animation: appear 1.5s ease;
  overflow-x: auto;
}

@keyframes appear {
  0%{ opacity: 0;}
  75%{ opacity: 0;}
  100%{ opacity: 1;}
}

.material-request-state-box{
  height: 80%; 
  width: 100%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
}

.numsubtask {
  padding: 0 5px!important; 
  width: auto!important; 
  font-size:0.85rem;
}

/* .circle-box{
  width: 80%;
  height: 80%;
  background-color: #ffa500;
  border-radius: 50px;
}

.circle-box h3{
  color: #fff;
} */

body{
background:linear-gradient(to right, #fff, #eee);
}
.parent-warning{
  width:40px;
  height:40px;
  background:#ffa500;
  margin:auto;
  border-radius:100%;
  margin-top:60px;
  position:relative;
  cursor:pointer;
}
.parent-check{
  width:40px;
  height:40px;
  background:#26a533;
  margin:auto;
  border-radius:100%;
  margin-top:60px;
  position:relative;
  cursor:pointer;
}
@keyframes breathe{
  0%{transform:scale(1)}
  50%{transform:scale(0.5)}
  100%{transform:scale(1)}
}
@keyframes breathe2{
  0%{transform:scale(1)}
  50%{transform:scale(1.2)}
  100%{transform:scale(1)}
}
.parent-warning:before{
  content:"";
  position:absolute;
  top:-25px;
  left:-25px;
  z-index:2;
  width:90px;
  height:90px;
  background:#ffa500;
  opacity:0.3;
  border-radius:100%;
  animation:breathe2 2s infinite;
}
.parent-check:before{
  content:"";
  position:absolute;
  top:-25px;
  left:-25px;
  z-index:2;
  width:90px;
  height:90px;
  background:#26a533;
  opacity:0.3;
  border-radius:100%;
  animation:breathe2 2s infinite;
}
.parent-warning:after{
  content:"";
  position:absolute;
  top:-45px;
  left:-45px;
  z-index:3;
  width:130px;
  height:130px;
  background:#ffa500;
  opacity:0.2;
  border-radius:100%;
  animation:breathe 2s infinite;
}
.parent-check:after{
  content:"";
  position:absolute;
  top:-45px;
  left:-45px;
  z-index:3;
  width:130px;
  height:130px;
  background:#26a533;
  opacity:0.2;
  border-radius:100%;
  animation:breathe 2s infinite;
}
.parent-warning > span{
  color:#fff;
  font-weight:bold;
  font-size:25px;
  position:absolute;
  z-index:4;
  top:6px;
  left:8px;
}
.parent-check > span{
  color:#fff;
  font-weight:bold;
  font-size:25px;
  position:absolute;
  z-index:4;
  top:7px;
  left:7px;
}

.under-warning{
  padding-top: 20px;
}
.under-warning mark{
  color: #ffa500; 
  font-weight: 600;
  background: none;
}
.under-check{
  padding-top: 20px;
}
.under-check mark{
  color: #26a533; 
  font-weight: 600;
  background: none;
}

.late-tasks-button{
  background-color: #ffa500;
  padding: 5px 10px;
  border-radius: 16px;
  margin: 0 20px;
}
.late-tasks-button a {
  color: #fff;
  font-size: 15px;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif !important;
}
.dashboard-gotolist-button{
  background: linear-gradient(45deg, #C6C6C6 0%, #878787 100%);
  padding: 5px 10px;
  border-radius: 16px;
  margin-left: 20px;
}
.dashboard-gotolist-button a {
  color: #fff;
  font-size: 15px;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif !important;
}
.dashboard-gotolist-logs-button{
  background: #919191;
  padding: 5px 10px;
  border-radius: 16px;
  margin-top: 0px;
  text-align: center;
}
.dashboard-gotolist-logs-button a {
  color: #000;
  text-align: center;
  font-size: 15px;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif !important;
}
/* .cnc-tasks-button{
  background: linear-gradient(45deg, rgba(135,135,135,1) 0%, rgba(69,69,69,1) 100%);
  padding: 5px 10px;
  border-radius: 16px;
  margin: 10px 20px 0 20px;
}
.cnc-tasks-button a {
  color: #fff;
  font-size: 15px;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif !important;
}
.tasks-button{
  background: linear-gradient(45deg, rgba(217,29,45,1) 0%, rgba(69,69,69,1) 100%);
  padding: 5px 10px;
  border-radius: 16px;
  margin: 10px 20px 0 20px;
}
.tasks-button a {
  color: #fff;
  font-size: 15px;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif !important;
}
.requests-button{
  background: linear-gradient(45deg, rgba(29,77,217,1) 0%, rgba(69,69,69,1) 100%);
  padding: 5px 10px;
  border-radius: 16px;
  margin: 10px 20px 0 20px;
}
.requests-button a {
  color: #fff;
  font-size: 15px;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif !important;
} */

.warning{
  animation: warning 1s ease infinite;
  transition:  transform 0.5s;
}

@keyframes warning {
  0%{ transform: scale(0.8);}
  30%{ transform: rotate(-5deg);}
  50%{ transform: scale(1.2); transform: rotate(5deg);}
  70%{ transform: scale(1.2); transform: rotate(-5deg);}
  100%{ transform: scale(0.8);}
}

#description-title{
  /* display: none;
  visibility: hidden; */
}
#textarea-div{
  /* display: none;
  visibility: hidden; */
}
#testarea-div textarea{
  height:100px;
} 

#animated-up-down-panel{
  display:none;
}

#btn_notes{
  transition: background-color 0.8s;
  background-color: #FFA500;
  color: #fff;
}
#btn_notes1{
  transition: background-color 0.8s;
  background-color: #FFA500;
  color: #fff;
}

#description-button{
  transform: rotate(0deg);
  transition: transform 0.5s, color 0.4s;
}

.mdl-textfield--floating-label{
  /* margin-bottom: 27px!important; */
}

.mdl-textfield--floating-label .requiredField{
  background-color: none;
  border: none;
  padding: 10px 0px;
}

.mdl-textfield.is-invalid .mdl-textfield__label:after{
  background-color: rgba(0,0,0,.32);
}

.mdl-textfield__input {
  width: 100%!important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
}

.mdl-textfield--floating-label.is-invalid .mdl-textfield__label{
  color: rgba(0,0,0,.32) !important;
  font-size: 16px !important;
}

.custom-file-input {
  color: transparent;
  min-width: 64px;
  width: 116px;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'CARICA CSV';
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #00BCD4;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-family: "Roboto","Helvetica","Arial",sans-serif!important;
  font-weight: 500;
  font-size: 14px;
  height: 36px;
  min-width: 64px;
  padding: 0 16px;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active {
  outline: 0;
}
.custom-file-input:active::before {
  background: #089aad;
  transition: background 0.3s;
}

.popup{
  width: 80vw;
  height: 80vh;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  font-family: "Roboto","Helvetica","Arial",sans-serif!important;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 36px;
  background: #fff;
  color: #000;
  opacity: 0;
  transition: opacity 1.5s;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
  /* -webkit-box-shadow: 0px 5px 100px 67px #7A7A7A;
  -moz-box-shadow: 0px 5px 100px 67px #7A7A7A;
  -o-box-shadow: 0px 5px 100px 67px #7A7A7A;
  box-shadow: 0px 5px 100px 67px #7A7A7A; */
}

.container{
  margin: 0;
  width: 100%;
  transition: filter 1s;
}

.blur{
  filter: blur(3px);
  transition: filter 1s;
}

.show{
  visibility: visible;
  opacity: 1;
  transition: opacity 1.5s;
}

#popup_close{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

}
#popup_text{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 80vh;
  padding: 0 30px;
}
#hide_popup{
  margin: 20px 30px 0 0;
}

/* ANIMATED CLOCK ICON DASHBOARD */

.clock {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0;
  padding-top: 15px;
  overflow: hidden;
}

.frame {
  animation: circular 3s infinite;
}

.hour-hand {
  /* draw:   http://cubic-bezier.com/#.13,.88,.47,1.01 */
  /* rotate: http://cubic-bezier.com/#.24,.65,.46,.95 */
  animation: hh-draw 3s cubic-bezier(.13,.88,.47,1.01) infinite, hh-rotate 3s cubic-bezier(.24,.65,.46,.95) infinite;
}

.minute-hand {
  animation: mh-draw 3s cubic-bezier(.13,.88,.47,1.01) infinite, mh-rotate 3s cubic-bezier(.24,.65,.46,.95) infinite;
}

@keyframes circular {
  0% {
    stroke-dasharray: 0 879.2;
    stroke-dashoffset: -1099;
  }
  33.3%, /* animating 1s */
  100% { /* delay 2s */
    stroke-dasharray: 879.2 0;
    stroke-dashoffset: -30;
  }
}

@keyframes hh-draw {
  0% {
    stroke-dashoffset: 70;
  }
  33.3%,
  100% {
    /* when I set below property to 0 in safari, safari occur rendering bug. so I set it to 0.1. */
    stroke-dashoffset: 0.1;
  }
}

@keyframes hh-rotate {
  0% {
    transform: rotate(0);
  }
  33.3%,
  100% {
    transform: rotate(90deg);
  }
}

@keyframes mh-draw {
  0% {
    stroke-dashoffset: 90;
  }
  33.3%,
  100% {
    stroke-dashoffset: 0.1;
  }
}

@keyframes mh-rotate {
  0% {
    transform: rotate(0);
  }
  33.3%,
  100% {
     /* 360deg + 140deg */
    transform: rotate(500deg);
  }
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
  padding: 8px 10px!important;
}

span.alert {
  background-color: var(--ck-color-image-caption-highligted-background);
  padding: 10px;
  color: var(--dark-grey);
  border-radius: 10px;
  margin: 5px;
  float: right;
  text-decoration: blink;
}

.demo-card-event.mdl-card {
  width: 256px;
  height: 256px;
  background: #454545;
}
.demo-card-event > .mdl-card__actions {
  border-color: rgba(255, 255, 255, 0.2);
}
.demo-card-event > .mdl-card__title {
  align-items: flex-start;
}
.demo-card-event > .mdl-card__title > h4 {
  margin-top: 0;
  margin-bottom: -20px;
}
.demo-card-event > .mdl-card__actions {
  display: flex;
  box-sizing:border-box;
  align-items: center;
}
.demo-card-event > .mdl-card__actions > .material-icons {
  padding-right: 10px;
}
.demo-card-event > .mdl-card__title,
.demo-card-event > .mdl-card__actions,
.demo-card-event > .mdl-card__actions > .mdl-button {
  color: #fff;
}

.markasreadalert {
    font-size: 1.1rem;
    background-color: #48d548;
    border-radius: 10px;
    padding: 3px;
    margin-left: 10px;
    transform: translateY(3px);
}

/*Delete row animation in ALERT LIST*/
.slide-out-bck-center {
	-webkit-animation: slide-out-bck-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-bck-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-bck-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-1100px);
            transform: translateZ(-1100px);
    opacity: 0;
  }
}
@keyframes slide-out-bck-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-1100px);
            transform: translateZ(-1100px);
    opacity: 0;
  }
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  background-color: #f5f5f5;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/*Delete row animation in PIECE LIST*/
.slide-out-bck-center {
	-webkit-animation: slide-out-bck-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-bck-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-bck-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-1100px);
            transform: translateZ(-1100px);
    opacity: 0;
  }
}
@keyframes slide-out-bck-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-1100px);
            transform: translateZ(-1100px);
    opacity: 0;
  }
}
/* End of Delete row animation in PIECE LIST*/

/* custom CHECKBOX */

input[type=checkbox].mdl-checkbox__input
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
  padding: 10px;
  margin-right: 10px;
}

/* End of custom CHECKBOX */

/* .demo-box {
  display: flex !important;
    align-items: center !important;
} */

.orange-col-label{
  background-color: #d9621d !important;
  color: #fff !important;
  padding: 5px 10px;
}

#active_accordion{
  background: linear-gradient(90deg, #bbb, #ccc);

  /* background: linear-gradient(300deg,#aaa,#e5e5e5,#aaa);
  background-size: 180% 180%;
  animation: gradient-animation 6s ease infinite; */
  border: 1px solid #aaa;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#order_pieces{
  transition: all 1s ease-out;
}

/* Custom checkbox styled as a button */
#custom-check-label{
  display: flex; 
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  margin-right: 13px;
}

#custom-check {
  display: none;
}

#custom-check-span {
  border: 1px solid #ccc;
  border-radius: 2px;
  display: inline-block;
  padding: 3px 6px;
  transition: all 0.3s ease-out;
  display: flex; 
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
}
#custom-check:checked + #custom-check-span {
  background: #008cff;
  color: #fff;
  transition: all 0.3s ease-out;
}
/* End custom checkbox styled as a button */

/* CKeditors */
.ck.ck-editor {
  width: 794px !important;
}
/* End CKeditors */

/* Machines Catalogue Cards */

.demo-card-wide.mdl-card {
  width: 20vw;
  height: 25vh;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 80%;
  width: 100%;
  padding: 0;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
.demo-card-wide.mdl-card .mdl-card__title-text{
    color: #1a1a1a;
    font-weight: 400;
    width: 100%;
    height: 30%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.7));
}

/* End Machines Catalogue Cards */

/* Machine Video */
#video_group{
  display: none;
}
/* End Machine Video */

/*----------Pagina dettaglio Affare Lead Detail-------------*/



/* Progress Step Bar */
.step-bar-container{
  display: flex; 
  align-items: flex-start; 
  flex-direction: column; 
  height: calc(97vh - 96px); 
  justify-content: space-between;
}

.step-bar-container .step-bar-element{
  margin: 0; 
  padding: 0;
  display: flex; 
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.step-bar-container .step-bar-element.completed{
  color: var(--green);
  font-weight: bold;
}
.step-bar-container .step-bar-element.next-step{
  color: var(--orange);
  font-weight: bold;
}
.step-bar-container .step-bar-divider{
  margin: 0; 
  padding: 0;
  display: flex; 
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 1.1rem;
  flex: 2;
}

.step-bar-container .step-bar-divider.green-divider{
  width: 3px;
  background: var(--green);
}
.step-bar-container .step-bar-divider.grey-divider{
  width: 2px;
  background: var(--light-grey);
}
.step-bar-container .step-bar-divider.orange-divider{
  width: 3px;
  background: var(--orange);
}

.step-bar-container .step-bar-element .next-step{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.2rem;
  width: 2.2rem;
  margin-right: 10px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  background: var(--orange);
}
/* .step-bar-container .step-bar-element .next-step:hover{
  cursor: pointer;
  background: var(--dark-orange);
} */
.step-bar-container .step-bar-element .step-non-active{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.2rem;
  width: 2.2rem;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--lighter-grey);
}
.step-bar-container .step-bar-element .step-non-completed{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.2rem;
  width: 2.2rem;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--lighter-grey);
}
.step-bar-container .step-bar-element .step-non-completed:hover{
  cursor: pointer;
  background: var(--light-grey);
}
.step-bar-container .step-bar-element .step-completed{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.2rem;
  width: 2.2rem;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--green);
  color: white;
}

/* End Step Bar */



.titolo-infoaffare{
  font-weight: bold;
  margin: 0px;
  padding-bottom: 0.5rem;
  font-size: 1.5rem;
}
.sottotitolo-infoaffare{
  color: var(--green);
  font-weight: bold;
  margin: 0px;
  font-size: 1.2rem;
}
.testo-infoaffare{
  margin: 0px;
  margin-top: -.3rem;
  padding-bottom: 0.5rem;
  font-size: .9rem;
}

.stati-documenti .next-step{
  font-weight: bold;
  color: var(--orange);
}

.stati-documenti a .mdl-chip__text{
  padding: 0 3px 0 0 ;
  font-size: 1rem!important;
  font-weight: 400;
}
.stati-documenti .stato{
  background-color: var(--lighter-grey);
  padding: 1rem 2rem;
}
.stati-documenti .upload-section{
  background-color: white;
  border: solid 3px var(--green);
  padding: 1rem 2rem;
}
/* .stati-documenti .stato-attivo{
  background-color: white;
  border: solid 3px var(--orange);
  padding: 1rem 2rem;
} */

.stati-documenti .stato h6,
.stati-documenti .upload-section h6{
  margin: 0px 0px 10px 0px;
  font-weight: 600;
}

.upload-section .mdl-textfield__label:after{
  background-color: var(--green);
}

.upload-section .mdl-textfield--floating-label.is-focused .mdl-textfield__label{
  color: var(--green);
}

.upload-section #pdfFileNames,
.upload-section #imageFileNames {
  margin-top: 10px;
}

/*----------Pagina dettaglio Affare Lead Detail-------------*/

.nome_form{
  display: flex; 
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
}

input[type=number]{
  outline: none !important;
}

/*----------Pagina dettaglio Affare Lead Detail-------------*/

/* Stile per l'effetto ripple */
.ripple-effect {
  position: absolute;
  border-radius: 2px;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.5);
  animation: ripple-animation 1.5s linear infinite; /* Animazione infinita */
  z-index: -1; /* Posiziona dietro al bottone */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* Non intercetta gli eventi del mouse */
}

/* Keyframes per l'animazione del ripple */
@keyframes ripple-animation {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  50% {
    width: 200%;
    height: 200%;
    opacity: 0.2;
  }
  100% {
    width: 400%;
    height: 400%;
    opacity: 0;
  }
}

/* note cliente - box text bubble bottom */

.row-client-notes{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.notes {
	position: relative;
	background: var(--off-white);
	border-radius: .4em;
  display: flex;
  flex-direction: column;
  padding: 3% 5%;
}
.notes .text-note{
  margin: 0 5px 15px 0 !important;
}

.notes .row-delete-note{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.notes .author-time-note{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center !important;
}
.notes .author-time-note .mdl-chip{
  width: max-content;
  transform: translateX(+5%);
}
.notes .author-time-note p{
  width: max-content;
  margin: 0 !important;
}
.notes .author-time-note p{
  padding-right: 2%;
}

.speech-bubble-bottom {
	position: relative;
	background: var(--lighter-grey);
	border-radius: .4em;
  display: flex;
  flex-direction: column;
}
.speech-bubble-bottom textarea{
	background: white;
  width: 90% !important;
  margin: 0 auto;
}
.speech-bubble-bottom button{
	width: max-content;
  margin: 2% 0 0 5% !important;
}
.speech-bubble-bottom h6{
	margin: 0 0 1% 5% !important;
}

.speech-bubble-bottom:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 10%;
	width: 0;
	height: 0;
	border: 17px solid transparent;
	border-top-color: var(--lighter-grey);
	border-bottom: 0;
	margin-left: -17px;
	margin-bottom: -17px;
  
}