ldx-widgets/styles/widgets.styl

widgets

//----------------------------------
// Spinner
//----------------------------------
.spinner-wrapper
  width: 100%
  height: 100%
  position: relative

  .spinner
    top: 50%
    left: 50%

//----------------------------------
// Search Input
//----------------------------------
.search-input-wrap
  position: relative
  width: 260px
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box
  
.search-input
  border-radius: 5px
  margin-right: 0px
  padding-right: 20px
  padding-left: 5px
  height: 100%
  width: 100%
  
  &.loading-spinner 
    + .input-spinner
      right: 35px

.search-clear
  absPos(top: 50%, right: 5px)
  margin-top: -8px
  width: 16px
  height: 16px
  //margin-left: -20px
  border-radius: 7px
  background-image: url('../images/search_clear.svg')
  background-position: 2px 2px
  background-repeat: no-repeat
  background-size: 13px
  color: white
  border: none

.search-clear:focus
  outline: none

//----------------------------------
// Toggle Button Array
//----------------------------------
.toggle-button
  color: textColor3
  border-radius: 0px
  height: 28px
  padding-left: 20px
  padding-right: 20px
  margin: 0px
  line-height: 21px
  background-color: white
  border-bottom: 1px solid forward1
  border-top: 1px solid forward1
  border-right: 1px solid forward1
  
  &.is-selected
    background-color: forwardSelected4
    color: white
  &.is-selected:hover
    background-color: forwardSelected4
    color: white

  &:hover
    background-color: forwardHover4
  &:focus
    outline: none

  &:first-child
    border-left: 1px solid forward1
    border-top-left-radius: 5px
    border-bottom-left-radius: 5px

  &:last-child
    border-top-right-radius: 5px
    border-bottom-right-radius: 5px

.toggle-tab
  float: left
  height: 37px
  padding: 5px
  text-align: center
  border-bottom: 4px solid rgb(125,125,125)
  color: rgb(125,125,125)
  font-size: 17px

  &:focus
    outline: none
    border-bottom-width: 4px
  &:disabled
    border-bottom: 4px solid rgb(210,210,210)
    color: rgb(210,210,210)

  &.is-selected
    color: forwardTextLink
    border-bottom-color: forwardTextLink
    background-color: canvas5

.toggle-array
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box
  padding: 0px
  clearfix()
  
  &.compact
    .toggle-button
      font-size: 9px
      padding-left: 10px
      padding-right: 10px

//----------------------------------
// Multi Select
//----------------------------------

//.multiselect

.multiselect-list-in
  border-bottom: 1px solid forward1

.multiselect-list-out
  height: 112px
  overflow-y: auto
  overflow-x: hidden

.multiselect-edit
  color: textColor3
  height: 28px
  font-size: 13px
  padding-left: 0px

.multiselect-alter
  width: 13px
  height: 13px
  margin-top: -2px
  margin-right: 5px
  border-radius: 7px
  background-image: url('../images/search_clear.svg')
  background-position: 0px 0px
  background-repeat: no-repeat
  background-size: 13px
  color: white
  border: none


.multiselect-option
  position: relative
  border: none
  height: 28px
  line-height 28px
  cursor: pointer
  padding-left: 20px
  //&.is-active
  //  font-weight: bold

.multiselect-option-label 
  absPos(top: 50%, right: 5px)
  height: 28px
  margin-top: -14px
  transition: left .1s linear
  nowrap()

.multiselect-none
  height: 28px
  line-height 28px
  color: textColor3
  padding-left: 5px
  line-height: 28px

.multiselect-default
  absPos(top: 50%, right: 0)
  color: textColor3
  border-radius: 5px
  height: 22px
  padding-left: 10px
  padding-right: 10px
  line-height: 18px
  background-color: none
  border: none
  margin-top: -11px
  &.is-selected
    background-color: forwardSelected4
    color: white
  &:focus
    outline: none

.multi-select-filter
  position: relative
  margin: 0px auto
  //width: 150px;
  margin-top: 2px

//----------------------------------
// Dialogue Box
//----------------------------------

