*{

    margin: 0;

    box-sizing: border-box;

}

/*** main  ***/

.main{

    display: flex;

    flex-direction: column;

    width: 100%;

}



/*** common class for all ***/

/* swetalert for increse size */
.swal2-popup {
    font-size: 1.5rem !important;
  }
  .swal2-title
  {
  font-size:1.5em !important;
  }

/* show password option  */

span.fa.toggle-password {

    position: absolute;

    top: 81%;

    right: 4%;

}

.btn:focus {

    outline: thin dotted;

    outline: 0px;

    outline-offset: 0px;

}

input[type="date"] {

    position: relative;

    padding: 10px;

  }

  

  input[type="date"]::-webkit-calendar-picker-indicator {

    color: transparent;

    background: none;

    z-index: 1;

  }

  

  input[type="date"]:before {

    color: transparent;

    background: none;

    display: block;

    font-family: 'FontAwesome';

    content: '\f073';

    

    width: 13px;

    height: 22px;

    position: absolute;

    top: 1px;

    right: 8px;

    color: rgba(0, 0, 0, 0.616);

  }



  h3{

    font-size: 20px;

    background-color: #3b3977;

    margin: 0;

    padding: 15px 10px;

    color: white;

}

h5{

    font-weight: bolder;

}



 /*** login form ***/ 

 #message {

    display: block;

    width: 100%;

    background-color: red;

    color: white;

    padding: 10px 66px;

    margin-top: 3%;

}

#login_conatiner {

    width: 100%;

    height: 100vh;

     background: url('https://images.pexels.com/photos/176851/pexels-photo-176851.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');

    transition: 0.4s linear;

  }

  .box span.fa.toggle-password, .box span.fa.toggle-password_login  {

    position: absolute;

    top: 26%;

    right: 6%;

}

  .box {

    width: 400px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: white;

    padding: 40px;

    box-sizing: border-box;

    box-shadow: 0px 15px 25px rgba(0, 0, 0, .5);

    border-radius: 10px;

  }

  

  .box h2 {

    margin: 0 0 30px;

    padding: 0;

    color: #fff;

    text-align: center;

  }

  

  .box p {

    margin-bottom: 0;

  }

  

  .box p:nth-child(even) {

    margin-top: 0;

  }

  

  .box a {

    font-size: 14px;

    text-decoration: none;

  }

  

  .box .input-box {

    position: relative;

  }

  

  .box .input-box input {

    width: 100%;

    padding: 10px 10px;

    font-size: 16px;

    margin-bottom: 30px;

    color: black;

    border: 1px solid #fff;

    border: none;

    border-bottom-style: solid;

    outline: none;

    letter-spacing: 1px;

    background: transparent;

  }

  

  .box .input-box label {

    position: absolute;

    color: black;

    top: 0;

    left: 0;

    padding: 10px 0;

    font-size: 16px;

    pointer-events: none;

    transition: .5s;

  }

  

  .box .input-box input:focus ~ label,

  .box .input-box input:valid ~ label{

    top: -33px;

    left: 0;

    color: #fe8004;

    font-size: 12px;

  }

  

  .box input#login_submit_btn {

    background: transparent;

    border: none;

    outline: none;

    background: #3b3977;

    color: #fff;

    padding: 10px 20px;

    margin-top: 3%;

    cursor: pointer;

    border-radius: 5px;

  }

  

  .box .input-box1 {

    display: flex;

    justify-content: flex-start;

    align-items: stretch;

    margin: 4% 0%;

    }

    .box .input-box1 input[type="checkbox"] {

        height: 20px;

        width: 18px;

        margin: 2px 0px;

    }

    .box .input-box1 span.remember_me_text {

        margin-left: 3%;

        color: black;

        font-size: 18px;

        text-transform: capitalize;

    }

/*** header page ***/

.header {

    width: 100%;

    display: flex;

    flex-direction: row;

    color: black;

    justify-content: flex-start;

    background: #d8710c;

}

