/**************************************************************************/
/*Variables**********************************************/
/*******************************/
:root{
    --main_font: 'Roboto';
    --secondary_font: 'Exo 2';
    --third_font: '';
    --black1: #1E1E1E;
    --black2: #1D2327;
    --black3: #181818;
    --white1: #F0F0F1;
    --white2: #ffffff;
    --white3: #F6F7F7;
    --white4: #f4f6fd;
    --grey1: #9CA2A7;
    --grey2: #2C3338;
    --grey3: #c3c4c7;
    --grey4: #e7e7e7;
    --grey5: #747474;
    --main_color: #2271B1;
    --blue2: #135e96;
    --blue3: #72AEE6;
    --blue4: #509ad5;
    --blue5: #f4f8ff;
    --blue6: #9fb3c3;
    --blue7: #394285;
    --blue8: #0c1e40;
    --red1: #b12222;
    --red2: #961313;
    --green1: #1e9613;
    --green2: #187e09;
    --main_border: 1px solid var(--grey3);
    --main_border2: 1px solid var(--blue6);
    --dropshadow: 0 5px 15px rgb(0 0 0 / 20%);
    --dropshadow2: 0 0px 8px rgb(34 113 177 / 20%);
    --dropshadow3: 0 0px 4px rgb(0 0 0 / 30%);
    --dropshadow4: 0 0px 4px rgb(0 0 0 / 10%);
    --dropshadow5: 0 0px 2px 1px rgb(0 0 0 / 60%);
    --transition1: ease-out all 0.2s;
    --transition2: ease-out all 0.1s;
    --interface_gap: 20px;
}
/*******************************/
/********************************************************/
/**************************************************************************/



/**************************************************************************/
/*Main elements*****************************************/
/*******************************/
/*This section contains CSS rules for main elements (including body, header, footer, #content_container, .main_content)*/
body{
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    background-color: var(--white1);
}

/*All content exept nav*/
#content_container{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    z-index: 3;
}

/*All #content_container exept header and footer*/
.main_content{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--interface_gap);
    padding: var(--interface_gap);
    height: 100%; 
    background-color: var(--white1);
}

header, footer{
    background-color: #DBDBDB;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    background: linear-gradient(231deg,#000000 0%,#303030 61.77%,#000000 100%);
}

header *, footer *{
    color: var(--white1);
}

header *, footer *, .main_content_sample *{
    font-weight: 600;
}

footer{
    min-height: 30px;
}
/*******************************/
/********************************************************/
/**************************************************************************/



/**************************************************************************/
/*Global**********************************************/
/*******************************/
*{
    margin:0;
	padding:0;
	border: 0;
	box-sizing: border-box;

	font-family: var(--main_font), sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.6px;
    color: var(--black1);
    text-decoration: none;
    /*transition: var(--transition1);*/
}

details, details *{
    margin: revert;
    padding: revert;
}

h1 {
    font-size: 26px;
    font-weight: 500;
}

strong{
    font-weight: 500;
}

img{
    max-width: 100%;
    max-height: 100%;
}

.ta_r{
    text-align: right!important;
}

.ta_l{
    text-align: left!important;
}

.ta_c{
    text-align: center!important;
}

.no_border{
    border: unset!important;
}

.no_border_left{
    border-left: unset!important;
}

.hidden{
    display: none!important;
    opacity: 0!important;
    min-height: 0!important;
    height: 0!important;
}

.container{
    background-color: var(--white2);
    border: var(--main_border);
    /*box-shadow: var(--dropshadow);*/
    border-radius: 2px;
    overflow-y: hidden;
}

.solo_container{
    width: 100%;
    height: 100%;
    flex-direction: row!important;
}

