/*#region segment*/
.slsegment-control {
    padding: 2px;
    width: 100%;
    border: 1px solid #003250;
    border-radius: 3px;
}

.slsegments {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: justify;
    -webkit-box-sizing: border-box;
    padding-left: 0px;
    margin-bottom: 0px;
    border: solid 2px #efefef;
}

    .slsegments ul {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .slsegments > li {
        cursor: pointer;
        margin: 2px;
        display: block;
        font-weight: 700;
        font-size:0.75rem;
        text-align: center;
        background-color: #ffffff;
        border-color: #003250;
        border-radius: 3px;
        color: #003250;
        padding: 2px;
        -webkit-box-flex: 1;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
        transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        transition-delay: 0s;
        transition-property: color;
    }

        .slsegments > li.selected {
            /*  background-color: #ff9800;*/
            background-color: #FFCF40;
        }
/*#endregion segment*/

/*#region card*/
.card1 {
    border: solid 1px rgba(0, 123, 255, .7);
    /*    -webkit-box-shadow: 0 10px 15px rgba(0,0,0,.1);
        box-shadow: 0 10px 15px rgba(0,0,0,.1);
        -webkit-transition: .5s;
        transition: .5s;*/
}

    .card1:hover {
        -webkit-box-shadow: 0 10px 15px rgba(0,0,0,.5);
        box-shadow: 0 10px 15px rgba(0,0,0,.5);
        -webkit-transition: .5s;
        transition: .5s;
        border-color: #007bff;
        /*    -webkit-transform: scale(1.05);
        transform: scale(1.05);*/
    }
/*#endregion card*/

/*#region container1*/
.cs-baseinfocontent {
    border: 1px solid #ccc;
    border-radius: 3px;
    display: table;
    padding: 10px;
    width: 100%;
    height: 100%;
}
/*#endregion container1*/

/*#region form*/
.container-f {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    padding:20px;
}

.aa-layout {
    display: flex;
    flex: auto;
    flex-direction: column;
    min-height: 0;
    background: #f0f2f5;
    height: 100% !important;
}
.aa-layout-content {
    height: 100% !important;
    overflow: auto;
}

.w-full {
    width: 100%;
}

.w-350 {
    width: 350px;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.border-b {
    border-bottom-width: 1px;
}

.border-gray-300 {
    border: none;
    border-bottom: solid 1px rgb(209 213 219 /1);
}

.focus:outline-none {

}

.focus:border-indigo-500 {

}

.tracking-wide {
    letter-spacing: 0.025em;
}

.border-radius-20 {
    border-radius: 20px;
    border:solid 1px grey;

}

.font-semibold {
    font-weight: 600;
}

.text-gray-100 {
    color: rgb(243 244 246 /1);
}

.rounded-full {
    border-radius: 9999px;
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-m-bg {
    background-image: linear-gradient(40deg, #ff703e 0%, #ffec4e 100%) !important;
    font-size: medium;
    font-weight:500;
}

.focus\:border-red-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

.focus\:border-indigo-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity));
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.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);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-white:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}

.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}

.focus\:ring-offset-gray-800:focus {
    --tw-ring-offset-color: #1f2937;
}

