/**
* SUMMARY:
*   ~ RESET css
*   ~ koalaboox COLORS defaults
*   ~ GRID system
*
*/

/* RESET CSS */

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, address, cite, code, del, dfn, img, ins, kbd, q, s, samp, small,
sub, sup, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

*:focus {
    outline:none;
}

/*strong,b { font-weight:bold; }*/

/* KOALABOOX COLORS */

/**
* COLORS LIST
* green : #0046fe
* lightgreen : #e5f9b0
* orange : #e86934
* extralightgrey : #e3e3e3
* lightgrey : #888888
* darkgrey : #38454e
*
*/

.bggreen, .BGGREEN {
    background-color:#0046fe;
}

.bglightgreen, .BGLIGHTGREEN {
    background-color:#e5f9b0;
}

.bgorange, .BGORANGE {
    background-color:#e86934;
}

.bglightgrey, .BGLIGHTGREY {
    color: #888888;
}

.bgdarkgrey, .BGDARKGREY {
    background-color:#38454e;
}

.green, .GREEN{
    color:#0046fe;
}

.lightgreen, .LIGHTGREEN{
    color:#e5f9b0;
}

.orange, .ORANGE{
    color:#e86934;
}

.lightgrey, .LIGHTGREY {
    color: #888888;
}

.darkgrey, .DARKGREY {
    color:#38454e;
}

.red, .RED {
    color:#E7424C;
}

/* GRID SYSTEM */
/**
* Grid system manages columns
* "col" = refers to the tag as column
* "21" =  refers structure columns. In this example, they are divided into [two third / one third]
* "left" = If there are two columns, it's necessary to clarify the position.
*/

/* two columns */
.col-11-left {
    width:50%;
    height:100%;
    float:left;
}
.col-11-right {
    width:50%;
    height:100%;
    float:right;
}

.col-21-left {
    width:66.66666666%;
    height:100%;
    float:left;
}
.col-21-right {
    width:33.33333333%;
    height:100%;
    float:right;
}

.col-12-left {
    width:33.33333333%;
    height:100%;
    float:left;
}
.col-12-right {
    width:66.66666666%;
    height:100%;
    float:right;
}

/* three columns */
.col-111{
    display:block;
    padding:0;
    margin:0;
    width:33.33333333%;
    float:left;
    height:100%;
}

hr {
    height:1px;
    border:none;
    border-top:1px solid #d5deec;
    margin: 15px 0 15px 0;
}

/*-- SIZES --*/
.w20, .w50, .w100, .w120, .w140, .w190, .w240,
.w260, .w280, .w300, .w330, .w400, .w470,
.w540, .w610, .w750, .w820 {
    float: left;
    margin-right: 20px;
    border: none;
}

.w20 { width: 20px; }
.w50 { width: 50px; }
.w100 { width: 100px; }
.w120 { width: 120px; }
.w140 { width: 140px; }
.w190 { width: 190px; }
.w240 { width: 240px; }
.w260 { width: 260px; }
.w280 { width: 280px; }
.w300 { width: 300px; }
.w330 { width: 330px; }
.w400 { width: 400px; }
.w470 { width: 470px; }
.w540 { width: 540px; }
.w610 { width: 610px; }
.w750 { width: 750px; }
.w820 { width: 820px; }


.floatl { float:left; }
.floatr { float:right; }

.textc { text-align:center}
.textl { text-align:left}
.textr { text-align:right}


/* Invoice html rendering fixes */
div.invoice {
    font-family: Arial;
    position:relative;
    padding-bottom:60px;
}

div.invoice strong,
div.invoice b { font-weight:bold;}

div.invoice div.footer {
    bottom:0;
    position: absolute;
    width:525px;


}

div.invoice *  {
    box-sizing: content-box;
    color:black;
}