/* global css  */

body {
    font-family: Manrope;
    font-weight: 500;
}

.greybg {
    background: #f9f9f9 !important;
}

button:focus {
    outline: none;
}

.shadow {
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
}


.p-15 {
    padding: 15px;
}

.p-8 {
    padding: 16px 8px 8px;
}

.p-tb-15 {
    padding: 15px 0;
}

.m-t-15 {
    margin-top: 15px;
}

.m-t-24 {
    margin-top: 24px;
}

.half-opacity {
    opacity: 0.5;
}

.cursor-no-drop {
    cursor: no-drop !important;
}

.m-b-15 {
    margin-bottom: 15px;
}

.radius-8 {
    border-radius: 8px;
}

.white-bg {
    background: #fff;
}

.nopadding {
    padding: 0 !important;
}

.no-horizontal-p-m {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.overflow-x-auto {
    overflow-x: auto;
    display: flex;
}

a {
    text-decoration: none !important;
}

.nav-item a.active::after {
    content: " *";
    margin-left: 1em;
}

::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    border-radius: 8px;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background: none !important;
    border: none !important;
}





/* Top section start  */
.menu-icon {
    display: none;
}

.closetoggle {
    display: none;
}

.sectionwrap {
    padding: 10px;
    line-height: 1.5;
    border-radius: 16px;
}

.professional-lifetime-text {
    font-size: 12px;
}

.cstm-ul li a.active {
    color: #ff6000;
}

.cstm-ul-two a.active {
    color: #ff6000 !important;
}

.center-vertically {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.no-design-link, .no-design-link:hover {
    text-decoration: none;
    color: #111111;
}

#accordionExample .accordion-button:focus {
    box-shadow: none;
}

.accordion-button {
    padding: 0 0 10px;
    margin-left: 0;
    border: none;
}

    .accordion-button:focus {
        box-shadow: none;
    }

#setting-dropdown ul {
    padding: 10px;
    list-style: none;
    height: 100%;
    margin-top: 15px;
    min-height: 0;
}

#collapseTwo #setting-dropdown ul {
    margin-top: 0px;
}

#setting-dropdown ul li {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

    #setting-dropdown ul li ul {
        padding-left: 0;
    }

    #setting-dropdown ul li a {
        color: #828282;
        cursor: pointer;
    }

.sectionwrap a, .sectionwrap a:hover {
    color: black;
    font-size: 14px;
}

.sectionwrap > .active > a {
    color: #ff6000;
}

#setting-dropdown {
    padding-left: 0;
}

.setting-dropdown .text {
    padding: 10px;
}

.accordion-item .accordion-button {
    padding-left: 0;
}


h2#headingOne button {
    font-size: 14px;
    padding: 15px 10px;
    outline: none;
    border: none;
    font-weight: 500;
}

.accordion-collapse {
    border: 0 !important;
}

.adminbg {
    background: #ffffff !important;
}

button.accordion-button.adminbtn {
    font-size: 14px;
    font-weight: 500;
}

button .accordion-button {
    background: #ffffff;
}

.accordion-button:not(.collapsed) {
    color: #ff6000 !important;
    background-color: #fef1e6 !important;
    border: 0;
}

.accordion .adminwrapbtn button {
    background: none !important;
    border: 0;
}

#settingwrap .accordion-button:not(.collapsed)::after {
    border-top: 2px solid #ff6600;
    border-left: 2px solid #ff6000;
    transform: rotate(45deg);
    top: 28px;
    right: 25px;
}

#settingwrap .btn-margin-top:not(.collapsed)::after {
    margin-top: -16px;
}

#settingwrap .btn-margin-top::after {
    margin-top: -16px;
}


#settingwrap .accordion-button::after {
    background-image: none !important;
    transform: rotate(225deg);
    width: 10px;
    height: 10px;
    border-top: 2px solid #707070;
    border-left: 2px solid #707070;
    position: absolute;
    top: 20px;
    right: 25px;
}

h2 button img {
    padding-right: 10px;
}

#admin-dropdown {
    display: none;
}

.analytics {
    background: #fef1e6;
}

.table-analytics {
    max-height: 500px;
}

.drafter-analytics {
    word-break: break-all;
}

.position-center-analytics {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.vertical-scroll {
    overflow-y: auto;
}

@media only screen and (max-width:768px) {
    .position-center-analytics {
        position: initial;
        transform: translateY(-50%);
    }
}

.news-link, .news-link:hover {
    text-decoration: none;
    color: black;
}

.content-wrapper .left-nav .navigate ul li .analyticsheading {
    color: #ff6000;
}

.sectionwrap img {
    padding-right: 4px;
}

.features {
    background-color: #f9f9f9;
}

.top-section {
    display: flex;
    height: 72px;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 3;
}

#menuToggle {
    display: none;
}
/*.logo-container :hover {
    box-shadow: 0 0 11px rgba(33,33,33,.2);
}*/
/*a:hover {
    font-weight: bold;
}*/
.top-section .logo-container {
    width: 20%;
}

    .top-section .logo-container img {
        width: 190px;
    }

.top-section .user-controls {
    width: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.user-controls .assist span {
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    padding: 5px 6px;
    font-size: 15px;
    color: #707070;
    display: inline;
    align-items: center;
    justify-content: space-between;
    width: 110px;
}

.user-controls .assist img {
    margin-top: -3px;
}

.user-controls .assist .assisthead {
    border: none;
}

.notification, .assist, .user {
    margin-left: 16px;
    cursor: pointer;
}

.iconx {
    height: 25px;
    width: 25px;
    margin: 0px 0px 12px;
}

/* Top section end  */

.usermanage {
    color: #000;
    font-weight: 500;
    font-size: 16px;
}

.manage {
    color: #828282;
    font-size: 14px;
}
/*Color box css*/

.productbox .fade-blue {
    background-color: rgba(57,180,237,0.1);
}

.productbox .fade-yellow {
    background-color: rgba(255,180,0,0.1);
}

.productbox .fade-brown {
    background-color: rgba(201,110,83,0.1);
}

.productbox .fade-purple {
    background-color: rgba(138,88,213,0.1);
}

.productbox .fade-pink {
    background-color: rgba(248,53,104,0.1);
}

.productbox .fade-green {
    background-color: rgba(136,174,0,0.1);
}

.orange {
    background: #ff7600;
    padding: 10px;
}

.orange-color {
    color: #ff7600;
}

.green {
    background: #84c54b;
}

.yellow {
    background: #ffb400;
}


/* Content section start */

.content-area {
    margin-top: 75px;
}

.content-wrapper {
    display: flex;
    flex-wrap: wrap;
}

    .content-wrapper .left-nav {
        flex-basis: 20%;
        position: relative;
        /*max-height: 957px;*/
        min-height: 120vh;
    }

.navigate {
    height: 100%;
    position: relative;
}

.opinion-section {
    width: 85%;
    position: relative;
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    padding: 15px;
    margin: auto;
    min-height: 153px !important;
    top: 30px;
}


    .opinion-section h3 {
        color: #111111;
        font-size: 16px;
        padding: 10px 10px 0;
        display: flex;
        align-items: flex-start;
    }

        .opinion-section h3 span {
            padding-left: 10px;
        }

    .opinion-section p {
        color: #828282;
        font-size: 16px;
        padding: 0 10px;
    }

.survey, .survey:hover {
    border: 0;
    float: right;
    color: #ff6600;
    text-transform: uppercase;
    text-decoration: underline !important;
    font-size: 12px;
    background-color: #ffffff;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.survey-image {
    height: 28px;
    width: 25px;
}

.advert-image {
    width: 100% !important;
    /*min-height of the parent div*/
    min-height: 118px;
}

.link-class, link-class:hover {
    color: #ff6000;
    cursor: pointer;
    text-decoration: underline !important;
}

.m-t-75 {
    margin-top: 75px !important;
}

.content-wrapper .left-nav .navigate ul {
    list-style: none;
    padding: 15px;
    /*min-height: calc(100vh - 255px);*/
    /*    min-height: 100vh;*/
}

    .content-wrapper .left-nav .navigate ul li {
        margin-bottom: 30px;
        font-size: 16px;
        color: #111111;
        font-weight: 500;
        position: relative;
    }

        .content-wrapper .left-nav .navigate ul li .icon {
            position: absolute;
            right: 5%;
            top: 20%;
        }

.navigate ul li .icon {
    width: 40px;
    height: 40px;
}

.content-wrapper .left-nav .navigate ul li span {
    width: 50px;
    display: block;
}


.content-wrapper .dashboard {
    flex-basis: 80%;
    overflow: hidden;
}

    .content-wrapper .dashboard .speaker {
        align-items: center;
        padding: 15px;
        font-size: 16px;
    }

        .content-wrapper .dashboard .speaker p {
            padding: 0 15px;
        }

        .content-wrapper .dashboard .speaker button.dismiss {
            border: 1px solid #dcdcdc;
            margin-left: 240px;
            width: 75px;
            height: 32px;
            border-radius: 9px;
            padding: 5px 15px;
            font-size: 12px;
            color: #828282;
        }

/* Recent client   */

.recent-client .client-data .client-name {
    color: #111111;
    font-size: 14px;
    font-weight: 500;
}

    .recent-client .client-data .client-name > a {
        padding-bottom: 20px !important;
        display: block;
        cursor: pointer;
    }

.recent-client {
    height: 355px;
    overflow-y: auto;
    position: relative;
}

/*Notification*/

.noti, .noti:hover {
    color: #000;
}

    .noti:hover .bellmsg {
        background-color: #f9f9f9;
        position: relative;
    }

.bellmsg {
    padding: 14px 12px;
    display: flex;
}

.notification a {
    position: relative;
}

    .notification a:after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background: #ff6000;
        top: 3px;
        right: 1px;
        z-index: 99;
        border-radius: 20px;
    }

.top-arrow {
    position: relative;
}

    .top-arrow:after {
        position: absolute;
        left: 50%;
        bottom: 100%;
        border: 10px solid transparent;
        border-bottom-color: black;
        content: "";
    }

.bellmsg img {
    padding-right: 5px;
    flex-basis: 10%;
}

.bell {
    float: left;
    line-height: 2;
}


.notificationText {
    font-size: 12px;
    flex-basis: 90%;
    padding: 0 10px;
}

.noti .cross {
    width: 8%;
    display: none;
    top: 45%;
}

div .cross {
    position: absolute;
    top: 24px;
    right: 24px;
    vertical-align: 100px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.noti:hover .cross {
    display: inline;
}


#mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: none;
}

#update {
    height: 366px;
    padding-top: 11px;
    position: absolute;
    right: 195px;
    top: 100%;
    z-index: 2;
    text-align: left;
    width: 280px;
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    display: none;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
}

    #update:after {
        position: absolute;
        left: 38%;
        border-width: 13px;
        border-style: solid;
        border-color: transparent transparent white;
        border-image: initial;
        content: "";
        top: -25px;
    }

.notification, .assist, .user {
    font-size: 16px;
    margin: 16px 16px auto;
    font-weight: 500;
}

#update:target, #update:target + #mask {
    display: block;
}

/*Notifivation end*/


/*Assist*/

.assist {
    font-size: 14px;
}

    .assist a, .assist a:hover {
        font-size: 14px;
    }


        .assist a, .assist a:hover, .user a, .user a:hover {
            color: #000;
        }

#assist_dropdown {
    position: absolute;
    right: 70px;
    top: 100%;
    z-index: 2;
    text-align: left;
    width: 250px;
    height: auto; /*335px;*/
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    /*    display: none;*/
    margin: 5px auto 0;
    overflow-y: auto;
}

    #assist_dropdown h4 {
        font-weight: 600;
        font-size: 16px;
        color: #000;
        padding: 5px 0 5px;
        margin-bottom: 17px
    }

    #assist_dropdown .assist-points {
        color: #bbb;
        font-family: Manrope;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 12px;
    }

    #assist_dropdown:target, #assist_dropdown:target + #mask {
        display: block;
    }

    #assist_dropdown:after {
        position: absolute;
        left: 65px;
        border-width: 13px;
        border-style: solid;
        border-color: transparent transparent white;
        border-image: initial;
        content: "";
        top: -25px;
    }



/*Assist end*/

/*User*/
#user_dropdown {
    position: absolute;
    right: 1%;
    top: 100%;
    z-index: 4;
    text-align: left;
    width: 190px;
    height: 101px;
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    /*    display: none;*/
    margin: 5px auto 0;
    padding: 15px;
}

    #user_dropdown .option-wrapper .user-list {
        display: flex;
        justify-content: flex-start;
        font-size: 14px;
        color: #111111;
        text-decoration: none;
        margin-bottom: 20px;
    }

        #user_dropdown .option-wrapper .user-list img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }


    #user_dropdown:target, #user_dropdown:target + #mask {
        display: block;
    }

    #user_dropdown::after {
        position: absolute;
        left: 50%;
        border-width: 13px;
        border-style: solid;
        border-color: transparent transparent white;
        border-image: initial;
        content: "";
        top: -25px;
    }

/*User end*/

.analytics_onclick {
    background-color: #fef1e6;
    color: #ff6600;
    padding: 15px 10px;
    border-radius: 8px;
}


    .analytics_onclick a, .analytics_onclick a:hover {
        color: #ff6600;
    }

        .analytics_onclick a img {
            padding-right: 10px;
        }

.recent-client .client-data .client-value {
    text-align: right;
}

    .recent-client .client-data .client-value span {
        padding: 2px 15px;
        margin-left: 10px;
        color: #fff;
        border-radius: 20px;
        font-size: 12px;
    }

.client-data .row {
    line-height: 4;
}

    .client-data .row.clientNameRow {
        line-height: 1.8 !important;
    }

/* News Section  */
.newsarrow {
    float: right;
    cursor: pointer;
}

