/*AUTHOR: Marino Tejedor Romero*/
:root {
    --primary: #2563eb;
    /* Blue 600 */
    --primary-dark: #1d4ed8;
    /* Blue 700 */
    --secondary: #475569;
    /* Slate 600 */
    --background: #f8fafc;
    /* Slate 50 */
    --surface: #ffffff;
    /* White */
    --text-main: #1e293b;
    /* Slate 800 */
    --text-muted: #64748b;
    /* Slate 500 */
    --border: #e2e8f0;
    /* Slate 200 */
    --success: #22c55e;
    /* Green 500 */
    --error: #ef4444;
    /* Red 500 */
    --warning: #f59e0b;
    /* Amber 500 */
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}


body {
    font-family: Roboto, Lato, "Open Sans", Arial, "Helvetica Neue", Verdana, Helvetica, sans-serif;
}

.nullinput {
    opacity: 0.33;
}

.ticktemplate {
    width: 100px;
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
}


.ticktemplate.arrowright {
    background-image: url(arrowright.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.ticktemplate.arrowleft {
    background-image: url(arrowleft.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.ticktemplate.arrowleft.arrowright {
    background-image: url(arrowleft.svg), url(arrowright.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;

}



.header-row {
    border: 0px
}


.tips {
    background-color: #f1c40f;
    border-left: 24px solid #f39c12;
    padding: 24px;
    border-radius: 6px;
}

.tips h3 {
    margin-top: 0
}

.tips ol {
    margin-bottom: 0
}

.authors {
    background-color: #f1c43f;
    border-left: 24px solid #f39c12;
    padding: 24px;
    border-radius: 6px;
}

.authors h3 {
    margin-top: 0
}

.authors ol {
    margin-bottom: 0
}


#yellow {
    background-color: #f1c40f80;
    border-radius: 2px;
    border: 1px solid #f39c1280;
    color: #2c3e50;
}

#red {
    background-color: #e74c3c80;
    border-radius: 2px;
    border: 1px solid #c0392b80;
    color: #2c3e50;
}

#green {
    background-color: #2ecc7180;
    border-radius: 2px;
    border: 1px solid #27ae6080;
    color: #2c3e50;
}

table {
    border-collapse: separate;
    margin: 20px auto;
}

td {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    position: relative;
}

select {
    width: 60px;
}

/* SVG overlay on top of the table */
#arrowLayer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.ticktemplate {
    width: 200px;
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
}

.top-header {
    background-color: #339933;
    padding: 6px;
    border: 0px;
    border-radius: 6px 6px 0 0;
    text-transform: capitalize;
}

.ip-dns-header {
    background-color: #40bf40;
    padding: 6px;
    border: 2px;
    box-sizing: border-box;
    border-radius: 0;
    text-transform: capitalize;
    font-weight: 550;
    font-size: 14px;
}

.content-header {
    background-color: #66cc66;
    padding: 6px;
    border: 0px;
    box-sizing: border-box;
    border-radius: 0;
    text-transform: capitalize;
    font-weight: 550;
    font-size: 14px;
}


.bottom-header {
    background-color: #8cd98c;
    padding: 6px;
    border: 0px;
    box-sizing: border-box;
    border-radius: 0;
    text-transform: capitalize;
    font-weight: 550;
    font-size: 14px;
}

/* Layout Containers */
.navbar {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    margin-bottom: 2rem;
}

.navbar h1 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary);
    font-weight: 700;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.card {
    background-color: var(--surface);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    padding: 2rem;
    overflow-x: auto;
    /* Handle wide tables */
}