/*----- Imports styling variables -----*/
@import 'Variables.css';

/*----- Elements -----*/
/*.primaryButton, .primaryButtonSmall, .secondaryButton, .secondaryButtonSmall, .returnButton, .returnButtonSmall, .deleteButton, .deleteButtonSmall,
.skipButton, .skipButtonSmall, .continueButton, .continueButtonSmall, .continueButtonDef, .approveButton, .approveButtonSmall, .approveButtonDef,
.rejectButton, .rejectButtonSmall, .calculateButton, .calculateButtonSmall, .resetButton, .resetButtonSmall, .subMenuButtonDef*/

.primaryButton, .secondaryButton, .returnButton, .deleteButton, .skipButton, .continueButton, .approveButton, .rejectButton, .calculateButton, .resetButton,
.continueButtonDef, .approveButtonDef,
.continueButtonImportant,
.primaryButtonSmall, .secondaryButtonSmall, .returnButtonSmall, .deleteButtonSmall, .skipButtonSmall, .continueButtonSmall, .approveButtonSmall, .rejectButtonSmall, .calculateButtonSmall, .resetButtonSmall,
.primaryButtonSubMenu, .secondaryButtonSubMenu, .returnButtonSubMenu, .deleteButtonSubMenu, .skipButtonSubMenu, .continueButtonSubMenu, .approveButtonSubMenu, .rejectButtonSubMenu, .calculateButtonSubMenu, .resetButtonSubMenu,
.subMenuButtonDef, .mainMenuButtonDef,
.primaryButtonMainMenu, .secondaryButtonMainMenu, .returnButtonMainMenu, .deleteButtonMainMenu, .skipButtonMainMenu, .continueButtonMainMenu, .approveButtonMainMenu, .rejectButtonMainMenu, .calculateButtonMainMenu, .resetButtonMainMenu
{
    color: var(--colTextButDef, white);
    font-size: var(--sizeFontButtonDef, 14px);
    font-family: var(--typeFontMainButDef, 'franklin_gothic_medium_condRg', Verdana);
    font-weight: var(--weightFontButtonMain, 400);
    border: none;
    border-radius: var(--radBordButtonDef, 0px);
    cursor: pointer;
}

