@import url(../css/component/templates.css);
@import url(../css/component/templates-logo-related.css);
@import url(../css/component/icons.css);
@import url(../css/component/add-text.css);
@import url(../css/component/curve-text.css);
@import url(../css/component/photos.css);
@import url(../css/component/background.css);
@import url(../css/component/uploads.css);
@import url(../css/component/color.css);
@import url(../css/component/gradient-color.css);
@import url(../css/component/font.css);
@import url(../css/component/font-size.css);
@import url(../css/component/font-more.css);
@import url(../css/component/effects.css);
@import url(../css/component/resize.css);


.design-container {
    height:92.5vh;
    width:100%;
    display:flex;
    flex-direction: row;
}
.design-container .design-container-left {
    /* min-width:80px; */
    max-width:430px;
    height:100%;
    display:flex;
}
.design-container .design-container-left .icons-box {
    min-width:80px;
    max-width:80px;
    height:100%;
    background:#18191b;
    overflow: auto;
}
.design-container .design-container-left .icons-box .icon {
    width:100%;
    height:85px;
    color:#999;
    display:flex;
    flex-direction:column;
    text-align:center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}        
.design-container .design-container-left .icons-box .icon:hover {
    color:#ccc;
}
.design-container .design-container-left .icons-box .icon.active {
    color:#404040;
    background:#fff;
}
.design-container .design-container-left .icons-box .icon span {
    font-size:12px;
    margin-top:5px;
}
.design-container .design-container-left .display-items-box {
    min-width:350px;
    max-width:350px;
    height:100%;
    /* background:#252627; */
    background:#fff;
    padding:20px 30px;
    display:none;
    position: relative;
    border-right: #ddd 1px solid;
}
.design-container .design-container-left .display-items-box .head-box {
    width:100%;
    min-height: 20px;
    /* border-bottom:#ddd 1px solid; */
    margin-bottom:20px;
    font-weight:bold;
}
.design-container .design-container-left .display-items-box .head-box .search-box {
    display: block;
    padding: 0 5px 0 30px;
    margin: 10px 0;
    width: 100%;
    border: #ddd 1px solid;
    border-radius: 5px;
    font-size: 14px;
    position: relative;
}
.design-container .design-container-left .display-items-box .head-box .search-box:hover {
    border: #999 1px solid;
}
.design-container .design-container-left .display-items-box .head-box .search-box .icon-search {
    position: absolute;
    left:10px;
    top:9px;
}
.design-container .design-container-left .display-items-box .head-box .search-box input {
    width:100%;
    padding: 12px;
    border:none;
}
.design-container .design-container-left .display-items-box .head-box ::placeholder {
    color:#ddd;
    font-weight:normal;
}
.design-container .design-container-left .display-items-box .content-box {
    width:100%;
    height: 75vh;
    overflow:auto;
    padding-right: 10px;
}
.design-container .design-container-left .display-items-box .content-box .btn_viewAll {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.design-container .design-container-left .display-items-box .content-box .tab-data-sec {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
.design-container .design-container-left .display-items-box .content-box .tab-data-sec .data-name-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 40px;
    overflow: hidden;
}
.design-container .design-container-left .display-items-box .content-box .tab-data-sec .data-name-sec .data-name-heading {
    position: absolute;
    left: 0;
    font-size: 14px;
    font-weight: bold;
}
.design-container .design-container-left .display-items-box .content-box .tab-data-sec .data-name-sec .viewMoreLink {
    position: absolute;
    right: 0;
    font-size: 11px;
}
.design-container .design-container-left .display-items-box .content-box .tab-data-sec .box-sec {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.design-container .design-container-left .display-items-box .content-box .tab-data-sec .box-sec .box {
    min-width:48.5%;
    width:48.5%;
    max-width:48.5%;
    padding: 0px;
    cursor: pointer;
}
.design-container .design-container-left .display-items-box .content-box.icon-box .tab-data-sec .box-sec {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.design-container .design-container-left .display-items-box .content-box.icon-box .tab-data-sec .box-sec .box {
    padding: 20px;
    min-width:31%;
    width:31%;
    max-width:31%;    
    border:#eee 1px solid;
}
.design-container .design-container-left .display-items-box .content-box.icon-box .tab-data-sec .box-sec .box:hover {
    border:#404040 1px solid;
}
.design-container .design-container-left .display-items-box .content-box .tab-data-sec .box-sec .box img,
.design-container .design-container-left .display-items-box .content-box .tab-data-sec .box-sec .box svg {
    width:100%;
}
.design-container .design-container-left .display-items-box .tab-template-sec img {
    width:100%;
}

.design-container .design-container-left .display-items-box .btn_close-display-items-box {
    width:20px;
    height:96px;
    display:flex;
    text-align:center;
    align-items:center;
    justify-content:center;
    padding:1px;
    border-radius:50%;
    cursor: pointer;
    position:absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}
.design-container .design-container-left .display-items-box .btn_close-display-items-box .arrow-close-pointer {
    position:absolute;
}
.design-container .design-container-left .display-items-box .btn_close-display-items-box svg {
    fill:#fff;
}
.design-container .design-container-right {
    width:100%;
    height:100%;
}
.design-container .design-container-right .display-items-elements-box {
    width:100%;
    height:auto;
    border-bottom:#ddd 1px solid;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box {
    width:100%;
    height:100%;
    display:inline-flex;
    gap:10px;
    background:#fff;            
    padding:10px;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element {
    min-width:35px;
    height:35px;
    /* border:#ddd 1px solid; */
    /* background:#fafafa; */
    display:flex;
    text-align:center;
    align-items:center;
    justify-content:center;
    padding:1px;
    border-radius:4px;
    cursor: pointer;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element.effects {
    padding:1px 10px;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element.font {
    border:#ddd 1px solid;
    padding:0 10px;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element.fontsize {
    border:#ddd 1px solid;
    padding:0 10px;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element.fontsize input,
.design-container .design-container-right .display-items-elements-box .brand-name-box .element.fontsize select
{
    max-width:60px;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element input,
.design-container .design-container-right .display-items-elements-box .brand-name-box .element select,
.design-container .design-container-right .display-items-elements-box-bottom .brand-name-box .element input,
.design-container .design-container-right .display-items-elements-box-bottom .brand-name-box .element select
{
    border:none;
    background:none;
    max-width:150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element.transparency {
    position: absolute;
    right:100px;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element.hideShow {
    position: absolute;
    right:55px;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element.delete {
    position: absolute;
    right:10px;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element:hover {
    background:#eee;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element .color-box {
    background:#000;
    display:block;
    width: 100%;
    height:100%;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element .gradient-color-box {
    display:block;
    width: 100%;
    height:100%;
}
.design-container .design-container-right .display-items-elements-box .brand-name-box .element .gradient-color-box img {
    width:100%;
    height:100%;
}
.design-container .design-container-right .display-items-elements-box-bottom {
    /* width:100%; */
    height:auto;
    border-bottom:#ddd 1px solid;
    position: fixed;
    bottom:0;
    right:0;
}
.design-container .design-container-right .display-items-elements-box-bottom .brand-name-box {
    width:100%;
    height:100%;
    display:inline-flex;
    gap:5px;
    background:none;            
    padding:10px;
    justify-content: right;
    flex-direction:column;
}
.design-container .design-container-right .display-items-elements-box-bottom .brand-name-box .element {
    min-width:35px;
    height:35px;
    border:none;
    background:#f5f5f5;
    display:flex;
    text-align:center;
    align-items:center;
    justify-content:center;
    padding:2px;
    border-radius:4px;
    cursor: pointer;
}
.design-container .design-container-right .display-items-elements-box-bottom .brand-name-box .element img {
    width:20px;
}
.design-container .design-container-right .design-frame-container {
    width:100%;
    height: 80vh;
    overflow:auto;
    display:flex;
    justify-content:center;
    align-items:center;           
}
.design-container .design-container-right .design-frame-container .design-frame-box {
    width:450px;
    height:450px;
    background:#fff;
    box-shadow:0 2px 8px rgb(14 19 24 / 7%);
    position: relative;
}
.design-container .design-container-right .design-frame-container .design-frame-box .icon-rfrsh {
    position: absolute;
    right:-25px;
    top:-25px;
    width:25px;
    height:25px;
    background:#fff;
    border-radius:50%;
    padding:3px;
    cursor: pointer;
    box-shadow:0 1px 4px rgb(14 19 24 / 7%);
    border:#ccc 1px solid;
}
.design-container .design-container-right .design-frame-container .design-frame-box .icon-rfrsh:hover img {
    transform: rotate(360deg);
    transition: 1.10s;
}
.dividerLine {
    width: 1px;
    height: 35px;
    background: rgba(57,76,96,0.08);
}

header.desgnHead{
    background:linear-gradient(90deg,#00c4cc,#7d2ae8);
    background:linear-gradient(to right, #01d5f5, #52df84);
    box-shadow:none;
}
header .btn-share-logo {
    background:none !important;
    padding:0 20px 0 10px;
    display:inline-flex;
    justify-content:center;
    align-items: center;
}
header .btn-share-logo img {
    width:24px;
}
header .btn-save-logo {
    background:none !important;
    border:rgb(255,255,255,.25) 1px solid;
}
header .btn-save-logo:hover {
    border:#fff 1px solid;
}
header .btn-download-logo {
    background:#fff !important;
    color:#404040;
    position: relative;
    display:inline-flex;
    justify-content:center;
    align-items: center;
}
header .btn-download-logo:hover {
    color:#404040;
}

header .save-download-logo-sec {
    text-align:center;
    display:flex;
    justify-content:right;
    align-items: right;
    gap:10px;
}
header button.btn_back {
    background:none;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: normal;
    border: none;
    display:flex;
    justify-content:center;
    align-items: center;
    color:#fff;
    gap:5px;
    border:rgb(255,255,255,.25) 1px solid;
}
header button.btn_back:hover {
    border:#fff 1px solid;
}
header .logo-sec .logo-img { max-width: 250px; margin-right: 10px;}



.rangeBox { 
    position: relative;
    min-height:60px;
    margin: 20px 0;
}
.rangeBox > .rangeName {
    position: absolute;
    left:0;
    top:8px;
    font-size: 14px;
}
.rangeBox > .rangeValue {
    position: absolute;
    right:0;
}
.rangeBox > .rangeValue input {
    border:#eee 1px solid;
    padding:5px;
}
.rangeBox > .rangeBar {
    position: absolute;
    bottom:0;
    width:100%;
}