@font-face {
    font-family: 'roboto_condensedregular';
    src: url('../fonts/robotocondensed-regular.eot');
    src: url('../fonts/robotocondensed-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/robotocondensed-regular.woff2') format('woff2'),
         url('../fonts/robotocondensed-regular.woff') format('woff'),
         url('../fonts/robotocondensed-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: 'ralewaymedium';
    src: url('../fonts/raleway-medium.woff2') format('woff2'),
         url('../fonts/raleway-medium.woff') format('woff'),
         url('../fonts/raleway-medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

a:link, a:visited {
    color:#000;
    text-decoration: none;
}

body {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    overflow:hidden;
    background-color: #2c3e50;
    min-width:360px;
    

}

.video-background {
  position: relative;
  width: 100%;
  height: 20vh;
  overflow: hidden;
}

::-webkit-scrollbar {
    /* width: 1em; */
    width: 12px;
}
   
::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
    background-color: rgba(255,255,255,0.4);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(44, 62, 80, 0.8);
    /* outline: 1px solid var(--fc-button-bg-color);  */
    border-radius: 5px;
}

  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--fc-button-bg-color);
}

::-webkit-scrollbar {
    cursor:pointer;
}


.scroll-container::-webkit-scrollbar { 
    width: 12px; 
} 

.scroll-container::-webkit-scrollbar-track { 
    background: #f1f1f1; 
} 

.scroll-container::-webkit-scrollbar-thumb { 
    background: #888; 
} 

.scroll-container::-webkit-scrollbar-thumb:hover { 
    background: #555; 
} 

.scroll-container::-webkit-scrollbar-button { 
    display: none; 
} 

.pagewrap, #bdrop {
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
}

#bdrop {
    
    filter: blur(4px);
    opacity: 0.8;
    /* background-color: #2d4a4b; */
    /* background: url(./media/bg1.webp) fixed 50% 50%;
    background-size: auto;
    background-position: 10% 0%;
    padding: 150px 0;
    position: relative; */

    background-image: url("../media/drop.webp");
  background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  
}

#bdrop.christmas {
    background-image: url('../images/christmastreeblack.webp');
    background-size: cover;
    background-repeat: no-repeat;
}

/* .pagewrap {
    transition: padding 0.5s linear;
} */

:root {
    --degs: -45deg;
    
}

.pagewrap:before {
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.9) 100%);
}

#backVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

#flang {
    float:right;
    height:32px;
    line-height:32px;
    width:130px;
}

#flang div {
    display: inline-block;
    vertical-align: top;
}

.logincontainer {
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    /* display:none; */
}

.loginleft {
    display:inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right:0px;
}

.loginright {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 50%;
    bottom: 0px;
    right: 0px;
    background-color: rgba(255,255,255,0.4);
    /* transition: left 0.5s linear; */
    display:none;
}

#loginrightclose {
    position: absolute;
    top: 20px;
    right: 20px;
    display:inline-block;
    vertical-align: top;
    background-color: #fff;
    width: 34px;
    height: 34px;
    font-size: 25px;
    font-weight: bolder;
    font-family: roboto_condensedregular;
    color: #000;
    cursor:pointer;
    text-align: center;
    border-radius:5px;
    display:none;
    z-index:2;
}

.inputcontainer {
    width:40vw;
    min-width: 320px;
    position:absolute;
    top:50%;
    left:50%;
    height:fit-content;
    transform:translate(-50%,-50%);
    border-radius:5px;
    background-color: rgba(255,255,255,0.9);
}

.rotmobwrap {
    position:relative;
    display: none;    
    width: 50%;
    max-width:200px;
    vertical-align: middle;
    height:200px;
}

.rottext {
    position:absolute;
    top:60%;
    width:100%;
    height:auto;
    float:right;
    text-align: center;
}

.rotmob {
    position:absolute;
    display: block;
    left:calc(50% - 25px);
    top:calc(50% - 45px);
    width:50px;
    height:50px;
    background-image: url('../images/phone.webp');
    background-repeat: no-repeat;
    /* background-size: contain; */
    /* background-position: center; */
    background-size: 50px;
    animation: rotmob 5s linear infinite;
}

@keyframes rotmob {
    0%   {transform:rotate(-90deg);}
    30% {transform:rotate(0deg);}
    60% {transform:rotate(0deg);}
    90% {transform:rotate(-90deg);}
    100% {transform:rotate(-90deg);}
  }

.inputwrap {
    position:relative;
    padding: 5px;
    text-align: center;
    min-width: 250px;
    margin:0 auto;
    width: 100%;
    box-sizing: border-box;
}

.footcontainer {
    display:inline-block;
    position:absolute;
    bottom:0px;
    height:25px;
    width:100%;
    text-align: center;
    line-height:25px;
    color:#000000;
    font-family: roboto_condensedregular;
    font-size: 16px;
    text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff
}

#alogin, #aemail, #apen, #areset {
    margin-top:15px;
    height:45px;
    background-color: var(--fc-button-bg-color);
    border-color: var(--fc-button-border-color);
    color: var(--fc-button-text-color);
}

#alogin {
    background-color: #2c3e50;
    color:#fff;
}

#aback,#aemail {
    width:45%;
    background-color: #2c3e50;
    color: #fff;
}

#aemail {
    background-color: rgba(187, 49, 49, 1)
}

#aback,#aemail, #apen, #areset {
    display:inline-block;
    vertical-align: top;
    height:45px;
    width: 47%;
    margin: 15px 3px 0 3px;
}

#areset {
    display:none;
}

#onelogin {
    display:none;
    width:100%;
    height: auto;
    background-color: rgba(255,255,255,1);
    font-family: roboto_condensedregular;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 5px;
    padding-bottom: 5px;
    text-align: center;
    min-width: 250px;
    
}

#onelogin #onebelow {
    font-size:14px;
    padding: 0 2px;
}

#onelogin label {
    text-align: center;
    font-size: 16px;
    padding:0 5px 0 5px;
}

#onetimeOk, #onetimeGo {
    background-color: var(--fc-button-bg-color);
    border-color: var(--fc-button-border-color);
    color: var(--fc-button-text-color);
}

.row, .rowbox {
    text-align: center;
}

#seepass {
    position: absolute;
    right: 20px;
    top: 8px;
    width:20px;
    height:20px;
    background-image: url(../images/preview.webp);
    background-repeat: no-repeat;
    background-position: center;
     background-size: contain;
     cursor:pointer;
}

#aloginnamewrap.rowbox, 
#aloginpasswrap.rowbox,
#aloginemailwrap.rowbox,
#aloginelidnrwrap.rowbox,
#aloginpinwrap.rowbox,
#anewpasswrap.rowbox,
#anewconpasswrap.rowbox
{
    box-sizing: border-box;
    padding: 0 0 0 40px;
    position:relative;
    margin: 0px;

}

#aloginname, #aloginpass {
    border:none;
    outline: none;
    width: -webkit-fill-available;
    box-sizing: border-box;
}

#anewpasswrap.rowbox, 
#anewconpasswrap.rowbox 
{
    display:none;
}

#aloginemailwrap.rowbox,
#aloginelidnrwrap.rowbox
{
    margin:0 10px;
}


#loginconf.rowbox,
#loginpinconf.rowbox
{
    /* padding: 0 auto; */
    font-size:0px;
    display:none;
}

#loginpinconf.rowbox {
    display:block;
}

#appcon, #forpass, #register {
    display:inline-block;
    /* width: 31.3%; */
    width: 47%;
    cursor:pointer;
    margin: 10px 5px 0 5px;
}

/* #forpass {
    display:inline-block;
    width:55%;
    cursor:pointer;
} */

.forgar {
    text-align: center;
    margin:10px auto;
    font-size: 16px;
    width: 96%;
    font-family: roboto_condensedregular;
}

#forpass > #retpass
/* ,#register > #retreg */
 {
    width: 97%;
    height: 32px;
    display: block;
    transition: none;
    border: 1px solid rgba(174, 169, 169,0.4);
    border-radius: 5px;
    background-color: #ffffff;
    margin: 5px auto;
    font-family: roboto_condensedregular;
    font-size: 14px;
    line-height: 30px;
}

#register > #retreg {
    display:none;
}

label {
    display:block;
    font-family: roboto_condensedregular;
    font-size: 16px;
    text-align: left;
    max-width: 500px;
    /* height:34px; */
    line-height: 34px;
}

input[type='text'],input[type='number'],input[type='date'] ,input[type='button'] ,input[type='file'] ,input[type='password'], select {
    height:34px;
    width:100%;
    border-radius: 5px;
    /* margin:5px 0; */
    font-family: roboto_condensedregular;
    font-size: 16px;
    background-color: #ffffff;
    outline: none;
    border:none;
} 

input[type='number'], 
[id^=weighdate_],
[id^=weighage_] {
    /* height: 34px;
    margin-top: 5px; */
    padding: 0px 0px 0px 5px;
    /* width: 110px; */
    box-sizing: border-box;
}

 .brow div[id^=weighage_], 
 .brow div[id^=weighdate_] {
    width:110px;
    line-height: 34px;
    vertical-align: text-bottom;
}

input[type='button'][id$=Ok] {
    background-color: #B83131;
    color: #ffffff;
}

input[type='button']:disabled,
button[disabled]{
    opacity:0.4;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/*Reports*/

#reportmenu {
    position:absolute;
    display:inline-block;
    height:calc(100% - 50px);
    vertical-align: top;
    width: 220px;
    z-index:1;
    background-color: #aea9a9;
    
}

.reportmainset {
    position:relative;
    display:inline-block;
    height:calc(100% - 50px);
    overflow-y:auto;
    vertical-align: top;
    width:calc(100vw - 190px);
}

#reportoptions {
    background-color: #707070;
    border-radius:5px;
    height:300px;
    position: absolute;
    bottom: 5px;
    left:5px;
    right:21px;
}

#reportmenu #reportoptions {
    height:130px;
    text-align: center;
    
}

#Sorts,
#Columns,
#Build {
    
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center right;
    text-align: left;
}

#Sorts {
    background-image: url("../images/sortboth.webp");
}

#Columns {
    background-image: url("../images/column.webp");
}

#Build {
    background-image: url("../images/download.webp");
}

#repopmin {
    position:absolute;
    right:0px;
    width: 15px;
    top:calc(50% - 100px);
    height: 200px;
    background-image: url('../images/goleft.webp');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
}

#repopmin:hover {
    background-color: rgba(146, 71, 71, 0.7);
    cursor:pointer;
}

#pagefolder {
    position:absolute;
    width: 100%;
    height: 100%;
    overflow:auto;
    background-color: rgba(52, 52, 52,0.7);    
}

.page {
    
    width:595px;
    height:842px;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
}

#ZoomIn, #ZoomOut {
    width: 47.5%;
    height:40px;
}

.carslide {
    width: 60%;
    height: 60%;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    cursor:pointer;
    transition: all 0.5s linear;
    /* background-image: url('../images/studcom.webp'); */
}

.acar {
    position:absolute;
    top:33%;
    height:30%;
    width:40px;
    background-image: url("../images/rcar.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 390px;
    cursor:pointer;
}

.acar:hover {
    background-size: 40px 590px;
}

#carleft {
    left:0px;
    transform:rotate(180deg)
}

#carright {
    right:0px;
}




/*Carosel END */

/* weather */
  
    #weather {
        display:none;
    }

  .cities {
    display:block;
  }
  
  .city {
    position: relative;
    width: 100%;
    height: 140px;
    box-sizing: border-box;
    margin-bottom: 13px;
    border: 1px none;
    line-height: 40px;
    border-radius: 5px;
    font-family: 'roboto_condensedregular';
    margin-top: -10px;
  }

  #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(5) > div {
    padding:1px;
  }
  
  .figcaption {
    /* text-transform: uppercase; */
    letter-spacing: 0.05em;
    position: absolute;
    bottom: 5px;
    left: 0px;
    white-space: nowrap;
    width:100%;
    /* transform: translate(-50%); */
  }

  .figcaption::first-letter {
    text-transform: capitalize;
  }
  
  .city-temp {
    font-size: 2.5vw;
    color: rgb(187, 49, 49);
    position: absolute;
    top: 8px;
    right: 20px;
    height: 90px;
    line-height: 100px;
  }
  
  #weatherpan > div.city-temp > sup {
    font-size: 1.5vw;
  }

  .city sup {
    font-size: 0.5em;
  }
  
  #weatherpan > div.city-name {
    position: absolute;
    top: 5px;
    left: 20px;
  }

  #leavewrap {
    border-radius: 5px;
    height:360px;
    padding: 10px;
    background-color: #ffffff;
  }

  #leavewrap #leavemap {
    height: 100%;
  }

  #weatherwrap #daywrap,
  #weatherwrap #feelstats {
    margin-bottom:20px;
  }

  .city-name sup {
    display:none;
    padding: 0.1em 0.8em;
    border-radius: 30px;
    color: #fff;
    background: orangered;
    line-height: 20px;
    font-size: 0.6vw;
    display:none;
  }
  
  .city-icon {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  #weatherpan > div > div.city-name {
    padding:10px 0px 0px 20px;
    text-align: left;
  }

  .city-ico-place {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 125px;
    width: 125px;
  }

  #weatherpan > li > h2 > span {
    top: 8px;
    position: absolute;
  }

  #weatherpan .weatherblank {
    display:block;
    width:130px;
    height:130px;
    transform: translate(-41%, -42%);
  }

/*weather options*/
#leavemap > div.leaflet-control-container > div.leaflet-top.leaflet-right > div:nth-child(2) > a {
    background-image: url('../images/weather-conditions.webp');
    background-repeat: no-repeat;
    background-size: contain;
}

/*Map options*/
#leavemap > div.leaflet-control-container > div.leaflet-top.leaflet-right > div:nth-child(1) > a {
    background-image: url('../images/map-layers.webp');
    background-repeat: no-repeat;
    background-size: contain;
}

#weatherwrap > div > div[class^="col"] {
    margin: 0.5rem 1%;
    border-radius: 5px;
}

#ltst0 {
    position:relative;
    width: auto;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

#ltstinner {
    height:100%;
    background-color: rgba(255,255,255,0.5);
}

#ltst0 > #wsym {
    width: 120px;
    position: absolute;
    left: 20px;
    top:-5px;
}

#ltst0 > #wtempmax {
    position: absolute;
    left: 150px;
    top: 14px;
    font-size: 60px;
    color: rgb(187, 49, 49);
}

#ltst0 > #wtempmax > sup {
    font-size: 25px;
}

#ltst0 > #wwind {
    position: absolute;
    left: 250px;
    top: 30px;
}

#ltst0 > #whumid {
    position: absolute;
    left: 250px;
    top: 55px;
}

#ltst0 > #wdescription {
    position: absolute;
    right: 40px;
    top: 80px;
}

#ltst0 > #wdescription:first-letter {
    text-transform:capitalize;
}

#ltst0 > #wday {
    position: absolute;
    right: 40px;
    top: 20px;
    font-size: 25px;
}

#ltst0 > #wdate {
    position: absolute;
    right: 40px;
    top: 57px;
}

#ltst0 > #tempwrap
{
    position:absolute;
    top:115px;
    left: 50%;
    width: 100%;
    transform: translate(-50%);
}

#wd0 {
    background-image: url('../images/weather.webp');
    background-repeat: repeat-x;
    background-size: contain;
    height: 88vh;
}

#tempwrap .ltstinner {
    border-bottom:2px solid #2c3e50;
    height:100px;
    display:inline-block;
    position:relative;
    margin:0 auto;
    width:20px;
    transition: width 0.5s ease-in;
}

#tempwrap .ltstinner #wsym {
    display:block;
    margin: -10px 25px -10px 25px;
    bottom:20px;
}

#tempwrap #wtempmax {
    position: absolute;
      left: 50%;
    transform: translate(-50%);
    font-size: 16px;
    width:50px;
}

.wfit {
    width:fit-content;
    display:inline-block;
    margin:10px 20px;
    border-radius:5px;
    background-color: white;
    height:250px;
    visibility:hidden;
    vertical-align: top;
}

#lar2,#lar3 {
margin-top:-10px;
}

#wday {
    display:block;
    width:100%;
    margin-top: 10px;
}

#wsym {
    margin-top: 15px;
}

#wtempmin, #wtempmax {
    width: 45%;
    display: inline-block;
}

.currentday #wcity {
    margin-top:10px;
}

.currentday #wcity,.currentday #wday {
    text-align: left;
    line-height: 25px;
    margin-left: 25px;
}

.currentday #wday,.currentday #wtime,
.currentday #wind,.currentday #wwind,
.currentday #feel,.currentday #wfeel,
.currentday #humid,.currentday #whumid
{
    width:125px;
    display: inline-block;
    line-height: 25px;
    margin-top:0px;
}

.currentday #wind,
.currentday #feel,
.currentday #humid {
    text-align: left;
}

.currentday #wwind,
.currentday #wfeel,
.currentday #whumid {
    text-align: right;
}

.currentday #wtime {
    text-align: right;
    margin-right: 25px;
}

.currentday #wtempmax {
    width: 160px;
    display: inline-block;
    vertical-align: top;
    font-size: 35px;
    text-align: left;
    margin-top: 5px;
}

.currentday #wsym {
    display: inline-block;
    margin-top:-15px;
    vertical-align: top;
    
}

.currentday {
    width:300px;
    min-width:300px;
    position:relative;
}

#tempwrap #wtime {
    position: absolute;
    top: 102px;
    left: 50%;
    transform: translate(-50%);
    line-height:20px;
}

#tempwrap #wrain {
    position: absolute;
    top: 15px;
    left: 75%;
    transform: translate(-50%);
    line-height:20px;
}

#tempwrap .sinner {
    display:none;
}

#colorback {
    width: 100%;
    position: absolute;
    bottom: 0px;
    border-top:2px solid #bb3131;
}

#ltst0 > #daywrap {
    position:absolute;
    bottom:0px;
    left: 50%;
    top:260px;
    width: 100%;
    height: 140px;
    transform: translate(-50%);
    /* background-color: blue; */
}

#daywrap .ltstinner {
    border:1px solid #2c3e50;
    height:120px;
    width:100px;
    display:inline-block;
    position:relative;
    margin:0px 4px;
    vertical-align: top;
}

#daywrap .ltstinner > #wday {
    line-height:30px;
}

#daywrap .ltstinner > #wsym {
    margin-top:-20px;
}

#daywrap .ltstinner #wtempmax {
    line-height:20px;
    width: 50px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
 
#daywrap .ltstinner #wtempmin {
    line-height:20px;
    width: 50px;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/*select */

select,
select::before,
select::after {
  box-sizing: border-box;
}

select {
    /* A reset of styles, including removing the default dropdown arrow */
    /* appearance: none; */
    /* Additional resets for further consistency */
    /* background-color: transparent;
    border: none; */
    /* padding: 0 0 0 10px; */
    margin: 0;
    width: 100%;
    font-family: roboto_condensedregular;
    font-size: 16px;
    cursor: pointer;
    /* line-height: inherit; */
  }

  select::-ms-expand {
    display: none;
  }

/*switch*/

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(133,128,128,0.2);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 5px;
    border:none;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #2c3e50;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 5px;
  }

  
  input:checked + .slider:before {
    background-color: white;
  }
  
  input:checked + .slider {
    background-color: #207f22;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #207f22;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  .switchwrap .switch_on, .switchwrap .switch_off, .switchwrap .switch {
    display:inline-block;
    vertical-align: top;  
  }

  .switch_on, .switch_off {
    height:34px;
    line-height: 34px;
    width:auto;
    font-size:16px;
    padding:0px 5px 0px 5px;
  }

  .switch_on {
    color:#207f22;
  }

  .switch_off {
    color:#B83131;
  }

  #actcalopt > div.switch_off { /*always on*/
    color:transparent;
  } 


/*Switch end*/

#aloginnamewrap {
    background-image: url('../images/profile.webp');
    margin-bottom:5px;
}

#aloginpasswrap, #anewpasswrap, #anewconpasswrap {
    background-image: url('../images/key.webp');
}

#aloginelidnrwrap {
    background-image: url('../images/number.webp');
    margin-bottom:5px;
}

#aloginemailwrap {
    background-image: url('../images/mail.webp');
    margin-bottom:5px;
}

#aloginpinwrap {
    background-image: url('../images/pin.webp');
    margin-bottom:5px;
}

#aloginnamewrap, 
#aloginpasswrap,
#anewpasswrap,
#anewconpasswrap,
#aloginelidnrwrap,
#aloginemailwrap,
#aloginpinwrap
{
    background-repeat: no-repeat;
    background-position:7px;
    background-size: 30px;
    border:1px solid #aea9a9;
    border-radius: 5px;
    background-color: #ffffff;
    
}

#aloginnamewrap, 
#aloginpasswrap {
    width:47%;
    display:inline-block;
}

#inputemail {
    min-width:340px;
    max-width: 500px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}

#inputemail label,
#showfilters label
{
    margin-left:10px;
    line-height: 24px;
}

#respin {
    margin:5px 0px 5px 0px ;
    display:inline-block;
    vertical-align:middle;
    font-size: 2rem;
}

.rescopy {
    display:inline-block;
    vertical-align:middle;
    background-image: url('../images/copy.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width:34px;
    height:35px;
    margin-left:10px;
    cursor:pointer;
    background-color: #FFF;
    border:1px solid #aea9a9;
    border-radius: 5px;
}

input[type='button'] {
    width:96%;
    cursor:pointer;
    transition: all 0.2s linear;
}

#reportoptions input[type='button'] {
    margin-top: 3px;
}

#mainmenu {
    position:absolute;
    z-index:1010;
    width:80px;
    height:100vh;
    top:0px;
    left:0px;
    background-color:#c0c5cb;
    display:none;
    transition: all 0.2s linear;
}

#mainmenu:before {
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%,rgba(255, 255, 255, 0.9) 100%);
}

.timertext {
    display:none;
    font-size: 13px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 80px;
}

#topmenu {
    display:none;
}

.logocontainer {
  height: 20vh;
  max-width: 450px;
  margin: 0 auto;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 1.5s ease;
}

.logocontainer.visible {
  opacity: 1;
}

.coin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: coinFlipIn 4s ease forwards;
  opacity: 0;
}

.logocontainer.visible .coin {
  opacity: 1;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35%;
  backface-visibility: hidden;
}

.front {
  background-image: url('../images/studcom.webp');
}

.back {
  background-image: url('../images/studcom.webp');
  transform: rotateY(180deg) scaleX(-1);
  filter: brightness(0.85);
   
}

/* Coin flip in place with eased acceleration and slow down at end */
@keyframes coinFlipIn {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-1080deg);
  }
}



#smalllogo {
    background-image: url('../images/studcom.webp');
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 35px;
    position: absolute;
    top: 10px;
    left: 10px;
}   

#socount {
    margin:10 0;
}

#mainmenu .logocontainer {
    position: absolute;
    height: 60px;
    width: 200px;
}

 
#mainmenu .leavebar {
    position: absolute;
    right: -10px;
    top:0px;
    width: 15px;
    height: 100vh;
    z-index:1000;
    display:block;
}

#mainmenubutton {
    position: absolute;
    height: fit-content;
    left:20px;
    width:fit-content;
    text-align:center;
    padding-top: 10px;
    transition:left 0.3s linear;
}

.menubreak {
    display:none;
    margin: 0 auto;
    position: relative;
    font-family: 'roboto_condensedregular';
    font-size: 16px;
    border-radius: 5px;
    line-height: 30px;
    
}

#editmenuheadwrap > div:nth-child(2) {
    height: auto;
    font-size: 1.2rem;
    line-height: 30px;
    border-bottom: 1px solid #bb3131;
    border-radius:0px;
    padding:5px 0px;
}

.menubreak > label, .menubreak > span {
    padding-left: 5px;
}

#mainmenu > div.menubuttonwrap > div.row > div.menubreak.titlepanel

 {
    text-align: center;
    padding-left:10px;
    margin-bottom:0px;
}

#topmenubreak > span, #middlemenubreak > span {
    height: 28px;
    display: block;
    font-size: 1.2rem;
    line-height: 30px;
}

#editmenuheadwrap {
    display:none;
}

.menuoptpos {
    display: inline-block;
    position: relative;
    width: 305px;
    border: 1px solid red;
    border-radius: 5px;
    height: 77px;
    vertical-align: top;
    margin: 0px 5px 5px 5px;
}

.menueditopt {
    display: inline-block;
    position: relative;
    width: 155px;
    /* border: 1px solid red; */
    border-radius: 5px;
    margin: 5px;
}

#menuslide {
    margin-top: 66px;
    height: calc(100vh - 100px);
    position:relative;
    border-right:1px solid #bb3131;
}

#menusavewrap {
    border:none;
    text-align: right;
    font-size:16px;
}

#mainmenuesave, #mainmenuecancel {
    width:200px;
    display:inline-block;
    vertical-align:middle;
    margin-right:5px;
}

.menubuttonwrap {
    width: 100%;
    box-sizing: border-box;
    height: fit-content;
    overflow: hidden;
    font-size:0px;
    margin-bottom:10px;
    
}

.extrabuttonwrap {
    width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
}

.menusplit {
    border-top: 1px solid #bb3131;
    /* border-top: 2px solid #2c3e50; */
    margin-bottom:5px;
}

#mopener:hover {
    background-color: #fff;
}

#mopener img {
    padding-right:38px;
}

.menubutton {
    position:relative;
    display:block;
    height:32px;
    background-color: #ffffff;
    margin: 0 5px 5px 12px;
    border-radius: 5px;
    font-family: 'roboto_condensedregular';
    font-size:16px;
    cursor:pointer;
}

.mbselected  {
    background-color: var(--fc-button-bg-color);
    border-color: var(--fc-button-border-color);
    color: var(--fc-button-text-color);
    /* box-shadow: 5px 5px 5px rgba(58, 53, 53,0.5); */
}

.mbselected img  {
    /* filter: invert(39%) sepia(10%) saturate(3533%) hue-rotate(314deg) brightness(87%) contrast(116%); */
    filter: brightness(0) invert(1);
}

.menubutton img {
    position: absolute;
    left: 16px;
    bottom: 2px;
    height: 30px;
    width: 30px;
}

.menubutton .mbtext {
    /* display: block; */
    position: absolute;
    right: 15px;
    bottom: 4px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    width: 75px;
    text-align: center;
}

#more {
    display:none;
}

.hpanel, .hpanels, .hpanelt, 
.spanelt, .hpanelr, .wpanelt {
    display:block;
    height:auto;
    background-color: rgba(255,255,255,0.7);
    border:1px none;
    line-height:34px;
    border-radius: 5px;
    font-family: 'roboto_condensedregular';
    font-size:16px;
    padding:10px;
    min-height:300px;
    box-sizing:border-box;
    
}

.hpanels, .hpanelr {
    width:100%;
    height: 125.26px;
    padding:10px;
    min-height:unset;
    box-sizing:border-box;
    margin-bottom:13px;
    position:relative;
}

.hpanelt {
    min-width:260px;
    width:fit-content;
    height: 50px;
    padding:10px;
    min-height:unset;
    box-sizing:border-box;
    cursor:pointer;
    display:inline-block;
    margin: 0 10px;
}

.spanelt {
    min-width:230px;
    width:fit-content;
    height: 45px;
    min-height:unset;
    cursor:pointer;
    display:inline-block;
    margin: 0 6px;
}

.wpanelt {
    width: 100%;
    margin: 0px;
    height: 45px;
    min-height:unset;
    box-sizing:border-box;
    background-color: white;
    line-height: 25px;
    font-size: 23px;
    text-align: left;
    margin: auto 20px;
    width: calc(100% - 40px);
   
}


#pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 {
    margin: 0.5rem 2%;
}

.hpbrd {
    display:none;
    text-align: center;
    color: var(--fc-button-bg-color);
    background-color: var(--fc-button-text-color);

    min-height: 30px;
    line-height: 30px;
    margin-bottom: 3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #e5352e;
}

.hpanelt > .hpsn {
    font-size: 2.4vw;
    float: left;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    margin: 0 10px;
    top:0px;
}

.row > .smp {
    margin: 0rem 2.9% 1rem 2.9%;
    width:100%;
}

.row > div.smp:first-of-type {
    margin-left:0px;
}

.row > div.smp:last-of-type {
    margin-right:0px;
}

/* #infodash
{
    margin: 0 2% 0.5rem 2%;
} */

.titlepanel {
    position:relative;
    display:block;
    height:50px;
    background-color: rgba(255,255,255,0.7);
    line-height:50px;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    font-family: 'roboto_condensedregular';
    font-size:16px;
    margin: 0 0 5px;
}

.bannerpanel {
    position:relative;
    display:block;
    height:50px;
    background-color: rgba(255,255,255,0.7);
    line-height:50px;
    border-radius: 5px;
    font-family: 'roboto_condensedregular';
    font-size:16px;
    /* box-shadow: 5px 5px 5px rgba(58, 53, 53,0.5); */
}

#sysinfo {
    position: absolute;
    top: 22px;
    right: 52px;
    width: 20px;
    height: 20px;
    background-image: url('../images/info.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius:5px;
}

#votd {
    width: 90%;
    background-color: aliceblue;
    margin: 0 auto;
    border-radius: 5px;
    padding: 5px;
    background-image: url('../media/verseoftheday.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: bottom;
}

#votd div {
    background-color: rgba(255, 255, 255, 0.5);
}

#sysinfowrap {
    height:200px;
    overflow:hidden;
    overflow-y:auto;
    padding-bottom:20px;
}

.topper {
    
    width: fit-content;
    margin: 0 auto;
    margin-top: 20px;
    text-decoration: underline;
}

#dashview {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 40px;
    height: 40px;
    background-image: url(../images/view1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
    border: 1px solid #aea9a9;
    border-radius: 5px;
}

#rmis {
    width: 115px;
    height: 60px;
    /* background-color: red; */
    position: absolute;
    right: 30px;
    top: 33px;
    text-align: right;
    font-size: 30px;
    background-image: url(data:image/png;base64,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);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #b4b4b4;
    border: 1px solid #a02520;
    border-radius:5px;
    transition: all .2s ease-in-out; 
    display:none;
}

/* #rmis:hover {
    cursor:pointer;
    transform: scale(1.1); 

} */

#dropset,#dropbar {
    display:none;
    width:80px;
}

.flip {
    position:absolute;
    backface-visibility:         hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:      hidden;
    -webkit-backface-visibility: hidden;
    transform-origin:            50% 50% 0px;
    -moz-transform-origin:       50% 50% 0px;
    -ms-transform-origin:        50% 50% 0px;
    -o-transform-origin:         50% 50% 0px;
    -webkit-transform-origin:    50% 50% 0px;
    transition:                  all 3s;
    -moz-transition:             all 3s;
    -ms-transition:              all 3s;
    -o-transition:               all 3s;
    -webkit-transition:          all 3s;
}

#stats {
    border: 1px solid #000;
    background-color: #fff;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 15px;
    bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all .5s linear;
    display:none;
    background-image: url('../images/barchart.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 87%;
    z-index: 2;
    display: none;
}

#statev {
    position:absolute;
    bottom: 10px;
    width: 100%;
}

#statev div {
    width: fit-content;
    height: 10px;
    display: inline-block;
    color: rgb(55, 61, 63);
    font-size: 12px;
    font-weight: 400;
    font-family: Helvetica, Arial, sans-serif;
    vertical-align: middle;
    cursor:pointer;
}

#curstat {
    margin-right: 4px;
}

#curstat .curcol {
    width:12px;
    height:12px;
    background-color: rgb(0, 143, 251);
    margin-right: 4px;
}

#notstat .curcol {
    width:12px;
    height:12px;
    background-color: rgb(0, 227, 150);
    margin-right: 4px;
}

#dashcenterstatsarea .apexcharts-legend-series {
    text-align: justify;
}

#hcontainerback div[id^='apexcharts'] {
    position:absolute;
    top:20px;
}

#hcontainer, #dashcentercol {
    transform: rotateY( 0deg );
}

#hcontainerback, #dashcentercolback {
    transform: rotateY( 180deg );   
}

#baserowwrap {
    transform: rotateX( 0deg );
}

#baserowwrapback {
    transform: rotateX( 180deg );   
}

#baserowwrapbackinner {
    position: absolute;
    height: 92%;
    width: calc(100% - 20px);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    left: 50%;
    top: 4%;
    transform: translate(-50%);
}

.flip-side-1 {    
    transform:             rotateY( 0deg ) !important;
        -moz-transform:    rotateY( 0deg ) !important;
        -ms-transform:     rotateY( 0deg ) !important;
        -o-transform:      rotateY( 0deg ) !important;
        -webkit-transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform:             rotateY( 180deg ) !important;
        -moz-transform:    rotateY( 180deg ) !important;
        -ms-transform:     rotateY( 180deg ) !important;
        -o-transform:      rotateY( 180deg ) !important;
        -webkit-transform: rotateY( 180deg ) !important;
} 

.flip-down-1 {    
    transform:             rotateX( 0deg ) !important;
        -moz-transform:    rotateX( 0deg ) !important;
        -ms-transform:     rotateX( 0deg ) !important;
        -o-transform:      rotateX( 0deg ) !important;
        -webkit-transform: rotateX( 0deg ) !important;
}

.flip-down-2 {
    transform:             rotateX( 180deg ) !important;
        -moz-transform:    rotateX( 180deg ) !important;
        -ms-transform:     rotateX( 180deg ) !important;
        -o-transform:      rotateX( 180deg ) !important;
        -webkit-transform: rotateX( 180deg ) !important;
} 

#facebwrap {
    position:absolute;
    right:0px;
    height:313px;
}

/*New Dashboard*/

#prebreed {
    position:relative;
    display:block;
    height:135px;
    /* margin: 0.1rem 2%; */
    margin-bottom: 10px;
}

#prebreedTA {
    position:relative;
    /* display:none; */
}

#mydetail {
    display: none;
    width: 200px;
    height: 34px;
    background-image: url(../images/contact-information.webp);
    background-repeat: no-repeat;
    background-position: 5px;
    background-size: contain;
    cursor: pointer;
    padding-left: 40px;
    outline: none;
    border:none;
}

#itsme {
    position: absolute;
    top: 10px;
    right: 19px;
}

#predash {
    display:none;
    margin-top:-1px;
    border-top-left-radius: 0%;
}

#predash .hpanel {
    text-align: left;
    background-color: transparent;
    
}

#prebreed #hslide .spanelt {
    height: 50px;
    padding: 0 10px;
}

#infodash {
    display: grid;
    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    
    grid-template-rows: 275px 170px 275px;
    
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    padding: 15px;
    box-sizing: border-box;
}

div[class^='infocard'] {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    font-family: 'ralewaymedium';
    font-size: 16px;
    color: #000;
    min-height:130px;
    width:100%;
    position: relative;

}

div[class^='infocard'] .loader {
    position:absolute;
    display:none;
    right: 10px;
    bottom: 8px;
    width: 20px;
    height: 20px;
}

.infocard1 { grid-area: 1 / 1 / 3 / 4;   height:275px;}
.infocard2 { grid-area: 1 / 4 / 3 / 10;  height:275px;}
.infocard3 { grid-area: 1 / 10 / 3 / 13; height:275px;}
.infocard4 { grid-area: 2 / 1 / 3 / 4;   height:170px;}
.infocard5 { grid-area: 2 / 4 / 3 / 7;   height:170px;}
.infocard6 { grid-area: 2 / 7 / 3 / 10;  height:170px;}
.infocard7 { grid-area: 2 / 10 / 3 / 13; height:170px;}
.infocard8 { grid-area: 3 / 1 / 3 / 4; height:275px;}
.infocard9 { grid-area: 3 / 4 / 3 / 7; height:275px; }



#infograph {
    height: 200px;
    position: relative;
    overflow: hidden; /* or auto */
    z-index: 1;
}

#sectgraph {
    height: 215px;
    width:100%;
    min-width: 250px;
    position: relative;
    overflow: hidden; /* or auto */
    z-index: 1;
}

#inforange {
    width: 100%;
    height: 25px;
    font-size: 0px;
}

#phenoChart
{
    height: 40px;
    width:100%;
    margin-top: 40px;
    /* min-width: 300px; */
    position: relative;

    z-index: 1;
}

.custom-tip {
  position: absolute;
  height:20px;
  background: #fff; /* matches ECharts style */
  font-family: 'ralewaymedium';
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 9999;
  cursor:default;
}

.hbar {
    position:absolute;
    background-color: #e6e4e4;
    height:40px;
    top:0px;
    left:50%;
    transform: translate(-50%, 0%);
    width:2px;
    cursor:pointer;
}

.hrbar {
    position:absolute;
    height:40px;
    top:0px;
    width:2px;
    transition: filter 0.3s ease;
}

.hrbar:hover {
     filter: brightness(1.1); 
}

.pledgend {
    position: absolute;
    top: 10px;
    height: 25px;
    width: calc(100% - 20px);
    text-align: center;
}

.hleft,
.hcenter,
.hright
{
    position: absolute;
    top: 50px;
    left: 10px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    cursor:pointer;
}


.median {
    position: absolute;
    width:2px;
    height: 100%;
    background-color: red;
}

.median:hover {
    filter: brightness(1.1); 
    width: 3px;
    left:-2px;
}

#ptooltip {
  position: absolute;       /* now relative to #phenoChart */
  top: 10px;                /* fixed offset inside chart */
  left: 10px;
  background: rgba(50, 50, 50, 0.9);
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  z-index: 2;               /* above chart elements */
  /* display: none; */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  visibility: hidden;
}

#rangeleft,#rangegap,#rangeright,
#prangeleft,#prangegap,#prangeright {
    display:inline-block;
    vertical-align: top;
    height:25px;
    width:30px;
}

#rangegap,
#prangegap {
    width:100px;
    /* width:fit-content; */
    font-size: 16px;
    line-height: 25px;
}

#rangeleft,
#prangeleft {
    background-image: url('../images/goleft.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
}

#rangeright,
#prangeright {
    background-image: url('../images/goright.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
}

div[class^='infocard'] .preinf
 {
    width: calc(100% - 10px);
    height: 40px;
    left: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    /* box-sizing: border-box; */
    background-color: rgba(129, 125, 125, 0.1);
    text-align: left;
    position: absolute;
    bottom: 0;
    border-bottom: 1px solid #b4b4b4;
    font-family: 'ralewaymedium';
    line-height: 40px;
    padding-left: 10px;
}

#inftop {
    text-align: left;
    font-size: 0px;
    background-color: rgba(129, 125, 125, 0.1);
    padding-top: 5px;
    border-radius: 5px;
    margin-bottom: 10px;

}

#inftop:hover {
    filter: brightness(1.1); 
}

