﻿
.btn-outline-danger {
    color: #D32F2F;
    /*background: var(--error-main, #D32F2F);*/
    display: block;
    background: #FFEBEE;
    font-size: 1rem;
    white-space: nowrap;
    border: 1px solid var(--error-main, #D32F2F)
}

.btn-custom-danger {
    color: #D32F2F;
    /*background: var(--error-main, #D32F2F);*/
    display: block;
    background: #FFEBEE;
    font-size: 15px;
    white-space: nowrap;
    border: 1px solid var(--error-main, #D32F2F);
    width:65px;
    height:30px;
}

    .btn-custom-danger:hover {
        background-color: #FFCDD2;
        border: 1px solid var(--error-main, #D32F2F);
        font-size: 15px;
        color: #D32F2F;
    }


.btn-secondary {
    color: #323232;
    background-color: #e6eaec;
}


/*Date*/
input[type="date"]:focus:before,
input[type="date"]:valid:before {
    content: "";
}

[type="date"]::-webkit-inner-spin-button {
    display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
    width: 17px;
    height: 18px;
    background-image: url('data:image/svg+xml,<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.1786 2.48684H13.3571V0.466283C13.3571 0.208778 13.1533 0 12.9018 0H12.5982C12.3467 0 12.1429 0.208778 12.1429 0.466283V2.48684H4.85714V0.466283C4.85714 0.208778 4.65326 0 4.40179 0H4.09821C3.84674 0 3.64286 0.208778 3.64286 0.466283V2.48684H1.82143C0.815469 2.48684 0 3.32188 0 4.35197V16.1349C0 17.165 0.815469 18 1.82143 18H15.1786C16.1845 18 17 17.165 17 16.1349V4.35197C17 3.32188 16.1845 2.48684 15.1786 2.48684ZM1.82143 3.73026H15.1786C15.5133 3.73026 15.7857 4.00918 15.7857 4.35197V6.21711H1.21429V4.35197C1.21429 4.00918 1.48667 3.73026 1.82143 3.73026ZM15.1786 16.7566H1.82143C1.48667 16.7566 1.21429 16.4777 1.21429 16.1349V7.46053H15.7857V16.1349C15.7857 16.4777 15.5133 16.7566 15.1786 16.7566Z" fill="%23323232"/></svg>');
    position: relative;
    top: -9px;
}

input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #aaa;
    margin-right: 0.5em;
}
/*Date End*/


.form-btn {
    
    font-weight: 400;
    font-size: 14px;
    border-radius: 6px;
    border: 1px;
    width: 87px;
    height: 36px;
}


.form-check-label {
    position: relative;
    top: 0px;
}


.form-check-input {
    position: relative;
    top: 0px;
    width: 16px;
    height: 16px;
}


.form-container {
    background-color: #ffffff;
    width: 1100px;
    /*height: 650px;*/
    border: 1px;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
    margin-left: 20px;
}


.form-control {
    background-color: #F5F7F9;
    /*width: 247px;*/
    height: 50px;
    font-size: 14px;
    font-weight: 400;
    color: #323232;
    line-height: 20.02px;
    letter-spacing: 0.17px;
}

.table-form-control {
    width:113px;
    height:33px;
    border-radius:3px;
    margin-left:-5px;
    padding-left:5px;
    font-size:14px;

}

/*.form-label {
    margin-left: 5px;
    background-color: #F5F7F9;
}*/


.form-select {
    background-color: #F5F7F9;
    font-size: 14px;
    /*width: 247px;*/
    height: 50px;
    font-weight: 400;
    color: #323232;
    line-height: 20.02px;
    letter-spacing: 0.17px;
    opacity: 90%;
}

    .filter-large {
        width: 247px;
        height: 50px;
    }

     .filter-small {
        width: 100px;
        height: 35px;
    }

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: #EBEDEF;
}


label .form-select {
    margin-left:50px;
}


::placeholder {
    color: black;
    opacity: 100%;
}


p {
    
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
    
}


.sub {
    
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 0px;
}


.update-btns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: -35px;
    margin-right: 10px;
}

