/*
Theme Name: Color MagazineX Child
Theme URI: https://mysterythemes.com/wp-themes/color-magazinex
Template: color-magazinex
Author: Mystery Themes
Author URI: https://mysterythemes.com
Description: Introducing our captivating Color MagazineX Theme - a dynamic and visually immersive platform designed to elevate your online publication to new heights. With its sleek and modern layout, seamless navigation, and customizable features, our theme empowers you to showcase a diverse range of content with style and finesse.With WordPress customizer, you can easily add a site logo, change colors, typography options and enhanced slider layouts with instant preview. It comes with pre-made demos that you can import to set up a well-designed professional website quickly. This theme has powerful features like a sticky header, category colors, and many more. Check the demo here: https://preview.mysterythemes.com/color-magazinex/
Tags: blog,portfolio,news,grid-Layout,one-column,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-logo,custom-menu,editor-style,full-width-template,footer-widgets,rtl-language-support,theme-options,translation-ready,block-styles,wide-blocks
Version: 1.0.4.1748095484
Updated: 2025-05-24 14:04:44



/* --- Fieldset and Legend Styles --- */

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.main_div_container {
    border: 1px solid #ced4da;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 90%;
    max-width: 800px;
    margin: 50px auto;
    text-align: left;
    background-color: #fff;
    overflow: hidden;
}
.main_div_container fieldset {
    border: 1px solid #dee2e6; /* Light gray border */
    padding: 20px;
    margin-bottom: 25px; /* Space below the fieldset */
    border-radius: 6px; /* Slightly rounded corners */
    background-color: #fcfcfc; /* Very subtle background */
     width: 100%;
}

.main_div_container legend {
    font-size: 1.2em; /* Slightly larger for prominence */
    font-weight: bold;
    padding: 0 10px; /* Space around the text in the legend */
    color: #007bff; /* Primary brand blue for headings */
    background-color: #fff; /* Match container background to "cut out" legend */
    border-radius: 4px; /* Small border-radius for consistency */
    margin-left: -5px; /* Adjust to align with fieldset border */
}


.div_message {
    max-width: 700px;
    margin: 20px auto;
    padding: 15px;
    background-color: #e6f2ff;
    border: 1px solid #cce5ff;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    color: #004085;
     border: 2px solid #dee2e6;
}

.div_table_caption {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    /*background-color: #f8f9fa;*/
    background-color: #e6f2ff;
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    color: #333;
    border-radius: 8px;
     border: 2px solid #dee2e6;
}

.div_table_row_header {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    gap: 10px;
    background-color: #343a40;
    font-weight: bold;
    border-bottom: 1px solid #e9ecef;
    color: #fff;
    padding: 10px 0;
    align-items: center;
    text-align: center;
}
.div_table_row_header > div {
  padding: 0 10px;
}

.div_table_row {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    align-items: center;
     border: 1px solid #dee2e6;
}

.div_table_cell {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    min-width: 0;
    word-break: break-word;
    white-space: normal;
}

.div_table_cell_label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    background-color: #f0f0f0;
    text-align: left;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    min-width: 0;
    word-break: break-word;
    white-space: normal;
}

.div_table_row_footer .div_table_cell {
     justify-content: center;
     padding: 0 10px;
}

.div_table_row_footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background-color: #f8f9fa;
    font-weight: bold;
    border-top: 1px solid #e9ecef;
    color: #333;
    padding: 15px 0;
    justify-items: center;
    align-items: center;
}

.main_div_container input[type="text"],
.main_div_container input[type="email"],
.main_div_container input[type="password"],
.main_div_container input[type="number"],
.main_div_container input[type="url"],
.main_div_container input[type="date"],
.main_div_container input[type="time"],
.main_div_container input[type="search"],
.main_div_container input[type="tel"],
.main_div_container textarea,
.main_div_container select {
    width: 100%;
    padding: 10px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
     border: 2px solid #dee2e6;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.main_div_container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    text-align: left;
}

.main_div_container input[type="text"]:focus,
.main_div_container input[type="email"]:focus,
.main_div_container input[type="password"]:focus,
.main_div_container input[type="number"]:focus,
.main_div_container input[type="url"]:focus,
.main_div_container input[type="date"]:focus,
.main_div_container input[type="time"]:focus,
.main_div_container input[type="search"]:focus,
.main_div_container input[type="tel"]:focus,
.main_div_container textarea:focus,
.main_div_container select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.main_div_container input::placeholder,
.main_div_container textarea::placeholder {
    color: #999;
    opacity: 1;
}

.main_div_container select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23333" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
    padding-right: 30px;
}

.main_div_container input[type="submit"],
.main_div_container input[type="button"],
.main_div_container button[type="submit"],
.main_div_container button[type="button"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    min-width: 120px;
    font-weight: bold;
}

.main_div_container input[type="submit"]:hover,
.main_div_container input[type="button"]:hover,
.main_div_container button[type="submit"]:hover,
.main_div_container button[type="button"]:hover {
    background-color: #0056b3;
}

