/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21 de jun de 2021, 17:05:52
    Author     : LucasLacroix
*/

@charset "UTF-8";
/* CSS Document */

.mt-intro-tooltip.introjs-tooltip {
    max-width: 100%;
}

li.menu-tag-beta,
li.menu-tag-novo,
li.menu-tag-novidade{
    position: relative;
}

li.menu-tag-beta::after,
li.menu-tag-novo::after,
li.menu-tag-novidade::after{
    color: white;
    font-size: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    padding: 2px 10px;
    background-color: var(--mt-error-color);
    border-radius: 10px;
    font-weight: 700;
}


li.menu-tag-beta::after {
    content: 'BETA';
}

li.menu-tag-novo::after {
    content: 'NOVO';
}

li.menu-tag-novidade::after {
    content: 'NOVIDADE';
}

.mt-badge > a.ripplelink::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 1px;
}

/*{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 35px;
  transform: translateY(-50%);
}*/

@media (max-width: 991px){
    li.menu-tag-beta::after,
    li.menu-tag-novo::after,
    li.menu-tag-novidade::after{
        right: 40px;
    }
}



:root {
    --surface-a: #ffffff;
    --surface-b: #efefef;
    --surface-c: #e9ecef;
    --surface-d: #dee2e6;
    --surface-e: #ffffff;
    --surface-f: #ffffff;
    --text-color: #212529;
    --text-color-secondary: #707070;
    --primary-color: #512d6d;
    --primary-color-text: #ffffff;
    --font-family: "Inter", sans-serif;
}

@font-face {
    font-family: "Inter";
    font-variant-numeric: tabular-nums;
    src: url("/resources/font/Inter.ttf");
}

html{
    font-family: "Inter", sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
}

body .ui-widget{
    font-family: "Inter", sans-serif;
    font-variant-numeric: tabular-nums;
}

body .ui-datatable .ui-datatable-data > tr.ui-state-highlight,
body .ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-odd.ui-state-highlight{
    background: #e1efff;
    color: var(--text-color);
}

/**
    CARD
*/

/*.card {
    border-radius: 15px;
}*/

/**
    LINK BUTTONS

    // 15/10/2021
    // Com LinkButton normal estava vindo a classe ui-button-text-icon-right, 
    // que estava colocando um padding a mais na direita (BUG DO PRIMEFACES).
    // Então resetei o padding pois no sistema nunca é usado icone na direita.
*/
body .ui-button.ui-button-text-icon-right .ui-button-text {
    padding: 0.5rem 0.75rem;
}


/**
    BUTTONS
*/

/** White Outlined */
body .ui-button.ui-button-white.ui-button-outlined, body .ui-splitbutton.ui-button-white > .ui-button.ui-button-outlined {
    background-color: transparent;
    color: #fff;
    border: 1px solid;
}

body .ui-button.ui-button-white.ui-button-outlined.ui-state-hover, body .ui-splitbutton.ui-button-white > .ui-button-outlined.ui-button.ui-state-hover,
body .ui-button.ui-button-white.ui-button-outlined.ui-state-active, body .ui-splitbutton.ui-button-white > .ui-button-outlined.ui-button.ui-state-active{
    background: #fff;
    border-color: #fff;
    color: var(--mt-gray-color);
}

/** MT Gray */
body .ui-button.mt-button-gray, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: #7d848a;
    color: #ffffff;
    border: 1px solid #7d848a;
}

body .ui-button.mt-button-gray.ui-state-hover, body .ui-splitbutton.mt-button-gray > .ui-button.ui-state-hover,
body .ui-button.mt-button-gray.ui-state-active, body .ui-splitbutton.mt-button-gray > .ui-button.ui-state-active{
    background: #5e5e5e;
    border-color: #5e5e5e;
}

body .ui-button.mt-button-gray.ui-state-focus, body .ui-splitbutton.mt-button-gray > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(112, 112, 112, 0.5);
}

/** MT Brown */
body .ui-button.mt-button-brown, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--mt-brown-color);
    color: #ffffff;
    border: 1px solid var(--mt-brown-color);
}

body .ui-button.mt-button-brown.ui-state-hover, body .ui-splitbutton.mt-button-brown > .ui-button.ui-state-hover,
body .ui-button.mt-button-brown.ui-state-active, body .ui-splitbutton.mt-button-brown > .ui-button.ui-state-active{
    background: #592f3c;
    border-color: #592f3c;
}

body .ui-button.mt-button-brown.ui-state-focus, body .ui-splitbutton.mt-button-brown > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(211, 198, 202, 1);
}

/** MT Black */
body .ui-button.mt-button-black, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: #000;
    color: #ffffff;
    border: 1px solid #000;
}

body .ui-button.mt-button-black.ui-state-hover, body .ui-splitbutton.mt-button-black > .ui-button.ui-state-hover,
body .ui-button.mt-button-black.ui-state-active, body .ui-splitbutton.mt-button-black > .ui-button.ui-state-active{
    background: #333333;
    border-color: #333333;
}

body .ui-button.mt-button-black.ui-state-focus, body .ui-splitbutton.mt-button-black > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5);
}

/** MT Blue */
body .ui-button.mt-button-blue, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--mt-blue-color);
    color: #ffffff;
    border: 1px solid var(--mt-blue-color);
}

body .ui-button.mt-button-blue.ui-state-hover, body .ui-splitbutton.mt-button-blue > .ui-button.ui-state-hover,
body .ui-button.mt-button-blue.ui-state-active, body .ui-splitbutton.mt-button-blue > .ui-button.ui-state-active{
    background: var(--blue-600);
    border-color: var(--blue-600);
}

body .ui-button.mt-button-blue.ui-state-focus, body .ui-splitbutton.mt-button-blue > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(47, 184, 247, 0.5);
}

/** MT Green */
body .ui-button.mt-button-green, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: #43ba73;
    color: #ffffff;
    border: 1px solid #43ba73;
}

body .ui-button.mt-button-green.ui-state-hover, body .ui-splitbutton.mt-button-green > .ui-button.ui-state-hover,
body .ui-button.mt-button-green.ui-state-active, body .ui-splitbutton.mt-button-green > .ui-button.ui-state-active{
    background: #399f62;
    border-color: #399f62;
}

body .ui-button.mt-button-green.ui-state-focus, body .ui-splitbutton.mt-button-green > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(170, 231, 195, 1);
}

/** MT Primary */
body .ui-button.mt-button-primary, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--mt-primary-color);
    color: #ffffff;
    border: 1px solid var(--mt-primary-color);
}

