.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;}

.layout-topbar-custom{
	height: 100px!important;
}

.layout-topbar-logo-custom > img {
	height: 70px !important;
}

.Fleft {
	float: left;
}

.Fright{
	float:right;
}

.MarTop10{ margin-top: 10px;}
.MarTop20{ margin-top: 20px;}
.MarTop30{ margin-top: 30px;}
.MarTop40{ margin-top: 40px;}
.MarTop50{ margin-top: 50px;}
.MarTop60{ margin-top: 60px;}
.MarTop70{ margin-top: 70px;}
.MarTop80{ margin-top: 80px;}
.MarTop90{ margin-top: 90px;}
.MarTop100{ margin-top: 100px;}

.MarLeft10{ margin-left: 10px;}
.MarLeft20{ margin-left: 20px;}
.MarLeft30{ margin-left: 30px;}
.MarLeft40{ margin-left: 40px;}
.MarLeft50{ margin-left: 50px;}
.MarLeft60{ margin-left: 60px;}
.MarLeft70{ margin-left: 70px;}
.MarLeft80{ margin-left: 80px;}
.MarLeft90{ margin-left: 90px;}
.MarLeft100{ margin-left: 100px;}

.MarBottom10{ margin-bottom: 10px;}
.MarBottom20{ margin-bottom: 20px;}
.MarBottom30{ margin-bottom: 30px;}
.MarBottom40{ margin-bottom: 40px;}
.MarBottom50{ margin-bottom: 50px;}
.MarBottom60{ margin-bottom: 60px;}
.MarBottom70{ margin-bottom: 70px;}
.MarBottom80{ margin-bottom: 80px;}
.MarBottom90{ margin-bottom: 90px;}
.MarBottom100{ margin-bottom: 100px;}

.TexAlCenter{
	text-align: center;
}

.Wid100{ width:100%!important;}
.Wid90{ width:90%!important;}
.Wid80{ width:80%!important;}
.Wid70{ width:70%!important;}
.Wid60{ width:60%!important;}
.Wid50{ width:50%!important;}
.Wid45{ width:45%!important;}
.Wid40{ width:40%!important;}
.Wid30{ width:30%!important;}

/* 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 */
.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; -webkit-border-radius:10px; -moz-border-radius:10px;}
.BordRad15{ border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px;}
.BordRadHalf{ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;}


.img-responsive {
    display: block; /* Ensures the image is treated as a block-level element */
    max-width: 100%; /* Limits the maximum width of the image to 100% of its container */
    height: auto; /* Allows the height of the image to adjust proportionally with its width */
    width: auto\9; /* For IE8 support, setting width to auto avoids potential stretching */
}

.noHeader.ui-datatable table thead tr {
    display: none;
}

.whatsapp-button {
    display: inline-block;
    background-color: #25D366;  /* WhatsApp green */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
}

.whatsapp-button:hover {
    background-color: #1ebe57;  /* A slightly darker green on hover */
}

.layout-topbar-right ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
    overflow-x: auto;
}

.layout-topbar-right li {
    white-space: nowrap;
}

.layout-topbar-right a {
    font-size: 0.6rem;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem 1rem;
    display: inline-block;
}

/* Ajuste para telas pequenas */
@media (max-width: 768px) {
    .layout-topbar-right a {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Ajuste para telas grandes (maior que 1200px, por exemplo) */
@media (min-width: 1200px) {
    .layout-topbar-right a {
        font-size: 1rem;              /* aumenta o texto */
        padding: 0.6rem 1.2rem;       /* aumenta o espaço do botão */
    }

    .layout-topbar-right ul {
        gap: 2rem;                    /* aumenta o espaço entre itens */
    }
}