* {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Open Sans';
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    color: #747474;
}
.container {
    max-width: 1200px;
}
/* ===================== Form fields ================== */
.col-form-label {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    padding: 0;
    margin-bottom: 7px;
}
.form-control, select, select.form-control:not([size]):not([multiple]),
.select2-container--default .select2-selection--multiple {
    font-size: 14px;
    color: #333;
    padding: 10px 20px;
    height: 50px;
    border-radius: 3px;
    background-color: #ffffff;
    border: 1px solid #e2e4ea;
    transition: 0.3s;
}
.select2-container--default .select2-selection--multiple {
    padding: 7px 10px;
    min-height: 50px;
    height: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    float: right;
    margin-left: 5px;
}
.select2-container {display: block;}
.form-control::placeholder {
    color: #abacb7;
}
.form-control:focus {
    box-shadow: none;
    border: 1px solid #000;
}
textarea {
    width: 100%;
    font-size: 14px;
    color: #333;
    padding: 10px 20px;
    border-radius: 3px;
    background-color: #ffffff;
    border: 1px solid #e2e4ea;
    transition: 0.3s;
}
textarea:focus {
    border-color: #000;
}
select {
    -webkit-appearance: none;
    appearance: none;
    background: url("../images/select-arrow.png") no-repeat top 50% right 20px;
    padding-right: 40px !important;
}
.custom-checkbox {
    display: block;
    position: relative;
    margin: 0;
    padding-left: 30px;
    cursor: pointer;
}
.custom-checkbox .custom-check {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 19px;
    height: 19px;
    background-color: #fff;
    border: 2px solid #ededed;
    border-radius: 3px;
}
.custom-checkbox .custom-check::before {
    content: '';
    display: none;
	position: absolute;
	left: 4px;
	top: 0px;
	width: 7px;
	height: 12px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(35deg);
	z-index: 1;
}
.custom-checkbox input {
    position: absolute;
    opacity: 0;
}
.custom-checkbox input:checked ~ .custom-check {
    background-color: #fa4c91;
    border-color: #fa4c91;
}
.custom-checkbox input:checked ~ .custom-check:before {
    display: block;
}
.error {
    color: red;
    font-size: 14px;
    font-weight: 400;
}
/* ================== Buttons ====================== */
.btn {
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 600;
    transition: 0.4s;
    padding: 10px 20px;
    text-transform: capitalize;
}
.pink-btn {
    color: #fff;
    border: 2px solid #f94b91;
    border-radius: 3px;
    background-color: #f94b91;
}
.pink-btn:hover {
    background-color: #fff;
    color: #f94b91;
}
.pink-outline-btn {
    font-size: 16px;
    border: 2px solid #f94b91;
    border-radius: 5px;
    background-color: #fff;
    color: #f94b91;
}
.pink-outline-btn:hover {
    background-color: #f94b91;
    color: #fff;
}
.blue-btn {
    color: #fff;
    background-color: #3692cb;
    border: 2px solid #3692cb;
}
.blue-btn:hover {
    background-color: #fff;
    color: #3692cb;
}
/* ===================== Modal ========================= */
.modal-header {
    justify-content: center;
    font-size: 24px;
    color: #333333;
    font-weight: 600;
    border:  none;
    padding-top: 25px;
}
.modal-header .close {
    padding: 0;
    margin: 0;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 50px;
    height: 50px;
    background-color: #fa4c91;
    border:  2px solid #fa4c91;
    opacity: 1;
    border-radius: 45px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    outline: none;
}
.modal-header .close:hover {
    background-color: #fff;
    color: #fa4c91;
}
.modal-body {
    padding: 40px;
    text-align: center;
}
.modal-footer {
    justify-content: flex-start;
}
.edit-SR-modal .modal-dialog{
    max-width: 910px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    margin: 90px auto;
}
.edit-service-request-form textarea {
    display: block;
    width: 100%;
    min-height: 130px;
    resize: vertical;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #e2e4ea;
    border-radius: 4px;
}
.edit-service-request-form textarea:focus {
    border-color: #000;
}
.edit-service-request-form .submit-buttons {
    padding-top: 30px;
}
.edit-service-request-form .submit-buttons .btn {
    font-size: 20px;
    padding: 10px 50px;
}
.edit-service-request-form .submit-buttons .cancel-button {
    font-size: 20px;
    color: #333333;
    font-weight: 600;
    margin-left: 20px;
    text-decoration: none;
}
/* Delete SR Modal */
.delete-SR-modal .modal-body {
    text-align: center;
}
.delete-SR-modal .modal-body p {
    font-size: 16px;
    color: #747474;
    font-weight: 400;
    margin-bottom: 30px;
}
.delete-SR-modal .modal-body .yes-no-btns .btn {
    width: 100px;
    margin: 0 10px;
}
.delete-SR-modal-details textarea {
    min-height: 100px;
}
.delete-SR-modal-details .btn {
    padding: 10px 50px;
    font-size: 20px;
}

/* Submit SR Modal -JR */
.submit-SR-modal .modal-body {
    text-align: center;
}
.submit-SR-modal .modal-body p {
    font-size: 16px;
    color: #747474;
    font-weight: 400;
    margin-bottom: 30px;
    text-align:center;
}
.submit-SR-modal .modal-body .yes-no-btns1 .btn {
    width: 100px;
    margin: 0 10px;
}






