:root {
      --color-1: rgba(111, 168, 66, 1);
      --color-1-hover: rgba(91, 148, 46, 1);

      --color-1: black;
      --color-1-hover: rgba(0,0,0,0.7);

      --color-2: #06b6d4;
      --color-2-hover: #0891b2;
      --text-color: #312e81;
      --status-btn-bg: #f8fafc;
      --status-btn-bg-hover: #f1f5f9;
    }

    .container {
      margin: 3rem auto;
      max-width: 500px;
      background: white;
      border-radius: 1rem;
      padding: 2rem;
    }

    .form-input {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: .5rem;
        box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .1);
        padding: 1rem;
        box-sizing: border-box;
        color: var(--text-color);
        transition: ease-in-out .3s all;
    }

    .form-input::placeholder {
        color: #cbd5e1;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--color-1);
    }

    .btn:focus-within,
    .form-input:focus-within {
      box-shadow: #f8fafc 0px 0px 0px 2px, #c7d2fe 0px 0px 0px 6px, #0000 0px 1px 2px 0px;
    }

    textarea.form-input {
      min-height: 150px;
    }

    .btn {
      border: 0;
      background: var(--color-1);
      padding: 1rem;
      border-radius: 25px;
      color: white;
      cursor: pointer;
    }

    .btn[disabled] {
      opacity: .2;
      pointer-events: none;
    }

    .btn:hover {
      background: var(--color-1-hover);
      transition: ease-in-out .3s all;
    }
    
    @media (hover: none) {
        .btn:hover {
          background: var(--color-1);
          color: white;
        }
    }

    .btn-submit {
      background-color: rgba(69, 74, 203, 1);
    }

    .btn-submit:hover {
      background-color: rgba(49, 54, 183, 1);
    }

    .pagination {
      margin-top: 1.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pagination .btn {
      width: 100%;
      text-align: center;
      margin: 0 6px;
      margin-top: 1rem;
    }

    .tab-status {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .tab-status span {
      appearance: none;
      background: var(--status-btn-bg);
      border: none;
      border-radius: 50%;
      width: 1.5rem;
      height: 1.5rem;
      margin-right: .26rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      margin-bottom: 0.4rem;
    }

    .tab-status span.active {
      background-color: gray;
      color: white;
    }

    .hidden {
      display: none;
    }
    
    .bfh-colorpicker-toggle .bfh-colorpicker-icon {
        width: 50px!important;
        height: 50px!important;
    }
    
 input[type="radio"]  {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  height: 25px; /* or whatever */
  width: 25px; /* or whatever */
  border: 1px solid #999; /* or whatever */
  border-radius: 50%; /* make it round */
  transition: 0.2s all linear; /* just to make it change smoothly */
  vertical-align: bottom;
  margin-top: 7px;
}

input[type="radio"]:checked {
  border: 10px solid black; /* make it change visually when checked */
}

#tp15 p {
    margin-bottom: 6px!important;
}

#tp15 select, #tp15 input, #tp15 textarea {
    margin-bottom: 23px!important;
}