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

.mainColor { color: #24607a !important; }
.mainBackground { background-color: #24607a !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: 2%; left: 2%; height: 30px; z-index: 1000; }
.userLink { text-shadow: 2px 2px #ffffff !important; }

#panelLeft { 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 #4e8d9f; margin-bottom: 50px; }
#panelLeft #contentPanel input[type=text] { font-size: 19px; width: calc(100% - 22px); margin: auto; border: 0; border-left: 5px solid #4e8d9f; background: #efefef; padding: 11px; margin-top: 20px; }
#panelLeft #contentPanel input[type=password] { font-size: 19px; width: calc(100% - 22px); margin: auto; border: 0; border-left: 5px solid #4e8d9f; background: #efefef; padding: 11px; margin-top: 20px; }
#panelLeft #contentPanel select { font-size: 19px; width: 100%; margin: auto; margin-bottom: 20px; border: 0; border-left: 5px solid #4e8d9f; background: #efefef; padding: 11px; margin-top: 20px; }
#panelLeft #contentPanel .linksText { display: inline-block; margin-top: 10px; font-size: 13px; padding-bottom: 5px; border-bottom: 1px solid #4e8d9f; cursor: pointer; }
#panelLeft #contentPanel .linkRegistration { float: left; }
#panelLeft #contentPanel .linkRecover { float: right; }
#panelLeft #contentPanel input[type=submit] { cursor: pointer; margin-top: 50px; margin-bottom: 50px; font-size: 17px; letter-spacing: 4px; background: #265871; 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 { border: 1px solid red !important; }
#panelLeft #contentPanel input[type=checkbox].errorField {outline: 2px solid red; }


#panelRight { width: 55%; height: 100%; display: inline-block; position: absolute; top: 0; background-image: url('../images/default/layout/background.jpg'); background-size: cover; 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; }


#logoTop.invert { position: absolute; left: unset; right: 2%; }
#panelRight.invert { background-image: url('../images/default/layout/background_invert.jpg'); background-position: right; width: 54%; position: relative; vertical-align: top; }
#panelRight.invert #infoText { margin-left: 5%; margin-right: 30%; }
#panelLeft.invert #contentPanel { margin-left: unset; width: 100%; margin: auto; margin-top: 10%; width: 55%; }
#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; vertical-align: middle; }

#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: #24607a; 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; }

#layout-admin #layoutContainer #layoutContent {
    height: calc(100% - 100px);
}

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

@media only screen and (max-width: 1500px) {
    #panelLeft #contentPanel { width: 75%; margin-left: 20%; }
    #panelRight #infoText { margin-top: 25%; }
}
@media only screen and (max-width: 1200px) {
    #formEvents #start-element { width: 100% !important; display: block !important; margin-right: 0; }
    #formEvents #end-element { width: 100% !important; display: block !important; margin-right: 0; }
    #formEvents #domain-element { width: 100% !important; display: block !important; margin-right: 0; }
    #formEvents #domain_extension-element { width: 100% !important; display: block !important; margin-right: 0; }
}
@media only screen and (max-width: 1040px) {
    #panelLeft #contentPanel .linkRegistration { float: none; display: inline-block; margin-right: 20px; }
    #panelLeft #contentPanel .linkRecover { float: none; display: inline-block; }
    #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: 900px) {
    #panelRight #infoText { margin-left: 38%; }
    #panelRight #infoText .title { font-size: 21px; }
    #panelRight #infoText .text { font-size: 13px; }
}
@media only screen and (max-width: 810px) {
    #logoTop.invert { position: absolute; left: 2%; right: unset;}
    #panelLeft { width: 100%; background-image: url('../images/default/layout/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 400px 0; }
    #panelLeft #contentPanel {width: 70%; margin-left: 15%; margin-right: 15%; margin-top: 15%;  }
    #panelLeft #registLogin { display: block; visibility: visible; font-size: 11px; margin-bottom: 20px; }
    #panelLeft #registLogin label { text-decoration: underline; }
    #panelRight { display: none; }   
}
@media only screen and (max-width: 700px) {
    #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) {
    #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; }
}