.top_container{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.container .separator{
    background-color: rgba(0, 0, 0, 0.05);
    width: 100%;
}

.container span{
    font-size: 14px;
}
/*Page title*****************************/
.title_row{
    background: linear-gradient(0deg, rgb(223 223 223) 0%, rgb(255 255 255) 100%);
    padding: 10px;
    border-radius: 2px;
    border: var(--main_border);
    box-shadow: var(--dropshadow4);
}

.page_title{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.page_title svg{
    height: 24px;
    max-width: 24px;
    fill: var(--black1);
}

.page_title h1{
    font-size: 28px;
    color: var(--black1);
}
/**************************************/

.action_box_container,
.action_box_container#action_box_kyc_validation, 
.action_box_container#action_box_kyc_rejection{
    display: flex;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    /*transition: opacity 0.2s ease-out 0.2s, transform 0.2s ease-out 0s, background-color 0.2s ease-out 0s;*/
}

.action_box_container{
    transform: translateY(-100vh);
    transition: transform 0.2s ease-out 0.4s;
}

.action_box_container .action_box{
    max-width: 600px;
    transform: translateY(-100vh);
    opacity: 0;
    transition: opacity 0.2s ease-out 0s, transform 0.2s ease-out 0s;
}

.action_box.container{
    overflow: visible;
}

.action_box .title, .action_box .content{
    padding: 10px;
}

.action_box .title{
    border-bottom: var(--main_border);
}

.action_box_container .background{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    background-color: rgb(0, 0, 0, 0);
    transition: background-color 0.2s ease-out 0.2s;
}

.action_box_container.visible_action_box{
    transform: translateY(0);
    transition: transform 0s ease-out 0s;
}

.action_box_container.visible_action_box .action_box{
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.2s ease-out 0.2s, transform 0.2s ease-out 0.2s;
}

.action_box_container.visible_action_box .background{
    background-color: rgb(0, 0, 0, 0.6);
    transition: background-color 0.2s ease-out 0s;
}

body .action_box_container .container{
    min-width: 600px;
    max-height: 96vh;
    max-width: 80vw;
    width: unset;
    height: unset;
    box-shadow: var(--dropshadow);
}

.action_box_container .top_container{
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

body .action_box_container .action_box label{
    font-size: 16px;
}

.action_box_container .top_container span{
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
}

.action_box_container .top_container > div:not(.form_element.tel){
    width: 100%;
}

.action_box_container .close_action_box{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.action_box_container .close_action_box svg{
    width: 100%;
    height: 100%;
    transition: var(--transition1);
}

.action_box_container .close_action_box svg:hover{
    transform: rotate(180deg);
}

.action_box_container .action_box .title *{
    font-size: 16px;
    max-width: 90%;
}

.action_box_container .action_box .content{
    /*overflow-y: auto;*/
    overflow: visible;
}

.action_box .button[data-button-type*=confirmation]{
    background-color: var(--green1);
}

.action_box .button[data-button-type*=confirmation]:hover{
    background-color: var(--green2);
}

.action_box .button[data-button-type*=danger]{
    background-color: var(--red1);
}

.action_box .button[data-button-type*=danger]:hover{
    background-color: var(--red2);
}

.action_box .button[data-button-type*=black]{
    background-color: var(--black2);
}

.action_box .button[data-button-type*=black]:hover{
    background-color: var(--black1);
}

.separator{
    height: 1px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    width: 80%;
}

.form_container .form_body::-webkit-scrollbar, .images_selection::-webkit-scrollbar {
    display: none;
}

.table_container{
    overflow: auto;
}

.table_container, .table_container table{
    width: 100%;
}

.content-table {
    border-collapse: collapse;
    border-radius: 2px;
    box-shadow: var(--dropshadow2);
}

.content-table thead{
    position: sticky;
    top: 0;
}

.content-table thead tr {
    background: linear-gradient(0deg, rgb(223 223 223) 0%, rgb(249 249 249) 100%);
}

.content-table thead th{
    color: var(--white1);
    font-size: 14px;
}

.content-table td,
.content-table td {
    padding: 10px 0px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.content-table thead td span{
    background-color: unset!important;
    /*color: var(--white2)!important;*/
    font-weight: 500!important;
    border: unset!important;
    font-size: 14px!important;
}

.content-table td span{
    background-color: var(--blue5);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 500;
    border: var(--main_border2);
    font-size: 12px;
}

.content-table thead td:first-of-type{
    border-radius: 4px 0 0 4px;
}

.content-table thead td:last-of-type{
    border-radius: 0 4px 4px 0;
}

.content-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--grey3);
}

.content-table .separator_row{
    height: 6px;
}

.table_container2 .content-table{
    border-collapse: separate;
    border-spacing: 0;
}

.table_container2 .content-table thead td:first-of-type{
    border-radius: 0 0 0 0;
}

.table_container2 .content-table thead td:last-of-type{
    border-radius: 0 0 0 0;
}

.table_container2 tr:nth-of-type(even){
    background-color: var(--blue5);
}

.table_container2 td{
    border-left: var(--main_border);
    border-top: var(--main_border);
}

.table_container2 td:last-of-type{
    border-right: var(--main_border);
}

.table_container2 tbody tr:last-of-type td{
    border-bottom: var(--main_border);;
}

.table_container2 .content-table td span {
    background-color: unset;
    padding: 4px 12px;
    border-radius: none;
    border: unset;
    white-space: nowrap;
}

.table_container2 .content-table .separator_row{
    height: 2px;
    background-color: var(--main_color);
}

.table_container2 .content-table .separator_row2{
    height: 2px;
    background-color: var(--grey4);
}


.kyc_table thead{
    border: var(--main_border);
}

.kyc_table td span{
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    padding: 4px 8px;
}

.error_img{
    width: 80%;
}

.error_img img{
    filter: grayscale(1);
}

.error_txt{
    padding: 10px;
    width: 100%;
    background-color: var(--grey4);
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 40px;
}

[component-type="input"]:not([input-type="checkbox"]):not([input-readonly=true]) [component-part="input"]:focus, .chosen-container-active, .chosen-container-active .chosen-drop {
    border: solid 1px #4c7ca3;
    outline: solid 2px #4a7ea3c4;
    background-color: #ffffff; 
}

[component-type="input"][input-validated=true]:not([input-readonly=true]) [is-valid-icon]{
    box-shadow: 0 0 2px 2px #1a357466;
    outline: 1px solid var(--main_color);
}

[component-type="input"] .label_container svg{
    background-color: var(--main_color);
}

[component-type="input"] .chosen-container .chosen-results li.highlighted{
    background-image: linear-gradient(var(--main_color) 20%, var(--blue2) 90%)!important;
}
/*******************************/
/********************************************************/
/**************************************************************************/



/**************************************************************************/
/*Buttons**********************************************/
/*******************************/
.button{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    background-color: var(--main_color);
    cursor: pointer;
    /*border: var(--main_border);*/
    width: fit-content;
    transition: var(--transition1);
}

.button a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 500;
    padding: 7px 20px;
    gap: 10px;
}

.button span, .button p, .button a{
    color: var(--white1);
}

.button:hover{
    background-color: var(--blue2);
    box-shadow: var(--dropshadow2);
}

.button button{
    width: 100%;
    border: none;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
}

.disabled_button, .disabled_button:hover{
    background-color: var(--grey5)!important;
    cursor: not-allowed;
}

.disabled_button button{
    cursor: not-allowed;
}

.validation_button{
    background-color: var(--green1);
    box-shadow: 0px 0px 4px #368536;
}

.validation_button:hover{
    background-color: var(--green2);
    box-shadow: 0px 0px 4px #368536;
}

.forbidden_button{
    background-color: var(--red1);
}

.forbidden_button:hover{
    background-color: var(--red2);
}

.black_button{
    background-color: var(--black2);
}

.black_button:hover{
    background-color: var(--black1);
}

.static_button, .static_button:hover{
    background-color: var(--main_color);
    cursor: default;
    box-shadow: none;
}

.static_button a{
    text-transform: none;
    font-size: 12px;
    padding: 6px 12px;
}

.button svg{
    height: 16px;
    width: 16px;
    fill: var(--white1);
}
/*******************************/
/********************************************************/
/**************************************************************************/

/**************************************************************************/
/*Login screen**********************************************/
/*******************************/
.login_form{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23dfdbe5' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");*/
    background: linear-gradient(-45deg, #ffffff, rgba(171, 174, 186, 0.4), #ffffff, rgba(171, 174, 186, 0.4));
	background-size: 400% 400%;
	animation: gradient 12s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.index_container{
    border: var(--main_border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 400px;
    background-color: var(--white2);
    box-shadow: var(--dropshadow);
    border-radius: 2px;
}

.index_container > * {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.index_container *{
    text-align: center;
    font-size: 20px;
}

.index_container .img_container{
    height: 80px;
}

.index_container h2{
    font-size: 36px;
    font-weight: 500;
    text-transform: uppercase;
}

.index_container .button{
    width: 100%;
}

.index_container .button a{
    font-size: 18px;
}

.index_container .content_container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.index_container .text_container{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.language_selector_container{
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.language_selector_container select{
    font-size: 16px;
    max-width: 300px;
    min-width: 250px;
    background-color: var(--white1);
    border: var(--main_border);
    font-weight: 400;
    padding: 10px;
    transition: var(--transition1);
}
.language_selector_container select:hover{
    background-color: var(--white3);
    box-shadow: var(--dropshadow4);
}
.index_message_container{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.index_message_container span{
    font-size: 20px;
    font-weight: 500;
}
/*******************************/
/********************************************************/
/**************************************************************************/



/**************************************************************************/
/*Settings screen*****************************************/
/*******************************/
[data-controller=settings] [component-type="input"]{
    margin: 0;
    padding: 0;
}

.row.settings_blocs{
    flex-wrap: wrap;
    position: relative;
}

.row.settings_blocs > div{
    flex: 1 1 40%;
}

.language_timezone_container, body .language_timezone_container .content{
    overflow: visible;
}

.row.settings_blocs span{
    font-weight: 500;
}

.main_content_settings .title{
    border-bottom: var(--main_border);
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.main_content_settings .title *{
    font-size: 16px;
}

.title svg{
    max-height: 20px;
    max-width: 20px;
}

.title svg use{
    fill: #d53b19;
}

.buttons_container{
    display: flex;
    gap: 10px;
}

.container.mfa .buttons_container{
    display: flex;
    gap: 10px;
}

.container.mfa .button{
    min-width: unset;
}

.main_content2{
    align-items: flex-start;
    justify-content: flex-start;
    height: 100vh;
}

.main_content2 .container{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--interface_gap);
    width: 100%;
}

.single_row{
    height: calc(100% - 54px - var(--interface_gap));
}

.main_content2 .title{
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: var(--main_border);
    padding: 10px 10px;
}

.main_content2 .title *{
    font-size: 20px;
    font-weight: 500;
}

.main_content2 .content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    gap: 20px;
    height: 100%;
    overflow: hidden;
}

.content form{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 20px;
}

.content .select{
    display: flex;
    gap: 10px;
    align-items: center;
}

.content .button{
    /*min-width: 180px;*/
    min-width: 140px;
}

.content_box{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.title span{
    font-size: 12px!important;
}

.title .title_info_box{
    display: flex;
    align-items: center;
    background-color: var(--white3);
    padding: 4px 6px;
    border-radius: 2px;
    border: var(--main_border);
    gap: 10px;
}

.title .title_info_box .span_container{
    display: flex;
    gap: 3px;
}

.title span.highlighted{
    font-weight: 600;
}

.gor_marker{
    width: 10px;
    aspect-ratio: 1;
    background-color: var(--grey3);
    border-radius: 50%;
    border: var(--main_border);
}

.gor_marker.g_marker{
    background-color: var(--green1);
}

.gor_marker.r_marker{
    background-color: var(--red1);
}
.gor_marker.o_marker{
    background-color: #ff7c00;
}

.container.active{
    background-color: #609be540;
    box-shadow: 0 0 12px #2271b175;
    border: 1px solid var(--blue2);
}
/*******************************/
/********************************************************/
/**************************************************************************/



/**************************************************************************/
/*Dashboard************************************************/
/*******************************/
.content_box2{
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.bottom_button_container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.bottom_button_container .button{
    width: 100%;
}

.bottom_button_container .button a{
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 1.4px;
}
/*******************************/
/********************************************************/
/**************************************************************************/



/**************************************************************************/
/*KYC validator*******************************************/
/*******************************/
.col{
    width: 50%;
    height: 100%;
}

.col1{
    border-right: var(--main_border);
}

.form_row{
    display: flex;
    gap: 20px;
}

.form_col{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: -webkit-fill-available;
}

.col1 .form_body > .form_row, #edit_user_action_box .form_row, #role_action_box .form_row{
    padding: 8px 8px 8px 16px;
    width: calc(100% - 8px);
    border-radius: 2px;
    display: flex;
    gap: 10px;
}

.form_container{
    height: 100%;
    width: 100%;
    /*overflow-y: overlay;*/
}

.form_container form > div,.form_container form .top_form_verification, .form_container form .form_body{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.form_container form > div > div, .form_container form .top_form_verification > div{
    display: flex;
    width: 100%;
}

.form_container .form_row > div{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.form_container form{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.form_container form .long_text, .form_container form .long_text textarea{
    height: 100%;
}

.col1 .form_element label{
    font-size: 14px;
    font-weight: 500;
}

.form_body{
    overflow-y: overlay;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.form_body > div, #edit_user_action_box .form_row, #role_action_box .form_row{
    background-image: linear-gradient(45deg, var(--blue3), var(--blue3));
    background-color: #f1f6fa;
    background-position: top left;
    background-size: 6px 100%;
    background-repeat: no-repeat;
}

.form_body > div:nth-of-type(even), #edit_user_action_box .form_row:nth-of-type(even), #role_action_box .form_row:nth-of-type(even){
    background-image: linear-gradient(45deg, var(--blue2), var(--blue2));
    background-color: #deecf7;
    background-position: top left;
    background-size: 6px 100%;
    background-repeat: no-repeat;
}

#edit_user_action_box .form_row, #role_action_box .form_row{
    flex-direction: column;
}

.top_form_verification .buttons_container{
    display: flex;
    align-items: center;
    padding: 6px;
    gap: 10px;
}

.top_form_verification .action_buttons_container{
    display: flex;
    gap: 20px;
}

.top_form_verification .action_buttons_container .button{
    width: 160px;
}

.bottom_form_verification .button{
    width: 100%;
    min-height: 36px;
}

.bottom_form_verification .button a{
    font-size: 14px;
} 

.p_in_form{
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
}

.checkbox_container{
    display: flex;
    align-items: center;
    padding: 6px;
    gap: 20px!important;
}

.checkbox_item{
    display: flex;
    flex-direction: row-reverse;
    gap: 6px;
    padding: 6px 8px;
    background-color: var(--grey4);
    cursor: pointer;
    border-radius: 4px;
}

.checkbox_item *{
    cursor: pointer;
}

.checkbox_item span{
    /*font-size: 11px;*/
    font-weight: 500;
}

form .checked_checkbox{
    background-color: #d2e5d2;
    box-shadow: 0px 0px 4px #368536;
}
.col2_container{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: var(--black1);
    box-shadow: 0 0px 30px rgb(255 255 255 / 20%) inset;
}

.images_selection{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 80px;
    min-width: 80px;
    gap: 20px;
    overflow-x: overlay;
}

.slide_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    padding: 4px 20px;
}

.customer_img{
    background-color: var(--white3);
    width: 100%;
    height: 140px;
    min-height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    cursor: pointer;
    border: var(--main_border);
    position: relative;
}

.customer_img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-workspace{
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.1);
}

.image-workspace img{
    height: 100%;
}

.image_container{
    width: 100%;
    height: 100%;
}

.preview-container{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    background-color: var(--black1);
}

.preview_container_border{
    border: var(--main_border);
    padding: 2px;
    background-color: var(--black1);
}

.preview-cover{
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

.controlers .button svg, .controlers_container .button svg{
    height: 20px;
    width: fit-content;
    fill: var(--white1);
    aspect-ratio: 1;
}

.controler_buttons .button, .controlers_container .button{
    padding: 8px;
}

.selected_img{
    filter: drop-shadow(0px 0px 3px rgba(19, 93, 148, 1));
}

.images_selection .slide_container{
    padding: 0px 0px;
    align-items: flex-start;
    width: 100%;
}

.images_selection .slide_container .customer_img{
    width: 100%;
    height: 100px;
    min-height: 100px;
}

.controlers_container{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.col2_img_container, .col2_pdf_container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 20px;
}

.col2_pdf_container{
    height: 100%;
    width: 100%;
}

.selfie_img_cont{
    height: 300px;
    padding: 6px;
    background-color: var(--grey2);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--main_border);
}

.selfie_img_cont.no_picture img{
    max-width: 30%;
}

.selfie_img_count img{
    border-radius: 4px;
}

#action_box_kyc_rejection.visible_action_box .action_box{
    background: radial-gradient(white, #ebe3e3);
}

#action_box_kyc_validation.visible_action_box .action_box{
    background: radial-gradient(white, #e4ebe3);
}
/*******************************/
/********************************************************/
/**************************************************************************/














/**************************************************************************/
/*********************************************************/
/*******************************/

/*******************************/
/********************************************************/
/**************************************************************************/

select[name="kycv_mcc[]"]{
    display: flex!important;
    height: 1px;
    padding: 0;
    border: none;
    opacity: 0;
    transform: translateY(24px);
}

input.chosen-search-input{
    font-family: var(--main_font)!important;
    font-size: 12px!important;
    font-weight: 500!important;
    color: var(--black1)!important;
}

.chosen-container, .chosen-container *{
    cursor: pointer!important;
}

.chosen-container{
    width: 100%!important;

    /*margin-top: -4px; Might fix a bug*/
}

.chosen-container .chosen-choices{
    background-color: var(--white2);
    background-image: none;
    border: var(--main_border);
    border-radius: 4px;
}

.chosen-container-active .chosen-choices{
    border: var(--main_border)!important;
    box-shadow: var(--dropshadow3)!important;
}

.chosen-container-multi .chosen-choices li.search-choice{
    background-image: none!important;
    background-color: #e8eeff5c!important;
}

.chosen-container .chosen-drop{
    border: var(--main_border)!important;
    box-shadow: var(--dropshadow3)!important;
    border-radius: 4px;
}

.chosen-container .chosen-results li{
    font-size: 13px;
    font-weight: 500;
}

.row2{
    flex-direction: column;
    justify-content: flex-start;
}

.clearing_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.clearing_container h2{
    width: 300px;
}

.top_container2{
    align-items: flex-start;
}

.top_container3{
    gap: 10px;
}

.button2{
    background-color: var(--blue5);
    box-shadow: none;
    border-radius: 6px;
    border: 1px solid var(--blue2);
}

.button2 a{
    color: var(--black1);
    font-weight: 400;
    text-transform: none;
}

.button2:hover{
    background-color: rgba(34, 113, 177, 0.4);
    box-shadow: var(--dropshadow3);
}

table .button2{
    background-color: var(--grey4);
}

table .button2:hover{
    background-color: #D3E3EF;
    box-shadow: unset;
}

.button2.selected_item{
    box-shadow: var(--dropshadow);
    outline: 1px solid var(--main_color);
    background-color: rgba(34, 113, 177, 0.4);
}

.clearing_container form .button{
    margin-top: 10px;
}

.w_un{
    width: unset;
}

.h_un{
    height: unset;
}

.clearing_container .button{
    width: 100%;
}

.clearing_container2 .button a{
    justify-content: flex-start;
    font-weight: 500;
}

table.content-table td .button{
    /*Use margin-right-left auto to center the button*/
    margin-right: 6px;
    margin-left: 6px;
    min-width: unset;
    display: inline-block;
}

table.content-table td .button a{
    padding: 4px 6px;
}

.clearing_choose_account_row{
    width: unset;
    height: unset;
}

.clearing_choose_account_row .container{
    background-color: unset;
    border: unset;
    overflow: visible;
}

.clearing_choose_account_row .title{
    border: unset;
    padding: 0;
}

.clearing_choose_account_row .content{
    padding: 10px 0px;
    overflow: visible;
}

.clearing_next_row h2{
    font-size: 18px;
    font-weight: 500;
}

.clearing_next_row label{
    font-weight: 500;
    font-size: 14px;
}

.clearing_next_row .clearing_container{
    width: 320px;
}

.clearing_next_row form{
    gap: 10px;
}

.clearing_next_row[data-clearing-step=recap][data-clearing-status=success] h2{
    width: 100%;
    text-align: center;
    padding: 10px;
    border: 2px solid var(--green2);
    border-radius: 4px;
    background-color: #197610b5;
    color: var(--white1);
}

.clearing_next_row[data-clearing-status=error] h2{
    width: 100%;
    text-align: center;
    padding: 10px;
    border: 2px solid var(--red2);
    border-radius: 4px;
    background-color: #cd2b2bb5;
    color: var(--white1);
}

.clearing_container .form_row{
    flex-direction: column;
}

.form_row2{
    flex-direction: column;
}

.form_row2 .form_col{
    flex-direction: row;
    align-items: flex-end;
}

.form_row2 .form_element{
    margin-bottom: unset;
    width: 220px;
}

.form_row2 label, .form_row2 select, .form_row2 input[type=tel]{
    width: 100%;
}

[data-controller=accounting] .main_content, [data-controller=cash_transactions] .main_content{
    align-items: flex-start;
    justify-content: flex-start;
    height: unset;
}

 #cash_transactions_form .form_col{
    flex-wrap: wrap;
 }

 .row a.back{
    height: 20px;
    width: 20px;
    display: flex;
    margin-right: 20px;
 }
 a.back svg{
    max-width: 100%;
    max-height: 100%;
 }

.data_card{
    width: fit-content;
    border-radius: 2px;
    height: fit-content;
    border: var(--main_border);
    overflow: hidden;
}

.data_card .element{
    display: flex;
}

.data_card .element span{
    white-space: pre;
}

.data_card .element:nth-of-type(even){
    background-color: var(--blue5);
}

.data_card .element .element_s{
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.data_card .element .key{
    /*width: 300px;*/
    border-right: var(--main_border);
}

.data_card .element .val{
    max-width: 300px;
}

.data_card .element .key span{
    font-weight: 500;
}



/*************************/
/*Till********************/
/*************************/
.content_box_till{
    flex-direction: row;
    gap: 20px;
}

.content_box_till .form_element{
    margin-bottom: unset;
    flex-direction: row;
    gap: 8px!important;
}

.content_box_till .form_element label, .content_box_till .form_element input{
    font-weight: 500;
    font-size: 14px;
}

body[data-controller=till] .table_container2 .opened td{
    background-color: #aad3aa;
}

.row.till_data .button{
    min-width: unset;
}


/*************************/
/*Search******************/
/*************************/
.search_row .container{
overflow: visible;
}

.search_row .content{
overflow: visible;
}

/*************************/
/*Search_details**********/
/*************************/
.user_details_top{
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: fit-content;
    align-items: flex-start;
    width: 100%;
    margin-left: 20px;
}

.user_details_top .button{
    border-radius: 8px 8px 0 0;
    border-top: var(--main_border);
    border-left: var(--main_border);
    border-right: var(--main_border);
    background-color: var(--white2);
    transition: var(--transition1);
}

.user_details_top .button.active{
    box-shadow: 0 0 0px 2px var(--blue2);
    background-color: #e8f4ff;
}

.user_details_top .button.active a{
    color: var(--blue2);
}

.user_details_top .button a{
    color: var(--black1);
}

.user_details_row{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: unset;
}

.user_details_container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 100%;
    border: var(--main_border);
    padding: var(--interface_gap);
    background-color: var(--white2);
}

.user_details_container .content_container{
    display: flex;
    gap: 20px;
}

.user_details_top_row{
    justify-content: flex-start;
    align-items: center;
    gap: 0;
}

.user_details_top_row .user_info{
    display: flex;
    align-items: center;
    gap: 16px;
}

.user_details_top_row .user_info  span{
    font-size: 20px;
    font-weight: 500;
}

.user_details_top_row .user_info .img_cont{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--grey2);
    box-shadow: 0 0 3px 1px var(--blue8);
}

.user_details_top_row .user_info .img_cont img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.user_details_top_row .user_info .img_cont.no_img img, .user_details_container .img_cont.no_img img{
    width: 60%;
    height: 60%;
}

.user_details_container .img_cont{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px!important;
    width: max-content;
    border-radius: 4px;
    box-shadow: var(--dropshadow3);
    border: var(--main_border);
    background-color: var(--blue5);
    padding: 2px;
    aspect-ratio: 9/12;
    cursor: pointer;
    position: relative;
}

.user_details_container .img_cont.no_img{
    background-color: var(--grey2);
}

.user_details_container .img_cont img{
    width:         100%;
    height:        100%;
    object-fit:    contain;
    border-radius: 4px;
}

.user_details_container .img_cont .button, .customer_img .button{
    position: absolute;
    bottom: 2px;
    left: 2px;
    padding: 1px 4px;
    max-width: calc(100% - 4px);
}

.user_details_container .img_cont .button:hover, .customer_img .button:hover{
    background-color: var(--main_color);
    box-shadow: unset;
}

.user_details_container .img_cont .button span, .customer_img .button span{
    word-break: break-word;
}

.customer_img .button span{
    font-size: 11px;
}

.user_details_container .main_info_cont{
   /* border: var(--main_border);
    box-shadow: var(--dropshadow3);
    background-color: var(--blue5);
    */border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.user_details_container .main_info_cont .data_card{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    height: unset;
    /*padding: 10px 0;
    border: unset;
    */justify-content: space-around;
    border: var(--main_border);
    box-shadow: var(--dropshadow3);
    border-radius: 4px;
}

.user_details_container .data_card{
    height: 100%;
}

.user_details_container .main_info_cont .data_card .element{
    background-color: var(--blue5)!important;
}

.user_details_container .main_info_cont.error .data_card .element{
    background-color: #ffecec!important;
}

.user_details_container .main_info_cont .data_card .element .key span{
    font-weight: 400;
}

.user_details_container .main_info_cont .data_card .element .val span{
    font-weight: 500;
}

.user_details_container .data_card:nth-of-type(1) .element:nth-of-type(9) .key,
.user_details_container .data_card:nth-of-type(1) .element:nth-of-type(10) .key,
.user_details_container .data_card:nth-of-type(1) .element:nth-of-type(12) .key,
.user_details_container .data_card:nth-of-type(1) .element:nth-of-type(13) .key,
.user_details_container .data_card:nth-of-type(2) .element:nth-of-type(5) .key,
.user_details_container .data_card:nth-of-type(2) .element:nth-of-type(6) .key,
.user_details_container .data_card:nth-of-type(2) .element:nth-of-type(7) .key,
.user_details_container .data_card:nth-of-type(2) .element:nth-of-type(8) .key{
    padding-left: 20px;
}

.user_details_container .buttons_container{
    display: flex;
    height: fit-content;
    gap: 10px;
}

.user_details_container .main_info_row{
    display: flex;
    gap: 20px;
}

.user_details_container .main_info_row > div{
    height: 100%;
    max-height: 240px;
}

.user_details_container .balance_cont{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    border-radius: 4px;
    border: var(--main_border);
    box-shadow: var(--dropshadow3);
    background-color: var(--blue5);
    justify-content: space-around;
    /*aspect-ratio: 1;*/
}

.user_details_container .balance_cont > div{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user_details_container .balance_cont > div > span{
    width: 100%;
    text-align: left;
}

.user_details_container .balance_cont > div > span:nth-of-type(1){
    font-size: 20px;
}

.user_details_container .balance_cont > div > span:nth-of-type(2){
    font-size: 24px;
    font-weight: 500;
}

.user_details_container .balance_cont .balance span:nth-of-type(2){
    font-size: 32px;
}

.user_details_container .data_card .element .key{
    /*width: unset;*/
    padding-right: unset;
    display: flex;
    align-items: flex-start;
}

.user_details_container .buttons_container{
    gap: 20px;
    flex-wrap: wrap;
}

.user_details_container.details .data_card .element .val{
    width: 240px;
}

.user_details_container .buttons_container .button, .squared_button{
    width: 120px!important;
    height: 120px!important;
    min-width: 120px!important;
    min-height: 120px!important;
    border-radius: 4px!important;
    box-shadow: var(--dropshadow3)!important;
}

.user_details_container .buttons_container .button a, .squared_button a{
    flex-direction: column!important;
    padding: 7px 4px!important;
}

.user_details_container .buttons_container .button svg, .squared_button svg{
    width: 24px!important;
    height: 24px!important;
}

.user_details_container .buttons_container .button:hover, .squared_button:hover{
    transform: scale(1.1)!important;
    box-shadow: var(--dropshadow)!important;
}

.user_details_container .buttons_container .button a span, .squared_button a span{
    font-weight: 500!important;
    font-size: 12px!important;
    letter-spacing: 2px!important;
    line-height: 150%!important;
    display: flex!important;
    align-items: center!important;
    max-width: 100%!important;
    word-break: break-word!important;
}

.user_details_container .last_transaction_container{
    padding: 10px;
    border-radius: 4px;
    border: var(--main_border);
    background-color: #fbfbfb;
    box-shadow: var(--dropshadow3);
}

.user_details_container .last_transaction_container .last_transaction_span{
    margin-bottom: 6px;
    display: flex;
    font-weight: 500;
}

.user_details_container .last_transaction_container tbody tr{
    background-color: var(--white2);
}

.user_details_container .see_all_transactions{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    gap: 6px;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
}

.user_details_container .see_all_transactions svg{
    height: 14px;
    width: 14px;
    transform: rotate(180deg);
}

.user_details_container .see_all_transactions span{
    font-weight: 500;
}

/*Search_details_account**/

/*Search_details_details**/

/*Search_details_doc******/
.user_details_container.documents .content_container{
    flex-direction: column;
}

.user_details_container.documents .content_container .documents_container{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#image_details_action_box .action_box{
    height: 90vh;
    width: 90vw;
    overflow-y: hidden;
}

#image_details_action_box .main_image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--grey4);
}

#image_details_action_box .main_image img{
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: contain;
}

/*Search_details_history**/
#transaction_details_action_box .action_box .data_card .element .element_s{
    padding-top: 4px;
    padding-bottom: 4px;
}

.form_row.unvalidated .form_element.checkbox{
    box-shadow: 0px 0px 2px 1px #891a1a;
    border: 1px solid #ec9292;
    background-color: #f3dede;
}

.enroll_steps_row .steps{
    display: flex;
    gap: 20px;
    padding: 10px;
}

.enroll_work_row .container{
    height: 100%;
    padding: 10px;
    flex-direction: row;
    padding: 0;
}

.enroll_work_row .form_col input{
    width: 100%;
}

.enroll_work_row .enroll_step{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.enroll_work_row .container .static_info{
    height: 100%;
}

.enroll_work_row .container td[is-contract-signed]{
    text-align: center!important
}

.enroll_choose_account_type_row .top_container{
    align-items: flex-start;
}

.enroll_choose_account_type_row .buttons_container{
    display: flex;
    gap: 20px;
}

.enroll_msisdn .form_element{
    align-items: flex-start;
}

.enroll_tabs{
    background: unset;
    background-color: #fff;
}

.enroll_tab{
    flex: 1 1 0px;
    display: flex;
    justify-content: center;
}

.enroll_tab span{
    cursor: not-allowed;
    padding: 4px 8px;
    border-radius: 4px;
}

.enroll_tab[allowed-tab] span{
    font-weight: 500;
    color: var(--blue7);
    cursor: pointer;
    border: 1px solid var(--blue7);
    background-color: var(--blue5);
}

.enroll_tab[bank][allowed-tab] span,
.enroll_tab[msisdn][allowed-tab] span,
.enroll_tab[otp][allowed-tab] span{
    cursor: not-allowed;
}

.enroll_msisdn.otp_step .button_cont{
    display: flex;
    gap: 10px;
    flex-direction: row-reverse;
    width: fit-content;
}

.enroll_msisdn.otp_step [action=resend], .button_secondary{
    background-color: var(--white2)!important;
    border: solid 1px var(--grey3)
}

.enroll_msisdn.otp_step [action=resend] a, .button_secondary a{
    color: var(--black1);
}

.enroll_msisdn.otp_step [action=resend]:hover, .button_secondary:hover{
    background-color: var(--grey4)!important;
}

.documents_cont .form_row{
    flex-direction: column;
    gap: 10px;
}

.enroll_work_row form{
    justify-content: flex-start;
    height: 100%;
    align-items: center;
}

.enroll_work_row form .button[next-step]{
    min-height: 40px;
    margin-top: auto;
    max-width: 98%;
    margin-bottom: 1%;
}

.action_box_container[contract] .action_box .content{
    max-height: 90vh;
}

.action_box_container[contract] .action_box .content .content_box{
    max-height: 90vh;
}

.action_box_container[contract] .action_box .content .content_box .top_container{
    max-height: 80vh;
    overflow-y: auto;
}

.contract_container{
    display: flex;
    gap: 6px;
    align-items: center;
}

.contract_container .button{
    margin: 4px 4px 4px 16px;
}

.contract_table{
    overflow: unset;
    overflow-x: unset;
}

.contract_table .svg{
    height: 24px;
    width: 24px;
    padding: 4px;
    border-radius: 100%;
    background-color: var(--main_color);
}

.contract_table .svg use{
    fill: #ffffff;
}

.top_container.enroll_last_data{
    align-items: flex-start;
}

.top_container.enroll_last_data ._index_message_container{
    padding: 4px;
    background-color: var(--blue5);
    border: 1px solid var(--blue2);
    border-radius: 4px;
}

.top_container.enroll_last_data ._index_message_container span{
    font-size: 18px;
}

.top_container.enroll_last_data .button_container{
    display: flex;
    gap: 20px;
}

.static_info, .static_info:hover{
    background-color: var(--blue5);
    cursor: default;
    box-shadow: none;
    border: solid 1px var(--black1);
    border-radius: 4px;
}

.static_info a{
    color: var(--black1);
}

.static_info svg{
    fill: var(--black1);
}

.password_message, .more_results_message{
    font-size: 16px!important;
    width: 100%;
    background-color: var(--blue5);
    padding: 10px;
    border-radius: 4px;
    border: solid 2px var(--main_color);
    font-weight: 500;
}

.more_results_message{
    text-align: center;
}

.enroll_last_data .data_card span{
    font-size: 16px;
    font-weight: 500;
}

[contract] .action_box{
    width: 700px!important;
}

.action_box .top_container h1 strong{
    font-size: 28px;
}

.action_box table{
    margin: 4px;
    border: 1px solid var(--grey3);
}

.action_box table.content-table{
    margin: 0;
}

.action_box table td{
    padding: 4px;
}

.action_box .content-table thead th, .contract_table.table_container thead td{
    padding: 8px;
    color: var(--black1);
    font-weight: 500;
}

.form_body[contracts]{
    padding: 4px;
    gap: 10px;
    align-items: flex-start!important;
}

.contract_table.table_container{
    background-image: unset!important;
    background-color: unset!important;
    padding-left: 4px;
    padding-right: 4px;
}

.contract_table.table_container thead td{
    font-size: 14px!important;
    font-weight: 500!important;
}

.contract_table.table_container td{
    text-align: left!important;
}

.form_body[contracts] h1{
    font-size: 16px;
}

.main_info_cont.error .data_card .element .val{
    max-width: unset;
}

[contract] .content-table td, [contract] .content-table th{
    text-align: left;
}

.button[next-step=confirmation]{
    animation: button-grow 1.5s ease infinite;
}

@keyframes button-grow {
	0% {
		transform: unset;
        box-shadow: unset;
	}
	50% {
		transform: translateY(-5%) scale(101%) scaleX(100%);
        box-shadow: 0px 5px 8px #00000063;
	}
	100% {
		transform: unset;
        box-shadow: unset;
	}
}

.form_element[data-input-name=kycv_document_number] [doc-type]{
    display: unset;
    padding: 0px 4px;
    margin-right: 4px;
}

.form_element[data-input-name=kycv_document_number] [doc-type]:hover{
    background-color: var(--blue5);
    box-shadow: none;
    cursor: unset;
}

.form_body[user_documents]{
    height: 100%;
}

.clearing_warning{
    padding: 6px;
    background-color: #f3dede;
    border-radius: 4px;
    border: 2px solid var(--red2);
    font-weight: 500;
}

.content_box_till .button2 a{
    font-weight: 500;
}

.content_box_till .button2:hover{
    background-color: var(--blue5);
    box-shadow: unset;
    cursor: unset;
}
/*
body[data-controller=cash_transactions] table{
    table-layout: fixed;
}
*/

.more_results_row span{
    font-weight: 500!important;
    font-size: 16px!important;
}

.more_results_row td{
    position: relative!important;
    background-color: rgb(244 248 255)!important;
}

.more_results_row .fade_effect{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(244,248,255,0) 30%, rgba(244,248,255,0.7) 80%)
}

.enroll_work_row [component-type="input"]{
    width: unset;
}

.enroll_work_row [component-type="input"] input, .enroll_work_row [component-type="input"] .chosen-container{
    /*width: 300px!important;*/
    max-width: 100%;
}

.user_details_container.history .content_container{
    flex-direction: column;
}

.transactions_filters, .advanced_filters > div{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.transactions_filters .form_element, .advanced_filters > div .form_element{
    width: 140px;
}

.transactions_filters .form_element{
    width: 180px;
}

.transactions_filters label{
    font-size: 15px;
}

.transactions_filters .form_element:has(select), .advanced_filters > div .form_element:has(select){
    min-width: 140px;
    width: unset;
    align-items: flex-start;
}

.transactions_filters select, .advanced_filters > div select{
    width: 100%;
}

.advanced_filters{
    display: flex;
    gap: 10px;
    align-items: center;
}

.advanced_filters .separator{
    height: 90%;
    width: 2px;
    border-radius: 4px;
    background-color: var(--grey3);
}

[transactions_count_string] {
    text-align: center;
}

.action_box_container .content .select{
    align-items: unset;
}

table[group_details], table[user_details]{
    margin: unset;
}

[no_user_found_msg]{
    background-color: #ffd9d9;
    width: 100%;
    padding: 4px 12px;
    border-radius: 8px;
    border: solid 2px var(--red1);   
}

#group_details_action_box .top_container{
    max-height: 76vh;
}

svg.warning{
    max-height: 16px;
    max-width: 16px;
    margin-right: 6px;
    margin-left: 6px;
}

svg.warning use{
    fill: #f97e00;
}

svg.warning.red use{
    fill: #f90000;
}

.buttons_cell_cont{
    display:flex;
    align-items: center;
    justify-content: flex-end;
}

#edit_user_action_box input[type=tel], #create_user_action_box input[type=tel], #new_user_action_box input[type=tel], #role_action_box input[type=tel]{
    width: 100%;
}

#edit_user_action_box .top_container{
    max-height: 72vh;
    overflow-y: auto;
}

#edit_user_action_box .top_container input{
    /*width: 98%;*/
    margin-left: 2px;
}

.width_unset{
    width: unset!important;
}

.wrap_text span{
    white-space: unset!important;
    display: flex;
}

#reset_pwd_step2_action_box [pwd_copied], #new_user_action_box [user_copied]{
    padding: 0px;
    border-width: 1px;
    font-size: 12px!important;
}

