$xsmallup:          "only screen and (min-width: 368px)"
$landscape:         "only screen and (min-width: 425px)"
$smallup:           "only screen and (min-width: 576px)"
$smediumup:         "only screen and (min-width: 676px)"
$mediumup:          "only screen and (min-width: 768px)"
$mediumdown:        "only screen and (max-width: 767px)"
$slargeup:          "only screen and (min-width: 830px)"
$slargedown:        "only screen and (max-width: 829px)"
$largeup:           "only screen and (min-width: 992px)"
$slaptop:           "only screen and (min-width: 1024px)"
$xlargeup:          "only screen and (min-width: 1280px)"
$xlargedown:        "only screen and (max-width: 1300px)"
    
.btn
    display:                flex
    align-items:            center
    justify-content:        center
    border-radius:          4px
    padding:                1.4rem 3.2rem
.text-deco
    text-decoration: underline
.select-drop-wo-label
    input
        padding-top: 0  !important
    .option-list-wrapper
        top: 40px !important
   
.auth-content-wrapper
    .auth-info
        margin-top: 2rem
        font-size: 1.6rem
.wrapper-x
    padding-left: 2rem 
    padding-right: 2rem
    @media #{ $mediumup }
        padding-left: 5rem 
        padding-right: 5rem
    @media #{ $largeup }
        padding-left: 7rem 
        padding-right: 7rem
    @media #{ $xlargeup }
        padding-left: 29rem 
        padding-right: 29rem
.wrapper-sx
    padding-left: 2rem 
    padding-right: 2rem
    @media #{ $mediumup }
        padding-left: 5rem 
        padding-right: 5rem
    @media #{ $largeup }
        padding-left: 8rem 
        padding-right: 8rem
    @media #{ $xlargeup }
        padding-left: 14rem
        padding-right: 14rem
        
        
.body-wrap
    max-width: 860px
    
        
.auth-form
    margin-top: 3.5rem
    transition: all 0.3s ease-in
.auth-action
    a 
        font-size: 1.4rem
.sidenav-title
    color: #61677C
    font-size: 1.4rem
    font-family: "Gilroy-Medium"
    font-weight: 500
.co-black
    color: #0A1045
.modal-action-wrap
    padding: 2.5rem 3rem
    >*
        &:last-child:not(only-child)
            margin-left: 3.5rem
    
.overflow-y
    overflow-y: auto
    padding-bottom: 5rem
.modal-footer
    width: 100%
    padding: 1rem 4rem
    background: #fff
    position: absolute
    bottom: 0
    left: 0
    &.modal-action-wrap 
        padding: 2rem 4rem
        border-top: 1px solid #E8EDFF
.alt-modal-footer
    width: 100%
    padding: 1rem 4rem
    position: absolute
    bottom: 0
    left: 0
    background: #fff
    &.modal-action-wrap 
        padding: 4rem
        border-top: 1px solid #E8EDFF
.colaborator-wrapper
    padding: 2rem 0 
    border-top: 1px solid #E8EDFF
    .section-title 
        margin: 0
        margin-bottom: 1.5rem
        font-size: 1.8rem
        font-weight: 500
        color: #61677C
.page-extras
    >*
        margin-right: 1rem
.wrapper-deco
    position: relative
    padding: 2.5rem
    background: #FFFFFF
    border: 1px solid #E8EDFF
    box-sizing: border-box
    border-radius: 8px
.wrapper-deco-alt
    position: relative
    padding: 2.5rem 0
    background: #FFFFFF
    border: 1px solid #E8EDFF
    box-sizing: border-box
    border-radius: 8px  


.empty-formm-list
    padding: 17.5rem 0
    max-width: 700px
    margin:  0 auto
    >*
        min-width: (100% / 3.5)
        max-width: (100% / 3.5)
        

.empty-agent
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column
    padding-top: 7rem 
    img
        width: 82px
        height: 82px
    p
        margin-top: 2rem
        max-width: 300px
        text-align: center
        padding: 0 3rem
        font-size: 1.6rem
        font-family: "Gilroy-Medium"
.empty-state
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column
    padding-top: 5rem 
    img
        width: 82px
        height: 82px
    p
        max-width: 300px
        text-align: center
        padding: 0 3rem
        font-size: 1.4rem
        font-family: "Gilroy-Regular"
    h3
        max-width: 300px
        text-align: center
        padding: 0 3rem
        font-size: 1.6rem
        font-family: "Gilroy-Medium"
    &.empty-result
        min-height: 50vh
        p
            max-width: 411px
            font-size: 1.6rem
            font-family: "Gilroy-Medium"
        

