/** 
* 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;
}

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

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

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

.available {
    font-weight: bold;
}

.month {
    padding-bottom: 2px !important;
    border-bottom: 1px solid #25536F !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 ------------------------------ */