@font-face {
    font-display: swap;
    font-family: Material Icons;
    font-style: normal;
    font-weight: 400;
    src: url('/static/generators/gerador-de-miras/fonts/material-icons.woff2') format("woff2");
}

.material-icons {
    word-wrap: normal;
    -moz-font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
    direction: ltr;
    display: inline-block;
    font-family: Material Icons;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}
body {
    background-color: #202124;
    display: grid;
    margin: 0;
}
.noscript {
    color: #fff;
    display: block;
    font-size: 20px;
    margin-inline: auto;
    position: relative;
    text-align: center;
    z-index: 999;
}
.no-scroll {
    overflow: hidden;
}
.box-shadow {
    box-shadow: 0 5px 14px 0 #000a;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.scroll-top {
    height: 50px;
    margin-top: -60px;
    position: fixed;
    right: 10px;
    transition: margin-top 0.25s;
    width: 50px;
    z-index: 2;
}
.scroll-top-show {
    margin-top: 15px;
    transition: margin-top 0.25s;
}
.circle-button {
    background-color: #2f3a4a;
    border: none;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    color: #fff;
    cursor: pointer;
    outline: none;
}
.circle-button:hover {
    background-color: #272f3d;
}
.circle-button:active {
    background-color: #1f2530;
}
.hidden {
    visibility: hidden;
}
.msgbox {
    background: red;
    border-radius: 4px;
    bottom: 10px;
    display: none;
    margin: 0;
    padding: 5px;
    position: fixed;
    right: 10px;
    z-index: 1000;
}
.header a,
.msgbox {
    color: #fff;
}
.header {
    background: #2f3a4a;
    box-shadow: 0 5px 14px 0 #000a;
    height: 60px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 6;
}
.header ul {
    background-color: #2f3a4a;
    box-shadow: 0 8px 8px 0 #000a;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.header li a {
    display: block;
    padding: 20px;
    text-decoration: none;
}
.header .menu-btn:hover,
.header li a:hover {
    background-color: #7f222a;
}
.header .headerProfile > span {
    display: none;
    position: relative;
    top: -2px;
}
.header .headerProfile > p {
    display: initial;
    margin: 0;
}
.header .logo {
    align-items: center;
    display: inline-flex;
    float: left;
    height: 40px;
    padding: 10px 0 10px 20px;
    text-decoration: none;
}
.header .logo img {
    height: 40px;
    padding-right: 10px;
    width: 40px;
}
.header .logo h1 {
    font-size: 1.5em;
    font-weight: 400;
}
.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}
.header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}
.header .menu-icon .navicon {
    display: block;
    height: 2px;
    position: relative;
    width: 18px;
}
.header .menu-icon .navicon:after,
.header .menu-icon .navicon:before {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
}
.header .menu-icon .navicon:before {
    top: 5px;
}
.header .menu-icon .navicon:after {
    top: -5px;
}
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked ~ .menu {
    max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
    top: 0;
}
@media (min-width: 850px) {
    .header li {
        float: left;
    }
    .header li a {
        border-right: 1px solid #f4f4f4;
        height: 20px;
        padding: 20px 30px;
        transition: background 0.5s ease;
    }
    .header li:last-child a {
        border-right: none;
    }
    .header .menu {
        clear: none;
        float: right;
        max-height: none;
    }
    .header .menu-icon {
        display: none;
    }
    .header ul {
        box-shadow: none;
    }
    .header .headerProfile > span {
        display: initial;
    }
    .header .headerProfile > p {
        display: none;
    }
}
@media (max-width: 453px) {
    .header h1 {
        display: none;
    }
}
.header ul.preload li a {
    transition: none;
}
x-hair,
x-hair > img {
    display: block;
    position: relative;
}
x-hair > img {
    border: 2px solid;
    margin-right: auto;
	margin-top: -80px;
	margin-bottom: 40px;
    width: 100%px;
}
canvas {
    display: block;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
#x-hairs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-left: 8%;
    margin-right: 8%;
}
.x-hair-container {
	padding: 1px;
    margin: 0 auto;
    min-height: 200px;
    position: relative;
    transition: background 0.5s ease;
    width: 100%;
}
#x-hairs > .x-hair-container:hover {
    background: #7f222a;
    cursor: pointer;
    transition: background 0.25s;
}
.x-hair-customizer {
    display: flex;
    flex-direction: column;
}

