@namelessmedia/tisc_nuxt/SCSS/dist/main.css

TISC NUXT Component Library

@charset "UTF-8";
/* generated with grunt-sass-globbing */
:root {
  --tisc-bg-primary: #F8F7F1;
  --tisc-bg-secondary: #FFFFFF;
  --tisc-bg-third: #E6E9E4;
  --tisc-text-primary: #1E2937;
  --tisc-text-secondary: #374151;
  --tisc-text-third: #079DAD;
  --tisc-primary: #079DAD;
  --tisc-primary-darken: #048390;
  --tisc-primary-lighten: #5BC6D1;
  --tisc-hover-primary: #EBEAE6;
  --tisc-hover-secondary: #F3F4F6;
  --tisc-hover-third: #D7DAD5;
  --tisc-border-primary: #E5E7EB;
  --tisc-border-secondary: #d5d5d5;
  --tisc-box-shadow: #c7cbc6;
  --tisc-overlay: #094650;
  --tisc-disabled: #E7E9E4;
  --tisc-placeholder: #A7A7A7;
  --tisc-table-header: #E6E9E4;
  --tisc-table-primary: #F8F7F1;
  --tisc-table-secondary: #FFFFFF;
  --tisc-input: #FFFFFF;
}
:root.dark-theme {
  --tisc-bg-primary: #374151;
  --tisc-bg-secondary: #101827;
  --tisc-bg-third: #1E2937;
  --tisc-text-primary: #F8F7F2;
  --tisc-text-secondary: #9CA3AF;
  --tisc-text-third: #5BC6D1;
  --tisc-hover-primary: #2E3745;
  --tisc-hover-secondary: #0C121E;
  --tisc-hover-third: #1A2431;
  --tisc-border-primary: #4C5563;
  --tisc-border-secondary: #1E2937;
  --tisc-box-shadow: #000000;
  --tisc-overlay: #5BC6D1;
  --tisc-disabled: #2E3238;
  --tisc-table-header: #101827;
  --tisc-table-primary: #1E2937;
  --tisc-table-secondary: #374151;
  --tisc-input: #374151;
}