#inftop1,
#inftop2 {
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    overflow: hidden;
    height:120px;
    width: 100%;
}

#inftop2 {
    display: none; 
}

.inftopinnerleft,
.inftopinnerright {
    display:inline-block;
    width: 50%; 
    font-size: 16px;
    text-align: center;
    line-height: 35px;
}

#persbar {
    position: relative;
    height: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
     overflow: hidden;
}

#persbar .male,
#persbar .female {
    position: absolute;
  top: 0;
  height: 100%;
  color: #fff;
  transition: all 1s ease-in-out;
}

#persbar .male {
  left: 0;
  background-color: #4285f4;
  width: 0;
}

#persbar .female {
  right: 0;
  background-color: #e91e63;
  width: 0;
}

.infnum {
    font-size: 50px;
}

.inff {
    color: rgb(233, 30, 99,0.5);
}

.infm {
    color: rgb(0, 0, 255,0.5);
}

#inftop1 .lcol,
#inftop1 .mcol,
#inftop1 .rcol {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 25%;
    
}

#inftop1 .lcol {
    width: 40%;
    text-align: left;
} 

.compodiv:hover
{
    color:#B83131;
    cursor:pointer;
    font-weight: bold;
    /* font-size:larger; */
}

#indevwrap, #sectwrap, #phenowinwrap {
    
    height:50vh;
    /* max-height: 50vh; */
    overflow: auto;
    margin-bottom: 5px;
}

#indevheader, #sectheader, #phenowinheader {
    border-bottom:1px solid #B83131;
}

.noaccess {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding: 10px;
    background-color: #bb3131;
    color: white;
    border-radius: 5px;
}

#indevheader > div,
#indevwrap > div,

#sectheader > div,
#sectwrap > div,

#phenowinheader > div,
#phenowinwrap > div
{
  display: flex;
  width: 100%;
  
}

#sectheader > div > div,
#sectwrap > div > div {
  flex: 0 0 24%;   /* each takes up 25% */
  text-align: center;
}

#sectwrap > div:nth-child(even),
#indevwrap > div:nth-child(even)
{
    background-color: rgba(255, 255, 255, 0.4);
}

#sectheader > div > div:first-child,
#sectwrap > div > div:first-child {
  padding: 4px;

}

.indevaninum, 
.indevaniage,
.indevanichldrn,
.sectmale, 
.sectfemale,
.secttotal,
.secttype,
.sectage,
.phenowintype,
.phenowinage,
.phenowinweight {
    flex: 1;           /* default equal width */
    padding: 4px;      /* optional for spacing */
    box-sizing: border-box;
    cursor:pointer;
}

.sectmale, 
.sectfemale,
.secttotal {
    cursor:default;
}

#sectwrap .sectmale:hover, 
#sectwrap .sectfemale:hover,
#sectwrap .secttotal:hover {
    color:#B83131;
    cursor:pointer;
    font-weight: bold;
    /* font-size:larger; */
}

#indevwrap .indrow:hover {
    background-color: #B83131;
    color:#ffffff;
}

#sectwrap, #phenowin {
    min-height:300px;
}

#indevpdf, 
#indevexcel,
#secthistory, 
#sectpdf, 
#sectexcel,
#phenowinpdf, 
#phenowinexcel {
    background-color: #fff;
    height: 34px;
    width: 34px;
    border-radius: 5px;
    line-height: 34px;
    color: #000;
    cursor: pointer;
    text-align: center;
    font-size: 25px;
    display:inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

#indevdownload,
#sectdownload,
#phenowindownload {
    text-align: right;
    padding: 5px 5px 0 0;
}

#indevpdf, #sectpdf,#phenowinpdf {
    background-image: url('../images/efile.webp');
}

#indevexcel, #sectexcel,#phenowinexcel {
    background-image: url('../images/excel.webp');
}

#indevcount,
#sectcount,
#phenowincount {
    float: left;
    padding-left: 10px;
}

.und {
    border-bottom: 1px dashed rgba(44, 62, 80, 0.5);
}

#predash .hpanelt {
    position:relative;
    min-width: 150px;
    height: auto;
    padding: 0;
    min-height: 120px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    margin: 0 6px 10px 6px;
    width: calc((100% - 48px) / 4); /*split by 4*/
    border: none;
}

#predash #d1,
#predash #d5 {
    margin-left:0px;
}

#predash #d4,
#predash #d8 {
    margin-right:0px;
}

#pagewrap > div.homecontainer > div:nth-child(1) > div.col-12#predash {
    margin-bottom: 0px;
    
}

#prebreed #hslidewrap {
    height:135px;
    margin-bottom:0px;
}

/* #predash .preimg {
    position:absolute;
    right:10px;
    top:0px;
    width: 4em;
    height: 4em;
    margin: 10px 10px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
} */

#overviewwrap {
        padding: 15px 15px 0px 15px;
    }

#predash .preimg {
    position: absolute;
    right: -2%;
    top: 0px;
    width: 4em;
    height: 4em;
    margin: 10px 10px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display:none
}

 #predash #actionwrap .preimg {
    left:10px;
}

#predash .preinf
 {
    width:100%;
    height:40px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left:10px;
    box-sizing: border-box;
    background-color: rgba(129, 125, 125, 0.1);
    text-align: left;
    position: absolute;
    bottom: 0;
    border-bottom: 1px solid #b4b4b4;
    font-family: 'ralewaymedium';
}

#d3:hover .preinf,
#d4:hover .preinf,
#d5:hover .preinf,
#d6:hover .preinf {
    background-color: #bb3131;
    color:#ffffff;
    cursor:pointer;
}

/*not active links*/
#d1 .link,
#d2 .link,
#d7 .link,
#d8 .link {
    display:none;
}

#predash .menusplit {
    margin: 10px 0;
}

#d1 .preimg {
    background-image: url("../images/breeding.webp");
}

#d2 .preimg {
    background-image: url("../images/pregnancy.webp");
}

#d3 .preimg {
    background-image: url("../images/calving.webp");
}

#d4 .preimg {
    background-image: url("../images/weaning.webp");
}

#d5 .preimg {
    background-image: url("../images/12months.webp");
}

#d6 .preimg {
    background-image: url("../images/18months.webp");
}

#d7 .preimg {
    background-image: url("../images/growth.webp");      
}

#d8 .preimg {
    background-image: url("../images/inspect.webp");
}

/* images bottom */

#b1 .preimg {
    background-image: url("../images/upload.webp");
}

#b2 .preimg {
    background-image: url("../images/report.webp");
}

#b3 .preimg {
    background-image: url("../images/manage.webp");
}

#b4 .preimg {
    background-image: url("../images/actionlist.webp");
}

#b5 .preimg {
    background-image: url("../images/binoculars.webp");
}

#b6 .preimg {
    background-image: url("../images/calendar.webp");
}

#b7 .preimg {
    background-image: url("../images/template.webp");      
}

#b8 .preimg {
    background-image: url("../images/weather.webp");
}

#overview, #action, 
#pardash, #infodash,
#opts {
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px;
    overflow: hidden;
}

#opts {
    margin: 0px;
    text-align: left;
    position: sticky;
    top: 0px;
    z-index: 2;
    height: 42px;
    margin: 0.1rem 2%;
    /* width: 96%; */
    width: fit-content;
    padding-right: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

#overview {
    border-top-left-radius: 0;
    transition:all 0.5s ease-in-out;
}

#infodash {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  border-top-left-radius: 0px;
}

#infodash::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('../images/studcom.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20vw;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 0;
}

#infodash.bglogo::before {
  opacity: 1;
}

#infodash > * {
  position: relative;
  z-index: 1;
}


#pardash, #infodash {
    display: none;
}

#pardash > row > div {
    text-align: left;
}

#action, #opts {
    display:none;
}

#overview .hpanelt {
    cursor:default;
}

/* #infodash {
    margin: 10px 0px 10px 0px;
} */

#opts #breedselt,
#opts #breedselo,
#opts #breedsele
{
    padding: 5px 10px;
    background-repeat: no-repeat;
    display: inline-block;
    font-family: 'roboto_condensedregular';
    font-size: 16px;
    text-align: left;
    width: fit-content;
    margin: 5px 0px 5px 15px;
    
    border-radius: 5px;
    cursor:pointer;
}

#prebreed #ko, #prebreedTA #ko {
    position:absolute;
    /* background-image: url(../images/contact-person.webp); */
    background-repeat: no-repeat;
    background-position: 2px;
    background-size: contain;
    padding-left: 70px;
    right:unset;
    bottom:10px;
    margin-left: 8px;
    /* margin-top: 6px; */
    width: 160px;
    appearance: none;
    z-index: 2;
    outline: none;
    display:none;
    border:none;
}

#prebreedTA #ko {
    position: relative;
    bottom: unset;
    margin-top:6px;
}

/* #predash #action, */
#predash  {
    text-align: left;
    display:none;
}

#overview .prestats {
    position:absolute;
    left:10px;
    top: 18px;
    width: calc(100% - 20px);
}

#action .prestats {
    position:absolute;
    right:10px;
    top: 10px;
    width:fit-content;
}

.prestats .hpstr1 {
    background-color: rgb(187, 49, 49, 0.2);
    color: rgb(187, 49, 49);
    
    padding-left:10px;
    height:20px;
    line-height: 20px;
    margin-bottom:5px;
    border-radius: 20px;
}

.prestats .hpstr2 {
    background-color: rgba(4, 170, 109, 0.2);
    color: rgb(4, 170, 109);
    padding-left:10px;
    height:20px;
    line-height: 20px;
    border-radius: 20px;
}

#action #b8 .prestats div {
    height: 22px;
    line-height: 16px;
    text-align: right;
}

/* #action #b8 .prestats div.temp {
    line-height: 16px;
} */

#action #b8 .prestats div.temp sup {
    vertical-align: text-top;
}

#tasearch, #searchmore {
    margin-left:8px;
}

#preAdv{
    margin-top: 15px;
}

.link {
    width:20px;
    height:20px;
    border-radius: 50%;
    position:absolute;
    bottom:10px;
    right:10px;
    background-image: url('../images/outward.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #bb3131;
    z-index: 1;
}

#hslideinner {
    width:100%;
    overflow-x: auto;
    
    
}

/*Dash override*/

/*Upload override*/

#holderutab #breedsel,
#breedfindwrap #breedsel,
#reportwrap #breedsel,
#breedfaultswrap #breedsel {
    font-family: 'roboto_condensedregular';
    font-size: 16px;
    text-align: left;
    padding-top: 7px;
    padding-bottom: 7px;
    background-repeat: no-repeat;
}

#holderutab #hbreedsel,
#breedfindwrap #hbreedsel,
#reportwrap #hbreedsel,
#breedfaultswrap #hbreedsel
{
    display:none;
}

#holderutab #describesel {
    margin-left: 15px;
    padding-bottom: 8px;
}

#holderutab #describesel div {
    display: inline-block;
    color: #bb3131;
}

/*Upload override*/



#dashwrap {
    height: 406px;
    overflow: hidden;
}

#morehead {
    display: none;
}

.context-menu {
    width:134px;
    width:55px;
    height:55px;
    border-radius:5px;
    background-color: #2c3e50;
    position: absolute;
    display:none;
}


#syncpan > div.hpstr {
    position:relative;
}

#syncpan > div.hpstr > div {
    position:absolute;
    border:1px solid rgb(174, 169, 169);
    width:fit-content;
    right:0px;
    border-radius:5px;
    padding: 0 5px;
    height: 20px;
    top: 5px;
    line-height: 20px;
}

#syncpan > div.hpstr > div:hover {
    background-color: #B83131;
    color:#fff;
}

/*attention PAR*/
#pagewrap > div > div:nth-child(2) > div.col-8 {
    margin-top:0px;   
}

#pagewrap > div > div:nth-child(2) > div.col-8 > div.col-8.TA,
#pagewrap > div.homecontainer > div:nth-child(2) > div.col-8 > div.col-8.PAR
{
    margin-left:0px;
}

#pagewrap > div.homecontainer > div:nth-child(2) > div.col-8 {
    position:relative;
}

#dashcentercol, #dashcentercolback
{
    width: 33%;
    margin-right: 0px;
    margin-bottom:0px;
    right:0px;
    height: 540px;
}  

#baserowwrap, #baserowwrapback {
    height: 300px;
}

#pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div.col-12 {
    margin:16px 0px 0px 0px;
    width:99.5%;
}

#pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div .col-3 {
    margin: 0.5rem 1%;
    width: 23.4%;
}

#pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div > div.hpanelr,
.bannerpanel
{
    height:140px;
}

#baserow > div.col-12  {
    width: 99.6%;
}

#pagewrap > div.homecontainer  #baserow > div > div:nth-child(1),
#pagewrap > div.homecontainer > div.col-12
{
    margin-left:0px;
}

#pagewrap > div.homecontainer  #baserow > div > div:nth-child(4) {
    margin-right:0px;
}

#pagewrap > div.homecontainer #baserow > div > div
{
    margin-top:0px;
    margin-bottom:5px;
}

/*Animal search*/

#aig div.inwrap {
    display: inline-block;
    width: calc(94% / 5);
    text-align: center;
    padding:0px;
    height: 100%;
    vertical-align: top;
}

#aig > div:nth-child(2) {
    width:calc(calc(94% / 5) - 10px);
}

#aig > div:nth-child(3) {
    width:calc(calc(94% / 5) + 10px);
}

#aig div.inwrap input {
    text-align: center;
    padding:0px;
    width:100%;
    border-right: 2px solid #B83131;
}

#aig > div:nth-child(3) #anidi3c5,
#aig > div:nth-child(3) #anidi3c6
{
    visibility:hidden;
}

#farmnumber {
   width:98%;
}

#compnr {
    padding-left:2%;
    letter-spacing: clamp(15.5px, 0.90vw, 17.5px);
    width:86%;
}


#compnrclr,
#compnr {
    display:inline-block;
}



#farmnumber {
    margin-bottom:10px;
}

#animalwrap > div.col-12 > div.inwrap {
    height: 40px;
    margin-bottom: 10px;
}

/* #animalwrap {
    margin: 10px;
} */

.badge {
   width:10px;
   height:10px;
   display:inline-block;
   border-radius: 50%;
   margin: 0 3px 0 10px;
}

#single, #list {
    display:block;
    cursor:pointer;
    border-radius: 5px;
    float:right;
}

#single {
    margin-left:10px;
}

#single .badge {
    background-color: #B83131;
}

#list .badge {
    background-color: #2c3e50;
}

#single label,
#list label
{
    display:inline-block;
    cursor:pointer;
    margin: 0 10px 0 0px;
    line-height: 24px;
}

#animalwrap > div > label:nth-child(3) {
    display:inline-block;
}

#aig {
    border-radius: 5px;
    height: 36px;
}

#aig .inwrap div,
#animalwrap > div.col-12 > div.inwrap div.compnrb {
    display:inline-block;
    width: calc(58% / 4);
    height:2px;
    background-color: red;
    vertical-align: top;
    text-align: center;
    visibility:hidden;
}

#animalwrap > div.col-12 > div.inwrap div.compnrb {
    width: calc(58% / 10);
}

#QRid {
    width: 98%;
    height: 65px;
    margin:0 auto;
    background-image: url('../images/qrsearch.webp');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom:10px;
    cursor:pointer;
}

#qrret {
    display:none; 
}

#reader > div:nth-child(1) > img {
    display:none;
}

#dropshow {
    position:absolute;
    height: 0px;
    width: 100%;
    background-color: #fff;
    z-index: 1;
    border-radius:5px;
    transition: height 0.5s linear;
    overflow:hidden;
}

/* #qrs {
    height: 77%;
} */



#animalOk, #animalCan,
#TranslateOk, #TranslateCan
{
    display:inline-block;
    width:49%;
}

#langlab, #langset {
    margin:10px auto;
}

#langset {
    width: 98%;
    display: block;
}

#QRidCan {
    width: 98%;
    margin: 0 auto;
    position: absolute;
    bottom: 3px;
    left: calc((100% - 98%) / 2);
}

.twint {
    display:inline-block;
    width:100%;
}

/* #qrint  {
    text-align: left;
} */

#qrint #reader {
    max-height:350px;
    max-width:350px;
    /* height:300px; */
    width:auto;
    margin: 0 auto;
    /* margin: 50px auto; */
}

#reader__scan_region > video {
    max-height:350px;
    max-width:350px;
}

#html5-qrcode-button-camera-permission,
#html5-qrcode-button-file-selection
{
    height: 34px;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    margin: 5px 0;
    font-family: roboto_condensedregular;
    font-size: 16px;
    background-color: #ffffff;
    
}

#html5-qrcode-button-camera-stop {
    display:none !important;
}

#findinnerwrap {
    overflow-y: auto;
    height: 82vh;
}

.thirdpanel {
    position: relative;
    min-width: 150px;
    min-height:293px;
    margin: 5px 10px;
    border: none;
    border-radius:5px;
    background-color: rgba(255,255,255,0.7);
    line-height: 26px;
    box-shadow: 0px 4px 3px -4px black;

}

.trd4m {
    background-image: url("../images/tempmale.webp");
    /* background-image: url("https://logix.org.za/Reports/Images/Cattle/916028976.jpg?nocache=621"); */
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
}

.trd4f {
    background-image: url("../images/tempfemale.webp");
    /* background-image: url("https://logix.org.za/Reports/Images/Cattle/916028976.jpg?nocache=621"); */
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
}

#trd4 > div.dashpaneltop {
    display:none;
}

#trd4 .slideme {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height:100%;
}

#dnswrap {
    display:none;
}

#dnswrap .lcol {
    text-align: center;
}

#dnswrap #rw3,
#dnswrap #rw4,
#dnswrap #rw5
{
    border-top:1px dashed rgba(44, 62, 80, 0.5);;
}

#dnswrap #rw3 .lcol,
#dnswrap #rw4 .lcol,
#dnswrap #rw5 .lcol
{
    text-align: right;    
}

#dnswrap #rw3 .mcol,
#dnswrap #rw3 .rcol,
#dnswrap #rw4 .mcol,
#dnswrap #rw4 .rcol
{
    color:#bb3131;
    font-weight: bold;
    font-size: 30px;
}

#dnswrap #rw5 {
    border-top:1px dashed rgba(44, 62, 80, 0.5);
}

#dnswrap #rw2 div {
    height:80px;
}

/* #dnswrap > #rw2 > div.lcol, */
/* #dnswrap > #rw2 > div.mcol,
#dnswrap > #rw2 > div.rcol {
    background-size: contain;
    background-image: url("../images/genomic-tested.webp");
    background-repeat: no-repeat;
    background-position: center;
} */

#dnswrap > #rw2 > div.mcol {
    background-size: contain;
    background-image: url("../images/bull-side.webp");
    background-repeat: no-repeat;
    background-position: center;
}

#dnswrap > #rw2 > div.rcol{
    background-size: contain;
    background-image: url("../images/cow-side.webp");
    background-repeat: no-repeat;
    background-position: center;
}

#dnswrap > #rw2 > div.lcol {
    /* background-size: 350px; */
    background-image: url("../images/GenoTyped.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    line-height: 80px;
}

#dnswrap > #rw5 > div.rcols {
    display:inline-block;
    vertical-align: top;
    width:60%;

}

#deras {
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width:50px;
    height:50px;
    /* mix-blend-mode: multiply; */
    /* opacity: 0.4; */
    background-color: rgba(129, 125, 125, 0.5);
    border-radius:5px;
}

#deras img {
    
    width:140px;
}

#deprompt {
    position:absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(129, 125, 125, 0.5);
    color:#fff;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    padding-right: 40px;
    opacity: 0.4;
}

.lokes {
    min-height: 30px;
    /* background-color: #ffffff;
    border-bottom: 1px solid #e5352e; */
    font-weight: bold;
}

#lokewrap {
    margin-top:10px;
    height: calc(100% - 320px);
    overflow-y: auto;
    margin-bottom:10px;
}

.lokeinfo div {
    display:inline-block;
    
    height:25px;
}

.lokeinfo div#cc1,
.lokeinfo div#cc2 {
    width:45%;
}

.lokeinfo {
    position:relative;
    line-height: 24px;
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
    border-bottom: 1px dashed rgba(44, 62, 80, 0.5);
}

#nrg.own {
    background-color: rgba(187, 49, 49,0.3);
}

#nrg.keep {
    background-color: rgba(44, 62, 80,0.3);
}

#trd2 #nrg {
    left:0px;
}

#trd3 [id^=rgn] {
    left:-15px;
}

.lokeinfo div#c1 {
    width:35%;
}

.lokeinfo div#c2 {
    width:20%;
}

.lokeinfo div#c3 {
    width:15%;
}

.lokeinfo div#c4 {
    width:25px;
}

.lokeinfo div#c5 {
    width:15%;
}


#anibreed {
    background-image: url("https://logix.org.za//images/logos/BOR50x50.png");
    background-size: contain;
    background-repeat: no-repeat;
}

#findinnerwrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
}

#trd1 {
    grid-row: span 2 / span 2;
}

#trd4 {
    grid-column-start: 2;
    overflow:hidden;
}

#trd5 {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
}

#trd6 {
    grid-row-start: 3;
}

#trd7 {
    grid-row-start: 3;
}

#fotoload {
    display:none;
}

div[id^=trd] .lcol,
div[id^=trd] .mcol,
div[id^=trd] .rcol,
div[id^=trd] .r1col {
    position:relative;
    display:inline-block;
    vertical-align: top;
    width:30%;
}

#trd2 .lcol {
    width:25%;
}

#trd2 .mcol,
#trd2 .rcol {
    cursor:pointer;
    width:35%;
}

div[id^=trcl] {
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
    text-align: center;
    cursor:pointer;
}

div[id^=trcm] {
   
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
    text-align: center;
    cursor:pointer;
}

div[id^=trcr] {
    cursor:pointer;
}

div[id^=trcs] {
    cursor:pointer;
}

#trd1 .lcol {
    width: 40%;
    text-align: right;
}

#trd1 .rcol {
    width: 55%;
}

#trd1 .rcol > div,
#trd1 .r1col > div {
    position:relative;
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
    height: 27px;
    box-sizing: border-box;
}

#trd1 > .lcol > div {
    position:relative;
    border-top: 2px solid transparent;
}

#trd1 > .lcol > div[id^=trcl]  {
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
}

.liststretch {
    display: block;
    width: 98.5%;
    height: 80vh;
}

#trd1 .lcol > div#lhd,
#trd1 .mcol > div#lhd,
#trd1 .rcol > div#rhd,
#trd1 .r1col > div#rhd {
    font-weight: bold;
    border-top: none;
    text-align: center;
}

#trd1 .lcol > div,
#trd1 .mcol > div {
    border-bottom: 1px solid transparent;
    height: 27px;
    box-sizing: border-box;
}

#trd1 .mcol,
#trd1 .fcol
{
display:none;
}

div[id^=trd] .rcol {
    min-width: 130px;
}

div#trd6 .lcol {
    text-align: right;
    padding-right: 10px;
}

div#trd6 .mcol {
    text-align: right;
    padding-right: 10px;
    min-width:50px;
    width:50px;
}

img.picline {
    display: inline-block;
    width: 25px;
    mix-blend-mode: multiply;
}

#trd3 .lcol {
    padding-right: 0px;
}

#trd3 div[id^=rw] {
    cursor:pointer;
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
    height:25px;
}

#trd3 div#rw5,
#trd2 > div.mcol > div:nth-child(8)
#trd2 > div.rcol > div:nth-child(8),
#trd1 > div.rcol > div:nth-child(8) {
    border-bottom: 1px dashed rgba(44, 62, 80, 0.5);
}

#nochildren {
    margin-top: 20px;
}

div[id^=trd] .rcol
div[id^=trd] .mcol {
    text-align: left;
    padding-left: 10px;
}

div[id^=trd] div.dashpaneltop {
    line-height: 30px;
}

#trd4 > div.dashpaneltop {
    position:absolute;
}

[id^=rgn], #nrg, .nrg {
    position: absolute;
    top: 4px;
    left: 5px;
    width:20px;
    height:20px;
    border-radius: 50%;

    background-image: url(../images/outward.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

#nrg {
    top:3px;
}

#trd1 #nrg,
#trd1 .nrg
{
    background-image:none;
}

.frgn  {
    background-color: rgb(255, 0, 255,0.3);
}

.mrgn  {
    background-color: rgb(0, 0, 255,0.3);
}

.srgn,
.frgn {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.srgn  {
    background-color: rgb(2, 161, 16);
}

.frgn  {
    background-color: rgb(165, 4, 4);
}

#trd2 > div.mcol > div:nth-child(1),
#trd2 > div.rcol > div:nth-child(1) {
    border:none;
}

#trd2 .lcol > div {
    border-top: 1px solid transparent; 
    height:25px;
}

#trd2 .mcol > div {
   position:relative;
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
    height:25px;
}

#trd2 .rcol > div {
    position:relative;
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
    height:25px;
}

#trd2 > div.mcol > div:nth-child(1),
#trd2 > div.rcol > div:nth-child(1) {
    background-color: transparent;
}

#details, #ancestors, 
#descendants, #genomic,
#timeline,#phenotype
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(129, 125, 125, 0.1);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
}

#ancestorCan, #descendantCan
, #genomicCan, #timelineCan, #phenotypeCan {
    position: absolute;
    bottom: 10px;
    right: 30px;
    max-width: 150px;
}

.fade {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0), 
        rgba(255, 255, 255, 0.9)
    100%);
}

/* chart */
#mainproduct {
    width:100%;
    height:470px;
    margin:0 auto;
}

#productchart {
    display: none;
    height: 25px;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 10px;
    overflow-y: hidden;
    padding-left: 5px;
}

/* scrollbar */

#productchart::-webkit-scrollbar { 
    display: none; 
} 

#proddir {
    display: inline-block;
    width:54px;
    height: 25px;
    margin-bottom: 10px;
    vertical-align: top;
}

#pchartl,
#pchartr {
    display: inline-block;
    height:25px;
    width:25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    cursor:pointer;
    display:none;
}

#pchartl {
    background-image: url("../images/goleft.webp");
    display:none;
}

#pchartr {
    background-image: url("../images/goright.webp");
}

#prodlist {
    display: inline-block;
    width: 730px;
    height: 25px;
}

#prodc1 .nrg {
    background-color: #2196F3;
}

#prodc2 .nrg {
    background-color: #B83131;
}

#prodc3 .nrg {
    background-color: #0bce35;
}

#prodc4 .nrg {
    background-color: #000000;
}

#prodc5 .nrg {
    background-color: #800080;
}

#prodc6 .nrg {
    background-color: #ffa500
}

div[id^=prodc] .nrg {
    top:2px;
}

div[id^=prodc] {
    width: fit-content;
    padding: 0 5px 0 30px;
    display: inline-block;
    font-size: 14px;
    position: relative;
    cursor:pointer;
    
}

div[id^=prodc]:hover {
    background-color: #fff;
    /* color:#fff; */
    border-radius: 5px;
}


/*tree*/
#treewrap, #dtreewrap {
    position: relative;
    overflow-x: auto;
    margin-top: 30px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    min-height:520px;
    height: 82vh;
}

#tree, #dtree {
    /* height:500px; */
    position:absolute;
}

#dtree {
    margin-top:20px;
}

.treelevel, .dtreelevel {
    height:150px;
}

.entry {
    display:inline-block;
    height: 85px;
    width:150px;
    font-size: 14px;
    background-color: #fff;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: top;
}

/* #damnid, #sirenid {
    display:none
} */

/* #child, */
#mom, #dad,
#myself, #mychild {
    display:none
}

.entryM {
    /* background-color:#2c3e50; */
    background-color:rgba(0, 0, 255 ,0.2);
    
}

.entryF {
    /* background-color:#B83131; */
    background-color: rgb(255, 0, 255, 0.2);
    
}

#treelevewrap {
    position: absolute;
    left: 21px;
    top:50px;
    z-index: 5;
    padding: 0 10px 10px;
    border-radius: 5px;
}

/*tree end*/

#svgContainer, #dsvgContainer {
    z-index: -10;
    position: absolute;
    /* background-color: silver; */
    /* opacity: 0.5; */
}

/*Animal search*/

.susp {
    color:#B83131;
}

#reportpan .hpsn {
    display:none;
    width: 40%;
    height: 60%;
    top: 34px;
    background-image: url('../images/dynreports.webp');
    background-repeat: no-repeat;
    background-size: contain;
}

#mutationwrap {
    height:87vh;
    overflow-y:auto;
}

#biohistorywrap {
    
    height:87vh;
    overflow-y:auto;
}

#dnatrackwrap {
    
    height:87vh;
    overflow-y:auto;
}

#rwhdr {
    position: sticky;
    z-index: 1;
    top: 0px;
    background-color: #fff;
}

#overrepOk {
    margin-bottom: 10px;
}

#mutationwrap .row:nth-child(even),
#biohistorywrap .row:nth-child(even),
#dnatrackwrap .row:nth-child(even)
{
    background-color: rgba(255, 255, 255, 0.4);
}

#choicewrap {
    position:relative;
    height:50px;
}

/*CHAT*/

div.iticks-pop-button {
    width: 50px !important;
    height: 50px !important;
} 

img.chat-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 14px !important;

}

/*Loopslide*/

.slide-option {
    display:none;
}

section {
	display:flex;
	flex-flow:column;
	align-items:center;
	div.container {
		transition:all .3s ease;
		h1 { margin:15px 0 0 0; }
		h3 { margin:0 0 25px 0; }
	}
	@media (max-width:992px) { padding:0 20px 0 20px; }
}

section.slide-option {
	.no-marg { margin:0 0 0 0; }
}

div.highway-slider {
	display:flex;
	justify-content:center;
	width:100%;
	height:100px;
}

div.highway-barrier {
    overflow:hidden;
    position:relative;
}

ul.highway-lane {
    display:flex;
    height:100px;
}

li.highway-car {
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    /* background:#fff; */
    color:#343434;
}

@keyframes translatestf {
	0% { transform:translateX(100%);  }
	100% { transform:translateX(-500%);  }
}
#stffull div.highway-barrier {
	ul.highway-lane {
		width:500%;
		li.highway-car {
			animation:translatestf 30s linear infinite;
			h4 { font-size:28px; }
		}
	}
}

@keyframes translateinfinite {
	100% { transform:translateX(calc(-180px * 12));  }
}

#infinite div.highway-barrier {
	
    width:100%;
    margin-left:0px;
    margin-right:0px;
    max-width:98%;
    height:100px;
}

ul.highway-lane {
    width:calc(180px * 24);
    margin:0;
}

li.highway-car {
    width:180px;
    animation:translateinfinite 200s linear infinite;
    
}

li.highway-car img {
    border-radius: 5px;
    filter:grayscale(2);
    opacity:0.5;
}



/*Loopslide END*/

/* timeline */

#timelinewrap {
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%); */

    position: relative;
    width: fit-content;
    margin: 0 auto;
    margin-top: 80px;
}

#centerline {
    /* width: 50vw;
    background-color: red;
    height: 5px;
    margin-top:22px; */

    width: 50vw;
    height: 5px;
    padding-top: 19px;
    border-bottom: 4px solid #bb3131;
}

#centerbar {
    position: absolute;
    top: 0px;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.timedot {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: #bb3131;
    position:absolute;
    top: 50%;
    left:50%;
    transition:all 0.3s linear;
    transform:translate(-50%,-50%);
    transform-origin: 0%;
    cursor:pointer;
    display: inline-block;
    vertical-align: middle;
}

.g1 {
    border: 2px solid #2c3e50;
    height: 50px;
    border-radius: 50px;

    display: inline-block;
}

[id^=sph_] {
    position: relative;
    display:inline-block;
    width: 50px;
    height: 50px;
    /* background:green; */
    border-radius: 50%;
    margin:0px;
}

.tored {
    background-color: rgb(187, 49, 49);
}

.toblue {
    background-color: rgb(44, 62, 80);
}

.timepanel {
    width: 0px;
    height: 0px;
    background-color: #fff;
    position:absolute;
    top:20px;
    left:50%;
    transform: translate(-50%);
    overflow:hidden;
    border-radius:5px;
    /* display:none; */
    cursor:default;
}

.inst {
    padding: 0 5px 5px 5px;
}

#grpnm {
    background-color: rgba(255, 255, 255, 0.3);
    font-size:16px;
    width: fit-content;
    margin: 0 auto;
    margin-top: -2px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.trans {
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}

#timelinecontent {
    width: 90vw;
    height: auto;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 0 auto;
    margin-top: 20px;
    border-radius:5px;
}

#timelinedata {
    overflow-y: auto;
    height: 220px;
}

#timelinedata > div[id^=time] {
    display:block;
    background-color: #f8f8f8;
    width: 100%;
}

#timelinedata > div[id^=time] > div {
    display:inline-block;
    width:125px;
}

#timelinedata > div[id^=time] > div.snrg {
    width:20px;
    height:20px;
    border-radius:50%;
    margin-right: 20px;
    vertical-align: top;
    margin-top: 2px;
}

#timelinedata > div[id^=timer] {
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
    cursor:pointer;
}

.tdesc {
    display:none;
}

#timelinedata > div[id^=time] > div:nth-child(2),
#timelinedata > div[id^=time] > div:nth-child(3),
#timelinedata > div[id^=time] > div:nth-child(4),
#timelinedata > div[id^=time] > div:nth-child(7)
 {
    width:300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

#timelinedata > div[id^=time] > div:nth-child(4) {
    width:200px;
}

#timelinedata > div[id^=time] > div:nth-child(2),
#timelinedata > div[id^=time] > div:nth-child(5),
#timelinedata > div[id^=time] > div:nth-child(6) {
    display:none;
}

#timehr {
    position:sticky;
    top:-2px;
}

#timelinevalue {
    height:60px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 2px solid #2c3e50;
    border-top: 1px solid #e5352e;
    padding-top: 10px;
}

#timelinevalue > div:nth-child(1) {
    margin-bottom: 5px;   
}

/* timeline */

/*scalepan*/

#scalepan .hpsn {
    display:none;
    width: 40%;
    height: 60%;
    top: 34px;
    background-image: url('../images/scale.webp');
    background-repeat: no-repeat;
    background-size: contain;
}

/*scalepan END*/

#QRpan .hpsn {
    display:none;
    width: 40%;
    height: 60%;
    top: 34px;
    background-image: url('../images/anisearch.webp');
    background-repeat: no-repeat;
    background-size: contain;
}

/*Typewriter*/

#typedwrap {
    display:block;
    position:relative;
}

#typedlogo {
    height: 80px;
    display: inline-block;
    /* vertical-align: top; */
    margin:10px;
}

.typedcontainer {
    display: none;
    width: calc(100% - 110px);
    overflow-y: auto;
    vertical-align: top;
    height: 105px;
    padding: 10px;
    box-sizing: border-box;
}

#typewriter-gpt-2 {
    display:none;
    line-height: 20px;
    text-align: left;
}




/*Typewriter*/



/*DEVEL*/

.dev {display:none;}

/*DEVEL END*/

/*TA*/
#ADVbreed, #ADVhandler, #ADVspecie {
    display:none;
    margin-top:5px;
    width:400px;
    outline: none;
    border:none;
    margin-left:8px;
}

#TAwrap label{ 
    height:25px;
    line-height:30px;
}

#TAwrap {
    height:117px;
    min-height:auto;
    margin-bottom: 21px;
    text-align: left;
    position:relative;
    background-color: transparent;
}

#TAmain {
    height: 402px;
    background-color: rgba(255,255,255,0.7);
    position: relative;
    text-align: left;
}

#tasearchexp {
    position: absolute;
    left: 0px;
    top:0px;
    width: 100%;
    min-height: 125px;
    height:125px;
    /* height:125.25px; */
    background-color: white;
    z-index: 1;
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px;
    padding: 0px 10px 0px 10px;
    box-sizing: border-box;
    transition:all 0.5s linear;
    
}

#tasearchexp > div.loader
{
    display:none;
    width: 20px;
    height: 20px;
}

#loginconf > div.loader,
#onelogin > div.loader
{
    display:none;
    width: 20px;
    height: 20px;
    margin:0 auto;
}

#tasearchwrp > div.loader {
    display:none;
    position: absolute;
    top: 5px;
    left: 260px;
    width: 20px;
    height: 20px;
}

#trd2 > div#ansinform {
    display:none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 33px;
    width:100%;
}

#ansinform > div.loader {
    
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
}

#trd3 > div#desinform {
    display:none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 33px;
    width:100%;
}

#desinform > div.loader {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
}

#trd6 > div#traceinform {
    display:none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 33px;
    width:100%;
}

#traceinform > div.loader {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
}

#trd5 > div#fenoinform {
    display:none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 33px;
    width:100%;
}

#fenoinform > div.loader {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
}

#trd6 .rw {
    border-top: 1px dashed rgba(44, 62, 80, 0.5);
}

#trd6 #rw1 {
    border-top: 1px solid transparent;
}

#hcontainer > div.row > div.col-4,
#TAmain > div.row > div.col-4 {
    height: 90px;
    background-color: #FFF;
    box-sizing: border-box;
    border-radius: 5px;
    border:1px solid #aea9a9;
    cursor:pointer;
}

#hcontainer > div.row > div.col-4 {
    height: 160px;
    line-height: 256px;
    text-align: left;
    padding-left: 20px;
}

[id^='tabut'] {
    width: 200px;
    height:60px;
    background-color: #fff;
    position:relative;
}

.tabutext {
    height: 60px;
    width: 57px;
    position: absolute;
    top: 10px;
    right: 15px;
    line-height: 21px;
}

#taoptl {
    display:none;
    height: 20px;
    line-height: 20px;
    margin-top:10px;
    margin-left:8px;
}

#tasearch {
    height: 34px;
    width: 400px;
    box-sizing: border-box;
    outline: none;
    border:none;
    padding-left: 15px;
}

#prebreedTA #tasearchwrp {
    /* min-height: 130px; */
    text-align: left;
    margin-bottom: 0px;
    height:auto;
    transition: height 2s ease;
}

#TAwrap select {
    margin-bottom:5px;
}

#taparlist {
    position: absolute;
    width: 470px;
    text-align: left;
    padding-left: 5px;
    background-color: rgb(255,255,255);
    z-index: 3;
    overflow-y: auto;
    max-height: 50vh;
    overflow-x:hidden;
    border-radius:5px;
    left: 18px;
    min-height: 42px;
    border-top: 1px solid red;
}

#taparlist div {
    cursor:pointer;
    display:inline-block;
}

#taparlist > div.row {
    border-bottom:1px solid lightgrey;
    text-align: left;
    padding-left:10px;
    box-sizing: border-box;
    width:90%;
}

