:root {
    --bs-primary-rgb: 36,71,112;
    --bs-text-opacity: 1;
}

/* width */
::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #e1e1e7;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #92a2b480;
    transition: .2s;
    border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #92a2b4;
}

body { 
    /* background: url('https://img.freepik.com/free-vector/white-gray-geometric-pattern-background-vector_53876-136510.jpg?w=1480&t=st=1675665738~exp=1675666338~hmac=5e4a82c4137a7db9156564ce98eacb01013416b21b6a60608a0f77a01d6dd262') no-repeat center center fixed;  */
    background: url('/static/img/src/18262593_5968949.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h1, h2, h3, h4, h5 {
    color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
}

.btn-outline-primary {
    --bs-btn-color: #244770;
    --bs-btn-border-color: #244770;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #244770;
    --bs-btn-hover-border-color: #244770;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #244770;
    --bs-btn-active-border-color: #244770;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #244770;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #244770;
    --bs-gradient: none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #244770;
    --bs-btn-border-color: #244770;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1c3757;
    --bs-btn-hover-border-color: #1c3757;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3e5775;
    --bs-btn-active-border-color: #3e5775;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #244770;
    --bs-btn-disabled-border-color: #244770;
}

.bg-glass {
    background: hsla(0, 0%, 100%, 0.15);
    backdrop-filter: blur(4px);
}

.border-primary-light {
    border: 1px solid #24477077;
}

.side {
    position: fixed;
    bottom: 50%;
    transform: translateY(50%);
}

.side-left {
    left: 20px;
}

.side-right {
    right: 20px;
}

.side-right .card {
    margin-left: auto;
    margin-right: 0;
}

.side-menu {
    display: block;
    padding: .5rem;
    justify-content: space-between;
    height: 90vh;
}

.side-menu .card {
    width: 340px;
    transition: width .4s ease-in-out, max-width .4s ease-in-out;
}

.side-menu .card .card-body {
    min-width: 300px;
    min-height: 140px;
}
.side-menu .card.w-500-px, .side-menu .card.w-500-px.collapsed:hover {
    width: 700px;
    overflow: hidden;
}
.side-menu .card.w-340-px, .side-menu .card.w-340-px.collapsed:hover {
    width: 340px;
    overflow: hidden;
}

.side-menu .card.collapsed {
    width: 80px;
    overflow: hidden;
}

.btn-pin {
    position: absolute;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    border: 0;
    border-radius: .375rem;
    opacity: .2;
    right: 0;
    rotate: 0deg;
    transition: rotate 0.1s ease-in-out;
}

.btn-pin:hover {
    opacity: .5;
}

.card.collapsed .btn-pin {
    rotate: 45deg;
}
.card.collapsed .btn-pin:hover {
    opacity: .5;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    max-width: 80vw;
}

.footer-menu {
    display: flex;
    background-color: #e1e1e743;
    backdrop-filter: blur(2px);
    padding: .5rem;
    border-radius: 4rem;
    justify-content: space-between;
}

.footer-menu .btn {
    margin-left: .25rem;
    margin-right: .25rem;
    transition: .2s ease-in-out;
}

.footer-menu .btn span {
    display: initial;
    overflow: hidden;
    width: 0;
    margin-left: .5rem;
    margin-right: .5rem;
    transition: .2s ease-in-out;
}

.footer-menu .btn.active span, .footer-menu .btn:hover span{
    display: initial;
    overflow: hidden;
    width: auto;
}

.diagram object {
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    height: 80vh;
}

.input-floating {
    position: relative;
}
.input-floating>.form-control,
.input-floating>.form-control-plaintext,
.input-floating>.form-select {
    /* height: calc(3.5rem + 2px); */
    padding: 0.5rem 0.75rem;
    line-height: 1.25
}
.input-floating>label {
    position: absolute;
    top: 0;
    height: 100%;
    color: #bcbcc2;
    padding: 0.375rem 0.75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out
}

.input-floating>.form-control-plaintext::-moz-placeholder,
.input-floating>.form-control::-moz-placeholder {
    color: transparent
}

.input-floating>.form-control-plaintext::placeholder,
.input-floating>.form-control::placeholder {
    color: transparent
}

.input-floating>.form-control:not(:-moz-placeholder-shown)~label {
    opacity: .65;
    background-color: #f7f7f9;
    transform: scale(.85) translateY(-1.125rem) translateX(.15rem)
}

.input-floating>.form-control-plaintext~label,
.input-floating>.form-control:focus~label,
.input-floating>.form-control:not(:placeholder-shown)~label,
.input-floating>.form-select~label,
.input-floating>.form-control:-webkit-autofill~label {
    color: #9d9daa;
    text-shadow: 1px 1px #f7f7f9;
    padding: 0.25rem 0.25rem;
    transform: scale(.85) translateY(-1.125rem) translateX(.15rem);
}

.input-floating>.form-control-plaintext~label {
    border-width: 1px 0
}

@media (min-width:768px) {
    .col-md-1-5 {
        flex: 0 0 auto;
        width: 12.5%;
    }
}