[data-controller=group] table .button a{
    white-space: nowrap;
}

.more_results_message.red{
    background-color: #ffc5c5;
    border: solid 2px var(--red1);
}

#group_action_box .content-table, #operation_confirmation_action_box .content-table{
    width: calc(100% - 4px);
}

.about_in_settings{
    background-color: unset!important;
    border: unset!important;
    padding-top: 0!important;
}

.about_info, .about_info span{
    font-size: 12px!important;
}

.about_in_settings table{
    width: fit-content;
}

.about_in_settings table td{
    padding-right: 4px;
}

.about_in_settings .content_box{
    gap: 0!important;
}

[monitoring] .server_title{
    border-bottom: solid 2px var(--blue2);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 16px;
    width: fit-content;
}

[monitoring] .server_bloc{
    display: flex;
    flex-direction: column;
    width: 100%;
    /*align-items: center;*/
    background-image: linear-gradient(45deg, var(--blue3), var(--blue3));
    background-color: #f1f6fa;
    background-position: top left;
    background-size: 6px 100%;
    background-repeat: no-repeat;
    border-radius: 6px 0 0 6px;
    padding: 4px 4px 4px 14px;
}

[monitoring] .server_bloc:nth-of-type(even){
    background-image: linear-gradient(45deg, var(--blue2), var(--blue2));
    background-color: #deecf7;
}

