* {
    margin: 0 auto;
    padding: 0;
    font-family: Calibri, 'Open Sans', Arial;
    font-size: 13px;
}

*[contenteditable] {
    -webkit-user-select: auto !important;
}
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; 
}

html, body {
    position: absolute;
    width: 100%;
    height: 100%;
}

body {
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    font-family: Calibri, 'Open Sans', Arial;
    -webkit-font-smoothing: antialiased;
    font-size:12px;
    font-weight: 400;
    color: #555;
    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, a:hover, a:visited {
    color: #427fed;
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

table, tr {
}

td, th {
}

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

#wrapper {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

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

.hidden {
    display: none !important;
}

.text-center { 
    text-align: center;
}

/* Input */
input, input[type=text], input[type=password], textarea, select {
    width: 100%;
    height: 35px;
    padding: 0 10px;
    margin: 0;
    border: 1px solid #CBCBCB;
    color: black;
    text-shadow: none;
    background: white;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-family: Calibri, 'Open Sans', Arial;
}

input[type=checkbox] {
    width: 13px;
    height: 13px;
}

input[type=text]:hover, input[type=password]:hover, textarea:hover, select:hover {
    border: 1px solid #94C774;
}

input:disabled {
    background: none;
    border: none;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: none;
    border-radius: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0;
    margin: 0;
    width: auto;
}


.button {
    display: inherit;
    width: auto;
    height: auto;
    margin: 2px;
    padding: 10px;
    background: white;
    color: black; /* #383736 - #ccc*/
    /*border-radius: 7px;*/
    border: 1px solid #CBCBCB; /* #eee */
    cursor: pointer;
    /*-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);*/
}

.button:hover {
    /*background: #eee; /* #eee */
    color: #656565; /*#656565*/
    border: 1px solid #94C774; /* #eee */
    /*-webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.45);*/
}

.button-rounded[subaction="sendNotification"] {
    height: 75px;
    border: 1px solid #94C774;
    color: #94C774;
    padding: 5px;
    text-decoration: none;
}

.button-rounded[subaction="sendNotification"]:hover {
    color: white;
    background: #94C774;
}

.button-rounded[subaction="addsubtasksrow"],
.button-rounded[subaction="addnotesrow"],
.button-rounded[id="tasks-add-f-add-btn"]{
    min-width: 10px;
    height: 10px;
    background: #94C774;
    color: white;
    padding: 3px;
}

.button-rounded[subaction="delsubtasksrow"],
.button-rounded[subaction="delnotesrow"],
.templates.button-rounded[subaction="delete"],
.equipments.button-rounded[subaction="delete"],
.requisitions.button-rounded[subaction="archive"]{
    width: 10px;
    height: 10px;
    background: #ea4848;
    color: white;
    padding: 3px;
    text-align: center;
    margin: 0;
}

.button-rounded a {
    display: table-cell;
    vertical-align: middle;
}

.button-rounded {
    display: table;
    margin: 5px;
}

.active {
    background: #eee !important;
    text-decoration: underline;
}

.isclickable {
    cursor: pointer;
}
.isclickable:hover {
    background: #E9E9E9;
}
/* Input - Login */
#login-error {
    padding: 20px;
    margin-top: -10px;
    margin-bottom: 15px;
}
#login-container {
    overflow: hidden;
    padding: 0;
    width: 300px;
    height: 100%;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    box-sizing: border-box;
}

#login-container [type=text], 
#login-container [type=password] { 
    margin: 0 0 10px 0;
    color: black;
    border: 1px solid #CFCFCF;
}

#login-container [type=text]:hover,
#login-container [type=password]:hover { 
    border: 1px solid #AAE081;
}

#login-container [type=submit] { 
    font-family: Calibri, 'Open Sans', Arial;
    display: block;
    z-index: 2;
    width: 100%;
    height: 35px;
    overflow: hidden;
    /*background: #AAE081; /* #93c572 */
    border: 1px solid #AAE081;
    color: #AAE081;
    cursor: pointer;
    font-size: 15px;
    background: white url("../images/right-arrow.png")  center right no-repeat;
    background-size: 10px 15px;
    background-position: 95% 50%;
}

#login-container [type=submit]:hover { 
    background: #a9d980 url("../images/right-arrow.png")  center right no-repeat;
    background-size: 10px 15px;
    background-position: 95% 50%;
    /*background: -moz-linear-gradient(45deg, rgba(170,224,128,1) 0%, rgba(170,224,128,1) 38%, rgba(154,199,117,1) 73%, rgba(154,199,117,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(170,224,128,1)), color-stop(38%, rgba(170,224,128,1)), color-stop(73%, rgba(154,199,117,1)), color-stop(100%, rgba(154,199,117,1)));
    background: -webkit-linear-gradient(45deg, rgba(170,224,128,1) 0%, rgba(170,224,128,1) 38%, rgba(154,199,117,1) 73%, rgba(154,199,117,1) 100%);
    background: -o-linear-gradient(45deg, rgba(170,224,128,1) 0%, rgba(170,224,128,1) 38%, rgba(154,199,117,1) 73%, rgba(154,199,117,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(170,224,128,1) 0%, rgba(170,224,128,1) 38%, rgba(154,199,117,1) 73%, rgba(154,199,117,1) 100%);
    background: linear-gradient(45deg, rgba(170,224,128,1) 0%, rgba(170,224,128,1) 38%, rgba(154,199,117,1) 73%, rgba(154,199,117,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aae080', endColorstr='#9ac775', GradientType=1 );*/
    border: 1px solid #a9d980;
    color: white;
    -webkit-transition: color 3.8s ease-in-out;
    transition: color 3.8s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

