/*
    --main-color
    --main-negative-color
    --title-color
    --body-color
*/
/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin-ext');*/
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(../fonts/OpenSans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(../fonts/OpenSans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(../fonts/OpenSans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/*
@font-face {
  font-family: 'UbuntuRegular';
  src:  url(../fonts/Ubuntu-Regular.woff) format('woff2'),
        url(../fonts/Ubuntu-Regular.ttf)  format('truetype');
}

@font-face {
  font-family: 'UbuntuBold';
  src:  url(../fonts/Ubuntu-Bold.woff) format('woff2'),
        url(../fonts/Ubuntu-Bold.ttf)  format('truetype');
}
*/

html, body {
    background: #fff;
    color: var(--body-color);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 15px;
    height: 100%;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 1000px) {
    html, body {
	    font-size: 14px;
	}
}

#wrapper {
    display: flex;
    flex-direction: row-reverse;
    min-height: 100%;
}

@media screen and (max-width: 1000px) {
	#wrapper {
	   flex-direction: column-reverse;
	}
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fff inset;
}

a {
	color: var(--title-color);
}

h1, h2, h3, h4 {
	color: var(--title-color);
	font-size: 32px;
	font-weight: bold;
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

.subtitle {
    color: var(--body-color);
    font-size: 18px;
}

.captcha {
	border: 1px solid rgba(0, 0, 0, 0.25);
	padding: 2px;
	border-radius: 3px;
}

p {
	margin: 0 0 1em 0;
}

label {
	color: var(--title-color);
	font-size: 15px;
	font-weight: 400;
}

.full-size label {
    display: block;
    text-align: left;
    margin-bottom: 0.25em;
}

.checkbox-wrapper label {
	display: inline;
}

/* |Primefaces: Messages */
.ui-messages-info, .ui-messages-warn, .ui-messages-error, .ui-messages-fatal {
	margin: 0 0 1.5em 0;
    padding: 1em;
}

.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon {
    display: none;
}

.ui-messages ul,
.ui-messages-info-summary,
.ui-messages-warn-summary,
.ui-messages-error-summary,
.ui-messages-fatal-summary,
.ui-message-info-summary,
.ui-message-warn-summary,
.ui-message-error-summary,
.ui-message-fatal-summary {
    margin: 0;
}

.ui-message-error,
.ui-messages-error {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.ui-messages-error {
	margin-bottom: 1.5em;
	padding: 1em;
	border-radius: 0.15rem;
}

.ui-messages-error-summary {
	font-weight: normal;
}

    .ui-message-error .ui-message-error-icon,
    .ui-messages-error .ui-messages-error-icon {
        display: none;
    }
    
    .ui-message-error .ui-message-error-detail,
    .ui-messages-error .ui-messages-error-detail {
        margin: 0;
    }

/* |Primefaces: Checkbox */
.ui-chkbox {
	vertical-align: sub;
	margin-right: 0.25em;
}

	.ui-chkbox .ui-chkbox-box.ui-state-default {
		border: 1px solid var(--body-color);
		cursor: pointer;
	}
	
	.ui-chkbox .ui-chkbox-box.ui-state-active {
	    border: 1px solid var(--title-color);
	}
	
	.ui-chkbox .ui-chkbox-box.ui-state-active .ui-icon-check:after {
	   color: var(--title-color);
	   content: "✓";
	   display: block;
	   font-size: 16px;
	   height: 16px;
	   line-height: 16px;
	   text-align: center;
	   text-indent: 0;
	   width: 16px;
	}

/* |Primefaces: InputText, Password */
.ui-password,
.ui-inputtext {
	background: #fff;
	border: 1px solid var(--title-color);
	border-radius: 3px;
	box-sizing: border-box;
	color: var(--title-color);
	font-size: 15px;
	opacity: 0.7;
	padding: 0.75em;
	transition: all 0.15s ease-in;
}

    .ui-password.ui-state-focus,
    .ui-inputtext.ui-state-focus {
        opacity: 1;
    }
    
    .ui-password.ui-input-invalid,
    .ui-inputtext.ui-input-invalid {
        border-color: red;
    }
    
.full-size .ui-password,
.full-size .ui-inputtext {
    display: block;
    width: 100%;
}

/* |Primefaces: Button */
.ui-button {
	background: var(--main-color);
	border: 0;
	border-radius: 3px;
	color: var(--main-negative-color);
	font-size: 18px;
	padding: 0.65em 2.5em;
	transition: all 0.15s ease-in;
}

    .ui-button.ui-button-text-only .ui-button-text {
        padding: 0;
    }

    .ui-button.ui-state-hover,
    .ui-button.ui-state-active,
    .ui-button:hover,
    .ui-button:active {
        opacity: 0.9;
    }
    
    .ui-button.secondary {
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.45);
        color: var(--body-color);
        display: inline-block;
        font-size: 18px;
        opacity: 0.8;
        padding: 0.65em 1.5em;
        text-decoration: none;
        transition: all 0.15s ease-in;
    }
    
    .ui-button.secondary:hover,
    .ui-button.secondary:hover {
        box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.45);
        opacity: 1;
    }
    
    .ui-button.ui-state-disabled,
    .ui-button.ui-state-disabled.ui-state-hover,
    .ui-button.ui-state-disabled.ui-state-active,
    .ui-button.ui-state-disabled:hover,
    .ui-button.ui-state-disabled:active {
        opacity: 0.5;
    }
    
/* =|File upload
------------------------------------- */
.fileupload-buttonbar .ui-button input,
input.file-upload {
    border: 0;
}

.uploadPDF,
#uploadPDF {
    background: url(../images/icons/upload-icons.png) no-repeat 50% 15px;
    margin-top: 1em;
    padding: 10em 0 1em 0;
    text-align: center;
}