#taparlist div.mis {
    display:none;
}

#taparlist .tappfilterwrap{
    height:40px;
    box-sizing: border-box;
    margin-bottom: -10px;
    /* width: 40px; */
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color:#fff;
    float: right;
    width: 40px;
    border-radius: 5px;
    transition:all 0.5s linear;
    margin-bottom: 0px;
    z-index:2;
}

#taparlist .tappfilter, #taparlist .tappfilsearch, #taparlist .tappfiltercan {
   
    background-color:#fff;
    background-image: url('../images/filter.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 34px;
    width: 34px;
    border-radius: 5px;
    position: absolute;
    right: 2px;
    top: 2px;
    color:white;
    cursor:pointer;
    text-align: center;
    border: 1px solid #aea9a9;
}



#taparlist .tappfiltext {
    position:absolute;
    width: calc(83% - 4px );
    margin: 0px;
    top: 3px;
    left: 3px;
    background-color: #fff;
    border:1px solid lightgrey;
}

#taparlist .tappfilsearch {
    display:none;
    background-color:#fff;
    background-image: url('../images/search.webp');
    position: absolute;
    right: 78px;
    top: 2px;
    color:white;
    border: 1px solid #aea9a9;   
    transition:all 0.5s linear;
}

#taparlist .tappfiltercan{
    display:none;
    position: absolute;
    right: 40px;
    top: 2px;
    background-image:none;
    color:black;
    font-size: 25px;
    line-height: 35px;
}

#tasearchcan, 
#compnrclr
{
    display:none;
    background-color: #fff;
    height: 34px;
    width: 34px;
    border-radius: 5px;
    line-height: 34px;
    color: #000;
    cursor: pointer;
    text-align: center;
    font-size: 25px;
    vertical-align: top;
}

#compnrclr {
    display:inline-block;
    height: 36px;
}

#tasearchok {
    /* position:absolute; */
    background-color:#fff;
    background-image: url('../images/search.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 34px;
    width: 34px;
    border-radius: 5px;
    /* top: 0px;
    right: 40px; */
    color:white;
    cursor:pointer;
    text-align: center;
    display:inline-block;
    vertical-align: top;
}

.hpsn {
    font-size: 3vw;
    float:left;
    height: 80px;
    line-height: 80px;
    box-sizing: border-box;
    margin: 5px 10px 0 10px ;
    position:absolute;
    color:#bb3131;
    
}

.hpsfr, .hpssr, .hpstr, .hpstr1, .hpstr2, .hpstr3  {
    height:33.3px;
    line-height:33.3px;
    font-size: 16px;
    /* background-color: rgba(255,255,255,0.5); */
    text-align: right;
    padding-right: 10px;
}

.hpstr1, .hpstr2 {
    border-radius: 5px;
    font-size: 14px;
}

.hpssi {
    display:none;
}

#ko{
    width:calc(100% - 150px);
}

/* #ko, #tamore {
    display:none;
    position:absolute;
    right:10px;
    bottom:5px;
    width:34px;
    height:34px;
    background-image: url("../images/info.webp");
    background-repeat: no-repeat;
    background-position: center; 
    background-size: contain;
} */

#hcontainer #ko {
    background-image: url("../images/ko.webp");
    background-repeat: no-repeat;
    background-position: 2px; 
    background-size: contain;
    padding-left:35px;
    right:unset;
    left:5px;
    width:30px;
    transition:all 0.5s linear;
    appearance: none;
    z-index:2;
    outline: none;
}

#TAwrap #ko {
    background-image:none;
    left:10px;
    width:fit-content;
    /* border:none; */
    outline: none;
}

#hcontainer #ko:hover {
    width:100px;
    appearance:menulist;
    z-index: 2;
}

#hcontainer #ko.koclass, #ko.koclass {
    width:100px;
} 

#searchmore {
    display: inline-block;
    /* position: absolute;
    left: 10px;
    top: 70px; */
    width: 170px;
    height: 34px;
    background-image: url(../images/list.webp);
    background-repeat: no-repeat;
    background-position: 5px;
    background-size: contain;
    cursor: pointer;
    padding-left: 40px;
    outline: none;
    border:none;
}

#setownbreeds > div.head > div > div,
#setownbreeds > div.rows > div > div {
    display:inline-block;
    width: 50%;
}

[id^='ofopt'] {
    height:34px;
    display:inline-block;
}

/*Dash end*/

/*Phencon*/


#datapwrap {
    overflow-x:auto;
    height:calc(100% - 110px);
    text-align: left;
}

#phenocon div[id^=vhcol],
#phenocon div[id^=vcol] {
    display:inline-block;
    width:100px;
    height:25px;
    vertical-align: top;
    text-align: center;
}

/*resize columns*/

#phenocon div#vhcol1,
#phenocon div#vcol1 {
    width:350px;
} 

#phenocon div#vhcol2,
#phenocon div#vcol2 {
    width:300px;
} 

#phenocon div#vhcol8,
#phenocon div#vcol8 {
    width:150px;
} 

#datapwrap > div#selectionvalues > div#vh {
    font-weight: bold;
    background-color: #2196F3;
}

#datapwrap > div#cowcalfvalues > div#vh {
    font-weight: bold;
    background-color: #B83131;
    color:#ffffff;
}

#datapwrap > div#fertilityvalues > div#vh {
    font-weight: bold;
    background-color: #0bce35;
}

#datapwrap > div#growthvalues > div#vh {
    font-weight: bold;
    background-color: #000000;
    color:#ffffff;
}

#datapwrap > div#bodymeasurevalues > div#vh {
    font-weight: bold;
    background-color: #800080;
    color:#ffffff;
}

#datapwrap > div#carcassvalues > div#vh {
    font-weight: bold;
    background-color: #ffa500;
}

#datapwrap > div > div.panleft {
    text-align: left;
    padding-left: 40px;
    box-sizing: border-box;
    color: #B83131;
}

#datapwrap .gap {
    height:20px;
}

#datapwrap > div > div {
    width: 100%;
    border-bottom: 1px dashed rgba(44, 62, 80, 0.5);
}

/*Phencon end*/

/*Table*/

#tablecontrol {
    display:none;
}

#tablewrap,
#tablewrap3 {
    height: calc(100% - 125px);
}

#tableleft {
    /* border:1px solid red; */
    min-width:155px;
    height:calc(100% - 10px);
    float:left;
    overflow-y:auto;
}

#tablewrap #tableright {
    height:calc(100% - 20px);
    float:left;
    width:calc(100% - 180px);
    overflow:auto;
}

#tablewrap3 #tableright {
    height:calc(100% - 10px);
    float:left;
    /* width:calc(100% - 175px); */
    /* width:calc(100% - 230px); */
    width:calc(100% - 250px);
    overflow:auto;
}

#tablerightinner {
    width: calc(100% - 1px);
    /* width: fit-content; */
}

#tableleft .row div
{
    display:inline-block;
}

#tableleft .row div.remme {
    width: 22px;
    height: 34px;
    vertical-align: top;
    font-size: xx-large;
    text-align: center;
    line-height: 34px;
    cursor:pointer;
}

#tableleft .row div[id^='cc_'] {
    height: 34px;
    vertical-align: top;
}

#tableleft .row #hdrcc,
#tableleft .row div[id^='cc_']
{
    width:20px;
}

#printlist, #cprintlist {
/* #addme, #printlist, #cprintlist { */
    width: 40px;
    height: 40px;
    border-radius: 5px;
    position: absolute;
    right: 50px;
    bottom: 70px;
    font-size: xx-large;
    text-align: center;
    line-height: 38px;
    cursor:pointer;
    z-index: 3;
    display:none;
}

#printlist, #cprintlist {
    font-size: 16px;
    right: 100px;
    background-image: url('../images/printw.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    cursor:pointer;
}

#cprintlist {
    right: 50px;
}

#cansearchwrap #cprintlist {
    position:static;
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

#tablerightinner .row {
    width:fit-content;
    white-space: nowrap;
}

#tableright #tablerightinner .row:first-child,
#tableleft > .row:first-child {
    position:sticky;
    top:0px;
    background-color: #b4b4b4;
    text-align: left;
    z-index: 3;
    height:50px;
    border-bottom: 1px solid transparent;
}

#tableleft > .row:last-child {
    margin-bottom:15px;
}

#tablerightinner .row > div {
    display:inline-block;
    width:120px;
    border-right:1px solid #b4b4b4;
    border-bottom:1px solid #b4b4b4;
    position:relative;
    vertical-align: top;
    box-sizing: border-box;
    height: 35px;
}

#fromBreed,#toBreed,#andBreed,#showfract {
    display:block;
    margin: 2px auto;
    width: calc(97% - 4px);
}

#fromBreed {
    Opacity: 1;
    cursor:not-allowed;
    appearance: none
}

#showfract {
    background-color: rgba(129, 125, 125, 0.1)
}

#fractcon label {
    margin-left:10px;
}

/* Rangeslider */

#slider2, #slider3 {
    margin: 20px 10px;
    width: calc(97% - 4px);
}

#toCanbirthOk,
#toCanbirthCan,
#toCapcancelOk,
#toCapcancelCan,
#toCapbirthOk,
#toCapbirthCan,
#toCapcomboOk,
#toCapcomboCan,
#toLineremOk,
#tolineremCan,
#fractOk,
#fractCan,
#searchfilOk,
#searchfilCan,
#weighOk,
#weighCan,
#outofrangeOk,
#outofrangeCan
{
    width: 49%;
    display: inline-block;
    vertical-align: top;
}

/* Rangeslider */

#tablerightinner .row div input, 
#tablerightinner .row div select {
    border-radius: 0px;
    box-sizing: border-box;
}

#tablerightinner .row div select,
#tablerightinner .row div input[type='date'] {
    height:34px;
    box-sizing: border-box;
}

#tablerightinner .row {
    text-align: left;
    border-right:1px solid #b4b4b4;
    border-bottom:1.4px solid #b4b4b4;
}

#tableleft .row div,
#tablerightinner .row #hdrgebdatum,
#tablerightinner .row input[id^='gebdatum_'],
#tablerightinner .row #hdrweegdatum,
#tablerightinner .row input[id^='weegdatum_'],
#tablerightinner .row #hdrgebweegdatum,
#tablerightinner .row input[id^='gebweegdatum_']
{
    width:120px;
}

#tableleft .row div {
    border-right:1px solid #b4b4b4;
    border-bottom:2px solid #b4b4b4;
}

#tableleft::-webkit-scrollbar {
    display: none;
}

input[id^='dieridnr1_'],
input[id^='moeridnr1_'],
input[id^='vaaridnr1_'] {
    width:40px;
    border-right:1px solid #b4b4b4;
    border-radius: 0px;
    padding:1px 2px;
    box-sizing: border-box;
}

input[id^='dieridnr2_'],
input[id^='moeridnr2_'],
input[id^='vaaridnr2_'] {
    width:38px;
    border-right:1px solid #b4b4b4;
    border-radius: 0px;
    padding:1px 2px;
    box-sizing: border-box;
}

div[id^='bid_'] {
    width: 40px;
    height: 34px;
    display: inline-block;
    vertical-align: top;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

div[id^='bdy34_'] {
    background-color: #fff;

}

input[id^='dieridnr3_'],
input[id^='moeridnr3_'],
input[id^='vaaridnr3_'] {
    width:53px;
    border-right:1px solid #b4b4b4;
    border-radius: 0px;
    padding:1px 2px;
    box-sizing: border-box;
}

#tablerightinner .row > div#hdrsemenkode {
    width:120px;
}

[id^='breedfract_'] {
    height: 34px;
    width:120px;
}

#tableleft .row #hdrpic,
#tableleft .row select[id^='pic_'],
#tableleft .row div[id^='bdy42_'],
#tableleft .row div[id^='checkwrap_']
{
    width:70px;
}

/* #tablerightinner .row #hdrage,
#tablerightinner .row select[id^='age_'],
#tablerightinner .row div[id^='bdy37_']
{
    width:70px;
} */

#tablerightinner .row #hdraniselect,
#tablerightinner .row select[id^='aniselect_'],
#tablerightinner .row div[id^='bdy51_']
{
    width:120px;
}

#tablerightinner .row #hdrfeedstatus,
#tablerightinner .row select[id^='feedstatus_'],
#tablerightinner .row #hdrcalffeedstatus,
#tablerightinner .row select[id^='calffeedstatus_'],
#tablerightinner .row div[id^='bdy43_'],
#tablerightinner .row #hdrmoerweegdatum,
#tablerightinner .row input[id^='moerweegdatum_'],
#tablerightinner .row #hdrmulti,
#tablerightinner .row input[id^='multi_'],
#tablerightinner .row div[id^='bdy13_'],
#tablerightinner .row #hdrgebouderdom,
#tablerightinner .row input[id^='gebouderdom_'],

#tablerightinner .row select[id^='hornpoll_'],

#tablerightinner .row #hdreaseofbirth,
#tablerightinner .row select[id^='easeofbirth_'],
#tablerightinner .row #hdrserviceinfo,
#tablerightinner .row select[id^='serviceinfo_'],
#tablerightinner .row #hdrnote,
#tablerightinner .row div[id^='bdy8_'],
#tablerightinner .row div[id^='bdy9_'],
#tablerightinner .row div[id^='bdy23_'],
#tablerightinner .row div[id^='bdy24_'],

#tablerightinner .row input[id^='twingender_'],
#tablerightinner .row #hdrtwingender,
#tablerightinner .row div[id^='bdy21_'],
#tablerightinner .row #hdrpregstatus,
#tablerightinner .row input[id^='pregstatus_'],
#tablerightinner .row div[id^='bdy35_'],
#tablerightinner .row #hdrpregstatusdt,
#tablerightinner .row input[id^='pregstatusdt_'],
#tablerightinner .row div[id^='bdy36_'],
#tablerightinner .row #hdrbestgrp,
#tablerightinner .row input[id^='bestgrp_'],
#tablerightinner .row div[id^='bdy19_'],
#tablerightinner .row #hdrnursingstatus,
#tablerightinner .row input[id^='nursingstatus_'],
#tablerightinner .row div[id^='bdy44_'],

#tablerightinner .row #hdrcast,
#tablerightinner .row input[id^='cast_'],
#tablerightinner .row #hdrlength,
#tablerightinner .row div[id^='bdy46_']

{
    width:160px;
}

#tablerightinner .row div[id^='bdy25_'],
#tablerightinner .row #hdrhornpoll,
#tablerightinner .row div[id^='bdy31_'],
#tablerightinner .row #hdrcalfeid,
#tablerightinner .row div[id^='bdy32_'],
#tablerightinner .row #hdrcoweid {
    width:161px;
}

#tablerightinner .row input[id^='pregstatusdt_']
{
    width:159px;
}

#tableleft .row > div#hdrdieridnr,
#tablerightinner .row > div#hdrmoeridnr,
#tablerightinner .row > div#hdrvaaridnr,
#tableleft .row div[id^='bdy1_'], 
#tablerightinner .row div[id^='bdy12_'], 
#tablerightinner .row div[id^='bdy7_'],
#tablerightinner .row #hdrinspectweight,
#tablerightinner .row div[id^='bdy39_']
{
    width:131px;
}



/* inspectweight_ */


#tableleft .row div div[id^='dieridnr1_'],
#tableleft .row div div[id^='dieridnr2_'],
#tableleft .row div div[id^='dieridnr3_']
{
    width: 42.2px;
    border: none;
}

/* breedfract */
#tablerightinner .row input[id^='breedfract_'],
#tablerightinner .row #hdrbreedfract,
#tablerightinner .row div[id^='bdy29_']
{
    width:220px;
}

/* thebreed */
#tablerightinner .row select[id^='thebreed_']
{
    width:200px;
}

#tablerightinner .row div[id^='bdy28_'],
#tablerightinner .row #hdrthebreed  {
    width:201px;
}

/* conditionscore */
#tablerightinner .row input[id^='conscore_'],
#tablerightinner .row #hdrconditionscore,
#tablerightinner .row div[id^='bdy30_'],
#tablerightinner .row #hdrgebweegouderdom,
#tablerightinner .row input[id^='gebweegouderdom_'],
#tablerightinner .row div[id^='bdy50_']
{
    width:180px;
}

/*  cancelreason*/
#tablerightinner .row #hdrcanreason,
#tablerightinner .row input[id^='canreason_'],
#tablerightinner .row div[id^='bdy52_']
{
    width:300px;
}

/* do not open. for testing only. */
#tablerightinner .row #hdrdieridnomr,
#tablerightinner .row div[id^='bdy0_'],
#tablerightinner .row input[id^='dieridnomr1_'], 
#tablerightinner .row input[id^='dieridnomr2_'],
#tablerightinner .row input[id^='dieridnomr3_'],
#tablerightinner .row div[id^='doctype_']
{
    display:none;
}
/* do not open. for testing only. */

input[id^='dieridnomr0_'],
input[id^='dieridnomr1_'], 
input[id^='dieridnomr2_'],
input[id^='dieridnomr3_'] {
    width: 40px;
    border-right: 1px solid #b4b4b4;
    border-radius: 0px;
    padding: 1px 2px;
    box-sizing: border-box;
}

/* #hdrdieridnomr,
#tablerightinner .row div[id^='bdy0_'] {
    width:160px;
} */


#tablerightinner .row div[id^='hdr'] {
    cursor:pointer;
    height:50px;
    white-space: normal;
    line-height: 25px;
    vertical-align: top;
}

#tableleft .row div[id^='hdr'] {
    height:50px;
    white-space: normal;
    line-height: 25px;
    vertical-align: top;
}

#tablerightinner .row select {
    cursor:default;
}

#tablerightinner .row > div#last {
    height: 34px;
    min-width: 0px;
    border-bottom: none;
    width: max-content;
}

/*Table end*/


/*Calendar override*/

/*dateformat*/
/* input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
    color: transparent;
    position: relative;
  }
  
  input[type="date"]::-webkit-datetime-edit-year-field{
    position: absolute !important;
    border-left:1px solid #8c8c8c;
    padding: 2px;
    color:#000;
    left: 56px;
  }
  
  input[type="date"]::-webkit-datetime-edit-month-field{
    position: absolute !important;
    border-left:1px solid #8c8c8c;
    padding: 2px;
    color:#000;
    left: 26px;
  }
  
  
  input[type="date"]::-webkit-datetime-edit-day-field{
    position: absolute !important;
    color:#000;
    padding: 2px;
    left: 4px;
    
  } */

 
/*dateformat*/


#menlefttrigger,#menrighttrigger {
    display:none;
}

 div > button.fc-prev-button.fc-button.fc-button-primary, 
 div > button.fc-next-button.fc-button.fc-button-primary {
    background-color: white;
    
}

.fc-daygrid-event-harness >.fc-h-event,
.fc-timegrid-event-harness > .fc-v-event {
    /* background-color: #e5352e;
    border: 1px solid #e5352e; */
    display: block;
    /* color:black; */
}

.fc-icon-chevron-left:before, .fc-icon-chevron-right:before {
    color:black;
}

#calopt {
    display:inline-flex;
}

.fc-list-day-cushion.fc-cell-shaded {
    display:none;
}

.fc-list-event {
    cursor:pointer;
}

#calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(1) > h2 {
    font-family: 'roboto_condensedregular';
    font-size: 16px; 
    font-weight: normal;
    padding:0 15px;
    background-color: #ffffff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #e5352e;
}

.fc-toolbar-chunk {
    display:inline-block;
    position:relative;
}

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > thead > tr > th > div > div > table > thead > tr > th > div {
    display:none;
}

#calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(1),
#calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(1) > div {
    width:100%;
}

#calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk > .fc-button-group > .fc-button,
#calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk > .fc-button {
   padding: 0.2em 0.35em;
}

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > thead > tr > th > div > div > table > thead > tr > th.fc-col-header-cell.fc-day.fc-day-wed.fc-day-today > div > a {
    font-weight: normal;
    font-size: 30px;
}

#calwrap {
    height:540px;
    position:relative;
    padding:0px;
}

a.fc-event {
    cursor:pointer;
}

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td > div > div > div > table > tbody > tr > td > div > div.fc-daygrid-day-events > div > a > div.fc-event-title {
    font-weight: normal;
    font-size: 16px;
}

#calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
    display: block;
    text-align: end;
    margin-bottom:0px;
} 

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td > div > div > div > table > tbody > tr > td.fc-daygrid-day.fc-day-today {
    background-color: rgba(255,255,255,0.5);
}

#calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2), #calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(3) {
    display:none;
}

.calfull {
    position: absolute;
    z-index: 5;
    background-color: white;
    width: calc((100vw - 80px) - 6.3%);
    /* height: calc(100vh - 25%); */
    top: 8px;
    left: 50%;
    transform: translate(-50%);
}

#calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(3) {
    margin-top:5px;
}

#isrep {
    display:none;
    padding: 8px 0;
    margin-top: 10px;
    line-height: 20px;
    opacity:0.6;
}

.homecontainer, .prehomecontainer {
    margin-left:80px;
    height: 100vh;
    overflow:unset;
    overflow-y:auto;
}

#todatecon, #tocreateevent, 
#toresetcon, #systemcon, #reloadcon, 
#pincon, #toagecon, #tosexcon, #logoutcon,
#tblrowcon, #Uploadcon, #capbusycon, 
#capdonecon, #capcancon, #capsavecon,
#capuploadedcon, #loadspincon, #capremcon, 
#capfincon, #caperrorcon, #weansave,
#months12save, #months18save, #combosave, 
#capcombobestcon, #capcombomanbestcon,
#actofflinecon, #todragcon, #torescon,
#toprevcon, #caprederrorcon, #caporangeerrorcon,
#capyellowerrorcon, #capblueerrorcon, #toscalecon,
#capscalecon, #selfremcon, #selfovercon,
#toanimalcon, #tomanagecon, #langcon, 
#fractcon, #caplineremcon, #searchfiltercon,
#weighcon, #searchfilternothingcon, #outofrangecon,
#ancestorcon, #descendantscon, #genomiccon,
#capcheckcon, #caporangeerrorcon, #cappurpleerrorcon,
#registercon, #kkmbrandcon, #timelinecon, #phenocon, 
#detailcon, #indevidualcon, #sectioncon , #phenowincon 
{
    width: 30%;
    height: auto;
    min-width: 325px;
    background-color: rgba(212,212,212,1);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius: 5px;
    padding-bottom: 5px;
    text-align: center;
    transition: all 0.5s linear;
}

#kkmbrandcon > #canwarn {
    margin-bottom:20px;
}

#ancestorcon,
#descendantscon,
#genomiccon,
#timelinecon,
#phenocon {
    width: 92vw;
    margin-left: 40px;
    height: 95vh;
}

#tosgnewcon,
#reportcon {
    position:absolute;
    top:50%;
    left:50%;
    width: 50vw;
    height: auto; 
    transform:translate(-50%,-50%);
    background-color: rgba(212,212,212,1);
    border-radius: 5px;
    transition:width 0.5s linear;
    overflow: hidden;
    z-index:1;
    min-width: 480px;
    text-align: center;
}

#printcon {
    position:absolute;
    top:50%;
    left:50%;
    width: 50vw;
    height: auto; 
    transform:translate(-50%,-50%);
    background-color: rgba(212,212,212,1);
    border-radius: 5px;
    transition:width 0.5s linear;
    overflow: hidden;
    z-index:1;
    min-width: 480px;
    text-align: center;
}

#outofrangecon {
    width:70%;
}

#outpanel {
    height:45vh;
    min-height: 300px;
    position:relative
}

#detailcon .dashpaneltop {
    margin-bottom:10px;
}

#detailcon div.col-12 {
    text-align: left;
    transition: all 0.5s ease-in-out;
}

#detailcon div.col-12:hover {
    margin-left:10px;
}

#detailcon #detailCan {
    margin-top: 15px;
}

#gridback,
#gridbars,
#griddial {
    /* border:1px solid red; */
    margin: 50px 20px 50px 60px;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

#gridback {
    border-bottom: 1px solid red;
    border: 1px solid #ccc; /* Optional: Border for visualization */
}

#gridbars {
    display: flex; /* Set the parent container to use flex layout */
    justify-content: space-between; /* Distribute the pillars evenly with space between them */
    align-items: flex-end;
    gap: 10px; /* Optional: Adds space between the pillars */
}

.gridneedle {
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: red;
    transition: width 0.2s;
}

.gridneedle.active-needle {
    border: 2px solid yellow;
}

.gridneedle:hover {
    cursor:pointer;
    /* width:10px;
    margin-right:5px; */
}

@keyframes pulse {
  0% { transform: scale(1);}
  50% { transform: scale(1.1);}
  100% { transform: scale(1);}
}

.attention-pulse {
  animation: pulse 3s infinite;
  /* box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); */
}

#gridmarkeradd {
    position: absolute;
    right: 20px;
    top: 5px;
    width: 35px;
    height: 35px;
    background-color: #2c3e50;
    color: #fff;
    border-radius: 5px;
    line-height: 27px;
    cursor:pointer
}

#gridfooter {
    position: relative;
    height:40px;
    background-color: #2c3e50;
    margin: 10px 20px 10px 60px;
    overflow: hidden; 
}

.gridbox {
    position: absolute; /* necessary to manually control left/width */
    top: 0;
    height: 40px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    
}

/* .gridbox-label {
    text-align: center;
    color: white;
    font-size: 14px;
    word-wrap: break-word;
    white-space: normal;
} */

.gridbox-label {
    display: flex;
    
    justify-content: center;  /* Center text horizontally */
    
    color: white;
    font-size: 14px;
    white-space: normal;      /* Allow wrapping */
    word-wrap: break-word;
   
    height: 40px;             /* Fixed height container */
    line-height: normal;      /* No forced line-height */
}

.hundred-day-marker {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: blue;
}

.marker-label {
    position: absolute;
    top: -20px;
    left: -25px;
    font-size: 15px;
    white-space: nowrap;
    background-color: white;
    padding: 0px 5px;
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
}

.hundred-day-marker .marker-label {
    top: 15px;
}



.marker-label .remneedle {
    display: inline-block;
    width: 35px;
    border-radius: 5px;
    font-size: 15px;
    background-color: #B83131;
    color: #fff;
    margin-left: 5px;
    margin-right: -5px;
    height: 30px;
}

.gridline {
    border-top: 1px solid #b0afaf;
    box-sizing: border-box;
    position: relative;
}

.pillers {
    width: 2vw; /* Each pillar takes up 10% of the parent width */
    background-color: #2c3e50; /* Set the background color for the pillars */
    height: 100%; /* Ensure the pillars fill the parent container's height */
    display: inline-block;
}

.sidenbr {
    left: -22px;
    position: absolute;
    top: -20px;
    color:#b0afaf;
}

.btmtxt {
    position: absolute;
    bottom: -45px;
    height: 40px;
    line-height: 20px;
    font-size: 10px;
    color:#b0afaf;
}


#toanimalcon {
    min-width: 350px;
    width:20vw;
}

#tblrowcon div {
    line-height: 22px;
}

#tblrowcon div.warn {
    line-height: 15px;
}

#tblrowcon #filrow
{
    width:250px;
}

#gridlabelleft {
    position: absolute;
    top: calc(100% - 100px);
    left: 0px;
    width: 200px;
    height: 30px;
    text-align: center;
    font-size: 16px;
    color: #b0afaf;
    transform: rotate(270deg);
    transform-origin: 20px center;
    line-height: 20px;
}

#tblrowcon #pnstart
{
    height: 30px;
    margin: 0px;
    padding: 0px;
    vertical-align: text-bottom;
    width:150px;
    padding-left:5px;
    position:absolute;
    top: 1px;
    right:0px;
}

#rederrorclose, #yellowerrorclose {
    cursor:pointer;
}

#tblrowcon > span {
    height: 34px;
    width: 250px;
    display: block;
    background-color: white;
    margin: 0 auto;
    border-radius: 5px;
    border: 1px solid #aea9a9;
    position:relative;
    text-align: left;
    line-height: 34px;
    padding-left: 5px;
    box-sizing: border-box;
    /* display:none; */
}

#noanimals div {
    padding:5px;
}

#tblrowcon > span #deffn {
    width: 45px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    display: inline-block;
    vertical-align: text-bottom;
}

#tblrowcon > span #ynum {
    width: 40px;
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    padding: 1px 0px;
    height: 31px;
}

#resetpromp {
    margin: 10px 0;
}

#todateOk, #todateCan, 
#tocreateOk, #tocreateCan, 
#toreactOk, #toreactCan,
#toresetOk, #toresetCan,
#toReloadOk, #toReloadCan,
#bestweandate, #recallbestweandate,
#best12mondate, #recallbest12mondate,
#best18mondate, #recallbest18mondate,
#bestcombodate, #recallbestcombodate,
#bestweanmandate, #recallbestweanmandate,
#best12monmandate, #recallbest12monmandate,
#best18monmandate, #recallbest18monmandate,
#bestcombomandate, #recallbestcombomandate,
#capcombobestcon [class^=top], #labe, #laba,
#scalefileupOk, #scalefileupCan,
#remrepOk,#remrepCan, 
#manageOk, #manageCan
{
    display:inline-block;
    width: calc(50% - 10px);
    vertical-align: middle;
}

#toReloadOk {
    margin-top: 10px;
}

#labe, #laba {
    padding-left:10px;
}

#forefile, #forexcel {
    display:none;
}

#todate {
    width: 97%;
    margin: 5px 0;
}

#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td > div > div > div > table > tbody > tr > td > div > div.fc-daygrid-day-events > div > a > div.fc-daygrid-event-dot {
    border: calc(var(--fc-daygrid-event-dot-width)/2) solid #e5352e;
}

#calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr
{
    margin-bottom: 0.5em;
}

#calendarB > div.fc-view-harness.fc-view-harness-active > div > table:nth-child(1) {
    background-color: rgba(255,255,255,0.5);
}

#calentry, #gocal {
    position:absolute;
    right:20px;
    bottom:20px;
    border: 1px solid rgb(174, 169, 169);
    background-color: #fff;
    width: 34px;
    height:44px;
    border-radius: 5px;
    padding: 0 5px;
    z-index:3;
    line-height:44px;
    cursor:pointer;
    font-size: 20px;
    display:none;
}

#calentry:hover {
    background-color: #B83131;
    color:#fff;
}

#gocal {
    right:80px;
    background-image: url('../images/calendar.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

#gocal:hover {
    /* background-color: #47cece; */
    background-color: #d3c1af;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

#evtoptwrap {
    /* perspective: 600px; */
    height:155px;
    margin-bottom: 10px;
}

#evtoptcube {
    width: 95%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    transition: transform 1s;
    margin:0 auto;
    
}

#evtoptcube #evresc,
#evtoptcube #evrept,
#evtoptcube #evremv {
    position:absolute;
    height:155px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}

/* front */
#evtoptwrap #evresc {
    background-color: rgba(212,212,212,1);
}

#evtoptwrap #evresc.front {
    transform: rotateY(  0deg) translateZ(75px);
}

#evtoptcube.showfront {
    transform: translateZ(-75px) rotateY(0deg);
}

/* bottom */
#evtoptwrap #evrept{
    background-color: rgba(212,212,212,1);
}

#evtoptwrap #evrept.bottom {
    transform: rotateX(-90deg) translateZ(75px);
}

#evtoptcube.showbottom { transform: translateZ(-75px) rotateX(  90deg); }

/* back */
#evtoptwrap #evremv{
    background-color: rgba(212,212,212,1);
}

#evtoptwrap #evremv.back {
    transform: rotateX(180deg) translateZ(75px);
}

#evtoptcube.showback { transform: translateZ(-75px) rotateX(180deg); }

#untdate {
    width:100%;
    margin:0;
}

#reptypes .rtypes {
    display:none;
}


#edttit, #edtnte {
    display:inline-block;
    width:25px;
    height:25px;
    background-image: url('../images/edit.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border:1px solid #aea9a9;
    border-radius: 5px;
    vertical-align: middle;
    cursor:pointer;
    margin-left: 10px;
}

#evremv > div.col-5,
#evremv > div.col-7 {
    margin-bottom:0px;
}

#evremv > div.col-12 {
    margin-top:0px;
}

#affev {
    text-align: left;
}
/*toggle*/


  /* Hide default HTML checkbox */
  .evswitch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .evslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .evslider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .evslider {
    background-color: #2196F3;
  }
  
  input:focus + .evslider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .evslider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .evslider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }


/*toggle END*/

#soswrap {
    text-align: center;
}

.sos {
    display:inline-block;
    width:40px;
    height:40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 40px 5px 10px 5px;
}

#fbb {
    background-image: url("../images/fbb.webp");    
}

#ttb {
    background-image: url("../images/ttb.webp");
}

#ytb {
    background-image: url("../images/ytb.webp");
}

#lib {
    background-image: url("../images/lib.webp");
}

#icr {
    background-image: url("../images/icr.webp");
}

#rss {
    background-image: url("../images/rss.webp");
}

.evl {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 8px;
    top: 8px;
    background-color: white;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ggl {
    background-image: url("../images/ggl.webp");
}

.stb {
    background-image: url("../images/stb.webp");
}

#dragstrt, #resdur {
    margin-top:10px;
}

#dragstp, #resdur {
    margin-bottom:10px;
}

#eventdone {
    width: fit-content;
    padding: 0 5px;
    margin-top: -25px;
}

#fcalfilt {
    position: absolute;
    left: 0px;
    top: 3px;
    width: fit-content;
    height: 34px;
}

#calfilt {
    margin-left: 0.75em;
    width: fit-content;
    height: 40px;
    border: 1px solid black;
}

/* add radius to vorder on next button */
#calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2) > div.fc-button-group > button.fc-next-button.fc-button.fc-button-primary
{
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}


/*Calendar override END*/


/*FB and RSS*/
#repwrapcover {
    height:300px;
    padding:0px;
}

#repwrap {
     padding:0 0px;
    overflow:hidden;
    overflow-y:auto;
    height:240px; 
    position:relative;
}

#inmedia {
    font-family: 'roboto_condensedregular';
    font-size: 16px;
    font-weight: normal;
    padding: 0 15px;
    background-color: #ffffff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #e5352e;
    height:40px;
    position:relative;
    text-align: left;
    
}

#inmedia div {
    
    width:120px;
    display:inline-block;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    height:34px;
    line-height: 34px;
    text-align: center;
    cursor:pointer;
    background-size: 10%;
    background-size: 5px;
    padding-left:10px;
}

#inmedia div#fbl {
    background-image: url('../images/fbb.webp');
    background-repeat: no-repeat;
    background-position: 5px;
    background-size: 20%;
    display:none;
}

#inmedia div#rss {
    background-image: url('../images/rss.webp');
    background-repeat: no-repeat;
    background-position: 5px;
    background-size: 20%;
    display:none;
}

#inmedia div#skyscraper {
    width: 24px;
    position:absolute;
    right:10px;
    top:2px;
    background-image: url('../images/goup.webp');
    background-repeat: no-repeat;
    background-size: cover;
}



/*FB END*/


/*region*/

#setTA {
width:calc(100% - 85px);
}

#optreset {
    position: absolute;
    right: 29px;
    top: 57px;
    height: 32px;
    width: 78px;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    font-family: roboto_condensedregular;
    font-size: 16px;
    background-color: #ffffff;
    line-height: 32px;
    text-align: center;
    cursor:pointer;
}

.TAcon > #setspecieswrap > div.col-12 {
    text-align: left;
}

/* #setspecieswrap > div:nth-child(5) {
    display:none;
} */

/*region END*/

/*TAmore*/

#Setwrap #mapwrap {
    font-size: 16px;
    margin-bottom: 50px;
}

#Setwrap label {
    font-style: italic;
}

#setspecieswrap > div > div > select {
    margin-bottom: 5px;
}

#setspecieswrap, #linkedwrap {
    height:auto;
}

#setbreed, #sethandler {
    display:none;
}

#sethandler,
#setownbreeds > div.head > div {
    border: none;
    border-bottom:1px solid rgb(229, 53, 46, 1);
    border-radius:0px;
}

#sethandler {
    width:100%;
}

#setspecieswrap > div > div:nth-child(1) > div.loader
{
    display:none;
    width: 20px;
    height: 20px;
}

#setspecieswrap > div:nth-child(2).col-6, 
#setlang, #setlat, #setlong, #gomaps,

/* #linkedwrap > div > div > div.row, */
#setownbreeds > div.row,
#setownbreeds > div.rows > div,
#setownbreeds > div.head > div,
#setspecieswrap > div > div:nth-child(2) > div
{
    text-align: left;
}

#gomaps div {
    color:#bb3131;
    display:inline-block;
    cursor:pointer;
    text-decoration: underline;
}

#setownbreeds > div:nth-child(1) {
    background-color: rgb(255, 255, 255);
}

#setownbreeds > div.rows {
    height: fit-content;
    overflow-y: auto;
}

#linkedwrap > div > div.row [class^="col"] {
    margin: 0.1rem 2%;
}

#linkedwrap > div.col-6 > div.row > div {
    display:inline-block;
}


/* map */

#mapwrap > #leavemap {
    height: 100%;
}

.TAcon {
   position:absolute;
   left:0px;
   height:calc(100vh - 120px); 
    width:25vw;
}

#setspecieswrap > div.col-12 select {
    margin-top:5px;
}

.TAcon #setspecieswrap {
    height:100%;
    border-radius:0px;
}

#TAmap {
    width:100%;
    height: calc(100vh - 120px);
    position: absolute;
    right: 0px;
    
}

#TAmap #leavemap {
    height: calc(100vh - 120px);
}

#taconhandle {
    background-color:#FFF;
    background-image:url('../images/goleft.webp');
    background-repeat: no-repeat;
    background-position:center;
    background-size: contain;
    width: 20px;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor:pointer;
}

.TAcon > #setspecieswrap > div.col-12 {
    padding-right:10px;
    box-sizing: border-box;
}

.mnr {
    clear:both;
    background-color: #B83131;
    color:#fff;
} 

#mng {
    clear:both;
    background-color: rgb(62, 149, 73);
    color:#fff;
}

.wrappin {
    position: relative;
}

.inslogo {
    position:absolute;
}

#markersfoot {
    display:block;
    position:absolute;
    bottom:0px;
    left:0px;
    width: calc(100% - 30px);
    height:30px;
    background-color: #2c3e50;
    color:#FFF;
    line-height: 30px;
}

#markersbusy {
    
    position: absolute;
    height: 30px;
    width: calc(100% - 30px);
    right: 30px;
    bottom: 30px;
    color:white;
    line-height: 30px;
}

#markersbusy div.loader {
    display:none;
    width: 20px;
    height: 20px;
    margin: 0 auto;
}

