@charset "UTF-8";
/* CSS Document */
body {
	background-color: #00ABE1;
     -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* Стандартный синтаксис */
-webkit-font-smoothing: antialiased;     /* Chrome, Safari (macOS) */
  -moz-osx-font-smoothing: grayscale;      /* Firefox (macOS) */
  text-rendering: optimizeLegibility;
}
.cloud {
    width: 100%;
    min-width: 490px;
    max-width: 750px;
    margin-bottom: 5px;
}
h1 {
    margin: 0; 
    }
  @font-face {
  font-family: 'Boogaloo';
  src: url('timer/Boogaloo-Regular.woff2') format('woff2'),
      url('timer/Boogaloo-Regular.ttf') format('truetype');
        font-weight: normal;
  font-style: normal;
  font-display: swap;
}
  .timer19 {
      font-size: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
    font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
 font-family: 'Boogaloo';
      font-weight: normal;
text-rendering: auto;
        margin: 0px;
      margin-left: 15px;
      margin-right: 20px;
        transform: translateZ(0);
  will-change: contents;
        -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    }
    .time {
      color: #ffffff;
    }

    .seconds {
      color: #161f6d;
    }
      .separator {
  color: #ffffff;
         	margin-left: 5px;
          margin-right: 5px;
}
  .timer18 {
      font-size: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
         font-family: 'Boogaloo'; 
       font-weight: normal;
        font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
text-rendering: auto;
        margin: 0px;
      margin-left: 10px;
        transform: translateZ(0);
  will-change: contents;
        -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    }
.appsbar {
    margin-bottom: 35px;
        margin-top: -10px;
}
.nopointer {
   pointer-events: none; 
}

 /* Прогресс бар */
.progress-wrapper {
  display:flex;
  align-items:center;
  gap:10px;
    width:460px;
}
  /* Контейнер для картинок */
  .side-image {
    width:45px;        /* ширина под картинку */
          /* высота под картинку */
    flex-shrink:0;
    background:0;   /* фон если картинки нет */
    border-radius:0px; /* легкое скругление */
    overflow:hidden;
  }

  .side-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

.progress-wrapper {
  display:flex;
  align-items:center;
  gap:10px;
}

.side-image {
  width:45px;
  flex-shrink:0;
}

.side-image img {
  width:100%;
  display:block;
}

.progress-bar {
  width:400px;
  height:10px;
  background:#089ACC;
  border-radius:10px;
overflow:visible;
  position:relative;
}

/* === ПРОГРЕСС-ЗАЛИВКА === */
.progress-fill {
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  border-radius:10px;
  z-index:1;
  transition:width 0.5s linear;
}

.ticks {
  position:absolute;
  inset:0;
  display:flex;
  z-index:2;
  pointer-events:none;
}

.tick {
  flex:1;
  position:relative;
}

.tick::after {
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:1px;
  height:100%;
  background:rgba(255,255,255,0.15);
}

.tick:last-child::after {
  display:none;
}

.tick.active::after {
  background:rgba(255,255,255,0.15);
}


/* === DAYS INDICATOR === */
.days-indicator {
  position:absolute;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  background:#089ACC;
opacity: 100%;
  padding:2px 6px;
  border-radius:12px;
  white-space:nowrap;
  pointer-events:none;


  /* цвета и шрифты */
  --work-color:#E8E9EE;
  --calendar-color:#161F6D;
  --work-size:18px;
  --calendar-size:15px;
  --work-font:'Boogaloo';
  --calendar-font:'Boogaloo';
          /* сглаживание шрифта */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#daysWork {
  color:var(--work-color);
  font-size:var(--work-size);
  font-family:var(--work-font);
      /* сглаживание шрифта */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#daysCalendar {
  color:var(--calendar-color);
  font-size:var(--calendar-size);
  font-family:var(--calendar-font);
      /* сглаживание шрифта */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}