/*@import url(https://fonts.googleapis.com/css?family=Nunito:300,400,600,700);*/

/*body, a, p, ul, li, button, input {*/
/*    font-family: "Nunito", sans-serif;*/
/*}*/

/*body {*/
/*    background: #f0f3f5;*/
/*}*/
.pLeftWithPanel {
    padding-left: 87px;
}

.color-pallete {
    margin: 0 auto;
    border-radius: 3px;
    border: 1px solid #ebebeb;
    background-color: #fff;
    padding: 8px;
    text-align: center;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap-reverse;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.color-pallete-box {
    width: 37px;
    height: 37px;
    border-radius: 3px;
    margin: 8px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    position: relative;
    cursor: pointer;
    transition: .3s;
}

html .card-wrap .card-img-overlay {
    /*opacity: 0;*/
    /*background: rgba(0, 0, 0, 0.5);*/
    box-shadow: 0 0 30px 0 rgb(88 88 95 / 20%);
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 1;
    /*background: rgba(0, 0, 0, 0.5);*/
    transition: all ease 0.5s;
}

html #cv_fin .card-wrap .card-img-overlay {
    box-shadow: none !important;
}

html #document {
    box-shadow: none !important;
}

html .svg-skin {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 18%) !important;
}

.card.js-thumbnail-index.modal-preview-user-select-state {
    border: none;
}

#cv_choice .card.js-thumbnail-index.modal-preview-user-select-state {
    box-shadow: 0 0 30px 0 rgb(88 88 95 / 48%);
    overflow: hidden;
}

html .card-wrap .svg-skin .btn-primary, html .card-wrap .document-ctnr .btn-primary {
    display: none;
}

html .cards-row {
    min-height: auto;
    margin: 0 -30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
}

/*.card.js-thumbnail-index > div.svg-skin {*/
/*    overflow: hidden;*/
/*    !*padding-bottom: 15px;*!*/
/*    padding-bottom: 5px !important;*/
/*    padding: 3px;*/
/*}*/

html .card-wrap {
    /*opacity: 0;*/
    margin: 15px;
    height: auto;
    /*-webkit-transform: translateX(400%) translateY(-50%) rotate(-10deg);*/
    /*transform: translateX(400%) translateY(-50%) rotate(-10deg);*/
}

/*html .card-wrap.slide-in {*/
/*    opacity: 1;*/
/*    -webkit-transform: translateX(0) translateY(0) rotate(0);*/
/*    transform: translateX(0) translateY(0) rotate(0);*/
/*    transition: all ease 0.35s;*/
/*}*/

html .card-wrap:hover .card-img-overlay {
    opacity: 1;
    /*background: rgba(0, 0, 0, 0.5);*/
    transition: all ease 0.5s;
}

