/* Copyright (C) 2022 Hoggan Cybersecurity Consulting, LLC - All Rights Reserved
 * 
 * Author: Stuart Hoggan
 * 
 */

@charset "ISO-8859-1";

:root {
	--blue: #2196f3;
	--red: red;
	
	--warning-text: #ff9900;
    --warning-text-background: rgba(255, 153, 0, 0.3);
    --error-text: #ff0000;
    --error-text-background: rgba(255, 0, 0, 0.3);
    
    --green-text: rgb(0, 189, 0);
    --green-text-background: rgba(0, 189, 0, 0.3);
}

html{
	font-family: Verdana, Helvetica, sans-serif
}

body {
	margin: 0px;
	min-height: 100vh;
}

/* Style the header */
.header {
  	padding: 10px;
  	background-color: white;
}

h1.header {
  	font-size: 40px;
	text-align: left;
	padding-top: 0px;
	padding-bottom: 0px;
	display: inline;
	vertical-align: 45%;
}

/* BELOW - formatting for the footer to stay at the bottom */
.page-container {
  position: relative;
  min-height: 100vh;
}

.content-wrap {
  padding-bottom: 3rem;    /* must match Footer height */
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 3rem;  
	/* style footer */
	background-color: #808080;
	color: white;
	text-align: center;
}

.footer-shadow {
	text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black;
}

.footer-links {
	font-weight: bold;
}
/* ABOVE - formatting for the footer to stay at the bottom */

/* BELOW - formatting for the header nav */
.ul-header {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #535353;
}

.li-header {
 	float: left;
}