#login-logo-container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

#login-logo {
    display: table-cell;
    padding: 20px 0 20px 0;
    max-width: 180px;
}

#login-form-container {
    width: 94%;
    margin: 0 auto;
    padding: 8px 0 8px 0;
    overflow: hidden;
    box-sizing: border-box;
}

#login-footer-container {
    width: 94%;
    margin: 0 auto;
    padding: 5px 0 0 0;
    overflow: hidden;
    box-sizing: border-box;
}

#login-footer-container a {
    color: #ccc;
    float: right;
    padding-left: 0;
}

.login-information { 
    display: block;
    font-family: Calibri, 'Open Sans', arial;
    -webkit-font-smoothing: antialiased;
    color: #555;
    font-size: 11.5px;
    margin-bottom: 20px;
    text-align: justify;
    line-height: 25px; 
}

.login-title {
    display: block;
    font-family: Calibri, 'Open Sans', arial;
    -webkit-font-smoothing: antialiased;
    color: #555;
    font-size: 22px;
    font-weight: lighter;
    margin-bottom: 20px;
    padding: 5px;
    text-align: center;
}

/* Top Menu */
#top-menu {
    position: relative;
    display: table; 
    width: 100%;
    height: 35px;
    background: #232B2B;
    color: whitesmoke;
    z-index: 99999999;
    margin: 0;
    padding: 0;
}

#top-menu-tree {
    display: table-cell;
    vertical-align: middle;
}

#top-menu-tree li {
    display: inline-table;
    margin: 0 40px 0 0;
    padding: 10px;
    color: #eee;
    list-style-type: none;
    background: #E62020;
    font-family: Arial;
    font-weight: 600;
    height: 100%;
}
#top-menu-tree li:hover {
    cursor: pointer;
    -webkit-box-shadow: inset -35px -36px 103px -72px rgba(0,0,0,0.75);
    -moz-box-shadow: inset -35px -36px 103px -72px rgba(0,0,0,0.75);
    box-shadow: inset -35px -36px 103px -72px rgba(0,0,0,0.75);
}

#top-menu-tree li span {
    display: table-cell;
    vertical-align: middle;
}

#top-menu-userinfo {
    display: table-cell;
    vertical-align: middle;
    float: right;
    list-style-type: none;
}

/* Settings Floating Menu */

.top-menu-settings-icon {
    background-position: left;
    background-image: url(../images/settings-icon-32.png);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    cursor: pointer;
    height: 26px;
    line-height: 24px;
    font-size: 13px;
    padding: 3px 10px 0 20px;
    background-color: #383736;
    color: #c4c3c3;
    float: right;
    margin: 0 10px 0 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.top-menu-settings-icon:hover {
    background-color: #606060;
    color: white;
}

#settings-menu {
    display: table;
    position: absolute;
    top: 60px;
    right: 10px;
    background: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.75);
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 999999;
    width: 150px;
}

#settings-menu a {
    color: black;
}

#settings-menu ul {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}

#settings-menu ul li {
    list-style-type: none;
    text-align: left;
    padding: 10px 10px 5px 10px;
}

#settings-menu ul li:hover {
    background: #bbb;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    color: whitesmoke;
}

/* Content */
#content {
    position: relative;
    box-sizing: border-box;
}

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

#content-left-pane {
    /*display: table;*/
    overflow-y: auto;
    /*background: white;*/
}

#content-right-pane {
    overflow: hidden;
    background-color: #fff; /* #fafafa */
}

.priority {
    width: 10px;
    margin: 20px;
}

#tasks-list-container {
    position: relative;
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 8px;
    box-sizing: border-box;
    //padding-bottom: 50px;
}

#tasks-menu-container {
    position: fixed;
    left: 53px;
    bottom: 5px;
}

#tasks-subtasks-container {
    position: relative;
    width: 100%;
    display: block;
    max-height: 180px;
    min-height: 180px;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
}

#tasks-menu-right-container, .buttons-right-container {
    position: fixed;
    right: 20px;
    bottom: 5px;
}

#tasks-menu-container ul li,
#tasks-menu-right-container ul li, .buttons-right-container ul li{
    display: inline;
}

#tasks-list tr:hover {
}

#tasks-list thead {
    display: table;
    width: 95%;
    position: absolute;
    top: 0;
    z-index: 9999;
}

