/* The sidebar menu */
.sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 260px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #eee; 
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 16px;
    color: #20B2AA;
    /*color: #2196F3;*/
    display: block;
}

.sidenav p {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #111; /* Black */
    display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #064579;
}

.imagin {
    padding: 6px 8px 6px 16px;
    width: 150px;
    height: 100px;
    display: block;
}

/* Style page content */
.main {
    margin-left: 260px; /* Same as the width of the sidebar */
    padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/* Style the header */
.header {
  /*padding: 0px 10px;*/
  background: #eee;
  color: #111;
  top:0px;
  width: 100%;
  text-align: center;
  position: fixed;
 }

p, header {
    font-family: "Times New Roman", Times, serif;
}

p.ind {
    text-indent: 20px;
}

.example {
    height:150px;
    width: 800px;
}

.request {
    height:50px;
    width: 800px;
}

/*li {
    text-indent: 20px;
    list-style-position: inside;
}*/

ul {
    text-indent: 10px;
    list-style-position: inside;
}

.red-text {
    color: red;
}

.green-text {
    color: green;
    text-indent: 50px;
}

table {
    float: left;
    /*border: groove;*/
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: black;
}

th, td {
    padding: 15px;
    text-align: left;
       border: groove;
}

tr:nth-child(even) {
    background-color: #eee;
}



/*body input:not(.notCapital):not([type="submit"]):not([type="button"]), body textarea:not(.notCapital) {
    text-transform: uppercase !important;
}*/

::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}

.fullHeight {
    height: 100% !important;
}

* {
    padding: 0;
    margin: 0;
}

/*a.navbar-brand {
    overflow: hidden;
}

    a.navbar-brand > img {
        bottom: 10px;
    }*/

h1, h3 {
    font-family: 'Open Sans', sans-serif;
}

/*input:not([type="submit"]),
div.btn-group.bootstrap-select > button {
    height: 30px;
}*/

/*input.txtInRow {
    height: 20px;
    background-color: transparent !important;
    width: 100% !important;
    /*padding-left:5px;
    padding-right:5px;*/
    /*margin-left: -5px;
    margin-right: -5px;*/
}

    /*input.txtInRow:hover, input.txtInRow:focus {*/
        /*border-color:rgba(0,0,0,0) !important;*/
    /*}*/

/*label[data-disabled="true"],
label.myCheckBox[data-disabled="true"],
input[disabled]:hover,
button[disabled] {
    cursor: not-allowed;
}*/

input:not([type="submit"]):not([type="button"]), textarea {
    padding-left: 5px;
    padding-right: 5px;
    width: 150px;
    box-shadow: none !important;
    border-radius: 0;
    outline: none;
}

