/*
   Tracker css
 */

.tracker-card {
   width: 280px;
   min-height: 123px;
   margin: 0 0 20px 0;
   padding: 7px 12px;
   border: 2px solid lightgrey;
   border-radius: 8px;
   background-color: #FFF;
   box-shadow: 4px 4px 4px lightgrey;
}

.tracker-listing-card {
   width: 30%;
   min-width: 290px;
   max-width: 400px;
   margin: 0 10px 20px 10px;
   padding: 7px 12px;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   border: 2px solid lightgrey;
   border-radius: 8px;
   background-color: #FFF;
   box-shadow: 4px 4px 4px lightgrey;
   flex-grow:1;
}

#tracker_current_stats .tracker-listing-card {
   width: 280px;
}

.trackers-listing {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   margin: 0 auto;
}

.tracker-listing-card-row {
   position: relative;
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
}

.tracker-listing-card-info-container {
   width: 64%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
}

.tracker-listing-card-title {
   font-size: 18px;
   text-align: center;
}

.tracker-listing-card-value {
   /*min-height: 30px;*/
   font-size: 16px;
   font-weight: bold;
   text-align: center;
}

.tracker-listing-card-sync {
   text-align: center;
}

.tracker-listing-card-chart {
   width: 35%;
   height: 107px;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
}

.tracker-listing-card-connected-tracker {
   position: absolute;
   bottom: 0;
   right: 0;
   font-size: 14px;
}

.tracker-detail-heading {
   width: 100%;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: flex-start;
}

.tracker-details-title {
   font-size: 18px;
   font-weight: bold;
}

.tracker-periods-mode-set {
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-end;
}

.tracker-periods-mode {
   margin: 0 5px;
   border: none;
   border-radius: 64px;
   background-color: #FFF;
   padding: 4px 18px;
   color: #acacac;
   white-space: nowrap;
}
.tracker-periods-mode.active {
   border: 1px solid lightgrey;
   background-color: rgba(43, 196, 33, 0.7);
   color: #032035;
}

.tracker-details-row {
   margin: 16px auto 24px auto;
}

.tracker-details-row .row-heading {
   margin-bottom: 12px;
   padding: 0 16px;
   font-size: 16px;
   font-weight: bold;
}

/*.tracker-details-row .row-content {
   padding: 0 16px;
}*/

.tracker-details-flex-row {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   padding: 0 12px;
}

.tracker-details-flex-row.center {
   justify-content: center;
}

.tracker-details-flex-row.center .trackers-details-row-col {
   margin: 0 12px;
}

.tracker-detail-stats-row {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   margin: 0 auto;
}

.tracker-details-value {
   font-size: 14px;
   font-weight: bold;
}

.tracker-details-sync {
   font-size: 14px;
}

.period-date-nav-row {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   margin: 16px auto;
}

.period-date-nav-item,
.edit-date-nav-item,
.manual-entry-control {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   margin: 0 7px;
   text-align: center;
}

.manual-entry-control {
   margin: 0 12px;
}

.period-totals-title,
.period-totals {
   text-align: center;
}

.period-totals-title {
   font-weight: bold;
}

.period-date-nav-item i,
.edit-date-nav-item i {
   padding: 5px 9px !important;
}

.manual-entry-control i {
   padding: 8px 9px !important;
}

.period-date-nav-item:first-of-type {
   margin-left: 0;
}
.period-date-nav-item:last-of-type {
   margin-right: 0;
}
.period-date-nav-item.date-label {
   padding: 0 16px;
}

.period-date-nav-icon,
.edit-date-nav-icon {
   border: 1px solid #acacac;
   border-radius: 50%;
   background-color: #FFF;
   color: #acacac;
}

.period-date-nav-item.nav-enabled .period-date-nav-icon,
.edit-date-nav-item.nav-enabled .edit-date-nav-icon,
.manual-entry-control .manual-entry-val-icon {
   border: none;
   border-radius: 50%;
   background-color: #2bc421;
   color: #032035;
}

.disabledDateNav {
   cursor: not-allowed;
   opacity: 0.4;
}

.tracker-editing-date {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   font-size: 11pt;
   font-weight:bold;
}

.manual-entry-form {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}

.tracker-periods-entry-set {
   position: relative;
}

#manual_tracker_entry_message {
   display: none;
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: max-content;
   max-width: 80%;
   border: 1px solid grey;
   border-radius: 8px;
   background: #FFFFFF;
   padding: 16px;
   text-align: center;
}

#txtRecordTracker {
   width: 140px;
   margin: 10px auto;
   border: 1px solid lightgrey;
   box-shadow: 4px 4px 4px lightgrey;
   padding: 8px;
   font-size: 18px;
   text-align:center;
}

