*,
body {
    margin: 0;
    padding: 0;
}

.scroll {
    height: 1000px;
    overflow: auto;
}

.logo,
.nav-color,
body {
    height: auto
}
/* admin-dashboard */
.app-bg{
    background: url(https://chaseappweb.com/assets/images/app-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    /*background-attachment: fixed;*/
}
.app-bg img {
    width: 80%;
    padding: 22px;
}
.bg-today-summary {
   /* background: url(https://chaseappweb.com/assets/images/add-employee3.png);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ced1d5;
    background-attachment: fixed;
}
.today h2 {
    background-color: #1d2939;
    color: #fff;
    font-weight: 600;
    padding: 10px;
}
.summary h2 {
    background-color: #0090d9;
    color: #fff;
    font-weight: 600;
    padding: 10px;
}
.employee-attend {
    background-color: #fff;
    padding:0px;
}
.line-diffrance{
    border: 2px solid #0e2a47;
}
.allowance_report {
    background-color: #0aa699;
    padding:0px;
    color: #fff;
    margin: 0px auto;
}
.Leave_report {
    background-color: #735f87;
    padding:0px;
    color: #fff;
    margin: 20px auto;
}
.Route_report {
    background-color: #f35958;
    padding:0px;
    color: #fff;
}
.Total_Employees {
    background-color: #0e2a47;
    margin: 10px auto;
    color: #fff;
    padding: 118px 7px;
}
.Present_Employees {
    background-color: #0090d9;
    margin: 10px auto;
    color: #fff;
    padding: 118px 7px;
}
.Absent_Employees {
    background-color: #0e2a47;
    margin: 10px auto;
    color: #fff;
    padding: 118px 7px;
}
.Leaves_Employees {
    background-color: #9bbb58;
    margin: 10px auto;
    color: #fff;
    padding: 118px 7px;
}
.Total_Employees span {
    background-color: #eaebfe;
    color: #000;
    padding: 5px 40px;
    border-radius: 5px;
}
.Present_Employees span {
    background-color: #eaebfe;
    color: #000;
    padding: 5px 40px;
    border-radius: 5px;
}
.Absent_Employees span {
    background-color: #eaebfe;
    color: #000;
    padding: 5px 40px;
    border-radius: 5px;
}
.Leaves_Employees span {
    background-color: #eaebfe;
    color: #000;
    padding: 5px 40px;
    border-radius: 5px;
}
.view_emplyyee {
    background-color: #0e2a47;
    color: #fff;
    border-radius: 5px;
    padding: 5px 15px;
    margin-bottom: 15px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
    webkit-transition-duration: .4s;
    transition-duration: .4s;
}
.view_emplyyee:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
}
.p-top {
    padding-top: 5px;
}
.count-report {
    font-size: 22px;
    color: #000000;
    background-color: #ffffff;
    width: 100px;
    border-radius: 5px;
    margin: 11px auto;
}
.route_leave li {
    padding: 0px;
    list-style: none;
}
.data-table {
    background-color: white;
    padding: 10px;
    padding-bottom: 18px;
    padding-top: 0px;
}
.employee-view {
    background-color: #475261;
    padding: 10px;
    color: #fff;
    margin: 10px auto;
}
.subadmin-view {
    background-color: #0766c6;
    padding: 10px;
    color: #fff;
    margin: 10px auto;
}
.notice-view {
    background-color: #dd3544;
    padding: 10px;
    color: #fff;
    margin: 10px auto;
}
.products-view {
    background-color: #00b297;
    padding: 10px;
    color: #fff;
    margin: 10px auto;
}
.add-employee {
    background-color: #ced1d5;
    padding: 10px;
    color: #fff;
    margin: 10px auto;
}
.add-subadmin {
    background-color: #71777d;
    padding: 10px;
    color: #fff;
    margin: 10px auto;
}
.add-notice {
    background-color: #ced1d5;
    padding: 10px;
    color: #fff;
    margin: 10px auto;
}
.add-product {
    background-color: #71777d;
    padding: 10px;
    color: #fff;
    margin: 10px auto;
}
.View-list-buttom {
    width: 100%;
    background-color: #0e2a47;
    font-size: 18px;
        webkit-transition-duration: .4s;
    transition-duration: .4s;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
}
.View-list-buttom:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
}
.heading-report h3 {
    background-color: #0e2a47;
    color: #fff;
    padding: 10px;
}
.leave-reports-export {
    background-color: #4783e9;
    padding:0px;
    margin: 10px auto;
}
.start_date {
    width: 100%;
    background-color: #eaebfe;
    border-radius: 6px;
}
.view_report {
    background-color: #0e2a47;
    color: #fff;
    width: 100%;
    border-radius: 5px;
    padding: 5px 15px;
    margin-bottom: 15px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
    webkit-transition-duration: .4s;
    transition-duration: .4s;
    font-size: 18px;
}
.view_report:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
}
.padding-t {
    padding-top: 20px;
}
.leave-reports-export h4 {
    background-color: #fff;
    padding: 10px;
    margin: 0px auto;
    box-shadow: -2px 4px 7px #484444;
}
.allowance-reports-export {
    background-color: #f35958;
    padding:0px;
    margin: 10px auto;
}
.target-reports-export {
    background-color: #27bfc2;
    padding:0px;
    margin: 10px auto;
}
.daily-reports-export {
    background-color: #464d5d;
    padding:0px;
    margin: 10px auto;
}
.client-reports-export {
    background-color: #5a6286;
    padding:0px;
    margin: 10px auto;
}
.route-reports-export {
    background-color: #477abd;
    padding:0px;
    margin: 10px auto;
}
.allowance-reports-export h4 {
    background-color: #fff;
    padding: 10px;
    margin: 0px auto;
    box-shadow: -2px 4px 7px #484444;
}
.daily-reports-export h4 {
    background-color: #fff;
    padding: 10px;
    margin: 0px auto;
    box-shadow: -2px 4px 7px #484444;
}
.target-reports-export h4 {
    background-color: #fff;
    padding: 10px;
    margin: 0px auto;
    box-shadow: -2px 4px 7px #484444;
}
.client-reports-export h4 {
    background-color: #fff;
    padding: 10px;
    margin: 0px auto;
    box-shadow: -2px 4px 7px #484444;
}
.route-reports-export h4 {
    background-color: #fff;
    padding: 10px;
    margin: 0px auto;
    box-shadow: -2px 4px 7px #484444;
}
.heading {
    padding-top: 12px;
}
.employee-attend h3 {
    padding-bottom: 5px;
}
.allowance_report h3 {
    padding-bottom: 5px;
}
.Route_report h3 {
    padding-bottom: 5px;
}
.Leave_report h3 {
    padding-bottom: 5px;
}
.play img {
    width: 150px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
    padding-bottom: 15px;
}
/* end */
.welcome {
    float: left;
}

.add-trans,
.upper-info {
    float: right
}

.date,
.slide img,
.tab-info img,
body {
    width: 100%
}

.checkmark1:after,
.checkmark:after {
    content: ""
}

* {
    box-sizing: border-box
}

body {
    font-size: 15px;
    background: #f2f2f2
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    font-family: Coda, cursive
}

p {
    font-family: Sintony, sans-serif
}

.slide {
    position: relative
}

.mini-header {
    background-color: #d0171e;
    padding: 3px 0
}

.contact-info li {
    display: inline-block;
    color: #fff;
    padding: 10px 2px 3px 20px
}

.main-header {
    background-color: #0E2A47
}

.nav-color {
    background: 0 0;
    margin: 0!important;
    border-color: transparent
}

.active-menu,
.tab-info {
    background-color: #d0171e
}

.logo {
    padding: 8px 0
}

.menu {
    padding-top: 32px
}

.menu li a {
    color: #fff!important;
    text-transform: uppercase;
    font-family: Coda, cursive
}

.contnet h2,
.main-headeing h2 {
    color: #d0171e;
    text-transform: uppercase;
    font-weight: 700
}

.active-menu {
    border-radius: 50px
}

.contnet {
    position: absolute;
    top: 171px
}

.main-headeing {
    padding-top: 40px;
    padding-bottom: 40px
}

.tab-info img {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px
}

.tab-info {
    margin: 10px auto;
    border-radius: 5px
}

.tab-info h4 {
    color: #fff;
    text-transform: uppercase;
    padding: 8px 12px 0
}

.tab-info p {
    color: #fff;
    padding: 0 12px
}

.search {
    padding: 0 10px 15px
}

.search button {
    width: 100%;
    padding: 10px;
    background-color: #0e2a47;
    border-color: #0e2a47;
    text-transform: uppercase;
}

.tab-outer {
    padding-bottom: 40px
}

.check h3 {
    padding: 10px;
    background-color: #e7e7e7;
    border-left: 5px solid #d0171e;
    color: #000
}

.add-trans {
    color: #b50909
}

.date {
    background-color: transparent;
    padding: 10px 30px;
    text-transform: uppercase;
    color: #b50909;
    border: 2px solid #b50909;
    margin: 4px auto
}

.date=:hover {
    background-color: #b50909;
    border-color: #b50909
}

.allowance-delatils h3 {
    padding: 10px;
    background-color: #e7e7e7;
    border-left: 5px solid #d0171e;
    color: #000
}

.tran-heading {
    background-color: #b50909;
    color: #fff;
    width: 100%;
    box-shadow: 0 0 13px #969292;
    margin: -12px auto
}

.footer-help {
    text-align: center;
    border-top: 1px solid #e5e5e5
}

.cencel,
.save {
    border: 2px solid #b50909;
    background-color: transparent;
    margin: 6px auto;
    color: #000;
    width: 100%;
    text-transform: uppercase
}

.cencel:hover,
.save:hover {
    background-color: #b50909;
    color: #fff
}

.select-date {
    padding-top: 20px
}

.save:hover {
    width: 100%
}

.card-bg-color {
    background-color: #2e2d2d;
    padding: 0;
    border-left: 8px solid #d0171e;
    color: #fff;
    margin: 10px auto;
    box-shadow: -4px 10px 15px #b9b6b6
}

.daily-radio,
.select-hotal {
    margin-bottom: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer
}

.card-body {
    padding-top: 8px
}

.border-vertical {
    background-color: #b50909;
    height: 32px
}

img.admin-crown {
    -ms-transform: rotate(32deg);
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg);
    position: relative;
    bottom: 12px;
    right: 12px;
    z-index: 1;
}

.select-hotal {
    display: block;
    position: relative;
    padding-left: 35px;
    font-size: 22px;
    user-select: none
}

.select-hotal input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.checkmark1 {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    box-shadow: 0 0 6px #000;
    width: 25px;
    background-color: #eee
}

.btn-all:hover,
.btn-alll:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19)
}