.documentlastmonth p {
    background-image: linear-gradient(to bottom, #ff611f, #ffb697 25%, #fcf4f3 50%, #ffffff 50%);
}

.documentlastmonth a {
    text-align: center;
    color: black;
}

.graph {
    min-height: 120px;
}

h3.heading {
    color: #111111;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

.height-220 {
    height: 190px;
}

.height-250 {
    height: 250px;
}

.height-180 {
    height: 180px;
}

.height-120 {
    text-overflow: ellipsis;
    height: 120px;
    overflow: auto;
    margin-top: -10px;
}

.height-20 {
    height: 20px;
}

.height-300 {
    height: 300px !important;
}

.width-200 {
    width: 250px;
}

.news-section {
    margin-bottom: 15px;
    font-weight: 500;
}

    .news-section p {
        color: #111111;
        font-size: 14px;
    }

    .news-section .date {
        color: #828282;
        font-size: 12px;
    }


.row .arkencards {
    overflow-x: auto;
}

    .row .arkencards::-webkit-scrollbar {
        height: 5px;
    }

.col-lg-12 .solutions-list {
    display: flex;
    justify-content: right;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.productbox {
    /* flex-basis: 16.667%; */
    flex-basis: 20%;
    margin-top: 20px;
    position: relative;
    cursor: pointer;
}

.productboxSix {
    flex-basis: 16.66%;
    margin-top: 20px;
}

.assign-text {
    font-size: 10px !important;
    width: 100px !important;
}

.add-license-icon {
    position: absolute;
    top: 8px;
    right: 18px;
    height: 20px;
    width: 20px;
    z-index: 2;
    cursor: pointer;
    pointer-events: auto;
}

.subscribed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 15px;
    padding: 0 15px;
    font-size: 10px;
    color: #828282;
}

.list-box {
    height: 170px;
    min-width: 140px;
    background: #dcdcdc;
    padding: 15px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 15px;
}

    .list-box .icon {
        margin-bottom: 12px;
    }

    .list-box p {
        width: 50%;
        font-size: 12px;
        line-height: normal;
        font-weight: bold;
        color: #111;
    }


/* Popup Design  */

.popup-design {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgb(0 0 0 / 50%);
    height: 100vh;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-box-design {
    /*padding: 30px 24px;
    width: 80%;*/
    width: 100%;
    background: #fff;
    border-radius: 12px;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
}

.userManagementPopupWrap .popup-box-design {
    width: 86%;
    background: #fff;
    border-radius: 12px;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    z-index: 9;
    margin: auto;
    padding: 30px 24px;
    height: calc(100vh - 70px);
}

.contactFormPopupWrap .popup-box-design {
    width: 90%;
    background: #fff;
    border-radius: 12px;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    z-index: 9;
    margin: auto;
    padding: 30px 24px;
}

.contactFormPopupWrap header {
    text-align: center;
    border-bottom: solid 1px #ddd;
    padding-bottom: 20px;
}

.customerSuccessManagerPopupWrap .popup-box-design {
    width: 468px;
    background: #fff;
    border-radius: 12px;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    z-index: 9;
    margin: auto;
    padding: 30px 24px;
}

.sessionExpiryPopupWrap .popup-box-design {
    width: 468px;
    border-radius: 12px;
    overflow-y: auto;
    position: relative;
    z-index: 9;
    margin: auto;
    padding: 30px 24px;
}

.blazored-modal-overlay {
    z-index: 1 !important;
}

.content-popup {
    overflow-x: hidden;
}

.popup-design h2 {
    color: #b67171;
    font-size: 16px;
}

.popup-design h3 {
    color: #110909;
    font-size: 14px;
}

.management-cards .card {
    position: relative;
    padding: 15px;
    flex-basis: 23%;
    border-radius: 12px;
    margin-bottom: 15px;
}

    .management-cards .card::after {
        content: "";
        position: absolute;
        background: url("../images/settingspiral.svg");
        width: 106px;
        height: 95px;
        top: 0;
        right: 0;
    }

    .management-cards .card .logo {
        width: 34px;
        margin-bottom: 16px;
    }

    .management-cards .card h3 {
        color: #000;
        font-size: 12px;
    }

    .management-cards .card p {
        color: #828282;
        font-size: 10px;
        margin: 0 0 15px;
    }

    .management-cards .card button {
        border: 0;
        box-shadow: none;
        width: 100%;
        text-align: left;
        color: #ff6600;
        font-size: 12px;
        margin: 0;
        background: none;
        padding: 0;
        position: relative;
    }

.arrow-right {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 3px solid #ff6600;
    border-left: 3px solid #ff6600;
    position: absolute;
    top: 5px;
    right: 0;
}

.arrow-right {
    transform: rotate(135deg);
}

#setting-dropdown ul li a span {
    color: #ff6600;
    width: 100%;
}

.crmset {
    font-size: 20px;
    font-weight: 600;
}

.crmdesc {
    font-size: 14px;
    color: #828282;
    line-height: 1.5;
    margin-bottom: 12px;
}

.productset {
    padding: 24px;
}

    .productset h2 {
        font-size: 20px;
        font-weight: 600;
    }

    .productset h3 {
        font-size: 14px;
        color: #828282;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .productset .arrow-right {
        right: 12px;
    }

    .productset .card h3 {
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: bold;
    }

    .productset .card p {
        margin: 0 0 4px;
    }

    .productset .card {
        border: #ffffff;
        width: 100%;
        margin: 12px 0;
    }



/* customer-success-manager  */


.customer-success-manager h3 {
    color: #111;
    font-size: 16px;
    margin-bottom: 30px;
    font-weight: 500;
}

.popup-design .customer-success-manager label,
.customer-success-manager input,
.customer-success-manager textarea {
    display: block;
    width: 100%;
    margin: 12px 0;
}

.popup-design .passmain {
    margin-top: 30px !important;
}

.popup-design .customer-success-manager input {
    margin-bottom: 0;
}

.customer-success-manager input, .customer-success-manager textarea {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 8px;
    outline: none;
}

.customer-success-manager textarea {
    height: 150px;
}

.customer-success-manager button {
    font-size: 16px;
    font-weight: bold;
    background: #ff6600;
    line-height: 2.5;
    width: 100%;
    color: #fff;
    border: 0;
    box-shadow: none;
    border-radius: 12px;
    margin: 30px 0 20px;
}

.contact-form {
    border-radius: 8px;
    background-color: #ffffff;
    width: 544px;
}

    .contact-form h2 {
        color: #111111;
        margin-bottom: 30px;
    }

    .contact-form p {
        margin: 0;
        margin-top: 24px;
    }

.detailscontact {
    margin: 24px 0 0;
    display: flex;
    width: 80%;
    position: relative;
}

.compdetail {
    color: #828282;
}

.contacttext {
    font-weight: 500;
    font-size: 16px;
    color: #111111;
}

.alignwithimg {
    vertical-align: sub;
}

.contacttext a {
    vertical-align: sub;
}

.detailscontact div img, .detailscontact img {
    margin-right: 16px;
}

.contact-form div a, .contact-form div a:hover {
    color: #111111;
}

/*changeyourpassword*/


.changeyourpass input {
    padding-left: 40px;
}


.changeyourpass {
    width: 468px;
    padding-bottom: 4px;
}

input[type='email'] {
    background-image: url(../icons/mail-line.svg);
    background-position: 7px 50%;
    background-repeat: no-repeat;
}

input[type='name'] {
    background-image: url(../icons/user-line.svg);
    background-position: 7px 50%;
    background-repeat: no-repeat;
}

.info {
    margin: auto;
    width: 420px;
    margin-top: 40px;
}

    .info label {
        text-align: left;
        display: block;
        margin-bottom: 12px;
        font-size: 14px;
        font-weight: 500;
        color: #111;
    }

.details {
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    background-color: #ffffff;
    border: solid 1px #e6e6e6;
    outline: none;
    padding-left: 40px;
    color: #111111;
    margin-bottom: 0;
}

.passmain {
    margin-top: 30px;
}

.validation {
    text-align: left;
    padding: 0;
    margin: 0;
    color: red;
}


/*changeyourpassword over*/

.opinion-section h3 {
    font-weight: 600;
}

.opinion-section p {
    font-size: 12px;
}

.search-form {
    width: 600px;
}

    .search-form form {
        text-align: center;
    }

        .search-form form input {
            display: block;
            width: 100%;
            border: 1px solid #e6e6e6;
            border-radius: 8px;
            height: 40px;
            padding: 0 15px 0 45px;
            margin: 26px 0;
            position: relative;
            outline: none;
            background: #f9f9f9;
        }

        .search-form form .search-area {
            position: relative;
        }

            .search-form form .search-area img {
                position: absolute;
                background-repeat: no-repeat;
                left: 10px;
                top: 10px;
            }

        .search-form form button {
            width: 103px;
            height: 40px;
            font-size: 14px;
            background: #ff6600;
            color: #fff;
            border: 0;
            padding: 0 30px;
            line-height: 2;
            margin: auto;
            border-radius: 8px;
        }

/* Document Grapgn page DEsign  */

.dashboard .heading-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .dashboard .heading-area h3 {
        font-size: 16px;
        font-weight: 600;
        padding: 15px 5px;
        margin-right: auto;
    }

.dashboard .document-section {
    padding: 15px;
    margin-bottom: 15px;
}

.dashboard select {
    border: 1px solid #dcdcdc;
    padding: 5px 35px;
    border-radius: 8px;
    outline: none;
    position: relative;
}

.date-selector {
    position: fixed;
    height: 200px;
    width: 350px;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.date-selector-content {
    margin-top: 30px;
}

.date-selector-row {
    display: flex;
}

    .date-selector-row input {
        font-size: 18px;
        margin-left: 20px;
    }

    .date-selector-row label {
        margin-top: 5px;
    }

.date-selector-btn-grp {
    margin-top: 40px;
}

.date-selector-cancel {
    border: 1px solid #828282;
}

.date-selector-apply, .date-selector-apply:hover {
    background: #ff6000;
    color: white;
    border: 1px solid #ff6000;
}

.calendardropdown {
    position: relative;
    width: 223px;
    height: 41px;
    padding-left: 40px;
    padding-top: 9px;
    border: 1px solid #e6e6e6;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-left: 10px;
    cursor: pointer;
}

.multi-office-dropdown {
    position: relative;
    min-width: max-content;
    height: 41px;
    padding-left: 10px;
    padding-top: 9px;
    border: 1px solid #e6e6e6;
    background-color: #f9f9f9;
    border-radius: 8px;
    cursor: pointer;
}

.left-filter-img {
    position: absolute;
    left: 4px;
    top: 8px;
    width: 24px;
    height: 24px;
}

.right-filter-img {
    position: absolute;
    right: 4px;
    top: 8px;
    width: 24px;
    height: 24px;
}

.doc-data {
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    overflow: auto;
}


    .doc-data table {
        width: 100%;
        font-size: 14px;
    }

.table-heading {
    border-bottom: 1px solid #e6e6e6;
}

.doc-data table tr th {
    color: #828282;
    font-weight: 600;
}

.doc-data table tr td {
    line-height: 3;
}


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

    .flex .doc-created, .flex .engross-pack {
        flex-basis: 49%;
        padding: 15px;
    }


.navigate .dropdown-menu {
    height: 100% !important;
    border: 0;
    line-height: 0.5;
    margin-bottom: 0 !important;
}


/* Graph design ......Start */

.pie-chart {
    background: radial-gradient( circle closest-side, white 0, white 20.72%, transparent 20.72%, transparent 74%, white 0 ), conic-gradient( #ffc850 0, #ffc850 43.7%, #ef5350 0, #ef5350 70.1%, #b03459 0, #b03459 88.5%, #202f60 0, #202f60 100% );
    position: relative;
    width: 500px;
    min-height: 350px;
    margin: 0;
}

    .pie-chart h2 {
        position: absolute;
        margin: 1rem;
    }

    .pie-chart figcaption {
        position: absolute;
        bottom: 1em;
        right: 1em;
        font-size: smaller;
        text-align: right;
    }

    .pie-chart span:after {
        display: inline-block;
        content: "";
        width: 0.8em;
        height: 0.8em;
        margin-left: 0.4em;
        height: 0.8em;
        border-radius: 0.2em;
        background: currentColor;
    }

.quiz-chartTip {
    padding: 5px 10px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 4px;
    background-color: rgba(255,255,255,.9);
    box-shadow: 3px 3px 10px rgba(0,0,0,.1);
    position: absolute;
    z-index: 50;
    max-width: 250px;
}

.quiz-graph {
    padding: 10px;
    height: 400px;
    width: 100%;
}

    .quiz-graph .x-labels {
        text-anchor: middle;
    }

    .quiz-graph .y-labels {
        text-anchor: end;
    }

    .quiz-graph .quiz-graph-grid {
        stroke: #ccc;
        stroke-dasharray: 0;
        stroke-width: 1;
    }

.label-title {
    text-anchor: middle;
    text-transform: uppercase;
    font-size: 12px;
    fill: gray;
}

.p-l-10-imp {
    padding-left: 10px !important;
}

.p-l-35 {
    padding-left: 35px !important;
}

.quiz-graph-dot, .quiz-graph-start-dot {
    fill: rgba(0,112,210,1);
    stroke-width: 2;
    stroke: white;
}

.chat {
    position: fixed;
    bottom: 40px;
    right: 40px;
}

/* Grapgn Design............. END  */


/* media query for ipad Device */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

    .content-wrapper .dashboard {
        flex-basis: 70%;
    }

    .content-wrapper .left-nav {
        flex-basis: 30%;
    }

    .productset .card {
        width: 324px;
    }

    .menu-icon {
        display: block;
    }

    .closetoggle {
        display: block;
    }

    .iconforMenupg {
        position: absolute;
        right: 3%;
        top: 13px;
        width: 40px;
        height: 40px;
    }

    .news-section {
        margin: 20px auto;
    }

    .sectionwrap div {
        text-align: center;
        vertical-align: super;
    }

    .mobile-conect {
        margin-right: 12px;
    }

    .email-conect {
        margin-left: 12px;
    }

    .arkensol {
        margin-top: 0;
    }

    .dashboard {
        margin-top: 6px;
    }

    .opinion-section {
        position: absolute !important;
        bottom: 5%;
    }

    .content-wrapper .dashboard .speaker {
        display: flex;
    }

    .recent-client .client-data .client-value {
        text-align: right !important;
    }

    .management-cards .card {
        flex-basis: 48%;
    }

    .content-wrapper .left-nav .navigate ul li .icon {
        width: 40px;
        right: 0;
    }

    #update {
        right: 13%;
    }

    #assist_dropdown {
        height: 320px !important;
    }

    .user-controls .assist .assisthead {
        display: none;
    }

    .customer-success-manager, .contact-form, .search-form {
        width: 468px !important;
    }

    .info {
        width: 420px !important;
    }

    .flex {
        flex-wrap: wrap;
    }

        .flex .doc-created, .flex .engross-pack {
            flex-basis: 100%;
        }

    .content-wrapper .togglewrap .menuwebpage {
        padding: 50px 20px;
        height: 100%;
        font-weight: 500;
    }

    .content-wrapper .togglewrap .sectionwrap {
        margin: 20px auto;
        padding: 20px 10px;
        position: relative;
    }


        .content-wrapper .togglewrap .sectionwrap a span {
            width: 111px;
            height: 22px;
        }

    .content-wrapper .togglewrap .opinion-section {
        border: solid 1px grey;
        padding-bottom: 25px;
        margin-top: 90px;
        position: relative;
        bottom: 2%;
    }

    .content-wrapper .togglewrap {
        left: 0;
        transition: 0.5s;
    }

        .content-wrapper .togglewrap .cross {
            z-index: 1;
            top: 2%;
            left: 5%;
        }
}

/* media query for Mobile Device */


@media only screen and (max-width: 768px) {

    .content-area {
        margin-top: 65px;
    }


    .content-wrapper .left-nav {
        display: none;
    }

    .dashboard .heading-area {
        flex-wrap: wrap;
    }

    .dashboard select {
        margin: 10px auto;
    }


    .content-wrapper .dashboard .speaker {
        display: flex;
        align-items: flex-start;
    }

    .news-section {
        margin: 20px auto;
    }

    .content-wrapper .dashboard .speaker button.dismiss {
        height: 32px;
        border: 1px solid #dcdcdc;
        border-radius: 9px;
        padding: 5px 15px;
        font-size: 12px;
        color: #828282;
        display: inline-block;
        flex-basis: 15%;
        height: 40px;
        margin-left: 14px;
        /*        margin-top: 20px;*/
    }

    .content-wrapper .dashboard .speaker p {
        padding: 0 15px;
        display: inline-block;
        flex-basis: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .content-wrapper .left-nav, .content-wrapper .dashboard {
        flex-basis: 100%;
    }

    .list-box p {
        width: 90%;
    }

    .recent-client .client-data .client-value {
        text-align: left;
    }

        .recent-client .client-data .client-value span {
            margin: 0;
        }

    .client-data .row {
        margin-bottom: 20px !important;
        line-height: 2;
    }

    .user-controls .assist span {
        font-size: 0;
        width: auto;
        border: 0;
    }

    .drop {
        display: none;
    }

    .user {
        font-size: 0;
        border: #fef1f6;
        border-radius: 50px;
    }

        .user::first-letter {
            font-size: 16px;
            font-weight: 600;
            color: #ff7600;
        }

        .user span {
            font-size: 0;
            font-weight: 600;
            color: #ff6600;
        }

    .circle {
        height: 24px;
        width: 24px;
        display: block;
        line-height: 1.5 !important;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        color: #ff6600;
        text-align: center;
        background: #fef1e6;
    }

    .notification, .assist, .user {
        margin-left: 16px;
        line-height: 1;
    }


        .assist a {
            font-size: 0;
        }

    .user-controls .assist .assisthead {
        display: none;
    }


    .recent-client .client-data .client-name {
        font-size: 16px;
    }

    .res-menu {
        display: inline-block;
    }

    .top-section .logo-container {
        width: 50%;
        padding-left: 15px;
    }

    #menuToggle {
        display: block;
        position: fixed;
        top: 23px;
        left: 15px;
        z-index: 1;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .menu-icon {
        display: block;
    }

    .closetoggle {
        display: block;
    }

    .iconforMenupg {
        position: absolute;
        right: 3%;
        top: 13px;
        width: 40px;
        height: 40px;
    }

    .content-wrapper .left-nav {
        display: block;
        position: fixed;
        width: 100%;
        top: 0;
        left: -100%;
        z-index: 9;
        padding: 0;
        height: 100vh;
    }

        .content-wrapper .left-nav .navigate ul {
            padding-top: 0;
        }

            .content-wrapper .left-nav .navigate ul li span {
                width: auto;
            }

    #update {
        width: 290px;
        right: 35px;
    }

    #assist_dropdown {
        width: 290px;
        right: 3%;
        height: 325px;
    }

        #assist_dropdown h4 {
            padding-top: 15px;
        }

    #update:after {
        left: 60%;
    }

    #assist_dropdown::after {
        left: 72%;
    }

    #user_dropdown {
        right: 18px;
    }

        #user_dropdown::after {
            left: 82%;
        }

    #update .notihead {
        padding-top: 20px;
    }

    .content-wrapper .togglewrap .menuwebpage {
        padding: 50px 20px;
        height: 100%;
        font-weight: 500;
    }

    .content-wrapper .togglewrap .sectionwrap {
        margin: 20px auto;
        padding: 20px 10px;
        position: relative;
    }


        .content-wrapper .togglewrap .sectionwrap a span {
            width: 111px;
            height: 22px;
        }

    .content-wrapper .togglewrap .opinion-section {
        border: solid 1px grey;
        padding-bottom: 25px;
        margin-top: 90px;
        position: relative;
        bottom: 2%;
    }

    .content-wrapper .togglewrap {
        left: 0;
        transition: 0.5s;
    }

        .content-wrapper .togglewrap .cross {
            z-index: 1;
            top: 2%;
            left: 5%;
        }
    /* popup design  */

    .content-popup {
        width: 720px;
    }

    .customer-success-manager, .contact-form, .search-form {
        width: 100%;
    }

    .info {
        width: 256px;
    }

    .flex .doc-created, .flex .engross-pack {
        flex-basis: 100%;
        margin-bottom: 15px;
    }

    .flex {
        flex-wrap: wrap;
    }

    .notification, .assist, .user {
        margin: 0 12px;
    }

    .user {
        margin-right: 0;
    }

    .top-section {
        padding: 25px 25px;
    }
}

