@font-face {
    font-family: "templateroboto";
    src: url('/font/template-font/templateroboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "templateserif";
    src: url('/font/template-font/templateserif.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "templatecursive";
    src: url('/font/template-font/templatecursive.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templatearimo";
    src: url('/font/template-font/templatearimo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tempnotosanscondensedblack";
    src: url('/font/template-font/tempnotosanscondensedblack.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tempblackhansansregular";
    src: url('/font/template-font/tempblackhansansregular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tempgothica1regular";
    src: url('/font/template-font/tempgothica1regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tempnanumgothicregular";
    src: url('/font/template-font/tempnanumgothicregular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tempnanumgothiccodingregular";
    src: url('/font/template-font/tempnanumgothiccodingregular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tempnanummyeongjoregular";
    src: url('/font/template-font/tempnanummyeongjoregular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "temphahmletvariablefont";
    src: url('/font/template-font/temphahmletvariablefont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "tempibmbmsanskr";
    src: url('/font/template-font/tempibmbmsanskr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "dsdigi";
    src: url('/font/template-font/dsdigi.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: "templatebeautifulpoliceofficer";
    src: url('/font/template-font/templatebeautifulpoliceofficer.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templatebruceforever";
    src: url('/font/template-font/templatebruceforever.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templatedigitaldreamfatnarrow";
    src: url('/font/template-font/templatedigitaldreamfatnarrow.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templatetechnology";
    src: url('/font/template-font/templatetechnology.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templateloopy";
    src: url('/font/template-font/templateloopy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templateradioland";
    src: url('/font/template-font/templateradioland.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templatesfdigitalreadoutheavy";
    src: url('/font/template-font/templatesfdigitalreadoutheavy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templatesis";
    src: url('/font/template-font/templatesis.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templatesquaresansserif7";
    src: url('/font/template-font/templatesquaresansserif7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "templatetickingtimebombbb";
    src: url('/font/template-font/templatetickingtimebombbb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


#template-maker {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}
.wrap-text-area{
    text-align: center;
    margin: auto;
}
.wrap-text-area #text {
    width: 100%;
    height: 40px;
    padding: 3px 6px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid lightgrey;
}
/* [data-control="hue"] {
    height: 41px !important;
    border-radius: 5px !important;
    border: 1px solid lightgrey;
    width: 52px;
} */
.wrap-text select {
    float: right;
    height: 40px;
    padding: 3px 6px;
    border-radius: 5px;
    border: 1px solid lightgrey;
}
button, #save {
    color: #fff;
    background: rgb(196 23 30);
    font-size: 16px;
    border: none;
    padding: 7px 15px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#toolbar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    background-color: #f0f0f0;
    margin-bottom: 10px;
}

#canvas {
    /* width: 1086px; */
    position: relative;
    overflow: auto;
    background-size: cover;
    outline: 3px solid #ae0909;
    overflow: hidden;
    background-repeat: round;
}
/* #shapAdjust{
    height: 600px;
} */
.sizecontainter{   
/* width: 448px; */
height: 280px;
}
#TopLeft{
    position:absolute;
    top:6px;
    left:6px;
}
#TopCenter{
    position:absolute;
    top:6px;
    left:454px;
    text-align: center;
}
#TopRight{
    position:absolute;
    top:6px;
    left:901px;
}
#BottomLeft{
    position:absolute;
    top: 280px;
    left:6px;
}
#BottomCenter{
    position:absolute;
    top: 280px;
    left:454px;
    text-align: center;
    display: flex;
    flex-direction: column;
}
#BottomRight{
    position:absolute;
    top: 280px;
    left: 901px;
}
/* .text-element {
    position: absolute;
    border: 2px solid #000;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
} */

.resize{
    cursor: pointer;
    z-index: 10;
    width: fit-content;
    height: fit-content;
    list-style-type: none;
}
.dotted{
    border: 10px dotted lightgray !important;
    border-radius: 5px !important;
    cursor: pointer;
    /* width: 60%; */
    margin: auto;
    max-height: 130px;
}
.dotted #blah >p {
    font-weight: 700;
    padding: 37px 0px 24px 0px;
    font-size: 20px;
    color: lightgray;
}
.image-input{
    opacity: 0;
    height: 104px;
    width: 100%;
    cursor: pointer;
    /* margin-bottom: 3px; */
    position: relative;
    bottom: 106px;
}
#blah{
   /* width: 19%; */
   /* text-align: center;
   position: absolute; */
   max-height: 111px;
}
.selected{
  border-color:black;
  z-index: 10;
  border-width: 1px;
  border-style:dotted;
}
@media screen and (max-width:1600px) {
  .dotted #blah >p {
    /* margin-left: 37px;
    margin-top: 9px; */
    padding: 24px 0px 12px 0px;;
  }
  .draweditor-area {
    max-width: 1660px;
  }
}
/* #mydivfv{
  position: absolute;
  z-index: 9;
} */
.mydivheader {
  cursor: move;
  z-index: 10;
  /* width: 160px;
  height: 160px; */
}
.draweditor-area {
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 41px;
}
.wrap-canvas-background-color, .wrap-text {
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.wrap-text {
    text-align: center;
    margin:auto;
    /* max-width: 400px; */
}
.right-column {
    text-align: center;
}
.text-color{
    height: 41px !important;
    border-radius: 5px !important;
    /* border: 1px solid lightgrey; */
    padding: 5px;
    /* width: 52px; */
}
.text-size{
    height: 41px !important;
    border-radius: 5px !important;
    border: 1px solid lightgrey;
    padding: 8px;
    width: 76px;
}
.setOvelayElement{
    position: absolute;
    left: 0px;
}


.nav-tabs .nav-lin {
    color: #8A8A8F;
}
.nav-tabs .nav-lin {
    margin-bottom: -1px;
    background: 0 0;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    font-size: 18px;
}
.nav-lin{
    display: block;
    font-size:20px;
    padding: 0.5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#image-div{
   display:none;
}
#widget-div{
   display:none;
}
#weather-div{
   display:none;
}

/* .select{
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    /* border-bottom: 2px solid #c4171e  !important;
    color: #C4171E !important;
} */
.select {
    color: #c4171e!important;
    /* background-color: #c4171e!important; */
    border-bottom: 2px solid #c4171e !important;
    font-weight: bold;
}
.clicked{
   color: #FFF;
    background-color: #C4171E;
    border: 1px solid #C4171E;
}
.align{
       border: 1px solid #c4171e;
       padding: 6px;
    border-radius: 5px;
    cursor: pointer;
}
.rowalign {
    border: 1px solid #c4171e;
    padding: 6px;
    border-radius: 5px;
    cursor: pointer;
}
.rowclicked {
    color: #FFF;
    background-color: #C4171E;
    border: 1px solid #C4171E;
}

/* .hr1{
display: grid;   
height:12rem;
/* overflow: hidden; 
border-bottom:1px solid green ;
}
.hr2{
 display: grid;  
 height:12rem;
 /* overflow: hidden; 
 border-bottom:1px solid green ;
}
.hr3{
display: grid;  
 height:12rem;
 /* overflow: hidden;
} */
.col{
   flex: 0 0 0%;
   padding:0px;
}
.container-fluid{
   padding-right: 11px;
    padding-left: 11px;
}
div.hr1:empty:not(:focus):before {
	content: attr(data-text);
  color: #999999;
}
div.hr2:empty:not(:focus):before {
	content: attr(data-text);
  color: #999999;
}
div.hr3:empty:not(:focus):before {
	content: attr(data-text);
  color: #999999;
}
.rowAlignclicked {
    color: #FFF;
    background-color: #C4171E;
    border: 1px solid #C4171E;
}
.rotate:hover{
   background:#C4171E;
   color:white;
}
.rotate{
   padding:5px;
}
.container-fluid > .row{
   position:relative;
}
#firstNo{
   position: relative;
    right: -26px;
}
#thirdrowNo{
   position: relative;
   left: 94px;
}
#secondNo{
   position: relative;
  
}
style attribute {
    text-align: justify;
}
@media screen and (max-width: 1550px) {
   #thirdrowNo{
   /* position: relative; */
   left: 55px;
}
}
#DIV{
    width: 98%;
    border-right:1px solid #dee2e6;
    border-top:1px solid #dee2e6;
    border-bottom:1px solid #dee2e6;
    border-left:1px solid #dee2e6;
    padding:8px;
 }
 .no-border{
    outline: none;
 }
 .square-shape-template {
    height: 93px;
    width: 93px;
    margin: auto;
    background-color: #b7b3b3;
    color: #6a6565;
    font-size: 45px;
    text-align: center;
    padding-top: 9px;
}
.vertical-shape-template {
    height: 92px;
    width: 67%;
    margin: auto;
    background-color: #b7b3b3;
    color: #6a6565;
    font-size: 45px;
    text-align: center;
    padding-top: 7px;
}
.horizontal-shape-template {
    height: 62px;
    width: 90px;
    margin-top: 15px!important;
    margin: auto;
    margin-bottom: 15px!important;
    background-color: #b7b3b3;
    color: #6a6565;
    font-size: 38px;
    text-align: center;
}
.w-100-px{
width: 100px;
}
.w-94-px{
    width: 94px;
}
button[rel="horizontal"]{
 margin-top:auto;
}
.item-menu {
  line-height: 1;
  width: 25%;
}
.marqueeClicked {
    color: #FFF;
    background-color: #C4171E;
    border: 1px solid #C4171E;
}
.ml-12{
    margin-left: 12%;
}
.preview-box{
    min-height: 70px;
    width: 100%;
    background: white;
    padding: 5px;
    border-radius: 5px;
}
.bg-red-theme-btn{
    background-color: #C4171E;
    color: #fff;
    width: fit-content;
    padding: 10px;
    border-radius: 5px;
}
.action-clicked {
    color: #FFF;
    background-color: #C4171E;
    border: 1px solid #C4171E;
}
.remove-select-item{
    line-height: 0;
}
.bottom-button-wrapper {
    display: flex;
    justify-content: center;
    gap: 5px;
}