:root {
    --colorMain: #ecf0f3;
    --brShadow: -8px -6px 8px rgba(255,255,255,0.8);
    --tlShadow: 8px 6px 12px rgba(0,0,0,0.08);
    --primary: #b11116;
    --secondary: #6a6a6a;
    --tertiary: #282727;
    --tertiary-plum: #8D1638;
    --tertiary-green: #009490;
    --accent: #ECF0F3;
    --lime: #C1D402;
    --darkblue: #263237;
    --border: #ff6b6f;
}

.theme--light.v-btn.v-btn--has-bg {
    background-color: transparent !important;
}

.border {
    border: var(--border) 1px solid;
}

.hidden {
    display: none !important;
}

.pp-center {
    text-align: center;
    justify-content: center;
    align-items: center;
}

.v-icon-delete {
    position: relative;
    left: 50%;
    margin-top: 20px;
    color: #b11116 !important;
    margin-bottom: 5px;
}

.pp-gray {
    background-image: url("/images/bg.jpg");
    background-size: cover;
    position: top right;
}

.v-btn {
    text-transform: none !important;
    letter-spacing: 0.03em !important;
}

.v-application .error--text {
    font-size: small;
    position: relative;
    top: -12px !important;
    left: 15px !important;
}

.v-data-table-header th.sortable .v-data-table-header__icon {
    position: inherit;
    padding-left: 12px;
    color: var(--primary) !important;
}

.v-data-table > .v-data-table__wrapper > table > tbody > tr > td, .v-data-table > .v-data-table__wrapper > table > tbody > tr > th, .v-data-table > .v-data-table__wrapper > table > thead > tr > td, .v-data-table > .v-data-table__wrapper > table > thead > tr > th, .v-data-table > .v-data-table__wrapper > table > tfoot > tr > td, .v-data-table > .v-data-table__wrapper > table > tfoot > tr > th {
    padding: 20px 16px !important;
}

.v-data-table__wrapper {
    border-radius: 10px;
    border: rgba(211, 211, 211, 0.31) 1px solid;
    margin: 15px;
    box-shadow: 2px 2px 3px rgba(128, 128, 128, 0.22)

}

.v-data-table > .v-data-table__wrapper > table > tbody > tr > th, .v-data-table > .v-data-table__wrapper > table > thead > tr > th, .v-data-table > .v-data-table__wrapper > table > tfoot > tr > th {
    border-right: lightgrey 1px solid;
    padding: 0 16px !important;
    margin: 16px 0;

}

.v-data-table-header {
    background-color: rgba(211, 211, 211, 0.16);
    margin: 10px;
    padding: 10px;
}

.pp-bc {
    text-decoration: none;
    color: darkgrey !important;
}

.pp-bc:hover {
    color: var(--primary) !important;
}

.right {
    position: absolute;
    text-align: right;
    left: 95%;
    top: -5px;
}

.pp-sidenav-2 {
    width: 250px;
    margin-top: 20px;
    height: 100px;
}

.pp-sidenav {
    background-color: rgba(0, 0, 0, 0.87);
    width: 250px;
}

.logo-course {
    position: absolute !important;
    top: 20px !important;
}

.px-20 {
    padding: 0 15rem;
}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.door {
    position: relative;
    left: 40%;
}

.loader {
    border: 20px solid var(--tertiary);
    border-radius: 50%;
    border-top: 20px solid var(--primary);
    width: 200px;
    height: 200px;
    animation: spinner 4s linear infinite;
}

.pp-col-1 {
    flex-grow: unset !important;
}

.right-close-btn {
    z-index: 1000 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.err-text {
    position: relative;
    top: -10px !important;
    left: 20px !important;
}

.flash {
    z-index: 900 !important;
}

._vue-flash-msg-body {
    width: fit-content !important;
    padding-right: 15px;
}

.v-dialog {
    z-index: 1 !important;
}