@font-face{font-family:'Roboto';font-style:normal;font-weight:200;src:url('../fonts/Roboto-Thin.ttf') format('truetype');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:url('../fonts/Roboto-Light.ttf') format('truetype');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url('../fonts/Roboto-Regular.ttf') format('truetype');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:url('../fonts/Roboto-Medium.ttf') format('truetype');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:600;src:url('../fonts/Roboto-Bold.ttf') format('truetype');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url('../fonts/Roboto-Black.ttf') format('truetype');}

*{box-sizing:border-box;}
html,body{width:100%;height:100%;}
body{font-family:'Roboto',sans-serif;font-weight:400;letter-spacing:.3px;color:#333;padding:0;margin:0;}
body.login_template{height:100vh;overflow:hidden;}
.login-area{display:grid;grid-template-columns:50% 50%;width:100%;height:100vh;background:linear-gradient(135deg,#fffaf6 0%,#fff2e5 100%);}
.login_logo{display:flex;align-items:center;justify-content:center;background:#fdfdfd;}
.login_logo a{display:block;}
.login_logo img{display:block;width:375px;height:auto;max-width:100%;}
.login_form{width:100%;max-width:420px;margin:auto;padding:30px;}
.login_heading{font-size:18px;font-weight:400;color:#e08010;margin-bottom:24px;}
.login_heading span{font-size:28px;font-weight:600;}
.login_heading span span{color:#222d33;}
.login_form_error{width:100%;padding-bottom:15px;}
.login_form_error p{padding:12px 15px;color:#a94442;background-color:#f2dede;border:1px solid #ebccd1;border-radius:3px;font-size:14px;margin:0;}
.login_form_success{width:100%;padding-bottom:15px}
.login_form_success p{padding:12px 15px;color:#3c763d;background-color:#dff0d8;border:1px solid #d6e9c6;border-radius:3px;font-size:14px;margin:0;line-height:20px}
.login_input_field{width:100%;display:block;padding:8px 0;}
.login_input_field input.login_text_input{border:1px solid #ccc;font-size:16px;padding:15px;outline:0;width:100%;border-radius:3px;font-family:'Roboto',sans-serif;}
.login_input_field input.login_text_input:focus{border-color:#74d8cd;}
.password_field{position:relative;}
.password_field .login_text_input{padding-right:50px;}
.password_toggle{position:absolute;top:50%;right:12px;transform:translateY(-50%);padding:0;border:0;background:transparent;color:#999;cursor:pointer;font-size:18px;line-height:1;}
.password_toggle:hover{color:#222d33;}
.big_login_btn{padding:16px;font-size:18px;width:100%;letter-spacing:.5px;margin-bottom:8px;border-radius:10px;border:0;cursor:pointer;color:#fff;background:#e08010;transition:background .6s ease;}
.big_login_btn:hover{background:#222d33;}
.forgot_password_link{width:50%;float:right;text-align:right;}
.forgot_password_link a{color:#e08010;font-size:16px;font-weight:400;letter-spacing:.5px;transition:.3s;}
.forgot_password_link a:hover{text-decoration:none;color:#222d33;}
.forgot_password_form{width:100%;display:none;}
.signin_link{width:100%;float:right;text-align:right;}
.signin_link a{color:#222d33;transition:.3s;}
.signin_link a:hover{text-decoration:none;}
.login_form_success{width:100%;padding:12px 15px;color:#155724;background-color:#d4edda;border:1px solid #c3e6cb;border-radius:3px;font-size:14px;margin-bottom:8px;}
.container{position: relative; overflow: hidden; max-width: 1400px; margin: auto; border-left: 1px solid #eee; border-right: 1px solid #eee; padding:0px 0px 0px 30px;}
.header_area{width:100%; max-width: 1400px; margin:auto; box-shadow: 0px 4px 20px 0px #cfac89; display: inline-block; position: absolute; top: 0px; left: 0px; right: 0px; background-color: #fff8f1; z-index: 2; padding:8px 30px 8px 30px;}
.header_logo{width:50%; float:left;}
.header_logo a{display: inline-block;}
.header_logo img{max-width:86px;}
.header_account_area{width:50%; float:right; text-align:right; position:relative;}
.header_icons{display:inline-block; margin-top: 24px;}
.header_icons a{text-decoration: none;}
.header_logout{float:right;margin-left:30px;}
.header_logout svg{width:22px;height:22px;}
.header_logout span{display:inline-block;vertical-align:top;font-size:16px;font-weight:400;color:#e08010;padding-top:2px;width:65px;}
.left_sidebar{width:230px;float:left;height:calc(100vh - 130px);margin:80px 0 60px;}
.menu_header{width:100%;display:inline-block;padding-top:50px;}
.menu_header_left{float:left;}
.menu_header_image{float:left;border-radius:100%;width:42px;height:42px;margin-right:15px;text-align:center;background-color:#ff8e0a21;}
.menu_header_image svg{width:24px;height:24px;margin-top:8px;}
.menu_header_text{display:inline-block;}
.menu_header_text p.name{padding:0;margin:0;font-size:16px;font-weight:500;line-height:26px;}
.menu_header_text p.designation{padding:0;margin:0;font-size:13px;font-weight:400;color:#e08010;}
.menu_header_icon{float:right;padding:12px 30px 0 0;}
.menu_header_icon svg{width:16px;height:16px;}
.menu_header_image span{background-color:#5bd700;display:inline-block;width:10px;height:10px;border-radius:100%;vertical-align:top;margin:4px -16px 0 0;}
.menu{width:calc(100% - 30px);display:inline-block;margin-top:30px;}
.menu ul{padding:0;margin:0;list-style:none;}
.menu ul li.list{list-style:none;padding-bottom:20px;width:100%;display:inline-block;}
.menu ul li.list a{color:#222d33;text-decoration:none;font-weight:500;font-size:16px;padding:8px 10px 8px 12px;display:inline-block;width:100%;border-radius:3px;border:1px solid #222d33;transition:all .3s ease; position: relative; z-index: 1; background: #fff;}
.menu ul li.list a:hover{color:#fff;background:#222d33;border-color:#222d33;}
.menu ul li.list a:hover svg{fill:#fff;}
.menu ul li.list a:hover svg path{fill:#fff;}
.menu ul li.list.active a{color:#fff;background:#e08010;border-color:#e08010;}
.menu ul li.list svg{width:16px;height:16px;fill:#222d33;}
.menu ul li.list svg path{fill:#222d33;}
.menu ul li.list.active svg{fill:#fff;}
.menu ul li.list.active svg path{fill:#fff;}
.footer_logout{position:absolute; bottom:15%;}
.footer_logout a{text-decoration:none;}
.footer_logout svg{width:22px; height:22px;}
.footer_logout span{display:inline-block; vertical-align:top; color:#e08010; padding:2px 0px 0px 4px;}
.content_area{width:calc(100% - 230px);display:inline-block;background-color:#f9f9f9;min-height:100vh;margin:0;}
.inner_content{width:calc(100% - 60px);margin:125px 30px 120px;display:inline-block;}
.page_header{width:100%;display:inline-block;margin-bottom:45px;}
.page_header_left{width:50%;float:left;}
.page_title_icon{float:left;padding-right:12px;}
.page_header_left_text{display:inline-block;}
.page_title_icon svg{width:32px;height:32px;display:inline-block;margin-top:6px;}
h1.page_title_text{display:inline-block;font-size:20px;font-weight:500;letter-spacing:.5px;margin:0;color:#e08010;}
p.welcome_back_text{margin:4px 0 0;text-align:left;color:#222d33;font-size:14px;}
.page_header_right{width:50%;float:right;text-align:right;}
.page_header_right_text{text-align:right;font-size:14px;color:#222d33;margin-top:12px;}
.page_header_right_text svg{width:20px;height:20px;display:inline-block;vertical-align:bottom;}
.page_content{width: 100%; display: inline-block; margin-bottom: 45px;}
.footer_area{position:absolute; bottom:0px; left:0px; width:100%; background-color:#f9f9f9; box-shadow:0px 2px 30px 0px #ccc; text-align:center; padding:15px 30px 10px 30px; display:flex; justify-content: space-between; align-items: center; box-sizing: border-box; font-size:14px; letter-spacing:0px;}
p.copyright_text{margin:0px; padding:0px; text-align: left; font-size:14px;}
p.developed_by{text-align: right; font-size:13px;}
p.developed_by a{color: #333;}
p.developed_by a:hover{text-decoration:none;}
.page_footer{width:100%; display:inline-block;}
.mobile_menu_icon_outer{display:none;}
.menu.client ul li.list svg{padding-top:3px; margin-right:4px;}
.menu.manager ul li.list svg{margin-right:3px; vertical-align:middle;}

@media(max-width:767px){
    body.login_template{height:auto;min-height:100vh;overflow:auto;}
    .login-area{display:block;min-height:100vh;height:auto;}
    .login_logo{height:180px;padding:25px;background:#fdfdfd;}
    .login_logo img{width:150px;height:auto;}
    .login_form{max-width:480px;width:100%;margin:0 auto;padding:30px;}
    .footer_area{flex-direction:column;}
    p.developed_by a{text-decoration:none;}
}

@media(max-width:480px){
    .login_logo{height:150px;padding:20px;}
    .login_logo img{width:120px;}
    .login_form{padding:25px 20px;}
    .forgot_password_link{width:100%;float:none;text-align:left;margin-top:15px;}
}



/*  new styles   */

.mobile_menu_icon_outer{display:none;}
.mobile_menu_overlay{display:none;}

@media (max-width:1024px){
    .header_area{position:fixed; width:100%;max-width:none;box-sizing:border-box;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;z-index:1000;box-shadow:none;}
    .header_logo{width:auto;float:none;line-height:0;}
    .header_logo a{display:inline-block;}
    .header_logo img{display:block;width:70px;height:auto;max-width:100%;}
    .header_account_area{display:none;}
    .mobile_menu_icon_outer{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;flex-shrink:0;position:relative;z-index:1004;}
    .mobile_menu_icon{display:block;position:relative;width:25px;height:2px;background:#222d33;transition:background .2s ease;}
    .mobile_menu_icon::before,.mobile_menu_icon::after{content:"";position:absolute;left:0;width:25px;height:2px;background:#222d33;transition:transform .2s ease;}
    .mobile_menu_icon::before{top:-8px;}
    .mobile_menu_icon::after{top:8px;}
    .left_sidebar{position:fixed;top:0;bottom:0;left:0;width:280px;max-width:85vw;height:100vh;height:100dvh;box-sizing:border-box;float:none;margin:0;padding:20px;background-color:#fff;z-index:1003;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateX(-100%);visibility:hidden;pointer-events:none;transition:transform .3s ease,visibility .3s ease;box-shadow:4px 0 20px rgba(0,0,0,.12);}
    .left_sidebar.mobile_menu_open{transform:translateX(0);visibility:visible;pointer-events:auto;}
    .menu_header{display:block;width:100%;padding-top:10px;}
    .menu_header_left{float:left;}
    .menu_header_icon{float:right;padding:12px 0 0;}
    .menu{display:block;width:100%;margin-top:75px;}
    .menu ul{padding:0;margin:0;}
    .menu ul li.list{display:block;width:100%;padding-bottom:12px;}
    .menu ul li.list a{display:block;width:100%;box-sizing:border-box;}
    .footer_logout{position:static;display:block;margin-top:25px;padding-bottom:10px;}
    .mobile_menu_overlay{display:block;position:fixed;inset:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:1002;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;}
    .mobile_menu_overlay.mobile_menu_overlay_visible{opacity:1;visibility:visible;pointer-events:auto;}
    .content_area{display:block;float:none;width:100%;box-sizing:border-box;}
    .inner_content{display:block;width:calc(100% - 40px);margin:72px 20px;box-sizing:border-box; padding:30px 0px 75px 0px;}
    .container{overflow:visible;padding-left:0;padding-right:0;}
    .page_title_icon{padding-right:6px;}
    .page_title_icon svg{width: 16px; height: 16px; margin-top: 0px;}
    h1.page_title_text{font-size: 16px; letter-spacing:0px;}
    p.welcome_back_text{font-size: 11px;}
    .page_header_right_text{font-size: 12px; margin-top: 0px;}
    .page_header_right_text svg{width: 16px; height: 16px;}

}
@media (max-width:767px){
    .header_area{padding:8px 15px;}
    .inner_content{width:calc(100% - 30px);margin:72px 15px 100px;}
}
@media (prefers-reduced-motion:reduce) {
    .left_sidebar,.mobile_menu_overlay,.mobile_menu_icon,.mobile_menu_icon::before,.mobile_menu_icon::after{transition:none;}
}