.grid-table {
    display: grid;
}


.grid-table.c2{grid-template-columns:repeat(2,1fr)}.grid-table.c3{grid-template-columns:repeat(3,1fr)}.grid-table.c4{grid-template-columns:repeat(4,1fr)}.grid-table.c5{grid-template-columns:repeat(5,1fr)}.grid-table.c6{grid-template-columns:repeat(6,1fr)}.grid-table.c7{grid-template-columns:repeat(7,1fr)}.grid-table.c8{grid-template-columns:repeat(8,1fr)}.grid-table.c9{grid-template-columns:repeat(9,1fr)}.grid-table.c10{grid-template-columns:repeat(10,1fr)}.grid-table.c11{grid-template-columns:repeat(11,1fr)}.grid-table.c12{grid-template-columns:repeat(12,1fr)}


.grid-table.paramter-table {
    grid-template-columns: 1fr min-content 1fr min-content;
}
.grid-table .grid-row {
    display: contents;
}
.grid-table .header-cell:first-child, .grid-table .data-cell:first-child {
    padding-left: 15px;
}
.grid-table .header-cell {
    padding: 5px;
    font-weight: bold;
    text-align: left;
    border: 1px solid #dbdbdb;
    background: #fafafa;
    border-width: 1px 0px 1px 0px;
    position: relative;
}
.grid-table .data-cell {
    border-bottom: 1px solid #e1e1e1;
    padding: 5px;
    padding-left: 5px;
    background: white;
}


.grid-table .header-cell:after {
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    top: 5px;
    bottom: 5px;
    border-left: 1px solid #dbdbdb;
}

.grid-table .header-cell:last-child:after {
    display: none;
}

.grid-table .full-width-column {
    grid-column: 1 / -1;
}




.grid-table th:first-child, .grid-table td:first-child {
    padding-left: 15px;
}
.grid-table th {
    padding: 5px;
    font-weight: bold;
    text-align: left;
    border: 1px solid #dbdbdb;
    background: #fafafa;
    border-width: 1px 0px 1px 0px;
    position: relative;
}
.grid-table .td {
    border-bottom: 1px solid #e1e1e1;
    padding: 5px;
    padding-left: 5px;
    background: white;
}


.grid-table th:after {
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    top: 5px;
    bottom: 5px;
    border-left: 1px solid #dbdbdb;
}

table.grid-table {
	display: table;
}
.grid-table th:last-child:after {
    display: none;
}






.data-form .field {
  padding: 10px;
}
.data-form label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 3px;
    text-transform: capitalize;
}
.data-form  .field.required > label:after {
    content: "*";
    color: red;
    padding-left: 5px;
}
.data-form .display-text {
    font-size: 14px;
}
.data-form input, .data-form select {
    padding: 5px;
    width: 100%;
    font-size: 14px;
}
.data-form input[type=radio],.data-form input[type=checkbox] {
  width:auto;
}
.data-form input[type=submit] {
    background: #4239c0;
    color: white;
    border: 1px solid #4239c0;
    border-radius: 0.5em;
    padding: 0.5em;
cursor: pointer;
}

.data-form textarea {
    width: 100%;
    resize: none;
    padding: 5px;
    font-size: 14px;
}


.data-form .error {
    background: #ffcccc;
    margin-bottom: 10px;
    padding:5px;
    margin-top:5px;
    color: red;
        text-transform: capitalize;
}



.data-form .field .sm textarea {
 height:5em;
}
.data-form .field .md textarea {
 height:15em;
}
.data-form .field .lg textarea {
 height:30em;
}


.data-form input:focus, .data-form textarea:focus, .data-form select:focus {
    border-color: #4239c0;
    box-shadow: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}


