@import "fonts.css";

:root {
    --prc-primary: #4e10ff;
    --prc-primary-dark: #0e1128;
    --prc-primary-light: #b665e9;
    --prc-primary-gray: #6e707e;
    --prc-primary-white: #ffffff;
    --prc-secondary-gray-1: #cfcfd4;
    --prc-secondary-gray-2: #e7e7ea;
    --prc-secondary-gray-3: #f3f3f4;

    --prc-primary-rgb: 78, 16, 255;
    --prc-primary-dark-rgb: 14, 17, 40;
    --prc-primary-light-rgb: 182, 101, 233;
    --prc-primary-gray-rgb: 110, 112, 126;
    --prc-primary-white-rgb: 255, 255, 255;
    --prc-secondary-gray-1-rgb: 207, 207, 212;
    --prc-secondary-gray-2-rgb: 231, 231, 234;
    --prc-secondary-gray-3-rgb: 243, 243, 244;

    --prc-headline-font: "Euclid Triangle";
    --prc-text-font: "Source Sans Pro";
}

/* Scrollbars */
* {
    scrollbar-color: var(--prc-secondary-gray-1) var(--prc-secondary-gray-2);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--prc-secondary-gray-2);
}

::-webkit-scrollbar-thumb {
    background-color: var(--prc-secondary-gray-1);
}

body {
    font-family: var(--prc-text-font);
    font-size: calc(16 * 0.75px);
    color: var(--prc-primary-dark);
}

/* Links */
a, a.h1, a.h3, a.h3, a.h4, a.h5, a.h6 {
    color: var(--prc-primary);
}

a:hover {
    color: var(--prc-primary);
    text-decoration: underline;
}

/* Headlines */
h1, h2, h3, h4, h5, h6 {
    color: var(--prc-primary-dark);
    font-family: var(--prc-headline-font);
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--prc-primary-dark);
    font-family: var(--prc-text-font);
}

h2, .h2 {
    font-size: calc(56 * 0.75px);
    font-weight: 600;
}

h3, .h3 {
    font-size: calc(28 * 0.75px);
    font-weight: 400;
}

h4, .h4 {
    font-size: calc(24 * 0.75px);
    font-weight: 600;
}

h5, .h5 {
    font-size: calc(22 * 0.75px);
    font-weight: 600;
}

h6, .h6 {
    font-size: calc(18 * 0.75px);
    font-weight: 400;
}

/* Layout Topnav - content header */
.layout-top-nav .content-header {
    padding: 0 .5rem;
}

/* Topnav */
.navbar-dark {
    background-color: var(--prc-primary-dark);
    border: 0;
    padding-bottom: calc(0.5rem + 0.25rem);
}

.navbar-dark::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to right, var(--prc-primary), var(--prc-primary-light));
    height: 0.25rem;
}

.navbar-dark .navbar-nav .nav-link {
    font-size: calc(18 * 0.75px);
}

.navbar-dark .navbar-brand .brand-image {
    height: 24px !important;
}

.navbar-dark .navbar-nav .dropdown .dropdown-menu {
    background-color: rgba(var(--prc-primary-dark-rgb), 0.9);
    backdrop-filter: blur(2px);
    border-radius: 0;
    border: 0;
    padding: 0 1rem 0.25rem;
    margin-top: 0.5rem;
    min-width: 15rem;
}

.navbar-dark .navbar-nav .dropdown .dropdown-menu::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to right, var(--prc-primary), var(--prc-primary-light));
    height: 0.25rem;
}

.navbar-dark .navbar-nav .dropdown .dropdown-menu .dropdown-item {
    color: var(--prc-primary-white);
    padding: 0.75rem 0;
    font-size: calc(18 * 0.75px);
}

.navbar-dark .navbar-nav .dropdown .dropdown-menu .dropdown-item:hover,
.navbar-dark .navbar-nav .dropdown .dropdown-menu .dropdown-item:active,
.navbar-dark .navbar-nav .dropdown .dropdown-menu .dropdown-item:focus,
.navbar-dark .navbar-nav .dropdown .dropdown-menu .dropdown-item.active {
    background-color: transparent;
    color: var(--prc-primary-light);
}

.navbar-dark .navbar-nav .dropdown .dropdown-menu .dropdown-item + .dropdown-item {
    border-top: 1px solid #ffffff80;
}

