<?php 

?>

            .slider {
                -webkit-appearance: none;
                
                height: 15px;
                background: #d3d3d370;
                outline: none;
                opacity: 0.5;
                -webkit-transition: .2s;
                transition: opacity .2s;
              }

              .slider:hover {
                opacity: 1;
              }
              
              .slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 15px;
                height: 15px;
                background: <?php echo $_SESSION['colour1'] ;?>;
                cursor: pointer;
              }
              

              .slider::-moz-range-thumb {
                width: 25px;
                height: 15px;
                background: <?php echo $_SESSION['colour1'] ;?>;
                cursor: pointer;
              }

.circle {
        border-radius: 50%;
        width: 15px;
        height: 15px;
        padding: 2px;
        background: #fff;
        border: 3px solid #000;
        color: #000;
        text-align: center;
        font: 10px Arial, sans-serif;
      }
              
              .slider2 {
                -webkit-appearance: none;
                
                height: 15px;
                background: #d3d3d370;
                outline: none;
                opacity: 0.5;
                -webkit-transition: .2s;
                transition: opacity .2s;
              }
              
              .slider2:hover {
                opacity: 1;
              }
              
              .slider2::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 15px;
                height: 15px;
                background: #ac0606;
                cursor: pointer;
              }
              
              .slider2::-moz-range-thumb {
                width: 25px;
                height: 15px;
                background: #ac0606;
                cursor: pointer;
              }
              
              .slider3 {
                  -webkit-appearance: none;
                  
                  height: 15px;
                  background: #d3d3d370;
                  outline: none;
                  opacity: 0.5;
                  -webkit-transition: .2s;
                  transition: opacity .2s;
                }
                
                .slider3:hover {
                  opacity: 1;
                }
                
                .slider3::-webkit-slider-thumb {
                  -webkit-appearance: none;
                  appearance: none;
                  width: 15px;
                  height: 15px;
                  background: black;
                  cursor: pointer;
                }
                
                .slider3::-moz-range-thumb {
                  width: 25px;
                  height: 15px;
                  background: black;
                  cursor: pointer;
                }

                .tile_div button {
                    display: block;
                    float: left;
                    height: 50px;
                    width: 100px;
                    margin-right: 5px;
                    background-image: url(./images/button_left.png);
                    background-color: #ccc;
                    text-align: center;
                    line-height: 50px;
                    text-decoration: none;
                }
                .tg  {border-collapse:collapse;border-spacing:0;border:none;}
                
        .tg .tg-head1{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 2.0vw; font-weight: 600 }
                
        .tg .tg-14acopy{text-align:center; background-color: #228d4533; color: black; font-weight: 300; font-size: 1.5vw; line-height: normal; padding-bottom: 0.25vw; border: grey 1px solid}

.tg .tg-15we0 {background-color: #e6e6e6; height: 20px; padding-top: 5px; padding-bottom: 5px; padding-left: 2px;font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 16px}

        .tg .tg-head2lt{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 1.5vw; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.0vw; background:none; text-align: left }

        .tg .tg-head2lt2{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.0vw; background:none; text-align: left }

        .tg .tg-head2{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.0vw; background:none }

        .tg .tg-head25{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.25vw; background:none; text-decoration:none }

        .tg .tg-head25pad{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.1vw; background:none; text-decoration:none; padding-top: 7px; padding-bottom: 7px }

        .tg .tg-head3{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.5vw; background:none }
        
        .tg .tg-head3lt{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 18px; background:none; text-align: left;text-decoration:none  }
        
        .tg .tg-head3lth{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 20px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 18px; background:none; text-align: left; padding-top: 5px; padding-bottom: 5px }

        .tg .tg-head31{background-color: white;vertical-align:middle; line-height: 16px; align-items: left; padding-top: 5px; padding-bottom: 5px; text-align: left; padding-left: 2px; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; color: <?php echo $_SESSION['colour1'] ;?>;  border:none; font-size: 1.5vw; background:none; font-weight: 500}

        .tg .tg-headgrey{color: white;  border:none; line-height: 18px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.5vw; background-color: <?php echo $_SESSION['colour1'] ;?>; padding-top: 10px; padding-bottom: 10px }

        .tg .tg-headgrey2{color: white;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.0vw; background-color: <?php echo $_SESSION['colour1'] ;?>; padding-top: 10px; padding-bottom: 10px }

        .tg .tg-headlightgrey{color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.5vw; background-color: lightgrey; padding-top: 10px; padding-bottom: 10px; border: solid 1px <?php echo $_SESSION['colour1'] ;?> }

  .tg .tg-angle {border-bottom: none; background-color: <?php echo $_SESSION['colour1'] ;?>  ; line-height: 2vw; font-weight: bold; font-size: 1.25vw; color: white;  text-align: left; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); white-space: nowrap; border-collapse: unset;font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; margin: 0;}

        .tg .tg-angle0 {border-bottom: 1px <?php echo $_SESSION['colour1'] ;?> solid; background-color:  none ; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; }

        input[bramb="comp_name"] {font-size: 1.5vw; color: black; padding-top: 5px; padding-bottom: 5px; padding-left: 4px; border-style: solid; border-width: 1px; border-color: lightgray; display: block; background: white; text-align: left; width: 85%; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;}

        input[bramb3="comp_name3"] {font-size: 1.1vw; color: black; padding-top: 5px; padding-bottom: 5px; padding-left: 4px; border-style: solid; border-width: 1px; border-color: lightgray; display: block; background: white; text-align: left; width: 85%; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;-webkit-appearance: none; margin: 0;}

        input[bramb3="comp_name31"] {font-size: 1.2vw; color: black; padding-top: 5px; padding-bottom: 5px; padding-left: 4px; border-style: solid; border-width: 1px; border-color: lightgray; display: block; background: white; text-align: center; width: 85%; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;-webkit-appearance: none; margin: 0;}
        

        input[bramb4="comp_name4"] {font-size: 1.2vw; color: black; padding-top: 1px; padding-bottom: 1px; padding-left: 4px; border-style: solid; border-width: 1px; border-color: lightgray; display: block; background: white; text-align: left; width: 85%; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;-webkit-appearance: none; margin: 0;}


        select[	reg="blanker1"] {font-size: 1.5vw; color: black; padding-top: 5px; padding-bottom: 5px; padding-left: 4px; border-style: solid; border-width: 1px; border-color: lightgray; display: block; background: white; text-align: left; width: 91.5%; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;}

        select[reg2="blanker2"] {font-size: 1.25vw; color: black; padding-top: 2px; padding-bottom: 2px; padding-left: 4px; border-style: solid; border-width: 1px; border-color: lightgray; display: block; background: white; text-align: left; width: 91.5%; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;}

        select[no="border"] {font-size: 1.0vw; color: black; border: none; display: block; background: white; text-align: left; width: 91.5%; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;}

        .tg .tg-1we0 {background-color: #1b79af78; height: 20px; padding-top: 5px; padding-bottom: 5px; padding-left: 2px;font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 1.5vw; text-align: left; color: white; font-weight: 500}
  
        input[bramb2="comp_name"] {font-size: 1.5vw; color: black; padding-top: 5px; padding-bottom: 5px; padding-left: 0.3vw; border-style: none;  display: block; background: white; text-align: left; width: 95%; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;word-wrap: break-word;}

        #myBtn {display: none;position: fixed;bottom: 20px; right: 30px; z-index: 99;font-size: 18px; border: none; outline: none; background-color: gold; color: white;cursor: pointer; padding: 15px; border-radius: 4px;}

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }

        
        .tg .tg-1a4we0 { color: <?php echo $_SESSION['colour1'] ;?>;  border:none; line-height: 12px; font-weight: 500; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 18px; text-align: left }

        .tg .tg-3peq{background-color:<?php echo $_SESSION['colour1'] ;?>;color: white; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif;text-align:center;vertical-align:top; padding-top: 5px; padding-bottom: 5px; font-weight: 500}
		.tg .tg-3peq2{background-color:white;color: black; font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif;text-align:center;vertical-align:top; padding-top: 5px; padding-bottom: 5px; font-weight: 500}
		.tg .tg-ihk8{font-size:18px;background-color:<?php echo $_SESSION['colour1'] ;?>;color:#ffffff; vertical-align:top; border: solid; border-width: 0.25px; height: 12px; border-color: lightgray; text-align: center; font-weight: 500}

		.tg .tg-mtwr{background-color:#d3d3d359;vertical-align:top; line-height: 12px; padding: none; border: solid; border-width: 1px; border-color: lightgray}
		.tg .tg-umff{background-color:<?php echo $_SESSION['colour1'] ;?>;color: white; font-size:12px;font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif;text-align:center;vertical-align:top; border: solid; border-width: 0px; font-weight: 500}
		.tg .tg-yw4l{vertical-align:top; border: solid; border-width: 1px; height: 12px; border-color: lightgray; background-color: white; color: black}
		.tg .tg-grey{border: solid; border-width: 1px; height: 12px; border-color: lightgray; background-color: lightgray}
		.tg .tg-b1z4{background-color:#f1dcdb;vertical-align:top; line-height: 12px; padding: none; border: solid; border-width: 1px; border-color: gainsboro}
		input[name="calve"] {line-height: 25px; width: 90%; font-size: 14px; color: black; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; border: none; display: block; background: none; align-self: center; text-align: center}

		input[named="calved"] {line-height: 25px; width: 90%; font-size: 1.0vw; color: black; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; border: none; display: block; background: none; align-self: center; text-align: center}

		input[name="other"] {height: 100%; width: 95%; font-size: 18px; color: black; padding-top: 5px; padding-bottom: 5px; padding-right: 0px; border: 1px solid lightgrey; display: block; background-color: white; text-align: center; font-weight: 500}

		input[named="other"] {height: 100%; width: 95%; font-size: 18px; color: black; padding-top: 5px; padding-bottom: 5px; padding-right: 0px; border: 1px solid lightgrey; display: block; background-color: white; text-align: center; font-weight: 500}

		input[name="bottom"] {line-height: 12px; width: 95%; font-size: 18px; color: white; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; border: none; display: block; background: none; align-self: center; text-align: center; font-weight: 500}

         
        .tab button {background-color: inherit;float: left;border: none;outline: none;cursor: pointer;padding: 14px 16px;transition: 0.3s;font-size: 2.5vw;font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; border: none}
     
        .tab2 button {background-color: <?php echo $_SESSION['colour1'] ;?>;float: left; outline: none;cursor: pointer;padding-top: 5px; padding-bottom:  5px;transition: 0.3s;font-size: 1.5vw; color:white; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; width: 12vw; border: none}
        
  
        .tab2 {overflow: hidden;border: 0px solid #ccc;background-color: <?php echo $_SESSION['colour1'] ;?>;padding: 0vw 0vw 0vw 0vw}

	
/* Change background color of buttons on hover */
.tab2 button:hover { background-color: #ddd;}

/* Create an active/current tablink class */
.tab2 button.active {background-color: white; color: <?php echo $_SESSION['colour1'] ;?>}

/* Style the tab content */
.tab2 content {display: none;padding: 0vw 0vw 0vw 0vw;border: 0px solid #ccc;border-top: none;}
        
  
	.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
	.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 80%;
	position: relative;
	margin: 2% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}
	
	.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
     


                body {
  background-color: white;
  overflow-x: hidden;
  overflow-y: hidden;
}