/* General Styles for Number Range Container */
.arng-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 40px auto;
padding: 20px;
background: #f9f9f9;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
/* Error Message Styling */
#arng-error-message {
color: red;
margin-bottom: 20px;
padding: 5px;
border: 1px solid #ffbaba;
background-color: #ffefef;
border-radius: 4px;
display: none;
}
/* Class for elements that toggle visibility, initially hidden */
.arng-toggle-hidden {
display: none;
}
/* Styling for each card section */
.arng-card {
background-color: #ffffff;
padding: 20px;
border: 1px solid #d3d3d3;
border-radius: 6px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}
/* Field Group Layout */
.arng-field-group {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.arng-field-group:last-child {
margin-bottom: 5px;
}
/* Input Group Styling */
.arng-input-group {
flex: 1;
margin-right: 20px;
}
.arng-input-group:last-child {
margin-right: 0;
}
/* Label Styling */
.arng-input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
/* Styles for Various Input Types */
.arng-input-group input[type="number"],
.arng-input-group input[type="text"],
.arng-input-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
box-sizing: border-box;
}
.arng-input-group input[type="number"]:focus,
.arng-input-group input[type="text"]:focus,
.arng-input-group select:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Slider Container Styling */
.arng-slider-container {
flex: 1;
}
.arng-slider-container label {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.arng-slider-container input[type="range"] {
width: 100%;
}
/* Helper Text Styling */
.arng-helper-text {
font-size: 0.8em;
color: #666;
display: block;
margin-top: 5px;
}
/* Button Group Styling */
.arng-buttons {
text-align: center;
}
/* Button Styling */
.arng-buttons button {
padding: 12px 25px;
margin-right: 15px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
font-size: 17px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.arng-buttons button:last-child {
margin-right: 0;
background-color: #6c757d;
}
.arng-buttons button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
/* Result Display Styling */
.arng-result {
background-color: #ffffff;
padding: 20px;
border: 1px solid #d3d3d3;
border-radius: 6px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
margin-top: 30px;
}
/* Result Header Styling */
.arng-result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
#arng-result-label {
margin: 0;
font-size: 1.3em;
}
/* Copy Button Styling */
#arng-button-copy {
padding: 6px 12px;
border: 1px solid #dcdcdc;
border-radius: 4px;
background-color: #f8f8f8;
color: #333333;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#arng-button-copy:hover {
background-color: #e8e8e8;
}
/* Random Numbers List Styling */
.arng-random-numbers-list {
max-height: 200px;
overflow: auto;
padding: 10px;
text-align: center;
border: 1px solid #eee;
font-size: 28px;
font-weight: bold;
background-color: #f9f9f9;
border-radius: 4px;
}
.arng-random-numbers-list span {
display: inline-block;
margin: 5px;
padding: 5px 10px;
background-color: #f9f9f9;
border-radius: 4px;
}
/* Class for visually hiding elements while keeping them accessible to screen readers */
.arng-always-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
/* Responsive Design for Small Screens */
@media (max-width: 768px) {
.arng-container {
padding: 0px;
border: none;
}
.arng-field-group {
flex-direction: column;
}
.arng-input-group {
margin-right: 0;
margin-bottom: 10px;
}
.arng-input-group:last-child {
margin-bottom: 0;
}
}