/*remove dotted outline*/
a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}
html, body { height: 100%;  }
html, body, h1, h2, h3, h4, h5, h6{ font-family: Roboto, sans-serif;}
/*body{background: url('/assets/backgrounds/az_subtle.png');}*/
body{background-color: #ECF0F1 !important;}
html			
{    
    color: #000;
	font-size: 14px;    
}
.public-company-logo {text-align: center; margin-top: 20px; margin-bottom: 20px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #555;}
.public-company-logo img {max-width: 300px; max-height: 80px; margin-bottom: 20px;}
.public-company-logo a {color: inherit; transition: color 0.3s;}
.public-company-logo a:hover {color: #555;}

.content
{
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
    position: relative;    
    display: block;
}
#wrapper
{
    width: 100%;
    position: relative;
    text-align: left;
}
#headerWrapper{}
#header
{ 
    width: 100%;    
    position: relative;
    width: 100%; 
}

#header .content
{

}
.header-my-account {position: absolute; right: 10px; bottom: 6px;}

.main-menu {font-size: 0; width: 100%; background: #fff; position: relative;} /*background:  rgba( 30, 139, 195, .7);*/
.main-menu li{display: inline-block; list-style: none; }
.main-menu li.active a, .main-menu li a:hover{background: #555;}
.main-menu li a {display: block; padding: 12px 15px; color: #fff; text-decoration: none; font-size: 14px; height: 45px;}

.smportrait
{
    border-radius: 100%;
    width: 32px;
    height: 32px;
}

#header h1
{
    position: absolute;
    bottom: 0;
    right: 0;    
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;   
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 20px;
    line-height: 16px;
    vertical-align: baseline;
}


div.links ul
{
    margin: 0 0 40px 0;
}
div.links ul li
{
    margin: 0 0 0 0;
    list-style-type: none;
}

ul.square
{ 
    list-style: square;
}
ul.square li
{
    margin-left: 20px;
}

.navigation {position: relative; min-height: 20px; padding: 10px 0;}
.navigation.center {text-align: center;}
.navigation li {display: inline-block; text-transform: uppercase; margin-right: 10px; font-size: 12px; letter-spacing: 1px;}
.navigation.center li {margin: 0 10px;}
.navigation .zmdi {font-size: 16px;}
.navigation.center .zmdi {font-size: 20px;}
.navigation .right{ position: absolute; right: 0; top: 0;}
.navigation .right li {margin-left: 10px; margin-right: 0;}
.navigation li a {color: #aaa; text-decoration: none;}
.navigation li a:hover {color: #555;}
.navigation a.login {color: #4183D7;}
.navigation a.login:hover {color: #2C3E50;}

#header .pageHeader
{
    padding-top: 20px;
    color: #222;
    font-size: 18px;
}
#header .pageHeader a {color: #222; text-decoration: none;}
#header .company-name {padding: 40px 0 20px 0;  font-size: 18px; font-weight: bold; letter-spacing: 1px; text-align: center; color: #aaa;}
#header .company-details
{
    position: absolute;
    left: 5px;
    top: 20px;

    text-align: right;
    color: #aaa; /* #336699; */
    font-size: 14px;
    font-weight: normal !important;  
}

#header .foot a
{
    color: #aaa;
}
#header .menu li {display: inline-block; margin-right: 10px;}

h2.home {font-size: 24px; margin: 20px 0 30px 0;}

#body
{
    padding: 0 0 0 0;    
    color: #000; 
    font-size: 14px;  
    margin-bottom: 20px;
}
#body .docPreview {min-height: 500px;}
#body h2.header
{
    color: #336699;
    margin: 20px 0;    
    font-weight: normal;
    font-size: 14px;
}
#body .header .pageType
{
    font-weight: bolder;
    margin-right: 10px;
    text-transform: uppercase;

}
#body div.pageType
{
    margin-bottom: 50px;
    color: #888;
    text-transform: uppercase;
}
#body div.topHome
{
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    font-weight: normal;
}

#body div.bottomHome
{
    float: right;
    margin: 20px 0;
    font-weight: normal;
}

.topHome a, .bottomHome a
{
    color: #336699;
}


#footer
{
    margin: 0 auto;
    padding: 0 8px;
    max-width: 900px;
    /*width: 100%;*/
    position: relative;    
    display: block;
}

#footer .content
{
    /*padding: 0 10px;*/
}
#footer, #footer a
{
    color: #aaa; /* #ccffff; */
    text-decoration: none;
    font-weight: normal;
}
#footer b > a { font-weight: bold;}
#footer a:hover
{
    text-decoration: underline;
}


#footer .credit b
{
    font-weight: bolder !important;
    color: #888;
}

.content-box{display: flex; flex-direction: row;}
.content-box > div {flex-grow: 1; width: 40%;  margin-bottom: 15px;}
.content-box .social {flex-grow: 0; width: 120px; text-align: center; font-size: 20px;}
.content-box .social li {display: inline-block; margin: 0 6px;}
.content-box .social a {color: #bbb !important;}
.content-box .credit {text-align: right;}

.content-flex{display: flex; flex-direction: row;}
.content-flex > div {flex-grow: 1; width: 40%;  margin-bottom: 15px;}
.content-flex .social {flex-grow: 0; width: 130px; text-align: center; font-size: 20px;}
.content-flex .social li {display: inline-block; margin: 0 6px;}
.content-flex .credit {text-align: right;}


/*=== COLUMN ==============================*/
div.column
{
	float: left;
}



th
{
    text-align: left; color: #000; font-weight: 500;
}
td
{
    text-align: left;
}
.tright, th.tright, td.tright, .tright input
{
    text-align: right;
}
.tleft, th.tleft, td.tleft
{
    text-align: left;
}
.tcenter, th.tcenter, td.tcenter
{
    text-align: center;
}

td.gray, th.gray
{
    background: #eee;
}


.nobtmborder tfoot, .nobtmborder 
{
    border: none;
}

.nobtmborder tfoot tr:last-child td
{
    border: none;
}

table.items
{
    margin-top: 20px;
}
table.items th
{
    text-align: left;
    padding: 0 10px 5px 10px;
}
table.items td
{
    padding: 10px 10px 20px 10px;
    vertical-align: top;
}
table.items tr
{
    border-top: 1px solid #ddd;
}
table.items tbody tr
{
   /* background: #f8f8f8;*/
}
table.items thead tr
{
    border-top: none;
}
table.items tfoot.pad td
{
    padding-top: 40px;
    padding-bottom: 30px;
}  
table.items .thm img
{
    max-width: 100px;
    max-height: 100px;
    min-width: 50px;
    min-height: 50px;
    border: 1px solid #999;
}

.portalPage
{
    border: 1px solid #ccc;
    padding: 50px 30px 70px 30px;
    /*  -moz-box-shadow: 3px 3px 3px #eee;
    -webkit-box-shadow: 3px 3px 3px #eee;
    box-shadow: 3px 3px 3px #eee;
    */
    background: #fff;
}
.portalPage .rw
{
    clear: both;
}
.portalPage .logo
{
    margin-bottom: 60px;
}

/*=== DFORM ==============================*/

.dform
{
    margin-bottom: 30px;
    background: #fff;
    font-weight: normal;
    color: #777;
    position: relative;        
    padding: 12px 0;
    border-radius: 2px;     
}
.dform > .header
{
    border-bottom: 1px solid #eee; 
    padding: 10px 0 0 0;
    margin-bottom: 15px;
    /*background: url('../assets/images/dform_header.png');*/
}
.dform .nobtmmargin
{
    margin-bottom: 0;
}

.dform .header h2
{
    padding: 0 0 0 10px;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    margin: 0 10px 8px 0;
}
.dform .header ul
{
    
}

.dform-options 
{
    position: absolute; right: 10px; top: 15px;
}

.dform-options > li, .section .options li
{
    display: inline-block;
    margin-left: 5px;
    text-transform: uppercase;
}
.dform-options .dropdown-menu {text-transform: none;}
.dform-options > li > a, .section .options li a, .dform-options > li > .dropdown
{
    padding: 6px 8px;
    color: #888;
    font-size: 12px;
    background: #eee;
    border-radius: 3px 3px 3px 3px; 
    -webkit-border-radius: 3px 3px 3px 3px; 
    -moz-border-radius: 3px 3px 3px 3px;  
    text-decoration: none !important;
}
.dform-options > li > a:hover, .section .options li a:hover, .dform-options > li > .dropdown:hover
{
    text-decoration: none;
    color: #fff;
    background: #555;
    border-radius: 3px 3px 3px 3px;
}
/*.dform .options li, .section .options li
{
    display: inline-block;
    margin-left: 5px;
}
.dform .options li a, .section .options li a
{
    padding: 2px 5px;
    color: #888;
    background: #eee;
    border-radius: 3px 3px 3px 3px; 
    -webkit-border-radius: 3px 3px 3px 3px; 
    -moz-border-radius: 3px 3px 3px 3px;  
}*/
.dform .rw, .filter .rw, .modal .rw
{
    width: 100%;
    margin-bottom: 10px;
}
.dform .flat
{
    margin-bottom: 0;
}
.dform .rw > label:first-child, .dform .rw > div > label:first-child, .dform .rw .top > label:first-child,
.modalcontent .rw > label:first-child, .modalcontent .rw > div > label:first-child,
.dform .command > label:first-child, .modalcontent .command > label:first-child, .rw .form-group label:first-child, .rw form-group label, .col-md-6 > div > label:first-child
{
    display: inline-block;
    text-align: right;
    margin-right: 10px;
    font-weight: 600;
    font-size: 11px;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rw input[type=checkbox] + label{margin-left: 6px; color: #888; font-weight: normal; vertical-align: middle;}
.rw input[type=radio] + label{margin-left: 2px; margin-right: 12px; color: #888; font-weight: normal; vertical-align: middle;}
.rw > div, .filter .rw > div, .modalcontent .rw > div, .modalcontent .command > div
{
    display: inline-block;
    line-height: 20px;
    vertical-align: top;
}
.dform .rw .row {display: block;}
.rw .form-group, .rw > div.form-group, .rw div.form-group {display: block;}
.rw .form-group.inline{display: inline-block;}
.rw .form-group input[type=text], .form-group textarea, .form-group select {width: 100%;}
.form-group .select2-container, .form-group textarea {display: block;}
.dform .rw > div, .filter .rw > div, .modalcontent .rw > div, .dform .command > div, .modalcontent .command > div
{

    line-height: 20px;
}
.dform .rw div.top, .modal .rw div.top
{
    vertical-align: top;
}
.dform .rw div .x, .modal .rw div .x
{
    display: block;
    color: #999;
    font-size: 11px;
}
.modalcontent .rw .row {display: block;}
.dform .command
{
    margin: 30px 0 20px 0;
}
.command .cancel, .incommand .cancel
{
    color: #555;
    margin-left: 10px;
    display: inline-block;
}
.command .cancel a, .incommand .cancel a
{
    margin-left: 5px;
    text-decoration: underline;
}
.dform .upimg
{ 
    padding: 3px 0 6px 0;
    text-align: left;
}
.dform .upimg img
{
    margin-bottom: 3px;
    display: block;
}
.in10
{
    margin-left: 10px;
    margin-bottom: 20px;
}
.top10
{
    margin-top: 10px;
}
.all10
{
    padding: 10px;
}

.nopad
{
    padding: 0;
}

.lblTop .rw > div > label:first-child
{
    display: block;
    text-align: left;
    padding-left: 0;
}

span.r
{
    color: #cc0000 !important;
    font-size: 16px;
    vertical-align: middle;
}
label.required
{
    color: #9e0b0f !important;
}
.lbl140 label.required
{
    background-position: 140px 0px;   
}
.lbl40 .rw > label:first-child, .lbl40 .rw > div > label:first-child, .lbl40 .command label, .lbl40 .top label
{
    width: 40px;
    display: inline-block;
}
.lbl60 .rw > label:first-child, .lbl60 .rw > div > label:first-child, .lbl60 .command label, .lbl60 .top label
{
    width: 60px;
    display: inline-block;
}
.lbl80 .rw > label:first-child, .lbl80 .rw > div > label:first-child, .lbl80 .command label, .lbl80 .top label
{
    width: 80px;
    display: inline-block;
}
.lbl100 .rw > label:first-child, .lbl100 .rw > div > label:first-child, .lbl100 .command label, .lbl100 .top label
{
    width: 100px;
    display: inline-block;
}
.lbl120 .rw > label:first-child, .lbl120 .rw > div > label:first-child, .lbl120 .command label, .lbl120 .top label
{
    width: 120px;
    display: inline-block;
}
.lbl140 .rw > label:first-child, .lbl140 .rw > div > label:first-child, .lbl140 .command label, .lbl140 .top label
{
    width: 140px;
    display: inline-block;
}
.lbl160 .rw > label:first-child, .lbl160 .rw > div > label:first-child, .lbl160 .command label, .lbl160 .top label
{
    width: 160px;
    display: inline-block;
}

.error
{
    border: 1px solid #9e0b0f;   
}
label.error
{
    border: none;
    margin-right: 10px;
    display: inline-block !important;
    font-weight: normal !important;
}


.invalid input, .invalid select
{
    display: inline-block;
}
.errMsg
{
    color: #fff;
    text-align: left;
    display: block !important;
}
.errMsg label {
    color: #ff0000 !important;
    display: inline-block;
    font-size: 12px !important;
    font-weight: normal !important;
    margin: 0 10px 0 0;
    padding-left: 0 !important;
    width: auto;
    text-align: left !important;
    text-transform: none !important;
}

.lbl60 .errMsg
{
    margin-left: 73px;
}
.lbl80 .errMsg
{
    margin-left: 93px;
}
.lbl100 .errMsg
{
    margin-left: 113px;
}
.lbl120 .errMsg
{
    margin-left: 133px;
}
.lbl140 .errMsg
{
    margin-left: 153px;
}
.lbl160 .errMsg
{
    margin-left: 173px;
}
.lbl180 .errMsg
{
    margin-left: 193px;
}
.errorRed
{
    background: #ffeeff;
    border: 1px solid #ff6666;
}
.errorRed + .select2 .select2-selection {
    background-color: #ffeeff !important;
    border: 1px solid #ff6666;
}


select option
{
    padding: 0 5px;
}

input
{
    padding: 4px;   
}
select {padding: 6px 4px;}

.center {text-align: center;}
input.right, input.money, .right
{
    text-align: right !important;
}

input.readonly
{
    border: solid 1px transparent;
	background: transparent;
}

.formbox
{
    margin: 10px 10px 10px 0;
    vertical-align: top;
    display: inline-block;
}




table.jobDetails td
{
    padding-bottom: 10px;
}
.rightBold
{
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
}
.leftBold
{
    font-weight: bold;
    text-align: left;
    padding-right: 10px;
    padding-bottom: 10px;
}

/*====== INVOICE INSTALLMENTS =========*/
.invInstallments
{
    width: 100%;
}
.invInstallments .schedule
{
    background: #eee;
    font-weight: bold;
    margin-bottom: 0;
    padding: 5px;
}
.invInstallments .head
{
    font-weight: bold;
    background: #ddd;
}
.invInstallments .item
{
    border-bottom: 1px solid #ddd;
    overflow: auto;
    padding: 10px 0;
}
.invInstallments .item a
{
    text-decoration: none;
}
.invInstallments .item:hover
{
    background: #ccff99;
}
.invInstallments .paid:hover
{
    background: #fff !important;
}
.invInstallments .item div
{
    vertical-align: middle;
}
.invInstallments .btns
{
    display: block;
    text-align: right;
}
.invInstallments .msg
{
    display: inline-block;
    margin-right: 20px;
    color: #aaa;
}
.invInstallments div div
{
    display: inline-block;
    min-width: 70px;
    padding: 5px;
}
.invInstallments .dueDate
{
    width: 70px;
}
.invInstallments .amount
{    
    width: 70px;
    text-align: right;
}
.invInstallments .balance
{
    width: 80px;
    text-align: right;
    font-weight: bold;
}
.invInstallments .terms
{
    width: 385px;
}
h2.paymentAmount
{
    font-size: 30px;
    text-align: center;
    color: #00b16a;
    margin-bottom: 0;
}
h2.paymentAmount div
{
    font-size: 10px;
    color: #888;
    text-align: left;
}

/*====== INVOICES =========*/
div.invoice
{
    padding: 70px 50px;
    border: 1px solid #aaa;
}
.invoice .head
{
    clear: both;
    overflow: auto;
    margin-bottom: 50px;
}
.invoice .head .logo
{
    float: left;
}
.invoice .head .info
{
    float: right;
    text-align: right;
}
.invoice h2
{
    margin-bottom: 50px;
}
.invoice table tfoot
{
    padding-top: 50px;
}
.invoice .business
{
    margin-bottom: 50px;
}

.invClientNotes
{
    background: #ffff99;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: left;
}

.item-quantity div{ width: 100%; text-align: center;}
.item-quantity div:first-child {height: 25px; }
.item-quantity .glyphicon {font-size: 18px; color: #e5e5e5;}
.item-quantity .glyphicon:hover {color: #888;}

.item-header
{
    margin-bottom: 0;
    padding-bottom: 5px;
    display: table;    
    font-size: 16px;
}
.item-header img
{
        width: 20px;
        height: 20px;
        border-radius: 3px;
        cursor:url(/app_themes/cursors/zoom.png), -moz-zoom-in;
        vertical-align: top;
        margin-left: 10px;

        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
.item-header img:hover {filter: none;}
.item-header span
{
    display: table-cell;
    vertical-align: bottom;
}

.standard-btn {display: inline-block; background: #333; color: #fff; padding: 10px 20px; margin-right: 20px; min-width: 100px; text-align: center; text-transform: uppercase; outline: none; border: none;}
.standard-btn:focus {color: #fff;}
.standard-btn:hover {background: #000; color: #fff; text-decoration: none;}
.standard-btn.primary-btn {background: #5cb85c;}
.standard-btn.primary-btn:hover{background: #26A65B;}

.action-btn {
    display: block; text-align: center; margin-bottom: 10px;
    border:1px solid #34740e; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
    background-color: #4ba614; background-image: -webkit-gradient(linear, left top, left bottom, from(#4ba614), to(#008c00));
    background-image: -webkit-linear-gradient(top, #4ba614, #008c00);
    background-image: -moz-linear-gradient(top, #4ba614, #008c00);
    background-image: -ms-linear-gradient(top, #4ba614, #008c00);
    background-image: -o-linear-gradient(top, #4ba614, #008c00);
    background-image: linear-gradient(to bottom, #4ba614, #008c00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4ba614, endColorstr=#008c00);
    text-transform: uppercase;
}
.action-back-btn {
    display: block; text-align: center;
    border:1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; font-weight:bold; color: #aaa;
    background-color: #eee; 
}
.action-btn:hover,.action-btn:active,.action-btn:focus {color: #fff;}
.action-back-btn:hover {color: #888;}

/*======= invoice-items ========*/
.invoice-items{  }
.invoice-items .addon {color: #3399ff;}
.goback {position: absolute; right: 50px;}
.continuewith{display: inline-block; margin-left: 10px;}
.invoice-items thead th {padding: 5px; border-bottom: 1px solid #ddd; color: #555; font-weight: normal;}

.invoice-items tbody tr td {border-bottom: 1px solid #e5e5e5; padding: 5px 5px 10px 5px;}
/*.invoice-items tbody tr:last-child td{border-bottom: none;}*/
.invoice-items:last-child tbody tr:last-child td{border-bottom: 1px solid #e5e5e5;}


.invoice-items tfoot td {border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; padding: 5px 5px 10px 5px;}
.invoice-items tfoot td {border-left: 1px solid #e5e5e5 !important;}

.invoice-items .btn {font-size: inherit; padding-bottom: 2px; margin-bottom: 10px;}

.invoice-items .form-control{font-size: 12px; padding: 0; height: auto;}
.invoice-items .dropdown button{border: none; width: 100%; border-radius: 0; height: 100%:}
.invoice-items input, .invoice-items textarea
{
    border: none;
    box-shadow: none !important;
    border-radius: none !important;
    width: 100%;  
}
.invoice-items textarea
{
    resize: none;
    /*height: 24px;*/
}
.invoice-items .outside
{
    border: none;
    background: none;
    width: 30px;
    padding: 0;
}
.invoice-items .txt {padding: 10px 10px;}
.invoice-items-pricing .item-footer {display: none; font-size: 12px;}
.item-description p { margin-bottom: 10px; color: #888; }
.item-description li
{
    display: inline-block;
    color: #888;
    font-style: italic;
}
.item-description li span { margin: 0 4px 0 6px; font-size: 10px; color: #ddd;}
.item-description li:first-child span{margin-left: 0;}

.price-faq li{margin: 20px 0 30px 0; font-size: 16px; color: #888;}
.price-faq li:first-child {border-top: 1px solid #eee; padding-top: 20px;}
.price-faq li b{color: #555;}

.product-category{margin-top: 60px;}
.product-category-title {margin: 20px 0 20px 0; padding: 0; font-size: 16px; font-weight: bold; color: #888;}
.product-category-description {color: #aaa;}
.product-category-heading{margin-bottom: 10px;}

.product-category:last-child {margin-bottom: 40px;}

.invoice-header{display: table; width: 100%;}
.invoice-header > div > div, .invoice-header > div > span{padding: 8px 5px;}
.invoice-header > div {display: table-cell; width: 33%; border-right: 1px solid #e5e5e5; }
.invoice-header > div > div {border-top: 1px solid #e5e5e5; padding-bottom: 10px;}
.invoice-header > div:last-child {text-align: right; width: 34%;}
.invoice-header > div:last-child {border-right:none;}

table.invoice
{
    border: 1px solid #ccc;
}
table.invoice thead th
{
    padding: 5px;
    border-bottom: 1px solid #ddd;
    background: #f5f5f5;
}
table.invoice td
{
    padding: 5px;
}

table.invoiceJob
{
    margin-bottom: 20px;
}

.invoice-balance {display: table; width: 100%;}
.invoice-balance .line {display: table-row;}
.invoice-balance .line > div {display: table-cell; padding: 5px; text-align: right;}
.invoice-balance .line > div:last-child {width: 80px;}
.invoice-balance .half-gap{width: 50%; border-bottom: none !important;}

table.invoiceJobItems
{
    color: #aaa;

    margin-top: 10px;
    padding: 0;
}
table.invoiceJobItems td
{
    margin: 0;
    padding: 0;
}
table.invoiceInstallments
{
    width: 100%;
}
table.invoiceInstallments td, table.invoiceInstallments th
{
    text-align: right;
    padding: 5px;    
}
table.invoiceInstallments tbody td
{
    border-bottom: 1px dashed #ccc;
}
table.invoiceInstallments tbody tr:nth-child(even)
{
    background: #f5f5f5;
}
table.invoiceInstallments tbody tr:nth-child(odd)
{
    background: #fcfcfc;
}
table.invoiceInstallments tr.unpaid:hover
{
    background: #cceecc;
    color: #000;
}


.poweredby
{
    text-align: right;
    margin-top: 50px;
}
.paynow
{
    padding: 20px;
    background: #ffffcc;
    text-align: center;
}
.paynow a
{
    margin-left: 20px;
}

.ccOptions
{
    position: absolute;
    height: 40px;
    width: 200px;
    margin: 0;  
}
.ccOptions td
{
    text-align: center;
    border: 1px solid #000;
    position: relative;
}
.ccOptions td label
{
    width: 50px;
    display: block;
    position: absolute;
    top: 0;
}
.ccOptions td input
{
    width: 50px;
    position: absolute;
    bottom: 0;
    display: block;
    background: red;
}

.doc-data-message {display: none; background: #fff; z-index: 90; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; padding: 100px;}
body.doc-data-message-active{}
.doc-data-message-active .doc-data-message {display: block;}
.doc-data-message ul {font-weight: bold; color: #222; margin: 20px 0 40px 0; list-style: square; padding-left: 15px;}

.participant-data {margin-bottom: 40px;}
.participant-data-fields {padding: 20px; border: 1px solid #ddd; margin-left: 0 !important; background: #f5f5f5;}



.referrals .partner
{
    width: 212px;
    -moz-box-shadow: 0px 0px 3px #777;
    -webkit-box-shadow: 0px 0px 3px #777;
    box-shadow: 0px 0px 3px #777;
    margin: 0 20px 20px 0;
    float: left;
    position: relative;
}
.partner .pic
{
    border-bottom: 1px solid #ddd;
}
.partner .brand
{
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
.partner .partnerThumb
{
    cursor:pointer;
	cursor:-moz-zoom-in;
	cursor:-webkit-zoom-in;
}
.partner .url
{
    padding: 10px;
    color: #888;
}
.partner .url a
{
    color: #888;
}

.partner .url p
{
    padding: 10px;
    font-weight: bold;
}
.partner .inquirySent
{
    position: absolute;
    top: 0;
    right: 0;
    width: 94px;
    height: 94px;
    display: block;
    background: url('/assets/images/requestSent.png') no-repeat;
    z-index: 10;
}





/*====== DOC PREVIEW =========*/
.docPreview
{        
    max-width: 900px;
    width: 100%;
    min-height: 400px;
    background: #fff; 
    margin: 0 auto 0 auto;    
    /**/font-size: 12px;
    border-radius: 2px;
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);*/
}
.paymentInstructions
{
    margin: 0 auto 20px auto;
    vertical-align: top;
}
.paymentInstructions .glyphicon-info-sign {font-size: 32px; margin-right: 10px; color: #99ccff;}
.paymentInstructions > div {display: inline-block; vertical-align: top; margin-top: 5px; font-size: 14px;}
.docPreview .doc
{
     
    position: relative;
    /*-moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    */
}
.docPreview hr.blue
{
    border:0;
    color:#99ccff;
    background:#99ccff;
    height:10px;
}
.docPreview .ribbon
{
    z-index: 1;
    position: absolute;
    top: -13px; 
}
.inputTitle
{
    padding: 6px 0 !important;
}
.inputBorderless
{
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}
.docPreview .settings
{
    background: #ecf8fe;
    padding: 20px 50px;
    border-bottom: 1px solid #ccc;
}
.docPreview .settings .brand
{
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px !important;
}
.docPreview .settings .line
{    
    border-top: 1px dotted #aaa;
    min-height: 20px;
}
.docPreview .settings .notopborder
{
    border-top: 0 !important;
}
.docPreview .settings .line > label, .docPreview .settings .line .top > label
{
    width: 80px;
    display: inline-block;
    font-weight: bold;
    padding: 10px 0;
}
.lbl120 .line > label
{
    width: 120px !important;
}
.docPreview .settings .line > div
{
    display: inline-block;
}
.docPreview .settings .line .top
{
    vertical-align: top;
}
.typeHeader
{
    font-size: 24px;
    font-weight: bold;
    color: #e5e5e5;
    position: absolute;
    top: 65px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.docPreview .banner {background: #fff; }
.docPreview .banner img {padding: 20px 0; margin: 0 auto; display: block;}
.docPreview .header
{
    padding: 60px 50px 0 50px;
}
.docPreview .header-quote-converted{padding: 0 0 0 0; font-size: 16px; background: #555;}
.docPreview .header-quote-converted a{padding: 20px 50px; color: #fff; display: block; text-decoration: none;}
.docPreview .header-quote-converted a:hover {background: #87D37C;}
.docPreview .header-quote-docflow{padding: 0 0 0 0; font-size: 16px; background: #555; color: #fff; border-top: 1px solid #444;}
.docPreview .header-quote-docflow a{ padding: 20px 50px;color: #fff; display: block; text-decoration: none;}
.docPreview .header-quote-docflow a:hover {background: #87D37C;}

.docPreview > .header > h2 {font-size: 20px; text-transform: uppercase; letter-spacing: 1px; color: #555; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd; font-weight: 100; font-family: Roboto, sans-serif;}
.docPreview .header .l
{
    display: inline-block;
    vertical-align: top;
}
.docPreview .header .l > label, .docPreview .header .r > label { vertical-align: top;}
.docPreview .header .r
{
    position: absolute;
    right: 50px;
    display: inline-block;
    width: 230px;
    font-size: 12px;
    text-align: right;
}

.docPreview .header .copy
{
    padding-left: 5px;
    display: inline-block;
}

.docPreview .title
{
    font-size: 24px;
    margin: 0;
    display: inline-block;
}
.docPreview .title .subTitle
{
    color: #aaa;
    font-weight: normal;
    font-size: 12px;
    display: block !important;
}
.docPreview .body
{
    padding: 20px 0;
    margin: 0 50px 0 50px;
}
.docPreview .template, .docPreview .template h3
{
    color: #aaa;
}
.docPreview .section
{
    margin-bottom: 30px;
    display: block;
    position: relative;
}
.docPreview .section .block
{
    background: #f5f5f5;    
    border-radius: 5px;    
}
.docPreview .block .guide
{
    background: #ddd;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding: 5px;
}
.docPreview .settings .guide
{
    padding: 10px 0;
}
.docPreview .block .contents
{
    padding: 10px;
}
.docPreview .section .options
{
    position: absolute;
    right: 10px;
    top: 10px;
}
.docPreview .section .options li
{
    float: right;
}
.docPreview .clientNotes
{
    margin-bottom: 50px;
}

/*========= CONTRACT SIGNATURES ============*/
.contractSignature
{    
    display: inline-block;
    margin-right: 10px;    
    vertical-align: top;
}
.contractSignature:last-child
{
    margin-right: 0;
}
.contractSignature .title
{
    text-align: right;
}
.contractSignature div.sig
{
    height: 50px;
    min-width: 200px;
    vertical-align: top;
}
.contractSignature .wrap
{
    width: 200px;
    padding: 20px 0 20px 0;
    display: inline-block;
    margin-bottom: 10px;
    min-height: 120px;
}
.contractRequired
{
    background: #cc6666;
    color: #fff;
    padding: 0 2px;
    -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;	
	cursor: default;
	text-align: center;
}
.contractCompleted
{
    background: #aaa !important;
}

.signhere
{
    border: 1px dashed #ccc;
    display: block;
}
a.clearsig
{
    display: block;   
    position: absolute;
    right: 15px;
    width: 120px;
    background: #eee;
    color: #888;
    padding: 5px;
    text-align: center;
}
.signotice
{
    position: absolute;
    left: 10px;
    bottom: 15px;
    color: #888;
    font-size: 11px;
}



.signature
{
    display: inline-block;    
    vertical-align: top;
    margin-right: 10px;
    /*width: 200px;*/
    top: 0;
}
.signature h4
{
    color: #aaa;
}
.signature .wrap
{
    width: 100%;
    padding: 40px 0 5px 0;
    background: #ddd;
}
.signature .title, .contractSignature .title
{
    text-align: right;
    
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 10px;
    margin-left: 0;
    width: 100%;
}
.signature .title input
{
    padding-right: 5px;
}
.signature p
{
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 0;
    color: #555;
}
.signature > div
{
    display: none;
}

.sigchecked h4
{
    color: #333;
}
.sigchecked > div
{
    background: #f5f5f5;
    -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;	
	padding: 10px;
    display: inline-block !important;
}



.tableFilter
{
    padding: 0 10px 10px 10px;
}
.tableFilter div
{
    display: inline-block;
}

.homePortrait
{
    border: 1px solid #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 100%;
}

.song-title {font-weight: bold; font-size: 12px;}
.song-artist{font-size: 11px;}
.song-title a, .song-artist a {text-decoration: none;}
.song-title a:hover, .song-artist a:hover {color: #428bca;}
.song-title, .song-artist {line-height: normal;}
.song-notes .glyphicon { color: #ff0000;}

.song-requests {margin: 0 0 30px 0;}
.song-requests td, .song-requests th{padding: 2px;}
.song-requests  tbody tr:first-child td{border-top: 1px solid #ddd;}
.song-requests  tbody tr:first-child td:first-child {border-top: none;}
.song-requests  tbody tr td{border-bottom: 1px solid #ddd;}
.song-requests tbody tr td:first-child{border-bottom: none;}
.song-requests  tr th {padding-bottom: 10px!important; color: #2C3E50; font-size: 16px;}
.song-requests  tfoot td{padding: 10px 0;}
.song-requests .right .glyphicon {padding: 3px 5px; background: #eee; color: #bbb; margin-left: 2px; border-radius: 2px;}
.song-requests .right .glyphicon:hover {background: #ccc; color: #fff;}
/*.song-count{display: inline-block; border-radius: 50%; background: #ccc; color: #fff; text-align: center; font-size: 12px; line-height: 24px; width: 24px; height: 24px; margin-right: 10px;}*/
.song-count{border: 1px solid #ddd; border-radius: 100%; width: 25px; height: 25px; padding: 3px 0; color: #aaa; text-align: center;}

.song-add .glyphicon, .song-remove .glyphicon, #tblSongs td:first-child .glyphicon {font-size: 18px; color: #ccc;}
.song-add .glyphicon:hover {color: green !important;}
.song-remove .glyphicon:hover {color: #ff0000 !important;}

.dataTables_info{float: none !important; display: block;  margin-bottom: 10px;}
div.dataTables_paginate{float: none !important; display: block; margin-left: 10px !important;}
.dataTables_paginate .glyphicon {line-height: inherit !important;}

.song-notes
{
    display: block;
    color: #aaa;
}
.mustplay, .tryplay, .dontplay
{
    font-size: 16px;
}
.mustplay
{
    color: Green;
}
.tryplay
{
    color: #aaa;
}
.dontplay
{
    color: #cc9999;
}
div.requests
{
    margin: 0 0 20px 0;
}

/* overrides bootstrap 3 */
h1,h2,h3,h4,h5,h6
{
    margin-top: 0;
}
ul { margin-bottom: 0;}
h3
{
    font-size: 18px;
}
.label
{
    font-size: 100%;
}
.style1 th, .style1 td
{
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;  
} 

.form-control
{
    display: inline-block !important;
}

.popover
{
    min-width: 276px;
}
.popover-content
{
    font-weight: normal;
    color: #000;
    font-size: 12px !important;
    line-height: normal;
}



.select2-chosen{padding: 0px 12px !important;}
.select2-container .select2-choice{background-image: none; height: 34px; line-height: 34px;}
.select2-dropdown-open .select2-choice{background-color: transparent !important;}
.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit {background-color: transparent !important; padding: 0 5px;}
.select2-primary .select2-search-choice:first-child {background: #E4F1FE; color: #2C3E50; border-color: #4183D7;}

.select2-container .select2-choice
{
    height: 34px !important;
    line-height: 34px !important;
    font-size: 14px !important;
    /*padding-left: 16px !important;*/
}
/*.select2-container .select2-choice abbr{    top:10px !important;    }*/
.select2-chosen
{
    vertical-align: middle;
}
.s2block
{
    /*font-weight: bold;*/
    color: #222;
}
.select2-highlighted .s2block{color: #fff;}
.s2block .name
{
    color: #aaa;
    font-weight: normal;    
}
.s2block:hover .name
{
    color: #bbb;
}
.s2block .total
{
    display: inline-block;
    margin-left: 20px;
}
/*v4*/
.select2-container .select2-selection--single { height: 34px; font-size: 14px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 34px;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 32px;}

hr
{
    margin: 10px 0;
}
.dropdown-menu.nano
{
    position: absolute;
}
.modal-header {
    
}
.modal-title
{
    color: #222;
}
.modal400 .modal-dialog{max-width: 400px;}

.p60 {width: 60%;}
.p80 {width: 80%;}
.p100 {width: 100%;}

/* callouts */
.bs-callout {
    border-left: 3px solid #EEEEEE;
    margin: 20px 0;
    padding: 20px;
}
.bs-callout h4 {
    margin-bottom: 5px;
    margin-top: 0;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout-danger {
    background-color: #FDF7F7;
    border-color: #EED3D7;
}
.bs-callout-danger h4 {
    color: #B94A48;
}
.bs-callout-warning {
    background-color: #FAF8F0;
    border-color: #FAEBCC;
}
.bs-callout-warning h4 {
    color: #8A6D3B;
}
.bs-callout-info {
    background-color: #F4F8FA;
    border-color: #BCE8F1;
}
.bs-callout-info h4 {
    color: #34789A;
}

.success
{
    color: Green;
}

.invoiceData tr td{background: #eee; padding: 2px 4px; border-bottom: 1px solid #fff;}
.invoiceData tr td:first-child{background: #ddd; font-weight: bold;}


.imgContactSm
{
    border: 3px solid #FFFFFF;
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);*/
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 100%;
}

.slicknav_menu {
	display:none;
}

.portal-welcome{color: #888; padding: 0 0 0 0; font-size: 16px; margin-bottom: 40px; }
.portal-welcome p{margin-bottom: 15px;}

.portal-events li{ margin: 0 0 20px 0; position: relative; font-size: 16px; color: #888;}
.portal-event-name{font-size: 20px;  display: inline-block; margin-left: 70px; margin-top: 5px;}
.portal-event-name a{color: #555;}
.portal-event-name div{font-size: 12px; color: #888; text-transform: uppercase;}
.portal-event-date{background: rgba( 34, 167, 240,.2); border-radius: 2px; position: absolute; top: 0; left: 0; padding: 0 15px 2px 15px; display: inline-block; text-align: center;}
.portal-event-date span{display: block; font-size: 10px; line-height: 15px; text-transform: uppercase; margin-top: 2px; color: #2C3E50;}
.portal-event-date .day{font-size: 20px; font-weight: bold; color: #2C3E50;}
.portal-event-date .year{color: rgba( 44, 62, 80,.5);}

.portal-links{margin: 0; padding: 0;}
.portal-links.home {margin: 0 0 0 60px; padding: 0;}
.portal-links li{padding: 10px; }
.portal-links li:last-child{border-bottom: none;}
.portal-link-name {font-size: 14px;}
.portal-link-type {font-size: 10px; color: #aaa; text-transform: uppercase;}

/*.payment-schedule li {margin: 15px 0; font-size: 12px;}
.payment-schedule li > div {vertical-align: top; display: inline-block;}
.payment-schedule .itemcount{display: inline-block; border-radius: 50%; border: 1px solid #ddd; color: #ccc;  text-align: center; font-size: 16px; line-height: 24px; width: 30px; height: 30px; margin-right: 10px;}
.payment-schedule .duedate {width: 120px; padding: 5px 0;}
.payment-schedule .totals {width: 270px; padding: 5px 0; }
.payment-schedule .totals span {width: 130px; margin-right: 20px;}
.payment-schedule .action{width: 200px; }
.payment-schedule .action .paid{padding: 5px 0; display: inline-block;}*/

.overdue {color: #ff0000;}
.make-payment { margin: 0 auto; padding: 20px 0; border: none;}

h4.sub-head {font-size: 16px; color: #555; border-bottom: 1px solid #aaa; padding-bottom: 1px; display: inline-block;}

.event-details {
    margin-top: 15px;
    font-size: 14px; color: #555;
}
.event-details .rw {margin-bottom: 20px;}
.event-details label{font-size: 14px; color: #555; display: block; margin-bottom: 0;}

.drop-toggle-control{display: inline-block; margin-right: 5px;}
.drop-toggle-control > a{
    background: #eee none repeat scroll 0 0;
    border-radius: 3px;
    color: #888;
    font-size: 12px;
    padding: 10px 8px;
    text-decoration: none !important;
}
table.style1 td:first-child, table.style1 th:first-child{padding-left: 5px !important;}
table.style1 td:last-child, table.style1 th:last-child{padding-right: 5px !important;}

#divHeaderDetails{margin-top: 60px;}

.checkout-column{width: 49%; display: inline-block; vertical-align: top;}
.checkout-column:first-of-type {padding-right: 30px;}
.checkout-column:last-of-type {padding-left: 30px;}
.checkout-options {list-style: none;}
.checkout-options li {padding: 20px 0; border-top: 1px solid #eee; position: relative;}
.checkout-options li:first-child {border-top: none;}
.section-edit {position: absolute; right: 0; top: 20px; text-transform: uppercase; font-size: 11px; color: #aaa;}
.section-edit:hover {color: #888;}
.active .section-edit {display: none;}
h3.checkout-header {font-size: 18px; text-transform: uppercase; margin: 0 0 0 0; color: #1E824C;}
.checkout-options .form {margin-top: 15px; display: none; } /**/
.checkout-options li.active .form {display: block;}
.gift-card-option {color: #aaa; text-decoration: none !important; display: inline-block; font-weight: bold; position: absolute; right: 0; top: 0;}
.gift-card-option:hover {color: #555;}
.accepted-cards img {width: 40px;}

.checkout-options h5 {font-size: 22px; text-transform: uppercase; font-weight: bold; }

.click-row:hover {cursor: pointer;}

.cart-thumb {width: 120px; height: 80px; background: #ddd; overflow: hidden; position: relative;}
.cart-thumb .overlay {z-index: 10; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.cart-thumb > img {max-width: 100%;
                    max-height: 100%;
                    pointer-events: none;
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: 0 auto;
                    transform: translate(-50%, -50%);}
.cart-thumb .crop {position: absolute; z-index: 2; box-shadow: 0 0 0 99999px rgba( 25, 181, 254, 0.7);}
.cart-thumb .inner {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; border-color: rgba(217, 30, 24,.5); border-style: solid; }
.cart-thumb-caption {color: #aaa; font-size: 11px;}
.checkout-item-product {font-size: 16px; font-weight: bold; color: #555;}
.checkout-item-price {font-size: 12px;  }
.checkout-item-quantity {font-size: 12px; }
.checkout-item-options {font-size: 12px; color: #888;}

@media screen and (max-width: 900px) {
    .checkout-column{width: 100%; display: block; padding: 0 !important;}

    .footer {padding: 0 10px 10px 10px; font-size: 12px;}
    .content-flex {flex-direction: column;  flex-wrap: wrap; padding: 15px 0;}
    .content-flex > div {flex: 1 0 100% !important; padding: 0 10px !important; width: auto; text-align: center !important;}
    .content-flex .left {display: none;}
    .content-flex .social {order: 2; font-size: 14px; width: auto;}
    .content-flex .title {order: 1;}
}

@media screen and (max-width: 600px) 
 {
    #menu {padding: 10px 10px;}
    .public-company-logo img {max-width: 200px; margin-bottom: 0;}
    /* #menu is the original menu */
	.slicknav_menu {
		display:block;
		text-transform: uppercase;
	}
	
	ul.menu {
		display:none;
	}
    #header{display: none;}
    #divHeaderDetails{margin-top: 20px; margin-bottom: 0; padding-bottom: 0;}
    .navigation {padding: 10px 10px;}
    
    .doc-data-message {padding: 50px; top: 10px;}

    #body .docPreview {min-height: 150px;}
    .docPreview .header .l {
        display: block;
    }
    .docPreview .header .r
    {
        position: initial;
        right: auto;
        display: block;
        text-align: left;
        margin-top: 20px;
    }
    .content, .docPreview{max-width: none;}

    .make-payment { padding: 12px 20px;}

    .item-product .pr{display: block; position: relative; top: auto; right: auto;}
    .item-product {margin-right: 10px;}

    .pageHeader{margin-left: 20px; margin-top: 20px;}
    .header-my-account{margin-left: 20px;}

    #header .pageHeader {padding-top: 0;}
    .docPreview .body{margin: 0 20px; padding: 20px 0;}
    .docPreview .header{padding: 20px 20px;}
    .docPreview .header-quote-converted {padding: 0 0;}
    .docPreview .header-quote-converted a {
        padding: 20px 20px;
    }

    .portal-welcome{border-right: none; padding: 0 10px 10px 10px;}
    .portal-event-name{font-size: 16px;}

    .payment-schedule .totals span{width: auto; margin-right: 10px;}
    .payment-schedule .action{display: block; text-align: left; margin-left: 40px; margin-top: 10px; width: auto;}


    .content-box {display: block;}
    .content-box > div, .content-box .social, .content-box .credit {flex: none; text-align: left; padding-left: 15px;}

    .invoice-header{display: block;}
    .invoice-header > div {display: block; width: 100%; border-right: none; margin-bottom: 20px; }
    .invoice-header > div:last-child {text-align: left; width: 100%;}

    .invoice-balance .half-gap{display: none !important;}
    .goback, .continuewith {position: initial; display: block; margin-left: 0; margin-top: 20px; }
    .goback {width: 100px;}

    .item-quantity .glyphicon {font-size: 24px; margin-bottom: 5px; color: #e5e5e5;}
    .invoice-items-pricing td:nth-child(3),.invoice-items-pricing td:nth-child(4),
    .invoice-items-pricing th:nth-child(3),.invoice-items-pricing th:nth-child(4){display: none;}
    .invoice-items-pricing .item-footer {display: block;}
    .invoice-items-pricing .item-footer span {width: 49%; display: inline-block; text-align: right; margin-bottom: 10px;}
    .invoice-items-pricing .item-footer span:first-child {text-align: left;}
}

@media screen and (max-width: 480px) 
{    
    .doc-data-message {padding: 20px 40px;}
    .doc-data-message ul {margin-bottom: 20px;}
}