@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/CCTC_Components/CCTC_Components.96eldxxrtk.bundle.scp.css';

/* /Helpers/Sampler.razor.rz.scp.css */

.section[b-4akv1b49f2] {
    margin-top: 2rem;
}

.subsection[b-4akv1b49f2] {
    margin-top: 1rem;
}

.subsubsection[b-4akv1b49f2] {
    margin-bottom: 1rem;
}

.code[b-4akv1b49f2] {
    padding: 1rem;
    background-color: var(--cctc-highlight-background-color);
    border-radius: 0 0 3px 3px;
}

.fragment[b-4akv1b49f2] {
    margin-top: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--cctc-highlight-background-color);
    border-radius: 3px 3px 0 0;
}

.copy[b-4akv1b49f2] {
    cursor: pointer;
}

.copy:hover[b-4akv1b49f2] {
    color: var(--cctc-highlight-color);
}

.tabitem-content[b-4akv1b49f2] {
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
}

.link-to-related[b-4akv1b49f2] {
    color: var(--cctc-link-color);
    cursor: pointer;
}
/* /Pages/GetStarted.razor.rz.scp.css */
.guidance-wrapper[b-vxxsd730v5] {
    margin-top: 2rem;
}

li[b-vxxsd730v5] {
    margin-top: 1rem;
}
/* /Pages/Index.razor.rz.scp.css */
h3[b-050liwaj3h] {
    margin-top: 1.5rem;
}

.button-container[b-050liwaj3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 1.5rem;
}

.main-section[b-050liwaj3h] {
    text-align: center;
    padding-top: 5rem;
}

.github-logo[b-050liwaj3h] {
    height: 1.5rem;
}

/*tablet*/
@media (min-width: 576px) {
    .button-container[b-050liwaj3h] {
        padding-top: 2rem;
    }
  
    .main-section[b-050liwaj3h] {
        padding-top: 7rem;
    }

    h3[b-050liwaj3h] {
        margin-top: 2rem;
    }
}

/*desktop-small*/
@media (min-width: 1200px) {
    .button-container[b-050liwaj3h] {
        padding-top: 2rem;
    }
    
    .main-section[b-050liwaj3h] {
        padding-top: 7rem;
    }

    h3[b-050liwaj3h] {
        margin-top: 2rem;
    }
}

/*desktop-standard*/
@media (min-width: 1920px) {
    .button-container[b-050liwaj3h] {
        padding-top: 2rem;
    }
    
    .main-section[b-050liwaj3h] {
        padding-top: 10rem;
    }

    h3[b-050liwaj3h] {
        margin-top: 3rem;
    }
}
/* /Samples/ButtonSample.razor.rz.scp.css */
[b-lcxhv1h4dc] cctc-button.restricted-width {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-lcxhv1h4dc] cctc-button.restricted-width {
        width: 25%;
    }
}
/* /Samples/ChartSamples/ChartSample.razor.rz.scp.css */
[b-aaqrdsoe8o] cctc-chart {
    width: 100%;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.example-template-container[b-aaqrdsoe8o] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.example-controls[b-aaqrdsoe8o] {
    padding: 0.5rem;
    border: 1px solid var(--cctc-inactive-color);
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.control-button[b-aaqrdsoe8o] {
    background-color: transparent;
    cursor: pointer;
}

.control-button:hover[b-aaqrdsoe8o] {
    color: var(--cctc-link-color);
}


@media (min-width: 36rem) {

}

@media (min-width: 75rem) {
    .example-template-container[b-aaqrdsoe8o] {
        flex-direction: row;
    }

    .example-controls[b-aaqrdsoe8o] {
        flex-direction: column;
    }

}

@media (min-width: 120rem) {

}
/* /Samples/CheckBoxSample.razor.rz.scp.css */
[b-6i1zz9nvme] cctc-input[data-cctc-input-type="checkbox"]:not([id$=should-collapse-others]) {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-6i1zz9nvme] cctc-input[data-cctc-input-type="checkbox"]:not([id$=should-collapse-others]) {
        width: 25%;
    }
}

[b-6i1zz9nvme] .red-border {
    --cctc-input-border-color: red;
    --cctc-input-border-style: solid;
    --cctc-input-border-width: 2px;
}
/* /Samples/DateAndTimeSample.razor.rz.scp.css */
[b-9pej5v5cuo] cctc-input[data-cctc-input-type="dateandtime"] {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-9pej5v5cuo] cctc-input[data-cctc-input-type="dateandtime"] {
        width: 30%;
    }
}