.li-header a, .dropbtn {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

.li-header a:hover, .dropdown:hover .dropbtn {
 	background-color: grey;
}

.li-header.dropdown {
 	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #e0e0e0;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
	display: block;
}
.sticky-nav {
	position: sticky; /* Makes it sticky */
    top: 0;           /* Sticks to the top of the viewport */
    background-color: white; 
    /* color: white; */
    /* padding: 10px; */
    z-index: 1000;     /* Ensures it stays above other content */
}

/* ABOVE - formatting for the header nav */

/* BELOW - formatting for custom toggle switch */
/* The switch - the box around the slider */
.switch {
	top: 3px;
	line-height: 1.5;
  position: relative;
  display: inline-block;
  width: 45px;
  height: 18px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
	border-radius: 12px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #808080;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
	border-radius: 10px;
  position: absolute;
  content: "";
  height: 12px;
  width: 17px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(19px);
}
/* ABOVE - formatting for custom toggle switch*/

.body-content {
	margin-left: 40px;
	margin-right: 40px;
	word-wrap: break-word;
}

.twoColTable {
	width: 300px;
	text-align: center;
}

.threeColTable {
	width: 500px;
	text-align: center;
}

.customFileSelect {
	border-left: solid 20px white;
}

input[type=submit] {
	margin-left: 200px;
	margin-top: 25px;
	margin-bottom: 25px;
	font-size: 15px;
	font-weight: bold;
}

/* Container holding the image and the text */
.body-context-background-image{
	background-image: url("homePageLogo_BlackBack_PNG.png"), url("machine_learning.jpg");
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: 780px, cover;
	display: flex;
    justify-content: center;
    height: 741px;
}
.index-center-text{
    height: 408px;
    width: 1000px;
    text-align: center;
    color: white;
    margin-top: 130px;
    background-color: rgba(105, 105, 105, 0.8);
    border: solid 10px black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    text-shadow: 2px 2px 2px black;
    font-size: 1.50em;
    flex-direction: column;
    padding: 0px 20px;
}

.index-center-text p{
	line-height: 2;
}


.body-content-index {
	position: relative;
	color: white;
	font-size:23px;
	text-align: center;
	margin-bottom: 20px;
}

/* Centered text */
.index-centered {
	/* text-align: center; */
	position: absolute;
	top: 36.5%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black;
	background-color: rgba(255,255,255,0.4);
    border-radius: 10px;
    padding: 10px 30px;
    border: solid 5px black;
}

.index-description-btns{
    text-shadow: none;
    text-decoration: none;
    color: white;
    background-color: midnightblue;
    border-radius: 5px;
    padding: 5px 60px;
}
.index-description-btns:hover{
	color: midnightblue;
    background-color: white;
}

.index-image{
	filter: brightness(50%);
	width: 63%;
}

.bg-c-black {
	background-color: black;
}

.border-bottom-black {
	border-bottom: solid #808080;
}

.h4{
	margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.f-right{
	float: right;
}

.d-block{
	display: block;
}

.d-none {
	display: none !important;
}

.d-flex {
	display: flex;
}

.d-inline-block {
	display: inline-block;
}

.flex-row{
	flex-direction: row;
}

.flex-col{
	flex-direction: column;
}

.flex-col-1 {
	flex-grow: 1;
}
.flex-col-2 {
	flex-grow: 2;
}
.flex-col-3 {
	flex-grow: 3;
}
.flex-col-4 {
	flex-grow: 4;
}
.flex-col-5 {
	flex-grow: 5;
}
.flex-col-6 {
	flex-grow: 6;
}
.flex-col-7 {
	flex-grow: 7;
}
.flex-col-8 {
	flex-grow: 8;
}
.flex-col-9 {
	flex-grow: 9;
}
.flex-col-10 {
	flex-grow: 10;
}

.flex-center {
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.flex-center-row {
	justify-content: center;
	flex-direction: row;
	align-items: center;
}

.flex-space-between {
	justify-content: space-between;
}

.flex-space-around {
	justify-content: space-around;
}

.flex-basis-260 {
	flex-basis: 260px;
}

.width-100 {
	width: 100%;
}
.width-90 {
	width: 90%;
}
.width-80 {
	width: 80%;
}
.width-70 {
	width: 70%;
}
.width-30 {
	width: 30%;
}
.width-20 {
	width: 20%;
}
.width-10 {
	width: 10%;
}

.width-383 {
	width: 383px;
}

.right-0 {
	right: 0px;
}

.text-red {
	color: var(--red);
}
.text-red:hover {
	background-color: var(--red);
	color: white;
}

.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}

.bg-grey1 {
	background-color: #707070;
}
.bg-grey2 {
	background-color: #8d8d8d;
}
.bg-grey3 {
	background-color: #9b9b9b;
}
.bg-grey4 {
	background-color: #c1c1c1;
}
.bg-grey5 {
	background-color: #d4d4d4;
}
.bg-custom-blue {
	background-color: var(--blue);
}

.rule-options-header {
	text-align: center;
    border-bottom: solid gray;
    margin: 0;
    padding-bottom: 10px;
}

.rule-options-bg {
    background: lightgrey;	
}

.rule-options {
    line-height: 180%;
    margin: 0;
    padding: 0;
}

.rule-options li {
	list-style-type: none;
	padding: 0 0 0 8px;
}

.rule-options-li:hover {
	background: darkgrey;
	cursor: pointer;
}

.text-alight-center {
	text-align: center;
}

.margin-0 {
	margin: 0 0 0 0 !important;
}
.margin-10 {
	margin: 10px;
}

.padding-10 {
	padding: 10px;
}

.padding-left-30 {
	padding-left: 30px;
}

.pointer:hover {
	cursor: pointer;
}

.not-allowed {
	cursor: not-allowed !important;
}
.margin-top-0{
	margin-top: 0px;
}
.margin-top-10{
	margin-top: 10px;
}
.margin-top-20 {
	margin-top: 20px;
}

.margin-left-10 {
	margin-left: 10px;
}
.margin-bottom-10 {
	margin-bottom: 10px;
}
.margin-bottom-0 {
	margin-bottom: 0px;
}
.margin-right-10 {
	margin-right: 10px;
}

.margin-bottom-20 {
	margin-bottom: 20px;
}

.margin-tb-10 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.text-align-center {
	text-align: center;
}
.text-align-right {
	text-align: right;
}

.vertical-align-top {
	vertical-align: top;
}

.country-warning {
    color: darkorange;
    background: cornsilk;
    width: 293px;
}
.orange-warning {
    color: darkorange;
    background: cornsilk;
}

#form-container h4.form-header {
	background-color: lightgrey;
}

.note-size {
	font-size: 0.75em;
}

.table-data-link {
	text-decoration: underline;
}
.table-data-link:hover {
	text-decoration: underline;
	cursor: pointer;
	color: var(--blue);
	text-shadow: 0px 0px 2px white;
	background-color: #e4e4e4;

}

#key-algo-size-cart td:first-child{
	padding-left: 0;
}

