﻿/*Animation Height*/

.transformable {
    -webkit-transition: max-height 500ms ease-in-out;
    -moz-transition: max-height 500ms ease-in-out;
    -o-transition: max-height 500ms ease-in-out;
    -ms-transition: max-height 500ms ease-in-out;
    transition: max-height 500ms ease-in-out;
    -webkit-transition: min-height 500ms ease-in-out;
    -moz-transition: min-height 500ms ease-in-out;
    -o-transition: min-height 500ms ease-in-out;
    -ms-transition: min-height 500ms ease-in-out;
    transition: min-height 500ms ease-in-out;
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
    
    /*height:120px;*/
}

.menuHide {
    max-height:0px;
    min-height:0px;
    height:0px;
}

.menuShow {
    /*
    max-height:57px;
    min-height:120px;
    */
}

/*shadow*/
.shadowed {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
}
.shadowed img {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0,Color='#FFF')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
    filter: drop-shadow(0px 0px 15px  rgb(255, 255, 255));
}

/*Hover*/
.hoverBackrground {
    -webkit-transition: background-color 200ms ease-in-out;
    -moz-transition: background-color 200ms ease-in-out;
    -o-transition: background-color 200ms ease-in-out;
    -ms-transition: background-color 200ms ease-in-out;
    transition: background-color 200ms ease-in-out;
    padding: 10px;
}

.hoverBackrground:hover {
    background-color: rgba(0,0,0,0.3);
}
.footerHoverBackrground {
    -webkit-transition: background-color 200ms ease-in-out;
    -moz-transition: background-color 200ms ease-in-out;
    -o-transition: background-color 200ms ease-in-out;
    -ms-transition: background-color 200ms ease-in-out;
    transition: background-color 200ms ease-in-out;
}

.footerHoverBackrground:hover {
    background-color: rgba(0,0,0,0.1);
}

/*Hover*/
.userOptions {
    /*background-color: rgba(59, 59, 59, 0.78);
    color: white;*/
}
.hoverButton {
    -webkit-transition: background-color 200ms ease-in-out;
    -moz-transition: background-color 200ms ease-in-out;
    -o-transition: background-color 200ms ease-in-out;
    -ms-transition: background-color 200ms ease-in-out;
    transition: background-color 200ms ease-in-out;
    padding: 10px;
}

.hoverButton:hover {
    background-color: rgba(62, 155, 252, 0.20);
}
.userOptions.hoverButton:hover {
    /*background-color: rgba(59, 59, 59, 0.9);*/
    color: #FFFFFF;
}

.menuActivo {
    background-color: rgba(34, 178, 251, 0.20);
}

.internalShadow {
    moz-box-shadow: inset 0 0 10px #424040;
    -webkit-box-shadow: inset 0 0 10px #424040;
    box-shadow: inset 0 0 10px #424040;
}

.lpanel-header {
    background-image: url('../images/background.png');
    background-size: contain;
    background-repeat: repeat;
}

.lpanel-button {
  margin: 0px;
}

.lpanel-list {
  padding: 0px;
}

.lpanel-header-image {
    margin-left:  10px;
}

.lpanel-header-text {
    margin-left:  20px;
}

.lpanel-sm-text {
    font-size: 11px;
}

.lpanel-menu-text {
    color: #676D72;
}

.lpanel-menu-button {
    border-radius:0px; 
    margin:0px;
}
.menu-item-text-transform {
    text-transform: uppercase;
}








    .md-accordion .expandCollapse {
        width: 30px;
        height: 20px;
        position: relative;
        /*font-size: 20px;
        font-weight: bold;*/
        cursor: pointer;
        color: #fff;
        display: block;
        margin-top: -2px;
        margin-left: -2px;
        overflow: hidden;
    }

        .md-accordion .expandCollapse:active {
            border: 0px;
        }

        .md-accordion .expandCollapse:before, .md-accordion .expandCollapse:after {
            width: 30px;
            height: 20px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            line-height: 22px;
            text-align: center;
            -webkit-transition: .3s all ease-out;
            transition: .3s all ease-out;
        }

        .md-accordion .expandCollapse:before {
            opacity: 1;
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            font-family: 'icomoon';
            content: "\e90b";
            margin-top: -3px;
        }

        .md-accordion .expandCollapse:after {
            opacity: 1;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
            content: "";
            margin-left: -3px;
        }

    .md-accordion .active:before {
        opacity: 1;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        margin-left: 3px;
        margin-top: 0px;
    }

    .md-accordion .dataContent {
        background: #F2F2F2;
        height: 0px;
        overflow: hidden;
        -webkit-transition: .3s all ease-out;
        transition: .3s all ease-out;
    }

    .md-accordion .activeContent {
        height: auto;
        padding: 0px;
        display: block;
    }

    .md-accordion md-toolbar {
        cursor: pointer;
        border-bottom: 1px solid rgb(63,107,181);
        
    }
