.login-pf body {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1976.99 1044'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='1' x2='0' y1='.63' y2='.63' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%236c63ff'/%3E%3Cstop offset='1' stop-color='%23098ba7'/%3E%3C/linearGradient%3E%3ClinearGradient id='a' x2='1' y1='.51' y2='.51' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='gray' stop-opacity='.25'/%3E%3Cstop offset='.54' stop-color='gray' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='gray' stop-opacity='.1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x2='1.01' y1='.49' y2='.49' xlink:href='%23a'/%3E%3ClinearGradient id='d' x2='1.01' y1='.51' y2='.51' xlink:href='%23a'/%3E%3C/defs%3E%3Cg opacity='.3'%3E%3Cpath fill='%23fff' d='M1242.37 262.34h-29.4a20.6 20.6 0 100-41.14H974.89a20.6 20.6 0 000 41.14h29.4a20.6 20.6 0 100 41.14h-41.14a20.6 20.6 0 100 41.14h238.09a20.6 20.6 0 100-41.14h41.14a20.6 20.6 0 100-41.14z' opacity='.22'/%3E%3Cpath fill='%23252223' d='M1976.99 892.17c-19.41 5.79-39.75 10.79-59.81 15.78-74.13 18.11-149.38 36.39-229.01 42.6-149.56 11.53-303.9-20.04-450.85-.34-123.09 16.44-224.89 56.83-345.14 79.27-55.92 10.43-114.1 14.52-172.8 14.52h-7.57q-10.9-.08-21.65-.32c-59.51-1.29-158.97-7.68-217.31-14.2-184.22-20.51-332-46.82-472.85-116.05 410.1-43.37 1254.82-109.94 1977-21.26z' opacity='.64'/%3E%3Cpath fill='url(%23b)' d='M1388.07 379.81V282.2h-57.97v97.62h-68.64V228.8h-50.34V115.93h-41.18V0h-85.42v115.93h-41.19V228.8h-48.8V93.05h-27.46V24.4H950.3v68.64h-97.62v433.2h-74.74v-45.76h-45.76v45.76h-74.75V379.8H523.2v-97.6h-57.97v97.62h-3.05v187.62h-61.01V457.6h-73.22v109.83h-61.01V228.8h-47.29V115.93L168.27 24.4h-67.9l-54.61 91.52V228.8H0v596.41h1456.7v-445.4z' opacity='.66' transform='translate(463.52)'/%3E%3Cpath fill='%23fff' d='M492.5 263.88h64.06v36.61H492.5zM699.95 300.5h-64.06v-36.62h64.06zM492.5 335.58h64.06v36.6H492.5zM699.95 372.19h-64.06v-36.61h64.06zM492.5 407.27h64.06v36.6H492.5zM699.95 443.88h-64.06v-36.61h64.06zM492.5 478.96h64.06v36.61H492.5zM699.95 515.57h-64.06v-36.61h64.06zM492.5 550.65h64.06v36.61H492.5zM699.95 587.26h-64.06v-36.61h64.06zM492.5 622.34h64.06v36.61H492.5zM699.95 658.95h-64.06v-36.6h64.06zM492.5 694.03h64.06v36.61H492.5zM699.95 730.64h-64.06v-36.6h64.06zM753.34 604.04h149.48v18.3H753.34zM753.34 631.5h149.48v18.3H753.34zM753.34 658.95h149.48v18.3H753.34zM1143.83 613.19h149.48v18.3h-149.48zM1143.83 640.65h149.48v18.3h-149.48zM1143.83 668.1h149.48v18.3h-149.48zM753.34 686.4h149.48v18.3H753.34zM753.34 713.86h149.48v18.3H753.34zM753.34 741.32h149.48v18.3H753.34zM957.73 414.9h41.18v53.39h-41.18zM1088.91 468.28h-41.18V414.9h41.18zM957.73 500.31h41.18v53.4h-41.18zM1088.91 553.7h-41.18v-53.39h41.18zM957.73 585.73h41.18v53.4h-41.18zM1088.91 639.12h-41.18v-53.39h41.18zM957.73 671.15h41.18v53.4h-41.18zM1088.91 724.54h-41.18v-53.39h41.18zM1359.97 128.13h54.91v70.17h-54.9zM1359.97 228.8h54.91v70.17h-54.9zM1359.97 329.48h54.91v70.17h-54.9zM1359.97 430.15h54.91v70.17h-54.9zM1359.97 530.82h54.91V601h-54.9zM1359.97 631.5h54.91v70.17h-54.9zM1489.32 271.51h204.4v59.5h-204.4zM1490.08 399.64h204.4v59.5h-204.4zM1490.84 527.77h204.4v59.5h-204.4zM1491.6 655.9H1696v59.49h-204.4zM537.28 147.96h27.46v57.96h-27.46zM1550.28 144.96h27.46v57.96h-27.46zM1610.28 144.96h27.46v57.96h-27.46zM1576.28 33.96h27.46v57.96h-27.46zM587.28 147.96h27.46v57.96h-27.46zM637.28 147.96h27.46v57.96h-27.46zM1851.59 414.9h68.64v88.47h-68.64zM1851.59 543.02h68.64v88.47h-68.64zM1851.59 671.15h68.64v88.47h-68.64z' opacity='.4'/%3E%3Cpath fill='none' stroke='%23535461' stroke-miterlimit='10' stroke-width='2' d='M391.15 1037.6s-37.63-127.76 7.06-221.8c18.76-39.46 24.99-83.77 16.32-126.6a339.39 339.39 0 00-17.92-59.49'/%3E%3Cpath fill='%2379bfe0' d='M424.36 570.36c0 15.66-28.36 61-28.36 61s-28.35-45.4-28.35-61a28.36 28.36 0 1156.7 0zM475.28 653.09c-8.51 13.15-56.99 35.84-56.99 35.84s.89-53.52 9.4-66.67a28.36 28.36 0 0147.6 30.81zM469.22 805.3c-13.99 7.05-67.29 2.19-67.29 2.19s27.78-45.76 41.77-52.8a28.35 28.35 0 1125.54 50.62zM442.42 917.1c-12.59 9.3-65.96 13.52-65.96 13.52s19.65-49.8 32.23-59.11a28.36 28.36 0 1133.73 45.6zM351.76 719.97c11.23 10.9 63.56 22.21 63.56 22.21s-12.81-51.97-24.04-62.89a28.36 28.36 0 10-39.5 40.67zM325.07 827.1c13.99 7.05 67.29 2.19 67.29 2.19s-27.78-45.76-41.77-52.81a28.35 28.35 0 10-25.53 50.63zM313.7 958.53c12.6 9.3 65.96 13.51 65.96 13.51s-19.64-49.8-32.24-59.1a28.36 28.36 0 10-33.73 45.59z'/%3E%3Cpath fill='none' stroke='%23535461' stroke-miterlimit='10' stroke-width='2' d='M1820.75 886.6s-37.63-127.75 7.06-221.8c18.76-39.45 24.98-83.76 16.32-126.6a339.39 339.39 0 00-17.92-59.48'/%3E%3Cpath fill='%236c63ff' d='M1854.01 419.36c0 15.67-28.35 61.02-28.35 61.02s-28.36-45.41-28.36-61.02a28.36 28.36 0 1156.7 0zM1900.87 506.1c-8.5 13.14-56.98 35.84-56.98 35.84s.88-53.52 9.4-66.67a28.36 28.36 0 1147.59 30.81zM1898.83 654.32c-13.99 7.04-67.28 2.18-67.28 2.18s27.77-45.76 41.76-52.8a28.35 28.35 0 1125.54 50.62zM1872.03 766.1c-12.58 9.3-65.96 13.52-65.96 13.52s19.65-49.79 32.23-59.1a28.36 28.36 0 1133.73 45.59zM1784.35 544.93c11.23 10.9 63.56 22.21 63.56 22.21s-12.81-51.97-24.04-62.89a28.36 28.36 0 10-39.52 40.68zM1754.73 676.11c13.99 7.05 67.28 2.18 67.28 2.18s-27.77-45.76-41.76-52.8a28.36 28.36 0 00-25.52 50.62zM1743.3 807.54c12.59 9.3 65.96 13.51 65.96 13.51s-19.65-49.79-32.23-59.1a28.36 28.36 0 10-33.73 45.59z'/%3E%3Cpath fill='none' stroke='%23535461' stroke-miterlimit='10' stroke-width='2' d='M1651 874.18s-20.22-68.64 3.8-119.2a108.44 108.44 0 008.77-68.02 182.4 182.4 0 00-9.62-31.93'/%3E%3Cpath fill='%236c63ff' d='M1668.88 623.07c0 8.42-15.25 32.81-15.25 32.81s-15.25-24.4-15.25-32.8a15.25 15.25 0 1130.5 0zM1694.07 669.7c-4.58 7.06-30.63 19.26-30.63 19.26s.47-28.77 5.05-35.83a15.25 15.25 0 1125.58 16.56zM1692.97 749.33c-7.52 3.78-36.17 1.17-36.17 1.17s14.93-24.59 22.44-28.37a15.25 15.25 0 0113.73 27.21zM1678.55 809.41c-6.77 5-35.45 7.26-35.45 7.26s10.56-26.75 17.33-31.75a15.25 15.25 0 0118.12 24.5zM1631.45 690.59c6.1 5.85 34.15 11.94 34.15 11.94s-6.88-27.93-12.92-33.79a15.25 15.25 0 10-21.23 21.86zM1615.5 761.06c7.51 3.78 36.16 1.17 36.16 1.17s-14.93-24.59-22.44-28.37a15.25 15.25 0 00-13.73 27.21zM1609.4 831.7c6.77 5 35.44 7.26 35.44 7.26s-10.61-26.77-17.32-31.78a15.25 15.25 0 00-18.13 24.52z'/%3E%3Cpath fill='%23fff' d='M867.25 72.73h-10.5a7.35 7.35 0 100-14.69h-85a7.35 7.35 0 000 14.69h10.5a7.35 7.35 0 100 14.69h-14.7a7.35 7.35 0 100 14.69h85.01a7.35 7.35 0 100-14.7h14.69a7.35 7.35 0 100-14.68zM1881.6 16.3h-10.49a7.35 7.35 0 100-14.7h-85a7.35 7.35 0 000 14.7h10.49a7.35 7.35 0 100 14.68h-14.69a7.35 7.35 0 100 14.69h85a7.35 7.35 0 000-14.69h14.7a7.35 7.35 0 100-14.69z' opacity='.22'/%3E%3Cpath fill='url(%23a)' d='M520.7 465.94c-1.18.85-1.81 1.33-1.81 1.33a7.73 7.73 0 001.81-1.33z' transform='translate(549.26 77.37)'/%3E%3Cpath fill='url(%23c)' d='M521.63 466.88l-1.82 1.33a7.74 7.74 0 001.82-1.33z' transform='translate(549.75 77.87)'/%3E%3Cpath fill='url(%23d)' d='M521.63 465.94l-1.82 1.33a7.74 7.74 0 001.82-1.33z' transform='translate(549.75 77.37)'/%3E%3Cpath d='M1110.8 134.18l19.12 3.73-.13.69-19.12-3.74z' opacity='.05'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(105deg, #00afac, #380990);
    height: 100%;
}

