@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; }

.dark-date {
    color-scheme: dark;
}

@font-face {
    font-family: TiroBangla;
    font-style: italic;
    src: url(/fonts/TiroBangla-Italic.ttf);
}

html {
    font-family: Helvetica Neue, sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #717882;
}


[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #E6E8EA;
    border-radius: 0;
    border-width: 1px;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .5rem .75rem;
    --tw-shadow: 0 0 #0000
}

[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,input:where(:not([type])):focus,select:focus,textarea:focus {
    --tw-ring-color: #DE6B4A;
    border-color: #DE6B4A;

}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}

[type=checkbox],[type=radio] {
    border-color: #E6E8EA;
    color: #DE6B4A;
    --tw-ring-color: #DE6B4A;
    &:focus {
        color: #DE6B4A;
        --tw-ring-color: #DE6B4A;
    }
}

::backdrop, *, :after, :before {
    --tw-ring-color: transparent;
}

.feedae-gray-table {
    .table-header-group .table-row {
        background-color: #F5F3F0;
        :first-child.table-cell {
            border-top-left-radius: 1rem;
        }
        :last-child.table-cell {
            border-top-right-radius: 1rem;
        }
    }
    .table-row-group .table-row {
        &:hover {
            background-color: #F5F3F0;
        }
        .table-cell {
            border-top: 1px solid #DFE1E4;
        }
        &:last-child {
            .table-cell {
                border-top: 1px solid #DFE1E4;
            }
        }
    }
    border-color: #DFE1E4;
}

.feedae-gray-bg {
    background-color: #F5F3F0;
}

.feedae-light-gray-bg {
    background-color: #FBFBFB;
}

.feedae-white-bg {
    background-color: #FBFBFB;
}

.cos-bg-brawn {
    background-color: #383434;
}

.cos-text-color {
    color: #f0ede9;
}

.cos-yellow {
    color: #EBC364;
}

.right-messages {
    border-radius: 8px;
    padding: 15px 15px;
    margin-top: 6px;
    margin-bottom: 6px;
    display: inline-block;
    color: #462319;
    background: #FAE4DB;
    position: relative;
    margin-left: 25%;
}

.left-messages {
    border-radius: 8px;
    padding: 15px 15px;
    margin-top: 6px;
    margin-bottom: 6px;
    display: inline-block;
    background: #F5F3F0;
    margin-right: 25%;
    position: relative;
}

.left-messages.selected {
    background: #ecfccb fixed;
}

.left-messages.selected:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: -7px;
    height: 20px;
    width: 20px;
    border-bottom-right-radius: 15px;
}

.left-messages.selected:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: -10px;
    width: 10px;
    height: 20px;
    background: white;
    border-bottom-right-radius: 10px;
}

.right-messages.selected {
    background: #ecfccb fixed;
    color: black;
}

.right-messages.selected:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: -8px;
    height: 20px;
    width: 20px;
    border-bottom-left-radius: 15px;
}

.right-messages.selected:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: -10px;
    width: 10px;
    height: 20px;
    background: white;
    border-bottom-left-radius: 10px;
}

.audio-player-background {
    background: #F0F3F4
}

.tab-border-bottom {
    border-bottom: 1px solid #EEEFF1
}

.tab-selected {
    color: #171A1D;
    border-bottom: 2px solid #DB5D39
}

.call-overview-title {
    min-width: 116px;
}

.team-pill {
    border-radius: 4px;
    padding: 2px 8px 2px 8px;
}

.team-pill-1 {
    color: #8B56D1;
    background: rgba(178, 123, 249, 0.15);
}
.team-pill-2 {
    color: #2A7AF4;
    background: rgba(123, 173, 249, 0.15);
}
.team-pill-3 {
    color: #F85E5E;
    background: rgba(249, 123, 123, 0.15);
}
.team-pill-4 {
    color: #35BB20;
    background: rgba(132, 231, 117, 0.15);
}




.score-card {
    background: #F5F3F0;
}

.score-card-rationale {
    color: rgba(23, 26, 29, 0.84);
}
.score-card-metric-title-gray {
    color: #717882;
}

.metadata-pill {
    min-width: 200px;

    .name {
        color: #462319;
        background: #FAE4DB;
        font-weight: 400;
        border-radius: 4px;
        word-wrap: break-word;
        padding: 2px 8px 4px 8px;
    }
}




.dropdown {
    height: 34px;

    .hidden-title {
        color: white;
    }
    select {
        background: transparent;
        cursor: pointer;
        border: none;
    }
}

.dropdown-selected {
    background: #DB5D39;

    .count {
        color: #DB5D39;
        font-size: 13px;
    }

    .hidden-title {
        color: #DB5D39;
    }

    select {
        color: white;

        option {
            color: #9ba3af;
        }
    }
}

.reset-filters, .feedae-light-blue-button {
    background: #E6E5FF;
    &:hover {
        background: #C7C7FF;
    }
    span {
        color: #473DAD;
    }
    svg {
        color: #473DAD;
    }
}

.conversation-filters {
    .count {
        background: #FAE4DB;
        color: #171A1D;
        font-size: 13px;
    }
}

.add-record-button, .apply-button {
    background: #DB5D39;
}

.add-record-button:hover, .apply-button:hover {
    background-color: #DB5D39;
}

[x-cloak] {
    display: none !important;
}

