:root{
    --text-color:#455a64;
    --text-color-light:#f5f5f5;
    --tool-tip:black;
    --tool-tip-text:white;
    --shadow1:0px 0px 5px 0px #9E9E9E;
    --shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    --button:#37474f;
    --button-hover:#5e6d78;
    --response:#388e3c;
}
.stats_table > thead > tr > th, td{
    text-align: center;
}
.yearcatcher{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: calc((10vw / 9) * 8.3);
}
.yearcatcher span {
    width: calc(10vw / 9);
    height: calc(10vw / 9);
    outline: 1px solid #80808040;
    margin: 1px;
    outline-offset: -1px;
    border-radius: 1px;
    position: relative;
    cursor: pointer;
}
.yearcatcher span span {
    display: none;
    position: absolute;
    background-color: #3d6a8f;
    z-index: 9;
    color: white;
    width: max-content;
    height: max-content;
    padding: 5px 10px;
    bottom: 20px;
    right: 10px;
    text-align: center;
    box-shadow: 1px 1px 5px #80808040;
}
.yearcatcher span span p{
   padding: 0px;
   margin: 0px;
}

.yearcatcher span:hover span{
    display: unset;
}


.bars {
    height: 200px;
    position: relative;
    display: flex;
    align-items: flex-end;
    margin: auto;
}
.plot{
    margin-bottom: 15px;
}
.plot_bars {
    width: 40%;
    background: #2673b17d;
    display: inline-block;
    vertical-align: bottom;
    margin: 15px;
    box-shadow: 1px 1px 7px #00000047;
}
.plot_cont {
    height: 100%;
    width: calc(100% / 12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.plot_label {
    width: 100%;
    text-align: center;
}
a{
    color: unset;
}
.list_pen_print_value{
    display: none;
}
table.stick th{
    position: sticky;
    top: 90px;
    background: white;
}
table.stick{
    position: relative;
}
.main_add_buttons{
    display: flex;
    flex-direction: column;
}
.main_add_buttons a{
    margin: 5px 0px;
}
.addmany_one{
    position: absolute;
    top: -4px;
    right: 3px;
}
.addmany_two{
    height: 10px;
    position: absolute;
    top: 5px;
    right: -7px;
}
.close_many_form{
    background: red;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 1px 1px 5px #0000004f;
}
td.img-preview {
    position: relative;
    /* z-index: -9; */
}
td.img-preview span {
    position: absolute;
    display: none;
    bottom: 0px;
    z-index: 1;
}
td.img-preview:hover span {
    display: unset;
}
td.img-preview span img {
    width: 20vw;
    box-shadow: 1px 1px 5px black;
}
.listhead{
    position: relative;
    z-index: 1;
}
/*test for the drop down system*/
    .drop-menu{
        cursor: pointer;
        width: 30px;
        height: 30px;
        transition: all 300ms;
        box-sizing: border-box;
    }
    .drop-menu:hover{
        background-color: lightgrey;
    }
    .drop-menu i{
        margin: 3px 3px;
    }
    .drop-inner{
        width: 150px;
        z-index: 10;
        position: relative;
        box-sizing: border-box;
        padding: 5px 20px;
        box-shadow: 2px 2px 5px #51535466;
        background-color: #e8e8e8;
    }
    .drop-hidden{
        display: none;
    }
    .drop-inner a:hover{
        text-decoration: underline;
    }

    .mobtable{
        overflow: auto;
    }
    .herds_inline{
        display: inline-block;
    }
.card_color{
    background-color: #607d8b;
    box-shadow: var(--shadow);
    color: white;
}
.orig-select-month{
    display: none;
}
.orig-select-year{
    display: none;
}
th{
    cursor: pointer;
    
}
.up{
    text-decoration: underline;
}
.down{
    text-decoration: underline;
}
.up::after{
    content: '⯅';
  display:inline-block;
}
.down::after{
    content: '⯆';
  display:inline-block;
}
.logoimg{
    height: 75px;
    margin-top: 7px;
    background-color: #ffffffe6;
    border-radius: 10px;
    padding-top: 5px;
}
#search {
    width: 100%;
    margin: 17px auto;
    padding: 0px 20px;
    background-color: white;
    border-radius: 4px;
    color: black;
    font-size: 18px;
    box-sizing: border-box;
    vertical-align: top;
}
#searchadd{
    width: 500px;
}
#clear{
    position: absolute;
    right: 17px;
    top: 20px;
    font-size: x-large;
    color: red;
    font-weight: 500;
    font-stretch: extra-expanded;
    cursor: pointer;
}
.menuicon{
    display: none;
}
.close{
    position: relative;
}
.search{
    width: 85%;
    margin: auto;
    grid-column: 2;
}
.searchheight{
    height: 95vh;
}
.searchitems{
    width: calc(100% / 3 - 20px);
    display: inline-block;
    position: relative;
    color: black;
}
.searchitems span{
    position: absolute;
    font-size: 10px;
    top: -10px;
    left: 40px;
}
.searchit{
    background-color: #37474f2e;
    padding: 10px;
    text-align: center;
    margin: 10px 0px;
}
.mod_choice{
    max-width: 700px;
    
    padding: 20px;
    margin: 20px auto;
    background-color: #607d8b00;
    box-shadow: 1px 1px 5px slategrey;
    border-radius: 4px;
}
.mod_choice h3{
    font-size: 24px;
    text-align: center;
}
.mod_choice p{
    font-size: 16px;
    text-align: center;
}

