/* ========================================
   ANIMAZIONI - KEYFRAMES
   ======================================== */

@keyframes walkanim {
    to {
        background-position: 100% 0;
    }
}

@keyframes stroll {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(650%);
    }
}


/* ========================================
   LAYOUT - QUEUE ANIMATION PAGE
   ======================================== */

.header {
    position: relative;
    left: 0;
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    overflow: hidden;
    text-align: center;
}

.wrapper {
    padding: 4.375rem;
    margin-left: 9.375rem;
    display: flex;
    align-items: center;
}

.container {
    width: 100%;
    max-width: 1400px;
}

.content {
    margin-top: 6.25rem;
}

.elements {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.element {
    height: auto;
    width: 8.75rem;
}


/* ========================================
   COMPONENTI - WEATHER
   ======================================== */

.weather-container {
    display: flex;
    align-items: center;
    margin-right: 0.625rem;
}

.grade {
    margin-left: 3.125rem;
    font-weight: 900;
    font-size: 3.75rem;
}


/* ========================================
   COMPONENTI - WALK ANIMATION
   ======================================== */

.walk-container {
    display: inline-block;
    position: relative;
    width: 15%;
    padding-bottom: 16%;
    vertical-align: middle;
    overflow: hidden;
    animation: stroll 7s linear infinite;
    left: 0;
    margin-left: -80px;
}

.walk {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../img/walk-sequence.svg');
    background-repeat: no-repeat;
    background-size: 700%;
    animation: walkanim 1s infinite steps(7);
}


/* ========================================
   COMPONENTI - RADIAL MENU
   ======================================== */

.radial-menu {
    position: relative;
    width: 30px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu-icons {
    position: absolute;
    left: 175%;
    transform: translateX(-50%) scale(0);
    display: flex;
    gap: 4px;
    transition: transform 0.3s ease-in-out;
}

.menu-icons a {
    background: #fff;
    padding: 6px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out;
}

.menu-icons a:hover {
    transform: scale(1.1);
}

.radial-menu.open .menu-icons {
    transform: translateX(-50%) scale(1);
}

.radial-menu .fa-cogs {
    transition: opacity 0.3s ease-in-out;
}

.radial-menu.open .fa-cogs {
    opacity: 0;
}


/* ========================================
   TIME CARD - TABELLA BASE
   ======================================== */

#table_time_card > tbody > tr > td {
    text-align: center;
}

#table_time_card > tbody > tr > th:not(#date) {
    text-align: center !important;
}

#table_time_card #date {
    text-align: left !important;
}

#tr_foot_time_card {
    border: 2px solid lightgray !important;
}

#tr_foot_time_card .col-grey,
#tr_foot_time_card .col-white {
    text-align: center !important;
}

#foot_notes_textarea {
    resize: none;
}

/* ========================================
   TIME CARD - COLONNE
   ======================================== */

.col-grey {
    background-color: #f5f5f5 !important;
    padding: 10px 7px !important;
    text-align: center !important;
}

.col-white {
    background-color: var(--color-white) !important;
    padding: 10px 7px !important;
    text-align: center !important;
}

.col_in {
    border-right: 1px solid #dddddd !important;
}

.par_total {
    border-left: 1px solid #dddddd !important;
}

.col-status {
    text-align: center;
    width: 30px;
    max-width: 30px;
}

.col-date {
    text-align: left !important;
}

.col_timestamp {
    width: 100px;
    max-width: 100px;
}

.custom_reason_col {
    width: 60px !important;
    font-weight: bold;
    text-align: right;
}


/* ========================================
   TIME CARD - ELEMENTI FORM
   ======================================== */

#date {
    width: 150px;
    max-width: 150px;
    text-align: left !important;
}

#status {
    text-align: center;
    width: 30px;
    max-width: 30px;
}

#ops {
    width: 40px;
    max-width: 40px;
}

#notes {
    width: 150px;
    max-width: 150px;
}

#reason {
    width: 75px;
    max-width: 75px;
}

#reasons_block {
    width: 200px;
    max-width: 200px;
}

.reason_select {
    width: 100px;
    max-width: 100px;
}

.table_reasons {
    text-align: left !important;
}

.temp-auto-width {
    width: auto !important;
}


/* ========================================
   TIME CARD - FLATPICKR E INPUT
   ======================================== */

input[type="time"]::-webkit-datetime-edit-ampm-field {
    display: none;
}

.flatpickr-calendar.hasTime.noCalendar {
    width: 90px;
}


/* ========================================
   LOGIN - BODY E IMMAGINI
   ======================================== */

body:has(div.login) {
    background-image: url('../../img/tornelli-uscita-stazione-shape-GettyImages2216296074_1920x900.jpg');
}

.img-f-1 {
    position: absolute;
    height: 100vh;
    width: 100%;
    max-width: 860px;
    background-size: contain;
    background: url('../../img/assets/8.webp') no-repeat left bottom;
    z-index: 1;
}

