@import url("https://fonts.googleapis.com/css?family=Rubik:500,700,400");

html
{
  -webkit-tap-highlight-color:transparent;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#info_help_popup{
    display: none; 
    position: absolute; 
    background-color: #333; 
    color: white; 
    padding: 5px; 
    border-radius: 3px; 
    font-size: 12px;
}

#body{
    width: 100%;
    height: 100%;

    overflow-x: hidden;
    overflow-y: hidden;
    background: #F8F3F3;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


#elements {
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible; /* Prevents clipping */
    will-change: transform;

}
#grids {
    position: absolute;
    overflow: visible;
    z-index: 0;  /* This will be the background canvas */

}
#ladders {
    position: absolute;
    overflow: visible;
    z-index: 0;  /* This will be the background canvas */

}
#paint{
    position: absolute;

    cursor: auto;
    overflow: visible;
    z-index: 1;
}
#paintTemp{
    position: absolute;

    cursor: auto;
    overflow: visible;
    z-index: 1;
}
#paths{
    position: absolute;
    overflow: visible;

}
#windarrow{
    position: absolute;
    top: 2%;
    left: 48%;
    width: 40px;
    height: 50px;
    flex-shrink: 0;
    user-select: none;
    z-index: 10;  /* This will be the background canvas */

}
#TimeBar{
    position:absolute;
    top: 0.5%;
    left: 0.5%;
    width: 320px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 0.7vw;
    background: #FFF;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.12);
    user-select: none;
    overflow-x: hidden;
    display: none;
}
#TimeBar::-webkit-scrollbar {
    display: none;
  }
#clock{
    position: relative;
    top: 15%;
    left: 4%;
    width: 110px;
    height: 70%;
    border-radius: 0.6vw;
    background: #212F52;
    box-shadow: 8px 8px 4px 0px rgba(0, 0, 0, 0.18) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #888484;
    text-align: center;
    font-family: Rubik;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.time{
    background-color: transparent; 
    border: none;
    width: 100%;
    color: #888484;
    text-align: center;
    font-family: Rubik;
    font-size: 30px;
    font-style: inhert;
    font-weight: 700;
    padding: 0;
    outline: none;
    margin-right: none;
    user-select: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  display: none;
}
#rewind{
    position: absolute;
    left: 43%;
    top: 38%;
    width: 50px;
    flex-shrink: 0;
    user-select: none;
}
#play{
    position: relative;
    left: 62%;
    top: -45%;
    width: 50px;
    flex-shrink: 0;
    user-select: none;
}
#forward{
    position: relative;
    left: 64%;
    top: -58%;
    width: 50px;
    flex-shrink: 0;
    user-select: none;
}
@media print {
  img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

#NavBar {
    position: absolute;
    left: 5px;
    margin-top: 10%;
    width: 75px;
    height: fit-content;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.14);
    scale: 0.9;
    user-select: none;

    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align from top */
    align-items: center;         /* Center items horizontally */
    gap: 10px;                   /* Adjust spacing between items */
    padding-top: 20px;
    padding-bottom: 20px;
}
#NavBar .btn {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn:hover{
    opacity: 0.8;
}
.btn:active{
    scale: 0.9;
}
#menuboat{
    width: 50px;
    height: 50px;
}
#menumark{
    width: 40px;
    height: 40px;
}
#menucomm{
    width: 50px;
    height: 50px;
}
#menudraw{
    width: 65px;
    height: 65px;
}
#menuclear{
    width: 35px;
    height: 35px;
}
#undo-redo {
    display: flex;
    margin-top: 10px;
    gap: 8px; /* Optional: adds space between the buttons */
    align-items: center;
    flex-shrink: 0;
}
#undo-redo img {
    width: 26px;
    height: 26px;
    
}
#menuclear:active{
    scale:0.5;
}
/* #menuoptions{
    position: relative;
    left: 20%;
    top: -83%;
    width: 2.5vw;
    height: 8vw;
    flex-shrink: 0;
} */

#logo{
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 110px;
    height: 75px;
    border-radius: 0.6vw;
    background: url("../images/logos/LogoTitleCropped.png"), lightgray 50% / cover no-repeat;
    box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.12);
    background-size: cover;
}
#logo:hover{
    scale: 1.05;
}

