/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Oct 13, 2023, 11:06:28 PM
    Author     : AllyCat
*/

@font-face {

    font-family: OswaldLight;
    src: url(../CSSFonts/Oswald-Light.ttf);
}

@font-face {

    font-family: NunitoSans;
    src: url(../CSSFonts/NunitoSans_10pt-Light.ttf);
}

@font-face {

    font-family: KanitLight;
    src: url(../CSSFonts/Kanit-Light.ttf);
}

.polygon-enter-active {
    animation: 1s polygon reverse;
}
.polygon-leave-active {
    animation: 1s polygon;
}

@keyframes polygon {
    0% {
        clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
    }
    100% {
        clip-path:  polygon(50% 50%, 50% 25%, 50% 50%, 75% 50%, 50% 50%, 50% 75%, 50% 50%, 25% 50%);
    }
}

.PageTitleBlock{
    background-color: #efe370;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23020006' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    border-bottom: 1px black solid;
    padding: 10px;
    overflow: auto;
}

#Large_Table_PageTitle h1,
#Large_Table_PageTitle div,
#Large_Table_PageTitle h3{
    margin: 0px;
}

.Section_MainContentParent{
    background: linear-gradient(#F0E65F, #D3B000);
    border-bottom: 1px #685001 solid;
    margin: 0px;
}

.Section_MainContent{
    padding-top:50px;
    padding-bottom:50px;
    margin-left: auto;
    margin-right: auto;

}

.Section_MainContent h2 {
    margin: 0px;
    font-family: OswaldLight;
}

.Section_MainContent p {
    margin: 0px;
    font-family: NunitoSans;
    font-size: 20px;
}

#LargeProfileMainBannerBox{

    width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;

}

#Large_Table_PageIntro {
    margin: auto;
    width: 60%;
}

#Large_Table_PageIntro p {

    font-family: NunitoSans;
    font-size: 20px;
    margin: 0px;

}

#Large_Table_PageIntro h2 {
    text-align: center;
    margin: 0px;
    text-decoration: underline;
    padding-bottom: 10px;

}

#LargeProfileQuoteBox{
    border-left: 10px black solid;
    width: 650px;
    margin: auto;
}

#LargeProfileQuoteBox h1{
    margin-left: 15px;
    font-family: OswaldLight;
    font-size: 60px;
}

#ProfilePageTitleGraphicBox{
    width: 30px;
    height: 30px;
}

#LargeBottomCTABox h1
{
    margin: 0px;
}

.Section_BottomCTAParent{
    background-color: #efc90a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23020006' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    border-bottom: 1px black solid;
    width: 100%;
}

#LargeBottomCTABox{
    padding-bottom: 50px;
    padding-top: 50px;
    width: 40%;
    margin: auto;
}

.bottomCTAGetStartedCenterLink{
    width: 110px;
    display: block;
    margin: auto;
}

.bottomCTAContactCenterLink{
    width: 80px;
    display: block;
    margin: auto;
}

.centerTitle{
    text-align: center;
}

#LargeGetStartedContentSet{
    margin-bottom: 5px;
}

#LargeProfileContentArea{
    border: 1px black solid;
    padding: 10px;
    background-color: #DAB727;
    width: 60%;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

#LargeProfileContentMainGraphicBox{
    width: 50px;
    height: 50px;
    margin: auto;
}

#LargeProfileContentAreaItems{
    background-color: #e5c630;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.13'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    margin: auto;
    width: 90%;
    border-radius: 5px;
    border: 1px #727201 solid;
    padding: 10px;
}

#LargeProfileContentAreaMainTitle{
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: underline;
}

.profileContentAreaItemBox{
    width: 225px;
    margin: auto;
    border-bottom: 1px black dotted;
}

.pEdit{
    color: #046499;
}

.pEdit:hover{
    text-decoration: underline;
}

#ProfileContentAreaItemsFirstNameBox,
#ProfileContentAreaItemsLastNameBox,
#ProfileContentAreaItemsAddressBox,
#ProfileContentAreaItemsUsernameBox,
#ProfileContentAreaItemsEmailBox,
#ProfileContentAreaItemsPwdBox
{
    width: 30px;
    height: 30px;
}

#LargeProfileUpdateBtn{
    margin-top: 10px;
    margin-bottom: 10px;
}

