:root {
    --select-color: #a5dc86;
    --select-color-active: rgb(13, 110, 253);
    --data-color: #4AF626;
}
#probebody {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    gap: 10px;
    width: 100%;
}
#probe_table {
    width: 100%;
    border: none;
}
.disabled-probe {
    background-color: #ccc;
    cursor: not-allowed;
}
#probe_table tr {
    border: none;
}
#probe_table td, #probe_table th {
    border-collapse: collapse;
    border-top: none;
    border-bottom: 1px solid black;
    border-left: none;
    border-right: none;
}
.warning {
    background-color: #ffcccc;
}
#target {
    height: 40px;
    font-size:15px;
    width:500px;
}
#table-afi {
    color: purple;
    font-weight: 100;
    font-family: 'Courier New', Courier, monospace;
}
.probe-set-title {
    background-color: rgb(46, 127, 173);
    font-weight: 600;
    color: white;
    text-align: center;
}
.probe-set-info {
    /* background-color: rgb(46, 127, 173); */
    /* font-weight: 600; */
    color: red;
    text-align: center;
    padding: 20px 0px;
}
#probe_table tbody tr.selectable:hover {
	background-color: var(--select-color);
	cursor: pointer;
}
.switch-field {
    display: flex;
    overflow: hidden;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label, #querybutton,.querybutton, .afi-selector {
    background-color: #e4e4e4;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 8px 45px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}
.afi-selector {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    height:100%;
    width:50%;
}
#afi-selector {
    width:60px;
    height:30px;
    position:absolute;
    right: 5px;
    top: 5px;
    display:inline-flex;
}
#targetwrapper {
    position: relative;
}
.switch-field label:hover {
    cursor: pointer;
}
.querybutton.selectable:hover,#querybutton.selectable:hover {
    cursor: pointer;
    background-color: var(--select-color);
    box-shadow: none;
}
#querybuttonmsg {
    color:red;
    font-size: 15px;
    font-family: 'Courier New', Courier, monospace;
}
.querybutton.selectable,#querybutton.selectable,.switch-field input + label:hover,.afi-selector:hover {
    background-color: #c1ddb1;
}
.switch-field input:checked + label, .afi-selector.selected {
    background-color: var(--select-color);
    box-shadow: none;
}
.querybutton.selectable:active,#querybutton.selectable:active {
    background-color: #88ca62;
}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}
#tracerouteplaceholder, #mapplaceholder{
    /* border: 2px solid black; */
    /* border-radius: 5px; */
    /* padding: 10px; */
    /* box-shadow: 5px 5px 5px grey; */
    /* min-height: 75%; */
    margin-top: 10px;
}

#traceresultshint {
    background-color: black;
    color: #d7f626;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: scroll;
    padding-top: 10px;
    padding-left: 10px;
}
#traceresults {
    background-color: black;
    color: var(--data-color);
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 50em;
    overflow: scroll;
    padding: 10px;
}

.loading {
    position: relative;
    animation-name: loading;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /* display: inline; */
    width: max-content;
    font-size: 20px;
    height: max-content;
    margin: 0px 10px;
    /* animation-timing-function: linear; */
}

.ip-select.selected {
    background-color: initial;
}
.ip-select {
    border-radius: 5px;
    padding: 2px;
    margin: 2px;
    border: 1px solid #0000;
    /* font-family: "Courier New",monospace; */
}
/* tr.selected .ip-select.selected {
    border: 1px solid black;
    background-color: #fff2;
} */
.probe-name {
    word-break: break-word;
}
tr.selected, #probe_table tbody tr.selected:hover {
	background-color: var(--select-color-active);
    color: white;
}
@keyframes loading {
    0%   {transform: rotate(0deg);}
    /* 25%  {transform: rotate(90deg)} */
    50%  {transform: rotate(180deg)}
    /* 75%  {transform: rotate(270deg)} */
    100% {transform: rotate(360deg)}
}