@font-face {font-family: futura;src: url(fonts/futura-bold.ttf); font-weight: bold;}
@font-face {font-family: futura;src: url(fonts/futura-normal.ttf); font-weight: normal;}

@font-face {font-family: gotham;src: url(fonts/gotham-normal.ttf); font-weight: normal;}
@font-face {font-family: gotham;src: url(fonts/gotham-bold.ttf); font-weight: bold;}

@font-face {font-family: oswald;src: url(fonts/oswald-normal.ttf); font-weight: normal;}
@font-face {font-family: oswald;src: url(fonts/oswald-bold.ttf); font-weight: bold;}

@font-face {font-family: raleway;src: url(fonts/raleway-normal.ttf); font-weight: normal;}
@font-face {font-family: raleway;src: url(fonts/raleway-bold.ttf); font-weight: bold;}

@font-face {font-family: garamond;src: url(fonts/garamonditc-book.ttf); font-weight: normal;}
@font-face {font-family: garamond;src: url(fonts/garamonditc-bold.ttf); font-weight: bold;}

@font-face {font-family: lato;src: url(fonts/Lato-Semibold.ttf); font-weight: normal;}

@font-face {font-family: montserrat;src: url(fonts/montserrat-light.ttf); font-weight: normal;}
@font-face {font-family: montserrat;src: url(fonts/montserrat-regular.ttf); font-weight: bold;}


@font-face {font-family: helveticaboldcondensed;src: url(fonts/helvetica-bold-condensed.otf); font-weight: normal;}

.truncate{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-item{ 
    width: 120px;
    margin: 5px;
}
.grid-item img{ 
    box-shadow: 2px 2px 2px rgb(0,0,0,.4);
    border: 1px solid #dddddd;
    cursor: pointer;
}

.grid-item:hover { 
    transition: transform .2s;
    transform: scale(1.1);
    z-index: 999;
}


.orderrow .ordercolumn{
    font: bold 12pt raleway;
    color: #58574a;
    padding: 4px;
    cursor: pointer;
}

.addressrow{
    font: bold 10pt raleway;
    color: #58574a;
    padding: 4px;
    cursor: pointer;
}

.addressrow:hover{
    background-color: #B3C3FF !important;
}

#previewdiv{
    margin: 3px;
    width:200px;
    height:200px;
    background-repeat:no-repeat;
    background-size:cover;
    border: 1px solid #eeeeee;
}

.hiddenrow{
    width: 1200px;
    height: 400px;
    display: none;
    background-color: #ffffff;
    border-bottom: 2px solid #4d5b91;
    padding-top: 20px;
    padding-left: 40px;
}

.hiddenrowlarge{
    width: 1160px;
    height: 800px;
    display: none;
    background-color: #fbfbfb;
    border-bottom: 4px solid #4d5b91;
    padding-top: 20px;
    padding-left: 40px;
}

.hiddenrowproduction{
    width: 1040px;
    height: 600px;
    display: none;
    background-color: #fbfbfb;
    border-bottom: 4px solid #4d5b91;
    padding-top: 20px;
    padding-left: 40px;
}
.hiddenaddressrow{
    display: none;
    border-bottom: 2px solid #4d5b91;
    height: 600px;
    padding-top: 20px;
    padding-left: 40px;
}


.ordercolumn{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orderrow:hover{
    background-color: #B3C3FF !important;
}

#confirmationbutton{
    border: 1px solid #eeeeee;
    padding: 10px;
    margin: 50px 0px 10px 0px;

    background-color: #00ae42;
    color: #ffffff;

    font: bold 16pt futura;
    width: 200px;

    cursor: pointer;
}

#cancelbutton{
    border: 1px solid #eeeeee;
    padding: 10px;
    margin: 50px 0px 10px 0px;

    background-color: #00ae42;
    color: #ffffff;

    font: bold 16pt futura;
    width: 200px;

    cursor: pointer;
}

