/* Styles not belonging to the jQuery mobile framework and/or theme roller */

/* Define Friluftsframjandet custom colors */
:root {
    --FF-blue: #407EC9;
    --FF-blue-transp: #407EC980;
    --FF-lightblue: #72b2ff;
    --FF-lightblue-transp: #72b2ff80;
    --FF-cyan: #00A49D;
    --FF-green: #75B22A;
    --FF-yellow: #FBD600;
    --FF-pink: #DC0063;
    --FF-beige: #D0BA8A;
    --FF-orange: #E84F1C;
    --FF-gray: #54544A;
    --FF-busy: var(--FF-orange);
    --FF-free: #DDDDDD;
    --FF-unconfirmed: var(--FF-yellow);
    --FF-weekend: #E84F1C60; /* Orange with transparency */
    --FF-blocked: repeating-linear-gradient(-45deg, var(--FF-busy), var(--FF-free) 3px, var(--FF-busy) 6px);
    --FF-unknown: url('../resources/unknown_bg.png');
}

/* Make more space for text in the header. */
.ui-header .ui-title {
    margin: 0 30px;
}

.footer-button-left, .footer-button-right {
    position: absolute;
    margin: 0;
    padding:0;
    top: auto;
    bottom: 0.24em;
}
.footer-button-left {
    left: 0.4em;
}
.footer-button-left a, .footer-button-right a {
    margin: 0;
}
.footer-button-right {
    right: 0.4em;
}

.controlgroup-textinput {
    padding-top:0.22em;
    padding-bottom:0.22em;
}


/* required fields in forms */
label.required:after, legend.required:after, span.required:after {
    content: " *";
    font-weight: bold;
    color: red;
}
input:invalid {
    border:1px solid red;
}

.ui-btn.tooltip {
    background:none;
    border:0;
    margin:0;
}

.saved-indicator {
    position:fixed;
    top:-50px;
    right:20px;
    padding:5px;
    border-radius:5px;
    box-shadow:0 0 8px gray;
    background:var(--FF-green) !important;
    z-index:10;
    transition: all 1500ms;
}
.saved-indicator.saved {
    top:20px;
}

li.selected {
    background: var(--FF-blue) !important;
}

li.rejected a {
    color:gray !important;
}

table.alternate-rows tr {
    border-top: 1px solid var(--FF-cyan);
}
table.alternate-rows tr:nth-child(even) {
    background-color:var(--FF-lightblue-transp);
}

#cat-img-preview {
    width: 100%;
    max-width:400px;
}

.cat-list-img {
    position: absolute;
    top: 0px;
    right: 0px;
    padding:0px;
}

.item-checked a {
    background-color:var(--FF-green) !important;
}

.ui-listview > .wrap,
.ui-listview > .wrap a,
.ui-listview > .wrap p,
.ui-listview > .wrap h2 {
    /* Show whole text in list views even on small screens */
    white-space:normal;
}

/* Adjust placement of Markdown editor */
@media (min-width: 28em) {
    .ui-field-contain .EasyMDEContainer {
        float:left;
        width:78%;
    }
}
.EasyMDEContainer .editor-toolbar button.ui-btn {
    width: auto;
}

.item-img-preview {
    width:100%;
}

.item-image {
    margin: 20px 0;
}
.item-image img {
    width: 100%;
    box-shadow: 1px 1px 5px gray;
}
.item-image label {
    font-size: small;
}

.inactive a, td.inactive {
    color:grey !important;
}

/* User defined icons */
.ui-icon-left:after {
    background-image: url('../resources/left.svg');
    background-size: 18px 18px;
}
.ui-icon-right:after {
    background-image: url('../resources/right.svg');
    background-size: 18px 18px;
}
.ui-icon-leftleft:after {
    background-image: url('../resources/leftleft.svg');
    background-size: 18px 18px;
}
.ui-icon-rightright:after {
    background-image: url('../resources/rightright.svg');
    background-size: 18px 18px;
}
.ui-icon-help:after {
    background-image: url('../resources/help.svg');
    background-size: 18px 18px;
}

