ngx-guided-tour { .guided-tour-user-input-mask { position: fixed; top: 0; left: 0; display: block; height: 100%; width: 100%; max-height: 100vh; text-align: center; opacity: 0; } .guided-tour-spotlight-overlay { position: fixed; box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5); border-radius: 44px; /*custom add*/ } .tour-orb { position: fixed; width: 20px; height: 20px; border-radius: 50%; .tour-orb-ring { width: 35px; height: 35px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse 2s linear infinite; &:after { content: ''; display: inline-block; height: 100%; width: 100%; border-radius: 50%; } } @keyframes pulse { from { transform: translate(-50%, -50%) scale(0.45); opacity: 1.0; } to { transform: translate(-50%, -50%) scale(1); opacity: 0.0; } } } .tour-step { position: fixed; &.page-tour-step { // max-width: 400px; max-width: 1043px; /*custom add*/ width: 50%; left: 50%; top: 50%; border-radius: 5px; transform: translate(-50%, -50%) } &.tour-bottom, &.tour-bottom-right, &.tour-bottom-left { .tour-arrow::before { position: absolute; } .tour-block { margin-top: 10px; } } &.tour-top, &.tour-top-right, &.tour-top-left { margin-bottom: 10px; .tour-arrow::before { position: absolute; bottom: 0; } .tour-block { margin-bottom: 10px; } } &.tour-bottom , &.tour-top { .tour-arrow::before { // transform: translateX(-50%); // left: 50%; /*custom add*/ transform: scale(2); left: 494px; } /*custom add*/ margin-top: 20px; margin-left: 10px; } &.tour-bottom-right, &.tour-top-right { .tour-arrow::before { transform: translateX(-100%); left: calc(100% - 5px); } } &.tour-bottom-left, &.tour-top-left { .tour-arrow::before { left: 5px; } } &.tour-left { .tour-arrow::before { position: absolute; left: 100%; transform: translateX(-100%); top: 5px; } .tour-block { margin-right: 10px; } } &.tour-right { margin-left: 10px; /*custom add*/ .tour-arrow::before { transform: scale(1.5); /*custom add*/ position: absolute; left: 0; top: 5px; } .tour-block { margin-top: -15px; /*custom add*/ margin-left: 10px; } } .tour-block { // padding: 15px 25px; /*custom add*/ padding: 15px 25px 15px 0px; max-height: 348px; border-radius: 5px; } .tour-title { // font-weight: bold !important; // padding-bottom: 20px; /*custom add*/ font-weight: lighter !important; font-size: 16px !important; padding: 28px 74px 0px 65px; overflow: auto; text-align: left; color: #212121; line-height: 26px; white-space:pre-line; height: 210px; } h3.tour-title { font-size: 20px; } h2.tour-title { font-size: 30px; } .tour-buttons { overflow: hidden; // clearfix padding: 10px 70px 30px 65px; /*custom add*/ button.link-button { padding-left: 0; font-size: 15px; font-weight: bold; max-width: none !important; cursor: pointer; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; line-height: 1.5; background-color: transparent; position: relative; outline: none; padding: 0 15px; -webkit-appearance: button; } button.skip-button.link-button { // padding-left: 0; border-left: 0; /*custom add*/ padding: 0; float: right; width: 133px; height: 40px; border: 1px solid #129D99; background: #FFFFFF 0% 0% no-repeat padding-box; color: #129D99; } .next-button { cursor: pointer; // border-radius: 1px; // float: right; border: none; outline: none; // padding-left: 10px; // padding-right: 10px; /*custom add*/ float: left; padding: 10px 0px;; width: 101px; background: #129D99 0% 0% no-repeat padding-box; } /*custom add*/ button.skip-button.link-button, .next-button { font-size: 14px; font-weight: bold; letter-spacing: 0.35px; height: 40px; box-shadow: 0px 3px 6px #1E202029; border-radius: 30px; } } /*custom add*/ .argos-present-img { background: url("../../../assets/splash/assets/img/argos\ present.png") no-repeat; min-width: 176px; height: 220px; position: relative; top: 110px; left: -85px; border-top: none; } } }