@font-face {
   font-family: Kanit;
   src: url(../fonts/Kanit/Kanit-Light.ttf);
}

/* body { */
	/* font-family : Kanit; */
/* } */

/*---------- Link tab ----------*/
.linktab_content_container {
    padding: 10px;
    width: 100%;
}
.linktab_content {
    display: none;
}

/*---------- for datatables ----------*/
table.dataTable tbody tr.selected {
    background-color: #B0BED9;
}

.position_relative {
	position: relative;
}

/*---------- Size ----------*/
.full_height {
    height: 100%;
    min-height: 100%;
}
.full_width {
    width: 100%;
}
.width_zero {
	width: 0;
}
.width80percent {
    width: 80%;
}
.width_60percent {
    width: 60%;
}
.width_99pc {
    width: 99%;
}

.width_40px {
    width: 40px;
}
.width_60px {
    width: 60px;
}
.width_100px {
    width: 100px;
}
.width_200px {
    width: 200px;
}

.h_20px {
	height: 20px;
}
.h_200px {
	height: 200px;
}
.height_1004px {
	height: 1004px;
}
.height_50pc {
	height: 50%;
}

.min_width_720px {
	min-width: 720px;
}
.min_width_1080px {
	min-width: 1080px;
}
.min_width_1200px {
	min-width: 1200px;
}
.min_width_1440px {
	min-width: 1440px;
}
.min_width_1800px {
	min-width: 1800px;
}
.width_50percent {
	width: 50%;
}
.width_33percent {
	width: 33%;
}
.width_25percent {
	width: 25%;
}
.width_20percent {
	width: 20%;
}

.box_shadow {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 4px #888888;
}


/*---------- Utilities ----------*/
.bg_blue {
	background-color: #5dade2;
}
.bg_orange {
	background-color: #f5cba7;
}
.bg_green {
	background-color: #abebc6;
}
.bg_white {
	background-color: white;
}

/* Display */
.inline {
    display: inline-block;
}

/* Position */
.to_top {
    margin-top: -2px;
}
.margin_auto {
    margin: auto;
}

/* Alignment */
.valign_top {
	vertical-align: top;
}
.valign_middle {
	vertical-align: middle;
}

/* Color */
.bg_wh_smoke {
    background-color: #eaeded;
}
.bg_yellow {
    background-color: #f39c12;
}

/* Text */
.underline {
    text-decoration: underline;
}
.text_center {
	text-align: center;
}

/* Space */
.padding_zero {
    padding: 0;
}
.space_all {
    padding: 6px;
}
.space_all_4px {
    padding: 4px;
}
.space_all_6px {
    padding: 6px;
}
.space_all_10px {
    padding: 10px;
}
.space_all_20px {
    padding: 20px;
}
.space_all_40px {
    padding: 40px;
}

.space_top_4px {
    padding-top: 4px;
}
.space_top_7px {
    padding-top: 7px;
}
.space_top_10px {
    padding-top: 10px;
}
.space_top_20px {
    padding-top: 20px;
}

.space_left {
    padding-left: 20px;
}
.space_left_2px {
    padding-left: 2px;
}
.space_left_10px {
    padding-left: 10px;
}
.space_left_14px {
    padding-left: 14px;
}
.space_left_16px {
    padding-left: 16px;
}
.space_left_20px {
    padding-left: 20px;
}
.space_left_40px {
    padding-left: 40px;
}

.space_right {
    padding-right: 20px;
}
.space_right_4px {
    padding-right: 4px;
}
.space_right_6px {
    padding-right: 6px;
}
.space_right_10px {
    padding-right: 10px;
}
.space_right_20px {
    padding-right: 20px;
}
.space_right_60px {
    padding-right: 60px;
}