.status
    display: inline-block
    border-radius: 20px
    padding: 0.3rem 1rem
    font-family: "Gilroy-Medium"
    font-size: 1.4rem
    line-height: 1.6
    font-weight: 500
    max-width: 125px
    svg
        width: 12px
        height: 12px
    &.active
        color: #008272
        background: #E6FFFC
    &.inactive
        color: #D50033
        background: #FBE5EB
    >*
        &:last-child
            margin-left: 0.5rem
.over-flow-scroll
    overflow: auto
    -ms-overflow-style: none
    scrollbar-width: none
    &::-webkit-scrollbar 
        width: 0px
        background: transparent
.over-flow-xscroll
    overflow: auto
    height: 600px
    padding-bottom: 200px
    -ms-overflow-style: none
    scrollbar-width: none
    &::-webkit-scrollbar 
        width: 0px
        background: transparent
.over-flow-yscroll
    overflow: auto
    height: 100%
    padding-bottom: 200px
    -ms-overflow-style: none
    scrollbar-width: none
    &::-webkit-scrollbar 
        width: 0px
        background: transparent
.breadcrumb 
    display: flex
    align-items: center
    a 
        font-family: "Gilroy-SemiBold"
        font-size: 2rem
        color: #C5C9DA
        padding-right: 1rem
    p
        color: #0A1045
        font-family: "Gilroy-SemiBold"
        font-size: 2rem
        padding-right: 1rem
.accordion
    border: none !important
    border-radius: 0 !important
    .accordion__heading

        .accordion__button
            background-color: #fff 
            border: none
            color: #61677C
            font-family: "Gilroy-Regular"
            font-size: 1.4rem
            text-transform: capitalize
            &[tabindex]:focus 
                outline: 1px solid var(--main-background)
  
            &::before
                display: inline-block
                content: ''
                height: 7px
                width: 7px
                margin-right: 1rem
                border-bottom: 1px solid currentColor
                border-right: 1px solid currentColor
            &:hover
                background-color: #FBFBFF
    .accordion__panel
        padding: 10px 0
        max-height: 260px
        overflow: scroll
.form-field-list
    li
        position: relative
        .drag-icon
            position: absolute
            right: 1rem
            top: 1rem
            width: 11px
            height: 19px
            opacity: 0
            transition: opacity 0.3s ease
        &:hover
            .drag-icon
                opacity: 1
.form-field-wrapper
    transition: all 0.3s ease-in-out
    &:not(:last-child)
        margin-bottom: 4rem
    .form-field-settings
        display: none
        .inputwo-label-wrap
            position: relative
            .input-wo-label
                margin-bottom: 0rem !important
                .input
                    margin-bottom: 0rem !important
                    background: #F7F7F8
            .input
                margin-bottom: 0rem !important
    .fb-input-height
        .input
            height: 44px
        input
            padding-top: 0
        .option-list-wrapper
            top: 44px
        .bg-svg
            right: 1rem
            width: 13px
            height: 10px
    .fb-input-height-small
        .input
            height: 37px
        input
            padding-top: 0
        .option-list-wrapper
            top: 37px
            
        .bg-svg
            right: 1rem
            width: 13px
            height: 10px
        

    .form-field-preview
        display: flex
        flex-wrap: wrap
        .question-tag
            position: relative
            left: 0
            top: 0
            height: 22px
            
        .preview-content
            margin-left: 2rem
            width: calc( 100% - 90px )
            h4
                font-family:  "Gilroy-Medium"
                font-weight: 500
                font-size: 1.6rem
                line-height: 1.6
                color: #0A1045
                span 
                    margin-left: 0.5rem
            p
                font-family:  "Gilroy-Regular"
                font-weight: 400
                font-size: 1.4rem
                line-height: 1.6
                color:  #61677C

    &.active
        border-color: #004BFF
        box-shadow: 0px 10px 70px rgba(237, 240, 247, 0.5)
        .form-field-settings
            display: block
        .form-field-preview
            display: none
.form-field-question
    position: relative
    display: flex
    align-items: center
    flex-wrap: wrap
    justify-content: space-between
   
    .fb-wo-label, .fb-q-input 
        margin-bottom: 0 !important
    >*
        &:nth-of-type(2)
            width: calc(100%  - 107px )
        &:last-child
            width: 87px
