:root {
    /* Foreground Color */
    --split-foreground: #000000;
    /* Combination of Salmon/Tomato */
    --split-background: #F27F64;
    --join-foreground: #000000;
    /* Combination of Light/Celestial Blue */
    --join-background: #6FB0D6;
}

.table>:not(caption)>*>* {
    background-color: unset;
}

#bottom_nav {
    height:2rem;
}

#bottom_nav span {
    border-bottom: var(--bs-body-underline);
}

#dark_mode {
    cursor:pointer !important;
    text-align: right;
    width:15rem;
    float:right;
}

#dark_mode a {
    width:15rem;
    text-align: right;
    text-decoration: none;
    border-bottom:1px var(--bs-success) dotted;
}


#copy_url {
    cursor:pointer !important;
    text-align: center;
    width:11rem;
}

#copy_url span {
    width:11rem;
    text-align: center;
}

#color_palette {
    min-width: 0rem;
}

#color_palette #colors_word_close {
    line-height: 2rem;
    cursor:pointer;
}

#color_palette #colors_word_open {
    display:inline-block;
    height:2rem;
    cursor:pointer;
    white-space: nowrap;
}

#color_palette div {
    display:inline-block;
    height:2rem;
    cursor:pointer;
    white-space: nowrap;
}

#color_palette div[id^='palette_picker_'] {
    width:2rem;
    border:1px solid;
}

#color_palette #palette_picker_1 {
    background-color: var(--subpal-1-1);
}
#color_palette #palette_picker_2 {
    background-color: var(--subpal-1-2);
}
#color_palette #palette_picker_3 {
    background-color: var(--subpal-1-3);
}
#color_palette #palette_picker_4 {
    background-color: var(--subpal-1-4);
}
#color_palette #palette_picker_5 {
    background-color: var(--subpal-1-5);
}
#color_palette #palette_picker_6 {
    background-color: var(--subpal-1-6);
}
#color_palette #palette_picker_7 {
    background-color: var(--subpal-1-7);
}
#color_palette #palette_picker_8 {
    background-color: var(--subpal-1-8);
}
#color_palette #palette_picker_9 {
    background-color: var(--subpal-1-9);
}
#color_palette #palette_picker_10 {
    background-color: var(--subpal-1-10);
}

.container-xxl {
    min-width: 576px;
}

#subnet_input #network {
    flex-grow: 0;
    flex-basis: 11rem;
}
#subnet_input #netsize {
    flex-grow: 0;
    flex-basis: 4rem;
}

#calc {
    vertical-align: middle;
}

#calc>tbody>tr>td, #calc>tbody>tr>th, #calc>tfoot>tr>td, #calc>tfoot>tr>th, #calc>thead>tr>td, #calc>thead>tr>th {
    /* Equivalent to p-1 */
    padding: 0.25rem;
    /* Equivalent to p-2 */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/*
#joinHeader {
    border:none;
}

#calc thead {
    border-right-width: 1px;
    border-bottom-width: 0px;
}*/

#calc span.split {
    color: var(--split-background);
}

#calc span.join {
    color: var(--join-background);
}

#calc td.split {
    background-color: var(--split-background);
    color: var(--split-foreground);
    cursor: pointer;
    min-width: 2.3rem;
    width: 1%;
    font-size:1rem;
}

#notifyModal .modal-content {
    background-color: var(--bs-alert-bg);
}

#calc td.join {
    background-color: var(--join-background);
    color: var(--join-foreground);
    cursor: pointer;
    min-width: 2.3rem;
    width: 1%;
    font-size:1rem;
}

#calc td.split, #calc td.join {
    padding: 0;
}

#calc td.split span, #calc td.join span {
    padding-right: 0.4rem;
}
#calc .note {
    padding-left:0.5rem;
    padding-right:0.5rem;
}

#calc .note label,input {
    width: 100%;
}

#calc .row_address {
    white-space: nowrap;
    padding-left:0.5rem;
    padding-right:0.5rem;
}

#calc .row_range {
    /* TODO: Make this a checkbox?
    white-space: nowrap;
     */
    padding-left:0.5rem;
    padding-right:0.5rem;
}

#calc .row_usable {
    /* TODO: Make this a checkbox?
    white-space: nowrap;
     */
    padding-left:0.5rem;
    padding-right:0.5rem;
}

#calc .row_hosts {
    width:1%;
    white-space: nowrap;
    padding-left:0.5rem;
    padding-right:0.5rem;
}


#calc .note input {
    border: none !important;
    border-color: transparent !important;
    background-color: transparent;
}

/* https://stackoverflow.com/a/47245068/606974 */
.rotate {
    vertical-align: middle;
    text-align: end;
}
.rotate span {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    padding-top: 0.25rem;
}

/* Animation for the small circle */
.icon-tabler-toggle-left circle {
    transition: transform 0.4s ease;
}

[data-bs-theme="dark"] .icon-tabler-toggle-left circle {
    transform: translateX(8px); /* Adjust this value based on your design */
}