.m-1 {margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;}
.m-2 {margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;}
.m-3 {margin-top: 15px; margin-right: 15px; margin-bottom: 15px; margin-left: 15px;}
.m-4 {margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px;}
.m-5 {margin-top: 25px; margin-right: 25px; margin-bottom: 25px; margin-left: 25px;}

.mt-1 {margin-top: 5px;}
.mt-2 {margin-top: 10px;}
.mt-3 {margin-top: 15px;}
.mt-4 {margin-top: 20px;}
.mt-5 {margin-top: 25px;}

.mb-1 {margin-bottom: 5px;}
.mb-2 {margin-bottom: 10px;}
.mb-3 {margin-bottom: 15px;}
.mb-4 {margin-bottom: 20px;}
.mb-5 {margin-bottom: 25px;}

.ms-1 {margin-left: 5px;}
.ms-2 {margin-left: 10px;}
.ms-3 {margin-left: 15px;}
.ms-4 {margin-left: 20px;}
.ms-5 {margin-left: 25px;}

.me-1 {margin-right: 5px;}
.me-2 {margin-right: 10px;}
.me-3 {margin-right: 15px;}
.me-4 {margin-right: 20px;}
.me-5 {margin-right: 25px;}

.mx-1 {margin-left: 5px; margin-right: 5px;}
.mx-2 {margin-left: 10px; margin-right: 10px;}
.mx-3 {margin-left: 15px; margin-right: 15px;}
.mx-4 {margin-left: 20px; margin-right: 20px;}
.mx-5 {margin-left: 25px; margin-right: 25px;}

.my-1 {margin-top: 5px; margin-bottom: 5px;}
.my-2 {margin-top: 10px; margin-bottom: 10px;}
.my-3 {margin-top: 15px; margin-bottom: 15px;}
.my-4 {margin-top: 20px; margin-bottom: 20px;}
.my-5 {margin-top: 25px; margin-bottom: 25px;}

.p-1 {padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;}
.p-2 {padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;}
.p-3 {padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px;}
.p-4 {padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;}
.p-5 {padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;}

.pt-1 {padding-top: 5px;}
.pt-2 {padding-top: 10px;}
.pt-3 {padding-top: 15px;}
.pt-4 {padding-top: 20px;}
.pt-5 {padding-top: 25px;}

.pb-1 {padding-bottom: 5px;}
.pb-2 {padding-bottom: 10px;}
.pb-3 {padding-bottom: 15px;}
.pb-4 {padding-bottom: 20px;}
.pb-5 {padding-bottom: 25px;}

.ps-1 {padding-left: 5px;}
.ps-2 {padding-left: 10px;}
.ps-3 {padding-left: 15px;}
.ps-4 {padding-left: 20px;}
.ps-5 {padding-left: 25px;}

.pe-1 {padding-right: 5px;}
.pe-2 {padding-right: 10px;}
.pe-3 {padding-right: 15px;}
.pe-4 {padding-right: 20px;}
.pe-5 {padding-right: 25px;}

.px-1 {padding-right: 5px; padding-left: 5px;}
.px-2 {padding-right: 10px; padding-left: 10px;}
.px-3 {padding-right: 15px; padding-left: 15px;}
.px-4 {padding-right: 20px; padding-left: 20px;}
.px-5 {padding-right: 25px; padding-left: 25px;}

.py-1 {padding-top: 5px; padding-bottom: 5px;}
.py-2 {padding-top: 10px; padding-bottom: 10px;}
.py-3 {padding-top: 15px; padding-bottom: 15px;}
.py-4 {padding-top: 20px; padding-bottom: 20px;}
.py-5 {padding-top: 25px; padding-bottom: 25px;}

.pointer {cursor: pointer;}

H1 {font-size: 22px;}
H2 {font-size: 20px;}
H3 {font-size: 18px;}
H4 {font-size: 16px;}
H5 {font-size: 14px;}
H6 {font-size: 12px;}

.input {
    border-style: solid;
    border-radius: 5px;
    border-width: 2px;
    border-color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
}

.input:disabled {
    background-color: #dddddd;
}

