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

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

:root {
    --gray-basic-text: #b1b5bb;
    --white-text: #ffffff;
    --primary-color: violet;
    --secondary-color: violet;
    --accent-text: #333;
}

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


div.content_data{
    background-color: #ddd;
    color: #aaa;
}

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: 20px;
    overflow: hidden;
    padding: 20px;
}

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

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

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

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{
    font-size: 23px;
    color: var(--accent-text);
}

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

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

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

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

div.highlight_third_action_container{
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 10px;
}

/* ul.breadcrumb{margin-left: -5px;} */

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

ul.breadcrumb li a{color: var(--primary-color);}

p.thinner_font{font-weight: 200;}

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

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

/* ---- header ---- */
header.desktop,
header.mobile{
    background-color: #aaa;
    position: fixed;
    z-index: 10;
    right: 0px;
    top: 0px;
}

header.desktop,
header.mobile{
    height: 65px;
    left: 100px;
}

header.mobile{
    border-bottom: 2px solid #f7f7f7;
    height: 50px;
    left: 0px;
}

header.mobile div.logo_container{
    margin: 5px 10px;
    width: 40px;
}

header.desktop nav{
    margin: 4px 15px 0 0;
    position: absolute;
    height: 55px;
    right: 15px;
    top: 0px;
}

header.mobile nav{
    margin: 3px 0 0 0;
    position: absolute;
    height: 50px;
    right: 10px;
    top: 0px;
}

header nav ul li{float: left;}

header.desktop nav ul li.divider{
    background-color: #f7f7f7;
    margin: 4px 25px;
    height: 48px;
    width: 2px;
}

header nav ul li a{
    border: 2px solid #fff;
    margin: 6px 0 0 0;
}

/* ---- menu ---- */
div.side_column,
div.bottom_menu{
    background-color: #777;
    position: fixed;
    z-index: 10;
    bottom: 0px;
    left: 0px;
}

div.side_column{
    border-right: 2px solid #f7f7f7;
    width: 200px;
    top: 0px;
}

div.bottom_menu{
    border-top: 2px solid #f7f7f7;
    height: 60px;
    right: 0px;
}

div.side_column nav{margin-top: 45px;}
div.side_column nav ul li {margin: 30px 0;}

div.bottom_menu nav ul{
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    margin: 9px 25px;
    display: flex;
}

div.bottom_menu nav ul li{width: 33%}

/* div.side_column nav ul li a,
div.bottom_menu nav ul li a,
header.mobile nav ul li a{
    border-color: transparent;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    display: block;
    color: #b3b3b5;
    height: 42px;
    width: 42px;
}

div.side_column nav ul li a i,
div.bottom_menu nav ul li a i{
    margin-top: 12px;
    font-size: 18px;
}

header.mobile nav ul li a i{
    margin-top: 10px;
    font-size: 18px;
}

div.side_column nav ul li.active a,
div.bottom_menu nav ul li.active a{
    background-color: var(--primary-color);
    color: #fff !important;
}

div.side_column nav ul li a:hover,
div.bottom_menu nav ul li a:hover,
header.mobile nav ul li a:hover{background-color: #eee;}

div.side_column nav ul li a:hover i,
div.bottom_menu nav ul li a:hover i,
header.mobile nav ul li a:hover i{color: var(--primary-color);}

div.side_column nav ul li.active a:hover,
div.bottom_menu nav ul li.active a:hover{background-color: #eee;}

div.side_column nav ul li.active a:hover i,
div.bottom_menu nav ul li.active a:hover i{color: #fff;}

div.side_column nav li.bottom_fixed{
    position: fixed;
    bottom: 0px;
    width: 90px;
} */

/* ---- content ---- */

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

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

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

div.mobile_layout div.external_container{
    margin-bottom: 62px;
    margin-top: 52px;
}

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

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

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: 250px;}

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;
    text-decoration: none;
    margin-right: -1px;
    padding: 8px 15px;
    font-size: 11px;
    display: block;
    color: #888;
}

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);
    color: violet;
}

/* --------------------------- 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;}
.right-icon.btn i{margin: 0 0 0 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-primary.disabled,
.btn-primary:disabled{
    background-color: var(--disabled-color);
    border-color: var(--primary-color);
    cursor: no-drop;
    color: #fff;
}

.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-secondary.disabled,
.btn-secondary:disabled{
    background-color: #eee;
    border-color: #ddd;
    cursor: no-drop;
    color: #888;
}

.btn-delete{
    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: #7fc6a8;
    border-color: #7fc6a8;
    color: #fff;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="week"],
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="week"]: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{
    font-weight: normal;
    font-size: 13px;
}

div.form_field 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;
}

/* --------------------------- modal -------------------------- */

div.modal-content{
    color: #212529;
}

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

footer{padding: 20px 0;}

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