/** 
* Azorean Government Webpage Theme adaptation to opensource technologies
* CSS - Cascating Style Sheet File
* Adaptation: Eng.Tec. Paulo Oliveira
* Date of Adaptation: 9/08/2024
* Version: 1.4
* Revision: Fix Repetitive css bug
* Info - This Css file shall be the last css to be imported
*/

/*-------------------------------------------------------------------------------------------------------------

Includes ao HEAD do ficheiro .htm/.php

<!-- https://owlcarousel2.github.io -->
<link rel="stylesheet" href="./owlcarousel2/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./owlcarousel2/dist/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="./owlcarousel2/dist/owl.carousel.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
    integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
    crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<link rel="stylesheet" href="gra-layout-framework.css">
<script src="gra-layout-framework.js"></script>
----------------------------------------------------------------------------------------------------------------*/
/********************************************************************** Colors *******************************************************************************************************************/

/* font */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body {
    font-family: "Lato" sans-serif;
}

/* Backgrounds */

/* Blue */
.gra-background-blue-100 {
    background-color: #F5F9FB !important;
}

.gra-background-blue-200 {
    background-color: #E1ECF2 !important;
}

.gra-background-blue-300 {
    background-color: #B0CCDD !important;
}

.gra-background-blue-400 {
    background-color: #74A6C4 !important;
}

.gra-background-blue-500 {
    background-color: #3980AA !important;
}

.gra-background-blue-600 {
    background-color: #327196 !important;
}

.gra-background-blue-700 {
    background-color: #2C6485 !important;
}

.gra-background-blue-800 {
    background-color: #25536F !important;
}

/* Lime */
.gra-background-lime-100 {
    background-color: #F7F8F3 !important;
}

.gra-background-lime-200 {
    background-color: #E8EBDC !important;
}

.gra-background-lime-300 {
    background-color: #C3CAA1 !important;
}

.gra-background-lime-400 {
    background-color: #95A35B !important;
}

.gra-background-lime-500 {
    background-color: #687B14 !important;
}

.gra-background-lime-600 {
    background-color: #5C6C12 !important;
}

.gra-background-lime-700 {
    background-color: #516010 !important;
}

.gra-background-lime-800 {
    background-color: #44500D !important;
}

.gra-background-lime-900 {
    background-color: #2A3108 !important;
}

/* Yellow */
.gra-background-yellow-100 {
    background-color: #FFFCF3 !important;
}

.gra-background-yellow-200 {
    background-color: #FFF6DA !important;
}

.gra-background-yellow-300 {
    background-color: #FFE69C !important;
}

.gra-background-yellow-400 {
    background-color: #FFD451 !important;
}

.gra-background-yellow-500 {
    background-color: #FFC107 !important;
}

.gra-background-yellow-600 {
    background-color: #E0AA06 !important;
}

.gra-background-yellow-700 {
    background-color: #C79705 !important;
}

.gra-background-yellow-800 {
    background-color: #A67D05 !important;
}

.gra-background-yellow-900 {
    background-color: #664D03 !important;
}

/* Neutral */
.gra-background-white {
    background-color: #FFFFFF !important;
}

.gra-background-gray-100 {
    background-color: #F7F7F7 !important;
}

.gra-background-gray-200 {
    background-color: #E8E8E8 !important;
}

.gra-background-gray-300 {
    background-color: #C2C2C2 !important;
}

.gra-background-gray-400 {
    background-color: #949494 !important;
}

.gra-background-gray-500 {
    background-color: #666666 !important;
}

.gra-background-gray-600 {
    background-color: #5A5A5A !important;
}

.gra-background-gray-700 {
    background-color: #505050 !important;
}

.gra-background-gray-800 {
    background-color: #424242 !important;
}

.gra-background-gray-900 {
    background-color: #292929 !important;
}

.gra-background-black {
    background-color: #FFFCF3 !important;
}

/* Alert */
.gra-background-alert-200 {
    background-color: #FCF5DE !important;
}

.gra-background-alert-400 {
    background-color: #F7CA64 !important;
}

.gra-background-alert-600 {
    background-color: #FFCF27 !important;
}

/* Error */
.gra-background-error-200 {
    background-color: #FFE8E3 !important;
}

.gra-background-error-400 {
    background-color: #FF927B !important;
}

.gra-background-error-600 {
    background-color: #A0291A !important;
}

/* Information */
.gra-background-info-200 {
    background-color: #E5EEF6 !important;
}

.gra-background-info-400 {
    background-color: #195893 !important;
}

.gra-background-info-600 {
    background-color: #103960 !important;
}

/* Success */
.gra-background-success-200 {
    background-color: #E5F0E0 !important;
}

.gra-background-success-400 {
    background-color: #346122 !important;
}

.gra-background-success-600 {
    background-color: #294C1B !important;
}

/* Contour */
.gra-background-contour {
    background-color: #FFCB2D !important;
}

/* text colors */

/* Blue */
.gra-text-blue-100 {
    color: #F5F9FB !important;
}

.gra-text-blue-200 {
    color: #E1ECF2 !important;
}

.gra-text-blue-300 {
    color: #B0CCDD !important;
}

.gra-text-blue-400 {
    color: #74A6C4 !important;
}

.gra-text-blue-500 {
    color: #3980AA !important;
}

.gra-text-blue-600 {
    color: #327196 !important;
}

.gra-text-blue-700 {
    color: #2C6485 !important;
}

.gra-text-blue-800 {
    color: #25536F !important;
}

/* Lime */
.gra-text-lime-100 {
    color: #F7F8F3 !important;
}

.gra-text-lime-200 {
    color: #E8EBDC !important;
}

.gra-text-lime-300 {
    color: #C3CAA1 !important;
}

.gra-text-lime-400 {
    color: #95A35B !important;
}

.gra-text-lime-500 {
    color: #687B14 !important;
}

.gra-text-lime-600 {
    color: #5C6C12 !important;
}

.gra-text-lime-700 {
    color: #516010 !important;
}

.gra-text-lime-800 {
    color: #44500D !important;
}

.gra-text-lime-900 {
    color: #2A3108 !important;
}

/* Yellow */
.gra-text-yellow-100 {
    color: #FFFCF3 !important;
}

.gra-text-yellow-200 {
    color: #FFF6DA !important;
}

.gra-text-yellow-300 {
    color: #FFE69C !important;
}

.gra-text-yellow-400 {
    color: #FFD451 !important;
}

.gra-text-yellow-500 {
    color: #FFC107 !important;
}

.gra-text-yellow-600 {
    color: #E0AA06 !important;
}

.gra-text-yellow-700 {
    color: #C79705 !important;
}

.gra-text-yellow-800 {
    color: #A67D05 !important;
}

.gra-text-yellow-900 {
    color: #664D03 !important;
}

/* Neutral */
.gra-text-white {
    color: #FFFFFF !important;
}

.gra-text-gray-100 {
    color: #F7F7F7 !important;
}

.gra-text-gray-200 {
    color: #E8E8E8 !important;
}

.gra-text-gray-300 {
    color: #C2C2C2 !important;
}

.gra-text-gray-400 {
    color: #949494 !important;
}

.gra-text-gray-500 {
    color: #666666 !important;
}

.gra-text-gray-600 {
    color: #5A5A5A !important;
}

.gra-text-gray-700 {
    color: #505050 !important;
}

.gra-text-gray-800 {
    color: #424242 !important;
}

.gra-text-gray-900 {
    color: #292929 !important;
}

.gra-text-black {
    color: #FFFCF3 !important;
}

/* Alert */
.gra-text-alert-200 {
    color: #FCF5DE !important;
}

.gra-text-alert-400 {
    color: #F7CA64 !important;
}

.gra-text-alert-600 {
    color: #FFCF27 !important;
}

/* Error */
.gra-text-error-200 {
    color: #FFE8E3 !important;
}

.gra-text-error-400 {
    color: #FF927B !important;
}

.gra-text-error-600 {
    color: #A0291A !important;
}

/* Information */
.gra-text-info-200 {
    color: #E5EEF6 !important;
}

.gra-text-info-400 {
    color: #195893 !important;
}

.gra-text-info-600 {
    color: #103960 !important;
}

/* Success */
.gra-text-success-200 {
    color: #E5F0E0 !important;
}

.gra-text-success-400 {
    color: #346122 !important;
}

.gra-text-success-600 {
    color: #294C1B !important;
}

/* Contour */
.gra-text-contour {
    color: #FFCB2D !important;
}