.space_left_right_6px {
    padding-left: 6px;
    padding-right: 6px;
}
.space_left_right_10px {
    padding-left: 10px;
    padding-right: 10px;
}
.space_left_right_20px {
    padding-left: 20px;
    padding-right: 20px;
}
.space_left_right_40px {
    padding-left: 40px;
    padding-right: 40px;
}
.space_left_right_100px {
    padding-left: 100px;
    padding-right: 100px;
}

.space_top_bottom_2px {
    padding-top: 2px;
    padding-bottom: 2px;
}
.space_top_bottom_6px {
    padding-top: 6px;
    padding-bottom: 6px;
}
.space_top_bottom_20px {
    padding-top: 20px;
    padding-bottom: 20px;
}

.space_bottom_4px {
    padding-bottom: 4px;
}
.space_bottom_6px {
    padding-bottom: 6px;
}
.space_bottom_10px {
    padding-bottom: 10px;
}
.space_bottom_14px {
    padding-bottom: 14px;
}
.space_bottom_20px {
    padding-bottom: 20px;
}
.space_bottom_60px {
    padding-bottom: 60px;
}

.space_top_2 {
    padding-top: 30px;
}
.space_top_3 {
    padding-top: 40px;
}


.padding_4px {
	padding: 4px;
}
.padding_all_20px {
	padding: 20px;
}

.padding_top_zero {
	padding-top: 0;
}
.padding_top_10px {
	padding-top: 10px;
}

.padding_top_bottom_10px {
	padding-top: 10px;
	padding-bottom: 10px;
}

.padding_right_6px {
    padding-right: 6px;
}
.padding_right_26px {
	padding-right: 26px;
}
.padding_right_30px {
	padding-right: 30px;
}

.padding_left_6px {
    padding-left: 6px;
}

.padding_bottom_10px {
	padding-bottom: 10px;
}


.margin_zero {
    margin: 0;
}

.margin_top_6px {
    margin-top: 6px;
}
.margin_top_7px {
    margin-top: 7px;
}
.margin_top_10px {
    margin-top: 10px;
}
.margin_top_14px {
    margin-top: 14px;
}
.margin_top_40px {
  margin-top: 40px;
}
.margin_top_20px {
    margin-top: 20px;
}
.margin_top_100px {
    margin-top: 100px;
}

.margin_bottom_4px {
	margin-bottom: 4px;
}
.margin_bottom_14px {
	margin-bottom: 14px;
}
.margin_bottom_40px {
	margin-bottom: 40px;
}
.margin_bottom_60px {
	margin-bottom: 60px;
}

.margin_top_bottom_20px {
	margin-top: 20px;
	margin-bottom: 20px;
}

.margin_right_6px {
    margin-right:6px;
}
.margin_right_10px {
    margin-right:10px;
}
.margin_right_20px {
    margin-right:20px;
}

.margin_left_6px {
    margin-left:6px;
}
.margin_left_20px {
    margin-left:20px;
}


/* Border */
.gray_border {
    border:1px solid gray;
    border-radius: 6px;
}
.gray_border_right_4px {
    border-right: 4px solid #999999;
}
.red_border {
    border:1px solid red;
}
.blue_border_2px {
    border:2px solid #154360;
}
.blue_bordernoleft_2px {
    border-top:2px solid #154360;
    border-bottom:2px solid #154360;
    border-right:2px solid #154360;
}
.blue_borderright_2px {
    border-right:2px solid #154360;
}