.logo {

    background: #fff;

    width: 15%;

    padding: 5px 25px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.logo img {

    width: 100%;

    height: 80%;

    align-items: center;

    object-fit: contain;

}

.header_mid {

    width: 85%;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

}

.page_name {

    width: 30%;

   color: white;

   padding-left: 3%;

}

 .page_name p{

    color:white;

}

.profile img {

    width: 40px;

    height: 40px;

    object-fit: cover;

    vertical-align: middle;

    border-radius: 50%;

}

.profile {

    padding: 0px 0px 0px 47%;

    color: white;

    position: relative;

    display: inline-block;

}.header_mid .profile i{

    margin-left: 6px;  

}

.header_mid .profile p{

    display: inline;

    cursor: pointer;

}

.dropdown{

    position: relative;

    padding-left: 5px;

    display: inline-block;

}

.dropdown .btn-info {

    color: white;

    background-color: transparent;

    border-color: transparent;

}

.dropdown-content {

    display: none;

    position: absolute;

    background-color: white;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);

    z-index: 1;

}

.dropdown-content a{

    color: black;

    padding: 10px;

    display: block; 

    text-decoration: none;

}

.dropdown-content a:hover {background-color:green;color: white;}



.dropdown:hover .dropdown-content {display: block;}





/*** sidebar + main content ***/

.sub_main {

    width: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    min-height: 796px;



}

/*** sidebar   ***/

.sidebar {

    margin: 0px;

    padding: 0px;

    width: 15%;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    border-right: 1px solid silver;

    background: #3b3977;

}

.sidebar ul{

    padding-top:15%;

}

ul .active i,ul .active a{

    color:#d8710c;

}



.sidebar ul .nav-item{

    padding:3% 10%;

}

 .sidebar .nav-item{

  list-style-type: none;

}

.sidebar a{

    text-decoration: none;

    color: white;

}



/*** footer ***/

.container_footer {

    width: 100%;

    background-color: #fe8004;

    height: fit-content;

    text-align: center;

    color: white;

    padding: 30px;

}

/*** common divs for body content ***/

.content ,.main_content{

    display: flex;

    width: 85%;

    flex-wrap: wrap;

    height: fit-content;

   

}



/*** dashboard page ***/

.content_dashboard{

    background-color:#c0c0c01f ;

}

.dashboardbirthday , .dashboard_holidays{

    width: 85%;

    display: flex;

    padding: 0;

    flex-direction: column;

    height: 300px;

}

.upcoming_bdays,.holidays_dates {

    overflow-y: scroll;

    overflow-wrap: break-word;

    height: 300px;

}

.display_upcoming_bd {

    width: 100%;

    display: flex;

    margin: 10px 0px;

}.upcoming_bd_img {

    padding: 10px 0px;

    width: 16%;

    margin-right: 10px;

}.upcoming_bd_img img {

    width: 62%;

    border-radius: 50%;

    float: right;

}

.upcoming_bd_username {

    padding: 6px 0px;

}.display_holidays {

    width: 81%;

    margin: 5% auto;

}p.holiday_title {

    display: inline;

    color: #19b4ef;

    font-size: 15px;

}


.fc .fc-toolbar > * > * {

    float: left;

    margin-left: 0;

}

/* todays .attendance */

.attendance {

    display: inline-block;

    width: 60%;

    min-height: 280px;

    margin: 2% 0% 0% 5%;

    text-transform: capitalize;

    flex-direction: row;

    flex-wrap: wrap;

    background-color: white;

}.record_att h3

.Todays_attendance {

    width: 100%;

}

.att_current {

    float: left;

    width: 65%;

    padding: 0px 0px 0px 10px;

    display: flex;

    flex-direction: column;

}.att_current .text-black{

    min-width: 44%;

    max-width: 55%;

    border-radius: 3px;

}

.att_comments {

    width: 30%;

    display: flex;

    flex-direction: column;

}

.att_comments .user_comment{

    overflow-y: scroll;

    overflow-wrap: break-word;

    height: 120px;

}

/* record .attendance */

.record_att {

    display: flex;

    width: 27%;

    margin: 2% 0% 0% 3%;

    color: black;

    font-weight: bolder;

    flex-direction: column;

    background-color: white;

    height: 280px;

}

.record_attendance_body {

    width: 100%;

    padding: 10px 30px;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

}

.record_att_content {

    width: 100%;

    padding: 1% 0% 0% 8%;

}

.record_att_content #comments_inputsubmit {

    margin-bottom: 4px;

    height: 33px;

}

.record_att_content #comments_inputtext {

    background: white;

    border: 1px solid silver;

    width: 67%;

    padding: 4px 8px;

}

.record_att_btn1 {

    width: 100%;

    padding: 8% 0% 10% 0%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-content: center;

}

.record_att_btn2 {

    width: 100%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

}

.record_att_btn1 .btn, .record_att_btn2 .btn {

    min-width: 30%;

    margin: 0% 8%;

}

