body{

    font-family:'Segoe UI',sans-serif;
    background-image: linear-gradient(to right, #003366, lightslategrey, white);
}

/* Main Panel */

.archive-panel{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 35px rgba(0,0,0,.15);
}

/* Header */

.title-header{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    padding:15px;
    margin-bottom:25px;
    text-align:left;
}

.title-header img{
    border-radius:50%;
    width:65px;
    height:65px;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.3);
}

.title-header h1{
    margin:0;
    font-weight:600;

}

/* Sidebar */

.tbl-art,
.tbl-sdg{
    /*border-radius:12px;*/
    /*padding:10px;*/
    border-right:1px solid #ddd;
    opacity: 1px;
}

/* Table */

.table{
    margin:0;
    background:transparent;
    color:#fff;
    border-collapse:collapse;
}

.table thead{
    background:#003366;
    color:white;
    letter-spacing: 0.08em;
}

.table thead th{
    color:#fff;
    border:none !important;
    padding:16px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.table tbody td{
    vertical-align:middle !important;
    padding:15px;
    border-top:1px solid #eee !important;
}

.table-hover tbody tr{
    cursor: pointer;
    transition:.25s;
}

.table-hover tbody tr:hover{
    color: black;
    transform:scale(1.005);
    box-shadow:0 5px 10px rgba(0,0,0,.05);
    padding: 30px;
    font-weight:bolder;
}

/* Zebra */

.table-striped tbody tr:nth-child(even){
    background:#fafafa;
}

.article-view{
    background:#0d6efd;
    color:white;
    border:none;
    border-radius:20px;
    padding:6px;
    transition:.3s;
    font-size:12px;
}

.article-view:hover{
    background:white;
}

.sdg-badge{
    color:white;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
}

.sdg4{background:#C5192D;}
.sdg5{background:#FF3A21;}
.sdg6{background:#26BDE2;}
.sdg13{background:#3F7E44;}
.sdg17{background:#19486A;}

.table-wrapper{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.modal-body {
    background-image: linear-gradient(to right , #003366, lightslategray) ;
    color: white;
    font-size:20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.modal-header {
    background-image: linear-gradient(to right , yellow , lightgrey);
}

.modal-footer {
    background-image: linear-gradient(to right , #003366 , lightslategray);
}

.modal-body::-webkit-scrollbar-thumb {
    background: navy;
}

.active a {
    background-image: linear-gradient(to right , yellow , lightgrey);
}

tbody tr .active {
    background-image: linear-gradient(to right , yellow , lightslategray);
    color: white;
    font-weight: bolder;
}

tbody tr .active {
    background-image: linear-gradient(to right , yellow , lightslategray);
    color: white;
    font-weight: bolder;
}