.login-page {
    position: relative;
}
.login-box {
    width: 100%;
    height: 100vh;
    background: url("../images/login-page-bg.png") no-repeat center / 100% 100%;
}
.login-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.input-fields {
	display: block;
	position: absolute;
	max-width: 600px;
	width: 100%;
	top: 30%;
    left: 60%;
    transition: 0.4s;
}
.input-fields .logo {
    text-align: center;
    padding-bottom: 55px;
}
.remember-forgot-password {
	display: flex;
	justify-content: space-between;
    align-items: center;
    padding: 5px 0 40px;
}
.remember-forgot-password label,
.remember-forgot-password a,
.forgot-password-box a {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
}
.back-button-div {
    display: block;
    text-align: right;
    padding-top: 20px;
}
.login-forgot-password-box .forgot-password-box {
    display: none;
    transition: 0.4s;
}
.login-forgot-password-box.show-forgot-password .forgot-password-box {
    display: block;
}
.login-forgot-password-box.show-forgot-password .login-fields {
    display: none;
}
.login-forgot-description {
	position: absolute;
	top: 17%;
	left: 22%;
	max-width: 360px;
	width: 100%;
	text-align: center;
}
.login-forgot-description h3 {
    font-size: 35px;
    line-height: 30px;
    color: #ec1770;
    font-weight: 600;
    margin-bottom: 20px;
}
.login-forgot-description p {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    max-width: 350px;
    width: 100%;
}
.login-forgot-password-box .forgot-password-description {
    display: none;
}
.login-forgot-password-box.show-forgot-password .forgot-password-description {
    display: block;
}
.login-forgot-password-box.show-forgot-password .login-description {
    display: none;
}
/* ======================================================================= */
/*                              Header                                     */
/* ======================================================================= */
.site-header {
    box-shadow: 0px 5px 19px rgba(0,0,0,0.08);
}
.navbar {
    width: 100%;
    padding: 0px 16px 0 10px;
    justify-content: space-between;
}
.navbar-expand-md .navbar-collapse {
    justify-content: flex-end;
}
.navbar-brand {
    padding: 3px 0;
    margin: 0;
}
.navbar-expand-md .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-size: 14px;
    line-height: 30px;
    color: #333333;
    font-weight: 400;
    padding: 30px 20px;
    outline: none;
    transition: 0.3s;
}
.navbar-expand-md .navbar-nav .nav-link.dropdown-toggle {
    padding-right: 56px;
    border-left: 1px solid #d3d3d3;
}
.navbar-expand-md .navbar-nav .active .nav-link {
    color: #fa4d92;
}
.navbar-expand-md .navbar-nav .nav-link > i {
	font-size: 23px;
	padding-right: 5px;
	line-height: 30px;
}
.navbar-nav .bg-darker {
    background-color: #efefef;
}
.dropdown-toggle::after {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    height: 25px;
    width: 10px;
}
.dropdown-menu {
    top: 98%;
	width: 100%;
	padding: 0;
    border: none;
    border-top: 1px solid #d3d3d3;
}
.dropdown-item {
    background-color: #efefef;
    padding: 10px 20px;
    transition: 0.3s;
}
.navbar-light .navbar-nav .nav-link:hover {
    color: #fa4d92;
}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {
    background-color: #fa4d92;
    color: #fff;
}
.notif-number {
	font-size: 12px;
	font-weight: 700;
	padding: 3px 5px 3px 5px;
	line-height: 12px;
	background-color: #fc3535;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	position: absolute;
	top: 36%;
	left: 47%;
}
/* ======================================================================= */
/*                       My Servicve Requests                              */
/* ======================================================================= */

.content-with-mild-dark-bg {
	background-color: #f7f7f7;
}

.page-title {
    background: url("../images/page-title-bg.png") no-repeat center / cover;
    padding: 24px 0 41px;
}
.page-title h3 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
    text-transform: capitalize;
}

/* request filter form */