.transition-all,
.transitionAll,
textarea, input, button, .modal-body,
.modal-content,
.modal-header,
.modal-footer,
.modal-footer:before,
.modal-body .table-title th,
.modal-body .table-footer td.footer,
.form-group.form-group-val > div {
    -moz-transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

    button.mbtn,
    input[type="submit"].mbtn,
    input[type="button"].mbtn,
    a.mbtn,
    .modal-header > .modal-title,
    button > span.fa.fa-truck,
    button > span.fa.fa-user,
    button > span.fa.fa-users,
    .modal-footer > button,
    table.table-title th,
    .headerTitle span {
        text-shadow: -4px 4px 4px rgba(0,0,0,0.2);
    }

textarea {
    padding: 2px 5px;
}
/*removing the outline imposed by bootstrap*/
button, button:focus, button:active,
.bootstrap-select .dropdown-toggle:focus, input, input:focus {
    outline: none !important;
    outline-color: transparent;
    outline-style: none;
}
/*removing inner shadow imposed by bootstrap*/
.open.btn-group .dropdown-toggle {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

a, a:hover, a:focus, a:visited, a:active {
    text-decoration: none;
    /*cursor: pointer;*/
}

body {
    padding-top: 65px;
}

/*.modal-body.form-centered {
    padding-top: 20px;
}*/

.popover.shown {
    display: block !important;
}

section#bodyContent,
div.dataContainer,
.modal-header,
.modal-footer,
.modal-header > button.modal-exit,
.modal-body.form-centered,
.flex-wrapper,
.flexWrapper,
.centered-form {
    display: flex;
}

.inline-flex-wrapper {
    display: inline-flex;
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.justify-center,
.centered-form,
.modal-header,
.modal-footer,
.modal-header > button.modal-exit,
.modal-body.form-centered {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.align-items-stretch {
    align-items: stretch;
}

.items-center,
.modal-header,
.modal-footer,
.modal-header > button.modal-exit,
.modal-body.form-centered {
    /*justify-content: center;*/
    align-items: center;
}

.flex-around-strech {
    justify-content: space-around;
    align-items: stretch;
}

.flex-start-start {
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-start-center {
    justify-content: flex-start;
    align-items: center;
}

.flex-start-end {
    justify-content: flex-start;
    align-items: flex-end;
}

.flex-start-strech {
    justify-content: flex-start;
    align-items: stretch;
}

.flex-center-start {
    justify-content: center;
    align-items: flex-start;
}

.flex-center-center {
    justify-content: center;
    align-items: center;
}

.flex-center-end {
    justify-content: center;
    align-items: flex-end;
}

.flex-end-start {
    justify-content: flex-end;
    align-items: flex-start;
}

.flex-end-center {
    justify-content: flex-end;
    align-items: center;
}

.flex-end-end {
    justify-content: flex-end;
    align-items: flex-end;
}

.flex-sbetween-center {
    justify-content: space-between;
    align-items: center;
}

.flex-sbetween-start {
    justify-content: space-between;
    align-items: flex-start;
}

.content-center {
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
}

.content-start {
    -ms-align-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

.space-around {
    justify-content: space-around !important;
}

.space-between {
    justify-content: space-between !important;
}

.modal-footer {
    justify-content: flex-end;
    border-top: none;
}

.relative,
a.navbar-brand > img,
.modal-footer,
.headerBar > .headerTitle,
.wrapper,
.dataContainer {
    position: relative;
}

.flex-column,
.layout-column,
section#bodyContent,
div.dataContainer {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

    .flex-grow,
    .modal-header > .modal-title,
    section#bodyContent div.bodyContainer,
    div.dataContainer .tableWrapper {
        -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }

.flex-no-grow {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
}

.flex-no-shrink {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}

section#bodyContent {
    width: 100vw;
    height: calc(100vh - 65px);
}

    section#bodyContent div.bodyContainer,
    div.dataContainer .tableWrapper {
        overflow: auto;
    }

div.dataContainer > *,
div.dataContainer table-x > * {
    flex-shrink: 0;
}



section#bodyContent div.footer {
    max-height: 20px;
}

.backPanel {
    padding: 10px;
    height: 100%;
}

    .backPanel > .row {
        margin: 0;
    }

div.dataContainer {
    max-height: 300px;
    margin-bottom: 10px;
}

    div.dataContainer .tableWrapper {
        -moz-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        /*flex element of .dataContainer flex element*/
    }

table.table-title,
table.table-footer {
    -moz-transition: width 0.25s ease;
    -o-transition: width 0.25s ease;
    -webkit-transition: width 0.25s ease;
    transition: width 0.25s ease;
}

table.table-title,
table.table-footer,
table.table-data {
    width: 100%;
    border-spacing: 5px;
    border-collapse: separate;
    table-layout: fixed;
    white-space: nowrap;
}

    .text-center,
    table.table-title th,
    table.table-footer td,
    table.table-data,
    .bootstrap-select.btn-group .no-results,
    section#bodyContent div.footer,
    .modal,
    input:not([type="submit"]), 
    .tableWrapper > p.noResult {
        text-align: center;
    }

.text-left {
    text-align: left !important;
}

table.table-data tr:hover {
    /*cursor: pointer;*/
}

table.table-data tr.on {
    /*cursor: pointer;*/
}

table.table-data td {
    height: 20px;
    padding: 0 5px;
    text-transform: uppercase;
}

    table.table-data td input {
        text-transform: uppercase;
    }

table.table-title th,
table.table-data td,
table.table-footer td {
    overflow: hidden;
}



    table.table-footer td.flabel {
        text-align: right;
    }

div.inline-block,
.centered-form > div {
    display: inline-block;
}



button.mbtn,
input[type="submit"].mbtn,
input[type="button"].mbtn,
a.mbtn,
.modal-footer > button {
    min-width: 75px;
    border-radius: 3px !important;
    padding: 5px 10px;
    font-family: Helvetica,Arial, sans-serif;
}

.modal-content {
    padding: 0;
}

.modal-content,
.modal-header {
    border-radius: 3px;
}

    .modal-header > button.modal-exit {
        height: 30px;
        width: 30px;
        border-radius: 30px;
    }


        .modal-header > button.modal-exit:hover {
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

.modal-body {
    padding-bottom: 10px;
}

.modal-footer:before,
.wrapper > p.wrapperLabel {
    position: absolute;
}

.modal-footer:before {
    content: '';
    top: 0;
    left: 15px;
    height: 1px;
    width: calc(100% - 30px);
}

.modal-footer > button:not(:last-child) {
    margin-right: 15px;
}


.faded,
.modal.faded .modal-header > *:not(.modal-exit),
.modal.faded .modal-body,
.modal.faded .modal-footer,
.modal.faded .modal-footer *:not(.modal-close) {
    opacity: 0.3;
}

.modal-header {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/*centering the modal*/
.modal {
    padding: 0 !important;
}

img#logo_icon {
    height: 40px;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

table.table-title.left-aligned th {
    padding-left: 5px;
}

table.left-aligned td,
table.left-aligned th,
.modal-dialog {
    text-align: left;
}

.modal-dialog {
    display: inline-block;
    vertical-align: middle;
}



#themepicker #themeGallery {
    margin-right: 0;
    margin-left: 0;
    /*cursor: pointer;*/
}


#themepicker .checkedIcon {
    position: absolute;
    top: -15px;
    font-size: 40px;
    display: none;
}

#themepicker .tile.active .checkedIcon {
    display: inline;
}

#themepicker .tile {
    border: 1px solid rgba(0,0,0,0);
    width: calc(100%/2 - 10px);
    margin-right: 5px;
    margin-left: 5px;
}

#themepicker #dark {
    background-color: #1e1e1e;
}

#themepicker #light {
    background-color: #fff;
}

#themepicker #dark .checkedIcon {
    right: -5px;
}

