:root
{
    --text-color: #111;
    --primary-color: #8d58f3;
    --primary-color-darkened: #7b4bd2;
    --secondary-color: #6f45c0;
    --secondary-color-darkened: #5c3a9f;
    --tertiary-color: #454dc0;
    --standard-border: 2px solid rgba(69, 77, 192, 0.5);
    --dashed-border: 2px dashed rgba(69, 77, 192, 0.5);
    --danger-color: #ce5656;
    --danger-color-darkened: #a34343;
    --success-color: #56ce6e;
    --success-color-darkened: #43a365;
    --warning-color: #DAA520;
    --warning-color-darkened: #bfc953;
}


body
{
    background-color: #F2F2F2;
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
    color: var(--text-color) !important;
}

.main
{
    min-height: 85vh;
    padding-bottom: 30px;
}

.navbar
{
    /* background: linear-gradient(rgba(255, 255, 255, 0.77), rgba(255, 255, 255, 0.77)), url(../media/pattern.png); */
    /* background-color: rgba(86, 188, 206, 0.75);
    background-size: 15%;
    border-bottom: 2px solid #4394a3; */
    border-bottom: 2px solid var(--secondary-color);
    background-color: var(--primary-color);
    background-size: 15%;
}
/* .navbar-rope-divider
{
    background-image: url(../media/rope.png);
    height: 15px;
    width: 100%;
    background-size: 5% 99%;
    margin-top: -1px;
    position: relative;
    z-index: 2;
} */

.nav-link
{
    /* color: var(--text-color) !important; */
    color: #f2f2f2;
}
.nav-link:focus, .nav-link:hover
{
    color: #d3cece;
}

.card
{
    border: var(--standard-border);
    background-color: rgba(86, 188, 206, 0.05);
}

.btn
{
    font-weight: 700;
    border-width: 2px;
}

.btn-primary
{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color-darkened) !important;
}
.btn-primary:hover
{
    background-color: var(--primary-color-darkened) !important;
    border-color: var(--primary-color-darkened) !important;
}
.btn-primary:focus
{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color-darkened) !important;
    box-shadow: 0 0 0 .25rem rgba(141, 88, 243,.5);
}
.btn-primary:active
{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color-darkened) !important;
    box-shadow: 0 0 0 .25rem rgba(141, 88, 243,.5) !important;
}

.form-control
{
    border: var(--standard-border);
    font-weight: 700;
}
.form-control:focus
{
    border: var(--standard-border) !important;
    box-shadow: 0 0 0 .25rem rgba(141, 88, 243, 0.5);
}
.form-control::placeholder
{
    font-weight: 700;
}
.form-select
{
    border: var(--standard-border);
    font-weight: 700;
}
.form-select:focus
{
    border: var(--standard-border) !important;
    box-shadow: 0 0 0 .25rem rgba(141, 88, 243, 0.5);
}

.card.error
{
    background-color: var(--danger-color);
    border-color: var(--danger-color-darkened);
    color: #F2F2F2;
}
.card.success
{
    background-color: var(--success-color);
    border-color: var(--success-color-darkened);
    color: #F2F2F2;
}
.card.warning
{
    background-color: var(--warning-color);
    border-color: var(--warning-color-darkened);
}

.btn-fullwidth
{
    width: 100%;
}

label
{
    color: #696969;
}

fieldset
{
    border: var(--standard-border);
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(69, 77, 192, .05);
}

legend
{
    float: none;
    width: auto;
    padding: 1px 10px !important;
    /* background: linear-gradient(rgba(255, 255, 255, 0.77), rgba(255, 255, 255, 0.77)), url(../media/pattern.png);
    background-size: 172px;   
    background-color: rgba(86, 188, 206, .15); */
    background-color: var(--primary-color);
    border-radius: 8px;
    border: 2px solid var(--secondary-color);
    font-size: 1.3rem;
    color: #F2F2F2;
}

.footer
{
    width: 100%;
    height: 16vh;
    /* border-top: 2px solid var(--secondary-color);
    background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), url(../media/wood_pattern.png); */
    border-top: 2px solid var(--primary-color);
    background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), url(../media/pattern.png);
    background-size: 15%;
    background-color: rgba(69,77,192, 0.5);
    color: #111;
}

.img-headshot
{
    border-radius: 8px;
    border: var(--dashed-border);
}

.dropdown-menu
{
    border: 2px solid var(--secondary-color);
    z-index: 3;
}
.dropdown-item
{
    font-weight: 700;
}

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

