/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    .todeHead {
        background: rgba(5, 5, 5, 0.6);
        width: 100%;
        height: 60px;
        color: #fff !important;
        padding-top: 10px;
        top: 0;
        padding-bottom: 10px;
        position: fixed;
        z-index: 1003
    }

    .todeHead-Left {
        -ms-flex: 0 0 24% !important;
        flex: 0 0 24% !important;
        max-width: 24% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        text-align: left !important;
    }

        .todeHead-Left > img {
            margin-top: -15px;
            height: 60px;
        }

    .todeHead-Center {
        -ms-flex: 0 0 45% !important;
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding-right: 0 !important;
    }

        .todeHead-Center > h3 {
            font-size: 18px;
        }

    .todeHead_Right {
        -ms-flex: 0 0 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-top: -10px;
    }

        .todeHead_Right > button {
            font-size: 24px;
            color: #fff;
        }

    .todeContent {
        height: 100%;
        top: 60px;
        bottom: 0px;
    }

    .todeContent_Menu {
        -ms-flex: 0 0 9%;
        flex: 0 0 9%;
        max-width: 9%;
        background: #f5f5f5;
        margin-left: -30px;
        /* padding: 5px 15px 5px 5px;*/
        /* height: 800px !important;*/
        position: absolute;
        /*   max-width: 10.8%;*/
        z-index: 1001;
        height: 100% !important;
    }

    .dropdown-menu {
        z-index: 1007;
    }

    #dvToolMenu > div > div {
        padding-left: 0px !important;
    }

    .todeFooter {
        background: #f1f1f1;
        height: 60px;
        width: 100%;
        position: fixed !important;
        bottom: 0;
        z-index: 1002;
    }

    .dropdown-menu {
        width: 280px !important;
    }

    .btnTool > img, .btnToolDdl > img, .btnToolThickness > img, .btnToolColor > img, .btnToolShape > img {
        height: 45px;
        width: 45px;
    }

    .todeFooter-Left {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .todeFooter-Center {
        text-align: center;
        margin-top: 10px;
    }

        .todeFooter-Center > button {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

    #btnFooterNext, #btnFooterPrivous {
        font-size: 40px !important;
        color: #007bff !important;
        margin-top: -15px !important;
    }

    .todeFooter-Right {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        .todeFooter-Right > img {
            height: 50px;
            width: 50px;
            margin-top: 10px;
        }

    .todeMenu-logo {
        height: 80% !important;
    }

    #lblFooterPager {
        padding: 2px 15px 2px 15px;
        color: #fff;
        font-size: 24px;
        background: #007bff;
        margin-top: 5px;
        border-radius: 10px;
    }

    #btnSelectGoPage, #btnTrueAnswer, #btnSolutionVideo {
        margin-top: 5px;
        padding: 5px 10px 5px 10px;
        width: 80%;
        background-color: #007bff;
        color: #fff;
        font-size: 18px;
        border-radius: 10px;
    }

    #dvCanvasContainer {
        -ms-flex: 0 0 91%;
        flex: 0 0 91%;
        max-width: 94%;
        margin-left: 140px;
        text-align: center;
        max-height: 100%;
        z-index: 1000;
    }

    #dvImageContainer > canvas {
        z-index: 1005;
    }

    #dvH {
        height: 120px !important;
    }

    #ddmMenu {
        width: 150px !important;
        height: 250px;
        margin: 5px 0px 0px 50px;
        padding: 0px;
    }
}
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

    .todeHead {
        background: rgba(5, 5, 5, 0.6);
        width: 100%;
        height: 60px;
        color: #fff !important;
        padding-top: 10px;
        top: 0;
        padding-bottom: 10px;
        position: fixed;
        z-index: 1003
    }

    .todeHead-Left {
        -ms-flex: 0 0 24% !important;
        flex: 0 0 24% !important;
        max-width: 24% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        text-align: left !important;
    }

        .todeHead-Left > img {
            margin-top: -15px;
            height: 60px;
        }

    .todeHead-Center {
        -ms-flex: 0 0 45% !important;
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding-right: 0 !important;
    }

        .todeHead-Center > h3 {
            font-size: 18px;
        }

    .todeHead_Right {
        -ms-flex: 0 0 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-top: -10px;
    }

        .todeHead_Right > button {
            font-size: 24px;
            color: #fff;
        }

    .todeContent {
        height: 100%;
        top: 60px;
        bottom: 0px;
    }

    .todeContent_Menu {
        -ms-flex: 0 0 11%;
        flex: 0 0 11%;
        max-width: 11%;
        background: #f5f5f5;
        margin-left: -30px;
        /* padding: 5px 15px 5px 5px;*/
        /*height: 800px !important;*/
        position: absolute;
        /*   max-width: 10.8%;*/
        z-index: 1001;
        height: 100% !important;
    }

    .dropdown-menu {
        z-index: 1007;
    }

    #dvToolMenu > div > div {
        padding-left: 0px !important;
    }

    .todeFooter {
        background: #f1f1f1;
        height: 60px;
        width: 100%;
        position: fixed !important;
        bottom: 0;
        z-index: 1002;
    }

    .dropdown-menu {
        width: 280px !important;
    }

    .btnTool > img, .btnToolDdl > img, .btnToolThickness > img, .btnToolColor > img, .btnToolShape > img {
        height: 40px;
        width: 40px;
    }

    .todeFooter-Left {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .todeFooter-Center {
        text-align: center;
        margin-top: 10px;
    }

        .todeFooter-Center > button {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

    #btnFooterNext, #btnFooterPrivous {
        font-size: 40px !important;
        color: #007bff !important;
        margin-top: -15px !important;
    }

    .todeFooter-Right {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        .todeFooter-Right > img {
            height: 50px;
            width: 50px;
            margin-top: 10px;
        }

    .todeMenu-logo {
        height: 75% !important;
    }

    #lblFooterPager {
        padding: 2px 15px 2px 15px;
        color: #fff;
        font-size: 24px;
        background: #007bff;
        margin-top: 5px;
        border-radius: 10px;
    }

    #btnSelectGoPage, #btnTrueAnswer, #btnSolutionVideo {
        margin-top: 5px;
        padding: 5px 10px 5px 10px;
        width: 85%;
        background-color: #007bff;
        color: #fff;
        font-size: 18px;
        border-radius: 10px;
    }

    #dvCanvasContainer {
        -ms-flex: 0 0 89%;
        flex: 0 0 89%;
        max-width: 94%;
        margin-left: 90px;
        text-align: center;
        max-height: 100%;
        z-index: 1000;
    }

    #dvImageContainer > canvas {
        z-index: 1005;
    }

    #dvH {
        height: 120px !important;
    }

    #ddmMenu {
        width: 150px !important;
        height: 250px;
        margin: 5px 0px 0px 50px;
        padding: 0px;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    .todeHead {
        background: rgba(5, 5, 5, 0.6);
        width: 100%;
        height: 60px;
        color: #fff !important;
        padding-top: 10px;
        top: 0;
        padding-bottom: 10px;
        position: fixed;
        z-index: 1003
    }

    .todeHead-Left {
        -ms-flex: 0 0 24% !important;
        flex: 0 0 24% !important;
        max-width: 24% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        text-align: left !important;
    }

        .todeHead-Left > img {
            margin-top: -15px;
            height: 60px;
        }

    .todeHead-Center {
        -ms-flex: 0 0 45% !important;
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding-right: 0 !important;
    }

        .todeHead-Center > h3 {
            font-size: 18px;
        }

    .todeHead_Right {
        -ms-flex: 0 0 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-top: -10px;
    }

        .todeHead_Right > button {
            font-size: 20px;
            color: #fff;
        }

    .todeContent {
        height: 100%;
        top: 60px;
        bottom: 0px;
    }

    .todeContent_Menu {
        -ms-flex: 0 0 17%;
        flex: 0 0 17%;
        max-width: 17%;
        background: #f5f5f5;
        margin-left: -30px;
        /* padding: 5px 15px 5px 5px;*/
        /*        height: 800px !important;*/
        position: absolute;
        /*   max-width: 10.8%;*/
        z-index: 1001;
        height: 100% !important;
    }

    .dropdown-menu {
        z-index: 1007;
    }

    #dvToolMenu > div > div {
        padding-left: 0px !important;
    }

    .todeFooter {
        background: #f1f1f1;
        height: 60px;
        width: 100%;
        position: fixed !important;
        bottom: 0;
        z-index: 1002;
    }

    .dropdown-menu {
        width: 280px !important;
    }

    .btnTool > img, .btnToolDdl > img, .btnToolThickness > img, .btnToolColor > img, .btnToolShape > img {
        height: 40px;
        width: 40px;
    }

    .todeFooter-Left {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .todeFooter-Center {
        text-align: center;
        margin-top: 10px;
    }

        .todeFooter-Center > button {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

    #btnFooterNext, #btnFooterPrivous {
        font-size: 40px !important;
        color: #007bff !important;
        margin-top: -15px !important;
    }

    .todeFooter-Right {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        .todeFooter-Right > img {
            height: 50px;
            width: 50px;
            margin-top: 10px;
        }

    .todeMenu-logo {
        height: 70% !important;
    }

    #lblFooterPager {
        padding: 2px 15px 2px 15px;
        color: #fff;
        font-size: 24px;
        background: #007bff;
        margin-top: 5px;
        border-radius: 10px;
    }

    #btnSelectGoPage, #btnTrueAnswer, #btnSolutionVideo {
        margin-top: 5px;
        padding: 5px 10px 5px 10px;
        width: 90%;
        background-color: #007bff;
        color: #fff;
        font-size: 18px;
        border-radius: 10px;
    }

    #dvCanvasContainer {
        -ms-flex: 0 0 83%;
        flex: 0 0 83%;
        max-width: 94%;
        margin-left: 90px;
        text-align: center;
        max-height: 100%;
        z-index: 1000;
    }

    #dvImageContainer > canvas {
        z-index: 1005;
    }

    #dvH {
        height: 120px !important;
    }

    #ddmMenu {
        width: 150px !important;
        height: 250px;
        margin: 5px 0px 0px 50px;
        padding: 0px;
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .todeHead {
        background: rgba(5, 5, 5, 0.6);
        width: 100%;
        height: 60px;
        color: #fff !important;
        padding-top: 10px;
        top: 0;
        padding-bottom: 10px;
        position: fixed;
        z-index: 1003
    }

    .todeHead-Left {
        -ms-flex: 0 0 24% !important;
        flex: 0 0 24% !important;
        max-width: 24% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        text-align: left !important;
    }

        .todeHead-Left > img {
            margin-top: -15px;
            height: 60px;
        }

    .todeHead-Center {
        -ms-flex: 0 0 45% !important;
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding-right: 0 !important;
    }

        .todeHead-Center > h3 {
            font-size: 18px;
        }

    .todeHead_Right {
        -ms-flex: 0 0 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-top: -10px;
    }

        .todeHead_Right > button {
            font-size: 20px;
            color: #fff;
        }

    .todeContent {
        height: 100%;
        top: 60px;
        bottom: 0px;
    }

    .todeContent_Menu {
        -ms-flex: 0 0 14%;
        flex: 0 0 14%;
        max-width: 14%;
        background: #f5f5f5;
        margin-left: -30px;
        /* padding: 5px 15px 5px 5px;*/
        /*     height: 800px !important;*/
        position: absolute;
        /*   max-width: 10.8%;*/
        z-index: 1001;
        height: 100% !important;
    }

    .dropdown-menu {
        z-index: 1007;
    }

    #dvToolMenu > div > div {
        padding-left: 0px !important;
    }

    .todeFooter {
        background: #f1f1f1;
        height: 60px;
        width: 100%;
        position: fixed !important;
        bottom: 0;
        z-index: 1002;
    }

    .dropdown-menu {
        width: 280px !important;
    }

    .btnTool > img, .btnToolDdl > img, .btnToolThickness > img, .btnToolColor > img, .btnToolShape > img {
        height: 40px;
        width: 40px;
    }

    .todeFooter-Left {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .todeFooter-Center {
        text-align: center;
        margin-top: 10px;
    }

        .todeFooter-Center > button {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

    #btnFooterNext, #btnFooterPrivous {
        font-size: 40px !important;
        color: #007bff !important;
        margin-top: -15px !important;
    }

    .todeFooter-Right {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        .todeFooter-Right > img {
            height: 50px;
            width: 50px;
            margin-top: 10px;
        }

    .todeMenu-logo {
        height: 70% !important;
    }

    #lblFooterPager {
        padding: 2px 15px 2px 15px;
        color: #fff;
        font-size: 24px;
        background: #007bff;
        margin-top: 5px;
        border-radius: 10px;
    }

    #btnSelectGoPage, #btnTrueAnswer, #btnSolutionVideo {
        margin-top: 5px;
        padding: 5px 10px 5px 10px;
        width: 90%;
        background-color: #007bff;
        color: #fff;
        font-size: 18px;
        border-radius: 10px;
    }

    #dvCanvasContainer {
        -ms-flex: 0 0 86%;
        flex: 0 0 86%;
        max-width: 94%;
        margin-left: 90px;
        text-align: center;
        max-height: 100%;
        z-index: 1000;
    }

    #dvImageContainer > canvas {
        z-index: 1005;
    }

    #dvH {
        height: 120px !important;
    }

    #ddmMenu {
        width: 150px !important;
        height: 250px;
        margin: 5px 0px 0px 50px;
        padding: 0px;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
    .todeHead {
        background: rgba(5, 5, 5, 0.6);
        width: 100%;
        height: 40px;
        color: #fff !important;
        padding-top: 10px;
        top: 0;
        padding-bottom: 10px;
        position: fixed;
        z-index: 1003
    }

    .todeHead-Left {
        -ms-flex: 0 0 24% !important;
        flex: 0 0 24% !important;
        max-width: 24% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        .todeHead-Left > img {
            margin-top: -15px;
            height: 40px;
        }

    .todeHead-Center {
        -ms-flex: 0 0 45% !important;
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding-right: 0 !important;
    }

        .todeHead-Center > h3 {
            font-size: 16px;
        }

    .todeHead_Right {
        -ms-flex: 0 0 30% !important;
        flex: 0 0 30% !important;
        max-width: 30% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-top: -10px;
    }

        .todeHead_Right > button {
            font-size: 18px;
            color: #fff;
        }

    .todeContent {
        height: 100%;
        top: 40px;
        bottom: 0px;
    }

    .todeContent_Menu {
        -ms-flex: 0 0 17%;
        flex: 0 0 17%;
        max-width: 17%;
        background: #f5f5f5;
        margin-left: -30px;
        /* padding: 5px 15px 5px 5px;*/
        /*  height: 720px !important;*/
        position: absolute;
        /*   max-width: 10.8%;*/
        z-index: 1001;
        height: 100% !important;
    }

    .dropdown-menu {
        z-index: 1007;
    }

    #dvToolMenu > div > div {
        padding-left: 0px !important;
    }

    .todeFooter {
        background: #f1f1f1;
        height: 60px;
        width: 100%;
        position: fixed !important;
        bottom: 0;
        z-index: 1002;
    }

    .dropdown-menu {
        width: 230px !important;
    }

    .btnTool > img, .btnToolDdl > img, .btnToolThickness > img, .btnToolColor > img, .btnToolShape > img {
        height: 40px;
        width: 40px;
    }

    .todeFooter-Left {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .todeFooter-Center {
        text-align: center;
        margin-top: 10px;
    }

        .todeFooter-Center > button {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

    .todeFooter-Right {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        .todeFooter-Right > img {
            height: 40px;
            width: 40px;
            margin-top: 10px;
        }

    .todeMenu-logo {
        height: 60% !important;
    }

    #lblFooterPager {
        padding: 2px 10px 2px 10px;
        color: #fff;
        font-size: 18px;
        background: #007bff;
        margin-top: 5px;
        border-radius: 10px;
    }

    #btnSelectGoPage, #btnTrueAnswer, #btnSolutionVideo {
        margin-top: 5px;
        padding: 5px 5px 5px 5px;
        width: 95%;
        background-color: #007bff;
        color: #fff;
        font-size: 18px;
        border-radius: 10px;
    }

    #dvCanvasContainer {
        -ms-flex: 0 0 83%;
        flex: 0 0 83%;
        max-width: 94%;
        margin-left: 90px;
        text-align: center;
        max-height: 100%;
        z-index: 1000;
    }

    #dvImageContainer > canvas {
        z-index: 1005;
    }

    #dvH {
        height: 120px !important;
    }

    #ddmMenu {
        width: 150px !important;
        height: 250px;
        margin: 5px 0px 0px 50px;
        padding: 0px;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    .todeHead {
        background: rgba(5, 5, 5, 0.6);
        width: 100%;
        height: 40px;
        color: #fff !important;
        padding-top: 10px;
        top: 0;
        padding-bottom: 10px;
        position: fixed;
        z-index: 1003
    }

    .todeHead-Left {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        .todeHead-Left > img {
            margin-top: -15px;
            height: 40px;
        }

    .todeHead-Center {
        padding-right: 0 !important;
    }

        .todeHead-Center > h3 {
            font-size: 14px;
        }

    .todeHead_Right {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-top: -10px;
    }

        .todeHead_Right > button {
            font-size: 16px;
            color: #fff;
        }

    .todeContent {
        height: 100%;
        top: 40px;
        bottom: 0px;
    }

    .todeContent_Menu {
        background: #f5f5f5;
        margin-left: -30px;
        /* padding: 5px 15px 5px 5px;*/
        position: absolute;
        /*   max-width: 10.8%;*/
        z-index: 1001;
        height: 100% !important;
    }

    #dvToolMenu > div > div {
        padding-left: 0px !important;
    }

    .todeFooter {
        background: #f1f1f1;
        height: 60px;
        width: 100%;
        position: fixed !important;
        bottom: 0;
        z-index: 1002;
    }

    .btnTool > img, .btnToolDdl > img, .btnToolThickness > img, .btnToolColor > img, .btnToolShape > img {
        height: 40px;
        width: 40px;
    }

    .todeFooter-Left {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .todeFooter-Center {
        margin-top: 10px;
    }

        .todeFooter-Center > button {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

    .todeFooter-Right {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        .todeFooter-Right > img {
            height: 40px;
            width: 40px;
            margin-top: 10px;
        }

    .todeMenu-logo {
        height: 60% !important;
    }


    #lblFooterPager {
        padding: 2px 10px 2px 10px;
        color: #fff;
        font-size: 18px;
        background: #007bff;
        margin-top: 5px;
        border-radius: 10px;
    }

    #btnSelectGoPage, #btnTrueAnswer, #btnSolutionVideo {
        margin-top: 5px;
        padding: 5px 5px 5px 5px;
        width: 95%;
        background-color: #007bff;
        color: #fff;
        font-size: 18px;
        border-radius: 10px;
    }

    #dvCanvasContainer {
        margin-left: 80px !important;
        text-align: center;
        max-height: 100%;
        z-index: 1000;
    }

    .dropdown-menu {
        width: 230px !important;
    }

    #dvH {
        height: 120px !important;
    }

    #ddmMenu {
        width: 150px !important;
        height: 250px;
        margin: 5px 0px 0px 50px;
        padding: 0px;
    }
}