/*#region HEADER */

.header-wrapper {
    flex: 0 1 auto;
}

div#header {
    background-image: url(/images/header.png);
    height: 55px;
    border-bottom: 1px solid #5a5959;
    color: #ddd;
    font-family: 'PT Sans';
}

    div#header a {
        color: #ddd;
    }

        div#header a:hover {
            color: #ddd;
            text-decoration: none;
        }

.header-logo {
    margin-top: 7px;
    margin-left: 40px;
}

.header-content {
    padding-top: 12px;
    text-align: center;
    font-family: Signika;
    font-size: 12px;
    color: #ddd;
}

.header-search {
    margin-top: 16px;
    font-family: Signika;
    font-size: 12px;
}

#header-search-form .search-query {
    color: black;
    padding-bottom: 2px;
    padding-right: 3px;
    padding-right: 4px \9;
    padding-left: 3px;
    padding-left: 4px \9;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    /*margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;*/
    -webkit-transition: width 0.2s ease-in-out;
    -moz-transition: width 0.2s ease-in-out;
    -o-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
}

#header-search-form button {
    color: gray;
    border: 0;
    background: none;
    /** belows styles are working good */
    padding: 2px 5px;
    margin-top: -1px;
    position: relative;
    left: -28px;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.search-query:focus + button {
    z-index: 3;
}

.search-query:focus {
    width: 260px;
}

#superSearch {
    font-family: Ubuntu, sans-serif;
    line-height: 1.5;
    color: gray;
}

    #superSearch label {
        font-weight: 400;
        color: rgb(120,120,120);
    }

    #superSearch p {
        font-weight: 400;
        color: black;
    }

    #superSearch a {
        color: #337ab7 !important;
        text-decoration: none;
    }

/*#endregion */

/*#region MENU */

