body {
    font-family: 'Segoe UI', 'sans-serif' !important;
    color: black !important;
    font-size: 16px !important;
    height: 100%;
    margin: 0;
}

.cm-content {
    min-height: 100%;
    margin-bottom: 20px;
}

.cm-top-nav-bar {
    background-color: #082640 !important;
    margin-bottom: 0px;
    border: 0px;
    height: 48px;
    border-radius: 0;
}

.cm-menu-bar {
    background-color: #082640 !important;
    margin-top: -168px;
}

.cm-signin {
    color: #ffffff !important;
    font-size: 16px;
    vertical-align: middle;
    margin-top: 20px;
}

.cm-username {
    border-right: solid 1px white;
    padding-right: 6px;
}

.cm-logout {
    vertical-align: middle;
    padding-left: 2px;
}

.placeholder {
    width: 160px !important;
}

.text-white {
    color: white !important;
}

.cm-menu-item {
    color: black !important;
    padding: 0px !important;
}

.cm-menu-item-active {
    background-color: #D0CCCC;
}

.cm-logo, .logo, .pn-logo {
    border-style: none;
    width: auto;
    padding: 8px;
}

.cm-logo {
    margin-left: -10px;
    max-height: 50px;
}

.logo {
    margin-left: 10px;
    max-height: 125px;
}

.pn-logo {
    margin-left: -280px;
    max-height: 65px;
}

.container-center {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 80vh; /* 100 = Full viewport height */
}

.cm-panel-default {
    background: #082640 !important;
    border-radius: 15px;
    padding: 20px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Gradient shadow */
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for shadow */
    max-width: 575px; /* Optional: Set a max-width to prevent it from becoming too wide */
    min-width: 300px;
    width: auto; /* Ensure it takes up the full width up to the max-width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    max-height: 484.844px;
    height: 100%;
    position: absolute;
}

.cm-panel-default .panel-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
}

/* Center text inside the panel */
.cm-panel-default .text-center {
    text-align: center;
    color: white;
    padding-bottom: 10px;
    max-width: 80%;
}

.text-center-activate {
    text-align: center;
    padding-top: 25px;
}

.cm-panel-default:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

.cm-section-heading {
    font-family: 'Segoe UI', 'sans-serif' !important;
    font-size: 22px;
    background-color: transparent;
    border-bottom: 4px solid #082640;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 40px;
    color: white;
}

.p10 {
    padding: 10px;
    margin-bottom: -5px;
    font-weight: normal;
}

.col-sm-3, .col-sm-9 {
    display: block;
    text-align: left; /* Center text */
    width: 100%;
    padding: 10px;
}

.w286 {
    width: 286px;
}

.w120 {
    width: 120px;
}

.w200 {
    width: 300px;
}

.mr250 {
    margin-right: 250px;
}

.mt100 {
    margin-top: 100px;
}

.mt200 {
    margin-top: 200px;
}

.mt20 {
    margin-top: 20px;
    width: auto;
    min-width: 575px;
}

.test-end .mt-3 {
    margin-top: 0px;
}

.mt40 {
    margin-top: 40px;
}

.button-container {
    position: absolute;
    bottom: 30px; /* Adjust the distance from the bottom */
    left: 50%;
    transform: translateX(-50%);
    display: block;
    gap: 10px; /* Adjust the gap between buttons */
}

.cm-button-default, .cm-button-default-activate, .cm-button-error, .cm-button-success, .cm-button-danger {
    color: #082640 !important;
    background-color: white;
    border-color: #2e6da4;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.42857143;
    border-radius: 8px;
    user-select: none;
    margin-top: 25px;
    margin-bottom: 20px;
    text-decoration: none;
}

.cm-button-default:hover, .cm-button-default-activate:hover, .cm-button-error:hover, .cm-button-success:hover, .cm-button-danger:hover {
    background-color: #2180a6;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #004578;
}

.cm-button-default .text-end {
    position: absolute; /* Position the buttons absolutely within the panel */
    bottom: 10px; /* Adjust the distance from the bottom */
}

.btn-back-text {
    background: none;
    border: none;
    color: white; /* Bootstrap primary color */
    font-size: 12px;
    padding-left: 20px;
    margin-top: -20px; /* Adjust as needed */
    display: block;
    text-align: center;
    cursor: pointer;
}

.btn-back-text:hover {
    text-decoration: underline;
}

.cm-table {
    background: #082640 !important;
    font-size: 16px;
}

.cm-table th, .cm-table td {
    padding: 10px !important;
}

.cm-table-head th {
    text-align: center;
    background: #082640 !important;
    font-size: 14px;
}

.cm-ellipsis {
    text-align: center !important;
}

.cm-ellipsis a {
    color: white !important;
}

.cm-minus-circle {
    text-align: center;
}

.cm-minus-circle a {
    color: black !important;
}

.cm-link-button {
    cursor: pointer;
}

.cm-link-button:hover {
    cursor: pointer;
    color: #004578 !important;
}

.cm-container {
    margin-left: 80px;
}

.cm-footer, .cm-push {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #082640;
    font-size: 12px !important;
    color: white !important;
    height: 20px;
    line-height: 20px;
}

a.cm-dropdown-option {
    background: transparent !important;
    color: black;
    cursor: pointer;
}

a.cm-dropdown-option:hover {
    background: transparent !important;
    color: #004578 !important;
    cursor: pointer;
}

.mrtop {
    margin-top: 25px !important;
}

.maxwidth {
    width: 1300px !important;
}

.mr420 {
    margin-right: 0 !important;
}

.red-star {
    color: red;
}

.card.p-3 {
    background-color: transparent !important;
}

.subscription-box {
    border: 2px solid #ccc;
    padding: 20px;
    margin: 10px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    max-width: 200px;
    width: 100%;
    border-radius: 8px;
}

.subscription-box:hover, .selected-plan {
    background-color: white;
    color: #082640;
}

.subscription-box.selected-plan h3,
.subscription-box.selected-plan p {
    color: #082640;
}

.subscription-box h3 {
    font-size: 1.0em;
    margin-bottom: 10px;
}

.subscription-box p {
    font-size: 0.7em;
    margin-bottom: 5px;
}

.form-group {
    margin: 2px auto;
    text-align: left;
    max-width: 650px;
    width: 60%;
}

.form-control {
    display: block;
    width: 100%;
    padding: 5px;
    font-size: 1em;
    margin-bottom: 1px;
    border-radius: 8px;
    border: 2px solid #ccc;
    background-color: #082640;
    color: white;
}

.form-control:focus {
    border-color: white;
    background-color: #082640;
    color: white;
}

.form-control::placeholder {
    color: white;
    font-style: italic;
    font-weight: 300;
    opacity: 0.8;
}

label {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
    display: block;
    color: white;
}