.form-kw-label {
    font-family: Inter, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.form-kw-label-data {
    font-family: Inter, Helvetica, sans-serif;
    font-size: 14px;
    display:block;
}

.btn-kw-close {
    width: 36px;
    height: 36px;
    border: 0.5px solid #F5F7F9;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    /*margin-left: 50px;*/
    background-image: url('data:image/svg+xml,<svg width="8" height="9.23" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.8485 5L7.4125 2.043L7.94125 1.43321C8.01925 1.34325 8.01925 1.19708 7.94125 1.10712L7.3755 0.454657C7.2975 0.364701 7.17075 0.364701 7.09275 0.454657L4 4.02144L0.90725 0.454368C0.82925 0.364413 0.7025 0.364413 0.6245 0.454368L0.0585 1.10683C-0.0195 1.19679 -0.0195 1.34297 0.0585 1.43292L3.1515 5L0.0585 8.56678C-0.0195 8.65674 -0.0195 8.80292 0.0585 8.89287L0.62425 9.54534C0.70225 9.63529 0.829 9.63529 0.907 9.54534L4 5.97855L6.564 8.93554L7.09275 9.54534C7.17075 9.63529 7.2975 9.63529 7.3755 9.54534L7.94125 8.89287C8.01925 8.80292 8.01925 8.65674 7.94125 8.56678L4.8485 5Z" fill="%237F7F7F" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 300px;

}

    .btn-kw-close:hover {
        background-color: #F5F7F9;
        fill: #ffffff;
    }

        .btn-kw-close:hover i svg {
            fill: #323232;
        }

.modal-header .btn-kw-close {
    padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
    margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(.05 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}



/*
Compliance Monitor Table
*/
.table-row-non-expand {
    margin-left: 16px;
   
    font-weight: 600;
}

.table-row-expand {
    position: relative;
    padding-right: 25px;
    cursor: pointer;
}

    .table-row-expand::after {
        content: "";
        position: absolute;
        right: 10px; /* Adjust for positioning */
        top: 50%;
        width: 7px;
        height: 10px;
        background-image: url('data:image/svg+xml,<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.684675 3.75H6.31311C6.70249 3.75 6.89718 4.16992 6.62155 4.41602L3.80843 6.92969C3.6378 7.08203 3.35999 7.08203 3.18936 6.92969L0.376238 4.41602C0.100613 4.16992 0.2953 3.75 0.684675 3.75Z" fill="black"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        transform: translateY(-50%) rotate(0deg);
        transition: transform 0.3s ease-in-out;
    }

    .table-row-expand:focus::after {
        transform: translateY(-50%) rotate(180deg);
    }


td .message-btn {
    background-color: #2196F3;
    border: 1px solid #2196F3;
    content: " \F24D";
    margin: auto;
    display: block;
    width:35px;
    height: 33px;
}
    td .message-btn:hover {
        background-color: #2196F3;
        border: 1px solid #2196F3;
        content: " \F24D";
    }

td .msg-date-btn {
    background-color: red;
    border: 1px solid red;
    margin: auto;
    display: block;
    width: 33px;
    height: 33px;
    padding-right:27px;
}
.msg-date-btn:hover {
    background-color: red;
}

.msg-date-btn svg {
    margin-right: 25px;
}

    .date-badge {
        bottom: 21px;
        left: 1px;
    }

td .email-btn {
    background-color: #2196F3;
    border: 1px solid #2196F3;
    content: "\F694";
    margin: auto;
    display: block;
    width: 33px;
    height: 33px;
}

    td .email-btn:hover {
        background-color: #2196F3;
        border: 1px solid #2196F3;
        content: "\F694";
    }

td .notes-centered-cm img {
    display:block;
    margin:auto;
}

/*
    Select Location DD
*/

.select-location-dd {
    background-color: #F5F7F9;
    font-size: 14px;
    width: 100%;
    height: 55px;
    font-weight: 400;
    color: #323232;
    letter-spacing: 0.17px;
    opacity: 90%;
    text-align: left;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

    .select-location-dd:hover {
        background-color: #F5F7F9;
        border-radius: 6px;
        border: 1px solid #EBEDEF;
    }

.location-dd-i {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2" viewBox="0 0 16 16"><path fill="none" stroke="%23343a40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px 12px;
    background-position: right 0.75rem center;
}

#locationDropdownMenu {
    min-width: 265px;
    width: 100%;
    width: auto;
    max-width: 500px;
    white-space: nowrap;
    position: absolute;
    right: auto;
    left: 0;
    transform: translateX(0);
}

    #locationDropdownMenu.show {
        transform: translateX(-100%);
    }



