@charset "UTF-8";
body {
    background: var(--background) !important;
}

:root {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  --bg-white: white;
  --green: green;
  --color-ongreen: white;
  --color-onblue: white;
  --blue: #074480;
  --white: white;
  --black: black;
  --bg-intro: linear-gradient(
        to top left,
        transparent 50%,
        rgba(255, 255, 255, 1) 51%
      )
      0 0/45% 200px no-repeat,
    #5b8eaf;
  --bg-about: linear-gradient(to bottom right, transparent 50%, white 50%) 10%
      0%/125% 100% no-repeat,
    #5b8eaf;
  --bg-services: linear-gradient(
      to bottom right,
      transparent calc(35% - 2px),
      #ece5db calc(35% - 1px),
      #ece5db calc(50% + 1px),
      transparent calc(50% + 2px)
    )
    no-repeat 0px 0px/200% 100%;
  --bg-eservices: linear-gradient(to top left, transparent 50%, white 50%) 0%
      18%/280% 119% no-repeat,
    var(--green);
  --bg-contact: linear-gradient(to top left, transparent 50%, white 50%) 0% -5%/39%
      45% no-repeat,
    var(--blue);
  --input-border: transparent;
  --border-access: 1px solid transparent;
  --border-inside: 1px solid rgba(0, 0, 0, 0.2);
  --hightlight-color: yellow;
  --link-bg: black;
  --active-item: var(--green);
  --background: #f2f2f2;
  --container-background: #f2f2f2;
  --background-white: #fff;
  --background-form: #fefefe;
  --font-333: #333;
  --font-212529: #212529;
  --font-666: #666;
  --table-border: #dee2e6;
  --navbar-bg: #238efa;
  --btn-custom-color: #EDF0F5;
  --btn-custom-background: #198754;
  --btn-custom-border-color: #198754;
  --btn-custom-hover-color: #198754;
  --btn-custom-hover-background: #fefefe;
  --btn-secondary-custom-color: white;
  --btn-secondary-custom-background: #6c757d;
  --btn-secondary-custom-border: #6c757d;
  --btn-secondary-custom-hover-background: #5c656d;
  --btn-secondary-custom-hover-color: #fefefe;
  --btn-primary-custom-color: white;
  --btn-primary-custom-background: #2768d7;
  --btn-primary-custom-border: #2768d7;
  --btn-primary-custom-hover-background: white;
  --btn-primary-custom-hover-color: #2768d7;
  --btn-contract-custom-color: white;
  --btn-contract-custom-background: #829298;
  --btn-contract-custom-border: #829298;
  --btn-contract-custom-hover-background: white;
  --btn-contract-custom-hover-color: #829298;
  --prop-table-border: 1px solid #dee2e6;
  --btn-warning-custom-color: white;
  --btn-warning-custom-background: #f9a441;
  --btn-warning-custom-border: #f9a441;
  --btn-warning-custom-hover-background: white;
  --btn-warning-custom-hover-color: #f9a441;
  --alert-success-bg: #d1e7dd;
  --alert-success-border: #badbcc;
  --alert-success-color: #0f5132;
  --switcher: #08b37c;
  --step3-blue: #d6e9fd;
  --custom-file: transparent;
  --custom-file-label: #08b37c;
  --nav-link-hover: #19c48d;
}

