* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #EFEFEF;
    font-family: 'Montserrat';
    padding-bottom: 0!important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
body, html, #app, #mithril-app{
    height: 100%;
}
a, a:hover, a:active {
    text-decoration: none;
}
h1 {
    font-size: 36px;
}
h2{
    font-size: 24px;
}
section#sidebar-area{
    position: fixed;
    height: 100%;
    width: 220px;
    background-color: #4F6E80;
    top: 0;
    left: 0;
    display: block;
    z-index: 1000;
    animation: leftMenuComeFromLeft 200ms ease-in-out;
}

#prolyrix-logo img{
    padding: 20px;
    width: 100%;
}

#main-area{
    /*margin-left: 220px;*/
    background-color: #F0F0F0;
    color: #757575;
    z-index: 0;
    position: relative;
}

ul{
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#left-menu{
    margin-top: 70px;
}
#left-menu ul{
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
}

#left-menu ul>li{
    height: 70px;
    display: block;
    opacity: 0;
    animation: smallComeFromBottom 100ms ease-in-out forwards;
}
#left-menu ul>li>a{
    height: 70px;
    display: flex;
    align-items: center;
    color: #11202A;
    position: relative;
}
#left-menu li.active span{
    color: #ffffff;
}

#left-menu ul>li:hover a{
    color : rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: 200ms;
}
#left-menu ul>a:hover li.active{
    color : #ffffff;
    cursor: pointer;
    transition: 200ms;
}
#left-menu ul>a:active li{
    color : rgba(255, 255, 255, 1);
    transition: 200ms;
}

#left-menu nav .ico-container{
    width: 70px;
    text-align: center;
}
#left-menu .ico-container>i{
    font-size: 20px;
}
#left-menu li.active .right-active-indicator{
    background-color: #ffffff;
    height: 50%;
    width: 5px;
    right: 0;
    top: 25%;
    opacity: 1;
    position: absolute;
    animation: active-indicator 0.2s;
}

#main-area>.plain-header {
    padding: 5vh 3vw;
}
.plain-header>.title-section{
    margin-top:35px;
    color: #757575;
}
.title-section h1{
    font-weight: bold;
    letter-spacing: -1.5px;
}
.title-section h2{
    color: #757575;
    opacity: 0.85;
}

.lang-box {
    position: relative;
    width: 70px;
    height: 28px; /* 50% doesn't work on firefox ...*/
}
.lang-box .abs-container{
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 0px;
    min-width: 66px;
}
.lang-selected{
    float: left;
    padding: 0px 14px;
}
.lang-to-selected{
    float: none;
    text-align: left;
    padding: 2px 14px;
}
.lang-box .ico-container{
    float: right;
    padding: 0px 14px 0px 0px;
}
#header-mobile .lang-defaut{
    cursor: pointer;
    border-radius: 5px;
    transition: 150ms;
    float: right;
    position: relative;
    width: 100%;
}

.box-shadow{
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
}

.lang-section .popup-choice-lang{
    opacity: 1;
    display: none;
}

#header-mobile{
    background-color: #4F6E80;
    width: 100%;
    color: #DEE2E6;
    padding: 5px 18px;
    height: 60px;
    display: table;
    position: fixed;
    z-index: 100;
    top: 0;
}

#header-mobile > * {
    display: table-cell;
    vertical-align: middle;
    width: calc(100% / 3);
}
@media only screen and (max-width: 340px) {
    #header-mobile > * {
        display: table-cell;
        vertical-align: middle;
        width: calc(100% / 3);
    }
    #header-mobile > span:nth-child(1), #header-mobile > span:nth-child(2){
        width: 28%;
    }
    #header-mobile > span:nth-child(3){
        width: 44%;
    }
    #left-menu {
        margin-top: 35px;
        height: 50%;
    }
}

#header-mobile .middle-section {
    text-align: center;
}

.burger-nav-container{
    height: 100%;
}

#header-mobile img{
    height: 26px;
}
#header-mobile .logo-container img{
    height: 36px;
}

#header-mobile .right-section{
    text-align: right;
}

#nav-background{
    z-index: 990;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    display: block;
    animation: fadeInAnimation 200ms ease-in-out;
}
.fadeOut{
    animation: fadeOutAnimation 200ms ease-in-out!important;
}
.fadeIn{
    animation: fadeInAnimation 200ms ease-in-out;
}
#header-mobile #burger-nav{
    cursor: pointer;
}