.taskselected {
    background: #E9E9E9;
}

.tasks-top-bar {
    height: 48px;
    padding: 0;
    background: transparent !important; /* #232B2B */
    color: black !important;
    border: none;
    border-radius: 0 !important;
}

#tasks-list tbody {
    width: 95%;
    height: calc(100% - 79px);
    position: absolute;
    top: 85px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.selected {
    background: #E9E9E9;
}

/* Content - Add Task */
#tasks-add-f {
    height: 100%;
    padding: 20px;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
    white-space: nowrap;
    box-sizing: border-box;
}

#tasks-add-f-top-section {
    display: table;
}   

#tasks-add-f-id, #tasks-add-f-creator,
#tasks-add-f-priority{
    display: table-cell;
    vertical-align: middle;
}

#tasks-add-f-creator {
}

#tasks-add-f-priority {
}

#tasks-add-f-technicians {
    padding: 20px;
}

.tasks-add-f-add-btn {
    background: url(../images/main-sprite.png) no-repeat 0 0;
    width: 32px;
    cursor: pointer;
}

.tasks-add-f-add-btn:hover {
}

#tasks-add-f-top-info-left-block {
    width: 100%;
}

#tasks-empty-add {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
    cursor: pointer;
}

#tasks-empty-add img {
    display: block;
    height: 160px;
    cursor: pointer;
    background: url(../images/main-sprite.png) no-repeat 0 -32px;
    margin: 0 auto;
}

#tasks-empty-add span {
    display: block;
    text-align: center;
    margin: 0 auto;
    color: #6E6A6A;
}

#tasks-template-wrapper {
    /*display: table;
    margin: 0 auto;
    height: 100%;*/
}

#tasks-template-wrapper ul {
    /*display: table-cell;
    vertical-align: middle;
    list-style-type: none;*/
}

#tasks-template-image {
    clear: both;
}

#tasks-template-content {
    display: table-cell;
    vertical-align: middle;
}

#tasks-delete {
    background: rgba(255, 45, 45, 0.5);
}

#tasks-add {
    background: #93C572;
}

#tasks-left-info-box {
    display: block;
    float: left;
    width: calc(50% - 10px);         /* standards-based answer for IE9+, FF16+ */
    width: -moz-calc(50% - 10px);    /* support for FF4 - FF15                 */
    width: -webkit-calc(50% - 10px); /* support for Chrome19+ and Safari6+     */
    margin: 0 20px 20px 0;
}

#tasks-right-info-box {
    display: block;
    float: left;
    width: calc(50% - 10px);         /* standards-based answer for IE9+, FF16+ */
    width: -moz-calc(50% - 10px);    /* support for FF4 - FF15                 */
    width: -webkit-calc(50% - 10px); /* support for Chrome19+ and Safari6+     */
    margin: 0 0 20px 0;
}

#tasks-technicians-box {
    display: block;
    width: 100%;
    margin: 0 0 0 0;
}

#tasks-foot-box {
    display: block;
    margin: 20px 0 0 0;
}

#tasks-notes-box {
    position: relative;
    width: 100%;
    display: block;
    max-height: 180px;
    min-height: 180px;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 0 0 0;
}

.tasks-section-title {
    width: 100%;
    display: block;
    border-bottom: 1px solid #eee;
    padding: 5px 5px 5px 3px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    float: left
}

.task-invalid {
    border: 1px solid #ea4848 !important;
}

/* Tasks List */
#technicians {
    display: inline-table;
}

#technicians img {
    position: relative;
}

#technicians img {
    position: relative;
    max-width: 20px;
    min-width: 20px;
    max-height: 20px;
    min-height: 20px;
    padding: 1px;
}

.technician {
    position: relative;
    display: table-cell;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    text-align: center;
    background: #eee;
    border-right: 2px solid white;
}

.technician a {
    color: #656565;
    text-decoration: none;
}

.technician a:hover {
    color: white;   
}

.technician:hover, .technician:hover > a{
    background: #ea4848;
    color: white;  
}

/* Selected technician */
.associated {
    width: 20px;
    height: 20px;
    background: #93C572;
    color: white;
    //background: url("../images/checked.png") top right no-repeat;
    //background-size: 10px 10px;
}

/*********************** Tasks Table ***********************/
.tasks th[header="check"], .tasks th[header="check"] div {
    padding: 0;
    text-align: center;
    width: 40px;
}

.tasks[subaction="advanced"] td[header="check"], .tasks[subaction="advanced"] td[header="check"] div { 
    display: inherit;
    padding: 0;
    text-align: center;
    width: 40px;
}

.tasks th[header="idTask"],
.tasks[subaction="advanced"] td[header="idTask"] { 
    width: 50px; 
}

.tasks th[header="title"],
.tasks[subaction="advanced"] td[header="title"] { 
    width: 35%; 
}

.tasks th[header="status"],
.tasks[subaction="advanced"] td[header="status"] { 
    width: 25%; 
}

