@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html, body { 
    box-sizing: border-box;
    width: 100%; 
    height: auto; 
    margin: 0; 
    padding: 0;
}

body {
  background : #f1f1f1;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  z-index: 0;
  margin: 0;
  -webkit-font-smoothing: subpixel-antialiased;
}

abbr {
  font-size: 0.85rem;
  text-decoration: none;
}

#container{
  width: 100%;
  height: auto;  
  z-index: 1;   
}

#header { 
    position: fixed; 
    width: 100%; 
    height: 30px; 
    top: 0; 
    background: #222; 
    box-shadow: 2px 2px 6px #111;
    z-index: 6;
    color: #f1f1f1; 
}

#header span { 
    position: relative;
    display: inline-block; 
    margin: auto; 
    margin-top: 5px; 
}

#menu_bar {
    position: fixed; 
    display: block;
    top: 0; 
    width: 150px;
    height: 100vh;
  /*background: #444; */
    background: #23282d;
    z-index: 5;
    box-shadow: 2px 0px 6px #000; 
    
}

#menu_bar.minimized {
    width: 45px;
}

#menu_bar.minimized ul ul { 
  left: 45px;   
}

#search {
  float: right;
  padding-top: 2px;
  padding-right: 5px;
  z-index: 10;
}

#search input {
  color: #888;
}

section { 
    display: block; 
    position: relative;
    margin-left: 150px;
    /* margin-top: 30px;  */
    padding-top: 30px; 
    box-sizing: border-box;
}

#content_block{
  margin: auto;
  width: 100%;  
}

#content_block h1 { 
  font-size: 1.7rem; 
  margin: 0; 
  padding: 10px 35px;
  color: #0073aa;
}

#ace_editor_wrap {
    position: relative; 
    top: 0; 
    width: 100%; 
    height: calc(100vh - 30px); 
}

#ace_editor {
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#form {
  width: 100%;
  padding: 30px;
}

form {
  padding: 4px; 
}

#bottom {
  display: none; 
  width: 100%;
  height: auto;
  clear : both;
  color : #eee;
  background: #ddd;
  text-align: center;
  padding: 20px 0px;
  border: 0px solid green;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  letter-spacing: -1px;
}

h3,h4,h5,h6 {
  color: #185360;
}

a, a:visited, a:active, a:focus, a:link {
color: #f70; 
}

a:hover{
color: #ffcc00; /* #3F7DE3; */
}

img {
padding: 0px;
border: solid 0px #e1e1e1;
float: left;
}


#css_selector {
position: absolute;
top: 10px;
left: 10px;
border: solid 1px black;
padding: 10px;
background: white;
}


table.list  {
  box-sizing: border-box;
  position: relative;
  display: table; 
  width: 100%; 
  margin: auto;  
  border-collapse: collapse;
  background: #fff; 
  border: 0; 
  /* margin-bottom: 100px; */
}

table.list:last-child {
  margin-bottom: 100px;
}

table.list, table.list td, table.list th {    
    /*border: solid 1px #ccccff;*/
}

table.list > tbody > :nth-child(odd) {
    background-color: #f7f7f9;
}

table.list a {
  text-decoration: none;
  color: #0073aa;
}

table.list td , table.list th {
  padding: 9px 5px;
  /* white-space:nowrap; */
  border-bottom: 1px solid #e1e1e1;
}

table.list tr {
    display: table-row; 
}

table.list tr:hover td {
  background: #f1f1f1; 
}

table.list tr:first-child th {
  background: #f1f1f1;
  border-top: solid 1px #00b9eb;
  border-bottom:solid 1px #00b9eb;
  color: #336;  
}

table.list tr td:first-child {
  text-align: center;
}

table.list div.image-list-container {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* table.list figure:has(img:not(.icon)) { */
table.list figure:has(img.item_image) {
  /* display: inline-block; */
  width: 125px;
  height: 120px;
  border: solid 2px #fff;
  /* margin: 5px; */
  margin: 0;
  border-radius: 5px;  
  overflow: hidden;  
  cursor: grab;
}

/* Placeholder for re allocating pictures */
table.list figure.placeholder {
  border: 2px dashed #aaa;
  background: #e0e0e0;
  margin: 0; 
  width: 123px;
  height: 118px;
  border-radius: 5px;
}

/* table.list img:not(.icon) */
table.list img.item_image
{
  /* max-width: 125px;  */
  /* max-height: 100px; */
  display: block;
  width: 125px;
  height: 100px;      
  object-fit: cover;
}

.modalbg {
  position: fixed; 
  z-index: 10000000000000;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  width: 100%; 
  height: 100vh;
  background: rgba(0,0,0,0.5);
}

.item_image_large {
  position: fixed; 
  z-index: 10000000000000;
  top: 10vh;
  left: 50%; 
  transform: translate(-50%, 0);
  width: auto; 
  max-width: 90%;   
  height: auto; 
  max-height: 80vh;  
  border: solid 8px #fff;
  margin: 4px;
  border-radius: 15px;
  object-fit: cover;
}

table.list input {
  padding: 6px 15px;
  border-radius: 5px;
}

table.list input[type="text"] {
  width:60%; 
  max-width: 400px; 
}



  .image-file-upload-container {

    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    border: 2px dashed #555;
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
  }
  
  .image-file-upload-container:hover,
  .image-file-upload-container.drag-active {
    background: #eee;
    border-color: #111;
  }
  
  .image-file-upload-container:hover .image-file-upload-title,
  .image-file-upload-container.drag-active .image-file-upload-title {
    color: #222;
  }
  
  .image-file-upload-title {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
  }
  
  input[type=file] {
    width: 350px;
    max-width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #555;
  }
  
  input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #084cdf;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
  }
  
  input[type=file]::file-selector-button:hover {
    background: #0d45a5;
  }  



table.list select {
    padding: 6px 15px; 
}

.related-item {
    padding-top: 10px; 
}

.related-box {
    display: inline-block;
    padding: 5px 15px;
    margin: 5px; 
    background: #dedede;
    border-radius: 5px; 
}
.related-box a {
    color: #000; 
    font-weight: 600; 
    margin-left: 10px; 
}

.related-add {
    padding: 5px; 
    margin-left: 10px; 
    border: solid 1px #555; 
    border-radius: 3px; 
}

#editable {
  width: 400px; 
}