#mobile-content{
    margin-top : 60px;
    padding: 8px 8px 0px 8px;
}
#mobile-content #signup{
    padding: 10px;
}
#signup input{
    margin: 10px 20px;
}
#left-nav-container.exit-a #sidebar-area{
    animation: closeLeftMenu 225ms ease-in-out;
}
.lang-text{
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
}
.container-lang-box .lang-text{
    color: #212528;
}
.container-lang-box{
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    color: #757575;
    cursor: pointer;
    animation : openLangMenu 100ms ease-in-out;
}
.container-lang-box i{
    color: rgba(117, 117, 117, 0.3);
}
.exit-popup-lang{
    animation : exitLangPopup 100ms ease-in-out;
}
.container-lang-box .current-lang{
    padding : 1px 0px;
}
.lang-box .abs-container:first-child .lang-selected{
    padding: 0px 8px;
}
.flex-footer{
    background: #32393F;
    width: 100%;
    flex-shrink: 0;
    color: #DEE2E6;
    position: relative;
    z-index: 0;
}
#mithril-app{
    display: flex;
    flex-direction: column;
}
#main-app{
    /*flex: 1 0 auto;*/
    flex: 1 1 0;
}
.container-plain-t{
    padding: 18px 20px;
}
.flex-footer h2{
    font-weight: bold;
    font-size: 18px;
    color: white;
}
.col-50{
    width: 50%;
}
.flex-footer .item-nav{
    font-size: 14px;
    color: #DEE2E6;
}
.footer-nav ul{
    display: flex;
    flex-wrap: wrap;
}
.flex-footer .bottom-header{
    background-color: #212528;
}
.flex-footer .all-rights-reserved > * {
    display: inline-block;
    padding: 0px 3px;
}
.flex-footer .all-rights-reserved i {
    padding: 0px 3px 0px 0px;
}
.left-nav-lang{
    position: relative;
    margin-top: 4px;
}
#left-nav-container .lang-box {
    position: initial;
}
#left-nav-container .lang-box .abs-container{
    width: 75px;
    top: initial;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
}
#left-nav-container .lang-box .ico-container {
    padding: 0px 10px 0px 0px;
}
#left-nav-container .lang-section{
    width: 70px;
}
#left-nav-container .lang-section{
    width: 70px;
}
#left-nav-container .lang-box .abs-container:first-child .lang-selected{
    padding: 0px 0px 0px 14px;
}
#left-nav-container .lang-box.lang-defaut{
    height: initial;
    color: #ffffff;
    width: 100%;
}
#auth-view .switch-button{
    display: flex;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    text-transform: uppercase;
    font-weight: bold;
    align-items: center;
    height: 32px;
    line-height: 33px;
    font-size: 14px;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    background-color: #ffffff;
}
#auth-view .col-50.active{
    background-color: #4F6E80;
    color: #ffffff;
    transition: 125ms ease-in-out;
}
/*#auth-view .col-50:hover{
    background-color: rgb(79, 110, 128, 0.8);
    color: #ffffff;
    transition: 125ms ease-in-out;
}*/
.content{
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.widget{
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px 10px;
    background-color: #ffffff;
    opacity: 0;
    animation: 200ms widgetComeFromBottom ease-in-out forwards;
    position: relative;
    margin-bottom: 8px;
}
.widget:nth-child(1){
    animation-delay: 225ms;
}
.widget:nth-child(2){
    animation-delay: 275ms;
}
.widget:nth-child(3){
    animation-delay: 325ms;
}
.widget:nth-child(4){
    animation-delay: 375ms;
}
.widget:nth-child(5){
    animation-delay: 425ms;
}
.widget .center-title{
    font-size: 20px;
    text-align: center;
    color: #32393F;
    margin: 16px 0px 25px;
}
.widget .center-title i {
    padding-right: 8px;
}
.widget .center-title i.fa-lock{
    color: rgba(40, 167, 69, 0.75);
}
.bold{
    font-weight: bold;
}
.text-black{
    color: #212528;
}
.widget .text-grey{
    color: #757575;
}
form .input-item{
    display: table;
    background-color: #EEEEEE;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    margin-top: 6px;
    overflow: hidden;
    position: relative;
}
@-moz-document url-prefix() {
    form .input-item {
        overflow: hidden;
    }
}
form .input-item > * {
    vertical-align: middle;
    display: table-cell;
}

.input-item .left-ico{
    width: 45px;
    text-align: center;
}

form .input-section .title{
    text-transform: uppercase;
    font-size: 12px;
    color: #757575;
    opacity: 0;
    font-weight: bold;
    margin-left: 17px;
    animation: textComeFromLeft 100ms ease-in-out forwards;
}

form .input-item input{
    background-color: transparent;
    border: none;
    padding: 0;
    text-align: left;
    line-height: 40px; /* /!\ need to be equal to the height of form .input-item /!\ */
    height: 100%;
    width: 98%;
}
form .input-item input::placeholder{
    opacity: 0.4;
}
.widget form{
    margin-top: 10px;
}
textarea:focus, input:focus{
    outline: none;
}
form .input-indicator{
    width: 5px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
form .input-indicator.error{
    background-color: #DC3545;
    animation: errorIndicatorAnimation 1000ms ease-in-out;
}
form .input-indicator.valid{
    background-color: #28A745;
    animation: validIndicatorAnimation 100ms ease-in-out;
}
form .input-section{
    position: relative;
    margin-bottom: 15px;
}
form input.input-phone{
    padding: 0 0 0 5px;
}
form .input-section .error-message{
    text-align: right;
    display: block;
    width: 100%;
    font-size: 10px;
    color: #DC3545;
    animation: errorFormMessage 100ms ease-in-out;
}
form .input-section .left-ico i{
    margin-top: 5px;
    font-size: 18px;
}
input:-webkit-autofill {
    animation: autofill;
    animation-name:autofill;
    animation-fill-mode: both;
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}
select.select-your-country-phone{
    height: 100%;
    width: 100px;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
}
form input.phone {
    margin-left: 10px;
}
form .select-input-container{
    width: 124px;
    padding: 0 5px;
    
    border-right: 1px solid rgba(0,0,0,0.05);
    border-left: 1px solid rgba(0,0,0,0.05);
}
form .select-input-container i{
    display: inline-block;
}
select{
    -webkit-appearance: none;
    outline: none;
}
form .submit-button.right{
    float: right;
}
form .submit-button{
    text-transform: uppercase;
    height: 35px;
    margin: 12px 0;
    border-radius: 17.5px;
    background-color: #4F6E80;
    padding: 0px 18px;
    transition: 100ms ease-in-out;
}

.submit-button:hover{
    -webkit-transform : scale(1.02);
    -ms-transform     : scale(1.02);
    transform         : scale(1.02);
    background-color: #B48E62;
}

form .submit-section .submit-button input{
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 1px;
    background-color: transparent;
    border: none;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    left: 0;
    z-index: 1000;
    height: 30px;
    width: 100%;
    transition: 125ms;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12.5px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    transition: 125ms;
}
@media only screen and (max-width: 400px) {
    .checkmark {top: 9px;}
    .myinfo-form .checkmark {
        top: 0px;
    }
}
.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
    transition: 125ms;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #4F6E80;
    transition: 125ms;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}
.checkbox-container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
form .text-checkbox{
    font-weight: bold;
    font-size: 12px;
}
.grecaptcha-badge {
    display: none !important;
}
.backend-errors-container{
    text-align: left;
    font-size: 10px;
    color: #DC3545;
    padding-right: 55%;
}
.backend-errors-container span{
    display: block;
}
form .submit-section{
    display: flex;
    align-items: center;
    padding: 10px 0px 0px;
}
form .submit-section .submit-button{
    margin-left: auto;
}
form .lost-password{
    text-decoration: underline!important;
    font-size: 12px!important;
    text-align: left;
    margin-top: -3px;
    flex: 1;
    color: #4F6E80;
    font-weight: bold;
    transition: 100ms ease-in-out;
}
form .lost-password:hover{
    -webkit-transform : scale(1.02);
    -ms-transform     : scale(1.02);
    transform         : scale(1.02);
}

form .lost-password span{
    color: #4F6E80;
}
.description-lost-password{
    margin: 30px 0px;
    text-align: center;
}
.widget .widget-description{
    margin: 30px 0px;
    text-align: center;
}
.lost-password-view .widget{
    margin-top: 0px;
}

.content .response-message{
    text-align: center;
    font-size: 14px;
    padding: 0px 0px 15px;
}
.response-message .response-text.success{
    color: #28A745;
    animation: reponseMessageSuccess 200ms ease-in-out;
}
.response-message .response-text.error{
    color: #DC3545;
    animation: reponseMessageError 800ms ease-in-out;
}
form .file_input{
    width: 100%!important;
    height: 100%!important;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 100;
}
.input-item label{
    height: 100%;
    width: 100%;
    display: table;
}
.input-item label > *{
    vertical-align: middle;
    display: table-cell;
}
.input-item label .browse{
    background-color: #E8E8E8;
    width: 120px;
    height: 100%;
    text-align: center;
}
.file-name{
    line-height: 15px;
    max-width: 50px;
}
.verify-view .widget {
    margin-top: 0px;
}
.input-item label .browse span{
    vertical-align: middle;
}
.verify-view .border-bottom-input-file{
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.verify-view .input-section{
    margin-bottom: 0px;
    padding: 12px 0 20px;
}
.italic {
    font-style: italic;
    font-size: 14px;
    margin-left: 10px;
}
.verify-view form .input-section.input-type-file .error-message {
    top: 78px;
}
form .input-section.input-type-file .input-indicator{
    float: none;
}
.verify-form .submit-section{
    padding: 2px 0px 10px;
}
.button-action {
    height: 35px;
    background-color: #4f6e80;
    color: #fff;
    border: none;
    border-radius: 17.5px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 0px 20px;
    font-size: 14px;
}
.pending-view .step-section .button-container{
    text-align: center;
    margin-bottom: 10px;
}
.hide-background{
    background-color: transparent!important;
}
.pending-view .step-section{
    margin-top: 30px;
}
.pending-view h4{
    margin-bottom: 0.9rem;
}
.pending-view .user-email{
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    padding: 6px;
}
.pending-view .submit-section{
    padding: 0px;
    margin-top: -20px;
}
.pending-view .input-item .input_email::placeholder{
    color: #757575!important;
    opacity: 1!important;
}
.pending-view .input-item .input_email{
    width: 98%;
    color: #757575;
}
.widget h4{
    font-size: 18px;
    color: #32393F;
}
.pending-view label.align-label{
    align-items: center;
    display: flex;
    margin-top: -2px;
    color: #fff;
    margin-bottom: 0;
    font-size: 14px;
}
#edit-email-input{
    color: #ffffff;
    font-weight: bold;
    align-items: center;
    display: flex;
    padding: 0 10px;
    margin-top: -1px;
    letter-spacing: 1px;
    font-size: 14px;
}
.edit-button{
    background-color: #B48E62!important;
}
.pending-view .submit-section .submit-button {
    margin-left: auto;
    display: flex;
    transition: 200ms ease-in-out;
}
.submit-button{
    cursor: pointer;
}

button:focus {
    outline: none!important;
}
.pending-view .fa-check{
    color: #28A745;
}
.widget p{
    margin-bottom: 1.5rem;
}
.widget .input_message{
    padding: 3px 6px;
    width: 100%;
    height: 300px;
    resize: none;
}
.widget-loader-container{
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 6px;
    animation: loaderComeFromBottom 200ms ease-in-out;
}
.widget-loader-container .loader-background{
    background-color: #4F6E80;
    height: 100%;
    transition: 500ms ease-in-out;
    width: 0%;
}

.exit-widget-loader{
    animation: leaveWidgetLoader 200ms ease-in-out;
}

.textarea{
    background-color: transparent;
    border: none;
}
textarea::-webkit-input-placeholder, input::-webkit-input-placeholder {
    color:rgba(117, 117, 117, 0.35)!important;
    opacity: 1!important;
}

textarea::-moz-placeholder, input::-moz-placeholder {  /* Firefox 19+ */
    color:rgba(117, 117, 117, 0.35)!important;
    opacity: 1!important;
}

textarea:-ms-input-placeholder, input:-ms-input-placeholder {
    color:rgba(117, 117, 117, 0.35)!important;
    opacity: 1!important;
}

textarea::placeholder, input::placeholder {
    color:rgba(117, 117, 117, 0.35)!important;
    opacity: 1!important;
}

.important-hide{
    display: none!important;
}
.edit-password-form .submit-button {
    background-color: #B48E62;
    font-size: 14px;
    padding: 0px 10px;
}

.button-with-ico{
    border: none;
    color: #ffffff;
    font-size: 14px;
    padding: 10px 15px;
    border-radius: 500px;
    line-height: 17.5px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 20px;
    animation: basicScale 100ms ease-in-out;
}
.brown{
    background-color: #B48E62;
}
.danger{
    background-color: #DC3545
}
.button-with-ico .left-ico{
    margin-right: 10px;
}
.widget.account-management{
    text-align: center;
}
.popup-box{
    z-index: 1100;
    background-color: #ffffff;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 8px;
    right: 8px;
    transform: translateY(-50%);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
}
.popup-container{
    position: relative;
    padding: 8px 16px;
}
.popup-container .top-border{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    opacity: 0;
    animation: popupBorderComeFromTop 125ms ease-in-out forwards;
}
.popup-container .header-popup{
    margin: 20px 0 16px;
    font-size: 22px;
    line-height: 1em;
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
}
.popup-container .ico-info-container{
    padding: 0 15px 0 10px;
    font-size: 26px;
}
.exit-fade{
    animation: exitFade 200ms ease-in-out;
}
.danger-color{
    color: #DC3545;
}
.popup-container .title-popup{
    width: 77%;
}
.ico-exit-popup{
    position: absolute;
    top: 0px;
    right: 5px;
    font-size: 18px;
    color: #cccccc;
}
.header-popup .left-s{
    float: left;
}
.popup-container .body-popup {
    margin: 15px 0px;
    font-size: 14px;
}
.footer-popup .button-with-ico{
    width: 100%;
    margin-bottom: 10px;
}
.popup-container .footer-popup{
    margin:20px 0px 8px;
}
.widget .update-notif .notif-ico{
    padding: 0px 7px 0px 0px;
}
.widget .update-notif .notif-container{
    background-color: #28a745;
    padding: 5px 15px;
    border-radius: 0 0px 0px 400px;
}
.widget .update-notif{
    position: absolute;
    right: 0;
    font-size: 10px;
    top: 0;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    animation: widgetUpdateNotif 200ms ease-in-out;
}

.widget .update-notif.leave-update-widget-notif{
    animation: leaveWidgetUpdateNotif 200ms ease-in-out!important;
}
.general-form .input_phone {
    margin-left: 5px;
}
.right-section .user-ico{
    font-size: 26px;
}
.usernav-widget{
    position: fixed;
    top: 68px;
    right: 8px;
    background-color: #ffffff;
    z-index: 200;
    border-radius: 5px;
    overflow: hidden;
    animation: userNavCome 200ms ease-in-out;
    opacity: 1;
}

#usernav-background{
    z-index: 80;
    background-color: rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    animation: fadeInAnimation 200ms ease-in-out;
}