@media only screen and (max-width: 768px) and (min-width:375px) {
    .menupage .opinion-section {
        margin-top: 40%;
    }

    .productbox {
        flex-basis: 50%;
    }

    .menupage .opinion-section {
        margin-top: 40%;
    }

    .content-popup {
        width: 288px;
    }

    .customerSuccessManagerPopupWrap .popup-box-design {
        width: 350px;
    }
}

@media only screen and (max-width: 375px) {
    #assist_dropdown::after {
        left: 68%;
    }

    #user_dropdown {
        right: 10px;
    }

    .menupage .opinion-section {
        margin-top: 68%;
    }

    .content-popup {
        width: 288px;
    }

    .customerSuccessManagerPopupWrap .popup-box-design {
        width: 350px;
    }
}

.blazored-modal-header {
    padding: 0 !important;
}

.arken-logo-125 {
    width: 125px;
}

.loglinks, .loglinks:hover {
    text-decoration: none;
    color: black;
    margin-right: 40px;
    font-size: 16px;
}

.common {
    font-family: Manrope;
}

.logsection {
    margin-top: 35px;
}

.logoimg {
    width: auto;
    height: 45px;
}

.title-section {
    font-size: 36px;
    color: black;
    font-family: Manrope;
}

.subtitle-section {
    font-size: 20px;
    color: #828282;
    font-weight: 500;
    font-family: Manrope;
}

.content-section {
    display: flex;
    margin-left: 40px;
    margin-top: 45px;
}

.para-auth a, .para-auth a:hover {
    text-decoration: none;
    color: #ff6600;
}

.list-auth {
    font-weight: 500;
    font-size: 17px;
    font-family: Manrope;
    list-style: none;
    padding-left: 10px;
}

.keydetails span {
    background-color: #ff6600;
}

.keydetails {
    color: white;
    word-break: break-all;
}

.input-section {
    display: flex;
}

.code-con {
    font-size: 15px;
    font-weight: 600;
}

/*.authOptionLinkBtn.btn-verify, .authOptionLinkBtn.btn-verify:hover {
    padding: 15px;
    display: initial !important;
}*/

.btn-verify, .btn-verify:hover {
    height: 47px;
    background-color: #ff6600;
    border: none;
    color: white;
    border-radius: 10px;
}

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

.img-qr {
    width: 250px;
    height: 250px;
}

.img-section {
    margin-left: 5px;
}

.input-box {
    height: 45px;
}

@media only screen and (max-width: 768px) {
    .content-section {
        display: inline;
    }

    .title-section {
        margin-left: 15px;
    }

    .subtitle-section {
        margin-left: 15px;
    }

    .logoimg {
        margin-left: 15px;
    }

    .img-section {
        margin-left: 55px;
    }
}

@media only screen and (max-width:550px) {
    .input-section {
        display: inline;
    }
}



/*configure popup*/

.config-popup {
}

.config-p {
    height: 420px;
    width: 900px;
    position: fixed;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.config-p-top-section {
    margin-left: 20px;
    position: sticky;
    top: 0;
    background: #fff;
    padding-bottom: 10px;
    padding-top: 15px;
}

.config-p-heading {
    font-size: 16px;
    color: black;
    font-family: Manrope;
}

.config-p-close {
    margin-left: 30px;
    cursor: pointer;
}

.config-p-subheading {
    font-size: 14px;
    color: black;
    font-family: Manrope;
    font-weight: 600;
}

.content-section-p {
    display: flex;
    margin-top: 10px;
}

.list-auth-p {
    font-weight: 500;
    font-size: 14px;
    font-family: Manrope;
    margin-left: 10px;
    list-style: none;
    padding-left: 10px;
}

.side-qr {
    display: none;
}

.bottom-qr {
    display: block;
}

.btns-p {
    margin-left: 20px;
}

@media only screen and (max-width:920px) {
    .config-p {
        height: 80vh;
        width: 550px;
        top: 55vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .side-qr {
        display: block;
    }

    .bottom-qr {
        display: none
    }

    .config-p-close {
        margin-left: 0px;
    }

    .config-p-top-section {
        margin-left: 20px;
        position: sticky;
        top: 0;
        background: #fff;
        padding-bottom: 10px;
        padding-top: 15px;
    }
}

@media only screen and (max-width:584px) {
    .btns-p {
        margin-left: 0px;
    }

    .config-p {
        width: 300px;
    }
}

@media only screen and (max-width:325px) {
    .config-p-top-section {
        margin-left: 8px;
    }

    .list-auth-p {
        margin-left: -5px;
    }
}

/*two fac auth page*/
.fac-page {
    font-family: Manrope;
}

.loglinks-fac, .loglinks-fac:hover {
    text-decoration: none;
    color: black;
}

.logoimg-fac {
    width: auto;
    height: 50px;
}

.logsection-fac {
    margin-top: 20px;
}

.logosection-fac {
    margin-top: 150px;
}

.title-fac {
    font-size: 35px;
    color: black;
    margin-top: 20px;
}

.subtitle-fac {
    font-size: 21px;
    color: #828282;
    margin-top: 17px;
}

.subtitle-ChangePassword {
    font-size: 21px;
    color: #828282;
    margin-top: 17px;
    margin-bottom: 40px;
}

.input-fac {
    /*width: 500px;*/
    height: 50px;
    margin-top: 50px;
}

.digit-group
input {
    width: 53px;
    height: 63px;
    background-color: rgba(255, 0, 0,0);
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    color: black;
    margin: 45px 10px 0px;
}

.splitter {
    padding: 0 5px;
    color: white;
    font-size: 24px;
}

.input-fac:focus {
    outline: none;
}

.btns-fac button, .btns-fac button:hover {
    background-color: #ff6600;
    color: white;
    height: 50px;
    border-radius: 10px;
    width: 420px;
    border: none;
    display: block;
    margin: 0 auto;
}

.btns-fac {
    margin-top: 60px;
}

    .btns-fac span {
        padding-top: 20px;
    }

.trouble-link {
    margin-top: 20px;
}

    .trouble-link a, .trouble-link a:hover {
        text-decoration: none;
        color: #ff6600;
        font-weight: 500;
        font-size: 14px;
    }

.footer-fac a, .footer-fac a:hover {
    text-decoration: none;
    color: black;
}

.footer-fac {
    margin-top: 40px;
    font-weight: 500;
}

@media only screen and (max-width: 575px) {
    .logosection-fac {
        margin-top: 50px;
    }

    .btns-fac button, .btns-fac button:hover {
        width: inherit;
    }



    .footer-fac {
        font-size: 12px;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
}

@media (min-width: 500px) {
    .modal-dialog {
        max-width: 650PX;
        margin: 1.75rem auto;
    }
}

@media screen and (max-width: 575px) and (min-width:390px) {
    .digit-group input {
        width: 40px;
        height: 53px;
        text-align: center;
    }

    .splitter {
        padding: 0 2px;
    }
}

@media screen and (max-width:390px) {
    .digit-group input {
        width: 30px;
        height: 43px;
        text-align: center;
    }

    .splitter {
        padding: 0 1px;
    }
}



/*phone verification*/

.phone-top {
    display: flex;
    margin-top: 40px;
}

.loglinks-phone, .loglinks-phone:hover {
    text-decoration: none;
    color: black;
    margin-left: 50px;
}

.logosection-phone {
    margin-top: 45px;
}

.title-phone {
    font-size: 35px;
    color: black;
    margin-top: 20px;
}

.subtitle-phone {
    font-size: 21px;
    color: #828282;
    margin-top: 20px;
}

.logoimg-phone {
    width: auto;
    height: 45px;
}

.wrap-phone {
    display: block;
    margin-top: 40px;
}

.loginAnotherMethodOptions .phone-container a, .loginAnotherMethodOptions .phone-container a:hover {
    color: #000;
}

.loginAnotherMethodOptions .phone-form {
    display: block !important;
}

.phone-form {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

    .phone-form p {
        font: 10px;
        font-weight: 500;
    }

.phone-container .form-control {
    padding-left: 2.375rem;
}

.phone-container .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 3rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    padding: 5px;
}

.phone-container .form-control-feedbacks {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 3rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    padding: 3px;
    margin-left: 3px;
}



.input-phone {
    height: 45px;
    text-align: center;
    font-size: 20px;
}

.btns-phone button, .btns-phone button:hover {
    background-color: #ff6600;
    color: white;
    height: 50px;
    margin-top: 50px;
    border-radius: 10px;
    font-weight: 500;
}

.otp-label {
    margin-top: 20px;
}

.input-otp {
    width: 450px;
    height: 45px;
    text-align: center;
    font-size: 20px;
}

.resend {
}

    .resend a, .resend a:hover {
        text-decoration: none;
        color: #ff6600;
        font-weight: 500;
    }

.footer-phone {
    margin-top: 100px;
    font-weight: 500;
}

    .footer-phone a, .footer-phone a:hover {
        text-decoration: none;
        color: black;
    }

.footer-otp {
    margin-top: 100px;
    font-weight: 500;
}

    .footer-otp a, .footer-otp a:hover {
        text-decoration: none;
        color: black;
    }

@media only screen and (max-width: 768px) {
    .phone-top {
        display: block;
        margin-top: 20px;
    }

    .logosection-phone {
        margin-top: 30px;
    }

    .loglinks-phone {
        margin-left: 10px;
    }

    .input-phone {
    }

    .btns-phone button, .btns-phone button:hover {
    }

    .footer-phone {
        font-size: 12px;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
}



/*toastr css*/
.toaster {
    border-radius: 24px;
    /*    background: #55ce81;*/
    padding: 8px;
    color: #fff;
    width: 39%;
    font-family: sans-regular;
}

#toast-container > .toast-success {
    background-image: none !important;
}

#toast-container > .toast-error {
    content: none;
}

#toast-container.toast-bottom-center > div, #toast-container.toast-top-center > div {
    border-radius: 30px;
}

.toast {
    background: #55ce81;
    color: #fff;
    text-align: center;
}

.toast-error .toast-message:before {
    content: none;
}

#toast-container.toast-bottom-center > div, #toast-container.toast-top-center > div {
    width: 330px !important;
    margin-left: auto;
    margin-right: auto;
}






#toast-container > div {
    padding: 15px !important;
}

