/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#main-content .container {
    width: 100%;
    max-width: 100%;
}
h1.main_title {
    display: none;
}

h1 small {
    font-size: 18px;
    color: #888;
    display: block;
    margin-top: 10px;
    line-height: 24px;
}

#wcd_content a {
	text-decoration: none;
}

#wcd_content ul {
    margin: 0 0 1.5em 0em;
}

.mm_wp_compare .clear {
	clear:both;
}
.mm_wp_compare h3.ui-accordion-header {
	margin-bottom: 0;
}

.mm_wp_compare table td {
	border: none; 
}


.mm_wp_compare a[disabled="disabled"] {
    pointer-events: unset;
    cursor: not-allowed;

}
.mm_wp_compare a[disabled="disabled"]:hover {
    cursor: not-allowed;
}


#et-main-area {
    min-height: calc( 100vh - 120px );
}

#post-3414 .et_pb_row {
    max-width: 100% !important;
    width: auto !important;;
}

#post-3414 .et_pb_section {
    padding: 0 0 !important;
}

#wpadminbar #wcd_content {
    margin-top: 32px;
}

#preview_wp_urls {
    background: rgb(245 247 255);
    padding: 20px;
    margin: 0 auto;
    width: 100%;
    height: 500px;
    overflow: scroll;
    display: none;
}

#cta-preview-screenshot form input[type="text"] {
    padding-left: 10px;
}
#cta-preview-screenshot form input[type="submit"]:hover,
#btn-start-change-detection button:hover {
    cursor: pointer;
}

#btn-start-change-detection {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#cta-preview-screenshot  a.cta-button,
#btn-start-change-detection .cta-button {
    margin: 30px auto;
    display: inline-block;
    text-align: center;
    font-size: 24px;
    width: auto;
    line-height: 20px !important;
    background: #00a400;
    color: #fff;
    border-color: #00b600;
    padding: 15px 30px !important;
}

#cta-preview-screenshot #enable-btn-url {
    font-size: 16px;
}

#cta-preview-screenshot #btn-url {
    font-weight: 700;
}

#cta-preview-screenshot  a.cta-button:hover,
#btn-start-change-detection .cta-button:hover {
    background: #0d980d !important;
    border-color: #00a400 !important;
    color: #fff !important;
}

#cta-preview-screenshot .preview_settings {
    background: #eee;
    border: 1px solid #333;
    width: 100%;
    margin: 0 0 10px;
    padding: 20px;
}
#preview_in_progress {
    min-height: 400px;
    text-align: center;
    background: #eee;
}

#preview_screenshot {
    border: 1px solid #aaa;
    color: #333;
    background: #fff;
    font-size: 18px;
    text-align: center;
    margin-top: 30px;
    width: 100%;
    height: 400px;
    overflow: scroll;
    /*background: linear-gradient(#276ECC, #6B91CC);*/
}

#preview_screenshot p {
    margin-top: 20px;
}

#preview_screenshot .dashicons {
    margin-top: 100px;
    top: 60px;
    padding: 10px;
    height: 70px;
    width: 70px;
    color: #276ECC;
    font-size: 50px;
}

.mm_wp_compare .icon-update-detection {
    font-size: 26px;
}




    .progress-bar {
    margin: 0 auto;
    width: 400px;
    height: 20px;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
    display: block;
    height: 14px;
    background: #659cef;
    border-radius: 3px;
    /*transition: width 250ms ease-in-out;*/
    transition: width 20s ease-in-out;
}

#mm_loading {
    width: 100%;
    height: 100vh;
    background-color: #d6d6d670;
    z-index: 120;
    display: none;
    position: fixed;
    /*background-image: url("./../img/loader.gif");
    background-repeat: no-repeat;
    background-position: center;*/
    padding-top: 50vh;
    padding-left: 50vw;
    top: 0;
}

#mm_loading .spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 5px #aaa;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mm_wp_compare h1 {
    font-size: 36px;
    font-weight: 400;
    color: #276DCC;
    padding-bottom: 20px;
    text-align: left;
    margin-bottom: 80px;
    border-bottom: 1px solid;
}

.mm_wp_compare .dashboard h1 {
    text-align: center;
}

.mm_wp_compare ul.wcd-dashboard-list {
    padding-left: 0;
    list-style: none !important;
    margin-top: 40px !important;
    
}  

.mm_wp_compare ul.wcd-dashboard-list li {
    list-style: none;
    margin-left: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.mm_wp_compare ul.wcd-dashboard-list li a {
    color: initial;
}

.mm_wp_compare ul.wcd-dashboard-list li a:hover {
    color: #276ECC;
}

.mm_wp_compare ul.wcd-dashboard-list .dashicons {
    font-size: 44px !important; 
    margin-left: -50px; 
    padding-right: 35px;    
    margin-right: 10px;
    color: #276ECC;
}

.mm_wp_compare table tr th {
    background: #ddd;
    height: 50px;
    font-size: 16px;
    border-width: 0;
}

.mm_wp_compare .search-url-table {
    float: right;
    text-align: right;
    margin-bottom: 20px;
    width: 300px;
}

.mm_wp_compare .ajax-group-urls table tr th {
    background: inherit;
}

.mm_wp_compare #ajax_amount_total_sc {
    display: inline-block;
}

.mm_wp_compare .required-credits .loading
{
    background-color: transparent !important;
}

.mm_wp_compare table.toggle tr:nth-child(even) {
    background-color: #f2f2f2;
}


.mm_wp_compare #message-sc-buttons {
    border: 1px solid #ddd;
    margin-top: 10px;
    border-left: 5px solid red;
    padding: 10px;
    background: #eee;
    color: red;
}

.mm_wp_compare,
.mm_message_container {
    max-width: 100%;
    width: auto;
    margin-left: 270px;
    margin-right: 20px;
}
.mm_wp_compare {
    /*min-height: calc( 100vh - 200px );*/
}
.mm_wp_compare a:hover {
    cursor:pointer;
    color: #276ECC;
}

.mm_wp_compare a.gbp-button--primary:hover {
    color: #ffffff !important;
}

.mm_wp_compare.mm_no_account {
    max-width: 500px;
    margin: 30px auto;
    text-align: center;
    padding: 20px;
}
.mm_wp_compare.mm_no_account h1 {
    margin-top: 0;
    margin-bottom: 15px;
    padding: 6px 0;
    border-bottom: 1px solid #ccc;
    font-weight: 400;
    font-family: "Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #058;
}

.mm_wp_compare .dashboard {
    max-width: 1280px;
    margin: 0 auto;
}

.mm_wp_compare .dashboard .box-plain,
.mm_wp_compare .website-settings .box-plain {
    padding: 20px 20px;
    display:block;
    margin-bottom: 3px;
}

.mm_wp_compare .dashboard .box {

}

.mm_wp_compare .upgrade-plans {
    display: inline-block;
    background: #eee;
    padding: 10px;
    width: 33%;
    margin: 0;
    border: 1px solid #aaa;
}

.mm_wp_compare .upgrade-plans ul {
    padding-left: 0 !important;
}

.mm_wp_compare .upgrade-plans li {
    list-style: none;
    margin-left: 0;
}

.mm_wp_compare .plan-check {
    font-size: 24px;
    color: #666 !important;
}
.mm_wp_compare .plan-check.green {
    color: green !important;
}

.mm_wp_compare .plan-container {
    display: flex;
    margin: 0 auto;
}

.mm_wp_compare .plan-box {
    font-size: 16px;
    line-height: 28px;
    background: rgba(74, 157, 255, 0.18);
    border: 1px solid #2d93ff;
    width: calc(50% - 10px);
    padding: 20px;
    float:left;
}
.mm_wp_compare .plan-box p {
    padding-bottom: 1em !important;
}

.mm_wp_compare .plan-box.free{
    background: #eee;
    border: 1px solid #aaa;
    margin-right: 20px;
}

.mm_wp_compare .plan-box ul li{
    list-style: none;
    text-align: center;
    margin-left: 0;
    font-size: 18px;
}

.mm_wp_compare .plan-box ul {
    text-align: left;
    padding-left: 0 !important;
    width: auto;
    margin: 0 auto;
}

.mm_wp_compare .dashboard .box.highlight{
    background: #276ECC;
    color: #fff;
    border-left: none;
    padding-left: 25px;
}


.mm_wp_compare .dashboard .box small {
    font-size: 14px;
    font-weight: 400;
}

.mm_wp_compare .dashboard .box.last {
    margin-right: 0;
}

.mm_wp_compare .dashboard .box:hover {

}

.mm_wp_compare .box-half,
.mm_wp_compare .box-full {
    margin: 10px auto;
    padding: 20px;
    width: calc(50% - 10px);
}

.mm_wp_compare .box-half:nth-child(odd) {
    margin-right: 20px;
}

.mm_wp_compare .box-half.bg,
.mm_wp_compare .box-full.bg {
    background: rgba(12,113,195,0.05);
    border: 1px solid #276ECC;
    border-radius: 5px;
}

.mm_wp_compare  .box-half {
    float:left;
}

.mm_wp_compare .dashboard .box-full {
    width: 100% !important;
}

.mm_wp_compare .dashboard .box-half.usages {
    background: rgb(246, 250, 254);
}


.mm_wp_compare .dashboard .box-half.no-border {
    border: none;
    padding-left: 0;
}

.mm_wp_compare .dashboard .box-half.last {
    margin-right: 0;
}

.mm_wp_compare .dashboard .box-half hr{
    margin-top:5px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-bottom: 0;
}

.form-row{
    padding: 10px;
}
.form-row.bg {
    /*background: #eee;*/
}
.form-row label{
    margin-top: 0 !important;
}

.mm_wp_compare.mm_no_account .dashicons-warning {
    height: 70px;
}

.mm_wp_compare.mm_no_account .dashicons-warning:before {
    font-size: 50px;
}

.mm_wp_compare.mm_no_account p {
    font-size: 16px;
    line-height: 22px;
}
.mm_wp_compare .html-title {
    font-weight: 700;
}

.mm_wp_compare input[type="text"],
.mm_wp_compare input[type="number"],
.mm_wp_compare input[type="time"],
.mm_wp_compare select,
.mm_wp_compare textarea {
    border-radius: 5px;
    min-width: 200px;
    border: 1px solid #aaa;
    line-height: 28px;
    padding: 6px 12px;
    font-size: 16px;
}

.mm_wp_compare input[type="time"] {
    min-width: initial;
}

.mm_wp_compare select{
    padding: 10px 12px;
}

.mm_wp_compare textarea {
    border-radius: 5px;

}
.mm_wp_compare input[type="number"].threshold {
    min-width: 70px;
    max-width: 100px;
}

.mm_wp_compare td,
.mm_wp_compare th {
    padding: 10px;
}

.mm_wp_compare .pagination {
    text-align: center;
}

.mm_wp_compare .pagination_container button[disabled]{
    background: #fff !important;
}

.mm_wp_compare .link {
    color: #276ECC;
}
.mm_wp_compare .link:hover {
    cursor: pointer;
    color: #084ccc
}

.mm_wp_compare .accordion table {
    border: none !important;
}

.mm_wp_compare td.is-difference {
    text-align: center;
    background: darkred;
    color: #fff;
    border-bottom: 1px solid #fff;
}