.user-nav .nav-item{
    color: #757575;
    font-size: 18px;
    text-transform: uppercase;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.user-nav ul .nav-item:nth-child(1){
    opacity: 0;
    animation: userNavItemCome 100ms ease-in-out forwards;
    animation-delay: 100ms;
}
.user-nav ul .nav-item:nth-child(2){
    opacity: 0;
    animation: userNavItemCome 100ms ease-in-out forwards;
    animation-delay: 125ms;
}
.user-nav ul .nav-item:nth-child(3){
    opacity: 0;
    animation: userNavItemCome 100ms ease-in-out forwards;
    animation-delay: 150ms;
}
.user-nav ul .nav-item:nth-child(4){
    opacity: 0;
    animation: userNavItemCome 100ms ease-in-out forwards;
    animation-delay: 175ms;
}
.user-nav ul .nav-item:nth-child(5){
    opacity: 0;
    animation: userNavItemCome 100ms ease-in-out forwards;
    animation-delay: 200ms;
}
.user-nav ul.nav-item:nth-child(6){
    opacity: 0;
    animation: userNavItemCome 100ms ease-in-out forwards;
    animation-delay: 225ms;
}

.user-nav .nav-item:last-child {
    border-bottom: none;
}
.user-nav .nav-item .link{
    padding: 14px 0;
    display:inline-block;
}
.user-nav .ico-container{
    float: left;
    width: 60px;
    text-align: center;
}
.user-nav .text-nav-container{
    padding: 0 20px 0 0;
}
.user-nav .ico-container i, .user-nav .text-nav{
    color: #757575;
}
.user-nav .nav-item.logout-item i, 
.user-nav .nav-item.logout-item .text-nav{
    color: #DC3545;
}
.exit-usernav{
    animation: exitUserNav 150ms ease-in-out forwards; 
}

.widget .general-form{
    animation: comeFromTop 125ms ease-in-out;
    animation-delay: 50ms;
}
.exit-i{
    animation: exit-i 125ms ease-in-out;
}
.right-section .user-ico .fa-times{
    margin-right: 3px;
}
.fill-data-percentage-container .top-section{
    color: #4F6E80;
    font-size: 11px;
    line-height: 20px;
}
.fill-data-percentage-container .top-section .fill-text{
    float: left;
}
#fill-myinfo-percentage{
    font-size: 18px;
    font-weight: bold;
    float: right;
}
.fill-data-percentage-container .fill-progress-bar{
    position: relative;
    height: 4px;
    width: 100%;
    overflow: hidden;
    border-radius: 100px;
    background-color: rgba(0,0,0,0.1);
}
.fill-data-percentage-container .fill-progress-bar span{
    display: block;
    height: 100%;
    border-radius: 100px;
}
.fill-data-percentage-container .fill-progress-bar .c-progress-bar{
    transition: 1s ease-in-out;
}
.fill-data-percentage-container .fill-progress-bar .progress-view{
    background-color: #4f6e80;
    animation-fill-mode: both; 
    animation: progressBar 1s ease-in-out;
    -webkit-animation: progressBar 1s ease-in-out;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 1s ease-in-out;
    -moz-animation-fill-mode:both; 
}

.myinfo-form .profil-picture-container{
    text-align: center;
    height: 100%;
    padding: 0 10%;
    margin-top: 30px;
}
.myinfo-form .profil-picture-container .img-container{
    width: 100%;
    height: 100%;
    max-width: 320px;
    max-height: 320px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border-style: solid;
    border-color: #ffffff;
    border-width: 3px;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
    opacity: 1;
    /*animation: profilPictureCome ease-in-out 200ms forwards;
    animation-delay: 0.5s;*/
    display: inline-block;
}
.myinfo-form .profil-picture-container .img-container img{
    max-width: 100%;
    max-height: 100%;
}
.myinfo-form .img-recommandation{
    font-size: 10px;
    font-style: italic;
    color: #757575;
}
.myinfo-form .img-container .ico-upload-container{
    position: absolute;
    right: 20px;
    bottom: 15px;
    color: #ffffff;
    font-size: 24px;
    line-height: 46px;
    height: 46px;
    width: 46px;
    opacity: 0;
    background-color: rgba(255,255,255,0.1);
    border-radius: 100px;
    animation: basicScale 100ms ease-in-out forwards;
    animation-delay: 300ms;
}
.myinfo-form .user-data-container{
    margin-top: 20px;
    display: flex;
}
.myinfo-form .user-data-container .text-small-bold{
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #4F6E80;
}
form .input-section .title.home > span{
    color: #4f6e80;
}
.more-data-container {
    margin-top: 5px;
}
.myinfo-form .user-data-form{
    margin-top: 25px;
}
.input-item.tags-container{
    padding: 0px 10px 10px;
    cursor: text;
    transition: height 200ms ease-in-out;
}
.tags-container .tag{
    background-color: #ffffff;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 14px;
    display: inline-flex;
    opacity: 0;
    margin: 10px 10px 0 0;
    animation: tagComeFromBottom 100ms ease-in-out forwards;
    animation-delay: 100ms;
    transition: 100ms ease-in-out;
}
.tags-container .ico-container {
    cursor: pointer;
}
.tags-container .text-tag-value, .tags-container .ico-container{
    padding: 0px 5px;
}

.tags-container .ico-container{
    color: #cccccc;
}

.dynamic-input{
    width : 10px;
    height: initial;
    display: inline-flex;
    margin: 0px 3px 2px 3px;
    padding-left: 2px;
    padding: 4px 5px;
}
#uniq-dynamic-input{
    width: 10px;
    color: #757575;
    transition: width 75ms ease-in-out;
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}

.dynamic-input-container{
    display: inline-block;
    margin: 1px 0px;
}
.dynamic-input-container.tag{
    padding: 3.5px 5px;
}
.hidden-element {
    visibility: hidden;
    white-space: pre;
}
.basic-exit-scale{
    animation: basicExitScale 100ms ease-in-out!important;
}
.basic-exit-scale-forwards{
    animation: basicExitScale 100ms ease-in-out forwards!important;
}
.basic-scale-important{
    animation: basicScale 100ms ease-in-out!important;
}
.basic-scale{
    animation: basicScale 100ms ease-in-out;
}
.basic-scale-forwards{
    animation: basicScale 100ms ease-in-out forwards;
}
.tags-container.view-more{
    margin-top: 0;
    border-radius: 0 0 5px 5px;
    padding: 0;
    height: 100%;
    max-height: 200px;
    display: block;
    overflow-y: scroll;
    animation: comeFromTop 150ms ease-in-out;
}
.border-top-only{
    border-radius: 5px 5px 0 0!important;
    border-bottom: solid 1px rgba(0,0,0,0.1)
}
.tags-container.view-more .item-list{
    padding: 6px 10px;
    display: block;
    width: 100%;
}
.item-list:focus{
    background-color: rgba(0,0,0,0.0375);
    outline: none;
    transition: 100ms ease-in-out;
}
.item-list .tag{
    margin: 0;
    background-color: transparent;
}
.item-list .tag .text-value{
    margin: 0 4px 0px 2px;
}
.list-container .ico-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 13px;
}
.item-list .fa-plus{
    -webkit-animation:spin 200ms ease-in-out;
    -moz-animation:spin 200ms ease-in-out;
    animation:spin 200ms ease-in-out;
}
.more-data-container select{
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 57px;
    padding: 0 10px 0px 14px;
    font-size: 20px;
    color: #757575;
}
.more-data-container .select-input-container .select-birthday-year{
    width: 100px;
}
.more-data-container .select-input-container .select-birthday-month{
    width: 65px;
    text-align: center;
    text-align-last: center;
}
.heavy-text{
    font-size: 20px;
    font-weight: bold;
}
.select-saved{
    animation: select-saved ease-in-out 200ms 2;
}
.input-item.view-more .list-container{
    display: block;
    width: 100%;
}
.myinfo-form form .select-input-container{
    border: none;
}
.tags-container .empty-mutli-select-text-container{
    margin-top: 10px;
    display: block;
    font-size: 14px;
    color: #898989;
}
.recorder-container audio{
    min-width: 240px;
    height: 40px;
    width: 100%;
}
.myinfo-form .recorder-container{
    margin-top: 8px;
}

.rounded-ico-button{
    background-color: #f1f3f4;
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 500px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}
.myinfo-form .item-section-option{
    display: flex;
    margin-bottom: 10px;
}
.myinfo-form .item-section-option .text-container{
    margin-left: 8px;
    font-size: 12px;
}
.myinfo-form .rounded-ico-button i {
    color: #a9abab;
}
.recording-flashes i{
    animation: 1s flashesRed infinite ease-in;
}

