
@import 'quasar.variables'

.csc-phone-number
    font-weight bold

.csc-main-spinner
    text-align center

.csc-inline-alert
    box-shadow none
    .q-alert
        box-shadow none

.q-field
    position relative

.csc-toggle-disabled
    .q-option-label
        color $faded

.csc-item-field
    .csc-item-value
        display inline-block
        margin-right 4px
    .csc-item-value::after
        content ','
    .csc-item-value:last-child:after
        content ''

.csc-item-label
    font-weight normal

.csc-item-value
    font-weight bold

.csc-form-info
    display block

    .csc-info-text
        display inline-block

.csc-form
    position relative
    .csc-form-actions
        margin-top 16px

.margin-xs
    margin 8px

.margin-sm
    margin 16px

@media (max-width: $breakpoint-sm)
    .page.csc-list-page
        padding 0
        padding-top 16px

    .page.csc-simple-page
        padding 36px

.csc-no-entities
    margin 15px
    color $body-color

.csc-important
    font-weight bold

.csc-entity
    position relative

    .q-btn
        .on-left
            margin-right 0

    .csc-entity-title .q-chip-main
        color white

    .csc-entity-title-text
        padding-left 6px

    .q-card-title
        color white

    .q-card-title-extra
        .q-btn
            padding-left 8px
            padding-right 8px

.csc-form-field
    margin-bottom 40px

    .q-field-icon
        color $primary

.csc-black-label
    color black

.csc-list-item.q-item
    align-items center
    color $body-color
    padding $flex-gutter-sm
    padding-left $flex-gutter-sm * 1.4
    .q-item-label
        color $body-color
        span
            color $body-color
    .q-item-sublabel
        color $body-color
        span
            color $body-color

.csc-list-item.csc-item-collapsed.q-item
    .q-item-main
        margin-left $flex-gutter-sm * 1.4
    .q-item-side-left
        min-width auto

.csc-list-form
    padding $flex-gutter-sm
.csc-username
    font-weight bold

.csc-list-actions-pinned.q-item-side-right
    position absolute
    top 50%
    right $flex-gutter-sm
    margin-top -22px
    .q-btn
        padding-left $flex-gutter-xs
        padding-right $flex-gutter-xs
        .q-icon
            margin 0
.csc-item-expanded
    .csc-list-actions-pinned.q-item-side-right
        top $flex-gutter-sm
        right $flex-gutter-sm
        margin auto
    .q-item-main
        padding-top $flex-gutter-md

.csc-form-actions-spinner
    display flex
    align-items center

.csc-item-buttons
    .q-btn
        padding-left $flex-gutter-xs
        padding-right $flex-gutter-xs
        .on-left
            margin-right 0


.csc-item-buttons-menu
    .q-item-side
        min-width auto

.csc-item-loader
    position absolute
    top 0
    bottom 0
.csc-list-message
    text-align center

.q-inner-loading
    background $main-menu-background

.csc-item-title
    font-weight bold
    text-overflow ellipsis
    .csc-item-label
        font-weight bold
        vertical-align middle
    i
        vertical-align middle
.csc-item-subtitle
    .csc-item-label
        font-weight normal
    .csc-item-value
        font-weight bold

.q-chip.text-white
    color $dark
    .q-chip-main
        color $dark
    .q-chip-side
        color $dark

.csc-item-highlight,
.csc-item-highlight:hover
    background alpha($primary, 0.3) !important

.csc-conf-full-height
    position relative
    top 0
    min-height "calc(100vh - %s)" % (2 * $call-footer-height + $call-footer-height / 2)

.csc-button.q-btn
.csc-conf-button.q-btn
    .q-btn-inner
        color black

input.q-input-target
    height auto

.csc-additional
    padding-right $flex-gutter-lg
    padding-bottom $flex-gutter-xs
    .q-option-label
        color $light

.csc-list-collapsible
    margin-top $flex-gutter-md
    .q-item
        padding-left 0
        margin-bottom 10px
    .q-item-section
        padding 10px 0 !important
    .q-item-icon
        color $primary
    .csc-sublabel
        color $light
        margin-bottom $flex-gutter-sm
    .q-item-label
        padding-left $flex-gutter-sm
    .q-item-link
        background alpha(white, 0.04)
    .q-item-link:hover
        background alpha(white, 0.10)

.csc-collapsible-label-warning
    .q-item-link
        border-left .2rem solid $negative
    .csc-item-invalid
        border-bottom .2rem solid $negative

.animated.faster
    animation-duration 500ms

.csc-add-button
    margin-bottom $flex-gutter-sm

.csc-input-btn.q-btn
    padding-left $flex-gutter-xs
    padding-right $flex-gutter-xs
    .q-btn-inner
        i
            margin 0

.csc-conf-avatar
    font-size 137px
    color $conf-participant-icon-color
    padding-left 11px
    background-color transparent;
    box-shadow none
    position relative
    width 100%
    height 100%
    top 0px
    left -22px
    right 0
    margin auto
    @media (max-width: $breakpoint-sm)
        font-size 60px
        left -16px
        top -30px
.csc-conf-selected-avatar
    width: 220px;
    height: 220px;
    font-size 220px
    color $conf-participant-icon-color
    background-color transparent;
    box-shadow none
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    margin auto
.csc-conf-participant-cont
    margin-bottom 25px
    width 115px
    height 115px
    background $conf-participant-box-color
    cursor pointer
    @media (max-width: $breakpoint-sm)
        width 50px
        height 50px
        margin-bottom 10px
    .csc-conf-participants-item-title
      position relative
      background white
      bottom 24px
      text-align center
      padding 0
      background $conf-participant-box-color
      @media (max-width: $breakpoint-sm)
          display none
      .q-card-title
        color $primary
        font-size 12px
        line-height 24px
  .csc-media-cont
      height 100% !important
      width 100% !important
      video
        height 100%
        position relative
        left 50% !important
        transform translateX(-50%)

.csc-text-action
    color $primary
    cursor pointer
    font-weight bold

.csc-cf-row
    margin-bottom $flex-gutter-sm