.dialogue-container
  absPos(41px,0,0,0)
  background-color: rgba(0,0,0,.17)
  width: 100%
  height: 100%
  z-index: 1000
  overflow: hidden
  
  &.light-backdrop
    background-color: rgba(0,0,0,.1)


.dialogue-box
  absPos()
  background-color: white
  left: 50%
  border-bottom-right-radius: 4px
  border-bottom-left-radius: 4px
  .message
    padding: 10px
    absPos(0,0,30px,0)
    color: textColor2
    font-size: 14px
    word-wrap: break-word
    overflow: ellipsis
  button
    height: 30px
    width: 50%
    line-height: 26px
    text-align: center
    font-size: 13px
    color: forwardTextLink
    border-top: 1px solid forward2
    &:focus
      outline: none
  .okay-btn
    absPos(bottom: 0, left: 0)
    border-right: 1px solid forward2
  .cancel-btn
    absPos(bottom: 0, right: 0)

//----------------------------------
// Select Popover & Plain Popover
//----------------------------------

.select-pvr, .plain-pvr
  overflow: auto
  font-size: 15px
  absPos()
  
  .nib
    absPos(top: -2px)
    margin-left: -10px
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ebebeb transparent;
    z-index: 2
    
    &:after
      content: ""
      absPos(top: 1px, left: -10px)
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 10px 10px;
      border-color: transparent transparent white transparent;
      
    &.top
      top: auto
      bottom: -10px
      transform: rotate(180deg)
      
    &.headerNib
      &:after
        border-color: transparent transparent forward3 transparent
  
  .inner
    absPos(top: 8px, right: 0, bottom: 0, left: 0)
    background-color: white
    border-radius: 5px
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4)
    border: 1px solid #ebebeb
    z-index: 1
    overflow-y: auto
  
  .select-pvr-option, .plain-pvr-content-item
    box-sizing: border-box
    cursor: pointer
    position: relative
    padding-left: 6px
    padding-right: 6px
    color: textColor6
    border-top: 1px solid textColor4
    user-select: none
    
    &.no-wrap
      .label
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis

    &.is-selected
      color: textColor2
      .main-label:after
        content: ''
        background: url('../images/CheckMark.svg') center center no-repeat
        absPos(right: 0px, top: 0, bottom: 0)
        width: 16px
      &:hover
        background-color: transparent
        cursor: default
        
    &.is-disabled
      color: forward1
      
      &:hover
        background-color: transparent
        cursor: default

    &:hover
      background-color: optionHoverLightBlue
      
    &:first-child
      border-top-right-radius: 5px
      border-top-left-radius: 5px
      border-top: none
      
    &:last-child
      border-bottom-right-radius: 5px
      border-bottom-left-radius: 5px
      border-bottom: none
      
    &.important
      color: inputError
      
    .has-info
      color: textColor2
      
    &.is-sub-header
      color: textColor2
      background-color: listHeaderGray
      cursor: default
      &:hover
        background-color: listHeaderGray
        cursor: default
    
    &.is-indented
      text-indent: 10px
      
    .main-label
      position: relative

      .sub-label
        font-size: 12px
        color: textLink
        margin-top: -4px
        
    &.has-sublabel
      .main-label
        padding-top: 3px
        
    &.action-menu
      background-position: 4px center
      background-repeat: no-repeat
      text-align: left
      padding-left: 35px
      &.chart-note
        background-image: url('../images/action_icons/addNoteIcon.svg')
      &.consent
        background-image: url('../images/action_icons/consentIcon.svg')
      &.programs
        background-image: url('../images/action_icons/programsIcon.svg')
  
  .info 
    float: right
    color: textColor6
    font-size: 12px
    padding-right: 25px
        
  .plain-pvr-content-item
    cursor: default
    font-size: 12px
    color: textColor2
    border: none
    
    &:hover
      background-color: white
      
    &.header
      background-color: forward3
      text-align: center 
      height: 34px
      line-height: 34px
      color: textColor2
      font-size: 14px
      border-bottom: 1px solid textColor4
      &:hover
        background-color: forward3
      
  .pvr-info-label
    nowrap()
    width: 40%
    float: right
  .pvr-info
    float: right
    text-align: left
    width: 60%
    color: textColor6
    min-height: 16px
    
    &.header
      background-color: forward3
      &:hover
        background-color: forward3    
  
  .no-items 
    height: 30px
    line-height: 20px
    font-style: italic
    color: forwardText2
    padding: 5px
    text-align: center
    background-color: white