.btn[disabled]{

    opacity: 0.5;

}



 /* dashboard calender */

.calender {

    margin: 2% 0% 2% 5%;

    width: 60%;

    background-color: white;

    height: fit-content;

}

#dashboard_calendar_view{

    padding-top: 10px ;

}

 .fc-header-toolbar {

    width: 100%;

    display: flex;

    margin: 1em auto;

    padding-left: 1%;

}   

 .fc-toolbar .fc-left {

    width: 5%;

}

 .fc-toolbar .fc-right {

    width: 35%;

}

 .fc-toolbar .fc-right h2 {

    width: 100%;

}

  .fc-toolbar .fc-center {

    display: flex;

    width: 60%;

    align-items: center;

}

 .cal_header_date {

    width: 100%;

    display: flex;

    justify-content: space-between;

}

#dashboard_calendar_view .fc-view-container .fc-row.fc-week.fc-widget-content {

    min-height: 85px !important;

    height: fit-content !important;

}

span.cal_header_my {

    font-size: 30px;

    padding: 0px 40px;

    font-weight: bolder;

}

.cal_header_date span{

    padding: 0px 10px;

    margin: 0px 3px;

}.cal_header_date span.red{

    background-color:#f49a9a ;

}

.cal_header_date span.blue{

    background-color:#46b1da ;

}

.fc-header-toolbar .fc-prev-button ,.fc-header-toolbar .fc-next-button {

    background: deepskyblue;

    color: white;

    margin: 0px 10px;

}

.fc-scroller.fc-day-grid-container {

    height: fit-content !important;

    overflow: hidden;

}

td.fc-highlight {

    width: fit-content;

}

.fc-body td{

    width: fit-content;

}

.fc-bg .fc-today.fc-widget-content.fc-state-highlight {

    background: #8baf6fe6;

}

td.fc-sun {

    background:#f49a9a ;

     color: white ;

}.fc-week:nth-child(1) .fc-sat,.fc-week:nth-child(3) .fc-sat{

    background-color:#f49a9a ;

    color: white !important;

}

.fc-other-month {

    background: white !important;

    color: #372121 !important ;

}



/* .birthday & holiday */



.holidays {

    margin: 35px 0px;

    background: white;

}

.birthday {

    background: white;

}

.holiday_bday {

    margin: 2% 0% 0% 3%;

    width: 27%;

    height: fit-content;

}

.birthday .upcoming_bdays,.holidays .holidays_dates{

    overflow-y: scroll;

    overflow-wrap: break-word;

    height: 260px;

}



/*** edit profile page ***/



/* content1 */

.content1 {

    display: flex;

    background-color: #e4e9e952;

    width: 20%;

    border-collapse: collapse;

    flex-direction: column;

}

.c1  {

    width: 100%;

    text-transform: capitalize;

    background: transparent;

    padding: 7% 5%;

   

}.content1 .c1:hover,.content1 .active_profile {

    background-color: silver;

    color:black;

}.c1  a{

    text-decoration: none;

    color: black;

}



/* content 2 */

.content2 {

    display: flex;

    width: 65%; 

    flex-direction: row;

    flex-wrap: wrap;

    align-content: flex-start;

    

}

.content2 a.btn-success,.content2 input.btn-success,.content2 input.btn-info{

    background:#d8710c !important;

    border-color:#d8710c  !important;

}



.profile_div {

    background:#e4e9e9;

    width: 100%;

    height: fit-content;

}

.profile_div .btn-success {

    color: #fff;

    background-color: #5cb85c;

    border-color: #4cae4c;

    margin: 20px;

}



 /* common classs in forms*/

 .update_btn_form{

    margin: 3% 0% 4% 45%;

}

label {

    text-transform: capitalize;

    display: inline-block;

    max-width: 100%;

    margin-bottom: 5px;

    font-weight: 700;

}

textarea{

    resize: vertical;

}form .update_message_1,form .update_message_2,form .update_message_3,form .update_message_4,form .update_message_5,form .update_message_6 {

    display: none;

    background: #d8710c;

    padding: 10px;

    color: white;

    text-align: center;

}label.error{

    color: red;

    display: block;

}form .form-group {

    position: relative;

    margin: 1% 6%;

}

/* basic info form */



#basic_info_form {

    width: 50%;

    margin: 4% 3%;

    border: 1px solid;

    height: fit-content;

}

#profile_photo {

    height: fit-content;

    display: flex;

    width: 35%;

    border: 1px solid;

    margin: 4% 3%;

    flex-direction: row;

    flex-wrap: wrap;

}

