:root {
    --orange: #ffb800;
    --blue: #00bcd4;
    --green: #33d69f;
    --yellow: #ffd700;
    --red: #ff4c61;
    --pink: #ffc0cb;
    --purple: #6f52ed;
    --brown: #d2b48c;
    --light-purple: #e6e6fa;
    --light-green: #f0fff0;
    --light-red: #fff5ee;
    --light-blue: #E6FFFF;
    --light-yellow: #ffffe0;

    --blue-hover: #14d0e8;
    --green-hover: #47eab3;
    --purple-hover: #8366ff;
    --red-hover: #FF7489;

    --dark: #373a3c;
    --dark-hover: #4B4E50;
}

[x-cloak] { 
    display: none !important; 
}

a:is(:hover, :active, :focus) {
  color: var(--blue);
}

.alert-warning {
    background-color: var(--orange);
    color: var(--dark);
}

.bg-primary {
    background-color: var(--blue) !important;
}

.bg-success {
    background-color: var(--green) !important;
}

.bg-warning {
    background-color: var(--orange) !important;
}

.big-button {
    height: 85px;
    line-height: 20px;
}

.btn.btn-purple {
    color: white;
    background-color: var(--purple);
    border-color: var(--purple);
}

.btn.btn-purple:is(:hover, :active, :focus) {
    color: white;
    background-color: var(--purple-hover);
    border-color: var(--purple-hover);
}

.btn-danger {
    background-color: var(--red);
    border-color: var(--red);
}

.btn-danger:is(:hover, :active, :focus) {
  background-color: var(--red-hover);
  border-color: var(--red-hover);
}

.btn-primary {
    /* background: url("../../images/bg2.png"); */
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-primary:is(:hover, :active, :focus) {
    /* background: url("../../images/bg2.png"); */
    background-color: var(--blue-hover);
    border-color: var(--blue-hover);
}

.btn-secondary {
  background-color: var(--dark);
    border-color: var(--dark);
}

.btn-secondary:is(:hover, :active, :focus) {
  background-color: var(--dark-hover);
    border-color: var(--dark-hover);
}

.btn-success {
    background-color: var(--green);
    border-color: var(--green);
}

.btn-success:is(:hover, :active, :focus) {
    background-color: var(--green-hover);
    border-color: var(--green-hover);
}

.btn-warning {
    background-color: var(--orange);
    border-color: var(--orange);
}

.form-check-input:checked {
    background-color: var(--blue);
    border-color: var(--blue);
}

.hide {
    visibility: hidden;
}

tr:hover .hide {
    visibility: visible;
}

.hover2:hover {
    display: block;
}

.nav-link {
    color: var(--blue);
}

.nav-link:is(:focus, :hover){
    color: var(--blue-hover);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--blue);
}

.page-item.active .page-link {
    background-color: var(--blue);
    border-color: var(--blue);
}

.page-link,
.page-link:is(:hover, :active, :focus) {
    color: var(--blue);
}

.progress-bar {
    background-color: var(--blue);
}

.section-heading {
    background: url("../../images/bg2.png");
    color: white;
    padding: 20px;
    margin-top: 20px;
}

.text-primary {
    color: var(--blue) !important;
}

.text-warning {
    color: var(--orange) !important;
}

a {
    color: #373a3c;
    text-decoration: none;
}

input[required],
select[required],
textarea[required] {
    background-color: var(--light-blue);
}