/**
 * Modified By @Dinh
 * Date 2022/08/27
 * Content
 * Add Variable to change theme colors - 7 colors
 */
:root {
  --color1: #0062af;
  --color2: #4fabf3;
  --color3: #017fe2;
  --color4: #000;
  --color5: #1ba1e2;
  --color6: #60a917;
  --color7: #fa6800;
  --main-color: rgb(30, 76, 137);
  --main-color-2: rgb(0, 80, 175);
}
a,
a:hover,
a:active,
a:focus {
  color: var(--color1);
  text-decoration: none;
}

a.btn .fa {
  color: #fff !important;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:focus,
.btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}

.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #fff;
  border-color: #ccc;
}

.btn-default .badge {
  color: #fff;
  background-color: #333;
}

.btn-primary {
  color: #fff;
  background-color: var(--color1);
  border-color: var(--color1);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #fff;
  background-color: var(--color3);
  border-color: var(--color3);
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: var(--color1);
  border-color: var(--color1);
}

.btn-primary .badge {
  color: var(--color1);
  background-color: #fff;
}

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success:focus,
.btn-success.focus {
  color: #fff;
  background-color: #449d44;
  border-color: #449d44;
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success,
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
  color: #fff;
  background-color: #449d44;
  border-color: #449d44;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}

.btn-info {
  color: #fff;
  background-color: var(--color2);
  border-color: var(--color2);
}

.btn-info:focus,
.btn-info.focus {
  color: #fff;
  background-color: #31b0d5;
  border-color: #1b6d85;
}

.btn-info:hover,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info,
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
  color: #fff;
  background-color: var(--color2);
  border-color: var(--color2);
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: var(--color2);
  border-color: var(--color2);
}

.btn-info .badge {
  color: var(--color2);
  background-color: #fff;
}

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning:focus,
.btn-warning.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #985f0d;
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning,
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #ec971f;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-danger:focus,
.btn-danger.focus,
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger,
.btn-danger:active:hover,
.btn-danger.active:hover,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.open > .dropdown-toggle.btn-danger:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger.focus {
  color: #fff;
  background-color: #c9302c;
  border-color: #c9302c;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}

.btn-link {
  font-weight: normal;
  color: var(--color1);
  border-radius: 0;
}

.page-content {
  /* background: var(--color1); */
  background: var(--color1);
}

.navbar .logo-box {
  background: var(--color1);
}

.navbar .logo-box a {
  color: #fff;
}

.sidebar {
  background: var(--color1);
}

.sidebar-header {
  background: var(--color1);
}

.sidebar-profile span small {
  color: #cedadd;
}

.page-sidebar.sidebar {
  background: var(--color1) !important;
}

.menu {
  background: var(--color1);
}

.menu.accordion-menu a {
  color: #fff;
}

.menu.accordion-menu > li > a:hover {
  background: var(--color2);
  color: #fff;
}

.menu.accordion-menu > li.active > a,
.menu.accordion-menu > li.active.open > a {
  background: var(--color2);
  color: #fff;
}

.small-sidebar:not(.page-sidebar-fixed) .accordion-menu li.droplink:hover > a,
.horizontal-bar .accordion-menu > li.droplink:hover > a,
.menu.accordion-menu ul,
.menu.accordion-menu li.open > a,
.hover-menu .accordion-menu > li.droplink:hover > a {
  background: var(--color2);
  color: #fff;
}

.menu.accordion-menu ul li a:hover,
.menu.accordion-menu ul li.active a {
  background: var(--color1);
  color: #fff;
}

.menu.accordion-menu ul li a {
  color: #fff;
}

.user-dropdown-toggle:hover {
  background: var(--color1) !important;
}

.hightlight {
  background: var(--color1);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  color: #fff;
}

#image_preview .thumbnail .label {
  background: #fff;
  border-top: 2px solid var(--color1);
  border-bottom: 2px solid var(--color1);
  color: #000;
}

#questions-sortable div:hover,
.common-sortable div:hover {
  background: var(--color1);
  color: #fff;
  border: 1px solid var(--color1);
}

.answer-pond div:hover {
  /*background: var(--color1);*/
  /*color: #fff;*/
  border: 1px solid var(--color1);
}

.survey-rows > div:hover,
.survey-rows > div.active.is_seen,
.survey-rows > div.active {
  background: var(--color1);
  color: #fff;
}

.btn.btn-large-block.contact-favorite-block {
  color: var(--color1) !important;
  border: 1px solid var(--color1) !important;
}