.text-indigo-900 {
    color: rgb(49 46 129 /1);
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.rg-col {
    border-radius: 0px 20px 20px 0px;
}

@media (max-width: 767px) {
    .rg-bg-col {
        display: none !important;
    }

    .rg-col {
        border-radius: 20px !important;
    }
}
/*#endregion form*/

/*#region stepperprogres1*/
@keyframes rotateMain {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateInner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.centralized {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-container {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    position: relative;
}

    .main-container .main-circle {
        border: 6px solid #bcbcbc;
        border-radius: 100%;
        box-sizing: border-box;
        padding: 24px;
        height: 300px;
        width: 300px;
        position: relative;
    }

        .main-container .main-circle .inner {
            background: #ededed;
            border: 4px solid #e3e3e3;
            border-radius: 100%;
            box-shadow: 4px 5px 5px 0px rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            color: #616161;
            font-size: 24px;
            height: 100%;
            line-height: 1.5;
            text-align: center;
            width: 100%;
        }

    .main-container .bubble-container {
        border: 6px;
        box-sizing: border-box;
        height: 300px;
        position: absolute;
        width: 300px;
        opacity: 0;
        transform: rotate(0deg);
        transition: transform ease-in 3.7s, opacity ease 1s;
    }

        .main-container .bubble-container .pointer {
            background: #fff;
            border: 4px solid #bcbcbc;
            border-radius: 100%;
            box-sizing: border-box;
            position: absolute;
            left: calc(-17px + 3px);
            height: 34px;
            top: calc(50% - 17px);
            width: 34px;
        }

            .main-container .bubble-container .pointer .arrow {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 7px 14px 7px 0;
                border-color: transparent #bcbcbc transparent transparent;
                position: absolute;
                left: -15px;
                top: 5.52px;
            }

            .main-container .bubble-container .pointer .inner {
                background: #000;
                border-radius: 100%;
                justify-content: center;
                box-sizing: border-box;
                height: 22px;
                width: 22px;
                align-items: center;
                display: inline-grid;
                font-weight: bold;
                font-size: larger;
            }

        .main-container .bubble-container .bubble {
            border-radius: 100%;
            box-sizing: border-box;
            position: absolute;
            height: 110px;
            top: calc(50% - 55px);
            left: -145px;
            width: 110px;
            transform: rotate(0deg);
            transition: all ease 0.8s;
        }

            .main-container .bubble-container .bubble .inner {
                background: #fff;
                border-radius: 100%;
                box-shadow: 4px 5px 5px 0px rgba(0, 0, 0, 0.2);
                box-sizing: border-box;
                height: 84px;
                width: 84px;
                overflow: hidden;
                text-align:center;
            }

        .main-container .bubble-container.black .bubble,
        .main-container .bubble-container.black .pointer .inner {
            background: #505269;
        }

        .main-container .bubble-container.blue-dark .bubble,
        .main-container .bubble-container.blue-dark .pointer .inner {
            background: #4c67aa;
        }

        .main-container .bubble-container.blue-light .bubble,
        .main-container .bubble-container.blue-light .pointer .inner {
            background: #25ade1;
        }

        .main-container .bubble-container.green .bubble,
        .main-container .bubble-container.green .pointer .inner {
            background: #8dc03f;
        }

        .main-container .bubble-container.orange .bubble {
            background: #fa9128;
        }

        .main-container .bubble-container.orange .pointer .inner {
            background: #fa9128;
        }

        .main-container .bubble-container.red .bubble,
        .main-container .bubble-container.red .pointer .inner {
            background: #e46020;
        }
/*#endregion stepperprogres1*/

/*#region progress1*/
@property --percent {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

.progress {
    --fill-neutral: hsl(0 0% 25%);
    --fill-from: hsl(0 100% 50%);
    --fill-to: hsl(100 100% 50%);
    --part-count: 20;
    --part-spacing: 1deg;
    --part-width: 10%;
    --animation-duration: 2s;
    font-size: 1.5rem;
    width: 4em;
    aspect-ratio: 1/1;
    font-family: system-ui, sans-serif;
    color: hsl(0 0% 95%);
    display: grid;
    place-items: center;
    position: relative;
    &::before{
    content: "";
    inset: 0;
    position: absolute;
    border-radius: 50%;
    background-image: conic-gradient( transparent var(--percent), var(--fill-neutral) var(--percent) ), conic-gradient(var(--fill-from), var(--fill-to));
    --part-size: calc(360deg / var(--part-count) - var(--part-spacing));
    mask-image: repeating-conic-gradient( transparent 0 calc(var(--part-spacing) / 2), black calc(var(--part-spacing) / 2 + 0.25deg) calc(var(--part-spacing) / 2 + var(--part-size) - 0.25deg), transparent calc(var(--part-spacing) + var(--part-size) / 2) calc(var(--part-size) + var(--part-spacing)) ), radial-gradient( 100% 100%, black calc(50% - var(--part-width) - 1px), transparent calc(50% - var(--part-width)) );
    mask-composite: subtract, add;
    animation: progress-fill var(--animation-duration) linear forwards;
}

}

@keyframes progress-fill {
    from {
        --percent: 0%;
    }
}

/*#endregion progress1*/

.validation-message {
    color: red;
}

.rgstr {
    border-radius: 0px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}