@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body{background:#fff!important;}
#pomodoroapp-Sec{padding:120px 0 80px;}
input[type="range"] {
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, #2196f3 0%, #d1d5db 0%);
    border-radius: 5px;
    outline: none;
    transition: background 450ms ease-in;
  }
   
  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #2196f3;
    cursor: pointer;
    border: none;
    margin-top:0px; /* align thumb */
  }
   
  input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #2196f3;
    cursor: pointer;
    border: none;
  }

#pomodoroapp-Sec .pomo-settings-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          visibility: hidden;
          opacity: 0;
          transition: visibility 0s, opacity 0.3s;
      }

      #pomodoroapp-Sec .pomo-settings-modal.show {
          visibility: visible;
          opacity: 1;
      }

      #pomodoroapp-Sec .pomo-settings-content {
          background-color: white;
          width: 90%;    animation: loginPopupSlideIn 0.3s ease-out;
          max-width: 450px;
          border-radius: 8px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          padding: 20px;
          position: relative;
      }

      #pomodoroapp-Sec .pomo-settings-header {
       display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom:0px; }

      #pomodoroapp-Sec .pomo-settings-title {
          font-size: 18px;
          font-weight: bold;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      #pomodoroapp-Sec .pomo-settings-title svg {
          width:24px;
          height:24px;
      }
      hr.bbottom-sec{ border-bottom: 1px solid #B9B9B9;margin-bottom: 18px;}
      .popup-iner-heading{color: #000;font-size: 16px;font-weight: 600;    margin-bottom: 18px;}
      #pomodoroapp-Sec .pomo-close-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: #4C4E4F;
        padding: 0;
        font-size: 30px;
        margin: 0;
        position: relative;
        top: -8px;
      }

      #pomodoroapp-Sec .pomo-timer-setting {
          margin-bottom: 20px;
      }

      #pomodoroapp-Sec .pomo-timer-setting-label {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-weight: 500;
        color: #000;
        font-size: 16px;
      }
      
      #pomodoroapp-Sec .pomo-timer-setting-label .pomo-timer-icon {
        width:22px;
        height:22px;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      #pomodoroapp-Sec .pomo-time-slider {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 4px;
        background: linear-gradient(to right, #0073e6 0%, #ddd 0%);
        outline: none;
        transition: background 150ms;
      }
      
      
      #pomodoroapp-Sec .pomo-time-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        background: #0073e6;
        border-radius: 50%;
        cursor: pointer;
        border: none;
        margin-top:0px;
      }
      
      #pomodoroapp-Sec .pomo-time-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: #0073e6;
        border: none;
        border-radius: 50%;
        cursor: pointer;
      }
      
      #pomodoroapp-Sec .pomo-slider-container {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      
      #pomodoroapp-Sec .pomo-slider-container input[type="range"] {
        flex-grow: 1;
      }
      
      #pomodoroapp-Sec .pomo-slider-container input[type="number"] {
        width: 50px;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px;color: #000;font-weight: 500;
        font-size: 14px;font-family: "Inter", sans-serif;
      }
      

      #pomodoroapp-Sec .pomo-apply-btn {
          width: 100%;
          padding: 12px;
          background-color: #2196f3;
          color: white;
          border: none;
          border-radius: 50px;
          font-weight: bold;
          cursor: pointer;
          transition: background-color 0.3s;
      }

      #pomodoroapp-Sec .pomo-apply-btn:hover {
          background-color: #0060be;
      }

      #pomodoroapp-Sec .pomo-auth-buttons {
          display: flex;
          gap: 10px;
      }

      #pomodoroapp-Sec .pomo-btn {
          padding: 8px 15px;
          border-radius: 50px;
          font-weight: 500;
          cursor: pointer;
          border: none;
          transition: background-color 0.3s, color 0.3s;
      }

      #pomodoroapp-Sec .pomo-btn-outline {
          border: 1px solid #2196f3;
          color: #2196f3;
          background-color: white;
      }

      #pomodoroapp-Sec .pomo-btn-primary {
          background-color: #2196f3;
          color: white;
      }

      #pomodoroapp-Sec .pomo-container {
          display: flex;
          flex-wrap: wrap;
          padding: 20px 0;
          gap: 20px;
          flex: 1;
      }

      #pomodoroapp-Sec .pomo-left-section {
          flex: 1;
          min-width: 300px;
          padding: 10px 20px 10px 0;
      }

      #pomodoroapp-Sec .pomo-right-section {
        min-width: 300px;
        background-color: #F6F7F7;
        padding: 20px;
        border-radius: 10px;
        display: flex;align-items: center;
        flex-direction: column;
        border: 1px solid #F6F7F7;
        width: 470px;
        margin: 0 0 0 auto;
      }

      #pomodoroapp-Sec .pomo-title {
          font-size:38px;
          margin-bottom: 18px;
          color: #333;
          font-weight: 700;
          letter-spacing: 1px;

      }

      #pomodoroapp-Sec .pomo-control-btn.report-tp-btn, #pomodoroapp-Sec .pomo-control-btn.setting-tp-btn{
    font-size: 12px; color: #2196f3; outline: none; padding: 0; border-radius: 0;  font-weight: 600;}
    
        #pomodoroapp-Sec .pomo-control-btn.report-tp-btn:hover, #pomodoroapp-Sec .pomo-control-btn.setting-tp-btn:hover{color:#243146;border-bottom: 1px solid #243146;}
      #pomodoroapp-Sec .pomo-subtitle {
          font-size: 22px;
          color: #2196f3;
          margin-bottom: 30px;
          font-weight: 500;
      }

      #pomodoroapp-Sec .pomo-stats-container {
          margin-top: 30px;
      }

      #pomodoroapp-Sec .pomo-stats-header {
          display: flex;
          align-items: center;
          margin-bottom: 26px;
          color: #333;
          font-weight: 500;
          font-size: 1.2rem;
      }

      #pomodoroapp-Sec .pomo-stats-header::before {
          content: "";
          display: inline-block;
          width: 24px;
          height: 24px;
          background-color: #2196f3;
          margin-right: 10px;
          border-radius: 4px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16H0V0zm1 1v14h14V1H1zm2 2h2v10H3V3zm4 5h2v5H7V8zm4-3h2v8h-2V5z'/%3E%3C/svg%3E");
          background-size: 16px;
          background-position: center;
          background-repeat: no-repeat;
      }



      #pomodoroapp-Sec .pomo-stats-table {
          width: 100%;
          border-collapse: collapse; border: none !important;
      }

      #pomodoroapp-Sec .pomo-stats-table thead {
          background-color:#fff;
      }

      #pomodoroapp-Sec .pomo-stats-table th {padding: 12px 15px;   border: none !important;text-align: left;    background: transparent !important;border-bottom: 1px solid #e9ecef;font-size: 16px;font-weight:700;
      }

      #pomodoroapp-Sec .pomo-stats-table td {
          padding: 12px 15px;   border-top: none !important;border-left: none !important;border-right: none !important;
          text-align: left;    background:#f6f7f7 !important;
          border-bottom:10px solid #ffffff;font-size: 16px;font-weight: 600;  font-family: "Inter", sans-serif;
      }

      #pomodoroapp-Sec .pomo-stats-table tbody tr {
          margin: 10px 0;
          border-radius: 5px;
          background-color: #fff;
      }

      #pomodoroapp-Sec .pomo-activity-indicator {
          width: 5px;
          height: 40px;
          border-radius: 3px;
          margin-right: 10px;
      }

      #pomodoroapp-Sec .pomo-indicator-pomodoro {
          background-color: #2196f3;
      }

      #pomodoroapp-Sec .pomo-indicator-short-break {
          background-color: #4CAF4F;
      }

      #pomodoroapp-Sec .pomo-indicator-long-break {
          background-color: #FA8A28;
      }

      #pomodoroapp-Sec .pomo-timer-header {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom:28px;    margin-top: 12px;
      }

      #pomodoroapp-Sec .pomo-timer-title {
          font-size: 18px;
          font-weight: bold;
          color: #333;
      }

      #pomodoroapp-Sec .pomo-control-buttons {
          display: flex;
          gap:10px;
      }

      #pomodoroapp-Sec .pomo-control-btn {
          padding: 8px 15px;
          border-radius: 5px;
          border: none;
          background-color: #f8f9fa;
          display: flex;
          align-items: center;
          gap: 1px;
          cursor: pointer;
      }

      #pomodoroapp-Sec .pomo-control-btn svg {
          width: 14px;
          height: 14px;
      }

      #pomodoroapp-Sec .pomo-tabs {
          display: flex;
          gap:8px;
          margin-bottom:10px;
          width: 100%;
          max-width: 380px;
      }

      #pomodoroapp-Sec .pomo-tab {
          padding: 8px 15px;
          border-radius: 50px;
          font-weight: 500;
          cursor: pointer;
          border: none;
          font-size: 14px;
          flex: 1;
          text-align: center;
      }

      #pomodoroapp-Sec .pomo-tab.active {
          background-color: #2196f3;
          color: white;
          font-weight: bold;outline: none!important;
      }

      #pomodoroapp-Sec .pomo-tab:not(.active) {
          background-color: #e9ecef;
          color: #333;
      }
      #pomodoroapp-Sec .pomo-tab button:focus,
      #pomodoroapp-Sec .pomo-tab button:active {
    outline: none !important;
    box-shadow: none !important;
}


      #pomodoroapp-Sec .pomo-timer-display {
          position: relative;
          width:230px;
          height: 230px;
          margin: 20px 0 12px;
      }

      #pomodoroapp-Sec .pomo-timer-circle {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #e9ecef;
          position: relative;
          overflow: hidden;
      }

      #pomodoroapp-Sec .pomo-timer-circle::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 200px;
          height: 200px;
          background: white;
          border-radius: 50%;
          z-index: 2;
      }

      #pomodoroapp-Sec .pomo-progress {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          clip: rect(0, 125px, 250px, 0);
          z-index: 1;
      }

      #pomodoroapp-Sec .pomo-timer-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 3rem;
          font-weight: bold;
          z-index: 3;  font-family: "Inter", sans-serif;
      }

      #pomodoroapp-Sec .pomo-timer-buttons {
          display: flex;
          gap: 10px;
          margin: 20px 0;
      }

      #pomodoroapp-Sec .pomo-timer-btn {
        padding: 6px 25px;
        border-radius: 50px;
        font-weight: 600;
        cursor: pointer;
        letter-spacing: 0px;
        font-size: 18px;
        border: none;
        transition: background-color 0.3s;
      }

      #pomodoroapp-Sec .pomo-start-btn {
          background-color: #2196f3;
          color: white;
          display: flex;
          align-items: center;
          gap: 5px;
      }

      #pomodoroapp-Sec .pomo-reset-btn {
          background-color: #e9ecef;
          color: #333;
          display: flex;
          align-items: center;
          gap: 5px;
      }


      /*****Login******/
      .login-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none; /* Hide by default */
        align-items: center;
        justify-content: center;
        z-index: 2000;
    }

    #loginPopupOverlay .login-popup-modal {
        background: white;
        border-radius: 12px;
        width: 100%;
        max-width: 400px;
        padding: 32px;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        animation: loginPopupSlideIn 0.3s ease-out;
    }

    @keyframes loginPopupSlideIn {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

   #loginPopupOverlay .login-popup-close-btn {
        position: absolute;
        top: 16px;
        right: 16px;    outline: none;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #666;
        padding: 8px;
        border-radius: 50%;
        transition: background-color 0.2s;
    }

    #loginPopupOverlay .login-popup-close-btn:hover {
        color: #000;
    }

    #loginPopupOverlay .login-popup-modal h2 {
        font-size: 20px;
        font-weight:700;
        color: #333;
        margin-bottom: 8px;
    }

    #loginPopupOverlay .login-popup-modal p {
        color: #303030;
    margin-bottom: 18px;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    }

    #loginPopupOverlay .login-form-group {
        margin-bottom:15px;
    }

    #loginPopupOverlay .login-form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }

    #loginPopupOverlay .login-email-input {
        width: 100%;
        height: 46px;
        padding: 16px;
        border: 2px solid #e1e5e9;
        border-radius: 8px;
        font-size: 16px;margin-bottom:4px;
        transition: border-color 0.2s, box-shadow 0.2s;
        background-color: #f8f9fa;
    }

    #loginPopupOverlay .login-email-input:focus {
        outline: none;
        border-color: #2196f3;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background-color: white;
    }

    #loginPopupOverlay .login-email-input::placeholder {
        color: #9ca3af;
    }

    #loginPopupOverlay .login-submit-btn {
        width: 100%;
        padding: 12px;
        background:#2196f3;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;outline: none;;
        font-weight: 500;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    #loginPopupOverlay .login-submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    #loginPopupOverlay .login-submit-btn:active {
        transform: translateY(0);
    }

    #loginPopupOverlay #error-message{    display: block;
        font-size: 14px;
        color: #ff0000;
        font-weight: 500;
        margin-bottom: 12px;
        margin-top: -7px;}


        #main-dashboard {