[monitoring] .core_bi{
    display: flex;
    width: 100%;
    gap: 10px;
}

[monitoring] .modules_container{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 4px;
}

[monitoring] .modules_type_title{
    font-size: 14px;
    font-weight: 500;
}

[monitoring] tr[warning]{
    background-color: #ffc5c5!important;
}

#module_details_action_box .container{
    height: 96vh!important;
    display: flex!important;
    flex-direction: column!important;
    width: 600px;
    overflow: hidden;
}

#module_details_action_box .container .content{
    height: 94%;
}

[monitoring] tr{
    background-color: #ffffff;
}

[monitoring] .content-table td{
    padding: 2px;
}

[monitoring] table.content-table td .button a{
    padding: 2px 6px;
    font-size: 10px;
}

[monitoring] .content-table thead td span{
    font-size: 12px!important;
}

[monitoring] .content-table td span{
    font-size: 10px;
}

[monitoring] .warning_btn{
    padding: 2px 4px!important;
    border: solid 1px var(--black1)!important;
    background-color: #ffffff4a!important;
    font-size: 10px!important;
}

.json-document{
    max-height: 100%!important;
    overflow: auto!important;
    max-width: 100%!important;
    padding: unset!important;
}

.json-string{
    text-wrap: initial!important;
}

.next_prev_cont{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.next_prev_cont .button{
    min-width: unset;
}

.alert_top_result_cont{
    display: flex;
    align-items: center;
    gap: 20px;
}

#ack_action_box textarea{
    min-height: 80px;
}