.service-request-listing-wrap {
    margin-top: -26px;
    padding-bottom: 30px;
}
.service-request-search-filter-wrap {
	display: flex;
}
.service-request-form-wrap {
    position: relative;
    z-index: 99;
}
.service-request-form {
    display: inline-block;
    max-width: 726px;
    width: 100%;
	border: 1px solid #e2e4ea;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
}
.service-request-form-inner {
    display: flex;
    align-items: center;
    max-width: 800px;
    width: 100%;
}
.search-box {
    display: inline-block;
	position: relative;
	max-width: 250px;
	width: 100%;
}
.select-box {
    display: inline-block;
	max-width: 196px;
	width: 100%;
}
.date-box {
    display: inline-block;
    position: relative;
	max-width: 270px;
	width: 100%;
}
/* datepicker */
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #f94b91;
}
.daterangepicker td.in-range {
    background-color: #f94b9121;
}
.ui-datepicker .ui-datepicker-prev::before {
    content: '\f104';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.ui-datepicker .ui-datepicker-next::before {
    content: '\f105';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.search-box input {
    width: 100%;
    height: 50px;
    border: none;
    padding: 10px 10px 10px 40px;
    border-right: 1px solid #e2e4ea;
}
.search-box i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}
.select-box select {
    width: 100%;
    border: none;
    border-right: 1px solid #e2e4ea;
    padding-left: 10px;
    padding-right: 35px;
}
.date-box input {
    width: 100%;
    height: 50px;
    border: none;
    padding: 10px 30px 10px 10px;
    background: url("../images/datepicker-calender.png") no-repeat top 50% right 20px;
}
.service-request-search-filter-wrap .submit-btn {
    display: inline-block;
}
.service-request-search-filter-wrap .submit-btn .btn {
	height: 48px;
	padding: 0 15px;
	margin-left: 10px;
}
.service-request-filter-wrap {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 800px);
    padding-left: 30px;
}
.priprity-filter {
    position: relative;
	max-width: 160px;
	width: 100%;
}
.request-filter {
    position: relative;
	max-width: 160px;
    width: 100%;
    height: 50px;
}
.priprity-filter .filter-dropdown,
.request-filter .filter-dropdown {
    background-color: #fff;
    border: 1px solid #e2e4ea;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
    display: none;
    position: absolute;
    top: 98%;
}
.priprity-filter .filter-dropdown label,
.request-filter .filter-dropdown label {
    margin: 10px 13px;
    padding-left: 25px;
}
.filter-dropdown label .custom-check {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    border-width: 1px;
    border-color: #fa4c91;
}
.filter-dropdown label input:checked ~ .custom-check {
    background-color: #fff;
}
.filter-dropdown label input:checked ~ .custom-check:before {
    border: solid #fa4c91;
    border-width: 0 2px 2px 0;
    width: 5px;
    height: 9px;
    top: 1px;
    left: 4px;
}
.apply-btn {
    padding: 7px 15px;
}
.apply-btn button {
    font-size: 14px;
    font-weight: 400;
    padding: 3px 15px;
    color: #fff;
    background-color: #3a94cc;
    text-transform: capitalize;
    border: 1px solid #3a94cc;
    border-radius: 3px;
    cursor: pointer;
}
.apply-btn button:hover {
    background-color: #fff;
    color: #3a94cc;
}
.priprity-filter.show-dropdown .filter-dropdown,
.request-filter.show-dropdown .filter-dropdown {
    display: block;
    width: 100%;
}
.priprity-filter .which-filter,
.request-filter .which-request-filter {
    background: #fff url("../images/select-arrow.png") no-repeat top 50% right 20px;
    padding: 12px 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
}
.priprity-filter.show-dropdown .which-filter,
.request-filter.show-dropdown .which-request-filter {
    background: #fff url("../images/arrow-upside.png") no-repeat top 50% right 20px;
}

/* request listing */