.mm_wp_compare td.no-difference {
    text-align: center;
    background: darkgreen;
    color: #fff;
    border-bottom: 1px solid #fff;
}

.mm_wp_compare hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mm_wp_compare .image1,
.mm_wp_compare .image2,
.mm_wp_compare .comp_image {
    width: 32%;
    float: left;
}

.mm_wp_compare .image1 img,
.mm_wp_compare .image2 img,
.mm_wp_compare .comp_image img {
    border: 1px solid #eee;
    padding: 2px;
    width: 100%;
}

.mm_wp_compare input[type="text"] label {
    min-width: 150px;
    display: inline-block;
    margin-top: 10px;
}

.mm_wp_compare ul li {
    list-style: disc;
    margin-left: 15px;
}

/**************
*** ACCORDION
***************/
.mm_wp_compare .mm_accordion_title {
    padding: 0  0;
    position: relative;
    border: 1px solid rgba(12,113,195,0.35);
    background: rgba(12,113,195,0.05);
    border-radius: 5px;

}

.mm_wp_compare .accordion-container {
    position: relative;
   
    margin-bottom: 20px;
}

.mm_wp_compare .hide {
    display: none;
}

h3.ui-accordion-header {
    line-height: inherit;
}

@keyframes move{

    0%
    {
        background-position: 0 50%;
    }

    100%
    {
        background-position: -100px 50%;
    }

}

.mm_wp_compare .animation-enabled {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    width: 50px;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    border-radius: 100%;
    overflow: hidden;
    border: 2px solid #000;
    filter: invert(40%) sepia(9%) saturate(21%) hue-rotate(314deg) brightness(96%) contrast(91%);


}
.mm_wp_compare .animation-enabled.active {
    animation: move 5.1s linear infinite;
    background: url("./../img/sinus.svg");
    background-size: 50px 20px;
    background-position: center;
    background-repeat: repeat-x;
}
.mm_wp_compare .ui-accordion-header.ui-state-hover
/*.mm_wp_compare .ui-accordion-header-active,
.mm_wp_compare .ui-accordion-content*/ {
    background: rgba(255,255,255,0.3)!important;
}

.mm_wp_compare .ui-accordion-content {
    background: #fafafa;
    border-top: 3px solid blue;
}



.mm_wp_compare .mm_accordion_title h3 {
    padding: 20px 20px;
    color: rgba(0, 0, 0, 0.82);
    font-size: 18px;

}

.mm_wp_compare .accordion.checkbox label.checkbox_container {
    margin-bottom: 0;
}

.mm_wp_compare .accordion.checkbox h3 {
    padding: 10px 20px 10px 40px;
}

.mm_wp_compare input[type="checkbox"] {
    transform: scale(1.5);
    margin-right: 15px;
}

.mm_wp_compare .accordion.checkbox .mm_accordion_content {
    font-size: 12px;

}
.mm_wp_compare .accordion.checkbox .checkmark {
    top: 16px;
    left: 10px;
}

.mm_wp_compare .accordion .mm_accordion_content {
    padding: 20px;
    border-top: 1px solid #aaa;
    cursor: default;
}

.mm_wp_compare .accordion .mm_accordion_content table {
    margin-bottom: 0;
}

.mm_wp_compare .accordion .mm_accordion_content.no-padding {
    padding: 0;
}

.mm_wp_compare h3 small {
    font-size: 14px;
}

.mm_wp_compare h2 {
    margin-top: 20px;
    color: #276DCC;
    font-size: 2rem;
}

.mm_wp_compare h2 small {
    font-size: 18px;
    color: #888;

}

/* Modern consistent button styling - all buttons use same height and design */
body .mm_wp_compare .et_pb_button {
    font-size: 16px;
    padding: 12px 24px !important;
    margin: 10px 10px 20px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    border-radius: 10px;
    border: 1px solid #1d4ed8 !important;
    min-height: 44px;
    min-width: 120px;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
    font-weight: 600;
}

body .mm_wp_compare .et_pb_button:hover {
    padding: 12px 24px !important;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

/* Icon colors match button text colors - all states */
.mm_wp_compare .et_pb_button .dashicons.row-icon,
.mm_wp_compare .et_pb_button .dashicons,
.mm_wp_compare .modern-button .dashicons {
    color: inherit !important;
    transition: color 0.3s ease;
}

.mm_wp_compare .et_pb_button:hover .dashicons.row-icon,
.mm_wp_compare .et_pb_button:hover .dashicons,
.mm_wp_compare .modern-button:hover .dashicons {
    color: inherit !important;
}

/* Specific hover states for different button types */
.mm_wp_compare .accordion-container[data-auto_enabled=""] .et_pb_button:hover .dashicons.row-icon {
    color: #1d4ed8 !important;
}

/* Delete/danger buttons icons */
.mm_wp_compare .delete_button .dashicons,
.mm_wp_compare .cancel_button .dashicons,
.mm_wp_compare .et_pb_button.delete_button .dashicons,
.mm_wp_compare .modern-button.danger .dashicons {
    color: #fff !important;
}

.mm_wp_compare .delete_button:hover .dashicons,
.mm_wp_compare .cancel_button:hover .dashicons,
.mm_wp_compare .et_pb_button.delete_button:hover .dashicons,
.mm_wp_compare .modern-button.danger:hover .dashicons {
    color: #fff !important;
}



body.et_pb_button_helper_class .mm_wp_compare .et_pb_button,
body.et_pb_button_helper_class .mm_wp_compare .et_pb_module.et_pb_button{
    color: #fff;
}

.mm_wp_compare .et_pb_button:hover,
.mm_wp_compare .et_button_no_icon .et_pb_button:hover{
    color: #1d4ed8 !important;
    background: #fff !important;
    border-color: #1d4ed8 !important;
}

/* Removed .small button style - all buttons now use consistent modern height */


.mm_wp_compare .popup-inner h2 {
    margin-bottom: 20px;
    margin-top: 15px;
    color: #276ECC;

    border-bottom: 1px solid #276ECC;

}
.mm_wp_compare .popup-inner .close-popup-button {
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 18px;
    line-height: 18px !important;
    font-weight: 700;
    padding: 7px 13px !important;
}
.mm_wp_compare .popup-inner .close-popup-button:hover {
    padding: 7px 13px !important;
}

.mm_wp_compare .popup-inner .close-popup-button small {
    font-size: 8px;
    line-height: 8px;
    font-weight: 400;
    display:block;
}

.mm_wp_compare .et_pb_button.primary {
    background: #2196F3;
    color: #fff;
}
.mm_wp_compare .et_pb_button.primary:hover {
    background: #2b89f2;
}

.mm_wp_compare .et_pb_button.green-button {
    background: #5DB85C;
    border-color: #00af00;
    color: #fff;
    font-weight: 700;
}

.mm_wp_compare .et_pb_button.green-button:hover {
    background: #00af00 !important;
    border-color: #5DB85C !important;
    color: #fff !important;
}


.mm_wp_compare table tr:first-child td,
.mm_wp_compare table tr:nth-child(2) td {
    border-top: none !important;
}

.mm_wp_compare table .et_pb_button {
    margin: 0 0 0 0;
}

.mm_wp_compare table .close-popup-button,
.mm_wp_compare .close-popup-button {
   /* margin: 10px 10px 20px 0 !important;*/
    margin: 20px !important;
    margin-right: 0 !important;
    right: 0;
}

.mm_wp_compare table tr th,
.mm_wp_compare table tr td
{
    padding: 5px 10px;
}

/***************
*** BUTTON
 ***************/


.mm_wp_compare .et_pb_button:hover{
    cursor: pointer;
}

.mm_wp_compare .et_pb_button:disabled {
    border-color: #ddd;
}

.mm_wp_compare .et_pb_button:disabled,
.mm_wp_compare .et_pb_button.disabled{
    border-color: #ddd !important;
    background: none !important;
    color: #ddd !important;
    cursor: unset;
}

/**************
*** MESSAGES
***************/

/* Modern notification container */
#success-message {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 400px;
    max-width: calc(100vw - 40px);
    z-index: 10000;
    pointer-events: none;
}

/* Modern message styling */
#success-message .message {
    padding: 16px 20px;
    margin-bottom: 12px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow: hidden;
    width: auto;
    right: auto;
}

/* Show animation */
#success-message .message.wcd-show {
    transform: translateX(0);
    opacity: 1;
}

/* Hide animation */
#success-message .message.wcd-hide {
    transform: translateX(100%);
    opacity: 0;
}

/* Message icons */
#success-message .message::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'dashicons';
    font-size: 16px;
    line-height: 1;
    color: #fff;
}

/* Legacy message styling for compatibility */
#wcd_content .message,
.mm_wp_compare .message,
.mm_message_container .message {
    padding: 30px 10px;
    border: 1px solid #ddd;
    margin: 0;
    box-shadow: 0 0 10px #aaa;
}

#wcd_content .message.success,
.mm_wp_compare .message.success,
.mm_message_container .message.success {
    border-left: 3px solid green !important;
    background: #D6EDDC;
}

#wcd_content .message.error,
.mm_wp_compare .message.error,
.mm_message_container .message.error {
    border-left: 3px solid red !important;
    background: #ffdfdf;
}

#wcd_content .message.warning,
.mm_wp_compare .message.warning,
.mm_message_container .message.warning {
    border-left: 3px solid orange !important;
    background: rgba(255, 167, 0, 0.34);
}

/* Modern notification message types */
#success-message .message.success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border-left: none !important;
}

#success-message .message.success::before {
    content: '\f147';
    background: rgba(255, 255, 255, 0.2);
}

#success-message .message.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border-left: none !important;
}

#success-message .message.error::before {
    content: '\f534';
    background: rgba(255, 255, 255, 0.2);
}

#success-message .message.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border-left: none !important;
}

#success-message .message.warning::before {
    content: '\f534';
    background: rgba(255, 255, 255, 0.2);
}

#success-message .message.info {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    border-left: none !important;
}

#success-message .message.info::before {
    content: '\f223';
    background: rgba(255, 255, 255, 0.2);
}

/* Progress indicator for long messages */
#success-message .message .wcd-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0 0 12px 12px;
    transform-origin: left;
    animation: wcd-progress 5s linear forwards;
}

@keyframes wcd-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Close button for messages */
#success-message .message .wcd-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#success-message .message .wcd-close:hover {
    opacity: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #success-message {
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }
    
    #success-message .message {
        font-size: 13px;
        padding: 14px 16px;
    }
}

/**************
*** ICONS
***************/
.mm_wp_compare .group_icon {
    margin-right: 10px;
    vertical-align: middle;
}
.mm_wp_compare .group_icon.no-space {
    margin-right: 0;
    color: rgba(0,0,0,.82);
}

.mm_wp_compare .group_icon.white {
    color: #fff;
}

.mm_wp_compare .group_icon.bigger {
    font-size: 1.3em;
    margin-top: -5px;
    margin-right: 20px;
}

.mm_wp_compare .group_icon.monitoring.enabled,
.mm_wp_compare .group_icon.manual.enabled{
    color: green;
}
.mm_wp_compare .group_icon.monitoring.disabled,
.mm_wp_compare .group_icon.manual.disabled{
    color: #b30303;
}

