/* CSS styling */
html, body {
    margin: 0;
    height: 100vh;
}

/* HEADER  */
header {
	border-bottom: 2px solid #D9DADB;
    height: 80px;
    position: relative;
    width: 100%;
    z-index: 2;
}

header .logo {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../../images/PlayerXP-Logo-Main-Web.png"); /* url to images from this DIR is ../../images/ */
    background-repeat: no-repeat;
    background-size: contain;
    margin: 20px 20px;
    cursor: pointer;
    width: 25%;
}

/* Temp styling */
.error {
    border: 2px solid red; /* INDICATES WEAK PASSWORD IN PASSWORD FIELD */
}

/* JQuery UI icon */
.ui-icon {
    cursor: pointer;
}

.int-exp-btn{
    background-image: url("../../images/int-exp-icon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    width: 21px;
    height: 16px;
    margin:auto;
}


/* FontAwesome & Toxicity */
.abusive-icon:before { content: '\e549'; }
.anti-christian-icon:before { content: '\f654'; }
.anti-semitism-icon:before { content: '\f69a'; }
.homophobia-icon:before { content: '\f227'; }
.identity-attack-icon:before { content: '\f7a9'; }
.islamaphobic-icon:before { content: '\f699'; }
.mental-illness-icon:before { content: '\f808'; }
.obscene-icon:before { content: '\f4af'; }
.sexism-icon:before { content: '\e216'; }
.racism-icon:before { content: '\e53f'; }
.sexual-comment-icon:before { content: '\f556'; }
.default-tox-icon:before { content: '\e399'; }


/* Overlay */

#overlay {
    display:none;
}

@media (max-width: 600px){

    #overlay {
        display: inherit;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 200;
        overflow: hidden;
    }

    #overlay .playerxp-logo {
        background: url("../../images/icons/svg/PlayerXP-Logo-Main.svg");
        background-size: 100%; background-repeat: no-repeat;
        cursor: pointer; height: 50px; width: 215px; 
        margin: 20px auto 50px;
    }

    #overlay p {
        text-align: center;
        width: 100%;
        color: #202736;
        margin: 20px 0px;
    }

    .nav-stick {
        display: none !important;
    }
}