/*
-- ==============================================================================
-- Author:  Prakash.Shanmugam
-- Create Date: 01-07-2024
-- Description: Zoho Vault Outsider Secret Colleciton form

-- Dependency:
-- ********************
-- Type             Responsible By              Called By
-- Page             Prakash.Shanmugam           Database History
-- ==============================================================================
*/
/*$Id: $*/

:root {
    --circle-bg-orange: #e0732d;
    --circle-bg-darkbrown: #594139;
    --circle-bg-green: #759d47;
    --circle-bg-blue: #3988cc;
    --circle-bg-cyan: #4296a5;
    --circle-bg-darkgreen: #1e4c41;
    --circle-bg-purple: #4b34a3;
    --circle-bg-red: #b04120;
    --circle-bg-darkblue: #22548f;
    --circle-bg-gray: #7c919c;
}
:root {
    --primaryTextColor:#4780da;
    --whiteTextColor:#ffffff;
    --bgWhiteColor:#ffffff;
    --bgGrayColor:#fafafa;
    --bgModalClose:#dddddd;
    --titleBorderColor:#ebedf2;
    --loginInputBorderColor:#dddddd;
    --otpInputBorderColor:#c2c2c2;
    --primaryBgColor:#4780da;
    --primaryBgColorLight:#f4f6fb;
    --primaryBorderColor:#4780da;
    --textColorBlackDarker:#000000;
    --textColorBlack:#222e44;
    --textColorBlackLighter:#5e6468;
    --textErrorColor:#fd4b4b;
    --inputErrorBorderColor:#fd4b4b;
    --inputErrorBgColor:#FFEDED;
    --tableThBgColor:#fafafa;
    --tableTdBorderColor:#F2F2F2;
    --alertSuccessIconBgColor:#4caf50;
    --alertFailureIconBgColor:#fd4b4b;
    --borderDefault:#dddddd;
}

/*========= VARIABLE =========*/
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   }
body {
    font: 400 13px/24px Zoho_Puvi_Regular;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 25px;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix { display: block;}
a { outline: none ; transition: all 0.2s ease; color: var(--primaryTextColor);}
a {
    text-decoration: none;
    outline: none;
    margin: 0;
    margin-right: 0px;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    cursor: pointer;
}
li {list-style: none; }
.bold, b { font-family: 'Zoho_Puvi_Bold'; }
.fullwidth { width: 100%; }
.dis--show { display: block !important; }
.dis--hide { display: none !important; }
.dis--flex { display: flex; }
.text--left { text-align: left; }
.text--center { text-align: center; }
.text--right { text-align: right; }
.align--left { display: flex; justify-content: flex-start; }
.align--center { display: flex; justify-content: center; }
.align--right { display: flex; justify-content: flex-end; }
.visiblity--hidden { visibility: hidden; }
.position--relative { position: relative; }

.mT5 { margin-top: 5px; }
.mT10 { margin-top: 10px; }
.mT15 { margin-top: 15px; }
.mT20 { margin-top: 20px; }
.mTB5 { margin-top: 5px; margin-bottom: 5px; }
.mTB10 { margin-top: 10px; margin-bottom: 10px; }
.mTB15 { margin-top: 15px; margin-bottom: 15px; }
.mTB20 { margin-top: 20px; margin-bottom: 20px; }
.mL5 { margin-left: 5px; }
.mL10 { margin-left: 10px; }
.mL15 { margin-left: 15px; }
.mL20 { margin-left: 20px; }

/*========= TYPOGRAPHY =========*/
@font-face {
    font-family: 'Zoho_Puvi_Regular';
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.eot);
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.eot) format("embedded-opentype"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.woff2) format("woff2"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Zoho_Puvi_RegularItalic';
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.eot);
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.eot) format("embedded-opentype"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.woff2) format("woff2"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_regular.otf) format("opentype");
    font-weight: 400;
    font-style: oblique;
    font-display: swap
}

