:root {
    --main-color: #FFF;
    /*--main-color: #96C242;*/
    --text-color:#4C4C4C;
    --primary-color:#548F43;
    --app-background-color:#D8D9DA;
    --content-background-color:#F2F2F0;
    --panel-background-color:#FFF;

    --softorange:#fff;
    --tomatored: #F25C66;
    --mediumblu: #1E272D;

    --sidebar-width:80px;
    --sidebar-background-color:#4C4C4C;
    --sidebar-color:white;
}

.app {
    background-color:var(--app-background-color);
    /*background-color:white;*/
}
.content {
    background-color:var(--content-background-color);
}
.panel {
    background-color:var(--panel-background-color);
    padding: 20px;
}

table {
    border-collapse: initial;
}

/** TOAST **/
.toast-success {
    background-color: #81C784;
}
.toast-error {
    background-color: #E57373;
}
.toast-position {
    position: fixed !important;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(50%);
    height: 50px;
}

.dot {
    height: 25px;
    width: 25px;
    border:1px solid var(--primary-color);
    border-radius: 50%;
    display: inline-block;
    text-align: center;

}
/**
tab-content
 */
.tab-content {
    -webkit-animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.scale-in-top {
    -webkit-animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-7-16 10:5:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}
@keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}

/**
Divider with text
*/
.app-divider {
    display: block;
    position: relative;
    border-bottom: 1px solid var(--sidebar-background-color);
    height: .1rem;
    margin: 40px 0 20px;
    text-align: left;
}
.app-divider[data-content]::after {
    color:var(--primary-color);
    font-size: 18px;
    font-weight: 500;
    content: attr(data-content);
    display: inline-block;
    padding-top: 5px;
    padding-right: 10px;
    text-align: left;
    -webkit-transform: translateY(-35px);
    -ms-transform: translateY(-35px);
    transform: translateY(-35px);
}

/*.nav-wrapper { background-color:var(--primary-color); }*/
/*.secondary-content { color:var(--primary-color); }*/
/*.btn { background-color: var(--primary-color); }*/
/*.page-footer { background-color:var(--primary-color); }*/
/*.input-field { color:var(--primary-color); }*/
/*.input-field > .material-icons { color:var(--primary-color); }*/
/*.input-field > label{color:var(--primary-color); }*/
/*.dropdown-content > li > a { color:var(--primary-color); }*/

.vh-100 {
    height: 100vh !important;
}
form {
    width: 100%;
}
/**
CSS SCROLLBAR
 */
/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: #e4f1e0;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: var(--primary-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/**
CSS SIDEBAR
 */
#leftSideBar {
    position:fixed;
    width: var(--sidebar-width);
    font-size: 11px;
    background-color: var(--sidebar-background-color);
}
@media (max-width: 1410px){
    #leftSideBar {
        position:fixed;
        width: var(--sidebar-width);
        font-size: 11px;
        background-color: var(--sidebar-background-color);
    }
}
@media (min-width: 1411px){
    #leftSideBar {
        position:fixed;
        width: var(--sidebar-width);
        font-size: 11px;
        background-color: var(--sidebar-background-color);

    }
}
.sidebar {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between; ;
    color:white;
}
.sidebar-header {
    height: 180px;
    /*border: 1px solid red;*/
    align-content: center;
    color:var(--sidebar-color);
}
.sidebar-body {
    /*border: 1px solid red;*/
    overflow-y: auto;
    height: 100%;
    padding-top:20px;
}
.sidebar-footer {
    /*border: 1px solid red;*/
    color:var(--sidebar-color);
}
.menu-item {
    color:var(--text-color);
    fill:var(--text-color);
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom: 10px;
    color:var(--sidebar-color);
}
.menu-item:hover {
    color:var(--text-color);
    background-color: var(--content-background-color);
    -webkit-box-shadow: inset 5px 0px 0px 0px var(--primary-color);
    -moz-box-shadow: inset 5px 0px 0px 0px var(--primary-color);
    box-shadow: inset 5px 0px 0px 0px var(--primary-color);
}
.menu-item-active {
    color:var(--text-color);
    background-color: var(--content-background-color);
    -webkit-box-shadow: inset 5px 0px 0px 0px var(--primary-color);
    -moz-box-shadow: inset 5px 0px 0px 0px var(--primary-color);
    box-shadow: inset 5px 0px 0px 0px var(--primary-color);
}
.sidebar-body .dropdown-content {
    transform: translateX(-65px);
    width:250px;
    z-index: 5000;
}


/**
CSS PAGE
 */
.page-header {
    padding:20px 20px 20px 20px;
}
.page-body {
    padding:20px;
    overflow-y: auto;
}