.black_border_r_2px {
	border-right: 1px solid black;
}
.black_border_t_2px {
	border-top: 1px solid black;
}
.black_border_l_2px {
	border-left: 1px solid black;
}
.black_border_b_2px {
	border-bottom: 1px solid black;
}
.black_border_rtb_2px {
	border-right: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

/* overflow */
.overflow_auto {
    overflow: auto;
}

/* Font */
.font_bold {
	font-weight: bold;
}
.font_size_1_1em {
	font-size: 1.1em;
}

/* text color */
.text_white {
	color: white;
}
.text_red {
	color: red;
}
.text_black {
	color: black;
}

/*---------- Report page ----------*/
.outer {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
}
.middle {
	display: table-cell;
	vertical-align: middle;
}
.inner {
	margin-left: auto;
	margin-right: auto;
}
.table-num-turning {
	position:absolute;
	width:26%;
	height:39%;
	font-size:0.8em;
}

/*===== Toggle switch  =====*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switch input {
    display:none;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}

/*----------------------------------------------------------------------------------------------*/
/*---------------------------------------- Content-Page ----------------------------------------*/
/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------*/
/*---------------------------------------- Part 1 ----------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.row1col1, .row1col2, .row2col1, .row2col2, .row3col1, .row3col2 {
	position		: absolute;
	width			: 100%;
	border			: 1px solid black;
	display			: inline-block;
	box-sizing: border-box
}
.row1col1 {
	height			: 222px;
	top				: 1px;
	/* left			: 0.4%; */
	background		: #eeeeee;
}
.row2col1 {
	height			: 312px;
	top				: 224px;
	/* left			: 0.4%; */
	background		: #eeeeee;
}
.row3col1 {
	height			: 94px;
	top				: 537px;
	/* left			: 0.4%; */
	background		: #eeeeee;
}

.row1col2 {
	height			: 492px;
	top				: 1px;
	/* left			: 0%; */
	background		: black;
}
.row2col2 {
	height			: 138px;
	top				: 492px;
	/* left			: 0%; */
	background		: #eeeeee;
}
.row3col2 {
	height			: 172px;
	top				: 459px;
	/* left			: 0%; */
	background		: #eeeeee;
	visibility		: hidden;
}

/* .multi_imgtopview, .multi_col1row1, .multi_col1row2, .multi_col1row3, .multi_col1row4, .multi_col1row5 {
	position		: absolute;
	width			: 99.4%;
	left			: 0.4%;
	border			: 1px solid black;
	display			: inline-block;
}
.multi_imgtopview {
	height			: 222px;
	top				: 2px;
	background		: #eeeeee;
}
.multi_col1row1 {
	height			: 397px;
	top				: 226px;
	background		: #eeeeee;
}
.multi_col1row2 {
	height			: 272px;
	top				: 625px;
	background		: black;
}
.multi_col1row3 {
	height			: 197px;
	top				: 899px;
	background		: #eeeeee;
}
.multi_col1row4 {
	height			: 120px;
	top				: 1098px;
	background		: #eeeeee;
}
.multi_col1row5 {
	height			: 176px;
	top				: 1220px;
	background		: #eeeeee;
} */

/*=================================================== Multi selected sites panel1 ===================================================*/
.multi_container {
	position: relative;
	display: inline-block;
}
.multi_sitename, .multi_panel0, .multi_panel1, .multi_panel2, .multi_panel3, .multi_panel4, .multi_panel5 {
	position		: absolute;
	width			: 100%;
	left			: 0;
	border			: 1px solid black;
	display			: inline-block;
}
.multi_sitename {
	height			: 24px;
	top				: 0px;
	background		: #eeeeee;
}
.multi_panel0 {
	height			: 222px;
	top				: 25px;
	background		: #eeeeee;
}
.multi_panel1 {
	height			: 312px;
	top				: 248px;
	background		: #eeeeee;
}
.multi_panel2 {
	height			: 138px;
	top				: 561px;
	background		: #eeeeee;
}
.multi_panel3 {
	height			: 260px;
	top				: 699px;
	background		: black;
}
.multi_panel4 {
	height			: 94px;
	top				: 960px;
	background		: #eeeeee;
}
.multi_panel5 {
	height			: 166px;
	top				: 1054px;
	background		: #eeeeee;
}

/*=================================================== Multi site panel1 ===================================================*/
.south-box, .north-box, .west-box, .east-box {
	position			: relative;
	width				: 158px;
	height				: 104px;
	/* border				: 1px solid; */
}
.south-box {
	top					: 255px;
	left				: 100px;
}
.north-box {
	transform			: rotate(180deg);
	top					: -204px;
	left				: 4px;
}
.west-box {
	transform			: rotate(90deg);
	top					: -81px;
	left				: -126px;
}
.east-box {
	transform			: rotate(-90deg);
	top					: -282px;
	left				: 228px;
}

