/*@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap');*/


/*@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
.spacer {
    margin-top: 80px;
}

li {
    list-style: none;
}

p,
ul,
h4 {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none!important;
}

body {
    /*font-family: 'Mulish', sans-serif !important;*/
    font-family: 'Noto Sans', sans-serif !important;
    font-weight: 500;
}

h5 {
    font-size: 1.25rem;
    font-weight: 400!important;
}

p {
    font-size: 13px;
    /*color: #73788b;*/
    font-weight: 400;
}

.page-item.active .page-link {
    background-image: linear-gradient(45deg, #007aff, #416c9b);
    border-image: linear-gradient(45deg, #007aff, #416c9b);
}

.main_layout {
    padding: 0px;
}

.card-header {
    padding: 10px 20px;
    height: 58px;
}


/*.title{
    padding: 17px;
  }*/

.sidebar {
    background-color: #fff!important;
    width: 100px!important;
}
select {
    outline: none;
}

/*=====================bootstrap bnt hover=========================*/

a.bg-warning:focus,
a.bg-warning:hover,
button.bg-warning:focus,
button.bg-warning:hover {
    background-color: #ffbc34!important;
}

a.bg-info:focus,
a.bg-info:hover,
button.bg-info:focus,
button.bg-info:hover {
    background-color: #009efb!important;
}

a.bg-danger:focus,
a.bg-danger:hover,
button.bg-danger:focus,
button.bg-danger:hover {
    background-color: #f62d51!important;
}

a.bg-secondary:focus,
a.bg-secondary:hover,
button.bg-secondary:focus,
button.bg-secondary:hover {
    background-color: #6c757d!important;
}

a.text-danger:focus,
a.text-danger:hover {
    color: #f62d51!important;
}

a.text-secondary:focus,
a.text-secondary:hover {
    color: #6c757d!important;
}


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

table.dataTable.hover tbody tr:hover {
    background-color: #f6f6f6!important;
}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_info {
    color: #000;
}

.footer {
    /*position: absolute;
   bottom : 0;*/
    z-index: 1;
    background-color: #e1e1e1;
    color: #1e2538;
    font-weight: 500;
}

.footer {
    font-size: 13px;
    padding: 10px 30px;
}

.footer a {
    color: #1e2538!important;
    font-weight: 500;
}

.page-wrapper {
    background-color: #f5f6fa!important;
    height: 100vh;
    overflow-y: hidden;
    padding-bottom: 100px;
}

.content {
    /*padding:15px!important; */
}

.layout {
    height: auto;
    width: 100%;
}

.card {
    margin-bottom: 0!important;
    background-color: transparent;
    /*height: 100vh;*/
}

.card_margin {
    margin: 20px 0 0 20px;
}

.scroll_div {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 70px;
}

.card h4 {
    font-weight: 500!important;
}

.bg_color {
    background-color: #f5f6fa!important;
}

.card-body {
    padding: 10px;
    border: 1px #e7e3e3 solid;
    height: auto;
    background-color: #fff;
    overflow-x: hidden;
}

.title {
    font-weight: 600;
    font-size: 16px;
    color: #1e2538;
    padding: 4px;
}

.new_footer,
.new_footer a {
    color: #1e2538;
    padding: 6px 12px;
    font-weight: 500;
}

.disable_btn {
    background-color: #ebeced;
}


/*-------------------input type---------------------*/

.float-label-field {
    border: none;
    outline: none;
    position: relative;
    margin: 0 0 20px 0;
    padding: 0;
    box-sizing: border-box;
}

.float-label-field input {
    border: none;
    outline: none;
    padding-left: 20px;
    width: 100%;
    font-size: 14px;
    border: solid 1px #d6d9e5;
    height: 50px;
    border-radius: 5px;
}

.float-label-field label {
    position: absolute;
    top: 14px;
    left: 20px;
    font-weight: 400;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #73788b;
    background-color: #fff;
}

.float-label-field.focus input {
    border: solid 1px #b8bcc0;
}

.float-label-field.focus label {
    color: #5e6062;
}

.float-label-field.float label {
    opacity: 1;
    top: -8px;
    left: 10px;
    font-size: 12px;
    transition: all 0.2s ease;
    font-weight: 400;
    background-color: #fff;
    padding: 0px 5px;
}

.float-label-field input:hover {
    border-color: #000;
}

.float-label-field:hover label {
    color: #000;
}


/*-------------------input type end---------------------*/


/*-------------------input type select ---------------------*/

.float-label-field {
    border: none;
    outline: none;
    position: relative;
    margin: 0 0 20px 0;
    padding: 0;
    box-sizing: border-box;
}

.float-label-field select,
.float-label-field textarea {
    border: none;
    outline: none;
    padding-left: 20px;
    width: 100%;
    font-size: 14px;
    border: solid 1px #d6d9e5;
    height: 50px;
    border-radius: 5px;
}
.float-label-field textarea {
    padding-top: 10px;
}

.float-label-field label {
    position: absolute;
    top: 14px;
    left: 20px;
    font-weight: 400;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #73788b;
    background-color: #fff;
    padding-right: 30px;
}

.float-label-field.focus select,
.float-label-field.focus textarea {
    border: solid 1px #b8bcc0;
}

.float-label-field.focus label {
    color: #464849;
}

.float-label-field.float label {
    opacity: 1;
    top: -8px;
    left: 10px;
    font-size: 12px;
    transition: all 0.2s ease;
    font-weight: 400;
    background-color: #fff;
    padding: 0px 5px;
}

.float-label-field select:hover,
float-label-field textarea:hover {
    border-color: #000;
}

.float-label-field:hover label {
    color: #000;
}

textarea {
    rightesize: none;
}


/*-------------------input type select end---------------------*/

.body-padding {
    /*padding: 10px;*/
}

.col-lg-4,
.col-md-4 {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
}

.buttons a {
    padding: 5px 20px;
    width: 100px;
    outline: none!important;
    font-weight: 500;
}

.cancel_btn {
    border: 1px solid #7b849e;
    color: #7b849e;
    background-color: transparent;
}

.save_btn {
    border: 1px solid #007aff;
    color: #fff!important;
    background-color: #007aff;
}

.save_btn:hover {
    background-color: #106ed5;
}

.cancel_btn:hover {
    background-color: #7b849e;
    color: #fff!important;
}

.sub_title {
    font-size: 13px;
    font-weight: normal;
}

.plus_btn,
.minus_btn {
    font-size: 26px;
}

.card-header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}


/*-------------------scroll bar-------------------*/

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(209, 209, 209);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/*******************************data table**************************/

.datatable-title {
    color: #73788b;
}

.addapp,
.addemployee_btn,
.addshift,
.addshift2,
.updateshift,
.addleave,
.addgroup,
.addaccount,
.addsuggestion,
.addholiday,
.addcomplain,
.addremark {
    background-color: #007aff;
    color: #fff !important;
    padding: 10px 15px;
    font-weight: 500;
    font-size: 14px;
}

.addemployee_btn:hover {
    color: #ffff;
}

.div.dataTables_wrapper div.dataTables_length label,
.data_tables-font {
    color: #000!important;
}

table {
    font-size: 13px;
}

thead tr th {
    background-color: #fafafb;
    color: #000;
}

.Employee_img {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: #c99;
}

.Employee_img img {
    border-radius: 50%;
}

tbody tr {
    padding: 15px 0px;
}

tbody tr td {
    color: #525356;
    font-weight: 500;
}

.border_bottom {
    border-bottom: 2px #d22 solid !important;
}

.table-striped>tbody>tr:nth-of-type(2n+1) {
    background-color: #fff!important;
    border-bottom: 2px #d22 solid !important;
}

table.dataTable.hover tbody tr:hover {
    background-color: #f6f6f6!important;
}

.fulltime_btn {
    color: green!important;
    padding: 5px;
    width: 100px !important;
    border: 1px green solid;
}

.reasign_btn,
.terminate_btn {
    background-color: #4c85cb;
    padding: 6px;
    width: 90px;
}

.terminate_btn {
    background-color: #e78b3d;
}

.probation_btn {
    color: rgb(0, 122, 255);
    padding: 5px;
    width: 100px !important;
    border: 1px rgb(0, 122, 255) solid;
}

.action_view {
    color: #000!important;
    border: 1px #000 solid!important;
}

.edit_icon,
.delete_icon {
    height: 30px;
    width: 30px;
    /*background-color: #dee2e6;*/
    color: #1e88e5;
    display: inline-block;
    font-size: 18px;
    padding-top: 2px;
}

.remove_btn {
    padding: 6px;
    border-radius: 20px;
}


/*------------toggle btn--------------*/

.switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 33px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 6px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

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


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


/*=====================bank====================*/

.bank_detail {
    height: auto;
}


/*=====================Education====================*/

#Education {
    height: 100vh;
    overflow-y: scroll;
}

