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

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

:root {
    --green: rgba(127,198,168,1);
    --green-half-opacity: rgba(127,198,168,0.5);
    --azure: rgba(169,215,230,1);
    --orange: #f1a17e;
    --yellow: #f5c585;
    --gray-basic-text: #b1b5bb;
    --white-text: #FFF;
    --accent-text: #030307;
    --accent-text-opacity: rgba(3,3,7,0.1);
    --primary-color: #7973cb;
    --violet: rgba(42,58,146, 1);
    --lilac: rgba(181,158,247, 1);
    --accent-color: #F7AD5B;
}

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

.square_icon{
    background-color: rgba(0,0,0, 0.2);
    text-decoration: none;
    border-radius: 10px;
    padding: 6px 0 0 0;
    text-align: center;
    font-weight: 300;
    font-size: 18px;
    display: block;
    height: 42px;
    width: 42px;
    color: #fff;
}

span.square_icon.bigger_letter{
    padding: 2px 0 0 0;
    font-weight: 600;
    font-size: 25px;
}

.green_gradient{
    background: var(--green);
    background: -moz-linear-gradient(125deg, var(--green) 0%, var(--azure) 100%);
    background: -webkit-linear-gradient(125deg, var(--green) 0%, var(--azure) 100%);
    background: linear-gradient(125deg, var(--green) 0%, var(--azure) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7fc6a8",endColorstr="#a9d7e6",GradientType=1);
}

.orange_gradient{
    background: var(--orange);
    background: -moz-linear-gradient(125deg, var(--orange) 0%, var(--yellow) 100%);
    background: -webkit-linear-gradient(125deg, var(--orange) 0%, var(--yellow) 100%);
    background: linear-gradient(125deg, var(--orange) 0%, var(--yellow) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f1a17e",endColorstr="#f5c585",GradientType=1);
}

.blue_violet_gradient{
    background: var(--violet);
    background: -moz-linear-gradient(125deg, var(--violet) 0%, var(--lilac) 100%);
    background: -webkit-linear-gradient(125deg, var(--violet) 0%, var(--lilac) 100%);
    background: linear-gradient(125deg, var(--violet) 0%, var(--lilac) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2A3A92",endColorstr="#B59EF7",GradientType=1);
}

div.content_data{
    background-color: #f3f4f9;
    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: 30px;
    padding: 30px;
}

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

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

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

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

a.simple_link:hover{text-decoration: underline;}

.text_align_center{text-align: center;}

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(--gray-basic-text);
}

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

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

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

/* ---- header ---- */
header.desktop,
header.mobile{
    background-color: #fff;
    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 p{
    border-bottom: 2px solid #f7f7f7;
    padding-left: 15px;
    line-height: 65px;
    margin: 0 15px;
    display: block;
    color: #030307;
}

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: #fff;
    position: fixed;
    z-index: 10;
    bottom: 0px;
    left: 0px;
}

div.side_column{
    border-right: 2px solid #f7f7f7;
    width: 100px;
    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.green_gradient,
div.bottom_menu nav ul li a.green_gradient{color: var(--white-text);}

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: var(--violet);
    background: -moz-linear-gradient(125deg, var(--violet) 0%, var(--lilac) 100%);
    background: -webkit-linear-gradient(125deg, var(--violet) 0%, var(--lilac) 100%);
    background: linear-gradient(125deg, var(--violet) 0%, var(--lilac) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a3a92",endColorstr="#b59ef7",GradientType=1);
    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.side_column_layout div.external_container{
    background-color: #fff;
    position: absolute;
    min-height: 100vh;
    left: 100px;
    right: 0px;
    top: 0px;
}

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.side_column_layout div.side_column div.logo_container{
    margin: 25px auto;
    width: 50px;
}

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;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 15px 20px;
    color: #383d41;
}

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

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

div.login_box{margin: 0 45px;}
div.login_box h1{margin: 60px 20px 10px 20px;}

div.login_box p,
div.login_box ul.messages{margin: 0 20px 10px 20px;}

div.login_box form{margin: 40px 20px;}

div.login_box div.action_container{
    flex-direction: row;
    align-items: center;
    display: flex;
}

div.login_box div.action_container button{margin-right: 15px;}

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

div.scroll_table_container > div{
    overflow-y: scroll !important;
    overflow: auto;
}

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

div.table_container table{
    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: 35px;
    padding: 10px;
}

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

/* 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: #7973cb;
}

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

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

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

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

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

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

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    background-color: rgba(121,115,203,0.3);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-primary.disabled,
.btn-primary:disabled{
    background-color: rgba(121,115,203,0.3);
    border-color: rgba(121,115,203,0.3);
    color: var(--primary-color);
}

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

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

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

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

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

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

.btn.active,
.btn.active:hover,
.btn.active:focus,
.btn.active:active{
    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="time"],
input[type="datetime-local"],
textarea,
select{
    border: 1px solid #e7e7e7;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 14px;
    padding: 0 10px;
    height: 35px;
    width: 100%;
}

textarea{height: 85px;}

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,
input[type="datetime-local"]:focus-visible,
textarea:focus-visible,
select:focus-visible{
    border: 1px solid var(--primary-color);
    outline: none;
}

input:disabled,
select:disabled,
textarea:disabled{
    background-color: #e5e7f2;
    cursor: not-allowed;
}

input[type=datetime-local]:invalid{
    border: 2px solid #ff3e4f;
}

div.form_field label{
    color: var(--accent-text);
    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: #ff3e4f;}

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

/* --------------------------- profile -------------------------- */

/* -- cards -- */
div.profile_cards_container{
    padding: 20px 0 0 0;
    flex-direction: row;
    flex-wrap: wrap;
    column-count: 2;
    column-gap: 1%;
    row-gap: 20px;
    display: flex;
}

div.profile_cards_container > div:first-of-type{width: 49%;}
div.profile_cards_container > div{width: 24%;}

div.profile_cards_container div.card_box p.bigger_font{font-size: 18px;}
div.profile_cards_container div.card_box p{margin-bottom: 10px;}
div.profile_cards_container div.card_box p:last-of-type{margin-bottom: 0px;}
div.profile_cards_container div.card_box p i{margin-right: 5px;}

div.profile_cards_container div.card_box ul li{
    margin-right: 15px;
    font-size: 13px;
    float: left;
    color: #fff;
}

div.profile_cards_container div.card_box ul li i{margin-right: 3px;}

/* --------------------------- graphs -------------------------- */

section{margin-bottom: 20px;}
section:last-of-type{margin-bottom: 0px;}

div.graphs_box_container{
    justify-content: space-between;
    flex-direction: row;
    padding: 20px 0 0 0;
    flex-wrap: wrap;
    display: flex;
}

div.box_table_container{
    padding: 20px 0 0 0 !important;
    overflow-y: scroll !important;
    overflow: auto;
}

div.box_table_container h4,
div.box_table_container p{margin: 0 20px;}

div.box_table_container table{margin: 15px 0 0 0px;}

div.box_table_container th{
    text-align: center;
    line-height: 18px;
}

div.box_table_container th,
div.box_table_container td{padding: 3px 10px;}

div.box{
    border-radius: 20px;
    margin-bottom: 25px;
    padding: 15px;
}

div.box.one_box{width:100%}
div.box.two_boxes{width:49%}
div.box.three_boxes{width:32%}
div.box.four_boxes{width:32%}

div.box h4{
    color: var(--accent-text);
    padding-bottom: 5px;
}

div.box p{
    padding-bottom: 10px;
    font-size: 13px;
}

div.graph_container{width:100%;}

span.no_data{
    margin-bottom: 10px;
    text-align: center;
    display: block;
    color: #030307;
}

table.coloured tbody tr td{color: var(--accent-text);}

table.coloured tbody tr:nth-child(1){background-color: #efefef;}
table.coloured tbody tr:nth-child(2){background-color: #cfcfcf;}
table.coloured tbody tr:nth-child(3){background-color: #8bb4de;}
table.coloured tbody tr:nth-child(4){background-color: #b9dba4;}
table.coloured tbody tr:nth-child(5){background-color: #feb408;}
table.coloured tbody tr:nth-child(6){background-color: #fc363f;}

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

footer{padding: 20px 0;}

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

/*------------------------- surveys ---------------------------*/

i.big_icon{
    color: rgba(0,0,0, 0.1);
    text-align: center;
    font-size: 90px;
    display: block;
    margin: 20px 0;
}

/* -- cards -- */
div.survey_cards_container{
    padding: 20px 0 40px 0;
    flex-direction: row;
    flex-wrap: wrap;
    column-count: 2;
    column-gap: 2%;
    row-gap: 20px;
    display: flex;
}

div.survey_cards_container > div{width: 32%;}

div.card_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);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

div.card_box div.background_container{
    background-image: url("../images/circles_background.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    flex-direction: column;
    position: relative;
    display: flex;
    padding: 25px;
    width: 100%;
    right: 0px;
    top: 0px;
}

div.card_box span.square_icon{margin-bottom: 25px;}

div.card_box p{
    color: var(--white-text);
    font-size: 15px;
}

div.card_box span.data{
    color: var(--accent-text);
    font-weight: 300;
    font-size: 25px;
}

div.card_box a{
    border: 1px solid transparent;
    color: var(--accent-text);
    text-decoration: none;
    display: inline-block;
    border-radius: 10px;
    padding: 10px 15px;
    align-self: end;
}

div.card_box a:hover{
    border-color: var(--accent-text);
    background-color: var(--accent-text-opacity);
}

/* -- activities -- */
div.survey_activity_box{
     flex-direction: row;
     border-radius: 15px;
     margin-bottom: 12px;
     flex-wrap: wrap;
     display: flex;
     padding: 15px;
}

.survey_activity_box span.square_icon{margin-right: 15px;}

.survey_activity_box div.info h3{
    margin: 3px 0 2px 0;
    font-size: 15px;
}

.survey_activity_box div.info ul li{
    margin-right: 15px;
    font-size: 13px;
    float: left;
}

.survey_activity_box div.info ul li i{margin-right: 3px;}

.survey_activity_box div.percentage{
    border-right: 1px solid #eee;
    padding-right: 25px;
    margin-right: 20px;
    margin-left: auto;
    width: 20%;
}

.survey_activity_box div.percentage div.percentage_descriptor{margin-bottom: 10px;}

.survey_activity_box div.percentage div.percentage_descriptor span.percentage_value{
    color: var(--accent-text);
    float: right;
}

.survey_activity_box div.percentage div.progress{height: 10px;}

div.percentage .prog-test{
    background: repeating-linear-gradient(
      -60deg,
      var(--green),
      var(--green) 5px,
      var(--azure) 5px,
      var(--azure) 10px
    );
}

div.percentage .prog-profiling{
    background: repeating-linear-gradient(
      -60deg,
      var(--orange),
      var(--orange) 5px,
      var(--yellow) 5px,
      var(--yellow) 10px
    );
}

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

/* buttons to navigate through sections */
ul.survey_navigation{
    justify-content: center;
    overflow: scroll;
    min-width: 100%;
    display: flex;
    width: 100%;
}

ul.survey_navigation li{
    display: inline-block;
    margin: 0px;
    width: 12%;
}

ul.survey_navigation li div.item{
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    display: flex;
    margin: 0px;
}

ul.survey_navigation div.item span.dot_number{
    background-color: var(--primary-color);
    color: var(--white-text);
    text-align: center;
    border-radius: 50%;
    line-height: 25px;
    display: block;
    height: 25px;
    width: 25px;
    z-index: 0;
}

ul.survey_navigation div.item span.label{
    border-top: 1px solid #ddd;
    padding: 25px 10px 0 10px;
    color: var(--accent-text);
    text-overflow: ellipsis;
    display: inline-block;
    margin: -15px 0 0 0;
    overflow: hidden;
    width: 100%;
}

ul.survey_navigation div.item:hover span.dot_number,
ul.survey_navigation div.item.active span.dot_number{
    background-color: var(--accent-color);
    color: var(--accent-text);
}

ul.survey_navigation div.item.active span.label{font-weight: bold;}

/* loading */
.spinner {
    display: inline-block;
    margin: 10px;
    width: 70px;
}

.spinner > div {
    background-color: var(--primary-color);
    height: 12px;
    width: 12px;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
  } 40% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
  }
}

div#section_choice_indicator{
    margin: 10px auto;
    display: block;
}

/* common */
.hidden{display: none;}

p.survey_hint{
    font-size: 12px;
    margin-top: -10px;
}

div.survey_section hr{margin-top: 0px;}

div.survey_section h2,
div.survey_section h3,
div.survey_section h4,
div.survey_section h5{
    margin-bottom: 10px;
    font-weight: 400;
}

div.survey_section h2{
    color: var(--accent-text);
    font-size: 20px;
    margin: 20px 0;
}

div.survey_section h3{
    margin: 20px 0 10px 0;
    font-size: 15px;
}

div.survey_section h4{
    color: var(--primary-color);
    margin: 10px 0 20px 0;
    font-size: 16px;
}

div.survey_section h5{font-size: 14px;}

div.survey_alt_q_group_no_accordion{
    padding: 10px 15px 5px 15px;
    background-color: #fff;
    border:1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 5px;
}

/* form with accordion */
div.survey_alt_q_group_accordion{margin-bottom: 10px;}

.accordion-item{
    border-radius: 5px !important;
    overflow: hidden;
}

.accordion-button:not(.collapsed) {
    color: red !important;
    background-color: #fff;
    box-shadow: none;
}

div.survey_section button.accordion-button h4{margin: 0px;}

/* checkboxes */
div.checkboxes_selector{
    background-color: rgba(121,115,203, 0.3);
    color: var(--accent-text);
    margin-bottom: 20px;
    border-radius: 3px;
    padding: 5px 10px;
}

div.checkboxes_selector *{cursor: pointer;}

div.checkboxes_selector label{
    display: inline-block;
    margin-right: 15px;
}

/* butons at the bottom of the page */
div.buttons_container{
    margin-top: 20px;
}

div.buttons_container button.dx_btn{
    margin-left: auto;
    margin-top: -38px;
    display: flex;
}

/* responsive */
@media screen and (max-width: 1280px){
  ul.survey_navigation{justify-content: left;}
  ul.survey_navigation li{width: 22%;}
}

@media screen and (max-width: 6500px){
  ul.survey_navigation li{width: 35%;}
}

/* -------------------------------------------------------- responsive -------------------------------------------------------- */

@media screen and (max-width: 1280px){
    div.box.one_box,
    div.box.two_boxes,
    div.box.three_boxes,
    div.box.four_boxes{width:49%}
    .survey_activity_box div.percentage{width: 30%;}
}

@media screen and (max-width: 1100px){
    div.survey_cards_container > div {width: 49%;}
    div.profile_cards_container > div {width: 49%;}
    .survey_activity_box div.percentage{width: 25%;}
}

@media screen and (max-width: 950px){
    .survey_activity_box div.info{width: 60%;}
    .survey_activity_box div.percentage{
        border: none;
        margin: 15px auto 0 57px;
        width: 60%;
    }
    .survey_activity_box div.actions{align-self: end;}
}

@media screen and (max-width: 800px){
    div.external_container div.content_data {padding: 20px 25px 20px 25px;}
    div.box.one_box,
    div.box.two_boxes,
    div.box.three_boxes,
    div.box.four_boxes{width:100%}
    .survey_activity_box div.percentage{
        margin: 15px auto 0 57px;
        width: 60%;
    }
}

@media screen and (max-width: 768px){
    div.survey_cards_container > div,
    div.profile_cards_container > div {width: 100% !important;}
    .survey_activity_box div.info,
    .survey_activity_box div.percentage{width: 50%;}
    div.buttons_container button.dx_btn{
        display: block;
        margin-left: 0px;
        margin-top: 10px;
    }
}

@media screen and (max-width: 585px){
    .survey_activity_box div.info{width: 70%;}
    .survey_activity_box div.percentage,
    .survey_activity_box div.actions{width: 100%;}
    .survey_activity_box div.actions{
        margin: 25px auto 0 57px;
    }
}

@media screen and (max-width: 479px) {

    .percentage{
        max-width: none;
        width: 100%;
    }

    .survey_descriptor h3{
        display: none;
    }

    .trainer_descriptor{
        padding: 0;
    }

    .inner_container{
        row-gap: 10px;
    }

    .inline_container {
        row-gap: 20px;
        padding: 10px 10px 10px 10px;
    }
}