.south-box-f3, .north-box-f3, .west-box-f3, .east-box-f3 {
	position			: absolute;
	width				: 158px;
	height				: 104px;
	/* border				: 1px solid; */
}
.south-box-f3{
	top					: 158px;
	left				: 51px;
}
.north-box-f3 {
	transform			: rotate(180deg);
	top					: -4px;
	left				: 51px;
}
.west-box-f3 {
	transform			: rotate(90deg);
	top					: 78px;
	left				: -17px;
}
.east-box-f3 {
	transform			: rotate(-90deg);
	top					: 78px;
	left				: 118px;
}

.arrow-straight, .arrow-left, .arrow-right {
	position	: relative;
	display		: inline-block;
}
.arrow-left {
	left		: -56px;
	top			: -90px;
}
.arrow-straight {
	left		: -53px;
	top			: -98px;
}
.arrow-right {
	left		: -50px;
	top			: -90px;
}

.box-left, .box-straight, .box-right {
	position			: relative;
	width				: 50px;
	height				: 40px;
	text-align			: center;
	border				: 1px solid;
	border-radius		: 4px;
	background-color	: #ffcccc;
	box-shadow			: 2px 2px 1px #000000;
	display				: inline-block;
}
.box-left {
	top					: -92px;
	left				: -84px;
}
.box-straight {
	top					: -92px;
	left				: -84px;
}
.box-right {
	top					: -92px;
	left				: -84px;
}

.w-text-left, .w-text-straight, .w-text-right {
	transform			: rotate(-90deg);
	top					: -92px;
}
.w-text-left {
	left				: -72px;
}
.w-text-right {
	left				: -96px;
}
.e-text-left, .e-text-straight, .e-text-right {
	transform			: rotate(90deg);
	top					: -92px;
}
.e-text-left {
	left				: -72px;
}
.e-text-right {
	left				: -96px;
}
.n-text-left, .n-text-straight, .n-text-right {
	transform			: rotate(180deg);
	/* top					: 15px; */
}
.n-text-left {
	/* left				: 10px; */
}
.n-text-right {
	/* left				: -2px; */
}

.name-box {
	background-color: #eeffff;
	border: 1px solid #959595;
	border-radius: 3px;
}
.name-text-box, .name-text-box-f3 {
	text-align			: center;
	background-color	: #eeffff;
	border				: 1px solid #959595;
	border-radius		: 3px;
}
.name-text-box {
	position			: absolute;
	width				: 260px;
}
.n-name {
	top					: -22px;
	left				: 0px;
}
.s-name {
	bottom				: -22px;
	left				: 0px;
}
.e-name {
	top					: 120px;
	right				: -142px;
}
.w-name {
	top					: 120px;
	left				: -142px;
}

.name-text-box-f3 {
	position			: absolute;
	font-size			: 0.8em;
	width				: 200px;
}
.n-name-f3 {
	top					: -16px;
	left				: 30px;
}
.s-name-f3 {
	top					: 260px;
	left				: 30px;
}
.e-name-f3 {
	top					: 121px;
	left				: 168px;
}
.w-name-f3 {
	top					: 121px;
	left				: -108px;
}

.rotateCW90deg {
	-ms-transform		: rotate(90deg); 	/* IE 9 */
    -webkit-transform	: rotate(90deg); 	/* Safari */
    transform			: rotate(90deg); 	/* Standard syntax */
}
.rotateCCW90deg {
	-ms-transform		: rotate(-90deg); 	/* IE 9 */
    -webkit-transform	: rotate(-90deg); 	/* Safari */
    transform			: rotate(-90deg); 	/* Standard syntax */
}