.quarters{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.quarter{
    display: inline-block;
    width: calc(100% / 4 - 3px);
    background-color: #e0e0e0;
    /* text-shadow: 1px 5px black; */
    /* box-shadow: 1px 1px black; */
    border-bottom: 1px solid grey;
    padding: 5px;
    border-radius: 4px;
}
.quarter span{
    font-size: 12px;
}
.quarter h6{
    text-align: center;
}

#searches{
    padding: 10px;
    max-height: calc(100% - 80px);
    width: 100%;
    overflow: auto;
    background-color: white;
    box-shadow: 1px 1px 5px black;
    border-radius: 5px;
}

.priceset{
    width: calc(100% / 3 - 27px);
    text-align: center;
    padding: 10px;
    height: 400px;
    display: inline-block;
    vertical-align: top;
    background-color: #607d8b14;
    margin: 10px;
    box-shadow: 1px 1px 5px slategrey;
}
.priceset div{
    height: 265px;
    overflow: auto;
}
.packcow{
    width: calc(100% / 4 - 20px);
    padding: 20px;
    margin: 10px;
    display:inline-block;
    vertical-align: top;
    height: 400px;
}
.packlist{
    max-height: 260px;
    overflow: auto;
}
#menu{
    line-height: 45px;
    text-align: right;
    position: fixed;
    top: 80px;
    left: 10px;
}
#menu li{
    width: 80px;
    text-align: center;
    padding: 5px 5px;
    cursor: pointer;
    height: 57px;
    position: relative;
    margin: 15px 0px;
}
#menu li a i{
    width: 100%;
    color: black;
}
#menu li:hover{
    background-color: #8080804f;
}
#menu  li a span{
    color: black;
    font-size: 10px;
    position: relative;
    top: -32px;
}
.penbutton{
    display: inline-block;
    margin: 10px;
    /* background-color: #8080804f; */
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid lightgrey;
}
.buttonActive{
    border-bottom: 1px solid black;
}
.data{
    display: inline-block;
    width: calc(100% / 4 - 20px);
    margin: 10px;
    padding: 10px;
}