#profile_photo .photo {

    padding: 1% 2% 5% 2%;

    width: 100%;

}

.photo img {

    border-radius: 50%;

    display: flex;

    margin: 3% auto;

    width: 225px;

    height: 220px;

    object-fit: cover;

    margin-bottom: 20px;

}.file_show {

    position: relative;

    margin: 3% auto;

    overflow: hidden;

    border-radius: 50%;

    width: 230px;

    height: 230px;

}span#image_file_span{

    position:absolute;

    left: 0;

    top: 0;

    width: 230px;

    height: 230px;

}i.fa-solid.fa-user-pen {

    display: block;

    position: absolute;

    opacity: 1;

    color: black;

    text-align: center;

    font-size: 50px;

    z-index: 0;

    bottom: -14%;

    left: 3%;

    line-height: 300px;

    width: 100%;

}

span input[type=file] {

    display: block;

    width: 230px;

    height: 230px;

    line-height: 200px;

    opacity: 0;

    position: relative;

    z-index: 9;

}.file_show .upload_file_image{

    position:absolute;

    z-index: 0;

    border: 1px solid black;

    width:230px;

    height: 230px;

    border-radius: 50%;

    opacity: 0.4;

    margin: 0;

}.photo .btn-danger,.photo_upload .btn-danger {

    margin-right: 20px;

    margin-left: 32%;

}

.photo_header {

    width: 100%;

    height: fit-content;

    color:white;

}#label_maritial_status{

    display: block;

} input[type=range] {

    display: inline;

    width: 7%;

}

#basic_info_form_id label {

    display: block;

    margin-top: 2%;

}

/* contact form */

#contact_form {

    margin: 4% auto;

    border: 1px solid;

    width: 70%;

}.form-group{

    margin: 3% 6%;

}

#contact_info_form_id label {

    margin-top: 2%;

}



/* social network form */



#social_network_form{

    margin: 4% auto;

    border: 1px solid;

    width: 70%;

}

#social_network_form form .form-group {

    margin: 2% 6%;

}



/***  profile view page ***/

.profile_content1 {

    display: flex;

    background-color: #e4e9e952;

    width: 20%;

    border-collapse: collapse;

    flex-direction: column;

}.profile_content1_first {

    display: flex;

    margin: 30px 10px;

    flex-direction: column;

}

.profile_content1_first img {

    height: 43%;

    border: 1px solid;

    margin-bottom: 20px;

}

.profile_content1_first a#edit_profile_btn{

    color: #fff;

    background-color: #d8710c;

    border-color: #d8710c;

}

.profile_content2 {

    display: flex;

    width: 80%;

    flex-direction: column;

    text-transform: capitalize;

    flex-wrap: wrap;

}

.profile_content2_first {

   

    display: flex;

    flex-direction: row;

    justify-content: space-around;

    border-bottom: 2px solid blue;

}

.profile_content2_first a{

    text-decoration: none;

    color: black;

    text-transform: capitalize;

}

.profile_table{

    table-layout: fixed;

    width: 50%;

    padding: 10px 10px 10px 20px;

}

.profile_table tr, .profile_table td {

    padding: 10px 20px;

    color:#9f9292;

}

td{

    padding: 10px 10px;

}

.profile_table  table td,.profile_table  table th{

   width: 250px;

   padding: 10px;

}

table{

    table-layout: fixed;

}tbody{

    width: 100%;

}

tr , td{

    overflow-wrap: break-word;

    width: 50%;

    text-align: left;

}

table .td_email{

    color: blue;

}

/* status in table is avtive or not */

.is_active_green{

    background-color: green;

    color: white;

}

.is_active_red{

    background-color: red;

    color: white;

}

p.profile_status.green {

    width: 40%;

    text-align: center;

}

p.profile_status.red {

    width: 40%;

    text-align: center;

}



 /*** attendance page  ***/



 .sorting{

    border-bottom: 1px solid silver;

    width: 100%;

 }.sorting input.btn-info{

    background: #3b3977 !important;

    border-color: #3b3977 !important;

 }

 .sorting input.btn-primary{

    background: #d8710c !important;

    border-color: #d8710c !important;

 }

 .sorting .form-group{

    width: 40%;

    display: flex;

    margin: 1% 5% ;

 }.sorting input{

    margin: 0% 2%;

 }.sorting #reset_filtered_attendance{

    margin: 0px 5px ;

 }

 .attendance_table{

    width: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

}