.myinfo-form .item-section-option > * {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.header-popup.confirm{
    font-size: 16px;
}
.checkbox-container:hover, 
.checkbox-container input:hover,
.checkbox-container .checkmark:hover
{
    background-color: none;
    color: none;
}
.myinfo-form .select-input-container{
    width: initial;
    display: inline-flex;
    line-height: 40px;
}
form .ico-right-container{
    padding: 0 8px;
}
.rounded-container img{
    width: 100%;
}
.element-table-container{
    opacity: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.element-table-container .flex-item.loaded{
    opacity: 1;
}
.element-table-container .flex-item{
    width: calc(100% / 3);
    max-width: 50%;
    margin-bottom: 6px;
    padding: 0 4px;
    opacity: 1;
    transition: 150ms;
    animation: flex-item-unselected 100ms ease-in-out;
    
}
.element-table-container .flex-item:nth-child(3n){
    margin-right: 0px;
}
.element-table-container .flex-item .rounded-container{
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
}
.flex-item .rounded-container .container-on-select{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.container-on-select .select-ico-container{
    z-index: 2;
    color: #28A745;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
}
.rounded-container .container-on-select .select-ico-container i{
    font-size: 20px;
    opacity: 0;
    animation: basicBigScale 100ms ease-in-out forwards;
    animation-delay: 30ms;
}

.black-bg-100{
    background-color: #212528;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.flex-item.selected{
    animation: flex-item-selected 100ms ease-in-out forwards!important;
}
.flex-item.selected .rounded-container{
    box-shadow: none;
}

.widget .empty-section{
    padding: 10px 15px;
}
.empty-section .add-file-picture{
    height: 150px;
    display: block;
    background-color: #EEEEEE;
    border-radius: 5px;
    position: relative;
    width: 100%;
}
.add-file-picture .fas{
    width: 100%;
    text-align: center;
    font-size: 50px;
    color: #c4c4c4;
}
.add-file-picture .ico-container{
    z-index: 2;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
}
.empty-section .right-container{
    width: 100%;
    margin-top: 15px;
    align-content: center;
    align-items: center;
    display: inline-flex;
}
.info-component .left-border-indication{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    background-color: #28A745;
}
.info-component{
    width: 100%;
    padding: 4px 10px;
    position: relative;
    background-color: #EEEEEE;
    border-radius: 5px;
    overflow: hidden;
}
.info-component .info-content{
    display: table;
}
.info-component .info-content > span{
    vertical-align: middle;
    display: table-cell;
}
.info-component .ico-container{
    padding: 3px 15px 3px 10px;
}
.content .content{
    min-height: 0px;
}
.widget.extra-p{
    padding: 10px 15px;
}
.my-nav-container{
    width: 60%;
    margin: auto;
    /* float: right; */
    font-size: 20px;
    /* padding: 0 0 0 30px; */
    display: table;
    /* margin-left: 20%; */
    padding: 2px 5px;
    margin-top: 12px;
    overflow: hidden;
    background-color: #eee;
    border-radius: 500px;
}
.my-nav-container > span{
    display: table-cell;
    vertical-align: middle;
    width: calc(100% / 3);
}
.my-nav-container .right-part{
    text-align: right;
}
.my-nav-container .middle-part{
    font-size: 14px;
    text-align: center;
}
.my-nav-container i.fas.unactive{
    color: #EEEEEE;
}
.my-nav-container .ico-container{
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    border-radius: 50px;
    animation: basicBigScale 100ms ease-in-out;
}
.hide-by-opacity{
    opacity: 0;
}
.public-info .button-with-ico{
    margin-bottom: 0px;
}
.public-info .button-container{
    text-align: center;
    margin-top: 19px;
}
.infoDiv-container{
    display: table-cell;
    vertical-align: middle;
    padding: 25px 0px 15px;
    width: 95%;
    animation: basicScale 100ms ease-in-out;
}
.info-content .message-container .message-text{
    font-size: 14px;
}
.plain-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}
#background-popup-k, #background-popup-full{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5)
}
.plain-container .popup-widget-bg{
    background-color: #ffffff;
    border-radius: 5px;
    z-index: 1050;
    position: absolute;
    max-height: calc(100% - 16px);
    overflow-y: scroll;
    right: 8px;
    left: 8px; 
    padding: 15px 12px;
    top: 50%;
    transform: translateY(-50%);
    animation: popupFromBottom 200ms ease-in-out;
}
.popup-widget-bg .header > span{
    display: inline-block;
}
.plain-container .header .ico-container{
    float: right;
    font-size: 30px;
    top: -6px;
    right: 8px;
    position: absolute;
    color: #EEEEEE;
}
.plain-container .header .title-popup .text{
    font-size: 24px;
}
.plain-container .header{
    position: relative;
    margin: 5px 0px 15px 5px;
}
.popup-widget-bg form .title{
    color: #4F6E80;
}
.input-item.no-ico input{
    margin-left: 7px;
}
.popup-widget-bg .input_description.textarea{
    width: 100%;
    padding: 6px;
    height: 130px;
}
.popup-widget-bg .input_edit_description.textarea{
    width: 100%;
    padding: 6px;
    height: 130px;
}
.popup-widget-bg .fake-space-div{
    height: 15px;
}
.big-popup-exit{
    animation: bigPopupExit 200ms ease-in-out!important;
}
.plain-popup-exit{
    animation: plainPopupExit 200ms ease-in-out!important;
}
.popup-widget-bg .backend-errors-container{
    padding-right: 0px;
    text-align: center;
    font-size: 13px;
}
.popup-widget-bg .backend-errors-container .error{
    padding: 0 0 24px 0;
}
button.text-reducer{
    font-size: 12px;
    padding: 10px 15px 11px;
}
.bottom-margin{
    margin-bottom: 9px;
}
.popup-widget-bg .input-section{
    animation: comeFromTop 100ms ease-in-out;
}
.widget.no-side-padding{
    padding-left: 0px;
    padding-right: 0px;
}
.job-section > .title-job{
    text-transform: uppercase;
    font-size: 13px;
    color: #4F6E80;
    opacity: 0;
    font-weight: bold;
    margin-top: 15px;
    margin-left: 17px;
    animation: textComeFromLeft 100ms ease-in-out forwards;
}
.job-section .item-prod{
    background-color: #EEEEEE;
    padding: 3px;
    position: relative;
    cursor: pointer;
}
.my-lyricographie .item-prod:nth-child(odd){
    background: #e5e5e5;
}
.job-section .item-prod:last-child{
    margin-bottom: 0px;
}
/*.job-section .item-prod:not(:last-child){
    border-bottom: 1px solid rgba(0,0,0,0.05);
}*/
.job-section .line{
    display: table;
    width: 91%;
    position: relative;
}
.job-section .line > span{
    display: table-cell;
    vertical-align: middle;
    padding: 5px 0px;
}
.job-section .line .left{
    width: 14%;
    text-align: center;
}
.job-section .line .middle{
    font-size: 12px;
    width: 32%;
    padding-left: 17px;
    color: #32393F;
}
.job-section .line .right{
    width: 62%;
}
.bold-text{
    font-weight: bold;
}
.job-section .item-prod .button-extend{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.button-extend .fas{
    color: #4F6E80;
    font-size: 18px;
}
.extend-lyricographie-container{
    animation: comeFromTopWithScale 150ms ease-in-out forwards;
    overflow: hidden;
    text-align: center;
}
.anim-rotate90{
    animation: rotate90 ease-in-out 100ms forwards;
    transition: 100ms;
}
.quick-over-sizing{
    animation: escapeWithOverSizing ease-in 200ms forwards;
}
.all-prod-extend {
    padding: 5px;
}
.all-prod-extend .widget-reprise{
    border-radius: 5px;
    background-color: #F9F9F9;
    opacity: 0;
    overflow: hidden;
    position: relative;
    animation: widgetReprise 150ms ease-in forwards;
    text-align: left;
    padding: 15px 8px 15px 18px;
}
.all-prod-extend .widget-reprise:not(:last-child){
    margin-bottom: 5px;
}
.all-prod-extend .widget-reprise .title-section.second-S{
    margin-top: 10px;
}

.widget-reprise .left-gold-border{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    background-color: #B48E62;
}
.all-representation-date .date-item{
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 13px;
    background-color: #32393F;
    color: #ffffff;
    text-align: center;
    opacity: 0;
    display: inline-block;
    animation: showDateItem 75ms ease-in forwards;
}
.title-section{
    color: #B48E62;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 17px;
}
.job-section .widget-reprise .line .middle{
    padding-left: 0px;
    width: 34%;
}
.job-section .widget-reprise .line{
    width: 100%;
}
.widget-reprise > .all-representation-date{
    margin-top: 12px;
}
.widget-reprise .edit-reprise.rounded-button{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 25px;
    height: 25px;
    font-size: 10px;
    border-radius: 50px;
    border: solid #B48E62 3px;
    color: #B48E62;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}
.text-multiple-choice .text-center{
    color: #4F6E80;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 9px 0px 5px;
}
.input_edit_explanation.textarea{
    width: 100%;
    height: 150px;
    padding: 7px 11px;
}
.video-section .button-container{
    text-align: center;
}
.myinfo-form .profil-picture-container form{
    margin: 0;
    height: 0;
    width: 0;
}
.profil-picture-container form .custom_file_input{
    width: 0px;/* previous to 100px*/
    height: 0px;
}
#img-to-edit{
    max-width: 100%;
    max-height: 100%;
}
.plain-container-popup{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    bottom: 0px;
}
.plain-container-popup .relative-div{
    display: block;
    height: 100%;
    width: 100%;
}
.plain-container-popup .exit-button{
    position: absolute;
    top: 2%;
    z-index: 200;
    height: 30px;
    right: 10%;
    font-size: 30px;
    opacity: 0;
    color: #ffffff;
    animation: basicScale 100ms ease-in-out forwards;
    animation-delay: 300ms;
}
#background-popup-k{
    background-color: rgba(0, 0, 0, 0.5)!important;
}
#background-popup-full {
    background-color: #212528;
}
.full-container-size{
    height: calc(100%/1.5);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 200;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    opacity: 0;
    animation: comeFromBottom 150ms ease-in-out forwards;
    animation-delay: 150ms;
}
.full-container-size .relative-full-div{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #B48E62;
}
.title-cropper{
    position: absolute;
    top: 6%;
    z-index: 200;
    right: 5%;
    text-align: center;
    left: 5%;
    font-size: 30px;
    opacity: 0;
    color: #ffffff;
    animation: comeFromBottom 150ms ease-in-out forwards;
    animation-delay: 200ms;
}
.title-cropper > div{
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    width: 225px;
    text-align: left;
}

