.details{
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 200px;
}
.supportingDoc{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2vw;
    margin-top: 20px;
}
.borderSupport{
    height: 10vw;
    width: 100%;
    border: 1px solid grey;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.borderSupport:hover{
    height: 10vw;
    width: 100%;
    border: 1px solid rgb(90, 87, 87);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition:0.5s ease-out;
}
#fileImage{
    font-size: 40px;
    text-align: center;

}
#fileImage:hover{
    font-size: 40px;
    text-align: center;
    color: rgb(90, 87, 87);
    transition:0.5s ease-out;
}


h2{ 
    color:   #3B71CA; 
} 
#form { 
    text-align: center; 
    position: relative; 
    margin-top: 20px;
    background-color:transparent;
} 
  
#form fieldset { 
    background: white; 
    border: 0 none; 
    border-radius: 0.5rem; 
    box-sizing: border-box; 
    width: 100%; 
    margin: 0; 
    padding-bottom: 20px; 
    position: relative
} 
  
.finish { 
    text-align: center
} 
  
#form fieldset:not(:first-of-type) { 
    display: none
} 
  
#form .previous-step, .next-step { 
    width: 100px; 
    font-weight: bold; 
    color: white; 
    border: 0 none; 
    border-radius: 0px; 
    cursor: pointer; 
    padding: 10px 5px; 
    margin: 10px 5px 10px 0px; 
    float: right;
     border-radius: 10px;
    height: 40px;
    width: 80px;
} 
  
.form, .previous-step { 
    background: #616161; 
} 
  
.form, .next-step { 
    background:   #3B71CA; 
    border-radius: 10px;
    height: 40px;
    width: 80px;
} 
  
#form .previous-step:hover, 
#form .previous-step:focus { 
    background-color:  #616161; 
     border-radius: 10px;
    height: 40px;
    width: 80px;
} 
  
#form .next-step:hover, 
#form .next-step:focus { 
    background-color:   #3B71CA
} 
  
.text { 
    color:   #3B71CA; 
    font-weight: normal;
    z-index: 1;
} 
  
#progressbar { 
    margin-bottom: 60px; 
    overflow: hidden; 
    color: lightgrey;
    z-index: -100;
} 
  
#progressbar .active { 
    color:  #3B71CA
} 
  
#progressbar li { 
    list-style-type: none; 
    font-size: 15px; 
    width: 25%; 
    float: left; 
    position: relative; 
    font-weight: 400
} 
  
#progressbar #step1:before { 
    content: "1";
    width:40px;
    height: 40px;
} 
  
#progressbar #step2:before { 
    content: "2";
    width:40px;
    height: 40px;
} 
  
#progressbar #step3:before { 
    content: "3";
    width:40px;
    height: 40px;
} 
  
#progressbar #step4:before { 
    content: "4";
    width:40px;
    height: 40px;
} 
#progressbar #step5:before { 
    content: "5";
    width:40px;
    height: 40px;
}
#progressbar #step6:before { 
    content: "6";
    width:40px;
    height: 40px;
}
#progressbar #step7:before { 
    content: "7";
    width:40px;
    height: 40px;
}
.wrapStep{
    flex-wrap: wrap;
}
#adjustProgress{
    width: 100%;
}
  
#progressbar li:before { 
    width: 50px; 
    height: 50px; 
    line-height: 45px; 
    display: block; 
    font-size: 20px; 
    color: #ffffff; 
    background: lightgray; 
    border-radius: 50%; 
    margin: 0 auto 10px auto; 
    padding: 2px
} 
  
#progressbar li:after { 
    content: ''; 
    width: 100%; 
    height: 2px; 
    background: lightgray; 
    position: absolute; 
    left: 0; 
    top: 25px; 
    z-index: -1
} 
  
#progressbar li.active:before, 
#progressbar li.active:after { 
    background:   #3B71CA
} 
  
.progress { 
    height: 20px;
    background-color: transparent; 
} 
  
.progress-bar { 
    background-color:  #3B71CA
}

#modalC{
    background-color: white !important;
}
#textAreaR{
    width: 30vw;
    height: 200px;
   
    border-radius: 10px;
    padding: 10px;
}
#colArrange{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20vw;
}
#sButton{
    width: 100%;
}
#alignS{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 400px;
}
.ASuppliers{
    font-size: 20px;
}
.createSettingsCard{
    border: 1px solid #737f91;
    /* border-bottom-right-radius: 50px; */
    border-radius: 5px;
    padding: 30px;
    margin-top: 50px;
    display: flex;
    flex-direction: row;  
    align-items: center;
    justify-content: space-around;
    gap: 80px;  
}
.sysName{
    color: white;
    font-size: 17px;
    font-weight: 600;
    background-color: #619cfb;
    padding: 20px;
    /* border-radius: 10px; */
    /* border-bottom-right-radius:15px; */
  
}

#logContainer .sysName{
    color: white;
    font-size: 17px;
    font-weight: 600;
    background-color: #619cfb;
    padding: 20px;
    width: 100%;
    /* border-radius: 10px; */
    /* border-bottom-right-radius:15px; */
  
}
#logContainer{
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: center;
    justify-content: space-between;
}
#myTablelog1{
    border: 1px solid #737f91;
    border-radius: 10px;
    padding: 10px;
}
#foot{
    position:relative;
    top: 350px;
}
h3{
    color: white;
}