#toast-container > .toast-error {
    background-image: none !important;
}


.toast-error {
    background-color: #a94442;
    border-radius: 15px;
}

/*loaderx loadin screen*/

.loaderx {
    border: 16px solid #bbb;
    border-top: 16px solid #ff6000;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

.loader-section {
    border: 16px solid #bbb;
    border-top: 16px solid #ff6000;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    margin: 0 auto;
    position: absolute;
    top: 40%;
    left: 40%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.loader-h-c {
    border: 16px solid #bbb;
    border-top: 16px solid #ff6000;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    margin: 0 auto;
    position: absolute;
    top: 40%;
    left: 45%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}


/*SignUpProductScreen*/
.productPage {
    font-family: Manrope;
}

.product-top {
    margin-top: 30px;
}

.margin-top {
    margin-top: 50px;
}

.loglinks-product, .loglinks-product:hover {
    text-decoration: none;
    color: black;
    margin-left: 30px;
}

.product-form {
    margin: 0 auto;
}

.logoimg-product {
    margin-top: 10px;
    width: auto;
    height: 45px;
}

.title-product {
    font-family: Manrope;
    font-size: 36px;
    color: black;
    margin-top: 20px;
}

.subtitle-product {
    font-family: Manrope;
    font-size: 21px;
    color: #828282;
    margin-top: 20px;
}

.product-input-section {
    margin-top: 30px;
    font-family: Manrope;
}

.wrap-product p {
    margin-top: 20px;
    font-family: Manrope;
    font-size: 14px;
}

.company-wrap p {
    margin-top: 20px;
    font-family: Manrope;
    font-size: 14px;
}

.form-control-product {
    position: absolute;
    z-index: 2;
    display: block;
    margin-top: -4px;
    margin-left: 3px;
    width: 2.375rem;
    height: 2.2rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    padding: 5px;
}

.wrap-product input {
    margin-top: -10px;
    padding-left: 40px;
    border: solid 1px #e6e6e6;
    border-radius: 8px;
    font-family: Manrope;
    font-size: 14px;
    height: 48px;
}

.input-product {
    margin-top: -10px;
    padding-left: 40px;
    border: solid 1px #e6e6e6;
    border-radius: 8px;
    font-family: Manrope;
    font-size: 14px;
    height: 48px;
}

.input-company {
    margin-top: -10px;
    padding-left: 10px;
    border: solid 1px #e6e6e6;
    border-radius: 8px;
    font-family: Manrope;
    font-size: 14px;
    height: 48px;
}

.product-btn-group input, .product-btn-group input:hover {
    background-color: #ff6600;
    color: white;
    height: 50px;
    margin-top: 50px;
    border-radius: 10px;
    font-weight: 500;
}

.insights-text {
    width: 388px;
    height: 42px;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #111111;
}

.checkbox-product {
    margin-top: 10px;
    display: flex;
}

.checkbox-product-div {
    margin-top: 10px;
}

.m-t-1 {
    margin-top: 1px !important;
}

.checkbox-product-div input {
    margin-top: -18px;
}

.checkbox-product-first {
    height: 18px;
    width: 18px;
}


.checkbox-second-div {
    margin-left: 10px;
}

    .checkbox-second-div a, .checkbox-second-div a:hover {
        text-decoration: none;
        color: #ff6600;
    }

.validation-message {
    color: red;
}

@media only screen and (max-width: 768px) {
    .loglinks-product, .loglinks-product:hover {
        margin-left: 5px;
    }
}
/*congratulations page*/
.congratulations-content {
    font-family: Manrope;
}

.sub-sub-heading {
    margin: 0 auto;
}

    .sub-sub-heading p {
        padding-left: 12px;
        color: #ff6600;
        font-family: Manrope;
        font-size: 16px;
        font-weight: bold;
    }

.common-div {
    justify-content: center;
    margin: 0 auto;
}

    .common-div .card-cong {
        padding: 50px 10px;
        border-radius: 8px;
        height: 300px;
        overflow: hidden;
    }

.img-congrats {
    height: 80%;
    width: 120%;
}

.common-div p {
    font-family: Manrope;
    font-size: 24px;
    font-weight: 500;
}

.btn-congrats button {
    border-radius: 8px;
    background-color: #ff6600;
    color: white;
    border: none;
    line-height: 40px;
    margin-top: 50px;
}

.card-cong {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 8px;
    padding: 50px 10px;
}

#congratulations-third-card, #congratulations-fourth-card {
    display: none;
}

@media only screen and (min-width:1566px) {
    .common-div .card-cong {
        height: 500px;
    }
}

@media only screen and (min-width:992px) {
    .img-congrats {
        height: 70%;
        width: 100%;
    }
}

@media only screen and (max-width:991px) {
    .common-div .card-cong {
        margin-top: 20px;
        height: auto;
    }

    .img-congrats {
        height: 70%;
        width: 100%;
    }

    #congratulations-third-card, #congratulations-fourth-card {
        display: block;
    }
}

@media only screen and (max-width:768px) {
    .img-congrats {
        height: 80%;
        width: 120%;
    }
}

@media only screen and (max-width:518px) {
    .common-div p {
        font-size: 16px;
    }

    .img-congrats {
        height: 150%;
        width: 170%;
        margin-left: -20px;
    }
}

/*create user account in settings screen*/
.t-l-r-padding {
    padding: 20px 8px 8px;
}

.horizontal-scrollable {
    overflow-x: scroll;
    max-width: 85%;
}

    .horizontal-scrollable::-webkit-scrollbar {
        display: none;
    }

.min-width-800 {
    min-width: 800px;
}

.grayout {
    opacity: 0.6; /* Real browsers */
    filter: alpha(opacity = 60); /* MSIE */
    pointer-events: none;
}

.create-user {
    font-family: Manrope;
    letter-spacing: 1px;
    flex-basis: 80%;
}

.create-heading {
    font-size: 20px;
}

.edit-btn, .edit-btn:hover {
    background: #ff6000 url(../../wwwroot/images/add-a-client.svg);
    color: white;
    background-position: 8px 8px;
    background-repeat: no-repeat;
    line-height: 2rem;
    border-radius: 10px;
}

.create-user-page {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    /*margin-top: 25px;*/
}

.sub-create-heading {
    font-family: Manrope;
    font-size: 15px;
    font-weight: bold;
}

.wrap-create-user-acc {
    margin-top: 20px;
}

    .wrap-create-user-acc p {
        font-size: 14px;
        letter-spacing: normal;
    }

.top-create-line {
    display: flex;
    margin-top: 20px;
    margin-left: -10px;
}

.second-create-line {
    display: flex;
    margin-top: 20px;
    margin-left: -10px;
}

.required-create-line {
    display: flex;
    margin-top: 20px;
    margin-left: -10px;
}

.third-create-line {
    display: flex;
    margin-top: 20px;
    margin-left: -10px;
}

.create-input-div {
    margin-left: 20px;
}

.company-edit-input-div {
    margin-left: 20px;
    margin-top: 20px;
}

.bg-box-company-edit {
    background: #fef1e6;
    display: flex;
    padding: 12px 16px 0px 0px;
    border-radius: 8px;
    margin-left: 29px;
}

.form-control-create {
    position: absolute;
    display: block;
    margin-top: 3px;
    margin-left: 3px;
    width: 2.375rem;
    height: 2.2rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    padding: 5px;
}

.wrap-create-user-acc input {
    margin-top: -4px;
    padding-left: 40px;
    border: solid 1px #e6e6e6;
    border-radius: 8px;
    font-family: Manrope;
    font-size: 14px;
    height: 48px;
}

.wrap-create-product input {
    margin-top: -4px;
    /*padding-left: 40px;*/
    border: solid 1px #e6e6e6;
    border-radius: 8px;
    font-family: Manrope;
    font-size: 14px;
    height: 48px;
}

.second-create-heading {
    font-family: Manrope;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
}

.checkbox-create {
    height: 18px;
    width: 18px;
}

.checkbox-create-div {
    margin-top: -8px;
}

.checkbox-text-create {
    margin-left: 10px;
}

.required-label {
    margin-left: 20px;
}

#rLabel {
    color: #f60;
}

#company-edit-main-heading {
    font-size: 16px !important;
    font-weight: bold !important;
}

.company-heading-edit-main {
    font-size: 16px !important;
    font-weight: bold !important;
}

.company-role-line {
    display: flex;
    margin-top: 30px;
    margin-left: -10px;
    flex-wrap: wrap;
}

    .company-role-line label {
        font-size: 14px;
    }

.confirmation-email-line {
    display: flex;
    margin-top: 30px;
    margin-left: -10px;
}

    .confirmation-email-line label {
        font-size: 14px;
    }

.checkbox-product-selection {
    visibility: hidden;
}

#checkbox-product-selection:active {
    background-color: #ff6000;
}

.checkbox-product-label {
    line-height: 1.2;
    margin-bottom: 15px;
    border-radius: 20px;
    background-color: #fff;
    border-color: #bbb;
    font-size: 14px;
}

.checkbox-product-selection:checked + .checkbox-product-label {
    background-color: #ff6000;
    color: #fff;
    border-color: #ff6000;
}

.product-permissions-line {
    display: flex;
    margin-left: -20px;
    margin-top: -40px;
}

