/* 
    Created on : Apr 13, 2014, 5:45:45 PM
    Author     : Tiago Lourenc0
*/

body {
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    font-weight:normal;
    font-size:12px;
    background-size: cover;
    border: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

img {
    border: 0;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    color: red;
}

table, tr {
}

td, th {
}

ul, li {
    margin: 0;
    padding: 0;
}

#wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.splitter-horizontal {
    width: 100%;
    height: 1px;
    border-collapse: collapse;
    border: none;
    background-color: #bbb;
}

.hidden {
    display: none !important;
}

.dbmarginauto {
    display: block !important;
    margin: 0 auto !important;
}

.rotate180 {
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}

/* Input */
input[type=text], input[type=password] {
    padding: 0 10px;
    width: 300px;
    height: 40px;
    color: #bbb;
    text-shadow: 1px 1px 1px black;
    background: rgba(0, 0, 0, 0.26);
    border: 0;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
}

/* Top Menu */

#table-content {
    display: table;
    width: 100%;
    height: 100%;
}

#top-menu {
    width: 100%;
    height: 48px;
    background: #232B2B;
    color: whitesmoke;
    z-index: 99999999;
    margin: 0;
    padding: 0;
}

#top-menu-userinfo {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #333;
    height: 48px;
    line-height: 48px;
    float: right;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#top-menu-userinfo img {
    vertical-align: middle;
    max-height: 24px;
}

#middle-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    box-sizing: border-box;
    padding-left: 49px;
    z-index: 10;
}

#left-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 49px;
    height: 100%;
    z-index: 20;
}

#left-content-menu {
    float: left;
    width: 100%;
    height: 100%;
    background: black; /* #232B2B */ 
    border-bottom: solid 2px #bbb;
    cursor: pointer;
    -webkit-box-shadow: 10px 0px 18px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 0px 18px -8px rgba(0,0,0,0.75);
    box-shadow: 10px 0px 18px -8px rgba(0,0,0,0.75);
}

.left-content-menu-item {
    display: table;
    width: 100%;
    height: 48px;
    color: #bbb;
    font-weight: 300;
}

#left-content-menu-item-name {
    position: absolute;
    display: table;
    background: #ea4848; 
    z-index: 99;
}

#left-content-menu-item-name span{
    display: table-cell;
    vertical-align: middle;
    color: white;
    font-size: 15px;
    padding-left: 10px;
}

.left-content-menu-item-hover:hover {
    background: #ea4848;
}

.left-content-menu-item-hover:hover img {
    -webkit-animation: spin 0.5s linear ;
    -moz-animation: spin 0.5s linear ;
    animation: spin 0.5s linear ;
}

.left-content-menu-item-active {
    background: #ea4848;
}

#left-content-logo {
    display: table;
    width: 100%;
    height: 48px;
    background: #FF0000;
    border: none;
    color: #333;
    text-transform: uppercase;
    font-weight: bold;
}

#left-content-logo img {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    padding: 8px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    max-width: 48px;
    max-height: 48px;
}

#left-content-minimize {
    display: table;
    float: right;
    cursor: pointer;
}

#left-content-minimize:hover {
    background: #fff;
}

#left-content-minimize img {
    display: block;
    vertical-align: middle;
    height: 8px;
    margin: 4px;
    padding: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.left-content-menu-item-icon {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    padding: 8px;
    margin: 0 auto;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    max-width: 48px;
    max-height: 48px;
}

.left-content-menu-item-icon:hover {
}

.left-content-menu-item span {
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: bold;
}

#tasks-admin-top-menu {
    display: table-cell;
    width: 100%;
    margin: 0;
    padding: 0;
}

#tasks-admin-top-menu ul {
    display: table-cell;
    width: 100%;
}

#tasks-admin-top-menu ul li{
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 4px;
    background: #0099CC
}

.templates[subaction="advanced"] {
    /*width: auto;
    height: auto;
    margin: 0;
    padding: 10px;
    color: #383736;
    border: none;
    cursor: pointer;*/
}

#templates-list tbody {
    /*position: absolute;
    top: 48px;
    left: 0px;
    width: 100%;
    height: calc(100% - 98px);
    overflow-y: scroll;
    overflow-x: hidden;*/
}

#templates-list-container, #templates-advanced-container{
    /*overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 950px;
    max-height: 750px;*/
    width: 920px;
    margin: 40px auto;
}

