/* ========================================================
*
* Melon - Flat & Responsive Admin Template
*
* ========================================================
*
* File: responsive.css
* Description: Template styles for responsive design (for phone and tablet devices)
* Version: 1.0
*
* ======================================================== */
.clearfix {
    *zoom: 1;
}

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
        line-height: 0;
    }

    .clearfix:after {
        clear: both;
    }
/* # Responsive Classes
================================================== */
@-ms-viewport {
    width: device-width;
}

.hidden {
    display: none;
    visibility: hidden;
}

.visible-phone {
    display: none !important;
}

.visible-tablet {
    display: none !important;
}

.hidden-desktop {
    display: none !important;
}

.visible-desktop {
    display: inherit !important;
}

@media (min-width: 768px) and (max-width: 979px) {
    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important;
    }

    .visible-tablet {
        display: inherit !important;
    }

    .hidden-tablet {
        display: none !important;
    }

    .custom {
        min-width: 900px;
    }
}

@media (max-width: 767px) {
    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important;
    }

    .visible-phone {
        display: inherit !important;
    }

    .hidden-phone {
        display: none !important;
    }
}

.visible-print {
    display: none !important;
}

@media print {
    .visible-print {
        display: inherit !important;
    }

    .hidden-print {
        display: none !important;
    }
}
/* # Media Queries
================================================== */
/* # Responsive Navbar/Navigation/Sidebar
================================================== */
/* # From 979px and below
-------------------------------------------------- */
@media (max-width: 979px) {
    body {
        padding-top: 0;
    }

    .navbar {
        position: relative;
        margin-bottom: 0;
    }

        .navbar .navbar-inner {
            padding: 0px;
        }

        .navbar .container {
            width: auto;
        }

        .navbar .navbar-brand {
            width: 159px;
            font-size: 14px;
            line-height: 23px;
        }



    .navbar-fixed-top {
        margin-right: 0px;
        margin-left: 0px;
    }

    #container.fixed-header {
        margin-top: 0;
    }

    .sidebar-fixed,
    #sidebar {
        position: relative !important;
        top: 0;
    }

    #divider {
        left: -8px;
    }

    .navbar-left.navbar-left-responsive {
        position: absolute;
        width: 100%;
        background: #2a4053;
        margin-top: 48px !important;
        margin-left: -20px;
        display: none;
    }

        .navbar-left.navbar-left-responsive > li {
            border-right: none;
        }
}

@media (max-width: 767px) {
    .navbar .navbar-brand {
        padding: 10px 20px 10px;
        margin-left: -10px;
    }

    .navbar-left.navbar-left-responsive {
        margin-left: 0;
    }
}

@media (min-width: 980px) {
    .nav-collapse.collapse {
        height: auto !important;
        overflow: visible !important;
    }

    .custom {
        min-width: 1800px;
    }
    .custom2 {
        min-width: 1300px;
    }
}
/* # Large desktops
-------------------------------------------------- */
@media (min-width: 1200px) {
}
/* # Tablets to regular desktops
-------------------------------------------------- */
@media (min-width: 768px) and (max-width: 979px) {
    #sidebar {
        width: 180px;
        overflow: visible;
        float: left;
        border-right: 1px solid #d1d1d1;
    }

        #sidebar ul#nav > li.current > a {
            border-right: 2px solid #668eb0;
        }

            #sidebar ul#nav > li.current > a > .arrow {
                right: 2px !important;
            }

        #sidebar ul#nav li a {
            font-size: 12px;
        }

        #sidebar ul#nav li ul.sub-menu {
            margin-left: 0px;
        }

            #sidebar ul#nav li ul.sub-menu li a {
                font-size: 11px;
            }

            #sidebar ul#nav li ul.sub-menu li ul.sub-menu {
                margin-left: 10px;
                margin-right: 0;
            }

    #divider {
        display: none;
    }

    .slimScrollBar,
    .slimScrollRail {
        display: none !important;
    }

    #content {
        margin-left: 181px;
    }
    /*[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
  		display: block;
  		float: none;
  		width: 100%;
  		margin-left: 0;
  		-webkit-box-sizing: border-box;
  		-moz-box-sizing: border-box;
  		box-sizing: border-box;
  	}*/
    /*.crumbs .crumb-buttons > li > a > span {
        display: none;
    }*/

    .page-stats li:first-child {
        margin-left: 0;
        padding-left: 0;
    }

    .page-stats li .summary {
        margin-right: 5px;
    }

    .input-xxlarge {
        width: 100%;
        min-height: 30px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}
