/* custom admin activation popup css  */

.tdprb-bg {
    background-color: #fff;
    border-radius: 10px;
    width: 500px;
    padding: 1.5rem;
}
.tdprb-wrap {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
input#tdprb-api-key[placeholder] {
    text-align: left;
    padding: 8px;
}
.tdprb-inner-content .button {
    padding: 8px;
    border-radius: 10px;
    background: #172568;
    color: white;
    cursor: pointer;
    width: 130px;
}

.tdprb-inner-content{
     margin-top: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.tdprb-inner-heading{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 10px;
}


.tdprb-settings-wrap input[type="text"],.tdprb-settings-wrap input[type="number"],.tdprb-settings-wrap input[type="url"], .tdprb-settings-wrap select{
    padding: 8px !important;
    border-radius: 8px !important;
}

.tdp-rb-submit-button #submit{
    padding: 8px;
    border-radius: 8px;
    background: var(--color-dark-blue) ;
    color: white;
    cursor: pointer;
    width: 130px;
}

/* custom admin activation popup css  */

/* custom admin setting css  */

.tdprb-settings-wrap{
  height: 100% !important;
  width: 100% !important;
  display: flex;
  justify-content: start !important;
  align-items: start;
  flex-direction: column;
  gap: 20px;
}

.trdprb-sub-items{
    position: relative;
}

