body
{
    margin: 0;
    background: #f5f5f5;
}
.toggleSwitch
{
    width: 72px;
    height: 48px;
    display :block;
    cursor: pointer;
     position: relative; 
     vertical-align: middle;
     
}



.toggleSwitch input
{
     display: none; 
    
}

.toggleSwitch input.waiting 
{
    cursor: not-allowed;
    
}


.toggleSwitch .bar
{
    position: absolute;
    width: 100%;
    height: 28px;
    border-radius: 14px;
    background-color: #DC3545;
    left: 0;
    top:calc(50% - 14px);    
    transition: background-color 300ms;
    box-shadow: inset 0px 1px 5px #8F222D;
}

.toggleSwitch .button
{
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
    left: 0px;
    top: calc(50% - 20px);
    transition: all 250ms;

}

.toggleSwitch .button .circle
{

    position: absolute;
    border-radius: 50%;
    width: 16px; height: 16px;
    border: 2px solid #DC3545;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    transition: all 300ms;
    transition-delay: 200ms;
}

.toggleSwitch .button .loading
{
    position: absolute;
    border-radius: 50%;
    width: 16px; height: 16px;
    
    border: 2px solid #538CEF;
    border-right-color: transparent;
    border-left-color: transparent;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    transition: all 300ms;
    transition-delay: 200ms;
    display: none;
    opacity: 0;

    animation: rotate 500ms linear;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

@keyframes rotate {
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }    
}

.toggleSwitch .button .line
{
    position: absolute;
    width: 3px;
    height: 1px;
    border-radius: 0px;
    left: calc(50% - 1px);
    top: calc(50% - 7px);
    transition: all 300ms;
    transition-delay: 0ms;
    background-color: #538CEF;
    opacity: 0;
}



.toggleSwitch > input:checked + .bar
{
    background-color: #538CEF;
    box-shadow: inset 0px 1px 5px #385FA2;
}

.toggleSwitch > input:checked ~  .button
{
    left: calc(100% - 40px);
    /* background-color: #9726AA; */
}

.toggleSwitch > input:checked ~ .button .circle
{
    opacity: 0;    
    transition-delay: 0ms;
}


.toggleSwitch > input:checked ~ .button .line
{
    opacity: 1;
    height: 14px;
    transition-delay: 200ms;
}


  /* .toggleSwitch > input ~ .button .line
{
    opacity: 1;
    height: 14px;
    background-color: red;
    transition-delay: 100ms;
}   */

.toggleSwitch input:disabled  + .bar
{
    background-color: #eee;
    box-shadow: inset 0px 1px 5px #aaa;
}

.toggleSwitch input:disabled  ~ .button .line 
{
    opacity: 0;
    height: 1px;
}

.toggleSwitch input:disabled  ~ .button .circle 
{
    opacity: 0;
    
}

.toggleSwitch input:disabled:checked.waiting  + .bar
{
    background-color: #538CEF;
    box-shadow: inset 0px 1px 5px #385FA2;
}


.toggleSwitch input:disabled:not(:checked).waiting  + .bar
{
    background-color: #DC3545;
    box-shadow: inset 0px 1px 5px #8F222D;
}

.toggleSwitch input:disabled.waiting  ~ .button .loading
{
    display: block;
    opacity: 1;
}

.toggleSwitch input:disabled.waiting:not(:checked)  ~ .button .loading
{
     border-top-color: #DC3545;
    border-bottom-color: #DC3545; 
}

.nodes
{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    /* column-gap: .5rem; */
    box-sizing: border-box;
    padding: 10px;
}

.card
{
    width: calc(100% / 1);
    break-after: always;
    break-inside: avoid;
    margin: 10px 0px;
    box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
        .nodes
        {
            -webkit-column-count: 1; /* Chrome, Safari, Opera */
            -moz-column-count: 1; /* Firefox */
            column-count: 1;


        }

        .card
        {
            width: 100%;
            break-after: always;
            break-inside: avoid;
            margin: 10px 0px;
            box-sizing: border-box;
        }
}

.card-title {
    margin-bottom: 0rem;
    font-size: 14pt;
    text-transform: capitalize;
}