.input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.input-sm {
    display: block;
    width: 100%;
    height: 28px;
    font-size: 14px;
    box-sizing: border-box;
}

.input-md {
    display: block;
    width: 100%;
    height: 32px;
    font-size: 16px;
    box-sizing: border-box;
}

.block {display: block;}

.text-start {text-align: start;}
.text-center {text-align: center;}
.text-end {text-align: end;}

.btn {
    box-sizing: border-box;
    border-style: solid;
    border-radius: 5px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-top-width: 2px;
    border-bottom-width: 2px;
    cursor: pointer;
}

.btn-sm {
    height: 28px;
    font-size: 16px;
    box-sizing: border-box;
}

.btn-md {
    height: 32px;
    font-size: 16px;
    box-sizing: border-box;
}

.btn-lg {
    height: 36px;
    font-size: 16px;
    box-sizing: border-box;
}

.btn-xl {
    height: 40px;
    font-size: 18px;
    box-sizing: border-box;
}

.btn-group BUTTON {
    margin-left: 0px;
    margin-right: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-left-width: 0px;
}

.btn-group BUTTON:first-of-type {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left-width: 2px;
}

.btn-group BUTTON:last-of-type {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

BUTTON.btn-100 {min-width: 100px;}
BUTTON.btn-110 {min-width: 110px;}
BUTTON.btn-120 {min-width: 120px;}
BUTTON.btn-130 {min-width: 130px;}
BUTTON.btn-140 {min-width: 140px;}
BUTTON.btn-150 {min-width: 150px;}
BUTTON.btn-175 {min-width: 175px;}
BUTTON.btn-200 {min-width: 200px;}
BUTTON.btn-225 {min-width: 225px;}
BUTTON.btn-250 {min-width: 250px;}
BUTTON.btn-275 {min-width: 275px;}
BUTTON.btn-300 {min-width: 300px;}

.btn-primary {color: var(--color-light-light); background-color: var(--color-primary-dark);}
.btn-primary:hover {color: var(--color-light-light); background-color: var(--color-primary);}
.btn-primary:disabled {color: var(--color-light); background-color: var(--color-primary-light);}

.btn-secondary {color: var(--color-light-light); background-color: var(--color-secondary-dark);}
.btn-secondary:hover {color: var(--color-light-light); background-color: var(--color-secondary);}
.btn-secondary:disabled {color: var(--color-light); background-color: var(--color-secondary-light);}

.btn-success {color: var(--color-light-light); background-color: var(--color-success-dark);}
.btn-success:hover {color: var(--color-light-light); background-color: var(--color-success);}
.btn-success:disabled {color: var(--color-light); background-color: var(--color-success-light);}

.btn-danger {color: var(--color-light-light); background-color: var(--color-danger-dark);}
.btn-danger:hover {color: var(--color-light-light); background-color: var(--color-danger);}
.btn-danger:disabled {color: var(--color-light); background-color: var(--color-danger-light);}

.btn-warning {color: var(--color-light-light); background-color: var(--color-warning-dark);}
.btn-warning:hover {color: var(--color-light-light); background-color: var(--color-warning);}
.btn-warning:disabled {color: var(--color-light); background-color: var(--color-warning-light);}

.btn-info {color: var(--color-light-light); background-color: var(--color-info-dark);}
.btn-info:hover {color: var(--color-light-light); background-color: var(--color-info);}
.btn-info:disabled {color: var(--color-light); background-color: var(--color-info-light);}

.btn-light {color: var(--color-dark-dark); background-color: var(--color-light-dark);}
.btn-light:hover {color: var(--color-dark-dark); background-color: var(--color-light);}
.btn-light:disabled {color: var(--color-dark); background-color: var(--color-light-light);}

.btn-dark {color: var(--color-light-light); background-color: var(--color-dark-dark);}
.btn-dark:hover {color: var(--color-light-light); background-color: var(--color-dark);}
.btn-dark:disabled {color: var(--color-light); background-color: var(--color-dark-light);}

.bg-color-blue {
    background: linear-gradient(0.15turn, #3f87a6, #4c80f0);
    border-color: #3f87a6;
}

BUTTON.bg-color-blue {
    color: #ffffff;
}

.bg-primary {background-color: var(--color-primary-dark); color: var(--color-light-light);}
.bg-secondary {background-color: var(--color-secondary-dark); color: var(--color-light-light);}
.bg-success {background-color: var(--color-success-dark); color: var(--color-light-light);}
.bg-info {background-color: var(--color-info-dark); color: var(--color-light-light);}
.bg-warning {background-color: var(--color-warning-dark); color: var(--color-light-light);}
.bg-danger {background-color: var(--color-danger-dark); color: var(--color-light-light);}

.bg-primary-light {background-color: var(--color-primary-fade); color: #000000;}
.bg-secondary-light {background-color: var(--color-secondary-fade); color: #000000;}
.bg-success-light {background-color: var(--color-success-fade); color: #000000;}
.bg-info-light {background-color: var(--color-info-fade); color: #000000;}
.bg-warning-light {background-color: var(--color-warning-fade); color: #000000;}
.bg-danger-light {background-color: var(--color-danger-fade); color: #000000;}

.bg-primary-hover:hover {background-color: var(--color-primary-dark); color: var(--color-light-light);}
.bg-secondary-hover:hover {background-color: var(--color-secondary-dark); color: var(--color-light-light);}
.bg-success-hover:hover {background-color: var(--color-success-dark); color: var(--color-light-light);}
.bg-info-hover:hover {background-color: var(--color-info-dark); color: var(--color-light-light);}
.bg-warning-hover:hover {background-color: var(--color-warning-dark); color: var(--color-light-light);}
.bg-danger-hover:hover {background-color: var(--color-danger-dark); color: var(--color-light-light);}

.bg-primary-light-hover:hover {background-color: var(--color-primary-light); color: var(--color-dark-dark);}
.bg-secondary-light-hover:hover {background-color: var(--color-secondary-light); color: var(--color-dark-dark);}
.bg-success-light-hover:hover {background-color: var(--color-success-light); color: var(--color-dark-dark);}
.bg-info-light-hover:hover {background-color: var(--color-info-light); color: var(--color-dark-dark);}
.bg-warning-light-hover:hover {background-color: var(--color-warning-light); color: var(--color-dark-dark);}
.bg-danger-light-hover:hover {background-color: var(--color-danger-light); color: var(--color-dark-dark);}

.badge-primary {display: inline; color: #ffffff; background-color: var(--color-primary-dark); padding: 3px; border-radius: 3px;}
.badge-secondary {display: inline; color: #ffffff; background-color: var(--color-secondary-dark); padding: 3px; border-radius: 3px;}
.badge-success {display: inline; color: #ffffff; background-color: var(--color-success-dark); padding: 3px; border-radius: 3px;}
.badge-info {display: inline; color: #ffffff; background-color: var(--color-info-dark); padding: 3px; border-radius: 3px;}
.badge-warning {display: inline; color: #ffffff; background-color: var(--color-warning-dark); padding: 3px; border-radius: 3px;}
.badge-danger {display: inline; color: #ffffff; background-color: var(--color-danger-dark); padding: 3px; border-radius: 3px;}

.bubble-primary {color: #ffffff; background-color: var(--color-primary-dark); padding: 5px 8px; border-radius: 5px;}
.bubble-secondary {color: #ffffff; background-color: var(--color-secondary-dark); padding: 5px 8px; border-radius: 5px;}
.bubble-success {color: #ffffff; background-color: var(--color-success-dark); padding: 5px 8px; border-radius: 5px;}
.bubble-info {color: #ffffff; background-color: var(--color-info-dark); padding: 5px 8px; border-radius: 5px;}
.bubble-warning {color: #ffffff; background-color: var(--color-warning-dark); padding: 5px 8px; border-radius: 5px;}
.bubble-danger {color: #ffffff; background-color: var(--color-danger-dark); padding: 5px 8px; border-radius: 5px;}

.text-secondary-light {color: var(--color-secondary-light);}
.text-primary-light {color: var(--color-primary-light);}
.text-success-light {color: var(--color-success-light);}
.text-info-light {color: var(--color-info-light);}
.text-warning-light {color: var(--color-warning-light);}
.text-danger-light {color: var(--color-danger-light);}
.text-light-light {color: var(--color-light-light);}
.text-dark-light {color: var(--color-dark-light);}

.text-secondary {color: var(--color-secondary);}
.text-primary {color: var(--color-primary);}
.text-success {color: var(--color-success);}
.text-info {color: var(--color-info);}
.text-warning {color: var(--color-warning);}
.text-danger {color: var(--color-danger);}
.text-light {color: var(--color-light);}
.text-dark {color: var(--color-dark);}

.text-secondary-hover:hover {color: var(--color-secondary);}
.text-primary-hover:hover {color: var(--color-primary);}
.text-success-hover:hover {color: var(--color-success);}
.text-info-hover:hover {color: var(--color-info);}
.text-warning-hover:hover {color: var(--color-warning);}
.text-danger-hover:hover {color: var(--color-danger);}
.text-light-hover:hover {color: var(--color-light);}
.text-dark-hover:hover {color: var(--color-dark);}

.text-primary-dark {color: var(--color-primary-dark);}
.text-secondary-dark {color: var(--color-secondary-dark);}
.text-success-dark {color: var(--color-success-dark);}
.text-info-dark {color: var(--color-info-dark);}
.text-warning-dark {color: var(--color-warning-dark);}
.text-danger-dark {color: var(--color-danger-dark);}
.text-light-dark {color: var(--color-light-dark);}
.text-dark-dark {color: var(--color-dark-dark);}

TABLE.table-wide, TABLE.table-wide-alt {
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

TABLE.table-wide > THEAD > TR > TH {
    text-align: left;
    font-weight: bold;
    padding-left: 5px;
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.5);
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-top-width: 0px;
    font-size: 12px;
    font-family: "Lato",sans-serif;
}

TABLE.table-wide > TBODY > TR > TD {
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.5);
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-top-width: 0px;
    padding-left: 5px;
    font-size: 12px;
    font-family: "Lato",sans-serif;
    height: 26px;
}

THEAD.thead-wide > TR > TH {
    text-align: left;
    font-weight: bold;
    padding-left: 5px;
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.5);
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-top-width: 0px;
    font-size: 12px;
    font-family: "Lato",sans-serif;
}

TBODY.tbody-wide > TR > TD {
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.5);
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-top-width: 0px;
    padding-left: 5px;
    font-size: 12px;
    font-family: "Lato",sans-serif;
    height: 26px;
}

TABLE.table-auto {
    border-collapse: collapse;
    border-spacing: 0;
}

TABLE.table-auto > THEAD > TR > TH {
    text-align: left;
    font-weight: bold;
    padding-left: 5px;
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.5);
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-top-width: 0px;
    font-size: 12px;
    font-family: "Lato",sans-serif;
}

TABLE.table-auto > TBODY > TR > TD {
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.5);
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-top-width: 0px;
    padding-left: 5px;
    font-size: 12px;
    font-family: "Lato",sans-serif;
}

TABLE.table-auto-large {
    border-collapse: collapse;
    border-spacing: 0;
}

TABLE.table-auto-large > THEAD > TR > TH {
    text-align: left;
    font-weight: bold;
    padding-left: 10px;
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.5);
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-top-width: 0px;
    font-size: 18px;
    font-family: "Lato",sans-serif;
}

TABLE.table-auto-large > TBODY > TR > TD {
    border-style: solid;
    border-color: rgba(128, 128, 128, 0.5);
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-top-width: 0px;
    padding-left: 10px;
    font-size: 18px;
    font-family: "Lato",sans-serif;
}

[hidden] {display: none !important;}

.card {
    display: inline-flex;
}

.border-success {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-success-dark);
}

.rounded {
    border-radius: 7px;
}

.float-end {float: right;}
.float-start {float: left;}

.space-between {
    display: flex;
    justify-content: space-between;
}

.space-around {
    display: flex;
    justify-content: space-around;
}

.space-evenly {
    display: flex;
    justify-content: space-evenly;
}

.flex-wrap {
    flex-wrap: wrap;
}