/* Borders */
/* Blue */
.gra-border-blue-100 {
    border-color: #F5F9FB !important;
}

.gra-border-blue-200 {
    border-color: #E1ECF2 !important;
}

.gra-border-blue-300 {
    border-color: #B0CCDD !important;
}

.gra-border-blue-400 {
    border-color: #74A6C4 !important;
}

.gra-border-blue-500 {
    border-color: #3980AA !important;
}

.gra-border-blue-600 {
    border-color: #327196 !important;
}

.gra-border-blue-700 {
    border-color: #2C6485 !important;
}

.gra-border-blue-800 {
    border-color: #25536F !important;
}

/* Lime */
.gra-border-lime-100 {
    border-color: #F7F8F3 !important;
}

.gra-border-lime-200 {
    border-color: #E8EBDC !important;
}

.gra-border-lime-300 {
    border-color: #C3CAA1 !important;
}

.gra-border-lime-400 {
    border-color: #95A35B !important;
}

.gra-border-lime-500 {
    border-color: #687B14 !important;
}

.gra-border-lime-600 {
    border-color: #5C6C12 !important;
}

.gra-border-lime-700 {
    border-color: #516010 !important;
}

.gra-border-lime-800 {
    border-color: #44500D !important;
}

.gra-border-lime-900 {
    border-color: #2A3108 !important;
}

/* Yellow */
.gra-border-yellow-100 {
    border-color: #FFFCF3 !important;
}

.gra-border-yellow-200 {
    border-color: #FFF6DA !important;
}

.gra-border-yellow-300 {
    border-color: #FFE69C !important;
}

.gra-border-yellow-400 {
    border-color: #FFD451 !important;
}

.gra-border-yellow-500 {
    border-color: #FFC107 !important;
}

.gra-border-yellow-600 {
    border-color: #E0AA06 !important;
}

.gra-border-yellow-700 {
    border-color: #C79705 !important;
}

.gra-border-yellow-800 {
    border-color: #A67D05 !important;
}

.gra-border-yellow-900 {
    border-color: #664D03 !important;
}

/* Neutral */
.gra-border-white {
    border-color: #FFFFFF !important;
}

.gra-border-gray-100 {
    border-color: #F7F7F7 !important;
}

.gra-border-gray-200 {
    border-color: #E8E8E8 !important;
}

.gra-border-gray-300 {
    border-color: #C2C2C2 !important;
}

.gra-border-gray-400 {
    border-color: #949494 !important;
}

.gra-border-gray-500 {
    border-color: #666666 !important;
}

.gra-border-gray-600 {
    border-color: #5A5A5A !important;
}

.gra-border-gray-700 {
    border-color: #505050 !important;
}

.gra-border-gray-800 {
    border-color: #424242 !important;
}

.gra-border-gray-900 {
    border-color: #292929 !important;
}

.gra-border-black {
    border-color: #FFFCF3 !important;
}

/* Alert */
.gra-border-alert-200 {
    border-color: #FCF5DE !important;
}

.gra-border-alert-400 {
    border-color: #F7CA64 !important;
}

.gra-border-alert-600 {
    border-color: #FFCF27 !important;
}

/* Error */
.gra-border-error-200 {
    border-color: #FFE8E3 !important;
}

.gra-border-error-400 {
    border-color: #FF927B !important;
}

.gra-border-error-600 {
    border-color: #A0291A !important;
}

/* Information */
.gra-border-info-200 {
    border-color: #E5EEF6 !important;
}

.gra-border-info-400 {
    border-color: #195893 !important;
}

.gra-border-info-600 {
    border-color: #103960 !important;
}

/* Success */
.gra-border-success-200 {
    border-color: #E5F0E0 !important;
}

.gra-border-success-400 {
    border-color: #346122 !important;
}

.gra-border-success-600 {
    border-color: #294C1B !important;
}

/* Contour */
.gra-border-contour {
    border-color: #FFCB2D !important;
}

/***************************************************************************************** Fonts **************************************************************************************************/
/* Font */

.gra-font {
    /* import manually this font */
    font-family: Lato !important;
}

/* font weight */
.gra-font-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
}

.gra-font-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
}

.gra-font-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
}

/* font size */
.gra-font-6xl-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 80px !important;
    line-height: 100%;
}

.gra-font-6xl-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 80px !important;
    line-height: 100%;
}

.gra-font-6xl-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 80px !important;
    line-height: 100%;
}

.gra-font-5xl-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 56px !important;
    line-height: 100%;
}

.gra-font-5xl-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 56px !important;
    line-height: 100%;
}

.gra-font-5xl-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 56px !important;
    line-height: 100%;
}

.gra-font-4xl-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 48px !important;
    line-height: 100%;
}

.gra-font-4xl-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 48px !important;
    line-height: 100%;
}

.gra-font-4xl-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 48px !important;
    line-height: 100%;
}

.gra-font-3xl-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 40px !important;
    line-height: 100%;
}

.gra-font-3xl-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 40px !important;
    line-height: 100%;
}

.gra-font-3xl-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 40px !important;
    line-height: 100%;
}

.gra-font-2xl-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 32px !important;
    line-height: 100%;
}

.gra-font-2xl-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 32px !important;
    line-height: 100%;
}

.gra-font-2xl-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 32px !important;
    line-height: 100%;
}

.gra-font-xl-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 24px !important;
    line-height: 100%;
}

.gra-font-xl-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 24px !important;
    line-height: 100%;
}

.gra-font-xl-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 24px !important;
    line-height: 100%;
}

.gra-font-l-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 24px;
}

.gra-font-l-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 18px !important;
    line-height: 24px;
}

.gra-font-l-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 18px !important;
    line-height: 24px;
}

.gra-font-m-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 16px !important;
    line-height: 24px;
}

.gra-font-m-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 16px !important;
    line-height: 24px;
}

.gra-font-m-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 16px !important;
    line-height: 24px;
}

.gra-font-s-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 14px !important;
    line-height: 24px;
}

.gra-font-s-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 24px;
}

.gra-font-s-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 14px !important;
    line-height: 24px;
}

.gra-font-m-underline-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 16px !important;
    line-height: 24px;
    text-decoration: underline;
}

.gra-font-m-underline-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 16px !important;
    line-height: 24px;
    text-decoration: underline;
}

.gra-font-m-underline-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 16px !important;
    line-height: 24px;
    text-decoration: underline;
}

.gra-font-s-underline-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 14px !important;
    line-height: 24px;
    text-decoration: underline;
}

.gra-font-s-underline-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 24px;
    text-decoration: underline;
}

.gra-font-s-underline-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 14px !important;
    line-height: 24px;
    text-decoration: underline;
}

.gra-font-xs-bold {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: bold !important;
    font-size: 12px !important;
    line-height: 24px;
}

.gra-font-xs-regular {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: normal !important;
    font-size: 12px !important;
    line-height: 24px;
}

.gra-font-xs-light {
    /* import manually this font */
    font-family: Lato !important;
    font-weight: lighter !important;
    font-size: 12px !important;
    line-height: 24px;
}

/************************************************************************************** Spacings ***********************************************************************************************/
/* Margins */
/* Margin 0px */
.gra-margin-0 {
    margin: 0px !important;
}

