blockquote, blockquote p {
    color: var(--blockquote-color);
}

cite, .cite-block {
    color: var(--blockquote-cite-color);
}

p {
    font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
    font-size: 13px;
}
select {
    border-radius: var(--form-input-border-radius);
    font-size: var(--form-input-font-size);
    border: var(--form-input-border);
    background-color: var(--form-input-background-color);
    color: var(--form-input-color);
}
.title-bar {
    padding: unset;
    padding-top: 0.5em;
}
.callout{
    border-radius: var(--callout-border-radius);
}
.logo-fill-1 {
    fill: var(--logo-fill-1);
    fill-rule: nonzero;
}
.logo-fill-2 {
    fill: var(--logo-fill-2);
    fill-rule: nonzero;
}

[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus {
    border: var(--form-input-border-focus);
    background-color: var(--form-input-bg-color-focus);
}

.reveal {
    background-color: var(--reveal-bg-color);
    border: var(--reveal-border);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Work Sans',Helvetica,Arial,Lucida,sans-serif;
}

select:focus {
    border: var(--input-select-focus-border);
    background-color: var(--input-focus-bg-color);
    box-shadow: var(--input-focus-bs);
}


.close-button:hover, .close-button:focus {
    color: var(--close-button-color);
}

.pagination .current {
    background: var(--nav-current-bg-color);
    color: var(--nav-current-color);
    border-radius: var(--nav-current-border-radius);
}

.pagination a, .pagination button {
    color: var(--nav-link-color);
}

.pagination a:hover, .pagination button:hover {
    background: var(--nav-hover-bg-color);
}

.pagination .disabled {
    color: var(--nav-disabled-color);
}

.password-visibility-icon {
    position: absolute;
    right: 8px;
    top: 6px;
    color: var(--dark-gray-color);
    font-size: larger;
}
.js-off-canvas-overlay {
    background: var(--off-canvas-disabled-bg-color);
}

.submenu-list > li, .submenu-list > li > a {
    color: var(--white-color)
}
.sidemenu, .sidemenu a {
    color: var(--sidemenu-text-color);
}
.nice-header {
    height: 70px;
    background: var(--primary-color);
    background: var(--header-bg-color);
}

.nice-body {
    border-radius: 1em 1em 0em 0em;
    margin-top: -1em;
    background: var(--body-bg-color);
    position: relative;
    min-height: 89.5vh;
}

.mc-loader-liquid {
    fill: var(--mainloader-liquid-color);
}

.mc-loader-flask-left-branch, .mc-loader-flask-right-branch, .mc-loader-flask-bottom {
    fill: var(--mainloader-flask-color);
}
.mc-loader-m-left {
    fill: var(--mainloader-m-left-color);
}

.mc-loader-m-right {
    fill: var(--mainloader-m-right-color);
}


a.active {
    color: var(--primary-color);
}

.auth-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--auth-footer-bg-color);
    color: var(--body-ft-color);
}

.callout {
    background-color: var(--callout-bg-color);
    color: var(--body-ft-color);
}

.auth-header {
    width: 100%;
    background-color: var(--auth-header-bg-color);
    color: var(--body-ft-color);
}

.password-condition-panel > li {
    font-size: x-small;
}

.headline-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
}

    .headline-wrapper > .headline-divider {
        border-top-color: #624a9a;
        border-top-style: solid;
        border-top-width: 1px;
        font-size: 0;
        line-height: 0;
        flex-grow: 1;
    }

    .headline-wrapper > .headline-title {
        padding-bottom: 0;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        margin: 0 10px;
        font-size: 24px;
    }

.card {
    background: var(--card-bg-color);
    color: var(--card-ft-color);
    border: var(--card-border);
}

.sidebar-box {
    padding: 0.4em;
    box-shadow: 0 3px 10px rgb(0 0 0 / 40%);
    background: var(--sidebar-bg-color);
    border-radius: 0.2em;
}

    .sidebar-box.clickable:active {
        box-shadow: unset;
    }

    .clickable {
        cursor: pointer;
    }

.recipe-input {
    font-size: 0.5em;
    border-color: #624a9a21;
    background-color: white;
    color: #000000fc;
    width: 100%;
    box-shadow: none;
}
.has-silent-tip {
     position: unset; 
     display: unset; 
     border-bottom: unset; 
     font-weight: unset; 
     cursor: unset;
}

.context-bottom-buttons-wrapper {
    padding: 0 1em 0 1em;
    width: 100%;
    font-size: 1.5em;
    text-align: center;
    display: flex;
    justify-content: center;
}

    .context-bottom-buttons-wrapper > div:hover, 
    .context-bottom-buttons-wrapper > span:hover {
        box-shadow: 0px 0px 2px 1px #ccc;
    }
    .context-bottom-buttons-wrapper > .context-bottom-buttons-item-1,
    .context-bottom-buttons-wrapper > .context-bottom-buttons-item-2 {
        padding: 0.5em;
        width: 64px;
        height: 60px;
        border-radius: 0.5em;
        float: left;
        margin-left: 1em;
        margin-right: 1em;
        cursor: pointer;
    }
    /* Context with 5 Button (Pyramid) */

    .context-bottom-buttons-wrapper > .context-bottom-buttons-item-2 {
        margin-top: 1em;
    }
    .context-bottom-buttons-wrapper > div:nth-child(3).context-bottom-buttons-item-2, 
    .context-bottom-buttons-wrapper > span:nth-child(3).context-bottom-buttons-item-2 {
        margin-top: 0;
    }
    .context-bottom-buttons-wrapper > div:first-child.context-bottom-buttons-item-2,
    .context-bottom-buttons-wrapper > span:first-child.context-bottom-buttons-item-2 {
        margin-left: 0;
        margin-top: 2em;
    }
    .context-bottom-buttons-wrapper > div:last-child.context-bottom-buttons-item-2,
    .context-bottom-buttons-wrapper > span:last-child.context-bottom-buttons-item-2 {
        margin-right: 0;
        margin-top: 2em;
    }

    .context-bottom-buttons-wrapper > div:first-child.context-bottom-buttons-item-1,
    .context-bottom-buttons-wrapper > span:first-child.context-bottom-buttons-item-1 {
        margin-left: 0;
        margin-top: 1em;
    }

    .context-bottom-buttons-wrapper > div:last-child.context-bottom-buttons-item-1,
    .context-bottom-buttons-wrapper > span:last-child.context-bottom-buttons-item-1 {
        margin-right: 0;
        margin-top: 1em;
    }

    #ContextBottomCanvas {
        backdrop-filter: blur(1px);
    }


