@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --base-color: #dc3545; /* Strandat Kırmızı*/
    --base-color2: #f12034; /*Doygun kırmızı*/
    --base-color3: #898989; /*Gri Tonu*/
    --text-color1: #F6F5F5;
    --text-color2: #AAD7D9;
    --base-text: "Kanit", sans-serif;      
}

body{
    margin: 0px;
    padding: 0px;
    background-color: #F7F7F7; 
}

#base-main{
    margin-top: 0px;
    padding: 0px 0px !important;
}

#titleh3{
    font-family: var(--base-text); 
    font-size: 25px;
    text-align: center;
}

/*--- Navbar Css ---*/
.navbar{
    background-color: var(--base-color) !important;
}
.navbar-bottom{
    border-bottom: 2px solid var(--text-color1);
}
.navbar-span{
    color: var(--text-color1);
    font-family: var(--base-text);
    font-size: 18px;
    margin-top: 5px;
}
.navbar .navbar-brand{
    color: var(--text-color1);
    font-size: 22px;
    font-family: var(--base-text);
}
.navbar .nav-link{
    color: var(--text-color1);
    font-weight: 500;
}

/*--- Sidebar Css ---*/
.list-group{
    border: 2px solid var(--base-color);
    border-radius: 0%;
}
.list-group #sidebar-title{
    background-color: var(--base-color);
    color: var(--text-color1);
    font-family: var(--base-text);
    font-size: 20px;
    padding: 10px;
}
.list-group #sidebar-footer{
    background-color: var(--base-color);
    color: var(--text-color1);
    font-family: var(--base-text);
    font-size: 15px;
    padding: 10px;
}
.list-group .list-group-item{
    padding-left: 10px;
    border: 1px solid var(--base-color);
    font-family: var(--base-text);
    font-size: 16px;
    transition: .6s all;
}
.list-group .list-group-item:hover{
    background-color: var(--base-color3);
    color: var(--text-color1);
    padding-left: 30px;
}

/*--- Section Css ---*/
.section{
    border: 2px solid var(--base-color);
}
.section-navbar{
    background-color: var(--base-color);
    color: var(--text-color1);
    font-family: var(--base-text);
    font-size: 20px;
    padding: 10px;
}
.section-navbar .section-link{
    text-decoration: none;
    color: var(--text-color1);
    font-family: var(--base-text);
    font-size: 18px;
    padding: 5px;
    border: 1px solid var(--text-color1);
}
.table{
    font-family: var(--base-text);
}
.table th{
    color: var(--base-color);
}
form{
    font-family: var(--base-text);
    color: var(--base-color);
    font-size: 18px;
}

/*--- Pagination ---*/
.pagination{
    background-color: var(--base-color);
    float: right;
}
.pagination .page-item .page-link{
    background-color: var(--base-color) !important;
    font-size: 22px;
    font-family: var(--base-text);
    border: 0px;
    color: var(--text-color1);
    border-radius: 0px;
}
.pagination .active .page-link{
    background-color: var(--base-color3) !important;
    text-decoration: none;
    color: var(--text-color1);
}

/*--- Footer ---*/
.footerr{
    background-color: var(--base-color);
    color: var(--text-color1);
    font-family: var(--base-text);
    font-size: 18px;
    text-align: center;
    padding: 10px;
}



/*--- Responsice Css ---*/
@media (min-width: 576px) {
    #base-main{
        margin-top: 100px;
    }
}

/* Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
   
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { /*  Code...  */ }

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { /*  Code...  */ }

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { /*  Code...  */ }