/* full page app */

html {
    height: 100%;
}

.app-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.app-viewport {
    flex: 1;
}

/* own icons */

@font-face {
    font-family: 'iconmoon';
    src:  url('/fonts/icomoon.eot?elz5uh');
    src:  url('/fonts/icomoon.eot?elz5uh#iefix') format('embedded-opentype'),
    url('/fonts/icomoon.ttf?elz5uh') format('truetype'),
    url('/fonts/icomoon.woff?elz5uh') format('woff'),
    url('/fonts/icomoon.svg?elz5uh#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'iconmoon' !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-save:before {
    content: "\e900";
}

.icon-edit:before {
    content: "\e901";
}

.icon-up:before {
    content: "\e902";
}

.icon-right:before {
    content: "\e903";
}

.icon-left:before {
    content: "\e904";
}

.icon-down:before {
    content: "\e905";
}

.icon-zoomout:before {
    content: "\e906";
}

.icon-zoomin:before {
    content: "\e907";
}

.icon-check:before {
    content: "\e908";
}

.icon-pipediameter:before {
    content: "\e909";
}

.icon-split:before {
    content: "\e90a";
}

.icon-pipelength:before {
    content: "\e90b";
}

.icon-axis:before {
    content: "\e90c";
}

.icon-nozzlediameter:before {
    content: "\e90d";
}

.icon-removenozzle:before {
    content: "\e90e";
}

.icon-removebottle:before {
    content: "\e929";
}

.icon-flow:before {
    content: "\e90f";
}

.icon-nozzle:before {
    content: "\e910";
}

.icon-zones:before {
    content: "\e911";
}

.icon-newtwo:before {
    content: "\e912";
}

.icon-new:before {
    content: "\e913";
}

.icon-newone:before {
    content: "\e914";
}

.icon-seeall:before {
    content: "\e915";
}

.icon-zplus:before {
    content: "\e916";
}

.icon-yplus:before {
    content: "\e917";
}

.icon-xplus:before {
    content: "\e918";
}

.icon-zminus:before {
    content: "\e919";
}

.icon-yminus:before {
    content: "\e91a";
}

.icon-xminus:before {
    content: "\e91b";
}

.icon-center:before {
    content: "\e91d";
}

.icon-label:before {
    content: "\e91e";
}

.icon-union:before {
    content: "\e91f";
}

.icon-removepipe:before {
    content: "\e920";
}

.icon-storage:before {
    content: "\e924";
}

.icon-concentration:before {
    content: "\e925";
}

.icon-pipe:before {
    content: "\e926";
}

.icon-component:before {
    content: "\e928";
}

.icon-bottles:before {
    content: "\e929";
}

/* general styling */

#navbar-logo {
    height: 20px;
}

.language-flag {
    height: 14px;
    width: auto;
    vertical-align: middle;
}

small.form-text {
    display: block;
}

.clear-filter {
    font-size: 30px;
}

span.unit {
    display: inline-block;
    width: 40px;
}

.table-valign>tbody>tr>td {
    vertical-align: middle;
}

.table-first tr th:first-child, .table-first tr td:first-child {
    width: 40px !important;
}

.table-fixed {
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}

.table-fixed td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* table from Users */
.row-users-enterprise {
    width: 15%;
}

.row-users-name {
    width: 20%;
}

.row-users-email {
    width: 25%;
}

.row-users-role {
    width: 10%;
}

.row-users-language {
    width: 10%;
}

.row-users-access {
    width: 10%;
}

.row-users-actions {
    width: 10%;
}

.row-transport-times-used,
.row-tjoint-distances-used,
.row-ceiling-separations-used,
.row-pressures-used,
.row-vertical-separations-used,
.row-nozzle-times-used,
.row-nozzle-calibration-limits-used,
.row-cylinder-filling-portions-used
 {
    width: 10%;
}

.well-text {
    margin: 0;
}

/* table from Validations/transport-times */


/* los inputs de tipo "file" se maquetan usando inputs alternativos */

input[type=file] {
    display: none;
}

.input-height-form {
    height: 35px;
}

/* Cards, existen en bootstrap V4, aqui se han portado para el V3 */

.card-container {
    margin-bottom: 2em;
}

