/* colors used
#ff0 main backcolor             yellow
#800080 primary color           purple
#400040 background color        dark purple
#4dffff lighter main color      light yellow
#000 dark text -                black
#fff white
*/

html,body{
    margin:0;
    padding:0;
    color:#000;
    background-color:#ffff00;
    font-size:14px;
    font-size:1.0em;
    font-family:'Noto Sans', sans-serif;
    max-width:800px;
    margin:0 auto;
    }

hr {
    border: none;
    border-top: 1px solid #800080; 
    width: 100%; /* Width of the hr */
  }
  
  
a{
    color: #000!important;
    text-decoration: none!important;
}

a.link{
color: #000;
text-decoration: none;
}

h2 {
    margin-bottom:0;
    margin-top:0;
}

p {
    margin-top:1.2em;
}

.warningText {
    color:#e10006;
    margin:0;
}

.nospace {
    margin-bottom:0;
    margin-top:0;
}
.info-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position:relative;
    width:100%;
    max-width: 800px;
    margin:auto;
    color:#fff;
    padding:5px;
    background-color: #800080;
    margin-bottom : 5px;
    border-radius: 6px; /* Adds rounded corners */
    box-sizing: border-box;
}

.section {
    width:100%;
    display: flex; /* Flexbox for two columns */
    justify-content: space-evenly;
    border-radius: 6px; /* Optional: Add some padding */
    background-color: #400040;
    margin: 5px;
    padding:5px;
    box-sizing: border-box;
}

.dark {
    background-color: #400040;
}

.light {
    background-color: #800080;
}

.section .column{
    flex: 1; /* Makes each column take up equal space */
    margin-right: 10px; /* Optional: Adds space between columns */
}

.section .column p {
    margin: 0; /* Removes default margin for paragraphs */
    text-align: left; /* Ensures text is left-aligned */
}

.section .column .title {
    color:#c8c8c8;
}


.section .column:last-child {
    text-align: right;
}
.section .column:first-child {
    text-align: left;
}


.single-item-row{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position:relative;
    width:100%;
    color:#fff;
    margin-bottom : 5px;
}
.center {
    align-items: center;
}

.form-container {
    width: 100%; /* Adjust the width based on your needs */
    margin: 0 auto; /* Center the form horizontally */
    padding: 10px;
    box-sizing: border-box;
}


/* Styling the labels */
label {
    display: block;
    margin-bottom: 5px; /* Minimal space between label and input */
    font-size: 14px; /* Slightly smaller font size to save space */
    font-size:1.0em;
}

/* Styling the input fields to make them uniform */
input[type="tel"],
input[type="password"],
input[type="number"],
select {
    width: 100%; /* Make the input fields take up full width */
    padding: 8px;
    margin-bottom: 10px; /* Minimal space between input fields */
    box-sizing: border-box; /* Include padding in the width */
    font-size: 14px; /* Slightly smaller font size */
    font-size:1.0em;
    color: white;
    background-color: #800080;
}

/* Styling the submit button */
input[type="submit"] {
    width: 100%;
    padding: 8px;
    border: none;
    font-size: 16px;
    font-size:1.0em;
    cursor: pointer;
}

.lightButton {
    background-color: #4dffff; 
    color: #400040; 
    
}
.darkButton {
    background-color: #400040; /* Green background */
    color: #fff; /* White text */
    
}

.quicksubmit-container {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 10px;
}

.quicksubmit {
    flex: 1;
    padding: 5px;
    background-color: #4dffff;
    color: #400040;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}



a.link{
    color: #000!important;
    text-decoration: none!important;
  }
  a.link{
    color: #000;
    text-decoration: none;
  }

  .table-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position:relative;
    width:100%;
    max-width: 800px;
    margin:auto;
}
  table {
    width: 100%;
    border-collapse: collapse;
    border: 0px solid #000;
    box-sizing:border-box;
  }

  th, td {
    text-align: center;
    border:none;
    padding:0;
  }

  th:first-child {

  }

  th:last-child,
  td:last-child {
    text-align: right;

  }

  .top{
    display:flex;
    flex-direction:row;
    align-items:center;
    }
    
    .top-logo{
    flex:1;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center
    }
    
    .top-controls{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center
    }
    
    .top-controls>*{
    margin-left:4px
    }
    
    .balance{
    display:flex;
    flex-direction:row;
    border-radius:4px;
    padding:2px;
    height:24px;
    box-sizing:border-box;
    background:#400040;
    color:#fff;
    }
    
    .balance-label{
    padding:0px 2px;
    display:flex;
    align-items:center;
    color:#fff
    }
    
    .balance-label a{
        color: #fff!important;
        text-decoration: none!important;
    }

    .balance-value{
    display:flex;
    align-items:center;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    padding:0px 2px;
    font-weight:bold
    }
    
    .balance-value .currency{
    font-weight:normal
    }

.row1{
	height:27px;
}