﻿:root {
    --dominos-blue: #00537A;
    --dominos-blue-lightest: #F0F7FA;
    --dominos-blue-light: #C9E2EE;
    --dominos-red: #E31837;
    --dominos-grey: #99A1A6;
    --dominos-grey-dark: #43525A;
    --dominos-grey-border: #E2E2E2;
    --d: 0p !important;
    --modal-from:55vh;
}

::-webkit-scrollbar {
    display: none;
}

.dominos-card {
    box-shadow: 0px 0px 10px 0px #3F5D8A1A;
    background: #FFFFFF;
    border-radius: 6px;
}

.active-category {
    border-bottom: 1px solid var(--dominos-red);
}

.dominos-elepsis {
    display: block;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
}

/* FIX OF UGLY SELECT */
.dominos-select {
    background: url("/img/dominos/arrow_down.svg") no-repeat;
    background-position: calc(100% - 0.3rem) center !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 2rem !important;
}

.modal-opening-dominos {
    animation-duration: 0.5s;
    animation-name: modal-opening-dominos;
}

.modal-closing-dominos {
    animation-duration: 1s;
    animation-name: modal-closing-dominos-anim !important;
}

.button-close {
    animation-duration: 0.6s;
    animation-name: button-close-dominos;
}

.button-open {
    animation-duration: 0.6s;
    animation-name: button-open-dominos;
}

.dominos-label {
    width: fit-content;
    position: relative;
    font-weight: 400;
    text-align: start;
    color: black;
    line-height: 20px;
    font-family: Ubuntu;
}
@keyframes modal-opening-dominos {
    from {
        height: 0vh;
    }

    to {
        height: 80vh;
    }
}

@keyframes modal-closing-dominos-anim {
    from {
        transform: translateY(--modal-from);
    }

    to {
        transform: translateY(1300px);
    }
}

@keyframes button-close-dominos {
    from {
        bottom: 0;
    }

    to {
        bottom: -70px;
    }
}

@keyframes button-open-dominos {
    from {
        bottom: -70px;
    }

    to {
        bottom: 0px;
    }
}
