[contenteditable]:focus {
            /*outline: 1px solid transparent;*/
            outline: 1px solid black;
        }

        [contenteditable] {
            -webkit-user-select: text;
            user-select: text;
        }

        /*input[type=text]:focus {
            outline: none;
        }*/
        [class*="cus-col-"] {
            float: left;
            padding: 0px;
            /*padding-bottom: 10px;*/
        }

        /* For mobile phones: */
        [class*="cus-col-"] {
            width: 100%;
        }

        @media only screen and (min-width: 600px) {
            /* For tablets: */
            .cus-col-sm-1 {
                width: 8.33%;
            }

            .cus-col-sm-1_5 {
                width: 12.495%;
            }

            .cus-col-sm-2 {
                width: 16.66%;
            }

            .cus-col-sm-2_5 {
                width: 20.825%;
            }

            .cus-col-sm-3 {
                width: 25%;
            }

            .cus-col-sm-4 {
                width: 33.33%;
            }

            .cus-col-sm-5 {
                width: 41.66%;
            }

            .cus-col-sm-6 {
                width: 50%;
            }

            .cus-col-sm-7 {
                width: 58.33%;
            }

            .cus-col-sm-7_5 {
                width: 62.475%;
            }

            .cus-col-sm-8 {
                width: 66.66%;
            }

            .cus-col-sm-9 {
                width: 75%;
            }

            .cus-col-sm-10 {
                width: 83.33%;
            }

            .cus-col-sm-11 {
                width: 91.66%;
            }

            .cus-col-sm-12 {
                width: 100%;
            }
        }
		
		@media only screen and (min-width: 768px) {
            /* For tablets: */
            .tbl-col-sm-1 {
                width: 8.33%;
            }

            .tbl-col-sm-2 {
                width: 16.66%;
            }

            .tbl-col-sm-3 {
                width: 25%;
            }

            .tbl-col-sm-4 {
                width: 33.33%;
            }

            .tbl-col-sm-5 {
                width: 41.66%;
            }

            .tbl-col-sm-6 {
                width: 50%;
            }

            .tbl-col-sm-7 {
                width: 58.33%;
            }

            .tbl-col-sm-8 {
                width: 66.66%;
            }

            .tbl-col-sm-9 {
                width: 75%;
            }

            .tbl-col-sm-10 {
                width: 83.33%;
            }

            .tbl-col-sm-11 {
                width: 91.66%;
            }

            .tbl-col-sm-12 {
                width: 100%;
            }
		}	
		@media only screen and (max-width: 767px) {	
			.tbl-col-xs-1 {
                width: 8.33%;
            }

            .tbl-col-xs-2 {
                width: 16.66%;
            }

            .tbl-col-xs-3 {
                width: 25%;
            }

            .tbl-col-xs-4 {
                width: 33.33%;
            }

            .tbl-col-xs-5 {
                width: 41.66%;
            }

            .tbl-col-xs-6 {
                width: 50%;
            }

            .tbl-col-xs-7 {
                width: 58.33%;
            }

            .tbl-col-xs-8 {
                width: 66.66%;
            }

            .tbl-col-xs-9 {
                width: 75%;
            }

            .tbl-col-xs-10 {
                width: 83.33%;
            }

            .tbl-col-xs-11 {
                width: 91.66%;
            }

            .tbl-col-xs-12 {
                width: 100%;
            }
        }
		
        /*@media screen and (-webkit-min-device-pixel-ratio:0) {
            select,
            label,
            input,
            textarea {
                font-size: 16px !important;
            }
        }*/

        .control-label {
            margin-left: 10px !important;
            width: calc(100% - 60px);
            margin-top: 1px;
            margin-bottom: 1px;
            padding-top: 0.2em;
            padding-bottom: 0.2em;
            font-size: 20px;
            line-height: 135%;
            font: 400 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
        }

        .cameraphoto-label {
            margin-left: 10px !important;
            margin-top: 1px;
            margin-bottom: 1px;
            padding-top: 0.2em;
            padding-bottom: 0.2em;
            font-size: 20px;
            line-height: 135%;
            font: 400 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            float: left;
        }

        /*.ctrl-label,*/
        /*.ctrl-textbox, .ctrl-textarea {
            min-height: 30px;
        }*/
		
		.tablediv {
			text-align: center;
		}
		
		.ctrl-datatable {
			width: 75%;
			margin: 0 auto;
		}

        .ctrl-label {
            margin-left: 10px !important;
            width: calc(100% - 50px);
            /*height: calc(100% - 10px);
            min-height: 43px;*/
            /*width: 93%;*/
            font-size: 14px;
            line-height: 135%;
            font: 400 14px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            cursor: default;
        }


        .ctrl-checkboxlabel {
            margin-left: 10px !important;
            margin-left: 10px !important;
            width: calc(100% - 50px);
            /*height: calc(100% - 10px);*/
            /*min-height: 43px;*/
            /*width: 93%;*/
            font-size: 14px;
            line-height: 135%;
            font: 400 14px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
        }

        .ctrl-checkbox {
            padding-left: 20px;
            padding-top: 0.3em;
            padding-bottom: 0.3em;
            margin-left: 10px !important;
            font-size: 16px;
            line-height: 135%;
            font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            float: left;
        }

        .ctrl-radiogroup {
            margin-left: 10px !important;
        }

            .ctrl-radiogroup .radio {
                padding-left: 20px;
                padding-top: 0.3em;
                padding-bottom: 0.3em;
                font-size: 16px;
                line-height: 135%;
                font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            }

        .ctrl-checkboxgroup {
            margin-left: 10px !important;
        }

            .ctrl-checkboxgroup .checkbox {
                padding-left: 20px;
                padding-top: 0.3em;
                padding-bottom: 0.3em;
                font-size: 16px;
                line-height: 135%;
                font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            }

        .ctl-signature {
            margin-right: 20px;

        }

            .ctl-signature input[type="button"] {
                /*float: right;*/
                margin-right: 20px;
            }

        .ctl-section {
            margin-left: 10px !important;
            width: calc(100% - 20px);
            height: calc(100% - 35px);
        }

        .ctrl-sectionarea {
            margin-left: 10px !important;
            width: calc(100% - 20px);
            height: calc(100% - 10px);
            border: 1px #484848 solid;
            border-radius: 5px;
            background: white;
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-color: mediumblue;
            transform: scale(1);
            transform-origin: top left;*/
            /*width: 90%;*/
        }

        .ctl-container {
            margin-left: 10px !important;
            width: calc(100% - 20px);
            height: calc(100% - 35px);
        }

        .control-contselect {
            margin-top: 5px !important;
            width: 20%;
            height: auto;
        }

        .ctrl-contarea {
            margin-left: 10px !important;
            width: calc(100% - 20px);
            height: calc(100% - 10px);
            border: 1px #484848 solid;
            border-radius: 5px;
            background: white;
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-color: mediumblue;
            transform: scale(1);
            transform-origin: top left;*/
            /*width: 90%;*/
        }

        .ctl-column {
            margin-left: 1px !important;
            width: calc(100% - 0px);
            height: calc(100% - 0px);
            background: rgba(0, 0, 0, 0);
        }

        .ctrl-colarea {
            margin-left: 0px !important;
            width: calc(100% - 5px);
            height: calc(100% - 0px);
            border: 1px #484848 dashed;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0);
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-color: mediumblue;
            transform: scale(1);
            transform-origin: top left;*/
            /*width: 90%;*/
        }

        .ctl-contcolumn {
            margin-left: 1px !important;
            width: calc(100% - 0px);
            height: calc(100% - 0px);
            background: rgba(0, 0, 0, 0);
        }

        .ctrl-contcolarea {
            margin-left: 0px !important;
            width: calc(100% - 5px);
            height: calc(100% - 0px);
            border: 1px white solid;
            border-radius: 5px;
            background: rgba(255, 255, 224, 0.75);
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-color: mediumblue;
            transform: scale(1);
            transform-origin: top left;*/
            /*width: 90%;*/
        }

        .ctrl-condLogic {
            margin-top: 5px !important;
            margin-left: 10px !important;
            width: calc(100% - 20px);
            height: calc(40% - 10px);
            min-height: 95px;
            border: 1px #484848 solid;
            border-radius: 5px;
            background: white;
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-color: mediumblue;
            transform: scale(1);
            transform-origin: top left;*/
            /*width: 90%;*/
        }

        .cntl-condGroup {
            margin-top: 5px !important;
            margin-left: 10px !important;
            width: calc(100% - 20px);
            height: calc(60% - 10px);
            min-height: 110px;
            border: 1px #484848 solid;
            border-radius: 5px;
            background: white;
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-color: mediumblue;
            transform: scale(1);
            transform-origin: top left;*/
            /*width: 90%;*/
        }

        .ctrl-logic {
            margin-top: 5px !important;
            margin-left: 5px !important;
            width: calc(100% - 20px);
            height: calc(100% - 10px);
        }

            .ctrl-logic .endBracketfield {
                float: left;
                width: 20%;
            }

                .ctrl-logic .endBracketfield select {
                    width: calc(100% - 5px);
                    height: calc(100% - 5px);
                    font-size: 10px !important;
                    background-color: lightgray;
                }

            .ctrl-logic .formfield {
                float: left;
                width: 25%;
            }

                .ctrl-logic .formfield select {
                    width: calc(100% - 5px);
                    height: calc(100% - 5px);
                    font-size: 10px !important;
                    background-color: lightcyan;
                }

            .ctrl-logic .comparefield {
                float: left;
                width: 15%;
            }

                .ctrl-logic .comparefield select {
                    width: calc(100% - 5px);
                    height: calc(100% - 5px);
                    font-size: 10px !important;
                    background-color: lightcyan;
                }

            .ctrl-logic .fielddetail {
                float: left;
                width: 20%;
            }

                .ctrl-logic .fielddetail select {
                    width: calc(100% - 5px);
                    height: calc(100% - 5px);
                    font-size: 10px !important;
                    background-color: lightcyan;
                }

            .ctrl-logic .startBracketfield {
                float: left;
                width: 20%;
            }

                .ctrl-logic .startBracketfield select {
                    width: calc(100% - 5px);
                    height: calc(100% - 5px);
                    font-size: 10px !important;
                    background-color: lightcyan;
                }

        /* New Form */
        span.newformmsg {
            position: absolute;
            right: 35px;
            color: rgba(197, 255, 162, 1.0);
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            padding-top: 5px;
        }

            span.newformmsg:hover,
            span.newformmsg:focus {
                color: rgba(66, 255, 110, 1.0);
                text-decoration: none;
                cursor: pointer;
            }

        span.newformaction {
            position: absolute;
            right: 35px;
            color: rgba(206, 214, 219, 1.0);
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            padding-top: 7px;
        }

            span.newformaction:hover,
            span.newformaction:focus {
                color: rgba(60, 210, 248, 1.0);
                text-decoration: none;
                cursor: pointer;
            }

        div:focus {
            outline: -webkit-focus-ring-color auto 0px;
        }

        div .ctrl-cbrImgUploadLbl {
            /*margin-left: 10px !important;
            font-size: x-large;
            position: absolute;
            bottom: 0;
            font-family: Arial;
            color: #696969;*/
			
			margin-left: 10px !important;
			font-size: x-large;
			position: absolute;
			/* bottom: 0; */
			font-family: Arial;
			color: #696969;
			margin-top: 15px;
        }

        div .cbrImgUploadIptImgDisp {
            height: 30px !important;
				/* height: 7vh; */
				/* width: 14vh; */
				margin-right: 5px !important;
				margin-top: 10px;
        }

        @media only screen and (min-width: 600px) {
			div .cbrImgUploadIptImgDisp { width: 175px; }
		}
		@media only screen and (max-width: 599px) {
			/*iPhone 6,7,8 Plus, Nexus, Google Pixel, Samsung Note, One PLus*/
			div .cbrImgUploadIptImgDisp { width: 150px }
		}
		@media only screen and (max-width: 390px) {
			/*iPhone 6,7,8, 8, XiaoMi A1*/
			div .cbrImgUploadIptImgDisp { width: 135px }
		}
		@media only screen and (max-width: 359px) {
			/*iPhone 5*/
			div .cbrImgUploadIptImgDisp { width: 100px }
		}	

        div .ctl-compbanner {
            border-bottom: 2px #315D8E solid;
            display: block;
            /*overflow: auto;*/
            position: relative;
			height: 45px;
        }

        div .ctl-uplImg {
            text-align: center;
        }                

        div.resloginWOResp, div.adminWOResp, div.approverWOResp, div.reviewerWOResp, div.verifierWOResp {
            margin-top: 5px;
            width: 210mm;
            margin: 0mm;
            padding: 0px 0px 36px;
            background: rgba(234, 242, 248, 1.0);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        div.taggroupWOResp {
            margin-top: 5px;
            /*width: 210mm;*/
            margin: 0mm;
            padding: 0px 0px 36px;
            background: rgba(234, 242, 248, 1.0);
            /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/
            float: right;
        }

        div.submitterWOResp {
            margin-top: 5px;
            width: 210mm;
            margin: 0mm;
            padding: 0px 0px 36px;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        div.accessdeniedWOResp {
            background-color: transparent;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0px rgba(0, 0, 0, 0);
        }

        /*div.saverespWOResp {
            margin-top: 5px;
            width: 99%;
            margin: 0;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            position: fixed;
            bottom: 0;
        }*/


        div#approver .txtareaApprComment, div#reviewer .txtareaRevrComment, div#verifier .txtareaVefyComment {
            min-height: 100px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        

        div.resloginWResp, div.adminWResp, div.approverWResp, div.reviewerWResp, div.verifierWResp {
            margin-top: 5px;
            margin: 0mm;
            padding: 0px 0px 36px;
            background: rgba(234, 242, 248, 1.0);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        div.taggroupWResp {
            margin-top: 5px;
            margin: 0mm;
            padding: 0px 0px 36px;
            background: rgba(234, 242, 248, 1.0);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        div.submitterWResp {
            margin-top: 5px;
            margin: 0mm;
            padding: 0px 0px 36px;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        div.accessdeniedWResp {
            background-color: transparent;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0px rgba(0, 0, 0, 0);
        }

        /*div.saverespWResp {
            margin-top: 5px;
            margin: 0;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            position: relative;
            bottom: 0;
        }*/

        div .droppedwellWOResp {
            /*margin-top: 10px;*/
            margin-top: 2px;
            padding: 16px 0px 0px 17px;
            /*width: calc(100% - 17px);*/
        }

        div .droppedwellChildWOResp {
            /*margin-top: 10px;*/
            margin-top: 2px;
            padding: 8px 0px 0px 17px;
            /*width: calc(100% - 17px);*/
            font-size: 16px;
        }

            div .droppedwellChildWOResp > * {
                font-size: 16px;
            }

        div .droppedwellSignatureWOResp {
            margin-top: 2px;
            padding: 16px 0px 0px 17px;
            width: calc(50% - 17px);
        }

        div .droppedwellChildSignatureWOResp {
            margin-top: 2px;
            padding: 8px 0px 0px 17px;
            width: calc(50% - 17px);
        }

        div .droppedwellWResp {
            /*margin-top: 10px;*/
            margin-top: 2px;
            padding: 16px 0px 0px 17px;
            width: calc(100% - 17px);
        }

        div .droppedwellChildWResp {
            /*margin-top: 10px;*/
            margin-top: 2px;
            padding: 0px 0px 0px 17px;
            width: calc(100% - 17px);
            font-size: 16px;
        }

            div .droppedwellChildWResp > * {
                font-size: 16px;
            }

        div .droppedwellSignatureWResp {
            margin-top: 2px;
            padding: 16px 0px 0px 17px;
            width: calc(100% - 17px);
        }

        div .droppedwellChildSignatureWResp {
            margin-top: 2px;
            padding: 8px 0px 0px 17px;
            width: calc(100% - 17px);
        }

        div.divImgHidden {
            display: none !important;
        }

        div .camera {
            margin: auto;
            /*border: 1px solid green;*/
            text-align: center;
            /*margin-bottom: 50px;*/
        }

        /*div .camera:after {
		  background: white;
		}*/


        /*div .ctl-compbanner:after {
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: bottom;
            }*/
        .label, .badge {
            color: black;
            font-weight: normal;
        }

        textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
            background-color: #fff;
            border: 1px solid #ccc;
            -webkit-box-shadow: inset 0 0px 0px rgba(255,0,0,1);
            -moz-box-shadow: inset 0 0px 0px rgba(255,0,0,1);
            box-shadow: inset 0 0px 0px rgba(255,0,0,1);
            -webkit-transition: border linear .2s,box-shadow linear .2s;
            -moz-transition: border linear .2s,box-shadow linear .2s;
            -o-transition: border linear .2s,box-shadow linear .2s;
            transition: border linear .2s,box-shadow linear .2s;
            min-height: 25px;
            -webkit-appearance: none;
        }

        input[type="radio"], input[type="checkbox"] {
            margin: 0;
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        select {
            min-height: 25px;
        }

        select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
            display: inline-block;
            height: 20px;
            padding: 0 0 0 5px;
            margin-bottom: 0px;
            font-size: 14px;
            line-height: 20px;
            color: #555;
            vertical-align: middle;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            font-size: 16px !important;
            background: transparent;
        }

            textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
                border-color: rgba(0,0,0,1);
                outline: 0;
                outline: thin dotted \9;
                -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0), 0 0 0px rgba(0,0,0,0);
                -moz-box-shadow: inset 0 0px 0px rgba(0,0,0,0), 0 0 0px rgba(0,0,0,0);
                box-shadow: inset 0 0px 0px rgba(0,0,0,0), 0 0 0px rgba(0,0,0,0);
            }

            select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
                border-color: rgba(0,0,0,1);
                outline: thin dotted #333;
                outline: 0px auto -webkit-focus-ring-color;
                outline-offset: -2px;
            }

        input[type="text"], input[type="number"], input[type="password"], input[type="search"] {
            margin-left: 10px !important;
            width: calc(100% - 50px);
            height: calc(100% - 45px);
        }

        input[type="date"] {
            margin-left: 10px !important;
            width: calc(100% - 50px);
            height: calc(100% - 45px);
        }

        input[type="button"] {
            margin-top: 5px !important;
            margin-left: 10px !important;
            margin-bottom: 5px !important;
        }

            input[type="button"].btnAddCond {
                padding: 1px 6px;
                font-size: 16px;
            }


        /*input[type="image"].uplImgUploadIptImg {
            cursor: pointer;
            margin-top: 10px !important;
            margin-left: 10px !important;
            width: calc(100% - 25px) !important;
            height: calc(100% - 45px) !important;
        }*/

        /*input[type="image"].usrgrpImg {
            cursor: pointer;
            margin-top: 10px !important;
            margin-left: 10px !important;
            width: calc(100% - 25px) !important;
            height: calc(100% - 45px) !important;
        }*/

        textarea {
            margin-left: 10px !important;
            width: calc(100% - 50px);
            height: calc(100% - 45px);
            resize: none;
        }

        select {
            margin-left: 10px !important;
            width: calc(100% - 30px);
            height: calc(100% - 45px);
        }

        /*.ui-select span {
            display: none;
        }*/

        hr {
            margin-left: 10px !important;
            width: calc(100% - 15px);
            margin: 5px 0;
        }

        canvas {
            margin-left: 10px !important;
            /*width: calc(100% - 35px);*/
            height: calc(100% - 45px);
            margin: 0;
            display: inline-block;
        }

            canvas.sgnCan {
                display: block;
            }

        input.sgnBtnEnable {
            margin-top: 0px !important;
            margin-left: 10px !important;
            margin-bottom: 0px !important;
            margin-right: 25px !important;
        }

        video {
            /*width: calc(100% - 1px);	*/
            margin: 0 0 0 -17px;
        }

        canvas.canvidcamera {
            display: block;
            width: auto;
            height: auto;
        }

        img.imgvidcamera {
            display: block;
            /*width: 100%;
            height: 100%;*/
            margin-left: 10px !important;
            /*float: right;
			margin-right: 35px !important;*/
        }     

        input[type="image"].btnoncamera {
            margin-left: 10px !important;
            float: left;
            width: 4%;
            margin-right: 10px !important;
        }

        input[type="image"].btntagsetup {
            margin-left: 5px !important;
            width: 4%;
            opacity: 0.3;
        }

        @media only screen and (max-width: 599px) {

            input[type="image"].btnoncamera {
                margin-top: 5px !important;
                width: 8%;
            }

            input[type="image"].btntagsetup {
                margin-top: 0px !important;
                width: 4%;
            }
        }

        input[type="button"].btnclickcamera {
            background: white;
            color: black;
            line-height: 1.2;
            -webkit-border-radius: 30px;
            border-radius: 30px;
            display: inline-block;
            width: 45px;
            height: 45px;
            font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            padding: 0px 6px 1px 6px;
            border: 2px solid darkgray;
            display: none;
        }

        input[type="button"].btnclosecamera {
            background: white;
            color: black;
            line-height: 1.2;
            display: inline-block;
            width: 45px;
            height: 45px;
            font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            padding: 0px 6px 1px 6px;
            border: 0px solid white;
            webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0);
            -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0);
            float: right;
            display: none;
        }

        /* Style the Image Used to Trigger the Modal */
        .imgvidcamera {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

            .imgvidcamera:hover {
                opacity: 0.7;
            }

        /* The Modal (background) */
        .cameramodal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 999; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
        }

        /* Modal Content (Image) */
        .cameramodalcontent {
            margin: auto;
            display: block;
            width: 70%;
            max-width: 600px;
        }

        /* Caption of Modal Image (Image Text) - Same Width as the Image */
        .cameramodalcaption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        /* Add Animation - Zoom in the Modal */
        .cameramodalmodalcontent, .cameramodalcaption {
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @keyframes zoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }


        /* The Close Button */
        .cameramodalclose {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

            .cameramodalclose:hover,
            .cameramodalclose:focus {
                color: #bbb;
                text-decoration: none;
                cursor: pointer;
            }

        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px) {
            .cameramodalmodalcontent {
                width: 100%;
            }
        }
		
		/* ## Modal DIALOG CONTENT */		
		/* The Modal (background) */
		.divmodalDialog {
			display: none; /* Hidden by default */
			position: fixed; /* Stay in place */
			z-index: 999; /* Sit on top */
			padding-top: 80px; /* Location of the box */
			left: 0;
			top: 0;
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			overflow: auto; /* Enable scroll if needed */
			background-color: rgb(0,0,0); /* Fallback color */
			background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
		}				

		/* Caption of Modal DIALOG */
        div.modalDialogCaption {
			margin: auto;
			display: block;
			width: 100%;
			max-width: 700px;
			text-align: center;
			color: #FF6600;
			padding: 0px 0px 0px 0px;
			height: 30px;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			font-size: 20px;
			font-weight: bold;
        }
		
		
		@media only screen and (min-width: 768px) {
			
			/* Modal Content (Properties) */
			div.modalDialogContent {
				margin: auto;
				display: block;
				/*width: 80%;
				max-width: 600px;*/
				width: 85%;
				max-width: 500px;
				height: 80%;
				max-height: 500px;
			}		
		
			div.modalDialogContentWrapper {
				border: 2px solid white;
				padding-top: 20px;
				padding-bottom: 10px;
				margin-left: 100px;
				margin-right: 100px;
				background: white;
				/*overflow-y: scroll;*/
			}
			
			div.modalDialogContainer {
				padding: 20px 20px;
			}
		}
		@media only screen and (max-width: 767px) {
			
			/* Modal Content (Properties) */
			div.modalDialogContent {
				margin: auto;
				display: block;
				/*width: 80%;
				max-width: 600px;*/
				width: 85%;
				max-width: 400px;
				height: 80%;
				max-height: 450px;
			}		
			
			div.modalDialogContentWrapper {
				border: 2px solid white;
				padding-top: 20px;
				padding-bottom: 10px;
				margin-left: 70px;
				margin-right: 70px;
				background: white;
				max-height: 500px;
				/*overflow-y: scroll;*/
			}
			
			div.modalDialogContainer {
				padding: 20px 20px;
			}
		}
		@media only screen and (max-width: 599px) {
		
			/* Modal Content (Properties) */
			div.modalDialogContent {
				margin: auto;
				display: block;
				/*width: 80%;
				max-width: 600px;*/
				width: 85%;
				max-width: 400px;
				height: 80%;
				max-height: 450px;
			}		
		
			div.modalDialogContentWrapper {
				border: 2px solid white;
				padding-top: 20px;
				padding-bottom: 10px;
				margin-left: 20px;
				margin-right: 20px;
				background: white;
				max-height: 500px;
				/*overflow-y: scroll;*/
			}
			
			div.modalDialogContainer {
				padding: 10px 10px;
			}
		}
		
		@media only screen and (max-width: 390px) {
		
			/* Modal Content (Properties) */
			div.modalDialogContent {
				margin: auto;
				display: block;
				/*width: 80%;
				max-width: 600px;*/
				width: 85%;
				max-width: 300px;
				height: 70%;
				max-height: 300px;
			}		
		
			div.modalDialogContentWrapper {
				border: 2px solid white;
				padding-top: 20px;
				padding-bottom: 10px;
				margin-left: 20px;
				margin-right: 20px;
				background: white;
				max-height: 400px;
				/*overflow-y: scroll;*/
			}
			
			div.modalDialogContainer {
				padding: 10px 10px;
			}
		}
		
		div.modalDialogContainer input[type="text"],div.modalDialogContainer input[type="number"],div.modalDialogContainer textarea,div.modalDialogContainer select {
			margin-left: 0px !important;
			width: calc(100%);
		}
						
		div.modalDialogContainer .modalDialogGroup {
			margin-bottom: 15px;
			text-align: center;
		}
		
		div.modalDialogContainer .modalDialogBtnGroup {
			text-align: center;
		}
				
		div.modalDialogContainer .alert {
		  display: none;
		  padding: 10px;
		  margin-bottom: 0px;
		  border: 1px solid transparent;
		  border-radius: 4px;
		}
		
		div.modalDialogContainer .alert-danger {
			background-color: #f2dede;
			border-color: #ebccd1;
			color: #a94442;
		}
		
		div.modalDialogContainer div.error {  
		  clear: left;
		  margin-left: 0px;
		  color: red;
		  font:  400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
		}	
		
		div.modalDialogContainer input[type="button"] {
			margin-left: 0px !important;
		}
		
		/* ## Modal DIALOG CONTENT */
		
		/* ## Modal TNC CONTENT */		
		/* The Modal (background) */
		.divmodalTNC {
			display: none; /* Hidden by default */
			position: fixed; /* Stay in place */
			z-index: 999; /* Sit on top */
			padding-top: 30px; /* Location of the box */
			left: 0;
			top: 0;
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			overflow: auto; /* Enable scroll if needed */
			background-color: rgb(0,0,0); /* Fallback color */
			background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
		}				

		/* Caption of Modal DIALOG */
        div.modalTNCCaption {
			margin: auto;
			display: block;
			width: 100%;
			max-width: 700px;
			text-align: center;
			color: #FF6600;
			padding: 0px 0px 0px 0px;
			height: 30px;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			font-size: 20px;
			font-weight: bold;
        }
		
		
		@media only screen and (min-width: 768px) {					
		
			div.modalTNCContentWrapper {
				border: 2px solid white;
				padding-top: 20px;
				padding-bottom: 10px;
				margin-left: 100px;
				margin-right: 100px;
				background: white;
				/*overflow-y: scroll;*/
			}
			
			/* Modal Content (Properties) */
			div.modalTNCContent {
				margin: auto;
				display: block;
				/*width: 80%;
				max-width: 600px;*/
				width: 85%;
				max-width: 500px;
				height: 100%
				/*max-height: 500px;*/
			}	
			
			div.modalTNCContainer {
				padding: 20px 20px;
			}
		}
		@media only screen and (max-width: 767px) {
			
			div.modalTNCContentWrapper {
				border: 2px solid white;
				padding-top: 20px;
				padding-bottom: 10px;
				margin-left: 70px;
				margin-right: 70px;
				background: white;
				/*overflow-y: scroll;*/
				/*max-height: 500px;*/
			}
			
			/* Modal Content (Properties) */
			div.modalTNCContent {
				margin: auto;
				display: block;
				/*width: 80%;
				max-width: 600px;*/
				width: 85%;
				max-width: 400px;
				height: 100%;
				/*max-height: 450px;*/
			}		
			
			
			
			div.modalTNCContainer {
				padding: 20px 20px;
			}
		}
		@media only screen and (max-width: 599px) {
		
			div.modalTNCContentWrapper {
				border: 2px solid white;
				padding-top: 20px;
				padding-bottom: 10px;
				margin-left: 20px;
				margin-right: 20px;
				background: white;
				/*overflow-y: scroll;*/
				/*max-height: 500px;*/
			}
			
			/* Modal Content (Properties) */
			div.modalTNCContent {
				margin: auto;
				display: block;
				/*width: 80%;
				max-width: 600px;*/
				width: 85%;
				max-width: 400px;
				height: 100%;
				/*max-height: 450px;*/
			}		
		
			
			div.modalTNCContainer {
				padding: 10px 10px;
			}
		}
		
		@media only screen and (max-width: 390px) {
		
			div.modalTNCContentWrapper {
				border: 2px solid white;
				padding-top: 20px;
				padding-bottom: 10px;
				margin-left: 20px;
				margin-right: 20px;
				background: white;
				/*overflow-y: scroll;*/
				/*max-height: 400px;*/
			}
			
			/* Modal Content (Properties) */
			div.modalTNCContent {
				margin: auto;
				display: block;
				/*width: 80%;
				max-width: 600px;*/
				width: 85%;
				max-width: 300px;				
				height: 100%;
				/*max-height: 300px;*/
			}		
		
			
			div.modalTNCContainer {
				padding: 10px 10px;
			}
		}
		
		div.modalTNCContainer input[type="text"],div.modalTNCContainer input[type="number"],div.modalTNCContainer textarea,div.modalTNCContainer select {
			margin-left: 0px !important;
			width: calc(100%);
		}
						
		div.modalTNCContainer .modalTNCGroup {
			margin-bottom: 15px;
		}
		
		div.modalTNCContainer .modalTNCBtnGroup {
			margin-bottom: 25px;
			text-align: center;			
		}
				
		div.modalTNCContainer .alert {
		  display: none;
		  padding: 10px;
		  margin-bottom: 0px;
		  border: 1px solid transparent;
		  border-radius: 4px;
		}
		
		div.modalTNCContainer .alert-danger {
			background-color: #f2dede;
			border-color: #ebccd1;
			color: #a94442;
		}
		
		div.modalTNCContainer div.error {  
		  clear: left;
		  margin-left: 0px;
		  color: red;
		  font:  400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
		}	
		
		div.modalTNCContainer input[type="button"] {
			margin-left: 0px !important;
		}
		
		/* ## Modal TNC CONTENT */
		

        /* The Modal (background) */
        .modal_TAG0001, .modal_TAG0002, .modal_TAG0003 {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 999; /* Sit on top */
            padding-top: 80px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
        }

        .wrapper_TAG0001, .wrapper_TAG0002, .wrapper_TAG0003 {
            border: 2px solid white;
            padding-top: 40px;
            padding-bottom: 40px;
            margin-left: 20px;
            margin-right: 20px;
            background: white;
        }

        /* Modal Content (Properties) */
        .modal-content_TAG0001, .modal-content_TAG0002, .modal-content_TAG0003 {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 600px;
        }

        /* Modal Footer (Properties) */
        .modal-footer_TAG0001, .modal-footer_TAG0002, .modal-footer_TAG0003 {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 600px;
        }

        table {
            margin-left: 10px !important;
            width: calc(100% - 43px) !important;
        }

            table thead th {
                background: whitesmoke;
                font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            }
						
            table tbody td {
				height: 40px;
                background: white;
                /*font: 400 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;*/
				color: #315D8E !important; 
				font-size: 18pt; 
				font-weight: normal;
            }
			
		.table tbody tr.blue {
			border: 2px solid #315D8E;
		}
		
		.table th, .table td {
			border-top: 1px solid #FFF;
		}		

        input[type="button"].rowDelete {            
            line-height: 1.2;
            -webkit-border-radius: 30px;
            border-radius: 30px;
            display: inline-block;
            width: 25px;
            height: 25px;
            font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            padding: 0px 6px 1px 6px;
        }

        @page {
            size: A4;
            margin: 0;
        }

        @media print {
            html, body {
                width: 210mm;
                height: 297mm;
            }

            /*body * {
                    visibility: hidden;
                }*/

            #section-to-print, #section-to-print * {
                visibility: visible;
            }

            #section-to-print {
                position: absolute;
                left: 0;
                top: 0;
            }

            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }
		
		html {		
			/*background-image: url("../../forms/img/slider2_mini.jpg");*/

			/* Center and scale the image nicely */
			background-position: top;
			background-attachment: fixed;
			visibility: visible;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
		body {
			opacity: 0.95;
			visibility: visible
		}

        .A4SizeWResp {
            /*height: 371mm;*/
            width: 210mm;
            /*padding: 5mm;*/
            /*margin: 10mm auto;*/
            margin: 0mm;
            border: 1px #D3D3D3 solid;
            border-radius: 0px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            /*border-color: mediumblue;*/
            left: 50%; /* with this setting, floating Div won't work*/
            -webkit-transform: translate(-50%, 0); /* with this setting, floating Div won't work*/
            opacity: 1;
            position: absolute;
            /*left: 25%;*/
        }


        .A4SizeWOResp {
            /*height: 371mm;*/
            width: 210mm;
            /*padding: 5mm;*/
            /*margin: 10mm auto;*/
            margin: 0mm;
            border: 1px #D3D3D3 solid;
            border-radius: 0px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            /*border-color: mediumblue;*/
            left: 50%; /* with this setting, floating Div won't work*/
            -webkit-transform: translate(-50%, 0); /* with this setting, floating Div won't work*/
            position: absolute;
            /*left: 25%;*/
        }

        .A4SizeWRespWResponseDiv {
            margin-bottom: 74mm;
        }

        div.droppableDisp {
            min-height: 297mm;
            /*border: 1px green solid;*/
            position: relative
        }

        div.droppableDispWResp {
            min-height: 297mm;
            /*border: 1px green solid;*/
            position: relative
        }

        div.resdroppableDispWResp {
            min-height: 77mm;
            border: 1px lightblue solid;
            /*position: fixed;  This setting is for floating Div to work, but mobile safari had problem with floating Div*/
            position: relative;
            bottom: 0;
            left: 0;
            width: 99%;
            background: rgba(234, 242, 248, 1.0);
        }

        div.resdroppableDispWOResp {
            min-height: 77mm;
            border: 1px lightblue solid;
            /*position: fixed;*/
            position: relative;
            /*bottom: 0;*/
            /*left: 25%;*/
            width: 210mm;
            background: rgba(234, 242, 248, 1.0);
        }

        @media (max-width: 767px) {
            div#droppable {
                background-attachment: scroll;
            }
        }

        .ui-wrapper {
            padding: 0px !important;
            margin: 0px !important;
        }

        .ui-resizable-handle {
            position: absolute !important;
            font-size: 0.1px !important;
            display: block !important;
            /*margin: 15px 5px !important;*/
            margin-right: 10px;
        }

        .ui-resizable-handle-none {
            display: none !important;
        }

        .htmlcanvas {
            width: 225mm;
            min-height: 307mm;
            overflow: scroll;
        }

        .resloginfail_msg {
            width: 99.5%;
            height: 55px;
            border: 1px solid red;
            border-radius: 5px;
            background-color: rgba(235, 203, 217, 0.7);
            display: none;
            position: absolute;
            top: 0px;
            font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            color: red;
            z-index: 999;
            vertical-align: middle;
            text-align: center;
        }

            .resloginfail_msg p {
                display: block;
                -webkit-margin-before: 1em;
                -webkit-margin-after: 1em;
                -webkit-margin-start: 0px;
                -webkit-margin-end: 0px;
            }

        .success_msg, .update_msg {
            width: 99.5%;
            height: 55px;
            border: 1px solid green;
            border-radius: 5px;
            background-color: rgba(213, 255, 187, 0.7);
            display: none;
            position: absolute;
            top: 0px;
            font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            color: darkgreen;
            z-index: 999;
            vertical-align: middle;
            text-align: center;
        }

            .success_msg p, .update_msg p {
                display: inline-block;
                -webkit-margin-before: 1em;
                -webkit-margin-after: 1em;
                -webkit-margin-start: 0px;
                -webkit-margin-end: 0px;
            }

        .input-error {
            background: #ff9;
            border: 1px solid red;
        }

        div.error {
            clear: left;
            margin-left: 10px;
            color: red;
            font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
        }

        .ddcommon {
            margin-left: 10px !important;
        } 
		
		/* small screen*/
		@media (max-width: 767px) {
			.tbl-col-xs-hideColumn {
				display: none !important;
			}
			
			.tbl-col-xs-showColumn {
				display: initial !important;
			}
		}
		
		/* big screen*/
		@media (min-width: 768px) {
			.tbl-col-sm-hideColumn {
				display: none !important;
			}
			
			.tbl-col-sm-showColumn {
				display: initial !important;
			}
		}
		
		#search_DIV_TAG_0001, #search_DIV_TAG_0002, #search_DIV_TAG_0003 {
			margin-top: 5px;
		}
		
		#search_label_TAG_0001, #search_label_TAG_0002, #search_label_TAG_0003 {
			float: left;
			width: auto;
			clear: both;
		}
		
		/*
		.search {
		  z-index: 9990;
		  /*position: fixed;
		  top: 10px;*/
		  left: calc(24.5%);
		  /*left: calc(25% + 3px);*/
		  /*right: 0px;*/
		  width: 72%;

		  input[type="search"] {
			width: calc(100% - 20px);
			border: 1px solid #4189c7;
			background-color: white;
			padding: 0px;
			font-size: 16px;
			transition: width 0.2s;
			-webkit-appearance: none;
			height: 30px;
			margin-left: 25px;
		  }

		  .fix-search & {
			position: fixed;
			top: 10px;

			input {
			  width: 250px;
			}
		  }
		}*/
		
		span.whitespace {
		  white-space: pre;
		}
		
		span.wordbreak,td.wordbreak {
		  word-break: break-all;
		}
		
		td.clickable {
			color: #08c;
			text-decoration: none;
		}
		
		td.clickable:hover, td.clickable:focus {
			color: #005580;
			/*text-decoration: underline;*/
		}
		td.clickable:focus {
			outline: thin dotted #333;
			outline: 5px auto -webkit-focus-ring-color;
			outline-offset: -2px;
		}