.small-create-heading {
    margin-top: 20px;
    font-weight: bold;
    font-size: 15px;
}
/*tab in user create and manage*/
.user-create-tab-wrap {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    margin-top: 30px;
}

    .user-create-tab-wrap button {
        background-color: #fef1e6;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 8px 8px;
        transition: 0.3s;
        font-size: 17px;
        margin-left: 5px;
        font-family: Manrope;
        color: #111111;
        border-radius: 0px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

.first-tab {
    margin-left: -3px;
}

.user-tab-content {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.user-create-tab-wrap .active-tab {
    background-color: #ff6000;
    color: #fff;
    box-shadow: none;
    border: 1px solid #ff6000;
}



.user-tab-olws {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
}

.user-create-tab-wrap button:active {
    box-shadow: none;
    border: none;
}

.tab-question {
    margin-top: 30px;
    font-weight: 600;
    font-family: Manrope;
    margin-bottom: 20px;
    font-size: 15px;
}



/*tab in user create and manage*/
.company-create-tab-wrap {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    /*margin-top: 30px;*/
}

    .company-create-tab-wrap button {
        background-color: #fef1e6;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 8px 8px;
        transition: 0.3s;
        font-size: 17px;
        margin-left: 5px;
        font-family: Manrope;
        color: #111111;
        border-radius: 0px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        white-space: nowrap;
    }

.company-tab-content {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.company-create-tab-wrap .active-tab, .company-create-tab-wrap .add-office-tab {
    background-color: #ff6000;
    color: #fff;
    box-shadow: none;
    border: 1px solid #ff6000;
}

.company-create-tab-wrap .main-office {
    background-color: #828282;
    color: #fff;
    box-shadow: none;
    border: 1px solid #828282;
}

.company-create-tab-wrap button:active {
    box-shadow: none;
    border: none;
}
/*on off switch in create user acc*/
.onoffswitch {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
}

.onoffswitch-inner {
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch-inner:before, .onoffswitch-inner:after {
        float: left;
        width: 50%;
        height: 25px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "Yes";
        padding-left: 7px;
        background-color: #ff6000;
        color: #FFFFFF;
        margin-top: -4px;
    }

    .onoffswitch-inner:after {
        content: "No";
        padding-right: 11px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
        margin-top: -4px;
    }

.onoffswitch-switch {
    width: 20px;
    margin: 2px;
    background: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 35px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}


/*switch 2*/
.onoffswitch2 {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch2-checkbox {
    display: none;
}

.onoffswitch2-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
}

.onoffswitch2-inner {
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch2-inner:before, .onoffswitch2-inner:after {
        float: left;
        width: 50%;
        height: 25px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch2-inner:before {
        content: "Yes";
        padding-left: 7px;
        background-color: #ff6000;
        color: #FFFFFF;
        margin-top: -4px;
    }

    .onoffswitch2-inner:after {
        content: "No";
        padding-right: 11px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
        margin-top: -4px;
    }

.onoffswitch2-switch {
    width: 20px;
    margin: 2px;
    background: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 35px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-inner {
    margin-left: 0;
}

.onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-switch {
    right: 0px;
}

/*switch 3*/
.onoffswitch3 {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch3-checkbox {
    display: none;
}

.onoffswitch3-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
}

.onoffswitch3-inner {
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch3-inner:before, .onoffswitch3-inner:after {
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch3-inner:before {
        content: "";
        padding-left: 7px;
        background-color: #ff6000;
        color: #FFFFFF;
        margin-top: -4px;
    }

    .onoffswitch3-inner:after {
        content: "";
        padding-right: 11px;
        background-color: #828282;
        color: #999999;
        text-align: right;
        margin-top: -4px;
    }

.onoffswitch3-switch {
    width: 22px;
    margin: 2px;
    background: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 35px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-inner {
    margin-left: 0;
}

.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-switch {
    right: 0px;
}

.onoffswitch4 {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch4-checkbox {
    display: none;
}

.onoffswitch4-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
}

.onoffswitch4-inner {
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch4-inner:before, .onoffswitch4-inner:after {
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch4-inner:before {
        content: "Yes";
        padding-left: 7px;
        background-color: #ff6000;
        color: #FFFFFF;
        margin-top: -4px;
    }

    .onoffswitch4-inner:after {
        content: "No";
        padding-right: 11px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
        margin-top: -4px;
    }

.onoffswitch4-switch {
    width: 20px;
    margin: 2px;
    background: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 35px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch4-checkbox:checked + .onoffswitch4-label .onoffswitch4-inner {
    margin-left: 0;
}

.onoffswitch4-checkbox:checked + .onoffswitch4-label .onoffswitch4-switch {
    right: 0px;
}


.onoffswitch5 {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch5-checkbox {
    display: none;
}

.onoffswitch5-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
}

.onoffswitch5-inner {
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch5-inner:before, .onoffswitch5-inner:after {
        float: left;
        width: 50%;
        height: 25px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch5-inner:before {
        content: "Yes";
        padding-left: 7px;
        background-color: #ff6000;
        color: #FFFFFF;
        margin-top: -4px;
    }

    .onoffswitch5-inner:after {
        content: "No";
        padding-right: 11px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
        margin-top: -4px;
    }

.onoffswitch5-switch {
    width: 20px;
    margin: 2px;
    background: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 35px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch5-checkbox:checked + .onoffswitch5-label .onoffswitch5-inner {
    margin-left: 0;
}

.onoffswitch5-checkbox:checked + .onoffswitch5-label .onoffswitch5-switch {
    right: 0px;
}

.onoffswitch6 {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch6-checkbox {
    display: none;
}

.onoffswitch6-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
}

.onoffswitch6-inner {
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch6-inner:before, .onoffswitch6-inner:after {
        float: left;
        width: 50%;
        height: 25px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .onoffswitch6-inner:before {
        content: "Yes";
        padding-left: 7px;
        background-color: #ff6000;
        color: #FFFFFF;
        margin-top: -4px;
    }

    .onoffswitch6-inner:after {
        content: "No";
        padding-right: 11px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
        margin-top: -4px;
    }

.onoffswitch6-switch {
    width: 20px;
    margin: 2px;
    background: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 35px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch6-checkbox:checked + .onoffswitch6-label .onoffswitch6-inner {
    margin-left: 0;
}

.onoffswitch6-checkbox:checked + .onoffswitch6-label .onoffswitch6-switch {
    right: 0px;
}

.create-product-btn-grp {
    margin-top: 40px;
}

    .create-product-btn-grp input, .create-product-btn-grp input:hover {
        border: 1px solid #ff6000;
        border-radius: 10px;
        line-height: 35px;
    }

    .create-product-btn-grp a, .create-product-btn-grp a:hover {
        border: 1px solid #ff6000;
        border-radius: 10px;
        line-height: 35px;
    }

.create-product-submit-btn, .create-product-submit-btn:hover {
    /*margin-left: 30px;*/
    background-color: #ff6000;
    color: #fff;
}

.pull-right {
    float: right;
}

/*switch end create user continue*/
.create-user-btn-grp {
    margin-top: 40px;
}

    .create-user-btn-grp input, .create-user-btn-grp input:hover {
        border: 1px solid #ff6000;
        border-radius: 10px;
        line-height: 35px;
    }

    .create-user-btn-grp a, .create-user-btn-grp a:hover {
        border: 1px solid #ff6000;
        border-radius: 10px;
        line-height: 35px;
    }

.create-submit-btn, .create-submit-btn:hover {
    margin-left: 30px;
    background-color: #ff6000;
    color: #fff;
}

.btn-create-grp {
    margin-left: 24px;
}

.create-btm-label {
    margin-left: -20px;
}

/*Common button style*/
.dashboard-btn {
    margin-top: 40px;
}

    .dashboard-btn input, .dashboard-btn input:hover {
        border: 1px solid #ff6000;
        border-radius: 10px;
        line-height: 35px;
    }

    .dashboard-btn a, .dashboard-btn a:hover {
        border: 1px solid #ff6000;
        border-radius: 10px;
        line-height: 35px;
    }

    .dashboard-btn div, .dashboard-btn div:hover {
        border: 1px solid #ff6000;
        border-radius: 10px;
        line-height: 35px;
    }

.discard-popup {
    position: fixed;
    height: 250px;
    width: 500px;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.discard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128,128,128,0.5);
    z-index: 2;
}

.discard-overlay-session {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

.discard-btn {
    margin-top: 80px;
}

.discard-popup-heading {
    font-family: Manrope;
    font-size: 20px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: left;
}

.discard-popup-btn-grp {
    margin-right: 40px;
    position: absolute;
    right: 1px;
    bottom: 10px;
}

    .discard-popup-btn-grp input {
        width: 120px;
        height: 50px;
        border: 1px solid #bbb;
        margin-left: 20px;
    }

    .discard-popup-btn-grp .yes-btn {
        background: #ff6000;
        border: 1px solid #ff6000;
        color: white;
    }

.discard-popup-delete, .discard-popup-small {
    position: fixed;
    height: 130px;
    width: 500px;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.doc-popup {
    position: fixed;
    height: 250px;
    width: 500px;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.doc-popup-btn-grp {
    /*margin-right: 40px;*/
    position: absolute;
    right: 1px;
    bottom: 10px;
}

    .doc-popup-btn-grp input {
        width: 140px;
        height: 50px;
        border: 1px solid #bbb;
        margin-left: 20px;
        position: center;
    }

    .doc-popup-btn-grp .yes-btn {
        background: #ff6000;
        border: 1px solid #ff6000;
        color: white;
    }

.row-select {
    background: #f2f2f2;
    border-color: #f2f2f2;
}
/*Partner Link Overlay*/
.partnerlink-popup {
    position: fixed;
    max-height: 60%;
    min-width: 40%;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.partnerlink-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128,128,128,0.5);
    z-index: 2;
}

.partnerlink-overlay-session {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

.partnerlink-btn {
    margin-top: 80px;
}

.partnerlink-popup-normal {
    font-family: Manrope;
    font-size: 20px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: left;
}

.partnerlink-popup-heading {
    font-family: Manrope;
    font-size: 20px;
    margin-top: 10px;
    text-align: left;
}

.partnerlink-popup-btn-grp {
    margin-right: 40px;
    position: absolute;
    right: 1px;
    /*bottom: 10px;*/
}

    .partnerlink-popup-btn-grp input {
        width: 80px;
        height: 30px;
        border: 1px solid #bbb;
        margin-left: 20px;
    }

    .partnerlink-popup-btn-grp .yes-btn {
        background: #ff6000;
        border: 1px solid #ff6000;
        color: white;
    }
/* The container */
.container-create {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .container-create input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */
.checkmark-create {
    position: absolute;
    top: 4px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 2px solid #b5b5b5;
    border-radius: 2px;
    margin-top: -3px;
}

/* On mouse-over, add a grey background color */
.container-create:hover input ~ .checkmark-create {
    background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.container-create input:checked ~ .checkmark-create {
    background-color: #ff6000;
    border-color: #ff6000;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-create:after {
    content: "✔";
    position: absolute;
    display: none;
    top: 0;
}

/* Show the indicator (dot/circle) when checked */
.container-create input:checked ~ .checkmark-create:after {
    display: block;
}

/* Style the indicator (tick) */
.container-create .checkmark-create:after {
    top: -3px;
    left: 2px;
    width: 4px;
    height: 4px;
    content: "✔";
    font-size: 14px;
    color: white;
}

@media only screen and (max-width:768px) {
    .top-create-line {
        display: block;
    }

    .second-create-line {
        display: block;
    }

    .confirmation-email-line {
        display: block;
    }

    .product-permissions-line {
        display: block;
    }

    .create-user {
        flex-basis: 100%;
    }
}

/*Company Administration page*/
.company-flex {
    display: flex;
}

.companyadministration-flex {
    flex-basis: 80%;
    font-family: Manrope;
}

    .companyadministration-flex tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .companyadministration-flex tr {
        line-height: 52px;
    }

    .companyadministration-flex th {
        font-family: Manrope;
        font-size: 14px;
        font-weight: bold;
        color: #828282;
        min-width: 180px;
    }

.grid-col {
    background-color: aqua;
}

#header-row-user-management {
    background-color: #fff !important;
}

.companyadministration-heading {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 600;
    color: #111111;
    margin-top: 30px;
}

.companyadministration-sub-heading {
    font-family: Manrope;
    font-size: 14px;
    font-weight: normal;
    color: #828282;
    margin-top: 10px;
}

.companyadministration-grid-section {
    margin-top: 20px;
    overflow-x: auto;
    border: 1px solid #e6e6e6;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

    .companyadministration-grid-section table {
        margin-bottom: 0;
    }

.companyadministration-searchbox input {
    padding-left: 2.375rem;
    font-family: Manrope;
    font-size: 14px;
    font-weight: normal;
    color: #828282;
    border-radius: 8px;
    height: 40px;
}

.companyadministration-input-img {
    position: absolute;
    margin-top: 8px;
    pointer-events: none;
    padding-left: 10px;
}

.L, .L:hover {
    background-color: rgba(174, 255, 174, 0.5);
    color: #84c54b;
}

.R, .R:hover {
    background-color: rgba(255, 206, 71, 0.4);
    color: #ff6000;
}

.U, .U:hover {
    background-color: rgba(208, 206, 208, 0.5);
    color: gray;
}
/*END OF COMPANY ADMINISTRATION*/


/*USER management page*/
.user-flex {
    display: flex;
}

.usermanagement-flex {
    flex-basis: 80%;
    font-family: Manrope;
}

    .usermanagement-flex tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .usermanagement-flex tr {
        line-height: 52px;
    }

        .usermanagement-flex tr.clientDocsTableContent {
            line-height: 1.5;
        }

    .usermanagement-flex th {
        font-family: Manrope;
        font-size: 14px;
        font-weight: bold;
        /*color: #828282;*/
        /*min-width: 180px;*/
    }

.grid-col {
    background-color: aqua;
}

#header-row-user-management {
    background-color: #fff !important;
}

.usermanagement-heading {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 600;
    color: #111111;
    /*margin-top: 30px;*/
}

.usermanagement-sub-heading {
    font-family: Manrope;
    font-size: 14px;
    font-weight: normal;
    color: #828282;
    margin-top: 10px;
}

.usermanagement-grid-section {
    margin-top: 20px;
    overflow-x: auto;
    border: 1px solid #e6e6e6;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

    .usermanagement-grid-section table {
        margin-bottom: 0;
    }

.usermanagement-searchbox input {
    padding-left: 2.375rem;
    font-family: Manrope;
    font-size: 14px;
    font-weight: normal;
    color: #828282;
    border-radius: 8px;
    height: 40px;
}

.usermanagement-input-img {
    position: absolute;
    margin-top: 8px;
    pointer-events: none;
    padding-left: 10px;
}

.usermanagement-filter, .usermanagement-filter {
    background: #e6e6e6;
    border-radius: 8px;
    cursor: pointer;
}

    .usermanagement-filter img {
        cursor: pointer;
    }

.filter-active {
    width: 10px;
    height: 10px;
    position: absolute;
    right: 15%;
    border-radius: 5px;
    background-color: red;
}

.filter-off {
}

.usermanagement-adduser, .usermanagement-adduser:hover {
    background: #ff6000;
    height: 40px;
    border-radius: 8px;
    margin-left: 5px;
    cursor: pointer;
    display: flex;
    color: #f9f9f9;
    font-size: 14px;
    font-weight: bold;
    font-weight: bold;
    width: 120px;
    margin-top: 1px;
}

    .usermanagement-adduser span {
        margin-top: 2px;
    }


.usermanagement-controls, .companyadministration-controls {
    margin-top: 50px;
    padding-left: 15px;
}

.selected-btn-usermanagement, .selected-btn-usermanagement:hover {
    border-radius: 11px;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
}

#delete-btn-usermanagement {
    width: 44px;
}

.Active, .Active:hover {
    background-color: rgba(174, 255, 174, 0.5);
    color: #84c54b;
}

.Archived, .Archived:hover {
    background-color: rgba(255, 206, 71, 0.4);
    color: #ff6000;
}

.Revoked, .Revoked:hover {
    background-color: rgba(208, 206, 208, 0.5);
    color: gray;
}

.status-dropdown {
    position: absolute;
    display: none;
    right: 17%;
    z-index: 1;
    text-align: left;
    width: 90px;
    height: 80px;
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    margin: 5px auto 0;
}

    .status-dropdown li {
        padding-top: 5px;
        margin-left: -15px;
        line-height: 2em;
    }

.status-dropdown-list {
    list-style-type: none;
}

    .status-dropdown-list a {
        text-decoration: none;
    }

.table-usermanagement {
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    /*min-width: 550px;*/
    margin-top: 15px;
}

.filter-popup-usermanagement {
    position: absolute;
    right: 7%;
    z-index: 1;
    text-align: left;
    width: 450px;
    height: 270px;
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    margin: 5px auto 0;
    top: 28%;
}

    .filter-popup-usermanagement:after {
        content: ''; /* Required to display content */
        position: absolute; /* Sets the position absolute to the top div */
        top: 0;
        left: 38%; /* position the little arrow */
        margin-left: 28%;
        margin-top: -15px; /* Set margin equal to border px */
        width: 0;
        z-index: 1;
        height: 0;
        border-bottom: solid 15px #FFF; /* Creates the arrow pointing up, to change to a notch instead user border-top */
        border-left: solid 15px transparent; /* Creates triangle effect */
        border-right: solid 15px transparent; /* Creates triangle effect */
    }

.section-filter-usermanagement {
    /*    margin-top: 22px;
    margin-left: 15px;*/
    margin: 22px;
}

    .section-filter-usermanagement p {
        font-family: Manrope;
        font-size: 17px;
        font-weight: 500;
        color: #111111;
    }

.filter-radio-row {
    margin-left: 30px;
    display: flex;
}

.filter-radio-column {
    margin-left: 5px;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
}
/* The container */
.filter-label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.m-l-30 {
    margin-left: 25px;
}

.p-l-15 {
    padding-left: 15px;
}
/* Hide the browser's default radio button */
.filter-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark-filter {
    position: absolute;
    top: 4px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 2px solid #b5b5b5;
    border-radius: 2px;
    margin-top: -3px;
}

/* On mouse-over, add a grey background color */
.container-filter:hover input ~ .checkmark-filter {
    background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.filter-label input:checked ~ .checkmark-filter {
    background-color: #ff6000;
    border-color: #ff6000;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-filter:after {
    content: "✔";
    position: absolute;
    display: none;
    top: 0
}

/* Show the indicator (dot/circle) when checked */
.filter-label input:checked ~ .checkmark-filter:after {
    display: block;
}

/* Style the indicator (tick) */
.filter-label .checkmark-filter:after {
    top: -3px;
    left: 2px;
    width: 4px;
    height: 4px;
    content: "✔";
    font-size: 14px;
    color: white;
}

.btn-section-usermanagement {
    margin-top: 20px;
    text-align: center;
    margin-left: 45%;
}

.reset-btn, reset-btn:hover {
    border: 1px solid #ff6000;
    background: #fff;
    color: #ff6000;
    height: 40px;
    width: 100px;
    border-radius: 8px;
}

.apply-btn, apply-btn:hover {
    border: 1px solid #ff6000;
    background: #ff6000;
    color: #fff;
    height: 40px;
    width: 100px;
    border-radius: 8px;
    margin-left: 10px;
}

.link-hand {
    cursor: pointer;
}

.img-add {
    height: 20px;
    width: 20px;
    margin-top: 4px !important;
    margin-right: 2px;
}

@media only screen and (max-width:768px) {
    .user-flex, company-flex {
        display: block;
    }

    .usermanagement-flex {
        flex: 100%;
        width: 100vw;
    }

    .usermanagement-adduser, .usermanagement-adduser:hover {
        width: 60px;
        margin-left: 20px;
    }

    .img-add {
        margin: 0 auto;
    }

    .filter-popup-usermanagement {
        top: 40%;
        right: 32%;
    }
}

.role-admin-usermanagement, .role-admin-usermanagement:hover {
    background-color: rgba(174, 255, 174, 0.5) !important;
    color: #84c54b;
    border-radius: 11px;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.role-primary-usermanagement, .role-primary-usermanagement:hover {
    background-color: rgba(208, 206, 208, 0.5) !important;
    color: gray;
    border-radius: 11px;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.role-standard-usermanagement, .role-standard-usermanagement:hover {
    background-color: rgba(255, 206, 71, 0.4) !important;
    color: #ff6000;
    border-radius: 11px;
    font-weight: 500 !important;
    font-size: 14px !important;
}

@media only screen and (max-width:630px) {
    .filter-popup-usermanagement {
        left: 0;
        right: 0;
        overflow: auto;
    }

    .usermanagement-grid-section {
        margin-right: 25px;
    }
}

@media only screen and (max-width:904px) {
    .usermanagement-searchbox {
        margin-left: -15px;
    }
}

@media only screen and (max-width:1140px) {
    .usermanagement-adduser a {
        font-size: 12px;
    }

    .usermanagement-flex {
        flex-basis: 80%;
    }
}

@media only screen and (max-width:500px) {
    .usermanagement-filter img {
        margin-left: -5px;
    }
}

@media only screen and (max-width:360px) {
    .usermanagement-filter img {
        margin-left: -8px;
    }
}
/*news carousel*/
.carousel-indicators li {
    background-color: #bbb;
}

.carousel-indicators li {
    width: 70px;
    height: 7px;
    margin-left: 20px;
}

.carousel-indicators {
    margin-left: -150px;
}

    .carousel-indicators .active {
        background-color: #ff6600;
    }

.slides {
    height: 100vh;
    width: 90vh;
}

.position-override {
    position: absolute;
    top: -2px;
    width: 400px;
    border-radius: 20px;
    left: 10vw;
    z-index: 3;
    text-align: center;
}

.success-toast-override {
    position: absolute;
    top: -2px;
    width: 400px;
    border-radius: 20px;
    left: 10vw;
    z-index: 3;
    text-align: center;
}

@media only screen and (max-width:768px) {
    .position-override {
        top: 30px;
        left: 3px;
    }
}

/*IFrame*/
.iframe {
    width: 100vw;
    height: 100vh;
}

.iframe-popup {
    position: fixed;
    height: 200px;
    width: 450px;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.iframe-close {
    position: absolute;
    top: -3px;
    right: -3px;
}

/*product seection page*/
.product-selection-page {
    font-family: Manrope;
    font-weight: 500;
    padding: 15px;
}

.top-section-ps {
    margin-top: 60px;
}

.img-logo-ps {
    width: 150px;
    height: 47px;
}

.heading-ps {
    font-size: 36px;
    font-weight: 700;
    color: #323237;
    margin-top: 30px;
}

.subheading-ps {
    font-size: 20px;
    color: #828282;
    margin-top: 24px;
}

.selected-products-ps {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.support-icon-selection {
    left: 24px;
    width: 48px;
    height: 48px;
    position: absolute;
}

.card-ps {
    margin-top: 25px;
    width: 269px;
    height: 242px;
    background-color: #fef1e6;
    border-radius: 8px;
    margin-left: 24px;
    position: relative;
}

    .card-ps .tooltiptext {
        display: none;
        width: 280px;
        height: 90px;
        background-color: #ff6000;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 14px 10px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        font-size: 12px;
        word-wrap: break-word;
        bottom: 100%;
        margin-left: 69px;
    }

    .card-ps:hover .tooltiptext {
        display: block;
        word-wrap: break-word;
    }

.card-ps-top {
    display: flex;
    margin-top: 10px;
}

.card-icon-ps {
    height: 28px;
    width: 50px;
    margin-left: 10px;
    margin-right: 30px;
}

.edit-btn-ps {
    height: 24px;
    width: 51px;
    border: 1px solid #828282;
    margin-left: 25px;
    font-size: 14px;
    border-radius: 15px;
    color: #828282;
    cursor: pointer;
}

.empty-btn-ps {
    height: 24px;
    width: 60px;
    border: none;
    pointer-events: none;
    border: none;
}

.remove-btn-ps {
    margin-left: 12px;
    height: 24px;
    width: 80px;
    border: 1px solid #828282;
    font-size: 14px;
    border-radius: 15px;
    background-color: #828282;
    color: white;
    cursor: pointer;
}

.card-content-ps {
    margin-top: 19px;
    margin-left: 16px;
}

.card-name-ps {
    font-size: 16px;
    font-weight: 600;
}

.card-price-ps {
    margin-top: 16px;
    font-size: 36px;
    font-weight: 800;
    color: #ff6000;
}

.card-price-per-ps, .card-price-per-ps span {
    font-size: 14px;
    color: #ff6000;
}

.card-subheading-ps {
    margin-top: 8px;
    font-size: 14px;
}

.discount-ps {
    font-family: Manrope;
    font-size: 20px;
    font-weight: 500;
    color: #111111;
    margin-top: 24px;
}

.card-detail-ps {
    margin-top: 8px;
    font-size: 14px;
    color: #828282;
}

.total-cost-ps {
    margin-top: 48px;
    display: flex;
}

.money-ps {
    display: flex;
    justify-content: center;
    position: relative;
}

.total-per-ps {
    margin-top: 10px;
    margin-left: 10px;
    white-space: nowrap;
}

    .total-per-ps span {
        font-size: 24px;
        font-weight: bold;
    }

.total-ps {
    font-size: 36px;
    color: #ff6000;
    font-weight: 800;
    white-space: nowrap;
}

.time-ps {
    margin-top: 14px;
    display: flex;
    width: 250px;
}

.yearly-switch-ps {
    margin-left: 10px;
}

.highlighted {
    color: #111111 !important;
}

.non-highlighted {
    font-size: 18px;
    font-weight: 600;
    color: #828282;
}

.divider-ps {
    color: #e6e6e6;
    margin: 44px 83px 0px;
}

.addon-ps {
    margin-top: 88px
}

.addon-heading-ps {
    font-size: 24px;
    font-weight: bold;
    color: #111111;
}

.addon-subheading-ps {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 500;
    color: #828282;
}

.addon-card-ps {
    margin-top: 25px;
    width: 269px;
    min-width: 269px;
    height: 255px;
    background-color: #f7f7f7;
    border-radius: 8px;
    border: solid 1px #e6e6e6;
    margin-left: 24px;
    position: relative;
}

    .addon-card-ps .tooltiptext {
        display: none;
        width: 280px;
        height: 90px;
        background-color: #ff6000;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 14px 10px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        font-size: 12px;
        word-wrap: break-word;
        bottom: 100%;
        margin-left: 69px;
    }

    .addon-card-ps:hover .tooltiptext {
        display: block;
        word-wrap: break-word;
    }

.add-btn-ps {
    height: 24px;
    width: 51px;
    border: 1px solid #828282;
    margin-left: 25px;
    font-size: 14px;
    border-radius: 15px;
    color: white;
    cursor: pointer;
    background-color: #828282;
}

/*accordions*/
.accordions-ps {
    margin-top: 30px;
}

.accordion-ps {
    background-color: #f7f7f7;
    color: #111111;
    cursor: pointer;
    padding: 18px;
    width: 78%;
    border: 1px solid #e6e6e6;
    text-align: center;
    outline: none;
    font-size: 18px;
    font-weight: bold;
    transition: 0.4s;
    margin-bottom: 24px;
    border-radius: 11px;
    position: relative;
}

.active-ps {
    background-color: #fff;
    border-bottom: none !important;
    margin-bottom: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.accordion-img {
    position: absolute;
    right: 15px;
}

.panel-ps {
    padding: 0 18px;
    display: none;
    background-color: white;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px solid #e6e6e6;
    border-top: none !important;
    margin-bottom: 40px !important;
    width: 78%;
    margin: 0 auto;
    text-align: left !important;
    padding-bottom: 24px;
    border-radius: 11px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}



/*monthly yearly switch*/

.myswitch {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.myswitch-checkbox {
    display: none;
}

.myswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
}

.myswitch-inner {
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

    .myswitch-inner:before, .myswitch-inner:after {
        float: left;
        width: 50%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .myswitch-inner:before {
        content: "";
        padding-left: 7px;
        background-color: #ff6000;
        color: #FFFFFF;
        margin-top: -4px;
    }

    .myswitch-inner:after {
        content: "";
        padding-right: 11px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
        margin-top: -4px;
    }

.myswitch-switch {
    width: 22px;
    margin: 2px;
    background: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 35px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

.myswitch-checkbox:checked + .myswitch-label .myswitch-inner {
    margin-left: 0;
}

.myswitch-checkbox:checked + .myswitch-label .myswitch-switch {
    right: 0px;
}

.subscribe-product-page {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px;
}

.banner-img {
    background-size: cover;
    width: 100%;
    height: 23vmax;
}

.subheading-subscribe {
    font-family: Manrope;
    font-size: 16px;
    font-weight: bold;
    margin-top: 24px;
}

.content-subscribe {
    font-family: Manrope;
    font-size: 14px;
    font-weight: normal;
    margin-top: 16px;
}

.benifits-ul {
    list-style: none;
    margin-top: 5px;
}

    .benifits-ul li::before {
        content: "\2022";
        color: #ff6000;
        font-size: 36px;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }

    .benifits-ul li {
        margin-top: 7px;
    }

.cost-section-subscribe {
    margin-top: 24px;
    margin-left: 20px;
}

.main-cost-subscribe {
    font-size: 36px;
    color: #ff6000;
    font-weight: 800;
}

.per-cost-subscribe {
    font-size: 14px;
    font-weight: 500;
}

.btn-section-subscribe {
    margin-top: 50px;
}

.book-a-demo-btn, .book-a-demo-btn:hover {
    border: 1px solid #ff6000;
    color: #ff6000;
    border-radius: 8px;
    line-height: 38px;
}

.subscribe-btn, .subscribe-btn:hover {
    color: white;
    border: 1px solid #ff6000;
    background-color: #ff6000;
    border-radius: 8px;
    line-height: 38px;
}

.no-content-ps {
    text-align: center;
    outline: none;
    font-size: 24px;
    margin-bottom: 100px;
    margin-top: 100px;
}

.popup-subscribe {
    position: fixed;
    height: 200px;
    width: 450px;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.popup-subscribe-heading {
    padding: 10px;
    margin-top: 15px;
    margin-left: 20px;
    font-size: 20px;
}

.popup-subscribe-btn-grp {
    position: absolute;
    bottom: 20px;
    right: 50px;
}

    .popup-subscribe-btn-grp input {
        width: 120px;
        height: 50px;
        border: 1px solid #bbb;
        margin-left: 20px;
    }

    .popup-subscribe-btn-grp .yes-btn {
        background: #ff6000;
        border: 1px solid #ff6000;
        color: white;
    }

.edit-popup {
    position: fixed;
    height: 354px;
    width: 464px;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
}

.popup-top-section-ps {
    margin: 24px 0px 0px 24px;
    display: flex;
    position: relative;
    font-size: 16px;
}

.popup-close-img-ps {
    position: absolute;
    right: 24px;
}

#feedback {
    font-size: 1.4em;
}

#selectable .ui-selecting {
    background: #FECA40;
}

#selectable .ui-selected {
    background: #F39814;
    color: white;
}

#selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}

    #selectable li {
        margin: 3px;
        padding: 0.4em;
        font-size: 1.4em;
        height: 18px;
    }

.no-docs-section-ps {
    margin: 24px 0 0 24px;
}

.docs-content-ps {
    display: flex;
    margin-top: 16px;
}

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

    .container-ps input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.checkmark-ps {
    position: absolute;
    left: 0;
    height: 40px;
    width: 60px;
    background-color: #fff;
    border-radius: 0;
    text-align: center;
    border: 1px solid #828282;
    padding-top: 8px;
    font-size: 14px;
}

.container-ps input:checked ~ .checkmark-ps {
    background-color: #fef1e6;
    border-color: #ff6000;
    color: #ff6000;
}

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

.container-ps .checkmark-ps:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.payment-option-section {
    margin-top: 60px;
    margin-left: 24px;
}

.payment-option-section-license {
    margin-top: 30px;
    margin-left: 24px;
}

.payment-monthly-ps {
    display: flex;
}

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

    .container-payment input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.checkmark-payment {
    position: absolute;
    left: 0;
    height: 40px;
    width: 131px;
    background-color: #fff;
    border-radius: 0;
    text-align: center;
    border: 1px solid #828282;
    padding-top: 8px;
    font-size: 14px;
}

.payment-monthly-ps {
    margin-top: 16px;
}

.container-payment input:checked ~ .checkmark-payment {
    background-color: #fef1e6;
    border-color: #ff6000;
    color: #ff6000;
}

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

.container-payment .checkmark-payment:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.btns-section-ps {
    display: flex;
    position: relative;
    margin-top: 50px;
}

.charge-ps {
    font-size: 32px;
    font-weight: 800;
    color: #ff6000;
    position: absolute;
    left: 30px;
}

.submit-btn-ps, .submit-btn-ps:hover {
    width: 100px;
    line-height: 28px;
    background-color: #ff6000;
    color: #fff;
    border-radius: 11px;
    position: absolute;
    right: 24px;
    text-align: center;
}

.bottom-btn-ps {
    text-align: center;
    margin-top: 31px;
}

.terms-ps {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.chkbx-ps {
    margin-top: -2px;
}

.terms-cond-ps {
    margin-left: 8px;
}

.btm-btn-ps, .btm-btn-ps:hover {
    margin-top: 49px;
    border: #ff6000;
    color: white;
    border-radius: 8px;
    line-height: 48px;
    background-color: #ff6000;
    font-size: 16px;
    font-weight: bold;
    width: 257px;
    margin-bottom: 124px;
}

.btm-btn-ps-dis, .btm-btn-ps-dis:hover {
    margin-top: 49px;
    border: #ff6000;
    color: white;
    border-radius: 8px;
    line-height: 48px;
    background-color: #ff6000;
    font-size: 16px;
    font-weight: bold;
    width: 257px;
    margin-bottom: 124px;
    opacity: 0.5;
}

.inactive {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.number-ps span {
    cursor: pointer;
}

.minus-ps, .plus-ps {
    width: 30px;
    height: 30px;
    background: #f2f2f2;
    border-radius: 4px;
    padding: 3px 5px 8px 5px;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.number-ps input {
    height: 34px;
    width: 100px;
    text-align: center;
    font-size: 26px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}


@media only screen and (max-width:768px) {
    .subscribe-btn, .subscribe-btn:hover {
        margin-top: 20px;
    }

    .accordion-ps {
        padding-right: 45px !important;
    }

    .accordion-img {
        top: 35%;
    }

    .addon-card-ps {
        margin-left: 0px;
    }
}

.vat-notice {
    position: absolute;
    top: 107%;
}

@media only screen and (max-width:545px) {
    .total-cost-ps {
        display: block;
    }

    .vat-notice {
        top: 227%;
    }

    .money-ps {
        margin: 0 auto;
    }

    .time-ps {
        margin: 0 auto;
        margin-top: 14px;
    }

    .yearly-switch-ps {
        margin-left: 15px;
    }
}

/* analytics page partial*/
.filter-list-multi {
    width: 100%;
}

.filter-ul-multi {
    position: absolute;
    background-color: #ffffff;
    color: black;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    height: auto;
    min-width: max-content;
    left: -1px;
    margin-top: 15px;
    list-style: none;
    z-index: 3;
    cursor: auto;
    padding: 0px 15px 15px 15px;
}

    .filter-ul-multi li {
        margin-top: 15px;
        cursor: pointer;
        white-space: nowrap;
    }
/* analytics page partial*/
.filter-list {
    width: 100%;
}

.filter-ul {
    position: absolute;
    background-color: #ffffff;
    color: black;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    height: auto;
    width: 205px;
    right: 1px;
    margin-top: 15px;
    list-style: none;
    z-index: 3;
    cursor: auto;
    padding-bottom: 15px;
}

    .filter-ul li {
        margin-top: 15px;
        cursor: pointer;
        white-space: nowrap;
    }

.filter-ul-month {
    position: absolute;
    background-color: #ffffff;
    color: black;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    height: 355px;
    width: 205px;
    right: 1px;
    margin-top: 15px;
    list-style: none;
    z-index: 3;
}

    .filter-ul-month li {
        margin-top: 5px;
        cursor: pointer;
    }

.filter-ul-office {
    position: absolute;
    background-color: #ffffff;
    color: black;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    height: auto;
    width: 400px;
    right: 1px;
    margin-top: 15px;
    list-style: none;
    z-index: 3;
    cursor: auto;
    padding-bottom: 15px;
}

.no-border-ss {
    border: none !important;
}

.placeholder-img-rc {
    width: 500px;
}

.placeholder-img-content {
    width: 215px;
}
/*dropdown visibility*/
.ddDashboardClickSection .ddDashboardSection {
    display: none;
}

    .ddDashboardClickSection .ddDashboardSection.show {
        display: block;
    }

/*trial popup*/
.BigButtonOrange {
    background-color: #ff6000;
    color: white;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    line-height: 200px;
}

.BigButtonBlue {
    background-color: #49B6F8;
    color: white;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    line-height: 200px;
    text-decoration: none;
}

.BigButtonOrange:hover {
    transform: scale(1.1);
}

.BigButtonBlue:hover {
    text-decoration: none;
    color: white;
    transform: scale(1.1);
}

.close-btn-popup {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 2;
}

.buy-product-btn, .buy-product-btn :hover {
    background: #ff6000;
    color: white;
    padding: 10px;
}

@media only screen and (max-width:450px) {
    .discard-popup {
        width: 90%;
    }

    .discard-popup-btn-grp {
        margin-top: 50px;
    }
}
/*trial expiry message*/
.trial-msg-container {
    width: 90%;
    text-align: center;
}

.mobile-visibility-on {
    display: none;
}

.trial-msg {
    margin-bottom: 0 !important;
    color: #ff6000;
}

.trial-msg-bottom-container {
    justify-content: center;
}

.m-l-percen {
    margin-left: 10%;
}

.yes-btn-alone, .yes-btn-alone:hover {
    background: #ff6000;
    border: 1px solid #ff6000;
    color: white;
    border-radius: 8px;
}

.no-btn-alone {
    border: 1px solid #bbb;
    border-radius: 8px;
    color: black;
}

#custom-trial-sub-btn {
    border-radius: 5px !important;
    max-height: 35px;
    margin-left: 4px;
}

@media only screen and (max-width:500px) {
    .mobile-visibility-off {
        display: none;
    }

    .mobile-visibility-on {
        display: block;
    }

    #custom-trial-sub-btn {
        margin-left: 0;
    }
}

@media only screen and (max-width:768px) {
    .tab-visibility-off {
        display: none;
    }
}

a.survey-button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    color: white;
    border: 7px solid #ff6000;
    background-color: #ff6000;
    border-radius: 7px;
    font-size: 14px;
}

.text-align-right {
    text-align: right;
}

.styleProp-block {
    display: block;
}

.styleProp-none {
    display: none;
}


#search-input, #partner-search-input {
    box-sizing: border-box;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 14px;
    padding: 14px 20px 12px 45px;
    border: solid 1px #e6e6e6;
    border-bottom: 1px solid #ddd;
}

    #search-input:focus, #partner-search-input:focus {
        outline: 0px;
        border-color: #86b7fe;
    }

#search-input-padding {
    padding: 14px 20px 12px 20px;
}

.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;
}

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

/*        .dropdown-content a::after {
            display: none;
        }*/

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

.show {
    display: block;
}

.hide {
    display: none;
}

.form-control-relative {
    position: relative;
}

.form-control-password {
    position: absolute;
    display: block;
    margin-top: 3px;
    width: 2rem;
    height: 2rem;
    line-height: 2.375rem;
    color: #aaa;
    padding: 5px;
    margin-top: -41px;
    right: 5px;
    cursor: pointer
}

.passwordicon::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 30%;
    left: 9px;
    background: url(../icons/lock-line.svg) no-repeat;
    background-size: 20px 20px;
}

.passwordicon-registration::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 30%;
    left: 9px;
    background: url(../icons/lock-line.svg) no-repeat;
    background-size: 20px 20px;
    z-index: 99999;
}

.form-control-password-changepass {
    position: absolute;
    display: block;
    margin-top: 3px;
    width: 2rem;
    height: 2rem;
    line-height: 2.375rem;
    color: #aaa;
    padding: 5px;
    margin-top: -52px;
    right: 5px;
    cursor: pointer
}

.important-notification-banner {
    padding: 10px;
    text-align: center;
    background: red;
    color: #fff;
    margin-bottom: 10px;
}

#message {
    display: none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 20px;
    margin-top: 10px;
}

    #message p {
        padding: 10px 35px;
        font-size: 18px;
    }

/* Add a green text color and a checkmark when the requirements are right */
.valid-password {
    color: green;
}

    .valid-password:before {
        position: relative;
        left: -35px;
        content: "✔";
    }

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: red;
}

/*    .invalid:before {
        position: relative;
        left: -35px;
        content: "✖";
    }*/

.validation p {
    text-align: left;
    margin: 10px 0 10px 40px;
    font-size: 14px;
}

.product-discount-container {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    background: #0078FF;
    font-size: 14px;
    margin-left: 20px;
}

/*Auth options mobile popup*/

.authOptions.wrap-phone {
    display: block;
    margin-top: 10px;
}

.authOptions .verify2FAcode {
    margin-top: 10px;
}

.formArea {
    margin-bottom: 1rem;
}
/*ends here*/

.width-70-m-auto {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.liOptionOR {
    display: inline-block;
}


.resetMfaInfo {
    color: #828282;
    font-size: 14px;
}

.reset-mfa-btn, .reset-mfa-btn:hover {
    background-color: #ff6000;
    color: #fff;
    margin-top: -8px;
}

.phone2FAFormsArea {
    width: 64%;
    max-width: 64%;
    margin: 0 auto;
}

.required-asterisk {
    margin-left: 5px;
    color: #dc3545 !important;
}

.signUpButton {
    margin-top: 20px;
}

    .signUpButton .btn.btn-block {
        margin-top: 0 !important;
    }

.signUpAllValidations span {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.btn-config-auth {
    width: 420px;
    height: 48px;
    margin: 40px 0 0;
    line-height: 2.5;
    border-radius: 8px;
    border: solid 1px #ff6600;
    background-color: #ff6600;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    outline: none !important;
}

    .btn-config-auth:hover {
        color: #fff;
    }

/* Bootstrap default override*/
.list-box {
    transition: box-shadow .3s;
}

    .list-box:hover {
        box-shadow: 0 0 11px rgba(33,33,33,.2);
    }

a:not(.product-href):hover {
    font-weight: normal;
    text-shadow: 0px 0px 1px black;
}

.popupHeader {
    border-bottom: 2px solid;
    border-radius: 20px 20px 0 0;
    padding-left: 20px !important;
    background: #eee;
}

.popupMainSection {
    border-bottom: 2px solid;
    padding-bottom: 30px !important;
}

.btn.yes-no-btn {
    width: 80px;
    height: 45px;
    border-radius: 10px;
}

.config-p.roleChangePopUp {
    height: auto !important;
    border-radius: 20px;
    width: 54%;
}

.textBold {
    font-weight: bold;
}

.roleChangePopUpFooter {
    background: #eee;
    border-radius: 0 0 20px 20px;
}

.collapsed .upImage {
    display: inline-block !important;
}

.expanded .upImage {
    display: none !important;
}

.collapsed .downImage {
    display: none !important;
}

.expanded .downImage {
    display: inline-block !important;
}

.doccolor {
    color: orange;
    text-align: center;
    font-size: x-large;
}

/* shepherd styles */
.shepherd-element {
    background: #3d3d3d;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
    outline: none;
    transition: opacity .3s, visibility .3s;
    width: 100%;
    z-index: 9999;
    max-width: 400px;
    padding: 8px;
}

.shepherd-header {
    padding: 8px;
}

.shepherd-title {
    color: darkorange;
    font-weight: 800;
}

.shepherd-content {
    color: white;
    padding: 8px;
}

.shepherd-text {
    padding: 8px;
    color: white;
}

.shepherd-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
}

.shepherd-button {
    color: white;
}

    .shepherd-button:first-child {
        background: rgba(0, 0, 0, 0);
        padding: 0px;
        font-size: 12px;
        border: 0px;
    }

    .shepherd-button:last-child {
        background-color: deepskyblue;
        color: white;
        border: none;
        outline: none;
        padding: 4px 16px;
        border-radius: 3px;
        font-weight: 600;
    }

.shepherd-arrow,
.shepherd-arrow::before {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #3d3d3d;
}

.shepherd-arrow {
    visibility: hidden;
}

    .shepherd-arrow::before {
        visibility: visible;
        content: '';
        transform: rotate(45deg);
        z-index: -1;
    }

.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
    top: -8px;
}

.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
    bottom: -8px;
}

.shepherd-element[data-popper-placement^=right] > .shepherd-arrow {
    left: -8px;
}

.shepherd-element[data-popper-placement^=left] > .shepherd-arrow {
    right: -8px;
}

.shepherd-modal-overlay-container {
    display: none;
}
/* shepherd styles ends */

.ddAddressOptions {
    width: 100% !important;
    display: block;
    border-radius: 5px;
    max-height: 250px;
    color: #495057;
    border: solid 1px #e6e6e6;
    font-family: Manrope;
    font-size: 14px;
    overflow-y: auto;
    padding-left: 5px;
}

    .ddAddressOptions > div {
        border: none;
        border-bottom: solid 1px #e6e6e6;
        border-radius: 0;
        padding: 5px;
    }

        .ddAddressOptions > div:hover {
            background-color: #e6e6e6;
            cursor: pointer;
        }
/* shepherd styles ends */


.doc-count {
    /*flex: 1;*/
}

.doc-container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 80% 20%;
    grid-auto-flow: row;
    height: 100%;
    justify-items: center;
}

.document-created {
    grid-column: 1;
    grid-row: 1 / 2;
    text-align: center;
}

.document-included {
    grid-column: 2;
    grid-row: 1 / 2;
    text-align: center;
}

.add-client-names {
    font-size: 14px !important;
}

    .add-client-names .form-control {
        padding-left: 10px;
    }

    .add-client-names .cl-name .form-control {
        padding-left: 10px;
        width: 95%;
        display: inline-block;
    }

    .add-client-names .cl-name .text-danger {
        display: inline-block;
        vertical-align: top;
        padding-left: 3px;
        font-weight: 700;
    }

.main-section-add-client .wrap-create-user-acc {
    margin-top: 20px;
}

.add-client-names .label-fname {
    display: inline-block;
    margin-bottom: 10px;
}

.noBold {
    font-weight: 500 !important;
}

.border-top-2 {
    border-top: 2px solid #ddd;
    padding-top: 20px;
}

.fs14 {
    font-size: 14px !important;
}

.addressSection {
    width: 100% !important;
    display: block;
    border-radius: 5px;
    max-height: 250px;
    color: #495057;
    border: solid 1px #e6e6e6;
    font-family: Manrope;
    font-size: 14px;
    overflow-y: auto;
    padding-left: 5px;
}

    .addressSection > div {
        border: none;
        border-bottom: solid 1px #e6e6e6;
        border-radius: 0;
        padding: 5px;
    }

        .addressSection > div:hover {
            background-color: #e6e6e6;
            cursor: pointer;
        }

.btnFindAddress {
    background-color: #ff6000;
    color: #fff;
}

    .btnFindAddress:focus {
        border: solid 1px #e6e6e6;
        box-shadow: none;
        background-color: #ff6000;
        color: #fff;
    }
/* ends here*/
.other-name-add-client {
    display: flex;
}

.gender-checkbox-add-client {
    display: flex;
}

.dob-add-client {
    display: flex;
}

.nos-add-client {
    display: flex;
    margin-right: 15px;
}

.status-add-client {
    display: list-item;
}

.title-add-client {
    display: flex;
}

.nos-add-client div {
    margin-right: 15px;
}

.add-client-input-buttons {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.address-add-client-divs {
    display: flex;
}

/*.main-section-add-client div {
    padding: 2px;
}*/

.update-button-add-client {
    background-color: #ff6000;
    color: white;
    font-size: 17px !important;
    padding-left: 12px !important;
}

.cancel-button-add-client {
    background-color: #fff;
    border: solid 1px #ff6000;
    font-size: 17px !important;
    padding-left: 12px !important;
}

.marital-status-divs-add-client {
    margin-left: 17%;
}

/*#date-of-birth {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}*/

.status-add-client .marital-status-divs-add-client .abc:checked {
    background-color: #ff6000 !important;
}

.main-heading-add-client {
    font-size: 16px !important;
    font-weight: bold !important;
    font-family: Manrope;
}

.sub-heading-add-client {
    font-size: 1rem !important;
    font-family: Manrope;
    letter-spacing: 1px;
}

.btn-add-client-main-div {
    display: flex;
}

.fs14 {
    font-size: 14px !important;
}

.form-control {
    width: 100%;
}

.usermanagement-controls-client-manager {
    width: 100%;
}

.heading-block-client-manager {
    display: flex;
}

.add-user-btn-client-manager {
    height: fit-content;
    margin-top: 40px;
}

.searchbox-client-manager {
    margin-top: 15px;
}

.add-btn-client-manager {
    width: 75%;
}

.filter-popup-usermanagement-add-client {
    position: absolute;
    right: 20px;
    top: 200px !important;
    z-index: 1;
    text-align: left;
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    margin: 5px auto 0;
    top: 28%;
}

.searchbox-filter-add-btn div {
    margin-right: 1%;
}

.archiveButton {
    font-weight: 700;
    background-color: #ff6000 !important;
    border-radius: 50%;
    color: white;
    padding: 10px;
    cursor: pointer;
}

/*client document list*/
.amend-btn-client-document-list {
    border-radius: 5px;
    background-color: #ff6000;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    float: right;
}

.create-btn-client-document-list {
    border-radius: 5px;
    background-color: #ff6000;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    float: right;
}

.buttons-client-document-list {
    text-align: center;
    background-color: #ff6000;
    color: white;
    border-radius: 5px;
    padding: 5px;
    margin: 8px;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}

.container-btn-client-document-list {
    justify-content: space-center;
}

.main-heading-client-document-list {
    font-weight: bolder;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: Manrope;
}

.subheading-client-document-list {
    font-size: 15px;
    font-family: Manrope;
}

.data-type-client-document-list {
    font-size: 15px;
    font-family: Manrope;
    letter-spacing: 1px;
    text-align: right;
    font-weight: bold;
}

.data-client-document-list {
    font-size: 15px;
    font-family: Manrope;
    letter-spacing: 1px;
    padding-left: 37px;
}

.suggestion-client-document-list {
    font-size: 14px;
    font-family: Manrope;
    letter-spacing: 1px;
}

.wrap-client-document-list row {
    margin-top: 5px;
}

.ssheading-client-document-list {
    font-size: 15px;
    font-family: Manrope;
    letter-spacing: 1px;
    font-weight: bold;
}

.label-client-document-list {
    font-size: 15px;
    font-family: Manrope;
    letter-spacing: 1px;
}

.table-client-document-list {
    text-align: center;
    margin-top: 15px;
}

.bg-container-client-document-list {
    margin-bottom: 10px;
}

.margin-col-client-document {
    margin-left: 26px;
}

.archiveButton-client-document {
    font-weight: 700;
    background-color: #ff6000;
    border-radius: 50%;
    color: white;
    padding: 10px;
}

.lock-btn-client-document-list img {
    height: 50px;
}

.btn {
    cursor: pointer;
}

.heading-data-type-client-document-list {
    font-size: 15px;
    font-family: Manrope;
    letter-spacing: 1px;
    font-weight: bold;
    padding-left: 37px;
}

/*client manager add document*/
.capacity-checkbox {
    display: flex;
}

.document-btn-list input[type="radio"] {
    display: none;
}

.document-btn-list label {
    background-color: #bbb;
    color: #111111;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 15px;
    width: 290px !important;
}

.document-btn-list input[type="radio"]:checked + label {
    background-color: #ff6000;
    color: white;
}

.document-btn-list {
    justify-content: space-between;
    gap: 30px;
    padding: 8px;
}

.dropdown-add-doc {
    border: 2px solid black;
    border-radius: 5px;
}

.document-btn-list label:hover {
    background-color: #ff6000;
    color: white;
}

.circle-button {
    width: 32px;
}
/*data entry*/
.label-fname-data-entry {
    display: inline-block;
    margin-bottom: 10px;
    text-align: end;
}

.data-entry-buttons {
    background-color: #ff6000;
    color: white;
    border: 0px;
    border-radius: 5px;
    padding: 5px;
}

/*    .data-entry-buttons:hover {
        background-color: white;
        color: #ff6000;
        border: 1px solid #ff6000;
    }*/

.down-data-entry {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.arrow {
    border: solid #ff6000;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.data-entry-paragraph {
    border: 2px solid #ff6000;
    text-align: center;
    padding: 4px;
    border-radius: 5px;
}

.add-client-names .cl-name-data-entry .text-danger {
    display: inline-block;
    padding-left: 3px;
    font-weight: 700;
}

.data-entry-required-gifts {
    padding-left: 0px;
}

.textarea-gifts-box {
    padding-right: 0px;
}

.suggestion-box-sgifts {
    font-size: 10px;
    margin-top: 15px;
    color: #ff6000;
}

.input-specific-gifts {
    padding-left: 6px;
}

.client-management-cl-name {
    cursor: pointer;
}

.document-billing {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    text-align: center;
}

.mfaValidationError {
    display: block;
}

.officeButtonsSection {
    text-align: right;
}

.officeTabBtn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 5px;
    width: 13% !important;
    font-size: 11px;
}

    .officeTabBtn.LIVE, .officeTabBtn.L {
        background-color: #ff6000 !important;
        color: #fff !important;
    }

    .officeTabBtn.Archive {
        background-color: indianred;
        color: #fff;
    }

    .officeTabBtn.addOfficeBtn {
        width: 12% !important;
    }

.officeButtonsSection > .officeTabBtn:hover {
    margin-left: 5px !important;
}

/*Select Office PopUp*/
.discard-popup-heading-selDoc {
    font-size: 14px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: left;
}

.discard-popup-selOff {
    position: fixed;
    height: fit-content;
    width: 450px;
    background: #fff;
    top: 50vh;
    left: 50vw;
    z-index: 2;
    transform: translate(-50%,-50%);
    border-radius: 8px;
    padding-bottom: 20px;
}

.discard-popup-btn-grp-selOff {
    margin: 25px;
    text-align: center;
}

    .discard-popup-btn-grp-selOff input {
        width: 120px;
        height: 50px;
        border: 1px solid #bbb;
        margin-left: 20px;
    }

    .discard-popup-btn-grp-selOff .yes-btn {
        background: #ff6000;
        border: 1px solid #ff6000;
        color: white;
    }

.dropdown-selOff-button {
    margin-left: 58px;
    width: 225px;
    background-color: white;
    border: 1px solid #bbb;
    color: black;
    border-radius: 5px;
}

.btn-check:active + .btn-secondary, .btn-check:checked + .btn-secondary, .btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #ff6000;
    border-color: #ff6000;
}

.button-copy-selOff {
    height: 40px;
    width: 95px;
    margin-left: 5px;
    background-color: #ff6000;
    color: white;
    border: 0px;
    border-radius: 5px;
    /*margin-top:23px;*/
}

.drpdwn-selOff {
    display: inline-grid;
    margin-top: 15px;
    margin-left: 60px;
    width: 50%;
}

.drpdwn-cnt-selOff {
    display: inline-flex;
}

.doc_matterRef {
    width: 35%;
}

    .doc_matterRef > input {
        width: 100%;
    }

/* Dropdown Button */
.dropbtn {
    background-color: transparent;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.menu-dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.menu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    overflow: auto;
    z-index: 1;
    right: 0;
    bottom: 0;
}

    /* Links inside the dropdown */
    .menu-dropdown-content a {
        color: #f6f6f6;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        right: 0;
        cursor: pointer;
        white-space: nowrap;
    }

    /* Links inside the dropdown */
    .menu-dropdown-content div {
        color: #f6f6f6;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        right: 0;
        cursor: pointer;
        white-space: nowrap;
    }

    /* Change color of dropdown links on hover */
    .menu-dropdown-content a:hover {
        background-color: transparent;
        right: 0;
    }

    .menu-dropdown-content a:visited {
        display: none;
    }

.is-active {
    display: block;
}

/* Show the dropdown menu on hover */
/*.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}

.menu-dropdown .menu-dropdown-content:last-child {
    right: 0;
    left: initial;
    margin-right: auto !important;*/ /* Only if you can't delete the inline margin-right applied to this element */
/*}*/
/* Change the background color of the dropdown button when the dropdown content is shown */
/*.menu-dropdown:hover .dropbtn {
    background-color: transparent;
}*/
.data-entry-edit-button {
    height: 50px;
    cursor: pointer;
}

    .data-entry-edit-button:hover {
        height: 52px;
    }

.select-editable {
    position: relative;
    background-color: white;
    border: solid grey 1px;
    width: 120px;
    height: 18px;
}

    .select-editable select {
        position: absolute;
        top: -4px;
        left: -2px;
        font-size: 14px;
        border: none;
        width: 240px;
        margin: 0;
        height: 28px;
        border-radius: 5px;
        border: 1px solid grey;
    }

    .select-editable input {
        position: absolute;
        top: 1px;
        left: 4px;
        width: 230px;
        padding: 1px;
        font-size: 12px;
        border: none;
    }

        .select-editable select:focus, .select-editable input:focus {
            outline: none;
        }

.horizontal-tab-section {
    margin-top: -25px;
    margin-left: -20px;
}

.horizontal-btn-section {
    font-size: 14px !important;
    float: right !important;
    height: 43px;
}

.btn-section-noborder {
    border: 0px !important;
}

.selected-btn-addoffice {
    border: 1px solid #ff6000 !important;
    color: #ff6000 !important;
    background-color: white !important;
}

.itemalign-add-office {
    float: left;
}


.office-container {
    border: 2px solid #ccc;
    width: 300px;
    height: 150px;
    overflow-y: scroll;
    padding-top: 15px;
}

.office-container-box {
    margin-left: -12px;
}

.filter-office-section {
    height: fit-content !important;
    padding-bottom: 15px !important;
    margin-right: 10px;
}

.office-select-drpdwn {
    width: 85%;
    font-size: 14px;
}

.usermgmt-btn-section {
    margin-top: 0px;
    margin-left: 3%;
    width: auto;
    height: 40px;
    line-height: 1.5 !important;
}

.filterClientsByOffice > label.filter-label {
    margin-left: 25px;
}

    .filterClientsByOffice > label.filter-label:first-child {
        margin-left: 0;
    }

.filterPosRelative {
    position: relative;
}

.info-btn-add-client {
    margin-left: 3%;
    height: 20px;
    width: 20px;
}

.select-all-office {
    margin-top: 20px;
    margin-bottom: -9px;
    margin-left: 13px;
}

.office-box-usermgmt {
    margin-left: -35px;
}

.default-box-usermgmt {
    margin-bottom: 34px;
}

.popup-close-btn {
    height: 20px;
    /*margin-left: 235px;*/
    /*margin-top: -40px;*/
    cursor: pointer;
    float: right;
}

.multioffice-box-width {
    width: 440px;
}

.multioffice-btn {
    margin-left: 31px;
}

.multi-office-infobtn {
    margin-top: 12px;
    margin-left: 10px;
}

.add-office-btn-comp-selected {
    border-radius: 8px !important;
    width: 107px;
    color: white !important;
    font-size: 14px;
    background-color: #ff6000 !important;
    justify-content: space-evenly;
    float: right !important;
}

.add-office-btn-comp {
    border-radius: 8px !important;
    width: 107px;
    color: #ff6000 !important;
    font-size: 14px;
    background-color: white !important;
    justify-content: space-evenly;
    float: right !important;
    border: 1px solid #ff6000 !important;
}

.officelist-btn-order {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    float: left !important;
}

.client-action-button {
    padding: 8px;
    border: 0px;
    background-color: transparent;
    cursor: pointer;
}

    .client-action-button:hover, .client-action-button:focus {
        background-color: transparent;
    }

.client-action {
    position: relative;
    display: inline-block;
}

.client-action-content {
    background-color: #f6f6f6;
    min-width: 150px;
    display: none;
    position: relative;
    right: 0;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
}

    .client-action-content a {
        color: black;
        padding: 6px 8px;
        text-decoration: none;
        display: block;
    }

.client-action a:hover {
}

.cancel-btn-structure {
    border: 1px solid #ff6000 !important;
    background-color: white !important;
    color: black !important;
}

.infobtn {
    margin-left: 5px;
    height: 20px;
    width: 20px;
}

.row-margin {
    margin-top: 4px;
}



.show-img {
    display: none;
    font-size: 11px;
}

img:hover + .show-img {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hover-container {
    position: relative;
}

.hover-target {
    position: relative;
    /*font-size: 2rem;*/
}

.hover-popup-ben, .hover-popup-add, .hover-popup-spg {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 70%;
    left: 5%;
    width: 50ch;
    margin: min(1rem, 20px);
    /*font-size: .8rem;*/
    background-color: #828282;
    border-radius: 8px;
    border-color: #828282;
    padding: 1.5em;
    z-index: 42;
    transform: scale(0);
    transition: transform 200ms ease;
    transform-origin: 8% -10px;
}

    .hover-target:hover + .hover-popup-ben,
    .hover-target:focus + .hover-popup-ben,
    .hover-popup-ben:hover {
        transform: scale(1);
    }

    .hover-target:hover + .hover-popup-add,
    .hover-target:focus + .hover-popup-add,
    .hover-popup-add:hover {
        transform: scale(1);
    }

    .hover-target:hover + .hover-popup-spg,
    .hover-target:focus + .hover-popup-spg,
    .hover-popup-spg:hover {
        transform: scale(1);
    }

    .hover-popup-ben :not(:first-child), .hover-popup-add :not(:first-child), .hover-popup-spg :not(:first-child) {
        margin-top: 1rem;
    }


    .hover-popup::before, .hover-popup-add::before, .hover-popup-spg::before {
        /* This is the triangle/arrow */
        content: '';
        position: absolute;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #fff;
        top: -10px;
    }

    .hover-popup::after, .hover-popup-add::after, .hover-popup-spg::after {
        /* This is merely here to expand the hoverable area, as a buffer between the "Hover me" text and the popup. */
        content: '';
        position: absolute;
        top: -1rem;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
    }

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: -1ms !important;
        /* Why was this here? Keep the spinner spinning ffs. */
        /* animation-iteration-count: 1 !important; */
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/*Custom Accordion*/

.custom-accordion {
    background-color: #eee;
    color: #000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom: 5px;
    border-radius: 8px;
}

    .custom-accordion.active, .custom-accordion:hover {
        background-color: #ccc;
    }

.custom-accordion-panel {
    background-color: white;
    display: none;
    overflow: hidden;
}

.custom-accordion:after {
    content: '\02795'; /* + sign */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.custom-accordion.active:after {
    content: "\2796"; /* - sign */
}

.tab-button {
    display: inline-block;
    white-space: nowrap;
}

#button-container {
    max-width: 1268px; /* Set the maximum width of the parent div */
    overflow: hidden;
    white-space: nowrap;
}

.menu {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px;
    position: relative;
}

.menu-buttons {
    display: flex;
    gap: 0.5px;
    flex-wrap: nowrap;
    overflow-x: hidden; /* Hide the horizontal overflow */
}

.tab-menu-dropdown {
    display: none;
}

.tab-arrow {
    font-size: 20px;
    cursor: pointer;
    margin: 0 10px;
    color: #ff6000;
    outline: none !important;
}


.product-card-selected {
    background: #F9F9F9;
    border: solid 1px #ff6600;
}

.product-card:hover {
    cursor: pointer;
    background: #F9F9F9;
    border: solid 1px #ff6600;
}

.product-card-row {
    display: flex;
    align-items: center;
}

.flex-col-90 {
    flex: 0 0 90%;
}

.flex-col-10 {
    flex: 0 0 10%;
}

@media screen and (max-width: 768px) {
    .menu-buttons {
        display: none;
    }

    .tab-menu-dropdown {
        display: block;
    }

    #mobile-menu {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
    }
}

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

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 cells in a row */
    column-gap: 25px;
    row-gap: 25px;
}

.grid-item > * {
    width: 100%; /* Ensure children take up full width */
    height: 100%; /* Ensure children take up full height */
}

.grid-item img {
    width: 80%;
}