.select-hotal:hover input~.checkmark1 {
    background-color: #ccc
}

.add-leaves,
.select-hotal input:checked~.checkmark1 {
    background-color: #d0171e
}

.checkmark1:after {
    position: absolute;
    display: none
}

.daily-radio,
.select-hotal input:checked~.checkmark1:after {
    display: block
}

.stay-hotal label {
    font-size: 17px;
    color: #d0171e
}

.add-leaves {
    width: 100%;
    border: 2px solid #d0171e;
    text-transform: uppercase
}

.btn-all,
.btn-alll {
    width: 100%!important;
    color: #fff!important
}

.request {
    padding-top: 30px
}

.btn-all {
    background: #b50909!important;
    border-color: #b50909!important;
    font-size: 16px!important;
    text-transform: uppercase!important;
    padding: 12px!important;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.add-allowance .btn,
.add-button button,
.admin-login h2,
.employee-login h2,
.half-part a,
.leave-app,
.logo-footer h3,
.outer-sheet h3,
.subcription h2,
.upload,
.urgent-notice {
    text-transform: uppercase
}

.btn-alll,
.daily-button {
    -webkit-transition-duration: .4s
}

.btn-all:hover {
    background-color: #2e2d2d!important;
    border-color: #2e2d2d!important
}

.btn-alll {
    background: #b50909!important;
    border-color: #b50909!important;
    padding: 20px!important;
    transition-duration: .4s
}


.btn-alll:hover {
    background-color: #2e2d2d!important;
    border-color: #2e2d2d!important
}

.add-leaves:hover {
    border: 2px solid #d0171e!important;
    background-color: transparent;
    color: #000
}

.select-hotal .checkmark1:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}
/* employee screen */
.new-color {
    background: #f2f2f2 !important;
    width: 100%;
    text-align: center;
}
.new-color img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0 0 13px #615d5d;
}
.new-color img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0 0 13px #615d5d;
    margin: 6px auto;
}
.new-color p{
    color: #000;
}
.new-color h3 {
    background: #0e2a47 !important;
    color: #fff;
}
/* end */