input[type="submit"].btn-block {
    width: 150px;
}

.login-pf-page .btn-primary {
    background-image: none;
    background-color: #395FFF;
    height: 50px;
    border-radius: 2px
}

.login-pf-page .btn-primary:hover, .login-pf-page .btn-primary:active, .login-pf-page .btn-primary:focus {
    background-image: none;
    background-color: #3257e6;
}

form#kc-form-login>div>label[for="username"] {
    visibility: hidden;
    position: relative;    
    font-family:Roboto,-apple-system,sans-serif;
    font-size: 15px; 
    font-weight: normal;
}

form#kc-form-login>div>label[for="username"]:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Username";
}

form#kc-form-login>div>label[for="password"] {
    font-family:Roboto,-apple-system,sans-serif;
    font-size: 15px; 
    font-weight: normal;
}

form#kc-form-login>div>label {
    color: #000;
}

h1#kc-page-title {
    visibility: hidden;
    position: relative;
    font-family:Roboto,-apple-system,sans-serif;
    font-size: 40px;
}

h1#kc-page-title:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Welcome";
}

.login-pf-header {
    text-align: center;
}


label.control-label {
    display: block!important;
    width: 100%;
    margin: 0 0 5px;
    color: rgba(0, 0, 0, .6);
    font-size: 16px;
}

