/* ======================================================
 # Monthly Archive for Joomla! - v4.7.2 (pro version)
 # -------------------------------------------------------
 # For Joomla! CMS (v4.x)
 # Author: Web357 (Yiannis Christodoulou)
 # Copyright: (©) 2014-2024 Web357. All rights reserved.
 # License: GNU/GPLv3, https://www.gnu.org/licenses/gpl-3.0.html
 # Website: https://www.web357.com
 # Demo: https://demo-joomla.web357.com/monthly-archive
 # Support: support@web357.com
 # Last modified: Tuesday 15 April 2025, 01:01:52 AM
 ========================================================= */
/*
 * 1. Prevent content overflow if a fixed width is used
 * 2. Take the full width
 * 3. Reset default
 * 4. Style
 */
.w357ui-input.ma-input,
.w357ui-select.ma-select {
    /* 1 */
    max-width: 100%;
    /* 2 */
    width: 100%;
    /* 3 */
    border: 0 none;
    /* 4 */
    padding: 0 6px;
    background: #fff;
    color: #666;
    border: 1px solid #e5e5e5;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    -webkit-transition-property: color, background-color, border;
    transition-property: color, background-color, border;
}
/*
 * Single-line
 * 1. Allow an `a` element to look like a `input` or `select` element
 * 2. Make sure line-height is not larger than height
 *    Also needed to center the text vertically if `a` element is used
 */
.w357ui-input.ma-input,
.w357ui-select:not([multiple]):not([size]),
.ma-select:not([multiple]):not([size]) {
    height: 40px;
    vertical-align: middle;
    /* 1 */
    display: inline-block;
    /* 2 */
    line-height: 38px;
}
/*
 * Multi-line
 */
.w357ui-select[multiple],
.w357ui-select[size],
.ma-select[multiple],
.ma-select[size] {
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: top;
}
/* Focus */
.w357ui-input:focus,
.w357ui-select:focus,
.ma-input:focus,
.ma-select:focus {
    outline: 0;
    background-color: #fff;
    color: #666;
    border-color: #1e87f0;
}
/* Disabled */
.w357ui-input:disabled,
.w357ui-select:disabled,
.ma-input:disabled,
.ma-select:disabled {
    background-color: #f8f8f8;
    color: #999;
    border-color: #e5e5e5;
}
/*
 * Placeholder
 */
.w357ui-input:-ms-input-placeholder,
.ma-input:-ms-input-placeholder {
    color: #999 !important;
}
.w357ui-input::-moz-placeholder,
.ma-input::-moz-placeholder {
    color: #999;
}
.w357ui-input::-webkit-input-placeholder,
.ma-input::-webkit-input-placeholder {
    color: #999;
}

/* filter date */
.w357ui-select.ma-filter-date-all {
    background: #ddd;
}
.w357ui-select.ma-filter-date-year {
    background: #f2f2f2;
}
.w357ui-select.ma-filter-date-month {
    background: #fff;
}
.ma-pagination .limit.pull-right {
    display: none;
}

/* display modal in front of other elements */
.w357ui-modal.w357ui-open,
.w357ui-modal-container {
    z-index: 99999;
}

/* do not use any type of list styles */
#ma-container .ma-list {
    margin-bottom: 35px !important;
}
#ma-container .ma-list.ma-list-only-years,
#ma-container .ma-list.ma-list-only-months,
#ma-container .ma-list.ma-list-accordion {
    margin-bottom: 0 !important;
}

#component ul.w357ui-list.ma-list li, /* fix for joomlaxtc templates */
ul.w357ui-list.ma-list li {
    list-style: none !important;
    margin: 0 0 15px 0;
    padding: 0;
    border: none;
    list-style-type: none;
    background: none;
}

/* increase the font-size of some elements */
.w357ui-button {
    font-size: inherit;
}

/**
 * Tooltip Style
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 1030;
    cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: -10px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #666;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* fix icon button height in IE */
.ma-fieldset span.w357ui-icon {
    width: 16px;
    height: 16px;
}

/* Do not display content item in front of other template elements like sticky menu */
.ma-content-item {
    z-index: 1;
}

/* Reset the height of button */
.ma-clear-btn {
    height: 100%;
}

/* Highlight the matched search word  */
.ma-highlight-search-word {
    background-color: yellow;
    padding: 2px;
    color: red;
    font-weight: bold;
}

/* make sure that the alert popup is over other divs */
.com_monthlyarchive .wrap {
    /*z-index: 0 !important;*/
}

/* conflicts with UIkit 2 */
.w357ui-grid-match {
    visibility: visible !important;
}

/* Always use black color in the modal window of dark themes. */
.w357ui-modal-body {
    color: #000;
}

/* Custom Fields */
.ma-custom-fields.ma-above-intro-text {
    margin-bottom: 10px;
}
.ma-custom-fields.ma-below-intro-text {
    margin-top: 10px;
}
.ma-custom-fields .custom-field-label {
    font-weight: 700;
}
.ma-custom-fields .custom-field-value {
}