/* CSS Document */

#bdy {
    visibility: hidden;
}
.positionBtns
{
    position:absolute;
    left:10px;
    top:50px;
    z-index:999;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.magButton {
    position: relative;
    left: 0px;
    top: 0px;
    background-color: #cccccc !important;
}


.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.btn-250 {
    width: 250px;
}

.swatches {
    position: absolute;
}

.design-tools {
    vertical-align: middle;
}

.designElement {
    position: absolute;
}

.designerBdy {
    width: 100%;
    background-color: #fff;
   
}
@media(min-width:640px) {
    .designerBdy {
    min-height:600px;
    }
}

.position-element {
    position: absolute;
}

.sizes-container
{
    max-height:160px;
    overflow-x:hidden;
    overflow-y:auto;
}

.modal-vertical-centered {
    transform: translate(0, 50%) !important;
    -ms-transform: translate(0, 50%) !important; /* IE 9 */
    -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

#designerModal {
    /*display: flex !important;
  align-items: center;*/
}

#designr {
    width: 100%;
    min-height: 600px;
}

.modal-backdrop {
    background-color: #000;
}

.modal.modal-wide .modal-dialog {
    width: 750px;
}
.modal.modal-std .modal-dialog {
    width: 850px;
    
}
.modal.modal-sm .modal-dialog {padding:20px;
    padding:20px;
    width: 450px;
    
}
.notice-box{
    padding:20px;
    
}
body .modal {
    /* new custom width */
    /* must be half of the width, minus scrollbar on the left (30px) */
    /*// margin-left: -280px;*/
}

#btnReset {
    position: absolute;
    bottom: -35px;
    right: 0px;
}


#btnPos1 {
    /*position:absolute;
	bottom:2px;
	left:2px;*/
}

#btnPos2 {
    /*position:absolute;
	bottom:2px;
	left:100px;*/
}


#myLogosBox {
    border-right-style: solid;
    border-right-color: #eee;
}

h2 {
    font-family: "Karla", sans-serif;
}

p {
    font-family: "Karla", sans-serif;
}

#container {
    /*width:760px;*/
    /*height:630px;*/
    /*margin-left:auto;
	margin-right:auto;*/
}

.swatches {
    float: left;
    /*width:200px;*/
    /*height:500px;*/
    /*border:thin;*/
    margin: 10px;
    /*border-color:#000;*/
}

.design-surface {
    position: relative;
}

#design-tools {
    position: relative;
    float: right;
    margin-left: auto;
    margin-right: auto;
    border: thin;
    margin: 5px;
    /*width:490px;*/
    padding-right: 20px;
}



#imageCanvas {
    position: absolute;
    top: 0px;
    left: 0px;
    border: thin;
    z-index: 0;
}

#logoCanvas {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9998;
}

#printAreaCanvas {
    top: 0px;
    left: 0px;
    z-index: 9999;
}

#textCanvas {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

#OutputCanvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

#OutputCanvasBack {
    position: absolute;
    top: 0px;
    left: 0px;
}

#CombinedCanvas {
    position: absolute;
    top: -5000px;
    left: 0px;
}



#controlPanel {
    position: inherit;
    top: 0px;
    left: 0px;
    width: 100%;
}

#artworkArea {
    position: absolute;
    top: 0px;
    left: 0px;
}

#ddFontSize {
    width: 120px;
}

#ddFont {
    width: 120px;
}

#clr {
    width: 50px;
    height: 30px;
}

#clr2 {
    width: 50px;
    height: 30px;
}

/* Styles specific to this particular page */
.scroll-pane {
    width: 100%;
    max-height: 120px;
    overflow: auto;
}

    .scroll-pane p {
        margin: 5px 0;
    }

#zoom {
    border: 1px black solid;
    box-shadow: 5px 5px 10px #1e1e1e;
}

.loading {
    width: 300px;
    padding: 20px;
   vertical-align:middle;
   
}

.modal.modal-wide .modal-dialog {
  width: 95%;
  max-width:1100px;
}
/*.modal-wide .modal-content {
  overflow-y: auto;
}*/
.loaderContainer
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}