input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}
input[type=number]{
   font-size: 15px !important;
}
.stylesheet-contents {
   background-color: var(--bgcolor1) !important;
   color: var(--color1) !important;
   display: flex;
   width: 100%;
   /* margin-top: -3px; */
}
.stylesheet-contents table td{
   background-color: var(--bgcolor1) !important;
}
.stylesheet {
   width: 265px;
   height: calc(100vh - 53px);
   /* border: 1px solid var(--linecolor1); */
   overflow-y: scroll;
   background-color: var(--bgcolor1) !important;
   /* border-color: var(--bordercolor2); */
   margin: 5px;
   margin-bottom: 2px;
      
}
.stylesheet-header,.stylesheet-header1 {
   background-color: var(--bgcolor1) !important;
   color: var(--color1);
   /* color: rgb(255, 167, 89); */
   padding: 10px;
   width: 100%;
   text-align: left;
   cursor: pointer;
}
.stylesheet-content {
   display: none;
   padding-left: 5px;
   padding-top: 5px;
}
.pghead{
   background-color: var(--bgcolor1) !important;
   color: var(--color1);
   text-align: center;
   font-weight: bold;
   padding: 0;
  /* height: 25px;
   */
   cursor: default;
   letter-spacing: 2px;
   border-top: 1px solid var(--linecolor1);
}
.attrib-head{
   background-color: var(--bgcolor1) !important;
   color: var(--color1);
   text-align: center;
   font-weight: bold;
   padding: 0;
  /* height: 25px;
   */
   cursor: default;
   letter-spacing: 2px;
}
.style-item {
  /* margin-bottom: 10px;
   */
   display: flex;
   align-items: center;
   text-wrap: nowrap;
}
.style-label {
   display: block;
   /* font-weight: bold !important; */
   /* font-size: 12px; */
   color: var(--color2);
}
.style-value, .inputgroup *,input, select {
   background-color: var(--bgcolor1) !important;
   color: var(--color1);
   width: 100%;
  /* width: 95px;
   */
   padding: 1px 3px 3px 3px;
  /* box-sizing: border-box;
   */
  /* margin-left: 30px;
   */
   /* font-size: 10px; */
   /* font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; */
}
.code-generator {
   flex: 1;
   padding: 5px;
}
textarea {
   width: 100%;
   height: 1200px;
   padding: 10px;
   font-family: monospace;
   box-sizing: border-box;
   resize: vertical;
}
/* Custom CSS by ZAFAR*/
.grid-col2 {
   display: grid;
  /* grid-template-columns: auto auto;
   */
   grid-template-columns: 100px auto;
   gap: 5px;
   align-items: center;
   padding: 0 6px !important;
   margin-bottom: 5px;
}
.grid-col4 {
   display: grid;
   grid-template-columns: 50px auto 40px auto;
   gap: 5px;
   align-items: center;
   padding: 0 6px !important;
   margin-bottom: 5px;
}
.grid-col4_2 {
   display: grid;
   grid-template-columns: 50px auto;
   gap: 5px;
   align-items: center;
   padding: 0 6px !important;
   margin-bottom: 5px;
}
.inputgroup select {
   -webkit-appearance: none;
  /* Hide arrow in WebKit browsers */
   -moz-appearance: none;
  /* Hide arrow in Firefox */
}
input,.inputgroup {
   border-radius: 3px;
   background-color: #202020;
   color: var(--color1);
}
 input:not([type=checkbox]),select {
   border: 1px solid var(--linecolor1);
   color: var(--color1) !important;
   height: 22px;
   padding: 0 0 0 1px;
}
.inputgroup {
   border: 1px solid var(--linecolor1) !important;
   border-radius: 3px !important;
   color: var(--color1);
   position: relative;
   display: flex;
  /* flex-wrap: wrap;
   */
  /* align-items: stretch;
   */
   width: 100%;
   height: 22px !important;
}
.inputgroup input:not([type=number]){
   border: none !important;
   height: 20px !important;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
}

.inputgroup input[type=number]{
   border: none !important;
   height: 20px !important;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
   border-bottom-left-radius: 0px !important ;
   border-top-left-radius: 0px !important;
}