.list input[type='submit'] {
  padding: 11px 20px;  
  border: 0;
  background-color: #246; 
  color: #fff;
  cursor: pointer;
}

.list input[type='submit']:hover {
  background-color: #298eb6;
}


#finder input {
  padding: 6px 15px;
  width: 80%;   
  border-radius: 5px;
}

#finder input[type='submit'] {
  background: #ddd url(search.png);
  width: 31px; 
  height: 31px; 
  border: 0;
  cursor: pointer;
  position: relative;
  top: 5px;
  margin-left: 2px;
}

#finder input[type='submit']:hover {
  background-color: #eee;
}

.catalog-nav {
  border: solid 0px red;
  width: 100%; 
  text-align: right; 
  height: 35px; 
}

.catalog-nav a, .catalog-nav b {
  border: solid 1px #ddd;
  padding: 2px 8px;
  text-decoration: none; 
  margin: 0px 3px;
}

#new_mail {
  /*width: 874px;*/
  /*width: 100%; */
  padding: 25px;
  background: #f5f5f5;
  border-bottom: solid 1px #ccccff;
  color: #444;
}

#message {
  position: absolute;
  display: none; 
  width: 100%; 
  max-width: 500px;
  height: auto;
  max-height: 80vh;
  margin: auto; 
  top: 10vh;
  left: 50%; 
  margin-left: -250px;
  /* transform: translate(-50%, -90%); */
  /* text-align: center;   */
  /* top: 50%;
  left: 50%; 
  transform: translate(-50%, -90%); */ 
  /*top: 100px;*/
  /*left: 50%;*/
  /* background: #3498db;
  border: solid 1px #2980b9; */
  background: #fff; 
  border: solid 2px #3498db;
  padding: 25px 35px;  
  border-radius: 10px; 

  color: #3498db;
  font-size: 1.2rem;
  /* font-weight: 400;  */
  z-index: 1000000;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
   
  /* margin: auto;
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;  */
}

#loginWrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;  
  width: 400px;  
  height: 320px;
  background: #eee;
  border: solid 1px #444;
  border-radius: 2px;
  box-shadow: 2px 2px 6px #222;
  padding: 0!important;
}

#loginTitle {
  width: 100%; 
  padding: 8px 0px;
  text-align: center;
  background: #246; 
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

#loginContent {
    position: relative; 
    margin: 20px;
}

#formLogin{
    background: #fff;  
    padding: 20px 25px;    
    font-size: 14px; 
}

#loginContent input {
    padding: 4px 15px;
    font-size: 16px; 
}

#loginContent input[type='submit'] {
    padding: 8px 30px; 
    background: #246;  
    border-radius: 2px;   
    font-size: 15px;  
    border: 0;
}

#loginContent input[type='submit']:hover {
    background: #00b9eb;
    cursor: pointer; 
}

.info, .success, .alert, .error {
       font-family:Arial, Helvetica, sans-serif;
       font-size:13px;
       border: 1px solid;
       margin: 10px 0px;
       padding:15px 10px 15px 50px;
       background-repeat: no-repeat;
       background-position: 10px center;
       position:relative;
}
.info {
       color: #00529B;
       background-color: #BDE5F8;
       background-image: url('info.png');
}
.success {
       color: #4F8A10;
       background-color: #DFF2BF;
       background-image:url('success.png');
}
.alert {
       color: #9F6000;
       background-color: #FEEFB3;
       background-image: url('alert.png');
}
.error {
       color: #D8000C;
       background-color: #FFBABA;
       background-image: url('error.png');
}

#front_menu {
  width: 90%; 
  margin: auto;
  padding-top: 25px; 
  /*margin-top: 25px; */
}

.menu_item {
        text-decoration: none;        
}

.menu_item div{
  width: 100px;
  height: 100px;
  float: left;
  background: #fff;
  border: solid 2px #f5f5f5;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  padding: 10px;
  margin: 10px;
  text-align: center;
  font-size: 0.73rem;
  font-weight: 600; 
  border-radius: 2px;
  color: #445;
}