.btn.btn-large-block.contact-favorite-block:hover {
  color: #fff !important;
  background: var(--color1);
}

.newtask-tag.normal {
  background: var(--color2);
  color: #fff;
}

.newtask-tag.high {
  background: #fa7268;
  color: #fff;
}

.newtask-tag.emergency {
  background: #d00;
  color: #fff;
}

.product-info-area-1 .micro-product-info-block.blue,
.product-info-area-1 .micro-product-info-block {
  background: var(--color5);
  color: #fff;
}

.product-info-area-2 .micro-product-info-block {
  background: var(--color6);
  color: #fff;
}

.product-info-area-3 .micro-product-info-block {
  background: var(--color7);
  color: #fff;
}

.the-sidebar-accordion-menu-active-item {
  background: var(--color2) !important;
}

.dashboard-module .menu a {
  color: #4e5e6a !important;
}

.dashboard-module .menu a:hover {
  color: #fff !important;
  background: var(--color1) !important;
}

.blue-drop {
  background: linear-gradient(
      to right,
      var(--main-color),
      var(--main-color-2),
      var(--main-color)
    )
    repeat scroll 0% 0% !important;
  margin: 0px !important;
  padding: 30px 0px !important;
}

h3.active {
  color: var(--color1);
}

.success {
  color: #56f25a;
}

.danger {
  color: #f25656;
}

.panel-control a .fa {
  color: var(--color1);
}

.user-dropdown-toggle:hover {
  background: var(--color1) !important;
}

.hightlight {
  background: var(--color1);
}

.img-circle-psuedo {
  background: #6abaa0;
}

.main-blue {
  color: var(--color1);
}

h3.active {
  color: var(--color1);
}

.preset-ul .fa.active,
.preset-ul .far.active {
  color: #0f0;
}

#questions-sortable div:hover,
.common-sortable div:hover {
  background: var(--color1);
  color: #fff;
  border: 1px solid var(--color1);
}

.answer-pond div:hover {
  border: 1px solid var(--color1);
}

.survey-rows > div:hover,
.survey-rows > div.active.is_seen,
.survey-rows > div.active {
  background: var(--color1);
  color: #fff;
}

/* contacts */
.contact-face {
  border: 1px solid var(--color1);
}

.contact-face:focus,
.contact-face:hover {
  background: var(--color1);
  color: #fff;
}

.btn.btn-large-block.contact-favorite-block {
  color: var(--color1) !important;
  border: 1px solid var(--color1) !important;
}

.unseen_timeline {
  color: var(--color1);
}

.teamItemContentLeft {
  color: var(--color1);
}

.tag {
  background: #ddd;
}

.tag.red {
	color: #fff !important;
	background: red;
}

.tag.orange {
	color: #fff !important;
	background: orange;
}

.tag.green {
	color: #fff !important;
	background: green;
}

/* newtask issue */
.newtask-tag {
  background: #ccc;
}

.newtask-tag.normal {
  background: var(--color2);
  color: #fff;
}

.newtask-tag.high {
  background: #fa7268;
  color: #fff;
}

.toggle_a a {
  color: #aaa !important;
}

.toggle_a .active {
  color: var(--color1) !important;
}

.the-sidebar-accordion-menu-active-item {
  background: var(--color2) !important;
}

/* dashboard module menu */
.dashboard-module .menu a {
  color: #4e5e6a !important;
}

.dashboard-module .menu a:hover {
  color: #fff !important;
  background: var(--color3) !important;
}

.dashboard-module .accordion-menu .sub-menu li a {
  color: #4e5e6a !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: var(--main-color);
}

.panel-title {
  color: var(--color1) !important;
}

.navbar-inner,
.topmenu-outer {
  background: var(--color4);
}

.text-info {
  color: var(--color1) !important;
}

.nav-pills > li > a{
  background-color: var(--color1);
  color: #fff;
}
.nav-pills > li > a:hover, .nav-pills > li > a:focus{
  color: #fff;
  background-color: var(--main-color);
}
.nav-pills li .badge{
  background: var(--color1);
}
.button_blue_style .nav-pills > li > a{
  background-color: #F0F0F0;
  color: #4E5E6A;

}
.button_blue_style .nav-pills > li > a:hover{
  color: #000;
}
.dashboard-module-row .module-name{
  color: var(--color1);
}
.right_tab_module .module-name{
  color: var(--color1);
}
.dropdown-menu .dropdown-item .badge{
  background: var(--color1);
}