.mm_wp_compare .monitoring-settings.disabled {
    display: none;
    animation: ease-out 0.3s;
}
.mm_wp_compare .monitoring-settings {
    display: block;
    animation: ease-in 0.3s;
}
.form-container {
    /*border: 1px solid #bbb;*/
}
.form-row input[type='text'] {
    width: 100%;
}


/**************
*** ACCORDION
***************/
.mm_wp_compare .accordion:hover{
    cursor: pointer;
}

.mm_wp_compare .group_settings {
    float: left;
}

.mm_wp_compare .popup_group_settings .group_icon{
    font-size: 24px;
}
/* Fixed delete/cancel buttons - white text on red background for better contrast */
.mm_wp_compare .delete_button,
.mm_wp_compare .cancel_button,
.mm_wp_compare .et_pb_button.cancel_button,
.mm_wp_compare .et_pb_button.delete_button {
    float: right;
    margin-right: 0;
    border-color: #dc3545 !important;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    transition: all 0.3s ease;
    min-height: 44px;
    padding: 12px 24px !important;
    font-weight: 600;
    min-width: 120px;
    border-radius: 10px;
}

.mm_wp_compare .delete_button:hover,
.mm_wp_compare .cancel_button:hover,
.mm_wp_compare .et_pb_button.cancel_button:hover,
.mm_wp_compare .et_pb_button.delete_button:hover {
    border-color: #c82333 !important;
    background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
    transform: translateY(-1px);
}
.mm_wp_compare .cancel_button {
    float: inherit !important;
}

.mm_wp_compare .mm_content {
    margin-left: 0px;


}
.mm_wp_compare .mm_main_content {
    width: 100% ;
    float: left;
}

.mm_wp_compare .accordion.help h3 {
    padding: 10px;
}


.mm_wp_compare .accordion.help .accordion-content {
    border: 1px solid #fff;
    padding: 20px;
    border-radius: 3px;
    margin-top: 10px;

}

.mm_wp_compare h4 small {
    font-size: 16px;
    color: #888;
}



/******************
SIDE NAVIGATION
 ******************/
body.admin-bar .mm_side_navigation {
    padding-top: 50px;
}
.mm_side_navigation {
    position: fixed;
    left: 0;
    right:0;
    width: 250px;
    height: 100%;
    padding-top: 30px;
    padding-bottom: 80px;
    top: 0;
    background: #222c3c;
    color: #fff;
    overflow: auto;
}

.side_nav_content {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
}

.side_nav_content.no_margin {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0 !important;
}

.side_nav_content .sidebar-button.et_pb_button {
    margin-top: 20px;
    font-size: 16px;
    background: #0c71c363;
    color: #fff;
}

.side_nav_content li {
    width: 100%;
    background: #313c54;
    list-style: none;
    margin-left: 0;
    margin-bottom: 5px;
}

ul.side_nav_content {
    padding-left: 0;
    margin-top: 20px;
}
.side_nav_content a {
    display: inline-block;
    width: 100%;
    color: #fff;
    padding: 10px 10px;
    font-size: 16px;
    font-weight: 400;
}

.nav-tab {
    background: linear-gradient(to right, #2196f3 50%, #222C3C 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .3s ease;
}

.side_nav_content a.nav-tab.nav-tab-active, a.nav-tab:hover, a.nav-tab:focus {
    background-position: left bottom;
    padding-left: 10px;

}

.side_nav_content .account_balance {
    padding: 20px;
}

.side_nav_content h3,
.side_nav_content h2,
.side_nav_content h1 {
    color: #fff;
}

/*
Show submenu as fixed element
.side_nav_content #menu-item-general.inactive .subnav,
.side_nav_content #menu-item-wordpress.inactive .subnav {
    position: fixed;
    left: 220px;
    padding: 0;
    min-width: 200px;
    margin-top: -40px;
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 10px #000;
}*/




.mm_wp_compare label {
    font-size: 16px;
}

.mm_wp_compare textarea.code_textarea {
    font-size: 16px;
    font-family: Helvetica, Arial, "Courier New" ;
}

select.ajax-switch-account {
    background: rgba(12, 113, 195, 0.05);
    border: 1px solid #276ECC !important;
    color: #276ECC;
    position: absolute;
    right: 20px;
}
select.ajax-switch-account:hover {
    cursor: pointer;
}



/*****************
** Checkboxes
 *****************/

.url-table {
    overflow-y: auto;
    max-height: 300px;

}
.url-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #eee;
}

table .checkbox_container {

}


.checkbox_container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox_container input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    position: absolute;
}



.mm_wp_compare .loading {
    min-height: 20px;
    min-width: 20px;
    background: #fff url('./../img/loading.gif') no-repeat center center !important;
}

.mm_side_navigation #currently-processing {
    padding: 0px 5px 2px;
    border-radius: 15px;
    border: 1px solid #b29832;
    background: #ddc03b;
    color: #222;
    font-weight: 700;
    margin-left: 7px;
    margin-top: -3px;
}
.mm_side_navigation #currently-processing.done {
    border: 1px solid #2da53a;
    background-color: rgb(33, 130, 33);
    color: #fff;
}

.mm_side_navigation #currently-processing-spinner{
    height: 15px;
    width: 15px;
}

/*.mm_wp_compare .checkmark.loading,
.mm_wp_compare #unassigned-group-urls.loading{
    background: #fff url('./../img/loading.gif') no-repeat center center !important;
}*/
.mm_wp_compare .loading.checkmark:after {
    border: none !important;
}

/* On mouse-over, add a grey background color */


/* When the checkbox is checked, add a blue background */
.checkbox_container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Create a custom checkbox */
.checkmark {
    position: relative;
    display: inline-block;
    top: 0;
    left: calc(50% - 13px);
    height: 26px;
    width: 26px;
    background-color: #b7b7b7;
    border: 1px solid #eee;
    z-index: 1;
}

.checkmark.device-checkbox {
    width: 80px;
    height: 60px;
    color: #fff;
}

.checkbox_container input:checked ~ .checkmark.device-checkbox {
    background: #59c275;
}

.checkbox_container input:hover ~ .checkmark.device-checkbox {
    opacity: 0.8;
}

.checkbox_container input ~ .checkmark.device-checkbox {
    background: rgba(224, 165, 177, 0.96);
}

.checkbox_container input:checked ~ .checkmark.device-checkbox:after {
    top: 30px;
    margin-left: 27px;
}

/* Show the checkmark when checked */
.checkbox_container input:checked ~ .checkmark:after {
    display: block;
}
.checkbox_container.check-all input ~ .checkmark,
.checkbox_container.check-all input:checked ~ .checkmark{
    background: #aaa;
}

.checkbox_container.check-all input:hover ~ .checkmark{
    opacity: 0.8;
}

.checkbox_container.check-all input ~ .checkmark:after {
    content: "";
    background: none;
}
.checkbox_container.check-all input ~ .checkmark.device-checkbox:after {
    content: "" !important;
    border: none;
    background: none;
}

.checkbox_container input ~ .checkmark.device-checkbox:after {
    display: block;
    border: none;
    content: "X";
    font-weight: 900;
    margin-left: 32px;

}

/* Style the checkmark/indicator */
.checkbox_container input:checked ~ .checkmark:after {
    content: "";
    left: 8px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox_container .checkmark {
    left: 0;
}

.mm_wp_compare .manual_compare,
.mm_wp_compare .monitoring_compare,
.mm_wp_compare .url_overview_content,
.mm_wp_compare .latest_compares_content,
.mm_wp_compare .website-settings{
    width: 100%;
    float: left;
    /*padding: 20px;*/
}

.mm_wp_compare .action_container {
    display: flex;
    flex-flow:column;
    margin-bottom: 30px;
    /*border: 1px solid #ddd;
    box-shadow:0 0 50px #4a4a4a;
    border-radius: 5px;
    margin-top: 20px;*/
}

.mm_wp_compare .action_container .required-credits {
    margin-bottom: 30px;
    background: #d3d3d3;
    overflow: hidden;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

.mm_wp_compare .action_container .required-credits .big {
    font-size: 22px;
    font-weight: 700;
}
.mm_wp_compare .action_container .required-credits .box {
    float: left;
    width: 33%;
    text-align: center;
    border-left: 1px solid #ddd;
}

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

.mm_wp_compare .box.third {
    width: calc(33.33% - 6.66px);
    display: inline-block;
    text-align: left;
}

.mm_wp_compare .box.third small,
.mm_wp_compare .box.fourth small,
.mm_wp_compare .box.fifth small {
    display: block;
}

.mm_wp_compare .box.fourth {
    width: calc(25% - 5px);
    display: inline-block;
    text-align: left;
}
.mm_wp_compare .box.fourth.center {
    text-align: center;
}

.mm_wp_compare .box.fifth {
    width: calc(20% - 4px);
    display: inline-block;
    text-align: left;
}

.mm_wp_compare .box.half {
    width: calc(50% - 10px);
    display: inline-block;
    text-align: left;
}

.mm_wp_compare .action_container .required-credits .box.full {
    width: 100%;
}

.mm_wp_compare .action_container .required-credits .box:first-child {
    border: none;
}

.mm_wp_compare .action_container .required-credits #sc_until_renew.exceeding,
.mm_wp_compare .action_container .required-credits #sc_available_until_renew.exceeding,
.mm_wp_compare .action_container .required-credits #notice_screenshots_exceeding {
    color: orange;
}
.mm_wp_compare .action_container .required-credits #sc_until_renew {

}

.available-screenshots {
    color: #fff;
    padding: 10px 20px;
    margin-left: -20px;
    margin-right: -20px;
}

.global-low-credits {
    font-weight: 700;
    text-align:center;
    margin-bottom: 50px;
    font-size: 18px;
    padding-top: 10px;
    border-radius: 5px;
}

.global-low-credits .et_pb_button {
    background: rgba(255,255,255, 0.5);
}


.global-low-credits.low {
    background: rgb(252, 222, 188);
    color: #666;
    border: 1px solid rgb(255, 202, 80);

}

.global-low-credits.no {
    background: #fc8686;
    color: #fff;
    border: 1px solid #cb6868;
}

.global-low-credits .et_pb_button {
    margin-bottom: 10px;
    margin-left: 10px;
}

.global-low-credits .et_pb_button:hover {
    background: rgba(255,255,255, 0.8) !important;
    color: #333;
}





/***************
TOP BOXES
 ****************/

.mm_wp_compare .top_boxes {
    width: 49.5%;
    float: left;
    border: 3px solid #276DD7;
    margin-bottom: 20px;
    padding: 0 10px 10px;
    border-radius: 4px;
    opacity: .8;
    transition: .3s;
}
.mm_wp_compare #box_action .top_boxes {
    margin-right: 1%;
}

.mm_wp_compare .active .top_boxes,
.mm_wp_compare .top_boxes:hover {
    opacity: 1;
    cursor: pointer;
    background: #276dcc26;
}

.mm_wp_compare .top_boxes h2 {

}

/*.mm_wp_compare .add_url_popup_bg,
.mm_wp_compare .add_group_popup_bg {
    width: 100%;
    height: 100vh;
    opacity: 0.6;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}*/

.add-url{
    font-size: 24px;
}

