/*---------------------------------*/
/*-____----___-_____-___----_____--*/
/*-\   \--/   \     |   |--|     /-*/
/*--\   \/__   \    |   |__|    /--*/
/*---\     /\   \   |      |   /---*/
/*----\___/--\___\__|______|__/-'S-*/
/*------------------------ZONE-----*/
/*-------------Windows-------------*/
/*---------------------------------*/

@font-face {
  font-family: "Ithaca";
  src: url("/fonts/Ithaca.woff2"),
}

.windowtext {
  margin-top: 5px;
  margin-left: -3px;
}

.window {
  height: auto;
  position: absolute;

}

.donutweb {
  color: #040519;
  height: calc(100% - 117px);
  width: calc(100% - 4);
  overflow-y: scroll;
  margin-top: 80px;
  font-family: "Ithaca";
  filter: url(#crispify);
  font-size: 16px;
  padding: 2px;
  scrollbar-color: #F36150 #FD8E82 ;
}


.windowcornertl {
  height: 30px;
  width: 13px;
  background-image: url(/images/newlayout/window/corner-tl.png);
  float: left;
}  

.windowtop {
  height: 30px;
  width: calc(100% - 30px);
  margin-left: 13px;
  background-image: url(/images/newlayout/window/top.png);
  background-repeat: repeat;

  position: relative;
}  


.windowcornertr {
  height: 30px;
  width: 17px;
  background-image: url(/images/newlayout/window/corner-tr.png);
  float: right;
  margin-top: -30px;
}  


.windowbuttoncontainer {
  display: flex;
  flex-direction: row;
  height: 16px;
  width: 49px;
  float: right;
  position: relative;
  top: 5px;
  left: 5px; 
}

.minimize {
  width: 15px;
  height: 16px;
  background-image: url(/images/newlayout/window/buttons/minimize.png) 
}
.minimize:hover {
  background-image: url(/images/newlayout/window/buttons/minimize_hover.png) 
}
.minimize:active {
  background-image: url(/images/newlayout/window/buttons/minimize_press.png) 
}


.fscreen {
  width: 16px;
  height: 16px;
  background-image: url(/images/newlayout/window/buttons/fscreen.png) 
}
.fscreen:hover {
  background-image: url(/images/newlayout/window/buttons/fscreen_hover.png) 
}
.fscreen:active {
  background-image: url(/images/newlayout/window/buttons/fscreen_press.png) 
}

.x {
  width: 16px;
  height: 16px;
  background-image: url(/images/newlayout/window/buttons/x.png);
  margin-left: 2px;
}
.x:hover {
  background-image: url(/images/newlayout/window/buttons/x_hover.png) 
}
.x:active {
  background-image: url(/images/newlayout/window/buttons/x_press.png) 
}

.windowrow {
  height: auto;
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 17px
}



.left0 {
  width: 13px;
  position: relative;
}  
.left1 {
  width: 13px;
  height: 32%;
  position: absolute;
  background-image: url(/images/newlayout/window/left1.png);
}  
.left2 {
  position: absolute;
  width: 13px;
  height: 14%;
  top: 32%;
  background-image: url(/images/newlayout/window/left2.png);
  background-repeat: repeat-y;
}  
.left3 {
  position: absolute;
  width: 13px;
  height: 10%;
  top: 46%;
  background-image: url(/images/newlayout/window/left3.png);
  background-repeat: repeat-y;
}  
.left4 {
  position: absolute;
  width: 13px;
  height: 12%;
  top: 56%;
  background-image: url(/images/newlayout/window/left4.png);
  background-repeat: repeat-y;
}  
.left5 {
  position: absolute;
  width: 13px;
  height: 8%;
  top: 68%;
  background-image: url(/images/newlayout/window/left5.png);
  background-repeat: repeat-y;
}  
.left6 {
  position: absolute;
  width: 13px;
  height: 7%;
  top: 75%;
  background-image: url(/images/newlayout/window/left6.png);
  background-repeat: repeat-y;
}  
.left7 {
  position: absolute;
  width: 13px;
  height: 5%;
  top: 82%;
  background-image: url(/images/newlayout/window/left7.png);
  background-repeat: repeat-y;
}  
.left8 {
  position: absolute;
  width: 13px;
  height: 5%;
  top: 87%;
  background-image: url(/images/newlayout/window/left8.png);
  background-repeat: repeat-y;
}  
.left9 {
  position: absolute;
  width: 13px;
  height: 8%;
  top: 92%;
  background-image: url(/images/newlayout/window/left9.png);
  background-repeat: repeat-y;
}  



.windowinside {
  width: calc(100% - 30px);
  height: calc(100% + 17px);
  display: flex;
  flex-direction: column;
}








.right0 {
  width: 17px;
  position: relative;
  background-image: url(/images/newlayout/window/shadow.png);
  float: right;
}  
.right1 {
  position: absolute;
  width: 13px;
  height: 32%;
  background-image: url(/images/newlayout/window/right1.png);
  background-repeat: repeat-y;
}  
.right2 {
  position: absolute;
  width: 13px;
  height: 14%;
  top: 32%;
  background-image: url(/images/newlayout/window/right2.png);
  background-repeat: repeat-y;
}  
.right3 {
  position: absolute;
  width: 13px;
  height: 10%;
  top: 46%;
  background-image: url(/images/newlayout/window/right3.png);
  background-repeat: repeat-y;
}  
.right4 {
  position: absolute;
  width: 13px;
  height: 12%;
  top: 56%;
  background-image: url(/images/newlayout/window/right4.png);
  background-repeat: repeat-y;
}  
.right5 {
  position: absolute;
  width: 13px;
  height: 8%;
  top: 68%;
  background-image: url(/images/newlayout/window/right5.png);
  background-repeat: repeat-y;
}  
.right6 {
  position: absolute;
  width: 13px;
  height: 7%;
  top: 75%;
  background-image: url(/images/newlayout/window/right6.png);
  background-repeat: repeat-y;
}  
.right7 {
  position: absolute;
  width: 13px;
  height: 5%;
  top: 82%;
  background-image: url(/images/newlayout/window/right7.png);
  background-repeat: repeat-y;
}  
.right8 {
  position: absolute;
  width: 13px;
  height: 5%;
  top: 87%;
  background-image: url(/images/newlayout/window/right8.png);
  background-repeat: repeat-y;
}  
.right9 {
  position: absolute;
  width: 13px;
  height: 8%;
  top: 92%;
  background-image: url(/images/newlayout/window/right9.png);
  background-repeat: repeat-y;
}  


.windowcornerbl {
  height: 17px;
  width: 13px;
  background-image: url(/images/newlayout/window/corner-bl.png);
  float: left;
  position: absolute;
  bottom: 0;
  left: 0;
}  

.windowbottom {
  height: 17px;
  width: calc(100% - 30px);
  background-image: url(/images/newlayout/window/bottom.png);
  background-repeat: repeat;
  position: absolute;
  bottom: 0;
}  


.windowcornerbr {
  height: 17px;
  width: 17px;
  background-image: url(/images/newlayout/window/corner-br.png);
  position: absolute;
  bottom: 0;
  right: 0;
}  




.crispy {
  filter: url(#crispify);
}

.offscreen {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}