/* old component */
.pagination {margin: 2% auto 1% auto; font-size:0;}
.pagination .inline-block {display: inline-block; text-decoration: none; -webkit-border-radius: 1px;border-radius: 3px; font-size: 14px; font-family: 'robotomedium'; font-weight: 500; text-align: center;  -webkit-transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s; line-height: 32px; vertical-align: top; border: none; min-width: 30px; margin: 0 1px;}
.pagination .inline-block.pagination_next {margin-left: 3px;}
.pagination .inline-block.pagination_prev {margin-right: 3px;}
.pagination .inline-block.pagination_ellipsis {min-width:15px;}
.pagination .inline-block:not(.active):not(:hover), .pagination .inline-block.disabled {background: transparent; color: inherit;}
.pagination .inline-block.disabled {opacity:0.5;}
.pagination .inline-block.active  {padding: 0px 7px 0px 7px; background: transparent;}
.pagination .inline-block > a  {color: inherit; text-decoration: none; text-align: center; padding: 0px 7px 0px 7px; display: inline-block; width: 100%; height: 100%;}
.pagination .inline-block .i, .pagination .inline-block a.i {font-size:25px; line-height: 23px; vertical-align: middle; padding: 0 2px;}
.pagination .inline-block a.i:not(:hover) {opacity:0.8;}

.dynamic_pagination { display: block; margin: 2% 0 1% 0; text-decoration: none;  font-family: 'robotomedium'; font-weight: 500; font-size: 14px; text-align: center; cursor: pointer; -webkit-transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s; line-height: 50px; vertical-align: top;}
.dynamic_pagination:not(:hover) {background: transparent;}
.dynamic_pagination:hover {border-color: transparent !important;}
/* old component */

/* new component */
:root {
	--square_button_padding: 4px;
}
.pagination .button {color: var(--mt-color-gray-700); background: transparent; border: none; font-size: 14px; font-family: 'robotomedium', sans-serif; font-weight: 500; line-height: 20px;}
.pagination .button .inlay {padding: var(--square_button_padding); min-width: 34px; height: 34px; width: 34px; display: flex; align-items: center; justify-content: center;}
.pagination .button.disabled {color: var(--mt-color-gray-700); background: transparent; opacity:0.5;}
.pagination .button .i {font-size:26px;}
.pagination a.button:hover {background: var(--mt-color-primary-200); color: var(--mt-color-primary-500);}
.pagination a.button:active {background: var(--mt-color-primary-300);}

.pagination .pagination_next {margin-left: 3px;}
.pagination .pagination_prev {margin-right: 3px;}
.pagination .current_page {padding: 0px 7px 0px 7px; color: var(--mt-color-primary-500); line-height: 34px;}
.pagination .pagination_ellipsis {min-width:15px;}

.button.dynamic_pagination {line-height: 26px; display: block; margin: 2% 0 1% 0; text-align: center; vertical-align: top; background: transparent; color: var(--mt-color-gray-800); border: none !important; background: var(--mt-color-gray-300) !important; border-radius: 6px; font-family: 'robotomedium', sans-serif; font-size: 14px; font-weight: 500;}
.button.dynamic_pagination .inlay {padding: 12px 20px; border-radius: 6px;}
.button.dynamic_pagination span {color: var(--mt-color-gray-800);}
.button.dynamic_pagination:hover {background: var(--mt-color-gray-200) !important;}
.button.dynamic_pagination:active {background: var(--mt-color-gray-400) !important;}

.pagination_wrapper .preloader { position: relative; top: 0; bottom: 0; left: 0; right: 0;}

/* new component */

@media (max-width: 768px) {
	section.pagination_wrapper, section.pagination_wrapper.col3 {width: 90% !important; margin: 0 auto;}
	.dynamic_pagination {margin-bottom:2%;}
	.dynamic_pagination + .pagination {margin-top: 3%;}
}