@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@font-face {
    font-family: 'segoe_uibold_italic';
    src: url('../fonts/segoe_ui_bold_italic-webfont.woff2') format('woff2'),
         url('../fonts/segoe_ui_bold_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'segoe_uibold';
    src: url('../fonts/segoe_ui_bold-webfont.woff2') format('woff2'),
         url('../fonts/segoe_ui_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'segoe_uiitalic';
    src: url('../fonts/segoe_ui_italic-webfont.woff2') format('woff2'),
         url('../fonts/segoe_ui_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'segoe_uiregular';
    src: url('../fonts/segoeui-webfont.woff2') format('woff2'),
         url('../fonts/segoeui-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'segoe_uiitalic';
    src: url('../fonts/segoeuii-webfont.woff2') format('woff2'),
         url('../fonts/segoeuii-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'segoe_uilight';
    src: url('../fonts/segoeuil-webfont.woff2') format('woff2'),
         url('../fonts/segoeuil-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'segoe_uibold_italic';
    src: url('../fonts/segoeuiz-webfont.woff2') format('woff2'),
         url('../fonts/segoeuiz-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'segoe_uiblack';
    src: url('../fonts/seguibl-webfont.woff2') format('woff2'),
         url('../fonts/seguibl-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'segoe_uilight_italic';
    src: url('../fonts/seguili-webfont.woff2') format('woff2'),
         url('../fonts/seguili-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
:root {
    --nexus-white: #ffffff;
    --nexus-black: #000000;
    --nexus-green: #00ff00;
    --nexus-green-shade: #33ff33;
    --nexus-light-green: #66ff66;
    --nexus-lightgreen-shade: #9aff9a;
    --nexus-lighter-green: #cdffcd;
    --nexus-dark-gray: #4d4d4d;
    --nexus-darkgray-shade: #707070;
    --nexus-light-gray: #949494;
    --nexus-lightgray-shade: #b8b8b8;
    --nexus-lighter-gray: #dcdcdc;
    --nexus-blue: #5d36ff;
    --nexus-strong-blue: #2573b4;
    --nexus-purple: #373575;

    --psp-blue: #008ED3;
    --psp-yellow: #FFAB0D;
    --psp-red: #B40000;
    --psp-dark-blue: #1B2D9C;
    --psp-blue-shade: #043663;
    --psp-light-blue: #005DAB;
    --psp-voilet: #864fbc;
    --psp-dark-orange: #F08134;
    --psp-blue-tint: #BFD7EE;
    --psp-light-gray: #8D8D8D;
    --psp-light-orange: #F9E9E4;
    --psp-dark-blue-shade: #eff3ff;
    --psp-light-purple: #f1f3f5;
    --psp-purple: #adb3e8;
    --psp-dark-gray: #707070;
    --psp-half-white: #F2EFFA;
    --psp-light-blue: #dee2e6;
    --psp-lightgray-shade: #ddd;
    --psp-dark-purple: #724FBC;
    --psp-black-shade: #666;
    --psp-lightwhite-shade: #e5e7eb;
    --psp-darkblue-shade: #283c50;
    --psp-white-shade: #f6f2ff;
    --psp-darkgray-shade: #f2f6ff;
    --psp-lightblack-shade: #333;
    --psp-font-regular: 'lato', Arial,sans-serif;
    --psp-font-bold: 'lato_uibold', Arial,sans-serif;
    --psp-font-light: 'lato_uilight',Arial,sans-serif;
    --psp-font-black: 'lato_uiblack',Arial,sans-serif;
    --menu-width: 260px;
    --min-menu-width: 95px;
    --nav-height: 80px;
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    font-family: var(--psp-font-regular);
    font-size: 16px;
    line-height: 2;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
.h-100 {
    background-color: var(--nexus-lighter-gray);
}
body {
    font-family: var(--psp-font-regular);
    font-size: 1rem;
    line-height: 2;
    color: var(--nexus-dark-gray);
    padding: 0;
    margin: 0;
    font-weight: 400;
    background: var(--psp-light-purple);
    background-repeat: no-repeat;
}
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 5px;
}

::-webkit-scrollbar{
    width: 5px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb{
    background-color: #828080;
    border: 2px solid #828080;
    border-radius: 5px;
}

#nav-pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.btn-blue {
    background-color: #008ed3;
}
.page-link:hover {
    background-color: var(--nexus-blue);
    color: var(--nexus-white);
}
.bg-white {
    background-color: var(--nexus-white);
}
.color-orange {
    color: var(--psp-dark-orange);
}
.color-gray {
    color: var(--nexus-dark-gray);
}
.color-black {
    color: var(--nexus-black) !important;
}
.w-60 {
    width: 60%!important;
}
.number-purple, .text-purple {
    color: var(--nexus-purple);
}
.font-size-18 {
    font-size: 17.3px;
}
.reset-icon-btn {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 12px;
    border: none;
    background: none;
    outline: none;
    margin-top: 4px;
}
.reset-text {
    font-size: 16px;
    color: var(--nexus-blue);
    line-height: 1.4;
    font-weight: 600;
}
.reset-revolve-icon {
    margin-bottom: 8px;
}
.reset-btn, .btn-blue, .setup-form-btn {
    display: inline-block;
    position: relative;
    cursor: pointer;
    background: var(--nexus-light-gray);
    color: white;
    padding: 0px 30px;
    z-index: 0;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}
.setup-form-btn {
    background: var(--nexus-green) !important;
    min-height: 44px;
}
.reset-btn:before, .btn-blue:before, .setup-form-btn:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--nexus-green);
    transform: scaleX(0);
    transform-origin: 0 50%;
    border: none;
    border-radius: 5px;
    transition: transform .5s ease-out;
    padding: 7px 20px;
    text-decoration: none;
}
.setup-form-btn:before {
    background: var(--nexus-light-green);
}
.extra-padding-btn {
    padding: 5px 30px;
}
.topNav-btn {
    background-color: var(--psp-dark-purple);
    color: var(--nexus-white);
    font-weight: bold;
    border: none;
    outline: none;
    padding: 2px 15px;
    border-radius: 10px;
}
button.filter-download-data {
    background: none;
    outline: none;
    border: none;
    display: flex;
    gap: 5px;
    align-items: center;
    padding-left: 0;
}
.filter-download-data .download-text {
    color: var(--nexus-blue);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}
.rating-phone-icon path {
    fill: var(--nexus-blue);
}

.reset-btn:hover:before, .btn-blue:hover:before, .setup-form-btn:hover:before {
    transform: scaleX(1);
}
#margin-btm {
    margin-bottom: 30px;
}
.block-title {
    color: var(--nexus-dark-gray);
    font-weight: 700;
    font-size: 18px;
}
.common-select-fields {
    background-color: var(--nexus-lighter-gray);
    padding: 8px 18px;
    width: 24%;
    border-radius: 10px;
    border: none;
    outline: none;
    margin-right: 0 !important;
}
.tbl-content {
    background-color: var(--nexus-white);
    border: 1px solid var(--nexus-lighter-gray);
    border-collapse: collapse;
}
.table-head {
    background-color: var(--nexus-lighter-gray) !important;
}
.table-data tr, .table-data tr td {
    background-color: var(--nexus-white) !important;
}
table tr th {
    vertical-align: top;
    padding: 10px 8px 10px 15px;
    border: 1px solid var(--nexus-white);
}
table tr td {
    padding-left: 15px;
    border: 1px solid var(--nexus-lighter-gray);
}
#call_phrase_report {
    display: flex;
    gap: 20px;
}
form.summary-form {
    display: flex;
    gap: 15px;
}
/* style for main page content start */
.main-page{
    width: 100%;
    display: block;
    position: relative;
    background-color: var(--nexus-lighter-gray); /* changed background color */
}
.main-content{
    width: 100%;
    display: block;
    position: relative;
    padding-left: calc(var(--min-menu-width) + 60px);
    padding-right: 50px;
    transition: all 0.5s ease-in-out;
}
.main-page.menu-open .main-content{
    padding-left: calc(var(--menu-width) + 50px);
}
.btn-primary {
    background-color: var(--psp-blue);
    color: var(--nexus-white);
    border-radius: 35px;
    border: 1px solid var(--psp-blue);   
    padding: 15px 35px;
    font-size: 1.2rem;
    font-family: var(--psp-font-regular);
    line-height: 1.5;
}
.btn-primary:hover{
    color: var(--psp-blue);
    border: 1px solid var(--psp-blue);  
    background-color: var(--nexus-white); 
}
.text-right{
    text-align: right;
}
.text-center {
    text-align: center;
}
.agent-view-blocks {
    background-color: var(--nexus-white);
    border-radius: 25px;
    margin: 20px 0px;
}
.initial-text, .default-report-view-adm {
    background-color: var(--nexus-lighter-gray);
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}
#activity-data, #agent-activity-data {
    margin-top: 15px;
    background-color: var(--psp-light-purple);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    gap: 140px;
    display: none;
}
.block-content {
    background-color: var(--nexus-white);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    padding: 15px 25px;
}
}
.trends-content, .daily-report-content {
    background-color: var(--nexus-white);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.csd-template-content {
    background-color: var(--nexus-white);
    margin: 10px;
    line-height: 1.4;
}
#csd-template-table table tr.tbl-column th, #csd-template-table table tr.tbl-column td {
    padding-left: 15px;
}
.leads-content {
    background-color: var(--nexus-white);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.lead-report-select, .preferred-contacts-select, .lead-summary-select, .mkt-action-select-field, #template-select-field {
    background-color: var(--nexus-lighter-gray);
}
.daily-report-date-field, #report-select-field, #call-rating-select-field, .call-rating-text-field,
#trends-select-field, .call-scoring-date-field, #agent-trends-select-field  {
    border: 1px solid var(--nexus-light-gray);
}
.template-form, form.daily-report-form, form.weekly-report-form, form.monthly-report-form, .lead-status form, #activity-data .data-split, .common-form {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    min-height: 44px;
}
.admin-work-flow .content-blocks {
    background-color: var(--psp-light-purple);
    padding: 20px;
}
/* style for main page content end */


/* Style for Header Logo Page */
.header-logo {
    background-color: var(--psp-light-purple);
    height: 120px;
    padding: 20px 0px;
}
.header-logo img {
    width: 22%;
}

/* Style for Header Logo Page end */
#nav-filter-result {
    display: none;
}







/* Media Queries */
@media only screen and (min-width: 300px) and (max-width: 576px) {
    .main-content {
        padding-left: calc(var(--min-menu-width) + 40px);
    }
}

.multi_option{
    background-color: var(--psp-light-purple);
    padding: 5px 15px;
    border-radius: 10px;
    border: none;
    outline: none;
}
.vscomp-ele:focus{
    border-color: #86b7fe!important;
    outline: 0!important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25)!important;
}
.vscomp-wrapper:not(.has-value) .vscomp-value {
    opacity: unset!important; 
}
.vscomp-toggle-button {
    background-color: unset!important; 
    border: unset!important; 
    padding: unset!important;
    color: var(--bs-body-color);
    font-size: 0.95rem!important;
    font-weight: 400;
    line-height: 1.5;
}
.vscomp-wrapper.focused .vscomp-toggle-button, .vscomp-wrapper:focus .vscomp-toggle-button {
    box-shadow: unset!important; 
    padding: 0px!important; 
}
.vscomp-arrow {
    width: unset!important;
}
.vscomp-dropbox-container {
    min-width: 200%!important;
    z-index: 2;
} 
.hidden{
    display: none;
}
.fleft {
    float: left;
}
.ml-20{
    margin-left:20px
}
.no-decor{
    text-decoration: none;
}




/* System Setup Style starts */
.agent-admin-content {
    margin-bottom: 20px;
    background-color: var(--nexus-white);
    padding: 20px;
    border-radius: 15px;
    line-height: 1.5;
    color: var(--nexus-black);
    text-align: center;
}
.system-setup-text {
    font-size: 17px;
    color: var(--nexus-green);
}
.agent-admin-wrap {
    display: block;
    margin: auto;
    max-width: 60%;
}
.system-setup-title {
    padding-top: 20px;
    padding-bottom: 10px;
    font-weight: bold;
}
/* System Setup Style ends */

.initial-text-load {
    padding-right: 20px;
}