@charset "utf-8";
/* CSS Document */


body {
    margin: 0;
    font-family: Roboto-Regular;
    background: #f5f7fa;
    color: #333;
}

.container {  
  margin: 30px auto; 
}
.contentTitle {
    text-align: center;
    font-size: 30px;
    color: #fff;
    background: #0077b6;
    padding: 18px;
    width: 100%;
    margin: 30px auto;
    font-family: Bahnschrift;
}

.filter-box { 
    margin: 25px 0px 25px 20px; 
    gap:15px; 
    justify-content:flex-start; 
    align-items:center; 
    flex-wrap: wrap;
}

.filter-box input[type="text"]{ 
    padding:15px 10px; 
    border:1px solid #ccc; 
    border-radius:2px; 
    width:270px; 
}

.filter-box button{ 
    margin-left: 20px;
    width: 100px;
    padding:15px 20px; 
    background:#0077b6; 
    color:white; 
    border:none; 
    border-radius:2px; 
    cursor:pointer; 
}
/* ---------------- MOBILE FIX ---------------- */
@media (max-width:800px) {
    .doc-item{ 
        width:100%; 
    }
    .filter-box button{ 
        margin-left: 0px;
    }

}

.doc-list{
  margin: 20px;
  display:flex; 
  flex-wrap:wrap; 
  gap:30px; 
}
.doc-item { 
    background:#fff; 
    padding:14px; 
    border-radius:8px; 
    box-shadow:0 4px 12px rgba(0,0,0,0.06); 
    width: calc(50% - 16px); 
    box-sizing:border-box; 
}
.doc-item h3{ 
    margin:0 0 8px; 
    font-size:18px; 
    color:#023e8a; 
}
.doc-item .meta{ 
    font-size:13px; 
    color:#666; 
    margin-bottom:10px; 
}
.doc-item .actions{ 
    display:flex; 
    gap:10px; 
    align-items:center; 
    margin-top:30px; 
}
.btn { 
    padding:8px 12px; 
    border-radius:3px; 
    border:none; 
    cursor:pointer; 
    color:white; 
    background:#3ab600; 
    text-decoration:none; 
    display:inline-flex; 
    gap:8px; 
    align-items:center; 
}
.btn.preview { 
    background:#0077b6; 
}
.share-wa img{
    width:40px; 
    height:40px; 
    display:inline-block; 
}
.empty-note{ 
    padding:30px; 
    background:#fff3cd; 
    color:#856404; 
    border-radius:8px; 
    text-align:center; 
}
.showing{
    position: relative;
    float: right;
    right: 25px;
    top: 20px;
    font-size:14px; 
    color:#555;
}
.pagination { 
    margin-top:18px; 
    display:flex; 
    gap:8px; 
    justify-content:center; 
}
.pagination a{ 
    padding:8px 12px; 
    border-radius:6px; 
    text-decoration:none; 
    border:1px solid #d0d0d0; 
    color:#0077b6; 
}
.pagination a.active{ 
    background:#0077b6; 
    color:white; 
    border-color:#0077b6; 
}
iframe.preview-frame{ 
    width:100%; 
    height:420px; 
    border: 1px solid #e3e3e3; 
    border-radius:8px; 
    margin-top:12px; 
    display:none; 
}
@media (max-width:800px) {
    .doc-item{ width:100%; } 
    .filter-box{
        flex-direction:column; 
        align-items:stretch;
    }
    .showing{
        display: none;
    }
}