#enrollment{
  position: absolute;
  bottom: 88px;
  left: 5px;  
}
.enroll_type{
    font-family: Rubik;
    font-size: 15px;
    font-weight: 800;
    padding: 10px 10px;
 
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#premium{
   background-color: #FFD700;
   color: #293144;
}
#free{
   background-color: #0677BB;
   color: white;
}
#not_logged_in{
   background-color: #0677BB;
   color: white;
}
.hidden{
    display: none;
}
#multiplayer{
    position: absolute;
    top:0.5%;
    right: 0.25%;
    width: 12.7vw;
    height: 80%;
    user-select: none;
    z-index: 100;
}
#code{
    width: 12.7vw;
    height:6vh;
    flex-shrink: 0;
    border-radius: 0.6vw;
    background: #212F52;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.12);

    color: #FFF;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
    font-family: Rubik;
    font-size: 3.5vh;
    font-style: normal;
    font-weight: 400;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;

}
#players{
    position: absolute;
    top: 3.8vw;
    right: 4%;
    overflow-x: hidden;
    overflow-y: auto;
    height: fit-content;
    width: fit-content;
    max-height: 100%;
    max-width: 90%;
    flex-shrink: 0;
    border-radius: 0.5vw;
    background: #FFF;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.12);
    padding-bottom: 2%;
    margin-right: -2%;
    z-index: 100;

}
.player{
    margin-left: 0.5vw;
    margin-top: 0.6vw;
    margin-bottom: -1.8vw; 
    width: 2vw;
    height: 2vw;
    flex-shrink: 0;
    border-radius: 0.3vw;
    background: #4F9CCC;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.14);
    color: #FFF;
    font-family: Rubik;
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 500;
    line-height: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    scale: 0.8;

}
.playertext{
    color: #212F52;
    font-family: Rubik;
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    position: relative;
    align-items: center;
    margin-right: 80px;
    top: -0vw;
    left: 2.5vw;
    text-overflow: hidden;
    scale: 0.8;
    white-space: nowrap;
    margin-bottom: 10px;
}

#screenrecord{
    position: absolute;
    right: 0.25%;
    bottom: 1%;
    width: 5vw;
    height: 5vh;
    flex-shrink: 0;
    border-radius: 0.4vw;
    background: #0677BB;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.12);
    user-select: none;

    color: #FFF;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Rubik;
    font-size: 1vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
}

#screenshot{
    position: absolute;
    right: 6%;
    bottom: 1%;
    width: 5vw;
    height: 5vh;
    flex-shrink: 0;
    border-radius: 0.4vw;
    background: #0677BB;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.12);
    user-select: none;

    color: #FFF;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Rubik;
    font-size: 1vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
}

#help_btn{
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 75px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 0.4vw;
    background: #0677BB;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.12);
    user-select: none;

    color: #FFF;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Rubik;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
}
#help_btn:hover{
    background: #044369;
}
#help_btn:active{
    scale: 1.05;
}

/* Zoom and Pan Controls */
#zoom-pan-controls {
    position: absolute;
    right: 6px;
    bottom: 65px; /* Position above the help button */
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1000;
}

.zoom-pan-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 0.4vw;
    background: #293144;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.zoom-pan-btn:hover {
    background: #1a1f2b;
}

.zoom-pan-btn:active {
    transform: scale(1.05);
}

.zoom-pan-btn.active {
    background: #0677BB;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
}

.zoom-pan-btn.active:hover {
    background: #044369;
}

#info_btn{
    position: absolute;
    right: 90px;
    bottom: 11px;
    border-radius: 50%;
    font-family: Rubik;
    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.12);

    font-size: 20px;
    font-weight: 500;
    font-style: italic; 
    text-align: center;
    line-height: 1; 
    color: #FFF;
    display: flex;
    justify-content: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    align-items: center;
    font-style: normal;
    width: 40px;
    height: 40px;
    background: #212F52;
    user-select: none;
}
#info_btn:hover{
    scale: 1.05;
}
#info_btn:active{
    scale: 0.95;
}


#settings{
    display: none;
    position: absolute;
    top: 103%;
    width: 27vw;
    height: 17vh;
    border-radius: 15px;
    background: #FFF;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.14);

    color: #212F52;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.14);
    font-family: Rubik;
    font-size: 1.2vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    z-index: 1;
}
#settings .checkbox-text{
    margin-left: 12%;
    display:inline-block;
    position: relative;
    top: -1.26vw;
    width: fit-content;
    margin-bottom: -3%;
}
#settings .checkbox{
    display: none;
}
#settings .checkbox + label{
    margin-left: 4%;
    margin-top: 3%;
    width: 1vw;
    height: 1vw;
    flex-shrink: 0;    
    display:inline-block;
    padding: 0 0 0 0px;
    border-radius: 3px;
    border: 1px solid #C4C4C4;
    background: rgba(217, 217, 217, 0.35);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
}
#settings .checkbox:checked + label{
    background:url('../images/whiteboard/check.svg') no-repeat;
    background-size: contain;
    background-position-x: 26.5%;
    background-position-y: 0.082vw;
    display:inline-block;
    padding: 0 0 0 0px;
}
#checkboxes{
    display: flex;
    flex-direction: column;
}
#line{
    position: absolute;
    left: 50%;
    top: 0%;
    width: 0.1vw;
    height: 100%;
    background: #C4C4C4;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.14);
}
#inputs{
    position: absolute;
    top: 8%;
    left: 54%;
}
.settingsinput{
    width: 1.9vw;
    height: 1.2vw;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid #C4C4C4;
    background: rgba(217, 217, 217, 0.35);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);

    color: rgba(93, 94, 97, 0.80);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.14);
    font-family: Rubik;
    font-size: 1vw;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    margin-bottom: 8%;
}

