@font-face {
    font-family: 'BrushCrazy';
    src: url('/fonts/brushcrazy-regular.otf') format('opentype');
}
@font-face {
    font-family: 'BrushCrazyNumeros';
    src: url('/fonts/brushcrazy-regular-numeros.otf') format('opentype');
}
html, body {
    overflow: hidden; /* Evita rolagem na página */
    height: 100%;
}
body {
    background-color: #f0f1f5;
    display: flex;
    height: 100vh;
    margin: 0px;
}

.container-fluid {
    display: flex;
    height: 100vh;
}

.left, .right {
    flex: 1;
    box-sizing: border-box;
}
.left {
    background: #fff;
    border-right: 1px solid var(--bs-border-color);
    max-width: 400px;
    overflow-y: auto;
    max-height: 100vh;
}
.right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    background: #f8f9fa;
}
.form-container {
    max-width: 400px;
    margin: auto;
}

.card-preview {
    width: 720px;
    height: 1075px;
    text-align: center;
    position: relative;
}
.numero, .titulo, .subtitulo, .item-titulo, .item-nivel {
    font-family: 'BrushCrazy', Arial, sans-serif;
    font-weight: normal;
}
.numero, .titulo, .subtitulo {
    position: absolute;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #642b0e;
}
.numero { top: 114px; left: 102px; width: 79px; font-size: 52px; }
.titulo { top: 115px; left: 187px; width: 433px; font-size: 34px; }
.subtitulo { top: 160px; left: 105px; width: 514px; font-size: 26px; }

#previewImage {
    position: absolute;
    left: 100px;
    top: 228px;
    width: 520px;
}
.itens {
    position: absolute;
    left: 109px;
    width: 498px;
    height: 40px;
}
.item-titulo, .item-nivel {
    position: absolute;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 30px;
    color: #642b0e;
}
.item-titulo { left: 0; width: 238px; }
.item-nivel { right: 0; width: 260px; justify-content: flex-end; }

.item-image {
    width: 34px;
    height: auto;
    margin-right: 3px;
}
.risco-image {
    width: 95px;
    height: auto;
    margin-right: 3px;
}

/* Posicionamento din창mico dos itens */
.item1 { top: 686px; } .item2 { top: 730px; } .item3 { top: 774px; }
.item4 { top: 821px; } .item5 { top: 867px; } .item6 { top: 914px; }

.font-number {
    font-family: 'BrushCrazyNumeros', Arial, sans-serif;
    display: contents;
}

.forminput-group {
    border: 1px solid;
    position: relative;
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    border-radius: 6px;
    background-color: #2b2b2b;
    margin-bottom: 10px;
}

#previewImageBg {    
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
}


/* Novas Classe que podem vir a ser do bootstrap */
.flex-1 {
    flex: 1;
}


/* Botões de Zoom */
.zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zoom-controls button {
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
}

.modal-backdrop.show {
    opacity: 0.9;
}