html .card-wrap .card .content {
    position: relative;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.color-pallete-box.active:after {
    color: #fff;
    content: "✔";
    font-size: 20px;
    line-height: 28px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.s-progress {
    background: linear-gradient(#FFFFFF, rgba(240, 240, 240, 0.56));
    box-shadow: 0 .125rem .25rem 0 rgba(58, 59, 69, .2) !important;
    padding-top: 5px;
}

.cv-progress {
    color: #01ab97;
}

.cv-progress img {
    width: 30px;
    display: block;
    margin: 7px auto;
    margin-top: 11px;
}

.cv-progress ul {
    text-align: center;
    margin: 0;
    padding: 0;
}

.cv-progress ul li {
    display: inline-block;
    width: calc(96% / 6);
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.cv-progress ul li .fa {
    /*background: #fff;*/
    width: 42px;
    height: 22px;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    padding: 5px;
    z-index: 1;
}

.cv-progress ul li .fa::after {
    content: '';
    background: #ccc;
    height: 3px;
    width: 105%;
    display: block;
    position: absolute;
    left: 0;
    top: 11px;
    z-index: -1;

}

/*.cv-progress ul li.current .fa {*/
/*background: #fff;*/
/*}*/

.cv-progress ul li.current .fa::after {
    background: #148e14;
}

/*.cv-progress ul li.completed .fa {*/
/*    background: #fff;*/
/*}*/

.cv-progress ul li.completed .fa::after {
    background: #3cdc7d;
}

/*.cv-progress ul li:first-child .fa:after {*/
/*    width: 200px;*/
/*    left: 50%;*/
/*}*/

.cv-progress ul li:last-child .fa:after {
    width: 50%;
}

.cv-progress ul p {
    margin-bottom: 0px;
    font-weight: 600;
    margin-top: -7px;
}

.cv-progress ul p a {
    color: #0d6efd;
    text-decoration: none;
}

.box-option-pg {
    position: relative;
    padding: 14px;
    cursor: pointer;
    background-color: #fff;
    text-align: center;
    left: 0;
    border: 1px solid #e8ecf0;
    box-shadow: 0 0 6px rgb(88 88 95 / 11%);
    transition: all 0.5s;
    border-radius: 11px;
    min-height: 380px;
}

.box-option-pg:hover {
    border: 4px solid #EFC778;
}

.box-option-pg span.close {
    background: red;
    color: white;
    border-radius: 20px;
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    right: 8px;
    top: 8px;
    font-weight: bold;
    line-height: 29px;
    font-family: cursive;
    box-shadow: #303030 0 0 4px 0px;
}


[style="z-index:9999;width:100%;position:relative"] {
    display: none !important;
}

[style="z-index: 9999; width: 100%; position: relative;"] {
    display: none !important;
}

span.fr-placeholder {
    margin-top: 0px !important;
}

a[id="logo"] {
    display: none !important;
}

.fr-element.fr-view {
    min-height: 200px !important;
}

.ui-pnotify {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    border-radius: 20px;
}

.ui-pnotify .ui-pnotify-shadow {
    border-radius: .5rem;
    font-size: .875rem;
}


.exp-pnotif .ui-pnotify-text {
    text-align: center;
}

button.ui-pnotify-action-button {
    background: white !important;
    box-shadow: #807b7b 0px 0px 0px 1px;
    border-radius: 4px;
}

#staticBackdrop .modal-body .id-document {
    transform: none;
}

#staticBackdrop .modal-body .card-wrap {
    margin: 0;
}

#nextStep {
    width: 215px;
    height: 38px;
}

.svg-skin {
    padding-bottom: 0px !important;
}

.my-experiences li, .my-formations li {
    position: relative;
    border-radius: 11px;
    margin-bottom: 24px;
    box-shadow: #c6c6c6 0px 0px 2px 0px;
    cursor: pointer;
    margin-top: 13px;
    min-height: 60px;
    background: #fff;
    margin-left: 16px;
    list-style: none;
    padding: 0px 10px 10px 10px;
    transition: all 0.2s ease-in-out 0s;
    box-shadow: none;
    border: 2px dashed rgb(183, 220, 250);
}

.my-experiences li span.count, .my-formations li span.count {
    background: #4caf50;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: block;
    position: relative;
    text-align: center;
    box-shadow: black 0 0 2px 0px;
    font-weight: bold;
    top: -11px;
    left: -28px;
}

.count-btn-action {
    position: absolute;
    right: 4px;
    top: -16px;
}

.count-btn-action button {
    box-shadow: black 0 0 2px 0px;
    border-radius: 50%;
    font-size: 22px;
    padding: 0;
    text-align: center;
    width: 35px;
    height: 35px;
}

.count-btn-action .btn-warning {
    background-color: #ff9800;
    border-color: #ff9800;
}

.b-skills-title input {
    border: none;
    font-weight: bold;
    font-size: 21px;
    color: blue;
    padding: .375rem 0;
    max-width: 300px;
}

.b-skills-title span {
    color: blue;
    border: none;
    font-size: 20px;
    background: transparent;
}

#btn-add-skills {
    background: transparent;
    font-weight: bold;
    border: none;
    color: #00B74A;
}

.btn-add-lng {
    color: #26a0f4;
    background: transparent;
    box-sizing: border-box;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px 14px;
    border-radius: 4px;
    min-height: 60px;
    transition: all 0.2s ease-in-out 0s;
    background-color: transparent;
    border: 2px dashed rgb(183, 220, 250);
    font-weight: bold;
}

.list-skills ul, .list-skills-modal ul {
    display: block;
}

