/* Temp */
/*.side-logo a{display: none;}*/

.page-template-email-header-builder-template{background-color: #fff;}
.page-template-email-header-builder-template #main{width: 100vw; display: flex;}

.bb-wrapper-mobile{display: none;}

.bb-wrapper{width: 100%; min-height: calc(100vh - 80px); overflow: hidden;}
.bb-wrapper .button{background-color: #0D5C91; color: #fff; font-size: 0.875em; font-weight: normal; padding: 14px 24px; border-radius: 4px;}

.bb-sidebar{position: fixed; width: 150px; height: 100%;}
.admin-bar .bb-sidebar{height: calc(100% - 32px);}
.bb-main{width: calc(100% - 150px); height: 100%; display: flex; flex-flow: column; margin-left: auto; background-color: #fff; transition: width 0.5s linear;}
.bb-main.sidebar-open{width: calc(100% - 550px);}

a#close-bb{position: absolute; top: 30px; right: 30px; color: #6F7170; font-size: 24px; line-height: 1;}

p.small{font-size: 0.75em; line-height: 2; color: #6F7170; margin: 0.5rem 0;}

ul.small{font-size: 0.75em; line-height: 2; color: #6F7170; margin: 0.5rem 0; padding: 0 0 1rem 1rem;}

.accordion-panel .small{margin-top: 0;}

#svgimage{margin: 50px auto; background: url(../images/badge-grid-background-small.png) 0 0 repeat; background-size: 25px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); width: 480px; height: 480px; text-align: center;}

.bb-sidebar-select{width: 150px; height: 100%; background-color: #313131; position: relative; z-index: 999; text-align: center; padding: 30px 0;}
.bb-sidebar-select a{display: block; padding: 10px 0;}
.bb-sidebar-select a label{color: #C4BEB6; cursor: pointer; font-size: 0.875em;}
.bb-sidebar-select a.active label,
.bb-sidebar-select a:hover label{color: #fff;}
.bb-sidebar-select a .bb-nav-icon{width: 50px; height: 50px; margin: 0 auto; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain;}

.bb-sidebar-select a .bb-nav-icon-design{background-image: url(../images/lenovo-brand-email-header-builder-image-nav-icon.svg)}
.bb-sidebar-select a.active .bb-nav-icon-design,
.bb-sidebar-select a:hover .bb-nav-icon-design{background-image: url(../images/lenovo-brand-email-header-builder-image-nav-icon-active.svg);}
.bb-sidebar-select a .bb-nav-icon-color{background-image: url(../images/color-nav-icon@2x.png)}
.bb-sidebar-select a.active .bb-nav-icon-color,
.bb-sidebar-select a:hover .bb-nav-icon-color{background-image: url(../images/color-nav-icon-active@2x.png);}
.bb-sidebar-select a .bb-nav-icon-text{background-image: url(../images/text-nav-icon@2x.png)}
.bb-sidebar-select a.active .bb-nav-icon-text,
.bb-sidebar-select a:hover .bb-nav-icon-text{background-image: url(../images/text-nav-icon-active@2x.png);}
.bb-sidebar-select a .bb-nav-icon-icons{background-image: url(../images/icon-nav-icon@2x.png)}
.bb-sidebar-select a.active .bb-nav-icon-icons,
.bb-sidebar-select a:hover .bb-nav-icon-icons{background-image: url(../images/icon-nav-icon-active@2x.png);}

.bb-sidebar-select img{margin: 0 auto;}
.bb-sidebar-content{position: absolute; top: 0; left: -250px; width: 400px; height: 100%; background-color: #F4F4F4; border: 1px solid #313131; z-index: 9;}

.bb-select{display: none;}
.bb-select-content{padding: 25px 30px;}

.bb-sidebar h2{font-size: 2em; line-height: 1.2; color: #333F48;}

.bb-sidebar-open{position: absolute; top: calc(50% - 50px); left: 399px; width: 15px; height: 100px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; background-color: #313131; cursor: pointer; display: flex; align-items: center;}
.bb-sidebar-open .chevron:before{left: 0; transform: rotate(45deg);}
.bb-sidebar-content.in .bb-sidebar-open .chevron:before{left: 0.25em; transform: rotate(-135deg);}

.bb-main .download-buttons{display: flex; gap: 24px; margin: auto 30px 25px auto;}
.bb-main .download-buttons a{background-color: #0D5C91; color: #fff; font-size: 0.875em; font-weight: normal; padding: 14px 24px; border-radius: 4px; display: flex; align-items: center;}
.bb-main .download-buttons a .icon-download:before{margin-left: 10px;}

.bb-scroll{height: calc(100vh - 240px); overflow-y: scroll;}
.bb-side-scroll{height: calc(100vh - 140px); overflow-y: scroll;}

/* Scrollbar */
.bb-sidebar .bb-scroll::-webkit-scrollbar,
.bb-sidebar .bb-side-scroll::-webkit-scrollbar {
    width: 4px;
}
.bb-sidebar .bb-scroll::-webkit-scrollbar-track,
.bb-sidebar .bb-side-scroll::-webkit-scrollbar-track {
    background: none;
}
.bb-sidebar .bb-scroll::-webkit-scrollbar-thumb,
.bb-sidebar .bb-side-scroll::-webkit-scrollbar-thumb {
    background: #A8A6A8;
	border-radius: 0px;
}
.bb-sidebar .bb-scroll::-webkit-scrollbar-thumb:hover,
.bb-sidebar .bb-side-scroll::-webkit-scrollbar-thumb:hover {
    background: #878587;
}

/* Sidebar Accordion */
.bb-sidebar .accordion{width: 100%;}
.bb-sidebar .ui-accordion .ui-accordion-header{padding: 20px; cursor: pointer;}
.bb-sidebar .ui-accordion .ui-accordion-header .accordion-title{font-size: 20px; font-weight: bold;}
.bb-sidebar .ui-accordion-header-icon{right: 20px; width: 30px;}
.bb-sidebar .ui-accordion-header-icon.custom-color svg{width: 30px;}
.bb-sidebar .ui-accordion .ui-accordion-content{padding: 0 20px 20px;}
.bb-sidebar .ui-accordion:last-child{margin-bottom: 0;}

/* Logo Selector */
.bb-scroll label{display: block; margin-bottom: 10px;}
.bb-logo-input{display: flex; align-items: center; gap: 15px; margin-bottom: 15px;}
.bb-logo-input input{display: none;}
.bb-logo-input label{width: 50%; cursor: pointer;}
.bb-logo-input label .svg-wrap{position: relative; display: flex; align-items: center; background-color: #fff; padding: 10px; border: 4px solid #fff;}
.bb-logo-input label .svg-wrap img{max-width:60px; max-height: 120px; margin: 0 auto;}
.bb-logo-input label .svg-wrap i{display: none; position: absolute; bottom: 2px; right: 2px; font-size: 16px;}
.bb-logo-input input:checked + .svg-wrap i{display: block;}
.bb-logo-input input:checked + .svg-wrap,
.bb-logo-input label:hover .svg-wrap{border: 4px solid #353F47;}

.bb-logo-input label .svg-wrap:after{content: ''; position: relative; display: block; padding-bottom: 100%;}

/* Design Selectors */
/*#bb-bases .bb-inputs{display: flex; flex-wrap: wrap; justify-content: space-between;}*/
#bb-bases .bb-inputs input{display: none;}
#bb-bases .bb-inputs label{width: 100%; display: block	; margin-bottom: 10px; cursor: pointer;}
#bb-bases .bb-inputs .svg-wrap{position: relative; display: flex; align-items: center; height: 100%; border: 4px solid #fff;}
#bb-bases .bb-inputs .svg-wrap svg{margin: 10px;}
#bb-bases .bb-inputs input:checked + .svg-wrap,
#bb-bases .bb-inputs label:hover .svg-wrap{border: 4px solid #353F47;}
#bb-bases .bb-inputs label .svg-wrap i{display: none; position: absolute; bottom: 2px; right: 2px; font-size: 16px;}
#bb-bases .bb-inputs input:checked + .svg-wrap i{display: block;}

/* Color Selectors */
#bb-bases .bb-color-inputs{display: flex; flex-wrap: wrap; justify-content: space-between;}
#bb-bases .bb-color-inputs input{display: none;}
#bb-bases .bb-color-inputs label{width: 100%; font-size: 0.75em; line-height: 1; color: #333F48; margin-bottom: 20px; cursor: pointer;}
#bb-bases .bb-color-inputs label span{margin-top: 5px; display: block;}
#bb-bases .bb-color-inputs label .bb-color-block{width: 100%; height: 100px; position: relative;}
#bb-bases .bb-color-inputs input:checked + .bb-color-block,
#bb-bases .bb-color-inputs label:hover .bb-color-block{border: 4px solid #353F47;}
#bb-bases .bb-color-inputs label  .bb-color-block i{display: none; position: absolute; bottom: 2px; right: 2px; font-size: 16px;}
#bb-bases .bb-color-inputs input:checked +  .bb-color-block i{display: block;}

.bg-cyan{background-color: #46C8E1;}
.bg-orange{background-color: #FF6A00;}
.bg-green{background-color: #6AC346;}
.bg-blue{background-color: #3E8DDD;}
.bg-red{background-color: #E1140A;}
.bg-pink{background-color: #F04187;}
.bg-purple{background-color: #8246AF;}
.bg-darkgray{background-color: #333F48;}


/* Text Inputs */
.bb-select .textfield{border: none; background-color: #fff; color: #333F48;}
.bb-select .textfield.optional{display: none;}

.bb-title-box{position: relative;}
#bb-textfields .textfield{width: 100%; /*width: calc(100% - 20px);*/ max-height: 50px;}
.bb-select .alter-text-inputs{width: 20px; height: 40px; position: relative; float: right;}
.bb-select .alter-text-inputs a{width: 20px; text-align: center; display: block; position: absolute; bottom: 0; color: #333F48;}
/*.bb-select .alter-text-inputs a#remove-title-input{top: 0;}*/

/* Select Dropdowns */
.bb-select-box{}
.bb-select-box .select2-container{width: 100% !important; background: #fff;}
.bb-select-box .select2-container--default .select2-selection--single .select2-selection__rendered{color: #333F48;}

/* Icons */
.bb-link-bottom{width: 100%; height: auto; position: absolute; bottom: 80px; padding: 0;}
.bb-link-bottom .button{margin: 0; border-radius: 0;}
.bb-link-bottom .button span{display: inline-flex; align-items: center;}
.bb-link-bottom .button i{margin-left: 10px;}

.icon-grid{display: flex; flex-wrap: wrap; justify-content: space-between; height: calc(100vh - 240px); overflow-y: scroll; padding-right: 10px;}
.icon-grid .icon-spacer{width: calc(33.3334% - 10px); margin-bottom: 10px;}
.icon-grid a.load_icon{display: block; border: 4px solid transparent; background-position: 50% 50%; background-repeat: no-repeat; background-size: 100%; position: relative;}
.icon-grid a.load_icon:after{content: ''; display: block; padding-bottom: 100%;}
.icon-grid a.load_icon.active,
.icon-grid a.load_icon:hover{border: 4px solid #353F47;}
.icon-grid a.load_icon i{display: none; position: absolute; right: 2px; bottom: 2px; color: #333F48;}
.icon-grid a.load_icon.active i{display: block;}

/* Scrollbar */
.bb-sidebar .icon-grid::-webkit-scrollbar {
    width: 4px;
}
.bb-sidebar .icon-grid::-webkit-scrollbar-track {
    background: none;
}
.bb-sidebar .icon-grid::-webkit-scrollbar-thumb {
    background: #A8A6A8;
	border-radius: 0px;
}
.bb-sidebar .icon-grid::-webkit-scrollbar-thumb:hover {
    background: #878587;
}

/* Misc */
.chevron{height: 14px;}
.chevron::before {
    border-color: #C4BEB6;
	border-style: solid;
	border-width: 2px 2px 0 0;
	content: '';
	display: inline-block;
	height: 7px;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
}
.chevron.right:before {
	left: 0;
	transform: rotate(45deg);
}
.chevron.bottom:before {
	top: 0;
	transform: rotate(135deg);
}
.chevron.left:before {
	left: 0.25em;
	transform: rotate(-135deg);
}


.icon-download{display: inline-block;}
.icon-download:before{content: ''; display: block; width: 20px; height: 20px; background: url(../images/download-icon@2x.png) 50% 50% no-repeat; background-size: contain;}

.icon-upload{display: inline-block;}
.icon-upload:before{content: ''; display: block; width: 20px; height: 20px; background: url(../images/upload-icon@2x.png) 50% 50% no-repeat; background-size: contain;}

.ehb-number-box{background-color: #fff; padding: 5px 10px; display: flex; align-items: center;}
.ehb-number-box label{font-size: 1em;}

.range-output{width: 50px; text-align: right;}

/* Range Slider */
input[type=range] {
  -webkit-appearance: none;
  margin: 0 0 0 auto;
  width: 120px;
  border: none;
}
input[type=range]:focus {
  outline: none;
  background: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #6F7170;
  border: none;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: none;
  height: 14px;
  width: 2px;
  border-radius: 3px;
  background: #6F7170;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #6F7170;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #6F7170;
  border-radius: 1.3px;
  border: none;
}
input[type=range]::-moz-range-thumb {
  box-shadow: none;
  border: none;
  height: 14px;
  width: 2px;
  border-radius: 3px;
  background: #6F7170;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #6F7170;
  border: none;
  border-radius: 2px;
  box-shadow: none;
}
input[type=range]::-ms-fill-upper {
  background: #6F7170;
  border: none;
  border-radius: 2px;
  box-shadow: none;
}
input[type=range]::-ms-thumb {
  box-shadow: none;
  border: none;
  height: 14px;
  width: 2px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #6F7170;
}
input[type=range]:focus::-ms-fill-upper {
  background: #6F7170;
}

/* Canvas */
#canvas-wrap{margin: 50px auto; display: flex; flex-grow: 1; align-items: center;}
canvas{width: 600px; height: 255px;}

@media only screen and (min-width:1280px) {
	.page-template-email-header-builder-template #sidebar{display: none;}
}
@media only screen and (max-width: 750px) {
	.mobile-hide{display: none;}

	.bb-wrapper{display: none;}
	.bb-wrapper-mobile{display: flex; align-items: center; text-align: center; padding: 50px;}
}