body {
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    justify-content: center;
}

.busca-input {
    overflow: hidden;
    position: absolute;
    background-color: #ffffff42;
    border-radius: 1%;
    border-style: solid;
    border-radius: 3px;
    border-color: #506a6f;
    width: 91.9%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-top: 2%;
    margin-right: 1%;
}

.input-busca {
    width: 90%;
    background-color: #22353900;
    outline: 0px;
    border: 0px;
}

.input-busca::placeholder {
    color: black;
}

input {
    outline: 0px;
}

input:focus {
    outline: 0px;
}

.lupa-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    margin-left: 70%;
}

.modale-itens {
    overflow:auto;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    height: 90%;
    margin-top: 15%;
    align-items: flex-start;
    justify-content: flex-start;
    --background-color: aqua;
    white-space-collapse:collapse;
}

.card-item {
    z-index: 55;
    margin-bottom: 1%;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    flex-direction:column;
    position: relative;
    width: 100%;
    height: 16%;
    --height: 120px;
    --background-color: red;

}

.card-img {
    overflow: hidden;
    background-color:#3a6a35;
    --background-image: image-set('https://themoviedb.org/t/p/original/lkxz7BhRucysmBADlPxA8jzVThg.jpg');
    background-size: 100% 100%;
    background-repeat:repeat;
    width: 25%;
    height: 100%;
    --border-top-left-radius: 10px;;
    --border-bottom-left-radius: 2px;
    padding-bottom: 11%;
    box-sizing: border-box;
    border-radius: 3%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-left: 1%;
    border-right: 1%;
    border-style: solid;
}

.card-titule {
    overflow: hidden;
    text-overflow: ellipsis;
    --background-color: #223539;
    width: 74%;
    height: 100%;
    border-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-right: 0.5%;
    border-left: 0px;
    border-style: solid;
    margin-right: 1%;
}

.titulo-banner {
    overflow: hidden;
    text-wrap: nowrap;
    width: 90%;
    text-overflow: ellipsis;
    font-size: 100%;
    margin: 0 auto;
    padding-top: 7%;
}

.top-10-msg {
    font-family: the-bold-font;
    margin-left: 73%;
    margin-top: 2%;
    --color: #22353900;
}

#ocult-top-10 {
    color: #22353900;
}

@font-face{
    font-family: "the-bold-font";
    src: url("fonts/the-bold-font.ttf") format("truetype");
  }

.border-color-a {
    border-color: #3a6a35;
}

.views-card {
    margin: 0 auto;
    display: flex;
    font-size: 70%;
    width: 50%;
    height: 20%;
    --background-color: #506a6f;
    align-items: center;
    margin-left: 4%;
    padding-top: 8%;
    margin-top: -14%;
}
.views-conte {
    position: relative;
    width: 15%;
    height: 70%;
    background-image: url('imgs/views-icon.svg');
    background-size: 99% 99%;
}

.c-loader {
    display: flex;
    animation: is-rotating 1s infinite;
    border: 10px solid #e5e5e5;
    border-radius: 50%;
    border-top-color: #3a6a35;
    height: 50px;
    width: 50px;
    margin: 0 auto;
  }
  
  @keyframes is-rotating {
    to {
      transform: rotate(1turn);
    }
  }

.nao-encontrado {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('imgs/nao-encontrado.svg');
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: -50%;
}