:root {
    /* --primary: #dd4400; */
    --primary: #673de6;
    --primary-light: #ebe4ff;
    --primary-lightest: #673de614;
    /* --primary-lightest: #db450018; */
    --primary-dark: #5025d1;
    --primary-charts: #b39ef3;
    --white: #ffffff;
    --gray: #727586;
    --gray-light: #f2f3f6;
    --gray-lightest: #7275861a;
    --gray-dark: #36344d;
    --gray-border: #dad9da;
    --gray-border-dark: #b9b9b9;
    --success: #00b090;
    --success-light: #def4f0;
    --success-dark: #008361;
    --info-light: #e0f8ff;
    --danger: #fc5185;
    --danger-light: #ffe8ef;
    --danger-dark: #d63163;
    --warning: #ffcd35;
    --warning-light: #fff8e2;
    --warning-dark: #fea419;
    --warning-dark-2: #9f6000;
    --meteorite: #8c85ff;
    --meteorite-light: #d5dfff;
    --meteorite-gray: #dadce03d;
    --meteorite-dark: #2f1c6a;
    --light: #ffffff;
    --dark: #1d1e20;
    --white-blue: #f4f5ff;
    --primary-timer: #8564eb;
    --black-timer: #343434;
    --periwinkle: #c5cde9;
}

/* * { margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: var(--dark); transition: 0.2s ease-in-out; box-sizing: border-box; outline-color: var(--primary-timer); outline-width: 5px; -webkit-tap-highlight-color: transparent; } */
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; color: var(--dark); transition: 0.2s ease-in-out; box-sizing: border-box; outline-color: var(--primary-timer); outline-width: 5px; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--gray-light);
    /* padding: 30px; */
}

.container {
    border: 1px solid var(--gray-border);
    background-color: var(--white);
    border-radius: 7px;
}

.pd { padding: 16px 24px; }
.pd-15 { padding: 15px; }

.flex { display: flex; }

.header-icon { height: 40px; }

.max-w { width: 100%; }

.m-l { margin-left: 24px; }
.m-l-10 { margin-left: 10px; }
.m-l-20 { margin-left: 20px; }
.m-l-7 { margin-left: 7px; }
.m-l-auto { margin-left: auto; }
.m-r { margin-right: 24px; }

.m-b-10 { margin-bottom: 10px; }
.m-b-20 { margin-bottom: 20px; }
.m-b-30 { margin-bottom: 30px; }

.m-r-0 { margin-right: 0; }
.m-r-10 { margin-right: 10px; }
.m-r-5 { margin-right: 5px; }

.m-t-0 { margin-top: 0; }

a { color: var(--primary); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }


video { outline: none; }


label { user-select: none; }


.no-select { user-select: none; }

.pointer { cursor: pointer; }

.b-b { border-bottom: 1px solid var(--gray-border); }

button { font-weight: 700; cursor: pointer; background-color: var(--gray-light); padding: 10px 24px; border-radius: 5px; border: 1px solid var(--gray-border); font-size: 16px; }
button:hover, button:focus { background-color: var(--primary-lightest); }

.button-w-icon { display: flex; justify-content: center; align-items: center; }

.big-button { font-size: 18px; font-weight: 400; height: 40px; display: flex; justify-content: center; align-items: center; padding-top: 0; padding-bottom: 0; min-width: 100px; }

