::ng-deep {

    //Adjustment of size and position of the dropdown panel
    .cdk-overlay-pane{
        transform: translateY(2%) !important;
        border-radius: 4px !important;
    }

    .dp-panel-my, .dp-panel-yy {

        width: 244px !important;
        height: auto !important;
        border-radius: 4px !important;        

        .mat-calendar-body-selected {
            color: $rustyRed !important;
            background-color: transparent !important;
            font-weight: 500;
            font-size: 150%;
        }
    }
    
    .dp-panel-text, .dp-panel-keyboard {

        width: 244px !important;
        height: auto !important;
        border-radius: 4px !important;     

        //Remove label with the month selected inside calendar table
        .mat-calendar-body-label:not(:last-of-type) {
            visibility: hidden;
        }
        .mat-calendar-body-label:last-of-type {
            display: none;
        }

        //Changes style to calendar cell selected 
        .mat-calendar-body-selected {
            background-color: $rustyRed !important;
            color: white !important;
            font-weight: 300;
        }
    }

    .dp-panel-horizontal {

        display: flex !important;
        flex-direction: row !important;
        width: 465px!important;  
        height: auto !important;

        //Remove label with the month selected inside calendar table
        .mat-calendar-body-label:not(:last-of-type) {
            visibility: hidden;
        }
        .mat-calendar-body-label:last-of-type {
            display: none;
        }

        .mat-calendar-content {
            width: 100% !important;
            margin-top: 52px;
            padding: 18px;
        }

        //Changes style to calendar cell selected 
        .mat-calendar-body-selected {
            background-color: $rustyRed !important;
            color: white !important;
            font-weight: 300;
        }
    }
    
}