html{
  min-height:600px;
}
body {
  margin:0px;
  padding:70px 0px 15px 0px;
  min-height:600px;
  font-family: sans-serif;
  color:#000;
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


  background-color:#FFF;
}

#particles-js{
  width:100%;
  display:none;
}
#container{
  width:100%;
  height:100%;
  min-height:600px;
  z-index:100;
  /*overflow:hidden;*/
}
#containerpadding {
  padding: 15px 15px 0px 15px;
  height:100%;
}
#contents {
  font-size:14pt;
  width:100%;
  overflow:hidden;
  max-height: 99999999px;
}

#header h1{
  text-align:center;
  font-family:"Arial";
  font-size:42pt;
  margin:7% auto 10pt auto;
  width:600px;
  color:#00f;
}
#header h2{
  text-align:center;
  font-family:"Arial";
  font-size:16pt;
  margin:5pt;
  color:#00f;
}
#form {
  margin-top:0px;
  margin-bottom:0px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
#trade {
  margin-top:5%;
  padding-bottom:20px;
}

select, input{
  border-radius: 5px;
  padding:5px 10px 5px 10px;
  font-size:14pt;
  opacity: 0.75;
  border-color: #DDDDDD;
}

#trade select, #trade input {
  margin-bottom:2px;
}

#trade input.symbol{
  width:5%;
}

#trade input.qty{
  width:8%;
}
#trade input.recipient {
  width:14.5%;
}
input.linkShare {
  width:35%;
}
#footer {
  margin-top:18%;
  padding-top:3px;
  padding-bottom:3px;
}
#footer, #footer h2 {
  text-align:center;
  font-family:"Trebuchet MS";
  font-size:10pt;
}
#footer h2{
  margin:0px;
  font-weight:normal;
}

a {
  text-decoration:none;
  border-bottom: 1px black dotted;
  color:#00d;
}
a:hover{
  text-decoration:underline;
  border-color: transparent;
}
a:active{
  text-decoration:none;
}


#infoBar {float:left; width:400px; margin-right:-400px; font-size:12pt; text-align:left; }
#welcome { font-size:12pt;}
#orderbook { margin-top:30px; }
#orderbook table { text-align:center; margin:auto;  border-color:#FFF; border-style: double; border-width:5px; opacity:.75; min-width:35%; }
#orderbook td, th { border-width: 0px 0px 1px 0px; border-style: solid; border-color: #333; padding: 3px; font-size:12pt;  text-align:right; color:#000; background-color:#FFF; }

#navigation {
  min-height: 24px;
}

#navigation, #subnavigation { text-align:right; font-size:12pt;}


#subnavigation, #tutorials{
  margin-top:25px;
}
#tutorials{
  float:left;
  text-align:left;
  font-size:12pt;
  padding-top:2px;
  padding-left:5px;
}
#tutorials ul{
  margin:0px;
}
#loggedInTutorials{
  display:none;
}

#subnavigation { margin-left:-330px; width:330px; float:right;}
#subnavigation table{padding:0px; border-spacing:0px; border-collapse: collapse; width:100%;}
#navigation input { padding:1px 2px 1px 2px; font-size:12pt;}
#subnavigation, #subnavigation td{
  padding-top:2px;
  padding-bottom:0px;
  padding-right:5px;
  padding-left: 5px;
  text-align:right;
  vertical-align:top;
}
#account{ width: 250px; text-align:right; background-color:#EEE; cursor:pointer;}
#balance, #orders { text-align:right; min-width:240px; max-height:240px; overflow:auto;}
#balance a, #orders span{ white-space:nowrap; }
.issuerLabels { font-size:10pt; }

#errors { width:80%; margin:auto; padding-top:5px; padding-bottom:5px; font-size:12pt; font-weight:bold; color:#ddd;}
#setDisplayNameError { font-weight:bold; text-align:center;}
.ui-autocomplete {
  max-height: 100px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
}

