/*styles.css*/




.contract-container {
    display: flex;
    justify-content: center; /* Center the content horizontally */
}

.contract-section {
    width: calc(70% - 20px); /* Adjust width as needed */
    margin-right: 20px; /* Adjust margin between sections */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Ensure the containers are side-by-side */
.contract-section:first-child {
    margin-right: 20px; /* Adjust margin between sections */
}

/* Clear margin for the last container */
.contract-section:last-child {
    margin-right: 0;
}






/* Table Styles */
.contract-section h4 {
text-align:center;
}

.contract-section table, .leaderboard-container table {
    width: 50%;
    max-width: 500%;
    border-collapse: collapse;
    margin:auto;
    font-size: 0.9em;
    max-width: 300px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;

}

.contract-section th, .leaderboard-container th,
.contract-section td, .leaderboard-container td {
    padding: 12px 15px;
    text-align: left;
}

.contract-section th, .leaderboard-container th {
    background-color: #0D203B;
    color: #FFFFFF;
    text-transform: uppercase;
}

.contract-section tr, .leaderboard-container tr {
    border-bottom: 1px solid #dddddd;
}

.contract-section tr:hover, .leaderboard-container tr:hover {
    background-color: #0E2240;
}


.latestTxTable tr td{
padding:2px;
text-align:center;
}
.latestTxTable tr td:nth-child(4) {
    text-align:right;
}
.latestTxTable tr td:nth-child(1) {
    text-align:left;
}


.latestTxTable tr td {
    white-space: nowrap;
}



.styled-divider {
    width: 100%;
    max-width: 800px; /* Set your preferred max-width */
    height: 1px; /* Set your preferred height */
    background-color: #404040; /* Set your preferred color */
    margin: 20px 0; /* Set your preferred margin */
    border: none;
    margin: 30px auto;
}

#advanceTierMessage, #timelockedtokens1, #withdrawaltime1, #timelockedtokens2, #withdrawaltime2, #timelockRewardCalculation {
font-size: 9pt;
text-align:center;
margin:2px;
color:#5E798C;
}

#contractDescription {
text-align:center;
font-size:12pt;
}

#errorMessage {
z-index:15;
font-size:9pt;
}
    #clearError {
        cursor: pointer;
        padding: 0 5px;
        margin-left: 10px;
        color: red;
        font-weight: bold;
	border: 1px solid red; /* Add border here */
    border-radius: 5px;
font-size:9pt;
padding:3px;
width:10px;
margin-left:50%;
background-color:#393939;
z-index:15;
    }
    #clearError:hover {
        color: darkred;
    }


.dapp-heading {
margin-bottom:0px;
}

#unclaimedTokens {
color:yellow;
 -webkit-animation: fadeIn 0.25s;
    animation: fadeIn 0.25s;
}

#regularUnlockTime, #incomingUnlockTime {
 -webkit-animation: fadeIn 0.25s;
    animation: fadeIn 0.25s;
}


#incomingTokensAccount {

}

.contract-info-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the child elements */
    gap: 5px;
    width:100%;
}

.second-line-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: 100%;
    /*flex-wrap: wrap;*/
}

.contract-info-style {
    background-color: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 10px;
    margin: 15px;
    min-width: 300px;
}

#regularAccountContainer, #incomingAccountContainer {
   flex-basis: 50%;
}

#incomingAccountContainer {
text-align:center;
}

#regularAccountContainer {

    padding: 10px; /* Space between border and content */
    border-radius: 10px; /* Rounded corners for a smoother look */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

#regularAccountContainer:hover {
}

#rewardsAccountContainer {
    width: 50%; /* Full width for the rewards account container */
    text-align: center;
border: 1px solid orange; /* Thick blue border */
    box-shadow: 0px 0px 8px rgba(255, 198, 0, 0.6); /* Subtle shadow for depth */
    padding: 10px; /* Space between border and content */
    border-radius: 10px; /* Rounded corners for a smoother look */
    transition: all 0.3s ease; /* Smooth transition for hover effects */

}
#rewardsAccountContainer:hover {
 border-color: darkorange; /* Darker blue on hover */
    box-shadow: 0px 0px 12px rgba(179, 113, 0, 0.8); /* Intensified shadow on hover */
}



.contract-info-style p{
margin:0;
font-size:12pt;
}

.contract-info-style h3 { 
    font-weight: bold;
    color: #4a90e2; /* Adds a blue color */
    font-size: 16pt; /* Increases the font size */
    text-shadow: 1px 1px 2px #000000; /* Adds a subtle shadow for depth */
    margin-bottom: 8px; /* Adds space below the heading */
    text-align: center; /* Centers the text */
    border-bottom: 1px solid #4a90e2; /* Adds a bottom border */
    padding-bottom: 5px; /* Adds padding below the text */
    margin-top:0px;
}


.checkbox-container {
    display: flex;
    align-items: center; /* This vertically centers the text with the checkbox */
}


#account-checkbox {
margin-left:36%;
 transform: translateX(-50%);
text-align:center;
}

