/*
    .example {
        max-width: 1024px;
        min-width: -webkit-fill-available;      
        margin: 0 auto;
        display: grid;
        grid-column-gap: 16px;
        grid-template-columns: repeat(1, 1fr);
    }
    */    
    .example {
      max-width: 1024px;
      min-width: -webkit-fill-available;
      margin: 0 auto;
      display: grid;
      grid-column-gap: 16px;
      grid-template-columns: repeat(1, 93%);
      justify-content: center;
    }    
    
    @media (min-width: 576px) {
        .example {
          max-width: 1024px;
          min-width: -webkit-fill-available;      
          margin: 0 auto;
          display: grid;
          grid-column-gap: 16px;
          grid-template-columns: repeat(1, 1fr);
          justify-content: center;
        }    
    }
    
    @media (min-width: 768px) {
        .example {
          max-width: 1024px;
          margin: 0 auto;
          display: grid;
          grid-column-gap: 16px;
          grid-template-columns: repeat(2, 1fr);
          justify-content: center;
        }    
    }  
    
    @media (min-width: 1024px) {
        .example {
          max-width: 1024px;
          margin: 30px auto;
          display: grid;
          grid-column-gap: 55px;
          grid-template-columns: repeat(3, 1fr);
          justify-content: center;
        }    
    } 
    /* Hidden */

    .ff-hidden {
      position: absolute !important;
      width: 0 !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      visibility: hidden !important;
    }

    /* Sekeleton */

    @-webkit-keyframes ff-skeleton-anim {
      100% {
        transform: translateX(100%);
      }
    }

    @-moz-keyframes ff-skeleton-anim {
      100% {
        transform: translateX(100%);
      }
    }

    @keyframes ff-skeleton-anim {
      100% {
        transform: translateX(100%);
      }
    }

    .ff-skeleton {
      position: relative;
      display: block;
      overflow: hidden;
      background: #eaecf1;
    }

    .ff-skeleton::after {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgb(255 255 255 / 65%), transparent);
      transform: translateX(-100%);
      animation: ff-skeleton-anim 1.5s infinite;
      content: '';
    }

    /* Loader */

    .ff-loader,
    .ff-loader::before,
    .ff-loader::after {
      width: 8px;
      height: 8px;
      border-radius: 5px;
      animation: ff-loader 0.6s infinite alternate;
    }

    .ff-loader {
      position: relative;
      animation-delay: 0.24s;
    }

    .ff-loader::before, .ff-loader::after {
      content: '';
      position: absolute;
      top: 0;
    }

    .ff-loader::before {
      left: -15px;
      animation-delay: 0.12s;
    }

    .ff-loader::after {
      left: 15px;
      animation-delay: 0.36s;
    }

    @keyframes ff-loader {
      0% {
        background-color: #000;
      }
      100% {
        background-color: #fff;
      }
    }

    /* Button */

    .ff-button {
      position: relative;
      height: 32px;
      padding: 0 16px;
      border: 0;
      font-family: 'Kanit', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      background-color: #5842bc;
      cursor: pointer;
      outline: none;
      border-radius: 5px;
      transition: background-color 0.2s ease 0s;
    }
    
    .ff-widget-withdraw-button {
	  margin-left:10px;
    }

    .ff-button:not([disabled]):hover {
      background-color: #53dee9;
    }

    .ff-button[disabled] {
      background-color: #8c82b6;
      border-color: #e9eaeb;
      box-shadow: none;
      color: #bdc2c4;
      cursor: not-allowed;
    }

    .ff-button .ff-loader {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }


    /* Text Field */

    .ff-text-field-container {
      background-color: #eeeaf4;
      padding: 16px 20px;
      border-radius: 5px;
      box-shadow: rgb(74 74 104 / 10%) 0 2px 2px -1px inset;
    }

    .ff-text-field-label {
      margin-bottom: 8px;
      font-size: 13px;
      color: #452a7a;
    }
    
    .w_val {
	  cursor: pointer;
    }

    .ff-text-field {
      position: relative;
      width: 100%;
      padding: 0;
      outline: none;
      border: none;
      background-color: transparent;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'Kanit', sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: #452a7a;
      appearance: textfield;
      overflow: hidden;
    }

    .ff-text-field::placeholder {
      color: #8C82B6;
    }

    .ff-text-field::-webkit-input-placeholder {
      color: #8C82B6;
    }

    .ff-text-field:-moz-placeholder {
      color: #8C82B6;
    }

    .ff-text-field::-moz-placeholder {
      color: #8C82B6;
    }

    /* Widget */
    .ff-widget {
      position: relative;
      display: flex;
      flex-direction: column;
      font-family: 'Kanit', sans-serif;
      background-color: #ffffff;
      padding: 24px;
      margin-top:15px;
      border-radius: 30px;
      box-shadow: #694e96 0 10px 15px 5px, #3772ff 0 1px 25px;
      max-height:500px;
    }
    
    @media (max-width:576px) {
    	.ff-widget {
    	  margin-top: 35px;	
    	}
    }

    .ff-widget-headline {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ff-widget-token-icons {
      position: relative;
    }

    .ff-widget-token-icon {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 64px;
      height: 64px;
      vertical-align: top;
      overflow: hidden;
      border-radius: 50%;
      border: 2px solid #ffffff;
    }
    
    .ff-widget-token-icon2 {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: 64px;
      height: 64px;
      vertical-align: top;
      overflow: hidden;
      border-radius: 50%;
      margin-left: -20px; 
      border: 2px solid #ffffff;
    }
    
    .ff-widget-token-icon + .ff-widget-token-icon {
      margin-left: -10px;
      z-index: 2;
    }

    .ff-widget-token-icon .ff-skeleton .ff-widget-token-icon2{
      width: 100%;
      height: 100%;
    }

    .ff-title-and-timer {
      text-align: right;
    }

    .ff-widget-title {
      font-weight: 600;
      font-size: 20px;
      color: black;
    }

    .ff-widget-timer {
      height: 19px;
      font-size: 13px;
      color: black;
    }

    .ff-widget-title .ff-skeleton {
      width: 140px;
      height: 24px;
    }

    .ff-widget-section {
      margin-top: 12px;
    }

    .ff-widget-stats {
      margin-bottom: 5px;
    }

    .ff-widget-section-title {
      text-transform: uppercase;
      font-size: 13px;
      color: black;
    }

    .ff-widget-section-title b {
      color: #d43f81;
    }

    .ff-widget-row2 {
      display: flex;
      justify-content: space-between;
    }

    .ff-widget-row2 + .ff-widget-row2 {
      margin-top: 8px;
    }

    .ff-widget-row2 .ff-widget-label {
      font-size: 16px;
      color: black;
    }

    .ff-widget-row2 .ff-widget-value {
      font-weight: 600;
      font-size: 16px;
      color: black;
    }

    .ff-widget-row2 .ff-widget-value .ff-skeleton {
      width: 40px;
      height: 24px;
    }

    .ff-widget-row {
      display: flex;
      justify-content: space-between;
    }

    .ff-widget-row .ff-widget-value {
      flex: 1 1 0;
      min-width: 1px;
      height: 45px;
      line-height: 48px;
      font-weight: 600;
      font-size: 24px;
      color: #64ee6f;
    }

    .ff-widget-row .ff-widget-value .ff-skeleton {
      width: 100px;
      height: 24px;
      margin-top: 12px;
    }

    .ff-widget-row .ff-widget-value.disabled {
      color: #bdc2c4;
    }

    .ff-widget-row .ff-button {
      /*width: 80px;*/
      margin-top: 12px;
    }

    .ff-widget-row .ff-button:first-child {
      margin-top: 0;
    }

    .ff-widget-unlock-button,
    .ff-widget-approve-button {
      width: 100%;
      height: 40px;
      margin-top: 16px;
      font-size: 16px;
    }

    .ff-widget-details {
      display: block;
      padding: 10px;
      margin-top: 5px;
      margin-bottom: -24px;
      border-top: 1px solid #ddd;
      text-decoration: none;
      text-align: center;
      color: black;
      font-size: 16px;
      cursor: pointer;
    }

    .ff-widget-details:hover {
      text-decoration: underline;
    }

    .ff-widget-footer {
      margin-top: auto;
    }

    /* Modal */
    .ff-overlay {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: rgb(69 42 122 / 60%);
    }

    .ff-modal {
      width: auto;
      min-width: 350px;
      max-width: 560px;
      background-color: #fff;
      font-family: 'Kanit', sans-serif;
      border-radius: 8px;
      box-shadow: rgb(25 19 38 / 10%) 0 2px 12px -8px, rgb(25 19 38 / 5%) 0 1px 1px;
    }

    .ff-modal-headline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 16px;
      border-bottom: 1px solid #e9eaeb;
    }

    .ff-modal-title {
      font-weight: 600;
      font-size: 20px;
      color: #402E76;
    }

    .ff-modal-close {
      width: 20px;
      height: 20px;
      border: 0;
      padding: 8px;
      cursor: pointer;
      color: #1fc7d4;
      background: #ccc;
      border-radius: 8px;
      box-sizing: content-box;
      outline: none;
    }

    .ff-modal-close svg {
      width: 100%;
      height: 100%;
    }

    .ff-modal-close:hover {
      background-color: #eff4f5;
    }

    .ff-modal-content {
      padding: 24px;
      color: #8f80ba;
    }

    .ff-modal-buttons {
      margin-top: 16px;
    }

    .ff-modal-buttons .ff-button {
      width: 100%;
    }

    /* Deposit, Withdraw modals */

    .ff-transaction-link {
      margin-top: 16px;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .cal_icon{
      margin-left:auto;
    }
    .grid_cal {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);
        margin-bottom: 24px;
        font-family: jura,sans-serif;
    }
    .bw_pad {
        margin-bottom:20px;
        font-size:15px;        
    }
    @media (max-width: 1200px) {
        .bw_pad {
            margin-bottom:20px;
        }
    }    
    .c_item {
       margin-bottom:2px; 
    }
    .c_esc {
        color:#c71585;
    }
    .ca_val {
        color:#20b2aa;
    }    

.description-widget {
	background-color: white;
    width: 100%;
    border-radius: 15px;
    border: 3px solid #8f8f8f;
    padding: 25px;
    margin: 15px 0 0 0;
    box-shadow: #694e96 0 10px 15px 5px, #0fc569 0 1px 25px;
    min-height: 400px;
}

.d_val {
	cursor: pointer;
}