.x-hair-customizer > x-chapter:before {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
}

.x-hair-customizer > x-chapter:before {
    background: #1a1a1a;
    content: attr(data-name);
    font-size: 20px;
}
.x-hair-customizer > x-chapter:before,
x-chapter > div {
    align-items: center;
    color: #fff;
    display: inline-flex;
    height: 48px;
    width: 100%;
	padding-left: 10px;
}
x-chapter > div {
    background-color: #4444;
}
x-chapter > div:nth-child(2n) {
    background-color: #4441;
}
x-chapter > div:before {
    content: attr(data-name);
    margin-left: 5px;
    width: 50%;
    font-size: 1.18rem;
}
x-chapter > div > div {
    background-color: #6661;
    height: 100%;
    width: 50%;
}
.x-hair-toggle {
    position: relative;
}
.x-hair-toggle > button {
    background-color: #0000;
    border: none;
    color: #fff;
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
	font-size: 14px;
}
.x-hair-toggle > button:nth-child(2) {
    background-color: #fff3;
    left: 50%;
}
.x-hair-toggle.x-checked > button {
    background-color: #fff3;
}
.x-hair-toggle.x-checked > button:nth-child(2) {
    background-color: #0000;
}
.x-hair-toggle.x-checked > button:hover,
.x-hair-toggle > button:hover {
    background-color: #fff1;
}
.x-hair-drop {
    display: inline-block;
    position: relative;
}
.x-hair-drop-content {
    background-color: #fff;
    border: none;
    color: #000;
	padding: 10px;
    height: 100%;
    width: 100%;
}
.x-hair-drop-content > option {
    background-color: #fff;
    color: #000;
    display: block;
    text-decoration: none;
}
.x-hair-slider {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    position: relative;
}
.x-hair-slider > input {
    background-color: #0000;
    border: none;
    color: #fff;
    height: 100%;
    left: 0;
    padding: 0;
    position: relative;
    text-align: center;
    top: 0;
    width: 15%;
}
.x-hair-slider > input:focus {
    background-color: #fff1;
    outline: none;
}
.x-hair-slider > input[type="range"] {
    background-color: transparent;
    cursor: pointer;
    flex-grow: 1;
    margin: 0;
}
.x-hair-slider > input[type="range"]:last-child {
    margin-right: 15px;
}
.x-hair-slider > button.link {
    background: none;
    border: none;
    color: #fff;
    margin-inline: 3px;
}
.x-hair-slider > button.link:hover {
    cursor: pointer;
}
.x-hair-slider > input[type="range"]::-moz-range-track {
    background: #fff;
    border: 4px solid #0009;
    border-radius: 10px;
    height: 4px;
}
.x-hair-slider > input[type="range"]::-moz-range-thumb {
    background: #fff;
    border: none;
    border-radius: 25px;
    height: 10px;
    width: 10px;
}
.x-hair-slider > input[type="range"]:active::-moz-range-thumb,
.x-hair-slider > input[type="range"]:active::-moz-range-track {
    background: #eaeeb2;
}
.x-hair-slider > input[type="range"]::-ms-track {
    background: #fff;
    border: 4px solid #0009;
    border-radius: 10px;
    height: 4px;
}
.x-hair-slider > input[type="range"]::-ms-fill-lower {
    background: #e8e8e8;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}
.x-hair-slider > input[type="range"]::-ms-fill-upper {
    background: #fff;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}
.x-hair-slider > input[type="range"]::-ms-thumb {
    background: #fff;
    border: none;
    border-radius: 25px;
    height: 10px;
    margin-top: 0;
    width: 10px;
}
.x-hair-slider > input[type="range"]:focus::-ms-fill-lower,
.x-hair-slider > input[type="range"]:focus::-ms-fill-upper {
    background: #fff;
}
.x-hair-slider > input[type="range"]:active::-ms-thumb,
.x-hair-slider > input[type="range"]:active::-ms-track {
    background: #eaeeb2;
}
.picker {
    height: 100%;
    width: 50px;
}
.picker > input {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    height: 100%;
    padding: 0;
    width: 100%;
}
.picker > input::-webkit-color-swatch-wrapper {
    padding: 0;
}
.x-hair-color {
    display: flex;
}
.hex-code-input {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 90%;
}
.hex-code-input > input {
    background: none;
    border: none;
    color: #ddd;
    font-size: 22px;
    height: 86%;
    text-align: center;
    width: 90%;
}
.hex-code-input > input:focus {
    outline: none !important;
}
x-hair {
    margin-top: 10%;
    top: 0;
}
.footerText {
    color: #fff;
}
#builder {
    bottom: 0;
    top: 59px;
    width: 100%;
}
#builderTabSelect {
    display: flex;
    height: 50px;
}
#builderTabSelect > button {
	font-family: 'Montserrat', sans-serif;
    background: none;
    border: none;
    color: #d3d3d3;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1px;
    width: 15%;
	padding: 0px !important;
	width: 100%;
}
#builderTabSelect > button:not([disabled]):hover {
    color: #fff;
}
#builderTabSelect > button[disabled] {
    color: #666;
    cursor: default;
}
#builderTabSelect > button.selected {
    color: #fff;
	background-color: #000;
}
#builderResize {
    background: #fff;
    cursor: col-resize;
    margin: 0 0 0 auto;
    width: 4px;
}
.builderButton {
    background-color: #2f3a4a;
}
.builderButton:hover {
    background-color: #272f3d;
}
.builderButton:active {
    background-color: #1f2530;
}