.title-cropper > div:after {
    height: 10px;
    display: block;
    width: 0%;
    background: #B48E62;
    content: '';
    animation: to41 cubic-bezier(.22,.89,.74,.97) 300ms forwards;
    animation-delay: 450ms;
}
.full-size.cropper .rounded-button-container {
    top: 82%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    position: absolute;
}
.rounded-button-container .full-relative-div{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.rounded-button-container .full-relative-div .left-section{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 50%;
    margin-left: 5%;
    width: 50%;
}
.rounded-button-container .full-relative-div .right-section{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50%;
    margin-right: 5%;
    width: 50%;
}
.rounded-button-container .button-item{
    display: inline-block;
    height: 44px;
    width: 44px;
    line-height: 44px;
    color: #ffffff;
    margin-right: 10px;
    text-align: center;
    font-size: 24px;
    border-radius: 100px;
    background-color: #B48E62;
    opacity: 0;
    animation: basicScale 150ms ease-in-out forwards;
}
.rounded-button-container .button-item.valid{
    background-color: #28A745;
}
.img-recommandation.danger-color{
    color: #DC3545;
    animation: errorFlashAnimation 1000ms ease-in-out;
}
#left-menu a > span{
    display: inline-block;
    font-size: 18px;
    margin-left: 18px;
    margin-right: 5px;
    transition: 100ms ease-in-out;
}
#left-menu li.active span:after{
    height: 10px;
    display: block;
    width: 0%;
    margin-left: 0;
    background: #B48E62;
    content: '';
    animation: to23 cubic-bezier(.22,.89,.74,.97) 300ms forwards;
    animation-delay: 150ms;
    position: absolute;
}
.button-hover:hover{
    animation : basicButtonHover 150ms ease-in-out forwards;
}
.content {
    display: block;
}
.content.masonry {
    display: flex;
    align-items: baseline;

}
.widget.lyricographie{
    animation: none;
    opacity: 1;
}
.ico-right-container i {
    float: right;
    margin-right: 10px;
}
.full-w-centering{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.tags-builder-popup .popup-widget-bg .button-container{
    margin-top: 15px;
    text-align: center;
}
.tags-builder-popup .popup-widget-bg .button-container > button{
    margin-left: 15px;
    margin-bottom: 0px;
    opacity: 0;
    animation: comeFromBottom ease-in-out 150ms forwards;
}
.tags-builder-popup .popup-widget-bg .button-container .recycle{
    animation: comeFromLeft ease-in-out 150ms forwards;
    animation-delay: 500ms;
    margin-bottom: 10px;
    background-color: #DC3545;
}
.tags-builder-popup .tags-container > .tag.selected{
    background-color: #28a745d1;
    color: #fff;
    transition: 150ms ease-in-out;
}
.tags-builder-popup .area-tag .tag{
    color: #fff;
    background-color: #28a745d1;
    cursor: pointer;
    transition: 0.2s;
}
.tags-builder-popup .tags-container > .tag.unselected:after{
    position: absolute;
    transition: 200ms ease-in-out;
    content: '';
    bottom: -10%;
    background: #DC3545;
    background-color: #DC3545;
    height: 120%;
    transform: skewX(15deg);
    z-index: -1;
    width: 0%;
    left: -20%;
    animation: animAfterAreaTagChock 300ms ease-in-out forwards;
}
.input-item.tags-container.area-tag{
    cursor: default;
}
.tags-builder-popup .tags-container > .tag.unselected{
    color: #fff;
    transition: 0.2s;
    transition-delay: 0.12s;
    background-color: #acacac;
    z-index: 10;
    cursor: copy;
}
.tag{
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* correct overflow hidden on safari radius div corner*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none; 
            user-select: none; 
}

/* BROWSERS NOT SUPPORTED */

.full-screen-container{
    background-color: #4F6E80;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: #F2F2F2;
}
.full-screen-container .logo-container{
    position: fixed;
    top: 45%;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    text-align: center;
    opacity: 0;
    -webkit-animation: logoError 1s ease-out  forwards;
    -moz-animation: logoError 1s ease-out  forwards;
    -o-animation: logoError 1s ease-out  forwards;
    animation: logoError 1s ease-out  forwards;
    animation-delay: 0.1s;
    
}
.full-screen-container a{
    color: #ffffff;
}
.full-screen-container .explain-text {
    text-align: center;
}

.full-screen-container .logo-container img{
    max-width: 100%;
    max-height: 100%;
    opacity: 1;
}
.centered-text{
    text-align:center;
}
.full-screen-container .centered-container{
    position: fixed;
    top: 55%;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    min-width: 400px;
    max-width: 700px;
    opacity: 0;
    -webkit-animation: contentCome 200ms ease-out forwards;
    -moz-animation: contentCome 200ms ease-out forwards;
    -o-animation: contentCome 200ms ease-out forwards;
    animation: contentCome 200ms ease-out forwards;
    animation-delay: 0.75s;
}
.full-screen-container .button-redirect-browsers .button-download-container > div{
    /*background-color: #000;*/
    padding: 0px 10px;
    line-height: 45px;
    border-radius: 5px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.full-screen-container .button-redirect-browsers .chrome{
    background-color: #1a73e8;
}
.full-screen-container .button-redirect-browsers .firefox{
    background-color: #ff8a52;
}
.full-screen-container .button-redirect-browsers{
    display: inline-block;
    position: relative;
	left: 50%;
    transform: translateX(-50%);
    margin-top: 50px;
}
.full-screen-container .button-redirect-browsers{
    display: inline-block;
    position: relative;
	left: 50%;
    transform: translateX(-50%);
    margin-top: 50px;
}
.full-screen-container .button-download-container{
    margin-bottom: 20px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.button-redirect-browsers .ico-rounded-container{
    display: inline-block;
    margin-left: 6px;
    margin-right: 15px;
    font-size: 24px;
    width: 20px;
}
.additional-data{
    margin-top: 24px;
    opacity: 0;
    animation: smallComeFromBottomT 200ms ease-in-out forwards;
}
.cgu-checkbox-container{
    margin-top: 15px;
}
label{
    margin-bottom: 0px;
}
.hidden-label{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.fab.fa-youtube{
    color: #ff0100;
}
.send-form i.fa-youtube{
    font-size: 22px!important;
}
select.select-video-cat{
    height: 100%;
    width: 150px;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
}
#cookie-fixed-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    animation: cookieComeMessage 300ms ease-in-out forwards;
    animation-delay: 500ms;
    opacity: 0;
}
#cookie-fixed-container .message-container{
    font-size: 11px;
    max-width: 960px;
    text-align: left;
}
#cookie-fixed-container .cookie-container{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #212528;
    color: #8e8e8e;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 15px;
    padding: 16px 44px;
    text-align: center;
    width: 100%;
}
.message-container a.more-information{
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
}
#cookie-fixed-container .plain-div{
    position: relative;
}
#cookie-fixed-container .plain-div .close-button-container{
    position: absolute;
    top: 12px;
    right: 22px;
}
#cookie-fixed-container .plain-div .close-button-container i{
    color:#8e8e8e;
    font-size: 18px;
    cursor: pointer;
}
.success-message-container{
    text-align: center;
    color: #29a746;
    margin-bottom: 14px;
}
.verify-infodiv-container{
    margin-top: 20px;
}
.quick-view-avatar{
    width: 120px;
    margin-left: auto;
    margin-right: auto;
}
.img-circle{
    border-radius: 1000px;
    overflow: hidden;
    border: 2px solid white;
}
.quick-view-avatar .img-user-avatar{
    width: 100%;
}
@keyframes cookieComeMessage {
    0%{
        opacity: 0;
        top: -200px;
    }
    100%{
        top: 0px;
        opacity: 1;
    }
}
@-webkit-keyframes contentCome {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-moz-keyframes contentCome {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-o-keyframes contentCome {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes contentCome {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes logoError {
    0%{
        opacity: 0;
        top: 45%;
    }
    50%{
        opacity: 1;
        top: 45%;
    }
    100%{
        top: 20%;
        opacity: 1;
    }
}
@-moz-keyframes logoError {
    0%{
        opacity: 0;
        top: 45%;
    }
    50%{
        opacity: 1;
        top: 45%;
    }
    100%{
        top: 20%;
        opacity: 1;
    }
}
@-o-keyframes logoError {
    0%{
        opacity: 0;
        top: 45%;
    }
    50%{
        opacity: 1;
        top: 45%;
    }
    100%{
        top: 20%;
        opacity: 1;
    }
}
@keyframes logoError {
    0%{
        opacity: 0;
        top: 45%;
    }
    50%{
        opacity: 1;
        top: 45%;
    }
    100%{
        top: 20%;
        opacity: 1;
    }
}

/* 
 * MEDIA RULES 
 *     ⬇️
 */    
@media (min-width: 900px) {
    .box-shadow.widget{
        width: 49%;
        display: block;
        padding: 15px;
    }
    #auth-view{
        flex: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #auth-view > .content{
        min-height: 60vh;
        padding: 25px 10px;
        max-width: 1200px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
    }
    .d-d-none{
        display: none!important;
    }
    /*#mithril-app{
        margin-left: 220px;
        width: calc(100% - 220px);
    }*/
    .title-page{
        margin-bottom: 20px;
        width: 80%;
        max-width: 900px;
        display: flex;
        align-items: flex-start;
    }
    .title-page h1{
        font-weight: bold;
    }
    .flex-center-container{
        max-width: 1200px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .main-title{
        display: block;
        width: 100%;
        opacity: 0;
        animation: smallComeFromBottomT 150ms ease-in-out forwards;
        animation-delay: 100ms;
    }
    .second-title{
        display: block;
        width: 100%;
        opacity: 0;
        animation: smallComeFromBottomT 150ms ease-in-out forwards;
        animation-delay: 175ms;
    }
    .widget .center-title {
        font-size: 22px;
        margin: 19px 0px 32px;
        padding: 0px 15px;
        position: relative;
    }
    .lost-password-view .widget{
        max-width: 400px;
    }
    .widget .input_message {
        height: 120px;
        min-height: 60px;
        resize: vertical;
    }
    #mobile-content > .content{
        padding: 30px 10px;
    }
    .content.home-display-d{
        display: block;
        align-items: initial;
        justify-content: initial;
    }
    .box-shadow.widget {
        width: 100%;
        max-width: 1000px;
        display: inline-block;
        padding: 15px;
    }
    .item-d-h{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
    section#sidebar-area {
        z-index: 0;
    }
    #login-nav{
        z-index: 2;
        height: 70px;
        position: fixed;
        top: 0px;
        left: 220px;
        right: 0px;
        background-color: #fff;
        transition : 200ms;
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
    }
    #login-nav .left-side{
        float: left;
    }
    #login-nav .right-side{
        float: right;
    }
    #login-nav .left-side, #login-nav .right-side{
        height: 100%;
    }
    #login-nav .title-view-container{
        height: 100%;
        margin-left: 30px;
        opacity: 0;
        animation: textComeFromLeft 150ms ease-in-out forwards;
        animation-delay: 100ms;
        display: table;
        padding-bottom: 5px; /* center with the :after effect*/
    }
    #login-nav h1{
        font-size: 24px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 0px;
        display: table-cell;
        vertical-align: middle;
    }
    #login-nav h1:after {
        height: 10px;
        display: block;
        width: 0%;
        margin-left: 0;
        background: #B48E62;
        content: '';
        animation: toAfterPxTitle cubic-bezier(.22,.89,.74,.97) 300ms forwards;
        animation-delay: 350ms;
        position: absolute;
    }
    #login-nav .img-circle{
        width: 60px;
        height: 60px;
        border: 2px solid white;
        border-radius: 50px;
        overflow: hidden;
        position: relative;
        -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);
    }
    #login-nav .img-circle img{
        max-width: 100%;
        max-height: 100%;
    }
    #login-nav .user-dropdown-nav{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        border-left: 1px solid rgba(0,0,0,0.08);
        padding-left: 12px;
        cursor: pointer;
    }
    #login-nav .user-dropdown-nav > div{
        margin-right: 8px;
    }
    .usernav-widget{
        top: 80px;
    }

    #left-menu nav ul>li:nth-child(1){
        animation-delay: 300ms;
    }
    #left-menu nav ul>li:nth-child(2){
        animation-delay: 350ms;
    }
    #left-menu nav ul>li:nth-child(3){
        animation-delay: 400ms;
    }
    #left-menu nav ul>li:nth-child(4){
        animation-delay: 450ms;
    }
    #mobile-content .content.masonry{
        padding-top: 50px;
        max-width: 960px;
        margin: auto;
    }
    .box-shadow.widget{
        display: inline-block;
        background: #fff;
        padding: 1em;
        width: 100%;
        -webkit-transition: 200ms ease all;
        transition: 200ms ease all;
    }
    .content.lost-password-view .box-shadow.widget{
        margin-top: 0px;
        display: block;
        margin:auto;
        max-width: 600px;
    }
    .add-file-picture > .ico-container:hover .transform{
        color: rgba(0,0,0,0.5);
    }
    .masonry .box-shadow.widget{
        display: block;
        margin-bottom: 9px;
    }
    .all-representation-date > .representation-date-container{
        display: inline-block;
        border-left: 1px solid rgba(0,0,0,0.08);
        padding-left: 10px;
        transition: ease-in-out 200ms;
        padding: 0px 10px 0px 12px;
    }
    .all-representation-date > div:first-child{
        border-left: none;
        padding-left: 0px;
    }
    .widget.no-side-padding {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }
    .plain-container .popup-widget-bg {
        transform: translate(-50%, -50%);
        left: 50%;
        max-width: 800px;
        width: 100%;
        padding: 15px 20px;
    }
    .header-home-my-info > *{
        display: inline-block;
    }
    .header-home-my-info .fill-data-percentage-container{
        float: right;
        width: 60%;
    }
    .fill-data-percentage-container{
        margin-top: 16px;
    }
    .my-info .left-section{
        position: sticky;
        top: 75px;
    }
    .my-info .myinfo-form .user-data-form {
        vertical-align: middle;
        display: table-cell;
        width: 60%;
    }
    .myinfo-form{
        width: 100%;
        display: table;
    }
    .myinfo-form .profil-picture-container {
        margin-top: 0px;
    }
    .widget.my-info{
        overflow: unset;
    }
    .more-data-container {
        margin-top: 0px;
    }
    .element-table-container {
        opacity: 1;
        margin-left: 0px;
        margin-right: 0px;
    }
    .my .right-section{
        vertical-align: middle;
        display: table-cell;
        width: 52%;
        position: relative;
        padding-left: 30px;
    }
    .my .right-section:before{
        content: '';
        height: 100%;
        width: 5px;
        background-color: rgba(0,0,0,0.1);
    }

    .widget.my .public-info{
        display: table;
        width: 100%;
    }
    .infoDiv-container {
        display: block;
        padding: 0px;
        width: 100%;
    }
    .my .info-component{
        max-width: 400px;
        margin: auto;
    }
    .recorder-container .item-section-option {
        margin-bottom: 0px;
    }
    form .input-section:last-child{
        margin-bottom: 5px;
    }
    .widget.video-section{
        overflow: unset;
    }
    .header-home.my-pictures > *{
        display: inline-block;
    }
    .header-home.my-pictures .button-container{
        float: right;
        margin-top: 16px;
    }
    .widget .left-section{
        position: sticky;
        top: 80px;
        margin-top: 23px;
    }
    .widget.my{
        overflow: unset;
    }
    .widget.contact{
        display: block;
        margin: auto;
        max-width: 700px;
        margin-bottom: 30px;
    }
    .widget.cgu{
        display: block;
        margin: auto;
        max-width: 1200px;
        margin-bottom: 30px;
        padding: 20px 30px;
    }
    .widget.cgu .text-to-left{
        text-align: left;
    }
    p.semi-heavy-text{
        font-size: 18;
        font-weight: 500;
        color: #282828;
    }
    .cgu > h3 > span{
        color: #B48E62;
    }
    .widget.my form{
        margin-top: 0px;
    }
    .widget.my .myinfo-form .user-data-form {
        margin-top: 0px;
    }
    .widget.my .header-home.my-pictures{
        width: 48%;
    }
    .popup-box{
        left: calc(50% - 16px);
        width: 500px;
        max-width: 500px;
        transform: translate(-50%, -50%);
    }
    .flex-item.selected{
        animation: flex-item-selected-desktop 100ms ease-in-out forwards!important;
    }
    .element-table-container .flex-item{
        animation : flex-item-unselected-desktop 100ms ease-in-out;
    }
    .recorder-container .item-section-option.trash{
        margin-top: 10px;
    }
    .my.video-section .content > .left-section{
        top: 180px;
    }
    .my.video-section .element-table-container > .flex-item{
        width: calc(100% / 2);
    }
    .ico-container{
        cursor: pointer;
        transition : 150ms ease-in-out;
    }
    .ico-container:hover .i{
        transform: scale(1.05);
    }
    .profil-picture-container .ico-upload-container{
        cursor: pointer;
    }
    .multi-statut-route{
        margin-top: 30px;
    }
    #auth-view .content .widget:nth-child(2){
        margin-left: 20px;
    }
    .tags-builder-popup form{
        column-count: 2;
        display: flex;
    }
    .tags-builder-popup form > div{
        display: inline-block;
        width: 100%;
    }
    .tags-builder-popup form > .left-section{
        padding-right: 8px;
    }
    .tags-builder-popup form > .right-section{
        padding-left: 8px;
    }
    .tags-builder-popup .popup-widget-bg{
        max-width: 960px;
    }
    .tags-builder-popup .popup-widget-bg, .tags-builder-popup .send-edit-form{
        transition: 200ms ease-in-out;
    }
    .tags-builder-popup .popup-widget-bg .button-container{
        float: right;
        text-align: unset;
    }
    .tags-builder-popup .popup-widget-bg .button-container .recycle{
        margin-bottom: 0px;
    }
    .all-prod-extend {
        padding: 15px;
    }
    .all-prod-extend .widget-reprise:not(:last-child){
        margin-bottom: 15px;
    }

    #main-app #main-area{
        display: inline-block;
        width: calc(100% - 220px);
    }

    #main-app .left-desktop-nav{
        float: left;
        height: 100%;
    }
    #left-nav-container{
        height: 100%;
    }
    #left-nav-container #sidebar-area{
        position: initial;
        height: 100%;
        display: block;
        z-index: 0;
        animation: leftMenuComeFromLeftDesktop 200ms ease-in-out;
    }
    #sidebar-area #prolyrix-logo{
        height: 115px;
    }
    .col-50-d{
        display: inline-block;
        width: calc(50% - 10px);
        margin-right: 10px;
    }
    #left-nav-container .lang-box .abs-container{
        z-index:unset;
    }
    #left-nav-container .lang-box .abs-container.container-lang-box{
        z-index: 1;
    }
    .col-50-d:nth-child(2) .widget:nth-child(1) {
        animation-delay: 275ms;
    }
    .col-50-d:nth-child(2) .widget:nth-child(2) {
        animation-delay: 325ms;
    }
    .home-display-d .widget{
        animation: comeFromBottomSmooth 150ms ease-in-out forwards;
    }
    .home-display-d .item-d-h:nth-child(1) .widget{
        animation-delay: 150ms;
    }
    .home-display-d .item-d-h:nth-child(2) .widget{
        animation-delay: 250ms;
    }
    .container-plain-t {
        margin-left: 220px;
        transition: 150ms ease-in-out;
    }
    .sticky-container {
        position: sticky;
        top: 0px;
    }
    .content.uniq-widget .box-shadow.widget{
        display: block;
        margin: auto;
        max-width: 700px;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 15px 25px 10px 25px;
    }
    .widget .empty-section{
        display: table;
    }
    .my .empty-section .right-section{
        width: 49%;
    }
    .video-section.my .empty-section .right-section .info-component{
        min-width: 400px;
    }
    .my .empty-section .left-section .button-with-ico{
        margin-bottom: 12px;
    }
    .lyricographie .add-role-button{
        position: absolute;
        right: 20px;
        top: -5px;
    }
    .center-title h3{
        font-size: 22px;
    }




    @keyframes comeFromBottomSmooth{
        0%{
            opacity: 0;
            margin-top: 30px;
        }
        100% {
            opacity: 1;
            margin-top: 0px;
        }
    }


    @keyframes flex-item-selected-desktop{
        0% {
            transform: scale(1);
            -webkit-transform : scale(1);
            -ms-transform     : scale(1);
        }
        100% {
            -webkit-transform : scale(0.95);
            -ms-transform     : scale(0.95);
            transform         : scale(0.95);
        }
    }
    
    @keyframes flex-item-unselected-desktop{
        0% {
            transform: scale(0.95);
            -webkit-transform : scale(0.95);
            -ms-transform     : scale(0.95);
        }
        100% {
            -webkit-transform : scale(1);
            -ms-transform     : scale(1);
            transform         : scale(1);
        }
    }
    

    
}
@media (max-width: 900px) {
    .m-d-none{
        display: none!important;
    }
    .content.masonry{
        display: block;
    }
}

