:root {
    --bdrs: 8px;

    --primary-color: #0a5caa;
    --light-color: #3a8bea;
    --dark-color: #063a7a;

    --bg-color: #F5F7FA;
    --focus-color: #BD2F2A;
    --active-color: #FF9700;
}

.w-full {width: 100%;}
.h-full {height: 100%;}

.p-0 {padding: 0;}
.p-10 {padding: 10px;}
.p-20 {padding: 20px;}
.p-30 {padding: 30px;}
.pt-30 {padding-top: 30px;}
.px-15 {padding-left: 15px;padding-right: 15px;}
.m-0 {margin: 0;}
.m-10 {margin: 10px;}
.mt-10 {margin-top: 10px;}
.mx-20 {margin-left: 20px;margin-right: 20px;}
.mt-30 {margin-top: 30px;}
.mt-50 {margin-top: 50px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-50 {margin-left: 50px;}
.mr-15 {margin-right: 15px;}
.mx-15 {margin-left: 15px;margin-right: 15px;}


.flex {display: flex;}
.justify-items-center {justify-items: center;}
.items-center {align-items: center;}

.rounded {border-radius: var(--bdrs);}

.flex-equal-width {
    flex: 1 1 0;
    min-width: 0;
}
.overflow-hidden {overflow: hidden;}
.overflow-hidden_it {overflow: hidden!important;}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    backdrop-filter: blur(3px);
    box-shadow:
            -1px -1px 1px rgba(255, 255, 255, 0.8),
            -2px -2px 8px rgba(255, 255, 255, 0.6),
            1px 1px 2px rgba(45, 91, 207, 0.05),
            3px 3px 5px rgba(45, 91, 207, 0.03);
    border-radius: var(--bdrs);
}
.animated-underline {
    background-image: linear-gradient(to right, var(--light-color), var(--dark-color));
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size .8s;
}
.animated-underline:hover {
    background-position: left bottom;
    background-size: 100% 2px;
}