.uploadPDF.mini,
#uploadPDF.mini {
    padding-bottom: 0;
    margin-top: 0;
    position: relative;
}

.uploadPDF.alert,
#uploadPDF.alert {
    background: #fffae4;
    border: 1px solid #e6d06a;
    padding: 1em;
    margin: 0 0 1em 0;
}

    .uploadPDF.alert a,
    #uploadPDF.alert a {
        color: #666;
        text-decoration: underline;
        font-size: 14px;
    }

.uploadPDF.uploaded,
#uploadPDF.uploaded {
    background-image: url(../images/icons/upload-icons-tick.png);
}

.uploadPDF .text-info,
#uploadPDF .text-info {
    margin:0;
}

.uploadPDF.mini .text-info,
#uploadPDF.mini .text-info {
    margin-bottom:1em;
}

.uploadPDF.alert .text-info,
#uploadPDF.alert .text-info {
    margin-bottom:1em;
}

.uploadPDF.alert input, .uploadPDF.alert button,
#uploadPDF.alert input, #uploadPDF.alert button {
    display: inline-block;
    height: 1px !important;
    width: 1px !important;
    padding: 0 !important;
}

.uploadPDF .upload .upload-trigger,
#uploadPDF .upload .upload-trigger {
    color: #666;
    font-size: 1.3461em;
    text-decoration: underline;
    position: relative;
    z-index: 10;
    text-transform: lowercase;
}

.uploadPDF .upload .upload-trigger:hover,
#uploadPDF .upload .upload-trigger:hover {
    color: #333;
    text-decoration: underline;
}

.uploadPDF .upload .filename,
#uploadPDF .upload .filename {
    font-size: 1.1em;
    color: #999;
}

.uploadPDF .upload .button,
#uploadPDF .upload .button {
    visibility: hidden;
}

.uploadPDF .upload .fileupload-buttonbar,
#uploadPDF .upload .fileupload-buttonbar {
    display: none;
}

.uploadPDF .upload .ui-fileupload,
#uploadPDF .upload .ui-fileupload {
    border: 0;
    background: transparent;
    position: absolute;
    border: 5px dashed #eee;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 10;
}

.uploadPDF .upload .ui-fileupload.is-dragover,
#uploadPDF .upload .ui-fileupload.is-dragover {
    border-color: #aaa;
}

.uploadPDF .upload .ui-fileupload .ui-widget-content,
#uploadPDF .upload .ui-fileupload .ui-widget-content {
    border: 0;
    background: transparent;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.uploadPDF .upload .ui-fileupload .ui-widget-content .files,
#uploadPDF .upload .ui-fileupload .ui-widget-content .files {
    display: none;
}

.upload-target {
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    width: 1px;
}
    
/* |Group select */
.group-select {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

    .group-select li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        list-style-type: none;
        opacity: 0.85;
        position: relative;
        padding-right: 20px;
        transition: all 0.15s ease-in;
    }
    
    .group-select li:hover {
        opacity: 1;
    }
    
    .group-select li:last-child {
        border: 0;
    }
    
    .group-select li:after {
        content: "▸";
        margin-top: -0.75em;
        position: absolute;
        right: 5px;
        top: 50%;
    }
    
    .group-select a {
        display: block;
        padding: 1em 0;
        text-decoration: none;
    }
    
    .group-select .group-name,
    .group-select .group-desc {
        display: block;
    }
    
    .group-select .group-name {}
    
    .group-select .group-desc {}

/* |Marketing */
#marketing {
	align-items: center;
    background: var(--main-color) url(../images/content/marketing-bg-image.png) no-repeat 50% 50%;
    background-size: cover;
    color: var(--main-negative-color);
    box-sizing: border-box;
    display: flex;
    flex: 1 1 50%;
    flex-direction: row;
    padding: 0 5%;
}