[b-9pej5v5cuo] .red-border {
    --cctc-input-border-color: red;
    --cctc-input-border-style: solid;
    --cctc-input-border-width: 2px;
}
/* /Samples/DateSample.razor.rz.scp.css */
[b-mmiwweblbn] cctc-input[data-cctc-input-type="date"] {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-mmiwweblbn] cctc-input[data-cctc-input-type="date"] {
        width: 25%;
    }
}

[b-mmiwweblbn] .red-border {
    --cctc-input-border-color: red;
    --cctc-input-border-style: solid;
    --cctc-input-border-width: 2px;
}
/* /Samples/DropDownSample.razor.rz.scp.css */
[b-vdbeybgw1u] cctc-input[data-cctc-input-type="dropdown"] {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-vdbeybgw1u] cctc-input[data-cctc-input-type="dropdown"] {
        width: 25%;
    }
}

[b-vdbeybgw1u] .info-background {
    --cctc-input-background-color: #0dcaf0;
}
/* /Samples/InfoIconSample.razor.rz.scp.css */
.example-wrapper[b-7kd8sk46o7], .usage-wrapper[b-7kd8sk46o7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

[b-7kd8sk46o7] .info-background {
    --cctc-infoicon-image-container-background-color: var(--bs-info);
}

[b-7kd8sk46o7] .test-pink {
    color: pink;
}

[b-7kd8sk46o7] .test-pink:hover {
    color: darkred;
}
/* /Samples/InfoTextSample.razor.rz.scp.css */
[b-j7nr5mhvey] cctc-infotext {
    width: 100%;
    margin-bottom: 1rem;
}

@media (min-width: 1200px) {
    [b-j7nr5mhvey] cctc-infotext {
        width: 25%;
    }
}
/* /Samples/ListerSample.razor.rz.scp.css */
.tab-item-content[b-0z6w3vvlbh] {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

/*individual lister can have styles overridden as shown here*/
[b-0z6w3vvlbh] #lister-with-items-service cctc-lister-filter-header  {
    --cctc-input-border-color: white;
    --cctc-input-border-style: dotted;
}
/* /Samples/NumericSample.razor.rz.scp.css */
[b-c9kb0rhpmn] cctc-input[data-cctc-input-type="numeric"] {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-c9kb0rhpmn] cctc-input[data-cctc-input-type="numeric"] {
        width: 25%;
    }
}

[b-c9kb0rhpmn] .info-background {
    --cctc-input-background-color: #0dcaf0;
}

[b-c9kb0rhpmn] cctc-input[data-cctc-input-type="numeric"].narrow-numeric {
    width: 7rem;
}
/* /Samples/ProgressSample.razor.rz.scp.css */
.control-button[b-bno5qjlnsy] {
    cursor: pointer;
    border: 1px solid var(--cctc-color);
    border-radius: var(--cctc-border-radius);
    width: 5rem;
    height: 1.5rem;
    text-align: center;
    user-select: none;
}
/* /Samples/RadioSample.razor.rz.scp.css */
[b-gni9n8i8pq] cctc-input[data-cctc-input-type="radio"] {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-gni9n8i8pq] cctc-input[data-cctc-input-type="radio"] {
        width: 25%;
    }
}

[b-gni9n8i8pq] .red-border {
    --cctc-input-border-color: red;
    --cctc-input-border-style: solid;
    --cctc-input-border-width: 2px;
}
/* /Samples/RefreshButtonSample.razor.rz.scp.css */
[b-nxco0qeood] cctc-button.restricted-width {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-nxco0qeood] cctc-button.restricted-width {
        width: 25%;
    }
}
/* /Samples/StepsSample.razor.rz.scp.css */
.progress-step-content[b-fsu02ymg6q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 1rem;
    padding-left: 1rem;
    gap: 0.5rem;
}

