.backgroundLocal{
  background-image: url('../Images/BackGround2.jpg');
  width: 100%;
  position: fixed;
  height: 100%;
  left: 0px;
  top: 0px;
}

.mainLocal {
      background-color: #000;
  color: #c0c0c1;
  border-style: solid;
  border-width: 1px;
  border-color: #25282b;
  position: relative;
  object-fit: cover;
  width: 954px;
    
}

.MainInnerLocal{
  display: grid;
  grid-template-columns: [left]33.3%[midleft]33.3% [midright]33.3%[right];
  grid-template-rows: [top]7px [textarea]120px[scanbut]43px[urlbutton]40px[blackswitch]40px[result]max-content[expbuffer]6px[expand]1px[bottom]22px[buffer];
}
.MainInnerLocal.Dscan{
  grid-template-rows: [top]7px [textarea]120px[scanbut]43px[urlbutton]40px[blackswitch]7px[result]max-content[expbuffer]6px[expand]1px[bottom]22px[buffer]
}

.localProgressLayer{
  position: absolute;
  left: 0px;
  top:0px;
  width: 100%;
  height: 100%;
  background-color: #00000094;
  display: grid;
  grid-template-columns: [left]33% [midleft]34% [midright] 33%[right];
  grid-template-rows: [top]33%[midtop]34%[midbottom]33%[bottom];
  z-index: 1;
  animation-name: Progressenable;
  animation-fill-mode: forwards;
  animation-duration: .5s;
  animation-direction:normal;
}
.localProgressLayer.disable{
  animation-name: Progressdisable;
  animation-fill-mode: forwards;
  animation-duration: .8s;
  animation-direction:normal;

  
}
@keyframes Progressdisable {
  0%{
    opacity: 100%;
  }
  50%{

  }
  99%{
    visibility:visible;
  }
  100%{
    opacity: 0%;
    visibility: hidden;
  }
  
}
@keyframes Progressenable {
  0%{
    opacity: 0%;
    visibility: hidden;
  }
  1%{
    visibility:visible;
  }
  50%{
    
  }
  100%{
    opacity: 100%;
  }
}
.localProgressInner{
  grid-row-end: midbottom;
  grid-row-start:midtop;
  grid-column-start: midleft;
  grid-column-end: midright;
  justify-self: center;
  align-self: center;
  color: white;
  background-color: black;
  filter: blur(10px);
  
  width: 360px;
  height: 400px;
  z-index: -1;
}
.localProgressText{
  grid-row-end: midbottom;
  grid-row-start:midtop;
  grid-column-start: midleft;
  grid-column-end: midright;
  justify-self: center;
  align-self: center;
  margin-top: 296px;
  color: white;
  text-align: center;
}
.localProgressImg{
  grid-row-end: midbottom;
  grid-row-start:midtop;
  grid-column-start: midleft;
  grid-column-end: midright;
  justify-self: center;
  align-self: center;
  margin-bottom: 60px;
}



.blackSwitchborder {
  grid-column-start: midleft;
  grid-column-end: midright;
  grid-row-start: blackswitch;
  grid-row-end: result;
  background-color: #dd234b;
  width: 290px;
  justify-self: center;
  align-self: center;
  height: 31px;
  
}

.blackSwitchborder.hover {}

.blackSwitch {
  grid-column-start: midleft;
  grid-column-end: midright;
  grid-row-start: blackswitch;
  grid-row-end: result;
  width: 288px;
  justify-self: center;
  align-self: center;
  height: 29px;
}
.blackSwitch.black{
  animation-name: blackSwitchWarning;
  animation-duration: .2s;
  animation-fill-mode: none;
  animation-direction: normal;
}

.blackSwitch.hover {}

.blackSwitch:active {
  background-color: #ffffff;
  color: rgb(7, 4, 4);
  transition: .1s;
}

@keyframes blackSwitchWarning {
  0%{
  }
  30% {
    background-color: #ffffff;
    color: rgb(7, 4, 4);
  }
  100%{
    background-color: #446E79;
  color: white;
  }
}








