/* flex  */
    .flex{display: flex;}
    .wrap{flex-wrap: wrap;}
    .nowrap{flex-wrap: nowrap;}
    .flex-col{display: flex;flex-direction: column;}

    .align-start{align-items: flex-start !important;}
    .align-center{align-items: center !important;}
    .align-end{align-items: flex-end !important;}

    .justify-start{justify-content: flex-start !important;}
    .justify-center{justify-content: center !important;}
    .justify-between{justify-content: space-between !important;}
    .justify-end{justify-content: flex-end !important;}
    
    .center{text-align: center;}
    .flex-1{flex: 1;}

    .gap-1{gap: 1px;}
    .gap-2{gap: 2px;}
    .gap-3{gap: 3px;}
    .gap-4{gap: 4px;}
    .gap-5{gap: 5px;}
    .gap-10{gap: 10px;}
    .gap-15{gap: 15px;}
    .gap-20{gap: 20px;}


    /* Width */
    .width-auto { width: auto; }
    .width-10{width: 10%;}
    .width-20{width: 20%;}
    .width-25{width: 25%;}
    .width-30{width: 30%;}
    .width-40{width: 40%;}
    .width-45{width: 45%;}
    .width-50{width: 50%;}
    .width-60{width: 60%;}
    .width-70{width: 70%;}
    .width-80{width: 80%;}
    .width-90{width: 90%;}
    .width-100{width: 100%;}


    /*padding*/
    .page-padding{padding: 0 16px !important;}
    .padding-0 {padding: 0 !important}

    .padd-t0 {padding-top: 0 !important}
    .padd-l0 {padding-left: 0 !important}
    .padd-r0 {padding-right: 0 !important}
    .padd-b0 {padding-bottom: 0 !important}

    .blk-padd, .main-stkr, .chart-blk, .table-blk{
        padding: 0 8px;
    }



    /* Margin */
    .page-margin{margin: 0 16px !important;}
    .margin-0{margin: 0 !important;}

    /* Margin-top classes */
    .mt-0 { margin-top: 0px !important; }
    .mt-1 { margin-top: 1px; }
    .mt-2 { margin-top: 2px; }
    .mt-3 { margin-top: 3px; }
    .mt-4 { margin-top: 4px; }
    .mt-5 { margin-top: 5px; }
    .mt-6 { margin-top: 6px; }
    .mt-7 { margin-top: 7px; }
    .mt-8 { margin-top: 8px; }
    .mt-9 { margin-top: 9px; }
    .mt-10 { margin-top: 10px; }
    .mt-11 { margin-top: 11px; }
    .mt-12 { margin-top: 12px; }
    .mt-13 { margin-top: 13px; }
    .mt-14 { margin-top: 14px; }
    .mt-15 { margin-top: 15px; }
    .mt-16 { margin-top: 16px; }
    .mt-17 { margin-top: 17px; }
    .mt-18 { margin-top: 18px; }
    .mt-19 { margin-top: 19px; }
    .mt-20 { margin-top: 20px; }

    /* Margin-bottom classes */
    .mb-0 { margin-bottom: 0px !important; }
    .mb-1 { margin-bottom: 1px; }
    .mb-2 { margin-bottom: 2px; }
    .mb-3 { margin-bottom: 3px; }
    .mb-4 { margin-bottom: 4px; }
    .mb-5 { margin-bottom: 5px; }
    .mb-6 { margin-bottom: 6px; }
    .mb-7 { margin-bottom: 7px; }
    .mb-8 { margin-bottom: 8px; }
    .mb-9 { margin-bottom: 9px; }
    .mb-10 { margin-bottom: 10px; }
    .mb-11 { margin-bottom: 11px; }
    .mb-12 { margin-bottom: 12px; }
    .mb-13 { margin-bottom: 13px; }
    .mb-14 { margin-bottom: 14px; }
    .mb-15 { margin-bottom: 15px; }
    .mb-16 { margin-bottom: 16px; }
    .mb-17 { margin-bottom: 17px; }
    .mb-18 { margin-bottom: 18px; }
    .mb-19 { margin-bottom: 19px; }
    .mb-20 { margin-bottom: 20px; }

    /* Margin-left classes */
    .ml-0 { margin-left: 0px; }
    .ml-1 { margin-left: 1px; }
    .ml-2 { margin-left: 2px; }
    .ml-3 { margin-left: 3px; }
    .ml-4 { margin-left: 4px; }
    .ml-5 { margin-left: 5px; }
    .ml-6 { margin-left: 6px; }
    .ml-7 { margin-left: 7px; }
    .ml-8 { margin-left: 8px; }
    .ml-9 { margin-left: 9px; }
    .ml-10 { margin-left: 10px; }
    .ml-11 { margin-left: 11px; }
    .ml-12 { margin-left: 12px; }
    .ml-13 { margin-left: 13px; }
    .ml-14 { margin-left: 14px; }
    .ml-15 { margin-left: 15px; }
    .ml-16 { margin-left: 16px; }
    .ml-17 { margin-left: 17px; }
    .ml-18 { margin-left: 18px; }
    .ml-19 { margin-left: 19px; }
    .ml-20 { margin-left: 20px; }

    /* Margin-right classes */
    .mr-0 { margin-right: 0px !important; }
    .mr-1 { margin-right: 1px; }
    .mr-2 { margin-right: 2px; }
    .mr-3 { margin-right: 3px; }
    .mr-4 { margin-right: 4px; }
    .mr-5 { margin-right: 5px; }
    .mr-6 { margin-right: 6px; }
    .mr-7 { margin-right: 7px; }
    .mr-8 { margin-right: 8px; }
    .mr-9 { margin-right: 9px; }
    .mr-10 { margin-right: 10px; }
    .mr-11 { margin-right: 11px; }
    .mr-12 { margin-right: 12px; }
    .mr-13 { margin-right: 13px; }
    .mr-14 { margin-right: 14px; }
    .mr-15 { margin-right: 15px; }
    .mr-16 { margin-right: 16px; }
    .mr-17 { margin-right: 17px; }
    .mr-18 { margin-right: 18px; }
    .mr-19 { margin-right: 19px; }
    .mr-20 { margin-right: 20px; }


  

    /* TYPOGRAPHY */
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-family-secondary);
    }

    h1, .head-txt {
      font-size: var(--headline);
      margin-bottom: 8px;
      line-height: 22px;
    }

    h1.header-xl { font-size: var(--header-xl); }

    h2, .sub-head-txt {
      font-size: var(--sub-head);
      margin-bottom: 5px;
    }

    p, .base-txt {
      font-size: var(--base-text);
      margin-bottom: 5px;
      line-height: 17px;
    }

    small, .small { font-size: var(--caption); }

    p.small {
      line-height: 12px;
      margin-bottom: 4px;
      font-family: var(--font-family-primary);
    }

    /* Other Text Styles */
    .underline { text-decoration: underline; }
    .link {
      color: #673ab7;
      text-decoration: underline;
    }

    .white-txt { color: var(--text-white-color); }

    /* Tamil Font */
    .tamil {
      font-family: "Noto Sans Tamil", sans-serif;
      font-optical-sizing: auto;
      font-style: normal;
      line-height: 26px;
    }

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

    /* List Styles */
    ul.list-no, ul.list-disc {
      margin-left: 20px;
    }

    ul li{list-style-type: none;}
    ul li a{text-decoration: none; color: inherit;}

    ul.list-no li { list-style-type: decimal; }
    ul.list-disc li { list-style-type: disc; }

    a {
        outline: none;
        text-decoration: none;
        color: #000;
    }

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

    /* Text Ellipsis */
    .ellipsis {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal; /* Allow multi-line ellipsis */
    }

    .ellipsis-2, .ellipsis-3, .ellipsis-4, .ellipsis-5 {
      --line-clamp: attr(data-lines);
      -webkit-line-clamp: var(--line-clamp);
    }

    /* Default values for each ellipsis class */
    .ellipsis-2 { --line-clamp: 2; }
    .ellipsis-3 { --line-clamp: 3; }
    .ellipsis-4 { --line-clamp: 4; }
    .ellipsis-5 { --line-clamp: 5; }


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