body {
  overflow-x: hidden;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

ol {
  list-style: decimal;
}

.d-flex-right, .d-flex-left, .d-flex-between, .d-flex-center {
  display: flex;
  align-items: center;
}

.d-flex-center {
  justify-content: center;
}

.d-flex-between {
  justify-content: space-between;
}

.d-flex-left {
  justify-content: flex-start;
}

.d-flex-right {
  justify-content: flex-end;
}

@media (max-width: 736px) {
  .show-mobile__f {
    display: flex;
  }
}
@media (min-width: 737px) {
  .show-mobile__f {
    display: none;
  }
}

@media (max-width: 736px) {
  .show-desktop__f {
    display: none;
  }
}
@media (min-width: 737px) {
  .show-desktop__f {
    display: flex;
  }
}

@media (max-width: 736px) {
  .show-mobile__i {
    display: inline-block;
  }
}
@media (min-width: 737px) {
  .show-mobile__i {
    display: none;
  }
}

@media (max-width: 736px) {
  .show-desktop__i {
    display: none;
  }
}
@media (min-width: 737px) {
  .show-desktop__i {
    display: inline-block;
  }
}

@media (max-width: 736px) {
  .show-mobile__b {
    display: block;
  }
}
@media (min-width: 737px) {
  .show-mobile__b {
    display: none;
  }
}

@media (max-width: 736px) {
  .show-desktop__b {
    display: none;
  }
}
@media (min-width: 737px) {
  .show-desktop__b {
    display: block;
  }
}

h9, .heading-9, h8, .heading-8, h7, .heading-7, h6, .heading-6, h5, .heading-5, h4, .heading-4, h3, .heading-3, h2, .heading-2, h1, .heading-1 {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-weight: bold;
  margin: 15px 0;
  display: block;
}

h1, .heading-1 {
  font-size: 48px;
}

h2, .heading-2 {
  font-size: 34px;
}

h3, .heading-3 {
  font-size: 28px;
}

h4, .heading-4 {
  font-size: 24px;
}

h5, .heading-5 {
  font-size: 20px;
}

h6, .heading-6 {
  font-size: 18px;
}

h7, .heading-7 {
  font-size: 16px;
}

h8, .heading-8 {
  font-size: 18px;
  font-weight: normal;
}

h9, .heading-9 {
  font-size: 16px;
  font-weight: normal;
}

p, .body-1 {
  font-size: 16px;
}

.body-2 {
  font-size: 14px;
}

.body-3 {
  font-size: 12px;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

blockquote, .blockquote {
  padding-left: 10px;
  border-left: 1px solid #7A7F7D;
  line-height: 28px;
}

.blockquote__quote {
  position: relative;
  border: none;
  margin-left: 110px;
  padding-left: 20px;
}
.blockquote__quote:before {
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  font-size: 48px;
  content: "";
  width: 110px;
  position: absolute;
  top: calc(50% - 55px);
  right: 100%;
  background: #079dad;
  color: white;
  border-radius: 50%;
  line-height: 110px;
  text-align: center;
}

a, .link {
  color: #048390;
  text-decoration: none;
}
a:hover, .link:hover {
  color: #04353E;
  text-decoration: underline;
}

.dark-theme a, .dark-theme .link {
  color: #5BC6D1;
}
.dark-theme a:hover, .dark-theme .link:hover {
  color: #C2E6ED;
}

.list__unordered li, .list__ordered li, .sub-list li {
  margin: 5px 0;
}

.list__unordered, .list__ordered, .list__unordered--lg {
  margin: 15px 0;
}

.list__unordered--lg li:before {
  font-size: 0.8rem;
  content: "";
  line-height: 2.4rem;
  padding-right: 10px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #106673;
}
.list__unordered li {
  position: relative;
}
.list__unordered li:before {
  font-size: 0.5rem;
  content: "";
  line-height: 1rem;
  padding-right: 10px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: relative;
  bottom: 0.2rem;
}

.list__ordered {
  padding-left: 20px;
}

.sub-list {
  padding: 0 0 0 1rem;
}
.sub-list li:before {
  font-weight: 500;
}

.accordion--container {
  background: var(--tisc-bg-secondary);
  color: var(--tisc-text-primary);
  box-shadow: 0 5px 0px 0px var(--tisc-box-shadow);
}

.accordion__section {
  position: relative;
}

.avatar {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  position: relative;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  font-weight: 700;
}

.md {
  height: calc( 46px + var(--height) );
  width: calc( 46px + var(--height) );
  line-height: 1.1;
  font-size: 1.1rem;
}

.sm {
  height: 32px;
  width: 32px;
  line-height: 0.8;
  font-size: 0.8rem;
}

.lg {
  height: 60px;
  width: 60px;
  line-height: 1.6;
  font-size: 1.6rem;
}

img {
  border-radius: inherit;
  display: inline-flex;
  height: inherit;
  width: inherit;
}

.color-blue-fill {
  border: 2px solid #079DAD;
  background: #079DAD;
  color: white;
}

.color-blue-line {
  border: 2px solid #079DAD;
  color: #079DAD;
  background: transparent;
}

.color-green-fill {
  border: 2px solid #58A546;
  background: #58A546;
  color: white;
}

.color-green-line {
  border: 2px solid #58A546;
  color: #58A546;
  background: transparent;
}

.color-red-fill {
  border: 2px solid #E33D25;
  background: #E33D25;
  color: white;
}

.color-red-line {
  border: 2px solid #E33D25;
  color: #E33D25;
  background: transparent;
}

.color-yellow-fill {
  border: 2px solid #EDCB18;
  background: #EDCB18;
  color: black;
}

.color-yellow-line {
  border: 2px solid #EDCB18;
  color: #EDCB18;
  background: transparent;
}

.container {
  position: relative;
  display: inline-block;
}

.badge {
  width: 20px;
  height: 20px;
  background-color: #f00;
  border-radius: 50%;
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(100% - 16px);
  left: calc(100% - 16px);
  will-change: transform, border-radius, width;
  transition: 0.2s transform, 0.2s border-radius, 0.05s width;
}
.badge .notification {
  width: inherit;
  height: inherit;
  display: flex;
  text-align: center;
  color: white;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.hundred {
  border-radius: 100px;
  width: 30px;
}

.small {
  width: 10px;
  height: 10px;
  top: auto;
  right: auto;
  bottom: calc(100% - 8px);
  left: calc(100% - 8px);
}

.bottom {
  bottom: auto;
  right: auto;
  top: calc(100% - 16px);
  left: calc(100% - 16px);
}

.small.bottom {
  bottom: auto;
  right: auto;
  top: calc(100% - 8px);
  left: calc(100% - 8px);
}

.hide {
  transform: scale(0);
}

.show {
  transform: scale(1);
}

.hover .badge {
  transform: scale(0);
}
.hover:hover .badge {
  transform: scale(1);
}

.button--darkgrey, .button--lightgrey, .button--grey, .button--yellow, .button--red, .button--green, .button--blue, button,
.button {
  background: #FFFFFF;
  color: #000000;
  padding: 9px 20px;
  margin: 0 4px;
  min-height: 40px;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1;
  border: 2px solid;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.disabled.button--darkgrey, .disabled.button--lightgrey, .disabled.button--grey, .disabled.button--yellow, .disabled.button--red, .disabled.button--green, .disabled.button--blue, button.disabled,
.disabled.button {
  opacity: 0.5;
  pointer-events: none;
}
.button--darkgrey:focus, .button--lightgrey:focus, .button--grey:focus, .button--yellow:focus, .button--red:focus, .button--green:focus, .button--blue:focus, button:focus,
.button:focus {
  outline: thin dotted;
  outline-offset: -4px;
}

button:hover,
.button:hover {
  background: #cccccc;
}

.button--blue {
  background: #079DAD;
  border-color: #079DAD;
  color: white;
}
.button--blue:hover, .button--blue:active {
  background: #03444b;
  border-color: #03444b;
}
.button--blue-alt {
  background: transparent;
  color: #079DAD;
}
.button--blue-alt:hover, .button--blue-alt:active {
  color: white;
  background: #079DAD;
  border-color: #079DAD;
}
.button--blue-text {
  background: none;
  color: #079DAD;
  border: none;
  box-shadow: none;
  padding: 5px;
}
.button--blue-text:hover, .button--blue-text:active {
  background: none;
  color: #03444b;
}
.button--green {
  background: #58A546;
  border-color: #58A546;
  color: white;
}
.button--green:hover, .button--green:active {
  background: #325d28;
  border-color: #325d28;
}
.button--green-alt {
  background: transparent;
  color: #58A546;
}
.button--green-alt:hover, .button--green-alt:active {
  color: white;
  background: #58A546;
  border-color: #58A546;
}
.button--green-text {
  background: none;
  color: #58A546;
  border: none;
  box-shadow: none;
  padding: 5px;
}
.button--green-text:hover, .button--green-text:active {
  background: none;
  color: #325d28;
}
.button--red {
  background: #E33D25;
  border-color: #E33D25;
  color: white;
}
.button--red:hover, .button--red:active {
  background: #902212;
  border-color: #902212;
}
.button--red-alt {
  background: transparent;
  color: #E33D25;
}
.button--red-alt:hover, .button--red-alt:active {
  color: white;
  background: #E33D25;
  border-color: #E33D25;
}
.button--red-text {
  background: none;
  color: #E33D25;
  border: none;
  box-shadow: none;
  padding: 5px;
}
.button--red-text:hover, .button--red-text:active {
  background: none;
  color: #902212;
}
.button--yellow {
  background: #EDCB18;
  border-color: #EDCB18;
  color: white;
}
.button--yellow:hover, .button--yellow:active {
  background: #947e0b;
  border-color: #947e0b;
}
.button--yellow-alt {
  background: transparent;
  color: #EDCB18;
}
.button--yellow-alt:hover, .button--yellow-alt:active {
  color: white;
  background: #EDCB18;
  border-color: #EDCB18;
}
.button--yellow-text {
  background: none;
  color: #EDCB18;
  border: none;
  box-shadow: none;
  padding: 5px;
}
.button--yellow-text:hover, .button--yellow-text:active {
  background: none;
  color: #947e0b;
}
.button--grey {
  background: #7A7F7D;
  border-color: #7A7F7D;
  color: white;
}
.button--grey:hover, .button--grey:active {
  background: #484b4a;
  border-color: #484b4a;
}
.button--grey-alt {
  background: transparent;
  color: #7A7F7D;
}
.button--grey-alt:hover, .button--grey-alt:active {
  color: white;
  background: #7A7F7D;
  border-color: #7A7F7D;
}
.button--grey-text {
  background: none;
  color: #7A7F7D;
  border: none;
  box-shadow: none;
  padding: 5px;
}
.button--grey-text:hover, .button--grey-text:active {
  background: none;
  color: #484b4a;
}
.button--lightgrey {
  background: #F8F7F2;
  border-color: #F8F7F2;
}
.button--lightgrey:hover, .button--lightgrey:active {
  color: #F8F7F2;
}
.button--lightgrey-alt {
  background: transparent;
  color: #F8F7F2;
  background: #7A7F7D;
}
.button--lightgrey-alt:hover, .button--lightgrey-alt:active {
  color: black;
  background: #F8F7F2;
  border-color: #F8F7F2;
}
.button--lightgrey-text {
  background: none;
  color: #F8F7F2;
  border: none;
  box-shadow: none;
  padding: 5px;
}
.button--lightgrey-text:hover, .button--lightgrey-text:active {
  background: none;
  color: #d4ceb0;
}
.button--darkgrey {
  background: #333239;
  border-color: #333239;
  color: white;
}
.button--darkgrey:hover, .button--darkgrey:active {
  background: #64626f;
  border-color: #64626f;
}
.button--darkgrey-alt {
  background: transparent;
  color: #333239;
}
.button--darkgrey-alt:hover, .button--darkgrey-alt:active {
  color: white;
  background: #333239;
  border-color: #333239;
}
.button--darkgrey-text {
  background: none;
  color: #333239;
  border: none;
  box-shadow: none;
  padding: 5px;
}
.button--darkgrey-text:hover, .button--darkgrey-text:active {
  background: none;
  color: #64626f;
}
.button--twitter, .button--twitter-alt, .button--facebook, .button--facebook-alt {
  border-radius: 5px;
  padding: 10px 20px;
  line-height: 1;
  color: #FFFFFF;
}
.button--twitter:before, .button--twitter-alt:before, .button--facebook:before, .button--facebook-alt:before {
  font-size: 19px;
  font-weight: 500;
  font-family: "Font Awesome 5 Brands";
  padding-right: 10px;
}
.button--twitter {
  background-color: #39a1f3;
  border: 2px solid #39a1f3;
}
.button--twitter:before {
  content: "";
}
.button--twitter:hover {
  background-color: #0b6dbb;
  border: 2px solid #0b6dbb;
}
.button--twitter-alt {
  background-color: #FFFFFF;
  border: 2px solid #39a1f3;
  color: #39a1f3;
}
.button--twitter-alt:before {
  content: "";
}
.button--twitter-alt:hover {
  background-color: #39a1f3;
  color: #FFFFFF;
  border: 2px solid #39a1f3;
}
.button--facebook {
  background-color: #3b5998;
  border: 2px solid #3b5998;
}
.button--facebook:before {
  content: "";
}
.button--facebook:hover {
  background-color: #1e2e4f;
  border: 2px solid #1e2e4f;
}
.button--facebook-alt {
  background-color: #FFFFFF;
  border: 2px solid #3b5998;
  color: #3b5998;
}
.button--facebook-alt:before {
  content: "";
}
.button--facebook-alt:hover {
  background-color: #3b5998;
  color: #FFFFFF;
  border: 2px solid #3b5998;
}
.button--small {
  font-size: calc(18px * .8);
  padding: 5px;
  min-height: auto;
  min-width: auto;
}
.button--large {
  font-size: calc(18px * 1.4);
  padding: 10px 30px;
}
.button--long {
  width: 100%;
}
.button--loading i {
  margin: 0;
  position: relative;
  right: 7px;
  top: 1px;
}
.button--submit:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  margin-left: 10px;
}
.button--submit-alt:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  margin-right: 10px;
}
.button--search:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  margin-left: 10px;
}
.button--icon, .button--icon-left, .button--icon-right, .button--icon-round {
  padding: 6px;
  min-width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button--icon-round {
  border-radius: 50%;
}
.button--icon-left, .button--icon-right {
  padding: 5px 20px;
}
.button--icon-right i {
  order: 1;
  padding-left: 10px;
}
.button--icon-left i {
  order: 0;
  padding-right: 10px;
}

.card {
  transition: all 0.3s;
  background-color: var(--tisc-bg-secondary);
  color: var(--tisc-text-primary);
}
.card.hover:hover {
  box-shadow: 0 3px 6px 0 var(--tisc-box-shadow);
}
.card__image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}
.card__details {
  padding: 25px 35px 55px;
}
.card__body {
  overflow: hidden;
  line-height: 25px;
}
.card__body:not(:last-child) {
  margin-bottom: 15px;
}
.card__link {
  color: var(--tisc-text-primary);
}
.card__link:after {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-left: 5px;
}
.card__link:hover {
  color: #079DAD;
}

.clamp .card__body {
  display: -webkit-box;
  -webkit-line-clamp: var(--clamp);
  -webkit-box-orient: vertical;
}

.header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 6px -1px var(--tisc-box-shadow);
  flex-wrap: wrap;
  background: var(--tisc-bg-secondary);
  padding: 20px;
  color: var(--tisc-text-primary);
}
.header .left, .header .right {
  max-width: 10%;
  display: flex;
  justify-content: flex-start;
}
.header .centre {
  width: 75%;
}
.header .right {
  justify-content: flex-end;
}

