/* Teamlyzer form field theme, paired with select2_teamlyzer.css.
   Loads after bootstrap, so the size variants below are redeclared
   to keep working. */

.form-control {
    height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    color: #16303d;
    background-color: #fff;
    border: 1px solid #d8e6ee;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(22, 48, 61, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control {
    min-height: 90px;
}

select[multiple].form-control,
select[size].form-control {
    min-height: 40px;
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 10px;
}

.form-control:hover {
    border-color: #9fd6f2;
}

.form-control:focus {
    border-color: #42b9ed;
    box-shadow: 0 0 0 3px rgba(66, 185, 237, .16);
    outline: 0;
}

.form-control::placeholder {
    color: #7d97a4;
}

.form-control[disabled],
.form-control[readonly] {
    background-color: #f2f6f9;
    color: #7d97a4;
    box-shadow: none;
}

/* the top navbar stays compact */
.navbar .btn {
    padding: 6px 12px;
}

#search_box {
    height: 34px;
}

/* Every search box draws the magnifier as a background image and reserves
   room for it with padding-left. The .form-control padding above lands later
   in the cascade at the same specificity, so it wins and the placeholder
   slides under the icon. This was patched by id when the theme landed, which
   left the mobile overlay box (#mobile_search_box) and the competitors one
   overlapping -- match the class that owns the icon instead. */
.search_box {
    padding-left: 30px;
}

/* buttons match the 40px field height; text-like and chip buttons
   keep their compact boxes */
.btn {
    padding: 9px 12px;
}

.btn-link {
    padding: 6px 12px;
}

.btn-lg {
    padding: 10px 16px;
}

.btn-sm {
    padding: 5px 10px;
}

.btn-xs {
    padding: 1px 5px;
}

.btn.button_plus {
    padding: 5px 0;
}

.btn.button_benefits_values {
    padding: 0 6px;
}

/* h2h keeps its own colors */
.form-control.first-company {
    border-bottom: 2px solid #F7A162;
}

.form-control.second-company {
    border-bottom: 2px solid #472b93;
}

.form-control.btn-sample {
    color: #fff;
    background-color: #7D6AB3;
    border-color: #7D6AB3;
}

.form-control.btn-sample:hover,
.form-control.btn-sample:focus {
    background-color: #6C51B8;
}

.input-group-addon {
    border: 1px solid #d8e6ee;
    background: #f2f6f9;
    color: #54707e;
    border-radius: 8px;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-btn > .btn {
    height: 40px;
    border-radius: 8px;
}