.request-listing {
    padding-bottom: 30px;
}
.request-individual {
    display: block;
    width: 100%;
    padding: 35px 30px;
    margin-bottom: 20px;
    border: 1px solid rgba(161,161,161,0.4);
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    transition: 0.4s;
}
.request-individual:hover {
    background-color: #f6fcff;
    border-color: #94c3e0;
}
.request-title {
    text-align: left;
}
.request-title > a {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: #333333;
    text-decoration: none;
}
.requset-to-wrap {
	display: flex;
	justify-content: space-between;
    align-items: flex-end;
    margin-top: -30px;
}
.request-to {
    display: flex;
    flex-wrap: wrap;
}
.request-item {
	padding-right: 50px;
    text-align: left;
}
.request-item .small-title {
    font-size: 14px;
    font-weight: 400;
    color: #747474;
    text-transform: capitalize;
}
.request-item .small-title-detail {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    text-transform: capitalize;
}
.request-item .small-title-detail.red-color {
    color: red;
    font-weight: 600;
}
.request-item .small-title-detail.pink-color {
    color: #f94b91;
    font-weight: 600;
}
.request-item .small-title-detail.green-color {
    color: #17a100;
    font-weight: 600;
}
.request-item .small-title-detail.blue-color {
    color: #3a94cc;
    font-weight: 600;
}
.request-item .small-title-detail.low-priority {
    color: #17a100;
    font-weight: 600;
}
.request-item .small-title-detail.medium-priority {
    color: #3a94cc;
    font-weight: 600;
}
.request-item .small-title-detail.high-priority {
    color: #fa4c91;
    font-weight: 600;
}
.action-buttons {
	display: flex;
    align-items: center;
    justify-content: flex-end;
}
.action-buttons .reopen-button {
    display: none;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-right: 10px;
    text-decoration: none;
}
.action-buttons .reopen-button i {
    display: block;
    font-size: 18px;
    color: #f94b91;
    padding-bottom: 3px;
}
.requested-on-date {
	font-size: 14px;
	color: #747474;
    text-transform: capitalize;
    text-align: right;
    padding-top: 20px;
}
.requested-on-date span {
    font-size: 16px;
    color: #333;
}
.request-individual.closed-request .reopen-button {
    display: block;
}
.service-request-listing table.dataTable tbody th, .service-request-listing table.dataTable tbody td {padding: 0;}
.service-request-listing table.dataTable tbody tr, .service-request-listing table.dataTable tbody tr {border: none;background-color: transparent;}
.service-request-listing .dataTables_wrapper .dataTables_paginate {display: block;width: 100%; text-align: center;}
.request-listing table.dataTable {width: 100% !important;border: none;}
/* ======= Service request details ========= */
.service-request-details {
    margin-top: -25px;
}
.card-box {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    background-color: #ffffff;
    border: 1px solid rgba(161,161,161,0.4);
    padding: 30px;
    margin-bottom: 30px;
}
.card-box h5,
.card-box h6 {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
}
.card-box h6 {
    font-size: 16px;
}
.attachments {
    padding-top: 20px;
}
.description-block .attachments-box span {
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    color: #747474;
    border-radius: 4px;
    background-color: #f0f0f0;
    border: 1px solid #dbdbdb;
    padding: 5px 10px 5px 35px;
    margin-right: 10px;
}
.description-block .attachments-box span::before {
    content: '\e908';
    font-family: 'venita-icons' !important;
    font-size: 18px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.chat-box {
    max-height: 510px;
    height: auto;
    overflow-y: auto;
}
.chat-box .chat-date-span {
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: 400;
    padding-bottom: 20px;
}
.chat-box .chat-date-span i {
    color: #9a9a9a;
    padding-right: 5px;
}
.chat-inner::after {
    content: '';
    display: table;
    clear: both; 
}
.chat-inner .username {
    display: inline-block;
    font-size: 16px;
    color: #333333;
    font-weight: 600;
    padding-bottom: 5px;
}
.chat-inner .received {
    margin-bottom: 10px;
}
.chat-inner .received::before {
    content: '';
    display: table;
    clear: both;
}
.chat-inner .received-message {
    position: relative;
    max-width: 70%;
    width: 100%;
    border-radius: 10px;
    background-color: #f3f3f3;
    border: 1px solid rgba(161,161,161,0.4);
    margin-right: 30px;
    padding-bottom: 20px;
}
.chat-inner .received-message p,
.chat-inner .sent p {
    font-size: 14px;
    line-height: 22px;
    color: #747474;
    font-weight: 400;
    margin: 0;
    padding: 10px 50px 10px 10px;
}
.chat-inner .venita-reply-icon {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 33px;
    height: 33px;
    color: #3a94cc;
    background-color: #fff;
    text-align: center;
    line-height: 33px;
    border-radius: 33px;
    font-size: 18px;
    border: 1px solid rgba(161,161,161,0.4);
    cursor: pointer;
}
.replied-to-this .venita-reply-icon {
    color: #fff;
    background-color: #3a94cc;
    border: 1px solid rgba(161,161,161,0.4);
}
.chat-inner .sent {
    position: relative;
    max-width: 70%;
    width: 100%;
    border-radius: 10px;
    background-color: #fa4c91;
    border: 1px solid rgba(161,161,161,0.4);
    float: right;
    overflow: hidden;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.chat-inner .sent p {
    color: #fff;
}
.chat-inner .time {
    position: absolute;
    bottom: 1px;
    right: 15px;
    font-size: 12px;
    color: #8c8c8c;
    font-weight: 400;
}
.chat-inner .sent .time {
    color: #ebebeb;
}
.chat-inner .received.replied-to-above {
    max-width: 70%;
    width: 100%;
    background-color: #f3f3f3;
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #fa4c91;
}
.chat-inner .received.replied-to-above .above-text {
    background-color: #fa4c91;
}
.chat-inner .received.replied-to-above .above-text .username,
.chat-inner .received.replied-to-above .above-text p {
    color: #fff;
}
.chat-inner .received.replied-to-above > p {
    padding: 10px;
}




.replied-to-above .above-text {
    background-color: #f3f3f3;
    padding: 10px;
}
.replied-to-above .above-text p {
    color: #747474;
    padding: 0;
}
.reply-box {
    padding: 0;
    overflow: hidden;
}
.reply-box .title {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    background-color: #e1cddd;
    border: 1px solid rgba(161,161,161,0.4);
    padding: 10px 20px;
}
.reply-box .title i {
    font-size: 18px;
    color: #3a94cc;
    padding-right: 5px;
}
.reply-box form {
    padding: 20px 30px 30px;
}
.reply-box .reply-title {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
}
.type-reply {
    overflow: hidden;
    margin-bottom: 30px;
}
.reply-to-message {
    padding: 10px;
    border-bottom: 1px solid #e2e4ea;
    background: #f3f3f3;
}
.reply-box textarea {
    width: 100%;
    min-height: 90px;
    border: 1px solid #e2e4ea;
    border-radius: 10px;
    background: #fff;
    padding: 10px 15px;
    resize: vertical;
}
.reply-box textarea:focus {
    outline: none;
}
.attach-file-input {
    display: flex;
    align-items: flex-start;
}
.attach-file-input .input-files-wrap {
    position: relative;
    max-width: 473px;
    width: 100%;
}
.attach-file-input .form-control {
    height: auto;
    margin-bottom: 15px;
}
.attach-file-input .add-more-button {
    color: #3a94cc;
    margin-left: 20px;
    margin-top: 10px;
    text-decoration: none;
}
.attach-file-input .add-more-button i {
    padding-right: 5px;
}
.input-new-file-attach {
    position: relative;
}
.input-new-file-attach a:not([href]):not([tabindex]).minus {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 26px;
    color: #3a94cc;
    background-color: #fff;
    cursor: pointer;
}
.reply-box .btn {
    padding: 10px 55px;
    margin-top: 10px;
}
.service-request-details .submit-buttons {
    text-align: right;
    padding-bottom: 25px;
}
.service-request-details .submit-buttons #replyshow {
    padding: 7px 25px;
}
.service-request-details--info {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    background-color: #f3f3f3;
    border: 1px solid rgba(161,161,161,0.4);
    overflow: hidden;
    margin-bottom: 30px;
}
.service-request-details--info .details-info-title .title {
    position: relative;
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    padding: 15px 30px;
    background-color: #fa4d92;
    border: 1px solid rgba(161,161,161,0.4);
}
.details-info-title .name,
.details-info-individual {
    display: table;
    background-color: #fff;
    padding: 20px 30px;
    width: 100%;
}
.details-info-individual {
    background: transparent;
    padding: 20px 0;
    border-bottom: 1px solid #e6e4e4;
}
.details-info-title .name .title-span,
.details-info-individual .title-span {
    display: table-cell;
    width: 37%;
    text-transform: capitalize;
}
.details-info-title .name .name-span,
.details-info-individual .name-span  {
    display: table-cell;
    width: 63%;
    text-transform: capitalize;
}
.details-info-list {
    padding: 0 30px;
}
.details-info-title .name .title-span {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
}
.details-info-title .name .name-span {
    font-size: 20px;
    color: #3793cb;
    font-weight: 600;
}
.details-info-individual .title-span,
.details-info-individual .name-span  {
    font-size: 16px;
    color: #747474;
    font-weight: 400;
}
.details-info-individual .name-span {
    color: #333333;
    word-break: break-all;
}
.details-info-individual.email .name-span {
    text-transform: lowercase;
    word-break: break-all;
}
.details-info-individual.email .name-span a {
    color: #333;
}
.details-info-individual.status select {
    padding: 0;
    width: 90%;
    height: auto;
    border: none;
    text-transform: capitalize;
    font-size: 16px;
    outline: none;
}
.details-info-individual.status select.blue-color {
    color: #3a94cc;
}
.details-info-individual.status select.red-color {
    color: #f80000;
}
.details-info-individual.status select.green-color {
    color: #17a100;
}
.details-info-individual.priority .name-span {
    color: #17a100;
}
.service-request-history {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    background-color: #f3f3f3;
    border: 1px solid rgba(161,161,161,0.4);
    overflow: hidden;
    margin-bottom: 30px;
}
.service-request-history > .history-title {
    font-size: 20px;
    color: #333333;
    font-weight: 600;
    background-color: #e1cddd;
    border-bottom: 1px solid rgba(161,161,161,0.4);
    padding: 20px 30px;
    text-transform: capitalize;
}
.history-individual {
    padding: 20px;
    border-bottom: 1px solid #e6e4e4;
}
.history-individual .history-title {
    font-size: 14px;
    color: #747474;
    font-weight: 400;
    padding-bottom: 5px;
    text-transform: capitalize;
}
.history-individual .history-title .blue-text,
.history-individual .history-info .blue-text {
    color: #53a1d1;
}
.history-individual .history-info {
    display: table;
    width: 100%;
    font-size: 12px;
    text-transform: capitalize;
}
.history-individual .history-info .date-n-time {
    display: table-cell;
    width: 60%;
}
.history-individual .history-info .status {
    display: table-cell;
    width: 40%;
}
.service-requests-action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.service-requests-action-buttons .edit-delete-buttons a {
    display: inline-block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
    color: #333;
    margin-right: 33px;
}
.service-requests-action-buttons .edit-delete-buttons a > i {
    display: block;
    font-size: 18px;
    color: #fa4c91;
}
.service-requests-action-buttons .back-button {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #f94b91;
    font-weight: 600;
    text-decoration: none;
        text-decoration: none;
    transition: 0.5s all;
}
.service-requests-action-buttons .back-button i {
    font-size: 24px;
    padding-right: 8px;
}
.service-requests-action-buttons .back-button:hover{
    color: #333;
}










/* dashboard css */
.dashboard-page .page-title{
    padding: 33px 0;
}
.page-title.title-center {
    padding: 33px 0;
    text-align: center;
}
.page-title.title-center {
    padding: 24px 0 41px;
}
.dahsboard-data {
	padding-top: 55px;
}
.dash-box {
    display: block;
    padding: 27px 22px 15px;
    border: 1px solid rgba(161,161,161,0.4);
    border-radius: 10px;
    box-shadow: 0 0 17px rgba(0,0,0,0.15);
    text-align: right;
    margin-bottom: 20px;
}
.pink-bg-shape {
    background: #fff url("../images/pink-bg-shape.png") no-repeat bottom -50px left -15px;
}
.green-bg-shape {
    background: #fff url("../images/green-bg-shape.png") no-repeat bottom -50px left -15px;
}
.blue-bg-shape {
    background: #fff url("../images/blue-bg-shape.png") no-repeat bottom -50px left -15px;
}
.dash-img {
	width: 119px;
	height: 119px;
	border-radius: 100px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
	background-color: #ffffff;
	border: 1px solid rgba(161,161,161,0.4);
	text-align: center;
	line-height: 110px;
	display: inline-block;
}
.dash-info {
    text-align: left;
    margin-top: -32px;
    padding-left: 17px;
}
.dash-info h3 {
    font-size: 50px;
    color: #333333;
    font-weight: 700;
    margin-bottom: 5px;
}
.dash-info h5 {
    font-size: 18px;
    color: #333333;
    font-weight: 600;
    text-transform: uppercase;
}
.table-wrap h4 {
    font-size: 18px;
    color: #333333;
    font-weight: 600;
    text-transform: capitalize;
}

/* tables */

.table-wrap {
    padding-top: 25px;
    padding-bottom: 50px;
}
.common-table {
    border: 1px solid #d2d2d2;
}
table.dataTable {
    border-collapse: collapse;
    width: 100%;
}
table.dataTable thead {
    background-color: #e7e7e7;
}
table.dataTable thead th, table.dataTable thead td {
    font-size: 14px;
    color: #333333;
    font-weight: 600;
    border-bottom: 1px solid #d2d2d2;
    text-transform: capitalize;
}
table.dataTable thead th:last-child, table.dataTable thead td:last-child {
    text-align: right;
}
table.dataTable tbody th, table.dataTable tbody td {
    font-size: 14px;
    color: #777777;
    font-weight: 400;
    padding: 10px 18px;
    text-transform: capitalize;
}
table.dataTable td.email-id {
    text-transform: none;
}
table.dataTable tbody th:last-child, table.dataTable tbody td:last-child {
    text-align: right;
}
table.dataTable tbody tr, table.dataTable tbody tr {
    border-bottom: 1px solid #d2d2d2;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    background-color: #fff;
}
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even {
    background-color: #f6f6f6;
}
table.dataTable tbody td .green-text {
    color: #109e00;
}
table.dataTable tbody td .blue-text {
    color: #4994bb;
}
table.dataTable tbody td .red-text {
    color: #f80000;
}
table.dataTable .action-icon {
    font-size: 18px;
    color: #000;
    margin-left: 3px;
    text-decoration: none;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
table.dataTable > tbody > tr.child span.dtr-title {
    padding-bottom: 5px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before, 
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
    top: 50%;
    transform: translateY(-50%);
}
table.dataTable td.email-id a {
    font-size: 14px;
    color: #777777;
    font-weight: 400;
    padding: 10px 18px;
}
table.dataTable td.dataTables_empty {
    text-align: center !important;
    padding: 30px;
}
.dataTables_wrapper .dataTables_info {
    color: #858585;
}
/* ======= Pagination ======== */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f94b91;
    color: #fff !important;
    border:  none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 10px 15px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    margin: 0 5px;
    border:  none !important;
    cursor: pointer;
    text-decoration: none;
}
.paginate_button.next,
.paginate_button.previous {
    font-size: 22px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #333 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover {
    color: #f94b91 !important;
}
.dataTables_wrapper .dataTables_paginate {
    padding: 20px 0 30px;
}
/* admin create user */
.create-user--page .page-title {
    text-align: center;
}
.create-user-wrap {
    margin-top: -20px;
    padding: 0 15px 50px;
}
.create-user-wrap .alert {
    margin-top: 30px;
}
.create-user-box {
    max-width: 651px;
    width: 100%;
    padding: 30px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0 17px rgba(0,0,0,0.15);
    background-color: #ffffff;
    border: 1px solid rgba(161,161,161,0.4);
}
.inp-toggle-eye {
	position: relative;
}
.inp-toggle-eye span {
	position: absolute;
	right: 15px;
	top: 16px;
	z-index: 9;
	color: #000;
	font-size: 18px;
    cursor: pointer;
}
.password-span {
    padding-right: 40px;
}
.col-form-label span {
    color: red;
}
.create-user-box .btn {
    max-width: 68%;
    margin: auto;
}
.create-user-box .submit-button {
    padding-top: 20px;
}

.create-user-box .username,
.create-user-box h4 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border: none;
}
.create-user-box .username span {
    color: #f0578d;
}
.create-user-box h4 {
    padding-top: 0;
    text-align: left;
    border-bottom: 1px solid #d2d2d2;
}
.additional-details-accordion h4 {
    text-align: left;
    padding-top: 20px;
}