.plain-pvr
  .inner 
    min-height: 80px
  .inner-rows
    padding-top: 8px
    
//----------------------------------
// Info Modal
//----------------------------------
.info-modal
  absPos(top: 23%, left: 42%)
  width: 500px
  border-radius: 5px
  background-color: white
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4)
  border-color: canvas3
  border-width: 1px 
  border-style: solid
  transition: height 300ms linear, margin-top 300ms linear
  .modal-body
    padding: 0
  .modal-header
    text-align: center    
    color: #666
    font-size: 14px
  .done 
    absPos(top: 0, right: 5px)
  .inner-rows
    padding-top: 8px
  .plain-pvr-content-item
    cursor: default
    font-size: 12px
    color: textColor2
    border: none  
    padding-left: 6px
    padding-right: 6px
  .pvr-info-label
    nowrap()
    width: 40%
    float: right
  .pvr-info
    float: right
    text-align: left
    width: 60%
    color: textColor6
    min-height: 16px
    
  .no-items 
    height: 30px
    line-height: 20px
    font-style: italic
    color: forwardText2
    padding: 15px
    text-align: center
    background-color: white

//----------------------------------
// Confirm
//----------------------------------
.confirm
  .message
    padding: 10px
    absPos(0,0,30px,0)
    color: textColor2
    font-size: 14px
  button
    height: 30px
    width: 50%
    line-height: 26px
    text-align: center
    font-size: 13px
    color: forwardTextLink
    border-top: 1px solid forward2
    &:focus
      outline: none
  .okay-btn
    absPos(bottom: 0, left: 0)
    border-right: 1px solid forward2
  .cancel-btn
    absPos(bottom: 0, right: 0)
      
    
//----------------------------------
// Datepicker
//----------------------------------
@require 'react-datepicker.min.css'

.datepicker-wrapper
  position: relative
  
  &:after
    content: url('../images/datepicker.png')
    absPos(top: 4px, right: 5px)
    pointer-events: none

  .react-datepicker__input-container
    display: block

//----------------------------------
// Scroll loader
//----------------------------------

.scroll-wrapper
  absPos(top: 0, right: 0, bottom: 0, left: 0)

.thumb-btn-vertical-track
  absPos(top: 35px, right: 0, bottom: 0)
  width: 17px
  z-index: 5

.thumb-btn-vertical
  absPos(right: 2px)
  width: 10px
  background-color: rgba(0,0,0,.5)
  transition: height 200ms linear
  border-radius: 3px
  &:focus
    outline: none
    
  &.is-hidden
    display: none
    
//----------------------------------
// Checkbox input
//----------------------------------
.checkbox-input
  border: none

.checkbox-input-label
  user-select: none
  line-height: 28px


//----------------------------------
// Generic Results list
//----------------------------------
.results-container
  absPos(41px, 0, 0, 0)
  padding: 0px
  margin: 0px
  overflow: auto
  cursor: pointer

.results-container li
  position: relative
  height: 30px
  border-bottom: 1px solid forward2
  background: forward4
  color: textColor3
  
.results-container li.is-focused
  background: forwardHover4
  color: textColor2

.row-title
  absPos(top: 50%, left: 15px)
  width: 40%;
  height: 14px;
  margin-top: -8px
  font-size: 15px

.row-desc
  absPos(top: 50%, right: 15px)
  width: 40%;
  height: 13px;
  margin-top: -7px
  font-size: 13px
  color: textColor3
  text-align: right