.inputgroup select{
   border: none !important;
   height: 20px !important;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
   width: 25px;
}
/* .inputgroup input{
   border: none !important;
   height: 20px !important;
   border-top-right-radius: 0px !important;
}
*/
.form-select{
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
input:not([type="checkbox"]):not([type="radio"]),.cboborder {
   border: 1px solid var(--linecolor1) !important;
   border-radius: 3px !important;
   color: var(--color1);
}
#css-output, #css-output:active{
   background-color: black !important;
   color: var(--color1);
   padding: 3px;
   font-family: monospace;
   white-space: pre;
   height: 100px;
   /* font-size: 12px; */
   word-wrap: normal;
   background: none;
   -webkit-hyphens: none;
   hyphens: none;
   line-height: 1.5;
   tab-size: 4;
   white-space: pre;
   word-break: normal;
   word-spacing: normal;
   overflow: auto;
   border: 1px solid var(--linecolor1) !important;
   border-radius: 6px;
}
input:focus,select:focus,button:focus,textarea:focus {
   outline: none;
}
button {
  /* margin-top: 10px;
   margin-bottom: 10px;
   */
   /* height: 41px; */
   border: none;
   border-top: 1px solid var(--linecolor1);
   /* font-weight: bold; */
}
.attrib-head{
   border-top: none;
}
.stylesheet-header svg {
   display: inline-block;
   margin-right: 8px;
   fill: var(--color1);
}
.stylesheet-header.up svg {
   transform: rotate(180deg);
}



/* For Text-Alignment */
.stylesheet-contents .radio-text-align {
   display: flex;
   justify-content: space-between;
}
.stylesheet-contents .radio-text-align label {
   display: flex;
   align-items: center;
   cursor: pointer;
}
.stylesheet-contents .radio-text-align input[type="radio"] {
   display: none;
}
.stylesheet-contents .radio-text-align .icon {
   width: 20px;
   height: 20px;
   /* fill: var(--linecolor1); */
}
.stylesheet-contents .radio-text-align input[type="radio"]:checked + .icon {
   fill: var(--color1); 
}
.stylesheet-contents .radio-text-align svg {
   border: 1px solid var(--linecolor1);
   padding: 0px;
   width: 300px;
   height: 100px;
   background-color: var(--bgcolor1);
}


.stylesheet-contents .input-group-color {
   display: flex;
   align-items: center;
}
.stylesheet-contents .input-group-color button {
   border: 1px solid #ccc;
   border-radius: 4px 0 0 4px;
   padding: 0;
   background: var(--color1);
   cursor: pointer;
}
.stylesheet-contents .input-group-color input[type="color"] {
   border: 1px solid #ccc;
   border-radius: 0 4px 4px 0;
   padding: 0;
   margin: 0;
}
.stylesheet-contents .input-group-color button svg {
   width: 16px;
   height: 16px;
}


/* For Background:Gradient */
.stylesheet-contents #gradientBox{
   padding:9px;
   margin-right:1px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
   cursor: pointer;
   /* background: radial-gradient(circle, #8f14e1 0%, #e31616 22.244274809160306%, #09fbb3 88.86259541984732%, #07eef2 100%); */
}
.stylesheet-contents #gradientEditor{
   border: 1px solid var(--linecolor1);
   padding: 5px;
   margin: 5px;
   height: 130px;
   border-radius: 3px;
}
.stylesheet-contents #gradientEditor #gradContainer {
   display: flex;
   align-items: first baseline;
   height: 24px;
   margin-top: 15px;
   cursor: pointer !important;
}
.stylesheet-contents #gradientEditor .gradient-control {
   position: relative;
   width: 97%;
   height: 16px;
   background: #f0f0f0;
   border: 1px solid var(--linecolor1);
   border-radius: 3px;
   cursor: pointer;
}

.stylesheet-contents #gradientEditor .color-stop {
   position: absolute;
   top: -3px;
   cursor: pointer;
   width: 8px;
   height: 20px;
   background: black;
   border: 1px solid var(--color1);
   box-shadow: 0px 0px 3px var(--linecolor1);
   cursor: pointer;
   border-radius: 4px;
}

.stylesheet-contents #gradientEditor .color-stop input[type="color"] {
   display: none;
}

/* .stylesheet-contents #gradientEditor #angleInput {
   display: none;
   width: 50px;
} */

.stylesheet-contents #clrPicker{
   width: -webkit-fill-available;
   cursor: pointer;
}


@media (min-width: 1200px) {
   #gradientBox{
      background-color: yellow;
   }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
   #gradientBox{
      background-color: green;
   }
}






/* .color-stop {
   position: relative;
   width: 20px; 
   height: 20px; 
   border-radius: 50%; 
 }
 
 .color-stop::before {
   content: '';
   position: absolute;
   top: -8px;
   left: 50%;
   transform: translateX(-50%);
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 5px solid black; 
 }
 
  */