.tdprb-options-wrap {
  background: white;
  padding: 10px;
  z-index: 5;
  border: 1px solid lightgray;
  border-radius: 10px;
  width: 725px;
  gap: 15px;
  justify-items: space-between;
  /* justify-content: center; */
  display: grid;
  grid-template-columns: repeat(6,1fr);
}
.tdprb-notshape-options-wrap {
  background: white;
  padding: 10px;
  z-index: 5;
  border: 1px solid lightgray;
  border-radius: 10px;
  width: 725px;
  gap: 15px;
  justify-items: space-between;
  /* justify-content: center; */
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.tdprb-option-active{
  border: 1px solid black;
  box-shadow: 0 0 2px;
  padding: 5px;
  border-radius: 5px;
  background: #172568;
  color: white;
}
.tdprb-sub-options {
  flex-direction: row-reverse;
}
.trdprb-sub-items-item input{
  display: none;
}

label[for="tdprb_ring_settings[locations][uae]"], label[for="tdprb_natural_settings[locations][uae]"], label[for="tdprb_lab_settings[locations][uae]"] {
  text-transform: uppercase;
}

.tdprb-box-shadow{
  border: 1px solid black;
  box-shadow: 0 0 2px;
  padding: 5px;
  border-radius: 5px;
}

.tdp-ring-builder_page_tdprb-ring-settings-orders .widefat td, .widefat th{
  padding: 12px 12px !important;
  font-size: 14px !important;
}
.tdp-ring-builder_page_tdprb-ring-settings-orders .widefat tfoot td, .widefat th, .widefat thead td{
  font-size: 16px !important;
}
/* custom admin setting css  */

/* ----------------------------------------------------------------------------------------- */


/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Initial CSS Reset */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  
  body {
    line-height: 1;
  }
  
  ol, ul {
    list-style: none;
  }
  
  blockquote, q {
    quotes: none;
  }
  
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  
  #site-wrapper{
    max-width: 100% !important;
    min-height: 100% !important;
    margin: 0 auto ;
  }
  
  .tdprb-main-container{
    margin: auto !important;
    height: 100% !important;
    width: 100% !important;
  }
  
  .tdprb-child-container{
    margin: auto !important;
    height: 100% !important;
    width: 100% !important;
  }
  
  /* colors variables */
  
  :root {
    --color-red:rgba(223, 37, 37, 0.829);
    --color-black: #000000  !important;
    --color-dark-blue: #364152  !important;
    --color-white: #ffffff  !important;
    --color-dark-red: #8c2f49  !important;
    --color-gray-light: #8a8a8a  !important;
    --color-gray-medium: #b0b0b0  !important;
    --color-magenta: #d80b80  !important;
    --color-dark-navy: #202939  !important;
    --color-gray-lightest: #9f9f9f  !important;
    --color-gray-lighter: #d9d9d9  !important;
    --color-gray-lightest-0: #d9d9d9  !important;
    --color-gray-extra-light: #e3e1e1  !important;
    --color-gray-light-background: #f6f5f0  !important;
    --color-gray-medium-dark: #818181  !important;
    --color-gray-dark: #434343  !important;
    --color-gray-medium-light: #c7c7c7  !important;
    --color-gray-light-medium: #cacaca  !important;
    --color-gray-light-medium-2: #d0d0d0  !important;
    --color-gray-background-light: #f7f5f0  !important;
    --color-gray-extra-light-background: #fafafa  !important;
    --color-dark-charcoal: #3C3A3A !important;
  }
  
  
  /* Margin utilities */
  .tdprb-m-auto { margin: auto   !important; }
  .tdprb-m-0 { margin: 0   !important; }
  .tdprb-mt-0 { margin-top: 0   !important; }
  .tdprb-mb-0 { margin-bottom: 0   !important; }
  .tdprb-ml-0 { margin-left: 0   !important; }
  .tdprb-mr-0 { margin-right: 0   !important; }
  .tdprb-mx-0 { margin-left: 0  !important; margin-right: 0   !important; }
  .tdprb-my-0 { margin-top: 0  !important; margin-bottom: 0   !important; }
  
  .tdprb-m-1 { margin: 0.25rem   !important; }
  .tdprb-mt-1 { margin-top: 0.25rem   !important; }
  .tdprb-mb-1 { margin-bottom: 0.25rem   !important; }
  .tdprb-ml-1 { margin-left: 0.25rem   !important; }
  .tdprb-mr-1 { margin-right: 0.25rem   !important; }
  .tdprb-mx-1 { margin-left: 0.25rem  !important; margin-right: 0.25rem   !important; }
  .tdprb-my-1 { margin-top: 0.25rem  !important; margin-bottom: 0.25rem   !important; }
  
  .tdprb-m-2 { margin: 0.5rem   !important; }
  .tdprb-mt-2 { margin-top: 0.5rem   !important; }
  .tdprb-mb-2 { margin-bottom: 0.5rem   !important; }
  .tdprb-ml-2 { margin-left: 0.5rem   !important; }
  .tdprb-mr-2 { margin-right: 0.5rem   !important; }
  .tdprb-mx-2 { margin-left: 0.5rem  !important; margin-right: 0.5rem   !important; }
  .tdprb-my-2 { margin-top: 0.5rem  !important; margin-bottom: 0.5rem   !important; }
  
  .tdprb-m-3 { margin: 1rem   !important; }
  .tdprb-mt-3 { margin-top: 1rem   !important; }
  .tdprb-mb-3 { margin-bottom: 1rem   !important; }
  .tdprb-ml-3 { margin-left: 1rem   !important; }
  .tdprb-mr-3 { margin-right: 1rem   !important; }
  .tdprb-mx-3 { margin-left: 1rem  !important; margin-right: 1rem   !important; }
  .tdprb-my-3 { margin-top: 1rem  !important; margin-bottom: 1rem   !important; }
  
  .tdprb-m-4 { margin: 1.5rem   !important; }
  .tdprb-mt-4 { margin-top: 1.5rem   !important; }
  .tdprb-mb-4 { margin-bottom: 1.5rem   !important; }
  .tdprb-ml-4 { margin-left: 1.5rem   !important; }
  .tdprb-mr-4 { margin-right: 1.5rem   !important; }
  .tdprb-mx-4 { margin-left: 1.5rem  !important; margin-right: 1.5rem   !important; }
  .tdprb-my-4 { margin-top: 1.5rem  !important; margin-bottom: 1.5rem   !important; }
  
  .tdprb-m-5 { margin: 3rem   !important; }
  .tdprb-mt-5 { margin-top: 3rem   !important; }
  .tdprb-mb-5 { margin-bottom: 3rem   !important; }
  .tdprb-ml-5 { margin-left: 3rem   !important; }
  .tdprb-mr-5 { margin-right: 3rem   !important; }
  .tdprb-mx-5 { margin-left: 3rem  !important; margin-right: 3rem   !important; }
  .tdprb-my-5 { margin-top: 3rem  !important; margin-bottom: 3rem   !important; }
  
  .tdprb-my-20 {margin: 20px 0 !important;}
  
  /* blur  */
  
  .tdprb-backdrop-filter-3px{backdrop-filter: blur(3px) !important;}
  
  /* blur  */
  
  /* Padding utilities */
  
  .tdprb-p-0 { padding: 0   !important; }
  .tdprb-pt-0 { padding-top: 0   !important; }
  .tdprb-pb-0 { padding-bottom: 0   !important; }
  .tdprb-pl-0 { padding-left: 0   !important; }
  .tdprb-pr-0 { padding-right: 0   !important; }
  .tdprb-px-0 { padding-left: 0  !important; padding-right: 0   !important; }
  .tdprb-py-0 { padding-top: 0  !important; padding-bottom: 0   !important; }
  
  .tdprb-p-1 { padding: 0.25rem   !important; }
  .tdprb-pt-1 { padding-top: 0.25rem   !important; }
  .tdprb-pb-1 { padding-bottom: 0.25rem   !important; }
  .tdprb-pl-1 { padding-left: 0.25rem   !important; }
  .tdprb-pr-1 { padding-right: 0.25rem   !important; }
  .tdprb-px-1 { padding-left: 0.25rem  !important; padding-right: 0.25rem   !important; }
  .tdprb-py-1 { padding-top: 0.25rem  !important; padding-bottom: 0.25rem   !important; }
  
  .tdprb-p-2 { padding: 0.5rem   !important; }
  .tdprb-pt-2 { padding-top: 0.5rem   !important; }
  .tdprb-pb-2 { padding-bottom: 0.5rem   !important; }
  .tdprb-pl-2 { padding-left: 0.5rem   !important; }
  .tdprb-pr-2 { padding-right: 0.5rem   !important; }
  .tdprb-px-2 { padding-left: 0.5rem  !important; padding-right: 0.5rem   !important; }
  .tdprb-py-2 { padding-top: 0.5rem  !important; padding-bottom: 0.5rem   !important; }
  
  .tdprb-p-3 { padding: 1rem   !important; }
  .tdprb-pt-3 { padding-top: 1rem   !important; }
  .tdprb-pb-3 { padding-bottom: 1rem   !important; }
  .tdprb-pl-3 { padding-left: 1rem   !important; }
  .tdprb-pr-3 { padding-right: 1rem   !important; }
  .tdprb-px-3 { padding-left: 1rem  !important; padding-right: 1rem   !important; }
  .tdprb-py-3 { padding-top: 1rem  !important; padding-bottom: 1rem   !important; }
  
  .tdprb-p-4 { padding: 1.5rem   !important; }
  .tdprb-pt-4 { padding-top: 1.5rem   !important; }
  .tdprb-pb-4 { padding-bottom: 1.5rem   !important; }
  .tdprb-pl-4 { padding-left: 1.5rem   !important; }
  .tdprb-pr-4 { padding-right: 1.5rem   !important; }
  .tdprb-px-4 { padding-left: 1.5rem  !important; padding-right: 1.5rem   !important; }
  .tdprb-py-4 { padding-top: 1.5rem  !important; padding-bottom: 1.5rem   !important; }
  
  .tdprb-p-5 { padding: 3rem   !important; }
  .tdprb-pt-5 { padding-top: 3rem   !important; }
  .tdprb-pb-5 { padding-bottom: 3rem   !important; }
  .tdprb-pl-5 { padding-left: 3rem   !important; }
  .tdprb-pr-5 { padding-right: 3rem   !important; }
  .tdprb-px-5 { padding-left: 3rem  !important; padding-right: 3rem   !important; }
  .tdprb-py-5 { padding-top: 3rem  !important; padding-bottom: 3rem   !important; }

  .tdprb-p-5px { padding: 5px; }
  
  .tdprb-pt-15px {padding-top: 15px !important;}
  .tdprb-py-10 { padding-top: 5rem  !important; padding-bottom: 5rem   !important; }
  .tdprb-py-20px { padding-top: 20px  !important; padding-bottom: 20px   !important; }
  .tdprb-px-10 { padding-right: 10px  !important; padding-left: 10px   !important; }
  .tdprb-px-20 { padding-right: 20px  !important; padding-left: 20px   !important; }
  .tdprb-p-20px { padding:20px !important;}
  .tdprb-p-30px {
    padding: 30px !important;
  }
  
  /* Text Alignment Utilities */
  
  .tdprb-text-left { text-align: left   !important; }
  .tdprb-text-center { text-align: center   !important; }
  .tdprb-text-right { text-align: right   !important; }
  .tdprb-text-justify { text-align: justify   !important; }
  
  /* Display Utilities */
  
  .tdprb-d-block { display: block   !important; }
  .tdprb-d-inline { display: inline   !important; }
  .tdprb-d-inline-block { display: inline-block   !important; }
  .tdprb-d-flex { display: flex   !important; }
  .tdprb-d-grid { display: grid   !important; }
  .tdprb-d-inline-flex { display: inline-flex   !important; }
  .tdprb-d-none { display: none   !important; }
  .tdprb-visiblity-hidden { visibility: hidden   !important; }
  /* #tdprb-d-none { display: none   !important; } */
  
  /* Flexbox Utilities */
  
  /* Flex direction */
  .tdprb-flex-row { flex-direction: row  !important; }
  .tdprb-flex-row-reverse { flex-direction: row-reverse  !important; }
  .tdprb-flex-column { flex-direction: column  !important; }
  .tdprb-flex-column-reverse { flex-direction: column-reverse  !important; }
  
  /* Flex wrap */
  .tdprb-flex-wrap { flex-wrap: wrap  !important; }
  .tdprb-flex-nowrap { flex-wrap: nowrap  !important; }
  .tdprb-flex-wrap-reverse { flex-wrap: wrap-reverse  !important; }
  
  /* Justify content */
  .tdprb-justify-start { justify-content: flex-start  !important; }
  .tdprb-justify-end { justify-content: flex-end  !important; }
  .tdprb-justify-center { justify-content: center  !important; }
  .tdprb-justify-between { justify-content: space-between  !important; }
  .tdprb-justify-around { justify-content: space-around  !important; }
  .tdprb-justify-evenly { justify-content: space-evenly  !important; }
  
  /* Align items */
  .tdprb-align-start { align-items: flex-start  !important; }
  .tdprb-align-end { align-items: flex-end  !important; }
  .tdprb-align-center { align-items: center  !important; }
  .tdprb-align-baseline { align-items: baseline  !important; }
  .tdprb-align-stretch { align-items: stretch  !important; }
  
  /* Align content */
  .tdprb-align-content-start { align-content: flex-box-start  !important; }
  .tdprb-align-content-end { align-content: flex-end  !important; }
  .tdprb-align-content-center { align-content: center  !important; }
  .tdprb-align-content-between { align-content: space-between  !important; }
  .tdprb-align-content-around { align-content: space-around  !important; }
  .tdprb-align-content-stretch { align-content: stretch  !important; }
  
  /* Align self */
  .tdprb-align-self-auto { align-self: auto  !important; }
  .tdprb-align-self-start { align-self: flex-start  !important; }
  .tdprb-align-self-end { align-self: flex-end  !important; }
  .tdprb-align-self-center { align-self: center  !important; }
  .tdprb-align-self-baseline { align-self: baseline  !important; }
  .tdprb-align-self-stretch { align-self: stretch  !important; }
  
  /* Flexbox Utilities */
  
  /* place */
  .tdprb-place-content-center {place-content: center !important;}
  .tdprb-place-items-center {place-items: center !important;}
  
  /* Width utilities */
  .tdprb-w-10 { width: 10%   !important; }
  .tdprb-w-15 { width: 15%   !important; }
  .tdprb-w-20 { width: 20%   !important; }
  .tdprb-w-25 { width: 25%   !important; }
  .tdprb-w-40 { width: 40%   !important; }
  .tdprb-w-50 { width: 50%   !important; }
  .tdprb-w-60 { width: 60%   !important; }
  .tdprb-w-70 { width: 70%   !important; }
  .tdprb-w-75 { width: 75%   !important; }
  .tdprb-w-80 { width: 80%   !important; }
  .tdprb-w-85 { width: 85%   !important; }
  .tdprb-w-90 { width: 90%   !important; }
  .tdprb-w-95 { width: 95%   !important; }
  .tdprb-w-98 { width: 98%   !important; }
  .tdprb-w-99 { width: 99%   !important; }
  .tdprb-w-100 { width: 100%   !important; }
  .tdprb-w-auto { width: auto   !important; }
  
  .tdprb-w-5px {width: 5px   !important;}
  .tdprb-w-20px {width: 20px   !important;}
  .tdprb-w-25px {width: 25px   !important;}
  .tdprb-w-50px {width: 50px   !important;}
  .tdprb-w-68px {width: 68px   !important;}
  .tdprb-w-85px {width: 85px   !important;}
  .tdprb-w-90px {width: 90px   !important;}
  .tdprb-w-100px {width: 100px   !important;}
  .tdprb-w-108px {width: 108px   !important;}
  .tdprb-w-150px {width: 150px   !important;}
  .tdprb-w-200px {width: 200px   !important;}
  .tdprb-w-230px {width: 230px   !important;}
  .tdprb-w-240px {width: 240px   !important;}
  .tdprb-w-250px {width: 250px   !important;}
  .tdprb-w-300px {width: 300px   !important;}
  .tdprb-w-330px {width: 330px   !important;}
  .tdprb-w-335px {max-width: 335px   !important;}
  .tdprb-w-350px {width: 350px   !important;}
  .tdprb-w-375px {width: 375px   !important;}
  .tdprb-w-400px {width: 400px   !important;}
  .tdprb-w-450px {width: 450px   !important;}
  .tdprb-w-500px {width: 500px   !important;}

  .tdprb-mw-50px {min-width: 50px   !important;}
  
  
  .tdprb-max-w-350px {max-width: 350px !important;}
  .tdprb-max-w-500px {max-width: 500px !important;}
  .tdprb-max-w-770px {max-width: 770px !important;}
  .tdprb-max-w-970px {max-width: 970px !important;}
  .tdprb-max-w-1200px {max-width: 1200px !important;}
  .tdprb-max-w-1400px {max-width: 1400px !important;}
  
  /* Height utilities */
  .tdprb-h-10 { height: 10%   !important; }
  .tdprb-h-15 { height: 15%   !important; }
  .tdprb-h-20 { height: 20%   !important; }
  .tdprb-h-25 { height: 25%   !important; }
  .tdprb-h-30 { height: 30%   !important; }
  .tdprb-h-40 { height: 40%   !important; }
  .tdprb-h-45 { height: 45%   !important; }
  .tdprb-h-50 { height: 50%   !important; }
  .tdprb-h-55 { height: 55%   !important; }
  .tdprb-h-60 { height: 60%   !important; }
  .tdprb-h-65 { height: 65%   !important; }
  .tdprb-h-70 { height: 70%   !important; }
  .tdprb-h-75 { height: 75%   !important; }
  .tdprb-h-80 { height: 80%   !important; }
  .tdprb-h-90 { height: 90%   !important; }
  .tdprb-h-100 { height: 100%   !important; }
  .tdprb-h-auto { height: auto   !important; }
  
  .tdprb-h-7px {height: 7px   !important;}
  .tdprb-h-10px {height: 10px   !important;}
  .tdprb-h-20px {height: 20px   !important;}
  .tdprb-h-25px {height: 25px   !important;}
  .tdprb-h-30px {height: 30px   !important;}
  .tdprb-h-35px {height: 35px   !important;}
  .tdprb-h-40px {height: 40px   !important;}
  .tdprb-h-46px {height: 46px   !important;}
  .tdprb-h-50px {height: 50px   !important;}
  .tdprb-h-55px {height: 55px   !important;}
  .tdprb-h-60px {height: 60px   !important;}
  .tdprb-h-62px {height: 62px   !important;}
  .tdprb-h-64px {height: 64px   !important;}
  .tdprb-h-68px {height: 68px   !important;}
  .tdprb-h-70px {height: 70px   !important;}
  .tdprb-h-84px {height: 84px   !important;}
  .tdprb-h-100px {height: 100px   !important;}
  .tdprb-h-116px {height: 116px   !important;}
  .tdprb-h-130px {height: 130px   !important;}
  .tdprb-h-150px {height: 150px   !important;}
  .tdprb-h-155px {height: 155px   !important;}
  .tdprb-h-200px {height: 200px   !important;}
  .tdprb-h-230px {height: 230px   !important;}
  .tdprb-h-250px {height: 250px   !important;}
  .tdprb-h-300px {height: 300px   !important;}
  .tdprb-h-350px {height: 350px   !important;}
  .tdprb-h-400px {height: 400px   !important;}
  .tdprb-h-450px {height: 450px   !important;}
  .tdprb-h-470px {height: 470px   !important;}
  .tdprb-h-490px {height: 490px   !important;}
  .tdprb-h-500px {height: 500px   !important;}
  .tdprb-h-530px {height: 530px   !important;}
  .tdprb-h-550px {height: 550px   !important;}
  .tdprb-h-800px {height: 800px   !important;}
  
  
  .tdprb-min-h-50px {min-height: 50px   !important;}
  .tdprb-min-h-100px {min-height: 100px   !important;}
  
  /* min height  */
  .tdprb-mh-50px {min-height: 50px   !important;}
  .tdprb-mh-100px {min-height: 100px   !important;}
  .tdprb-mh-200px {min-height: 200px   !important;}
  .tdprb-mh-300px {min-height: 300px   !important;}
  .tdprb-mh-50vh {min-height: 50vh   !important;}
  .tdprb-mh-80vh {min-height: 80vh   !important;}
  .tdprb-mh-100vh {min-height: 100vh   !important;}
  
  /* Font size utilities */
  .tdprb-fs-10 { font-size: 10px   !important; }
  .tdprb-fs-12 { font-size: 12px   !important; }
  .tdprb-fs-14 { font-size: 14px   !important; }
  .tdprb-fs-16 { font-size: 16px   !important; }
  .tdprb-fs-18 { font-size: 18px   !important; }
  .tdprb-fs-20 { font-size: 20px   !important; }
  .tdprb-fs-24 { font-size: 24px   !important; }
  .tdprb-fs-28 { font-size: 28px   !important; }
  .tdprb-fs-32 { font-size: 32px   !important; }
  .tdprb-fs-36 { font-size: 36px   !important; }
  .tdprb-fs-40 { font-size: 40px   !important; }
  .tdprb-fs-48 { font-size: 48px   !important; }
  .tdprb-fs-56 { font-size: 56px   !important; }
  .tdprb-fs-64 { font-size: 64px   !important; }
  .tdprb-fs-72 { font-size: 72px   !important; }
  .tdprb-fs-80 { font-size: 80px   !important; }
  .tdprb-fs-88 { font-size: 88px   !important; }
  .tdprb-fs-96 { font-size: 96px   !important; }
  .tdprb-fs-auto { font-size: auto   !important; }
  
  /* Font width utilities */
  .tdprb-fw-100 { font-weight: 100   !important; }
  .tdprb-fw-200 { font-weight: 200   !important; }
  .tdprb-fw-300 { font-weight: 300   !important; }
  .tdprb-fw-400 { font-weight: 400   !important; }
  .tdprb-fw-500 { font-weight: 500   !important; }
  .tdprb-fw-600 { font-weight: 600   !important; }
  .tdprb-fw-700 { font-weight: 700   !important; }
  .tdprb-fw-800 { font-weight: 800   !important; }
  .tdprb-fw-900 { font-weight: 900   !important; }
  .tdprb-fw-bold { font-weight: bold   !important; }
  .tdprb-fw-bolder { font-weight: bolder   !important; }
  .tdprb-fw-normal { font-weight: normal   !important; }
  .tdprb-fw-light { font-weight: lighter   !important; }
  .tdprb-fw-auto { font-weight: auto   !important; }
  
  /* Line height utilities */
  .tdprb-lh-1 { line-height: 1   !important; }
  .tdprb-lh-1-25 { line-height: 1.25   !important; }
  .tdprb-lh-1-5 { line-height: 1.5   !important; }
  .tdprb-lh-1-75 { line-height: 1.75   !important; }
  .tdprb-lh-2 { line-height: 2   !important; }
  .tdprb-lh-2-5 { line-height: 2.5   !important; }
  .tdprb-lh-3 { line-height: 3   !important; }
  .tdprb-lh-normal { line-height: normal   !important; }
  .tdprb-lh-auto { line-height: auto   !important; }
  
  /* Grid template columns utilities */
  .tdprb-grid-cols-1 { grid-template-columns: repeat(1, 1fr)  !important; }
  .tdprb-grid-cols-2 { grid-template-columns: repeat(2, 1fr)  !important; }
  .tdprb-grid-cols-3 { grid-template-columns: repeat(3, 1fr)  !important; }
  .tdprb-grid-cols-4 { grid-template-columns: repeat(4, 1fr)  !important; }
  .tdprb-grid-cols-5 { grid-template-columns: repeat(5, 1fr)  !important; }
  .tdprb-grid-cols-6 { grid-template-columns: repeat(6, 1fr)  !important; }
  .tdprb-grid-cols-7 { grid-template-columns: repeat(7, 1fr)  !important; }
  .tdprb-grid-cols-8 { grid-template-columns: repeat(8, 1fr)  !important; }
  .tdprb-grid-cols-9 { grid-template-columns: repeat(9, 1fr)  !important; }
  .tdprb-grid-cols-10 { grid-template-columns: repeat(10, 1fr)  !important; }
  .tdprb-grid-cols-11 { grid-template-columns: repeat(11, 1fr)  !important; }
  .tdprb-grid-cols-12 { grid-template-columns: repeat(12, 1fr)  !important; }
  .tdprb-grid-cols-auto { grid-template-columns: auto  !important; }
  
  /* Grid template rows utilities */
  .tdprb-grid-rows-1 { grid-template-rows: repeat(1, 1fr)  !important; }
  .tdprb-grid-rows-2 { grid-template-rows: repeat(2, 1fr)  !important; }
  .tdprb-grid-rows-3 { grid-template-rows: repeat(3, 1fr)  !important; }
  .tdprb-grid-rows-4 { grid-template-rows: repeat(4, 1fr)  !important; }
  .tdprb-grid-rows-5 { grid-template-rows: repeat(5, 1fr)  !important; }
  .tdprb-grid-rows-6 { grid-template-rows: repeat(6, 1fr)  !important; }
  .tdprb-grid-rows-7 { grid-template-rows: repeat(7, 1fr)  !important; }
  .tdprb-grid-rows-8 { grid-template-rows: repeat(8, 1fr)  !important; }
  .tdprb-grid-rows-9 { grid-template-rows: repeat(9, 1fr)  !important; }
  .tdprb-grid-rows-10 { grid-template-rows: repeat(10, 1fr)  !important; }
  .tdprb-grid-rows-11 { grid-template-rows: repeat(11, 1fr)  !important; }
  .tdprb-grid-rows-12 { grid-template-rows: repeat(12, 1fr)  !important; }
  .tdprb-grid-rows-auto { grid-template-rows: auto  !important; }
  
  /* Grid Column Span Utility Classes with tdprb Prefix */
  .tdprb-grid-col-span-1 { grid-column: span 1 !important; }
  .tdprb-grid-col-span-2 { grid-column: span 2 !important; }
  .tdprb-grid-col-span-3 { grid-column: span 3 !important; }
  .tdprb-grid-col-span-4 { grid-column: span 4 !important; }
  .tdprb-grid-col-span-5 { grid-column: span 5 !important; }
  .tdprb-grid-col-span-7 { grid-column: span 7 !important; }
  .tdprb-grid-col-span-9 { grid-column: span 9 !important; }
  .tdprb-grid-col-span-11 { grid-column: span 11 !important; }
  /* Add more utility classes as needed */
  
  /* Grid Column Span Utility Classes with tdprb Prefix */
  .tdprb-grid-row-span-1 { grid-row: span 1 !important; }
  .tdprb-grid-row-span-2 { grid-row: span 2 !important; }
  .tdprb-grid-row-span-3 { grid-row: span 3 !important; }
  .tdprb-grid-row-span-4 { grid-row: span 4 !important; }
  .tdprb-grid-row-span-5 { grid-row: span 5 !important; }
  .tdprb-grid-row-span-7 { grid-row: span 7 !important; }
  .tdprb-grid-row-span-9 { grid-row: span 9 !important; }
  .tdprb-grid-row-span-11 { grid-row: span 11 !important; }
  /* Add more utility classes as needed */
  
  
  /* Gap utilities */
  .tdprb-gap-0 { gap: 0  !important; }
  .tdprb-gap-1 { gap: 0.25rem  !important; }
  .tdprb-gap-2 { gap: 0.5rem  !important; }
  .tdprb-gap-3 { gap: 0.75rem  !important; }
  .tdprb-gap-4 { gap: 1rem  !important; }
  .tdprb-gap-5 { gap: 1.25rem  !important; }
  .tdprb-gap-6 { gap: 1.5rem  !important; }
  .tdprb-gap-7 { gap: 1.75rem  !important; }
  .tdprb-gap-8 { gap: 2rem  !important; }
  .tdprb-gap-9 { gap: 2.25rem  !important; }
  .tdprb-gap-10 { gap: 2.5rem  !important; }
  .tdprb-gap-auto { gap: auto  !important; }
  .tdprb-gap-10px{ gap: 10px !important;}
  .tdprb-gap-15px{ gap: 15px !important;}
  .tdprb-gap-20px{ gap: 20px !important;}
  .tdprb-gap-45px{ gap: 45px !important;}
  
  /* Column gap utilities */
  .tdprb-gap-x-0 { column-gap: 0  !important; }
  .tdprb-gap-x-1 { column-gap: 0.25rem  !important; }
  .tdprb-gap-x-2 { column-gap: 0.5rem  !important; }
  .tdprb-gap-x-3 { column-gap: 0.75rem  !important; }
  .tdprb-gap-x-4 { column-gap: 1rem  !important; }
  .tdprb-gap-x-5 { column-gap: 1.25rem  !important; }
  .tdprb-gap-x-6 { column-gap: 1.5rem  !important; }
  .tdprb-gap-x-7 { column-gap: 1.75rem  !important; }
  .tdprb-gap-x-8 { column-gap: 2rem  !important; }
  .tdprb-gap-x-9 { column-gap: 2.25rem  !important; }
  .tdprb-gap-x-10 { column-gap: 2.5rem  !important; }
  .tdprb-gap-x-auto { column-gap: auto  !important; }
  
  /* Row gap utilities */
  .tdprb-gap-y-0 { row-gap: 0  !important; }
  .tdprb-gap-y-1 { row-gap: 0.25rem  !important; }
  .tdprb-gap-y-2 { row-gap: 0.5rem  !important; }
  .tdprb-gap-y-3 { row-gap: 0.75rem  !important; }
  .tdprb-gap-y-4 { row-gap: 1rem  !important; }
  .tdprb-gap-y-5 { row-gap: 1.25rem  !important; }
  .tdprb-gap-y-6 { row-gap: 1.5rem  !important; }
  .tdprb-gap-y-7 { row-gap: 1.75rem  !important; }
  .tdprb-gap-y-8 { row-gap: 2rem  !important; }
  .tdprb-gap-y-9 { row-gap: 2.25rem  !important; }
  .tdprb-gap-y-10 { row-gap: 2.5rem  !important; }
  .tdprb-gap-y-auto { row-gap: auto  !important; }
  .tdprb-gap-y-10px { row-gap: 10px  !important; }
  
  
  /* Border utilities */
  .tdprb-border { border: 1px solid  !important; }
  .tdprb-border-transparent{border: transparent !important;}
  .tdprb-border-none {border: none  !important;}
  .tdprb-border-0 { border: 0  !important; }
  .tdprb-border-1 { border-width: 1px  !important; }
  .tdprb-border-2 { border-width: 2px  !important; }
  .tdprb-border-3 { border-width: 3px  !important; }
  .tdprb-border-4 { border-width: 4px  !important; }
  .tdprb-border-5 { border-width: 5px  !important; }
  
  .tdprb-border-r {border-right: 1px solid !important;}
  .tdprb-border-all-1 { border: 1px solid !important;}
  .tdprb-border-x-1 { border-left: 1px solid !important; border-right: 1px solid !important;}
  .tdprb-border-b {border-bottom: 0.5px solid #ebe8e8a6   !important;}
  .tdprb-border-black {border-color: var(--color-black)  !important;}
  .tdprb-border-gray-light {border-color: var(--color-gray-light)  !important;}
  .tdprb-border-gray-medium {border-color: var(--color-gray-medium)  !important;}
  .tdprb-border-gray-medium-light {border-color: var(--color-gray-medium-light)  !important;}
  
  /* CUSTOM BORDER  */
  .tdprb-grid-view-element-border {border: 1px solid var(--color-gray-medium-light) !important }
  
  /* Cursor utilities */
  .tdprb-cursor-auto { cursor: auto  !important; }
  .tdprb-cursor-default { cursor: default  !important; }
  .tdprb-cursor-pointer { cursor: pointer  !important; }
  .tdprb-cursor-wait { cursor: wait  !important; }
  .tdprb-cursor-text { cursor: text  !important; }
  .tdprb-cursor-move { cursor: move  !important; }
  .tdprb-cursor-not-allowed { cursor: not-allowed  !important; }
  .tdprb-cursor-crosshair { cursor: crosshair  !important; }
  .tdprb-cursor-help { cursor: help  !important; }
  .tdprb-cursor-progress { cursor: progress  !important; }
  
  /* Border radius utilities */
  .tdprb-rounded { border-radius: 0.25rem  !important; }
  .tdprb-rounded-0 { border-radius: 0  !important; }
  .tdprb-rounded-sm { border-radius: 0.125rem  !important; }
  .tdprb-rounded-md { border-radius: 0.375rem  !important; }
  .tdprb-rounded-lg { border-radius: 0.5rem  !important; }
  .tdprb-rounded-xl { border-radius: 1rem  !important; }
  .tdprb-rounded-full { border-radius: 9999px  !important; }
  .tdprb-rounded-top { border-top-left-radius: 0.25rem  !important; border-top-right-radius: 0.25rem  !important; }
  .tdprb-rounded-right { border-top-right-radius: 0.25rem  !important; border-bottom-right-radius: 0.25rem  !important; }
  .tdprb-rounded-bottom { border-bottom-left-radius: 0.25rem  !important; border-bottom-right-radius: 0.25rem  !important; }
  .tdprb-rounded-left { border-top-left-radius: 0.25rem  !important; border-bottom-left-radius: 0.25rem  !important; }
  
  /* Background repeat utilities */
  .tdprb-bg-repeat { background-repeat: repeat  !important; }
  .tdprb-bg-no-repeat { background-repeat: no-repeat  !important; }
  .tdprb-bg-repeat-x { background-repeat: repeat-x  !important; }
  .tdprb-bg-repeat-y { background-repeat: repeat-y  !important; }
  
  /* object  */
  .tdprb-object-cover { object-fit: cover  !important; }
  .tdprb-object-contain { object-fit: contain  !important; }
  .tdprb-object-fill { object-fit: fill  !important; }
  .tdprb-object-none { object-fit: none  !important; }
  
  
  /* Background positions utilities */
  .tdprb-bg-position-center { background-position: center  !important; }
  
  /* Background size utilities */
  .tdprb-bg-size-contain { background-size: contain  !important; }
  
  /* Background attachment utilities */
  .tdprb-bg-transparent { background: transparent  !important; }
  .tdprb-bg-none { background: none  !important; }
  .tdprb-bg-img-none { background-image: none  !important; }
  .tdprb-bg-fixed { background-attachment: fixed  !important; }
  .tdprb-bg-scroll { background-attachment: scroll  !important; }
  .tdprb-bg-local { background-attachment: local  !important; }
  
  /* Background blend mode utilities */
  .tdprb-bg-blend-normal { background-blend-mode: normal  !important; }
  .tdprb-bg-blend-multiply { background-blend-mode: multiply  !important; }
  .tdprb-bg-blend-screen { background-blend-mode: screen  !important;}
  
  /* Text wrapping */
  .tdprb-text-nowrap { white-space: nowrap  !important; }
  .tdprb-text-wrap { white-space: normal  !important; word-wrap: break-word  !important; }
  
  /* Text transformation */
  .tdprb-text-uppercase { text-transform: uppercase  !important; }
  .tdprb-text-lowercase { text-transform: lowercase  !important; }
  .tdprb-text-capitalize { text-transform: capitalize  !important; }
  /* Font style */
  .tdprb-text-italic { font-style: italic  !important; }
  .tdprb-text-normal-style { font-style: normal  !important; }
  /* Text decoration */
  .tdprb-text-underline { text-decoration: underline  !important; }
  .tdprb-text-line-through { text-decoration: line-through  !important; }
  .tdprb-text-no-decoration { text-decoration: none  !important; }
  /* Text overflow */
  .tdprb-text-truncate { overflow: hidden  !important; text-overflow: ellipsis  !important; white-space: nowrap  !important; }
  /* Letter spacing */
  .tdprb-letter-spacing-1 {
    letter-spacing: 1px !important;
  }
  .tdprb-letter-spacing-2 { letter-spacing: 2px  !important; }
  .tdprb-letter-spacing-3 { letter-spacing: 3px  !important; }
  /* Word spacing */
  .tdprb-word-spacing-1 { word-spacing: 1px  !important; }
  .tdprb-word-spacing-2 { word-spacing: 2px  !important; }
  .tdprb-word-spacing-3 { word-spacing: 3px  !important; }
  
  /* Text shadow */
  .tdprb-text-shadow-sm { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1)  !important; }
  .tdprb-text-shadow-md { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2)  !important; }
  .tdprb-text-shadow-lg { text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3)  !important; }
  .tdprb-button-shadow {box-shadow: 0px 1px 2px 0px #1018280D  !important;}
  
  
  /*custom shadow*/
  .tdprb-grid-view-shadow { box-shadow: 0px 4px 4px 0px #00000040 !important;}
  .tdprb-shape-view-shadow { box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px !important;}
  
  /* Text color utilities */
  .tdprb-text-black { color: var(--color-black)  !important; }
  .tdprb-text-dark-blue { color: var(--color-dark-blue)  !important; }
  .tdprb-text-white { color: var(--color-white)  !important; }
  .tdprb-text-dark-red { color: var(--color-dark-red)  !important; }
  .tdprb-text-gray-light { color: var(--color-gray-light)  !important; }
  .tdprb-text-gray-medium { color: var(--color-gray-medium)  !important; }
  .tdprb-text-magenta { color: var(--color-magenta)  !important; }
  .tdprb-text-dark-navy { color: var(--color-dark-navy)  !important; }
  .tdprb-text-gray-lightest { color: var(--color-gray-lightest)  !important; }
  .tdprb-text-gray-lighter { color: var(--color-gray-lighter)  !important; }
  .tdprb-text-gray-lightest-0 { color: var(--color-gray-lightest-0)  !important; }
  .tdprb-text-gray-extra-light { color: var(--color-gray-extra-light)  !important; }
  .tdprb-text-gray-light-background { color: var(--color-gray-light-background)  !important; }
  .tdprb-text-gray-medium-dark { color: var(--color-gray-medium-dark)  !important; }
  .tdprb-text-gray-dark { color: var(--color-gray-dark)  !important; }
  .tdprb-text-gray-medium-light { color: var(--color-gray-medium-light)  !important; }
  .tdprb-text-gray-light-medium { color: var(--color-gray-light-medium)  !important; }
  .tdprb-text-gray-light-medium-2 { color: var(--color-gray-light-medium-2)  !important; }
  .tdprb-text-gray-background-light { color: var(--color-gray-background-light)  !important; }
  .tdprb-text-gray-extra-light-background { color: var(--color-gray-extra-light-background)  !important; }
  .tdprb-text-dark-charcoal { color: var(--color-dark-charcoal)  !important; }
  
  /* Background color utilities */
  .tdprb-bg-black { background-color: var(--color-black)  !important; }
  .tdprb-bg-dark-blue { background-color: var(--color-dark-blue)  !important; }
  .tdprb-bg-white { background-color: var(--color-white)  !important; }
  .tdprb-bg-dark-red { background-color: var(--color-dark-red)  !important; }
  .tdprb-bg-red { background-color: var(--color-red)  !important; }
  .tdprb-bg-gray-light { background-color: var(--color-gray-light)  !important; }
  .tdprb-bg-gray-medium { background-color: var(--color-gray-medium)  !important; }
  .tdprb-bg-magenta { background-color: var(--color-magenta)  !important; }
  .tdprb-bg-dark-navy { background-color: var(--color-dark-navy)  !important; }
  .tdprb-bg-gray-lightest { background-color: var(--color-gray-lightest)  !important; }
  .tdprb-bg-gray-lighter { background-color: var(--color-gray-lighter)  !important; }
  .tdprb-bg-gray-lightest-0 { background-color: var(--color-gray-lightest-0)  !important; }
  .tdprb-bg-gray-extra-light { background-color: var(--color-gray-extra-light)  !important; }
  .tdprb-bg-gray-light-background { background-color: var(--color-gray-light-background)  !important; }
  .tdprb-bg-gray-medium-dark { background-color: var(--color-gray-medium-dark)  !important; }
  .tdprb-bg-gray-dark { background-color: var(--color-gray-dark)  !important; }
  .tdprb-bg-gray-medium-light { background-color: var(--color-gray-medium-light)  !important; }
  .tdprb-bg-gray-light-medium { background-color: var(--color-gray-light-medium)  !important; }
  .tdprb-bg-gray-light-medium-2 { background-color: var(--color-gray-light-medium-2)  !important; }
  .tdprb-bg-gray-background-light { background-color: var(--color-gray-background-light)  !important; }
  .tdprb-bg-gray-extra-light-background { background-color: var(--color-gray-extra-light-background)  !important; }
  .tdprb-bg-dark-charcoal { background-color:var(--color-dark-charcoal)  !important; }
  
  /* Overflow utilities */
  .tdprb-overflow-auto { overflow: auto  !important; }
  .tdprb-overflow-hidden { overflow: hidden  !important; }
  .tdprb-overflow-visible { overflow: visible  !important; }
  .tdprb-overflow-scroll { overflow: scroll  !important; }
  .tdprb-overflow-clip { overflow: clip  !important; }
  
  /* Overflow-X utilities */
  .tdprb-overflow-x-auto { overflow-x: auto  !important; }
  .tdprb-overflow-x-hidden { overflow-x: hidden  !important; }
  .tdprb-overflow-x-visible { overflow-x: visible  !important; }
  .tdprb-overflow-x-scroll { overflow-x: scroll  !important; }
  .tdprb-overflow-x-clip { overflow-x: clip  !important; }
  
  /* Overflow-Y utilities */
  .tdprb-overflow-y-auto { overflow-y: auto  !important; }
  .tdprb-overflow-y-hidden { overflow-y: hidden  !important; }
  .tdprb-overflow-y-visible { overflow-y: visible  !important; }
  .tdprb-overflow-y-scroll { overflow-y: scroll  !important; }
  .tdprb-overflow-y-clip { overflow-y: clip  !important; }
  
  /* visibility utilities*/
  .tdprb-visibility-hidden { visibility: hidden  !important;}
  .tdprb-visibility-visible { visibility: visible  !important;}
  
  /* Transition utilities */
  .tdprb-transition-all { transition: all 0.3s ease  !important; }
  .tdprb-transition-opacity { transition: opacity 0.3s ease  !important; }
  .tdprb-transition-transform { transition: transform 0.3s ease  !important; }
  .tdprb-transition-color { transition: color 0.3s ease  !important; }
  .tdprb-transition-bg-color { transition: background-color 0.3s ease  !important; }
  .tdprb-transition-border { transition: border 0.3s ease  !important; }
  /* Add more transition classes as needed */
  
  /* Transform utilities */
  .tdprb-translate-x { transform: translateX(0)  !important; }
  .tdprb-translate-y { transform: translateY(0)  !important; }
  .tdprb-translate-xy { transform: translate(0, 0)  !important; }
  .tdprb-rotate-45 { transform: rotate(45deg)  !important; }
  .tdprb-rotate-90 { transform: rotate(90deg)  !important; }
  .tdprb-rotate-180 { transform: rotate(180deg)  !important; }
  .tdprb-skew-x { transform: skewX(0)  !important; }
  .tdprb-skew-y { transform: skewY(0)  !important; }
  .tdprb-skew-xy { transform: skew(0, 0)  !important; }
  .tdprb-scale-x { transform: scaleX(1)  !important; }
  .tdprb-scale-y { transform: scaleY(1)  !important; }
  .tdprb-scale-xy { transform: scale(1, 1)  !important; }
  /* Add more transform classes as needed */
  
  /* Transform scale utilities */
  .tdprb-scale-90 { transform: scale(0.9)  !important; }
  .tdprb-scale-95 { transform: scale(0.95)  !important; }
  .tdprb-scale-100 { transform: scale(1)  !important; }
  .tdprb-scale-105 { transform: scale(1.05)  !important; }
  .tdprb-scale-110 { transform: scale(1.1)  !important; }
  
  /* Aspect Ratio*/
  
  .tdprb-aspect-ratio-1 { aspect-ratio: 1  !important;}
  
  /* Font family utility classes */
  .tdprb-ff-tenor-sans { font-family: 'Tenor Sans', sans-serif  !important; }
  .tdprb-ff-poppins { font-family: 'Poppins', sans-serif  !important; }
  .tdprb-ff-lato { font-family: 'Lato', sans-serif  !important; }
  
  /* Position utility classes */
  .tdprb-position-absolute {
    position: absolute !important;
  }
  
  .tdprb-position-relative {
    position: relative !important;
  }
  
  .tdprb-position-fixed {
    position: fixed !important;
  }
  
  .tdprb-position-sticky {
    position: sticky !important;
  }
  
  .tdprb-position-static {
    position: static !important;
  }
  
  /* Top, right, bottom, and left utility classes */
  .tdprb-top-0 {
    top: 0 !important;
  }
  
  .tdprb-top-10px{
    top: 10px !important;
  }
  .tdprb-top-30px{
    top: 30px !important;
  }
  
  .tdprb-top-1 {
    top: 1rem !important;
  }
  
  .tdprb-top-2 {
    top: 2rem !important;
  }
  
  .tdprb-top-3 {
    top: 3rem !important;
  }
  
  .tdprb-top-4 {
    top: 4rem !important;
  }
  
  .tdprb-right-0 {
    right: 0 !important;
  }
  
  .tdp-right-10px{
    right: 10px !important;
  }
  
  .tdprb-right-1 {
    right: 1rem !important;
  }
  
  .tdprb-right-2 {
    right: 2rem !important;
  }
  
  .tdprb-right-3 {
    right: 3rem !important;
  }
  
  .tdprb-right-4 {
    right: 4rem !important;
  }
  .tdprb-right-5 {
    right: 5rem !important;
  }
  .tdprb-right-17 {
    right: 17px !important;
  }
  .tdprb-right-70 {
    right: 70px !important;
  }
  
  .tdprb-left-0 {
    left: 0 !important;
  }
  
  .tdprb-left-1 {
    left: 1rem !important;
  }
  
  .tdprb-left-2 {
    left: 2rem !important;
  }
  
  .tdprb-left-3 {
    left: 3rem !important;
  }
  
  .tdprb-left-4 {
    left: 4rem !important;
  }
  .tdprb-left-5 {
    left: 5rem !important;
  }
  
  .tdprb-left-10px{
    left: 10px !important;
  }
  
  .tdprb-bottom-0 {
    bottom: 0 !important;
  }
  
  .tdprb-bottom-1 {
    bottom: 1rem !important;
  }
  
  .tdprb-bottom-2 {
    bottom: 2rem !important;
  }
  
  .tdprb-bottom-3 {
    bottom: 3rem !important;
  }
  
  .tdprb-bottom-4 {
    bottom: 4rem !important;
  }
  
  
  /* z index utility classes  */
  .tdprb-z-0 {z-index: 0  !important;} 
  .tdprb-z-2 {z-index: 2  !important;} 
  .tdprb-z-10 {z-index: 10  !important;} 
  .tdprb-z-20 {z-index: 20  !important;} 
  .tdprb-z-30 {z-index: 30  !important;} 
  .tdprb-z-40 {z-index: 40  !important;} 
  .tdprb-z-50 {z-index: 50  !important;} 
  .tdprb-z-100 {z-index: 100  !important;} 
  .tdprb-z-auto {z-index: auto  !important;}
  
  /* opacity utility classes */
  
  .tdprb-opacity-0 {opacity: 0  !important;} 
  .tdprb-opacity-10 {opacity: 0.1  !important;} 
  .tdprb-opacity-20 {opacity: 0.2  !important;} 
  .tdprb-opacity-30 {opacity: 0.3  !important;} 
  .tdprb-opacity-40 {opacity: 0.4  !important;} 
  .tdprb-opacity-50 {opacity: 0.5  !important;} 
  .tdprb-opacity-60 {opacity: 0.6  !important;} 
  .tdprb-opacity-70 {opacity: 0.7  !important;} 
  .tdprb-opacity-80 {opacity: 0.8  !important;} 
  .tdprb-opacity-90 {opacity: 0.9  !important;} 
  .tdprb-opacity-100 {opacity: 1  !important;}
  
  
  /* select utility classes */
  .tdprb-select-none, label {user-select: none  !important;} 
  .tdprb-select-text {user-select: text  !important;} 
  .tdprb-select-all {user-select: all  !important;} 
  .tdprb-select-auto {user-select: auto  !important;}
  
  /* Grid utility classes*/

  .tdprb-grid-auto-flow{ grid-auto-flow:column }
  
  /* custom random classes  */
  
  .tdprb-disabled{
    cursor: not-allowed !important;
    opacity: 0.5 !important;
  }
  
  /* custom random classes  */
  
  
  
  /* Request Form */
  div.form-response {
    color: green !important;
    border-color: green !important;
    width: 300px !important;
    text-align: center !important;
    border-style: solid !important;
    padding: 3px !important;
    margin-top: 10px !important;
  }
  
  .tdprb-loader {
    display: inline-block !important;
    background-color: #23282d !important;
    opacity: 0.75 !important;
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    border-radius: 100% !important;
    padding: 0 !important;
    margin: 0 24px !important;
    position: relative !important;
  }
  .tdprb-loader::before {
    content: '' !important;
    position: absolute !important;
    background-color: #fbfbfc !important;
    top: 4px !important;
    left: 4px !important;
    width: 6px !important;
    height: 6px !important;
    border: none !important;
    border-radius: 100% !important;
    transform-origin: 8px 8px !important;
    animation-name: spin !important;
    animation-duration: 1000ms !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  
  .tdprb-border-alert{
    border: 1px solid red !important ;
  }
  
  .tdprb-border-alert::placeholder{
    color: red !important ;
  }

  
  .tdprb-lab-checkbox input[type='checkbox'] {
    cursor: pointer !important;
    text-align: center !important;
    /* display: table-cell !important; */  /* You can uncomment this for specific layouts */
    /* vertical-align: middle !important; */
    width: 24px  !important;
    height: 24px  !important;
    appearance: none !important;
    border-radius: 5px !important;
    border: .5px solid var(--color-gray-light) !important;
    background-color: var(--color-white) !important;
    box-shadow: none !important;
    font-size: 1em !important;
  }
  
  .tdprb-lab-checkbox input[type='checkbox']:focus {
  outline: none;
  }
  .tdprb-lab-checkbox input[type='checkbox']:checked {
    background-color: var(--color-magenta) !important;
    border: 2.5px solid var(--color-white) !important;
    border-radius: 5px !important;
  }
  
  .tdprb-lab-checkbox input[type='checkbox']:checked:after {
    content: '' !important;
    color: var(--color-white) !important;
  }
  
  .tdprb-input-text-box{
    padding: 10px 20px !important;
    font-size: 16px !important;
  }
  
  div#tdprb-access-token-notify p {
    color: red;
    padding: 5px;
  }


/* Common styles for both radio buttons and checkboxes */

input[type="radio"],
input[type="checkbox"] {
  display: none; /* Hide default inputs */
}

  /* Custom styles for radio buttons */
input[type="radio"] + label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
  color: #333;
}
  
  input[type="radio"] + label:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;

  }

  input[type="radio"]:checked + label:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 5px solid #000;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;

  }


  /* Custom styles for checkboxes */
  input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    color: #333;
  }

  input[type="checkbox"] + label:before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 10%;
    position: absolute;
    left: -1px;
    top: 0px;
    background-color: #fff;
    border-radius: 5px; /* Slightly rounded corners for the checkbox */
}
  
  input[type="checkbox"]:checked + label:before {
    border-color: #303030;
    background-color: #303030;
  }
  
  input[type="checkbox"]:checked + label:after {
    content: '';
    display: block;
    width: 5px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    left: 7px;
    top: 3px;
}


