/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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;
}
/* HTML5 display-role reset for older browsers */
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;
}

/* Browser Firefox to match the Chrome */
button::-moz-focus-inner {
    padding: 0 !important;
    border: 0 !important;
}

.row{float: left; width: 100%;  box-sizing:border-box; margin-bottom: 30px;}

.col {float: left;padding: 0 2% 0 0;box-sizing:border-box;}
.col .content{ background-color: #fff; float: left; width: 100%; padding: 20px; box-sizing:border-box;}

.col1 { width: 8.33%; }
.col2 { width: 16.66%; }
.col3 { width: 25%; }
.col4 { width: 33.33%; }
.col5 { width: 41.66%; }
.col6 { width: 50%; }
.col7 { width: 58.33; }
.col8 { width: 66.66%; }
.col9 { width: 75%; }
.col10 { width: 83.33%; }
.col11 { width: 91.66%; }
.col12 { width: 100%;  }

.offset1 { margin-left: 8.33%; }
.offset2 { margin-left: 16.66%; }
.offset3 { margin-left: 25%; }
.offset4 { margin-left: 33.33%; }
.offset5 { margin-left: 41.66%; }
.offset6 { margin-left: 50%; }
.offset7 { margin-left: 58.33; }
.offset8 { margin-left: 66.66%; }
.offset9 { margin-left: 75%; }
.offset10 { margin-left: 83.33%; }
.offset11 { margin-left: 91.66%; }
.offset12 { margin-left: 100%; }

.title{ float: left; width: 100%; box-sizing: border-box; position: relative;}
.title h2{ width: 100%; position: relative; float: left; font-size: 30px;  padding: 5px 0; font-family: 'Poppins';  color: #666;}
.title h2 .button{ margin-left: 5px; position: relative; float: right; right: 0; top: 0;  }
.title p{ float: left; font-size: 16px; color: #a3b0b9; padding: 10px 0 15px; width: 100%; margin-bottom: 15px; border-bottom:1px solid #e9e9e9;}
.title .breadcrumb{float: left; padding: 15px 0; }
.title .breadcrumb li{font-size: 14px; text-transform: uppercase; color: #999; display: inline-block; margin-right: 10px; }
.title .breadcrumb li:after{ content: "/"; margin-left: 10px; color: #ccc; }
.title .breadcrumb li:last-child:after{ content: ""; margin-left: 0; }
.title .breadcrumb li a{  text-decoration: none; font-size: 14px; color: #da204a;}
.title.error i{ font-size: 80px; color: #ff8662; float: left; width: 10%; }
.title.error h2{ float: left; width: 90%; font-size: 36px; }
.title.error p{ float: left; width: 90%; font-size: 20px; }

table{ float: left; width: 100%; margin-top: 15px; }
table thead tr td{ color: #666;  padding: 10px 0; text-transform: uppercase;  font-size: 14px; font-family: 'Poppins'; }
table thead tr td:first-child{ padding-left: 10px; }
table thead tr td a{ text-decoration: none; color:#162a5c; }
table thead tr td a:before{ font-family: 'FontAwesome';  padding-right: 10px; color: #0080ff; content: "\f0dc"; }
table thead tr td a.asc:before{ content: "\f160"; }
table thead tr td a.desc:before{ content: "\f161";}
table thead tr td h2{ font-size: 22px; font-family: 'Poppins'; }

table tbody tr td{ padding: 15px 0;  font-size: 14px;  color: #666; vertical-align: middle; }
table tbody tr:nth-child(odd){ background-color: #ecf3f8; }
table tbody tr td:first-child{ padding-left: 10px; }
table tbody tr td.center{ text-align: center; }
table tbody tr td a{ color:#162a5c;}
table tbody tr td ul{ float: left; }
table tbody tr td ul li{ float: left;  padding: 5px 0; clear: both; }
table tbody tr td ul li:before{ font-family: "FontAwesome"; content: "\f007"; padding-right: 10px; color: #162a5c;}
table tbody tr td.action{ padding: 5px 0; vertical-align: middle; }
table tbody tr td.action .button{ margin-right: 8px; font-size: 14px; font-family: 'Muli'; font-weight: normal; padding:  5px 8px;}
table tbody tr td select{ width: 100%; box-sizing: border-box; float: left; width: 90%; padding:5px 5px; color: #a3b0b9; border:1px solid #a3b0b9; }
table tfoot td p{ float: left; color: #a3b0b9;  padding-top: 30px;  font-size: 14px; font-family: 'Poppins'; }

.grid{ float: left; width: 100%; margin-top: 30px; }
.grid article{ background-color: #e9e9e9; float: left; width: 49%; margin:0 2% 30px 0; box-sizing: border-box; }
.grid article.last{ margin-right: 0; }
.grid article .image{  float: left; width: 40%; display: block; position: relative;}
.grid article .image img{ float: left; width: 100%;  }
.grid article .image span{ transition: all .5s; color: #a3b0b9; opacity: 0; background-color: rgba(255, 255, 255, 0.5); position: absolute; width: 100%; height: 100%; box-sizing: border-box; font-size: 50px; padding:90px 0; text-align: center; }
.grid article .image span i{ color: #3498DB; }
.grid article .image:hover span{display: block; opacity: 1;  }
.grid article .details{ float: left; width: 60%; padding: 20px; box-sizing: border-box; }
.grid article .details p{line-height: 16px; font-family: 'Muli'; font-size: 14px; padding: 3px 0 3px 2%;  box-sizing: border-box; float: left; width: 100%; }
.grid article .details p strong{ font-weight: bold; }
.grid article.present .toolbar{ background-color: #1ABC9C; }
.grid article.present .toolbar .button{ background-color: #1ABC9C; }

.grid article .toolbar{ position: relative; float: left; width: 100%; box-sizing: border-box;  background-color: #3498DB;}
.grid article .toolbar a{ float: left; display: block; margin-right: 5px; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 12px; }
.grid article .toolbar a.right{ float: right; display: block; margin-right: 0;}
.grid article .toolbar .dropdown{ margin: 0; width: 37%;  }

.gridFaces{ float: left; width: 100%; margin-top: 30px; }
.gridFaces article{ background-color: #e9e9e9; float: left; width: 23.5%; margin:0 2% 30px 0; box-sizing: border-box; }
.gridFaces article.last{ margin-right: 0; }
.gridFaces article .image{  float: left; width: 100%; display: block; position: relative;}
.gridFaces article .image img{ float: left; width: 100%;  }
.gridFaces article .details{ float: left; width: 100%; padding: 20px; box-sizing: border-box; }
.gridFaces article .details p{line-height: 16px; font-family: 'Muli'; font-size: 14px; padding: 3px 0 3px 2%;  box-sizing: border-box; float: left; width: 100%; }
.gridFaces article .details p strong{ font-weight: bold; }

.ranger label{ box-sizing: border-box; text-align: center; }

h3{  float: left; font-size: 20px; font-family: 'Poppins';  color: #666; width: 100%; padding: 10px 0; }
h4{ float: left; font-size: 18px; font-family: 'Poppins';  color: #666; width: 100%; padding: 10px 0}

.button{ border: 0; border-radius: 1px;  transition: all .5s; opacity: 0.9; margin-right: 10px;  float: left;  display: block;  text-align: center; text-decoration: none;  font-size: 16px; font-family: 'Poppins'; }
.button.right{ float: right; margin-left: 0; margin-right: 10px; }
.button.small{ padding: 10px; font-size: 12px; }
.button.normal{ padding: 15px; font-size: 16px; }
.button.large{ padding: 15px 25px;  font-size: 18px;}
.button.primary{ background-color: #314f94; color: #fff;  }
.button.danger{ background-color: #da204a; color: #fff;  }
.button.success{ background-color: #18bb9a; color: #fff;  }
.button.info{ background-color: #3498DB; color: #fff; }
.button:hover{ opacity: 1;  }

.label{}
.label.pending{ background-color: #F1C40F; color: #fff; padding: 5px; border-radius: 2px;}
.label.failed,
.label.late{ background-color: #da204a; color: #fff;padding: 5px; border-radius: 2px;}
.label.done,
.label.paid{ background-color: #18bb9a; color: #fff;padding: 5px; border-radius: 2px; }

.flash{float: left; width: 100%; padding: 18px 20px; box-sizing: border-box; color: #fff; font-size: 16px; margin-bottom: 10px; }
.flash.primary{ background-color: #314f94; }
.flash.danger{ background-color: #da204a; }
.flash.success{ background-color: #18bb9a;  }
.flash.info{ background-color: #3498DB; }

hr{ float: left; border:0px; border-bottom: 1px solid #e9e9e9; width: 100%; margin:10px 0;  }

.right{ float: right!important; }

.form{ float: left; width: 100%;  }
.form *{ font-family: 'Muli'; }
.form i.fa{ font-family: 'FontAwesome'; }

.form .block{ float: left; width: 100%; padding: 8px 0; }
.form .block.hidden{ display: none; transition: all .5s; }
.form .block.group{ padding: 10px 0; }
.form .block h3{ padding-top: 20px; }

.form .el{ float: left; width: 100px; padding: 5px 10px 5px 0; box-sizing: border-box; position: relative; }
.form .el:last-child{ padding-right: 0; }
.form .el4{ width: 100%; }
.form .last{padding-right: 0;}
.form .el3{ width: 75%; }
.form .el2{ width: 50%; }
.form .el1-33{ width: 33.33%; }
.form .el1{ width: 25%; }
.form .el0-75{ width: 20%; }
.form .el0-25{ width: 5%; }

.form .el0-25 .remove-line{ padding-top: 25px; float: left; width: 100%; text-align: center; display: block; color: #ff8662; font-size: 25px; }

.form .el label{ padding: 5px 0; float: left; width: 100%; color: #a3b0b9; text-transform: uppercase; font-size: 12px; }
.form .el input,
.form .el textarea{ border-radius: 1px; box-sizing: border-box; float: left; width: 100%; padding:10px; color: #333; border:2px solid #ccc; box-sizing: border-box; }
.form .el input:focus,
.form .el textarea:focus{ outline: none; background-color: #eef4f7; color:#666; border-color: #8dc4e7;  }

.form .el select{  border-radius: 1px;  width: 100%; box-sizing: border-box; float: left; width: 100%; padding:9px 10px; color: #666; border:2px solid #ccc; }
.form .el select:focus{ outline: none; background-color: #eef4f7; color:#666; border-color: #8dc4e7;  }
.form .el select:disabled{ background-color: rgb(235, 235, 228); }
.form p{ float: left; width: 100%;  padding: 5px 0; color:#666; text-transform: uppercase; font-size: 14px; font-weight: bold;}
.form .title p{ text-transform: none; font-weight: normal; float: left; font-size: 16px; color: #a3b0b9; padding: 10px 0 15px; width: 100%; border-bottom:1px solid #e9e9e9;}

.form .el .checkbox{ float: left; width: 100%; padding: 10px 0 5px;}
.form .el .checkbox input{ float: left; width: auto; padding: 0; }
.form .el .checkbox label{ width: auto; }

.select2-container .select2-selection--single{ height: 40px; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ height: 40px; box-sizing: border-box;padding: 5px 10px; }

.form .action .button{ background-color: #18bb9a; }

/* Base for label styling */
.checkbox input[type="checkbox"]:not(:checked), 
.checkbox input[type="checkbox"]:checked { position: absolute; left: -9999px;}
.checkbox input[type="checkbox"]:not(:checked) + label, 
.checkbox input[type="checkbox"]:checked + label { position: relative; padding-left: 25px; cursor: pointer;}

/* checkbox aspect */
.checkbox input[type="checkbox"]:not(:checked) + label:before,
.checkbox input[type="checkbox"]:checked + label:before { content: '';   position: absolute; left:0; top: 2px; width: 15px; height: 15px; border: 1px solid #a3b0b9;  }

/* checked mark aspect */
.checkbox input[type="checkbox"]:not(:checked) + label:after,
.checkbox input[type="checkbox"]:checked + label:after { content: '✔'; background-color: #18bb9a;  box-sizing: border-box;  position: absolute;  top: 5px; left: 3px;  font-size: 14px;  line-height: 0.8;  color: #fff;  transition: all .2s;}

/* checked mark aspect changes */
.checkbox input[type="checkbox"]:not(:checked) + label:after { opacity: 0;  transform: scale(0);}
.checkbox input[type="checkbox"]:checked + label:after {  opacity: 1;  transform: scale(1);}

/* disabled checkbox */
.checkbox input[type="checkbox"]:checked:focus + label:before,
.checkbox input[type="checkbox"]:not(:checked):focus +  label:before {  border: 1px dotted blue; }

/* hover style just for information */
.checkbox label:hover:before {  border: 1px solid #4778d9!important;}

/* Base for label styling */
.radio input[type="radio"]:not(:checked), 
.radio input[type="radio"]:checked { position: absolute; left: -9999px;}
.radio input[type="radio"]:not(:checked) + label, 
.radio input[type="radio"]:checked + label { position: relative; padding-left: 25px; cursor: pointer;}

/* checkbox aspect */
.radio input[type="radio"]:not(:checked) + label:before,
.radio input[type="radio"]:checked + label:before { content: '';   position: absolute; left:0; top: 2px; width: 15px; height: 15px; border: 1px solid #a3b0b9; border-radius: 10px;  }

/* checked mark aspect */
.radio input[type="radio"]:not(:checked) + label:after,
.radio input[type="radio"]:checked + label:after { content: '✔'; border-radius: 10px; background-color: #666;  box-sizing: border-box;  position: absolute;  top: 5px; left: 3px;  font-size: 14px;  line-height: 0.8;  color: #666;  transition: all .2s;}

/* checked mark aspect changes */
.radio input[type="radio"]:not(:checked) + label:after { opacity: 0;  transform: scale(0);}
.radio input[type="radio"]:checked + label:after {  opacity: 1;  transform: scale(1);}

/* disabled checkbox */
.radio input[type="radio"]:checked:focus + label:before,
.radio input[type="radio"]:not(:checked):focus +  label:before {  border: 1px dotted blue; }

.form .el .radio{ float: left; width: 100%; padding: 5px 0;}
.form .el .radio input{ float: left; width: auto; padding: 0; }
.form .el .radio label{ width: auto; }

.form .el .opt2{ width: 50%; }
.form .el .opt3{ width: 33.33%; }
.form .el .opt4{ width: 25%; }

.form .el input.error{  border-color: #f1243c; }
.form .el select.error{  border-color: #f1243c; }
.form .el span.error{ float: left; width: 100%; font-size: 14px; color:#f1243c; padding: 5px 0; 	 }

input::-moz-focus-inner {
    padding: 0;
    border: 0
}

div.action{ float: left; width: 100%; margin-top: 15px;  padding-top: 15px;  }
.button{ border:0; cursor: pointer; margin-right: 0;}
.button.forFilter{ margin-top: 22px; padding: 11px 15px 10px; font-size: 13px; }
a.button.forFilter{ margin-top: 22px; padding: 12px 15px; font-size: 13px; }
.button.forFilter.right,
a.button.forFilter.right{ margin-right: 0; }

.form.filter{ border-bottom: 1px solid #e9e9e9; padding: 10px 0 15px; }

.form input.inputfile {width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1;}
.form input.inputfile + label { text-align: center; cursor: pointer; font-size: 12px; font-weight: 700; color: white;  background-color: #18bb9a; border:0px; display: inline-block; padding: 13px; box-sizing: border-box;  }
.form input.inputfile:focus + label,
.form input.inputfile + label:hover {  background-color: #18bb9a; }
.form input.inputfile + label * {pointer-events: none; }
.form input.inputfile + label i{ float: left; font-size: 13px; width: 10%; }
.form input.inputfile + label span{ overflow: hidden; width: 90%; float: left; }
.form .uploaded{  float: left; width: 100%; position: relative;}
.form .uploaded img{ float: left; width: 100%; }
.form .uploaded .remove-image{ z-index: 500; transition: all .5s; position: absolute; top: 10px; right: 10px; font-size: 30px; color: #f1243c; opacity: 0;}
.form .uploaded:hover .remove-image{ opacity: 1; }

.paginate{ float: left; width: 100%;  }
.paginate p{ float: left; padding-top: 27px;  color:#a3b0b9;  font-size: 14px;}
.pagination{ float: left; padding-top: 20px; }
.pagination li{ float: left; }
.pagination li a{ font-family: 'Poppins'; opacity: 0.8; transition: all 0.2s; font-size: 14px; display: block; float: left; padding: 7px 12px; color:#a3b0b9;   text-decoration: none}
.pagination li a:hover,
.pagination li.active a{  color: #56bddc; opacity: 1;   }
.pagination li.disabled a{ color: #ccc; }

.cake-stack-trace li{ line-height: 22px; }
.cake-stack-trace li a{ color: #ff8662; }

.toggleElement,
.toggleDelivery{ border-radius: 20px; position: relative; display: block; width: 40px; height:23px;  box-shadow: inset 2px 3px 10px #ccc; border:1px solid #e9e9e9; background-color: #fff; }
.toggleElement .toggleButton,
.toggleDelivery .toggleButton{ transition: all .5s; border-radius: 20px; display: block; position: absolute; left: 3px; top: 2px; width: 20px; height: 20px; background-color:#E74C3C;  }
.toggleElement .toggleButton.toogleOn,
.toggleDelivery .toggleButton.toogleOn{ right: 3px; left: auto; background-color: #1ABC9C;  }
.toggleElement .toggleButton.toogleNull,
.toggleDelivery .toggleButton.toogleNull{ left: 10px;  background-color: #999;  }

.view{ float: left; width: 100%; }
.view h3{ font-size: 22px; font-family: 'Poppins'; padding-top:30px; float: left; width: 100%; color: #6dc7be; text-transform: uppercase; }
.view p strong{ font-family: 'Poppins';  color: #666;  }
.view p{ font-size: 14px; padding: 10px 0; color: #333; }

.total-wrapper{ float: left; width: 100%;  box-sizing: border-box; padding: 30px 0;  text-align: left; }
.total-wrapper .total .title{float: left; color:#666;  font-family: "Muli"; text-transform: uppercase; font-size:16px; text-align: left; width: 100%;}
.total-wrapper .total .value{ float: left;color:#56bddc;  font-family: "Poppins"; font-size: 40px;  width: 100%;}