/*=========================================================
  SMKN 4 JEMBER
  DASHBOARD MONITORING KBM
  PREMIUM UI V2
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/*=========================================================
ROOT COLOR
==========================================================*/

:root{

--primary:#2563eb;
--primary2:#1d4ed8;

--success:#10b981;
--warning:#f59e0b;
--danger:#ef4444;
--purple:#7c3aed;

--info:#06b6d4;

--bg:#f4f7fb;

--card:#ffffff;

--text:#1e293b;

--text2:#64748b;

--border:#e5e7eb;

--shadow:
0 10px 25px rgba(0,0,0,.07);

--shadow-hover:
0 20px 40px rgba(0,0,0,.12);

--glass:
rgba(255,255,255,.75);

--glass-border:
rgba(255,255,255,.45);

--radius:22px;

--transition:.30s;

}


/*=========================================================
DARK MODE
==========================================================*/

body.dark{

--bg:#0f172a;

--card:#1e293b;

--text:#f8fafc;

--text2:#cbd5e1;

--border:#334155;

--glass:rgba(30,41,59,.85);

--glass-border:rgba(255,255,255,.08);

--shadow:
0 12px 30px rgba(0,0,0,.45);

background:var(--bg);

color:var(--text);

}


/*=========================================================
RESET
==========================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:var(--bg);

color:var(--text);

transition:.35s;

overflow-x:hidden;

}


/*=========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#e5e7eb;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--primary),
#60a5fa);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary2);

}


/*=========================================================
CONTAINER
==========================================================*/

.container{

width:min(96%,1700px);

margin:auto;

padding:25px 0 50px;

}


/*=========================================================
HEADER
==========================================================*/

.header{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 35px;

border-radius:28px;

background:var(--glass);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border:1px solid var(--glass-border);

box-shadow:var(--shadow);

position:sticky;

top:15px;

z-index:999;

transition:.3s;

margin-bottom:28px;

}

.header:hover{

box-shadow:var(--shadow-hover);

}


/*=========================================================
LOGO
==========================================================*/

.logo-area{

display:flex;

align-items:center;

gap:20px;

}

.logo{

width:74px;

height:74px;

object-fit:contain;

border-radius:18px;

padding:6px;

background:white;

box-shadow:

0 8px 18px rgba(0,0,0,.08);

}


/*=========================================================
TITLE
==========================================================*/

.title h1{

font-size:34px;

font-weight:700;

letter-spacing:.5px;

color:var(--primary);

margin-bottom:4px;

}

.title p{

font-size:17px;

color:var(--text2);

font-weight:500;

}


/*=========================================================
RIGHT HEADER
==========================================================*/

.right{

display:flex;

flex-direction:column;

align-items:flex-end;

gap:6px;

}

#tanggal{

font-size:15px;

font-weight:500;

color:var(--text2);

}

#clock{

font-size:46px;

font-weight:700;

color:var(--primary);

letter-spacing:2px;

}


/*=========================================================
LOGIN BUTTON
==========================================================*/

.login{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:12px 24px;

margin-top:8px;

border-radius:14px;

text-decoration:none;

font-weight:600;

font-size:15px;

color:white;

background:linear-gradient(
135deg,
var(--primary),
#60a5fa);

transition:.30s;

box-shadow:

0 10px 20px rgba(37,99,235,.35);

}

.login:hover{

transform:translateY(-3px);

box-shadow:

0 18px 30px rgba(37,99,235,.45);

}

.login i{

font-size:17px;

}


/*=========================================================
GLASS EFFECT
==========================================================*/

.glass{

background:var(--glass);

backdrop-filter:blur(16px);

-webkit-backdrop-filter:blur(16px);

border:1px solid var(--glass-border);

}


/*=========================================================
SECTION TITLE
==========================================================*/

.section-title{

font-size:24px;

font-weight:700;

margin:25px 0 15px;

color:var(--text);

}

.section-subtitle{

font-size:15px;

color:var(--text2);

margin-top:3px;

}


/*=========================================================
UTILITY
==========================================================*/

.text-primary{

color:var(--primary);

}

.text-success{

color:var(--success);

}

.text-warning{

color:var(--warning);

}

.text-danger{

color:var(--danger);

}

.text-purple{

color:var(--purple);

}

.shadow{

box-shadow:var(--shadow);

}

.radius{

border-radius:var(--radius);

}

.transition{

transition:var(--transition);

}

/*=========================================================
KPI CARDS
==========================================================*/

.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

margin-top:30px;

align-items:stretch;

}