//----------------------------------
// Confirm Save
//----------------------------------
.confirm-save-wrap
  absPos(0,0,0,0)
  background-color: rgba(0,0,0,.15)
  z-index: 10
  
  .confirm-check
    absPos(top: 50%, left: 50%)
    width: 60px
    height: 60px
    margin-left: -30px
    margin-top: -30px
    background: url('../images/circle_check.svg') center center no-repeat
    background-size: 100%

    &.failed
      background-image: url('../images/circle_x.svg')
    &.warning
      background-image: url('../images/warning.svg')

  .confirm-frame
    background-color: rgba(0,0,0,.5) 
    absPos(top: 50%, left: 50%)
    width: 100px
    height: 100px
    margin-left: -50px
    margin-top: -50px
    border-radius: 5px
    color: red

  &.has-message
    .confirm-frame
      absPos(all: 0)
      width: auto
      height: auto
      margin: 0
      border-top-right-radius: 0
      border-top-left-radius: 0

  .confirm-check-message
    absPos(top: 35%, left: 0, right: 0)
    margin-top: -10px
    text-align: center
    height: 30px
    line-height: 30px
    color: white
    white-space: nowrap
    box-sizing: border-box

    &:before
      content: ''
      display: inline-block
      background: url('../images/circle_check.svg') 0 0 no-repeat
      background-size: 100%
      vertical-align: middle
      line-height: normal
      width: 20px
      margin-right: 5px
      height: 23px
    &.failed
      line-height: 22px
      white-space: normal
      padding: 0px 20px
    &.failed:before
      background-image: url('../images/circle_x.svg')
      height: 30px
      width: 30px
      margin-bottom: 5px
    &.warning:before
      background-image: url('../images/warning.svg')

    .confirm-message
      display: inline-block
      font-size: 14px

  .message-dismiss
    absPos(bottom: 8px, left: 50%)
    width: 150px
    margin-left: -75px

    button
      background: #949494
      width: 100%
      color: #fff
      padding: 8px 32px
      border-radius: 3px
      font-size: 13px

//----------------------------------
// Password input
//----------------------------------
.password-reqs
  absPos()
  width: 250px
  margin-left: 20px
  
  .req-item
    margin-bottom: 3px
    
    .req-text
      vertical-align: middle
      
  .icon-status
    width: 16px
    height: 16px
    vertical-align: middle
    display: inline-block
    position: relative
    margin-right: 4px
    background-repeat: no-repeat
    background-size: 16px

    &.error
      background-image: url('../images/circle_x.svg')
        
    &.success
      background-image: url('../images/circle_check.svg')
  
.password-reqs-header
  margin: 0 0 5px 20px

.password-confirm
  margin-top: 5px  

//----------------------------------
// Type-ahead
//----------------------------------
.input-type-ahead
  position: relative
  z-index: 10
  
  *
    box-sizing: border-box
  
  .type-ahead-header
    height: 15px
    padding: 8px
    background: forward3
    position: relative 
    z-index: 9
    border-bottom: 1px solid forward1
  
  .type-ahead-results
    absPos(top: 100%, left: 0, right: 0)
    border: 1px solid forward2
    overflow: auto
    background: white
    
    li
      border: 1px solid transparent
      box-sizing: border-box
      border-top-color: forward2
      
      &:first-child
        border-top-color: transparent
      
      &.is-selected, &:active
        background-color: #DBEAF7
        border: 1px solid #9FC5F8
      
      &:hover
        cursor: pointer

//----------------------------------     
// Patient modules
//----------------------------------

.mode-container
  absPos(0,0,0,0)
  overflow-y: auto
  overflow-x: hidden
  background: white

.content-wrapper
  position: relative
  margin: 0px auto
  width: 100%
  min-width: 550px
  max-width: 2200px

