@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

:root{
    --color-blue: #007acc;
    --color-blue-hover: #005f9e;
    --color-green: #4CAF50;
    --background-color: #222222;
    --background-color-secondary: #282828;
    --font-color: #cccccc;
}

.google-sans-code {
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
}


/* Estilo inspirado no VS Code Dark Theme */
body {
    background-color: var(--background-color-secondary);
    color: var(--font-color);
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-family: "Google Sans Flex", Helvetica, Arial, sans-serif;
    padding: 20px;
    margin: 0;
    font-size: 16px;
}

a {
    color: var(--color-blue);    
    text-decoration: none
}

a:hover, a:focus {
    /* color: var(--color-blue-hover); */
    /* font-weight: bold; */
    text-shadow: 2px 2px 1px rgba(25, 25, 25, 1), -2px -2px 1px rgba(25, 25, 25, 1), 1px 1px 6px rgba(200, 200, 200, 1);
}

.wrapper {    
    max-width: 560px; /* Garante que o elemento ocupe no máximo 560px em dispositivos maiores */
    width: 90%; /* Garante que o elemento ocupe 90% da tela em dispositivos pequenos */
    margin: 0 auto;
    border: 1px solid #727272;
    box-shadow: 0px 0px 2px rgb(255, 255, 255), 10px 10px 8px rgba(30, 30, 30, 0.4), 10px 10px 16px rgba(10, 10, 10, 0.9);
    padding: 20px;
    border-radius: 8px;
    background-color: var(--background-color);    
    box-sizing: border-box; /* Evita que o padding aumente o tamanho total da div */
}

p.view { position: static; }

h1, h2, h3, h4, h5, h6 {
    font-family: "Google Sans Flex", Helvetica, Arial, sans-serif;
    /* color: var(--color-darkgreen); */
    /* margin: auto auto 12px; */
    margin: 0 0 12px;
}

p, ul, ol, table, pre, dl {
    margin: 0 0 10px;
}

hr {
    border: 0;
    background: #e5e5e5;
    height: 1px;
    margin: 0 0 26px;
}

.form-group { margin-top: 15px; margin-bottom: 15px; }

label { display: block; margin-bottom: 5px; font-size: 13px; }

input[type="text"] {
    width: 100%; padding: 8px; box-sizing: border-box;
    background-color: #3c3c3c; color: #cccccc;
    border: 1px solid #3c3c3c; border-radius: 2px;
    font-family: Consolas, 'Courier New', monospace;
}

input[type="text"]:focus { outline: 1px solid #007acc; border-color: transparent; }

select {
    width: 100%;
    padding: 8px;
    color: #cccccc;
    background-color: #3c3c3c;
    border: 1px solid #3c3c3c;
    border-radius: 2px;
}

.checkbox-group {display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.checkbox-group label { display: flex; align-items: center; cursor: pointer; font-size: 13px; }
.checkbox-group input { margin-right: 8px; accent-color: #007acc; }
.btn-container { display: flex; gap: 10px; margin-top: 20px; }

button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    color: white;
    background-color: var(--color-blue);
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}

button:hover { background-color: var(--color-blue-hover); }

.btn-secondary { background-color: #333333; border: 1px solid var(--color-blue); }

.btn-secondary:hover { background-color: #444444; }

#statusMessage { margin-top: 15px; font-size: 12px; color:  var(--color-green); }


/* ------------------------------------------------------------------ */
@media print, screen and (max-width: 960px) {
    body {
        padding: 4px;
    }

    div.wrapper {
        width: auto;
        margin: 0;  
        padding: 10px;
    }

    header,
    section,
    footer {
        float: none;
        position: static;
        width: auto
    }

    header {
        padding-right: 320px
    }

    section {
        border: 1px solid #e5e5e5;
        border-width: 1px 0;
        padding: 20px 0;
        margin: 0 0 20px
    }

    header a small {
        display: inline
    }

    header ul {
        position: absolute;
        right: 50px;
        top: 52px
    }
}

/* ------------------------------------------------------------------ */

@media print, screen and (max-width: 720px) {
    body {
        word-wrap: break-word;
    }

    header {
        padding: 0
    }

    header ul,
    header p.view {
        position: static
    }

    pre,
    code {
        word-wrap: normal
    }
}

@media print, screen and (max-width: 480px) {
    body {
        padding: 10px;
    }

    .downloads {
        width: 99%
    }

    .downloads li,
    .downloads li+li+li {
        width: 33%
    }
}

@media print {
    body {
        padding: 0.4in;
        font-size: 12pt;
        color: #333333;
    }
}