#themepicker #light .checkedIcon {
    right: -5px;
}


#themepicker #dark .header,
#themepicker #dark > p {
    color: #ddd;
}

#themepicker #light .header,
#themepicker #light > p {
    color: #555;
}

#themepicker #dark > p,
#themepicker #light > p {
    text-align: justify;
}

#themepicker table {
    width: 100%;
    border-spacing: 5px;
    border-collapse: separate;
    table-layout: fixed;
    white-space: nowrap;
}

#themepicker #dark > table.titleTable th,
#themepicker #light > table.titleTable th {
    background-color: green;
    text-align: center;
    color: #ddd;
    text-shadow: -4px 4px 5.5px rgba(0,0,0,0.3);
}

#themepicker #light > table.titleTable th {
    background-color: #337ab7;
}

#themepicker #dark > table.grid-table td,
#themepicker #light > table.grid-table td {
    background-color: rgba(255,255,255,0.05);
    text-align: center;
    color: #ddd;
    text-shadow: -4px 4px 5.5px rgba(0,0,0,0.3);
}

#themepicker #light > table.grid-table td {
    background-color: rgba(44,44,44,0.05);
    color: #555;
}

#themepicker #dark > table.grid-table tr:hover td {
    background-color: rgba(255,255,255,0.1);
}