.column
  absPos(top: 0, bottom: 0)
  &.layout-1
    &.col-0
      left: 0
      right: 0
  &.layout-2
    &.col-0
      left: 0
      right: 50%
    &.col-1
      left: 50%
      right: 0
  &.layout-3
    &.col-0
      left: 0
      width: 33.3%
    &.col-1
      left: 33.3%
      width: 33.3%
    &.col-2
      left: 66.6%
      right: 0
  &.layout-4
    &.col-0
      left: 0
      width: 25%
    &.col-1
      left: 25%
      width: 25%
    &.col-2
      left: 50%
      width: 25%
    &.col-3
      left: 75%
      right: 0

  

.summary-module
  border: 1px solid forward1
  border-radius: 8px
  margin: 20px 5px 0px 5px
  width: calc(100% - 10px)
  min-height: 100px
  overflow: hidden
  &:last-child
    margin-bottom: 100px
  
.module-header
  position: relative
  width: 100%
  height: 44px
  line-height: 44px
  background-color: forward5
  border-bottom: 1px solid forward1
  margin: 0px
  
  &:first-child
    border-top-right-radius: 8px
    border-top-left-radius: 8px
  
  &:last-child
    border-bottom-right-radius: 8px
    border-bottom-left-radius: 8px
    border-bottom: none
  
  .title
    absPos(top: 0, right: 100px, bottom: 0, left: 100px)
    font-size: 16px
    font-weight: normal
    text-align: center
    color: forwardText2
    nowrap()
    
  .filter
    absPos(top: 0, bottom: 0, right: 5px)
    background: url('../images/flowsheet/chevron_down_teal.svg') 130px 20px no-repeat
    width: 120px
    color: textColor6
    text-align: right
    padding-right: 30px
    line-height: 46px
    cursor: pointer
    font-size: 14px
    
  .type
    absPos(top: 0, bottom: 0, left: 10px)
    display: inline-block
    color: teal
    text-align: left
    padding-right: 30px
    line-height: 46px
    cursor: pointer
    font-size: 14px
    &:after
      content: ''
      display: inline-block
      background: url('../images/flowsheet/chevron_down_teal.svg') center center no-repeat
      height: 10px
      width: 20px
      margin-left: 8px
  
  &.inner
    height: 30px
    line-height: 30px
    .title
      font-size: 13px
      
.module-loading{
  position: absolute
  width: 100%
  margin-top: 29px
}

.more-less
  line-height: 30px
  width: 100%
  text-align: center
  color: teal
  cursor: pointer
  
.reg-header
  position: relative
  width: 50%
  height: 44px
  line-height: 44px
  background-color: forward5
  border-bottom: 1px solid forward1
  margin: 0px
      

