.clBrand {
    color: #5856D6;
}

.clSecondary {
    color: #4F378A;
}

.bgBrand {
    background-color: #5856D6;
}

.bgSecondary {
    background-color: #4645AB;
}

.mrgN15 {
    margin-right: -15px;
}

#reseller {
    background-image: url(../imgResources/reseller.jpg);
}

.aiLogo {
    width: 24px;
    height: 24px;
    margin: -10px 6px 0 6px;
}

.reseller .bgInnitial {
    background-color: black;
}

.reseller .bgInnitial:before {
    background-image: url(../img/reseller.png);
    opacity: 0.06;
}

.reseller .parallaxBG2nd:before {
    background-image: url(../img/uxDesign/reseller/bg2.jpg);
    opacity: 1;
}

.reseller .parallaxBG4th:before {
    background-image: url(../img/uxDesign/reseller/bg5c.png);
    opacity: 1;
}

.iconTime {
    background-image: url(../img/iconCalendarGray.svg);
}

.iconScreen {
    background-image: url(../img/iconScreenGray.svg);
}

.iconPartcipant {
    background-image: url(../img/iconPartcipant.svg);
}

.reseller #lookNfeel .w16x9 {
    position: relative;
    border: 0;
    background-color: transparent;
    background-image: url(../img/uxDesign/reseller/samplePage.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.prjSample img {
    width: 100%;
}

.reseller #userFlow {
    background-color:#ad9506;
}

.reseller #interview {
    background-image: url(../img/uxDesign/reseller/BGuserInterview.png);
    background-size: cover!important;
}

.uxd.reseller #interviewNsurvey p.clWhite {
    color: #ffffff;
}

.container {
    display: table;
}

.container .col-md-6 {
    display: table-cell;
    border: 1px solid gray;
}

#problemsChallenges .col-md-6.xsHide {
    position: relative;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 15px;
}

#problemsChallenges .col-md-6.xsHide:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.50);
    top: 10px;
    left: 40px;
}

#problemsChallenges p.mobLnd.mobCh {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}

#problemsChallenges p.mobLnd.mobCh:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.50);
    top: 6px;
    left: 10px;
}

.productionRedlines, .mockups, .persona, .wireframes, .usabilityTesting, #informationArchitecture .imageHolder, #empathyMapping .imageHolder, #userJourney .imageHolder, .reseller #interviewNsurvey, .reseller #wireframes, #userFlow .fullHeight50 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#empathyMapping .imageHolder {
    background-image: url(../img/uxDesign/reseller/EmpathyMap.png);
}

#userJourney .imageHolder {
    background-image: url(../img/uxDesign/reseller/UserJourney.png);
}

.carousel-inner .item .card {
    margin-left: auto;
    margin-right: auto;
    width: 86%;
}

.carousel-inner .item .imageHolder {
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

@media only screen and (min-width: 768px) {
    .carousel-inner .item:first-child .persona {
        background-image: url(../img/uxDesign/reseller/persona01.png);
    }

    #uxProcess {
        background-image: url(../img/uxDesign/reseller/uxProcess.png);
    }

    #informationArchitecture .imageHolder {
        background-image: url(../img/uxDesign/reseller/informationArchitecture.png);
        background-size: contain;
    }

    #userFlow .fullHeight50 {
        background-image: url(../img/uxDesign/reseller/userFlow.png);
    }
    .carousel-inner .item:nth-child(2) .persona {
        background-image: url(../img/uxDesign/reseller/persona02.png);
    }

    #researchSynthesis .fullHeight50 {
        background-image: url(../img/uxDesign/reseller/researchSynthesis.png);
    }
}



@media only screen and (max-width: 767px) {
    .carousel-inner .item:first-child .persona {
        background-image: url(../img/uxDesign/reseller/persona01XS.png);
    }

    #uxProcess {
        background-image: url(../img/uxDesign/reseller/uxProcessSM.png);
    }
    #informationArchitecture .imageHolder {
        background-image: url(../img/uxDesign/reseller/informationArchitectureSM.png);
        background-size: contain;
    }

    #userFlow .fullHeight50 {
        background-image: url(../img/uxDesign/reseller/userFlowSM.png);
    }
    .carousel-inner .item:nth-child(2) .persona {
        background-image: url(../img/uxDesign/reseller/persona02XS.png);
    }

    #researchSynthesis .fullHeight50 {
        background-image: url(../img/uxDesign/reseller/researchSynthesisXS.png);
    }
}

