/* #region Input Container */
.input-container {
    display: flex;
    position: relative;
    min-width: 270px;
    margin: 30px 20px;
    font-family: Calibri;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

    .input-container input {
        width: 100% ;
        padding: 10px;
        color: #454545;
        font-weight: 600;
        font-size: 18px;
        border: none;
        border-bottom: 1.3px solid dimgray;
        outline: none;
        transition: all 0.2s ease-out;
        background-color: transparent;
        position: relative;
        text-transform:capitalize;
    }

    .input-container label {
        position: absolute;
        color: #696969;
        top: 50%;
        left: 10px;
        font-size: 18px;
        font-weight: 800;
        transition: all 0.3s ease;
        pointer-events: none;
        transform: translateY(-50%);
    }

    .input-container .underline {
        position: absolute;
        bottom: 0px;
        left: 50%;
        width: 0px;
        height: 2px;
        background-color: #ff6a00;
        transition: all 0.3s ease;
    }

    .input-container input:focus {
        color: black;
    }

        .input-container input:focus + label {
            top: 0;
            left: 1px;
            font-size: 16px;
            font-weight: 600;
            color: #ff6a00;
            transform: translateY(-70%);
        }
        .input-container input:not(:placeholder-shown) + label {
            top: 0;
            left: 1px;
            font-size: 16px;
            font-weight: 600;
            transform: translateY(-70%);
        }

        .input-container input:focus ~ .underline {
            width: 100%;
            left: 0;
        }

    .input-container input::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: #ff6a00;
        transition: width 0.3s ease, left 0.3s ease;
    }

    .input-container input:focus::after {
        width: 100%;
        left: 0;
    }

    .input-container .AddKannadaValueLink {
        position: absolute;
        padding: 0px !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
        text-shadow: none !important;
        bottom: 0px;
        cursor: pointer;
        font-size: small !important;
        right: 0px;
        color: red !important;
    }
/* #endregion */
/* #region Validator Message */
.validator-message {
    color: red;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    bottom: -20px;
    left: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.input-container input:focus ~ .validator-message,
.input-container input:invalid ~ .validator-message {
    opacity: 1;
}
/* #endregion */

/* #region Dropdown Container */
.dropdown-container {
    display: flex;
    position: relative;
    min-width: 270px;
    margin: 30px 20px;
    font-family: Calibri;
}

    .dropdown-container select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        width: 100%;
        padding: 10px;
        color: #454545;
        font-weight: 600;
        font-size: 18px;
        border: none;
        border-bottom: 1.3px solid dimgray;
        outline: none;
        transition: all 0.2s ease-out;
        background-color: transparent;
        position: relative;
        cursor: pointer;
        text-transform: capitalize;
    }

    .dropdown-container label {
        position: absolute;
        color: #696969;
        top: 50%;
        left: 10px;
        font-size: 18px;
        font-weight: 800;
        transition: all 0.3s ease;
        pointer-events: none;
        transform: translateY(-50%);
    }

    .dropdown-container .underline {
        position: absolute;
        bottom: 0px;
        left: 50%;
        width: 0px;
        height: 2px;
        background-color: #ff6a00;
        transition: all 0.3s ease;
    }

    .dropdown-container select:focus {
        color: black;
    }

        .dropdown-container select:focus + label {
            top: 0;
            left: 1px;
            font-size: 16px;
            font-weight: 600;
            color: #ff6a00;
            transform: translateY(-70%);
        }
        .dropdown-container select:not(:placeholder-shown) + label {
            top: 0;
            left: 1px;
            font-size: 16px;
            font-weight: 600;
            transform: translateY(-70%);
        }

        .dropdown-container select:focus ~ .underline {
            width: 100%;
            left: 0;
        }

        .dropdown-container select:focus ~ .validator-message,
        .dropdown-container select:invalid ~ .validator-message {
            opacity: 1;
        }

    .dropdown-container select::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: #ff6a00;
        transition: width 0.3s ease, left 0.3s ease;
    }

    .dropdown-container select:focus::after {
        width: 100%;
        left: 0;
    }
/* #endregion */

/* #region Selectize Container */
.Selectize-Container {
    position: relative;
    align-items: center;
    min-width: 270px;
    margin: 30px 20px;
    font-family: Calibri !important;
    box-sizing: border-box;
    white-space: normal;
    display: flex;
    flex-direction: column;
}

    .Selectize-Container .selectize-control {
        width: 100% !important;
        color: #454545;
        font-weight: 600;
        font-size: 18px;
        border: none;
        border-bottom: 1.3px solid dimgray;
        outline: none;
        transition: all 0.2s ease-out;
        background-color: transparent;
        position: relative;
    }

    .Selectize-Container .selectize-input {
        border: none;
        background-color: transparent;
        box-shadow: none;
        text-transform: capitalize;
    }

        .Selectize-Container .selectize-input:focus {
            box-shadow: none;
        }

    .Selectize-Container label {
        position: absolute;
        color: #696969;
        top: 50%;
        left: 10px;
        font-size: 18px;
        font-weight: 800;
        transition: all 0.3s ease;
        pointer-events: none;
        transform: translateY(-50%);
    }

        .Selectize-Container label.floating {
            top: 0;
            left: 1px;
            font-size: 16px;
            font-weight: 600;
            
            transform: translateY(-70%);
        }

    .Selectize-Container:focus-within label {
        top: 0;
        left: 1px;
        font-size: 16px;
        font-weight: 600;
        color: #ff6a00;
        transform: translateY(-70%);
    }

    .Selectize-Container .underline {
        pointer-events: none;
    }
    .Selectize-Container .underline,
    .Selectize-Container:focus-within .underline {
        width: 100%;
        left: 0;
        background-color: #ff6a00;
    }

    .Selectize-Container .selectize-input.input-active:not(.has-items) {
        box-shadow: none !important;
        border: none !important;
    }

