/* @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700'); */
@import url('./fonts.css');

html{
    margin: 0px;
    height:100%;
}
body {
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: #f7f7f7;
    color: #222;
    font-family: 'Founders Grotesk', 'Avenir Next', sans-serif;
}
h1 {
    font-weight: 300;
    font-size: 1.4em;
}

fieldset {
    border: none;
}

p.description {
    color: #555;
    font-size: 1em;
    font-weight: normal;
    text-transform: none;
}


/* buttonbutton */
button.lo-btn , .btn
{
  color: #222;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  font-size: 1em;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  background: rgba( 255, 255, 255, 0.25 );
  padding: 12px 12px;
  border: none;

  cursor: default;
  user-select: none;
  outline: none;
  display: inline-flex;
  flex-direction: row;
  transition: all ease-in-out .2s;
  border-radius: 10px;
  position: relative;
  top: 0px;
  transition: all ease-in-out .2s;
  border-color: #3c23aa;
  cursor: pointer;
  padding-bottom: 12px;

  font-family: 'Founders Grotesk', 'Avenir Next', sans-serif;
  font-weight: 500;
  /* border-bottom: solid 4px transparent; */
  padding: 12px 20px;
}

button.lo-btn i ,
 .btn i {
    position: relative;
    top: 0px;
    transition: all ease-in-out .2s;
    font-size: 1.5em;
    margin-right: 10px;
        color: #3c23aa;
}

.btn:hover {
    /* border-color: #3c23aa; */
    cursor: pointer;

    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.25 );
    box-shadow: 0 2px 4px 1px #00000014;
    /* padding-bottom: 16px; */
    /* text-shadow: 0px 3px 12px #74a1f740; */

    translate: 0px -2px;
}

.btn:hover  {
    color: #3c23aa !important;
    /* text-shadow:0px 3px 12px rgb(116, 161, 247,0.49); */
}

.form-control {
    display: block;
    box-sizing: border-box;
    width: 280px;
    height: 42px;
    font-size: 16px;
    line-height: 1.42857143;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    /* background: linear-gradient(299deg, #1F2025 0, #222228 14%, #241D23 38%, #28272D 100%); */
    background: transparent;
    color: black;
    border-color: #3a38382a;
    padding: 4px 12px;
    font-family: 'SF Pro Display', 'Founders Grotesk', 'Avenir Next', sans-serif;
    margin-bottom: 10px;
}

.form-control input {
    width: 100%;
}

.form-control:focus,
.form-control:hover  {
    border-color: #7f93ff;
    box-shadow: none;
    outline: 0;
}
.form-control:focus {
    box-shadow: inset 17px 9px 39px 0 rgba(158,160,201,0.20);
}


label {
    font-weight: normal;
    font-size: .9em;
}

.lox-login-panel-content label {
    display: flex;
    align-items: center;
    font-size: .8em;
    margin-top: 16px;
    margin-bottom: 8px;
}

.logo img {
    width:200px;
}

.logo {
    padding: 50px 0;
    text-align: center;
}

a, a:link, a:visited {
    color: #3c23aa;
    text-decoration: none;
}

    a:hover {
        color: #3c23aa;
    }

    .text-danger{
        color: #ff9f9e;
    }

ul.list, ol.list {
    font-size: .9em;
}

.lox-page-center-container {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.lox-container {
    margin-top: auto;
    margin-bottom: auto;
}

.lox-login-panel {
    min-width: 300px;
    max-width: 800px;
    /* background: #e8edf247;
    box-shadow: 0 8px 32px 0 rgb(31, 38, 135, 0.09); */
    color: #222;
}
.lox-login-panel-title {
    padding: 10px 20px 20px 20px;
    font-size: 0.9em;
    text-align: center;
    font-weight: 500;
    /* color: #3c23aa; */
}
.lox-login-panel-title.normal {
    padding: 10px 20px 20px 20px;
    font-size: 1em;
    text-align: center;
    font-weight: 500;
    /* color: #3c23aa; */
}
.lox-login-panel-content {
    padding: 20px 40px 40px;
}

.lox-login-panel-footer {
    padding: 8px;
    text-align:right;
    font-size: .8em;
}

.lox-login-panel-footer a, .lox-login-panel-footer a:link, .lox-login-panel-footer a:visited {
    font-size: .9em;
    color: #b4b4b4;
    text-decoration: none;
}

.lox-login-section {
    color: #222;
}

.lox-login-section-header {
    font-size: 1.1em;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    font-weight: 500;
    color: #3c23aa;
}

.lox-login-section-subtitle {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 32px;
    opacity: .8;
    font-size: 1em;
    font-weight: 500;
}

.lox-login-section-header-small {
    margin-top: 20px;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 30px;
}

.lox-button-group {
    text-align: center;
}

.lox-login-helper {
    display: flex;
    align-items: center;
}

.lox-login-helper.forgot-password {
    justify-content: flex-end;
    display: flex;
    flex: 1;
}

.lox-remember-me {
}

.lox-forgot-password {
    text-align: right;
    padding-right: 0px;
    color: #555555;
}

a.lox-forgot-password {
    color: #555555;
}


.identity-providers {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-basis: 400px;
    flex-wrap: wrap;
    gap: 20px 0;
    justify-content: center;
}

a.btn-choice, a.btn-choice:active, a.btn-choice:visited {
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px 1px #00000014;
    color: #222;
    min-width:380px;
    transition: all ease-in-out .2s;
    flex-direction: row;
    max-width: 400px;
    display: flex;
    gap: 10px;    
    min-height: 72px;
}

a.btn-choice:hover {
    box-shadow: 0 8px 32px 0 rgb(31, 38, 135, 0.09);
    opacity: 1;
}

a.btn-tenant, a.btn-tenant:active, a.btn-tenant:visited  {
    max-width: 300px;
}

.choice-icon {
    font-size: 1.5em;
    height:40px;
    transition: all ease-in-out .2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.choice-icon img {
    max-height: 40px;
    max-width: 40px;
    filter: grayscale(40%);
}

a.btn-choice:hover img {
    filter: grayscale(0%) !important;
}

.tenant-icon {
    filter: grayscale(100%) invert(100%);
}

.idp-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1;
    text-align: left;
    padding: 8px 0px;
}
.idp-title {
    font-size: 1.3em;
    font-weight: 500;
    transition: all ease-in-out .2s;
    flex: 1;
}

.idp-description {
    font-size: 1.0em;
    opacity: .6;
    flex: 1;
    color: #555;
    font-weight: normal;
    flex: 1;
}

a.btn-idp:hover .choice-icon,
a.btn-idp:hover .idp-title {
    transform: translate(0px, -2px);
}

.danger {
    color: red;
}

ul {
    list-style: none;
}