.visit h3 {
    background-color: #e7e7e7;
    color: #000;
    border-left: 5px solid #d0171e;
    padding: 10px
}

.daily-radio {
    position: relative;
    padding-left: 35px;
    font-size: 22px;
    user-select: none
}

.daily-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: 0 0 6px #6f6e6e
}

.input-form {
    border: 2px solid #ccc!important;
    height: 40px!important
}

span.add-on {
    height: auto!important
}

span.add-on img {
    box-shadow: -4px 4px 9px #ada8a8;
    cursor: pointer
}

.date-time {
    height: 40px!important
}

.radio-down {
    padding-top: 20px
}

.daily-radio:hover input~.checkmark {
    background-color: #ccc
}

.daily-radio input:checked~.checkmark {
    background-color: #d0171e
}

.checkmark:after {
    position: absolute;
    display: none
}

.container input:checked~.checkmark:after {
    display: block
}

.daily-radio .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff
}

.submit {
    padding-top: 30px
}

.daily-label label {
    color: #d0171e;
    font-size: 16px
}

.box {
    color: #fff;
    display: none;
    margin-top: 20px
}

.select-date-intrested {
    padding-top: 20px
}

.select-dt {
    padding: 0
}

.preview-images-zone {
    width: 100%;
    border: 1px solid #ddd;
    min-height: 180px;
    padding: 5px 5px 0;
    position: relative;
    overflow: auto
}

.preview-images-zone>.preview-image:first-child {
    height: 185px;
    width: 185px;
    position: relative;
    margin-right: 5px
}

.preview-images-zone>.preview-image {
    height: 90px;
    width: 90px;
    position: relative;
    margin-right: 5px;
    float: left;
    margin-bottom: 5px
}

.preview-images-zone>.preview-image>.image-zone,
.preview-images-zone>.preview-image>.image-zone>img {
    width: 100%;
    height: 100%
}

.preview-images-zone>.preview-image>.tools-edit-image {
    position: absolute;
    z-index: 100;
    color: #fff;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    display: none
}

.preview-images-zone>.preview-image>.image-cancel {
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 700;
    margin-right: 10px;
    cursor: pointer;
    display: none;
    z-index: 100
}

.preview-image:hover>.image-zone {
    cursor: move;
    opacity: .5
}

.preview-image:hover>.image-cancel,
.preview-image:hover>.tools-edit-image {
    display: block
}