.card {
    font-size: 1em;
    overflow: hidden;
    padding: 0;
    border: none;
    border-radius: .48571429rem;
/*    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.19), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.card-block {
    font-size: 1em;
    position: relative;
    margin: 0;
    padding: 1em;
    border: none;
    border-top: 1px solid rgba(34, 36, 38, .1);
    box-shadow: none;
}

.card-img-top {
    width: 100%;
    height: 128px;
    overflow: hidden;
}

.card-img-top img {
    min-width: 100%;
    min-height: 100%;
}

.card-title {
    font-size: 1.28571429em;
    font-weight: 700;
    line-height: 1.2857em;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.meta {
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-text {
    clear: both;
    margin-top: .5em;
    color: rgba(0, 0, 0, .68);
    white-space: pre-wrap;
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-footer {
    height: 42px;
    font-size: 1em;
    position: static;
    top: 0;
    left: 0;
    max-width: 100%;
    padding: .75em 1em;
    color: rgba(0, 0, 0, .4);
    border-top: 1px solid rgba(0, 0, 0, .05) !important;
    background: #fff;
}

.card-footer > div {
    height: 20px;
}

.card-glyphicon {
    font-size: 120px;
    line-height: 128px;
}

/* canvas and drawing */

.vds-canvas {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

/* dialogs */

.dialog {
    position: absolute;
    left: 72px;
    top: 69px;
    width: 330px;
    color: #333333;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    z-index: 1;
}

.dialog-header {
    font-size: 16px;
    font-weight: bold;
    padding: 15px;
    border-bottom: 1px solid #CCCCCC;
    line-height: 30px;
}

.dialog-body {
    padding: 15px;
}

/* vertical toolbar */

.btn-toolbar-vertical {
    position: absolute;
    color: #333333;
    background-color: #F8F8F8;
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    z-index: 1;
    margin: 0;
    padding: 0;
}

.btn-toolbar-vertical-body {
    padding: 10px;
}

.toolbar-vertical-separator {
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-toolbar-vertical .btn {
    width: 40px;
}

/* horizontal toolbar */

.btn-toolbar-horizontal {
    position: absolute;
    color: #333333;
    background-color: #F8F8F8;
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    z-index: 1;
    margin: 0;
    padding: 0;
}

.btn-toolbar-horizontal-body {
    padding: 10px;
}

.toolbar-horizontal-separator {
    content: ' ';
    display: inline-block;
    background-color: #CCCCCC;
    margin: 0 10px;
    height: 34px;
    width: 1px;
    vertical-align: middle;
}

/* dropdowns */

.scrollable-dropdown-menu {
    max-height: 10em; /*Provide height in pixels or in other units as per your layout*/
    overflow-y: auto;
}

.list-icon {
    line-height: inherit;
}

.full-screen-alerts {
    position: absolute;
    bottom: 0;
    z-index: 100;
    width: 100%;
    padding-right: 30px;
}

/* PIPE MODAL */

.selectable-row:hover {
    cursor: pointer;
}
.selectable-row:hover td, .selectable-row:hover th {
    color: #fff;
    background-color: #337ab7;
}

.selected-row td, .selected-row th {
    background: #dff0d8;
    color: #020;
}

span.duplicate-project-version-icon {
    margin-right: 25px;
    margin-top: -23px;
    color: #666;
}

span.clone-project-version-icon {
    margin-right: 5px;
    margin-left: 10px;
    margin-top: -23px;
    color: #666;
}

span.help-project-version-icon {
    margin-right: 15px;
}

.dropdown-menu>li>a.project-version-state-icon {
    padding-right: 30px;
}

.modal-scroll {
    overflow-y: auto;
    height: auto;
}

th.erase-button-column {
    width: 60px;
}

table .input-group-addon {
    padding: 0;
}

.pointer {
    cursor: pointer;
}

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

.without-bold {
    font-weight: normal !important;"
}

.no-projects-container {
    min-height: 30px;
}


/* PAGINATOR */
.paginator { width: 100%; position: relative; line-height: 25px; font-size: 12px; margin: 10px 0; }
.paginator > .first, .paginator > .previous, .paginator > .next, .paginator > .last { background-color: #FFF ;  display: inline-block; border: 1px solid #2e6da4; border-radius: 4px; height: 25px; width: 25px; text-align: center; line-height: 25px; }
.paginator > .info { position: absolute; right: 0px; }
.paginator > .numbers { display: inline-block; padding: 0 10px; min-width: 160px; }
.paginator > .numbers > a, .paginator > .numbers > span { display: inline-block; margin: 0 7px 0 7px; text-align: center; }
.paginator > .numbers > a { text-decoration: none; color: #000; }
.paginator > .numbers > span { color: #337ab7; }
.paginator > a.first, .paginator > a.previous, .paginator > a.next, .paginator > a.last { text-decoration: none; color: #FFF;
    background-color: #2e6da4; transition: background-color .25s ease; }
.paginator > a.first:hover, .paginator > a.previous:hover, .paginator > a.next:hover, .paginator > a.last:hover { background-color: #FFF; color: #337ab7; }
.paginator > span.first, .paginator > span.previous, .paginator > span.next, .paginator > span.last { color: #FFF; background-color: #FFF; }


.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #eeeeee;
    border-color: #bbbbbb;
    color: #333333;
}
.pagination>li>a, .pagination>li>span, .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    color: #333333;
}
.paginator-container {
    text-align: center;
}