width: 100%;    
        margin: 0 auto;
            padding: 50px 0;
            background: #f5f5f5;
            display: none;

        }
        #alert-box{display: none;}
        .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 8px;
    font-weight: 600;
    font-size: 16px;
}

        .dashboard-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .dashboard-header__title {
            font-size: 2rem;
            font-weight: 600;
            color: #2c3e50;
        }

        .dashboard-section {
            margin-bottom: 50px;
        }

            .legend {
      display: flex;
      gap: 20px;
      align-items: center;
      padding: 10px 0 16px;
      font-family: Arial, sans-serif;
      font-size: 14px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legend-color {
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }

    .legend-sales { background-color: #2196f3; }  
    .legend-revenue { background-color: #4CAF4F; }
    .legend-profit { background-color: #FA8A28; }
        .section-header-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom:10px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #2c3e50;
        }

        .date-range {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #666;
            font-size: 0.9rem;
        }

        .icon-calendar {
            width: 16px;
            height: 16px;
            background: #666;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center;
            mask-size: contain;
            cursor: pointer;
        }

        .date-picker-wrapper {
            position: relative;
            display: inline-block;
        }

        .date-input-field {
            border: 1px solid #ddd;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.9rem;
            color: #666;
            background: white;
            cursor: pointer;
            min-width: 140px;
        }

        .date-input-field:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
        }

        .date-picker-modal {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            padding: 20px;
            display: none;
            min-width: 280px;
        }

        .date-picker-modal--active {
            display: block;
        }

        .date-picker-modal__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .date-picker-nav-btn {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: #666;
            padding: 5px;
            border-radius: 4px;
        }

        .date-picker-nav-btn:hover {
            background: #f0f0f0;
        }

        .date-picker-month-label {
            font-weight: 600;
            color: #333;
        }

        .date-picker-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }

        .date-picker-day {
            padding: 8px 4px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            font-size: 0.9rem;
            transition: all 0.2s ease;
        }

        .date-picker-day--header {
            font-weight: 600;
            color: #666;
            cursor: default;
            font-size: 0.8rem;
        }

        .date-picker-day:not(.date-picker-day--header):hover {
            background: #e7f3ff;
        }

        .date-picker-day--selected {
            background: #007bff;
            color: white;
        }

        .date-picker-day--other-month {
            color: #ccc;
        }

        .date-range-input-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .date-range-input {
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #ddd;
            padding: 8px 12px;
            border-radius: 4px;
            background: white;
            cursor: pointer;
            min-width: 160px;
        }

        .date-range-input:hover {
            border-color: #007bff;
        }

        .date-range-input--active {
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
        }

        .date-range-text {
            color: #666;
            font-size: 12px;
            flex: 1;    font-family: "Inter", sans-serif;
        }

        .chart-wrapper {
            position: relative;
            height: 400px;
            background: white;
            border-radius: 8px;
            padding: 20px;
        }

        #activity-log-section {
            margin-top: 50px;
        }

        .activity-log-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .activity-log-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #2c3e50;
        }

        .btn-export {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
        }

        .btn-export:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
        }

        .icon-export {
            width: 14px;
            height: 14px;
            background: white;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3C/svg%3E") no-repeat center;
            mask-size: contain;
        }

        #activity-log-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 3px solid #E2E2E2;
    overflow: hidden;
        }

        #activity-log-table th {
    background: #c4e5ff;
    padding: 10px 0 10PX 23PX;
    text-align: left;    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #000;    border-right: 2px solid #f5f5f5;
    border-bottom: 2px solid #e9ecef;
    FONT-SIZE: 17px;
        }

        #activity-log-table td {
