/* APP */
.lyrf-container {
    margin: 16px 0;
    padding: 16px 0;
}
#lyrf-plugin-version {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 8px;
    font-size: 0.5rem;
    opacity: 0.5;
}
.lyrf-container.error {
    border-color: red;
}

.lyrf-wp-option-bar {
    text-align: right;
}

.lyrf-wp-option-bar a {
    background-color: #3f51b5;
    text-decoration: none;
    color: white;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    font-weight: 100;
    font-size: 0.75rem;
    text-transform: uppercase;
    display: inline-block;
}

/* Terms and conditions viewer */
.lyrf-terms {
    max-height: 100px;
    overflow-y: scroll;
    font-size: 0.8rem;
}

.lyrf-terms-container {
    text-align: left;
    border: 1px solid #bfd0de;
    padding: 8px;
}

/* FORM components */
.lyrf-section {
    margin: 32px 0 64px 32px;
    border-left: 2px solid gray;
    min-height: 600px;
}

.lyrf-section h3 {
    margin: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.5rem;
}

.lyrf-field {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
    width: 100%;
}

.lyrf-field-caption {
    width: 200px;
    padding-right: 16px;
    text-align: right;
    text-transform: uppercase;
    color: gray;
}

.lyrf-field-input {
    display: inline-block;
    flex: 1;
    padding: 16px 8px;
    min-width: 300px;
}

/* Hints / errors / isbusy */
.lyrf-field-hint {
    display: inline-block;
    height: 100%;
    width: 400px;
}

.lyrf-card-hint {
    text-align: center;
    margin: 0 16px;
    font-weight: bold;
}

.lyrf-card-hint.info {
    color: #ad19a8;
}

.lyrf-card-hint.warning {
    color: orange;
}

.lyrf-card-hint.error {
    color: red;
}

.lyrf-loader {
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-bottom-color: #100ea1;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin: 16px 0;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.lyrf-field input,
.lyrf-field select,
.lyrf-field textarea {
    width: 100%;
    border-radius: 8px;
    font-size: 1rem;
}

.lyrf-field.readonly input,
.lyrf-field.readonly select,
.lyrf-field.readonly textarea {
    border: 1px solid transparent;
}

.lyrf-field.valid input,
.lyrf-field.valid select,
.lyrf-field.valid textarea {
    border: 1px solid green;
}

.lyrf-field.invalid input,
.lyrf-field.invalid select,
.lyrf-field.invalid textarea {
    border: 1px solid red;
}

input.partial-invalid {
    border: 1px solid red !important;
}

/* Fields like space and memo are vertical, not horziontal: */
.lyrf-field.vertical {
    display: block;
    padding: 8px;
}

.lyrf-field.vertical>* {
    display: block;
    width: 100%;
}

/* SPACE SELECTOR component */
ul.lyrf-selector {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}
ul.lyrf-selector li {
    position: relative;
    border: 3px solid transparent;
    padding: 8px;
    margin-right: 12px;
    cursor: pointer;
    border-radius: 8px;
    min-width: 100px;
    text-align: center;
    padding: 8px 16px;
    background-color: #3f51b59a;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 1px;
    z-index: 1000;
}

ul.lyrf-selector li:hover {
    background-color: #283163;
}

ul.lyrf-selector li.selected {
    background-color: #4b5fcd;
    border: 3px solid #00e2ff;
}

ul.lyrf-selector li.invalid {
    color: white;
}



ul.lyrf-selector li.invalid,
ul.lyrf-selector li.valid {
    border-radius: 8px 8px 0 0;
    margin-right: 32px;
}
li.next-indicator:after {
    z-index: 900;
    content: "➔";
    position: absolute;
    right: -32px;
    top: 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0 4px;
    font-weight: bold;
    color: #707695;
    font-size: 1.2rem;
}
ul.lyrf-selector li.invalid:before, 
ul.lyrf-selector li.valid:before {
    position: absolute;
    right: 0px;
    bottom: -5px;
    content: " ";
    left: 0px;
    border-radius: 0 0 8px 8px
}
ul.lyrf-selector li.invalid:before {
    border: 2px solid red;
}

ul.lyrf-selector li.valid:before {
    border: 2px solid rgb(30, 233, 12);
}

ul.lyrf-selector div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
}
ul.lyrf-selector label {
    cursor: pointer; 
}

ul.lyrf-selector span {
    padding: 2px 0px;
}

ul.lyrf-selector span.sub {
    font-weight: 100;
}

/* The nav buttons for going between sections */
.lyrf-section-buttons {
    display: block;
    padding: 0 0 16px 0;
    text-align: right;
}

.lyrf-section-buttons a {
    background-color: gray;
}

