<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* -------------------- Buttons, hyperstyle buttons, inputstyle buttons, and selection tabs -------------------- */


/* -------------------- Button formatting -------------------- */
.btnSquare{
    border-radius: 0;
}
.btnRoundLite{
    border-radius: 5px;
}
.btnRoundHeavy{
    border-radius: 10px;
}

.disabledBtn:hover{
    cursor: not-allowed;
    background-color: var(--btn2_hover);
}


/* -------------------- CMS Object Buttonstyles -------------------- */


/* ----- Default button style 1 ----- */
.cms_btnStyle_DF{
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;

    width: calc(250px - 40px);
    height: fit-content;

    padding: 10px 20px;
    margin: 10px;

    border-radius: 5px;

    transition: 0.15s ease-in-out;
}


.cms_btnStyle_FT{
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* letter-spacing: 0; */

    width: fit-content;
    max-width: fit-content;

    padding: 10px 1.5em;
    margin: 10px;

    border-radius: 5px;

    transition: 0.15s ease-in-out;
}
.cms_btnStyle_FL{
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    letter-spacing: 0.05em;
    /* letter-spacing: 0; */

    width: calc(100% - 3em);
    /* max-width: fit-content; */

    padding: 10px 1.5em;
    margin: 10px;

    border-radius: 5px;

    transition: 0.15s ease-in-out;
}

/* -------------------- Buttons: Sizes -------------------- */

.cms_btnSize_TI {
    font-size: 12px;
}
.cms_btnSize_SM{
    font-size: 18px;
}
.cms_btnSize_MD{
    font-size: 22px;
}
.cms_btnSize_LG{
    font-size: 26px;
}
.cms_btnSize_VL{
    font-size: 32px;
}

/* -------------------- Buttons: Themes -------------------- */

/* ---------- Button Themes ---------- */
.cms_btnTheme_RD{

    color: white;
    /* box-shadow: 5px 5px 5px -5px darkgray; */
    background-color: red;
    border: red;
    border: 2px solid red;

}
.cms_btnTheme_RD:hover{
    cursor: pointer;
    background-color: #a60000;
    border: 2px solid #a60000;
    /* box-shadow: none; */
}


 /* ----- Catch all for btn class == "None" ----- */
.cms_btnstyle_None{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    font-size: 22px;
    font-weight: 500;
    letter-spacing: 1px;
    flex-wrap: nowrap;

    width: fit-content;
    min-width: 200px; max-width: 300px;
    height: fit-content;

    margin: 10px 20px;
    padding: 10px 20px;

    color: white;
    background-color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: 2px 2px 2px -2px black;

    transition: 0.1s ease-in-out;
}
.cms_btnstyle_None:hover{
    cursor: pointer;
    background-color: var(--primary_dark);
    border: 2px solid var(--primary_dark);
}




/* ----- Selection Squares ----- */
.cms_selectionSquare{

    display: inline-block;
    text-align: center;
    font-size: 52px;
    line-height: 90px;
    user-select: none;

    width: 100px;
    height: 100px;

    margin: auto;

    /* color: var(--btn4);
    border: 4px solid var(--btn4); */
    color: var(--secondary);
    border: 4px solid var(--secondary);
    background-color: white;
    border-radius: 10px;

    box-shadow: 0 0 10px -2px white;


}
.cms_selectionSquare:hover{
    cursor: pointer;
/* 
    color: var(--btn4_hover);
    border: 4px solid var(--btn4_hover); */

    color: var(--secondary_dark);
    border: 4px solid var(--secondary_dark);
    /* background-color: whitesmoke; */
}
.cms_selectionSquare_small{

    display: inline-block;
    text-align: center;
    font-size: 36px;
    line-height: 75px;
    user-select: none;

    width: 75px;
    height: 75px;

    margin: auto; 

    /* color: var(--btn4);
    border: 4px solid var(--btn4); */
    color: var(--primary);
    border: 4px solid var(--primary);
    background-color: white;
    border-radius: 10px;

    box-shadow: 0 0 10px -2px white;


}
.cms_selectionSquare_small:hover{
    cursor: pointer;
    
    /* color: var(--btn4_hover);
    border: 4px solid var(--btn4_hover); */

    color: var(--primary_dark);
    border: 4px solid var(--primary_dark);
    /* background-color: whitesmoke; */
}













/* Buttons and Widgets */
.manageAccountBtn{
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 50px;
    text-decoration: none;

    width: 300px;
    height: 50px;

    margin: 5px 0;

    color: black;
    background-color: white;
    /* border-radius: 50px; */
    border: none;
}
.manageAccountBtn:hover{
    cursor: pointer;

    color: white;
    background-color: #3c3c70;
    border-radius: 0 50px 50px 0;
}
.manageAccountBtnSelected{
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 50px;
    text-decoration: none;

    width: 300px;
    height: 50px;

    margin: 5px 0;

    color: white;
    background-color: #3c3c70;
    border: 1px solid #3c3c70;
    border-radius: 0 50px 50px 0;
}
.inputBtnStyle2{
    font-size: large;
    line-height: 30px;
    font-weight: 550;
    text-decoration: none;
    text-align: center;

    width: 100px;
    height: 40px;

    margin: 0;
    padding: 0;

    color: white;
    background-color: var(--btn1);
    border: 2px solid var(--btn1);
    border-radius: 5px;
    transition: 0.2s ease-in-out;
}
.inputBtnStyle2:hover{
    cursor: pointer;
    background-color: var(--btn1_hover);
    border: 2px solid var(--btn1_hover);
}


.selectionTab1{
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18px;

    width: 200px;
    height: 40px;

    margin: 5px 10px;

    background-color: white;
    
    color: black;
    border: 2px solid var(--btn2);
    border-radius: 20px;
}
.selectionTab1:hover{
    cursor: pointer;
    background-color: whitesmoke;
}
.selectedTab1{
    background-color: var(--btn2);
    color: white;
}
.selectedTab1:hover{
    background-color: var(--btn2_hover);
}

</pre></body></html>