/*  ============================================================================
    IMPORTS
    ========================================================================== */
@import url(reset.css);
@import url(simplegrid.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,900,900i&display=swap');

/*  ============================================================================
	GENERAL BASE BY Keven Ouellet
	========================================================================== */

.ui-datepicker-title select 		{ padding: 3px !important; font-size:16px !important; }

html								{ font-family: 'Roboto', Georgia, serif; font-size: 16px; line-height: 24px; font-weight: 400; height: 100%; color:#444; }

body								{ font-family: 'Roboto', Georgia, serif; font-size: 16px; line-height: 24px; font-weight: 400; height: 100%; color:#444; background-color: #E8E8E8; }
body.login 							{ background-image: url(../images/background-blue2.jpg); background-attachment: fixed; background-position: center center; background-size: cover; }
body.privacy-policy					{ background-color: white; }
.cke_editable  						{ padding: 20px; min-height: 400px; }
.cke_editable body 					{ background: none; }
.cke_editable table.no-border		{ border: 1px dotted #D3D3D3; }
.cke_editable table.no-border tr td	{ border: 1px dotted #D3D3D3; }
.cke_editable table.no-border tr th	{ border: 1px dotted #D3D3D3; }
.cke_editable .ckeditor ul,
.cke_editable .ckeditor ol 			{ padding-left: 30px; margin-bottom: 30px; }

/*  ============================================================================
    Positions
    ========================================================================== */

.clear                              { display: block; clear: both; overflow: hidden; height:0; margin:0; padding: 0; }
.align-left                         { float:left; margin-right: 20px; }
.align-right                        { float:right; margin-left: 20px; }
.align-center                       { text-align: center; }

/*  ============================================================================
	TYPOGRAPHY
	========================================================================== */

h1									{ font-size: 46px; line-height: 50px; margin-bottom: 10px; }
h2									{ font-size: 36px; line-height: 40px; margin-bottom: 10px; }
h3									{ font-size: 28px; line-height: 32px; margin-bottom: 10px; margin-top: 20px; }
h4									{ font-size: 22px; line-height: 26px; margin-bottom: 10px; margin-top: 20px; }
h5									{ font-size: 18px; line-height: 22px; margin-bottom: 10px; margin-top: 20px; }

::-moz-selection					{ background: #000000; color: #fff; text-shadow: none; }
::selection							{ background: #000000; color: #fff; text-shadow: none; }

i, em								{ font-style: italic; }
strong, b							{ font-weight: bold; }
	
p									{ font-size: 16px; line-height: 24px; margin-bottom: 30px; color:#3a3a3a; }
p.spacer							{ padding: 20px; }
p.spacer-large						{ padding: 40px;  }
p.section-title						{ text-transform: uppercase; border-bottom: 1px solid #141414; font-weight: bold; }
p.sub-section-title					{ text-transform: uppercase; border-bottom: 1px solid #eee; font-weight: 700; }

small								{ font-size: 14px; }

img									{ max-width:100%; height: auto; vertical-align: middle; }
img.triquart 						{ max-width:75%; margin: 0 20px 20px 0; }
img.demi 							{ max-width:50%; margin: 0 20px 20px 0; }
img.tier 							{ max-width:33%; margin: 0 20px 20px 0; }
img.quart 							{ max-width:25%; margin: 0 20px 20px 0; }

sub, sup 							{ font-size: 12px; } 
sub 								{ vertical-align: sub; } 
sup 								{ vertical-align: super; }

blockquote,
cite								{ border-left: 3px solid #e7e9ec; padding: 0 0 0 16px; margin: 30px 0 30px 30px; }


/*  ============================================================================
	LISTS
	========================================================================== */

ol,
ul									{ list-style: disc; padding: 0; margin-bottom: 30px; }
ul.square							{ list-style: square; }
ul ul,
ol ol 								{ margin-bottom:0; }
ol									{ list-style: decimal;  }

ul.inline 							{ list-style: none; }
ul.inline li 						{ background-color: #333333; color:#FFF; display: inline-block; padding: 5px 10px; }

/*  ============================================================================
	LINKS & BUTTONS
	========================================================================== */

a									{ color:#333333; text-decoration: underline; }
a:hover								{ color:#EA3E00; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; }

a.read-more						 	{ padding: 5px 12px; margin: 10px 0; background-color: #333333; color:#FFF; text-decoration: none; display: inline-block; }
a.read-more:hover					{ background-color: #000000; text-decoration: none; }

a.more							 	{ padding: 13px 18px; margin: 10px 0; background-color: #141414; color:#FFF; text-decoration: none; display: inline-block; }
a.more:hover						{ background-color: #000000; text-decoration: none; }

a.button 							{ background-color:#5BB85D; color:#FFF; white-space: nowrap; padding: 5px 10px; text-decoration: none; -webkit-appearance: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
a.button:hover 						{ background-color: #39A03B; }

/*  ============================================================================
	TABLES
	========================================================================== */

table								{ width: 100%; margin-bottom: 30px; }
table tr td							{ display: table-cell; padding: 10px; vertical-align: top; border-bottom: 1px solid #D3D3D3; }
table tr th						 	{ display: table-cell; padding: 10px; vertical-align: top; border-bottom: 1px solid #D3D3D3; font-weight: bold; text-align: left; color:#5B5B5B; }

table.no-border,
table.no-border tr td,
table.no-border tr td 				{ border:none; }

table.border						{ width: 100%; margin-bottom: 12px; border: 1px solid #D3D3D3; }
table.border tr td					{ display: table-cell; padding: 5px 10px; vertical-align: top; border: 1px solid #D3D3D3; }
table.border tr th				 	{ display: table-cell; padding: 5px 10px; vertical-align: top; font-weight: bold; text-align: left; border: 1px solid #D3D3D3; }

/*  ============================================================================
	FORMS
	========================================================================== */
  
input[type=text],
input[type=password],
input[type=search],
input[type=url],
input[type=tel],
input[type=date],
input[type=email],
input[type=time],
input[type=number],
input[type=range],
input[type=color],
textarea							{ font-family: 'Roboto', Georgia, serif; font-size: 16px; width: 100%; padding: 13px 15px; margin-bottom: 15px; border:1px solid #CCCCCC; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; -webkit-appearance: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

input[type=radio] 					{ width: auto !important;  }
input[type=checkbox] 				{  }

input[type=submit] 					{ padding: 13px 28px; color:#FFF; transition: 0.5s; background-color: #5bb85d; border: none; border-bottom: 4px solid #4F8E4F; cursor: pointer; font-size: 18px; line-height: 18px; -webkit-appearance: none; -webkit-border-radius: 3px; -moz-border-radius: 36px; border-radius: 3px; }
input[type=submit]:hover 			{ background-color: #35B737; }

input[type="text"]:disabled 		{ background: #FFC4C4; cursor:not-allowed; }

input:focus,
textarea:focus 						{ border: 1px solid #F7BD00; }

textarea							{ min-height: 150px; resize: vertical; }
select								{ font-size: 16px; width: 100%; padding: 13px 15px; margin-bottom: 15px; border:1px solid #CCCCCC; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
option								{ width: 100%; }

span.help 							{ display: inline-block; position: relative; }
span.help .fa 						{ padding: 3px; font-size:18px; cursor: pointer;  }
span.help:hover .fa					{ color:#1C1C1C; }
span.help:hover span.help-text 		{ opacity: 1; visibility: visible; text-align: center; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out;  }
span.help-text 						{ opacity: 0; visibility: hidden; position: absolute; top:100%; left:0; background-color: #333333; padding: 8px 10px 5px 10px; font-size:14px; color:#FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

/* JS ADD ICON TO SPECIFIC INPUT (script.js) */
.has_icon 							{ position: relative; }
.has_icon .input-icon 				{ position: absolute; top:13px; left:15px; }
.has_icon input 					{ padding-left: 44px; }

.checkbox-box 						{ display: block; padding: 3px; }

/*  ============================================================================
    BREADCRUMBS
    ========================================================================== */

.ariane                             { font-size: 15px; margin-bottom: 10px; }
.ariane a                           { font-size: 15px; display: inline-block; text-decoration: none; }
.ariane a:after                     { font-family: "Font Awesome 5 Free"; content:"\f105"; padding: 0 8px; font-weight: 900; }

/*  ============================================================================
    LINKS
    ========================================================================== */

.links                              { margin: 5px 0; }
.links a                            { display: inline-block; padding: 2px 13px; border:1px solid #efefef; }
.links .current_page                { display: inline-block; padding: 2px 13px; border:1px solid #efefef; background-color: #f5f5f5; }

/*  ============================================================================
    MESSAGES & ERRORS
    ========================================================================== */

.message                            { clear: both; display: block; padding: 12px; position: relative; margin-bottom: 20px; color: #ffffff; background-color: #AFAFAF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.message p 							{ margin: 1px 0 0 0; font-size:16px; line-height: 20px; }

.note 								{ clear: both; font-weight: bold; display: block; padding: 12px; position: relative; margin-bottom: 20px; color: #333333; background-color: #E2E2E2; border:1px solid #8C8C8C;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

.error 								{ background-color:#ec3d3c; border: 1px solid #BA0D0D; }
.error p 							{ color:#FFF; }

.alert-error 						{ background-color:#ec3d3c; border: 1px solid #BA0D0D; clear: both; display: block; padding: 12px 12px 12px 48px; position: relative; margin-bottom: 20px; color: #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.alert-error:before 				{ font-family: "Font Awesome 5 Free"; content:"\f06a"; padding: 0 10px 0 0; position: absolute; top:13px; left:16px; font-weight: bold; }
.alert-error .close 				{ display: none; }

.success 							{ background-color:#a1d36e; border: 1px solid #65992F; }
.success:before 					{ font-family: "Font Awesome 5 Free"; content:"\f00c"; padding: 0 10px 0 0; position: absolute; top:13px; left:16px; font-weight: bold; }
.success p 							{ color:#FFF; }

.alert-success 						{ background-color:#a1d36e; border: 1px solid #65992F; font-weight: bold; clear: both; display: block; padding: 12px 12px 12px 48px; position: relative; margin-bottom: 20px; color: #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.alert-success:before 				{ font-family: "Font Awesome 5 Free"; content:"\f00c"; padding: 0 10px 0 0; position: absolute; top:13px; left:16px; font-weight: bold; }
.alert-success .close 				{ display: none; }

.notif								{ background-color:#D3D3D3; color:#333333; border: 1px solid #878787; padding: 12px; }
.notif:before 						{ font-family: "Font Awesome 5 Free"; content:"\f0f3"; padding: 0 10px 0 0; position: absolute; top:13px; left:16px;  color:#3F3F3F; font-weight: bold; }
.notif p 							{ color:#3F3F3F; }
.notif .close-message 				{ color:#3F3F3F; }

.warning 							{ background-color:#efaa33; color:#ffffff; border: 1px solid #B27513; }
.warning:before 					{ font-family: "Font Awesome 5 Free"; content:"\f06a"; padding: 0 10px 0 0; position: absolute; top:13px; left:16px;  color:#FFFFFF; font-weight: bold; }
.warning p 							{ color:#ffffff; }

input.missing,
textarea.missing,
select.missing 						{ border: 2px solid #FF3B38; background-color: #FFCECE; }
.missing 							{ color: #FF3B38; }

.close-message 						{ color:#FFF; position: absolute; top:4px; right:9px; font-weight: bold; padding:10px 17px; cursor: pointer; }

.js-error 							{ position: fixed; bottom:0; left:0; padding: 30px; background-color: #F25C00; color:#FFF; width: 100%; text-align: center; z-index: 1000; }

.alert-info 						{ background-color:#D9FFC1; color:#307A00; border: 1px solid #4DC100; padding: 12px 20px; font-weight: bold; margin-bottom: 10px; }					
.alert-info .close 					{ display: none; }

/*  ============================================================================
	GENERAL 
	========================================================================== */

.loading-bar 						{ display: none; }

/* LOADING BOX */
#loading-box 						{ z-index:1000000; background-color: #000; opacity: 0.85; position: fixed; top:0; left:0; width:100%; height:100%;} 
.spinner 							{ -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; z-index: 2; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; }
.spinner .path 						{ stroke: #93bfec; stroke-linecap: round; -webkit-animation: dash 1.5s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite; }

.login-wrapper 						{ position: absolute; top:12%; margin: auto; width: 50%; left: 25%; }
.login-wrapper p.welcome 			{ color:#FFF; font-weight: 100; font-size: 80px; line-height: 70px; }
.login-wrapper p.signin 			{ color:#FFF; font-weight: 100; font-size: 22px; line-height: 24px; }
.login-wrapper label 				{ color:#FFF; }
.login-wrapper input#submit 		{ background-color: #4d7cfe; color:#FFF; border: none; text-align: center; width: 100%; margin-bottom: 30px; }
.login-wrapper input#submit:hover 	{ background-color: #fbb914; color:#004996; }
.login-right 						{ float: left; width: 50%; padding: 170px 50px 50px 0px; }
.login-left a 						{ color:#FFF; }
.login-left a:hover 				{ color:#FFF; }
.login-left p 						{ color:#FFF; }
.login-left 						{ float: left; width: 50%; padding: 50px; }
.login-options a 					{ display: inline-block; margin-right: 20px; }
.login-lang 						{ margin-bottom: 50px; color:#FFF; display: block; }

.top 								{ background-color: #12286A; width: 100%; }
.top-content 						{ padding: 10px; width: 90%; margin: auto; }

.menu 								{ margin: 0; padding: 0; float: right; }
.menu li 							{ list-style: none; display: inline-block; }
.menu li a 							{ display: block; color:#FFF; text-decoration: none; font-weight: bold;	padding: 8px; }
.menu li a:hover,
.menu li a.current 					{ color:#ffb310; }
.menu li.logout 					{ border-left:1px solid #FFFFFF; padding-left: 20px; margin-left: 20px; }
#menuburger 						{ display: none; }

.wrapper h1							{ font-size:20px; line-height: 22px; font-weight: bold; margin-bottom: 30px; }

.panel 								{ background-color: #FFF; padding: 40px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 30px; box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.02), 0 2.4px 5.3px rgba(0, 0, 0, 0.028), 0 4.5px 10px rgba(0, 0, 0, 0.035), 0 8px 17.9px rgba(0, 0, 0, 0.042), 0 15px 33.4px rgba(0, 0, 0, 0.05), 0 36px 80px rgba(0, 0, 0, 0.07) ; }

.shortcuts 							{ width: 100%; }
.shortcut 							{ display: block; }
.shortcut a.shortcut-link 			{ display: block; min-height: 168px; width: 260px; float:left; font-weight: bold; color:#13377A; margin: 10px; padding: 28px 11px 23px 11px; border: 1px solid #A9C6F2; text-decoration: none; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.shortcut a.shortcut-link:hover 	{ background-color: #12286A; border-color:#12286A; color:#FFF; }
.shortcut a.shortcut-link .fas 		{ font-size:60px; display: block; margin-bottom: 5px; }

.new-order-steps .step 				{ border: 1px solid #C4C4C4; padding: 20px; margin-bottom: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.new-order-steps .step-number 		{ float: left; margin-right: 10px; background-color: #13377A; font-size:24px; font-weight: bold; padding-top: 8px; display: inline-block; width: 40px; height: 40px; text-align: center; color:#FFF; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }
.step-title 						{ font-weight: bold; margin-top: 10px; color:#13377A; margin-bottom: 10px; }
.step-content 						{ padding-left: 55px; }

.table-new-order 					{ margin-bottom: 0; }
.table-new-order td					{ padding: 0; }
.table-new-order select 			{ width: 97%; }
#order-add-form select#event 		{ width: 97% !important; }
#order-add-form select#supplier 	{ width: 97% !important;  }
table.search-client 				{ margin: 0; }
table.search-client input			{  }
.result-customer 					{ position: relative; cursor: pointer; margin-bottom: 5px; border: 1px solid #D6D6D6; padding: 8px 16px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.result-customer span 				{ font-size:13px; color:#828282; }
.result-customer:hover 				{ text-decoration: none; background-color: #D9FC8D; border: 1px solid #9AD808; }
.result-customer .use-this-client 	{ display: none; position: absolute; top: 0; right:0; padding: 4px 8px; background-color: #55AF00; color:#FFF; }
.result-customer:hover .use-this-client { display: block; }
#create_order 						{ float: right; display: none; }

.access_request_supplier 			{ display: none; }

.actions 							{ background-color: #FFF; }
.actions-content 					{ width: 90%; margin: auto; padding: 10px; }
.actions a 							{ display: inline-block; padding: 10px 20px; text-decoration: none; color:#FFF; background-color: #A3A3A3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.actions a:hover 					{ background-color: #777777; }
.actions a i 						{ margin-right: 5px; }
.actions .add 						{ float: right; background-color: #5bb85d; color:#FFF; }
.back-to-home 						{  }

.order-info .order-info-box 		{ float: right; }
.order-info .order-status 			{ margin-bottom: 10px; }
.order-info .order-number 			{ font-size:22px; margin: 0 5px; display: inline-block; }
.orders-preview table td,
.orders-preview table th 			{ padding: 20px 10px; vertical-align: middle; }
.orders-preview a 					{ text-decoration: none; }
.order-preview:hover 				{ cursor: pointer; background-color: #E8E8E8; }
.client-info table 					{ width: auto; margin: 0;  } 
.client-info table th 				{ padding: 0 20px 4px 0; border: 0; }
.client-info table td 				{ padding: 0 20px 4px 0; border: 0; }
.locked 							{ background-color: #E00000; color:#FFF; padding: 10px; }

ul.orders-tabs 						{ margin: 0 0 0 12px; padding: 0; }
ul.orders-tabs li 					{ list-style: none; display: inline-block; }
ul.orders-tabs li a 				{ display: block; padding: 10px 15px; font-weight: bold; background-color: #FFFFFF; border: 1px solid #EAEAEA; text-decoration: none; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
ul.orders-tabs li a:hover,
ul.orders-tabs li a.current 		{ background-color: #565656; color:#FFF; }

span.count_item 					{ margin-left: 6px; display: inline-block; font-size:15px; line-height: 15px; padding: 2px 4px; background-color: #219900; color:#FFF; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.cmd 								{ font-weight: bold; line-height: 15px; padding: 5px 10px; display: inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.cmd-open 							{ color:#8FC400; border:2px solid #8FC400; }
.cmd-reopen 						{ color:#FFA30F; border:2px solid #FFA30F; }
.cmd-refused 						{ color:#C10300; border:2px solid #C10300; }
.cmd-cancel 						{ color:#3A3A3A; border:2px solid #3A3A3A; }
.cmd-need-approval 					{ color:#F95E20; border:2px solid #F95E20; white-space: nowrap; }
.cmd-approved	 					{ color:#8FC400; border:2px solid #8FC400; }

.header-qty 						{ min-width: 115px; }

.price-install-reg 					{ text-decoration: line-through;  }
.price 								{ margin-right: 10px; }
#show_store_price:hover 			{ cursor: pointer; color:#204AA0; }
.order_edit #search_results 					{ overflow-x: scroll; }
.order_edit #search_results table 				{ font-size:15px; }
.order_edit #search_results table tr:hover 		{ background-color: #EAEAEA; }
.order_edit #search_results table th 			{ background-color: #DBDBDB; }
.price-store 						{ display: none; }
.price-store-reg 					{ text-decoration: line-through; }

input.add_item_to_order 			{ cursor: pointer; }
input.qty-input 					{ padding: 4px; margin: 0; font-size:14px; width: 40px; text-align: center; }
img.btn_moins 						{ cursor: pointer;  }
img.btn_plus 						{ cursor: pointer;  }
input#confirm_add_to_order 			{ float: right; padding: 13px 28px; margin-bottom: 20px; color:#FFF; transition: 0.5s; background-color: #5bb85d; border: none; border-bottom: 4px solid #4F8E4F; cursor: pointer; font-size: 18px; line-height: 18px; -webkit-appearance: none; -webkit-border-radius: 3px; -moz-border-radius: 36px; border-radius: 3px; }
input#confirm_add_to_order:hover 	{ background-color: #35B737; }
input#confirm_add_to_order.btn-fixed{ position: fixed; bottom:0; left:0; width: 100%; text-align: center; margin: 0; }

.footer 							{ padding-bottom: 40px; }

.order-summary 						{ font-size:15px; line-height: 15px;  }
.order-summary td 					{ vertical-align: middle; }
.order-summary .save-success 		{ color:#6DC600; margin-left: 3px; }
.order-summary .save-error 			{ color:#B50000; margin-left: 3px; }
.order-summary .action-delete 		{ color:#B50000; padding: 2px; cursor: pointer; }
.order-summary .custom-price 		{ padding: 4px; margin: 0 0 0 4px; font-size:14px; width: 80px; text-align: left; }
.order-summary select 				{ padding: 4px; font-size:14px; }
.order-summary input,
.order-summary select  				{ padding: 4px; margin: 0; font-size:14px; }
.order-summary input#manual_qty		{ width: 40px; text-align: center; }
.order-summary input#custom_manu	{ cursor: not-allowed; }
.cell_price 						{ text-align: right; }
.manual-input 						{ display: none; }
#manual_code 						{ width: 118px; }
.quick_result_opt 					{ padding: 7px; cursor: pointer; }
.quick_result_opt:hover 			{ text-decoration: underline; }
#loading_quick_search 				{ width: 100px; display: none; margin-top: 10px; }
.quick-search-no-result 			{ padding: 7px; margin: 0; }
.add-product-manualy 				{ display: block; padding: 8px 12px; text-align: center; color:#FFF; font-size: 14px; line-height: 14px; transition: 0.5s; background-color: #5bb85d; border: none; border-bottom: 4px solid #4F8E4F; cursor: pointer; -webkit-appearance: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.add-product-manualy:hover 			{ background-color: #35B737; }
#add_product_custom 				{ background-color: #FFFCDB; }
#custom_confirmation 				{ color:#FFF; background-color: #5bb85d; text-align: center;font-weight: bold; padding: 5px 8px; cursor: pointer; -webkit-appearance: none; -webkit-border-radius: 3px; -moz-border-radius: 36px; border-radius: 3px; }
#custom_confirmation:hover 			{ background-color: #35B737; }
#custom_qty 						{ width: 40px; text-align: center; }
#custom_line 						{ text-transform: uppercase;	}
.order-summary-total 				{ font-size:24px; line-height: 32px; font-weight: 700; text-align: right; }
a.cancel-order 						{ background-color: #DB0000; color:#FFF; padding: 8px 12px; text-align: center; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
a.cancel-order:hover 				{ background-color: #AF0000; }
.complete-order 					{ background-color: #5bb85d; color:#FFF; padding: 8px 12px; text-align: center; text-decoration: none; float: right; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.complete-order:hover 				{ background-color: #35B737; }
.order-details 						{ padding: 20px 0; margin: 20px 0; border-bottom:2px solid #C1C1C1;  }
.order-details p 					{ margin: 0; }
.distributor-actions 				{ width: 100%; max-width: 400px; float: right; width:auto; }
#contact_cell 						{ max-width: 300px; width: 33%; }
.order-txt 							{ margin: 20px 0; }
input.points-distributor 			{ width: 50px; }
input.points-supplier 				{ width: 50px; }
input.order-extra-points 			{ width: 50px; }
.order-extra-data-points 			{ text-align: right; }
th.price-unit 						{ min-width: 150px; }

table.customer-stats 				{  }
.quarter  							{ width: 24%; float: left; margin-right: 1%; }
.quarter input#search 				{ width: 100%; }

.tier  								{ width: 32%; float: left; margin-right: 1%; }
.tier input#search 					{ width: 100%; }

.customer-list a					{ text-decoration: none; }
.customer-list tr:hover 			{ background-color: #E0E0E0; }

#reports_sales_by_store label 			{ display: block; }
#reports_sales_by_store #filter_store 	{ width: auto; max-width: 100%; }
#reports_sales_by_store #filter_event 	{ width: auto; max-width: 100%; }
#reports_sales_by_store #search 		{ width: auto; float: none; }

#reports_dc_sales_by_store label 		{ display: block; }
#reports_dc_sales_by_store #filter_event{ width: auto; max-width: 100%; }
#reports_dc_sales_by_store #search 		{ width: auto; float: none; }

#reports_dc_sales label 				{ display: block; }
#reports_dc_sales #filter_event			{ width: auto; max-width: 100%; }
#reports_dc_sales #search 				{ width: auto; float: none; }

#reports_dc_sales_by_supplier label 				{ display: block; }
#reports_dc_sales_by_supplier #filter_event			{ width: auto; max-width: 100%; }
#reports_dc_sales_by_supplier #search 				{ width: auto; float: none; }

#ordered_rewards label 			{ display: block; }
#ordered_rewards #filter_store 	{ width: auto; max-width: 100%; }
#ordered_rewards #filter_event 	{ width: auto; max-width: 100%; }
#ordered_rewards #search 		{ width: auto; float: none; }


.new-message-count 					{ background-color: #F00; color:#FFF; padding: 2px 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.new-msg 							{ background-color: #F00; color:#FFF; padding: 10px; font-weight: bold; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

.notification-preview 				{ position: relative; border: 1px solid #939393; padding: 10px 15px; margin-bottom: 15px; margin-top: 25px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.notification-datetime 				{ font-size: 14px; color:#939393; }
.notification-by 					{ font-size: 14px; color:#939393; margin-top: 20px; }
.notification-cie					{ font-size: 14px; }
.notification-contact 				{ font-size: 14px; }
.notification-txt 					{ margin: 10px 0; }
.notification-option 				{ float: right; }
.notification-option a 				{ margin:6px; }
.notification-preview.not-viewed 	{ border:3px solid #E04E00; }
.notification-desc 					{ margin-bottom: 10px; }
.notification-explication 			{ font-size:12px; color:#898989; margin: 10px 0 0 0; }
.notification-new 					{ position:absolute; top:-23px; left:-3px; font-size:13px; line-height: 13px; margin:0; background-color:#E04E00; color:#FFF; padding:5px 10px;}
.answer-status 						{ position:absolute; top:-23px; right:3px; display: inline-block;  background-color:#FFB310; color:#FFF; font-size:13px; line-height: 13px; padding:5px 10px; }
.answer-status.answered 			{ background-color:#5FA526; }

.store-list 						{ margin-left: 30px; }

.fancybox-slide--iframe .fancybox-content { width: 60%; height: 400px; max-width: 400px; max-height: 80%; margin: 0; }
.access-preview-name 				{ display: block; font-size:15px; font-weight: bold; }
.last-invite 						{ display: block; margin-top: 15px; font-size:14px; line-height: 17px; }à
.send-invite 						{ display: block; } 
.resend-invite 						{ display: inline-block; margin-right: 5px; font-size:14px; line-height: 14px; padding: 4px 8px; text-decoration: none; color:#FFF; background-color: #12286A; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.resend-invite:hover 				{ color:#FFF; text-decoration: none; background-color: #18449B; }
.logged-one-time 					{ color:#5bb85d; cursor: pointer; }
a.user-reset-password 				{ color:#288C0C; }
a.user-reset-password:hover 		{ color:#185106; text-decoration: underline; }
.msg-reset-password 				{ display: block; color:#185106; font-weight: bold; }

.item-no-border td 					{ border-bottom: none; }
input.contact_name 					{ width: 80%; }
select.shipping_delay_select 		{ width: 80%; }
p.contact_name_title				{ margin: 0; }
p.shipping_delay_title 				{ margin: 0; }
.item-has-equip td 					{ vertical-align: top; }
.item-has-equip input 				{ margin-bottom: 6px; }

.item-check-save 					{ margin-left: 4px; display: none; }

tr.cancelled td 					{ text-decoration: line-through; color:#E20000; }

#filter_stats input	 				{ width: 140px; }

.reward-order 						{ border: 1px solid #A0A0A0; padding: 20px; margin-bottom: 2px; }
.reward-order a  					{ text-decoration: none; }
.reward-order p 					{ margin-bottom: 0; }
.reward-order p.reward-order-title 	{ font-weight: bold; font-size:20px; }
.reward-order-img 					{ width: 40%; float: left; margin-right: 20px; max-width: 200px; }
.reward-order-img-wishlist 			{ width: 25%; float: left; margin-right: 20px; max-width: 150px; }

.print-list 						{ float: right; text-decoration: none; background-color: #212121; color:#FFF; padding: 10px 15px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.print-list:hover 					{ background-color: #000000; color:#FFF; }

.question 							{ border: 1px solid #F2F2F2; padding: 8px; background-color: #F2F2F2; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.question:hover 					{ border: 1px solid #8E8E8E; }
.question-title 					{ cursor: pointer; padding: 12px 15px; font-size:18px; line-height: 20px; color:#12286A; font-weight: bold; }
.question-answer					{ display: none; padding: 12px 33px; font-size:14px; line-height: 22px; }
.question-preview 					{ margin: 0; padding: 0; }

.desactivate-account 				{ color:#F00; font-size:13px; display: block; }
.desactivate-account:hover 			{ color:#B70000; }

#quiz 								{ margin-top: 30px; }
#quiz-restart-btn 					{ display: none !important; }
#quiz-start-btn 					{ background-color:#51A300; font-size:20px; color:#FFF; padding:15px; font-weight: bold; display: block; text-decoration: none; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#quiz-start-btn:hover 				{ background-color:#438700; }
#quiz .question 					{ font-size:32px; line-height: 36px; background: none; color:#2654B1; }
#quiz .answers li 					{ display: block; }
#quiz .answers li a					{ display: block; padding: 10px 20px; text-decoration: none; border: 1px solid #B2B2B2; margin-bottom: 3px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  }
#quiz .answers li a:hover 			{ background-color: #A8A8A8; border: 1px solid #3D3D3D; color:#000; }
#quiz .answers li a.incorrect 		{ background-color: #F00; border: 1px solid #6B0000; color:#FFF; }
#quiz .answers li a.correct 		{ background-color: #51A300; border: 1px solid #438700; color:#FFF; }
#quiz-response 						{ padding: 20px; border: 1px solid #FFA921; background-color: #FFE2B7; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#quiz-next-btn 						{ float: right; background-color: #5bb85d; color:#FFF; display: inline-block; padding: 10px 20px; text-decoration: none; color:#FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#quiz-next-btn:hover 				{ background-color: #35B737; }
#quiz-next-btn .fas 				{ margin-left: 10px; }

#quiz-finish-btn 					{ float: right; background-color: #5bb85d; color:#FFF; display: inline-block; padding: 10px 20px; text-decoration: none; color:#FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#quiz-finish-btn:hover 				{ background-color: #35B737; }
#quiz-finish-btn .fas 				{ margin-left: 10px; }

.fa-exclamation-triangle 			{ font-size: 20px !important; color:#FCCE00; }
.shortcut a.shortcut-link .fa-exclamation-triangle { display: inline-block; }

.download-flyer-link 				{ margin-bottom: 30px; display: block; }

.customer-list-zone 				{ overflow-x: scroll; width: 100%; }

p.download-excel 					{ margin-bottom: 0; }

#pswd_info 							{ display: block; border: 1px solid #DBDBDB; padding: 20px 20px 0 20px; }
#pswd_info p 						{ margin-bottom: 4px; font-size:14px; }
#pswd_info ul li 					{ list-style: none; font-size:14px; height: 17px; }
#pswd_info .invalid 				{ color:#CC0000; font-weight: bold; }
#pswd_info .valid 					{ color:#50A500; font-weight: bold; }
.force-new-password #submit 		{ width: 100%; margin-top: 10px; }

#last-order-line-total td			{ border-top:2px solid #777777; }
.last-line-total-points 			{ text-align: right; }
.order-extra-data-comment 			{ width: 60%; }

.report-list li 					{ list-style: none; margin-bottom: 4px; }
.report-list li a 					{ color:#12286A; display: block; padding: 12px 20px; border: 1px solid #12286A; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.report-list li a:hover 			{ background-color: #12286A; color:#FFF; }

.admin-notes 						{ border: 1px solid #D13E00; color:#D13E00; padding: 20px; margin: 20px 0px 20px 0px !important; display: block; }

.new-order-steps #search_customer_no 		{ width: auto; max-width: 160px; }
.new-order-steps #search_distributor_code 	{ width: auto; max-width: 160px; display: block; }
.new-order-steps #search_customer_name 		{ width: 97%; display: block; }

a.export-file-to-csv 				{ text-decoration: none; float: right; color:#262626; background-color: #FFDB8E; padding: 7px 18px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
a.export-file-to-csv:hover   		{ background-color: #FFD27A; }

/*  ============================================================================
    Media queries
    ========================================================================== */

/* XXLARGE SCREEN */
@media only screen and (max-width : 1680px) {
	.login-wrapper 						{ top:20%; width: 70%; left: 15%; }
}

/* XLARGE SCREEN */
@media only screen and (max-width : 1440px) {
	
}

/* LARGE SCREEN */
@media only screen and (max-width : 1280px) {
	table.search-client input  			{ width: 94% !important; }
	.menu li a 							{ padding: 8px 6px; }
	.menu li.logout 					{ padding-left: 10px; margin-left: 10px; }
}

/* MEDIUM SCREEN */
@media only screen and (max-width : 1024px) {
	.top-content 						{ width: 98%; }
	.actions-content 					{ width: 98%; }
	
	.login-wrapper 						{ top:10%; width: 80%; left: 10%; }
	.login-wrapper p.welcome 			{ font-size: 50px; line-height: 40px; }
	/*.login-wrapper p.signin 			{ font-size: 20px; line-height: 24px; }*/
	
	.panel 								{ padding: 20px; }
	
	.menu 								{ display: none; position: fixed; z-index: 10; top:0; left:0; padding: 30px; width: 90%; height: 100%; min-height: 100%; background-color: #4F4F4F; }
	.menu li 							{ display: block; }
	.menu li a							{ display: block; font-size:20px; padding: 12px; }
	.menu li.logout 					{ border: none; border-top: 1px solid #FFF; margin: 20px 0 0 0; padding: 20px 0 0 0; }
	#menuburger 						{ display: block; z-index: 9999; position: fixed; top:0px; right:20px; color:#FFF; font-size:30px; line-height: 30px; border: none; cursor: pointer; padding: 14px 16px; background: #12286A; }
	
	.quarter  							{ width: 49%; }
}

/* INTER SCALE */
@media only screen and (max-width : 960px) {
	.orders-preview 					{ width: 100%; overflow-x: scroll; }
	.order-summary-wrapper 				{ width: 100%; overflow-x: scroll; }
}

/* SMALL SCREEN */
@media only screen and (max-width : 768px) {
	.login-wrapper 						{ top:10%; width: 94%; left: 3%; }
	.login-wrapper p.welcome 			{ font-size: 30px; line-height: 20px; }
	/*.login-wrapper p.signin 			{ font-size: 16px; line-height: 20px; } */
	
	.table-new-order table,
	.table-new-order tr,
	.table-new-order td 				{ width: 100%; display: block; }
	table.search-client 				{ width: auto !important; display: table !important; }
	table.search-client tr 				{ width: auto !important; display: table-cell !important; }
	table.search-client td 				{ width: 50% !important; display: table-cell !important; }
	
	
	
	.order-info 						{ margin-bottom: 10px; }
	.order-info .order-info-box 		{ float: none; }
	.order-info p.order-status 			{ margin: 0; }
	h2 									{ font-size:26px; line-height: 30px; }
	
}

/* INTER SCALE */
@media only screen and (max-width : 640px) {
	.login-wrapper 						{ top:50px; background-color: #FFF; padding: 30px; text-align: center; }
	.login-right 						{ float: none; width: 100%; padding: 20px; }
	.login-left 						{ float: none; width: 100%; padding: 20px; }
	.login-wrapper p.welcome 			{ color:#004996; }
	/*login-wrapper p.signin 			{ color:#004996; } */
	.login-wrapper label 				{ color:#004996; }
	.login-wrapper a 					{ color:#004996; }
	.login-wrapper p 					{ color:#004996 !important; }
	
	.shortcut a.shortcut-link 			{width: 48%; margin: 1%; }
	.panel 								{ padding: 12px; }
	.step-content 						{ padding: 0; }
	.new-order-steps .step-number 		{ font-size:12px; padding: 0; width: 23px; height: 23px; }
	.step-title 						{ margin-top: 0; }
	#create_order 						{ float: none; width: 100%; text-align: center; }
	
	.actions a 							{ display: block !important; text-align: center; float: none !important; margin-bottom: 2px; }
	ul.orders-tabs 						{ margin: 0; }
	ul.orders-tabs li a 				{ font-size: 14px; padding: 6px 10px; }
	
	.client-info table,
	.client-info table tr, 				
	.client-info table td 				{ width: 100%; display: block; }
	
	.tier  								{ width: 100%; float: none; margin-right: 0; }
	
	.quarter  							{ width: 100%; }
	.order-extra-data-comment 			{ width: 100%; }
	
	.orders-search table,
	.orders-search tr,
	.orders-search td 					{ display: block; width:100%; border: 0; }
	.orders-search td input,
	.orders-search td select 			{ margin: 0; }
	
	.complete-order 					{ display: block; float: none; width: 100%; margin-bottom: 15px; }
	.cancel-order 						{ display: block; float: none; }
}

/* XSMALL SCREEN */
@media only screen and (max-width : 479px) {
	table.search-client 				{ width: 100% !important; display: block !important; }
	table.search-client tr 				{ width: 100% !important; display: block !important; }
	table.search-client td 				{ width: 100% !important; display: block !important; }
	.panel 								{ padding: 10px; }
}



/* SHORTCUTS & HELPERS

-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;

*/

body {
	--el-color-primary: #12286A;
}

#phoning-event-app .my-message-box {
	padding: 20px;
	background: #0049AE;;
	border: 1px solid #c5c2c2;
	border-radius: 25px;
	position: relative;
	color: white;
}

#phoning-event-app .my-message-box * {
	color: white;
}

#phoning-event-app .my-message-box .icon {
	font-size: 35px; background: #13A4FF; background: linear-gradient(to right, #80CFFF 0%, #D78EFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

#phoning-event-app .my-message-box .message-header .author {
	font-size: 20px;
}

#phoning-event-app .my-message-box .message-header {
	font-size: 10px; line-height: 1;word-break: break-all;display: flex; gap:10px; align-items: center
}

#phoning-event-app .my-message-box .content {
	text-align: center;
}

#phoning-event-app .my-message-box .content .title{
	font-weight: bold;
}

#phoning-event-app .my-message-box .content .text{
	margin: 0;word-break: break-all; white-space: pre-line;
}

.el-input__wrapper, input  {
	height: 45px!important;
}

.el-input__wrapper .el-input__inner, .el-select__input {
	height: 100%!important;
}