/*
Copyright 2025 Afliant srl

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
 */

/* ------------------------------------- generic --------------------------------------- */

html,
body{
    font-family: 'Poppins', sans-serif;
    color: var(--gray-basic-text);
    font-size: 13px;
}

* {
    -webkit-transition: all 300ms ease-in-out !important;
    -moz-transition: all 300ms ease-in-out !important;
    transition: all 300ms ease-in-out !important;
    -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

/* ---------------------------------- layout --------------------------------- */

/* ---- header available only in mobile mode ---- */
header{
    background-color: var(--primary-color);
    position: fixed;
    display: none;
    height: 60px;
    width: 100%;
    z-index: 1;
}

header div.logo_container{
    margin: 5px 10px;
    display: flex;
    height: 50px;
    float: left;
}

header div.logo_container img{
    max-height: 50px;
    max-width: 150px;
    margin: auto 0;
}

/* ---- name_container in side column is displayed only when multi workspace ---- */
div.name_container{padding: 20px;}

div.name_container span{
    color: var(--secondary-color);
    text-transform: uppercase;
}

header div.menu_opener{
    color: var(--nav-text-color);
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    cursor: pointer;
    height: 60px;
    float: right;
    width: 60px;
}

header div.menu_opener:hover,
header div.menu_opener.open{
    background-color: var(--hover-color);
}

/* ---- menu ---- */
div.side_column{
    background-color: var(--primary-color);
    overflow: hidden;
    position: fixed;
    width: 250px;
    z-index: 10;
    bottom: 0px;
    left: 0px;
    top: 0px;
}

div.side_column div.logo_container{margin: 15px;}

div.side_column div.logo_container img{
    max-height: 50px;
    max-width: 150px;
    margin: 0px auto;
    display: block;
}

div.side_column nav{margin-top: 0px;}

div.side_column nav ul li,
div.menu_second_level ul li{margin: 0;}

div.side_column nav ul li a,
div.menu_second_level ul li a{
    border-left: 4px solid transparent;
    color: var(--nav-text-color);
    padding: 12px 10px;
    display: block;
}

div.side_column nav ul li a i,
div.menu_second_level ul li a i,
div.menu_second_level ul li button i{
    text-align: center;
    font-size: 15px;
    width: 30px;
}

div.side_column nav ul li.menu_section_title{
    color: var(--nav-text-color);
    text-transform: uppercase;
    margin: 35px 15px 10px 20px;
    font-weight: 400;
    font-size: 11px;
}

div.side_column nav ul li.menu_section_title:first-of-type{margin-top: 5px;}

div.side_column nav ul li.active a,
div.side_column nav ul li a:hover,
div.menu_second_level ul li a:hover,
div.menu_second_level ul li button:hover{
    border-left: 4px solid var(--accent-color);
    background-color: var(--hover-color);
}

div.menu_bottom_fixed_section{
    border-top: 1px solid var(--hover-color);
    flex-direction: row;
    align-items: center;
    position: absolute;
    display: flex;
    width: 250px;
    z-index: 10;
    bottom: 0px;
    left: 0px;
}

a.user_name{
    background-color: var(--primary-color);
    color: var(--nav-text-color);
    flex-direction: row;
    align-items: center;
    line-height: 15px;
    font-weight: 400;
    font-size: 12px;
    display: block;
    padding: 20px;
    width: 180px;
    display: flex;
}

a.user_name div.user_custom_icon{
    background-color: var(--accent-color);
    border-radius: 50%;
    margin-right: 20px;
    text-align: center;
    line-height: 40px;
    font-weight: 300;
    height: 40px;
    width: 40px;
    color: #fff;
}

div.menu_bottom_fixed_section a.action_btn,
div.menu_bottom_fixed_section button.action_btn,
div.menu_bottom_fixed_section span.action_btn{
    background-color: var(--primary-color);
    color: var(--nav-text-color);
    text-align: center;
    line-height: 80px;
    height: 80px;
    width: 70px;
}

div.menu_bottom_fixed_section button.logout_btn {
    line-height: normal;
    height: 44px;
    width: 100%;
    text-align: left;
}

a.user_name.active,
a.user_name:hover,
div.menu_bottom_fixed_section a.action_btn:hover,
div.menu_bottom_fixed_section button.action_btn:hover,
div.menu_bottom_fixed_section span.action_btn:hover,
div.menu_bottom_fixed_section span.action_btn.active{
    background-color: var(--hover-color);
}

div.menu_bottom_fixed_section button.action_btn{
    border: 0px;
}

div.menu_bottom_fixed_section button.action_btn:hover{
    border: 0px;
}

div.menu_bottom_fixed_section span.action_btn{cursor: pointer;}

div.menu_second_level{
    -webkit-transition: all 300ms ease-in-out !important;
    -moz-transition: all 300ms ease-in-out !important;
    transition: all 300ms ease-in-out !important;
    background-color: var(--primary-color);
    overflow: hidden;
    position: fixed;
    bottom: 82px;
    width: 250px;
    height: 0px;
    z-index: 10;
    left: 0px;
}

div.menu_second_level ul li button{
    border: none;
    border-left: 4px solid transparent;
    color: var(--nav-text-color);
    padding: 12px 10px;
    text-align: left;
    background: none;
    display: block;
    width: 100%;
}

/* ---- workspaces switch ---- */
div.workspaces_switch{
    max-width: 700px;
    margin:0 auto;
}

/* ---- modal ---- */
.modal-body.form_container{padding: 0px;}
.modal-body.form_container div.form_content{padding: 15px;}

div.workspaces_list_container{
    justify-content: center;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    gap: 20px;
}

div.workspaces_list_container > label{
    width: calc(33% - 18px);
    min-width: 150px;
    display: flex !important;
    justify-content: center;
    background-color: #eee;
    flex-direction: column;
    align-items: center;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    height: 100px;
}

div.workspaces_list_container > label i{
    margin: 0 0 10px 0;
    font-size: 20px;
}

div.workspaces_list_container > label span{
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 5px;
}

/* ---- content ---- */
div.external_container{
    background-color: #fff;
    position: absolute;
    min-height: 100vh;
    right: 0px;
    left: 0px;
    top: 0px;
}

div.side_column_layout div.external_container{left: 250px;}
div.side_column_layout header + div.external_container{top:65px !important;}

div.external_container div.content_top{padding: 30px 45px 20px 45px;}
div.external_container div.content_data{padding: 30px 45px 40px 45px;}

div.content_data{background-color: #f7f7f7;}

/* ---- details page ---- */
div.details_data_container{
    grid-template-columns: repeat(auto-fill, 32%);
    justify-content: space-between;
    display: grid;
}

div.details_data_container h3{margin-bottom: 15px;}
div.details_data_container > div{margin-bottom: 20px;}

div.details_data_container ul li{margin-bottom: 8px;}

div.details_data_container ul li a,
div.details_data_container ul li span{font-size:13px;}

div.details_data_container span.field{color: var(--gray-basic-text);}
div.details_data_container span.value{color: var(--accent-text);}

/* ---- details ---- */
div.highlight_action_container{
    margin-top: -20px;
    float: right;
}

div.highlight_action_container > form,
div.highlight_action_container > a,
div.highlight_action_container > button{
    display: inline-block;
}

div.highlight_second_action_container{
    margin-top: -38px;
    float: right;
}

/* ---- footer ---- */

footer{padding: 20px 0;}

footer p{
    margin: auto 20px;
    font-size: 11px;
}

/* ---------------------------------- common --------------------------------- */

ol, ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.image_container{
    display: block;
    width: 100%;
}

.image_container img{
    display: block;
    width: 100%;
}

div.white_box{
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.06);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.06);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
}