.freebusy-bar {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 20px;
    margin-bottom:10px;
    background-color: var(--FF-free);
    box-shadow: 1px 1px 5px gray;
}
.freebusy-bar.composed {
    height: 50px;
}

.freebusy-bar .freebusy-free,
.freebusy-bar .freebusy-busy,
.freebusy-bar .freebusy-blocked,
.freebusy-bar .freebusy-unknown,
.freebusy-bar .freebusy-tic,
.freebusy-bar .freebusy-weekend,
.freebusy-bar .freebusy-week {
    position: absolute;
    top: 0px;
    height: 100%;
}
.freebusy-free {
    background-color: var(--FF-free);
    z-index: 1;
}
.freebusy-busy {
    background-color:var(--FF-busy);
    z-index: 4;
}
.freebusy-busy.has-price::after {
    position: absolute;
    top: 1px;
    content:"💰";
}
.freebusy-busy.has-price.paid::after {
    content:"✔";
    color:white;
}
.freebusy-blocked {
    background: var(--FF-blocked);
    z-index: 3;
}
.freebusy-unknown {
    left: 0px;
    width: 100%;
    background: var(--FF-unknown);
    z-index: 2;
}
.freebusy-tic {
    border-left:1px solid var(--FF-gray);
    z-index: 6;
}
#book-combined-freebusy-bar ~ .freebusy-tic {
    cursor: pointer;
}
#book-combined-freebusy-bar ~ .freebusy-tic:hover {
    background: var(--FF-lightblue-transp);
}
#book-combined-freebusy-bar ~ .freebusy-tic:active {
    background: var(--FF-blue-transp);
}
.freebusy-tic span {
    background-color: #ffffff50;
    box-shadow: 0px 0px 4px #ffffff;
    font-weight: normal;
    vertical-align: top;
    font-size: x-small;
}
.freebusy-weekend {
    background-color: var(--FF-weekend);
}
#page-book-part .contact-data {
    font-size:70%;
    margin-left:1em;
    padding-left:1ex;
    border-left:3px solid var(--FF-green);
}
#book-chosen-timeframe {
    position: absolute;
    bottom: 0;
    left: -10px;
    height: 50%;
    min-width: 3px;
    background-color: var(--FF-blue);
    z-index: 5;
}
#book-warning-conflict {
    color:var(--FF-orange);
    font-weight:bold;
    display:none;
}

#repeat-preview li.repeat-unavail {
	color:var(--FF-orange) !important;
}

#page-book-sum .has-edit-buttons {
    padding-bottom:40px;
}
.item-edit-buttons {
    position: absolute;
    bottom: 0px;
    left: 0.625em;
    font-size: 0.6em;
    z-index: 1;
}

#reminder-offset-button {
    min-width:8em;
}

/* ===== Booking admin ===== */

#booking-admin {
    transition: padding-right 1s;    
}

.desktop h1,
.desktop h2,
.desktop h3,
.desktop p,
.desktop div,
.desktop td,
.desktop th {
    font-family: Arial, Helvetica, sans-serif;
}

.desktop #head {
    position: sticky;
    top:0px;
    background-color:white;
    z-index:10;
}

.desktop h1 {
    margin: 0px;
    margin-bottom:10px;
    padding: 10px 200px 10px 20px;
    background: url('../resources/liggande-bla.png') no-repeat right;
    background-size: 200px;
    background-color: var(--FF-blue);
    color: white;
}

.desktop h2, #booking-admin h3 {
    color: var(--FF-blue);
}

