﻿/*===============================
            Fonts
=================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

@font-face {font-family: 'MANDALA_REGULAR';src: url('../../../../Fonts/Mandala/MANDALA_REGULAR.OTF') format('opentype');}
@font-face {font-family: 'Niconne';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/niconne/v15/w8gaH2QvRug1_rTfnQyn2Q.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Material Icons';src: url('../../../../Fonts/MaterialIcons/MaterialIcons-Regular.woff2') format('woff2'); font-weight: normal;font-style: normal;font-display: swap;}

:root {
    --font-family: "Poppins", sans-serif;

    --color-primary: #fe5527;
    --color-secondary: #2c3a4e;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;  

    --color-btn-primary: #fe5527;
    --color-btn-secondary: #2c3a4e;
    --color-btn-success: #28a745;
    --color-btn-danger: #dc3545;
    --color-btn-warning: #ffc107;  

    --color-bg: #ebedf4;
    --color-white: #fff;
    --color-black: #000;
    --color-light: #fff4f1;
    --color-primary-light: #fff0ec;
    --color-secondary-light: #fff7f9;
    --color-yellow-lt:#fff7de;

    --color-sorting: #666666;
    --color-selFlight: rgb(0 141 236 / 90%);
    --color-table-bg: #16324a;
    --color-table-border: #838080;

    --color-footer: #2e4550;
}

/*===============================
          Common CSS
=================================*/

body {background-color: var(--color-bg) !important;}
body .m_container {max-width: 95%;width: 100%;}
body .container.bsacontain {max-width: 95%;width: 100%;margin-top:5px;}
body, input, select, textarea, body button, a, span, table, table tr th, table tr td {font-family: var(--font-family) !important;}

/*===============================
          table
=================================*/