#markersbusy div.download, #cslide #download {
    display:none;
    background-color: #e5352e;
    background-image: url('../images/download.webp');
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    /* width: calc(100% - 0px); */
    width: 100%;
    height:30px;
    left: 0px;
    position: absolute;
    cursor:pointer;
}

#cslide #download {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0px;
    top:0px;
    left:unset;
    background-color: #47cece; /*this color to get the red if inverted by filter.*/
    filter: invert(100%);
    -webkit-filter: invert(100%);
    border-radius:5px;
}


.leaflet-marker-icon {
    height:auto;
}


#optstext,#optsearch {
    display:inline-block;
    vertical-align: top;
}

#optstext {
    width: calc(100% - 50px)
}

#optsearch {
    width:34px;
    margin-left:5px;
    background-color: #fff;
    background-image: url(../images/search.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* map END */

/*Faults Edit*/

#statswrap {
    position:relative;
    min-height:540px;
    height:540px;
}

#editlist > div > div > div > table > tbody > tr > td.fc-list-event-time {
    display:none;
}

#editlist > div > div > div > table > tbody > tr > td.fc-list-event-graphic > span.fc-list-event-dot {
    border: calc(var(--fc-list-event-dot-width)/2) solid #e5352e;
}

.dashpaneltop {
    width:100%;
    min-height:30px;
    line-height:30px;
    background-color: #ffffff;
    margin-bottom:3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #e5352e;
}

.dashpaneltoptt {
    width:100%;
    min-height:20px;
    line-height:20px;
    background-color: #ffffff;
    margin-bottom:3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #e5352e;
    color:#000000;
}

#onelogin > span {
    font-size: 16px;
}

#showfaultscount {
    text-align: left;
    width:100%;
    border:1px solid #ffffff;
    font-size: 16px;
    display:inline-block;
    vertical-align: top;
    overflow-y:auto;
    height: 66px;
}

#showfaultswrap {
    border:1px solid #ffffff;
    width:100%;
    height:auto;
    overflow:hidden;
    overflow-y:auto;
}

.dashbutton {
    position:relative;
    width: auto;
    height: 45px;
    padding: 3px 5px;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    margin: 5px;
    display: inline-block;
    background-color: var(--fc-button-bg-color);
    border-color: var(--fc-button-border-color);
    color: var(--fc-button-text-color);
    box-sizing:border-box;
}

.dashbuttoncount {
    position:relative;
    height:30px;
    min-width:30px;
    border:2px solid #e5352e;
    border-radius: 5px;
    display: inline-block;
    margin-left:10px;
    text-align: center;
    line-height: 30px;
}

.stepback {
    position: absolute;
    top: 6px;
    height: 35px;
    left: 10px;
    width: 35px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #aea9a9;
    background-color: #ffffff;
    background-image: url("../images/goleft.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 65%;
    background-position: center;
}

.isOnOff {
    width: 100vw;
    top: 0px;
    bottom: 0px;
    background-color: rgba(255,255,255,1);
    position: absolute;
    z-index:99;
}

#breedsel, #parsel {
    height: 22px;
    line-height: 1;
    margin-left:15px;
    text-align: left;
}

#parsel {
    font-family: 'roboto_condensedregular';
    font-size: 16px;
    margin-top: 15px;
}

#mydetails > row > div.col-3 {
    margin-top: 15px;
}

#IparPers,#parPers,
#IparEpos,#parEpos,
#IparSel,#parSel,
#IparDorp,#parDorp,
#IparLoc,#parLoc
{
    font-family: 'ralewaymedium';
    font-size: 14px;
    display:inline-block;
    vertical-align: middle;
}

#IparBull,
#IparPers,
#IparEpos,
#IparSel,
#IparDorp,
#IparLoc
{
    display:inline-block;
    width:25px;
    height:25px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left:5px;
}

#IparBull,
#parRas {
    display: inline-block;
    vertical-align: middle;
}

#IparBull {
    background-image:url('../images/bullhead.webp');
}

#IparPers {
    background-image:url('../images/contact-person.webp');
}

#IparEpos {
    background-image: url('../images/contact-email.webp');
}

#IparSel  {
    background-image: url('../images/contact-mobile.webp');
}

#IparDorp {
    background-image: url('../images/contact-town.webp');
}

#IparLoc {
    background-image: url('../images/contact-location.webp');
}

#hslideopen {
    display:none;
}

#offlineribbon {
    position: absolute;
    width: 150px;
    height: 30px;
    right: -28px;
    top: 32px;
    background-color: red;
    transform: rotate(45deg);
    clip-path: polygon(16% 0%, 84% 0%, 100% 80%, 0 80%);
    text-align: center;
    line-height: 26px;
    color: white;
    font-weight: bold;
    display:none;
}

/*

#offlineban {
    position:relative;
    width:100%;
    height:20px;
    background-color: #B83131;
    color:#ffffff;
    text-align: center;
}

 #offlinelogo {
    width:50px;
    height:50px;
    margin:0 auto;
    background-image: url('../images/offline.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */ 

#showdisconnected, #showbrowsers {
    position:absolute;
    text-align: center;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family: roboto_condensedregular;
    font-size: 16px;
    
}

#disconnectedlogo {
    width:170px;
    height:170px;
    margin:0 auto;
    background-image: url('../images/chewcow.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} 

#disconnectedok {
    background-color: var(--fc-button-bg-color);
    border-color: var(--fc-button-border-color);
    color: var(--fc-button-text-color);
    cursor:pointer;
}

#breedfaultswrap, #breeduploadwrap, #breedcyclewrap, 
#breedcalvingwrap, #breedpregnancywrap, 
#breedweaningwrap, #breedgrowthwrap,
#breedreportwrap {
    height: calc(100% - 90px);
    position:relative;
}

#breeduploadwrap {
    height: 100%;
}

.fouter {
    position:relative;
    border: 1px solid white;
    background-color: #D9D9D9;
    cursor:pointer;
    margin-bottom:5px;
    padding:5px;
}

.fleft {
    width:20%;
    border:1px solid black;
    border-radius: 5px;
    display:inline-block;
    vertical-align: middle;
    background-color: #ffffff;
}

.fright {
    width:75%;
    margin:-4px;
    display:inline-block;
    vertical-align: middle;
    padding-left: 20px;
    text-align: left;
}

#hslide, #fslide, #uslide, #cslide, #sslide, #pslide, #cslide {
    height:60px;
    overflow-y:hidden;
    text-align: left;
    display:block;
    position:relative;
    overflow-x:auto;
}

#hslidewrap, #fsliderwrap, #usliderwrap, #csliderwrap, #ssliderwrap, #psliderwrap, #csliderwrap {
    width: 100%;
    overflow: hidden;
    position:relative;
}

.TA, .PAR {
    display:none;
}

/* #hslidewrap #hslide .spanelt {
    height:34px;
    padding-top:0px;
} */

#hslidewrap #hslide .spanelt .hpsfr {
    height:50px;
    line-height: 50px;
    
}

#breedwrap, #faultswrap, 
#uploadwrap, #mapwrap, 
#cyclewrap, #servicewrap, 
#setwrap, #reportwrap,
#findwrap {
height: calc(100vh - 93px);
}

#faultswrap, #uploadwrap, 
#mapwrap, #servicewrap,
#findwrap
{
    position:relative;
    overflow: hidden;
    width: 100%;
    border-radius: 0%;
}

#faultswrap #breedfaultswrap {
    height:100%;
    text-align: left;
}

#faultswrap #breedfaultswrap #fcontainer,
#faultswrap #breedfaultswrap #feditor {
    height:89%;
    display:inline-block;
}

#fcontainer {
    width:100%;
    transition: all .5s ease-in; /* Animation */
}

#feditor {
    width:0px;
    transition: all .5s ease-in; /* Animation */
}

#feditor .rowbottom {
    margin-top: 20px;
}

.gully {
    height: 25px;
    border-bottom: 1px solid #2c3e50;
    width: 100%;
}

.ec {
    background-color: rgba(137, 215, 123, 0.2);
}

.em {
    background-color: rgba(255, 105, 180, 0.2);
}

.ev {
    background-color: rgba(30, 144, 255, 0.2);
}

#feditor > div:nth-child(14) > div.rowbottom {
    margin-top: 20px;
    margin-right: 15px;
}

.frow div.hide,
input.hide {
    display:none;
}

#dieridnrswrap,
#moeridnrswrap,
#vaaridnrswrap {
    height:36px;
    text-align: left;
}

input[id^=dierids], 
input[id^=moerids], 
input[id^=vaarids]
{
    height: 36px;
    width: 20px;
    background-color: #ffffff;
    display: inline-block;
    text-align: center;
    transition: all .5s ease-in; /* Animation */
    border-radius: 5px;
}

#dierids1,
#moerids1,
#vaarids1
{
    width:39px;
}
#dierids2,
#moerids2,
#vaarids2
{
    width:24px;
}
#dierids3,
#moerids3,
#vaarids3
{
    width:54px;
}
#dierids4,
#moerids4,
#vaarids4
{
    width:34px;
}
#dierids5,
#moerids5,
#vaarids5
{
    width:54px;
} 


#breedwrap > div {
    text-align: center;
}

#flist, #blist, #wlist {
    text-align: left;
    background-color: rgba(255,255,255,1);
    font-size:0px;
    line-height: 20px;
    min-height:40px; 
    position:relative;
    padding-left:10px;
}

#breedfaultswrap #flist {
    line-height: 40px;
}

/*for double rows head*/
#breedgrowthwrap #wlist > div:nth-child(1) {
    border-bottom: 1px dashed lightgrey;
}
/*for double rows info*/
#breedgrowthwrap #wcontainer .brow > div:nth-child(1) {
    border-bottom: 1px dashed white;
}

#fcontainer div.frow div.fbreed, 
#wcontainer div.frow div.fbreed,
#colbreed.fhead {
    margin-left:10px;
}

.frow, .brow, .wbrow, .cbrow  {
    border-bottom:1px solid rgba(255,0,0,0.5);
    text-align: left;
    font-size: 0;
    position:relative;
    padding-left:10px;
}

/* hidden to assist the sort of seperate column types */
.brow .fserviced, .brow .fcalving { 
    display:none; 
}

.cbrow div {
    font-size:16px;
}

.brow .fchildren, 
#colage
#blist #colchildren, #colchildren.fhead
{
    width:150px;
}

.frow div, .brow div, .fhead, .whead {
    display:inline-block;
    width:120px;
    vertical-align:top;
    font-size:16px;
}

.frow div.ferror {
    width: calc(100% - 645px);
}

.frow div.ferrornum {
    display:none;
}

.brow div {
    line-height:34px;
    vertical-align: middle;
}

.brow div.dbl {
    width:100%;
    font-size: 0px;
}

.fhead {
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) calc(50% - 0px);
    background-size: 15px;
    height:40px;
    padding-right: 10px;
    box-sizing: border-box;
}

.whead {
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) calc(50% - 0px);
    background-size: 15px;
    height:40px;
}

.whead#coldob,
.fhead#coldob,
.fhead#colstatus,
div.fstatus,
.fhead#colcandate,
div.fcandate,
.frow div.fdob,
div.fdob,
div.fnumber,
.whead#colweight,
div.fweight,
.whead#colweightadj,
div.fweightadj,
.whead#collhratio,
div.flhratio,
.whead#colskinthickness,
div.fskinthickness,
.fhead#colscrotumcircum,
.whead#colscrotumcircum,
div.fscrotumcircum,
.whead#collength,
div.flength,
.whead#colheight,
div.fheight,
.whead#colkleiberratio,
div.fkleiberratio,
.whead#colkleiberind,
div.fkleiberind,
.whead#colkleiberacc,
div.fkleiberacc,
.fhead#colfcr,
.whead#colfcr,
div.ffcr,
.whead#colweanind,
div.fweanind,
.whead#colweandirind,
div.fweandirind,
.whead#colweandiracc,
div.fweandiracc,
.whead#colweanmatind,
div.fweanmatind,
.whead#colweanmatacc,
div.fweanmatacc,
.fhead#colada,
.whead#colada,
div.fada,
.fhead#coladg,
.whead#coladg,
div.fadg,
.whead#coltwlengthind,
div.ftwlengthind,
.whead#coltwlengthacc,
div.ftwlengthacc,
.whead#coltwheightind,
div.ftwheightind,
.whead#coltwadaind,
div.ftwadaind,
.whead#coltwadgind,
div.ftwadgind,
.whead#coltwfcr,
div.ftwfcr,
.fhead#colweighage,
div.fweighage
{
    width:110px;
}

.fhead#coldob,
.frow div.fdob {
    width:115px;
}


#utweanbody div[id^=weighage_],
#utweanbody div[id^=weighdate_],

#ut12monbody div[id^=weighage_],
#ut12monbody div[id^=weighdate_],

#ut18monbody div[id^=weighage_],
#ut18monbody div[id^=weighdate_],

#utcombobody div[id^=weighage_],
#utcombobody div[id^=weighdate_]
 {
    width:calc(100% - 20px);
    border-radius:5px;
}

#flist .fhead#colage,
#blist .fhead#colage,
.whead#colage,
#colage,
div.fage,
.whead#colsex,
.fhead#colsex,
div.fsex,
#flist .fhead#colbreed,
#fcontainer .fbreed,
div[id^='sex_']
{
    width:80px;
}



#flist .fhead#colsex,
#fcontainer .fsex
{
    width:40px;
}

#utweanbody select,
#ut12monbody select,
#ut18monbody select,
#utcombobody select
{
    width:200px;
}

#utweanbody select[id^=feedstatus],
#ut12monbody select[id^=feedstatus],
#ut18monbody select[id^=feedstatus],
#utcombobody select[id^=feedstatus]
 {
    width:132px;
}

#dateadj, #resan {
    width:170px;
    background-image: url('../images/daterange.webp');
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    margin-right: 5px;
}

#resan {
    background-image: url('../images/check.webp');
}



/* #colcalfweight,
#colcowweight,
#colcowheight,
#colcowlength,
#colcowlength
{
    padding-left:10px;
} */
#colcowlength,
#colcowscrotum,
#colcowhide
{
    margin-left:5px;
}

#colfeedstatuscalf, 
#colfeedstatuscow,
#colraisestatuscow {
    margin-left:5px;
    width:145px;
}

#colraisestatuscow {
    width:210px;
    margin-left: 15px;
}

/*weantestinfo*/
.wtst {
background-color: white;
    border-radius: 5px;
    padding-left: 5px;
}

/*string wrap*/

#colweanind,#colskinthickness
/* ,#colweight,
#colweightadj */
{
    word-spacing:9999px;
}

.wbrow .fold, 
.cbrow .fold
{
    display:inline-block;
}

#colnumber,
/* .wbrow .fnumber,
.wbrow .fanumber, */
.wbrow .fweighdate,
.wbrow .fweighage,
.wbrow .fcalfweight,
.wbrow .factualweight,
.wbrow .fcowweight,
.wbrow .fcowheight,
.wbrow .fcowlength,
.wbrow .fscrotum,
.wbrow .fcowhide,
.cbrow .fcompnumber,
.cbrow #fcancelreason
{
    display:inline-block;
    width:120px;
}

.wbrow div {
    font-size:16px;
}

.wbrow .fsex,
.wbrow .fage,
.cbrow .fsex,
.cbrow .fage
{
    display:inline-block;
    width:80px;
}

#colactualweight,
#colcalfweight,
#colcowweight,
#colcowheight,
#colcowlength,
#colcowscrotum,
#ut12monbody .wbrow .factualweight,
#ut12monbody .wbrow .fcowweight,
#ut12monbody .wbrow .fcowheight,
#ut12monbody .wbrow .fcowlength,
#ut12monbody .wbrow .fscrotum,
#ut12monbody .wbrow .fcowhide,
#ut18monbody .wbrow .factualweight,
#ut18monbody .wbrow .fcowweight,
#ut18monbody .wbrow .fcowheight,
#ut18monbody .wbrow .fcowlength,
#ut18monbody .wbrow .fscrotum,
#ut18monbody .wbrow .fcowhide,

#utcombobody .wbrow .factualweight,
#utcombobody .wbrow .fcalfweight,
#utcombobody .wbrow .fcowweight,
#utcombobody .wbrow .fcowheight,
#utcombobody .wbrow .fcowlength,
#utcombobody .wbrow .fscrotum,
#utcombobody .wbrow .fcowhide

{
    display:inline-block;
    width:80px;
}

#ut12monbody .wbrow input[type='number'], 
#ut12monbody .wbrow select,
#ut18monbody .wbrow input[type='number'], 
#ut18monbody .wbrow select,
#utcombobody .wbrow input[type='number'], 
#utcombobody .wbrow select {
    width:100%;
}

#colnumber,
.wbrow .fnumber,
.wbrow .fanumber,
.wbrow .fdob,
.wbrow .fweighage,
.cbrow .fdob,
.cbrow .fstatus,
.cbrow .checkwrap,
.cbrow .fcandate
{
    display:inline-block;
    width:110px;
}




#adw {
    line-height: 20px;
    margin-bottom: 15px;
}

.cbrow .freason,
.cbrow .fnumber
{
    display:inline-block;
}

.wbrow .checkwrap
{
    display: inline-block;
    vertical-align: top;
    padding-top: 5px;
    width: 60px;
}

.cbrow .checkwrap {
    display: inline-block;
    vertical-align: top;
    padding-top: 5px;

}

.wbrow .wrap,
.wbrow .fwrap,
.wbrow .nwrap
{
    display: inline-block;
    width: 145px;
}

.cbrow #fcanceldate {
    display: inline-block;
    width: 150px;
}

#utweanbody > div:nth-child(1) > div:nth-child(14),
#ut12monbody > div:nth-child(1) > div:nth-child(14),
#ut18monbody > div:nth-child(1) > div:nth-child(14),
#utcombobody > div:nth-child(1) > div:nth-child(14),
#wcontainer > div.brow > div > sub,
.whead > sub
{
    vertical-align: middle;
}

#searchfiltercon {
    text-align: center;
}

#filage, #filrow, #filsex, 
#filteby, #fildateS, #fildateE, 
#dosearchval,#cansearchval,
#filseqS, #filseqE, #wdstatus
{
    width:97%;
    margin:10px 0;
}

#bydate > label {
    display:none;
    width:100%;
}

/*ranger*/

#ranger.wrapper {
    width: 80%;
    margin:0 auto;
}
 #ranger .containera {
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: 30px;
  }
  #ranger input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left:0;
    background-color: transparent;
    pointer-events: none;
  }
  #ranger .slider-track {
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
  }
  #ranger input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 5px;
  }
  #ranger input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    height: 5px;
  }
  #ranger input[type="range"]::-ms-track {
    appearance: none;
    height: 5px;
  }
  #ranger input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    background-color: #2c3e50;
    cursor: pointer;
    margin-top: -9px;
    pointer-events: auto;
    border-radius: 50%;
  }
  #ranger input[type="range"]::-moz-range-thumb {
    appearance: none;
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #2c3e50;
    pointer-events: auto;
    border: none;
  }
  #ranger input[type="range"]::-ms-thumb {
    appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #2c3e50;
    pointer-events: auto;
  }
  #ranger input[type="range"]:active::-webkit-slider-thumb {
    background-color: #ffffff;
    border: 1px solid #2c3e50;
  }
  #ranger .values {
    background-color: #2c3e50;
    width: 40%;
    position: relative;
    margin: auto;
    padding: 10px 0;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    color: #ffffff;
  }
  #ranger .values:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border-top: 15px solid #2c3e50;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    margin: auto;
    bottom: -14px;
    left: 0;
    right: 0;
  }

  #ranger .slider-track {
    background-color: #2c3e50;
  }



/*ranger*/
/*ranger*/


#capcombobestcon .loader, 
#capcombomanbestcon .loader {
    display:none;
    margin-left: calc(50% - 12.5px);
    width: 25px;
    height: 25px;
}

/* .frow div.ftype {
    display:none;
} */

.frow.dark {
    background-color: #ebebeb; /* Example color for dark rows */
    cursor:pointer;
    transition: all .5s ease-in; /* Animation */
}

.frow.light {
    background-color: #ffffff; /* Example color for light rows */
    cursor:pointer;
    transition: all .5s ease-in; /* Animation */
}

.frow.dark:hover,
.frow.light:hover {
    background-color: rgb(184, 49, 49,0.6);
}

.frow div.fbreed, .frow div.fname {
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    /* text-overflow: ellipsis; */
}

.frow div.freact {
    width: 120px;
    /* padding-right: 20px; */
}


#flist > #colmessage {
    display:inline-block;
    width: calc(100% - 615px);
    padding-right: 20px;
    box-sizing: border-box;
}


.wbrow [id^=reset] {
    width: 100px;
    height: 34px;
    background-color: #d3c1af;
    color:#000000;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #aea9a9;
    background-image: url(../images/reset.webp);
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert(1);
    font-size: 16px;
    text-align: center;
    padding-left: 22px;
    /* line-height: 30px; */
    cursor:pointer;
    margin-left:10px;
}

pre {
margin: 0px;
}

#ffilters {
    position:relative;
    text-align: left;
    height: 50px;
    z-index:1;
}



#ffilterwrap {
    overflow: hidden;
    height: 44px;
    width:fit-content;
    transition: width 0.2s linear;
}

.fltfilter, .fsortb, 
.freact, .bsortb {
    height:40px;
    width:170px;
    background-color: rgba(255,255,255,1);
    display:inline-block;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    margin :2px 5px 0 5px;
    text-align: center;
    cursor:pointer;
    vertical-align: top;
}

#ffilterwrap > div.fltfilter,
#breedweaningwrap > #ffilters .fltfilter,
#breedcalvingwrap > #ffilters .fltfilter {
    font-size: 1.05rem;
    line-height: 42px;
}

#breedpregnancywrap > #ffilters .fltfilter,
.fltfilter {
    line-height: 18px;
}

#switcher1, #switcher2 {
    width:84px;
    display:inline-block;
    height:40px;
}

#switcher1 {
    border-right:1px solid #aea9a9;
}

#switcher2 {
    border-left:1px solid #aea9a9;
}

#sorta {
    text-align: center;
}

.fsortb, .bsortb {
      background-color: var(--fc-button-bg-color);
      border-color: var(--fc-button-border-color);
      color: var(--fc-button-text-color);
  }

.ftfilter {
    display:none;
}

.ftfilter, #toaction, #fsearch {
    display: block;
    height: 40px;
    width: 170px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #aea9a9;
    border-radius: 5px;
    margin: 2px 5px 0 5px;
    text-align: center;
    cursor: pointer;
}

#ffilterwrap, #toaction {
    display:inline-block;
    vertical-align: top;;
}

.fltfilter {
    display:block;
}

/* .nonact {
    background-color: var(--fc-button-text-color);
    border-color: var(--fc-button-border-color);
    color: var(--fc-button-bg-color);
} */

input[type='button'].nml, .nml {
    background-color: rgb(255, 255, 255);
    border-color:  rgba(255, 255, 255, 0.5);
    color: rgb(0, 0, 0)
}

input[type='button'].cta, .cta {
    background-color: rgba(187, 49, 49, 1);
    border-color:  rgba(187, 49, 49, 0.5);
    color: var(--fc-button-text-color);
}



#setaccount > div:nth-child(2) > div.cta {
    width:fit-content;
    padding:0 5px;
}

.fsortdrop, .bsortdrop {
    height: 45px;
    position: absolute;
    right: 0px;
    overflow: hidden;
    transition: height 0.3s linear;
    top: 0px;
}

.fsortb, .bsortb {
    display:block;
    text-align: left;
    padding-left: 5px;
}

#dob.fsortb, #name.fsortb, #number.fsortb, #sex.fsortb,
#dob.bsortb, #name.bsortb, #number.bsortb, #herd.bsortb,
#serviced.bsortb, #children.bsortb, #calving.bsortb, 
#herd.bsortb, #age.bsortb, #sex.bsortb, #test.bsortb,
#weight, #contgroup, #weightadj, #ada, #adg, #lhratio,
#skinthickness, #scrotum, #length.bsortb, #height.bsortb,
#fcr.bsortb, #kleiberratio.bsortb, #status.bsortb, 
#compnumber.bsortb, #candate.bsortb, #canreason.bsortb,
#wean.bsortb, #sect.bsortb, #months12.bsortb, #months18.bsortb,
#phase.bsortb, #weanind.bsortb, #weandirind.bsortb, #weanmatind.bsortb,
#twheightind.bsortb, #twlengthind.bsortb, #twadaind.bsortb,
#twadgind.bsortb, #twfcrind.bsortb, #kleiberind.bsortb
{
    background-image: url('../images/sortupw.webp');
    background-repeat: no-repeat;
    background-position: 155px center ;
    background-size: 10px;
}

#fcontainer, #ucontainer, #wcontainer, #feditor  {
    overflow:hidden;
    overflow-y:auto;
    height: calc(100% - 90px);
}

#wcontainer {
    height: calc(100% - 130px);
}

#ucontainer {
    height: 100%;
}

#colmessage {
    position:relative;
}

#stretch {
    position: absolute;
    top: 2px;
    height: 35px;
    right: 10px;
    width: 35px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #aea9a9;
    background-color: #ffffff;
    background-image: url(../images/goright.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 65%;
    background-position: center;
    display:none;
}

#stretch:hover {
    background-color: #bb3131;
}

#hcontainer,#hcontainerback {
    height: calc(100% - 90px);
    width: calc(100% - 20px);
    background-color: rgba(255,255,255,0.5);
    /* background-image: url('../project_files/7star.png');
    background-repeat: no-repeat;
    background-size: calc(100% - 233px);
    background-position: center; */
    /* position:absolute; */
    text-align: left;
    border-radius: 5px;
}

#hcontainerback {
    background-color: #fff;
}

#dashcentercolback, #baserowwrapback {
    position:relative;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
}

#dashcentergenstats {
    position:absolute;
    height: 47%;
    width: calc(100% - 20px);
    background-color: rgba(255,255,255,0.5);
    border-radius: 5px;
    left:50%;
    top: 2%;
    transform: translate(-50%);
}

#dashcenterstats {
    position:absolute;
    height: 47%;
    width: calc(100% - 20px);
    background-color: rgba(255,255,255,0.5);
    border-radius: 5px;
    left:50%;
    bottom: 2%;
    transform: translate(-50%);
}

#squareround {
    border: 1px solid #000;
    background-color: #fff;
    width: 30px;
    height: 30px;
    background-image: url('../images/square.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 87%;
    position: absolute;
    right: 35%;
    top: 5px;
    border-radius: 5px;
    cursor: pointer;
    display:none;
}

.plot {
    border: 1px solid#aea9a9;
    height: 20%;
    width: 20%;
    border-radius:50%;
    cursor:pointer;
    background-color: #fff;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    display:none;
    transition: left .5s linear, top .5s linear, border-radius .5s linear;
}

.preplot {
    border: 1px solid#aea9a9;
    height: 20%;
    width: 20%;
    border-radius:50%;
    cursor:pointer;
    background-color: #fff;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    
    
}

.plotcnt, .plotTcnt {
    color: rgb(187, 49, 49);
    border: 1px solid rgb(174, 169, 169);
    width: 80px;
    height: 30%;
    border-radius: 5px;
    background-color: #FFF;
    align-items:center;
    justify-content:center;
    font-size: 16px;
    font-weight: bolder;
    font-family: roboto_condensedregular;
    overflow:hidden;
    z-index:1;
}

.plotcnt.centered {
    height:40px;
    width:100px;
    left:-27%;
    z-index:2;
}

.pcleft {
    display:inline-block;
    width:38px;
    height:25px;
    color: rgb(4, 170, 109);
    vertical-align: top;
    border-right: 1px solid rgb(174, 169, 169);
    line-height:26px;
}

.pcright {
    display:inline-block;
    width:38px;
    height:25px;
    color:rgb(187, 49, 49);
    vertical-align: top;
    border-left: 1px solid rgb(174, 169, 169);
    line-height:26px;
}

#cirwrap {
    position: absolute;
    height: 358px;
    width: 358px;
    max-height: 400px;
    max-width: 400px;
    top: 9%;
    left: calc(26% - 128px);
    display:block;
    border-radius: 50%;
}

#TAmain #cirwrap {
    top: 3%;
}

.lcomment {
    float:left;
    padding-left:5px;
}

.rnum {
    float:right;
    padding-left:10px;
}

.cirwrapspin {
    background-image:url('../images/studcom.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: rotateY-anim 20s linear infinite;
}

@keyframes rotateY-anim {
	0% {
		transform: rotateY(0deg);
		/* transform: perspective(600px) rotateY(0deg); */
	}
	100% {
		transform: rotateY(360deg);
		/* transform: perspective(600px) rotateY(360deg); */
	}
}

#loadspincon {
    height:220px;
    width:220px;
    min-width: unset;
    background-color: transparent;

    /* background-image:url('../images/logixnIQlogo.webp'); */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.waitspin {
    background-image:url('../images/studcom.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height:220px;
    width:220px;
    animation: rotateX-anim 15s linear infinite;
    position: absolute;
    left: 0px;
    top: 0px;
}

@keyframes rotateX-anim {
	20% {
		transform: rotateX(0deg) rotateY(360deg);
		
		/* transform: perspective(600px) rotateY(0deg); */
	}
	100% {
		transform: rotateX(360deg) rotateY(0deg);
		
		/* transform: perspective(600px) rotateY(360deg); */
	}
}

#cirdesc {
    width: 100px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 20px;
    text-align: center;
    
}

#cir {
    transition: all 1s linear;
}

.circ {
    border: 1px solid#aea9a9;
    border-radius: 50%;
    top: 9%;
    left: 9%;
    height: 280px;
    width: 280px;
    max-height: 300px;
    max-width: 300px;
    position: absolute;
    -webkit-animation: spin-right 30s linear infinite;
    animation: spin-right 30s linear infinite;
    display:none;
}   

.sqr {
    width: 240px;
    height: 240px;
    border-radius: 20px;
    border: 1px solid #aea9a9;
    padding: 5px;
    margin: 50px;
    position: absolute;
    top: 0%;
    left: 0%;
}

#cirinfo {
    height: 100%;
    width: 34%;
    border-radius: 5px;
    /* padding: 10px; */
    background-color: #fff;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
}

#cirinfo .hpsfr {
    margin-top: 20px;
}

#cirinfo .hpsn {
    float: none;
    position:relative;
    text-align: left;
    margin-left:25px;
}

#cirinfo > div.loader {
    display:none;
    position: absolute;
    right: 90px;
    bottom: 13px;
    width: 25px;
    height: 25px;
}

#cirinfo .cirmoreexp,
#cirinfo .cirmoredown,
#cirinfo .cirmoretogle,
.context-menu .cirmoreexp, 
.context-menu .cirmoredown,
.context-menu .cirmoretogle
{
    display:none;
    position:absolute;
    right:10px;
    bottom:5px;
    width:34px;
    height:34px;
    background-image: url("../images/info.webp");
    background-repeat: no-repeat;
    background-position: center; 
    background-size: contain;
    cursor:pointer;
}

#cirinfo .cirmoredown, 
.context-menu .cirmoredown {
    background-image: url("../images/download.webp");
    right:50px;
    background-color: #47cece; /*this color to get the red if inverted by filter.*/
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

#cirinfo .cirmoretogle, 
.context-menu .cirmoretogle {
    display:block;
    background-image: url("../images/visibility.webp");
    right:10px;
    background-color: #47cece; /*this color to get the red if inverted by filter.*/
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

.cirmoreinf {
    position:absolute;
    right:0px;
    bottom:30px;
    width:100%;
    height:25px;text-align: center;
}

.cirmoreinf div {
    font-size: 15px;
    line-height: 25px;
    display:none;
}

#cirmoreside {
    position:absolute;
    right:0px;
    top:0px;
    width:34%;
    height:100%;
    border-radius: 5px;
    background-color: transparent;
    transition: all 0.5s linear;
    background-color: rgb(255, 255, 255); /*whon on right side*/
}

/* #cirmoreside .cirmore,
#cirmoreside .circore
{
    display:none;
    margin-left:5px;
}

#cirmoreside .cirmoreh,
#cirmoreside .circoreh {
    display:none;
    background-color: #2c3e50;
    color:#ffffff;
    width:fit-content;
    line-height: 30px;
    padding: 0 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 5px;
} */

.triangle {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 22px solid #aea9a9;
    border-bottom: 17px solid transparent;
    position: absolute;
}

.triangles {
    offset-path: inset(0px round 18px);
    animation: move 20s linear infinite;
    animation-composition: accumulate;
}

#tr1 {
    left: calc(50% - (25px / 2));
    top: calc(0% - (25px / 2));
    transform: rotate(413deg);
}

#tr2 {
    left: calc(0% - (25px / 2));
    top: calc(50% - (25px / 2));
    transform: rotate(320deg);
}

#tr3 {
    top: calc(50% - (25px / 2));
    left: calc(100% - (25px / 2));
    transform: rotate(499deg);
}

#tr4 {
    top: calc(100% - (25px / 2));
    left: calc(50% - (25px / 2));
    transform: rotate(586deg);
}

#tr1.tr1 {
    transform: rotate(413deg);
    offset-distance: 10%;
}
  
#tr2.tr2 {
    transform: rotate(413deg);
    offset-distance: 35%;
}
  
#tr3.tr3 {
    transform: rotate(413deg);
    offset-distance: 60%;
}
  
#tr4.tr4 {
    transform: rotate(413deg);
    offset-distance: 85%;
}

@keyframes spin-right {
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}

@-webkit-keyframes spin-right {
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}

@keyframes move {
    0% {
     offset-distance: 0%;
   }
   
   100% {
     offset-distance: 100%;
   }
 }

 @-webkit-keyframes move {
    0% {
     offset-distance: 0%;
   }
   
   100% {
     offset-distance: 100%;
   }
 }

.plotcnt 
{
    position: absolute;
    bottom: -15px;
    left: -12%;
}

.plotTcnt 
{
    position: absolute;
    bottom: 49px;
    left: -12%;
    
}

#pl1 {
    position: absolute;
    /* left: 50%;
    top: 14%;
    transform: translate(-50%,-50%); */
    background-image: url('../images/bullcow1.webp');
}



#pl2 {
    position: absolute;
    /* left: 80%;
    top: 28%;
    transform: translate(-50%,-50%); */
    background-image: url('../images/cow.webp');
}

/* #pl2 .plotcnt {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%,10px);
} */

#pl3 {
    position: absolute;
    /* left: 87%;
    top: 58%;
    transform: translate(-50%,-50%); */
    background-image: url('../images/cowcalf1.webp');
}

/* #pl3 .plotcnt {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%,10px);
} */

#pl4 {
    position: absolute;
    /* left: 67%;
    top: 82%;
    transform: translate(-50%,-50%); */
    background-image: url('../images/calf.webp');
}

/* #pl4 .plotcnt {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%,10px);
} */

/*  */

#pl5 {
    position: absolute;
    /* left: 20%;
    top: 28%;
    transform: translate(-50%,-50%); */
    background-image: url('../images/inspect.webp');
}

/* #pl5 .plotcnt {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%,10px);
} */

#pl6 {
    position: absolute;
    /* left: 33%;
    top: 82%;
    transform: translate(-50%,-50%); */
    background-image: url('../images/calves1.webp');
}

/* #pl6 .plotcnt {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%,10px);
} */

#pl7 {
    position: absolute;
    /* left: 13%;
    top: 58%;
    transform: translate(-50%,-50%); */
    background-image: url('../images/calf18m.webp');
}

/* #pl7 .plotcnt {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%,10px);
} */

#pl8 {
    position: absolute;
    /* left: 20%;
    top: 28%;
    transform: translate(-50%,-50%); */
    background-image: url('../images/calfgrow.webp');
}

/* #pl8 .plotcnt {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%,10px);
} */




#fslideopen, #cslideopen, #pslideopen, #cslideopen {
    display:none;
}

div[class^="mobcol"] {
    display:none;
}

.react {
    float:right;
}

#toreactcon {
    width: 50%;
    height: auto;
    min-width: 300px;
    max-width:800px;
    background-color: rgba(212,212,212,1);
    position:absolute;
    top:49%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius: 5px;
    padding-bottom : 5px ;
    text-align: center;
    
}

#toreaction {
    width: 97%;
    height: 150px;
    padding: 5px 10px;
    box-sizing: border-box;
    border: none;
    outline:none;
    resize: none;
    font-family: roboto_condensedregular;
    font-size: 16px;
}

#toreaction:focus {
    border:1px solid #aea9a9;
}

.reactslide {
    display:none;
    height:50px;
    width: 97%;
    margin: 0 auto;
    border:1px solid red;
    border-radius:5px;
    box-sizing: border-box;
}

.reactslide .switch {
    float:left;
    margin-top: 8px;
}

.reactslide div {
    height:25px;
}

/* #fcontainer > div > div.fname {
    width:150px;
} */

#fcontainer > div > div.fname {
    width:120px;
}

/*Faults END*/


/*Upload*/

#utbirthhead {
    /* width: calc(100% - 220px); */
    /* overflow-x:auto; */
    vertical-align: top;
    display: inline-block;
    /* margin-left:-10px; */
    width:fit-content;
}

#utbirthbody {
    width:fit-content;
}

#utbirthhead .row {
    background-color: #ffffff;
}

#birthtable {
    position:relative;
    overflow-y:hidden;
    font-size: 0px;
    height:100%;
}

#utbodywrap {
    height: 68vh;
    overflow-y:auto;
    overflow-x:hidden;
    width:fit-content;
}

#conleft {
    /* width: calc(100% - 220px); */
    position:relative;
    overflow:hidden;
    display: inline-block;
    vertical-align: top;
    margin-left:0px;
    overflow-x: auto;
}

#conleft::-webkit-scrollbar {
    display: none;
}

#utbirthhead::-webkit-scrollbar {
    display: none;
}

#conright {
    position:absolute;
    z-index: 2;
    width:210px;
    display: inline-block;
    vertical-align: top;
}

#confill {
    position:relative;
    z-index: 2;
    width:210px;
    display: inline-block;
    vertical-align: top;
}

.floatmore {
    position:absolute;
    right: 2.8%;
    background: #ffffff;
    width: 210px;
    text-align: left;
    padding-top: 1px;
}

#utbodywrap::-webkit-scrollbar {
    width: 0px;
}

.floatmore div input {
    display:inline-block;
    width:50%;
    margin: 0px;
}

#conright > div.floatmore div {
    height:40px;
    padding: 2px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #bb3131;
    margin-bottom:1px;
   }

/* #conright > div > div:nth-child(1) {
    padding: 3px 0px 0px 0px;
    border-bottom: none;
} */

