/*
* @Author: Abhishek Bhatt
* @Date:   2021-08-16 12:38:42
* @Last Modified by:   abhi
* @Last Modified time: 2021-08-20 13:26:05
*/
body,html{background-color:#fff;color:#403f3f;font-size:16px;font-family: 'PT Sans', sans-serif;position: absolute;width: 100%;left: 0;right: 0;height: 70vh;}
a, a:hover, a:focus{text-decoration:none;}
h1,h2,h3,h4,h5,h6{font-weight:700;color: #403f3f;} 
p{font-size: 14px;}
header .green-bg{background-color:#0d5899;padding: 60px 0;}
.btn.focus, .btn:focus {outline: 0;box-shadow: 0 0 0 .2rem rgba(0,123,255,.0);}
.middle-area{top: 19px;width: 1396px;height: calc(100% - 38px);margin: 0 auto;position:absolute;left: 0;right: 0;width:100%;}
#chatBox{background-color: #fff;box-shadow: 0 4px 10px rgba(0,0,0,.2);-webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);-ms-box-shadow: 0 4px 10px rgba(0,0,0,.2);-moz-box-shadow: 0 4px 10px rgba(0,0,0,.2);-o-box-shadow: 0 4px 10px rgba(0,0,0,.2);}

.user_card {width: 350px;margin-top: auto;margin-bottom: auto;background: #f7f7f7;position: relative;display: flex;justify-content: center;flex-direction: column;padding: 10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 5px;margin: 70% 0 0;}

.login-area .form_container {margin: 30px 0;}
.login-area .login_btn {width: 100%;background: #0d5899;color: white;border-radius: 4px;}
.login_btn:focus {box-shadow: none !important;outline: 0px !important;}

.input-group-text {background: #0d5899 !important;color: white !important;border: 0 !important;border-radius: 0.25rem 0 0 0.25rem !important;}
.input_user,.input_pass:focus {box-shadow: none !important;outline: 0px !important;}

/**** side-area Css Start ****/
.rounded-shape h1 {width: 41px;height: 41px;background-color: #403f3f;font-size: 18px;text-align: center;color: #fff;border-radius: 50px;line-height: 38px;float: left;margin-right: 16px;}
.rounded-shape span {display: block;color: #0d5899;position: relative;top: 10px;}
#side-area .author-img img{width: 40px;height: auto;}
#side-area{height: 95vh;}
#side-area header{background-color:#ededed;}
#side-area header ul{padding:0;margin:0;text-align:right;}
#side-area header ul li{list-style-type:none;display:inline-block;padding-left: 30px;margin: 6px 0;font-size: 20px;}
#side-area header ul li a{color: #919191;}
#side-area .body-content ul.contacts li .user_info p{font-size: 15px;margin: 0;}
#side-area .body-content ul.contacts li .user_info p strong{color: #0d5899;font-size: 13px;}
#side-area footer{background-color:#ededed;position: absolute;width: 97%;left: auto;right: auto;margin: 0 auto;bottom: 0;min-height: 90px;}
.dropdown-toggle::after {content: none;}
.btn {color: #52c6e5;padding: 0;font-size: 20px;background-color: transparent;border-radius: 50px;width: 37px;height: 37px;}
.btn:hover, .btn:focus {color: #fff;text-decoration: none;background-color:#0d5899;}
.dropdown {position: relative;top: -2px;}
.dropdown-item {padding: 4px 15px;white-space: break-spaces;width: 12rem;}	
.dropdown-menu {font-size: 14px;border: 0px solid rgba(0,0,0,.15);border-radius: 3px;box-shadow: 0 2px 5px 0 rgba(220, 220, 220,.26),0 2px 10px 0 rgba(220, 220, 220,.26);min-width: 100%;}	
.drop2 .dropdown-menu{box-shadow: 0 2px 5px 0 rgba(220, 220, 220,.0),0 2px 10px 0 rgba(220, 220, 220,.0);background-color:transparent;margin-left: -72px;}
.drop2 .dropdown-item:focus, .drop2 .dropdown-item:hover {background-color:transparent;}
.drop2 .dropdown-item {padding: 4px 0px;}
.dropdown-menu img{width: 40px;height: auto;margin: 1px auto; }
.content-detail{text-align:center;}
.content-detail p{margin:0 0 5px;}
a.confirm-btn{background-color: #0d5899;display: table;margin: 0 auto;text-align: center;padding: 6px 15px;color: #fff !important;text-transform: uppercase;font-size: 12px;font-weight: 700;letter-spacing: 1px;}
.gray-bg{background-color:#f6f6f6;}

#main-area footer{background-color: #ededed;position: absolute;width: 98.4%;left: auto;right: auto;margin: 0 auto;bottom: 0;min-height: 90px;}
.gray-bg .has-search .form-control {padding-left: 2.375rem;border-radius: 50px;border: 0px solid #ced4da;}
footer .form-control::placeholder {color: #919191;opacity: 1;}
footer .form-control:focus {color: #495057;background-color: #fff;outline: 0;box-shadow: 0 0 0 .2rem rgba(0,123,255,.0);}
footer .form-group {margin-bottom:0;}
.gray-bg .form-group {margin-bottom:0;}
.gray-bg .has-search .form-control-feedback {position: absolute;z-index: 2;display: block;width: 2.375rem;height: 2.375rem;line-height: 2.375rem;text-align: center;pointer-events: none;color: #aaa;}
.user_img {height: 60px;width: 60px;margin-right: 20px;}
.owl-slider.flag-img {padding: 14px 8px;}
.owl-nav button {position: absolute;top: 50%;background-color: #403f3f;color: #fff;margin: 0;transition: all 0.3s ease-in-out;}
.owl-nav button.owl-prev {left: 0;}
.owl-nav button.owl-next {right: 0;}
.owl-nav button {position: absolute;top: 32%;transform: translateY(-50%);}
.owl-dots {display:none;}
.flag-img span {font-size: 32px;position: relative;top: -9px;}
.flag-img img{cursor:pointer;}
.owl-nav button:focus {outline: none;}
#side-area footer ul.flag-img {padding:0;margin:0;text-align: center;overflow-y: scroll;height: 57px;}
#side-area footer ul.flag-img li{list-style-type:none;display:inline-block;padding: 2px 8px}
#side-area footer ul.flag-img li img{width: 50px;}
#side-area .body-content{overflow-y: scroll;overflow-x: hidden;min-height: 100%;height: 62.7vh;}
#side-area .body-content ul.contacts{padding:0;margin:0;}
.modal-header {background-color:#0d5899;text-align:center;}
.modal-footer {padding: 20px;border-top: 0px solid #dee2e6;background-color: #0d5899;}
.modal-body {padding: 2rem 4rem;min-height: 300px;background-color: #fefefe;}
.body-content .date {text-align: center;display: table;background-color: rgb(13, 88, 153);color: #fff;margin: 0 auto;padding: 5px 12px 6px;font-size: 12.5px;border-radius: 7.5px;text-transform: uppercase;box-shadow: 0 1px 0px rgba(0, 0, 0, .15);letter-spacing: 0.5px;}
#side-area .modal-title {margin: 0 auto;line-height: normal;display: table;color: #fff;}
#side-area .modal-body .form-control {padding: 7px 12px;font-size: 14px;color: #495057;border: 1px solid #eee;border-radius: 0;height: calc(2.5em + .75rem + 2px);}
#side-area .modal-header .close {padding: 0rem;margin: 0;}
#side-area .modal-dialog {text-align: center;}
#side-area .submit-btn {border-radius: 3px;width: auto;display: table;margin: 28px auto;padding: 9px 24px;background-color: #0d5899;color: #fff;border: 0;height: auto;}
#side-area .confirm-btn {border-radius: 3px;width: auto;display: table;margin: 28px auto;padding: 9px 24px;background-color: #52c6e5;color: #fff;border: 0;height: auto;}
#side-area .modal-body .table {width: 70%;margin: 0 auto;}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(38,143,255,.0);}
#side-area .table td{padding: 8px 10px;vertical-align: middle;border-top: 0px solid #dee2e6;text-align: left;}
#side-area .body-content ul.contacts li{list-style-type:none;padding: 0 20px;cursor: pointer;}
#side-area .body-content ul.contacts li.selected{background-color:#ffeaa9;}
#side-area .body-content ul.contacts li:hover{background-color:#f5f5f5;}
#side-area .body-content ul.contacts .active{background-color:#ebebeb;}
#side-area .body-content ul.contacts li span{display: block;}
#side-area .body-content ul.contacts li span img {width: 35px;position: absolute;right: 33px;}	
#side-area .body-content .bd-highlight {border-bottom: 1px solid #eee;padding: 10px 0;}
/**** side-area Css End ****/

/**** Main-area Css Start ****/
#main-area .body-content{overflow-y: scroll;height: 75.8vh;min-height: 100%;overflow-x: hidden;background-color: #fff;}
#main-area .body-content h6.green{color: #0d5899;}
#main-area .body-content h6.orange{color: orange;}
#main-area .body-content h6.red{color: red;}
#main-area .body-content h6.blue{color: blue;}
#main-area .body-content img{width:274px;}
.drop3 .dropdown-menu {margin-left: -270px;max-height: 450px;overflow-y: scroll;}
.drop3 a.dropdown-item{color:#403f3f!important;}.drop3 .dropdown-item {width: 19rem;}
.dropdown-item.active, .dropdown-item:active {color: #919191;text-decoration: none;background-color: #f8f9fa;}
#main-area .fa-phone{transform: rotate(90deg);}	
#main-area .badge {display: inline-block;width: auto;padding: 2px;font-size: 8px;line-height: 5px;color: #fff;text-align: center;white-space: nowrap;vertical-align: middle;background-color: #c33039;border-radius: 50px;position: relative;right: 10px;top: -1px;border: 3px solid #c33039;height: 16px;}
#main-area .author-img img{width: 40px;height: auto;}
#main-area footer .fa-grin-alt{color: #919191;position: relative;top: 10px;padding: 0 0 0 15px;}
#main-area footer .fa-paper-plane{color:#52c6e5;position: relative;top: 10px;padding: 0 10px 0 0;}
#main-area a.author-img{color:#0d5899;}
#main-area{border-right:1px solid #e1e1e1;height: 95vh;}
#main-area header{background-color:#ededed;}
#main-area header ul{padding:0;margin:0;text-align:right;}
#main-area header ul li{list-style-type:none;display:inline-block;padding-left: 30px;margin: 6px 0;font-size: 20px;}
#main-area header ul li a{color: #52c6e5;}
#main-area textarea.form-control {position: absolute;min-height: 50px;border-radius: 50px;border: none;outline: none;font-size: 14px;padding: 4px 30px 0;resize: none;left: 0;right: 0;margin: 0 auto;}
#main-area textarea::-webkit-scrollbar {width: 0;height: 0;}
.msgBox .arrow {width: 12px;height: 20px;overflow: hidden;position: relative;float: left;top: 6px;right: -1px;}
.msgBox .arrow .outer {width: 0;height: 0;border-right: 20px solid #c0d2ec;border-top: 10px solid transparent;border-bottom: 10px solid transparent;position: absolute;top: 0;left: 0;}
.msgBox .arrow .inner {width: 0;height: 0;border-right: 20px solid #c0d2ec;border-top: 10px solid transparent;border-bottom: 10px solid transparent;position: absolute;top: 0;left: 2px;}
.msgBox .message-body {float: left;width: 300px;height: auto;background-color:#c0d2ec;padding: 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}
.green-bg .message-body{background-color:#fad4bb;}	
.msgBox .message-body p {margin: 0;color:#403f3f;padding: 5px;}
.green-bg .message-body p {margin: 0;color:#403f3f;}
.message-body span{float: right;font-size: 12px;position: relative;top: 5px;}
.msgBox .arrow2 {width: 12px;height: 20px;overflow: hidden;position: relative;float: left;top: 6px;left: -1px;}
.msgBox .arrow2 .outer2 {width: 0;height: 0;border-left: 20px solid #fad4bb;border-bottom: 10px solid transparent;border-top: 10px solid transparent;position: absolute;top: 0;right: 0;}
.msgBox .arrow2 .inner2 {width: 0;height: 0;border-left: 20px solid #fad4bb;border-bottom: 10px solid transparent;border-top: 10px solid transparent;position: absolute;top: 0;right: 2px;}
.common-interface-area{background-color: #fff;
    box-shadow: 0 0 0;
}
.common-interface .middle-area {width:600px;}
.common-interface .body-content .date{margin: 15px auto;}
.common-interface .img_cont i{font-size: 25px;color: #403f3f;position: relative;top: 5px;margin-right: 6px;}
.common-interface #main-area footer {width: 94.7%;min-height: 145px;}
ul.footer-img {padding: 0;margin: 25px auto 0;display: table;}
ul.footer-img li{list-style-type:none;display:inline-block;padding: 8px;}
ul.footer-img .active img{background-color: #ccc;padding: 5px;}
.common-interface .img_cont {float: left;}
.common-interface .user_info p{margin: 0;}
.common-interface .user_info p strong{
    color:#0d5899;
}
.common-interface .form-control {height: calc(2.3em + .75rem + 2px);padding: 12px;font-size: 13px;border: 1px solid #ced4da;border-radius: 10px;}
.common-interface textarea.form-control {height: auto !important;}
.common-interface .form-control:focus {color: #495057;background-color: #fff;border-color: #ced4da;outline: 0;box-shadow: 0 0 0 .2rem rgba(0,123,255,.0);}
.common-interface #main-area textarea.form-control {position: relative;border-radius: 15px;border: 1px solid #ced4da;}
.common-interface .btn {font-size: 16px;border-radius: 8px;width: 50%;height: 40px;color: #fff;background-color: #0d5899;border: 0;}
.common-interface .btn-info:not(:disabled):not(.disabled).active:focus, .common-interface .btn-info:not(:disabled):not(.disabled):active:focus, .common-interface .show > .btn-info.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(58,176,195,.0);}
.common-interface .btn-info:not(:disabled):not(.disabled).active, .common-interface .btn-info:not(:disabled):not(.disabled):active, .common-interface .show > .btn-info.dropdown-toggle {color: #1f4e79;background-color: #f2f2f2;border-color: #ae5a21;}
.cleaning-request #main-area footer {width: 92.4%;min-height: 120px;}
.guest-interface #main-area textarea.form-control {border-radius: 50px!important;border:0px solid #ced4da!important;}
.guest-interface-footer {background-color: #fff;border-radius: 50px;margin: 0 7px;}
.guest-interface-footer textarea.form-control{padding: 10px 12px 0!important;}
#guest-interface #main-area .body-content{height: 61.7vh;}
#guest-interface .btn {font-size: 20px;border-radius: 50px;height: 42px;border: 0px solid #ae5a21;color: #fff;background-color:#0d5899;width: 42px;position: relative;top: 0px;}
#guest-interface .dropdown-item {width: 12rem;}
.common-interface-area #main-area header ul li {margin: 12px 0 0;}
#side-area .modal-body .accordion .btn {color: #fff;padding:8px;font-size: 20px;background-color: transparent;border-radius: 0;width: auto;height: auto;}
.card-header {padding: 2px;margin: 0;background-color: #0d5899;border-bottom: 0px solid rgba(0,0,0,.125);}
#side-area .modal-body .accordion .btn:hover{color: #fff;text-decoration: none;background-color: transparent;}
#side-area .modal-body .accordion .btn:focus {color: #fff;text-decoration: none;background-color: transparent;}
#side-area .modal-body .accordion .card{border:0;margin:0 0 10px;border-radius:0;}
#accordionExample {overflow-y: scroll;max-height: 300px;}
#side-area .close{color:#fff;opacity:1;}
/**** main-area Css End ****/
.d-block.ml-auto { max-width: 100px; }
.user_card .d-block.mx-auto { max-width: 100px; }