/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}


* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
}

#regForm {
    background-color: #ffffff;
    margin: 100px auto;
    font-family: Raleway;
    padding: 40px;
    width: 70%;
    min-width: 300px;
}

h1 {
    text-align: center;
}

input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
    display: none;
}

button {
    background-color: #04AA6D;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer;
}

button:hover {
    opacity: 0.8;
}

#prevBtn {
    background-color: #bbbbbb;
}

input {
    text-transform: uppercase;
}

.validation-message {
    color: #e50000;
}

.arrow-down{
    width:60px;
    height:40px;
    margin:0 0 0 -30px;
    position:fixed;
    left:50%;
    bottom:0;
    -webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
    z-index:1000;

}

.arrow-down:hover{
    -webkit-animation-play-state: paused;
}

.left{
    position:absolute;
    height:10px;
    width:40px;
    background:black;
    -webkit-transform:rotate(240deg);
    top:10px;
    left:10px;
    -webkit-border-radius:4px;
    -webkit-transform-origin:5px 50%;
    -webkit-animation: leftArrow 0.5s 1s infinite ease-out alternate;
}

.right{
    position:absolute;
    height:10px;
    width:40px;
    background:black;
    -webkit-transform:rotate(-60deg);
    top:10px;
    left:10px;
    -webkit-border-radius:4px;
    -webkit-transform-origin:5px 50%;
    -webkit-animation: rightArrow 0.5s 1s infinite ease-out alternate;
}

.dense-table-cell {
    padding: 2px 10px 2px 2px !important;
}



@-webkit-keyframes arrow{
    0% {
        bottom:0px;
    }
    100%{
        bottom:40px;
    }
}


@-webkit-keyframes leftArrow{
    0% {
    }
    100%{
        -webkit-transform:rotate(225deg);
    }
}

@-webkit-keyframes rightArrow{
    0% {
    }
    100%{
        -webkit-transform:rotate(-45deg);
    }
}