@import"https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";:root{--bg-main: #ecf7d3;--reg-container-bg: #ece9d2e2;--cards-bg: #a7966beb;--border: #34743fd1;--box-shadow: #1f4102c9;--shadow-light-green: #cff8b9d1;--shadow-dark-green: #1f4102b2;--shadow-light-yellow: #f9ffc0d8;--shadow-dark-yellow: #695205ce;--shadow-light-brown: #d0c6b0eb;--shadow-dark-brown: #242118d3;--input-bg: #c3eab4;--input-bg-focus: #e4f9db;--input-shadow-dark: #1f4102a2;--input-shadow-light: #ffffffd1;--outline-focus: #1e5b20;--btn-bg-yellow: #e9c811;--btn-bg-green: #067900;--btn-bg-brown: #44360fcf;--btn-border-yellow: #765c05ce;--btn-border-green: #065a00;--btn-border-brown: #392d0be9;--btn-bg-hover-yellow: #d4a50a;--btn-bg-hover-green: #056800;--btn-bg-hover-brown: #302609cf;--btn-bg-active-green: #8cc789;--btn-outline-focus-yellow: #765c05ce;--btn-outline-focus-green: #056800;--btn-outline-focus-brown: #302609cf;--btn-font-clr-darkbrown: #1b1912;--btn-font-clr-lightyellow: #dcfecd;--font-primary-clr: #ecfee4;--menu-bg-clr: #f8d03ee0;--menu-font-clr: #144100e8;--menu-font-clr-hover: #6ea258;--table-even-rows: #ece9d224;--border-radius-containers: .3rem}*{margin:0;padding:0;box-sizing:border-box}body,html,#root{width:100vw;height:100vh;background-color:var(--bg-main);max-width:100%;overflow-y:auto;font-size:1rem;font-family:Poppins,sans-serif;font-weight:400;color:var(--font-primary-clr)}a{text-decoration:none;color:inherit;outline:none}.image-frame{width:100px;height:100px;border-radius:50%;overflow:hidden;display:inline-block;box-shadow:0 0 5px var(--shadow-dark-brown)}.image-frame img{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}section{width:100%}.open{display:flex}.wrapper{max-width:1440px;height:100%;margin:0 auto;padding-top:2rem;display:grid;grid-template-rows:auto 1fr auto}.main-container{width:100%;max-width:1440px;height:100%;display:flex;justify-content:flex-start;align-items:flex-start;gap:1rem}.input-field{width:100%;padding:.75rem;background:var(--input-bg);outline:none;border:none;position:relative;border-radius:var(--border-radius-containers);box-shadow:inset 3px 3px 3px var(--input-shadow-dark),inset -3px -3px 3px var(--input-shadow-light)}.input-field:focus,.input-field:focus-within{background:var(--input-bg-focus)}.border{border:1px solid var(--border);border-radius:var(--border-radius-containers);box-shadow:inset -3px -3px 3px var(--box-shadow)}.nav-container{max-height:200px;display:flex;justify-content:center;align-items:center;padding:1rem;position:relative;box-shadow:0 0 8px var(--shadow-dark-brown)}.nav-container .header-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.nav-container .logo{position:relative;z-index:100;max-width:100%;max-height:150px}.menu-section{width:clamp(200px,20%,300px);padding:1rem;border:none;border-radius:var(--border-radius-containers);background-color:var(--menu-bg-clr);box-shadow:inset 3px 3px 3px var(--shadow-light-yellow),inset -3px -3px 3px var(--shadow-dark-yellow)}.menu-section nav{width:100%}.menu-section ul{width:100%;list-style:none;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:1rem}.menu-section li a{font-size:1.3rem;font-weight:600;color:var(--menu-font-clr);cursor:pointer;transition:all .2s ease-in-out}.menu-section li a:hover,.menu-section li a:focus{color:var(--menu-font-clr-hover)}.content-section{width:100%;padding:0 0 1rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:1rem;flex-wrap:nowrap}.content-section .register-new-section{width:100%;max-width:60vw;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border:none;border-radius:var(--border-radius-containers);background-color:var(--reg-container-bg);box-shadow:inset 3px 3px 3px var(--shadow-light-yellow),inset -3px -3px 3px var(--shadow-dark-yellow)}.content-section .register-new-section .register-new-form{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1rem}.content-section .register-new-section .input-group{width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:1rem;flex-shrink:1}.content-section .register-new-section .dropdown{display:none;min-width:200px;max-height:300px;flex-direction:column;list-style:none;overflow-y:auto;position:absolute;top:100%;left:0;z-index:1000;background:var(--input-bg);outline:none;border:none;border-radius:var(--border-radius-containers);box-shadow:inset 3px 3px 3px var(--input-shadow-dark),inset -3px -3px 3px var(--input-shadow-light)}.content-section .register-new-section .dropdown:focus,.content-section .register-new-section .dropdown:focus-within{background:var(--input-bg-focus)}.content-section .register-new-section .open{display:flex}.content-section .register-new-section .dropdown-group{position:relative;width:100%}.content-section .register-new-section .small-input{max-width:80px}.content-section .register-new-section .date-input{max-width:150px}.content-section .register-new-section .suggestion-item,.content-section .register-new-section .dropdown ul li{padding:.5rem;width:100%;cursor:pointer;color:var(--menu-font-clr);transition:all .2s ease-in-out}:is(.content-section .register-new-section .suggestion-item,.content-section .register-new-section .dropdown ul li):hover,:is(.content-section .register-new-section .suggestion-item,.content-section .register-new-section .dropdown ul li):focus{background-color:var(--input-bg-focus);box-shadow:inset 3px 3px 3px var(--input-shadow-dark),inset -3px -3px 3px var(--input-shadow-light)}.content-section .register-new-section .selected{background-color:var(--input-bg-focus);box-shadow:inset 3px 3px 3px var(--input-shadow-dark),inset -3px -3px 3px var(--input-shadow-light)}.content-section .register-new-section .bird-preview{width:100%;max-width:150px;height:100%;max-height:150px;aspect-ratio:1 / 1;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 0 5px var(--shadow-dark-brown)}.content-section .register-new-section .bird-preview img{display:block;width:100%;height:100%;object-fit:cover}.content-section .card{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem;background-color:var(--cards-bg);border-radius:var(--border-radius-containers);box-shadow:inset 3px 3px 3px var(--shadow-light-brown),inset -3px -3px 3px var(--shadow-dark-brown)}.content-section .card .card-top{width:100%;display:flex;justify-content:space-between;align-items:center}.content-section .card .card-top .checkbox-container{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem}.content-section .card .card-top .checkbox-group{position:relative;display:flex;justify-content:center;align-items:center;gap:.4rem}.content-section .card .card-top .checkbox-group input{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0}.content-section .card .card-top .checkbox{width:1.3rem;height:1.3rem;display:flex;justify-content:center;align-items:center;background:var(--input-bg-focus);outline:none;border:none;position:relative;pointer-events:none;border-radius:var(--border-radius-containers);box-shadow:inset 3px 3px 3px var(--input-shadow-dark),inset -3px -3px 3px var(--input-shadow-light)}.content-section .card .card-top .checkbox:active{background:var(--input-bg)}.content-section .card .card-top .check-icon{display:none}.content-section .card .card-top .checkbox-group input:checked+.checkbox .check-icon{display:inline-block}.content-section .form-bottom{width:100%;display:flex;justify-content:space-between;align-items:flex-end}.content-section .form-bottom .form-message{padding:.5rem .9rem .5rem .7rem;border-radius:var(--border-radius-containers);display:flex;justify-content:flex-start;align-items:center;gap:.5rem}.content-section .form-bottom .success{border:1px solid #4db53f;background-color:#c3eab4;color:#1f5717}.content-section .form-bottom .error{border:1px solid #b84141;background-color:#ff290d41;color:#751b1b}.content-section .form-bottom:has(>:only-child){justify-content:flex-end}.btn{padding:.7rem 1.5rem;outline:none;font-weight:600;cursor:pointer;border:none;transition:background .2s ease-in-out;border-radius:var(--border-radius-containers)}button span{white-space:nowrap}.search-btn{background-color:var(--btn-bg-yellow);color:var(--btn-font-clr-darkbrown);box-shadow:inset 3px 3px 3px var(--shadow-light-yellow),inset -3px -3px 3px var(--shadow-dark-yellow)}.search-btn:hover,.search-btn:focus{background-color:var(--btn-bg-hover-yellow)}.save-btn{align-self:flex-end}.add-bird-btn{color:var(--btn-font-clr-lightyellow);background-color:var(--btn-bg-green);box-shadow:inset 3px 3px 3px var(--shadow-light-green),inset -3px -3px 3px var(--shadow-dark-green)}.add-bird-btn:hover,.add-bird-btn:focus{background-color:var(--btn-bg-active-green)}.add-bird-btn:active{background-color:var(--btn-bg-active-green)}.observations-table{width:100%;border-collapse:collapse;margin-top:20px;border-radius:var(--border-radius-containers)}.observations-table th,.observations-table td{padding:.5rem}.observations-table tr:nth-child(2n){background-color:var(--table-even-rows)}.observations-table th{background-color:var(--bg-main);color:var(--shadow-dark-brown);text-align:left;border-radius:var(--border-radius-containers);box-shadow:inset 3px 3px 3px var(--shadow-light-brown),inset -3px -3px 3px var(--shadow-dark-brown)}