#builderButtons > div {
	margin-top: 15px;
	margin-left: 3px;
	margin-right: 3px;
}


div#builderImage{
    position: sticky;
    top: 20px;
    z-index: 999;
}

input.bgChangeCrossHair {
	width: 134px;
}

input.bgChangeCrossHair:hover {
	outline: 2px solid #fff !important;
	outline-offset: -2px !important;
}

#copyButtonCrossHair img {
    filter: invert(1); /* Inverte as cores para branco */
}

#divCopyTextCrossHair {
	border: 1px solid #fff;
	margin-top: 10px !important;
	padding: 11px;
    color: #fff;
}

#bgPrincipalCrossHair {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

#copyButtonCrossHair {
    border: 1px solid #fff;
    background-color: #0b5ed7;
    margin-top: 10px !important;
    padding: 11px;
    text-align: center;


    display: flex;
    justify-content: center;
    align-items: center;
}

#copyButtonCrossHair:hover {
    cursor: pointer;
    background-color: #004bb5;
    border: 1px solid #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#divCopyTextCrossHairOK {
    border: 1px solid #d1e7dd;
    background-color: #d1e7dd;
	margin-top: 10px !important;
	padding: 11px;
    color: #0f5132;
    text-align: center;
    opacity: 0;
    transition: opacity 0.6s linear;
}

#divCopyTextCrossHairOK.show {
    opacity: 1;
    display: block;
}

.ch-col-9 {
    flex: 0 0 auto;
    width: 90%!important;
}

.ch-col-3 {
    flex: 0 0 auto;
    width: 10%!important;
}

@media (max-width: 780px) {
    #builder {
        flex-direction: column;
    }
    #builderResize {
        display: none;
    }
    #builderImage {
        flex-basis: 25%;
    }
    #builderRight {
        display: flex;
        flex-direction: column;
        height: 75%;
    }
	#builderButtons > div {
		flex: 0 0 auto !important;
	}
	
	.x-hair-slider > input {
		width: 30%;
	}
	
	.x-hair-customizer > x-chapter:before, x-chapter > div {
		height: 70px;
	}
}



@media (min-width: 992px){
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50% !important;
    }

    .col-3 {
        flex: 1 0 auto;
        width: 50%!important;
    }

    #btnLeft, #btnRight {
        width: 24%!important;
    }

    .col-lg {
        flex: 1 0 0%!important;
        width: auto!important;
    }

    .w-lg {
        width: 10%!important;
    }

    .mb-lg-3 {
        margin-bottom: 0;
    }

    #openClose img {
        width: 3%;
    }
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.col {
    flex: 1 0 0%;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: var(--bs-gutter-y);
}