.navbar-dark .navbar-nav .dropdown .dropdown-menu .dropdown-header {
    text-align: left;
    color: var(--prc-primary-light);
    font-size: calc(12 * 0.75px);
    background-color: #00000050;
    font-weight: 600;
    margin: 0rem -1rem;
    padding: 0.5rem 1.5rem;
    text-transform: uppercase;
}

/* Auth pages */
.login-box,
.register-box {
    max-width: 520px;
    width: 100%;
    padding: 0 20px;
}
.login-box a,
.register-box a {
    color: var(--prc-primary-light);
}
.login-box .input-group .form-control,
.login-box .input-group .form-control::placeholder,
.login-box .input-group .form-control:-webkit-autofill,
.login-box .input-group .form-control ~ .input-group-append .input-group-text,
.login-box .input-group .form-control:focus ~ .input-group-append .input-group-text,
.register-box .input-group .form-control,
.register-box .input-group .form-control::placeholder,
.register-box .input-group .form-control:-webkit-autofill,
.register-box .input-group .form-control ~ .input-group-append .input-group-text,
.register-box .input-group .form-control:focus ~ .input-group-append .input-group-text {
    background: transparent;
    border-color: #fff;
    color: #fff;
    filter: none;
}
.login-box .custom-control-label::before,
.login-box .custom-control-input:not(:disabled):active:not(:checked) ~ .custom-control-label::before,
.login-box .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    background-color: transparent;
}

/* Buttons */
.btn {
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 0.35rem;
}
.btn-sm {
    padding: 0.25rem 1.25rem;
}
.btn-primary {
    background-color: var(--prc-primary);
    border-color: var(--prc-primary);
    color: var(--prc-primary-white);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--prc-primary-white);
    border-color: var(--prc-primary);
    color: var(--prc-primary);
}
.btn-gradient {
    position: relative;
    background-image: linear-gradient(to right, var(--prc-primary), var(--prc-primary-light));
    background-size: 105%;
    background-position: center;
    border-color: transparent;
    color: var(--prc-primary-white);
}
.btn-gradient:hover,
.btn-gradient:focus,
.btn-gradient:not(:disabled):not(.disabled):active {
    color: var(--prc-primary);
}
.btn-gradient::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: 1px;
    background-color: var(--prc-primary-white);
    border-radius: calc(0.35rem - 1px);
    opacity: 0;
    transition: opacity .15s ease-in-out;
}
.btn-gradient:hover::before,
.btn-gradient:focus::before,
.btn-gradient:not(:disabled):not(.disabled):active::before {
    opacity: 1;
}

.btn-icon > span {
    display: inline-block;
    transition: transform .15s ease-in-out;
}
.btn-icon:hover > span:first-child,
.btn-icon:focus > span:first-child,
.btn-icon:not(:disabled):not(.disabled):active > span:first-child {
    transform: translateX(13px);
}
.btn-icon:hover > span:last-child,
.btn-icon:focus > span:last-child,
.btn-icon:not(:disabled):not(.disabled):active > span:last-child {
    transform: translateX(-13px);
}

.btn-icon > i:first-child {
    margin-right: .5rem;
    transition: opacity .15s ease-in-out;
}
.btn-icon > i:last-child {
    margin-left: .5rem;
    transition: opacity .15s ease-in-out;
}
.btn-icon:hover > i,
.btn-icon:focus > i,
.btn-icon:not(:disabled):not(.disabled):active > i {
    opacity: 0;
}

/* File Input */
.form-control::file-selector-button {
    padding: calc(.375rem + 2px) .75rem;
    margin: -.375rem -.75rem;
    background-color: #e9ecef;
    pointer-events: none;
    border: 1px solid #ced4da;
    border-inline-end-width: 1px;
    margin-inline-end: 0.75rem;
    color: #495057;
    cursor: pointer;
    font-family: inherit;
    transition: border-inline-end-color .15s ease-in-out;
}
.form-control:focus::file-selector-button {
    border-inline-end-color: rgba(var(--prc-primary-rgb), 0.25);
}
.form-control-sm::file-selector-button {
    padding: .375rem .75rem;
}
/* .form-control[type="file"]:valid {
    color: red;
} */
.form-control[type="file"] {
    color: #939ba2;
    cursor: pointer;
}