.tracker-edit-save-button {
   max-width: 115px;
   margin: 20px auto;
   font-size: 12px;
   padding: 10px 24px;
   border-radius: 5px;
   border: none;
   cursor: pointer;
   background-color: #2bc421;
   color: #000;
}

.tracker-edit-cancel {
   max-width: 115px;
   margin: 4px auto 0 auto;
   color: #2bc421;
}

#period_totals_block {
   margin-top: 10px;
}

#period_totals_block .period-totals {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   margin-top: 7px;
   font-size: 12px;
}

#period_totals_block .period-totals .period-totals-item {
   margin: 0 12px;
}

.resource-card.trackers-resource {
   width: 48%;
   min-width: 260px !important;
}

.mobile-device .resource-card.trackers-resource {
   width: 100%;
}

.manual-entries-row {
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
   font-weight: bold;
}

.tracker-edit-label {
   font-size: 14px;
}

.tracker-edit-fld {
   margin: 5px auto;
   text-align: center;
}

.manual-entries-sep {
   margin: 0 5px;
}

.tracker-day-navs {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   margin-bottom: 16px;
}

.manual-entry-form-field {
   max-width: 100px;
}

.manual-entry-form-field-row-set {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}

.manual-edit-label {
   font-size: 14px;
}

.sl-edit-slash,
.bp-edit-slash {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   font-size: 24px;
}

.sl-edit-slash {
   justify-content: flex-end;
   padding-bottom: 7px;
}

#common_modal .food-pyramid-container {
   max-width: 450px;
   margin: 0 auto;
}

.tracker-device-listing,
.app-devices-row,
.app-apps-row {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
}

.tracker-device-cell,
.app-tracker-cell {
   padding: 0 8px 12px 8px;
   text-align: center;
}

.app-tracker-cell {
   text-align: center;
}

.unlink-app-link {
   text-align: center;
}

#tracker_goals_form .settings-button {
   margin-left: 16px;
   padding-left: 20px;
   padding-right: 20px;
}

.tracker-type-help {
   text-align:right;
   font-size: 18px;
   color: #0b5f8f;
}

.tracker-device-help {
   text-align:right;
   font-size: 16px;
}

.tracker-box-style {
   min-width: 270px;
}

.no-tracker-data {
   font-size: 16px;
   /*color: red;*/
}

#tracker_period_stats {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   padding: 0 36px;
}

/* Tracker goals */
#tracker_goals_title {
   text-align: center;
}

.tracker-goals-row {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   margin: 8px 0;
}

.tracker-goals-field {
   width: 130px;
}

.tracker-goals-message {
   display: none;
   padding: 10px 0;
   line-height: 1.1;
   font-weight: bold;
   text-align: center;
}

.tracker-goals-message.error {
   color: red;
}

.tracker-goals-message.success {
   color: green;
}

.tracker-stats-card-title {
   margin-bottom: 10px;
   font-size: 12px;
   font-weight: bold;
   color: #a0abb3;
   text-transform: uppercase;
}

/* Tracker rounds */
.tracker-round {
   position: relative;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   width: 82px;
   height: 82px;
   /* background-color: #dff6de; */
   background-color: white;
   border: 6px solid #eee;
   border-radius: 50%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

.tracker-round.trend-bad {
   background-color: #ffe4d9;
}

.tracker-round i.p25fa-icon {
   margin: 0;
   padding: 0;
   font-size: 30px;
}

.tracker-round i.move-dir-icon {
   position: absolute;
   right: 0;
   font-size: 20px;
}

.tracker-round i.move-dir-icon {
   color: #2bc421;
}

.tracker-round.trend-bad i.move-dir-icon {
   color: #ff4b00;
}

.tracker-round i.move-dir-icon.move-up {
   top: 0;
}

.tracker-round i.move-dir-icon.move-down {
   bottom: 0;
}

.last-tracker-sync-line {
   font-size: 14px;
   font-weight: normal;
}
@keyframes syncAlertPulse {
   0% {
      opacity: 1;
   }
   50% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}
.last-tracker-sync-line.last-sync-alert {
   color: #ff4b00;
   font-weight: bold;
   animation-name: syncAlertPulse;
   animation-duration: 1s;
   animation-iteration-count: 3;
}

#tracker_card_NU .tracker-listing-card-chart img {
   max-height: 105px;
}

@media (max-width: 1270px) {
   .resource-card.trackers-resource {
      width: 46%;
   }
}

@media (max-width: 1062px) {
   .resource-card.trackers-resource {
      width: 100%;
   }
}

@media (max-width: 350px) {
   .tracker-periods-mode {
      margin: 0 3px;
   }
}