:root {
    --body-bgcolor-rgb: 107,114,124;
    --header-bgcolor-rgb: 69,71,75;
    --main-bgcolor-rgb: 255,255,255;
    --loader-bgcolor-rgb: 209,155,63;
    --btngroup-color-rgb: 222,226,230;
}

body {
    background-color: rgb(var(--body-bgcolor-rgb));
}
#toastsStack { z-index: 10005; }
header, footer {
    background-color: rgb(var(--header-bgcolor-rgb));
}
header {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600; 
}
header a {
    color: #fff;
    text-decoration: none;
}
.logo {
    width: 44px;
}
.copyright a {
    color: rgba(255,255,255,.25);
    text-decoration: none;
    font-size: .9rem;
}
.copyright a:hover {
    color: rgba(255,255,255,1);
    text-decoration: underline;
}
main>.container {
    background-color: rgb(var(--main-bgcolor-rgb));
    height: 100%;
}
.parsley-errors-list {
    color: rgb(var(--bs-danger-rgb));
    list-style: none;
    padding: 0;
    font-size: .8rem;
    margin-bottom: 0;
}
.row>.parsley-errors-list { margin-left: .75rem; }
.parsley-errors-list.filled { margin-top: .25rem; }
.row.inline-input>.parsley-errors-list { order: 6; }
.was-validated .form-control, .was-validated .form-select {
    background-image: none !important;
}
.was-validated .form-control.is-invalid:not(:focus), .was-validated .form-control:invalid:not(:focus), .was-validated .form-select.is-invalid:not(:focus), .was-validated .form-select:invalid:not(:focus), .was-validated select:invalid+.select2-container--bootstrap-5 .select2-selection {
    outline: 1px solid rgb(var(--bs-danger-rgb));
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    padding-right: .75rem;
}
.form-control.is-valid, .was-validated .form-control:valid {
    padding-right: .75rem;
    background-image: none;
}
#okpdAttributesToggler {
    text-decoration: none;
    display: inline-block;
    color: var(--bs-body-color);
    border-bottom: 1px dashed green;
}
#okpdAttributesToggler::after {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    display: inline-block;
    width: 10px;
    margin-left: 0.5rem;
    transform: rotate(180deg);
}
#okpdAttributesToggler.collapsed::after {
    transform: rotate(0deg);
}
#okpdAttributes>.spinner-border { display: none; }
#okpdAttributes.loading>.spinner-border { display: block; }
#okpdAttributes.loading>ul { display: none; }
.page-loader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(255,255,255, .8);
    left: 0;
    top: 0;
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
}
form.loading .page-loader { display: flex; }
.page-loader>div {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}
.page-loader>div>span {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.page-loader>div>span:nth-child(1) {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid rgba(var(--loader-bgcolor-rgb), 1);
}
.page-loader>div>span:nth-child(2) {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid rgba(var(--loader-bgcolor-rgb), 1);
}
.page-loader>div>span:nth-child(3) {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid rgba(var(--loader-bgcolor-rgb), 1);
}
.page-loader>p {
    margin-top: 110px;
    font-size: .9rem;
    color: #000;
    text-shadow:1px 0 0 #fff,0 1px 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff;
}
.page-loader>p::after { content: '...'; }
select+.select2-container--bootstrap-5 { width: 100% !important; }
#packType>label:not(.btn-check:checked+.btn) {
    border: 1px solid rgba(var(--btngroup-color-rgb),1);
    background-color: rgba(var(--btngroup-color-rgb),.25);
}

@media (max-width: 379px) {
    #okpdAttributesToggler::after { display: none; }
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}