@font-face {
    font-family: 'Zoho_Puvi_Medium';
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_medium.eot);
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_medium.eot) format("embedded-opentype"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_medium.woff2) format("woff2"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_medium.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Zoho_Puvi_SemiBold';
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.eot);
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.eot) format("embedded-opentype"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.woff2) format("woff2"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Zoho_Puvi_SemiBoldItalic';
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.eot);
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.eot) format("embedded-opentype"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.woff2) format("woff2"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_semibold.otf) format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: 'Zoho_Puvi_Bold';
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_bold.eot);
    src: url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_bold.eot) format("embedded-opentype"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_bold.woff2) format("woff2"), url(https://fonts.zohostatic.com/zohopuvi/3.5/zoho_puvi_bold.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
/*========= TOP BAND HEADER  =========*/
.topHeader {
    height: 50px;
    padding: 0 5px 0 15px;
    width: 100%;
    z-index: 11;
    display: flex;
    background: var(--primaryBgColor);
    border-bottom: 1px solid var(--titleBorderColor);
}
.topHeader__inner {
    width: 98%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vault__logo { display: flex; align-items: center; }
.vault--logo--img { width: 24px; height: 24px; }
.vault--logo--text { color: var(--whiteTextColor); font-size: 18px; margin-left: 16px; }
.topHeader__innerRight { display: flex; gap: 24px;  }
.topHeader__menu { display: inline-flex; align-items: center; gap: 8px; color:  var(--whiteTextColor); }
.topHeader--signout { color: var(--whiteTextColor); display: inline-flex; align-items: center; gap: 8px; }
.topHeader--signout--img { width: 16px; }
.topHeader--avatar { width: 32px; }

/*========= CONTAINER  =========*/
.container {
    display: flex;
    background: #ebedf2 url(../images/outsider-bg.1a20c33c24bc1da2f8a193996cd19a83.png);
    background-size: 50%;
    padding: 20px;
    height: calc(100vh - 50px); /* full viewport minus topHeader height */
    box-sizing: border-box;
    overflow: hidden;
}
.container__inner {
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    background: var(--bgWhiteColor);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* no page scroll — only the table tbody scrolls */
    min-height: 0;    /* allow flex children to shrink below content size */
}
.containerLeft { width: 40%; background: var(--bgWhiteColor); border: 1px solid var(--titleBorderColor); }
.containerRight { width: 60%; background: var(--bgWhiteColor); border: 1px solid var(--titleBorderColor); margin-left: 20px; }

.icon--edit, .icon--delete, .icon--plus, .icon--minus, .icon--view, .icon--hide {
    height: 14px;
    width: 14px;
    float: left;
    margin: 4px 10px 0 0;
    cursor: pointer;
}
.icon--edit { background: url(../images/edit.373e00e57fc0225078782b6128a05227.svg) no-repeat 0 0; }
.icon--delete { background: url(../images/delete.a6957d139160c968391e2266479dd3cd.svg) no-repeat 0 0; }
.icon--plus { background: url(../images/plus-line.7ac36e5cadb2eccc33d8532616d6decc.svg) no-repeat 0 0; }
.icon--minus { background: url(../images/minus-line.a1ef948a2d27f41fa726b21204a7dba5.svg) no-repeat 0 0; }
.icon--view { background: url(../images/view.7192a3bc35a7132b5a5e90a9d49fc14c.svg) no-repeat 0 0; }
.icon--hide { background: url(../images/hide.b46f46e587bcc515086bd623099215fd.svg) no-repeat 0 0; }
.icon--view, .icon--hide {
    width: 16px;
    height: 16px;
    margin: 0px;
}
.icon--plus, .icon--minus { margin: 0; width: 18px; height: 18px; }
.pageTitle { font-size: 18px; font-family: 'Zoho_Puvi_Bold'; margin: 0 0 15px 0; }

/*========= LOGIN =========*/
.loginMainPanel {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: rgb(250,250,250);
    background: #ebedf2 url(../images/outsider-bg.1a20c33c24bc1da2f8a193996cd19a83.png); background-size: 50%
}
.login__panel {
    width: 500px;
    border-radius: 24px;
    overflow: hidden;
    padding: 50px;
    text-align: center;
    position: relative;
    background: var(--bgWhiteColor);
    box-shadow: 0 0px 8px 1px rgb(0 0 0 / 5%);
}
.login__panel:after {
    /* content: ""; */
    background: rgb(199, 36, 54);
    background: linear-gradient(to right, rgb(199, 36, 54), rgb(10, 141, 84), rgb(19, 118, 178), rgb(250, 205, 37));
    height: 5px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.login__title { font-size: 22px; font-family: 'Zoho_Puvi_SemiBold'; }
.login__description { font-size: 14px; color: var(--textColorBlackLighter); text-align: center; }
.login__description a:hover { text-decoration: underline; }
.login--cta--button {
    border: none;
    background: var(--primaryBgColor);
    padding: 16px 20px;
    width: 100%;
    color: var(--whiteTextColor);
    font-size: 15px;
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer;
}
.login__logo__panel { display: flex; align-items: center; justify-content: center; margin: 0 0 25px 0; }
.login-vault--logo { width: 56px; }
.login__input__field { position: relative;  line-height: 44px; margin: 25px auto 0 auto; width: 100%; }
.login--label {
    position: absolute;
    top: 0;
    left: 20px;
    text-align: left;
    width: 100%;
    color: var(--textColorBlackLighter);
    transition: 0.2s all;
    cursor: text;
}
.login--input {
    width: 100%;
    border: 0;
    outline: 0;
    padding:15px 0 15px 20px;
    border: 1px solid var(--loginInputBorderColor);
    box-shadow: none;
    border-radius: 3px;
}
.login--input:focus,
.login--input:valid { border-color: var(--primaryBorderColor); }
.login--input:focus~label,
.login--input:valid~label {
    font-size: 12px;
    top: -15px;
    color: var(--primaryTextColor);
    font-family: 'Zoho_Puvi_Medium';
    background: #ffffff;
    width: auto;
    padding: 0 10px;
    left: 10px;
    line-height: 30px;
}

.login__error__field { display: flex; color: var(--textErrorColor); position: relative; top: 3px; }
.login--error .login--input { border-color: var(--inputErrorBorderColor); background: var(--inputErrorBgColor); }
.otp--input {
    width: 40px;
    height: 45px;
    outline: 0;
    padding: 15px 0 15px 0;
    border: 1px solid var(--otpInputBorderColor);
    box-shadow: none;
    border-radius: 3px;
    margin: 0 5px;
    font-size: 20px;
    text-align: center;
}
.login__separator {
    display: flex;
    height: 1px;
    background: var(--otpInputBorderColor);
    width: 140px;
    margin: 0 auto;
}
/*========= SCROLLBAR =========*/
* { scrollbar-width: thin; scrollbar-color: #cccccc #f9f9f9; }
*::-webkit-scrollbar { width: 12px; }
*::-webkit-scrollbar-track {
  background: #f9f9f9;
  border-left: 1px solid #f3f3f3;
  border-right: 1px solid #f3f3f3;
}
*::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 20px;
  border: 3px solid #f9f9f9;
}

.text-otp-seconds { color: var(--primaryTextColor); font-weight: bold; }

/*========= UNAUTHORISED ACCESS =========*/
.overlayBg {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
}
.unauthorised__container-panel {
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.unauthorised__content { text-align: center; }
.unauthorised--image { width: 220px; }
.unauthorised--cta--button {
    border: none;
    background: var(--primaryBgColor);
    padding: 7px 20px;
    display: inline-block;
    color: var(--whiteTextColor);
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}
.unauthorised--title {
    font-size: 20px;
    font-family: 'Zoho_Puvi_SemiBold';
    margin: 12px 0;
}
.unauthorised--description {
    font-size: 14px;
    color: var(--textColorBlackLighter);
    text-align: center;
    margin: 12px 0;
}

/*========= BUTTON =========*/
.btn { border: none; display: inline-block; border-radius: 4px; cursor: pointer; }
.btn--md { padding: 5px 15px; font-size: 13px; line-height: 24px; }
.btn--lg { padding: 16px 20px; font-size: 15px; }
.btn--primary { background: var(--primaryBgColor); color: var(--whiteTextColor); }
.btn--primary--line {color: var(--primaryTextColor);background: var(--bgWhiteColor);box-shadow: inset 0 0 0 1px var(--primaryBorderColor);}
.btn--cancel { background: var(--bgWhiteColor); color: var(--textColorBlack); border: 1px solid var(--titleBorderColor); }

/*========= ADDED PASSWORD LIST TABLE =========*/
.note__panel {
    background: #fcf5e3;
    border-left: 2px solid #ffc000;
    border-radius: 8px;
    padding: 12px 18px;
}
.added__password__requested__panel { display: flex; gap: 20px; }
.password__names__circle {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    border-radius: 100%;
    color: var(--whiteTextColor);
    justify-content: center;
    margin-right: 10px;
    text-transform: uppercase;
}
.outsiderTable tbody tr:nth-child(10n+1) .password__names__circle,
.outsiderDashboardItem:nth-child(10n+1) .outsiderDashboard__itemAvatar { background-color: var(--circle-bg-orange); }
.outsiderTable tbody tr:nth-child(10n+2) .password__names__circle,
.outsiderDashboardItem:nth-child(10n+2) .outsiderDashboard__itemAvatar { background-color: var(--circle-bg-darkbrown); }
.outsiderTable tbody tr:nth-child(10n+3) .password__names__circle,
.outsiderDashboardItem:nth-child(10n+3) .outsiderDashboard__itemAvatar { background-color: var(--circle-bg-green); }
.outsiderTable tbody tr:nth-child(10n+4) .password__names__circle,
.outsiderDashboardItem:nth-child(10n+4) .outsiderDashboard__itemAvatar { background-color: var(--circle-bg-blue); }
.outsiderTable tbody tr:nth-child(10n+5) .password__names__circle,
.outsiderDashboardItem:nth-child(10n+5) .outsiderDashboard__itemAvatar { background-color: var(--circle-bg-cyan); }
.outsiderTable tbody tr:nth-child(10n+6) .password__names__circle,
.outsiderDashboardItem:nth-child(10n+6) .outsiderDashboard__itemAvatar { background-color: var(--circle-bg-darkgreen); }
.outsiderTable tbody tr:nth-child(10n+7) .password__names__circle { background-color: var(--circle-bg-purple); }
.outsiderTable tbody tr:nth-child(10n+8) .password__names__circle { background-color: var(--circle-bg-red); }
.outsiderTable tbody tr:nth-child(10n+9) .password__names__circle { background-color: var(--circle-bg-darkblue); }
.outsiderTable tbody tr:nth-child(10n+10) .password__names__circle { background-color: var(--circle-bg-gray); }

.outsiderDashboardItem:nth-child(10n+1) .outsiderDashboard--subtitle { color: var(--circle-bg-purple); }
.outsiderDashboardItem:nth-child(10n+2) .outsiderDashboard--subtitle { color: var(--circle-bg-green); }
.outsiderDashboardItem:nth-child(10n+3) .outsiderDashboard--subtitle { color: var(--circle-bg-blue); }
.outsiderDashboardItem:nth-child(10n+4) .outsiderDashboard--subtitle { color: var(--circle-bg-red); }

.outsiderDashboardPanel { display: flex; justify-content: space-between; }
.outsiderDashboardItem {
    /* border: 1px solid var(--borderDefault); */
    display: flex;
    gap: 10px;
    width: 24%;
    padding: 12px 18px;
    border-radius: 8px;
}
.outsiderDashboardItem--bg1 { background: #edeaf9; }
.outsiderDashboardItem--bg2 { background: #eff7e6; }
.outsiderDashboardItem--bg3 { background: #e7f1f9; }
.outsiderDashboardItem--bg4 { background: #ffeee8; }
.outsiderDashboard__itemLeft { display: none; }
.outsiderDashboard__itemAvatar {
    width: 3px;
    height: 20px;
    display: inline-flex;
    color: var(--whiteTextColor);
    margin-top: 3px;
}
.outsiderDashboard--title {font-size: 13px; margin: 0;  }
.outsiderDashboard--subtitle { font-size: 20px; margin: 6px 0; font-family: 'Zoho_Puvi_Medium'; }

/*========= ADD PASSWORD FORM =========*/
.addPasswordContentInner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.add__password__form__section {
    /* background: var(--bgWhiteColor);
    box-shadow: 0 0px 2px 0px rgba(0, 0, 0, 0.2); */
    width: 700px;
    margin: 0 auto;
}
.panel__plus__minus {  margin: 4px 0 0 10px; }
.panel__plus__minus ul { margin: 0; padding: 0; }
.panel__plus__minus li { list-style: none; display: inline-flex; }
.panel__plus__minus li a {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.panel__plus__minus li a:hover { background: var(--primaryBgColorLight); }

/*========= TABLE DESIGN =========*/
.outsiderTable__wrapper {
    flex: 1;          /* grow to fill all remaining space in .container__inner */
    min-height: 0;    /* allow shrink below content size inside flex parent */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.outsiderTable {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid var(--borderDefault);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.outsiderTable thead {
    display: table;
    width: 100%;
    border-bottom: 1px solid var(--borderDefault);
    flex-shrink: 0;
}
.outsiderTable tbody {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
}
.outsiderTable thead tr,
.outsiderTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.outsiderTable th, .outsiderTable td {
    padding: 6px 12px;
    text-align: left;
    border-bottom: 1px solid var(--tableTdBorderColor);
}
.outsiderTable th {
    background: var(--tableThBgColor);
    font-family: 'Zoho_Puvi_SemiBold';
    font-size: 14px;
}
.outsiderTable th:nth-child(2), .outsiderTable td:nth-child(2) {  width: 350px;}
.outsiderTable th:nth-child(3), .outsiderTable td:nth-child(3) {  width: 150px;}

.outsiderTable__headerPanel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;  /* never shrink the header row */
}
.added__password__panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.flex1 { flex: 1; }

/*========= LIST COMMON =========*/
ul.outsiderActionList { margin: 0; padding: 0; }
.outsiderActionList li { list-style: none; display: inline-flex; margin: 0 2px; }
.outsiderActionList li a { 
    width: 32px;
    height: 32px;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.outsiderActionList li a:hover { background: var(--primaryBgColorLight); }
.outsiderActionList li a i { margin: 0;}

/*========= FORM DESIGN =========*/
.form__row { display:flex; margin-bottom: 16px; }
.form__left { flex: 1; align-items: center; display: inline-flex; }
.form--label { font-size: 13px; }
.form__center { flex: 2; display: inline-flex; justify-content: flex-start; flex-flow: column;}
.form__right { width: 80px; display: inline-flex; }
.form--input, .form--textarea { 
    border: 1px solid var(--loginInputBorderColor);
    height: 40px;
    border-radius: 4px;
    width: 100%;
    padding: 0 0 0 10px;
}
.form--textarea{
    height: 100px;
    resize: none;
}
.form--input--password {
    padding-right: 45px;
}
.form--input--error { border-color: var(--inputErrorBorderColor); background: var(--inputErrorBgColor); }
.form--input--error--msg { color: var(--textErrorColor); }
.mandatory--fields { color: var(--textErrorColor); }

/*========= MODAL POPUP DESIGN =========*/
.modalPanel {
    margin: 0 auto;
    background: var(--bgWhiteColor);
    z-index: 111;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
 }
.modal__header { background: var(--bgGrayColor); border-bottom: 1px solid var(--titleBorderColor); padding: 15px 20px; } 
.modal--header--title { font-size: 18px; font-family: 'Zoho_Puvi_SemiBold'; margin: 0; }
.modal__container { 
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow: auto;
 }
.modal__footer { background: var(--bgGrayColor); padding: 15px 20px;  }
.modal--close { 
    cursor: pointer;
    width: 32px;
    height: 33px;
    display: inline-flex;
    position: absolute;
    right: 20px;
    top: 13px;  
    border-radius: 100%;
    align-items: center;
    justify-content: center;
}
.modal--close:after { 
    content: "+";
    position: absolute;
    font-size: 28px;
    rotate: 45deg;
}
.modal--close:hover {  background: var(--bgModalClose); }
.modal--sm { width: 400px; }
.modal--md { width: 600px; }
.modal--lg { width: 800px; }

/*========= THANK YOU =========*/
.thankyouPanel {
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
 }
.thankyou__panel__inner { text-align: center; }

/*========= ALERT PANEL DESIGN =========*/
.alertPanel { 
  position: fixed;
  background: var(--bgWhiteColor);
  width: fit-content;
  right: 0;
  left: 0;
  top:20px;
  z-index: 1111;
  margin: auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.alertPanel__left { 
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
 }
.alert--icon--failure { background: var(--alertFailureIconBgColor); }
.alert--icon--success { background: var(--alertSuccessIconBgColor); }
.alertPanel__right { padding: 0 24px; display: inline-flex; align-items: center; }
.alert--icon { width: 24px; height: 24px; }
.alertPanel__container { display: flex;}

/*========= NO DATA PANEL =========*/
.noDataPanel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.nodata--image { width: 200px; }

.nodata--text {
    margin: 0px;
    padding: 0px;
}

.outsiderAvatarContainer { display: flex; }

.outsiderAvatarContainer__inner {
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    align-content: center;
    white-space: nowrap;
}

.toggle__password {
    position: absolute;
    right: 5px;
}

.custom-tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 9999;
    max-width: 50%;
}
/*======= LANGUAGE HEADER =======*/
.languageHeaderContainer {
    position:fixed;
    top:20px;
    right:20px;
    z-index: 1;
 }
 .languageChooseContainer {
     display:flex;
     align-items:center;
     gap:12px;
 }

 /*========= LANGUAGE DROPDOWN STYLE START */
 .labelText { font-weight: 600; font-size: 0.865rem; }
  .langSelect { position: relative; }
  .langSelectBtn {
      padding: 5px 32px 5px 12px;
      box-sizing: border-box;
      border-radius: 3px;
      width: 150px;
      cursor: pointer;
      position: relative;
      user-select: none;
      background: var(--bgWhiteColor);
      border: 1px solid var(--loginInputBorderColor);
      color: var(--textColorBlack);
      font-size: 0.9rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
  .langSelectBtn:after {
      content: "";
      position: absolute;
      top: 45%;
      right: 15px;
      width: 6px;
      height: 6px;
      transform: translateY(-50%) rotate(45deg);
      border-right: 2px solid var(--textColorBlackLighter);
      border-bottom: 2px solid var(--textColorBlackLighter);
      transition: 0.2s ease;
  }
  .langSelectBtn.toggle { border-radius: 3px 3px 0 0; }
  .langSelectBtn.toggle:after { transform: translateY(-50%) rotate(-135deg); }
  .langSelectDropdown {
      position: absolute;
      top: 100%;
      width: 100%;
      border-radius: 0 0 3px 3px;
      overflow-y: auto;
      max-height: 600px;
      z-index: 11;
      background: var(--colorWhite);
      border: 1px solid var(--loginInputBorderColor);
      transform: scale(1, 0);
      transform-origin: top center;
      visibility: hidden;
      transition: 0.2s ease;
  }
  .langSelectDropdown.langDropdown__toggle { visibility: visible; transform: scale(1, 1); }
  .langSelectDropdow__list { margin: 0; padding: 0; }
  .langSelectDropdow__list li { list-style: none; }
  .langSelectDropdow__list li a {
      display: block;
      padding: 2px 12px;
      color: var(--colorBlack);
      text-decoration: none;
      font-size: 0.85rem;
      border-bottom: 1px solid var(--loginInputBorderColor);
      background-color: var(--bgWhiteColor);
  }
  .langSelectDropdow__list li a:hover {background: var(--bgGrayColor);}
 /*========= LANGUAGE DROPDOWN STYLE END */
.container__inner{
  /* layout handled above in the CONTAINER section */
}
section.container__inner:has(.outerDashboard__submitForm--modal) {
  position: relative; /* kept for animation stacking context */
}
@keyframes submitModalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes submitModalSlideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}
.outerDashboard__submitForm--modal {
  width: 100%;
  position: fixed;
  bottom: 40px;
  left: 0;
  z-index: 100; /* above table content, below modals (z-index: 111) */
  pointer-events: none; /* let clicks pass through the empty space around the panel */
}
.outerDashboard__submitForm--modal .outsiderDashboardPanel {
  pointer-events: all; /* but the panel itself must be clickable */
}
.outerDashboard__submitForm--modal.modal--animate .outsiderDashboardPanel {
  animation: submitModalSlideUp 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
.outerDashboard__submitForm--modal.modal--exit .outsiderDashboardPanel {
  animation: submitModalSlideDown 0.3s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
}
.outerDashboard__submitForm--modal .outsiderDashboardPanel{
  max-width: 540px;
  margin-inline: auto;
  background: #232e47;
  border-radius: 12px;
  padding: 14px 20px;
  align-items: center;
  color: #fff;
  gap: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.outerDashboard__submitForm--modal .icon__div {
  line-height: 0;
  padding: 8px;
  background: #294772;
  border-radius: 50px;
}
.outerDashboard__submitForm--modal .inner__content span {
  font-size: 16px;
  font-weight: 600;
}
.outerDashboard__submitForm--modal p {
  margin: 0;
  color: #a1b1c6;
}
.outerDashboard__submitForm--modal .submit__button--container button {
  padding: 12px 34px;
  font-size: 14px;
  background: #1878fd;
  color: #FFF;
  box-shadow: rgb(17 72 148) 0px 5px 15px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.outerDashboard__submitForm--modal .submit__button--container button:hover {
  background: #1a67d2;
}
.outerDashboard__submitForm--modal img.btn_send-img {
  width: 14px;
  height: 14px;
  filter: invert(1);
  rotate: -40deg;
  margin-top: -1px;
}