/* ---------------------------------- typography --------------------------------- */

a{text-decoration: none;}
a.simple_link{color: var(--primary-color);}
a.simple_link:hover{text-decoration: underline;}

.text_align_center{text-align: center;}

.long_content{
    overflow: hidden;
    text-overflow: ellipsis;
}

h1{
    color: var(--accent-text);
    align-items: center;
    font-size: 23px;
    display: flex;
}

h2{
    color: var(--accent-text);
    font-weight: 400;
    font-size: 19px;
}

h3{
    color: var(--accent-text);
    font-weight: 400;
    font-size: 16px;
}

h4{
    color: var(--accent-text);
    font-weight: 400;
    font-size: 15px;
}

h5{
    color: var(--accent-text);
    font-weight: 400;
    font-size: 15px;
}

/* ---- breadcrumbs ---- */
ul.breadcrumb li * {
  display: inline-block;
  padding: 0 5px;
}

ul.breadcrumb li a{color: var(--primary-color);}
ul.breadcrumb li a:hover{text-decoration: underline;    }

/* ---------------------------------- others --------------------------------- */

/* service desk button */
a.service_desk_btn{
    box-shadow: none !important;
    text-decoration: none;
    border-radius: 50px;
    line-height: 50px;
    position: fixed;
    padding: 0 16px;
    display: block;
    height: 50px;
    bottom: 20px;
    right: 20px;
    width: 50px;
}

a.service_desk_btn:hover{width: 300px;}

a.service_desk_btn i{
    margin: 0 5px 0 4px;
    font-size: 15px;
}