#New_employee {}

.ui-datepicker-calendar {
    display: none!important;
}


/*===================================Edit Employee=====================================*/

.edit_title {
    position: relative;
    top: 30%;
    left: 0;
}

.edit_profile_bg {
    height: 70px;
    width: 70px;
    background-color: #dcdc;
    border-radius: 50%;
    position: relative;
}

.edit_profile_bg img {
    border-radius: 50%;
}

.hover_bg {
    height: 60px;
    width: 60px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    display: none;
}

.hover_edit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 18px;
}

.edit_profile_bg:hover .hover_bg {
    display: block;
}


/**********************user profile**********************/

.main_tab li {
    display: inline-block;
    padding: 0px 10px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.main_tab li a {
    color: #1e2538;
    padding: 10px 10px;
}

.main_tab li:hover>a {
    color: #007aff;
    border-bottom: 1px #007aff solid;
    background: linear-gradient(90deg, rgba(0, 122, 255, .1), rgba(0, 122, 255, 0));
}

.main_tab li:hover .sub_tab {
    display: block;
}


/*---------right side----------*/

.right_menu {
    font-size: 15px;
}

.right_icon {
    color: #73788b!important;
}

.right_icon {
    color: #1e2538;
}

.right_menu li {
    display: inline-block;
    padding: 0px 10px;
    border-left: 1px #eee solid;
}

.right_menu li:first-child {
    border-left: none;
}


/*-------------docuent----------*/

.document_border {
    height: auto;
    width: 100%;
    border: 1px dashed #007aff;
    padding: 60px 0px;
}

.document_img {
    height: 100px;
    width: 80px;
}

.user_save_btn {
    width: 100px!important;
    background-color: #007aff;
    outline: none;
    border: none;
    padding: 8px 20px;
}

.modal-header {
    background-color: #eee;
}

.modal-header p {
    font-weight: 600;
    font-size: 16px;
    color: #1e2538;
}

#tab_2,
#tab_3,
#tab_4 {
    display: none;
}

.tab_active {
    color: #007aff;
    border-bottom: 2px #007aff solid!important;
    background: linear-gradient(90deg, rgba(0, 122, 255, .1), rgba(0, 122, 255, 0));
}

.user_Emergency_Contact {
    height: auto;
}

.auto_height {
    height: auto!important;
    background-color: #cccc;
}

#tab_1,
#tab_2,
#tab_3 {
    margin-bottom: 100px;
}


/*==========================admin side=======================*/


/*.choose_file{
  padding-top: 10px;
  padding-left: 10px!important;
}
.file_title{
  font-size: 14px;
  color: #000;
  font-weight:500;
}
.document_file{
  width: 250px;
}
.document_img2{
  width: 60px;
  height:70px;
  margin-top: 40px;
}*/

.close {
    border-radius: 5%;
    /*background-color: #a0a0a0;*/
    color: #000 !important;
    font-size: 20px !important;
}

.upload_icon {
    font-size: 42px;
    margin-top: 25px;
}

