body {
   /* background-color: skyblue;*/
}

select[id$="_phone_number_country"] {
    width: auto;
    display: inline-block;
}

input[id$="_phone_number_number"] {
    width: 200px;
    display: inline-block;
}

.tree li > ul {
    margin-bottom: 0.5em;
}

.tree a {
    color: #071437;
}

.tree a:hover {
   color: #9e1f62;
}

.data-table th button, .datatable-pagination-list button {
    color: inherit;
    border: 0;
    background-color: inherit;
    cursor: pointer;
    text-align: inherit;
    font-weight: inherit;
    font-size: inherit;
}
.datatable-sorter, .datatable-filter {
    display: inline-block;
    height: 100%;
    position: relative;
    width: 100%;
}

.data-table > thead > tr > th {
    vertical-align: bottom;
    text-align: left;
    border-bottom: 1px solid #d9d9d9;
}

.edition-survey-columns-wrapper {
    overflow: visible;
}

.edition-survey-columns-wrapper .datatable-container {
    max-height: calc(100vh - 260px);
    overflow: auto;
    border: 1px solid #cfd4dc;
    border-radius: 6px;
}

.edition-survey-columns-table {
    border-collapse: separate;
    border-spacing: 0;
}

.edition-survey-columns-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #ffffff;
    box-shadow: inset 0 -1px 0 #aeb6c2;
}

.edition-survey-columns-table > thead > tr > th.survey-question-column {
    border-left: 1px solid var(--survey-column-border);
    border-right: 1px solid var(--survey-column-border);
    background-color: var(--survey-header-bg);
    color: #252f4a;
}

.edition-survey-columns-table > tbody > tr > td {
    border-bottom: 1px solid #cfd4dc;
}

.edition-survey-columns-table > tbody > tr:nth-child(even) > td {
    background-color: #f8fafc;
}

.edition-survey-columns-table > tbody > tr > td.survey-response-column {
    max-width: 250px;
    white-space: normal;
    vertical-align: top;
    border-left: 1px solid var(--survey-column-border);
    border-right: 1px solid var(--survey-column-border);
    background-color: var(--survey-response-bg);
}

.edition-survey-columns-table > tbody > tr:nth-child(even) > td.survey-response-column {
    background-color: var(--survey-response-alt-bg);
}

.edition-survey-columns-table > tbody > tr:hover > td.survey-response-column {
    background-color: var(--survey-response-hover-bg);
}

.edition-survey-columns-table .survey-color-1,
.survey-response-card.survey-color-1 {
    --survey-header-bg: #e8f3ff;
    --survey-response-bg: #f7fbff;
    --survey-response-alt-bg: #eef7ff;
    --survey-response-hover-bg: #edf6ff;
    --survey-column-border: #b8d8f4;
}

.edition-survey-columns-table .survey-color-2,
.survey-response-card.survey-color-2 {
    --survey-header-bg: #e9f8ef;
    --survey-response-bg: #f7fcf9;
    --survey-response-alt-bg: #eef9f3;
    --survey-response-hover-bg: #eef9f3;
    --survey-column-border: #b9dec8;
}

.edition-survey-columns-table .survey-color-3,
.survey-response-card.survey-color-3 {
    --survey-header-bg: #fff3dd;
    --survey-response-bg: #fffbf3;
    --survey-response-alt-bg: #fff5e5;
    --survey-response-hover-bg: #fff5e5;
    --survey-column-border: #e6cf9f;
}

.edition-survey-columns-table .survey-color-4,
.survey-response-card.survey-color-4 {
    --survey-header-bg: #f0edff;
    --survey-response-bg: #faf9ff;
    --survey-response-alt-bg: #f3f0ff;
    --survey-response-hover-bg: #f3f0ff;
    --survey-column-border: #cbc3ee;
}

.edition-survey-columns-table .survey-color-5,
.survey-response-card.survey-color-5 {
    --survey-header-bg: #e8f7f7;
    --survey-response-bg: #f6fcfc;
    --survey-response-alt-bg: #edf8f8;
    --survey-response-hover-bg: #edf8f8;
    --survey-column-border: #afdada;
}

.edition-survey-columns-table .survey-color-6,
.survey-response-card.survey-color-6 {
    --survey-header-bg: #fdecef;
    --survey-response-bg: #fff8f9;
    --survey-response-alt-bg: #fdeff2;
    --survey-response-hover-bg: #fdeff2;
    --survey-column-border: #e7bcc5;
}

.edition-survey-columns-table .survey-color-7,
.survey-response-card.survey-color-7 {
    --survey-header-bg: #eef4e3;
    --survey-response-bg: #fafcf6;
    --survey-response-alt-bg: #f2f7e9;
    --survey-response-hover-bg: #f2f7e9;
    --survey-column-border: #c8d8ac;
}

.edition-survey-columns-table .survey-color-8,
.survey-response-card.survey-color-8 {
    --survey-header-bg: #edf1f7;
    --survey-response-bg: #f8fafc;
    --survey-response-alt-bg: #f0f4f9;
    --survey-response-hover-bg: #f0f4f9;
    --survey-column-border: #c2cedd;
}

.survey-response-card {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--survey-column-border);
    border-radius: 6px;
    background-color: var(--survey-response-bg);
}

.datatable-sorter, .datatable-filter {
    display: inline-block;
    height: 100%;
    position: relative;
    width: 100%;
}

.datatable-sorter::before,
.datatable-sorter::after {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    right: 4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.2;
}


.datatable-sorter::before {
    border-top: 4px solid #000;
    bottom: 0;
}

.datatable-sorter::after {
    border-bottom: 4px solid #000;
    border-top: 4px solid transparent;
    top: 0px;
}

.datatable-ascending .datatable-sorter::after,
.datatable-descending .datatable-sorter::before,
.datatable-ascending .datatable-filter::after,
.datatable-descending .datatable-filter::before {
    opacity: 0.6;
}

.symbol img {
    object-fit: cover;
}

.panel-title{
    padding: 0 30px;
}
.control-toggle {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
    margin-bottom: 0px;
    float: right;
}
.control-toggle input {
    display:none;
}
.toggle-button {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 35px;
}
.toggle-button:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0px;
    bottom: 0px;
    background-color: #ffffff;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .toggle-button {
    background-color: #36b1e5;
}
input:focus + .toggle-button {
    box-shadow: 0 0 1px #36b1e5;
}
input:checked + .toggle-button:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}
.control-toggle-label{
    position: relative;
    top: -10px;
    padding: 0 10px;
}

@media (max-width: 481px) {
    .card .card-header {
        padding: 0 1.25rem;
    }
    .card .card-body {
        padding: 1rem 1.25rem;
    }

    #user_phone_number_country{
        max-width: 200px;
    }
}