.ui-sortable-helper {
    width: 90px!important;
    height: 90px!important
}

.upload {
    color: #d0171e;
    font-weight: 700
}

.outer-sheet {
    background-color: #d0171e;
    margin: 10px auto;
    height: 386px;
    width: 85%;
}

.images-part {
    padding-top: 24px
}

.today img {
    padding-top: 25px
}

.daily-button:hover {
    border: 2px solid #f2f2f2;
    background-color: transparent;
    color: #000 !important;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
}
.daily-button {
    padding: 6px 50px;
    background-color: #2e2d2d;
    font-size: 16px;
    transition-duration: .4s;
    border: 2px solid #2e2d2d;
    color: #fff!important
}

.log_out a,
.login-first {
    -webkit-transition-duration: .4s
}

.content-part {
    color: #fff;
    text-align: unset;
}

.upper-container {
    padding-bottom: 40px
}

.content-part p {
    padding-bottom: 10px
}

.button-main {
    padding-bottom: 20px;
    padding-top: 9px
}

.chickin-outer h3,
.chickout-outer h3 {
    background-color: #d0171e;
    color: #fff;
    padding: 10px;
    text-align: center;
    box-shadow: 0 0 9px #848080
}

.maps-location {
    padding-top: 10px
}

.notice {
    color: #dd2727;
    font-size: 16px
}

.attach,
.radio-down-notice {
    padding-top: 20px;
    padding-bottom: 20px
}

.add-button button {
    background-color: #d0171e;
    color: #fff;
    border-color: #d0171e;
    width: 100%
}

.add-button {
    padding-top: 40px
}

.table .thead-dark th {
    color: #fff;
    background-color: #212529;
    border-color: #32383e
}

.view-action {
    background-color: #d0171e;
    padding: 4px 20px
}

.view-action:hover {
    background-color: #2e2d2d
}

.proved {
    color: green;
    font-weight: 600
}

.count {
    background-color: #fff;
    color: #000
}

.notice-board a {
    background-color: #d0171e;
    padding: 7px 12px;
    color: #fff;
    border-radius: 5px
}

.email .send,
footer {
    background-color: #0e2a47;
}

.view-text {
    color: green
}

.footer-section1 p {
    color: #fff;
    text-align: justify
}

.logo-footer h3 {
    color: #fff;
    font-weight: 700;
    margin-top: 35px
}

.links li {
    list-style: none;
    padding: 4px
}

.links li a {
    color: #fff;
    list-style: none;
    text-decoration: none
}

.links li a:hover {
    color: #d0171e
}

ul.links {
    padding-top: 6px
}

.footer-section1 img {
    padding-bottom: 10px;
    padding-top: 31px
}

.logo-footer {
    padding-bottom: 23px
}

.logo-footer p {
    text-align: justify;
    color: #fff
}

.half-part,
.view-butn,
<!-- sign-up-->.sig-up {
    text-align: center
}

.email {
    position: relative
}

.email .send {
    position: absolute;
    right: 0;
    border-color: #fff;
    padding: 7px 13px;
    top: 2px;
    border-radius: 0!important
}

.mini-footer {
    background-color: #d0171e
}

.sig-up h3 {
    background-color: #e7e7e7;
    color: #d0171e
}

.sign-view {
    border: 2px solid red;
    padding: 10px
}

.sign-view h3 {
    background-color: transparent;
    color: #D0171E
}

.view-attachments h3 {
    background-color: transparent;
    color: #d0171e
}

.view-butn {
    padding-top: 30px
}

.view-attachments {
    padding: 15px
}

.proved-orenge {
    color: #f17c27;
    font-weight: 600
}

.register,
.register a,
.sign-up a {
    font-weight: 700;
    cursor: pointer
}

.half-part {
    width: 50%
}

.pending-task {
    color: #d0171e
}

.complete-task {
    color: #00c127
}

.nav-stats>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid #f2f2f2;
    background-color: #b9b6b6;
    color: #fff;
    border-radius: 4px 4px 0 0
}

.nav-stats>li.active>a,
.nav-stats>li.active>a:focus,
.nav-stats>li.active>a:hover {
    color: #fff;
    cursor: pointer;
    background-color: #d0171e
}

.nav-stats>li>a:hover {
    background-color: #d0171e
}

.attachment-notice h3,
.title h3 {
    background-color: #e7e7e7;
    color: #000;
    padding: 10px;
    border-left: 5px solid #d0171e
}

.title p {
    text-align: justify
}

.urgent-notice {
    float: right;
    font-size: 14px;
    padding: 8px;
    background-color: #00c147;
    color: #fff
}

.button-intrest button,
.button-not-intrest button {
    background-color: #e7e7e7;
    color: #00c147;
    padding: 10px;
    width: 100%;
    font-size: 18px
}

.button-not-intrest button {
    background-color: #e7e7e7;
    color: #d0171e;
    padding: 10px;
    width: 100%;
    font-size: 18px
}

.button-intrest,
.button-not-intrest {
    padding-top: 30px
}

.top-headeing {
    background-color: #00c127;
    text-align: center
}

