@import url('https://fonts.googleapis.com/css2?family=Poppins: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&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');

:root {
    --color-001:#474747;
    --color-001-light:#47474734;
    --color-001-light-2:#474747b4;
    --color-002:#141414;
    --color-003:#303030;
    --color-004:#212121;
    --color-005:#E5E8EB;
    --color-005-light:#ABABAB;
    --color-006:#303030;
    --color-006-light:#474747;
    --color-007:#E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root {
    --border-radius-padrao:10px;
    --border-radius-total: 10px;
    --main-font: "Rowdies", sans-serif;
    --sub-font:"Poppins", sans-serif;

    --shawdow-standart: 1px 1px 10px rgba(0, 0, 0, 0.112);
}

:root:has(body[data-theme="rantool-original"]) {
    --color-001: #485696;
    --color-001-light: #6b81e2;
    --color-001-light-2: rgba(107, 129, 226, 0.482);
    --color-002: #e7e7e7;
    --color-003: #f9c784;
    --color-004: #f24c00;
    --color-005: #e7e7e7;
    --color-005-light: #f24d0079;
    --color-006: #f2e3d0;
    --color-006-light: #cabdac;
    --color-007: rgba(0, 0, 0, 0.711);
    --color-008: rgba(193, 193, 193, 0.496);
    --color-important: #fff;
    --color-contrast: #000;
}

:root:has(body[data-theme="white"]) {
    --color-001:#B8B8B8;
    --color-001-light:#BCBCBC;
    --color-001-light-2:#8E8E8E; 
    --color-002:#EBEBEB;
    --color-003:#CFCFCF; 
    --color-004:#DEDEDE;
    --color-005:#1A1714; 
    --color-005-light:#545454; 
    --color-006:#CFCFCF; 
    --color-006-light:#B8B8B8; 
    --color-007:#1A1714; 
    --color-008: #545454; 
    --color-important: #FFF; 
    --color-contrast: #000; 
}