.progress-step-content[b-fsu02ymg6q] >  cctc-input[data-cctc-input-type="dropdown"] {
    flex-grow: 0;
    flex-shrink: 0;
    width: 17rem;
}

@media (min-width: 1200px) {
    .progress-step-content[b-fsu02ymg6q] >  cctc-input[data-cctc-input-type="dropdown"] {
        width: 20rem;
    }
}

.data-label[b-fsu02ymg6q] {
    font-size: 1rem;
    width: 8rem;
}


/* /Samples/SwitchSample.razor.rz.scp.css */
[b-a0cw5gfz1e] .narrow-switch {
    width: 14rem;
}
/* /Samples/TabsSample.razor.rz.scp.css */
.tab-item-content-margin[b-cjeflqtyul] {
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
}


/* /Samples/TextAreaSample.razor.rz.scp.css */
[b-14g1g5su31] cctc-input[data-cctc-input-type="textarea"] {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-14g1g5su31] cctc-input[data-cctc-input-type="textarea"] {
        width: 25%;
    }
}

[b-14g1g5su31] .info-background {
    --cctc-input-background-color: #0dcaf0;
}
/* /Samples/TextSample.razor.rz.scp.css */
[b-omte6h1jhv] cctc-input[data-cctc-input-type="text"] {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-omte6h1jhv] cctc-input[data-cctc-input-type="text"] {
        width: 25%;
    }
}

[b-omte6h1jhv] .info-background {
    --cctc-input-background-color: #0dcaf0;
}
/* /Samples/TimeOutSample.razor.rz.scp.css */
.initiate[b-8dl2hdvhe1] {
    cursor: pointer;
    border: 1px solid var(--cctc-color);
    border-radius: var(--cctc-border-radius);
    width: 5rem;
    height: 1.5rem;
    text-align: center;
    user-select: none;
    margin-bottom: 10px;
}

.stop[b-8dl2hdvhe1] {
    cursor: pointer;
    border: 1px solid var(--cctc-danger-color);
    border-radius: var(--cctc-border-radius);
    width: 5rem;
    height: 1.5rem;
    text-align: center;
    user-select: none;
    background-color: var(--cctc-danger-color);
    color: var(--cctc-color);
}

.sample-content[b-8dl2hdvhe1] {
    height: 150px;
    width: 200px;
    background-color: var(--cctc-color);
    color: var(--cctc-background-color);
    padding: 0.5rem;
}
/* /Samples/TimeSample.razor.rz.scp.css */
[b-y3xqjgxx81] cctc-input[data-cctc-input-type="time"] {
    width: 100%;
}

@media (min-width: 1200px) {
    [b-y3xqjgxx81] cctc-input[data-cctc-input-type="time"] {
        width: 25%;
    }
}

[b-y3xqjgxx81] .red-border {
    --cctc-input-border-color: red;
    --cctc-input-border-style: solid;
    --cctc-input-border-width: 2px;
}
/* /Samples/TooltipSample.razor.rz.scp.css */
[b-6oewuxp81e] cctc-tooltip:has(.nowrap) {
    width: 25%;
}

@media (min-width: 1920px) {
    [b-6oewuxp81e] cctc-tooltip:has(.nowrap) {
        width: 10%;
    }
}