/* #headername {
    width:fit-content;
    height:40px;
    position:absolute;
    left:0px;
    top:0px;
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    padding: 0 5px 0 10px;
} */

div[id^='forrowbut'] {
    text-align: right;
    border-bottom: 2px solid #bb3131;
}

div[id^='forrowbut'] input {
    display:inline-block;
    width:100px;
}

#tablerightinner .row div input[id^='gebgewig_'],
#tablerightinner .row div input[id^='bestgrp_']
{
    /* width:119px; */
    box-sizing: border-box;
    height: 34px;
}

#tablerightinner .row div input[id^='breedfract_'] {
    box-sizing: border-box;
    height: 34px;
}

/* #tablerightinner .row div input[id^='gebweegdatum_']
{
    width:118px;
} */


#tablerightinner .row div input[id^='semenkode_']
{
    width:116px;
}   

#tablerightinner .row div input[id^='calfeid_'],
#tablerightinner .row div input[id^='coweid_'],
#tablerightinner .row div input[id^='note_']
 {
    width:160px;
}

#tablerightinner .row div[id^='bdy33_'],
#tablerightinner .row #hdrnote {
    width:161px;
    display:none;
}

#tablerightinner .row div[id^='bdy1_'],
#tablerightinner .row div[id^='bdy2_'],
#tablerightinner .row div[id^='bdy3_'],
#tablerightinner .row div[id^='bdy4_'],
#tablerightinner .row div[id^='bdy5_'],
#tablerightinner .row div[id^='bdy15_'],
#tablerightinner .row div[id^='bdy16_'],
#tablerightinner .row div[id^='bdy50_'],
#tablerightinner .row div[id^='bdy43_'],
#hdrgebdatum, #hdrgender, 
#hdrdieridnr, #hdrnaam, #hdrpdnr,
#hdrgebgewig, #hdrgebweegdatum,
#hdrgewig, #hdrweegdatum, #hdrcalffeedstatus,

input[id^='gebdatum_'], 
select[id^='gender_'], 
input[id^='dieridnr_'], 
input[id^='naam_'], 
input[id^='pdnr_'],
input[id^='gebgewig_'],
input[id^='gebweegdatum_'],
input[id^='gewig_'],
input[id^='weegdatum_'],
select[id^='calffeedstatus_']
{
    background-color:rgba(137, 215, 123, 0.2);
}

#tablerightinner .row #hdrage,
#tablerightinner .row input[id^='age_'],
#tablerightinner .row div[id^='bdy37_'],
#tablerightinner .row #hdrweighage,
#tablerightinner .row input[id^='weighage_'],
#tablerightinner .row div[id^='bdy38_']  

{
    background-color:rgba(215, 206, 123, 0.2);
}

#tablerightinner .row #hdrconditionscore,
#tablerightinner .row input[id^='conscore_'],
#tablerightinner .row div[id^='bdy30_'] {
    background-color:rgba(255, 255, 255, 0.2);
}

#tablerightinner .row div[id^='bdy6_'],
#tablerightinner .row div[id^='bdy7_'],
#tablerightinner .row div[id^='bdy8_'],
#tablerightinner .row div[id^='bdy9_'],
#tablerightinner .row div[id^='bdy10_'],

#hdrmoerreknr, #hdrmoeridnr, #hdrfeedstatus, 
#hdrmoerweegdatum, #hdrmoergewig, 

/* #tablewrap input[id^='moerreknr_'], 
#tablewrap input[id^='moeridnr1'], 
#tablewrap input[id^='moeridnr2'], 
#tablewrap input[id^='moeridnr3'], 
#tablewrap select[id^='feedstatus_'], 
#tablewrap input[id^='moerweegdatum_'],  
#tablewrap input[id^='moergewig_'] */

input[id^='moerreknr_'], 
input[id^='moeridnr1'], 
input[id^='moeridnr2'], 
input[id^='moeridnr3'], 
select[id^='feedstatus_'], 
input[id^='moerweegdatum_'],  
input[id^='moergewig_']
{
    background-color:rgba(255, 105, 180, 0.2);
    box-sizing: border-box;
}


input[id^='moergewig_'] {
    width:100%;
}

#tablerightinner .row div[id^='bdy11_'],
#tablerightinner .row div[id^='bdy12_'],
#tablerightinner .row div[id^='bdy13_'],
#hdrvaarreknr, #hdrvaaridnr, #hdrmulti,

/* #tablewrap input[id^='vaarreknr_'], 
#tablewrap input[id^='vaaridnr1'], 
#tablewrap input[id^='vaaridnr2'], 
#tablewrap input[id^='vaaridnr3'], 
#tablewrap select[id^='multi_'] */

input[id^='vaarreknr_'], 
input[id^='vaaridnr1'], 
input[id^='vaaridnr2'], 
input[id^='vaaridnr3'], 
select[id^='multi_']
{
    background-color:rgba(30, 144, 255, 0.2);
    box-sizing: border-box;
}

#utbirthhead div[id^='hdr'], 
#utbirthbody .bdy
{
    height: 40px;
    display: inline-block;
    width: 130px;
    /* width: calc(100% / 14); */
    min-width:110px;
    font-size: 18px;
    line-height: 16px;
    vertical-align: top;
    border: 1px solid rgb(244, 240, 240);
    text-align: center;
    box-sizing: border-box;
    padding:2px 0;
}

.sup {
    background-image: url('../images/sortup.webp');
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center;
    background-size: 10px;
}

.sdown {
    background-image: url('../images/sortdown.webp');
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center;
    background-size: 10px;
}

.sboth {
    background-image: url('../images/sortboth.webp');
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center;
    background-size: 15px;
}

input[id^=blank_] {
    color:#ffffff;
}

.forE, .forA {
    text-align: left;
    padding-left:10px;
    display:none;
    border-bottom: 1px solid #817d7d;
}

#holderutab [class$='undone'] {
    display:inline-block;
    width: 220px;
    position: relative;
    height: 30px;
    vertical-align: middle;
    margin-left:10px;
}

#holderutab [class$='undone'] .holcounts {
    top:0px;
    left:0px;
}

#holderutab [class$='undone'] .holr {
    border-radius:5px;
}

/* #filetemplates, #fileupwrap {
    display:inline-block;
} */

#filetemplates {
    display:none;
    height: 40px;
    position:relative;
}
/* 
#filetemplates > div.template {
    width:fit-content;
    height:44px;
} */

/* div.template #tdownload, div.template #tempcan {
    margin-left:5px;
} */

#filetemplates .template {
    position: relative;
    height: 30px;
    overflow: hidden;
    transition: height 0.5s linear;
    z-index: 2;
}

/* div.template div {
    display:block;
} */

#tdownload,#t1download,#t2download {
    /* position:absolute; */
    
    padding-left: 30px;
    line-height: 30px;
    background-color: white;
    border-radius: 5px;
    height: 30px;
    width: 170px;
    text-align: center;
    cursor:pointer;
}

#tdownload {
    background-image: url('../images/excel.webp');
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

#t1download,#t2download {
    background-color: #B83131;
    color:#fff;
}

#utbirthbody .bdy {
    border:none;
}

.capcontext-menu {
    width: 85px;
    height: 45px;
    border-radius:5px;
    background-color: #2c3e50;
    position: absolute;
    display:none;
    z-index: 3;
}

.capcontext-menu .trickled, 
.capcontext-menu .clearit {
    width: 34px;
    height: 34px;
    background-image: url(../images/doubledown.webp);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
    margin-left: 5px;
    margin-top: 5px;
}

.capcontext-menu .clearit{
    background-image: url(../images/reset.webp);
}

#utbirthbody input[type='text'], 
#utbirthbody input[type='number'], 
#utbirthbody input[type='date'], 
#utbirthbody input[type='button'], 
#utbirthbody input[type='password'], 
#utbirthbody select 
{
    border-radius: 0%;
    
    border:1px solid rgba(174, 169, 169, 0.4);
    margin-top: 0px;
    padding-left: 17px;
    font-size: 14px;
}

#fileupwrap {
    
    text-align: left;
    padding-left: 5px;
}

#scalefileupwrap {
    text-align: left;
    padding-left: 5px;
    margin: 10px;
}

#birthprocesswrap,
#cancelationprocesswrap,
#weanprocesswrap,
#months12processwrap,
#months18processwrap,
#comboprocesswrap
 {
    display:none;
    text-align: left;
    /* padding-left: 5px; */
    position:relative;
}

#fileupbut {
    display:none;
    width: fit-content;
    margin-top: 5px;
    padding: 3px 5px 0px;
    line-height: initial;
    border-radius:5px;
}

#fileupwrap label,
#scalefileupwrap  label {
    position: relative;
    background-color: rgb(187, 49, 49);
    border:1px solid rgb(187, 49, 49);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    display:inline-block;
    margin: 5px 0;
    height: 32px;
    line-height: 32px;
    padding: 0px 2px 0px 5px;
}

#fileupwrap .warn {
    width: fit-content;
    margin: 0;
    padding: 3px 5px 0px;
}

#fileupwrap label span,
#scalefileupwrap label span {
    display:inline-block;
    width:fit-content;
    padding: 0px 5px;
    background-color: #fff;
    color: #000;
    border-radius: 5px;
    height:27px;
    line-height: 28px;
}

#fileupwrap label div,
#scalefileupwrap label div {
    padding: 0px 20px 0px 0px;
    display: inline-block;
    font-size: 16px;
}

#fileupres, 
#fileupcan, 
#fileupdone,
#efileupview,
#xfileupview,
#mfileupview,
#scalefileupres,
#tempcan  {
    width:130px;
    margin-left:0px;
    display:inline-block;
    margin-top:1px;
}

#utbirthbody .bdy > input[type='text'],
#utbirthbody .bdy > input[type='date'] {
    margin:0px;
    width:100%;
    padding-left:0px;
    
}

#utbirthbody .bdy > input[type='text'] {
    padding-left:4px;
}

#utbirthadd {
    display:inline-block;
    vertical-align: top;
    width: 210px;
    height:40px;
}

#rowadd
{   position:fixed;
    right: 2.8%;
    width:210px;
    background-color: #47cece;
    color:#000;
    text-align: left;
    padding-left: 40px;
    margin:0px;
    
}

#ocapoptions {
    display:none;
    margin-bottom:6px;
}

#capbirthsave, 
#capbirthfinal,
#capbirthcan {
    width:200px;
    display:inline-block;
    margin: 0 5px;
}

.rowbottom {
    text-align: right;
}

#breeduploadwrap > div.rowbottom > .loader {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.rowbottom input {
    display:inline-block;
    margin-right:5px;
    min-width:200px;
    width:fit-content;
    vertical-align: top;
}

#colorlegend {
    margin-top: 0px;
    width:34px;
    min-width:34px;
    height:34px;
    background-image: url(../images/info.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.colledgentwrap {
    display:none;
    position:absolute;
    z-index: 2;
    width:400px;
    height:200px;
}

.bubble {
	height: 100%;
	width: 100%;
	min-width: 200px;
	background: ivory;
	display: block;
	margin: 0 auto;
	border-radius: 5px;
	font-size: 18px;
	text-align: center;
    border:2px solid red;
}

.bubble div {
    height:25px;
    line-height: 25px;
}

.bubble .lg { background-color: rgba(137, 215, 123, 0.4);}
.bubble .lp { background-color: rgba(255, 105, 180, 0.4);}
.bubble .lb { background-color: rgba(30, 144, 255, 0.4);}
.bubble .ly { background-color: rgba(217, 217, 217, 0.6);}
.bubble .ll { background-color: rgb(255, 255, 0, 0.6);}
.bubble .lr { background-color: rgba(230, 7, 7, 0.4);}


.spointer {
	height: 40px;
	width: 40px;
	background: ivory;
	margin: 0 auto;
	transform: rotate(45deg);
	border-radius: 50px 0 5px 0;
	margin-top: -22px;
	position: relative;
	left: calc(0.5vw - 50px);
    border-bottom: 2px solid red;
    border-right: 2px solid red;
}

input[type='button'][id^=rowreset_] {
    background-color: #d3c1af;
}

input[type='button'][id^=rowremove_] {
    background-color: #47cece;
}


#utbirthhead > div:nth-child(1) > input[type=button] {
    width:calc(100% / 15);
    border-radius:0px;
    margin: 6px 0px 0px 0px;
}

[id^='rowadd'] {
    background-image: url('../images/add.webp');
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert(1);
}

[id^='rowreset'] {
    background-image: url('../images/reset.webp');
    background-repeat: no-repeat;
    background-size: contain;
    filter:  invert(1);
}

[id^='rowremove'] {
    background-image: url('../images/delete.webp');
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert(1);
}

#utbirthbody .bdy select {
    appearance: auto;
    padding:0px;
    
}

.dieridnrwrap div {
    display:inline-block;
}

.dieridnrwrap .idnr1 {
    width:35%;
    margin:0px;
    padding:0px;
    font-size: 18px;
}

.dieridnrwrap .idnr2 {
    width:30%;
    margin:0px;
    padding:0px;
    font-size: 18px;
}

.dieridnrwrap .idnr3 {
    width:35%;
    margin:0px;
    padding:0px;
    font-size: 18px;
}

#olheader {
    position:relative;
    height:45px;
}

#bback {
    display:none;
}




/*Upload end*/

/*Checkmark*/

/* Customize the label (the container) */
.utcontainer {
    display: block;
    position: relative;
    /* padding-left: 35px;
    margin-bottom: 12px; */
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* margin-left: calc(50% - 10px); */
}


#tableleft .row .checkwrap {
    vertical-align: top;
    margin-top: -2px;
}
  
/* Hide the browser's default checkbox */
.utcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
/* Create a custom checkbox */
.utcheckmark {
    position: absolute;
    top: 2px;
    left: calc((70px - 32px) / 2);
    height: 32px;
    width: 32px;
    background-color: #fff;
    border:1px solid #aea9a9;
    border-radius: 5px;
}
  
#cantable {
    display:none;
}

#utcanhead .fltfilter#Co1,
#utcanhead .fltfilter#Co2,
#utcanhead .fltfilter#Co3,
#utcanhead .fltfilter#Co4,
#canhishead .fltfilter#Co1,
#canhishead .fltfilter#Co2,
#canhishead .fltfilter#Co3,
#canhishead .fltfilter#Co4,
#utweanhead .fltfilter#Co1,
#utweanhead .fltfilter#Co2,
#utweanhead .fltfilter#Co3,
#utweanhead .fltfilter#Co4,

#ut12monhead .fltfilter#Co1,
#ut12monhead .fltfilter#Co2,
#ut12monhead .fltfilter#Co3,
#ut12monhead .fltfilter#Co4,

#ut18monhead .fltfilter#Co1,
#ut18monhead .fltfilter#Co2,
#ut18monhead .fltfilter#Co3,
#ut18monhead .fltfilter#Co4,

#utcombohead .fltfilter#Co1,
#utcombohead .fltfilter#Co2,
#utcombohead .fltfilter#Co3,
#utcombohead .fltfilter#Co4,


#breedfaultswrap .fltfilter#Co1, 
#breedfaultswrap .fltfilter#Co2, 
#breedfaultswrap .fltfilter#Co3, 
#breedfaultswrap .fltfilter#Co4,

#breedfaultswrap .fltfilter#Alles, 
#breedfaultswrap .fltfilter#GEBOORTE, 
#breedfaultswrap .fltfilter#DEK, 
#breedfaultswrap .fltfilter#Co4

{
    line-height: 32px;
    height: 32px;
    margin-top:5px;
    background-image: url('../images/listfilter.webp');
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}


/* When the checkbox is checked, add a blue background */
.utcontainer input:checked ~ .utcheckmark {
    background-color: #bb3131;
}

/* Create the checkmark/indicator (hidden when not checked) */
.utcheckmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.utcontainer input:checked ~ .utcheckmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.utcontainer .utcheckmark:after {
    left: 11px;
    top: 4px;
    width: 8px;
    height: 15px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.split {
    border-bottom: 2px solid #bb3131;
    padding-bottom:6px;
    margin-top: -4px;
}

.splitop {
    padding-top:6px;
}

.utabrow, .uctabrow {
    height:40px;
    display:none;
    text-align: left;
    background-color: rgba(255,255,255,1);
}

.utabrow > div > div,
.uctabrow > div > div {
    position:relative;
    width:160px;
    height:34px;
    
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;
    border: 1px solid #aea9a9;
    margin-top: 5px;
    padding-left: 10px;
    line-height: 31px;
    margin: 2px 0px;
    text-align: center;
    cursor: pointer;
    text-align: left;
    /* padding-left: 25px; */
    box-sizing: border-box;
}

.btncount {
    background-color: #B83131;
    min-width: 20px;
    width:fit-content;
    height: 33px;
    position: absolute;
    z-index: 1;
    color: white;
    top: 0px;
    right: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
}

#optwrap {
    width:fit-content;
    position: absolute;
    z-index: 1;
    height: 40px;
    background-color: rgba(255,255,255,0.7);
    overflow:hidden;
}

#uslideopen, #sslideopen {
    display:none;
}

#holderutab, #capholderutab {
    overflow-y: hidden;
    height: 100%;
    text-align: left;
}

.holderdiv, .templatediv {
    position: relative;
    min-width: 150px;
    height: auto;
    padding: 0;
    min-height: 120px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    margin: 0 15px 10px 15px;
    width: calc((100% - 135px) / 4);
    border: none;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius:5px;
    vertical-align: middle;
}

.templatediv {
    min-width: 180px;
    width: calc((100% - 270px) / 8);
}

#holderutab .templatediv .holimg {
    background-image: url(../images/efile.webp);
}

.holimg {
    width: 4em;
    height: 4em;
    margin: 10px 10px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
}

.holtxt {
    height: 16px;
    line-height: 16px;
    width: 100%;
    text-align: center;
}

.side {
    display:inline-block;
    position:relative;
}

#efile {
    display:none;
}

#efileimg.holimg {
    background-image: url(../images/efile.webp);
}
#excelimg.holimg {
    background-image: url(../images/excel.webp);
}
#manualimg.holimg {
    background-image: url(../images/form.webp);
}

#scalenew .holimg {
    background-image: url(../images/scalehead.webp);
    transform: rotateY(180deg);
}

#holnew .holimg {
    background-image: url(../images/first.webp);
}

#holbirth .holimg {
    background-image: url(../images/calving.webp);
}

#holwean .holimg {
    background-image: url(../images/weaning.webp);
}

#hol12months .holimg {
    background-image: url(../images/12months.webp);
}

#hol18months .holimg {
    background-image: url(../images/18months.webp);
}

#holgrowth .holimg {
    background-image: url(../images/growth.webp);
}

#holcancelation .holimg {
    background-image: url(../images/canceled.webp);
}

.holinf {
    width: 100%;
    height: 40px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 10px;
    box-sizing: border-box;
    background-color: rgba(129, 125, 125, 0.1);
    text-align: left;
    border-bottom: 1px solid #b4b4b4;
    font-family: 'ralewaymedium';
}

.holinfr {
    position: absolute;
    width: fit-content;
    height: fit-content;
    
    /* font-weight: bold; */
    color:#B83131;
    right: 30px;
    bottom: 0px;
}

.holinfr .top {
    font-size: 15px;
    line-height: 5px;
    text-align: center;
    color:#000000;
}

.holinfr .bottom {
    font-size: 2.5vw;
    line-height: 60px;
    text-align: center;
}

.holderdiv .holcounts {
    position:absolute;
    right:10px;
    top:18px;
}

/* .holcounts div {
    line-height: 28px;
    font-size: 16px;
} */

.holcounts div.lcomment,
.holcounts div.rnum {
    padding-right:10px;
}

.holg {
    background-color: rgba(4, 170, 109, 0.1);
    color: rgb(4, 170, 109);
    padding-left: 10px;
    height: 20px;
    line-height: 18px;
    margin-bottom: 5px;
    border-radius: 20px;
}

.holr {
    background-color: rgb(187, 49, 49, 0.1);
    color: rgb(187, 49, 49);
    padding-left: 10px;
    height: 20px;
    line-height: 18px;
    border-radius: 20px;
}

.utabrow div.act {
    background-color: var(--fc-button-bg-color);
    border-color: var(--fc-button-border-color);
    color: var(--fc-button-text-color);
}

/* #holderutab div.row {
    text-align: left;
    
} */

#utbirthbody .row {
    border-bottom: 1px solid #bb3131;
}

#holderutab div.row [class^="col"] {
    float:none;
    min-width:200px;
    display:inline-block;
    margin: 0.5rem 1%;
}

.bwrap {
    display:inline-block;
}

/*Upload END*/


/*OFFLINE*/

/* #olheader {
    border-bottom: 1px solid #B83131;
}

#offlinelist {
    margin-left:10px;
} */

/* #olheader div.lstdot,
#olheader div#hname, 
#olheader div#hdt, 
#olheader div#hcnt,
[id$='offlinelist'] > div div.lstdot,
[id$='offlinelist'] > div div.entdot,
[id$='offlinelist'] > div div#name, 
[id$='offlinelist'] > div div#dt, 
[id$='offlinelist'] > div div#cnt, 
[id$='offlinelist'] > div div#hhis, 
[id$='offlinelist'] > div input[id^='bprev'],
[id$='offlinelist'] > div input[id^='bsync'],
[id$='offlinelist'] > div input[id^='bfinal'] 
[id$='offlinelist'] > div input[id^='brem'] 
{

    display:inline-block;
    margin: 2px 10px;
} */

/* #olheader div.lstdot,
[id$='offlinelist'] > div div.lstdot {
    width:10px;
}

#olheader div#hname, 
[id$='offlinelist'] > div div#name {
    width:160px;
}

#olheader div#hdt, 
[id$='offlinelist'] > div div#dt {
    width:150px;
}

#olheader div#hcnt,
[id$='offlinelist'] > div div#cnt {
    width:100px;
} */

/* [id$='offlinelist'] > div input[id^='bprev'],
[id$='offlinelist'] > div input[id^='bsync'],
[id$='offlinelist'] > div input[id^='bfinal'],
[id$='offlinelist'] > div input[id^='bprint'],
[id$='offlinelist'] > div input[id^='bupdate'],
[id$='offlinelist'] > div input[id^='brem'] 
{
    width:40px;
    background-image: url('../images/preview.webp');
    background-repeat: no-repeat;
    background-position: center;
    margin: 0px;
    vertical-align: middle;
    height: 40px;
    margin-right:5px;
    cursor:pointer;
} */

/* [id$='offlinelist'] > div input[id^='bsync'] {
    background-image: url('../images/sync.webp');
} */

/* [id$='offlinelist'] > div input[id^='bprint'] {
    background-image: url('../images/print.webp');
    background-color: #47cece;
    filter: invert(1);
    color:#ffffff;
} */

/* [id$='offlinelist'] > div input[id^='bupdate'] {
    background-image: url('../images/updatelist.webp');
    background-size: 80%;
} */

/* [id$='offlinelist'] > div input[id^='bfinal']{
    background-image: url('../images/final.webp');
    background-color: #47cece;
    filter: invert(1);
    color:#ffffff;
} */

/* [id$='offlinelist'] > div input[id^='brem']{
    background-image: url('../images/delete.webp');
    background-color: #d3c1af;
    filter: invert(1);
    color:#ffffff;

    margin-left:10px;
} */

/* [id$='offlinelist'] > div div.lstdot 
{
background-color: #2c3e50;
width: 8px;
height: 8px;
border-radius: 50px;
} */

/* [id$='offlinelist'] > div div.entdot 
{
background-color: #bb3131;
width: 8px;
height: 8px;
border-radius: 50px;
}

[id$='offlinelist'] > div {
    border-bottom: 1px solid #B83131;
} */

/* #utcanhead, 
#canhishead, 
#utweanhead, 
#ut12monhead, 
#ut18monhead,
#utcombohead
{
    position: sticky;
    z-index: 1;
    top: 0px;
}

#utcanbody > .brow > #fsex {
    width:80px;
}

#utcanhead > div#ffilters,
#canhishead > div#ffilters,
#utweanhead > div#ffilters,
#ut12monhead > div#ffilters,
#ut18monhead > div#ffilters,
#utcombohead > div#ffilters
 {
    display:none;
    z-index: 2;
    background-color: rgba(208, 212, 215 , 1);
}


#canhishead > div#ffilters {
    display:block;
}

#canhishead > #flist > #colcanreason#fhead {
    width:fit-content;
}

#canhisbody .brow .freason {
    width:auto;
}

#utcanbody > #canchosen > div.brow > div.checkwrap,
#utcanbody > div.brow > div.checkwrap
{
    width: 110px;
    height:32px;
    margin: 5px 5px 5px 0;
}

#utweanbody > div.brow > div.checkwrap,
#ut12monbody > div.brow > div.checkwrap,
#ut18monbody > div.brow > div.checkwrap,
#utcombobody > div.brow > div.checkwrap
{
    width: 60px;
    height:32px;
    margin: 5px 5px 5px 0;
}

#utcanhead > #flist > .fhead#colchoice
{
    width:110px;
    margin-right:5px;
}

#utweanhead > #flist > .fhead#colcheck,
#ut12monhead > #flist > .fhead#colcheck,
#ut18monhead > #flist > .fhead#colcheck,
#utcombohead > #flist > .fhead#colcheck
{
    width:60px;
    margin-left:5px;
}


#utcanbody > div.brow > div.switchwrap > label > span.slider {
    height:30px;
    margin-top: -3px;
}

#utcanbody > div.brow > div.switchwrap > label > span.slider::before {
    height: 25px;
    bottom: 2px;
}



#utcanhead > #flist > #colcandate {
    width:150px;
} */

/*OFFLINE END*/


/*Service group*/


#breedservicewrap {
    overflow-y: auto;
    height: calc(100% - 88px);
}

#scontainer {
    display:none;
}

#grouplist {
    height: calc(100vh + 15px);
    position:relative;
    min-height: 400px;
}

#groupinfo, #campsinfo {
    min-height:200px;
}

#campsinfo > div.groupinner {
    overflow-y:auto;
    height: 127px;
    
}

#campsinfo > div.groupinner div {
    display:none;
}

#groupoccupants {
    min-height: 620px;
    position: relative;
    height: calc(77vh + 6px);
}

#groupfemalelist {
    height: calc(38vh);
    position:relative;
}

#groupmalelist {
    height: calc(38vh);
    position:relative;
}

.grouppaneltop {
    width: calc(100% - 5px);
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    margin-bottom: 3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 5px;
    text-align: left;
    position:relative;
}

.groupinner {
    height: calc(100% - 135px);
    background-color: rgba(255,255,255,0.5);
    position: relative;
    text-align: left;
    overflow-y:auto;
}

#grouplist .groupinner {
    height: calc(100% - 55px);
}

#groupinfo > div.groupinner {
    overflow: hidden;
    height: 125px;
}

.campcolor {
    border-radius:50%;
    width:15px;
    height:150px;
}

.grouppaneltop .grouptbut, .hpanel .groupbbut {
    position:absolute;
    right:5px;
    width: 115px;
}

.hpanel .grouptbut {
    top:0px;
}

.hpanel .groupbbut {
    bottom:5px;
    right:10px;
}

#allrsg {
    right:90px;
}

#resetsg {
    width:80px;
}

#sgoccufind {
    right: 210px;
}

#sgoccufindm, #sgoccufindf {
    right: 125px;
}

#newsgsave, #newsgcan {
    width: 200px;
    position:relative;
    display: inline-block;
    width: calc(50% - 15px);
    bottom:0px;
    right:0px;
}


#tosgnewcon > div:nth-child(3) > div:nth-child(1) {
    position:relative;
}


.groupbholder {
    width: 100%;
    margin-bottom:10px;
}

.grouptbutfind {
    position: absolute;
    right: 95px;
    width: 34px;
    height: 34px;
    top: 5px;
    background-image: url('../images/search.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.divcolorgroup .sgc {
    display:inline-block;
    
    width:34px;
    height:34px;
    border:1px solid #2c3e50;
    border-radius:5px;
    cursor:pointer;
}

#newsgdescript {
    height:185px;
    width: 95%;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    margin: 0 auto;
    font-family: roboto_condensedregular;
    font-size: 18px;
    padding-left: 5px;
    text-align: left;
    resize:none;
}


#grouplist > div.groupnew > div:nth-child(3)
{
    position:relative;
}

#the-count {
    position:absolute;
    top:8px;
    right: 10px;
    font-size: 16px;
}

#cr.sgc {
    background-color: rgba(209, 38, 38,0.5);
}

#co.sgc {
    background-color: rgba(239, 154, 18,0.5);
}

#cy.sgc {
    background-color: rgba(255, 221, 0,0.5);
}

#cg.sgc {
    background-color: rgba(78, 234, 35,0.5);
}

#cb.sgc {
    background-color: rgba(35, 141, 234,0.5);
}

#cz.sgc {
    background-color: rgb(166, 145, 92,0.5);
}

#cw.sgc {
    background-color: rgb(255, 255, 255,0.5);
}

#cs.sgc {
    background-color: rgba(0, 0, 0,0.5);
}

#newsgname {
    height: 34px;
    width: 95%;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    margin: 5px 0;
    font-family: roboto_condensedregular;
    font-size: 16px;
    padding-left:5px
}

.sgcolchkw, .sgcolchkb {
    position: relative;
    background-image: url('../images/checkw.webp');
    width:34px;
    height:34px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sgcolchkb {
    background-image: url('../images/checkb.webp');
}

#sgservtype {
    width:95%;
}

.campdiv, .campanim, .campanime {
    position:relative;
    border-bottom: 1px solid red;
    margin-bottom:5px;
}

.campdiv {
    padding-left: 10px;
    line-height: 48px;
    height:48px;
    cursor:pointer;
}

.campanim,.campanime {
    position: relative;
    height: 48px;
    line-height: 48px;
}

.campcol {
    display: inline-block;
    border-radius:50%;
    width:15px;
    height:15px;
    background-color: #207f22;
    
    margin: 0px 10px;
}

.fence {
    width:34px;
    height:34px;
    background-image: url('../images/fence.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position:absolute;
    right:5px;
    top:5px;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    background-color: #fff;
    cursor:pointer;
}

.leavegroup, .joingroup, .allgroup, .infogroup {
    width:40px;
    height:40px;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 5px;
    top: 3px;
    border:1px solid #aea9a9;
    border-radius:5px;
    background-color: #fff;
    cursor:pointer;
}


.leavegroup {
    background-image: url('../images/leavegroup.webp');
}

.joingroup {
    background-image: url('../images/joingroup.webp');
}

.allgroup {
    background-image: url('../images/checkb.webp');
    cursor:default;
}

.infogroup {
    background-image: url('../images/info.webp');
    right: 50px;
    top: 6px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border:none;
    background-color: transparent;
}

.groupheader {
    text-align: left;
}

.groupheader div {
    display:inline-block;
    width:105px;
    height:34px;
    text-align: center;
}

#groupoccupants > div.groupinner {
    height:calc(100% - 135px);
}

.campanim > div.name,

.campanim > div.camp,
#groupoccupants > div.groupheader > div.name,
#groupoccupants > div.groupheader > div.num,

#groupfemalelist > div.groupheader > div.name,
#groupfemalelist > div.groupheader > div.camp,

#groupmalelist > div.groupheader > div.name,

#groupmalelist > div.groupheader > div.camp
{
    display: inline-block;
    width:150px;
}

.campanim > div.num,
#groupfemalelist > div.groupheader > div.num,
#groupmalelist > div.groupheader > div.num
{
    display: inline-block;
    width:120px;
}

#sgaremove {
    right: 130px;
}

/*Service group END*/

/*Waitbacks*/

.WaitToDate, .WaitToReact, .WaitToEvent, .WaitToreset, .WaitTosgnew, .WaitToSystem, 
.WaitToReload, .WaitToPinm, .WaitToPin, .WaitToAge, .WaitToSex, 
.WaitToLogout, .WaitToTblrow, .WaitTobirthUpload, .Waitcapbusy, .Waitcapdone, 
.Waitcapcancel, .Waituploaded, .Waitloader, .Waitcapsave, .Waitcaprem, .Waitcapfinal, 
.Waitcaperror, .Waitweansave,.Wait12save, .Wait18save, .Waitcombosave, .Waitweanbest, 
.Wait12monbest, .Wait18monbest, .Waitcombobest, .Waitweanmanbest, .Wait12monmanbest, 
.Wait18monmanbest, .Waitcombomanbest, .WaitToDrag, .WaitToResize, .WaitToPreview, 
.Waitprint, .Waitbuild, .Waitcaprederror, .Waitcapyellowerror, .Waitcaporangeerror, 
.Waitcapblueerror, .WaitToscaleup, .Waitscaledone, .Waitremself, .Waitoverself, 
.Waitmenuedit, .WaitToAnimal, .WaitToManage, .Waitlang, .WaitTofract, .Waitcaplinerem, 
.Waitsearchfilter, .Waitweigh, .waitsearchfilternothing, .waitoutofrange, .WaitToancestor,
.WaitTodescendants, .WaitTogenomic, .Waitcapcheck, .Waitcappurpleerror, .WaitToRegister, 
.WaitTokkmbrand, .WaitTotimeline, .WaitPhenotype, .WaitToreport, .Waitmydetails, 
.WaitToindevidual, .WaitTosection, .WaitTopheno
{
    display:none;
    position:absolute;
    /* background-color: rgba(255, 255, 255, 0.7); */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3;
    font-family: roboto_condensedregular;
    font-size: 18px;
    /*click sets dimention dynamically*/
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
}

#limitswrap,#showweigh {
    text-align: left;
    font-size: 0px;
}

#limits,
#limitsrng,
#showweigh {
    display:block;
    width: calc(100% - 10px);
    height:40px;
    text-align: left;
    padding: 5px 0px 0px 10px;
    font-size: 18px;
}

/* #limitsrng {
    height: 115px;
} */

#limtext,
#limset,
#limrngtext,
#limrngsetstart,
#limrngsetend,
#limrngreset,
#wh, #weighingdate {
    display:inline-block;
    vertical-align: top;
}

#limtext,
#limrngtext,
#wh {
    width: 115px;
}

#limset,
#limrngsetstart,
#limrngsetend,
#limrngreset,
#weighingdate {
    width:fit-content;
}

#limrngreset {
    background-color: #fff;
    height: 34px;
    width: 34px;
    border-radius: 5px;
    line-height: 34px;
    color: #000;
    cursor: pointer;
    text-align: center;
    font-size: 25px;
    vertical-align: top;
    display:none;
}

.waitspintitle {
    position: absolute;
    bottom: -35px;
    text-align: center;
    height: 30px; /* or whatever height you want */
    line-height: 30px; /* to center the text vertically */
    width: 100%;
    color:#fff;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, #4caf50, #4caf50); /* green fill */
    transition: background-size 0.1s linear;
    border-radius: 5px;
}

#filelist {
    display:none;
    font-size: 0;
}

.flname, .flstatus {
    display:inline-block;
    font-size: 16px;
    border-bottom:1px solid #fff;
}

.flname {
    width:50%;
    border-right: 1px solid #2c3e50;
    text-align: left;
} 

.flstatus {
    width:40%;
    min-width:200px;
    text-align: left;
    padding-left: 30px;
    box-sizing: border-box;
    position: relative;
}

#filelist > div:nth-child(1) > div.flname,
#filelist > div:nth-child(1) > div.flstatus {
    border-bottom:1px solid #2c3e50;
}

#tocreateevent > div.row > div.col-3 > div > label
{
    text-align: center;
}

.mess {
    padding:10px;
}

#showevstartdate, #showevenddate, #evtitle {
    margin:0px;
}

#evtitle, #edittitle {
    margin:0px;
    width:100%;
}

#eventnote, #editeventnote {
    resize:none;
    width:100%;
    min-height:160px;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    font-family: roboto_condensedregular;
    font-size: 16px;
    overflow-y: hidden;
}

#limit_count, #editlimit_count {
    text-align: right;
    padding-right: 5px;
    font-size: 14px;
}

#evparlist {
    width:95%;
    height:160px;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    overflow-y:auto;

}

.evh, .evm {
    width: 40%;
    text-align: center;
    padding:0px;
}

.Waitweansave #weansave div.row,
.Wait12save #months12save div.row,
.Wait18save #months12save div.row
{
    text-align: center;
}

#bestwrap, #bestmanwrap {
    display:none;
}

input[id^='tobestStart'],
input[id^='tobestCan'] {
    display:none;
    margin: 0 auto;
    margin-bottom: 5px;
    margin-top: 5px;
}


input[id^='tobestCan'] {
    display:block;

}

/* #tobestCanwean,
#tobestCan12mon,
#tobestCan18mon,
#tobestCan18mon
 {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0px);
} */

/*Waitbacks END*/

.warn, .awarn, .inform {
    display:none;
    width:95%;
    min-height:20px;
    border:1px solid #ffffff;
    background-color: #e5352e;
    border-radius: 5px;
    margin:0 auto;
    padding-top:3px;
    text-align: center;
    line-height: 15px;
    color:white;
}

.awarn {
    margin-top:0px;
    width:85%;
    height:auto;
    padding:3px;
}

#canwarn, #dowarn {
    margin: 10px;
}

.awarn div {
    display:inline-block;
    padding: 10px;
}

.inform {
    background-color: #207f22;
}

/* #capweanbestcon label,
#cap12bestcon label,
#cap18bestcon label, */
#capcombobestcon label,
#capcombomanbestcon label
{
    padding-left:10px;
}

#bycamp, #bydate
{
    display:none;
}

#bydate div.tope, 
#bydate div.topa {
    display:none;
    background-color: #e4e6e8;
}

#showbest {
    background-color: #4caf50;
    border-radius: 5px;
    width: fit-content;
    padding: 0 5px;
    margin-left: 8px;
    display:none;
}

#bwd,
#showbest .topbest {
    display:inline-block;
    color:#ffffff;
}

#showbest .topbest:hover {
    color: #B83131;
    cursor:pointer;
}


#capcombomanbestcon  div.tope,
#capcombomanbestcon  div.topa {
    display:inline-block;
    background-color: #e4e6e8;
    width: calc(50% - 10px);
    vertical-align: middle;
}

/*login Shake*/

@keyframes shake {
    0%   {transform: translate(2px, 0px) rotate(0deg); } 
    25%  {transform: translate(0px, 0px) rotate(0deg); }
    50%  {transform: translate(-3px, 0px) rotate(0deg); }
    75%  {transform: translate(2px, 0px) rotate(0deg); }
    100% {transform: translate(2px, 0px) rotate(0deg); }
}

