/*--------------------------
        IMPORTS
--------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap");
* {
  margin: 0;
  padding: 0;
}

html {
  min-width: 100%;
  min-height: 100%;
}
html body {
  position: static;
  min-width: 100%;
  min-height: 100%;
}
html body div img {
  width: 100%;
  height: auto;
}
html body section {
  width: 100%;
  padding: 35px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
html body section.row {
  flex-direction: row;
}
html body section.column {
  flex-direction: column;
}
html body input[type=number] {
  -webkit-appearance: textfield !important;
  margin: 0;
  -moz-appearance: textfield !important;
}

/*----------------
   RESOLUTIONS
----------------*/
/*----------------
   COLORS
----------------*/
/*----------------
    FONST STYLE
----------------*/
* {
  font-family: "Arial", sans-serif;
}

/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
@media only screen and (max-width: 3550px) {
  h1 {
    font-family: "Arial", sans-serif;
    font-weight: bolder;
    font-size: 48px;
    margin-bottom: 15px;
  }

  h2 {
    font-family: "Arial", sans-serif;
    font-weight: bolder;
    font-size: 36px;
    margin-bottom: 7px;
  }

  h3 {
    font-family: "Arial", sans-serif;
    font-weight: bolder;
    font-size: 36px;
  }

  h4 {
    font-family: "Arial", sans-serif;
    font-weight: bolder;
    font-style: italic;
    font-size: 36px;
  }

  h5 {
    font-family: "Arial", sans-serif;
    font-weight: bolder;
    font-size: 26px;
  }

  h6 {
    font-family: "Arial", sans-serif;
    font-weight: bolder;
    font-style: italic;
    font-size: 26px;
  }

  th {
    font-family: "Arial", sans-serif;
    font-size: 15px;
    text-align: justify;
  }

  p {
    font-family: "Arial", sans-serif;
    font-size: 15px;
    text-align: justify;
    letter-spacing: normal;
    line-height: 1.8;
  }

  li {
    font-family: "Arial", sans-serif;
    font-size: 15px;
  }

  a {
    font-family: "Arial", sans-serif;
    font-size: 15px;
    text-align: justify;
    color: #5adc95;
  }
  a.line-hover {
    position: relative;
  }
  a.line-hover::before {
    content: "";
    position: absolute;
    width: 0%;
    bottom: -3px;
    left: 0;
    height: 3px;
    background-color: #5adc95;
    transition-duration: 0.8s;
  }
  a.line-hover:hover::before, a.line-hover.active::before {
    width: 100%;
  }
  a.title {
    font-size: 21px;
  }

  button {
    font-family: "Arial", sans-serif;
    font-size: 15px;
    text-align: justify;
  }

  textarea {
    font-family: "Arial", sans-serif;
    font-size: 15px;
    text-align: justify;
  }

  input {
    font-family: "Arial", sans-serif;
    font-size: 15px;
    text-align: justify;
  }

  label {
    font-family: "Arial", sans-serif;
    font-size: 15px;
    text-align: justify;
  }

  i {
    font-family: "Arial", sans-serif;
    font-size: 19px;
    text-align: justify;
  }

  span {
    font-family: "Arial", sans-serif;
    font-size: 10px;
    text-align: justify;
  }
}
@media only screen and (max-width: 500px) {
  h1 {
    font-family: "Arial", sans-serif;
    font-weight: bolder;
    font-size: 28px;
    margin-bottom: 15px;
  }
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex.column {
  flex-direction: column;
}
.flex.row {
  flex-direction: row;
}
.flex.j-start {
  justify-content: flex-start;
}
.flex.j-end {
  justify-content: flex-end;
}
.flex.j-space-a {
  justify-content: space-around;
}
.flex.j-space-b {
  justify-content: space-between;
}
.flex.j-space-e {
  justify-content: space-evenly;
}
.flex.a-start {
  align-items: flex-start;
}
.flex.a-end {
  align-items: flex-end;
}
.flex.a-space-a {
  align-items: space-around;
}
.flex.a-space-b {
  align-items: space-between;
}
.flex.a-space-e {
  align-items: space-evenly;
}
.flex.wrap {
  flex-wrap: wrap;
}

.size.w-100 {
  width: 100%;
}
.size.w-95 {
  width: 95%;
}
.size.w-90 {
  width: 90%;
}
.size.w-85 {
  width: 85%;
}
.size.w-80 {
  width: 80%;
}
.size.w-75 {
  width: 75%;
}
.size.w-70 {
  width: 70%;
}
.size.w-65 {
  width: 65%;
}
.size.w-50 {
  width: 50%;
}
.size.w-40 {
  width: 40%;
}
.size.w-45 {
  width: 45%;
}
.size.w-25 {
  width: 25%;
}

.logo {
  width: 180px;
  height: auto;
}
.logo.large {
  width: 450px;
}
.logo.small {
  width: 150px;
}

div.img {
  height: auto;
  width: 100%;
}
div.img.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
div.img.bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.274);
}
div.img.bg.g-0::before {
  background-color: rgba(0, 0, 0, 0);
}
div.img.bg.g-45::before {
  background-color: rgba(0, 0, 0, 0.45);
}
div.img.bg.g-65::before {
  background-color: rgba(0, 0, 0, 0.65);
}