.table-data-header {
	background-color: #b6b6b6;
	border-top: solid lightgrey 10px;
}

.border-top-grey {
	border-top: solid lightgrey 2px;
}

.spacer {
	color: lightgrey;
	text-decoration: underline;
	text-decoration-color: lightgrey;
}

.labelExistsCheckBox:hover {
	cursor: pointer;
}

.fw-bolder {
	font-weight: 800;	
}
.fw-normal {
	font-weight: normal;
}
.fw-bold {
	font-weight: bold;
}

.opacity-disabled {
	opacity: 0.7;
}

.length-condition input{
	width: 70px;
}

#file-content ul{
	margin-top: 0;
}

#edit-rule-set {
	cursor: pointer;
	background-color: var(--blue);
	color: white;
	padding: 5px;
	text-decoration: none;
}
#edit-rule-set:hover {
	background-color: orange;
	color: black;
}

#fileNameBanner {
	background-color: orange;
	color: black;
	text-align: center;
    font-size: x-large;
}

.align-items-start {
	align-items: start;
}

.td-divider{
	background: black;
	padding: 2px !important;
}

#ruleSetResult #singleTable, #ruleSetResult #singleTable th, #ruleSetResult #singleTable td{
	border: 1px solid darkgrey;
	padding: 5px;
}

.keyUsageFlags {
	height: 87px;
}

.resultBorder{
	border-top: solid darkgrey 2px;
	margin-top: 20px;
}

.padding-bottom-30 {
	padding-bottom: 30px;
}

.add-ca{
	margin-top: 20px;
}

.add-inter-ca{
	margin-left: 30px;
}

/*----------BELOW Cookie Consent CSS -----------*/
#cookieConsentContainer{
	position: fixed;
    z-index: 1;
    bottom: 0;
    background-color: lightgray;
    padding: 0px 10px 10px 10px;
    border: solid darkgray 10px;
    width: 400px;
    left: 50%;
    transform: translate(-50%);
}
#cookieConsentContainer #consentBtnContainer {
	display: flex;
	width: 100%;
	justify-content: center;
}
#cookieConsentContainer #consentBtnContainer #consentBtn{
	padding: 5px;
    background-color: black;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
#cookieConsentContainer #consentBtnContainer #consentBtn:hover{
	background-color: white;
	color: black;
	box-shadow: 3px 3px 5px 0px black;
}
#cookieConsentContainer .btn {
	white-space: nowrap;
	margin-left: 10px;
}
/*----------ABOVE Cookie Consent CSS -----------*/

/*----------BELOW Header Login CSS -----------*/
.premium-key-img {
	cursor: pointer;
	padding: 4px 5px;
	margin-right: 20px;
	background-color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: 0.2s ease-in-out;
    
}
.premium-key-img:hover{
	/* padding-top: 10px;
	filter: invert(95%);
	background-color: #0D0D0D;
	box-shadow: 0px 0px 0px 0px white;
	*/
	transform: scale(1.15);
}

#login_account_container {
	display: flex;
	height: 38px
}

#headerLogin {
    background: lightblue;
    padding: 5px 20px;
    margin-right: 5px;
    margin-top: 5px;
    font-weight: bold;
    cursor: pointer;
    border: solid black 2px;
    border-radius: 5px;
}
#headerLogin:hover{
	background: black;
	color: lightblue;
}

#headerSignUp {
	color: inherit;
    background: var(--warning-text-background);
    padding: 5px 20px;
    margin-right: 5px;
    margin-top: 5px;
    font-weight: bold;
    border: solid black 2px;
    border-radius: 5px;
    text-decoration: none;
}
#headerSignUp:hover{
	background: black;
	color: orange;
}

#headerAccount {
	position: relative;
	display: inline-block;
	margin-right: 20px;
}

#accountDropdownBtn {
	background-color: rgb(144, 255, 142);
    color: black;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border: solid black;
    border-top: 0px;
    border-radius: 0px 0px 10px 10px;
    min-width: 132px;
}