/* Custom styles for checkboxes */
.tdprb-diamond-details-customization input[type="checkbox"] + label::before, .tdprb-list-view-customization input[type="checkbox"] + label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db; /* Light grey border for unselected state */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border-radius: 5px; /* Slightly rounded corners for the checkbox */
}

.tdprb-diamond-details-customization  input[type="checkbox"]:checked + label::before, .tdprb-list-view-customization input[type="checkbox"]:checked + label::before {
  border-color: #303030; /* Black border for selected state */
  background-color: #303030; /* Black fill for selected state */
}

.tdprb-diamond-details-customization input[type="checkbox"]:checked + label::after, .tdprb-list-view-customization input[type="checkbox"]:checked + label::after {
  content: '';
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  left: 7px;
  top: 3px;
}

.tdprb-not-shape {
  /* width: 50px   !important; */
  width: 100%;
  min-width: 50px;
  min-height: 50px;
  padding: 5px;
}
.tdprb_shape_display{
  display: none !important;
}


/* ----------------------------------------------------------------------------------------- */


/* Ensure the parent container is using Flexbox */


/* Custom order for sub-items */
/* Ensure the parent container is using Flexbox */
.tdprb-sub-options {
  display: flex;
  justify-content: center; /* Center the sub-items horizontally */
  align-items: center; /* Center the sub-items vertically */
  gap: 10px; /* Add space between sub-items */
}
.tdprb-sub-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Adjust columns as needed */
  gap: 20px; /* Adjust gap as needed */
}

