:root {
    /***** Colors *****/
    --nfx-purple: #741ea9;
    --finax-dark-background: #131314;
    --dashboard-text: #344767;

    /***** HS code Tree *****/
    --chapter-tree: #fff1b8;
    --heading-tree: #ff7a7a;
    --subheading-tree: #e2b2ff;
    --clause-tree: #3498db;
    --subclause-tree: #ef54bc;

    /***** Tariff Table *****/
    --chapter-table: #a38300;
    --heading-table: #E71A1B;

    /***** HS Code Block *****/
    --subheading-block: #741ea9;
    --clause-block: #3498db;
    --subclause-block: #ef54bc;
}

* {
    box-sizing: border-box;
}

html {
    direction: rtl;
    margin: 0;
}

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    display: block;
    font-family: 'Arial', sans-serif;
}

/***** Flex Divs *****/
.full-width-col, .full-width-row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
}

.full-width-row {
    flex-direction: row;
}

.in-cont-col, .in-cont-row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.in-cont-row {
    flex-direction: row;
}

.row-reverse {
    flex-direction: row-reverse;
}

.horz-center {
    align-self: center;
}

.space-between {
    justify-content: space-between;
}

.space-evenly {
    justify-content: space-evenly;
}

.space-around {
    justify-content: space-around;
}

.gap-5 {gap: 5px;} .gap-10 {gap: 10px;} .gap-15 {gap: 15px;} .gap-20 {gap: 20px;} .gap-30 {gap: 30px;} .gap-40 {gap: 40px;} .gap-50 {gap: 50px;}

/***** User Icon *****/
.user-icon-cont {
    width: auto;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
}

.user-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    background-color: #ab2ff7;
    border-radius: 35%;
    cursor: pointer;
    user-select: none;
}

.user-icon:hover {
    background-color: var(--nfx-purple);
}

.user-menu-window {
    width: 260px;
    height: auto;
    display: none;
    top: 57px;
    position: absolute;
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #e1e1e1;
    z-index: 10;
}

.user-menu-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
}

.user-menu-name {
    color: var(--nfx-purple);
    font-weight: bold;
    font-size: 22px;
}

.user-menu-email {
    color: #5f5f5f;
    font-size: 12px;
}

.user-window-btn-cont, .user-window-btn-cont:visited {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 10px;
    gap: 10px;
}

.user-window-btn-cont:hover {
    background-color: #f1f1f1;
}

.user-menu-icon {
    width: 20px;
    height: 20px;
}

.user-window-btn-label {
    width: fit-content;
    height: auto;
    font-size: 16px;
    color: #000;
}



/***** Links And buttons *****/
.div-link {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.nfx-text-link, .nfx-text-link:visited {
    width: fit-content;
    display: inline;
    color: var(--nfx-purple);
    text-decoration: none;
}

.nfx-text-link:hover {
    text-decoration: underline;
}

.full-width-btn, .user-window-logoff-btn {
    width: 100%;
    height: auto;
    margin-top: 25px;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 50px;
    transition: all .2s ease-in;
    background-color: #9935ff;
    cursor: pointer;
}

.user-window-logoff-btn {
    width: 100%;
    padding: 5px;
    background-color: #e60000;
}

.user-window-logoff-btn:hover {
    background-color: #b60000;
}

.full-width-btn:hover {
    background-color: var(--nfx-purple);
}

/***** From Messages *****/
.error-msg, .ok-msg {
    width: 100%;
    height: auto;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 10px 5px;
    color: #ff0000;
    background-color: #ffdddd;
    border-bottom: 2px solid #ff0000;
}

.ok-msg {
    color: #008100;
    background-color: #acffba;
    border-bottom: 2px solid #008100;
}

/***** Input Fields *****/
.input-cont {
    width: 100%;
    height: auto;
    position: relative;
}

.input-label {
    display: none;
    width: fit-content;
    height: auto;
    top: -7px;
    right: 10px;
    padding: 0 5px;
    position: absolute;
    font-size: 13px;
    color: #ccc;
    user-select: none;
    z-index: 1;
    background: linear-gradient(180deg, transparent 36%, #fff 42%);
}

.label-focus {
    display: block;
    color: var(--nfx-purple);
}

.label-filled {
    display: block;
    color: #ccc;
}

.text-input-field, .tel-input-field, .digit-input-field, .password-input-field {
    width: 100%;
    height: auto;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 10px;
    outline: none;
}

.text-input-field:focus, .tel-input-field:focus, .digit-input-field:focus, .password-input-field:focus {
    border: 2px solid var(--nfx-purple);
}

.digit-input-field {
    width: 18px;
    text-align: center;
}

.pincode-verification-cont > .digit-input-field {
    width: 45px;
    text-align: center;
}

.select-input {
    width: auto;
    height: auto;
    max-height: 42.5px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 10px;
    outline: none;
}

.tip-text {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #5f5f5f;
}


.show-password {
    width: 26px;
    height: 26px;
    position: absolute;
    z-index: 1;
    top: 7px;
    left: 5px;
    cursor: pointer;
}

.show-password-on {
    filter: invert(34%) sepia(94%) saturate(2243%) hue-rotate(285deg) brightness(90%) contrast(97%);
}

.phone-number-cont {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
}

/***** Input filed with live resutls *****/
.live-results {
    width: 100%;
    height: auto;
    max-height: 300px;
    display: none;
    position: absolute;
    flex-direction: column;
    background-color: #fff;
    overflow-y: auto;
    border: 1px solid #ccc;
    z-index: 10;
}

.live-result-item {
    width: 100%;
    height: auto;
    padding: 10px;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}

.live-result-item:hover {
    background-color: #f1f1f1;
}

/***** Text Editor *****/
.tox-statusbar__branding {
    display: none;
}

.tox-promotion {
    display: none;
}


/***** Switches *****/
.switchLabel {
    width: auto;
    height: auto;
    float: right;
    color: #344767;
    font-size: 15px;
    margin-right: 6px;
}

.switch {
    position: relative;
    display: block;
    width: 30px;
    height: 16px;
    float: right;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 1px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #741ea9;
}

input:focus + .slider {
    box-shadow: 0 0 1px #741ea9;
}

input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 10px;
}

.slider.round:before {
    border-radius: 50%;
}

.pincode-verification-cont {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/***** Delete UI *****/
.delete-ui-cont {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #00000054;
}

.delete-window {
    width: 90%;
    max-width: 440px;
    height: auto;
    min-height: 100px;
    border-radius: 10px;
    background-color: #fff;
}

.delete-window-title {
    width: 100%;
    height: auto;
    padding: 5px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background-color: #b60000;
    border-radius: 10px 10px 0 0;
}

.delete-window-text {
    width: 100%;
    height: auto;
    padding: 20px;
    font-size: 16px;
    color: #000;
    text-align: center;
}

#delete-yes-btn, #delete-no-btn {
    width: auto;
    height: auto;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    background-color: #db0101;
    border-radius: 10px;
    cursor: pointer;
}

#delete-no-btn {
    background-color: #888888;
}

/***** Mobile *****/
@media (max-width: 678px) {

    .pincode-verification-cont {
        justify-content: center;
    }

}