/* CAIDA AS Rank application customized styles */

/*div {
    border:1px solid black;
}*/

.codeblock{
    background-color:#222;
    color:#aaa;
    border:2px solid #ddd;
    padding:.5em;
    width:auto;
    margin-bottom:10px;
    overflow:auto
}

.asrank-image {
    -moz-box-shadow:10px 10px 5px #888;
    -webkit-box-shadow:10px 10px 5px #888;
    box-shadow:5px 5px 7px #888;
    font-size:80%;
}

DIV.asrank-image {
    float: right;
    margin: 1em;
    margin-bottom: 2em;
}

#navbar {
    margin: .5rem 0rem 1rem 1em;
    vertical-align:top;
    color:blue;
}

#loader{
    position: relative;
    margin: 20px auto;
    display: block
}

.asrank-navbar-tagline {
    padding:0px;
    margin-left:10px;
    font-size:70%;
    position:relative;
    bottom:-10px;
    overflow: hidden;
    white-space: nowrap;
    line-height:1.2;
}

.as-core-small {
    float: left;
    width: 208px;
    margin: 0 30px 30px 0;
}

.left-align {
    text-align: left !important;
}
.center-align {
    text-align: center !important;
}

.asrank-navbar-container {
		margin-left: 0px;
        display: flex;
        justify-content: space-between;
}

.asrank-asrank-logo {
    height:2em;
}

.asrank-asrank-logo-small {
    height:1.2em;
    position: relative;
    top: -4px;
    margin-left: -6px;
}
.asrank-support-ucsd-seal {
    position:relative;
    height:42px;
    top:3px;
    float:right;
    vertical-align: middle
}
.asrank-support-dhs-logo {
    position:relative;
    height:42px;
    top:3px;
    float:right;
    vertical-align: middle
}

.asrank-maintenance {
    margin:2em;
    width:30em;
    text-align:center;
}
.asrank-error {
    margin:2em;
}
.asrank-unknown {
    color:lightgrey;
}
.asrank-result-error {
    font-size:90%;
    color:red;
}


html, body
{
    height: 100%;
}

.asrank-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 100px;
    width:100%;
    margin-left:2em;
    margin-right:2em;
}

/* @media (min-width: 992px) {
    .asrank-feedback-nav {
        padding-right: calc((100vw - 960px) / 2) !important;
    }
} */

.asrank-contact {
    padding-top:2em;
    padding-left:.3em;
}

.asrank-footer {
  height: 3em;
  background-color: black;
  color: lightgray;
  padding-left:.5em;
  width:100%;
  overflow: hidden;
  position: fixed;
  bottom: 0em;
}

.asrank-support {   
    line-height:70%;
}

.asrank-support-text {
    font-size:70%;
}

.asrank-support-caida-logo {
    height:3em;
    float:right;
}
/******** tables *********/

.asrank-row-org {
    max-width: 10em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.asrank-row-none {
    text-align:center !important;
}


.asrank-asn-info-table {
    width: auto !important;
}

.asrank-info-table td {
    padding: 0.1rem;
    padding-left:1em;
    padding-right:1em;
}
.asrank-info-table th {
    background-color:rgba(118, 189, 243, 0.14);
    padding: 0.1rem;
    padding-left:2em;
    padding-right:1em;
    text-align:right;
    white-space: nowrap;
}

.asrank-info-table-sub_facts {
    font-size:90%;
    text-align:center;
    vertical-align:center;
    line-height:95%;
}

.asrank-info-table-sub_facts span {
    font-size:90%;
    color:grey;
}

/******** ASNs *********/

.table th {
    background-color:#FFEEEE;
}

.asrank-asns-table th {
    vertical-align:bottom;
    text-align:center;
    padding: 0.1rem;
}

.asrank-asns-table td {
    text-align:right;
    overflow: hidden;
    padding: 0.25rem;
}


.asrank-asn-table div {
    display:inline-block;
	text-align:right;
}

/******** AS Information *********/

.asrank-asn-information-table {
    width: auto !important;
}

.asrank-asn-information-table td {
    padding: 0.1rem;
    padding-left:1em;
    padding-right:2em;
}
.asrank-asn-information-table th {
    background-color:darkgrey;
    padding: 0.1rem;
    padding-left:2em;
    padding-right:1em;
    text-align:right;
    white-space: nowrap;
}

.asrank-asn-information-degree-table {
    border-width: 0px;
    border-spacing: 0px;
    border-color: white;
}
.asrank-asn-information-degree-table th {
    padding-left:0px;
    padding-right:1.5em;
    vertical-align:middle;
    background-color:white;
    font-weight:normal;
    text-align:left;
}
.asrank-asn-information-degree-table td {
    font-size:50%;
    text-align:center;
}


/******** AS Links *********/

.asrank-asn-neighbors-table table {
    width:100%;
    border: solid 1px;
    background-color:green;
}

.asrank-asn-neighbors-table th{
    text-align:center;
    padding: 0.1rem;
}

.asrank-asn-neighbors-table td {
    padding: 0.1rem;
    text-align:right;
}
.asrank-asns-table td.perc {
    position:relative;
    text-align:right;
}
.asrank-asns-table td div.perc { 
    position:absolute;
    right:0;
    top:0;
    z-index:-1;
    background-color: #DFDFFF; 
    text-align: right; 
}
.asrank-asn-table td span.perc {
    background-color: #DDDDDD;
}
/******** AS Search *********/

.asrank-asn-search-form-div {
    padding-top:0em;
    padding-bottom: .3em;
}

.asrank-asn-search-form-div label {
    font-weight:bold;
    width:4em;
    text-align:right;
    position: relative;
    top:.3em;
    margin-right:.5em;
}

/******** AS Data Sources *********/

.asrank-data-sources {
    letter-spacing: -.1px;
    font-size: 80%;
    background-color: lightgray;
    margin-bottom:3.7em;
    bottom: 0;
}

.asrank-data-sources-title {
    font-size:90%;
    margin-left: 1em;
    top: -.2em;
    position: relative;
}

.asrank-data-sources-set {
    top: -.8em;
    margin-left: 5px;
    position: relative;
}

.asrank-data-sources-spacer {
    font-size: 120%;
    margin-right: 1em;
    margin-left: 1em;
    color: white;
}

/******** AS FAQ *********/

.asrank-faq-answer {
    font-weight:normal;
		margin-bottom: 1em;
}

.asrank-faq-question {
    font-weight:bold;
}

.asrank-faq-title {
		font-size: x-large;
    font-weight:bold;
		margin-bottom: 1em;
}

#svg-radar-link, #svg-radar-big{
    width: 100%;
    height: 100%;
    display: block;
}

