﻿/******************************************************************/
/********** Custom Bootstap CSS for Portal HRM-Solution ***********/
/******************************************************************/
/*						 Create 02/03/2559 			              */
/*						 Create by Patthavit				      */
/*			    	  Last Modify 04/03/2559 			          */
/*				  	  Last Update by Patthavit				      */
/******************************************************************/

/*Base tag*/
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: normal !important;
}

/* NAV Logo Image */
.navbar-brand {
    padding: 0px; /* firefox bug fix */
}

    .navbar-brand > img {
        height: 100%;
        padding: 0px; /* firefox bug fix */
        width: auto;
    }

.navbar {
    min-height: 70px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.navbar-inverse {
    background-image: url("images/Header.png");
    border-color: #080808;
}

/* Tab */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    font-weight: bold;
    margin-top: 1px;
}

/* Increase Glyphicon size */
.gi-1-5x {
    font-size: 1.5em;
}

.gi-2x {
    font-size: 2em;
}

.gi-3x {
    font-size: 3em;
}

.gi-4x {
    font-size: 4em;
}

.gi-5x {
    font-size: 5em;
}

/* Panel */
/* Change Default Panel Color*/
.panel-default > .panel-heading {
    color: #FFF;
    /*background-color: #37B0A7;*/
    background-color: #3B9C9C;
    border-color: #ddd;
    height: 35px;
    /*font-weight: bold;*/
}

.panel-body {
    padding: 35px;
    margin-bottom: -20px;
}

/* Form Control */
.form-horizontal .control-label.text-left {
    text-align: left;
}

.form-horizontal .control-label.text-center {
    text-align: center;
}



.form-control {
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-group {
    /*margin-bottom: 8px;*/
}

/* Button */
/*
.btn {
    min-width: 100px;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
*/

/* Button state custom */
.btn-user-menu {
    color: #ffffff;
    background-color: #323A3C;
    border: 1px solid #323A3C;
}

    .btn-user-menu:hover, .btn-user-menu:focus, .btn-user-menu:active {
        color: #ffffff;
        background-color: #444F52;
        border: 1px solid #696969;
    }

.btn-gable-calendar {
    background-color: #FFF700;
    font-weight: bold;
    color: red;
    -webkit-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.45);
}

    .btn-gable-calendar:hover {
        background-color: #FFE000;
        color: red;
    }

/* Bage */
.bage-state-red {
    background: #D9534F;
}

.bage-state-yellow {
    background: #F0AD4E;
}

.bage-state-green {
    background: #5CB85C;
}

.upper-position {
    position: relative;
    top: -11px;
    right: 8px;
}

/* Small text */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small,
.h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
    font-weight: normal;
    line-height: 1;
    color: #B3B3B3;
}

/* Table */
table.table.table-striped thead {
    background-color: #E6E6E6;
    color: #757575;
    font-weight: bold;
}

/* Old : background-color: #A5A5A5; color: #fff; background-color:#D6E0DF; color:#585858;*/
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #F7FDFF /*#E6F4F5*/;
}

.table-striped > tbody > tr {
    background-color: #E5F5F5;
}

    .table-striped > tbody > tr:hover {
        background-color: #bbd8e0;
    }

/* Breadcrumbs */
.breadcrumbs {
    padding: 8px 15px;
    margin-bottom: 10px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid gray;
}

    .breadcrumbs > li > a {
        text-decoration: underline;
    }

/*Custom Tooltip Color*/
.color-tooltip + .tooltip > .tooltip-inner {
    background-color: #fff; /*#FFC333;*/
    color: #000;
}

.color-tooltip + .tooltip > .tooltip-arrow {
    border-bottom-color: #fff; /* #FFC333; */
    color: #000;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    border-bottom-width: 2px;
    vertical-align: text-top;
}

td > .btn-sm {
    padding: 0px 0px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    min-width: 30px;
    min-height: 27px;
}

.uib-daypicker td > .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    min-width: 100%;
}