.list-skills li, .list-skills-modal li {
    background: #efefef;
    padding: 5px 8px;
    border-radius: 13px;
    color: black;
    margin-right: 10px;
    margin-bottom: 9px;
    list-style: none;
    display: inline-block;
    box-shadow: rgb(231 235 238) 0px 3px 8px 0px, rgb(181 186 189) 0px 1px 4px 0px;
}

.list-skills li span, .list-skills-modal li span {
    background: #028c98cc;
    padding: 4px 8px;
    border-radius: 23px 10px 23px 10px;
    box-shadow: #ffffff 0px 0px 5px 0px;
    margin-left: 5px;
    letter-spacing: 2px;
    font-family: monospace;
    color: white;
}

.list-skills li button, .list-skills-modal li button {
    color: white;
    padding: 0;
    font-size: 20px;
    border-radius: 50%;
    width: 33px;
    height: 34px;
    top: -20px;
    margin-left: 3px;
}

.list-skills li .btn-ac, .list-skills li p, .list-skills-modal li .btn-ac, .list-skills-modal li p {
    display: inline;
}

.list-skills li.realedit {
    background: #607d8b;
}

.examples-wrapper {
    border: solid #b5b5b5 1px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: #a2a2a2 0px 0px 4px 0px;
    background: white;
    height: 92%;
    margin-top: 20px;
    display: none;
    width: 100%;
}

.exemples-content {
    position: relative;
    height: 83%;
    display: flex;
    overflow: auto;
    overflow-y: auto;
}

#cv_formation_new .exemples-content {
    height: 90%;
}


.exemples-content ul {
    position: absolute;
    overflow-y: auto;
    overflow: auto;
    list-style: none;
    padding: 4px;
}

.exemples-content ul li {
    border-radius: 11px;
    margin-bottom: 8px;
    box-shadow: #c6c6c6 0px 0px 2px 0px;
    cursor: pointer;
    margin-top: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
    min-height: 60px;
    border: 1px solid #ccc6bf;
    background: #fff;
}

.exemples-content ul li > .example-icon > button::before {
    content: "Ajouter";
    font-size: 16px;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}


.exemples-content ul li > .example-icon > button {
    border-radius: 0 !important;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    outline: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(
            -90deg
    );
    transform: translateX(-50%) translateY(-50%) rotate(
            -90deg
    );
}

.exemples-content ul li > .example-icon {
    position: relative;
    width: 30px;
    background-color: #0058ac;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    border-right: 1px solid #e8ecf0;
    min-height: 85px;
    border-radius: 10px 0 0 10px;
}

.exemples-content ul li > p {
    padding: 10px 10px;
    font-size: 16px;
    width: calc(100% - 30px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-flex-item-align: center;
    align-self: center;
    margin-bottom: 0;
}

.exemples-content ul li.remove > .example-icon > button::before {
    content: "Supprimer";
}

.exemples-content ul li.remove {
    background: #e8e8e8;
}

.exemples-content ul li.remove > .example-icon {
    background-color: #f44336;
}

#modalSkills .examples-wrapper {
    height: 100%;
    min-height: 400px;
}

.list-skills-modal {
    max-height: 400px;
    overflow-y: auto;
}

.cc-selector-2 input {
    position: absolute;
    z-index: 999;
}

/*.niv_1 {*/
/*    background-image: url({{ asset('img/app/niv_1.svg')*/
/*}*/

/*}*/
/*)*/
/*;*/
/*}*/
/*.niv_2 {*/
/*    background-image: url({{ asset('img/app/niv_2.svg')*/
/*}*/

/*}*/
/*)*/
/*;*/
/*}*/
/*.niv_3 {*/
/*    background-image: url({{ asset('img/app/niv_3.svg')*/
/*}*/

/*}*/
/*)*/
/*;*/
/*}*/
/*.niv_4 {*/
/*    background-image: url({{ asset('img/app/niv_4.svg')*/
/*}*/

/*}*/
/*)*/
/*;*/
/*}*/


.cc-selector-2 input:active + .drinkcard-cc, .cc-selector input:active + .drinkcard-cc {
    opacity: .9;
}