padding: 12px;
    border-bottom: 2px solid #f5f5f5;
    color: #495057;
    font-family: "Inter", sans-serif;
    padding-left:24px;
    font-size: 14px;
    font-weight: 600;
    border-right: 2px solid #f5f5f5;
        }

        .activity-type--pomodoro { color:#007bff; }
.activity-type--short_break { color:#28a745; }
.activity-type--long_break { color: #fd7e14; }
        #activity-log-table tbody tr:hover {
            background: #f8f9fa;
            transition: background-color 0.2s ease;
        }

        #activity-log-table tbody tr:last-child td {
            border-bottom: none;
        }

 

        .activity-type--break {
            color: #fd7e14;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            #main-dashboard {
 
                padding: 15px 0;
                border-width: 2px;
            }

            .dashboard-header__title {
                font-size:18px;
            }

            .section-header-title,
            .activity-log-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .chart-wrapper {
                height: 300px;
                padding: 15px;
            }

            #activity-log-table {
                font-size: 0.9rem;
            }

            #activity-log-table th,
            #activity-log-table td {
                padding: 10px 8px;
            }

            .btn-export {
                padding: 8px 16px;
                font-size: 0.8rem;
            }
        }

        @media (max-width: 480px) {
            #activity-log-table {
                font-size: 0.8rem;
            }

            #activity-log-table th:nth-child(3),
            #activity-log-table td:nth-child(3) {
          
            }



            .chart-wrapper {
                height: 250px;
                padding: 10px;
            }
        }



        /*****Responsive code********/


        
      /* Responsive styles */
      @media (max-width : 768px) {
          .pomo-header {
              flex-direction: column;
              gap: 15px;
          }

          .pomo-nav {
              flex-wrap: wrap;
              justify-content: center;
          }

          .pomo-container {
              flex-direction: column;
          }

          .pomo-timer-display {
              width: 200px;
              height: 200px;
          }

          .pomo-timer-circle::before {
              width: 160px;
              height: 160px;
          }

          .pomo-timer-text {
              font-size: 2.5rem;
          }
      }

      @media (max-width: 480px) {

        #pomodoroapp-Sec .pomo-title {
    font-size: 24px;
    margin-bottom: 6px;
    letter-spacing: 0.48px;
}
#pomodoroapp-Sec .pomo-subtitle {font-size: 18px;color: #2196f3; margin-bottom: 16px;}
#pomodoroapp-Sec .pomo-stats-header {    font-size: 16px;}
#pomodoroapp-Sec{padding: 70px 0 40px;}
#pomodoroapp-Sec .pomo-right-section {width: 100%;padding:6px 19px ;min-width: 100%;}
#pomodoroapp-Sec .pomo-stats-table th {padding: 8px;font-size: 12px;    min-width: 100%;}
#pomodoroapp-Sec .pomo-left-section{min-width: 100%;padding: 10px 0;}
#pomodoroapp-Sec .pomo-stats-table td {    padding: 0 4px; text-align: left;  background: #f6f7f7 !important;border-bottom:6px solid #ffffff;font-size: 12px;}
.pomo-auth-buttons {width: 100%; justify-content: center;}
.pomo-stats-table th,.pomo-stats-table td {padding: 8px;}
.pomo-timer-display {width: 180px;height: 180px;}
.pomo-timer-circle::before {width: 140px; height: 140px;}
.pomo-timer-text {font-size: 2rem;}
.pomo-tabs {flex-direction: row; width: 80%;}
#pomodoroapp-Sec .pomo-tab {padding: 6px 4px; font-size: 12px;}
#pomodoroapp-Sec .pomo-timer-title {font-size: 16px;width: 100%;    margin-bottom: 10px;}
#pomodoroapp-Sec .pomo-control-buttons { display: inline-flex;   gap: 26px;}
#pomodoroapp-Sec .pomo-timer-header { width: 100%; display: block; margin-bottom: 14px;}
#pomodoroapp-Sec .pomo-timer-text{font-size: 2.6rem;}
#pomodoroapp-Sec .pomo-control-btn.report-tp-btn, #pomodoroapp-Sec .pomo-control-btn.setting-tp-btn {font-size: 13px;}
#pomodoroapp-Sec .pomo-timer-btn { padding: 6px 20px; font-size: 14px;}
#pomodoroapp-Sec .pomo-timer-buttons {margin: 8px 0 16px;}
#pomodoroapp-Sec .pomo-settings-title {font-size: 16px; gap: 6px;}
#pomodoroapp-Sec .pomo-settings-title svg {width: 18px;height: 18px;}
#pomodoroapp-Sec .pomo-close-btn{font-size: 24px;}
hr.bbottom-sec {margin-bottom: 13px;}
.popup-iner-heading { font-size: 14px; margin-bottom: 14px;}
#pomodoroapp-Sec .pomo-timer-setting-label {margin-bottom: 6px; font-size: 13px;}
#pomodoroapp-Sec .pomo-timer-setting {margin-bottom: 12px;}
#pomodoroapp-Sec .pomo-apply-btn {width: 100%;padding: 6px 0;font-size: 16px;}
#pomodoroapp-Sec .pomo-settings-content{padding: 16px 13px;}
#loginPopupOverlay .login-popup-modal{padding: 20px 13px;width: 90%;}
#loginPopupOverlay .login-popup-modal h2 {font-size:18px; margin-bottom: 14px;}
#loginPopupOverlay .login-popup-modal p { margin-bottom: 20px;  font-size:14px;}
		  #loginPopupOverlay .login-popup-close-btn{position: absolute;top: 0;}
		  .alert-success{font-size:12px;}
 #loginPopupOverlay .login-email-input { width: 100%;  height: 38px;font-size: 14px;}
 #loginPopupOverlay .login-submit-btn{padding:10px 12px;}
 #main-dashboard{margin:0;padding: 28px 0}
 .date-picker-modal { position: absolute;top: 100%;left: 0;}
 .section-title,.activity-log-title { font-size: 14px;}
.date-range-text {font-size: 11px;}
.legend-color { width: 4px;height: 13px;}
.legend {display: flex; gap: 13px; font-size: 13px;justify-content: center;}
#activity-log-table th{font-size: 12px;padding: 10px 6px;}
#activity-log-table td{font-size:11px;}
.date-range-input{padding: 8px 6px;}

}