.localResultAll{
grid-column-start: left;
grid-row-start: result;

  max-height: 340px;
}
.localResultCorp{
grid-column-start: midleft;
grid-row-start: result;

  max-height: 340px;
}
.localResultWarn{
grid-column-start: midright;
grid-row-start: result;

  max-height: 340px;
}
.localResultExpand{
  max-height: unset;
  height: max-content;

}.button {
  background-color: #446E79;
  color: white;
  border-style: none;
  transition: .8s;
  cursor: pointer;
  padding-bottom: 3px;
  font-size: 14px;
}
button.hover{
  background-color: #5A92A1;
}
.button:active{
  background-color: #ffffff;
  color: rgb(7, 4, 4);
  transition: .1s;
}

.buttonBorder {
  
  background-color: #9ED5E5;
}
.buttonBorder.hover{
  background-color: #dae8ec;
}

.buttonExpand {
  clip-path: polygon(0px 0px, 0% 62%, 6.2% 100%, 100% 100%, 100% 68%, 100% 0px);
  grid-column-start: left;
  grid-column-end: midleft;
  grid-row: blackswitch;
  padding-bottom: 3px;
  width: 288px;
  justify-self: center;
  height: 29px;
  align-self: center;
}

.buttonExpandBorder {
  clip-path: polygon(0px 0px, 0% 62%, 6.2% 100%, 100% 100%, 100% 68%, 100% 0px);
  grid-column-start: left;
  grid-column-end: midleft;
  grid-row: blackswitch;
  width: 290px;
  justify-self: center;
  height: 31px;
  align-self: center;
  
}


.buttonScan{
  clip-path: polygon(0 0, 0% 68%, 3.5% 95%, 96.5% 95%, 100% 68%, 100% 0);
  grid-column: midleft;
  grid-row-start: scanbut;
  justify-self: center;
  width: 300px;
  height: 38px;
  margin-top: 1px;
  cursor: pointer;
  padding-bottom: 3px;
}
.buttonScanBorder{
  clip-path: polygon(0 0, 0% 68%, 3.5% 95%, 96.5% 95%, 100% 68%, 100% 0);
  grid-column: midleft;
  grid-row-start: scanbut;
  justify-self: center;
  width: 302px;
  height: 40px;
}
.URLButton{
  grid-column-start: midleft;
  grid-column-end: midright;
  grid-row-start: urlbutton;
  grid-row-end: blackswitch;
  /*! margin: 1px; */
  height: 29px;
  width: 288px;
  align-self: center;
  justify-self: center;
}
.URLButtonBorder{
  grid-column-start: midleft;
  grid-column-end: midright;
  grid-row-start: urlbutton;
  grid-row-end: blackswitch;
  height: 31px;
  width: 290px;
  justify-self: center;
  align-self: center;
}


.AllCorpMainContainer{
  background-color: black;
  transition: .15s;
  border-radius: 13px;
  height: 50px;
  width: 300px;
  margin-top: 6px;
  overflow: hidden;
}
.AllCorpMainContainer.WarningSelect{
  height: 50px;
  width: 300px;
  background-color: white;
  padding: 1px;
}
.AllCorpMainContainer:hover{
  scale: 1.10;
  transition: .15s;
}
.AllCorpMainContainer.exp{
  height: 25px;
  overflow: hidden;
}