.input-width
    .input-wrapper 
        max-width: 59px
        margin-bottom: 0 !important
        .input
            padding: 0rem !important
            input
                padding: 1rem
    &.width-140
        .input-wrapper 
            max-width: 140px
    
.svg-15
    width: 15px
    height: 15px   
.svg-20
    svg
        width: 20px
        height: 20px       
.question-tag
    position: absolute
    left: 1rem
    display: flex
    align-items: center
    color: #0A1045
    font-size: 1.2rem
    font-family: "Gilroy-SemiBold"
    font-size: 1.4rem
    text-transform: capitalize
    padding: 0.6rem
    background: #F4ECD6
    border-radius: 4px
    max-width: 70px
    z-index: 10
    @media #{ $mediumup }
        left: 2rem
    svg
        width: 1.2rem
        height: 1.2rem
        display: none
        @media #{ $mediumup }
            display: block
            margin-right: 0.5rem
        
    span
        
.form-field-settings-footer
    border-top: 1px solid #E8EDFF
    padding-top: 2rem 
    margin-top: 2rem
    @media #{ $mediumup }
        display: flex
        align-items: center
        justify-content: space-between
.agent-helper-section
    .input-height-40
        height: 40px
        input
            padding-top: 0
        .option-list-wrapper
            top: 40px
    
.flx-jsb-rl
    width: 100%
    display: flex
    flex-direction: column
    @media #{ $largeup }
        flex-direction: row
        justify-content: space-between
        align-items: center
    >*
        &:not(:last-child)
            margin-bottom: 1.5rem
            @media #{ $largeup }
                margin-bottom: 0

.flx-jsb-rm
    width: 100%
    display: flex
    flex-direction: column
    @media #{ $mediumup }
        flex-direction: row
        justify-content: space-between
        align-items: center
    >*
        &:not(:last-child)
            margin-bottom: 1.5rem
            @media #{ $mediumup }
                margin-bottom: 0

.flex-width-1-4wgr
    display: flex
    flex-wrap: wrap
    // justify-content: space-between
    > *
        width: 100%
        margin-bottom: 3rem
        @media #{ $smallup }
            width: calc(50% - 1.5rem)
            margin-top: 3rem
            margin-bottom: 0
            word-wrap: break-word
        &:first-child, &:nth-of-type(2)
            margin-top: 0
        &:nth-of-type(n)
            margin-right: 3rem 
        &:nth-of-type(2n)
            margin-right: 0
        @media #{ $largeup }
            width: calc(25% - 3rem)
            &:nth-of-type(3), &:nth-of-type(4)
                margin-top: 0
            &:nth-of-type(n),&:nth-of-type(2n), &:nth-of-type(3n)
                margin-right: 3rem
            &:nth-of-type(4n) 
                margin-right: 0
.flex-width-1-2
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    > *
        width: 100%
        margin-bottom: 1.5rem
        @media #{ $largeup }
            width: 46%
            margin-bottom: 1.5rem
    &.less-gp
        > *
            @media #{ $largeup }
                width: 48%
                margin-bottom: 1.5rem
    &.calc-gap
        > *
            @media #{ $largeup }
                width: calc( 50% - 20px )
                margin-bottom: 1.5rem
.grid
    display:                     grid
    grid-template-columns:       repeat(12, 1fr)
    grid-gap:                    3rem
    
    &.mostly-2
        grid-template-columns:   repeat(auto-fit, minmax(314.3px, 1fr))
        @media #{ $largeup }
            grid-template-columns:   repeat(auto-fit, minmax(380px, 1fr))
    &.mostly-3
        grid-template-columns:   repeat(auto-fit, minmax(315.8px, 1fr))
    &.mostly-3s
        grid-template-columns:   repeat(auto-fill, minmax(200px, 1fr))
        grid-gap:                    2rem
    &.mostly-4s
        grid-column-gap:             3rem
        grid-row-gap:                3rem
        grid-template-columns:   repeat(auto-fit, minmax(250px, 1fr))
    &.mostly-4-fill
        grid-column-gap:             3rem
        grid-row-gap:                4rem
        grid-template-columns:   repeat(auto-fill, minmax(250px, 1fr))
        @media #{ $largeup }
            grid-column-gap:             3.8rem
            grid-row-gap:                6.5rem
        &.small-space
            grid-row-gap:                3rem