.upload_selaction {
    padding: 8px 18px;
    width: 130px;
    border-color: #d6d9e5;
    outline: none;
    font-size: 16px;
}

.upload_title {
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.upload_trash {
    color: #007aff;
    font-size: 17px;
    margin-top: 17px;
}

.upload_box {
    height: 75px;
    width: 75px;
    font-size: 18px;
    color: #ccc;
    border: 1px #ccc dashed;
    border-radius: 7px;
    /*position: relative;*/
}

.upload_pluse_icon {
    margin-top: 28px;
    margin-right: 10px;
}

.choose_file>input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 50px;
    opacity: 0;
}


/*====================probation==========================*/

.probation_title {
    background-color: #fff;
}

.probation_table tbody tr td {
    vertical-align: middle;
}

.feedback-title {
    font-size: 20px;
    color: #000;
    font-weight: 500;
}

.probation_table .table th {
    border-top: none!important;
    padding: 0!important;
}

.thead td {
    color: #000!important;
    font-weight: 500;
}

.text_editor {
    width: 100%;
    height: auto;
    background-color: #f3f9ff;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child {
    padding-right: 0;
    padding-left: 0;
}

.radio_bttuns {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
}

.probation_status li span {
    font-size: 14px;
    color: #73788b;
}

.probation_chack {
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
}

.chack_lable {
    font-size: 14px;
    color: #73788b;
}

.probation_status li:hover>span,
.probation_status li:focus>span {
    color: #000!important;
}

.add_css {
    color: #000;
}

.feedback_title {
    color: #73788b;
    font-size: 16px;
    font-weight: 500;
}

.panel {
    margin-bottom: 0!important;
}


/*---------------------employee exit-----------------------*/

.form-group {
    margin-bottom: 0;
}

.exit_selection {
    color: #007aff;
    background: rgba(0, 122, 255, .1)!important;
    border: 1px #007aff solid;
}

.input_textarea {
    height: 100px!important;
}

.Exit_header {
    display: flex;
}

.Exit_header li {
    padding: 0px 5px;
}

.search_input {
    width: 150px;
}

.search_input:hover {
    width: 250px!important;
    transition: .7s;
}

.from_to {
    height: 37px;
}

.custom-select {
    border-radius: 0rem;
}

.style-input-form {
    border-radius: 5px;
    border: 1px #007aff solid!important;
    color: #007aff!important;
    font-size: 14px;
    padding: 10px;
    height: 37px;
    background: rgba(0, 122, 255, .1)!important;
}

.style-input-form:focus {
    outline: none;
}

.resoan_icon {
    font-size: 24px;
}

.rehire_btn {
    background-color: #5ab96e;
    padding: 6px;
    width: 80px;
    border-radius: 30px;
}

.resoan-noat-title {
    color: #000;
    font-weight: 600!important;
    align-items: center;
}

.resoan-note-header {
    padding: 10px 15px!important;
}

.modal-header .close {
    margin-top: 0px!important;
}


/*-----------------device------------*/

.status_btn {
    height: 20px;
    width: 20px;
    background-color: #e10b0b;
    border-radius: 50%;
}

.not_btn {
    width: 120px;
}

.device_radio {
    height: 20px;
    width: 20px;
    vertical-align: super;
}

.radio_color {
    height: 20px;
    width: 20px;
    background-color: #d23;
    border-radius: 50%;
}

label {
    margin-bottom: 0;
}

.status_available {
    background-color: #2e762e;
}

.status_remove {
    background-color: #15159d;
}

.device_status li {
    display: inline-block;
    padding: 0 15px;
}

.status_action {
    color: #e10b0b !important;
    padding: 5px;
    width: 120px;
    border: 1px #e10b0b solid;
}

.status_working {
    color: #0b2fe1!important;
    padding: 5px;
    width: 120px;
    border: 1px #0b2fe1 solid!important;
}

.action_remove {
    color: #15159d!important;
    border: 1px #15159d solid!important;
}

.action_available {
    color: #2e762e!important;
    border: 1px #2e762e solid!important;
}

.action_panding {
    color: #ffbc34!important;
    border: 1px #ffbc34 solid;
}

.action_view {
    color: #000!important;
    border: 1px #000 solid!important;
}

.pointer {
    cursor: pointer;
}


/*------------ status button-----------------*/

.device_switch,
.acc_switch,
.leave_switch,
.project_switch,
.tl_switch {
    position: relative;
    width: 400px;
    padding: 0 0rem;
}

.device_switch:before,
.acc_switch:before,
.leave_switch:before,
.project_switch:before,
.tl_switch:before {
    content: "  ";
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 3rem;
    /*background: rgba(0,0,0,.5);*/
    border-radius: 30px;
}

.switch__label,
.acc_switch__label,
.leave_switch__label,
.project_switch__label,
.tl_switch__label {
    display: inline-block;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    transition: color 200ms ease-out;
    font-size: 16px;
    color: #000;
    font-weight: 400;
}

.switch__label:hover,
.acc_switch__label:hover,
.leave_switch__label:hover,
.project_switch__label:hover,
.tl_switch__label:hover {
    color: #007aff!important;
}

.switch__indicator {
    height: 5px;
    position: absolute;
    top: 30px;
    left: 8px;
    background: blue;
    /*border-radius: 50%;*/
    transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
    transform: translate3d(10px, 0, 0);
}

.device_switch input#one:checked~.switch__indicator {
    width: 20px;
    background: gray;
    transform: translate3d(2.2rem, 0, 0);
}

.device_switch input#two:checked~.switch__indicator {
    width: 68px;
    background: #2e762e;
    transform: translate3d(4.9rem, 0, 0);
}

.device_switch input#three:checked~.switch__indicator {
    width: 63px;
    background: #15159d;
    transform: translate3d(10.6rem, 0, 0);
}

.device_switch input#four:checked~.switch__indicator {
    width: 92px;
    background: #e10b0b;
    transform: translate3d(15.9rem, 0, 0);
}