#svg-radar-link svg, #svg-radar-big svg{
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

/******** AS Feedback *********/

.asrank-feedback-nav {
    position: sticky;
    top: 0;
    z-index: 2;
}

.asrank-feedback-nav::before {
    top: 0;
    z-index: -1;
    margin: 0 calc((-100vw + 100%) / 2);
    background: #ECF6FD;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    width: 100vw;
    top: 0;
    bottom: 0;
    left: 0;
    content: "";
    position: absolute;
}

.asrank-feedback-nav > h2 {
    margin-bottom: 0;
}

.asrank-feedback#personal {
    border: solid 1px #c3c3c3;
    padding: 1rem;
    width: 80%;
}

.asrank-feedback#personal > div {
    min-width: fit-content;
    margin: 0 2rem;
}

.asrank-feedback#personal label {
    color: #004F95;
}

.asrank-feedback input {
    border: solid 1px #004F95;
    border-radius: 2px;
}

.asrank-feedback #org_link {
    width: 70%;
}

#org_link input {
    width: 100%;
}

.asrank-feedback input::placeholder {
    color: #A0BFD9;
}

.form-group label {
    display: inline;
}

.asrank-feedback #spoofer {
    position: relative;
}

.asrank-feedback #spoofer:hover {
    cursor: pointer;
}

.asrank-feedback #spoofer::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: rgba(247, 250, 252, 0.50);
}

.asrank-feedback #spoofer::after {
    color: #878D93;
    content: "To provide feedback to Spoofer, please click here.";
    border-radius: 7px;
    border: 1.5px solid #878D93;
    background: #FFF;
    position: absolute;
    margin: auto;
    width: fit-content;
    height: fit-content;
    inset: 0;
    padding: 0.5rem 0.75rem;
}

.asrank-feedback #spoofer:hover::after {
    color: #77A5CE;
    border-color: #004F95;
}

/******** AS Feedback Bottom Info Table *********/
.asrank-feedback-button-cell {
    background-color: transparent;
    border: none;
}

.asrank-feedback-tableinfo {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.asrank-feedback-tableinfo-section {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.asrank-feedback-tableinfo-item {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

#legend {
    display: flex;
    justify-content: space-around;
    width: 35%;
    border-radius: 4px;
    border: 1px solid #C3C3C3;
    padding: 0.5rem;
    margin-left: auto;
    margin-bottom: 0.75rem;
}

#legend * {
    display: flex;
    flex-flow: row wrap;
}

.legend-icon {
    margin-right: 0.5rem;
    text-align: center;
    font-weight: bold;
    display: inline-block;
}

.legend .modify {
    background-color: rgba(255, 255, 0, 0.25);
}

.legend .validate {
    background-color: #CEEBFF;
}

.legend .add {
    background-color: rgba(84, 228, 84, 0.25);
}
.legend .add > .legend-icon {
    color: #008000;
    background-color: #DEF6EA;
    border: 1px solid #008000;
    border-radius: 50%;
}

.legend .remove {
    background-color: rgba(255, 0, 0, 0.25);
}

.legend .remove > .legend-icon {
    color: #F00;
    border: 1px solid #F00;
    border-radius: 50%;
}

.legend .remove > .legend-icon, .legend .add > .legend-icon {
    width: 25px;
    height: 25px;
    justify-content: center;
}

.table-button {
    background-color: white;
    border: 1px solid white !important;
}

/* rename this */
.remove-button {
    height: 25px;
    width: 25px;
    border: 1px solid #C3C3C3;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
}

td.removed {
    background-color: rgba(255, 66, 66, 0.25);
}

td.validated {
    background: rgba(95, 189, 255, 0.25);
}

td.modified {
    background: rgba(255, 255, 0, 0.25)
}

td.added {
    background: rgba(84, 228, 84, 0.25)
}

.sort-button {
    color: #007bff;
    cursor: pointer;
    font-size: 80%;
    font-weight: normal;
}

.sort-button:hover {
    text-decoration: underline;
}

.pointer-button {
    cursor: pointer;
}

.feedback-input:disabled {
    font-weight: bold;
    background: transparent;
    border-color: transparent;
}

.feedback-info-input:disabled {
    font-weight: bold;
    border-color: transparent;
    background: rgba(255, 255, 0, 0.25);
    color: black;
}

/* .feedback-info-input[value=""]:disabled {
    font-weight: normal;
    border-color: transparent;
    background: transparent;
    color: black;
} */