#menu {
    background-image: url("/images/menu-back.png");
    height: 50px;
    margin-bottom: 0px;
    background-repeat: repeat-x;
    display: block;
    font-size: 14px;
    color: #999;
}

    #menu ul {
        font-family: 'Ubuntu';
        font-size: 10px;
        font-weight: bold;
        margin: 0;
        padding: 0px;
    }

    #menu li {
        float: left;
        height: 50px;
        width: 120px;
        display: inline;
        list-style: none;
        text-align: center;
        -moz-transition: background-color 0.4s ease;
        -o-transition: background-color 0.4s ease;
        -webkit-transition: background-color 0.4s ease;
        -ms-transition: background-color 0.4s ease;
    }

        #menu li:hover {
            background-color: rgba(0,0,0,0.4);
            -moz-transition: background-color 0.1s ease;
            -o-transition: background-color 0.1s ease;
            -webkit-transition: background-color 0.1s ease;
            -ms-transition: background-color 0.1s ease;
        }

        #menu li a {
            /*height: 50px;*/
            background: none;
            color: #FFF;
            text-decoration: none;
        }

    #menu .div-general {
        /*height: 20px;*/
        background-repeat: no-repeat;
        background-position: center 7px;
        padding-top: 34px;
    }


    #menu .map {
        -webkit-animation: nav-22 1.5s 1.1s ease 1;
        -moz-animation: nav-22 1.5s 1.1s ease 1;
    }

    #menu .map-backcolor {
        background-color: #FF7FD4;
    }

    #menu .map2 {
        background-image: url(/images/menu-map.png);
    }

    #menu .map:hover {
        background-color: #FF7FD4;
    }


    #menu .transport {
        -webkit-animation: nav-33 1.5s 1.2s ease 1;
        -moz-animation: nav-33 1.5s 1.2s ease 1;
    }

    #menu .transport-backcolor {
        background-color: #01b0ec;
    }

    #menu .transport2 {
        background-image: url(/images/menu-transport.png);
    }

    #menu .transport:hover {
        background-color: #01b0ec;
    }

    #menu .finance {
        -webkit-animation: nav-55 1.5s 1.4s ease 1;
        -moz-animation: nav-55 1.5s 1.4s ease 1;
    }

    #menu .finance-backcolor {
        background-color: #98bf0d;
    }

    #menu .finance2 {
        background-image: url(/images/menu-finance.png);
    }

    #menu .finance:hover {
        background-color: #98bf0d;
    }

    #menu .time {
        -webkit-animation: nav-55 1.5s 1.4s ease 1;
        -moz-animation: nav-55 1.5s 1.4s ease 1;
    }

    #menu .time-backcolor {
        background-color: #735F24;
    }

    #menu .time2 {
        background-image: url(/images/menu-time.png);
    }

    #menu .time:hover {
        background-color: #735F24;
    }

    #menu .management {
        -webkit-animation: nav-55 1.5s 1.4s ease 1;
        -moz-animation: nav-55 1.5s 1.4s ease 1;
    }

    #menu .management-backcolor {
        background-color: #4d648d;
    }

    #menu .management2 {
        background-image: url(/images/menu-management.png);
    }

    #menu .management:hover {
        background-color: #4d648d;
    }

    #menu .report {
        -webkit-animation: nav-55 1.5s 1.4s ease 1;
        -moz-animation: nav-55 1.5s 1.4s ease 1;
    }

    #menu .report-backcolor {
        background-color: #f6b402;
    }

    #menu .report2 {
        background-image: url(/images/menu-reports.png);
    }

    #menu .report:hover {
        background-color: #f6b402;
    }


    #menu .register {
        -webkit-animation: nav-66 1.5s 1.5s ease 1;
        -moz-animation: nav-66 41.5s 1.5s ease 1;
    }

    #menu .register-backcolor {
        background-color: #ef7901;
    }

    #menu .register2 {
        background-image: url(/images/menu-registers.png);
    }

    #menu .register:hover {
        background-color: #ef7901;
    }


    #menu .settings {
        -webkit-animation: nav-77 1.5s 1.6s ease 1;
        -moz-animation: nav-77 1.5s 1.6s ease 1;
    }

    #menu .settings-backcolor {
        background-color: #d54421;
    }

    #menu .settings2 {
        background-image: url(/images/menu-settings.png);
    }

    #menu .settings:hover {
        background-color: #d54421;
    }


    #menu .help {
        -webkit-animation: nav-88 1.5s 1.7s ease 1;
        -moz-animation: nav-88 1.5s 1.7s ease 1;
    }

    #menu .help-backcolor {
        background-color: #8D8D8D;
    }

    #menu .help2 {
        background-image: url(/images/menu-help.png);
    }

    #menu .help:hover {
        background-color: #8D8D8D;
    }


/*#endregion */


#sub-menu {
    justify-content: center;
    display: flex;
    border-bottom: 1px solid lightgray;
    background-color: #f6f6f6;
}

    #sub-menu .item {
        margin: 8px 0px;
        padding: 4px 15px;
    }

    #sub-menu .item:not(:last-child) {
        border-right: 1px solid lightgray;
    }

    #sub-menu .notselected {
        letter-spacing: 0.39px;
    }

    #sub-menu .selected {
        font-weight: bold;
        letter-spacing: 0px;
    }

/*#region SIDEBAR MENU */

#sidebar-menu p {
    margin: 10px 0px 5px 0px;
    padding: 3px 10px 3px 30px;
    opacity: 0.6;
    font-family: Ubuntu;
    font-size: 12px;
    font-weight: normal;
    background-color: #DDD;
    color: black;
}

#sidebar-menu ul {
    list-style: none;
    margin: 0px 10px 0px 30px;
}

#sidebar-menu li a {
    font-family: Ubuntu;
    font-size: 11px;
    font-weight: 700;
    position: relative;
    display: block;
    padding: 3px 0px;
    color: #000;
    opacity: 0.7;
    z-index: 2;
    text-decoration: none;
    -webkit-transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
    -moz-transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
    -o-transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
    transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
}

    #sidebar-menu li a:hover {
        opacity: 1;
    }


/*#endregion */