@import "variables";

.form-tabs-container {
    margin: 5rem 0rem;

    &--first-form-group {
        margin-top: 1rem;
    }

    &--ul {
        justify-content: center;
        gap: 1rem;
        &--btn {
            height: 44px;
            min-width: 160px;
            justify-content: center;
            border-radius: 5px;
            background-color: #040059;
            color: white;
            text-transform: none;
            font-size: 1.6rem;
            display: flex;
            align-items: center;
            cursor: pointer;
            border: none;
            padding-left: 15px;
            padding-right: 15px;
            margin-bottom: 1rem;

            &:active,
            &:focus-visible,
            &.active,
            &:hover {
                background-color: #0d60c8 !important;
                color: #fff !important;
                transition: 0.3s;
            }
        }

        .tab-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;

            .tab-img {
                width: 20px;
                height: 20px;
                filter: invert(97%) sepia(79%) saturate(2%) hue-rotate(247deg) brightness(109%) contrast(100%);
            }
        }
    }

    .card-body{

        .database-info {
            display: flex;
            align-items: center;
            gap: 2rem;
            p{
                font-size: 1.6rem;
                color: black;
                // font-weight: bold;
                font-style: italic;
            }    
        }

        .no-contract-data {
            margin-top: 1rem;
            font-size: 1.6rem;
            font-weight: bold;
            text-align: center;
        }

        .card-body-inner {
            display: grid;
            grid-template-columns: auto auto;;
            column-gap: 2rem;
        }

        .edit-tab-btn-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 1.5rem;

            a {
                display: flex;
                align-items: center;
                gap: 1rem;
                background-color: $alternate-bg-color;
                padding: 1.1rem 5.2rem;
                color: #fff;
                font-size: 1.4rem;
                font-weight: $regular;
                white-space: nowrap;
                max-width: 189px;
                border-radius: 5px;
                cursor: pointer;

                img {
                    width: 16px;
                    height: 16px;
                    filter: invert(97%) sepia(79%) saturate(2%) hue-rotate(247deg) brightness(109%) contrast(100%);
                }

                span {
                    font-size: 1.6rem;
                }

                &:hover {
                    background-color: $main-color;
                    transition: 0.3s;
                }
            }

            .cancel-btn {
                display: none;
                align-items: center;
                gap: 1rem;
            }
        }

        .save-btn-container {
            display: flex;
            justify-content: center;

            a {
                background-color: $alternate-bg-color;
                padding: 1.1rem 5.2rem;
                color: #fff;
                font-size: 1.4rem;
                font-weight: $regular;
                white-space: nowrap;
                max-width: 189px;
                border-radius: 5px;
                cursor: pointer;

                &:hover {
                    background-color: $main-color;
                    transition: 0.3s;
                }

            }
        }

        .update-btn,
        .keep-user-btn {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;

            span {
                text-transform: none;
                font-size: 1.6rem;
            }

            img {
                width:16px;
                height:16px;
                filter: invert(97%) sepia(79%) saturate(2%) hue-rotate(247deg) brightness(109%) contrast(100%);
            }
        }

        .main-info-container {
            &--header-row,
            &--row {
                display: grid;
                grid-template-columns:1fr 1fr;
                column-gap: 1rem;
                min-height: 68px;

                .user-code-input-container {
                    display: flex;
                    justify-content: center;

                    .user-code-input {
                        width: 50%;
                        background-color: #e9ecef;
                        border-radius: 5px;
                        color: #707070;
                        border: 1px solid #707070;
                        padding: 1.5rem;
                        text-align: center;

                        &:disabled {
                            background-color: transparent;
                            border: none;
                        }
                    }
                }
            }

            .remove {
                display: flex;
                align-items: center;
                gap: 1rem;
                max-width: none;

                span {
                    color: white;
                    font-weight: normal;
                    font-size: 1.6rem;
                }

                img {
                    width: 16px;
                    height: 16px;
                    filter: invert(97%) sepia(79%) saturate(2%) hue-rotate(247deg) brightness(109%) contrast(100%);
                }
            }
        }

        .user-units {
            .main-info-container--header-row,
            .main-info-container--row{
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
                column-gap: 1rem;
            }
        }

        .Header-buttons--button {
            background-color: #91C2D4;
            margin-top: 1.5rem;
                &:hover {
                    background-color: #040059;
                    transition: 0.3s;
                }

                .Header-buttons--button--text {
                    padding-right: 1rem;
                    font-size: 1.6rem;
                    font-weight: normal;
                    text-transform: none;
                    &:hover {
                        background-color: #040059;
                        color: white;
                        transition: 0.3s;
                    }
                }
        }

        input:not(.form-check-input) {
             &:read-only {
                background-color: #e9ecef;
                border-radius: 5px;
                border: 1px solid #707070;
                padding: 1.8rem;
            }
        }
    }

    .microservices-update {
        display: flex;
        align-items: center;

        button {
            margin-top: 2rem;
        }
    }
}