.page-template-badge-builder-template{background-color: #fff;}
.page-template-badge-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;}

#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/design-nav-icon@2x.png)}
.bb-sidebar-select a.active .bb-nav-icon-design,
.bb-sidebar-select a:hover .bb-nav-icon-design{background-image: url(../images/design-nav-icon-active@2x.png);}
.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: 1.75em; 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;}

/* 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: calc(50% - 7.5px); font-size: 0.75em; line-height: 1; color: #333F48; margin-bottom: 30px; cursor: pointer; background-color: #fff;}
#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-colors .bb-inputs{display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ margin-right: -7.5px;}
#bb-colors .bb-inputs input{display: none;}
#bb-colors .bb-inputs label{width: calc(33.3334% - 7.5px); font-size: 0.75em; line-height: 1; color: #333F48; margin-bottom: 30px; cursor: pointer; margin-right: 7.5px;}
#bb-colors .bb-inputs label span{margin-top: 5px; display: block;}
#bb-colors .bb-inputs label .bb-color-block{width: 100%; height: 75px; position: relative;}
#bb-colors .bb-inputs input:checked + .bb-color-block,
#bb-colors .bb-inputs label:hover .bb-color-block{border: 4px solid #353F47;}
#bb-colors .bb-inputs label  .bb-color-block i{display: none; position: absolute; bottom: 2px; right: 2px; font-size: 16px;}
#bb-colors .bb-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-light-gray{background-color: #C4BEB6;}


.bg-noicon-pale-red{background-color: #F0C7BF;}
.bg-noicon-pale-purple{background-color: #D9C1D8;}
.bg-noicon-pale-blue{background-color: #C9D0F0;}
.bg-noicon-pale-grey{background-color: #E6E2E4;}
.bg-noicon-mid-tone-red{background-color: #871C23;}
.bg-noicon-mid-tone-purple{background-color: #7A126B;}
.bg-noicon-mid-tone-blue{background-color: #294E95;}
.bg-noicon-mid-tone-grey{background-color: #ABA8B1;}
.bg-noicon-deep-red{background-color: #64131E;}
.bg-noicon-deep-purple{background-color: #4D144A;}
.bg-noicon-deep-blue{background-color: #11184F;}
.bg-noicon-deep-grey{background-color: #1E0013;}

/* 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: calc(100% - 20px);}
.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;}

/* 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;
}

/* Custom Icons */
#custom_icon_upload::-webkit-file-upload-button {
  visibility: hidden;
}
#custom_icon_upload {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
#custom_icon_upload + label {
    background-color: #0D5C91;
    color: #fff;
    font-size: 0.875em;
    font-weight: normal;
    padding: 14px 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

#custom_icon_upload:focus + label,
#custom_icon_upload + label:hover {
}
#custom_icon_upload + label {
	cursor: pointer; /* "hand" cursor */
}
#custom_icon_upload:focus + label {
	outline: 2px solid #0d5c91;
}
#custom_icon_upload + label i:before{margin-left: 10px;}

/* 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;}

/*not working in svg export */
/*#badge-icon path {
    fill: #fff !important;
}*/

.bg-icon-gradient-1{background: url(../images/lenovo-badge-builder-smart-gradient-background-g1-square.png) 50% 50% no-repeat; background-size: cover;}
.bg-icon-gradient-2{background: url(../images/lenovo-badge-builder-smart-gradient-background-g2-square.png) 50% 50% no-repeat; background-size: cover;}
.bg-icon-gradient-3{background: url(../images/lenovo-badge-builder-smart-gradient-background-g3-square.png) 50% 50% no-repeat; background-size: cover;}
.bg-icon-gradient-4{background: url(../images/lenovo-badge-builder-smart-gradient-background-g4-square.png) 50% 50% no-repeat; background-size: cover;}

.thumb-icon-inner-circle.g1{fill: url(#thumb-icon-gradient_image_1) !important;}
.thumb-icon-inner-circle.g2{fill: url(#thumb-icon-gradient_image_2) !important;}
.thumb-icon-inner-circle.g3{fill: url(#thumb-icon-gradient_image_3) !important;}
.thumb-icon-inner-circle.g4{fill: url(#thumb-icon-gradient_image_4) !important;}

@media only screen and (min-width:1280px) {
	.page-template-badge-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;}
}