body .table, body table tr th, body .table tr td {vertical-align: middle !important;text-align: center;background:#fff;}
body table {width: 100%;}
body table tr th, body .table tr th {background: var(--color-table-bg);color: var(--color-white);border-right: 1px solid #989c9f;padding: 5px;text-transform: capitalize;font-size: 13px;font-weight: 500;white-space: nowrap;}
body table tr td, body .table tr td {padding: 5px;font-size: 13px;font-weight: 400;text-transform: capitalize;}

/*===============================
          Input Fields
=================================*/

body label {cursor: pointer;color: #777;font-weight: 500;text-transform: capitalize;font-size: 13px;margin: 0;}
input[disabled] {cursor: not-allowed !important;}
input[type=number]{-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;}
input:focus, select:focus, textarea:focus {box-shadow: none !important;}

body .form-control, body .nice-select, body .nice-select.clscmbanim {border: 1px solid #cfcfcf;border-radius: 4px !important;font-size: 13px;height: 40px;font-weight: 600;background-color: #fff;color: #333;width: 100%;padding: 8px;}
body select.form-control:not([size]):not([multiple]) {height: 40px;}
body input[type="radio"] {left: 0px;top: 2px;cursor: pointer;width: auto;height: auto !important;position: relative;margin-right: 4px;}
body .form-control.col2-left {float: left;width: 20%;border-radius: 4px 0 0 4px;border-right: 0;}
body .form-control.col2-right {float: left;width: 80%;border-radius: 0 4px 4px 0;}
body .col-form-label {font-size: 14px;}

/*===============================
            Button
=================================*/

.btn_color1 {background: var(--color-btn-primary);color: var(--color-white) !important;border: 1px solid var(--color-btn-primary);height: 40px;padding: 5px 20px;font-size: 13px;font-weight: 500;text-shadow: none;margin-top:18px;border-radius: 4px;cursor:pointer;}
.btn_color2 {background: var(--color-btn-secondary);color: var(--color-white) !important;border: 1px solid var(--color-btn-secondary);height: 40px;padding: 5px 20px;font-size: 13px;font-weight: 500;text-shadow: none;margin-top:18px;border-radius: 4px;cursor:pointer;}
.btn_color3 {background: var(--color-btn-success);color: var(--color-white) !important;border: 1px solid var(--color-btn-success);height: 40px;padding: 5px 20px;font-size: 13px;font-weight: 500;text-shadow: none;margin-top:18px;border-radius: 4px;cursor:pointer;}
.btn_color4 {background: var(--color-btn-warning);color: var(--color-black) !important;border: 1px solid var(--color-btn-warning);height: 40px;padding: 5px 20px;font-size: 13px;font-weight: 500;text-shadow: none;margin-top:18px;border-radius: 4px;cursor:pointer;}

.btn_color1:hover, .btn_color1:focus, .btn_color1:active {background: var(--color-btn-primary);color: var(--color-white);outline: none;}
.btn_color2:hover, .btn_color2:focus, .btn_color2:active {background: var(--color-btn-secondary);color: var(--color-black);outline: none;}
.btn_color3:hover, .btn_color3:focus, .btn_color3:active {background: var(--color-btn-success) !important;color: var(--color-white);outline: none;}
.btn_color4:hover, .btn_color4:focus, .btn_color4:active {background: var(--color-btn-warning) !important;color: var(--color-white);outline: none;}

/*===============================
            calendar
=================================*/

body .ui-datepicker {padding: 0;}
body .ui-datepicker .ui-datepicker-group-first .ui-datepicker-header {border-radius: 6px 0 0 0}
body .ui-datepicker .ui-datepicker-group-last .ui-datepicker-header {border-radius: 0 6px 0 0}
body .ui-datepicker .ui-datepicker-header {padding: 6px;border-radius: 6px 6px 0 0;}
body .ui-datepicker th {background-color: #f3f3f5;color: #283540;font-size: 12px;font-weight: 700;}
body .ui-datepicker td {height:35px !important;width:40px !important;background:#fff;}
body .ui-datepicker td a {border-radius: 4px;}
body .ui-datepicker td, body .ui-datepicker th {border:none;}
body .ui-datepicker .ui-datepicker-prev:before, body .ui-datepicker .ui-datepicker-next:before {margin-top: 10px;font-size: 16px;color: #fff;}
body .ui-datepicker-current-day a {background:var(--color-primary) !important;color: var(--color-white) !important;}
body .ui-datepicker-today a {background:var(--color-secondary) !important;color: var(--color-white) !important;opacity: 1;}
body .ui-datepicker .ui-datepicker-title {border: none !important;margin: 0px 25px !important;font-size: 13px;font-weight: 700;background: var(--color-primary);}
body .ui-datepicker td.ui-datepicker-week-end:nth-child(1) .ui-state-default {color: var(--color-primary);}
body .ui-datepicker .ui-datepicker-title span {color: #fff;font-size: 13px;font-weight: 500;}
body .ui-datepicker .ui-datepicker-title select {height: 25px !important;width: auto;border-radius: 3px !important;margin: 0;padding: 0px 10px;background-color: transparent;border: 1px solid var(--color-primary);color: #fff;}
body .ui-datepicker .ui-datepicker-title select option {color: #000;}
body .ui-datepicker-group-first  {border-right:1px solid #ddd;}
body .ui-datepicker-header {background: var(--color-primary)}
body .ui-datepicker-header a {color: #fff;}
body .ui-state-default, body .ui-widget-content .ui-state-default, body .ui-widget-header .ui-state-default {margin: 0;}
body .ui-datepicker td span.farelblcls{padding: 0;}
body .ui-datepicker-multi .ui-datepicker-group table {width: 100%;}

/* MultiFare Calendar */
.ui-datepicker-multi.ui-datepicker .ui-datepicker-group table {width: 100%;}
.ui-datepicker-multi.ui-datepicker .ui-state-default {padding:6px 14px 16px 14px;}
.ui-datepicker-multi.ui-datepicker .ui-datepicker-current-day .farelblcls{color:#fff !important;}

.ui-datepicker-multi.ui-datepicker td {position:relative;border: 1px solid #ede7e7;height: 44px !important;width: 44px !important;}
.ui-datepicker-multi.ui-datepicker td .farelblcls{position: absolute;bottom: 0;font-size: 10px;font-weight: 500;width: 100%;text-align: center;color:#017601;}
.ui-datepicker-multi.ui-datepicker td:first-child {border-left: 0;}
.ui-datepicker-multi.ui-datepicker td:last-child {border-right: 0;}

/*===============================
            w2ui-grid
=================================*/

body .w2ui-grid {border-radius: 10px;margin-top: 10px;}
body .w2ui-grid .w2ui-grid-toolbar {background-color: #fdfdfd;}
body .w2ui-grid .w2ui-toolbar-search input[type="text"] {padding-top: 6px !important;font-size: 13px !important;font-weight: 500 !important;}
body .w2ui-grid .w2ui-grid-body table .w2ui-head {background: var(--color-table-bg) !important;color: var(--color-white) !important;padding: 0 !important;}
body .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data {padding: 0;}
body .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data > div {font-size: 12px;font-weight: 500;}
body .w2ui-reset table tr th, .w2ui-reset table tr td {font-size: 13px;font-weight: 500;}
body .w2ui-grid .w2ui-grid-body table .w2ui-head > div {font-size: 12px;font-weight: 400;color: var(--color-white);padding: 10px 3px;}
body .w2ui-grid .w2ui-grid-body table .w2ui-head > div.w2ui-col-header.w2ui-col-selected{background-color: var(--color-secondary) !important;color: #fff;}
body .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data > div a {padding: 12px 15px;font-size: 12px;font-weight: 500;color: var(--color-primary) !important;border-radius: 50%;text-decoration: underline;cursor:pointer;}
body .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd, body .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd {height: 35px !important;background-color: #f9f9f9;}