#gobackbutton{
    border: 1px solid #a6a6a6;
    padding: 10px;
    margin: 50px 0px 10px 0px;

    background-color: #eeeeee;
    color: #58574a;

    font: bold 16pt futura;
    width: 200px;

    cursor: pointer;
}
.specs_box{
    padding: 5px 0px 5px 0px;
    color: #58574a;
    font: bold 10pt futura;
    cursor: pointer;
    border: 1px solid #777777;
    width: 110px;
    text-align: center;
    display: inline-block;
    margin: 3px;
}


.specs_box:hover{
    color: #ffffff;
    background-color: #00ae42;
}

.button_small{
    padding: 5px 0px 5px 0px;
    background-color: #00ae42;
    color: #ffffff;
    font: bold 10pt futura;
    cursor: pointer;
    border: 1px solid #ffffff;
    width: 85px;
    text-align: center;
    display: inline-block;
    margin: 3px;
}


.button_small:hover{
    color: #ffffff;
    background-color: #001b71;
}


.checkboxlabel{
    font: bold 10pt gotham;
    width: 100px;
}

#menu {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 1100px;
    height: 40px;
    font: bold 12pt lato;
    display: flex;
    justify-content: space-around;
    vertical-align: middle;

}

.menu-button{
    cursor: pointer;
    transition: transform .1s;
    color: #262f68;
    margin-top: 10px;
}
.menu-button:hover{
    color: #0000ff;
    transform: scale(1.1); 
}

html {
    height: 100%;
    font: normal 12pt futura;
}

body{
    margin-top: 0px;
    margin-left: 0px;
}


textarea{
    font: bold 9pt gotham;
}

.labeltext{
    font: normal 9pt raleway;
    text-transform: uppercase;
    margin-left: 6px;
}

legend{
    font: normal 12pt raleway;
    text-align: left;
}

.banner{
    width: 100%;
    padding: 20px 0px 20px 0px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto; 
    background-color: #f9f9f9;
    font: bold 16pt gotham;
}

textarea { 
    padding: 3px;
    margin: 3px;
    font: normal 10pt futura;
    color: #404040;
    text-align: left;
}




#dropzonecustomer{
    background-image: url('images/icon_upload-01.png');
    background-repeat: no-repeat;
    background-color: #eeeeee;
    border: dashed 2px #808080;
    width: 280px;
    height: 102px;
    min-height: 100px;
    font: bold 8pt gotham;
    margin: 10px;
    overflow-y: scroll;
    display: inline-block;

}

#dropzoneartwork{
    background-image: url('images/icon_upload-02.png');
    background-repeat: no-repeat;
    background-color: #eeeeee;
    border: dashed 2px #808080;
    width: 280px;
    height: 102px;
    min-height: 100px;
    font: bold 8pt gotham;
    margin: 10px;
    overflow-y: scroll;
    display: inline-block;
}


#dropzoneother{
    background-image: url('images/icon_upload-03.png');
    background-repeat: no-repeat;
    background-color: #eeeeee;
    border: dashed 2px #808080;
    width: 280px;
    height: 102px;
    min-height: 100px;
    font: bold 8pt gotham;
    margin: 10px;
    overflow-y: scroll;
    display: inline-block;
}


.remove{
    cursor: pointer;
    width: 50px;
    color: #808080;
    font: bold 12pt gotham;
}

.remove:hover{
    color: #ff0000;
}

.sidebar{
    padding: 20px 40px 20px 20px;
    width: 200px;
    display: inline;
    height: 500px;
    text-align: center;
}

.custombutton{
    border: 1px solid #eeeeee;
    padding: 10px;
    margin: 10px 0px 10px 0px;

    background-color: #ffffff;
    color: #58574a;

    font: bold 12pt futura;
    width: 170px;

    cursor: pointer;
}

.custombutton:hover{
    color: #ffffff;
    background-color: #001b71;
}

.modifyorderbuttons{
    border: 1px solid #eeeeee;
    padding: 8px;
    float: right;
    background-color: #001b71;
    color: #ffffff;

    font: bold 12pt futura;
    width: 150px;

    cursor: pointer;
}

.modifyorderbuttons:hover{
    color: #ffffff;
    background-color: #00aeef;
}

.modifyorderbuttons2{
    border: 1px solid #eeeeee;
    padding: 5px;
    float: right;
    background-color: #00ae42;
    color: #ffffff;
    font: normal 9pt helveticaboldcondensed;
    width: 80px;
    cursor: pointer;
}