body .ui-button.mt-button-primary.ui-state-hover, body .ui-splitbutton.mt-button-primary > .ui-button.ui-state-hover,
body .ui-button.mt-button-primary.ui-state-active, body .ui-splitbutton.mt-button-primary > .ui-button.ui-state-active{
    background: #402159;
    border-color: #402159;
}

body .ui-button.mt-button-primary.ui-state-focus, body .ui-splitbutton.mt-button-primary > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(81, 45, 109, 0.5);
}

/** MT DANGER */
body .ui-button.mt-button-danger, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--mt-error-color);
    color: #ffffff;
    border: 1px solid var(--mt-error-color);
}

body .ui-button.mt-button-danger.ui-state-hover, body .ui-splitbutton.mt-button-danger > .ui-button.ui-state-hover,
body .ui-button.mt-button-danger.ui-state-active, body .ui-splitbutton.mt-button-danger > .ui-button.ui-state-active{
    background: #db3e51;
    border-color: #db3e51;
}

body .ui-button.mt-button-danger.ui-state-focus, body .ui-splitbutton.mt-button-danger > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(253, 121, 138, 0.5);
}

/** MT VINHO */
body .ui-button.mt-button-vinho, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: #ad578c;
    color: #ffffff;
    border: 1px solid #ad578c;
}

body .ui-button.mt-button-vinho.ui-state-hover, body .ui-splitbutton.mt-button-vinho > .ui-button.ui-state-hover,
body .ui-button.mt-button-vinho.ui-state-active, body .ui-splitbutton.mt-button-vinho > .ui-button.ui-state-active{
    background: #934977;
    border-color: #934977;
}

body .ui-button.mt-button-vinho.ui-state-focus, body .ui-splitbutton.mt-button-vinho > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(230, 138, 182, 0.5);
}

/** MT Warning */
body .ui-button.mt-button-warning, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--mt-warning-color);
    color: #000;
    border: 1px solid var(--mt-warning-color);
}

body .ui-button.mt-button-warning.ui-state-hover, body .ui-splitbutton.mt-button-warning > .ui-button.ui-state-hover,
body .ui-button.mt-button-warning.ui-state-active, body .ui-splitbutton.mt-button-warning > .ui-button.ui-state-active{
    background: #e7bb00;
    border-color: #e7bb00;
}

body .ui-button.mt-button-warning.ui-state-focus, body .ui-splitbutton.mt-button-warning > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(255, 227, 109, 1);
}

/** MShops Color */
body .ui-button.mt-button-mshops, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: #e82e8a;
    color: #ffffff;
    border: 1px solid #e82e8a;
}

body .ui-button.mt-button-mshops.ui-state-hover, body .ui-splitbutton.mt-button-mshops > .ui-button.ui-state-hover,
body .ui-button.mt-button-mshops.ui-state-active, body .ui-splitbutton.mt-button-mshops > .ui-button.ui-state-active{
    background: #b7226c;
    border-color: #b7226c;
}

body .ui-button.mt-button-mshops.ui-state-focus, body .ui-splitbutton.mt-button-mshops > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(232, 46, 138, 0.5);
}

/** MT Success */
body .ui-button.mt-button-success, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: #01c4a9;
    color: #FFF;
    border: 1px solid #01c4a9;
}

body .ui-button.mt-button-success.ui-state-hover, body .ui-splitbutton.mt-button-success > .ui-button.ui-state-hover,
body .ui-button.mt-button-success.ui-state-active, body .ui-splitbutton.mt-button-success > .ui-button.ui-state-active{
    background: #09ad96;
    border-color: #09ad96;
}

body .ui-button.mt-button-success.ui-state-focus, body .ui-splitbutton.mt-button-success > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(60, 219, 192, 0.5);
}

/** MT Orange */
body .ui-button.mt-button-orange, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: #f16236;
    color: #ffffff;
    border: 1px solid #f16236;
}

body .ui-button.mt-button-orange.ui-state-hover, body .ui-splitbutton.mt-button-orange > .ui-button.ui-state-hover,
body .ui-button.mt-button-orange.ui-state-active, body .ui-splitbutton.mt-button-orange > .ui-button.ui-state-active{
    background: #db6b49;
    border-color: #db6b49;
}

body .ui-button.mt-button-orange.ui-state-focus, body .ui-splitbutton.mt-button-orange > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(248, 146, 86, 0.5);
}

/** MT Navy */
body .ui-button.mt-button-navy, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--mt-navy-blue-color);
    color: #ffffff;
    border: 1px solid var(--mt-navy-blue-color);
}

body .ui-button.mt-button-navy.ui-state-hover, body .ui-splitbutton.mt-button-navy > .ui-button.ui-state-hover,
body .ui-button.mt-button-navy.ui-state-active, body .ui-splitbutton.mt-button-navy > .ui-button.ui-state-active{
    background: #072f38;
    border-color: #072f38;
}

body .ui-button.mt-button-navy.ui-state-focus, body .ui-splitbutton.mt-button-navy > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(17, 117, 140, 0.5);
}

/** MT Indigo */
body .ui-button.mt-button-indigo, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--mt-indigo-blue-color);
    color: #ffffff;
    border: 1px solid var(--mt-indigo-blue-color);
}

body .ui-button.mt-button-indigo.ui-state-hover, body .ui-splitbutton.mt-button-indigo > .ui-button.ui-state-hover,
body .ui-button.mt-button-indigo.ui-state-active, body .ui-splitbutton.mt-button-indigo > .ui-button.ui-state-active{
    background: #101e2d;
    border-color: #101e2d;
}

body .ui-button.mt-button-indigo.ui-state-focus, body .ui-splitbutton.mt-button-indigo > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(31, 59, 89, 0.5);
}

/** MT Turquesa */
body .ui-button.mt-button-turquesa, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: #00c1d4;
    color: #ffffff;
    border: 1px solid #00c1d4;
}

body .ui-button.mt-button-turquesa.ui-state-hover, body .ui-splitbutton.mt-button-turquesa > .ui-button.ui-state-hover,
body .ui-button.mt-button-turquesa.ui-state-active, body .ui-splitbutton.mt-button-turquesa > .ui-button.ui-state-active{
    background: #00a3b3;
    border-color: #00a3b3;
}

body .ui-button.mt-button-turquesa.ui-state-focus, body .ui-splitbutton.mt-button-turquesa > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(155, 221, 228, 1);
}

