body {
    font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, Poppins !important;
}

.btn-primary,
.btn-danger,
.btn-success,
.btn-default,
.btn-info {
    padding: 10px 20px !important;
    transition: transform .5s !important;
    border-radius: 5px !important;
}


/* "color-primary-700": "#056A43" #008eaa For Light-Color,
"color-primary-800": "#03553E", #007692 For Sidebar,*/

.btn-primary {
    background: linear-gradient(90deg, #18A6A5 0%, #074960 100%) !important;
    border: 1px solid #18A6A5 !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: linear-gradient(90deg, #074960 0%, #18A6A5 100%) !important;
    border: 1px solid #074960 !important;
    box-shadow: 0 0 5px #074960 !important;
}


.btn-info {
    background: linear-gradient(90deg, #18A6A5 0%, #074960 100%) !important;
    border: 1px solid #18A6A5 !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: linear-gradient(90deg, #074960 0%, #18A6A5 100%) !important;
    border: 1px solid #074960 !important;
    box-shadow: 0 0 5px #074960 !important;
}


.btn-danger {
    background: linear-gradient(90deg, #a7063f 0%, #f50057 100%) !important;
    border: 1px solid #a7063f !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: linear-gradient(90deg, #f50057 0%, #a7063f 100%) !important;
    border: 1px solid #f50057 !important;
    box-shadow: 0 0 5px #f50057 !important;
}



.btn-success {
    background: linear-gradient(90deg, #03553E 0%, #056A43 100%) !important;
    border: 1px solid #03553E !important;

    /* background: linear-gradient(90deg, #11848E 0%, #056A43 100%) !important;
    border: 1px solid #11848E !important; */


}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: linear-gradient(90deg, #056A43 0%, #03553E 100%) !important;
    border: 1px solid #056A43 !important;
    box-shadow: 0 0 5px #03553E !important;

    /* background: linear-gradient(90deg, #0C6578 0%, #11848E 100%) !important;
    border: 1px solid #0C6578 !important;
    box-shadow: 0 0 5px #11848E !important; */
}


.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    box-shadow: 0 0 5px #BCBCAE !important;
}


select.input-sm,
.bootstrap-select .btn,
input.form-control {
    height: 41px !important;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding-top: 5px;
    padding-bottom: 5px;
}

table>tbody>tr:nth-of-type(odd) {
    background-image: -webkit-linear-gradient(270deg, #f7f7f7, #FAFDFB, #f7f7f7);
}

table>tbody>tr:hover {
    background-image: -webkit-linear-gradient(270deg, #ffffff, #FFF4F5, #FFF1F3);
}


table th {
    padding: 6px 16px !important;
}

table th:first-child {
    border-top-left-radius: 5px;
}

table th:last-child {
    border-top-right-radius: 5px;
}


table.dataTable thead th.sorting_asc:after {
    content: '';
    display: inline-block;
    margin-left: 5px;
    width: 0;
    height: 0;
    border-width: 5px 5px 0 5px;
    border-color: #0C657780 transparent transparent transparent;
}

table.dataTable thead th.sorting_desc:after {
    content: '';
    display: inline-block;
    margin-left: 5px;
    width: 0;
    height: 0;
    border-width: 5px 5px 0 5px;
    border-color: transparent transparent #0C657780 transparent;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #074960;
    border-color: #5d0303;
}



/* "color-primary-700": "#18A6A5", #D51709 
"color-primary-800": "#074960", #AA0000 

Menu User Welcome Text Color #f66262   #62f6c7
Menu Active Subitem Background Color #f6d3d3 #d3f6e8
Top Header Links Color #92000c  #007692
Menu Active Item Background Color #92000c #007692
Submenu Links Color #aa0000   #008eaa
Modal Heading Background #92000c #007692
Tabs Link Active/Hover Color #b00a02  #008eaa
Tabs Active Border Color #d70900  #015d6f
Table Headings Color #6b1f26  #065245
*/

div.modal-header p {
    color: #fff;
}

.color-test {
    color: #12b2b366
}



#modal_data {
    color: transparent;
}



/* TABLE BUTTONS WITH ICONS  */

.tbl-btn-danger,
.tbl-btn-danger.focus {

    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: 0px;
    border: 0px;
    margin-right: 2px;
    cursor: pointer;
    user-select: none;
    appearance: none;
    text-decoration: none;
    font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, Poppins;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    padding: 0px;
    min-width: 0px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
    border-radius: 5px;
    height: 10px;
    line-height: 10px;
    vertical-align: middle;
    width: 21px;
    min-height: 24px;
    background-color: #f5005725;
    color: #f50057;
    border: 0;
}

.tbl-btn-danger:hover,
.tbl-btn-danger.focus:hover,
.tbl-btn-danger:focus,
.tbl-btn-danger:active {
    background-color: #f50057;
}

.tbl-btn-success,
.tbl-btn-success.focus {

    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: 0px;
    border: 0px;
    margin-right: 2px;
    cursor: pointer;
    user-select: none;
    appearance: none;
    text-decoration: none;
    font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, Poppins;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    padding: 0px;
    min-width: 0px;

    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
    border-radius: 5px;
    font-size: 0.65rem;
    height: 10px;
    line-height: 10px;
    vertical-align: middle;
    width: 21px;
    min-height: 24px;
    background-color: #dcfadc;
    color: #026102;
    border: 0;
}

.tbl-btn-success:hover,
.tbl-btn-success.focus:hover,
.tbl-btn-success:focus,
.tbl-btn-success:active {
    background-color: #026102;
}

.tbl-btn-success.btn-icon,
.tbl-btn-danger.btn-icon {
    padding: 1 !important;
}

.tbl-btn-success>a>i,
.tbl-btn-danger>a>i {
    padding-top: 2px;
}


/* TABLE BUTTONS WITH ICONS  */



/* Table Header */
/* #f7dfe7  #92000c*/






/* When the switch is toggled on, change the background color of the slider and move the slider to the right */
input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Show/hide the element when the switch is toggled */
input:checked~#showHideInvoice,
input:checked~#showHideEstimate {
    display: block;
}




/* ======================================================================================================================= */