/******************************************************************************
 * 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-white {
    color: #fafafa !important;
}

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

/******************************************************************************
 * 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: #4ab04a;
    background-color: #4ab04a;
}

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

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

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

/******************************************************************************
 * 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 painface mediaquery setup
 *****************************************************************************/

.painFace-img {
    width: 6rem;
    height: 6rem;
}

@media all and (min-width: 810px){
    .painFace-img {
        width: auto; /* 7.6rem;*/
        height: auto; /* 7.6rem; */
    }
}

/******************************************************************************
 * Custom slider styles
 *****************************************************************************/
.slider-pain {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-transition: .2;
    transition: ease-out;
    
    width: 100%;
    height: 13rem;
    border: 1px dotted;
}

@media all and (max-width: 576px) {
    .slider-pain {
        height: 8rem;
    }
}

/*.slider-pain:hover {
    border: none;
}*/

.slider-pain::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 2px;
    height: -webkit-fill-available;
    background: #333539;
    cursor: pointer;
    border: none;
}

.slider-pain::-moz-range-thumb{
    width: 2px;
    height: 100%;
    background: #333539;
    cursor: pointer;
    border: none;
}

.slider-pain::-moz-focus-outer {
    border: 0;
}

.slider-pain:focus {
    outline: none;
}

.slider-bg-cover {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
}

/******************************************************************************
 * 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;
}

/*************************************************************************
 *  SpecialSlider - PAIN EVALUATION, CAS & VAS
 ************************************************************************/
/*.sliderBase {
    background-repeat:no-repeat;
    background-position: center center;
}
.indicator {
    background-image: unquote("linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1))");
    background-color: black;
}*/

/******************************************************************************
 * Specials
 *****************************************************************************/
/*.specialTopSpace {
    height: 3em;
}

@media all and (max-height: 450px) {
    .specialTopSpace {
        height: 0em;
    }
}

.unvisibleButton {
    background-color: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    box-shadow: none;
    border: none;
}

.specialH1 {
    font-weight: normal;
    margin: 0;
    margin-left: 0.5em;
}*/

/******************************************************************************
 * Header's, Content's & Footer's
 *****************************************************************************/

/* HomeView */ 
/*.header {
    padding: 0.6em;
    box-shadow: 0 0 10px 0 rgba(0.0, 0.0, 0.0, 0.4);
}

.homeHeader {
    padding: 0.6em;
}

.content {
    width: 100%;
    max-width: 900px;
}

@media all and (max-width: 768px) {
    .content {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

.footer {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}*/

/******************************************************************************
 * TestArea
 *****************************************************************************/
.test_slider {
    -webkit-appearance: none;
    width: 100%;
    height:25px;
    background: #d3d3d3;
    opacity: 0.7;
    -webkit-transition: .2;
    transition: .2;
}

.test_slider:hover {
    opacity: 1;
}

.test_slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    background: #4caf50;
    cursor: pointer;
}

.test_slider::-moz-range-thumb{
    width: 25px;
    height: 25px;
    background: #4caf50;
    cursor: pointer;
}