/* #endregion */

/* #region Checkbox Container */
.CheckBox-Container {
    display: flex;
    position: relative;
    align-items: center;
    min-width: 200px;
    margin: 30px 20px;
    font-family: Calibri;
    box-sizing: border-box;
}

    .CheckBox-Container input {
        padding: 5px;
        color: #454545;
        font-weight: 600;
        font-size: 18px;
        border-bottom: 1.3px solid dimgray;
        outline: none;
        transition: all 0.2s ease-out;
        background-color: transparent;
        position: relative;
    }

    .CheckBox-Container label {
        position: relative;
        color: #696969;
        justify-content: center;
        font-size: 18px;
        font-weight: 800;
        user-select:none;
        transition: all 0.3s ease;
    }
    .CheckBox-Container input[type="checkbox"]:hover + label,
    .CheckBox-Container input[type="checkbox"]:active + label,
    .CheckBox-Container input[type="checkbox"]:focus + label {
        color: #ff6a00;
        cursor: pointer;
    }
    .CheckBox-Container label:hover
    {
        color: #ff6a00;
        cursor: pointer;
    }
    
/* #endregion */

/* #region Hidden Input Container */
.Hidden-Input-Container {
    display: none;
}

    .Hidden-Input-Container input {
        display: none;
        height: 0;
        width: 0;
    }
/* #endregion */