.modifyorderbuttons2:hover{
    color:  #ffffff;
    background-color: #001b71;
    
}

.custombuttonblue{
    border: 1px solid #eeeeee;
    padding: 10px;
    margin: 10px 0px 10px 0px;

    background-color: #001b71;
    color: #ffffff;

    font: bold 12pt futura;
    width: 170px;

    cursor: pointer;
}

.custombuttonblue:hover{
    color: #ffffff;
    background-color: #00aeef;
}





.custombutton3{
    border: 1px solid #cccccc;
    padding: 5px;
    margin: 0px;
    background-color: #ffffff;
    color: #383838;
    font: bold 10pt futura;
    width: 110px;

    cursor: pointer;
}

.custombutton3:hover{
    color: #ffffff;
    background-color: #00aeef;
}


.custombuttondisabled{
    cursor: not-allowed;
    font: bold 14pt gotham;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    height: 35px;
    color: rgb(255, 255, 255);
    background: #eeeeee;
    border: 1px solid #bbbbbb;
    display: inline-block;    
}
.custombuttongreen{
    cursor: pointer;
    font: bold 14pt gotham;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    height: 35px;
    color: rgb(255, 255, 255);
    background: rgb(0, 166, 81) none repeat scroll 0% 0%;
    border: 1px solid rgb(0, 166, 81);
    display: inline-block;    
}

.custombuttongreen:hover{
    cursor: pointer;
    color: rgb(0, 166, 81);
    background: #ffffff;
    border: 1px solid #00a651;
    display: inline-block;    
}

.custombuttongray{
    cursor: pointer;
    font: bold 14pt gotham;
    margin-top: 20px;
    margin-right: 30px;
    padding-left: 20px;
    padding-right: 20px;
    height: 35px;
    color: #555555;
    border: 1px solid #555555;
    background-color: #ffffff;
    display: inline-block;

}

.custombuttongray:hover{
    color: #ffffff;
    border: 1px solid #555555;
    background-color: #555555;
    display: inline-block;

}

#bc_loadingdiv{
    display: block;
    background-color: #000000;
    opacity: .5;
    width:525px;
    height:325px;
    position: absolute;
    z-index: 999;
    display: none;
 }

#bc_preview{
   display: inline-block;
   background-image: url('templates/businesscards/01. Baptist Health.png');
   margin-left: 30px;
   margin-top: 20px;
   width:525px;
   height:320px;
   background-repeat:no-repeat;
   background-size:cover;
   border: 1px solid #eeeeee;
   box-shadow: 4px 4px 2px rgb(0,0,0,.2);
}

#envelope_preview{
    display: inline-block;
    background-image: url('templates/envelopes/01. Baptist Health.png');
    margin-left: 20px;
    margin-top: 20px;
    width:684px;
    height:297px;
    background-repeat:no-repeat;
    background-size:cover;
    border: 1px solid #eeeeee;
    box-shadow: 4px 4px 2px rgb(0,0,0,.2);
}

#letterhead_preview{
    display: inline-block;
    background-image: url('templates/letterheads/01. Baptist Health.png');
    margin-left: 20px;
    margin-top: 20px;
    width:459px;
    height:594px;
    background-repeat:no-repeat;
    background-size:cover;
    border: 1px solid #eeeeee;
    box-shadow: 4px 4px 2px rgb(0,0,0,.2);
 }

#bcbacker_preview{
    display: inline-block;
    background-image: url('templates/businesscards/nobacker.png');
    margin-left: 30px;
    width:352px;
    height:200px;
    background-repeat:no-repeat;
    background-size:cover;
    border: 1px solid #eeeeee;
    box-shadow: 4px 4px 2px rgb(0,0,0,.2);
 }

.bcinput, .envelopeinput, .letterheadinput{
    position: relative;
    font: normal 12pt garamond !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    padding: 0px !important;
    color: #153c85 !important;
    background-color: #ffffff;
    margin: 0px !important;    
}

select{
    background-color: #ffffff;
    padding: 5px;
    font: bold 11pt gotham;
    color: #383838;
    border: 1px solid #777777;
}



