/* 
    - This file is created with the purpose of overriding custom control styles for inspinia template.
    
    - Controls include buttons, input boxes, dropdowns, forms and any other component that allows user 
      input/interaction.
*/

/*-------------------------------------------------------------------------------------------------------*/
/*------------------------------------------->>> BUTON <<<-----------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------*/

/* This guarantees button caption will not wrap automatically */
.btn {
    white-space: nowrap;
}

/* a11y: update color : #1c84c6; to 4.5:1 contrast ratio : #1c84c6; */
.btn-success {
    background-color: #237BC0;
    border-color: #237BC0;
}

/* White background on outline buttons to avoid button caption being the same blue color as background */
.btn-success.btn-outline,
.btn-success.btn-outline.dropdown-toggle:focus {
    background-color: white;
}

/* Avoid text color becoming white and fading in the button background */
.btn-success.btn-outline:hover,
.btn-success.btn-outline:disabled,
.btn-success.btn-outline:focus,
.btn-success.btn-outline.dropdown-toggle,
.btn-success.btn-outline.dropdown-toggle:focus {
    color: #1d6db0;
}

/* Increases fade f disabled button to highlight disabled state visually */
.btn-success.btn-outline:disabled {
    opacity: 0.5;
}

/* Fixed issue with dropdown button appearing green when clicked */
.open > .dropdown-toggle.btn-success:hover,
.open > .dropdown-toggle.btn-success:focus {
    background-color: #237BC0;
    border-color: #237BC0;
    color: #FFFFFF;
}

/* Override background color of active link in dropdown menu to be more consistent with AQMIS color palette */
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background-color: #337ab7;
}

/*-------------------------------------------------------------------------------------------------------*/
/*------------------------------------->>> BADGES & LABELS <<<-------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------*/

.label-primary, .badge-primary {
    background-color: #1ab394;
    color: #000;
}

.label-warning, .badge-warning {
    background-color: #f8ac59;
    color: #000;
}

.label-danger, .badge-danger {
    background-color: #ed5565;
    color: #000;
}

.label-info, .badge-info {
    background-color: #23c6c8;
    color: #000
}

/*-------------------------------------------------------------------------------------------------------*/
/*------------------------------------------->>> FORM <<<------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------*/

/* Override the focused border to be visible as light blue */
.form-control:focus {
    color: #495057;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Form-control border shows as light red when has-error is present */
.has-error .form-control:focus {
    border-color: #ED5565;
    box-shadow: 0 0 0 0.2rem rgba(194, 20, 38, 0.25);
}

/* Style labels with same visual appealing as in Bootstrap 3 */
label {
    margin-bottom: 5px;
    font-weight: bold;
}

/*-------------------------------------------------------------------------------------------------------*/
/*---------------------------------------->>> FILE UPLOAD <<<--------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------*/

/*
* Wrapping the file name at the upload file component to avoid breaking the layout
* http://bugtracker.weblakes.com/view.php?id=38455
*/
.fileinput.input-group.fileinput-exists div.form-control {
    display: flex;
}

.fileinput.input-group.fileinput-exists div.form-control i.fileinput-exists {
    margin-right: 8px;
}

.fileinput.input-group.fileinput-exists div.form-control span.fileinput-filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}