.AllCorpMain{
  height: 50px;
  width: 300px;
  display: grid;
  grid-template-columns: [left] 14px [pic] 68px [name]107px[num]63px [numass]47px[left];
  grid-template-rows: [top]0px[name]16px [corp]20px [all] 14px [bottom];
  background-color: #202020;
  margin-bottom: 7px;
  border-radius: 13px;
  cursor: pointer;
  
}
.AllCorpMain.blacklist {
  opacity: 40%;
  transition: .15s;
}
.AllCorpColourStrip {
  grid-column: left;
  grid-row-start: top;
  grid-row-end: bottom;
  height: auto;
  width: auto;
  border-radius: inherit;
}
.AllCorpMain.exp{
  height: 25px;
  grid-template-rows: [top]1px[name]0px [corp]23px [all] 0px [bottom];
  grid-template-columns: [left] 14px [pic] 57px [name]138px[num]35px [numass]42px[left];
  
}
.AllCorpImg{
  height: 47px;
  grid-column: pic;
  grid-row-start: name;
  grid-row-end: bottom;
  justify-self: center;
  align-self: center;
  
}
.AllCorpImg.exp{
  height: 23px;
}
.AllCorpName{
  grid-row: corp;
  grid-column: name;
  justify-self: center;
  align-self: center;
  word-wrap: normal;
  overflow: hidden;
  height: 38px;
  align-content: center;
}
.AllCorpName.exp{
  height: 17px;
  width: 142px;
}
.AllCorpNumber{
grid-row: corp;
grid-column: num;
justify-self: center;
  align-self: center;
}
.AllCorpNumberAss{
grid-row: corp;
grid-column: numass;
justify-self: center;
  align-self: center;
}
.AllCorpCrossout{
  grid-column-start: left;
  grid-column-end: right;
  grid-row-start: top;
  grid-row-end: bottom;
  width: 287px;
  margin-top: 11px;
  margin-left: -1px;
}

.buttonReset {
  clip-path: polygon(0 0, 0% 0%, 0% 100%, 93.8% 100%, 100% 62%, 100% 0);
  grid-column: midright;
  grid-row: blackswitch;
  height: 29px;
  background-color: #663334;
  width: 288px;
  justify-self: center;
  cursor: pointer;
  align-self: center;
}
.buttonReset.hover{
  background-color: #743a3b;
}

.buttonResetBorder {
  clip-path: polygon(0 0, 0% 0%, 0% 100%, 93.8% 100%, 100% 62%, 100% 0);
  grid-column: midright;
  grid-row: blackswitch;
  height: 31px;
  width: 290px;
  justify-self: center;
  background-color: #E65555;
  align-self: center;
}
.buttonResetBorder.hover{
  background-color:#ff8c8c
}






.localScanEntry {
  width: 446px;
  background-color: #2b3237;
  border-color: #2b3237;
    border-right-color: rgb(43, 50, 55);
    border-bottom-color: rgb(43, 50, 55);
  border-right-color: rgb(43, 50, 55);
  border-bottom-color: rgb(43, 50, 55);
  color: #8a9eb2;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  border-bottom-color: #333b41;
  border-right-color: #333b41;
  height: 112px;
  outline: none;
  resize: none;
  grid-row-start: textarea;
  grid-column-start: left;
  grid-column-end: right;
  justify-self: center;

}

.scanButton {
  grid-column: midleft;
  grid-row-start: textarea;
}

@media only screen and (max-width: 870px) {
  .scanButton {
    grid-column: middle;
  }
}

.characterMainContainer{
  display: grid;
  grid-template-columns: [left]56px[pilot]219px[stats]140px[ass]146px[last]93px[ships]222px[warnings]76px[right];
  grid-template-rows: [top]2px[text]23px[results]max-content[bottom];
}
.characterMainContainer.disabled{
  display: none;
}
.characterMainPilot{
  grid-column: pilot;
  grid-row:text
}
.characterMainStats{
  grid-column: stats;
  grid-row:text
}
.characterMainAss{
  grid-column: ass;
  grid-row:text
}
.characterMainLast{
  grid-column: last;
  grid-row:text
}
.characterMainShips{
  grid-column: ships;
  grid-row:text
}
.characterMainWarnings{
  grid-column: warnings;
  grid-row:text
}