#themepicker #light > table.grid-table tr:hover td {
    background-color: rgba(51,122,183,0.15);
}

div#errorDescriptionBin .errItem {
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

    div#errorDescriptionBin .errItem:last-child {
        margin-bottom: 15px;
    }

.errItem .codeErrorLine {
    color: red;
    margin-bottom: 5px;
}

.errItem .descErrorHeader {
    font-size: 12px;
}

.errItem .descErrorLine {
    color: red;
    margin-left: 15px;
}

.btn.dropdown-toggle.error {
    background-color: red !important;
}

@media (min-width: 992px) {
    .modal-dialog.modal-xl {
        width: 900px;
    }
}

@media (min-width: 1280px) {
    .modal-dialog.modal-xl {
        width: 1200px;
    }
}

.centered-form {
    padding-top: 30px;
}

    .centered-form > div {
        flex-basis: 100%;
    }

    .centered-form input.form-control {
        width: 200px;
    }

div.popover > .popover-title {
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

div.popover > .popover-content {
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}

.wrapper {
    padding: 10px 10px;
    margin-bottom: 10px;
}

    .wrapper > input {
        width: 100%;
    }

    .wrapper > p.wrapperLabel {
        font-size: 11px;
        padding: 2px 10px;
        top: -10px;
    }

.enclosed {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.enclosedLabel {
    position: absolute;
    top: -10px;
    font-size: 11px;
    padding: 2px 10px;
}








/*============================================================================================*/
/*============================================================================================*/
/*============================================================================================*/
td.inputInrow,
td.btnInrow,
td.dropdInrow {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    td.inputInrow input {
        height: 20px !important;
        width: calc(100%) !important;
        /*background-color: #2f2f2f !important;*/
        background-color: transparent;
    }


tr:hover td.inputInrow input {
    /*background-color: #333333 !important;*/
}

td.btnInrow {
    background-color: transparent !important;
    /*border-radius:4px;*/
}

    td.btnInrow button {
        border: none;
        /*cursor: pointer;*/
        background-color: #2f2f2f !important;
        /*border-radius:4px;*/
        width: 100%;
        height: 100%;
    }

        td.btnInrow button:not(.save-pending) {
            color: green;
        }

        tr:hover td.btnInrow button:hover:not(.save-pending),
        td.btnInrow button:focus:not(.save-pending) {
            background-color: green !important;
            color: #fff;
        }

td.dropdInrow div.bootstrap-select {
    margin-top: -4px;
}

    td.dropdInrow div.bootstrap-select > button {
        background-color: #2f2f2f;
        color: #fff;
        padding-top: 0;
        padding-bottom: 0;
        height: 21px;
        border: none;
    }

    td.dropdInrow div.bootstrap-select.open > button.dropdown-toggle.btn-default {
        color: #fff;
    }

tr.dirty td.btnInrow > button.save-info,
.mbtn.dark.warning:not(:hover) {
    background-color: rgb(103,5,5) !important;
    color: #fff;
}

div.navbar.navbar-inverse.navbar-fixed-top .dropdown-menu > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
}

.ui-resizable-handle {
    width: 50px !important;
    height: 3px !important;
    left: calc(50% - 25px) !important;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

    .ui-resizable-handle:hover,
    .ui-resizable-resizing .ui-resizable-handle {
        height: 5px !important;
    }



div#myLoaderWrapper {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    z-index: 10000;
    opacity: 0;
    -moz-transition: opacity 0.3s ease-in;
    -o-transition: opacity 0.3s ease-in;
    -webkit-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in;
}

    div#myLoaderWrapper.visible {
        opacity: 1;
    }

body.ready div#myLoaderWrapper {
    display: none;
}

button[modal-ok] {
    position: relative;
}

    button[modal-ok] my-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    button[modal-ok] > span.modal-ok-loading {
        opacity: 0;
    }

input.ng-invalid.ng-touched:not([type="submit"]),
input.ng-invalid.no-touched:not([type="submit"]) {
    border-color: red !important;
}