.pensize{
    height: 600px;
    overflow: auto;
    transition: all 1s ease-in-out;
    cursor: pointer;
}
.pensmall{
    height: 60px;
    overflow: hidden;
}
.slaughter{
    padding: 10px;
    text-align: center;
    color: white;
    width: calc(100% / 4 - 20px);
    margin: 10px;
    display: inline-block;
}
select{
    display: block;
    border: none;
    border-bottom: 1px solid #9e9e9e;
}
select:focus{
    outline:none;
}
.content{
    padding: 30px 0px;
}
.head{
    padding: 0px 20px;
    display: grid;
    grid-template-columns: 2fr 4fr 2fr;
    height: 90px;
    box-shadow: 1px 0px 5px darkslategrey;
}
.cow_card{
    width: calc(100% / 3 - 25px);
    margin: 10px;
    vertical-align: top;
    display: inline-block;
}
.stat{
    height: 200px;
    margin: 20px;
    width: calc(100% / 3 - 45px);
    display: inline-block;
    vertical-align: top;
}
.imagedel{
    position: relative;
    display: inline-block;
}
.del{
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: white;
    padding: 2px;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    text-align: center;
    transition: all 300ms;
}
.del:hover{
    background-color: #F44336;
    color: white;
}
.died{
    margin:10px auto;
    width: 400px;
    text-align: center;
    padding: 0px 5px;
    border: 1px solid red;
    border-radius: 4px;
    color: red;
}
.price{
    margin: auto;
    width: 400px;
    text-align: center;
    padding: 0px 5px;
    border: 1px solid black;
    border-radius: 4px;
    
}
.ingroup{
    margin:10px auto;
    width: 400px;
    text-align: center;
    padding: 0px 5px;
    border: 1px solid blue;
    border-radius: 4px;
    color: blue;
}
.addtogroup{
    max-width: 500px;
    width: 100%;
}
.groupadd{
    max-width: 500px;
    width: 100%;
}
#error{
    position: fixed;
    bottom: 20px;
    left: 10px;
    padding: 22px;
    transition: all 100ms;
    z-index: 31;

}
.autherror{
    text-align: center;
    padding: 20px;
    color: white;
    background-color: red;
    
}
.autherror h5{
    text-transform:none ;
}
.login{
    width: 300px;
    margin: auto;
    margin-top: 17vh;
    background-color: #eef3fb00;
    padding: 80px 20px;
    box-shadow: 50px 0px 30px -56px black, -54px 0px 30px -60px black;
}
.logologin{
    width: 100%;
    margin: auto;
}
.images{
    margin: 20px;
}
.underline_link{
    text-decoration: underline;
}
.underline_link:hover{
    text-decoration:none;
}
.showimage{
    height: 200px;
}
#progress{
    width: 500px;
    height: 24px;
    border: 1px solid black;
}
#amount{
    background-color: green;
    height: 100%;
    width: 0%;
    text-align: center;
    color: white;
    transition: all 500ms;
}
.response{
    width: 300px;
    height: 60px;
    margin: 10px 0px;
    z-index: 5;
    background-color: var(--response);
    color: var(--text-color-light);
    text-align: center;
    padding-top: 15px;
    font-size: 16px;
    font-weight: 300;
}
.error{
    background-color: red;
}
.menu-z{
    height: 63px;
    z-index: 5;
}
.menudrop{
    height: 63px;
    overflow: hidden;
    text-align: center;
    transition: all 300ms;
}
.menudrop:hover{
    height: unset;
}
.sticky{
    position: sticky;
    top:0px;
    z-index: 5;
}
.cattle-list-card{
    width: calc(100% / 2 - 23px);
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 2px 20px;
    min-height: 100px;
    margin: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid grey;
}
.underline{
    text-decoration: underline;
}
.cattle-update-date{
    position: absolute;
    bottom: -7px;
    left: 20;
    font-size: 10px;
}

.wide-area{
    width: calc(100% - 22px);
}
.view-actions{
    vertical-align:top;
    display: inline-block;
    width: calc(20% - 5px);
    margin-top: 80px;
    position: sticky;
    top: 100px;
}
.view-info{
    vertical-align:top;
    display: inline-block;
    width: calc(80% - 5px);
    margin-top: 30px;
}
.add-margin{
    margin: 5px 0px;
}
.btn-wide{
    width: 100%;
}
.adduser{
    width: calc(100% / 2);
    max-width: 300px;
}
.sorry{
    color: red;
    width: 500px;
    margin: auto;
    text-align: center;
    border: 1px solid red;
    border-radius: 4px;
    padding-bottom: 10px;
}
.inwidth{
    width: calc(100% / 3 - 25px);
    display: inline-block;
    height: 60px;
    vertical-align: top;
    margin: 10px;
}
@media screen and (max-width:993px){
    .inwidth{
        width: calc(100% - 25px);
    }
}
@media screen and (min-width:993px) and (max-width:1500px){
    .inwidth{
        width: calc(100% / 2 - 25px);
    }
}
@media screen and (min-width:1500px){
    .inwidth{
        width: calc(100% / 3 - 25px);
    }
}
td{
    white-space: nowrap;
}
/*this is the css that changes the scroll bar into a nicer looking scroll bar*/
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.726); 
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.726); 
}