body {
    background-color: rgb(250, 250, 250);
}

#root {
    font-family: Roboto, sans-serif;
    line-height: 1.6;
}

#brand .icon {
    width: 73px;
}

#brand h1 {
    font-weight: 700;
}

#brand h3 {
    font-size: 20px;
}

/* navigation */
nav .separator {
    display: inline-block;
    margin: 0 7px;
}

/* font sizes */
h1 {
    font-size: 2.0582em;
}

h2 {
    font-size: 1.618em;
}

h3 {
    font-size: 1.272em;
}

p {
    font-size: 1em;
}

small {
    font-size: .7862em;
}

h1,
h2,
h3 {
    font-weight: 500;
}

p>code,
li>code {
    background-color: #cfcfcf;
    color: black;
    padding: 1px 3px;
    border-radius: 4px;
}

pre {
    background-color: #cfcfcf;
    color: black;
    border-radius: 4px;

}

.post-meta {
    font-size: 0.8em;
    padding: 5px 0;
    margin-top: 0 !important;
}

/* floating and alignments */
.float-right {
    float: right;
}

/* Form containers */
#csrGeneratorContainer, #csrResultContainer,
#caaQueryContainer, #caaResultContainer,
#sslTestContainer, #resultsContainer {
    max-width: 750px;
    margin: 0 auto;
    padding: 20px;
}

#csrGeneratorContainer, #caaQueryContainer, #sslTestContainer {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

#csrResultContainer, #caaResultContainer, #resultsContainer {
    margin-top: 30px;
}

#csrResultContainer {
    display: none;
}

#csrForm, #sslTestForm, #caaQueryForm {
    display: flex;
    flex-direction: column;
}

#csrForm input, #csrForm select, #csrForm button,
#sslTestForm input, #sslTestForm select, #sslTestForm button,
#caaQueryForm input, #caaQueryForm button, #clearResultsButton {
    box-sizing: border-box;
}

#csrForm label, #sslTestForm label, #caaQueryForm label {
    display: block;
    line-height: normal;
    margin-bottom: 7px;
}

#csrForm input, #csrForm select,
#sslTestForm input, #sslTestForm select,
#caaQueryForm input {
    width: 100%;
    padding: 8px;
    margin-top: 9px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#csrForm button, #sslTestForm button, #caaQueryForm button, #clearResultsButton {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#clearResultsButton {
    background-color: #f44336;
}
   
#clearResultsButton:hover {
    background-color: #d32f2f;
}

#csrForm button:hover, #sslTestForm button:hover, #caaQueryForm button:hover {
    background-color: #45a049;
}

#toggleAdditionalFields {
    display: inline;
    margin-bottom: 13px;
    text-align: left;
}


#sslTestForm .radio-group {
    justify-content: center;
}

#sslTestForm .radio-group, 
#csrForm .radio-group {
    display: flex;
    align-items: center;
}

#sslTestForm .radio-group input, 
#csrForm .radio-group input {
    width: auto;
    margin-right: 7px;
}

#sslTestForm .radio-group input:nth-child(3),
#csrForm .radio-group input:nth-child(3) {
    margin-left: 40px;
}

#csrResult {
    margin-top: 40px;
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
}

#closeIcon {
    color: #ccc;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#closeIcon:hover,
#closeIcon:focus,
#closeText:hover,
#closeText:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#closeText {
    float: right;
    color: rgb(204, 62, 62);
}

/* SSL Test Form */
.sslTestResults table {
    width: 100%;
    /* Make the table take up the full width of its container */
    word-break: break-word;
    /* Ensure words break to prevent overflow */
}

.sslTestResults th {
    min-width: 250px;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}

.sslTestResults .ok {
    color: green
}

.sslTestResults .low {
    color: #a86437;
}

.sslTestResults .medium {
    color: #c05600;
}

.sslTestResults .high {
    color: darkred;
}

.sslTestResults .critical {
    color: red;
    font-weight: bold;
}

.sslTestResults {
    width: 750px;
    position: relative;
    display: none;
}

.sslTestResults pre {
    padding: 0;
    background-color: initial;
    position: relative; /* Change to absolute */
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%; /* Ensure it at least fills the container */
    white-space: pre; /* Ensure the content does not wrap */
    overflow: visible; /* Allow content to overflow */
}

.sslTestResults h2 {
    margin-top: 31px;
}

#sslTestContainer {
    margin-top: 31px;
}

.loading-container {
    display: none;
    align-items: center;
    justify-content: center; /* Center horizontally */
    margin-top: 17px;
    width: 100%; /* Ensure it takes the full width of the container */
    background-color: #ffface;
    padding: 13px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.errorContent {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    margin-top: 17px;
    background-color: #ffface;
    padding: 13px 17px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.errorContent p {
    margin: 5px 0;
}

.errorContent p.error {
    color: darkred;
}

#sslTestPoweredBy {
    display:block; 
    margin-top:17px; 
    text-align:center;
}

#sslTestPrivacy {
    display:inline-block; 
    margin-top:31px;
}

/* TestSsl html styles and colors */
.style-black-bg {
    color: white;
    background-color: black;
}

.style-underline-bold {
    text-decoration: underline;
    font-weight: bold;
}

.style-bold {
    font-weight: bold;
}

.style-success {
    color: #008817;
}

.style-purple {
    color: #cd00cd;
}

.style-warning {
    color: #a86437;
}

.style-warning-2 {
    color: #c05600;
}

.style-error {
    color: #e52207;
}

/* CAA query form */
.caaResults {
    width: 710px;
    position: relative;
    display: none;
    background-color: #e7e7e7; /* Grey shaded background */
    padding: 20px;
    border-radius: 5px;
}

.caaResults pre {
    padding: 0;
    background-color: #e7e7e7 !important; /* Grey shaded background */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    white-space: pre;
    overflow: visible;
}

#additionalFields {
    overflow: hidden;
    margin-bottom: 13px;
    max-height: 0;
    transition: max-height 0.5s ease;
}

#additionalFields.expanded {
    max-height: 500px; /* adjust value as needed for full content */
}

.loading-container {
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 17px;
    width: 100%;
    background-color: #ffface;
    padding: 13px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.errorContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 17px;
    background-color: #ffface;
    padding: 13px 17px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.errorContent p {
    margin: 5px 0;
}

.errorContent p.error {
    color: darkred;
}