input#username.form-control {
	font-size: 15px;
	background-color: #f3f3f3;
}

.alert-error {
    background-color: #ffffff;
    border-color: #cc0000;
    color: #333333;
}

#kc-locale ul {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    right: 0;
    top: 20px;
    min-width: 100px;
    padding: 2px 0;
    border: solid 1px #bbb;
}

#kc-locale:hover ul {
    display: block;
    margin: 0;
}

#kc-locale ul li a {
    display: block;
    padding: 5px 14px;
    color: #000 !important;
    text-decoration: none;
    line-height: 20px;
}

#kc-locale ul li a:hover {
    color: #4d5258;
    background-color: #d4edfa;
}

#kc-locale-dropdown a {
    color: #4d5258;
    background: 0 0;
    padding: 0 15px 0 0;
    font-weight: 300;
}

#kc-locale-dropdown a:hover {
    text-decoration: none;
}

a#kc-current-locale-link {
    display: block;
    padding: 0 5px;
}

/* a#kc-current-locale-link:hover {
    background-color: rgba(0,0,0,0.2);
} */

a#kc-current-locale-link::after {
    content: "\2c5";
    margin-left: 4px;
}

.login-pf .container {
    padding-top: 40px;
}

.login-pf a:hover {
    color: #0099d3;
}