.tasks th[header="technicians"],
.tasks[subaction="advanced"] td[header="technicians"] { 
    width: 0; 
}

.tasks[subaction="advanced"] { 
    display: table;
    width: 100%;
}

/*********************** Subtasks Table ***********************/
.tasks[subaction="subtasks"] thead, 
.tasks[subaction="notes"] thead {
}

.tasks[subaction="subtasks"] tbody, 
.tasks[subaction="notes"] tbody {
}

.tasks[subaction="subtasks"] tr, 
.tasks[subaction="notes"] tr {
    padding: 10px;
}

.tasks[subaction="subtasks"] tr td {
    text-align: center;
    padding: 0;
}

.tasks[subaction="subtasks"] tr th {
    padding: 10px;
}

.tasks[subaction="subtasks"] th[header="check"] div, 
.tasks[subaction="subtasks"] td[header="check"] div { 
    text-align: center;
    width: 40px;
}

.tasks[subaction="subtasks"] th[header="name"], 
.tasks[subaction="subtasks"] td[header="name"] { 
    width: 25%; 
}

.tasks[subaction="subtasks"] th[header="description"], 
.tasks[subaction="subtasks"] td[header="description"] { 
    width: 65%; 
}

.tasks[subaction="subtasks"] th[header="birthline"], 
.tasks[subaction="subtasks"] td[header="birthline"] { 
    width: 10%; 
    min-width: 90px;
}

.tasks[subaction="subtasks"] th[header="deadline"], 
.tasks[subaction="subtasks"] td[header="deadline"] { 
    width: 10%; 
    min-width: 90px;
}

.tasks[subaction="subtasks"] th[header="executed"] div , 
.tasks[subaction="subtasks"] td[header="executed"] div  { 
    text-align: center;
    width: 40px;
}

.tasks[subaction="subtasks"] th[header="executed"]{ 
    padding-right: 27px;
}

.tasks[subaction="subtasks"] th[header="executed"] img { 
    width: 12px;
}

.subtask-completed {
    background: #d9ffdd; /*#99cc99; /*#94C774 */
}

.subtask-not-completed {
    background: #ffdbd9; /* #ff9999; */ /*#ea4848*/
}

input.tasks.subtasks, input.tasks.notes {
    color: black;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
}

input.tasks.subtasks.subtask-completed::-webkit-input-placeholder,
input.tasks.subtasks.subtask-not-completed::-webkit-input-placeholder {
    color: white;
}
input.tasks.subtasks.subtask-completed:-moz-placeholder,
input.tasks.subtasks.subtask-not-completed:-moz-placeholder {
    /* FF 4-18 */
    color: white;
}
input.tasks.subtasks.subtask-completed::-moz-placeholder,
input.tasks.subtasks.subtask-not-completed::-moz-placeholder {
    /* FF 19+ */
    color: white;
}
input.tasks.subtasks.subtask-completed:-ms-input-placeholder,
input.tasks.subtasks.subtask-not-completed:-ms-input-placeholder {
    /* IE 10+ */
    color: white;
}

.tasks[data-name="notificationName"] {
    margin-bottom: 5px;
}

/*********************** Notes Table ***********************/
.tasks[subaction="notes"] tr td {
    text-align: center;
    padding: 0;
}

.tasks[subaction="notes"] tr th {
    padding: 10px;
}

.tasks[subaction="notes"] th[header="check"] div, 
.tasks[subaction="notes"] td[header="check"] div { 
    text-align: center;
    width: 40px;
}

.tasks[subaction="notes"] th[header="description"], 
.tasks[subaction="notes"] td[header="description"] { 
    width: 85%; 
}

.tasks[subaction="notes"] th[header="dateInsert"], 
.tasks[subaction="notes"] td[header="dateInsert"] { 
    width: 13%;
}

.tasks[subaction="notes"] td[header="dateInsert"] input {    
    text-align: center;
    width: 100%;   
}

.checkalltechnicians {
    margin-top: 10px;
}

/* Floating Bottom Menu */
#floating-menu-bottom {
    display: table;
    position: fixed;
    left: 10px;
    bottom: 10px;
    cursor: pointer;
}

#floating-menu-bottom ul {
    vertical-align:middle;
    display:table-cell;
    height: 30px;
}

/* CLASSES */

.background-white-shadow-radius {
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.75);
    list-style-type: none;
    margin: 0;
    padding: 5px;
}

.background-white-shadow-radius:hover {
    background-color: #DDD;
}

.unselectable {
    /* -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -user-select: none;*/
}

/* Loading */

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    /*background: rgba( 255, 255, 255, 1 );*/
}

.spinner-cube
{
    margin: 0 auto;
    width: 60px;
    height: 60px;
    position: absolute;top: 45%;left: 0;right: 0;
}

.spinner-cube > div
{
    background-color: #333;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: cuberotate 1.8s infinite ease-in-out;
    animation: cuberotate 1.8s infinite ease-in-out;
}