.summary-list
  border-bottom: 1px solid forward1
  min-height: 50px
  &:last-child
    border-bottom: none
  
  li
    position: relative
    box-sizing: border-box
    border-bottom: 1px solid forward2
    padding: 10px
    min-height: 36px
    clearfix()
    &:last-child
      border-bottom: none
    &.non-visit-item:hover
      background-color: forwardHover4
      cursor: pointer
    
  .more
    color: textColor3
  
  .no-items
    height: 30px
    line-height: 20px
    font-style: italic
    color: noDataGray
    padding: 5px
    text-align: center
  
  &:last-child
    li:last-child
      border-bottom: none
  
  .title
    width: calc(100% - 180px)
    float: left
    height: 16px
    line-height: 16px
    font-size: 14px
    color: textColor1
    font-weight: bold
    nowrap()
    &.high
      color: textAlert
    &.med
      color: orange
      font-weight: normal
    &.low
      color: textColor3
      font-weight: normal
    &.inactive
      color: textColor3
      font-style: italic
      font-weight: normal
    &.shift
      padding-left: 10px
      padding-top: 5px
    &.wrap
      overflow: visible
      white-space: normal
      text-overflow: unset
      height: auto
      width: 269px
    &.less-clearance
      width: calc(100% - 200px)
    &.capitalize
      text-transform: capitalize
      
  .breakglass
    float: left
    width: 14px
    height: 14px
    border: 0
    outline: 0
    background-repeat: no-repeat
    background-position: 0 0
    background-size: contain
    background-image: url('../images/lock_unlocked.svg')
    &.locked
      height: 17px
      background-image: url('../images/lock_sensitive_locked.svg')
    &.unlocked
      background-image: url('../images/lock_sensitive_unlocked.svg')
  
  .status
    width: 110px
    float: right
    text-align: right
    height: 16px
    line-height: 16px
    font-size: 13px
    color: labelGray
    &.external
      color: externalOrgBlue
  
  .date, .phone, .time
    width: 85px
    float: right
    text-align: right
    height: 16px
    line-height: 16px
    font-size: 13px
    color: textColor3
    &.external
      color: externalOrgBlue
      
  .alert-date
    width: 140px
    float: right
    text-align: right
    .status
      width: 70px
      float: left
      height: 16px
      line-height: 16px
      font-size: 13px
      color: labelGray
      &.external
        color: externalOrgBlue
    .date, .phone, .time
      width: 85px
      float: right
      text-align: right
      height: 16px
      line-height: 16px
      font-size: 13px
      color: textColor3
      &.external
        color: externalOrgBlue
  
  .phone
    width: 90px
      
  .date-label, .phone-label
    width: 70px
    float: left
    text-align: right
    height: 16px
    line-height: 16px
    font-size: 13px
    color: textColor3
    &.external
      color: externalOrgBlue
      
  .summary-label
    width: 100px
    float: left
    text-align: right
    font-size: 13px
    color: textColor3
    &.demographic
      text-align: left
      

  .demographic-data
    float: left
    text-align: center
  
  .phone-label
    width: 100px
    line-height: 16px
      
  .dates
    absPos(right: 15px)
    width: 157px
    text-align: right
    height: 48px
    font-size: 13px
    color: textColor3
    &.external
      color: externalOrgBlue
    &.shift
      padding-top: 5px
  .med-dates
    absPos(top: 53px, right: 5px)
    text-align: right
    height: 20px
    font-size: 13px
    color: textColor3

  
  .phones, .plans
    width: 200px
    float: right
    text-align: right
    font-size: 13px
    padding-bottom: 10px
    
  .plans 
    padding-bottom: 0px
    width: 240px
  
  .sub-date 
    padding-top: 3px
    width: 70px
    float: right
    text-align: right
    height: 16px
    line-height: 16px
    clear: right
    font-size: 13px
    color: textColor3
  
  .sub-title
    padding-top: 3px
    width: calc(100% - 200px)
    clear: left
    height: 16px
    line-height: 16px
    font-size: 13px
    color: textColor3
    nowrap()  
    &.dark
      color: textColor1 
      &.med-history
        float: left
        padding-bottom: 7px
    &.external
      color: externalOrgBlue
    &.provider
      width: 280px
      float: left
    &.consent
      width: 100%
      text-align: center
      padding-top: 5px
      &.med-history
        border-top: 1px solid forward1
    &.carrier-phone
      width: 200px
    &.demographics
      width: calc(100% - 220px)
    &.phr
      margin-top: -7px
  
  .address
    height: auto
    color: forwardText3
    text-overflow: unset
    overflow: visible
  
  a.address
    color: teal
    text-decoration: none
  
  .city, .state
    padding-right: 3px

  .consent-med-status
    color: textColor1
    float: left
    width: calc(100% - 165px)
    padding-bottom: 8px
  .consent-status
    color: textColor1
    width: 100%
    padding-top: 3px
    clear: left
    
  .alert-recommendation
    padding-top: 3px
    width: calc(100% - 200px)
    clear: left
    height: 16px
    line-height: 16px
    font-size: 13px
    color: textColor3
    &.external
      color: externalOrgBlue
       
  &.scrollable
    max-height: 570px
    overflow-y: auto
    overflow-x: hidden
  
.phr
  .enroll    
    .failed
      background: url('../images/white-x.svg') no-repeat 50% 0
      height: 15px
      
    .success
      background: url('../images/white_check.svg') no-repeat 50% 0
      height: 15px
      
  .unlock
    background-color: textColor7

.wrap-status
  color: textColor1
  clear: left
  width: calc(100% - 180px)
  padding-top: 3px
  margin: 0
  margin-bottom: 8px;
  
  &:active
    transform: translate(1px, 1px)
    