#kc-logo {
    width: 100%;
}

#kc-logo-wrapper {
    background-image: url(../img/keycloak-logo-2.png);
    background-repeat: no-repeat;
    height: 63px;
    width: 300px;
    margin: 62px auto 0;
}

div.kc-logo-text {
    background-image: url(../img/keycloak-logo-text.png);
    background-repeat: no-repeat;
    height: 63px;
    width: 300px;
    margin: 0 auto;
}

div.kc-logo-text span {
    display: none;
}

#kc-header {
    color: #ededed;
    overflow: visible;
    white-space: nowrap;
}

/* Makes the built-in text invisible, and replaces with a background image of the CitySuite logo */
#kc-header-wrapper {
    font-size: 29px;
    letter-spacing: 3px;
    line-height: 1.2em;
    padding: 50px 50px 20px 50px;
	background-image: url('../img/CitySuiteLogoWhite.svg');
    background-repeat: no-repeat;
    color: transparent;
    background-origin: content-box;
}

#kc-content {
    width: 100%;
}

/* #kc-content-wrapper {
    overflow-y: hidden;
} */

#kc-info {
    padding-bottom: 200px;
    margin-bottom: -200px;
}

#kc-info-wrapper {
    font-size: 13px;
}

#kc-form-options span {
    display: block;
}

#kc-form-options .checkbox {
    margin-top: 0;
    color: #72767b;
}

#kc-terms-text {
    margin-bottom: 20px;
}

#kc-registration {
    margin-bottom: 15px;
}

/* TOTP */

ol#kc-totp-settings {
    margin: 0;
    padding-left: 20px;
}

ul#kc-totp-supported-apps {
  margin-bottom: 10px;
}

#kc-totp-secret-qr-code {
    max-width:150px;
    max-height:150px;
}

#kc-totp-secret-key {
    background-color: #fff;
    color: #333333;
    font-size: 16px;
    padding: 10px 0;
}

/* OAuth */

#kc-oauth h3 {
    margin-top: 0;
}

#kc-oauth ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#kc-oauth ul li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    padding: 10px 0;
}

#kc-oauth ul li:first-of-type {
    border-top: 0;
}

#kc-oauth .kc-role {
    display: inline-block;
    width: 50%;
}

/* Code */
#kc-code textarea {
    width: 100%;
    height: 8em;
}

/* Social */

#kc-social-providers ul {
    padding: 0;
}

#kc-social-providers li {
    display: block;
}

#kc-social-providers li:first-of-type {
    margin-top: 0;
}

