/* #General Styles
================================================== */
:root {
    --white:  #FFFFFF;
    --black: #000000;
    --primary900: #26095E;
    --primary700: #380E8D;
    --primary600: #5E17EB;
    --primary500: #5E17EB;
    --primary300: #9E74F3;
    --primary200: #CFB9F9;
    --primary100: #DFD1FB;
    --primary50: #EFE8FD;
    --primary25: #F7F3FE;
    --gray900: #101828;
    --gray800: #1D2939;
    --gray700: #344054;
    --gray600: #475467;
    --gray500: #667085;
    --gray300: #D0D5DD;
    --gray200: #EAECF0;
    --gray100: #F2F4F7;
    --gray50: #F9FAFB;
    --gray25: #FCFCFD;
    --error700: #B42318;
    --error600: #D92D20;
    --error500: #F04438;
    --error300: #FDA29B;
    --error200: #FECDCA;
    --error100: #FEE4E2;
    --error50: #FEF3F2;
    --green600: #099250;
    --success700: #027A48;
    --success500: #12B76A;
    --success200: #A6F4C5;
    --success100: #D1FADF;
    --success50: #ECFDF3;
    --success25: #F6FEF9;
    --warning700: #B54708;
    --warning500: #F79009;
    --warning200: #FEDF89;
    --warning100: #FEF0C7;
    --warning50: #FFFAEB;
    --fuchsia900: #6F1877;
    --fuchsia50: #FDF4FF;
    --orange700: #B93815;
    --orange500: #EF6820;
    --orange50: #FFF4ED;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); list-style: none; }
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, select, input, option { margin: 0; padding: 0; border: 0; outline: 0;}
html { -webkit-text-size-adjust: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sup { top: -0.5em; }
sub { bottom: -0.25em }
nav ul, nav ol { list-style: none; list-style-image: none; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; box-shadow: none; font-family: 'Inter', sans-serif; }
textarea { overflow: auto; vertical-align: top }
table { border-collapse: collapse; border-spacing: 0 }
input[type="button"], input[type="submit"] { -webkit-appearance: none !important; }
:focus { outline: 0; }
img { border: 0 none; max-width: 100%; vertical-align: top; }
a { text-decoration: none; outline: none; cursor: pointer; display: inline-block; vertical-align: bottom; font-weight: 600; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; color: var(--primary700); }
a:hover { text-decoration: none; color: var(--primary600); }
a:focus { text-decoration: none !important; outline: none !important; }
img { max-width: 100%; }
.preloader { display: none; }
img{vertical-align:bottom;}
/*Placeholder opacity cross browsers*/
input::-webkit-input-placeholder { color: var(--gray500); opacity:1;}
input:-moz-placeholder { color:var(--gray500); opacity:1;}
input::-moz-placeholder { color: var(--gray500); opacity:1;}
input:-ms-input-placeholder { color: var(--gray500); opacity:1;}
textarea::-webkit-input-placeholder { color:var(--gray500); opacity:1;}
textarea:-moz-placeholder { color: var(--gray500); opacity:1;}
textarea::-moz-placeholder { color: var(--gray500); opacity:1;}
textarea:-ms-input-placeholder { color: var(--gray500); opacity:1;}
button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner {border: 0;}
textarea::-webkit-input-placeholder { color:var(--gray500); opacity:1;}
textarea::-moz-placeholder { color: var(--gray500); opacity:1;}
textarea::-moz-placeholder { color: var(--gray500); opacity:1;}
textarea::-ms-input-placeholder { color: var(--gray500); opacity:1;}

/*Global Style*/
body{ background-color: transparent; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; color: var(--gray900); }
h1, .h1{ color: var(--gray900); font-family: 'Inter', sans-serif; font-size: 30px; line-height: 1.267; font-weight: 600; }
h2, .h2{ color: var(--gray900); font-family: 'Inter', sans-serif; font-size: 24px; line-height: 1.333; font-weight: 600; }
h3, .h3{ color: var(--gray900); font-family: 'Inter', sans-serif; font-size: 20px; line-height: 1.5; font-weight: 600; }
h4, .h4{ color: var(--gray900); font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.556; font-weight: 600; }
h5, .h5{ color: var(--gray900); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; font-weight: 600; }
h6, .h6{ color: var(--gray900); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.429; font-weight: 600; }

.fontsm{ font-size: 14px; line-height: 1.429; font-weight: 400; }
.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }

.row{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; }
.col1{ width:8.33333333% } 
.col2{ width:16.66666667% } 
.col3{ width:25% } 
.col4{ width:33.33333333% } 
.col5{ width:41.66666667% } 
.col6{ width:50% } 
.col7{ width:58.33333333% } 
.col8{ width:66.66666667% } 
.col9{ width:75% } 
.col10{ width:83.33333333% } 
.col11{ width:91.66666667% } 
.col12{ width:100% }

.d-flex{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.d-inlineflex{ display: inline-flex; }
.d-flex-wrap{ flex-wrap: wrap; }
.flex-align-start{ align-items: flex-start; }
.flex-align-center{ align-items: center; }
.flex-align-end{ align-items: flex-end; }
.flex-justify-start{ justify-content: flex-start; }
.flex-justify-center{ justify-content: center; }
.flex-justify-end{ justify-content: flex-end; }
.flex-justify-spa-bet{ justify-content: space-between; }
.gap12{ gap: 12px; }
.gap16{ gap: 16px; }
.gap24{ gap: 24px; }
.font500{ font-weight: 500; }
.height100{ height: 100%; }
.colorPrimary600{ color: var(--primary600); }
.cardBlock{ padding: 24px; border: 1px solid var(--gray200); border-radius: 12px; box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -webkit-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -moz-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); }
.cardBlock .formAction{ gap: 12px; margin-top: 32px; padding-top: 16px !important; border-top: 1px solid var(--gray200) !important; }
.accordian li{ border-bottom: 1px solid var(--gray200); }
.accordian li .AccHeader{ padding: 20px 30px 20px 0; width: 100%; position: relative; cursor: pointer; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.accordian li .AccHeader:before{ content: ""; width: 24px; height: 24px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); background-image: url(../images/angle-down.svg); background-size: 24px; background-repeat: no-repeat; background-position: right center; }
.accordian li:not(.active) .content{ display: none; }
.accordian li .content{ padding: 4px 0 20px; }
.accordian li.active .AccHeader:before{ transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); }
.btn{ background-color: var(--primary600); border: 1px solid var(--primary600); color: var(--white); font-size: 14px; line-height: 20px; font-weight: 600; padding: 9px 15px; border-radius: 8px; cursor: pointer; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.btn svg{ transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.btn:hover{ background-color: var(--primary700); border-color: var(--primary700); }
.btn.white{ border: 1px solid var(--gray300); background-color: transparent; color: var(--gray700); }
.btn.white:hover{ background-color: var(--gray50); }
.btn.danger{ background-color: var(--error50); border-color: var(--error50); color: var(--error600); }
.btn.danger:hover{ background-color: var(--error100); border-color: var(--error100);  }
.btn.primary50{ background-color: var(--primary50); border-color: var(--primary50); color: var(--primary700); }
.btn.primary50:hover{ background-color: var(--primary100); border-color: var(--primary100); }
.btn.sm{ padding: 7px 14px; }
.btn.xsm{ padding: 4px 12px; gap: 6px; }
.btn.transparent{ background-color: transparent; font-size: 14px; line-height: 20px; color: var(--gray600); font-weight: 600; border: 0; }
.btn.transparent:hover{ background-color: var(--gray50); }
.btn.icon{ width: 40px; height: 40px; padding: 0; justify-content: center; align-items: center; gap: 0; }
.btn.delete svg{ stroke: var(--error600); }
.btn.edit svg{ stroke: var(--primary600); }
.btn.center{ margin-left: auto; margin-right: auto; }
.btn.fullWidth{ width: 100% !important; }

.mb10{ margin-bottom: 10px; }
.mb15{ margin-bottom: 15px; }
.mb20{ margin-bottom: 20px; }

.formStyle .row { margin-left: -10px; margin-right: -10px; }
.formStyle .row .col1, .formStyle .row .col2, .formStyle .row .col3, .formStyle .row .col4, .formStyle .row .col5, .formStyle .row .col6, .formStyle .row .col7, .formStyle .row .col8, .formStyle .row .col9, .formStyle .row .col10, .formStyle .row .col11, .formStyle .row .col12 { padding-left: 10px; padding-right: 10px; }
.formStyle .row + .row { margin-top: 20px; }
.formStyle label { font-size: 14px; line-height: 1.429; font-weight: 500; color: var(--gray700); display: block; margin-bottom: 6px; }
.formStyle label span.asasterisk { color: var(--error500); }
.formStyle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), .formStyle select, .formStyle textarea, .angular-editor-textarea{ height: 44px; padding: 8px 14px; border: 1px solid var(--gray300); border-radius: 8px; background-color: transparent; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0.004em; color: var(--gray900); width: 100%; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); }
.formStyle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):focus, .formStyle select:focus, .formStyle textarea:focus, .angular-editor-textarea:focus { border-color: var(--primary300); box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; }
.formStyle input[type="radio"]:active + label:before, .formStyle input[type="checkbox"]:active + label:before { box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; }
.formStyle input[type="checkbox"]:not(.swtichCheck) { opacity: 0; visibility: hidden; z-index: -9999999; position: absolute; }
.formStyle input[type="checkbox"]:not(.swtichCheck) + label { padding-left: 24px; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; }
.formStyle input[type="checkbox"]:not(.swtichCheck) + label:before { content: ""; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--gray300); position: absolute; left: 0; top: 2px; box-sizing: border-box; }
.formStyle input[type="checkbox"]:not(.swtichCheck) + label span{ color: var(--gray600); font-weight: 400; }
.formStyle input[type="checkbox"]:not(.swtichCheck):checked + label:before { border-color: var(--primary600); background-color: var(--primary50); }
.formStyle input[type="checkbox"]:not(.swtichCheck):checked + label:after { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background-image: url(../images/check.svg); background-repeat: no-repeat; background-size: 8px; background-position: center; }
.formStyle input[type="radio"] { opacity: 0; visibility: hidden; z-index: -9999999; position: absolute; }
.formStyle input[type="radio"] + label { padding-left: 24px; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; }
.formStyle input[type="radio"] + label:before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--gray300); position: absolute; left: 0; top: 2px; box-sizing: border-box; }
.formStyle input[type="radio"]:checked + label:before { border-color: var(--primary600); background-color: var(--primary50); }
.formStyle input[type="radio"]:checked + label:after { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; background-color: var(--primary600); border-radius: 50%; }
.formStyle input[type="date"]::-webkit-inner-spin-button,
.formStyle input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.formStyle app-date-range-picker input{ background-image: url(../images/calendar.svg); background-size: 20px; background-repeat: no-repeat; background-position: 15px center; padding-left: 42px !important; }
.formStyle select{ appearance:none; -moz-appearance: none; -webkit-appearance: none; line-height: normal; background-image: url(../images/select-down.svg) !important; cursor: pointer; background-size: 20px !important; background-position: calc(100% - 14px) center !important; background-repeat: no-repeat !important; }
.formStyle textarea, .angular-editor-textarea{ height: 200px; }
.formStyle .showpass { position: relative; }
.formStyle .showpass input{ padding-right: 40px !important; }
.formStyle .showpass a { position: absolute; right: 14px; top: 50%; line-height: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); }
.formStyle .showpass.show a svg.show, .formStyle .showpass a svg.hide { display: block; }
.formStyle .showpass.show a svg.hide, .formStyle .showpass a svg.show { display: none; }
.formStyle .showpass a:hover svg { stroke: var(--primary600); }
.formStyle .formAction { padding-top: 32px; }
.formStyle .formAction input:not(.btn), .formStyle .formAction button:not(.btn){ background-color: var(--primary600); border: 1px solid var(--primary600); color: var(--white); font-size: 16px; line-height: 1.5; font-weight: 600; padding: 9px 20px; width: 100%; border-radius: 8px; cursor: pointer; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.formStyle .formAction button:not(.btn) svg{ margin-right: 8px; }
.formStyle .formAction input:not(.btn):hover, .formStyle .formAction button:not(.btn):hover{ background-color: var(--primary700); border-color: var(--primary700); }
.formStyle .formAction.inline button,.formStyle .formAction.inline input{ width: auto; }
.formStyle .upload .mat-datepicker-input, .formStyle .upload .error, .formStyle .error .angular-editor-textarea,.formStyle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]).error, .formStyle textarea.error,.formStyle select.error{ border-color: var(--error300); box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; background-image: url(../images/alert-circle.svg); background-size: 16px; background-position: calc(100% - 14px) 13px; background-repeat: no-repeat; padding-right: 35px; }
.formStyle input[type="checkbox"].error + label:before, .formStyle input[type="radio"].error + label:before { border-color: var(--error300); box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; }
.formStyle input + p { color: var(--gray600); margin: 6px 0 0; }
.formStyle.socialMedia .socialField{ position: relative; }
.formStyle.socialMedia .socialField .icon{ width: 40px; margin-right: 32px; }
.formStyle.socialMedia .socialField .url{ width: 144px; color: var(--gray600); padding: 10px 14px; border-right: 1px solid var(--gray300); position: absolute; left: 82px; top: 0; user-select: none; }
.formStyle.socialMedia .socialField input{ padding-left: 158px !important; width: calc(100% - 72px) !important; }
.formStyle .radioList{ min-height: 44px; }
.formStyle .upload{ width: 100%; }
.formStyle .upload .img{ width: 160px; height: 160px; }
.formStyle .upload .img img{ width: 100%; height: 100%; border-radius: 10px; }
.formStyle .upload input[type="file"]{ position: absolute; left: 0; top: 0; z-index: -9999; opacity: 0; visibility: hidden; }
.formStyle .upload input[type="file"] + .clickUpload{ flex-direction: column; cursor: pointer; width: calc(100% - 184px); margin: 0 0 0 24px; height: 142px; border: 1px dashed var(--gray900); text-align: center; padding: 20px; border-radius: 8px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.formStyle .upload input[type="file"] + .clickUpload:hover{ background-color: var(--primary25); border-color: var(--primary300); }
.formStyle .upload input[type="file"] + .clickUpload:hover .icon{ background-color: var(--primary100); border-color: var(--primary50); }
.formStyle .upload input[type="file"] + .clickUpload .icon{ width: 52px; height: 52px; line-height: 40px; margin: 0 auto 12px; border: 6px solid var(--gray50); border-radius: 50%; text-align: center; background-color: var(--gray100); position: relative; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.formStyle .upload input[type="file"] + .clickUpload .icon svg{ width: 20px; height: 20px; }
.formStyle .upload input[type="file"] + .clickUpload .text{ color: var(--gray600); }
.formStyle .upload input[type="file"] + .clickUpload .text strong{ color: var(--primary700); font-weight: 600; }
.formStyle .upload input[type="file"] + .clickUpload .text p{ font-size: 12px; line-height: 18px; margin-top: 4px; }
.formStyle .upload input[type="file"].error + .clickUpload{ border-color: var(--error300); box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; }
.formStyle .upload.fullwidth input[type="file"] + .clickUpload{ width: 100%; margin-left: 0; }
.formStyle .ng-select .ng-select-container{ height: 44px !important; cursor: pointer; padding: 10px 14px; border: 1px solid var(--gray300) !important; border-radius: 8px !important; background-color: transparent !important; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0.004em; color: var(--gray900); width: 100%; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); }
.formStyle .ng-select .ng-value-container{ padding: 0 !important; position: relative; overflow: visible !important; }
.formStyle .ng-select .ng-arrow-wrapper{ background-image: url(../images/select-down.svg);  background-size: 20px; background-position: center; background-repeat: no-repeat; }
.formStyle .ng-select .ng-arrow-wrapper .ng-arrow{ border: 0; }
.formStyle .ng-dropdown-panel{ margin-top: 3px !important; border: 1px solid var(--gray300); border-radius: 8px !important; overflow: hidden; }
.formStyle .ng-select .ng-clear-wrapper{ color: var(--gray500); text-align: center; }
.formStyle .ng-select.ng-select-focused .ng-select-container{ border-color: var(--primary300) !important; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; }
.formStyle .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF; }
.formStyle .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.formStyle .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{ font-weight: 400; color: var(--primary500); background-color: var(--primary25); }
.formStyle .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.formStyle .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{ font-weight: 400; }
.formStyle .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{ background-color: var(--primary25); }
.formStyle .ng-select input{ padding: 0 !important; cursor: pointer; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; }
.formStyle .ng-select input:focus{ box-shadow: initial !important; -webkit-box-shadow: initial !important; -moz-box-shadow: initial !important; border-color: initial !important; }
.formStyle .ng-select.ng-select-multiple .ng-select-container{ height: auto !important; min-height: 44px !important; line-height: 0; padding: 7px 14px; }
.formStyle .ng-select.ng-select-multiple .ng-select-container .ng-value-container{ padding: 0; gap: 5px; line-height: 0; }
.formStyle .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{ padding: 0; }
.formStyle .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{ cursor: pointer; color: var(--gray900); line-height: 22px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
.formStyle .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{ padding: 4px 12px; margin: 0; border-radius: 16px; display: flex; align-items: center; flex-direction: row-reverse; flex-wrap: wrap; font-size: 14px; color: var(--orange700); background-color: var(--orange50); margin-right: 5px; line-height: 20px; font-weight: 500; }
.formStyle .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{ padding: 0; }
.formStyle .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{ border-right: 0 !important; padding: 0 0 0 7px; color: var(--orange500); font-size: 18px; font-weight: 500; }
.formStyle .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{ background-color: transparent; }
.formStyle .ng-select.ng-select-single .ng-select-container{ height: auto !important; min-height: 44px !important; padding: 9px 14px; background-color: var(--white) !important; }
.formStyle .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{  top: initial; padding: 0; cursor: pointer; }
.formStyle .ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{ display: none; }
.formStyle .ng-select.error .ng-select-container{ border-color: var(--error300) !important; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2; background-image: url(../images/alert-circle.svg); background-size: 16px; background-position: calc(100% - 14px) 13px; background-repeat: no-repeat; padding-right: 35px; }
.formStyle .ng-select .ng-select-container .ng-value-container .ng-placeholder{ color: var(--gray500); }
.formStyle .md-drppicker{ padding: 16px; border-radius: 8px; border: 1px solid var(--gray100); box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); -webkit-box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); -moz-box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); }
.formStyle .md-drppicker *{ font-family: 'Inter', sans-serif; }
.formStyle .md-drppicker .calendar{ max-width: initial !important; margin: 0 !important; }
.formStyle .md-drppicker .calendar.left{ border-right: 1px solid var(--gray200); padding: 0 10px 0 0; }
.formStyle .md-drppicker .calendar.right{ padding: 0 0 0 10px; }
.formStyle .md-drppicker .calendar th,.formStyle .md-drppicker .calendar td{ width: 40px; min-width: 40px; height: 40px; border: 0 !important; }
.formStyle .md-drppicker th.month{ font-size: 16px; line-height: 24px; font-weight: 600; color: #344054; background-color: transparent; }
.formStyle .md-drppicker .calendar th{ background-color: transparent; color: var(--gray700); font-size: 14px; line-height: 20px; font-weight: 500; }
.formStyle .md-drppicker .calendar td{ font-size: 14px; line-height: 20px; font-weight: 400; color: var(--gray500); opacity: 1; }
.formStyle .md-drppicker td.available.prev,.formStyle .md-drppicker th.available.prev, .formStyle .md-drppicker td.available.next,.formStyle .md-drppicker th.available.next{ background-color: transparent; }
.formStyle .md-drppicker td.in-range{ background-color: var(--primary50); color: var(--gray700); font-weight: 500; }
.formStyle .md-drppicker td.active,.formStyle .md-drppicker td.active:hover,.formStyle .md-drppicker td.start-date,.formStyle .md-drppicker td.end-date{ background-color: var(--primary600); color: var(--white); }
.formStyle .md-drppicker td.available:hover,.formStyle .md-drppicker th.available:hover{ background-color: var(--primary50); }
.formStyle .md-drppicker .buttons{ clear: left; margin: 0; border-top: 1px solid var(--gray200); padding-top: 16px; }
.formStyle .md-drppicker .btn{ background-color: var(--primary600); border: 1px solid var(--primary600); color: var(--white); font-size: 14px; line-height: 20px; font-weight: 600; padding: 9px 15px; border-radius: 8px; cursor: pointer; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; text-transform: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
.formStyle .md-drppicker .btn:hover{ background-color: var(--primary700); border-color: var(--primary700); }
.formStyle .md-drppicker .ranges{ border-right: 1px solid var(--gray200); }
.formStyle .md-drppicker .ranges ul li{ background-color: transparent !important; }
.formStyle .md-drppicker .ranges ul li button{ padding: 10px 15px; overflow: hidden; min-width: 160px; background-color: transparent; color: var(--gray700); font-size: 14px; line-height: 20px; font-weight: 500; border-radius: 6px; }
.formStyle .md-drppicker .ranges ul li button.active,.formStyle .md-drppicker .ranges ul li button:hover{ background-color: var(--gray50); color: var(--gray700); }
.formStyle .tagStyle{ padding: 4px 8px; border-radius: 6px; color: var(--primary700); background-color: var(--primary50); font-weight: 600; display: inline-block; }

.mat-input-element::-webkit-input-placeholder{ color: var(--gray500) !important; }
.mat-datepicker-content{ box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03) !important; border-radius: 8px !important; }
.mat-datepicker-content *{ font-family: "Inter", sans-serif !important; }
.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){ border-color: var(--primary600) !important; color: var(--primary600) !important; background-color: var(--primary50) !important; }
.mat-calendar-body-selected{ background-color: var(--primary600) !important; }
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){ background-color: var(--primary50) !important; }
.mat-datepicker-toggle, .mat-datepicker-content .mat-calendar-next-button, .mat-datepicker-content .mat-calendar-previous-button{ color: var(--gray500) !important; }

