/*html, body {*/
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    /*font-family: Roboto, Helvetica, Arial, "sans-serif";
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}*/

.app-header-logo {
    /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
    height: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
}

.main-content-toppadding {
    /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
}


 /* this make the top bar sticky for the mud tabs */
/* do not change the name of this class as the JS relies on it */
.mudtabs-sticky-mycustom .mud-tabs-tabbar {
    position: sticky !important;
    top: 0;
    z-index: 10;
}


/* ============================================================================
   STICKY CONTENT SYSTEM FOR FEEDBACK TABS
   ============================================================================
   This class allows content within tab panels to stick below the sticky tab bar.
   Currently used in VenueNoteWithFeedbackDialog.razor for the feedback tab's
   header section (loading indicator, pagination, "Add Feedback" button).

   HOW IT WORKS:
   - The tab bar itself is sticky at top: 0 (via .mudtabs-sticky-mycustom above)
   - This class makes content sticky at top: var(--tab-bar-height)
   - The --tab-bar-height variable is dynamically calculated by tabBarHeightFix.js
   - This ensures the sticky content sits exactly below the tab bar

   CURRENT LIMITATION:
   - Only supports 2 levels of stacking (tab bar + one sticky content element)
   - If you need more levels (e.g., tab bar, then header, then filters, then actions),
     this approach would need to be generalized

   FUTURE ENHANCEMENT OPPORTUNITY:
   If this feature needs to be used elsewhere with multiple stacked sticky elements:
   1. Create a generic system with multiple CSS variables:
      --sticky-layer-1-height (for tab bar)
      --sticky-layer-2-height (for first content element)
      --sticky-layer-3-height (for second content element)
      etc.
   2. Create corresponding CSS classes:
      .sticky-layer-1 { top: 0; }
      .sticky-layer-2 { top: var(--sticky-layer-1-height); }
      .sticky-layer-3 { top: calc(var(--sticky-layer-1-height) + var(--sticky-layer-2-height)); }
      etc.
   3. Enhance tabBarHeightFix.js to:
      - Detect all sticky elements with data attributes (e.g., data-sticky-layer="1")
      - Calculate heights for each layer
      - Set CSS variables for each layer
      - Automatically calculate cumulative heights for positioning

   This would make the system reusable for any number of stacked sticky elements
   without needing custom JavaScript for each use case.
   ============================================================================ */