.hide{display: none !important;}


/* Social Media Button Styles */
.btn-facebook { background-color: var(--facebook); color: #fff; }
.btn-twitter { background-color: var(--twitter); color: #fff; }
.btn-linkedin { background-color: var(--linkedin); color: #fff; }
.btn-instagram { background-color: var(--instagram); color: #fff; }
.btn-whatsapp { background-color: var(--whatsapp); color: #fff; }
.btn-youtube { background-color: var(--youtube); color: #fff; }
.btn-telegram { background-color: var(--telegram); color: #fff; }


/* Logo colors */

.logo-text {
    font-size: 36px;
    font-weight: bold;
    background: linear-gradient(to right, #E31837, #1E88E5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-underline {
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #E31837, #FFD700, #1E88E5);
}

.logo-container {
    background: linear-gradient(135deg, #E31837, #FFD700, #1E88E5, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



/* Form Fields styles */

input[type="text"], 
input[type="search"], 
input[type="date"], 
input[type="time"], 
input[type="password"], 
select {
    height: 32px;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    padding: 4px 6px;
    width: 100%;
    outline: none;
}

.focus-field { outline: 2px solid #f00; box-shadow: 0 0 0 3px rgba(255,0,0,.2); }

textarea {
    width: 100%;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    padding: 4px 6px;
    min-width: 140px;
    outline: none;
}

td input[type="text"], td select{
    height: 26px;
    padding: 2px 4px;
}

.global_search_input{
    width: 230px !important;
    /*width: 300px;*/
}

input[type="text"].xsmall-input{width: 60px !important;}
input[type="text"].small-input{width: 80px !important;}
input[type="text"].medium-input{width: 100px !important;}

/* Form Fields styles End */



/* Date Picker Custom styles */

/* Container */
.ui-datepicker {
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100 !important;
    font-family: 'Degular';
}

/*.ui-datepicker .ui-datepicker-header {
    background: #fff !important;
    border: none !important;
}

.ui-datepicker select.ui-datepicker-month{
    margin-right: 10px !important;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: fit-content !important;
    font-size: 1rem !important;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: center;
    text-decoration: none;
    border: none !important;
    background: none !important;
    color: #000 !important;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}


td.ui-datepicker-days-cell-over.ui-datepicker-today a.ui-state-default.ui-state-highlight{
    background: #cdcdcd !important;
}*/

/* Date Picker Custom styles End*/