/*SETTING WEB COLORS*/
:root {
  --menu-color: rgb(105, 96, 236); /*rgb(105, 96, 236)*/
  --ahover-color: rgba(105, 96, 236, 0.7);
  --lightblue-color: rgba(105, 96, 236, 0.3);
  --menuitemhover-color: rgb(228, 237, 97); /* #E4ED61 yellow*/;
  --roweven-color: rgba(33,153,232,0.1);
  --rowhover-color: rgba(33,153,232,0.5);
  --edithover-color: rgba(33,153,232,0.8);
  --dgray-color: #444444;
  --mgray-color: #787878;
  --lgray-color: #f8f8f8;
  --green-color: #57bf57;
  --red-color: #E1715B;
}

a {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
 color: var(--menu-color);
 font-weight: bold;
}

a:hover, a:focus {
 color: var(--ahover-color);
}

.button {
    background-color: #6960ec;
}
.button:hover, .button:focus {
    background-color: rgba(105, 96, 236, 0.8);
}

.accordion-title { font-size:1.1rem;  color: var(--menu-color);}

/*TYPOGRAPHY*/
h1, h2, h3, h4, h5 {color: var(--menu-color); margin-bottom:0;} /*#4497cb !important*/
/*FIELDSET*/
fieldset {
    border: 1px solid #dddddd;
    padding: 1.25rem;
 }
legend, .legendstyle{
	color: #6960ec; /*#4497cb;*/
	font-size:1.2rem;
	font-weight: bold;
  margin: 0 0 0 -0.1875rem;
  padding: 0 0.1875rem;
}
/*DATEPICKER*/
.ui-datepicker {z-index:2 !important;}
.ui-datepicker-calendar td a {
    text-align: center !important;
}
/*HIGHLIGHT*/
.highlighted {background-color: #f8f8f8;}
/*LOADER INIMATION*/
#loader { 
  margin: 0; 
  position: fixed; 
  top:0; 
  left:0; 
  width: 100%; 
  height:100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000000;
  display:none;
}
#loader i {
  color: #fff;
  position: absolute; 
  top:50%; 
  left:50%; 
}

/*BUTTONS*/
.headerbutton {
   -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
 color:#fff;
 cursor:pointer;
 margin-left:0.5rem; 
 font-size: 1.5rem; 
 position:relative; 
 top: 0.2rem;
}

.editbutton {
 -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
 color:var(--menu-color);
 cursor:pointer;
 margin-right: 0.5rem;
}
.delbutton {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
  color:var(--red-color);  
  cursor:pointer;
  margin-right: 0.5rem;
}
.editbutton:hover, .delbutton:hover, .headerbutton:hover {
  color: var(--dgray-color);
}

/*FORM ELEMENTS*/
textarea {resize:none;}
input[type="checkbox"], input[type="radio"] {
   width: 16px;
   height: 16px;
   padding:0;
   margin:0; 
}
.row label {font-weight:bold; color:#444;}
th select {
  margin-bottom:0; 
  height: auto; 
  width:auto; 
  padding-top:0.2rem; 
  padding-bottom:0.2rem; 
  color: #fff;
  background-color: transparent;
  border-color: #fff;
  border-radius: 0.1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' version=\'1.1\' width=\'32\' height=\'24\' viewBox=\'0 0 32 24\'><polygon points=\'0,0 32,0 16,24\' style=\'fill: rgb%28255, 255, 255%29\'></polygon></svg>") !important;
}
th select:focus {
    outline: none;
}

/* MENU */
#mainmenu {margin-bottom: 1rem; border-bottom: 0.6rem solid var(--menuitemhover-color);}
.title-bar {border-top: 0.6rem solid var(--menuitemhover-color);}

.top-bar, .top-bar ul {
    background-color: var(--menu-color);
}

.top-bar a, .top-bar ul a {
  color: #fff;
}
.is-dropdown-submenu {
    border: 1px solid var(--menu-color);
    /*background-color:rgb(22,140,217) !important;*/
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    border-color: #fff transparent transparent;
}



.top-bar li[role='menuitem'] a {
   -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.top-bar li[role='menuitem'] a:hover {
 color: var(--menuitemhover-color);  /*rgb(232,212,33);*/ /*#e8d421   yellow*/
}

#mainmenu .active > a {
    background: var(--menuitemhover-color) none repeat scroll 0 0;
    color: var(--mgray-color);
}

.title-bar {
    background: var(--menu-color) none repeat scroll 0 0;
}

/* DATA TABLES CUSTOMIZATION*/
.ttitle {
  text-align:center;
}

table.styled thead, table tfoot {
    background: var(--menu-color) none repeat scroll 0 0;
    color: #fff;
}
table.styled thead, table tbody, table tfoot {
    border: 1px solid var(--menu-color);  
}

table.styled tbody td {
  color: #444;
}

table.styled tbody tr:nth-child(2n) {
    background-color: var(--roweven-color);
}
table.styled tbody tr:hover {
    background-color: var(--rowhover-color);
}

#products_previous, #products_next {display: none;}
div.dataTables_paginate {
    float: none !important;
    text-align: center;
}
.pagination li {
    border-radius: 0.1rem !important;
}

div.dataTables_wrapper div.dataTables_filter label {
  float: left !important;
}

div.dataTables_wrapper div.dataTables_length label {
  float: right !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0 !important;
}

/*HELPERS*/
.shorten {
  width: 95%; 
  display:inline-block; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow:ellipsis; 
  /*padding-left:3px;*/
}