/**********************
START #service-all
***********************/
	#service-all{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#service-all td, #service-all th{width:auto;border: 1px solid #cdcdcd;padding: 8px; }
	#service-all td{font-family: monospace;font-size: 14px;}
	#service-all th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}
	
	@media(max-width: 520px)
	{
		#service-all td{font-family: monospace; font-size: 10px!important;}
	}
	
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#service-all table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#service-all thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #service-all tr {
      margin: 0;
    }
      
    #service-all tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#service-all td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#service-all td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#service-all td:nth-of-type(1):before { content: "Sl.No."; }
		#service-all td:nth-of-type(2):before { content: "Domain Name"; }
		#service-all td:nth-of-type(3):before { content: "Services"; }
		#service-all td:nth-of-type(4):before { content: "Status"; }
		#service-all td:nth-of-type(5):before { content: "Registered Date"; }
		#service-all td:nth-of-type(6):before { content: "Expiry Date"; }
	}
	
	
	
	
/**********************
START #billing-all
***********************/
	#billing-all{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#billing-all td, #billing-all th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#billing-all td{font-family: monospace;font-size: 14px;}
	#billing-all th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	#billing-all td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#billing-all table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#billing-all thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #billing-all tr {
      margin: 0;
    }
      
    #billing-all tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#billing-all td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#billing-all td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#billing-all td:nth-of-type(1):before { content: "Sl.No."; }
		#billing-all td:nth-of-type(2):before { content: "Domain Name"; }
		#billing-all td:nth-of-type(3):before { content: "Services"; }
		#billing-all td:nth-of-type(4):before { content: "Status"; }
		#billing-all td:nth-of-type(5):before { content: "Registered Date"; }
		#billing-all td:nth-of-type(6):before { content: "Expiry Date"; }
	}
	
	
/**********************
START .billing-paid
***********************/
	.billing-paid{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	.billing-paid td, .billing-paid th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.billing-paid td{font-family: monospace;font-size: 14px;}
	.billing-paid th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.billing-paid td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.billing-paid table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.billing-paid thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .billing-paid tr {
      margin: 0;
    }
      
    .billing-paid tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.billing-paid td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.billing-paid td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.billing-paid td:nth-of-type(1):before { content: "Invoice Number"; }
		.billing-paid td:nth-of-type(2):before { content: "Payment Terms"; }
		.billing-paid td:nth-of-type(3):before { content: "Bill Date"; }
		.billing-paid td:nth-of-type(4):before { content: "Due Date"; }
		.billing-paid td:nth-of-type(5):before { content: "Amount"; }
		.billing-paid td:nth-of-type(6):before { content: "Actions"; }
	}
	
	
	
/**********************
START #pending
***********************/
	#pending{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#pending td, #pending th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#pending td{font-family: monospace;font-size: 14px;}
	#pending th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	#pending td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#pending table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#pending thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #pending tr {
      margin: 0;
    }
      
    #pending tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#pending td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#pending td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#pending td:nth-of-type(1):before { content: "Sl.No."; }
		#pending td:nth-of-type(2):before { content: "Domain Name"; }
		#pending td:nth-of-type(3):before { content: "Service"; }
		#pending td:nth-of-type(4):before { content: "Status"; }
		#pending td:nth-of-type(5):before { content: "Expiry Date"; }
	}



/**********************
START #services
***********************/
	#services{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#services td, #services th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#services td{font-family: monospace;font-size: 14px;}
	#services th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	#services td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#services table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#services thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #services tr {
      margin: 0;
    }
      
    #services tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#services td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#services td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#services td:nth-of-type(1):before { content: "Sl.No."; }
		#services td:nth-of-type(2):before { content: "Domain Name"; }
		#services td:nth-of-type(3):before { content: "Domain Registration"; }
		#services td:nth-of-type(4):before { content: "Status"; }
		#services td:nth-of-type(5):before { content: "Registered Date"; }
		#services td:nth-of-type(6):before { content: "Expiry Date"; }
	}


/**********************
START .renew
***********************/
	.renew{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	.renew td, .renew th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.renew td{font-family: monospace;font-size: 14px;}
	.renew th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.renew td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.renew table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.renew thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .renew tr {
      margin: 0;
    }
      
    .renew tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.renew td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.renew td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.renew td:nth-of-type(1):before { content: ""; }
		.renew td:nth-of-type(2):before { content: "Domain"; }
		.renew td:nth-of-type(3):before { content: "Reg. Period"; }
	}


