*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

body{
    margin: 0;

}
.bold{
    font-weight : bold;
}
.container{
    display: flex;
    flex-direction: column;
    background-color: white;
    height: 75vh;
    width: 50%;
    margin-top: 10vh;
    margin-left: 25%;
    border-radius: 18px;
    border: 2px solid black;
    /* box-shadow: 1px 1px 1px 1px rgb(107, 106, 106); */
}
.container .menu{
    display: flex;
    margin: 0;
}

.title{
    background-color: #335691; 
    border-radius: 18px 18px 0 0;
    width: 100%;
}

.title h3{
    margin-left: 20px;
    color: #E0E0E0;
}

.container .menu input{
    width: 100%;
    height: auto;
    align-items: center;
    padding: 3px;
    border: none;
    border-right:2px solid black;
    border-bottom: 2px solid black;
    /* box-shadow: 1px 1px 1px 1px rgb(107, 106, 106); */
    z-index: 4;
}

#not-completed{
    border-right: none;
}

.container .menu input:focus{
    background-color: #b1b1b1;
}

.content{
    border-radius: 0 0 18px 18px;
    /* box-shadow: 1px 1px 1px 1px rgb(107, 106, 106); */
}
.content, .add-book, .completed-book, .not-completed-book{
    height: 100%;
    background-color: #E0E0E0;
}

.add-book{
    display: block;
    border-radius: 18px;
}

.completed-book{
    display: none;
}

.not-completed-book{
    display: none;
}
.title-content, .form-group, .form-group-checked{
    margin-top: 10px;
    margin-left: 20px;
}

.add-book form{
    height: 250px;
    padding: 10px;
}

.form-group{
    display: flex;
    flex-direction: column;
    width: 100%
}

.form-group-checked{
    display: flex;
}

.form-group input{
    width: 90%;
    margin-top: 2px;
    height: 30px;
    border-radius: 5px;
    border: none;
    border-color: transparent;
}

input:hover{
   box-shadow: 2px 2px 2px 2px rgb(119, 119, 199);
}
.completed-book, .not-completed-book{
    background-color: transparent;
    padding: 10px;
    border-radius: 0 0 18px 18px;
}

.completed-book input, .not-completed-book input{
    margin-left: 20px;
    width: 40%;
    height: 20px;
    border-radius: 5px;
    border: none;
    border-color: transparent;
}
.data{
    background-color: transparent;
    height: 250px;
    margin-top: 10px;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {      
    background: transparent;    
}
 
::-webkit-scrollbar-thumb {
    background: #335691;
}
.data .data-book{
    display: flex;
    flex-direction: column ;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 2px solid #747474;
}

.data-btn{
    display: flex;
    justify-content: start;
    margin-top: 5px;
}

.btn-primary{
    background-color: #1e8fdb;
    color: rgb(221, 221, 221);
}

.btn-danger{
background-color: rgb(255, 37, 37);
color: rgb(221, 221, 221);
}