.add-group {
    border: 3px solid #276ECC;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    display: inline-block;
    background-color: rgba(12,113,195,0.05);
}
.add-group:hover{
    cursor: pointer;
    background: rgba(12,113,195,0.1)!important;
}
.mm_wp_compare .add_url_popup_check_url {
    position: fixed;
    top: 100px;
    z-index: 20 !important;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.mm_wp_compare .popup .popup-inner {
    position: relative;
    background: #fff;
    max-width: 800px;
    max-height: calc(100vh - 40px);
    overflow: auto;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    box-shadow: 0 0 10px #ccc;
    border-radius: 5px;
}

.mm_wp_compare .popup .popup-inner.fullwidth {
    max-width: 100%;
    margin-left: 20px;
    margin-right: 20px;
}
.mm_wp_compare .popup.fullheight {
    height: 100vh;
}

.mm_wp_compare .ajax-popup {
    position: fixed;
    z-index: 20;
    top: 100px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
}

body:has(#wpadminbar)  .mm_wp_compare .popup {
    top: 30px !important;
}

.mm_wp_compare .add_url_popup,
.mm_wp_compare .edit_url_popup,
.mm_wp_compare .add_group_popup,
.mm_wp_compare .popup{
    position: fixed;
    z-index: 20;
    background: rgba( 255,255,255,0.8);
    /*top: 100px;*/
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    overflow: scroll;
}

/* Prevent accordion effects from interfering with popup positioning */
.mm_wp_compare .accordion-container {
    transition: box-shadow 0.2s ease;
    /* Prevent transform-related stacking context issues */
    will-change: auto;
}

.mm_wp_compare .mm_accordion_title {
    transition: background-color 0.2s ease;
    /* Prevent transform-related stacking context issues */
    will-change: auto;
}

.mm_wp_compare label {
    display:block;
    margin-top: 10px;
}

.mm_wp_compare label.no_margin {
    margin-top: 0;
}

.mm_wp_compare label.checkbox_container {
    margin-top: 0;
}

.mm_wp_compare .add_url_popup input[type="text"],
.mm_wp_compare .add_group_popup input[type="text"] {
    width: 100%;
    max-width: 400px;
}

.mm_wp_compare .button_as_link {
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/

    /*input has OS specific font-family*/
    color: #069;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/********************
Logs
 ********************/

 .mm_wp_compare table.queue {
    border-width: 0;
 }

.mm_wp_compare table.queue tr td {
    border-collapse: collapse;
}

.mm_wp_compare .queue-status {
    border: 1px solid #eee;
}
.mm_wp_compare .queue-status.open {
     background: #eee;
 }
.mm_wp_compare .queue-status.processing
{
    background: rgba( 254, 204, 48, 0.3);
}
.mm_wp_compare .queue-status.done {
    background: #E7F2E7;
}
.mm_wp_compare .queue-status.failed {
    background: rgba(252, 134, 134, 0.51);
}

.mm_wp_compare tr.queue-status  {
    border-bottom: 1px solid #cecece;
}


/********************
Compare Page
 ********************/
.page-template-page-template-blank .container {
    width: 100%;
    max-width: 100%;
}

.page-template-page-template-blank .container h1.main_title {
    display: none;
}

.mm_change_detection_page  {
    margin: 50px 20px;
}

.mm_change_detection_popup h2 {
    text-decoration-style: solid;
    font-size: 38px;
    color: #0c71c3!important;
    text-align: center;
    margin-top: 20px;
}

.mm_change_detection_popup .change_detection_navigation {
    position: fixed;
    width: calc(100% - 80px);
    background: #fff;
    margin-top: -20px;
    padding-top: 20px;
    z-index:2;
    min-height: 80px;
}

.mm_change_detection_popup .popup-mobile-change-detection-headline {
    display: inline-block !important;
}



.mm_change_detection_page img,
.mm_change_detection_popup img{
    border: 1px solid #eee;
    padding: 3px;
}
.mm_change_detection_popup .images{
    max-height: calc( 100vh - 230px );
    overflow: scroll;
    display: block;
}
.mm_change_detection_page .image1,
.mm_change_detection_page .image2,
.mm_change_detection_page .comp_image,
.mm_change_detection_popup .image1,
.mm_change_detection_popup .image2,
.mm_change_detection_popup .comp_image {
    width: calc( 33.333% - 10px );
    float: left;
}

.mm_change_detection_page .image1,
.mm_change_detection_page .comp_image,
.mm_change_detection_popup .image1,
.mm_change_detection_popup .comp_image{
    
}
.mm_change_detection_page .image2,
.mm_change_detection_popup .image2 {
    margin-right: 0;
}


.mm_wp_compare .img-magnifier-container {
    position: relative;
}

.mm_wp_compare .img-magnifier-glass {
    position: absolute;
    border: 3px solid #276ECC;
    border-radius: 00%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 100%;
    height: 400px;
    z-index: 10;
}

.mm_wp_compare .simple-accordion {
    border: 1px solid #aaa;
    border-radius: 5px;
    background: rgba(12,113,195,0.05);
    margin-bottom: 20px;
}
.mm_wp_compare .simple-accordion .text-simple-accordion {
    font-size: 16px;
}
.mm_wp_compare .simple-accordion-title {
    padding: 10px;
}

.mm_wp_compare .simple-accordion-title:hover {
    color: #276ECC;
    cursor: pointer;
}

.mm_wp_compare .simple-accordion .show-more h3 {
    margin-top: 20px;
    font-size: 2rem;
    padding-left: 10px; 
    padding-bottom: 0;
}

.mm_wp_compare .mm_accordion_title.mm_default_website_settings h3 {
    background: rgba(12,113,195,0.8) !important;
    color: #fff !important;
    border-radius: 5px;
}

.mm_wp_compare .mm_accordion_title.mm_default_website_settings h3 .accordion-state-icon {
    color: #fff !important;
}


.mm_wp_compare .mm_accordion_title.mm_default_website_settings h3.ui-state-hover {
    background: rgba(12,113,195,0.6) !important;
}

.mm_wp_compare .dashicons.icon-big {
    color: #666 !important;
    font-size: 60px;
    height: 60px;
    margin-left: -30px;
}

.mm_wp_compare .dashicons.icon-big:hover {
    cursor: pointer;
    color: #276ECC!important;
}

/* Group settings */
.group-action-icons {
    position: absolute;
    right: 0;
    z-index: 5;
    top: 1px;
    height: calc(100% - 2px);
}

.group-action-icon {
    padding-top: 7px;
    display: inline-block;
    top: 0;
    height: 100%;
    border-radius: 0px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    background-color: #2196F3;
    color: #fff;
    border: none;
}
.group-action-icon:hover {
    color: #2196F3;
    background-color: #fff;
    cursor:pointer;

}

.group-action-icon .dashicons {
    font-size: 30px;
    width: 50px;

}
.group-action-icon .group-icon-name {
    padding-top: 5px;
    font-size: 12px;
}
.auto-enabled {
    padding: 15px 10px;
    height: 61px;
    display: block;
    text-align: center;
}

.auto-enabled .dashicons {
    font-size: 40px;
    width: 40px;
    display: inherit;
    text-align: center;
    margin: 0 auto;
}

.auto-enabled #hover-enable {
    display: none;
    font-size: 10px;
    margin-top: 15px;
    line-height: 12px;

}

.enabled-switch .enabled-description {
    line-height: 10px;
    text-align: center;
    padding-top: 15px;
    font-size: 10px;
    color: green;
}

.enabled-switch .enabled-description.disabled {
    color: #A00000;
}

.enabled_switch.devices .switch {
    width: 120px;
    text-align: center;
}


.enabled_switch.devices .switch .slider.round {
    color: #fff;
    font-size: 14px;
    padding-top: 5px;
}

.group_icon.active-auto {
    color: green;
}

.group_icon.paused-auto {
    color: #A00000;
}

.ajax-loading-container {
    margin-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

.ajax_enable_monitoring {
    margin-right: 10px;
    z-index:1;
    padding-bottom: 30px;
}
.ajax_enable_monitoring:hover  {
    cursor: pointer;
}

.mm_wp_compare .step-button {
    padding: 10px;
    background: #DCE3ED;
    width: 100%;
    font-size: 18px;
    border: 1px solid #aaa;
}

.mm_wp_compare .wcd-step-container {
    max-width: 500px;
    margin: 50px auto;
    text-align: center;
}

.mm_wp_compare .wcd-highlight-bg{
    border: 1px solid #aaa;
    padding: 10px 10px 10px;
    background: #276dcc1c;
    margin-bottom: 20px;
    border-radius: 5px;
}

.mm_wp_compare .wcd-highlight-bg h2 {
    padding-bottom: 0;
}

.mm_wp_compare .tablenav-pages-navspan.button {
    margin-left: 10px;
    font-size: 13px;
    line-height: 2;
}

.mm_wp_compare .wcd-highlight-bg.done {
    background: #d5e4d5;
}
.mm_wp_compare .wcd-highlight-bg.done h2 {
    color: #444;
}

.mm_wp_compare #btn-start-update-detection {
    margin: 5px 0;
}

.mm_wp_compare #btn-start-update-detection:hover {
}

.mm_wp_compare .update-status-container {
    width: 100%;
}

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

@media (max-width: 768px) {
    .stepper-item {
        font-size: 12px;
    }
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    margin-bottom: 6px;
}

.stepper-item.active {
    font-weight: bold;
}
.stepper-item.active .step-counter {
    background: #276DCC;
    color: #fff;
}


.stepper-item.done .step-counter {
    background-color: #4bb543;
    color: #fff;
}

.stepper-item.done::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #4bb543;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
}

.stepper-item:first-child::before {
    content: none;
}
.stepper-item:last-child::after {
    content: none;
}

.mm_wp_compare .update-step-done-icon {
    font-size: 18px;
    padding-right: 5px;
    color: green;
}

.mm_wp_compare #wcd-screenshots-done h2,
.mm_wp_compare .wcd-step-container h2 {
    
    font-size: 18px;
    font-weight: 600;
}

.mm_wp_compare .update-status.done:before {
    border-color: green !important;
}
.mm_wp_compare .update-status.done {
    color: green;

}

/*.mm_wp_compare .update-status.active {
    background: #ffecd0;
    font-weight: 700;
}
.mm_wp_compare .update-status.disabled {
    background: #ffe2e2;
}*/

.select-update-type {
    width: calc(33.33% - 10px);
    float: left;
    border: 3px solid #276ECC;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 30px;
    margin-right: 15px;
}

.select-update-type.last {
    margin-right: 0;
}
.select-update-type:hover {
    background: rgba(12,113,195,0.1)!important;
    cursor: pointer;
}

.select-update-type.disabled {
    border-color: #eee;
}

.select-update-type.disabled:hover {
    background: initial !important;
}

.select-update-type.disabled:hover {
    cursor: default;
}

.select-update-type[disabled="disabled"],
.select-update-type[disabled="disabled"]:hover {
    border-color: #eee;
    background: transparent !important;
    cursor: not-allowed;
}

.mm_wp_compare .code-tags {
    background: #2B2B2B;
    color: #629755;
    font-weight: 700;
    font-style: italic;
    font-size: 16px;
    padding-left: 10px;
    padding-bottom: 0;
}

.row-icon {

    color: #666 !important;
}

.row-icon:hover {
    color: #276ECC !important;
}