// override date picker styling
.react-calendar
    border: 1px solid #E8EDFF !important
    border-radius: 8px 
    font-family: "Gilroy-Medium" !important
    font-weight: 500 !important
    padding: 1rem
.react-calendar__month-view__weekdays
    text-transform: uppercase !important
    font-size: 1.2rem !important
    font-family: "Gilroy-SemiBold" !important
    font-weight: 600 !important
    color: #C5C9DA 
.react-calendar__month-view__days__day--neighboringMonth
    color: #C5C9DA !important
.react-calendar__tile
    color: #0A1045
    font-family: "Gilroy-SemiBold" 
    font-weight: 600
    font-size: 12px
    padding: 1rem !important
    margin-bottom: 1rem !important
.react-calendar__tile--active
    background: #C5C9DA !important
    color: #0A1045 !important
    border-radius: 2px
.react-calendar__tile--now
    background: #E8EDFF !important
.react-calendar__month-view__days__day--weekend
    color: #0A1045 !important
.react-calendar__navigation
    color:  #0A1045 !important
    font-family: "Gilroy-Medium" 
    font-weight: 600
.react-date-picker__button
    display: none
.react-date-picker__clear-button
    display: none
.react-date-picker__wrapper
    

    
//End override date picker styling
.section
    padding: 2.8rem 0
    .section-header
        font-size: 2rem
        margin-bottom: 3rem
        font-family: "Gilroy-SemiBold"
        line-height: 1.6
        font-weight: 600
        color: #C5C9DA
        &.with-info
            display: flex
            align-items: center
            svg
                margin-left: 1rem
                width: 18px
                height: 18px
                color: #838CA2
.rodal-dialog
    padding: 0 !important
    border-radius: 8px !important
    overflow: hidden !important
    
.basic-modal
    .rodal-dialog
        width: 90% !important
        @media #{ $smallup }
            width: 515px !important
.large-modal
    .rodal-dialog
        width: 90% !important
        @media #{ $mediumup }
            width: 650px !important
.very-large-modal
    .rodal-dialog
        width: 90% !important
        @media #{ $mediumup }
            width: 650px !important
        @media #{ $largeup }
            width: 820px !important
.very-xlarge-modal
    border-radius: 0
    .rodal
        top: 65px
        &:focus 
            outline: 1px solid var(--main-background)
    .rodal-dialog
        border-radius: 0 !important
        width: 100% !important
        height: 100% !important

.full-width-modal
    border-radius: 0
    .rodal
        &:focus 
            outline: 1px solid var(--main-background)
    .rodal-dialog
        border-radius: 0 !important
        width: 100% !important
        height: 100% !important
    
       


.small-modal
    .rodal-dialog
        width: 90% !important
        
        @media #{ $mediumup }
            width: 350px !important
.modal-body
    padding: 1rem 4rem
.full-width
    max-width: 100% !important
.bg-grey
    background: #F6F8FF
    border: 1px solid #E8EDFF !important
.primary-svg
    svg
        color: #004BFF
        width: 20px
        height: 20px

.modal-oveflow-wrap
    height: 200px
    overflow: hidden
    overflow-y: auto
    &.alt-300
        height: 300px
    &.alt-350
        height: 350px
.absolute-center
    position: relative
.sectionw-details
    .section-details
        margin-bottom: 3rem
        h3
            font-family: "Gilroy-SemiBold"
            font-size: 2rem
            margin-bottom: 0.6rem
        
.d-flx
    display:            flex
.flx-wrap
    flex-wrap:          wrap
.flx-dir-c
    flex-direction:     column
.al-i-fs
    align-items:        flex-start
.al-i-fe
    align-self:         flex-end
.al-i-c
    align-items:        center
.al-i-b
    align-items:        baseline
.j-c-sb
    justify-content:    space-between
.j-c-fe
    justify-content:    flex-end
.j-c-sa
    justify-content:    space-around
.j-c-c
    justify-content:    center
.j-s-fe
    justify-self:       flex-end
.al-s-e
    align-self:         flex-end
.al-s-c
    align-self:         flex-center
.al-i-sb
    align-items:        space-between
.d-flx-alc
    display: flex
    align-items: center
.d-flx-alfe
    display: flex
    align-items: flex-end
.d-flx-alfe-wp
    display: flex
    align-items: flex-end
    flex-wrap: wrap