.device_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked,
.acc_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked,
.leave_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked,
.project_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked,
.tl_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked {
    display: none;
}

.lable_active {
    color: #007aff;
    font-weight: bold;
}

.device_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked,
.acc_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked,
.leave_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked,
.project_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked,
.tl_switch input[type=radio]:not(:checked),
.switch input[type=radio]:checked {
    display: none!important;
}

.device_switch input[type=radio],
.acc_switch input[type=radio],
.leave_switch input[type=radio],
.project_switch input[type=radio],
.tl_switch input[type=radio] {
    display: none;
}


/*-------------------our team-------------------*/

.team_bg {
    height: 100px;
    width: 90px;
    margin: auto;
    /*background-color: #ccc;*/
    /*padding: 10px;*/
}

.team_image li {
    display: inline-block;
    width: 12%;
    margin: 15px 0px;
}

.employee_name {
    font-size: 14px;
    text-align: center;
}


/*-----------------Status Report Mails-----------------*/

.report_box,
.team_report_box,
.team_report_box_2 {
    height: 240px;
    width: 100%;
    /*overflow: auto;*/
    border-radius: 25px 0px 25px 0px;
    border: 1px #1a283a solid;
    border-bottom: 1px #1a283a solid;
    background-color: #fff;
}

.report_box_2 {
    height: 240px;
    width: 100%;
    /*overflow-y: auto;*/
    border-radius: 0 25px 0 25px;
    /*border-right: 1px #1a283a solid;*/
    border: 1px #1a283a solid;
}

.report_box_2 p,
.report_box p,
.team_report_box p,
.team_report_box_2 p
{
    padding-top: 7px;
}

.shift {
    height: 40px;
    width: 40px;
    background-color: #1a283a;
    /*border:1px #fff solid!important;*/
    color: #fff;
    border: none;
}

.send_btn {
    width: 100%;
    height: auto;
}

.ctn-btn {
    border: 1px solid #1e60a8!important;
    color: #fff!important;
    display: block;
    background: #1e60a8!important;
    font-size: 18px;
    font-weight: 600;
    width: 120px!important;
    margin-left: auto;
    padding: 4px 20px;
}

.cnl-btn {
    border: 1px solid #ec4242!important;
    color: #fff!important;
    display: block;
    background: #ec4242!important;
    font-size: 18px;
    font-weight: 600;
    width: 120px!important;
    padding: 4px 20px;
}


/*----------------------holiday--------------------*/

.holiday_icon {
    height: 36px;
    width: 36px;
    background: #7b849e;
    border-radius: 50%;
}

.more_link {
    color: #007aff!important;
}

.add_date {
    height: auto;
    width: 100%;
    padding: 0 15px;
    display: none;
}

.time_icon {
    font-size: 30px;
    color: #e10b0b;
}


/**************************************/

.drop-down {
    position: relative;
}

.button {
    position: relative;
    z-index: 1;
    cursor: pointer;
    background: #f6f6fa;
    border: 1px solid #a8a6bd;
    height: 1.5rem;
    width: 6rem;
    border-radius: 0.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #a8a6bd;
    transition: 0.3s all ease;
    font-family: "Roboto", sans-serif;
}

.button>* {
    cursor: pointer;
}

.button.active .icon {
    transform: rotate(180deg);
}