/* Only apply hover color when data-auto_enabled exists but has no value */
.accordion-container[data-auto_enabled=""] .row-icon:hover {
    color: #276ECC !important;
}

.mm_side_navigation .dashicons {
    font-size: 16px !important;
    padding-top: 5px;
}

/* Enabled checkboxes for groups */
/* The switch - the box around the slider */
.enabled_switch {
    margin: 0px 10px 10px 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    z-index: 2;
    overflow: hidden;
}

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

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

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    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(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.enabled_switch.devices input:checked + .slider:before {
    transform: translateX(85px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/********************
Dropdowns
 *******************/

/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content option {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content option:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

/********************
* Bridge
*********************/

#bridge {
    max-width: 1024px;
}

#bridge #main-menu,
#bridge #sec-menu,
#bridge #footer{
    display: none;
}

#bridge .sidebar {
    display: none;
}

#bridge #order-standard_cart #frmcheckout .view-cart-items {
    border-bottom: 0;
}

#bridge #frmcheckout .sub-heading {
    margin-top: 50px;
}

#bridge .col-md-9 {
    width: 100% !important;
}

#bridge .modal {
    top: 100px !important;
}

#bridge #order-standard_cart {
    max-width: 800px;
    margin: 0 auto !important;
}

.dropdown-container {
    height: 50px;
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;

    position: relative;
}

.filter-row {
    position: relative;
    padding: 10px 0 0;
    width: 100%;
    /*border: 1px solid #b8b8f8;
    background: #276dcc1c;*/
    display: inline-block;
    margin: 20px 0;
    color: #333;
}

.filter-dropdowns {
    display: flex;
    flex-wrap: wrap;

}

.manual_compare .filter-row .dropdown-container.limit_days,
.manual_compare .filter-row .dropdown-container.group_type,
.manual_compare .filter-row .dropdown-container.group_id,
.manual_compare .filter-row .dropdown-container.limit_domain,
.manual_compare .filter-row .dropdown-container.group_type{
    display: none;
}

.change_detection_amount {
    width: 100%;
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    color: #676767
}

#form-filter-cms {
    float: right;
}

#form-filter-cms .filter-row {
    margin: 0;
    z-index: 10;
}

#form-take-pre-sc {


}

/*.filter-row:before {
    content: "Filters";
    width: 100%;
    display: block;

    font-size: 18px;
    margin: 10px;
}*/

.js-dropdown-style,
.js-dropdown-style:focus{
    padding: 9px;
    background: #676767;
    color: #fff;
    border: 1px solid #fff;
    height: 40px;
    display: inline-block;
}
input.js-dropdown-style[type="date"] {
    color-scheme: dark;
}

ul.plainSelect

{
    position: relative;
    cursor: pointer;
    width: inherit;
    padding: 0 !important;
    border: 1px solid #276ECC;
    border-radius: 0px;
    display: block;
    overflow: hidden;
}

ul.plainSelect.hover {
    z-index:5;
    position: absolute;
    top: 0;

}

ul.plainSelect li.unselected:hover {
    background-color: #eee;
}
ul.plainSelect li {
    overflow: hidden;
    list-style: none;
    margin-left: 0;
    z-index: 12;
    padding: 5px 10px;
    background-color: #eee;
    display: list-item;
}

ul.plainSelect li.unselected {
    display: none;
}

ul.plainSelect:hover li,
ul.plainSelect:hover li.unselected {
    display: list-item;
}

.dropdown-container ul {
    border-color:#fff;
    color:white;
}

#cms-ul > li,
#difference_only-ul > li,
#group_id-ul > li,
#limit_domain-ul > li,
#limit_days-ul > li {
    border-color:#676767
}

.dropdown-container ul li:hover {
    background-color: #939393 !important;
}

.dropdown-container ul li {
    background-color: #676767;
}

.twentytwenty-overlay:hover {
    background: rgba(0,0,0,0) !important;
}

.twentytwenty-container img {
    border: none;
}

#comp-slider,
#comp_image {
    border: 1px solid #eee !important;

}

.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after {
    width: 2px !important;
    margin-left: -1px !important;

}

.twentytwenty-horizontal .twentytwenty-handle {
    top: 200px !important;
    background: #276ECC;
}

.twentytwenty-horizontal .twentytwenty-handle:after {
   height: 99999px !important;
}

.comp_image  {
    padding-top: 0;
    margin-right: 0;
}
.comparison-tiles-container {
    margin-bottom: 5px;
    display: flex;
}


.comparison-tiles {
    display: flex;
    min-height: 95px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 5px;
    padding: 10px;
    vertical-align: top;
    top: 0;
    background: #eee;
    border: 1px solid rgba(12,113,195,0.35);
    background: rgba(12, 113, 195, 0.05);
}

.comparison-tiles:last-child {
    border-right: 1px solid #aaa;
    margin-right: 0;
}

.comparison-diff-tile {
    color: #fff;
    text-shadow: 0 0 0 5px #fff;
}

.mm_wp_compare .change_detection_placeholder_margin {
    height: 80px; 
    margin-bottom: 10px;
}






@media only screen and (min-width: 800px) {

    .auto-enabled:hover .dashicons {
        color: #fff;
        text-align:center;
    }

    .auto-enabled:hover .dashicons.paused-auto:before {
        content: "\f522";
        color: #008001;
    }

    .auto-enabled:hover .dashicons.active-auto:before {
        content: "\f523";
        color: #A00000;
    }

    .auto-enabled:hover #hover-enable{
        display: block;
    }
    .auto-enabled:hover .enabled-description {
        display: none;
    }

    .group-icon.active-auto:hover {
        color: inherit;
    }
}
#wcd_content #mobile-nav {
    display: none;
}

#wcd_content .wcd-website-settings-column {
    width: 50%; 
    float: left; 
}

#wcd_content .wcd-subaccount-button {
    float: right; 
    width:200px; 
    vertical-align: top; 
    text-align: right;
}

#wcd_content #wcd-subaccounts-container {
    padding: 0 20px; 
}
h1 small, h2 small {
    font-weight: 500;
    line-height: 1.3em;
}

#wcd-monitoring-group-time-settings {
    display: inline;
}

@media only screen and (max-width: 1024px) {
    #wcd_content #mobile-nav{
        margin-left: 10px;
        height: 50px;
        width: 50px;
        display: block;
        margin-bottom: 20px;
        margin-top: 0;
        line-height: 22px !important;
    }
    #close-mobile-nav {
        display: block !important;
        border-color: #f7f7f7;
        color: #850505;
        margin: 5px;
        font-size: 14px;
        padding: 10px 15px;
        margin-left: auto;
        background: #eee;
        font-weight: 700;   
        right: 10px;
        top: 10px;
        position: absolute;
    }

    .mm_side_navigation {
        position: absolute;
        z-index: 1000;
        top: 0px;
        width: 100%;
        padding-top: 0;
        height: 100vh;
        left: -100%;
        overflow: visible;
    }

    .mm_side_navigation img {
        max-width: calc(100% - 100px) !important;
    }
    .mm_wp_compare .manual_compare,
    .mm_wp_compare .monitoring_compare,
    .mm_wp_compare .url_overview_content,
    .mm_wp_compare .latest_compares_content,
    .mm_wp_compare .website-settings {
        width: 100%;
    }

    .mm_wp_compare {
        margin-left: 10px;
    }

    #wcd-switch-account {
        display: none;
    }

    #wcd_content .wcd-website-settings-column {
        width: 100%;
        margin-bottom: 20px;
    }

    #wcd_content .wcd-subaccount-button {
        margin-top: 20px;
        float: none;
        display: inline-block;
        width: initial;
    }

    #wcd-monitoring-group-time-settings {
        display: block;
        margin-top: 20px;
    }
}

.accordion-state-icon-position {
    position: absolute; 
    left: 10px; 
    top: calc(50% - 15px);
}



#help-button {
    display: none;
    text-align: center;
    float: right;
    width: 50px;
    height: 50px;
    margin-top: 0 !important;
    border-radius: 50px;
    padding: 0 !important;
    font-size: 26px;
    font-weight: 700;
}

/* Add wp website */
#error_available_post_types {
    background: rgba(252, 134, 134, 0.51);
    border: 1px solid rgba(252, 134, 134, 0.92);
    padding: 10px;
    margin: 10px 0;
}

#cta-preview-screenshot #preview_url {
    width: calc(100% - 205px);

}
#cta-preview-screenshot input,
#cta-preview-screenshot select{
    height: 50px;
    font-size: 16px;
    padding: 5px 10px;
    width: 100%;
}
#cta-preview-screenshot label {
    padding-top: 10px;
    display:block;
    font-size: 12px;
}

#cta-preview-screenshot input[type="checkbox"] {
    border-radius: 0;
    height: 20px;
    vertical-align: bottom;
    width: 20px;
    display: inline-block;
}
#cta-preview-screenshot label input[type="checkbox"] {
    line-height: 20px;
    text-indent: -15px;
}

.mm_wp_compare #auto-detection-status-container.active {
    background: #D1E6D6;
}

.mm_wp_compare #auto-detection-status-container {
    background: #F6E6E9;
    color: #666
}

.status_container .status_box{
    padding: 5px 10px;
    background: #aaa;
    border-radius: 5px;
    min-width: 140px;
    text-align: center;
}

.status_container .status_box:hover{
    opacity: 0.9;
}

.status_container .status_box.new {
    background: grey;
    color: #fff;
}

.status_container .status_box.ok{
    background: green;
    color: #fff;
}

.status_container .status_box.to_fix {
    background: orange;
    color: #fff;
}

.status_container .status_box.false_positive {
    background: cornflowerblue;
    color: #fff;
}

.status_container .status_box.failed {
    background: darkred;
    color: #fff;
}

.status_container #select_status {
    position: absolute;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 5px #aaa;

}
.status_container:hover {
    cursor: pointer;
}

.status_container .change_status {
    z-index: 10;
}

.status_container .change_status a {
    margin-bottom: 10px;
    display:block;
}

.mm_inline_block {
    display: inline-block;
}

.mm_small_status {
    font-size: 14px;
    padding: 3px 0px !important;
    margin-bottom: 3px;
}

.failed-queues-accordion h3 {
    margin-bottom: 0px;
    background: rgba(220, 50, 50, 0.1); 
}

.mm_wp_compare .failed-queues-accordion .accordion .mm_accordion_content {
    padding: 0px;
}

.comparison_row:hover {
    background: #DDE7EF !important;
    cursor: pointer;
}
.accordion-state-icon {
    transition: 0.3s;
    align-items: center;
    font-size: 30px;
    transform-origin: 15px 15px;
}

.mm_wp_compare .change-detection-filter-label {
    display: block; 
}

.mm_wp_compare .dropdown-container {
    margin-bottom: 30px;
}

.mm_wp_compare .dropdown-container select {
    padding-top: 5px;
    padding-bottom: 5px;
}

.mm_wp_compare .dropdown-container.submit {
    margin-bottom: 3px;
    margin-top: auto;
}

.mm_wp_compare .dropdown-container.submit input {
    height: 40px;
}

.mm_wp_compare .change_detection_navigation_container {
    position: absolute; 
    width: 100%; 
    top: 20px; 
    text-align: center; 
}