/* ==================== Admin All Users Page ================== */
/*.all-users-table-page {
    position: relative;
    min-height: 100vh;
}
.all-users-table-page footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}*/
.all-users-table {
    margin-top: -25px;
}
.all-users-table .search-box {
    max-width: 55%;
}
.all-users-table .select-box {
    max-width: 44%;
}
.all-users-table .select-box select {
    border:  none;
    background: url("../images/select-arrow.png") no-repeat top 50% right 10px;
}


/* ========================= Settings ======================== */
.settings-profile-details h4 {
    border-bottom: none;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 0;
}
.settings-wrap {
    margin-top: -25px;
}
.settings-wrap .settings-profile-details {
    margin-bottom: 30px;
}


/* ====================== Create New Service Request ==================== */
.create-service-request-box-wrap {
    padding: 0 15px;
}
.create-service-request-page {
    padding-bottom: 50px;
}
.create-service-request-box {
    max-width: 1030px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    background-color: #ffffff;
    padding: 25px;
    margin: 40px auto 0;
}
.calender-icon {
    background: url("../images/datepicker-calender.png") no-repeat top 54% right 15px;
}
.form-with-add-button {
    display: flex;
    align-items: flex-start;
}
.form-with-add-button .with-tooltip {
    position: relative;
    max-width: 473px;
    width: 100%;
}
.with-tooltip .tooltip-mark {
    display: inline-block;
    color: #858585;
    font-size: 14px;
    position: absolute;
    top: 11px;
    right: 20px;
}
.create-service-request-box .add-more-button {
    display: inline-block;
    font-size: 14px;
    color: #3a94cc;
    font-weight: 600;
    text-decoration: none;
    margin-left: 20px;
    margin-top: 42px;
}
.divfileupload .minus {
    margin-top: 12px;
    margin-left: 20px;
}
.divfileupload .minus > i {
    color: #3a94cc;
}
.create-service-request-box .add-more-button i {
    padding-right: 5px;
}