/** Bling Color */
body .ui-button.mt-button-bling, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--bling-color);
    color: #ffffff;
    border: 1px solid var(--bling-color);
}

body .ui-button.mt-button-bling.ui-state-hover, body .ui-splitbutton.mt-button-bling > .ui-button.ui-state-hover,
body .ui-button.mt-button-bling.ui-state-active, body .ui-splitbutton.mt-button-bling > .ui-button.ui-state-active{
    background: #10b57d;
    border-color: #10b57d;
}

body .ui-button.mt-button-bling.ui-state-focus, body .ui-splitbutton.mt-button-bling > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(11, 214, 146, 0.5);
}

/** Tiny Color */
body .ui-button.mt-button-tiny, body .ui-splitbutton.mt-button-mshops > .ui-button {
    background: var(--tiny-color);
    color: #ffffff;
    border: 1px solid var(--tiny-color);
}

body .ui-button.mt-button-tiny.ui-state-hover, body .ui-splitbutton.mt-button-tiny > .ui-button.ui-state-hover,
body .ui-button.mt-button-tiny.ui-state-active, body .ui-splitbutton.mt-button-tiny > .ui-button.ui-state-active{
    background: #051676;
    border-color: #051676;
}

body .ui-button.mt-button-tiny.ui-state-focus, body .ui-splitbutton.mt-button-tiny > .ui-button.ui-state-focus{
    box-shadow: 0 0 0 0.2rem rgba(54, 83, 247, 0.5);
}

/**
    LINK COLORS
*/
.pf-link-green {
    color: var(--pf-green) !important;
    text-decoration: none !important;
}
.pf-link-green:hover,
.pf-link-green:focus,
.pf-link-green:active{
    color: var(--pf-green-shade) !important;
}

.pf-link-red {
    color: var(--pf-red) !important;
    text-decoration: none !important;
}
.pf-link-red:hover,
.pf-link-red:focus,
.pf-link-red:active{
    color: var(--pf-red-shade) !important;
}

/**
    MENU
*/
.Separator {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding-top: 2px !important;
    padding-bottom: 0 !important;
    margin-top: 2px;
}

.ui-divider-horizontal {
    width: auto !important;
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-right .profile-item > ul > li.layout-submenu-footer button.buy-mirage-button {
    border: 1px solid;
}

@media (min-width: 992px) {
    .layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu > li > ul {
        max-height: 460px;
    }
}

@media (max-width: 991px){
    .layout-wrapper .layout-topbar .layout-topbar-wrapper .layout-topbar-right .profile-mobile-wrapper > li.active-topmenuitem > ul {
        left: 0;
    }
}

body .ui-badge.ui-badge-danger{
    background: #f8485e;
}







/*html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;}*/

.mt-red {
    color: var(--mt-error-color) !important;
}

.mt-blue {
    color: var(--mt-blue-color) !important;
}

.primary-color {
    color: #5E81AC !important;
}

.mt-primary {
    color: var(--mt-primary-color);
}

.mt-grey {
    color: var(--mt-gray-color);
}

.mt-success {
    color: var(--mt-success-color) !important;
}

.mt-light-gray {
    color: var(--mt-light-gray-color);
}

.mt-white {
    color: #fff !important;
}

.ml-logo-blue {
    color: var(--ml-logo-blue) !important;
}

.pf-green {
    color: var(--pf-green);
}

.mt-brown {
    color: var(--mt-brown-color);
}

/**
    SELECT LABEL
*/
.mt-green_select-label .ui-selectonemenu-label{
    color: var(--mt-green-color) !important;
}

.mt-blue_select-label .ui-selectonemenu-label{
    color: var(--mt-blue-color) !important;
}

.primary-color_select-label .ui-selectonemenu-label{
    color: #5E81AC !important;
}

.mt-success_select-label .ui-selectonemenu-label{
    color: var(--mt-success-color) !important;
}

.mt-text-bold_select-label .ui-selectonemenu-label{
    font-weight: 700 !important;
}
/**
    BACKGROUND
*/
.mt-light-gray-background {
    background-color: var(--mt-light-gray-color) !important;
}

.mt-red-background {
    background-color: var(--mt-error-color) !important;
}

.mt-primary-background {
    background-color: var(--mt-primary-color) !important;
}

.mt-success-background {
    background-color: var(--mt-success-color) !important;
}

.mt-state-default-background {
    background-color: var(--mt-state-default) !important;
}

.mt-state-success-background {
    background-color: var(--mt-state-success) !important;
}

.mt-state-warning-background {
    background-color: var(--mt-state-warning) !important;
}

.mt-state-danger-background {
    background-color: var(--mt-state-danger) !important;
}

.mt-green-background {
    background-color: var(--mt-green-color) !important;
}

.mt-orange-background {
    background-color: var(--mt-orange-color) !important;
}

.mt-blue-background {
    background-color: var(--mt-blue-color) !important;
}
.ml-logo-yellow-background {
    background-color: var(--ml-logo-yellow) !important;
}
/**
    TEXT
*/
.mt-text-overflow-ellipis {
    text-overflow: ellipsis;
}
.mt-lh-normal {
    line-height: normal;
}
.mt-line-height-1 {
    line-height: 1 !important;
}
.mt-decoration-none {
    text-decoration: none !important;
}
.mt-decoration-underline {
    text-decoration: underline !important;
}

/**
    BORDER
*/
.mt-br-4 {
    border-radius: 4px;
}

.mt-border-top-1 {
    border-top-width: 1px;
    border-top-style: var(--mt-border-top-style);
    border-top-color: var(--mt-border-top-color);
}

.mt-border-bottom-1 {
    border-bottom-width: 1px;
    border-bottom-style: var(--mt-border-bottom-style);
    border-bottom-color: var(--mt-border-bottom-color);
}

.mt-border-none {
    border: none;
}

/**
    OVERFLOW
*/
.mt-overflow-hidden {
    overflow: hidden;
}
.mt-overflow-y-auto {
    overflow-y: auto;
}
.mt-overflow-x-auto {
    overflow-x: auto;
}

/**
    BOX SIZING
*/
.mt-bsizing-border-box {
    box-sizing: border-box;
}
/**
    POSITION
*/
.mt-pos-relative {
    position: relative;
}

.mt-left-0 {
    left: 0;
}

.mt-zindex-1 {
    z-index: 1;
}
/**
    FLEX
*/
.mt-flex-1 {
    flex:1;
}
.mt-flex-break {
    flex-basis: 100%;
    height: 0;
}
/**
    GAP
*/
.mt-gap-10 {
    gap: 10px;
}
/**
    WIDTH
*/
.mt-width-full {
    width: 100% !important;
}

/**
    HEIGHT
*/
.mt-height-full {
    height: 100% !important;
}

/**
    WHITE SPACE
*/
.mt-white-space-nowrap {
    white-space: nowrap;
}

/**
    WHITE SPACE
*/
.mt-word-break-all {
    word-break: break-all;
}

/**
    CARDS
*/
.mt-card {
    padding: 15px 50px;
    border-radius: 15px !important;
}

.mt-card > .header-card {
    text-align: center;
    margin-bottom: 15px;
}

.mt-card > .header-card h1, .mt-card > .header-card h1> * {
    color: var(--mt-gray-color);
    font-size: 25px;
    font-weight: bold;
}

.mt-card > .header-card .header-text-info {
    font-size: 15px;
    font-weight: normal;
}

.mt-card-body {
    margin-top: auto;
}

.mt-card-body > .mt-card_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    color: white;
    font-size: 15px;
    padding: 10px 0;
}