.attendance_table_view {

    min-height: 302px;

}.attendance_table_view  th#att_ip{

    width: 20%;

}

 .attendance_table table {

    width: 100%;

 }.attendance_table .worked_hours_span_green {

    background: #11b711;

    width: 83%;

    display: block;

    height: 5px;

}.attendance_table .worked_hours_span_red {

    background: red;

    width: 83%;

    display: block;

    height: 5px;

}

.attendance_table .worked_hours_span_yellow {

    background: #bca327d1;

    width: 83%;

    display: block;

    height: 5px;

}



.attendance_table table th{

    padding: 10px 30px !important;

}

.attendance_table table td,.attendance_table table th{

    border-bottom: 1px solid silver !important; 

    border-top: 1px solid silver !important;

    border: none;

    padding: 1px 0px 0px 30px;

    border-collapse: collapse;

 }.attendance_calc {

    position: relative;

    padding-left: 5%;

    display: flex;

    width: 100%;

    height: 43%;

    flex-direction: row;

    flex-wrap: wrap;

} .attendance_table .pagination {

    width: 35%;

    margin: 2% 0%;

}.attendance_table p.total_records_leave_table {

    width: 35%;

    margin: 2% 1%;

}.attendance_calc .att_calc_divs {

    width: 20%;

    margin: 23px;

    border: 1px solid;

    padding: 10px 20px;

    height: 34%;

}.attendance_calc .sp {

    font-size: 23px;

    padding: 5px 2px ;

}.attendance_calc .bg-pink{

    background: #e5677d;

    color: white;

}.attendance_calc .bg-tometo{

    background: tomato;

    color: white;

}.attendance_calc .bg-info{

    background: skyblue;

    color: white;

}.attendance_calc .bg-warning{

    background: #ffbc00;

    color: white;

}.attendance_calc .bg-success{

    background: green;

    color: white;

}.attendance_calc .bg-purple{

    background: #132785de;

    color: white;

}.attendance_calc .bg-danger{

    background: #b32e2e;

    color: white;

}

.attendance_calc .bg-green{

    background: #3c763d;

    color: white;

}

.attendance_calc .bg-greenplus{

    background:#3cb32e;

    color: white;

}

.att_calc_divs .used_leave
{
    font-size: 20px;
}

/*** team page ***/

.team_table {

    width: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

}

.content #search_team {

    margin: 2% 80%;

   

}

.team_table table{

    width: 100%;

    margin: 1% 0%;

}

.team_table_view {

    min-height: 430.3px;

}

.team_table table th , .team_table table td{

    border-bottom: 1px solid silver !important;

    border: none ;

}

 .team_table .team_image{

    width: 40px;

    height: 40px;

    border-radius: 50%;

}.team_table input[type="checkbox"] {

    height: 20px;

    margin: 0 !important;

    width: 18px;

}.checkbox_th{

    width: 10%;

}.team_table .team_fullname {

    padding-left: 50px;

    color: #1db3c3;

}



/*** calendar page  ***/

#calenderview{

    width: 70%;

    margin: 20px auto;

}

#calenderview .fc-left,#calenderview .fc-right{

    padding: 3px 0px;

}

#calenderview .fc-view-container .fc-row.fc-week.fc-widget-content{

    min-height: 100px !important;

    height: fit-content !important;

}



/*** news page  ***/



.news_table {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    width: 100%;

    margin: 2% 3%;

    overflow-y: scroll;

    height: 700px;

}

.news_content {

    display: flex;

    width: 100%;

    overflow-wrap: break-word;

    margin: 2% 0%;

}

.news_date {

    width: 54px;

    height: 52px;

    background: #0eb90ed1;

    text-transform: uppercase;

    color: white;

    font-size: 11px;

    border-radius: 50%;

    padding: 19px 6px;

}

.news_info {

    overflow-wrap: break-word;

    width: 80%;

    margin-left: 2%;

}



/*** job page ***/

.job_table{

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    width: 100%;

}.job_table .job_table_content{

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    width: 70%;

    margin-top: 3%;

    height: 700px;

    border-right: 1px solid silver;

}

.job_table_view{

    min-height: 542px;

}

.job_table table{

    width: 100%;

}

.job_table table th{

    padding: 10px;

}