.spinner-cube div:nth-child(2)
{
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes cuberotate {
    25% { -webkit-transform: translateX(22px) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg) }
    75% { -webkit-transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5) }
    100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cuberotate {
    25% { transform: translateX(42px) rotate(-90deg) scale(0.5); } 
    50% { transform: translateX(42px) translateY(42px) rotate(-179deg); } 
    50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); } 
    75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 
    100% { transform: rotate(-360deg); }
}

#debug-container {
    background: black;
    color: white;
    font-family: cursive;
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
}

/* Table Styles */

/* TABLE STYLE 1 */

.tableStyle1 {
    width: 100%;
    color: black;
    border: none;
    border-collapse: collapse;
    font-weight: normal;
    font-size: 11px;
    margin: 0;
    padding: 0;
    text-align: justify;
}

.tableStyle1 tr {
    margin: 0;
    padding: 0;
}

.tableStyle1 td {
    border-collapse: collapse;
    padding: 5px;
}

.tableStyle1 tr th {
    color: black;
    padding: 12px;
    border-bottom: solid 1px #eee;
}

.tableStyle1 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;*/
}

.tableStyle1 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;*/
}

.tableStyle1 tr:last-child td:first-child {
    /*-webkit-border-radius: 0 0 0 7px;
    -moz-border-radius: 0 0 0 7px;
    border-radius: 0 0 0 7px;
    text-align: center;*/
}

.tableStyle1 tr:last-child td:last-child {
    /*-webkit-border-radius: 0 0 7px 0;
    -moz-border-radius: 7px 0 7px 0;
    border-radius: 7px 0 7px 0;*/
}

.tableStyle1 .check {
    width: 45px;
    box-sizing: border-box;
    text-align: center;
}

/* TABLE STYLE 2 */

.tableStyle2 {
    width: 100%;
    color: black;
    border: none;
    border-collapse: collapse;
    font-weight: normal;
    font-size: 11px;
    margin: 0;
    padding: 0;
    text-align: left;
}

.tableStyle2 tr {
    margin: 0;
    padding: 0;
}

.tableStyle2 tr td {
    padding-left: 10px;
}

.tableStyle2 tr td:first-child {
    /*background: #eee;*/
    border-right: 1px solid #eee;
    padding: 12px;
    color: #555;
}

.tableStyle2 tr:first-child td:first-child {
    -webkit-border-radius: 7px 0 0 0;
    -moz-border-radius: 7px 0 0 0;
    border-radius: 7px 0 0 0;
    border: none;
}

.tableStyle2 tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 7px;
    -moz-border-radius: 0 0 0 7px;
    border-radius: 0 0 0 7px;
    border-right: 1px solid #eee;
}

.tableStyle2 tr:not(:last-child) td:first-child {
    border-right: 1px solid #eee;
    border-collapse: collapse;
}

.tableStyle2 .check {
    width: 45px;
    box-sizing: border-box;
    text-align: center;
}

/* TABLE STYLE 3 */

.tableStyle3 {
    width: 100%;
    color: black;
    border: none;
    border-collapse: collapse;
    font-weight: normal;
    font-size: 11px;
    margin: 0;
    padding: 0;
    text-align: justify;
}

.tableStyle3 tr {
    margin: 0;
    padding: 0;
    min-height: 25px;
}

.tableStyle3 td {
    padding: 8px;
    height: 32px;
    box-sizing: border-box;
    border: solid 1px #FFF;
    border-collapse: collapse;
}

.tableStyle3 tr th {
    background: transparent;
    color: black;
    padding: 10px;
    cursor: pointer;
}

/* First TR in THEAD for TITLES */
.tableStyle3 thead > tr:first-child th:first-child {
    -webkit-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
    border-bottom: 1px solid #fafafa;
    text-align: center;
    font-size: 14px; 
}

.tableStyle3 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;
}

.tableStyle3 tr:last-child td:first-child {
    /*-webkit-border-radius: 0 0 0 7px;
    -moz-border-radius: 0 0 0 7px;
    border-radius: 0 0 0 7px;*/
}

.tableStyle3 tr:last-child td:last-child {
    -webkit-border-radius: 0 0 7px 0;
    -moz-border-radius: 7px 0 7px 0;
    border-radius: 7px 0 7px 0;
}

.tableStyle3 .check {
    width: 45px;
    box-sizing: border-box;
    text-align: center;
}

/* Table Style 4 */
.tableStyle4 {
    width: 100%;
    color: black;
    border: none;
    border-collapse: collapse;
    font-weight: normal;
    font-size: 11px;
    margin: 0;
    padding: 0;
    text-align: justify;
}

.tableStyle4 tr {
    margin: 0;
    padding: 0;
    min-height: 25px;
}

.tableStyle4 thead {
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    width: 100%;
}

.tableStyle4 thead tr th {
    height: 48px;
    padding: 0;
    background: #232B2B;
    color: white;
}

