/* General */
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background-color: #FFF;
font-family: arial, helvetica, sans-serif;
color: rgba(0, 0, 0, 0.87);
font-size: 18px;
line-height: 26px;
margin: 10px;
}
#main {
position: relative;
margin: auto;
width: 90%;
margin-bottom: 10px;
}
#header {
display: flex;
justify-content: space-between;
width: 95%;
margin: auto;
padding: 10px 0px;
}
#hero {
margin: 20px auto 10px auto;
width: 100%;
}
#header-demo {
justify-content: space-between; /* Separates h1 and buttons */
align-items: center; /* Align items vertically in center */
max-width: 85%;
margin: auto;
padding: 0px;
text-align: center;
}
#header img {
vertical-align: middle;
}
#header-demo img {
vertical-align: middle;
}
#topic-nav {
height: 100%;
padding: 0px;
font-size: 14px;
max-width: 20%;
}
#filter-box {
border-radius: 5px;
padding: 0px;
font-size: 15px;
max-width: 20%;
}
#form-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Will wrap children to the next line when not enough space */
}
#topic-nav, #posts-container, #filter-box, #welcome-back, #profile {
flex: 1;
margin: 0px;
box-sizing: border-box;
}
#posts-container {
padding: 0px 10px;
box-sizing: border-box;
margin: 0px 6px;
}
#welcome-back {
/* background-color: #d9edf7; slightly darker light blue color */
padding: 0px 10px;
border-radius: 4px;
margin: 0px 10px;
/* box-shadow: 0 1px 3px rgba(0,0,0,.15); /* adding a little shadow */
/* border: 1px solid #A7CFE3; slightly darker light blue border */
box-sizing: border-box;
}
.demo-container {
display: flex; /* Enable Flexbox */
flex-direction: row; /* Ensure horizontal layout */
flex-wrap: wrap; /* Allow wrapping for responsiveness */
gap: 16px; /* Space between elements */
margin: 0 auto;
max-width: 85%;
}
.demo-sidebar {
flex: 1; /* Takes 1 part of the flex space */
min-width: 150px; /* Ensure it doesn't shrink too much */
}
.form-holder-demo {
flex: 3; /* Takes 4 parts of the flex space */
min-width: 300px; /* Ensures it has a minimum width */
padding: 20px 40px;
min-height: 350px;
background-color: rgb(241 245 249);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0,0,0,.1);
border-radius: 4px;
}
.form-holder-demo:hover {
border: 1px solid #007bff;
}
.filter-section {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px 0px;
}
@media (max-width: 600px) {
.demo-container {
flex-direction: column; /* Stacks items vertically on smaller screens */
}
.demo-sidebar, .form-holder-demo {
width: 100%; /* Full width for each div when stacked */
}
}
.rule-name {
font-size: 22px;
}
.left-div {
display: flex;
flex: 1;
justify-content: left; /* Horizontally center its children */
align-items: center; /* Vertically center its children */
}
.right-div {
display: flex;
flex: 1;
justify-content: right; /* Horizontally center its children */
align-items: center; /* Vertically center its children */
}
.center-div {
display: flex;
justify-content: center;
align-items: center;
flex: 1; /* Adjust this if you want it to be different from the other two divs */
}
/* On smaller screens, stack the divs */
@media (max-width: 768px) {
#posts-container {
margin: 0px;
}
#demo {
width: 100%;
}
#header {
flex-direction: column;
padding: 5px 0px 5px 0px;
}
.left-div, .center-div, .right-div {
width: 100%;
}
.right-div {
justify-content: center; /* Horizontally center its children */
}
[data-flex-container] {
flex-direction: column;
}
}
h1 {
font-size: 24px;
line-height: 1.6em;
margin: 0; /* To remove any default margin */
}
h1 a {
text-decoration: none;
color: #000000;
}
h1 a:link {
text-decoration:none;
}
h1 a:visited {
text-decoration:none;
color: #000000;
}
h2 {
font-size: 22px;
}
h2 a {
color: #333;
text-decoration:none;
}
h2 a:hover {
color: #000;
text-decoration:underline;
}
h3 {
color: #004085;
font-size: 22px;
line-height: 30px;
margin-top: 0px;
margin-bottom: 12px;
}
#promo {
margin: 0;
background-color: rgb(132, 109, 255);
color: white;
text-align: center;
padding: 20px 50px;
border-radius: 4px;
margin: 0px 5px 8px 5px;
}
#promo a {
color: white;
}
#login {
margin: auto;
max-width: 400px;
}
#signup {
margin: auto;
max-width: 400px;
}
#login h3, #signup h3 {
margin-top: 0.7em;
font-size: 20px;
}
h3 a:link {
color: #333;
}
h3 a:visited {
color: #333;
}
h3 a:hover {
color: #666;
}
a {
color: #000;
}
a:hover {
color: #666;
}
#toggleDarkMode {
background: none;
border: none;
cursor: pointer;
font-size: 20px;
padding: 4px 6px;
margin-left: 8px;
color: #333;
}
#toggleDarkMode:hover {
background-color: rgba(0, 0, 0, 0.05);
}
#toggleDarkMode i {
pointer-events: none; /* allow click through to button */
}
[data-theme="dark"] #toggleDarkMode {
color: #e0e0e0;
}
.tagline {
display: inline-block;
font-size: 20px;
line-height: 1.2em;
font-weight: normal;
max-width: 680px;
}
.auth-buttons {
display: flex;
font-size: 16px;
align-items: center;
gap: 8px; /* added horizontal spacing between buttons */
}
.auth-buttons a {
text-decoration: none;
transition: color 0.3s, text-decoration 0.3s;
}
.auth-buttons a:hover {
text-decoration: none;
color: #007bff;
}
.gsi-material-button {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-appearance: none;
background-color: #f2f2f2;
background-image: none;
border: none;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #1f1f1f;
cursor: pointer;
font-family: 'Roboto', arial, sans-serif;
font-size: 18px;
height: 40px;
letter-spacing: 0.25px;
outline: none;
overflow: hidden;
padding: 0 12px;
position: relative;
text-align: center;
-webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
transition: background-color .218s, border-color .218s, box-shadow .218s;
vertical-align: middle;
white-space: nowrap;
width: auto;
max-width: 400px;
min-width: min-content;
}
.gsi-material-button .gsi-material-button-icon {
height: 20px;
margin-right: 12px;
min-width: 20px;
width: 20px;
}
.gsi-material-button .gsi-material-button-content-wrapper {
-webkit-align-items: center;
align-items: center;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
justify-content: center;
position: relative;
width: 100%;
}
.gsi-material-button .gsi-material-button-contents {
-webkit-flex-grow: 0;
flex-grow: 0;
font-family: 'Roboto', arial, sans-serif;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
.gsi-material-button .gsi-material-button-state {
-webkit-transition: opacity .218s;
transition: opacity .218s;
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.gsi-material-button:disabled {
cursor: default;
background-color: #ffffff61;
}
.gsi-material-button:disabled .gsi-material-button-state {
background-color: #1f1f1f1f;
}
.gsi-material-button:disabled .gsi-material-button-contents {
opacity: 38%;
}
.gsi-material-button:disabled .gsi-material-button-icon {
opacity: 38%;
}
.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
background-color: #001d35;
opacity: 12%;
}
.gsi-material-button:not(:disabled):hover {
}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
background-color: #001d35;
opacity: 8%;
}
.divider-container {
display: flex;
align-items: center;
text-align: center;
margin: 10px 0; /* Adjust margin as needed */
padding: 0px 60px;
}
.line {
flex: 1;
height: 1px;
background-color: #D3D3D3; /* Line color */
}
.or-text {
margin: 0 10px;
color: #666666; /* Text color */
font-style: italic;
font-size: 14px;
}
.static-panel-container {
display: flex;
flex-wrap: wrap;
}
.static-panel-left,
.static-panel-right {
flex: 1 1 50%; /* Grow and shrink equally, base width 50% */
box-sizing: border-box; /* Include padding and borders in the width */
}
/* Forms */
input {
font-family: inherit;
font-size: inherit;
padding: 8px 12px;
border-radius: 3px;
border: 1px solid #ccc;
transition: border-color 0.3s;
}
input:focus {
outline: none;
border-color: #007bff;
}
.field {
margin-top: 15px;
margin-bottom: 15px;
}
textarea {
resize: vertical;
font-family: inherit;
font-size: inherit;
}
textarea:focus {
outline: none !important;
border-color: #007bff;
}
.essay-textarea {
min-height: 500px;
}
.form-group em {
font-size: 0.85em;
color: #777;
margin-left: 5px;
}
.required-asterisk {
color: red;
/* Any other styling you want */
}
#start-voice-input.active {
background-color: #4CAF50; /* Green background for active state */
color: white;
}
#start-voice-input.inactive {
background-color: #f44336; /* Red background for inactive state */
color: white;
}
.voice-control {
cursor: pointer;
padding: 0px 5px;
text-decoration: none;
}
.voice-control.active {
color: #4CAF50;
}
/* Feedback Form */
#feedback-button {
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
outline: none; /* Remove outline */
background-color: #fff;
color: #333; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 0px 10px; /* Some padding */
border: 1px solid #999;
border-radius: 5px; /* Rounded corners */
font-size: 14px; /* Increase font size */
height: 30px;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.3s ease;
}
#feedback-button:hover {
color: #000; /* darker text when hovered */
border-color: #333; /* darker border when hovered */
box-shadow: 0 2px 6px rgba(0,0,0,.1); /* darker shadow when hovered */
}
#topBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
#feedback-form {
margin: 0 auto;
}
.feedback-form p {
font-size: 18px;
margin-bottom: 20px;
color: #555;
}
.form-group {
margin-bottom: 12px;
}
.form-label {
font-weight: bold;
display: block;
margin-bottom: 6px;
color: #666;
font-size: 14px;
}
.form-control {
width: 94%; /* takes up the full width of its parent container */
height: 30px;
padding: 10px;
border: 2px solid #EEE;
border-radius: 4px;
line-height: 1.5;
color: #333;
background-color: rgb(241 245 249);
transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
resize: none; /* allows vertical resizing, but prevents horizontal resizing */
}
.select-field {
width: 40%;
height: 40px;
}
select {
min-height: 50px;
min-width: 50%;
}
.form-control-text-area {
min-height: 140px; /* minimum height of the textarea */
width: 100%;
box-sizing: border-box;
}
.form-control:focus {
outline: none; /* Optional: removes the default focus outline */
border: 2px solid #007bff; /* blue border when focused */
}
.form-control::placeholder {
color: #888; /* Replace with your desired placeholder text color */
opacity: 1; /* Optional: Adjust the opacity as needed */
}
.form-control-email-input {
width: 100%;
min-height: 40px; /* minimum height of the textarea */
box-sizing: border-box;
}
.devise-links {
font-size: 14px;
text-align: center;
padding-top: 14px;
}
.upgrade-link {
color: #007bff;
font-size: 18px;
padding-right: 10px;
}
.upgrade-link:hover {
color: #004085;
}
/* Button Styles */
.btn-submit {
padding: 10px 20px;
/* background-color: #007BFF; */
background-color: #000;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
}
.btn-submit:hover {
background-color: #0056b3;
}
.btn-submit-alt-free {
padding: 4px 6px;
background-color: #000;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
width: 100%;
border: none;
font-style: normal;
display: inline-block;
text-decoration: none;
box-sizing: border-box;
font-weight: 400;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.btn-submit-alt-free:hover {
background-color: #008CBA;
text-decoration: none;
color: #fff;
transition: background-color 0.3s;
}
.btn-submit-alt {
padding: 10px 20px;
/* background-color: #007BFF; */
background-color: #008CBA;
/* background-color: #2196F3; */
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
}
.btn-submit-alt:hover {
background-color: #000; /* A darker shade of green */
color: #fff; /* Keeping text white */
}
.btn-premium {
width: 100%;
color: #fff;
background-color: #008CBA;
border: none;
padding: 4px 6px;
border-radius: 5px;
cursor: pointer;
font-style: normal; /* Setting font-style to 'normal' as 'none' is not a valid value */
display: inline-block;
font-weight: 400;
text-align: center;
font-size: 15px;
line-height: 25px;
transition: background-color 0.2s, color 0.2s; /* Adding color to the transition to smoothly change text color if needed */
box-sizing: border-box;
text-decoration: none;
}
.btn-premium:hover {
background-color: #000;
color: #fff;
}
.btn-premium-extend {
width: 100%;
color: #fff;
background-color: #28a745;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
font-style: normal; /* Setting font-style to 'normal' as 'none' is not a valid value */
display: inline-block;
font-weight: 400;
text-align: center;
font-size: 1rem;
line-height: 1.3;
transition: background-color 0.3s, color 0.3s; /* Adding color to the transition to smoothly change text color if needed */
}
.btn-premium-extend:hover {
background-color: #208537; /* A darker shade of green */
color: #fff; /* Keeping text white */
}
/* Disabled Button Styles */
.btn-premium-disabled {
width: 100%;
background-color: #b3d9c0; /* A muted green color */
cursor: not-allowed; /* Indicates that the button is not interactive */
color: #fff; /* A muted text color */
}
/* Prevent hover effect on disabled button */
.btn-premium-disabled:hover {
background-color: #b3d9c0;
color: #e0e0e0;
}
/* #new-navigation {
max-width: 850px;
margin: auto;
padding-bottom: 30px;
text-align: center;
} */
#navigation {
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
/* text-align: center;
max-width: 840px; */
width: 85%;
}
#navigation-demo {
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
text-align: center; /* Add this line */
/* max-width: 840px; change back to 870px */
max-width: 85%;
}
#welcome-signup {
margin: auto;
border-radius: 8px;
background-color: rgb(241 245 249);
padding: 30px 50px;
}
#exampleEmailInput {
background-color: #FFF;
border-width: 2px;
border-radius: 8px;
margin: 16px 0px;
max-width: 420px;
}
#topics-navigation-demo {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#footer {
margin-top: 30px;
}
#footer a {
text-decoration: none;
transition: color 0.3s, text-decoration 0.3s;
}
#footer a:hover {
text-decoration: underline;
color: #007bff;
}
.bullet {
color: #000; /* You can change this color to whatever you prefer */
margin: 0 2px; /* Add spacing around the bullet */
}
#new-footer {
color: #202124;
margin: auto;
font-size: 14px;
text-align: center;
margin: 20px 0px;
}
.welcome-free {
background-color: #FFF;
padding: 30px 40px;
border-radius: 4px;
margin: 0px 5px 8px 5px;
border: 1px solid #CCC;
border-top: 3px solid #004085;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.welcome-premium {
padding: 30px 40px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #CCC;
border-top: 3px solid green;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.lesson-container {
background-color: #FFF;
padding: 30px 50px;
border-radius: 4px;
margin: 0px auto;
border: 1px solid #CCC;
border-top: 3px solid #004085;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
width: 100%;
box-sizing: border-box;
}
#profile {
padding: 30px 40px;
background-color: #fff;
border: 1px solid #CCC;
border-radius: 4px;
border-top: 3px solid #666;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.welcome-home {
box-shadow: 0 1px 3px rgba(0,0,0,.1);
padding: 30px 40px;
border-radius: 4px;
border: 1px solid #CCC;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
margin: 8px 0px;
}
.special-message {
background-color: navy; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%);
border: 0px solid #CCC;
color: #FEFEFE;
}
.profile-message {
background-color: #fff;
display: inline-block;
padding: 0px 10px;
color: #333;
border-radius: 5px;
margin: 3px;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border: 1px solid #999;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.3s ease;
}
.profile-message:hover {
color: #000; /* darker text when hovered */
border-color: #333; /* darker border when hovered */
box-shadow: 0 2px 6px rgba(0,0,0,.1); /* darker shadow when hovered */
}
.profile-message a {
color: inherit; /* takes the same color as the parent, which is #a80000 */
text-decoration: none; /* removes the underline */
transition: all 0.3s ease; /* smooth transition for hover effect */
}
.alert {
max-width: 800px;
background-color: #e6f9e6;
padding: 4px;
border-radius: 4px;
margin: auto;
margin-bottom: 10px;
color: #006400; /* dark green color */
box-shadow: 0 1px 3px rgba(0,0,0,.1); /* adding a little shadow */
border: 1px solid #4caf50; /* green color */
}
.flash-message {
text-align: center;
background-color: #333;
padding: 8px 24px;
color: #fff;
border-radius: 4px;
margin: auto;
margin-bottom: 10px;
position: fixed;
bottom: 2%;
left: 2%;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border: 1px solid #333;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
z-index: 999;
}
@media (max-width: 768px) {
.flash-message {
width: 85%;
position: fixed;
top: 90%;
left: 0;
right: 0;
margin-left: auto; /* Automatically calculates the left margin */
margin-right: auto; /* Automatically calculates the right margin */
}
.form-control-text-area {
min-height: 140px; /* minimum height of the textarea */
width: 100%;
box-sizing: border-box;
}
}
#get-started-list li {
margin: 12px 0px;
}
#bar_jx_select {
background-color: #fff;
border: 1px solid #ccc;
padding: 0px 4px;
border-radius: 5px;
font-size: 16px;
color: #333;
}
#bar_jx_select:hover {
border-color: blue;
cursor: pointer;
}
.correct-message {
background-color: #e6f9e6;
display: inline-block;
padding: 6px 10px;
color: #006400;
border-radius: 5px;
margin: 0px 5px;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border: 1px solid #4caf50;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.3s ease;
}
.correct-message:hover {
background-color: #c8e6c9; /* darker green when hovered */
color: #004d00; /* darker text when hovered */
border-color: #388e3c; /* darker border when hovered */
box-shadow: 0 2px 6px rgba(0,0,0,.1); /* darker shadow when hovered */
}
.correct-message a {
color: inherit; /* takes the same color as the parent, which is #a80000 */
text-decoration: none; /* removes the underline */
transition: all 0.3s ease; /* smooth transition for hover effect */
}
.correct-message-sidebar {
background-color: #e6f9e6;
display: inline-block;
padding: 0px 10px;
color: #006400;
border-radius: 5px;
margin: 0px 5px;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border: 1px solid #4caf50;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.3s ease;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis; /* Add ellipsis for overflowed text */
white-space: nowrap; /* Prevent text wrapping */
word-wrap: break-word; /* Break long words */
}
.saved-message {
background-color: #007bff;
display: inline-block;
padding: 0px 10px;
color: #FFF;
border-radius: 5px;
margin: 0px 5px;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border: 1px solid #007bff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.3s ease;
}
.saved-message:hover {
background-color: #0062cc; /* darker green when hovered */
color: #FFF; /* darker text when hovered */
border-color: #0062cc; /* darker border when hovered */
box-shadow: 0 2px 4px rgba(0,0,0,.1); /* darker shadow when hovered */
}
.saved-message a {
color: inherit; /* takes the same color as the parent, which is #a80000 */
text-decoration: none; /* removes the underline */
transition: all 0.3s ease; /* smooth transition for hover effect */
}
.error-message-new {
display: inline-block;
color: #a80000;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
text-decoration: none;
margin-bottom: 6px;
}
.correct-message-new {
display: inline-block;
color: #006400;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
text-decoration: none;
}
.x-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
background-color: #a80000;
border-radius: 50%;
color: white;
font-size: 18px;
}
.found-message {
display: inline-block;
padding: 2px 8px;
background-color: #e6f9e6;
color: #006400;
border-radius: 3%;
margin: 0px 5px;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border-left: 3px solid #006400;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.1s ease;
width: 100%;
}
.error-message {
display: inline-block;
padding: 2px 4px;
background-color: #ffe6e6;
color: #a80000;
border-radius: 3%;
margin: 0px 5px;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border-left: 3px solid #f44336;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.1s ease;
width: 100%;
}
/* ensure dark theme error-message matches sidebar exactly */
[data-theme="dark"] .error-message {
border: 1px solid #e53935;
background-color: #522c2c;
color: #ffaaaa;
}
.error-message:hover {
background-color: #ffcdd2;
color: #8b0000;
}
.error-message a {
color: inherit; /* takes the same color as the parent, which is #a80000 */
text-decoration: none; /* removes the underline */
transition: all 0.3s ease; /* smooth transition for hover effect */
}
.error-message-sidebar {
display: inline-block;
padding: 0px 10px;
background-color: #ffe6e6;
color: #a80000;
border-radius: 5px;
margin: 0px 5px;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border: 1px solid #f44336;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.3s ease;
cursor: pointer;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis; /* Add ellipsis for overflowed text */
white-space: nowrap; /* Prevent text wrapping */
word-wrap: break-word; /* Break long words */
}
.disabled-message {
display: inline-block;
padding: 0px 10px;
/* background-color: #EEE; */
color: #888;
border-radius: 5px;
margin: 0px 5px;
position: relative;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
border: 0px solid #DDD;
/*box-shadow: 0 1px 3px rgba(0,0,0,.1);
transition: all 0.3s ease; */
cursor: pointer;
}
.spaced-blocks {
margin: 3px;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis; /* Add ellipsis for overflowed text */
white-space: nowrap; /* Prevent text wrapping */
word-wrap: break-word; /* Break long words */
}
.error-message:hover {
background-color: #ffcdd2; /* darker red when hovered */
color: #8b0000; /* darker text when hovered */
border-color: #e53935; /* darker border when hovered */
box-shadow: 0 2px 6px rgba(0,0,0,.1); /* darker shadow when hovered */
}
#feedback-text {
min-height: 50px; /* You can set a fixed height, or make it relative to the viewport as well */
background-color: rgb(241 245 249);
border-radius: 5px;
color: #0288d1;
padding: 10px;
margin: auto;
border: 2px solid #007bff;
z-index: 1;
font-size: 16px;
}
.close-button {
color: #a80000;
font-weight: bold;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
#demo {
position: relative;
margin: auto;
/* z-index: 99; */
max-width: 100%;
display: flex;
flex-wrap: wrap;
/* margin-right: 10px; */
}
#demo-form {
position: relative;
margin: auto;
width: 100%;
z-index: 3;
}
#welcome-form {
position: relative;
margin: auto;
max-width: 83%;
z-index: 3;
}
#logged-in {
text-align: center;
}
#social-proof {
margin: auto;
text-align: center;
}
.form-holder {
width: 100%;
margin: auto;
/* border-radius: 5px;
padding: 10px 40px 20px 40px;
background-color: #f6f7f9;
box-shadow: 0 1px 3px rgba(0,0,0,.1); */
background-color: rgb(241 245 249);
border: 1px solid rgba(0, 0, 0, 0.1);
/* border-top: 1px solid #004085; */
box-shadow: 0 1px 3px rgba(0,0,0,.1);
padding: 18px 30px;
border-radius: 4px;
z-index: 1;
margin: 0px auto;
}
.form-holder:hover {
border: 1px solid #007bff;
box-shadow: 0 1px 5px rgba(0,0,0,.3);
}
#ruleperfect {
border-top: 0px solid #ccc;
border-left: 0px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 2px solid #007bff;
/* background-color: #f6f7f9; */
background-color: rgb(241 245 249);
border-radius: 0px;
width: 100%; /* Or any percentage that suits your layout */
min-height: 140px; /* You can set a fixed height, or make it relative to the viewport as well */
padding: 0px;
/* color: #007BFF; */
color: #0288d1;
box-sizing: border-box;
padding-bottom: 6px;
}
#ruleperfect-lesson {
border-top: 0px solid #ccc;
border-left: 0px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 2px solid #007bff;
background-color: rgb(241 245 249);
border-radius: 0px;
width: 100%; /* Or any percentage that suits your layout */
height: 100px; /* You can set a fixed height, or make it relative to the viewport as well */
padding: 0px;
/* color: #007BFF; */
color: #0288d1;
box-sizing: border-box;
}
.rule-holder {
width: 100%;
z-index: 1;
border-radius: 6px;
margin: 8px 0px;
/* border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0,0,0,.1); */
position: relative;
/* background-color: #f6f7f9; */
color: #333;
/* background-color: rgb(241 245 249); */
box-sizing: border-box;
font-size: 14px;
}
.rule-area {
display: none;
}
.form-holder, .custom-form-holder, .grid {
/* flex: 1 0 5em; This means that each box will not shrink below 20em and will take up equal space on large screens */
box-sizing: border-box;
}
.typed-cursor {
visibility: hidden;
}
.sample-textarea {
min-height: 80px; /* You can set a fixed height, or make it relative to the viewport as well */
background-color: rgb(241 245 249);
border-radius: 6px;
color: #0288d1;
width: 100%;
padding: 20px;
margin: auto;
border: 2px solid #007bff;
z-index: 1;
box-sizing: border-box;
}
#sample-textarea {
min-height: 110px; /* You can set a fixed height, or make it relative to the viewport as well */
background-color: rgb(241 245 249);
border-radius: 6px;
color: #0288d1;
width: 100%;
padding: 20px;
margin: auto;
border: 2px solid #007bff;
z-index: 1;
box-sizing: border-box;
}
#sample-textarea:hover {
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#sample-textarea-2 {
min-height: 110px; /* You can set a fixed height, or make it relative to the viewport as well */
background-color: rgb(241 245 249);
border-radius: 6px;
color: #0288d1;
width: 100%;
padding: 20px;
margin: auto;
border: 2px solid #007bff;
z-index: 1;
box-sizing: border-box;
}
#sample-textarea-2:hover {
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
textarea::placeholder {
color: #0288d1;
}
#demo-navigation {
margin: 10px auto 20px auto;
align-items: center;
text-align: center;
}
/* Custom Rules */
#custom-rule-container {
max-width: 800px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: auto;
}
#custom-rule-info, #custom-form-holder {
flex: 1; /* This allows each div to take up equal space */
margin: 0px; /* Some spacing between divs */
box-sizing: border-box; /* This ensures padding and border are included in the element's total width and height */
}
#custom-rule-info {
border-radius: 5px;
height: 100%;
padding: 10px 30px;
font-size: 14px;
margin-right: 5px;
max-width: 250px;
}
#custom-form-holder {
margin: auto;
padding: 10px 30px;
border-radius: 5px;
}
#custom-form {
position: relative;
margin: auto;
z-index: 99;
padding-bottom: 10px;
}
details {
}
summary {
cursor: pointer;
padding: 4px 6px 4px 14px;
border: none;
outline: none;
width: 100%;
font-size: 16px;
line-height: 25px;
color: #000;
background-color: #fafafa;
border-radius: 4px;
text-decoration: none;
margin-bottom: 8px;
box-sizing: border-box;
display: flex;
justify-content: flex-start; /* Align items to the left */
align-items: center; /* Ensure vertical centering */
list-style: none; /* Remove default marker */
}
summary::-webkit-details-marker {
display: none; /* Hide the default marker in WebKit browsers like Safari */
}
summary::before {
content: '▶'; /* Custom marker */
margin-left: 2px;
margin-right: 12px; /* Spacing from the marker to the text */
transition: transform 0.1s; /* Smooth transition for turning the marker */
}
details[open] summary::before {
transform: rotate(90deg); /* Flip the marker when details are open */
}
summary:hover {
background-color: rgba(0, 0, 0, 0.05);
}
summary::marker {
color: #000;
}
details[open] > summary {
background-color: rgba(0, 0, 0, 0.05);
}
summary .faqs {
width: 100%;
font-size: 18px;
line-height: 34px;
font-weight: bold;
}
.new-rule-instructions {
margin-bottom: 15px;
background-color: #007bff;
padding: 20px;
color: #fff;
border-radius: 5px;
}
.custom-rule {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.edit-link {
display: inline-block;
min-width: 20px;
padding: 4px 6px;
margin: 0px;
font-size: 14px;
line-height: 20px;
color: #666;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.edit-link:hover,
.edit-link:focus {
background-color: rgba(0, 0, 0, 0.1);
text-decoration: none;
color: #000;
}
.topic-name {
font-style: italic;
color: #777;
margin-right: 15px;
}
.action-link {
margin-left: 10px;
}
.edit-rule-link {
color: #007bff; /* example color for Edit link */
}
.delete-link {
color: #e74c3c; /* example color for Delete link */
}
#custom-rule {
min-height: 80px;
resize: vertical;
overflow-y: scroll;
}
#custom-keywords {
resize: vertical;
overflow-y: scroll;
}
/* Custom Topics */
#topic-form {
margin: auto;
}
.hidden {
display: none;
}
#post {
padding: 10px;
}
.correct-rule-statement {
/* background-color: #007bff;
color: #f0f0f0; */
background-color: #333;
color: #f0f0f0;
border-radius: 5px;
position: relative;
margin: auto;
padding: 0.75rem 1.75rem 0.75rem 1.75rem;
}
.rule-statement-generator-container {
align-items: center;
justify-content: center;
background-color: #cce5ff;
width: 60%;
margin: auto;
padding: 40px 20px;
border-radius: 10px;
}
.rule-statement-generator-title {
margin: 20px auto;
text-align: center;
background-color: #000;
color: #FAFAFA;
padding: 12px 20px;
width: 60%;
}
.rule-statement-generator-subtitle {
margin: 0px auto 50px auto;
text-align: center;
}
.rule-statement-generator-title h1 {
font-weight: bold;
font-size: 54px;
}
.rule-statement-generator-form {
width: 80%;
margin: auto;
}
.rule-statement {
width: 80%;
height: 100%;
position: relative;
margin: auto;
border: 1px solid rgba(0, 0, 0, 0.09);
padding: 1.75rem;
border-radius: 2px;
box-sizing: border-box;
}
.generator-page {
padding: 2rem;
color: #333;
}
.generator-header {
text-align: center;
margin-bottom: 1.3rem;
}
.generator-title {
font-size: 2.8rem;
font-weight: 700;
color: #2c3e50;
letter-spacing: 1px;
text-transform: none;
}
.generator-subtitle {
font-size: 1.1rem;
color: #666;
}
.generator-link {
color: #2c3e50;
text-decoration: none;
position: relative;
transition: color 0.3s ease;
}
.generator-link:hover {
color: #34495e;
}
.generator-link::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -2px;
left: 0;
background: #34495e;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.generator-link:hover::after {
transform: scaleX(1);
}
.generator-container {
max-width: 820px;
margin: 0 auto;
background: #ffffff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border: 1px solid #e9ecef;
}
.generator-form {
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.generator-output {
display: block;
min-height: 100px;
border-radius: 4px;
padding: 1.2rem;
font-size: 20px;
animation: fadeIn 0.5s ease-out;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
.generate-button i {
display: inline-block;
transition: transform 0.3s ease;
}
.generate-button:hover i {
animation: spin 1s linear infinite;
}
.spin-on-hover i {
display: inline-block;
transition: transform 0.3s ease;
}
.spin-on-hover:hover i {
animation: spin 1s linear infinite;
}
.pulse-on-hover i {
display: inline-block;
transition: transform 0.1s ease;
}
.pulse-on-hover:hover i {
animation: pulse 1s infinite;
}
.focus {
background-color: #e6f9e6;
color: #006400; /* dark green color */
padding: 1px 2px;
position: relative;
border-bottom: 1px solid #006400;
}
.focus:hover {
background-color: #99d699;
}
.focus-missing {
padding: 1px 2px;
position: relative;
background-color: #ffe6e6;
color: #a80000;
border-bottom: 1px solid #f44336; /* red color */
}
.focus-missing:hover {
background-color: #e3b1b1;
}
.underline {
font-style: underline;
}
.missing {
color: #a80000;
border-radius: 3px;
text-decoration: underline dotted;
/* background-color: #ffe6e6; */
}
.missing:hover {
text-decoration: underline;
cursor: pointer;
}
#admin-nav {
display: flex; /* Make the container a flexbox container */
justify-content: space-between; /* This will ensure the divs are spaced equally and occupy equal space */
align-items: flex-start; /* Add this line */
}
.mee-topics, .other-topics {
flex: 1; /* This makes each div take up an equal amount of space */
}
/* AJAX loading spinner */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 16px;
height: 16px;
animation: spin 1s linear infinite;
display: inline-block;
margin-right: 10px;
vertical-align: middle;
}
#loading-message {
font-size: 16px;
color: #555;
text-align: center;
vertical-align: middle;
}
.keyword-new-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.you-entered {
/* min-height: 30px; */
flex: 2;
/* width: 70%; */
padding-right: 12px;
}
.keyword-container {
flex: 1;
width: 30%;
height: 100%;
padding: 0px 12px;
border-radius: 6px;
}
.keyword-list {
background-color: #FFF;
border-radius: 6px;
}
.missing-keywords {
border-left: 2px solid red;
padding-left: 10px;
margin-left: 10px;
}
.found-keywords {
border-left: 2px solid green;
padding-left: 10px;
}
.recent-post {
display: inline-block;
position: relative;
overflow: hidden;
white-space: nowrap;
width: 100%;
padding: 4px 9px;
font-size: 15px;
line-height: 25px;
color: #000;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s;
box-sizing: border-box;
}
.recent-post::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Adjust color to match the container's background */
pointer-events: none;
z-index: 0;
}
.recent-post:hover {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px;
color: #000;
z-index: 1;
}
.recent-post:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.05);
z-index: 1; /* Lower than ::after to keep text visible */
border-radius: 4px;
}
ul {
margin-block-start: 0.2em;
margin-block-end: 0.2em;
}
.rule-statement .focus:hover {
background-color: #95cbee;
}
/* Home Panel */
.home-panel-container {
display: flex;
flex-wrap: wrap; /* This allows the divs to wrap to the next line on smaller screens */
justify-content: space-between; /* This will space the panels evenly between each other */
gap: 15px; /* This will add space between rows of panels, if they wrap */
}
.home-panel {
flex: 1;
box-sizing: border-box;
padding: 5px 20px 15px 20px;
border-radius: 5px;
min-width: 220px;
background-color: #f7f7f8;
min-height: 80px;
background-color: #fafafa;
}
.home-panel:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.topic-panel {
flex: 1; /* This ensures that each panel can grow to take up equal space */
width: 100%; /* This ensures that there will be up to 3 panels per row. The `- 20px` is to account for gaps */
}
.toggle-checkbox {
display: none; /* Hide the checkbox */
}
.toggle-checkbox:checked + label + .rules-list {
display: block; /* Display the rules list when the checkbox is checked */
}
.toggle-switch {
background: none;
border: none;
padding: 0;
margin: 0 5px;
}
.rules-list.hidden {
display: none;
}
@media screen and (max-width: 768px) { /* Adjustments for smaller screens */
.home-panel {
width: 98%; /* Up to 2 panels per row on medium screens */
}
}
.rules-index {
background-color: rgba(0,0,0,0.03);
margin: 8px 0px;
padding: 8px 18px;
border-radius: 5px;
}
.rules-index:hover {
background-color: rgba(0,0,0,0.1);
}
.topic-header {
margin-top: 50px;
}
.topic-header-custom {
padding: 8px;
max-width: 100%;
font-size: 18px;
}
.topic-rule-panel {
border: 1px solid rgb(0,0,0,0.2);
border-radius: 5px;
padding: 0px 20px;
max-width: 100%;
margin-bottom: 20px;
font-size: inherit;
}
/* Admin Panel */
.admin-panel-container {
display: flex;
align-items: flex-start; /* To align the panels vertically at the top */
justify-content: flex-start; /* To align the panels horizontally at the start */
flex-wrap: wrap; /* To allow the panels to wrap to the next line if they don't fit */
}
.admin-panel {
border: 1px solid rgba(0, 0, 0, 0.09);
box-shadow: 0 1px 3px rgba(0,0,0,.1);
padding: 5px 20px;
border-radius: 8px;
width: 300px;
height: 150px;
margin: 10px; /* Add some space between the panels */
}
#performance-panel {
background-color: rgb(247, 249, 249);
border: 1px solid rgba(0, 0, 0, 0.3);
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
flex: 1; /* This allows each div to take up equal space */
box-sizing: border-box; /* This ensures padding and border are included in the element's total width and height */
}
.topics-container {
display: flex;
flex-direction: column;
}
.performance-topic {
display: flex;
flex-direction: row;
margin-bottom: 10px;
padding: 2px 10px 0px 10px;
}
.left-column {
flex: 1;
max-width: 30%;
}
.right-column {
flex: 3;
max-width: 70%;
display: flex;
flex-direction: row;
align-items: center;
}
.topic-progress-container {
padding: 2px 0;
width: 50%;
text-align: center;
}
.percentage {
font-size: 15px;
margin-right: 8px;
}
.progress-holder {
flex-grow: 1;
overflow: hidden;
border: 1px solid #CCC;
border-radius: 2px;
min-width: 200px;
margin-top: 5px;
position: relative;
}
.progress {
background-color: #4caf50;
border-radius: 2px;
height: 14px;
margin: 1px;
width: 100%;
}
.progress::before {
content: "";
display: block;
background: linear-gradient(to right, #6c757d 0%, #28a745 100%);
width: 0;
height: 100%;
border-radius: 15px;
transition: width 0.4s ease-in-out;
}
@media (max-width: 768px) {
.performance-topic {
flex-direction: column;
}
.left-column, .right-column {
max-width: 100%;
}
.right-column {
margin-top: 5px;
}
}
#topics-dashboard {
border-collapse: separate; /* Separate borders for cells */
border-spacing: 0; /* Set spacing between cells to 0 */
border: none;
border-left: 1px solid rgba(0, 0, 0, 0.3); /* Add a black border to the left side of every cell */
}
#topics-dashboard td {
padding: 5px 20px 10px 20px; /* Increase padding within each cell */
border: none;
}
#topics-dashboard tr:nth-child(odd){
}
#topics-dashboard tr {
/* background-color: rgb(247, 249, 249); */
}
#topics-dashboard tr:hover {
/* background-color: #eee; */
background-color: rgb(247, 249, 249);
}
#topics-dashboard td + td {
}
.custom-panel {
padding: 20px 15px 20px 15px; /* Increase padding within each cell */
background-color: rgb(247, 249, 249);
}
.float-right {
float: right;
}
#static_content {
position: relative;
margin: auto;
margin-top: 40px;
width: 75%;
}
.logo-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 20px 0px;
}
.logo-item {
display: flex; /* Use Flexbox */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
flex: 1 1 30%; /* Flex-grow, flex-shrink, flex-basis */
margin: 10px; /* Space between grid items */
}
/* Responsive layout for smaller screens */
@media (max-width: 800px) {
.logo-item {
flex-basis: 100%; /* Each item takes full width */
}
}
#tagline {
display: block;
/* color: #004085; */
font-family: arial, helvetica, sans-serif;
line-height: 30px;
font-size: 1em;
margin: 20px 0px;
max-width: 760px;
color: #004085;
}
@media (max-width: 768px) {
#topic-nav, #posts-container, #filter-box, #welcome-back, #profile {
flex-basis: 100%;
margin: 10px 0;
box-sizing: border-box;
}
#posts-container {
padding: 5px;
}
#topic-nav, #navigation-demo {
max-width: 100%;
box-sizing: border-box;
}
#static_content {
width: 90%;
}
#filter-box {
max-width: 100%;
}
#main {
width: 100%;
}
.form-holder, .custom-form-holder, .grid {
flex: 1 0 100%;
}
.you-entered, .keyword-container {
width: 100%;
}
}
.free-sign-up-card {
text-align: center;
background-color: rgb(241 245 249);
padding: 20px 40px;
border-radius: 4px;
max-width: 60%;
margin: 10px auto;
}
.sign-up-cards-container {
display: flex;
justify-content: center;
gap: 20px;
margin: 10px auto;
max-width: 65%;
flex-wrap: wrap;
}
.sign-up-card {
text-align: center;
background-color: rgb(241 245 249);
padding: 20px 10px;
border-radius: 4px;
/*border: 1px solid #CCC;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); */
flex: 1;
max-width: 270px;
}
.sign-up-card:hover {
background-color: rgb(223, 232, 241);
cursor: pointer;
}
.card-header {
margin-bottom: 15px; /* Create some space between header and list */
}
/* Demo Form */
.demo-link {
display: inline-block;
width: 100%;
padding: 6px 8px;
font-size: 16px;
line-height: 24px;
color: #000;
/* border: 1px solid rgba(0, 0, 0, 0.8); */
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
margin: 2px;
background-color: rgba(0, 0, 0, 0.05);
background-color: #f2f2f2;
box-sizing: border-box;
}
.demo-link-selected {
color: #fff;
/* border: 1px solid rgba(0, 0, 0, 0.8);
color: #000;
background-color: rgba(0, 0, 0, 0.1); */
text-decoration: none;
display: inline-block;
width: 100%;
padding: 6px 8px;
font-size: 16px;
line-height: 24px;
border-radius: 4px;
text-align: center;
text-decoration: none;
margin: 2px;
color: #fff;
background-color: #0288d1;
box-sizing: border-box;
}
.demo-link-selected:hover {
color: #fff;
}
.demo-link:visited {
background-color: #f2f2f2;
text-decoration: none;
}
.demo-link:hover,
.demo-link:focus {
background-color: #0288d1;
text-decoration: none;
color: #fff;
}
/* Issue Spotter */
.content-wrapper {
margin: 0 auto;
}
.essay-content {
position: relative;
}
.sentence-container {
display: flex;
gap: 10px;
margin-bottom: 10px;
align-items: flex-start; /* This will align items to the top */
}
.sentence-text {
display: flex;
align-items: flex-start;
flex: 0 0 70%;
gap: 8px;
}
.sentence-checkbox {
margin-top: 4px; /* Aligns checkbox with first line of text */
}
.sentence-comments {
flex: 0 0 30%;
position: relative; /* For proper positioning of the form */
}
.issue-spotter-sentence {
cursor: pointer;
transition: background-color 0.2s;
}
.issue-spotter-sentence:hover {
background-color: #f0f0f0;
}
.highlighted-sentence {
background-color: #fff3cd;
}
.comment-form-container {
margin-bottom: 10px;
width: 100%; /* Ensure form takes full width of comments section */
}
.comment-form {
background-color: #f8f9fa;
padding: 10px;
border-radius: 4px;
border: 1px solid #dee2e6; /* Add subtle border */
}
.comment-input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
box-sizing: border-box;
}
.form-actions {
display: flex;
gap: 10px;
}
.user-comment {
background-color: #e9ecef;
padding: 10px;
border-radius: 4px;
margin-bottom: 4px;
border: 1px solid #dee2e6; /* Add subtle border */
padding: 5px;
}
.content-wrapper {
position: relative;
}
.essay-content {
display: inline-block;
vertical-align: top;
}
.comments-section {
display: none; /* Start as hidden */
width: 25%; /* Adjust as needed */
position: absolute;
left: 72%; /* Adjust based on the essay-content width */
top: 0; /* Adjusted dynamically with JS */
background-color: #f9f9f9;
padding: 10px;
border-left: 1px solid #ccc;
}
.sentence-container {
position: relative;
margin-bottom: 15px;
}
.sign-up-buttons * {
display: inline;
}
mark {
background-color: #87CEFA;
}
.details-custom {
cursor: pointer;
background-color: #f7f7f8;
border-radius: 5px;
padding: 15px 20px 5px 20px;
min-width: 200px;
min-height: 80px;
flex: 1; /* This ensures that each panel can grow to take up equal space */
min-width: calc(100% / 3 - 20px); /* This ensures that there will be up to 3 panels per row. The `- 20px` is to account for gaps */
}
.details-custom:hover {
/* border: 1px solid rgba(0, 0, 0, 0.6); */
background-color: #ececf1;
}
@media screen and (max-width: 768px) { /* Adjustments for smaller screens */
.details-custom {
min-width: 90%; /* Up to 2 panels per row on medium screens */
}
.sign-up-cards-container {
max-width: 90%;
}
.sign-up-card {
max-width: 100%;
}
}
.custom-submit-button {
margin: 4px 4px 4px 0px;
background-color: #007BFF; /* A couple of shades darker blue when hovering */
border: none;
color: #FFFFFF; /* White text color */
font-size: 15px;
line-height: 22px;
padding: 5px 10px; /* Adjust the padding as needed */
cursor: pointer; /* Cursor changes to a hand when hovering */
border-radius: 3px;
transition: background-color 0.3s;
}
.custom-submit-button:hover {
background-color: #0056b3; /* Bright blue background color */
}
.button-columns {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 540px;
margin: auto;
margin-top: 50px;
}
.button-link {
display: inline-block;
width: 100%;
padding: 4px 6px 4px 12px;
font-size: 16px;
line-height: 25px;
color: #000;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
margin-bottom: 8px;
background-color: #fafafa;
box-sizing: border-box;
}
.button-link-demo {
display: inline-block;
width: 194px;
padding: 4px 6px;
font-size: 15px;
line-height: 22px;
color: #000;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
margin-bottom: 8px;
}
.button-link-demo:hover {
background-color: #ececf1;
color: #000;
text-decoration: none;
}
.button-link-demo a {
text-decoration: none;
}
.button-link-demo a:hover {
text-decoration: none;
color: #000;
}
.topic-link-container:hover .edit-topic-link {
visibility: visible;
}
.edit-topic-link {
visibility: hidden;
margin-right: 8px; /* Adjust spacing as needed */
}
.topic-links-container {
display: grid;
grid-gap: 15px; /* spacing between grid items */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
width: 100%;
}
.topic-link-big {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
font-size: 18px;
color: #000;
border: 1px solid rgb(241, 245, 249);
background-color: rgb(241, 245, 249);
cursor: pointer;
box-sizing: border-box;
border-radius: 6px;
text-decoration: none;
text-align: center;
padding: 10px;
transition: all 0.3s ease;
}
.topic-link-big:hover {
/* background-color: rgb(216,220,224); */
color: #000;
border: 1px solid rgb(216,220,224);
border: 1px solid #007bff;
box-shadow: 0 1px 5px rgba(0,0,0,.3);
background-color: rgb(241 245 249);
}
.module-links-container {
width: 100%;
box-sizing: border-box;
}
.module-preview {
width: 100%;
padding: 25px 0px;
border-top: 1px solid #CECECE;
cursor: pointer;
}
.no-underline, .no-underline:hover, .no-underline:visited, .no-underline:active {
text-decoration: none;
color: inherit;
}
.module-link-big {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 150px;
font-size: 16px;
color: #000;
border: 1px solid rgb(241, 245, 249);
background-color: rgb(241, 245, 249);
cursor: pointer;
box-sizing: border-box;
border-radius: 5px;
margin: 5px;
text-decoration: none;
text-align: center;
padding: 10px; /* Adjust padding as needed */
}
.module-link-big:hover {
background-color: rgb(216,220,224);
color: #000;
border: 1px solid rgb(216,220,224);
text-decoration: underline;
}
.module-rule {
border-bottom: 1px solid #CCC;
padding: 15px 25px;
}
.module-rule:hover {
background-color: #CCC;
cursor: pointer;
}
.my-topic {
border-color: #E6FFE6;
background-color: #E6FFE6;
}
.create-panel {
flex: 1;
display: flex;
background-color: #fff;
border: 2px dashed #007bff;
font-size: 18px;
transition: all 0.3s ease; /* smooth transition for hover effect */
min-height: 120px;
color: #007bff;
cursor: pointer;
box-sizing: border-box; /* To make sure padding and borders don't make the boxes bigger */
border-radius: 6px;
text-decoration: none;
text-align: center;
padding: 10px; /* Adjust padding as needed */
align-items: center;
justify-content: center;
}
.create-panel:hover {
background-color: #fff;
border: 2px solid #007bff;
color: #007bff;
}
.instruction-box {
color: #fefefe; /* Slightly gray font color */
background-color: #3a4d63; /* Slightly lighter navy blue */
text-decoration: none;
display: inline-block;
width: 94%;
padding: 4px 6px 4px 12px;
font-size: 15px;
line-height: 25px;
border-radius: 4px;
border: 1px solid #34495e; /* Slightly darker shade for the border */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Slight drop shadow */
margin-bottom: 8px;
}
.button-link-selected {
color: #fff;
background-color: #000;
text-decoration: none;
display: inline-block;
width: 100%;
padding: 4px 6px 4px 12px;
font-size: 16px;
line-height: 25px;
border-radius: 4px;
text-decoration: none;
margin-bottom: 8px;
box-sizing: border-box;
}
.button-link-selected:hover {
color: #fff;
background-color: #000;
text-decoration: none;
display: inline-block;
padding: 4px 6px 4px 12px;
font-size: 16px;
line-height: 25px;
border-radius: 4px;
text-decoration: none;
}
.button-link:visited {
color: #000;
background-color: #fafafa;
text-decoration: none;
}
.button-link:hover,
.button-link:focus {
background-color: rgba(0, 0, 0, 0.05);
text-decoration: none;
color: #000;
}
.button-link-beta {
margin: 2px 0px;
display: inline-block;
width: 100%;
padding: 4px 9px;
font-size: 16px;
line-height: 25px;
color: #000;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
transition: background-color 0.3s;
}
.button-link-beta:hover {
background-color: rgba(0, 0, 0, 0.05);
color: #000;
}
.button-link-beta-selected {
display: inline-block;
width: 100%;
padding: 4px 9px 4px 9px;
font-size: 16px;
line-height: 25px;
color: #fff;
background-color: #000;
margin: 2px 0px;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
}
/* Updates */
.update-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
gap: 10px;
padding: 10px;
margin-bottom: 40px;
}
.update-left {
flex: 1;
max-width: 80px;
text-align: center;
padding-top: 5px;
}
.update-right {
flex: 10;
}
/* Modules */
.module-button-link {
display: inline-block;
padding: 4px 6px;
margin: 4px;
font-size: 15px;
line-height: 22px;
color: #000;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.module-button-link-selected {
color: #fff;
background-color: #000;
text-decoration: none;
display: inline-block;
padding: 4px 6px;
margin: 4px;
font-size: 15px;
line-height: 22px;
border-radius: 4px;
text-align: center;
text-decoration: none;
}
.module-button-link:visited {
color: #000;
background-color: rgba(0, 0, 0, 0.05);
text-decoration: none;
}
.module-button-link:hover,
.module-button-link:focus {
background-color: rgba(0, 0, 0, 0.1);
text-decoration: none;
color: #000;
}
.module-button-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* Aligns items to the start of the container */
gap: 10px; /* Adjust the space between buttons */
}
.module-button {
flex: 0 1 calc(50% - 10px); /* Each button will take up to 33.333% of the container width minus gap */
height: 160px; /* Adjust the height as needed */
border-radius: 8px;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
border: 1px solid #CCC;
text-align: center;
font-size: 20px;
}
.module-button:hover {
border: 1px solid #333;
color: #000;
}
.badge {
display: inline-block;
margin-top: 4px;
padding: 0.25em 0.4em;
font-size: 75%;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
.badge-coming {
background-color: #adb5bd; /* A lighter gray color */
color: #fff;
}
.badge-beta {
color: #fff;
background-color: #4CAF50; /* A bright blue color */
}
.badge-premium {
color: #fff;
background-color: green;
}
.badge-unconfirmed {
background-color: orange;
color: #fff;
}
.badge-update {
color: #fff;
background-color: #17a2b8;
}
.badge-feature {
color: #fff;
background-color: orange;
}
.badge-secondary {
color: #666;
background-color: rgba(0,0,0,0.05);
width: 14px;
height: 20px;
}
.update {
padding: 34px 0px;
border-bottom: 1px solid #CCC;
}
.fa-eye-slash {
}
.fa-eye-slash:hover {
color: red;
}
.fa-star {
}
.fa-home, .fa-bar-chart, .fa-map, .fa-bullseye, .fa-lock {
margin-right: 6px;
}
.light-star {
color: #CCC;
}
.light-star:hover {
color: blue;
}
.fa-pencil {
}
.fa-play {
}
.fa-bolt {
margin-right: 5px;
}
.fa-angle-left {
margin-right: 2px;
}
.fa-angle-right {
margin-left: 2px;
}
.nav-link {
display: inline-block;
min-width: 20px;
padding: 6px 12px;
margin: 0px;
font-size: 15px;
line-height: 22px;
color: #000;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05);
}
.nav-link:hover,
.nav-link:focus {
background-color: rgba(0, 0, 0, 0.1);
text-decoration: none;
color: #007bff;
}
.shuffle {
font-size: 14px;
}
.shuffled {
font-size: 14px;
color: #FFF;
background-color: #333;
}
.shuffled:hover {
color: #FFF;
background-color: #000;
}
/* Container styles */
#topic-rule-nav {
margin: 6px auto;
font-size: 15px;
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 2px; /* Adjust the gap between grid items as needed */
}
/* Grid View - default view */
#topic-rule-nav.grid-view .sortable-item {
box-sizing: border-box;
}
/* Tooltip in grid view */
#topic-rule-nav .tooltip {
display: inline-block;
}
/* List View */
#topic-rule-nav.list-view {
display: block;
}
#topic-rule-nav.list-view .sortable-item {
display: block;
width: 100%; /* Ensure each item takes up the full width */
box-sizing: border-box;
margin-bottom: 2px; /* Add space between items */
}
/* Tooltip in list view */
#topic-rule-nav.list-view .tooltip {
display: block; /* makes each tooltip take up the whole row */
width: 100%; /* Ensure it takes up the full width */
box-sizing: border-box;
}
/* Rule name list view */
#topic-rule-nav .rule-name-list-view {
display: none; /* By default, hide the list view names */
width: 90%;
box-sizing: border-box;
}
#topic-rule-nav.list-view .rule-name-list-view {
display: inline-block; /* Display rule names when in list view */
}
/* Style for the sortable item while being dragged */
.ui-sortable-helper {
background-color: #f0f0f0; /* Change background color */
border: 1px dashed #ccc; /* Add a dashed border */
border-radius: 4px;
opacity: 0.8; /* Make it slightly transparent */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a slight shadow */
transform: scale(1.05); /* Slightly enlarge the item */
}
.reorder-icon {
float: right;
color: #999;
}
.reorder-icon::after {
content: "Drag and drop to reorder";
visibility: hidden;
width: auto;
color: #333;
text-align: center;
position: absolute;
z-index: 1;
right: 40px;
opacity: 0;
transition: opacity 0.3s;
}
.reorder-icon:hover::after {
visibility: visible;
opacity: 1;
}
.reorder-icon:hover {
color: #333;
}
.list-view .tooltiptext {
display: none;
}
.custom-rule-form {
margin: 20px 0px 20px 0px;
}
.nav-link-topics {
display: inline-block;
width: 18px;
padding: 4px 6px;
margin: 3px;
font-size: 13px;
line-height: 22px;
color: #000;
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.0);
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.nav-link-topics:hover,
.nav-link-topics:focus {
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.0);
text-decoration: none;
color: #000;
}
.nav-link-topics-correct {
display: inline-block;
width: 18px;
padding: 4px 6px;
margin: 3px;
font-size: 13px;
line-height: 22px;
color: #008000; /* green color for correct link */
background-color: #B0DAB9; /* lighter green for correct link background */
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.nav-link-topics-correct:hover,
.nav-link-topics-correct:focus {
background-color: #8FC28A; /* darker green background for hover and focus state */
color: #008000; /* maintain green color for hover and focus state */
text-decoration: none;
}
.nav-link-topics-active {
display: inline-block;
width: 18px;
padding: 4px 6px;
margin: 3px;
font-size: 13px;
line-height: 22px;
color: #FFF; /* white color for active state */
background-color: #000; /* black background for active state */
border: 1px solid #000; /* black background for active state */
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.nav-link-topics-active:hover,
.nav-link-topics-active:focus {
background-color: #333; /* darker background for hover and focus state */
color: #FFF; /* maintain white color for hover and focus state */
text-decoration: none;
}
.filter-expand-link {
cursor: pointer;
margin-left: 15px;
max-height: 20px;
position: absolute;
right: 0px;
top: -5px;
}
.try-again-link {
display: inline-block;
padding: 4px 8px;
margin: 4px;
font-size: 16px;
line-height: 24px;
background-color: #ffdddd;
color: #a80000;
border-radius: 6px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.try-again-link:hover,
.try-again-link:focus {
background-color: #007bff;
color: #fff;
text-decoration: none;
}
.surprise-link {
display: inline-block;
padding: 6px 12px;
margin: 0px;
font-size: 15px;
line-height: 22px;
background-color: rgba(0, 0, 0, 0.05);
color: #000;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.surprise-link-blue {
display: inline-block;
padding: 6px 12px;
margin: 0px;
font-size: 15px;
line-height: 22px;
background-color: rgba(0, 0, 0, 0.05);
color: blue;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.surprise-link:hover,
.surprise-link:focus {
background-color: rgba(0, 0, 0, 0.1);
color: #000;
text-decoration: none;
}
.sign-up-link {
display: inline-block;
padding: 6px 18px;
margin: 4px;
font-size: 22px;
line-height: 30px;
background-color: #007bff;
color: #fff;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.sign-up-link:hover,
.sign-up-link:focus {
background-color: #0056b3;
color: #fff;
text-decoration: none;
}
.next-link {
border: none;
display: inline-block;
padding: 6px 12px;
margin: 0px;
font-size: 15px;
line-height: 22px;
background-color: #0288d1;
color: #fff;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s;
}
.next-link:hover,
.next-link:focus {
background-color: #0056b3;
color: #fff;
text-decoration: none;
}
.try-again-rule-link {
border: none;
display: inline-block;
padding: 6px 12px;
margin: 0px;
font-size: 15px;
line-height: 22px;
background-color: #fff3b0; /* More subtle yellow */
color: #4f410c; /* Darker yellow/brown for text */
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.try-again-rule-link:hover,
.try-again-rule-link:focus {
background-color: #ffe066; /* Slightly darker yellow on hover */
color: #4f410c;
text-decoration: none;
}
.mark-correct-link {
display: inline-block;
padding: 6px 12px;
margin: 0px;
font-size: 15px;
line-height: 22px;
background-color: #e6f9e6; /* Light green background */
color: #006400; /* Dark green text */
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.mark-correct-link:hover,
.mark-correct-link:focus {
background-color: #c8e6c9; /* Slightly darker green on hover */
color: #004d00; /* Darker text on hover */
text-decoration: none;
}
/* Dark mode support */
[data-theme="dark"] .mark-correct-link {
background-color: #2c522c; /* Dark green background */
color: #aaffaa; /* Light green text */
}
[data-theme="dark"] .mark-correct-link:hover,
[data-theme="dark"] .mark-correct-link:focus {
background-color: #244a24; /* Darker green on hover */
color: #ccffcc; /* Lighter text on hover */
}
.lesson-link {
border: none;
display: inline-block;
padding: 6px 15px;
margin: 0px;
font-size: 14px;
line-height: 22px;
color: #333;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.lesson-link:hover,
.lesson-link:focus {
background-color: #333;
color: #fff;
text-decoration: none;
}
.dark-link {
display: inline-block;
padding: 4px 8px;
margin: 4px;
font-size: 15px;
line-height: 22px;
background-color: #0056b3;
color: #fff;
border-radius: 6px;
text-align: center;
text-decoration: none;
cursor: pointer;
width: 150px;
}
.dark-link:hover,
.dark-link:focus {
background-color: #000;
color: #fff;
text-decoration: none;
}
.dark-link {
display: inline-block;
padding: 4px 8px;
margin: 4px;
font-size: 15px;
line-height: 22px;
background-color: #0056b3;
color: #fff;
border-radius: 6px;
text-align: center;
text-decoration: none;
cursor: pointer;
width: 150px;
}
.dark-link:hover,
.dark-link:focus {
background-color: #000;
color: #fff;
text-decoration: none;
}
.create-rule-link {
display: inline-block;
padding: 4px 12px;
margin: 3px;
font-size: 15px;
line-height: 22px;
background-color: #fff;
border: 1px dotted #007bff;
color: #007bff;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.create-rule-link.disabled {
cursor: not-allowed; /* Show a not allowed cursor */
pointer-events: none; /* Ensures no click events are fired */
opacity: 0.3;
}
.create-rule-link:hover,
.create-rule-link:focus {
background-color: #007bff;
color: #fff;
text-decoration: none;
}
.create-topic-link {
display: inline-block;
padding: 4px 9px;
margin: 3px 0px;
font-size: 15px;
line-height: 25px;
background-color: #fff;
border: 1px dotted #007bff;
color: #007bff;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
.create-topic-link.disabled {
background-color: #e9ecef; /* Lighter background color */
border-color: #ced4da; /* Lighter border color */
color: #adb5bd; /* Lighter text color */
cursor: not-allowed; /* Show a not allowed cursor */
pointer-events: none; /* Ensures no click events are fired */
}
.create-topic-link:hover,
.create-topic-link:focus {
background-color: #007bff;
color: #fff;
text-decoration: none;
}
.create-rule-link-dark {
display: inline-block;
width: 120px;
padding: 4px 6px;
margin: 4px;
font-size: 15px;
line-height: 22px;
background-color: #007bff;
border: 1px solid #007bff;
color: #fff;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.create-rule-link-dark:hover,
.create-rule-link-dark:focus {
background-color: #0056b3;
border: 1px solid #0056b3;
color: #fff;
text-decoration: none;
}
#top-50 {
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 5px;
background-color: #CCC;
padding: 8px 20px 20px 20px;
background-image: linear-gradient(90deg, rgb(252, 252, 252) 0%, rgb(250, 250, 250) 100%);
}
.top50-button {
display: inline-block;
padding: 4px 6px;
font-size: 15px;
line-height: 22px;
background-color: #000;
border: 1px solid #000;
color: #fff;
border-radius: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.top50-button:hover,
.top50-button:focus {
background-color: #0056b3;
border: 1px solid #0056b3;
color: #fff;
text-decoration: none;
}
.rule-link {
display: inline-block;
padding: 4px 12px;
margin: 4px;
font-size: 16px;
line-height: 24px;
color: #000;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 2px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.rule-link:hover,
.rule-link:focus {
background-color: #007bff;
color: #fff;
text-decoration: none;
}
.column {
flex: 1;
}
/* Styles for smaller screens */
@media (max-width: 768px) {
.button-columns {
flex-direction: column;
}
.column {
flex: none;
}
.filter-expand-link {
margin-left: 2px;
}
}
/* Styles for smaller screens */
@media (max-width: 950px) {
.topic-link-big {
}
.create-panel {
}
}
button {
font-family: inherit;
font-size: inherit;
margin: 0px 5px 5px 0px;
}
#element {
color: #000;
}
.topic {
color: #ff6600;
font-weight: bold;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.grid-item {
border: 1px solid #DEDEDE;
border-radius: 4px;
padding: 8px;
text-align: center;
height: 120px;
width: 120px;
font-size: 12px;
background-color: rgba(0, 0, 0, 0.05);
}
.grid-item:hover {
background-color: #007bff;
}
.rules-container {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.rule-item {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.numeral {
width: 23px;
height: 23px;
border: 1px solid rgb(241, 241, 241);
border-radius: 50%;
display: inline-block;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
background: #198CFF;
color: #EFEFEF;
margin-right: 10px;
}
.dashboard-admin {
margin: auto;
text-align: center;
}
.dashboard-topic {
max-width: 800px;
/* border-radius: 4px; */
padding: 20px;
border: 1px solid #eee;
border-left: 3px solid rgba(0, 0, 0, 0.3);
/* background-color: #f6f7f9; */
box-shadow: 0 1px 3px rgba(0,0,0,.05); /* adding a little shadow */
display: flex;
/* justify-content: center; */
align-items: center;
text-align: center;
margin: 10px 0px 20px 0px;
flex-direction: column;
}
.dashboard-topic:hover {
border-left-color: #000;
}
@media screen and (min-width: 768px) {
.dashboard-topic {
flex-direction: row;
width: 100%;
}
}
.topic-descriptions {
font-size: 12px;
line-height: 12px;
}
.dashboard-post {
border: 1px solid #CECECE;
margin: 10px 0px 10px 0px;
padding: 10px 10px 10px 30px;
border-radius: 4px;
display: flex;
align-items: center;
text-align: center;
}
.dashboard-post:hover {
cursor: pointer;
border-color: gray;
}
/* Progress Bars */
progress {
height: 20px;
width: 100%;
margin-bottom: 10px;
}
/* Style the progress bar fill based on the percentage completed */
progress::-webkit-progress-value {
background-color: red;
}
progress[value="30"]::-webkit-progress-value {
background-color: orange;
}
progress[value="75"]::-webkit-progress-value {
background-color: green;
}
progress::-moz-progress-bar {
background-color: red;
}
progress[value="30"]::-moz-progress-bar {
background-color: orange;
}
progress[value="75"]::-moz-progress-bar {
background-color: green;
}
.circle-checkmark {
background: #1ea446;
color: white;
padding: 1px 4px;
border-radius: 50%;
}
.circle-xmark {
background: red;
color: white;
padding: 1px 4px;
border-radius: 50%;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
margin: 2px;
grid-gap: 2px;
width: 50%;
flex: 1 0 50%; /* This will make the div take half the space of the parent (if possible), but not shrink below that size */
}
.grid-item {
border: 1px solid #bbb;
height: 10px;
width: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
}
.grid-item:hover {
background-color: #ccc;
color: #000;
cursor: pointer;
}
.grid-item-blue {
border: 1px solid #bbb;
background-color: blue;
height: 10px;
width: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
}
table {
border-collapse: collapse;
border: 1px solid gray;
width: 100%;
}
th, td {
padding: 8px;
border: 1px solid gray;
}
th {
background-color: #ddd;
}
#admin-rules-table {
font-size: 16px;
line-height: 16px;
}
#custom-rules-table,
#custom-rules-table th,
#custom-rules-table td {
border: none;
}
#custom-rules-table td:nth-child(1),
#custom-rules-table th:nth-child(1) {
width: 68px;
}
.rules-table,
.rules-table th,
.rules-table td {
border: none;
}
.rules-table tr {
height: 40px;
}
/* Custom styles for tabs */
#tabs {
font-family: inherit;
border-radius: 4px;
width: 100%;
font-size: 16px;
box-sizing: border-box;
}
#tabs ul {
padding: 0;
margin: 0;
margin-bottom: 15px;
list-style: none;
}
#tabs ul li {
display: inline;
margin-right: 5px;
}
#tabs ul li a {
text-decoration: none;
padding: 8px 16px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: #eee;
color: #333;
}
#tabs ul li a:hover {
background-color: #ddd;
}
#tabs ul li.ui-tabs-active a {
border: 1px solid #000;
background-color: #000;
color: #FFF;
}
#tabs div {
border-radius: 8px;
background-color: #fff;
width: 100%;
box-sizing: border-box;
}
/* Custom styles for table */
#rule-library {
width: 100%;
border-collapse: separate; /* Change from collapse to separate */
border-spacing: 0; /* Remove space between borders */
margin-bottom: 20px;
table-layout: fixed; /* Fixed table layout */
border: 1px solid #e0e0e0; /* Add border to table */
border-radius: 6px;
overflow: hidden; /* Ensure content does not overflow the rounded corners */
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
box-sizing: border-box;
}
#rule-library th,
#rule-library td {
padding: 12px;
border-top: none; /* Add top border to cells */
border-bottom: 1px solid #e0e0e0; /* Add bottom border to cells */
border-right: none; /* Remove right border from cells */
border-left: none; /* Remove left border from cells */
text-align: left;
vertical-align: middle;
white-space: nowrap; /* Prevent text wrapping */
word-wrap: break-word; /* Break long words */
}
#rule-library th {
background-color: #f2f2f2;
}
#rule-library tbody tr {
height: 20px; /* Set fixed row height */
border-top: 1px solid #e0e0e0; /* Add top border to rows */
border-bottom: 1px solid #e0e0e0; /* Add bottom border to rows */
}
#rule-library tbody tr:first-child {
border-top: none; /* Remove the top border of the first row */
}
#rule-library tbody tr:last-child {
border-bottom: none; /* Remove the bottom border of the last row */
}
#rule-library tr:hover {
background-color: #f1f1f1;
}
/* Specific column width settings */
#rule-library th:first-child,
#rule-library td:first-child {
width: 2%; /* Adjust based on your content */
padding-left: 20px;
}
#rule-library th:nth-child(2),
#rule-library td:nth-child(2) {
max-width: 300px; /* Set a maximum width for the middle column */
width: 50%; /* Allow the middle column to take up remaining space */
overflow: hidden;
text-overflow: ellipsis; /* Add ellipsis for overflowed text */
}
#rule-library th:nth-child(3),
#rule-library td:nth-child(3) {
width: 25%;
overflow: hidden;
text-overflow: ellipsis; /* Add ellipsis for overflowed text */
}
#rule-library th:last-child,
#rule-library td:last-child {
width: 20%; /* Adjust based on your content */
width: auto; /* Allow the width to be auto */
}
#feedback-index {
display: flex;
flex-direction: column;
}
.feedback-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.feedback-time, .feedback-message, .feedback-actions {
flex: 1;
}
.feedback-time {
flex-basis: 20%;
}
.feedback-message {
flex-basis: 60%;
padding: 0 10px;
}
.feedback-actions {
flex-basis: 20%;
text-align: right;
}
.feedback-message p, .feedback-time, .feedback-actions {
margin: 0;
}
.alert-correct {
/* background-color: #F3F6F0; */
border-radius: 5px;
max-width: 760px;
margin: auto;
padding: 0.75rem 1.75rem 0.75rem 1.75rem;
}
.alert-danger {
/* background-color: #F8F8F8; */
margin: auto;
/* #f8d7da
color: #721c24;
border-color: #f5c6cb;
*/
position: relative;
}
.lesson-description {
color: #004085;
background-color: #cce5ff;
border-radius: 10px;
padding: 0.75rem 1.75rem 0.75rem 1.75rem;
margin: 20px 0px 0px 0px;
}
.lesson-playlist {
height: 300px; /* Set the fixed height */
overflow: hidden; /* Hide overflow content */
overflow-y: scroll; /* Make the content scrollable vertically */
}
.lesson-item {
display: flex;
align-items: center;
font-size: 16px;
}
.lesson-item:hover {
background-color: #C4DFDF;
}
.highlight {
background-color: #C4DFDF;
}
.navigation {
display: flex;
justify-content: space-between;
padding-top: 10px;
margin: auto;
max-width: 180px;
}
.previous {
text-align: left;
}
.next {
text-align: right;
}
.correct {
background-color: #e6f9e6;
color: #006400; /* dark green color */
border: 1px solid #4caf50; /* green color */
}
.correct:hover {
background-color: #c8e6c9; /* darker green when hovered */
color: #004d00; /* darker text when hovered */
border-color: #388e3c; /* darker border when hovered */
}
.incorrect {
background-color: #ffe6e6;
color: #a80000;
border: 1px solid #f44336; /* red color */
}
.incorrect:hover {
background-color: #ffcdd2; /* darker red when hovered */
color: #8b0000; /* darker text when hovered */
border-color: #e53935; /* darker border when hovered */
}
.delete {
border: 1px solid #a80000; /* darker border when hovered */
background-color: #fff;
color: #a80000;
}
.delete:hover {
background-color: #ffcdd2; /* darker red when hovered */
color: #8b0000; /* darker text when hovered */
}
/* Error Messages */
.error-messages {
padding: 15px;
margin: 10px 0px 20px 0px;
border: 1px solid transparent;
border-radius: 4px;
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}
.error-messages h2 {
color: #721c24;
}
/* Modals */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 99;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5); /* Increase the alpha from 0.4 to 0.8 */
opacity: 0; /* Start as transparent */
transition: opacity 0.3s; /* Animation duration */
}
.modal-content {
opacity: 1;
background-color: #2a2a2a; /* Softened background */
color: #eaeaea; /* Off-white font color */
margin: 5% auto;
padding: 20px;
border: 1px solid #333; /* Border to match background */
width: 40%;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transform: translateY(50%);
transition: transform 0.3s;
}
.rule-modal-content {
opacity: 1;
/*background-color: #2a2a2a; Softened background */
/* color: #eaeaea; Off-white font color */
background-color: #fff;
color: #333;
margin: 2% auto;
padding: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
width: 75%;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
/* transform: translateY(-50%); */
transition: transform 0.2s;
display: flex;
flex-wrap: wrap; /* Ensures responsiveness */
}
.modal-instructions {
flex: 1 1 150px; /* Takes as much space as needed, not less than 300px */
padding: 10px;
color: #FFF;
}
.modal-form {
flex: 2 1 300px; /* Takes twice the space of instructions, not less than 300px */
padding: 10px;
}
@media (max-width: 600px) {
.rule-modal-content {
flex-direction: column; /* Stacks the content vertically on small screens */
}
}
.topic-modal-content {
opacity: 1;
background-color: #fff;
color: #333;
margin: 10% auto;
padding: 30px 40px 30px 40px;
border: 1px solid rgba(0, 0, 0, 0.2);
width: 30%;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
/* transform: translateY(-50%); */
transition: transform 0.2s;
}
.subscription-modal-content {
opacity: 1;
background-color: #000;
color: #eaeaea;
margin: 8% auto;
padding: 30px 40px 20px 40px;
border: 1px solid rgba(0, 0, 0, 0.2);
width: 30%;
min-height: 40%;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
/* transform: translateY(-50%); */
transition: transform 0.2s;
}
.extension-link {
background-color: rgb(0, 116, 212);
color: #FFF;
}
@media (max-width: 768px) {
.modal-content {
opacity: 1;
background-color: #2a2a2a; /* Softened background */
color: #eaeaea; /* Off-white font color */
border: 1px solid #333; /* Border to match background */
width: 100%;
height: 100%;
transform: translateY(-50%);
transition: transform 0.3s;
}
.rule-modal-content {
margin: 2% auto;
width: 80%;
}
.subscription-modal-content {
width: 75%;
}
}
.modal-displayed {
opacity: 1; /* Fully opaque */
}
.modal-content-displayed {
transform: translateY(0); /* Move to actual position */
}
#modalBtn {
}
#modalBtn:hover {
}
.close {
color: #333;
float: right;
font-size: 34px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #aaa;
text-decoration: none;
cursor: pointer;
}
.topic-close {
color: #333;
float: right;
font-size: 34px;
font-weight: bold;
}
.topic-close:hover,
.topic-close:focus {
color: #aaa;
text-decoration: none;
cursor: pointer;
}
.subscription-close {
color: #333;
float: right;
font-size: 34px;
font-weight: bold;
}
.subscription-close:hover,
.subscription-close:focus {
color: #aaa;
text-decoration: none;
cursor: pointer;
}
/* Tooltips */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 5px;
position: absolute;
z-index: 999;
bottom: 115%;
left: 38%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
#rule-hint {
display: none;
}
/* Modern Toggle Switch */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
cursor: pointer;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e2e8f0;
transition: .3s;
border: none;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Regular toggle switches */
input:checked + .slider {
background-color: #3b82f6;
}
input:focus + .slider {
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 2px rgba(59, 130, 246, 0.2);
}
input:checked + .slider:before {
transform: translateX(20px);
}
/* Study/Quiz mode specific toggle */
#toggleSwitch:not(:checked) + .slider {
background-color: #3b82f6;
}
#toggleSwitch:checked + .slider {
background-color: #e2e8f0;
}
#toggleSwitch:not(:checked) + .slider:before {
transform: translateX(20px);
}
#toggleSwitch:checked + .slider:before {
transform: translateX(0);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Hamburger nav */
.hidden-large {
display: none;
}
#menu-toggle {
font-size: 24px; /* Adjust this value to make the icon larger or smaller */
background: none; /* To remove default button background */
border: none; /* To remove default button border */
outline: none; /* To remove focus outline */
cursor: pointer; /* To show hand cursor when hovering over the button */
color: #333; /* Dark color for the icon */
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to the icon for more depth */
border-radius: 5px; /* Rounded corners for the button */
transition: background 0.3s; /* Smooth transition for hover effect */
padding: 4px 8px;
margin: 10px;
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
text-align: center;
text-decoration: none;
position: absolute;
top: 5px;
left: 5px;
}
#menu-toggle:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.disabled-link .nav-link-topics {
pointer-events: none;
opacity: 0.4;
}
a.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.3;
}
.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.3;
}
.nav-link-topics.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.6;
}
@media (max-width: 768px) {
.button-link {
font-size: 15px;
}
.button-link-selected {
font-size: 15px;
}
.button-link-selected:hover {
font-size: 15px;
}
.button-link-beta {
font-size: 15px;
}
.button-link-beta-selected {
font-size: 15px;
}
.profile-message {
display: none;
}
/* Show menu toggle button */
#menu-toggle.hidden-large {
display: block;
}
/* Hide the navigation items */
#topic-nav > div {
display: none;
}
/* Show navigation items if the menu is active */
#topic-nav.active > div {
display: block;
}
}
/* Payment Page */
#payment {
max-width: 85%;
margin: auto;
}
.pricing-container {
display: flex;
justify-content: center;
align-items: top;
gap: 8px;
flex-wrap: wrap; /* Allows items to wrap to the next line */
}
.pricing-card {
border-radius: 4px;
padding: 60px 40px;
min-height: 400px;
max-width: 800px;
margin: 6px;
text-align: center;
background-color: rgb(241 245 249);
/* box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); */
border: 0px solid #CCC;
flex: 1; /* Equal width distribution */
box-sizing: border-box; /* Include padding and border in the width */
}
.pricing-card:hover {
background-color: rgb(223, 232, 241);
}
/* Adjustments for smaller screens */
@media (max-width: 968px) {
.pricing-container {
flex-direction: column;
}
.pricing-card {
width: 100%; /* Full width on smaller screens */
margin: auto;
}
}
.tier-title,
.price {
margin: 0;
margin-bottom: 10px;
}
.pricing-header {
font-size: 18px;
margin: 10px 15px;
color: #666;
}
.feature-list {
margin: 0;
padding: 0px 20px;
list-style-type: none;
text-align: left;
}
.feature-list li {
margin-bottom: 10px;
}
.cta-container {
margin-top: 20px;
}
/* Dark Mode Styles */
[data-theme="dark"] body {
background-color: #000;
color: #e0e0e0;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control {
background-color: #333;
border-color: #555;
color: #e0e0e0;
}
[data-theme="dark"] .btn-submit,
[data-theme="dark"] .btn-submit-alt,
[data-theme="dark"] .btn-submit-alt-free {
background-color: #333;
color: #e0e0e0;
}
[data-theme="dark"] .form-holder,
[data-theme="dark"] .form-holder-demo,
[data-theme="dark"] .rule-holder,
[data-theme="dark"] #ruleperfect {
background-color: #2c2c2c; /* dark background */
border-color: #444; /* dark border */
color: #e0e0e0; /* light text */
}
[data-theme="dark"] .form-holder {
box-shadow: 0 1px 4px rgba(0,0,0,.7);
}
[data-theme="dark"] .form-holder-demo {
box-shadow: 0 1px 3px rgba(0,0,0,.7);
}
[data-theme="dark"] .rule-holder {
box-shadow: 0 1px 3px rgba(0,0,0,.7);
}
[data-theme="dark"] #topic-nav,
[data-theme="dark"] #filter-box,
[data-theme="dark"] #payment {
background-color: #000; /* dark background */
border-color: #000; /* dark border */
color: #e0e0e0; /* light text */
}
[data-theme="dark"] #ruleperfect {
border-bottom-color: #0288d1; /* retaining the same border-bottom color as in light mode */
}
/* Home Panel */
[data-theme="dark"] .home-panel {
background-color: #2c2c2c;
border-color: #444;
}
[data-theme="dark"] .home-panel:hover {
background-color: #383838;
}
/* Admin Panel */
[data-theme="dark"] .admin-panel {
background-color: #2c2c2c;
border-color: #444;
}
[data-theme="dark"] #performance-panel {
background-color: #333;
border-color: #444;
}
[data-theme="dark"] #topics-dashboard tr {
background-color: #333;
}
[data-theme="dark"] #topics-dashboard tr:hover {
background-color: #383838;
}
[data-theme="dark"] .custom-panel {
background-color: #333;
}
/* Other elements */
[data-theme="dark"] #tagline {
color: #e0e0e0;
}
[data-theme="dark"] .sign-up-card {
background-color: #333;
border-color: #444;
}
[data-theme="dark"] .sign-up-card:hover {
border-color: #0288d1;
box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}
[data-theme="dark"] .card-header {
color: #e0e0e0;
border-color: #444;
}
[data-theme="dark"] .button-link,
[data-theme="dark"] .button-link-demo,
[data-theme="dark"] .button-link-beta {
color: #e0e0e0;
background-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .button-link:hover,
[data-theme="dark"] .button-link:focus,
[data-theme="dark"] .button-link-demo:hover,
[data-theme="dark"] .button-link-beta:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #e0e0e0;
}
[data-theme="dark"] .button-link-selected,
[data-theme="dark"] .button-link-beta-selected {
color: #FFF;
background-color: #3a3a3a;
}
[data-theme="dark"] .button-link-selected:hover,
[data-theme="dark"] .button-link-beta-selected:hover {
background-color: #c7c7c7;
}
[data-theme="dark"] .button-link:visited {
color: #e0e0e0;
background-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] #topic-rule-nav {
color: #e0e0e0;
}
[data-theme="dark"] #topic-rule-nav .tooltip {
/* Adjustments for tooltip in grid view if needed for dark mode */
}
[data-theme="dark"] #topic-rule-nav.list-view .tooltip {
/* Adjustments for tooltip in list view if needed for dark mode */
}
[data-theme="dark"] #topic-rule-nav .rule-name-list-view {
/* Adjustments for rule names if needed for dark mode */
}
[data-theme="dark"] .nav-link-topics {
color: #e0e0e0;
background-color: #333;
border-color: #555;
}
[data-theme="dark"] .nav-link-topics:hover,
[data-theme="dark"] .nav-link-topics:focus {
background-color: #444;
color: #e0e0e0;
}
[data-theme="dark"] .nav-link-topics-correct {
color: #00a700; /* Keep the green color for correct link in dark mode */
background-color: #2b4d2b;
}
[data-theme="dark"] .nav-link-topics-active {
color: #FFF;
background-color: #007BFF;
border-color: #007BFF;
}
[data-theme="dark"] .nav-link-topics-active:hover,
[data-theme="dark"] .nav-link-topics-active:focus {
color: #FFF;
background-color: #007BFF;
}
[data-theme="dark"] .try-again-link {
background-color: #b33a3a;
color: #f5c6c6;
}
[data-theme="dark"] .try-again-link:hover,
[data-theme="dark"] .try-again-link:focus {
background-color: #911c1c;
color: #f5c6c6;
}
[data-theme="dark"] .surprise-link {
background-color: #333;
color: #e0e0e0;
}
[data-theme="dark"] .surprise-link-blue {
background-color: #333;
color: #1e90ff;
}
[data-theme="dark"] .surprise-link:hover,
[data-theme="dark"] .surprise-link:focus {
background-color: #444;
color: #e0e0e0;
}
[data-theme="dark"] .sign-up-link {
background-color: #0056b3;
color: #e0e0e0;
}
[data-theme="dark"] .sign-up-link:hover,
[data-theme="dark"] .sign-up-link:focus {
background-color: #003e7e;
color: #e0e0e0;
}
[data-theme="dark"] .next-link {
background-color: #0056b3;
color: #e0e0e0;
}
[data-theme="dark"] .next-link:hover,
[data-theme="dark"] .next-link:focus {
background-color: #003e7e;
color: #e0e0e0;
}
[data-theme="dark"] .dark-link {
background-color: #003e7e;
color: #e0e0e0;
}
[data-theme="dark"] .dark-link:hover,
[data-theme="dark"] .dark-link:focus {
background-color: #002a50;
color: #e0e0e0;
}
[data-theme="dark"] .create-rule-link {
background-color: #000;
border-color: #0056b3;
color: #0056b3;
}
[data-theme="dark"] .create-rule-link:hover,
[data-theme="dark"] .create-rule-link:focus {
background-color: #0056b3;
color: #e0e0e0;
}
[data-theme="dark"] .create-topic-link {
background-color: #333;
border-color: #0056b3;
color: #0056b3;
}
[data-theme="dark"] .create-topic-link:hover,
[data-theme="dark"] .create-topic-link:focus {
background-color: #0056b3;
color: #e0e0e0;
}
[data-theme="dark"] .create-rule-link-dark {
background-color: #0056b3;
border-color: #003e7e;
color: #e0e0e0;
}
[data-theme="dark"] .create-rule-link-dark:hover,
[data-theme="dark"] .create-rule-link-dark:focus {
background-color: #003e7e;
border-color: #002a50;
color: #e0e0e0;
}
[data-theme="dark"] .correct {
background-color: #2c522c; /* darker version of green */
color: #aaffaa; /* light green color */
border: 1px solid #4caf50; /* maintain the same green border color */
}
[data-theme="dark"] .correct:hover {
background-color: #244a24; /* even darker green when hovered */
color: #ccffcc; /* slightly lighter text when hovered */
border-color: #388e3c; /* darker border when hovered */
}
[data-theme="dark"] .incorrect {
background-color: #522c2c; /* darker version of red */
color: #ffaaaa; /* light red color */
border: 1px solid #f44336; /* maintain the same red border color */
}
[data-theme="dark"] .incorrect:hover {
background-color: #4a2424; /* even darker red when hovered */
color: #ffcccc; /* slightly lighter text when hovered */
border-color: #e53935; /* darker border when hovered */
}
[data-theme="dark"] .recent-post {
color: #e0e0e0; /* light text to match the dark mode theme */
/* You can also optionally set a different background-color if needed, for example: */
background-color: #000;
}
[data-theme="dark"] .recent-post:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #e0e0e0; /* light text */
}
button[type="submit"]:hover {
background-color: #0056b3 !important; /* Darker blue on hover */
}
@media (max-width: 768px) {
.generator-form select {
width: 100% !important;
max-width: 300px;
}
}
.rule-keyword {
font-weight: 600;
color: #276749; /* Dark green */
background-color: #f0fff4; /* Very light green */
padding: 2px 4px;
border-radius: 3px;
white-space: nowrap;
}
[data-theme="dark"] .rule-keyword {
color: #9ae6b4; /* Light green for dark mode */
background-color: #1c4532; /* Dark green background for dark mode */
}
.rule-example {
margin-top: 15px;
padding: 12px 15px;
background-color: #f8f9fa;
border-left: 4px solid #4a5568;
border-radius: 4px;
font-size: 0.95em;
color: #4a5568;
}
.rule-example i {
margin-right: 8px;
color: #718096;
}
[data-theme="dark"] .rule-example {
background-color: #2d3748;
border-left-color: #718096;
color: #e2e8f0;
}
.rule-tag {
font-size: 0.8em;
color: #e0e0e0;
background-color: #008000;
padding: 2px 4px;
border-radius: 3px;
}
.rule-tag a {
color: #e0e0e0;
text-decoration: none;
}
.rule-tag a:hover {
color: #e0e0e0;
text-decoration: underline;
}
.check-mark {
color: #28a745;
font-weight: bold;
margin-left: 0.5rem;
}
.topic-section {
margin-bottom: 30px;
}
.topic-section h4 {
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
margin-bottom: 15px;
}
.essay-list {
padding-left: 15px;
}
.essay-item {
margin-bottom: 10px;
}
.essay-link {
text-decoration: none;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
border-radius: 4px;
}
.essay-link:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.essay-title {
font-size: 16px;
}
.essay-date {
color: #666;
font-size: 14px;
}
.new-essay-link {
margin-top: 20px;
}
/* Copy to clipboard button styles */
.copy-button-container {
margin-top: 15px;
text-align: right;
}
.copy-button {
background-color: #f8f9fa;
border: 1px solid #ced4da;
border-radius: 4px;
color: #495057;
cursor: pointer;
font-size: 14px;
padding: 6px 12px;
transition: all 0.2s ease-in-out;
}
.copy-button:hover {
background-color: #e9ecef;
border-color: #adb5bd;
}
.copy-button i {
margin-right: 5px;
}
.site-logo {
transition: filter 0.3s ease;
}
[data-theme="dark"] .site-logo {
/* turn black icon white & suppress background */
filter: invert(1) hue-rotate(180deg) brightness(1.2) contrast(1.2);
}
/* Dark mode tweaks for */
[data-theme="dark"] summary {
color: #e0e0e0;
background-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] summary:hover,
[data-theme="dark"] details[open] > summary {
background-color: #3a3a3a;
}
/* Dark mode for auth links */
[data-theme="dark"] .auth-buttons a {
color: #e0e0e0;
}
[data-theme="dark"] .auth-buttons a:hover {
color: #66aaff;
}
/* Dark mode recent post styles */
[data-theme="dark"] .recent-post {
background-color: transparent;
color: #e0e0e0;
}
[data-theme="dark"] .recent-post:hover {
background-color: rgba(255,255,255,0.1);
color: #e0e0e0;
}
[data-theme="dark"] .recent-post::after {
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}
/* Dark mode navigation link */
[data-theme="dark"] .nav-link {
color: #e0e0e0;
background-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link:focus {
background-color: rgba(255, 255, 255, 0.15);
color: #66aaff;
}
/* Dark mode for Options dropdown */
[data-theme="dark"] #OptionsDetails i {
color: #e0e0e0;
}
[data-theme="dark"] #OptionsDetails a {
color: #e0e0e0;
text-decoration: none;
}
[data-theme="dark"] #OptionsDetails a:hover {
color: #66aaff;
}
[data-theme="dark"] #OptionsDetails .badge {
background-color: #444;
color: #e0e0e0;
}
[data-theme="dark"] #OptionsDetails hr {
border-top-color: rgba(255, 255, 255, 0.2);
}
/* Dark mode for modals */
[data-theme="dark"] .rule-modal-content,
[data-theme="dark"] .topic-modal-content {
background-color: #2a2a2a;
color: #e0e0e0;
border-color: #444;
}
[data-theme="dark"] .modal-instructions,
[data-theme="dark"] .modal-form {
color: #e0e0e0;
}
[data-theme="dark"] .rule-modal-content a,
[data-theme="dark"] .topic-modal-content a {
color: #66aaff;
}
[data-theme="dark"] .rule-modal-content a:hover,
[data-theme="dark"] .topic-modal-content a:hover {
color: #aadaff;
}
/* Refine dark mode beta selected button */
[data-theme="dark"] .button-link-beta-selected {
background-color: #007bff;
color: #ffffff;
}
[data-theme="dark"] .button-link-beta-selected:hover,
[data-theme="dark"] .button-link-beta-selected:focus {
background-color: #3399ff;
}
/* Dark mode heading */
[data-theme="dark"] h1 {
color: #e0e0e0;
}
[data-theme="dark"] h1 a,
[data-theme="dark"] h1 a:visited {
color: #e0e0e0;
}
[data-theme="dark"] h1 a:hover {
color: #66aaff;
}
/* Dark mode footer links */
[data-theme="dark"] #footer a {
color: #e0e0e0;
}
[data-theme="dark"] #footer a:hover {
color: #66aaff;
}
/* Dark mode topic links */
[data-theme="dark"] .topic-link-big {
background-color: #333;
border-color: #555;
color: #e0e0e0;
}
[data-theme="dark"] .topic-link-big:hover {
background-color: #444;
border-color: #66aaff;
color: #e0e0e0;
}
/* Dark mode premium welcome panel */
[data-theme="dark"] .welcome-premium {
background-color: #2c2c2c;
border-color: #444;
color: #e0e0e0;
}
[data-theme="dark"] .welcome-premium a {
color: #66aaff;
}
[data-theme="dark"] .welcome-premium a:hover {
color: #aadaff;
}
/* Dark mode rule library table */
[data-theme="dark"] #rule-library {
border-color: #444;
}
[data-theme="dark"] #rule-library th {
background-color: #444;
color: #e0e0e0;
border-bottom-color: #555;
}
[data-theme="dark"] #rule-library td {
background-color: #333;
color: #e0e0e0;
border-bottom-color: #555;
}
[data-theme="dark"] #rule-library tr:hover {
background-color: #3a3a3a;
}
/* Dark mode H2 */
[data-theme="dark"] h2 {
color: #e0e0e0;
}
[data-theme="dark"] h2 a,
[data-theme="dark"] h2 a:visited {
color: #e0e0e0;
}
[data-theme="dark"] h2 a:hover {
color: #66aaff;
}
/* Dark mode create panel */
[data-theme="dark"] .create-panel {
background-color: #000;
border: 2px dashed #66aaff;
color: #66aaff;
}
[data-theme="dark"] .create-panel:hover {
background-color: #111;
border-color: #66aaff;
}
/* Dark mode error messages */
[data-theme="dark"] .error-message,
[data-theme="dark"] .error-message-sidebar {
background-color: #522c2c;
color: #ffaaaa;
border-left-color: #e53935;
}
[data-theme="dark"] .error-message:hover,
[data-theme="dark"] .error-message-sidebar:hover {
background-color: #4a2424;
color: #ffcccc;
border-left-color: #e53935;
}
/* Dark mode focus missing */
[data-theme="dark"] .focus-missing {
background-color: #522c2c;
color: #ffaaaa;
border-bottom-color: #e53935;
}
[data-theme="dark"] .focus-missing:hover {
background-color: #4a2424;
color: #ffcccc;
}
/* Dark mode Tabs component */
[data-theme="dark"] #tabs {
border-color: #444;
}
[data-theme="dark"] #tabs ul li a {
background-color: #333;
border: 1px solid #555;
color: #e0e0e0;
}
[data-theme="dark"] #tabs ul li a:hover {
background-color: #444;
color: #66aaff;
border-color: #66aaff;
}
[data-theme="dark"] #tabs ul li.ui-tabs-active a {
background-color: #007bff;
border-color: #007bff;
color: #fff;
}
[data-theme="dark"] #tabs div {
background-color: #222;
color: #e0e0e0;
}