a.disable-a {
    color: #fff;
    text-decoration: none;
}

a.disable-a:hover {
    color: #fff;
}



.badge-dark {
    padding: .5rem !important;
    font-weight: 700 !important;
    border-radius: 1rem !important;
    background-color: #212529 !important;
    color: rgb(248, 249, 250) !important;
    text-decoration: none !important;
}

.badge-bluexxx {
    padding: .5rem !important;
    font-weight: 700 !important;
    border-radius: 1rem !important;
    background-color: #212529 !important;
    color: rgb(248, 249, 250) !important;
    text-decoration: none !important;
}


.text-display-area {
    /* color: #4a4a4a; */
    letter-spacing: .3px;
}




.tiny-hr{
    height: 1px;
    width: 100%;
    background-color: #989ea6;
    margin: 1rem 0;
    opacity: .1;
}


.collapse-arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  vertical-align: middle;
  border: 1px solid;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  transition: transform 0.3s;
}




.collapsed .collapse-arrow {
  transform: rotate(-225deg);
}

/* ------------------------------------------------ */



.input-container {
    position: relative;
    margin: 10px auto;
    width: 100%;
}

.input-container .input {
    font-size: 1rem;
    width: 100%;
    height: 42px;
    border: none;
    border-bottom: 1px solid #3085C3ee;
    padding: 5px 0;
    background-color: transparent;
    outline: none;
}

.input-container .input::placeholder {
    color: transparent;
}

.input-container .input-label {
    position: absolute;
    font-size: 0.7rem; 
    top: -12px;
    left: 0px;
    /* color: #333; */
    color: var(--text-color-body);
    transition: all 0.3s ease;
    pointer-events: none;
}


.input-container .input:placeholder-shown~.input-label {
    top: 16px;
    font-size: 0.9rem;
    color: #9993a0;
}


.input-container .input:focus~.input-label {
    top: -12px;
    font-size: 0.7rem;
    /* color: #333; */
    color: var(--text-color-body);
}

.input-container .input-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #625bf6ee;
    transform: scaleX(0);
    transition: all 0.3s ease;
}


.input-container .input:focus~.input-underline {
    transform: scaleX(1);
}


.input.is-invalid{
    border-bottom: 1px solid rgba(255, 0, 0, 0.933)
}

/* ------------------------------------------------ */



.btnx {
    --primary-color: #645bff;
    --secondary-color: #fff;
    --hover-color: #111;
    --border-radius: 6px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--border-radius);
    color: var(--secondary-color);
    padding: 0.5em 1.2em;
    background: var(--primary-color);
    display: inline-flex;
    transition: 0.2s background;
    align-items: center;
    gap: 0.6em;
    font-weight: bold;
    cursor: pointer;
    justify-content: center;
}



.btnx-round-1 {
    --border-radius: 4px
}

.btnx-round-2 {
    --border-radius: 8px
}

.btnx-round-3 {
    --border-radius: 10px
}

.btnx-round-4 {
    --border-radius: 15px
}

.btnx-round-5 {
    --border-radius: 20px
}


.btnx:hover {
    background: var(--hover-color);
}

.btnx-dark {
    --primary-color: #555;
    --hover-color: #111;
}

.btnx-purple {
    --primary-color: #645bff;
    --hover-color: #4e47d0;
}

.btnx-purple-light {
    --primary-color: #9F70FD;
    --hover-color: #8e64e3;
}