/**********************
START #search-grid
***********************/
	.search-grid1{
	background:#fff;
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	margin-bottom:1em;
	}
	.search-grid1 td, .search-grid1 th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.search-grid1 td{font-family: monospace;font-size: 14px;}
	.search-grid1 th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.search-grid1 td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.search-grid1 table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.search-grid1 thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .search-grid1 tr {
      margin: 0;
    }
      
    .search-grid1 tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.search-grid1 td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.search-grid1 td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.search-grid1 td:nth-of-type(1):before { content: ""; }
		.search-grid1 td:nth-of-type(2):before { content: "Domain Name"; }
		.search-grid1 td:nth-of-type(3):before { content: "Status"; }
		.search-grid1 td:nth-of-type(4):before { content: "Subscription Period"; }
		.search-grid1 td:nth-of-type(5):before { content: "Price"; }
	}
	


/**********************
START #idn-search-grid
***********************/
	.idn-search-grid{
	background:#fff;
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	margin-bottom:2em;
	}
	.idn-search-grid td, .idn-search-grid th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.idn-search-grid td{font-family: monospace;font-size: 14px;}
	.idn-search-grid th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.idn-search-grid td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.idn-search-grid table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.idn-search-grid thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .idn-search-grid tr {
      margin: 0;
    }
      
    .idn-search-grid tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.idn-search-grid td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.idn-search-grid td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.idn-search-grid td:nth-of-type(1):before { content: "(IDN)"; }
		.idn-search-grid td:nth-of-type(2):before { content: "Script"; }
		.idn-search-grid td:nth-of-type(3):before { content: "Language"; }
		.idn-search-grid td:nth-of-type(4):before { content: "State"; }
	}
	
	
/**********************
START #transfer-grid
***********************/
	.transfer-grid{
	background:#fff;
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	margin-bottom:1em;
	}
	.transfer-grid td, .transfer-grid th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.transfer-grid td{font-family: monospace;font-size: 14px;}
	.transfer-grid th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.transfer-grid td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.transfer-grid table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.transfer-grid thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .transfer-grid tr {
      margin: 0;
    }
      
    .transfer-grid tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.transfer-grid td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.transfer-grid td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		
		.transfer-grid td:nth-of-type(1):before { content: "Domain Name"; }
		.transfer-grid td:nth-of-type(2):before { content: "Current Registrar"; }
		.transfer-grid td:nth-of-type(3):before { content: "Authorization/EPP Code"; }
		.transfer-grid td:nth-of-type(4):before { content: "Nameserver1"; }
		.transfer-grid td:nth-of-type(5):before { content: "Nameserver2"; }
		.transfer-grid td:nth-of-type(6):before { content: "Documentation"; }
		.transfer-grid td:nth-of-type(7):before { content: ""; }
	}	

/**********************
START #transfer-grid-list
***********************/
	.transfer-grid-list{
	background:#fff;
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	margin-bottom:1em;
	}
	.transfer-grid-list td, .transfer-grid-list th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.transfer-grid-list td{font-family: monospace;font-size: 14px;}
	.transfer-grid-list th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.transfer-grid-list td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.transfer-grid-list table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.transfer-grid-list thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .transfer-grid-list tr {
      margin: 0;
    }
      
    .transfer-grid-list tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.transfer-grid-list td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.transfer-grid-list td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		
		.transfer-grid-list td:nth-of-type(1):before { content: "Domain Name"; }
		.transfer-grid-list td:nth-of-type(2):before { content: "Current Registrar"; }
		.transfer-grid-list td:nth-of-type(3):before { content: "Authorization/EPP Code"; }
		.transfer-grid-list td:nth-of-type(4):before { content: "Nameserver1"; }
		.transfer-grid-list td:nth-of-type(5):before { content: "Nameserver2"; }
		.transfer-grid-list td:nth-of-type(7):before { content: ""; }
	}	