/* # Phones to portrait tablets and narrow desktops
-------------------------------------------------- */
@media (max-width: 767px) {
    body {
        padding-left: 0px;
        padding-right: 0px;
    }

    html {
        overflow-x: hidden;
    }

    .container {
        padding: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    #content {
        margin-left: 0;
    }

    .row {
        margin-left: -15px;
        margin-right: -15px;
    }

    .navbar .container {
        padding: 0;
        /* * * * * * * * * * * *
  			 * Dropdown
  			 * * * * * * * * * * * */
    }

        .navbar .container .nav > li.nav-toggle {
            display: block;
        }

        .navbar .container .navbar-brand {
            display: none;
        }

        .navbar .container .username {
        }

        .navbar .container .nav-left {
            margin-left: -2px;
        }

        .navbar .container .navbar-nav {
            float: left;
            margin-top: 0;
            margin-bottom: 0;
        }

            .navbar .container .navbar-nav.pull-right {
                float: right;
                width: auto;
            }

            .navbar .container .navbar-nav > li {
                float: left;
            }

        .navbar .container .nav > li > .dropdown-menu.extended {
            /*margin-right: -150px;*/
            width: 200px;
        }

            .navbar .container .nav > li > .dropdown-menu.extended > li > a {
                color: #6f6f6f;
                padding: 8px;
            }

                .navbar .container .nav > li > .dropdown-menu.extended > li > a:hover {
                    background-color: #4d7496;
                    color: #fff;
                }

            .navbar .container .nav > li > .dropdown-menu.extended > li.footer > a {
                background-color: #f9f9f9;
            }

    #divider {
        display: none;
    }
    /* * * * * * * * * * * *
  	 * Project Switcher
  	 * * * * * * * * * * * */
    #project-switcher .project-list li {
        padding: 0 10px;
    }

    #container {
        position: relative;
        left: 0px;
        /*padding-left: 20px;
        padding-right: 20px;*/
    }

    #sidebar {
        position: fixed !important;
        overflow: hidden;
        overflow-y: auto;
        top: 0;
        left: -250px;
        width: 249px;
        height: 100%;
        z-index: 1;
        border-right: 1px solid #d1d1d1;
        -webkit-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        transition: left 0.3s ease;
    }

        #sidebar ul#nav > li.current > a {
            border-right: 2px solid #668eb0;
        }

        #sidebar ul#nav li a {
            padding: 12px 15px;
        }

        #sidebar ul#nav li ul.sub-menu li a {
            padding: 10px 15px 10px 20px;
        }

    #container,
    .header,
    #sidebar {
        -webkit-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        transition: left 0.3s ease;
    }

    .nav-open #container,
    .nav-open .header,
    .nav-open #sidebar {
        left: 250px;
        -webkit-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        transition: left 0.3s ease;
    }

    .nav-open #sidebar {
        left: 0;
    }

    .crumbs .crumb-buttons > li > a > span {
        display: none;
    }

    .daterangepicker.dropdown-menu {
        min-width: 0px !important;
    }

    .daterangepicker.opensleft .calendar.right {
        float: none;
    }

    .left-box,
    .right-box {
        width: 100%;
        float: none;
    }

    .dual-control {
        width: auto;
        margin: 20px 0;
        position: static;
        left: 0;
    }

    .btn-group,
    .input-append,
    .input-prepend {
        white-space: normal;
    }

    .form-horizontal .form-actions {
        padding-left: 20px;
        padding-right: 20px;
    }

    .form-horizontal .form-group {
        margin-right: -15px;
        margin-left: -15px;
    }

    .input-width-large,
    .input-width-xlarge,
    .input-width-xxlarge {
        width: 100% !important;
        min-height: 30px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .select2-container-multi.full-width-fix .select2-search-field input {
        width: 100% !important;
    }
    /* * * * * * * * * * * *
  	 * Login
  	 * * * * * * * * * * * */
    .login .logo {
        margin-top: 0 !important;
    }

    .login #Blank {
        margin-top: 0px !important;
    }

    .login .box {
        width: 100% !important;
    }

        .login .box .content {
            padding: 30px !important;
        }

    .login .single-sign-on {
        width: 90% !important;
    }

    .copyright .col-xs-9 #address {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .page-header {
        /*text-align: center;
        margin: 0 auto;
        display: none;*/
    }

        .page-header .page-title {
            float: none;
        }

        .page-header .page-stats {
            /*display: none;*/
        }



    .crumbs {
        /*text-align: center;
        display: none;*/
    }

        .crumbs .breadcrumb {
            /*display: none;*/
        }

        .crumbs .crumb-buttons {
            float: none;
            margin: 0 auto;
            display: inline-block;
            height: 40px;
        }
    /* * * * * * * * * * * *
  	 * Login
  	 * * * * * * * * * * * */
    .login .logo {
        margin-top: 0 !important;
    }

    .login #Blank {
        margin-top: 0px !important;
    }

    .login .box {
        width: 100% !important;
    }

        .login .box .content {
            padding: 30px !important;
        }

    .login .single-sign-on {
        width: 90% !important;
    }

    .footer {
        margin-bottom: 20px !important;
    }

    .copyright {
        position: inherit !important;
    }

        .copyright .col-xs-2 img {
            height: 65px !important;
            width: 65px !important;
        }

        .copyright .col-xs-9 {
            margin-top: 0px !important;
            margin-left: 20px;
        }

            .copyright .col-xs-9 #address {
                font-size: 8px;
            }
}