/* ------------------------------------- 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;
}

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;
}

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