.lyrf-section-buttons a:hover {
    background-color: gray;
}


.lyrf-small-details {
    font-size: 0.7rem;
    color: gray;
}

/* Lists */
ul.lyrf-slim-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.lyrf-slim-list li {
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: white;
    position: relative;
    margin: 8px;
    transition: color 1s ease;
    transition: background 1s ease;    
}
ul.lyrf-slim-list li.highlighted {
    background-color: #ebffe2;
}

ul.lyrf-grid-list {
    margin: 0 16px !important;
    padding: 0;
    flex: 1;
    list-style: none;
}

ul.lyrf-grid-list li {
    padding: 2px 8px;
    margin: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: white;
    position: relative;
    text-align: left;
}



/* Close button */
.lyrf-close-button {
    position: absolute !important;
    top: -8px;
    right: -8px;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.5rem;
    background-color: rgb(197, 197, 197);
    color: white;
    cursor: pointer;
    border: 0px solid transparent;
}

.lyrf-close-button:hover {
    background-color: gray;
}

/* Misc */

.lyrf-hint {
    padding: 2px 16px;
    color: gray;
    letter-spacing: 2px;
}

a.lyrf-round {
    border: 1px solid transparent;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
    color: white;
    font-weight: bold;
    background-color: #3f51b5;
    cursor: pointer;
    display: inline-block;
    border-radius: 8px;
    margin: 0 8px;
    text-decoration: none;
}

a.lyrf-round:hover {
    background-color: #5063cc;
}

.lyrf-card {
    background-color: #8080800d;
    padding: 4px 16px;
    margin: 16px 0;
    width: 100%;
    border-radius: 8px;
    overflow: overlay;
}

.lyrf-calendar-container {
    /* overflow-x: scroll; */
    width: 100%;
}
.fc .fc-bg-event {
    background: #3788d8 !important;
    color: white !important;
    opacity: 0.2 !important;
    font-style: normal !important;  
}
.fc-view-harness {
    /* max-height: 750px; */
}
/* Events not part of space currently slected */
.space-not-selected {
    opacity: 0.6 !important;
}

.lyrf-form-action-container {
    text-align: right;
    padding: 16px;
}

.lyrf-button {
    border: 1px solid transparent;
    padding: 8px;
    margin-right: 16px;
    cursor: pointer;
    border-radius: 8px;
    min-width: 100px;
    text-align: center;
    padding: 8px 16px;
    background-color: #2196f3;
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
}

.lyrf-button:hover {
    background-color: #45adff;
    color: white;
}

.lyrf-button[disabled="true"]:hover {
    background-color: #2196f3;
    color: white;
}

.lyrf-button[disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.lyrf-horizontal-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}

.lyrf-horizontal-centered {
    justify-content: center;
}

.pa8 {
    padding: 8px;
}

.lyrf-checkbox-group label {
    padding: 8px;
    color: gray;
    font-size: 120%;
}

.lyrf-center-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

/* Columns */
.lyrf-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: flex-start;
}

.lyrf-auto-size {
    flex: 1;
}

/* lyrf-form-verifier-container */
.lyrf-form-verifier-container h3 {
    text-transform: uppercase;
    color: gray;
    font-size: 0.8rem;
}

.lyrf-form-verifier-container hr {
    margin: 16px 0;
    border: 1px solid rgba(255, 255, 255, 0.342);
}

.lyrf-form-verifier-container .lyrf-columns {
    justify-content: inherit !important;
    margin-bottom: 8px;
    border-bottom: 1px dotted gray;
}

.lyrf-form-verifier-container .lyrf-field-value {
    text-align: left;
}


/* Lyrf resource selector */
.lyrf-date-resource-selector {
    margin: 18px 0px;
    background-color: #d8d7d7;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.lyrf-date-resource-selector>label {
    text-transform: uppercase;
    color: gray;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0 12px;
}

.lyrf-date-resource-selector>input {
    border: 1px solid transparent !important;
    padding: 2px !important;
    margin-left: 8px;
}

.lyrf-resource-selection-hints {
    min-width: 450px;
    padding-left: 18px;
}


/* A link that looks like a tag */
a.lyrf-tag {
    text-decoration: none;
    color: white;
    font-weight: bold;
    background-color: #2a9ccf;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 0.8rem;
    margin-right: 8px;
    padding: 2px 8px;
    position: relative;
}
a.lyrf-tag:before {
    position: absolute;
    left: -6px;
    bottom: -1px;
    top: -1px;
    content: "+";
    padding: 0 2px;
    background-color: #338bb3;
    border: 1px solid transparent;
}