.img-b-1 {
    position: absolute;
    height: 100vh;
    width: 100%;
    max-width: 860px;
    background-size: contain;
    background: url('../../img/assets/8.svg') no-repeat left bottom;
}


/* ========================================
   RESPONSIVE - MEDIA QUERIES
   ======================================== */

@media (max-width:991px) {
    .text-claim {
        display: none !important;
    }

    .img-f-1 {
        min-height: 140px;
        height: auto;
        width: 100vw;
        margin: 0 auto;
        background: url('../../img/assets/8-mobile.webp') center top;
        z-index: 0;
    }

    .img-b-1 {
        display: none;
    }

    .login-language .navbar-nav {
        position: absolute;
    }

    .panel-login .container-form {
        max-width: 400px;
        margin: 0 auto;
    }

    .panel-login .panel-body {
        padding: 0;
    }
}


/* ========================================
   UTILITY - TRASFORMAZIONI
   ======================================== */

.rotate-neg90 {
    transform: rotate(-90deg);
}


/* ========================================
   STATI - BATTERIA
   ======================================== */

.battery.low {
    color: red;
}

.battery.fill {
    color: green;
}

.battery.medium {
    color: orange;
}


/* ========================================
   STATI - OPERATIVI
   ======================================== */

.working {
    color: #70be00;
}

.on {
    color: var(--color-dark);
}

.off {
    color: rgb(29 33 39 / 30%);
}


/* ========================================
   STATI - NOTIFICHE - PROTOCOLLI E AVVISI
   ======================================== */

.warning {
    border-width: 2px;
    border-style: solid;
    border-color: orange !important;
}

.attention {
    border-width: 2px;
    border-style: solid;
    border-color: var(--theme-background) !important;
}

.info-line {
    border-width: 2px;
    border-style: solid;
    border-color: #E8E8E8 !important;
    background-color: #F8F8F8 !important;
}

.keepalive {
    border-width: 2px;
    border-style: solid;
}


.protocol svg,
.status-icon svg {
  width: 24px;
  height: 24px;
}

.protocol.http {
    background-color: #ffa500;
}

.protocol.mqtt {
    background-color: #8732a8;
}

.status-icon.connected{
  color: green;
}

.status-icon.disconnected{
  color: red;
}

.status-icon.pending{
  color: gray;
}

/* ========================================
   BLINK AND NOTIFICATIONS
   ======================================== */

@keyframes danger-blink {
  0% {border-color: #ff0053;}
  50% {border-color: yellow;}
  100% {border-color: #ff0053;}
}
@keyframes waning-blink {
  0% {border-color: yellow;}
  50% {border-color: orange;}
  100% {border-color: yellow;}
}
@keyframes keepalive-blink {
  0% {border-color: green;}
  50% {border-color: lightgreen;}
  100% {border-color: green;}
}

.notification {
  position: relative;
  display: inline-block;
}
.notification .badge-alert {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 7px 7px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 7s .7s ease-in-out infinite;
}
@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }
  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }
  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}
@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

/* ========================================
    TIME CARD - TIME MODEL E TIME EP
    ======================================== */
.time-model-content,
.time-ep-content {
    display: flex;
    align-items: center;
    margin: 5px 0;
}
.time-model-content i,
.time-ep-content i {
    font-size: 16px;
    margin: 0 5px;
    color: var(--color-primary);
}
.time-stamp {
  font-weight: 700;
  background: rgb(29 33 39 / 10%);
  border-radius: 5px;
  padding: 3px 8px;
}
.time-ep-from,
.time-ep-to {
  background: rgb(29 33 39 / 10%);
  border-radius: 5px;
  padding: 3px 8px;
}
.time-ep-from {
  font-weight: 700;
  background: rgb(1 86 203 / 20%);
}
i.x2, .x2 {
    font-size: 16px;
}
i.x3, .x3 {
    font-size: 18px;
}
i.x4, .x4 {
    font-size: 24px;
}


/* ========================================
   INFO TIMESTAMP
   ======================================== */

.info-box-timestamp {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 75px;
}

.info-line-timestamp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.2rem;
}

.info-line-timestamp i {
  color: #8d9aa5;
}

.info-line-timestamp svg {
  width: 24px;
  height: 24px;
  color: #0078d4;
}

/* ========================================
   TIME CARD - WRAP REASON HEADER
   ======================================== */
#table_time_card {
    table-layout: fixed;
    width: 100%;
}

#table_time_card thead th#reason,
#table_time_card thead th[id="reason"] {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.1;
}

#table_time_card tbody td.custom_reason_col {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

#table_time_card th#reason,
#table_time_card th[id="reason"] {
    max-width: 75px;
}

.input-reason.quantity-type{
    padding: 5px;
}

.reason_select {
    padding: 5px;
}

.info-image {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    padding: 20px 0;
}

.img-fluid {
    width: 56%;
}