.order-1{
    order: 1;
}
.order-2{
    order: 2;
}
.order-3{
    order: 3;
}
.order-4{
    order: 4;
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}


#left-menu ul>li:nth-child(1){
    animation-delay: 100ms;
}
#left-menu ul>li:nth-child(2){
    animation-delay: 150ms;
}
#left-menu ul>li:nth-child(3){
    animation-delay: 200ms;
}
#left-menu ul>li:nth-child(4){
    animation-delay: 250ms;
}
.right-section .button-item:nth-child(1){
    animation-delay: 600ms;
}
.right-section .button-item:nth-child(2){
    animation-delay: 650ms;
}


.left-section .button-item:nth-child(1){
    animation-delay: 450ms;
}
.left-section .button-item:nth-child(2){
    animation-delay: 500ms;
}
.left-section .button-item:nth-child(3){
    animation-delay: 550ms;
}

.all-representation-date .date-item:nth-child(1){
    animation-delay: 150ms;
}
.all-representation-date .date-item:nth-child(2){
    animation-delay: 170ms;
}
.all-representation-date .date-item:nth-child(3){
    animation-delay: 190ms;
}
.all-representation-date .date-item:nth-child(4){
    animation-delay: 210ms;
}
.all-representation-date .date-item:nth-child(5){
    animation-delay: 230ms;
}
.all-representation-date .date-item:nth-child(6){
    animation-delay: 250ms;
}
.all-representation-date .date-item:nth-child(7){
    animation-delay: 270ms;
}
.all-representation-date .date-item:nth-child(8){
    animation-delay: 290ms;
}
.all-representation-date .date-item:nth-child(9){
    animation-delay: 310ms;
}
.all-representation-date .date-item:nth-child(10){
    animation-delay: 330ms;
}
.all-representation-date .date-item:nth-child(11){
    animation-delay: 350ms;
}
.all-representation-date .date-item:nth-child(12){
    animation-delay: 370ms;
}
.all-representation-date .date-item:nth-child(13){
    animation-delay: 390ms;
}
.all-representation-date .date-item:nth-child(14){
    animation-delay: 410ms;
}
.all-representation-date .date-item:nth-child(15){
    animation-delay: 430ms;
}
.all-representation-date .date-item:nth-child(16){
    animation-delay: 450ms;
}
.all-representation-date .date-item:nth-child(17){
    animation-delay: 470ms;
}
.all-representation-date .date-item:nth-child(18){
    animation-delay: 490ms;
}
.all-representation-date .date-item:nth-child(19){
    animation-delay: 510ms;
}
.all-representation-date .date-item:nth-child(20){
    animation-delay: 530ms;
}
.all-representation-date .date-item:nth-child(21){
    animation-delay: 330ms;
}
.all-representation-date .date-item:nth-child(22){
    animation-delay: 330ms;
}



