youhk_test_repository/public/js/css/common.css

@charset "utf-8";

/* Form */
select { height:28px; font-size:13px; padding:0 5px; color:#373737; border:1px solid #ccc; background:#fff; box-sizing: border-box}
select[disabled]{background:#eaeaea; border-color:#c0c0c0; color:#666;}
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date] {width:250px; height:28px; font-size:12px; color:#373737; border:1px solid #ccc; background:#fff; text-indent:5px; transition: all 0.5s; vertical-align:middle; box-sizing: border-box}
textarea {width:100%; height:150px; font-size:12px; color:#373737; padding: 10px; border:1px solid #ccc; background:#fff; transition: all 0.5s; vertical-align:middle; box-sizing: border-box}
input::-webkit-input-placeholder{color:#b5b5b5; font-size:12px; line-height:100%; box-sizing: border-box}
select:focus,
textarea:focus,
input:focus { border: 1px solid #727272; outline: none;}

input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=email][readonly],
input[type=search][readonly],
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled]{background:#eaeaea; border-color:#c0c0c0; color:#666; -webkit-appearance:none;font-size:12px;}
textarea[readonly],
textarea[disabled]{padding:11px; font-size:16px; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea;border:1px solid #c0c0c0;}

input[type="date"] {width: 130px;}

input[type="checkbox"] {position: absolute; /*left: -5000%*/}
input[type="checkbox"] + label {font-weight: normal; margin-right: 10px; margin-bottom: 0;}
input[type="checkbox"] + label:before {content: ""; display: inline-block; width: 14px; height: 14px; border: 1px #a6a6a6 solid; margin: 0 5px 0 0; position: relative; top:3px; border-radius: 0; box-sizing: border-box;}
input[type="checkbox"]:checked + label:before {background:url("/images/checkbox-checked.jpg") no-repeat;}

input[type="radio"] {position: absolute; left: -5000%}
input[type="radio"] + label {font-weight: normal; margin-right: 10px; margin-bottom: 0;}
input[type="radio"] + label:before {content: ""; display: inline-block; width: 14px; height: 14px; border: 1px #a6a6a6 solid; margin: 0 5px 0 0; position: relative; top:3px; border-radius: 14px; box-sizing: border-box;}
input[type="radio"]:checked + label:before {background:url("/images/radio-checked.jpg") no-repeat; }

input[type=checkbox][disabled] + label:before,
input[type=radio][disabled] + label:before{background:#eaeaea; border-color:#726969; color:#666; -webkit-appearance:none;font-size:12px;}

.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}
.hide {display:none}

.table-col, .table-row {width: 100%;}
.table-col {table-layout: fixed;}
.table-col th {width: 150px; background-color:#f5f5f5; padding: 8px 15px; border: 1px #ddd solid; vertical-align: middle !important;}
@media screen and (min-width:100px) and (max-width:1200px) {
    .table-col th{width: auto;}
    input, select, input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {width: 100% !important}
}
.table-col td { min-width:300px !important; padding: 8px 15px; border-top: 1px #ddd solid; border-right: 1px #ddd solid; border-bottom: 1px #ddd solid;}

.table-row th {text-align: center; padding: 8px 15px; background-color:#324148; color: #FFF; border-right: 1px #ccc solid;}

.table-row td {padding: 8px 15px;border-bottom: 1px #ddd solid; border-right: 1px #ddd solid;}
.table-row td:first-child {border-left: 1px #ddd solid;}

.nav-group-sub .nav-link { padding: .625rem 1.25rem .625rem 2.25rem;}