body {
    background: var(--background);
    /* font-size: var(--font-size); */
    color: var(--font-color);
    line-height: var(--line-height);
}
body.dark {
    background: var(--dark_background);
    /* font-size: var(--dark_font-size); */
    color: var(--dark_font-color);
}


.positionRelative{
    position: relative !important;
}

.txt-center{
    text-align: center !important;
}
.txt-right{
    text-align: right !important;
}
.txt-left{
    text-align: left !important;
}

.txt-blue {
    color: var(--blue-default);
}
.valid,
.txt-green {
    color: var(--green-default);
}
.warning,
.txt-orange {
    color: var(--orange-default);
}
.info,
.txt-deepPurple,
.txt-info {
    color: var(--deeppurple-default);
}
.error,
.txt-red,
.txt-delete {
    color: var(--red-default);
}

.txt-444 {
    color: #444444;
}
.txt-333 {
    color: #333333;
}

.cursor-pointer {
    cursor: pointer;
}

.hidden {
    display: none;
}

.rotate-90 {
    transform: rotate(90deg);
}
.rotate-180 {
    transform: rotate(180deg);
}
.rotate-270 {
    transform: rotate(270deg);
}

.height-100 {
    min-height: 100vh;
}
.height-50 {
    min-height: 50vh;
}

@media (min-width: 576px) {
    .sm\:height-100 {
        min-height: 100vh;
    }
    .sm\:height-50 {
        min-height: 50vh;
    }
}

@media (min-width: 992px) {
    .md\:height-100 {
        min-height: 100vh;
    }
    .md\:height-50 {
        min-height: 50vh;
    }
}

@media (min-width: 1400px) {
    .lg\:height-100 {
        min-height: 100vh;
    }
    .lg\:height-50 {
        min-height: 50vh;
    }
}

/* center block with != size */
.block-tiny,
.block-small,
.block-medium,
.block-large,
.block-huge,
.block-tall,
.block-full,
.block-white
{
    width: 100%;
    margin: 10px auto 30px auto;
    /* position: relative; */
}

.block-tiny {
    max-width: 310px;
}
.block-small {
    max-width: 620px;
}
.block-medium {
    max-width: 930px;
}
.block-large {
    max-width: 1240px;
}
.block-huge {
    max-width: 1550px;
}
.block-tall {
    max-width: 1980px;
}

/* white block */
.block-white {
    background: var(--background-block);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .25);
    border-radius: 2px;
    padding: 15px;
}
body.dark .block-white {
    background: var(--dark-background-block);
}


.bck-blue-300       {color: #eeeeee !important;background-color: var(--blue-300);}
.bck-blue-500       {color: #eeeeee !important;background-color: var(--blue-500);}
.bck-blue-700       {color: #eeeeee !important;background-color: var(--blue-700);}
.bck-green-300      {color: #eeeeee !important;background-color: var(--green-300);}
.bck-green-500      {color: #eeeeee !important;background-color: var(--green-500);}
.bck-green-700      {color: #eeeeee !important;background-color: var(--green-700);}
.bck-orange-300     {color: #111111 !important;background-color: var(--orange-300);}
.bck-orange-500     {color: #eeeeee !important;background-color: var(--orange-500);}
.bck-orange-700     {color: #eeeeee !important;background-color: var(--orange-700);}
.bck-red-300        {color: #eeeeee !important;background-color: var(--red-300);}
.bck-red-500        {color: #eeeeee !important;background-color: var(--red-500);}
.bck-red-700        {color: #eeeeee !important;background-color: var(--red-700);}
.bck-deeppurple-300 {color: #eeeeee !important;background-color: var(--deeppurple-300);}
.bck-deeppurple-500 {color: #eeeeee !important;background-color: var(--deeppurple-500);}
.bck-deeppurple-700 {color: #eeeeee !important;background-color: var(--deeppurple-700);}


.block-margin {
    margin: 10px auto 30px auto;
}
.block-margin-0 {
    margin: 0 auto;
}

.block-spacing {
    padding: 5px 15px 15px 15px;
}

.block-legend {
    margin-top: 60px;
    position: relative;
}

.block-legend > legend {
    padding: 0 15px 0 10px;
    font-weight: 500;
    color: rgba(0, 0, 0, .5);
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
}
body.dark .block-legend > legend {
    color: rgba(255, 255, 255, .5);
}

.block-legend > legend .btn-ico {
    float: right;
}


.p0 {padding: 0;}
.pl0 {padding-left: 0;}
.pr0 {padding-right: 0;}
.pb0 {padding-bottom: 0;}
.pt0 {padding-top: 0;}

.p0-3 {padding: 0.3rem;}
.p0-5 {padding: 0.5rem;}
.p1 {padding: 1rem;}
.pl1 {padding-left: 1rem;}
.pr1 {padding-right: 1rem;}
.pb1 {padding-bottom: 1rem;}
.pt1 {padding-top: 1rem;}


.m0 {margin: 0;}
.ml0 {margin-left: 0;}
.mr0 {margin-right: 0;}
.mb0 {margin-bottom: 0;}
.mt0 {margin-top: 0;}

.m1 {margin: 1rem;}
.ml1 {margin-left: 1rem;}
.mr1 {margin-right: 1rem;}
.mb1 {margin-bottom: 1rem;}
.mt1 {margin-top: 1rem;}

.m2 {margin: 2rem;}
.ml2 {margin-left: 2rem;}
.mr2 {margin-right: 2rem;}
.mb2 {margin-bottom: 2rem;}
.mt2 {margin-top: 2rem;}