@import url('variables.css?v=0.05');

/* shadows */
.h-bottom-shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* background colors */
.h-bg-dark {
    background-color: #343a40;
}

.h-bg-red {
    background-color: #f30707 !important;
}

.h-bg-transparent {
    background-color: transparent;
}

/* text colors */
.h-txt-red {
    color: #f30707;
}

.h-txt-dark {
    color: var(--h-text-sub-color);
}

.h-txt-base {
    color: var(--h-text-color);
}

.h-txt-sub-base {
    color: var(--h-text-sub-color);
}

.h-tc-red500 {
    color: #b10012;
}

.h-tc-green500 {
    color: #178f1d;
}

.h-tc-blue500 {
    color: #0044a9;
}

/* font sizes */
.h-fs-12 {
    font-size: 12px;
}

.h-fs-11 {
    font-size: 11px;
}

/* border */
.h-border {
    border: 1px solid #363636;
}

.h-border-bottom {
    border-bottom: 1px solid #363636;
}

.h-border-top {
    border-top: 1px solid #363636;
}

.h-border-left {
    border-left: 1px solid #363636;
}

.h-border-right {
    border-right: 1px solid #363636;
}

.h-border-y {
    border-top: 1px solid #363636;
    border-bottom: 1px solid #363636;
}

.h-border-x {
    border-left: 1px solid #363636 !important;
    border-right: 1px solid #363636 !important;
}

.h-border-light {
    border: 1px solid #000;
}

/* row customizations */
.h-non-responsive-row {
    min-width: 1400px;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.h-non-responsive-row::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.h-non-responsive-row::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.h-non-responsive-row::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.h-non-responsive-row::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* color schemes gradients */

.h-base-background {
    background: linear-gradient(45deg, var(--h-background-color), var(--h-background-color-end));
    background-blend-mode: overlay;
}

.h-base-form-background {
    background: linear-gradient(45deg, var(--h-surface-color), var(--h-surface-color), var(--h-surface-color-end), var(--h-surface-color-end));
}

.h-animated-background-gradient {
    background-image: linear-gradient(45deg, var(--h-navbar-color) 0%, var(--h-navbar-color-end) 51%, var(--h-navbar-color) 100%)
}

.h-base-table-cell-background {
    background: linear-gradient(45deg, var(--h-surface-color), var(--h-surface-color), var(--h-surface-color-end), var(--h-surface-color-end));
}


.h-base-table-cell-animated-background {
    background-image: linear-gradient(45deg, var(--h-surface-color) 0%, var(--h-surface-color-end) 51%, var(--h-surface-color) 100%)
}

.h-base-table-cell-animated-background {
    transition: 0.5s;
    background-size: 200% auto;
}

.h-base-table-cell-animated-background:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.h-white-gradient-bg {
    background: var(--h-small-card-background-color) !important;
}