.advanced-filter-modal {
    min-width: 80%;
}

.action-button {
    color: #6D4DFF;
}

.filter-date-picker {
    height: 34px;
}

.filter-period-date-picker {
    margin-top: 42px !important;
}

.advanced-filter-type {
    width: 200px;
}

.advanced-filter-value {
    width: 250px;
}

.duration-filter-button {
    &.selected {
        background: #DB5D39;
        .title {
            color: white !important;
        }
        .count {
            color: #DB5D39;
            font-size: 13px;
        }
    }
}

.duration-filter-popup {
    margin-left: 142px;

    input {
        width: 80px;
    }
}

a[disabled="disabled"] {
    /*pointer-events: none;*/
    color: #A0AEC0;
    &:hover {
        color: #A0AEC0;
    }
}

.chat-response {
    background: rgb(18,32,36);
    background: linear-gradient(135deg, rgba(18,32,36,1) 0%, rgba(115,145,191,1) 50%, rgba(193,170,209,1) 100%);
}

.feedae-blue-button, .feedae-bg-blue {
    background: #DB5D39;
    color: white;
    fill: white;
}

.feedae-red-button {
    background-color: #8A051C;
    color: white;
    fill: white;
}
.feedae-bg-red {
    background-color: #8A051C;
}


.feedae-blue-button:hover{
    background-color: #DB5D39;
}

.feedae-border-purple {
    border-color: #DB5D39;
}

.feedae-bg-light-gray {
    background: #F5F3F0;
}
.feedae-bg-light-gray-button {
    background: #F5F3F0;
}
.feedae-bg-light-blue {
    background: #E6E5FF;
}

.feedae-bg-orange-light {
    background-color: #E5F2FF;
}

.feedae-bg-marron {
    color: #462319;
}

.feedae-text-red {
    color: #8A051C;
}

.feedae-sidebar-item {
    &.selected {
        border: 1px solid #E6E8EA;
    }
    &:hover, &.selected {
        background: #FFFFFF;
        color: #DB5D39;
        svg {
            stroke: #DB5D39;
        }
        .icon {
            color: #DB5D39;
            border-color: #DB5D39;
        }
    }
}

.feedae-title {
    font-size: 20px;
}

div[contenteditable=true]:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: #717882;
}

.size-5 {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
}

@theme {
    --font-tiro: "TiroBangla";
    --animate-hide: hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --animate-slide-down-and-fade: slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --animate-slide-left-and-fade: slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --animate-slide-up-and-fade: slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --animate-slide-right-and-fade: slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);

    @keyframes hide {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    @keyframes slideDownAndFade {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes slideLeftAndFade {
        from {
            opacity: 0;
            transform: translateX(6px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    @keyframes slideUpAndFade {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes slideRightAndFade {
        from {
            opacity: 0;
            transform: translateX(-6px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

.feedae-font-13 {
    font-size: 13px;
}

.feedae-bg-orange {
    background-color: #DE6B4A;
    &:hover {
        background-color: #DB5D39;
    }
}

.feedae-outline-orange {
    outline-color: #DE6B4A
}

.feedae-ring-orange {
    --tw-ring-opacity:1;
    --tw-ring-color:rgb(250 228 219/var(--tw-ring-opacity,1))
}

.feedae-border-orange {
    border-color: #DE6B4A;
}

.feedae-bg-orange-light {
    background-color: #FAE4DB
}

.feedae-text-orange {
    color: #DE6B4A
}


.feedae-button-primary {
    background-color: #DE6B4A;
    border: 1px solid #DE6B4A;
    &:hover {
        background-color: #DB5D39;
    }
    &.disabled {
        background-color: #efb6a4;
    }
    color: white;
    fill: white;
}

.feedae-button-secondary {
    background-color: white;
    &:hover {
        background-color: #F4F4F6;
    }
    &.disabled {
        color: #8b8c8e;
    }
    color: #171A1D;
    fill: #DB5D39;
    stroke: #DB5D39;
    border: 1px solid #E6E8EA;
    border-radius: 8px;
}

.feedae-border-gray {
    border: 1px solid #E6E8EA;
}

.feedae-button-muted {
    background-color: white;
    &:hover {
        background-color: #F1EDE9;
        color: #171A1D;
    }
    &.disabled {
        color: #8b8c8e;
    }
    color: #717882;
    fill: #717882;
    stroke: #717882;
}

.feedae-bg-gray-green {
    background-color: #F1EDE9;
}

.feedae-button-marron {
    background-color: #FAE4DB;
    &:hover {
        background-color: #FAE4DB;
        color: #462319;
    }
    &.disabled {
        color: #FAE4DB;
    }
    color: #462319;
    fill: #462319;
    stroke: #462319;
}

.feedae-disable-border-right-left-button {
    button {
        border-left: none;
        border-right: none;
        border-radius: 0;
        box-shadow: none;
    }
}


#gleap-badge {
    padding: 0px 4px;
    height: 20px;
    min-width: 20px;
    border-radius: 20px;
    background-color: red;
    color: #fff;
    font-size: 10px;
    font-family: sans-serif;
    text-align: center;
    line-height: 20px;
    &.minimized {
        height: 15px;
        min-width: 15px;
        margin-left: -40px;
        margin-top: -13px;
        line-height: 15px;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */