[v-cloak]>* {
    display: none
}

[v-cloak]::before {
    content: "loading…"
}

#loader.loader-overlay {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background: rgba(24, 24, 24, 0.75);transition: opacity 200ms ease-in-out 0s;
    opacity: .8;
    position: absolute;
    top:0;
    left:0;
    z-index: 99999
}
#loader.loader-overlay div.loader{
    padding: 30px 30px;
    font-weight: bold;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background: #fff none repeat scroll 0 0;
    border: 2px solid #f9c132;
    color: #333;
}

.is-full-screen {
    width: 100%;
    height: 100vh;
    background: #000000a5;
}

.toast {
    visibility: visible !important;
    position: fixed;
    /* Sit on top of the screen */
    z-index: 99999;
    /* Add a z-index if needed */
    max-width: none!important;
    opacity: 1 !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.toast>div {
    min-width: 220px;
    /* Set a default minimum width */
    color: #fff;
    /* White text color */
    border-radius: 2px;
    /* Rounded borders */
    padding: 8px 16px;
    /* Padding */
    letter-spacing: 2px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Animations to fade the toast in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}
.is-success {
    background-color: #48c774;
    border-color: transparent;
    color: #fff;
}
.is-warning {
    background-color: #ffdd57;
    border-color: transparent;
    color: rgba(0,0,0,.7);
}
.is-danger {
    background-color: #f14668;
    border-color: transparent;
    color: #fff;
}
.is-info {
    background-color: #3298dc;
    border-color: transparent;
    color: #fff;
}
.is-top-right {
    top: 30px;
    right: 30px;
}

.is-top-left {
    top: 30px;
    left: 30px;
}

.is-top-center {
    top: 30px;
    justify-content: center;
    display: flex;
    width: 100%;
}

.is-bottom-right {
    bottom: 30px;
    right: 30px;
}

.is-bottom-left {
    bottom: 30px;
    left: 30px;
}

.is-bottom-center {
    bottom: 30px;
    justify-content: center;
    display: flex;
    width: 100%;
}

.is-left-center {
    left: 30px;
    top: 0;
    align-items: flex-start;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    flex-direction: column;
}

.is-right-center {
    right: 30px;
    top: 0;
    align-items: flex-end;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    flex-direction: column;
}

.is-center {
    top: 0;
    align-items: center;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
}

.dialog-container,
.alert-container {
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999;

}

.dialog-container {
    opacity: .5;
}

.dialog,
.alert {
    z-index: 999999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 350px;
    padding: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.dialog {
    background: #8a8a8a;
}

.alert {
    padding: 1.5rem !important;
    text-align: center;
    max-width: 500px;
}
.alert p{
    text-align: center;
}
.alert button[data-dismiss="alert"]{
    margin-top: -40px;
    margin-right: -40px;
    background: red;
    border-radius: 50%;
    height: 30px;
    width: 31px;
    color: #fff;
    border:1px solid #fff;
}

.alert-danger, .alert-danger  button[data-dismiss="alert"]{
    color: #f5c6cb;
    background-color: #721c24;
    border-color: #f5c6cb;
    box-shadow: 1px 1px 5px 3px #721e23;
}

.alert-success, .alert-success  button[data-dismiss="alert"] {
    color: #c3e6cb;
    background-color: #155724;
    border-color: #c3e6cb;
    box-shadow: 1px 1px 5px 3px #155724;
}

.alert-info, .alert-info  button[data-dismiss="alert"] {
    color: #bee5eb;
    background-color: #0c5460;
    border-color: #bee5eb;
    box-shadow: 1px 1px 5px 3px #0c5460;
}

.alert-warning, .alert-warning  button[data-dismiss="alert"] {
    color: #ffeeba;
    background-color: #856404;
    border-color: #ffeeba;
    box-shadow: 1px 1px 5px 3px #856404;
}

.calendar-body,.year-body,.month-body{
    height: 400px;
}
.calendar-body{
    overflow: hidden;
}
.year-body,.month-body{
    overflow-x: hidden;
    overflow-y: scroll;
}
.cursor-pointer{
    cursor:pointer;
}
.month-body>.col-sm-4:hover,.year-body>.card-title:hover,.year-body>.card-title:focus{
    color:#17a2b8!important;
}
.selected-date{
    border-radius: 50%;
    padding: 4px;
    width: 30px;
    height: 30px;
    background-color: #17a2b8!important;
    color: #fff;
    text-align: center;
}

.calendar-container {
    height: 100vh;
    width: 100vw;
    right: 0px;
    position: fixed;
    z-index: 999999;
    top: 0px;
    overflow: hidden;
    background-color: hsla(0, 0%, 10%, .50);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#deleteDialog{background: rgba(24, 24, 24, 0.75);transition: opacity 200ms ease-in-out 0s;}
#deleteDialog .modal-content{min-width: 25em;max-width: 25em;color: #fff;background-color: #343a40;}
#deleteDialog .modal-header{justify-content:center;padding: 1rem 1rem 0;border-bottom: 0;}
#deleteDialog .modal-header .modal-title{letter-spacing: 1px;}
#deleteDialog .modal-body{text-align: center;padding:1em}
#deleteDialog .modal-body p{margin-bottom: 0;font-size: 15px;}
#deleteDialog .modal-footer .btn{border-radius:2.5rem;}
#deleteDialog .modal-footer{justify-content:center;padding: 0 1rem 1rem;border-top: 0;}
#inputDialog{background: rgba(24, 24, 24, 0.75);transition: opacity 200ms ease-in-out 0s;}
#inputDialog .modal-content{min-width: 25em;max-width: 25em;color: #fff;background-color: #343a40;}
#inputDialog .modal-header{justify-content:center;padding: 2rem 1rem 0;border-bottom: 0;}
#inputDialog .modal-header .modal-title{letter-spacing: 1px;color:#fff;}
#inputDialog .modal-body{text-align: center;padding:2em}
#inputDialog .modal-body p{margin-bottom: 0;font-size: 15px;}
#inputDialog .modal-body p input,#inputDialog .modal-body p input::placeholder{text-align: center;}
#inputDialog .modal-body p input:focus{color:#eee!important;}
#inputDialog .modal-footer .btn{border-radius:2.5rem;}
#inputDialog .modal-footer{justify-content:center;padding: 0 1rem 2rem;border-top: 0;}