#accountDropdownContent {
	display: none;
	position: absolute;
 	background-color: #f1f1f1;
	min-width: 132px;
	width: 100%;
 	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-align: center;
}

#accountDropdownContent a {
	color: black;
	background-color: rgb(144, 255, 142);
	font-size: 12px;
	padding: 7px 12px;
	text-decoration: none;
	display: block;
}
#accountDropdownContent a:hover {
	background-color: #ddd;
	font-weight: bold;
}

#headerAccount:hover #accountDropdownContent {
	display: block;
}
#headerAccount:hover #accountDropdownBtn {
	background-color: black;
	color: rgb(144, 255, 142);
	border-color: rgb(144, 255, 142);
	border-radius: 0px;
}
/*----------ABOVE Header Login CSS -----------*/

/* ------------Below here -- Modal Container Style---------- */
/* The Modal (background) */
#modalContainer {
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
#modalContainerContent {
    background-color: white;
    margin: 5px auto;
    /* 15% from the top and centered */
    border: solid grey;
    width: 400px;
    /* Could be more or less, depending on screen size */
}

.modal-content{
	padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 16px;
    margin-top: 16px;
}

#loginUsername,
#loginPassword {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}

.border-right-0{
	border-right: 0px !important;
}

#passwordEye {
    font-size: 22px;
    padding: 2px 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    border-left: 0px;
    cursor: pointer;
}
#passwordEye:hover {
	background-color: lightgrey;
	font-weight: bold;
}

.color-red {
	color: red;
}

.modal-submit-btn {
    background-color: lightblue;
    color: black;
    padding: 14px 20px;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    font-size: 17px !important;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: 0.2s;
}
.modal-submit-btn:hover {
    background-color: black;
    color: lightblue;
}

.container-cancel {
    margin-top: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.cancel-modal-btn {
    border: none;
    padding: 10px 18px;
    background-color: var(--error-text-background);
    cursor: pointer;
    transition: 0.2s;
}
.cancel-modal-btn:hover {
    background-color: rgba(255, 0, 0, 0.7);
}

#forgot-password-link{
	float: right;
    margin-top: 16px;
    color: blue;
    text-decoration: underline;
    font-size: 15px;
    cursor: pointer;
}

.line-divider {
	margin-top: 5px;
	border-bottom: 2px black solid;
}

.container-login-signup{
	margin-top: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#login-signup-link {
	float: right;
    padding: 10px 18px;
    background-color: var(--warning-text-background);
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
#login-signup-link:hover {
	background-color: rgba(255, 153, 0, 0.7);
}

/* The Close Button */
#closeModalBtn {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 15px;
    top: -15px;
    color: #800000;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 30px;
    font-weight: bold;
    transition: 0.2s;
}

/* Close button on hover */
#closeModalBtn:hover,
#closeModalBtn:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate-modal {
    -webkit-animation: animatezoom 0.5s;
    animation: animatezoom 0.5s
}

@-webkit-keyframes animatezoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}
#modalHeader {
	position: relative;
    padding-top: 30px;
    text-align: center;
    margin: 24px 0 12px 0;
}
/* --------------Above here -- Main Modal Style------------- */

/* --------------Below here -- Login Page Style------------- */
/* this style section pulls from the login modal style a bit*/
#loginPage{
	width: 600px;
}
#loginPageUsername,
#loginPagePassword {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}

#forgot-password-link-page{
	float: right;
    margin-top: -10px;
    color: blue;
    text-decoration: underline;
    font-size: 15px;
    cursor: pointer;
}
/* --------------Above here -- Login Page Style------------- */

/* --------------Below here -- SignUp Page Style------------- */
#accountSignUp{
    width: 600px;
}

#signUpUsername,
#signUpEmail,
#signUpPassword,
#signUpPasswordRepeat {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}

.line-divider-signUp {
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 2px grey solid;
}

.signUp-submit-btn {
    background-color: var(--green-text-background);
    color: black;
    padding: 14px 20px;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    font-size: 17px !important;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: 0.2s;
}
.signUp-submit-btn:hover {
    background-color: black;
    color: lightgreen;
}
/* --------------Above here -- SignUp Page Style------------- */