.button.active+.options {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

.button.selected {
    color: #577bf9;
}

.button:hover {
    border-color: #577bf9;
}

.button .label-text {
    font-size: 0.6rem;
}

.button .icon {
    display: flex;
    flex-direction: column;
    font-size: 0.4rem;
    transition: 0.2s all ease;
}

.options {
    position: absolute;
    top: 1.6rem;
    list-style-type: none;
    width: 100%;
    border: 1px solid #a8a6bd;
    border-radius: 0.2rem;
    font-size: 0.6rem;
    color: #151542;
    overflow: hidden;
    transition: all 0.2s ease-in;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
}

.options .option {
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    transition: background, color 0.3s ease;
}

.options .option:hover {
    color: #577bf9;
    background: #e8edff;
}


/*===================shift-setting====================*/

.btn-sm {
    padding: 2px 5px;
    font-size: 11px;
}

.info_icon {
    font-size: 20px;
    vertical-align: bottom;
}

.shift_title {
    font-size: 16px;
    font-weight: 500;
}

.day_box {
    height: 32px;
    width: 32px;
    background: #f5f6fa;
    border: 1px solid #d6d9e5;
    padding-top: 5px;
    color: #73788b;
    font-size: 15px;
    font-weight: 400;
}

.day_box:hover,
.day_box:focus {
    background: #007aff;
    color: #fff;
}

.day_main li {
    display: inline-block;
    padding: 0 5px;
}

.input_time {
    width: 300px;
    height: 45px;
    padding: 0 20px;
    background-color: #f5f6fa;
    border: 1px #d6d9e5 solid;
}

.time_lable {
    font-size: 15px;
    color: #000;
    font-weight: 400;
    align-self: center;
    width: 100px;
}

.copy_bg {
    height: 32px;
    width: 32px;
    /*background: #1a283a;*/
    border-radius: 50%;
    align-self: center;
    color: #007aff;
    font-size: 18px;
    font-weight: bold;
    padding-top: 3px;
}

.copy_bg:hover {
    background-color: rgba(0, 122, 255, .15);
}

.week_table {
    border-color: #d6d9e5;
}

.week_table th {
    width: 200px;
}

.week_table tr {
    text-align: center;
}

.week_table tr th {
    padding: 15px;
    font-size: 16px;
}

.week_table tr td {
    padding: 15px;
    color: #000;
    font-weight: 400;
}

.copy_box {
    font-size: 20px;
    color: #007aff;
    align-self: center;
}

copy_box:hover {
    cursor: pointer;
}

.week_chack_box {
    height: 20px;
    width: 20px;
    vertical-align: middle;
}

.week_selection {
    padding: 5px;
    margin-left: 10px;
    outline: none;
    border-color: #d6d9e5;
}

.time_selectore {
    font-size: 13px;
    width: 100%;
    display: flex;
}

.time_selectore span {
    width: 63px;
    vertical-align: middle;
}

.week_time {
    border: none;
}

.input_icon {
    font-size: 20px;
    color: #73788b;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.grace_input {
    outline: none;
    border: 1px #ddd solid;
    height: 40px;
    width: 100px;
    padding: 10px;
    margin: 0 10px;
}

.grace_label {
    color: #73788b;
    font-weight: 400;
    font-size: 15px;
}

.grace_check {
    height: 20px;
    width: 20px;
    vertical-align: middle;
}

.grace_lable_2 {
    color: #1e2538;
    font-size: 15px;
}

.radio_info {
    color: #73788b;
    font-size: 20px;
    vertical-align: middle;
}

.calendar-table {
    display: none;
}

.effect_btn {
    background: #007aff;
    color: #fff;
}


/*--------------------------coustem check box-------------------------*/

.week_checkbox {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.week_checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    vertical-align: middle;
}

.checkmark {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 1px #6c6c6c solid;
    border-radius: 3px;
}

week_checkbox:hover input~.checkmark {
    background-color: #ccc;
}

.week_checkbox input:checked~.checkmark {
    background-color: #2e762e;
    border-color: #2e762e;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.week_checkbox input:checked~.checkmark:after {
    display: block;
}

.week_checkbox .checkmark:after {
    left: 6px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


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


/*DASHBOARD*/


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


/*--------------------------coustem check box-new-------------------------*/

.demo_box {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.demo_box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    vertical-align: middle;
}

.checkmark_2 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 32px;
    width: 32px;
    background: #f5f6fa;
    border: 1px solid #d6d9e5;
    border-radius: 3px;
    padding-top: 5px;
    color: #73788b;
    font-size: 15px;
    font-weight: 400;
}

demo_box:hover input~.checkmark_2 {
    background-color: #ccc;
}

.demo_box input:checked~.checkmark_2 {
    background-color: #007aff;
    border-color: #007aff;
    color: #fff;
}

.checkmark_2:after {
    content: "";
    position: absolute;
    display: none;
}

.demo_box input:checked~.checkmark_2:after {
    display: block;
}

.checkmark_2:hover {
    background: #007aff;
    color: #fff;
}


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


/*DASHBOARD*/


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

.dash_card_1 {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg, #416c9b, #007aff);
    padding: 40px;
}

.user_img {
    height: 70px;
    width: 70px;
    background-color: #d66;
    border-radius: 50%;
    outline: 1px #fff dashed;
    outline-offset: 3px;
}

.user_img img {
    border-radius: 50%;
}

.dash_title p {
    font-size: 18px;
    font-weight: 400;
}

.dash_time_box {
    padding: 25px 35px;
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, hsla(0, 0%, 100%, .6) 0, hsla(0, 0%, 100%, .01) 40%, hsla(0, 0%, 100%, .01) 61%, hsla(0, 0%, 100%, .6));
    border-image-slice: 1;
    width: 100%;
    height: auto;
    background: hsla(0, 0%, 100%, .2);
}