a {
color:white;
}

#regularAccount p, #regularAccount h3, #regularAccount1 p, #regularAccount1 h3 {

text-align:center;
}

.terms-container {
    position: fixed;
    bottom: 7px;
    margin-left: 37.5%;
    transform: translateX(-50%);
    width:300px;
    z-index: 20;
}

.terms {
    font-size: 11pt;
    color: #A2A2A2;
    background-color: #1E1E1E;
    padding: 6px;
    display: none; /* Initially hidden */
    opacity: 0;
    transition: opacity 0.5s; /* Fade effect */
}

.toggle-terms {
    color: #A2A2A2;
    background-color: #1E1E1E;
    padding: 3px;
    cursor: pointer;
    font-size:9pt;
    
}


/*
.terms {
position:fixed;
font-size: 9pt;
margin-left:50%;
    transform: translateX(-50%);
bottom:0px;
color:#A2A2A2;
background-color:#1E1E1E;
padding:3px;
z-index:20;
}
*/

body {
    font-family: 'Lato', Arial, sans-serif;
    background: #171717;
    color: white;
    text-align: center;
    margin:auto;
justify-content: center;
/*    margin-top:150px;*/

}


.connectWalletTextClass {
background-color: #004F8B;
font-size: 15pt;
font-weight:bold;
margin-bottom:20px;
margin-top: 20px;
padding-top: 20px;
padding-bottom: 15px;
display: block;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

/* Tooltip container */
.tooltip {
    /* Your custom styles here */
    font-size: 13px; /* Example: change font size */
    background-color: #f8f9fa; /* Example: change background color */
    color: black; /* Example: change text color */
    border: 1px solid #ddd; /* Example: add border */
    border-radius: 4px; /* Example: round corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Example: add shadow */
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

/* Tooltip arrow */
.tooltip .arrow::before {
    border-color: #f8f9fa; /* Match the border color with the background color of the tooltip */
}

/* Tooltip inner */
.tooltip-inner {
    max-width: 200px; /* Example: limit maximum width */
    padding: 8px 15px; /* Example: adjust padding */
}

#container {
    max-width: 600px;
    margin: auto;
    padding: 10px;
}

.button {
    background-color: #004F8B; /* Light blue */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15pt;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

.button:hover {
    background-color: #0073CF;
}
#claimRewardsButton, #claimRewardsReserveButton {
  position:relative; 
    background-color: #F8B128;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 10pt;
    font-weight: bold;
    transition-duration: 0.4s;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    margin-left:50%;
    transform: translateX(-50%);

    margin-top:5px;
    margin-bottom:5px;
}

#claimRewardsButton {
background-color: #004F8B;
color:white;
}

#claimRewardsButton:hover, {
    background-color: #FDC860; /* Slightly lighter gray on hover */
    border-color: #2A79A5; /* Slightly brighter blue on hover */
   /* transform: scale(1.05); */
    color:black;
}

#claimRewardsReserveButton:hover {
    background-color: #FDC860; /* Slightly lighter gray on hover */
    border-color: #2A79A5; /* Slightly brighter blue on hover */
   /* transform: scale(1.05); */
    color:black;

}

.status {
    margin-top: 10px;
    color: green;
}

.contract-selection {
    margin-top: 20px;
}

.contract-info {
    background-color: #262626;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

.actions {
    margin-top: 20px;
}

.input-group {
    margin-top: 15px;
}

.rewards {
    display: none; /* Hidden by default, can be shown based on contract selection */
    margin-top: 20px;
}

#fieldContainer {
    margin-left:50%; /* Adjust as needed */
    margin-top:10px;
    transform: translateX(-50%);
    background-color: #262626;
    border: 1px solid #004F8B;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    text-align: left;
    color: white;
    width:700px;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;

}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

textarea {
    width: 60%;
    height: 30px;
    margin-bottom: 0px;
    font-size:6pt;
    border-radius: 5px;
    padding:5px;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}


#amount1, #amount2 {
font-size:10pt;
border-radius: 5px;
padding:7px;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

#contract1Details, #contract2Details {
/*align-items: center; */
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

#contract1Explanation, #contract2Explanation {
text-align: center;
font-size:9pt;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

/* Hide the buttons initially */
#timelock1Button, #withdraw1Button, #rewards2Button, #timelock2Button, #withdraw2Button, #amount1, #amount2, #ethAddresses, #rewardsAmounts, #contract1Explanation, #contract2Explanation {
    display: none;
    margin:auto;
    margin-top:10px;
    margin-bottom:10px;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;

}

#contractSelect {
    font-size: 15pt;
    color: white; /* Text color */
    background-color: #004F8B; /* Background color */
    border: none;
    padding: 10px;
    border-radius: 5px;
    -webkit-appearance: none; /* Removes default styling for select on Webkit browsers */
    -moz-appearance: none; /* Removes default styling for select on Mozilla browsers */
   appearance: none;
    width: 300px;
    text-align:center;
    margin-left:50%;
    transform: translateX(-50%);
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