.all-prod-extend .widget-reprise:nth-child(1){
    animation-delay: 0ms;
}
.all-prod-extend .widget-reprise:nth-child(2){
    animation-delay: 75ms;
}
.all-prod-extend .widget-reprise:nth-child(3){
    animation-delay: 150ms;
}
.all-prod-extend .widget-reprise:nth-child(4){
    animation-delay: 225ms;
}
.all-prod-extend .widget-reprise:nth-child(5){
    animation-delay: 300ms;
}
.all-prod-extend .widget-reprise:nth-child(6){
    animation-delay: 375ms;
}
.all-prod-extend .widget-reprise:nth-child(7){
    animation-delay: 450ms;
}
.all-prod-extend .widget-reprise:nth-child(8){
    animation-delay: 525ms;
}
.all-prod-extend .widget-reprise:nth-child(9){
    animation-delay: 600ms;
}
.all-prod-extend .widget-reprise:nth-child(10){
    animation-delay: 675ms;
}
@keyframes animAfterAreaTag{
    0% {
        width: 0%;
    }
    100% {
        width: 120%;
    }
}
@keyframes animAfterAreaTagChock{
    0% {
        width: 0%;
    }
    50% {
        width: 140%;
        left: -10%;
    }
    100% {
        left: 110%;
    }
}
@keyframes basicButtonHover{
    0% {
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
        transform         : scale(1) translateY(0px);
    }
    100% {
        -webkit-transform : scale(1.05);
        -ms-transform     : scale(1.05);
        transform         : scale(1.05);
    }
}
@keyframes to23{
    0% {
        width: 0%;
    }
    100% {
        width: 23%;
    }
}
@keyframes toAfterPxTitle{
    0% {
        width: 0px;
    }
    100% {
        width: 80px;
    }
}
@keyframes to41{
    0% {
        width: 0%;
    }
    100% {
        width: 41%;
    }
}
@keyframes to43{
    0% {
        width: 0%;
    }
    100% {
        width: 43%;
    }
}
@keyframes to100{
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}
@keyframes tagComeFromBottom{
    0% {
        opacity: 0;
        -webkit-transform : scale(1) translateY(8px);
        -ms-transform     : scale(1) translateY(8px);
        transform         : scale(1) translateY(8px);
        
        
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1) translateY(0px);
        -ms-transform     : scale(1) translateY(0px);
        transform         : scale(1) translateY(0px);
    }
}
@keyframes smallComeFromBottom{
    0% {
        opacity: 0;
        margin-top: 15px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}
@keyframes comeFromBottom{
    0% {
        opacity: 0;
        margin-top: 50px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}
@keyframes smallComeFromBottomT{
    0% {
        opacity: 0;
        -webkit-transform : scale(1) translateY(15px);
        -ms-transform     : scale(1) translateY(15px);
        transform         : scale(1) translateY(15px);
        
        
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1) translateY(0px);
        -ms-transform     : scale(1) translateY(0px);
        transform         : scale(1) translateY(0px);
    }
}
@keyframes showDateItem{
    0% {
        opacity: 0;
        -webkit-transform : scale(1) translateX(-5px);
        -ms-transform     : scale(1) translateX(-5px);
        transform         : scale(1) translateX(-5px);
        
        
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1) translateX(0px);
        -ms-transform     : scale(1) translateX(0px);
        transform         : scale(1) translateX(0px);
    }
}
@keyframes widgetReprise{
    0% {
        opacity: 0;
        transform:  translateY(-20px);
        -webkit-transform : translateY(-20px);
        -ms-transform     : translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1) translateY(0px);
        -ms-transform     : scale(1) translateY(0px);
        transform         : scale(1) translateY(0px);
    }
}
@keyframes widgetReprise2{
    0% {
        opacity: 0;
        transform: scale(0.92);
        -webkit-transform : scale(0.92);
        -ms-transform     : scale(0.92);
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
        transform         : scale(1);
    }
}
@keyframes escapeWithOverSizing{
    0% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform : scale(3);
        -ms-transform     : scale(3);
        transform         : scale(3);
    }
}
@keyframes rotate90{
    0% {
        transform: rotate(0deg);
        -webkit-transform : rotate(0deg);
        -ms-transform     : rotate(0deg);
    }
    100% {
        -webkit-transform : rotate(90deg);
        -ms-transform     : rotate(90deg);
        transform         : rotate(90deg);
    }
}
@keyframes comeFromTopWithScale{
    0% {
        opacity: 0;
        transform: scale(0.8);
        -webkit-transform : scale(0.8);
        -ms-transform     : scale(0.8);
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
        transform         : scale(1);
    }
}
@keyframes comeFromLeft{
    0% {
        opacity: 0;
        transform: translateX(-10px);
        -webkit-transform : translateX(-10px);
        -ms-transform     : translateX(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform : translateX(0px);
        -ms-transform     : translateX(0px);
        transform         : translateX(0px);
    }
}

@keyframes textComeFromLeft{
    0% {
        opacity: 0;
        transform: translateX(-10px);
        -webkit-transform : translateX(-10px);
        -ms-transform     : translateX(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform : translateX(0px);
        -ms-transform     : translateX(0px);
        transform         : translateX(0px);
    }
}
@keyframes popupFromBottom{
    0% {
        opacity: 0;
        margin-top: 30px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

@keyframes bigPopupExit{
    0% {
        opacity: 1;
        margin-top: 0px;
    }
    100% {
        opacity: 0;
        margin-top: 30px;
    }
}

@keyframes plainPopupExit{
    0% {
        opacity: 1;
        margin-top: 0px;
        transform: scale(1);
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
    }
    100% {
        opacity: 0;
        margin-top: 20px;
        -webkit-transform : scale(0.94);
        -ms-transform     : scale(0.94);
        transform         : scale(0.94);
    }
}

@keyframes flex-item-selected{
    0% {
        transform: scale(1);
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
    }
    100% {
        -webkit-transform : scale(0.90);
        -ms-transform     : scale(0.90);
        transform         : scale(0.90);
    }
}

@keyframes flex-item-unselected{
    0% {
        transform: scale(0.90);
        -webkit-transform : scale(0.90);
        -ms-transform     : scale(0.90);
    }
    100% {
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
        transform         : scale(1);
    }
}

@keyframes flashesRed{
    0% {
        color : #a9abab;
    }
    50%{
        color: #DC3545;
    }
    100% {
        color: #a9abab;
    }
}

@keyframes select-saved{
    0% {
        background-color : rgba(40,167,69, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } }

@-webkit-keyframes progressBar {
    0% { width: 0; }
    100% { width: 100%; }
}
  
@-moz-keyframes progressBar {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes progressBar {
    0% { width: 0; }
    100% { width: 100%; }
}
@keyframes comeFromTop{
    0% {
        opacity: 0;
        transform: translateY(-40px);
        -webkit-transform : translateY(-40px);
        -ms-transform     : translateY(-40px);
    }
    100% {
        opacity: 1;
        -webkit-transform : translateY(0);
        -ms-transform     : translateY(0);
        transform         : translateY(0);
    }
}

@keyframes basicScale{
    0% {
        opacity: 0;
        transform: scale(0.94);
        -webkit-transform : scale(0.94);
        -ms-transform     : scale(0.94);
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
        transform         : scale(1);
    }
}

@keyframes basicBigScale{
    0% {
        opacity: 0;
        transform: scale(0.1) rotate(280deg);
        -webkit-transform : scale(0.1) rotate(280deg);
        -ms-transform     : scale(0.1) rotate(280deg);
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1) rotate(360deg);
        -ms-transform     : scale(1) rotate(360deg);
        transform         : scale(1) rotate(360deg);
    }
}

@keyframes basicExitScale{
    0% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform : scale(1);
        -ms-transform     : scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform : scale(0.9);
        -ms-transform     : scale(0.9);
        transform         : scale(0.9);
    }
}

@keyframes profilPictureCome{
    0% {
        opacity: 0;
        transform: scale(0.94);
        -webkit-transform : scale(0.94); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform     : scale(0.94); /* IE 9 */
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform     : scale(1); /* IE 9 */
        transform         : scale(1);
    }
}

@keyframes exit-i{
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform : rotate(179deg) scale(0.01); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform     : rotate(179deg) scale(0.01); /* IE 9 */
        transform         : rotate(179deg) scale(0.01);
    }
}


@keyframes exitUserNav{
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.94);
    }
}

@keyframes userNavItemCome{
    0% {
        opacity: 0;
        transform: scale(0.96);
        margin-top: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        margin-top: 0;
        
    }
}

@keyframes userNavCome{
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
    }
}

