/******************************************************************************
 * General CSS
 *****************************************************************************/

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f6f6f6;
    /*overflow-x: hidden;*/
    width: 100%;
}

.showPointerOnHover {
    cursor: pointer;
}

.ninja {
    visibility: hidden;
    display: none;
}

/******************************************************************************
 * Bootstrap4 - Custom CSS overrides
 *****************************************************************************/
.text-primary {
    color: #2c4866 !important;
}

.text-success {
    color: #4ab063 !important;
}

.text-white {
    color: #fafafa !important;
}

/* Safari flex-box quick-fix */
.row:before {
    display: inline-block;
}
.row:after {
    display: inline-block;
}

/* Override light button color */
.btn-light {
    color: #42464a;
    border-color: #e1e6ea;
    background-color: #e1e6ea;
}

/******************************************************************************
 * Bootstrap4 - Custom / additional CSS 
 *****************************************************************************/
.btn-vaadin {
    width: 9rem;
    height: 2.5rem;
}

.btn-vaadin-small {
    height: 2.5rem;
}

.btn-vaadin-big {
    height: 3.25rem;
}

.btn-big {
    width: 18rem;
    height: 3rem;
}

.btn-custom-primary {
    border-color: #2c4866;
    background-color: #2c4866;
}

.btn-custom-success {
    border-color: #4ab063;
    background-color: #4ab063;
}

.btn-custom-success:hover {
    border-color: #65bf65;
    background-color: #65bf65;
}

.bg-custom-primary {
    background-color: #2c4866;
}

.bg-f6 {
    background-color: #f6f6f6;
}

.cursor-pointer {
    cursor: pointer;
}

/******************************************************************************
 * General Mediaquery -- To hide stuff in a dynamic context
 *****************************************************************************/

@media (orientation:landscape) {
    .hide-on-landscape {
        display: none !important;
    }
}

@media (orientation:landscape) and (max-height: 576px) {
    .hide-on-landscape_mobile-only {
        display: none !important;
    }
}

@media (orientation:portrait) {
    .hide-on-portrait {
        display: none !important;
    }
}

/******************************************************************************
 * Custom radiobutton mediaquery setup
 *****************************************************************************/

.custom-radio-btn {
    width: 100%;
}

@media all and (min-width: 768px) {
    .custom-radio-btn {
        width: 16rem;
    }
}

@media all and (max-width: 768px) {
    .custom-radio-btn {
        padding-right: 7rem !important;
        padding-left: 7rem !important;
    }
}

@media all and (max-width: 576px) {
    .custom-radio-btn {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }
}

/******************************************************************************
 * Custom slider styles
 ******************************************************************************

/******************************************************************************
 * Font sizes & Formatting
 *****************************************************************************/
.pt7  { font-size:  7pt; }
.pt8  { font-size:  8pt; }
.pt9  { font-size:  9pt; }
.pt10 { font-size: 10pt; }
.pt11 { font-size: 11pt; }
.pt12 { font-size: 12pt; }
.pt13 { font-size: 13pt; }
.pt14 { font-size: 14pt; }
.pt15 { font-size: 15pt; }
.pt16 { font-size: 16pt; }
.pt17 { font-size: 17pt; }
.pt18 { font-size: 18pt; }
.pt19 { font-size: 19pt; }
.pt20 { font-size: 20pt; }
.pt21 { font-size: 21pt; }
.pt22 { font-size: 22pt; }
.pt23 { font-size: 23pt; }
.pt24 { font-size: 24pt; }
.pt25 { font-size: 25pt; }
.pt26 { font-size: 26pt; }
.pt27 { font-size: 27pt; }
.pt28 { font-size: 28pt; }
.pt29 { font-size: 29pt; }
.pt30 { font-size: 30pt; }

/******************************************************************************
 * Animations
 *****************************************************************************/

@keyframes animation_flyIn {
    from { 
        transform: translateY(0.75rem); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

@keyframes animation_fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes animation_fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.flyIn {
    animation: animation_flyIn ease-out 1s, animation_fadeIn ease-out 1.2s;
}

.fadeIn {
    animation: animation_fadeIn ease-out 1s; 
}

.fadeOut {
    animation: animation_fadeOut ease-out 1s;
}

/******************************************************************************
 * TestArea
 *****************************************************************************/