.region
  display: table
  min-height: 100px
  width: 100%
  .region-left
    min-height: 100px
    width: calc(50% - 1px)
    display: table-cell
    border-right: 1px solid forward1
    vertical-align: top
  .region-right
    min-height: 100px
    width: 50%
    display: table-cell
    vertical-align: top
    
.region-header
  position: relative
  width: 100%
  height: 30px
  line-height: 30px
  background-color: forward5
  border-bottom: 1px solid forward1
  margin: 0px  
  .title
    font-size: 13px
    font-weight: normal
    text-align: center
    color: forwardText2
    nowrap()
  &.not-first
    border-top: 1px solid forward1

  .filter
    absPos(top: -6px, right: 5px)
    background: url('../images/flowsheet/chevron_down_teal.svg') 130px 20px no-repeat
    width: 120px
    color: textColor6
    text-align: right
    padding-right: 35px
    line-height: 46px
    cursor: pointer
    font-size: 14px
    height: 40px

.payors-module
  min-height: 100px

.meta-info
  margin-top: 20px 
  
.guarantor-label, .payor-info-label
  font-size: 12px
  color: textColor3
  display: table-cell
  padding: 3px 8px 3px 0px
  text-align: right

  
.guarantor-name, .guarantor-relationship, .payor-info
  color: forwardText3
  display: table-cell
  
//----------------------------------
// Summary Modules
//----------------------------------
          
.action-button
  padding: 7px 20px
  font-size: 14px
  color: white
  border-radius: 5px
  background-color: teal
  border: none
  min-width: 180px
  min-height: 31px
  position: absolute
  
  &.top-right
    right: 7px

    &:nth-of-type(1)
      top: 10px
      
    &:nth-of-type(2)
      top: 47px
      
    &:nth-of-type(3)
      top: 84px


//----------------------------------
// Chevron
//----------------------------------
.chevron
  absPos(top: 6px)
  width: 20px
  height: 30px
  cursor: pointer
  
  .chevron-svg
    absPos(top: 50%, left: 50%)
    margin-top: -3px
    margin-left: -5px

  &.section-collapse
    left: 3px
  
  &.up
    transform: rotate(180deg)
  &.down
    transform: none
  &.left
    transform: rotate(90deg)
  &.right
    transform: rotate(-90deg)
  
  &.left-encounter-collapse
    height: 10px
    width: 10px
    left: 5px
    top: 4px
  
  &.right-encounter-collapse
    height: 10px
    width: 10px
    right: 5px
    top: 4px
  
  &.encounter-next
    transform: rotate(-90deg)
    left: 50%
    top: 50%
    margin-top: -10px
    margin-left: 152px
  
  &.encounter-previous
    transform: rotate(90deg)
    left: 50%
    top: 50%
    margin-top: -10px
    margin-left: -170px
  
  &.sort-chevron
    display: inline-block
    margin-left: 6px
    position: static
    width: auto
    height: auto
    
    .chevron-svg
      position: static
      margin-top: auto
      margin-left: auto

// Alert Modal
.modal
  &.alert
    position: absolute
    top: 10% !important
    left: 50% !important
    margin-left: -175px
    width: 350px
    height: 160px
    
    .message
      absPos(top: 0, left: 0, right: 0)
      
    .buttons
      absPos(bottom: 0, left: 0, right: 0)
      height: 35px
      text-align: center
      
      .prmy
        display: inline-block
        margin-top: 0
        
// Progress widget
.progress-bar
  absPos(top: 50%, left: 10px, right: 10px)
  height: 18px
  margin-top: -9px
  border: 1px solid #666
  border-radius: 10px
  overflow: hidden
  
  .progress
    background-color: #666
    height: 100%
    width: 0%
    text-align: center
    color: white
    
    &.ind
      width: 100%

      .ind-bar
        height: 100%
        background-color: #333
        transform: translateX(0) skew(-30deg, 0deg)
        margin-right: 10px
        float: left
    
  .progress-label
    absPos(top: 2px, left: 50%)
    margin-left: -15px
    width: 30px
    color: #ccc
    font-size: 11px