.read-more {
    background-color: #d0171e
}

.top-headeing h3 {
    color: #fff;
    padding: 5px
}

.add-task {
    padding-top: 30px
}

.add-task button {
    background-color: transparent;
    color: #000;
    padding: 10px 30px;
    border: 2px solid #d0171e
}

.add-task button:hover,
.submit-task button {
    background-color: #d0171e;
    color: #fff
}

.submit-task,
.task-table {
    padding-top: 30px
}

.submit-task button {
    font-size: 16px;
    width: 60%
}

.field-icon,
.outer-form-login label,
.register,
.register a,
.sign-up a {
    color: #dd2727
}

.submit-task button:hover {
    background-color: #2e2d2d
}

.task-action li {
    display: inline-block;
    padding: 0;
    font-size: 17px
}

.outer-login {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    background-image: url(../images/bg.jpg);
    justify-content: center;
    align-items: center;
    padding: 15px
}

.outer-form-login {
    background: url(../images/bg.jpg) #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .51);
    -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    -ms-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1)
}

.logo-login img {
    padding-bottom: 15px
}

.singin-button button {
    background-color: #dd2727;
    border-color: #dd2727;
    width: 100%;
    text-transform: uppercase;
    padding: 10px;
    font-size: 16px
}

.sign-up,
.sign-up a {
    text-align: center;
    padding-top: 20px
}

.logo-login {
    padding-top: 31px
}

.logo-chase img {
    padding-bottom: 20px;
    width: 150px
}

.register {
    padding-top: 20px
}

.field-icon {
    float: right;
    margin-top: -31px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    margin-right: 8px
}

.bg-main {
    background-image: url(../images/bg-main-red.png);
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat
}

.logo-center img {
    width: 120px;
    margin: 50px auto
}

.admin-login,
.employee-login {
    margin: 100px auto;
    position: relative;
    box-sizing: border-box;
    max-width: 600px;
    padding: 2rem;
    border-radius: 6px;
    text-align: center
}

.admin-login {
    box-shadow: -6px 8px 20px rgba(93, 92, 92, .77);
    background: #fff
}