.site-logo {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  color: inherit;
  align-items: center;
  text-decoration: none;
}
.site-logo:hover {
  text-decoration: none;
}
.site-logo__image {
  padding-right: 10px;
  width: 50px;
  height: 50px;
}
.site-logo__name {
  text-transform: uppercase;
  margin-top: 0.75rem;
  font-family: "Montserrat", Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2.4px;
}
.site-logo__name:hover {
  text-decoration: none;
}

li {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 15px;
  font-family: "Open Sans", sans-serif;
}
li a {
  color: var(--tisc-text-primary);
}
li:hover {
  background: #f3f4f6;
}
li:hover a {
  text-decoration: none;
}

.notification, .flash-message {
  display: flex;
  border-radius: 2px;
  margin: 10px 0;
  align-items: center;
  padding: 5px;
  width: 100%;
}
.notification:before, .flash-message:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 25px;
  margin: 0 15px;
  text-align: center;
  width: 30px;
}
.notification--error, .flash-message--error {
  color: #E33D25;
  background: #FFF6F4;
  border-color: #E33D25;
}
.notification--error.dark-theme, .flash-message--error.dark-theme {
  color: #FFF6F4;
  background: #E33D25;
  border-color: #E33D25;
}
.notification--error:before, .flash-message--error:before {
  content: "";
}
.notification--warning, .flash-message--warning {
  background: #FDF9D1;
}
.notification--warning.dark-theme, .flash-message--warning.dark-theme {
  color: #FDF9D1;
}
.notification--warning:before, .flash-message--warning:before {
  content: "";
}
.notification--success, .flash-message--success {
  color: #58A546;
  background: #F0F6EA;
  border-color: #58A546;
}
.notification--success.dark-theme, .flash-message--success.dark-theme {
  color: #F0F6EA;
  background: #58A546;
  border-color: #58A546;
}
.notification--success:before, .flash-message--success:before {
  content: "";
}
.notification--notice, .flash-message--notice {
  color: #079DAD;
  background: #ECF6F9;
  border-color: #079DAD;
}
.notification--notice.dark-theme, .flash-message--notice.dark-theme {
  color: #ECF6F9;
  background: #079DAD;
  border-color: #079DAD;
}
.notification--notice:before, .flash-message--notice:before {
  content: "";
}

