@media (orientation: Portrait), not (min-width: 720px) {
    :root{
        --TF0-font-size-1:          min(3vh, 2.5vw);  
        --TF0-font-size-2:          calc(var(--TF0-font-size-1) / 2);   
        --TF0-font-size-3:          calc(var(--TF0-font-size-1) * 2 / 3);   
        --TF0-font-size-4:          calc(var(--TF0-font-size-1) / 4);  

        --TF0-border-radius:        var(--TF0-font-size-2);

        --TF0-input_000-font-size:  var(--TF0-font-size-1);
        --TF0-input_000-padding:    calc(var(--TF0-font-size-1) / 6);
        --TF0-input_000-margin:     var(--TF0-font-size-1) 0px;

        --TF0-p_000-font-size:      var(--TF0-font-size-3);

        --TF0-div_000-width:        90%;
        --TF0-div_000-padding:      0px var(--TF0-font-size-2);
        --TF0-div_000-margin:       0px 5% var(--TF0-font-size-2) 5%;

        --TF0-div_001-width:        90%;
        --TF0-div_001-padding:      0px var(--TF0-input_002-width) 0px 0px;
        --TF0-div_001-margin:       0px 5% var(--TF0-font-size-2) 5%;

        --TF0-input_001-font-size:  var(--TF0-font-size-1);
        --TF0-input_001-width:      30%;
        --TF0-input_001-padding:    var(--TF0-font-size-2);
        --TF0-input_001-margin:     0px 35% var(--TF0-font-size-2) 35%;

        --TF0-input_002-width:      min(6vh, 5vw);
        --TF0-input_002-height:     var(--TF0-input_002-width);

        --TF0-input_003-font-size:  var(--TF0-font-size-1);
        --TF0-input_003-width:      90%;
        --TF0-input_003-padding:    calc(var(--TF0-font-size-1) / 2);
        --TF0-input_003-margin:     0px 5% var(--TF0-font-size-2) 5%;

        --TF0-div_B00-height:       min(4vh, 3vw);
        --TF0-div_B00-width:        var(--TF0-div_B00-height);
        --TF0-div_B00-margin:       var(--TF0-font-size-2) 0px;

        --TF0-span_000-font-size:   var(--TF0-font-size-1);
        --TF0-span_000-margin:      var(--TF0-font-size-2) 0px;
        --TF0-span_000-padding:     var(--TF0-font-size-2);

        --TF0-border-size:          min(0.75vh, 0.75vw);
    }
}

@media (min-width: 720px) and (orientation: Landscape){
    :root{
        --TF0-font-size-1:          min(calc(2vh + 5px), calc(2vw + 5px));  
        --TF0-font-size-2:          calc(var(--TF0-font-size-1) / 2);   
        --TF0-font-size-3:          calc(var(--TF0-font-size-1) * 2 / 3);  
        --TF0-font-size-4:          calc(var(--TF0-font-size-1) / 4);  

        --TF0-border-radius:        var(--TF0-font-size-2);

        --TF0-input_000-font-size:  var(--TF0-font-size-1);
        --TF0-input_000-padding:    calc(var(--TF0-font-size-1) / 6);
        --TF0-input_000-margin:     var(--TF0-font-size-1) 0px;

        --TF0-p_000-font-size:      var(--TF0-font-size-3);

        --TF0-div_000-width:        80%;
        --TF0-div_000-padding:      0px var(--TF0-font-size-2);
        --TF0-div_000-margin:       0px 10% var(--TF0-font-size-2) 10%;

        --TF0-div_001-width:        90%;
        --TF0-div_001-padding:      0px var(--TF0-input_002-width) 0px 0px;
        --TF0-div_001-margin:       0 5% var(--TF0-font-size-2) 5%;

        --TF0-input_001-font-size:  var(--TF0-font-size-1);
        --TF0-input_001-width:      30%;
        --TF0-input_001-padding:    var(--TF0-font-size-2);
        --TF0-input_001-margin:     0 35% var(--TF0-font-size-1) 35%;

        --TF0-input_002-width:      min(6vh, 8vw);
        --TF0-input_002-height:     var(--TF0-input_002-width);

        --TF0-input_003-font-size:  var(--TF0-font-size-1);
        --TF0-input_003-width:      80%;
        --TF0-input_003-padding:    var(--TF0-font-size-1);
        --TF0-input_003-margin:     0 10% var(--TF0-font-size-2) 10%;

        --TF0-div_B00-height:       min(calc(4vh + 5px), calc(4vw + 5px));
        --TF0-div_B00-width:        var(--TF0-div_B00-height);
        --TF0-div_B00-margin:       var(--TF0-font-size-2) 0px;

        --TF0-span_000-font-size:   var(--TF0-font-size-1);
        --TF0-span_000-margin:      var(--TF0-font-size-1) 0px;
        --TF0-span_000-padding:     var(--TF0-font-size-2);

        --TF0-border-size:          min(0.75vh, 0.75vw);
    }
}


.TF0-div_C00 {
    height:             100%;
    width:              40%;
    display:            inline-block;
    position:           relative;
    vertical-align:     middle;
}

