/* 
    Document   : forms
    Created on : 10/03/2011, 09:25:22
    Author     : lucas
    Description:
        Selectores para crear estructuras de formularios.
*/

/*
 * Contenedor de elementos
 */
ul.fields-container-form {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
}

ul.fields-container-form li {
    display: inline-block;
    overflow: hidden;
}

/*
 * Secciones de elementos
 */
.small-section-form {
    width: 5%;
}

.small-quarter-section-form {
    width: 15%;
}

.small-middle-section-form {
    width: 30%;
}

.middle-section-form {
    width: 50%;
}

.big-middle-section-form {
    width: 70%;
}

.big-quarter-section-form {
    width: 85%;
}

.big-section-form {
    width: 95%;
}

.full-section-form {
    width: 100%;
}

/*
 * Espacio entre filas de elementos
 */
.simple-rowspace-form {
    margin-bottom: 3px;
}

.double-rowspace-form {
    margin-bottom: 6px;
}

.long-rowspace-form {
    margin-bottom: 10px;
}

.max-rowspace-form {
    margin-bottom: 20px;
}

/*
 * Alineacion de elementos
 */
 
.left-align-form, .small-section-form, .small-quarter-section-form, .small-middle-section-form,
.middle-section-form, .big-middle-section-form, .big-quarter-section-form, .big-section-form, .full-section-form {
    float: left;
}

.right-align-form {
    float: right;
}

/*
 * Alineacion de etiquetas
 */

.left-label-form label, .right-label-form label{
    vertical-align: middle;
}

.left-label-form label {
    text-align: right;
}

.right-label-form label {
    text-align: left;
}

.overleft-label-form input, .overleft-label-form textarea, .overleft-label-form select,
.overright-label-form input, .overright-label-form textarea, .overright-label-form select,
.top-label-form input, .top-label-form textarea, .top-label-form select {
    display: block;
    float: left;
}

.overleft-label-form label {
    text-align: left;
}

.overright-label-form input, .overright-label-form textarea, .overright-label-form select {
    float: right;
}

.overright-label-form label {
    display: block;
    text-align: right;
}

.over-label-form label {
    display: block;
    text-align: center
}

.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 7px;
    font: var(--fa-font-solid);
}

.truck::before {
    content: '\f0d1';
}

.clock::before {
    content: '\f017';
}

.road::before {
    content: '\f018';
}

.bell::before {
    content: '\f0f3';
}

.file::before {
    content: '\f15b';
}

.chart-simple::before {
    content: '\e473';
}

.tag::before {
    content: '\f02b';
}

.user::before {
    content: '\f007';
}

.tint::before {
    content: '\f043';
}

.stop-circle::before {
    content: '\f28e';
}

.eye::before {
    content: '\f06e';
}

.envelope::before {
    content: '\f0e0';
}

.usd::before {
    content: '\f155';
}

.tachometer::before {
    content: '\f0e4';
}

.cogs::before {
    content: '\f085';
}

.bullseye::before {
    content: '\f140';
}

.calendar-o::before {
    content: '\f133';
}

.calendar-plus-o::before {
    content: '\f271';
}

.exclamation-triangle::before {
    content: '\f071';
}

.clock, .road, .chart-simple, .tag, .tint, .stop-circle, .eye, .tachometer, 
.bullseye, .calendar-o, .calendar-plus-o, .exclamation-triangle, .ctrl_tbarButton {
    display: inline-block !important;
}

.link-selector div a {
    text-decoration: none;
}

.link-selector-cell {
    text-transform: uppercase;
    height: 70px; 
    text-align: center; 
    border-radius: 5px; 
    font-size: 20px;
}

.link-selector-cell-color-1 {
    background-color: #34B297;
}

.link-selector-cell-color-1:hover {
    background-color: #288a75;
}

.link-selector-cell-color-2 {
    background-color: #75D7C2;
}

.link-selector-cell-color-2:hover {
    background-color: #4dcbb0;
}

.link-selector-cell-color-3 {
    background-color: #288A75;
}

.link-selector-cell-color-3:hover {
    background-color: #1d6354;
    color: white;
}

.link-selector-cell-color-4 {
    background-color: #C4EEE5;
}

.link-selector-cell-color-4:hover {
    background-color: #9ce2d3;
}