body{background:#ddd; color: #1e1e1e; font-size:16px; font-family: sans-serif, arial;}

h2,h3,.border{border-bottom: 3px solid #f30000; margin: 15px 0; padding: 0 0 2px 0;font-size: 35px; text-align:center}
h4,h5{border-bottom: 3px solid #f30000; margin: 15px 0; padding: 0 0 2px 0;font-size: 22px; text-align:center}

.border_breaker{height:1px;background:#000;width:100%;float:left;font-size:1px;overflow:hidden;padding:0;margin:10px 0;}

.tab{display: none;}
.tab.active{display: block;}

.ui-autocomplete { max-height: 400px; overflow-y: auto;   /* prevent horizontal scrollbar */ overflow-x: hidden; /* add padding to account for vertical scrollbar */ z-index:1000 !important; }

#header {float:left;width:98%; background:#1e1e1e; padding: 0 1% 10px;}
#header ul {padding:30px 0 0;list-style:none;}
#header ul li{float:right; width: auto; margin-left:15px; padding-right: 15px; position:relative;}
#header ul li a{display: block; color:#fff;}
#header ul li + li {border-right: 1px solid #fff;}
#header ul li:first-child{padding-right:0;}

#header ul li:hover ul{display: block;}
#header ul ul{position:absolute; top:18px;left:-15px;margin:0;padding:0; width:128px; display:none; z-index:999;}
#header ul ul li{background:#ffd200;border: 1px solid #000; display:block; text-align:left; margin:0;padding:0;width:100%;}
#header ul ul li + li {border-top: 1px solid #000;}
#header ul ul li a{color:#000;padding: 5px 2% 5px; display:block; width: 96%;}
#header ul ul li a:hover{background:#f30000;}

#topbar{background:#f30000;float:left;width:100%;}
#topbar ul{padding:0;list-style-type:none;margin:0;float:left;width:100%;}
#topbar ul li{float:left;}
#topbar ul li + li{border-left: 2px solid #a1a0a0; }
#topbar ul li a{color:#fff;transition:background 0.5s; line-height:46px;height:46px; display: inline-block; padding: 0 15px; text-transform: uppercase;}
#topbar ul li a:hover,#topbar ul li.active a{background:#bd0a0a;}

.menu_home ul{list-style:none; padding: 20px 0;margin:0; flex-wrap: wrap; display:flex;justify-content: center; }
.menu_home ul li{display: flex; width: 300px; height:200px; background: #636363; text-transform:  uppercase; margin: 10px;}
.menu_home ul li a{height:inherit;width:inherit;display: flex;align-items: center;justify-content: center; font-size:30px;color: #fff;}
.menu_home ul li:hover a, .menu_home ul li.active a{background: #f30000;}

a:link,a:active,a:visited{color: #c80126; transition: color 0.5s, background 0.5s;}
a:hover{color:#666;}

.ajax_image_added:first-child{border-top:1px solid #c80126;}
.ajax_image_added{border-bottom:1px solid #c80126; height:100px;}
.ajax_image_added .image{width:20%;float:left; height: inherit;}
.ajax_image_added .image img{max-width:100%;max-height: 100%;}
.ajax_image_added .actions{font-size:40px; float:right;text-align:right; padding-top:28px;}

.progress {background-color: #f5f5f5;border-radius: 4px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;height: 20px;margin-bottom: 20px;overflow: hidden; float:left;width: 100%;}
.progress-bar{background-color: #c80126;box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;color: #fff;float: left;font-size: 12px;height: 100%;line-height: 20px;text-align: center;transition: width 0.6s ease 0s;width: 0;}  


#dm_login{width:400px; margin:20px auto; text-align: center;}
#dm_login legend{font-size: 22px; width: 100%;color: #c80126; text-transform: uppercase; font-weight bold; border-bottom: 1px solid  #c80126; padding-bottom:10px;margin-bottom: 10px;}
#dm_login .input{float:left; width: 100%;margin-bottom: 10px;}
#dm_login label, #dm_login input{width:100%; margin:0 0 5px;}
#dm_login button{float:left;  border: 1px solid #c80126; background: #c80126; color: #fff; transition: color 0.5s, background 0.5s; padding: 3px 10px;}
#dm_login button:hover{color:#c80126;background:none;}
#dm_login a{float:right;}
#dm_login a:hover{color:#fff;}
#dm_login .checkbox label input{width: auto; margin: 0 5px 0 0;}

.bar { height: 18px; background: #c80126;color:#fff; line-height:18px; padding: 4px 0; }

.red{color: #c80126;}
.error-message{color:#f00;}
h3{margin: 0 0 15px;}
.search_form{margin-bottom:10px;}
h3 .search_action{display:block;cursor: pointer; font-size:30px; transition:color 0.5s;}
h3 .search_action:hover{color:#c80126;}

.search_articles > .input{text-align:center; border-bottom: 3px solid #f30000; padding-bottom:20px; font-size:20px;}
.form .search_articles > .input input{display: inline-block;float:none; text-align:center;}
.search_articles > .col_50{border-bottom: 3px solid #f30000; padding-bottom:20px; font-size:20px; min-height:70px;}
.form .search_articles > .input input{display: inline-block;float:none; text-align:center;}


.inner{position:relative;}
#wrap_whole_website .message{position:absolute;right:1%;top:95px;z-index:999;background:#ddd;color: #c80126; padding: 5px 15px; border-radius: 5px;}
#wrap_whole_website .message.success{color: #333}
.center-input select,.center-input input{float: none !important;}

.index .top.actions-sidebar{position:absolute; width:auto;right:50px;top:0; border: 0;}
.actions-sidebar{padding: 0 0 15px; margin:0 0 15px 0; border-bottom: 2px solid #4e4e4e;}
.actions-sidebar li{float:left;width: auto;}
.actions-box a,.add_image_row .button, #searchForm button,.actions-sidebar a,.actions-sidebar button{border-radius: 5px; border: 1px solid #ffd200; background: #ffd200; color:#2c2722; transition: background 0.7s; display:inline-block; width: auto; padding: 5px 10px; margin-right: 10px; font-size:21px; line-height:24px;}
.actions-box a.red{background:#c80126;border-color:#c80126; color:#fff;}
.actions-box a.red:hover{background:#fff;color:#000;}
.actions-box a:hover,.add_image_row .button:hover, #searchForm button:hover, .actions-sidebar a:hover,.actions-sidebar button:hover,#searchForm button.reset_search:hover{background:none;}

#searchForm button.reset_search{background: #f30000;border-color: #f30000;}

ul.side-nav {width: 100%; text-align:right; }
ul.side-nav li{display: inline-block;float: none;}
ul.side-nav li.fleft{float:left;}
.actions-sidebar a.return_button{background:#f30000;border-color:#f30000;color:#fff;}
.actions-sidebar a.return_button:hover{color:#000;background:#fff;}

.index{float:left;width:100%;position:relative;}
.index th{text-align:left;border-bottom:1px solid #000; padding: 4px 0;}
.index td{border-bottom:1px solid #ddd; padding: 4px 2px;}
.index td .numeric input{width:50px;}
.index tr:last-child td{border-bottom:1px solid #000;}
.index tr:nth-child(2n) td{background: #ddd;}
.index tr:hover td{background: #444; color:#fff;}
.index .actions{text-align:right;}
.index .paginator.top p{display:none; }
.index .pagination{list-style-type:none;margin:10px 0;padding:0;}
.index .pagination li{float:left; width:auto; margin:0 5px;}
.index .pagination li:first-child{margin-left:0;}
.index .pagination li.active a,.index .pagination li a:hover{background:#c80126;color:#fff;}
.index .pagination li a{display:block; padding: 5px 10px; border-radius:5px;}	
.index .pagination .disabled{display:none;}
.index .actions a{font-size:30px; padding: 2px 5px 0; display:inline-block;}

.form fieldset{float:left;width:100%; margin-bottom:15px;}

/*#items-added .side-nav{display: none;}*/
#items-added .inside_form{margin: 10px 0; padding:15px 0; border-top: 1px solid #000;}

.white .form .color_1 .input input{background: rgba(255,0,0,0.35);}
.white .form .color_2 .input input{background: rgba(0,255,0,0.35);}
.white .form .color_3 .input input{background: rgba(0,0,255,0.35);}
fieldset .col_10{float: left; width:8%;margin: 0 1% 10px; min-width:100px; min-height:70px;}
fieldset .col_12{float: left; width:10%;margin: 0 1% 10px; min-width:100px; min-height:70px;}
fieldset .col_15{float: left; width:13%;margin: 0 1% 10px; min-width:100px; min-height:70px;}
fieldset .col_20{float: left; width:18%;margin: 0 1% 10px; min-width:100px; min-height:70px;}
fieldset .col_25{float: left; width:23%;margin: 0 1% 10px; min-width:100px; min-height:70px;}
fieldset .col_33{float: left; width:31.3%;margin: 0 1% 10px; min-width:150px; min-height:70px;}
fieldset .col_50{float: left; width:48%;margin: 0 1% 10px; min-width:200px;}
fieldset .col_100{float: left;width: 98%; margin:0 1% 10px; min-width:400px;}

.squeeze textarea{height:102px;}
.three_line textarea{height:182px;}
.before_summary{max-width:600px;}
.invoice_extra .col_25 {min-height: 30px; } 
.invoice_extra .col_25.fright{float:right;}
.invoice_extra{width:550px; margin-left:50px;}

.summary{max-width:400px;}
fieldset .summary .col_50,fieldset .summary .col_100{min-width:80px;}
.form .inline-label .input{float:right;width:49%;}
.form .inline-label .label{float:left;width: 49%; text-align:right; line-height:30px;}

.white .form fieldset .col_10 .input input,
.white .form fieldset .col_10 .input select,
.white .form fieldset .col_12 .input input,
.white .form fieldset .col_12 .input select,
.white .form fieldset .col_15 .input input,
.white .form fieldset .col_15 .input select,
.white .form fieldset .col_33 .input input,
.white .form fieldset .col_33 .input select,
.white .form fieldset .col_100 .input textarea,
.white .form fieldset .col_100 .input input,
.white .form fieldset .col_50 .input select,
.white .form fieldset .col_50 .input textarea,
.white .form fieldset .col_50 .input input{max-width: 100%;}

.form .input{float:left; width: 100%;margin-bottom:10px;}
.form .input input.readonly{background: #ccc;}
.form .input label{float:left;width: 98%; padding:0 1% 2px;background:#aaa; font-weight:bold;}
.form .input select,.form .input textarea,.form .input input{float:left;width: 98%; padding: 4px 1%; border:0;}
.form .input select{width:100%;}
.form .input.checkbox{margin:5px 0 7px; padding-top:2px;}
.form .input.checkbox input{width: auto; float:none; margin: 1px 5px 0 0; display:inline-block; vertical-align:text-top;}
.form .input.file{color:#fff;}
.form .multiple_select{height:205px;}
.image_list {margin:10px 0;}
.image_list .image_box{width:142px; height:142px; position:relative; border: 3px solid #000; margin: 5px; cursor:pointer; transition:border 0.7s, background 0.5s;}
.image_list .image_box:hover{border-color:#c80126; background: rgba(0,0,0,0.2)}
.image_list .image_box .overlay_name{position:absolute;left:0;bottom:0;padding: 5px 1%; width:98%;text-align:center; color:#fff;background:rgba(0,0,0,0.5);}
.image_list .image_box img.thumb{max-width: 100%;max-height:100%;}

.form .input .error-message{float:left; width:100%;}

.form .input.datetime{background:#fff;}
.form .input.datetime select{width:auto; margin-right:5px;}
.form .input.datetime select[name="created[day]"]{border-right:15px solid #aaa;}

.current_attachment{margin:0 0 15px 0;}
.current_attachment img.thumb,.input img.thumb{border: 3px solid #c80126;}

img.thumb{max-width:150px;max-height:50px;}

#searchForm {text-align:right;}
#searchForm .input{display:inline-block; margin: 5px;}

#wrap_whole_website{float:left;width:100%;}
.container{width:98%; padding: 0 1%; float:left;}

header {padding: 10px 0;border-bottom:2px solid #c80126;}

main{background:#d0d0d0; padding:10px 0;}

main table{width:100%;}

footer {padding: 0px 0 10px;border-top:2px solid #c80126;}

.logged_user header{display:none;}
.logged_user .sidebar{width:198px; background:#C0C0C0; position:fixed; height:100%;border-right:2px solid #c80126; transition: width 0.5s;}
.logged_user #wrap_whole_website{display:block;}
.logged_user #wrap_whole_website .sidebar{display: none;}
.logged_user .inner{display:block; padding:0 1%; transition:padding 0.5s;}
.logged_user header .logo{display:none;}
.sidebar .logo{text-align:center; margin: 15px 0; width: 100%;}
.sidebar .logo a{display:block;}
.sidebar .logo img{max-width: 100%; height: auto;}
.sidebar ul{margin:0; padding: 0; list-style-type:none;border-top: 1px solid #c80126;float:left;width:100%;}
.sidebar ul li{position:relative; float:left; width:100%;}
.sidebar ul li a{display:block; font-size:20px; background: #ddd;border-bottom: 1px solid #c80126; padding: 7px 0 7px 5px;}
.sidebar ul li.active a,.sidebar ul li a:hover{background: #343434; color:#fff;}

.manage_sidebar{position:fixed;left:5px;bottom:5px; font-size:40px;}
.manage_sidebar .open{display:none;}
.manage_sidebar.closed .open{display:block;}
.manage_sidebar.closed .close{display: none;}

.hide_sidebar #sidebar{width:45px;overflow:hidden;}
.hide_sidebar.logged_user .inner{padding-left:45px;}

/* color tepmlate white */

body.white{background:#fff;}
.white.logged_user .sidebar{background:#fff;}
.white .form .input.textarea label,.white main{background:#fff;}
.white .index tr:nth-child(2n) td,.white .index th{background:#b7b7b7;}
.white .sidebar ul li a{background:none; color:#000;}
.white .sidebar ul li.active a,.white .sidebar ul li a:hover{background:#c80126;color:#fff;}
.white .index tr:hover td{background: #dAf0f0;color:#333;}
.white .form .input label{background:none; padding:0 0 2px;width:100%;}
.white .form .input.datetime{background:none;}
.white .form .input.datetime select[name="created[day]"]{border-color:#f1f5f6; }

.index table th{color:#282828;font-weight: 400; text-align:center;}
.index table th a{color:#282828;font-weight: 400;}
.index table td, .index table th{border-left: 1px solid #949494;border-right: 1px solid #949494;}
.index table td.center{text-align:center;}

/* color tepmlate black */

body.black{background:#343434; color:#fff;}
.black.logged_user .sidebar{background:#404040;}
.black .form .input.textarea label,.black main{background:#282828;}
.black .sidebar ul li a{background:#000;}
.black .index td{border-color:#333;}
.black .index tr:nth-child(2n) td{background:#333;}
.black .sidebar ul li.active a,.black .index tr:hover td,.black .sidebar ul li a:hover{background: #444;color:#fff;}
.black .form .input label{background:#343434;}
.black .form .input.datetime{background:none;}
.black .form .input.datetime select[name="created[day]"]{border-color:#343434; }

/* size */
.white .form .input select,.white  .form .input textarea,.white  .form .input input{max-width:400px; border-radius:5px; box-shadow: 0 0 0px 1px #333;border:0;/* border:1px solid #333;*/}
.white .form .input select{max-width:430px;}

.black .form .input select,.black  .form .input textarea,.black  .form .input input{max-width:400px; border-radius:5px; border:1px solid #333;}
.black .form .input select{max-width:430px;}

.white .dmi_labels a:link, .white .dmi_labels a:active, .white .dmi_labels a:visited, .white .dmi_labels a:hover,
.gray .dmi_labels a:link, .gray .dmi_labels a:active, .gray .dmi_labels a:visited, .gray .dmi_labels a:hover{color:#000;}
#cke_description_en_editor textarea, #cke_description_fr_editor textarea{max-width:100% !important; padding:0px !important;}