.TF0-div_C01 {
    height:             100%;
    width:              60%;
    display:            inline-block;
    position:           relative;
    vertical-align:     middle;
}

.TF0-div_C02 {
    height:             100%;
    width:              100%;
    display:            inline-block;
    position:           relative;
    vertical-align:     middle;
}

.TF0-div_C03 {
    position:           relative;
    padding:            var(--TF0-font-size-2);
}

.TF0-div_C04 {
    position:           relative;
    padding:            var(--TF0-font-size-1);
}

.TF0-div_C05 {
    position:           relative;
    padding:            var(--TF0-font-size-1);
    padding-bottom:     0;
}

.TF0-input_000 {
    font-size:          var(--TF0-input_000-font-size);
    color:              #3d5b7b;
    padding:            var(--TF0-input_000-padding);
    border-radius:      var( --TF0-border-radius);
    background-color:   #d3e4f7;
    text-align:         center;
    display:            inline-block;
    font-family:        "OpenSans-Medium";
    width:              100%;
}

.TF0-input_000.uncorrect {
    background-color:   #f7d3d3;
    color:              #7b3d3d;
}

.TF0-input_000.waiting {
    background-color:   #f7f2d3;
    color:              #7b753d;
}

.TF0-input_000.correct {
    background-color:   #d7f7d3;
    color:              #3d7b4a;
}

.TF0-input_001 {
    font-size:          var(--TF0-input_001-font-size);
    color:              #7189a4;
    width:              var(--TF0-input_001-width);
    margin:             var(--TF0-input_001-margin);
    padding:            var(--TF0-input_001-padding);
    background-color:   white;
    border-radius:      var(--TF0-border-radius);
    transition:         background-color 0.25s;
    text-align:         center;
    font-family:        "Montserrat-Medium";
}

.TF0-input_001:hover {
    background-color:   #d3e4f7;
}

.TF0-input_002 {
    position:           absolute;
    right:              calc(0px - var(--TF0-input_002-width) / 2);
    top:                calc(50% - var(--TF0-input_002-height) / 2);
    background:         white;
    transition:         background-color 0.25s;
    height:             var(--TF0-input_002-height);
    width:              var(--TF0-input_002-width);
    border-radius:      var(--TF0-border-radius);
    border:             var(--TF0-border-size) solid #90b5b9;
}

.TF0-input_002:hover {
    background-color:   #d3e4f7;
}

.TF0-input_003 {
    font-size:          var(--TF0-input_003-font-size);
    color:              #7189a4;
    width:              var(--TF0-input_003-width);
    margin:             var(--TF0-input_003-margin);
    padding:            var(--TF0-input_003-padding);
    background-color:   white;
    border-radius:      var(--TF0-border-radius);
    transition:         background-color 0.25s;
    text-align:         center;
    font-family:        "Montserrat-Medium";
}

.TF0-input_003:hover {
    background-color:   #d3e4f7;
}

.TF0-input_004 {
    opacity:            0;
    visibility:         hidden;
    position:           absolute;
}

.TF0-span_000 {
    font-size:          var(--TF0-span_000-font-size);
    padding:            var(--TF0-span_000-padding);
    color:              #7189a4;
    background-color:   white;
    transition:         background-color 0.25s;
    border-radius:      var(--TF0-border-radius);
    text-align:         center;
    font-family:        "Montserrat-Medium";
    display:            block;
}

.TF0-span_000:hover {
    background-color:   #d3e4f7;
}

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

.TF0-h1_000 {
    font-size:          var(--TF0-input_000-font-size);
    color:              #7189a4;
    text-align:         left;
    font-family:        "OpenSans-Regular";
    width:              100%;
}



.TF0-h1_001 {
    font-size:          var(--TF0-input_000-font-size);
    color:              #7189a4;
    text-align:         center;
    font-family:        "OpenSans-Regular";
    width:               100%;
}


.TF0-p_000 {
    font-size:          var(--TF0-p_000-font-size);
    color:              #737eac;
    text-align:         center;
    width:              100%;
    font-family:        "OpenSans-Medium";
    right:              0px;
    top:                0px;
}

.TF0-p_000.uncorrect {
    color:              #d35959;
}

.TF0-p_000.waiting {
    color:              #d3c759;
}

.TF0-p_000.correct {
    color:              #737eac;
}

.TF0-div_000 {
    position:           relative;
    width:              var(--TF0-div_000-width);
    margin:             var(--TF0-div_000-margin);
    background-color:   white;
    border-radius:      var(--TF0-border-radius);
}

.TF0-div_001 {
    position:           relative;
    width:              var(--TF0-div_001-width);
    margin:             var(--TF0-div_001-margin);
    padding:            var(--TF0-div_001-padding);
    text-align:         right;
    background-color:   white;
    border-radius:      var(--TF0-border-radius);
}

.TF0-div_B00 {
    height:             var(--TF0-div_B00-height);
    width:              var(--TF0-div_B00-width);
    border-radius:      var( --TF0-border-radius);
    display:            block;
    float: right;
}

.TF0-div_B00.enabled {
    background-color:   #367fd2;
}

.TF0-div_B00.disabled {
    background-color:   #d3e4f7;
}