@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    /* fonts */
    --font-headings:'Nunito', sans-serif;
    --font-default:'Public Sans', serif;

    /* colors */
    --theme-primary:#d01345;
    --theme-brand:#6C0693;

    --primary: #0C7FCD;
    --gray: #5a6681;
    --success: #2cd445;
    --secondary: #8C008A;
    --danger: #d01345;
    --light: #f8f8f8;
    --faded: #596177;
    --dark: #1a3a5c;
}

body {
    font-family:var(--font-default);
    font-size:1rem;
    background:#eef0f4;
}

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 {
    font-family:var(--font-default);
    font-weight:700;
}

[data-notify="container"] a {
    color:white;
    text-decoration:underline;
}

.btn {
    border-radius:.6rem;
    padding:.5rem 1rem;
}

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

.btn-success {
    background-color:var(--success);
    border-color:var(--success);
}

button:disabled, button[disabled]{
    border: 1px solid #999999 !important;
    background-color: #dde2ed !important;
    color: #666666 !important;
}

.form-control {
    background:#eef0f4;
    border:1px solid #d5dae2;
}

/* HEADER */
header {
    padding:.8rem 0;
    background: linear-gradient(to right, #0C7FCD, #00B1B1);
}

header .logo {
    height:50px;
}

header #flow {
    font-size:.65rem;
    color:white;
}

header .icon-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:36px;
    height:36px;
    font-size:1.05rem;
    text-align:center;
    border:1px solid white;
    border-radius:100%;
}

header .faded {
    opacity:0.4;
}

header .sep {
    border-bottom:1px solid white;
}

header #languages li {
    display:inline;
}

header #languages li a {
    display:inline-block;
    color:#43bcca;
    font-size:.75rem;
    border:1px solid #43bcca;
    border-radius:100%;
    text-decoration:none;
    font-weight:600;
    padding:.25rem;
    text-align:center;
    margin-left:.2rem;
}

header #languages li a.active {
    background:white;
    color:var(--dark);
    border-color:white;
}

/* CONTENT */

.intro-step div {
    width:160px;
    height:160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius:10px;
    border:1px solid #d5dae2;
    background:#eef0f4;
}

.intro-step div i {
    color:#0c7fcd;
    font-size:4rem;
}

.intro-step span {
    font-size:0.85rem;
    display:block;
    margin-top:.5rem;
}

.title-head {
    text-transform: uppercase;
    font-size:.85rem;
    letter-spacing: 1px;
    font-weight:600;
    color:var(--gray);
}

.nr-question {
    background:var(--primary);
    color:white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius:20px;
    width:25px;
    height:25px;
    font-size:.75rem;
}

.answer {
    border: 1px solid #d5dae2;
    background-color: #eef0f4;
    border-radius:10px;
    padding:.75rem 1rem;
}

.answer-selected {
    background-color: var(--primary);
    color:white;
}


.drag-this {
    cursor:move;
}

.drag-here {
    border:1px dotted white;
    width:130px;
    height:130px;
}

.col .drag-here {
    width:auto;
    height:auto;
}

.type-drag_group .card-header {
    background-color: #eef0f4;
}

.type-drag_group li {
    cursor:move;
    display:block;
    border:1px solid #eaeaea;
    padding:.5rem;
    margin-bottom:.5rem;
}

/* FOOTER */

footer {
    bottom:0;
    width:100%;
    border-top:1px solid #d5dae2;
    color:#5A6680;
    font-size:.85rem;
    padding:.8rem 0;
}


/* RESPONSIVE LARGE */
@media (min-width: 1550px) {

}

/* RESPONSIVE TABLET */
@media (max-width: 990px) {


}

/* RESPONSIVE MOBILE */
@media (max-width: 576px) {

    [data-notify="container"] {
        width: 90% !important;
        left: 20px;
    }

    .logo {
        margin:0px auto;
        display:block;
        margin-bottom:1rem;
        margin-top:.5rem;
    }

    #languages {
        text-align:center;
        margin-top:1rem;
    }

    .answer {
        margin-bottom:1rem;
    }

    .drag-here {
        border:1px dotted white;
        max-width:60px;
        max-height:60px;
    }

    .drag-options .answer {
        max-width:30%;
        display:inline-block;
        max-height: 100%;
        height:60px;
    }

    .col .drag-here {
        max-width: 100%;
        max-height: 100%;
    }

    .nr-question {
        width:40px;
    }

}

.dragaware {
    cursor: pointer;
}

.draggable_clone {
    position: absolute; /* also set via javascript */
    z-index: 100001;
    pointer-events:none; /* disable mouse events on the clone */
}

.draggable.dragging, .draggable .dragging {
    opacity: 0.5;
}

.sortable .sortable_clone {
    position: absolute; /* also set via javascript */
    z-index: 100001;
    list-style-type: none;
    opacity: 0.5;
    pointer-events: none;
}

.sortable .sortable_placeholder {
    box-sizing: border-box;
    list-style-type: none;
    background: #eee;
    border: 2px dotted #52b218;
}

.drag-here.hovering {
    border:1px dotted var(--dark);
}