.primary-button { background-color: var(--primary); color: #fff; }
.primary-button ion-icon { color: #fff; }
.primary-button:hover, .primary-button:focus { border: 1px solid var(--primary); color: var(--primary); }
.primary-button:hover ion-icon, .primary-button:focus ion-icon { color: var(--primary); }

.black-button { background-color: var(--dark); color: #fff; }
.black-button  ion-icon { color: #fff; }
.black-button:hover, .black-button:focus { background-color: var(--primary); }

.green-button { background-color: green; color: #fff; }
.green-button ion-icon { color: #fff; }
.green-button:hover, .green-button:focus { border: 1px solid green; color: green; }
.green-button:hover ion-icon, .green-button:focus ion-icon { color: green; }

.light-button { background-color: var(--light); color: var(--primary); }
.light-button ion-icon { color: var(--primary); }
.light-button:hover, .light-button:focus { border: 1px solid var(--primary); color: var(--primary); }
.light-button:hover ion-icon, .light-button:focus ion-icon { color: var(--primary); }

.light-button-border { background-color: var(--light); color: var(--primary); border-color: var(--primary); }
.light-button-border ion-icon { color: var(--primary); }
.light-button-border:hover, .light-button-border:focus { border: 1px solid var(--primary); color: var(--primary); }
.light-button-border:hover ion-icon, .light-button-border:focus ion-icon { color: var(--primary); }

.negative-button { background-color: var(--primary); color: #fff; border-color: #fff; }
.negative-button ion-icon { color: #fff; }
.negative-button:hover, .negative-button:focus { border: 1px solid #fff; background-color: #fff; color: var(--primary); }
.negative-button:hover ion-icon, .negative-button:focus ion-icon { color: var(--primary); }

.negative-button-filled { background-color: #fff; color: var(--primary); border-color: #fff; }
.negative-button-filled ion-icon { color: var(--primary); }
.negative-button-filled:hover, .negative-button-filled:focus { border: 1px solid #fff; background-color: var(--primary); color: #fff; }
.negative-button-filled:hover ion-icon, .negative-button-filled:focus ion-icon { color: var(--primary); }



.primary { color: var(--primary); }

.gray { color: var(--gray); }

.bg-gray { background-color: var(--gray-light); }

.br { border-radius: 7px; }
.br-20 { border-radius: 20px; }

.al-i { align-items: center; }
.al-i-s { align-items: flex-start; }

.min-w { min-width: 300px; }
.max-w { width: 100%; }
.max-w-300 { max-width: 300px; }

.tl-y-30 { transform: translateY(30px); }

.desc { line-height: 16px; font-size: 14px; }

.line-h { line-height: 1em; }

.li-st-n { list-style: none; }

.tx-al-c { text-align: center; }

.dp-none { display: none; }

main { width: 100%; padding: calc(30px + 70px) 200px 120px 200px; min-height: 100vh; }

hr { margin: 30px 0; border: 1px solid #cacaca; }

br { user-select: none; }

h1 { font-size: 35px; }

h1, h2, h3, h4, h6 { margin: 10px 0; }

/* header { position: fixed; display: flex; width: 100%; left: 0; top: 0; height: 70px; background-color: #fff; align-items: center; padding: 0 90px; border-bottom: 1px solid var(--gray-border); z-index: 1; }
header nav { margin: 0 auto; }
header ul { list-style: none; display: flex; }
header ul li { height: 70px; color: var(--dark); display: flex; align-items: center; padding: 0 10px; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500; }
header ul li:hover { border-bottom: 2px solid var(--primary); color: var(--primary); } */


header {
    position: fixed;
    display: flex;
    width: 100%;
    left: 0;
    top: 0;
    height: 70px;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid var(--gray-border);
    z-index: 2;
}
header nav {
    /* margin: 0 20px 0 auto; */
    margin: 0 20px;
}
header ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}
header ul li {
    height: 70px;
    /* min-width: 70px; */
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza horizontalmente */
    /* padding: 0 10px; */
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--dark);
    position: relative;
}
header ul li::after { content: ""; position: absolute; width: 0; left: 50%; bottom: -2px; transform: translateX(-50%); border: 1px solid transparent; transition: 0.3s ease-in-out; }
header ul li:hover::after { width: 90%; border: 1px solid var(--primary); }
header ul li span { padding: 0 10px; font-weight: 500; }
header ul li a {
    display: flex; /* Usa flexbox para centralizar o conteúdo */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit; /* Mantém a cor do texto herdada */
    font-weight: inherit;
    transition: inherit;
}
header ul li a:hover {
    color: var(--primary);
    text-decoration: none;
}
header ul li a span {
    width: 100%;
    text-align: center; /* Centraliza o texto dentro do span */
    padding: 0 10px;
}
header ul li:hover span { color: var(--primary); }

header ul .foco::after { width: 90%; border: 1px solid var(--primary); }
header ul .foco span { color: var(--primary); }

header .logomarca a:hover { text-decoration: none; }




footer { min-height: 200px; background-color: var(--gray-lightest); /* padding: 30px 90px; */ padding: 30px; }


.nav-pages span { font-weight: 700; color: var(--gray); }
.nav-pages .here { color: var(--dark); }


.bd-orange { border: 1px solid var(--primary); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] { border: 1px solid var(--gray-border-dark); padding: 10px 15px; width: 100%; border-radius: 5px; font-size: 16px; transition: 0.1s ease-in-out; }

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover { background-color: #eeeeee; border: 1px solid var(--gray-lightest); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus { /* outline: none; border: 1px solid var(--dark); */ background-color: #fff; }

textarea { border: 1px solid var(--gray-border-dark); padding: 10px 20px; width: 100%; border-radius: 5px; margin-right: 15px; transition: 0.1s ease-in-out; resize: none; }
textarea:hover { background-color: #eeeeee; border: 1px solid var(--gray-lightest); }
textarea:focus { outline: none; border: 1px solid /* #333 */ var(--primary); background-color: #fff; }

@media (max-width: 800px) {
    .media-800 { flex-direction: column; }
    .media-800 .card-auth { margin-left: auto; margin-right: auto; }
}

@media (max-width: 500px) {
    .card-auth { display: none; }
}

.w-full { width: 100%; }
.w-30pc { max-width: 30%; width: 30%; }

.h-550 { height: 550px; }

.top-new { background-color: var(--gray-lightest); border-radius: 7px; }
.top-new .shadow { width: 100; height: 100%; border-radius: 7px; display: flex; align-items: end; background-image: linear-gradient(to top, var(--primary), var(--primary)83, var(--primary-lightest), transparent); }
/* background-image: linear-gradient(to top, var(--primary)83, transparent); */
.top-new h3 { color: #fff; font-size: 50px; font-weight: 600; }
/* .top-ne h3:hover { text-decoration: none; } */

/* .top-new h3 a { font-weight: inherit; color: inherit; }
.top-new a:hover { text-decoration: none; } */

.relative { position: relative; }
.absolute { position: absolute; }

.full-size { height: 100%; width: 100%; }

.grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }

.new-medium { overflow: hidden; }
.new-medium img { max-width: 100%; width: 100%; height: 55%; border-radius: 7px; object-fit: cover; }
.new-medium h3 { text-decoration: none; font-weight: 500; font-size: 17px; color: var(--black-timer); }
.new-medium a:hover { text-decoration: none; }



#list-movie { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.media-card { position: relative; display: flex; width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; transition: 0.3s ease; }
.media-card:hover, .media-card:focus {
    transform: scale(1.05); /* Ampliando levemente (5%) */
}
.media-card:focus {  }

/* .media-card:hover a div { bottom: 0; } */

/* .media-card a { position: relative; display: flex; flex-direction: column; text-decoration: none; } */
/* .media-card div { position: absolute; display: flex; justify-content: center; align-items: center; bottom: 0; left: 0; width: 100%; padding: 10px; background-color: #1d1e20d2; border-radius: 5px 5px 0 0; } */
.media-card span { font-weight: 400; color: #fff; line-height: 1.2; }
.media-card img { aspect-ratio: 2 / 3; width: 100%; height: 100%; background-color: var(--gray-lightest); object-fit: cover; }

#play-movie {  }
/* #play-movie:hover ion-icon { color: var(--dark); } */
#play-movie ion-icon { font-size: 20px; }

#data-movie { font-size: 20px; font-weight: 500; }

.card-button { height: 150px; width: 150px; border-radius: 10px; display: flex; align-items: end; justify-content: left; padding: 15px; }
.card-button span { color: #fff; font-size: 20px; font-weight: 500; }


/* table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid var(--gray-border);
    padding: 8px;
    text-align: left;
}
th {
    background-color: var(--primary-lightest);
}
caption {
    font-weight: bold;
    padding: 10px;
    font-size: 1.2em;
} */


.ul-nav-side { list-style: none; margin-top: 10px; }
.ul-nav-side li { list-style: none; padding-bottom: 10px; }




.table-rows {
    max-height: 100%; /* Defina a altura máxima do corpo da tabela */
    overflow: auto; /* Adiciona o scroll apenas no corpo */
    height: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    position: sticky;
    top: -1px; /* Fixa o cabeçalho no topo */
    background-color: #fff;
    z-index: 1; /* Garante que o cabeçalho fique acima das linhas */
    box-shadow: 0 0.5px 0 var(--gray-border);
}

thead th {
    background-color: var(--primary-lightest); /* Cor de fundo para o cabeçalho */
    /* border-top: none;
    border-bottom: none; */
}

th, td {
    padding: 10px 15px;
    text-align: left;
    /* border: 1px solid var(--gray-border); */
    border-top: 1px solid var(--gray-border);
    border-bottom: 1px solid var(--gray-border);
    white-space: nowrap; /* Impede quebra de linha para que a coluna se expanda */
}

thead th:nth-child(1),
tbody td:nth-child(1) {
    min-width: 1px; /* Largura mínima próxima de zero */
    width: 1px; /* Expande conforme o conteúdo */
}

.table-rows input[type="number"] {
    width: 6ch;
    min-width: 8ch;
    text-align: end;
    padding: 5px;
}









.button-icon { padding: 5px 10px; }

.button-icon ion-icon { color: var(--primary); transform: translateY(2px); font-size: 20px; }

input:disabled { cursor: not-allowed; color: #555; background-color: #f5f5f5; }


















.dropdown {
  /* Aparência */
  padding: 12px 40px 12px 16px; /* espaço para a seta */
  font-size: 16px;
  border: 1px solid var(--gray-border);
  border-radius: 7px;
  background-color: white;
  color: #333;

  /* Remove a seta padrão (Webkit) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Adiciona seta customizada */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23333" d="M0 0l6 8 6-8z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;

  /* Hover e foco */
  cursor: pointer;
}