.include-advanced-filter {
  order: 2;
}

.show {
  order: 1;
}

.sub-items{
  order: 3;
}

.tdprb-options-slide-wrap {
  transition: max-height 0.5s ease;
  max-height: 0;
  overflow: hidden;
  width: 100%;
  margin-top: 10px;
  

}

.tdprb-options-slide-wrap.expanded {
  max-height: none; /* Set this to a value large enough to show the content */
}

.wp-submenu li.wp-first-item {
  display: none;
}

/* Define status colors */
.tdprb-order-status-completed {
  background: #c8d7e1;
  color: #2e4453;
}

.tdprb-order-status-pending {
  color: #777;
  background: #e5e5e5
}

.tdprb-order-status-on-hold {
  background: #f8dda7;
  color: #94660c;
}

.tdprb-order-status-cancelled {
  color: #999999 !important;; /* Gray for Cancelled */
}

.tdprb-order-status-processing {
  background: #c6e1c6;
  color: #5b841b;
}

.tdprb-order-status-refunded {
  color: #777;
  background: #e5e5e5;
}

.tdprb-order-status-failed {
  background: #eba3a3;
  color: #761919;
}
.tdprb-order-status {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  line-height: 2.5em;
  border-radius: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  margin: -0.25em 0;
  cursor: inherit !important;
  white-space: nowrap;
  max-width: 100%;
  width: 75px;
}
.tdprb-order-items-lists th{ 
  text-align: center;

}
.tdprb-order-items-lists td{ 
  text-align: center;
}
.tdprb-order-items-lists td[data-colname="Product Name"]{ 
  text-align: start;
}
.tdprb-order-items-lists td[data-colname="Status"]{ 
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Add additional status colors if needed */

/* diamond shapes  */

.tdprb-all{background-image: url('../assets/shapes/check-all.svg');}
#tdprb-shape-asscher{background-image: url('../assets/shapes/asscher.svg');}
#tdprb-shape-baguette{background-image: url('../assets/shapes/baguette.svg');}
#tdprb-shape-briolette{background-image: url('../assets/shapes/briolette.svg');}
#tdprb-shape-bullet{background-image: url('../assets/shapes/bullet.svg');}
#tdprb-shape-calf{background-image: url('../assets/shapes/calf.svg');}
#tdprb-shape-cushionbri{background-image: url('../assets/shapes/cushionbri.svg');}
#tdprb-shape-cushionmodified{background-image: url('../assets/shapes/cushionmod.svg');}
#tdprb-shape-cushion{background-image: url('../assets/shapes/cushion.svg');}
#tdprb-shape-emerald{background-image: url('../assets/shapes/emerald.svg');}
#tdprb-shape-europeanct{background-image: url('../assets/shapes/europeanct.svg');}
#tdprb-shape-flanders{background-image: url('../assets/shapes/flanders.svg');}
#tdprb-shape-halfmoon{background-image: url('../assets/shapes/halfmoon.svg');}
#tdprb-shape-heart{background-image: url('../assets/shapes/heart.svg');}
#tdprb-shape-hexagonal{background-image: url('../assets/shapes/hexagonal.svg');}
#tdprb-shape-kite{background-image: url('../assets/shapes/kite.svg');}
#tdprb-shape-lozenge{background-image: url('../assets/shapes/lozenge.svg');}
#tdprb-shape-marquise{background-image: url('../assets/shapes/marquise.svg');}
#tdprb-shape-octagonal{background-image: url('../assets/shapes/octagonal.svg');}
#tdprb-shape-oldminar{background-image: url('../assets/shapes/oldminar.svg');}
#tdprb-shape-other{background-image: url('../assets/shapes/other.svg');}
#tdprb-shape-oval{background-image: url('../assets/shapes/oval.svg');}
#tdprb-shape-pear{background-image: url('../assets/shapes/pear.svg');}
#tdprb-shape-pentagonal{background-image: url('../assets/shapes/pentagonal.svg');}
#tdprb-shape-princess{background-image: url('../assets/shapes/princess.svg');}
#tdprb-shape-radiant{background-image: url('../assets/shapes/radiant.svg');}
#tdprb-shape-rose{background-image: url('../assets/shapes/rose.svg');}
#tdprb-shape-round{background-image: url('../assets/shapes/round.svg');}
#tdprb-shape-shield{background-image: url('../assets/shapes/shield.svg');}
#tdprb-shape-squareradiant{background-image: url('../assets/shapes/sqradiant.svg');}
#tdprb-shape-square{background-image: url('../assets/shapes/square.svg');}
#tdprb-shape-star{background-image: url('../assets/shapes/star.svg');}
#tdprb-shape-taperedbag{background-image: url('../assets/shapes/taperedbag.svg');}
#tdprb-shape-taperedbul{background-image: url('../assets/shapes/taperedbul.svg');}
#tdprb-shape-trapezoid{background-image: url('../assets/shapes/trapezoid.svg');}
#tdprb-shape-triangular{background-image: url('../assets/shapes/triangular.svg');}
#tdprb-shape-trrilliant{background-image: url('../assets/shapes/trilliant.svg');}

/* 'asscher',
'baguette',
'briolette',
'bullet',
'calf',
'cushion',
'cushion bri.',
'cushion mod.',
'emerald',
'european ct.',
'flanders',
'half moon',
'heart',
'hexagonal',
'kite',
'lozenge',
'marquise',
'octagonal',
'old minar',
'other',
'oval',
'pear',
'pentagonal',
'princess',
'radiant',
'rose',
'round',
'shield',
'sq.radiant',
'square',
'star',
'tapered bag.',
'tapered bul.',
'trapezoid',
'triangular',
'trilliant' */