* {border-radius: 4px;}
body {background-color:#00853e; color:black; font-family: 'Noto Sans', sans-serif !important;}
.screenreader-text {position:absolute; left:-999px; width:1px; height:1px; top:auto;}
.screenreader-text:focus {color:black; display:inline-block; height:auto; width:auto; position:static; margin:auto;}
.spacer {padding-top:5px;}
#round {border-radius:5px; height:auto; padding: 3px 3px 3px 3px;}
.mobileShow {display:none;text-align:center;}
@media only screen and (min-device-width :320px) and (max-device-width :480px){.mobileShow {display:inline;}}
.mobileHide { display:inline;}
@media only screen and (min-device-width :320px)and (max-device-width :480px){.mobileHide { display:none;}}

.warn-desktop {background-color: transparent; font-weight: bold; font-size: 1.5rem; margin: 0 auto .5rem auto; text-align: center;}
.warn-mobile {background-color: transparent; font-weight: bold; font-size: 20px; margin: 0 auto 0 auto; text-align: center;}
.center {text-align:center; margin-left: auto; margin-right: auto;}


.idserver_wrapper {
    background-color: #fff;
    width: 35%;
    margin: 0 auto 0 auto;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
    margin: 1rem auto;

}

.privacy {
    width: 100%;
    margin: 0 auto 1rem 0;
    text-align: center;
    padding: 0;
    font-size: 1rem;
}

.notice {
    background-color: #E5E7EB;
    display: block;
    color: #000;
    text-shadow: 1px 1px 2px #fff;
    margin: 0 auto;
    text-align: justify;
    padding: .5rem;
}

/* ===== CORE LAYOUT ===== */
.classify-container {
    background-color: #27272A;
    margin: 0 auto .25rem auto;
    padding: .25rem;
    width: 100%;
    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        calc(55% - .167rem)
        calc(22.5% - .167rem)
        calc(22.5% - .167rem);

    gap: .25rem;
}

.servername,
.classify {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0 .5rem;
    line-height: 2;
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;

    display: flex;
    align-items: center;
}

.servername {
    justify-content: flex-start;
}

.classify {
    justify-content: center;
}

.redirect-null {
    display: none;
}

.classify-private {
    color:#fff;
    text-shadow: 2px 2px 4px #000; 
    background-color: #E74C3C; 
    border: 1px solid #E74C3C;
}

.classify-public {
    color:#fff;
    text-shadow: 2px 2px 4px #000; 
    background-color: #2AA63E; 
    border: 1px solid #2AA63E;
}

.classify-alias {
    color:#000;
    background-color: #A2F4FD; 
    border: 1px solid #A2F4FD;
}

.classify-server {
    color:#000;
    background-color: #FFDF20; 
    border: 1px solid #FFDF20;
}

.classify-production {
    color:#fff;
    text-shadow: 2px 2px 4px #000;    
    background-color: #239B56;
    border: 1px solid #239B56;
}

.classify-development {
    color: #fff;
    text-shadow: 2px 2px 4px #000;    
    background-color: #314158;
    border: 1px solid #314158;
}

.classify-redirect {
    color: #fff;
    text-shadow: 2px 2px 4px #000;    
    background-color: #8D6E63;
    border: 1px solid #8D6E63;
}


/* ===== LINKS ===== */
a {
    background-color: transparent;
    text-decoration: none;
    border: 1px solid transparent;
}

a:hover {background-color: #F44336; color: #FFB74D;}

a.support {
    background-color: #292929;
    font-weight: 400;
    padding: 0rem .5rem;
    color: #fff;
    font-size: .75rem;
    text-shadow: 2px 2px 4px #000;
    line-height: 1.4;
    display: inline-block;
    width: 65%;
}
a.support:hover {background-color: #FFF085; color: #000; text-shadow: 2px 2px 4px #fff; border: 1px solid #00853E;}
a.support:active {background-color:#FF6467; color: #FFF085; border: 1px solid #F44336;}

.support_wrapper {
    color: white;
    background-color: #00853e;
    padding:.5rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 0 auto;
    box-sizing: border-box;
}

.support_wrapper * {
   line-height: 1;
}

.support_text {
    display: block;
    color: #FFF;
    text-shadow: 2px 2px 4px #000;
    margin-bottom: .5rem;
    font-size: 1rem;
}
.support_links {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}

.support_label {
    width: 35%;
    text-align: left;
    color: #fff;
    font-size: .75rem;
    text-shadow: 2px 2px 4px #000;
    flex-shrink: 0;
}

/* ===== REDIRECT BLOCK ===== */
.redirect-embed {
    color: white;
    background-color: #1A7595;
    border: 1px solid #1A7595;
    padding: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 1rem;
    box-sizing: border-box;
}

.redirect-embed * {
   line-height: 1.4;
}

.redirect-null {
    color: white;
    background-color: transparent;
    border: 1px solid transparent;
    font-size: .85rem;
    font-weight: 600;
    text-shadow: 2px 2px 4px #000;
    padding: .25rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
}


.redirect-text {
    display: block;
    color: #FFF;
    text-shadow: 2px 2px 4px #000;
    padding-left: .25rem;
    margin-bottom: .5rem;
    font-size: .85rem;
}

.redirect-links {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    margin: 0; padding: 0;
}

.redirect-separator {
    white-space: nowrap;
}

/* ===== OTHER ===== */
.logo-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  width: 100%;
  margin-top: 1.5rem;
}

.logo-col{
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.logo-box{
  background: #B2BABB;
  padding: 1rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo { width: 300px; height: auto; display: block; }

.logo-small{
  width: 143px;
  height: auto;
  display: block;
}

.service-description {
    width: 100%;
    margin: 0 auto 1rem auto;
    border: 1px solid #E5E7EB;
    padding: .5rem;
    box-sizing: border-box;
}

.service-description p {
    font-size: 1rem;
    text-align: left;
    padding: .25rem 0;
    color: #44403B;
    text-shadow: 2px 2px 4px #fff;
    margin: 0;
    text-align: justify;
}


.unavailable-description {
    width: 35%;
    margin: 2rem auto;
    background-color: #D32F2F;
    padding: 1rem 1rem;
    box-sizing: border-box;
}

.unavailable-description p {
    font-size: 1rem;
    padding: .25rem 0;
    color: #fff;
    text-shadow: 2px 2px 4px #000;
    margin: 0;
}

.app-note {
    color: white;
    background-color:#E74C3C;
    width: 35%;
    font-size: 1rem;
    margin: 2rem auto 1rem auto;
    text-align: left;
    padding: .25rem 1rem;
    text-align: justify;
    font-weight: 600;
    text-shadow: 2px 2px 4px #000;
}

.redirect {
    color: white;
    background-color:#509E2F;
    width: 35%;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 2px 2px 4px #000;
    margin: 1rem auto 2rem auto;
    text-align: center;
    padding: .25rem 1rem;
}

.classify-container,
.app-note,
.privacy,
.redirect {
    box-sizing: border-box;
}
/* ===== TWO COLUMN LAYOUT ===== */

.two-column-flex {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.two-column-flex .column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    box-sizing: border-box;
}

.two-column-flex .column-r {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    box-sizing: border-box;
}


/* Make loaded content respect the column width */
.two-column-flex .classify-container,
.two-column-flex .redirect-embed {
    width: 100%;
    margin: 0 0 .15rem 0;
    box-sizing: border-box;
}

/* Optional: stack on small screens */
@media only screen and (max-width: 768px) {
    .two-column-flex {
        flex-direction: column;
    }

    .two-column-flex .column, .two-column-flex .column-r  {
        width: 100%;
        flex-basis: auto;
    }
.logo { width: 150px; height: auto; display: block; }

.logo-small{
  width: 73px;
  height: auto;
  display: block;
}

}

@media only screen and (max-width: 1600px) {
.idserver_wrapper {
    width: 100%;
   }