@font-face {
    font-family: Montserrat;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(fonts/Montserrat.woff2) format('woff2');
    font-style: normal;
    font-weight: 400;
}

.face-recognition-wrapper {
    margin-top:20px;
    padding-left:20px;
    font-family: Montserrat, sans-serif;
}

#tab-one-panel > div,
#tab-two-panel > div {
    text-align:left;
}

#form_loader,
#user-profiles-list {
    display:none;
}

#form_loader.visible{
    display:inline-block;
}

.title-wrapper {
    text-align: left;
}

.face-recognition-wrapper > .title-wrapper > .title {
    display: inline-block;
    color: #374656;
    padding-bottom: 5px;

    font-family: Montserrat, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    /* identical to box height, or 121% */

    letter-spacing: -0.553846px;
}

.list > li:nth-child(even){
    padding:10px;
    background: #F4F8FA;
    border: 1px solid rgba(108, 132, 143, 0.3);
    border-bottom:none;
    box-sizing: border-box;
    margin-bottom:0;
}

.list > li:nth-child(odd){
    padding:10px;
    background: #FFFFFF;
    border: 1px solid rgba(108, 132, 143, 0.3);
    border-bottom:none;
    box-sizing: border-box;
    margin-bottom:0;
}

.list > li:last-child{
    border-bottom: 1px solid rgba(108, 132, 143, 0.3);
}

img#default-image {
    max-width: 480px;
}
/*
div#wpbody {
    background: #374656;
    margin-left: -20px;
}
*/

#groupPhotos > input[type="submit"],
#userProfile > input[type="submit"]{

    background: #00AEDA;
    border-radius: 5px;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;

    font-family: Montserrat, serif;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;

}

/* Tabs style */
@keyframes fake {
    from {
        opacity: 1; }
    to {
        opacity: 1; } }
body {
    animation: fake 1s infinite; }

.worko-tabs {
    margin: 0;
    width: 90%;
    padding-bottom: 20px; }
.worko-tabs .state {
    position: absolute;
    left: -10000px; }
.worko-tabs .flex-tabs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid gray;
    border-top: none;
}

.worko-tabs .flex-tabs .tab {
    flex-grow: 1;
    max-height: 40px; }
.worko-tabs .flex-tabs .panel {
    background-color: #fff;
    padding: 20px;
    min-height: 300px;
    display: none;
    width: 100%;
    flex-basis: auto;
    padding-left:0;
    padding-right:0;}
.worko-tabs .tab {
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    background-color: #eee;
    cursor: pointer;
    border-left: 10px solid #ccc; }
.worko-tabs .tab:hover {
    background-color: #fff; }

#tab-one:checked ~ .tabs #tab-one-label,
#tab-two:checked ~ .tabs #tab-two-label,
#tab-three:checked ~ .tabs #tab-three-label,
#tab-four:checked ~ .tabs #tab-four-label {
    background-color: #fff;
    cursor: default;
    border-left-color: #00aeda;
    border-left-width: 10px; }

#tab-one:checked ~ .tabs #tab-one-panel,
#tab-two:checked ~ .tabs #tab-two-panel,
#tab-three:checked ~ .tabs #tab-three-panel,
#tab-four:checked ~ .tabs #tab-four-panel {
    display: block; }

@media (max-width: 600px) {
    .flex-tabs {
        flex-direction: column; }
    .flex-tabs .tab {
        background: #fff;
        border-bottom: 1px solid #ccc; }
    .flex-tabs .tab:last-of-type {
        border-bottom: none; }
    .flex-tabs #tab-one-label {
        order: 1; }
    .flex-tabs #tab-two-label {
        order: 3; }
    .flex-tabs #tab-three-label {
        order: 5; }
    .flex-tabs #tab-four-label {
        order: 7; }
    .flex-tabs #tab-one-panel {
        order: 2; }
    .flex-tabs #tab-two-panel {
        order: 4; }
    .flex-tabs #tab-three-panel {
        order: 6; }
    .flex-tabs #tab-four-panel {
        order: 8; }

    #tab-one:checked ~ .tabs #tab-one-label,
    #tab-two:checked ~ .tabs #tab-two-label,
    #tab-three:checked ~ .tabs #tab-three-label,
    #tab-four:checked ~ .tabs #tab-four-label {
        border-bottom: none; }

    #tab-one:checked ~ .tabs #tab-one-panel,
    #tab-two:checked ~ .tabs #tab-two-panel,
    #tab-three:checked ~ .tabs #tab-three-panel,
    #tab-four:checked ~ .tabs #tab-four-panel {
        border-bottom: 1px solid #ccc; } }