:root {
    --primary-color-cybolt: #E46027;


    --color-active: #344767;

    --color-principal: #0060C7;
    --color-principal-dark: #044386;
    --color-principal-secondary: #464C42;
    --color-principal-secondary-dark: #2d2e2c;

    --sucess-color: #00C851;
    --sucess-color-dark: #007E33;
    --danger-color: #FF4444;
    --danger-color-dark: #CC0000;
    --warning-color: #FFBB33;
    --warning-color-dark: #FF8800;
    --info-color: #33B5E5;
    --info-color-dark: #0099CC;
    --default-color: #2BBBAD;
    --default-color-dark: #00695C;
    --primary-color: #4285f4;
    --primary-color-dark: #0D47A1;
    --secondary-color: #AA66CC;
    --secondary-color-dark: #9933CC;
    --elegant-color: #2E2E2E;
    --elegant-color-dark: #212121;
    --stylish-color: #4B515D;
    --stylish-color-dark: #3E4551;
    --unique-color: #3F729B;
    --unique-color-dark: #1C2331;
    --special-color: #37474F;
    --special-color-dark: #263238;
}

.pointer{
    cursor: pointer;
}

.container_card{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}



.card_login{
    width: 400px;
    box-shadow: 3px 3px 23px -4px rgba(0,0,0,0.75);
}

.st_login_title{
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color-cybolt);
    margin: 0 0 40px 0;
}

.line_login{
    width: 0px;
    height: 50px;
    border: 0px;
    border-left: 3px solid;
    border-left-color: rgb(161, 161, 161);
}

.st_label {
    color: var(--elegant-color);
    font-weight: bold;
    font-size: 16px;
}

.btn_login {
    outline: none;
    border: 0px;
    width: 100%;
    font-weight: bold;
    background-color: var(--primary-color-cybolt);
    color: #fff;
}

.btn_login:hover {
    color: #fff;
    background-color: #941519;
}

.btn_login:active {
    color: #fff !important;
    background-color: var(--primary-color-cybolt) !important;
}



/* From Uiverse.io by ozgeozkaraa01 */ 
.group {
    display: flex;
    line-height: 30px;
    align-items: center;
    position: relative;
    max-width: 100%;
    margin: 20px 0;
  }
  
  .input {
    width: 100%;
    height: 45px;
    line-height: 30px;
    padding: 0 5rem;
    padding-left: 3rem;
    border: 2px solid transparent;
    border-radius: 10px;
    outline: none;
    background-color: #f8fafc;
    color: #0d0c22;
    transition: .5s ease;
    border: 1px solid #d8d8d8;
  }
  
  .input::placeholder {
    color: #94a3b8;
  }
  
  .input:focus, input:hover {
    outline: none;
    border-color: rgba(129, 140, 248);
    background-color: #fff;
    box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
  }
  
  .icon {
    position: absolute;
    left: 1rem;
    fill: none;
    width: 1rem;
    height: 1rem;
  }