/* --------------Below here -- Waiting Spinner Style------------- */
.waiting {
	display: flex;
    flex-direction: column;
    align-items: center;
}
.waiting-spinner {
	border: 8px solid #dfefef;
	border-radius: 50%;
	border-top: 8px solid #3498db;
	width: 40px;
	height: 40px;
	animation: spin .7s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* --------------Above here -- Waiting Spinner Style------------- */

/* --------------Below here -- Account Information Style------------- */
#accountInfoMainContainer{
	width: 800px;
}

#accountInfoSubContainer{
	border: solid black 2px;
	padding: 10px;
}

#accountInfoUsername{
	border-bottom: solid grey 1px;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.accountInfoSubDiv{
	margin-bottom: 20px;
}

#accountInfoBtns{
	display: flex;
    justify-content: space-around;
    margin-top: 30px;
}
#accountInfoBtns .accountInfoBtn{
	cursor: pointer;
    padding: 5px;
    border-radius: 10px;
    font-weight: bold;
    border: solid gray 2px;
}

#accountInfoBtns #managePayment{
    background-color: lightblue;	
}
#accountInfoBtns #managePayment:hover{
    background-color: blue;	
    color: white;
}

#accountInfoBtns #cancelPremium{
    background-color: lightsalmon;	
}
#accountInfoBtns #cancelPremium:hover{
    background-color: darkorange;
    color: white;
}

#accountInfoBtns #deleteAccount{
    background-color: lightcoral;	
}
#accountInfoBtns #deleteAccount:hover{
    background-color: red;	
    color: white;
}

.isPayingActive {
	background-color: forestgreen;
	color: white;
	border-radius: 2px;
	padding-left: 2px;
    padding-right: 2px;
}
.isPayingInactive {
	background-color: red;
	color: white;
	border-radius: 2px;
	padding-left: 2px;
    padding-right: 2px;
}

.accountEditBtn{
	color: blue;
    background-color: lightgray;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
}
.accountEditBtn:hover{
	font-weight: bold;
}

/* --------------Above here -- Account Information Style------------- */

/* --------------Below here -- Change Email Style------------- */
#changeEmailMainContainer{
	width: 600px;
}

#changeEmailSubContainer{
	border: solid black 2px;
	padding: 10px;
}

#changeEmailUsername{
	border-bottom: solid grey 1px;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

#newEmail {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}

.line-divider-change-email{
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 2px grey solid;
}

.change-email-submit-btn{
	background-color: var(--green-text-background);
    color: black;
    padding: 14px 20px;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    font-size: 17px !important;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: 0.2s;
}
.change-email-submit-btn:hover {
    background-color: black;
    color: lightgreen;
}
/* --------------Above here -- Change Email Style------------- */

/* --------------Below here -- Change Password Style------------- */
#changePasswordMainContainer{
	width: 600px;
}

#changePasswordSubContainer{
	border: solid black 2px;
	padding: 10px;
}

#changePasswordUsername{
	border-bottom: solid grey 1px;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

#changePasswordOld,
#changePasswordNew,
#changePasswordNewRepeat {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}

.line-divider-change-password{
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 2px grey solid;
}

.warning-change-note {
	background-color: lightsalmon;
	color: black;
}

.change-password-submit-btn{
	background-color: var(--green-text-background);
    color: black;
    padding: 14px 20px;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    font-size: 17px !important;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: 0.2s;
}
.change-password-submit-btn:hover {
    background-color: black;
    color: lightgreen;
}
/* --------------Above here -- Change Password Style------------- */

/* --------------Below here -- Forgot Password Style------------- */
#forgotPasswordPage{
	width: 600px;
}
#forgotPasswordUsername{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}

.line-divider-forgot-password{
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 2px grey solid;
}

.warning-forgot-note {
	background-color: lightsalmon;
	color: black;
}

.error-forgot-note {
	color: red;
}

.forgot-password-submit-btn {
	background-color: var(--green-text-background);
    color: black;
    padding: 14px 20px;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    font-size: 17px !important;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: 0.2s;
}
.forgot-password-submit-btn:hover {
    background-color: black;
    color: lightgreen;
}
/* --------------Above here -- Forgot Password Style------------- */