.formStyle .linkIconWrap{ position: relative; }
.formStyle .linkIconWrap .linkIcon{ position: absolute; left: 15px; top: 50%; line-height: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); }
.formStyle .linkIconWrap input{ padding-left: 42px !important; }

.switch input{ display: none; z-index: -9999999; position: absolute; }
.switch input + label{ position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; column-gap: 10px; margin: 0; cursor: pointer; color: var(--gray500); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; user-select: none; }
.switch input + label span{ display: inline-block; position: relative; }
.switch input + label span:before{ content: ""; width: 36px; height: 20px; margin: 0; display: block; border-radius: 12px; background-color: var(--primary50); }
.switch input + label span:after{ content: ""; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background-color: var(--white); position: absolute; left: 2px; top: 2px; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.switch input:checked + label{ color: var(--primary600); }
.switch input:checked + label span:before{ background-color: var(--primary600); }
.switch input:checked + label span:after{ left: initial; left: 18px; }
.switch.center label{ justify-content: center; }
.switch.right label{ justify-content: flex-end; }
.switch.lg input + label span:before{ width: 44px; height: 24px; }
.switch.lg input + label span:after{ width: 20px; height: 20px; }
.switch.lg input:checked + label span:after{ left: 22px; }
.showTab{ display: none; }

/*Login Signup Forgot*/
.loginSingup { min-height: 100vh; padding: 30px 216px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.loginSingup > div{ flex: 1; }
.loginBlock { background-color: #FFFFFF; padding: 48px 32px; border-radius: 24px; max-width: 552px; width: 100%; }
.loginBlock .loginBlockTitle { margin: 32px 0; }
.loginBlock .loginBlockTitle .loginBlockIcon { margin-bottom: 24px; }
.loginBlock .loginBlockTitle .loginBlockNoti { margin-top: 24px; background-color: var(--success25); border: 1px solid var(--success500); color: var(--success700); padding: 15px; border-radius: 8px; }
.loginBlock .loginBlockTitle .loginBlockNoti strong { font-weight: 500; }
.loginBlock .loginBlockTitle h1 + p { margin-top: 12px; color: var(--gray600); }
.loginBlock .loginBlockOR { text-align: center; margin: 32px 0 16px; position: relative; font-weight: 500; color: var(--gray600); }
.loginBlock .loginBlockOR::before{ content: ""; width: 100%; height: 1px; position: absolute; top: 50%; left: 0; background-color: var(--gray300); transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); }
.loginBlock .loginBlockOR span { position: relative; background-color: var(--white); padding: 0 8px; }
.loginBlock .loginBlockSocial ul { gap: 12px; width: 100%; }
.loginBlock .loginBlockSocial ul li { width: calc(50% - 6px); }
.loginBlock .loginBlockSocial ul li a { text-align: center; width: 100%; line-height: 30px; border: 1px solid var(--gray300); padding: 0 15px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 100px; }
.loginBlock .loginBlockSocial ul li a svg { vertical-align: middle; width: 14px; }
.loginBlock .loginBlockSocial ul li a:hover { background-color: var(--gray50); }
.loginBlock .loginBlockSocial ul li.facebook{ padding: 6px 10px 6px 28px; text-align: right; }
.loginBlock .loginBlockSocial ul li.facebook a{ background-color: #1877F2; border-color: #1877F2; }
.loginBlock .loginBlockSocial ul li.facebook a:hover{ background-color: #0C63D4; }
.loginBlock .loginBlockSocial ul li iframe{ margin: 0 !important; width: 100% !important; }
.loginBlock .singupLink { margin: 32px 0 0; }
.loginBlock .singupLink a { margin-left: 4px; }
.loginBlock .singupLink a svg { vertical-align: middle; margin-right: 12px; stroke: var(--primary700); transition: all ease .3s; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; }
.loginBlock .singupLink a:hover svg { stroke: var(--primary600); }
 
/*Dashboard*/
.alertbar{ font-weight: 600; padding: 5px 70px; z-index: 1; position: fixed; left: 0; top: 0; width: 100%; margin-top: -50px; min-height: 50px; opacity: 0; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; gap: 12px; }
.alertbar .close{ position: absolute; right: 44px; top: 50%; transform: translateY(-50%); -webkit-trans: translateY(-50%); -moz-transform: translateY(-50%); }
.alertbar .close svg{ vertical-align: bottom; }
.alertbar.success{ background-color: var(--success50); color: var(--success700); }
.alertbar.success svg { stroke: var(--success700);}
.alertbar.error{ background-color: var(--error600); color: var(--gray25); }
.alertbar.import{ background-color: var(--primary50); color: var(--primary700); }
.alertBarEnable .alertbar{ margin-top: 0; opacity: 1; }
.alertBarEnable .sidebar{ height: calc(100% - 50px); top: 50px; }
.alertBox{ position: fixed; right: 32px; top: 116px; max-width: 390px; width: calc(100% - 32px); opacity: 0; gap: 16px; visibility: hidden; z-index: 9; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.alertBox .alertBoxInner{ padding: 12px; width: 100%; position: relative; border-radius: 12px; border: 1px solid var(--warning200); background-color: var(--warning50); box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -webkit-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -moz-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); }
.alertBox .close{ position: absolute; right: 16px; top: 16px; line-height: 0; }
.alertBox .icon{ width: 40px; }
.alertBox .icon svg,.alertBox .icon img{ max-width: 40px; vertical-align: bottom; }
.alertBox .text{ width: calc(100% - 40px); padding-left: 17px; padding-right: 44px; color: var(--gray600) }
.alertBox .text h6{ margin-bottom: 4px; }
.alertBox .text p{ overflow-wrap: break-word; }
.alertBox .success{ background-color: var(--success50); border-color: var(--success200); }
.alertBox .error{ background-color: var(--error50); border-color: var(--error200); }
.alertBoxEnable .alertBox{ opacity: 1; visibility: visible; }
.alertOverlay{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99; background-color: rgba(16, 24, 40, 0.75); }
.alertOverlay .alertOverlayInner{ background-color: var(--white); padding: 24px; border-radius: 12px; margin-left:  auto; margin-right: auto; max-width: 544px; width: calc(100% - 30px); position: relative; }
.alertOverlay .alertOverlayInner .close{ position: absolute; right: 22px; top: 22px; line-height: 0; }
.alertOverlay .alertOverlayInner .icon{ width: 48px; }
.alertOverlay .alertOverlayInner .text{ width: calc(100% - 48px); padding-left: 24px; padding-right: 25px; color: var(--gray600); }
.alertOverlay .alertOverlayInner .text h4{ margin-bottom: 8px; }
.alertOverlay .alertOverlayInner .actions{ width: 100%; gap: 12px; padding-top: 32px; }
.alertOverlayEnable .pageContainer{ filter: blur(8px); }
.sidebar{ width: 320px; position: fixed; left: 0; top: 0; flex-direction: column; background-color: var(--primary25); height: 100vh; padding: 16px; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; overflow-y: auto; overflow-x: hidden; }
.sidebar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: #F1F1F1; }
.sidebar::-webkit-scrollbar { width: 8px; background-color: #F1F1F1; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 8px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .1); background-color: #5e17eb; }
.sidebar .logo{ padding-bottom: 24px; width: 100%; -webkit-transition: width .3s ease; -moz-transition: width .3s ease; transition: width .3s ease; }
.sidebar .logo a{ min-height: 81px; }
.sidebar .logo .logoSmall{ display: none; opacity: 0; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.sidebar .logo .logoBig{ display: block; opacity: 1; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.sidebar .menu ul{ gap: 16px; padding: 35px 0 52px; border-top: 1px solid var(--gray300); }
.sidebar .menu ul li{ width: 100%; }
.sidebar .menu ul li a{ min-width: 288px; padding: 12px 19px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; color: var(--gray700); border-radius: 100px; width: 100%; }
.sidebar .menu ul li a svg{ transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.sidebar .menu ul li a span{ display: inline-block; margin-left: 15px; transition: all ease .3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.sidebar .menu ul li a:hover,.sidebar .menu ul li.active a{ background-color: var(--primary50); color: var(--primary700); }
.sidebar .menu ul li a:hover svg,.sidebar .menu ul li.active a svg{ stroke: var(--primary600); }
.sidebar .footer{ margin-top: auto; width: 100%; padding-top: 16px; border-top: 1px solid var(--gray300); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.sidebar .footer .copyright{ color: var(--primary600); font-weight: 500; }
.mainContainer{ width: calc(100% - 320px); position: relative; padding-left: 107px; padding-right: 32px; -webkit-transition: width .3s ease; -moz-transition: width .3s ease; transition: width .3s ease; }
.mainContainer .sidebarToggle{ position: fixed; left: 320px; top: 35px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.mainContainer .sidebarToggle a{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; line-height: 34px; text-align: center; border: 1px solid var(--gray300); background-color: var(--white); border-radius: 8px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -moz-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); }
.mainContainer .sidebarToggle a svg{ width: 12px; vertical-align: middle; display: inline-block; stroke: var(--gray700); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; margin-bottom: 1px; }
.mainContainer .sidebarToggle a:hover{ background-color: var(--gray50); }
.mainContainer .header{ padding: 24px 0 12px; border-bottom: 1px solid var(--gray200); }
.mainContainer .header .headerLogin{ position: relative; }
.mainContainer .header .headerLogin .headerLoginBtn{ gap: 16px; }
.mainContainer .header .headerLogin .submenu{ position: absolute; top: calc(100% + 24px); right: 0; opacity: 0; z-index: 1; visibility: hidden; min-width: 240px; border-radius: 6px; box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -webkit-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -moz-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); }
.mainContainer .header .headerLogin .submenu.show{ visibility: visible; opacity: 1; }
.mainContainer .header .headerLogin .submenu li:first-child a{ border-radius: 8px 8px 0 0; }
.mainContainer .header .headerLogin .submenu li:last-child a{ border-radius: 0 0 8px 8px; }
.mainContainer .header .headerLogin .submenu a{ background-color: var(--white); border: 1px solid var(--gray200); color: var(--gray700); padding: 15px 16px; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mainContainer .header .headerLogin .submenu a:hover{ background-color: var(--gray50); }
.mainContainer .header .profileInfo{ color: var(--gray700); }
.mainContainer .header .role{ padding: 4px 8px; border-radius: 6px; color: var(--primary700); background-color: var(--primary50); font-weight: 600; display: inline-block; }
.mainContainer .header .profile img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center; }
.mainContainer .mainContainerBody{ padding-right: 73px; padding-bottom: 30px; }
.mainContainer .mainContainerBody.pr0{ padding-right: 0; }
.mainContainer .mainContainerBody .ContainerBodyInfo{ padding: 16px 0 32px; }
.mainContainer .mainContainerBody .ContainerBodyInfo .action{ gap: 12px; }
.mainContainer .mainTitle{ display: none; }
.mainContainer .breadcrumb ul{ gap: 32px; }
.mainContainer .breadcrumb ul li{ position: relative; }
.mainContainer .breadcrumb ul li svg{ vertical-align: bottom; }
.mainContainer .breadcrumb ul li:not(:last-child):before{ content: ""; width: 16px; height: 16px; background: url(../images/angle-right.svg) no-repeat center; background-size: 16px; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); }
.mainContainer .breadcrumb ul li span{ display: inline-block; background-color: var(--gray50); color: var(--gray700); padding: 4px 8px; border-radius: 6px; font-weight: 600; }
.mainContainer .breadcrumb ul li a{ color: var(--gray600); padding: 4px 8px; border-radius: 6px; }
.mainContainer .breadcrumb ul li a svg{ stroke: var(--gray600); }
.mainContainer .breadcrumb ul li a:hover{ color: var(--gray700); background-color: var(--gray50); }
.mainContainer .breadcrumb ul li a:hover svg{ stroke: var(--gray700); }
.myAccount .myAccountHeader{ padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--gray200); }
.myAccount .myAccountSidebar{ width: 292px; }
.myAccount .myAccountSidebar ul{  gap: 8px; flex-direction: column; }
.myAccount .myAccountSidebar ul li a{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--gray700); padding: 8px 26px; border-radius: 6px; }
.myAccount .myAccountSidebar ul li a svg{ stroke: var(--gray500); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.myAccount .myAccountSidebar ul li a:hover,.myAccount .myAccountSidebar ul li.active a{ color: var(--primary700); background-color: var(--primary50); }
.myAccount .myAccountSidebar ul li a:hover svg,.myAccount .myAccountSidebar ul li.active a svg{ stroke: var(--primary600); }
.myAccount .myAccountMain{ width: calc(100% - 292px); padding-left: 97px; }
.myAccount .myAccountMainTitle{ color: var(--gray600); margin-bottom: 24px; }
.myAccount .myAccountMainTitle h4{ margin-bottom: 4px; }
.myAccount .profileMain .profileMainInner{ padding-bottom: 24px; margin-bottom: 4px; border-bottom: 1px solid var(--gray200); }
.myAccount .profileMain .profilePic{ width: 126px; height: 126px; cursor: pointer; border-radius: 50%; background-color: #CEEAB0; overflow: hidden; position: relative; }
.myAccount .profileMain .profilePic img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.myAccount .profileMain .profilePic:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--black); opacity: 0; visibility: hidden; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.myAccount .profileMain .profilePic .hoverIcon{ opacity: 0; visibility: hidden; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.myAccount .profileMain .profilePic:hover:before{ opacity: 0.7; visibility: visible; }
.myAccount .profileMain .profilePic:hover .hoverIcon{ opacity: 1; visibility: visible; }
.myAccount .profileMain .profileActions{ padding-left: 20px; width: calc(100% - 126px); } 
.myAccount .profileMain .profileActions .profileBtn{ gap: 12px; }
.myAccount .profileMain .profileActions h6{ margin-bottom: 12px; font-weight: 500; }
.collapsed .sidebar{ width: 106px; }
.collapsed .sidebar .logo .logoSmall{ display: block; opacity: 1; }
.collapsed .sidebar .logo .logoBig{ display: none; opacity: 0; }
.collapsed .sidebar .menu ul li a{ min-width: initial; justify-content: center; padding: 12px 10px; }
.collapsed .sidebar .menu ul li a span{ display: none; margin: 0; }
.collapsed .sidebar .footer{ opacity: 0; }
.collapsed .mainContainer{ width: calc(100% - 106px); }
.collapsed .mainContainer .sidebarToggle{ left: 106px; }
.collapsed .mainContainer .sidebarToggle a svg{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }

/*My Podcast*/
.filter{ gap: 16px; padding: 20px 24px; border: 1px solid var(--gray200); border-radius: 12px 12px 0 0; }
.filter.formStyle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),.filter.formStyle select,.filter.formStyle textarea { height: 40px; border-radius: 100px; }
.filter.formStyle .ng-select .ng-select-container{ height: 40px !important; border-radius: 100px !important; }
.filter.formStyle .ng-select.ng-select-single .ng-select-container{ min-height: 40px !important; }
.filter.formStyle .ng-select.ng-select-single .ng-select-container .ng-placeholder{ color: var(--gray500); }

.filter .field{ width: calc(33.33% - 88px); }
.filter .actions{ width: 216px; }
.filter .actions .btn{ border-radius: 100px; }

.myPodcast{ position: relative; }
.myPodcast .status{ padding: 4px 12px; border-radius: 100px; font-weight: 500; background-color: var(--gray50); min-width: max-content; }
.myPodcast .status svg{ margin-right: 6px; }
.myPodcast .status.draft{ background-color: var(--warning50); color: var(--warning700); }
.myPodcast .status.draft svg{ stroke: var(--warning500); }
.myPodcast .status.publish{ background-color: var(--success50); color: var(--success700); }
.myPodcast .status.publish svg{ stroke: var(--success500); }
.myPodcast .status.order{ background-color: var(--fuchsia50); color: var(--fuchsia900); }
.myPodcast .status.download{ background-color: var(--success50); color: var(--success700); }
.myPodcast .status.fail{ background-color: var(--error50); color: var(--error700); }
.myPodcast .status.fail svg{ stroke: var(--error500); }
.myPodcast .table:not(.table-condensed){ border-radius: 12px 12px 0 0; overflow: hidden; border: 1px solid var(--gray200); border-bottom: 0; }
.myPodcast .table:not(.table-condensed) table{ border: 0; }
.myPodcast .tableWrapper{ border-left: 1px solid var(--gray200); border-right: 1px solid var(--gray200); }
.myPodcast table:not(.table-condensed){ width: 100%; text-align: center; }
.myPodcast table:not(.table-condensed) thead th{ padding: 12px 24px; font-weight: 600; background-color: var(--gray50); }
.myPodcast table:not(.table-condensed) thead th .sorting{ display: inline-flex; flex-wrap: wrap; flex-direction: column; vertical-align: middle; position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); }
.myPodcast table:not(.table-condensed) thead th .sorting a{ line-height: 0; }
.myPodcast table:not(.table-condensed) thead th .thTitle{ display: inline-block; position: relative; padding-right: 24px; }
.myPodcast table:not(.table-condensed) tbody td{  padding: 14px 24px; border-top: 1px solid var(--gray200); }
.myPodcast table:not(.table-condensed) tbody td .podcastImg{ width: 72px; }
.myPodcast table:not(.table-condensed) tbody td .podcastImg img{ width: 72px; height: 72px; object-fit: cover; object-position: center; border-radius: 6px; }
.myPodcast table:not(.table-condensed) tbody td .text{ width: calc(100% - 72px); text-align: left; padding-left: 12px; color: var(--gray500); }
.myPodcast table:not(.table-condensed) tbody td .text h5{ color: var(--gray800); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.myPodcast table:not(.table-condensed) tbody td .time{ display: block; color: var(--gray500); }
.myPodcast table:not(.table-condensed) tbody td .btn{ border-radius: 8px; }
.myPodcast table:not(.table-condensed) tbody td .action{ gap: 4px; position: relative; }
.myPodcast table:not(.table-condensed) tbody td .action a svg{ vertical-align: bottom; }
.myPodcast table:not(.table-condensed) tbody tr:nth-child(even) td{ background-color: var(--gray50); }
.myPodcast table:not(.table-condensed) tbody tr:hover .text h5{ color: var(--primary600); }
.myPodcast table:not(.table-condensed) tbody .author .icon{ width: 40px; }
.myPodcast table:not(.table-condensed) tbody .author .icon img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center; }
.myPodcast table:not(.table-condensed) tbody .author .text{ width: calc(100% - 40px); padding-left: 12px; }
.myPodcast .tableActions{ padding: 12px 24px 16px; border: 1px solid var(--gray200); border-radius: 0 0 12px 12px; box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -webkit-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -moz-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); }
.myPodcast .actionSubmenu { position: absolute; top: calc(100% + 3px); right: 0; display: none; min-width: max-content; border-radius: 6px; box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -webkit-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -moz-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); z-index: 1; }
.myPodcast .actionSubmenu li:first-child a { border-radius: 8px 8px 0 0; }
.myPodcast .actionSubmenu li:last-child a { border-radius: 0 0 8px 8px; }
.myPodcast .actionSubmenu a { background-color: var(--white); font-weight: 500; border: 1px solid var(--gray200); color: var(--gray700); padding: 15px 16px; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.myPodcast .actionSubmenu a:hover { background-color: var(--gray50); }
.myPodcast .actionSubmenu.show{ display: block; }
.myPodcast .copied{ gap: 8px; }
.myPodcast.noPagination .tableWrapper{ max-width: 100%; overflow: auto; border-bottom: 1px solid var(--gray200); border-radius: 0 0 12px 12px; }
.myPodcast.noPagination .tableActions{ display: none; }

.pagination{ gap: 2px; }
.pagination li{  overflow: hidden; font-weight: 500; min-width: 40px; min-height: 40px; line-height: 40px; text-align: center; }
.pagination li a{ min-width: 40px; height: 40px; line-height: 40px; border-radius: 8px; display: inline-block; text-align: center; font-weight: 500; color: var(--gray900); }
.pagination li.current span,.pagination li a:hover{ background-color: var(--primary50); color: var(--primary600); }
.pagination li span{ min-width: 40px; height: 40px; line-height: 40px; border-radius: 8px; display: inline-block; text-align: center; }
.importBox{ position: absolute; right: 0; top: 0; width: 100%; padding: 32px; max-width: 755px; background-color: var(--primary50); border-radius: 12px; box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); -webkit-box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); -moz-box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); z-index: 2; }
.importBox .close{ position: absolute; right: 26px; top: 26px; }
.importBox .icon{ width: 46px; }
.importBox .icon svg,.importBox .icon img{ max-width: 46px; }
.importBox .content{ width: calc(100% - 46px); padding-left: 20px; color: var(--gray600); }
.importBox .content h2{ color: var(--primary900); margin-bottom: 8px; padding-right: 20px; }
.importBox .content form{ margin-top: 20px; }
.importBox .content form label{ color: var(--primary600); }
.importBox .content form input{ background-color: var(--white) !important; }
.importBox .content form .selectHost{ position: relative; }
.importBox .content form .selectHost:before{ content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; background-image: url(../images/search.svg); background-size: 20px; background-position: center; background-repeat: no-repeat; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); }
.importBox .content form select{ background-color: var(--white) !important; padding-left: 42px !important; }
.myPodcast .myPodcastTitle{ color: var(--gray600); padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--gray200); }
.myPodcast .myPodcastTitle h2{ margin-bottom: 4px; }
.myPodcast .formStyle .formAction{ margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--gray200); }
.myPodcast .podcastInfo .image{ width: 158px; }
.myPodcast .podcastInfo .image img{ width: 158px; height: 158px; border-radius: 6px; object-fit: cover; object-position: center; }
.myPodcast .podcastInfo .text{ width: calc(100% - 158px); padding-left: 61px; }
.myPodcast .podcastInfo .text h2{ margin-bottom: 8px; }
.myPodcast .podcastInfo .podcastTag span{ background-color: var(--gray100); padding: 4px 12px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-radius: 16px; color: var(--gray700); }
.myPodcast .podcastInfo .podcastTag span .name{ display: inline-block; border-radius: 16px; background-color: var(--gray700); padding: 2px 10px; color: var(--white); }
.myPodcast .podcastInfo .podcastTag.withName span{ padding-left: 4px; }
.myPodcastDashboard .menu{ padding-top: 32px; width: 219px; }
.myPodcastDashboard .menu ul{ flex-direction: column; gap: 4px; max-width: 172px; }
.myPodcastDashboard .menu ul li a{ padding: 8px 12px; width: 100%; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--gray500); border-radius: 6px; }
.myPodcastDashboard .menu ul li a:hover,.myPodcastDashboard .menu ul li.active > a{ color: var(--primary700); background-color: var(--primary50); }
.myPodcastDashboard .menu .submenu{ padding: 4px 0; }
.myPodcastDashboard .menu .submenu .count{ margin-left: 8px; background-color: var(--primary50); color: var(--primary700); padding: 2px 8px; border-radius: 16px; font-size: 12px; line-height: 18px; font-weight: 500; display: inline-block; }
.myPodcastDashboard .menu .submenu a svg{ margin-right: 14px; margin-left: 8px; }
.myPodcastDashboard .myPodcastDashboardMain{ width: calc(100% - 219px); border-top: 1px solid var(--gray200); padding-top: 32px; }
.myPodcastDashboard .myPodcastDashboardMain .cards{ gap: 24px; margin-bottom: 24px; }
.myPodcastDashboard .myPodcastDashboardMain .card{ width: calc(25% - 18px); }
.myPodcastDashboard .myPodcastDashboardMain .card a{ position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; border: 1px solid var(--gray200); border-radius: 12px; padding: 24px; width: 100%; height: 100%; box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -webkit-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -moz-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); }
.myPodcastDashboard .myPodcastDashboardMain .card a *{ transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; }
.myPodcastDashboard .myPodcastDashboardMain .card a .content{ width: calc(100% - 66px); font-weight: 500; color: var(--gray500); }
.myPodcastDashboard .myPodcastDashboardMain .card a svg{ width: 66px; height: 66px; stroke: var(--primary50); }
.myPodcastDashboard .myPodcastDashboardMain .card a:hover{ background-color: var(--primary25); border-color: var(--primary200); }
.myPodcastDashboard .myPodcastDashboardMain .card a:hover svg{ stroke: var(--primary100); }
.myPodcastDashboard .myPodcastDashboardMain .card a:hover .content{ color: var(--primary900); }
.myPodcastDashboard .myPodcastDashboardMain .card a:hover h2{ color: var(--primary500); }
.myPodcastDashboard .myPodcastDashboardMain .cardBlock .cardheader{ margin-bottom: 20px; }
.myPodcastDashboard .myPodcastDashboardMain .filter .field{ width: 32%; }
.myPodcastDashboard .myPodcastDashboardMain .filter .field.width22{ width: calc(22.66% - 94px); }
.myPodcastDashboard .accordian .icon{ width: 46px; }
.myPodcastDashboard .accordian .icon svg{ width: 46px; height: 46px; }
.myPodcastDashboard .accordian .text{ width: calc(100% - 46px); padding-left: 12px; font-weight: 400; color: var(--gray600); }
.myPodcastDashboard .accordian .text h5{ color: var(--gray700); }
.myPodcastDashboard .accordian .content input{ border-radius: 100px !important; }
.myPodcastDashboard .accordianAction{ padding-top: 24px; }
.myPodcastDashboard .title{ color: var(--gray600); padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--gray200); }
.myPodcastDashboard .title h3{ margin-bottom: 4px; }

