body {
    background-image: url('../img/background.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.title {
    margin-bottom: 15px;
}

#kc-header, #kc-content {
    margin-left: auto;
    margin-right: auto;
}

#kc-header {
    width: 90%;
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
    margin-top: 20px;
    color: rgb(68, 68, 68);
}

#kc-content {
    background: white;
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
}

#kc-logo {
    padding: 0 20px;
}

#kc-logo-wrapper {
    background-image: url('../img/logo.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    height: 100px;
    width: 600px;
    max-width: 100%;

    margin: 20px auto 0 auto;
}

.kc-logo-text {
    font-weight: bold;
    color: #93c01c;
    text-shadow: #333333 0 1px 2px;
}

#kc-locale {
    display: none;
}

#kc-social-providers {
    margin-top: 20px;
}

#kc-social-providers ul {
    list-style-type: none;

    padding-left: 0;
}

#kc-social-providers li {
    margin-top: 10px;
}

#kc-social-providers .zocial {
    padding: 6px 20px;
    font-size: 20px;
}

/* Shared */
#kc-social-providers .zocial {
    display: block;

    box-sizing: border-box;
    position: relative;
    /* width: 13em;  - apply for fixed size */
    margin: 0.2em;
    padding: 0 15px 0 46px;
    border: none;
    text-align: left;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 16px;
    color: #FFF;
}

#kc-social-providers .zocial:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
}

#kc-social-providers .zocial:focus {
    outline: none;
}

#kc-social-providers .zocial:active {
    box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}

/* Facebook */
#kc-social-providers .zocial.facebook {
    background-color: #4C69BA;
    background-image: linear-gradient(#4C69BA, #3B55A0);
    font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;
    text-shadow: 0 -1px 0 #354C8C;
}
#kc-social-providers .zocial.facebook:before {
    border-right: #364e92 1px solid;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmZmYyZjIyZi04ZDdlLTQzNjEtYjM2Zi02NGFiYmI2Nzg3ZDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTREMzBERkE2NjFBMTFFNDk5OEZFQ0REMkU5OTk0QTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTREMzBERjk2NjFBMTFFNDk5OEZFQ0REMkU5OTk0QTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNGZlZTRmMS0wMGNjLTRlZTEtYTY5MS00MjJmOGUxY2VmYjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ZmZmMmYyMmYtOGQ3ZS00MzYxLWIzNmYtNjRhYmJiNjc4N2Q1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+F7pueQAAAKpJREFUeNpi+P//PwM2jA0AxZWBeA4QP/2PCl5j6CfWYKCYJRB//o8boOhnxOU6RkZGZENZgNQNIFZmwA0YkTksDMQBOyyGvgfic0D8BZsGYg3WQeP/AGItoK9eIPkKRQETkQYLofHvIxuKDRBrMDr4RUgBuQYTBDhTBSjYSDDnGhBr08LFd2kVFPdoZfBdbFmVYJYG8hvQsu8FQubQLFWMGjxq8HAwGCDAAM8dwEI+7fo0AAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: 6px 6px;
}
#kc-social-providers .zocial.facebook:hover,
#kc-social-providers .zocial.facebook:focus {
    background-color: #5B7BD5;
    background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */
#kc-social-providers .zocial.google {
    font-family: "Roboto", Roboto, arial, sans-serif;
    background: #DD4B39;
}
#kc-social-providers .zocial.google:before {
    border-right: #BB3F30 1px solid;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmZmYyZjIyZi04ZDdlLTQzNjEtYjM2Zi02NGFiYmI2Nzg3ZDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTREMzBERkU2NjFBMTFFNDk5OEZFQ0REMkU5OTk0QTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTREMzBERkQ2NjFBMTFFNDk5OEZFQ0REMkU5OTk0QTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDc0NzYwYi1hZmQ4LTRkZWItOTlkNi1lOWZmMDg4MGMwYjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ZmZmMmYyMmYtOGQ3ZS00MzYxLWIzNmYtNjRhYmJiNjc4N2Q1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DeZ1XQAAAbJJREFUeNqUlE0oBVEUx+/Me/nY+FhYUGRBFCteCin1VmKFhSzsJCsLOySbV5LFW1hIlkrKRolSJAsLC1LyFqSUp9RbkPLN+E+dp3+3uTPXrV/3zL3n/O/cM2eO8jxP6fDAcwwMgW3w4JnHNxj70wgThl0KjiRwGlSBRrBMgm9gAfRJjJXwrgQvKW1gLUXiW7QeLoy5hQI7A4Tj4IZ82ljYVebRQXZO33Qc5wvTGi21836YcJzsBoPPOdkxW2EOGlHR41DPlSnHLjilHA4H5HlV9lasP5441YKMBP/41QESoB7M5CvGr/V/CYtjsRT+jlTBO90iFXALO+GAQE5PwiTsqv+PIrL9P7AyyMlaGAKFoBrmJi23gjOsdynTqxs+XjNIg0vwLH1jQxrSHaXkE4xG5hg4YF461geYBSXaC/k+veCWDuiJEh4n5/6IFNWAR/E9iRK+Esdjy/ynqYWGVkWdzPeW3zarF4Mb4ZjE6WUWwkmZ90OrQsvxASg3pMDvJ1Pi9wSabBr9BHiVoBxYBAOgGwyCOXAh+5n8X2jbhCrAJNgDWbrFC7gG63JIgZ6BXwEGAC72X0BkOgIGAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: 6px 6px;
}
#kc-social-providers .zocial.google:hover,
#kc-social-providers .zocial.google:focus {
    background: #E74B37;
}

#kc-terms-text {
    margin-bottom: 2rem;
}

.btn-primary {
    background-color: rgb(147, 192, 28);
    border-color: rgb(147, 192, 28);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: rgb(147, 192, 28);
    border-color: rgb(147, 192, 28);
}

a {
    color: rgb(147, 192, 28);
}

a:hover, a:active, a:focus {
    color: rgb(147, 192, 28);
}

@media (max-width: 768px) {
    #kc-content {
        width: 90%;
    }
}

@media (min-width: 769px) {
    #kc-content {
        width: 360px;
    }
}

.password-container {
    margin-top: 15px;
    margin-bottom: 20px;
}

.accept-terms-and-conditions {
    padding: 1rem 0;
}

#kc-login {
    float: right;
}

#kc-error-message p {
    margin: 0;
}

.checkbox {
    margin-bottom: 0;
}

.remember-me-checkbox label {
    padding-left: 0;
}

.register .register-field {
    margin-bottom: 15px;
}

.register .register-button-container {
    margin-top: 20px;
}

.reset-password .reset-password-field {
    margin-bottom: 15px;
}

.update-password .update-password-field {
    margin-bottom: 15px;
}

.update-password .update-password-button-container {
    margin-top: 20px;
}

.config-totp .config-totp-button-container {
    margin-top: 15px;
}

.totp .totp-button-container {
    margin-top: 15px;
}

.update-profile .update-profile-field {
    margin-top: 15px;
}

.update-profile .update-profile-button-container {
    margin-top: 20px;
}

.template .language-picker {
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 160px;
}

.template .language-picker .form-group {
    white-space: nowrap;

    /* the below keeps the label in "inline" mode even on narrow screens */
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.template .language-picker .language-picker-dropdown-label i {
    vertical-align: middle;
    margin-right: 7px;
    margin-left: -7px;
    color: #9ca2af;
}

.template .language-picker select.form-control {
    border-color: #afb0b3;
    background: transparent;

    /* the below keeps the <select> in "inline" mode even on narrow screens */
    display: inline-block;
    width: auto;
    vertical-align: middle;
}