.mt-card_item + .mt-card_item {
    border-top: 1px solid;
}

.mt-card_item strong {
    font-size: 18px;
}
.mt-card-values {
    display: flex;
    align-items: center;
}

.mt-card.mt-card-light-background > .mt-card-body > .mt-card_item {
    color: var(--mt-gray-color);
}

/**
    PADDING
*/
.mt-padding-18 {
    padding: 18px !important;
}

/**
    UTILITÁRIOS
*/
.mt-cursor-pointer {
    cursor: pointer;
}

.mt-link-small-btn {
    width: 19px;
    height: 19px;

    line-height: 19px;
    margin-left: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    color: white !important;
    border-radius: 4px;
    font-size: 11px !important;

    text-decoration: none !important;
}
@media screen and (min-width: 576px) {
    .mt-width-sm-auto {
        width: auto !important;
    }
}

.news {
    height: 100px;
    width: 400px;
}

body{
    height:100%;
    width:100%;
}


/* CORE LAYOUT STANDART STYLES ********************************************************************************************************** */

a, div, span, input, textarea, li, strong, button{
    outline:none;
    text-decoration:none;
    /* this removes gray outline from ios safari a tags */-webkit-tap-highlight-color: rgba(0,0,0,0);
    /* this removes action panels from ios safari a tags */-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}
img{
    border:none;
    border:0px;
}
.ClearBoth{
    clear:both;
}
.CursPointer{
    cursor:pointer;
}

/*visibilities according to the platform*/
.ShowOnMobile{
    display:none;
}
.ShowOnDesktop{
    display:inherit;
}
.FloatNoneOnMobile{
}

.show{
    display:block !important;
}
.hide{
    display:none !important;
}

/* make auto of element width and/or height attribute on mobile devices with media queries */
.WidAutoOnMobile{
}
.HeiAutoOnMobile{
}

/* for responsive mode - if you want any ContainerX element has a responsive fluid abilities with media queries you must add this class to your element*/
.Responsive{
}
.Responsive50{
}
.Responsive100{
}

/* Text Decoration */
.Underline{
    text-decoration:underline;
}
.UnderlineHover:hover{
    text-decoration:underline;
}

/* Making Unselectable Contents */
.Unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* for on iphone safari inputs shadow problem */
input[type="text"], input[type="password"], textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Display */
.DispBlock{
    display:block;
}
.DispTable{
    display:table;
    vertical-align:middle;
}
.DispTableCell{
    display:table-cell;
    vertical-align:middle;
}
.DispNone{
    display:none;
}
.DispInlBlock{
    display:inline-block;
}
.DispInline{
    display:inline;
}

/* FLEX Boxes */
.Flex{
    display:-webkit-box !important;
    display:-webkit-flex  !important;
    display:-webkit-flexbox  !important;
    display:-moz-flex  !important;
    display:-moz-box  !important;
    display:-ms-flexbox  !important;
    display:flex  !important;
}                                        /* NEW */
.FlexWrap{
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}                                                              /* NEW */

.Gap1{
    gap: 1px;
}
.Gap3{
    gap: 3px;
}
.Gap5{
    gap: 5px;
}
.Gap8{
    gap: 8px;
}
.Gap10{
    gap: 10px;
}
.Gap15{
    gap: 15px;
}
.Gap20{
    gap: 20px;
}
.Gap30{
    gap: 30px;
}

.ColGap3{
    column-gap: 3px;
}
.ColGap5{
    column-gap: 5px;
}
.ColGap8{
    column-gap: 8px;
}
.ColGap10{
    column-gap: 10px;
}
.ColGap15{
    column-gap: 15px;
}
.ColGap20{
    column-gap: 20px;
}
.ColGap30{
    column-gap: 30px;
}

.RowGap3{
    row-gap: 3px;
}
.RowGap5{
    row-gap: 5px;
}
.RowGap8{
    row-gap: 8px;
}
.RowGap10{
    row-gap: 10px;
}
.RowGap15{
    row-gap: 15px;
}
.RowGap20{
    row-gap: 20px;
}
.RowGap30{
    row-gap: 30px;
}

/* Position */
.PosFixed{
    position:fixed;
}
.PosAbsolute{
    position:absolute;
}
.PosRelative{
    position:relative;
}
.PosStatic{
    position:static;
}

/* Floating */
.Fleft{
    float:left;
}
.Fright{
    float:right;
}
.Fnone{
    float:none !important;
}

/* Overflows */
.OvHidden{
    overflow:hidden;
}
.OvScroll{
    overflow:scroll;
}
.OvAuto{
    overflow:auto;
}
.OvVisible{
    overflow:visible;
}
.OvXAuto{
    overflow-x:auto;
}
.OvXScroll{
    overflow-x:scroll;
}
.OvYScroll{
    overflow-y:scroll;
}
.OvXHidden{
    overflow-x:hidden;
}
.OvYHidden{
    overflow-y:hidden;
}

