/*=============================================================
    Authour URI: www.binarycart.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */
/*==============================================
    GENERAL  STYLES    
    =============================================*/
    body {
        font-family: 'Open Sans', sans-serif;
        line-height:30px;
    }
    
     #wrapper {
        width: 100%;
        margin-top:50px;
    }
    
    #page-wrapper {
        padding: 15px 15px;
        min-height: 600px;
        background:#F3F3F3;
       
    }
    #page-inner {
        width:100%;
        margin:10px 20px 10px 0px;
        background-color:#fff!important;
        padding:10px;
        min-height:1050px;
    }
    .pad-top {
        padding-top:15px;
    }
    /*==============================================
        MENU STYLES    
        =============================================*/
    
    .sidebar-collapse .nav {
        padding:0;
        padding-top:50px;
    }
    
    .sidebar-collapse > .nav > li > a {
        padding:15px 10px;
        color: #214761;
    font-weight: 900;
    font-size: 16px;
    }
    .sidebar-collapse > .nav > li {
        border-bottom:1px solid #e1e1e1;
    }
    .sidebar-collapse .nav > li > a:hover,
    .sidebar-collapse .nav > li > a:focus {
        
        background:#F3F3F3;
        outline:0;
    }
    
    .navbar-side {
        border:none;
        background-color: #fff;
        
    }
    .navbar-inverse {
    
    background-color: #214761;
    border-color: #F0F0F0;
    min-height: 80px;
    }
    .ajuste{
        margin-top: -50px;
    }
    .ff{
        margin-top: 10PX;
        font-size: 20px;
        background-color: #2ba9fd;
        background: #8deffc;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
    }
    .nav > li > a > i {
        margin-right:10px;
    }
    .logout-spn {
        float:right;
        color:#fff;
        font-size:25px;
        font-weight:800;
        margin:20px;
        margin: 10px 25px 10px 50px;
    }
        .logout-spn a {
            text-decoration:none;
        }
    .active-link {
        background-color:#f3f3f3;
    }
        
    /*==============================================
        DASHBOARD STYLES    
        =============================================*/
    .div-square {
        padding:15px;
        border:5px double #14a2d2;
        -webkit-border-radius:8px;
       -moz-border-radius:8px;
        border-radius:8px;
        margin:15px;
    
    }
    
    .div-square> a,.div-square> a:hover {
        color:#808080;
         text-decoration:none;
    }
    /*==============================================
        FOOTER STYLES     
        =============================================*/
    .footer {
        background-color:#454545;
        width:100%;
        color:#fff;
        padding:20px 50px 20px 50px;
         padding-left:20px;
    }
    
    
        .footer > a, .footer>a:hover {
           
            color:#fff;
        }
    
    /*==============================================
        MEDIA QUERIES     
        =============================================*/
     
     @media(min-width:768px) {
         #page-wrapper{
                   margin: 0 0 0 260px;
            padding: 15px 30px;
            min-height: 1050px;
            
        }
        
        
        .navbar-side {
            z-index: 1;
            position: absolute;
            width: 260px;
           
        }
    
     
    }

    .tabbar {
        --icon-active: #275EFE;
        --icon-inactive: #6C7486;
        --icon-hover: #99A3BA;
        --text: #E4ECFA;
        --circle: #E4ECFA;
        --background: #15b9f454;
        --shadow: rgba(18, 22, 33, .1);
        border-radius: 0 0 12px 12px;
        background: var(--background);
        width: auto;
        height: 100px;
  
        font-size: 30px;
        box-shadow: 0 8px 16px var(--shadow);
      }
      .tabbar > div {
        display: -webkit-box;
        display: flex;
        height: auto;
        position: relative;
      }
      .tabbar > div label {
        -webkit-box-flex: 0;
                flex: 0 0 33.33%;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
                justify-content: center;
        -webkit-box-align: center;
                align-items: center;
        position: relative;
        cursor: pointer;
        z-index: 1;
      }
      .tabbar > div label svg,
      .tabbar > div label span {
        display: block;
        -webkit-backface-visibility: hidden;
        -webkit-transition: opacity 0.4s ease, color 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);
        transition: opacity 0.4s ease, color 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);
        transition: transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12), opacity 0.4s ease, color 0.4s ease;
        transition: transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12), opacity 0.4s ease, color 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);
        -webkit-transform: translateY(var(--y)) scale(var(--s));
                transform: translateY(var(--y)) scale(var(--s));
      }
      .tabbar > div label svg {
        --y: 0;
        --s: .84;
        width: 40px;
        height: 40px;
        margin: auto;
        color: var(--icon-inactive);
        -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
      }
      .tabbar > div label span {
        --y: -8px;
        --s: .92;
        font-size: 19px;
        font-weight: 500;
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        bottom: 0;
        opacity: 0;
        color: #ffffff;
        top: 85px;
        -webkit-transform-origin: 50% 0;
                transform-origin: 50% 0;
      }
      .tabbar > div label:hover svg {
        color: var(--icon-hover);
      }
      .tabbar > div label:active svg {
        --s: .76;
      }
      .tabbar > div input {
        display: none;
      }
      .tabbar > div input:nth-of-type(1):checked + label + input + label + input + label + span {
        --x: 0;
      }
      .tabbar > div input:nth-of-type(2):checked + label + input + label + span {
        --x: 100%;
      }
      .tabbar > div input:nth-of-type(3):checked + label + span {
        --x: 200%;
      }
      .tabbar > div input:checked + label svg {
        --y: 6px;
        --s: 1;
        color: #15b9f4;
      }
      .tabbar > div input:checked + label span {
        --s: 1;
        --y: -14px;
        opacity: 1;
      }
      .tabbar > div > span {
        --x: 0;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 33.33%;
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);
        transition: -webkit-transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);
        transition: transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);
        transition: transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12), -webkit-transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);
        -webkit-transform: translateX(var(--x));
                transform: translateX(var(--x));
        -webkit-backface-visibility: hidden;
      }
      .tabbar > div > span:after {
        content: '';
        width: 44px;
        height: 44px;
        display: block;
        border-radius: 50%;
        background: var(--circle);
        position: absolute;
        left: 50%;
        top: 35px;
        box-shadow: 0 2px 8px var(--shadow);
        margin: -14px 0 0 -22px;
      }
      
      html {
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
      }
      
      * {
        box-sizing: inherit;
      }
      *:before, *:after {
        box-sizing: inherit;
      }
      
      body {
        font-family: Roboto, Arial;
        -webkit-box-pack: center;
                justify-content: center;
        -webkit-box-align: center;
                align-items: center;
      }
      body .dribbble {
   
}
      body .dribbble img {
      
      }