.cc-selector-2 input:checked + .drinkcard-cc, .cc-selector input:checked + .drinkcard-cc {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.drinkcard-cc {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    height: 70px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
    background-position: center;
    width: 100%;
}

.drinkcard-cc:hover {
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.cc-selector-2 p {
    text-align: center;
}

.list-lng li {
    background: #efefef;
    border-radius: 4px;
    box-shadow: rgb(231 235 238) 0px 3px 8px 0px, rgb(181 186 189) 0px 1px 4px 0px;
    display: block;
    transition: all 0.2s ease 0s;
    padding: 10px;
    position: relative;
    margin-top: 5px;
    margin-bottom: 10px;
    min-height: 60px;
}

.list-lng li button {
    top: 20%;
    position: absolute;
    color: white;
    padding: 0;
    font-size: 27px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.list-lng .lng-edit {
    right: 55px;
}

.list-lng .lng-delete {
    right: 10px;

}

/*.exemples-content.exemples-synthese {*/
/*    height: 92%;*/
/*}*/
/*#tpl #document .blockRight{*/
/*    height: auto!important;*/
/*}*/
#document {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 18%);
    transform: scale(0.354, 0.376);
    transform-origin: left top;
    /*width: 987px;*/
    /*height: 1198px;*/
    width: 300px;
    height: 300px;
}

#tpl #document {
    transform: scale(50%);
    height: auto;
}

#cv-fin .bg-cv-tpl {
    background: rgb(248, 249, 250);
}

.r-content {
    padding-top: 20px;
}

.r-content h2 {
    font-size: 20px;
}

.r-content .color-pallete {
    max-width: 336px;
}

.r-content ul#fin-sections {
    list-style: none;
}

.r-content ul#fin-sections li {
    display: flex;
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: rgb(231 235 238) 0px 3px 8px 0px, rgb(181 186 189) 0px 1px 4px 0px;
    -webkit-box-align: center;
    align-items: center;
    padding: 8px 4px 8px 14px;
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    min-height: 60px;
    /*cursor: pointer;*/
    transition: all 0.2s ease-in-out 0s;
    margin: 8px 0px;
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.r-content ul#fin-sections li:hover {
    box-shadow: rgb(217 221 224) 0px 0px 4px 0px;
}

.r-content ul#fin-sections li:last-child {
    border: 2px dashed rgb(183, 220, 250);
    background: #f8f9fa;
    box-shadow: none;

}

.r-content ul#fin-sections li:last-child:hover {
    border: 3px dashed rgb(183, 220, 250);
}

.r-content ul#fin-sections li:last-child button, .r-content ul#fin-sections li:last-child .fa {
    text-decoration: none;
    font-size: 24px;
    color: #26a0f4;
}

.r-content ul#fin-sections li span {
    min-width: 0px;
    flex: 1 1 0%;
}

.r-content ul#fin-sections li a .fa {
    font-size: 28px;
    color: #6d7275;
}

.row-add-sc-title {
    display: flex;
    flex-wrap: wrap;
}

.col-add-sc-title {
    display: flex;
    flex-direction: column;
    width: calc(50% - 16px);
    padding: 16px;
    margin: 8px;
    border-radius: 4px;
    background-color: rgb(240, 243, 245);
    box-sizing: border-box;
    min-height: 100px;
    position: relative;
}

.col-add-sc-title h4 {
    width: calc(100% - 42px);
    color: rgb(61, 64, 66);
}

.MuiButtonBase-root {
    top: 9px;
    right: 4px;
    padding: 9px;
    position: absolute;
}

.MuiIconButton-label {
    width: 100%;
    display: flex;
    align-items: inherit;
    justify-content: inherit;
}

.jss62 {
    top: 0;
    left: 0;
    width: 100%;
    cursor: inherit;
    height: 100%;
    margin: 0;
    /*opacity: 0;*/
    padding: 0;
    z-index: 1;
    position: absolute;
    cursor: pointer;
}

.MuiSvgIcon-root {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    display: none;
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none;
}

.modal-header {
    padding: 5px;
    background: linear-gradient(#FFFFFF, rgba(240, 240, 240, 0.56));
    box-shadow: 0 0.125rem 0.25rem 0 rgb(58 59 69 / 20%) !important;
}

.modal-content .svg-skin {
    padding: 0 !important;
}

#cv-section .list-lng li button {
    top: -26px;
}