/*=========================================================
CARD
==========================================================*/

.card{

position:relative;

overflow:hidden;

background:var(--card);

border-radius:24px;

padding:26px;

display:flex;

align-items:center;

gap:20px;

box-shadow:var(--shadow);

transition:.35s;

cursor:pointer;

border:1px solid rgba(255,255,255,.25);

min-height:160px;

}

.card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-hover);

}


/* efek cahaya */

.card::before{

content:"";

position:absolute;

top:-60px;

right:-60px;

width:180px;

height:180px;

border-radius:50%;

background:rgba(255,255,255,.12);

transition:.4s;

}

.card:hover::before{

transform:scale(1.25);

}

.card::after{

content:"";

position:absolute;

left:-120px;

bottom:-120px;

width:220px;

height:220px;

border-radius:50%;

background:rgba(255,255,255,.08);

}


/*=========================================================
ICON
==========================================================*/

.icon{

width:82px;

height:82px;

min-width:82px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:white;

box-shadow:

0 12px 25px rgba(0,0,0,.15);

transition:.35s;

z-index:2;

}

.card:hover .icon{

transform:rotate(10deg) scale(1.08);

}


/*=========================================================
ICON COLOR
==========================================================*/

.blue{

background:linear-gradient(
135deg,
#3b82f6,
#2563eb);

}

.green{

background:linear-gradient(
135deg,
#22c55e,
#16a34a);

}

.orange{

background:linear-gradient(
135deg,
#fbbf24,
#f59e0b);

}

.purple{

background:linear-gradient(
135deg,
#8b5cf6,
#7c3aed);

}

.red{

background:linear-gradient(
135deg,
#ef4444,
#dc2626);

}


/*=========================================================
TEXT
==========================================================*/

.card h2{

font-size:48px;

font-weight:700;

line-height:1;

margin-bottom:8px;

color:var(--text);

}

.card p{

font-size:17px;

font-weight:500;

color:var(--text2);

}


/*=========================================================
CARD TOP LABEL
==========================================================*/

.card-label{

font-size:13px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:var(--text2);

margin-bottom:8px;

}


/*=========================================================
SMALL PROGRESS
==========================================================*/

.card-progress{

margin-top:14px;

height:8px;

background:rgba(0,0,0,.08);

border-radius:50px;

overflow:hidden;

}

.card-progress span{

display:block;

height:100%;

border-radius:50px;

background:linear-gradient(
90deg,
#60a5fa,
#2563eb);

width:0%;

animation:growBar 1.5s ease forwards;

}


/*=========================================================
BADGE
==========================================================*/

.card-badge{

display:inline-flex;

align-items:center;

gap:6px;

padding:5px 12px;

border-radius:30px;

font-size:12px;

font-weight:600;

margin-top:12px;

background:rgba(255,255,255,.18);

color:white;

backdrop-filter:blur(8px);

}


/*=========================================================
GRADIENT CARD
==========================================================*/

.card-primary{

background:linear-gradient(
135deg,
#2563eb,
#60a5fa);

color:white;

}

.card-primary h2,

.card-primary p{

color:white;

}

.card-success{

background:linear-gradient(
135deg,
#10b981,
#34d399);

color:white;

}

.card-success h2,

.card-success p{

color:white;

}

.card-warning{

background:linear-gradient(
135deg,
#f59e0b,
#fbbf24);

color:white;

}

.card-warning h2,

.card-warning p{

color:white;

}

.card-purple{

background:linear-gradient(
135deg,
#7c3aed,
#a78bfa);

color:white;

}

.card-purple h2,

.card-purple p{

color:white;

}


/*=========================================================
GLOW
==========================================================*/

.card-primary{

box-shadow:
0 20px 35px rgba(37,99,235,.30);

}

.card-success{

box-shadow:
0 20px 35px rgba(16,185,129,.30);

}

.card-warning{

box-shadow:
0 20px 35px rgba(245,158,11,.30);

}

.card-purple{

box-shadow:
0 20px 35px rgba(124,58,237,.30);

}


/*=========================================================
NUMBER EFFECT
==========================================================*/

.card h2{

transition:.4s;

}

.card:hover h2{

transform:scale(1.08);

}


/*=========================================================
ICON BACKGROUND
==========================================================*/

.card-primary .icon,

.card-success .icon,

.card-warning .icon,

.card-purple .icon{

background:rgba(255,255,255,.18);

backdrop-filter:blur(10px);

}


/*=========================================================
RIBBON
==========================================================*/

.ribbon{

position:absolute;

top:18px;

right:-35px;

padding:6px 45px;

font-size:11px;

font-weight:bold;

letter-spacing:1px;

transform:rotate(45deg);

background:white;

color:#2563eb;

box-shadow:0 4px 10px rgba(0,0,0,.12);

}


/*=========================================================
ANIMATION
==========================================================*/

@keyframes growBar{

0%{

width:0;

}

100%{

width:100%;

}

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

.card:hover .icon{

animation:floating .8s infinite;

}


/*=========================================================
COUNTER
==========================================================*/

.counter{

font-variant-numeric:tabular-nums;

letter-spacing:1px;

}


/*=========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1200px){

.cards{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

gap:18px;

}

.card{

padding:20px;

min-height:135px;

}

.card h2{

font-size:38px;

}

.icon{

width:68px;

height:68px;

font-size:28px;

}

}
/*=========================================================
PROGRESS BOX
=========================================================*/

.progress-box{

margin-top:28px;

padding:25px 30px;

background:var(--card);

border-radius:24px;

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

transition:.3s;

}

.progress-box:hover{

box-shadow:var(--shadow-hover);

transform:translateY(-4px);

}

.progress-box::before{

content:"";

position:absolute;

left:-80px;

top:-80px;

width:180px;

height:180px;

border-radius:50%;

background:rgba(37,99,235,.08);

}

.progress-box::after{

content:"";

position:absolute;

right:-60px;

bottom:-60px;

width:150px;

height:150px;

border-radius:50%;

background:rgba(37,99,235,.05);

}

.percent{

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:700;

margin-bottom:14px;

color:var(--text);

position:relative;

z-index:2;

}


/*=========================================================
PROGRESS BAR
=========================================================*/

.progress{

width:100%;

height:18px;

background:#e5e7eb;

border-radius:40px;

overflow:hidden;

position:relative;

z-index:2;

}

body.dark .progress{

background:#334155;

}

.progress-bar{

height:100%;

width:0;

border-radius:40px;

background:linear-gradient(
90deg,
#2563eb,
#60a5fa,
#38bdf8);

background-size:300%;

animation:
gradientMove 3s linear infinite;

transition:width .8s ease;

position:relative;

overflow:hidden;

}

.progress-bar::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.5),
transparent);

animation:shine 2s infinite;

}


/*=========================================================
JAM BERLANGSUNG
=========================================================*/

.jam-box{

margin-top:30px;

background:linear-gradient(
135deg,
#fff8e8,
#ffffff);

border-radius:24px;

padding:30px;

display:flex;

align-items:center;

gap:30px;

box-shadow:var(--shadow);

transition:.35s;

overflow:hidden;

position:relative;

}

body.dark .jam-box{

background:#1e293b;

}

.jam-box:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-hover);

}

.jam-box::after{

content:"";

position:absolute;

right:-50px;

bottom:-50px;

width:180px;

height:180px;

border-radius:50%;

background:rgba(245,158,11,.08);

}

.jam-icon{

width:95px;

height:95px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(
135deg,
#f59e0b,
#fbbf24);

color:white;

font-size:42px;

box-shadow:
0 15px 30px rgba(245,158,11,.35);

animation:pulseClock 2s infinite;

flex-shrink:0;

}

.jam-besar{

font-size:38px;

font-weight:700;

color:#b45309;

line-height:1.3;

}

body.dark .jam-besar{

color:#fbbf24;

}

.jam-status{

margin-top:10px;

display:inline-flex;

align-items:center;

gap:10px;

padding:8px 18px;

background:#dcfce7;

color:#15803d;

border-radius:30px;

font-size:15px;

font-weight:700;

}

body.dark .jam-status{

background:#14532d;

color:#bbf7d0;

}


/*=========================================================
SUMMARY
=========================================================*/

.summary{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:24px;

margin-top:30px;

}

.summary-card{

background:var(--card);

padding:24px;

border-radius:22px;

display:flex;

align-items:center;

gap:18px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}

.summary-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-hover);

}

.summary-card::before{

content:"";

position:absolute;

right:-45px;

top:-45px;

width:120px;

height:120px;

border-radius:50%;

background:rgba(37,99,235,.05);

}

.summary-icon{

width:72px;

height:72px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:white;

flex-shrink:0;

box-shadow:0 10px 20px rgba(0,0,0,.12);

}

.summary-title{

font-size:15px;

font-weight:500;

color:var(--text2);

margin-bottom:8px;

}

.summary-value{

font-size:42px;

font-weight:700;

color:var(--text);

line-height:1;

}

.summary-info{

margin-top:8px;

font-size:13px;

color:var(--text2);

}


/*=========================================================
ANIMATION
=========================================================*/

@keyframes pulseClock{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

@keyframes shine{

100%{

left:120%;

}

}

@keyframes gradientMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:992px){

.summary{

grid-template-columns:repeat(2,1fr);

}

.jam-box{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.summary{

grid-template-columns:1fr;

}

.jam-box{

padding:22px;

}

.jam-icon{

width:80px;

height:80px;

font-size:34px;

}

.jam-besar{

font-size:28px;

}

.summary-value{

font-size:34px;

}

}

@media(max-width:480px){

.progress-box{

padding:18px;

}

.percent{

font-size:16px;

}

.progress{

height:14px;

}

.jam-besar{

font-size:22px;

}

.jam-status{

font-size:13px;

padding:7px 14px;

}

}
/*=========================================================
TABLE CONTAINER
=========================================================*/

.table-box{

margin-top:30px;

background:var(--card);

border-radius:24px;

box-shadow:var(--shadow);

overflow:hidden;

transition:.35s;

}

.table-box:hover{

box-shadow:var(--shadow-hover);

}


/*=========================================================
TABLE SCROLL
=========================================================*/

.table-wrapper{

width:100%;

overflow-x:auto;

overflow-y:auto;

max-height:650px;

}

.table-wrapper::-webkit-scrollbar{

height:10px;

width:10px;

}

.table-wrapper::-webkit-scrollbar-thumb{

background:linear-gradient(
90deg,
#2563eb,
#60a5fa);

border-radius:20px;

}


/*=========================================================
TABLE
=========================================================*/

table{

width:100%;

border-collapse:collapse;

min-width:1200px;

background:transparent;

}


/*=========================================================
HEADER
=========================================================*/

thead{

position:sticky;

top:0;

z-index:100;

}

thead tr{

background:linear-gradient(
90deg,
#2563eb,
#3b82f6);

}

thead th{

padding:18px;

color:white;

font-size:15px;

font-weight:600;

letter-spacing:.5px;

text-transform:uppercase;

white-space:nowrap;

border:none;

}


/*=========================================================
BODY
=========================================================*/

tbody tr{

transition:.25s;

}

tbody tr:nth-child(odd){

background:#ffffff;

}

tbody tr:nth-child(even){

background:#f8fafc;

}

body.dark tbody tr:nth-child(odd){

background:#1e293b;

}

body.dark tbody tr:nth-child(even){

background:#243447;

}

tbody tr:hover{

background:#e8f1ff !important;

transform:scale(1.003);

}

body.dark tbody tr:hover{

background:#334155 !important;

}


/*=========================================================
CELL
=========================================================*/

td{

padding:16px 18px;

font-size:15px;

color:var(--text);

border-bottom:1px solid var(--border);

vertical-align:middle;

line-height:1.5;

}

td:first-child{

font-weight:600;

color:var(--primary);

}


/*=========================================================
BADGE
=========================================================*/

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:7px 14px;

border-radius:30px;

font-size:13px;

font-weight:600;

letter-spacing:.3px;

min-width:95px;

}


/*=========================================================
SUDAH
=========================================================*/

.sudah{

background:#dcfce7;

color:#15803d;

border:1px solid #bbf7d0;

}


/*=========================================================
BELUM
=========================================================*/

.belum{

background:#fee2e2;

color:#b91c1c;

border:1px solid #fecaca;

}


/*=========================================================
HAMPIR
=========================================================*/

.hampir{

background:#fef3c7;

color:#b45309;

border:1px solid #fde68a;

}


/*=========================================================
TELAT
=========================================================*/

.telat{

background:#e5e7eb;

color:#374151;

border:1px solid #d1d5db;

}


/*=========================================================
DARK BADGE
=========================================================*/

body.dark .sudah{

background:#14532d;

color:#bbf7d0;

border:none;

}

body.dark .belum{

background:#7f1d1d;

color:#fecaca;

border:none;

}

body.dark .hampir{

background:#78350f;

color:#fde68a;

border:none;

}

body.dark .telat{

background:#374151;

color:#e5e7eb;

border:none;

}


/*=========================================================
UPDATED DATE
=========================================================*/

td:nth-child(6){

font-size:13px;

line-height:1.4;

color:var(--text2);

}


/*=========================================================
MATERI
=========================================================*/

td:nth-child(5){

max-width:350px;

white-space:normal;

word-break:break-word;

}


/*=========================================================
ROW ANIMATION
=========================================================*/

tbody tr{

animation:fadeRow .35s ease;

}

@keyframes fadeRow{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=========================================================
TABLE TITLE
=========================================================*/

.table-title{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 25px;

border-bottom:1px solid var(--border);

}

.table-title h3{

font-size:22px;

font-weight:700;

color:var(--text);

}

.table-title span{

font-size:14px;

color:var(--text2);

}


/*=========================================================
SEARCH BOX
=========================================================*/

.table-search{

position:relative;

}

.table-search input{

padding:11px 18px;

padding-left:42px;

border-radius:12px;

border:1px solid var(--border);

background:var(--bg);

color:var(--text);

font-size:14px;

outline:none;

transition:.25s;

}

.table-search input:focus{

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.table-search i{

position:absolute;

left:14px;

top:50%;

transform:translateY(-50%);

color:#64748b;

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:992px){

table{

min-width:1000px;

}

}

@media(max-width:768px){

.table-title{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.table-search{

width:100%;

}

.table-search input{

width:100%;

}

thead th{

padding:15px;

font-size:13px;

}

td{

padding:14px;

font-size:13px;

}

.badge{

font-size:12px;

padding:6px 12px;

}

}

@media(max-width:480px){

.table-box{

border-radius:18px;

}

thead th{

font-size:12px;

}

td{

font-size:12px;

}

}
/*=========================================================
FOOTER
=========================================================*/

.footer{

margin-top:35px;

padding:20px;

text-align:center;

font-size:15px;

font-weight:500;

color:var(--text2);

background:var(--card);

border-radius:18px;

box-shadow:var(--shadow);

}

.footer i{

margin-right:8px;

color:var(--primary);

}


/*=========================================================
DARK MODE BUTTON
=========================================================*/

.theme-toggle{

position:fixed;

right:25px;

bottom:25px;

width:58px;

height:58px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563eb,#60a5fa);

color:#fff;

font-size:22px;

cursor:pointer;

box-shadow:0 15px 30px rgba(37,99,235,.35);

transition:.3s;

z-index:9999;

}

.theme-toggle:hover{

transform:scale(1.1) rotate(15deg);

}


/*=========================================================
CARD HOVER
=========================================================*/

.card,
.summary-card,
.progress-box,
.jam-box,
.table-box{

transition:all .35s ease;

}


/*=========================================================
FADE ANIMATION
=========================================================*/

.fade-up{

animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=========================================================
BOUNCE ICON
=========================================================*/

.icon:hover,
.summary-icon:hover{

animation:bounce .8s;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}


/*=========================================================
PULSE
=========================================================*/

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(37,99,235,.5);

}

70%{

box-shadow:0 0 0 15px rgba(37,99,235,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,99,235,0);

}

}


/*=========================================================
24 INCH
=========================================================*/

@media(min-width:1600px){

.container{

max-width:1700px;

}

.cards{

grid-template-columns:repeat(4,1fr);

gap:28px;

}

.summary{

grid-template-columns:repeat(3,1fr);

}

.card{

min-height:180px;

}

.card h2{

font-size:54px;

}

}


/*=========================================================
LAPTOP
=========================================================*/

@media(max-width:1400px){

.container{

width:97%;

}

}


/*=========================================================
1200
=========================================================*/

@media(max-width:1200px){

.header{

padding:20px;

}

.title h1{

font-size:30px;

}

#clock{

font-size:38px;

}

}


/*=========================================================
992
=========================================================*/

@media(max-width:992px){

.header{

flex-direction:column;

gap:18px;

text-align:center;

}

.logo-area{

flex-direction:column;

}

.right{

align-items:center;

}

.cards{

grid-template-columns:repeat(2,1fr);

}

.summary{

grid-template-columns:repeat(2,1fr);

}

}


/*=========================================================
768
=========================================================*/

@media(max-width:768px){

.container{

padding:12px;

}

.header{

padding:18px;

}

.title h1{

font-size:24px;

}

.title p{

font-size:15px;

}

.logo{

width:60px;

height:60px;

}

#clock{

font-size:30px;

}

.cards{

grid-template-columns:1fr;

}

.summary{

grid-template-columns:1fr;

}

.card{

padding:20px;

}

.card h2{

font-size:38px;

}

.progress-box{

padding:20px;

}

.jam-box{

flex-direction:column;

text-align:center;

padding:22px;

}

.theme-toggle{

width:52px;

height:52px;

font-size:20px;

right:18px;

bottom:18px;

}

}


/*=========================================================
576
=========================================================*/

@media(max-width:576px){

body{

font-size:14px;

}

.container{

width:100%;

padding:10px;

}

.header{

border-radius:18px;

}

.card{

border-radius:18px;

}

.summary-card{

border-radius:18px;

}

.table-box{

border-radius:18px;

}

.footer{

font-size:13px;

}

}


/*=========================================================
480
=========================================================*/

@media(max-width:480px){

.title h1{

font-size:20px;

}

#clock{

font-size:26px;

}

.card h2{

font-size:32px;

}

.summary-value{

font-size:30px;

}

.jam-besar{

font-size:20px;

}

.login{

width:100%;

}

}


/*=========================================================
360
=========================================================*/

@media(max-width:360px){

.title h1{

font-size:18px;

}

.card h2{

font-size:28px;

}

.icon{

width:58px;

height:58px;

font-size:24px;

}

.summary-icon{

width:58px;

height:58px;

font-size:24px;

}

}


/*=========================================================
PRINT
=========================================================*/

@media print{

body{

background:#fff;

}

.header,

.login,

.theme-toggle,

.footer{

display:none;

}

.card,

.summary-card,

.progress-box,

.table-box{

box-shadow:none;

border:1px solid #ddd;

}

}


/*=========================================================
SELECTION
=========================================================*/

::selection{

background:#2563eb;

color:#fff;

}


/*=========================================================
FOCUS
=========================================================*/

button:focus,
input:focus,
select:focus,
textarea:focus{

outline:none;

box-shadow:0 0 0 4px rgba(37,99,235,.18);

}


/*=========================================================
LINK
=========================================================*/

a{

transition:.25s;

}

a:hover{

opacity:.92;

}


/*=========================================================
END
=========================================================*/