.create-service-request-box textarea {
    min-height: 100px;
    width: 100%;
    resize: vertical;
    border-radius: 3px;
    background-color: #ffffff;
    border: 1px solid #e2e4ea;
    padding: 15px 20px;
}
.create-service-request-box textarea:focus {
    border-color: #000;
}
.create-service-request-box .submit-buttons .btn {
    font-size: 20px;
    font-weight: 600;
    padding: 10px 50px;
}
.create-service-request-box .submit-buttons .cancel-btn {
    font-size: 20px;
    color: #333333;
    font-weight: 600;
    margin-left: 30px;
    text-decoration: none;
}
/* ======================================================================= */
/*                              Footer                                     */
/* ======================================================================= */
.site-footer {
	background-color: #fff;
	padding: 12px 15px;
	border-top: 1px solid #dedede;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.footer-inner p,
.footer-inner a {
    font-size: 14px;
    font-weight: 400;
    color: #9a9a9a;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.footer-inner a:hover {
    color: #ec1770;
}
.social-sharing-links img {
    width: 24px;
    height: 24px;
}
.social-sharing-links ul {
    margin: 0;
    padding: 0;
}
.social-sharing-links ul li {
    display: inline-block;
    margin-right: 30px;
}

/* Notification CSS  Past by Dhrupal */
.noti-dropdown .dropdown-menu {
    width:288px;
    max-height: 260px;
    overflow-y: scroll;
}
.navbar-expand-md .navbar-nav .noti-dropdown .nav-link.dropdown-toggle {
    padding-right: 26px;
}
.noti-dropdown .dropdown-toggle::after {
    display: none;
}
.notificaton-individual:not(:last-child) {
    border-bottom: 1px solid #cfcfcf;
    padding-bottom: 15px;
    padding-top: 15px;
}
.notification-request-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
}
.notification-title {
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 5px;
    text-transform: capitalize;
}
.noti-dropdown .blue-text {
    color: #53a1d1;
}
.notification-info {
    display: table;
    width: 100%;
    font-size: 12px;
    text-transform: capitalize;
}
/*.dropdown-item:hover .blue-text {
    color: #fff;
    text-decoration: underline;
}*/