[data-theme="contrast"] {
  --bg-white: black;
  --green: yellow;
  --blue: yellow;
  --white: yellow;
  --black: yellow;
  --color-ongreen: black;
  --color-onblue: black;
  --bg-intro: black;
  --bg-about: black;
  --bg-services: black;
  --bg-eservices: black;
  --bg-contact: black;
  --input-border: yellow;
  --border-access: 2px solid yellow;
  --border-inside: 1px solid yellow;
  --highlight-color: inherit;
  --link-bg: inherit;
  --active-item: yellow;
  --background: black;
  --container-background: black;
  --background-white: black;
  --background-form: black;
  --font-333: yellow;
  --font-212529: yellow;
  --font-666: yellow;
  --table-border: yellow;
  --navbar-bg: #111;
  --btn-custom-color: yellow;
  --btn-custom-background: black;
  --btn-custom-border-color: yellow;
  --btn-custom-hover-color: black;
  --btn-custom-hover-background: yellow;
  --btn-secondary-custom-color: yellow;
  --btn-secondary-custom-background: black;
  --btn-secondary-custom-border: yellow;
  --btn-secondary-custom-hover-background: yellow;
  --btn-secondary-custom-hover-color: black;
  --prop-table-border: 2px solid yellow;
  --btn-warning-custom-color: yellow;
  --btn-warning-custom-background: black;
  --btn-warning-custom-border: yellow;
  --btn-warning-custom-hover-background: yellow;
  --btn-warning-custom-hover-color: black;
  --alert-success-bg: black;
  --alert-success-border: yellow;
  --alert-success-color: yellow;
  --switcher: #f9a441;
  --step3-blue: black;
  --custom-file: black;
  --custom-file-label: #a95411;
  --nav-link-hover: #fbc663;
  --btn-primary-custom-color: yellow;
  --btn-primary-custom-background: black;
  --btn-primary-custom-border: yellow;
  --btn-primary-custom-hover-background: yellow;
  --btn-primary-custom-hover-color: black;
  --btn-contract-custom-color: yellow;
  --btn-contract-custom-background: black;
  --btn-contract-custom-border: yellow;
  --btn-contract-custom-hover-background: yellow;
  --btn-contract-custom-hover-color: black;
}

.intro__access {
  position: absolute;
  width: 4rem;
  height: auto;
  right: 1%;
  top: 1rem;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  border-radius: 50%;
  border: 4px solid rgb(36 104 176);
}

.intro__access img {
  width: 100%;
}

.access__menu {
  display: none;
}

.access__menu.visible {
  top: 8rem;
  display: block;
  position: absolute;
  right: 1rem;
  background: var(--color-ongreen);
  color: var(--black);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 20%);
  border: var(--border-access);
  z-index: 12;
}

.access__menu.visible ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.access__menu.visible ul li {
  border: var(--border-inside);
  border-radius: 12px;
  padding: 0.5rem;
  text-align: center;
  margin-bottom: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.access__menu.visible ul li:last-child {
  margin-bottom: 0;
}

.access__menu.visible ul li div:last-child {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.access__menu.visible ul li div:last-child span {
  height: 0.5rem;
  border: var(--border-inside);
  border-radius: 12px;
  width: 30%;
}

.access__menu.visible ul li div:last-child span.active {
  height: 0.5rem;
  border: var(--border-inside);
  border-radius: 12px;
  width: 30%;
  background: var(--active-item);
}

.container {
  background: var(--container-background) !important;
  color: var(--black);
}

.footer {
  background: var(--container-background) !important;
}

.footer .container {
  background-color: var(--container-background);
}

#table_length {
  color: var(--font-333);
}

#table_filter {
  color: var(--font-333);
}

#table_info {
  color: var(--font-333);
}

#table {
  border-color: var(--table-border);
  border-collapse: collapse;
}

#table thead {
  border-bottom: var(--border-access);
}

#table_paginate .previous:disabled {
  color: var(--font-666) !important;
}
#table_paginate .next:disabled {
  color: var(--font-666) !important;
}
#table_paginate .previous {
  color: var(--font-333) !important;
}
#table_paginate .next {
  color: var(--font-333) !important;
}

#table tr {
  background-color: var(--background-white);
}

#table .even {
  color: var(--font-333);
  border-bottom: var(--border-access);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  color: var(--font-212529);
  border-bottom: var(--border-access);
}

#table thead {
  color: var(--font-212529);
}

.navbar {
  background-color: var(--navbar-bg) !important;
}

.navbar-dark .navbar-brand {
  color: var(--white) !important;
}

.navbar .nav-link:not(.details) {
  color: var(--white) !important;
}