/* --------------------------- alerts -------------------------- */

ul.messages{
    margin: 20px 20px 0px 20px;
    display: block;
}

ul.messages li{
    background-color: #e2e3e5;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 15px 20px;
    color: #383d41;
    display: flex;
}

ul.messages li.info{
    background-color: #d1ecf1;
    color: #0c5460;
}

ul.messages li.success{
    background-color: #d4edda;
    color: #155724;
}

ul.messages li.warning{
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

ul.messages li.error{
    background-color: #f8d7da;
    color: #721c24;
}

ul.messages li.secondary{
    background-color: rgb(126,117,253, 0.2);
    color: rgb(48,45,162, 0.8);
}

ul.messages li.secondary a{color: #302da2;}

ul.messages li.button_content{padding: 10px 20px;}
ul.messages li.button_content .btn{margin-left: auto;}

/* --------------------------- form -------------------------- */

.btn,
.btn:hover,
.btn:active,
.btn:focus,
.active.btn,
.active.btn:hover,
.active.btn:active,
.active.btn:focus{box-shadow: none;}

.btn,
.btn:focus,
.btn:active{
    border: 1px solid transparent;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: 400;
    font-size: 12px;
}

.btn i{margin-right: 5px;}
.only-icon i{margin-right: 0px;}

.btn-primary,
.btn-primary:focus,
.btn-primary:active{
    background-color: var(--primary-color);
    color: #fff;
}

.btn-primary:hover{
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active{
    background-color: #fff;
    border-color: #ccc;
    color: #888;
}

.btn-secondary:hover{
    background-color: rgba(238,238,238,0.8);
    border-color: #666;
    color: #666;
}

.btn-delete,
.btn-delete:focus,
.btn-delete:active{
    background-color: #fff;
    border-color: rgb(204, 16, 60);
    color: rgb(204, 16, 60);
}

.btn-delete:hover{
    background-color: rgba(204, 16, 60,0.8);
    border-color: rgb(204, 16, 60);
    color: #fff;
}

.btn.active,
.btn.active:hover{
    background-color: var(--hover-color);
    border-color: var(--hover-color);
    color: #fff;
}

.btn-big{width: 100%;}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select{
    border: 1px solid #e7e7e7;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 13px;
    padding: 0 10px;
    height: 35px;
    width: 100%;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
textarea:focus-visible,
select:focus-visible{
    border: 1px solid var(--primary-color);
    outline: none;
}

input:disabled,
select:disabled{
    background-color: rgba(0,0,0,0.03);
    cursor: not-allowed;
}

textarea{
    min-height:100px;
    padding: 5px 10px;
}

div.form_field label.form-label{
    color: var(--gray-basic-text);
    font-weight: normal;
    font-size: 13px;
}

div.form_field label.form-label + span{color: #dc3545;}

/*  errors */
ul.errorlist{
    background-color: #f8d7da;
    margin: 0px 0px 20px 0px;
    border-radius: 10px;
    color: #721c24;
    padding: 15px;
}

/*  datepicker */
div.datepicker table{width: 100%;}
div.datepicker table th:last-of-type{width: auto;}

div.datepicker table th,
div.datepicker table td{
    padding: 8px 10px !important;
    text-align: center;
    cursor: pointer;
}

div.datepicker table th{background-color: #efefef;}

div.datepicker table td.day:hover,
div.datepicker table td span.month:hover{background-color: #efefef;}

div.datepicker table td.today{color: #green;}

div.datepicker table td.day.active{
    background-color: var(--primary-color);
    border-radius: 3px;
    color: #fff;
}

div.datepicker table td span.month,
div.datepicker table td span.year,
div.datepicker table td span.decade,
div.datepicker table td span.century{
    display: block;
    padding: 5px;
}

p.helper-text{
    margin: -10px 20px 20px 0px !important;
    font-size: 12px;
    color: #666;
}

/* password visualiser */
span.password_visualiser{
    color: var(--primary-color) !important;
    margin: -47px 10px 0 0;
    position: relative;
    cursor: pointer;
    float: right;
}

/* --------------------------- table -------------------------- */

div.table_container{
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.06);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.06);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
}

div.table_container div.table-container{overflow-x: scroll;}

div.table_container table{
    vertical-align: middle;
    margin-bottom: 30px;
    width: 100%;
}

div.table_container .table > :not(:first-child) {border-top: none;}

div.table_container th,
div.table_container td{
    border: 1px solid #eee;
    line-height: 20px;
    padding: 5px;
}

div.table_container th{
    border-top-color: #fff;
    color: var(--primary-color);
}

div.table_container th:first-of-type,
div.table_container td:first-of-type{border-left-color: #fff;}

div.table_container th:last-of-type,
div.table_container td:last-of-type{border-right-color: #fff;}

div.table_container th a{color: var(--primary-color);}

/* actions column */
td.td_actions{width: 200px;}

td.td_actions > a,
td.td_actions > form,
td.td_actions > button{
    display: inline-block;
}

/* pagination */
ul.pagination{margin: -15px 25px 15px 25px;}

ul.pagination li a{
    border: 1px solid #eee; /* TODO change */
    text-decoration: none;
    margin-right: -1px;
    padding: 8px 15px;
    font-size: 11px;
    display: block;
    color: #888; /* TODO change */
}

ul.pagination li:first-of-type a{border-radius: 5px 0px 0px 5px;}
ul.pagination li:last-of-type a{border-radius: 0px 5px 5px  0px;}

ul.pagination li.active a,
ul.pagination li a:hover{
    background-color: rgba(121,115,203,0.2); /* TODO change */
    color: violet; /* TODO change */
}

/* info */
div.table_container div.table_info{
    padding: 0 0 5px 0;
    text-align: right;
    font-size: 11px;
}

/* --------------------------- login/registration -------------------------- */

div.no_side_menu a.logo_container{
    position: fixed;
    z-index: 10;
    margin: 50px;
    max-width: 150px;
}

div.no_side_menu div.under_logo{display: none;}

div.no_side_menu div.back_image{
    background-image: url('../images/background.jpg');
    background-size: cover;
    position: fixed;
    right: 500px;
    bottom: 0px;
    left: 0px;
    top: 0px;
}

div.no_side_menu div.dx_container{
    background-color: #fff;
    position: absolute;
    overflow: scroll;
    padding: 50px;
    width: 500px;
    bottom: 0px;
    right: 0px;
    top: 0px;
}

div.no_side_menu div.dx_container h1{margin: 60px 0 0 0;}

div.no_side_menu div.dx_container p,
div.no_side_menu div.dx_container ul.messages{margin: 10px 0;}

div.no_side_menu div.dx_container form{padding: 20px 0px 50px 0;}
div.no_side_menu div.dx_container form p.helper-text{margin: 0px 0px 15px 0px !important;}

div.no_side_menu div.dx_container div.action_container button{margin-right: 15px;}
div.no_side_menu div.dx_container div.action_container a{font-size: 13px;}

div.no_side_menu+footer p{color: var(--nav-text-color);}
div.no_side_menu+footer p a{color: #fff;}

/* activation */
div.no_side_menu div.activation{overflow}

div.no_side_menu div.activation h1{margin: 10px 0 0 0;}

div.no_side_menu div.activation form input,
div.no_side_menu div.activation form textarea,
div.no_side_menu div.activation form select{margin-bottom: 5px;}

div.no_side_menu div.activation form div.privacy_field{margin-bottom:20px;}

div.no_side_menu div.activation form div.privacy_field label{
    font-size: 13px;
    display: inline;
}

div.no_side_menu div.activation form span.password_visualiser{margin: -32px 10px 0 0;}

.invitation_workspace_list li{margin: 20px 10px;}

/* footer */
div.no_side_menu + footer{
    position: fixed;
    right: 500px;
    bottom: 0px;
    left: 0px;
}

/* --------------------------- workspace details -------------------------- */

div.workspace_logo_container{
    background-color: #f7f7f7;
    border: 1px solid #eee;
    width: 150px;
}

div.workspace_logo_container img{width: 100%;}

span.big_number{
    font-weight: 500;
    font-size: 25px;
}

/* --------------------------- rate limits mgmt ------------------------ */

.toggle.form-switch {
    width: 100%;
    justify-content: space-between;
    display: flex;
    padding-left: 1rem;
    align-items: center;
}
.toggle.form-switch .form-check-input {
    margin-left: 0 !important;
    font-size: 1.2rem;
    cursor: pointer;
}
.toggle-card {
    background-color: #f8f9fa;
    border-left: 5px solid #dc3545;
}
.toggle-card label {
    color: #777;
    font-weight: 500;
}
.toggle-card.active {
    border-left: 5px solid #28a745;
}
.rate-limit-input-container {
    display: flex;
    justify-content: space-between;
    gap: 0;
}
.rate-limit-input-container input{
    width: calc(100% - 50px);
    border-radius: 5px 0 0 5px !important;
    display: inline-block;
    margin-right: 0;
}
.rate-limit-input-container div {
    display: inline-block;
    width: 50px;
    background-color: #e9ecef;
    border-radius: 0 5px 5px 0;
    vertical-align: middle;
    height: 35px;
    white-space: nowrap;
    padding: 9px;
    color: #555;
}