.__trip__style {
    background-color: blanchedalmond;
}

.seperator__icon {
    margin-left: 1rem;
    margin-right: -0.5rem;
}

span.sub__haeding {
    font-size: 2rem;
    font-weight: 600;
}

.__utility__btn {
    border-color: green !important;
    color: green !important;
    border: 2px solid green !important;
    font-weight: 700 !important;
}

.actions {
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    border: none;
}

.__utility__margin-top {
    margin-top: 2rem;
}

.__u__color {
    color: #a2a2ab;
    font-weight: 700;
    /* text-decoration: underline; */
}

.__u-reminder {
    margin-top: 1.5rem;
}

.__u__reminder {
    margin-left: 1.5rem;
}

hr.__u--hrow {
    border: 1px solid #0277bd;
    margin: 2rem 3rem;
}

.__u__height {
    overflow: auto;
    height: 80%;
    /* width */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

.__u__height::-webkit-scrollbar {
    width: 0;
}

.__u__height::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.__u__height::-webkit-scrollbar-thumb {
    background: #888;
}

.__u__height::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.__u-highlight:active,
.__u-highlight:focus {
    text-decoration: underline !important;
}

.chat__height-manage {
    height: 100%;
    overflow-y: auto;
}

.__utility-chat-of {
    height: 70%;
    overflow: hidden;
}

.__u-team__invite-user-height {
    height: 30%;
}

.__u__companion-margin {
    margin-top: 1rem;
}

.u__edit-icon {
    margin-left: 2rem;
}

.u__team__margin-right {
    margin-right: 8rem;
}

.u--margin-bottom {
    margin-bottom: -5rem;
}

.u__height-user {
    height: 50% !important;
    overflow-y: auto !important;
}

.u--invite-user-hr {
    width: 100%;
    margin-top: 1rem;
    border-width: 1px;
    border-color: #0277bd;
}

.u--btn-user {
    height: 3.5rem;
    width: 4rem;
    border-radius: 1rem !important;
    background-image: url(../images/10by10/plusIcon.png) !important;
    background-position: center;
    background-repeat: no-repeat;
}

#u__padding-chat {
    padding-bottom: -2rem;
    background-color: #f1f6fb;
    margin-left: -3rem;
}

#u__padding-chat:focus {
    outline: none;
}

.u__btn-m-right {
    margin-left: 1rem;
}

.u__add_assets {
    margin-top: 1rem;
    margin-left: 0 !important;
}

.u--text__alignment {
    display: flex;
    justify-content: space-between;
}

.u__top-heading {
    color: #a2a2a2;
}

.u__user-image {
    height: 6rem;
    width: 6rem;
    border-radius: 700px;
    background-size: cover;
    background-repeat: no-repeat;
}

.u__settingss {
    color: #848484 !important;
    margin-left: 2rem;
    margin-top: -0.5rem;
}

.u__total__trips {
    display: block;
    margin-top: 6rem;
    margin-left: 2rem;
    margin-bottom: 2rem;
}

.U-HoverWeather:hover {
    text-decoration: none;
    color: red;
}

#orders {
    font-size: 2rem;
    font-weight: 700;
    font-style: bold;
    margin-left: 3rem;
}

#filter {
    background-color: #00ccf2;
    border-style: none;
    border-radius: 2rem;
    width: 7rem;
    height: 2.5rem;
    color: white;
    margin-left: 46rem;
}

#add__new {
    background-color: #00ccf2;
    border-style: none;
    border-radius: 2rem;
    width: 10rem;
    height: 2.5rem;
    color: white;
    margin-left: 1rem;
}

#chekbox {
    margin-left: 2rem;
}

#team__meeting {
    font-style: bold;
    font-weight: 700;
    font-size: 1.5rem;
}

#upcoming {
    font-style: bold;
    font-weight: 700;
    font-size: 2rem;
}

#img {
    background-color: #00ccf2;
}

#img3 {
    background-color: #7d00b5;
}

#table-wrapper,
#table-wrapper__trips,
#table-wrapper__team,
#table-wrapper__drivers,
#vehicles__page,
#leaves__page,
#preHireDocs,
#postHireDocs,
#othersDocs,
#Switch-vehicle,
#Assigner-vehicle,
#table-wrapper__form,
#dispatch__rouing-table,
#dispatch-live,
#table-wrapper__team__dashboard {
    position: relative;
    height: 53%;
    margin: 0.5rem 3rem;
}

@media (max-width: 1200px) {
    #table-wrapper__trips {
        height: 61% !important;
    }
}

#table-wrapper__team,
#table-wrapper__drivers,
#vehicles__page,
#leaves__page,
#preHireDocs,
#postHireDocs,
#othersDocs,
#Switch-vehicle,
#Assigner-vehicle,
#table-wrapper__form,
#dispatch__rouing-table,
#dispatch-live,
#table-wrapper__team__dashboard {
    margin-top: 15rem;
    height: 100%;
}

#table-scroll {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* width */

#table-scroll::-webkit-scrollbar {
    width: 0;
}

/* Track */

#table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */

#table-scroll::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */

#table-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#count {
    font-size: 2rem;
    margin: 0 1.7rem;
}

a > #count__char {
    font-size: 1.7rem;
    margin-top: -2rem;
}

#table-wrapper__team,
#table-wrapper__drivers,
#vehicles__page,
#leaves__page,
#preHireDocs,
#postHireDocs,
#othersDocs,
#Switch-vehicle,
#Assigner-vehicle,
#table-wrapper__form,
#dispatch__rouing-table,
#dispatch-live,
#table-wrapper__team__dashboard {
    height: 59%;
    margin-top: 1rem;
}

#table-wrapper__drivers,
#vehicles__page,
#leaves__page,
#preHireDocs,
#postHireDocs,
#othersDocs,
#Switch-vehicle,
#Assigner-vehicle {
    margin-top: 8rem;
    height: 56%;
}

@media (max-width: 1200px) {
    #table-wrapper__drivers,
    #vehicles__page,
    #leaves__page,
    #preHireDocs,
    #postHireDocs,
    #othersDocs,
    #Switch-vehicle,
    #Assigner-vehicle {
        margin-top: 9rem;
        height: 55%;
    }
}

#assigned__trip {
    color: #a2a2a2;
}

#privious__trip {
    color: #a2a2a2;
}

#table-wrapper__team__inspection,
#table-wrapper__team__inspection__driver-profile,
#list__view {
    color: grey;
}

#table-wrapper__team__inspection__driver-profile {
    height: 100%;
    padding: 3rem;
}

#dispatch__rouing-table,
#dispatch-live {
    display: flex;
}

#user11 {
    background-color: #ff007c33;
    border: 1px solid #ff007c;
    border-radius: 1rem;
}

#table-wrapper__team__dashboard {
    height: 54%;
    margin: 11rem 5rem 0 5rem;
}

@media (max-width: 1200px) {
    #table-wrapper__team__dashboard {
        margin-top: 15rem;
        height: 45%;
    }
}

#team__dashboard__heading {
    margin-left: 5rem;
    margin-top: 2rem;
    color: #0277bd;
}

#team__dashboard__blue__box {
    margin-top: 0px;
}