/* do not change the name of this class as the JS relies on it */
.mudtabs-content-sticky {
    position: sticky !important;
    /* The --tab-bar-height variable is dynamically calculated by tabBarHeightFix.js based on the actual tab bar height */
    top: var(--tab-bar-height, 48px); /* Default to 48px if variable not set */
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

/* ============================================================================
   DIALOG CONTENT PADDING FIX FOR STICKY TAB SYSTEM
   ============================================================================
   This class is used in conjunction with the sticky tab system above.

   PROBLEM IT SOLVES:
   - MudBlazor changed top margin to padding in .mud-dialog-content
   - When scrolling with sticky tabs, text would show through the padding gap
   - This looked visually broken

   SOLUTION:
   - Remove the top padding (set to 0px)
   - The tabs already have their own padding, so this looks better anyway

   USAGE:
   - Apply this class to the MudDialog component along with dialog size classes
   - Example: Class="dialog-mycustom-standard dialog-mycustom-contentstickyfix"
   - Currently used in VenueNoteWithFeedbackDialog.razor

   NOTE: This is part of the sticky tab system. If you're implementing sticky
   tabs elsewhere, you'll likely need this class to prevent the padding gap issue.

    If needed, you can add a margin-top instead of padding-top which will give you a gap,
    but won't have the see-through issue with scrolling content... thought about this after the fact
    so won't change it now, as it would require testing, and 0 padding/margin is fine.

   ============================================================================ */
.dialog-mycustom-contentstickyfix .mud-dialog-content
{
    padding-top: 0px;
}



/*maybe go back to just a height specification instead of max-height and min-height if we have any issues.
    moved to a min/max model because some dialogs look a bit funny with a lot of empty space.

    actually for the tabbed control, min and max has an effect of changing height when changing tabs which looks not good.

    use dialog-mycustom-standard-minmax for the minmax model, and for dialogs where you want a fixed height use dialog-mycustom-standard-fixed
*/
.dialog-mycustom-standard-fixedheight {
    /* baseline fallback */
    height: calc(80vh);
    /*max-height: 100vh;*/
    /*max-height: -webkit-fill-available;*/
    /* newer viewport units */
    height: calc(80svh); /* small viewport height */
    /*max-height: 100svh;*/
    /* best on modern mobile (dynamic viewport) */
    height: calc(80dvh);
   
}

/*maybe go back to just a height specification instead of max-height and min-height if we have any issues.
    moved to a min/max model because some dialogs look a bit funny with a lot of empty space.

    actually for the tabbed control, min and max has an effect of changing height when changing tabs which looks not good.
*/
.dialog-mycustom-standard-minmaxheight {
    /* baseline fallback */
    max-height: calc(80vh);
    /*max-height: 100vh;*/
    /*max-height: -webkit-fill-available;*/
    /* newer viewport units */
    max-height: calc(80svh); /* small viewport height */
    /*max-height: 100svh;*/
    /* best on modern mobile (dynamic viewport) */
    max-height: calc(80dvh);
    /*max-height: 100dvh;*/
    /*display: flex;
    flex-direction: column;
    overflow: hidden;*/
    /* baseline fallback */
    min-height: calc(40vh);
    /*max-height: 100vh;*/
    /*max-height: -webkit-fill-available;*/
    /* newer viewport units */
    min-height: calc(40svh); /* small viewport height */
    /*max-height: 100svh;*/
    /* best on modern mobile (dynamic viewport) */
    min-height: calc(40dvh);
    /*max-height: 100dvh;*/
    /*display: flex;
    flex-direction: column;
    overflow: hidden;*/
}


.dialog-mycustom-fullscreen {
    
}


/*.dialog-content-mycustom-standard {*/
    /* baseline fallback */
    /*height: calc(60vh);*/
    /*max-height: 100vh;*/
    /* old iOS Safari fallback */
    /*height: -webkit-fill-available;*/
    /*max-height: -webkit-fill-available;*/
    /* newer viewport units */
    /*height: calc(60svh);*/ /* small viewport height */
    /*max-height: 100svh;*/
    /* best on modern mobile (dynamic viewport) */
    /*height: calc(60dvh);*/
    /*max-height: 100dvh;*/
    /*display: flex;
    flex-direction: column;
    overflow: hidden;*/
/*}

.dialog-content-mycustom-fullscreen {*/
    /* baseline fallback */
    /*height: calc(100vh - 70px);*/
    /*max-height: 100vh;*/
    /* old iOS Safari fallback */
    /*height: -webkit-fill-available;*/
    /*max-height: -webkit-fill-available;*/
    /* newer viewport units */
    /*height: calc(100svh - 70px);*/ /* small viewport height */
    /*max-height: 100svh;*/
    /* best on modern mobile (dynamic viewport) */
    /*height: calc(100dvh - 70px);*/
    /*max-height: 100dvh;*/
    /*display: flex;
    flex-direction: column;
    overflow: hidden;*/
/*}

.dialog-tabbedcontent-mycustom-standard {*/
    /* baseline fallback */
    /*height: calc(60vh - 50px);*/
    /*max-height: 100vh;*/
    /* old iOS Safari fallback */
    /*height: -webkit-fill-available;*/
    /*max-height: -webkit-fill-available;*/
    /* newer viewport units */
    /*height: calc(60svh - 50px);*/ /* small viewport height */
    /*max-height: 100svh;*/
    /* best on modern mobile (dynamic viewport) */
    /*height: calc(60dvh - 50px);*/
    /*max-height: 100dvh;*/
    /*display: flex;
    flex-direction: column;
    overflow: hidden;*/
/*}

.dialog-tabbedcontent-mycustom-fullscreen {*/
    /* baseline fallback */
    /*height: calc(100vh - 120px);*/
    /*max-height: 100vh;*/
    /* old iOS Safari fallback */
    /*height: -webkit-fill-available;*/
    /*max-height: -webkit-fill-available;*/
    /* newer viewport units */
    /*height: calc(100svh - 120px);*/ /* small viewport height */
    /*max-height: 100svh;*/
    /* best on modern mobile (dynamic viewport) */
    /*height: calc(100dvh - 120px);*/
    /*max-height: 100dvh;*/
    /*display: flex;
    flex-direction: column;
    overflow: hidden;*/
/*}*/




/** CUSTOM STUFF */
/* used as a way to not have content grow too large.
   Handy for when the responsive css from bootstrap does not give the desired effect, and we just want to limit the width of the content
    col-md-4 was giving weird behavior.
*/
.content-width-limiter {
    width: 100%; /* Makes the field take full width of its container */
    max-width: 500px; /* Prevents the field from becoming too wide */
    padding-left: 15px; /* Add padding to the left */
    padding-right: 15px; /* Add padding to the right for symmetry */
}


.flex-vertical-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.flex-horizontal-group-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.max-width-800 {
    max-width: 800px;
}

.max-width-900 {
    max-width: 900px;
}

.standard-page-container-mycustom {
    max-width: 800px;
    /*margin: auto;*/
    /*padding: 1rem;*/
}

.standard-page-container-large-mycustom {
    max-width: 900px;
    /*margin: auto;*/
    /*padding: 1rem;*/
}

.standard-page-container-nolimit-mycustom {
    /*max-width: 900px;*/
    /*margin: auto;*/
    /*padding: 1rem;*/
}

.fieldset-mycustom {
    border: 1px solid #ddd;
    padding: 1rem;
    margin-bottom: 1rem;
    /*background-color: #f9f9f9;*/
}

.fieldset-mycustom2 {
    border: 1px solid #ddd;
    padding: 1rem;
    margin-bottom: 1rem;
}


.fieldset-contents-mycustom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.form-control-mycustom {
    width: 100%;
    /*padding: 0.5rem;*/
    background-color: white;
    height: 2rem;
    /*padding: 9.5rem;*/
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    align-content: center;
    padding-left: 6px;
    padding-right: 0px;
}



.legend-mycustom {
    padding: 0.0rem;
    font-size: 1.0rem;
    font-weight: 600;
    width: auto;
    float: none;
}


.form-section-mycustom {
    margin-bottom: 1rem;
}

.form-section-heading-mycustom {
    font-size: 1.0rem;
    font-weight: 600;
}

.field-title-mycustom {
    font-size: 0.8rem;

}

legend {
    float: none;
}


.form-group-mycustom {
    
    /*margin-bottom: 0.5rem;*/
}

.form-label-mycustom {

}

/*label {
    display: block;
    margin-bottom: 0.5rem;
}*/

.px-4-mainpage-mycustom {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}



.page-heading-mycustom {
    font-size: 2rem;
    font-weight: bold;
    /*text-align: center;*/
}

.form-control-dateselector {
    /* max-width: 80%;*/
}

.readonly-mycustom {
    background-color: #e9ecef; /* Light gray background */
    opacity: 1; /* Override any opacity changes to ensure the background color is visible */
}

.text-box-inner {
    padding: 5px;
    padding: 0.45rem;
}

.c1-text-box {
    padding: 0px;
}



.c1-numbox-center-mycustom .c1-numeric-box-input-inner {
    text-align: center;
}

.outlined-drop-down {
    padding: 0px;
}

.logo2 img {
    max-height: 100%; /* Scale the image to fit the height of the container */
    max-width: 100%; /* Ensure the width does not exceed the container's width */
    height: 3.5rem; /* Maintain aspect ratio */
    width: auto; /* Maintain aspect ratio */
    display: block; /*Ensure there’s no extra space below the image */
    /* padding: 0px;
    margin: 0px;*/
}


/*.ql-editor {
    font-size: 16px;*/ /* Adjust to match the editor */
    /*line-height: 1.5;*/ /* Ensure spacing consistency */
/*}*/

/* system wide settings for the editor div.. this is used by the EditorItself, and also by the displaying DIVs we have in other spots
    to do custom stuff it's best to do qualifying seperate custom classes like we have done below.
*/
.ql-editor {
    font-size: 0.9rem;
    line-height: 1.4;
}

.ql-editor img {
        max-width: 100%;
        height: auto;
        min-width: 300px;
        display: block; /* Removes any inline spacing issues */
 }

/* to resize images for QuillNotes to fit in display window for users on  phones etc... can use: */
/* Make sure images don't overflow the container */
/*.note-view-content img {
    max-width: 100%;
    height: auto;
}*/

.ql-editor-nopadding .ql-editor {
    padding: 0px;
}

.ql-editor-edit-mycustom .ql-editor {
    min-height: 12rem; /* 150px;  Set the minimum height */
    max-height: 18rem; /* Set the maximum height */
    overflow-y: auto; /* Enable vertical scrolling when needed */
}

.ql-editor-edit-largeheight-mycustom .ql-editor {
    min-height: 12rem; /* 150px;  Set the minimum height */
    /*max-height: 18rem;*/ /* Set the maximum height */
    overflow-y: auto; /* Enable vertical scrolling when needed */
}

/* Add this CSS to fix the Quill toolbar position */
.ql-editor-edit-largeheight-mycustom .ql-toolbar.ql-snow {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
    /* border-top: none; */
}

/* Add this CSS to fix the Quill toolbar position */
    .ql-editor-edit-mycustom .ql-toolbar.ql-snow {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
    /* border-top: none; */
}




.ql-editor-view-mycustom .ql-editor {
    /*max-height: 50rem;*/ /* Set the maximum height */
    overflow-y: auto; /* Enable vertical scrolling when needed */
}


.force-left-mud-checkbox-mycustom .mud-checkbox-input {
    justify-content: flex-start !important;
}

.mud-radio-group-morespacing-mycustom .mud-radio-group {
    column-gap: 1.5rem;
}

.custom-validation-summary {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #333; /* Dark gray for error text */
    padding: 10px;
    border-radius: 5px;
    margin: 15px 0;
}

    .custom-validation-summary h4 {
        margin-top: 0;
        font-size: 0.9rem; /* Smaller title text */
        color: #000; /* Black title text */
    }

    .custom-validation-summary ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .custom-validation-summary li {
        margin: 5px 0;
        color: #444; /* Dark gray error text */
    }

.custom-mud-validation-summary {
    background-color: var(--mud-palette-error-light);
    border: 1px solid var(--mud-palette-error-main);
    border-radius: 4px;
    margin: 16px 0;
}

 .custom-mud-validation-summary ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

 .custom-mud-validation-summary li {
        margin: 8px 0;
        color: var(--mud-palette-error-contrastText);
    }


.main-container-viewport-fix-mycustom {
    height: calc(var(--vh, 1vh) * 100); /* Uses the dynamic variable */
    overflow: auto; /* Allows scrolling if content overflows the visible area */
}

/* This is to fix the issue of viewport not extending on mobile phone with keyboard  */
html, body {
    height: 99% !important;
    
    /*margin: 0;
    padding: 0;*/
}

    /*  this is where the textbox is readonly, but can't change color here, because it takes it colour from the outer control, but that control does not have the readonly tag.
    .text-box-inner[readonly] {
    background-color: #e9ecef;*/ /* Light gray background */
    /*opacity: 1;*/ /* Override any opacity changes to ensure the background color is visible */
    /*}*/
    .button-right {
    margin-top: 0.5rem;
}

.mudblazor-cust-pag ul
{
    padding-left:0;
}



/*.c1-text-box[readonly] {
    background-color: #e9ecef;*/ /* Light gray background */
/*opacity: 1;*/ /* Override any opacity changes to ensure the background color is visible */
/*}*/
.input-width {
    width: 50%;
}


.mud-table-toolbar {
    flex-wrap: wrap-reverse;
    height: inherit;
    gap: 0.5rem;
    padding: 0.5rem;
    justify-content:flex-end;
}


.shiftlist-stagename-mycustom {
    color: deeppink;
}


/*.black-text-mudblazor-warning-mycustom*/
.mud-alert-text-warning {
    color: black !important;
}

/* used to hide the reconnect modal */
/*#components-reconnect-modal {
    display: none !important;
}*/

/* Shift Content Background Classes */
.skimpybarmaid-background {
    background-color: var(--skimpybarmaid-color) !important;
}

.skimpyevent-background {
    background-color: var(--skimpyevent-color) !important;
}

.topless-background {
    background-color: var(--topless-color) !important;
}

.show-background {
    background-color: var(--show-color) !important;
}

.clothedbarmaid-background {
    background-color: var(--clothedbarmaid-color) !important;
}

.djmc-background {
    background-color: var(--djmc-color) !important;
}

.skimpydj-background {
    background-color: var(--skimpydj-color) !important;
}

/* CSS Variables for Shift Content Colors */
:root {
    --skimpybarmaid-color: #c06caf;
    --skimpyevent-color: #af387b;
    --topless-color: #f7bcb6;
    --show-color: #e90069;
    --clothedbarmaid-color: #a90069;
    --djmc-color: #88d2dd;
    --skimpydj-color: #8194f9;
}

@media (min-width: 600px) {

    .app-header-logo {
        /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
        height: calc(var(--mud-appbar-height));
    }

    .main-content-toppadding {
        /* little adjustment that MudBlazor makes on 600px needs to be accounted for
        we use media queries below to adjust for different screen sizes
    */
        padding-top: var(--mud-appbar-height);
    }
}

/* Modified to 1199.98 pixels to keep inline with the changes in this file and the NavMenu.Razor.css file  and the MainLayout.razor.css file.*/
@media (max-width: 1199.98px) {

    /* to get around the issue of the checkbox being off screen, because on a thin screen we remove most of the screen padding
        and by default the checkbox goes to the left of the text.
    */
    .form-check-input {
        position: relative !important;
        /*margin-left: 0 !important;*/
    }
}


/* Modified to 1200 pixels to keep inline with the changes in this file and the NavMenu.Razor.css file  and the MainLayout.razor.css file.*/
/*@media (min-width: 768px) {*/
/* these changes happen when the side bar is shown at 1000 pixels*/
@media (min-width: 1200px) {

    .form-group-mycustom {
        display: flex;
        align-items: center;
    }

    .form-label-mycustom {
        width: 200px; /* Fixed width to align labels */
        margin-right: 10px; /* Space between label and input */
        flex: unset;
        margin-bottom: unset;
    }

    .check-mycustom {
        width: 6em;
        margin-right: 10px;
    }

    .standard-page-container-mycustom {
        /*max-width: 700px;*/
        /*margin: auto;*/
        padding: 1rem;
    }
    .standard-page-container-large-mycustom {
        padding: 1rem;
    }
    .standard-page-container-nolimit-mycustom {
        padding: 1rem;
    }


    .button-right {
        margin-top: 0rem;
        margin-left: 1rem;
    }

    .form-label-oldflex {
        flex: 1;
        margin-bottom: 0;
    }

    .form-control-mycustom {
        flex: 3;
    }

    .px-4-mainpage-mycustom {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /*.c1-drop-down {
        flex: 3;
    }*/

}