/* STLYE SIGNATURE TABS & INFO */

.tab-menu {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width:100%;
  }
  .tab-menu button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
  }
  
  .tab-menu button:hover {
    background-color: #ddd;
  }
  .tab-menu button.active {
    background-color: #ccc;
  }
  
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    height: 350px;
    position:relative;
    width:100%;
  }
  
  .pad_container {
        width: 100%;
        padding: 5px;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
  }

  
  .draw_signature_container canvas {
        margin: auto;
        width: 100%;
        padding:0;
        border: 1px solid #F5F5F5 !important;
  }
  
  div.pad_controls {
        display: table;
        width: 100%;
        table-layout: fixed;
        height: 40px;
        position: absolute;
        bottom:0px;
        left:0px;
  }
  
  div.pad_controls span {
        display: table-cell;
        text-align: center;
        padding:2px;
  }
  
  .tabcontent button.custom,
  .draw_signature_container button.custom {
        display: inline-block;
        background-color: #7b38d8;
        border-radius: 3px;
        border: none;
        color: #eeeeee;
        text-align: center;
        font-size: 11px;
        padding: 4px;
        width: 45px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 4px;
        height: 25px;
  }
  .tabcontent button.custom:hover,
  .draw_signature_container button.custom:hover {
        background-color:blueviolet;
  }
  
  .tabcontent input.custom,
  .draw_signature_container input.custom {
        display: inline-block;
        border-radius: 3px;
        border: none;
        color: #000000;
        text-align: center;
        font-size: 11px;
        padding: 4px;
        width: 45px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 4px;
  }
  
  .tabcontent select.custom,
  .draw_signature_container select.custom {
        display: inline-block;
        color: #000000;
        text-align: center;
        font-size: 11px;
        padding: 2px;
        width: 40px;
        height: 25px;
        cursor: pointer;
        margin: 2px;
  }

  .draw_signature_container select.custom  {
      background: none !important;
  }
  
  .type-signaturebox {
        border: 1px solid lightgray;
        overflow: auto;
        outline: none;
        width:100%;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        resize: none; /*remove the resize handle on the bottom right*/
        background-color: transparent;
        padding: 5px;
        font-family:"Times New Roman", Times, serif;  
        font-size: 30px;  
        border-radius: 10px; 
        -ms-overflow-style: none;
  }
  textarea.type-signaturebox:focus {
        outline: none;
  }

  .type-signaturebox::-webkit-scrollbar {
      display: none;
    }
  
  .tabcontent .image-display {
        width: 100%;
        padding: 5px;
        overflow: hidden;
        position: relative;
  }
  
  .image-display img {
        height: auto;
        width:auto;
        display: block;
        margin:0;
        max-width:100%; 
        max-height:100%;
        position: absolute;
        bottom: 5px;
        padding:0px;
        border: none;
        left:0px;
  }
  
  .close-icon {
    display:block;
    box-sizing:border-box;
    width:20px;
    height:20px;
    border-width:3px;
    border-style: solid;
    border-color:red;
    border-radius:100%;
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
    background-color:red;
    /* box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5); */
    transition: all 0.3s ease;
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 800;
    cursor: pointer;
  }

  .tick_check {
      transition: all 0.3s ease;
      position: absolute;
      bottom: 5px;
      left: 70px;
      width:20px;
      height:20px;
      z-index: 800;
      color: #ffffff;
      background-color: #00CD00;
      border-radius:100%;
      cursor: pointer;
  }


  .tick_check:after {
      content: '✓';
      position: absolute;
      text-align: center;
      line-height:20px;
      font-size: 15px;
      font-weight: 800;
      top: 0px;
      left: 0px;
      padding: 0px;
      width: 20px; 
      height: 20px;
      padding-top:1px;
    }
  
  


.signature_list_item {
    margin: 10px 4px;
    /* background-color: rgba(228, 228, 228, 0.46); */
    background-color:#b1c7ca;
    padding: 4px 5px;
  
    /* -moz-box-shadow:    2px 2px 2px 2px #ccc; */
    /* -webkit-box-shadow: 2px 2px 2px 2px #ccc; */
    /* box-shadow:         2px 2px 2px 2px #ccc; */
    border-radius: 6px;
    position: relative;
  }
  
  .signature_list_item.selected {
      background-color: lightgoldenrodyellow; 
  }
  
  .signature_list_item .title,
  .signature_list_item .sig_text {
      margin: 0px 0px;
  }

  .signature_list_item .title {
      max-width: calc(100% - 70px);
      overflow-wrap: break-word;
      word-wrap: break-word;
  }
  
  .signature_list_item .signature_item.sig_text {
      font-size: 20px;
  }
  
  .signature_list_item > span {
    padding: 3px;
    position: relative;
    width: 100% !important;
    cursor: pointer;
   
}

.signature_list_item > span.d-flex {
      display: flex;
      align-items: center;
}
  
  .signature_list_item > span p,
  .signature_list_item > span div {
      color: #000000;
      font-weight: 400;
      display: inline-block;
  }

  .signature_list_item > span p,
  .signature_list_item > span div {
    height: auto !important;
    margin: 0;
    padding: 0;
  }

  
  .signature_list_item  .mdi-dots-vertical-circle,
  .signature_list_item  .mdi-close-circle-outline {
      margin: 0px 5px;
      margin-left: 20px;
      cursor: pointer;
      font-size: 20px !important;
  }

  .signature_list_item img.image-icon {
      width: 20px;
      max-height: 20px;
      height:auto;
  }
  
  .signature_list_item .signature_item {
      height: 35px;
      width: auto;
      max-width: 260px;
  }

  @media only screen and (max-width: 500px) {
      .signature_list_item .signature_item {
            max-width: 210px;
      }
    }

    
  .signature_list_item .signature_item.img {
        height: 40px !important;
        width: auto;
  }
  
  .signature_list_item .sig_text,
  .signature_list_item img {
      background-color: #ffffff;
  }

.holds_the_block {
    height: auto;
    position: relative;
}





.draw_signature_container {
   position: fixed;
   background-color: #ffffff;
   z-index: 800;
   padding:0px 0px;
}

.click_to_sign {
background-color: #e2e3e4;
  position: absolute;
  right:0px;
  top:0px;
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
}

.click_to_sign .inner_click_to_sign  {
      padding: 5px;
      background-color:#f7ea38;
      cursor: pointer;
}

.signature_list_container {
      overflow-y: auto;
}