/*************************/
/*#e8491d*/

.buttone8491d {
    background-color: transparent;
    color: #e8491d;
    border: none;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.buttone8491d::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #e8491d; 
    transition: transform 0.3s ease;
    transform-origin: bottom;
    transform: scaleY(1);
    z-index: -1;
}

.buttone8491d:hover::after {
    transform: scaleY(100);
}

.buttone8491d:hover {
    color: #ffffff;
}

/*************************/
/*#5c6bc0*/

.button5c6bc0 {
    background-color: transparent;
    color: #5c6bc0;
    border: none;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.button5c6bc0::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #5c6bc0; 
    transition: transform 0.3s ease;
    transform-origin: bottom;
    transform: scaleY(1);
    z-index: -1;
}

.button5c6bc0:hover::after {
    transform: scaleY(100);
}

.button5c6bc0:hover {
    color: #ffffff;
}

/*************************/
/*#66bb6a*/

.button66bb6a {
    background-color: transparent;
    color: #66bb6a;
    border: none;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.button66bb6a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #66bb6a; 
    transition: transform 0.3s ease;
    transform-origin: bottom;
    transform: scaleY(1);
    z-index: -1;
}

.button66bb6a:hover::after {
    transform: scaleY(100);
}

.button66bb6a:hover {
    color: #ffffff;
}

/*************************/
/*#ffb300*/

.buttonffb300 {
    background-color: transparent;
    color: #ffb300;
    border: none;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.buttonffb300::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #ffb300; 
    transition: transform 0.3s ease;
    transform-origin: bottom;
    transform: scaleY(1);
    z-index: -1;
}

.buttonffb300:hover::after {
    transform: scaleY(100);
}

.buttonffb300:hover {
    color: #ffffff;
}


/*************************/
/*#37474f*/

.button37474f {
    background-color: transparent;
    color: #37474f;
    border: none;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.button37474f::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #37474f; 
    transition: transform 0.3s ease;
    transform-origin: bottom;
    transform: scaleY(1);
    z-index: -1;
}

.button37474f:hover::after {
    transform: scaleY(100);
}

.button37474f:hover {
    color: #ffffff;
}

/*************************/
/*#TEXT FIELD*/

.inputField {
    background-color: transparent;
    color: #000;
    border: none;
    border-bottom: 2px solid #ccc;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.3s ease, color 0.3s ease;
    outline: none;
    font-size: 16px;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
}

.inputField::placeholder {
    color: #ccc;
    font-size: 16px;
}

.inputField:focus {
    border-bottom-color: #66bb6a;
}

.inputField:not(:placeholder-shown) {
    border-bottom-color: #66bb6a;
}

/*************************/
/*#FILE FIELD*/

.fileInputWrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.fileInput {
    background-color: transparent;
    color: #ccc;
    border: none;
    border-bottom: 2px solid #ccc;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.3s ease, color 0.3s ease;
    outline: none;
    text-align: left;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
}

.fileInput:hover {
    border-bottom-color: #66bb6a;
}

.fileInput.hasFile {
    border-bottom-color: #66bb6a;
    color: #000;
}

.fileInputField {
    display: none;
}