.btn-success-table {
    color: #fff;
    background-color: #86B937;
    border-color: #86B937;
    width: 30px;
    height: 27px;
}

    .btn-success-table:focus,
    .btn-success-table.focus {
        color: #fff;
        background-color: #449d44;
        border-color: #255625;
    }

    .btn-success-table:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

    .btn-success-table:active,
    .btn-success-table.active,
    .open > .dropdown-toggle.btn-success-table {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

        .btn-success-table:active:hover,
        .btn-success-table.active:hover,
        .open > .dropdown-toggle.btn-success-table:hover,
        .btn-success-table:active:focus,
        .btn-success-table.active:focus,
        .open > .dropdown-toggle.btn-success-table:focus,
        .btn-success-table:active.focus,
        .btn-success-table.active.focus,
        .open > .dropdown-toggle.btn-success-table.focus {
            color: #fff;
            background-color: #398439;
            border-color: #255625;
        }

    .btn-success-table:active,
    .btn-success-table.active,
    .open > .dropdown-toggle.btn-success-table {
        background-image: none;
    }

    .btn-success-table.disabled:hover,
    .btn-success-table[disabled]:hover,
    fieldset[disabled] .btn-success-table:hover,
    .btn-success-table.disabled:focus,
    .btn-success-table[disabled]:focus,
    fieldset[disabled] .btn-success-table:focus,
    .btn-success-table.disabled.focus,
    .btn-success-table[disabled].focus,
    fieldset[disabled] .btn-success-table.focus {
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

    .btn-success-table .badge {
        color: #5cb85c;
        background-color: #fff;
    }

.btn-primary-table {
    width: 30px;
    height: 27px;
    color: #fff;
    background-color: #37b0a7;
    border-color: #37b0a7;
}

    .btn-primary-table:focus,
    .btn-primary-table.focus {
        color: #fff;
        background-color: #288690;
        border-color: #207470;
    }

    .btn-primary-table:hover {
        color: #fff;
        background-color: #288690;
        border-color: #207470;
    }

    .btn-primary-table:active,
    .btn-primary-table.active,
    .open > .dropdown-toggle.btn-primary-table {
        color: #fff;
        background-color: #288690;
        border-color: #207470;
    }

        .btn-primary-table:active:hover,
        .btn-primary-table.active:hover,
        .open > .dropdown-toggle.btn-primary-table:hover,
        .btn-primary-table:active:focus,
        .btn-primary-table.active:focus,
        .open > .dropdown-toggle.btn-primary-table:focus,
        .btn-primary-table:active.focus,
        .btn-primary-table.active.focus,
        .open > .dropdown-toggle.btn-primary-table.focus {
            color: #fff;
            background-color: #204d74;
            border-color: #122b40;
        }

    .btn-primary-table:active,
    .btn-primary-table.active,
    .open > .dropdown-toggle.btn-primary-table {
        background-image: none;
    }

    .btn-primary-table.disabled:hover,
    .btn-primary-table[disabled]:hover,
    fieldset[disabled] .btn-primary-table:hover,
    .btn-primary-table.disabled:focus,
    .btn-primary-table[disabled]:focus,
    fieldset[disabled] .btn-primary-table:focus,
    .btn-primary-table.disabled.focus,
    .btn-primary-table[disabled].focus,
    fieldset[disabled] .btn-primary-table.focus {
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    .btn-primary-table .badge {
        color: #337ab7;
        background-color: #fff;
    }

.btn-danger-table {
    width: 30px;
    height: 27px;
    color: #fff;
    background-color: #dd5b38;
    border-color: #dd5b38;
}

    .btn-danger-table:focus,
    .btn-danger-table.focus {
        color: #fff;
        background-color: #c9302c;
        border-color: #761c19;
    }

    .btn-danger-table:hover {
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925;
    }

    .btn-danger-table:active,
    .btn-danger-table.active,
    .open > .dropdown-toggle.btn-danger-table {
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925;
    }

        .btn-danger-table:active:hover,
        .btn-danger-table.active:hover,
        .open > .dropdown-toggle.btn-danger-table:hover,
        .btn-danger-table:active:focus,
        .btn-danger-table.active:focus,
        .open > .dropdown-toggle.btn-danger-table:focus,
        .btn-danger-table:active.focus,
        .btn-danger-table.active.focus,
        .open > .dropdown-toggle.btn-danger-table.focus {
            color: #fff;
            background-color: #ac2925;
            border-color: #761c19;
        }

    .btn-danger-table:active,
    .btn-danger-table.active,
    .open > .dropdown-toggle.btn-danger-table {
        background-image: none;
    }

    .btn-danger-table.disabled:hover,
    .btn-danger-table[disabled]:hover,
    fieldset[disabled] .btn-danger-table:hover,
    .btn-danger-table.disabled:focus,
    .btn-danger-table[disabled]:focus,
    fieldset[disabled] .btn-danger-table:focus,
    .btn-danger-table.disabled.focus,
    .btn-danger-table[disabled].focus,
    fieldset[disabled] .btn-danger-table.focus {
        background-color: #d9534f;
        border-color: #d43f3a;
    }

    .btn-danger-table .badge {
        color: #d9534f;
        background-color: #fff;
    }

.btn-plus-table {
    color: #fff;
    background-color: #009688;
    /*border-color: #009688;*/
}

    .btn-plus-table:hover {
        color: #fff;
        background-color: #37b0a7;
        border-color: #288690;
    }

/* Custom has-error for Select2 */
.has-error .select2-container--default .select2-selection--single,
.has-error .select2-container--default .select2-selection--multiple {
    border-color: #b94a48;
    border: 1px solid #b94a48;
}


.has-error .input-group-btn > button.btn-default {
    border-color: #b94a48;
}

.lang-selected {
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    filter: url(#brightness); /* required for FF */
    filter: brightness(70%);
}

.date-picker-binding{
    border:1px solid #ff0000;
}

.input-group > span.form-control {
    background-color: #eee;
    padding: 6px 12px !important;
    border:1px solid #ccc;
}