.firstRow {
    align-items: center;
    margin: 0;
}

.pointer {
    cursor: pointer;
}

.p-0 {
    padding: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

.mt-3 {
    margin-top: 1rem!important;
}

.mt-5 {
    margin-top: 3rem!important;
}

.mb-3 {
    margin-bottom: 1rem!important;
}

.mb-5 {
    margin-bottom: 2rem!important;
}

.mb-lg-3 {
    margin-bottom: 0.3rem!important;
}

.justify-content-center {
    justify-content: center!important;
}

.d-flex {
    display: flex!important;
}

.d-none {
    display: none !important;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.flex-column {
    flex-direction: column!important;
}

.w-75 {
    width: 75%!important;
}

.form-label {
    margin-bottom: .5rem;
    font-family: var(--cs-font-post-content-family),sans-serif;
    font-size: var(--cs-font-post-content-size);
    color: #000;
}

[data-scheme=dark] .form-label {
    color: #cacaca;
}

label {
    display: inline-block;
}

.btn-primary {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.btn-red {
    color: #fff !important;
    background-color: #c6002e !important;
    border-color: #c6002e !important;
}

.btn-green {
    color: #fff !important;
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.btn-blue {
    color: #fff !important;
    background-color: #0087c6 !important;
    border-color: #0087c6 !important;
}

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 18px;
    border-radius: .25rem;
    transition: color .85s ease-in-out,background-color .85s ease-in-out,border-color .85s ease-in-out,box-shadow .85s ease-in-out;
	text-transform: initial;
    letter-spacing: 1px;
    font-family: var(--cs-font-post-content-family),sans-serif;
}
[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    border-radius: 0;
}

.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0a58ca;
    border-color: #0a53be;
}
.btn-primary:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.form-control {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    border: 1px solid #7b7d7f !important;
    border-radius: .25rem !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
	font-family: var(--cs-font-post-content-family),sans-serif !important;
}
	
[data-scheme=dark] .form-control {
	border: 1px solid #ced4da !important;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.rounded {
    border-radius: .25rem!important;
}

.bg-success {
    background-color: #198754;
}

.bg-blue {
    background-color: #0087c6;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

.bg-secondary {
    color: #fff !important;
    background-color: #6c757d;
    border-color: #6c757d;
}

.h-100 {
    height: 100%!important;
}

.w-100 {
    width: 100%!important;
}

.w-20 {
    width: 20%;
}

.w-15 {
    width: 15%!important;
}

.end-0 {
    right: 0!important;
}

.end-15 {
    right: 15%!important;
}

.top-0 {
    top: 0!important;
}

.position-absolute {
    position: absolute!important;
}

.translate-middle {
    transform: translate(-50%,-50%)!important;
}

.start-50 {
    left: 50%!important;
}

.top-50 {
    top: 50%!important;
}
/* ===== Tema design system (override do port WP fullscreen) =====
   Re-tematiza os azuis bootstrap e bordas brancas pro visual do site, sem
   tocar na estrutura/JS do builder. Sliders/toggles já são neutros (ok). */
.tool-generator #builderCopy,
.tool-generator #builderPaste,
.tool-generator #builderRandomize {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  border-radius: 10px !important;
}
.tool-generator #builderCopy:hover,
.tool-generator #builderPaste:hover,
.tool-generator #builderRandomize:hover {
  background-color: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
}
.tool-generator .btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.tool-generator #builderTabSelect > button.selected {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-radius: 8px;
}
.tool-generator #divCopyTextCrossHair {
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  border-radius: 10px;
}
.tool-generator #copyButtonCrossHair {
  background-color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px;
}
.tool-generator #divCopyTextCrossHairOK.show { background: var(--success) !important; }

/* Dropdown de cor (x-hair-drop) — era branco, clashava com o tema escuro. */
.tool-generator .x-hair-drop-content {
  background-color: var(--card) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
}
.tool-generator .x-hair-drop-content > option {
  background-color: var(--card) !important;
  color: var(--fg) !important;
}