﻿body { color: #323234; }


input[type=text] { padding-left: 10px; outline: none; border-radius: 5px; border: 1px solid #ddd; width: 100%; height: 36px; font-size: 14px; color: #323234; }
input[type=text]:focus { border: 1px solid skyblue; box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.1); }
input[type=radio], input[type=checkbox] { width: 18px; height: 18px; margin-top: 3px; }


.q { width: 100%; }
.q label { font-size: 18px; font-weight: 700; margin-bottom: 20px; }

span { color: #FE8E14; }

.details { padding-left: 18px; }
.details label { font-size: 16px; font-weight: 100; height: inherit; line-height: inherit; display: inline-block; margin-bottom: 0px; }
.details > div { width: auto; margin-bottom: 10px; }

.details .rows { width: 100%; margin-bottom: 15px; }
.details .rows:last-child { margin-bottom: 0px; }
.details .rows > div { width: 45%; display: inline-block; margin-right: 9%; }
.details .rows > div.second { margin-right: 0%; }
.details .rows > div input[type=text] { width: calc(100% - 20px); }
.details .rows span { font-size: 16px; margin-left: 3px; }

.radio div label, .checkbox div label { padding-left: 10px; vertical-align: top; }


.m { margin: 40px 0; }

.textBox textarea { height: 160px; width: 97%; outline: none; border: 1px solid #ddd; resize: none; overflow: auto; font-size: 14px; border-radius: 5px; padding-left: 10px; }
.textBox textarea:focus { border: 1px solid skyblue; box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.1); }

input[type=text].others { margin-left: 20px; width: calc(100% - 132px); vertical-align: top; display: none; }

.btn { width: 100%; margin-top: 0px; margin-bottom: 100px; padding: 0 0; text-align: left; }
.btn .button { outline: none; border: none; cursor: pointer; background-color: rgb(254, 142, 20); width: 150px; height: 40px; font-size: 14px; color: white; font-weight: 700; letter-spacing: 1px; text-indent: 1px; }
.btn .button:hover { background-color: rgb(255, 174, 56); }
input.error { border: 1px solid red; }
textarea.error { border: 1px solid red; }
label.error { color: red; }
.rows label.error { display: none !important; }
#expectation-error { display: none !important; }

.msgBox { display: none; z-index: 20; position: fixed; z-index: 1; top: 110px; left: 50%; margin-left: -220px; padding: 35px 55px 35px 45px; width: 440px; height: auto; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 0 0 #eee, 0 0 0 #fff, 0 4px 6px #e8e8e8, 0 0 0 #eee; -webkit-box-shadow: 0 0 0 #eee, 0 0 0 #fff, 0 4px 6px #ddd, 0 0 0 #eee; }
.msgBox a.closeMsg { position: absolute; top: 8px; right: 20px; cursor: pointer; }
.msgBox p { margin: 10px; }
.msgBox .leftContent { float: left; margin-right: 45px; }
.msgBox .rightContent { float: left; width: 198px; }
.msgBox p { margin: 0 0 10px; margin-bottom: 3px; }
.msgBox .msg { font-family: OpenSans-Regular; font-size: 16px; margin-block-end: 3px; margin-block-start: 0px; line-height: 26px; color: rgb(96, 96, 96); }
.msgBox input[type=button] { margin-top: 15px; padding: 0 30px; width: auto; height: 28px; background: #fe8e14; color: #fff; outline: none; border: none; font-size: 16px; }
.msgBox input[type=button]:hover { background: #ff9f1f; }

.topHeader h1 { font-size: 32px; font-family: OpenSans-Light; }


@media screen and (max-width: 1680px) {
}

@media screen and (max-width: 991px) {
    input[type=radio], input[type=checkbox] { width: 16px; height: 16px; }
}

@media screen and (max-width: 767px) {
    .q label { font-size: 16px; }
    .details .rows { width: 100%; margin-bottom: 0; }
    .details .rows div { width: 100%; display: inline-block; margin-right: 0%; margin-bottom: 10px; }
    .details label { font-size: 14px; }
    input[type=text].others { margin-left: 28px; width: calc(100% - 48px); vertical-align: top; margin-top: 5px; }
}