.menu_item img {
  width: 70px;
  height: 70px;
  margin-left: 15px;
  margin-bottom: 5px;
  border: solid 0px red;
}


.menu_item div:hover {
  border: solid 2px #0073aa;
}

.formArticle {
  border: solid 0px #000;
  float: left;
  margin-left: 10px!important;
}

.formArticle input {      
  padding: 3px 5px;
}

.formArticle td {
}

.formArticle select {
  width: 140px;
  padding: 3px 5px;
}

.formArticle textarea {
}

.formSectionXXX {
  background: #fafaff;
  border: solid 1px #eee;
  margin: 0px;
  padding: 10px;
}

#formMeta { display: none; }


.admin-slide {
  width: 500px;
  margin: 25px; 
  overflow: hidden;
}

.admin-slide a {
  float: right;
  text-decoration: none;
}
.admin-slide-img {
  max-width: 100%; 
  height: auto;
  clear: both; 
}

/* .admin-images {
  float: left;
  width: 200px;
  height: 150px;
  margin: 5px;
  border: solid 1px #eee;
  overflow: hidden;
} */

.admin-images a {
  float: right;  
}

.admin-images-img {
  max-width: 90%; 
  width: auto;
  height: 80%; 
  margin: auto;
  overflow: hidden;
  margin-top: 3px;
}

.admin-images-img img{
  max-width: 100%; 
  width: auto;
  height: auto; 
}

figure.admin-gallery-item {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 200px;
  height: 180px;
  margin: 6px;
  overflow: hidden;
  border: solid 4px #fff;
  background: #fcfcfc;
  border-radius: 5px; 
  cursor: pointer;
}

figure.admin-gallery-item > img {
  position: relative;
  /* max-width: 200px; */
  max-height: 160px;
  width: auto; 
  height: auto; 
  object-fit: cover;
  margin: auto; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  overflow: hidden;
}

figure.admin-gallery-item label {
  position: absolute;
  bottom: 0;
  left: 5px; 
}

.icon {
  width: 20px; 
  height: 20px;
  margin-right: 5px;
}

.button {
  background: #58cef9;
  border: solid 1px #298eb6;
  color: #fff!important;
  border-radius: 5px; 
  padding: 5px 15px; 
  margin: 15px;
}
.button:hover {
  background: #298EB6;
}

#edit-block-background {
  display: none;
}

#edit-block-wrapper {
    box-sizing: border-box;
    position: absolute;
    max-width: 97%;        
    padding: 20px;
    background: #fff; 
    border-radius: 10px;
    height: auto; 
    max-height: 96vh; 
    /*overflow: hidden; */
    z-index: 10001;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
}

#edit-block {

    height: 92%; 
    max-height: inherit;
}

#edit-block input[type="submit"] {
    position: absolute; 
    top: 0; 
    right: 30px; 
}

#edit-block th {
    width: 70px; 
}

.cover {
  /*pick-image-background {*/
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(transparent.png); 
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;  
  z-index: 9000;
}

.pick-image-wrapper {

  max-width: 920px;
  margin: auto;
  /* margin-top: 50px; */
  padding: 20px;
  background: #fff; 
  border-radius: 10px;
  height: auto; 
  max-height: 95vh; 
  overflow: hidden; 

  z-index: 1000000000000000000000000;
}

.pick-image-close {
  width: 20px;
  height: 20px;
  background: url(/webpage/admin/images/delete.png);
  background-size: 100%; 
  color: #f00;
  border-radius: 5px;
  display: block;
  margin-bottom: 10px; 
  float: right;
}

.pick-image-close:hover {
  cursor: pointer;
}

.pick-image-container {
  width: 100%; 
  height: 50%;
  max-height: 70vh; 
  /*overflow: hidden;*/
  overflow-y: scroll; 
}

.pick-image-element {  /* RECUADRO DE IMAGEN */
  float: left; 
  width: 180px;
  height: 180px;
  padding: 10px;
  border: solid 1px #ddd;
  margin: 10px;
  box-shadow: 3px 3px 7px #aaa; 
}

.pick-image-element:hover {
  background: #f5f5f5;
}

.pick-image-image-wrapper {
  width: 180px;
  height: 150px; 
  border: 0;
  padding: 0;
}

.pick-image-image {
  max-width: 180px; 
  height: auto; 
  max-height: 150px;
  margin: auto;
  display: block;
}

.cke_textarea_inline {
  border: solid 1px #ccc;  
  padding: 5px 15px;
}

.clr, .c {
  clear: both;
}

.thumb_img {
  max-height: 80px!important;
  width: auto!important;
}

.list-options {
  width: 100px;
}


.inline_frame {
  position: absolute;
  left: 0; 
  border: 0;  
  padding: 0;
  width: 100%;
  height: 100%;  
  overflow: hidden;
}

@media only screen and (min-width: 950px) {

  ::-webkit-scrollbar {
      width: 10px; 
      height: 10px; 
  }
  
  ::-webkit-scrollbar-button {
      /* //   background-color: @color1; */
  } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
  
  ::-webkit-scrollbar-track {
       background-color: #ddd;
       border-radius: 5px; 
       margin: 5px; 
  } /* the new scrollbar will have a flat appearance with the set background color */
  
  ::-webkit-scrollbar-track-piece {
      
  } 
   
  ::-webkit-scrollbar-thumb {
        background-color: #0073aa; 
        border-radius: 3px;
  } /* this will style the thumb, ignoring the track */
   
  ::-webkit-scrollbar-corner {
        background-color: #ddd;
  } /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

}