@keyframes widgetUpdateNotif{
    0% {
        opacity: 0;
        top: -30px;
    }
    100% {
        opacity: 1;
        top: 0;
        right: 0;
    }
}

@keyframes leaveWidgetUpdateNotif{
    0% {
        opacity: 1;
        right: 0;
    }
    100% {
        opacity: 0;
        right: -75px;
        top: -2px;
    }
}

@keyframes autofill {
    to {
        background: transparent;
    }
}

@-webkit-keyframes autofill {
    to {
        background: transparent;
    }
}

@keyframes exitFade{
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes popupBorderComeFromTop{
    0% {
        opacity: 0;
        top: -10px;
    }
    100% {
        opacity: 1;
        top:0px;
    }
}

@keyframes leaveWidgetLoader{
    0% {
        opacity: 1;
        bottom: 0;
        left: 0;
    }
    100% {
        opacity: 0;
        left: 100%;
        bottom: -3px;
    }
}
@keyframes simpleFadeIn{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes simpleScale{
    0% {
        opacity: 0;
        transform: scale(0.8);
        -webkit-transform : scale(0.8); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform     : scale(0.8); /* IE 9 */
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform     : scale(1); /* IE 9 */
        transform         : scale(1);
    }
}
@keyframes loaderComeFromBottom{
    0% {
        opacity: 0;
        bottom: -5px;
    }
    100% {
        opacity: 1;
        bottom: 0px;
    }
}
@keyframes reponseMessageSuccess{
    0% {
        opacity: 0;
        transform: scale(0.9);
        
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes comeFromTop{
    0% {
        opacity: 0;
        transform: translateY(-10px);
        
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes reponseMessageError {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }
@keyframes validIndicatorAnimation {
    0% {
        opacity: 0;
        transform: scale(0.8);
        
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes errorFlashAnimation {
    0% { 
        opacity: 0;
        transform: scale(0.8);
        
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes errorIndicatorAnimation {
    0% { 
        opacity: 0;
        transform: scale(0.8);
        
    }
    30% {
        opacity: 1;
        transform: scale(1);
        background-color: #DC3545;
    }
    50% {
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes exitLangPopup {
    0% { 
        opacity: 1;
        transform: scale(1);
        
    }
    100% { 
        opacity: 0;
        transform: scale(0.94);
    }
}
#prolyrix-logo{
    height: 15%;
}

@keyframes openLangMenu {
    0% { 
        opacity: 0;
        transform: scale(0.96);
        
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes widgetShow {
    0% { 
        opacity: 0;
        transform: scale(0.96);
        
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes widgetComeFromBottom {
    0% {
        opacity: 0;
        -webkit-transform : scale(1) translateY(15px);
        -ms-transform     : scale(1) translateY(15px);
        transform         : scale(1) translateY(15px);
        
        
    }
    100% {
        opacity: 1;
        -webkit-transform : scale(1) translateY(0px);
        -ms-transform     : scale(1) translateY(0px);
        transform         : scale(1) translateY(0px);
    }
}

@keyframes active-indicator {
    0% { 
        opacity: 0;
        right: -10px;
    }
    100% { 
        opacity: 1;
        right: 0;
    }
}
@keyframes leftMenuComeFromLeft {
    0% { 
        opacity: 0;
        transform: scale(0.96);
        left: -220px;
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes leftMenuComeFromLeftDesktop {
    0% { 
        opacity: 0;
        transform: translateX(-220px);
    }
    100% { 
        opacity: 1;
        transform: scale(1) translateX(0px);
    }
}

@keyframes closeLeftMenu {
    0% { 
        opacity: 1;
        transform: scale(1);
    }
    100% { 
        opacity: 0;
        transform: scale(0.96);
        left: -220px;
    }
}

@keyframes fadeOutAnimation {
    0% { 
        opacity: 1;
    }
    100% { 
        opacity: 0;
    }
}
@keyframes fadeInAnimation {
    0% { 
        opacity: 0;
    }
    100% { 
        opacity: 1;
    }
}
@keyframes errorFormMessage {
    0% { 
        opacity: 0;
        transform: translate(0,-10px);
    }
    100% { 
        transform: translate(0,0);
        opacity: 1;
    }
}

/* LOADER */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin-top: 8px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 14px;
    height: 14px;
    border-radius: 50px;
    background: #b48e62;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }
/* END LOADER */

/*# sourceMappingURL=app.css.map*/