/**********************
START #AddOns
***********************/
	.AddOns{
	background:#fff;
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	margin-bottom:1em;
	}
	.AddOns td, .AddOns th{width:auto!important;border: 1px solid #cdcdcd;padding: 8px!important;}
	.AddOns td{font-family: monospace;font-size: 14px;}
	.AddOns .hh{color: #000;font-size: 14px;font-family: 'montserratsemi_bold';}
	.AddOns .hh span, .AddOns .hh span a{ color:#34ac07;font-family: monospace;vertical-align: text-top; }
	.AddOns .hh span a:hover{ color:#ff9600; }
	.AddOns th{
	background: #31a3e2;
    color: #fff!important;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}
	
	.AddOns .t-chk input[type="checkbox"]{width: 20px;height: 20px;}

	@media(max-width: 520px)
	{
	.AddOns td{font-family: monospace; font-size: 10px!important;}	
	}
	
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.AddOns table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.AddOns thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .AddOns tr {
      margin: 0;
    }
      
    .AddOns tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.AddOns td {
			/* Behave  like a "row" */
			border: none!important;
			border-bottom: 1px solid #eee!important;
			position: relative;
			padding-left: 50%!important;
		}

		.AddOns td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}
		

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.AddOns td:nth-of-type(1):before { content: "Services"; }
		.AddOns td:nth-of-type(2):before { content: "Plan"; }
		.AddOns td:nth-of-type(3):before { content: "Quantity"; }
		.AddOns td:nth-of-type(4):before { content: "Subscription Period"; }
		.AddOns td:nth-of-type(5):before { content: "Price"; }
		.AddOns td:nth-of-type(6):before { content: "Add"; }
	}

/**********************
START .eligibility
***********************/
	.eligibility{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	.eligibility td, .eligibility th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.eligibility td{font-family: monospace;font-size: 14px;}
	.eligibility th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.eligibility td{font-family: monospace; font-size: 11px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.eligibility table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.eligibility thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .eligibility tr {
      margin: 0;
    }
      
    .eligibility tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.eligibility td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.eligibility td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.eligibility td:nth-of-type(1):before { content: "No."; }
		.eligibility td:nth-of-type(2):before { content: "Domain"; }
		.eligibility td:nth-of-type(3):before { content: "Company Document Type"; }
		.eligibility td:nth-of-type(4):before { content: "CR No / Trade Mark No"; }
		.eligibility td:nth-of-type(5):before { content: "Document Expiry Date"; }
		.eligibility td:nth-of-type(6):before { content: "Company Name / Trade Mark Name"; }
		.eligibility td:nth-of-type(7):before { content: "Documents"; }
	}


/**********************
START .Domain-Cart
***********************/
	.Domain-Cart{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	.Domain-Cart td, .Domain-Cart th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.Domain-Cart td{font-family: monospace;font-size: 14px;}
	.Domain-Cart th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.Domain-Cart td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.Domain-Cart table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.Domain-Cart thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .Domain-Cart tr {
      margin: 0;
    }
      
    .Domain-Cart tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.Domain-Cart td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.Domain-Cart td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.Domain-Cart td:nth-of-type(1):before { content: "#"; }
		.Domain-Cart td:nth-of-type(2):before { content: "Domain"; }
		.Domain-Cart td:nth-of-type(3):before { content: "Subscription Period"; }
		.Domain-Cart td:nth-of-type(4):before { content: "Price"; }
		.Domain-Cart td:nth-of-type(5):before { content: ""; }
	}




/**********************
START .Service-Cart
***********************/
	.Service-Cart{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	.Service-Cart td, .Service-Cart th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.Service-Cart td{font-family: monospace;font-size: 14px;}
	.Service-Cart th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.Service-Cart td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.Service-Cart table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.Service-Cart thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .Service-Cart tr {
      margin: 0;
    }
      
    .Service-Cart tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.Service-Cart td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.Service-Cart td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.Service-Cart td:nth-of-type(1):before { content: "#"; }
		.Service-Cart td:nth-of-type(2):before { content: "Domain Name"; }
		.Service-Cart td:nth-of-type(3):before { content: "Services"; }
		.Service-Cart td:nth-of-type(4):before { content: "Plan"; }
		.Service-Cart td:nth-of-type(5):before { content: "Quantity"; }
		.Service-Cart td:nth-of-type(6):before { content: "Subscription Period"; }
		.Service-Cart td:nth-of-type(7):before { content: "Price"; }
		.Service-Cart td:nth-of-type(8):before { content: ""; }
	}



/**********************
START .NS-Record
***********************/
	.NS-Record{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	.NS-Record td, .NS-Record th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.NS-Record td{font-family: monospace;font-size: 14px;}
	.NS-Record th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.NS-Record td{font-family: monospace; font-size: 10px!important;}	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.NS-Record table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.NS-Record thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .NS-Record tr {
      margin: 0;
    }
      
    .NS-Record tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.NS-Record td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.NS-Record td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.NS-Record td:nth-of-type(1):before { content: "Hostname"; }
		.NS-Record td:nth-of-type(2):before { content: "Nameserver"; }
	}
/**********************
START .OTHER-SERVICE
***********************/
	.other-service{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	.other-service td, .other-service th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	.other-service td{font-family: monospace;font-size: 14px;}
	.other-service th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media(max-width: 520px)
	{
	.other-service td{font-family: monospace; font-size: 10px!important;	
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		.other-service table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		.other-service thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    .other-service tr {
      margin: 0;
    }
      
    .other-service tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		.other-service td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		.other-service td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		.other-service td:nth-of-type(1):before { content: "Domain Name";}
		.other-service td:nth-of-type(2):before { content: "Service";}
		.other-service td:nth-of-type(3):before { content: "Plan";}
		.other-service td:nth-of-type(4):before { content: "Subscription Period";}
		.other-service td:nth-of-type(5):before { content: "Quantity";}
		.other-service td:nth-of-type(6):before { content: "Created Date";}
		.other-service td:nth-of-type(7):before { content: "Expiry Date";}

	}