@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-countdown {
    @include d-flex();
    @include justify-content-center();
    width: 100%;
    margin: 0;

    &.dnetor-countdown-list {
        .dnetor-item {
            @include d-flex();
            @include align-items-center();
        }
        .dnetor-countdown-text {
            margin-bottom: 0;
            margin-left: 5px;
        }
        .dnetor-countdown-title,
        .dnetor-countdown-text {
            margin-top: 0;
        }
    }

    .dnetor-countdown-item {
        padding: 0 25px;
    }

    .dnetor-countdown-title {
        font-size: 34px;
        margin-bottom: 0;
        color: $primary_color;
    }

    .dnetor-countdown-text {
        font-size: 16px;
        color: $primary_color;
    }
}

.dnetor-countdown-show-separate {
    @include align-items-center();
    .dnetor-countdown-separate {
        font-size: 24px;
        color: $primary_color;
        line-height: 1;
    }
}

.dnetor-countdown-grid {
    .dnetor-countdown-separate {
        margin-top: 3%;
    }
}

.dnetor-countdown-expire-message {
    display: none;
    text-align: center;
    font-size: 24px;
    color: red;
    margin-top: 15px;
}

@media (max-width: 767px) {
    .dnetor-countdown {
        &.dnetor-countdown-list {
            .dnetor-item {
                display: block;
            }
        }
    }
}

@media (max-width: 576px) {
    .dnetor-countdown {
        display: block;

        .dnetor-countdown-separate {
            display: none;
        }
        .dnetor-countdown-item {
            float: left;
            width: 25%;
            margin-bottom: 20px;
        }
    }
}