body, html {
    height: 100%;
    font-family: "Century Gothic", "Open Sans", sans-serif;
    font-size:16px;
    background-color: rgb(232,232,232);
}

body.md-dialog-is-showing {
    overflow: visible !important;
}


#mainDiv{
    height:100%;
}

.title_center{
    padding-top: 1vh;
    padding-left:5vw;
    padding-right:5vw;
    text-align: center;
}

.invalid-feedback{
    color:darkred;
}

/*  TOOLBAR */
.toolbarLeftBtns{
}

.toolbarRightBtns{
    position:fixed;
    right:0;
}


/* LOGIN */

.loggedInColor{
    background-color: green;
}
.loggedOutColor{
    background-color: gray;
}

#forgotpasswordbutton{
    background: #2ecc71;
    box-shadow: 0 2px #27ae60;
}

#loginbutton{
    width:100%;
    margin:0;
    padding:0;
}

.login-input {
    position: relative;
    width: 100%;
    position: relative;
    border-bottom: 2px solid #d9d9d9;
    margin-bottom: 35px;
}

.login-data-input {
    font-size: 18px;
    color: #555;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 52px;
    background: 0 0;
    padding: 0 5px;
    outline: none;
    border: none;
}

.login-focus-input {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Webbapp stuff */

.mainbg{
    background-color: rgb(232,232,232);
}

.article_list_item{
     width:200px;
     height:auto;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
    background-color: rgba(183, 214, 241, 0.5);
 }


.game_container:hover {
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
    background-color: rgba(129, 199, 132, 0.5);
}

.game_image_container {
    width:200px;
    height:200px;
}

/* md-stuff.. */

.md-dialog{
    font-family: "Century Gothic", "Open Sans", sans-serif
}

md-dialog{
    text-transform: none;
}
md-dialog md-dialog-content {
    text-transform: none;
}

.confirmText{
    font-size: 20px;
}

.md-button.md-default-theme.md-primary, .md-button.md-primary {
    color: white;
}

.md-title{
    font-size: 28px;
}

md-dialog md-dialog-actions{
    color: black;
    background-color: #466749;
}

h2 {
    font-family: "Century Gothic", "Open Sans", sans-serif
}

.md-button {
    height: 42px;
    font-size: 18px;
}

/* Image stuff */
.uploaded-image{
    width:100%;
    height:auto;
}

/* Extra small devices (phones, less than 768px) */

.container {
    padding-right: 4px;
    padding-right: 4px;
    padding-left: 4px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 767px) {
}

/* Small devices (tablets, 768px and up) */

@media (min-width: 768px){
    .container {
        width: 100%;
    }

}

/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px){
    .container {
        width: 100%;
    }

}

@media (min-width: 1200px) {
    .container {
        width: 100%;
    }
}

/* Animations */

#mainView {
    height: 0px;
    position: relative;
    transition: all 0.4s ease-in-out;
}

.fadePage.ng-enter {
    transform: translateX(100%);
    opacity: 0;
}
.fadePage.ng-enter-active {
    transform: translateX(0);
    opacity: 1;
}
.fadePage.ng-leave {
    transform: translateX(0);
    opacity: 1;
}
.fadePage.ng-leave-active {
    transform: translateX(-100%);
    opacity: 0;
}


#navHome {
    position: fixed;
    z-index: 1000;
    bottom: 0.5em;
    left: 1em;
    background: hsla(80, 30%, 40%, 0.6);
}


/* Role */
.activity_deactivated {
    background-color: rgba(250, 0, 0, 0.25);
}

.activity_not_yet_set {
    background-color: rgba(213, 213, 213, 0.25);
}

.activity_1_day {
    background-color: rgba(162, 255, 143, 0.50);
}
.activity_3_day {
    background-color: rgba(225, 250, 156, 0.5);
}
.activity_7_day {
    background-color: rgba(241, 252, 193, 0.5);
}
.activity_10_day {
    background-color: rgba(250, 245, 222, 0.5);
}

.activity_online {
    background-color: rgba(148, 255, 128, 0.47);
}
.activity_1_minutes {
    background-color: rgba(148, 255, 128, 0.17);
}
.activity_1_hours {
    background-color: rgba(128, 160, 255, 0.13);
}
.activity_1_days {
    background-color: rgba(255, 219, 128, 0.15);
}
.activity_10_days {
    background-color: rgba(255, 219, 128, 0.99);
}


.colorDeaktivated {
    background-color: rgba(241, 122, 122, 0.11);
}
.colorME {
    background-color: rgba(248, 246, 213, 0.17);
    border: rgba(11, 11, 11, 0.39) solid;
}
.colorAdmin {
    background-color: rgba(248, 246, 213, 0.17);
}
.colorUser {
    background-color: white;
}
.colorDemo {
    background-color: white;
}
.colorTest {
    background-color: white;
}



@media (min-width: 1500px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1440px;
    }
    .col-xl-extra {
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 11px;

        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1700px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1640px;
    }
    .col-xl-extra {
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 11px;

        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
}
@media (min-width: 1900px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1840px;
    }
    .col-xl-extra {
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 11px;

        -ms-flex: 0 0 14.2%;
        flex: 0 0 14.2%;
        max-width: 14.2%;
    }
}
@media (min-width: 2100px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 2040px;
    }
    .col-xl-extra {
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 11px;

        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
}
@media (min-width: 2400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 2340px;
    }
    .col-xl-extra {
        position: relative;
        width: 100%;
        padding-right: 0;
        padding-left: 0;

        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }
}