/* second, div before label */
.date-before-label {
    padding-top: 15px;
}

/* third, div after the label */
.container-dates {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: left!important;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

/* day, month and year */
.date-splitter-day,
.date-splitter-month,
.date-splitter-year {
    margin:0 5px;
    width: 100% !important;
}
div.ts-wrapper:not(.form-control,.form-select) {
    padding-bottom: 10px;
}
p.error-message{
    background-color: transparent !important;
}

/*=========================================
|       MEDIA QUERIES LARGE DEVICES       |
=========================================*/

@media (min-width: 768px) {
    /* day, month and year */
    .date-splitter-day,
    .date-splitter-month,
    .date-splitter-year {
        margin:0 5px;
        /*border: 1px solid red; delete after validation */
    }
    .container-dates>div {
        min-width: 160px;
        max-width: 100%;
        padding: 0 5px;
    }
}

@media (min-width: 992px) {
    .date-before-label {
        width: 484px;
    }
}

@media (min-width: 456px) {
    .container-dates {
        flex-wrap: nowrap;
    }
}