/* Basics */

#pauseMenu {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
}

#pauseMenu .close {
    cursor: pointer;
    position: absolute;
    left: 28%;
    top: 15px;
    font-size: 20px;
    color: white;
}

#pauseMenu .close .fa {
    cursor: pointer;
}

/* Exit button */

#pm-exit-button {
    cursor: pointer;
    background-image: url(../../../system/imgmenu/close.svg);
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    position: absolute;
    top: 10px;
    right: 10px;
}

#pm-exit-button:hover {
    -webkit-filter: drop-shadow(0 1px 2px cyan);
    -moz-filter: drop-shadow(0 1px 2px cyan);
    -o-filter: drop-shadow(0 1px 2px cyan);
    filter: drop-shadow(0 1px 2px cyan);
}

#pm-exit-button:active {
    -webkit-filter: drop-shadow(0 1px 1px cyan);
    -moz-filter: drop-shadow(0 1px 1px cyan);
    -o-filter: drop-shadow(0 1px 1px cyan);
    filter: drop-shadow(0 1px 1px cyan);
}

/* Placeholder */

#pm-nothing {
    padding-top: 100px;
    font-size: 50px;
    text-align: center;
}

#pm-nothing p {
    color: inherit;
    font-size: inherit;
    text-shadow: 0 0 10px #666;
}

p.italic {
    font-style: italic;
}

#pm-nothing img {
    width: 225px;
    height: 225px;
    margin-top: 20px;
}

/* Level/iMG Bar (level) */
/* Quoin Limit Meter (quoinlimit) */

/*#pm-level-info {*/
    /*height: calc(100% - 215px);*/
    /*position: absolute;*/
    /*top: 90px;*/
    /*background-color: #eee;*/
    /*border-radius: 0 8px 8px 0;*/
    /*border: 2px solid #eee;*/
    /*border-left: none;*/
    /*width: 200px;*/
    /*left: -150px;*/
    /*transition: left 0.5s ease-in-out, box-shadow 0.2s linear;*/
/*}*/

/*#pm-level-info:hover {*/
    /*left: 0;*/
    /*box-shadow: 0 0 10px 0 #eee;*/
/*}*/

/*#pm-level-text {*/
    /*width: 134px;*/
    /*padding: 8px;*/
    /*text-align: center;*/
/*}*/

#pm-level-container,
#pm-quoinlimit-container {
    width: 50px;
    box-shadow: 0 0 9px 5px #aaa inset;
    height: calc(100% - 145px);
    position: absolute;
    top: 80px;
    background-color: #eee;
    border-radius: 30px;
    border: 4px solid #eee;
}

#pm-level-container {
    left: 15px;
    z-index: 2048;
}

#pm-quoinlimit-container {
    left: 90px;
    z-index: 1024;
}

#pm-level-bar,
#pm-quoinlimit-bar {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: 25px;
    background-color: #4b2e4c;
    z-index: 10;
}

#pm-quoinlimit-bar {
    background-color: #22804b;
}

#pm-level-bar.done {
    background-color: teal;
    height: 100% !important;
}

@-webkit-keyframes bubble-anim {
    0% {
        background-position-y: 1024px;
    }
    100% {
        background-position-y: 0;
    }
}

@-moz-keyframes bubble-anim {
    0% {
        background-position-y: 1024px;
    }
    100% {
        background-position-y: 0;
    }
}

@-o-keyframes bubble-anim {
    0% {
        background-position-y: 1024px;
    }
    100% {
        background-position-y: 0;
    }
}

@keyframes bubble-anim {
    0% {
        background-position-y: 1024px;
    }
    100% {
        background-position-y: 0;
    }
}

#pm-level-bar::before,
#pm-quoinlimit-bar::before {
    content: '';
    background: url(../../../system/imgmenu/imgbubbles.svg) repeat-y;
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bubble-anim 25s linear infinite;
    -moz-animation: bubble-anim 25s linear infinite;
    -o-animation: bubble-anim 25s linear infinite;
    animation: bubble-anim 25s linear infinite;
    border-radius: 25px;
    opacity: 0.1;
}