.btn-secondary
{
    border: 2px solid var(--secondary-color-darkened);
    background-color: var(--secondary-color);
}
.btn-secondary:hover
{
    border: 2px solid var(--secondary-color-darkened);
    background-color: var(--secondary-color-darkened);
}
.btn-secondary:focus
{
    border: 2px solid var(--secondary-color-darkened);
    background-color: var(--secondary-color);
    box-shadow: 0 0 0 .25rem rgba(141, 88, 243,.5) !important;
}
.btn-secondary:active
{
    border: 2px solid var(--secondary-color-darkened);
    background-color: var(--secondary-color);
    box-shadow: 0 0 0 .25rem rgba(141, 88, 243,.5) !important;
}

.btn-success
{
    border: 2px solid var(--success-color-darkened);
    background-color: var(--success-color);
}
.btn-success:hover
{
    border: 2px solid var(--success-color-darkened);
    background-color: var(--success-color-darkened);
}
.btn-success:focus
{
    border: 2px solid var(--success-color-darkened);
    background-color: var(--success-color);
    box-shadow: 0 0 0 .25rem rgba(86, 206, 110, .5) !important;
}
.btn-success:active
{
    border: 2px solid var(--success-color-darkened);
    background-color: var(--success-color);
    box-shadow: 0 0 0 .25rem rgba(86, 206, 110, .5) !important;
}

.dropdown-divider
{
    background-color: var(--secondary-color) !important;
    border-top-color: var(--secondary-color) !important;
    border-bottom-color: var(--secondary-color) !important;
    border-top-width: 2px;
    opacity: 1;
}

.pagination>.page-item
{
    padding:10px;
    padding-top:5px;
    padding-bottom: 5px;
    border-radius: 4px;
    border: 2px solid var(--secondary-color) !important;
    margin-right: 5px;
}

.btn-secondary.disabled, .btn-secondary:disabled
{
    background-color: var(--secondary-color-darkened);
}

a
{
    color: #f2f2f2;
    text-decoration: none;
}

a:hover
{
    color: #d3cece;
    text-decoration: none;
}

.custom-modal
{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    background-color: rgba(17, 17, 17, .5);
    z-index: 4;
}
.custom-modal fieldset
{
    background-color: rgba(141, 88, 243, .75);
}

li.page-item
{
    cursor: pointer;
}

hr
{
    background-color: var(--primary-color);
    height: 2px !important;
    opacity: .25;
}
.text-separator 
{
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--primary-color);
  opacity: 0.25;
}

.text-separator::before,
.text-separator::after 
{
  content: '';
  flex: 1;
  border-bottom: 2px solid var(--primary-color);
}

.text-separator:not(:empty)::before 
{
  margin-right: .25em;
}

.text-separator:not(:empty)::after 
{
  margin-left: .25em;
}

.pagination
{
    justify-content:center;
}

.clickable-card
{
    transition: all 0.3s linear;
    cursor: pointer;
}
.clickable-card:hover
{
    background-color: var(--secondary-color);   
    color: #fff;
}

.clickable-row
{
    padding: 5px;
    transition: all 0.3s linear;
    cursor: pointer;
}
.clickable-row:hover
{
    background-color: #5c3a9f42;
    /* color: #fff !important; */
}

.name-card
{
    background-color: var(--primary-color);
    border: var(--standard-border);
    padding: 5px;
    text-align: center;
    color: #FFF;
    border-radius: 8px;
    text-overflow: ellipsis !important;
    overflow: hidden;
}

.img-avatar
{
    border-radius: 8px;
    border: var(--dashed-border);
    padding: 5px;
}

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

.btn-outline-primary
{
    color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: bold;
}

.btn-outline-primary:hover
{
    color: white;
    border-color: var(--secondary-color);
    background-color: var(--primary-color);
    font-weight: bold;
}
.btn-outline-primary:focus
{
    color: white;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color-darkened) !important;
    box-shadow: 0 0 0 .25rem rgba(141, 88, 243,.5);
}
.btn-outline-primary:active
{
    color: white;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color-darkened) !important;
    box-shadow: 0 0 0 .25rem rgba(141, 88, 243,.5) !important;
}
.text-success
{
    color: var(--success-color) !important;
}

.staff-card
{
    background-color: var(--danger-color);
    border-color: var(--danger-color-darkened);
}

.staff-avatar
{
    border-color: var(--danger-color);
}

.currency-pack
{
    border: var(--dashed-border);
    border-radius: 8px;
    padding: 5px;
    transition: all 0.3s linear;
    cursor: pointer;
}

.currency-pack:hover
{
    border: var(--standard-border);
    background-color: var(--primary-color);
    color: #fff !important;
}

.online-image
{
    border-color: var(--success-color) !important;
}
.offline-image
{
    border-color: grey !important;
}

.landing-hero
{
    background-color: var(--primary-color);
    color: #FFF;
    width: 100%;
    padding: 10px;
}

.dropdown-item.active, .dropdown-item:active
{
    background-color: var(--primary-color) !important;
    color: #FFF !important;
}