/*
PROLEXIA

NOTICE:  All information contained herein is, and remains
the property of PROLEXIA and its suppliers, if any.
The intellectual and technical concepts contained herein
are proprietary to PROLEXIA and its suppliers and may be covered
by European and Foreign Patents, patents in process,
and are protected by trade secret or copyright law.
Dissemination of this information or reproduction of this material
is strictly forbidden unless prior written permission is obtained
from PROLEXIA
*/
/*
    Created on : 6 oct. 2014, 10:04:09
    Author     : Nicolas Maciol <nmaciol at prolexia.fr>
*/

/******************/
/*** Index html ***/
/******************/

body {
    background: #ffffff;
    color: #fff;
    padding: 0;
    margin: 0;
    /*overflow: hidden;*/
    font-family: verdana, sans-serif;
}

#imgHeader {
    position: absolute;
    width: 100%;
    height: 211px;
    top: 0;
    left: 0;
}

#imgFitPark{
    width: 84%;
    position: absolute;
    top: 21%;
    left: 8%;
    transform: rotate(15deg);
    z-index: 1000000000000000000;
    display: none;
}

#appViewport {
    background-color: white;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000000;
    font-size: 1vw;

    box-shadow: 0px 0px 50px 15px #121212;
    -webkit-box-shadow: 0px 0px 50px 15px #121212;
    -moz-box-shadow: 0px 0px 50px 15px #121212;
}

#viewport {
    position: absolute;
    top: 0;
    left: 17%;
    width: 61%;
    height: 77%;
    display: none;
}

#viewportCopy {
    position: absolute;
    top: 0;
    right: 15%;
    width: 767px;
    height: 375px;
    display: none;
}

#return {
    position: absolute;
    width: 2.5%;
    top: 1%;
    right: 80%;
    cursor: pointer;
}

#saveToPDF {
    position: absolute;
    width: 2.5%;
    top: 1%;
    right: 77%;
    cursor: pointer;
}

#saveModel {
    position: absolute;
    width: 2.5%;
    top: 1%;
    right: 66%;
    cursor: pointer;
    display: none;
}

#deleteModel {
    display: none;
    position: absolute;
    width: 2.5%;
    top: 1%;
    right: 74%;
    cursor: pointer;
}

#return:hover, #saveToPDF:hover, #saveModel:hover, #deleteModel:hover {
    box-shadow: inset 0 0 0 2000px rgba(186, 70, 70, 0.2);
}

#imgReturn, #imgSaveToPDF, #imgSaveModel, #imgDeleteModel {
    width: 100%;
}

#baseSelector {
    position: absolute;
    z-index: 100;
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    height: 100%;
    background-color: white;
    color: #85868c;
}

.baseContainer {
    width: 15%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 2.5%;
    display: inline-block;
}

.baseImgContainer {
    width: 95%;
    padding-top: 95%;
    background-position: center;
    background-size: cover;
}

.baseImgBorder:hover {
    box-shadow: inset 0 0 0 2000px rgba(186, 70, 70, 0.2);
}

.baseImgBorder {
    position: absolute;
    width: 11.4%;
    padding-top: 11.4%;
    margin-top: -11.4%;
    cursor: pointer;
    background-image: url("../resources/images/background.png");
    background-position: center;
    background-size: cover;
}

.baseName {
    margin-top: 2%;
    width: 100%;
    height: 3%;
    text-align: center;
    cursor: pointer;
}

#exoSelector {
    position: absolute;
    z-index: 100;
    width: 15%;
    left: 1%;
    top: 2.5%;
    height: 96%;
    background-color: white;
    color: #e13636;
}

#exoSelectorTitle {
    font-size: 175%;
    text-align: center;
    margin-bottom: 5%;
    font-weight: bold;
}

#exoSelectorContainer {
    position: absolute;
    width: 100%;
    height: 85%;
    overflow-y: scroll;
    color: #85868c;
}

.exoContainer {
    width: 45%;
    height: 25%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 2.5%;
    display: inline-block;
}

.exerciseList {
    transform: scale(0.01);
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
    transform-origin: center top;
    opacity: 0;
    height: 0;
}

.exerciseList.open {
    transform: scale(1);
    opacity: 1;
    height: inherit !important;
}

.exoImgContainer {
    width: 95%;
    padding-top: 95%;
    background-position: center;
    background-size: cover;
}

.exoImgBorder:hover {
    box-shadow: inset 0 0 0 2000px rgba(186, 70, 70, 0.2);
}

.exoImgBorder {
    position: absolute;
    width: 42.75%;
    padding-top: 42.75%;
    margin-top: -42.75%;
    background-image: url("../resources/images/background.png");
    background-position: center;
    background-size: cover;
}

.exoName {
    margin-top: 2%;
    width: 100%;
    height: 10%;
    text-align: center;
    overflow: hidden;
    color: #e13636;
}

#exoList {
    position: absolute;
    z-index: 100;
    width: 20%;
    right: 1%;
    height: 30%;
    color: black;
    top: 2.5%;
}

#exoListTitle {
    text-align: center;
    width: 100%;
    font-size: 175%;
    color: #e13636;
    margin-bottom: 4%;
    font-weight: bold;
}

#exoListContainer {
    border: 1px solid #e13636;
    border-radius: 15px;
    display: none;
}

.exoLine {
    height: 9.6%;
    display: flex;
}

.exoLine:not(:last-child) {
    border-bottom: 1px solid #e13636;
}

.exoLineLabel {
    width: 17%;
    height: 100%;
    text-align: center;
}

.exoLineText {
    width: 80%;
    padding-left: 2%;
    border-left: 1px solid #e13636;
}