.tableStyle4 tbody tr {
    height: 30px;
    display: table;
    width: 100%;
    margin: 0;
}

.tableStyle4 tbody tr td {
    border-radius: 0;
    text-align: center;
    border-top: none;
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee;
    padding: 5px;
    box-sizing: border-box;
    border-collapse: collapse;
    height: 31px;
}

.tableStyle4 tbody tr td[header="check"] div,
.tableStyle4 tbody tr td[header="checkall"] div{
    width: 17px;
}

.tableStyle4 thead th[header="checkall"] {
    padding-left: 8px;
}

.tableStyle4 thead th[header="checkall"],
.tableStyle4 tbody tr td[header="check"] {
    width: 1%;
    text-align: center;
}

.tableStyle4 thead th[header="id"] {
    padding-left: 16px;
}

.tableStyle4 thead th[header="id"],
.tableStyle4 tbody tr td[header="id"]{
    width: 1%;
    text-align: center;
}

.tableStyle4 thead th[header="title"] {
    padding-left: 15px;
}

.tableStyle4 thead th[header="title"],
.tableStyle4 tbody tr td[header="title"]{
    width: 10%;
    text-align: left;
}

.tableStyle4 thead th[header="description"] {
    padding-left: 5px;
}

.tableStyle4 thead th[header="description"],
.tableStyle4 tbody tr td[header="description"]{
    width: 25%;
    text-align: left;
}

.tableStyle4 .check {
    width: 45px;
    box-sizing: border-box;
    text-align: center;
}

#content-splitter {
    border: none !important;
}

.ui-effects-transfer { border: 2px dotted gray; }

/* Profile Section */
/* Profile Left */
#profile-wrapper {
    display: table;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 100%;
    /*background-color: blue;*/
    cursor: pointer;
}
#profile-left-content {
    position: relative;
    float: left;
    box-sizing: border-box;
    background-color: whitesmoke;
    /*background-color: orange;*/
}
#profile-avatar-wrapper {
    margin: 0 auto;
}
#profile-avatar-img img {
    display: table-cell;
    margin: 0 auto;
    max-width: 120px;
    max-height: 120px;
}
#profile-avatar-options-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#profile-avatar-options-edit {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 26px 3px 26px;
    background: #232B2B;
    color: white;
    font-weight: bold;
}
#profile-avatar-options-edit:hover {
    background: #0099CC;
}
#profile-avatar-options-verify-account {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 3px 0 3px 0; 
    background: #232B2B;
    color: white;
    font-weight: bold;
}

#profile-avatar-options-verify-account:hover {
    background: #0099CC;
}

/* Profile - Right */
#profile-right-content {
    margin: 0 auto;
    overflow: hidden;
}
#profile-content-wrapper {
    margin: 0 10px 10px 10px;
    /*background-color: red;*/
}
#profile-content-menu {
    width: 100%;
    float: left;
    /*background-color: black;*/
}
#profile-content-menu ul {

}
#profile-content-menu ul li {
    display: inline-block;
    padding: 5px;
    /*background-color: red;*/
}
#profile-content-menu ul li:hover {
    color: #bbb;
    background: #0099CC;
}
#profile-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    /*background: pink;*/
}

/* Tool Description */
#tool-description {
    display: none;
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/* Messages */
.notification {
    position: relative;
    margin: 0 auto;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    border: none;
}

.notification[type="info"] {
    color: #00529B;
    background-color: #BDE5F8;
}

.notification[type="success"] {
    color: #4F8A10;
    background-color: #DFF2BF;
}

.notification[type="warning"] {
    color: #9F6000;
    background-color: #FEEFB3;
}

.notification[type="error"] {
    color: #D8000C;
    background-color: #FFBABA;
}

.notification[type="validation"] {
    color: #D63301;
    background-color: #FFCCBA;
}

.notification[type="description"] {
    color: #555;
    background-color: #eee;
}

#notification-type {
    display: inline-block;
    margin: 0 0 5px 0;
    padding: 2px 5px 2px 1px;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    box-sizing: border-box;
    border-bottom: 1px #888888 dashed;
}

#notification-content {
    padding: 5px;
    width: 100%;
    text-align: justify;
    word-wrap: break-word;
    box-sizing: border-box;
    color: #6E6A6A;
}

.left-content-menu-item[subaction="templates"]{
    position: absolute;
    bottom: 200px;
}

.left-content-menu-item[subaction="technicians"]{
    position: absolute;
    bottom: 150px;
}

.left-content-menu-item[subaction="equipments"]{
    position: absolute;
    bottom: 100px;
}

.left-content-menu-item[subaction="statistics"]{
    position: absolute;
    bottom: 50;
}

.left-content-menu-item[subaction="logout"]{
    position: absolute;
    bottom: 0;
}

.left-content-menu-item[subaction="logout"] a {
    display: block;
}

/* Errors */
#error-container {
    margin: 60px auto;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.error-image {
    display: block;
    max-width: 150px;
}