.results_message{
    font-weight: 500;
    text-align: center;
}

.no_more_results_message{
    background-color: #ffc5c5;
    border-color: var(--red1);
}

#details_action_box table{
    margin: 0;
}

#details_action_box table td span, .alert_view .row table span{
    white-space: normal;
    padding: 0!important;
}

#details_action_box table td span{
    white-space: break-spaces;
    padding-right: 4px!important;
}

#details_action_box table td{
    vertical-align: baseline!important;
}

#details_action_box table tr td:nth-of-type(1) span{
    white-space: nowrap!important;
}

#details_action_box table td, .alert_view .row table td{
    padding-right: 4px;
    padding-left: 4px;
}

#details_action_box .container{
    width: 800px;
}

.alert_view .row .container, .alert_view .row .content{
    overflow: visible!important;
}

td .info_icon2{
    height: 22px!important;
}

.ws_bs{
    white-space: normal!important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

tr[is_acked="false"][w]{
    background-color: #ffe7d5!important;
}

tr[is_acked="false"][e]{
    background-color: #f3dede!important;
}

tr[is_acked="false"][c]{
    background-color: #f5c8c8!important;
}

tr[is_acked="true"] td span{
    text-decoration: line-through!important;
}

.info_icon2 svg{
    background-color: var(--main_color)!important;
    box-shadow: var(--dropshadow3)!important;
    border: unset!important;
    padding: 4px!important;
    width: 22px!important;
    height: 22px!important;
}

.info_icon2 svg use{
    fill: #fff!important;
}

.info_icon_cont{
    display: flex;
    align-items: center;
}

[statistics_view] .form_col{
    flex-wrap: wrap;
}

[report_level] .top_container, [region_view] .content_box2{
    align-items: flex-start;
}

[report_level] .table_container, [region_view] .table_container{
    width: unset;
}

[report_level] .row:not(.title_row), [region_view] .row:not(.title_row){
    width: unset!important;
}

[region_view] table{
    width: unset;
}

[statistics_view] [name=rule_value], [statistics_view] [name=rule_value] option{
    font-family: "Consolas", "Courier New", Courier, monospace;
    font-weight: 600;
}

[statistics_view] .form_element[data-input-name=rule_value]{
    width: 250px;
}

.mime_error_message{
    display: none;
}

.mime_alert_error{
    background-color: #f3dede;
    border: 2px solid var(--red2);
}

.mime_alert_error .mime_error_message{
    display: unset;
    color: var(--red2);
    font-weight: 500;
    font-size: 11px;
}

.charts_top_wrapper{
    display: flex;
    align-items: center;
    gap: 20px;
}

.charts_filter_wrapper .infos_wrapper{
    display: flex;
    gap: 20px;
    align-items: center;
}

.charts_filter_wrapper .infos_wrapper .info_cont{
    display: flex;
    background-color: var(--blue5);
    border: var(--main_border);
    border-radius: 4px;
    padding: 8px;
    gap: 4px;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
}

.charts_filter_wrapper .infos_wrapper .info_cont span:nth-of-type(2){
    font-weight: 500;
}

.charts_grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto-fill, auto);
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