#exoTypeList {
    position: absolute;
    z-index: 100;
    width: 20%;
    right: 1%;
    top: 35%;
    color: #ffebe1;
    border-radius: 15px;
    background-color: #e13636;
}

#exoTypeLineTitle {
    font-size: 65%;
}

#exoTypeTitle, .exoTypeLabel {
    width: 81%;
    padding-left: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
}

#exoPercentTitle, .exoTypePercent {
    width: 15%;
    padding-left: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    text-align: center;
    border-right: 1px solid #ffebe1;
}

.exoTypeLine {
    display: flex;
    width: 100%;
}

.exoTypeLine:not(:last-child) {
    border-bottom: 1px solid #ffebe1;
}

#exoMusclesList {
    position: absolute;
    z-index: 100;
    width: 20%;
    right: 1%;
    height: 40%;
    top: 47%;
    color: black;
}

#topArray {
    display: flex;
    height: 60%;
    border: 1px solid #e13636;
    border-radius: 15px;
}

#topArrayTitle, #bottomArrayTitle {
    width: 17%;
    border-right: 1px solid #e13636;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 450%;
}

#topResultDivText {
    width: 17%;
    text-align: center;
    margin-top: 33%;
    font-weight: bold;
    font-size: 0.9vw;
}

#topArrayMuscles {
    width: 66%;
    border-left: 1px solid #e13636;
    display: flex;
    flex-direction: column;
}

#bottomArray {
    display: flex;
    margin-top: 5%;
    height: 35%;
    border: 1px solid #e13636;
    border-radius: 15px;
}

#bottomResultDivText {
    width: 17%;
    text-align: center;
    margin-top: 17%;
    font-weight: bold;
    font-size: 0.9vw;
}

#bottomArrayMuscles {
    width: 66%;
    border-left: 1px solid #e13636;
    display: flex;
    flex-direction: column;
}

#topArrayMuscles .muscleArrayCell {
    height: 9.3%;
    padding-left: 2%;
    padding-right: 2%;
}

#topArrayMuscles .muscleArrayCell:not(:last-child) {
    border-bottom: 1px solid #e13636;
}

#bottomArrayMuscles .muscleArrayCell {
    height: 20%;
    padding-left: 2%;
    padding-right: 2%;
}

#bottomArrayMuscles .muscleArrayCell:not(:last-child) {
    border-bottom: 1px solid #e13636;
}

.muscleDivText {
    width: 75%;
}

.muscleResultDivText {
    width: 19%;
    text-align: center;
}

#dimensionDiv {
    position: absolute;
    z-index: 100;
    width: 45%;
    left: 25%;
    height: 10%;
    top: 81%;
    color: #ffebe1;
    text-align: center;
    font-size: 115%;
    background-color: #e13636;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
}

#exerciseContainer {
    border-bottom: 1px solid #ffebe1;
}

#exerciseContainer, #safetyContainer {
    height: 50%;
    display: flex;
    line-height: 200%;
}

#exerciseContainerTitle, #safetyContainerTitle {
    width: 54%;
    border-right: 1px solid #ffebe1;
}

#exerciseResultContainer, #safetyResultContainer {
    width: 66%;
}

.exoParentLine {
    display: flex;
}

#exerciseContainerTitle, #exerciseResultContainer, #safetyContainerTitle, #safetyResultContainer {
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
}

#musclesViewer {
    position: absolute;
    width: 150px;
    height: 138px;
    top: 57%;
    right: 23%;
    z-index: 100000;
}

#musclesTooltip{
    position: absolute;
    width: 150px;
    height: 138px;
    z-index: 100000;
    background-color: white;
    border: 2px solid #9d131b;
    border-radius: 15px;
}

.categoryTitle {
    font-size: 130%;
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
    font-weight: bold;
    color: #9d131b;
    cursor: pointer;
}

.muscleImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* The Close Button */
#close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    right: 1%;
    position: absolute;
}

#close:hover,
#close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Header */
.modal-header {
    border-radius: 8px 8px 0 0;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #85868c;
    color: white;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7%;
    position: relative;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Modal Body */
.modal-body {
    padding: 2px 16px;
}

/* Modal Content */
.modal-content {
    color: #85868c;
    border-radius: 0 0 8px 8px;
    width: 30%; /* Could be more or less, depending on screen size */
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

#modalTitle, #modalContentText {
    padding-left: 2%;
}

#loadingModels {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
    display: none;
}

#loadingProgress{
    width: 80%;
    height: 5%;
    margin-top: 10%;
    margin-left: 10%;
}

#loadingLabel {
    color: black;
    text-align: center;
    font-size: 2vw;
    margin-top: 1%;
}

/* Styling an indeterminate progress bar */

progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
    /* Get rid of the default appearance */
    appearance: none;

    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
    border: none;

    /* Add dimensions */
    width: 100%; height: 20px;

    /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
    color: royalblue;

    position: relative;
    margin: 0 0 1.5em;
}

progress{
    background-color: #85868c;
}

progress::-webkit-progress-value {
    background: #85868c;
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
    position: relative;

    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;

    width:5px; height:5px;
    top:7px; right:7px;

    background-color: white;
    border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
            -moz-linear-gradient( 135deg,
            transparent,
            transparent 33%,
            rgba(0,0,0,.1) 33%,
            rgba(0,0,0,.1) 66%,
            transparent 66%),
            -moz-linear-gradient( top,
            rgba(255, 255, 255, .25),
            rgba(0,0,0,.2)),
            -moz-linear-gradient( left, #09c, #f44);

    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;

    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Dimensions should be similar to the parent progress element. */
    width: 100%; height:20px;
}

.progress-bar span {
    background-color: royalblue;
    border-radius: 3px;

    display: block;
    text-indent: -9999px;
}

/* Add Animation */
@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #9d131b;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #5b0b0f;
}