/* #region Loader */
.loader {
    background: url('../../Images/Book.gif') no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
/* #endregion */

/* #region Input Table */
.InputTable {
    color: #606060;
    width: 100%;
    border-collapse: separate !important;
    border: 1px solid #606060;
    border-radius: 10px;
    overflow: hidden;
}

    .InputTable tbody {
        font-family: Calibri;
        font-weight: bold;
    }

        .InputTable tbody tr:hover {
            background-color: #f0efef;
        }

    .InputTable thead {
        background: linear-gradient(to bottom, white 0%, #ff6a00 150%);
        font-family: Cambria;
        font-weight: 600;
        font-size: medium;
        text-shadow: 2px 2px 5px white;
    }

    .InputTable th, .InputTable td {
        padding: 10px;
        border: 1px dotted #606060;
        white-space: nowrap;
        vertical-align: middle;
    }

    .InputTable .input-container {
        min-width: auto !important;
        margin: auto !important;
    }
    .InputTable .dropdown-container {
        min-width: auto !important;
        margin: auto !important;
    }

    .InputTable .EditLink,
    .InputTable .DeleteLink,
    .InputTable .AddNewLink,
    .InputTable .UpdateLink {
        display: inline-block;
        min-width: 20px;
        min-height: 10px;
        padding: 7px 20px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .InputTable .EditLink {
        color: #0d5cff;
    }

        .InputTable .EditLink:hover {
            background-color: #bacffa;
        }

    .InputTable .DeleteLink {
        color: #b50404;
    }

        .InputTable .DeleteLink:hover {
            background-color: #f3bebe;
        }

    .InputTable .AddNewLink {
        color: #037d18;
    }

        .InputTable .AddNewLink:hover {
            background-color: #c7f8cc;
        }

    .InputTable .UpdateLink {
        color: #ff6a00;
    }

        .InputTable .UpdateLink:hover {
            background-color: #ffe2cf;
        }
/* #endregion */
/*#region Common Table (dtable) */

.dtable {
    color: #606060;
    width: 100%;
    border-collapse: separate !important; /* Ensures border-radius works */
    border: 1px solid #606060; /* Table border */
    border-radius: 10px; /* Rounds the table's border */
    overflow: hidden; /* Ensures contents stay within the rounded borders */
}

    .dtable tbody {
        font-family: Calibri;
        font-weight: bold;
    }

        .dtable tbody tr:hover {
            background-color: #f0efef;
        }

    .dtable thead {
        text-shadow: 0 0 2px white;
        text-shadow: 2px 2px 5px white;
        background: linear-gradient(to bottom, white 0%, #ff6a00 150%);
        font-family: Cambria;
        font-weight: 600;
        font-size: medium;
    }

    .dtable th, .dtable td {
        padding: 10px;
        border: 1px dotted #606060;
        white-space: normal;
        word-wrap: break-word;
        vertical-align: middle;
    }

    .dtable .EditLink,
    .dtable .DeleteLink,
    .dtable .AddNewLink,
    .dtable .UpdateLink {
        display: inline-block;
        min-width: 20px;
        min-height: 10px;
        padding: 7px 20px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .dtable .EditLink {
        color: #0d5cff;
    }

        .dtable .EditLink:hover {
            background-color: #bacffa;
        }

    .dtable .DeleteLink {
        color: #b50404;
    }

        .dtable .DeleteLink:hover {
            background-color: #f3bebe;
        }

    .dtable .AddNewLink {
        color: #037d18;
    }

        .dtable .AddNewLink:hover {
            background-color: #c7f8cc;
        }

/*#endregion */

/*#region Buttons */

.button-container {
    position: relative;
    margin: 30px 20px;
    font-family: Calibri;
}

.button,
.button-attention,
.button-danger {
    width: 100%;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    color: white;
    text-shadow: black 0px 0px 3px;
    box-shadow: black 0 0 5px;
    border: none;
    cursor: pointer;
    outline: none;
    transition: all 0.1s  ease-out;
    text-transform: capitalize;
}

.button {
    background: linear-gradient(to bottom, #7bcdfa 0%, #0da9ff 100%);
}

.button-attention {
    background: linear-gradient(to bottom, #f7a971 0%, #ff6a00 100%)!important;
}

.button-danger {
    background: linear-gradient(to bottom, #eb2323 0%, #d40000 100%)!important;
}

    .button:hover,
    .button:focus,
    .button:active,
    .button-attention:hover,
    .button-attention:focus,
    .button-attention:active,
    .button-danger:hover,
    .button-danger:focus,
    .button-danger:active
    {
        transform: scale(1.1);
        box-shadow: black 2px 2px 10px;
    }

.button-container .link-button {
    color: #0003ff;
    font-weight:bolder;
    font-size: 18px;
    text-decoration: none;
    background-color: transparent;
}

/*#endregion */

/*#region Table Buttons */

.Table-Delete {
   
    transition: all 0.2s ease-out;
}

.Table-Edit {
    transition: all 0.2s ease-out;
    /* You can add specific styles if needed */
}
.Table-View {
    transition: all 0.2s ease-out;
    /* You can add specific styles if needed */
}

.Table-Delete:hover,
.Table-Delete:active,
.Table-Edit:hover, 
.Table-Edit:active,
.Table-View:hover,
.Table-View:active {
    transform: scale(1.3);
    box-shadow: inset 0px 0px 5px #ff0000;
}

/*#endregion */

/*#region Responsive Design */

    @media only screen and (max-width: 720px) {

    .input-container,
    .dropdown-container,
    .button-container {
        min-width:0px !important;
        width: 100% !important;
        display: flex;
    }

        .input-container input,
        .dropdown-container select,
        .button {
            width: 100%;
        }

        .button-container :hover {
            transform: scale(1.04);
        }

    .InputTable {
        width: 100% !important;
    }
}

/*#endregion */

/*#region Camera Model */
.modal-content video, .modal-content canvas, .modal-content img {
    display: block;
    margin-bottom: 10px;
}

#btnRetake, #<%= btnUpload.ClientID % > {
    display: none;
}

.modal-overlay {
    display: none; /* Hidden by default */

    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border-radius: 15px;
    position: relative;
    box-shadow: inset 0 0 5px black;
}

.close-button {
    position: absolute;
    right: 50px;
    top: 25px;
    font-size: 50px;
    cursor: pointer;
    font-weight: 900;
    text-shadow: 0 0 3px black;
    transition: transform 0.2s ease-in-out;
}
    .close-button:hover {
        transform: scale(1.2);
        text-shadow: 0 0 5px black;
    }

/*#endregion */

/*#region Input-ContainerForIamge */
.UserImage {
    height: 200px;
    width: 200px;
    display: block;
    box-shadow: 0 0 5px black;
    text-shadow: 0 0 5px black;
    z-index:5;
    transition: all 0.3s ease;
}
    .UserImage:hover {
       
        box-shadow: 0 0 5px #ff6a00;
        transform: translateY(-15px) scale(1.1);
    }
.input-container-forImage {
    display: flex;
    position: relative;
    min-width: 400px;
    margin: 30px 20px;
    font-family: Calibri;
    box-sizing: border-box;
    flex-flow: column;
    align-items: center;
    transition: all 0.3s ease;
}

    .input-container-forImage input[type="submit"],
    .input-container-forImage input[type="button"] {
        width: 85% !important;
        margin:10px;
    }
    .input-container-forImage span {
        position: relative;
        color: #696969;
        justify-content: center;
        font-size: 18px;
        font-weight: 800;
        user-select: none;
        z-index: 4;
        transition: all 0.3s ease;
    }
    .input-container-forImage:hover span {
        color: #ff6a00;
    }

    .input-container-forImage span:hover {
            color: #ff6a00;
        }


/*#endregion */

/*#region Voucher Model */

.modal-content-common {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    width: 90%;
    height:80%;
    border-radius: 15px;
    position: relative;
    box-shadow: inset 0 0 5px black;
}
    

/*#endregion */