#about{
  margin-top:100px;
  color:#00f;
  min-height:100%;
  max-height: 999999px;
  width:100%;
  z-index:9999;
  opacity:.9;
}
#about a{
  color:#00f;
  font-weight:bold;
  border-width:0px 0px 1px 0px;
  border-style: dotted;
  border-color:#00f;
}
#about a:hover {
  border-width:0px 0px 2px 0px;
  border-style:solid;
  text-decoration:none;
}
#about p, #about ul{
  text-align:left;
  width:70%;
  font-size:16pt;
  margin:10px auto 10px auto;
}
#about li{
  margin:10px 0px 10px 5%;
}
#about h3 {
  text-align:center;
  font-size:30pt;
  margin:auto;
  color:#fff;
}
#about h4 {
  font-weight:normal;
  text-align:center;
  margin:10px 0px 20px 0px;
  font-size:14pt;
  color:#fff;
}
#about h5 {
  text-align:center;
  width:80%;
  margin:auto;
  padding-top:30px;
  padding-bottom:10px;
  font-size:16pt;
  color:#fff;
}

#loginBackground {
  position:absolute;
  top:0%;
  left:0%;
  right:0%;
  bottom:0%;
  width:100%;  /* adjust as per your needs */
  height:100%;   /* adjust as per your needs */
  background-color:#AAA;
  opacity:.5;
  padding:0px;
  z-index:10000;
  display:none;
  max-height: 999999px;
  min-height:600px;
}

.popup{
  margin:auto;
  position:absolute;
  top:45%;
  left:50%;
  width:600px;  /* adjust as per your needs */
  height:500px;   /* adjust as per your needs */
  margin-left:-330px;   /* negative half of width above */
  margin-top:-240px;   /* negative half of height above */
  background-color:#EFEFEF;
  border-width:2px;
  border-style:double;
  border-color:#000;
  opacity:.95;
  text-align:center;
  z-index:10001;
  display:none;
  padding:30px;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  min-height: 1px;
  max-height: 999999px;
}

.popup h3{
  margin:0px 0px 15px 0px;
  padding:5px 0px 5px 0px;
  text-align:left;
}

.popup table{
  width:100%;
  margin-bottom:15px;
}

.popup td{
  vertical-align:middle;
}
.popup td.right{
  width:70%;
}

.popup table input, .popup table select{
  width:90%;
}


.popup div{
  margin-bottom:5px;
}

.info {
  text-align:left;
  margin-top:20px;
  margin-bottom:20px;
  height: 340px;
  overflow:auto;
  padding:0px 10px 0px 10px;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  min-height: 1px;
  max-height: 999999px;
}

.settings{
  height:102px;
  overflow:auto;
  width:100%;
}

.trustlineFields{
  max-height: 180px;
  overflow:auto;
  width:100%;
}

.advancedSettings{
  max-height: 225px;
  overflow:auto;
  width:100%;
}

.disclaimer {
  text-align:left;
  margin-top:20px;
  margin-bottom:20px;
  overflow:auto;
  height:145px;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  min-height: 1px;
  max-height: 999999px;
}

#settingsInfo {
  height: 90px;
}

#destinationTagInfo {
  height: 190px;
}

#issuerInfo{
  height: 220px;
}

#disclaimerAgreement {
  font-size:10pt;
  text-align:right;
  vertical-align:middle;
  border-width:2px;
  border-style:solid;
  border-color:transparent;
}
#disclaimerAgreement input {
  height:10px;
  width:10px;
}
#trustlinesTable{
  width:98%;
  margin:auto;
}
#trustlinesTable input{
  width:80%;
}
.trustSymbol{
  width:10%;
}
.trustIssuer{
  width:50%;
}
.trustLimit{
  width:25%;
}
.trustDelete{
  width:8%;
  text-align:right;
}

#scrollingText
{
  width: 800px;
  height: 36px;
  position: relative;
  margin-top:20px;
  margin-bottom:-25px;
  margin-left:auto;
  margin-right:auto;
  padding: 2px 0px;
  overflow:hidden;
}

#scrollingText a
{
  border:0px;
}

#scrollingText  div.scrollableArea p
{
  display: block;
  float: left;
  margin: 0;
  padding-right: 12px;
  padding-top: 1px;
  font-size: 13pt;
  line-height: 22pt;
  font-weight: normal;
  white-space: nowrap;
  overflow:hidden;
}