.btn_custom {
    color: var(--btn-custom-color) !important;
    background: var(--btn-custom-background) !important;
    border-color: var(--btn-custom-border-color) !important;
}
.btn_custom:hover {
    color: var(--btn-custom-hover-color) !important;
    background: var(--btn-custom-hover-background) !important;
}

.btn-secondary-custom {
    color: var(--btn-secondary-custom-color) !important;
    background: var(--btn-secondary-custom-background) !important;
    border-color: var(--btn-secondary-custom-border) !important;
}
.btn-secondary-custom:hover {
    color: var(--btn-secondary-custom-hover-color) !important;
    background: var(--btn-secondary-custom-hover-background) !important;
}

.btn-primary-custom {
    color: var(--btn-primary-custom-color) !important;
    background: var(--btn-primary-custom-background) !important;
    border-color: var(--btn-primary-custom-border) !important;
}
.btn-primary-custom:hover {
    color: var(--btn-primary-custom-hover-color) !important;
    background: var(--btn-primary-custom-hover-background) !important;
}

.btn-contract {
    color: var(--btn-contract-custom-color) !important;
    background: var(--btn-contract-custom-background) !important;
    border-color: var(--btn-contract-custom-border) !important;
}
.btn-contract:hover {
    color: var(--btn-contract-custom-hover-color) !important;
    background: var(--btn-contract-custom-hover-background) !important;
}

.table {
  --bs-table-striped-bg: var(--container-background);
  --bs-table-active-bg: var(--background-white);
  color: var(--font-212529) !important;
  border: var(--prop-table-border) !important;
}

.table thead {
  border: var(--prop-table-border) !important;
}


.btn-warning-custom {
    color: var(--btn-warning-custom-color) !important;
    background: var(--btn-warning-custom-background) !important;
    border-color: var(--btn-warning-custom-border) !important;
}
.btn-warning-custom:hover {
    color: var(--btn-warning-custom-hover-color) !important;
    background: var(--btn-warning-custom-hover-background) !important;
}

form:not(.no-container) {
  background: var(--background-form) !important;
}

form:not(.no-container) .inp {
  color: var(--font-212529);
}

form:not(.no-container) .text-color {
  color: var(--green) !important;
}

.alert-success {
  background-color: var(--alert-success-bg) !important;
  color: var(--alert-success-color) !important;
  border-color: var(--alert-success-border) !important;
}

form .switcher div div input[type=checkbox]:before {
  border-color: var(--switcher);
  color: var(--switcher);
}

form .switcher div div input[type=checkbox]:after {
  background: var(--switcher);
}

form .switcher div div input[type=checkbox]:checked:after {
  background: var(--switcher);
}

.blue {
  background: var(--step3-blue) !important;
}

#div_id_attachment .custom-file,
#div_id_attachment2 .custom-file,
#div_id_attachment3 .custom-file,
#div_id_attachment4 .custom-file,
#div_id_attachment5 .custom-file,
#div_id_attachment6 .custom-file
{
  background: var(--custom-file);
}

#div_id_attachment .custom-file-label,
#div_id_attachment2 .custom-file-label,
#div_id_attachment3 .custom-file-label,
#div_id_attachment4 .custom-file-label,
#div_id_attachment5 .custom-file-label,
#div_id_attachment6 .custom-file-label
{
  background: var(--custom-file-label) !important;
  border: var(--custom-file-label) !important;
  color: var(--white) !important;

}

.nav-link {
  color: var(--switcher) !important;
}
.nav-link:hover {
  color: var(--nav-link-hover) !important;
}
.nav-link.active {
  background: var(--background-white) !important;
}

h1, h2, h3, h4, h5, p, a, table{
  color: var(--black) !important
}

.card {
  background: var(--bg-white) !important;
  border: 1px solid var(--black) !important;
}

[data-theme=contrast] .btn {
  background: var(--green) !important;
  color: black !important;
  border: 1px solid black !important;
}