#pm-level-bar.done::before {
    content: '';
    background: url(../../../system/imgmenu/imgbubbles.svg) repeat-y;
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
    border-radius: 25px;
    opacity: 0.1;
}

#pm-level-bar-info,
#pm-quoinlimit-bar-info {
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
    position: absolute;
    width: 100%;
    text-align: center;
}

#pm-level-label {
    position: relative;
    bottom: -5px;
}

#pm-quoinlimit-bar-unit-label {
    font-size: 12px;
}

#pm-level-num,
#pm-quoinlimit-num {
    font-size: 35px;
}

#pm-next-lvlnum {
    font-weight: bold;
}

#pm-img-req,
#pm-lt-img,
#pm-quoins-collected,
#pm-quoins-remaining,
#pm-quoins-limit {
    font-weight: bold;
    font-size: 24px;
    margin-top: 20px;
}

#pm-level-tooltip,
#pm-quoinlimit-tooltip {
    background-color: rgba(75, 46, 76, 0.8);
    border-radius: 8px;
    display: block;
    left: 58px;
    margin-bottom: 15px;
    opacity: 0;
    padding: 10px;
    pointer-events: none;
    position: relative;
    top: 0;
    width: 150px;
    height: 110px;
    transform: translateY(-50%);
    transition: all .25s ease-out;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    text-align: center;
    z-index: 1024;
}

#pm-quoinlimit-tooltip {
    background-color: rgba(34, 128, 75, 0.8);
    height: 170px;
}

#pm-level-tooltip.done {
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    width: 200px;
}

#pm-level-tooltip p,
#pm-quoinlimit-tooltip p {
    color: white;
    font-family: "Lato", sans-serif;
}

#pm-level-tooltip p:not(:last-child),
#pm-quoinlimit-tooltip p:not(:last-child) {
    margin-bottom: 10px;
}

#pm-level-tooltip::before,
#pm-quoinlimit-tooltip::before {
    right: 100%;
    top: 50%;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 14px solid transparent;
    border-right-color: rgba(75, 46, 76, 0.9);
    margin-top: -14px;
}

#pm-quoinlimit-tooltip::before {
    border-right-color: rgba(34, 128, 75, 0.8);
}

#pm-level-container:hover #pm-level-tooltip,
#pm-quoinlimit-container:hover #pm-quoinlimit-tooltip {
    opacity: 1;
}

/* Skills */

#pm-skills {
    position: absolute;
    right: 55px;
    top: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 8px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 0 10px 10px 10px;
    height: calc(100% - 50px);
    width: 240px;
    overflow-y: auto;
}

#pm-skills h2 {
    text-align: center;
}

.pm-skill {
    width: 100%;
    height: 35px;
    display: block;
    padding: 10px 0;
    margin-bottom: 5px;
}

.pm-skill,
.pm-skill * {
    cursor: help;
}

.pm-noskills {
    color: rgb(169, 62, 62);
    text-align: center;
    margin-top: 50px;
    font-size: 20px;
}

.pm-skill-progress {
    position: absolute;
    height: 50px;
    z-index: -1;
    opacity: 0.65;
    border-radius: 8px;
    margin-top: -5px;
    background-size: 4px;
    background-position: center center;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

.pm-skill-progress-complete {
    opacity: 0.15;
}

.pm-skill-icon {
    height: 40px;
    width: 40px;
    float: left;
    margin-right: 5px;
}

.pm-skill-text {
    margin-left: 50px;
}

.pm-skill-title {
    font-family: "Fredoka One", "Lato", sans-serif;
    font-size: 18px;
}

.pm-skill-level {
    font-family: "Lato", sans-serif;
    font-size: 12px;
    font-weight: bold;
    display: block;
}

.pm-skill-level::before {
    content: "Level: ";
    font-weight: normal;
}