.mm_wp_compare .mm_accordion_title .box.third.accordion-group-name {
    margin-left: 100px;
}


@media only screen and (max-width: 800px) {

    h2 {
        font-size: 150% !important;
    }

    .hide-mobile{
        display: none;
    }
    .mm_wp_compare {
        margin-left: 0;
        margin-right: 0;
    }

    .mm_wp_compare h1,
    .mm_wp_compare .dashboard h1 {
        margin-left: 10px;
        margin-right: 10px;
        font-size: 26px;
        max-width: 80%;
        text-align: left;
        border-bottom: 1px solid #0a6aa1;
    }

    .responsive-table {
        overflow-x: auto;
    }

    .accordion h3.accordion-ajax-group-urls small {
        display: block;
        width: 100%;
        float: none;
        clear: both;

    }

    .select-update-type {
        width: 100%;
    }

    .group-action-icons {
        top: 80px;
        margin: 0 auto;
        display: block;
        left: auto;
        right: auto;
    }

    .group-action-icon {
        padding-right: 0;
    }

    /* .ajax-group-urls td.url-thumbnail {
         display: none;
     }*/
    .comparison-tiles {
        width: 100% !important;
    }

    #comp-switch {
        display: block !important;
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 10px;
        background: #fff;
        box-shadow: 0 0 10px #000;
        text-align: center;
        left: 0;
        margin-top: 50px;
        z-index: 10000;
    }
    
    /* Ensure comp-switch works in popup by positioning relative to viewport */
    .ajax-popup #comp-switch {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10001 !important;
    }

    .mm_change_detection_page {
        margin-bottom: 100px;
    }

    #change_detection_popup .popup-inner {
        padding-bottom: 150px;
    }

    #comp-slider {
        width: 100% !important;
    }

    #comp_image {
        width: 100% !important;
    }

    .mm_wp_compare .dashboard {
        margin: 0 20px;
    }

    .mm_wp_compare .dashboard .box-half {
        width: 100%;
    }

    .mm_wp_compare .dashboard tr th {
        display: none;
    }

    .mm_wp_compare .dashboard tr td {
        display: inline-block;
    }

    .group-action-icon {
        top: 80px !important;
    }
    .mm_wp_compare .action_container {
        padding: 0 20px;
    }

    .mm_wp_compare .action_container .required-credits .box {
        float: none;
        width: 100%;
        border-left: none;
        border-top: 1px solid #ddd;
        padding: 10px 0;
    }

    .mm_wp_compare .action_container .required-credits .box.half {
        width: 100%;
    }

    .mm_wp_compare .plan-container {
        display: block;
    }

    .mm_wp_compare .plan-box {
        width: 100%;
    }

   
    #cta-preview-screenshot form input,
    #cta-preview-screenshot form select
    {
        width: 100% !important;
    }

    #cta-preview-screenshot #preview_screenshot .dashicons {
        position: relative;
        top: 20px;
    }

    .mm_wp_compare .mm_accordion_title .box.fourth,
    .mm_wp_compare .mm_accordion_title .box.fifth {
        width: 32%;
        padding-right: 1%;
        font-size: 14px;
    }
    .mm_wp_compare .mm_accordion_title .box.fourth small,
        .mm_wp_compare .mm_accordion_title .box.fifth small {
            font-size: 12px;
    }

    .mm_wp_compare .mm_accordion_title .box.fourth.status {
        width: 100%;
        margin-bottom: 20px;
    }
    
    
    .mm_wp_compare .mm_accordion_title .box.third,
    .mm_wp_compare .mm_accordion_title .box.half {
        width: 100%;
        margin-bottom: 20px;
    }

    .mm_wp_compare .dashboard .box-half {
        width: 100% !important;
    }

    .mm_wp_compare .mm_accordion_title h3 {
       height: auto ;
    }
    .mm_wp_compare .enabled-switch {
        
    }

    .mm_wp_compare .manual_compare .box.third {
       
    }

    .accordion-state-icon-position {
        top: 30px;
    }

    .mm_wp_compare select.ajax-switch-account {
        margin-top: -70px;
        
    }

    .mm_wp_compare .table-row-url {
        max-width: calc(100% - 300px); 
        word-break: break-word;
    }

    .mm_wp_compare .dropdown-container {
        margin-bottom: 0;
    }
    
    .mm_wp_compare .dropdown-container.submit {
            margin-bottom: 0;
    }

    .log-table-device-icon {
        display: inline-block;
    }

    .mm_wp_compare .mm_processing_container td {
        padding-top: 20px;
    }

    /* General table optimization */
    table, thead, tbody, tr {
        display: flex;
        flex-direction: column;
      }
    
      thead tr {
        display: none; /* Kopfzeile ausblenden */
      }
    
      td {
        position: relative;
        border-top: none !important;
      }

      .ajax_batch_comparisons_content td {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
      }

      tr {
        padding: 10px;
        margin: 10px 0px !important
      }
      tr:first-child {
        padding-top: 0 !important;
      }
      th {
        display: none;
      }

      tr.table-headline-row {
        display: none;
      }

      .mm_wp_compare table.toggle tr:nth-child(odd) {
        background-color: #f2f2f2
      }

      .comparison_row button {
        display: block;
        width: 100%;
        padding: 20px 20px;
        font-size: 16px;
      }
     
    
      td::before {
        content: attr(data-label);
        
        position: absolute;
        left: 0;
        top: 0;
        width: 30%;
        padding-left: 10px;
        font-weight: bold;
        white-space: nowrap;
      }

      .ajax-group-urls table td {
        width: initial !important;
      }

      .change_detections_button {
        float: none !important;
      }

      .group_settings_button {
        float: none !important;
      }

      .mm_wp_compare .table-row-url {
        max-width: initial; 
    }

    .mm_wp_compare .table-row-compared-screenshots-failed,
    .mm_wp_compare .table-row-diff-tile-failed,
    .mm_wp_compare .table-row-detection-link-failed {
        display: none;
    }

    .mm_change_detection_popup .comparison-tiles-container {
        width: 100% !important;
        display: block;
        flex-direction: column;
    }

    .mm_change_detection_popup .comparison-tiles-toggle {
        text-align: center;
        width: 100%;
    }

    .mm_change_detection_popup #comp-slider {
        width: 100% !important;
    }

    .mm_change_detection_popup #comp_image {
        display: none;
    }

    .mm_change_detection_popup #change_detection_details_container h2 {
       width: 100% !important;
    }

    .mm_change_detection_popup .popup-inner.fullwidth.fullheight {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        box-shadow: none;
    }

    .mm_change_detection_popup .change_detection_navigation {
       
    }

    .mm_change_detection_popup #headline-screenshots,
    .mm_change_detection_popup #headline-change-detection {
        display: none !important;
    }

    .mm_change_detection_popup .show-comparison,
    .mm_change_detection_popup .show-screenshots,
    #comp-switch .show-comparison,
    #comp-switch .show-screenshots {
        color: #fff;
        background: #2196f3;
    }

    

    .mm_change_detection_popup .show-comparison.active,
    .mm_change_detection_popup .show-screenshots.active,
    #comp-switch .show-comparison.active,
    #comp-switch .show-screenshots.active {
        color: #2196f3;
        background: #fff
    }

    .mm_change_detection_popup #comp-slider {
        order: 1;
    }

    .mm_change_detection_popup #comp_image {
        order: 2;
    }
    .mm_change_detection_popup #middle-column {
        order: 3;
    }

    .mm_change_detection_popup .url-monitoring-status-container {
        display: inline-block;
        text-align: left !important;
    }

    .mm_change_detection_popup .mobile-label-difference {
        display: block !important;
    }

    .mm_wp_compare .change-detection-filter-label {
        display: inline-block;
        position:absolute
    }

    .mm_wp_compare .dropdown-container {
        width: 100%;
    }

    .mm_wp_compare .dropdown-container input[type="date"],
    .mm_wp_compare .dropdown-container select {
        margin-left: auto;
        margin-right: 0;
        display: block;
    }

    .mm_wp_compare .monitoring-status {
        display: inline-block;
        padding-left: 10px;
        vertical-align: middle;
    }

    .mm_wp_compare .change_detection_placeholder_margin.change_detection_placeholder_margin_with_navigation {
        height: 120px !important;
    }

    .mm_wp_compare .change_detection_navigation_container {
        margin-top: 60px;  
    }
}

/* Modern Activation Card Styles */
.mm_activation_card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 40px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.mm_activation_title {
    font-size: 28px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.mm_activation_text {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.mm_email_highlight {
    background: #f3f4f6;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #266ECC;
    margin: 20px 0;
}

.mm_email_address {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    word-break: break-all;
}

.mm_resend_section {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
}

.mm_countdown_timer {
    display: inline-block;
    font-weight: 600;
    color: #f59e0b;
}

.mm_help_text {
    font-size: 14px;
    color: #9ca3af;
    margin-top: 16px;
}

/* Modern Dashboard Styles */
.wcd-modern-dashboard {
    display: grid;
    gap: 24px;
    padding: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wcd-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.wcd-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 20px;
}

.wcd-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.wcd-card-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.wcd-card-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wcd-card-content {
    padding: 20px 24px;
}

.wcd-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wcd-feature-item {
    display: block;
    text-decoration: none;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    background: #fafbfc;
}

.wcd-feature-item:hover {
    border-color: #266ECC;
    background: #f8faff;
    text-decoration: none;
}

.wcd-feature-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wcd-feature-description {
    color: #64748b;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.wcd-account-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wcd-account-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wcd-account-label {
    font-weight: 600;
    color: #475569;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wcd-account-value {
    color: #1e293b;
    font-size: 15px;
}

.wcd-progress-container {
    position: relative;
    background: #f1f5f9;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin: 8px 0;
}

.wcd-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #266ECC, #3b82f6);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.wcd-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.wcd-warning-card {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.wcd-warning-icon {
    color: #f59e0b;
    margin-top: 2px;
}

.wcd-warning-content {
    flex: 1;
}

.wcd-warning-content strong {
    color: #92400e;
}

.wcd-warning-content a {
    color: #b45309;
    font-weight: 600;
}

.wcd-api-token-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin: 8px 0;
}

.wcd-api-token-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.wcd-token-toggle {
    background: #266ECC;
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.wcd-token-toggle:hover {
    background: #1e5bb8;
}

.wcd-token-toggle .dashicons {
   
    font-size: 16px;
}

.wcd-security-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 13px;
    color: #b91c1c;
}

.wcd-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