@-webkit-keyframes shake {
    0%   {-webkit-transform: translate(2px, 0px) rotate(0deg); } 
    25%  {-webkit-transform: translate(0px, 0px) rotate(0deg); }
    50%  {-webkit-transform: translate(-3px, 0px) rotate(0deg); }
    75%  {-webkit-transform: translate(2px, 0px) rotate(0deg); }
    100% {-webkit-transform: translate(2px, 0px) rotate(0deg); }
}

@-moz-keyframes shake {
    0%   {-moz-transform: translate(2px, 0px) rotate(0deg); } 
    25%  {-moz-transform: translate(0px, 0px) rotate(0deg); }
    50%  {-moz-transform: translate(-3px, 0px) rotate(0deg); }
    75%  {-moz-transform: translate(2px, 0px) rotate(0deg); }
    100% {-moz-transform: translate(2px, 0px) rotate(0deg); }
}

@-o-keyframes shake {
    0%   {-o-transform: translate(2px, 0px) rotate(0deg); } 
    25%  {-o-transform: translate(0px, 0px) rotate(0deg); }
    50%  {-o-transform: translate(-3px, 0px) rotate(0deg); }
    75%  {-o-transform: translate(2px, 0px) rotate(0deg); }
    100% {-o-transform: translate(2px, 01px) rotate(0deg); }
}

@-ms-keyframes shake {
    0%   {-ms-transform: translate(2px, 1px) rotate(0deg); } 
    25%  {-ms-transform: translate(0px, 2px) rotate(0deg); }
    50%  {-ms-transform: translate(-3px, 1px) rotate(0deg); }
    75%  {-ms-transform: translate(2px, 2px) rotate(0deg); }
    100% {-ms-transform: translate(2px, 1px) rotate(0deg); }
}

.shake {

    animation-name: shake;
    animation-duration: 0.2s;
    transform-origin:50% 50%;
    animation-iteration-count: 5;

    -webkit-animation-name: shake;
    -webkit-animation-duration: 0.2s;
    -webkit-transform-origin:50% 50%;
    -moz-animation-iteration-count: 5;

    -moz-animation-name: shake;
    -moz-animation-duration: 0.2s;
    -moz-transform-origin:50% 50%;
    -moz-animation-iteration-count: 5;

    -o-animation-name: shake;
    -o-animation-duration: 0.2s;
    -o-transform-origin:50% 50%;
    -o-animation-iteration-count: 5;

    -ms-animation-name: shake;
    -ms-animation-duration: 0.2s;
    -ms-transform-origin:50% 50%;
    -ms-animation-iteration-count: 5;
}

/*login Shake END*/

/*Loader*/

.loader, .loader::after {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: center;
    display: inline-block;
  }
  
  .loader {
    border-top: 3px solid rgba(255,255,255,0.5);
    border-right: 3px solid rgba(255,255,255,0.5);
    border-bottom: 3px solid rgba(255,255,255,0.5);
    border-left: 3px solid rgba(187, 49, 49, 1);
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-name: loading-spinner-animation;
    animation-name: loading-spinner-animation;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  
  @keyframes loading-spinner-animation {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg); }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-webkit-keyframes loading-spinner-animation {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  
  

/*Loader END*/

/*Settings*/

#setwrap {
    position:relative;
    text-align: left;
    padding-left:0px;
}

#setmenu  {
    display:inline-block;
    border-right:1px solid #2c3e50;
    height:calc(100% - 50px);
    vertical-align: top;
    width:17%;
    min-width: 270px;
}

.mainset {
    display:inline-block;
    height:calc(100% - 50px);
    overflow-y:auto;
    vertical-align: top;
    width:82%;
}

#reportwrap {
    position:relative;
    font-size: 0;
    text-align: left;
}

#reportwrap.hpanel{
    padding:10px 0;
    overflow-x:hidden;
}

#reportwrap .reportmainset {
    width: calc(100% - 20px);
    height: 100%;
    background-color: rgba(52, 52, 52, 0.7);
    margin-left: 10px;
}

#reportwrap #reportmenu {
    height: calc(100% - 20px);
}

#reportwrapper {
    text-align: center;
}

#genreport {
    margin:0px;
}

#repfeed, #overfeed {
    margin: 10px;
}

.reportmaintop {
    margin-top: 5px;
    min-height: 35px;
    line-height: 35px;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.7);
    text-align: left;
    padding-bottom:10px;
}

#ttype {
    font-size: 20px;
    padding-left:10px;
    box-sizing: border-box;
}

.setbutton, .reportsetbutton {
    display: block;
    height: 50px;
    background-color: #ffffff;
    border: 1px solid #aea9a9;
    margin: 5px;
    padding: 5px 0;
    line-height: 25px;
    border-radius: 5px;
    font-family: 'roboto_condensedregular';
    font-size: 16px;
    cursor: pointer;
}

.reportsetbutton {
    height: 25px;
    text-align: center;
    background-image: url('../images/report.webp');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 25px;
}


#tmp_kraal.reportsetbutton,
#reportoptions {
    width: auto;
}

.settopmenu {
    text-align:right;
}

.settingsbox {
    border:1px solid rgb(174, 169, 169);
    padding:15px;
    text-align: left;
    background-color: rgba(255,255,255,0.7);
    border-radius: 5px;
    position:relative;
    margin-bottom:10px;
    display:none;
} 

.settingsbox .setsave {
    float:right;
    right:15px;
    bottom:15px;
    width:110px;
    background-color:rgb(44, 62, 80);
    color:#fff;
}

/* #currentuserpass,
#userpass,
#userpassverify, */
#setlng,
#breed_opt,
#farmsoft {
    width:18vw;
    min-width:220px;
}

.textwrap {
    max-width:30%;
}

#othersoft,#farmsoft {
    font-family: roboto_condensedregular;
    font-size: 16px;
    margin:5px 0;
}

#t_setaccount {
    margin-top:0px;
}

.otherwrap {
    display:none;
}

input[type='date'][id$=start],
input[type='date'][id$=end]{
    width:100%;
}

.ms {
   text-align: left;
    font-size: 16px;
    width:100%;
}

.softwrap {
    display:block;
}

.otherwrap {
    display:none;
}

#setsearchval {
    display:inline-block;
    vertical-align: top;
    width:400px;
    
}


#doall,#doweigh,
#dosearch,#dofilter,
#dolookup, #dohistory,
#mutation, #biohistory,
#dnatrack,#dolist,
#dolistdownload,
#addme
{
    display:inline-block;
    vertical-align: top;
    width:32px;
    height:32px;
    background-image: url('../images/search.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    margin-right:5px;
    border-radius: 5px;
}

#dolist,
#dolistdownload {
    display:none;
}

#mutation.dnachosen,
#biohistory.dnachosen,
#dnatrack.dnachosen
{
    background-color: #d3c1af;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

#doall {
    display:none;
}

#showsearchcount {
    display:none;
    margin-right:10px;
}

#sleft,
#scount,
#sright {
    display:inline-block;
    width:30px;
    height:32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    background-color: #fff;
    vertical-align: top;
    text-align: center;
}

#sleft {
    background-image: url("../images/goleft.webp");
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor:pointer;
}

#scount {
    width:60px;
}

#sright {
    background-image: url("../images/goright.webp");
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right:10px;
    cursor:pointer;
}

#doall {
    background-image: url('../images/checkb.webp');
}

#dofilter {
    background-image: url('../images/filter.webp');
}

#doweigh {
    background-image: url('../images/scale.webp');
}

#dolist {
    background-image: url('../images/list.webp');
}

#dolistdownload {
    background-image: url('../images/download.webp');
}

#addme {
    background-image:none;
    text-align: center;
    line-height: 32px;
    cursor:pointer;

}

#dolookup {
    background-image: url('../images/sidebinoculars.webp');
}

#dohistory,
#secthistory {
    display:none;
    background-image: url('../images/sidehistory.webp');
}

#mutation {
    background-image: url('../images/mutation.webp');
}

#biohistory {
    background-image: url('../images/biohistory.webp');
}

#dnatrack {
    background-image: url('../images/dnatrack.webp');
}



#cansearchwrap, #choice {
    display:none;
    vertical-align: top;
    position: absolute;
    right: 20px;
    top:0px;
    
}

#choice {
    display:block;
    top:7px;
}

#showsearch,#showfilters {
    display:none;
}


#setadjustopt {
    padding-top: 20px;
}

#breedforopt {
    width: 260px;
    margin-bottom:5px;
}

#onetimeopt {
    margin: 2px 0;
}

#breedseasonadvanced {
    display:none;
}

.Waitcolumns 
/*, .Waitsorts  */
{
    display: none;
}

.rangecontainer {
    width: 100%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .range {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 97%; /* Full-width */
    height: 25px; /* Specified height */
    background: rgba(133,128,128,0.2); /* white background */
    outline: none; /* Remove outline */
    /* opacity: 1; Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    padding:4px;
    border-radius: 5px;
    margin-top: 4px;
  }
  
  /* Mouse-over effects */
  /* .range:hover {
    opacity: 1; /* Fully shown on mouse-over 
  } */
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .range::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #2c3e50; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 5px;
  }
  
  .range::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

  .setbor, .setborT {
    box-sizing: border-box;
    border: 1px solid #aea9a9;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.4);
    padding-left:10px;
    padding-bottom:15px;
    
  }

  .setflex {
    display:flex;
  }

  .switchwrap {
    text-align: left;
  }
  
  .act
  {
      background-color: var(--fc-button-bg-color);
      border-color: var(--fc-button-border-color);
      color: var(--fc-button-text-color);
  }

/*Settings END*/

/* @media only screen and (max-width: 1875px) {

    #limits,#limitsrng {
        display: block;
        width: 100%;
    }

} */

@media only screen and (max-width: 1820px) {

    #utbirthhead > div:nth-child(1) > div#hdr2 {
        display:none;
    }

    #centerline {
        width: 75vw;
    }

    .logocontainer {
         background-size: 50%;
    }
}

@media only screen and (max-width: 1692px) {

    #aloginnamewrap, #aloginpasswrap {
        width: 40%;
        display: inline-block;
    }

}

@media only screen and (max-width: 1650px) {

    #groupoccupants > .groupinner .campanim,
    #groupmalelist > .groupinner .campanim,
    #groupfemalelist > .groupinner .campanim
    {
        height:auto;
    }

    .infogroup, .leavegroup, .joingroup, .allgroup {
        position:relative;
        right:0px;
        top:0px;
        width: 45%;
        height: 40px;
    } 

    .campanim .groupact div {
        display:inline-block;
    }

    .campanim .groupact {
        text-align: center;
        font-size: 0px;
    }

    #cirwrap {
        top: 10%;
        /* left: 2%; */
        left: calc(25% - 128px);
        /* transform: translate(-50%, 0%); */
        height:340px;
        width:340px;
    }

    #appcon, #forpass,#register {
        display:block;
        width:100%;
    }

    .logocontainer {
        background-size: 50%;
    }

    /*animal*/
    #datapwrap > div > div {
        width: 1600px;
    }

    #lform {
        margin: 0 10px;
    }

    #aloginnamewrap.rowbox, #aloginpasswrap.rowbox {
        width: 100%;
        display: block;
        margin:0px
    }
}


/* Tablet or desktop square*/
@media only screen and (min-width: 801px) and (max-width: 1601px) {

    #grouplist {
        height:200px;
        min-height:200px;
        overflow-y:auto;
    }

    #breedservicewrap > div.col-3 {
        width:95%; 
    }
    
    #breedservicewrap > div.col-3 > div.col-12 {
        width:99%; 
        margin-left: 0.5rem;
    }
    
    #breedservicewrap > div.col-4 {
        width:46%;  
    }

    #breedservicewrap > div:nth-child(3).col-5 {
        width:46%; 
    }   

    #groupmalelist > div.groupheader > div.camp,
    #groupfemalelist > div.groupheader > div.camp {
        display:none;
    } 

   #groupmalelist > .groupinner > .campanim > div.camp,
   #groupfemalelist > .groupinner > .campanim > div.camp {
    width:100%;
    text-align: center;
    color:#e5352e;
   }

   .campanim > div.name, 
   #groupoccupants > div.groupheader > div.name, 
   #groupfemalelist > div.groupheader > div.name, 
   #groupmalelist > div.groupheader > div.name   {
    width: 150px;
    font-size:16px;
    
    text-align: left;
   }

   #groupoccupants > div.groupheader > div.name, 
   #groupfemalelist > div.groupheader > div.name, 
   #groupmalelist > div.groupheader > div.name {
    margin-left: 36px;
   }

   
   .campanim > div.num, 
   #groupoccupants > div.groupheader > div.num, 
   #groupfemalelist > div.groupheader > div.num, 
   #groupmalelist > div.groupheader > div.num   {
    
    width: 90px;
    font-size:16px;
    text-align: left;
   }

   #appcon, #forpass {
    display:block;
    width:100%;
   }

    /* weather */
    #weatherpan > div.city-ico-place > div.figcaption {
        display:none;
    }

    #weatherpan .city-icon {
        position: absolute;
        width: 80px;
        height: 80px;
        left: 36%;
        top: 50%;
        transform: translate(-50%, -50%);
    } 
    
    #weatherpan > div.city-name {
        display:none;
    }

    /*animal*/

    #findinnerwrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 8px;
        grid-row-gap: 0px;
    }
        
    #trd1 { grid-area: 1 / 1 / 3 / 2; }
    #trd2 { grid-area: 1 / 2 / 2 / 3; }
    #trd3 { grid-area: 2 / 2 / 3 / 3; }
    #trd4 { grid-area: 3 / 1 / 4 / 3; }
    #trd5 { grid-area: 4 / 1 / 6 / 2; }
    #trd6 { grid-area: 4 / 2 / 5 / 3; }
    #trd7 { grid-area: 5 / 2 / 6 / 3; }

    #trd4 {
        background-size: contain;
    }

    
}


@media only screen and (max-width: 1586px) {
    
   .logocontainer {
        max-width: 300px;
    }
 
    .campanim > div.camp {
        display:inline-block;
    }

    #appcon, #forpass, #register {
        display:block;
        width:100%;
    }

    .logocontainer {
        background-size: 70%;
    }

}

@media only screen and (max-width: 1570px) {

    #cirwrap {
        height: 280px;
        width: 280px;
        top: 6%;
        left: calc(50% - 140px);
        transform: translate(0%,0%);
    }

    #cirmoreside {
        width:100%;
        top: unset;
        bottom: 0px;
        height: 85px;
        background-color: rgb(255, 255, 254); /*when on bottom*/
    }

    #cirinfo {
        height: 130px;
        width: 100%;
        margin:0px; 
        padding: 0px;
        text-align: center;
        position: absolute;
        top: unset;
        right: 0px;
        left: 0px;
        /* bottom: 50px; */
        bottom:0px;
    }

    #squareround {
        right:5px;
    }

    #stats {
        left:unset;
        bottom:unset;
        right:20px;
        top:90px;
    }

    div.apexcharts-toolbar {
        left:5px !important;
        top:-20px !important;
        max-width: 125px;
        right:unset;
    }

    #TAmain {
        height:440px;
    }

    #statswrap, #dashcentercol, #dashcentercolback {
        height: 580px;
    }

    #activepan, #servicepan, #syncpan, #faultspan {
        height: 135px;
    }

    #hcontainerback div[id^='apexcharts'] {
        position: absolute;
        top: 43px;
    }

    #faultspan {
        margin-bottom: 8px;
    }

    .hpanels .hpsn {
        font-size: 40px;
    }

    #weatherpan .city-temp {
        font-size: 40px;
    }

    #weatherpan .city-name sup {
        font-size:10px;
    }

    #calwrap {
        height:580px;
    }

    .circ {
        top: 35px;
        /* left: 25px; */
        height: 210px;
        width: 210px;
        left: calc((100% - 210px) / 2);
    }

    #cirinfo .cirmoreexp {
        bottom: 0px;
        right: 5px;
    }

    #cirinfo .cirmoredown {
        bottom: 0px;
    }

    #cirinfo .hpsn {
        position:absolute;
        top: 15px;
        left:0px;
        height:50px;
        margin-left: 20px;
        font-size:30px;
    }

    #cirinfo .hpsfr {
        margin: 5px 0 0 10px;
    }

    #cirinfo .hpbrd {
        position:absolute;
        left:10px;
        top:5px;
        padding:0 10px;
    }

    #cirinfo .hpstr,
    #cirinfo .hpstr1,
    #cirinfo .hpstr2,
    #cirinfo .hpstr3 {
        margin-top:0px;
    }

    .mainset {
        width:75%;
    }

    #todateOk, #todateCan {
        display: block;
        width: 95%;
        margin: 0px 10px;
    }

    .plotcnt, .plotTcnt {
        font-size: 16px;
        min-height:23px;
        line-height:16px;
        left:-14px;
        z-index:1;
    }

    .plotcnt.centered {
        height:40px;
        width:100px;
        left:-43%;
        z-index:2;
    }

    .cirmoreinf div {
        padding-left:10px;
    }

    #appcon, #forpass, #register {
        display:block;
        width:100%;
       }

    #repwrapcover {
        height:300px;
    }

    #repwrap {
        height: 250px;   
    }

    /* weather */
    #weatherpan > div.city-ico-place > div.figcaption {
        display:none;
    }

    #weatherpan .city-icon {
        position: absolute;
        width: 80px;
        height: 80px;
        left: 36%;
        top: 50%;
        transform: translate(-50%, -50%);
        display:none;
    }  

    #weatherpan .weatherblank {
        display:block;
        width:130px;
        height:130px;
        transform: translate(-41%, -42%);
      }
    
    #weatherpan > div.city-name {
        display:none;
    }

    #reportpan > div.hpsn, 
    #scalepan > div.hpsn,
    #QRpan > div.hpsn {
        left: calc(50% - 25%);
        top: 50px;
    }

    #datapwrap > div > div {
        width: 1500px;
    }

}

@media only screen and (max-width: 1510px) {
    #tableright #tablerightinner .row {
        width:fit-content;
    }

    #pardash > row > div.col-2 {
        width: 29.33%;
    }

}

@media only screen and (max-width: 1410px) {
    
   #appcon, #forpass,#register {
    display:block;
    width:100%;
   }

   #limitsrng {
    height:80px;
   }
   
   #limrngsetend {
    margin: 5px 0 0 120px;
   }

}

@media only screen and (max-width: 1390px) {

    #calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(1)
    {
        width: 100%;
    }

    #aback, #aemail {
        display:block;
        width:98%;
    }

    #ancestorcon, #descendantscon, 
    #genomiccon, #timelinecon,
    #phenocon {
        width: 93vw;
        margin-left: 39px;
        height: 89vh;
        transition: none;
    }

    /* shift all grid items */
    .infocard1 { grid-area: 1 / 1 / 2 / 6;   height:275px;}
    .infocard2 { grid-area: 1 / 6 / 2 / 13;  height:275px;}
    
    .infocard4 { grid-area: 2 / 1 / 3 / 5;  height:170px;}
    .infocard5 { grid-area: 2 / 5 / 3 / 9; height:170px;}
    .infocard6 { grid-area: 2 / 9 / 3 / 13; height:170px;}
    
    .infocard3 { grid-area: 3 / 1 / 4 / 6;  height:275px;}
    .infocard7 { grid-area: 3 / 6 / 4 / 13;  height:275px;}

    .infocard8 { grid-area: 4 / 1 / 5 / 7; height:275px;}
    .infocard9 { grid-area: 4 / 7 / 5 /13;  height:275px;}

   
} 

/* Square */
@media only screen and (max-width: 1360px) { 

    #taparlist .row {
        font-size:16px;
        line-height: 34px;
    }

}

/*square screen*/
@media only screen and (max-width: 1280px) {
    
    #tasearchwrp > div.loader {
        left: calc(100% - 118px);
    }
    
    #taparlist .tappfiltext {
        width: calc(24vw - 3px);
    }

    #animalwrap > div.col-8 {
        width:96%;
    }

    #animalwrap > div.col-4 {
        width:96%;
        height: fit-content;
    }

    .twint {
        display:inline-block;
        width:100%;
    }

    .optsplit {
        display: inline-block;
        width: 1px;
        height: 120px;
        vertical-align: top;
    }

    /* .prestats {
        left: 10px;
    } */
    /* #overview .preimg {
        display:none;
    } */
}

@media only screen and (max-width: 1220px) {

    #findinnerwrap {
        display: block;
        margin-top: 40px;
        height: calc(83vh - 83px);
    }

    #lokewrap {
        height: auto;
    }

    #findinnerwrap {
        display:block;
        margin-top: 40px;
        height: calc(83vh - 83px);
    }

    .liststretch {
        display: block;
        width: 96%;
        height: 80vh;
    }

    #pardash > row > div {
        width: 46%;
    }
}

@media only screen and (max-width: 1183px) {

    /*reset margins*/
    #predash #d4, 
    #predash #d5, 
    #predash #d8 {
        margin: 0 6px 10px 6px;
    }

    #predash #d1,
    #predash #d4,
    #predash #d7
    {
        margin-left:0px;
    }

    #predash #d3,
    #predash #d6 {
        margin-right:0px;
    }

    #tasearch {
        width:330px;
    }

    /* 250 width */
    #predash .hpanelt {
        width: calc((100% - 33px) / 3); /*split by 3*/
    }

    .prestats {
        left: unset;
    }

} 

@media only screen and (max-width: 1150px) { 

    #daywrap > div:nth-child(1),
    #daywrap > div:nth-child(2),
    #daywrap > div:nth-child(3),
    #daywrap > div:nth-child(4),
    #daywrap > div:nth-child(5),
    #daywrap > div:nth-child(6)
    {
        width:calc((100% - 120px) / 3);
    }

    #daywrap > div:nth-child(4),
    #daywrap > div:nth-child(5),
    #daywrap > div:nth-child(6) {
        height: 190px;
    }

    #daywrap > div:nth-child(4) #wsym,
    #daywrap > div:nth-child(5) #wsym,
    #daywrap > div:nth-child(6) #wsym {
        margin-top:-15px;
    }

    #wtempmin, #wtempmax {
        display:block;
    }
}

@media only screen and (max-width: 1150px) and (orientation: landscape) {
    #wtempmin, #wtempmax {
        display:inline-block;
    }
 }

@media only screen and (max-width: 1120px) { 
    
    #activepan, #servicepan, 
    #syncpan, #faultspan {
        height: 135px;
    }

    #cirdesc {
        display:none;
    }

    #taparlist .row {
        font-size:16px;
        line-height: 30px;
    }

    #weatherpan .city-temp {
        font-size: 30px;
        top:10px;
    }

    .figcaption {
        font-size: 16px;
    }

    .city-name {
        display:none;
    }

    .wbrow .fold {
        display:block;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 86%;
        display: block;
    }


}

@media only screen and (max-width: 1116px)  {
 
    #daywrap > div:nth-child(1),
    #daywrap > div:nth-child(2) {
        width:calc((100% - 130px) / 2);
    }

    #daywrap > div:nth-child(3),
    #daywrap > div:nth-child(4),
    #daywrap > div:nth-child(5),
    #daywrap > div:nth-child(6) {
        width:calc((100% - 210px) / 4);
    } 

    #daywrap > div:nth-child(3) {
        height: 190px;
    }

    #daywrap > div:nth-child(3) #wsym {
        margin-top:-15px;
    }


}

@media only screen and (max-width: 1050px)  {

    #reportpan > div.hpsfr, 
    #scalepan > div.hpsfr, 
    #QRpan > div.hpsfr,
    #weatherpan > div.hpsfr {
        padding-right:0px;
        text-align:center;
        line-height:18px;
    }

    .figcaption {
        display:none;
    }

    #reportpan > div.hpsn, 
    #scalepan > div.hpsn, 
    #QRpan > div.hpsn,
    #weatherpan > .city-temp {
        top: 65px;
    }

    #weatherpan > .city-temp {
        width: 100%;
        left: 0px;
        top: 33px;
    }

    #ancestorcon, #descendantscon, #genomiccon, #timelinecon, #phenocon {
        width: 98vw;
        margin-left: unset;
        height: 84vh;
        transition: none;
    }

    #datapwrap {
        height: calc(100% - 100px);
    }

    #ancestorCan, #descendantCan, #genomicCan, #timelineCan, #phenotypeCan {
        bottom: 10px;
        right: 20px;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 85%;
        display: block;
    }
}

@media only screen and (max-width: 1000px)
{
/*shift dash */
    #infodash {
        grid-template-rows: 275px 275px 170px 275px 275px;
    }

    .infocard1 { grid-area: 1 / 1 / 2 / 7; }
    .infocard3 { grid-area: 1 / 7 / 2 / 13; }
    
    .infocard2 { grid-area: 2 / 1 / 3 / 13; }
    
    .infocard4 { grid-area: 3 / 1 / 4 / 7; }
    .infocard5 { grid-area: 3 / 7 / 4 / 13; }

    .infocard6 { grid-area: 4 / 1 / 5 / 7; height: 275px }
    .infocard7 { grid-area: 4 / 7 / 5 / 13; height: 275px }

    .infocard8 { grid-area: 5 / 1 / 6 / 7; }
    .infocard9 { grid-area: 5 / 7 / 6 / 13; }
   
}

@media only screen and (max-width: 940px)
and (orientation: portrait) {
    
    .inputcontainer.full {
        width: auto;
    }

    #treewrap, #dtreewrap {
        min-height: 260px;
    }

    #timelinedata > div[id^=timer],
    #timelinedata > div[id^=time] {
        width: 850px;
    }

}

@media only screen and (max-width: 940px)
and (orientation: landscape) {

    .inputcontainer {
        width:70vw;
    }

    #inputemail {
        max-width: none;
    }

    .logocontainer {
        display: inline-block;
        width: 49%;
        background-position: center;
    }

    .rotmobwrap {
        position: relative;
        display: inline-block;
        width: 50%;
        vertical-align: top;
        height: 200px;
    }

    #inputwrap {
        display: none;
    }

    #soswrap {
        display:none;
    }

    #findinnerwrap {
        display:block;
        margin-top: 40px;
        height: calc(80vh - 20px);
    }

    #pagewrap > div.homecontainer > div:nth-child(2) > div.col-12 {
        margin-bottom:0px;
    }

    #descendantscon {
        margin-left:0px;
        height: 80vh;
    }

    #ancestorcon, #descendantscon, 
    #genomiccon, #timelinecon {
        margin-left: 37px;
        width: 90vw;
        top: 350px;
        transition:none;
    }

    #ancestorCan, #descendantCan, 
    #genomicCan, #timelineCan, #phenotypeCan {
        bottom: 7px;
        right: 7px;
    }

    #timelinewrap {
        display:none;
    }

    #timelinecon {
        margin-left: 33px;
        width: 90vw;
        top: 227px;
        height: 82vh;
    }

    #timelinedata > div[id^=timer],
    #timelinedata > div[id^=time] {
        width: 850px;
    }

    #timelinecontent {
        min-width:unset;
        width: 86vw;
        height: 75%;
        margin-top:0px;
    }

    #timelinecontent .dashpaneltop {
        display:none;
    }

    #timelinedata {
        height: 71%;
    }

    #ancestorcon {
        top: 50%;
        height:90vh;
    }

    #treelevewrap {
        left: 2px;
        bottom: 2px;
        top: unset;
    }    

    #lokewrap {
        height:auto;
    }

    #treewrap, #dtreewrap {
        min-height: 230px;
    }
   
}

@media only screen and (max-width: 920px)  {

    #weatherpan .city-icon {
        display:none;
    }

    .flip, #facebwrap {
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
    }

    #dashcentercolback {
        display:none;
    }


}

@media only screen and (max-width: 920px) 
and (orientation: portrait) {

    #installApp.insapp {
        width: 97%;
        height: 30px;
        background-image:none;
        content: "";
        line-height:30px;
    }

    #register {
        width: 100%;
        height: 32px;
    }

    #dashwrap, #breeddata {
        height:auto;
    }

    #hslide, #uslide, #fslide, #cslide, #sslide, #pslide, #cslide {
        box-sizing: border-box;
        width: 100%;
        position:absolute;
        z-index:1;
        border-radius: 5px;
        
        /* background-color: #FFF; */
    }

    .hpanelt {
        width:100%;
        margin: 5px 0;
        height:50px;
    }

    .hpanelt > .hpsn {
        height: 25px;
        line-height: 25px;
        font-size: 35px;
    }

    .hpanelt > .hpsfr {
        font-size: 16px;
        height: 25px;
        line-height: 25px;
    }

    .hpsfr, .hpssr, .hpstr {
        text-align: right;
        padding:0px 5px 0px 0px;
    }

    #fslide > .loader, #fslide > .loader::after,
    #cslide > .loader, #cslide > .loader::after,
    #pslide > .loader, #pslide > .loader::after
    #cslide > .loader, #cslide > .loader::after
    {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    #fcontainer div.frow div.fname, #wcontainer div.frow div.fname {
        margin-left:0px;
    }

    div#fcontainer .frow div {
        width:100%;
    }

    div#fcontainer div[class^="mobcol"] {
        display: inline;
    }

    #fcontainer pre {
    display: inline-block;
    }


    .frow, .brow {
        margin: 10px 5px;
        background-color: rgba(255,255,255,0.5);
    }

    .frow div, .brow div, .brow .fdoba, .brow .fserviceda, .brow.fchildren {
        width:100%;
        margin-left:0px;
    }

    [id^='tabut'] {
        background-image:none;
    }

    #fcontainer div.frow div.fbreed, #wcontainer div.frow div.fbreed {
        margin-left:0px;
    }

    #fcontainer div.frow div.freact, 
    #wcontainer div.frow div.freact {
        margin-bottom:10px;
    }

    .frow div.ferror {
        width:100%;
    }

    #fcontainer > div > div.ferror > div.mobcol4,
    #wcontainer > div > div.ferror > div.mobcol4
    {
        display:block;
    }

    #fcontainer, #wcontainer {
        /* overflow-y: auto; */
        height: calc(100% - 40px);
    }

    #ucontainer {
        overflow:hidden;
    }

    #breedfaultswrap, #breeduploadwrap, #breedcyclewrap {
        height: 100%;
        /* background-color: rgba(255,255,255,0.5); */
    }

    #toreactcon {
        width: 90vw;
        height:auto;
    }

    #toreaction {
        height:120px;
        margin-top: 5px;
    }

    #toreactOk, #toreactCan {
        width:98%;
    }

    .reactslide {
        height:auto;
        width:87vw;
    }

    .reactslide .switch {
        float:none;
    }

    .reactslide, .reactslide div {
        height:auto;
    }

    .figcaption {
        font-size: 16px;
    }

    #hslideinner {
        height: 70px;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 84%;
        display: block;
    }

    .logocontainer {
        background-size: 45%;
    }


}

@media only screen and (max-width: 899px) { 
   

    /* fit inline gap */
    #overview {
        font-size: 0px; 
        overflow:hidden;
    }

    /*reset margins*/
    #predash #d1, 
    #predash #d2, 
    #predash #d3, 
    #predash #d4, 
    #predash #d5, 
    #predash #d6, 
    #predash #d7, 
    #predash #d8 {
        margin: 0 6px 10px 6px;
    }

    #predash #d1,
    #predash #d3,
    #predash #d5,
    #predash #d7
    {
        margin-left:0px;
    }

    #predash #d2,
    #predash #d4,
    #predash #d6,
    #predash #d8 {
        margin-right:0px;
    }

    /* shift blocks for phone*/
    #predash .hpanelt {
        width: calc((100% - 16px) / 2);/*split by 4*/
        min-width:80px;
        margin-left:4px;
        margin-right:4px;
    }

    #predash #breedsel {
        padding: 15px 0 10px 5px;
    }

    /* #overview .preimg {
        display:block;
    } */

    .prestats {
        left: unset;
    }

    

}

@media only screen and (min-width: 820px) 
and (max-width: 920px) {
    
  /*from here the headers takes to much space. change to word header only*/
    
    #utbirthhead div[id^='hdr'] {
        display:none;
    }   

    #utbirthhead div.row {
        height:50px;
    }


    #utbirthbody .bdy {
        width:calc(100% / 4);
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 83%;
        display: block;
    }

}

@media only screen and (min-width: 820px) 
and (max-width: 920px)
and (orientation: landscape) { 

    .inputcontainer {
        width:70vw;
    }

    .logocontainer {
        display: inline-block;
        width: 49%;
        vertical-align: top;
    }
    
    .rotmobwrap {
        position: relative;
        display: inline-block;
        width: 50%;
        vertical-align: middle;
        height: 200px;
    }

    #inputwrap {
        display: none;
    }
 

}

@media only screen and (min-width: 920px) 
and (max-width: 1375px)  {

    #blist, #wlist, #flist {
        display:none;
    }

    .frow, .brow {
        margin: 10px 5px;
        background-color: rgba(255,255,255,0.5);
    }

    .frow div, .brow div, 
    .brow .fdoba, .brow .fserviceda, .brow.fchildren,
    .frow .fname, .frow .fbreed,     .frow .ferror,
    .brow .fage,  .brow .fdob,       .brow .fweight, .brow div.fweightadj,
    .brow .fada,  .brow .fadg,       .brow .flhratio, .brow div.fskinthickness,
    .brow .fscrotumcircum, .brow .flength, .brow div.fheight,  .brow div.ffcr,
    .brow .fkleiberratio,  .brow .fkleiberind, .brow div.fweanmatind, 
    .brow .fweandirind,    .brow .fkleiberacc, .brow div.fweanind, .brow div.fweanmatacc,
    .brow .fweandiracc,     #utweanbody div.wrap,   
    #ut12monbody div.wrap, 
    #ut18monbody div.wrap, 
    #utcombobody div.wrap,
    .frow div.fdob,
    .fhead#colsex, 
    #fcontainer .fsex 
    {
        width:100%;
        margin-left:0px;
    }

    .frow div.ferror {
        width: 100%;
    }

    .frow div.faction {
        text-align: right;
        padding-bottom:5px;
    }
 
    div[class^="mobcol"], 
    div.fnumber > pre, 
    div.fanumber > pre, 
    div.fcompnumber > pre,
    /* .utcontainer, */
    .brow div.fsex,
    input[id^=candate_],
    
    div[id^=sex_],
    div.fweighdate div[id^=weighdate_],
    div.fweighage div[id^=weighage_]
    {
        display:inline;
        vertical-align: baseline;
    }

    div.fweighage div[id^=weighage_] {
        display:inline-block;
    }

    input[id^=weighdate_]
    {
        width:fit-content;
    }

    input[id^=candate_] {
        width:fit-content;
    }

    .hpanelt > .hpsn {
        top:0px;
    }

    #utcanhead .fltfilter#Co1, 
    #utcanhead .fltfilter#Co2, 
    #utcanhead .fltfilter#Co3, 
    #utcanhead .fltfilter#Co4, 
    #canhishead .fltfilter#Co1, 
    #canhishead .fltfilter#Co2, 
    #canhishead .fltfilter#Co3, 
    #canhishead .fltfilter#Co4, 
    #utweanhead .fltfilter#Co1, 
    #utweanhead .fltfilter#Co2, 
    #utweanhead .fltfilter#Co3, 
    #utweanhead .fltfilter#Co4,
    #ut12monhead .fltfilter#Co1, 
    #ut12monhead .fltfilter#Co2, 
    #ut12monhead .fltfilter#Co3, 
    #ut18monhead .fltfilter#Co4,
    #ut18monhead .fltfilter#Co1, 
    #ut18monhead .fltfilter#Co2, 
    #ut18monhead .fltfilter#Co3, 
    #ut18monhead .fltfilter#Co4,

    #utcombohead .fltfilter#Co4,
    #utcombohead .fltfilter#Co1, 
    #utcombohead .fltfilter#Co2, 
    #utcombohead .fltfilter#Co3, 
    #utcombohead .fltfilter#Co4

    {
        width:130px;
    }

    #dateadj,#resan
    {
        width:150px;
    }
  
    .wbrow .fnumber,
    .wbrow .fweighdate,
    .wbrow .fweighage,
    .wbrow .fold .fcalfweight,
    .wbrow .fold .fcowweight,
    .wbrow .fdob
    {
        display:inline-block;
        width:120px;
        vertical-align: top;
    }
    
    .wbrow .fage
    {
        display:inline-block;
        width:10px;
        vertical-align: top;
    }
    
    .wbrow .fsex
    {
        display:inline-block;
        width:65px;
        vertical-align: top;
    }
    
    .wbrow .fage {
        display:inline-block;
        width:55px;
        vertical-align: top;
    }

    .cbrow .fcompnumber {
        display:inline-block;
        width:125px;
        vertical-align: top;
    }

    .cbrow .fsex {
        display:inline-block;
        width:62px;
        vertical-align: top;
    }

    .cbrow .fstatus {
        display:inline-block;
        width:75px;
        vertical-align: top;
    }
    
    .cbrow .fold {
        display:block;
    }

    .cbrow .fold .checkwrap {
        padding-top: 0px;
    }

    .cbrow .fold .utcontainer {
        display:block;
    }

    .cbrow .fold .utcontainer .utcheckmark {
        top:5px;
        left:10px;
    }
    
    .wbrow .fold .checkwrap {
        display: inline-block;
        vertical-align: top;
        padding-top: 0px;
        width: 95px;
    }
    
    .wbrow .fold .wrap {
        display: inline-block;
        vertical-align: top;
        width: 145px;
        
    }

    .fold .wrap select,
    .fold .nwrap select,
    .fold div.checkwrap label span
    {
        margin: 5px 0;
    }
    
    .fold div.checkwrap label span
    {
        margin: 2px 0px 0px 0px;
    }

    .wbrow .fweighage,
    .wbrow .nwrap {
        display: inline-block;
        vertical-align: top;
        width: 210px;
    }

    .wbrow .fweighage {
        display: inline-block;
        vertical-align: top;
        width: 200px;
    }
    
    .wbrow .fanumber {
        display:none;
    }

    /* .wbrow .fold {
        display:block;
    } */

    #ut12monbody .wbrow .factualweight,
    #ut12monbody .wbrow .fcowweight,
    #ut12monbody .wbrow .fcowheight,
    #ut12monbody .wbrow .fcowlength,
    #ut12monbody .wbrow .fscrotum,
    #ut12monbody .wbrow .fcowhide,
    #ut18monbody .wbrow .factualweight,
    #ut18monbody .wbrow .fcowweight,
    #ut18monbody .wbrow .fcowheight,
    #ut18monbody .wbrow .fcowlength,
    #ut18monbody .wbrow .fscrotum,
    #ut18monbody .wbrow .fcowhide,

    #utcombobody .wbrow .factualweight,
    #utcombobody .wbrow .fcowweight,
    #utcombobody .wbrow .fcowheight,
    #utcombobody .wbrow .fcowlength,
    #utcombobody .wbrow .fscrotum,
    #utcombobody .wbrow .fcowhide
    {
        display:inline-block;
        width:110px;
    }

    .wbrow [id^=reset] {
        position:absolute;
        right:5px;
        bottom:0px;
    }

    #weansave,
    #months12save,
    #months18save {
        width: 50vw;
    }

    #weansave div.row div.col-6 div,
    #months12save div.row div.col-6 div,
    #months18save div.row div.col-6 div {
        padding-left:5px;
    }

    .flip, #facebwrap {
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
    }
}

