:root {
    --command-box-border-color: #0000002b;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Tahoma;
    /*font-size: 12px;*/
}

    *, *:before, *:after, *::before, *::after {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

html {
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}
/***********************************************************/
.required {
    border-left-color: red;
    border-left-width: 2px;
}

.valid {
    border-left-color: green;
    border-left-width: 2px;
}

.invalid {
    border-left-color: red;
    border-left-width: 2px;
    animation: required-blink 1s infinite;
}

@keyframes required-blink {
    50% {
        border-left-color: rgb(234, 187, 187);
    }
}
/***********************************************************/
.modal-header, .modal-footer {
    padding-top: 10px;
    padding-bottom: 10px;
}

.btn-close {
    font-size: 10px;
}
/***********************************************************/
.pointer {
    cursor: pointer;
}
/***********************************************************/
i.finger-up-point-20px {
    background: url('/images/icons/natural_user_interface_2.svg');
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 20px;
    width: 20px;
}

.settings-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/settings.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.add-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/plus.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.accept-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/tick.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.edit-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/edit.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.ban-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/ban.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.trash-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/trash.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.scrollup-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/scroll_up.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.female-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/female.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.male-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/male.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.unknown-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/question_mark.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.alive-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/alive.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.dead-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/dead.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.phenotype-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/phenotype.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.details-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/view_details.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.comment-24px {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/GradientLine/comment.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.circle-filled-ok-green {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/circle-filled-ok-green.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.circle-filled-cancel-red {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/circle-filled-cancel-red.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

.circle-filled-asterisk-gray {
    content: '';
    display: inline-flex;
    position: relative;
    background: url('/images/icons/circle-filled-asterisk-gray.svg') no-repeat 0px 0px;
    background-size: 24px !important;
    height: 24px;
    width: 24px;
}

/***********************************************************/
.w24px {
    width: 24px;
}

.h24px {
    height: 24px;
}
/***********************************************************/
.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}

.plr-0 {
    padding-left: 0;
    padding-right: 0;
}

.h-50 {
    height: 50% !important;
}

.w-50 {
    width: 50% !important;
}
/***********************************************************/
.card-header h4 {
    margin-bottom: 0;
}

.card-header {
    background-color: #d3d3d3;
}

.card-body {
    background-color: #e3e3e3;
    padding: 8px;
}

    .card-body > div.border {
        border: var(--bs-border-width) var(--bs-border-style) #b4b4b4 !important;
    }

.k-grid {
    border: var(--bs-border-width) var(--bs-border-style) #b4b4b4 !important;
}

.border {
    border-color: #aeaeae !important;
}

.command-box-one-row {
    padding: 5px;
    height: 45px;
    border: solid var(--command-box-border-color);
    border-width: 1px 1px 0px 1px;
}

.search-box {
    padding: 5px;
    border: solid var(--command-box-border-color);
    border-width: 1px 1px 0px 1px;
}