.desktop #indicator-new-bookings {
    position: absolute;
    top: 0px;
    right: 220px;
    width: 4em;
    height:1.2em;
    padding: 5px;
    background: white;
    border-left: 10px solid var(--FF-yellow);
    box-shadow:0 0 4px;
    overflow:hidden;
    transition: height 1s, width 1s, right 1s;
    z-index:100;
}
.desktop #indicator-new-bookings:hover {
    right: 100px;
    height:8em;
    width:300px;
}
.desktop #indicator-new-bookings div {
    display:none;
    overflow:scroll;
    white-space: nowrap;
    height:100%;
}
.desktop #indicator-new-bookings:hover div {
    display:block;
}
.desktop #indicator-unconfirmed-count-label,
.desktop #indicator-conflicts-count-label {
    display: none;
}
.desktop #indicator-new-bookings:hover #indicator-unconfirmed-count-label,
.desktop #indicator-new-bookings:hover #indicator-conflicts-count-label {
    display: inline;
}

.desktop table {
    width:100%;
    table-layout:fixed;
}
.desktop .col-caption {
    width:20%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.desktop .col-caption span {
    cursor: pointer;
}
.desktop td.navbuttons span {
    cursor: pointer;
    font-size:150%;
    padding:5px;
    color:var(--FF-blue);
}
.desktop td.navbuttons span:hover {
    color:white;
    background-color:var(--FF-blue);
}

.desktop .freebusy-busy {
    cursor: pointer;
}

.freebusy-busy.unconfirmed, .freebusy-busy.conflict {
    background-color:var(--FF-unconfirmed);
}
.freebusy-busy.conflict {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='20px'><text x='0' y='15' fill='red' font-size='20'>⚠</text></svg>");
    background-repeat: repeat-x;
    z-index: 5;
}

.desktop #legend {
    box-shadow: 1px 1px 5px gray;
    margin-top:20px;
    padding: 10px; 
}
.desktop #legend h3 {
    margin-top:5px;
}

.desktop #iframe-booking, .desktop #panel-item-details {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 0;
    border: none;
    box-shadow: 0 0 10px;
    background-color: white;
    z-index: 100;
    transition: width 1s;    
}
.desktop #close-iframe-booking {
    position: fixed;
    top: 20px;
    right: 33%;
    transition: right 1s;    
    display: none;
    z-index: 11;
}
.desktop #close-iframe-booking a {
    box-shadow: 0 0 10px white;
    color: white;
    background: var(--FF-blue);
    padding:8px;
    border-radius: 5px 0 0 5px;
}

/* ==== Loading indicator ==== */
/* Minimal */
/* .pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: var(--FF-blue);
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
} */


/* Flat Top */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  -webkit-transform: translate3d(0, -50px, 0);
  -ms-transform: translate3d(0, -50px, 0);
  transform: translate3d(0, -50px, 0);

  -webkit-transition: -webkit-transform .5s ease-out;
  -ms-transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
}

.pace.pace-active {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.pace .pace-progress {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 10px;
  background: var(--FF-blue);

  pointer-events: none;
}


/***** Tagging Styles *****/
.tagging {
	border: 1px solid #CCCCCC;
	font-size: 1em;
	height: auto;
	padding: 7px 10px;
}

.tagging.editable {
	cursor: text;
}

.tag {
	text-shadow: none;
	background: var(--FF-lightblue);
	border-radius: 20px;
	cursor: default;
	display: inline-block;
	position: relative;
	white-space: nowrap;
	padding: 4px 0px 4px 0;
	margin: 3px 10px 3px 0;
}

.tag span {
	color: white;
	background: var(--FF-blue); 
	border-radius: 20px 0 0 20px;
	padding: 5px 5px 4px;
}

.tag .tag-i {
	color: white;
	cursor: pointer;
/*	font-size: 1.3em;
	height: 0; */
	line-height: 0.1em;
/*	position: absolute;
	right: 5px;
	top: 0.7em; */
	text-align: center;
/*	width: 10px; */
	padding: 5px;
}

.tag .tag-i:hover {
	color: black;
	text-decoration: underline;
}

.type-zone {
	border: 0 none;
	height: auto;
	width: auto;
	min-width: 20px;
	display: inline-block;
}

.type-zone:focus {
	outline: none;
}