#menu_btn {
  float: right; 
  padding: 5px; 
  border: solid 1px #888;
  margin: 3px 25px; 
}

#logo {
  width: 160px; 
  height: 27px; 
  margin: 5px 20px; 
}

@media only screen and (max-width: 950px) {

  #title {
    display: none;  
  }

  #logo {
    width: 120px; 
    height: 20px;
    margin: 5px 8px; 
  }

  #header span {
    display: none;
  }

}

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");


.nice-form-group {
    --nf-input-size: 1rem;
    --nf-input-font-size: calc(var(--nf-input-size)*0.875);
    --nf-small-font-size: calc(var(--nf-input-size)*0.875);
    --nf-input-font-family: inherit;
    --nf-label-font-family: inherit;
    --nf-input-color: #20242f;
    --nf-input-border-radius: 0.25rem;
    --nf-input-placeholder-color: #929292;
    --nf-input-border-color: #c0c4c9;
    --nf-input-border-width: 1px;
    --nf-input-border-style: solid;
    --nf-input-border-bottom-width: 2px;
    --nf-input-focus-border-color: #3b4ce2;
    --nf-input-background-color: #f9fafb;
    --nf-invalid-input-border-color: var(--nf-input-border-color);
    --nf-invalid-input-background-color: var(--nf-input-background-color);
    --nf-invalid-input-color: var(--nf-input-color);
    --nf-valid-input-border-color: var(--nf-input-border-color);
    --nf-valid-input-background-color: var(--nf-input-background-color);
    --nf-valid-input-color: inherit;
    --nf-invalid-input-border-bottom-color: red;
    --nf-valid-input-border-bottom-color: green;
    --nf-label-font-size: var(--nf-small-font-size);
    --nf-label-color: #374151;
    --nf-label-font-weight: 500;
    --nf-slider-track-background: #dfdfdf;
    --nf-slider-track-height: 0.25rem;
    --nf-slider-thumb-size: calc(var(--nf-slider-track-height)*4);
    --nf-slider-track-border-radius: var(--nf-slider-track-height);
    --nf-slider-thumb-border-width: 2px;
    --nf-slider-thumb-border-focus-width: 1px;
    --nf-slider-thumb-border-color: #fff;
    --nf-slider-thumb-background: var(--nf-input-focus-border-color);
    display: block;
    margin-top: calc(var(--nf-input-size)*1.5);
    line-height: 1;
    white-space: nowrap;
    --switch-orb-size: var(--nf-input-size);
    --switch-orb-offset: calc(var(--nf-input-border-width)*2);
    --switch-width: calc(var(--nf-input-size)*2.5);
    --switch-height: calc(var(--nf-input-size)*1.25 + var(--switch-orb-offset))
}

.nice-form-group>label {
    font-weight: var(--nf-label-font-weight);
    display: block;
    color: var(--nf-label-color);
    font-size: var(--nf-label-font-size);
    font-family: var(--nf-label-font-family);
    margin-bottom: calc(var(--nf-input-size)/2);
    white-space: normal
}

.nice-form-group>label+small {
    font-style: normal
}

.nice-form-group small {
    font-family: var(--nf-input-font-family);
    display: block;
    font-weight: 400;
    opacity: .75;
    font-size: var(--nf-small-font-size);
    margin-bottom: calc(var(--nf-input-size)*0.75)
}

.nice-form-group small:last-child {
    margin-bottom: 0
}

.nice-form-group>legend {
    font-weight: var(--nf-label-font-weight);
    display: block;
    color: var(--nf-label-color);
    font-size: var(--nf-label-font-size);
    font-family: var(--nf-label-font-family);
    margin-bottom: calc(var(--nf-input-size)/5)
}

.nice-form-group>.nice-form-group {
    margin-top: calc(var(--nf-input-size)/2)
}

.nice-form-group>input[type=checkbox],
.nice-form-group>input[type=date],
.nice-form-group>input[type=email],
.nice-form-group>input[type=month],
.nice-form-group>input[type=number],
.nice-form-group>input[type=password],
.nice-form-group>input[type=radio],
.nice-form-group>input[type=search],
.nice-form-group>input[type=tel],
.nice-form-group>input[type=text],
.nice-form-group>input[type=time],
.nice-form-group>input[type=url],
.nice-form-group>input[type=week],
.nice-form-group>select,
.nice-form-group>textarea {
    background: var(--nf-input-background-color);
    font-family: inherit;
    font-size: var(--nf-input-font-size);
    border-bottom-width: var(--nf-input-border-width);
    font-family: var(--nf-input-font-family);
    box-shadow: none;
    border-radius: var(--nf-input-border-radius);
    border: var(--nf-input-border-width) var(--nf-input-border-style) var(--nf-input-border-color);
    border-bottom: var(--nf-input-border-bottom-width) var(--nf-input-border-style) var(--nf-input-border-color);
    color: var(--nf-input-color);
    width: 100%;
    padding: calc(var(--nf-input-size)*0.75);
    height: calc(var(--nf-input-size)*2.75);
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all .15s ease-out;
    --icon-padding: calc(var(--nf-input-size)*2.25);
    --icon-background-offset: calc(var(--nf-input-size)*0.75)
}