.notification {
  border: 1px solid;
}
.notification__text--container {
  margin: 10px 0;
}
.notification__text {
  margin: 0;
}

.flash-message {
  position: relative;
  transition: 0.5s opacity;
}
.flash-message__close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

.closing {
  opacity: 0;
}

.closed {
  display: none;
}

.modal {
  display: none;
}
.modal.open {
  display: block;
}

.modal__overlay {
  background: var(--tisc-overlay);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 1001;
}

.modal__body {
  min-width: 750px;
  min-height: 400px;
  max-height: 900px;
  background: var(--tisc-bg-secondary);
  color: var(--tisc-text-primary);
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
}

.modal__title {
  display: inline-block;
  font-weight: 700;
  margin: 15px 0;
  font-size: 24px;
}

.modal__close--button {
  padding: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 5px;
  right: 5px;
  color: var(--tisc-text-primary);
  background: var(--tisc-bg-secondary);
  transition: all 0.2s;
  border: none;
}
.modal__close--button:hover {
  border: none;
  box-shadow: 0 4px 6px var(--tisc-box-shadow);
  color: #079DAD;
}
.modal__close--button:before {
  content: "×";
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 40px;
  font-size: 36px;
}

.modal__content {
  padding: 0 35px 20px;
}

.modal__open-button {
  display: contents;
}

.pagination--container {
  text-align: center;
}

