body {
    background: rgb(9,52,72);
    background: linear-gradient(90deg, #093448, black);
}

.bg-gradiented-lr {
    background: rgb(9,52,72);
    background: linear-gradient(90deg, #093448, black);
}

.bg-gradient-center {
    background: rgb(9,52,72);
    background: linear-gradient(90deg, rgba(9,52,72,1) 10%, rgba(8,39,53,1) 50%, rgba(9,52,72,1) 90%);
}

.bg-gradient-center-colorful {
    background: rgb(9,52,72);
    background: linear-gradient(90deg, rgba(9,52,72,1) 10%, rgba(8,45,62,1) 20%, rgba(112,39,0,1) 47%, rgba(112,39,0,1) 53%, rgba(8,45,62,1) 80%, rgba(9,52,72,1) 90%);
}



.navbar {
    z-index: 99;
    background: transparent;


    .navbar-brand {
        margin-right: auto;

        img.brand-logo {
            height: 80px;
        }
    }

    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.5);

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }
    }

    .navbar-collapse {
        .navbar-nav {
            display: block;
            color: white;
            font-size: 1.4rem;

            .nav-item {
                text-align: center;

                .nav-link {
                    text-shadow: 1px 1px #424242;
                    display: block;
                    padding: 0.5rem 1rem;
                    color: white;
                    text-decoration: none;
                }
            }
        }
    }
}




.bi-linkedin {
    color: #0a66c2 !important;
}

  
.no-style-link {
    text-decoration: none;
    color: white;
}
  





.shepherd-element {
    .shepherd-arrow:before {
        background: linear-gradient(45deg, #e98446, #e98446 50%, white 50%, white) !important;
    }
}

.generic-page {
    color: white;

    h1 {
        color: white;
        font-weight: 500;
        font-size: 3.5rem;
        margin-bottom: 1.5rem;
    }

    .generic-form, .results-content {
        background-color: black;
    }

    .form-label {
        font-size: 125%;
    }
}


.codon-harmonisation-tool {
    color: white;

    h1 {
        color: white;
        font-weight: 500;
        font-size: 3.5rem;
        margin-bottom: 1.5rem;
    }

    .bi-question-circle:hover {
        cursor: pointer;
    }

    .codon-form, .results-content {
        background-color: black;
    }

    .form-label {
        font-size: 125%;
    }

    .select2-selection__rendered {
        position: relative;
        top: -9px;
    }

    .select2-selection__arrow {
        display: none !important;
    }

    .select2-container--default .select2-selection {
        border: none !important;
    }

    .select2-selection__placeholder {
        color: black !important;
    }
}