.d-flx-alfe-jsb
    display: flex
    align-items: flex-end
    justify-content: space-between
.d-flx-alc-jsa
    display: flex
    align-items: center
    justify-content: space-around
.d-flx-alc-jfe
    display: flex
    align-items: center
    justify-content: flex-end
.d-flx-alc-fw
    display: flex
    align-items: center
    flex-wrap: wrap
.d-flx-fw
    display: flex
    flex-wrap: wrap
.d-flx-alc-jc
    display: flex
    align-items: center
    justify-content: center
.d-flx-alc-jc-fw
    display: flex
    align-items: center
    justify-content: center
    flex-wrap: wrap
.d-flx-alc-jsb
    display: flex
    align-items: center
    justify-content: space-between
.d-flx-jsb
    display: flex
    justify-content: space-between
.d-flx-alc-jsb-wp
    display: flex
    align-items: center
    justify-content: space-between
    flex-wrap: wrap
.d-flx-jsb-fdc
    display: flex
    justify-content: space-between
    flex-direction: column
.d-flx-alc-jsbr
    display: flex
    flex-direction: column
    @media #{ $smediumup }
        flex-direction: row
        align-items: center
        justify-content: space-between
.mt-6
    margin-top: 6rem
.mt-4
    margin-top: 4rem
.mt-3
    margin-top: 3rem
.mt-2
    margin-top: 2rem
.mt-1h
    margin-top: 1.5rem
.mt-1
    margin-top: 1rem
.mt-h
    margin-top: 0.5rem
.mr-6
    margin-right: 6rem
.mr-5
    margin-right: 5rem
.mr-4
    margin-right: 4rem
.mr-3
    margin-right: 3rem
.mr-2
    margin-right: 2rem
.mr-1h
    margin-right: 1.5rem
.mr-1
    margin-right: 1rem
.mr-h
    margin-right: 0.5rem
.ml-4
    margin-left: 4rem
.ml-3
    margin-left: 3rem
.ml-2
    margin-left: 2rem
.ml-1h
    margin-left: 1.5rem
.ml-1
    margin-left: 1rem
.ml-h
    margin-left: 0.5rem
.mb-4
    margin-bottom: 4rem
.mb-3
    margin-bottom: 3rem
.mb-2
    margin-bottom: 2rem
.mb-1h
    margin-bottom: 1.5rem
.mb-1
    margin-bottom: 1rem
.mb-h
    margin-bottom: 0.5rem
.py-3
    padding-bottom: 3rem
    padding-top: 3rem
.py-2
    padding-bottom: 2rem
    padding-top: 2rem
.py-1
    padding-bottom: 1rem
    padding-top: 1rem
.py-0
    padding-bottom: 0rem
    padding-top: 0rem
.px-0
    padding-left: 0rem
    padding-right: 0rem
.px-4
    padding-left: 4rem
    padding-right: 4rem
.px-3
    padding-left: 3rem
    padding-right: 3rem
.px-2
    padding-left: 2rem
    padding-right: 2rem
.px-1
    padding-left: 1rem
    padding-right: 1rem
.pt-5
    padding-top: 5rem
.pt-4
    padding-top: 4rem
.pt-3
    padding-top: 3rem
.pt-2
    padding-top: 2rem
.pt-1
    padding-top: 1rem
.pt-0
    padding-top: 0rem
.pb-0
    padding-bottom: 0rem
.pb-1
    padding-bottom: 1rem
.pb-2
    padding-bottom: 2rem
.pb-3
    padding-bottom: 3rem
.border-top
    border-top:  1px solid #E8EDFF
.border-bottom
    border-bottom:  1px solid #E8EDFF
.mx-auto
    margin-right:       auto
    margin-left:        auto
.maxwidth-xxl
    max-width:          1440px
.width-50r
    width: 100%
    @media #{ $mediumup }
        width: 50%

.f-10
    font-size: 1rem
.f-12
    font-size: 1.2rem
.f-14
    font-size: 1.4rem
.f-16
    font-size: 1.6rem
.f-18
    font-size: 1.8rem
.f-20
    font-size: 2rem
.f-24
    font-size: 2.4rem
.ff-regular
    font-family: "Gilroy-Regular"
.ff-bold
    font-family: "Gilroy-Bold"

.ff-sbold
    font-family: "Gilroy-SemiBold"

.ff-medium
    font-family: "Gilroy-Medium"
.co-black
    color: #1B215C