.employee-login {
    font-size: 0;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

.admin-login h2,
.employee-login h2 {
    font-weight: 600;
    letter-spacing: 1px
}

.admin-login p,
.employee-login p {
    padding-top: 3px;
    padding-bottom: 20px;
    color: #000;
    font-size: 16px
}
.partation h2 {
    box-shadow: -1px 3px 12px #848184;
    text-align: center;
    background-color: #fff;
    padding: 12px;
    text-transform: uppercase;
    border-right: 6px solid #d0171e;
    border-left: 6px solid #d0171e;
}
.login-first:hover {
    border: 2px solid #2e2d2d;
    background-color: #2e2d2d;
    color: #fff;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19)
}

.login-first {
    background-color: #dd2727;
    padding: 10px 30px;
    color: #fff;
    transition-duration: .4s;
    border: 2px solid #dd2727
}

.login-first span:after {
    content: '';
    border: 1px solid #fff;
    margin-left: 5px
}

.login-btton {
    margin: 12px auto
}

.social-icons {
    margin: 3px auto
}

.social-icons a {
    background-color: #fff;
    padding: 14px 28px;
    color: #2c3b90;
    text-decoration: none;
    border-radius: 50px
}

.social-icons a:hover {
    background-color: #dd2727;
    color: #fff;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}

.social-icons li {
    display: inline-block;
    padding: 0 30px;
    margin: 41px auto
}

.social-icons h2 {
    color: #ffff;
    letter-spacing: 1px
}

.copyright p {
    color: #fff;
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    letter-spacing: 1px
}

.copyright {
    margin: 40px auto
}

.admin-login::after,
before {
    content: '';
    border: 1px solid #fff;
    position: absolute;
    height: 161px;
    bottom: 0;
    right: 0
}

.subcription {
    box-shadow: 0 0 11px #b3aeae
}

.subcription h2 {
    text-align: center;
    color: #fff;
    background-color: #d0171e;
    padding: 15px;
    margin: 0
}

.bigTilesHistory {
    background: #f9f9f9;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #e0e2e2;
    box-shadow: -4px 4px 9px #ada8a8
}

.headingHis {
    display: inline-block;
    margin: 0;
    padding-left: 5px;
    padding-bottom: 10px
}

.smTiles {
    padding: 5px
}

/*.smTilesInner {
    background: #fff;
    border: 1px solid #d0171e;
    text-align: center;
    font-size: 14px;
    line-height: 90px;
    cursor: pointer
}*/
.smTilesInner {
    background: #fff;
    border: 1px solid #d0171e;
    text-align: center;
    font-size: 10px;
    line-height: 62px;
    font-family: lato;
    cursor: pointer;
    font-weight: 600;
}

.count-history {
    display: inline-block;
    min-width: 10px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d0171e;
    border-radius: 12px
}

.export {
    float: right;
    padding-bottom: 20px
}

.Export {
    padding: 9px 40px;
    background-color: #d0174f;
    border-color: #d0174f
}

.Export:hover {
    background-color: #2e2d2d;
    border-color: #2e2d2d
}

h4.headingHis img {
    text-align: center;
    box-shadow: -2px 3px 8px #c1c0c0
}

.border-verticall {
    background-color: #b50909
}

.edit-delete li {
    list-style: none;
    border-bottom: 1px solid #2e2d2d
}

.edit-delete li a {
    display: block;
    background-color: #e7e7e7;
    color: #2e2d2d;
    padding: 10px
}

.task-d {
    background-color: #2e2d2d;
    padding: 0 0 15px;
    color: #fff;
    margin: 10px auto;
    box-shadow: -4px 10px 15px #b9b6b6
}

.task-d p {
    text-align: justify
}

.leave-app {
    border: 2px solid #d0171e;
    background-color: #d0171e!important
}

.sub-admin-check {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.contnet p,
.main-headeing p {
    font-size: 22px!important;
    text-shadow: -2px 8px 20px #948c8c!important
}

.sub-admin-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.focus {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    box-shadow: -1px 4px 8px #000
}

.sub-admin-check:hover input~.focus {
    background-color: #ccc
}

.sub-admin-check input:checked~.focus {
    background-color: #d0171e
}

.focus:after {
    content: "";
    position: absolute;
    display: none
}

.sub-admin-check input:checked~.focus:after {
    display: block
}

.sub-admin-check .focus:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.padding-bottom {
    padding-bottom: 25px
}

.check-box {
    padding-top: 25px
}

.answer,
.answer2 {
    padding-bottom: 20px;
    padding-top: 7px
}

.sign-view label {
    background-color: #e7e7e7;
    color: #d0171e
}

.update-pass {
    background-color: #e7e7e7;
    padding-top: 12px;
    padding-bottom: 3px;
    margin-bottom: 9px;
    border-left: 5px solid #d0171e
}

.update-pass label {
    margin-left: 5px
}
.outer-sheet-employee {
    height: 350px;
    width: 100%;
    margin: 16px auto;
    box-shadow: 0 0 7px #8e8888;
}

.outer-sheet h3 {
    background: #fff;
    padding: 4px;
/*    margin: 8px
*/
}

.main-headeing p {
    font-family: 'Marck Script', cursive!important;
    color: #000!important
}

.main h4 {
    text-shadow: -2px 8px 20px #948c8c!important
}

ul.contact-info li span {
    font-family: Coda, cursive
}

.admin-login h2 {
    background-color: #fff;
    color: #000;
    padding: 10px
}

.content-part h3,
.employee-login h2 {
    background-color: #fff;
    padding: 5px;
    color: #000
}

.media-carousel {
    margin-bottom: 0;
    padding: 0 40px 30px;
    margin-top: 30px
}

.media-carousel .carousel-control.left {
    left: -12px;
    background: #222;
    border: 4px solid #FFF;
    border-radius: 23px;
    height: 40px;
    width: 40px;
    margin-top: 30px
}

.media-carousel .carousel-control.right {
    right: -12px!important;
    background: #222;
    border: 4px solid #FFF;
    border-radius: 23px;
    height: 40px;
    width: 40px;
    margin-top: 30px
}

.media-carousel .carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0;
    margin-right: -19px
}

.media-carousel .carousel-indicators li {
    background: silver
}

.media-carousel .carousel-indicators .active {
    background: #333
}

.media-carousel img {
    width: 100%;
    height: 400px
}

.contnet p {
    font-family: 'Marck Script', cursive!important;
    color: #000!important
}

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 12px;
    background: #d0171e;
    width: 50px;
    height: 50px;
    text-decoration: none;
    z-index: 1024;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: -3px 3px 20px #9a9595;
    display: none;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#return-to-top:hover {
    background: rgba(0, 0, 0, .9)
}

#return-to-top:hover i {
    color: #fff;
    top: 5px
}

.employee-login h2 {
    background-color: #fff;
    color: #000;
    padding: 10px
}

.main2 {
    text-align: center
}

.main3 {
    text-align: right
}

.view-action {
    background: #dd2727!important;
    border-color: #dd2727!important
}

.view-action:hover {
    background: #2e2d2d!important;
    border-color: #2e2d2d!important
}

.main1 h4,
.main2 h4,
.main3 h4 {
    text-shadow: -2px 8px 20px #948c8c!important
}

.login-admin {
    position: fixed;
    top: 0;
    right: 14px
}

.arrow,
.dropdown {
    position: relative
}

.login-admin h2 {
    color: #dd2727;
    font-weight: 700;
    padding: 10px;
    box-shadow: -8px 6px 9px #b8bac4
}

arrow {
    text-align: center;
    margin: 8% 0
}

.bounce {
    -moz-animation: bounce 4s infinite;
    -webkit-animation: bounce 4s infinite;
    animation: bounce 4s infinite
}

@keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-30px)
    }
    60% {
        transform: translateY(-15px)
    }
}

.arrow {
    top: -41px
}

.arrow a:hover {
    color: red
}

.arrow a {
    color: #fff;
    text-decoration: none!important;
    text-shadow: 0 0 7px #545353
}