.charts_grid .chart_wrapper{
    background-color: var(--white2);
    border: var(--main_border);
    border-radius: 2px;
    padding: 10px;
}

.charts_grid .chart_wrapper span:nth-of-type(1){
    font-size: 18px;
    font-weight: 500;
    display: block;
}

.charts_grid .chart_wrapper span:nth-of-type(2){
    font-size: 12px;
    font-weight: 500;
    display: block;
}

.charts_grid .chart_wrapper span:last-of-type{
    margin-bottom: 6px;
}

.charts_grid .chart_wrapper .buttons_cont{
    display: flex;
    gap: 8px;
}

.charts_grid .chart_wrapper .button a{
    font-size: 11px;
    padding: 4px 8px;
}

.charts_grid .chart_wrapper canvas{
    width: 100%!important;
    height: unset!important;
    max-height: 300px;
}

.charts_grid .chart_wrapper.perf_progress canvas{
    max-height: 86px!important;
}

.charts_filter_wrapper, .filters_cont{
    display: flex;
    gap: 20px;
    flex-direction: row!important;
    justify-content: flex-start;
    align-items: flex-end!important;
    flex-wrap: wrap!important;
}

.charts_filter_wrapper{
    gap: 10px!important;
    justify-content: space-between!important;
}

.charts_filter_wrapper .form_element{
    align-items: flex-start!important;
}