.inputlabel{
    text-align: right;
    font: bold 10pt gotham;
    width: 100px;
    vertical-align: top;
    padding-top: 8px;
}
input{
    border: 2px solid rgba(0,0,0,.15);
    padding: 0px;
    color: #58574a;
    background-color: #ffffff;
}

input[type=checkbox]{
    transform: scale(2);
}

.shirtcolors, .itemtypes{
    transform: scale(1) !important;
}

input[type=date]{
    color: #58574a;
    font: bold 12pt futura;
    margin: 5px;
    padding: 5px;
}

input[type=text]{
    color: #58574a;
    font: bold 12pt futura;
    margin: 5px;
    padding: 5px;
}
input[type=password]{
    color: #58574a;
    font: bold 12pt futura;
    margin: 5px;
    padding: 5px;
}


textarea{
    color: #58574a;
    font: bold 12pt futura;
    margin: 5px;
    padding: 5px;
}

input[type=text]:hover{
    color: #0000ff;
    background-color: #ffffff;
    outline: thin solid;
    outline-color: blue;
    outline-style: dashed;	
}

#footer{
    background-color: #262f68;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    margin-bottom: 50px;
    width: 1200px;
    height: 15px;
}

.truncate{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropzone-div{
    overflow-y: scroll;
    max-height: 100px;
}

#notification-box{
    display: none;
    position: fixed;
    left: 10px;
    top: 20px;
    border-radius: 10px;
    width: 200px;
    height: 50px;
    padding: 10px;
    background-color: #1A73E8;
    color: #ffffff;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

#main-div{
    
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}

.filename{
    font: normal 9pt raleway;
    color: #333333;
    text-decoration: none;
}
.filename:hover{
    color: #0000ff;
}

.statusbox{
    text-transform: uppercase;
    color: #ffffff;
    font-size: 10pt;
    min-width: 150px;
    height: 20px;
    display: inline-block;
    padding-top: 3px;
    margin-top: 1px;
    text-shadow: 1px 1px 1px #444444;
    border-radius: 2px;
}

.blinker {
    animation: blinker 1s linear infinite;
}
  
  @keyframes blinker {
    50% {
      opacity: 0;
    }
}


.location{
    width: 25px;
    text-align: center;
    margin: 0px !important;
    padding: 0px !important;
    font: bold 10pt futura !important;
}

::placeholder {
    color: #eeeeee;
    
  }

.dialogbutton{
    color: #eeeeee;
    background-color: #0E76A9;
    border: 1px solid #0E76A9;
    height: 40px;
    width: 200px;
    cursor: pointer;
    font: bold 12pt futura;
    margin: 0px;
}
.dialogbutton:hover{
    color: #ffffff;
    text-shadow: 0px 0px 3px 	#ffffff;
}

#dialogBoxDiv{
    font: bold 12pt gotham;
    position: relative;
    /*
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    */

    width: 400px;
    height: 230px;
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
    text-align: center;
}

#dialogBoxDivWrapper{
    margin-top: 200px;

}

#dialogBoxDivTitleBar{
    font: bold 12pt gotham;
    color: #ffffff;
    position: relative;
    padding-top: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    width: 400px;
    height: 30px;
    margin-right: auto;
    margin-left: auto;
    background-color: #0E76A9;
    text-align: center;
    cursor: default;
}

#signoutbuttons{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    width: 400px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #0E76A9;
}

#lightbox{
    position: absolute;
    z-index: 1000;
    height: 120%;
    width: 100%;
    background-color: rgba(0, 0, 0, .70);
    margin: 0px;    
    top: 0px;
    left: 0px;
    height: 100%;
    overflow: hidden;
    display: block;
}

#lightbox-pdf{
    position: fixed;
    z-index: 1000;
    height: 120%;
    width: 100%;
    background-color: rgba(0, 0, 0, .70);
    margin: 0px;    
    top: 0px;
    left: 0px;
    height: 100%;
    overflow: hidden;
    display: none;
    text-align: center;
}

.shipping{
    font: bold 9pt gotham !important;
    padding: 2px;
    margin: 1px !important;
}