.characterMainResults{
  grid-column-start: left;
  grid-column-end: right;
  grid-row-start: results;
}
.characterMain {
    height: 100px;
  width: 941px;
  display: grid;
  grid-template-columns: [left] 2px [pic] 86px [ACpic]45px [text]153px[text2]123px [ass]147px[last] 92px [ships]221px[warning]71px[right];
  grid-template-rows: [top]2px[name]21px [corp]21px [all] 40px [lowDiv]17px[bottom];
  background-color: #202020;
  margin-bottom: 7px;
  clip-path: polygon(0% 0%, 0% 94%, .5% 100%, 99.5% 100%, 100% 94%, 100% 72%, 99.5% 65%, 99.5% 32%, 100% 26%, 100% 7%, 99.5% 0%);
  
}
.characterMain.enabled{
  animation-name: characterMainReveal;
  animation-duration: .5s;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
.characterMain.disabled{
  animation-name: characterMainDisable;
  animation-duration: .5s;
  animation-direction:normal;
  animation-fill-mode: forwards;
}
.characterMain.disabledNoAnim{
  display: none;
}
.characterMain.enabledNoAnim{
  display: grid;
}


@keyframes characterMainDisable{
  0%{
    /* height: 91px;
    width: 870px; */
  }
  30%{
    transform: scale(1,0.02);
    /* margin-bottom: 49px;
    margin-top: 49px; */
  }
  70%{
    transform: scale(0.02,0.02);
    opacity: 100%;
    height: 91px;
    width: 870px;
    
  }
  99.9%{
    /* margin-bottom: 49px;
    margin-top: 49px; */
    opacity: 50%;
    
  }
  100%{
    transform: scale(0.00,0.00);
    opacity: 0%;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 0px;
    width: 0px;
    
  }
}
@keyframes characterMainReveal{
  0%{
    transform: scale(0.00,0.00);
    opacity: 0%;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 0px;
    width: 0px;
  }
  0.1%{
    opacity: 50%;
  }
  30%{
    transform: scale(0.02,0.02);
    opacity: 100%;
    height: 91px;
    width: 870px;
  }
  70%{
    transform: scale(1,0.02);
    
  }
  100%{
    /* height: 91px;
    width: 870px; */
    margin-bottom: 7px;
  }
}
.characterLowDiv{
  grid-row: lowDiv;
  grid-column-start: left;
  grid-column-end: right;
  clip-path: polygon(0px 0px, 0% 36%, 0.5% 95%, 99.5% 95%, 100.00% 46.00%, 100% 0px);
  background-color: #8080803d;
  width: auto;
  height: auto;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 3px;
  margin-top: 4px;
}



.characterCharImg {
  height: 80px;
  grid-column-start: pic;
  grid-column-end: ACpic;
  grid-row-start: name;
  grid-row-end: lowDiv;
  justify-self: center;
  align-self: center;

}

.characterWarningDiv {
  grid-column-start: pic;
  grid-column-end: ACpic;
  grid-row-start: name;
  grid-row-end: lowDiv;
  opacity: 68%;
  background-color: rgba(255, 0, 0, 0.25);
  height: 80px;
  justify-self: center;
  align-self: center;

  width: 80px;
}
  .characterWarningDivImg {
    width: 73px;
  height: 67px;
  
    display: flex;
    margin-top: 5px;
}

.characterWarningSmallDiv{
  grid-column: warning;
  grid-row: name;
  grid-row-end: lowDiv;
}
.characterWarningSmallCon{
  grid-template-columns: [left] 26px [mid] 42px[right];
  display: grid;
  margin-bottom: 2px;
}
.characterWarningSmallImg{
  height: 26px;
  grid-column: left;
}
.characterWarningSmallImg.zero{
  opacity: 30%;
}
.characterWarningSmallText{
  grid-column: mid;
  justify-self: center;
  align-self: center;
}


.characterCharText {
  grid-column: ACpic;
  grid-row: name;
  text-align: left;
  color: white;
  font-size: 20px;
  font-weight: bold;
  white-space: pre;
  overflow: hidden;
  width: 195px;
}



.characterACImg {
 height: 39px;
  grid-column: ACpic;
  grid-row-start: corp;
  align-self: center;
  grid-row-end: lowDiv;
  margin-top: 3px;
}

.characterACText {
  grid-column: text;
  grid-row-start: corp;
  text-align: left;
  overflow: hidden;
  grid-row-end: lowDiv;
  align-self: center;
  max-height: 35px;
}



.characterShipCon {
  width: 400px;
  height: 64px;
  grid-column: ships;
  grid-row: name;
  display: flex;
}

.characterShipDiv {
  width: 43px;
  height: 63px;

  /*! background-color: rgb(49, 45, 46); */
}

.characterShipDiv.Blops {
  background-color: rgb(92, 16, 35);
}

.characterShipImg {
  height: 42px;
  display: block;
  border-radius: 5px;
  margin-bottom: 3px;
}

.characterAssDiv {
  grid-column: ass;
  grid-row: name;
  
}
.characterAssDiv:hover{
  overflow: unset;
  width: fit-content;
  
  
}
.characterAssText {
  text-align: left;
  height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: none;
  white-space: nowrap;
}
.characterAssText:hover{
  overflow: unset;
  

}

.characterKillsText {
  grid-column: text2;
  grid-row: name;
  text-align: left;
}
.characterLossesText{
grid-column: text2;
  grid-row: corp;
  text-align: left;
}

.characterAvgText {
  grid-column: text2;
  grid-row: all;
  text-align: left;
  height: 21px;
}

.characterLastDiv {
  font-size: 13px;
  height: 80px;
  grid-row: name;
  grid-column: last;
}

.blinking{
  opacity: 50%;
  transition: .8s;
}
.blinking.vis{
  opacity: 80%;
  transition: .8s;
}
.buttonDisable{
  background-color: #6c7375;
  color: #464040;
}
.buttonNoVis{
  display: none;
}

.DscanMainCon {
  height: 44px;
  width: 302px;
  display: grid;
  margin-bottom: 5px;
  border-radius: 11px;
  cursor:default;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
}
.DscanMain {
  height: 44px;
  width: 300px;
  display: grid;
  grid-template-columns: [left] 7px [pic] 82px [name]117px[num]91px [numass]8px[left];
  grid-template-rows: [top]1px[name]10px [corp]19px [all] 11px [bottom];
  background-color: #202020;
  
  justify-self: center;
  border-radius: 11px;
  cursor: default;
  margin-left: 2px;
}
.DscanImg {
  height: 37px;
  grid-column: pic;
  grid-row-start: name;
  grid-row-end: bottom;
  justify-self: center;
  align-self: center;
  border-radius: 6px;
}

.DscanTableDesc{
  height: 42px;
  width: 300px;
  display: grid;
  grid-template-columns: [left] 12px [pic] 82px [name]117px[num]91px [numass]8px[left];
  grid-template-rows: [top]1px[name]7px [corp]21px [all] 12px [bottom];
  margin-bottom: 5px;
  border-radius: 13px;
  cursor: pointer;
}

.n{
background-color: #202020;
}
.r{
background-color: #4d3939;
}
.b{
  background-color: #2b2a42;
}
.g{
  background-color: #30422e;
}
.y{
  background-color: #4e5118;
}
.t {
  background-color: #044646;
}

.p {
  background-color: #331b4b;
}



.Dsn{
background-color: #202020;
}
.Dsr{
background-color: #9c3020;
}
.Dsb{
  background-color: #2b5fc2;
}
.Dsg{
  background-color: #8cd82b;
}
.Dsy{
  background-color: #fbf754;
}
.Dst {
  background-color: #36a6d2;
}
.Dsp {
  background-color: #753584;
}

.Dspink{
  background-color: #c0436e;
}
.Dsorange{
  background-color: #9e5b25;
}
.Dsdgreen{
  background-color: #3c7516;
}
.Dsmauve{
  background-color: #49031b;

}