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

body {
    background-color: #efefef;
    font-family: "Open Serif";
    line-height: 1.5em;
    box-shadow: 0 50vh 0 50vh #efefef;
}

.showPointerOnHover {
    cursor: pointer;
}

/******************************************************************************
 * General Mediaquery -- Desktop only & mobile only stuff
 *****************************************************************************/

@media all and (max-width: 638px) {
    .mobilePortraitHidden {
        visibility: hidden;
        display: none;
    }
}

@media all and (min-width: 639px) {
    .mobilePortraitHiddenInverse {
        visibility: hidden;
        display: none;
    }
}

@media all and (max-width: 768px), all and (max-height: 450px) {
    .mobileHidden {
        visibility: hidden;
        display: none;
    }
}

@media all and (min-width: 768px) {
    .desktopHidden {
        visibility: hidden;
        display: none;
    }
}

@media all and (max-height: 900px) {
    .smallDesktopHidden {
        visibility: hidden;
        display: none;
    }
}

/******************************************************************************
 * Text, Paragraphs & Headlines
 *****************************************************************************/
.p {
    text-align: center;
    font-size: 11pt;
    color: #595959;
    font-family: "Open Serif";
}

.p_left {
    text-align: left;
    font-size: 11pt;
    font-family: "Open Serif";
}

.h {
    text-align: center;
    color: #696969;
    font-family: "Open Serif";
}

.t {
    text-align: center;
    color: #595959;
    font-family: "Open Serif";
}

@media all and (min-width: 768px) {
    .p {
        max-width: 500px;
    }
}

/******************************************************************************
 * Primary Setup
 *****************************************************************************/

.mainColor {
    color: #9B3B4D;
}

.backgroundMainColor {
    background-color: #9B3B4D;
}

.buttonMain {
    background-color: #9B3B4D;
    color: white;
    cursor: pointer;
}

.buttonMain:hover {
    background-color: #ce7e8c;
}

.buttonMain:active {
    background-color: #dca3ad;
}

/* Hover in same color as main*/
.button_grey:hover {
    color: #9B3B4D;
    border: 2px solid #9B3B4D;
    background-color: #e4e5e7;
}

/******************************************************************************
 * Colors
 *****************************************************************************/

.blue {
    color: #2c4866;
}

.blue2 {
    color: #2c4866;
}

.backgroundBlue {
    background-color: #2c4866;
}

.green {
    color: #4ab063;
}

.backgroundGreen {
    background-color: #4ab063;
}

.grey {
    color: #696969;
}

.backgroundGrey {
    background-color: #efefef;
}

.grey2 {
    color: #595959;
}

.white {
    color: #ffffff;
}

.backgroundWhite {
    background-color: #ffffff;
}

.white2 {
    color: #fafafa;
}

.backgroundWhite2 {
    background-color: #fafafa;
}

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

.bold { font-weight: bold; }
.italic { font-style: italic; }
.textCenter { text-align: center; }

.noMargin { margin: 0; }
.noPadding { padding: 0; }
.padding { padding: 1em; }

.flexPadding { 
    padding-top: 1em; 
    padding-bottom: 1em;
}

.flexBox {
    flex-flow: row wrap;
    justify-content: space-around;
}

.roundCorners {
    border-radius: 0.5em;
}

.border_dotted {
    border: 1px dotted
}

/******************************************************************************
 * Buttons
 *****************************************************************************/

/* ----------------------------------- */

.buttonBlue {
    /*background-color: #4a78b1;*/
    background-color: #2c4866;
    color: white;
    cursor: pointer;
}

.buttonBlue:hover {
    /*background-color: #81a2ca;*/
    background-color: #4d7eb3;
}

.buttonBlue:active {
    /*background-color: #a5bdd9;*/
    background-color: #7098c2;
}

/* ----------------------------------- */

.buttonBlue2 {
    background-color: #2c4866;
    color: white;
    cursor: pointer;
}

.buttonBlue2:hover {
    background-color: #4d7eb3;
}

/* ----------------------------------- */

.buttonGreen {
    background-color: #4ab04a;
    color: white;
    cursor: pointer;
}

.buttonGreen:hover {
    background-color: #5dbb5d;
}

.buttonGreen:active {
    background-color: #a5d9a5;
}

.buttonGreen_disabled {
    background-color: #c5c2c2;
}

/* ----------------------------------- */

.buttonRed {
    background-color: #9B3B4D;
    color: white;
    cursor: pointer;
}

.buttonRed:hover {
    background-color: #ce7e8c;
}

.buttonRed:active {
    background-color: #dca3ad;
}

/* ----------------------------------- */

.button_base_simple {
    color: #595959;
    box-shadow: none;
    border: 1px dashed #595959; 
    background-color: transparent;
}

.button_base_simple:hover {
    color: #404040;
}

.button_base_simple_disabled {
    color: #a8a8a8;
    border: none;
}

.button_base_simple_inVisible {
    color: rgba(0.0, 0.0, 0.0, 0.0);
    border: none;
}

/* ----------------------------------- */

.button_grey {
    color: #0b1b2b;
    border: 2px solid #d6d8db; /*#e5e6e8*/
    background-color: #d6d8db;
}

/*.button_grey:hover {
    color: #2c4866;
    border: 2px solid #2c4866;
    background-color: #e4e5e7;
}*/

.button_grey:active {
    background-color: #f1f2f3;
}

.button_fallback {
    border: 2px solid #ffd6d6;
    background-color: #ffd6d6;
    color: #0b1b2b;
}

.button_pushed {
    border: 2px solid #c77d26;
    background-color: #c77d26;
    color: #fafafa;
}

.button_pushed_inverted {
    border: 2px solid #3781d9;
    background-color: #3781d9;
    filter: invert(1);
}

.button_pushed_inverted:hover {
    border: 2px solid #3781d9;
    background-color: #3781d9;
}

/* ----------------------------------- */

/******************************************************************************
 * HR - Seperators
 *****************************************************************************/

.hr {
    border: 0;
    height: 1px;
    width: 100%;
    margin-top: 1em;
    /*background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));*/
    background-color: white;
}

.hr2 { 
    border: 0; 
    height: 1px; 
    /*background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));*/
    /*background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #696969, rgba(0, 0, 0, 0));*/
    background-color: #b3b3b3;
}

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

@keyframes animation_flyIn {
    from { margin-top: 1.5em; }
    to { margin-top: 0.5em; }
}

@keyframes animation_flyIn2 {
    from { padding-top: 1.0em; }
    to { padding-top: 0.0em; }
}

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

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

.anim_flyAndFade2 {
    animation: animation_flyIn2 ease-out 1s, animation_fadeIn ease-out 1.2s;
}

.anim_fadeIn {
    animation: animation_fadeIn 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;
}