#spritemenu{
    display: none;
    position: absolute;
    z-index: 200;
    user-select: none;
}
#spritemenu .spritebackground{
    width: 100px;
    height: 200px;
    flex-shrink: 0;
    fill: #FFF;
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.12));
}
#spritemenu .delete{
    position: absolute;
    top: 46px;
    left: 15px;
    width: fit-content;
    padding: 0 10px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 5px;
    background: #212F52;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.14);

    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
}
#spritemenu .delete:hover{
    background: #525760;
}
#spritemenu .mark_circle{
    position: absolute;
    top: 122px;
    left: 18px;
    width: 65px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 5px;
    background: #212F52;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.14);

    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
}
#spritemenu .mark_circle:hover{
    background: #525760;
}
#spritemenu .mark_laylines{
    position: absolute;
    top: 152px;
    left: 18px;
    width: 65px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 5px;
    background: #212F52;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.14);

    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
}
#spritemenu .mark_laylines:hover{
    background: #525760;
}
#spritemenu .overlap_option{
    position: absolute;
    top: 122px;
    left: 10px;
    width: fit-content;
    padding: 0 10px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 5px;
    background: #212F52;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.14);

    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
}
#spritemenu .overlap_option:hover{
    background: #525760;
}
#spritemenu .line{
    position: absolute;
    left: 3px;
    width: 94px;
    height: 0.15vw;
    background: #C4C4C4;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}
#spritemenu .colorblock{
    position: absolute;
    top: 84px;
    left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 10%;
    background: #EF4A4A;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
}
#spritemenu .colorblock:hover{
    scale: 1.2;
}
#spritemenu .colortext{
    position: absolute;
    top: 82px;
    left: 40px;
    color: #212F52;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.14);
    font-family: Rubik;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 1; /* Set line-height to 1 */
    display: flex;
    justify-content: center;
    align-items: center;
}
#spritemenu #line1{
    top: 75px;
}
#spritemenu #line2{
    top: 110px;
}
#colorpick{
    display:none;
}
.colorpickerbackground{
    position: absolute;
    width: 165px;
    left: -140px;
    top: 67px;
}
.smallcolorblock{
    position: absolute;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 10%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
}
.smallcolorblock:hover{
    scale: 1.1;
}
.top_colors{
    top: 72px;
}
.bot_colors{
    top: 98px;
}
.col_1{
    left: -130px;
}
.col_2{
    left: -105px;
}
.col_3{
    left: -80px;
}
.col_4{
    left: -55px;
}
.col_5{
    left: -30px;
}
#color1{
    position: absolute;
    
    background: #0677BB;
}
#color2{
    position: absolute;
    background: #EB0202;
}
#color3{
    position: absolute;
    background: #22B81F;
}
#color4{
    position: absolute;
    background: #F3F800;
}
#color5{
    position: absolute;
    background: #9747FF;
}
#color6{
    position: absolute;
    background: #FF5C00;
}
#color7{
    position: absolute;
    background: #FC4A9F;
}
#color8{
    position: absolute;
    background: #004F80;
}
#color9{
    position: absolute;
    background: #ffffff;
}
#color10{
    position: absolute;
    background: #4AE5EF;
}
#circle{
    transform: 0px 0px;
}
 #login-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #login-popup {
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    width: 300px;
    font-family: Rubik;
  }

  #login-popup button {
    padding: 8px 16px;
    border-radius: 6px;
    background: #0677BB;
    color: white;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    font-family: Rubik;

  }

  #premium-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #premium-popup {
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    width: 300px;
    font-family: Rubik;
  }

  #premium-popup button {
    padding: 8px 16px;
    border-radius: 6px;
    background: #0677BB;
    color: white;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    font-family: Rubik;

  }


.sail-angle-container {
position: absolute;
top: 160px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.9);
justify-content: center;
transition: opacity 0.3s ease;
max-width: 200px;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding-left: 20px;
font-family: Rubik;
}

.sail-angle-container.disabled {
background: rgba(255, 255, 255, 0.5);
}

.sail-angle-container.disabled .slider {
opacity: 0.5;
}

.sail-angle-container label {
font-size: 12px;
font-weight: bold;
color: #333;
min-width: 25px;
opacity: 1;
}

.sail-angle-select {
padding: 2px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
font-size: 12px;
width: 55px;
opacity: 1;
font-family: Rubik;

}

.sail-angle-select:disabled {
opacity: 1;
background: #fff;
color: #333;
}

.sail-angle-container .slider {
-webkit-appearance: none;
appearance: none;
width: 80px;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
transition: opacity 0.3s ease;
}

.sail-angle-container .slider:disabled {
cursor: not-allowed;
}

.sail-angle-container .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #004F80;
cursor: pointer;
transition: background 0.3s ease;
}

.sail-angle-container .slider:disabled::-webkit-slider-thumb {
background: #999;
cursor: not-allowed;
}

.sail-angle-container .slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #004F80;
cursor: pointer;
transition: background 0.3s ease;
}

.sail-angle-container .slider:disabled::-moz-range-thumb {
background: #999;
cursor: not-allowed;
}

#sail-angle-value {
min-width: 45px;
text-align: center;
font-size: 14px;
color: #333;
}


@media print {

    /* Set page size and margins */
    @page {
        
        margin: 0; /* Set margins to zero */
    }


}