@media all and (min-width: 480px) and (max-width: 768px) {
        .offcanvas {
            width: 60%
        }
    }
    
    @media all and (max-width: 480px) {
        .offcanvas {
            width: 60%
        }
    }
    
    body {
        background-color: #f3f0f5;
    }
    /* https: //gist.github.com/kuc-arc-f/fea053e0e96e9017467e80a55eaebdfd */
    
    .icon-status {
        font-size: 2rem;
        color: white;
    }
    
    .container {
        max-width: 850px;
    }
    
    .body_back_color {
        background-color: #e2e2e2;
    }
    
    .btnx-indigo {
        background: var(--bs-indigo);
        border: 2px solid var(--bs-indigo);
    }
    
    .btnx-purpule {
        background: var(--bs-purple);
        border: 2px solid var(--bs-purple);
    }
    
    .bg-purpule {
        background-color: var(--bs-purple)!important
    }
    
    .btnx-pink {
        background: var(--bs-pink);
        border: 2px solid var(--bs-pink);
    }
    
    .btnx-orange {
        background: var(--bs-orange);
        border: 2px solid var(--bs-orange);
    }
    
    .btnx-teal {
        background: var(--bs-teal);
        border: 2px solid var(--bs-teal);
    }
    
    .btnx-cyan {
        background: var(--bs-cyan);
        border: 2px solid var(--bs-cyan);
    }
    
    .btnx-lime {
        background: #7CB342;
        border: 2px solid #7CB342;
    }
    
    .btnx-indigo-light {
        color: var(--bs-indigo);
        background: #9FA8DA;
        border: 2px solid #9FA8DA;
    }
    
    .btnx-purpule-light {
        color: var(--bs-purple);
        background: #CE93D8;
        border: 2px solid #CE93D8;
    }
    
    .btnx-pink-light {
        color: var(--bs-pink);
        background: #F48FB1;
        border: 2px solid #F48FB1;
    }
    
    .btnx-orange-light {
        color: var(--bs-orange);
        background: #FFCC80;
        border: 2px solid #FFCC80;
    }
    
    .btnx-teal-light {
        color: #004D40;
        background: #80CBC4;
        border: 2px solid #80CBC4;
    }
    
    .btnx-cyan-light {
        color: #006064;
        background: #80DEEA;
        border: 2px solid #80DEEA;
    }
    
    .btnx-lime-light {
        color: #827717;
        background: #C5E1A5;
        border: 2px solid #C5E1A5;
    }
    
    .memoBr {
        overflow-wrap: break-word;
        white-space: pre-line;
    }
    
    .bi.bi-icon-2 {
        font-size: 1.5rem;
        color: white;
    }
    
    p {
        font-family: "Poppins", sans-serif;
    }
    
    #error-message {
        font-size: 16px;
        color: red;
        margin: 0 auto;
        max-width: 80%;
    }