@media only screen and (max-width: 960px) {
  div.img {
    width: auto;
    height: 100%;
  }
}
/*----------------
  ALERT STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  BUTTON STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  INPUT STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*----------------
  LABELS STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  TABLE STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  ASIDE STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  CARD STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  FOOTER STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  FORM STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  MODAL STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  NABVAR STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  SLIDERS STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*----------------
  CARD STYLES
----------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
/*--------------------------
        IMPORTS
--------------------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
@media only screen and (max-width: 3550px) {
  div.alert {
    width: 90%;
    padding: 15px 25px;
    border-radius: 5px;
  }
  div.alert.success {
    border: 0.5px solid #28a745;
    background-color: #0ae06e36;
    color: #1f8035;
  }
  div.alert.warning {
    border: 0.5px solid #ffc107;
    background-color: #f6bf1a46;
    color: #dfa700;
  }
  div.alert.danger {
    border: 0.5px solid #dc3545;
    background-color: #da0e2225;
    color: #ac1f2d;
  }

  .btn {
    padding: 8px 12px;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    border-radius: 0;
    border: none;
    color: #FFFFFF;
    position: relative;
    background-color: #5adc95;
    cursor: pointer;
    overflow: hidden;
    min-width: 120px;
    max-width: 150px;
    height: auto;
  }
  .btn i {
    position: relative;
    z-index: 5;
    font-size: 16px;
  }
  .btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #17b283;
    transition-duration: 0.5s;
  }
  .btn:hover::after {
    left: 0%;
  }
  .btn.large {
    min-width: 150px;
    max-width: 180px;
  }
  .btn.large i {
    font-size: 19px;
  }
  .btn.small {
    min-width: 90px;
    max-width: 120px;
  }
  .btn.small i {
    font-size: 13px;
  }
  .btn.active {
    background-color: #17b283;
  }
  .btn.active::after {
    display: none;
  }
  .btn.outline {
    background-color: transparent;
    color: #5adc95;
    border: 2px solid #5adc95;
    transition-duration: 0.5s;
    padding: 6px 10px;
  }
  .btn.outline::after {
    background-color: #17b283;
  }
  .btn.outline:hover {
    color: #FFFFFF;
    border: 2px solid #17b283;
  }
  .btn.disable {
    pointer-events: none;
    background-color: #fafafa;
    color: #FFFFFF;
  }
  .btn.block {
    min-width: 90% !important;
    max-width: 90% !important;
  }
  .btn.block i {
    font-size: 16px;
  }

  .menu-btn {
    cursor: pointer;
  }
  .menu-btn .ham {
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 60px;
    height: 60px;
  }
  .menu-btn .hamRotate.active {
    transform: rotate(45deg);
  }
  .menu-btn .hamRotate180.active {
    transform: rotate(180deg);
  }
  .menu-btn .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: white;
    stroke-width: 5.3;
    stroke-linecap: round;
  }
  .menu-btn .ham6 .top {
    stroke-dasharray: 40 172;
  }
  .menu-btn .ham6 .middle {
    stroke-dasharray: 40 111;
  }
  .menu-btn .ham6 .bottom {
    stroke-dasharray: 40 172;
  }
  .menu-btn .ham6.active .top {
    stroke-dashoffset: -132px;
  }
  .menu-btn .ham6.active .middle {
    stroke-dashoffset: -71px;
  }
  .menu-btn .ham6.active .bottom {
    stroke-dashoffset: -132px;
  }

  .input {
    position: relative;
    min-width: 200px;
    height: 40px;
  }
  .input .form__input {
    position: absolute;
    top: 0;
    left: 0;
    resize: none;
    width: 95%;
    height: 20px;
    padding: 8px 8px;
    border: none;
    border-bottom: 2px solid #49505786;
    font-size: 16px;
    color: #0a0a0a;
    outline: none;
    background: none;
  }
  .input .form__input:disabled ~ .form__label {
    top: -0.5rem;
    font-size: 0.8rem;
    left: 0;
    border-bottom-color: #5adc95;
  }
  .input .form__input:hover {
    border-bottom-color: #5adc95;
  }
  .input .form__input:focus {
    border-bottom-color: #5adc95;
  }
  .input .form__label {
    position: absolute;
    left: 0;
    top: 0.8rem;
    padding: 0 0.5rem;
    color: #504f4f;
    cursor: text;
    transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in;
    pointer-events: none;
  }
  .input .form__input:not(:-moz-placeholder-shown).form__input:not(:focus) ~ .form__label {
    top: -0.5rem;
    font-size: 0.8rem;
    left: 0;
  }
  .input .form__input:not(:-ms-input-placeholder).form__input:not(:focus) ~ .form__label {
    top: -0.5rem;
    font-size: 0.8rem;
    left: 0;
  }
  .input .form__input:focus ~ .form__label,
.input .form__input:not(:placeholder-shown).form__input:not(:focus) ~ .form__label {
    top: -0.5rem;
    font-size: 0.8rem;
    left: 0;
  }

  table {
    border-collapse: collapse;
    width: 90%;
  }
  table .user {
    margin-right: 25px;
    cursor: pointer;
    width: 100%;
  }
  table .user .img {
    width: 40px;
    height: 40px;
    background-color: #132922;
    border-radius: 50%;
    overflow: hidden;
    border: 0.5px solid #FFFFFF;
  }
  table .user .img p {
    font-size: 17px;
    margin: 0;
    color: #FFFFFF;
  }
  table .user .content {
    margin: 15px 0;
    margin-left: 15px;
  }
  table .user .content .name {
    letter-spacing: normal;
    line-height: 1;
    margin: 0 !important;
  }
  table thead tr {
    background-color: #504f4f;
  }
  table thead tr th {
    color: #FFFFFF;
    padding: 10px 15px;
    text-align: center;
  }
  table tbody tr {
    background-color: #FDFDFD;
  }
  table tbody tr:nth-child(2n) {
    background-color: #fafafa;
  }
  table tbody tr td {
    padding: 10px 15px;
    text-align: justify;
  }
  table tbody tr textarea {
    min-width: 210px;
    min-height: 130px;
    border: none;
    overflow: hidden;
    resize: none;
    outline: none;
  }

  .dataTables_wrapper {
    width: 100%;
  }
  .dataTables_wrapper .dataTables_length {
    margin-bottom: 15px;
  }
  .dataTables_wrapper .datatable {
    width: 100%;
    margin: 10px 0;
  }
  .dataTables_wrapper .datatable p {
    text-align: center;
  }
  .dataTables_wrapper .datatable i {
    padding: 7px;
    font-size: 15px;
    transition-duration: 0.5s;
    margin: 0.1px;
    cursor: pointer;
    color: #252525;
    margin: 15px;
  }
  .dataTables_wrapper .datatable i.fa-file-excel, .dataTables_wrapper .datatable i.fa-file-word, .dataTables_wrapper .datatable i.fa-file-pdf, .dataTables_wrapper .datatable i.fa-file-video, .dataTables_wrapper .datatable i.fa-file-image {
    color: #5adc95;
    font-size: 30px;
  }
  .dataTables_wrapper .datatable i.fa-file-excel:hover, .dataTables_wrapper .datatable i.fa-file-word:hover, .dataTables_wrapper .datatable i.fa-file-pdf:hover, .dataTables_wrapper .datatable i.fa-file-video:hover, .dataTables_wrapper .datatable i.fa-file-image:hover {
    color: #132922;
  }
  .dataTables_wrapper .datatable i:hover {
    color: #17b283;
  }
  .dataTables_wrapper .dataTables_filter input:focus {
    outline: 1.5px solid rgba(32, 32, 32, 0.603);
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #0a0a0a !important;
    border: 1px solid #b6b6b6 !important;
    background: #FFFFFF !important;
    margin-left: -0.5px;
    margin-right: -0.5px;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #FFFFFF !important;
    background: #504f4f !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #FFFFFF !important;
    background: #504f4f !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #FFFFFF !important;
    background: #504f4f !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #FFFFFF !important;
  }

  aside#system_design {
    width: 0%;
    height: 100vh;
    background-color: #FFFFFF;
    justify-content: flex-start !important;
    overflow-y: scroll;
    overflow-x: hidden;
    transition-duration: 0.5s;
  }
  aside#system_design.active {
    width: 23%;
  }
  aside#system_design .container-logo {
    width: 100%;
    padding: 50px 0;
    background-color: #FDFDFD;
  }
  aside#system_design #container-list {
    padding: 35px 0;
    width: 100%;
    align-items: flex-start;
  }
  aside#system_design #container-list li {
    list-style: none;
    width: 100%;
    position: relative;
  }
  aside#system_design #container-list li p {
    text-align: start;
    width: 100%;
    padding: 15px 0;
    padding-left: 35px;
    font-size: 16px;
  }
  aside#system_design #container-list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 49px;
    width: 7px;
    transition-duration: 0.5s;
  }
  aside#system_design #container-list li:hover p {
    cursor: pointer;
    background-color: #E8E8E8;
  }
  aside#system_design #container-list li:hover::before {
    background-color: #b6b6b6;
  }
  aside#system_design #container-list li ul {
    overflow: hidden;
    height: 0;
    transition-duration: 0.8s;
    padding-left: 50px;
  }
  aside#system_design #container-list li ul li {
    padding: 15px 0;
  }
  aside#system_design #container-list li ul li::before {
    display: none;
  }
  aside#system_design #container-list li ul li:hover, aside#system_design #container-list li ul li.active {
    cursor: pointer;
    color: #5adc95;
  }
  aside#system_design #container-list li.active::before {
    background-color: #5adc95;
  }
  aside#system_design #container-list li.active p {
    background-color: #E8E8E8;
    color: #5adc95;
  }
  aside#system_design #container-list li.active p i {
    transform: rotate(0deg);
  }
  aside#system_design #container-list li.active ul {
    height: auto;
  }
  aside#system_design #container-list li.active ul li:hover {
    cursor: pointer;
  }
  aside.dashboard {
    height: 100vh;
    background-color: #fafafa;
    transition-duration: 0.3s;
    width: 75px;
    overflow-y: auto;
  }
  aside.dashboard .logo-2 {
    display: block;
    width: 80px;
    height: 80px;
  }
  aside.dashboard .logo {
    display: none;
  }
  aside.dashboard.active {
    width: 16%;
  }
  aside.dashboard.active .logo-2 {
    display: none;
  }
  aside.dashboard.active .logo {
    display: flex;
  }
  aside.dashboard.active .menu li {
    justify-content: flex-start;
  }
  aside.dashboard.active .menu li p {
    display: block;
  }
  aside.dashboard.active .menu li i {
    margin-left: 25px;
  }
  aside.dashboard.active .menu .submenu.active .submenu-item {
    border-style: none;
  }
  aside.dashboard.active .menu .submenu.active .submenu-item:hover i {
    color: #5adc95;
  }
  aside.dashboard.active .menu .submenu.active i {
    display: block;
  }
  aside.dashboard.active .menu .submenu.active i.subitem {
    display: block;
    color: #000;
  }
  aside.dashboard.active .menu .submenu.active p {
    display: block;
  }
  aside.dashboard.active .menu .submenu div {
    justify-content: flex-start !important;
  }
  aside.dashboard .container-logo {
    width: 100%;
    padding: 5px 0;
    transition-duration: 0.4s;
  }
  aside.dashboard .container-logo .logo {
    width: auto;
    height: 80px;
  }
  aside.dashboard .menu {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: space-between;
    flex-direction: column;
  }
  aside.dashboard .menu li {
    transition-duration: 0.4s;
    list-style: none;
    padding: 15px 0;
    cursor: pointer;
    border-left: 5px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 5px;
  }
  aside.dashboard .menu li i {
    font-size: 20px;
  }
  aside.dashboard .menu li p {
    padding-left: 25px;
    display: none;
  }
  aside.dashboard .menu li:hover {
    background-color: #E8E8E8;
  }
  aside.dashboard .menu li.active {
    border-left: 5px solid #17b283;
    box-shadow: #cfe8cc 2px 0px 2px 0px inset, rgba(255, 255, 255, 0.5) -3px 0px 6px 0px inset;
    background-color: #fff;
  }
  aside.dashboard .menu li.active i {
    font-size: 20px;
    color: #17b283;
  }
  aside.dashboard .menu li.submenu {
    display: flex;
    flex-direction: column;
  }
  aside.dashboard .menu li.submenu ul {
    overflow: hidden;
    transition-duration: 0.5s;
    height: 0;
  }
  aside.dashboard .menu li.submenu ul li:hover {
    background-color: transparent;
  }
  aside.dashboard .menu li.submenu ul p {
    display: none;
  }
  aside.dashboard .menu li.submenu div {
    justify-content: center !important;
  }
  aside.dashboard .menu li.submenu.active ul {
    height: auto;
  }
  aside.dashboard .menu li.submenu.active i {
    display: none;
  }
  aside.dashboard .menu li.submenu.active i.subitem {
    display: block;
    color: #000;
  }
  aside.dashboard .menu li.submenu.active .submenu-item {
    border-style: none;
  }
  aside.dashboard .menu li.submenu.active .submenu-item:hover i {
    color: #5adc95;
  }

  .card.blog {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 350px;
    height: 300px;
    margin: 30px;
  }
  .card.blog img {
    width: 100%;
    height: 180px;
    background-color: turquoise;
    margin-bottom: 15px;
  }
  .card.blog a {
    text-decoration: none;
    font-size: 18px;
  }
  .card.csh {
    width: 350px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    cursor: pointer;
    position: relative;
    margin: 15px;
  }
  .card.csh .head {
    padding: 10px 15px;
    background-color: #5adc95;
    width: auto;
  }
  .card.csh .head a {
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 10px;
    width: auto;
  }
  .card.csh .head .img {
    width: 45px;
  }
  .card.csh .body {
    padding: 15px 25px;
    padding-top: 0;
    position: relative;
    min-height: 130px;
  }
  .card.csh .body a {
    color: #0a0a0a;
    text-decoration: none;
    max-width: 100%;
    position: absolute;
    bottom: -100%;
    left: 0;
    padding: 15px 25px;
    background-color: #FFFFFF;
    transition-duration: 0.7s;
  }
  .card.csh:hover .body a {
    bottom: 0;
  }
  .card.dashboard-access {
    background-color: #fafafa;
    padding: 15px 20px;
    border-radius: 8px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    cursor: pointer;
  }
  .card.dashboard-access i {
    color: #fff;
    background-color: #5adc95;
    padding: 15px;
    font-size: 35px;
    border-radius: 8px;
  }
  .card.dashboard-access p, .card.dashboard-access span {
    color: black;
    margin-left: 25px;
    width: 150px;
  }
  .card.dashboard-access p {
    font-size: 17px;
  }

  footer {
    width: 100%;
    padding: 45px 0;
    background-color: #5adc95;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  footer .container {
    width: 60%;
  }
  footer .container p, footer .container a, footer .container h5, footer .container li {
    color: #FFFFFF;
    margin-bottom: 15px;
    text-decoration: none;
  }
  footer .container ul li {
    list-style: none;
  }
  footer .container .section {
    width: 48%;
  }
  footer .container .section .list {
    width: 100%;
  }
  footer .container .section .list ul {
    width: 100%;
  }

  form#contact {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  form#contact .btn {
    margin-top: 45px;
  }
  form#contact h3 {
    width: 100%;
    text-align: start;
  }
  form#contact .input-container {
    margin-top: 45px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  form#login {
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 45px 35px;
    background-color: #fafafa;
  }
  form#login .btn,
form#login .input {
    margin: 20px 0;
  }
  form#login .input {
    width: 350px;
  }
  form#login h5 {
    text-transform: capitalize;
  }
  form#login span {
    font-size: 14px;
    margin-bottom: 25px;
    margin-top: 10px;
  }
  form#login span a {
    text-decoration: none;
  }
  form.report {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  form.report p {
    margin: 10px 0;
    width: 100%;
    text-align: start;
  }
  form.report .file-upload {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  form.report .input-container {
    position: relative;
    width: 100%;
  }
  form.report .input-container .input {
    margin-bottom: 25px;
  }
  form.report .input-container.two-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  form.report .input-container.two-columns .input {
    width: 30%;
  }
  form.report .input-container.two-columns .description {
    width: 67%;
  }
  form.report .input-container.two-columns select {
    width: 30%;
    height: 40px;
  }
  form.report .btn {
    margin-top: 15px;
  }
  form.report .materials p {
    width: 350px;
  }
  form.report .materials .input {
    width: 300px;
  }
  form.report .image-upload-wrap {
    display: none;
  }
  form#add-activity textarea, form#add-activity .input {
    width: 90%;
    resize: none;
    height: 100px;
    margin-bottom: 20px;
    padding: 10px;
  }
  form#add-activity select {
    width: 95%;
    margin-bottom: 20px;
  }
  form#add-activity .input {
    height: 20px;
  }
  form#add-activity .container-chart {
    width: 300px;
    height: 300px;
    margin: 25px;
  }

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.925);
    display: flex;
    z-index: -1000;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 0;
    transition-duration: 0.5s;
    opacity: 0;
    overflow-y: scroll;
  }
  .modal.active {
    display: flex;
    opacity: 1;
    z-index: 3500;
  }
  .modal .body {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    padding: 35px;
    background: #fff;
    position: relative;
    width: 90%;
  }

  .btn-disable-modal {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    margin-top: -10px;
    margin-right: -10px;
    font-size: 20px;
    color: #5adc95;
    cursor: pointer;
  }

  html body header.menu {
    width: 100%;
    padding: 10px 0;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1500;
  }
  html body header.menu nav {
    width: 90%;
    padding-right: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  html body header.menu nav .btn-menu {
    display: none;
  }
  html body header.menu nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 350px;
  }
  html body header.menu nav ul li {
    list-style: none;
  }
  html body header.menu nav ul li a {
    color: #504f4f;
    text-decoration: none;
  }
  html body header.system-design {
    width: 100%;
    height: 5%;
    padding: 15px 0;
    background-color: #5adc95;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  html body header.system-design nav {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  html body header.system-design nav h5 {
    color: #FFFFFF;
  }
  html body header#dashboard-admin {
    width: 100%;
    padding: 5px 0;
    background-color: #1a1a1a;
  }
  html body header#dashboard-admin h5 {
    margin-left: 25px;
  }
  html body header#dashboard-admin h5, html body header#dashboard-admin p, html body header#dashboard-admin span, html body header#dashboard-admin i {
    color: #FFFFFF;
  }
  html body header#dashboard-admin .notification {
    position: relative;
  }
  html body header#dashboard-admin .notification i {
    cursor: pointer;
    margin-right: 25px;
  }
  html body header#dashboard-admin .notification ul {
    position: absolute;
    top: 0;
    margin-top: 40px;
    left: -50px;
    background-color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 200px;
    padding: 10px;
    transition-duration: 0.5s;
    opacity: 0;
    pointer-events: none;
  }
  html body header#dashboard-admin .notification ul li {
    margin-top: 15px;
    list-style: none;
  }
  html body header#dashboard-admin .notification ul li:nth-child(1) {
    margin-top: 0;
  }
  html body header#dashboard-admin .notification ul.active {
    opacity: 1;
    pointer-events: all;
  }
  html body header#dashboard-admin .notification ul p, html body header#dashboard-admin .notification ul span {
    color: black;
  }
  html body header#dashboard-admin .notification ul .img {
    z-index: 1500;
  }
  html body header#dashboard-admin .notification ul .img p {
    color: #fff;
  }
  html body header#dashboard-admin .notification ul::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 25px;
    height: 25px;
    transform: rotate(45deg);
    background-color: #fff;
    left: 45px;
  }
  html body header#dashboard-admin .user {
    margin-right: 25px;
    cursor: pointer;
  }
  html body header#dashboard-admin .user .img {
    margin-right: 15px;
    width: 45px;
    height: 45px;
    background-color: #132922;
    border-radius: 50%;
    overflow: hidden;
  }
  html body header#dashboard-admin .user p {
    letter-spacing: normal;
    line-height: 1;
    color: #fff;
  }

  .diagrams.gantt {
    width: 90%;
    margin-top: 25px;
  }
  .diagrams.gantt .gantt .bar-progress {
    fill: #5adc95;
  }
  .diagrams.gantt .gantt .handle {
    display: none;
  }
}
@media only screen and (max-width: 960px) {
  aside#dashboard {
    width: 300px;
    position: absolute;
    top: 0;
    left: -300px;
  }
  aside#dashboard.active {
    width: 300px;
    left: 0;
  }

  .card.blog {
    width: 270px;
    height: 230px;
    margin: 20px;
  }

  footer .container {
    width: 85%;
    flex-direction: column;
  }
  footer .container .section {
    width: 100%;
  }

  form#contact .btn {
    margin-top: 25px;
  }
  form#contact h3 {
    text-align: start;
  }
  form#contact .input-container {
    flex-direction: column;
    margin-top: 0;
  }
  form#contact .input-container .input {
    margin-top: 20px;
    width: 90%;
  }
  form#login {
    width: 350px;
    padding: 35px 25px;
  }
  form#login .input {
    width: 300px;
  }

  html body header.menu {
    width: 100%;
    padding: 0;
    position: fixed;
    background-color: #FFFFFF;
    top: 0;
    left: 0;
    z-index: 5500;
  }
  html body header.menu nav {
    width: 90%;
    padding-right: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #1a1a1a;
  }
  html body header.menu nav .logo {
    width: 200px;
  }
  html body header.menu nav .btn-menu {
    display: block;
    z-index: 5500;
    cursor: pointer;
  }
  html body header.menu nav .btn-menu .ham {
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 60px;
    height: 60px;
  }
  html body header.menu nav .btn-menu .hamRotate.active {
    transform: rotate(45deg);
  }
  html body header.menu nav .btn-menu .hamRotate180.active {
    transform: rotate(180deg);
  }
  html body header.menu nav .btn-menu .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: #131313;
    stroke-width: 5.3;
    stroke-linecap: round;
  }
  html body header.menu nav .btn-menu .ham6 .top {
    stroke-dasharray: 40 172;
  }
  html body header.menu nav .btn-menu .ham6 .middle {
    stroke-dasharray: 40 111;
  }
  html body header.menu nav .btn-menu .ham6 .bottom {
    stroke-dasharray: 40 172;
  }
  html body header.menu nav .btn-menu .ham6.active .top {
    stroke-dashoffset: -132px;
  }
  html body header.menu nav .btn-menu .ham6.active .middle {
    stroke-dashoffset: -71px;
  }
  html body header.menu nav .btn-menu .ham6.active .bottom {
    stroke-dashoffset: -132px;
  }
  html body header.menu nav ul {
    position: absolute;
    right: -100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 100vh;
    background-color: #FFFFFF;
    z-index: 2500;
    transition-duration: 0.5s;
  }
  html body header.menu nav ul li {
    list-style: none;
    margin-top: 35px;
  }
  html body header.menu nav ul li a {
    text-decoration: none;
  }
  html body header.menu nav ul.active {
    right: 0;
  }
  html body header#dashboard-admin h5 {
    margin-left: 0;
    font-size: 18px;
  }
  html body header#dashboard-admin i {
    cursor: pointer;
    margin-right: 15px;
  }
  html body header#dashboard-admin .user {
    margin-right: 15px;
  }
  html body header#dashboard-admin .user p, html body header#dashboard-admin .user span {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  form#contact h3 {
    text-align: center;
  }
  form#contact .input-container {
    flex-direction: column;
    margin-top: 0;
  }
  form#contact .input-container .input {
    margin-top: 20px;
    width: 90%;
  }
  form#login {
    width: 80%;
    padding: 20px 15px;
  }
  form#login .input {
    width: 80%;
  }
}
/*--------------------------
        IMPORTS
--------------------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
@media only screen and (max-width: 3550px) {
  html body.system-design {
    overflow: hidden;
  }
  html body.system-design main {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transition-duration: 0.5s;
    background-color: #FDFDFD;
  }
  html body.system-design main iframe {
    background-color: #FDFDFD;
    overflow-x: hidden;
    width: 100%;
    height: 95%;
  }
  html body.system-design main.active {
    width: 77%;
  }
  html body.colors {
    padding-bottom: 50px;
  }
  html body.colors section {
    padding: 120px 0;
  }
  html body.colors section#title {
    margin-top: 150px !important;
  }
  html body.colors section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.colors section .container-circles {
    margin-top: 50px;
  }
  html body.colors section .container-circles .circle-color {
    margin-bottom: 25px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }
  html body.colors section .container-circles .circle-color.border {
    border-style: solid;
    border-width: 0.1px;
    border-color: #000;
    width: 99px;
    height: 99px;
  }
  html body.colors section .container-circles .circle-color#P-100 {
    background-color: #5adc95;
  }
  html body.colors section .container-circles .circle-color#P-150 {
    background-color: #5adc95;
  }
  html body.colors section .container-circles .circle-color#P-50 {
    background-color: #5adc95;
  }
  html body.colors section .container-circles .circle-color#S-100 {
    background-color: #17b283;
  }
  html body.colors section .container-circles .circle-color#S-150 {
    background-color: #17b283;
  }
  html body.colors section .container-circles .circle-color#S-50 {
    background-color: #17b283;
  }
  html body.colors section .container-circles .circle-color#T-100 {
    background-color: #132922;
  }
  html body.colors section .container-circles .circle-color#T-150 {
    background-color: #132922;
  }
  html body.colors section .container-circles .circle-color#T-50 {
    background-color: #132922;
  }
  html body.colors section .container-circles .circle-color#C1-100 {
    background-color: #E8E8E8;
  }
  html body.colors section .container-circles .circle-color#C1-150 {
    background-color: #fafafa;
  }
  html body.colors section .container-circles .circle-color#C1-50 {
    background-color: #FFFFFF;
  }
  html body.colors section .container-circles .circle-color#C2-100 {
    background-color: #0a0a0a;
  }
  html body.colors section .container-circles .circle-color#C2-150 {
    background-color: #0a0a0a;
  }
  html body.colors section .container-circles .circle-color#C2-50 {
    background-color: #0a0a0a;
  }
  html body.colors section h2 {
    margin-bottom: 25px;
  }
  html body.logos {
    padding-bottom: 50px;
  }
  html body.logos section {
    padding: 120px 0;
  }
  html body.logos section#title {
    margin-top: 150px !important;
    padding-bottom: 0;
  }
  html body.logos section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.logos section#container-logos {
    padding-top: 60px !important;
  }
  html body.logos section h2 {
    margin-bottom: 25px;
  }
  html body.buttons {
    padding-bottom: 50px;
  }
  html body.buttons section {
    padding: 120px 0;
  }
  html body.buttons section#title {
    margin-top: 150px !important;
  }
  html body.buttons section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.buttons section h2 {
    margin-bottom: 25px;
  }
  html body.buttons section button {
    margin-top: 60px;
  }
  html body.typography {
    padding-bottom: 50px;
  }
  html body.typography section#title {
    margin-top: 150px !important;
  }
  html body.typography section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.typography section h2 {
    margin-bottom: 25px;
  }
  html body.typography section#table {
    padding-top: 60px;
  }
  html body.typography section#table p {
    text-align: center;
  }
  html body.alerts {
    padding-bottom: 50px;
  }
  html body.alerts section {
    padding: 120px 0;
  }
  html body.alerts section#title {
    margin-top: 150px !important;
  }
  html body.alerts section#title .alert {
    margin-top: 45px;
  }
  html body.alerts section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.alerts section h2 {
    margin-bottom: 25px;
  }
  html body.alerts section#type-alerts .alert {
    margin-top: 50px;
  }
  html body.tables {
    padding-bottom: 50px;
  }
  html body.tables section#title {
    margin-top: 150px !important;
  }
  html body.tables section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.tables section h2 {
    margin-bottom: 25px;
  }
  html body.tables section#table {
    padding-top: 60px;
  }
  html body.inputs {
    padding-bottom: 50px;
  }
  html body.inputs section {
    padding: 120px 0;
  }
  html body.inputs section input {
    margin-top: 60px;
  }
  html body.inputs section h2 {
    margin-bottom: 25px;
  }
  html body.inputs section#title {
    margin-top: 150px !important;
  }
  html body.inputs section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.contents {
    padding-bottom: 50px;
  }
  html body.contents section i {
    font-size: 16px;
    margin-right: 10px;
  }
  html body.contents section i.fa-check {
    color: #17b283;
  }
  html body.contents section i.fa-wrench {
    color: #132922;
  }
  html body.contents section i.fa-calendar-alt {
    color: #5adc95;
  }
  html body.contents section#title {
    margin-top: 150px !important;
  }
  html body.contents section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.contents section#title .legends {
    margin-top: 45px;
    padding: 25px;
    background-color: #fafafa;
  }
  html body.contents section#title .legends p {
    margin-bottom: 25px;
  }
  html body.contents section h2 {
    margin-bottom: 25px;
  }
  html body.contents section.status {
    margin-bottom: 80px;
  }
  html body.contents section table p {
    color: #5adc95;
  }
  html body.forms {
    padding-bottom: 50px;
  }
  html body.forms section {
    padding: 120px 0;
  }
  html body.forms section#title {
    margin-top: 150px !important;
  }
  html body.forms section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.forms section#title p {
    margin-bottom: 35px;
  }
  html body.forms section h2 {
    margin-bottom: 25px;
  }
  html body.cards {
    padding-bottom: 50px;
  }
  html body.cards section {
    padding: 120px 0;
  }
  html body.cards section#title {
    margin-top: 150px !important;
  }
  html body.cards section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.cards section#title p {
    margin-bottom: 35px;
  }
  html body.cards section h2 {
    margin-bottom: 25px;
  }
  html body.asides {
    padding-bottom: 50px;
  }
  html body.asides section {
    padding: 120px 0;
  }
  html body.asides section#title {
    margin-top: 150px !important;
  }
  html body.asides section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.asides section#title p {
    margin-bottom: 35px;
  }
  html body.asides section h2 {
    margin-bottom: 25px;
  }
  html body.navbars {
    padding-bottom: 50px;
  }
  html body.navbars section {
    padding: 120px 0;
  }
  html body.navbars section#title {
    margin-top: 150px !important;
  }
  html body.navbars section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.navbars section#title p {
    margin-bottom: 35px;
  }
  html body.navbars section h2 {
    margin-bottom: 25px;
  }
  html body.footers {
    padding-bottom: 50px;
  }
  html body.footers section {
    padding: 120px 0;
  }
  html body.footers section#title {
    margin-top: 150px !important;
  }
  html body.footers section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.footers section#title p {
    margin-bottom: 35px;
  }
  html body.footers section h2 {
    margin-bottom: 25px;
  }
  html body.master {
    padding-bottom: 50px;
  }
  html body.master section {
    padding: 120px 0;
  }
  html body.master section#title {
    margin-top: 150px !important;
  }
  html body.master section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.master section#title p {
    margin-bottom: 35px;
  }
  html body.master section h2 {
    margin-bottom: 25px;
  }
  html body.admin {
    padding-bottom: 50px;
  }
  html body.admin section {
    padding: 120px 0;
  }
  html body.admin section#title {
    margin-top: 150px !important;
  }
  html body.admin section#title h1 {
    margin-bottom: 32px;
    color: #5adc95;
  }
  html body.admin section#title p {
    margin-bottom: 35px;
  }
  html body.admin section h2 {
    margin-bottom: 25px;
  }
}
/*--------------------------
        IMPORTS
--------------------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
@media only screen and (max-width: 3550px) {
  html body.home main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  html body.home main #swiper-wrapper-main.active {
    scroll-behavior: smooth;
    transition-duration: 0.5s !important;
  }
  html body.home main .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
  }
  html body.home main .swp_vertical {
    width: 100vw;
    height: 100vh;
  }
  html body.home main #home {
    justify-content: flex-end;
  }
  html body.home main #home .imgs-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  html body.home main #home .imgs-container .square {
    width: 200px;
    height: 300px;
    overflow: hidden;
  }
  html body.home main #home .imgs-container .square img {
    height: 100%;
    width: auto;
  }
  html body.home main #home .imgs-container .square:nth-child(1) {
    width: 820px;
    height: 562px;
    position: absolute;
    top: 18%;
    left: 3%;
  }
  html body.home main #home .imgs-container .square:nth-child(2) {
    width: 350px;
    height: 220px;
    position: absolute;
    bottom: 2%;
    left: 5%;
  }
  html body.home main #home .imgs-container .square:nth-child(3) {
    width: 350px;
    height: 350px;
    position: absolute;
    bottom: -15%;
    right: 30%;
  }
  html body.home main #home .imgs-container .square:nth-child(4) {
    width: 250px;
    height: 350px;
    position: absolute;
    top: 15%;
    right: 5%;
  }
  html body.home main #home .content {
    width: 670px;
  }
  html body.home main #home .content h1 {
    color: #5adc95;
    font-size: 100px;
  }
  html body.home main #home .content span {
    font-size: 15px;
    margin-bottom: -15px;
  }
  html body.home main #about .left {
    width: 40%;
    height: 100%;
  }
  html body.home main #about .left h1 {
    text-align: start;
    width: 100%;
    color: #5adc95;
  }
  html body.home main #about .left p {
    margin-bottom: 30px;
  }
  html body.home main #about .left .img {
    width: 80%;
  }
  html body.home main #about .right {
    width: 40%;
    height: 100%;
    position: relative;
  }
  html body.home main #about .right .img {
    width: 528px;
    height: 330px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  html body.home main #about .right .img img {
    height: 100%;
    width: auto;
  }
  html body.home main #about .right h4 {
    transform: rotate(-90deg);
    margin: 0;
    width: 30px;
    height: 30px;
    color: #5adc95;
  }
  html body.home main #about .right h4:nth-child(1) {
    margin-bottom: -200px;
    margin-right: 25px;
  }
  html body.home main #about .right h4:nth-child(2) {
    margin-right: 160px;
  }
  html body.home main #blog .container {
    width: 90%;
  }
  html body.home main #blog .container h1 {
    margin-top: 50px;
    color: #5adc95;
  }
  html body.home main #blog .container .container-swiper-blog {
    width: 800px;
    height: 445px;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog {
    width: 100%;
    height: 100%;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .img {
    opacity: 0;
    transition-duration: 1s;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .img.active {
    opacity: 1;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide .content {
    width: 350px;
    height: 250px;
    margin-right: 50px;
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.63);
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide .content h4, html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide .content p {
    color: #FFFFFF;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide .content {
    opacity: 0;
    transition-duration: 2s;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide.swiper-slide-active .content {
    opacity: 1;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container {
    position: absolute;
    z-index: 1500;
    bottom: 40px;
    left: 75px;
    width: 300px;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination {
    width: 50%;
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination span {
    font-size: 16px;
    color: #FFFFFF;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 {
    width: 50%;
    position: relative;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 2px;
    top: 0;
    bottom: 0;
    right: -50px;
    margin: auto;
    z-index: 15000;
    background-color: #fff;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span {
    width: 14px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0) !important;
    position: relative;
    opacity: 1 !important;
    border: solid 1px transparent;
    margin-left: 15px;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span::before {
    content: "";
    position: absolute;
    z-index: 1000;
    width: 8px;
    height: 8px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    background-color: rgba(204, 204, 204, 0.924);
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span.swiper-pagination-bullet-active {
    border: solid 1px #132922;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span.swiper-pagination-bullet-active::before {
    background-color: #132922;
  }
  html body.home main #contact .size .img {
    width: 600px;
    height: auto;
  }
  html body.home main #contact .size form {
    z-index: 1500;
    width: 500px;
    margin-left: -280px;
    padding: 35px;
    background-color: #FFFFFF;
  }
  html body.home footer {
    display: none;
  }
  html body.blog #banner {
    padding-top: 140px;
  }
  html body.blog #banner .container-swiper-blog {
    width: 1100px;
    height: 600px;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog {
    width: 100%;
    height: 100%;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .img {
    opacity: 0;
    transition-duration: 1s;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .img.active {
    opacity: 1;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-slide {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-slide .content {
    width: 350px;
    height: 250px;
    margin-right: 50px;
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.63);
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-slide .content h4, html body.blog #banner .container-swiper-blog .swiperBlog .swiper-slide .content p {
    color: #FFFFFF;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-slide .content {
    opacity: 0;
    transition-duration: 2s;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-slide.swiper-slide-active .content {
    opacity: 1;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container {
    position: absolute;
    z-index: 1500;
    bottom: 40px;
    left: 75px;
    width: 300px;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination {
    width: 50%;
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination span {
    font-size: 16px;
    color: #FFFFFF;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 {
    width: 50%;
    position: relative;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 2px;
    top: 0;
    bottom: 0;
    right: -50px;
    margin: auto;
    z-index: 15000;
    background-color: #fff;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span {
    width: 14px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0) !important;
    position: relative;
    opacity: 1 !important;
    border: solid 1px transparent;
    margin-left: 15px;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span::before {
    content: "";
    position: absolute;
    z-index: 1000;
    width: 8px;
    height: 8px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    background-color: rgba(204, 204, 204, 0.924);
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span.swiper-pagination-bullet-active {
    border: solid 1px #132922;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span.swiper-pagination-bullet-active::before {
    background-color: #132922;
  }
  html body.blog #galery {
    padding-bottom: 45px;
  }
  html body.blog #galery h3 {
    margin-bottom: 15px;
    color: #5adc95;
  }
  html body.blog #galery .container {
    width: 90%;
    height: 700px;
  }
  html body.blog #galery .container .galery-swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  html body.blog #galery .container .galery-swiper .swiper-slide {
    height: calc((100% - 30px) / 2);
  }
  html body.blog-view #banner {
    padding-top: 120px;
    padding-bottom: 0;
  }
  html body.blog-view #banner .img {
    width: 1100px;
    height: auto;
  }
  html body.blog-view #content {
    padding-top: 0;
    margin-top: -110px;
    margin-bottom: 45px;
    padding: 45px;
    width: 800px;
    background-color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  html body.blog-view #content h4 {
    color: #5adc95;
    margin-bottom: 25px;
  }
  html body.blog-view #content span {
    font-size: 16px;
  }
  html body.blog-view #content p {
    margin-bottom: 15px;
  }
  html body.blog-view #content .media {
    width: 100%;
  }
  html body.blog-view #content .media a {
    color: #b6b6b6;
    transition-duration: 0.5s;
    margin: 5px;
  }
  html body.blog-view #content .media a i {
    font-size: 25px;
  }
  html body.blog-view #content .media a:hover {
    color: #5adc95;
  }
}
@media only screen and (max-width: 960px) {
  html body.home main {
    position: relative;
  }
  html body.home main #home {
    margin: 90px 0;
  }
  html body.home main #home .imgs-container .square:nth-child(1) {
    width: 135px;
    height: 220px;
    position: absolute;
    top: 12%;
    left: 0%;
  }
  html body.home main #home .imgs-container .square:nth-child(2) {
    width: 255px;
    height: 170px;
    position: absolute;
    bottom: 8%;
    left: 5%;
  }
  html body.home main #home .imgs-container .square:nth-child(3) {
    width: 250px;
    height: 250px;
    position: absolute;
    bottom: -11%;
    right: 5%;
  }
  html body.home main #home .imgs-container .square:nth-child(4) {
    width: 105px;
    height: 225px;
    position: absolute;
    top: 15%;
    right: 5%;
  }
  html body.home main #about {
    margin: 90px 0;
  }
  html body.home main #about .left {
    width: 80%;
  }
  html body.home main #about .right {
    display: none;
  }
  html body.home main #blog .container {
    width: 90%;
  }
  html body.home main #blog .container .container-swiper-blog {
    width: 90%;
    height: 445px;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .img {
    width: 100%;
    height: 100%;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .img img {
    height: 100%;
    width: auto;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide {
    justify-content: center;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide .content {
    margin-right: 0;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container {
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
  }
  html body.home main #contact .size .img {
    display: none;
  }
  html body.home main #contact .size form {
    margin-left: 0;
  }
  html body.home footer {
    display: flex;
  }
  html body.blog #banner {
    padding-top: 80px;
  }
  html body.blog #banner .container-swiper-blog {
    width: 90%;
    height: 600px;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog {
    width: 100%;
    height: 90vh;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .img {
    width: 100%;
    height: 100%;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .img img {
    height: 100%;
    width: auto;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-slide {
    justify-content: center;
    align-items: center;
    position: relative;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-slide .content {
    margin-right: 0;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container {
    position: absolute;
    z-index: 1500;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination {
    width: 50%;
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination span {
    font-size: 16px;
    color: #FFFFFF;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 {
    width: 50%;
    position: relative;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 2px;
    top: 0;
    bottom: 0;
    right: -50px;
    margin: auto;
    z-index: 15000;
    background-color: #fff;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span {
    width: 14px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0) !important;
    position: relative;
    opacity: 1 !important;
    border: solid 1px transparent;
    margin-left: 15px;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span::before {
    content: "";
    position: absolute;
    z-index: 1000;
    width: 8px;
    height: 8px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    background-color: rgba(204, 204, 204, 0.924);
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span.swiper-pagination-bullet-active {
    border: solid 1px #132922;
  }
  html body.blog #banner .container-swiper-blog .swiperBlog .swiper-pagination-container .swiper-pagination-2 span.swiper-pagination-bullet-active::before {
    background-color: #132922;
  }
  html body.blog #galery {
    padding-bottom: 45px;
  }
  html body.blog #galery h3 {
    margin-bottom: 15px;
    color: #5adc95;
  }
  html body.blog #galery .container {
    width: 90%;
    height: 700px;
  }
  html body.blog #galery .container .galery-swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  html body.blog #galery .container .galery-swiper .swiper-slide {
    height: calc((100% - 30px) / 2);
  }
  html body.blog-view #banner {
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 0;
  }
  html body.blog-view #banner .img {
    width: 100%;
    height: auto;
  }
  html body.blog-view #content {
    padding-top: 45px;
    margin-top: 0;
    padding: 0;
    width: 90%;
  }
  html body.blog-view #content h4 {
    color: #5adc95;
    margin-bottom: 10px;
    padding: 10px 35px;
    padding-bottom: 0;
  }
  html body.blog-view #content span {
    padding: 10px 35px;
    padding-bottom: 0;
    font-size: 16px;
    margin-top: 25px;
  }
  html body.blog-view #content p {
    padding: 10px 35px;
    padding-bottom: 0;
    margin-bottom: 5px;
  }
  html body.blog-view #content .media {
    width: 90%;
    padding: 30px;
  }
  html body.blog-view #content .media a i {
    font-size: 30px;
  }
}
@media only screen and (max-width: 500px) {
  html body.home main #home .content {
    margin-top: 25px;
  }
  html body.home main #home .content span {
    font-size: 12px;
  }
  html body.home main #home .content h1 {
    font-size: 70px;
  }
  html body.home main #home .imgs-container {
    display: none;
  }
  html body.home main #about {
    margin: 90px 0;
  }
  html body.home main #about .left {
    width: 80%;
  }
  html body.home main #about .left h1 {
    width: 100%;
    text-align: center;
  }
  html body.home main #about .left .img {
    width: 100%;
  }
  html body.home main #blog .container {
    width: 90%;
  }
  html body.home main #blog .container .container-swiper-blog {
    width: 100%;
    height: 500px;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .img {
    width: 100%;
    height: 100%;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .img img {
    height: 100%;
    width: auto;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide {
    justify-content: center;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-slide .content {
    margin-right: 0;
  }
  html body.home main #blog .container .container-swiper-blog .swiperBlog .swiper-pagination-container {
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
  }
  html body.home main #contact .size .img {
    display: none;
  }
  html body.home main #contact .size .content {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  html body.home main #contact .size .content form {
    width: 100%;
  }
  html body.home footer {
    display: flex;
  }
  html body.about #banner {
    padding: 35px 0;
  }
  html body.about #banner .container {
    flex-direction: column;
  }
  html body.about #banner .container .img-banner {
    width: 100%;
    margin: 0;
  }
  html body.about #banner .container .content {
    width: 90%;
  }
  html body.about .paragraph {
    width: 85%;
  }
  html body.about #about-2 div {
    width: 85%;
  }
  html body.about #about-3 div {
    width: 100%;
    align-items: center;
  }
  html body.about #about-3 div div {
    width: 85%;
  }
  html body.about #about-3 div h5, html body.about #about-3 div p {
    width: 100%;
  }
  html body.contact #banner .container .img-banner {
    display: none;
  }
}
/*--------------------------
        IMPORTS
--------------------------*/
/*--------------------------
    RESOLUTION CONTROLLER
--------------------------*/
@media only screen and (max-width: 3550px) {
  html {
    width: 100%;
    height: 100%;
  }
  html body#admin {
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  html body#admin main {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #FFFFFF;
    transition-duration: 0.3s;
  }
  html body#admin main iframe {
    height: 100%;
    width: 100%;
    box-shadow: #ccdbe8 -15px 15px 15px -10px inset, rgba(255, 255, 255, 0.5) 0px 15px 15px 10px inset;
    background-color: #fff;
  }
  html body.admin {
    min-width: 100%;
    min-height: 100%;
  }
  html body.admin p.route {
    color: #111111;
    width: 90%;
    text-align: start;
    margin: 10px 0;
  }
  html body.admin p.route a {
    color: #111111;
    transition-duration: 0.3s;
  }
  html body.admin p.route a:hover {
    color: #5adc95;
  }
  html body.admin h1 {
    font-size: 45px;
    color: #17b283;
  }
  html body.admin main {
    width: 90%;
  }
  html body.admin main .folder .head {
    width: 100%;
  }
  html body.admin main .folder .head .option {
    position: relative;
    width: 150px;
    padding: 10px 15px;
    padding: 10px 15px;
    border-radius: 8px 8px 0px 0px;
    background-color: #E8E8E8;
    text-align: center;
    cursor: pointer;
    transition-duration: 0.3s;
    height: 38px;
    line-height: 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    z-index: 1500;
  }
  html body.admin main .folder .head .option:nth-child(1) {
    margin-left: 5px;
  }
  html body.admin main .folder .head .option:nth-child(1)::after {
    width: 100%;
  }
  html body.admin main .folder .head .option::after {
    background-color: #fff;
    height: 20px;
    content: "";
    position: absolute;
    bottom: -20px;
    width: 150%;
    left: 0;
  }
  html body.admin main .folder .head .option.active {
    background-color: #fff;
  }
  html body.admin main .folder .body {
    width: 99.3%;
    padding: 30px 0px;
    background-color: #F9F6F7;
    border-radius: 0px 8px 8px 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background-color: #fff;
  }
  html body.admin main .folder .body h6 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  html body.admin main .folder .body h6 i {
    cursor: pointer;
    font-size: 15px;
    color: #132922;
    margin-left: 10px;
  }
  html body.admin main .folder .body .container-tables {
    margin-top: 25px;
  }
  html body.admin .container-btns-cells {
    width: 300px;
  }
  html body.admin .table-cells {
    width: 100%;
  }
  html body.admin .table-cells aside {
    width: 300px;
    height: 540px;
  }
  html body.admin .table-cells #cells {
    width: 700px;
    min-height: 540px;
    overflow-x: scroll;
    width: 100%;
  }
  html body.admin .table-cells #cells table {
    width: 100%;
  }
  html body.admin .table-cells #cells table td {
    text-align: start;
  }
  html body.admin .table-cells #cells table th input {
    padding: 5px;
    text-align: center;
    width: 80%;
  }
  html body.admin .container-tables {
    flex-wrap: wrap;
    margin-top: 15px;
  }
  html body.admin .container-tables table {
    margin-top: 15px;
  }
  html body.admin .container-tables .btn {
    margin-top: 25px;
  }
  html body.admin .title-attack {
    margin: 25px 0;
  }
  html body#home-dashboard .container-cards {
    margin-top: 35px;
  }
  html body#home-dashboard .container-general {
    margin-top: 35px;
  }
  html body#home-dashboard .container-general .chart-container {
    width: 30%;
    padding-bottom: 25px;
  }
  html body#home-dashboard .container-general .chart-container p {
    font-size: 18px;
    text-align: center;
    margin-bottom: -30px;
  }
  html body#home-dashboard .container-general .tables {
    width: 60%;
  }
  html body#home-dashboard .container-general .tables p {
    font-size: 18px;
    margin-top: 25px;
  }
  html body#home-dashboard .container-general .tables p:nth-child(1) {
    margin-top: 0;
  }
  html body#home-dashboard .container-general .tables table {
    width: 100%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    cursor: pointer;
  }
  html body#home-dashboard .container-general .tables table td {
    text-align: center;
  }
  html body#home-dashboard .container-general .tables table td i {
    font-size: 16px;
    color: #5adc95;
  }
}
@media only screen and (max-width: 960px) {
  html body#admin main {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  html body#admin main.active {
    width: 100%;
    left: 300px;
  }
}
/*--------------------------
         IMPORTS
--------------------------*/
/*# sourceMappingURL=main.css.map */