a.lyrf-tag:hover {
    background-color: #24aeec;
    color: white !important;
}

/* space selector */
.lyrf-card-space-selector.full {
    min-height: 425px;
}
.lyrf-card-space-selector.mini {
    background-color: #d8d7d7;
}
.lyrf-card-space-selector.mini ul {
    margin: 0 0 8px 0;
}


/* Form */
.lyrf-card-form {
    border: 1px solid #ebebeb;
    margin-bottom: 30px;
    
    box-shadow: 10px 8px 35px -4px rgba(0,0,0,0.29);
    -webkit-box-shadow: 10px 8px 35px -4px rgba(0,0,0,0.29);
    -moz-box-shadow: 10px 8px 35px -4px rgba(0,0,0,0.29)    
}

/* Sticky headers / hints */
ul.lyrf-selector.sticky {
    position: fixed;
    left: 0px;
    right: 0px;
    background-color: #f9f9f9;
    top: 0px;    
    padding-top: 8px;
    padding-left: 8px;
}
ul.lyrf-section-selector.lyrf-selector.sticky {
    margin: 0 !important;
    top: inherit;
    bottom: 0;
    background-color: #f0f0fb;
    padding-bottom: 8px;
    justify-content: center;    
    z-index: 100;
    padding: 4px 4px 16px 0;    
}

.lyrf-form-action-container.sticky {
    position: fixed;
    right: 0px;
    bottom: 50px;
    left: 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	align-content: stretch;    
    background: none;
}
.lyrf-form-action-container.sticky > div {
    background-color: #fffeef;
    border: 1px solid #b7b7b7;
    width: 70%;
    margin: 18px;
    border-radius: 4px;
    padding: 18px;
    box-shadow: 10px 8px 35px -4px rgb(0 0 0 / 29%);
    -webkit-box-shadow: 10px 8px 35px -4px rgb(0 0 0 / 29%);
    -moz-box-shadow: 10px 8px 35px -4px rgba(0,0,0,0.29);   
    z-index: 99998; 
}



/* Help popup */
body.lyrf-popup-open {
    overflow-y: hidden;
}
.lyrf-toggle-help-popup-button {
    background-color: #00afc6;
    border: 1px solid transparent;
    margin-left: 15px;
    color: white;
    border-radius: 4px;
    text-align: center;
    padding: 4px 16px;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 12px 16px;
}
.lyrf-toggle-help-popup-button:hover {
    background-color: #19c2d8;
}
.lyrf-toggle-help-popup-button.active {
    background-color: #19c2d8;
    border: 1px solid black;
}


.lyrf-section-help-popup {
    position: fixed;
    z-index: 99999;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: #ffffff75;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;    
}
.lyrf-section-help-popup-container {
    border: 1px solid black;
    box-shadow: 10px 8px 35px -4px rgb(0 0 0 / 29%);
    -webkit-box-shadow: 10px 8px 35px -4px rgb(0 0 0 / 29%);
    -moz-box-shadow: 10px 8px 35px -4px rgba(0,0,0,0.29);   
    background-color: #fffffff0;
    width: 100%;
    height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;    
}
.lyrf-section-help-popup button {
    margin-top: 20px;
    display: block;
    width: 100%;
}
.lyrf-section-help-popup-container-html {
    overflow-y: scroll;
    padding: 25px;
    flex: 1;
}


/* Power menu */
.lyrf-power-menu {
    position: fixed;
    z-index: 110;
    left: 10px;
    bottom: 20px;
    opacity: 0.6;
}
.lyrf-power-menu:hover {
    opacity: 1;
}
.lyrf-power-menu-toggle {
    cursor: pointer;
    padding: 8px;
    border: 1px solid #80808047;
}
.lyrf-power-menu:hover .lyrf-power-menu-toggle{
    background-color: white;
}
.lyrf-power-menu-toggle > span {
    margin: 4px;
}
.lyrf-power-menu ul.lyrf-power-menu-content {
    display: none;
    margin: 0 0 4px 0;
    padding: 0;
    list-style: none;
}
.lyrf-power-menu:hover ul.lyrf-power-menu-content {
    display: inherit;
}
.lyrf-power-menu ul.lyrf-power-menu-content li {
    padding: 4px 16px;
    cursor: pointer;
    font-size: 1rem;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 1rem;
    background-color: white;
    margin: 0;
    font-weight: 700;
}
.lyrf-power-menu ul.lyrf-power-menu-content li:hover {
    background-color: #dee3ff;
}

.lyrf-save-user-profile .lyrf-button {
    float: right;
    font-size: 90%;
    background-color: gray;
    font-weight: 100;
    padding: 4px 16px;
    margin-top: 20px;
}