:root:has(body[data-theme="tons-de-azul-profundo"]) {
    --color-001: #0A192F;
    --color-001-light: #0A192F34;
    --color-001-light-2: #0A192FB4;
    --color-002: #050E1A;
    --color-003: #1A314F;
    --color-004: #2A4974;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #1A314F;
    --color-006-light: #0A192F;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-verde-floresta"]) {
    --color-001: #1B4332;
    --color-001-light: #1B433234;
    --color-001-light-2: #1B4332B4;
    --color-002: #0F251D;
    --color-003: #2F5948;
    --color-004: #4A7A66;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #2F5948;
    --color-006-light: #1B4332;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-cinza-urbano"]) {
    --color-001: #212121;
    --color-001-light: #21212134;
    --color-001-light-2: #212121B4;
    --color-002: #121212;
    --color-003: #3A3A3A;
    --color-004: #545454;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #3A3A3A;
    --color-006-light: #212121;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-vinho-escuro"]) {
    --color-001: #3D0000;
    --color-001-light: #3D000034;
    --color-001-light-2: #3D0000B4;
    --color-002: #210000;
    --color-003: #520000;
    --color-004: #6F0000;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #520000;
    --color-006-light: #3D0000;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-marrom-terroso"]) {
    --color-001: #3E2723;
    --color-001-light: #3E272334;
    --color-001-light-2: #3E2723B4;
    --color-002: #211512;
    --color-003: #523B36;
    --color-004: #6D4C41;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #523B36;
    --color-006-light: #3E2723;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-azul-celeste"]) {
    --color-001: #004D40;
    --color-001-light: #004D4034;
    --color-001-light-2: #004D40B4;
    --color-002: #00251F;
    --color-003: #005F52;
    --color-004: #00796B;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #005F52;
    --color-006-light: #004D40;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-roxo-escuro"]) {
    --color-001: #260026;
    --color-001-light: #26002634;
    --color-001-light-2: #260026B4;
    --color-002: #150015;
    --color-003: #4A004A;
    --color-004: #6B006B;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #4A004A;
    --color-006-light: #260026;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-laranja-queimado"]) {
    --color-001: #4E2714;
    --color-001-light: #4E271434;
    --color-001-light-2: #4E2714B4;
    --color-002: #2E150A;
    --color-003: #623D26;
    --color-004: #7F513C;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #623D26;
    --color-006-light: #4E2714;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-azul-cinzento"]) {
    --color-001: #263238;
    --color-001-light: #26323834;
    --color-001-light-2: #263238B4;
    --color-002: #1B262C;
    --color-003: #3D4A50;
    --color-004: #546E7A;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #3D4A50;
    --color-006-light: #263238;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-de-dourado-suave"]) {
    --color-001: #362E00;
    --color-001-light: #362E0034;
    --color-001-light-2: #362E00B4;
    --color-002: #1C1700;
    --color-003: #4A4000;
    --color-004: #605000;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #4A4000;
    --color-006-light: #362E00;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="azul-verde-e-amarelo"]) {
    --color-001: #1A5276;
    --color-001-light: #1A527634;
    --color-001-light-2: #1A5276B4;
    --color-002: #0E364B;
    --color-003: #266A53;
    --color-004: #a68d00;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #266A53;
    --color-006-light: #1A5276;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="roxo-e-amarelo"]) {
    --color-001: #4B0082;
    --color-001-light: #4B008234;
    --color-001-light-2: #4B0082B4;
    --color-002: #2D0051;
    --color-003: #7B68EE;
    --color-004: #ab9100;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #7B68EE;
    --color-006-light: #4B0082;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="vermelho-verde-e-azul"]) {
    --color-001: #8B0000;
    --color-001-light: #8B000034;
    --color-001-light-2: #8B0000B4;
    --color-002: #5D0000;
    --color-003: #228B22;
    --color-004: #4169E1;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #A52A2A;
    --color-006-light: #8B0000;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="azul-laranja-e-roxo"]) {
    --color-001: #2C3E50;
    --color-001-light: #2C3E5034;
    --color-001-light-2: #2C3E50B4;
    --color-002: #1F2C3A;
    --color-003: #E67E22;
    --color-004: #9B59B6;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #34495E;
    --color-006-light: #2C3E50;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="verde-marinho-rosa-e-bege"]) {
    --color-001: #008080;
    --color-001-light: #00808034;
    --color-001-light-2: #008080B4;
    --color-002: #004D4D;
    --color-003: #FF69B4;
    --color-004: #abab97;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #20B2AA;
    --color-006-light: #008080;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="azul-cobalto-amarelo-ouro-e-cinza-quente"]) {
    --color-001: #002060;
    --color-001-light: #00206034;
    --color-001-light-2: #002060B4;
    --color-002: #001030;
    --color-003: #968000;
    --color-004: #A9A9A9;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #003399;
    --color-006-light: #002060;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="tons-terrosos-com-toque-de-azul"]) {
    --color-001: #5C4033;
    --color-001-light: #5C403334;
    --color-001-light-2: #5C4033B4;
    --color-002: #3A2C26;
    --color-003: #CD853F;
    --color-004: #6A5ACD;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #7B5F56;
    --color-006-light: #5C4033;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="cinza-chumbo-rosa-pastel-e-verde-menta"]) {
    --color-001: #2F4F4F;
    --color-001-light: #2F4F4F34;
    --color-001-light-2: #2F4F4FB4;
    --color-002: #1E3131;
    --color-003: #a55757;
    --color-004: #579057;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #4F6F6F;
    --color-006-light: #2F4F4F;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="azul-escuro-amarelo-mostarda-e-vermelho-cereja"]) {
    --color-001: #191970;
    --color-001-light: #19197034;
    --color-001-light-2: #191970B4;
    --color-002: #0D0D38;
    --color-004: #DC143C;
    --color-003: var(--color-004);
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #2A2A80;
    --color-006-light: #191970;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

:root:has(body[data-theme="preto-branco-e-destaque-esmeralda"]) {
    --color-001: #000000;
    --color-001-light: #00000034;
    --color-001-light-2: #000000B4;
    --color-002: #000000;
    --color-003: #424242;
    --color-004: #FFFFFF;
    --color-005: #E5E8EB;
    --color-005-light: #ABABAB;
    --color-006: #1A1A1A;
    --color-006-light: #000000;
    --color-007: #E5E8EB;
    --color-008: #ABABAB;
    --color-important: #000;
    --color-contrast: #fff;
}

* {
    margin: 0;
    padding: 0;
    color:var(--color-contrast);
    box-sizing: border-box;
}

body {
    background-color: var(--color-002);
    font-family: var(--main-font);
    position: relative;
    overflow-x: hidden;
}

main{
    max-width: 1000px;
    margin: auto;
    padding: 20px 20px 20px 30px;
}

.popup {
    position: fixed;
    opacity: 0;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    text-align: center;
    font-size: 1.3em;
    border-radius: var(--border-radius-padrao);
    transition: 0.2s;
    width: fit-content;
    padding: 10px 50px;
    margin: 10px;
}

.popup.appear {
    opacity: 1;
    bottom: 50px;
    transition: 0.2s;
}

.error-text {
    text-align: center;
    padding: 30px;
}

.hidden {
    display: none !important;
}

p, input, li {
    color: var(--color-contrast);
}

input::placeholder, textarea::placeholder {
    color: var(--color-005);
    opacity: 0.9;
}

body[data-theme="rantool-original"] input::placeholder, body[data-theme="rantool-original"] textarea::placeholder {
    color: var(--color--007);
}

input {
    background-color: var(--color-001);
}

*:not(.input-and-select, .search__bar) > input {
    border: 1px solid var(--color-005);
}

body[data-theme="rantool-original"] *:not(.input-and-select, .search__bar) > input {
    border-color: var(--color-007);
}

body[data-theme="rantool-original"] input {
    background-color: var(--color-006);
    color: var(--color-007);
}

.configuracoes .actual-place {
    width: fit-content !important;
}

.configuracoes li:hover h3 {
    color: var(--color-005);
}

.configuracoes .select {
    width: 500px;
    min-width: 300px;
}

.configuracoes .label--menor {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.paleta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.paleta input {
    display: none;
}

.paleta label {
    display: grid;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    overflow: hidden;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    transition: .2s;
}

.paleta label:has(+ input:checked) {
    border: 3px solid rgb(47, 47, 255);
}

.paleta label:hover {
    transform: scale(1.2);
    transition: .2s;
}

.paleta label span {
    display: block;
    width: 100%;
    height: 100%;
}

.paleta label span:nth-child(3) {
    grid-column: span 2;
}


@media screen and (min-width: 1000px) {
    .configuracoes.select-place.active .select, .configuracoes .select:has(li:focus) {
        right: 0;
        bottom: 0;
        left: auto;
    }
}

@media screen and (max-width: 390px){
    main {
        padding: 20px;
    }
}

@media screen and (max-width: 300px){
    html {
        overflow: auto;
    }

    body {
        min-width: 400px;
    }
}

svg, svg path {
    fill: var(--color-005);
    stroke: var(--color-005);
}

body[data-theme="rantool-original"] svg, body[data-theme="rantool-original"]  svg path {
    fill: var(--color-001);
    stroke: var(--color-001);
}

body[data-theme="rantool-original"] footer svg, body[data-theme="rantool-original"] footer svg path {
    stroke: var(--color-001) !important;
}

.video-youtube {
    max-width: 100%;
    height: 0;
    position: relative;
    padding-top: 56.25%;
    margin: 20px 0;
}

.video-youtube iframe {
    position: absolute;
    border-radius: var(--border-radius-padrao);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.grid-imagens {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.grid-imagens li {
    width: 100%;
    height: 100%;
}
.grid-imagens li img {
    border: 1px solid var(--color-005);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background-color: var(--color-001);
    border-radius: var(--border-radius-padrao);
}

body[data-theme="rantool-original"] .grid-imagens li img {
    border-color: var(--color--007);
}

button {
    cursor: pointer;
}

main #root a, main #mais-detalhes a {
  color: var(--color-contrast);
  text-decoration: none;
  font-weight: bolder;
  position: relative;
  text-decoration: none;
  font-weight: bolder;

  background-image: linear-gradient(to right, var(--color-contrast), var(--color-contrast));
  background-repeat: no-repeat;
  background-position: 0 100%; 
  background-size: 0 3px;

  transition: .2s;
}

main #root a:hover, main #mais-detalhes a:hover{
  background-size: 100% 3px;
  transition: 0.2s;
}

section#mais-detalhes img {
    border-radius: var(--border-radius-padrao);
    border: 1px solid var(--color-007);
}