/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Arial,sans-serif;

background:#f4f6f9;

color:#333;

font-size:16px;

line-height:1.5;

padding-bottom:30px;

}


/* HEADER */

.header{

background:#0d6efd;

color:white;

padding:15px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

box-shadow:
0 2px 10px rgba(0,0,0,.1);

}

.header h2{

font-size:22px;

}

.header-right{

margin-top:10px;

}


/* CONTAINER */

.container{

width:95%;

max-width:1100px;

margin:20px auto;

}


/* CARDS */

.card{

background:white;

padding:20px;

border-radius:12px;

margin-bottom:20px;

box-shadow:
0 2px 12px rgba(0,0,0,.08);

}

.title{

font-size:20px;

font-weight:bold;

margin-bottom:10px;

}

.number{

font-size:42px;

font-weight:bold;

color:#0d6efd;

}


/* BUTTONS */

.btn,
button{

display:inline-block;

padding:12px 18px;

background:#0d6efd;

color:white;

text-decoration:none;

border:none;

border-radius:8px;

cursor:pointer;

font-size:16px;

margin:5px;

transition:.3s;

}

.btn:hover,
button:hover{

background:#0b5ed7;

}


.btn-red{

background:red;

}

.btn-green{

background:#198754;

}

.btn-orange{

background:#fd7e14;

}


/* FORMS */

form{

width:100%;

}

input,
select,
textarea{

width:100%;

padding:12px;

margin-top:10px;

margin-bottom:15px;

border:1px solid #ccc;

border-radius:8px;

font-size:16px;

background:white;

}


/* VIDEO CAMERA */

video{

width:100%;

max-width:500px;

border-radius:10px;

border:3px solid #0d6efd;

background:black;

}


/* TABLES */

.table-container{

overflow-x:auto;

}

table{

width:100%;

border-collapse:collapse;

background:white;

}

table th{

background:#0d6efd;

color:white;

padding:12px;

}

table td{

padding:10px;

border:1px solid #ddd;

text-align:center;

}

table tr:nth-child(even){

background:#f8f9fa;

}


/* EMPLOYEE IMAGE */

.avatar{

width:60px;

height:60px;

border-radius:50%;

object-fit:cover;

}


/* STATUS */

.success{

background:#d1e7dd;

color:#0f5132;

padding:12px;

border-radius:8px;

margin-bottom:15px;

}

.error{

background:#f8d7da;

color:#842029;

padding:12px;

border-radius:8px;

margin-bottom:15px;

}


/* MENU */

.menu a{

display:block;

margin-top:10px;

}


/* MOBILE */

@media screen and (max-width:768px)
{

.header{

flex-direction:column;

text-align:center;

}

.number{

font-size:35px;

}

.card{

padding:15px;

}

.btn,
button{

width:100%;

margin-top:10px;

}

table{

font-size:13px;

}

.header h2{

font-size:18px;

}

}


/* EXTRA SMALL */

@media screen and (max-width:480px)
{

body{

font-size:14px;

}

.number{

font-size:28px;

}

.title{

font-size:18px;

}

video{

max-width:100%;

}

}