.pagination__link {
  font-size: 18px;
  width: 30px;
  margin: 0 4px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  color: #079DAD;
}
.pagination__link i {
  font-size: inherit;
  margin: 0;
}
.pagination__link.active {
  background: #079DAD;
  color: #FFFFFF;
}
.pagination__link.active a {
  color: #FFFFFF;
}
.pagination__link:hover {
  background-color: var(--tisc-table-header);
}
.pagination__link:hover a {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 50%;
}

.section--container, .form__fieldset {
  background: var(--tisc-bg-secondary);
  border-bottom: 5px solid var(--tisc-border-primary);
  color: var(--tisc-text-primary);
  position: relative;
}
.section--container + .section--container, .section--container + .form__fieldset, .form__fieldset + .section--container, .form__fieldset + .form__fieldset {
  margin-top: 2.5em;
}

.section__header, .form__fieldset-header {
  padding: 15px 0 0 70px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}
.section__header:before, .form__fieldset-header:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  border-top: 52px solid #079dad;
  border-right: 30px solid transparent;
  transform: none;
}
.section__header h4, .form__fieldset-header h4 {
  transform: translateY(-15px);
  width: 100%;
}
.section__header i, .form__fieldset-header i {
  font-size: 1.5em;
  padding-right: 20px;
}

.section__body, .form__fieldset-body {
  height: 0px;
  overflow: hidden;
  padding: 0 20px 0 70px;
  transition: all 0.3s linear;
}
.section__body.open, .form__fieldset-body.open {
  height: 100%;
  padding: 0 20px 20px 70px;
}

.section-text__header {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--tisc-text-primary);
}
.section-text__header .body-1 {
  color: var(--tisc-text-secondary);
  margin: 10px 0;
}

.js-text-section .body-1 {
  padding-left: 5px;
}
.js-text-section .body-1:hover {
  color: var(--tisc-text-secondary);
}

.section-text__body {
  color: var(--tisc-text-primary);
  max-height: 0;
  overflow: hidden;
  padding-left: 44px;
  margin: 0;
  transition: max-height 0.3s;
}
.section-text__body.open {
  max-height: 400px;
}

.form__fieldset {
  border-width: 0 0 5px 0;
  padding: 0;
}
.form__fieldset-body {
  transition: all 0.3s;
}
.form__fieldset-body.open {
  padding: 0 20px 20px 70px;
}
.form__fieldset .form__item {
  margin-bottom: 25px;
}

.tab__content {
  display: none;
  padding: 5px 25px;
}
.tab__content.active {
  display: block;
}

table, .table {
  width: 100%;
  border-spacing: 0;
  text-align: left;
  margin: 10px 0;
  color: var(--tisc-text-primary);
}

tr, .table__row {
  background: var(--tisc-table-primary);
}
tr:nth-of-type(even), .table__row:nth-of-type(even) {
  background: var(--tisc-table-secondary);
}
tr--heading, .table__row--heading {
  background: var(--tisc-table-header);
}

th, .table__heading, td, .tabel__cell {
  padding: 10px 5px;
  text-align: left;
}

.table__sortable {
  cursor: pointer;
}
.table__sortable:before {
  content: "";
  font-family: "Font Awesome 5 Free";
  margin-right: 5px;
}
.table__sortable.asc:before {
  content: "";
}
.table__sortable.desc:before {
  content: "";
}

.tabs__horz--container, .tabs__vert--container {
  background: var(--tisc-bg-secondary);
  color: var(--tisc-text-primary);
}

.tabs__horz--buttons, .tabs__vert--buttons {
  display: flex;
  flex-wrap: wrap;
}

.tab__button {
  padding: 0 25px;
  cursor: pointer;
  border-bottom: 5px solid var(--tisc-bg-secondary);
  transition: all 0.1s;
  text-align: center;
}
@media (max-width: 736px) {
  .tab__button {
    width: calc(100% - 50px);
  }
}
.tab__button:hover {
  border-color: #5BC6D1;
  color: #5BC6D1;
}
.tab__button.active {
  border-color: #079DAD;
  color: #079DAD;
}
.tab__button.disabled {
  pointer-events: none;
  filter: opacity(0.4);
}

.tabs__vert--container {
  display: flex;
}
@media (max-width: 736px) {
  .tabs__vert--container {
    flex-direction: column;
  }
}

.tabs__vert--buttons {
  width: 150px;
}

.tabs__vert--content {
  width: calc( 100% - 150px );
}

@media (max-width: 736px) {
  .tabs__vert--buttons, .tabs__vert--content {
    width: 100%;
  }
}

.input__error, .input__hint, label,
.input__label {
  display: block;
  margin-bottom: 5px;
  color: var(--tisc-text-primary);
}