.dash_box_title {
    background: -webkit-linear-gradient(45deg, #007aff, #416c9b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.current_time {
    height: auto;
    width: 50%;
    padding: 3px;
}

.right_border {
    border-right: 2px #fff solid;
}

.clock_in_box,
.tack_box,
.tack_submit_box,
.over_submit_box,
.tack_break_box,
.over_submit_box,
.tack_break {
    height: 100%;
    width: 99%;
}


/*.tack_box , .tack_submit_box , .over_submit_box , .tack_break_box , .over_submit_box , .tack_break{
  display: none;
}*/

.in_btn {
    width: 100%;
    outline: none;
    background-image: linear-gradient(45deg, #416c9b, #007aff);
    opacity: .6;
    outline: none;
    border: none;
    padding: 12px;
    box-shadow: 0 .125rem .25rem rgba(175, 219, 175, .5)!important;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
}

.sub_cnl_btn {
    width: calc(50% - 10px);
}

.in_btn:hover {
    opacity: 1;
}

.modal-title-color {
    color: #b51b1b;
    font-weight: 600!important;
}

.dash-holiday {
    height: calc(250px - 15px);
    /*overflow-y: scroll;*/
    /*overflow-x: hidden;*/
    width: 100%;
    margin-top: 30px;
    background-color: #fff;
}

.dash-chart {
    height: 100%;
    width: 100%;
    /*background-color: #ccc;*/
}

.dash_sub_title {
    width: 100%;
    font-weight: 500!important;
    font-size: 16px;
    /*background-color: #dee2e6!important;*/
    background-image: linear-gradient(45deg, #416c9b, #007aff);
    /*opacity: .6;*/
}

.name_title {
    font-size: 15px;
    font-weight: 600!important;
    color: #000!important;
}

.dash_box_list {
    height: 80%;
    width: 100%;
    background-color: transparent;
    overflow-y: auto;
}

.dash_box_list li {
    padding: 5px 0px;
    font-weight: 500;
    color: #73788b;
    font-size: 13px;
}

.dash_main_div {
    height: 500px;
    width: 100%;
    /*background-color: #b99;*/
}

.modal-header .close {
    padding: 0!important;
    margin: 0!important;
}

.chart_bg {
    width: 100%;
    height: 455px;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    padding: 20px 15px;
    background: #fff;
    border-radius: 4px;
}

.chart_demo {
    height: 100%;
}

canvas {
    background: #fff;
    height: 455px;
}

.valid_reason {
    /*font-size: 15px;*/
    color: #73788b;
    font-weight: 400;
}

.leave_apply_text {
    text-decoration: underline!important;
}

.leave_apply_text:hover {
    color: #007aff;
}


/*=================saide bar================*/

.main_head {
    height: 100vh;
    /*width: 100px;*/
    background-color: #fff;
    padding: 10px 0px;
    overflow-y: scroll;
    /*position: relative;*/
}

.left_cantent {
    width: calc(100% - 105px);
    height: auto;
    /*background-color: #d99;*/
    margin-left: auto;
}

.company_icon {
    height: 70px;
    width: 70px;
    background-color: #fff;
    border-radius: 50%;
    margin: auto;
    /*margin: 5px 0px 10px 0px;*/
}

.company_icon img {
    border-radius: 50%;
}

.menu_icons {
    font-size: 20px;
}

.saide_bar li a p {
    font-size: 12px;
}

.saide_bar li a {
    color: #4e525f;
    display: block;
    width: 100px;
}

.saide_bar li {
    font-weight: 500;
    padding: 10px 0px;
    border-left: 3px #fff solid;
    position: relative!important;
}

.saide_bar li:hover>a,
.sub_menu li:hover>a {
    color: #007aff;
}

.sub_menu li:hover {
    color: #007aff;
    border-left: 1px #007aff solid;
    background: linear-gradient(90deg, rgba(0, 122, 255, .1), rgba(0, 122, 255, 0));
}

.saide_bar li:hover {
    border-left: 3px #007aff solid;
}

li.active {
    border-left: 3px #007aff solid;
}

li.active>a {
    color: #007aff !important;
}

.pagination li.active>a {
    color: #fff !important;
}

.sub_menu li {
    padding: 5px 10px;
    border-left: 1px #fff solid;
}

.sub_menu li a {
    color: #4e525f;
    display: block;
    width: 100%;
    padding:0px 10px;
}

.menu_bnt {
    position: absolute;
    top: 0;
    right: 20px;
    width: 15px;
    height: 15px;
    font-size: 10px;
}


/*=====================clock out modal==================*/

.clock_modal_box {
    height: auto;
    width: 100%;
    background-image: linear-gradient(45deg, #007aff, #416c9b);
}

.time_out_box {
    height: auto;
    width: 100%;
    /*background-color: #e77;*/
}

.clock_out_timing {
    font-size: 18px;
}

.clock_modal_btn {
    height: 40px;
    margin: 18px 0px 0px 0px;
}

.belove_text {
    font-size: 16px;
    background: -webkit-linear-gradient(45deg, #007aff, #416c9b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/*=====================clock out modal==================*/

.leave_count {
    color: #5ab96e;
    font-weight: 500;
}

.leave_type_btn {
    height: 20px;
    width: 20px;
    margin-top: 0px;
}

.leave_type_title {
    font-size: 16.0px;
    font-weight: 400;
}

.leave_type_lable {
    font-weight: 400;
}


/*=====================slary mangement==================*/

.table td,
.table th {
    padding: 0.75rem;
    vertical-align: middle !important;
    border-top: 1px solid #dee2e6!important;
}

.slip_bnt {
    background-color: #194781;
}

.send_slip_btn {
    /*background-color: #cd4c70;*/
}

.month_picker input {
    height: 35px;
    width: 100%;
    outline: none;
    border: 1px #e3e3e3 solid;
}


/*---------salary slip----------*/

.text-right-auto {
    text-align: right;
}

.fts-25 {
    font-size: 25px!important;
    font-weight: 600 !important;
    font-family: areal!important;
}

.vkkk>h3 {
    margin: 25px;
    margin-right: 0!important;
    margin-left: 15PX!important;
    font-family: areal!important;
}

.Address_com {
    text-align: center;
    padding-top: 9px;
}

.Address_com>h4 {
    margin: 0;
    font-size: 18px;
    font-style: normal;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'FontAwesome' !important;
    font-weight: 600 !important;
}

.Gross>h3 {
    margin-left: 0!important;
    margin-right: 15PX!important;
    font-family: areal!important;
}

.esl_font>h3 {
    font-family: areal!important;
}

.slip_DETAILS>div {
    text-align: center;
}

.slip_DETAILS>div>p {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 19px;
    font-family: areal!important;
}

.DIV_DETAILS {
    border: 3px solid #595959!important;
    border-top: none!important;
}

.dorder_right_ {
    border-right: 3px solid #595959;
}

.com_name {
    display: inline-block;
    margin: 0;
    font-size: 50px;
    font-weight: 600 !important;
    vertical-align: middle;
    font-family: 'CircularStd' !important;
}

.com_name>span {
    font-size: 25px;
}

.Working_DETAILS {
    text-align: center;
    padding-top: 9px;
}

.Working_DETAILS>h2 {
    margin: 0;
    font-weight: 600 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .com_name {
        display: inline-block;
        margin: 0;
        font-size: 31px;
        font-weight: 900;
        vertical-align: middle;
    }
    .com_name>span {
        font-size: 25px;
    }
    .slip_DETAILS>div>p {
        margin-bottom: 0;
        font-size: 15px;
        font-family: areal!important;
    }
    .Address_com>h4 {
        margin: 0;
        font-family: areal!important;
        font-size: 14px;
    }
}

.btn-salary {
    padding: 0;
    position: relative;
    border: none;
    height: 30px;
    width: 100px;
    font-size: 15px;
    border-radius: 1.5rem;
    color: #ffffff;
    background: #29b5a8;
    text-align: center;
}

.btn-salary.active {
    background-color: #dca201;
}

.btn-salary.btn-smd:before {
    content: 'Paid';
    position: absolute;
}

.btn-salary.btn-smd:after {
    content: 'Pay';
}

.btn-salary.btn-smd.btn-smd:after {
    text-align: center;
    opacity: 0;
}

.btn-salary.btn-smd.btn-smd.active:before {
    opacity: 0;
    text-align: center;
}

.btn-salary.btn-smd.btn-smd.active:after {
    opacity: 1;
    text-align: center;
}

@page {
    size: letter;
}


/*=====================Time mangement==================*/

.more_bnt {
    background-color: #007aff;
}

.report_btn {
    width: 100%;
    padding: 7px;
    background-color: #007aff;
    font-weight: 500;
}

.full_day_dot {
    background-color: #45c490;
}


/*=====================Today break==================*/

#break_table tr {
    background-color: #fff!important;
}

#break_table tr td,
#break_table tr th {
    border-color: #d6d9e5;
}


/*=====================Employee Attedence==================*/

#Employee_attendence tbody tr td {
    font-size: 12px;
}


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


/*dashboard admin*/


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


/*-------pie chart-------*/

.rnd_tittle,
.rnd_2_tittle {
    font-size: 16px;
    font-weight: 600;
}

span.rnd_title {
    font-size: 13px;
    font-weight: 600;
}

.rnd_txt,
.rnd_2_txt,
.rnd_3_txt {
    font-size: 13px;
    line-height: 25px;
}

#skills,
#skills_2,
#skills_3 {
    /*text-align: center;*/
    margin-top: 15px;
}

#skills canvas,
#skills_2 canvas,
#skills_3 canvas {
    height: 60px!important;
    width: 60px!important;
}

#skills span,
#skills_2 span,
#skills_3 span {
    position: absolute;
    top: 45%;
    left: 51%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

#skills span:after,
#skills_2 span:after,
#skills_3 span:after {
    content: '%';
}