// File input widget
.file-input-wrapper
  absPos(top: 0, right: 0, bottom: 0, left: 0)
  
  &.is-uploading
    .file-input
      display: none

.file-input
  absPos(top: 0, right: 0, bottom: 0, left: 0)
  display: block
  margin: 0
  padding: 0
  opacity: 0    
  z-index: 5
  
  &:hover
    cursor: pointer

.upload-file-wrapper
  height: 120px
  margin-top: 13px !important
  padding-top: 12px !important
  border-top: 1px dotted #ccc

.upload-file
  height: 100px
  width: 250px
  position: relative
  overflow: hidden
  border-radius: 5px
  
  .file
    max-width: 100%
    max-height: 100%
  
  .file-overlay
    absPos(top: 0, right: 0, bottom: 0, left: 0)
    z-index: 0
  
    &.is-uploading
      background-color: rgba(255, 255, 255, 0.9)
      
    .overlay-tools
      display: none

      .filename
        absPos(top: 2px, left: 0, right: 0)
        text-align: center
        font-size: 11px

  &:hover, &.is-empty
    .file-overlay:not(.is-uploading)
      background-color: rgba(255, 255, 255, 0.9)
      z-index: 6
      
      .overlay-tools
        absPos(top: 0, right: 0, bottom: 0, left: 0)
        display: block
        
        .add-file, .remove-file
          border: 1px solid transparent
          border-radius: 10px
          color: black
          
          &:focus
            outline: none
          
          &:hover
            border-color: #DEDED9
            background-color: #F5F5F5

        .add-file
          absPos(top: 40px, left: 55px)
          width: 140px
          text-indent: 29px
          font-size: 12px
          display: block
          padding: 3px 6px
          cursor: pointer
          
          &:before
            content: ''
            display: block
            background-color: #ccc
            absPos(top: 4px, right: 0, bottom: 0, left: 11px)
            background: url('../../images/upload.svg') no-repeat 0 0
            background-size: 20px
            width: 20px
            height: 20px
            margin-right: 5px
            
        .remove-file
          absPos(top: 65px, left: 55px)
          width: 140px
          font-size: 12px
          text-indent: 20px

          &:before
            content: ''
            display: block
            background-color: #ccc
            absPos(top: 3px, right: 0, bottom: 0, left: 11px)
            background: url('../../images/black-x.svg') no-repeat 50% 0
            background-size: 14px
            width: 20px
            height: 20px
            margin-right: 5px

//----------------------------------
// Rich Text Editor 
//----------------------------------
          
.rich-text-container 
  background: #fff
  border: 1px solid inputBorderGray
  font-size: 14px
  padding: 0px

.RichEditor-editor 
  border-top: 1px solid inputBorderGray
  cursor: text
  font-size: 13px
  position: relative

.RichEditor-editor .public-DraftEditorPlaceholder-root
  padding: 1px
  
.RichEditor-editor .public-DraftEditor-content 
  padding: 5px


.RichEditor-editor .public-DraftEditor-content 
  min-height: 100px


.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root 
  display: none

.public-DraftEditorPlaceholder-root 
  absPos(left: 5px, top: 3px)
  z-index: 0
  color: textColor3

.RichEditor-editor .RichEditor-blockquote 
  border-left: 5px solid #eee
  color: #666
  font-family: 'Hoefler Text', 'Georgia', serif
  font-style: italic
  padding: 10px 20px


.RichEditor-blockquote 
  margin-top: 16px

.RichEditor-editor .public-DraftStyleDefault-pre 
  background-color: rgba(0, 0, 0, 0.05)
  font-size: 14px
  padding: 20px


.RichEditor-controls 
  font-size: 12px
  margin-bottom: 5px
  user-select: none

.button-container
  display: block

.style-button 
  color: #999
  cursor: pointer
  margin-right: 10px
  padding: 4px
  display: inline-block


.active-button 
  color: #5890ff