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;}
input[type="submit"]{padding: 7px 25px !important; border-radius: 2px !important;text-align: center; font-size: 15px; cursor: pointer; min-width: 200px;}
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;}
#wbodyBackgroundLayer{display: block; position: absolute; width: 100%; height: 100%; z-index: -1; background-image: url('/assets/images/habittat_background.jpg'); background-size: 100% 100%; background-repeat: no-repeat; opacity: 0.7}
#wbody{overflow: hidden; z-index: 0}  /** Pendiente de quitarlo **/


/***************************** Header *****************************/
/******************************************************************/
.headerBarMenuTopImage{display: block; width: 100%; height: 5px !important; background-image: url("./images/topbar.png");
                        background-size: auto 5px; background-repeat: repeat-x; z-index: 1;}

/*****************/
/***** Loader ****/
#wtopLoaderContainer{display: block; position: relative; margin-top: 200px;}
#loadingWait{display: inline-block; position: relative; border: 8px solid #000; border-radius: 50%; border-top: 8px solid #efe31a;
    border-bottom: 8px solid #efe31a; width: 40px; height: 40px; -webkit-animation: spin 1000ms linear infinite;
    animation: spin 1000ms linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/**************/
/**** 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: #2a5a86 !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: #2a5a86; color: white}


#wrapper{display: block; position:relative; margin: 0}
    .wrapperElement{display: block; position: relative; width: 900px;}
    .wrapperElement.unloggedWrapperElement{width: auto;}
    .wrapperElementSeparator{height: 10px; width: 100%; background-color: #2a5a86;}
    #header{min-height: 50px; margin: 10px auto 5px; }
        .headerElement{display: inline-block;}
        #headerImageContainer{height: 100%;}
        #headerLogoContainer{display: inline-block; position: relative; height: 60px; margin: 0; padding: 0}
            .headerLogoImageContainer{display: inline-block; position: relative; height:100%; left: 0; margin-right: 0px;}
            #headerLogo_mecliq_high{height: 50px; width: auto;  margin-top: 10px; z-index: 0; }

        #headerMenuMovilContainer{display: none; float: right; width: auto; text-align: right; margin-top: 25px;}
            #headerMenuMovilNameContainer{display: inline-block; margin-right: 10px; font-size: 18px; vertical-align: middle; color: #999;}
            #headerMenuMovilIconContainer{display: inline-block; height: 30px; width: 30px; vertical-align: middle;}

        #headerMenuContainer{float: right; width: auto; text-align: right;}
            #headerMenu{display: block; position: relative; margin-top:6px;}
                #closeHeaderMenuSelect{display: none;}
                .headerMenuLinkContainer{display: inline-block; margin-left: 15px; vertical-align: top; text-align: center;}
                    .headerMenuLink{display: inline-block; width: 100%; color: #babbbd; font-size: 12px;}
                    .headerMenuLinkSelected{color: #2a5a86}
                        .headerMenuImageContainer{display: inline-block; height: 40px; width: 40px; margin: 0px auto 0px;}
                            .headerMenuImage{}
                        .headerMenuNameContainer{width: 100%;text-align: center; line-height: 1em; max-width: 55px;}
                            .headerMenuName{}

    #headerBarMenu{height:33px; font-size: 15px; margin: 0 auto; background-color: #000; color: #fff}
        #headerBarMenuSModeContainer{display: inline-block; padding: 6px 10px;}
            #userIndexNav{}
        #headerBarMenuIdentityContainer{float: right; padding: 6px 10px;}
            #userIdentityClose:hover{text-decoration: underline}

    #main{margin: 10px auto 40px;min-height: 400px;}

    #footer{display: none; position: relative; width: 900px; margin: auto; padding-bottom: 20px; font-size: 15px; color: #999;}



/** 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.unloggedWrapperElement{height: calc(100% - 33px); }
        main.unloggedWrapperCrmgmlImage{}

    #wrapper{}

        #mainContainer{display: block; position: relative; width: 100%; height: 100%; top: 0; left: 0; text-align: center}
        #unlogedFrame{display: block;text-align: center;}
            #unlogedCRMlogo{display: block; height: 65px; width: auto; margin: 10px;}
            #loginFormContainer{display: inline-block; width: 0px; padding: 10px 85px 30px; margin-top: 100px; border: 1px solid #ddd; border-radius: 10px;
                                -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;}
                .loginFormField{display: block; position: relative; width: auto;  margin: 0.75em auto; padding-left: 0.3em;
                                font-size: 1em; border: none; border-bottom: 1px solid #ccc;border-radius: 2px; text-align: left;}
                    .accessImage{display: inline-block; position: relative; max-height: 1.4em; margin-right: 0.4em; vertical-align: middle;}
                    .loginFromInput{display: inline-block; position: relative; width: 17em; 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: #8cab98; width: 200px; color: #fff;}

/*
            #unlogedFrame{display: block;text-align: right;}
                #unlogedCRMlogo{float: left; height: 57px; width: auto; margin: 10px;}
                #loginFormContainer{width: 0; display: inline-block; padding: 4% 7% 4%; padding: 0; margin-top: 50px; margin-right: 50px; margin-bottom: 3em; border: 1px solid #ccc; border-radius: 2px;
                                    -webkit-box-shadow: 0px 0px 5px #aaa;-moz-box-shadow: 0px 0px 5px #aaa;box-shadow: 0px 0px 5px #aaa;
                                    background-color: white; opacity: 0.9; font-size: 16px; overflow: hidden;}
                    #loginFormContainer form{margin: 80px 90px 60px;}
                    .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.4em;
                                       vertical-align: middle; border: none;}
                    #buttonFormField{margin-top: 1.5em; text-align: center;}
                        #loginFormAccessButton{background-color: #2a5a86; 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;}
    #unlogedCRMlogo{float: none; height: 60px;}
    #loginFormContainer form{margin: 40px auto;}
}