.twbb-ps-box {
border: 1px solid #323A4533;
border-radius: 6px;
padding: 19px;
font-family: Open Sans, sans-serif;
color: #323A45;
max-width: 324px;
background-color: #ffffff;
margin: 15px 0;
}
.twbb-ps-box__title {
font-size: 14px;
line-height: 20px;
font-weight: bold;
letter-spacing: 0.12px;
margin-bottom: 15px;
}
.twbb-ps-box__option-title {
font-size: 12px;
line-height: 18px;
font-weight: 600;
margin-bottom: 10px;
margin-left: 3px;
color: #323A4580;
}
.twbb-ps-main__description {
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
margin-left: 3px;
}
.twbb-ps-box__generated-site-setting {
margin-bottom: 18px;
}
.twbb-ps-color-box {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
box-sizing: border-box;
}
.twbb-ps-color-box.white-color {
border: 1px solid #323A4521;
}
.twbb-ps-color-box:not(.white-color) {
border: 1px solid #ffffff;
}
.twbb-ps-color-box div {
box-sizing: border-box;
}
.twbb-ps-color-box.ps-active-style div {
position: absolute;
width: 35px;
height: 35px;
border-width: 1px;
border-style: solid;
border-radius: 50%;
top: -6px;
left: -6px;
background: url(//journeybuildersinc.com/wp-content/plugins/tenweb-builder/assets/editor/images/checkmark_icon.svg) no-repeat center;
background-size: 18px;
}
.twbb-ps-box__static-options {
display: flex;
flex-wrap: wrap;
}
.twbb-ps-color-options {
gap: 12px;
}
.twbb-ps-font-options {
gap: 4px;
align-items: center;
}
.twbb-ps-font-box {
line-height: 0;
padding: 2px;
border: 1px solid #ffffff;
box-sizing: border-box;
display: inline-block;
}
.twbb-ps-font-box div {
font-size: 12px;
line-height: 18px;
padding: 4px 8px;
background-color: #2160B50A;
display: inline-block;
}
.twbb-ps-font-box.ps-active-style {
border-color: #2160B5;
border-radius: 2px;
}
.twbb-ps-box__static-options div {
cursor: pointer;
}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");
.twbb-ps-settings::-webkit-scrollbar {
width: 2px;
}
.twbb-ps-settings::-webkit-scrollbar-track {
background-color: darkgrey;
}
.twbb-ps-settings::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.twbb-ps-main {
-webkit-transition: right 0.5s ease-in;
-moz-transition: right 0.5s ease-in;
-o-transition: right 0.5s ease-in;
transition: right 0.5s ease-in;
box-sizing: border-box;
position: fixed;
z-index: 2147483648;
right: 0;
top: 0;
bottom: 0;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
color: #323A45;
font-family: Open Sans, sans-serif;
width: 426px;
display: flex;
justify-content: flex-end;
border: 0;
}
.twbb-ps-main::-webkit-scrollbar {
width: 1px;
}
.twbb-ps-main::-webkit-scrollbar-track {
background: white;
}
.twbb-ps-main::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
}
.twbb-ps-container {
width: 366px;
}
.twbb-ps-main.closed {
-webkit-transition: right 0.5s ease-in-out;
-moz-transition: right 0.5s ease-in-out;
-o-transition: right 0.5s ease-in-out;
transition: right 0.5s ease-in-out;
width: 550px;
right: -366px;
}
.twbb-ps-settings {
background-color: #F9F9F9;
padding: 20px 20px 1px 20px;
border: 1px solid #323A4533;
border-bottom: 0;
}
.twbb-ps-main__title {
font-size: 16px;
line-height: 28px;
font-weight: 800;
margin-bottom: 4px;
align-items: center;
display: flex;
gap: 4px;
}
.twbb-ps-main__title span {
background-image: url(//journeybuildersinc.com/wp-content/plugins/tenweb-builder/includes/PreviewSidebar/assets/images/emoji_star.png);
width: 20px;
height: 20px;
display: inline-block;
background-size: contain;
}
.twbb-ps-button {
width: inherit;
position: sticky;
bottom: 0;
right: 0;
background-color: white;
padding: 15px 51px;
border: 1px solid #323A4533;
}
.twbb-ps-button a {
font-size: 14px;
line-height: 20px;
width: 260px;
height: 40px;
color: #FFFFFF;
background-color: #2160B5;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.twbb-ps-button a:hover {
text-decoration: none;
opacity: 0.8;
cursor: pointer;
}
.twbb-ps-minimizer {
background-image: url(//journeybuildersinc.com/wp-content/plugins/tenweb-builder/includes/PreviewSidebar/assets/images/minimizer.svg);
background-repeat: no-repeat;
background-position: center;
background-color: #323A45;
border-radius: 6px 0 0 6px;
width: 60px;
height: 60px;
position: sticky;
top: calc( 50% - 30px );
cursor: pointer;
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
right: 366px;
}
.twbb-ps-main .twbb-ps-minimizer p {
display: none;
}
.twbb-ps-main.closed .twbb-ps-minimizer {
display: flex;
align-items: center;
border: 1px solid #E4E4E4;
width: 184px;
background-color: white;
background-image: url(//journeybuildersinc.com/wp-content/plugins/tenweb-builder/includes/PreviewSidebar/assets/images/minimizer_black.svg);
background-position: 15px;
padding-left: 65px;
}
.twbb-ps-main.closed .twbb-ps-minimizer p {
display: block;
font-size: 18px;
line-height: 28px;
font-weight: 800;
letter-spacing: 0.15px;
color: #323A45;
opacity: 0;
animation: showMe 1s forwards;
}
@keyframes showMe{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}