.input__file {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: fit-content;
}
.input__file:disabled ~ .input__file--text {
  color: #a1a5a3;
  border-color: #a1a5a3;
}
.input__file--container {
  display: flex;
  align-items: center;
}
.input__file--button, .input__file--button-img {
  margin: 0;
  padding: 5px 30px;
  transition: all 0.2s;
  min-height: auto;
  min-width: auto;
}
.input__file--button:before, .input__file--button-img:before {
  content: "";
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
}
.input__file--button-img:before {
  content: "";
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.input__file--text {
  color: var(--tisc-text-secondary);
  margin-left: 25px;
  font-style: italic;
  white-space: nowrap;
  border-bottom: 2px solid var(--tisc-text-secondary);
  transition: all 0.5s;
}
.input__file--text.active {
  border-color: #079DAD;
}

.required {
  color: #E33D25;
}

.input__select, textarea, input {
  padding: 10px 15px;
  width: 100%;
  border: 1px solid var(--tisc-border-primary);
  font-size: 16px;
  border-radius: 2px;
  box-sizing: border-box;
  background: var(--tisc-input);
  color: var(--tisc-text-primary);
}
.input__select:focus, textarea:focus, input:focus {
  border: 1px solid var(--tisc-border-secondary);
  outline: 1px solid #079DAD;
  outline-offset: -3px;
  outline-style: dotted;
}
.input__select:disabled, textarea:disabled, input:disabled {
  background-color: var(--tisc-disabled);
  cursor: default;
}
.input__select::placeholder, textarea::placeholder, input::placeholder {
  font-style: italic;
}

.input__error, .input__hint, label,
.input__label {
  display: block;
  margin-bottom: 5px;
  color: var(--tisc-text-secondary);
}

.input__hint {
  font-style: italic;
  font-size: 0.8em;
}

.input__error {
  color: #E33D25;
  background: #FFF6F4;
  padding: 10px 5px;
}
.input__error + input {
  border-color: #E33D25;
}

.dark-theme .input__error {
  color: #FFF6F4;
  background: #E33D25;
}

textarea {
  height: 200px;
  resize: none;
}

.input__currency {
  padding-left: 50px;
  width: 100%;
}
.input__currency--contianer {
  position: relative;
}
.input__currency--symbol {
  position: absolute;
  line-height: 40px;
  width: 40px;
  text-align: center;
  border-right: 1px solid var(--tisc-border-primary);
  color: var(--tisc-text-primary);
}

.input__select, input, textarea {
  padding: 10px 15px;
  width: calc(100% - 32px);
  border: 1px solid var(--tisc-border-primary);
  font-size: 16px;
  border-radius: 2px;
}
.input__select:focus, input:focus, textarea:focus {
  border: 1px solid;
  outline: 1px solid #079DAD;
  outline-offset: -3px;
  outline-style: dotted;
}
.input__select:disabled, input:disabled, textarea:disabled {
  cursor: default;
}
.input__select::placeholder, input::placeholder, textarea::placeholder {
  font-style: italic;
}

label,
.input__label, .input__hint, .input__error {
  display: block;
  margin-bottom: 5px;
  color: var(--tisc-text-primary);
}

.input__toggle--container-inline, .input__toggle--container, .input__radio--container-inline, .input__radio--container, .input__checkbox--container-inline, .input__checkbox--container {
  border: 1px solid var(--tisc-border-primary);
  border-radius: 2px;
  padding: 10px 15px;
  margin-bottom: 10px;
  background: var(--tisc-bg-secondary);
}

.input__toggle, .input__radio, .input__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: auto;
}

.input__radio--text, .input__checkbox--text {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  line-height: 25px;
  user-select: none;
}
.input__radio--text:before, .input__checkbox--text:before {
  content: "";
  left: 0;
  position: absolute;
  height: 20px;
  width: 20px;
  border: 2px solid var(--tisc-border-primary);
  transition: all 0.2s;
}
.input__radio--text:after, .input__checkbox--text:after {
  content: "";
  position: absolute;
  display: none;
}

.input__hint {
  font-style: italic;
  font-size: 0.8em;
}

.input__error {
  color: #E33D25;
  background: #FFF6F4;
  padding: 10px 5px;
}
.input__error + input {
  border-color: #E33D25;
}

