/*200thin, 300 light, 400 regular, 500 medium, 600 semibold, 700 bold*/
body, html{font-size:16px;font-size: 15px;position: relative;font-family: lato, sans-serif;letter-spacing: 0.5px;}
body.darkgreybg {  color: #4D4F5C;  background: #2A3F53;}
h1,h2,h3,h4,h5,h6{line-height:1.3;color: #000; margin: 1rem 0;font-weight:600; }
.h1,.h2,.h3,.h4,.h5.h6{margin: 1rem 0;font-weight:600; line-height: 1.3;}
h1{font-size:2.0rem;}
h2{font-size:1.8rem;}
h3{font-size:1.6rem;}
h4{font-size:1.4rem;}
h5{font-size:1.2rem;}
h6{font-size:1.1rem;}
.h1{font-size:2.0rem;}
.h2{font-size:1.8rem;}
.h3{font-size:1.6rem;}
.h4{font-size:1.4rem;}
.h5{font-size:1.2rem;}
.h6{font-size:1.1rem;}
.py1rem{ padding-top: 1rem; padding-bottom: 1rem; }
.py2rem{ padding-top: 2rem; padding-bottom: 2rem;}
.py3rem{ padding-top: 3rem; padding-bottom: 3rem; }
.py4rem{ padding-top: 4rem; padding-bottom: 4rem;}
.px1rem{ padding-left: 1rem; padding-right: 1rem; }
.px2rem{ padding-left: 2rem; padding-right: 2rem;}
.px3rem{ padding-left: 3rem; padding-right: 3rem; }
.px4rem{ padding-left: 4rem; padding-right: 4rem;}
.my1rem{ margin-top:1rem;margin-bottom: 1rem; }
.my2rem{ margin-top:2rem;margin-bottom: 2rem;}
.my3rem{ margin-top:3rem;margin-bottom: 3rem;}
.my4rem{ margin-top:4rem;margin-bottom: 4rem; }
.mx1rem{ margin-left:1rem;margin-right: 1rem; }
.mx2rem{ margin-left:2rem;margin-right: 2rem;}
.mx3rem{ margin-left:3rem;margin-right: 3rem;}
.mx4rem{ margin-left:4rem;margin-right: 4rem; }
.pt1rem{ padding-top: 1rem;}
.pt2rem{ padding-top: 2rem;}
.pt3rem{ padding-top: 3rem;}
.pt4rem{ padding-top: 4rem;}
.pb1rem{padding-bottom: 1rem; }
.pb2rem{padding-bottom: 2rem;}
.pb3rem{padding-bottom: 3rem; }
.pb4rem{padding-bottom: 4rem;}

.mt1rem{ margin-top: 1rem;}
.mt2rem{ margin-top: 2rem;}
.mt3rem{ margin-top: 3rem;}
.mt4rem{ margin-top: 4rem;}
.mb1rem{margin-bottom: 1rem; }
.mb2rem{margin-bottom: 2rem;}
.mb3rem{margin-bottom: 3rem; }
.mb4rem{margin-bottom: 4rem;}

.no-margin{margin: 0px !important;}
.no-padding{padding: 0px !important;}
.pt0rem{padding-top: 0px;}
.pb0rem{padding-bottom: 0px;}
.mt0rem{margin-top: 0px;}
.mb0rem{margin-bottom: 0px;}
.align{ align-items: center; }
img{max-width: 100%;}
.form-control{line-height: 1.7;}
/***customization***/
.dropdown-item{padding-top: 0.5rem; padding-bottom: 0.5rem;}
.notification_menu{left:0px;width:200px;}
.chat_menu{left:0px;width:200px;}

.leftgreybg {  color: #4D4F5C;  background: #2A3F53;}
a.user-profile{font-size: 1rem;}
.login_card{position:relative;-webkit-border-radius:0px;border-radius:0px;}
.login_card:before{content: "";position: absolute;width:50%;height: 100%;background: url(../images/Login/login_bg.png) no-repeat center;background-size: cover;top:0px;left:0px;display: block;-webkit-border-radius: 10px 0 0 10px;border-radius: 10px 0 0 10px;}
.login_card_lft_content{padding: 2rem 15px;}
.login_card .bg-white{-webkit-border-radius: 0 10px 10px 0px;border-radius: 0 10px 10px 0px;}
.login_content{padding: 25px 0px 15px;}
.login_content form div label{font-size: 0.8rem;}
ul.nav.side-menu{margin-top: 1rem;}
.navbar-text li{padding: 0px; margin-right: 5px;}
.navbar-text li .user-profile::before{left: -8px;}
.navbar-text li:last-child{margin-right: 0px;}
.navbar-text li a{padding: 5px 8px;}
.navbar-text li ul li a{padding:10px 15px;display: block;}
.navbar-text li ul li a i{float:right; line-height: inherit;}
.total-emp{padding: 15px !important;}
.total-emp .emp_img_bg{background:#d0f0d5 url(../images/Dashboard/total_emp.png) no-repeat center;}
.total-m-emp .emp_img_bg{background:#cce0ff url(../images/Dashboard/Total_Male_Employees.png) no-repeat center;}
.total-f-emp .emp_img_bg{background:#cce0ff url(../images/Dashboard/Total_Female_Employees.png) no-repeat center;}
.total-n-emp .emp_img_bg{background:#cce0ff url(../images/Dashboard/Total_New_Employees.png) no-repeat center;}
.top_bar .navbar-toggler{border: 0px;-webkit-transition: all .3s ease 0s; transition: all .3s ease 0s;margin-bottom: 0px; }
.top_bar .navbar-toggler:focus{outline: none;}
.top_bar .navbar-toggler:hover{color: #000;-webkit-transition: all .3s ease 0s; transition: all .3s ease 0s; }
.card_title h6{line-height: 1.5;padding: 0px 15px;}
.tab_con h6{font-size:1.1rem;margin-top: 0px;}
.tab_rgt p{font-size: 0.9rem;}
.copyright-info{top:auto;margin-top: 25px;}
.hassubmenu ul.submenu{display: none; }
.login_card_wrapper{min-height: 100vh;}
.announcement_wrap{padding: 1rem;}
.announcement_item{padding: 0.5rem 0.5rem 1rem; margin-bottom: 1rem; border-bottom: 1px solid #dee2e6; }
.sm-text-link{font-size: 0.8rem;color: #3B86FF;}


.event_blk{margin-bottom:0.5rem;}
.event_blk .event_date{margin: 0px;padding: 2px 5px;height: auto;}
.Holiday_date{margin: 0px;/*width:45px;*/}
.Holiday_txt{padding: 0px;}
.holiday_dateleft{padding: 5px 15px;}
.dataTables_length{width: auto; float: none;}

.password-wrap{position: relative;}
.password-wrap input{padding-right: 30px;}
.password-wrap .trigger{position: absolute; width:30px; right: 1px; top:1px; bottom: 1px; display: block; z-index: 2;background: url(../images/Settings/hide1.png) no-repeat center;cursor: pointer;-webkit-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;}
.password-wrap .trigger.active{background: url(../images/Settings/show1.png) no-repeat center;}
.password-wrap .trigger:hover{background-color: #ddd;}

.form-group.has-search{position: relative;}
.form-group.has-search .form-control-feedback{margin: 0px;left:10px;top:50%;transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%);line-height: 1;}
.form-group.has-search .form-control{padding-left: 35px;}

.btn-theme{background: #18a9e8;color: #fff;font-size: 0.9rem;padding: 6px 15px;margin-top: 0px;font-weight: 400;border-radius: 5px;border:1px solid #18a9e8;}
.btn-theme:hover{ background: none;color:#18a9e8;border:1px solid #18a9e8;}

.btn-theme i, .btn-theme .fa, .btn-theme .fas{margin-right: 5px;}
.dropdown-item i, .dropdown-item .fa, .dropdown-item .fas{margin-right: 5px;}
.edit-proitem, .delete-proitem{display: inline-block;white-space:nowrap;}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after{top:auto; bottom: 8px;}

/**inner pages styles*/
#catTable_wrapper.dataTables_wrapper > .row{/*width:100%;*/margin-bottom: 1rem;}
.search_discussion{padding-left: 25px;text-align: left;}
.date_action{text-align: right;}
.date_action .dropdown-menu{left: auto !important; right: 0px !important;top:100% !important;}
.customdropdown .dropdown-menu{left: auto !important; right: 0px !important;top:100% !important;}
.customdropdown a.dropdown-toggle{padding-left: 9px !important; padding-right:9px !important}
.contact-edit a{padding: 0px 0.5rem;display: inline-block}
.contact_box{margin-bottom:0px;margin-top: 0px;height: 100%;}
.sidebar_question_answer .user_img{width:36px;}
.sidebar_question_answer .user_img,
.sidebar_question_answer .user_img img{-webkit-border-radius: 50%;border-radius: 50%;}
.category_btns1 .btn{border-color:#aaa;}
#gdTable_wrapper.dataTables_wrapper > .row{/*width:100%;*/margin-bottom: 1rem;}
.contact_profile_img{text-align: center;}
.contact_profile_img .img_bg{width:72px; height: 72px; display: inline-block;background: url(../images/Contacts/contact-avatar.png) no-repeat top center; background-size: 100% auto; max-width: 100%; -webkit-border-radius: 50%; border-radius: 50%;}
.btn_thread{padding: 6px 15px;}
.navbar-text .dropdown-menu{left: auto !important; right: 0px !important;}
div.dataTables_length label .form-control{margin-left: 0.5rem; margin-right: 0.5rem;}
.dataTables_wrapper.form-inline{display: block !important;}
.table-responsive{padding: 1rem; background: #fff;-webkit-box-shadow: 0px 2px 6px #0000000A; box-shadow: 0px 2px 6px #0000000A;}
.table-responsive .bg-white{-webkit-box-shadow: none;box-shadow: none;}
.table td, .table th{padding: 0.65rem;}
.errormsg{color: #dc3545 !important;}
.successmsg{color: #28a745 !important;}
.ck.ck-editor__main > .ck-editor__editable{min-height: 150px;}
.emp-video-wrapper{position: relative; width:100%; padding: 0px !important;padding-bottom:56.25% !important;background-color:#d6d6d6;margin-bottom: 20px;}
.emp-video-wrapper video.video-fluid{position: absolute; left:0px; top:0px; width:100%; height: 100%;display: block;}
.emp-video-wrapper .video_place_holder_image{position: absolute;display: block; left: 50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translateY(-50%, -50%);}

.profile_image .img_bg{width:200px; height:200px; display: inline-block;background: url(../images/Contacts/contact-avatar.png) no-repeat top center; background-size: 100% auto; max-width: 100%;}

.card_title h6{font-weight: 700;}
.key-information .row{margin: 0px 0px 5px;}
.key-information .row strong{font-weight:700;font-size:1.07rem;}
.key-information .row span{font-weight:700;}

/**responsive**/
@media screen and (min-width:768px) {
body, html{height: 100%;background: #F0F0F7;}
body:before{content: "";position: absolute;width:16.66666%;height: 100%;background: #2A3F53;top:0px;left:0px;display: block;}
header{position: relative;}
.mob-menu-toggle-btn{display: none;}
.hassubmenu .toggle-sub-menu{display: none;}
.hassubmenu ul.submenu{position: absolute;left:100%;top:0px; width:200px;background: #18A9E8;z-index:3;list-style: none;padding: 0px; margin: 0px;}
.hassubmenu:hover ul.submenu{left:100%;}
.hassubmenu ul.submenu li {display: block;margin-bottom:0.2rem;}
.hassubmenu ul.submenu li a{display: block; padding:10px; color: #fff;}
.hassubmenu ul.submenu li a:hover{color:#eee}
.trainer_image_wrap{padding: 0px !important;}
.modal-dialog{width:90%; max-width: 1100px;}
}
@media screen and (min-width:768px) and (max-width:991px) {
body:before{width:25%;}
body, html{font-size: 15px;font-size:14px;}
}
@media screen and (max-width:767px) {
body, html{font-size: 14px;font-size:13px;background: #F0F0F7;}
.login_card:before{-webkit-border-radius: 10px 10px 0px 0px;border-radius: 10px 10px 0px 0px;width:100%; height: 50%;}
.login_card .bg-white{-webkit-border-radius: 0 0px 10px 10px;border-radius: 0 0px 10px 10px;}
.side-bar-menu{display: none;}
.mob-menu-toggle-btn{
    width:26px; height:30px; z-index: 9999;cursor: pointer;margin-right: 10px;}
#mob-menu-toggle .bar-wrapper{position: relative;height: 100%;}
#mob-menu-toggle *{-webkit-transition: all .3s ease 0s; transition: all .3s ease 0s; }
#mob-menu-toggle .bar-wrapper span{background-color: rgba(0,0,0,0.5);}
#mob-menu-toggle .bar1, #mob-menu-toggle .bar2-1, #mob-menu-toggle .bar2-2, #mob-menu-toggle .bar2,#mob-menu-toggle .bar3 {width:26px; border-radius: 10px; -webkit-border-radius: 10px; height:4px; display: block; position: absolute;left:0%;}
#mob-menu-toggle:hover .bar-wrapper span{background-color: rgba(0,0,0,1);}

#mob-menu-toggle .bar1{top:0px; }
#mob-menu-toggle .bar2{top:50%; margin-top: -2px; transition: 0.4s; -webkit-transition: 0.4s;}
#mob-menu-toggle .bar2-1,
#mob-menu-toggle .bar2-2{opacity: 0;top:50%;}
#mob-menu-toggle .bar3{bottom:0;}
#mob-menu-toggle.change .bar1 {opacity: 0;}
#mob-menu-toggle.change .bar2 {opacity: 0;}
#mob-menu-toggle.change .bar2-1 {-webkit-transform: rotate(-45deg) translate(0px, 0px);transform: rotate(-45deg) translate(0px, 0px);opacity: 1;}
#mob-menu-toggle.change .bar2-2 {-webkit-transform: rotate(45deg) translate(0px, 0px);transform: rotate(45deg) translate(0px, 0px);opacity: 1;}
#mob-menu-toggle.change .bar3 {width:36px; opacity: 0;}
.side-bar-menu{position: absolute; left: 0px; width:100%;z-index: 2;background: #2A3F53;}
.hassubmenu {position:relative; }
.hassubmenu > span.toggle-sub-menu{width:30px; height: 30px; background: #fff; color:#2A3F53; position: absolute; right:15px; top:5px;-webkit-border-radius: 3px;border-radius: 3px;text-align: center; line-height: 30px;z-index:100;cursor: pointer;}
.hassubmenu ul.submenu{background: #18A9E8;z-index:10;list-style: none;padding: 0px; margin: 0px;}
.hassubmenu ul.submenu li {display: block;margin-bottom:0.2rem;}
.hassubmenu ul.submenu li a{display: block; padding:10px; color: #fff;}
.hassubmenu ul.submenu li a:hover{color:#eee}
.emp_card.total-emp{margin-top: 1rem;}
}
@media only screen and (min-width:576px){
div.dataTables_length label{justify-content: flex-start;}
div.dataTables_filter label{justify-content: flex-end;}
div.dataTables_paginate ul.pagination{justify-content: flex-end;}
}
@media screen and (min-width:576px) and (max-width:767px) {
.btn_thread{margin:5px 0;}
}
@media only screen and (min-width:1800px) and (max-width:2199px){
	body, html{font-size: 18px;}
}
@media only screen and (min-width:2200px){
	body, html{font-size: 20px;}
}