/* small devices (Tablet & Large Phone, 768px and down) */
@media only screen and (max-width: 768px) {
    .context-bottom-buttons-wrapper {
        transform: scale(0.8);
    }

}

/* Extra small devices (phones, 600px and down) */
media only screen and (max-width: 600px) {
    .context-bottom-buttons-wrapper
    {
        transform: scale(0.8);
    }
}


/*Scrollbar Customization*/

/* width */
::-webkit-scrollbar {
    width: var(--scroll-bar-width);
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--scroll-bar-track-bg-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scroll-bar-handle-bg-color);
    border-radius: var(--scroll-bar-handle-border-radius);
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--scroll-bar-handle-hover-bg-color);
    }

/* Placeholder Loader */ 

.ph-row {
    height: 10px;
    margin-top: 7.5px;
    background-color: #ced4da;
}
@-webkit-keyframes phAnimation {
    0% {
        background-position: -200% 50%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes phAnimation {
    0% {
        background-position: -200% 50%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.ph-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background: linear-gradient(90deg, #f9f9f900, #ffffff8f, #ffffff00);
    background-size: 50% 100%;
    -webkit-animation: phAnimation 1.5s linear infinite;
    background-repeat: no-repeat;
    animation: phAnimation 1.5s linear infinite;
}
    .ph-loader:after, .ph-loader:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        background: linear-gradient(white 0%, transparent 100%);
    }


.border.top {
    border-top: 1px solid;
}

.border.bot {
    border-bottom: 1px solid;
}

.border.lft {
    border-left: 1px solid;
}

.border.rgt {
    border-right: 1px solid;
}

.validation-message {
    font-size: x-small;
    color: var(--input-error-label-color);
}
.margin-top-small  {
    margin-top: 0.5em;
}

.no-padding{
    padding: 0;
}
.no-margin {
    margin: 0;
}

.off-canvas {
    background: var(--mc-off-canvas-bg);
}



/*MC ANIMATION 1*/


@keyframes Pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

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

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


@keyframes waterApper {
    0% {
        transform: translateY(130px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes circleAppear {
    0% {
        transform: rotate(100deg);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes leftSideAppear {
    0% {
        transform: translate(-100px, -100px);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes rightSideAppear {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes topAppear {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes waterBoil {
    0% {
        transform: translate(138px, 0);
    }

    100% {
        transform: translate(0, -1px);
    }
}

@keyframes smallBubbleOut {
    0% {
        transform: translate(-10px, 70px) scale(1);
        transform-origin: center;
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(86px,-75px) scale(0);
        transform-origin: center;
        opacity: 0;
    }
}

@keyframes smallBubbleOutB {
    0% {
        transform: translate(10px, 70px) scale(1);
        transform-origin: center;
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(95px,-75px) scale(0);
        transform-origin: center;
        opacity: 0;
    }
}

@keyframes bigBubbleOut {
    0% {
        transform: translate(30px, 40px) scale(.8);
        transform-origin: center;
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(110px, -75px) scale(0);
        transform-origin: center;
        opacity: 0;
    }
}

.mc {
    overflow: visible;
}

.mc-anim-water-wrapper {
    opacity: 0;
    animation-name: waterApper;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 0.4s;
}

.mc-anim-water {
    animation-name: waterBoil;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0.4s;
}

.mc-anim-circle {
    transform-origin: center center;
    animation-name: circleAppear;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}

.mc-anim-side-1 {
    opacity: 0;
    animation-name: leftSideAppear;
    animation-duration: 0.7s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}

.mc-anim-side-2 {
    opacity: 0;
    animation-name: rightSideAppear;
    animation-duration: 0.7s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
}

.mc-anim-top-1,
.mc-anim-top-2 {
    opacity: 0;
    animation-name: topAppear;
    animation-duration: 1s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
}

.mc-anim-bubble-1 {
    transform: translate(20px, 80px);
    opacity: 0;
    animation-name: bigBubbleOut;
    animation-duration: 3.5s;
    animation-delay: 3.6s;
    animation-iteration-count: infinite;
}

.mc-anim-bubble-2 {
    transform: translateY(150px);
    opacity: 0;
    animation-name: smallBubbleOut;
    animation-duration: 3.4s;
    animation-delay: 2.8s;
    animation-iteration-count: infinite;
}

.mc-anim-bubble-3 {
    transform: translateY(150px);
    opacity: 0;
    animation-name: smallBubbleOutB;
    animation-duration: 3s;
    animation-delay: 2.2s;
    animation-iteration-count: infinite;
}

table.unstriped tbody {
    background-color: var(--table-unstriped-body-bg-color);
}

    table.unstriped tbody tr {
        background-color: var(--table-unstriped-tr-bg-color);
    }

p .focus {
    font-size: medium;
    color: #0097fb;
    font-family: cursive;
}