.btnx-blue {
    --primary-color: linear-gradient(to right, #49BCFC, #3B92F8) ;
    --hover-color: linear-gradient(to right, #3da4dc, #337fd7) ;
}

.btnx-green{
    --primary-color: #79AC78;
    --hover-color: #618264;
}

.btnx-red {
    --primary-color: #cb444a;
    --hover-color: #a6393f;
}

.btnx-orange {
    --primary-color: #FF4433;
    --hover-color: #db3829;
}

.btnx-grad-purple-white {
    --primary-color: linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%);
    --hover-color: linear-gradient(90deg, #33237b 0%, #8398cd 100%);
}

.btnx-grad-red-blue {
    --primary-color: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
    --hover-color:  linear-gradient(90deg, #e23e5f 0%, #344fd8 100%);
}



/*<editor-fold desc="Text Size">*/
.text-sz-1 {
    font-size: xx-large !important;
}

.text-sz-2 {
    font-size: x-large !important;
}

.text-sz-3 {
    font-size: larger !important;
}

.text-sz-4 {
    font-size: large !important;
}

.text-sz-5 {
    font-size: medium !important;
}

.text-sz-55 {
    font-size: 0.9rem !important;
}

.text-sz-6 {
    font-size: small !important;
}

.text-sz-7 {
    font-size: smaller !important;
}

.text-sz-8 {
    font-size: x-small !important;
}

.text-sz-9 {
    font-size: xx-small !important;
}

/*</editor-fold>*/


/*<editor-fold desc="Text color ">*/

.text-color-blue-sky {
    color: #6777ef;
}

.text-color-blue-100 {
    color: #cfe2ff;
}

.text-color-blue-200 {
    color: #9ec5fe;
}

.text-color-blue-300 {
    color: #6ea8fe;
}

.text-color-blue-400 {
    color: #3d8bfd;
}

.text-color-blue-500 {
    color: #0d6efd;
}

.text-color-blue-600 {
    color: #0a58ca;
}

.text-color-indigo-100 {
    color: #e0cffc;
}

.text-color-indigo-200 {
    color: #c29ffa;
}

.text-color-indigo-300 {
    color: #a370f7;
}

.text-color-indigo-400 {
    color: #8540f5;
}

.text-color-indigo-500 {
    color: #6610f2;
}

.text-color-indigo-600 {
    color: #520dc2;
}


.text-color-purple {
    color: #645bff;
}


.text-color-green-100 {
    color: #d1e7dd;
}

.text-color-green-200 {
    color: #a3cfbb;
}

.text-color-green-300 {
    color: #75b798;
}

.text-color-green-400 {
    color: #479f76;
}

.text-color-green-500 {
    color: #198754;
}

.text-color-green-600 {
    color: #146c43;
}

.text-color-red-100 {
    color: #f8d7da;
}

.text-color-red-200 {
    color: #f1aeb5;
}

.text-color-red-300 {
    color: #ea868f;
}

.text-color-red-400 {
    color: #e35d6a;
}

.text-color-red-500 {
    color: #dc3545;
}

.text-color-red-600 {
    color: #b02a37;
}

.text-color-black-100 {
    color: #6B728E!important;
}

.text-color-black-200 {
    color: #50577A!important;
}

.text-color-black-300 {
    color: #474E68!important;
}

.text-color-black-400 {
    color: #404258!important;
}

.text-color-black-500 {
    color: #333!important;
}

.text-color-black-600 {
    color: #000!important;
}



.text-color-black {
    color: #4a4a4a;
    /* letter-spacing: .3px; */
}

/*</editor-fold>*/


/*<editor-fold desc="Background color">*/
.bg-color-blue-sky {
    background-color: #6777ef;
}

.bg-color-blue-100 {
    background-color: #cfe2ff;
}

.bg-color-blue-200 {
    background-color: #9ec5fe;
}

.bg-color-blue-300 {
    background-color: #6ea8fe;
}

.bg-color-blue-400 {
    background-color: #3d8bfd;
}

.bg-color-blue-500 {
    background-color: #0d6efd;
}

.bg-color-blue-600 {
    background-color: #0a58ca;
}

.bg-color-indigo-100 {
    background-color: #e0cffc;
}

.bg-color-indigo-200 {
    background-color: #c29ffa;
}

.bg-color-indigo-300 {
    background-color: #a370f7;
}

.bg-color-indigo-400 {
    background-color: #8540f5;
}

.bg-color-indigo-500 {
    background-color: #6610f2;
}

.bg-color-indigo-600 {
    background-color: #520dc2;
}

.bg-color-green-100 {
    background-color: #d1e7dd;
}

.bg-color-green-200 {
    background-color: #a3cfbb;
}

.bg-color-green-300 {
    background-color: #75b798;
}

.bg-color-green-400 {
    background-color: #479f76;
}

.bg-color-green-500 {
    background-color: #198754;
}

.bg-color-green-600 {
    background-color: #146c43;
}

.bg-color-cyan-100 {
    background-color: #cff4fc;
}

.bg-color-cyan-200 {
    background-color: #9eeaf9;
}

.bg-color-cyan-300 {
    background-color: #6edff6;
}

.bg-color-cyan-400 {
    background-color: #3dd5f3;
}

.bg-color-cyan-500 {
    background-color: #0dcaf0;
}

.bg-color-cyan-600 {
    background-color: #0aa2c0;
}

.bg-color-red-100 {
    background-color: #f8d7da;
}

.bg-color-red-200 {
    background-color: #f1aeb5;
}

.bg-color-red-300 {
    background-color: #ea868f;
}

.bg-color-red-400 {
    background-color: #e35d6a;
}

.bg-color-red-500 {
    background-color: #dc3545;
}

.bg-color-red-600 {
    background-color: #b02a37;
}

.bg-color-black-100 {
    background-color: #6B728E;
}

.bg-color-black-200 {
    background-color: #50577A;
}

.bg-color-black-300 {
    background-color: #474E68;
}

.bg-color-black-400 {
    background-color: #404258;
}

.bg-color-black-500 {
    background-color: #333 !important;
}

.bg-color-black-600 {
    background-color: #000;
}

/*</editor-fold>*/


.dummy-link {
    color: #0d6efd;
    text-decoration: underline;
}