/* --------------Below here -- Security Code Style------------- */
#securityCodePage{
	width: 600px;
}
#resetPasswordCode{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}

.code-num{
    width: 60px;
    padding: 12px 20px;
    margin: 8px 5px;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
    font-weight: bold;
    font-size: medium;
}

.code-num::-webkit-outer-spin-button,
.code-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.line-divider-security-code{
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 2px grey solid;
}

.warning-reset-note {
	/*background-color: lightsalmon; */
	color: red;
	}

.error-reset-note {
	color: red;
}

.security-code-submit-btn {
	background-color: var(--green-text-background);
    color: black;
    padding: 14px 20px;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    font-size: 17px !important;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: 0.2s;
}
.reset-password-code-submit-btn:hover {
    background-color: black;
    color: lightgreen;
}

.security-code-box-size {
	font-size: 25px;
	field-sizing: content;
    min-width: 90px; /* Prevents the box from collapsing entirely when empty */
}

/* --------------Above here -- Reset Password Code Style------------- */

/* --------------Below here -- Reset Password Style------------- */
#resetPasswordPage{
	width: 600px;
}
#resetPassword,
#resetPasswordRepeat{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}

.line-divider-reset-password{
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 2px grey solid;
}

.error-reset-note {
	color: red;
}

.reset-password-submit-btn {
	background-color: var(--green-text-background);
    color: black;
    padding: 14px 20px;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    font-size: 17px !important;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: 0.2s;
}
.reset-password-submit-btn:hover {
    background-color: black;
    color: lightgreen;
}
/* --------------Above here -- Reset Password Style------------- */

/* --------------Below here -- App Tools Style------------- */
.tools-container {
	width: 800px;
	margin-bottom: 70px;
}

.tools-dl .dt-level1{
	background-color: lightblue;
	
	display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
	
	padding: 10px;
	margin-bottom: 0;
}

.tools-dl .dl-level2{
	margin: 0;
}

.tools-dl .dt-level2{
    font-size: 1.10em;
    font-weight: bold;
    padding: 5px;
}

.tools-dl .dt-level2 a{
	text-decoration: none;
}
.tools-dl .dt-level2 a:hover{
	text-decoration: underline;
}

.tools-dl .dd-level2{
	padding: 10px;
}
/* --------------Above here -- App Tools Style------------- */

/* --------------Below here -- Pricing Style------------- */
.pricing-container {
	width: 900px;
	margin-bottom: 70px;
}

.pricing-table{
	width: 100%;
	border-spacing: 0;
}

.pricing-table th {
	text-align: left;
}

.pricing-table th.header-row {
	border-bottom: solid 1px black;
	padding: 10px;
}

.pricing-table th.membership {
	background-color: #EDF3F9;
	padding: 10px;
}

.pricing-table tr dl {
	margin: 10px;
}

.pricing-table td.data-row{
	border-bottom: solid 1px lightgrey;
	padding: 10px;
}

.pricing-table tr .col-1 {
	width: 60%;
}
.pricing-table tr .col-2,
.pricing-table tr .col-3 {
	width: 20%;
	background-color: #EDF3F9;
	text-align: center;
}

.pricing-table .premium-price{
	background-color: #0094FF;
	color: white;
	border-radius: 10px;
    padding: 5px;
    border: solid 5px white;
    font-size: 1.10em;
    text-align: center;
    transition: 0.2s;
    cursor: pointer;
}
.pricing-table .premium-price:hover{
	color: #0094FF;
	background-color: white;
    border: solid 5px #0094FF;
}

.pricing-table .free-price{
	background-color: lightgrey;
	color: black;
	border-radius: 10px;
    padding: 5px;
    border: solid 5px white;
    font-size: 1.10em;
    text-align: center;
}
/* --------------Above here -- Pricing Style------------- */

.h4-border-top{
	border-top: solid grey;
    margin-top: 12px;
    padding-top: 1.33em;
}

/* --------------Below here -- Certificate Attribute Validation Bulk Style------------- */
#rulsesetBulkContainer_parent{
	display: grid;
}

#rulesetBulkContainer{
	justify-self: center;
	width: 1000px;
	margin-bottom: 20px;
}
#rulesetBulkContainer .no-margin{
	margin: 0;
}

