input[type="text"] {
    width: 200px;
}

#previewTabInner p {
    border-style: none;
    margin: 0 0 0 0;
}

#previewTabInner h2, h3, h4 {
    margin: 0 0 0 0;
}

.agreement-row {
    padding-bottom: 0px;
    padding-left: 5px;
}

.divdays {
    padding-bottom: 15px;
}

#previewTab p {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#previewTab row {
    padding-bottom: 10px;
}

.body-content .row {
    padding-bottom: 20px;
}

.body {
    background-color: #00A6CA;
}

.left_align {
    text-align: left;
}

option:disabled {
    color: #d3d3d3;
}

.borderless td, .borderless th {
    border: none;
}

.btn-xlarge {
    padding: 18px 40px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #00A6CA;
    color: white;
    min-height: 100%;
    height: 100%;
    max-width: 280px;
    font-size: Large;
    font-weight: normal;
    height: auto;
}

input[type="text"] {
    width: auto;
}
/*
    a, a:visited {
    color: red;
    }*/


.txtotp {
    max-width: 130px;
}

.otpButton {
    width: 115px;
}

.navbar-brand {
    display: block;
    width: 100%;
    text-align: center;
}

.colorBarWrap .midnightgreen {
    width: 100%;
    background-color: #0d5257;
    height: 8px;
    display: inline-block;
    float: left;
}

.colorBarWrap .red {
    width: calc(100% - 410px);
    background-color: #ef4123;
    height: 8px;
    display: inline-block;
    float: left;
}

.colorBarWrap .green {
    width: 130px;
    background-color: #7aba3e;
    height: 8px;
    display: inline-block;
    float: left;
}

.colorBarWrap .orange {
    width: 110px;
    background-color: #f47920;
    height: 8px;
    display: inline-block;
    float: left;
}

.colorBarWrap .blue {
    width: 170px;
    background-color: #00a1e4;
    height: 8px;
    display: inline-block;
    float: left;
}

@media (max-width: 980px) {
    /* CSS goes here */
    .button-row {
        padding-left: 70px;
    }

    #chkAgreementWrapper {
        display: inline;
        padding-right: 10px;
        float: left;
    }

    .class_checkbox {
        padding: 0px;
        margin: 0px;
        margin-left: 5px !important;
    }

    .terms-row {
        /*
                display:inline;
                margin-left:30px;*/
        padding-left: 0px;
        font-size: 9px !important;
    }

    .agreement-row {
        /*margin-left: 13px;*/
    }

    .off-at-small {
        display: none;
    }

    .btn-xlarge {
        padding: 18px 48px;
    }


    .detailsRows {
        float: left;
        text-align: left;
        padding-left: 0;
        margin-left: 0;
    }

    .padding-left-media {
        padding-left: 40px;
    }

    .css-checkbox {
        padding-top: 30px;
    }

    #chkAgreementWrapper {
        text-align: left;
    }
}

.listboxx {
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
}

.dropdown {
    font-size: 20px;
    background: white;
    /*border:none;*/
    position: relative;
    padding-right: 10px;
}

.dropdown:focus {
    outline: none;
}

.plain-selector {
    margin: 0 3px;
}

.plain-selector::after {
    content: "";
    position: absolute;
    z-index: 2;
    bottom: 30%;
    margin-top: -3px;
    height: 0;
    width: 0;
    right: 0;
    border-top: 6px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
}

.plain-selector::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 30%;
    margin-top: -3px;
    height: 0;
    width: 0;
    right: 0;
    border-bottom: 6px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
}

.out-selector {
    position: relative;
    display: block;
}

.out-selector .loading {
    position: absolute;
    z-index: 10;
    width: 100%;
    top: 30%;
}

.outter-selection {
    width: 100%;
}

#time-header {
    background-color: #eee;
    padding: 7px;
    text-align: center;
}

#date-selector {
    padding: 0;
}
#date-selector .date-pervious, #date-selector .date-next {
    background-color: #ccc;
    border: 2px solid #ccc;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}
