/* #0eada3 */
:root {
    --mainbg: #20b0d9;
    --mainbgHv: #0c8a83;
    --link:#20b0d9;
    --linkhvr: #0c8a83;
}
body{
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    overflow-x: hidden;    
}
a{color:var(--link);}
a:hover{color:var(--linkhvr);}
.btn-outline-primary{color:var(--mainbg);border-color: var(--mainbg);}
.btn-outline-primary:hover{background-color: var(--mainbgHv);border-color: var(--mainbgHv);}
.btn.focus, .btn:focus{box-shadow: none;}

.space10{height: 2vh;} .space20{height: 20px;}

.bg-black{background-color:#3E5059;}
.text-light{color:#fff;}
.divider{border-bottom: 1px solid #dee2e6;margin: 10px 0px;}
.layout{width:100%;margin-top:110px;height:100%;}
.layout1{width: 7%;height: 100%;position: fixed;top:71px;background-color: #ddd;}
.layout2{width: 20%;border-right: 1px solid #dee2e6;height: 100%;position: fixed;left: 7vw;top:71px;}
.layout3{width: 72%;position: absolute;left: 28vw;top:71px;}
.layout4{width: 67%;position: absolute;left: 375px;top:71px;}
.svgLogoBox{background-image: url('../images/bg-dot.png');background-color:#FFFFFF;height: 540px;width: 900px;position: relative;display: flex;align-items: center;}
.svgLogoBox p{margin: auto;}
.navPos{position: fixed;top: 0px;left: 0px;width: 100%;z-index: 2;}
.firstCol{padding: 3vh 0;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
font-size: 2.4vh;line-height: 4vh;cursor: pointer;} .firstCol i{font-size: 1.7vw;}
.firstCol.active, .firstCol.active:hover{background: #FFF;}
.firstCol:hover{background: #fafafa;}
#logos i{color: #37babf;} #texts i{color:#cb3819} #icons i{color: #772bd7;}
#shapes i{color: #478c18;} #slogan i{color: #ba1b91;} #extra i{color: #1b40ba;}
#mainSvg{position: relative;z-index: 10;}
#outerDotted{border:1px dashed #478c18;z-index:0;cursor:move;}
#outerSolid{border:1px dashed #0e96cc;z-index:0;}
.layout3 .row{margin-right: 0px; margin-left: 0px;}
#optOuter{margin-top: 10px;position: absolute;width: 100%;}
#iconOpt, #fontOpt, #baseLineOpt, .logoStyle{display: none;}
.layout2 .row{margin-right: -1px; margin-left: 0px;}
.midIcon img{margin: 10px 0px;width: 100%;}
.midIcon{margin-bottom: 8px;border: 1px solid #E2E3EF;border-radius: 2px;cursor: pointer;text-align:center;margin-left: 19px;display: flex;align-items: center;}

.svgIconCont{margin-left: 15px;}
#icons-box{display: block;}
#iconInner, .fontFamily{overflow:hidden;overflow-y: scroll;max-height: 70vh;scrollbar-color: #ed6f46 #bababa;}
.singleFont, .oneSloFont, .extraTxtFont{cursor: pointer;border-bottom: 1px solid #ccc;}
.grdPicker, #extraFontStyle{display: none;}
.colCont{border: 1px solid #ccc;margin-bottom: 20px;padding: 10px;}
.outerDot{position:absolute;width:25px;height:25px;background-color: #e2280f;border-radius: 50%;z-index: 15;text-align: center;color: #fff;padding: 1px;cursor: pointer;}
#dotBR i{transform: scaleX(-1)} #dotBR{cursor: se-resize;}
.noval{width: 10px;height: 10px;cursor: auto;}
#dotTL:hover{cursor: nesw-resize;}
p.loading{text-align: center;}

@keyframes blink {
    0% {opacity: 1;}
    25% {opacity: 0.2;}
    50% {opacity: 1;}
    75% {opacity: 0.2;}                
    100% {opacity: 1;}
}

.eye {                
    animation-name: blink;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
.slider {
    -webkit-appearance: none;
    width: 100%;
    vertical-align: middle;  
    height: 10px;
    background: #1417e7;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 10px;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    background: #080a6e;
    cursor: pointer;
    border: none;
}

.slider::-moz-range-thumb {
    width: 17px;
    height: 17px;
    background: #080a6e;
    cursor: pointer;
    border: none;
}
.fontSlid{background: #108cd3;}    
.fontSlid::-moz-range-thumb, .fontSlid::-webkit-slider-thumb{background: #084e6e;}

.input-color-container {
    position: relative;
    overflow: hidden;
    width: 30px;
    height: 30px;
    border: solid 2px #ddd;
    border-radius: 40px;
    display: inline-block;
    vertical-align: top;
    top: -4px;
}
.input-color {
    position: absolute;
    right: -10px;
    top: -8px;
    width: 56px;
    height: 56px;
    border: none;
}
.draggable{
    cursor: pointer;
}

.search-bar-container{padding: 15px 15px 15px 13px;margin-left: 8px;}

.icon-search {display: block;text-align: center;background-color: var(--mainbg);border-top-right-radius: 4px;border-bottom-right-radius: 4px;cursor: pointer;width:19%;height:5vh;padding-top: 0.5vh;font-size: 1.2vw;color: #FFF;float: right;position: relative;left: -5px;}
.searchInp{float: left;width: 81%;}
.searchInp input{width: 100%;height: 5vh;border: 1px solid var(--mainbg);padding: 0px 5px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-size: 1.1vw;}

.firstLine {height:auto;text-align:center;}
 #search-logo-bar{margin-top:40px;}
 .searchLogo{border:1px solid #DAE0E8;height:40px;text-align:center}
 .search-logo-btn{background-color: var(--mainbg);color:#fff;text-align:center;height:40px;padding:6px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 0px !important;
border-top-left-radius: 0px !important;}

.secondText{text-align:center;margin-top:-10px}
/* .firstLine svg{transform: matrix(1.2,0,0,1.2,50,1);}
.secondText svg{transform: matrix(0.8,0,0,0.8,50,20);} */
#iconOption{display:none;}
.rotateInp{width: 67%;border: 1px solid var(--mainbg); border-radius: 5px;padding: 5px;}
.roteBox::after{content: 'deg'}

.footer{background-color:#14171A}
.footer-row{color:#ddd;padding:12px;}
.footer-height{height:50px;}
.pickColorCode{border: 0px; text-align: center;width: 100%;}
.iconColrCont{display: flex;}
#iconColorPic, #baseLineColorPic, #logoColorPic, .colorPick{border: 1px solid #ccc;}
.colorCont{width: 50%;border-top: 1px solid #ccc;border-right: 1px solid #ccc;padding: 5px 0px;}
.colorCont, .colorCont input{background: #CCC;font-weight: bold;}
.brdRgh{border-left: 1px solid #CCC;border-radius: 5px 0 0 0;}
.colorActive{color: #cb3819;}
.colorActive > .colorCont{border:1px solid red;}
#iconGrdPick{border-radius: 0 5px 0 0;}
input:focus{outline: none;}
.btRound{border-radius: 0  0 5px 5px;}
.topRound{border-radius: 5px 5px 0px 0px;}
.pickRound{border-radius: 0  5px 5px 5px;}


::-webkit-scrollbar{
 width: 1.2em;  
}

::-webkit-scrollbar-track{
    /* border: 1px solid #ccc;     */
    border-width: 0px 1px 0 1px;
    border-style: solid;
    border-color: #cccccc;
}

::-webkit-scrollbar-thumb{  
    background-color: #CCC;
    
    margin: 0 2px 0 2px;
}
::-webkit-scrollbar-button:single-button {    
    display: block;    
    border: 1px solid #ccc;
    cursor: pointer;
  }
::-webkit-scrollbar-button:single-button:vertical:decrement {
    /* border-width: 0 8px 8px 8px;
    border-color: transparent transparent #555555 transparent; */
    background-image: url('../images/up-arrow.png');
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url('../images/down-arrow.png');
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

  .checkbox-logo{display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 15px; -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;}
.checkbox-logo input[type="checkbox"], .checkbox-logo input[type="radio"]{position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkOption{position: absolute;top: 6px;left: 0;height: 25px;width: 25px;background-color: #fff; border: 2px solid var(--mainbg);border-radius: 4px;}
.checkOption:after, .radiobtn:after{content: "";position: absolute;display: none;}
.checkbox-logo .checkOption:after {left: 7px;top: 2px;width: 8px;height: 14px;border: solid var(--mainbg);border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.checkbox-logo input:checked ~ .checkOption:after {display: block;}

.small{top:3px;left:10px; width: 20px; height: 20px;}
.chkOut{left:0px;}
.checkbox-logo.outln{padding-left:25px;font-size: 16px;font-weight: bold;margin-bottom:0px;}
.checkbox-logo .small::after {
    left: 5px;
    top: 0px;
    width: 6px;
    height: 13px;
    border: solid var(--mainbg);        
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.deleteSlogan{float: right;font-size: 21px;color: #e40c0c;cursor: pointer;}
.editOption{position: absolute;z-index: 15;background-color: #FFF;width: 13rem;border-top:1px solid #ccc; border-left:1px solid #ccc;border-right:1px solid #ccc;}
.editOption ul{list-style: none;margin: 0;padding: 0;}
.editOption ul li{padding: 8px 10px;border-bottom:1px solid #ccc;cursor: pointer;}
.editOption ul li:hover{background-color: #ddd;}
.editOption ul li i{margin-right: 10px;color: #e2280f;}
.placeBehind i{transform: rotateY(180deg);}
.fontScroll{height: 500px;overflow-y: scroll;overflow-x: hidden;}

.selectBox{padding: 0px 20px;}
.select-css {
    display: block;
    font-size: 2.5vh;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;    
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;    
    border: 0px solid #aaa;    
    border-radius: .3em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    padding: 5px;
    border: 1px solid #ccc;    
}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #888;
}
.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}
.select-css option {
    font-weight:normal;
}

.editInp{width: 100%;border: 1px solid var(--mainbg);padding: 5px 5px;border-radius: 5px;}
.addTextFill{padding-right: 18px;}
.inpRemove{position: absolute;width: 27px;height: 33px;right: 2px;text-align: center;padding-top: 5px;cursor: pointer;background: var(--mainbg);border: 1px solid var(--mainbg);border-radius: 0 5px 5px 0;}

.register-other-info{width: 97%;margin-left: 7px;}
.signup-title{font-size: 26px;color: #000;padding-left: 7px;padding-bottom: 20px}
.signup-info{margin-top: 0px;font-size: 16px;margin-bottom: 25px;line-height: 23px;padding-left:7px;font-weight: 350;}
.register-info {width: 48%;display: inline-block;vertical-align: top;}
.input-field-text{height: 45px;line-height: 35px;border-radius: 4px;border: 1px solid #E2E3EF;padding-left: 15px;padding-right: 15px;width: 100%;outline: none;margin-bottom:12px}
.input-right{padding-left:10px}
.input-left{padding-right:10px;margin-left: 7px;}
.input-field-text:hover{border:1px solid var(--mainbg);}
.btn-submit{display: inline-block;text-align: left;padding-left: 30px;padding-right: 30px;position: relative;text-transform: uppercase;cursor: pointer;height: 35px;line-height: 35px;}
.btn-submit-green{background-color:var(--mainbg);border-radius:4px;text-align:center;color:#fff;font-weight:600;height:38px;border:1px solid var(--mainbg);}
.btn-submit-green:hover{cursor:pointer;background-color:var(--mainbgHv);}
.disabled{opacity: 0.5;}
.dropdown{margin-bottom: 0px;padding: 0 0 5px;}
.dropdown-menu {    
    margin-top: -1px; margin-left: 10px;left: -65px;padding: 0px;border: 1px solid var(--mainbg);
}
.dropdown-menu li{border-bottom: 1px solid var(--mainbg);padding: 5px 10px;}
.dropdown-menu li:last-child{border-bottom: 0px solid var(--mainbg)} 

.modal-dialog{margin: 3.75rem auto;}
.modal-header{padding: 0.5rem 1rem;background: var(--mainbg)}

/* header and footer */
.MainHead{background:#1e1d1d;border-bottom:8px solid #4b4646;}
.logo-box{width:30%;float:left;padding-top: 15px;}
.logo-box img{width: 200px;}
.login-box-inner{text-align:right;padding-top: 17px;padding-bottom: 14px;}
.bottom{font-family:tahoma, arial,verdana;background:#eee;font-size:10px;color:#818181;letter-spacing:1px;line-height:17px;font-weight:normal;margin: 0 auto;text-align: center;bottom:0px; width:100%;padding-top: 20px;}
.bottom a{font-variant:small-caps;text-decoration:none;color:#818181;font-size:10px;}
.bottom a:hover{color:#000000;text-decoration:none;}
.colorpickerplus-embed{
    margin-top: 5px;
}
.colorpickerplus-container{border-radius: 5px;}
/*end header and footer */
#mbIconAtr{width: 100%;}
.iconEditGrid{border: 1px solid #ccc;background-color: #FFF;position: absolute;width: 90%;padding: 5px;z-index: 1;top: 4px;display: none;}
.iconEditGrid::before{content: " ";position: absolute;top: -5px;border-bottom: 5px solid #ccc;border-left: 5px solid transparent;border-right: 5px solid transparent;}
#positionBtn-Grid::before{left: 70px;}
#rotateBtn-Grid::before{left: 150px;}
.iconEditAtrib{margin-right: 10px;}
#details-box .row{margin-right: -15px;}
.detailList{font-size: 16px;padding: 10px 10px;border: 1px solid #CCC;cursor: pointer;border-radius: 5px;margin-top: 10px;margin-bottom: 5px;}
.detailList:hover{background: #d8d8d8;}
.shapBox:hover + .detailList{background: #d8d8d8;}
.detailList::after{content: "\f0da";font-family: FontAwesome;margin-right: 10px;transform: rotate(0deg);display: inline-block;transform-origin: center center;transition-property: transform;transition-duration: 0.1s;position: absolute;right: 20px;}
.detailList.active{border: 1px solid var(--mainbg);color: var(--mainbg)}
.detailList.active::after{transform: rotate(90deg);transition-property: transform;transition-duration: 0.1s;transform-origin: center center;}
.shapBox{display: none;}
.shapBox ul{margin: 0px;padding: 0px;list-style: none;display: flex;flex-wrap: wrap;}
.shapBox ul li{width: 33%;height: 61px;text-align: center;cursor: pointer;display: flex;align-items: center;padding: 5px 0px;}
.shapBox ul li:hover{background: #e8e8e8;}
.shapBox ul li:hover img{filter: none;}

.shapBox ul li img{width: 90%;filter: grayscale(100%);height: 50px;margin: auto;object-fit:contain;}
#shapBox2 ul li{width: 100%;line-height: 41px;border-right: 0px solid #d3d4e5;border-bottom: 1px solid #d3d4e5;}
#shapBox2 ul li img{width: 95%;}
#shapePaterBox{display: none;}

.shpColorBox{font-size: 16px;font-weight: bold;margin-bottom: 10px;cursor: pointer;}
.shpColorBox::after{content: "\f0da";font-family: FontAwesome;transform: rotate(0deg);transform-origin: center center;transition-property: transform;transition-duration: 0.1s;margin-left: 10px;display: inline-block;}
.shpColorBox.active::after{transform: rotate(90deg);transition-property: transform;transition-duration: 0.1s;transform-origin: center center;}

.outLineBox{display: none;}
/* 
@media (max-width:4000px){
    .layout3{border: 1px solid red;left:28vw}    
}     */

.colorPater{float:left;width: 10%;height: 16px;border: 1px solid #FFF;}
.paterBox{border: 1px solid #ccc;padding: 5px;border-radius: 5px;margin-top: 10px;}

.fontBoxScroll{height: 500px;overflow: scroll;}
.centerObj{z-index: 20;position: absolute;display: none;height: 10px;width: 10px;}
.centerObj::after{content: "\f00d";font-family: FontAwesome;top: -9px;position: relative;font-size: 18px;left: -6px;top:-17px;color: #e2280f;}
.alignHrStr{position: absolute;z-index: 20;width: 2px;height: 100%;background: #e2280f;top: 0px;}
.alignVrStr{position: absolute;z-index: 20;width: 100%;height: 2px;background: #e2280f;margin-top: -4px;}
.primLink{color: #FFF;border-color: #FFF;}
    .onoffswitch {
        position: relative; width: 60px;
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .onoffswitch-label {
        display: block; overflow: hidden; cursor: pointer;
         border-radius: 20px;
    }
    .onoffswitch-inner {
        display: block; width: 200%; margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
        font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
        box-sizing: border-box;
    }
    .onoffswitch-inner:before {
        content: "ON";
        padding-left: 10px;
        background-color: #00c925; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
        content: "OFF";
        padding-right: 4px;
        background-color: #EEEEEE; color: #999999;
        text-align: right;
    }
    .onoffswitch-switch {
        display: block; width: 20px; height: 18px; margin: 3.5px;
        background: #FFFFFF;
        position: absolute; top: 0px; bottom: 0;
        right: 32px;
        border: 2px solid #999999; border-radius: 20px;
        transition: all 0.3s ease-in 0s; 
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px; 
    }
    .switchBox{display: flex;justify-content: end;}
    .swtLable{margin-right: 4px;}
    .swtBox{display: flex;align-items: flex-start;}
@media (max-width:800px){    
    .navPos{position: relative;}
    .layout1{height: auto;width: 100%;position: relative;top: auto;}    
    .layout2{position: relative;width: 100%;top: 250px;left:0;height: auto;}
    .layout3{left: 0;top: 190px;position: absolute;width: 100%;}
    .svgLogoBox{margin: 0px;}
    #optOuter{position: relative;margin-top:0px;z-index: 5;}
    .mbRow{margin: 10px 0px;}
    .logoStyle, .fontFamily{height: 300px;}
    .logo-box{width:50%;padding-top: 17px;}
    .logo-box img{width:200px;}
    #iconInner{max-height: 40vh;}
    .firstCol{font-size: 3vw;}
    .firstCol i {font-size: 5vw;}
    .searchInp input{height: 6vh;font-size: 3.1vw;}
    .icon-search{height: 6vh;font-size: 5.2vw;}
    .shapBox ul li{width: 24%;}
}    

@media (max-width:600px){
    .svgLogoBox{height: 245px;width: 100%;}
    .topRound{border-radius: 5px}
    .colorPater{height: 20px;}

}   
@media (max-width:440px){
    .logo-box img{width:100%;}
}