html{
    scroll-behavior: smooth;
}
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    /*background-image: linear-gradient(-90deg, red, yellow);*/
    background: rgb(65, 88, 208);
    background: linear-gradient(90deg, #4158d0 0%, #6356cc 25%, #8154c8 50%, #a252c4 75%, #c850c0 100%);
}

/* get logo to the right size */
.logo {
    min-height: 44px;
    min-width: 109px;
    width: 14%;
    margin-top: 1%;
    margin-bottom: 1%;
}


/* nice looking button */

a.css {
    max-width: 100%;
    background-color: #FFDC5E;
    color: black;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: 100ms;
    transition-timing-function: ease-in-out;
}

a.css:hover {
    background-color: rgb(224, 193, 82);
    
}

.no-border {
    border: none;
}

.button-style-1 {
    color: #F2EDDF;
    font-size: 130%;
    background-color: rgb(50,69,168);;
    /* Green */
    width: 70%;
    height: 50px;
    border-radius: 25px;
    border: none;
}

.button-style-1:hover {
    background-color: grey;
    color: black;
}

.button-style-2 {
    color: #222;

}

.form-style-1 {
    line-height: 1.5;
    color: #222;
    display: inline-block;
    width: 70%;
    background: white;
    height: 50px;
    border-radius: 25px;
    padding: 0 50px 0 50px
}

.form-style-1::placeholder{
    color: #222;
}

.custom-footer-text {
    color: #F2EDDF;
    padding-top: 1%;
    padding-bottom: 1%;
}

.wrapper-signup {
    margin-top: 8%;
    padding-top: 5%;
    padding-bottom: 5%;
    background: #F2EDDF;
    padding-right: 15%;
    border-radius: 25px;
    padding-left: 15%;
    word-wrap: break-word;
}

.container-form {
    padding-right: 15%;
    padding-left: 15%;
}

.limiter {
    width: 100%;
    margin-right: auto;
    margin-left: auto;

    padding-bottom: 60px;
}

.remove-padding {
    padding-left: 0px;
    padding-right: 0px;
}

h1 {
    font-size: 190%;
}

h3 {
    font-size: 150%;
}

.custom-form-width-1 {
    width: 95%;
}


.sidebar {
    position: fixed;
    z-index: 100;
    /* Behind the navbar */
    /* Height of navbar */
    background-color: #222;
    margin-top: 2%;
    margin-left: 2%;
}

.sidebar-sticky {
    position: relative;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: break-word;
    /* Scrollable contents if viewport is shorter than content. */
}

.navbar-inverse-custom-sidebar {
    background: rgb(61, 69, 167);
    /* background: linear-gradient(90deg, rgba(50,69,168,1) 0%, rgba(80,69,166,1) 25%, rgba(100,65,156,1) 50%, rgba(123,63,149,1) 75%, rgba(140,59,135,1) 100%); */
    margin-bottom: 0;
    border-radius: 25px;
    border: none;
}

.navbar-inverse-custom {
    background: rgb(50,69,168);
    background: linear-gradient(90deg, rgba(50,69,168,1) 0%, rgba(80,69,166,1) 25%, rgba(100,65,156,1) 50%, rgba(123,63,149,1) 75%, rgba(140,59,135,1) 100%);
    margin-bottom: 0;
    border: none;
}

.status {
    color: #F2EDDF;
}

.navbar-inverse .navbar-nav>li>a {
    color: #F2EDDF;
}

.vertical-center {
    min-height: 100%;
    /* Fallback for browsers do NOT support vh unit */
    min-height: 80vh;
    /* These two lines are counted as one :-)       */

    display: flex;
    align-items: center;
}

.welkom-text {
    color: #F2EDDF;
    font-size: 5vw;
    transition: ease-in-out;
    transition-duration: 250ms;
}

.welkom-text:hover {
    font-size: 6vw;
}

#inner {
    display: table;
    margin: 0 auto;
}

#outer {
    width: 100%
}

.clearer {
    height: 0;
    clear: both;
}

.btn-test{
    background-color: rgb(50,69,168);
    color: white;
    border: none;

}

.btn-test:hover {
    background-color: grey;
    color: black;
}

input[type=file] {
    display: inline-block;
}

.red-background{
    background: rgb(190,0,0);
    background: linear-gradient(90deg, rgba(190,0,0,1) 91%, rgba(166,0,0,1) 100%);
}

.button-style-3 {
    color: #F2EDDF;
    font-size: 130%;
    background-color: black;
    /* Green */
    width: 70%;
    height: 50px;
    border-radius: 25px;
    border: none;
}

.button-style-3:hover {
    background-color: black;
    color: red;
}

.btn-primary{
    background-color:rgb(50,69,168);
    color: white;
}

.loginInfo{
    margin:20px;
}