#cv-section .list-lng li {
    min-height: 47px;
    margin-bottom: 37px;
}

#cv_fin .card-wrap.js-thumbnail-animation.slide-in {
    position: relative;
}

/*!
Link    : http://sciactive.com/pnotify/
*/
.ui-pnotify {
    top: 36px;
    right: 36px;
    position: absolute;
    height: auto;
    z-index: 2
}

body > .ui-pnotify {
    position: fixed;
    z-index: 100040
}

.ui-pnotify-modal-overlay {
    background-color: rgba(0, 0, 0, .4);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1
}

body > .ui-pnotify-modal-overlay {
    position: fixed;
    z-index: 100039
}

.ui-pnotify.ui-pnotify-in {
    display: block !important
}

.ui-pnotify.ui-pnotify-move {
    transition: left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
}

.ui-pnotify.ui-pnotify-fade-slow {
    transition: opacity .4s linear;
    opacity: 0
}

.ui-pnotify.ui-pnotify-fade-slow.ui-pnotify.ui-pnotify-move {
    transition: opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
}

.ui-pnotify.ui-pnotify-fade-normal {
    transition: opacity .25s linear;
    opacity: 0
}

.ui-pnotify.ui-pnotify-fade-normal.ui-pnotify.ui-pnotify-move {
    transition: opacity .25s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
}

.ui-pnotify.ui-pnotify-fade-fast {
    transition: opacity .1s linear;
    opacity: 0
}

.ui-pnotify.ui-pnotify-fade-fast.ui-pnotify.ui-pnotify-move {
    transition: opacity .1s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
}

.ui-pnotify.ui-pnotify-fade-in {
    opacity: 1
}

.ui-pnotify .ui-pnotify-shadow {
    -webkit-box-shadow: 0 6px 28px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 6px 28px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 6px 28px 0 rgba(0, 0, 0, .1)
}

.ui-pnotify-container {
    background-position: 0 0;
    padding: .8em;
    height: 100%;
    margin: 0
}

.ui-pnotify-container:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both
}