#chart_active_suscribers_dau_mau{
    margin-top: 10px;
}

.progress_title_wrapper{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

[data-input-name=new_accounts]{
    padding-top: 7px!important;
    padding-bottom: 7px!important;
}
[button-type=text_icon]{
gap: 6px;
padding: 7px 20px;
min-width: unset!important;
position: relative;
}

[button-type=text_icon] a{
    padding: 0;
    width: unset;
}

.button .copied_alert{
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(calc(-100% - 10px));
    background-color: #fff;
    min-width: 200px;
    padding: 4px;
    border: 1px solid var(--blue2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.button .copied_alert span{
    color: var(--black1);
    text-align: center;
    font-weight: 500;
    font-size: 12px;
}

.button .copied_alert .decoration{
    position: absolute;
    bottom: 0;
    left: 20px;
    transform: translateY(100%) translateZ(-10px);
    height: 8px;
}

.button .copied_alert .decoration use{
    fill: var(--blue2);
}

.enroll_last_data .data_container{
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.enroll_last_data .data_container .button_container{
    flex-direction: column;
    gap: 10px;
}

.button_third{
    background-color: #fff;
    border: 2px solid var(--main_color);
    padding: 4px 10px;
    border-radius: 100px;
    justify-content: flex-start;
}

.button_third a{
    color: var(--main_color);
    font-size: 13px;
    text-transform: unset;
}

.button_third svg{
    fill: var(--main_color);
    height: 12px;
    width: 12px;
}

.button_third:hover{
    background-color: #f3f3f3;
    border: 2px solid var(--main_color);
}

.button_third[button-type=icon], .button_third[button-type=icon]:hover{
    position: relative;
    background-color: unset!important;
    border: unset!important;
    width: unset!important;
    box-shadow: unset!important;
    min-width: unset!important;
    padding: 0!important;
}

.button_third[button-type=icon] a{
    display: none!important;
}

.button_third[button-type=icon] svg{
    height: 16px;
    width: 16px;
}

.button_third[button-type=icon] .copied_alert{
    transform: translateY(calc(-100% - 10px)) translateX(-24px);
}

.enroll_last_data .button_container .button_third{
    width: unset;
}

.new_user_wrapper{
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.new_user_wrapper .new_user_table{
    width: unset!important;
}

.new_user_wrapper .new_user_table table{
    margin: 0!important;
    max-width: 600px!important;
}

.new_user_wrapper .new_user_table table td span{
    white-space: unset;
}

.new_pwd_wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.new_pwd_wrapper [new_password]{
    background-color: var(--blue5);
    padding: 10px 30px;
    border-radius: 4px;
    border: solid 2px var(--main_color);
    font-size: 20px;
    font-weight: 500;
}

.data_card .element.error{
    background-color: #f3dede;
}

.data_card .element_s.child{
    padding-left: 20px;
}

#operation_confirmation_action_box table{
    margin: 0;
}

#operation_confirmation_action_box table td{
    text-align: left;
}

#operation_confirmation_action_box .top_container{
    flex-direction: column;
    gap: 10px;
}

#operation_confirmation_action_box .table_last_operation_container{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
}

#operation_confirmation_action_box .button_container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: fit-content;
}

