html { padding: 0; margin: 0; min-height: 100vh; height: 100%; }
body { padding: 0; margin: 0; min-height: 100vh; height: 100%; font-family: Verdana; letter-spacing: 1px; font-size: 14px; overflow: hidden; }
dt { display: none; }
dd { padding: 0; margin: 0; }

.mainColor { color: #93c021 !important; }
.mainBackground { background-color: #93c021 !important; color: #ffffff !important; }
.all_rounded_corners {
    -moz-border-top-left-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.bottom_rounded_corners {
    -moz-border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.top_rounded_corners {
    -moz-border-top-left-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}
.top_rounded_corners_left {
    -moz-border-top-left-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
}
.top_rounded_corners_right {
    -moz-border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}

#logoTop { position: absolute; top: 3%; left: 2%; width: 150px; z-index: 1000; }
.userLink { text-shadow: 2px 2px #ffffff !important; }

#divLogin #formLogin .loginError { color: #ff0000; }

#panelLeft { 
    /*background-image: url('../../images/eventsport/background_left.png');
    background-size: cover;
    background-repeat: no-repeat;*/
    width: 45%;
    height: 100%;
    display: inline-block; 
    position: relative; top: 0; 
    text-align: center; 
    overflow-y: auto; 
}
#panelLeft #contentPanel { width: 55%; margin-left: 40%; margin-top: 25%; }
#panelLeft #contentPanel .topTitle { font-size: 21px; text-align: center; display: inline-block; padding: 20px; padding-bottom: 10px; padding-top: 10px; border-bottom: 3px solid #93c021; margin-bottom: 50px; }
#panelLeft #contentPanel input[type=text] { font-size: 19px; width: calc(100% - 27px); margin: auto; border: 0; border-left: 5px solid #93c021; background: #efefef; padding: 11px; margin-top: 20px; }
#panelLeft #contentPanel input[type=password] { font-size: 19px; width: calc(100% - 27px); margin: auto; border: 0; border-left: 5px solid #93c021; background: #efefef; padding: 11px; margin-top: 20px; }
#panelLeft #contentPanel select { font-size: 19px; width: 100%; margin: auto !important; margin-top: 20px !important; border: 0; border-left: 5px solid #93c021 !important; background: #efefef; padding: 11px; }
#panelLeft #contentPanel .linksText { display: inline-block; margin-top: 10px; font-size: 13px; padding-bottom: 5px; border-bottom: 1px solid #93c021; cursor: pointer; }
#panelLeft #contentPanel .linkRegistration { float: left; text-shadow: 1px 1px #ffffff; }
#panelLeft #contentPanel .linkRecover { float: right; text-shadow: 1px 1px #ffffff; }
#panelLeft #contentPanel input[type=submit] { cursor: pointer; margin-top: 50px; margin-bottom: 50px; font-size: 17px; letter-spacing: 4px; background: #93c021; color: #ffffff; border: 0; padding: 11px; padding-left: 25px; padding-right: 25px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
#panelLeft #recoverPasswordField { margin-top: 20px; }
#panelLeft #contentPanel .errorField { background: rgb(253, 237, 237) !important; }
#panelLeft #contentPanel input[type=checkbox].errorField {outline: 2px solid red; }
#panelLeft #registrationTypesPanel .registrationType { background-color: #93c021 !important; }
#panelLeft #registrationTypesPanel .registrationType:hover { background-color: #8dc839 !important; }
#panelLeft #registrationTypesPanel .portalRegistrationInfo { text-shadow: 1px 1px #ffffff; color: #93c021 !important; }
#panelLeft #registrationTypesPanel .infoClickChecked { width: 90%; margin: auto; border: 1px solid #e9e9e9; padding: 10px; padding-bottom: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;     }
#panelLeft #registrationTypesPanel .linkMore { font-weight: bold; text-decoration: underline; cursor: pointer; }

#panelLeft #contentPanel #registrationPanel { padding-bottom: 100px; }
#panelLeft #contentPanel #formRegister { text-align: left; font-size: 14px; width: 65%; margin: auto; }
#panelLeft #contentPanel #formRegister input[type=text] { font-size: 16px; }
#panelLeft #contentPanel #formRegister input[type=password] { font-size: 16px; }
#panelLeft #contentPanel #formRegister select { font-size: 16px; }
#panelLeft #contentPanel dd.dd_checkbox { display: inline-block; }
#panelLeft #contentPanel #formRegister dd#gdpr-element { display: inline-block; }
#panelLeft #contentPanel #formRegister .checkboxDivElement { display: inline-block; width: 39px; vertical-align: top; margin-top: 20px; }
#panelLeft #contentPanel #formRegister .checkboxDivText { display: inline-block; width: calc(100% - 50px); vertical-align: top; margin-top: 29px; text-shadow: 1px 1px #ffffff;  }
#panelLeft #contentPanel #formRegister #submit-element { text-align: center !important; }


#panelRight { 
    width: 55%; 
    height: 100%; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    background: linear-gradient(to right, transparent 20%,#cbef99 20%,#93c021 100%);
    /*background-image: url('../../images/eventsport/background_right.png'); 
    background-size: contain contain; 
    background-repeat: no-repeat;*/
}
#panelRight #infoText { color: #ffffff; margin-right: 5%; margin-left: 30%; margin-top: 35%; text-align: center; }
#panelRight #infoText .title { font-size: 35px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 3px 3px #000000; }
#panelRight #infoText .text { font-size: 18px; margin-top: 50px; line-height: 200%; text-shadow: 1px 1px #000000; }
#panelRight #infoText .link { text-decoration: underline; }
#panelRight .author { position: absolute; bottom: 1%; right: 1%; font-size: 9px; color: #fff; font-style: italic; cursor: pointer; text-shadow: 1px 1px #000000; }

#logoTop.invert { position: absolute; left: unset; right: 2%; width: 150px; }
#panelRight.invert { 
    background: linear-gradient(to left, transparent 20%,#cbef99 20%,#93c021 100%);
    /*background-image: url('../../images/eventsport/background_right_invert.png'); 
    background-position: right;*/
    width: 54%; position: relative; 
    vertical-align: top; 
}
#panelRight.invert #infoText { margin-left: 5%; margin-right: 30%; }
#panelRight.invert .author { left: 1%; right: unset; }
#panelLeft.invert #contentPanel { margin-left: unset; width: 100%; margin: auto; margin-top: 10%; width: 100%; }
#panelLeft.invert #contentPanel .topTitle { margin-left: auto; margin-right: auto; }
#panelLeft.invert #contentPanel input[type=password] { margin-bottom: unset; }
#panelLeft.invert #contentPanel #terms-element { display: inline-block; margin-top: 20px; }
#panelLeft.invert #contentPanel input[type=checkbox] { width: 30px; height: 30px; }

#registrationTypesPanel a {
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;    
	background-color: #bbbbbb;
    color: #ffffff;
	text-decoration: none;
	font-size: 1.5em;
    padding: 30px;
    margin: 5px;
    display: inline-block;
}
#typesDiv {
    margin-top: 50px;
    margin-bottom: 80px;
}

#panelLeft.invert #contentPanel .verifyAccount { margin-top: 45%; }

#formEvents #start-element { width: 48% !important; display: inline-block !important; margin-right: 2%; }
#formEvents #end-element { width: 48% !important;  display: inline-block !important; }
#formEvents #domain-element { width: 48% !important; display: inline-block !important; margin-right: 1%; }
#formEvents #domain_extension-element { width: 48% !important;  display: inline-block !important; margin-left: 1%; }
#formEvents #langs-element { margin-top: 20px; }
#formEvents #langs-element input { margin-bottom: 20px; }
#formEvents #submit { margin-bottom: unset !important; }
#formEvents #cancelBack { margin-bottom: 30px;}


#layoutMenu { border-right: 2px solid #eeeeee; text-align: center; width: 200px; height: 100%; vertical-align: top; display: inline-block; background: #ffffff; }
#layoutMenu .logoTop { height: 30px; margin-top: 20px; }
#layoutMenu #menuButtons { height: calc(100% - 148px); margin-top: 40px; overflow-y: auto; }
#layoutMenu #menuButtons .menuButton { padding-top: 25px; padding-bottom: 25px; vertical-align: middle; font-size: 12px; }
#layoutMenu #menuButtons .menuButton img { width: 30px; display: block; margin: auto; margin-bottom: 10px; }
#layoutMenu #menuButtons .menuButtonSelected { background: #93c021; color: #ffffff; }
#layoutMenu .logoBottom { height: 78px; }
#layoutContainer { width: calc(100% - 202px); height: 100%; vertical-align: top; display: inline-block; }
#layoutContainer .menuTop { padding: 2%; padding-top: 10px; padding-bottom: 10px; display: block; text-align: right; }
#layoutContainer .menuTop a { text-decoration: none; color: inherit; }
#layoutContainer .menuTop #langs { color: #cccccc; margin-right: 15px; }
#layoutContainer .menuTop #accountFunds { float: left; margin-bottom: 30px; }
#layoutContainer .menuTop #menuLinks { float: right; margin-bottom: 30px; }
#layoutContainer #layoutContent { position: relative; height: calc(100% - 40px); padding-top: 10px; display: block; width: 100%; overflow-y: auto; }
#listArea { width: 95%; height: calc(100% - 60px); margin: auto; }

#layoutContainer.containerAdmin { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; }

@media only screen and (max-width: 1600px) {
    #panelLeft #contentPanel { width: 75%; margin-left: 24%; }
    #panelRight #infoText { margin-top: 25%; }
}
@media only screen and (max-width: 1500px) {
    #panelLeft #contentPanel input[type=submit] { margin-top: 20px; font-size: 15px; }
    #panelLeft #contentPanel input[type=text], #panelLeft #contentPanel input[type=password] { font-size: 15px; }
    #panelLeft #contentPanel select { margin-top: 20px; font-size: 15px; }
    #panelLeft #contentPanel .linksText { font-size: 12px; }
    #panelLeft #contentPanel .loginTitle { font-size: 20px; margin-bottom: 30px; margin-top: 20px; }
    #panelRight #infoText { margin-left: 35%; }
    #panelRight #infoText .title { font-size: 23px; }
    #panelRight #infoText .text { font-size: 14px; }
}
@media only screen and (max-width: 1300px) {
    #panelRight #infoText { margin-left: 38%; }
    #panelRight #infoText .title { font-size: 21px; }
    #panelRight #infoText .text { font-size: 13px; }
}
@media only screen and (max-width: 1160px) {
    #logoTop.invert { position: absolute; left: 2%; right: unset;}
    #panelLeft { 
        width: 100%; 
        background: linear-gradient(to right, transparent 75%,#cbef99 85%,#93c021 100%);
        /*background-image: url('../../images/eventsport/background_right.png'); 
        background-position: 400px 0; */
    }
    #panelLeft #contentPanel {width: 70%; margin-left: 15%; margin-right: 15%; margin-top: 15%;  }
    #panelLeft #registLogin { text-shadow: 1px 1px #ffffff; display: block; visibility: visible; font-size: 11px; margin-bottom: 20px; text-align: center; }
    #panelLeft #registLogin label { text-decoration: underline; }
    #panelRight { display: none; }   
    #panelLeft #contentPanel { max-width: 400px; margin-left: auto; margin-right: auto; }
}
@media only screen and (max-width: 700px) {
    #panelLeft { 
        width: 100%; 
        background: none;
    }
    #layoutMenu { width: 80px; }
    #layoutMenu .logoTop { height: unset; height: 15px; margin-bottom: 0; }
    #layoutMenu #menuButtons { height: calc(100% - 50px); margin-top: 10px; }
    #layoutMenu .logoBottom { display: none; }
    #layoutContainer { width: calc(100% - 82px); }
}
@media only screen and (max-width: 540px) {
    #panelLeft #contentPanel .linkRegistration { float: none; display: inline-block; margin-right: 20px; }
    #panelLeft #contentPanel .linkRecover { float: none; display: inline-block; }
    #menuCalendar { display: none; }
}
@media only screen and (max-width: 520px) {
    #panelLeft { background-position: 340px 0; }
}
@media only screen and (max-width: 420px) {
    #panelLeft { background-position: 240px 0; }
}
@media only screen and (max-width: 320px) {
    #panelLeft { background-position: 160px 0; }
}