/* ----- document ----- */

html {
    height: 100%;
    overflow-y: auto;
}

a {
    color: #F36F20;
}

a:hover {
    color: #F36F20;
}

.background-gray {
    background-color: #F0F0F0;
}

.background-blue-gradient {
    background: radial-gradient(ellipse, rgba(1, 108, 190, 0.8), rgba(1, 38, 108, 0.8));
}

.background-orange-gradient {
    background: radial-gradient(ellipse, rgba(252, 175, 23, 0.8), rgba(243, 111, 33, 0.8));
}

.footer-element a {
    color: #fff;
}

h1, h2, h3, h4, h5, h6, p, ul, li {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

.well {
    box-shadow: 0 0 10px gray;
}

.well > h4 {
    padding: 10px 0;
}

.text-gray {
    color: gray;
}

form > .form-group:first-of-type {
    margin-top: 15px;
}

textarea {
    resize: vertical;
}

.fakeInputToDisableCredentialsAutocomplete {
    position: absolute;
    visibility: hidden; 
}

/* ----- log in -----*/

.log-in-panel {
    box-shadow: #222 0 0 10px;
    left: 50%;
    margin-left: -150px;
    margin-top: -200px;
    position: fixed;
    top: 50%;
    width: 300px;
}

/* ----- navbar ----- */

.navbar {
    border-radius: 0;
    margin-bottom: 0;
}

#logoutForm .navbar-text a {
    color: #9D9D9D;
    text-decoration: none;
}

#logoutForm .navbar-text a:hover {
    color: white;
}

#logoutForm .glyphicon-refresh {
    cursor: pointer;
}

#logoutForm .glyphicon-refresh:hover {
    color: white;
}

/* ----- header ----- */

#viewContent header {
    background-color: #f36f21;
    color: white;
    margin-bottom: 25px;
    padding: 30px 0;
}

#viewContent header > h1 {
    text-align: center; 
}

#viewContent header > div > hr {
    border-color: #fff; 
    margin:30px 0; 
    border-top-left-radius: 200px 1px; 
    border-top-right-radius: 200px 1px;
}

/* ----- footer ----- */

body {
    min-height: 100%;
    position: relative;
    padding-bottom: 85px;
}

footer {
    background-color: #222;
    bottom: 0;
    color: #EEE;
    font-weight: bold;
    left: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    width: 100%;
}

footer > .footer-content {
    display: inline-block;
    
}

footer > .footer-content > .footer-element {
    display: inline-block;
    font-size: 1.1em;
    margin: 10px;
    text-align: left;
}

@media (max-width: 767px) {    
    body {
        padding-bottom: 175px;
    }
    footer > .footer-content > .footer-element {
        display: block;
    }
}

footer > .footer-content > .footer-element > div.glyphicon {
    background-color: #555;
    border-radius: 24px;
    display: inline-block;
    margin-right: 5px;
    padding: 10px;
}

footer .copyright {
    bottom: 10px;
    color: #999;
    font-size: 12px;
    font-weight: normal;
    right: 10px;
    text-align: right;
    position: absolute;
}

/* ----- success and fail messages ----- */

#messages {
    left: 0;
    opacity: 0.9;
    position: absolute; 
    right: 0;
    top: 52px;  
    z-index: 1049;
}

#messages .alert {
    border-radius: 0;
    display: none;
    margin: 0;
}

/* ----- bootstrap modal ----- */

body {
    padding-right: 0 !important;
}

/* ----- progress indicator ----- */

#progressIndicator {
    background-color: black;
    border-radius: 10px;
    display: none;
    left: calc(50% - 70px);
    opacity: 0.85;
    padding: 20px;
    position: fixed;
    top: calc(50% - 70px);
    z-index: 1051;
}

/* ----- validation errors ----- */

.validation-summary-errors > ul > li {
    margin: 5px 0;
}

.input-validation-error {
    border-color: #A94442;
}

.input-validation-error:focus {
    border-color: #A94442;
    box-shadow: 0 0 8px rgba(251, 68, 66, 0.6);
}

/* ----- input with search button ----- */

.input-group ~ .radio-inline, .input-group ~ .checkbox {
    margin-bottom: 0;
    margin-top: 5px;
}

/* ----- highlight searched text ----- */

mark {
    background-color: yellow;
    color: inherit;
    padding: 0.2em 0;
}

/* ----- status ----- */

.color-status-new {
    color: orangered;
}

.color-status-in-progress {
    color: dodgerblue;
}

.color-status-solved {
    color: forestgreen;
}

.color-status-closed {
    color: #555;
}

/* ----- sorting  ----- */

.sort-by {    
    margin-bottom: 15px;
}
/*@media (max-width: 767px) {
    .sort-by .input-group {
        display: inline-block;
        width: auto;
    }
}*/

/* ----- users list ----- */

.users-list {
    clear: both;
    margin-bottom: 15px;
}

.users-list > .well {
    margin-bottom: 10px;
}

.users-list > .well:hover {
    background-color: #F5EECD !important;
    cursor: pointer;
}

.users-list > .well > p {
    font-size: 20px;
    margin-bottom: 5px;
}

.users-list > .well > .row > div:nth-child(4) > p:nth-child(2) {
    font-size: 34px;
}

@media (min-width: 768px) {
    .users-list > .well > .row > div:not(:first-child) {
        border-left: 1px solid lightgray;
    }
}

/* ----- tickets list ----- */

.tickets-list {
    clear: both;
    margin-bottom: 15px;
}

.tickets-list > .well {
    margin-bottom: 10px;
}

.tickets-list > .well {
    display: table;
    padding: 0;
    width: 100%;
}

    .tickets-list > .well:hover {
        background-color: #ededed !important;
        cursor: pointer;
    }

