:root {
    --select-color: #a5dc86;
}
#probebody {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    gap: 10px;
    width: 100%;
}
#probe_table {
    width: 100%;
    border: none;
}
#probe_table tr {
    border: none;
}
#probe_table thead th {
    border-collapse: collapse;
    border-top: none;
    border-bottom: 1px solid black;
    border-left: none;
    border-right: none;
    text-transform: capitalize;
}

#probe_table tbody td {
    border-collapse: collapse;
    border-top: none;
    border-bottom: 1px solid black;
    border-left: none;
    border-right: none;
}
#probe_table tbody tr: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 {
    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;
}

#buttonerror {
	margin-left: 1em;
	color: red;
	font-weight: bold;
}

#buttonerror.span {
	vertical-align: bottom;
}

#querybutton {
    /* background-color: #a5dc86; */
    /* background-color: #e4e4e4 */
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 6px 45px;
    margin-right: -1px;
    border: 2px 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;
}

.qbactive { 
    cursor: pointer;
	background-color: #a5dc86;
}

.qbinactive {
    cursor: not-allowed;
	background-color: #e4e4e4;
}

.qbinactive:hover {
    background-color: #e4e4e4;
    box-shadow: none;
}

#querybutton:disabled {
     color: rgba(0, 0, 0, 0.6);
    background-color: #e4e4e4
}

#querybutton:hover {
    /*     background-color: #a5dc86; */
        /* background-color: #4AF626; */
        box-shadow: none;
        border: 2px solid #999;
    }

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
    background-color: var(--select-color);
    box-shadow: none;
}
/*
.switch-field input:checked + label, #querybutton:active {
    background-color: var(--select-color);
    box-shadow: none;
}
*/
.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: 1px solid black; */
    padding: 15px;
    min-height: 75%;
    margin-top: 10px;
}

#traceresults:hover button {
  visibility: visible;
}

#traceresults:hover button:hover {
  fill: #4AF626;
}

#traceresults  button {
  all: unset;
  visibility: hidden;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.9rem;
  padding: 0.15rem;
  background-color: #000;
  fill: gray;
}

#traceresults .copied {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 1.0rem;
  padding: 0.15rem;
  background-color: #000;
  fill: gray;
}

.pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    padding: 10px;
    font-family: "Courier New", monospace;
    white-space: pre;
}

.term {
	background-color: black;
    color: #4AF626;
}

.selected, .checked {
	background-color: var(--select-color);
}
.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; */
}
  
@keyframes loading {
    0%   {transform: rotate(0deg);}
    /* 25%  {transform: rotate(90deg)} */
    /* 50%  {transform: rotate(180deg)} */
    /* 75%  {transform: rotate(270deg)} */
    100% {transform: rotate(360deg)}
}

.input{
    display: flex;
    align-items: center;
}

#searchresults {
    margin-top: 5px;
}

#searchcontainer input {
    flex-grow: 1;
    line-height: 40px;
    font-size: 20px;
    border: 1px solid #999;
    border-radius: 4px;
    background-color: #fffd;
    padding: 5px;
}

#targetwrapper input {
    flex-grow: 1;
    line-height: 40px;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fffd;
    padding: 5px;
}

#searchresultscontainer {
    max-height: 25em; 
    flex-direction: column; 
    display: flex; 
    overflow: auto;
}


#searchresults table {
    width: 100%;
}

#searchresults thead {
    text-align: left;
}

#ip-type-selector, #measurement-type-selector, #target-type-selector{
/*     margin-top: 5%;
    margin-bottom: 5%;
*/
justify-content: center;
}

#querybuttoncontainer{
    display:flex; 
    flex-direction:row;
    align-items:center;
    padding-top: 15px;
    /* padding: 5px; */
}

#tracerouteplaceholder{
    padding: 3px;
    margin-top: 10px;
}

.tabdata {
	align-items: normal;
}

.source_examples ,.destination_examples{
    color: blue;
    /* font-weight: bold; */
    cursor: pointer;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #fff;
  color: #000;
  text-align: left;
  padding: 5px 0;
  box-shadow:2px 3px 5px #999;
  border: 1px solid #ccc;  
  border-radius: 4px; 
  margin-top: 1px; 
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;	
}

/* toggle css */

    .toggle {
      --width: 60px;
      --height: calc(var(--width) / 2);
      position: relative;
      display: inline-block;
      width: var(--width);
      height: var(--height);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      /* border-radius: var(--height); */
      cursor: pointer;
    }

    .toggle input {
      display: none;
    }

    .toggle .slider {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* border-radius: var(--height); */
      background-color: #a5dc86;
      /* transition: all 0.4s ease-in-out; */
    }

    .toggle .slider::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(var(--height));
      height: calc(var(--height));
      /* border-radius: calc(var(--height) / 2); */
      background-color: #fff;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      /* transition: all 0.4s ease-in-out; */
    }

    .toggle input:checked+.slider {
      /* background-color: #2196F3; */
      background-color: #a5dc86;
    }

    .toggle input:checked+.slider::before {
      transform: translateX(calc(var(--width) - var(--height)));
    }

    .toggle .labels {
      position: absolute;
      top: 6px;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 14px;
      font-family: sans-serif;
      /* transition: all 0.4s ease-in-out; */
    }

    .toggle .labels::after {
      content: attr(data-off);
      position: absolute;
      right: 5px;
      color: rgba(0, 0, 0, 0.6);
      /* color: #4d4d4d; */
      opacity: 1;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
/*       transition: all 0.4s ease-in-out; */
    }

    .toggle .labels::before {
      content: attr(data-on);
      position: absolute;
      left: 5px;
      color: rgba(0, 0, 0, 0.6);
      opacity: 0;
      text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
      /* transition: all 0.4s ease-in-out; */
    }

    .toggle input:checked~.labels::after {
      opacity: 0;
    }

    .toggle input:checked~.labels::before {
      opacity: 1;
    }

/*
 afi-selector
*/

.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:hover {
    background-color: #c1ddb1;
}
.afi-selector.checked {
    background-color: var(--select-color);
    box-shadow: none;
}

.info-container {
	display: inline; 
	float: right; 
	padding-right: 10px;
	font-size: 10px;
/*	font-weight: bold; */
}

.info {
	padding-right: 2px;
}

.info .nok {
	color: red; 
	border: 2px solid red;
	padding: 0px 3px 0px 3px;
}

.info .ok {
	color: green; 
	border: 2px solid green;
	padding: 0px 3px 0px 3px;
}

.info .rtt {
	color: blue; 
	border: 2px solid blue;
	padding: 0px 3px 0px 3px;
}

#footer {
	padding-bottom: 5px;
}

.checkmark {
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}