.wcd-cta-card {
    background: linear-gradient(135deg, #266ECC 0%, #3b82f6 100%);
    color: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.wcd-cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.wcd-cta-card h3 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
}

.wcd-cta-description {
    margin-bottom: 20px;
    opacity: 0.9;
    line-height: 1.5;
}

.wcd-cta-button {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.wcd-cta-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    text-decoration: none;
    color: white;
}

.wcd-plan-badge {
    display: inline-block;
    background: linear-gradient(90deg, #10b981, #059669);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.wcd-upgrade-link {
    color: #266ECC;
    text-decoration: none;
    font-weight: 600;
    margin-left: 8px;
}

.wcd-upgrade-link:hover {
    text-decoration: underline;
}

/* Responsive design for modern dashboard */
@media (max-width: 768px) {
    .wcd-dashboard-grid,
    .wcd-cta-grid {
        grid-template-columns: 1fr;
    }
}

/* Modern Auto-Update Settings Styles */
.add-group {
    background: linear-gradient(135deg, #266ECC 0%, #3b82f6 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: white !important;
    padding: 16px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(38, 110, 204, 0.3) !important;
    transition: all 0.2s ease !important;
    margin-right: 12px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.add-group:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(38, 110, 204, 0.4) !important;
    background: linear-gradient(135deg, #1e5bb8 0%, #2563eb 100%) !important;
    color: white !important;
}

.accordion-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.accordion-container:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    /* Remove transform to prevent popup positioning conflicts */
    transform: none !important;
}

/* Default (disabled) state - red borders */
.accordion-container[data-auto_enabled="0"],
.accordion-container[data-manual_enabled="0"],
.accordion-container[data-auto_enabled],
.accordion-container[data-manual_enabled],
.accordion-container.failed-queues-accordion {
    border-left: 4px solid #dc2626;
    border-right: 4px solid #dc2626;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.02) 0%, #ffffff 100%);
}

/* Enabled state - green borders */
.accordion-container[data-auto_enabled="1"],
.accordion-container[data-manual_enabled="1"] {
    border-left: 4px solid #10b981;
    border-right: 4px solid #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.02) 0%, #ffffff 100%);
}


/* Subaccount Design */
.wcd-account-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wcd-account-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wcd-account-label {
    font-weight: 600;
    color: #475569;
    font-size: 14px;
}

.wcd-account-value {
    color: #1e293b;
    font-size: 16px;
}

.wcd-progress-container {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.wcd-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.wcd-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.wcd-api-token-section {
    margin-top: 8px;
}

.wcd-api-token-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.wcd-token-toggle {
    background: none;
    color: initial;
}

.wcd-token-toggle dashicons {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #64748b;
    transition: all 0.2s ease;
}

.wcd-token-toggle:hover dashicons {
    background-color: #e2e8f0;
    color: #475569;
}

/* Logs Design */
.wcd-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.wcd-status-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.wcd-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    width: fit-content;
}

.wcd-status-open {
    background-color: #fef3c7;
    color: #92400e;
}

.wcd-status-processing {
    background-color: #dbeafe;
    color: #1e40af;
}

.wcd-status-done {
    background-color: #d1fae5;
    color: #065f46;
}

.wcd-status-failed {
    background-color: #fee2e2;
    color: #991b1b;
}

.wcd-status-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.wcd-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.wcd-type-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.wcd-type-item:hover {
    border-color: #266ECC;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.wcd-type-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #266ECC;
    color: white;
    border-radius: 8px;
    font-size: 20px;
}

.wcd-type-content h4 {
    margin: 0 0 8px 0;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
}

.wcd-type-content p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

/* Modern Filter Design */
.wcd-filter-form {
    margin: 0;
}

.wcd-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: end;
}

.wcd-filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wcd-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #475569;
    font-size: 14px;
    margin: 0;
}

.wcd-filter-label .dashicons {
    font-size: 16px;
    color: #266ECC;
}

.wcd-filter-input {
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background-color: #ffffff;
    transition: all 0.2s ease;
    color: #1e293b;
}

.wcd-filter-input:focus {
    outline: none;
    border-color: #266ECC;
    box-shadow: 0 0 0 3px rgba(38, 110, 204, 0.1);
}

.wcd-filter-input:hover {
    border-color: #cbd5e1;
}

.wcd-filter-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-end;
}

.wcd-filter-actions .et_pb_button {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 0;
    white-space: nowrap;
    padding: 10px 20px;
}

.wcd-reset-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    justify-content: center;
}

.wcd-reset-link:hover {
    color: #475569;
    background-color: #f1f5f9;
    text-decoration: none;
}

.wcd-reset-link .dashicons {
    font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wcd-filter-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .wcd-filter-actions {
        grid-column: 1;
    }
}

.mm_accordion_title {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease;
}

.mm_accordion_title:hover {
    background: rgba(38, 110, 204, 0.03) !important;
    z-index: auto !important;
}

.mm_accordion_title h3 {
    padding: 24px !important;
    margin: 0 !important;
    background: transparent !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border-radius: 0 !important;
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
}

.accordion-state-icon-position {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2;
}

.accordion-state-icon {
    font-size: 24px !important;
    color: #64748b !important;
    transition: all 0.3s ease !important;
}

.ui-accordion-header-active .accordion-state-icon {
    transform: rotate(90deg) !important;
    color: #266ECC !important;
}

.box.third.accordion-group-name {
    padding-left: 60px !important;
    padding-right: 20px !important;
}

.box.third,
.box.fifth {
    padding: 8px 12px;
}

.box.third small,
.box.fifth small {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.box.third strong,
.box.fifth strong {
    color: #1e293b;
    font-weight: 600;
    font-size: 15px;
}

.enabled-switch.auto-enabled {
    
    
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 0 !important;
    margin-top: 10px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    min-width: 100px !important;
    min-height: 90px !important;

}

.enabled-switch.auto-enabled:hover {
    background: #f1f5f9 !important;
    border-color: #266ECC !important;
}

.enabled-switch .enabled-description {
    font-size: 11px !important;
    margin-top: 8px !important;
    line-height: 1.2 !important;
}

.enabled-switch .enabled-description.enabled {
    color: #059669 !important;
    font-weight: 600 !important;
}

.enabled-switch .enabled-description.disabled {
    color: #dc2626 !important;
    font-weight: 600 !important;
}

.enabled_switch {
    border-radius: 8px;
   padding-bottom: 10px;
    margin: 0;
    transition: all 0.2s ease;
}



.switch {
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #e2e8f0 !important;
}

.slider {
    background-color: #cbd5e1 !important;
    border-radius: 20px !important;
}

.slider:before {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
}

input:checked + .slider {
    background-color: #266ECC !important;
}

input:checked + .slider:before {
    box-shadow: 0 2px 8px rgba(38, 110, 204, 0.3) !important;
}

.mm_accordion_content {
    background: #fafbfc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 24px !important;
}

.mm_accordion_content .et_pb_button {
    background: #266ECC !important;
    border: 1px solid #266ECC !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(38, 110, 204, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mm_accordion_content .et_pb_button:hover {
    background: #1e5bb8 !important;
    border-color: #1e5bb8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(38, 110, 204, 0.3) !important;
    color: white !important;
}

.mm_accordion_content .et_pb_button.group_settings_button {
    background: #64748b !important;
    border-color: #64748b !important;
}

.mm_accordion_content .et_pb_button.group_settings_button:hover {
    background: #475569 !important;
    border-color: #475569 !important;
}

.mm_accordion_content .change_detections_button {
    background: #10b981 !important;
    border-color: #10b981 !important;
    margin-right: 10px;
}

.mm_accordion_content .change_detections_button:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

.ajax-group-urls {
    border-radius: 8px;
    margin-top: 20px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

/* Make ajax-group-urls tables full width inside accordion content */
.mm_accordion_content .ajax-group-urls {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

.mm_accordion_content .ajax-group-urls table {
    width: 100% !important;
    table-layout: auto;
    border-collapse: collapse;
}

.mm_accordion_content .ajax-group-urls table tr {
    border-top: 1px solid #fff;
}

.mm_accordion_content .ajax-group-urls .responsive-table {
    width: 100%;
    overflow-x: auto;
}

.mm_accordion_content .ajax-group-urls .url-table {
    width: 100%;
    min-width: 100%;
}

.required-credits {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.required-credits .box {
    text-align: center !important;
    padding: 16px !important;
}

.required-credits .box .big {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 8px 0 !important;
}

.required-credits .box small,
.required-credits .box div:not(.big) {
    color: #64748b !important;
    font-size: 14px !important;
}

#auto-detection-status-container.active {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
    border-color: #10b981 !important;
}

#auto-detection-status-container:not(.active) {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%) !important;
    border-color: #f59e0b !important;
}

.tablenav {
    margin-top: 24px !important;
    padding: 20px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

.tablenav-pages-navspan.et_pb_button {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    margin: 0 2px !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

.tablenav-pages-navspan.et_pb_button:hover:not(.disabled) {
    background: #266ECC !important;
    border-color: #266ECC !important;
    color: white !important;
}

.tablenav-pages-navspan.et_pb_button.disabled {
    background: #f9fafb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}

.displaying-num {
    color: #64748b !important;
    font-weight: 500 !important;
    margin-left: 16px !important;
}

/* Form styling for better integration */

#btn-start-update-detection {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: white !important;
    padding: 16px 32px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.2s ease !important;
}

#btn-start-update-detection:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

/* Responsive adjustments for auto-update settings */
@media (max-width: 768px) {
    .accordion-container {
        margin: 0 -10px 20px -10px;
        border-radius: 8px;
    }
    
    .mm_accordion_title h3 {
        padding: 16px !important;
        min-height: auto !important;
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .box.third.accordion-group-name {
        padding-left: 50px !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .box.third,
    .box.fifth {
        width: 100% !important;
        margin-bottom: 8px !important;
        padding: 4px 12px !important;
    }
    
    .enabled-switch.auto-enabled {
        position: relative !important;
        left: 0 !important;
        margin-bottom: 12px !important;
        display: inline-block !important;
    }
    
    .enabled_switch {
        margin-bottom: 12px !important;
    }
    
    .accordion-state-icon-position {
        left: 12px !important;
        top: 20px !important;
    }
}



/* Modern Monitoring and Manual Checks Tables */
.mm_wp_compare table.toggle.modern-settings {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    background: white;
    margin-bottom: 20px;
}

.mm_wp_compare table.toggle.modern-settings thead tr {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.mm_wp_compare table.toggle.modern-settings thead th {
    padding: 14px 18px;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #cbd5e1;
    font-size: 14px;
}

.mm_wp_compare table.toggle.modern-settings tbody tr {
    transition: background-color 0.15s ease;
}

.mm_wp_compare table.toggle.modern-settings tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

.mm_wp_compare table.toggle.modern-settings tbody tr:hover {
    background-color: #f1f5f9;
}

.mm_wp_compare table.toggle.modern-settings tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

/* Modern Button Styling for Popups */
.modern-button {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: white !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    min-width: 120px !important;
    text-align: center !important;
    margin-top: 10px;
}

.modern-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4) !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
}

.modern-button.secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    box-shadow: 0 3px 10px rgba(107, 114, 128, 0.3) !important;
}

.modern-button.secondary:hover {
    box-shadow: 0 5px 15px rgba(107, 114, 128, 0.4) !important;
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}

.modern-button.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3) !important;
}

.modern-button.success:hover {
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4) !important;
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.modern-button.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3) !important;
}

.modern-button.danger:hover {
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4) !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