/*Clip Sharing*/
.clipSharing .filter .field{ width: calc(25% - 70px); }

/*Payment History*/
.paymentHistory .filter .field{ width: calc(20% - 59px); }
.paymentHistory .filter .actions{ width: 215px; }

/*Admin Podcast*/
.adminpodcast .filter .field:first-child{ width: calc(39% - 229px); }
.adminpodcast .filter .field:nth-child(2){ width: calc(33% - 229px); }
.adminpodcast .filter .field:nth-child(3){ width: calc(28% - 229px); }
.adminpodcast .filter .field:nth-child(4){ width: 123px; }
.adminpodcast .filter .actions{ width: 500px; gap: 16px; }
.addhost{ padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--gray200); }
.addhost .addhostSearch{ margin-bottom: 24px; }
.addhost .addhostSearch button{ flex: 1 0 auto; }
.adminhosts .filter .actions{ width: 216px; gap: 0; justify-content: space-between; }
.adminhosts .filter .field:first-child{ width: calc(39% - 135px); }
.adminhosts .filter .field:nth-child(2){ width: calc(33% - 135px); }
.adminhosts .filter .field:nth-child(3){ width: calc(28% - 135px); }
.adminhosts .filter .field:nth-child(4){ width: 125px; }
.managePermission form .row{ padding-top: 16px; padding-bottom: 16px; margin-left: 0; margin-right: 0; }
.managePermission form .row + .row{ border-top: 1px solid var(--gray200); margin-top: 0; }
.managePermission form .row .col12{ padding-left: 0; padding-right: 0; }
.managePermission form label{ font-size: 16px; line-height: 24px; margin: 0; }
.subscribers .filter .field:first-child,.subscribers .filter .field:nth-child(6){ width: 102px; }
.subscribers .filter .field:nth-child(2){ width: calc(25% - 129px); }
.subscribers .filter .field:nth-child(3){ width: calc(25% - 129px); }
.subscribers .filter .field:nth-child(4){ width: calc(25% - 129px); }
.subscribers .filter .field:nth-child(5){ width: calc(25% - 129px); }
.editSubscriber h2{ margin-bottom: 21px; }
.editSubscriber .formtitle h2{ padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--gray200); }
.editSubscriber .formStyle{ padding: 24px; margin-bottom: 52px; border: 1px solid var(--gray200); border-radius: 12px; box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -webkit-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -moz-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); }
.editSubscriber .formStyle .col3:not(.actions){ flex: 1; width: auto; }
.editSubscriber .formStyle .col3.actions{ width: auto; }
.editSubscriber .formStyle .col3.actions .actionsbutton{ min-height: 70px; }
.purchaseHistory h2{ margin-bottom: 21px; }
.categories .filter .field:first-child{ width: calc(46.5% - 88px); }
.categories .filter .field:nth-child(2){ width: calc(32% - 88px); }
.categories .filter .field:nth-child(3){ width: calc(21.5% - 88px); }
.settings .formStyle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),.settings .formStyle select,.settings .formStyle textarea{ height: 36px; font-size: 14px; line-height: 20px; }