.background {
    position: relative;
    height: 98vh;
    background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.background__foreground {
    position: absolute;
    display: flex;
    height: 50vh;
    width: 55vw;
    background-color: #f2faff;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    transform: translate(40%, 50%);
    justify-content: space-around;
}

.background__credentials {
    display: flex;
    flex-direction: column;
    margin-left: 6rem;
    margin-bottom: 2rem;
}

.background__logo {
    height: 40vh;
    width: 25vw;
    background-image: url(../images/Asset.png);
    background-position: center;
    background-repeat: no-repeat;
}

.background__line {
    height: 30rem;
    width: 0.2rem;
    background-color: #0277bd;
    margin-left: 5rem;
}

.login {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-size: 3rem;
    color: #023350;
}

.login__username,
.driver__login__username {
    height: 3.5rem;
    width: 27rem;
    color: #0277bd;
    border-radius: 0.5rem;
    padding-left: 1rem;
    border-color: #0277bd;
    background-color: #f2faff;
}

.login__password {
    height: 3.5rem;
    width: 27rem;
    border-radius: 0.2rem;
    padding-left: 1rem;
    border-radius: 0.5rem;
    border-color: #0277bd;
    color: #0277bd;
    background-color: #f2faff;
}

.login__submit__data {
    height: 3.5rem;
    width: 28.7rem;
    border-radius: 0.5rem;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(
        to bottom,
        rgba(2, 119, 189, 0.8),
        rgba(1, 135, 214, 0.8)
    );
    color: #fff;
    text-align: center;
    align-items: center;
    font-size: 2rem;
    padding-top: 1rem;
    margin-top: 1rem;
}

.login__submit__data:hover {
    background-color: #fff;
}

.login__forgot {
    text-align: right;
    margin-top: 1rem;
    font-size: 1.4rem;
    color: #a2a2a2;
}

.login__name,
.driver__login__name,
.driver__login__email {
    background-color: #f2faff;
    display: inline-block;
    margin-bottom: -0.5rem;
    z-index: 1;
    margin-left: 2rem;
    padding-left: 0.5rem;
    color: #0277bd;
    font-size: 1.4rem;
    margin-right: 19rem;
}

.alignment-text-center {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem !important;
}

.dashboard {
    box-sizing: border-box;
    height: 100vh;
    display: flex;
}

.dashboard__sideBar {
    flex: 0 0 17%;
    background-color: #0277bd;
    height: 100%;
    width: 17%;
    position: fixed;
    overflow-y: scroll;
}

.dashboard__sideBar::-webkit-scrollbar {
    width: 0;
}

@media (max-width: 1200px) {
    .dashboard__sideBar {
        height: 100%;
        width: 20%;
    }
}

@media (max-width: 992px) {
    .dashboard__sideBar {
        height: 100%;
        width: 21%;
    }
}

.dashboard__sideBar__data {
    display: flex;
    margin-top: 2rem;
    color: beige;
}

@media (max-width: 1200px) {
    .dashboard__sideBar__data {
        font-size: 1.4rem;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .dashboard__sideBar__data {
        margin-left: -2rem;
        margin-top: 1rem;
    }
}

.dashboard__img {
    height: 20%;
    width: 100%;
    background-image: url(https://cnavigator.tech/provider/images/icons48by48/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .dashboard__img {
        background-image: url(../images/responsive/Logo1.png);
    }
}

.dashboard__main,
.dashboard__main-min {
    height: 100%;
    flex: 1;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    left: 17%;
}

@media (max-width: 1200px) {
    .dashboard__main,
    .dashboard__main-min {
        left: 20%;
    }
}

@media (max-width: 992px) {
    .dashboard__main,
    .dashboard__main-min {
        left: 21%;
    }
}

.dashboard__main__top {
    height: 100%;
}

.dashboard__main__top__uper {
    height: 37.4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard__main__top__uper__style {
    font-size: 4rem;
    margin-left: 5rem;
    color: #0277bd;
}

.dashboard__main__top__uper__right {
    display: flex;
    font-size: 4rem;
    margin-left: 5rem;
    color: #0277bd;
    margin-right: 3rem;
    align-items: center;
}

.dashboard__main__top__uper__right__pic {
}

@media (max-width: 1200px) {
    .dashboard__main__top__uper__right__pic {
        height: 5.5rem;
        width: 5.5rem;
        border-radius: 50%;
    }
}

.dashboard__main__top__uper__right__name {
    font-size: 2rem;
    margin-right: 1rem;
}

@media (max-width: 768px) {
    .dashboard__main__top__uper__right__name {
        font-size: 1.2rem;
    }
}

.dashboard__main__top__uper__right__bell {
    margin-left: 2rem;
    height: 4rem;
    width: 4rem;
    background-image: url(../images/36by36/notification.png);
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 768px) {
    .dashboard__main__top__uper__right__bell {
        height: 3rem;
        width: 3rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}

.dashboard__main__top__uper__right__erow {
    height: 4rem;
    width: 4rem;
    background-image: url(../images/36by36/Logout.png);
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 768px) {
    .dashboard__main__top__uper__right__erow {
        height: 3rem;
        width: 3rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}

.dashboard__main__top__uper__right__line {
    height: 5rem;
    width: 0.01rem;
    background-color: #5abffa;
    margin: 0 2rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .dashboard__main__top__uper__right__line {
        height: 4rem;
    }
}

.dashboard__main__top__lower,
.trips__main__top__lower,
.team__main__top__lower {
    height: 37.4%;
    background-color: #94d2f8;
    padding-left: 10rem;
    display: flex;
    align-items: center;
}

.dashboard__main__top__lower__icon {
    color: beige;
    font-style: bold;
    font-size: 4rem;
    align-items: center;
}

.dashboard__main__top__lower__text,
.dashboard__main__top__lower__text__right {
    font-style: bold;
    font-size: 3rem;
    color: #023350;
    margin-left: 1rem;
    font-weight: 600;
    text-transform: capitalize;
}

@media (max-width: 1024px) {
    .dashboard__main__top__lower__text,
    .dashboard__main__top__lower__text__right {
        font-size: 2.3rem;
        font-weight: 700;
    }
}

.dashboard__main__top__trips {
    height: 30%;
}

.user__des {
    font-size: 1.7rem;
    margin-top: -1rem;
    color: #94d2f8;
}

@media (max-width: 768px) {
    .user__des {
        font-size: 1.2rem;
    }
}

.logout {
    margin-top: -1rem;
}

.list__style__icons {
    list-style: none;
    color: blanchedalmond;
    line-height: 3.5rem;
    text-transform: capitalize;
}

.list__style__icons__icon {
    background-image: url(../images/bxs-dashboard.png);
}

.dashboard__sideBar__name {
    list-style: none;
    color: blanchedalmond;
    font-size: 1.3rem;
    line-height: 3.5rem;
    text-transform: capitalize;
    width: 95%;
    padding-left: unset;
    margin-left: 5.5%;
}
.dashboard__sideBarActive.active {
    background-color: #fff;
    color: #0277bd;
    border-top-left-radius: 5px;
    font-weight: 700;
    padding-left: 15px;
    border-bottom-left-radius: 5px;
}
.dashboard__sideBarActive.active svg {
    fill: #0277bd;
}
.dashboard__sideBarActive {
    width: 100%;
    transition: 0.5s;
    padding: 5px;
    display: flex;
    align-items: center;
    position: relative;
}
.dashboard__sideBarActive svg {
    fill: #fff;
    width: 24px;
    height: 24px;
    margin-right: 5px;
}
.dashboard__sideBar__name .dropdown {
    width: 100%;
    outline: unset;
    box-shadow: unset;
    border: unset;
}
.dashboard__sideBar__name .dropdown .btn-secondary {
    background-color: transparent !important;
    padding: 10px 0 11px 5px;
    border: unset;
    outline: unset;
    box-shadow: unset;
    color: #fff !important;
    font-size: 13px;
    display: flex !important;
    align-items: center;
}
.sidebarCounterWrp {
    background-color: rgb(216, 3, 3);
    position: absolute;
    width: 25px;
    height: 25px;
    right: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -3px;
}
.sidebarCounter {
    font-size: 10px;
    font-weight: 700;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.sidebarCounterPlus {
    font-size: 13px;
    display: inline-block;
}
.dashboard__sideBar__name .dropdown .btn-secondary .sidebarCounterWrp {
    right: 35px;
    top: 8px;
}
.dashboard__sideBar__name .dropdown-menu {
    position: unset !important;
    padding: 5px 10px;
    transform: translate(0px, 0px) !important;
    background-color: transparent;
    border-radius: 5px;
    width: 100%;
    transition: 0.5s;
    border: unset;
    box-shadow: unset;
    list-style: disc;
    padding-left: 35px;
}
.dashboard__sideBar__name .dropdown-menu li {
    transition: 0.5s;
    border-left: 1px solid transparent;
    margin: 5px 0;
    position: relative;
}

.dashboard__sideBar__name .dropdown-menu li a {
    margin: 5px 0;
    color: #fff;
    padding: unset;
    position: relative;
}
.dashboard__sideBar__name .dropdown-menu li a.dropdown-itemActive {
    font-weight: 600;
    background-color: #ffffff;
    padding: 4px;
    color: #0277bd;
    border-radius: 5px;
}
.dashboard__sideBar__name .dropdown-menu li::marker {
    font-size: 16px;
    color: #fff;
}
.dashboard__main__center,
.dashboard__main__bottom {
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 24rem;
    width: 95%;
    margin-top: 2rem;
}

.dashboard__main__center__left,
.dashboard__main__bottom__left {
    display: flex;
    position: absolute;
    height: 26rem;
    width: 78rem;
    margin-top: 1rem;
    margin-left: 2rem;
    border-radius: 1rem;
    box-shadow: 0 3px 6px #272d3b33;
    flex-direction: column;
}

.dashboard__main__center__right {
    position: absolute;
    height: 26rem;
    width: 40rem;
    margin-top: 1rem;
    margin-left: 84rem;
    border-radius: 1rem;
    justify-content: flex-end;
    box-shadow: 0 3px 6px #272d3b33;
}

.dashboard__main__center__right__outer__1 {
    display: flex;
    justify-content: space-between;
    margin-left: 2rem;
    margin-right: 4rem;
}

.dashboard__main__center__right__outer__2 {
    display: flex;
    margin: 2.5rem;
}

.dashboard__main__center__right__outer__2__img {
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    background-color: #ff007c;
    background-image: url(../images/team__meeting.png);
    background-repeat: no-repeat;
    background-position: center;
}

.dashboard__main__center__right__outer__2__text {
    display: flex;
    flex-direction: column;
    margin-left: 3rem;
}

.dashboard__main__center__right__outer__5 {
    float: right;
}

.dashboard__main__center__right__outer__5__bottom__icon {
    margin-top: -3rem;
    top: 0;
    height: 3rem;
    width: 3rem;
    border-radius: 2rem;
    background-color: #00ccf2;
    background-image: url(/images/team__meeting.png);
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 3rem;
    margin-bottom: 3rem;
}

.dashboard__main__center__left__top {
    display: flex;
    font-size: 1.7rem;
    justify-content: space-between;
}

.dashboard__main__center__left__top__1 {
    display: flex;
    justify-content: space-between;
}

.dashboard__main__center__left__top__1__per {
    text-transform: capitalize;
    margin: 0 3rem;
    font-weight: 700;
    color: black;
}

.dashboard__main__center__left__top__1__all {
    margin-left: 2rem;
    font-weight: 100;
    text-transform: capitalize;
    color: black;
}

.dashboard__main__center__left__top__1__year {
    margin-left: 2rem;
    font-weight: 100;
    text-transform: capitalize;
    color: black;
}

.dashboard__main__center__left__top__1__week {
    margin-left: 2rem;
    font-weight: 100;
    margin-right: 20rem;
    text-transform: capitalize;
    color: black;
}

.dashboard__main__center__left__middle {
    height: 27vh;
}

.dashboard__main__center__left__bottom {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 1rem;
}

.dashboard__main__bottom {
    margin-top: 5rem;
}

.dashboard__main__bottom__left {
    display: flex;
}

.dashboard__main__bottom__left__top {
    margin-top: 1.5rem;
}

.dashboard__main__bottom__left__middle {
    display: flex;
    margin-top: 3rem;
    margin-left: 5rem;
}

.dashboard__main__bottom__left__middle__tablee {
    width: 100%;
}

.list__style__icons__left-bar {
    position: relative;
}

.list__style__icons__left-bar:not(:last-child) {
    margin-bottom: 1rem;
}

.left-bar::before {
    content: "";
    position: absolute;
    background-color: beige;
    width: 3px;
    height: 3%;
    left: 0;
    margin-top: 0.9rem;
    transform: scaleY(0);
    transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
        background-color 0.1s;
}

.left-bar:hover::before {
    transform: scaleY(1);
}

.sidebar-text {
    color: #d9ebf5;
}

.sidebar-text:hover,
.sidebar-text:active {
    color: white;
    text-decoration: none;
}

.sidebar-text:focus::before {
    content: "";
    color: white;
}

.sidebar-text::after {
    content: "";
    color: white;
}

.sidenav {
    height: 100%;
    width: 15%;
    z-index: 1;
    top: -5rem;
    left: 0;
    overflow: hidden;
    transition: 0.5s;
}

.sidenav a {
    text-decoration: none;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: white;
}

.sidenav .closebtn {
    top: 0;
    left: 3rem;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 1px;
    }
    .sidenav a {
        font-size: 9px;
    }
}

.side-navbar {
    margin-left: -300px;
    transition: 0.5s;
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
    background-color: #ffffff26;
}

.my-container {
    transition: 0.4s;
}

.active-nav {
    margin-left: 0;
}

#menu-btn {
    color: #0277bd;
}

@media (max-width: 1024px) {
    .count__of-people__upper > a {
        font-size: 1.7rem;
    }
}

@media (max-width: 992px) {
    .count__of-people__upper > a {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .count__of-people__upper > a {
        font-size: 1.2rem;
    }
}

@media (max-width: 1024px) {
    .count__of-people__lower > a {
        font-size: 1.7rem;
    }
}

@media (max-width: 992px) {
    .count__of-people__lower > a {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .count__of-people__lower > a {
        font-size: 1.2rem;
        margin-right: -2rem !important;
    }
}

.dashboard__uper-top {
    height: 30%;
}

.dashborad__content {
    margin-top: -4rem;
    height: 75.1%;
    overflow-y: scroll;
}

.dashborad__content::-webkit-scrollbar {
    width: 0;
}

.dashborad__content__row1 {
    display: flex;
    margin: 0 2rem;
    margin-bottom: 2rem;
}

.dashborad__content__row1__col1 {
    padding: 1rem 0;
    background-color: white;
    flex: 0 0 65%;
    border-radius: 2rem;
    box-shadow: 0 3px 6px #272d3b33;
    margin-right: 3rem;
    padding: 0 3rem;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 1430px) {
    .dashborad__content__row1__col1 {
        padding: 0 1.5rem;
        flex: 0 0 70%;
    }
}

@media (max-width: 1280px) {
    .dashborad__content__row1__col1 {
        padding: 0 1rem;
        flex: 0 0 75%;
    }
}

.dashborad__content__row1__col2 {
    flex: 1;
    background-color: #8365ff;
    border-radius: 2rem;
    box-shadow: 0 3px 6px #272d3b33;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    line-height: 2.7rem;
}

@media (max-width: 1210px) {
    .dashborad__content .res-btn {
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 1090px) {
    .dashborad__content .res-btn {
        margin-bottom: 1rem;
        text-align: center;
    }
}

.dashborad__content .dates__section {
    margin-top: 3rem;
}

@media (max-width: 1090px) {
    .dashborad__content .dates__section {
        display: flex;
        flex-direction: column;
        margin-top: 0.1rem;
        padding: 1rem 0;
    }
}

.dashborad__content .dates__exext {
    color: #a2a2a2;
    display: block;
    margin-top: 1.5rem;
    text-align: center;
    font-size: 1.5rem;
}

.dashborad__content .dot__pink {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    margin-right: 1rem;
    color: #ff007c;
    background-color: #ff007c;
}

.dashborad__content__row2 {
    display: flex;
    margin: 0 2rem;
    margin-bottom: 2rem;
    justify-content: space-between;
}

.dashborad__content__row2__col {
    border-radius: 2rem;
    display: flex;
}

.dashborad__content__row2__col__data {
    padding: 1rem 2rem;
}

.dashborad__content .col1 {
    background-color: #16d8cb;
}

.dashborad__content .col2 {
    background-color: #16d877;
}

.dashborad__content .col3 {
    background-color: #d8a416;
}

.dashborad__content .col4 {
    background-color: #04a1ff;
}

.dashborad__content .col5 {
    background-color: #d65d01b7;
}

.dashborad__content .col6 {
    background-color: #8b16d8;
}

.dashborad__content .col7 {
    background-image: url("../images/weather/weatherBgSmall.png");
    background-position: left;
    background-repeat: no-repeat;
}

.dashborad__content__row3 {
    margin: 0 2rem;
    margin-bottom: 2rem;
    display: flex;
}

.dashborad__content__row3__col1 {
    flex: 1;
    box-shadow: 0 3px 6px #272d3b33;
    border-radius: 2rem;
    border-radius: 2rem;
}

.dashborad__content__row3__col2 {
    flex: 0 0 25%;
    margin: 0 3rem;
    border-radius: 2rem;
}

@media (max-width: 1520px) {
    .dashborad__content__row3__col2 {
        flex: 0 0 29%;
    }
}

@media (max-width: 1320px) {
    .dashborad__content__row3__col2 {
        flex: 0 0 31%;
    }
}

@media (max-width: 1200px) {
    .dashborad__content__row3__col2 {
        flex: 0 0 28%;
        margin: 0 1.5rem;
    }
}

@media (max-width: 1110px) {
    .dashborad__content__row3__col2 {
        flex: 0 0 29%;
        margin: 0 1.5rem;
    }
}

@media (max-width: 1065px) {
    .dashborad__content__row3__col2 {
        flex: 0 0 30%;
        margin: 0 1rem;
    }
}

@media (max-width: 1030px) {
    .dashborad__content__row3__col2 {
        flex: 0 0 32%;
        margin: 0 1rem;
    }
}

.dashborad__content__row3__col3 {
    flex: 0 0 30%;
    border-radius: 2rem;
    box-shadow: 0 3px 6px #272d3b33;
}

@media (max-width: 1200px) {
    .dashborad__content__row3__col3 {
        flex: 0 0 32%;
    }
}

@media (max-width: 1050px) {
    .dashborad__content__row3__col3 {
        flex: 0 0 32%;
    }
}

@media (max-width: 1030px) {
    .dashborad__content__row3__col3 {
        flex: 0 0 34%;
    }
}

.dashborad__content__row4 {
    margin: 0 2rem;
    margin-bottom: 2rem;
    display: flex;
}

.dashborad__content__row4__col1 {
    flex: 0 0 23%;
    background-color: #fff;
    border-radius: 2rem;
    box-shadow: 0 3px 6px #272d3b33;
    padding: 1rem 0;
}

.dashborad__content__row4__col2 {
    flex: 0 0 23%;
    background-color: #fff;
    border-radius: 2rem;
    margin-left: 3rem;
    box-shadow: 0 3px 6px #272d3b33;
}

@media (max-width: 1400px) {
    .dashborad__content__row4__col2 {
        margin-left: 2.6rem;
    }
}

@media (max-width: 1100px) {
    .dashborad__content__row4__col2 {
        margin-left: 2rem;
    }
}

.dashborad__content__row4__col3 {
    flex: 0 0 23%;
    background-color: #fff;
    border-radius: 2rem;
    margin-left: 3rem;
    box-shadow: 0 3px 6px #272d3b33;
}

@media (max-width: 1400px) {
    .dashborad__content__row4__col3 {
        margin-left: 2.6rem;
    }
}

@media (max-width: 1100px) {
    .dashborad__content__row4__col3 {
        margin-left: 2rem;
    }
}

.dashborad__content__row4__col4 {
    flex: 0 0 23%;
    background-color: #fff;
    border-radius: 2rem;
    margin-left: 3rem;
    box-shadow: 0 3px 6px #272d3b33;
}

@media (max-width: 1400px) {
    .dashborad__content__row4__col4 {
        margin-left: 2.6rem;
    }
}

@media (max-width: 1100px) {
    .dashborad__content__row4__col4 {
        margin-left: 2rem;
    }
}

.payments {
    color: #0277bd;
    font-weight: 700;
    padding-left: 3rem;
    text-transform: capitalize;
}

.earnings {
    color: #94d2f8;
    display: block;
    padding-left: 3rem;
    text-transform: capitalize;
    font-weight: 700;
}

.earnings__month {
    color: #94d2f8;
    display: block;
    padding-left: 3rem;
    text-transform: capitalize;
    font-weight: 400;
}

.records {
    display: flex;
    align-items: center;
}

.dtrip {
    font-size: 2rem;
    color: #ffffff;
    font-weight: 600;
    text-transform: capitalize;
}

.dtrips {
    font-size: 3rem;
    margin: 0.5rem 0;
    color: #ffffff;
    font-weight: 700;
    text-transform: capitalize;
}

.expected {
    font-size: 2rem;
    color: #ffffff;
    font-weight: 400;
    text-transform: capitalize;
}

.adriver {
    color: white;
    text-transform: capitalize;
    font-size: 1.5rem;
    font-weight: 600;
}

.tdriver {
    color: white;
    text-transform: capitalize;
    font-size: 2rem;
    font-weight: 700;
}

.fdriver {
    color: white;
    text-transform: capitalize;
    font-size: 1.4rem;
    font-weight: 500;
}

.card__dashboard {
    box-shadow: 0 3px 6px #272d3b33;
    height: 65%;
    background-color: #fff;
    position: relative;
    border-radius: 2rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    padding-left: 3rem;
}

@media (max-width: 1200px) {
    .card__dashboard {
        padding-left: 2rem;
    }
}

.card__dashboard__bottom {
    background-color: #e8f5fc;
    height: 45%;
    box-shadow: 0 3px 6px #272d3b33;
    border-radius: 2rem;
    margin-top: -2.5rem;
    padding-top: 3.5rem;
    display: flex;
}

.missing-person {
    color: #0277bd;
    font-weight: 700;
    font-size: 2rem;
    text-transform: capitalize;
}

.totalperson {
    color: #94d2f8;
    font-size: 1.7rem;
    text-transform: capitalize;
    font-weight: 600;
}

.totalmperson {
    color: #94d2f8;
    font-size: 3rem;
    text-transform: capitalize;
    font-weight: 700;
}

.last-found {
    color: #94d2f8;
    font-size: 1.3rem;
    text-transform: capitalize;
    font-weight: 600;
}

.profile-sec {
    flex: 0 0 20%;
    padding-left: 1rem;
}

@media (min-width: 1200px) {
    .profile-sec {
        flex: 0 0 20%;
    }
}

@media (min-width: 1200px) {
    .profile-sec {
        flex: 0 0 20%;
    }
}

.profile-des {
    flex: 1;
}

.profile-des__user {
    text-transform: capitalize;
    font-weight: 700;
    font-size: 2rem;
    color: #023350;
    padding-left: 2rem;
}

@media (max-width: 1233px) {
    .profile-des__user {
        padding-left: 1rem;
        font-size: 1.8rem;
    }
}

.profile-des__details {
    display: flex;
    justify-content: space-around;
}

.boldtext {
    font-weight: 600;
    text-transform: capitalize;
    color: #1c1c1c;
    font-size: 1.4rem;
}

.color__text {
    color: #a2a2a2;
}

.reminders-dashboard {
    display: flex;
    justify-content: space-between;
    padding: 1rem 3rem;
}

.reminders-dashboard__rem {
    text-transform: capitalize;
    color: #272d3b;
    font-weight: 700;
    font-size: 2rem;
}

.dashboard__reminders {
    display: flex;
    justify-content: space-between;
}

.dashboard__reminders__left {
    display: flex;
    flex-direction: column;
    padding-left: 3rem;
    line-height: 4.7rem;
}

.dashboard__reminders__left > span {
    color: #272d3b;
}

.dashboard__reminders__right {
    margin-right: 2rem;
}

@media (max-width: 1200px) {
    .dashboard__reminders__right {
        margin-right: 1rem;
    }
}

.dashboard__reminders__right__user {
    display: flex;
    background-color: #0aade833;
    border: 1px solid #00ccf2;
    padding: 0.5rem 1.5rem;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1200px) {
    .dashboard__reminders__right__user {
        padding: 0.5rem;
    }
}

.dashboard__reminders__right__user__des {
    display: flex;
    margin-left: 1rem;
    line-height: 1.4;
    flex-direction: column;
}

.fweight {
    font-weight: 600;
}

.fontw {
    font-size: 1.3rem;
    padding-left: 0.5rem;
    line-height: 1.23;
}

.reminders-dashboard__errows {
    display: flex;
    flex-direction: column;
}

.reminders-dashboard__errows > a {
    cursor: pointer;
}

/* svg {
    position: relative;
    height: 150px;
    width: 150px;
    z-index: 10000;
}

svg circle {
    height: 100%;
    width: 100%;
    fill: none;
    stroke: #dfdfdf;
    stroke-width: 10;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}

svg circle:nth-child(2) {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.card00:nth-child(1) svg circle:nth-child(2) {
    stroke-dashoffset: calc(440 - (440 * 80) / 100);
    stroke: #00ccf2;
} */

.blue__line__logo svg{
    fill: #FFF;
    width: 60px;
    height: 60px;
}

.percent {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: #00ccf2;
    background-color: white;
    z-index: 1000;
}

@media (max-width: 1200px) {
    .percent {
        margin-right: 0 !important;
    }
}

.number00 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.per00 {
    color: #272d3b;
    font-weight: 700;
    font-size: 3rem;
    font-family: bree sarif;
}

.container00 {
    margin: 2rem 4rem;
}

@media (max-width: 1284px) {
    .container00 {
        margin: 2rem 1rem;
    }
}

@media (max-width: 1200px) {
    .container00 {
        margin-right: 0;
    }
}

.box00 {
    margin-right: 0;
}

.card00 {
    margin-right: 0;
}

.percentMargin {
    margin-right: 0 !important;
}

.dashboard__container00 {
    display: flex;
}

.dashboard__container00__left {
    flex: 0 0 60%;
}

.dashboard__container00__left > h3 {
    text-transform: capitalize;
    font-size: 2rem;
    font-weight: 700;
    color: #272d3b;
    padding-left: 1.5rem;
}

.dashboard__container00__center {
    flex: 0 0 0.1%;
    margin-top: 7rem;
    margin-bottom: 2rem;
    background-color: #94d2f8;
}

@media (max-width: 1240px) {
    .dashboard__container00__center {
        margin-top: 10rem;
    }
}

.dashboard__container00__right {
    flex: 1;
    text-align: left;
}

.daily-btnDashboard {
    margin-top: 1rem;
    margin-right: 2rem;
    text-align: right;
}

.records00 {
    padding-left: 1.5rem;
}

.records00 > a {
    padding-left: 0.5rem;
    color: #272d3b;
}

.records00 > a:hover {
    cursor: pointer;
    text-decoration: none;
}

.dot__blue {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    color: #00ccf2;
    background-color: #00ccf2;
}

.dot__grey {
    background-color: #dfdfdf;
}

.flexrow {
    display: flex;
}

.dashborad__content__row2 > a:hover {
    text-decoration: none;
}

.dashboard__img-small {
    background-image: url(../images/36by36/Cnavigator.png);
    height: 5rem;
    width: 6.5rem;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.6rem;
    margin-top: 3rem;
}

.dashboard__sideBar__data-min {
    margin-top: 5rem;
    margin-left: -1rem;
}

.dashboard__sideBar-min {
    flex: 0 0 5%;
    background-color: #0277bd;
    height: 100vh;
}

.dashboard__main-min > * {
    margin-left: 10rem;
    width: 90%;
}

.dashboard__main__top-min {
    margin-left: 0;
    width: 100%;
}

.list__style__icons-min {
    position: relative;
}

.list__style__icons-min:not(:last-child) {
    margin-bottom: 1rem;
}

.style1::before {
    content: "";
    position: absolute;
    background-color: beige;
    width: 3px;
    height: 5%;
    left: 12%;
    margin-top: 0.9rem;
    transform: scaleY(0);
    transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
        background-color 0.1s;
}

.style1:hover::before {
    transform: scaleY(1);
}

.progress-bar {
    position: relative;
    height: 100px;
    width: 100px;
}

.progress-bar div {
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.progress-bar div span {
    position: absolute;
    font-family: Arial;
    font-size: 25px;
    line-height: 75px;
    height: 75px;
    width: 75px;
    left: 12.5px;
    top: 12.5px;
    text-align: center;
    border-radius: 50%;
    background-color: white;
}

.progress-bar .background {
    background-color: #b3cef6;
}

.progress-bar .rotate {
    clip: rect(0 50px 100px 0);
    background-color: #4b86db;
}

.progress-bar .left {
    clip: rect(0 50px 100px 0);
    opacity: 1;
    background-color: #b3cef6;
}

.progress-bar .right {
    clip: rect(0 50px 100px 0);
    transform: rotate(180deg);
    opacity: 0;
    background-color: #4b86db;
}

@keyframes toggle {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.btn__driver {
    background-color: #dcb30d;
    color: white;
    margin-left: 3rem;
}

.assets,
.driver__assets,
.driver__leaves,
.driver__personal__details {
    color: #a2a2a2;
}

@media (max-width: 768px) {
    .assets,
    .driver__assets,
    .driver__leaves,
    .driver__personal__details {
        font-size: 1.4rem !important;
    }
}

.leaves,
.driver__leaves {
    color: #a2a2a2;
}

@media (max-width: 768px) {
    .leaves,
    .driver__leaves {
        font-size: 1.4rem !important;
    }
}

.hoverClass:hover {
    text-decoration: none;
}

.IframDocument {
    position: absolute;
    top: 15rem;
    height: 40vh;
}

.addDoc {
    text-align: center;
}

.scrollDocs {
    overflow-y: scroll;
}

.scrollDocs1 {
    height: 59vh !important;
    overflow-y: scroll;
}

.preViewSecHeader {
    display: flex;
    align-items: center;
}

.preViewSecHeader__data {
    margin: 1rem 0.5rem;
}

.preViewSecHeader__data > label {
    color: #027ec8;
}

.preViewSec {
    display: flex;
}

.preViewSec__left {
    flex: 0 1 70%;
}

.preViewSec__left__data {
    margin: 0.5rem;
}

.preViewSec__right {
    flex: 1;
}

.AllDocs {
    background-color: #94d2f8;
    display: flex;
    align-items: center;
    padding: 1rem;
    color: #fff;
    margin: 1rem 0.5rem;
}

.AllDocs__1 {
    flex: 0 1 70%;
}

.AllDocs__1 > p {
    font-weight: 700;
    font-size: 2rem;
}

.AllDocs__2 {
    flex: 1;
}

.AllDocs__2 > p {
    font-weight: 700;
    font-size: 2rem;
}

.preViewSec__left__dataName {
    flex: 1 1 20%;
}

.flexGrow {
    flex: 1 1 50%;
}

@media (max-width: 1400px) {
    .DriverTabs > a {
        font-size: 1.8rem;
    }
}

@media (max-width: 1340px) {
    .DriverTabs > a {
        font-size: 1.5rem;
    }
}

@media (max-width: 1240px) {
    .DriverTabs > a {
        font-size: 1.3rem;
        font-weight: 700;
    }
}

@media (max-width: 1240px) {
    .DriverTabs > a {
        font-size: 1.3rem;
        font-weight: 700;
    }
}

@media (max-width: 1200px) {
    .DriverTabs > a {
        font-size: 1.2rem;
        font-weight: 700;
        margin-left: 0.1rem;
        margin-bottom: 0 !important;
    }
}

.rowHeader {
    background-color: #0277bd;
    padding: 1rem 0;
    margin-bottom: 1rem;
    color: #fff;
}

.documentTableData {
    box-shadow: 5px 10px 18px #dadada;
    height: 25vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 1.5rem !important;
}

.previewBox {
    border: 1px solid #dadada;
    box-shadow: 5px 10px 18px #dadada;
}

.tripTbaleHeight,
#assigntrip,
#previoustrip {
    height: 62%;
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

th {
    color: blue;
    margin-top: 2rem;
}

.trips__main__top__lower__left,
.trips__main__top__lower__left a {
    display: flex;
    align-items: center;
}


.trips__main__top__lower__icon2 {
    padding-left: 3rem;
}

.trips__main__top__lower__text {
    margin-left: 1rem;
    font-size: 1rem;
}

.trips__main__export__sec,
.team__main__export__sec,
.driver__asstes__main__export__sec,
.driver__leaves__main__export__sec {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 5rem;
    margin-right: 3rem;
}

.trips__main__export__sec__text {
    font-size: 2rem;
    margin-left: 5rem;
    font-weight: 700;
}

.trips__main__export__sec__pdf {
    font-size: 1.8rem;
    font-style: bold;
    margin-left: 2rem;
    text-decoration: underline;
}

.trips__only {
    justify-content: space-between;
}

.blue__line,
.blue__line__form {
    background-color: #0277bd;
    height: 4rem;
    color: white;
    margin-left: 26px;
    padding-right: 4rem;
    border-radius: 0 1rem 0 0;
}

.blue__line__logo {
    font-size: 2.5rem;
}

.horizontal__line {
    height: 0.2rem;
    margin: 0 5rem;
    margin-top: 0.5rem;
    background-color: #0277bd;
}

.trips__details {
    margin-left: 3rem;
    margin-top: 2.7rem;
}

@media (max-width: 1560px) {
    .trips__details {
        margin-top: 1rem;
    }
}

.trips__details__assigned {
    margin-right: 2rem;
    color: #a2a2a2;
}

@media (max-width: 1560px) {
    .trips__details__assigned {
        margin-right: 1.8rem;
    }
}

@media (max-width: 900px) {
    .trips__details__assigned {
        margin-right: 0.5rem;
    }
}

.trips__details__privious {
    color: #a2a2a2;
}

.fontsNpositions {
    font-size: 2rem;
}

@media (max-width: 900px) {
    .fontsNpositions {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .fontsNpositions {
        font-size: 1.2rem;
    }
}

.trips__text__modal {
    font-size: 1.6rem;
    font-weight: 400;
    color: #81bbde;
}

.modal-trip {
    height: 35%;
    width: 35%;
}

.trip-modal-line {
    margin-top: -0.5rem;
}

.button-trip-modal {
    margin-top: 4rem;
}

.dropdown {
    position: relative;
    display: inline-block;
}

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

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

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

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

.more__trips {
    display: flex;
}

.dropbtn {
    height: 5rem;
}

.trip_table_data > td {
    height: 4rem !important;
}

.users__team__dashboard,
.driver__assets,
.driver__leaves,
.team__dashboard__assigned__trips,
.users__form__inspection {
    background-color: #0277bd;
    display: inline-block;
    color: white;
    padding: 0.5rem 1.5rem;
    margin-left: 2.6rem;
    margin-top: 3rem;
}

.team__users {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
/*
.btn, */
.btn__cancle,
.btn__next {
    border-style: none;
    stroke-opacity: 0;
    padding: 0.5rem 1.5rem;
    border-radius: 1rem;
}
/*
.btn:focus, */
.btn__cancle:focus,
.btn__next:focus,
/* .btn:active, */
.btn__cancle:active,
.btn__next:active {
    outline: none;
}

.btn__trip {
    background-color: #dcb30d;
    color: white;
    margin-left: 3rem;
}

.btn__trip:hover {
    color: white !important;
    background-color: #eece4f;
}

.btn__trip:focus,
.btn__trip:active {
    outline: none;
}

.btn__trip__alert {
    align-items: center;
    height: 2rem;
    margin-right: 0.3rem;
    margin-bottom: 0.2rem;
}

.btn__trip__alert:focus,
.btn__trip__alert:active {
    outline: none;
}

.btn__team {
    background-color: #0277bd;
    color: white;
    margin-left: 1rem;
}
.btn-outline-danger {
    color: #dc3545 !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: #dc3545 !important;
}
.btn__team:hover {
    background-color: #2c9ee0;
    color: white !important;
}

.btn__team:focus,
.btn__team:active {
    outline: none;
    color: white;
}

.btn__blue {
    background-color: #94d2f8;
    color: white;
}

.btn__blue:focus,
.btn__blue:active {
    outline: none;
}

@media (max-width: 768px) {
    .btn__blue {
        padding: 0.3rem !important;
        font-size: 1.2rem !important;
    }
}

.btn__darkblue {
    background-color: #0277bd;
    color: white;
}

@media (max-width: 768px) {
    .btn__darkblue {
        padding: 0.3rem !important;
        font-size: 1.2rem !important;
    }
}

.btn__darkblue:focus,
.btn__darkblue:active {
    outline: none;
}

.btn__green {
    background-color: #36a110;
    color: white;
}

.btn__green:focus,
.btn__green:active {
    outline: none;
}

.btn__red {
    border-color: #ff0707 !important;
    color: #ff0707 !important;
    padding: 0 0.7rem !important;
}

.btn__red:active,
.btn__red:focus {
    outline: none;
    border: none;
}

.btn__chat {
    background-color: #dcf1fe;
    border: none;
    border-radius: 0.5rem;
    padding: 1.5rem 3rem;
    color: #bcc5d3;
}

.btn__chat:active,
.btn__chat:focus {
    outline: none;
}

.close1 {
    border: 1px solid #81bbde !important;
    margin-left: 35rem !important;
}

.close1:focus,
.close1:active {
    outline: none;
}

.yes {
    margin: 0 !important;
}

.yes:focus,
.yes:active {
    outline: none;
}

.btn-asset {
    border-radius: 0.5rem;
    color: #0f780b;
    font-weight: 700;
    text-transform: capitalize;
    border: 2px solid #0f780b;
}

.btn-asset:focus,
.btn-asset:active {
    outline: none;
}

.btn-GPS {
    color: #a2a2a2;
    border: 1px solid #a2a2a2;
    border-radius: 0.5rem;
    text-transform: capitalize;
    margin-left: 5rem;
    margin-right: 2rem;
}

.btn-GPS:hover {
    color: #0277bd;
    border: 1px solid #0277bd;
}

.btn-GPS:focus,
.btn-GPS:active {
    outline: none;
}

.btn-PDF {
    color: #a2a2a2;
    border: 1px solid #a2a2a2;
    border-radius: 0.5rem;
    text-transform: capitalize;
}

.btn-PDF:hover {
    color: #0277bd;
    border: 1px solid #0277bd;
}

.btn-PDF:focus,
.btn-PDF:active {
    outline: none;
}

.btn-PDF > img:hover {
    color: #0277bd;
}

.btn-edit {
    color: #a2a2a2;
    border: 1px solid #a2a2a2;
    border-radius: 0.5rem;
    text-transform: capitalize;
    margin-right: 2rem;
}

.btn-edit:hover {
    color: #0277bd;
    border: 1px solid #0277bd;
}

.btn-edit:focus,
.btn-edit:active {
    outline: none;
}

.photo {
    font-size: 1.2rem;
    color: #94d2f8;
    border: 1px solid #94d2f8;
    border-radius: 0.5rem;
    background-color: #fff;
}

.btn-border {
    border: 1px solid #027ec8;
}

.btn-routing-table {
    padding: 0.5rem 2rem;
    width: 10rem;
    background-color: #94d2f8;
    text-transform: capitalize;
    color: white;
    font-size: 1.5rem;
}

.btn-routing-table:hover,
.btn-routing-table:active,
.btn-routing-table:focus {
    background-color: #0277bd;
    outline: none !important;
    color: white !important;
}

.button {
    background-color: #94d2f8;
    text-transform: capitalize;
    color: white;
    text-decoration: none;
    border-radius: 2rem;
    padding: 1rem 2.5rem;
}

.btn.focus,
.btn:focus,
.btn:hover {
    color: #f9f9f9 !important;
}
.button:active,
.button:focus,
.button:hover {
    text-transform: capitalize;
    color: white;
    text-decoration: none;
    background-color: #0277bd;
}

.brn-small {
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    background-color: #0277bd;
}

.brn-small:hover,
.brn-small:active {
    background-color: #94d2f8;
}

.switchBtn {
    border: none;
    border-radius: 0.4rem;
}

.cancleBtn {
    border: 1px solid #2d62ed;
    border-radius: 0.5rem;
}

.team__main__top__lower {
    justify-content: space-between;
}

.team__main__top__lower__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 5rem;
}

.dashboard__main__top__lower__text__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: blanchedalmond;
}

.search {
    border: none;
}

.search__bar {
    border: none;
    width: 4rem;
    height: 3.5rem;
    border-radius: 1rem;
    background-color: #0277bd;
    background-image: url(../images/Search.png);
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

.search__bar:hover,
.search__bar:active {
    border: none;
    width: 15rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    border: 3px solid #0277bd;
    background-color: white;
    background-image: none;
    color: #0277bd;
}

.team__main__export__sec,
.driver__asstes__main__export__sec,
.driver__leaves__main__export__sec {
    margin-top: 1rem;
    height: 5rem;
}

@media (max-width: 768px) {
    .team__main__export__sec,
    .driver__asstes__main__export__sec,
    .driver__leaves__main__export__sec {
        font-size: 1.2rem;
    }
}

@media (max-width: 1560px) {
    .userA {
        margin-top: 1rem !important;
    }
}

.users,
.assets,
.driver__assets,
.driver__leaves,
.driver__personal__details,
.leaves {
    height: 2rem;
    display: inline-block;
    margin-left: 3rem;
    font-size: 2rem;
    padding-bottom: 3rem;
    margin-top: 3.1rem;
}

.users > a,
.assets > a,
.driver__assets > a,
.driver__leaves > a,
.driver__personal__details > a,
.leaves > a {
    color: #a2a2a2;
}

.users > a:hover,
.assets > a:hover,
.driver__assets > a:hover,
.driver__leaves > a:hover,
.driver__personal__details > a:hover,
.leaves > a:hover {
    color: #0277bd;
    text-decoration: none;
}

.count {
    display: flex;
    font-size: 2rem;
    margin-right: 3rem;
}

.count__of-people {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.count__of-people__upper {
    margin-bottom: -0.5rem;
}

.count__of-people__upper > a {
    color: white;
    font-weight: 700;
}

.count__of-people__lower > a {
    color: white;
}

@media (max-width: 1200px) {
    .heading__res {
        font-size: 1.4rem;
    }
}

@media (max-width: 992px) {
    .heading__res {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .heading__res {
        font-size: 1rem;
    }
}

/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: black;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */

.modal-content,
.modal-content1 {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 35%;
    height: auto;
    margin-top: 10rem;
}

/* The Close Button */

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-haeding {
    color: #81bbde;
    font-weight: 700;
}

.input-field {
    margin-bottom: 2rem;
    padding: 1rem 1rem;
    border: 1px solid #81bbde;
    border-radius: 1rem;
    color: #81bbde;
}

.input-field::placeholder {
    color: #81bbde;
}

.input-field:focus,
.input-field:active {
    outline: none;
}

.modal-line {
    border-width: 0.3rem;
    width: 100%;
    border-color: #dcf1fe;
    margin-bottom: 4rem;
}

@media (max-width: 768px) {
    img.team__icon {
        margin-left: -6rem !important;
    }
}

.modalHeight {
    height: 60%;
    overflow-y: scroll;
}

.modalHeight::-webkit-scrollbar {
    width: 0;
}

.driver__assets__icon {
    color: white;
}

.driver__assets,
.driver__leaves {
    margin-left: 2.6rem;
}

.driver__asstes__main__export__sec,
.driver__leaves__main__export__sec {
    margin-top: 0px;
}

.driver__leaves__button {
    background-color: #dcf1fe;
    color: #35b101;
}

.add__driver {
    display: flex;
    background-color: #ffffff;
    box-shadow: 3px 3px 6px #00000029;
    margin-left: 5rem;
    margin-right: 5rem !important;
    overflow-y: scroll;
}

@media (max-width: 1440px) {
    .add__driver {
        margin: 0 3rem;
    }
}

@media (max-width: 1200px) {
    .add__driver {
        margin: 0 1rem;
    }
}

.add__driver::-webkit-scrollbar {
    width: 1px;
}

.add__driver__left {
    display: flex;
    flex-direction: column;
    flex: 0 0 35%;
}

@media (max-width: 1200px) {
    .add__driver__left {
        flex: 0 0 30%;
    }
}

.add__driver__right {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    margin-right: 15rem;
}

@media (max-width: 1440px) {
    .add__driver__right {
        margin-right: 0 !important;
    }
}

.add__driver__right__img__nackground {
    width: 30rem;
    height: 100%;
    background-color: #94d2f880;
    background-image: url(../images/icons24by24/Photo_icon.png);
    background-repeat: no-repeat;
    background-position: center;
}

.add__driver__right__btn {
    margin-top: 2rem;
    background-color: #027ec8;
    color: white;
}

.add__driver__right__textarea {
    border: 3px solid #94d2f880;
    margin-top: 5rem;
    width: 30rem;
    height: 10rem;
    font-size: 2rem;
    padding-left: 1rem;
}

.add__driver__right__bottom__btn {
    margin-left: 25rem;
    margin-top: 4rem;
}

.driver__login__name,
.driver__login__email {
    margin-right: 45rem;
    background-color: white;
    margin-left: 10rem;
    padding: 0 1rem;
}

.driver__login__username {
    background-color: #fff;
    width: 20%;
    margin-left: 8rem;
}

.driver__login__email {
    margin-right: 50rem;
}

.btn__cancle {
    border: 2px solid #027ec8;
    color: #027ec8;
    background-color: #fff;
    border-radius: 0.5rem;
}

.btn__next {
    background-color: #027ec8;
    border: 2px solid #027ec8;
    color: white;
    border-radius: 0.5rem;
}

.input__field__add__driver {
    padding: 1rem;
    border-radius: 1rem;
    width: 60%;
    flex-shrink: 1;
    border: 1px solid #0277bd;
    color: #0277bd;
}

.input__field__add__driver:hover {
    padding: 1rem;
    border-radius: 1rem;
    width: 60%;
    flex-shrink: 1;
    border: 1px solid #0277bd;
    color: #0277bd;
}

.input__field__add__driver:active {
    padding: 1rem;
    border-radius: 1rem;
    width: 60%;
    flex-shrink: 1;
    border: 1px solid #0277bd;
    color: #0277bd;
}

@media (max-width: 1200px) {
    .add__driver__right__bottom__btn {
        margin-left: 0;
    }
}

.add__driver__btn__res {
    margin-left: 0 !important;
}

.addnewDrivers {
    margin-top: 7rem;
    box-shadow: 3px 3px 6px #00000029;
}

.addnewDrivers__row {
    height: 58vh;
    /* margin: 0; */
    overflow-y: scroll;
}

.addnewDrivers__row::-webkit-scrollbar {
    width: 1rem;
}

.employeeDetails {
    padding: 2rem 0;
}

.employeeDetails > label {
    display: block;
    color: #0277bd;
    margin-top: 1rem;
}

.employeeDetails > input {
    border: 1px solid #0277bd;
    padding: 2rem 1rem;
    color: #0277bd;
}

.employeeDetails > select {
    border: 1px solid #0277bd;
    padding: 0 1rem;
    color: #0277bd;
}

.avatar-preview-driver {
    width: 30rem;
    height: 30rem;
    position: relative;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-preview-driver > div {
    width: auto;
    height: 100%;
    border-radius: 1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.ImageSec {
    margin-top: 5rem;
}

.driverUplod {
    display: flex;
    flex-direction: column;
}

.avatar-edit-driver {
    margin-top: 2rem;
    margin-left: 1rem;
}

.btnSec {
    margin-top: 3rem;
    display: flex;
    justify-content: right;
}

.btnSec > button {
    margin-right: 0rem;
}

.add__driver__detalis {
    height: 55%;
    margin-top: 7rem;
    margin-left: 3rem;
    margin-right: 3rem;
    display: flex;
    overflow-y: scroll;
}

.add__driver__detalis__left {
    flex: 0 0 30%;
    display: flex;
    margin: 0 5rem;
    flex-direction: column;
}

@media (max-width: 992px) {
    .add__driver__detalis__left {
        margin: 0 2rem;
    }
}

.add__driver__detalis__center {
    flex: 0 0 30%;
    margin-left: 5rem;
}

@media (max-width: 992px) {
    .add__driver__detalis__center {
        margin-left: 2rem;
    }
}

.add__driver__detalis__right {
    flex: 0 0 25%;
}

.add__driver__detalis__right__buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 43rem;
}

.input__field {
    padding: 1rem;
    border-radius: 1rem;
    width: 100%;
    flex-shrink: 1;
    border: 1px solid #0277bd;
    color: #0277bd;
}

@media (max-width: 992px) {
    .input__field {
        padding: 0.5rem;
    }
}

.input__field:hover {
    width: 100%;
    flex-shrink: 1;
    border: 1px solid #0277bd;
    color: #0277bd;
}

.input__field:active {
    padding: 1rem;
    border-radius: 1rem;
    width: 100%;
    flex-shrink: 1;
    border: 1px solid #0277bd;
    color: #0277bd;
}

.dropbox {
    justify-content: flex-end;
    height: 4.5rem;
    margin-top: 1.7rem;
    width: fit-content;
    margin-left: 1rem;
    color: #0277bd;
}

.block__outer {
    display: flex;
}

.bolck__inner {
    display: flex;
    flex-direction: column;
}

.input__field__rate {
    width: 100%;
    margin-right: 15rem;
}

.upper__text {
    color: #0277bd;
    background-color: #ffffff;
    display: inline-block;
}

.uper__text {
    color: #a2a2a2;
}

.btn__manage {
    height: 4rem;
    margin-top: 1.9rem;
}

@media (max-width: 992px) {
    .btn__res {
        padding: 3px;
        margin-left: 1rem;
    }
}

@media (max-width: 992px) {
    .btn__res1 {
        padding: 3px;
        margin-left: 0.5rem !important;
    }
}

@media (max-width: 768px) {
    .btn__res1 {
        padding: 2px;
        margin-left: 0.5rem !important;
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .btn___res {
        margin-left: -1px;
    }
}

.team__dashboard__assigned__trips {
    margin-left: -0.4rem;
    margin-top: 0.1rem;
}

.add__driver {
    height: 53%;
    background-color: #ffffff;
    box-shadow: 3px 3px 6px #00000029;
    margin-top: 7rem;
    margin-left: 5rem;
    margin-right: 1rem;
    overflow-y: auto;
    display: flex;
}

.add__driver__left {
    display: flex;
    flex-direction: column;
    flex: 0 0 35%;
}

.add__driver__right {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    margin-right: 15rem;
}

.add__driver__right__img__background {
    width: 35rem;
    height: 25rem;
    background-color: #94d2f880;
    background-image: url(../images/icons24by24/Photo_icon.png);
    background-repeat: no-repeat;
    background-position: center;
}

.add__driver__right__btn {
    margin-top: 2rem;
    background-color: #027ec8;
    color: white;
}

.new__assets {
    height: 55%;
    overflow-y: auto;
    margin-top: 6rem;
    overflow-x: clip;
}

/* width */

.new__assets::-webkit-scrollbar {
    width: 0;
}

.line__half {
    margin: 10rem 35rem;
    margin-left: 25rem;
}

.add__driver__detalis__right__asset {
    border: 3px solid #027ec8;
    border-radius: 0.5rem;
    width: 100%;
    height: 94%;
    background-color: #dcf1fe4d;
}

@media (max-width: 992px) {
    .add__driver__detalis__right__asset {
        height: 70%;
    }
}

.assign__forms {
    color: #027ec8;
}

.search__forms {
    margin: 2rem;
    width: 88%;
    padding: 0.6rem;
    padding-left: 1rem;
    border: 2px solid #027ec8;
    border-radius: 0.5rem;
    background-color: #dcf1fe4d;
}

.select__all__forms {
    color: #027ec8;
    font-size: 2rem;
    font-weight: 700;
    margin-left: 2rem;
}

.form__box {
    height: 55%;
    border: 1px solid #027ec8;
    margin: 2rem;
    border-radius: 0.5rem;
    overflow-y: auto;
}

.form__box__data {
    display: flex;
    margin: 1rem;
}

.form__box__data__checkbox {
    height: 1.9rem;
}

.form__box__data__reports {
    color: #027ec8;
    margin-left: 1.5rem;
    font-weight: 500;
    font-size: 1.7rem;
}

/* width */

.form__box::-webkit-scrollbar {
    width: 3px;
}

/* Track */

::-webkit-scrollbar-track {
    background: #f1f1f1;
    margin-top: 2rem;
    margin-bottom: 5rem;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: #027ec8;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #f1f1f1;
}

.driver__asset__bottom {
    display: flex;
    margin: 0 10rem;
}

.driver__asset__bottom__left {
    display: flex;
    flex: 0 0 40%;
}

.driver__asset__bottom__left__notes {
    font-size: 3rem;
    font-weight: 700;
}

.driver__asset__bottom__left__input {
    width: 100%;
    height: 20rem;
    margin-left: 3rem;
    border-radius: 0.5rem;
    border: 1px solid #027ec8;
}

.driver__asset__bottom__right {
    flex: 1;
    align-items: center;
    margin-top: 15rem;
    margin-left: 40rem;
}

@media (max-width: 1200px) {
    .driver__asset__bottom__right {
        margin-left: 6rem;
    }
}

.assignVehicleToDriver {
    margin-top: 3rem;
}

.list-view {
    margin-top: 1rem;
    height: 54%;
}

@media (max-width: 1560px) {
    .list-view {
        height: 51%;
    }
}

@media (max-width: 1200px) {
    .list-view {
        height: 51%;
    }
}

.tile-view,
.img-view {
    height: 55%;
    overflow: scroll;
}

.tile-view::-webkit-scrollbar,
.img-view::-webkit-scrollbar {
    width: 1px;
}

@media (max-width: 1560px) {
    .tile-view,
    .img-view {
        height: 51%;
    }
}

@media (max-width: 1200px) {
    .tile-view,
    .img-view {
        height: 51%;
    }
}

@media (max-width: 992px) {
    .tile-view,
    .img-view {
        height: 51%;
    }
}

@media (max-width: 768px) {
    #bulk,
    #person {
        height: 3.3rem;
    }
}

.cards {
    display: flex;
    margin: 5rem 0;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .cards {
        margin: 2rem 0;
        height: 60%;
    }
}

.cards__design,
.cards__design__image-view {
    padding: 2rem 0;
    flex: 0 0 20.2%;
    background-color: #e8f5fc;
    margin: 1rem 3rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
}

@media (max-width: 1440px) {
    .cards__design,
    .cards__design__image-view {
        margin: 1rem;
        flex: 0 0 31%;
    }
}

@media (max-width: 1024px) {
    .cards__design,
    .cards__design__image-view {
        margin: 1rem;
        flex: 0 0 45%;
    }
}

@media (max-width: 320px) {
    .cards__design,
    .cards__design__image-view {
        margin: 1rem;
        flex: 0 0 90%;
    }
}

.tile-view__photo {
    height: 10rem;
    width: 10rem;
    margin-top: 1rem;
    border-radius: 50%;
    margin-left: 3.5rem;
}

@media (max-width: 1200px) {
    .tile-view__photo {
        height: 8rem;
        width: 8rem;
    }
}

@media (max-width: 992px) {
    .tile-view__photo {
        height: 6rem;
        width: 6rem;
        margin-left: 5rem;
    }
}

span > .user-name {
    font-weight: 700;
}

@media (max-width: 1200px) {
    span > .user-name {
        font-weight: 500;
    }
}

@media (max-width: 992px) {
    span > .user-name {
        font-weight: 600;
        font-size: 1.6rem;
    }
}

.cards__design__description__row1 {
    display: flex;
    justify-content: space-between;
    margin-top: -1rem;
}

.cards__design__description__row1__col1 {
    display: flex;
}

.cards__design__description__row1__col2 {
    display: flex;
}

.cards__design__description__row3 {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.cards__design__description__row3__col2 {
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    border-radius: 20%;
}

h5.age {
    color: #a2a2a2;
}

h5.years {
    font-weight: 530;
}

.more__actions {
    margin-right: 1rem;
}

.cards__design__image-view {
    flex: 0 0 28%;
    height: 28rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 inherit;
}

@media (max-width: 1440px) {
    .cards__design__image-view {
        flex: 0 0 31%;
    }
}

@media (max-width: 1024px) {
    .cards__design__image-view {
        flex: 0 0 30.6%;
    }
}

@media (max-width: 992px) {
    .cards__design__image-view {
        flex: 0 0 30%;
    }
}

@media (max-width: 768px) {
    .cards__design__image-view {
        flex: 0 0 46%;
    }
}

.image-view__photo {
    align-items: center;
    margin-left: 1.5rem;
    margin-top: 2rem;
}

.missingPersonData {
    height: 57%;
}

@media (max-width: 1560px) {
    .missingPersonData {
        height: 54%;
    }
}

.notifications__main {
    height: 40%;
    width: 90%;
    margin-left: 5%;
    box-shadow: 1px 5px 2rem #52575d1a;
    margin-right: 5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1200px) {
    .notifications__main {
        height: 47%;
    }
}

.notifications__main__part {
    background-color: #fff;
    position: absolute;
    height: 100%;
    width: 70%;
    margin-right: 5rem;
    left: -3rem;
}

.notifications__main__part__data {
    display: flex;
    justify-content: center;
    font-size: 2rem;
    line-height: 1.7rem;
    margin-top: 2rem;
}

@media (max-width: 1200px) {
    .notifications__main__part__data {
        line-height: 1rem;
        font-size: 1.7rem;
    }
}

@media (max-width: 992px) {
    .notifications__main__part__data {
        line-height: 0.5rem;
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .notifications__main__part__data {
        line-height: -1rem;
        font-size: 1.1rem;
    }
}

.notifications__main__part__data__row {
    display: flex;
    justify-content: flex-start;
    background-color: #fff;
    flex: 0 0 30%;
}

@media (max-width: 1200px) {
    .notifications__main__part__data__row {
        margin-right: 2rem;
    }
}

@media (max-width: 992px) {
    .notifications__main__part__data__row {
        margin-right: 5rem;
    }
}

@media (max-width: 768px) {
    .notifications__main__part__data__row {
        margin-right: 5rem;
    }
}

.switch {
    position: relative;
    display: inline-block;
    width: 5rem;
    height: 2rem;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #2196f3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.users__form__inspection {
    margin-left: 2.6rem;
    margin-top: -3rem;
}

.inspections {
    font-size: 2rem;
    display: flex;
    justify-content: flex-end;
    margin-right: 9.5rem;
    font-weight: 600;
    align-items: flex-end;
    padding-top: 1rem;
}

.inspections > a {
    color: black;
}

.blue__line__form {
    margin-top: 0;
}

.inspection__type,
.inspection__type_res {
    margin: 0 3rem;
    margin-top: 9rem;
    font-size: 1.7rem;
}

.horizontal-row {
    margin: 0 2rem;
    margin-top: -0.5rem;
}

span.all > a {
    color: #a2a2a2;
    margin-left: 1rem;
    text-transform: capitalize;
    padding-right: 1.5rem;
    text-decoration: none;
}

span.all > a:hover,
span.all > a:focus {
    color: #337ab7;
    font-weight: 700;
    text-decoration: none;
}

span.paused > a {
    color: #a2a2a2;
    margin-left: 1rem;
    text-transform: capitalize;
    padding-right: 1.5rem;
    text-decoration: none;
}

span.paused > a:hover,
span.paused > a:focus {
    color: #337ab7;
    font-weight: 700;
    text-decoration: none;
}

span.failed > a {
    color: #a2a2a2;
    margin-left: 1rem;
    text-transform: capitalize;
    padding-right: 1.5rem;
    text-decoration: none;
}

span.failed > a:hover,
span.failed > a:focus {
    color: #337ab7;
    font-weight: 700;
    text-decoration: none;
}

.table__height__manager {
    height: 130% !important;
}

@media (min-width: 1200px) {
    .table-wrapper__form {
        height: 56% !important;
    }
}

.FormHeight {
    height: 166% !important;
}

.reports__section {
    height: 75%;
    width: 100%;
    overflow-y: scroll;
    margin-top: -5rem;
}

.reports {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.reports__genrates {
    display: flex;
    justify-content: center;
    align-items: center;
}

.reports__inspections {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reports__inspections__final {
    margin-left: -5rem;
    padding-left: 12rem;
}

.report__main {
    box-shadow: 3px 3px 6px;
}

.display_assets {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
}

.a {
    margin-top: 2rem;
}

.reports__headings {
    display: flex;
    padding: 2rem 0;
}

.report__assets {
    flex: 0 0 35%;
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 1rem 0;
}

.report__assets > a {
    color: #0277bd;
}

.report__data {
    flex: 0 0 30%;
}

@media (max-width: 1440px) {
    .report__data {
        margin-left: 3rem;
        flex: 0 0 32%;
    }
}

@media (max-width: 1200px) {
    .report__data {
        margin-left: 8rem !important;
        flex: 1 1 25%;
    }
}

@media (max-width: 1024px) {
    .report__data {
        margin-left: 8rem !important;
        flex: 1 1 37%;
    }
}

@media (max-width: 992px) {
    .report__data {
        margin-left: 10rem !important;
        flex: 1 1 50%;
    }
}

@media (max-width: 768px) {
    .report__data {
        margin-left: 6rem !important;
        flex: 1 1 53%;
    }
}

.report__data__today {
    margin-left: 7rem;
    color: #52575d;
}

.optional {
    flex: 1;
}

.list {
    display: flex;
    flex-direction: column;
}

@media (max-width: 992px) {
    .list {
        margin-right: 3.5rem;
    }
}

.list__uo {
    display: flex;
    list-style: none;
    justify-content: space-evenly;
    color: #52575d;
}

.list__order__day {
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #0277bd;
}

.report__info {
    background-color: #f3f3f3;
    height: 30%;
    margin-left: 3rem;
    margin-right: 2rem;
    border-radius: 5px;
    display: flex;
}

@media (max-width: 1024px) {
    .report__info {
        margin-left: -2rem;
    }
}

@media (max-width: 768px) {
    .report__info {
        margin-left: -4rem;
        font-size: 1.3rem;
    }
}

.report__info__text {
    flex: 0 0 15%;
    padding-left: 9rem;
    padding-top: 1.5rem;
    color: #52575d;
}

.report__info__text__1 {
    padding-top: 2rem;
    color: #52575d;
}

.report__info__text__2 {
    padding-left: 7rem;
    display: flex;
    flex-direction: column;
    color: #52575d;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .report__info__text__2 {
        margin-left: -2rem;
        font-size: 1rem !important;
        white-space: wrap !important;
    }
}

.report__info__white {
    background-color: #fff;
}

.reports__box {
    margin-left: 10rem;
}

.reports__box__1 {
    display: flex;
    padding-top: 1.1rem;
}

.blue__box {
    height: 3rem;
    width: 3rem;
    background-color: lightblue;
    margin: 0 0.7rem;
}

.scroll__view {
    height: 100%;
}

.dropbtn {
    color: #94d2f8;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: #fff;
    margin-right: 8rem;
    margin-top: 0.5rem;
}

.dropbtn:hover,
.dropbtn:focus {
    color: #0277bd;
    outline: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px #00000029;
    z-index: 1;
}

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

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

.dropbox {
    display: flex;
    width: auto;
    height: 2rem;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

.myCheckbox input {
    display: none;
}

.myCheckbox span {
    height: 3rem;
    width: 3rem;
    background-color: #e2f1fb;
    margin: 0 0.7rem;
    display: block;
}

.myCheckbox input:checked + span {
    background-color: #61c4ff;
}

.forms__reports11 {
    padding-left: 10px;
    text-transform: capitalize;
}

#myInput {
    box-sizing: border-box;
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 10px;
    border: none;
    border-bottom: 1px solid #ddd;
}

#myInput:focus {
    outline: 3px solid #ddd;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
    margin-left: 0;
}

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

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

.inline-block {
    box-shadow: 1px 3px 2rem rgba(82, 87, 93, 0.3);
    border-radius: 1rem;
    padding: 1.3rem 3rem;
    font-size: 2rem;
    display: inline-block;
    margin-left: 3rem;
    word-spacing: 1rem;
    text-transform: capitalize;
}

.pointer {
    cursor: pointer;
}

.pointer:hover,
.pointer:focus {
    color: #0277bd;
    text-decoration: none;
}

a.pointer {
    color: #a2a2a2;
}

.wrap-data {
    height: 61%;
    overflow: auto;
    margin-top: 3rem;
}

/* width */

.wrap-data::-webkit-scrollbar {
    width: 0.1rem;
}

/* Track */

.wrap-data::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */

.wrap-data::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */

.wrap-data::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.reminder-section,
.reminder-section2 {
    margin-top: 5rem !important;
    box-shadow: 1px 3px 2rem rgba(82, 87, 93, 0.1);
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.reminder-section2 {
    margin-top: 1rem !important;
    height: 100% !important;
    align-items: flex-start;
    font-size: 1.5rem;
}

.reminder-section2-text {
    margin-top: 3rem;
    margin-left: 5rem;
}

.reminder-section2-text > a {
    color: #9e9e9e;
}

.reminder-section2-text > a:hover,
.reminder-section2-text > a:focus {
    color: #0277bd;
    text-decoration: none;
}

.reminder-box {
    display: block;
    width: 100%;
    height: 90%;
    margin: 0 2rem;
    border-radius: 0.5rem;
    border: 1px solid #94d2f8;
}

@media (max-width: 1200px) {
    .reminder-box {
        margin: 0 1.5rem;
    }
}

@media (max-width: 768px) {
    .reminder-box {
        margin: 0 0.5rem;
    }
}

.reminder-box3 {
    display: block;
    width: 100%;
    height: 90%;
    margin: 0 2rem;
    border-radius: 0.5rem;
    border: 1px solid #94d2f8;
}

@media (max-width: 768px) {
    .reminder-box3 {
        margin: 0 0.5rem;
        font-size: 1.1rem;
    }
}

.reminder-text {
    font-size: 1.45rem;
    font-weight: 700;
    margin-left: 1.5rem;
    color: #0277bd;
}

.reminder-text-rem {
    color: #9e9e9e;
    margin-left: 1.5rem;
    display: flex;
}

.reminder-text-rem__span {
    flex: 0 0 70%;
}

.reminder-text-rem > a {
    color: #9e9e9e;
}

.reminder-text-rem > a:focus,
.reminder-text-rem > a:hover {
    text-decoration: none;
}

.reminder__manager-box__icon {
    display: flex;
    align-items: center;
    vertical-align: top;
}

.text--color {
    margin-left: 1rem;
    color: #dc9a5f;
}

.icon-reminder {
    background-color: #0187d621;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
}

.iconpic {
    margin: 0.7rem;
    margin-left: 5px;
}

.hrow {
    border: 1px solid grey;
    width: 72vw;
    margin-left: 5rem;
}

.reminer-dates {
    display: flex;
}

.reminder-from-date {
    text-transform: capitalize;
    display: block;
    color: #a2a2a2;
    margin-left: 1rem;
}

.reminder-date-input {
    border-radius: 0.5rem;
    border: 1px solid #a2a2a2;
    padding: 0 2rem;
    margin-left: 0.5rem;
    color: #a2a2a2;
}

.reminder-date-input:focus {
    outline: none;
}

.reminder-buttons {
    margin-top: 1rem;
}

.btn-border {
    border: 1px solid lightblue !important;
}

.reminder-model-height {
    height: 30rem !important;
}

@media (max-width: 1200px) {
    .reminder-model-height {
        width: 50%;
    }
}

.chat {
    overflow: hidden;
    position: relative;
    display: flex;
}

.chat__user {
    padding: 1rem;
    box-shadow: 1px 7px 10px #cdeef7;
    flex: 0 0 35%;
    margin: 3rem;
    height: 100%;
    overflow: auto;
    /* width */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

@media (max-width: 1200px) {
    .chat__user {
        flex: 0 0 45%;
        margin: 3rem;
    }
}

@media (max-width: 1024px) {
    .chat__user {
        margin-right: 0;
    }
}

.chat__user::-webkit-scrollbar {
    width: 0;
}

.chat__user::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.chat__user::-webkit-scrollbar-thumb {
    background: #888;
}

.chat__user::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.chat__user__conversations {
    color: #a2a2a2;
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 2rem;
}

.chat__user__name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0277bd;
    text-transform: capitalize;
}

.chat__user__profile {
    margin-bottom: -1rem;
    display: flex;
    align-items: flex-start;
}

.chat__user__des {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    width: 70%;
    padding-left: 3rem;
    color: #9e9e9e;
}

.chat__user__des__details {
    line-height: -1;
}

.chat__user__time {
    color: #9e9e9e;
}

.chat__msg {
    flex: 1;
    margin: 2rem;
    margin-bottom: 0;
    box-shadow: 1px 7px 10px #cdeef7;
    overflow-y: scroll;
    /* width */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

.chat__msg::-webkit-scrollbar {
    width: 0;
}

.chat__msg::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.chat__msg::-webkit-scrollbar-thumb {
    background: #888;
}

.chat__msg::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.chat__msg__users {
    display: flex;
    padding: 1rem 1rem;
    justify-content: space-between;
}

.chat__msg__users__user1 {
    max-width: 45%;
}

.chat__msg__users__user2 {
    flex-basis: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 45%;
}

.chat__msg__box {
    display: flex;
    width: 100%;
}

.chat__msg__box__bg {
    background-color: #f1f6fb;
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 3rem;
    margin: 3rem 1rem;
    flex: 0 0 70%;
}

.chat__msg__box__bg:focus,
.chat__msg__box__bg:active {
    outline: none;
}

.chat__horizontal__row {
    color: #a2a2a24d;
    width: 80%;
    display: flex;
    border-width: 3px;
}

.chat__user__profile {
    display: flex;
}

@media (max-width: 10124px) {
    .chat__user__profile {
        width: 100%;
    }
}

.abx {
    display: flex;
}

.user__msg,
.user__msg2 {
    background-image: linear-gradient(to bottom, #0277bd, #0187d6b8);
    padding: 1rem 2rem;
    color: #ffffff;
    height: auto;
    align-items: center;
    border-radius: 1.5rem 1.5rem 1.5rem 0;
    flex-basis: auto;
}

.user__msg2 {
    border-radius: 1.5rem 1.5rem 0 1.5rem;
    background-image: linear-gradient(to bottom, #e6e6e6, #f0ebeb);
    color: #4c5264;
}

input.chat__msg__box__bg {
    width: 80%;
}

@media (max-width: 1200px) {
    input.chat__msg__box__bg {
        width: 70%;
    }
}

@media (max-width: 992px) {
    input.chat__msg__box__bg {
        width: 65%;
    }
}

@media (max-width: 768px) {
    input.chat__msg__box__bg {
        width: 55%;
    }
}

span.chat__user__details {
    white-space: nowrap;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1024px) {
    span.chat__user__details {
        width: 65%;
    }
}

.chat-subHeading {
    margin-left: 1rem;
    text-transform: capitalize;
    color: #023350;
    font-weight: 600;
}

@media (max-width: 768px) {
    .inline-block {
        font-size: 1.4rem;
    }
}

.team__add-user {
    /* height: 70%; */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    padding-bottom: 3rem;
}

.team__add-user__upper {
    border-radius: 1rem;
    padding-bottom: 3rem;
    margin-bottom: 1rem;
}

.team__add-user__top {
    background-color: white;
    padding: 1.5rem 2.5rem;
    width: 100%;
    display: flex;
}

.team__add-user__top__img {
    height: 10rem;
    width: 10rem;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 3px 6px #00000029;
}
.team__add-user__top__img > img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

.team__add-user__top__left {
    flex: 1;
    padding-left: 5rem;
}

.team__add-user__top__text {
    display: flex;
    align-items: center;
}

.team__add-user__count {
    display: flex;
    justify-content: space-between;
    background-color: #dcf1fe;
    margin: 1rem 2rem;
    border-radius: 0.5rem;
    padding: 2rem 2.5rem;
}

.invite-user__driver {
    display: block;
    color: #1c1c1c;
    text-transform: capitalize;
}

.invite-user__count {
    font-size: 2rem;
    font-weight: 700;
    color: #023350;
}

.invite-user__total {
    text-transform: capitalize;
    color: #a2a2a2;
}

.companion-text {
    color: #0277bd;
    font-size: 2rem;
    text-transform: capitalize;
    font-weight: 600;
}

.abccd {
    display: flex;
    margin-right: 1rem;
}

th {
    text-transform: capitalize;
    color: #0277bd;
}

body {
    font-family: sans-serif;
    background-color: #eeeeee;
}

.file-upload {
    background-color: #ffffff;
    margin: 0 auto;
}

.file-upload-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #1fb264;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #15824b;
    transition: all 0.2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

.file-upload-btn:hover {
    background: #1aa059;
    color: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.file-upload-btn:active {
    border: 0;
    transition: all 0.2s ease;
}

.file-upload-content {
    display: none;
    text-align: center;
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap {
    /* position: relative; */
    height: 10%;
    width: 10%;
    margin-left: 1rem;
}
.image-upload-wrap > img {
    width: 100%;
}

.image-dropping:hover {
    background-color: #94d2f8;
}

.image-title-wrap {
    color: #222;
}

.drag-text {
    text-align: center;
}

.drag-text h3 {
    font-weight: 100;
    text-transform: uppercase;
    color: #15824b;
    background-image: url(../images/36by36/picture.png);
    background-repeat: no-repeat;
}

.file-upload-image {
    max-height: 90px;
    max-width: 120px;
    margin: auto;
    border-radius: 1rem;
}

.remove-image {
    width: 100px;
    height: 20px;
    margin-left: -0.5rem;
    color: #fff;
    background: #94d2f8;
    border: none;
    margin-top: 1px;
    border-radius: 4px;
    transition: all 0.2s ease;
    outline: none;
    text-transform: uppercase;
}

.imageThumb {
    max-height: 75px;
    border: 1px solid #d9534f;
    padding: 1px;
    cursor: pointer;
}

.remove {
    padding: 0px 4px;
    display: block;
    background: #d9534f;
    border: 1px solid #d9534f;
    color: white;
    text-align: center;
    cursor: pointer;
    margin-top: 3px;
    border-radius: 5px;
}
.remove:hover {
    background: white;
    color: #d9534f;
}

.remove-image:hover {
    background: #d9534f;
    color: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.remove-image:active {
    border: 0;
    transition: all 0.2s ease;
}

.add-new-form__main {
    height: 70%;
    display: flex;
    overflow-y: auto;
}

.form-title {
    flex: 0 0 40%;
    padding-left: 5rem;
    padding-top: 2rem;
}

.form-title > input {
    padding: 0.5rem 1rem;
    border: 1px solid #a2a2a2;
    border-radius: 0.5rem;
    width: 60%;
}

.form-title > button {
    border: 1px solid #0277bd;
    padding: 0.5rem 2.5rem;
}

.form__add-to-card {
    margin: 0 2rem;
    flex: 1;
}

.form__add-to-card__buttons {
    margin-bottom: 1rem;
    display: flex;
    justify-content: flex-end;
    padding-top: 2rem;
    padding-right: 1rem;
}

.add-to-card {
    display: flex;
    box-shadow: 0 3px 6px #00000029;
    padding: 1rem 1.5rem;
    padding-bottom: 5rem;
    margin-bottom: 5rem;
}

.add-to-card__form {
    flex: 0 0 60%;
}

.add-to-card__img {
    flex: 1;
    background-color: #fff;
}

.form__heading {
    color: #023350;
    font-weight: 700;
}

.selector,
.selector1 {
    height: 3rem;
    width: 35rem;
    margin-left: 2rem;
    padding-left: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    color: #a2a2a2;
    border: 1px solid #0277bd;
}

.selector:focus,
.selector1:focus {
    outline: none;
}

.selector1 {
    width: auto;
}

.form-span-text {
    display: block;
    margin-left: 3rem;
    color: #0277bd;
    text-transform: capitalize;
}

.x {
    display: inline-flex;
    margin-top: 1rem;
}

.x__l {
    margin-left: 3rem;
    font-size: 1.2rem;
    padding-right: 7rem;
}

.x__l > span {
    color: #707070;
}

.add-option {
    margin-left: 2rem;
    margin-right: 1.5rem;
    background-color: #94d2f8;
    border: none;
    border-radius: 50%;
}

.add-option:focus,
.add-option:hover,
.add-option:active {
    background-color: #55afe7;
    outline: none;
}

.more__option {
    font-size: 1.7rem;
    font-weight: 600;
    color: #94d2f8;
    text-transform: capitalize;
    text-decoration: none;
}

.more__option:hover,
.more__option:focus {
    color: #55afe7;
    font-style: none;
    text-decoration: none;
}

.y {
    display: flex;
    flex-direction: column;
    margin-left: 2.4rem;
    margin-top: 2.5rem;
}

.y__span {
    font-weight: 800;
    color: #0277bd;
    margin-bottom: 1rem;
}

.y__btn {
    display: block;
    border: 1px solid #a2a2a2;
    width: 17rem;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    color: #a2a2a2;
}

.y__btn:hover,
.y__btn:focus,
.y__btn:active {
    color: #888484;
    outline: none;
}

.z {
    display: flex;
    justify-content: flex-end;
}

.z__cancle {
    border: 1px solid #027ec8;
    color: #027ec8;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
}

.z__cancle:hover,
.z__cancle:focus,
.z__cancle:active {
    outline: none;
    color: #066196;
}

.z__add {
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    background-color: #027ec8;
    color: white;
    border: none;
    margin: 0 1rem;
}

.z__add:hover,
.z__add:active,
.z__add:focus {
    color: #f0ebeb;
    background-color: #54bbf7;
    outline: none;
}

.add-to-card__img {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #707070;
    font-weight: 500;
    font-size: 3rem;
    text-transform: capitalize;
    border: 1px solid #707070;
    margin: 6rem 3rem;
}

.from__settings {
    margin-bottom: 5rem;
    padding: 1rem 3rem;
    padding-bottom: 4rem;
    box-shadow: 0 3px 6px #00000029;
}

.from__settings > h4 {
    color: #023350;
    text-transform: capitalize;
    font-weight: 600;
}

.from__settings__line1 {
    color: #a2a2a2;
}

.from__settings__line1 > input {
    border: #a2a2a2;
}

.text__area {
    background-color: #efefef;
    border: none;
    padding: 1rem 2rem;
}

.text__area:active,
.text__area:hover,
.text__area:focus {
    outline: none;
}

.del-btn {
    border: 1px solid #0277bd !important;
}

.alignment-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alignment-text__right {
    display: flex;
    align-items: center;
}

.edit__driver-profile > a {
    color: #94d2f8;
    font-size: 2rem;
}

.driver-profile__blue-line {
    display: flex;
}

.driver-profile__blue-line__inspection {
    flex: 0 0 33%;
    justify-content: space-between;
    display: flex;
    margin-right: 1.5rem;
}

.driver-profile__blue-line__faults {
    flex: 0 0 25%;
    display: flex;
    justify-content: space-between;
    margin-right: 1.5rem;
}

.driver-profile__blue-line__Last-inspection {
    flex: 0 0 17%;
    justify-content: space-between;
    display: flex;
    margin-right: 1.5rem;
}

.driver-profile__blue-line__avg-inspection {
    flex: 0 0 20%;
    justify-content: space-between;
    display: flex;
}

.verticle__line__driver__profile {
    background-color: #707070;
    height: 5rem;
    width: 1px;
}

.verticle__line__driver__profile__data {
    background-color: #707070;
    height: 10rem;
    width: 1px;
    margin-top: 3rem;
    margin-left: 1rem;
}

.last__inspection-record {
    padding: 1rem 2.5rem;
    display: flex;
}

.last__inspection-record__info {
    flex: 0 0 20%;
}

.last__inspection-record__time-period {
    flex: 1;
}

.last__inspection-record__data {
    display: flex;
    justify-content: space-between;
    line-height: 2.2;
}

.driver__profile-id {
    font-size: 1.4rem;
    text-transform: capitalize;
    font-weight: 600;
}

.driver-profile--data {
    color: #a2a2a2;
}

.driver-profile--id {
    color: #0277bd;
    font-size: 1.7rem;
    font-weight: 600;
}

.driver-profile {
    margin-top: 7rem;
    margin-left: 4rem;
}

.abxx {
    margin-left: 3rem;
    margin-top: 1rem;
}

.last__inspection {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    color: #0277bd;
}

.form-post-trip-inspection {
    height: 70%;
    padding: 2rem 6rem;
    overflow-y: auto;
}

.form-post-trip-inspection__heading {
    display: flex;
    align-items: center;
}

.form-post-trip-inspection__heading > h2 {
    text-transform: capitalize;
    margin-right: 2rem;
    font-weight: 500;
}

.form-post-trip-inspection__heading > a {
    background-color: #fff;
    padding: 0.2rem 1rem;
    color: #0f780b;
    border-radius: 0.5rem;
    border: 2px solid #0f780b;
    font-weight: 600;
}

.form-post-trip-inspection__data {
    display: flex;
    justify-content: space-between;
}

.form-post-trip-inspection__data__left__data {
    color: #94d2f8;
    padding: 1px 0;
    text-transform: capitalize;
}

.form-post-trip-inspection__data__right {
    display: flex;
}

.user {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 4rem;
}

.user__img {
    background-color: #00000029;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.user__name {
    color: #0277bd;
    text-transform: capitalize;
    font-weight: 700;
}

.form-inspection__button-sec {
    display: flex;
}

.form-inspection__button-sec:not(:last-child) {
    margin-left: 2rem;
}

.gallery {
    display: flex;
    margin-top: 3rem;
}

.gallery__card,
.gallery__card1 {
    height: 50.9rem;
    width: 36.6rem;
    margin-left: 3rem;
    box-shadow: 0 3px 6px #00000029;
    padding: 1rem 2rem;
}

.gallery__card__haeding {
    display: flex;
    justify-content: space-between;
}

.gallery__card__img,
.gallery__card__content {
    background-color: black;
    height: 43rem;
    margin: 1rem 0;
}

.gallery__card1 {
    height: 10% !important;
}

.blue__haeding {
    color: #0277bd;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1.5rem;
}

.signature {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    font-size: 7rem;
    border: 2px solid #a2a2a2;
    color: #94d2f8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.gallery-bottom {
    display: flex;
    margin-left: 3rem;
    margin-top: 3rem;
    justify-content: space-between;
}

.gallery-bottom__left {
    flex: 0 0 31.7%;
}

.gallery-bottom__center {
    flex: 0 0 31.7%;
    box-shadow: 0px 3px 6px #00000029;
    height: 50.9rem;
    padding: 1rem 2rem;
}

.gallery-bottom__right {
    flex: 0 0 31.7%;
}

.gallery__card__content {
    height: 22rem;
    background-color: #fff;
}

.gallery__card__content__list {
    color: #a2a2a2;
    line-height: 2.7;
    font-size: 1.4rem;
    text-transform: capitalize;
    margin-left: -2rem;
    margin-top: 2rem;
}

.upper {
    flex: 0 0 31.7%;
    height: 34.5rem;
    box-shadow: 0px 3px 6px #00000029;
    padding: 1rem 2rem;
}

.lower {
    flex: 0 0 31.7%;
    box-shadow: 0px 3px 6px #00000029;
    padding: 1rem 2rem;
    margin-top: 3rem;
}

.lower__img {
    background-color: black;
    height: 30rem;
    margin-top: 1rem;
}

.formsSignature {
    display: flex;
    justify-content: flex-end;
}

.settings {
    margin: 0 5rem;
    height: 70%;
    overflow: scroll;
}

.settings::-webkit-scrollbar {
    width: 0;
}

.settings__blue-border {
    height: 6rem;
    width: auto;
    background-color: #0277bd;
    border-radius: 0 1.5rem 0 0;
}

.settings__data {
    /* height: 95%; */
    /* box-shadow: 0 3px 6px #00000029; */
    padding-left: 3rem;
    padding-top: 2rem;
    padding-bottom: 5rem;
}

.settings-span {
    display: block;
    color: #0277bd;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1.5rem;
    margin-top: 1.5rem;
}

.setting-form > input {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #36a7e9;
}

.setting-form > input::placeholder {
    color: #a2a2a2;
}

.setting-form > input:focus {
    outline: none;
}

select {
    width: 31.5%;
    height: 4rem;
    border-radius: 0.5rem;
    border: 1px solid #36a7e9;
    padding: 0 1.5rem;
}

select::placeholder {
    color: #a2a2a2;
}

select:focus {
    outline: none;
}

.setting-btn {
    background-color: #0277bd;
    color: white;
    border-radius: 0.5rem;
    border: none;
    font-size: 1.2rem;
    padding: 0.5rem 3rem;
    text-transform: capitalize;
    margin-top: 1rem;
}

.setting-btn:focus {
    outline: none;
}

.setting-btn:hover {
    background-color: #259ee4;
}

.span-grey {
    color: #a2a2a2;
}

.profile__main {
    height: 63vh;
    margin: 0.1rem 7rem;
    /* box-shadow: 0px 3px 6px #00000029; */
    /* overflow-y: scroll; */
}

.profile__main::-webkit-scrollbar {
    width: 1px;
}

.use-flex {
    display: flex;
    justify-content: space-between;
    padding: 1rem 5rem;
    padding-right: 8rem;
}

.blue__box-profile {
    margin: 0 7rem;
}

.profile-details {
    margin-left: 7rem;
}

.input__profile {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #36a7e9;
}

.input__profile::placeholder {
    color: #a2a2a2;
}

.input__profile:focus {
    outline: none;
}

.user-profile-img {
    position: relative;
    height: 20rem;
    width: 30rem;
    margin: 0.5rem 7rem;
    margin-top: -1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.user-profile-photo {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
}

.profile-button {
    margin-top: 24rem;
    margin-left: 40rem;
}

.bottom--button {
    display: flex;
    justify-content: flex-end;
    margin-top: 15rem;
}

.profile-notification-heading {
    color: #0277bd;
    font-size: 2rem;
    font-weight: 600;
    text-transform: capitalize;
}

.profile-span {
    color: #a2a2a2;
    text-transform: capitalize;
    font-size: 1.4rem;
    line-height: 2.2;
}

.profile-last-sec {
    display: flex;
    justify-content: flex-end;
    margin-top: 3rem;
}

.focus-active-color > a:hover {
    text-decoration: none;
}

.focus-active-color > a:active,
.focus-active-color > a:focus {
    background-color: #0277bd;
    color: white !important;
    padding: 1rem 1rem;
    text-decoration: none;
}

.profile-user {
    height: 20rem;
    width: 30rem;
}

.profile-form-left {
    width: 50%;
}

@media (max-width: 1440px) {
    .profile-form-left {
        width: 40%;
    }
}

@media (max-width: 1370px) {
    .profile-form-left {
        width: 30%;
    }
}

.profile-form-right {
    width: 50%;
}

@media (max-width: 1440px) {
    .profile-form-right {
        margin-left: 1rem;
    }
}

@media (max-width: 1410px) {
    .profile-form-right {
        margin-left: 1rem;
        width: 30%;
        margin-right: 15rem;
    }
}

@media (max-width: 1370px) {
    .profile-form-right {
        margin-right: 15rem;
    }
}

.filter {
    height: 2rem;
    width: 2rem;
}

.routes {
    background-color: #0277bd;
    color: white;
    padding-right: 2rem;
    padding-left: 2rem;
    margin-bottom: 0;
    padding-top: 0.5rem;
}

.dispatch__and__routing {
    box-shadow: 0px 3px 6px #00000029;
    overflow-y: scroll;
    display: flex;
    padding: 1rem;
    height: fit-content;
}

.dispatch__and__routing::-webkit-scrollbar {
    width: 5px;
}

.dispatch__and__routing__left {
    flex: 0 0 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1440px) {
    .dispatch__and__routing__left {
        flex: 0 0 7%;
    }
}

.dispatch__and__routing__center {
    background-color: #272d3b33;
    width: 2px;
}

.dispatch__and__routing__right {
    flex: 1;
}

.dispatch__and__routing__right__heading {
    display: flex;
    background-color: #e3e9ef;
    justify-content: space-between;
    margin-left: 0.1rem;
}

.dispatch__and__routing__right__heading1 {
    display: flex;
    background-color: #dcf1fe;
    justify-content: space-between;
    margin-left: 0.1rem;
    height: 3rem;
}

.trip-id {
    font-weight: 700;
    background-color: #e3e9ef;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem 0 0 0.5rem;
}

.routing-hrow > hr {
    border-width: 2px !important;
    border-color: aqua !important;
}

.trip {
    color: #0277bd;
    text-transform: capitalize;
    padding: 0.5rem 0.7rem;
}

.trip-id1 {
    font-weight: 700;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem 0 0 0.5rem;
}

.route-trips {
    background-color: #94d2f8;
    border-radius: 0.5rem;
    width: 39rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 2rem;
}

.route-trips__start {
    background-color: #dcf1fe;
    box-shadow: 0px 3px 6px #00000029;
    padding: 0 0.8rem;
    margin-left: -1rem;
    border-radius: 1rem;
}

.route-trips__stops {
    background-color: #dcf1fe;
    box-shadow: 0px 3px 6px #00000029;
    padding: 0 1rem;
    color: #0277bd;
    font-weight: 700;
}

.route-trips__end {
    background-color: #dcf1fe;
    box-shadow: 0px 3px 6px #00000029;
    padding: 0.2rem 0.8rem;
    margin-right: -1rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
}

.trip02 {
    margin-left: 15rem;
}

.trip03 {
    margin-left: 50rem;
}

.trip04 {
    margin-left: 37rem;
}

.trip05 {
    margin-left: 7rem;
}

.trip06 {
    margin-left: 29rem;
}

.trip07 {
    margin-left: 57rem;
}

.trip08 {
    margin-left: 3rem;
}

.routing-table {
    display: flex;
    height: 59% !important;
    margin-top: 7rem !important;
}

@media (max-width: 1560px) {
    .routing-table {
        height: 57% !important;
    }
}

.route-table {
    flex: 0 0 50%;
}

.routing-map {
    flex: 1;
}

.map-iframe {
    width: 100%;
    height: 100%;
}

.routing-btns {
    display: flex;
    justify-content: space-between;
    margin: 0 1rem;
    margin-bottom: 0.5rem;
}

.dr__dName {
    font-weight: 700;
    line-height: 8px !important;
}

.drEmail {
    font-weight: 400;
}

/*
ORDER = [ base + typography > genral layout + grid > page layout > components

*/

#sidebar-small {
    flex-basis: 7%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.drawer-icons {
    margin-left: 1.5rem;
}

#logo-small-dashboard {
    margin-left: 3.5rem;
}

@media (max-width: 1200px) {
    td {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    td {
        font-size: 1.2rem;
    }
}

@media (min-width: 1200px) {
    .heading__res {
        padding-right: 5rem;
    }
}

@media (min-width: 992px) {
    .heading__res {
        padding-right: 5rem;
    }
}

.driver__res {
    display: flex;
    justify-content: space-between;
}

.res__asset {
    margin-top: 0.5rem;
}

@media (max-width: 1200px) {
    .res__asset {
        margin-top: 0;
    }
}

.add__driver__responsive {
    display: flex;
    justify-content: flex-start;
}

.add-driver-margin__res {
    margin-bottom: 1rem;
}

.margin-bottom-res {
    margin-bottom: 1rem;
}

@media (max-width: 1440px) {
    .modal-new__content {
        width: 45%;
    }
}

@media (max-width: 1024px) {
    .modal-new__content {
        width: 55%;
    }
}

@media (max-width: 768px) {
    .modal-new__content {
        width: 70%;
    }
}

.inspection__type_res {
    margin-top: 14rem;
}

.Report__res {
    height: 30%;
}

@media (max-width: 768px) {
    .report__info__text__1 {
        margin-left: 0;
        font-size: 1rem !important;
        width: 12rem;
        line-height: 2.5rem;
    }
}

.mentanceTable {
    height: 52%;
}

@media (max-width: 1200px) {
    .mentanceTable {
        height: 51%;
    }
}

.mentanceTableNew {
    height: 51%;
}

.service {
    margin: 0 3rem;
}

.maintenance__user > a:focus,
.maintenance__user > a:active {
    background-color: #0277bd;
    color: white;
    text-decoration: none;
}

.active-link-blue {
    background-color: #0277bd;
    color: #fff !important;
    padding: 1rem;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .maintenance__user > a {
        font-size: 1.4rem;
    }
}

@media (max-width: 1200px) {
    .maintenance__menu {
        display: none;
    }
}

#maintenance__dropdoen-list {
    display: none;
}

@media (max-width: 1200px) {
    #maintenance__dropdoen-list {
        display: block;
        margin-top: 3rem;
        margin-left: 3rem;
    }
}

.menuMaintenanceBtn {
    padding: 0.7rem 3rem;
    border: none;
    color: white;
    background-color: #0277bd;
}

@media (max-width: 992px) {
    .maintenance-table__data > h3 {
        font-size: 1.4rem;
        font-weight: 700;
    }
}

@media (max-width: 768px) {
    .wo > h3 {
        font-size: 1.3rem;
        font-weight: 600;
        margin-left: 1rem;
    }
}

@media (max-width: 768px) {
    .maintenance__count__res {
        margin-right: 2rem;
    }
}

@media (max-width: 768px) {
    .mar__res {
        margin-left: 1.5rem;
    }
}

.pagination {
    display: inline-block;
    height: 5%;
}

.pagination-center {
    display: flex;
    justify-content: center;
}

.pagination a {
    color: #0277bd;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination a.active {
    background-color: #0277bd;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
}

.BgcImgContainer {
    background-image: url("../images/background.png");
    height: 100vh;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
}

.whiteBox {
    border-radius: 3rem;
    background-color: #fff;
}

.paddingsWhiteBox {
    padding: 7rem 4rem;
}

.paddingsWhiteBoxSignUp {
    padding: 3rem 3rem;
}

.lineHorizontal {
    width: 2px;
    background-color: #0277bd;
    height: 100%;
}

.login {
    color: #023350;
    font-weight: 700;
    font-size: 2.5rem;
}

.inputLogin > input {
    font-size: 1.4rem;
    padding: 0.8rem 1.4rem;
    border: 1px solid #0187d6;
    color: #0277bd;
}

.inputLogin > label {
    font-size: 1.5rem;
    color: #0277bd;
    font-weight: 600;
}

.forgotPass {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1rem;
}

.forgotPass > input {
    margin-right: 0.5rem;
    border: 1px solid #0187d6;
}

.forgotPass > a > span {
    font-weight: 600;
    font-size: 1.4rem;
}

.butonSignUp {
    margin-top: 1.5rem;
}

.butonSignUp > button {
    font-size: 1.4rem;
    padding: 0.6rem 0;
}

.butonSignUp > a {
    font-size: 1.4rem;
    padding: 0.6rem 0;
}

.imgContainerSignUp {
    display: flex;
    justify-content: center;
    align-items: center;
}

.signUpBtnstyle {
    border: 1px solid #d6d5d5;
    border-radius: 0.5rem;
}

.signupHeading {
    display: flex;
    justify-content: space-between;
    padding: 2rem 2rem;
}

.signupHeading > span {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #023350;
}

.avatar-upload {
    position: relative;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: -0.2rem;
    z-index: 1;
    top: 4.1rem;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input + label {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0;
    border-radius: 100%;
    border: 1px solid black;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
    z-index: 100000;
}

.avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #555454;
}

.avatar-upload .avatar-edit input + label:after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview {
    width: 5.5rem;
    height: 5.5rem;
    position: relative;
    border-radius: 100%;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-preview > div {
    width: auto;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.Actionsrelative {
    position: relative;
}

.actionDrops {
    right: 12rem;
}

.dropdown-contentAction {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 15rem;
    z-index: 1;
    right: 0;
}

.dropdown-contentAction a {
    color: black;
    padding: 0.8rem 1rem;
    text-decoration: none;
    display: block;
}

.dropdown-contentAction a:hover {
    background-color: #ddd;
}

.actionDrops:hover .dropdown-contentAction {
    display: block;
}
/*
.btn:hover, */
.btn__cancle:hover,
.btn__next:hover,
.actionDrops:hover .actionDrops:hover .btn__cancle,
.actionDrops:hover .btn__next {
    background-color: #0b7dda;
}

.ActionsDropDownsOuter {
    display: flex;
    justify-content: space-around;
}

.editDropDown {
    margin-left: 4rem;
}

#calendar {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    margin: 0 auto;
    overflow: hidden;
}

.header {
    background: #94d2f8;
    text-align: center;
    position: relative;
    z-index: 100;
}

.header h1 {
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 50px;
    font-weight: 100;
    letter-spacing: 1px;
    color: white;
}

.left,
.right {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    top: 50%;
    margin-top: -7.5px;
    cursor: pointer;
}

.left {
    border-width: 7.5px 10px 7.5px 0;
    border-color: transparent #fff transparent transparent;
    left: 20px;
}

.right {
    border-width: 7.5px 0 7.5px 10px;
    border-color: transparent transparent transparent #fff;
    right: 20px;
}

.month {
    opacity: 0;
}

.month.new {
    -webkit-animation: fadeIn 1s ease-out;
    opacity: 1;
}

.month.in.next {
    -webkit-animation: moveFromTopFadeMonth 0.4s ease-out;
    -moz-animation: moveFromTopFadeMonth 0.4s ease-out;
    animation: moveFromTopFadeMonth 0.4s ease-out;
    opacity: 1;
}

.month.out.next {
    -webkit-animation: moveToTopFadeMonth 0.4s ease-in;
    -moz-animation: moveToTopFadeMonth 0.4s ease-in;
    animation: moveToTopFadeMonth 0.4s ease-in;
    opacity: 1;
}

.month.in.prev {
    -webkit-animation: moveFromBottomFadeMonth 0.4s ease-out;
    -moz-animation: moveFromBottomFadeMonth 0.4s ease-out;
    animation: moveFromBottomFadeMonth 0.4s ease-out;
    opacity: 1;
}

.month.out.prev {
    -webkit-animation: moveToBottomFadeMonth 0.4s ease-in;
    -moz-animation: moveToBottomFadeMonth 0.4s ease-in;
    animation: moveToBottomFadeMonth 0.4s ease-in;
    opacity: 1;
}

.week {
    background: #dcf6ff;
}

.day {
    display: inline-block;
    width: 60px;
    padding: 10px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    background: #dcf6ff;
    position: relative;
    z-index: 100;
}

.day.other {
    color: #0277bd;
}

.day.today {
    color: red;
}

.day-name {
    font-size: 9px;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: #2610ec;
    letter-spacing: 0.7px;
}

.day-number {
    font-size: 24px;
    letter-spacing: 1.5px;
}

.day .day-events {
    list-style: none;
    margin-top: 3px;
    text-align: center;
    height: 12px;
    line-height: 6px;
    overflow: hidden;
}

.day .day-events span {
    vertical-align: top;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 5px;
    height: 5px;
    line-height: 5px;
    margin: 0 1px;
}

.blue {
    background: orange;
}

.orange {
    background: red;
}

.green {
    background: green;
}

.yellow {
    background: yellow;
}

.details {
    position: relative;
    width: 420px;
    height: 75px;
    background: #d9e3f5;
    margin-top: 5px;
    border-radius: 4px;
}

.details.in {
    -webkit-animation: moveFromTopFade 0.5s ease both;
    -moz-animation: moveFromTopFade 0.5s ease both;
    animation: moveFromTopFade 0.5s ease both;
}

.details.out {
    -webkit-animation: moveToTopFade 0.5s ease both;
    -moz-animation: moveToTopFade 0.5s ease both;
    animation: moveToTopFade 0.5s ease both;
}

.arrow {
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -2px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #a4a4a4 transparent;
    transition: all 0.7s ease;
}

.events {
    height: 75px;
    padding: 7px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.events.in {
    -webkit-animation: fadeIn 0.3s ease both;
    -moz-animation: fadeIn 0.3s ease both;
    animation: fadeIn 0.3s ease both;
}

.events.in {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.details.out .events {
    -webkit-animation: fadeOutShrink 0.4s ease both;
    -moz-animation: fadeOutShink 0.4s ease both;
    animation: fadeOutShink 0.4s ease both;
}

.events.out {
    -webkit-animation: fadeOut 0.3s ease both;
    -moz-animation: fadeOut 0.3s ease both;
    animation: fadeOut 0.3s ease both;
}

.event {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.5px;
    padding: 2px 16px;
    vertical-align: top;
}

.event.empty {
    color: black;
}

.event-category {
    height: 10px;
    width: 10px;
    display: inline-block;
    margin: 6px 0 0;
    vertical-align: top;
}

.event span {
    display: inline-block;
    padding: 0 0 0 7px;
}

.legend {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #3c3c3c;
    line-height: 30px;
    display: none;
}

.entry {
    position: relative;
    padding: 0 0 0 25px;
    font-size: 13px;
    display: inline-block;
    line-height: 30px;
    background: transparent;
}

.entry:after {
    position: absolute;
    content: "";
    height: 5px;
    width: 5px;
    top: 12px;
    left: 14px;
}

.entry.blue:after {
    background: #9ccaeb;
}

.entry.orange:after {
    background: #f7a700;
}

.entry.green:after {
    background: #99c66d;
}

.entry.yellow:after {
    background: #f9e900;
}

/* Animations are cool!  */

@-webkit-keyframes moveFromTopFade {
    from {
        opacity: 0.3;
        height: 0px;
        margin-top: 0px;
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes moveFromTopFade {
    from {
        height: 0px;
        margin-top: 0px;
        -moz-transform: translateY(-100%);
    }
}

@keyframes moveFromTopFade {
    from {
        height: 0px;
        margin-top: 0px;
        transform: translateY(-100%);
    }
}

@-webkit-keyframes moveToTopFade {
    to {
        opacity: 0.3;
        height: 0px;
        margin-top: 0px;
        opacity: 0.3;
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes moveToTopFade {
    to {
        height: 0px;
        -moz-transform: translateY(-100%);
    }
}

@keyframes moveToTopFade {
    to {
        height: 0px;
        transform: translateY(-100%);
    }
}

@-webkit-keyframes moveToTopFadeMonth {
    to {
        opacity: 0;
        -webkit-transform: translateY(-30%) scale(0.95);
    }
}

@-moz-keyframes moveToTopFadeMonth {
    to {
        opacity: 0;
        -moz-transform: translateY(-30%);
    }
}

@keyframes moveToTopFadeMonth {
    to {
        opacity: 0;
        -moz-transform: translateY(-30%);
    }
}

@-webkit-keyframes moveFromTopFadeMonth {
    from {
        opacity: 0;
        -webkit-transform: translateY(30%) scale(0.95);
    }
}

@-moz-keyframes moveFromTopFadeMonth {
    from {
        opacity: 0;
        -moz-transform: translateY(30%);
    }
}

@keyframes moveFromTopFadeMonth {
    from {
        opacity: 0;
        -moz-transform: translateY(30%);
    }
}

@-webkit-keyframes moveToBottomFadeMonth {
    to {
        opacity: 0;
        -webkit-transform: translateY(30%) scale(0.95);
    }
}

@-moz-keyframes moveToBottomFadeMonth {
    to {
        opacity: 0;
        -webkit-transform: translateY(30%);
    }
}

@keyframes moveToBottomFadeMonth {
    to {
        opacity: 0;
        -webkit-transform: translateY(30%);
    }
}

@-webkit-keyframes moveFromBottomFadeMonth {
    from {
        opacity: 0;
        -webkit-transform: translateY(-30%) scale(0.95);
    }
}

@-moz-keyframes moveFromBottomFadeMonth {
    from {
        opacity: 0;
        -webkit-transform: translateY(-30%);
    }
}

@keyframes moveFromBottomFadeMonth {
    from {
        opacity: 0;
        -webkit-transform: translateY(-30%);
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOutShink {
    to {
        opacity: 0;
        padding: 0px;
        height: 0px;
    }
}

@-moz-keyframes fadeOutShink {
    to {
        opacity: 0;
        padding: 0px;
        height: 0px;
    }
}

@keyframes fadeOutShink {
    to {
        opacity: 0;
        padding: 0px;
        height: 0px;
    }
}

.modal-content1 {
    height: 100%;
    margin-top: -5rem;
    overflow-y: scroll;
}

.modal-content1::-webkit-scrollbar {
    width: 1rem;
}

@media (max-width: 1320px) {
    .modal-content1 {
        width: 50%;
    }
}

.leaveApprove {
    height: 1rem;
    width: 1.5rem;
    background-color: green;
    display: inline-block;
}

.leavePending {
    background-color: yellow;
    height: 1rem;
    width: 1.5rem;
    display: inline-block;
}

.leaveCancle {
    height: 1rem;
    width: 1.5rem;
    display: inline-block;
    background-color: orange;
}

.leaveRejected {
    height: 1rem;
    width: 1.5rem;
    display: inline-block;
    background-color: red;
}

@media (max-width: 1560px) {
    .VehicleHeight {
        height: 56% !important;
    }
}

@media (max-width: 1210px) {
    .VehicleHeight {
        height: 55% !important;
    }
}

/* The Modal (background) */

.modalSwitch {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 5rem;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: black;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */

.modal-contentSwitch {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Add Animation */

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

/* The Close Button */

.closeSwitch {
    color: black;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.switchHeader > p {
    color: #81bbde;
    font-size: 2.4rem;
    font-weight: 700;
}

.SwitchVehicleInputs {
    display: flex;
    justify-content: space-between;
}

.SwitchVehicleInputs__drivers {
    flex: 1 1 40%;
}

.SwitchVehicleInputs__drivers > label {
    color: #0277bd;
}

.SwitchVehicleInputs__pic {
    margin: 0 3rem;
    flex: 1 1 10%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.SwitchVehicleInputs__vehicles {
    flex: 1 1 40%;
}

.SwitchVehicleInputs__vehicles > label {
    color: #0277bd;
}

.SwitchVehiclePicture {
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}

.SwitchVehicleCards {
    /* margin: 3rem; */
    display: flex;
    justify-content: space-between;
}

.SwitchVehicleCards__1 {
    flex: 1 1 26%;
    border-radius: 1rem;
    border: 2px solid #bfe7ff;
}

.SwitchVehicleCards__1__driverPic {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
}

.SwitchVehicleCards__1__driverPic__container {
    height: 7rem;
    width: 7rem;
}

.SwitchVehicleCards__1__name {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #023350;
    font-size: 2.4rem;
    font-weight: 600;
    text-transform: capitalize;
}

.SwitchVehicleCards__1__details {
    background-color: #94d2f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 3rem;
}

.SwitchVehicleCards__1__details__name {
    color: #282f39;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    text-transform: capitalize;
}

.SwitchVehicleCards__1__details__name > span {
    color: #a2a2a2;
    text-transform: uppercase;
}

.SwitchVehicleCards__1__details__car {
    height: 6rem;
    width: 6rem;
}

.SwitchVehicleCards__1__additional {
    padding: 1rem 3rem;
    margin: 2rem 0;
    line-height: 0.8rem;
}

.SwitchVehicleCards__1__additional > p {
    color: #0277bd;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1.4rem;
}

.SwitchVehicleCards__1__additional > span {
    color: #0000007c;
}

.SwitchVehicleCards__2 {
    flex: 1;
}

.SwitchVehicleBtns {
    display: flex;
    justify-content: flex-end;
    padding: 2rem 1rem;
}
/*
.btn:hover, */
.btn__cancle:hover,
.btn__next:hover {
    background-color: none;
}

.switchContainer {
    height: 80vh;
    width: 100%;
    background-size: contain;
    margin-left: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/vechicleWLIcons/bgImage.png");
    padding-top: 15rem;
}

.cars {
    height: 15rem;
    width: 30rem;
}

.carsContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
    margin-right: 3rem;
}

@media (max-width: 1560px) {
    .carsContainer {
        margin: 0 9rem;
    }
}

@media (max-width: 1440px) {
    .carsContainer {
        margin-top: 0;
        margin: 0;
    }
}

.GraphContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.GraphContainer__graph {
    margin-right: 2rem;
    height: 21vh;
    width: 12%;
    position: relative;
}

@media (max-width: 1560px) {
    .GraphContainer__graph {
        height: 21vh;
        width: 10%;
        margin-top: -2.7rem;
    }
}

@media (max-width: 1380px) {
    .GraphContainer__graph {
        height: 21vh;
        width: 11%;
        margin-top: -2.7rem;
    }
}

@media (max-width: 1280px) {
    .GraphContainer__graph {
        height: 21vh;
        width: 11.5%;
        margin-top: -2.7rem;
    }
}

@media (max-width: 1180px) {
    .GraphContainer__graph {
        height: 19.5vh;
        width: 11.5%;
        margin-top: -2.1rem;
    }
}

@media (max-width: 1180px) {
    .GraphContainer__graph {
        height: 19vh;
        width: 11.5%;
        margin-top: -1.7rem;
    }
}

@media (max-width: 1080px) {
    .GraphContainer__graph {
        height: 18vh;
        width: 11.5%;
        margin-top: -1.3rem;
    }
}

@media (max-width: 1030px) {
    .GraphContainer__graph {
        height: 17vh;
        width: 11.5%;
        margin-top: -0.7rem;
    }
}

@media (max-width: 991px) {
    .GraphContainer__graph {
        height: 16vh;
        width: 11.5%;
        margin-top: -0.3rem;
    }
}

.GraphContainer__graph__graphs {
    position: absolute;
}

.graph1 {
    border: 1px solid green;
    margin-left: 1rem;
}

@media (max-width: 1560px) {
    .graph1 {
        margin-left: 0.8rem;
    }
}

.graph2 {
    border: 1px solid green;
}

@media (max-width: 1560px) {
    .mapouter {
        height: 250% !important;
        width: 390% !important;
    }
}

.weather {
    margin: 0 1.5rem;
    height: 77.6vh;
    overflow-y: auto;
}

.weather__top {
    margin-top: 3rem;
    height: 40%;
    background-image: url("../images/weather/backgroundCloud.png");
}

@media (max-width: 1560px) {
    .weather__top {
        height: 45%;
    }
}

.weather__top__uper {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 2rem;
}

.weather__top__uper__middle__navImg {
    display: flex;
    justify-content: center;
}

.weather__top__uper__middle__navImg > img {
    margin-bottom: 1rem;
    margin-left: 3rem;
}

.weather__top__uper__middle > span {
    margin-top: 1rem;
    padding-left: 3.5rem;
    color: white;
    font-weight: 500;
}

.weather__top__uper__right {
    display: flex;
}

.weather__top__uper__right > label {
    margin: 0 1.5rem;
}

.weather__top__uper__right > p {
    color: white;
    font-weight: 600;
    font-size: 2rem;
}

.weather__top__lower {
    display: flex;
    justify-content: center;
    align-items: center;
}

.weather__top__lower__temp {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: normal;
    margin-right: 4rem;
}

.weather__top__lower__temp > p {
    color: white;
    font-weight: 700;
    font-size: 6rem;
}

@media (max-width: 1560px) {
    .weather__top__lower__temp > p {
        font-size: 5rem;
    }
}

.weather__top__lower__temp > span {
    color: white;
    font-size: 2rem;
}

.weather__nav {
    margin: 0 5rem;
    margin-top: -6rem;
    background-color: white;
    box-shadow: rgba(39, 45, 59, 0.2) 0px 3px 6px;
    border-radius: 0.5rem;
    display: flex;
    width: 92%;
    overflow-x: scroll;
}

.weather__nav::-webkit-scrollbar {
    height: 0.3rem;
}

@media (max-width: 1560px) {
    .weather__nav {
        margin-top: -5rem;
    }
}

.weather__nav__1 {
    margin: 0 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
}

.weather__nav__1__pic {
    height: 6rem;
    width: 6rem;
}

.weather__nav__1__pic > img {
    width: 100%;
}

.weather__bottom {
    margin-top: -8rem;
    background-color: #eff2f3;
}

.weather__bottom__1 {
    padding-top: 10rem;
    display: flex;
    justify-content: space-between;
    margin: 0 4rem;
}

.weather__bottom__1__box,
.weather__bottom__1__box2,
.weather__bottom__1__box3 {
    flex: 0 0 30%;
    padding: 2rem 2.5rem;
    border-radius: 3rem;
    background-color: #fff;
}

.weather__bottom__1__box__head,
.weather__bottom__1__box2__head,
.weather__bottom__1__box3__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.weather__bottom__1__box__head > p,
.weather__bottom__1__box2__head > p,
.weather__bottom__1__box3__head > p {
    font-size: 2.5rem;
}

.weather__bottom__1__box__center,
.weather__bottom__1__box2__center,
.weather__bottom__1__box3__center {
    display: flex;
    padding: 2rem 0;
    justify-content: center;
}

.weather__bottom__1__box__center > p,
.weather__bottom__1__box2__center > p,
.weather__bottom__1__box3__center > p {
    font-weight: 700;
    font-size: 2.2rem;
}

.weather__bottom__1__box__center > p > span,
.weather__bottom__1__box2__center > p > span,
.weather__bottom__1__box3__center > p > span {
    font-size: 1.6rem;
}

.weather__bottom__1__box__bottom,
.weather__bottom__1__box2__bottom,
.weather__bottom__1__box3__bottom {
    display: flex;
    justify-content: space-between;
}

.border {
    border: 1px dashed #8f8f8f;
    margin: 2.5rem 0;
}

.marTop {
    margin-top: -5rem;
    padding-bottom: 4rem;
}

.gauge-wrapper {
    display: inline-block;
    width: auto;
    margin: 0 auto;
    padding: 20px 15px 15px;
}

.gauge {
    background: #e7e7e7;
    box-shadow: 0 -3px 6px 2px rgba(0, 0, 0, 0.5);
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0 !important;
    position: relative;
    overflow: hidden;
}

.gauge.min-scaled {
    transform: scale(0.5);
}

.gauge-center {
    content: "";
    color: #fff;
    width: 60%;
    height: 60%;
    background: blue;
    border-radius: 100px 100px 0 0 !important;
    position: absolute;
    box-shadow: 0 -13px 15px -10px rgba(0, 0, 0, 0.28);
    right: 21%;
    bottom: 0;
    color: #fff;
    z-index: 10;
}

.gauge-center .label,
.gauge-center .number {
    display: block;
    width: 100%;
    text-align: center;
    border: 0 !important;
}

.gauge-center .label {
    font-size: 0.75em;
    opacity: 0.6;
    margin: 1.1em 0 0.3em 0;
}

.gauge-center .number {
    font-size: 1.2em;
}

.needle {
    width: 80px;
    height: 7px;
    background: green;
    border-bottom-left-radius: 100% !important;
    border-bottom-right-radius: 5px !important;
    border-top-left-radius: 100% !important;
    border-top-right-radius: 5px !important;
    position: absolute;
    bottom: -2px;
    left: 20px;
    transform-origin: 100% 4px;
    transform: rotate(0deg);
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.38);
    display: none;
    z-index: 9;
}

.four.rischio1 .needle {
    animation: fourspeed1 2s 1 both;
    animation-delay: 1s;
    display: block;
}

.four.rischio2 .needle {
    animation: fourspeed2 2s 1 both;
    animation-delay: 1s;
    display: block;
}

.four.rischio3 .needle {
    animation: fourspeed3 2s 1 both;
    animation-delay: 1s;
    display: block;
}

.four.rischio4 .needle {
    animation: fourspeed4 2s 1 both;
    animation-delay: 1s;
    display: block;
}

.slice-colors {
    height: 100%;
}

.slice-colors .st {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border: 50px solid transparent;
}

.four .slice-colors .st.slice-item:nth-child(2) {
    border-top: 50px #7cb1eb solid;
    border-right: 50px #7cb1eb solid;
    background-color: #007bff;
}

.four .slice-colors .st.slice-item:nth-child(4) {
    left: 50%;
    border-bottom: 50px #bedcfb solid;
    border-right: 50px #bedcfb solid;
    background-color: #a4ccf8;
}

@-webkit-keyframes fourspeed1 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(16deg);
    }
}

@-webkit-keyframes fourspeed2 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(65deg);
    }
}

@-webkit-keyframes fourspeed3 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(115deg);
    }
}

@-webkit-keyframes fourspeed4 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(164deg);
    }
}

.mainForAddPatient {
    left: 0;
    right: 0;
}

.ProviderDetails {
    width: 100%;
    height: 75%;
    margin-top: 20rem;
    overflow-y: scroll;
}

/* @media (max-width: 1555px) {
  .ProviderDetails {
    margin-top: 20rem;
  }
} */
@media (min-width: 1555px) {
    .ProviderDetails {
        margin-top: 25rem;
    }
}

.navigationBarProvider {
    background-color: aqua;
    padding: 1rem 2rem;
    text-align: center;
}

.ProviderGenralInfo {
    margin: 3rem 0;
    box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}

.marginTopProviderInfo {
    margin-top: 3rem;
}

.inputBoxContainer {
    margin-top: 0.7rem;
}

.boxShadowContainer {
    padding: 1rem 3rem;
}

.boxMargin {
    margin: 2rem 0 !important;
    text-align: center;
}

.genralInformationDetails {
    box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}

.horizontalRow {
    margin: 3rem 15rem;
    height: 3px;
    background: #94d2f8;
    background: linear-gradient(
        90deg,
        rgba(148, 210, 248, 0) 0%,
        #94d2f8 50%,
        rgba(148, 210, 248, 0) 100%
    );
}

.useflex {
    display: flex;
}

.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

h1 {
    font-family: inherit;
    margin: 0 0 0.75em 0;
    color: #728c8d;
    text-align: center;
}

.box {
    display: block;
    min-width: 300px;
    /* height: 300px; */
    margin: 10px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.upload-options {
    position: relative;
    height: 75px;
    background-color: cadetblue;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    transition: background-color ease-in-out 150ms;
}

.upload-options:hover {
    background-color: #7fb1b3;
}

.upload-options input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.upload-options label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
}

.upload-options label::after {
    content: "add";
    font-family: "Material Icons";
    position: absolute;
    font-size: 2.5rem;
    color: #e6e6e6;
    top: calc(50% - 2.5rem);
    left: calc(50% - 1.25rem);
    z-index: 0;
}

.upload-options label span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
}

.upload-options label span:hover i.material-icons {
    color: lightgray;
}

.js--image-preview {
    height: 225px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-image: url("");
    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.js--image-preview::after {
    content: "photo_size_select_actual";
    font-family: "Material Icons";
    position: relative;
    font-size: 4.5em;
    color: #e6e6e6;
    top: calc(50% - 3rem);
    left: calc(50% - 2.25rem);
    z-index: 0;
}

.js--image-preview.js--no-default::after {
    display: none;
}

.js--image-preview:nth-child(2) {
    background-image: url("http://bastianandre.at/giphy.gif");
}

i.material-icons {
    transition: color 100ms ease-in-out;
    font-size: 2.25em;
    line-height: 55px;
    color: white;
    display: block;
}

.drop {
    display: block;
    position: absolute;
    background: rgba(95, 158, 160, 0.2);
    border-radius: 100%;
    transform: scale(0);
}

.animate {
    animation: ripple 0.4s linear;
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

.navigationBar {
    background-color: #0277bd;
    padding: 1rem 2rem;
    text-align: center;
    color: white;
}

.licenceInfoBox {
    margin: 1rem 2rem;
    border-radius: 1rem;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    padding: 2rem 3rem;
}

.Addbtn {
    background-color: #0277bd;
    color: white;
    padding: 0.2rem 1rem;
    font-size: 1.5em;
    border-radius: 0.4rem;
}

.Addbtn:hover {
    background-color: #0277bd;
    color: white;
}

.alignment-Div {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
}

.DataLIstClass {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1rem;
}

.DataLIstClass1 {
    display: flex;
    padding: 1rem 1rem;
    align-items: center;
}

.DataLIstClass1 > a {
    margin-right: 2rem;
}

.rowHorizontalMargin {
    margin: 0 4rem !important;
    margin-top: 2rem !important;
}

.rowHorizontalMarginBottom {
    margin: 0 4rem !important;
    margin-right: 7.5rem !important;
}

.dataListOfInputs > * {
    margin-left: 1rem;
}

.d-flex2 {
    display: flex;
    align-items: center;
}

.BtnCenterSec {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem auto;
}

.DarkBtn {
    background-color: #0277bd;
    color: #fff;
}

.paddingX {
    padding: 1rem 4rem !important;
    font-weight: 700;
    font-size: 2rem !important;
}

html {
    font-size: 62.5%;
    font-family: "roboto", "Lato", sans-serif;
    box-sizing: border-box;
    top: 0;
    left: 0;
    right: 0;
}

@media (max-width: 75em) {
    html {
        font-size: 56.25%;
    }
}

@media (max-width: 56.25em) {
    html {
        font-size: 50%;
    }
}

@media (max-width: 112.5em) {
    html {
        font-size: 75%;
    }
}

.licenceButtonstye {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.buttonAddvechile {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* border: 1px solid red; */
}

/* ======================= Rate List Styles ================ */

.rateList {
    height: 77vh;
    overflow-y: auto;
    padding: 3.5rem 0;
}
.rateList__nav {
    display: flex;
    justify-content: space-between;
    padding: 1rem 3.5rem;
}
.rateList__nav__left {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rateList__nav__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.RegularHoursBtn {
    color: #fff;
    background-color: #0277bd;
    border: 1px solid #0277bd;
    font-weight: 500;
    padding: 1rem 2rem;
    border-radius: 1rem 0 0 1rem;
    font-size: 1.6rem;
    cursor: pointer;
    text-align: center;
}
.RegularHoursBtn:hover {
    text-decoration: none;
    color: #fff;
}

.NonRegularRate {
    text-align: center;
    padding: 1rem 2rem;
    border-radius: 0 1rem 1rem 0;
    font-size: 1.6rem;
    cursor: pointer;
    background-color: #fff;
    color: #0277bd;
    border: 1px solid #0277bd;
}
.NonRegularRate:hover {
    text-decoration: none;
    color: #0277bd;
}

.AddrateList {
    background-color: #0277bd;
    color: #fff;
    font-weight: 500;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-size: 1.6rem;
    cursor: pointer;
    border: 1px solid #0277bd;
    text-align: center;
}
.AddrateList:hover,
.AddrateList:focus {
    text-decoration: none;
    color: #fff;
}

.rateList__normal {
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem 2rem;
    background-color: #fcfcfc;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.664);
}
.rateList__normal__inner {
    border: 1px solid #0277bd;
    border-radius: 1rem;
    margin: 1rem;
    padding: 1rem 2rem;
}
.rateList__normal__inner__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}
.rateList__normal__inner__top__middle {
    color: #0277bd;
    font-weight: 600;
    font-size: 1.8rem;
}
.rateList__normal__inner__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #0187d6b7;
}
.rateList__normal__inner__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #505050;
}

.horizontalLine {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0 !important;
    border-top: 2px solid #0187d6b7;
}

.labelClass > div > label {
    color: #0277bd;
    font-weight: 600;
}

.ModalRates {
    color: #0277bd;
    font-weight: 600;
    font-size: larger;
}

@media (max-width: 1400px) {
    .container {
        width: 1090px;
        /* margin-left: 5rem; */
    }
}

/* =================== Add Vehicle New ================= */
.Photo-sec {
    height: 50%;
    border: 1px solid #94d2f8;
    border-radius: 1rem;
}
.uploadImgNewVehicle {
    text-align: center;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: #0277bd;
}
.AddVehicleUploadBtn {
    text-align: center;
    margin-top: 2rem;
}
.BtnUpladImg {
    padding: 0.4rem 1rem;
    border: 1px solid #0277bd;
    border-radius: 1rem;
    color: #0277bd;
    background-color: #fff;
}

.labelClassVehicles {
    color: #0277bd;
    font-weight: 500;
}

.inputBorderBlue {
    border: 1px solid #94d2f8 !important;
    padding: 3px !important;
    /* color: #94d2f8 !important; */
}
.UploadForms {
    border-radius: 1rem !important;
    border: 1px solid #94d2f8 !important;
    padding: 3rem 2rem;
}

/* ================================= Forms ====================== */
.borderedLIne {
    background-color: #fff;
    border: 2px solid #0277bd;
    border-radius: 1rem 1rem 0 0;
}

.borderedLIne {
    display: flex;
    justify-content: space-between;
}
.Tl {
    color: #023350;
    font-weight: 600;
    font-size: 1.7rem;
    margin-left: 1.5rem;
}

/* ================ cards =============== */
.card-forms {
    border: 1px solid #94d2f8;
    border-radius: 0.5rem;
}
.card-forms-top {
    padding: 1.5rem;
    color: #0277bd;
}
.card-forms-top > span {
    font-weight: 600;
    font-size: 1.5rem;
}

.card-forms-center {
    background-color: #dcf1fe;
    margin: 0 1.5rem;
    border-radius: 0.3rem;
    min-height: 23rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../images/icons48by48/Fi1.png");
    background-repeat: no-repeat;
    background-position: center;
}

.card-forms-bottom {
    margin: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.marginXformsCards {
    margin: 3rem 1.2rem !important;
    /* background-color: red; */
    overflow-y: auto;
    height: 63vh;
}

.formBox {
    margin-bottom: 2rem;
}

.boxFormEdit {
    height: 3rem;
    width: 3rem;
}
.flexssss {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.marginRight2 {
    margin-right: 2rem;
}

/* ===========================================  Preview PDF ================== */

/* ================================= Buttons =============================== */
.button-outline-warning {
    outline: 1px solid #ffc107 !important;
}
.button-outline-warning:hover {
    background-color: #ffc107 !important;
    cursor: pointer !important;
    color: #fff;
}
.button-outline-danger {
    outline: 1px solid #dc3545 !important;
}
.button-outline-danger:hover {
    background-color: #dc3545 !important;
    cursor: pointer !important;
    color: #fff;
}
input[type="file"]:focus {
    outline: none !important;
}

.bg-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.bg-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.bg-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
}
.bg-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.bg-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}
.bg-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.bg-warning:hover {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.bg-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.bg-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.bg-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.bg-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}
.bg-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.bg-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

/* ====================================================== View Driver design ================================================================= */

.line-verticle {
    background: rgb(2, 119, 189);
    background: linear-gradient(
        180deg,
        rgba(2, 119, 189, 0) 0%,
        rgba(2, 119, 189, 1) 50%,
        rgba(2, 119, 189, 0) 100%
    );
    /* background: rgb(2,119,189);
    background: linear-gradient(90deg, rgba(2,119,189,0) 0%, rgba(2,119,189,1) 50%, rgba(2,119,189,0) 100%); */
    width: 2px;
    display: flex;
    justify-content: center;
    margin-left: 3rem;
}
.line-horizontal-shasow {
    background: rgb(2, 119, 189);
    background: linear-gradient(
        90deg,
        rgba(2, 119, 189, 0) 0%,
        rgba(2, 119, 189, 1) 50%,
        rgba(2, 119, 189, 0) 100%
    );
    height: 2px;
    margin: 1rem 0;
}

/* ============================================= rate list new design =========================================*/
.rate-list-container {
    display: flex;
    justify-content: center;
    width: 100%;
    background-image: url("");
}

.rate-list {
    /* background-color: red; */
    height: 70vh;
    overflow-y: auto;
}
#myDIV {
    padding: 1rem;
    margin-top: 20px;
    margin-bottom: 2rem;
    width: 60%;
    background-color: #ccc;
    padding-bottom: 2rem;
    /* text-align: center; */
}
#myDIV2 {
    display: none;
    padding: 1rem;
    margin-top: 20px;
    margin-bottom: 2rem;
    width: 60%;
    background-color: #94d2f8;
    padding-bottom: 2rem;
}
/* table */
/* table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
} */

td,
th {
    /* border: 1px solid #DDDDDD; */
    text-align: left;
    padding: 8px !important;
}

.table-ratelist {
    background-color: #fff;
    border-radius: 1rem;
    width: 100%;
}

.text-rate-list {
    color: #94d2f8;
    font-weight: 600;
    text-transform: capitalize;
}

.rate-list-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2rem;
}

.vehicle-details {
    display: flex;
}

.vehicle-details > div {
    width: 50%;
}

.vehicle-detail-redocrd {
    display: flex;
    margin: 1.4rem 0;
}

.vehicle-detail-redocrd-trip {
    display: flex;
    margin: 1.4rem 0;
}

.vehicle-detail-redocrd > div {
    width: 25%;
}

.vehicle-detail-redocrd-trip > div {
    width: 16.6%;
}

.vehicle-detail-redocrd > div:nth-child(odd) {
    font-weight: 700;
}

.vehicle-detail-redocrd-trip > div:nth-child(odd) {
    font-weight: 700;
}

.driver-picture {
    height: 6rem !important;
    width: 6rem !important;
}

.driver-picture > img {
    width: 100%;
}

.heading-padding-center {
    /* text-align: center; */
    padding: 2rem 0;
}

.shadow-and-padding {
    margin: 0 1rem;
    padding: 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.vehicle-detail-redocrd1 {
    display: flex;
    padding-top: 1.4rem;
    padding-right: 1rem;
    justify-content: space-between;
    align-items: flex-start;
    background: #94d2f8;
    padding: 1rem;
}

.vehicle-details1 {
    margin: 2rem 0;
}

/*================================ Reminders======================== */

.reminder-calander {
    display: flex;
    padding: 1rem 2rem;
}
.full-calander-custom {
    width: 75%;
}

.up-comming-reminders {
    width: 23%;
    padding-top: 10rem;
}

.montly-reminder {
    background-color: #0277bd;
    margin: 1rem 0;
    border-radius: 1rem;
    color: white;
    text-align: center;
    padding: 3rem 0;
}

.reminder-text {
    font-size: 1.4rem;
    color: white;
    font-weight: 400;
}

.reminder-text-bold {
    font-size: 5rem;
    font-weight: 700;
}

.add-calander {
    display: flex;
    justify-content: flex-end;
    margin: 1rem 3rem;
}

.reminder-btn {
    background-color: #0277bd;
    color: white;
    padding: 0.3rem 2rem;
    border-radius: 1rem;
}
.reminder-btn:hover {
    text-decoration: none;
    color: white;
}

.new-modal-reminder {
    width: 70% !important;
    height: 90% !important;
    height: auto;
    margin-top: 0 !important;
    overflow-y: auto !important;
}

.reminder-buttons-end {
    text-align: end !important;
}

.color-blue {
    color: #0277bd;
}

.full-space {
    width: 100%;
    display: flex;
    margin-bottom: 1.2rem;
}

.half-space {
    width: 50%;
}

.input-reminder {
    padding: 0.9rem 1rem;
    border-radius: 0.2rem;
    width: 100%;
    border: 1px solid #94d2f8;
}

.mright {
    margin-right: 1rem !important;
    background-color: green;
}

.input-full-sapace {
    width: 100%;
}

/* Pre-Trip and Post-Trip Inspections */

.text-blue-label {
    color: #007bff !important;
}
.inspection-buttons {
    width: 100%;
    background-color: red;
    text-align: end;
}
.inspection-container-section {
    padding: 1rem 2rem !important;
}
.inspection-container-section {
    margin: 1rem 3rem;
    border: 2px solid #94d2f8 !important;
    border-radius: 5px;
}
.rounded-inspection-img {
    border-radius: 50%;
}
.user-name-inspection {
    color: #007bff;
    font-size: 1.4rem;
    font-weight: 600;
    margin-left: 4px;
}
.inspection-info {
    display: flex;
}
.inspection-info > p {
    width: 50%;
    color: #94d2f8;
}
.inspection-top-div {
    display: flex;
    flex-direction: row;
    width: 77%;
}
.inspection-top-div > div {
    width: 48%;
}
.inspection-line-container {
    height: auto;
    width: 4%;
    display: flex;
    justify-content: center;
}
.inspection-line {
    height: 100%;
    width: 2px;
    background-color: #94d2f8;
}
.inspection-buttons-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blue-color-inspetion {
    color: #007bff;
    font-weight: 600;
}
.input-container-inspection {
    width: 50%;
}
.input-field-inspection {
    width: 100%;
}
/*==================================== Accounts  new invoices =================*/

.border-bottom {
    margin: 0 3rem;
    border-bottom: 1px solid gray;
    padding: 0.5rem 3rem;
}

.border-bottom > a {
    color: gray;
    margin: 0 2rem;
}

.flexAll {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    display: flex;
    margin-left: 3rem;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.date-input {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border: 1px solid gray;
    border: 1px solid #007bff;
    color: #007bff;
    background-color: #dcf1fe;
}

.label-input {
    color: #0277bd;
}

.marginl-1 {
    margin-left: 3rem;
}

/* =================== Account Deatails Edit Page ====================== */

.padding2by3 {
    padding: 0.5rem 1rem;
}
.padding2by3 > svg {
    margin-right: 1rem;
}

.payment-status {
    color: #8bb3cb;
    font-weight: 700;
}

.inprogress {
    background-color: #ffaa2a;
    border: 1px solid #ffaa2a;
    color: white;
    border-radius: 0.5rem;
}

.upper-box-account {
    border: 1px solid #0277bd;
    margin: 1.5rem 2.5rem;
    padding: 1.5rem;
    border-radius: 1rem;
}

.img-user {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid gainsboro;
}

.bold-name {
    color: #0277bd;
    font-size: 1.8rem;
    font-weight: 700;
    margin-left: 1rem;
}
.flexLeft {
    display: flex;
    align-items: center;
}

.colorblue {
    color: #8bb3cb;
}

.marginleft-2 {
    margin-left: 3rem;
}

.padding-y-1 {
    padding: 1rem 0;
}

.margin-x-2 {
    margin: 0 2rem;
}

.verticle-line {
    height: 100px;
    width: 2px;
    background-color: #0277bd;
    background: rgb(2, 119, 176);
    background: linear-gradient(
        180deg,
        rgba(2, 119, 176, 0) 0%,
        rgba(2, 119, 176, 1) 50%,
        rgba(2, 119, 176, 0.05646008403361347) 100%
    );
}

.two-boxes {
    margin: 1.5rem 2.5rem;
    display: flex;
}

.left-box {
    margin-right: 1rem;
}

.header-left-box {
    background-color: #0277bd;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.4rem 1rem;
    color: white;
}

.box-body {
    background-color: #fcfcfc;
}

.centerFlex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flexcolcenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}

.padding-xy-1 {
    padding: 1rem 1.2rem;
}

.bg-white-rounded {
    box-shadow: 1px 2px 3px gainsboro;
    background-color: white;
    border-radius: 1rem;
    margin: 1.5rem 2.5rem;
    padding: 1rem;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1rem;
}

.lineheight-padding {
    line-height: 1.4rem;
    padding: 1.5rem 2.5rem;
}
.lineheight-paddingnew {
    line-height: 1.4rem;
    padding: 1rem 2.5rem;
}

.left-box {
    width: 100%;
    box-shadow: 1px 2px 3px gainsboro;
    border-radius: 0.4rem;
}
.right-box {
    width: 100%;
}

.shadowb0x-right {
    border-radius: 0.4rem;
    box-shadow: 1px 2px 3px gainsboro;
}

.colorbluebold {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0277bd;
}

.border-top2 {
    border-top: 1px solid gray;
    margin: 1rem 2.5rem;
    padding: 1rem 0 !important;
}

.padding-bottom {
    padding-bottom: 3rem;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 1rem 0.8rem;
}

.blue-btn {
    padding: 1rem 3rem;
    background-color: #0277bd;
    color: white;
    border-radius: 0.3rem;
}
.blue-btn:hover {
    color: white;
    text-decoration: none;
}

.mrgin-b-3 {
    margin-bottom: 2rem;
}

.inspection-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.input-field-inspection {
    width: 100%;
    border-radius: 0.3rem;
    border: 1px solid #0277bd;
    padding: 1rem 1.2rem;
    margin: 0.2rem 0 1rem 0;
    color: #0277bd;
}
.input-container-inspection {
    width: 100%;
}

.btn-group-sm > .btn,
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.trips-nav {
    margin-right: 1rem;
    border-top: 1px solid #0277bd;
    padding: 1.1rem;
    border-radius: 10px 10px 0px 0px;
    color: #0277bd !important;
    font-size: 16px !important;
}
.trips-nav:focus {
    color: white !important;
    font-size: 16px !important;
    padding: 14px !important;
    font-weight: 600 !important;
}
.active-link-blue {
    color: white !important;
    font-size: 16px !important;
    padding: 12px !important;
    font-weight: 600 !important;
}

/* Datatable CSS */

.dataTables_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dataTables_filter,
.dt-buttons {
    margin-bottom: 1rem !important;
}
.dataTables_paginate {
    position: absolute;
    bottom: 0;
    margin-top: 15rem !important;
    right: 0;
}
.dataTables_paginate > ul {
    position: absolute !important;
    /* top: 44px !important; */
    right: 0 !important;
    display: flex !important;
    align-items: cenetr !important;
    justify-content: center !important;
}
/* .dt-buttons{
    color: white;
    background: #0cc1bc;
    padding: 2px;
} */
.dt-buttons > .btn {
    color: white !important;
    position: relative !important;
    background-color: #0cc1bc !important;
    border: none !important;
    padding: 5px !important;
    width: 50px !important;
    text-align: center !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
    text-decoration: none !important;
    overflow: hidden !important;
}
.dt-buttons > .btn:hover {
    background: #fff !important;
    box-shadow: 0px 2px 6px 1px #0cc1bc59 !important;
    color: #000 !important;
}
.dataTables_filter input {
    border: 1px solid #0cc1bc !important;
    padding: 2px !important;
}
.dataTables_filter input:focus {
    background: #fff !important;
    box-shadow: 0px 2px 6px 1px #0cc1bc59 !important;
    color: #000 !important;
}
.buttons-html5,
.buttons-print {
    color: white;
}
.btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    cursor: pointer;
}

.select2-selection--single {
    height: 40px !important;
}

.custom-radius {
    border-radius: 10px 10px 0 0;
}

.custom-file-input {
    padding: 3px;
}

.pip {
    display: inline-block;
    margin: 10px 10px 0 0;
    text-align: center;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block !important;
    padding: 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-top: -6px;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    top: 6px !important;
}

/* Data Tables Style */
.dataTables_wrapper {
    display: block;
}
.dataTables_wrapper .dataTables_length select {
    margin-left: 8px !important;
}
.dataTables_filter,
.dt-buttons {
    margin-bottom: 1rem !important;
}
.dataTables_paginate {
    position: absolute;
    bottom: 0;
    margin-top: 15rem !important;
    right: 0;
}
.dataTables_paginate > ul {
    position: absolute !important;
    /* top: 44px !important; */
    right: 0 !important;
    display: flex !important;
    align-items: cenetr !important;
    justify-content: center !important;
}
/* .dt-buttons{
        color: white;
        background: #0cc1bc;
        padding: 2px;
    } */
.dt-buttons > .btn {
    position: relative !important;
    background-color: #0cc1bc !important;
    border: none !important;
    padding: 5px !important;
    width: 50px !important;
    text-align: center !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
    text-decoration: none !important;
    overflow: hidden !important;
}
.dt-buttons > .btn:hover {
    background: #fff !important;
    box-shadow: 0px 2px 6px 1px #0cc1bc59 !important;
    color: #000 !important;
}
.dataTables_filter input {
    border: 1px solid #0cc1bc !important;
    padding: 2px !important;
}
.dataTables_filter input:focus {
    background: #fff !important;
    box-shadow: 0px 2px 6px 1px #0cc1bc59 !important;
    color: #000 !important;
}
.buttons-html5,
.buttons-print {
    color: white;
}
.btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    cursor: pointer;
}
.dataTables_wrapper .dataTables_length select {
    margin-left: 8px !important;
    width: 55px;
    height: 30px;
}
.dataTables_wrapper .dataTables_paginate {
    margin: -24px 0px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border: 1px solid #0f77bd !important;
    background-color: #0f77bd !important;
    border-radius: 10% !important;
    background: linear-gradient(to bottom, #0f77bd 0%, #0f77bd 100%) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #0f77bd !important;
    border-radius: 10% !important;
    background: linear-gradient(to bottom, #0f77bd 0%, #0f77bd 100%) !important;
    border: 1px solid #0f77bd !important;
}
.dataTables_filter input:focus {
    outline-color: #0f77bd !important;
}
.dataTables_wrapper .dataTables_filter input {
    height: 30px !important;
    font: 17px Arial, sans-serif !important;
}
/* End Data Tables Style */
/* select 2 Design */
.select2-container--default
    .select2-selection--single
    .select2-selection__clear {
    padding: 9px !important;
    color: #0f77bd !important;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #94d2f8 !important;
    height: 38px !important;
}
.select2-search--dropdown .select2-search__field {
    outline-color: #0f77bd;
}
/* End select 2 Design */

/* Bell Notification */
#badge_icon_this_bell {
    width: 100px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    color: #94d2f8;
}
.badge_icon_bell:after {
    content: attr(data-content);
    position: absolute;
    background: #0f77bd;
    height: 2.5rem;
    top: 0rem;
    right: 2rem;
    width: 2.5rem;
    text-align: center;
    line-height: 2rem;
    font-weight: bold;
    font-size: 15px;
    border-radius: 50%;
    color: white;
    border: 1px solid #0f77bd;
    padding: 1px;
}
.body_notification {
    width: 100%;
    display: block !important;
}
.single_notification {
    border: 1px solid #94d2f8;
    border-radius: 5px;
    height: 40px;
    margin: 5px;
    background-color: #d6cfcf;
}

/* notifications */

.dd {
    z-index: 1;
    position: relative;
    display: inline-block;
}
.dd-a {
    position: relative;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
}
.dd input:after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    display: block;
    background: #c63d0f;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition-duration: 0.2s;
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: bottom left;
    -webkit-transition-duration: 0.2s;
}
.dd input {
    top: 0;
    opacity: 0;
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}
.dd input:hover {
    cursor: pointer;
}
.dd input:hover ~ .dd-a {
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
}
.dd input:checked:after {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
}
.dd input:checked ~ .dd-c {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
}
.dd-a span {
    color: #c63d0f;
}
.dd-c {
    display: block;
    position: absolute;
    background: white;
    height: auto;
    transform: scaleY(0);
    transform-origin: top left;
    transition-duration: 0.2s;
    -webkit-transform: scaleY(0);
    -webkit-transform-origin: top left;
    -webkit-transition-duration: 0.2s;
}
.dd-c ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    min-width: 450px;
    max-width: 500px;
    box-shadow: 0px 1px 2px gray;
    color: black;
    max-height: 500px;
    overflow-y: auto;
}
.dd-c li {
    margin-botom: 5px;
    word-break: keep-all;
    white-space: nowrap;
    display: block;
    position: relative;
    cursor: pointer;
}

.notification-list-item {
    font-size: 16px;
    padding: 1rem;
}
.notification-list-item:hover {
    background-color: #e2e2e2;
    padding: 1rem;
}

.notification-name {
    font-weight: 700;
}
.notification-desc {
    color: gray;
}
.time {
    font-size: 14px;
}

.all-noti {
    font-size: 20px;
    font-weight: 900;
    padding: 2rem;
}
/* =============================chats ======================= */

.chat-container-provider {
    border: 1px solid #e6e6e6;
    border-radius: 1rem;
    background-color: #deeff8;
}

.messages-container {
    min-height: 220px;
    height: 430px;
    overflow-y: auto;
}

/* width */
.messages-container::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.messages-container::-webkit-scrollbar-track {
    background: #e6e6e6;
}

/* Handle */
.messages-container::-webkit-scrollbar-thumb {
    background: #94d2f8;
}

/* Handle on hover */
.messages-container::-webkit-scrollbar-thumb:hover {
    background: #0277bd;
}

/* ================ Add card  start here >>>> > =============== */
.NVGTR-add-cardWrp {
    width: 100%;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(220, 220, 221);
    box-sizing: border-box;
    margin: 20px 0;
    position: relative;
}

.NVGTR-add-cardWrpTitle {
    height: 60px;
    padding: 0px 30px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.01em;
    color: rgb(71, 82, 93);
    max-width: 100%;
    width: 100%;
    border-bottom: 1px solid rgb(220, 220, 221);
}

.NVGTR-add-cardWrpCnt {
    width: 100%;
    cursor: default;
    pointer-events: all;
}
.NVGTR-add-cardWrpCnt .NVGTR-add-cardFormWrp {
    padding: 24px 24px 30px;
}
.NVGTR-btm {
    padding: 10px 30px;
}
.NVGTR-add-cardFormWrp .vodiapicker {
    display: none;
}
.cmbIdiomaWrp {
}
.cmbIdiomaWrp .cmbIdioma {
}
.cmbIdiomaWrp .select2-container .select2-selection--single {
    height: 38px;
    padding: 4px 0;
}
.cmbIdiomaWrp
    .select2-container
    .select2-selection--single
    .select2-selection__arrow {
    top: 6px;
    right: 5px;
}
.cmbIdioma {
}
.NVGTR-add-cardFormWrp #a {
    padding-left: 0px;
}

.NVGTR-add-cardFormWrp #a img,
.NVGTR-add-cardFormWrp .btn-select img {
    width: 12px;
}

.NVGTR-add-cardFormWrp #a li {
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.NVGTR-add-cardFormWrp #a li:hover {
    background-color: #f4f3f3;
}

.NVGTR-add-cardFormWrp #a li img {
    margin: 5px;
}

.NVGTR-add-cardFormWrp #a li span,
.NVGTR-add-cardFormWrp .btn-select li span {
    margin-left: 5px;
}

/* item list */

.NVGTR-add-cardFormWrp .b {
    display: none;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}

.NVGTR-add-cardFormWrp .open {
    display: show !important;
}

.NVGTR-dropdown {
    width: 350px;
    height: 40px;
    position: relative;
}

.NVGTR-dropdown .NVGTR-title {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    background-image: url(../images/down-arrow.png);
    background-repeat: no-repeat;
    background-position: right 10px top 10px;
    background-size: 18px;
    display: inline-block;
    padding: 8px;
    color: #97979b;
}

.NVGTR-dropdown .NVGTR-title img {
}

.NVGTR-dropdown .NVGTR-dropdown-content {
    width: 100%;
}

.NVGTR-add-cardFormWrp .btn-select li {
    list-style: none;
    float: left;
    padding-bottom: 0px;
}

.NVGTR-add-cardFormWrp .btn-select:hover li {
    margin-left: 0px;
}

.NVGTR-add-cardFormWrp .btn-select:hover {
    background-color: #f4f3f3;
    border: 1px solid transparent;
    box-shadow: inset 0 0px 0px 1px #ccc;
}

.NVGTR-add-cardFormWrp .btn-select:focus {
    outline: none;
}

.NVGTR-add-cardWrpCnt.NVGTR-add-cardWrpCntRight.scroll {
    -webkit-box-shadow: inset -10px 3px 10px 0px rgb(102 101 101 / 45%);
    -moz-box-shadow: inset -10px 3px 10px 0px rgb(102 101 101 / 45%);
    box-shadow: inset -10px 3px 10px 0px rgb(102 101 101 / 45%);
}

.NVGTR-add-cardWrpCnt.NVGTR-add-cardWrpCntRight {
    max-height: calc((100vh - 80px) - 90px);
    overflow-y: auto;
    padding: 20px;
}

.NVGTR-add-cardsDisplay {
    border: 1px solid rgb(220, 220, 221);
    padding: 18px 25px;
    margin-bottom: 25px;
}

.cardsDisplaySelectWrp {
    /* width: 80px; */
    position: relative;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    overflow: hidden;
    height: 32px;
    padding: 0 5px;
}
.NVGTR-add-cardsDisplayCntTopCardId {
    float: right;
}

.cardsDisplaySelectWrp select {
    width: 100%;
    height: 100%;
    border: unset;
    appearance: none;
    background-image: url(../images/down-arrow.png);
    background-repeat: no-repeat;
    background-position: right 5px top 7px;
    background-size: 13px;
    padding: 0 5px;
}

.NVGTR-add-cardsDisplayCntBtm .cardActionWrp {
    width: 32px;
    height: 32px;
    border: 1px solid #dcdcdd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    border-radius: 3px;
}

.NVGTR-add-cardsDisplayCntBtm .cardActionWrp button {
    margin: 0 3px;
    background-color: transparent;
    outline: unset;
    box-shadow: unset;
}
.NVGTR-add-cardsDisplayCntBtm img {
    width: 18px;
}

.NVGTR-add-cardsDisplayCnt h2 {
    font-size: 24px;
    color: rgb(71, 82, 93);
    margin-bottom: 14px;
}

.NVGTR-add-cardsDisplayCnt p {
    color: rgb(136, 136, 136);
    font-size: 14px;
    margin-bottom: 12px;
}

.NVGTR-add-cardsDisplayCnt ul {
    padding-left: 18px;
    margin-top: 8px;
    color: rgb(71, 82, 93);
    font-size: 15px;
}

.NVGTR-add-cardsDisplayCnt .imgPreview {
    margin-bottom: 25px;
    display: inline-block;
    position: relative;
}
.NVGTR-add-cardsDisplayCnt .imgPreview .imgPreviewTitle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(71, 82, 93, 0.5);
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0;
}
.NVGTR-add-cardsDisplayCnt .imgPreview:hover .imgPreviewTitle {
    opacity: 1;
}

.NVGTR-add-cardsDisplayCntBtmBtn a {
    color: rgb(22, 187, 171);
    font-size: 16px;
}

.NVGTR-add-cardsDisplayCntBtmBtn a:hover {
    text-decoration: unset;
    color: #0277bd;
}

/* .fixed-height {
    height: 80px;
    overflow-y: auto;
  } */
.NVGTR-contentWrpTopImg {
    margin-top: -75px;
}

.NVGTR-contentWrpMdl {
}

.NVGTR-contentWrpMdl .dropdown {
}

.NVGTR-contentWrpMdl .dropdown .btn-secondary::after {
    position: absolute;
    right: 8px;
    top: 15px;
}

.NVGTR-contentWrpMdl {
    margin-bottom: 20px;
}

.NVGTR-contentWrpMdl .NVGTR-contentWrpMdlLeft {
    width: calc(100% - 80px);
}

.NVGTR-contentWrpMdl .NVGTR-contentWrpMdlLeft label {
}

.NVGTR-contentWrpMdl .NVGTR-contentWrpMdlLeft input,
.NVGTR-pointsWrp .NVGTR-contentWrpMdlLeft input {
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    padding: 5px;
    outline: unset;
    box-shadow: unset;
}

.NVGTR-contentWrpMdl .NVGTR-contentWrpMdlRight {
}

.NVGTR-contentWrpMdl .dropdown .btn-secondary {
    background-color: transparent;
    border: 1px solid #dcdcdd;
    padding: 5px;
    width: 70px;
    color: #9d9d9d;
    text-align: left;
    outline: unset;
    box-shadow: unset;
}
.NVGTR-contentWrpMdl .dropdown .btn-secondary img {
    margin-top: -3px;
}

.NVGTR-contentWrpMdl .dropdown .dropdown-menu {
    float: unset;
    width: 390px;
    transform: translate(-320px, 15px) !important;
    inset: unset !important;
    padding: 10px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
        0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #dadadb;
}

.NVGTR-contentWrpMdl .dropdown .dropdown-menu li {
    display: inline-flex;
}

.NVGTR-contentWrpMdl .dropdown .dropdown-menu li a {
    padding: 3px 0;
    border: 1px solid #dcdcdd;
    width: 33px;
    text-align: center;
    margin: 2px;
    border-radius: 5px;
}

.NVGTR-contentWrpMdl .dropdown .dropdown-menu li a:hover {
    background-color: transparent;
    border: 1px solid #dcdcdd;
}

/* image uploader */

.NVGTR-imageUploader .container1 {
    /* max-width: 960px; */
    margin: 30px auto;
    padding: 20px;
}

.NVGTR-imageUploader h5 {
    font-size: 20px;
    /* text-align: center; */
    margin: 20px 0 20px;
}

.NVGTR-imageUploader h5 span {
    display: block;
    font-size: 15px;
    padding-top: 8px;
    color: gray;
}

.NVGTR-imageUploader .avatar-upload {
    position: relative;
    max-width: 500px;
    margin: 50px 0;
}

.NVGTR-imageUploader .avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
}

.NVGTR-imageUploader .avatar-upload .avatar-edit input {
    display: none;
}

.NVGTR-imageUploader .avatar-upload .avatar-edit input + label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #0277bd;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgb(255 255 255);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
}

.NVGTR-imageUploader .avatar-upload .avatar-edit input + label:hover {
    background: #0277bd;
    border-color: #0277bd;
}

.NVGTR-imageUploader .avatar-upload .avatar-edit input + label:after {
    content: "\f040";
    font-family: "FontAwesome";
    color: #fff;
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

.NVGTR-imageUploader .avatar-upload .avatar-preview {
    width: 500px;
    height: 300px;
    position: relative;
    border: 1px solid #dcdcdd;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: unset;
}

.NVGTR-imageUploader .avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: unset;
    background-color: #dee1e6;
}
.NVGTR-imageUploader .avatar-upload .avatar-preview > div h6 {
    position: absolute;
    bottom: 25%;
    left: calc(50% - 40px);
    font-weight: 700;
    color: #7c7c7c;
    font-size: 12px;
}

.NVGTR-btm {
}

.NVGTR-btm button:hover {
    color: #fff;
}

.NVGTR-btm button {
    background: #0277bd;
    color: #fff;
    border: 1px solid #0277bd;
    outline: unset;
    box-shadow: unset;
}

.NVGTR-btm button:last-child {
    background: #47525d;
    border: 1px solid #47525d;
}

/* image uploader */
.NVGTR-modal {
}

.NVGTR-modal .modal-header {
    justify-content: end;
}

.NVGTR-modal .modal-header .btn-close {
    border: unset;
    background: transparent;
    outline: unset;
    box-shadow: unset;
}

.NVGTR-modal .modal-content {
    width: unset;
}

.NVGTR-modal .modal-body {
    text-align: center;
}

.NVGTR-modal .modal-footer {
    justify-content: center;
}

.NVGTR-pointsWrp {
}

.NVGTR-pointsWrpTop {
    position: relative;
    width: 100%;
    background-color: rgb(248, 248, 248);
    margin-bottom: 18px;
    padding: 10px 18px 10px 40px;
}

.NVGTR-pointsWrpTop .remove-btn {
    width: 11px;
    position: absolute;
    left: 8px;
    top: 5px;
    cursor: pointer;
    border: unset;
    background-color: transparent;
    color: #000;
}
.NVGTR-pointsWrpTop .remove-btn:disabled {
    color: grey;
}
.NVGTR-pointsWrpTop .input-field {
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    padding: 5px;
    outline: unset;
    box-shadow: unset;
    color: #000;
}

.NVGTR-pointsWrp .NVGTR-pointsWrpBtm {
    padding: 10px 0;
}

.NVGTR-pointsWrp .NVGTR-pointsWrpBtm img {
    width: 18px;
}

.NVGTR-pointsWrp .NVGTR-pointsWrpBtm span {
    color: #38b99e;
    margin-left: 5px;
    font-size: 16px;
}

.NVGTR-pointsWrp .NVGTR-pointsWrpNote {
    margin-top: 40px;
    max-width: 360px;
    background: rgb(248, 248, 248);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}

.NVGTR-pointsWrp .NVGTR-pointsWrpNote img {
}

.NVGTR-pointsWrp .NVGTR-pointsWrpNote span {
    display: inline-block;
    margin-left: 5px;
}

.imgPreview img {
    cursor: pointer;
    max-width: 100%;
    height: auto;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.popup-content {
    position: absolute;
    background-color: #a5a5a591;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.close-btn {
    font-size: 24px;
    cursor: pointer;
}
.popup-content .popup-contentBtn {
    position: absolute;
    right: 30px;
    top: 13px;
}
.popup-content .popup-contentBtn button,
.popup-content .popup-contentBtn span {
    background-color: #0277bd;
    border: 1px solid #ffffff;
    color: #fff;
    border-radius: 5px;
    margin: 4px;
    outline: unset;
    box-shadow: unset;
    display: inline-block;
    padding: 0px 12px;
}
.NVGTR-cardSearch {
}
.NVGTR-cardSearch input {
    border: 1px solid #dcdcdd;
    width: 100%;
    padding: 6px;
    outline: unset;
    box-shadow: unset;
}
.NVGTR-cardSearch input::placeholder {
    color: #afafaf;
}
.dashboard__sideBar__name .dropdown .btn-secondary.sidebar-text::after {
    position: absolute;
    right: 15px;
    font-size: 18px;
    transform: rotate(-90deg);
}
.dashboard__sideBar__name .dropdown .btn-secondary.active {
    background-color: #fff !important;
    padding: 10px 5px;
    color: #0277BD !important;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
}
.dashboard__sideBar__name .dropdown .btn-secondary.active.sidebar-text::after {
    color: #0277BD;
    transform: unset;
    transform: unset;
}
.dashboard__sideBarActive.active:hover {
    color: #0277BD;
}
.dashboard__sideBar__name .dropdown a:hover {
    background-color: transparent;
    border: unset;
    color: #D9EBF5;
}
.dashboard__sideBar__name .dropdown-menu li:hover {
    /* border-left: 1px solid #0277BD; */
    padding-left: 5px;
}
.sidebar-text:hover, .sidebar-text:active {
    color: white;
    text-decoration: none;
}
.btn-outline-success{
    border: 1px solid #28A745 !important;
}
.btn-outline-warning{
    border: 1px solid #FFCA07 !important;
}
.btn-outline-primary{
    border: 1px solid #007bff !important;
    outline: auto !important;
}
.btn-outline-info{
    border: 1px solid #17a2b8 !important;
    outline: auto !important;
}
/* ================ Add card end here >>>>>> =============== */