.tickets-list > .well > div {
    display: table-cell;
}

.tickets-list > .well > div:first-child {
    border-right: 1px dashed gray;
    text-align: center;
    vertical-align: middle;   
    width: 150px; 
}

.tickets-list > .well > div:nth-child(2) {
    padding: 10px;    
}

.tickets-list > .well > div:nth-child(3) {
    vertical-align: bottom;
    width: 180px; 
}

.tickets-list > .well > div:nth-child(3) > button {
    width: 50px;
}

.tickets-list > .well > div:nth-child(3) > button:nth-child(1) {
    margin: 10px 10px 10px 0;
}

.tickets-list > .well > div:nth-child(3) > button:nth-child(2) {
    margin: 10px 3px 10px 0;
}

.tickets-list > .well > div:nth-child(3) > button:nth-child(3) {
    margin: 10px 3px 10px 0;
}

.tickets-list > .well > div:first-child > p:nth-child(2) {
    font-size: 20px;
    font-weight: bold;
}

.tickets-list > .well > div:nth-child(2) > p:first-child {
    font-size: 22px; 
    margin-bottom: 10px;
}

/* ----- pagination ----- */

.pagination {
    margin: 0 0 15px 0;
}

/* ----- paging and items search info ----- */

.result-info {
    line-height: 34px;
    margin-bottom: 15px;
    vertical-align: middle;
}

/* ----- inverse button  ----- */

.btn-inverse {
    color: #fff;
    background-color: #555;
    border-color: #444;
}

.btn-inverse:focus, .btn-inverse.focus {
    color: #fff;
    background-color: #444;
    border-color: #333;
}

.btn-inverse:hover {
    color: #fff;
    background-color: #444;
    border-color: #333;
}

.btn-inverse:active, .btn-inverse.active, .open > .dropdown-toggle.btn-inverse {
    color: #fff;
    background-color: #444;
    border-color: #333;
}
.btn-inverse:active:hover, .btn-inverse.active:hover, .open > .dropdown-toggle.btn-inverse:hover, .btn-inverse:active:focus, .btn-inverse.active:focus, .open > .dropdown-toggle.btn-inverse:focus, .btn-inverse:active.focus, .btn-inverse.active.focus, .open > .dropdown-toggle.btn-inverse.focus {
    color: #fff;
    background-color: #444;
    border-color: #333;
}
.btn-inverse:active, .btn-inverse.active, .open > .dropdown-toggle.btn-inverse {
    background-image: none;
}
.btn-inverse.disabled:hover, .btn-inverse[disabled]:hover, fieldset[disabled] .btn-inverse:hover, .btn-inverse.disabled:focus, .btn-inverse[disabled]:focus, fieldset[disabled] .btn-inverse:focus, .btn-inverse.disabled.focus, .btn-inverse[disabled].focus, fieldset[disabled] .btn-inverse.focus { 
    background-color: #555;
    border-color: #444;
}
.btn-inverse .badge {
    color: #555;
    background-color: #fff;
}

/* ----- horizontal menu  ----- */

nav.horizontal-menu {
    margin-bottom: 15px;
    text-align: center;
}

nav.horizontal-menu > a {
    display: inline-block;
    font-weight: bold;
    margin: 0px 0;
    padding: 10px 15px;
    text-decoration: none;
}  
  
nav.horizontal-menu > a.selected, nav.horizontal-menu > a:hover {
    border-bottom: 2px solid #428bca;
}

/* ----- mobile horizontal menu  ----- */

nav.horizontal-menu-xs {    
    margin-bottom: 15px;
    text-align: center;
}

nav.horizontal-menu-xs > a {
    display: inline-block;
    width: 25%;
}

nav.tickets-menu > a {
    display: inline-block;
    width: 50%;
}

/* ----- categories ----- */

ul#sortable-categories > li, #new-category {
    background-color: #ddd;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 3px;
    margin: 5px 0;
    overflow: auto;
}

ul#sortable-categories > li > div:nth-child(1), ul#sortable-categories > li > div:nth-child(3) {
    line-height: 34px; 
    text-align: center;
    vertical-align: middle;     
    width: 24px;
} 

ul#sortable-categories > li > div:nth-child(2) {
    width: calc(100% - 48px);
}

#new-category {
    margin-top: 10px;
}

#new-category > div:nth-child(1) {
    width: calc(100% - 24px);
}

#new-category > div:nth-child(2) {
    line-height: 34px; 
    text-align: center;
    vertical-align: middle;     
    width: 24px;
}

#sortable-categories > li {
    cursor: move;
}

#sortable-categories span.glyphicon-remove, #new-category span.glyphicon-plus {
    cursor: pointer;
}

#sortable-categories span.glyphicon-remove:hover, #new-category span.glyphicon-plus:hover {
    text-shadow: 0 0 2px blue;
}

#sortable-categories span.glyphicon-remove {
    color: red;
}

#new-category span.glyphicon-plus {
    color: green;
}

/* ----- numeric input ----- */

.numeric-input input {
    width: 70px;
    text-align: center;
}

.numeric-input .glyphicon {
    padding: 0 5px;
    cursor: pointer;
    line-height: 34px;
    vertical-align: middle;
}

.numeric-input .glyphicon:hover {
    text-shadow: 0 0 2px blue;
}

/* ----- charts ----- */

#pieChart1, #pieChart2, #pieChart3  {
    width: 100%;
    height: 300px;
}

.no-chart-message {
    line-height: 300px;
    margin: 0;   
    text-align: center;
    vertical-align: middle;
}

.amcharts-main-div a {
    visibility: hidden;
}