/* styles.css */

/* Global styles */
body {
    font-family: Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #eaeaea;
background-color: #f7f7f7;
opacity: 1;
background-image:  linear-gradient(#e4e5fa 2px, transparent 2px), linear-gradient(90deg, #e4e5fa 2px, transparent 2px), linear-gradient(#e4e5fa 1px, transparent 1px), linear-gradient(90deg, #e4e5fa 1px, #f7f7f7 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;


}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* styles.css */

/* Add padding to all elements */
body {
    padding: 20px;
}

/* Adjust the width of input buttons */
input[type="number"],
button {
    width: 200px; /* Adjust the width as needed */
    margin-right: 10px; /* Add margin to create space between elements */
}

/* Add margin to top-level headings */
h1, h2, h3, p {
    margin-bottom: 10px;
    text-align: center;
}

.centered {
    width: 400px; /* Adjust width as needed */
    padding: 15px;
    text-align: center;
    margin: 15px 0; /* Adjust margin as needed */
}

#wrapper {
    width: 100%;
    height: 100%; /* Set height to viewport height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}



/*#calculatorswrapper {
    width: 450px;
    height: 100%;
    /*display: flex;
    /*justify-content: center; /* Center the child divs horizontally */
    /*border-top: solid orange 6px;
    border-left: solid black 1px;
    border-right: solid black 1px;
    border-bottom: solid orange 1px;
    background-color: #dbdbdb;
opacity: 1;
background: repeating-linear-gradient( 45deg, #cfcfcf, #cfcfcf 4.5px, #dbdbdb 4.5px, #dbdbdb 22.5px );
}*/


#calculatorswrapper > div {
    margin: 10px; /* Add some margin between the child divs */
}

#college_calculator {
    border-top: solid orange 6px;
    border-left: solid black 1px;
    border-right: solid black 1px;
    border-bottom: solid orange 6px;
    width: 420px;
    padding: 15px;
    height: 800px;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
#working_calculator {
    border-top: solid orange 6px;
    border-left: solid black 1px;
    border-right: solid black 1px;
    border-bottom: solid orange 6px;
    width: 420px;
    padding: 15px;
    height: 700px;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}


#arrow {
    border: none;
    width:400px;
    padding: 15px;
    text-align: center;
    font-size: 50px;
}

#rightarrow {
    border: none;
    width:50px;
    padding: 15px;
    text-align: center;
    font-size: 50px;
    height: 700px;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}


#result_message {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 6px solid orange;
    width:400px;
    padding: 15px;
    text-align: center;
    background-color: #fff;
}

#intro_message {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 6px solid orange;
    width:420px;
    padding: 15px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* Header styles */
h1 {
    color: #007bff;
    text-align: center;
}

/* Form styles */
form {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="number"] {
    width: 200px;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    margin-right: 10px;
}

button[type="submit"] {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Result styles */
.result {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
}

/* Custom style for input fields with dollar sign */
/* Add this style to your CSS */
.dollar-sign {
    display: inline-block;
    width: 20px; /* Adjust width as needed */
    text-align: right;
    margin-right: 5px; /* Adjust margin as needed */
}

.positive {
    color: rgb(135, 25, 25);
}

.negative {
    color: green;
}

#resultsbox {
    border: solid 1px black;
}

.lightbulb-icon {
    cursor: pointer;
    color: yellow; /* Change color as needed */
    font-size: 24px; /* Adjust size as needed */
}

/* Dialog box styles */
.dialog {
    display: none;
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    width: fit-content;
}

.dialog-content {
    color: green;
}