.job_table table th,.job_table table td{

    border: none;

    border-bottom: 1px solid silver;

    border-top: 1px solid silver;



}.job_table input[type="checkbox"] {

    margin-left: 0;

    height: 20px;

    width: 18px;

}.job_table .job_description {

    margin-top: 3%;

    width: 30%;

    height: 700px;

    overflow-y: scroll;

    border-top: 1px solid silver;

    padding: 2% 2%;

}.job_description .defualt_leave_aside_text{

    margin: 55% auto;

    width: 100%;

    text-align: center;

}



/*** leave page  ***/

.leave_header {

    padding: 20px 0px;

    width: 100%;

    display: flex;

    height: fit-content;

    border-bottom: 1px solid#00000045;

    border-collapse: collapse;

}

.leave_header .btn-success {

    margin-left: 3%;

    color: #fff;

}

.leave_header input[type="text"] {

    margin: 0% 1% 0% 65%;

    width: 170px !important;

}

#leave_form_status_dropdown,#search_leave{ 

    width: 130px;

}

.leave_body {

    border-collapse: collapse;

    width: 70%;

    display: flex;

    min-height: 720px;

}

.leave_table_view {

    min-height: 552px;

}

.leave_table {

    border-right: 1px solid silver;

    border-collapse: collapse;

    width: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

}.leave_body table td,.leave_body table th{

    color: black;

    border-bottom:1px solid#00000045;

    border-collapse: collapse;

}

thead{

    text-transform: capitalize;

}

.status_leave {

    text-transform: capitalize;

    border-radius: 3px;

    max-width: 55%;

    text-align: center;

}

.leave_table table{

    position: relative;

    width: 100%;

    height: fit-content;

} .green{

    background: green;

    color: white;

}

 .yellow{

    background: #e7ad11;

    color: white;

}

 .red{

    background: red;

    color: white;

}.leave_body  td{

    padding: 10px;

}.leave_body  th{

    padding: 10px;

    border: none !important;

    border-bottom: 1px solid silver !important;

}

.leave_form_container form{

    width: 100%;

}

.leave_form_container ,.edit_leave_form_container {
    width: 60%;

    border: 1px solid;

    padding: 0;

    left: 17%;

    display: flex;

    top: 13%;

    position: absolute;

    background: white;

    flex-direction: column;

}p.leave_form_heading {

    background: #ed5454c7;

    color: white;

    font-size: 20px;

    padding: 20px;

}#leave_apply_form .form-group{

margin: 2% 6%;;

}

    label{

    display: block;

}.leave_form_container input[type=range] {

    display: inline;

    width: 5%;

}.leave_form_container span{

    font-size: 16px;

    padding-left: 15px;

}



.pagination {

   width: 60%;

   margin:  2% 0%;

}.pagination>li>a, .pagination>li>span {

    position: relative;

    float: left;

    color: black;

    background-color: #fff;

    border: 1px solid silver;



}.pagination .active , .pagination .active:hover {

    color: white;

    background-color:green;

}.pagination>li:first-child>a,.pagination>li:last-child>a{

    border: 1px solid silver;



}.pagination a,.pagination>li>a:hover{

    background-color: #eee;

    color: black;

    text-decoration: none;

    

}.disable_pagination_dots{

pointer-events: none;

}

.leave_table_view input[type="checkbox"] {

    margin-left: 45%;

    height: 20px;

    width: 18px;

}p.total_records_leave_table {

    width: 35%;

    margin: 2% 1%;

}

.leave_aside {

    width: 30%;

    height: 600px;



}.leave_aside .leave_extrainfo_table{

    width: 100%;

    margin-top: 30px;

}.leave_aside  .defualt_leave_aside_text {

    margin: 55% auto;

    width: 100%;

    text-align: center;

}





/*** media queries  ***/

@media only screen and  (max-width: 1460px) {

    .record_att_btn1 .btn, .record_att_btn2 .btn {

        min-width: 37%;

        margin: 0% 8%;

    }

    .cal_header_date span {

        padding: 0px 8px;

        margin: 0px 3px;

    }

}

@media only screen and  (max-width: 1366px) {

    /* dashoard page  */

    .record_attendance_body{

        padding: 10px 15px;

    }

    .cal_header_date span{

        padding: 0px 7px;

    }

    /* edit profile page */

    .photo .btn-danger, .photo_upload .btn-danger {

        margin-right: 20px;

        margin-left: 22%;

    }

    /* .attendance page */

    .sorting input {

        margin: 0px 8px;

    }

    /* leave page */

    .leave_header input[type="text"] {

        margin: 0% 1% 0% 61%;

    }

}