#chatbox{
  position:absolute;
  bottom:0px;
  right:15px;
  width:250px;
  height:340px;
  overflow:hidden;
  background-color:#EEE;
  border-width:1px;
  border-style:double;
  border-color:#FFF;
  opacity:0.9;
  padding:5px;
  font-size:10pt;
  min-width:250px;
  min-height:340px;
  z-index:9999;
  cursor:move;
  max-height:99999px;
}
#chatHeader {
  font-size:8pt;
  font-weight:bold;
  border-width:1px;
  border-style:double;
  border-color:#EEE;
  padding:0px 10px 2px 10px;
  max-height:99999px;
  text-align:left;
}
#chatSettings {
  text-align:left;
}
#chatHeader a {
  border-width:0px 0px 1px 0px;
  border-style:dashed;
  border-color:#333;
  text-decoration:none;
  cursor:pointer;
}
#chatHeader a:hover {
  border-width:0px 0px 1px 0px;
  border-style:dashed;
  border-color:#EEE;
  text-decoration:none;
}
#chatHistory {
  height:84%;
  text-align:left;
  padding:10px;
  margin-bottom:10px;
  border-width:1px;
  border-style:double;
  border-color:#EEE;
  background-color:#FFF;
  z-index:9999;
  cursor:auto;
}
#chatHistoryAnnouncement {
  z-index:9999;
  overflow:auto;
}
#chatHistoryContents {
  text-align:left;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
  z-index:9999;
}
#chatControls {
  text-align:center;
}
#chatControls input {
  font-size:10pt;
  line-height:normal;
  padding:1px;
  cursor:auto;
}
#chatMessage{
  width:180px;
}
#sendChat {
  width:50px;
}

#controlMiscMenu {
  display:none;
}

#profilebox{
  position:absolute;
  bottom:0px;
  left:15px;
  width:250px;
  height:340px;
  overflow:hidden;
  background-color:#EEE;
  border-width:1px;
  border-style:double;
  border-color:#FFF;
  opacity:0.9;
  padding:5px;
  font-size:10pt;
  min-width:250px;
  min-height:340px;
  z-index:9999;
  cursor:move;
  max-height:99999px;
}

#profileboxInner {
  height:70%;
  text-align:left;
  padding:10px;
  border-width:1px;
  border-style:double;
  border-color:#EEE;
  background-color:#FFF;
  z-index:9999;
  cursor:auto;
  max-height:99999px;
}

#profileboxFooter {
  text-align:right;
  font-size:8pt;
}

#profileboxAnnouncement {
  text-align:left;
  z-index:9999;
  overflow:hidden;
  font-size:8pt;
  font-weight:bold;
  border-width:1px;
  border-style:double;
  border-color:#EEE;
  padding:0px 10px 2px 10px;
  max-height:99999px;
  text-align:left;
}

#profileboxAnnouncement a {
  border-width:0px 0px 1px 0px;
  border-style:dashed;
  border-color:#333;
  text-decoration:none;
  cursor:pointer;
}
#profileboxAnnouncement a:hover {
  border-width:0px 0px 1px 0px;
  border-style:dashed;
  border-color:#EEE;
  text-decoration:none;
}

#profileboxContents {
  text-align:left;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
  z-index:9999;
  padding-left:5px;
  padding-right:5px;
  max-height:99999px;
}

