@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&display=swap');

* {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
}

body {
    font-size: 1.1rem;
}


h1, h2, h3, h4, h5, h6,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
    font-family: 'Nunito Sans', sans-serif;
}

h1 {
    font-weight: 700;
    font-size: 2rem;
}

h1 strong {
    font-weight: 700;
}

h2 {
    font-weight: 700;
    font-size: 1.8rem;
}

h2 strong, h2 span {
    font-weight: 700;
    font-size: 1.8rem;
}

h3 {
    font-weight: 700;
    font-size: 1.6rem;
}

h3 strong {
    font-weight: 700;
}

h4 {
    font-weight: 700;
    font-size: 1.4rem;
}

h4 strong {
    font-weight: 700;
}

h5 {
    font-weight: 700;
    font-size: 1.2rem;
}

h5 strong {
    font-weight: 700;
}

h6 {
    font-weight: 700;
    font-size: 1.1rem;
}

h6 strong {
    font-weight: 700;
}

footer {

}

.text-decoration-none {
    text-decoration: none !important;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

.font-size-4 {
    font-size: 4rem;
    line-height: 4.4rem;

}

.font-size-3 {
    font-size: 3rem;
    line-height: 3.4rem;

}


.font-size-2 {
    font-size: 2rem;
    line-height: 2.4rem;

}

.font-size-1-5 {
    font-size: 1.5rem;
    line-height: 1.9rem;

}

.font-size-1-3 {
    font-size: 1.3rem;
}

.font-size-1-2 {
    font-size: 1.2rem;
}

.font-size-1-1 {
    font-size: 1.1rem;
}

.font-size-0-9 {
    font-size: 0.9rem !important;
}

.font-size-0-8 {
    font-size: 0.8rem;
    line-height: 0.9rem;
}

.container-fluid {
    max-width: 2500px;
}

.border-radius {
    border-radius: 0.5rem;
}

.btn {
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 700;

}

.btn:not(.w-auto) {
    width: 100%;
}

.btn-secondary, .btn-secondary:hover {
    color: white;
}

.text-black {
    color: #000;
}

.btn.btn-default {
    background-color: lightgrey;
    color: gray;
}

.btn-delete {
    color: #fff;
    background-color: tomato;
    border-color: darkred;
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
}

.btn-delete:hover {
    color: #fff;
    background-color: darkred;
    border-color: tomato;
}

.btn-delete:focus, .btn-delete.focus {
    box-shadow: 0 0 0 3px rgba(88, 80, 87, 0.5);
}

.btn-delete.disabled, .btn-delete:disabled {
    background-color: #90898E;
    border-color: #90898E;
}

.btn-delete:active, .btn-delete.active, .show > .btn-delete.dropdown-toggle {
    background-color: tomato;
    background-image: none;
    border-color: darkred;
}

.bg-delete {
    background-color: tomato !important;
    color: white;
}

.text-delete {
    color: darkred;
}

/**/
.btn-gray-1 {
    color: #fff;
    background-color: #90898E;
    border-color: #90898E;
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
}

.btn-gray-1:hover {
    color: #fff;
    background-color: #736d71;
    border-color: #787276;
}

.btn-gray-1:focus, .btn-gray-1.focus {
    box-shadow: 0 0 0 3px rgba(88, 80, 87, 0.5);
}

.btn-gray-1.disabled, .btn-gray-1:disabled {
    background-color: #90898E;
    border-color: #90898E;
}

.btn-gray-1:active, .btn-gray-1.active, .show > .btn-gray-1.dropdown-toggle {
    background-color: #736d71;
    background-image: none;
    border-color: #787276;
}

.bg-light-primary {
    background-color: rgb(255, 226, 218)

}

.bg-gray-1 {
    background-color: #90898E !important;
    color: white;
}

.text-gray-1 {
    color: #90898E;
}

/**/
.btn-gray-2 {
    color: #fff;
    background-color: #B9B3B7;
    border-color: #B9B3B7;
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
}

.btn-gray-2:hover {
    color: #fff;
    background-color: #968f94;
    border-color: #9b9499;
}

.btn-gray-2:focus, .btn-gray-2.focus {
    box-shadow: 0 0 0 3px rgba(88, 80, 87, 0.5);
}

.btn-gray-2.disabled, .btn-gray-2:disabled {
    background-color: #B9B3B7;
    border-color: #B9B3B7;
}

.btn-gray-2:active, .btn-gray-2.active, .show > .btn-gray-2.dropdown-toggle {
    background-color: #968f94;
    background-image: none;
    border-color: #9b9499;
}

.bg-gray-2 {
    background-color: #B9B3B7 !important;
    color: white;
}

.text-gray-2 {
    color: #B9B3B7;
}

/**/
.btn-gray-3 {
    color: #fff;
    background-color: #D4D1D3;
    border-color: #D4D1D3;
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
}

.btn-gray-3:hover {
    color: #fff;
    background-color: #aea9ad;
    border-color: #b4afb3;
}

.btn-gray-3:focus, .btn-gray-3.focus {
    box-shadow: 0 0 0 3px rgba(88, 80, 87, 0.5);
}

.btn-gray-3.disabled, .btn-gray-3:disabled {
    background-color: #D4D1D3;
    border-color: #D4D1D3;
}

.btn-gray-3:active, .btn-gray-3.active, .show > .btn-gray-3.dropdown-toggle {
    background-color: #aea9ad;
    background-image: none;
    border-color: #b4afb3;
}

.bg-gray-3 {
    background-color: #D4D1D3 !important;
    color: white;
}

.text-gray-3 {
    color: #D4D1D3;
}

/**/
.btn-gray-4 {
    color: #585057;
    background-color: #E5E3E5;
    border-color: #E5E3E5;
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
}

.btn-gray-4:hover {
    color: #585057;
    background-color: #dcdadc;
    border-color: #d7d5d7;
}

.btn-gray-4:focus, .btn-gray-4.focus {
    box-shadow: 0 0 0 3px rgba(88, 80, 87, 0.5);
}

.btn-gray-4.disabled, .btn-gray-4:disabled {
    background-color: #E5E3E5;
    border-color: #E5E3E5;
}

.btn-gray-4:active, .btn-gray-4.active, .show > .btn-gray-4.dropdown-toggle {
    background-color: #dcdadc;
    background-image: none;
    border-color: #d7d5d7;
}

.bg-gray-4 {
    background-color: #E5E3E5 !important;
    color: #585057;
}

.text-gray-4 {
    color: #E5E3E5;
}

/**/
.btn-gray-5 {
    color: #585057;
    background-color: #EFEFF1;
    border-color: #EFEFF1;
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
}

.btn-gray-5:hover {
    color: #585057;
    background-color: #e6e6e8;
    border-color: #e1e1e3;
}

.btn-gray-5:focus, .btn-gray-5.focus {
    box-shadow: 0 0 0 3px rgba(88, 80, 87, 0.5);
}

.btn-gray-5.disabled, .btn-gray-5:disabled, .btn-disabled {
    background-color: #EFEFF1 !important;
    border-color: #EFEFF1 !important;
    color: #e7e6e6;
}

.btn-gray-5:active, .btn-gray-5.active, .show > .btn-gray-5.dropdown-toggle {
    background-color: #e6e6e8;
    background-image: none;
    border-color: #e1e1e3;
}

.bg-gray-5 {
    background-color: #EFEFF1 !important;
    color: #585057;
}

.text-gray-5, .text-disabled {
    color: #EFEFF1 !important;
}

/**/

.container-fluid {

    margin-bottom: 15px;
}

.colorDisabled {
    color: lightgrey;
}


.text-small {
    max-width: 100px;
}

.badge.badge-secondary {
    color: white;
}

.fa-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
    font-size: 2rem;
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}