/* For Assign to box */
.assign_to_box {
    padding-bottom: 30px;
}

/* History Box */
.description-block .attachments-box span a {font-size: 14px;font-weight: 400;color: #747474;}
.description-block.attachments .attachments-box {padding: 10px;}
.chat-box .chat-date-span {display:block;width:100%;clear:both;}
.history-details {max-height: 270px;height: 100%;overflow-y: scroll;}

@media screen and (max-width: 767px) {
    .noti-dropdown .dropdown-menu {
        width: 100%;
    }
    .notification-request-title {
        text-align: right;
    }
}



/*-------------- 5-5-20*/
.more_btn {
    display: inline-block;
    font-size: 14px;
    color: #3a94cc !important;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none !important;
    margin-left: 20px;
    margin-top: 11px;
}
.more_btn i{
    padding-right: 5px;
}
.pop-more-button {
    display: inline-block;
    font-size: 14px;
    color: #3a94cc !important;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none !important;
    margin-left: 20px;
    margin-top: 42px;
}
.pop-more-button i{
    padding-right: 5px;
}
.description-block .attachments-box.row{
    margin-bottom: 1rem;
}
.description-block .attachments-box.row span{
    font-size: 14px;
    color: #333;
    padding: 12px 20px 10px 40px;
    height: 50px;
    border-radius: 3px;
    border: 1px solid #e2e4ea;
    transition: 0.3s;
}
.description-block .attachments-box.row span a{
    color: #333;
}
.grid_request .request-item{padding-right: 15px;}
.grid_request .assign {
    width: 21%;
}
.grid_request .due-date{
    width: 15%;
}
.grid_request .stuts {
    width: 14%;
}
.grid_request .location {
    width: 35%;
}
.grid_request .priority {
    width: 15%;
}
.grid_request .request-to{
    width: calc(100% - 250px);
}
.grid_request .request-actions{
    width: 250px;
}
.requset-to-wrap.grid_request{
    margin-top: 0;
    align-items: center;
}
.grid_request .grid_inner{
    display: flex;
    width: 100%;
}
.grid_request .request-title{
    padding-bottom: 15px;
}

.back_title .back-button {
    font-size: 18px;
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 1px;
    text-decoration: none;
    transition: 0.5s all;
    color: #f94b91;
}
.back_title .back-button i {
    margin-right: 5px;
    font-size: 20px;
    position: relative;
    top: 3px;
    transition: 0.5s all;
}
.back_title {
    max-width: 651px;
    margin: 0 auto;
    position: relative;
    padding: 0 100px;
}
.back_title .back-button:hover{
    padding-left: 10px;
}
.request-filter{
    max-width: 190px;
    padding-left: 30px;
}
.chat-inner .sent{
    overflow: visible;
}
.chat-inner .received.replied-to-above{
    position: relative;
}
.replied-to-above .above-text{
    border-radius: 10px 10px 0 0;
}
.description-block .attachments-box.row span{
    height: auto;
    padding: 14px 20px 12px 40px;
    word-break: break-all;
}
.reply-box .type-reply{
    margin-top: 10px;
}
.reply-box .type-reply .reply-to-message{
    border: 1px solid #e2e4ea;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    resize: none;
}
.reply-box .type-reply textarea{
    border-radius: 0 0 3px 3px;
}
.create-user-box > .submit-button {
	display: flex;
	align-items: center;
}
.create-user-box > .submit-button .cancel-btn {
	font-size: 20px;
	color: #333333;
	font-weight: 600;
	margin-left: 30px;
	text-decoration: none;
	line-height: normal;
}
.create-user-box > .submit-button .btn-block.pink-btn{
	display: inline-block;
	width: auto;
	max-width: 200px;
	margin:0;
}
table.dataTable thead td:not(.sorting_disabled):first-child, table.dataTable thead th:not(.sorting_disabled):first-child{pointer-events: none;}
table.dataTable thead td:not(.sorting_disabled):first-child::after, table.dataTable thead th:not(.sorting_disabled):first-child::after {
    content: none !important;
}
table.dataTable tbody td:nth-child(3){
    text-transform: inherit;
}
.hover_div {
    background-color: #fa4d92;
    color: #fff;
    display: inline-block;
    padding: 10px 15px;
    position: absolute;
    top: 30px;
    width: 320px;
    left: -120px;
    font-size: 14px;
    line-height: normal;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s all;
}
.hover_div:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fa4d92;
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    margin-left: -10px;
    transition: 0.7s all;
}
a.view_more_cls:hover .hover_div{
    opacity: 1;
    visibility: visible;
}
a.view_more_cls:hover .hover_div:before{
    top: -10px;
}
a.view_more_cls {
    position: relative;
    text-decoration: none;
}
.details-info-individual a:not(.view_more_cls)[data-toggle="tooltip"]{
    pointer-events: none;
}
.service-request-history .details-info-individual.name span.title-span {
    font-size: 14px;
    width: ;
}
.service-request-history .details-info-individual.name {
    border-color: #e6e4e454;
    padding: 6px 0;
}
.service-request-history .details-info-individual .name-span{
    font-size: 14px;
}
.form-control:disabled {
    background-color: #e9ecef !important;
}
.form-control[readonly].calender-icon{
	background-color: #fff;
}


