/*************************

        header

*************************/
.header{
    /*
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;

    box-shadow: 0 0.5em 1em -0.125em rgb(0 80 234 / 10%);
    */
    background-color: #ffffff;
    border-bottom: 1px solid #e3e3e3;
    padding: 0rem 3rem;
}


/*************************

      Employee

*************************/
.employee-bg {
    box-shadow: 0 3px 10px rgba(0, 71, 255, .15);
    background: linear-gradient(to bottom right, #e8f4ff 0, #f1fffd 100%);
}


/*************************

      Helper

*************************/
.is-full-height{
    min-height: 100vh;
}

.is-full-height-percent{
   height: 100%;
}


.is-full-width{
    width: 100%;
}

.has-background-blue-bis{
    background-color: #f4f6fb !important;
}

.is-border-grey {
    border:1px #e3e3e3 solid !important;
}

.is-border-right-grey{
    border-right: 1px solid #e3e3e3;
}

.is-border-top-grey{
    border-top: 1px solid #e3e3e3;
}

.is-full-height{
    min-height: 220px;
}


/*************************

     Custom Padding

*************************/

@media screen and (max-width: 768px) {
    .pr-6-custom {
        padding-right: 0rem !important;
    }
    .pl-6-custom {
        padding-left: 0rem !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .pr-6-custom {
        padding-right: 0rem !important;
    }
    .pl-6-custom {
        padding-left: 0rem !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .pr-6-custom {
        padding-right: 0rem !important;
    }
    .pl-6-custom {
        padding-left: 0rem !important;
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .pr-6-custom {
        padding-right: 3rem !important;
    }
    .pl-6-custom {
        padding-left: 3rem !important;
    }
}

@media screen and (min-width: 1408px) {
    .pr-6-custom {
        padding-right: 3rem !important;
    }
    .pl-6-custom {
        padding-left: 3rem !important;
    }
}


.hline-show {
    background-color: #00011f4d;
}


/*************************

      Hline Main Person

*************************/

@media screen and (max-width: 768px) {
    .hline {
        background-color: #00011f4d;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .hline {
        background-color: #00011f4d;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .hline {
        background-color: #00011f4d;
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .hline {
        display: none;
    }
}

@media screen and (min-width: 1408px) {
    .hline {
        display: none;
    }
}


.hline-show {
    background-color: #00011f4d;
}


/*************************

      Vline Main Person

*************************/
@media screen and (max-width: 768px) {
    .vline {
        border-right: 0px none;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .vline {
        border-right: 0px none;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .vline {
        border-right: 0px none;
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .vline {
        border-right: 1px solid #00011f4d;
    }
}

@media screen and (min-width: 1408px) {
    .vline {
        border-right: 1px solid #00011f4d;
    }
}


/*************************

      Label

*************************/
@media screen and (max-width: 768px) {
    .font-size-label {
        font-size: 3vw;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .font-size-label {
        font-size: 2vw;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .font-size-label {
        font-size: 1.4vw;
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .font-size-label {
        font-size: 1.3vw;
    }
}

@media screen and (min-width: 1408px) {
    .font-size-label {
        font-size: 0.65vw;
    }
}


/*************************

    Contacts

*************************/
@media screen and (max-width: 768px) {
    .font-size-contacts {
        font-size: 3vw;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .font-size-contacts {
        font-size: 2.2vw;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .font-size-contacts {
        font-size: 1.6vw;
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .font-size-contacts {
        font-size: 1.4vw;
    }
}

@media screen and (min-width: 1408px) {
    .font-size-contacts {
        font-size: 0.8vw;
    }
}


/*************************

    Title

*************************/
@media screen and (max-width: 768px) {
    .font-size-title {
        font-size: 3.2vw;
        line-height: 4vw;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .font-size-title {
        font-size: 2.4vw;
        line-height: 2.4vw;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .font-size-title {
        font-size: 1.8vw;
        line-height: 2vw;
    }
}

@media screen and (min-width: 1216px) and (max-width: 1407px) {
    .font-size-title {
        font-size: 1.6vw;
        line-height: 3vw;
    }
}

@media screen and (min-width: 1408px) {
    .font-size-title {
        font-size: 1vw;
        line-height: 2vw;
    }
}

/*************************

      mmenu

*************************/
body{overflow:hidden}

.mm-wrapper--position-bottom .mm-wrapper__blocker,
.mm-wrapper--position-left-front .mm-wrapper__blocker,
.mm-wrapper--position-right-front .mm-wrapper__blocker,
.mm-wrapper--position-top .mm-wrapper__blocker {
    z-index: 40;
}

.mm-menu--position-bottom.mm-menu--opened,
.mm-menu--position-left-front.mm-menu--opened,
.mm-menu--position-right-front.mm-menu--opened,
.mm-menu--position-top.mm-menu--opened {
    z-index: 50;
}


.mm-page {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100%;
    background: inherit;
}


/*************************

      Spinner

*************************/

:root {
    --size: 75px;
    --clr1: #EBCBFF;
    --clr3: #C0D9FF;
    --clr5: #A5FFF4;
    --animation-duration: 1150ms;
}


.spinner .spinner-item {
    --item-size: calc(var(--size) / 4);
    width: var(--item-size);
    height: var(--item-size);
    display: inline-block;
    margin: 0 3px;
    border-radius: 50%;
    border: 4px solid var(--clr-spinner);
    animation: spinner4 var(--animation-duration) ease-in-out infinite;
}
@keyframes spinner4 {
    0%, 100% {
        transform: translateY(75%);
    }
    50% {
        transform: translateY(-75%);
    }
}
.spinner .spinner-item:nth-child(1) {
    --clr-spinner: var(--clr5);
    animation-delay: calc(var(--animation-duration) / 6 * -1);
}
.spinner .spinner-item:nth-child(2) {
    --clr-spinner: var(--clr3);
    animation-delay: calc(var(--animation-duration) / 6 * -2);
}
.spinner .spinner-item:nth-child(3) {
    --clr-spinner: var(--clr1);
    animation-delay: calc(var(--animation-duration) / 6 * -3);
}

/*************************

      Toastify

*************************/
.toastify {
    padding: 12px 20px;
    color: #ffffff;
    display: inline-block;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    background: none;
    position: fixed;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    max-width: calc(50% - 20px);
    z-index: 2147483647;
}

/*************************

      Calendar

*************************/

.calendar .calendar-nav {
    -webkit-align-items: center;
    align-items: center;
    background: #D0DDFF;
    color: #000000;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 1.5rem;
    padding: 0.5rem;
}
.calendar .calendar-nav .calendar-nav-left, .calendar .calendar-nav .calendar-nav-right {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.calendar .calendar-nav .calendar-nav-left {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.calendar .calendar-nav .calendar-nav-right {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.calendar .calendar-header, .calendar .calendar-body {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -ms-flex-pack: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0.2rem 0;
}
.calendar .calendar-header .calendar-date,
.calendar .calendar-body .calendar-date {
    -webkit-flex: 0 0 14.28%;
    -ms-flex: 0 0 14.28%;
    flex: 0 0 14.28%;
    max-width: 14.28%;
}
.calendar .calendar-body .calendar-date {
    min-height: 6vw;
}
.calendar .calendar-header {
    background: #D0DDFF;
    color: #000000;
    font-size: 1rem;
    border-top: 1px solid #fff;
    border-bottom: 0.1rem solid #dbdbdb;
}
.calendar .calendar-header .calendar-date{
    background: #D0DDFF;
    color: #000000;
    font-size: 1rem;
    border-right: 0.1rem solid #ffffff;

}

.calendar .calendar-header .calendar-date:nth-child(7){
    background: #D0DDFF;
    color: #000000;
    font-size: 1rem;
    border-right: 0 none;
}



.calendar .calendar-body {
    color: #7a7a7a;
}
.calendar .calendar-date {
    border: 0;
    padding: 0.4rem;
}

.calendar .calendar-date .date-item:focus {
    background: #dbdbdb;
    border-color: #dbdbdb;
    color: white;
    text-decoration: none;
}
.calendar .calendar-date .date-item:hover {
    background: #dbdbdb;
    border-color: #dbdbdb;
    color: #7a7a7a;
    text-decoration: none;
}
.calendar .calendar-date .date-item.is-today {
    background: #00d1b2;
    border-color: #00d1b2;
    color: #fff;
}
.calendar .calendar-date.is-disabled .date-item,
.calendar .calendar-date.is-disabled .calendar-event {
    cursor: default;
    opacity: 0.25;
    pointer-events: none;
}
.calendar .calendar-range {
    position: relative;
}
.calendar .calendar-range::before {
    background: #d1fff8;
    content: "";
    height: 2.8rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.calendar .calendar-range.range-start::before {
    left: 50%;
}
.calendar .calendar-range.range-end::before {
    right: 50%;
}
.calendar .calendar-range .date-item {
    color: #00d1b2;
}


.calendar.is-calendar-large .calendar-body {
    padding: 0;
}
.calendar.is-calendar-large .calendar-body .calendar-date {
    border-bottom: 0.1rem solid #dbdbdb;
    border-right: 0.1rem solid #dbdbdb;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
    padding: 0;
}
.calendar.is-calendar-large .calendar-body .calendar-date:nth-child(7n) {
    border-right: 0;
}
.calendar.is-calendar-large .calendar-body .calendar-date:nth-last-child(-n+7) {
    border-bottom: 0;
}

.calendar.is-calendar-large .calendar-range::before {
    top: 1.9rem;
}
.calendar.is-calendar-large .calendar-range.range-start::before {
    left: auto;
    width: 1.9rem;
}
.calendar.is-calendar-large .calendar-range.range-end::before {
    right: 1.9rem;
}
.calendar.is-calendar-large .calendar-events {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -ms-flex-positive: 1;
    line-height: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.calendar.is-calendar-large .calendar-event {
    background-color: #ffffff;
    border-radius: 2px;
    color: #000000;
    display: block;
    font-size: 1rem;
    margin: 0.2rem auto;
    overflow: hidden;
    padding: 0.3rem 0.4rem;
    text-align: left;
    text-overflow: ellipsis;
    vertical-align: baseline;
    white-space: nowrap;
}


.calendar .calendar-body .calendar-date:nth-child(7n) {
    background-color: #E8ECF8
}

.calendar .calendar-body .calendar-date:nth-child(7n-1) {
    background-color: #E8ECF8
}



/*************************

        bulma

*************************/

.navbar-item img {
    max-height: 5rem;
}

/*************************

        button

*************************/
.button.is-blue {
    background-color: #1F6BFF;
    border-color: transparent;
    color: #ffffff;
}

.button.is-blue:hover,
.button.is-blue.is-hovered {
    background-color: #2f73f8;
    border-color: transparent;
    color: #ffffff;
}

.button.is-blue:focus,
.button.is-blue.is-focused {
    border-color: transparent;
    color: #ffffff;
}

.button.is-blue {
    font-weight: bold;
}


.button.is-blue[disabled],
fieldset[disabled] .button.is-blue {
    background-color: #3d79ee;
    border-color: transparent;
    box-shadow: none;
}


/*************************

        event

*************************/
.past-event{
    opacity: 0.3 !important;
}
.record-completed{
    opacity: 0.3 !important;
}

/*************************

        bulma

*************************/

.card {
    height: 100%;
}

.card-footer {
    background-color: transparent;
    border-top: 0 none;
    align-items: stretch;
    display: flex;
}


.tag.greed {
    background-color: #C2FFE9;
}

.tag.greed {
    background-color: #C2FFE9;
}

/*************************

        event

*************************/
.calendar-event {
    opacity: 1;
    transition-duration: 0.7s;
    transition-property: opacity;
}

.calendar-event.fade {
    opacity: 0.2;
}


@media screen and (min-width: 0px) {

    /*************************

          calendar

    *************************/
    .calendar {
        border: 0.1rem solid #dbdbdb;
        border-radius: 2px;
        display: block;
        min-width: auto;
        text-align: center;
    }

    .calendar.is-calendar-large .date-item {
        -webkit-align-self: flex-end;
        align-self: flex-end;
        -ms-flex-item-align: end;
        height: 2rem;
        margin-right: 0.5rem;
        margin-top: 0.5rem;
    }

    .calendar .calendar-date .date-item {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        border: 0.1rem solid transparent;
        border-radius: 100%;
        color: #4a4a4a;
        cursor: pointer;
        height: 2rem;
        line-height: 2rem;
        outline: none;
        padding: 0rem;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease;
        vertical-align: middle;
        white-space: nowrap;
        width: 2rem;
    }
}

@media screen and (min-width: 769px), print {

    /*************************

          calendar

    *************************/
    .calendar {
        border: 0.1rem solid #dbdbdb;
        border-radius: 2px;
        display: block;
        min-width: 28rem;
        text-align: center;
    }

    .calendar.is-calendar-large .date-item {
        -webkit-align-self: flex-end;
        align-self: flex-end;
        -ms-flex-item-align: end;
        height: 2.8rem;
        margin-right: 0.5rem;
        margin-top: 0.5rem;
    }

    .calendar .calendar-date .date-item {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        border: 0.1rem solid transparent;
        border-radius: 100%;
        color: #4a4a4a;
        cursor: pointer;
        height: 2.8rem;
        line-height: 2rem;
        outline: none;
        padding: 0.3rem;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease;
        vertical-align: middle;
        white-space: nowrap;
        width: 2.8rem;
    }
}

@media screen and (min-width: 1024px) {

    /*************************

          calendar

    *************************/
    .calendar {
        border: 0.1rem solid #dbdbdb;
        border-radius: 2px;
        display: block;
        min-width: 28rem;
        text-align: center;
    }

    .calendar.is-calendar-large .date-item {
        -webkit-align-self: flex-end;
        align-self: flex-end;
        -ms-flex-item-align: end;
        height: 2.8rem;
        margin-right: 0.5rem;
        margin-top: 0.5rem;
    }

    .calendar .calendar-date .date-item {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        border: 0.1rem solid transparent;
        border-radius: 100%;
        color: #4a4a4a;
        cursor: pointer;
        height: 2.8rem;
        line-height: 2rem;
        outline: none;
        padding: 0.3rem;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease;
        vertical-align: middle;
        white-space: nowrap;
        width: 2.8rem;
    }
}

@media screen and (min-width: 1216px) {

    /*************************

          calendar

    *************************/
    .calendar {
        border: 0.1rem solid #dbdbdb;
        border-radius: 2px;
        display: block;
        min-width: 28rem;
        text-align: center;
    }

    .calendar.is-calendar-large .date-item {
        -webkit-align-self: flex-end;
        align-self: flex-end;
        -ms-flex-item-align: end;
        height: 2.8rem;
        margin-right: 0.5rem;
        margin-top: 0.5rem;
    }

    .calendar .calendar-date .date-item {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        border: 0.1rem solid transparent;
        border-radius: 100%;
        color: #4a4a4a;
        cursor: pointer;
        height: 2.8rem;
        line-height: 2rem;
        outline: none;
        padding: 0.3rem;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease;
        vertical-align: middle;
        white-space: nowrap;
        width: 2.8rem;
    }

}

@media screen and (min-width: 1408px) {

    /*************************

          calendar

    *************************/
    .calendar {
        border: 0.1rem solid #dbdbdb;
        border-radius: 2px;
        display: block;
        min-width: 28rem;
        text-align: center;
    }

    .calendar.is-calendar-large .date-item {
        -webkit-align-self: flex-end;
        align-self: flex-end;
        -ms-flex-item-align: end;
        height: 2.8rem;
        margin-right: 0.5rem;
        margin-top: 0.5rem;
    }

    .calendar .calendar-date .date-item {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        border: 0.1rem solid transparent;
        border-radius: 100%;
        color: #4a4a4a;
        cursor: pointer;
        height: 2.8rem;
        line-height: 2rem;
        outline: none;
        padding: 0.3rem;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease;
        vertical-align: middle;
        white-space: nowrap;
        width: 2.8rem;
    }
}