.input__checkbox:checked + .input__checkbox--text:after {
  display: block;
}
.input__checkbox:checked + .input__checkbox--text:before {
  border: 2px solid #079DAD;
  background-color: #079DAD;
}
.input__checkbox:disabled + .input__checkbox--text {
  cursor: initial;
}
.input__checkbox:disabled + .input__checkbox--text:before {
  background-color: #ebebe4;
  border: 2px solid #ebebe4;
}
.input__checkbox--container-inline {
  display: inline-block;
}
.input__checkbox--container-inline .input__checkbox--text {
  padding: 30px 0 0 0;
}
.input__checkbox--container-inline .input__checkbox--text:before, .input__checkbox--container-inline .input__checkbox--text:after {
  left: 50%;
}
.input__checkbox--container-inline .input__checkbox--text:after {
  transform: translateX(-50%) rotate(45deg);
}
.input__checkbox--container-inline .input__checkbox--text:before {
  top: 0;
  transform: translateX(-50%);
}
.input__checkbox--text:hover:before {
  background-color: var(--tisc-border-primary);
}
.input__checkbox--text:after {
  left: 8px;
  top: 3px;
  width: 5px;
  height: 12px;
  border: solid var(--tisc-bg-secondary);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.input__checkbox--text:before {
  border-radius: 2px;
}

.input__radio:checked + .input__radio--text:after {
  display: block;
}
.input__radio:checked + .input__radio--text:before {
  border: 2px solid #079DAD;
}
.input__radio:checked + .input__radio--text:hover:after {
  background-color: #079DAD;
}
.input__radio:checked:disabled + .input__radio--text:after {
  background-color: #FFFFFF;
}
.input__radio:checked:disabled + .input__radio--text:hover:after {
  background-color: #FFFFFF;
}
.input__radio:disabled + .input__radio--text {
  cursor: initial;
}
.input__radio:disabled + .input__radio--text:before {
  background-color: #ebebe4;
  border: 2px solid #ebebe4;
}
.input__radio:disabled + .input__radio--text:hover:after {
  background-color: #ebebe4;
}
.input__radio--container-inline {
  display: inline-block;
}
.input__radio--container-inline .input__radio--text {
  padding: 30px 0 0 0;
}
.input__radio--container-inline .input__radio--text:before, .input__radio--container-inline .input__radio--text:after {
  left: 50%;
  transform: translateX(-50%);
}
.input__radio--container-inline .input__radio--text:before {
  top: 0;
}
.input__radio--text:hover:after {
  background-color: var(--tisc-border-primary);
  display: block;
}
.input__radio--text:before {
  border-radius: 50%;
}
.input__radio--text:after {
  left: 5px;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #079DAD;
}

.input__toggle:checked + .input__toggle--switch {
  background-color: #c5e4ed;
}
.input__toggle:checked + .input__toggle--switch:before {
  transform: translateY(-5px) translateX(35px);
  background-color: #079DAD;
  box-shadow: 0 0 6px 0px #5BC6D1;
}
.input__toggle:disabled + .input__toggle--switch {
  background-color: #ebebe4;
}
.input__toggle:disabled + .input__toggle--switch:before {
  background-color: #bebebe;
  box-shadow: none;
}
.input__toggle:focus + .input__toggle--switch {
  box-shadow: 0 0 1px #2196F3;
}
.input__toggle--container {
  position: relative;
}
.input__toggle--container-inline {
  position: relative;
  display: inline-block;
}
.input__toggle--container-inline .input__toggle--text {
  padding: 30px 0 0 0;
  margin: 0px 20px;
}
.input__toggle--container-inline .input__toggle--text:before, .input__toggle--container-inline .input__toggle--text:after {
  left: 50%;
  transform: translateX(-50%);
}
.input__toggle--container-inline .input__toggle--text:before {
  top: 0;
}
.input__toggle--container-inline .input__toggle--switch {
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}
.input__toggle--switch {
  position: absolute;
  cursor: pointer;
  height: 15px;
  width: 60px;
  top: 50%;
  left: 10px;
  background-color: #7A7F7D;
  transition: 0.4s;
  border-radius: 34px;
  transform: translateY(-50%);
}
.input__toggle--switch:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  transform: translateY(-5px);
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 0 6px 0px var(--tisc-box-shadow);
}
.input__toggle--text {
  margin: 10px 0 10px 60px;
}

.input__select {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--tisc-input);
  color: var(--tisc-text-primary);
  cursor: pointer;
  width: 100%;
}
.input__select::-ms-expand {
  display: none;
}
.input__select--container {
  background-color: var(--tisc-input);
  position: relative;
}
.input__select--container:before {
  font-family: "Font Awesome 5 Free";
  content: "";
  font-weight: 900;
  position: absolute;
  top: 13px;
  right: 10px;
}

.menu__container {
  position: relative;
}