.data-form .radio-wrapper {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.data-form .radio-wrapper .radio-button  {
    display: flex;
    justify-content: center;
    align-items: center;
}


.data-form .radio-wrapper .radio-button input[type="radio"] {
    padding: 0px;
    margin: 0px;
    margin-right: 5px;
}


.data-form .radio-wrapper .radio-button label {
    margin: 0px;
    padding: 0px;
    text-transform: capitalize;
    line-height: 1em;
    font-weight: normal;
}

.data-form  .description {
    padding: 5px;
    color: #000000;
    font-size: 0.9em;
    background: #f9f9f9;
    margin-bottom: 5px;
}

.data-form .field .description {
    padding: 5px;
    color: rgb(104, 112, 120);
    font-size: 0.9em;
    margin-bottom: 5px;
    font-size: 12px;
    background: none;
    padding: 0px;
    font-family: sans-serif;
}



.data-form .field .description .field-type:after {
    content: " ]";
}
.data-form .field .description .field-type:before {
    content: "[ ";
}
.data-form .field .description .field-type {
    color: #3779e1;
    font-weight: bold;
    text-transform: capitalize;
}






.data-card {

    border: 1px solid #d3d3d3;
    background: white;
    box-shadow: 0px 3px 2px 0px #e1e1e1;
  	margin: 20px 10px;
}

.data-card .card-header {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: normal;
    font-weight: 700;
    -webkit-font-smoothing: auto;
    padding: 15px;
    background: #f7f8f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.card-header .actions {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}



.data-card  .card-content {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: normal;
    font-weight: 700;
    -webkit-font-smoothing: auto;
    padding: 15px;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #a1a1a1;
}

.card-table {
    width: 100%;
    box-sizing: border-box;
    border-collapse: collapse;
}
.card-table th {
    padding: 5px;
    font-weight: bold;
    text-align: left;
    border: 1px solid #dbdbdb;
    background: #fafafa;
    border-width: 1px 0px 1px 0px;
    position: relative;
}
.card-table th:after {
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    top: 5px;
    bottom: 5px;
    border-left: 1px solid #dbdbdb;
}
.card-table th:last-child:after {
    display: none;
}

.card-table td {
    border-bottom: 1px solid #e1e1e1;
    padding: 5px;
    padding-left: 5px;
    background: white;
}
.card-table tr:last-child {
	border-bottom-width:0px;
}
.card-table th:first-child,.card-table td:first-child  {
    padding-left: 15px;
}

.attribute-grid {
    display: grid;
}

.attribute-grid .attibute {
    padding: 10px;
}
.attribute-grid .attibute .name {
    font-size: 13px;
    display: block;
    color: #545b64;
    line-height: 22px;
    font-family: sans-serif;
}
.attribute-grid .attibute .value {
    font-size: 14px;
    display: block;
    color: #000000;
    line-height: 22px;
    font-family: sans-serif;
}

.attribute-grid.c2 {
    grid-template-columns: 1fr 1fr ;
}
.attribute-grid.r2 {
    grid-template-rows: 1fr 1fr ;
}
.attribute-grid.c4 {
    grid-template-columns: 1fr 1fr 1fr 1fr ;
}
.attribute-grid.r4 {
    grid-template-rows: 1fr 1fr 1fr 1fr ;
}
.attribute-grid.c3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.attribute-grid.r3 {
    grid-template-rows: 1fr 1fr 1fr;
}
.data-form .form-section {
    margin-top: 30px;
    border: 1px solid #d3d3d3;
    border-left: 1px solid #a1a1a1;
    border-right: 1px solid #a1a1a1;
    border-bottom: 1px solid #d3d3d3;
}
.data-form .form-section .section-header {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: normal;
    font-weight: 700;
    -webkit-font-smoothing: auto;
    padding: 20px;
    background: #f7f8f9;
}
.data-form .form-section .section-content {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: normal;
    font-weight: 700;
    -webkit-font-smoothing: auto;
    padding: 10px;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #a1a1a1;
}




.api-route .method {
  font-weight: bold;
  text-transform: uppercase;
}

.api-route .path {
font-style: italic;
}
.api-route .method.post {
  color: #f07101;
}

.api-route .method.get {
  color: green;
}
.api-route {
  padding: 10px;

  background: white;
  border: 0px;
    border-bottom-width: 0px;
    border-bottom-style: none;
    border-bottom-color: currentcolor;

}


.response-preview-pane .api-route {
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
}


.response-preview-pane {
  background: #f7f7f7;
  border: 1px solid #e7e7e7;
  box-sizing: border-box;

}
	.api-response-body {
	    padding: 15px;
	    box-sizing: border-box;
	}
	
	.editor-node:last-child:after{
		content: "}";
	}
	
	.editor-node:after {
	    content: "},";
	    position: absolute;
	    left: 0px;
	    color: black;
	    bottom: 0.1em;
	}
	
	span.nd-lbl:before {
	    content: "'";
	}
	span.nd-lbl:after {
	    content: "': {";
	    color: black;
	}
	
	span.nd-lbl.arr:after {
	    content: "': [";
	    color: black;
	}

	span.nd-open:after {
	    content: "{";
	    color: black;
	}
	
	
	.nd-atr {
	    line-height: 1.5em;
	    margin-left: 1em;
	}
	
	span.atr-lbl {
	    color: red;
	      font-weight: bold;
	}
	span.atr-lbl:before {
	    content: "'";
	}
	span.atr-lbl:after {
	    content: "'";
	}
	
	span.atr-val {
	    position: relative;
	    color: green;
	}
	span.atr-val:before {
	    content: ": ";
	    font-weight: bold;
	    color: black;
	}
	
	span.atr-val:after {
	    content: ",";
	    padding-left: 2px;
	    font-weight: bold;
	    position: absolute;
	    bottom: -0.1em;
	    color: black;
	}
	.nd-atr:last-child span.atr-val:after {
	    content: "";
	}
	
	
	.editor-node.arr div.val {
	    position: relative;
	    color: blue;
	    line-height: 1.5em;
	    margin-left: 1em;
	}

	
	.editor-node.arr div.val:after {
	    content: ",";
	    padding-left: 2px;
	    font-weight: bold;
	    position: absolute;
	    bottom: -0.1em;
	    color: black;
	}
	
	.editor-node.arr div.val:last-child:after {
	    content: "";
	    padding-left: 2px;
	    font-weight: bold;
	    position: absolute;
	    bottom: -0.1em;
	    color: black;
	}
	
	.editor-node.arr:last-child:after {
	    content: "]";
	}
	
	
	.editor-node {
	    position: relative;
	    min-height: 2em;
	    margin-left: 1em;
	    box-sizing: border-box;
	    padding-bottom: 1.5em;
	}
	
	span.nd-lbl {
	    color: red;
	    font-weight: bold;
	    position: relative;
	}
	
	.itm-rpt {
	    line-height: 1em;
	    overflow: hidden;
	    margin: 0px 15px;
	    display: block;
	    font-size: 1.2em;
	    font-weight: bold;
	}
	
	
	.response-data-wrapper {
    	display: grid;
    	grid-template-columns: 1fr 1fr;
	}