#rulesetFileData{
	display: flex;
}

#bulkSummary{
	text-align: center;
	border-top: solid darkgrey 1px;
    margin-top: 20px;
}

#summaryHeader {
	margin-top: 20px;
}

#summaryNumbers{
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
}
#summaryNumbers div{
	background-color: lightgrey;
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
}

#bulkTable{
	width: 100%;
	border-top: solid darkgrey 1px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-spacing: 0;
}
#bulkTable tr{
	text-align: center;
}
#bulkTable th{
	background-color: lightsteelblue;
	padding-top: 10px;
	padding-bottom: 10px;
}
#bulkTable tr[even]{
	background-color: rgb(204, 242, 255);
}
#bulkTable tbody tr th:last-child{
	width: 340px;
}
/* --------------Above here -- Certificate Attribute Validation Bulk Style------------- */

/* --------------Below here -- Check Certificate Revocation Style------------- */
.greyColor {
	color: darkgrey;
}

#checkRevocationContainer_parent{
	display: grid;
}

#checkRevocationContainer{
	justify-self: center;
	width: 1000px;
	margin-bottom: 20px;
}
#checkRevocationContainer .no-margin{
	margin: 0;
}

#crlFileData{
	display: flex;
}

#checkRevocationSummary{
	text-align: center;
	border-top: solid darkgrey 1px;
    margin-top: 20px;
}

#checkRevocationTable{
	width: 100%;
	border-top: solid darkgrey 1px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-spacing: 0;
}
#checkRevocationTable tr{
	text-align: center;
}
#checkRevocationTable th{
	background-color: lightsteelblue;
	padding-top: 10px;
	padding-bottom: 10px;
}
#checkRevocationTable tr[even]{
	background-color: rgb(204, 242, 255);
}
#checkRevocationTable tbody tr th:last-child{
	width: 340px;
}
/* --------------Above here -- Check Certificate Revocation Style------------- */

.form-sub-border{
	border: solid lightblue;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.w-800{
	width: 800px;
}

.w-600{
	width: 600px;
}

.submit-btn{
	margin-left: 0 !important;
    font-size: 18px !important;
    width: 106px;
    height: 36px;
}

.yellow-note {
	color: darkorange;
    background: cornsilk;
}

/* --------------Below here -- CSV Example Style------------- */
.csv-example{
	
}
.csv-example .row{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
.csv-example .column{
	margin: 2px;
	padding-bottom: 5px;
	background: grey;
	text-align: center;
	border-radius: 5px;
}
.csv-example img{
	margin-top: 8px;
	width: 80%;
}
/* --------------Above here -- CSV Example Style------------- */

/* --------------Below here -- CSR Bulk Example Style------------- */
#csrBulkExample{
	
}
#csrBulkExample .row{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
#csrBulkExample .column{
	margin: 2px;
	padding-bottom: 5px;
	background: grey;
	text-align: center;
	border-radius: 5px;
}
#csrBulkExample img{
	margin-top: 8px;
	width: 80%;
}
/* --------------Above here -- CSR Bulk Example Style------------- */

/* ---------------DARK MODE CSS----------------- */
.dark-mode-btn {
	font-size: 25px;
    padding: 7px 16px !important;
    cursor: pointer;
}

.dark-mode-btn:hover{
	color: #1e1e1e;
}

.dark-mode {
	background: #181a1b; 
}

/* --------------Below here -- Progress Bar------------- */
.progress {
    margin-bottom: 20px;
}

/* --------------Above here -- Progress Bar------------- */

/* --------------Below here -- Checkbox------------- */
input[type="checkbox"]:disabled + label {
    color: #999; /* Grey color */
    cursor: not-allowed;
}

.checkbox-center {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  gap: 8px;                /* Adds neat spacing between box and text */
}

/* --------------Above here -- Checkbox------------- */

/* --------------Below here -- Contact------------- */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group-textarea {
		  display: flex;
		  align-items: flex-start; /* Aligns the label to the top edge of the textarea */
		  gap: 12px;
		}
		
		.custom-textarea {
		    width: 100%;       /* Makes it responsive */
		    max-width: 500px;  /* Limits the expansion */
		    height: 120px;
		  }

/* --------------Above here -- Contact------------- */