/* Basic Settings */

input {-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
input, select {outline: none;}
input::placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder {color:#fff}
select {-webkit-appearance: none;}
select::-ms-expand {display: none;}

@font-face {font-family: "Circular-Book-S"; src: url(../fonts/lineto-circular-book.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt); src: url(../fonts/lineto-circular-book.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt&#iefix) format("embedded-opentype"), url(../fonts/lineto-circular-book.woff?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt) format("woff"); font-weight: normal; font-style: normal}
@font-face {font-family: "Circular-BookItalic-S"; src: url(../fonts/lineto-circular-bookItalic.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt); src: url(../fonts/lineto-circular-bookItalic.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt&#iefix) format("embedded-opentype"), url(../fonts/lineto-circular-bookItalic.woff?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt) format("woff"); font-weight: normal; font-style: normal}
@font-face {font-family: "Circular-Medium-S"; src: url(../fonts/lineto-circular-medium.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt); src: url(../fonts/lineto-circular-medium.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt&#iefix) format("embedded-opentype"), url(../fonts/lineto-circular-medium.woff?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt) format("woff"); font-weight: normal; font-style: normal}
@font-face {font-family: "Circular-MediumItalic-S"; src: url(../fonts/lineto-circular-mediumItalic.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt); src: url(../fonts/lineto-circular-mediumItalic.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt&#iefix) format("embedded-opentype"), url(../fonts/lineto-circular-mediumItalic.woff?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt) format("woff"); font-weight: normal; font-style: normal}
@font-face {font-family: "Circular-Bold-S"; src: url(../fonts/lineto-circular-bold.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt); src: url(../fonts/lineto-circular-bold.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt&#iefix) format("embedded-opentype"), url(../fonts/lineto-circular-bold.woff?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt) format("woff"); font-weight: normal; font-style: normal}
@font-face {font-family: "Circular-BoldItalic-S"; src: url(../fonts/lineto-circular-boldItalic.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt); src: url(../fonts/lineto-circular-boldItalic.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt&#iefix) format("embedded-opentype"), url(../fonts/lineto-circular-boldItalic.woff?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt) format("woff"); font-weight: normal; font-style: normal}
@font-face {font-family: "Circular-Black-S"; src: url(../fonts/lineto-circular-black.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt); src: url(../fonts/lineto-circular-black.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt&#iefix) format("embedded-opentype"), url(../fonts/lineto-circular-black.woff?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt) format("woff"); font-weight: normal; font-style: normal}
@font-face {font-family: "Circular-BlackItalic-S"; src: url(../fonts/lineto-circular-blackItalic.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt); src: url(../fonts/lineto-circular-blackItalic.eot?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt&#iefix) format("embedded-opentype"), url(../fonts/lineto-circular-blackItalic.woff?orgId=00D37000000IySt&orgId=00Dg0000006HfS7&orgId=00D37000000IySt) format("woff"); font-weight: normal; font-style: normal}

/************** for demo purposes only **************/

.idealExample, .fallBackExample {padding:0 50px;display: inline-block;vertical-align: top;}


/***************************  Input Types */

input[type="search"].dmrcSearch, input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], select  {
  color:#999;
  margin-right:5px;
  min-width:125px;
  padding:14px 15px;
  border-radius: 4px;
  border:1px solid #999;
  font-family: "Circular-Bold-S";
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  font-size:16px;
}

input[type="search"].dmrcSearch::placeholder, input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="email"]::placeholder, input[type="number"]::placeholder {
  color:#ccc;
  box-shadow:none;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  }
/* MS placeholder styles */
input[type="search"].dmrcSearch:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder {color:#ccc;box-shadow:none;}
input[type="search"].dmrcSearch::-ms-input-placeholder, input[type="text"]::-ms-input-placeholder, input[type="email"]::-ms-input-placeholder, input[type="password"]::-ms-input-placeholder, input[type="number"]::-ms-input-placeholder {color:#ccc;box-shadow:none;}
/* end MS placeholder styles */
input[type="search"].dmrcSearch:hover, input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, select:hover, input[type="number"]:hover {background:#efefef;}
input[type="search"].dmrcSearch:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, input[type="number"]:focus {background:#efefef;}
input[type="submit"].dmrcSearch {border:1px solid #999;border-radius:4px;padding:0;width:50px;height:50px;background: rgba(255,255,255,.5) url(../img/search-1.png) no-repeat;background-size:50% 50%;background-position:50% 49%;position:relative;top:-1px; }
input[type="submit"].search:hover {background: #efefef url(../img/search-1.png) no-repeat;background-size:50% 50%;background-position:50% 49%; }

textarea {margin-bottom:25px;}


@media (max-width: 1700px) { 
  /* select {width:264px;}
  input[type="search"], input[type="text"]  {width:200px;} */
}

/***************************  Date Picker Styles **************/

input[type="date"] {padding: 12px 15px;color:#ccc;}
input[type="date"]::-webkit-clear-button {color:#999;width:15px;height:15px;}
input[type="date"]::-webkit-calendar-picker-indicator {color:#999;}
input[type="date"]:valid {color:#999;}


/***************************  Moving Label Placeholder for normal Imputs */

div.placeholderInputs input {display: block;margin-bottom: 25px;}
div.textInputs input {display: block;margin-bottom: 25px;}
div.textInputs > div, div.dmrcSelect, div.dmrcTextarea {position: relative;}

div.textInputs > div > label, div.dmrcSelect label, div.dmrcTextarea label {
  position: absolute;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  top:15px;
  left:18px;
  font-family: "Circular-Bold-S";
  color:#ccc;
  visibility: hidden;
}

div.textInputs > div input:focus + label, div.dmrcSelect select:focus + label, div.dmrcTextarea textarea:focus + label {
  font-size:12px;
  color:#999;
  top:-17px;
  left:5px;
  visibility: visible;
}

div.textInputs > div input:valid + label, div.dmrcSelect select:valid + label, div.dmrcTextarea textarea:valid + label {
  font-size:12px;
  color:#999;
  top:-17px;
  left:5px;
  visibility: visible;
}


div.textInputs > div input:focus::placeholder, div.dmrcSelect select:focus::placeholder, div.dmrcTextarea textarea:focus::placeholder {
  color:transparent;
}

div.textInputs > div input:valid + label, div.dmrcSelect select:valid + label, div.dmrcTextarea textarea:valid + label {
  font-size:12px;
  color:#999;
  top:-17px;
  left:5px;
  visibility: visible;
}

/* email "validation" bug fix (invalid email makes label disappear) */

div.textInputs > div input[type="email"] + label {
  font-size:12px;
  color:#999;
  top:-17px;
  left:5px;
  visibility: visible;
}

div.textInputs > div input[type="email"]:placeholder-shown + label {
  position: absolute;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  top:15px;
  left:18px;
  font-family: "Circular-Bold-S";
  color:#ccc;
  visibility: hidden;
}

div.textInputs > div input[type="email"]:focus + label {
  font-size:12px;
  color:#999;
  top:-17px;
  left:5px;
  visibility: visible;
}

/* chrome autofill display error bug fix */

div.textInputs > div input:-webkit-autofill + label, div.dmrcSelect select:-webkit-autofill + label, div.dmrcTextarea textarea:-webkit-autofill + label {
  font-size:12px;
  color:#999;
  top:-17px;
  left:5px;
  visibility: visible;
}

/***************************  Additional Selection styles */

div.dmrcSelect {display: inline-block;}
div.dmrcSelect div {position:relative;display: inline-block;}
div.dmrcSelect span {position: absolute;top:18px;right:20px;color:#999;pointer-events:none;}
div.dmrcSelect select {margin-bottom: 25px;padding-right:45px;}


/***************************  Radio Button */

.checkBoxBox > label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    color:#999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

}

/* Hide the browser's default checkbox */
.checkBoxBox > label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 4px;
    background-color: #fff;
    border:1px solid #999;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* On mouse-over, add a grey background color */
.checkBoxBox > label:hover input ~ .checkmark {
    background-color: #ccc;
    border:1px solid #005a96;
}

/* When the checkbox is checked, add a blue background */
.checkBoxBox > label input:checked ~ .checkmark {
    background-color: #005a96;
    border:1px solid #13284b;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkBoxBox > label input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkBoxBox > label .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}




/***************************  CheckboxBox */

.radioButton > label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    color:#999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.radioButton > label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radioButton > label .checkmark {
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radioButton > label:hover input ~ .checkmark {
    background-color: #ccc;
    border:1px solid #005a96;
}


/* When the checkbox is checked, add a blue background */
.radioButton > label input:checked ~ .checkmark {
    background-color: #005a96;
    border:1px solid #13284b;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.radioButton > label input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.radioButton > label .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/*************************** Textarea styles */

textarea {
  display: block;
  border-radius:4px;
  border:1px solid #999;
  padding:15px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  font-family: "Circular-Bold-S";
  height:75px;min-width: 250px;
  color:#999;
}
textarea::placeholder {color:#ccc;}
/* MS placeholder styles */
textarea:-ms-input-placeholder {color:#ccc;}
textarea::-ms-input-placeholder {color:#ccc;}
/* end MS placeholder styles */
textarea:hover {background:#efefef;color:#999;}
textarea:focus {outline: none;background:#efefef;color:#999;}

textarea.wtInversion {border:1px solid #22c0f1;background: rgba(255,255,255,.75);color:#fff;}
/* MS placeholder styles */
textarea.wtInversion::placeholder {color:#005a96;}
textarea.wtInversion:-ms-input-placeholder {color:#005a96;}
textarea.wtInversion::-ms-input-placeholder {color:#005a96;}
/* end MS placeholder styles */
textarea.wtInversion:hover {background: rgba(255,255,255,.25);color:#fff;}
textarea.wtInversion:focus {background: rgba(255,255,255,.25);color:#fff;}



/*************************** Dark Theme styles */

.darkForms input[type="search"].dmrcSearch, .darkForms input[type="text"], .darkForms input[type="number"], .darkForms select, .darkForms textarea  {color:#fff;}

.darkForms .checkBoxBox > label, .darkForms .radioButton > label {color:#fff;}

.darkForms .checkBoxBox > label:hover input ~ .checkmark {
    border:1px solid #90c53d;
}

.darkForms .checkBoxBox > label input:checked ~ .checkmark {
    background-color: #90c53d;
}

.darkForms .radioButton > label:hover input ~ .checkmark {
    border:1px solid #90c53d;
}

.darkForms .radioButton > label input:checked ~ .checkmark {
    background-color: #90c53d;
}

.darkForms div.textInputs > div input:focus + label, .darkForms div.dmrcSelect select:focus + label, .darkForms div.dmrcTextarea textarea:focus + label {
  color:#fff;
}

.darkForms div.textInputs > div input:valid + label, .darkForms div.dmrcSelect select:valid + label, .darkForms div.dmrcTextarea textarea:valid + label {
  color:#fff;
}

.darkForms input[type="submit"].dmrcSearch {background: rgba(255,255,255,.5) url(../img/search.png) no-repeat;background-size:50% 50%;background-position:50% 49%;position:relative;top:-1px;border-color:#fff; }
.darkForms input[type="submit"].dmrcSearch:hover {background: rgba(255,255,255,.25) url(../img/search.png) no-repeat;background-size:50% 50%;background-position:50% 49%; }

.darkForms input[type="search"].dmrcSearch, .darkForms input[type="text"], .darkForms input[type="number"], .darkForms select, .darkForms textarea {background:rgba(255,255,255,.5);border-color:#fff;}
.darkForms input[type="search"].dmrcSearch:hover, .darkForms input[type="text"]:hover, .darkForms input[type="number"]:hover, .darkForms select:hover, .darkForms textarea:hover {background:rgba(255,255,255,.25);border-color:#fff;}

.darkForms input[type="search"].dmrcSearch::placeholder, .darkForms input[type="text"]::placeholder, .darkForms input[type="number"]::placeholder, .darkForms textarea::placeholder {color:#fff;box-shadow:none;}
/* MS placeholder styles */
.darkForms input[type="search"].dmrcSearch:-ms-input-placeholder, .darkForms input[type="text"]:-ms-input-placeholder, .darkForms input[type="number"]:-ms-input-placeholder, .darkForms textarea:-ms-input-placeholder {color:#fff;box-shadow:none;}
.darkForms input[type="search"].dmrcSearch::-ms-input-placeholder, .darkForms input[type="text"]::-ms-input-placeholder, .darkForms input[type="number"]::-ms-input-placeholder, .darkForms textarea::-ms-input-placeholder {color:#fff;box-shadow:none;}
/* end MS placeholder styles */

.darkForms div.dmrcSelect span {color:#fff;}

div.darkForms div.textInputs > div > label, div.darkForms div.dmrcSelect label, div.darkForms div.dmrcTextarea label {
  color:#fff;
}

div.darkForms div.textInputs > div input:focus + label, div.darkForms div.dmrcSelect select:focus + label, div.darkForms div.dmrcTextarea textarea:focus + label {
  color:#fff;
}

div.darkForms div.textInputs > div input:valid + label, div.darkForms div.dmrcSelect select:valid + label, div.darkForms div.dmrcTextarea textarea:valid + label {
  color:#fff;
}

.darkForms select option {color:#005a96;}