#skills_2 span {
    left: 50%;
}


/*-------admin chart------*/

#chartOne {
    box-sizing: border-box;
    padding: 15px 0;
    width: 100%;
    height: 450px;
    background-color: #fff;
    font-size: 12px;
    margin-top: 5px;
}


/*=====================teme_report_box=============*/

.team_report_box {
    /*width: 350px;*/
    /*margin-left: auto!important;*/
}

.team_report_box_2 {
    width: 350px;
}

.status_report_bg {
    height: 100%;
    width: 100%;
    overflow: auto;
    border: none;
}


/*=====================Account====================*/

.acc_switch__label {
    padding: 10px 25px;
}

.acc_switch input#one:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(3.9rem, 0, 0);
}

.acc_switch input#two:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(8.9rem, 0, 0);
}

.acc_switch input#three:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(14rem, 0, 0);
}

.acc_switch input#four:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(19rem, 0, 0);
}


/*=====================employee_leave====================*/

.leave_switch__label {
    padding: 10px 18px;
}

.leave_switch input#one:checked~.switch__indicator {
    background: gray;
    transform: translate3d(1.8rem, 0, 0);
}

.leave_switch input#two:checked~.switch__indicator {
    background: #15159d;
    transform: translate3d(6.9rem, 0, 0);
}

.leave_switch input#three:checked~.switch__indicator {
    background: #2e762e;
    transform: translate3d(13.5rem, 0, 0);
}

.leave_switch input#four:checked~.switch__indicator {
    background: #e10b0b;
    transform: translate3d(19.9rem, 0, 0);
}

.leave_detail_title {
    font-weight: 500;
}

.remove_btn {
    padding: 8px;
    width: 120px;
    border: none;
    outline: none;
    font-size: 15px;
}


/*=====================employee_remark====================*/

.remark_em_name {
    font-size: 15px;
    /*color: #000;*/
    font-weight: 400;
}

.Remark_Description_title {
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.Remark_Description_box {
    height: auto;
    width: 100%;
    padding: 15px;
}


/*=====================employee_of_the_month====================*/

.choose_employee {
    padding-top: 10px;
}


/*=====================Privacy & Policy=========================*/

.policy_list ol li {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    padding: 9px 0px;
    line-height: 26px;
    text-align: justify;
}

.policy_title {
    font-size: 20px;
}

a.bg-success:hover {
    background-color: #55ce63 !important;
}


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


/*admin Project Task*/


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

.nav-tabs .nav-link {
    border: none;
    border-bottom: #fff 2px solid;
}

.nav-tabs {
    border-bottom: none !important;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    background-color: #fff;
    border-bottom: #007aff 2px solid;
    color: #007aff;
}


/*=====================Add Project=========================*/

.project_switch {
    width: 100%;
}

.project_switch__label {
    padding: 10px 20px;
}

.project_switch input#one:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(0.6rem, 0, 0);
}

.project_switch input#two:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(6.4rem, 0, 0);
}

.project_switch input#three:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(14.5rem, 0, 0);
}

.project_switch input#four:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(22.0rem, 0, 0)
}

.tab_C_1>a.active,
.tab_C_1>a.active:hover,
.tab_C_1>a.active:focus {
    border: 2px solid #BDD47E!important;
    color: #4caf50!important;
    background-color: #222!important;
}

.project_details_table tr th,
.project_details_table tr td {
    padding: 10px;
}

.pro_develop_btn {
    padding: 12px 20px;
}

#pro_tab_2,
#pro_tab_3,
#pro_tab_4 {
    display: none;
}

.stage_icon {
    margin-top: 2px;
    font-size: 16px;
}

.re_btn {
    height: 37px;
    width: 37px;
    margin-top: -8px;
    font-size: 18px;
    padding-top: 6px;
}


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


/*tl Project Task*/


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


/*=====================tl Add Project=======================*/

.tl_switch {
    width: 100%;
}

.tl_switch__lable {
    padding: 10px 20px;
}

.tl_switch input#one:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(0.1rem, 0, 0);
}

.tl_switch input#two:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(5.4rem, 0, 0);
}

.tl_switch input#three:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(13.6rem, 0, 0);
}

.tl_switch input#four:checked~.switch__indicator {
    background: #007aff;
    transform: translate3d(23.4rem, 0, 0);
}

