Border-box not displaying text, padding-box not displaying correctly

I'm currently having an issue with my website and a chat service that we are trying to implement. I've narrowed it down to a CSS issue associated with the border-box property.

The problem only exists in Internet Explorer 11 as well. The box displays correctly in Mozilla, Chrome and even older versions of IE. Once the user clicks the "Need Help, Live Chat" button on the left side of the website, they are unable to see their entry text. I know that the data is being entered and works, but for some reason the field does not display what the user types. I figured it was a sizing issue, which was proven correct by displaying the page with out CSS in IE 11, I can see the entry in the box, but once the CSS is enable, it vanishes again from the field. I've tried many edits to get it to work without success, but ended up switching to the padding-box just to see if it works. That seems to be working in both browsers, but in IE 11 the text hugs the bottom border and looks bad.

Is there a way I can either fix the border-box to get the text to display in the correct area, or is there a way that I can float the text upwards while using the padding-box to make it look better?

Here is the page that the chat code is enabled on: https://www.sundancevacations.com/company/privacy-statement/

This is the code I am currently working with.

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display: block;
}

audio,canvas,video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],template {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a {
    background: transparent;
}

a:focus {
    outline: thin dotted;
}

a:active,a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code,kbd,pre,samp {
    font-family: monospace,serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    border: 0;
    padding: 0;
}

button,input,select,textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button,input {
    line-height: normal;
}

button,select {
    text-transform: none;
}

button,html input[type=button],input[type=reset],input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],html input[disabled] {
    cursor: default;
}

input[type=checkbox],input[type=radio] {
    box-sizing: border-box;
    padding: 10px;
    width: 1%;
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

And currently my box sizing looks like this:

*,input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: padding-box;
}

Any help would be greatly appreciated.

So I was able to figure out the issue here.

Turns out that border-box setting was being over-ridden by an entry buried in another section of the CSS. It was added 10px of padding around everything, which was causing the text to be displayed out of the area, thus creating the illusion that nothing was being typed.

I turned it down to just 5px and the border-box setting is now working properly. The secondary file of CSS (kept in a separate place) is what did me in. The padding was tagged with an !important tag causing it to override the settings of the chat box.

Thanks for the help everyone!