.outer-sheet-emp {
    background-color: #d0171e;
    /*padding: 10px;*/
    margin: 10px auto;
    height: 240px
}

.dropbtn {
    background-color: #4CAF50;
    color: #fff;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer
}

.dropdown {
    display: inline-block
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 1
}

.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41
}

.bel {
    background: #2e2d2d;
    padding: 7px 12px;
    border-radius: 30px
}

.notifi {
    position: relative;
    bottom: 8px;
    background: #d0171e;
    right: 12px;
    box-shadow: 0 0 9px #6f6b6b
}

.scroll-table {
    height: 700px;
    overflow: auto
}

.drop-menu {
    background: #2e2d2d!important;
    box-shadow: -2px 5px 13px #969191!important;
    left: 0!important
}

.log_out a,
li.log_out a:hover {
    text-decoration: none;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19)
}

.drop-menu>li>a:focus,
.drop-menu>li>a:hover {
    color: #fff!important;
    text-decoration: none;
    background-color: #d0171e!important
}

.log_out a {
    background: #0e2944;
    color: #fff;
    padding: 8px 12px;
    border-radius: 50px;
    transition-duration: .4s
}

li.log_out a:hover {
    background-color: transparent;
    color: #fff
}

.add-allowance .btn:hover {
    background-color: #2e2d2d!important;
    border-color: #2e2d2d!important;
    box-shadow: inset 0 12px 16px 0 rgba(0, 0, 0, .24), inset 0 17px 50px 0 rgba(0, 0, 0, .19)
}

.target-scroll {
    height: 500px;
    overflow: auto;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #d0171e !important;
    color: #fff !important;
    border-color: #d0171e !important;
}

.pagination>li>a,
.pagination>li>span {
    color: #d0171e !important;
    overflow: auto;
}

.add-allowance .btn {
    background-color: #d0171e;
    color: #fff;
    padding: 10px;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    box-shadow: 0 12px 16px 0 #bbb5b5, 0 17px 50px 0 #b9adad;
}

.modal-dialog {
    padding-top: 30px;
}

<!--chat-->.avatar,
.text-l {
    padding-right: 10px
}

.msj-rta,
.mytext {
    background: #f5f5f5
}

.mytext {
    border: 0;
    padding: 10px
}

.text {
    width: 100%;
    display: flex;
    flex-direction: column
}

.text>p:first-of-type {
    width: 100%;
    margin-top: 0;
    margin-bottom: auto;
    line-height: 13px;
    font-size: 12px
}

.text>p:last-of-type {
    width: 100%;
    text-align: right;
    color: silver;
    margin-bottom: -7px;
    margin-top: auto
}

.text-l {
    float: left
}

.text-r {
    float: right;
    padding-left: 10px
}

.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
    float: left
}

.macro {
    margin-top: 5px;
    width: 85%;
    border-radius: 5px;
    padding: 5px;
    display: flex
}

.Chat,
.frame>div:last-of-type {
    width: 100%;
    position: absolute;
    display: flex
}

.msj-rta {
    float: right
}

.msj {
    float: left;
    background: #fff
}

.frame {
    background: #e0e0de;
    height: 450px;
    overflow: hidden;
    padding: 0
}

.frame>div:last-of-type {
    bottom: 5px
}

.Chat {
    list-style-type: none;
    padding: 18px;
    bottom: 0px;
    flex-direction: column;
}

.msj-rta:after,
.msj:before {
    width: 0;
    height: 0;
    content: "";
    top: -5px;
    position: relative;
    border-style: solid
}

.msj:before {
    left: -14px;
    border-width: 0 13px 13px 0;
    border-color: transparent #fff transparent transparent
}

.msj-rta:after {
    left: 14px;
    border-width: 13px 13px 0 0;
    border-color: #f5f5f5 transparent transparent
}

input:focus {
    outline: 0
}

::-webkit-input-placeholder {
    color: #d4d4d4
}

::-moz-placeholder {
    color: #d4d4d4
}

:-ms-input-placeholder {
    color: #d4d4d4
}

:-moz-placeholder {
    color: #d4d4d4
}

.fixed-chat {
    position: fixed;
    right: 0;
    z-index: 9999;
    bottom: -21px
}

.chat-container {
    height: 400px;
    overflow: auto;
    transform: rotate(180deg);
    direction: rtl;
}

.message {
    border-bottom: solid 1px #ccc;
    padding: 0px;
    transform: rotate(180deg);
    direction: ltr;
}
.multiselect-container>li>a>label{
    height:auto!important;
}
.multiselect-container{
    height: 200px;
    overflow: scroll;
}
ul.dropdown-menu.inner.selectpicker{
	height: 300px;
}
/* === CONVERSATIONS === */

.discussions {
  width: 35%;
  height: 700px;
  box-shadow: 0px 8px 10px rgba(0,0,0,0.20);
  overflow: hidden;
  background-color: #87a3ec;
  display: inline-block;
}

.discussions .discussion {
  width: 100%;
  height: 90px;
  background-color: #FAFAFA;
  border-bottom: solid 1px #E0E0E0;
  display:flex;
  align-items: center;
  cursor: pointer;
}