.nice-form-group>input[type=checkbox]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=date]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=email]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=month]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=number]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=password]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=radio]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=search]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=tel]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=text]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=time]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=url]:required:not(:placeholder-shown):invalid,
.nice-form-group>input[type=week]:required:not(:placeholder-shown):invalid,
.nice-form-group>select:required:not(:placeholder-shown):invalid,
.nice-form-group>textarea:required:not(:placeholder-shown):invalid {
    background-color: var(--nf-invalid-input-background-color);
    border-bottom-color: var(--nf-valid-input-border-color);
    border-color: var(--nf-valid-input-border-color) var(--nf-valid-input-border-color) var(--nf-invalid-input-border-bottom-color);
    color: var(--nf-invalid-input-color)
}

.nice-form-group>input[type=checkbox]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=date]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=email]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=month]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=number]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=password]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=radio]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=search]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=tel]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=text]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=time]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=url]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>input[type=week]:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>select:required:not(:placeholder-shown):invalid:focus,
.nice-form-group>textarea:required:not(:placeholder-shown):invalid:focus {
    background-color: var(--nf-input-background-color);
    border-color: var(--nf-input-border-color);
    color: var(--nf-input-color)
}

.nice-form-group>input[type=checkbox]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=date]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=email]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=month]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=number]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=password]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=radio]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=search]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=tel]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=text]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=time]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=url]:required:not(:placeholder-shown):valid,
.nice-form-group>input[type=week]:required:not(:placeholder-shown):valid,
.nice-form-group>select:required:not(:placeholder-shown):valid,
.nice-form-group>textarea:required:not(:placeholder-shown):valid {
    background-color: var(--nf-valid-input-background-color);
    border-bottom-color: var(--nf-valid-input-border-color);
    border-color: var(--nf-valid-input-border-color) var(--nf-valid-input-border-color) var(--nf-valid-input-border-bottom-color);
    color: var(--nf-valid-input-color)
}

.nice-form-group>input[type=checkbox]:disabled,
.nice-form-group>input[type=date]:disabled,
.nice-form-group>input[type=email]:disabled,
.nice-form-group>input[type=month]:disabled,
.nice-form-group>input[type=number]:disabled,
.nice-form-group>input[type=password]:disabled,
.nice-form-group>input[type=radio]:disabled,
.nice-form-group>input[type=search]:disabled,
.nice-form-group>input[type=tel]:disabled,
.nice-form-group>input[type=text]:disabled,
.nice-form-group>input[type=time]:disabled,
.nice-form-group>input[type=url]:disabled,
.nice-form-group>input[type=week]:disabled,
.nice-form-group>select:disabled,
.nice-form-group>textarea:disabled {
    cursor: not-allowed;
    opacity: .75
}

.nice-form-group>input[type=checkbox]::-webkit-input-placeholder,
.nice-form-group>input[type=date]::-webkit-input-placeholder,
.nice-form-group>input[type=email]::-webkit-input-placeholder,
.nice-form-group>input[type=month]::-webkit-input-placeholder,
.nice-form-group>input[type=number]::-webkit-input-placeholder,
.nice-form-group>input[type=password]::-webkit-input-placeholder,
.nice-form-group>input[type=radio]::-webkit-input-placeholder,
.nice-form-group>input[type=search]::-webkit-input-placeholder,
.nice-form-group>input[type=tel]::-webkit-input-placeholder,
.nice-form-group>input[type=text]::-webkit-input-placeholder,
.nice-form-group>input[type=time]::-webkit-input-placeholder,
.nice-form-group>input[type=url]::-webkit-input-placeholder,
.nice-form-group>input[type=week]::-webkit-input-placeholder,
.nice-form-group>select::-webkit-input-placeholder,
.nice-form-group>textarea::-webkit-input-placeholder {
    color: var(--nf-input-placeholder-color);
    letter-spacing: 0
}

.nice-form-group>input[type=checkbox]:-ms-input-placeholder,
.nice-form-group>input[type=date]:-ms-input-placeholder,
.nice-form-group>input[type=email]:-ms-input-placeholder,
.nice-form-group>input[type=month]:-ms-input-placeholder,
.nice-form-group>input[type=number]:-ms-input-placeholder,
.nice-form-group>input[type=password]:-ms-input-placeholder,
.nice-form-group>input[type=radio]:-ms-input-placeholder,
.nice-form-group>input[type=search]:-ms-input-placeholder,
.nice-form-group>input[type=tel]:-ms-input-placeholder,
.nice-form-group>input[type=text]:-ms-input-placeholder,
.nice-form-group>input[type=time]:-ms-input-placeholder,
.nice-form-group>input[type=url]:-ms-input-placeholder,
.nice-form-group>input[type=week]:-ms-input-placeholder,
.nice-form-group>select:-ms-input-placeholder,
.nice-form-group>textarea:-ms-input-placeholder {
    color: var(--nf-input-placeholder-color);
    letter-spacing: 0
}