/* Empty Boxes */
.EmptyBox5{
    display:block;
    width:100%;
    height:5px;
    overflow:hidden;
}
.EmptyBox10{
    display:block;
    width:100%;
    height:10px;
    overflow:hidden;
}
.EmptyBox20{
    display:block;
    width:100%;
    height:20px;
    overflow:hidden;
}
.EmptyBox30{
    display:block;
    width:100%;
    height:30px;
    overflow:hidden;
}
.EmptyBox40{
    display:block;
    width:100%;
    height:40px;
    overflow:hidden;
}
.EmptyBox50{
    display:block;
    width:100%;
    height:50px;
    overflow:hidden;
}
.EmptyBox60{
    display:block;
    width:100%;
    height:60px;
    overflow:hidden;
}
.EmptyBox70{
    display:block;
    width:100%;
    height:70px;
    overflow:hidden;
}
.EmptyBox80{
    display:block;
    width:100%;
    height:80px;
    overflow:hidden;
}
.EmptyBox90{
    display:block;
    width:100%;
    height:90px;
    overflow:hidden;
}
.EmptyBox100{
    display:block;
    width:100%;
    height:100px;
    overflow:hidden;
}
.EmptyBox110{
    display:block;
    width:100%;
    height:100px;
    overflow:hidden;
}
.EmptyBox120{
    display:block;
    width:100%;
    height:100px;
    overflow:hidden;
}
.EmptyBox130{
    display:block;
    width:100%;
    height:100px;
    overflow:hidden;
}
.EmptyBox140{
    display:block;
    width:100%;
    height:100px;
    overflow:hidden;
}
.EmptyBox150{
    display: block;
    width: 100%;
    height:150px;
    overflow:hidden;
}

/* Opacity */
.Opac100{
    opacity:1;
    -webkit-opacity:1;
    -moz-opacity:1;
}
.Opac95{
    opacity:0.95;
    -webkit-opacity:0.95;
    -moz-opacity:0.95;
}
.Opac90{
    opacity:0.9;
    -webkit-opacity:0.9;
    -moz-opacity:0.9;
}
.Opac80{
    opacity:0.8;
    -webkit-opacity:0.8;
    -moz-opacity:0.8;
}
.Opac70{
    opacity:0.7;
    -webkit-opacity:0.7;
    -moz-opacity:0.7;
}
.Opac60{
    opacity:0.6;
    -webkit-opacity:0.6;
    -moz-opacity:0.6;
}
.Opac50{
    opacity:0.5;
    -webkit-opacity:0.5;
    -moz-opacity:0.5;
}
.Opac40{
    opacity:0.4;
    -webkit-opacity:0.4;
    -moz-opacity:0.4;
}
.Opac30{
    opacity:0.3;
    -webkit-opacity:0.3;
    -moz-opacity:0.3;
}
.Opac20{
    opacity:0.2;
    -webkit-opacity:0.2;
    -moz-opacity:0.2;
}
.Opac10{
    opacity:0.1;
    -webkit-opacity:0.1;
    -moz-opacity:0.1;
}
.OpacZero{
    opacity:0;
    -webkit-opacity:0;
    -moz-opacity:0;
}