#uploadFile {
	width: 75%;
}

/* .south-box, .north-box, .west-box, .east-box {
	position			: relative;
	width				: 158px;
	height				: 104px;
}
.south-box {
	top					: 255px;
	left				: 100px;
}
.north-box {
	transform			: rotate(180deg);
	top					: -103px;
	left				: 100px;
}
.west-box {
	transform			: rotate(90deg);
	top					: -81px;
	left				: -13px;
}
.east-box {
	transform			: rotate(-90deg);
	top					: -185px;
	left				: 215px;
}

.south-box-f3, .north-box-f3, .west-box-f3, .east-box-f3 {
	position			: absolute;
	width				: 158px;
	height				: 104px;
}
.south-box-f3{
	top					: 158px;
	left				: 51px;
}
.north-box-f3 {
	transform			: rotate(180deg);
	top					: -4px;
	left				: 51px;
}
.west-box-f3 {
	transform			: rotate(90deg);
	top					: 78px;
	left				: -17px;
}
.east-box-f3 {
	transform			: rotate(-90deg);
	top					: 78px;
	left				: 118px;
}

.arrow-straight, .arrow-left, .arrow-right {
	position	: relative;
	display		: inline-block;
}
.arrow-left {
	left		: -20px;
	top			: -10px;
}
.arrow-straight {
	left		: -17px;
	top			: -20px;
}
.arrow-right {
	left		: -14px;
	top			: -10px;
}

.box-left, .box-straight, .box-right {
	position			: relative;
	width				: 50px;
	height				: 40px;
	text-align			: center;
	border				: 1px solid;
	border-radius		: 4px;
	background-color	: #ffcccc;
	box-shadow			: 2px 2px 1px #000000;
	display				: inline-block;
}
.box-left {
	top					: 6px;
	left				: -44px;
}
.box-straight {
	top					: 6px;
	left				: -46px;
}
.box-right {
	top					: 6px;
	left				: -48px;
}

.w-text-left, .w-text-straight, .w-text-right {
	transform			: rotate(-90deg);
	top					: 15px;
}
.w-text-left {
	left				: -34px;
}
.w-text-right {
	left				: -58px;
}
.e-text-left, .e-text-straight, .e-text-right {
	transform			: rotate(90deg);
	top					: 15px;
}
.e-text-left {
	left				: -34px;
}
.e-text-right {
	left				: -58px;
}
.n-text-left, .n-text-straight, .n-text-right {
	transform			: rotate(180deg);
}
.n-text-left {
}
.n-text-right {
}

.name-box {
	background-color: #eeffff;
	border: 1px solid #959595;
	border-radius: 3px;
}
.name-text-box, .name-text-box-f3 {
	text-align			: center;
	background-color	: #eeffff;
	border				: 1px solid #959595;
	border-radius		: 3px;
}
.name-text-box {
	position			: absolute;
	width				: 300px;
}
.n-name {
	top					: -19px;
	left				: 30px;
}
.s-name {
	bottom				: -19px;
	left				: 30px;
}
.e-name {
	top					: 170px;
	right				: -158px;
}
.w-name {
	top					: 170px;
	left				: -158px;
}

.name-text-box-f3 {
	position			: absolute;
	font-size			: 0.8em;
	width				: 200px;
}
.n-name-f3 {
	top					: -16px;
	left				: 30px;
}
.s-name-f3 {
	top					: 260px;
	left				: 30px;
}
.e-name-f3 {
	top					: 121px;
	left				: 168px;
}
.w-name-f3 {
	top					: 121px;
	left				: -108px;
} */

/*=================================================== Panel2 ===================================================*/
.div-img-icon1 {
  position:absolute;
  top:0;
  left:0;
  border-radius:2px;
  background-color:red;
}
.div-img-icon2 {
  position:absolute;
  top:0;
  left:47px;
  border-radius:2px;
}
.img-icon {
  height:45px;
  padding:2px;
}