body {
    max-height: 999999px;
    padding:0px;
  }

  #particles-js{
    display:none;
  }
  #container {
    position:static;
    overflow:hidden;
  }

  #containerpadding {
    padding: 0px 0px 0px 0px;
    height:100%;
  }

  form{
    width:100%;
    overflow:hidden;
  }
  #header h1 {
    clear:right;
    font-size:54pt;
    width:80%;
    margin:10% auto 15px auto;
  }
  #header h2 {
    font-size:24pt;
  }

  a {
    text-decoration:underline;
    border-bottom: 0px;
  }
  a:hover{
    text-decoration:none;
  }

  #scrollingText {
    height:50px;
  }

  #scrollingText  div.scrollableArea p {
    font-size:19pt;
    line-height: 37pt;
  }
  #scrollingText  a {
    text-decoration:none;
  }
  #trade{
    font-size: 24pt;
    margin-top:3%;
    padding-bottom:10px;
  }
  input, select{
    border-radius: 10px;
    font-size: 20pt;
  }
  #trade input.symbol{
    width:10%;
  }

  #trade input.qty{
    width:12%;
  }
  #trade input.recipient {
    width:25%;
  }

  .issuerLabels { font-size:14pt; }
  #destTagDisplay { display:none; }
  #orderbook {  padding-top: 0px; }
  #orderbook td, #orderbook th { font-size:18pt;}
  #infoBar{ font-size:24pt; float:none; padding-top:5px; padding-bottom:25px; text-align:center; font-weight:bold; }
  #welcome { font-size:24pt; text-align:center;}
  #navigation, #navigation input, #subnavigation { font-size:24pt; float:none; }
  #navigation, #subnavigation, #infoBar{ width:100%; }
  #navigation, #subnavigation{ margin:auto; text-align:center; padding:0px; }
  #subnavigation table  { width: 99%; margin:auto; text-align:center; }

  #tutorials{
    display:none;
  }

  #miscMenu {
    display:none;
  }
  #miscMenu, #miscMenu div {
    text-align:center;
  }

  #controlMiscMenu {
    display:block;
    text-align:center;
  }

  #chatbox{
    bottom:0px;
    left:0px;
    z-index:9999;
    width:98%;
    height:700px;
    opacity:0.95;
    border-width:0px;
  }

  #chatHeader {
    font-size:20pt;
  }

  #chatHistory {
    height:84%;
    font-size:30pt;
    max-height:99999999999px;
    min-height:1px;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    z-index:9999;
  }
  #chatControls {
    height:70px;
  }
  #chatControls input {
    font-size:30pt;
    line-height:normal;
    padding:1px;
  }
  #chatMessage{
    width:70%;
  }
  #sendChat {
    width:15%;
  }

  #profilebox {
    bottom:0px;
    left:0px;
    z-index:9999;
    width:98%;
    height:200px;
    opacity:0.95;
    border-width:0px;
    font-size:30pt;
  }

  #profileboxHeader {
    font-size:20pt;
  }

  #profileboxContents {
    font-size:30pt;
    max-height:99999999999px;
    min-height:1px;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    z-index:9999;
  }
  #profileboxAnnouncement {
    font-size:20pt;
    max-height:99999999999px;
    min-height:1px;
  }
  #profileboxFooter {
    font-size:20pt;
    max-height:99999999999px;
    min-height:1px;
  }


  #account { width:50%; }
  #balance, #orders { width: 100%; text-align:left; padding:0px; margin:0px; max-height:100px;}
  #footer, #footer h2 {
    font-size:14pt;
  }

  #errors {  font-size:16pt; }

  .popup{
    width:800px;
    height:900px;
    margin-left:-430px;
    margin-top:-430px;
    font-size:20pt;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    min-height: 1px;
    max-height: 999999px;
  }
  .popup input, .popup select {
    font-size:20pt;
    max-height: 999999px;
  }

  .info {
    height: 600px;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    min-height: 1px;
    max-height: 999999px;
  }


  #issuerInfo{
    height: 420px;
  }

  .issuerSettings{
    height: 150px;
  }


  .popup td.right{
    width:65%;
  }

  .disclaimer {
    height:350px;
    font-size:16pt;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    min-height: 1px;
    max-height: 999999px;
  }

  #destinationTagInfo {
    height: 500px;
  }

  #disclaimerAgreement {
    font-size:20pt;
  }
  #disclaimerAgreement input {
    height:20px;
    width:20px;
  }

  #about p, #about ul{
    font-size:20pt;
  }
  #about h3 {
    font-size:34pt;
  }
  #about h4 {
    font-size:16pt;
  }
  #about h5 {
    font-size:20pt;
  }

  input.linkShare {
    width:70%;
  }

  .trustlineFields{
    max-height: 400px;
  }
  .advancedSettings{
    max-height: 300px;
  }

}

/* Final responsiveness and visual polish */

#header h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  word-break: break-word;
  color: #004080;
  text-align: center;
}

#header h2 {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  color: #004080;
  text-align: center;
}

a, #about a {
  color: #004080;
  font-weight: 500;
  text-decoration: underline;
  border-bottom: none;
}

a:hover, #about a:hover {
  text-decoration: none;
}

#trade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: clamp(1rem, 3vw, 1.25rem);
  margin-top: 5%;
  padding-bottom: 20px;
}

#trade input,
#trade select {
  flex: 1 1 120px;
  min-width: 100px;
  font-size: 1rem;
  padding: 10px;
}

input.linkShare {
  width: 90%;
  font-size: 1rem;
}

#welcome {
  font-size: clamp(1rem, 3.5vw, 1.5rem);
  text-align: center;
}

#footer, #footer h2 {
  font-size: clamp(0.8rem, 3vw, 1.2rem);
}