.primaryButton, .primaryButtonSmall, .primaryButtonSubMenu, .primaryButtonMainMenu {
    background-color: var(--colDefMain, #0e5ab7);
}
    .primaryButton:hover, .primaryButtonSmall:hover, .primaryButtonSubMenu:hover, .primaryButtonMainMenu:hover {
        background-color: var(--colDefMainHover, #1067d1);
    }
    .primaryButton:active, .primaryButtonSmall.active, .primaryButtonSubMenu:active, .primaryButtonMainMenu:active {
        background-color: var(--colDefMainActive, #0d54ab);
    }

.secondaryButton, .secondaryButtonSmall, .secondaryButtonSubMenu, .secondaryButtonMainMenu {
    background-color: var(--colDefAlt, #0091f8);
}
    .secondaryButton:hover, .secondaryButtonSmall:hover, .secondaryButtonSubMenu:hover, .secondaryButtonMainMenu:hover {
        background-color: var(--colDefAltHover, #149dff);
    }
    .secondaryButton:active, .secondaryButtonSmall:active, .secondaryButtonSubMenu:active, .secondaryButtonMainMenu:active {
        background-color: var(--colDefAltActive, #0083e0);
    }

.returnButton, .returnButtonSmall, .returnButtonSubMenu, .returnButtonMainMenu {
    background-color: var(--colButReturn);
}
    .returnButton:hover, .returnButtonSmall:hover, .returnButtonSubMenu:hover, .returnButtonMainMenu:hover {
        background-color: var(--colButReturnHover);
    }
    .returnButton:active, .returnButtonSmall:active, .returnButtonSubMenu:active, .returnButtonMainMenu:active {
        background-color: var(--colButReturnActive);
    }

.deleteButton, .deleteButtonSmall, .deleteButtonSubMenu, .deleteButtonMainMenu {
    background-color: var(--colButDelete);
}
    .deleteButton:hover, .deleteButtonSmall:hover, .deleteButtonSubMenu:hover, .deleteButtonMainMenu:hover {
        background-color: var(--colButDeleteHover);
    }
    .deleteButton:active, .deleteButtonSmall:active, .deleteButtonSubMenu:active, .deleteButtonMainMenu:active {
        background-color: var(--colButDeleteActive);
    }

.skipButton, .skipButtonSmall, .skipButtonSubMenu, .skipButtonMainMenu, .skipButtonMainMenu {
    background-color: var(--colButSkip);
}
    .skipButton:hover, .skipButtonSmall:hover, .skipButtonSubMenu:hover, .skipButtonMainMenu:hover {
        background-color: var(--colButSkipHover);
    }
    .skipButton:active, .skipButtonSmall:active, .skipButtonSubMenu:active, .skipButtonMainMenu:active {
        background-color: var(--colButSkipActive);
    }

.continueButton, .continueButtonSmall, .continueButtonDef, .continueButtonSubMenu, .continueButtonMainMenu {
    background-color: var(--colButContinue);
}
    .continueButton:hover, .continueButtonSmall:hover, .continueButtonDef:hover, .continueButtonSubMenu:hover, .continueButtonMainMenu:hover {
        background-color: var(--colButContinueHover);
    }
    .continueButton:active, .continueButtonSmall:active, .continueButtonDef:active, .continueButtonSubMenu:active, .continueButtonMainMenu:active {
        background-color: var(--colButContinueActive);
    }

.approveButton, .approveButtonSmall, .approveButtonDef, .approveButtonSubMenu, .approveButtonMainMenu {
    background-color: var(--colButApprove);
}
    .approveButton:hover, .approveButtonSmall:hover, .approveButtonDef:hover, .approveButtonSubMenu:hover, .approveButtonMainMenu:hover {
        background-color: var(--colButApproveHover);
    }
    .approveButton:active, .approveButtonSmall:active, .approveButtonDef:active, .approveButtonSubMenu:active, .approveButtonMainMenu:active {
        background-color: var(--colButApproveActive);
    }

.rejectButton, .rejectButtonSmall, .rejectButtonSubMenu, .rejectButtonMainMenu {
    background-color: var(--colButReject);
}
    .rejectButton:hover, .rejectButtonSmall:hover, .rejectButtonSubMenu:hover, .rejectButtonMainMenu:hover {
        background-color: var(--colButRejectHover);
    }
    .rejectButton:active, .rejectButtonSmall:active, .rejectButtonSubMenu:active, .rejectButtonMainMenu:active {
        background-color: var(--colButRejectActive);
    }

.calculateButton, .calculateButtonSmall, .calculateButtonSubMenu, .calculateButtonMainMenu {
    background-color: var(--colButCalculate);
}
    .calculateButton:hover, .calculateButtonSmall:hover, .calculateButtonSubMenu:hover, .calculateButtonMainMenu:hover {
        background-color: var(--colButCalculateHover);
    }
    .calculateButton:active, .calculateButtonSmall:active, .calculateButtonSubMenu:active, .calculateButtonMainMenu:active {
        background-color: var(--colButCalculateActive);
    }

.resetButton, .resetButtonSmall, .resetButtonSubMenu, .resetButtonMainMenu {
    background-color: var(--colButReset);
}
    .resetButton:hover, .resetButtonSmall:hover, .resetButtonSubMenu:hover, .resetButtonMainMenu:hover {
        background-color: var(--colButResetHover);
    }
    .resetButton:active, .resetButtonSmall:active, .resetButtonSubMenu:active, .resetButtonMainMenu:active {
        background-color: var(--colButResetActive);
    }

.textSize16 {
    font-size: 16px;
}
.textSize10 {
    font-size: var(--sizeTextSmallDef);
}
.sizeFontButtonMain {
    font-size: var(--sizeFontButtonMain);
}

.fontTypeButAlt {
    font-family: var(--typeFontAltButDef)
}

/*Default elements with important colours*/
.continueButtonImportant {
    background-color: var(--colButContinue);
    color: var(--colTextButDef, white) !important;
    font-size: var(--sizeFontButtonDef, 14px);
    font-family: var(--typeFontMainButDef, 'franklin_gothic_medium_condRg', Verdana);
    font-weight: var(--weightTextDef, 400);
    border: none;
    border-radius: var(--radBordButtonDef, 0px);
    cursor: pointer;
}

    .continueButtonImportant:hover {
        background-color: var(--colButContinueHover) !important;
    }

    .continueButtonImportant:active {
        background-color: var(--colButContinueActive) !important;
    }

/*Smaller default buttons*/
.primaryButtonSmall, .secondaryButtonSmall, .returnButtonSmall, .deleteButtonSmall, .skipButtonSmall, .continueButtonSmall, .approveButtonSmall, 
.rejectButtonSmall, .calculateButtonSmall, .resetButtonSmall {
    height: 24px;
    width: 110px;
    padding: 1px 6px;
    font-size: var(--sizeFontButtonSmall, 11px);
    vertical-align: middle;
}

/*Sub Menu buttons*/
.subMenuButtonDef, .primaryButtonSubMenu, .secondaryButtonSubMenu, .returnButtonSubMenu, .deleteButtonSubMenu, .skipButtonSubMenu, .continueButtonSubMenu,
.approveButtonSubMenu, .rejectButtonSubMenu, .calculateButtonSubMenu, .resetButtonSubMenu {
    height: 35px;
    width: 110px;
    padding: 1px 6px;
    font-size: var(--sizeFontButtonDef, 16px);
}

/*Main Menu buttons*/
.mainMenuButtonDef, .primaryButtonMainMenu, .secondaryButtonMainMenu, .returnButtonMainMenu, .deleteButtonMainMenu, .skipButtonMainMenu, .continueButtonMainMenu,
.approveButtonMainMenu, .rejectButtonMainMenu, .calculateButtonMainMenu, .resetButtonMainMenu {
    height: 35px;
    width: 130px;
    padding: 1px 6px;
    font-size: var(--sizeFontButtonMain);
    text-transform: uppercase;
}

/*Drop down*/
.dropDownButton {
    background-color: var(--colDefMain, #0e5ab7);
    color: var(--colTextButDef, white);
    font-size: var(--sizeFontDDSelBut);
    font-family: var(--typeFontMainButDef);
    font-weight: var(--weightTextDef, 400);
    border: none;
}
    .dropDownButton:hover {
        background-color: var(--colDefMainHover, #1067d1);
    }

    .dropDownButton:active {
        background-color: var(--colDefMainActive, #0d54ab);
    }