/*=================================================== Panel3 ===================================================*/
.img-intersec {
	width				: 40px;
	height				: 40px;
	background-color	: white;
}
.img-intersec-f3 {
	width				: 45px;
	height				: 45px;
	background-color	: white;
}

/*=================================================== Panel4 ===================================================*/
.img-intersec-panel4 {
	width				: 45px;
	height				: 45px;
	background-color	: white;
}
.img-intersec-panel4-f3 {
	width				: 32px;
	height				: 32px;
	background-color	: white;
}


/*---------- font ----------*/
.numline1 {
	position	: relative;
	text-align	: center;
	bottom		: 38px;
	font-size	: 1em;
}
.numline2 {
	position	: relative;
	text-align	: center;
	bottom		: 40px;
	font-size	: 1em;
}
.nameText {
	position	: relative;
	text-align	: center;
	font-size	: 1em;
	font-weight: bold;
	line-height : 25px;
	vertical-align: middle;
	 /* line-height	: 40px;  */
	/* border		: 1px solid; */
}

/*********** Hyde ***********/
.positiveText { /*Just a normal green text class but feels positive*/
	position	: relative;
	text-align	: center;
	font-size	: 2em;
	color : #44ff44;
}

.icon-box { /*Top-left icon on each frame*/
	position	: absolute;
	height		: 45px;
	left		: 0;
	top			: 0;
}

.popupBackground { /*background color of each frame*/
	background : #eeeeee;
}
.blackBackground { /*background color of each frame*/
	background : #111111;
}
.mini-box-text {
	position : relative;
	border:1px solid #959595;
	background: #ccffcc;
	font-size	: 1em;
	font-weight: bold;
	text-align	: center;
}
.mini-box-text2 {
	position : relative;
	border:1px solid #959595;
	font-size	: 1.2em;
	text-align	: center;
	/* vertical-align: middle; */
	/* height: 50px; */
}

#camera-text {
	bottom: 1%;
	color: #222222;
	font-size	: 1.5em;
	text-align	: center;
}
/****************************/

/*----------------------------------------------------------------------------------------*/
/*---------------------------------------- Part 2 ----------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.img_name {
	position: absolute;
	width:50%;
	height:20px;
	background-color:gray;
	text-align:center;
	color:white;
}

.textnumber-box {
	width			: 50px;
	/* height		: 50px; */
	text-align		: center;
	padding-top		: 10px;
	padding-bottom	: 10px;
	display			: inline-block;
}

.text-center {
	text-align		: center;
}

.block-panel {
	position		: absolute;
	width			: 100%;
	height			: 100%;
	background-color: black;
	display			: inline-block;
	opacity			: 0.6;
	z-index			: 20;
	text-align		: center;
	font-size		: 4em;
	visibility		: hidden;
	line-height		: 194px;
}

/*----------------------------------------------------------------------------------------*/
/*---------------------------------------- Part 4 ----------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.rect-frame {
	position		: relative;
	border-radius	: 10px;
    background		: #cccccc;
	box-shadow		: 2px 2px 1px #000000;
}
.input-text {
	margin-left		: 6px;
	margin-top		: 5px;
	background		: #ffffcc;
	border-top		: 2px solid #c2c2c2;
	border-left		: 2px solid #c2c2c2;
	border-right	: 1px solid #c2c2c2;
	border-bottom	: 1px solid #c2c2c2;
}
.button {
    margin-left:10px; font-size:1em; border-radius: 4px;
}
.upload-div {
	border-top		: 3px solid #959595;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

/* Radio button */
/* input[type=radio].css-checkbox {
	position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
input[type=radio].css-checkbox + label.css-label {
	padding-left:21px; height:16px; display:block; line-height:16px; background-repeat:no-repeat;
	background-position: 0 0; font-size:16px; vertical-align:middle; cursor:pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
	background-position: 0 -16px;
}
label.css-label {
	background-image:url("../images/icon/checkbox.png");
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
} */