// app global css in SCSS form
.bg-t-primary {
  background: $t-bg-color !important;
}

.bg-t-secondary {
  background: $t-secondary-bg-color !important;
}

.bg-t-bottom-bar {
  background: $t-bottom-bar-bg-color !important;
}

.t-section-separator {
  color: $t-section-separator-color !important;
}

.t-text {
  color: $t-text-color !important;
}

.t-text-hint {
  color: $t-hint-color !important;
}

.t-text-subtitle {
  color: $t-subtitle-text-color !important;
}

.t-text-accent {
  color: $t-accent-text-color !important;
}

.t-text-section-header {
  color: $t-section-header-text-color !important;
}

.text-brand {
  color: $brand !important;
}
  
.bg-brand {
  background: $brand !important;
}

.bg-base {
  background: $base-bg !important;
}

.text-tgcolor {
  color: $tgcolor !important;
}
  
.bg-tgcolor {
  background: $tgcolor !important;
}

$base-width: 100;
@while $base-width > 0 {
   .w#{$base-width} { width: #{$base-width}+'%'; }
   $base-width: $base-width - 10;
}

body, html, #q-app {
  font-family: $typography-font-family;
  background-color: transparent !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  font-family: inherit;
}

:root {
  --body-width: 600px;
  --top-radius: 12px;
  --logo-color-bg-white: grey;
  --dynamic-font-size: 16px;

  --t-bg-color: #{$t-bg-color};
  --t-secondary-bg-color: #{$t-secondary-bg-color};
  --t-section-bg-color: #{$t-section-bg-color};
  --t-header-bg-color: #{$t-header-bg-color};
  --t-bottom-bar-bg-color: #{$t-bottom-bar-bg-color};

  --t-text-color: #{$t-text-color};
  --t-hint-color: #{$t-hint-color};
  --t-subtitle-text-color: #{$t-subtitle-text-color};
  --t-accent-text-color: #{$t-accent-text-color};
  --t-section-header-text-color: #{$t-section-header-text-color};

  --t-button-color: #{$t-button-color};
  --t-button-text-color: #{$t-button-text-color};
  --t-link-color: #{$t-link-color};
  --t-destructive-text-color: #{$t-destructive-text-color};

  --t-section-separator-color: #{$t-section-separator-color};
}

body {
  overflow: hidden !important;
}

.main-content {
  max-width: var(--body-width);
  margin: 0 auto;
}

.projects-header {
  background-color: #eee;
}

.top-rounded-card {
  border-top-left-radius: var(--top-radius) !important;
  border-top-right-radius: var(--top-radius) !important;
}

.rounded-card {
  border-radius: var(--top-radius) !important;
}

.rounded-fix {
  border-radius: 1000px;
  overflow: hidden;
}

.orline {
  display: flex;
  flex-direction: row;
}     

.orline:before,
.orline:after {
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}

.fix-disabled-btn.q-btn[disabled]:not(.q-btn--flat) {
  background-color: $grey-5 !important;
  opacity: 1 !important;
}

.fix-disabled-btn.q-btn.q-btn--flat[disabled] {
  color: $grey-9 !important;
  opacity: 1;
}

.q-field--filled {
  .q-field__control {
    background: $t-secondary-bg-color !important;
    transition: none !important;
    
    &:hover {
      background: $t-secondary-bg-color !important;
    }
  }

  &.q-field--focused {
    .q-field__control {
      background: $t-secondary-bg-color !important;
    }
  }
  
  .q-field__control {
    &:before {
      border-bottom: none !important;
      display: none !important;
    }
    
    &:after {
      border-bottom: none !important;
      display: none !important;
      transform: none !important;
    }
  }
  
  .q-field__control-container {
    padding-bottom: 0 !important;
  }
  
  input, textarea {
    caret-color: var(--q-primary) !important;
  }
  
  &.q-field--focused {
    input, textarea {
      caret-color: var(--q-primary) !important;
    }
  }
}

@mixin shadow-t($opacity: 0.12, $blur: 16px, $spread: -4px) {
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, $opacity), 
              0 0 $blur $spread rgba(0, 0, 0, $opacity * 0.67) !important;
}

.shadow-t {
  & {
    @include shadow-t;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  &.q-btn {
    overflow: visible !important;
    
    &:hover {
      @include shadow-t(0.16, 20px, -2px);
    }
    
    &:active {
      @include shadow-t(0.08, 12px, -6px);
      transform: translateY(1px);
    }
    
    &.q-btn--flat,
    &.q-btn--outline {
      box-shadow: none;
      
      &.shadow-t {
        @include shadow-t;
      }
    }
  }
  
  &.q-field {
    .q-field__control {
      overflow: visible !important;
      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    &.q-field--focused {
      .q-field__control {
        @include shadow-t(0.2, 24px, 0px);
      }
    }
  }
  
  &.q-card {
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      @include shadow-t(0.16, 24px, 0px);
    }
  }
  
  &.div
  &.q-menu,
  &.q-popup,
  &.q-dialog {
    @include shadow-t(0.2, 24px, 0px);
  }
}


@font-face {
  font-family: 'myFont';
  src: url(./fonts/Inter-Regular.woff2);
}

.pn-icon {
  font-family: 'pn-icon';
  font-style: normal;
}

@font-face {
  font-family: 'pn-icon';
  src: url(./fonts/pn.woff) format("woff")
}

.icon-file-default:before {
  content: "\e900";
}
.icon-file-doc:before {
  content: "\e901";
}
.icon-file-xls:before {
  content: "\e902";
}
.icon-file-ppt:before {
  content: "\e903";
}
.icon-file-vsd:before {
  content: "\e904";
}
.icon-file-pdf:before {
  content: "\e905";
}
.icon-file-archive:before {
  content: "\e906";
}
.icon-file-img:before {
  content: "\e907";
}
.icon-file-dwg:before {
  content: "\e908";
}
.icon-file-skp:before {
  content: "\e909";
}
.icon-file-ttf:before {
  content: "\e90a";
}
.icon-file-txt:before {
  content: "\e90b";
}
.icon-file-audio:before {
  content: "\e90c";
}
.icon-file-video:before {
  content: "\e90d";
}
.icon-file-code:before {
  content: "\e90e";
}