/* Border Radius */
.BordRad0{
    border-radius:0px;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
}
.BordRad3{
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}
.BordRad4{
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
}
.BordRad5{
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
.BordRad10{
    border-radius:10px !important;
    -webkit-border-radius:10px !important;
    -moz-border-radius:10px !important;
}
.BordRad15{
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
}
.BordRadHalf{
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
}

.BordColorGreen{
    border-color: var(--mt-green-color)!important;
}
.BordColorRed{
    border-color: var(--mt-red-color)!important;
}

.BordRight{
    border-right:solid 1px transparent;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.BordLeft{
    border-left:solid 1px transparent;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.BordTop{
    border-top:solid 1px transparent;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.BordBottom{
    border-top:solid 1px transparent;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.BordAll{
    border:solid 1px transparent;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

/* Width */
.WidFit{
    width: fit-content;
}

.Wid100{
    width:100%;
}
.Wid90{
    width:90%;
}
.Wid80{
    width:80%;
}
.Wid70{
    width:70%;
}
.Wid60{
    width:60%;
}
.Wid50{
    width:50%;
}
.Wid45{
    width:45%;
}
.Wid40{
    width:40%;
}
.Wid33{
    width:33.3%;
}
.Wid30{
    width:30%;
}
.Wid25{
    width:25%;
}
.Wid20{
    width:20%;
}
.Wid10{
    width:10%;
}

/* Width Special Values */

.Wid600px{
    width: 600px;
}

.MaxWid500{
    max-width:500px;
}
.MaxWid30{
    max-width:30px;
}
.Wid100NoPadding{
    width:100%;
    box-sizing:border-box;
}

/* Height */
.Hei100{
    height:100%;
}
.Hei90{
    height:90%;
}
.Hei80{
    height:80%;
}
.Hei70{
    height:70%;
}
.Hei60{
    height:60%;
}
.Hei40{
    height:40%;
}
.Hei50{
    height:50%;
}
.Hei30{
    height:30%;
}
.Hei20{
    height:20%;
}
.Hei10{
    height:10%;
}

.Hei25px{
    height: 25px;
}
.Hei35px{
    height: 35px;
}
.Hei45px{
    height: 45px;
}
.Hei55px{
    height: 55px;
}

/* Margins */
.MarTopPerc5{
    margin-top:5%;
}
.MarTopPerc10{
    margin-top:10%;
}
.MarTopPerc20{
    margin-top:20%;
}
.MarTopPerc30{
    margin-top:30%;
}
.MarTopPerc40{
    margin-top:40%;
}
.MarTopPerc50{
    margin-top:50%;
}

.MarAuto{
    margin-left:auto;
    margin-right:auto;
}

.MarTop5{
    margin-top:5px;
}
.MarTop10{
    margin-top:10px;
}
.MarTop20{
    margin-top:20px;
}
.MarTop30{
    margin-top:30px;
}
.MarTop40{
    margin-top:40px;
}
.MarTop50{
    margin-top:50px;
}

.MarTopQuarter{
    margin-top:25%;
}
.MarTopHalf{
    margin-top:50%;
}

.MarBot10{
    margin-bottom:10px;
}
.MarBot20{
    margin-bottom:20px !important;
}
.MarBot30{
    margin-bottom:30px;
}
.MarRight10{
    margin-right:10px;
}
.MarRight20{
    margin-right:20px;
}
.MarRight30{
    margin-right:30px;
}
.MarRight50{
    margin-right:50px;
}


/* Paddings */
.NoPadding{
    padding:0px !important;
}
.PaddingTopPercent10{
    padding-top: 10%;
}

/* Margins */
.NoMargin{
    margin:0px;
}

/* Containers */
.Container100{
    width:100%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container96{
    width:96%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container90{
    width:90%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container85{
    width:85%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container80{
    width:80%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container75{
    width:75%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container70{
    width:70%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container66{
    width:66.66%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container60{
    width:60%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container50{
    width:50%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container40{
    width:40%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container33{
    width:33.33%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container30{
    width:30%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container25{
    width:25%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container20{
    width:20%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container10{
    width:10%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}
.Container5{
    width:5%;
    float:left;
    padding:5px;
    box-sizing:border-box;
}

.SmallIndent{
    padding:3px;
}
.NoIndent{
    display:block;
    margin:0px auto;
    padding:0px;
}


/* Text Aligns */
.TexAlCenter{
    text-align:center;
}
.TexAlLeft{
    text-align:left;
}
.TexAlRight{
    text-align:right !important;
}

/* Padding With Transparent Border*/
.Padding1{
    padding:1px;
    box-sizing:border-box;
}
.Padding3{
    padding:3px;
    box-sizing:border-box;
}
.Padding5{
    padding:5px;
    box-sizing:border-box;
}
.Padding10{
    padding:10px;
    box-sizing:border-box;
}
.Padding15{
    padding:15px;
    box-sizing:border-box;
}
.Padding20{
    padding:20px;
    box-sizing:border-box;
}
.PadLeftRightZero{
    padding-left:0px;
    padding-right:0px;
}
.PadTopBottomZero{
    padding-top:0px;
    padding-bottom:0px;
}

/* Box Sizing */
.BoxSizeContent{
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
}
.BoxSizeBorder{
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

/* Font Type */
.FontBold{
    font-weight:bold;
}
.FontLight{
    font-weight: 200;
}
.FontNormal{
    font-weight:normal;
}
.FontItalic{
    font-style:italic;
}

/* Animated */
.Animated03{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.Animated05{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.Animated1{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

/* Zoom */
.Zoom1point05x{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.Zoom1point05x:hover{
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

.Zoom1point1x{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.Zoom1point1x:hover{
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

.Zoom1point2x{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.Zoom1point2x:hover{
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

.Transf12:hover{
    transform: scale(1.2);
}

/******************************************************************************************************************************** */

/* MEDIA QUERIES FOR CORE LAYOUT **************************************************************************************************************** */

/* Large desktop */
@media (min-width: 960px){
    /*visibilities according to the platform*/
    .ShowOnMobile{
        display:none;
        opacity:0;
    }
    .ShowOnDesktop{
        display:inherit;
        opacity:1;
    }
}

@media (min-width: 960px) and (max-width:1200px){
    /* responsive support */
    .Responsive{
        width:33.3%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }
    .Responsive50{
        width:50%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }
    .Responsive100{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }

    /* make auto of element width attribute on mobile devices with media queries */
    .WidAutoOnMobile{
        width:auto !important;
    }
    .HeiAutoOnMobile{
        height:auto !important;
        min-height:50px !important;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px) {
    /*visibilities according to the platform*/
    .ShowOnMobile{
        display:inherit;
        opacity:1;
    }
    .ShowOnDesktop{
        display:none !important;
        opacity:0;
    }
    .FloatNoneOnMobile{
        float:none !important;
    }

    /* Containers */
    .Container100{
        width:100%;
        float:left;
        padding:5px;
    }
    .Container96{
        width:96%;
        float:left;
        padding:5px;
    }
    .Container90{
        width:90%;
        float:left;
        padding:5px;
    }
    .Container85{
        width:85%;
        float:left;
        padding:5px;
    }
    .Container80{
        width:80%;
        float:left;
        padding:5px;
    }
    .Container75{
        width:75%;
        float:left;
        padding:5px;
    }
    .Container70{
        width:70%;
        float:left;
        padding:5px;
    }
    .Container66{
        width:66.66%;
        float:left;
        padding:5px;
    }
    .Container60{
        width:60%;
        float:left;
        padding:5px;
    }
    .Container50{
        width:50%;
        float:left;
        padding:5px;
    }
    .Container40{
        width:40%;
        float:left;
        padding:5px;
    }
    .Container33{
        width:33.33%;
        float:left;
        padding:5px;
    }
    .Container30{
        width:30%;
        float:left;
        padding:5px;
    }
    .Container25{
        width:25%;
        float:left;
        padding:5px;
    }
    .Container20{
        width:20%;
        float:left;
        padding:5px;
    }
    .Container10{
        width:10%;
        float:left;
        padding:5px;
    }
    .Container5{
        width:5%;
        float:left;
        padding:5px;
    }

    .NoIndent{
        display:block;
        margin:0px auto;
        padding:0px;
    }

    /* responsive support */
    .Responsive{
        width:50%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }
    .Responsive50{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }
    .Responsive100{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }


    /* make auto of element width attribute on mobile devices with media queries */
    .WidAutoOnMobile{
        width:auto !important;
    }
    .HeiAutoOnMobile{
        height:auto !important;
        min-height:50px !important;
    }
}


/* Landscape phone to portrait tablet */
@media (min-width:480px) and (max-width: 640px) {
    /*visibilities according to the platform*/
    .ShowOnMobile{
        display:inherit;
        opacity:1;
    }
    .ShowOnDesktop{
        display:none !important;
        opacity:0;
    }
    .FloatNoneOnMobile{
        float:none !important;
    }

    /* Containers */
    .Container100{
        width:100%;
        float:left;
        padding:5px;
    }
    .Container96{
        width:96%;
        float:left;
        padding:5px;
    }
    .Container90{
        width:90%;
        float:left;
        padding:5px;
    }
    .Container85{
        width:85%;
        float:left;
        padding:5px;
    }
    .Container80{
        width:80%;
        float:left;
        padding:5px;
    }
    .Container75{
        width:75%;
        float:left;
        padding:5px;
    }
    .Container70{
        width:70%;
        float:left;
        padding:5px;
    }
    .Container66{
        width:66.66%;
        float:left;
        padding:5px;
    }
    .Container60{
        width:60%;
        float:left;
        padding:5px;
    }
    .Container50{
        width:50%;
        float:left;
        padding:5px;
    }
    .Container40{
        width:40%;
        float:left;
        padding:5px;
    }
    .Container33{
        width:33.33%;
        float:left;
        padding:5px;
    }
    .Container30{
        width:30%;
        float:left;
        padding:5px;
    }
    .Container25{
        width:25%;
        float:left;
        padding:5px;
    }
    .Container20{
        width:20%;
        float:left;
        padding:5px;
    }
    .Container10{
        width:10%;
        float:left;
        padding:5px;
    }
    .Container5{
        width:5%;
        float:left;
        padding:5px;
    }

    .NoIndent{
        display:block;
        margin:0px auto;
        padding:0px;
    }

    /* responsive support */
    .Responsive{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }
    .Responsive50{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }
    .Responsive100{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }

    /* make auto of element width attribute on mobile devices with media queries */
    .WidAutoOnMobile{
        width:auto !important;
    }
    .HeiAutoOnMobile{
        height:auto !important;
        min-height:50px !important;
    }
}


/* Portrait phones and down */
@media (max-width: 480px) {
    /*visibilities according to the platform*/
    .ShowOnMobile{
        display:inherit;
        opacity:1;
    }
    .ShowOnDesktop{
        display:none !important;
        opacity:0;
    }
    .FloatNoneOnMobile{
        float:none !important;
    }

    /* Containers */
    .Container100{
        width:100%;
        float:left;
        padding:5px;
    }
    .Container96{
        width:96%;
        float:left;
        padding:5px;
    }
    .Container90{
        width:90%;
        float:left;
        padding:5px;
    }
    .Container85{
        width:85%;
        float:left;
        padding:5px;
    }
    .Container80{
        width:80%;
        float:left;
        padding:5px;
    }
    .Container75{
        width:75%;
        float:left;
        padding:5px;
    }
    .Container70{
        width:70%;
        float:left;
        padding:5px;
    }
    .Container66{
        width:66.66%;
        float:left;
        padding:5px;
    }
    .Container60{
        width:60%;
        float:left;
        padding:5px;
    }
    .Container50{
        width:50%;
        float:left;
        padding:5px;
    }
    .Container40{
        width:40%;
        float:left;
        padding:5px;
    }
    .Container33{
        width:33.33%;
        float:left;
        padding:5px;
    }
    .Container30{
        width:30%;
        float:left;
        padding:5px;
    }
    .Container25{
        width:25%;
        float:left;
        padding:5px;
    }
    .Container20{
        width:20%;
        float:left;
        padding:5px;
    }
    .Container10{
        width:10%;
        float:left;
        padding:5px;
    }
    .Container5{
        width:5%;
        float:left;
        padding:5px;
    }

    .NoIndent{
        display:block;
        margin:0px auto;
        padding:0px;
    }

    /* responsive support */
    .Responsive{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }
    .Responsive50{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }
    .Responsive100{
        width:100%;
        float:left;
        margin-left:0px !important;
        margin-right:0px !important;
    }

    /* make auto of element width attribute on mobile devices with media queries */
    .WidAutoOnMobile{
        width:auto !important;
    }
    .HeiAutoOnMobile{
        height:auto !important;
    }
}

/* clearfix for Container */
.Container:before,.Container:after, .NoIndent:before,.NoIndent:after {
    content: "";
    display:block;
    border-collapse: collapse;
}

.Container:after, .NoIndent:after  {
    clear: both;
}

.hr-branco{
    border-top: solid #ffffff4d;
    border-width: 1px 0 0 0;
    margin: 6px 0px 5px 0px;
    width: 100%;
}

.cursor-default{
    cursor: default !important;
}

.contents{
    display: contents !important;
}

/* text colors */
.White {
    color: #ffffff !important;
}
.TransparentWhite {
    color: rgba(255, 255, 255, 0.7) !important;
}
.LightGrey {
    color: #b8b8b8 !important;
}
.SoftGray {
    color: rgba(40, 40, 40, 0.6) !important;
}
.SoftRed {
    color: #ff7162 !important;
}
.Black {
    color: #282828 !important;
}
.SoftBlack {
    color: #495057 !important;
}
.Blue {
    color: var(--mt-blue-color) !important;
}

.DarkBlue {
    color: #2673dd !important;
}
.Success{
    color: var(--mt-success-color) !important;
}
.Red {
    color: var(--mt-error-color) !important;
}
.Green {
    color: var(--mt-green-color) !important;
}
.Orange {
    color: var(--mt-orange-color) !important;
}
.Shopee {
    color: #ee4d2d !important;
}
.ShopeeBack {
    background-color: #ee4d2d !important;
}
.Yellow {
    color: var(--mt-yellow-color) !important;
}
.CustoImposto{
    color: #1f3b59 !important;
}
.CustoImpostoBack{
    background-color: #1f3b59 !important;
}
.DarkYellow {
    color: var(--mt-dark-yellow-color) !important;
}
.Leaden {
    color: #355C68 !important;
}
.Purple {
    color: var(--mt-primary-color) !important;
}
.Aqua {
    color: #0084b4 !important;
}
.Navy {
    color: var(--mt-navy-blue-color) !important;
}
.Turquoise{
    color: var(--mt-success-color) !important;
}
.StateDefault{
    color: var(--mt-state-default) !important;
}
.Pink{
    color: #e9417d !important;
}
.GreenAqua{
    color: #33bea6 !important;
}
.DarkAquaPurple{
    color: #8256a8 !important;
}
.NormalGray{
    color: #97a7c2 !important;
}
/* background colors */
.WhiteBack {
    background-color: #ffffff;
}
.LightGreyBack {
    background-color: #b8b8b8 !important;
}
.NormalGrayBack{
    background-color: #97a7c2 !important;
}
.SoftGrayBack {
    background-color: rgba(40, 40, 40, 0.6) !important;
}
.BlackBack {
    background-color: #282828 !important;
}
.BlueBack {
    background-color: var(--mt-blue-color) !important;
}
.DarkAquaGreenBack{
    background-color: #75a7a6 !important;
}
.DarkAquaPurpleBack{
    background-color: #8256a8 !important;
}
.RedBack {
    background-color: var(--mt-error-color) !important;
}
.GreenBack {
    background-color: var(--mt-green-color) !important;
}
.OrangeBack {
    background-color: var(--mt-orange-color) !important;
}
.YellowBack {
    background-color: var(--mt-yellow-color) !important;
}
.YellowDarkBack {
    background-color: #f6ba02 !important;
}
.DarkYellowBack {
    background-color: var(--mt-dark-yellow-color) !important;
}
.LeadenBack {
    background-color: #355C68 !important;
}
.PurpleBack {
    background-color: var(--mt-primary-color) !important;
}
.AquaBack {
    background-color: #0084b4 !important;
}
.DarkBlueBack{
    background-color: #2673dd!important;
}
.NavyBack {
    background-color: var(--mt-navy-blue-color) !important;
}
.TurquoiseBack{
    background-color: var(--mt-success-color) !important;
}
.StateDefaultBack{
    background-color: var(--mt-state-default) !important;
}
.GrayLightBack{
    background-color: #f7f7f7;
}
.GreenAquaBack{
    background-color: #33bea6;
}
.PinkBack {
    background-color: #e9417d !important;
}
.BrownBack {
    background-color: #773e4f;
}
.YellowNoteBack{
    background-color: #ffec9e !important;
}
.SuccessBack{
    background-color: var(--mt-success-color) !important;
}

/*
classe do texto que aparece no growl-principal, 
coloquei esse css para nao ocultar o texto se as palavras forem muito grande
*/
.ui-growl-title{
    word-break: break-word !important;
}

.mt-select-one-button-padrao{
    & .ui-selectonebutton > .ui-button.ui-state-active{
        background: #512d6d;
        border-color: #512d6d;
    }

    & .ui-selectonebutton > .ui-button{
        border-color: #ced4da;
        background: #FFF;
        color: #767c81;
    }

    & .ui-selectonebutton > .ui-button.ui-state-hover{
        background: #e9ecef !important;
        border-color: #ced4da !important;
        color: #495057 !important;
    }

    & .ui-selectonebutton > .ui-button.ui-state-active:not(.ui-state-disabled):hover{
        background: #512d6d !important;
        border-color: #512d6d !important;
        color: #fff !important;
    }
}

.mt-menu-padrao{
    & > ul{
        display: flex;
        gap: .5rem;
        overflow: auto !important;
        padding-top: 5px !important;
        margin-top: -5px !important;
        flex-wrap: nowrap !important;

        & li{
            border-radius: 1rem 1rem 0 0 !important;
            background-color: #d9d9d9 !important;
        }
        & li.ui-state-active{
            background-color: #FFF !important;
        }
        & li.ui-state-active:hover{
            background-color: #FFF !important;
        }
        & li:hover {
            background-color: #FFF !important;
        }
        & li.ui-state-active {
            & .mt-menu-numero{
                padding: 0px 4px;
                border-radius: 4px;
                margin-left: 6px;
                background-color: #8f8f8f;
                color: #FFF;
                font-size: 11px;
                font-weight: 900;
            }
        }
        & li:not(.ui-state-active) {
            & .mt-menu-numero{
                padding: 0px 4px;
                border-radius: 4px;
                margin-left: 6px;
                background-color: #FFF;
                color: #656565;
                font-size: 11px;
                font-weight: 900;
            }
        }
    }
    & .ui-tabs-panels{
        border-radius: 0 1rem 1rem 1rem !important;
    }
    & .ui-overlay-badge .ui-badge{
        top: 3px !important;
        right: 3px !important;
    }
    &.ui-tabmenu .ui-tabmenu-nav::before {
        display: block !important;
    }
}

.mt-card-menu-padrao{
    border-radius: 0 1rem 1rem 1rem !important;
}

.mt-accordion-padrao{
    & .ui-accordion-header{
        padding: 6px 20px !important;
    }
}

.ui-menu{
    width: max-content !important;
}

.mt-filtro-padrao{
    border: 3px solid var(--gray-200);
    border-radius: 0.5rem;
    position: relative;
    height: 100%;

    & .mt-nome-filtros{
        background: #FFF;
        position: absolute;
        top: -10px;
        padding: 0 1rem;
        left: 15px;
        font-weight: bold;
        color: var(--gray-400);
    }

    &.mt-filtro-ativo {
        /*border-color: var(--primary-200);*/

        & .mt-nome-filtros-ativo{
            color: var(--primary-600)
        }
    }
}
.mt-botao-pequeno-padrao .ui-button-text.ui-c{
    font-size: 12px;
    padding: 3px 6px !important;
}
.mt-botao-pequeno-padrao-icone .ui-button-text.ui-c{
    font-size: 12px;
    padding: 3px 6px 3px 25px !important;
}
body .ui-tabs .ui-tabs-panels{
    color: #4c566a;
}
body .ui-dialog{
    border-radius: 1rem;
}
body .ui-tabs .ui-tabs-panels .ui-tabs-panel{
    padding: 1.50rem;
}
.mt-contorno-clicavel{
    border: 1px solid var(--blue-300) !important;
    border-radius: .30rem;
    padding: .15rem .35rem;
}
.mt-contorno-clicavel:hover{
    background: var(--blue-400) !important;
    cursor: pointer;
    color: #FFF !important;
    & *{
        color: #FFF !important;
        cursor: pointer;
    }

    & .ui-inplace-display{
        background: var(--blue-300) !important;
    }
}
.mt-contorno-clicavel-rosa{
    background: var(--pink-500) !important;
    border-radius: .30rem;
    padding: .15rem .35rem;
    color: #FFF !important;
    & *{
        color: #FFF !important;
        cursor: pointer;
    }
}
.mt-contorno-clicavel-rosa:hover{
    background: #e9417d00 !important;
    border: 1px solid var(--pink-300) !important;
    cursor: pointer;
    color: #000 !important;
    & *{
        color: #000 !important;
        cursor: pointer;
    }
}

.ui-badge-dot.ui-badge-danger.mt-pulse {
    width: 8px;
    height: 8px;
    background-color: red;
    animation: mt-pulse-dot 1.2s ease-in-out infinite;
}

@keyframes mt-pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(255, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

.mt-badge-w-full .ui-overlay-badge{
    width: 100% !important;
}

.numero-linhas-selecionadas-label{
    position: absolute;
    top: 10px;
    left: 2px;
    width: 0px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-radius: 13px;
    white-space: nowrap;
    transition: .2s all ease;
    background: #f3eef6;
    color: #512d6d;
}
.numero-linhas-selecionadas-label.numero-linhas-selecionadas-active{
    width: auto;
    padding: 4px 15px;
}
.numero-linhas-selecionadas-label > span {
    font-weight: bold;
    margin-left: 8px;
    color: #512d6d;
    font-size: 18px;
}

@media (max-width:768px){
    .numero-linhas-selecionadas-label,
    .numero-linhas-selecionadas-label.numero-linhas-selecionadas-active{
        display: none !important;
    }
}

.mt-container-filtro-radio{
    border: 2px solid var(--gray-300);
    border-radius: .5rem;
    padding: 6px 0px 6px 10px;
}

.mt-marcador-li-bold::marker{
    font-weight: bold;
}