div.errorRow p.errorLine {
    color: red !important;
}

div.insideErrorMessage {
    background-color: red;
    padding: 5px 15px;
    text-align: center;
    position: absolute;
    top: -20px;
    border-radius: 100px;
    width: 200px;
    left: calc(50% - 100px);
    z-index: 10;
    box-shadow: 0 5px 10px rgba(30,30,30,1);
}

    div.insideErrorMessage p.errorLine {
        color: #fff;
        font-size: 12px;
    }

    div.insideErrorMessage div.caret {
        position: absolute;
        bottom: -4px;
        border-top-color: red;
    }

td {
    position: relative;
}

    td.input-parent {
        position: relative;
        padding: 0 !important;
    }

    td input.cellInput[type="text"] {
        background-color: transparent !important;
        width: 100%;
        height: 20px;
        position: absolute;
        top: 0;
        left: 0;
    }

    td > div.btn-group.bootstrap-select {
        position: absolute;
        top: 0;
        left: 0;
    }

        td > div.btn-group.bootstrap-select > button.btn.dropdown-toggle {
            height: 20px;
            padding-top: 0;
            background-color: transparent;
        }

            td > div.btn-group.bootstrap-select > button.btn.dropdown-toggle > span.filter-option.pull-left {
                text-align: center;
            }

[navigatable] table.table-data {
    table-layout: fixed;
}

    [navigatable] table.table-data tr.active td {
        height: 18px !important;
    }

        [navigatable] table.table-data tr.active td.active.input-parent input.cellInside {
            text-align: left !important;
        }

    [navigatable] table.table-data tr td.input-parent input:not(.cellInside) {
        text-align: center !important;
    }

[key-navigable] input:focus {
    text-align: left !important;
}

.wrapper > p {
    position: absolute;
    top: -10px;
    left: 100px;
    font-size: 11px;
    padding: 2px 10px;
}

.disabled {
    cursor: not-allowed;
}

#dialogAlertModal,
#dialogConfirmationModal {
    z-index: 100050 !important;
}

.secundaryControls {
    position: absolute;
    top: 15px;
    left: 15px;
}

.form-group-val, .input-container {
    padding-bottom: 15px;
    position: relative;
}

    .form-group-val .bottomErrorMessage {
        position: absolute;
        bottom: -18px;
        left: 15px;
    }

    .input-container .bottomErrorMessage {
        position: absolute;
        bottom: 0;
        left: 15px;
        right: 15px;
    }

        .form-group-val .bottomErrorMessage p.errorLine,
        .input-container .bottomErrorMessage p.errorLine {
            font-size: 11px;
            color: red !important;
            text-align: left;
            padding-top: 5px;
        }

div.tableWrapper {
    position: relative;
}

    div.tableWrapper > my-loader {
        position: absolute;
        width: 100%;
        height: 100%;
    }

.table-data.loading {
    opacity: 0;
}

span.headerCounter {
    font-size: 16px;
    padding: 2px 4px;
    font-weight: bold;
    border-radius: 5px;
}

date-time-picker-angular {
    display: inline-block;
}

.dataPair {
    display: inline-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin: 5px;
    min-height: 60px;
    width: 200px !important;
}

    .dataPair .label {
        position: absolute;
        top: 0;
        left: 10px;
    }

    .dataPair .value {
        margin-top: 15px;
        margin-bottom: 0;
        /*width: 200px !important;*/
        width: 100% !important;
    }

    .dataPair.factor5 {
        width: 510px !important;
    }

    .dataPair.factor4 {
        width: 400px !important;
    }

    .dataPair.factor3 {
        width: 305px !important;
    }

    .dataPair.factor2 {
        width: 195px !important;
    }

    .dataPair.factor1 {
        width: 92.5px !important;
    }

    .dataPair .errorMessage {
        margin: 0;
    }

        .dataPair .errorMessage p {
            font-size: 12px;
            color: red !important;
        }