#operation_confirmation_action_box .button_container .button_third{
    width: unset;
}

[checkbox_for_multipages_documents]{
    width: unset!important;
    position: absolute!important;
    right: 0!important;
    bottom: 6px!important;
    transform: translateX(104%)!important;
}

html body #content_container [checkbox_for_multipages_documents] input{
    width: unset!important;
}

.ws_wrap span{
    white-space: wrap!important;
    display: inline-block;
}

#edit_branch_action_box textarea[name=account_manager]{
    min-height: 30px;
    resize: none;
}

#user_form .form_element:not([data-input-name=role_value]){
    width: 140px;
}

.user_more_actions_buttons_wrapper{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#more_actions_action_box .action_box{
    max-width: 402px;
    min-width: 0;
}

.icon_button{
    height: 24px!important;
    width: 24px!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
}

.select_kyc_task_button{
    margin-left: auto!important;
    margin-right: auto!important;
}

.select_kyc_task_table_cont{
    max-height: 80vh;
    overflow-y: auto;
}

[data-input-name=close_account_checkbox] label{
    font-size: 14px!important;
    font-weight: 400!important;
}

.row.enroll_msisdn .container{
    overflow: visible;
}

.row.enroll_msisdn .container .content{
    overflow: visible;
}

/*
.iti--show-flags{
    width: 100%;
}
*/

#transaction_details_action_box .action_box{
    overflow-y: auto;
}

.label_container svg.label_warning{
    background-color: unset;
    border: unset;
    padding: 0;
    border-radius: 0;
}

.label_container svg.label_warning use{
    fill: #f97e00;
}

.svg_cont{
    display: flex;
    position: relative;
}

.svg_cont .hover_message{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, calc(100% + 8px));
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 1);
    display: none;
    opacity: 0;
    padding: 4px 8px;
    width: max-content;
    max-width: 200px;
}

.svg_cont:hover .hover_message{
    display: flex;
    opacity: 1;
    z-index: 1;
}

.svg_cont .hover_message .marker{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    height: 10px;
    width: 10px;
    background-color: rgba(0, 0, 0, 1);
}

.svg_cont .hover_message span{
    color: var(--white1);
    padding: 0!important;
    text-align: left!important;
    font-size: 14px;
    white-space: unset!important;
}

.svg_cont .hover_message li{
    color: var(--white1);
    font-size: 14px;
    margin-left: 20px;
}

label .svg_cont{
    display: unset;
}

label .svg_cont .hover_message{
    transform: translate(calc(-50% + 3px), calc(100% + 8px));
}

.toast_container .alert table tr td:nth-of-type(1){
    white-space: nowrap;
}

.alert_msg{
    display: flex;
    align-items: flex-end!important;
}

.alert_msg span{
    line-height: 1!important;
}

#contract_action_box .top_container > *{
    max-width: calc(100% - 10px);
}

.strike-out{
    text-decoration: line-through;
}

.row.search_account_row{
    flex-direction: column;
    gap: 10px;
    width: unset;
}

.row.search_account_row .subtitle{
    font-weight: 500;
}

.row.search_account_row .button{
    width: 100%;
}

.row.search_account_row .button a{
    justify-content: flex-start;
}

.search_account_tr_history_warning{
    z-index : 999999;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px;
    background-color: #f3dede;
    border-radius: 4px;
    border: 2px solid var(--red2);
    font-weight: 500;
    max-width: 600px;
}

span[no-results]{
    margin: 10px;
    text-align: center;
}

.transaction_resume_table td{
    text-align: left;
    padding: 4px;
}

html body table.transaction_resume_table tr td span{
    padding: 0!important;
    font-size: 12px!important;
    white-space: unset!important;
}

.filters{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.acc_dashboard_main_row{
    display: flex;
    gap: 20px;
}

#create_user_action_box .top_container{
    overflow-y: auto;
    max-height: 70vh;
    padding: 2px;
}

.users_row .container{
    overflow-y: unset;
}

.users_row .container .content{
    overflow: unset;
}

.users_row .table_container{
    overflow: visible;
}

.users_row .table_container table{
    overflow-x: scroll;
}

tr[is_closed=true] span{
    text-decoration: line-through;
}

tr[is_closed=true] .button[data-ab-id="more_actions_action_box"]{
    display: none;
}