.angular-editor-toolbar *{ font-family: 'Inter', sans-serif; }
.angular-editor-toolbar{ padding: 10px !important; background-color: var(--gray100) !important; border: 0 !important; border-radius: 8px; margin-bottom: 6px; }
.angular-editor-textarea{ margin-top: 0; }
.angular-editor-toolbar i.fa{ font-size: 16px; }
.angular-editor-toolbar .ae-font .ae-picker-label{ line-height: 30px; }
.angular-editor-button{ border: 0 !important; background-color: transparent !important; color: var(--gray500); }
.angular-editor-toolbar .angular-editor-toolbar-set .background{ background-color: var(--gray500) !important; }
.angular-editor-toolbar .angular-editor-toolbar-set .foreground .fa:after{ background-color: var(--gray500) !important; }
.angular-editor ul,.angular-editor ol{ padding-left: 18px; }
.angular-editor ul,.angular-editor ul li{ list-style: disc; }
.angular-editor ol,.angular-editor ol li{ list-style: decimal; }
.ae-font .ae-picker-label{ border: 0 !important; color: var(--gray500) !important; border-radius: 4px; }
.ae-font .ae-picker-label:hover{ background-color: var(--white) !important; }
.ae-font .ae-picker-label:hover:before{ background: linear-gradient(to right,rgb(255,255,255),#ffffff 100%) !important; }
.ae-font .ae-picker-label svg .ae-stroke{ stroke: var(--gray500) !important; }
.ae-font.ae-expanded .ae-picker-options{ color: var(--gray500); }
.ae-font .ae-picker-options .ae-picker-item.focused, .ae-font .ae-picker-options .ae-picker-item:hover{ background-color: var(--primary500) !important; color: var(--white) !important; }
.audioPlayer{ padding: 12px 20px; margin-bottom: 12px; background-color: var(--primary25); border-radius: 8px; gap: 24px; }
.audioPlayer button{ padding: 0; margin: 0; border: 0; background-color: transparent; cursor: pointer; }
.audioPlayer button svg{ vertical-align: bottom; }
.audioPlayer .audioInfo{ flex: 1; }
.audioPlayer .audioInfo .time{ color: var(--primary700); font-weight: 600; width: 60px; text-align: right; }
.audioPlayer .audioInfo .progress{ width: calc(100% - 145px); margin: 0 10px; background-color: var(--primary100); border-radius: 2.5px; height: 5px; position: relative; }
.audioPlayer .audioInfo .progress .progress-bar{ background-color: var(--primary700); border-radius: 2.5px; height: 5px; position: absolute; left: 0; top: 0; }
.audioPlayer .audioSize{ gap: 6px; background-color: var(--primary50); padding: 4px 12px; border-radius: 16px; color: var(--primary700); font-weight: 500; }
.noData{ padding: 50px 0; }
.noData svg{ width: 40px; height: 40px; fill: var(--primary500); }
.noData h4{ color: var(--gray900); font-weight: 400; }
.tooltip--dark{ background-color: var(--primary500) !important; font-family: 'Inter', sans-serif !important; z-index: 99; }
.tooltip--dark::before{ border-right-color: var(--primary500) !important; }
.sk-wave{ width: auto; }
.PodAudioPlay{ padding: 18px 48px; background-color: var(--gray900); position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1; }
.PodAudioPlay .podInfo,.PodAudioPlay .podVol{ width: 29.5%; }
.PodAudioPlay .podControl{ width: 41%; padding: 0 15px; }
.PodAudioPlay .currently-playing-clip{ color: var(--gray50); font-size: 18px; line-height: normal; gap: 24px; font-weight: 600; }
.PodAudioPlay .clip-image img{ width: 74px; height: 74px; border-radius: 6px; object-fit: cover; object-position: center; }
.PodAudioPlay .clip-detail{ width: calc(100% - 98px); }
.PodAudioPlay .clip-detail .author{ display: inline-block; margin-top: 8px; border-radius: 16px; background-color: var(--primary25); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--gray900); padding: 2px 10px; }
.PodAudioPlay .audio-seeker{ color: var(--primary25); font-size: 14px; line-height: 20px; font-weight: 600; gap: 10px; margin-top: 20px; }
.PodAudioPlay .audio-seeker .progress{ flex: 1; }
.PodAudioPlay .audio-seeker .progress-bar{ background-color: var(--gray700); border-radius: 3px; overflow: hidden; cursor: pointer; }
.PodAudioPlay .audio-seeker .progress-bar .progress-bar-pct{ height: 5px; background-color: var(--primary25); border-radius: 3px; }
.PodAudioPlay .controls{ gap: 25px; } 
.PodAudioPlay .controls > div{ line-height: 0; cursor: pointer; }
.PodAudioPlay .controls svg{ vertical-align: bottom; }
.PodAudioPlay .volume-control{  width: calc(100% - 68px); }
.PodAudioPlay .volume-control .progress{ cursor: pointer; padding: 0; margin-left: 15px; max-width: 116px; background-color: var(--gray700); border-radius: 3px; overflow: hidden; }
.PodAudioPlay .volume-control .progress .progress-bar{ height: 5px; background-color: var(--primary25); }
.PodAudioPlay .volume-control .audioInfo .volumIcon{ line-height: 0; }
.PodAudioPlay .close-player{ margin-left: 32px; line-height: 0; }
.PodAudioPlay .close-player .close-volume-control{ display: inline-block; cursor: pointer; }
.coupon .filter .field{ width: calc(20% - 60px); }
.stripeBox svg{ max-width: 100%; }
.stripeBox + .formAction a:hover{ color: var(--white); }

.commentMain{ border: 1px solid var(--gray200); border-radius: 12px; box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -webkit-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); -moz-box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); }
.commentMain .commentMainHeader{ padding: 20px 24px; border-bottom: 1px solid var(--gray200); }
.commentMain .commentMainHeader .commentMainTitle{ flex: 1; gap: 16px; }
.commentMain .commentMainHeader .commentMainTitle h2{ width: calc(100% - 72px); }
.commentMain .commentMainHeader .icon{ padding: 12px 18px; line-height: 0; max-width: max-content; background-color: var(--primary50); border-radius: 50px; }
.commentMain .commentBody{ position: relative; padding: 24px 32px; }
.commentMain .commentBody .action{ position: absolute; right: 0; top: 0; }
.commentMain .commentBody .action button{ background-color: transparent; border-color: transparent; width: 20px; height: 20px; }
.commentMain .commentBody .action .actionMenu { position: absolute; top: calc(100% + 3px); right: 0; display: none; min-width: max-content; border-radius: 6px; box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -webkit-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); -moz-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); z-index: 1; }
.commentMain .commentBody .action .actionMenu li:first-child a { border-radius: 8px 8px 0 0; }
.commentMain .commentBody .action .actionMenu li:last-child a { border-radius: 0 0 8px 8px; }
.commentMain .commentBody .action .actionMenu li + li{ margin-top: 0; }
.commentMain .commentBody .action .actionMenu a { background-color: var(--white); font-weight: 500; border: 1px solid var(--gray200); color: var(--gray700); padding: 15px 16px; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.commentMain .commentBody .action .actionMenu a:hover { background-color: var(--gray50); }
.commentMain .commentBody .action .actionMenu.show { display: block; }
.commentMain .commentBody .profile{ width: 52px; }
.commentMain .commentBody .profile img{ width: 52px; height: 52px; object-fit: cover; object-position: center; border-radius: 50%; }
.commentMain .commentBody .content{ width: calc(100% - 52px); padding-left: 32px; padding-right: 38px; }
.commentMain .commentBody > ul li{ position: relative; }
.commentMain .commentBody > ul li.hasReply:before{ content: ""; position: absolute; left: 26px; bottom: 0; width: 1px; height: calc(100% - 82px); border-left: 1px dashed var(--gray300); }
.commentMain .commentBody > ul li + li{ margin-top: 24px; }
.commentMain .commentBody > ul li h5{ color: var(--gray800); margin-bottom: 16px; }
.commentMain .commentBody > ul li h5 .time{ font-size: 9px; line-height: 18px; font-weight: 400; color: var(--gray500); margin-left: 8px; }
.commentMain .commentBody > ul li .text{ margin-bottom: 16px; font-size: 14px; line-height: 20px; color: var(--gray600); }
.commentMain .commentBody > ul li .reply{ font-size: 14px; line-height: 20px; font-weight: 600; }
.commentMain .commentBody > ul li .reply.open svg{ transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }
.commentMain .commentBody > ul li > ul{ margin-top: 40px; padding-left: 84px; }
.commentMain .commentBody > ul li > ul:not(.show){ display: none; }
.commentMain .commentBody .loadMore{ margin-top: 26px; }
.commentMain .addComment.show{ display: block; }
.commentMain .addComment{ margin-bottom: 48px; display: none; }
.commentMain .addComment .profileInfo{ gap: 16px; margin-bottom: 8px; } 
.commentMain .addComment textarea{ width: 100%; padding: 12px 0; margin-bottom: 16px; color: var(--gray500); font-size: 16px; font-weight: 400; border: 0; border-bottom: 1px solid var(--gray700); }
.commentMain .addComment .addCommentAction{ gap: 8px; }
.commentMain .content .addComment{ margin-top: 24px; margin-bottom: 0; }

.custom-toast { background-color: #fff8e1; border: 1px solid #ffeeba; color: #856404; padding: 15px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 20px; }
/* @media (min-width:1280px) {
    body .loginSingup { font-size: 0.833vw; }
    .loginSingup h1, .loginSingup .h1 { font-size: 1.563vw; }
    .loginSingup h2, .loginSingup .h2 { font-size: 1.250vw; }
    .loginSingup h3, .loginSingup .h3 { font-size: 1.042vw; }
    .loginSingup h4, .loginSingup .h4 { font-size: 0.938vw; }
    .loginSingup h5, .loginSingup .h5 { font-size: 0.833vw; }
    .loginSingup h6, .loginSingup .h6 { font-size: 0.729vw; }
    .loginSingup .fontsm { font-size: 0.729vw; }
    .loginSingup .formStyle .row { margin-left: -0.521vw; margin-right: -0.521vw; }
    .loginSingup .formStyle .row .col1,.loginSingup .formStyle .row .col2,.loginSingup .formStyle .row .col3,.loginSingup .formStyle .row .col4,.loginSingup .formStyle .row .col5,.loginSingup .formStyle .row .col6,.loginSingup .formStyle .row .col7,.loginSingup .formStyle .row .col8,.loginSingup .formStyle .row .col9,.loginSingup .formStyle .row .col10,.loginSingup .formStyle .row .col11,.loginSingup .formStyle .row .col12 { padding-left: 0.521vw; padding-right: 0.521vw; }
    .loginSingup .formStyle .row + .row { margin-top: 1.042vw; }
    .loginSingup .formStyle label { font-size: 0.729vw; line-height: 1.429; margin-bottom: 0.313vw; }
    .loginSingup .formStyle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),.loginSingup .formStyle select,.loginSingup .formStyle textarea { height: 2.292vw; padding: 0.521vw 0.729vw; border: 0.052vw solid var(--gray300); border-radius: 0.417vw; font-size: 0.833vw; box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05); -webkit-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05); -moz-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05); }
    .loginSingup .formStyle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):focus,.loginSingup .formStyle select:focus,.loginSingup .formStyle textarea:focus { box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #F4EBFF; -webkit-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #F4EBFF; -moz-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #F4EBFF; }
    .loginSingup .formStyle input[type="radio"]:active + label:before,.loginSingup .formStyle input[type="checkbox"]:active + label:before { box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #F4EBFF; -webkit-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #F4EBFF; -moz-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #F4EBFF; }
    .loginSingup .formStyle input[type="checkbox"]:not(.swtichCheck) + label { padding-left: 1.250vw; }
    .loginSingup .formStyle input[type="checkbox"]:not(.swtichCheck) + label:before { width: 0.833vw; height: 0.833vw; border-radius: 0.208vw; border: 0.052vw solid var(--gray300); top: 0.104vw; }
    .loginSingup .formStyle input[type="checkbox"]:not(.swtichCheck):checked + label:after { top: 0.104vw; width: 0.833vw; height: 0.833vw; background-size: 0.417vw; }
    .loginSingup .formStyle input[type="radio"] + label { padding-left: 1.250vw; }
    .loginSingup .formStyle input[type="radio"] + label:before { width: 0.833vw; height: 0.833vw; border: 0.052vw solid var(--gray300); top: 0.104vw; }
    .loginSingup .formStyle input[type="radio"]:checked + label:after { left: 0.208vw; top: 0.313vw; width: 0.417vw; height: 0.417vw; }
    .loginSingup .formStyle .showpass a { right: 0.729vw; }
    .loginSingup .formStyle .showpass a svg { width: 0.833vw; height: 0.833vw; }
    .loginSingup .formStyle .formAction { padding-top: 1.667vw; }
    .loginSingup .formStyle .formAction input,.loginSingup .formStyle .formAction button { border: 0.052vw solid var(--primary600); font-size: 0.833vw; padding: 0.469vw 1.042vw; border-radius: 0.417vw; }
    .loginSingup .formStyle input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]).error,.loginSingup .formStyle textarea.error,.loginSingup .formStyle select.error { background-size: 0.833vw; background-position: calc(100% - 0.729vw) 0.677vw; box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #FEE4E2; -webkit-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #FEE4E2; -moz-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #FEE4E2; }
    .loginSingup .formStyle input[type="checkbox"].error + label:before,.loginSingup .formStyle input[type="radio"].error + label:before { box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #FEE4E2; -webkit-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #FEE4E2; -moz-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05), 0px 0px 0px 0.208vw #FEE4E2; }
    .loginSingup .formStyle input + p { margin: 0.313vw 0 0; }
    .loginSingup .loginSingup { padding: 1.563vw 11.250vw; }
    .loginSingup .loginBlock { padding: 2.500vw 1.667vw; border-radius: 1.250vw; max-width: 28.750vw; }
    .loginSingup .loginBlock .logo img{ width: 8.229vw; height: 4.219vw; }
    .loginSingup .loginBlock .loginBlockTitle { margin: 1.667vw 0; }
    .loginSingup .loginBlock .loginBlockTitle .loginBlockIcon { margin-bottom: 1.250vw; }
    .loginSingup .loginBlock .loginBlockTitle .loginBlockIcon img{ width: 3.438vw; height: 3.438vw; }
    .loginSingup .loginBlock .loginBlockTitle .loginBlockNoti { margin-top: 1.250vw; border: 0.052vw solid var(--success500); padding: 0.781vw; border-radius: 0.417vw; }
    .loginSingup .loginBlock .loginBlockTitle h1 + p { margin-top: 0.625vw; }
    .loginSingup .loginBlock .loginBlockOR { margin: 1.667vw 0 0.833vw; }
    .loginSingup .loginBlock .loginBlockOR::before { height: 0.052vw; }
    .loginSingup .loginBlock .loginBlockOR span { padding: 0 0.417vw; }
    .loginSingup .loginBlock .loginBlockSocial ul { gap: 0.625vw; }
    .loginSingup .loginBlock .loginBlockSocial ul li a { border: 0.052vw solid var(--gray300); padding: 0.521vw 0.781vw; box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05); -webkit-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05); -moz-box-shadow: 0px 0.052vw 0.104vw rgba(16, 24, 40, 0.05); border-radius: 5.208vw; }
    .loginSingup .loginBlock .loginBlockSocial ul li a svg { width: 1.250vw; height: 1.250vw; }
    .loginSingup .loginBlock .singupLink { margin: 1.667vw 0 0; }
    .loginSingup .loginBlock .singupLink a { margin-left: 0.208vw; }
    .loginSingup .loginBlock .singupLink a svg { margin-right: 0.625vw; width: 0.781vw; height: 0.729vw; }
} */