.error-description {
    width: 400px;
    text-align: center;
    margin: 20px auto;
    display: block;
    color: rgb(122, 122, 122);
}

/* Statistics */ 
#statistics-filter-container {
    width: 280px;
    text-align: center;
}

#statistics-filter-image-container {
    display: block;
    width: 100%;
}

#statistics-filter-title {
    display: block;
    text-align: center;
    width: 100%;
    text-transform: lowercase;
    font-size: 40px;
    font-weight: 100;
    color: #999999;
}

#statistics-filter-description {
    width: 100%;
    display: block;
    text-align: center;
}

#statistics-filter-image {
    display: block;
    margin: 0 auto;
    width: 150px;
}

#statistics-filter-submit {
    width: 191px;
    padding: 10px;
    margin: 3px auto;
    background: #ea4848;
    color: white;
    cursor: pointer;
    border: none;
}

#statistics-filter-submit:hover {
    background: #CB2F3B;
    border: none;
    color: white;
}

.statistics-filtereddata-input-block {
    float: left;
    margin-right: 10px;
    font-weight: 400;
    font-size: 12px;
    color: #999;
}
.statistics-filtereddata-input-block span {
    padding-left: 3px;
}

#statistics-filtereddata-container {
    display: block;
    width: 920px;
}

#statistics-filtereddata-container-table {
    width: 100%;
    max-height: 750px;
    overflow-y: auto;
}

.statistics-filtereddata-task-block {
    height: 20px;
    position: absolute;
    top: 7px;
    width: 5px;
    left: 25px;
}

.statistic-filtereddata-info-block {
    float: left;
    width: 10px;
    height: 10px;
    overflow: hidden;
    margin-right: 5px;
}

.statistics-filtereddata-task-completed {
    background: #94C774;
}

.statistics-filtereddata-task-not-completed {
    background: #ea4848;
}

#statistics-filtereddata-table, #statistics-filtereddata-table thead tr,
#statistics-filtereddata-table tbody tr {
    width: 100%;
    border-collapse: collapse;
    font-weight: 400;
    font-size: 12px;
    color: #999;
    text-align: left;
}

#statistics-filtereddata-table thead tr th {
    padding: 10px;
    color: #999;
    background: #eee;
    font-weight: normal;
}

/* First TR in THEAD for TITLES */
#statistics-filtereddata-table 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;
    border-bottom: 1px solid #fafafa;
    font-size: 14px; 
}

#statistics-filtereddata-table 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;
}

/*#statistics-filtereddata-table thead tr:first-child th:last-child {
    border-radius: 0;
    background: none;
}*/

#statistics-filtereddata-table tbody tr td:last-child {
    position: relative;
}

#statistics-filtereddata-table tbody tr td {
    border-bottom: 1px solid #eee;
    padding: 10px;
}

#statistics-filtereddata-table tfoot tr td {
    padding: 10px;
    font-size: 10px;
    color: #999;
}

#statistics-filter-filtereddata-container {
    margin: 10px 10px 10px 0;
    width: 750px;
}

/* Requisitions */
#requisitions-addeditf-container {
    width: 750px;
    margin: 40px auto;
}

#requisitions-list-container {
    width: 920px;
    margin: 40px auto; 
}

#requisitions-addeditf-table {
    max-height: 750px;
    overflow-y: auto;
    width: 100%;
    border-collapse: collapse;
    padding: 0;
    margin: 0 0 20px 0;
    font-size: 12px;
    text-align: left;
    color: #999;
}



#requisitions-list-footer {
    margin: 10px;
    font-size: 10px;
}

#subtasks-list-footer { 
    margin: 0;
    font-size: 10px;
}

#requisitions-list-table, #requisitions-list-table thead tr,
#requisitions-list-table tbody tr {
    width: 100%;
    border-collapse: collapse;
    font-weight: normal;
    font-size: 12px;
    color: black;
    text-align: left;
    height: 32px;
    overflow-x: hidden;
}

#requisitions-list-table thead tr th {
    padding: 10px;
    color: black;
    font-weight: bold;
    background: transparent;
    color: black;
    padding: 12px;
    cursor: pointer;
}

/* First TR in THEAD for TITLES */
#requisitions-list-table 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: 14px; 
}

#requisitions-list-table 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;
}

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

#requisitions-list-table tbody tr td {
    box-sizing: border-box;
    border: solid 1px #FFF;
    border-collapse: collapse; 
}

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

.requisitions[data-name="requisitions-date"] {
    width: 100% !important;
}

.requisitions[data-name="requisitions-requisitor"] {
    width: 100% !important;
}

.requisitions[data-name="requisitions-idTechnician"] {
    width: 100% !important;
    float: right;
    padding: 0 10px;
    margin: 3px auto 0 auto;
    background: white;
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
}

#requisitions-requisitor-info {
    width: 49.9%;
    float: left;
}

#requisitions-completedate-info {
    width: 49.9%;
    float: left;
}