.nice-form-group>input[type=checkbox]:-moz-placeholder,
.nice-form-group>input[type=checkbox]::-moz-placeholder,
.nice-form-group>input[type=date]:-moz-placeholder,
.nice-form-group>input[type=date]::-moz-placeholder,
.nice-form-group>input[type=email]:-moz-placeholder,
.nice-form-group>input[type=email]::-moz-placeholder,
.nice-form-group>input[type=month]:-moz-placeholder,
.nice-form-group>input[type=month]::-moz-placeholder,
.nice-form-group>input[type=number]:-moz-placeholder,
.nice-form-group>input[type=number]::-moz-placeholder,
.nice-form-group>input[type=password]:-moz-placeholder,
.nice-form-group>input[type=password]::-moz-placeholder,
.nice-form-group>input[type=radio]:-moz-placeholder,
.nice-form-group>input[type=radio]::-moz-placeholder,
.nice-form-group>input[type=search]:-moz-placeholder,
.nice-form-group>input[type=search]::-moz-placeholder,
.nice-form-group>input[type=tel]:-moz-placeholder,
.nice-form-group>input[type=tel]::-moz-placeholder,
.nice-form-group>input[type=text]:-moz-placeholder,
.nice-form-group>input[type=text]::-moz-placeholder,
.nice-form-group>input[type=time]:-moz-placeholder,
.nice-form-group>input[type=time]::-moz-placeholder,
.nice-form-group>input[type=url]:-moz-placeholder,
.nice-form-group>input[type=url]::-moz-placeholder,
.nice-form-group>input[type=week]:-moz-placeholder,
.nice-form-group>input[type=week]::-moz-placeholder,
.nice-form-group>select:-moz-placeholder,
.nice-form-group>select::-moz-placeholder,
.nice-form-group>textarea:-moz-placeholder,
.nice-form-group>textarea::-moz-placeholder {
    color: var(--nf-input-placeholder-color);
    letter-spacing: 0
}

.nice-form-group>input[type=checkbox]:focus,
.nice-form-group>input[type=date]:focus,
.nice-form-group>input[type=email]:focus,
.nice-form-group>input[type=month]:focus,
.nice-form-group>input[type=number]:focus,
.nice-form-group>input[type=password]:focus,
.nice-form-group>input[type=radio]:focus,
.nice-form-group>input[type=search]:focus,
.nice-form-group>input[type=tel]:focus,
.nice-form-group>input[type=text]:focus,
.nice-form-group>input[type=time]:focus,
.nice-form-group>input[type=url]:focus,
.nice-form-group>input[type=week]:focus,
.nice-form-group>select:focus,
.nice-form-group>textarea:focus {
    outline: none;
    border-color: var(--nf-input-focus-border-color)
}

.nice-form-group>input[type=checkbox]+small,
.nice-form-group>input[type=date]+small,
.nice-form-group>input[type=email]+small,
.nice-form-group>input[type=month]+small,
.nice-form-group>input[type=number]+small,
.nice-form-group>input[type=password]+small,
.nice-form-group>input[type=radio]+small,
.nice-form-group>input[type=search]+small,
.nice-form-group>input[type=tel]+small,
.nice-form-group>input[type=text]+small,
.nice-form-group>input[type=time]+small,
.nice-form-group>input[type=url]+small,
.nice-form-group>input[type=week]+small,
.nice-form-group>select+small,
.nice-form-group>textarea+small {
    margin-top: .5rem
}

.nice-form-group>input[type=checkbox].icon-left,
.nice-form-group>input[type=date].icon-left,
.nice-form-group>input[type=email].icon-left,
.nice-form-group>input[type=month].icon-left,
.nice-form-group>input[type=number].icon-left,
.nice-form-group>input[type=password].icon-left,
.nice-form-group>input[type=radio].icon-left,
.nice-form-group>input[type=search].icon-left,
.nice-form-group>input[type=tel].icon-left,
.nice-form-group>input[type=text].icon-left,
.nice-form-group>input[type=time].icon-left,
.nice-form-group>input[type=url].icon-left,
.nice-form-group>input[type=week].icon-left,
.nice-form-group>select.icon-left,
.nice-form-group>textarea.icon-left {
    background-position: left var(--icon-background-offset) bottom 50%;
    padding-left: var(--icon-padding);
    background-size: var(--nf-input-size)
}

.nice-form-group>input[type=checkbox].icon-right,
.nice-form-group>input[type=date].icon-right,
.nice-form-group>input[type=email].icon-right,
.nice-form-group>input[type=month].icon-right,
.nice-form-group>input[type=number].icon-right,
.nice-form-group>input[type=password].icon-right,
.nice-form-group>input[type=radio].icon-right,
.nice-form-group>input[type=search].icon-right,
.nice-form-group>input[type=tel].icon-right,
.nice-form-group>input[type=text].icon-right,
.nice-form-group>input[type=time].icon-right,
.nice-form-group>input[type=url].icon-right,
.nice-form-group>input[type=week].icon-right,
.nice-form-group>select.icon-right,
.nice-form-group>textarea.icon-right {
    background-position: right var(--icon-background-offset) bottom 50%;
    padding-right: var(--icon-padding);
    background-size: var(--nf-input-size)
}