.zocial,
a.zocial  {
    width: 100%;
    font-weight: normal;
    font-size: 14px;
    text-shadow: none;
    border: 0;
    background: #f5f5f5;
    color: #72767b;
    border-radius: 0;
    white-space: normal;
}
.zocial:before {
  border-right: 0;
  margin-right: 0;
}
.zocial span:before {
    padding: 7px 10px;
    font-size: 14px;
}
.zocial:hover {
    background: #ededed !important;
}

.zocial.facebook,
.zocial.github,
.zocial.google,
.zocial.microsoft,
.zocial.stackoverflow,
.zocial.linkedin,
.zocial.twitter {
    background-image: none;
    border: 0;

    box-shadow: none;
    text-shadow: none;
}

/* Copy of zocial windows classes to be used for microsoft's social provider button */
.zocial.microsoft:before{ content: "\f15d"; }
.zocial.stackoverflow:before{ color: inherit; }


@media (min-width: 768px) {
    #kc-container-wrapper {
        position: absolute;
        width: 100%;
    }

    .login-pf .container {
        padding-right: 80px;
    }

    #kc-locale {
        position: relative;
        text-align: right;
        z-index: 9999;
    }
}

@media (max-width: 767px) {

    .login-pf body {
      background: white;
    }

    #kc-header {
        padding-left: 15px;
        padding-right: 15px;
        float: none;
        text-align: left;
    }

    #kc-header-wrapper {
      font-size: 16px;
      font-weight: bold;
      padding: 20px 60px 0 0;
      color: #72767b;
      letter-spacing: 0;
    }

    div.kc-logo-text {
        margin: 0;
        width: 150px;
        height: 32px;
        background-size: 100%;
    }

    #kc-form {
        float: none;
    }

    #kc-info-wrapper {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 15px;
        padding-top: 15px;
        padding-left: 0px;
        padding-right: 15px;
    }

    #kc-social-providers li {
        display: block;
        margin-right: 5px;
    }

    .login-pf .container {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #kc-locale {
        position: absolute;
        width: 200px;
        top: 20px;
        right: 20px;
        text-align: right;
        z-index: 9999;
    }

    #kc-logo-wrapper {
        background-size: 100px 21px;
        height: 21px;
        width: 100px;
        margin: 20px 0 0 20px;
    }

}

@media (min-height: 646px) {
    #kc-container-wrapper {
        bottom: 12%;
    }
}

@media (max-height: 645px) {
    #kc-container-wrapper {
        padding-top: 50px;
        top: 20%;
    }
}

.card-pf form.form-actions .btn {
    float: right;
    margin-left: 10px;
}

#kc-form-buttons {
  margin-top: 40px;
}
	
.login-pf-page .login-pf-brand {
  margin-top: 20px;
  max-width: 360px;
  width: 40%;
}

.card-pf {
  background: #fff;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 500px;
  border-top: 0;
  box-shadow: 0 0 0;
}

/*tablet*/
@media (max-width: 840px) {
    .login-pf-page .card-pf{
      max-width: none;
      margin-left: 20px;
      margin-right: 20px;
      padding: 20px 20px 30px 20px;
    }
}
@media (max-width: 767px) {
    .login-pf-page .card-pf{
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      padding-top: 0;
    }
    .card-pf.login-pf-accounts{
      max-width: none;
    }
}

.login-pf-page .login-pf-signup {
  font-size: 15px;
  color: #72767b;
}
#kc-content-wrapper .row {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 768px) {
  .login-pf-page .login-pf-social-section:first-of-type {
    padding-right: 39px;
    border-right: 1px solid #d1d1d1;
    margin-right: -1px;
  }
  .login-pf-page .login-pf-social-section:last-of-type {
    padding-left: 40px;
  }
  .login-pf-page .login-pf-social-section .login-pf-social-link:last-of-type {
    margin-bottom: 0;
  }
}

.login-pf-page .login-pf-social-link {
  margin-bottom: 25px;
}
.login-pf-page .login-pf-social-link a {
  padding: 2px 0;
}

.login-pf-page.login-pf-page-accounts {
  margin-left: auto;
  margin-right: auto;
}

.login-pf-page .btn-primary {
    margin-top: 0;
}