.select2-container--default .select2-selection--single {
  font-size: 14px;
  color: #333;
  padding: 10px 20px;
  height: 50px;
  border-radius: 3px;
  background-color: #ffffff;
  border: 1px solid #e2e4ea;
  transition: 0.3s;
  -webkit-appearance: none;
appearance: none;
background: url("../images/select-arrow.png") no-repeat top 50% right 20px;
    background-color: rgba(0, 0, 0, 0);
    background-clip: border-box;
padding-right: 40px !important;
    outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}



/* ---------------JR Submit SR Modal ------------------ */
.submit-SR-modal .modal-body {
    text-align: center;
}
.submit-SR-modal .modal-body p {
    font-size: 16px;
    color: #747474;
    font-weight: 400;
    margin-bottom: 30px;
}
.submit-SR-modal .modal-body .ok-btns .btn {
    width: 100px;
    margin: 0 10px;
}


.sender1 {
    margin-right: 10px;	
}
.service-requests-action-buttons .edit-delete-buttons a {
    display: inline-block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
    color: #333;
    margin-right: 33px;
}
.service-requests-action-buttons .edit-delete-buttons a > i {
    display: block;
    font-size: 18px;
    color: #fa4c91;
}

.chat-inner .sent .jrusername {
    color: #ebebeb;
}

.chat-inner .jrusername {
   /* font-size: 14px;
    line-height: 22px;
    color: #747474;
    font-weight: 400;
    margin: 0;
    padding: 10px 50px 10px 10px;*/
	position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 12px;
    color: #8c8c8c;
    font-weight: 400;
}



.send-email-request-form .chk-box {
    margin-right: 10px;
    
}