.gra-margin-y-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.gra-margin-x-0 {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.gra-margin-top-0 {
    margin-top: 0px !important;
}

.gra-margin-right-0 {
    margin-right: 0px !important;
}

.gra-margin-bottom-0 {
    margin-bottom: 0px !important;
}

.gra-margin-left-0 {
    margin-left: 0px !important;
}

/* Margin 5xs */
.gra-margin-5xs {
    margin: 2px !important;
}

.gra-margin-y-5xs {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.gra-margin-x-5xs {
    margin-right: 2px !important;
    margin-left: 2px !important;
}

.gra-margin-top-5xs {
    margin-top: 2px !important;
}

.gra-margin-right-5xs {
    margin-right: 2px !important;
}

.gra-margin-bottom-5xs {
    margin-bottom: 2px !important;
}

.gra-margin-left-5xs {
    margin-left: 2px !important;
}

/* Margin 4xs */
.gra-margin-4xs {
    margin: 4px !important;
}

.gra-margin-y-4xs {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.gra-margin-x-4xs {
    margin-right: 4px !important;
    margin-left: 4px !important;
}

.gra-margin-top-4xs {
    margin-top: 4px !important;
}

.gra-margin-right-4xs {
    margin-right: 4px !important;
}

.gra-margin-bottom-4xs {
    margin-bottom: 4px !important;
}

.gra-margin-left-4xs {
    margin-left: 4px !important;
}

/* Margin 3xs */
.gra-margin-3xs {
    margin: 8px !important;
}

.gra-margin-y-3xs {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.gra-margin-x-3xs {
    margin-right: 8px !important;
    margin-left: 8px !important;
}

.gra-margin-top-3xs {
    margin-top: 8px !important;
}

.gra-margin-right-3xs {
    margin-right: 8px !important;
}

.gra-margin-bottom-3xs {
    margin-bottom: 8px !important;
}

.gra-margin-left-3xs {
    margin-left: 8px !important;
}

/* Margin 2xs */
.gra-margin-2xs {
    margin: 12px !important;
}

.gra-margin-y-2xs {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.gra-margin-x-2xs {
    margin-right: 12px !important;
    margin-left: 12px !important;
}

.gra-margin-top-2xs {
    margin-top: 12px !important;
}

.gra-margin-right-2xs {
    margin-right: 12px !important;
}

.gra-margin-bottom-2xs {
    margin-bottom: 12px !important;
}

.gra-margin-left-2xs {
    margin-left: 12px !important;
}

/* Margin xs */
.gra-margin-xs {
    margin: 16px !important;
}

.gra-margin-y-xs {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.gra-margin-x-xs {
    margin-right: 16px !important;
    margin-left: 16px !important;
}

.gra-margin-top-xs {
    margin-top: 16px !important;
}

.gra-margin-right-xs {
    margin-right: 16px !important;
}

.gra-margin-bottom-xs {
    margin-bottom: 16px !important;
}

.gra-margin-left-xs {
    margin-left: 16px !important;
}

/* Margin s */
.gra-margin-s {
    margin: 24px !important;
}

.gra-margin-y-s {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

.gra-margin-x-s {
    margin-right: 24px !important;
    margin-left: 24px !important;
}

.gra-margin-top-s {
    margin-top: 24px !important;
}

.gra-margin-right-s {
    margin-right: 24px !important;
}

.gra-margin-bottom-s {
    margin-bottom: 24px !important;
}

.gra-margin-left-s {
    margin-left: 24px !important;
}

/* Margin m */
.gra-margin-m {
    margin: 32px !important;
}

.gra-margin-y-m {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
}

.gra-margin-x-m {
    margin-right: 32px !important;
    margin-left: 32px !important;
}

.gra-margin-top-m {
    margin-top: 32px !important;
}

.gra-margin-right-m {
    margin-right: 32px !important;
}

.gra-margin-bottom-m {
    margin-bottom: 32px !important;
}

.gra-margin-left-m {
    margin-left: 32px !important;
}

/* Margin l */
.gra-margin-l {
    margin: 40px !important;
}

.gra-margin-y-l {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.gra-margin-x-l {
    margin-right: 40px !important;
    margin-left: 40px !important;
}

.gra-margin-top-l {
    margin-top: 40px !important;
}

.gra-margin-right-l {
    margin-right: 40px !important;
}

.gra-margin-bottom-l {
    margin-bottom: 40px !important;
}

.gra-margin-left-l {
    margin-left: 40px !important;
}

/* Margin xl */
.gra-margin-xl {
    margin: 48px !important;
}

.gra-margin-y-xl {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
}

.gra-margin-x-xl {
    margin-right: 48px !important;
    margin-left: 48px !important;
}

.gra-margin-top-xl {
    margin-top: 48px !important;
}

.gra-margin-right-xl {
    margin-right: 48px !important;
}

.gra-margin-bottom-xl {
    margin-bottom: 48px !important;
}

.gra-margin-left-xl {
    margin-left: 48px !important;
}

/* Margin 2xl */
.gra-margin-2xl {
    margin: 56px !important;
}

.gra-margin-y-2xl {
    margin-top: 56px !important;
    margin-bottom: 56px !important;
}

.gra-margin-x-2xl {
    margin-right: 56px !important;
    margin-left: 56px !important;
}

.gra-margin-top-2xl {
    margin-top: 56px !important;
}

.gra-margin-right-2xl {
    margin-right: 56px !important;
}

.gra-margin-bottom-2xl {
    margin-bottom: 56px !important;
}

.gra-margin-left-2xl {
    margin-left: 56px !important;
}

/* Margin 3xl */
.gra-margin-3xl {
    margin: 64px !important;
}

.gra-margin-y-3xl {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
}

.gra-margin-x-3xl {
    margin-right: 64px !important;
    margin-left: 64px !important;
}

.gra-margin-top-3xl {
    margin-top: 64px !important;
}

.gra-margin-right-3xl {
    margin-right: 64px !important;
}

.gra-margin-bottom-3xl {
    margin-bottom: 64px !important;
}

.gra-margin-left-3xl {
    margin-left: 64px !important;
}

/* Margin 4xl */
.gra-margin-4xl {
    margin: 64px !important;
}

.gra-margin-y-4xl {
    margin-top: 72px !important;
    margin-bottom: 72px !important;
}

.gra-margin-x-4xl {
    margin-right: 72px !important;
    margin-left: 72px !important;
}

.gra-margin-top-4xl {
    margin-top: 72px !important;
}

.gra-margin-right-4xl {
    margin-right: 72px !important;
}

.gra-margin-bottom-4xl {
    margin-bottom: 72px !important;
}

.gra-margin-left-4xl {
    margin-left: 72px !important;
}

/* Margin 5xl */
.gra-margin-5xl {
    margin: 80px !important;
}

.gra-margin-y-5xl {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
}

.gra-margin-x-5xl {
    margin-right: 80px !important;
    margin-left: 80px !important;
}

.gra-margin-top-5xl {
    margin-top: 80px !important;
}

.gra-margin-right-5xl {
    margin-right: 80px !important;
}

.gra-margin-bottom-5xl {
    margin-bottom: 80px !important;
}

.gra-margin-left-5xl {
    margin-left: 80px !important;
}

/* Margin 6xl */
.gra-margin-6xl {
    margin: 96px !important;
}

.gra-margin-y-6xl {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
}

.gra-margin-x-6xl {
    margin-right: 96px !important;
    margin-left: 96px !important;
}

.gra-margin-top-6xl {
    margin-top: 96px !important;
}

.gra-margin-right-6xl {
    margin-right: 96px !important;
}

.gra-margin-bottom-6xl {
    margin-bottom: 96px !important;
}

.gra-margin-left-6xl {
    margin-left: 96px !important;
}

/* Margin 7xl */
.gra-margin-7xl {
    margin: 120px !important;
}

.gra-margin-y-7xl {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
}

.gra-margin-x-7xl {
    margin-right: 120px !important;
    margin-left: 120px !important;
}

.gra-margin-top-7xl {
    margin-top: 120px !important;
}

.gra-margin-right-7xl {
    margin-right: 120px !important;
}

.gra-margin-bottom-7xl {
    margin-bottom: 120px !important;
}

.gra-margin-left-7xl {
    margin-left: 120px !important;
}

/* Paddings */
/* padding 0px */
.gra-padding-0 {
    padding: 0px !important;
}

.gra-padding-y-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.gra-padding-x-0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.gra-padding-top-0 {
    padding-top: 0px !important;
}

.gra-padding-right-0 {
    padding-right: 0px !important;
}

.gra-padding-bottom-0 {
    padding-bottom: 0px !important;
}

.gra-padding-left-0 {
    padding-left: 0px !important;
}

/* padding 5xs */
.gra-padding-5xs {
    padding: 2px !important;
}

.gra-padding-y-5xs {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.gra-padding-x-5xs {
    padding-right: 2px !important;
    padding-left: 2px !important;
}

.gra-padding-top-5xs {
    padding-top: 2px !important;
}

.gra-padding-right-5xs {
    padding-right: 2px !important;
}

.gra-padding-bottom-5xs {
    padding-bottom: 2px !important;
}

.gra-padding-left-5xs {
    padding-left: 2px !important;
}

/* padding 4xs */
.gra-padding-4xs {
    padding: 4px !important;
}

.gra-padding-y-4xs {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.gra-padding-x-4xs {
    padding-right: 4px !important;
    padding-left: 4px !important;
}

.gra-padding-top-4xs {
    padding-top: 4px !important;
}

.gra-padding-right-4xs {
    padding-right: 4px !important;
}

.gra-padding-bottom-4xs {
    padding-bottom: 4px !important;
}

.gra-padding-left-4xs {
    padding-left: 4px !important;
}

/* padding 3xs */
.gra-padding-3xs {
    padding: 8px !important;
}

.gra-padding-y-3xs {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.gra-padding-x-3xs {
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.gra-padding-top-3xs {
    padding-top: 8px !important;
}

.gra-padding-right-3xs {
    padding-right: 8px !important;
}

.gra-padding-bottom-3xs {
    padding-bottom: 8px !important;
}

.gra-padding-left-3xs {
    padding-left: 8px !important;
}

/* padding 2xs */
.gra-padding-2xs {
    padding: 12px !important;
}

.gra-padding-y-2xs {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.gra-padding-x-2xs {
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.gra-padding-top-2xs {
    padding-top: 12px !important;
}

.gra-padding-right-2xs {
    padding-right: 12px !important;
}

.gra-padding-bottom-2xs {
    padding-bottom: 12px !important;
}

.gra-padding-left-2xs {
    padding-left: 12px !important;
}

/* padding xs */
.gra-padding-xs {
    padding: 16px !important;
}

.gra-padding-y-xs {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.gra-padding-x-xs {
    padding-right: 16px !important;
    padding-left: 16px !important;
}

.gra-padding-top-xs {
    padding-top: 16px !important;
}

.gra-padding-right-xs {
    padding-right: 16px !important;
}

.gra-padding-bottom-xs {
    padding-bottom: 16px !important;
}

.gra-padding-left-xs {
    padding-left: 16px !important;
}

/* padding s */
.gra-padding-s {
    padding: 24px !important;
}

.gra-padding-y-s {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.gra-padding-x-s {
    padding-right: 24px !important;
    padding-left: 24px !important;
}

.gra-padding-top-s {
    padding-top: 24px !important;
}

.gra-padding-right-s {
    padding-right: 24px !important;
}

.gra-padding-bottom-s {
    padding-bottom: 24px !important;
}

.gra-padding-left-s {
    padding-left: 24px !important;
}

/* padding m */
.gra-padding-m {
    padding: 32px !important;
}

.gra-padding-y-m {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.gra-padding-x-m {
    padding-right: 32px !important;
    padding-left: 32px !important;
}

.gra-padding-top-m {
    padding-top: 32px !important;
}

.gra-padding-right-m {
    padding-right: 32px !important;
}

.gra-padding-bottom-m {
    padding-bottom: 32px !important;
}

.gra-padding-left-m {
    padding-left: 32px !important;
}

/* padding l */
.gra-padding-l {
    padding: 40px !important;
}

.gra-padding-y-l {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.gra-padding-x-l {
    padding-right: 40px !important;
    padding-left: 40px !important;
}

.gra-padding-top-l {
    padding-top: 40px !important;
}

.gra-padding-right-l {
    padding-right: 40px !important;
}

.gra-padding-bottom-l {
    padding-bottom: 40px !important;
}

.gra-padding-left-l {
    padding-left: 40px !important;
}

/* padding xl */
.gra-padding-xl {
    padding: 48px !important;
}

.gra-padding-y-xl {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

.gra-padding-x-xl {
    padding-right: 48px !important;
    padding-left: 48px !important;
}

.gra-padding-top-xl {
    padding-top: 48px !important;
}

.gra-padding-right-xl {
    padding-right: 48px !important;
}

.gra-padding-bottom-xl {
    padding-bottom: 48px !important;
}

.gra-padding-left-xl {
    padding-left: 48px !important;
}

/* padding 2xl */
.gra-padding-2xl {
    padding: 56px !important;
}

.gra-padding-y-2xl {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}

.gra-padding-x-2xl {
    padding-right: 56px !important;
    padding-left: 56px !important;
}

.gra-padding-top-2xl {
    padding-top: 56px !important;
}

.gra-padding-right-2xl {
    padding-right: 56px !important;
}

.gra-padding-bottom-2xl {
    padding-bottom: 56px !important;
}

.gra-padding-left-2xl {
    padding-left: 56px !important;
}

/* padding 3xl */
.gra-padding-3xl {
    padding: 64px !important;
}

.gra-padding-y-3xl {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

.gra-padding-x-3xl {
    padding-right: 64px !important;
    padding-left: 64px !important;
}

.gra-padding-top-3xl {
    padding-top: 64px !important;
}

.gra-padding-right-3xl {
    padding-right: 64px !important;
}

.gra-padding-bottom-3xl {
    padding-bottom: 64px !important;
}

.gra-padding-left-3xl {
    padding-left: 64px !important;
}

/* padding 4xl */
.gra-padding-4xl {
    padding: 64px !important;
}

.gra-padding-y-4xl {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

.gra-padding-x-4xl {
    padding-right: 72px !important;
    padding-left: 72px !important;
}

.gra-padding-top-4xl {
    padding-top: 72px !important;
}

.gra-padding-right-4xl {
    padding-right: 72px !important;
}

.gra-padding-bottom-4xl {
    padding-bottom: 72px !important;
}

.gra-padding-left-4xl {
    padding-left: 72px !important;
}

/* padding 5xl */
.gra-padding-5xl {
    padding: 80px !important;
}

.gra-padding-y-5xl {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.gra-padding-x-5xl {
    padding-right: 80px !important;
    padding-left: 80px !important;
}

.gra-padding-top-5xl {
    padding-top: 80px !important;
}

.gra-padding-right-5xl {
    padding-right: 80px !important;
}

.gra-padding-bottom-5xl {
    padding-bottom: 80px !important;
}

.gra-padding-left-5xl {
    padding-left: 80px !important;
}

/* padding 6xl */
.gra-padding-6xl {
    padding: 96px !important;
}

.gra-padding-y-6xl {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

.gra-padding-x-6xl {
    padding-right: 96px !important;
    padding-left: 96px !important;
}

.gra-padding-top-6xl {
    padding-top: 96px !important;
}

.gra-padding-right-6xl {
    padding-right: 96px !important;
}

.gra-padding-bottom-6xl {
    padding-bottom: 96px !important;
}

.gra-padding-left-6xl {
    padding-left: 96px !important;
}

/* padding 7xl */
.gra-padding-7xl {
    padding: 120px !important;
}

.gra-padding-y-7xl {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

.gra-padding-x-7xl {
    padding-right: 120px !important;
    padding-left: 120px !important;
}

.gra-padding-top-7xl {
    padding-top: 120px !important;
}

.gra-padding-right-7xl {
    padding-right: 120px !important;
}

.gra-padding-bottom-7xl {
    padding-bottom: 120px !important;
}

.gra-padding-left-7xl {
    padding-left: 120px !important;
}

/******************************************************************************************* Shadows *********************************************************************************************/
/* Text Shadow */
/* Text Shadow XS */
.gra-text-shadow-xs {
    text-shadow: 0px 1px 2px 0px rgba(12, 73, 79, 0.1) !important;
}

/* Text Shadow S */
.gra-text-shadow-s {
    text-shadow: 0px 2px 4px 0px rgba(12, 73, 79, 0.1) !important;
}

/* Text Shadow M */
.gra-text-shadow-m {
    text-shadow: 0px 4px 6px 0px rgba(12, 73, 79, 0.1) !important;
}

/* Text Shadow L */
.gra-text-shadow-l {
    text-shadow: 0px 6px 8px 0px rgba(12, 73, 79, 0.1) !important;
}

/* Text Shadow XL */
.gra-text-shadow-xl {
    text-shadow: 0px 8px 10px 0px rgba(12, 73, 79, 0.1) !important;
}

/* Text Shadow XXL */
.gra-text-shadow-xxl {
    text-shadow: 0px 4px 40px 0px rgba(12, 73, 79, 0.1) !important;
}

/* Box Shadow */
/* Box Shadow XS */
.gra-box-shadow-xs {
    box-shadow: 0px 1px 2px 0px rgba(12, 73, 79, 0.1) !important;
}

/* box Shadow S */
.gra-box-shadow-s {
    box-shadow: 0px 2px 4px 0px rgba(12, 73, 79, 0.1) !important;
}

/* box Shadow M */
.gra-box-shadow-m {
    box-shadow: 0px 4px 6px 0px rgba(12, 73, 79, 0.1) !important;
}

/* box Shadow L */
.gra-box-shadow-l {
    box-shadow: 0px 6px 8px 0px rgba(12, 73, 79, 0.1) !important;
}

/* box Shadow XL */
.gra-box-shadow-xl {
    box-shadow: 0px 8px 10px 0px rgba(12, 73, 79, 0.1) !important;
}

/* box Shadow XXL */
.gra-box-shadow-xxl {
    box-shadow: 0px 4px 40px 0px rgba(12, 73, 79, 0.1) !important;
}

/*********************************************************************** Rounded Corners *********************************************************************************************************/
/* Rounded Corner s */
.gra-rounded-s {
    border-radius: 4px !important;
}

/* Rounded Corner m */
.gra-rounded-m {
    border-radius: 8px !important;
}

/* Rounded Corner l */
.gra-rounded-l {
    border-radius: 12px !important;
}

/* Rounded Corner xl */
.gra-rounded-xl {
    border-radius: 16px !important;
}

/* Rounded Corner xxl */
.gra-rounded-xxl {
    border-radius: 32px !important;
}

/******************************************************************* Responsiveness grid **********************************************************************************************************/
/* tailwind version */
/* sm up to 768px */
@media screen and ((min-width: 0px) and (max-width: 768px)) {
    .gra-col-tw-1 {
        width: 64px !important;
        float: left !important;
    }

    .gra-col-tw-sm-2 {
        width: 128px !important;
        float: left !important;
    }

    .gra-col-tw-sm-3 {
        width: 192px !important;
        float: left !important;
    }

    .gra-col-tw-sm-4 {
        width: 256px !important;
        float: left !important;
    }

    .gra-col-tw-sm-5 {
        width: 320px !important;
        float: left !important;
    }

    .gra-col-tw-sm-6 {
        width: 384px !important;
        float: left !important;
    }

    .gra-col-tw-sm-7 {
        width: 448px !important;
        float: left !important;
    }

    .gra-col-tw-sm-8 {
        width: 512px !important;
        float: left !important;
    }

    .gra-col-tw-sm-9 {
        width: 576px !important;
        float: left !important;
    }

    .gra-col-tw-sm-10 {
        width: 640px !important;
        float: left !important;
    }

    .gra-col-tw-sm-11 {
        width: 704px !important;
        float: left !important;
    }

    .gra-col-tw-sm-12 {
        width: 768px !important;
        float: left !important;
    }
}

/* md up to 768px < md < 900px*/
@media screen and ((min-width: 768px) and (max-width: 900px)) {
    .gra-col-tw-md-1 {
        width: 75px !important;
        float: left !important;
    }

    .gra-col-tw-md-2 {
        width: 150px !important;
        float: left !important;
    }

    .gra-col-tw-md-3 {
        width: 225px !important;
        float: left !important;
    }

    .gra-col-tw-md-4 {
        width: 300px !important;
        float: left !important;
    }

    .gra-col-tw-md-5 {
        width: 375px !important;
        float: left !important;
    }

    .gra-col-tw-md-6 {
        width: 450px !important;
        float: left !important;
    }

    .gra-col-tw-md-7 {
        width: 525px !important;
        float: left !important;
    }

    .gra-col-tw-md-8 {
        width: 600px !important;
        float: left !important;
    }

    .gra-col-tw-md-9 {
        width: 675px !important;
        float: left !important;
    }

    .gra-col-tw-md-10 {
        width: 750px !important;
        float: left !important;
    }

    .gra-col-tw-md-11 {
        width: 825px !important;
        float: left !important;
    }

    .gra-col-tw-md-12 {
        width: 900px !important;
        float: left !important;
    }
}

/* ld up to 900px < ld < 1200px*/
@media screen and ((min-width: 900px) and (max-width: 1200px)) {
    .gra-col-tw-ld-1 {
        width: 100px !important;
        float: left !important;
    }

    .gra-col-tw-ld-2 {
        width: 200px !important;
        float: left !important;
    }

    .gra-col-tw-ld-3 {
        width: 300px !important;
        float: left !important;
    }

    .gra-col-tw-ld-4 {
        width: 400px !important;
        float: left !important;
    }

    .gra-col-tw-ld-5 {
        width: 500px !important;
        float: left !important;
    }

    .gra-col-tw-ld-6 {
        width: 600px !important;
        float: left !important;
    }

    .gra-col-tw-ld-7 {
        width: 700px !important;
        float: left !important;
    }

    .gra-col-tw-ld-8 {
        width: 800px !important;
        float: left !important;
    }

    .gra-col-tw-ld-9 {
        width: 900px !important;
        float: left !important;
    }

    .gra-col-tw-ld-10 {
        width: 1000px !important;
        float: left !important;
    }

    .gra-col-tw-ld-11 {
        width: 1100px !important;
        float: left !important;
    }

    .gra-col-tw-ld-12 {
        width: 1200px !important;
        float: left !important;
    }
}

/* xl up to 1200px < xl < 1920px*/
@media screen and ((min-width: 1200px) and (max-width: 1920px)) {
    .gra-col-tw-xl-1 {
        width: 160px !important;
        float: left !important;
    }

    .gra-col-tw-xl-2 {
        width: 320px !important;
        float: left !important;
    }

    .gra-col-tw-xl-3 {
        width: 480px !important;
        float: left !important;
    }

    .gra-col-tw-xl-4 {
        width: 640px !important;
        float: left !important;
    }

    .gra-col-tw-xl-5 {
        width: 800px !important;
        float: left !important;
    }

    .gra-col-tw-xl-6 {
        width: 960px !important;
        float: left !important;
    }

    .gra-col-tw-xl-7 {
        width: 1120px !important;
        float: left !important;
    }

    .gra-col-tw-xl-8 {
        width: 1280px !important;
        float: left !important;
    }

    .gra-col-tw-xl-9 {
        width: 1440px !important;
        float: left !important;
    }

    .gra-col-tw-xl-10 {
        width: 1600px !important;
        float: left !important;
    }

    .gra-col-tw-xl-11 {
        width: 1760px !important;
        float: left !important;
    }

    .gra-col-tw-xl-12 {
        width: 1920px !important;
        float: left !important;
    }
}

/* Bootstrap version */
/* sm up to 768px */
@media screen and ((min-width: 0px) and (max-width: 768px)) {
    .gra-col-bs-sm-1 {
        width: calc(100% / 1) !important;
        float: left !important;
    }

    .gra-col-bs-sm-2 {
        width: calc(100% / 2) !important;
        float: left !important;
    }

    .gra-col-bs-sm-3 {
        width: calc(100% / 3) !important;
        float: left !important;
    }

    .gra-col-bs-sm-4 {
        width: calc(100% / 4) !important;
        float: left !important;
    }

    .gra-col-bs-sm-5 {
        width: calc(100% / 5) !important;
        float: left !important;
    }

    .gra-col-bs-sm-6 {
        width: calc(100% / 6) !important;
        float: left !important;
    }

    .gra-col-bs-sm-7 {
        width: calc(100% / 7) !important;
        float: left !important;
    }

    .gra-col-bs-sm-8 {
        width: calc(100% / 8) !important;
        float: left !important;
    }

    .gra-col-bs-sm-9 {
        width: calc(100% / 9) !important;
        float: left !important;
    }

    .gra-col-bs-sm-10 {
        width: calc(100% / 10) !important;
        float: left !important;
    }

    .gra-col-bs-sm-11 {
        width: calc(100% / 11) !important;
        float: left !important;
    }

    .gra-col-bs--sm-12 {
        width: calc(100% / 12) !important;
        float: left !important;
    }
}

/* md up to 768px < md < 900px*/
@media screen and ((min-width: 768px) and (max-width: 900px)) {
    .gra-col-bs-md-1 {
        width: calc(100% / 1) !important;
        float: left !important;
    }

    .gra-col-bs-md-2 {
        width: calc(100% / 2) !important;
        float: left !important;
    }

    .gra-col-bs-md-3 {
        width: calc(100% / 3) !important;
        float: left !important;
    }

    .gra-col-bs-md-4 {
        width: calc(100% / 4) !important;
        float: left !important;
    }

    .gra-col-bs-md-5 {
        width: calc(100% / 5) !important;
        float: left !important;
    }

    .gra-col-bs-md-6 {
        width: calc(100% / 6) !important;
        float: left !important;
    }

    .gra-col-bs-md-7 {
        width: calc(100% / 7) !important;
        float: left !important;
    }

    .gra-col-bs-md-8 {
        width: calc(100% / 8) !important;
        float: left !important;
    }

    .gra-col-bs-md-9 {
        width: calc(100% / 9) !important;
        float: left !important;
    }

    .gra-col-bs-md-10 {
        width: calc(100% / 10) !important;
        float: left !important;
    }

    .gra-col-bs-md-11 {
        width: calc(100% / 11) !important;
        float: left !important;
    }

    .gra-col-bs-md-12 {
        width: calc(100% / 12) !important;
        float: left !important;
    }
}

/* ld up to 900px < ld < 1200px*/
@media screen and ((min-width: 900px) and (max-width: 1200px)) {
    .gra-col-bs-ld-1 {
        width: calc(100% / 1) !important;
        float: left !important;
    }

    .gra-col-bs-ld-2 {
        width: calc(100% / 2) !important;
        float: left !important;
    }

    .gra-col-bs-ld-3 {
        width: calc(100% / 3) !important;
        float: left !important;
    }

    .gra-col-bs-ld-4 {
        width: calc(100% / 4) !important;
        float: left !important;
    }

    .gra-col-bs-ld-5 {
        width: calc(100% / 5) !important;
        float: left !important;
    }

    .gra-col-bs-ld-6 {
        width: calc(100% / 6) !important;
        float: left !important;
    }

    .gra-col-bs-ld-7 {
        width: calc(100% / 7) !important;
        float: left !important;
    }

    .gra-col-bs-ld-8 {
        width: calc(100% / 8) !important;
        float: left !important;
    }

    .gra-col-bs-ld-9 {
        width: calc(100% / 9) !important;
        float: left !important;
    }

    .gra-col-bs-ld-10 {
        width: calc(100% / 10) !important;
        float: left !important;
    }

    .gra-col-bs-ld-11 {
        width: calc(100% / 11) !important;
        float: left !important;
    }

    .gra-col-bs-ld-12 {
        width: calc(100% / 12) !important;
        float: left !important;
    }
}

/* xl up to 1200px < xl <= 1920px*/
@media screen and ((min-width: 1200px) and (max-width: 1920px)) {
    .gra-col-bs-xl-1 {
        width: calc(100% / 1) !important;
        float: left !important;
    }

    .gra-col-bs-xl-2 {
        width: calc(100% / 2) !important;
        float: left !important;
    }

    .gra-col-bs-xl-3 {
        width: calc(100% / 3) !important;
        float: left !important;
    }

    .gra-col-bs-xl-4 {
        width: calc(100% / 4) !important;
        float: left !important;
    }

    .gra-col-bs-xl-5 {
        width: calc(100% / 5) !important;
        float: left !important;
    }

    .gra-col-bs-xl-6 {
        width: calc(100% / 6) !important;
        float: left !important;
    }

    .gra-col-bs-xl-7 {
        width: calc(100% / 7) !important;
        float: left !important;
    }

    .gra-col-bs-xl-8 {
        width: calc(100% / 8) !important;
        float: left !important;
    }

    .gra-col-bs-xl-9 {
        width: calc(100% / 9) !important;
        float: left !important;
    }

    .gra-col-bs-xl-10 {
        width: calc(100% / 10) !important;
        float: left !important;
    }

    .gra-col-bs-xl-11 {
        width: calc(100% / 11) !important;
        float: left !important;
    }

    .gra-col-bs-xl-12 {
        width: calc(100% / 12) !important;
        float: left !important;
    }
}

/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------ Bootstrap override and Components style -----------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------------------*/
:root {
    --bs-blue: #327196;
}

body {
    padding: 10px;
}

/* ---------- Accordion -------------------- */
.accordion {
    font-family: lato;
}

.accordion:not(.colapsed) {
    border: 1px solid #E1ECF2;
}

.accordion-button:not(.collapsed) {
    background: #E1ECF2 !important;
    color: #173344 !important;
    border: 1px solid #3980AA !important;
}

.accordion-button:hover,
.collapsed {
    background-color: #327196 !important;
    color: white !important;
}

.accordion-button:focus {
    border-color: #3980AA !important;
    color: #173344 !important;
}

.accordion-button:hover:focus {
    border-color: #3980AA !important;
    color: white !important;
}

button.collapsed {
    color: white;
}

button.collapsed {
    color: #327196 !important;
    background-color: white !important;
}

.accordion-item {
    background-color: #E1ECF2;
    border: 1px solid #3980AA;
}

button:focus:not(:focus-visible) {
    color: white;
}

.accordion-button:hover:not(.collapsed) {
    background-color: #E1ECF2 !important;
    border: 1px solid #3980AA !important;
    color: #173344 !important;
}

/* ------------------------ Fim - Acordion ------------*/
/* ------------------------ Avatar --------------------*/
div.graAvatarWithFoto {
    background-color: #E1ECF2;
    width: 42px;
    height: 42px;
    padding: 2px;
    border-radius: 32px;
}

img.graAvatarFoto {
    width: 38px;
    height: 38px;
    border-radius: 32px;
    margin: auto;
}

img.graAvatarLogo {
    width: 24px;
    height: 24px;
    border-radius: 32px;
    margin: auto;
}

div.graAvatarWithoutFoto {
    background-color: #E1ECF2;
    width: 42px;
    height: 42px;
    padding: 7px 9px;
    border-radius: 32px;
    vertical-align: middle;
}

div.graAvatarWithText {
    background-color: #E1ECF2;
    width: 42px;
    height: 42px;
    padding: 9px;
    border-radius: 32px;
    color: #173344;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

/* ------------------------ Fim Avatar ----------------*/
/* ------------------------ Bread Crumb ---------------*/
.bc {
    font-size: 14px;
    color: #25536F;
}

.bc:hover {
    color: #3980AA;
}

.graBcLink {
    text-decoration: underline;
}

.graBcImg {
    width: 24px;
    height: 24px;
}

.graBcSelected {
    font-weight: bold;
}

/* ------------------------ Fim Bread Crumb -----------*/
/* ------------------------ Buttons Primary -------------------*/
.btn {
    border-radius: 32px;
    height: 44px;
    width: 160px;
    font-size: 16px;
    text-align: center;
    padding: 2px;
}

.btn-primary {
    background-color: #25536F;
    color: white;
}

.btn-primary:hover {
    background-color: #173344;
    color: white;
}

.btn-primary:active {
    background-color: #327196 !important;
    color: white;
}

.btn img.iconLeft {
    float: left;
    width: 22px;
    height: 22px;
    margin: 0px;
    /*margin-left: 8px;*/
    margin-top: 1px;
}

.btn img.iconRight {
    float: right;
    width: 22px;
    height: 22px;
    margin: 0px;
    /*margin-right: 8px;*/
    margin-top: 1px;
}

.btn-primary-accessibility {
    border: 3px solid #FFCB2D !important;
}

.btn-primary-deactivated,
.btn-primary-deactivated:hover>.disabled {
    background-color: #F7F7F7 !important;
    color: #505050 !important;
    border: none !important;
}

.btn-primary-error,
.btn-primary-error:hover {
    background-color: #A0291A !important;
    color: white !important;
    border: none !important;
}

/*----------------------- Icon primary */
.icon {
    border-radius: 32px;
    height: 44px;
    width: 44px;
    font-size: 16px;
    text-align: center;
    padding: 2px;
}

.icon-primary {
    background-color: #25536F;
    color: white;
}

.icon-primary:hover {
    background-color: #173344;
    color: white;
}

.icon-primary:active {
    background-color: #327196 !important;
    color: white;
}

.icon img.iconLeft {
    width: 22px;
    height: 22px;
    margin: 0px;
    /*margin-left: 8px;*/
}

.icon img.iconRight {
    width: 22px;
    height: 22px;
    margin: 0px;
    /*margin-right: 8px;*/
}

.icon-primary-accessibility {
    border: 3px solid #FFCB2D !important;
}

.icon-primary-deactivated,
.icon-primary-deactivated:hover,
.icon-primary-deactivated:hover>.disabled {
    background-color: #F7F7F7 !important;
    color: #505050 !important;
    border: none !important;
}

.icon-primary-error,
.icon-primary-error:hover {
    background-color: #A0291A !important;
    color: white !important;
    border: none !important;
}

/* ------------------------ Secondary ----------------- */
.btn-secondary,
.btn-default {
    background-color: #F7F7F7;
    border: 1px solid #25536F;
    color: #25536F;
}

.btn-secondary:hover,
.btn-default:hover {
    background-color: #F7F7F7;
    border: 1px solid #25536F;
    color: #25536F;
}

.btn-secondary:active,
.btn-default:active {
    background-color: #F7F7F7;
    border: 1px solid #25536F;
    color: #25536F;
}

.btn-secondary:focus,
.btn-default:focus {
    background-color: #F7F7F7;
    border: 1px solid #25536F;
    color: #25536F;
}

.btn img.iconLeft {
    float: left;
    width: 22px;
    height: 22px;
    margin: 0px;
    /*margin-left: 8px;*/
    margin-top: 1px;
}

.btn img.iconRight {
    float: right;
    width: 22px;
    height: 22px;
    margin: 0px;
    /*margin-right: 8px;*/
    margin-top: 1px;
}

.btn-secondary-deactivated,
.btn-secondary-deactivated:hover>.disabled {
    border: 1px solid #505050 !important;
    background-color: #f7f7f7 !important;
    color: #505050 !important;
}

.btn-secondary-error,
.btn-secondary-error:hover {
    border: 1px solid #A0291A !important;
    background-color: #f0f0f0;
    color: #A0291A !important;
}

/* ------------------------ Fim Buttons ---------------*/
/* ------------------------ Icons Secondary -----------*/
.icon-secondary {
    background-color: #F7F7F7;
    border: 1px solid #25536F;
    color: #25536F;
}

.icon-secondary:hover {
    background-color: #F7F7F7;
    border: 1px solid #25536F;
    color: #25536F;
}

.icon-secondary:active {
    background-color: #F7F7F7;
    border: 1px solid #25536F;
    color: #25536F;
}

.icon-secondary:focus {
    background-color: #F7F7F7;
    border: 1px solid #25536F;
    color: #25536F;
}

.icon img.iconLeft {
    width: 22px;
    height: 22px;
    margin: 0px;
    /*margin-left: 8px;*/
    /*margin-top: 1px;*/
}

.icon img.iconRight {
    width: 22px;
    height: 22px;
    margin: 0px;
    /*margin-right: 8px;*/
    /*margin-top: 1px;*/
}

.icon-secondary-deactivated,
.icon-secondary-deactivated:hover>.disabled {
    border: 1px solid #505050 !important;
    background-color: #f7f7f7 !important;
    color: #505050 !important;
}

.icon-secondary-error,
.icon-secondary-error:hover {
    border: 1px solid #A0291A !important;
    background-color: #f0f0f0;
    color: #A0291A !important;
}

/* ---------------- style inputs ------------------*/
label {
    color: #25536F;
    font-family: lato;
    font-size: 14px
}

.form-control {
    border: 1px solid #C2C2C2;
    background-color: white;
    font-size: 14px;
}

.form:hover,
.form:active {
    border: 1px solid #327196 !important;
    ;
    background-color: white;
}

input[disabled=""],
input[disabled=""]:hover {
    border: 1px solid #C2C2C2 !important;
    /*background-color: white;*/
    font-size: 14px;
}

.form-error,
.form-error:hover {
    border: 1px solid #A0291A !important;
    background-color: white;
}

.form-accessibility {
    border: 3px solid #FFCB2D !important;
}

/* ------------------------------- Cards ------------------------------------------------------------------------------- */

.card-informative:hover {
    background-color: #E1ECF2 !important;
}

.card-informative-horizontal-S {
    width: 586px;
    height: 240px;
    border-radius: 16px !important;
    padding: 24px !important;
    background-color: #F5F9FB;

}

.card-disabled-horizontal-S {

    width: 586px;
    height: 240px;
    border-radius: 16px !important;
    padding: 24px !important;
    background-color: #E8E8E8;

}

.card-informative-horizontal-M {
    width: 800px;
    height: 354px;
    border-radius: 16px !important;
    padding: 24px !important;
    background-color: #F5F9FB;

}

.card-disabled-horizontal-M {
    width: 800px;
    height: 354px;
    border-radius: 16px !important;
    padding: 24px !important;
    background-color: #E8E8E8;
}

.card-informative-horizontal-S>div.image,
.card-informative-horizontal-M>div.image {
    float: left;
}

.card-informative-horizontal-S>div.image>img.image-S {
    width: 230px !important;
    height: 192px !important;
    border-radius: 8px;
}

.card-informative-horizontal-M>div.image>img.image-M {
    width: 360px !important;
    height: 300px !important;
    border-radius: 8px;
}

.card-informative-horizontal-S>div.text-S {
    float: right;
    width: 276px;
}

.card-informative-horizontal-M>div.text-M {
    float: right;
    width: 360px;
}

.card-informative-horizontal-S>div.text-S>p.title {
    /*font-family: lato!important;*/
    font-size: 16px !important;
    font-weight: bold !important;
    color: #25536F !important;
}

.card-informative-horizontal-M>div.text-M>p.title {
    /*font-family: lato!important;*/
    font-size: 16px !important;
    font-weight: bold !important;
    color: #25536F !important;
}


.card-informative-horizontal-S>div.text-S>p.badge {
    /*font-family: lato!important;*/
    font-size: 14px !important;
    color: black !important;
}

.card-informative-horizontal-M>div.text-M>p.badge {
    /*font-family: lato!important;*/
    font-size: 14px !important;
    color: black !important;
}

.card-informative-horizontal-S>div.text-S>p.badge>img {
    vertical-align: text-bottom;
    width: 24px !important;
    height: 24px !important;
}

.card-informative-horizontal-M>div.text-M>p.badge>img {
    vertical-align: text-bottom;
    width: 24px !important;
    height: 24px !important;
}

.card-informative-horizontal-S>div.text-S>p.text {
    /*font-family: lato!important;*/
    font-size: 14px !important;
    color: black !important;
    height: 106px;
    overflow-y: scroll !important;
}

.card-informative-horizontal-M>div.text-M>p.text {
    /*font-family: lato!important;*/
    font-size: 14px !important;
    color: black !important;
    height: 140px !important;
    overflow-y: scroll !important;
}

.card-informative-vertical {
    width: 406px !important;
    height: 678px !important;
    border-radius: 16px !important;
    padding: 24px !important;
    background-color: #F5F9FB;

}

.card-disabled-vertical {
    width: 406px !important;
    height: 678px !important;
    border-radius: 16px !important;
    padding: 24px !important;
    background-color: #E8E8E8;

}

.card-informative-vertical>div.image>img.image-M {
    width: 360px !important;
    height: 300px !important;
    border-radius: 8px;
}

.card-informative-vertical>div.text-M {
    width: 358px;
}

.card-informative-vertical>div.text-M>p.title {
    /*font-family: lato!important;*/
    font-size: 16px !important;
    font-weight: bold !important;
    color: #25536F !important;
}

.card-informative-vertical>div.text-M>p.badge {
    /*font-family: lato!important;*/
    font-size: 14px !important;
    color: black !important;
}

.card-informative-vertical>div.text-M>p.badge>img {
    vertical-align: text-bottom;
    width: 24px !important;
    height: 24px !important;
}

.card-informative-vertical>div.text-M>p.text {
    /*font-family: lato!important;*/
    font-size: 14px !important;
    color: black !important;
    height: 168px !important;
    overflow-y: scroll !important;
}

/* -feedback- */
.card-feedback {
    max-width: 760px;
    height: 256px;
    min-width: 400px;
    padding: 24px;
    border-radius: 12px;
}

.card-feedback-danger {
    background-color: #FFE8E3;
}

.card-feedback-info {
    background-color: #E5EEF6;
}

.card-feedback-alert {
    background-color: #FCF5DE;
}

.card-feedback-success {
    background-color: #E5F0E0;
}

.card-title-wrapper {
    display: flex;
    flex-direction: row;
}

.card-feedback .title {
    color: #25536F;
    font-size: 16px;
    font-weight: bold;
    flex-grow: 1;
}

.card-feedback .badge,
.card-feedback .badge img {
    width: 24px;
    height: 24px;
}

.card-feedback-close {
    width: 20px;
    height: 20px;
}

.card-feedback-text {
    font-size: 14px;
    height: 100px;
    margin-top: 15px;
    overflow-y: scroll;
}

.card-feedback a.link {
    color: #25536F;
    float: right;
    font-size: 14px;
}

/* -- Card Text -- */
.card-text {
    max-width: 760px;
    min-width: 400px;
    height: 192px;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: row;
}

.card-text-default {
    background-color: white;
}

.card-text-default:hover {
    background-color: #E1ECF2;
}

.card-text-disabled {
    background-color: #E8E8E8;
}

.card-text-disabled div.text p.title {
    font-size: 16px;
    color: #505050 !important;
    font-weight: bold;
}

.card-text div.picture {
    width: 80px;
    border-radius: 180px;
    height: 80px;
    padding: 16px;
    background-color: #F5F9FB;
}

.card-text div.text {
    flex-grow: 1;
    margin-left: 14px;
}

.card-text div.text p.title {
    font-size: 16px;
    color: #25536F;
    margin-bottom: 0px;
    font-weight: bold;
}

.card-text div.text p.text {
    font-size: 14px;
    color: black;
    height: 105px;
    overflow-y: scroll;
}

.card-dashboard {
    width: 252px;
    height: 110px;
    border-radius: 12px;
    padding: 16px;
    background-color: white;
}

.card-dashboard-wrapper {
    display: flex;
    flex-direction: row;
}

.card-dashboard-title {
    flex-grow: 1;
    font-size: 14px;
    color: black;
}

.card-dashboard-icon,
.card-dashboard-icon img {
    width: 24px;
    height: 24px;
}

.card-dashboard-text {
    margin-top: 5px;
    color: #25536F;
    font-size: 26px;
}

/* - Card Media queries - */
@media screen and (max-width: 500px) {
    .card-informative-horizontal-S {
        width: 276px !important;
        height: 424px !important;
    }

    .card-disabled-horizontal-S {
        width: 276px !important;
        height: 424px !important;
    }

    .card-informative-horizontal-M {
        width: 406px !important;
        height: 678px !important;
    }

    .card-disabled-horizontal-M {
        width: 406px !important;
        height: 678px !important;
    }

    .card-informative-horizontal-S>div.image,
    .card-informative-horizontal-M>div.image {
        float: none;
    }

    .card-informative-horizontal-S>div.text-S {
        float: none;
        width: 276px;
    }

    .card-informative-horizontal-S>div.text-S>p.text {
        width: 236px !important;
    }

    .card-informative-horizontal-M>div.text-M {
        float: none;
        width: 360px;
        height: 360px !important;
    }
}

/* ------------------------------- Cards End --------------------------------------------------------------------------- */

/* ------------------------------- Owl carrousel ----------------------------------------------------------------------- */
/* -- introduzidos inline pelo componente
* ------------------------------- Owl web carrousel -------------------------------------------------------------------- */
/* -- introduzidos inline pelo componente */
/* ------------------------------- CheckBoxes -------------------------------------------------------------------- */
.form-check-input:checked {
    background-color: #25536f !important;
    border-color: #25536f !important;
}

.form-check-input {
    border: 2px solid #25536f !important;
}

.form-check-input-error {
    border: 2px solid #a12f21 !important;
}

.form-check-input:disabled {
    border: 2px solid #25536f !important;
}

.form-check-accessibility {
    border: 1px solid #FFCB2D !important;
    border-radius: 8px !important;
}

/* ------------------------------------------- Calendars --------------------------------------------------- */
.daterangepicker {
    border: 1px solid #3980AA;
    border-radius: 4px;
}

.daterangepicker th,
.daterangepicker .drp-selected {
    color: #25536F;
}

.daterangepicker .in-range {
    border-radius: 4px !important;
    border: 4px solid white !important;
}

.daterangepicker .btn-sm {
    /* -- Tamanho dos botões small -- */
    width: 110px !important;
    height: 33px !important;
}

.daterangepicker .available {
    font-weight: bold;
}

.daterangepicker .month {
    padding-bottom: 2px !important;
    border-bottom: 1px solid #25536F !important;
}


.btn-sm {
    /* -- Tamanho dos botões small -- */
    width: 110px !important;
    height: 33px !important;
}

/* ------------------------------------------- Horizontal rulers --------------------------------------------------- */



.gra-hr-horizontal-dark-xl {
    border: 6px solid #327196;
}

.gra-hr-horizontal-dark-l {
    border: 4px solid #327196;
}

.gra-hr-horizontal-dark-m {
    border: 2px solid #327196;
}

.gra-hr-horizontal-dark-s {
    border: 1px solid #327196;
}

.gra-hr-horizontal-light-xl {
    border: 6px solid #B0CCDD;
}

.gra-hr-horizontal-light-l {
    border: 4px solid #B0CCDD;
}

.gra-hr-horizontal-light-m {
    border: 2px solid #B0CCDD;
}

.gra-hr-horizontal-light-s {
    border: 1px solid #B0CCDD;
}

.gra-hr-vertical-dark-xl {
    width: 1px;
    display: inline-block;
    border: 6px solid #327196;
}

.gra-hr-vertical-dark-l {
    width: 1px;
    display: inline-block;
    border: 4px solid #327196;
}

.gra-hr-vertical-dark-m {
    width: 1px;
    display: inline-block;
    border: 2px solid #327196;
}

.gra-hr-vertical-dark-s {
    width: 1px;
    display: inline-block;
    border: 1px solid #327196;
}

.gra-hr-vertical-light-xl {
    width: 1px;
    display: inline-block;
    border: 6px solid #B0CCDD;
}

.gra-hr-vertical-light-l {
    width: 1px;
    display: inline-block;
    border: 4px solid #B0CCDD;
}

.gra-hr-vertical-light-m {
    width: 1px;
    display: inline-block;
    border: 2px solid #B0CCDD;
}

.gra-hr-vertical-light-s {
    width: 1px;
    display: inline-block;
    border: 1px solid #B0CCDD;
}

/* ------------------------------------------------------------------- Drop Down Css ---------------------------- */
.graDropdown-normal:hover div {
    border: 1px solid #327196;
}

.graDropdown-error,
.graDropdown-error:hover {
    border: 1px solid #A0291A;
}

.graDropdown-disabled,
.graDropdown-disabled:hover {
    border: 1px solid #C2C2C2;
}

.graDropdown-input {
    border: none !important;
    flex-grow: 1;
}

.gradropdown {
    display: flex;
    flex-direction: row;
    padding: 8px;
}

.gradropdown-card {
    padding: 0px;
    margin-top: 10px;
    display: none;
}

.graDropDownOptions {
    font-size: 14px;
    font-weight: bold;
    margin: 2px 10px 2px 10px;
    padding-left: 2px;
}

.graDropDownOptions:hover {
    color: white;
    background-color: #327196;
    border-radius: 5px;
    padding-left: 2px;
}

.p_hr {
    margin: 2px;
}

/* ------------------------------------------------------------ Fim dos Dropdowns CSS ------------------------------ */

/*-------------------------------------------- Separadores --------------------------------------------------------- */
button.nav-link{
    border: none!important;
    color: #25536F!important;
}
button.active{
    color: #173344!important;
    border-bottom: 1px solid #173344!important;
}
button.nav-link:hover{
    color: #327196!important;
    border-bottom: 1px solid #327196!important;
}
/*-------------------------------------------- Fim Separadores --------------------------------------------------------- */

/* ---------------- Table ------------------- */
table.table {
    border-radius: 8px !important;
    border: 1px solid #B0CCDD !important;
}

table.table thead tr th {
    background-color: #E1ECF2 !important;
    border-bottom: 1px solid #B0CCDD !important;
    color: #25536F !important;
}

table.table .dt-column-title {
    color: #25536F !important;
}

table.table tbody tr:nth-child(2n-1) td,
table.table tbody tr:nth-child(2n-1) th {
    background-color: white !important;
    border-bottom: 1px solid #B0CCDD !important;
    border-top: 1px solid #B0CCDD !important;
}

table.table tbody tr:nth-child(2n) td,
table.table tbody tr:nth-child(2n) th {
    background-color: #F5F9FB !important;
    border-bottom: 1px solid #B0CCDD !important;
    border-top: 1px solid #B0CCDD !important;
}

table.table tbody tr:hover td {
    background-color: #B0CCDD !important;
}

.first,
.last {
    display: none;
}

.dt-paging {
    background-color: none !important;
}

.dt-paging-button {
    margin-right: 6px;
    margin-left: 6px;
    border-radius: 32px;
    background-color: white;
    border: 2px solid #173344;
    width: 44px;
    height: 44px;
}

.current {
    background-color: #173344;
    color: white;
    font-weight: bold;
    border: 2px solid #173344;
}
/*---------------------------------- Style de Tab's ------------------------------------------------------------------*/
button.nav-link{
    border: none!important;
    color: #25536F!important;
}
button.active{
    color: #173344!important;
    border-bottom: 1px solid #173344!important;
}
button.nav-link:hover{
    color: #327196!important;
    border-bottom: 1px solid #327196!important;
}
/*---------------------------------- Fim de style de Tab's ------------------------------------------------------------------*/

/* Data table inicialization example: 
                let tableMine = new DataTable("#tableMine",{
    language:languagePT,
    language:{paginate: {
                previous: 'Previous page'
            },
        },
    layout: {
        bottomEnd: {
            paging: {
                firstLast: false
            }
        }
    }
});
            */