/* Form elements */
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-dropdown .select2-search__field:focus,
.select2-container--default .select2-search--inline .select2-search__field:focus,
.select2-container--default .select2-dropdown {
    border-color: rgba(var(--prc-primary-rgb), 0.25);
}
select option {
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.custom-control-label::before,
.custom-control-input:not(:disabled):active:not(:checked) ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #ced4da;
    background-color: var(--prc-primary-white);
    box-shadow: none;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before,
.custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--prc-primary);
    background-color: var(--prc-primary);
    box-shadow: none;
}

/* Form elements small */
.form-control-sm {
    font-size: calc(16 * 0.75px);
}
.custom-control-sm .custom-control-label {
    padding: 0.4rem 0;
    min-height: calc(1.8125rem + 2px);
}
.custom-control-sm .custom-control-label::before,
.custom-control-sm .custom-control-label::after {
    top: calc(1.8125rem + 2px - 1rem - 0.5rem);
}

/* Select2 */
.select2 {
    width: 100% !important;
}
.select2-dropdown {
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: var(--prc-primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--prc-primary);
    border-color: var(--prc-primary);
}

.form-control.is-invalid + .select2 .select2-selection {
    border-color: #dc3545;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-control.is-invalid + .select2  .select2-selection .select2-selection__arrow {
    right: 1.4rem;
}
select.form-control-sm ~ .select2-container--default {
    font-size: calc(16 * 0.75px);
}

/* Card */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    background-image: linear-gradient(to right, var(--prc-primary), var(--prc-primary-light));
    height: 0.5rem;
}

.card {
    border: 1px solid var(--prc-primary-dark);
    border-top: none;
    padding-top: 0.5rem;
    border-radius: 0.5rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-sizing: border-box;
    transition: transform 0.3s ease 0s;
}

.card-hover-scale:hover {
    transform: scale(1.05);
}

.card .card-body > div {
    transition: transform 0.3s ease 0s;
}

.card-hover-scale:hover .card-body > div {
    transform: scale(0.95);
}

.card svg .gradient-icon-color-1 {
    stop-color: #000;
    transition: stop-color 0.3s ease 0s;
}

.card:hover .gradient-icon-color-1 {
    stop-color: var(--prc-primary);
}

.card .gradient-icon-color-2 {
    stop-color: #000;
    transition: stop-color 0.3s ease 0s;
}

.card:hover .gradient-icon-color-2 {
    stop-color: var(--prc-primary-light);
}

/* SVG Icon Gradients */
.gradient-icon-color-2 {
    stop-color: var(--prc-primary-light);
}

.gradient-icon-color-1 {
    stop-color: var(--prc-primary);
}

/* Tables */
.table tbody tr td:first-child a {
    color: var(--prc-primary-dark);
}
.table tbody tr td:first-child a:hover {
    color: var(--prc-primary);
}

/* Burgermenu */
.burger-menu svg {
    transition: transform 400ms;
}

.burger-menu svg .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: #fff;
    stroke-width: 5.5;
    stroke-linecap: round;
}

.burger-menu svg .top {
    stroke-dasharray: 40 121;
}

.burger-menu svg .bottom {
    stroke-dasharray: 40 121;
}

.burger-menu[aria-expanded="true"] svg {
    transform: rotate(45deg);
}

.burger-menu[aria-expanded="true"] svg .top {
    stroke-dashoffset: -68px;
}

.burger-menu[aria-expanded="true"] svg .bottom {
    stroke-dashoffset: -68px;
}

/* User initals */
.user-initials {
    background-image: linear-gradient(to right, var(--prc-primary), var(--prc-primary-light));
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    text-shadow: 0 0px 2px #000;
}

/* Space BG */
.bg-space {
    background-color: var(--prc-primary-dark);
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bg-space > .lottie {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: auto;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* .lb-outerContainer {
    background-image: url("../img/prc_bg.jpg");
    background-position: center;
} */
.lb-nav a.lb-prev {
    background-image: url("../img/lightbox/prev.png");
}
.lb-nav a.lb-next {
    background-image: url("../img/lightbox/next.png");
}
.lb-data .lb-close {
    background-image: url("../img/lightbox/close.png");
}
.lb-cancel {
    background-image: url("../img/lightbox/loading.gif");
}