/* Styles custom to Grabatus */

/* Using as a class bootstrap, p.e.: class="zoom-effect" */
.zoom-effect {
    transition: transform 0.4s;
}

.zoom-effect:hover {
    transform: scale(1.033);
}

/*To use: background-color: var(--primary-color);*/
:root {
    /* GBT BLUE */
    ---GBT_BLUE_DARK_COLOR: #2d7a8c;
    ---GBT_BLUE_MIDDLE_DARK_COLOR: #458d9b;
    ---GBT_BLUE_MIDDLE_COLOR: #6fa8b2;
    ---GBT_BLUE_MIDDLE_LIGHT_COLOR: #9ec4cc;
    ---GBT_BLUE_LIGHT_COLOR: #d3e4e8;
    
    /* GBT GRAY */
    ---GBT_GRAY_DARK_COLOR: #343a40;
    ---GBT_GRAY_COLOR: #6c757d;
    ---GBT_GRAY_LIGHT: #adb5bd;
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24
  }
  
  .btn-primary {
    background-color: #2d7a8c !important;
    border-color: #2d7a8c !important;
}

.btn-primary:hover {
    background-color: #245f6b !important;
    border-color: #245f6b !important;
}

.btn-primary:focus, .btn-primary:active {
    background-color: #1d4a54 !important;
    border-color: #1d4a54 !important;
    box-shadow: 0 0 0 0.2rem rgba(45, 122, 140, 0.25) !important;
}


/*
    //  Grabatus colors
    // ==================

    // Blue
    const GBT_BLUE_DARK = '#2d7a8c'
    const GBT_BLUE_MIDDLE_DARK = '#458d9b'
    const GBT_BLUE_MIDDLE = '#6fa8b2'
    const GBT_BLUE_MIDDLE_LIGHT = '#9ec4cc'
    const GBT_BLUE_LIGHT = '#d3e4e8'

    // Red
    const GBT_RED_DARK = '#b71c1c'
    const GBT_RED_MIDDLE_DARK = '#d32f2f'
    const GBT_RED_MIDDLE = '#f44336'
    const GBT_RED_MIDDLE_LIGHT = '#e57373'
    const GBT_RED_LIGHT = '#ffcdd2'

    // Yellow
    const GBT_YELLOW_DARK = '#f57f17'
    const GBT_YELLOW_MIDDLE_DARK = '#fbc02d'
    const GBT_YELLOW_MIDDLE = '#ffeb3b'
    const GBT_YELLOW_MIDDLE_LIGHT = '#fff176'
    const GBT_YELLOW_LIGHT = '#fff9c4'

    // Green
    const GBT_GREEN_DARK = '#004d40'
    const GBT_GREEN_MIDDLE_DARK = '#00796b'
    const GBT_GREEN_MIDDLE = '#009688'
    const GBT_GREEN_MIDDLE_LIGHT = '#4db6ac'
    const GBT_GREEN_LIGHT = '#b2dfdb'

    // Orange
    const GBT_ORANGE_DARK = '#e65100'
    const GBT_ORANGE_MIDDLE_DARK = '#f57c00'
    const GBT_ORANGE_MIDDLE = '#ff9800'
    const GBT_ORANGE_MIDDLE_LIGHT = '#ffb74d'
    const GBT_ORANGE_LIGHT = '#ffe0b2'

    // GRAY
    const GBT_GRAY_DARK = '#212121'
    const GBT_GRAY_MIDDLE_DARK = '#616161'
    const GBT_GRAY = '#9e9e9e'
    const GBT_GRAY_MIDDLE_LIGHT = '#e0e0e0'
    const GBT_GRAY_LIGHT = '#f5f5f5'
*/