.nice-form-group>input[type=checkbox]:-webkit-autofill,
.nice-form-group>input[type=date]:-webkit-autofill,
.nice-form-group>input[type=email]:-webkit-autofill,
.nice-form-group>input[type=month]:-webkit-autofill,
.nice-form-group>input[type=number]:-webkit-autofill,
.nice-form-group>input[type=password]:-webkit-autofill,
.nice-form-group>input[type=radio]:-webkit-autofill,
.nice-form-group>input[type=search]:-webkit-autofill,
.nice-form-group>input[type=tel]:-webkit-autofill,
.nice-form-group>input[type=text]:-webkit-autofill,
.nice-form-group>input[type=time]:-webkit-autofill,
.nice-form-group>input[type=url]:-webkit-autofill,
.nice-form-group>input[type=week]:-webkit-autofill,
.nice-form-group>select:-webkit-autofill,
.nice-form-group>textarea:-webkit-autofill {
    padding: calc(var(--nf-input-size)*0.75) !important
}

.nice-form-group>input[type=search]:placeholder-shown {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-position: left calc(var(--nf-input-size)*0.75) bottom 50%;
    padding-left: calc(var(--nf-input-size)*2.25);
    background-size: var(--nf-input-size);
    background-repeat: no-repeat
}

.nice-form-group>input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: var(--nf-input-size);
    height: var(--nf-input-size);
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E")
}

.nice-form-group>input[type=search]:focus {
    padding-left: calc(var(--nf-input-size)*0.75);
    background-position: left calc(var(--nf-input-size)*-1) bottom 50%
}

.nice-form-group>input[type=email][class^=icon] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-at-sign'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94'/%3E%3C/svg%3E");
    background-repeat: no-repeat
}

.nice-form-group>input[type=tel][class^=icon] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
    background-repeat: no-repeat
}

.nice-form-group>input[type=url][class^=icon] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-link'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-repeat: no-repeat
}

.nice-form-group>input[type=password] {
    letter-spacing: 2px
}

.nice-form-group>input[type=password][class^=icon] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-lock'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat
}

.nice-form-group>input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    cursor: pointer
}

.nice-form-group>input[type=range]:focus {
    outline: none
}

.nice-form-group>input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--nf-slider-track-height);
    background: var(--nf-slider-track-background);
    border-radius: var(--nf-slider-track-border-radius)
}

.nice-form-group>input[type=range]::-moz-range-track {
    width: 100%;
    height: var(--nf-slider-track-height);
    background: var(--nf-slider-track-background);
    border-radius: var(--nf-slider-track-border-radius)
}

.nice-form-group>input[type=range]::-webkit-slider-thumb {
    height: var(--nf-slider-thumb-size);
    width: var(--nf-slider-thumb-size);
    border-radius: var(--nf-slider-thumb-size);
    background: var(--nf-slider-thumb-background);
    border: 0;
    border: var(--nf-slider-thumb-border-width) solid var(--nf-slider-thumb-border-color);
    -webkit-appearance: none;
    appearance: none;
    margin-top: calc(var(--nf-slider-track-height)*0.5 - var(--nf-slider-thumb-size)*0.5)
}

.nice-form-group>input[type=range]::-moz-range-thumb {
    height: var(--nf-slider-thumb-size);
    width: var(--nf-slider-thumb-size);
    border-radius: var(--nf-slider-thumb-size);
    background: var(--nf-slider-thumb-background);
    border: 0;
    border: var(--nf-slider-thumb-border-width) solid var(--nf-slider-thumb-border-color);
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box
}

.nice-form-group>input[type=range]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 var(--nf-slider-thumb-border-focus-width) var(--nf-slider-thumb-background)
}

.nice-form-group>input[type=range]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 var(--nf-slider-thumb-border-focus-width) var(--nf-slider-thumb-background)
}

.nice-form-group>input[type=color] {
    border: var(--nf-input-border-width) solid var(--nf-input-border-color);
    border-bottom-width: var(--nf-input-border-bottom-width);
    height: calc(var(--nf-input-size)*2);
    border-radius: var(--nf-input-border-radius);
    padding: calc(var(--nf-input-border-width)*2)
}

.nice-form-group>input[type=color]:focus {
    outline: none;
    border-color: var(--nf-input-focus-border-color)
}

.nice-form-group>input[type=color]::-webkit-color-swatch-wrapper {
    padding: 5%
}

.nice-form-group>input[type=color]::-moz-color-swatch {
    border-radius: calc(var(--nf-input-border-radius)/2);
    border: none
}

.nice-form-group>input[type=color]::-webkit-color-swatch {
    border-radius: calc(var(--nf-input-border-radius)/2);
    border: none
}

.nice-form-group>input[type=number] {
    width: auto
}

.nice-form-group>input[type=date],
.nice-form-group>input[type=month],
.nice-form-group>input[type=week] {
    min-width: 14em;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")
}

.nice-form-group>input[type=time] {
    min-width: 6em;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")
}