.bars {
  height: 14px;
  width: 18px;
  display: inline-block;
  padding: 5px;
  border-radius: 3px;
}
.bars:hover {
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.bars.open .bar:first-of-type {
  animation: menuOpen 0.3s;
  transform: translate(0, 6px) rotate(45deg);
}
.bars.open .bar:nth-child(2) {
  opacity: 0;
}
.bars.open .bar:last-of-type {
  animation: menuOpenBottom 0.3s;
  transform: translate(0, -6px) rotate(-45deg);
}
.bars.closing .bar:first-of-type {
  animation: menuClose 0.3s;
  transform: translate(0, 0) rotate(0deg);
}
.bars.closing .bar:last-of-type {
  animation: menuCloseBottom 0.3s;
  transform: translate(0, 0) rotate(0deg);
}
@keyframes menuOpen {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  60% {
    transform: translate(0, 6px) rotate(0deg);
  }
  100% {
    transform: translate(0, 6px) rotate(45deg);
  }
}
@keyframes menuOpenBottom {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  60% {
    transform: translate(0, -6px) rotate(0deg);
  }
  100% {
    transform: translate(0, -6px) rotate(-45deg);
  }
}
@keyframes menuClose {
  0% {
    transform: translate(0, 6px) rotate(45deg);
  }
  60% {
    transform: translate(0, 6px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes menuCloseBottom {
  0% {
    transform: translate(0, -6px) rotate(-45deg);
  }
  60% {
    transform: translate(0, -6px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.bar {
  width: 18px;
  margin: 4px 0;
  display: block;
  height: 2px;
  background: var(--tisc-text-secondary);
  border-radius: 5px;
}
.bar:last-of-type {
  margin-bottom: 0;
}
.bar:nth-child(2) {
  opacity: 1;
  transition-delay: 0.18s;
}
.bar:first-of-type {
  margin-top: 0;
}

.nav {
  background: var(--tisc-bg-secondary);
  position: absolute;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 3px 0;
  width: 192px;
  border-radius: 6px;
  border: 0.1px solid var(--tisc-border-primary);
  color: var(--tisc-text-secondary);
  transform-origin: top left;
  z-index: 999;
}
.nav.right {
  transform-origin: top right;
  right: calc( 100% - 28px );
  text-align: right;
}
.nav.open {
  display: block;
  animation: open 0.1s;
}
.nav.closing {
  transform-origin: top left;
  animation: closing 0.1s;
}
.nav.close {
  display: none;
}
.nav li {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 15px;
  font-family: "Open Sans", sans-serif;
}
.nav li a {
  color: #374151;
}
.nav li:hover {
  background: var(--tisc-hover-secondary);
}
.nav li:hover a {
  text-decoration: none;
}
@keyframes open {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes closing {
  0% {
    display: block;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
    display: none;
  }
}

.menu_overlay {
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  display: block;
  position: absolute;
  top: 0;
}

.menu__container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  color: var(--tisc-text-secondary);
}

.menu i {
  margin: 0 5px;
  transition: all 0.2s;
  transform-origin: center;
}
.menu.open i {
  transform: translateY(-1px) rotate(180deg);
}

.nav {
  background: var(--tisc-bg-secondary);
  position: absolute;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 3px 0;
  width: 192px;
  border-radius: 6px;
  border: 0.1px solid var(--tisc-border-primary);
  color: var(--tisc-text-secondary);
  transform-origin: top left;
  z-index: 999;
}
.nav.right {
  transform-origin: top right;
  right: 0;
  text-align: right;
}
.nav.open {
  display: block;
  animation: open 0.1s;
}
.nav.closing {
  transform-origin: top left;
  animation: closing 0.1s;
}
.nav.close {
  display: none;
}
.nav li {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 15px;
  font-family: "Open Sans", sans-serif;
}
.nav li a {
  color: #374151;
}
.nav li:hover {
  background: var(--tisc-hover-secondary);
}
.nav li:hover a {
  text-decoration: none;
}
@keyframes open {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes closing {
  0% {
    display: block;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
    display: none;
  }
}

.country {
  display: inline-flex;
  height: 1.5rem;
  align-items: center;
}
.country__flag {
  width: 1.5rem;
  height: 100%;
}
.country__name {
  margin-left: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--tisc-text-primary);
}

.footer {
  display: block;
  color: #f9fafb;
  background-color: #111827;
  padding: 0 20px;
}
.footer__content {
  max-width: 1024px;
  margin: 0 auto;
  padding: 5rem 0;
}
.footer__logo {
  display: inline-block;
  color: white;
  margin: 10px 10px 0 0;
}
.footer__logo-img {
  display: inline-block;
  width: 8rem;
}
.footer__logo .hidden {
  display: none;
}
.footer__logo:hover {
  color: #c2e6ed;
}
.footer__copyright {
  max-width: 1024px;
  margin: 0 auto;
  padding-bottom: 1.25rem;
  text-align: right;
}

.result {
  display: block;
  border: 2px solid var(--tisc-border-primary);
  background: var(--tisc-bg-secondary);
  padding: 1.25rem;
  color: var(--tisc-text-primary);
  margin-bottom: 1.25rem;
}
.result h2,
.result p {
  margin: 0;
}
.result h2 {
  font-size: 16px;
}
.result p {
  display: flex;
  align-items: center;
  line-height: 24px;
}
.result p span:last-child {
  margin-left: 1.25rem;
}
.result:hover {
  text-decoration: none;
  cursor: pointer;
  background: var(--tisc-hover-secondary);
}

.content__container {
  display: flex;
}
.content__container .aside {
  width: 24rem;
  padding: 2em 1em;
  background: var(--tisc-bg-secondary);
}
.content__container .aside--left {
  order: 0;
}
.content__container .aside--right {
  order: 1;
}
.content__container .aside .aside__content {
  position: -webkit-sticky;
  position: sticky;
  top: 110px;
}
.content__container .main {
  width: calc(100% - 5em);
  display: block;
  padding: 2.5em;
  background: var(--tisc-bg-primary);
}
@media (max-width: 736px) {
  .content__container {
    display: block;
  }
  .content__container .aside {
    width: calc(100% - 2.5em);
  }
}

.skeleton {
  margin-bottom: 20px;
}

.section-line, .section__heading-line {
  height: 25px;
  width: 90%;
  margin: 3px 0;
}

.section__heading-line {
  width: 87%;
}

.profile-container {
  display: flex;
  flex-direction: column;
  width: 250px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.profile-container .lines {
  display: inline-flex;
  height: 100px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
}
.profile-container .lines span, .profile-container .lines .line {
  width: 70%;
  height: 15%;
  margin: 3px 0;
}
.profile-container .box {
  width: 150px;
  height: 150px;
}

.profile-container--inline {
  display: flex;
  margin-bottom: 20px;
}
.profile-container--inline .box {
  height: 150px;
  width: 150px;
}
.profile-container--inline .lines {
  display: inline-flex;
  height: 100px;
  padding: 25px 0;
  margin-left: 10px;
  width: calc(100% - 100px);
  flex-direction: column;
  justify-content: center;
}
.profile-container--inline .lines span, .profile-container--inline .lines .line {
  width: 70%;
  height: 15%;
  margin: 3px 0;
}

.container {
  border: 2px solid var(--tisc-border-primary);
  padding: 20px;
  margin-bottom: 20px;
}

.search-line {
  margin: 2.5px 0 0 0;
  height: 25px;
}
.search-line:first-of-type {
  width: 100%;
}
.search-line:nth-child(2) {
  width: 25px;
  margin-right: 5px;
}
.search-line:nth-child(3) {
  width: 60%;
}

.shine {
  background: var(--tisc-bg-third);
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.shine::after {
  display: block;
  position: absolute;
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  width: 600px;
  height: 100%;
  animation: shimmer 1.5s infinite;
  transform: translateX(-200%);
}

.dark-theme .shine::after {
  background: linear-gradient(90deg, rgba(85, 102, 119, 0) 0, rgba(85, 102, 119, 0.2) 20%, rgba(85, 102, 119, 0.5) 60%, rgba(85, 102, 119, 0));
}

@keyframes shimmer {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(200%);
  }
}