/*styles.css*/

#withdraw2Button {
font-size:8pt;
}

#timeLeftRegularAccount, #timeLeftIncomingAccount {
font-size:9pt;
}

.withdrawable-now {
align-items:center;
justify-content: center;
}

.radio-container-account {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the radio buttons horizontally */
    align-items: center; /* Aligns the radio buttons vertically */
    margin: 15px auto; /* Adds vertical spacing and centers the container */
    max-width: 85%; /* Ensures the container doesn't grow too wide */
}
/*
.radio-buttons-account,
.withdrawable-now {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px); 
    margin: 10px;
}
*/

.column-content {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center;
    justify-content: center;
    flex: 1 1 calc(45% - 20px); /* Ensures each column takes up roughly 50% of the container width minus margin */
    max-width: calc(45% - 20px); /* Ensures columns don't grow larger than 50% of the container width minus margin */
    margin: 5px; /* Adds space between columns */
    padding: 8px; /* Adds padding inside the columns */
    border-radius: 10px; /* Adds rounded corners */
    background-color: #34363A; /* Very dark blue background */
    color: white; /* Ensures the text is readable on the dark background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a slight shadow for better visibility */
    /*border: 1px solid #000080;  Adds a border of the same color as the background */
}

.radio-buttons-account,
.withdrawable-now {
    margin: 5px; /* Adds a 5px margin around each element */
}

.radio-buttons-account input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.radio-buttons-account label {
    font-size: 8pt;
    color: white; /* Label color */
    cursor: pointer;
    padding: 10px 20px;
    border: 2px solid #004F8B; /* Border color */
    border-radius: 5px; /* Rounded corners */
    background-color: #171717; /* Background color */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    display: inline-block; /* Ensures labels are inline */
    margin: 0 10px; /* Adds horizontal spacing between labels */
    text-align: center; /* Centers the text inside the label */
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

.radio-buttons-account input[type="radio"]:checked + label {
    background-color: #004F8B; /* Background color when checked */
    color: white; /* Text color when checked */
    border-color: #0073CF; /* Border color when checked */
    box-shadow: 0 0 10px rgba(0, 115, 207, 0.5); /* Shadow effect when checked */
}

.radio-buttons-account label:hover {
    border-color: #0073CF; /* Border color on hover */
    box-shadow: 0 0 5px rgba(0, 115, 207, 0.3); /* Shadow effect on hover */
}


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

#timelockRewardCalculation {
color:orange;
}

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

#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;
}

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

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

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

#regularAccountContainer, #rewardsAccountContainer {
    flex-basis: 50%; /* Each takes half of the space in the second line container */

}

#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:9pt;
}

.contract-info-style h3 { 
    font-weight: bold;
    color: #4a90e2; /* Adds a blue color */
    font-size: 12pt; /* 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;
}


.radio-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 {
font-size:1.2em;
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;
/*    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;
}
#acceptIncomingButton, #claimRewardsReserveButton {
  position:relative; 
    background-color: #F8B128;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 8pt;
   /* 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;
}

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

#acceptIncomingButton: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, #sendLocked2Button, #timelock2Button, #withdraw2Button, #withdrawAll2Button, #amount1, #amount2, #ethAddresses, #sendLockedAmounts, #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: 14pt; /* 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: 14pt; /* 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: fixed; /* 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: 900px;
    min-width: 700px;
    display: none;
 -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:11pt;
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%;
}

}