﻿.sfrm-tab-container {
    display: flex;
    font-family: 'Poppins500';
    font-size: 1.1rem;
    gap: 10px;
    color: #333;
    flex-wrap: wrap;
}

    .sfrm-tab-container .sfrm-tab {
        border: solid 2px #831CEF;
        border-radius: 7px;
        padding: 5px;
        min-width: 55px;
        text-align: center;
        cursor: pointer;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }

.nfmb-selected {
    color: #fff;
    background-color: #831CEF;
}

.nfmb-disabled {
    color: #ccc;
    border-color: #ccc !important;
    cursor: unset !important;
}

.nfmb-unread-msgs {
    color: red;
    font-size: 11px;
    margin-left: 5px;
}

.nfmb-has-items {
    font-size: 12px;
    margin-left: 5px;
}

.sfrm-body {
    position: relative;
}

    .sfrm-body .title {
        font-family: 'Poppins500';
        font-size: 20px;
        font-weight: 600;
        border-bottom: solid 1px #ddd;
        padding-bottom: 15px;
        color: #831CEF;
    }

    .sfrm-body .field-group {
        margin-top: 10px;
    }

        .sfrm-body .field-group .field-title {
            margin-top: 20px;
            font-size: 16px;
            color: #831CEF;
        }

        .sfrm-body .field-group .field-desc {
            font-size: 13px;
            color: #777;
        }

        .sfrm-body .field-group .field-error {
            font-size: 13px;
            color: crimson;
        }

        /* Text Box */
        .sfrm-body .field-group .field-input {
            margin-top: 5px;
            margin-bottom: 5px;
        }

            .sfrm-body .field-group .field-input input[type=text] {
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100%;
                border: 0px solid;
                border: solid 1px #888;
                border-radius: 5px;
            }

            .sfrm-body .field-group .field-input input[type=number] {
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100px;
                border: 0px solid;
                border: solid 1px #888;
                border-radius: 5px;
            }

            .sfrm-body .field-group .field-input input[type=time] {
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100px;
                border: 0px solid;
                border: solid 1px #888;
                border-radius: 5px;
            }

            .sfrm-body .field-group .field-input input[type=date] {
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100%;
                border: 0px solid;
                border: solid 1px #888;
                border-radius: 5px;
            }

        .sfrm-body .field-group .field-input-changed {
            margin-top: 5px;
            margin-bottom: 5px;
        }

            .sfrm-body .field-group .field-input-changed input[type=text] {
                background-color: lightyellow;
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100%;
                border: 0px solid;
                border: solid 1px #888;
                border-radius: 5px;
            }

            .sfrm-body .field-group .field-input-changed input[type=number] {
                background-color: lightyellow;
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100px;
                border: 0px solid;
                border: solid 1px #888;
                border-radius: 5px;
            }

            .sfrm-body .field-group .field-input-changed input[type=time] {
                background-color: lightyellow;
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100px;
                border: 0px solid;
                border: solid 1px #888;
                border-radius: 5px;
            }

            .sfrm-body .field-group .field-input-changed input[type=date] {
                background-color: lightyellow;
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100%;
                border: 0px solid;
                border: solid 1px #888;
                border-radius: 5px;
            }

        .sfrm-body .field-group .field-input-error {
            margin-top: 5px;
            margin-bottom: 5px;
        }

            .sfrm-body .field-group .field-input-error input[type=text] {
                font-size: 15px;
                outline: none;
                padding: 5px;
                width: 100%;
                border: 0px solid;
                border: solid 1px crimson;
                border-radius: 5px;
            }

        /* Check box */

        .sfrm-body .field-group .field-input .checkbox {
            font-size: 15px;
            outline: none;
            padding: 5px;
            width: 100%;
            border: 0px solid;
            border: solid 1px #888;
            border-radius: 5px;
            cursor: pointer;
            vertical-align: middle;
        }

        .sfrm-body .field-group .field-input-changed .checkbox {
            background-color: lightyellow;
            font-size: 15px;
            outline: none;
            padding: 5px;
            width: 100%;
            border: 0px solid;
            border: solid 1px #888;
            border-radius: 5px;
            cursor: pointer;
            /*vertical-align: middle;*/
        }

.checkbox-text {
    vertical-align: text-bottom;
}

/* Attachments */
.sfrm-body .tbl {
    font-size: 13px;
}

.sfrm-body .cell {
    border: solid 1px #ddd;
    padding: 5px;
    font-size: 15px;
}

.sfrm-body .new {
    animation: wiggle 2s linear infinite;
    padding: 0 5px;
    background-color: red;
    border-radius: 5px;
    transform-origin: 50% 5em;
    display: inline-block;
    color: #fff;
    font-size: 10px;
}

@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
    }

    40%, 100% {
        transform: rotateZ(0);
    }
}

.pointinstdform img {
    width: 100% !important;
}