.copytoclipboard {
    cursor: pointer;
}

.copytoclipboard:active {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;

}

.modal-content {
    border-radius: 0.5rem;
    border: 0px;
}

/* Track */
::-webkit-scrollbar {
    position: absolute;
    width: 8px;

    background-color: #fff;

}

::-webkit-scrollbar-track {
    background-color: rgba(88, 80, 87, 0.1);
    border-radius: 0.5rem;

}

::-webkit-scrollbar-thumb {
    background-color: #585057;
    border-radius: 0.5rem;
}

.modal-backdrop.show {
    opacity: 0.8;
}

.multigroup {
    min-height: 0 !important;
}

.multigroupadd {
    border: none !important;
    background-color: white !important;
}

.multigroupadd a {
    text-decoration: underline !important;
}

.dependency,.dependency-empty {
    aspect-ratio: 2/1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.dependency {
    border: 1px solid #000;
    border-radius: 0.5rem;
}

.dependency-link, .dependency-link-empty {
    aspect-ratio: 5/1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dependency-num-count {
    position:absolute;
    bottom:0.1rem;
    left:0;
    width:100%;
    color:white;
    text-align:center;
    font-size:0.8rem;

}
.dependency-link-line {
    position: absolute;
    top: 0;
    height: 100%;
    left: 50%;
    width: 1px;
    background-color: #000
}

.dependency-link-label {
    margin: auto;
    z-index: 1;
    border: 1px solid #000;
    border-radius: 0.5rem;
}

.carousel-prev-next, .carousel-close {
    position: absolute;
    top: 60%;
    z-index: 1;
    width: 100%;
}
.carousel-close {
    top:0%;
}

.carousel-prev-next a, .carousel-close a {
    font-size: 1rem;
    color: black;
    border-radius: 50%;
    background-color: white;
    aspect-ratio: 1/1;
    box-shadow: 2px 2px 9px #888888;
    position: absolute;


}

.carousel-prev-next a i, .carousel-close a i {
    padding: 7px 10px;

}

.carousel-next, .carousel-close a {
    right: -50px;

}

.carousel-prev {
    left: -50px;

}

.dependencies-upstream .carousel-prev-next {
    top:20%
}
.dependencies-downstream .carousel-prev-next {
    top:60%
}
#popup-stream .modal-body {
    height:80vh;
    overflow:auto
}