* {
    user-select: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.app.expert .container {
    max-width: 100%;
}

vc-widget {
	width: 0;
	height: 0;
	min-width: 50px;
	min-height: 50px;
	max-height: 100%;
	max-width: 100%;
	/*overflow: hidden;*/
	position: relative;
}

vc-widget[widget] {
    display: inline-block;
    width: auto;
    height: auto;
    transition: width 2s, height 2s, opacity 2s;
}

vc-widget[widget].loading a4e-widget-body {
	opacity: 0.9;
	filter: grayscale(100%) blur(2px);
	pointer-events: none;
	user-select: none;
}

vc-widget[widget].ready a4e-widget-body {

}
vc-widget[widget] a4e-widget-loader {
	display: none;
}

vc-widget[widget].loading a4e-widget-loader {
	 position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    min-height: 35px;
    min-width: 35px;
}

vc-widget[widget].loading a4e-widget-loader .img
{
	display: block;
    position: absolute;
    width: 100%;
    height: 100%;

    min-height: 35px;
    min-width: 35px;

    left: 0;
    top: 0;
	 background-image: url('../images/loading.png');
	 -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;

    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    background-size: 35px !important;
}

/**
 * 	Subscriptions
 */
main .content .subscription-item {

}

main .content .subscription-item input {
	width: 100%;
}

main .content .subscription-item .subscription-price input {
	max-width: 200px;
	display: inline-block;
}

main .content .subscription-item .subscription-valid-period input {
	display: inline-block;
	min-width: 120px;
	max-width: 200px;
	margin-right: 50px;
}

main .content .subscription-item .subscription-valid-period select {
    display: inline-block;
    min-width: 120px;
    max-width: 200px;
    width: 100%;

}

main .content .subscription-item .subscription-item-footer {
    background: #f2f2f2;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 50px;
    border-bottom: 1px solid #d5d6d8;
    margin-top: 20px;
}

main .content .subscription-item .subscription-item-footer .subscription-item-status {
    display: inline-block;
    margin-right: 50px;


}

/*
 * @todo Val, move this to screen.css, please
 * Fixed bug with forms
 */

.popup-content form .btn.btn-primary, .popup-content form input[type="submit"] {
 	background: #547fb6;
    pointer-events: initial;
}


.page.subscriptions-page form.form-check .btn.btn-primary, form input[type="submit"] {
    background: #547fb6;
    pointer-events: initial;
}


.page.subscriptions-page form.form-check:not(.edited) .btn[enable-if-changed] {
	background: grey;
    pointer-events: none;
}


/**
    Flash messages
*/
.flash-messages {
    display: inline-block;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000000000000000000;

}

.flash-messages > div {
    background: #ffffff;
    padding: 20px;
    min-width: 320px;
    border: 1px solid;
    box-shadow: 0px 5px 10px rgba(20,20,20,0.8);
}

.flash-messages > div.errorMessage {
    background: red;
}

.flash-messages > div.successMessage {
    background: #d1f9d1;
    color: #222222;;
}

/*
 * Fix a BUG
 */
/*
form .btn.btn-primary, form input[type="submit"] {
    background: #547fb6  !important;
    pointer-events: all !important;
}*/

/**
Member card
**/

.member-card  {
    display: block;
    width: 91.6mm;
    height: 58.98mm;
    border: 1px solid #f5f5f5;
    background: #fdfdfd;
    box-shadow: 0px 1px 20px #b5acac;
    border-radius: 3mm;
    margin: 20px;
    overflow: hidden;
    position: relative;
    padding: 2mm;

    pointer-events: none;

}

.member-card .inner {
    position: relative;
    display: block;
    width: 87mm;
    height: 55mm;
    background: #547fb6;
    color: #ffff;
        border-radius: 2mm;
}

.member-card .inner .logo {
    display: inline-block;

    width: 30mm;
    height: 30mm;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffff;
     border-radius: 5mm;
    position: absolute;
    right: 5mm;
    top: 12mm;

     border: 1mm solid  #ffffff;
}

.list.face,
.member-card .inner .face {
    display: inline-block;
    width: 30mm;
    height: 30mm;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 5mm;
    top: 12mm;
    background-color: #ffff;
    border-radius: 5mm;
    border: 1mm solid #ffffff;
}

.list.face {
    position: relative;
    top: 0;
    left: 0;
}

.member-card .inner .business-name {
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 2mm;
    width: 100%;

}

.member-card .inner .account-name {
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    position: absolute;
    bottom: 3mm;
    left: 0;
    width: 100%;
    border-radius: 5mm;
}

.member-card .inner .qr {
    display: inline-block;
    width: 30mm;
    height: 30mm;
    background: #ffffff;
    top: 12mm;
    position: absolute;
    left: 5mm;
    border-radius: 5mm;
    border: 1mm solid  #ffffff;

        overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;


}

.member-card .inner .business-address {
    display: inline-block;
    width: 42mm;
    height: 20mm;
    padding: 2mm;
    right: 5mm;
    position: absolute;
    font-size: 2.5mm;
    top: 12mm;
    color: #ffffff;
     border-radius: 3mm;
}

.member-card .inner .business-contact {
    display: inline-block;
    width: 32mm;
    height: 10mm;
    padding: 2mm;
    right: 5mm;
    position: absolute;
    font-size: 3mm;
    bottom: 13mm;
    text-align: right;
}

.member-card .inner .business-email {
    display: inline-block;
    width: auto;
    height: 10mm;
    padding: 2mm;
    right: 5mm;
    position: absolute;
    font-size: 3mm;
    bottom: 8mm;
    text-transform: uppercase;
}

.member-card .inner .membership-id {
    display: inline-block;
    width: 77mm;
    height: 7mm;
    left: 5mm;
    position: absolute;
    font-size: 3mm;
    bottom: 3MM;
    color: #ffffff;
    padding: 5px;
    text-transform: uppercase;
    text-align: center;
    border-radius: 3mm;
}

/**
digital
**/
.digital-member-card  {
    display: block;
    width: 600px;
    height: 600px;
    border: 1px solid #f5f5f5;
    background: #9c2215;
    box-shadow: 0px 1px 20px #b5acac;
    border-radius: 3mm;
    margin: 20px;
    overflow: hidden;
    position: relative;
    padding: 2mm;

    pointer-events: none;

}

.digital-member-card .inner {
    position: absolute;
    left: 0;
    top: 0;

    display: block;
    width: 600px;
    height: 600px;
    color: #ffff;

}

.digital-member-card .inner .logo {
    display: inline-block;

    width: 250px;
    height: 250px;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffff;
     border-radius: 5mm;
    position: absolute;
    right: 20px;
    top: 80px;

     border: 1mm solid  #ffffff;
}

.digital-member-card-preview {
    overflow: hidden;
    margin-top: 20px;
    border-radius: 10px;
}

.digital-member-card .inner .face {
    display: inline-block;
     width: 250px;
    height: 250px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 20px;
    top: 80px;
    background-color: #ffff;
    border-radius: 5mm;
    border: 1mm solid #ffffff;
}

.digital-member-card .inner .account-name {
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    border-radius: 5mm;
    font-size: 30px;
}


.digital-member-card .inner .subscription-name {
    text-align: center;
    position: absolute;
    bottom: 145px;
    left: 0;
    width: 100%;
    border-radius: 5mm;
    font-size: 30px;
    padding: 0 10px;
}

.digital-member-card .inner .subscription-expire {


    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    border-radius: 5mm;
    font-size: 30px;
}


.digital-member-card .inner .subscription-name-header {
    font-weight: bold;
    text-align: center;
    position: absolute;
    bottom: 215px;
    left: 0;
    width: 100%;
    border-radius: 5mm;
    font-size: 30px;
}

.digital-member-card .inner .subscription-expire-header {

    font-weight: bold;
    text-align: center;
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    border-radius: 5mm;
    font-size: 25px;
}

/**

**/

.avatar {
        display: inline-block;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
}

.image-box {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.image-box .avatar {
        border: 1px solid #efefef;
}


.member-card.full .inner,
.member-card.full .inner .membership-id,
.member-card.full .inner .business-address {
    background-color: #222222;
    color: #FFD700;
}









/**
member type
**/
.image-box  .account-type{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
}

.account-type {
    display: block;
    text-align: center;
    background-color: #efefef;
}

.account-type.account-type-full {
    background-color: #beffc9;
}


.account-type.account-type-member {
    background-color: #b7fdfd;
}

.fishery.app .card {
    box-shadow: none;
    box-shadow: none;
    border-radius: 0 !important;
}

.fishery.app .card.with-title.primary .title {
    border-radius: 0 !important;
}

/**
Tranaction status
**/

.subscription.paid-active {

}

.subscription.paid-not-active {

}

.subscription.active {

}

.subscription.canceled {

}

.subscription.in-active {

}


.subscription.notAvailable {
    color: #4c4a4a;
}

/**
TRAFIC LIGHT
**/

.trafic-light {
    background: #efefef;
    border: 0;
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    vertical-align: bottom;
    margin: 5px 10px;
        margin-left: 0px;
}

.trafic-light.green {  background: #9ab362;}
.trafic-light.orange {  background: #f89305; }
.trafic-light.red {  background: #dd1d34; }
.trafic-light.blue {  background: #5095dd; }
.trafic-light.lightblue {  background: #83c8ff; }
.trafic-light.grey {  background: #c5c5c5; }

/**
BOOKINGS CALENDAR
*/
main[page='bookings'] .select-lake {
    background: #ffffff;
    border: 0 !important;
    width: auto;
    display: inline-block;
    padding: 0 20px 0px 0px !important;
    font-size: 1.7em !important;
}

main[page='bookings'] .pegs-count {
    display: inline-block;
    background-color: #999999;
    color: #ffffff;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 0.8em;
    margin: 10px 0 10px;
}

.pegs-count {
    padding: 12px 0 0;
}
a4e-gui-box.booking-calendar > box-content {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 0 0 40px;
    padding: 0 0 12px;
}
a4e-gui-box.booking-calendar box-content .calendar-box {
    min-width: 720px;
}
.calendar-box {

    display: inline-block;
    width: 100%;
}

.calendar-box .calendar-body {

}

.calendar-box .calendar-body .calendar-row-header,
.calendar-box .calendar-body .calendar-row {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-box .calendar-body .calendar-cell-header,
.calendar-box .calendar-body .calendar-cell {
    overflow: hidden;
    width: 60px;
    text-align: center;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-box .calendar-body .calendar-cell-header {
    height: auto;
}

.calendar-box .calendar-body .calendar-cell {
    padding: 2px;
}



.calendar-box .calendar-row-header .calendar-cell-header span {
    display: block;
    font-weight: bold;
    margin: 10px 0;
}

.calendar-box .calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #efefef;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 2px solid #ffffff;
}

.calendar-box .calendar-body .calendar-cell.not-exists .calendar-day {
    cursor: not-allowed;
}

.calendar-box .calendar-day.exists {
    cursor: pointer;
}

.calendar-box .calendar-day.selected {
    border: 2px solid #222222;
}

.calendar-box .calendar-day span {
    z-index: 0;
    user-select: none;
}

.calendar-box .calendar-day .calendar-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    user-select: none;
}

.calendar-box .calendar-day .calendar-indicator.avbg {
    background-color: #9ee5bd;
}

.calendar-box .calendar-day .calendar-indicator.nabg {
    background-color: #eaeaea;
}

.calendar-box .calendar-day .calendar-indicator.full {
    background-color: #eaeaea;
}


.calendar-box .calendar-day .calendar-indicator.full.leed-open_match {
    background-color: #f1d886;
}

.calendar-box .calendar-day .calendar-indicator.full.leed-club_match {
    background-color: #86c7f1;
}

.calendar-box .calendar-day .calendar-indicator.av {
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 200px 0 0 200px;
   border-color: transparent transparent transparent #9ee5bd;
   transform: rotate(0deg);
}

.calendar-box .calendar-day .calendar-indicator.na {
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 200px 0 0 200px;
   border-color: transparent transparent transparent #eaeaea;
   transform: rotate(0deg);
}

.calendar-box .calendar-day .calendar-indicator.cm {

    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 200px 200px;
    border-color: transparent transparent #86c7f1 transparent;
    transform: rotate(0deg);

    /** background-color: #86c7f1; **/
}

.calendar-box .calendar-body .calendar-cell.not-exists .calendar-day {
    background-color: #fbf8f8;
}

.calendar-box .calendar-day .calendar-indicator.om {
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 200px 200px 0 0;
   border-color: #f1d886 transparent transparent transparent;
   transform: rotate(0deg);
}



.calendar-footer {

}

.calendar-footer .calendar-info {
    display: block;
    margin: 0 0 20px;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    padding: 10px 0;
    font-size: 0.9em;
}

.calendar-footer .calendar-insigngs {

}

.calendar-footer .calendar-insigngs {

}

.calendar-footer .calendar-insigngs .calendar-insigngs-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.calendar-footer .calendar-insigngs .calendar-insigngs-row .calendar-insigng {
    display: inline-block;
    width: 50%;
    text-align: left;
}

.calendar-footer .calendar-insigngs .calendar-insigngs-row .calendar-insigng .calendar-insigng-box {
    display: inline-block;
    overflow: hidden;
    width: 40px;
    text-align: center;
    height: 40px;
    vertical-align: middle;
    background-color: #efefef;
    margin-right: 10px;
}

.calendar-footer .calendar-insigngs .calendar-insigngs-row .calendar-insigng span {
    font-size: 0.9em;
}
.calendar-footer .calendar-insigngs .calendar-insigngs-row .calendar-insigng .calendar-insigng-box {
    border: 2px solid white;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}
.calendar-footer .calendar-insigngs .calendar-insigngs-row .calendar-insigng.cm .calendar-insigng-box {
    background-color: #86c7f1;
}

.calendar-footer .calendar-insigngs .calendar-insigngs-row .calendar-insigng.om .calendar-insigng-box {
    background-color: #f1d886;
}

.calendar-footer .calendar-insigngs .calendar-insigngs-row .calendar-insigng.av .calendar-insigng-box {
    background-color: #9ee5bd;
}

.calendar-footer .calendar-insigngs .calendar-insigngs-row .calendar-insigng.nv .calendar-insigng-box {
    background-color: #eaeaea;
}



/** ON **/

.calendar-box .calendar-cell.status-av .calendar-day .calendar-indicator.avbg {
    display: inline-block;
}

.calendar-box .calendar-cell.status-na .calendar-day .calendar-indicator.nabg {
    display: inline-block;
}

.calendar-box .calendar-cell.status-av .calendar-day .calendar-indicator.av {
    display: inline-block;
}

.calendar-box .calendar-cell.status-na .calendar-day .calendar-indicator.na {
    display: inline-block;
}

.calendar-box .calendar-cell.status-cm .calendar-day .calendar-indicator.cm {
    display: inline-block;
}

.calendar-box .calendar-cell.status-om .calendar-day .calendar-indicator.om {
    display: inline-block;
}

.calendar-box .calendar-cell.full-booked-reserved .calendar-day .calendar-indicator.full {
    display: inline-block;
}

.calendar-box .calendar-body .calendar-cell.status-av.full-booked-reserved .calendar-indicator,
.calendar-box .calendar-body .calendar-cell.status-na.full-booked-reserved .calendar-indicator,
.calendar-box .calendar-body .calendar-cell.status-cm.full-booked-reserved .calendar-indicator,
.calendar-box .calendar-body .calendar-cell.status-om.full-booked-reserved .calendar-indicator {
    display: none;
}


.calendar-box .calendar-cell .calendar-day .calendar-slots {
    border: 1px solid #efefef;
    width: 100%;
    height: 8px;
    position: absolute;
    bottom: 0;
    background: #eaeaea;

    display: none; /** disable for now **/
}

.calendar-box .calendar-cell .calendar-day .calendar-slots .calendar-slots-pg {
    background: #9ee5bd;
    width: 100%;
    height: 100%;
}

.calendar-box .calendar-cell.not-exists .calendar-day   .calendar-slots  {
    display: none;
}

a4e-gui-box.booking-list box-content {
    width: 100%;
    display: block;
    overflow-x: auto;
}
a4e-gui-box.booking-list box-content .bookings-content {
    min-width: 900px;
}

.bookings-header {
    background-color: #547fb6;
    color: #ffffff;
    text-transform: uppercase;
}
.bookings-header span button.btn {
    margin-top: 6px;
    margin-right: 5px;
}

.bookings-body .row {
    border-bottom: 1px solid #eaeaea;
    vertical-align: middle;

    align-items: center;
    justify-content: center;
}

.bookings-header .row span,
.bookings-body .row span {
    text-align: center;
    display: block;
}

.fishery.app  main.hassidebar.hastable .content .dataTables_wrapper table {
    max-width: 100%;
    min-width: 100%;
}

.fishery.app main.hassidebar.hastabs a4e-gui-tabs.tabs-with-options div.tabs-with-options.ui-tabs .ui-tabs-panel .tab-content {
    /*top: 100px;*/
}

/**
external
**/
main[page="outside"] {
    overflow: auto;
    height: 100vh;
}

main[page="outside"] a4e-gui-image-upload.logo,
main[page="outside"] a4e-gui-image.logo {
    max-width: 300px;
    max-height: 300px;
}

main[page="outside"] .image {
    background: #efefef;
    padding: 40px 0px 10px 0;
}

main[page="outside"] a4e-gui-image-upload.photo,
main[page="outside"] a4e-gui-image.photo {
    display: inline-block;
    width: 300px;
    height: 300px;
    max-width: 300px;
    max-height: 300px;
    border: 2px solid #cdcdcd;
    background: #ffffff;
}



main[page="outside"] .requriments {
    font-size: 0.8em;
}

main[page="outside"] .requriments ul, main[page="outside"] .requriments ul li {
    font-size: inherit;
}

main[page="outside"] .description {

}

main[page="outside"] .terms {
    font-size: 0.8em;
    margin-bottom: 50px;
}

main[page="outside"] .terms a {
    font-size: inherit;
    display: inline-block;
    padding: 0.3em;
}

main[page="outside"] .terms a4e-gui-image.app-logo {
    max-width: 100px;
    max-height: 100px;
}



main[page="outside"] .actions {
    margin: 30px 0;
}


main[page="outside"] .messages {
    background: red;
    font-size: 0.8em;
    color: #ffffff;
}

main[page="outside"] .messages ul, main[page="outside"] .messages ul li {
    font-size: inherit;
    color: inherit;
    list-style: none;
}

main[page="outside"] .messages ul li {
    padding: 10px;
}


main.hassidebar.hastabs a4e-gui-tabs.tabs-with-options div.tabs-with-options.ui-tabs .ui-tabs-panel .tab-options>a.btn {
   filter: none;
    pointer-events: all;
}

main.hassidebar.hastabs form .tab-content button,
main.hassidebar.hastabs form .tab-content .btn:not(.btn-danger),
main.hassidebar.hastabs form .tab-content .btn.btn-primary,
main.hassidebar.hastabs form .tab-content input[type="submit"] {
    filter: none;
    pointer-events: all;
}

main .content .email-template-edit {
    display: block;
    height: calc(100vh - 325px);
    width: 100%;
    border: 2px solid #efefef;
}

main .content .email-template-render {
    display: block;
    height: calc(100vh - 325px);
    width: 100%;
    border: 2px solid #efefef;
}

main .content input.display-order {
    width: 50px;
}