.modern-button.close-popup-button {
    min-width: 40px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Modern Detection Summary Styling */
.wcd-detection-summary-container {
    max-width: 100%;
    margin: 15px auto 25px auto;
}

.wcd-section-headline {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Visual Changes Section */
.wcd-visual-changes-section,
.wcd-console-changes-section,
.wcd-comparison-tiles {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.wcd-visual-diff-display {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    margin: 0;
}

.wcd-diff-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.wcd-diff-percentage {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.wcd-diff-label {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

.wcd-threshold-note {
    font-size: 12px;
    margin-top: 8px;
    opacity: 0.7;
}

/* Visual diff color coding - maintaining existing logic */
.wcd-visual-diff-display[data-diff_percent="0"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.wcd-visual-diff-display[data-diff_percent]:not([data-diff_percent="0"]) {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.wcd-visual-diff-display[data-diff_percent^="1"],
.wcd-visual-diff-display[data-diff_percent^="2"],
.wcd-visual-diff-display[data-diff_percent^="3"],
.wcd-visual-diff-display[data-diff_percent^="4"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

/* Browser Console Section */
.wcd-console-display {
    min-height: 60px;
}

.wcd-console-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.wcd-console-changed {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.wcd-console-unchanged {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

/* Console indicator status-specific background colors */
.wcd-console-indicator.removed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.wcd-console-indicator.added {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.wcd-console-indicator.mixed {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

/* Console changes section styling for popup - green when entries removed */
.wcd-console-changes-section.console-removed .wcd-console-indicator,
.wcd-console-changes-section.only-removed .wcd-console-indicator {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.wcd-console-changes-section.console-removed,
.wcd-console-changes-section.only-removed {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, #ffffff 100%);
}

.wcd-console-status {
    font-weight: 600;
    font-size: 14px;
}

.wcd-console-logs {
    background: #1e1e1e;
    border-radius: 8px;
    padding: 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
}

.wcd-console-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    padding: 4px 0;
}

.wcd-console-entry:last-child {
    margin-bottom: 0;
}

.wcd-console-prefix {
    font-weight: 700;
    min-width: 12px;
    display: inline-block;
}

.wcd-console-added .wcd-console-prefix {
    color: #ef4444;
}

.wcd-console-removed .wcd-console-prefix {
    color: #22c55e;
}

.wcd-console-message {
    color: #f1f5f9;
    word-break: break-word;
    flex: 1;
}

.wcd-console-added .wcd-console-message {
    background: rgba(239, 68, 68, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border-left: 2px solid #ef4444;
}

.wcd-console-removed .wcd-console-message {
    background: rgba(34, 197, 94, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border-left: 2px solid #22c55e;
    text-decoration: line-through;
    opacity: 0.7;
}

.wcd-console-info .wcd-console-message {
    color: #94a3b8;
    font-style: italic;
}

.wcd-console-more {
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
    margin-top: 8px;
    text-align: center;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .wcd-detection-summary-container {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .wcd-visual-changes-section,
    .wcd-console-changes-section {
        padding: 15px;
    }
    
    .wcd-section-headline {
        font-size: 16px;
    }
    
    .wcd-diff-percentage {
        font-size: 20px;
    }
    
    .wcd-console-logs {
        font-size: 12px;
    }
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .wcd-changes-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .wcd-console-diff-badge {
        align-self: flex-end;
    }
}



/* Legacy support - keep status_box styles for backward compatibility */



/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .wcd-visual-diff-box,
    .wcd-console-diff-box {
        min-height: 55px;
        padding: 10px 6px;
        border-radius: 10px;
    }
    
    .wcd-visual-percentage {
        font-size: 18px;
    }
    
    .wcd-console-count {
        font-size: 16px;
    }
    
    .wcd-console-diff-box .wcd-console-indicator-badge .dashicons {
        font-size: 20px;
    }
}

/* Console Indicators for Status Areas and Diff Tiles - Updated to match modern status badges */
.wcd-console-indicator-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    margin: 4px 0;
    text-decoration: none;
}

.wcd-console-indicator-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.wcd-console-indicator-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    color: inherit;
}

.wcd-console-count {
    background: rgba(255, 255, 255, 0.25);
    padding: 3px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}

.wcd-console-text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}

/* Individual Comparison Console Badges - Enhanced styling */
.wcd-changes-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.wcd-visual-diff {
    flex: 1;
}

.wcd-console-diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 40px;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    transition: all 0.2s ease;
}

.wcd-console-diff-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(245, 158, 11, 0.3);
}

.wcd-console-diff-badge .dashicons {
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

.wcd-console-diff-count {
    font-weight: 700;
    font-size: 11px;
}

/* Enhanced diff-tile styling for console changes */
.diff-tile.has-console-changes {
    border-left: 3px solid #f59e0b;
    position: relative;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.diff-tile.has-console-changes::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid #f59e0b;
    border-bottom: 10px solid transparent;
    border-top: 10px solid #f59e0b;
}

/* Modern Status Badges */
.wcd-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.wcd-status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.wcd-status-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    color: inherit;
}

.wcd-status-badge.wcd-status-new {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.wcd-status-badge.wcd-status-ok {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.wcd-status-badge.wcd-status-to-fix {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.wcd-status-badge.wcd-status-false-positive {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.wcd-status-badge.wcd-status-failed {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.wcd-status-badge.wcd-status-none {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

/* Console status badge variant */
.wcd-status-badge.wcd-status-console {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.wcd-status-badge.wcd-status-console:hover {
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

/* Smaller status badges for compact display */
.wcd-status-badge.mm_small_status {
    padding: 4px 10px;
    font-size: 12px;
    gap: 4px;
}

.wcd-status-badge.mm_small_status .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Modern Change Detection Table Styling - Updated diff colors */
.mm_wp_compare table.toggle.modern {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    background: white;
}

.mm_wp_compare table.toggle.modern thead tr {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.mm_wp_compare table.toggle.modern thead th {
    padding: 16px 20px;
    font-weight: 600;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
}

.mm_wp_compare table.toggle.modern tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;   
    text-align: left;
}

.mm_wp_compare table.toggle.modern tbody tr:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mm_wp_compare table.toggle.modern tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}

/* Modern row background colors based on diff level - Updated with modern colors */
.mm_wp_compare table.toggle.modern tbody tr.diff-level-0 {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%);
}

.mm_wp_compare table.toggle.modern tbody tr.diff-level-1 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(21, 128, 61, 0.05) 100%);
}

.mm_wp_compare table.toggle.modern tbody tr.diff-level-2 {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.05) 100%);
}

.mm_wp_compare table.toggle.modern tbody tr.diff-level-3 {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(234, 88, 12, 0.05) 100%);
}

.mm_wp_compare table.toggle.modern tbody tr.diff-level-4 {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.mm_wp_compare table.toggle.modern tbody tr.diff-level-5 {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(185, 28, 28, 0.08) 100%);
}

/* Modern diff tiles - Updated with modern colors */
.mm_wp_compare table.toggle.modern .diff-tile {
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    min-width: 70px;
    display: inline-block;
    text-align: center;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.mm_wp_compare table.toggle.modern .diff-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Diff tile colors based on percentage - Modern gradient approach */
.diff-tile[data-diff_percent="0"],
.diff-tile.diff-level-0 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.diff-tile[data-diff_percent^="0."],
.diff-tile.diff-level-1 {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.diff-tile[data-diff_percent^="1"],
.diff-tile[data-diff_percent^="2"],
.diff-tile.diff-level-2 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.diff-tile[data-diff_percent^="3"],
.diff-tile[data-diff_percent^="4"],
.diff-tile.diff-level-3 {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.diff-tile[data-diff_percent^="5"],
.diff-tile[data-diff_percent^="6"],
.diff-tile[data-diff_percent^="7"],
.diff-tile.diff-level-4 {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.diff-tile[data-diff_percent^="8"],
.diff-tile[data-diff_percent^="9"],
.diff-tile.diff-level-5 {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* High diff percentages (10%+) */
.diff-tile[data-diff_percent^="1"][data-diff_percent*="."],
.diff-tile[data-diff_percent^="2"][data-diff_percent*="."],
.diff-tile[data-diff_percent^="3"][data-diff_percent*="."],
.diff-tile[data-diff_percent^="4"][data-diff_percent*="."],
.diff-tile[data-diff_percent^="5"][data-diff_percent*="."],
.diff-tile[data-diff_percent^="6"][data-diff_percent*="."],
.diff-tile[data-diff_percent^="7"][data-diff_percent*="."],
.diff-tile[data-diff_percent^="8"][data-diff_percent*="."],
.diff-tile[data-diff_percent^="9"][data-diff_percent*="."],
.diff-tile[data-diff_percent="100"] {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

/* Separate Visual and Console Change Boxes - Enhanced styling */
.wcd-visual-changes-column,
.wcd-console-changes-column {
    text-align: center;
    vertical-align: middle;
    color: #fff;
    padding: 8px;
}

.wcd-visual-diff-box,
.wcd-console-diff-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 16px 12px;
    min-height: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Visual Changes Box Styling - Enhanced */
.wcd-visual-diff-box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e2e8f0;
}

.wcd-visual-changes-column.is-difference .wcd-visual-diff-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.wcd-visual-percentage {
    font-size: 16px;
    font-weight: 800;
    color: #495057;
    margin-bottom: 6px;
    line-height: 1;
    width: 100%;
    color: #fff;
}

.wcd-visual-changes-column.is-difference .wcd-visual-percentage {
    color: #fff;
    text-shadow: 0 1px 2px rgba(180, 83, 9, 0.1);
}

.wcd-threshold-text {
    font-size: 11px;
    color: #6c757d;
    opacity: 0.85;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-top: 4px;
}

/* Console Changes Box Styling - Enhanced */
.wcd-console-diff-box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e2e8f0;
}

.wcd-console-changes-column.has-console-changes .wcd-console-diff-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

/* Green background for good console scenarios */
.wcd-console-changes-column.no-console-changes .wcd-console-diff-box,
.wcd-console-changes-column.only-removed .wcd-console-diff-box {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.wcd-console-diff-box .wcd-console-indicator-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    text-shadow: none;
}

.wcd-console-diff-box .wcd-console-indicator-badge .dashicons {
    font-size: 24px;
    color: #f59e0b;
    margin-bottom: 4px;
}

/* Green scenario console indicator styling */
.wcd-console-changes-column.no-console-changes .wcd-console-diff-box .wcd-console-indicator-badge .dashicons,
.wcd-console-changes-column.only-removed .wcd-console-diff-box .wcd-console-indicator-badge .dashicons {
    color: #059669;
}

.wcd-console-diff-box .wcd-console-count {
    font-size: 20px;
    font-weight: 800;
    color: #b45309;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(180, 83, 9, 0.1);
    background: none;
    padding: 0;
    border-radius: 0;
    min-width: auto;
}

.wcd-console-changes-column.no-console-changes .wcd-console-diff-box .wcd-console-count,
.wcd-console-changes-column.only-removed .wcd-console-diff-box .wcd-console-count {
    color: #047857;
    text-shadow: 0 1px 2px rgba(4, 120, 87, 0.1);
}

.wcd-console-diff-box .wcd-console-text {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 4px;
    margin-left: 0;
}

.wcd-no-console-changes {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.wcd-console-none-text {
    font-size: 12px;
    color: #6c757d;
    opacity: 0.7;
}

/* Hover effects - Enhanced */
.wcd-visual-diff-box:hover,
.wcd-console-diff-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.wcd-visual-changes-column.is-difference .wcd-visual-diff-box:hover {
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

.wcd-console-changes-column.has-console-changes .wcd-console-diff-box:hover {
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

.wcd-console-changes-column.no-console-changes .wcd-console-diff-box:hover,
.wcd-console-changes-column.only-removed .wcd-console-diff-box:hover {
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}