#date-selector .date-pervious:hover, #date-selector .date-next:hover {
  background: #ddd;
}
#date-selector .date-container {
    padding-bottom: 10px;
}
#date-selector .date-container span {
    border-color: #ccc;
    border-style: solid;
    border-width: 2px 1px;
    padding: 10px 0;
    text-align: center;
}
#date-selector .date-container span.current {
    background-color: #a9d161;
    border-color: #000;
    border-width: 2px 3px;
    font-weight: bold;
}
#date-selector .date-container span.event {
    cursor: pointer;
}
#lbToday > option {
    text-align: center;
}
.refreshCaptcha {
    cursor: pointer;
}
#previewTabInner {
    padding: 0;
    font-weight: bold; 
    letter-spacing: 1px; 
    margin-top: 30px; 
    border-style: double;
}
@media screen and (max-width: 991px) {
    .panEdit h1 {
        text-align: left;
        font-size: 26px;
    }
    .panEdit #open-cal img {
        max-width: 50px;
        max-height: 50px;
    }
    #date-selector .date-col {
        padding-left:0; 
        padding-right:0;
    }
}

.selection {
    display: block;
    margin: auto;
    border-radius: 50px;
    background: white;
    text-align: center;
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
}

.selection, select {
    max-width: 100%;
}

#time-container .detailsRows {
    padding-bottom: 10px;
}

#time-container .detailsRows input,
#time-container .detailsRows select {
    width: 100%;
    max-width: 100%;
}
#time-container {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 620px;
    margin: auto;
}
#cal-container {
    border-right: 1px solid #ccc;
}
#cal-container .detailsRows {
    padding-bottom: 10px;
}

.InputInfo {
    font-size: 18px;
}

.remarkFontSize {
    font-size: smaller;
}

input[type="submit"] {
    min-height: 100%;
    height: 100%;
}

.previewTab {
    padding: 20px 20px 20px 20px;
}

.previewTab previewTabInner {
    padding: 20px 20px 20px 20px;
}

.input-control {
    padding-top: 30px;
}

.class_checkbox {
    background-image: url('/Content/images/Cross.png');
    display: inline-block;
    height: 28px;
    width: 28px;
}

.class_checkbox.checked {
    background-image: url('/Content/images/Cross-checked.png');
}

.paddingLeft-45 {
    padding-left: 45px;
}

.paddingLeft-45 {
    padding-left: 45px;
}

.lblMobNo {
    padding-left: 40px;
    padding-right: 0px;
}

.clndr-next-button {
}

.chkList {
    min-width: 260px;
    max-width: 260px;
    width: auto;
}