input:-webkit-autofill{
     -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.layout-flex-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.layout-flex-item-first {
    align-self: auto;
}
@media (max-width: 768px){
    .layout-flex-item-first {
        display: none;
    }
}
.layout-flex-item-two {
    flex-basis:1280px;
    align-self: auto;
    margin-left:calc(var(--sidebar-width));
    /*border: 1px solid blue;*/
    overflow-y: auto;
}
@media (max-width: 768px){
    .layout-flex-item-two {
        margin-left:0px !important;
    }
}
@media (max-width: 1410px){
    .layout-flex-item-two {
        flex-basis:100%;
        align-self: auto;
        margin-left:calc(var(--sidebar-width));
        /*border: 1px solid red;*/
    }
}
@media (min-width: 1411px){

    .layout-flex-item-two {
        flex-basis:1280px;
        align-self: auto;
        margin-left:calc(var(--sidebar-width));
        /*border: 1px solid blue;*/
    }
}

.layout-flex-item-three {
    align-self: auto;
}


/* Close button */
body{
    background-color: $mediumblu;
}

.close-container{
    position: absolute;
    right:20px;
    margin: auto;
    width: 20px;
    height: 20px;
    margin-top: 10px;
    cursor: pointer;
}

.leftright{
    height: 4px;
    width: 20px;
    position: absolute;
    margin-top: 10px;
    background-color: var(--text-color);
    border-radius: 2px;
    transform: rotate(45deg);
    transition: all .3s ease-in;
}

.rightleft{
    height: 4px;
    width: 20px;
    position: absolute;
    margin-top: 10px;
    background-color: var(--text-color);
    border-radius: 2px;
    transform: rotate(-45deg);
    transition: all .3s ease-in;
}

/*
label{
    color: var(--primary-color);
    font-family: Helvetica, Arial, sans-serif;
    font-size: .6em;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all .3s ease-in;
    opacity: 0;
}
*/
.close{
    margin: 30px 0 0 -10px;
    position: absolute;
}

.close-container:hover .leftright{
    transform: rotate(-45deg);
    background-color: var(--tomatored);
}
.close-container:hover .rightleft{
    transform: rotate(45deg);
    background-color: var(--tomatored);
}
.close-container:hover label{
    opacity: 1;
}



/* Menu de navigation mobile */
.bottom-nav-bar {
    height:45px;
    position:fixed;
    bottom:0px;
    width: 100%;
}


.bottom-nav-bar .layout-flex-container {
    height:100%;
}
@media (min-width: 769px){
    .bottom-nav-bar {
        display:none;
    }
}
.menu-mobile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: flex-start;
    height: 100%;
    background-color: var(--primary-color);
    color:white;
    fill:white;
}
.menu-item-mobile {
    color:white;
    fill:white;
    align-self: center;
    width:65px;
    text-align:center;
    cursor: pointer;
}
.menu-item-mobile:hover {
    background-color: var(--primary-color);
}
.menu-item-active-mobile {
    background-color: var(--primary-color);
}

.menu-mobile-content {
    display: none;
    position:fixed;
    top:0px;
    width:100%;
    height:100%;
    background-color: var(--primary-color);
    opacity: 0.5;
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    overflow-y: auto;
}

.menu-mobile-content .collapsible {
    border: 0px;
    margin-top:20px;
}
.menu-mobile-content .collapsible .collapsible-header {
    border: 0px;
    background-color: var(--primary-color);
    color:white;
    fill:white;
}
.menu-mobile-content .collapsible .collapsible-body {
    border: 0px;
    background-color: var(--content-background-color);

}
.menu-mobile-content .collapsible .collapsible-body i {
    font-size: 0.8em;
}
.menu-mobile-content .collapsible .collapsible-body a {
    color: var(--text-color);
    fill: var(--text-color);
    padding-bottom:20px;
}
.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-6-5 18:28:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-out-bottom {
    -webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-6-5 18:42:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
}
@keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
}

.slide-out-bck-center {
    -webkit-animation: slide-out-bck-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-bck-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-6-5 18:34:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-bck-center
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-bck-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(-1100px);
        transform: translateZ(-1100px);
        opacity: 0;
    }
}
@keyframes slide-out-bck-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(-1100px);
        transform: translateZ(-1100px);
        opacity: 0;
    }
}


.fade-out {
    -webkit-animation: fade-out 1s ease-out both;
    animation: fade-out 1s ease-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-6-8 17:24:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.fade-in-right {
    -webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-7-20 11:51:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-7-20 14:0:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.slide-in-top {
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-7-20 14:2:7
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-7-20 16:6:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}