/*REPORTS*/

#printme {
    width: 595px;
    height: fit-content;
    z-index: -5;
    background-color: #fff;
}

[id^="sphdr"],
[id^="tphdr"] {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: #bb3131;
}

[id^="sphdr"], [id^="spdr"],
[id^="tphdr"], [id^="tpdr"] {
    display:inline-block;
    margin: 0 1px;
    font-size: 14px;
    text-align: center;
    
}

/* wean */
#sphdr1, #spdr1  {
    width:80px;
}

#sphdr2, #spdr2  {
    width:45px;
}

#sphdr3, #spdr3  {
    width:100px;
}

#sphdr4, #spdr4  {
    width:40px;
}

#sphdr5, #spdr5  {
    width:80px;
}

#sphdr6, #spdr6  {
    width:90px;
}

#sphdr7, #spdr7  {
    width:130px;
}

/* 12months */
#tphdr1, #tpdr1  {
    width:80px;
}

#tphdr2, #tpdr2  {
    width:45px;
}

#tphdr3, #tpdr3  {
    width:100px;
}

#tphdr4, #tpdr4  {
    width:60px;
}

#tphdr5, #tpdr5  {
    width:60px;
}

#tphdr6, #tpdr6  {
    width:60px;
}

#tphdr7, #tpdr7  {
    width:100px;
}

#tphdr8, #tpdr8  {
    width:60px;
}

#phead {
    position:relative;
    height:80px;
    margin-top:5px;
    margin-bottom: 15px;
}

#plogoleft {
    display:inline-block;
    background-color: #fff;
    height: 80px;
    width:80px;
}

#pcenter {
    display:inline-block;
    height: 80px;
    width: 435px;
    text-align: center;
    vertical-align: top;
}

#phname {
    font-size: 24px;
    width: fit-content;
    padding-bottom: 2px;
    margin: 0 auto;
    margin-top: 10px;
    border-bottom: 1px solid #bb3131;
}

#phdate {
    font-size: 14px;
    margin-top: 5px;
}

#plogoright {
    display:inline-block;
    background-color: #fff;
    height: 80px;
    width:80px;

}

#plogoleft img,
#plogoright img {
    width:80px;
}

#spdr4,#spdr6,#spdr7,
#tpdr4,#tpdr5,#tpdr6,#tpdr7,#tpdr8 {
    border-bottom: 1px solid #e0dfdf;
    border-left: 1px solid #e0dfdf;
    border-right: 1px solid #e0dfdf;
}

#printme [id^='page'] {
    width: 595px;
    height: 842px;
    
}

#printme .prow, 
#printme .prow div {
    height:30px;
}

#spdr1, #spdr2, #spdr3, #spdr5,
#tpdr1, #tpdr2, #tpdr3 {
    vertical-align: middle;    
}

#pbottom {
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #bb3131;
    margin-top:2px;
}


#Print {
    background-image: url('../images/download.webp');
    background-repeat: no-repeat;
    background-size: contain;
}

div[id^='self_'].reportsetbutton {
    width:calc(100% - 80px);
    display:inline-block;
}

input[id^='delself_'],
input[id^='editself_'] {
    display: inline-block;
    width: 30px;
    height: 37px;
    vertical-align: top;
    background-image: url('../images/delete.webp');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-top: 5px;
}

input[id^='editself_'] {
    background-image: url('../images/edit.webp');
    margin-right:5px;
    background-size: 27px;
}

#selfrepname {
    display:none;
    height: 100%;
    background-color: rgb(212 212 212);
    position: absolute;
    left: 0px;
    right: 0px;
    z-index: 1;
}

#selfwrap {
    position: absolute;
    top: 49px;
    height: calc(100% - 200px);
    width:calc(100% - 20px);
    overflow: hidden;
    overflow-y:auto;
}
  
#selfrepname .row {
    display:block;
    text-align: center;
}
  
#selfrepname .row label {
    margin-left: 20px;
}
  
#selfrepname .row  div.col-6 label {
    margin-left: 0px;
}
  
#existselfrep {
    display:none;
}
  
#oldrepname {
    font-size: 16px;
    line-height: 45px;
    text-align: left;
    margin-left: 10px;
}
  
#selfrepname > div.row div.col-6 {
    margin: 0.5rem 2%;
    min-height: 0.125rem;
    min-width: unset;
    width: 45%;
    height: 80px;
    overflow:hidden;
}
  
#selfrepname > div:nth-child(3) > div.warn {
    font-size: 14px;
}

/*REPORTS END*/

#calendarB > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr:nth-child(1) > td > div > div > div > table > tbody > tr > td.fc-timegrid-axis.fc-scrollgrid-shrink > div:hover {
    cursor:pointer;
    background-color: #bb3131;
    color:#FFF;
}

#calendarB > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr:nth-child(1) > td > div > div > div > table > tbody > tr > td.fc-day.fc-day-thu.fc-day-today.fc-daygrid-day > div {
    height:61px;
    overflow-y:auto;
}

#tocreateevent > div:nth-child(3) div.col-4 label {
    text-align: center;
}

.fc-timegrid-event .fc-event-time {
    line-height:18px;
}

.fc-v-event .fc-event-title-container {
    line-height:18px;
}

.fc-event-title.fc-sticky {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


@media only screen and (max-width: 1705px) {

    #tableleft {
        height:calc(100% - 10px);
    }
}

@media only screen and (max-width: 900px) 
and (orientation: landscape) {

    #columnscon
    /* , #sortscon  */
    {
        top: 486px;
    }

}

@media only screen and (max-width: 860px) {

    /* set parent relative */
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
        position:relative;
    }

    /* //triggerbuttons for menus */
    #menlefttrigger,#menrighttrigger {
        display:block;
        width:100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }

    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(1)
        {  
            width: 100%;
            text-align: center;
            margin-top: 55px;  
        }

    /* calender left and right menu group */
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2),
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(3) {
        display:block;
        width:33vw;
        position:absolute;
        height:40px;
        overflow:hidden;
        cursor:pointer;
    }

    /*left group*/
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2) {
        top:0px;
        left:0px;
        z-index: 3;

    }
    /*right group*/
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(3) {
        top:0px;
        right:0px;
        z-index: 3;
    }
   
    /* calender right menu group */
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(3) > div,
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(3) > div > button {
        display:block;
        margin:0;
        width:100%;
    }

    /* calender left menu group */
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2) > div,
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2) > button.fc-today-button.fc-button.fc-button-primary,
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2) > button.fc-jumpButton-button.fc-button.fc-button-primary {
        margin:0;
        width:100%;
    }

    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2) > div.fc-button-group {
        display:block;
    }

    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2) {
        background-color: white;
    }

    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2) > div.fc-button-group > button {
        width:50%;
    }

    #calfilt {
        width: 100%;
        margin-left: 0px;
    }

    #reportwrap {
        height: calc(100vh - 190px);
    }

}

@media only screen and (min-width: 801px) 
and (max-width: 840px) {
    
    #groupoccupants > div.grouppaneltop,
    #groupmalelist > div.grouppaneltop,
    #groupfemalelist > div.grouppaneltop
    {
        height:85px;
    }

    #groupoccupants > div.grouppaneltop input,
    #groupmalelist > div.grouppaneltop input,
    #groupfemalelist > div.grouppaneltop input
    {
        top: 40px;
    }

    #groupoccupants,
    #groupmalelist,
    #groupfemalelist
    {
        padding-bottom: 45px;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 82%;
        display: block;
    }

}

/*@#@(*&#(*&#*/
@media only screen and (min-width: 719px) 
and (max-width: 801px) {

    #grouplist {
        height: calc(37vh - 3px);
    }

    #groupoccupants {
        height: calc(77vh + 6px);
    }

    #groupmalelist, #groupfemalelist {
        height: calc(38vh);
    }
    
    #breedservicewrap > div.col-3 {
        width:96%; 
    }
    
    #breedservicewrap > div.col-3 > div.col-12 {
        width:96%; 
    }
    
    #breedservicewrap > div.col-4 {
        width:96%;  
    }

    #breedservicewrap > div:nth-child(3).col-5 {
        width:96%; 
    } 
    
    #pagewrap > div.homecontainer > div:nth-child(2) > div.col-8,
    #pagewrap > div.homecontainer > div:nth-child(2) > div.col-4, 
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8,
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-4 {
        width:96%;    
    }

    #calwrap {
        height: 45vh;
    }

    #reportpan > div.hpsn, 
    #scalepan > div.hpsn, 
    #QRpan > div.hpsn,
    #weatherpan > .city-temp {
        top: 50px;
    }

    #weatherpan .city-temp {
        font-size: 40px;
        top: 24px;
    }

    #TAwrap {
        margin-bottom:0px;
        background-color: #fff;
        height: 135px;
    }

    #TAmain {
        margin-top: 13px;
        height: 431px;
    }

    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div .col-3 {
        width: 23.45%;
    }

    #facebwrap {
        position:relative;
    }

    .flip, #facebwrap {
        position:relative;
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
    }

    #statswrap #hcontainer {
        width:100%;
        height: calc(100% - 75px);
    }

    #baserowwrapback {
        display:none;
    }

    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div.col-12 {
        margin:0px;
        width:100%;
    }

    #baserowwrap {
        height: fit-content;
        width: 96.2%;
    }

    .fb_iframe_widget_fluid {
        display:inline-block !important;
    }

    #repwrapcover {
        height: 100%;
        padding-bottom: 5px;
    }

    #inmedia {
        height:10px;
    }

    #inmedia div#skyscraper {
        display:none;
    }

    #repwrap {
        height:96%;
    }

    #lstwrap > div.r1col {
        display:none;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 82%;
        display: block;
    }
    
}

@media only screen and (max-width: 810px) 
and (orientation: landscape) {

    #holderutab div.holderdiv {
        width: calc((100% - 100px) / 3);/*split by 3*/
    }

    #reportmenu {
        width:100%;
    }

    #selfwrap > div {
        display:inline-block;
        min-width: 46%;
        border-radius: 5px;
        padding: 5px;
        margin: 5px;
    }

}

@media only screen and (max-width: 810px) 
and (orientation: portrait) {

    #activepan > div.hpstr, #faultspan > div.hpstr {
        padding: 0px;
        font-size: 16px;
    }

    #inputwrap {
        min-width:253px;
    }

    /*weatherman*/

    #weathercon {
        min-width: 300px;
        height: 80vh;
        max-height:600px;
    }

    #ltst0 > #daywrap {
        width:350px;
    }

    #wd0 {
        height:100%;
    }

    #hslideinner {
        height:75px;
    }

    .holderdiv {
        width:calc(50% - 32px);
    }
}

@media only screen and (max-width: 780px) {

    #hslideinner {
        width:100%;
        height:60px;
    }

    #daywrap > div:nth-child(3),
    #daywrap > div:nth-child(4) {
        width: 130px;
    }

    #tasearch {
        width:330px;
    }

     #rmis {
        top: unset;
        bottom: 8px;
        right: 20px;
        height: 35px;
        border: none;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 82%;
        display: block;
    }

}

@media only screen and (max-width: 780px) 
and (orientation: landscape) {

    #holderutab div.holderdiv {
        width: calc((100% - 100px) / 3);/*split by 4*/
    }
    
    #ltst0 > #daywrap {
        width:430px;
    }

    .logocontainer {
        display:inline-block;
        width:49%;
        vertical-align: top;
        background-position: center;
    }

    #soswrap {
        display:none;
    }

    .inputcontainer {
        width:70vw;
    }

    .floatmore {
        right: 17px;
        z-index: 3;
        width: 50px;
    }

    #birthtable {
        padding-left:2px;
    }

    #utbirthhead ,#conleft {
        width: calc(100% - 55px);
    }

    #utbirthadd ,#conright {
        width:55px;
    }

    #utbodywrap {
        height:47vh
    }

    .floatmore div input {
        width:100%;
        height: 40px;
        background-position: center;
    }

    .floatmore > div {
        height:40px;
    }

    #rowadd {
        padding-left: 0px;
        height: 40px;
        width: 50px;
        background-position: center;
        margin:0px;
    }

    #conright > div.floatmore div {
        padding:0px;
    }

    #hslideinner {
        height:60px;
    }
 
}

@media only screen and (max-width: 719px) 
and (orientation: portrait)  {
    
   #hslideinner {
        height:60px;
    }

    .hpanels {
        /* width: 49%; */
        display: inline-block;
        vertical-align: top;;
    }

    /* #syncpan, #faultspan {
        margin-bottom:0px;
    } */

    #calendar > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(3) > button {
        display:none;
    }

    .dashbutton {
        width: 100%;
        margin: 5px 0px 5px 0px;
        box-sizing: border-box;
    }

    .row > .smp {
       width:100%;
       /* margin: 0.5rem 0%; */
    }

    .row > div.smp:first-of-type {
        margin-top: 1.2rem;
    }

    .hpanelt > .hpsn {
        height: 50px;
        line-height: 50px;
        font-size: 35px;
    }

    #dashwrap {
        height:auto;
    }

    #breeddata {
        height:calc(100% + 10px);
    }

    #pagewrap > div > div:nth-child(2) > div.col-8 > div.col-8 {
        margin: 0.5rem 0%;
        width:100%;
    }
    
    #pagewrap > div > div:nth-child(2) > div.col-8 > div.col-4 {
        width: 100%;
        margin-left: 0px;
        margin-bottom:0px;
    }

    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div > div.hpanelr {
        height: 120px;
        margin-bottom:0px;
    }

    #pagewrap > div.homecontainer > div:nth-child(2) > div.col-8 {
        height:fit-content;
    }

    /* #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(1),  */
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div > div {
        margin-left: 0px;
        width:100%;
    }

    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(3),
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(6) {
    margin-right:0px;
    width: 100%;
    }

    .hpsn {
        font-size: 33px;
        margin: 12px 10px 0 10px;
    }

    #reportpan > div.hpsn, 
    #scalepan > div.hpsn,
    #QRpan > div.hpsn
    {
        top: 35px;
        height: 54%;
    }

    #weatherpan > .city-temp {
        top: 22px;
        font-size: 60px;
    }

    .hpsfr  {
        font-size: 16px;
        /* line-height: 40px; */
    }

    .hpssr {
        font-size: 16px;
        line-height: 40px;
    }

    .hpstr {
        font-size: 16px;
    }

    .loader, .loader::after {
        /* vertical-align: sub;
        margin-top:22px; */
        width: 45px;
        height: 45px;
    }

    #tasearchwrp > div.loader {
        margin-top:0px;
    }

    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div .col-3 {
        margin: 0.5rem 1%;
        width: 100%;
    }

    #cirwrap {
        height: 300px;
        width: 300px;
        /* top: 39%; */
        top:2%;
        /* left: 50%; */
        left:(calc(50% - 124px));
        /* transform: translate(-50%,-50%); */
    }

    .circ {
        top: 35px;
        left: 35px;
        height: 220px;
        width: 220px;
    }

    #cirinfo {
        /* width: calc(100% - 20px); */
        display: none;
        margin:0px; 
        padding: 0px;
        text-align: center;
        position: absolute;
        top: unset;
        right: unset;
        /* left: 10px; */
        /* bottom: 50px; */
        bottom:0px;
    }

    #cirdesc {
        display:block;
    }

    #activepan > div.hpstr, #faultspan > div.hpstr {
        font-size:20px;
    }

    #tosgnewcon {
        width: 90vw;
        min-width: 260px;
        overflow-y: auto;
        height: 70vh;
    }

    #weatherpan > div.city-ico-place {
        right:50%;
        bottom:50%;
        transform: translate(50%, 50%)
    }

    #capbirthsave, #capbirthfinal, #capbirthcan {
        width: calc(100% / 3.2);
        text-align: center;
    }

    #inputwrap {
        display:block;
        width: 80%;
        min-width:300px;
    }

    .rotmobwrap {
        display:none;
    }

    #typedlogo {
        display:none;
    }

    .bannerpanel {
        height:220px;
    }

    .typedcontainer {
        height:220px;
        width:100%;
    }

    #squareround.squareround {
        display:none;
    }

    .city-temp {
        font-size: 30px;
        top: 10px;
    }

    #conright > div.floatmore div {
        padding:0px;
    }

    .floatmore {
        right: 17px;
        z-index: 3;
        width: 50px;
    }

    #birthtable {
        padding-left:2px;
    }

    #utbirthhead ,#conleft {
        width: calc(100% - 55px);
    }

    #utbirthadd ,#conright {
        width:55px;
    }

    .floatmore div input {
        width:100%;
        height: 40px;
        background-position: center;
    }

    .floatmore > div {
        height:40px;
    }

    #rowadd {
        padding-left: 0px;
        height: 40px;
        width: 50px;
        background-position: center;
        margin:0px;
    }

   .flip, #facebwrap {
    position:relative;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
   }

   #dashcentercol {
    height:290px;
   }

   #hcontainer {
    width:100%;
    height: 87%;
   }

   #dashcentercolback, #hcontainerback,#baserowwrapback {
    display:none;
   }

   #baserowwrap {
    height:fit-content;
   }

   #baserow {
    overflow:hidden;
    overflow-x:auto;
   }

   #grouper {
    width:825px;
    height: 126px;
   }

   #baserow .col-3,
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div#baserow > div .col-3,
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div#baserow > div > div.col-3 > div.hpanelr,
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div#baserow > div > div:nth-child(3)
    {
        margin-left: 0px;
        display:inline-block;
        width:200px;
        margin-bottom: 0px;
    }
   
    #repwrapcover {
        height: 100%;
        padding-bottom: 5px;
    }

   #inmedia {
    height: 10px;
   }

   #inmedia div#skyscraper {
    display:none;
   }

   #repwrap {
    height:96%;
   }

   #calwrap {
    height: 400px;
   }
   
   #daywrap > div:nth-child(1) {
    width: 300px;
   }

   #daywrap > div:nth-child(2) {
    width: 240px;
   }

   #daywrap > div:nth-child(5), 
   #daywrap > div:nth-child(6) {
    width: fit-content;
    }

    #pardash > row > div,
    #pardash > row > div.col-2 {
        width: 100%;
    }

    #lstwrap > div.r1col {
        display:none;
    }

    #tasearch {
        width: 250px;
    }

    #searchmore
    {
        display:block;
    }

    #ADVbreed, 
    #ADVhandler, 
    #ADVspecie {
        width: 250px;
    }

    #preAdv {
        margin-top: 20px;
    }

    #mydetail {
        margin: 8px;
    }

    #prebreedTA #ko {
        margin-top: 0px;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 82%;
        display: block;
    }


}

@media only screen and (max-width: 719px) 
and (orientation: landscape) {

/*login ask to rotate upright*/

    .logocontainer {
        display:inline-block;
        width:49%;
        background-position: center;
    }

    #soswrap {
        display:none;
    }

    .inputcontainer {
        width:70vw;
    }

    #inputwrap {
      display:block;
    } 

    #inputwrap {
        display:none;
    }

    .rotmobwrap {
        position: relative;
        display: inline-block;
        width: 50%;
        vertical-align: top;
        height: 200px;
    } 

    #breedfaultswrap
    /* , #breeduploadwrap, #breedcyclewrap, #breedcalvingwrap, #breedweaningwrap, #breedgrowthwrap  */
    {
        height: calc(100%);
    }

    #fcontainer, #ucontainer, #wcontainer {
        height: calc(100% - 55px);
    }

    #holderutab {
        height: calc(100% - 50px);
    }

    #fcontainer, #ucontainer, #wcontainer {
        height: calc(100% + 15px);
    }

    .holderdiv {
        text-align: center;
        width:94%
    }

    .holimg {
        top:20px;
    }

    .holinf {
        width: 100%;
        height: 85px;
        font-size: 20px;
        line-height:85px;
    }

    .holderdiv  .holcounts {
        right: 10px;
        top: 15px;
    }

    .holinfr .top {
        font-size: 2.5vw;
        line-height: 22px;
        text-align: center;
    }
    
    .holinfr .bottom {
        font-size: 5.5vw;
        line-height: 55px;
        text-align: center;
    }

    .floatmore {
        right: 17px;
        z-index: 3;
        width: 50px;
    }

    #birthtable {
        padding-left:2px;
    }

    #utbirthhead ,#conleft {
        width: calc(100% - 55px);
    }

    #utbirthadd ,#conright {
        width:55px;
    }

    #utbodywrap {
        height:47vh
    }

    .floatmore div input {
        width:100%;
        height: 40px;
        background-position: center;
    }

    .floatmore > div {
        height:40px;
    }

    #rowadd {
        padding-left: 0px;
        height: 40px;
        width: 50px;
        background-position: center;
        margin:0px;
    }

    #conright > div.floatmore div {
        padding:0px;
    }

    #pardash > row > div {
        width: 100%;
    }
} 

@media only screen and (max-width: 719px) and (min-width: 650px) {

    #pagewrap > div > div:nth-child(2) > div.col-8 > div.col-8.TA, 
    #pagewrap > div.homecontainer > div:nth-child(2) > div.col-8 > div.col-8.PAR, 
        #pagewrap > div > div:nth-child(2) > div.col-8 > div.col-4 {
        position:relative;
        margin-left: 0px;
        margin-right: 0px;
        width:100%
    }

    #activepan, #servicepan, 
    #syncpan, #faultspan,
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div .col-3 
    {
        height: 135px;
        width: 49.5%;
        display: inline-block;
        vertical-align: top;
        margin-left: 0px;
        margin-right: 0px;
    }

    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > #baserow > #grouper > div:nth-child(1),
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > #baserow > #grouper > div:nth-child(3) {
        margin-right:5px;
    }

    .flip, #facebwrap {
        position:relative;
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
    }

    #hcontainer {
        width:100%;
    }

    #statswrap {
        height: fit-content;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 81%;
        display: block;
    }

}

@media only screen and (max-width: 700px) {

    #daywrap > div:nth-child(1) {
       
        min-width: 200px;
    }
    
    #daywrap > div:nth-child(1),
    #daywrap > div:nth-child(2) {
        width: 40%;
    }
    
    /* #daywrap > div:nth-child(5), 
    #daywrap > div:nth-child(6) {
        width: fit-content;
    } */

    .currentday #wday, 
    .currentday #wtime, 
    .currentday #wind, 
    .currentday #wwind, 
    .currentday #feel, 
    .currentday #wfeel, 
    .currentday #humid, 
    .currentday #whumid {
        width: 39%;
    }

    .currentday #wtempmax {
        width: 40%;
    }

    #daywrap > div:nth-child(3), 
    #daywrap > div:nth-child(4), 
    #daywrap > div:nth-child(5), 
    #daywrap > div:nth-child(6) {
        width: 16.8%;
    }

    #list1.dropdown-check-list .row,
    #list2.dropdown-check-list .row {
        display: block;
    }

    #list1.dropdown-check-list .row .col-3,
    #list2.dropdown-check-list .row .col-3 {
        display: block;
        width: 100%;
        height: auto;
         min-height: unset;
    }

    #reportwrap {
        height: calc(100vh - 190px);
    }

    #repopmin {
        top: calc(50% / 2);
        height: calc(100% / 2);
    }
    
   
}

@media only screen and (max-width: 920px) 
and (orientation: landscape) {

    #reportoptions input {
        width: 28%;
        margin: 5px;
        /*hide text*/
        color: transparent; /* Hides the value text */
        text-shadow: none;  /* Hides the text shadow */
        background-position: center;
    }

    #reportmenu #reportoptions {
        height: auto;
        right: 5px;
    }

    #selfwrap {
        height: calc(100% - 55px);
        width: 100%;
    }

    /* minimize header */
  #pagewrap > div.homecontainer > div:nth-child(1) > div > div.titlepanel {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
  }

}

@media only screen and (max-width: 650px) {

    .currentday {
        height: 170px;
    }

    .currentday #wsym {
        position: absolute;
        left: calc(50% - 50px);
        display: block;
        top: 85px;
    }

    .currentday #wtempmax {
        position: absolute;
        top: 27px;
        left: calc(50% - 23px);
    }

    #daywrap > div:nth-child(1), 
    #daywrap > div:nth-child(2), 
    #daywrap > div:nth-child(3), 
    #daywrap > div:nth-child(4), 
    #daywrap > div:nth-child(5), 
    #daywrap > div:nth-child(6) {
        width:93%;
    }

    .wfit {
        margin: 10px 10px;
    }

    #daywrap > div:nth-child(2), 
    #daywrap > div:nth-child(3), 
    #daywrap > div:nth-child(4), 
    #daywrap > div:nth-child(5), 
    #daywrap > div:nth-child(6) {
        position:relative;
        height:100px;
    }

    #daywrap > div:nth-child(2) #wday, 
    #daywrap > div:nth-child(3) #wday, 
    #daywrap > div:nth-child(4) #wday, 
    #daywrap > div:nth-child(5) #wday, 
    #daywrap > div:nth-child(6) #wday {
        text-align: left;
        padding-left: 58px;
        width: fit-content;
    }

    #daywrap > div:nth-child(2) #wsym, 
    #daywrap > div:nth-child(3) #wsym, 
    #daywrap > div:nth-child(4) #wsym, 
    #daywrap > div:nth-child(5) #wsym, 
    #daywrap > div:nth-child(6) #wsym {
        margin-top: -45px;
    }

    #daywrap > div:nth-child(2) > div:nth-child(3), 
    #daywrap > div:nth-child(3) > div:nth-child(3), 
    #daywrap > div:nth-child(4) > div:nth-child(3), 
    #daywrap > div:nth-child(5) > div:nth-child(3), 
    #daywrap > div:nth-child(6) > div:nth-child(3) {
        margin-top: -80px;
        width: 110px;
        position: absolute;
        right: 30px;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 80%;
        display: block;
    }

     /*shift dash */
    #infodash {
        grid-template-rows: 275px 275px 275px 170px 170px;
    }

    .infocard1 { grid-area: 1 / 1 / 2 / 13; }
    .infocard2 { grid-area: 2 / 1 / 3 / 13; }
    .infocard3 { grid-area: 3 / 1 / 4 / 13; }
    .infocard4 { grid-area: 4 / 1 / 5 / 13; height: 170px;}
    .infocard5 { grid-area: 5 / 1 / 6 / 13; }
    .infocard6 { grid-area: 6 / 1 / 7 / 13; }
    .infocard7 { grid-area: 7 / 1 / 8 / 13; }
    .infocard8 { grid-area: 8 / 1 / 9 / 13; }
    .infocard9 { grid-area: 9 / 1 / 10 / 13; }
    
    


}

@media only screen and (max-width: 630px) 
and (orientation: portrait) {

    #ltst0 > #wsym {
        width: 110px;
        top: 0px;
        left: 10px;
    }

    #ltst0 > #wtempmax {
        font-size: 50px;
        top:20px;
        left: 120px;
    } 

    #ltst0 > #wtempmax sup {
        font-size: 16px;
    }

     #ltst0 > #wday {
        right:30px;
        font-size: 18px;
    }

    #ltst0 > #whumid, #ltst0 > #wwind {
        left:200px;
    }

    #ltst0 > #wdate {
        right: 30px;
        font-size: 16px;
        top: 45px;
    } 

    #ltst0 > #wdescription {
        top:65px;
        right:30px;
    }

   
    #aloginnamewrap, #aloginpasswrap {
        width: 81%;
        display: block;
    }
    
}

@media only screen and (max-width: 616px) {

    /* .prestats {
        left: 10px;
    } */
    #overview .preimg {
        display:none;
    }

    #overview .prestats {
        left: 10px;   
    }

    .holderdiv {
        width:calc(50% - 32px);
    }

     #aloginnamewrap, #aloginpasswrap {
        width: 81%;
        display: block;
    }
}

@media only screen and (max-width: 580px)  {

    #hslideinner {
        overflow: hidden;
        position: absolute;
        /* margin-left: 7px; */
        width: calc(100% - 20px);
        height: 50px;
        z-index:3;
    }

    #hslide .spanelt {
        width: 100%;
        /* background-color: #fff; */
        margin:0px;
    }

    #hslide .spanelt.act {
        background-color: var(--fc-button-bg-color);
        border-color: var(--fc-button-border-color);
        color: var(--fc-button-text-color);
    }

    #hslide, #uslide, #fslide, #cslide, #sslide, #pslide, #cslide {
        height:50px;
    }

    #hslidewrap, #fsliderwrap, #usliderwrap, #csliderwrap, #ssliderwrap, #psliderwrap, #csliderwrap {
        overflow:visible;
    }

    #prebreed {
        height:120px;
        display:block;
        margin: 0.1rem 2%;
        margin-bottom: 7px;
    }

    #prebreed #hslidewrap {
        height: 120px;
    }

    #opts {
        margin: 0px;
        text-align: left;
        position: sticky;
        top: 0px;
        /* z-index: 99; */
        height: 42px;
        margin: 0.1rem 2%;
        width: 96%;
    }

    #taparlist {
        width: 90%;
        left: 18px;
    }

    #taparlist .tappfiltext {
        width: calc(100% - 120px);
    }

    .loginleft {
        right: 0px;
    }

    .loginright {
        display:none;
    }

    #hslidewrap #breedsel {
        display:none;
    }

    #fslideopen, #hslideopen, #uslideopen, #cslideopen, #sslideopen, #pslideopen, #cslideopen {
        display:block;
        height:50px;
        width:100%;
        position: absolute;
        bottom: 0px;
        background-image: url('../images/godown.webp');
        background-repeat: no-repeat;
        background-position: 95% center;
        transition: height 0.2s linear;
        background-size: 20px;
        padding-left:10px;
        box-sizing: border-box;
        line-height:50px;
        background-color: rgba(255,255,255,1);
        border-radius: 5px;
    }

    /* #overview {
        display:none
    } */

    #predash #overview .hpanelt {
        width: calc(100% - 8px);
    }

    /* shift dash
    .infocard1 { grid-area: 1 / 1 / 2 / 13; }
    .infocard3 { grid-area: 2 / 1 / 2 / 13; }
    .infocard2 { grid-area: 3 / 1 / 3 / 13; }
    /* .infocard3 { grid-area: 1 / 9 / 2 / 13; } */
    /* .infocard4 { grid-area: 2 / 9 / 3 / 13; } */
    /* .infocard5 { grid-area: 4 / 1 / 4 / 7; }
    .infocard6 { grid-area: 4 / 7 / 4 / 13; } */ */

    #rmis {
        top: unset;
        bottom: 8px;
        right: 20px;
        height: 35px;
        border: none;
    }

    /*reset margins*/
    #predash #d1, 
    #predash #d2, 
    #predash #d3, 
    #predash #d4, 
    #predash #d5, 
    #predash #d6, 
    #predash #d7, 
    #predash #d8 {
        margin: 0 6px 10px 6px;
    }

    #overview .prestats {
        left: 10px;
    }

    #infodash::before {
        display:none;
    }

     #aloginnamewrap, #aloginpasswrap {
        width: 81%;
        display: block;
    }
}

@media only screen and (max-width: 520px) 
and (orientation: portrait) {

    #ltst0 > #wday {
        top: 90px;
        right: unset;
        left: 50%;
        transform: translate(-100%);
        font-size: 18px;
    }

    #ltst0 > #wdate {
        top: 90px;
        right: unset;
        left: 50%;
        transform: translate(20%);
        font-size: 18px;
    }

    #ltst0 > #wwind {
        left:unset;
        right:30px;
        top:45px;
        font-size: 16px;
    }

    #ltst0 > #whumid {
        left:unset;
        right:30px;
        top:60px;
        font-size: 16px;
    }

    #ltst0 > #wtempmax {
        font-size: 60px;
        top:14px;
    }

    #ltst0 > #wdescription {
        top:27px;
    }

    #ltst0 > #tempwrap {
        top:130px;
    }

    #wd0 {
        background-size: cover;
    }

    #tasearch {
        width: calc(100% - 85px);
    }

    #rmis {
        top: unset;
        bottom: 8px;
        right: 20px;
        height: 35px;
        border: none;
    }

    #predash #d1, 
    #predash #d3, #predash #d5, #predash #d7

    #predash #overview .hpanelt {
        width: calc(100% - 8px);
    }

    #overviewwrap, #actionwrap {
        height:87%;
        overflow-y:auto;
    }

    #findinnerwrap {
        display: block;
        margin-top: 40px;
        height: calc(83vh - 83px);
    }

    #findinnerwrap {
        display:block;
        margin-top: 40px;
        height: calc(83vh - 83px);
        overflow-x: hidden;
    }
    #lstwrap {
        text-align: left;
    }

    div[id^=trd] .lcol {
        font-size:14px;
        width:40%;
    } 

    div[id^=trd] .mcol {
        font-size:14px;
        width:42%;
    }  

    div[id^=trd] .rcol {
        font-size:14px;
        width:16%;
        min-width: 45px;
    }

    #trd4, .slideme {
        height: 300px;
    }

    #deprompt {
        bottom:0px;
        right:0px;
        left:0px;
        opacity: 1;
        color: #000000;
        background-color: rgba(129, 125, 125, 0.3);
        height:40px;
        padding:0px;
        border-radius: 0px;
        line-height: 40px;
    }

    #trd4 > div.dashpaneltop {
        display:block;
    }

    #trd2 #nrg {
        left:5px;
    }
    
    #trd3 [id^=rgn] {
        left:2px;
    }

    div#trd6 .lcol {
        padding-right: 0px;
    }

    div#trd6 .mcol {
        padding-right: 0px;
        text-align: center;
    }

    div#trd6 .rcol { 
        width: 39%;
    }

    #findwrap {
        height: calc(100% - 64px);
    }

    #dnswrap div.lcol,
    #dnswrap div.mcol,
    #dnswrap div.rcol {
        width: 30%;
    }

    #toanimalcon {
        transition:none;
        transform: translate(-50%, -58%);
    }

    .twint {
        width:100%;
    }

    #descendantscon {
        margin-left:0px;
        height: 80vh;
    }

    #ancestorcon, #descendantscon, 
    #genomiccon, #timelinecon {
        margin-left: 0px;
        width: 95vw;
        height: 81vh;
        transition:none;
    }

    #choicetitle {
        text-align: left;
        padding: 10px;
    }

    #ancestorCan, #descendantCan, 
    #genomicCan, #timelineCan, #phenotypeCan {
        bottom: 7px;
        right: 7px;
    }

    #timelinewrap {
        display:none;
    }

    #timelinecontent {
        min-width:unset;
        width: 86vw;
        height: 82%;
    }

    #timelinedata {
        height: 82%;
    }

    #ancestorcon {
        top: 49%;
    }

    #treewrap {
        min-height:80%;
    }

    #treelevewrap {
        left: 2px;
        bottom: 2px;
        top: unset;
    }

    #treewrap, #dtreewrap {
        min-height: 260px;
    }

    #lokewrap {
        height:auto;
    }

    .lokeinfo div#c1,
    .lokeinfo div#c2,
    .lokeinfo div#c3,
    .lokeinfo div#c4,
    .lokeinfo div#c5
    {
        width:100%;
    }

    #ADVbreed,
    #ADVhandler {
        width: 95%;
    }

    #aloginnamewrap, #aloginpasswrap {
        width: 81%;
        display: block;
    }
}

@media only screen and (max-width: 500px)  {

    .loginleft {
        right: 0px;
    }

    .loginright {
        display:none;
    }

    .holderdiv {
        width: calc(100% - 30px);
    }

    #daywrap > div:nth-child(2) #wday, 
    #daywrap > div:nth-child(3) #wday, 
    #daywrap > div:nth-child(4) #wday, 
    #daywrap > div:nth-child(5) #wday, 
    #daywrap > div:nth-child(6) #wday {
        
        padding-left:30px;
    }

    #daywrap > div:nth-child(2) #wsym, 
    #daywrap > div:nth-child(3) #wsym, 
    #daywrap > div:nth-child(4) #wsym, 
    #daywrap > div:nth-child(5) #wsym, 
    #daywrap > div:nth-child(6) #wsym {
        margin-top: -45px;
    }

    #daywrap > div:nth-child(2) > div:nth-child(3), 
    #daywrap > div:nth-child(3) > div:nth-child(3), 
    #daywrap > div:nth-child(4) > div:nth-child(3), 
    #daywrap > div:nth-child(5) > div:nth-child(3), 
    #daywrap > div:nth-child(6) > div:nth-child(3) {
        margin-top: -100px;
        width: 110px;
        position: absolute;
        right: -36px;
    }

    #reportmenu {
        width:100%;
    }
   
}