.regular_dot,
.urgent_dot {
    background-color: #4c85cb!important;
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

.urgent_dot {
    background-color: #e78b3d!important;
}

.rework_btn {
    padding: 5px;
    border: 1px #f62d51 solid;
}

.resoan_icon_tl {
    font-size: 20px;
}

.tl_reason_title {
    font-size: 16px;
}

.tl_submit {
    padding: 6px 8px;
    background-color: #5ab96e;
}

.tl_notes {
    font-size: 16px;
}


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


/*tl Project Task*/


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


/*=====================tl Add Project=======================*/

.tester_btn {
    font-size: 12px;
    padding: 2px 0px;
    width: 90px;
}


/*====================notification=================*/

.notification_link {
    font-size: 15px;
}

.notification_link:hover {
    background-color: #007bff;
}

.copy_link {
    font-size: 13px;
}


/*====================Time sheet=================*/

.time_sheet_bg {
    height: 300px;
    width: 100%;
    background-color: #fff;
    position: relative;
}

.time_img {
    height: 85px;
    width: 85px;
    border-radius: 50%;
    /*background-color: #c26;*/
}

.time_img img {
    border-radius: 50%;
}

.ts_detail {
    height: auto;
    width: 100%;
}

.ts_title {
    font-size: 17px;
}

.ts_dot {
    position: absolute;
    top: 5px;
    right: 5px;
}

.ts_work_detail {
    font-size: 14px;
}

.ts_app_name {
    width: 65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*====================App report=================*/

.report_bg {
    height: auto;
    width: 100%;
    border-radius: 20px;
}

.app_report_bg {
    height: 410px;
    width: 100%;
    background-color: #789;
}


/*====================ware hous=================*/

.free_btn {
    padding: 5px;
    border: 1px #009efb solid;
    color: #009efb;
}

.free_btn:hover,
.free_btn:focus {
    color: #009efb;
}

.warning_btn {
    padding: 5px;
    border: 1px #ffbc34 solid;
    color: #009efb;
}

.warning_btn:hover,
.warning_btn:focus {
    color: #ffbc34;
}

.fault_title {
    font-size: 24px;
    color: #000;
}


/*====================Project Dashboard=================*/

.pd_box_1,
.pd_box_2,
.pd_box_3,
.pd_box_4 {
    /*height: 130px;*/
    width: 80%;
    height: 80px;
    padding: 7px;
    border: 1px #009efb solid;
    background-color: #e4f5ff;
}

.pd_sub_box,
.pd_sub_box_2,
.pd_sub_box_3,
.pd_sub_box_4 {
    width: 100%;
    height: 100%;
    background-color: #009efb;
    /*padding-top: 7px;*/
    display: flex;
}

.pd_box_title {
    font-size: 20px;
    opacity: .8;
    width: 50%;
    align-self: center;
}

.pd_box_maintitle {
    font-size: 30px;
    width: 50%;
    align-self: center;
}

.pd_box_2 {
    border: 1px #45c490 solid;
    background-color: #e6fbf0;
}

.pd_sub_box_2 {
    background-color: #45c490;
}

.pd_box_3 {
    border: 1px #3ec0cd solid;
    background-color: #e0f2f5;
}

.pd_sub_box_3 {
    background-color: #3ec0cd;
}

.pd_box_4 {
    border: 1px #f98282 solid;
    background-color: #fde9e9;
}

.pd_sub_box_4 {
    background-color: #f98282;
}

.pd_live_btn,
.pd_pending_btn,
.pd_suspend_btn {
    border: 1px #5ab96e solid;
    border-radius: 10px;
    font-size: 10px;
    padding: 1px 4px;
    color: #5ab96e;
}

.pd_table_bg {
    height: 100vh;
    width: 100%;
    padding-bottom: 60px;
}

.pd_part_1 {
    height: 30%;
    width: 100%;
    overflow-y: scroll
}

.pd_part_2 {
    height: 70%;
    /*background-color: #ccee; */
    overflow-y: scroll;
}

.pd_pending_btn {
    border: 1px #3ec0cd solid;
    color: #3ec0cd;
}

.pd_suspend_btn {
    border: 1px #f98282 solid;
    color: #f98282;
}

/*===============================================/ /login form design/ /===============================================*/ 
.log_in_bg {
    height: 100vh;
    width: 100%;
    background-color: #fff;
}

.login_part_1 {
    height: 100vh;
    width: 70%;
    /*background-color: #5d32;*/
    position: relative;
}

.login_part_2 {
    height: 100vh;
    width: 30%;
    background-color: #2d3d52;
    padding: 40px 20px;
    position: relative;
}

.login_logo {
    height: 120px;
    width: 350px;
    /*background-color: #d289;*/
    border-radius: 100%;
    margin: auto;
}

.login_position {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

.login_title {
    font-size: 28px;
}

.login_sub_title {
    font-size: 14px;
}

.login_footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3d5676;
    padding: 12px;
}

.login_main_bg {
    height: auto;
    width: 500px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login_label_name {
    font-size: 15px;
}

.login_input_box {
    height: 50px;
    font-size: 14px;
}

.login_submit {
    background-color: #2d3d52;
}

.tooltip_btn{
    height:25px;
    width: 25px;
    background-color: #fff;
    text-align: center;
    padding-top: 3px;
    position: relative;
}
.tooltip_btn:hover .tooltip_box{
    display: block;
    cursor: pointer;
}
.tooltip_box{
    height: 50;
    width: 280px;
    background-color: #000;
    position: absolute;
    top: 100%;
    left: 0%;
    display: none;
}
.captcha_btn .in_btn{
    opacity: 1;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.c_num_btn{
    width: 100%;
    border:2px #406c9c solid;
    outline: none;
    color: #406c9c;
}
.c_num_btn:focus{
    border:2px #406c9c solid;
    outline: none;
}
@media only screen and (max-width: 1439px)
{
    .card-header {
        height: auto;
    }
}
.table {
    width: 100%!important;
}

.device_false {
    height: 28px;
    width: 28px;
    border: 1px #f62d51 solid;
    color: #f62d51;
    display: block;
    font-size: 18px;
    text-align: center;
}

.rework_btn {
    padding: 5px;
    border: 1px #f62d51 solid;
}