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

:root {
    --primary: rgba(255, 184, 0, 1);
    --white: rgba(255, 255, 255, 1);
    --textDarkBold: rgba(0, 0, 0, 0.8);
    --textDarkReguler: rgba(0, 0, 0, .5);
    --gray: rgb(219, 219, 219);
    --darkGray: rgba(146, 146, 146, 0.8);
    --montserrat: 'Montserrat', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: var(--montserrat);
}

body::-webkit-scrollbar,
.slider-inner::-webkit-scrollbar,
.new-book-items::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
}

.books::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
}

.books::-webkit-scrollbar-thumb {
    width: 3px;
    background-color: var(--primary);
    border-radius: 10px;
}

.btn-gray {
    padding: 5px 50px;
    outline: none;
    border: none;
    border-radius: 50px;
    background-color: var(--darkGray);
    color: var(--white);
}

.btn-gray:hover {
    cursor: pointer;
    box-shadow: 0 0 15px var(--primary);
}

.btn-icon {
    color: var(--textDarkReguler);
    border: none;
    outline: none;
    background-color: transparent;
}

.btn-active {
    color: white;
    padding: 3px;
    outline: none;
    border: none;
    border-radius: 5px;
    font-size: .7rem;
    background-color: rgb(0, 158, 0);
}

.btn-non-active {
    color: white;
    padding: 3px;
    outline: none;
    border: none;
    border-radius: 5px;
    font-size: .8rem;
    background-color: var(--primary);
}

ul li {
    list-style-type: none;
}

ul li a {
    padding: 0 0 .5rem 0;
    color: var(--textDarkBold);
    text-decoration: none;
}

.side-items li a:hover {
    color: #fff;
    cursor: pointer;
    background-color: var(--primary);
}

.side-items li a.active {
    color: #fff;
    background-color: var(--primary);
}

th, td {
    font-size: .8rem;
}


.content-dashboard input,
.content-dashboard input::placeholder,
.content-dashboard select,
.modal-body input,
.modal-body input::placeholder,
.modal-body select {
    background-color: transparent;
    color: var(--aksen);
    opacity: .8;
}

.content-dashboard input:focus,
.content-dashboard textarea:focus,
.content-dashboard select:focus,
.modal-body input:focus
.modal-body select:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 184, 0, .2);
    /* Warna outline */
    border-color: var(--primary);
    /* Warna border saat fokus */
}