/* //## Banner Label CSS ##// */		
@media only screen and (min-width: 600px) {
	#H1_CBR_CTRL_DIV_1001 { float:left;font: 400 32px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; }
}
@media only screen and (max-width: 599px) {
	/* Samsung Galaxy Tab A6*/
	#H1_CBR_CTRL_DIV_1001 { float:left;font: 400 22px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; }
}
@media only screen and (max-width: 499px) {
	/*iPhone 6,7,8 Plus, Nexus, Google Pixel, Samsung Note, One PLus*/
	#H1_CBR_CTRL_DIV_1001 { float:left;font: 400 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; }
}
@media only screen and (max-width: 390px) {
	/*screen iPhone 6,7,8, 8, XiaoMi A1*/
	#H1_CBR_CTRL_DIV_1001 { float:left;font: 400 18px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; }
}
@media only screen and (max-width: 340px) {
	/*iPhone 5*/
	#H1_CBR_CTRL_DIV_1001 { float:left;font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; }
}			

.CTRL_DIV_1001_style {position: absolute; width: 792px; height: 59px; left: 0px; top: 0px;}
.CTRL_DIV_1002_style {position: absolute; width: 792px; height: 259px; left: 0px; top: 140px;}
.CTRL_DIV_1003_style {position: absolute; width: 792px; height: 79px; left: 0px; top: 60px;}
.CTRL_DIV_1004_style {position: absolute; width: 792px; height: 79px; left: 0px; top: 60px;}