.btn-bottom {
    padding-bottom: 50px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {

    .chkList {
        min-width: 260px;
        max-width: 260px;
        width: auto;
    }
}

.timelbl {
    padding-top: 110px;
}


.new-board-btn {
    margin-top: 70px;
    white-space: normal;
}


.previewEng {
    font-size: 14px;
}

.PreviewTitle {
    display: block;
    font-size: 36px;
}

.PreviewTitleSmall {
    display: none;
    font-size: 20px;
}

.hrr {
    display: none;
    margin: 0;
    height: 3px;
}

.confirmTabInner {
    border-style: double;
}

.imgConfirm {
    max-width: 100%;
}
.panOfficeHour p.title {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    margin-top: 20px;
}
.panOfficeHour p {
    margin: 0;
    padding: 0;
    background: none;
    border-bottom: none;
}
.panAppointment {
    min-height: 500px;
}

.panAppointment .welcome {
    background: none;
    border-bottom: none;
    font-size: 40px;
    margin: 0;
    font-weight: bold;
}

.appointmentBtn {
    display: block;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 20px;
    min-width: 50%;
    //background-color: #f04124;
	//background-color: #00a7b5;
	background-color: #009188;
    height: 115px !important;
    border-radius: 5px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    box-shadow: 1px 1px 5px 1px #888888;
}
.requestreplyBtn {
    display: block;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 20px;
    min-width: 50%;
    background-color: #f47920;
    height: 115px !important;
    border-radius: 5px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    box-shadow: 1px 1px 5px 1px #888888;
}

.StatementContainer {
    margin: 20px 10%;
    /*border: 1px solid black;*/
    padding: 20px;
}
.StatementContainer p {
    font-family: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background: none;
    font-size: 20px;
}

.schemeBtn {
    display: block;
    text-align: center;
    width: 100%;
    max-width: 100%;
    background-color: #0092d9;
    /* height: 115px !important; */
    border-radius: 5px;
    color: white;
    margin-top: 20px;
    box-shadow: 1px 1px 5px 1px #888888;
    font-weight: bold;
}

.schemeBtn.green {
    //background-color: #7aba3e;
	//background-color: #00a7b5;
	background-color: #009188;
}


.schemeBtn.orange {
    background-color: #f47920;
}

.schemeBtn.red {
    background-color: #ef4123;
	//background-color: #00a7b5;
}
.schemeBtn.midnightgreen {
    background-color: #0d5257;
}
.schemeBtn.blue {
    background-color: #4285F4;
}

a.appointmentBtn:hover,
a.appointmentBtn:focus,
a.requestreplyBtn:hover,
a.requestreplyBtn:focus,
a.schemeBtn:hover,
a.schemeBtn:focus {
    text-decoration: none;
    color: white;
}
.schemeBtn .letter {
    vertical-align: top;
    display: inline-block;
    font-size: 85px;
    width: 15%;
}
.schemeBtn .name {
    display: inline-block;
    width: 85%;
    font-size: 30px;
}


.queue {
    background-color: #e5e5e5;
    /*max-width: 98%;*/
    max-width: 80%;
    margin: auto;
    margin-bottom: 20px;
    /*font-size: 35px;*/
    font-size: 55px;
    font-weight: bold;
    border: 3px solid #0092d9;
}

.queue .ticket-statement {
    font-size: 30px;
}

.queue .ticket-statement .chinese{
    font-size: 28px;
}


.table-bordered.queue tr > th, .table-bordered.queue tr > td {
    border: 3px solid #0092d9;
    text-align: center;
    padding: 0;
    min-width: 65px;
    max-width: 100px;
}

@media screen and (max-width: 768px) {
    .colorBarWrap .red {
        width: 49.25%;
    }

    .colorBarWrap .green {
        width: 17%;
    }

    .colorBarWrap .orange {
        width: 13.75%;
    }

    .colorBarWrap .blue {
        width: 20%;
    }

    #previewTabInner {
        border-style: none !important;
    }

    .imgConfirm {
        width: 173px;
    }

    .PreviewTitleSmall {
        display: block;
    }

    .PreviewTitle {
        display: none;
    }

    .timelbl {
        padding-top: 0;
    }

    .timelbl2 {
        display: none;
    }

    .panEdit {
        padding-bottom: 5px !important;
    }

    .input-control {
        padding-top: 0px;
    }

    .new-board-btn {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 20px;
        width: 68%;
        max-width: none;
        border-radius: 10px;
    }

    .divdays {
        border-top: 1px;
        border-bottom: 1px;
        border-color: #00A6CA;
        border: medium;
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .emptySpace {
        padding: 0px !important;
    }

    .lblMobNo {
    }

    .detailsRows {
    }

    body {
        font-family: Intro-Regular;
        font-size: 14px;
    }

    .rightCol {
        padding-left: 72px;
        float: left;
    }

    .padding-left-media {
        margin-left: 0px;
    }

    .leftCol {
        float: left;
        padding-left: 0px;
    }

    .recaptch {
        text-align: left;
        padding-left: 50px !important;
    }

    .form-wrapper {
        padding-bottom: 0px !important;
        padding-left: 25px !important;
    }

    button-wrapper {
        padding-left: 35px !important;
    }

    .btnConfirm {
        width: 160px;
    }

    .backBtnWrapper {
        float: none !important;
        padding-left: 55px !important;
    }

    .termsline1 {
        /*font-size:small !important;*/
        font-size: 9px;
    }

    .termsline2 {
        /* font-size:small !important;*/
        font-size: 9px;
    }

    .previewEng {
        font-size: 10px;
    }

    .hrr {
        display: block;
        margin-bottom: 0px;
        margin-top: 20px;
    }

    .confirmTabInner {
        border-style: none;
    }

    .changeTime {
        display: none;
    }

    .row {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .out-selector {
        /*padding-left:50px;
        left: 30px;*/
    }

    .terms-row {
        margin-left: 50px;
    }

    .regMsg {
        padding: 0;
    }


    .txtotpWrapper {
        padding-left: 0;
    }

    .otpButtonWrapper {
        padding-left: 0;
        margin-top: 20px;
    }

    .schemeBtn .letter {
        font-size: 50px;
    }

    .schemeBtn .name {
        font-size: 18px;
        position: relative;
        top: 5px;
    }
	

	.appointmentBtn {
    font-size: 28px;
	padding-top: 12px;
	min-width: 60%;
	margin-left: 20%;
    margin-right: 20%;
	}
	
	.requestreplyBtn {
    font-size: 28px;
	padding-top: 12px;
	min-width: 60%;
	margin-left: 20%;
    margin-right: 20%;
	}
	

    .queue {
        font-size: 35px;
    }

    .queue .ticket-statement {
        font-size: 12px;
    }
        
    .queue .ticket-statement .chinese {
        font-size: 12px;
    }
}

@media screen and (max-width: 481px) {
    .rightCol {
        padding-left: 0px !important;
    }

    .nameRow {
        padding-left: 27px !important;
    }
}