.nice-form-group>input[type=date],
.nice-form-group>input[type=month],
.nice-form-group>input[type=time],
.nice-form-group>input[type=week] {
    background-position: right calc(var(--nf-input-size)*0.75) bottom 50%;
    background-repeat: no-repeat;
    background-size: var(--nf-input-size);
    width: auto
}

.nice-form-group>input[type=date]::-webkit-calendar-picker-indicator,
.nice-form-group>input[type=date]::-webkit-inner-spin-button,
.nice-form-group>input[type=month]::-webkit-calendar-picker-indicator,
.nice-form-group>input[type=month]::-webkit-inner-spin-button,
.nice-form-group>input[type=time]::-webkit-calendar-picker-indicator,
.nice-form-group>input[type=time]::-webkit-inner-spin-button,
.nice-form-group>input[type=week]::-webkit-calendar-picker-indicator,
.nice-form-group>input[type=week]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    cursor: pointer;
    opacity: 0
}

@-moz-document url-prefix() {

    .nice-form-group>input[type=date],
    .nice-form-group>input[type=month],
    .nice-form-group>input[type=time],
    .nice-form-group>input[type=week] {
        min-width: auto;
        width: auto;
        background-image: none
    }
}

.nice-form-group>textarea {
    height: auto
}

.nice-form-group>input[type=checkbox],
.nice-form-group>input[type=radio] {
    width: var(--nf-input-size);
    height: var(--nf-input-size);
    padding: inherit;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    border-radius: calc(var(--nf-input-border-radius)/2);
    border-width: var(--nf-input-border-width);
    cursor: pointer;
    background-position: 50%
}

.nice-form-group>input[type=checkbox]:focus:not(:checked),
.nice-form-group>input[type=radio]:focus:not(:checked) {
    border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color);
    outline: none
}

.nice-form-group>input[type=checkbox]:hover,
.nice-form-group>input[type=radio]:hover {
    border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color)
}

.nice-form-group>input[type=checkbox]+label,
.nice-form-group>input[type=radio]+label {
    display: inline-block;
    margin-bottom: 0;
    padding-left: calc(var(--nf-input-size)/2.5);
    font-weight: 400;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    max-width: calc(100% - var(--nf-input-size)*2);
    line-height: normal
}

.nice-form-group>input[type=checkbox]+label>small,
.nice-form-group>input[type=radio]+label>small {
    margin-top: calc(var(--nf-input-size)/4)
}

.nice-form-group>input[type=checkbox]:checked {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50%/85%;
    background-color: var(--nf-input-focus-border-color);
    border-color: var(--nf-input-focus-border-color)
}

.nice-form-group>input[type=radio] {
    border-radius: 100%
}

.nice-form-group>input[type=radio]:checked {
    background-color: var(--nf-input-focus-border-color);
    border-color: var(--nf-input-focus-border-color);
    box-shadow: inset 0 0 0 3px #fff
}

.nice-form-group>input[type=checkbox].switch {
    width: var(--switch-width);
    height: var(--switch-height);
    border-radius: var(--switch-height);
    position: relative
}

.nice-form-group>input[type=checkbox].switch:after {
    background: var(--nf-input-border-color);
    border-radius: var(--switch-orb-size);
    height: var(--switch-orb-size);
    left: var(--switch-orb-offset);
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: var(--switch-orb-size);
    content: "";
    transition: all .2s ease-out
}

.nice-form-group>input[type=checkbox].switch+label {
    margin-top: calc(var(--switch-height)/8)
}

.nice-form-group>input[type=checkbox].switch:checked {
    background: none;
    background-position: 0 0;
    background-color: var(--nf-input-focus-border-color)
}

.nice-form-group>input[type=checkbox].switch:checked:after {
    -webkit-transform: translateY(-50%) translateX(calc(var(--switch-width)/2 - var(--switch-orb-offset)));
    transform: translateY(-50%) translateX(calc(var(--switch-width)/2 - var(--switch-orb-offset)));
    background: #fff
}

.nice-form-group>input[type=file] {
    background: rgba(0, 0, 0, .025);
    padding: var(--nf-input-size);
    display: block;
    width: 100%;
    border-radius: var(--nf-input-border-radius);
    border: 1px dashed var(--nf-input-border-color);
    outline: none;
    cursor: pointer
}

.nice-form-group>input[type=file]:focus,
.nice-form-group>input[type=file]:hover {
    border-color: var(--nf-input-focus-border-color)
}

.nice-form-group>input[type=file]::file-selector-button {
    background: var(--nf-input-focus-border-color);
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: .5rem;
    border-radius: var(--nf-input-border-radius);
    color: #fff;
    margin-right: 1rem;
    outline: none;
    font-family: var(--nf-input-font-family);
    cursor: pointer
}

.nice-form-group>input[type=file]::-webkit-file-upload-button {
    background: var(--nf-input-focus-border-color);
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    padding: .5rem;
    border-radius: var(--nf-input-border-radius);
    color: #fff;
    margin-right: 1rem;
    outline: none;
    font-family: var(--nf-input-font-family);
    cursor: pointer
}

.nice-form-group>select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right calc(var(--nf-input-size)*0.75) bottom 50%;
    background-repeat: no-repeat;
    background-size: var(--nf-input-size)
}