@media only screen and (max-width: 400px) 
and (orientation: portrait) {

    #ltst0 > #wsym {
        width: 90px;
        top: 4px;
        left: 10px;
    }

    #ltst0 > #wtempmax {
        font-size: 50px;
        left: 100px;
    }

    #ltst0 > #wwind,
    #ltst0 > #whumid,
    #ltst0 > #wdescription
    {
        right:20px;
    }

    #daywrap .ltstinner > #wsym {
        width: 80px;
    }

    #daywrap .ltstinner #wtempmax, 
    #daywrap .ltstinner #wtempmin {
        font-size: 16px;
        width:40px;
    }

    #daywrap .ltstinner {
        width:90px;
    }

    #pagewrap > div > div:nth-child(1) > div > div#wd0 {
        text-align: center;
        padding:0px;
    }

    .templatediv {
        width:90%;
    }

    #findinnerwrap {
        display:block;
        margin-top: 40px;
        /* height: calc(83vh - 83px); */
        height: calc(83vh - 140px);

    }

    .liststretch {
        height: 60vh;
    }

    div[id^=trd] .lcol {
        font-size:14px;
        width:40%;
    } 

    div[id^=trd] .mcol {
        font-size:14px;
        width:42%;
    }  

    div[id^=trd] .rcol {
        font-size:14px;
        width:16%;
        min-width: 45px;
        text-align: center;
    }

    #trd4, .slideme {
        height: 300px;
    }

    #deprompt {
        bottom:0px;
        right:0px;
        left:0px;
        opacity: 1;
        color: #000000;
        background-color: rgba(129, 125, 125, 0.3);
        height:40px;
        padding:0px;
        border-radius: 0px;
        line-height: 40px;
    }

    #trd4 > div.dashpaneltop {
        display:block;
    }

    /* .nrg.mrgn, 
    .nrg.frgn,
    #nrg.mrgn, 
    #nrg.frgn,
    #nrg.own,
    #nrg.keep,
    [id^=rgn].mrgn,
    [id^=rgn].mrgn,
    [id^=rgn].frgn
     {
        height: 27px;
        width: 100%;
        border-radius: 0;
        margin-top: -5px;
        margin-left: -5px;
        background-image:none;
    } */

    #rgn0.mrgn {
        left:2px;
    }

    div#trd6 .lcol {
        padding-right: 0px;
    }

    div#trd6 .mcol {
        padding-right: 0px;
        text-align: center;
    }

    div#trd6 .rcol { 
        width: 39%;
    }

    #findwrap {
        height: calc(100% - 64px);
    }

    #dnswrap div.lcol,
    #dnswrap div.mcol,
    #dnswrap div.rcol {
        width: 30%;
    }

    #toanimalcon {
        transition:none;
    }

    .twint {
        width:100%;
    }

    #ancestorcon, #descendantscon, 
    #genomiccon, #timelinecon {
        margin-left: 0px;
        width: 95vw;
        height: 74vh;
        transition:none;
    }

    #descendantscon {
        height: 80%;
        top: 49%;
    }

    #choicetitle {
        text-align: left;
        padding: 10px;
    }

    #ancestorCan, #descendantCan, 
    #genomicCan, #timelineCan, #phenotypeCan {
        bottom: 7px;
        right: 7px;
    }

    #timelinewrap {
        display:none;
    }

    #timelinecontent {
        min-width:unset;
        width: 86vw;
        height: 80%;
    }

    #timelinedata {
        height: 75%;
    }

    #ancestorcon {
        top: 49%;
        height: 80%;
    }

    #treewrap {
        min-height:80%;
    }

    #treelevewrap {
        left: 2px;
        bottom: 2px;
        top: unset;
    }

    #treewrap, #dtreewrap {
        min-height: 260px;
    }

    #ADVbreed,
    #ADVhandler {
        width: 95%;
    }

    .inputcontainer.full {
        width: auto;
    }

    
}

@media only screen and (max-height: 400px) 
and (orientation: landscape) {
    #faultswrap {
        height:100vh;
    }

    #fcontainer > div > div.ferror {
        display:block;
        width:100%;
    }

    #flist > .fhead#colmessage {
        display:none;
    }

    #flist > div.fhead:nth-child(5) {
        display:none;
    }

    #fcontainer > div > div.ferror div.mobcol4  {
        display:inline-block;
    }

    /* #faultswrap > #breedfaultswrap > #fcontainer > div.frow > div.fname, */
    #fcontainer > div > div.fname,
    #fcontainer > div > div.fnumber,
    #fcontainer > div > div.fdob,
    #fcontainer > div > div.fsex,
    #fcontainer > div > div.fage
    {
        width: 100%;
        white-space:unset;
        overflow:unset;
        text-overflow:unset;
    }

    .frow [class^=mobcol], 
    .brow [class^=mobcol], 
    div.fnumber > pre {
        display:inline-block;
    }

    div#fcontainer .frow div {
        width:100%;
    }

    div#fcontainer div[class^="mobcol"] {
        display: inline;
    }

    #fcontainer pre {
    display: inline-block;
    }

    #toreactcon {
        width:60%;
    }

    #toreaction {
        height:90px;
    }

    .templatediv {
        width: 46%;
        margin-right: 5px;
    }

    #toanimalcon {
        height: 80vh;
        width: 85vw;
        overflow-y: auto;
        top: 57%;
        left: 55%;
        transition:none;
    }

    .twint {
        width:100%;
    }

    #findinnerwrap {
        display:block;
        margin-top: 40px;
        height: calc(80vh - 70px);
    }

    #pagewrap > div.homecontainer > div:nth-child(2) > div.col-12 {
        margin-bottom:0px;
    }

    #descendantscon {
        margin-left:0px;
        height: 80vh;
    }

    #ancestorcon, #descendantscon, 
    #genomiccon, #timelinecon {
        margin-left: 35px;
        width: 88vw;
        top: 215px;
        transition:none;
    }

    #ancestorCan, #descendantCan, 
    #genomicCan, #timelineCan, #phenotypeCan {
        bottom: 7px;
        right: 7px;
    }

    #timelinewrap {
        display:none;
    }

    #timelinecon {
        height: 80vh;
    }

    #timelinecontent {
        min-width:unset;
        width: 86vw;
        height: 74%;
        margin-top: 0px;
    }

    #timelinecontent .dashpaneltop {
        display:none;
    }

    #timelinedata {
        height: 67%;
    }

    #ancestorcon {
        top: 57%;
        height: 81%;    
    }


    #treelevewrap {
        left: 2px;
        bottom: 2px;
        top: unset;
    }
}

@media only screen and (max-width: 375px) 
and (orientation: portrait) 
{
    .logocontainer {
        background-position: center 65%;
        background-size: 35%;
    }

    #reportmenu {
        width:100%;
    }

    #reportmenu #reportoptions {
        right: 5px;
        height:auto;
    }

    #repwrapcover {
        height:100%;
        padding-bottom:5px;
    }

    .menubutton .mbtext  {
        text-align: center;
        right:unset;
    }

    #reportoptions input {
        width: 30%;
        margin: 5px;
    }

    #cirwrap {
        height: 85vw;
        width: 80vw;
        top: 40px;
        left: calc(50% - 141px);
       transform: translate(0%,0%);
    }

    .circ {
        top: 10vw;
        left: 7vw;
        height: 227px;
        width: 227px;
        display:none;
        visibility:hidden;
        animation: none;
    }

    #cirinfo {
        height:190px;
    }

    #TAmain {
        height:450px;
    }

    #cirinfo > div.hpbrd {
        position:relative;
        left:0px;
        top:0px;
    }

    #cirinfo .hpsn {
        top: 35px;
        line-height: 50px;
        font-size: 50px;
    }

    #hslidewrap, #fsliderwrap, #usliderwrap, #csliderwrap, #ssliderwrap, #psliderwrap, #csliderwrap {
        height: 70px;
    }

    #hcontainer {
       height:89%;
    }

    #baserow {
        overflow:hidden;
        overflow-x:auto;
    }

    #grouper {
        width:825px;
        height: 126px;
    }

    #baserow .col-3,
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div#baserow > div .col-3,
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div#baserow > div > div.col-3 > div.hpanelr,
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div#baserow > div > div:nth-child(3)
    {
        margin-left: 0px;
        display:inline-block;
        width:200px;
        margin-bottom: 0px;
    }

    #pagewrap > div.homecontainer #baserow > div > div {
        margin-bottom: 0px;
    }

    #tosgnewcon > div:nth-child(2) > div:nth-child(1) {
        text-align: center;
    }

    .brow .fdoba, .brow .fserviceda, .brow .fchildren {
        width:100%;
    }

    #newsgsave, #newsgcan {
        width: 95%;
    }

    #TAwrap label {
        font-size: 4vw;
    }

    .brow div {
        font-size: 18px;
        vertical-align: bottom;
    }

    #tasearch {
        font-size: 4vw;
    }

    #taparlist .row {
        font-size: 4vw;
    }

    .holderdiv {
        width:90%;
        height:130px;
    }

    .holimg {
        top:5px;
        left:10px;
        width:80px;
        height:60px;
    }

    .holinfr {
        font-size: 8vw;
    }

    .holinfr .top {
        font-size: 15px;
        line-height: 5px;
        text-align: center;
        color:#000000;
    }
    
    .holinfr .bottom {
        font-size: 6.5vw;
        line-height: 36px;
        text-align: center;
    }

    .holinf {
        height:50px;
        line-height: 40px;
        font-size: 20px;
    }

    #statswrap {
        height:640px;
    }

    .cirmoreinf {
        bottom: 0px;
    }

    .hpstr1, .hpstr2 {
        width:100%;
        position:relative;
        box-sizing: border-box;
    }

    #cirinfo > div.hpstr {
        margin-bottom:10px;
    }

    #tocreateevent {
        overflow-x:hidden;
        overflow-y:auto;
        height:77vh;
    }

    #evtoptwrap {
        height:90%;
    }

    #tocreateevent > div.warn {
        word-wrap:break-word;
        width: 76vw;
        line-height: 22px;
    }
    
    #evtoptcube #evresc, #evtoptcube #evrept, #evtoptcube #evremv {
        height:465px;
    }

    #weatherpan > div.city-temp {
        font-size: 50px;
    }

    #weatherpan > div.city-temp > sup {
        font-size: 20px;
    }

    #ffilterwrap > div.ftfilter
    {
        width:fit-content;
        padding:0 5px;
    }

    #toaction {
        position:absolute;
        left:50px;
        width:fit-content;
        padding:0 5px;
    }

    #sorta.fsortb {
        width:fit-content;
        padding:0 5px;
    }

    .bsortb{
        width:120px;
    }

    #fsort.bsortdrop,
    #fsort.fsortdrop {
        width:135px;
        text-align: -webkit-right;
    }

    #dateadj {
        position: absolute;
        left: 50px;
        top: 2px;
        margin: 0px;
        height: 42px;
        background-image: none;
        /* padding-left: 0; */
        text-align: left;
        width: fit-content;
    }

    #resan {
        position: absolute;
        left: 101px;
        top: 2px;
        margin: 0px;
        height: 42px;
        background-image: none;
        /* padding-left: 0; */
        text-align: left;
        width: fit-content;
    }

    #cansearchwrap {
        display:none;
    }

    #combotable {
        display: block;
        height: 100%;
        overflow-y: scroll;
    }

    #fcontainer, #wcontainer {
        /* overflow-y: auto; */
        height: calc(91%);
    }

    #breeduploadwrap #ucontainer {
        height: 100%;
        overflow-y:auto;
    }

    #combosave .wtst {
        font-size:16px;
        line-height: 24px;
    }

    #combosave > div.row > div.col-6 {
        margin: 0px;
    }

    #combosave > div.row > div.col-6 label {
        font-size: 16px;
        line-height: 26px;
    }

    #combosave > div:nth-child(4),
    #combosave > div:nth-child(5) {
        font-size: 16px;
    }

    #breedfaultswrap
    {
        height: calc(100%);
    }

    #fcontainer > div:nth-child(1) > div.fdob {
        width:100%;
    }

    #fcontainer > div > div.ferror > div.mobcol4, 
    #wcontainer > div > div.ferror > div.mobcol4 {
        display: inline;
    }

    #activepan > div.hpstr, 
    #faultspan > div.hpstr,
    #syncpan > div.hpstr {
        font-size: 16px;
        margin-top: 10px;
    }

    .holderdiv .holcounts {
        top: 15px;
        right:5px;
    }

    #breedwrap, #faultswrap,  #mapwrap, #servicewrap, #setwrap {
        height: 80vh;
    }

    #uploadwrap
    {
        height: 100%;
    }

    #cyclewrap {
        height: 87vh;
    }

    div.rowbottom input {
        min-width:100px;
        margin:0px;
    }

    #olheader div.lstdot, 
    [id$='offlinelist'] > div div.lstdot,
    [id$='offlinelist'] > div div.entdot {
        display:none;
    }

    #olheader div#hcnt, [id$='offlinelist'] > div div#cnt {
        width:fit-content;
    }

    #olheader div#hname,
    [id$='offlinelist'] > div div#name {
        width:120px;
    }

    #olheader div#hdt, 
    [id$='offlinelist'] > div div#dt {
        display:none;
    }

    [id$='offlinelist'] > div input[id^='bprev'], 
    [id$='offlinelist'] > div input[id^='bsync'], 
    [id$='offlinelist'] > div input[id^='bfinal'], 
    [id$='offlinelist'] > div input[id^='brem'] {
        width: 50px;
    }

    .cirmoreinf div {
        padding:0px;
    }

    #breedcyclewrap, 
    #breedweaningwrap,
    #breedgrowthwrap,
    #breeduploadwrap {
        height:86%;
    }

    #fcontainer, #wcontainer {
        height: calc(100% - 50px);
    }

    #fcontainer > div > div.fname,
    #fcontainer > div > div.fnumber,
    #fcontainer > div > div.fdob,
    #fcontainer > div > div.fsex,
    #fcontainer > div > div.fage,

    #wcontainer > div > div.fnumber,
    #wcontainer > div > div.fdob,
    #wcontainer > div > div.fsex,
    #wcontainer > div > div.fage,
    #wcontainer > div > div.ftest,
    #wcontainer > div > div.fweight,
    #wcontainer > div > div.fweightadj
    {
        width: 100%;
        white-space:unset;
        overflow:unset;
        text-overflow:unset;
    }

    #systemcon {
        width:90vw;
        height:80vh;
    }

    #sysinfowrap {
        height: 85%;
    }

    #tblrowcon > span #deffn {
        vertical-align: text-bottom;
    }

    #tblrowcon > span #ynum {
        height:31px;
    }

    #colorlegend {
        display:none;
    }

    #capbirthsave, #capbirthfinal, #capbirthcan {
        min-width: 100px;
        margin: 0px;
        width: fit-content;
    }

    #holderutab {
        height:100%;
    }

    .bwrap {
        width:100%;
        display: flex;
        justify-content: space-evenly;
    }

    .rowbottom {
        margin-top: 5px;
    }

    #dashcentercol #QRpan {
        margin-right:2px;
    }

    #dashcentercol #reportpan {
        margin-left:2px;
    }

    #carosellwrap {
        height:80vh;
    }

    .mcarslide {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .wbrow {
        line-height: 25px;;
    }
    
    .wbrow .fnumber,
    .wbrow .fdob,
    .wbrow .fweighdate,
    .wbrow .fweighage,
    .wbrow .checkwrap,
    .wbrow .fcalfweight, 
    .wbrow .factualweight, 
    .wbrow .fcowweight, 
    .wbrow .fcowheight, 
    .wbrow .fcowlength, 
    .wbrow .fscrotum,
    #utweanbody div.wrap,
    #ut12monbody div.wrap,
    #ut18monbody div.wrap,
    #utcombobody div.wrap,

    #utweanbody div.nwrap,
    #ut12monbody div.nwrap,
    #ut18monbody div.nwrap,
    #utcombobody div.nwrap
    {
        display:inline-block;
        width:100%;
        line-height:20px;
    }

    #utweanbody div.nwrap select,
    #ut12monbody div.nwrap select,
    #ut18monbody div.nwrap select,
    #utcombobody div.nwrap select
    {
        width:120px;
    }

    div[class^="mobcol"], 
    .fnumber pre, 
    .fanumber pre, 
    .fsex div,
    .fweighdate div,
    .fweighage div,
    .checkwrap .utcontainer
    {
        display:inline;
    }

    .wbrow .fanumber,
    .wbrow .fsex,
    .wbrow .fage,
    .wbrow [id^=reset]
    {
        display:none;
    }

    #breeduploadwrap {
        position: relative;
    }

    #breeduploadwrap > div.rowbottom {
        position:absolute;
        bottom: 0px;
        width:100%;
        display:block;
    }

    .frow, .brow, .wbrow, .cbrow {
        padding:15px;
    }

    #setspecieswrap,
    #linkedwrap {
        width: 100%;    
    }

    #scalefileupres {
        width:100%;
    }

    #scalefileupwrap {
        padding: 10px;
    }

    #scalefileupwrap > label {
        display:block;
    }

    /* #fileupbut {
        display: block;
    } */

    #bydate > div.tope,
    #bydate > div.topa,
    #capcombomanbestcon > div.tope,
    #capcombomanbestcon > div.topa {
        font-size: 15px;
    }

    #aiw, #aow, #asg {
        font-size: 16px;
        line-height: 20px;
    }

    .templatediv {
        width:90%;
    }

    #findinnerwrap {
        display:block;
        margin-top: 40px;
        height: calc(83vh - 140px);
    }

    div[id^=trd] .lcol {
        font-size:14px;
        width:40%;
    } 

    div[id^=trd] .mcol {
        font-size:14px;
        width:42%;
    }  

    div[id^=trd] .rcol {
        font-size:14px;
        width:16%;
        min-width: 45px;
    }

    #trd4, .slideme {
        height: 300px;
    }

    #deras {
        top:10px;
    }

    #deprompt {
        bottom:0px;
        right:0px;
        left:0px;
        opacity: 1;
        color: #000000;
        background-color: rgba(129, 125, 125, 0.3);
        height:40px;
        padding:0px;
        border-radius: 0px;
        line-height: 40px;
    }

    #trd4 > div.dashpaneltop {
        display:block;
    }

    .nrg.mrgn, 
    .nrg.frgn,
    #nrg.mrgn, 
    #nrg.frgn,
    [id^=rgn].mrgn,
    [id^=rgn].mrgn,
    [id^=rgn].frgn
     {
        height: 27px;
        width: 100%;
        border-radius: 0;
        margin-top: -5px;
        margin-left: -5px;
    }

    div#trd6 .lcol {
        padding-right: 0px;
    }

    div#trd6 .mcol {
        padding-right: 0px;
        text-align: center;
    }

    div#trd6 .rcol { 
        width: 39%;
    }

    #findwrap {
        height: calc(83vh - 64px);
    }

    #dnswrap div.lcol,
    #dnswrap div.mcol,
    #dnswrap div.rcol {
        width: 30%;
    }

    .twint {
        width:100%;
    }

    #ancestorcon, #descendantscon, 
    #genomiccon, #timelinecon {
        margin-left: 0px;
        width: 95vw;
        height: 80vh;
    }

    #choicetitle {
        text-align: left;
        padding: 10px;
    }

    #cancelsort {
        margin-bottom: 5px;
    }
}

@media only screen and (max-height: 375px) 
and (orientation: landscape) 
{

    #pagewrap > div > div:nth-child(2) > div.col-8 > div.col-8.TA {
        width:100%;
    }

    /*#pagewrap > div > div:nth-child(2) > div.col-8 > div.col-4*/
    #dashcentercol
    {
        width:100%;
        margin-left: 0px;
        height:fit-content;
    }

    #reportpan > div.hpsn, 
    #scalepan > div.hpsn, 
    #QRpan > div.hpsn {
        top: 35px;
    }

    #weatherpan > .city-temp {
        top: 16px;
    }
    
    .flip, #facebwrap {
        position:relative;
        transition: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
    }

    /* #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 {
        height: 494px; 
    } */

    #baserowwrap {
        height:fit-content;
    }

    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div.col-12 {
        margin:0px;
    }

    #dashcentercolback, #hcontainerback,#baserowwrapback {
        display:none;
    }

    #pagewrap > div.homecontainer > div:nth-child(2) > div.col-8 > div.col-8.PAR {
        width:100%;
    }

    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(1),
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(2),
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(3),
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(4),
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(5),
    #pagewrap > div.homecontainer > div:nth-child(3) > div.col-8 > div > div:nth-child(6)
    
    {
        width:100%;
        margin-left :0px;
    }

    .frow .div, .brow .div {
        display:block;
    }

    #statswrap {
        min-height: unset;
        height: fit-content;
    }

    #hcontainer {
        height: 330px;
    }

    .circ {
        top: 35px;
        left:1vw;
        visibility: hidden;
        animation: none;
    }

    #cirwrap {
        left:9vw;
    }

    #cirinfo {
        height: 100%;
        width: 34%;
        left:unset;
    }

    #cirinfo .hpbrd {
        position: relative;
        left: unset;
        top: unset;
    }

    #cirinfo .hpsfr {
        margin-top: 10px;
    }

    #cirinfo .hpsn {
        left: unset;
        float: none;
        position: relative;
        text-align: left;
        margin-left: 25px;
        top: unset;
        height: 50px;
        font-size: 6vw;
        line-height: 6vw;
    }

    .hpstr1, .hpstr2 {
        width: 100%;
        position: relative;
        box-sizing: border-box;
    }

    .cirmoreinf {
        position:relative;
        bottom:unset;
    }

    .cirmoreinf div {
        padding:0px;
    }
    
    #typedlogo {
    display:none;
    }

    .bannerpanel {
        height:200px;
    }

    .typedcontainer {
        height:100px;
        width:100%;
    }

    #weatherpan > div.city-temp {
        font-size: 50px;
    }

    #weatherpan > div.city-temp > sup {
        font-size: 20px;
    }

    #dashcentercol .hpanels {
        width: 49%;
        display: inline-block;
        vertical-align: top;
    }

    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(2),
    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(3) {
        width:20vw;
    }

    #calendarB > div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > div:nth-child(1) {
        margin-top: 0px;
    }

    #tocreateevent {
        overflow-x:hidden;
        overflow-y:auto;
        height:60vh;
        width: 95vw;
    }

    #evtoptwrap {
        height: 465px;
    }

    #tocreateevent > div.warn {
        word-wrap:break-word;
        width: 76vw;
        line-height: 22px;
    }

    #evtoptcube #evresc, #evtoptcube #evrept, #evtoptcube #evremv {
        height:465px;
    }

    div.rowbottom input {
        min-width:100px;
        margin:0px;
    }

    #breedcyclewrap, 
    #breedweaningwrap,
    #breedgrowthwrap,
    #breeduploadwrap {
        height:100%;
    }

    #fcontainer, #wcontainer {
        height: calc(100% - 50px);
    }

    #fcontainer > div > div.fnumber,
    #fcontainer > div > div.fdob,
    #fcontainer > div > div.fserviceda,
    #fcontainer > div > div.fage,
    #fcontainer > div > div.fchildren,
    #fcontainer > div > div.fcalvinga,

    #wcontainer > div > div.fnumber,
    #wcontainer > div > div.fdob,
    #wcontainer > div > div.fsex,
    #wcontainer > div > div.fage,
    #wcontainer > div > div.ftest,
    #wcontainer > div > div.fweight,
    #wcontainer > div > div.fweightadj,
    #wcontainer > div > div.flength,
    #wcontainer > div > div.fheight,
    #wcontainer > div > div.flhratio,
    #wcontainer > div > div.fscrotumcircum,
    #wcontainer > div > div.fskinthickness,
    #wcontainer > div > div.fada,
    #wcontainer > div > div.fadg,
    #wcontainer > div > div.ffcr
    {
        width:100%;
        white-space:unset;
        overflow:unset;
        text-overflow:unset;
    }
    
    .frow [class^=mobcol], 
    .brow [class^=mobcol], 
    div.fnumber > pre {
        display:inline-block;
        width:auto;
        vertical-align: bottom;
    }

    #weathercon {
        min-width: 300px;
        height: 65vh;
        max-height:530px;
    }

    #systemcon {
        top: 49%;
        width:60vw;
        min-width:230px;
        height:63vh;
    }

    #sysinfowrap {
        height: 58%;
    }

    #faultswrap, #uploadwrap, #mapwrap, #servicewrap {
        height: 80vh;
        min-height: 100px;
    }    

    #breeduploadwrap #ucontainer {
        /* height: calc(100% - 40px); */
        height: 100%;
    }

    #holderutab {
        height: 100%;
    }

    #breeduploadwrap > div.rowbottom {
        position: absolute;
        bottom: 0px;
        width:100%;
        /* display: flex;
        justify-content: space-evenly; */
        display:block;
    }

    .holderdiv .holcounts {
        top: 15px;
    }

    .holderdiv {
        width:44.5%;
        height:170px;
    }

    .holinf {
        width: 100%;
        height: 85px;
        font-size: 20px;
        line-height: 85px;
    }

    .holimg {
        width:78px;
        height:70px;
    }

    .bwrap {
        width:100%;
    }

    #TAmain, #calwrap {
        height: 90vh;
    }

    #baserow > div.col-12 > div.bannerpanel {
        height:140px;
    }

    .mcarslide {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #toaction {
        position:absolute;
        left:50px;
        width:fit-content;
        padding:0 5px;
    }

    #sorta.fsortb {
        width:fit-content;
        padding:0 5px;
    }

    .bsortb{
        width:120px;
    }

    #fsort.bsortdrop,
    #fsort.fsortdrop {
        width:135px;
        text-align: -webkit-right;
    }

    #ffilterwrap > div.ftfilter
    {
        width:fit-content;
        padding:0 5px;
    }

    #dateadj {
        position: absolute;
        left: 50px;
        top: 2px;
        margin: 0px;
        height: 42px;
        background-image: none;
        /* padding-left: 0; */
        text-align: left;
        width: fit-content;
    }

    #resan {
        position: absolute;
        left: 101px;
        top: 2px;
        margin: 0px;
        height: 42px;
        background-image: none;
        /* padding-left: 0; */
        text-align: left;
        width: fit-content;
    }

    .inputcontainer.full {
        width:100vw;
        height:100vh;
    }

    #inputemail {
        max-width:100vw;
    }

    #cansearchwrap {
        display:none;
    }

    #combotable {
        display: block;
        height: 100%;
        overflow-y: scroll;
    }

    #utcombobody div[class^="mobcol"] {
        display: block;
    }

    #colnumber, .wbrow .fnumber, 
    .wbrow .fanumber, .wbrow .fdob, 
    .wbrow .fweighage, .wbrow .fage,
    .wbrow .fweighdate,
    .cbrow .fdob, .cbrow .fstatus, 
    .cbrow .checkwrap, .cbrow .fcandate  {
        display: inline-block;
        width: fit-content;
        min-width:50px;
        margin: 0 5px;
        text-align: center;
    }

    .wbrow .fweighdate div[id^='weighdate'] {
        padding: 0px;
        min-width: 100px;
    }

    .wbrow .checkwrap {
        width:100%;
        padding:0px 0px 10px 0px;
    }

    #utcombobody div.wbrow > div.fold > div.checkwrap > label {
        display: inline-block;
        vertical-align: top;
    }

    #utcombobody  div.wbrow > div.fold > div.checkwrap > div {
        display: inline-block;
        vertical-align: top;
    }

    #uploadwrap {
        height: 90vh;
        margin-bottom: 10px;
    }

    #capcombobestcon {
        width:100%;
    }

    #bydate > div.tope,
    #bydate > div.topa,
    #capcombomanbestcon > div.tope,
    #capcombomanbestcon > div.topa {
        font-size: 15px;
        line-height: 24px;
        width:fit-content;
        padding:0px 5px;
    }

    #aiw, #aow, #asg {
        font-size: 16px;
        line-height: 24px;
    }

    #aow, #asg {
    display:inline-block;
    padding: 0px 4px;
    }

    #bestwrap label,
    #bydate label {
        line-height: 22px;
        width:fit-content;
        margin-right:5px;
        display:inline-block;
    }

    #tobestStartcombo, #tobestCancombo {
        display: inline-block !important;
        width:49%;
    }

    #bestcombodate,#recallbestcombodate {
        width:fit-content;   
    }

    .templatediv {
        width: 46%;
        margin-right: 5px;
    }

    #toanimalcon {
        overflow-y: auto;
    }

    .twint {
        width:100%;
    }

    #findinnerwrap {
        display:block;
        margin-top: 40px;
        height: calc(83vh - 55px);
    }

    #pagewrap > div.homecontainer > div:nth-child(2) > div.col-12 {
        margin-bottom:0px;
    }

    #descendantscon {
        margin-left:0px;
        top: 50%;
        height: 97%;
    }

    #ancestorcon, #descendantscon, 
    #genomiccon {
        margin-left: 35px;
        width: 90vw;
    }

    #timelinecon {
        margin-left: 33px;
        width: 87vw;
        top: 213px;
        height: 82vh;
    }

    #timelinedata > div[id^=timer],
    #timelinedata > div[id^=time] {
        width: 850px;
    }

    #ancestorcon,
    #descendantscon {
        height: 95%;
        top: 50%;
    }

}

#installApp {
    right:0px;
    top:0px;
    width:97%;
    height:32px;
    display:block;
    transition:none;
    border: 1px solid rgba(174, 169, 169,0.4);
    border-radius:5px;
    background-color: #ffffff;
    margin:5px auto;
    font-family: roboto_condensedregular;
    font-size: 14px;
    line-height:30px;
}

#t3.menubutton,
#t5.menubutton {
    display:none;
}



/* mobile only */

@media only screen and (pointer:coarse) 
{

    #loginright {
        display:none;
    }

    #mainmenu {
        position:fixed;
        z-index:999;
        width:100vw;
        height:60px;
        top:unset;
        left:0px;
        bottom:-120px;
        transition: none;
        border:none;
        border-top:1px solid #aea9a9;
        transition: bottom 0.5s linear, height 0.5s linear;
    }

    #morehead {
        display: none;
        height:50px;
        line-height:50px;
        text-align: left;
        padding-left:10px;
        /* margin-top:55px; */
        background-color: var(--fc-button-bg-color);
        border-color: var(--fc-button-border-color);
        color: var(--fc-button-text-color);
        font-size: 16px;
        position:relative;
        font-family: 'roboto_condensedregular';
    }

    #more {
        display:block;
    }

    .menubuttonwrap {
        position:relative;
        text-align: center;
    }
    
    #menuslide {
        height:unset;
        margin-top:unset;
        overflow:hidden;
        display:none;
    }

    #moredown {
        position:absolute;
        right:10px;
        top:0px;
        height: 45px;
        width: 45px;
        background-size: 30px;
        background-image: url(../images/godown.webp);
        background-repeat: no-repeat;
        background-position: center;
        filter: brightness(0) invert(1);
    }

    #topmenu {
        position:absolute;
        z-index:999;
        width:100vw;
        height:50px;
        top:-60px;
        border-bottom:1px solid #aea9a9;
        background-color:#D9D9D9;
        transition: top 0.5s linear;
    }

    .mbselected  {
        transform: none;
        box-shadow: none;
    }

    .hpanelt > .hpsn{
        height: 50px;
        line-height:50px;
    }

    .extrabuttonwrap {
        display:none;
    }

    #t3.menubutton,
    #t5.menubutton {
        position:absolute;
        top:10px;
        right:15px;
        width: 30px;
        height: 30px;
        text-align: center;
        margin:0px;
        line-height: 35px;
        
    }

    #t3.menubutton {
        right:55px;
        line-height: 26px;
    }
 
    #t3.menubutton img {
        width: 25px;
        height: 25px;
        left: 2px;
        top: 2px;
    }

    #t5.menubutton img {
        width: 25px;
        height: 25px;
        left: 2px;
        top: 2px;
    }
    
    #pagewrap > div.homecontainer {
        margin-left: 0px;
    }

    #mainmenu > div.logocontainer,
    #mainmenu > div.extrabuttonwrap,
    #mainmenu > div#mainmenubutton
    {
        display:none;
    }

    .menubutton {
        height:50px;
        vertical-align: top;
        padding-left:0px;
        line-height:unset;
        margin:5px;
        width: 16.8%;
        display: inline-block;
        text-align: center;
    }

    #menuslide .menubutton img {
      position:unset;
    }

    #mainmenu > div.menubuttonwrap {
        top:0px;
        text-align: center;
    }

    #menuslide .menubutton .mbtext {
        display:block;
        font-size:12px;
        width:100%;
        bottom: 0px;
        left: 0px;
    }
     
    #flist, #blist {
        display:none;
    }

    .mbselected {
        transform:none;
        box-shadow:none;
    }

    .menubutton img {
        height:30px;
    }

    #dropbar {
        position: absolute;
        bottom: 10px;
        left: 50%;
        display: none;
        width: 60vw;
        max-width: 400px;
        height: 10px;
        background-color: #B83131;
        transform: translate(-50%, 0px);
        border-radius: 5px;
        transition: all 0.5s linear;
        z-index:9999;
    }

    .cirmoreinf {
        display:none;
    }

    #dropset {
        position:absolute;
        top:50px;
        display:none;
        background-color: #ffffff;
        width: 100%;
    }

    #dropset div {
        width: auto;
        height: 30px;
        line-height: 30px;
        padding-left:10px;
    }

    #dropset  div > .abr {
        display:none;
    }

    .homecontainer {
        margin-left:80px;
        max-height: 100%;
        overflow: none;
        overflow-y:auto;
    }

    [class^="mobcol"] {
        display:block;
    }

    #statswrap #hslidewrap {
        display:block;
    }

    #mapwrap {
        min-height: calc(100vh - 140px);
    }

    .TAcon, #TAmap {
        position: relative;
        height: calc(100vh - 340px);
        width: auto;
        min-height:310px;
    }

    #taconhandle {
        display:none;
       
    }

    #markersfoot {
        margin-bottom:10px;
    }

    #pagewrap > canvas.canvas {
        display:none;
    }

    .leaflet-control-fullscreen {
        display:none;
    }

    #installApp.insapp {
        /* width: 99%; */
        height: 30px;
        background-image: none;
        content: "";
        line-height: 30px;
    }

    .ftfilter {
        display:block;
        height: 40px;
        width: 170px;
        background-color: rgba(255,255,255,1);
        border: 1px solid #aea9a9;
        border-radius: 5px;
        margin: 2px 5px 0 5px;
        text-align: center;
        cursor: pointer;
    }

    #ffilterwrap > div.ftfilter,
    .fsortb
    {
        width:fit-content;
        
    }

    #toaction {
        position:absolute;
        left:50px;
        width:fit-content;
        padding:0 5px;
    }

    .fltfilter {
        display:block;
        line-height:unset;
    }

    #wlist {
        display:none;
    }

    #sysinfo {
        background-image: none;
    }

    .floatmore div input[id^=rowreset_]
    {
        display:none;
    }

    #uploadwrap {
        height: fit-content;
    }

    #capholderutab {
        height:calc(100vh - 200px);
    }

    #tablewrap,
    #tablewrap3 {
        height: calc(100% - 125px);
    }

    #noanimals {
        display:none;
        padding-left:10px;
    }

    #tableright {
        width: calc(50vw + 5px);
        float:none;
    }

    .rowbottom input {
        min-width: 80px;
    }

    #addme {
        right: 5px;
    }

    #infodash
    {
        margin: 10px 0px;
        width: 100%;
        margin: 0;
    }

    /* TEST */
    div[class^='infocard'] {
        background-color: rgba(85,85,85,0.2);
    }
    /* TEST */

    /* for TA layout */
    #searchmore {
        width:fit-content
    }
    #mydetail {
        width:fit-content
    }
    #prebreedTA #ko {
        width:fit-content
    }
    /* for TA layout */

    #overviewwrap, 
    #actionwrap {
        height: 87%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #opts {
        margin: 0px;
        text-align: left;
        position: sticky;
        top: 0px;
        z-index: 2;
        height: 42px;
        margin: 0.5rem 0%;
        width: 96%;
        background-color: #fff;
        overflow-x: auto;         /* allow horizontal scroll */
        white-space: nowrap;      /* prevent wrapping */
        gap: 0.5rem;              /* space between items */
    }

    #opts::-webkit-scrollbar {     /* Chrome, Safari */
       display: none;
    }

    #opts .nml {
        flex: 0 0 auto;              /* keep children inline, no shrink */
    }

    #tablewrap3 input[id^='dieridnr2_'],
    #tablewrap3 input[id^='moeridnr2_'],
    #tablewrap3 input[id^='vaaridnr2_'] {
        width:25px;
        border-right:1px solid #b4b4b4;
        border-radius: 0px;
        padding:1px 2px;
        box-sizing: border-box;
    }

    #tablewrap3 input[id^='dieridnr3_'],
    #tablewrap3 input[id^='moeridnr3_'],
    #tablewrap3 input[id^='vaaridnr3_'] {
        width:40px;
        border-right:1px solid #b4b4b4;
        border-radius: 0px;
        padding:1px 2px;
        box-sizing: border-box;
    }

    #tablewrap3 #tableleft .row > div#hdrdieridnr,
    #tablewrap3 #tableleft .row div[id^='bdy1_'],

    #tablewrap3 #tablerightinner .row div[id^='bdy7_']
     {
        width:105px;
    }

    #tablewrap3 #tableleft .row #hdrpic,
    #tablewrap3 #tableleft .row select[id^='pic_'],
    #tablewrap3 #tableleft .row div[id^='bdy42_'],
    #tablewrap3 #tableleft .row div[id^='checkwrap_']
    {
        width:45px;
    }

    span.utcheckmark {
        left: calc((42px - 32px) / 2);
    }

    #cansearchwrap {
        right:0px;
    }

    #holderutab #describesel {
        margin-left:0px;
    }

    #cprintlist {
        right:20px;
    }

    #hslide .spanelt {
        background-color: #fff;   
        color: #000;
        border:1px solid #bb3131
    }

    #deras {
        opacity:1;
    }

    #tablewrap #tableleft {
        height: calc(100% - 0px);
    }

    #tablewrap #tableright {
        height: calc(100% - 10px);
        width: calc(100% - 160px);
    } 

    .Waitmydetails {
        z-index: 6;
    }

}

/* @media only screen and (max-height: 670px)
{
    #findinnerwrap {
        height: 78vh;
    }
} */

@media only screen and (pointer:coarse)
and (orientation: landscape) {

    .inputcontainer {
        width:70vw;
        text-align: center;
    }

    .logocontainer {
        display: inline-block;
        width: 49%;
        background-position: center;
        max-width:200px;
        background-size: 70%;
    }

    .rotmobwrap {
        position: relative;
        display: inline-block;
        width: 50%;
        vertical-align: top;
        height: 200px;
    }

    .video-background,
    .logocontainer {
        display:none;
    }

    #inputwrap {
        display: none;
    }

    #soswrap {
        display:none;
    }

    #capholderutab {
        height: 73vh;
    }

    #tablewrap,
    #tablewrap3 {
        height: 62vh;
    }

    #tableright {
        width: 68vw;
    }

    .rowbottom input {
        min-width: 80px;
    }
    
    #qrint {
        position:absolute;
        left: 0%;
        top: 50%;
        transform: translate(0%, -50%);
        width:348px;
    }

    #QRidCan {
        position:absolute;
        right: 0%;
        left:unset;
        top: 40%;
        width: calc(100% - 370px);
        height: 20%;
        transition: none;
        margin:0 10px;
    }

    #qr-shaded-region {
        border-width: 40.5px 50px;
    }

     #opts {
        position: relative;
     }

}

/* Small screen landscape */
@media only screen and (max-height: 270px) 
and (orientation: landscape) {

    .hpanelt > .hpsn {
        height: 50px;
        line-height: 50px;
        font-size: 35px;
    }

    .loginleft .logocontainer, .loginleft .inputcontainer {
        display:inline-block;
        height:100%;
        width:90vw;
        vertical-align: top;
        padding:0px;
        background-position: center;
    }

    .loginleft {
        text-align: center;
    }

    #inputwrap {
        margin-top: calc((270px - 250px)/2);
    }

    .inputcontainer {
        width: 90vw;
    }

    .rotmobwrap {
        height:150px;
    }

    .loginleft .inputcontainer {
        height:unset;
    }
    .loginleft .logocontainer {
        height: 150px;
    }

} 

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #000000;
  /* -webkit-box-shadow: 0 0 0px 1000px #000 inset; */
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px rgb(35, 35, 35,0);
}