/*
* demo.css
* File include item demo only specific css only
******************************************************************************/
@import url("https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700,800,900&display=swap");
@font-face {
    font-family: 'Metropolis Thin';
    src: url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-Black.otf');
    src: url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-BlackItalic.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-Bold.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-BoldItalic.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-ExtraBold.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-ExtraBoldItalic.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-ExtraLight.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-ExtraLightItalic.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-Light.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-LightItalic.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-Medium.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-MediumItalic.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-Regular.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-RegularItalic.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-SemiBold.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-SemiBoldItalic.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-Thin.otf') format('embedded-opentype'), url('/website-assets/assets/fonts/Metropolis-fonts/Metropolis-ThinItalic.otf') format('embedded-opentype');
    /*    font-weight: 400;
    font-style: normal;
    font-stretch: normal;*/
}

.menu .app-brand.demo {
    height: 64px;
    margin-top: 12px;
}

.app-brand-logo.demo svg {
    width: 60px;
    height: 60px;
}

.app-brand-text.demo {
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    /*text-transform: lowercase;*/
    color: #1081C4 !important
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
    z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
    display: block !important;
}

.demo-inline-spacing > * {
    margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir='rtl'] .rtl-only {
    display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
}

.layout-demo-placeholder img {
    width: 900px;
}

.layout-demo-info {
    text-align: center;
    margin-top: 1rem;
}

.tagify__input {
    /* padding: 0; */
    padding-left: 5px !important;
}

#passwordMessage {
    margin-top: 10px;
    font-weight: bold;
}

.invalid {
    color: red !important;
}

    .invalid:before {
        position: relative;
        content: "✖" !important;
        margin-right: 10px;
    }

.valid {
    color: green;
}

    .valid:before {
        position: relative;
        content: "✔";
        margin-right: 10px;
    }

.msg {
    margin: 0px;
}

.style,
.style3 {
    position: absolute;
    top: 0;
    right: 0;
    background: #ecf5f9;
    transition: opacity 0.5s ease-in-out;
    width: 33.33%;
/*    border: 2px dotted #00aaff;*/
    padding: 20px 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    overflow: hidden;
    opacity: 0;
}
#signUp {
    background-image: url('../img/backgrounds/bg-register.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: #1C77FF;
    overflow: hidden;
    position: relative;
    height: 100%;
}

#signUpDiv1 {
    height: 100vh;
    width: 100%;
  /*  background-color: rgba(0,0,0,0.4);*/
}
#signUpDiv1Inner {
    color: white; font-size: 30px; 
    font-weight:400; 
    font-family:cursive; 
    text-align: left; 
    padding: 0px 38px 0px 20px;
}
#signUpDiv2 {
    height:100vh;
    overflow:auto;
    background-color:#ffffff;
}
#signIn {
    background-image: url('../img/backgrounds/bg-2.jpg');
    background-size: contain;
    overflow: hidden;
    position: relative;
    height: 100%;
}
#signInDiv1 {
    height: 100vh;
    width: 100%;
/*    background-color: rgba(0,0,0,0.4)*/
}
#signInDiv1Inner {
    color: white; 
    font-size: 30px; 
    font-weight:400; 
    font-family:cursive; 
    text-align: left; 
    padding: 0px 38px 0px 20px;
}
#signInDiv2 {
    opacity: inherit.4;
    height: 100vh;
    overflow: auto;
}
.typing-container {
    color: #fffdfd;
    font-size: 27px;
    font-weight: 400;
    font-family: 'metropolis-thin', sans-serif;
    text-align: left;
    padding: 0px 38px 0px 20px;
    position: absolute;
    top: 30%;
    /* backdrop-filter: blur(4px) saturate(100%); */
    text-shadow: 2px 1px 24px #292727, 0 0 1.5em #000000, 0 0 0.2em #03c3ec;
}
.card .card-body .font-size{
    font-size:20px !important;
}
.bg-custom {
  background-color: #eaf8ff;
}
.loading {
    align-items: center;
    display: flex;
    justify-content: center;
    /*   height: 100%;
    position: fixed;
    width: 100%;*/
}

.loading__dot {
    animation: dot ease-in-out 1s infinite;
    background-color: grey;
    display: inline-block;
    height: 12px;
    margin: 10px;
    width: 12px;
}

    .loading__dot:nth-of-type(2) {
        animation-delay: 0.2s;
    }

    .loading__dot:nth-of-type(3) {
        animation-delay: 0.3s;
    }

@keyframes dot {
    0% {
        background-color: grey;
        transform: scale(1);
    }

    50% {
        background-color: #00aaff;
        transform: scale(1.3);
    }

    100% {
        background-color: grey;
        transform: scale(1);
    }
}
.css {
    transition: all 0.5s ease-out;
}
    .css:hover {
        background-color: #d3edfa;
        color: #1284C8;
        cursor:pointer;
    }
#promoMsg{
    font-size : 13px;
    margin-top:5px;
}
.pkgApproval{
font-size:16px !important;
}
.expiryDays {
    font-weight: 800;
    font-size: 16px;
    color: #dc000094;
}
.activeCard {
    border: 1px solid #03c3ec !important;
    box-shadow: #00aaff50 0px 18px 50px -10px !important;
}

/*for Inputs border-color*/
/*.form-control {
    border: 1px solid #03c3ec !important;
}*/

/*for html Select border-color*/
.form-select {
    border: 1px solid #03c3ec !important;
}

/*for Checkbox border-color*/
.form-check-input {
    border: 1px solid #03c3ec !important;
}

/*for Dropzone border-color*/
.dropzone {
    border: 2px dashed #03c3ec !important;
}

/*for Quill box border-color*/
.light-style .ql-snow.ql-container {
    border-bottom: .0625rem solid #03c3ec !important;
    border-right: .0625rem solid #03c3ec !important;
    border-left: .0625rem solid #03c3ec !important;
}
.light-style .ql-snow.ql-toolbar, .light-style .ql-snow .ql-toolbar {
    border: .0625rem solid #03c3ec !important;
}
.ql-snow .ql-editor {
    min-height: 10rem !important;
}

/*for DrpDowns border-color*/
.light-style .select2-container--default .select2-selection {
    border: 1px solid #03c3ec !important;
}
.select2-container--default.select2-container--focus .select2-selection, .select2-container--default.select2-container--open .select2-selection {
    border-color: #697a8d !important;
}
.thumbnail-card {
    padding: 10px;
    text-align: center;
}

    .thumbnail-card img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
    }

.remove-btn, .view-btn {
    width: 48%; /* Adjust width as needed */
}
#formLayer {
    position: relative;
    overflow: hidden;
}

    #formLayer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / 24%);
        z-index: 1;
        display: block;
        pointer-events: none;
    }

    #formLayer.blur-content {
        filter: blur(2px);
        pointer-events: none;
        user-select: none;
    }

    #formLayer.active {
        filter: none;
        pointer-events: auto;
        user-select: auto;
    }

        #formLayer.active::before {
            display: none;
        }