/* --- GENERAL --- */
input[type=text], input[type=file] { border: 1px solid #CABC80 !important; height: fit-content !important; }
input[type=color] { border: 1px solid #CABC80 !important; width: 40%; display: block; margin: auto;}
.page-mask { min-height: 100%; }

/* --- LOGIN PAGE --- */
#admin { margin-top: 10%; }
#loginPage { background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; }
#loginForm { padding: 4rem !important; background-color: rgba(255, 255, 255, 0.65); box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.3); }
@media (max-width: 767px) { #loginForm { margin: 4rem; } }

/* --- PANEL PAGE --- */
#panel { margin: 2% 4rem 0 4rem; }
#panel img { width: 100%; height: auto; }
#panel img:hover { box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); }
#panel .col { padding: 0 1rem !important; } 
#panel-temoignage { margin-top: 2rem !important; }
#panel-temoignage .col-md-auto { padding: 2rem 15% !important; }
#panel-temoignage .col-md-auto:hover { box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); cursor: pointer }
#panel-temoignage span { color: white; font-weight: bold; }

/* --- FORFAITS --- */
#forfait-col .col { padding: 0 0 0 1rem !important; }
.forfait-button { padding: 0 2rem !important; }
.btn-subtitle { width: 90%; background-color: #CABC80; font-weight: 900; height: 2.3rem; border-radius: 1rem; border: 2px solid #AA9C60; color: white; }
.btn-add { width: 100%; background-color: #CABC80; font-weight: 900; height: 2.3rem; border-radius: 1rem; border: 2px solid #AA9C60 }
.btn-delete { width: 100%; background-color: #ff4040; font-weight: 900; height: 2.3rem; border-radius: 1rem; border: 2px solid red }
.btn-add:hover, .btn-delete:hover, .btn-subtitle:hover { box-shadow: 0px 2px 15px #CABC80; }
.txt-input-subtitle { background-color: #CABC80 !important; }

/* --- INSPIRATIONS --- */
.tendance { padding-left: 15px;}
.inspirationsPictos img { margin-left: 1rem; }
.inspirationsPictos img:hover { cursor: pointer }
.imgPreviewPictos {width: auto; height: 5rem;}
.inspirationPreviewImg #imgPreview { border: 1px solid #CABC80 }
#modalChoosePicto .modal-body .row { padding-bottom: 1.25rem }
#modalChoosePicto .modal-body img { width: 4.5rem; border-radius: 50% }
#modalChoosePicto .modal-body img:hover { cursor: pointer; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.3); }
.activePicto { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8); }
.activePicto:hover { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8) !important; }

/* --- BLOG --- */
.blog { padding: 0 2rem; }
#trumbowyg img { width: auto; height: 30%; }
.imgPreview { width: auto; height: 30%; }
#formArticle #imgPreview { border: 1px solid #CABC80; }
.trumbowyg-box { border: 1px solid #CABC80; }
.trumbowyg-button-pane { border-bottom: 1px solid #CABC80; }
.trumbowyg-box.trumbowyg-fullscreen { margin-top: 5rem; }
.articleCol img { border-top-right-radius: 3rem; border-top-left-radius: 3rem; } 
.articleCol:hover > .border > img { cursor: default !important; }
.articleCol .border h4:hover {cursor: pointer !important; }
.articleCol:hover > .border > img { -webkit-filter: brightness(.5); filter: brightness(.5) blur(2px); }
.articleCol:hover > .border > img ~ .edit { display: block; }
.articleCol:hover > .border > h4 { -webkit-filter: brightness(.5); filter: brightness(.5) blur(2px); }
.articleCol:hover > .border > img ~ .delete { display: block; }
.articleCol .edit { position: absolute; height: 6rem; width: 6rem; z-index: 10;
    top: 50%; left: 30%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background-color: rgba(0, 0, 0, 0.4);
    display: none;
}
.articleCol .edit:hover { border: rgba(255, 255, 255, 0.8); box-shadow: 0px 2px 30px white; }
.articleCol .delete { position: absolute; height: 6rem; width: 6rem; z-index: 10;
    top: 50%; left: 70%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
    border-radius: 50%; border: 1px solid white; background-color: rgba(0, 0, 0, 0.4);
    display: none;
}
.articleCol .delete:hover { border: rgba(255, 255, 255, 0.8); box-shadow: 0px 2px 30px white; }
.trumbowyg-dropdown button svg {
    display: none;
}

/* --- TEMOIGNAGES --- */
.opinion-container { padding: 0 5rem; }
#table-temoignages thead { background: #CABC80; }
#table-temoignages thead tr th { padding: 1rem; }
#table-temoignages tbody tr td { padding: 1rem; }
.table-temoignage-th-picture, .table-temoignage-th-forfait, .table-temoignage-th-address, .table-temoignage-th-date, .table-temoignage-th-name { width: 10% }
.table-temoignage-th-action { width: 7% }
.table-temoignage-th-opinion { width: 43% }
#table-temoignages img { width: 100%; }
#table-temoignages td { margin: auto; vertical-align: baseline; }

/* --- GARBAGE --- */
.body-overlay { -webkit-filter: brightness(.5); filter: brightness(.5); background: rgba(0,0,0,0.5); min-height: 100%; }
#garbage-overlay {position:absolute; width: 100%; height: 100%; display: none; z-index: 10; }
#garbage-overlay .cont{ position:absolute; left:50%; top:50%; transform:Translate(-50%, -50%); }
#garbage-overlay .cont button{ background-color:#CABC80; color:rgba(0, 0, 0, 0.5); font-weight: 900; border-bottom:6px solid #AA9C60;
    border-top:5px solid #AA9C60; width:180px; font-size:28px; padding:15px 0px 15px 35px; border-radius:0px 0px 15px 15px;
    box-shadow:0px 0px 15px 1px rgba(255, 255, 255, 0.6); position:relative; font-family: 'Marcellus', sans-serif;
}
#garbage-overlay .cont button:after{ content:""; width:100%; height:1px; background-color:#c8d6e5; top:-3px; left:0; position:absolute; }
.load{ position:absolute; top:30px; left:34px; }
#garbage-overlay .cont button .load div{ width:5px; height:5px; border-radius:50%; background-color:#AA9C60; position:absolute; transform-origin: -8px;
    animation: light 3s linear infinite;
}
#garbage-overlay .cont button .load div:nth-child(1){ transform:rotate(0deg); animation-delay:0s; }
#garbage-overlay .cont button .load div:nth-child(2){ transform:rotate(60deg); animation-delay:.5s; }
#garbage-overlay .cont button .load div:nth-child(3){ transform:rotate(120deg); animation-delay:1s; }
#garbage-overlay .cont button .load div:nth-child(4){ transform:rotate(180deg); animation-delay:1.5s; }
#garbage-overlay .cont button .load div:nth-child(5){ transform:rotate(240deg); animation-delay:2s; }
#garbage-overlay .cont button .load div:nth-child(6){ transform:rotate(300deg); animation-delay:2.5s; }
@keyframes light{ 0%{background-color:#AA9C60;} 40%{background-color:#AA9C60;} 50%{background-color:white;} 60%{background-color:#AA9C60;} 100%{background-color:#AA9C60;} }
.paper{ width:150px; height:160px; box-shadow:0px 0px 10px 1px rgba(55,55,55,.6); left:0; right:0; margin: auto; animation: paper 4s ease infinite; position:absolute;
    transform-origin:top; transform:translateY(0px) rotate(180deg); background-color:#fff;
}
.g-cont{ margin:0 auto; width:150px; text-align:center; position:absolute; top:73px; left:10px; right:0; margin: auto; z-index:10; }
.garbage{ height:160px; width:6px; box-shadow:0px 0px 10px 1px rgba(55,55,55,.6); display:inline-block; vertical-align:top; margin-right:9px;
    animation: garbage 4s ease infinite; background-color:#fff;
}
@keyframes garbage{ 0%{height:0px;transform:translateY(0px);opacity:0;} 20%{height:0px;transform:translateY(0px);opacity:1;} 70%{height:160px;transform:translateY(0px);opacity:1;}
    90.1%{height:160px;transform:translateY(100px);opacity:0;} 100%{height:0px;opacity:0;}
}
@keyframes paper{ 0%{height:160px;opacity:0;transform:translateY(-100px) rotate(180deg);} 20%{height:160px;opacity:1;transform:translateY(0px) rotate(180deg);}
    70%{height:0px;opacity:1;transform:translateY(0px) rotate(180deg);} 70.1%{height:0px;opacity:0;transform:translateY(0px) rotate(180deg);}
    100%{height:160px;opacity:0;transform:translateY(-100px) rotate(180deg);}
}