html, body{display: block; position: relative;margin: 0; padding: 0; font: 16px/16px helvetica,arial,sans-serif; overflow: hidden}
html{width: 100%;height: 100%; overflow: hidden;}
body{width: 100%;height: 100%; overflow: hidden;}

a{text-decoration: none; color: inherit;}
img{width: auto; height: auto; max-width: 100%; max-height: 100%; border: none}
input, button{border: none; padding: 0; margin: 0; appearance: normal; -webkit-user-select: text;}
button, input[type=submit]{padding: 6px 25px !important; border-radius: 4px !important;text-align: center; font-size: 15px; cursor: pointer;}
p{margin: 0; padding: 0; -webkit-margin-after: 0; -webkit-margin-before: 0;}


/********* App body *********/
.welement{display:block; height: 100%; width: 100%;}
#wtop{top: 0; left: 0;}
#wbody{background-color: white; overflow: auto; z-index: 0; overflow: hidden;}  /** Pendiente de quitarlo **/


/**************/
/**** Msg *****/
#wtop{display: none; position: absolute; z-index: 15;}
.wtop{display: none; position: absolute; z-index: 15;}
    #wtopOpacity{display: block; position: absolute; width: 100%; height: 100%; background-color: #eee; opacity: 0.7}
    .wtopOpacity{display: block; position: absolute; width: 100%; height: 100%; background-color: #eee; opacity: 0.7}
    #wtopContainer{display: block; position: relative; width: 100%; height: 100%; background-color: transparent; text-align: center;}
    .wtopContainer{display: block; position: relative; width: 100%; height: 100%; background-color: transparent; text-align: center;}
        .wtopMsgContainer{display: inline-block; position: relative; margin-top: 80px; min-width: 200px; max-width: 500px;
                         padding: 20px; background-color: #fff; overflow: auto;-webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);-moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);
                        box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);}
            .wtopMsgTextContainer{min-height: 50px;max-height: 200px; margin-bottom: 10px; text-align: left}
                #wtopMsgText{color: #111; font-size: 16px; line-height: 18px;}
                #wtopMsgText .wtopMsgTextImageContainer{width: 200px; height: auto; max-height: 150px; margin: 20px; text-align: center;}
                    #wtopMsgText img{max-height: 150px;}
                    #wtopMsgText a{color: #61ada9 !important;}
            .wtopMessageButtonsContainer{display: block; position: relative;}
                .wtopMessageButton{display: block; position: relative; padding: 5px 10px; margin: 5px auto 10px; min-width: 200px; font-size: 15px; background-color: #008F40; color: #fff;}
                #wtopCloseButton{ background-color: #61ada9; color: white}


#wrapper{display: block; position:relative; margin: 0}
    .wrapperElement{display: block; position: relative; width: 900px;}
    .wrapperElementSeparator{height: 10px; width: 100%; background-color: #61ada9;}



/**************/
/**** Msg *****/
#wtop{display: none; position: absolute; z-index: 15;}
.wtop{display: none; position: absolute; z-index: 15;}
    #wtopOpacity{display: block; position: absolute; width: 100%; height: 100%; background-color: #eee; opacity: 0.7}
    .wtopOpacity{display: block; position: absolute; width: 100%; height: 100%; background-color: #eee; opacity: 0.7}
    #wtopContainer{display: block; position: relative; width: 100%; height: 100%; background-color: transparent; text-align: center;}
    .wtopContainer{display: block; position: relative; width: 100%; height: 100%; background-color: transparent; text-align: center;}
        .wtopMsgContainer{display: inline-block; position: relative; margin-top: 80px; min-width: 200px; max-width: 500px;
                         padding: 20px; background-color: #fff; overflow: auto;-webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);-moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);
                        box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);}
            .wtopMsgTextContainer{min-height: 50px;max-height: 200px; margin-bottom: 10px; text-align: left}
                #wtopMsgText{color: #111; font-size: 16px; line-height: 18px;}
                #wtopMsgText .wtopMsgTextImageContainer{width: 200px; height: auto; max-height: 150px; margin: 20px; text-align: center;}
                    #wtopMsgText img{max-height: 150px;}
                    #wtopMsgText a{color: #61ada9 !important;}
            .wtopMessageButtonsContainer{display: block; position: relative;}
                .wtopMessageButton{display: block; position: relative; padding: 5px 10px; margin: 5px auto 10px; min-width: 200px; font-size: 15px; background-color: #008F40; color: #fff;}
                #wtopCloseButton{ background-color: #61ada9; color: white}


#wrapper{display: block; position:relative; margin: 0}
#wrapper.unloggedWrapper{background-image: url('/assets/image/PatriPsicologa_Background.jpg'); background-size: auto 100%; background-repeat: no-repeat; background-color: #feeff3; background-position: right center;}
    .wrapperElement{display: block; position: relative; width: 900px;}
    .wrapperElementSeparator{height: 10px; width: 100%; background-color: #61ada9;}



/*********************/
/***** Structure *****/
#wrapper{display: block; position:relative; margin: 0; width: 100%; height: 100%;}
    #wrapperOpaqueContainer{display: none; position: absolute; width: 100%; height: 100%; z-index: 8; background-color: #eee; opacity: 0.6}

    .wrapperElement{display: block; position: relative; width: auto !important;}
        .wrapperElementBlockData{display: block; position: relative; width: 97%; height: 100%; max-width: 1024px; min-width: 950px; margin: 0 auto; line-height: 1.2em;}
            .wrapperBlockSideContainer{background-color: white;}

            .wrapperBlockLeftContainer_60_40{display: inline-block; position: relative; width: 58%; margin-right: 2%; vertical-align: top; z-index: 0}
            .wrapperBlockRightContainer_60_40{display: inline-block; position: relative; width: 39%; vertical-align: top;  z-index: 2}

            .wrapperBlockLeftContainer_65_35{display: inline-block; position: relative; width: 63%; margin-right: 2%; vertical-align: top;  z-index: 0}
            .wrapperBlockRightContainer_65_35{display: inline-block; position: relative; width: 33%; vertical-align: top;  z-index: 2}

            .wrapperBlockLeftContainer_70_30{display: inline-block; position: relative; width: 68%; margin-right: 2%; vertical-align: top;  z-index: 0}
            .wrapperBlockRightContainer_70_30{display: inline-block; position: relative; width: 29%; vertical-align: top;  z-index: 2}
            .wrapperBlockListContainer{display: block; position: relative; height: 85%; overflow: auto;}

    .wrapperElement.wrapperFullElement{width: 100%; max-width: 100%; margin: 0 auto;}
    .wrapperElement.wrapperDropElement{width: 100%; max-width: 1024;}

    .wrapperElementSeparator{height: 10px; width: 100%; background-color: #61ada9;}



    /* Header bar user */
    #headerBarMenu{position: fixed; width: 96% !important; height:27px; top: 0px; font-size: 15px; margin: 0 auto !important; background-color: #61ada9; color: #fff; z-index: 10; padding: 0 2%;}
        #headerBarMenuSModeContainer{display: inline-block; padding: 6px 10px 6px 0;}
            #userIndexNav{}
        #headerBarMenuIdentityContainer{float: right; padding: 6px 0px 6px 10px;}
            #userIdentityClose:hover{text-decoration: underline}


    /* Header */
    #header{position: fixed; width: 96% !important; height: 65px; margin: 0px auto 5px !important; top: 27px; z-index: 10; background-color: #fff; padding: 0 2%;
            -webkit-box-shadow: 0px 4px 9px 0px rgba(68,68,68,0.40);-moz-box-shadow: 0px 4px 9px 0px rgba(68,68,68,0.40);box-shadow: 0px 4px 9px 0px rgba(68,68,68,0.40);}
        .headerElement{display: inline-block;}
        .headerLogoImageContainer{display: inline-block; position: relative; height: 50px; margin: 8px 0 0; padding: 0;}
        .headerMenuContainer{float: right; margin-top: 10px;}
            .headerMenuElement{display: inline-block; padding: 16px;}
                .haderMenuElementNameLinkContainer{}
                .haderMenuElementNameLinkSelected{text-decoration: underline;}
                    .headerMenuElementLink{}
                        .headerMenuElementName{font-size: 16px; color: #61ada9; cursor: pointer;}
                        .headerMenuElementName:hover{text-decoration: underline;}


    /* Main */
    #main{margin: 0 auto; height: calc(100% - 155px); padding-top: 95px; overflow: auto;}


    /* Footer */
    #footer{display: block; position: relative; height: 60px; background-color: #61ada9; min-height: 20px; font-size: 0; }
        .footerElementBlockData{display: block; position: relative; width: 97%; max-width: 1024px; margin: 0 auto;}
            .footerElementBlockData a:hover{text-decoration: underline;}

            .footerFourDataColumn:first-child{margin-left: 0px;}
            .footerFourDataColumn:last-child{margin-right: 0px;}
            .footerFourDataColumn{display: inline-block; margin: 10px 2%; width: 21%; min-height: 10px;  vertical-align: top; color: #fff; font-size: 14px;}

            .footerThreeDataColumn:first-child{margin-left: 0px;}
            .footerThreeDataColumn:last-child{margin-right: 0px;}
            .footerThreeDataColumn{display: inline-block; margin: 10px 2%; width: 30%; min-height: 10px;  vertical-align: top; color: #fff; font-size: 14px;}

            .footerThreeInvDataColumn:first-child{margin-left: 0px;}
            .footerThreeInvDataColumn:last-child{margin-right: 0px;}
            .footerThreeInvDataColumn{display: inline-block; margin: 10px 2%; width: 60%; min-height: 10px;  vertical-align: top; color: #fff; font-size: 14px;}

            .footerTwoDataColumn:first-child{margin-left: 0px;}
            .footerTwoDataColumn:last-child{margin-right: 0px;}
            .footerTwoDataColumn{display: inline-block; margin: 10px 2%; width: 45%; min-height: 10px;  vertical-align: top; color: #fff; font-size: 14px;}

            .footerDataSingleColumn{display: block; position: relative; color: #fff; font-size: 14px;}

            .footerDataColumnTitle{margin: 0; margin-bottom: 10px; font-size: 16px;}
            .footerDataColumnText{line-height: 1.25em; font-size: 14px;}

            .footerCopyrightData{text-align: left; color: #fff;}

            .footerMenuContainer{float: right; margin-top: 0px;}
                .footerMenuElement{display: inline-block; padding: 15px;}
                    .footerMenuElementNameLinkContainer{}
                    .footerMenuElementNameLinkSelected{text-decoration: underline;}
                        .footerMenuElementLink{}
                            .footerMenuElementName{font-size: 16px; color: #fff; cursor: pointer;}
                            .footerMenuElementName:hover{text-decoration: underline;}




/** Unlogin page **/
/*******************************************************************/
#loginScreen{display: block; position: relative;width: 100%; z-index: 0;}
    #loginDefineTextContainer{text-align: center; margin: 50px auto}
        #loginDefineText{}

    #wrapper.unloggedWrapper{height: 100%;}
        main#main.unloggedWrapperElement{height: 100% ; padding: 0; margin: 0;}

        #mainContainer{display: block; position: relative; width: 100%; height: 100%; top: 0; left: 0; text-align: center}
            #siteTitle{}
                .siteTitle_top{font-family: "Autography"; font-size: 20px}
                .siteTitle_down{font-family: "Geometria-Light"; font-size: 20px;}

            #unlogedFrame{display: block;text-align: left;}
                #unlogedPatrilogo{float: left; height: 35px; width: auto; margin: 10px;}
                #loginFormContainer{display: inline-block; padding: 4% 7% 4%; padding: 0; margin-top: 10%; margin-bottom: 3em; border: 1px solid #ccc; border-radius: 5px;
                                    -webkit-box-shadow: 0px 0px 8px #aaa;-moz-box-shadow: 0px 0px 8px #aaa;box-shadow: 0px 0px 8px #aaa;
                                    background-color: white; opacity: 0.9; font-size: 16px; overflow: hidden;}
                    #loginFormContainer form{margin: 60px 90px;}
                    .loginFormField{display: block; position: relative; width: auto;  margin: 0.75em auto; padding-left: 0.3em;
                                    font-size: 1em;
                                    border-style: solid; border-width: 1px; border-color: #ccc; border-radius: 2px;
                                    -webkit-box-shadow: 0px 0px 3px #ddd;-moz-box-shadow: 0px 0px 3px #ddd;box-shadow: 0px 0px 3px #ddd;
                                    }
                        .accessImage{max-height: 1.4em; margin-right: 0.4em; vertical-align: middle;}
                        .loginFromInput{width: 12em; height: 1.5em;font-size: 1em; margin: 0; padding: 0.25em 0.3em;
                                       vertical-align: middle; border: none;}
                    #buttonFormField{margin-top: 1.5em;}
                        #loginFormAccessButton{background-color: #61ada9; width: 200px; color: #fff;}


@media screen and (max-width: 600px){
    #loginFormContainer{margin-top: 10px; border: none; -webkit-box-shadow: 0px 0px 0px #fff; -moz-box-shadow: 0px 0px 0px #fff; box-shadow: 0px 0px 0px #fff; width: auto !important;}
    #unlogedPatrilogo{float: none; height: 60px;}
    #loginFormContainer form{margin: 40px auto;}



    /****************** Main content ******************/
    #header{height: auto; font-size: 0;}
        #headerLogosContainer{width: 45%; height: auto;}
            #headerLogo_mecliq_high{width: 100%; height: auto !important; margin-top: 15px; vertical-align: middle;}

    .wtopMsgContainer{max-width: 80%;}
    .wrapperElement{width: 89%; min-width: 300px; margin-left: 5% !important; margin-right: 4% !important; }
    #main{height: calc(100% - 120px) !important;}
    #footer{display: none;}
    .buttonsLine{width: 100%; height: 30px; margin-bottom: 30px;}

    /****************** Structure ******************/
    .wrapperElementBlockData{width: auto; max-width: 100%; min-width: 0;}
        .wrapperBlockLeftContainer_70_30, .wrapperBlockRightContainer_70_30{width: 100%; margin-bottom: 30px; margin-right: 0;}
        .wrapperBlockLeftContainer_60_40, .wrapperBlockRightContainer_60_40{width: 100%; margin-bottom: 30px; margin-right: 0;}
        .wrapperBlockSideContainer{width: 100% !important; margin-bottom: 30px !important;}


        .dataLine{margin: 0; margin-bottom: 5px;}
            .dataSelectElement{display: block; width: 100%;}
            .dataInLineElement{display: block; width: 100%;margin: 0 0 10px;}
                .dataInLineTitle{width: 25% !important;}
                .dataInLineValue{width: 70% !important;}
                .dataInLineSingleValue{margin-left: 26%; margin-top: 5px}
                .dataInLineSingleRightValue{margin-left: 26%; text-align: right; margin-top: 5px;}
                    .dataInput{width: 95% !important; padding: 3px 2% 4px !important; margin: 0; margin-bottom: 3px;}
                    .dataPlaceSelect{width: 99% !important; padding: 3px 2% 4px !important;}
                    .dataInLineValue textarea{width: 95% !important; margin: 0;}

                    .dataSelectElement{display: inline-block;}
                        .dataSelect{margin-right: 2px;vertical-align: middle;}
                        .dataSelectTitle{display: inline-block; vertical-align: top; width: 90%; text-align: left;}
                            .dataTitle{font-size: 15px;}


}