#contractSelect option {
padding: 25px;
}
.contractSelect option {
padding: 25px;
}

#contractSelect:hover {
outline: 1px solid white;
}

.contractSelect::after {
content:"\21B4";
color:white;
z-index:2;
position: absolute;
top: 0;
right: 0;
display:block;
opacity:1;
}

.radio-buttons {
    display: flex;
/*    align-items: center;*/
    margin: 10px 0;
        justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}


.radio-buttons input[type="radio"] {
   -webkit-appearance: none;
    -moz-appearance: none;
   appearance: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 3px;
    background-clip: content-box;
    border: 2px solid #004F8B;
    background-color: #002A4A;
    border-radius: 50%;
    box-sizing: border-box;
    margin-left:20px;
    margin-right:0px;
 display:none!important;
}

.radio-buttons input[type="radio"]:checked {
    background-color: white;
	box-sizing: border-box;
display:none;
}

.radio-buttons label {
    font-size: 15pt;
    margin-left: 8px;
    color: white; /* Label color */
    cursor: pointer;
    box-sizing: border-box;
border-radius: 5px;
padding-left:10px;
padding-right:10px;
padding-top:6px;
padding-bottom:6px;
background-color:#171717;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
outline: 1px solid #003661;
}

.radio-buttons input[type="radio"]:hover {
    outline: 2px solid #0073CF; /* Thinner blue border on hover */
box-sizing: border-box;
border-radius: 5px;
display:none;
}

.radio-buttons input[type="radio"]:hover + label {
outline: 1px solid #0073CF;
box-sizing: border-box;
border-radius: 5px;
}

/* Checked Style */
.radio-buttons input[type="radio"]:checked {
    background-color: white;
    outline: 2px solid #0073CF; /* Thicker blue border when selected */
box-sizing: border-box;
display:none;
}

.radio-buttons input[type="radio"]:checked + label {
outline: 3px solid #0073CF;
box-sizing: border-box;
border-radius: 5px;
}

.contract2infoheader {
        font-weight: bold;
    color: #4a90e2; /* Adds a blue color */
    font-size: 18pt; /* Increases the font size */
    text-shadow: 1px 1px 2px #000000; /* Adds a subtle shadow for depth */
    margin-bottom: 10px; /* Adds space below the heading */
    text-align: center; /* Centers the text */
    border-bottom: 2px solid #4a90e2; /* Adds a bottom border */
    padding-bottom: 5px; /* Adds padding below the text */
    margin-top:0px;
}

.contract1infoheader {
        font-weight: bold;
    color: #4a90e2; /* Adds a blue color */
    font-size: 18pt; /* Increases the font size */
    text-shadow: 1px 1px 2px #000000; /* Adds a subtle shadow for depth */
    margin-bottom: 10px; /* Adds space below the heading */
    text-align: center; /* Centers the text */
    border-bottom: 2px solid #4a90e2; /* Adds a bottom border */
    padding-bottom: 5px; /* Adds padding below the text */
    margin-top:0px;
}


#contractInfoContainer {
    align-items: center;
    position: relative; /* Adjust as needed */
    bottom: 0px; /* Adjust as needed */
    margin-left:50%; /* Adjust as needed */
    transform: translateX(-50%);
    background-color: #262626;
    border: 1px solid #004F8B;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding-bottom: 0px;
    padding-top:5px;
    padding-left:20px;
    padding-right:20px;
    border-radius: 5px;
    text-align: left;
    color: white;
    max-width: 750px;
    min-width: 700px;
    display: none;
    margin-bottom:35px;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
       
}

#contractInfo2Container {
    align-items: center;
    position: relative; /* Adjust as needed */
    bottom: 0px; /* Adjust as needed */
    margin-left:50%; /* Adjust as needed */
    transform: translateX(-50%);
    background-color: #262626;
    border: 1px solid #004F8B;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    padding-bottom: 0px;
    padding-top:5px;
    padding-left:20px;
    padding-right:20px;
    border-radius: 5px;
    text-align: left;
    color: white;
    max-width: 750px;
    min-width: 700px;
    display: block;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;

}


#contract1InfoSection, #contract2InfoSection {
    margin-bottom: 0px;
 -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    align-items: center;
}

/* Radio Buttons Style Adjustment */
.radio-buttons input[type="radio"]:not(:checked) {
    background-color: #002A4A;
box-sizing: border-box;
display:none;
}

.radio-buttons input[type="radio"]:checked {
    background-color: white;
box-sizing: border-box;
display:none;
}

#yourTokensText {
color: #2CB723;
font-size:14pt;
font-weight:regular;
 -webkit-animation: fadeIn 0.25s;
    animation: fadeIn 0.25s;
}

#yourTokensTextRegular {
color: #2CB723;
font-size:14pt;
font-weight:regular;
margin-bottom:15px;
 -webkit-animation: fadeIn 0.25s;
    animation: fadeIn 0.25s;
}


/* Responsive Design - Phone */
@media screen and (max-width: 768px) {

#fieldContainer {
width:100%;
}

}