*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    /*width:100 vw;
    height: 100vh;
    position: absolute;*/
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
#canvas1
{
    /*width: 720px;
    height:592px;
    position:absolute;
    top:84px;
    left:288px;*/
    border: 1px solid #FFCC33;
    position:absolute;
    top:10.9%;
    left:28%;
    width: 70%;
}

/*#canvas2
{
    /*width: 250px;
    height:593px;
    /*border: 3px solid black;
    position:absolute;
    top:84px;
    left:25px;*/
    /*height: 75vmin;
    width: 100vmin;*/
    /*border: 3px solid black;
}*/

#canvas3
{
    width: 60vmin;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

#canvas4
{
    height: 100%;
    position: absolute;
    z-index: 1;
    background-color: rgba(255,255,255,.7);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}


/*M1 ex1*/
div.p1{
font-family: "Verdana";
font-size: 1.5vmin;
position:absolute;
left: 31%;
top: 17.5%;
width: 62%;
color:darkblue;
}


/*M1 ex2*/
div.sus{
    font-family: "Verdana";
    font-size: 1.5vmin;
    position:absolute;
    left: 31%;
    top: 25%;
    width: 60%;
    color:darkblue;
    }

div.op{
    font-family: "Verdana";
    font-size: 1.5vmin;
    position:absolute;
    left: 53%;
    top: 45%;
    color:darkblue;

}
div.raspuns{
    font-family: "Verdana";
    font-size: 1.5vmin;
    position:absolute;
    left: 35%;
    top: 68%;
    color:darkblue;
    }

input[type=text12]
{
    width: 20vmin;
    height: 3vmin;
    position: absolute;
    font-size: 2vmin;
    top: 67.5%;
    left:43%;
    background-color: #aadbaa;
    border: none;
    text-transform: uppercase;
}

/*M1 ex3*/
div.op3{
    font-family: "Verdana";
    font-size: 1.6vmin;
    position:absolute;
    left: 36%;
    top: 33.5%;
    width: 55%;
    color:darkblue;

}

div.sus3{
    font-family: "Verdana";
    font-size: 1.55vmin;
    position:absolute;
    left: 32%;
    top: 25.7%;
    width: 57%;
    color:darkblue;
    }

/*M2 ex1*/

div.cod21{
    font-family: "Courier New";
    font-weight: bold;
    color: darkblue;
    font-size: 1.7vmin;
    position: absolute;
    left:52%;
    top:70%;
}

div.explicatie21{
font-family: "Verdana";
font-size: 1.5vmin;
position:absolute;
left: 31%;
top: 16%;
width: 60%;
color:darkblue;
}

/*M2 ex2*/

div.cod22{
    font-family: "Courier New";
    font-weight: bold;
    color: darkblue;
    font-size: 1.7vmin;
    position: absolute;
    left:52%;
    top:70%;
}

div.explicatie22{
    font-family: "Verdana";
    font-size: 1.5vmin;
    position:absolute;
    left: 31%;
    top: 16%;
    width: 60%;
    color:darkblue;
}
/*M3 ex1*/
div.actiune1{
    position: absolute;
    left: 85%;
    top:25%;
}
div.actiune2{
    position: absolute;
    left: 85%;
    top:35%;
}

div.actiune3{
    position: absolute;
    left: 85%;
    top:45%;
}

div.actiune4{
    position: absolute;
    left: 85%;
    top:55%;
}

/*M3 ex2*/
div.harta{
    position: absolute;
    top:10.9%;
    left:28%;
    transform: translate(-50%,-50%);
}
div.harta1{
    position: absolute;
    top:10.9%;
    left:50%;
    transform: translate(-50%,-50%);
}
div.F{
    position: absolute;
    top:10.9%;
    left:28%;
    visibility: hidden;
    font-size: 1.65vmin;
   
}
div.explicatie32{
    font-family: "Verdana";
    font-size: 1.4vmin;
    position:absolute;
    left: 31%;
    top: 16%;
    width: 56%;
    color:darkblue;
}


/*M4 ex1*/
div.p41{
font-family: "Verdana";
font-size: 1.5vmin;
position:absolute;
color:darkblue;
left: 31%;
top: 15%;
width: 61%;
}

/*M4 ex2*/
div.p42{
    font-family: "Verdana";
    font-size: 1.5vmin;
    position:absolute;
    color:darkblue;
    left: 31%;
    top: 15%;
    width: 60%;
    }
    
    input[type=text42] {
        width: 25px;
        height: 25px;
        border: 1px solid darkblue;
        background-color: transparent;
      }
    
    div.matrice{
        position:absolute;
        left: 690px;
        top: 255px;
        margin-right: 440px;
    }
/*M5 ex1*/
div.p51{
    font-family: "Verdana";
    width: 61%;
    font-size: 1.5vmin;
    position:absolute;
    left: 31%;
    top: 22%;
    color:darkblue;
    }

div.cod51{
        font-family: "Courier New";
        font-weight: bold;
        color: darkblue;
        font-size: 2.3vmin;
        line-height: 3.6vmin;
        position: absolute;
        left:62%;
        top:45%;
    
    }

/*M5 ex2*/
div.directie{
    position: absolute;
    top:10.9%;
    left:28%;
    transform: translate(-50%,-50%);
}
div.sus52{
font-family: "Verdana";
width: 58%;
font-size: 1.5vmin;
position:absolute;
left: 31%;
top: 24%;
color:darkblue;
}

div.cod521{
    font-family: "Courier New";
    font-weight: bold;
    color: darkblue;
    font-size: 2vmin;
    position: absolute;
    left:57.5%;
    top:39%;
}


div.cod522{
    font-family: "Courier New";
    font-weight: bold;
    color: darkblue;
    font-size: 2vmin;
    position: absolute;
    left:57.5%;
    top:43%;
}

input[type=text52] {
    width: 2.1vmin;
    height: 2.1vmin;
    box-sizing: border-box;
    margin-right: 0%;
  }

div.chenareDL{
    position:absolute;
    left: 67.7%;
    top: 38.99%;
}

div.chenareDC{
    position:absolute;
    left: 67.7%;
    top: 42.79%;
}

/*M7 ex1*/
/*M3 ex1*/
div.actiune17{
    position: absolute;
    left: 42%;
    top:15%;
}
div.actiune27{
    position: absolute;
    left: 42%;
    top:25%;
}

div.actiune37{
    position: absolute;
    left: 42%;
    top:35%;
}

div.actiune47{
    position: absolute;
    left: 42%;
    top:45%;
}


/*M8 ex1*/
div.anunt{
    font-size:2.18vmin;
    font-family: "Verdana";
    color:darkgreen;
    position: absolute;
    top:15%;
    left: 9%;
    margin-right: 9%;
}
div.tabel_titlu
{
   color:darkolivegreen;
   font-size: 2.1vmin;
   font-family: "Verdana";
   font-weight: bold;
}

div.probleme{
    color:darkgreen;
    font-size: 1.9vmin;
    font-family: "Verdana";
}

div.redus{
    position: absolute;
    padding-top: 3vmin;
    padding-bottom: 3vmin;
    padding-right: 3vmin;
    top: 26%;
    left: 8.5%;
    line-height: 4vmin;
    width: 25%;
    text-align: center;
    border-right: 0.5vmin solid darkgreen;
}

div.mediu{
    position: absolute;
    padding-top: 3vmin;
    padding-bottom: 3vmin;
    padding-right: 3vmin;
    top: 26%;
    left: 37.5%;
    line-height: 4vmin;
    width: 25%;
    text-align: center;
    border-right: 0.5vmin solid darkgreen;
}

div.dificil{
    position: absolute;
    padding-top: 3vmin;
    padding-bottom: 3vmin;
    top: 26%;
    left: 66.5%;
    line-height: 4vmin;
    width: 25%;
    text-align: center;
    
}

/*TEORIE*/
div.normal{
    font-family: "Verdana";
    font-size: 1.6vmin;
    position: absolute;
    left:0px;
    top:0px;
    margin-top: 8.3%;
    /*margin-bottom: 500px;
    margin-right: 1170px;*/
    width: 25%;
    /*height: 76%;*/
    margin-left: 1.2%;
    color:darkblue;
    line-height: 1.85vmin;
}



.TITLU{
    color:#FFCC33;
    font-family: Arial;
    font-size: 22px;
    position:absolute;
    font-weight: bold;
    left:80px;
    top:12px;
}

.cuvcheie {

	color:#006600;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;

}

.subtitlu {
	color:#006600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:2vmin;
	font-weight:bold;
}

.subtlt{
	color:#006600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
}

.evid{
	color:#006600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

a {
	font-size:2.18vmin;
    font-family: "Verdana";
    color:darkgreen;
    
}

.cod {

	font-weight: bold;
	font-family: Courier New;

}


div.obiective{
    font-family: "Verdana";
    font-size: 1.6vmin;
    position: absolute;
    left:32%;
    top:40%;
    width: 38%;
    color:darkblue;
    z-index: 2;
}
ul.lista{
    padding: 1vmin 0 0vmin 6vmin;
	list-style: none;
	background-image: url('../imagini/branza.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 4.8vmin;
}