/*.carousel-inner .item:first-child .persona {
    background-image: url(../img/uxDesign/WFCTO/Persona01.png);
}*/

/*.carousel-inner .item:nth-child(2) .persona {
    background-image: url(../img/uxDesign/WFCTO/Persona02.png);
}*/

.carousel-inner .item:first-child .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR01.png);
}

.carousel-inner .item:nth-child(2) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR02.png);
}

.carousel-inner .item:nth-child(3) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR03.png);
}

.carousel-inner .item:nth-child(4) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR04.png);
}

.carousel-inner .item:nth-child(5) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR05.png);
}

.carousel-inner .item:nth-child(6) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR06.png);
}

.carousel-inner .item:nth-child(7) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR07.png);
}

.carousel-inner .item:nth-child(8) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR08.png);
}

.carousel-inner .item:nth-child(9) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR09.png);
}

.carousel-inner .item:nth-child(10) .productionRedlines {
    background-image: url(../img/uxDesign/reseller/PR10.png);
}

.carousel-inner .item:first-child .mockups {
    background-image: url(../img/uxDesign/reseller/mockup01.png);
}

.carousel-inner .item:nth-child(2) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup02.png);
}

.carousel-inner .item:nth-child(3) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup03.png);
}

.carousel-inner .item:nth-child(4) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup04.png);
}

.carousel-inner .item:nth-child(5) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup05.png);
}

.carousel-inner .item:nth-child(6) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup06.png);
}

.carousel-inner .item:nth-child(7) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup07.png);
}

.carousel-inner .item:nth-child(8) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup08.png);
}

.carousel-inner .item:nth-child(9) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup09.png);
}

.carousel-inner .item:nth-child(10) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup10.png);
}

.carousel-inner .item:nth-child(11) .mockups {
    background-image: url(../img/uxDesign/reseller/mockup11.png);
}

/*.carousel-inner .item:nth-child(7) .mockups {
    background-image: url(../img/uxDesign/reseller/Mockup_cmsLoan_RiskRating.png);
}

.carousel-inner .item:nth-child(8) .mockups {
    background-image: url(../img/uxDesign/reseller/Mockup_cmsLoan-HedgeTracker.png);
}

.carousel-inner .item:nth-child(9) .mockups {
    background-image: url(../img/uxDesign/reseller/Mockup_cmsLoan_MaturingLoans.png);
}

.carousel-inner .item:nth-child(10) .mockups {
    background-image: url(../img/uxDesign/reseller/Mockup_cmsProperty_PropertyMaster.png);
}

.carousel-inner .item:nth-child(11) .mockups {
    background-image: url(../img/uxDesign/reseller/Mockup_cmsReferenceData.png);
}

.carousel-inner .item:nth-child(12) .mockups {
    background-image: url(../img/uxDesign/reseller/Mockup_cmsReferenceData02.png);
}*/

.carousel-inner .item:first-child .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe01.png);
}

.carousel-inner .item:nth-child(2) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe02.png);
}

.carousel-inner .item:nth-child(3) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe03.png);
}

.carousel-inner .item:nth-child(4) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe04.png);
}

.carousel-inner .item:nth-child(5) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe05.png);
}

.carousel-inner .item:nth-child(6) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe06.png);
}

.carousel-inner .item:nth-child(7) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe07.png);
}

.carousel-inner .item:nth-child(8) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe08.png);
}

.carousel-inner .item:nth-child(9) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe09.png);
}

.carousel-inner .item:nth-child(10) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe10.png);
}

.carousel-inner .item:nth-child(11) .wireframes {
    background-image: url(../img/uxDesign/reseller/wireframe11.png);
}

.carousel-inner .item:first-child .usabilityTesting {
    background-image: url(../img/uxDesign/reseller/UsabilityTest01.png);
}