#LargeProfileAreaLoginBtn,
#LargeProfileContentUpdateBtn
{
    background: linear-gradient(#F7A005, #F7C305);
    border: 1px black solid;
    border-radius: 2px;
    padding: 5px;
    font-size: 20px;
    font-family: KanitLight;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#LargeProfileAreaLoginBtn:hover,
#LargeProfileContentUpdateBtn:hover{

    background: linear-gradient(#E58E03, #E2AD03);
    text-decoration: underline;

}

#LargeProfileAreaLoginBtn:active,
#LargeProfileContentUpdateBtn:active{

    background: linear-gradient(#BA6A02, #C49605);

}

#LargeProfileContentUpdateBox{
    margin: auto;
    width: 30px;
    height: 30px;
}

#LargeFirstNameBox,
#LargeLastNameBox,
#LargeAddressBox,
#LargeUsernameBox,
#LargeEmailBox,
#LargePwdBox{
    padding-top: 10px;
    padding-bottom: 10px;
}

#LargeProfileAreaLoginBox{
    width: 30px;
    height: 30px;
    margin: auto;
}

#LargeProfileAreaLoginBtn{
    margin-bottom: 10px;

}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    background-color: #EDF794;
}

input:autofill {
    background-color: #EDF794;

}

input:-webkit-autofill {
    background-color: #EDF794;

}

#Large_ProfileContentLogin_Username,
#Large_ProfileContentLogin_Password{
    font-size: 20px;
    width: 200px;
    height: 20px;
    border: 1px black solid;
    border-radius: 10px;
    padding: 10px;
    background-color: #EDF794;
    font-family: NunitoSans;

}

#Large_ProfileContentLogin_Username:focus,
#Large_ProfileContentLogin_Password:focus{
    background-color: #EDF794;

}

#Large_ProfileContentLogin_Username{
    margin-bottom: 3.5px;
}

#Large_ProfileContentLogin_UsernameBox,
#Large_ProfileContentLogin_PasswordBox{
    width: 200px;
}

#LargeProfileLoginContainer{
    border: 1px black solid;
    border-radius: 10px;
    background-color: #C9A81F;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 10px;
}

#LargeProfileContentLoginCloseBox{
    width: 30px;
    height: 30px;
    margin: auto;
}
#LargeProfileLoginCloseBtn{
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    border: 1px black solid;
    border-radius: 10px;
    background-color: goldenrod;
}

#LargeProfileLoginGoBtn{
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5px;
    border: 1px black solid;
    border-radius: 10px;
    background-color: goldenrod;
}

#LargeProfileLoginCloseBtn:hover,
#LargeProfileLoginGoBtn:hover{
    background-color: #E6B400;
}

#LargeProfileLoginCloseBtn:active,
#LargeProfileLoginGoBtn:active{
    background-color: #E6CC00;
}

#LargeProfileContentLoginGoBox{
    width: 30px;
    height: 30px;
}

#LargeProfileContentLoginUserBox{
    width: 25px;
    height: 25px;
    border: 1px black solid;
    background-color: #EDF794;
    border-radius: 10px;
    padding: 5px;
    margin: 0px;
}

#LargeProfileContentLoginPwdBox{
    width: 25px;
    height: 25px;
    border: 1px black solid;
    background-color: #EDF794;
    border-radius: 10px;
    padding: 5px;
}

#Large_Label_LoginUsername,
#Large_Label_LoginPassword{
    margin: 0px;
    text-align: center;
}
/* Profile Components Layout Queries:  */

@media only screen and (min-width: 1008px) {

    #LargeProfileLayout{
        display: block;
    }

    #MediumProfileLayout{
        display: none;
    }

    #SmallProfileLayout{
        display: none;
    }

}

@media only screen and (min-width: 641px) and (max-width: 1007.99px) {

    #LargeProfileLayout{
        display: none;
    }

    #MediumProfileLayout{
        display: block;
    }

    #SmallProfileLayout{
        display: none;
    }

}

@media only screen and (max-width: 640.99px) {

    #LargeProfileLayout{
        display: none;
    }

    #MediumProfileLayout{
        display: none;
    }

    #SmallProfileLayout{
        display: block;
    }

}

#LargeProfileLoginArea{
    display: none;
}

#LargeProfileContentAreaItems h3{
    font-family: OswaldLight;
    margin: 0px;
    
}

#LargeProfileContentAreaItems input{
    font-size: 20px;
    padding: 10px;
    width:200px;
    height: 20px;
    border: 1px black solid;
    border-radius: 5px;
    background-color: #EDF794;
    font-family: NunitoSans;
}

#Large_LoginFeedback_Box{
    width: 300px;
    margin: auto;
}

#Large_UpdateForm_ItemsBox{
    width: 300px;
    margin: auto;
}

#Large_UpdateUser_FeedbackBox{
    width:250px;
    margin: auto;
}

.twentyFiveX25px{
    width: 25px;
    height: 25px;
}



@media only screen and (max-width: 1007.99px) {
}

@media only screen and (max-width: 300px) {
}