@media (max-width: 768px) {

    .main_div_container {
        padding: 15px;
        width: 95%;
    }

    /* Adjust fieldset padding for smaller screens */
    .main_div_container fieldset {
        padding: 15px;
        margin-bottom: 20px;
    }

    .div_table_row_header,
    .div_table_row,
    .div_table_row_footer {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
          
    }
    

    .div_table_row_header > div,
    .div_table_cell_label,
    .div_table_cell {
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
        background-color: transparent;
        color: #333;
        text-align: left;
        font-weight: normal;
         display: grid;
         align-items: center;
         /*grid-template-columns:   1fr;*/
        /*gap: 0;*/
        /*padding: 0;*/

    }

    .div_table_row_header > div {
        background-color: #f8f9fa;
        font-weight: bold;
        color: #333;
    }
    .div_table_cell_label {
        background-color: #f0f0f0;
        font-weight: bold;
        padding-bottom: 5px;
    }
    .div_table_cell {
        padding-top: 5px;
    }

    .div_table_row > .div_table_cell:last-child,
    .div_table_row > .div_table_cell_label:last-child {
        border-bottom: none;
    }

    .div_table_row_footer .div_table_cell {
        justify-content: flex-start;
        padding: 10px 15px;
        text-align: left;
    }
    .div_table_row_footer {
        background-color: #f8f9fa;
        color: #333;
    }

    .div_table_cell input,
    .div_table_cell textarea,
    .div_table_cell select {
        margin-top: 5px;
    }

    .main_div_container input[type="submit"],
    .main_div_container input[type="button"],
    .main_div_container button[type="submit"],
    .main_div_container button[type="button"] {
        width: 100%;
        margin-top: 10px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .main_div_container {
        width: 90%;
    }
}


/*.div_table_cell_label {*/
/*    flex: 0.5;*/
/*    padding: 10px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    font-size: 14px;*/
/*    font-weight: bold;*/
/*    background-color: #d9edf7;*/
/*    color: #31708f;*/
/*    border-right: 1px solid #eee;*/
/*    text-align: center;*/
/*    min-width: 0;*/
/*    word-break: break-word;*/
/*    white-space: normal;*/
/*}*/

.general_table_classs {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
}

.general_table_classs caption {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    background-color: lightgreen;
    text-align: center;
    padding: 12px;
    color: #333;
}

.general_table_classs th,
.general_table_classs td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    word-break: break-word;
}

.general_table_classs th {
    background-color: #f0f0f0;
    color: #333;
}





/* --- TFOOTER STYLES --- */
.general_table_classs tfoot {
    background-color: #e6e6e6; /* Lighter grey for footer */
    font-weight: bold;
    border-top: 2px solid #ccc; /* Stronger top border to separate from body */
}

.general_table_classs tfoot th,
.general_table_classs tfoot td {
    border-top: 1px solid #aaa; /* Slightly darker border for footer cells */
    text-align: right; /* Often total/summary cells are right-aligned */
    padding: 12px 10px; /* More padding for importance */
}



/* --- RESPONSIVE TABLE STYLES (Mobile/Smaller Screens) --- */
@media (max-width: 768px) {

    .general_table_classs,
    .general_table_classs thead,
    .general_table_classs tbody,
    .general_table_classs tfoot, /* Added tfoot to display block */
    .general_table_classs th,
    .general_table_classs td,
    .general_table_classs tr {
        display: block;
    }

    .general_table_classs {
        border: none;
        overflow-x: unset;
        width: 100%;
    }

    .general_table_classs thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    /* Ensure tfoot row is visible */
    .general_table_classs tfoot tr {
        border: 1px solid #a0a0a0; /* Stronger border for the summary card */
        background-color: #e6e6e6; /* Keep footer background */
        box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* More prominent shadow */
    }

    .general_table_classs tr {
        border: 1px solid #ddd;
        margin-bottom: 15px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .general_table_classs td,
    .general_table_classs tfoot th, /* Added tfoot th to stack like cells */
    .general_table_classs tfoot td { /* Added tfoot td to stack like cells */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 10px;
        text-align: right;
        word-break: break-word;
        min-height: 30px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* Create "labels" from data-label attributes for each cell (td AND th in tfoot) */
    .general_table_classs td::before,
    .general_table_classs tfoot th::before, /* Added for tfoot th cells */
    .general_table_classs tfoot td::before { /* Added for tfoot td cells */
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
        color: #333;
        flex-shrink: 0;
    }
    /* Specific styles for footer labels */
    .general_table_classs tfoot th::before,
    .general_table_classs tfoot td::before {
        color: #007cba; /* Highlight footer labels */
    }


   

   

    .general_table_classs tr:hover {
        background-color: #f2f2f2;
    }
   
}

@media (min-width: 769px) and (max-width: 1024px) {
    .main_div_container {
        width: 90%;
    }
}