.ui-pnotify-container.ui-pnotify-sharp {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.ui-pnotify-title {
    display: block;
    margin-bottom: .4em;
    margin-top: 0
}

.ui-pnotify-text {
    display: block
}

.ui-pnotify-icon, .ui-pnotify-icon span {
    display: block;
    float: left;
    font-size: 25px;
    margin-right: .2em
}

.ui-pnotify.stack-bottomleft, .ui-pnotify.stack-topleft {
    left: 25px;
    right: auto
}

.ui-pnotify.stack-bottomleft, .ui-pnotify.stack-bottomright {
    bottom: 25px;
    top: auto
}

.ui-pnotify.stack-modal {
    left: 50%;
    right: auto;
    margin-left: -150px
}

.brighttheme {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.brighttheme.ui-pnotify-container {
    6px 12px 12px 12px
}

.brighttheme .ui-pnotify-title {
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-top-left-radius: calc(.5rem - 1px);
    border-top-right-radius: calc(.5rem - 1px);
    font-size: 20px;
}

.brighttheme-notice {
    background-color: #1266f1;
    border: 0 solid #1266f1;
    color: #fff
}

.brighttheme-info {
    background-color: #39c0ed;
    border: 0 solid #39c0ed;
    color: #fff
}

.brighttheme-success {
    background-color: #00b74a;
    border: 0 solid #00b74a;
    color: #fff
}

.brighttheme-error {
    background-color: #f93154 !important;
    border: 0 solid #ff1800;
    color: #fff;
}

.brighttheme-icon-closer, .brighttheme-icon-info, .brighttheme-icon-notice, .brighttheme-icon-sticker, .brighttheme-icon-success {
    position: relative;
    width: 16px;
    height: 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    font-family: "Courier New", Courier, monospace;
    border-radius: 50%
}

.brighttheme-icon-closer:after, .brighttheme-icon-info:after, .brighttheme-icon-notice:after, .brighttheme-icon-sticker:after, .brighttheme-icon-success:after {
    position: absolute;
    top: 0;
    left: 4px
}

.brighttheme-icon-notice {
    background-color: #2e2e00;
    color: #ffffa2;
    margin-top: 2px
}

.brighttheme-icon-notice:after {
    content: "!"
}

.brighttheme-icon-info {
    background-color: #012831;
    color: #8fcedd;
    margin-top: 2px
}

.brighttheme-icon-info:after {
    content: "i"
}

.brighttheme-icon-success {
    background-color: #104300;
    color: #aff29a;
    margin-top: 2px
}

.brighttheme-icon-success:after {
    content: "\002713"
}

.brighttheme-icon-error {
    position: relative;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid #2e0400;
    font-size: 0;
    line-height: 0;
    color: #ffaba2;
    margin-top: 1px
}

.brighttheme-icon-error:after {
    position: absolute;
    top: 1px;
    left: -4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    font-family: "Courier New", Courier, monospace;
    content: "!"
}

.brighttheme-icon-closer, .brighttheme-icon-sticker {
    display: inline-block
}

.brighttheme-icon-closer:after {
    top: -4px;
    content: "\002715"
}

.brighttheme-icon-sticker:after {
    top: -5px;
    content: "\002016"
}

.brighttheme-icon-sticker.brighttheme-icon-stuck:after {
    content: "\00003E"
}

.brighttheme .ui-pnotify-action-bar {
    padding-top: 12px
}

.brighttheme .ui-pnotify-action-bar input, .brighttheme .ui-pnotify-action-bar textarea {
    display: block;
    width: 100%;
    margin-bottom: 12px !important
}

.brighttheme .ui-pnotify-action-button {
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 8px;
    border: none;
    background: 0 0
}

.brighttheme .ui-pnotify-action-button.btn-primary {
    border: none;
    border-radius: 0
}

.brighttheme-notice .ui-pnotify-action-button.btn-primary {
    background-color: #ff0;
    color: #4f4f00
}

.brighttheme-info .ui-pnotify-action-button.btn-primary {
    background-color: #0286a5;
    color: #012831
}

.brighttheme-success .ui-pnotify-action-button.btn-primary {
    background-color: #35db00;
    color: #104300
}

.brighttheme-error .ui-pnotify-action-button.btn-primary {
    background-color: #ff1800;
    color: #4f0800
}

.ui-pnotify-closer, .ui-pnotify-sticker {
    float: right;
    margin-left: .2em
}

.ui-pnotify-container {
    position: relative;
    left: 0
}

@media (max-width: 480px) {
    .ui-pnotify-mobile-able.ui-pnotify {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: auto !important;
        font-size: 1.2em;
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        -ms-font-smoothing: antialiased;
        font-smoothing: antialiased
    }

    .ui-pnotify-mobile-able.ui-pnotify .ui-pnotify-shadow {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-bottom-width: 5px
    }

    .ui-pnotify-mobile-able .ui-pnotify-container {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0
    }

    .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft, .ui-pnotify-mobile-able.ui-pnotify.stack-topleft {
        left: 0;
        right: 0
    }

    .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft, .ui-pnotify-mobile-able.ui-pnotify.stack-bottomright {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto
    }

    .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft .ui-pnotify-shadow, .ui-pnotify-mobile-able.ui-pnotify.stack-bottomright .ui-pnotify-shadow {
        border-top-width: 5px;
        border-bottom-width: 1px
    }
}

.ui-pnotify-container {
    position: relative;
    left: 0
}

@media (max-width: 480px) {
    .ui-pnotify-mobile-able.ui-pnotify {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: auto !important;
        font-size: 1.2em;
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        -ms-font-smoothing: antialiased;
        font-smoothing: antialiased
    }

    .ui-pnotify-mobile-able.ui-pnotify .ui-pnotify-shadow {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-bottom-width: 5px
    }

    .ui-pnotify-mobile-able .ui-pnotify-container {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0
    }

    .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft, .ui-pnotify-mobile-able.ui-pnotify.stack-topleft {
        left: 0;
        right: 0
    }

    .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft, .ui-pnotify-mobile-able.ui-pnotify.stack-bottomright {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto
    }

    .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft .ui-pnotify-shadow, .ui-pnotify-mobile-able.ui-pnotify.stack-bottomright .ui-pnotify-shadow {
        border-top-width: 5px;
        border-bottom-width: 1px
    }
}

.ui-pnotify {
    top: 36px;
    right: 36px;
    position: absolute;
    height: auto;
    z-index: 2
}

body > .ui-pnotify {
    position: fixed;
    z-index: 100040
}

.ui-pnotify-modal-overlay {
    background-color: rgba(0, 0, 0, .4);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1
}

body > .ui-pnotify-modal-overlay {
    position: fixed;
    z-index: 100039
}

.ui-pnotify.ui-pnotify-in {
    display: block !important
}

.ui-pnotify.ui-pnotify-move {
    transition: left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
}

.ui-pnotify.ui-pnotify-fade-slow {
    transition: opacity .4s linear;
    opacity: 0
}

.ui-pnotify.ui-pnotify-fade-slow.ui-pnotify.ui-pnotify-move {
    transition: opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
}

.ui-pnotify.ui-pnotify-fade-normal {
    transition: opacity .25s linear;
    opacity: 0
}

.ui-pnotify.ui-pnotify-fade-normal.ui-pnotify.ui-pnotify-move {
    transition: opacity .25s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
}

.ui-pnotify.ui-pnotify-fade-fast {
    transition: opacity .1s linear;
    opacity: 0
}

.ui-pnotify.ui-pnotify-fade-fast.ui-pnotify.ui-pnotify-move {
    transition: opacity .1s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
}

.ui-pnotify.ui-pnotify-fade-in {
    opacity: 1
}

.ui-pnotify .ui-pnotify-shadow {
    -webkit-box-shadow: 0 6px 28px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 6px 28px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 6px 28px 0 rgba(0, 0, 0, .1)
}

.ui-pnotify-container {
    background-position: 0 0;
    padding: .8em;
    height: 100%;
    margin: 0
}

.ui-pnotify-container:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both
}

.ui-pnotify-container.ui-pnotify-sharp {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.ui-pnotify-title {
    display: block;
    margin-bottom: .4em;
    margin-top: 0
}

.ui-pnotify-text {
    display: block
}

.ui-pnotify-icon, .ui-pnotify-icon span {
    display: block;
    float: left;
    margin-right: .2em
}

.ui-pnotify.stack-bottomleft, .ui-pnotify.stack-topleft {
    left: 25px;
    right: auto
}

.ui-pnotify.stack-bottomleft, .ui-pnotify.stack-bottomright {
    bottom: 25px;
    top: auto
}

.form-floating {
    margin-bottom: 8px;
}

.form-floating > label {
    color: #0090f2;
}

.form-floating input, .form-floating select {
    height: 56px;
    padding: 10px 12px 0px 16px;
    cursor: text;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: rgb(240, 243, 245);
    border: 1px solid transparent;
    /*background: linear-gradient(#FFFFFF, rgba(240, 240, 240, 0.56));*/
    box-shadow: 0 0.125rem 0.25rem 0 rgb(58 59 69 / 20%) !important;
}

[name="from-add-skill"] .form-floating {
    margin-bottom: 0px !important;
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    opacity: .75;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

button.btn-close {
    background: #c61818;
    opacity: 1;
    border-radius: 20px;
    font-size: 20px;
    right: 13px;
    position: absolute;
}

button.btn-close:after {
    content: "\f00d";
    color: white;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 23px;
    margin-top: -12px;
    margin-left: -9px;
    position: absolute;
}

.bootstrap-autocomplete a {
    text-decoration: none;
    color: #3f51b5;
    padding: 4px 5px;
    display: block;
    background: linear-gradient(#FFFFFF, rgba(240, 240, 240, 0.56));
    box-shadow: 0 0.125rem 0.25rem 0 rgb(58 59 69 / 20%) !important;
}

.bootstrap-autocomplete {
    padding: 0;
    margin-top: -2px;
}

#btn-modal-add-text {
    background: transparent;
    font-weight: bold;
    border: none;
    color: #00B74A;
    text-align: right;
    right: 0;
    float: right;
    display: block;
}

.ttc-content {
    font-weight: 700;
    color: #00c293;
}

.pageSplit {
    color: white;
    position: relative;
    display: flex;
    box-sizing: border-box;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    left: 54px;
    padding: 10px;
    font-size: 10px;
    height: 30px;
    background-color: rgb(34, 152, 233);
    transform: translate(-100%, -50%);
    border-radius: 3px 4px 4px 3px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
}

.pageSplit:after {
    content: ' ';
    position: absolute;
    top: 0px;
    right: 0.5px;
    height: 100%;
    transform: translateX(100%);
    border-top: 14px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 23px solid #2298e9;
}

#cv_choice .cards-row {
    margin-bottom: 150px;
}

@media (min-width: 992px) {
    .auto-scroll > .col-lg-7, .auto-scroll > .col-lg-5 {
        height: calc((100vh - 20px) - 30px);
        box-sizing: border-box;
        overflow: visible auto;
    }

    .auto-scroll-fin > .col-lg-7, .auto-scroll-fin > .col-lg-5 {
        height: calc((100vh - 32px) - 24px);
        box-sizing: border-box;
        overflow: visible auto;
    }

    [data-bs-target="#staticBackdrop"] {
        font-size: 25px;
        background: #028C98;
        border: none;
        border-radius: 19px;
        padding: 2px 20px;
        width: 94%;
    }

    [data-bs-target="#staticBackdrop"]:hover {
        background: #066c74;
    }

    .exp-pnotif {

        min-width: 500px;
        width: 500px !important;
    }
}

@media (max-width: 991px) {
    .mobileShowModal {
        display: block !important;
        position: fixed;
        bottom: 0;
        width: 100%;
        border: none;
        font-size: 20px;
        background: linear-gradient(#09c656, #07a045);
        box-shadow: 0 -2px 0.25rem 0 rgb(58 59 69 / 20%);
    }

    .cpallette nav, .cpallette nav .container-fluid {
        padding: 0 !important;
    }

    .cpallette nav .color-pallete-box {
        width: 38px;
        height: 30px;
        border-radius: 3px;
        margin: 5px;
        margin-bottom: 1px;
    }

    .cpallette .color-pallete {
        margin: 0 auto;
        border: 1px solid #ebebeb;
        padding: 2px;
        background: linear-gradient(#ececec, rgb(255 255 255));
    }

    html #cv_choice .card-wrap .svg-skin, html.page-choose-template .card-wrap .svg-skin > svg {
        height: 452px !important;
    }

    html #cv_choice .card-wrap {
        width: 300px !important;
    }

    html #cv_choice .cards-row {
        min-height: auto;
        margin: 0 !important;
    }

    form.form-floatings {
        font-size: 12px;
    }

    button#button-addon2 {
        width: 100%;
        color: black;
        margin-top: -1px;
        font-weight: bold;
        /*margin-bottom: 20px;*/
        background-color: #ffc107;
        border-radius: 0px 0px 10px 10px;

    }

    [name="q-search"] {
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
        border-radius: 10px 10px 0px 0px !important;
        margin-top: 6px;
    }

    .exemples-content {
        height: initial !important;
    }

    #modalSkills .examples-wrapper {
        height: 94%;
    }

    .form-floating.w-25 {
        width: 37% !important;
    }

    .form-floating > label {
        padding: 1rem .25rem;
    }

    .list-skills li, .list-skills-modal li {
        padding: 0px 5px;
        display: block;
        padding-bottom: 7px;
        padding-top: 3px;
        margin-bottom: 8px;
        position: relative;
        padding-right: 72px;
    }

    .list-skills li span, .list-skills-modal li span {
        padding: 2px 7px;
        letter-spacing: 0px;
    }

    .list-skills li button, .list-skills-modal li button {
        font-size: 17px;
        margin-left: 9px;
        width: 30px;
        height: 30px;
    }

    .btn-ac {
        right: 0;
        position: absolute;

    }

    .modal-body {
        padding: 7px;
    }

    .exemples-content ul {
        height: 400px;
        position: relative;
    }

    #modalDescription .examples-wrapper {
        display: block;
        height: auto;
    }

    #modalDescription h2 {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }

    #modalDescription .container-fluid {
        padding: 0px 5px !important;
    }
}