#technicians-list-container, #technicians-advanced-container,
#groups-list-container, #groups-advanced-container {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 950px;
    max-height: 750px;
    margin: 40px auto;
}

#technicians-list, #technicians-list tbody tr , #technicians-list thead tr {
    width: 100%;
    height: 32px;
    border-collapse: collapse;
    font-weight: normal;
    font-size: 13px;
    color: black;
    text-align: left;
}

#technicians-list thead tr th {
    padding: 10px;
    color: black;
    font-weight: bold;
}

#groups-list tbody {
    position: absolute;
    top: 48px;
    left: 0px;
    width: 100%;
    height: calc(100% - 98px);
    overflow-y: scroll;
    overflow-x: hidden;
}
/* First TR in THEAD for TITLES */
#technicians-list thead > tr:first-child th:first-child {
    -webkit-border-radius: 7px 0 0 0;
    -moz-border-radius: 7px 0 0 0;
    border-radius: 7px 0 0 0;
    text-align: center;
    font-size: 13px; 
}

#technicians-list thead tr:first-child th:last-child {
    -webkit-border-radius: 0 7px 0 0;
    -moz-border-radius: 0 7px 0 0;
    border-radius: 0 7px 0 0;
}

#technicians-list tbody tr td:last-child {
    position: relative;
}

#technicians-list tbody tr td {
    border-bottom: 1px solid #eee;
    padding: 5px;
    font-weight: normal;    
}

#technicians-list tfoot tr td {
    padding: 10px;
    font-size: 10px;
    color: #999;
}

#technicians-list thead th[header="id"],
#technicians-list tbody tr td[header="id"],
#technicians-list tbody tr td[header="id"] div {
    text-align: center;
}

#technicians-list thead th[header="check"],
#technicians-list tbody tr td[header="check"],
#technicians-list tbody tr td[header="check"] div {
    text-align: center;
}

#technicians-list thead th[header="firstname"],
#technicians-list tbody tr td[header="firstname"],
#technicians-list tbody tr td[header="firstname"] div {
    text-align: left;
}

#technicians-list thead th[header="lastname"],
#technicians-list tbody tr td[header="lastname"],
#technicians-list tbody tr td[header="lastname"] div {
    text-align: left;
}

#technicians-list thead th[header="email"],
#technicians-list tbody tr td[header="email"],
#technicians-list tbody tr td[header="email"] div {
    text-align: left;
}

#technicians-list thead th[header="mobilenumber"],
#technicians-list tbody tr td[header="mobilenumber"],
#technicians-list tbody tr td[header="mobilenumber"] div {
    text-align: left;
}

#technicians-list thead th[header="datejobstart"],
#technicians-list tbody tr td[header="datejobstart"],
#technicians-list tbody tr td[header="datejobstart"] div {
    text-align: center;
}

#technicians-list thead th[header="datejobend"],
#technicians-list tbody tr td[header="datejobend"],
#technicians-list tbody tr td[header="datejobend"] div {
    text-align: center;
}

.technicians[data-name="dateJobStart"],
.technicians[data-name="dateJobEnd"] {
    width: auto;
    padding: 10px;
    margin: 3px auto 0 auto;
    background: white;
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
}

.technicians[data-name="dateJobStart"]:focus,
.technicians[data-name="dateJobEnd"]:focus {
    outline: none;
    border: 1px solid #ea4848;
}

.technicians[data-name="dateJobStart"]:hover,
.technicians[data-name="dateJobEnd"]:hover {
    border: 1px solid #ea4848 !important;
}

#templates-items-box {
    margin-top: 20px;
}

#templatesitems-list {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

#templatesitems-list tbody tr { 
    height: 30px;
}

#templates-menu-right-container,
#groups-menu-right-container  {
    position: fixed;
    right: 20px;
    bottom: 5px;
    z-index: 99;
}

#templates-menu-container ul li,
#templates-menu-right-container ul li,
#groups-menu-container ul li,
#groups-menu-right-container ul li{
    display: inline;
    text-align: center;
}

#groups-advanced-permissions {
    display: block;
    width: 350px;
}

#groups-advanced-permissions tbody tr td{
    height: 31px;
}

.templates[idtemplate="0"] {
    cursor: pointer;
}

.templatestatic {
    background: #7BB9FF;
    color: white;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
}