.nowrap[b-6oewuxp81e] {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.preview-banner[b-hbj6ua30e1] {
    pointer-events: none;
    position: fixed;
    top: 2px;
    left: 1px;
    opacity: 0.6;
    z-index: 10;
}

.page[b-hbj6ua30e1] {
    color: var(--cctc-color);
    background-color: var(--cctc-background-color);
}

.header[b-hbj6ua30e1] {
    grid-area: header;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    background-color: var(--cctc-highlight-background-color);
    border-bottom: 1px solid var(--cctc-highlight-background-color);
    display: flex;
    align-items: center;
}

.header-section[b-hbj6ua30e1] {
    margin-left: 1rem;
}

.component-package-version[b-hbj6ua30e1] {
    margin-left: 2px;
}

.github-logo[b-hbj6ua30e1] {
    height: 1.5rem;
    margin-left: 0.5rem
}

.github-logo:hover[b-hbj6ua30e1] {
    cursor: pointer;
}

.menu[b-hbj6ua30e1] {
    grid-area: menu;
    border-right: 1px solid var(--cctc-highlight-background-color);
}

.main[b-hbj6ua30e1] {
    grid-area: main;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 0.4rem 0.2rem 0.4rem 0.2rem;
}

.grid[b-hbj6ua30e1] {
    gap: 0.1rem;
    height: 100dvh;
}

/*mobile*/
.grid-container-collapsed[b-hbj6ua30e1] {
    display: grid;
    grid-template-areas:
        'header'
        'main';
    grid-template-columns: 100%;
    grid-template-rows: [header] 5% [main] 95%;
}

/*mobile*/
.grid-container[b-hbj6ua30e1] {
    display: grid;
    grid-template-areas:
        'header'
        'menu';
    grid-template-columns: 100%;
    grid-template-rows: [header] 5% [menu] 95%;
}

.grid-container[b-hbj6ua30e1]  .nav-container {
    overflow-y: auto;
    margin-right: 0;
}

.grid-container .menu[b-hbj6ua30e1] {
    border: none;
}

.grid-container-tablet-collapsed[b-hbj6ua30e1] {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'menu main main main main main';
    grid-template-columns: [menu] 60px [main] auto;
    grid-template-rows: [header] 5% [main] 95%;
}

.grid-container-tablet[b-hbj6ua30e1] {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'menu main main main main main';
    grid-template-columns: [menu] 120px [main] auto;
    grid-template-rows: [header] 5% [main] 95%;
}

.grid-container-desktop[b-hbj6ua30e1] {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'menu main main main main main';
    grid-template-columns: [menu] 15% [main] auto;
    grid-template-rows: [header] 5% [main] auto;
}

.grid-container-desktop-collapsed[b-hbj6ua30e1] {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'menu main main main main main';
    grid-template-columns: [menu] 60px [main] auto;
    grid-template-rows: [header] 5% [main] auto;
}

.show-menu-button[b-hbj6ua30e1] {
    visibility: visible;
}

.hide-menu-button[b-hbj6ua30e1] {
    visibility: hidden;
}

.main-desktop[b-hbj6ua30e1] {
    padding: 1.4rem 1.4rem 1.4rem 1.2rem;
}

[b-hbj6ua30e1] #theme-selector {
    --cctc-input-height: 1.3rem;
    width: 4.7rem;
}

.toggler-icon-wrapper[b-hbj6ua30e1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
}

.toggler-icon[b-hbj6ua30e1] {
    display: block;
    background: var(--cctc-icon-color);
    height: 2px;
    width: 18px;
    border-radius: 1px;
    transition: opacity .25s ease-in-out, transform .25s ease-in-out;
}

.grid-container.collapsed .top-bar[b-hbj6ua30e1] {
    transform: rotate(0deg);
}

.grid-container.collapsed .middle-bar[b-hbj6ua30e1] {
    opacity: 1;
}

.grid-container.collapsed .bottom-bar[b-hbj6ua30e1] {
    transform: rotate(0deg);
}

.grid-container .top-bar[b-hbj6ua30e1] {
    transform: translate(0px, 6px) rotate(45deg);
}

.grid-container .middle-bar[b-hbj6ua30e1] {
    opacity: 0;
}

.grid-container .bottom-bar[b-hbj6ua30e1] {
    transform: translate(0px, -6px) rotate(-45deg);
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-wjgffi0ax6] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-wjgffi0ax6] {
    height: 2rem;
    background-color: rgba(0,0,0,0.4);
    color: #d7d7d7;
}

.navbar-brand[b-wjgffi0ax6] {
    font-size: 1.1rem;
}

.oi[b-wjgffi0ax6] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-wjgffi0ax6] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type[b-wjgffi0ax6] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-wjgffi0ax6] {
    padding-bottom: 1rem;
}

.nav-item[b-wjgffi0ax6]  a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.nav-item[b-wjgffi0ax6]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-wjgffi0ax6]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-container[b-wjgffi0ax6] {
    overflow-y: hidden;
    overflow-x: hidden;
    height: calc(100dvh - 75px);
    scrollbar-gutter: stable;
    margin: 10px 0.2rem;
}

.nav-container:hover[b-wjgffi0ax6] {
    overflow-y: auto;
}