.carousel-inner .item:nth-child(2) .usabilityTesting {
    background-image: url(../img/uxDesign/reseller/UsabilityTest02.png);
}

.carousel-inner .item:nth-child(3) .usabilityTesting {
    background-image: url(../img/uxDesign/reseller/UsabilityTest03.png);
}

.carousel-inner .item:nth-child(4) .usabilityTesting {
    background-image: url(../img/uxDesign/reseller/UsabilityTest04.png);
}

.carousel-inner .item:nth-child(5) .usabilityTesting {
    background-image: url(../img/uxDesign/reseller/UsabilityTest05.png);
}

#modalUserflow .dspTable {
    left: 0;
}

#modalUserflow .modal-dialog {
    width: 100%;
}

#modalUserflow .modal-content img {
    width: 100%;
}

.carousel-indicators {
    bottom: -45px!important;
}

.carousel-indicators.bgLight .active {
    background-color: #0071BC;
}

.carousel-indicators.bgLight li {
    border: 2px solid #0071BC;
}

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

.carousel-indicators.bgDark li {
    border: 2px solid #fff;
}

.carousel-indicators, .carousel-control {
    z-index: 6;
}

.carousel-control.right, .carousel-control.left {
    background: transparent;
    opacity: 1;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
}

.carousel-control.left {
    background-image: url(../img/arwLeftBlue.svg)
}

.carousel-control.right {
    background-image: url(../img/arwRightBlue.svg)
}

.prototypeLink {
    position: absolute;
    width: 100%;
    margin: 0 -15px;
    text-align: center;
}

.WFcolorBGRedWF {
    background-color: #b80826;
}

.WFtopBanner {
    width: 100%;
    height: 48px;
    padding: 0 20px;
}

.WFtopBanner .logo {
    background-image: url("../img/uxDesign/reseller/wfLogoType.svg");
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
}

.loginPage {
    background-color: #f2f2f2;
    padding: 30px 0;
}

.loginBox {
    background-color: #fff;
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    border-radius: 3px;
    border: 1px solid #cccccc;
}

.bgVideo {
    position: fixed;
    right: 0;
    bottom: 0;
}

#resellerVideo01 {
    max-width: 100%;
    min-height: 100%;
}

#resellerVideo02.smHide.xsHide {
    width: 100%;
}

#resellerVideo02.lgHide.mdHide {
    height: 100%;
}

#prototypeLogin {
    background-image: url(../img/uxDesign/reseller/prototypeLogin.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.spltoolsLogo {
    display: flex;
    position: absolute;
    z-index: 15;
    width: 130px;
    height: 60px;
    bottom: 10px;
    right: 10px;
}

.spltoolsLogo .figma {
    left: 0;
}

.spltoolsLogo .axure {
    left: 70px;
}

#ctoStructure {
    background-image: url(../img/uxDesign/reseller/moduleStructure.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#empathyMapping .row .bgLightGray.pad30 {
    border-radius: 4px;
}

.reseller #userFlow {
    background-color: #FFFFFF;
}

#heatMap .imageHolder {
    background-image: url(../img/uxDesign/reseller/heatMap.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

.methodContainer .method {
    background-color: #e6e6e6;
}

.outcomeContainer .outcome div:first-child {
    background-color: #5856D6;
}

.methodContainer .material-symbols-outlined {
    color: #5856D6;
}

#interview .cc2 ul li, #researchSynthesis ul li {
    list-style: inside;
}

.checkBoxChecked, .checkBoxBlank {
    position: relative;
    padding-left: 32px;
    font-size: 24px;
    font-weight: 600;
}

.checkBoxChecked:before, .checkBoxBlank:before {
    content: "";
    position: absolute;
    background-size: contain;
    left: 0;
    top: 6px;
    width: 24px;
    height: 24px;
}

.checkBoxChecked:before{
    background-image: url(../img/uxDesign/reseller/checkBoxChecked.png);
}

.checkBoxBlank:before{
    background-image: url(../img/uxDesign/reseller/checkBoxBlank.png);
}