/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Jun 14, 2024, 10:08:46 PM
    Author     : aj
*/



/*-----------------------------------------Designs-------------------------------------------------*/
.Big-Rectangle, .Purple_Square, .Square{
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
     
    
}



.Big-Rectangle{
    width: 200px;
    height: 200px;
    background-color: orange;
    border-radius: 20px;
    
}

.Square{
    width: 100px;
    height: 100px;
    background-color: lightskyblue;
    font-size: 15px;
}






/*      Diamond     */

.Diamond_Container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; 
    margin-top: 20px; 
}

.Diamond {
    position: relative;
    width: 200px; 
    height: 200px; 
    background-color: lightgreen;
    transform: rotate(45deg);
}

.Diamond_words1 {
    position: absolute;
    top: 43%;
    left: 5%;
    
    font-size: 18px; 
    
    text-align: center; 
    background-color: lightgreen;
}

.Diamond_words_2{
    position: absolute;
    top: 43%;
    left: 20%;
    
    font-size: 18px; 
    
    text-align: center; 
    background-color: lightgreen;
    
}
/*      --------------     */





.Purple_Square{
    width: 100px;
    height: 100px;
    background-color: #7e74d1;
    
}













/*--------------------------------------------DEFAULT-------------------------------------------------*/


h3{
    position:relative;
    left: 45%;
    text-decoration: underline;
    font-size: 30px;
}

#flowchart {
    position: relative;
        width: 1600px;
        height: 3000px;
        border: 20px solid black;
   margin-top: 20px;
    
  
}

#flowchart > * {
    position: absolute;
}



/*---------------------------------------------POSITIONING-------------------------------------------------*/

#step-start{
    top: 0%;
        margin-top: 20px;
    left: 40%;
}

#step-homepage{
    top: 10%;
    left: 43%;
    
}

#step-login{
    top: 18%;
    left: 43%;
}

#step-promotion{
    top: 18%;
    left: 80%;
}

#Direction1{    /*Might have to create a container for the words*/
    top: 28%;
    left: 40%;
    
}

#step-Signup{
    top: 30%;
    left:80%;
    
}

#step-Login{
    top: 40%;
    left: 43.2%;
    
}


#step-Credentials{
    top: 40%;
    left: 20%;
}

#step-dashboard{
    top: 48%;
    left: 20%;
    
}

#step-betting{
    top: 48%;
    left: 35%;
    
}

#step-browse{
    top: 48%;
    left: 50%;
    
}





#step-events{
    top: 48%;
    left: 70%;
    
}

#step-event1{
    top: 55%;
    left: 55%;
    
}

#step-event2{
    top: 55%;
    left: 65%;
    
}

#step-event3{
    top: 55%;
    left: 75%;
    
}

#step-event4{
    top: 55%;
    left: 85%;
    
}



#step-BetNOW{
    top: 62%;
    left: 70%;
    
}





#Direction2{
    top: 75%;
    left: 67%;
    
}


#step-Bet1{
    top: 69%;
    left: 50%;
}

#step-Bet2{
    top: 74%;
    left: 50%;
    
}

#step-Bet3{
    top: 79%;
    left: 50%;
    
}

#step-Bet4{
    top: 84%;
    left: 50%;
    
}





#step-place-bet{
    top: 76%;
    left: 34%;
    
}

#step-confirmation{
    top: 76%;
    left: 10%;
}



#step-end{
    top: 60%;
    left: 7%;
}





/*-------------------------------------------------------*/



/*--------------------------Text Box-----------------------------*/

.boxstyle{
    display: inline-block;
    border:2px solid black;
    background-color: white;
    font-size: 20px;
    padding: 5px;
   
}

#box{
    top: 7.5%; 
    left: 40%;
}

#box2{
    top: 18%; 
    left: 53%; 
}

#box3{
    top: 33%; 
    left: 62%;
}

#box4{
    top: 37%; 
    left: 34%;
}

#box5{
    top: 69%; 
    left: 65.3%;
}

#box6{
    top: 78%; 
    left: 23%;
}

#box7{
    top: 10%;
    left: 55%;
}