@media screen and (max-width: 1000px) {
    #marketing {
        display: none;
    }
}

    #marketing-content {
        flex: 1 1 auto;
    }

	#marketing-content h1 {
        color: var(--main-negative-color);
        letter-spacing: 0.8px;
        margin: 0 0 1.5em 0;
        text-align: center;
        text-transform: uppercase;
    }

    #marketing-content ul {
        list-style-type: none;
        margin: 0 10% 0 20%;
        padding: 0;
    }
    
    @media screen and (max-width: 1000px) {
        #marketing-content ul {
            margin: 0 5%;
        }
    }

        #marketing-content ul li {
            background: url(../images/icons/ic_checkmarketing.png) no-repeat 0 50%;
            background-size: 24px;
            font-size: 20px;
            list-style-type: none;
            margin-bottom: 1.5em;
            padding-left: 40px;
        }

/* |Content */
#content {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
}

@media screen and (max-width: 1000px) {
	#content {
	   padding: 0.5em 0.5em 0 0.5em;
	}
}

    #content-wrapper {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
	justify-content: center;
        margin: 0 auto;
        max-width: 500px;
        padding: 2.5em;
    }
    
    @media screen and (max-width: 1000px) {
        #content-wrapper {
            padding-top: 0;
        }
    }

        #content-wrapper #logo {
            text-align: center;
        }
        
            #content-wrapper #logo img {
                display: block;
                max-width: 275px;
                max-height: 125px;
                width: auto;
                height: auto;
                margin: 0 auto;
            }
        
        @media screen and (max-width: 1000px) {
            #content-wrapper #logo {
                margin: 0;
            }
            
            #content-wrapper #logo img {
                max-width: 65%;
            }
        }
        
        #content-wrapper h2 {
            font-size: 32px;
            margin: 0 0 1em 0;
        }
        
        .without-marketing #content-wrapper h2 {
            text-align: center;
        }
        
        #content-wrapper .subtitle {
            margin-bottom: 2em;
            margin-top: -2em;
        }
        
        @media screen and (max-width: 1000px) {
	        #content-wrapper h2,
	        #content-wrapper .subtitle {
	            text-align: center;
	        }
	    }

/* |Footer */
#content footer {
    align-items: center;
    display: flex;
    padding: 1em;
}

@media screen and (max-width: 1000px) {
    #content footer {
        background: #efefef;
        flex-direction: column-reverse;
        margin: 0 -0.5em;
    }	
}

    #content footer .app-info {
        color: var(--body-color);
        font-size: 10px;
        line-height: 1.65;
        opacity: 0.4;
    }
    
    #content footer .app-info a {
        color: var(--title-color);
        text-decoration: none;
        margin-right: 0.5em;
    }
    
    #content footer .app-info a.active {
        text-decoration: underline;
    }
    
    @media screen and (max-width: 1000px) {
        #content footer .app-info {
            width: 100%;
        }
    }

        #content footer .app-info p {
            margin: 0;
        }

    #content footer .links {
        color: var(--body-color);
        flex: 1 1 auto;
        text-align: right;
    }
    
    @media screen and (max-width: 1000px) {
        #content footer .links {
            margin: 1em 0 2em 0;
            text-align: center;
        }
    }
        
/* |Login */
#login {}
    
    #login .remember-pass-wrapper {
        margin-top: 2em;
    }
    
    @media screen and (max-width: 1000px) {
        #login .remember-pass-wrapper {
            font-size: 18px;
            text-align: center;
        }
    }
    
    #login .input-password-wrapper {
        margin-bottom: 1.75em;
        text-align: right;
    }
    
        #login .input-password-wrapper .ui-inputtext {
            margin-bottom: 0.25em;
        }
        
	#login .ui-button.secondary {
	    background-image: url(../images/icons/ic_lockmarketing.png);
	    background-repeat: no-repeat;
	    background-position: 20px 50%;
	    background-size: 18px 24px;
	    padding-left: 50px;
	}
    #login .button-wrapper {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
	    justify-content: space-between;
        margin: 0 auto;
    }

    @media screen and (max-width: 1000px) {
        #login .button-wrapper {
             display: block;
        }
    }

	#login .ui-button.secondary-back {
	    background-image: url(../images/icons/ic_previous_page.svg);
	    background-repeat: no-repeat;
	    background-position: 20px 50%;
	    background-size: 18px 24px;
	    padding-left: 50px;
    }

    @media screen and (max-width: 1000px) {
        #login .login-certificate,
        #login .login-seus,
        #login .ui-button {
            box-sizing: border-box;
            display: block;
            width: 100%;
        }
        
        #login .login-certificate,
        #login .login-seus {
            font-size: 16px;
        }
    }

/* |Reset password */
#reset-password {}

    #reset-password .input-captcha-wrapper,
    #reset-password .input-email-wrapper {
        margin-bottom: 1em;
    }
    
    #reset-password .checkbox-wrapper label {
        color: var(--body-color); 
        font-size: 16px;
    }