#requisitions-verified-info {
    border: 1px solid #999;
    padding: 10px;
    margin: 3px 0;
    float: right;
    width: 46.5% !important;
}
/*.requisitions[subaction="addupdate"], .technicians[subaction="save"], .equipments[subaction="addupdate"] {
    width: auto; 
    padding: 10px;
    margin: 3px auto;
    background: #93C572;
    color: white;
    cursor: pointer;
    border: none;
    float: right;
}

.requisitions[subaction="addupdate"]:hover, .technicians[subaction="save"]:hover, .equipments[subaction="addupdate"]:hover {
    background: #9FD37C;
    border: none;
    color: white;
}

.requisitions[subaction="cancel"] {
    width: auto;
    padding: 10px;
    margin: 3px auto;
    background: #ea4848;
    color: white;
    cursor: pointer;
    border: none;
}

.technicians[subaction="cancel"] {
    width: auto;
    float: right;
    padding: 10px;
    margin: 3px auto;
    background: #ea4848;
    color: white;
    cursor: pointer;
    border: none;
}

.technicians[subaction="cancel"]:hover {
    background: #CB2F3B;
    margin-right: 10px;
    border: none;
    color: white;
}*/

.requisitions-addeditf-info {
    padding: 0;
    margin: 10px 0 0 5px;
    display: block;
    float: left;
}

.technicians-addeditf-info{
    padding: 0;
    margin: 10px 0 0 5px;
    display: block;
    float: left;
    width: 100%;
}

input.technicians.input {
    width: 35%;
}

input.technicians.datepicker {
    width: 35%;
}

#requisitions-equipments-container {
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
    margin-bottom: 9px;
}

.requisitions[data-name="requisitions-idequipment"] {
    height: 200px;
    padding: 10px;
    margin: 3px auto 0 auto;
    background: white;
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
}

.requisitions[data-name="requisitions-idequipment"]:focus,
.requisitions[data-name="requisitions-idequipment"]:hover{
    border: 1px solid #ea4848 !important;
}

#requisitions-equipments-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

#requisitions-equipments-table tr th {
    text-align: left;
    font-size: 13px;
    font-weight: bold;
    padding: 10px;
    color: black;
    cursor: pointer;
}

.requisitions-equipments-selected {
    background: #E9E9E9;
}

#requisitions-equipments-table tr td {
    padding: 3px 7px 3px 7px;
}

.section-title {
    width: 100%;
    display: block;
    border-bottom: 1px solid #eee;
    padding: 5px 5px 5px 0;
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: black;
}

.requisitions[data-name="requisitions-equipments"] {
    width: 100%;
}


#equipments-list-container {
    width: 920px;
    margin: 40px auto; 
}

#equipments-list-table, #equipments-list-table thead tr,
#equipments-list-table tbody tr {
    width: 100%;
    border-collapse: collapse;
    font-weight: normal;
    font-size: 12px;
    color: black;
    text-align: left;
}

#equipments-list-table thead tr th {
    padding: 10px;
    color: black;
    background: transparent;
    font-weight: bold;
    cursor: pointer;
}

/* First TR in THEAD for TITLES */
#equipments-list-table 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; 
}

#equipments-list-table 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;
}

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

#equipments-list-table tbody tr td {
    padding: 4px 10px 4px 10px;
    font-weight: normal    
}

#equipments-list-table tfoot tr td {
    padding: 10px;
    font-size: 10px;
    color: black;
}

#equipments-list-table tbody tr td[data-name="equipments-id"] {
    width: 13%;
}

#equipments-addeditf-container {
    width: 750px;
    margin: 40px auto;
}

.equipments-addeditf-info {
    padding: 0;
    margin: 10px 0 0 5px;
    display: block;
    float: left;
}

input.equipments.input, select.equipments.input {
    width: 100%;
}

textarea.equipments.textarea {
    width: 100%;
    max-width: 100%;
    height: 120px;
}

/* Input */
input[type="checkbox"] {
    width: 13px;
}
.input[type="text"], .textarea, select.equipments.input {
    width: auto;
    padding: 10px;
    margin: 3px auto 0 auto;
    background: white;
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
    font-family: Calibri, 'Open Sans', arial;
}

select.equipments.input {
    width: 100%;
}

.input[type="text"]:focus, .textarea:focus, select.equipments.input:focus {
    outline: none;
    border: 1px solid #ea4848;
}

.input[type="text"]:hover, .textarea:hover, select.equipments.input:hover, .statistics-filter-input-error {
    border: 1px solid #ea4848 !important;
}

.input[type="text"]:disabled {
    border: none;
}

.auth-version {
    color: #ccc;
}   

/* Requisition Equipments POPUP */

.arrow-up, .headerSortDown div {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
    margin-top: 5px;
}

.arrow-down, .headerSortUp div {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-top: 5px solid black;
    margin-top: 5px;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;

    border-left: 5px solid black;
    margin-top: 5px;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent; 

    border-right:5px solid black; 
    margin-top: 5px;
}

.copyright {
    color: #ccc;
}