.discussions .search {
  display:flex;
  align-items: center;
  justify-content: center;
  color: #E0E0E0;
}

.discussions .search .searchbar {
  height: 40px;
  background-color: #FFF;
  width: 70%;
  padding: 0 20px;
  border-radius: 50px;
  border: 1px solid #EEEEEE;
  display:flex;
  align-items: center;
  cursor: pointer;
}

.discussions .search .searchbar input {
  margin-left: 15px;
  height:38px;
  width:100%;
  border:none;
  font-family: 'Montserrat', sans-serif;;
}

.discussions .search .searchbar *::-webkit-input-placeholder {
    color: #E0E0E0;
}
.discussions .search .searchbar input *:-moz-placeholder {
    color: #E0E0E0;
}
.discussions .search .searchbar input *::-moz-placeholder {
    color: #E0E0E0;
}
.discussions .search .searchbar input *:-ms-input-placeholder {
    color: #E0E0E0;
}

.discussions .message-active {
  width: 98.5%;
  height: 90px;
  background-color: #FFF;
  border-bottom: solid 1px #E0E0E0;
}

.discussions .discussion .photo {
    margin-left:20px;
    display: block;
    width: 45px;
    height: 45px;
    background: #E6E7ED;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.online {
  position: relative;
  top: 30px;
  left: 35px;
  width: 13px;
  height: 13px;
  background-color: #8BC34A;
  border-radius: 13px;
  border: 3px solid #FAFAFA;
}

.desc-contact {
  height: 43px;
  width:50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discussions .discussion .name {
  margin: 0 0 0 20px;
  font-family:'Montserrat', sans-serif;
  font-size: 11pt;
  color:#515151;
}

.discussions .discussion .message {
  margin: 6px 0 0 20px;
  font-family:'Montserrat', sans-serif;
  font-size: 9pt;
  color:#515151;
}

.timer {
  margin-left: 15%;
  font-family:'Open Sans', sans-serif;
  font-size: 11px;
  padding: 3px 8px;
  color: #BBB;
  background-color: #FFF;
  border: 1px solid #E5E5E5;
  border-radius: 15px;
}

.chat {
  width: calc(65% - 85px);
}

.header-chat {
  background-color: #FFF;
  height: 90px;
  box-shadow: 0px 3px 2px rgba(0,0,0,0.100);
  display:flex;
  align-items: center;
}

.chat .header-chat .icon {
  margin-left: 30px;
  color:#515151;
  font-size: 14pt;
}

.chat .header-chat .name {
  margin: 0 0 0 20px;
  text-transform: uppercase;
  font-family:'Montserrat', sans-serif;
  font-size: 13pt;
  color:#515151;
}

.chat .header-chat .right {
  position: absolute;
  right: 40px;
}

.chat .messages-chat {
  padding: 25px 35px;
}

.chat .messages-chat .message {
  display:flex;
  align-items: center;
  margin-bottom: 8px;
}

.chat .messages-chat .message .photo {
    display: block;
    width: 45px;
    height: 45px;
    background: #E6E7ED;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.chat .messages-chat .text {
  margin: 0 35px;
  background-color: #f6f6f6;
  padding: 15px;
  border-radius: 12px;
}

.text-only {
  margin-left: 45px;
}

.time {
  font-size: 10px;
  color:lightgrey;
  margin-bottom:10px;
  margin-left: 85px;
}

.response-time {
  float: right;
  margin-right: 40px !important;
}

.response {
  float: right;
  margin-right: 0px !important;
  margin-left:auto; /* flexbox alignment rule */
}

.response .text {
  background-color: #e3effd !important;
}

.footer-chat {
  width: calc(65% - 66px);
  height: 80px;
  display:flex;
  align-items: center;
  position:absolute;
  bottom: 0;
  background-color: transparent;
  border-top: 2px solid #EEE;
  
}

.chat .footer-chat .icon {
  margin-left: 30px;
  color:#C0C0C0;
  font-size: 14pt;
}

.chat .footer-chat .send {
  color:#fff;
  background-color: #4f6ebd;
  position: absolute;
  right: 50px;
  padding: 12px 12px 12px 12px;
  border-radius: 50px;
  font-size: 14pt;
}

.chat .footer-chat .name {
  margin: 0 0 0 20px;
  text-transform: uppercase;
  font-family:'Montserrat', sans-serif;
  font-size: 13pt;
  color:#515151;
}

.chat .footer-chat .right {
  position: absolute;
  right: 40px;
}

.write-message {
  border:none !important;
  width:60%;
  height: 50px;
  margin-left: 20px;
  padding: 10px;
}

.footer-chat *::-webkit-input-placeholder {
  color: #C0C0C0;
  font-size: 13pt;
}
.footer-chat input *:-moz-placeholder {
  color: #C0C0C0;
  font-size: 13pt;
}
.footer-chat input *::-moz-placeholder {
  color: #C0C0C0;
  font-size: 13pt;
  margin-left:5px;
}
.footer-chat input *:-ms-input-placeholder {
  color: #C0C0C0;
  font-size: 13pt;
}

.clickable {
  cursor: pointer;
}