/* @media screen and (orientation: portrait) {

    main {

        display: none;

    }



    .modal-backdrop {

        background-color: whitesmoke;

    }



    .rotation {

        position: fixed;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

        font-weight: bold;

        color: navy;

    }



    button {

        display: none;

    }



    .loader-wrapper {

        display: none;

    }



    .bundle {

        display: none;

    }



    .sain_alertmessage_content {

        display: none;

    }



    .container1 {

        display: flex;

        justify-content: center;

        align-items: center;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .container1>img {

        width: 50%;

        height: 50%;

        

    }



    .container2 {

        display: flex;

        justify-content: center;

        align-items: center;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .container2>img {

        width: 50%;

        height: 50%;



    }



} */



/* @media screen and (orientation: landscape) { */



    #expiry{

        display: none;

        position: absolute;

        color: black;

        width: 100%;

        height: 100%;

        z-index: 1000;

        background: beige;

    }



    .cabinStoryImage {

        position: relative;

    }



    .cabinStoryImage img {

        width: 100%;

        border-radius: 15px;

    }



    .cabinStoryImage>button>#close {

        position: absolute;

        top: 5px;

        right: 10px;

        color: black;

    }



    .modal {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        height: 100%;

        overflow: auto;

        background-color: rgb(0, 0, 0);

        background-color: rgba(0, 0, 0, 0.1);

    }



    #close {

        font-size: 50px;

    }





    /* Loading screen */



    main {

        display: block;

    }



    button {

        display: block;

    }



    .container1 {

        display: flex;

        justify-content: center;

        align-items: center;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .container1>img {

        width: 50%;

        height: 50%;



    }



    .container2 {

        display: flex;

        justify-content: center;

        align-items: center;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .container2>img {

        width: 50%;

        height: 50%;



    }



    #but {

        width: 200px;

        cursor: pointer;

        border-radius: 20px;

        height: 40px;

        background-color: yellow;

        font-size: medium;

        outline: none;

        border: none;

        font-family: sans-serif;

    }



    .loader-wrapper {

        width: 100%;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

        background-color: #242f3f;

        display: flex;

        justify-content: center;

        /* align-items: center; */

        color: white;

        font-size: 3em;

    }



    .rotation {

        display: none;

    }



    html,

    body {

        margin: 0px;

        font-family: "Lato", sans-serif;

        overflow: hidden;

    }



    .top-block {

        position: absolute;

    }



    .menu-left {

        color: white;

        width: 80px;

        display: flex;

        flex-direction: column;

        align-items: center;

        position: fixed;

        height: 100%;

    }



    .setting-icon {

        background-color: #0000005c;

        border-radius: 50%;

        padding: 5px;

        display: flex;

        justify-content: center;

        align-items: center;

        margin-bottom: 15px;

    }



    .setting-block {

        display: flex;

        flex-direction: column;

        background-color: #0000005c;

        justify-content: space-around;

        align-items: center;

        position: absolute;

        top: 0;

        transition: 0.5s;

        /* overflow: hidden; */

    }



    .setting-comment {

        display: flex;

        justify-content: center;

        position: relative;

    }



    .setting-comment>span {

        font-weight: bold;

        color: black;

        font-size: x-large;

        position: absolute;

        top: 0px;

    }



    .setting-cc {

        width: 40px;

        height: 40px;

        display: flex;

        justify-content: center;

        align-items: center;

        background-color: #0000005c;

        color: white;

        border-radius: 50%;

        font-weight: 900;

        cursor: pointer;

    }



    .setting_caption.active {

        color: #ffff00 !important;

    }



    .menu-right {

        right: 0;

        bottom: 0;

        width: 80px;

        justify-content: flex-start;

        color: white;

        transition: 0.5s;

        /* overflow: hidden; */

    }



    .menu-right>div {

        margin-bottom: 125px;

    }



    .img-icon img {

        width: 40px;



    }



    .img-icon-step svg,

    .img-icon svg {

        width: 40px;

        height: 40px;

    }



    .img-icon-step.active svg #Group_575 path,

    .img-icon-inven.active svg path {

        fill: #FFFF00;

    }



    /* .bottom-icon {

    position: absolute;

    bottom: 20px;

    width: 100%;

    text-align: center;

} */



    .bottom-icon img {

        width: 200px;

    }



    .bottom-block {

        position: absolute;

        bottom: 5px;

        z-index: 101;

    }



    .bottom-block>div {

        margin-bottom: 15px;

    }



    .control-left {

        height: 100%;

        padding-left: 10px;

        /* overflow: hidden; */

    }



    .back-arrow {

        color: white;

        padding-top: 15px;

        padding-bottom: 15px;

        padding-left: 10px

    }



    .control-right {

        position: absolute;

        right: 10px;

        top: 60px;

    }



    .width0 {

        width: 0;

    }



    .menu-left.width0 {

        left: -30px

    }



    .menu-right.width0 {

        right: -30px

    }



    #close-menu-right {

        margin-top: 25px;

    }



    #threejscanvas {

        width: 100%;

        height: 100%;

        position: absolute;

        display: block;

    }



    #next-button {

        position: absolute;

        top: 40px;

        left: 100px;

        z-index: 99;

        padding: 10px;

        border: 1px solid #ccc;

        display: none;

        color: white;

    }



    #next-button:hover {

        opacity: 0.8;

    }



    #start-animation-button {

        position: absolute;

        bottom: 40px;

        left: 50%;

        z-index: 99;

        display: block;

        transform: translateX(-50%);

    }



    #back-button {

        position: absolute;

        top: 120px;

        left: 20px;

        z-index: 99;

        /* display: none; */

        font-size: 18px;

        background: white;

    }



    #ARButton {

        position: absolute !important;

        bottom: 40px !important;

        right: 10px !important;

        left: unset !important;

        z-index: 99 !important;

    }



    .modal-dialog {

        margin-top: 5%;

    }



    .modal-content {

        background-color: rgba(0, 0, 0, 0.8);

        box-shadow: none;

    }



    .modal-content .modal-header {

        color: #FFFF00;

        font-size: 26px;

        border-bottom: none;

    }



    .modal-content .modal-body {

        padding: 0px 15px;

    }



    .modal-content .modal-body p {

        color: #ffffff;

        font-size: 18px;

        text-align: justify;

    }



    .close {

        color: #ffffff;

        opacity: 0.7;

    }



    button.close:focus,

    button.close:hover {

        color: #FFFF00;

        opacity: 1;

    }



    select.form-control {

        background-color: rgba(0, 0, 0, 0.5);

        color: rgba(255, 255, 255, 0.5);

        font-size: 16px;

        text-transform: uppercase;

        height: 50px;

        border: none;

    }



    select option {

        background-color: rgba(255, 255, 255, 1);

        color: rgba(0, 0, 0);

        padding: 10px;

        border-bottom: 1px solid #000000;

    }



    /* select option:hover, select option:focus, select option:active, select option:visited{

	background-color: #FFFF00;

} */



    select.form-control:focus {

        box-shadow: none;

        border: none;

    }



    select {

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

    }



    select::-ms-expand {

        display: none;

    }



    .form-control {

        background: url(../assets/icons/down-arrow.svg) calc(100% - 15px)/20px no-repeat;

        padding: 0px 10px;

    }



    #modechangermodal .modal-content .modal-body,

    #indiveriablemodal .modal-content .modal-body {

        padding-bottom: 50px;

    }



    .dropdown_header {

        padding: 10px 20px;

        background-color: rgba(0, 0, 0, 0.5);

        display: flex;

        justify-content: space-between;

        border-radius: 4px;

        align-items: center;

    }



    .dropdown_header span {

        color: rgba(255, 255, 255, 0.5);

        font-size: 16px;

        text-transform: uppercase;

    }



    .dropdown_header .arrow {

        color: #FFFF00;

    }



    .modal_label {

        color: rgba(255, 255, 255, 1);

        font-size: 16px;

        font-weight: 400;

    }



    .dropdown-menu {

        width: 100%;

    }



    .dropdown-menu>li>a {

        padding: 0px;

    }



    .dropdown-menu>li {

        display: flex;

        justify-content: space-between;

        padding: 10px 15px;

    }



    #indiveriablemodal .modal-content .modal-body .dropdown:first-child {

        margin-bottom: 20px;

    }



    .card_content {

        padding: 15px 15px;

        background-color: rgba(0, 0, 0, 0.5);

        display: flex;

        justify-content: space-between;

        border-radius: 4px;

        align-items: center;

        margin-bottom: 10px;

    }



    .card_content span {

        color: rgba(255, 255, 255, 0.5);

        font-size: 16px;

        margin-left: 10px;

    }



    .imgblabel {

        justify-content: center;

        align-items: center;

        display: flex

    }



    .imgblabel img {

        width: 25px;

    }



    .card_content .img-icon img {

        width: 25px;

    }



    .sain_accordion {

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.3);

        position: absolute;

        top: 0px;

        display: none;

    }



    .sain_accordion_close {

        display: flex;

        justify-content: flex-end;

        padding: 15px 95px 0px;

    }



    .sain_accordion_close_img .close {

        color: #FFFF00;

    }



    .sain_accordion_content {

        display: flex;

        justify-content: flex-end;

        padding-right: 85px;

    }



    .sain_accordion_content .panel-group {

        width: 390px;

    }



    .sain_accordion_content .panel-default {

        border-color: transparent;

        background-color: rgba(0, 0, 0, 0.8);

    }



    .sain_accordion_content .panel-default>.panel-heading {

        color: #FFFF00;

        background-color: rgba(0, 0, 0, 0.5);

        border-color: transparent;

        padding: 15px;

    }



    .sain_accordion_content .panel-default>.panel-heading+.panel-collapse>.panel-body {

        border-top-color: transparent;

    }



    .sain_accordion_content .panel-default>.panel-heading>.panel-title {

        font-size: 18px;

    }



    .sain_accordion_content .panel-default>.panel-heading>.panel-title>a {

        width: 100%;

        display: flex;

        justify-content: space-between;

        align-items: center;

    }



    .sain_accordion_content .panel-default>.panel-heading>.panel-title>a>.sain_down_arrow_icon img {

        width: 20px;

        transition: 0.3s;

    }



    .sain_accordion_content .panel-default>.panel-heading>.panel-title>a.collapsed>.sain_down_arrow_icon img {

        transform: rotate(180deg);

        transition: 0.3s;

    }



    a:focus,

    a:hover,

    a:active,

    a:visited {

        text-decoration: none;

    }



    .sain_accordion_content .panel-default>.panel-heading+.panel-collapse>.panel-body .table {

        color: rgba(255, 255, 255, 0.5);

    }



    .sain_accordion_content .panel-default>.panel-heading+.panel-collapse>.panel-body .table td {

        text-align: center;

        color: rgba(255, 255, 255, 0.5);

        font-size: 16px;

    }



    .sain_accordion_content .panel-default>.panel-heading+.panel-collapse>.panel-body .img_graph {

        width: 100%;

        position: absolute;

        top: 0px;

        left: -3px;

        bottom: 0;

        right: 0px;

        height: 100%;

        border: none;

    }



    .sain_accordion_content .panel-default.iframe_graph>.panel-heading+.panel-collapse>.panel-body {

        position: relative;

        width: 100%;

        overflow: hidden;

        padding-top: 54%;

    }



    .sain_accordion_content .panel-default.iframe_graph {

        position: relative;

        overflow: hidden;

    }





    /*Step method*/



    .sain_steps {

        width: 92%;

        display: none;

        position: absolute;

        bottom: 14px;

        left: 60px;

    }



    .sain_cc {

        display: none;

        position: absolute;

        background-color: rgba(0, 0, 0, 0.3);

        /* top: 5px; */

        bottom: 22px;

        padding: 5px 11px;

        z-index: 99;

        text-align: center;

        border-radius: 50px;

        left: 60px;

        /* left:50%; */

        /* transform:translateX(-50%); */

    }



    .sain_cc .sain_cc_text {

        color: #ffff00;

        font-size: 18px;

        margin: 0;

    }



    .wraper {

        padding: 20px 20px 10px;

        text-align: center;

        font-family: sans-serif;

        width: 100%;

        margin: 10px auto;

        background-color: rgba(0, 0, 0, 0.3);

        border-radius: 25px;

        margin: 10px auto;

    }



    .step_container {

        border-top: 2px solid #ffffff;

        display: flex;

        list-style: none;

        padding: 0;

        justify-content: space-between;

        align-items: stretch;

        align-content: stretch;

    }



    .step_container .link {

        position: relative;

        margin-top: -6px;

        width: 100%;

        cursor: pointer;

    }



    .step_container .link a {

        font-weight: bold;

        text-decoration: none;

        color: black;

        text-transform: uppercase;

        font-size: 15px;

    }





    /* .step_container .link:first-child {

  margin-left: -55px;

}



.step_container .link:last-child {

  margin-right: -55px;

} */



    .step_container .link::after {

        content: "";

        width: 10px;

        height: 10px;

        background: #fff;

        position: absolute;

        border-radius: 10px;

        top: 0px;

        left: 50%;

        transform: translatex(-50%);

        border: 2px solid #ffffff;

    }



    .step_container .active::after,

    .step_container .link:hover::after {

        background: #000000;

        border: 2px solid #000000;

    }





    /* [class^="step_"]:before,

[class*=" step_"]:before {

  font-family: FontAwesome;

  font-weight: normal;

  font-style: normal;

  display: inline-block;

  text-decoration: inherit;

} */



    .support {

        position: relative;

    }



    .step_container::before {

        content: "\f0d9";

        font-family: "Font Awesome 5 Free";

        color: #ffffff;

        font-weight: 900;

        font-size: 20px;

        left: -5px;

        position: absolute;

        top: -13px;

    }



    .step_container::after {

        content: "\f0da";

        font-family: "Font Awesome 5 Free";

        font-weight: 900;

        font-size: 20px;

        position: absolute;

        color: #ffffff;

        right: -5px;

        top: -13px;

    }



    .sain_alertmessage {

        position: absolute;

        top: 80px;

        left: 50%;

        transform: translatex(-50%)

    }



    .sain_alertmessage_content {

        background-color: rgba(0, 0, 0, 0.3);

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 15px;

        border-radius: 50px;

    }



    .sain_ico_text {

        display: flex;

        align-items: center;

    }



    .sain_alerttext {

        padding: 0px 50px 0px 10px;

        color: #ffffff;

        font-size: 16px;

    }



    .sain_alertmessage_content .warning {

        color: #FFFF00;

    }



    .sain_alertmessage_content .close {

        font-size: 18px;

    }



    .sain_alertmessage_content .close:hover {

        color: #FFFF00;

        opacity: 1;

    }



    #sain_alertmessage {

        display: none;

    }



    #sain_inventory {

        display: none;

    }



    .sain_inventory {

        position: absolute;

        bottom: 75px;

        left: 60px;

        background-color: rgba(0, 0, 0, 0.5);

        /* width: 100%; */

        padding: 5px 10px;

        z-index: 100;

        border-radius: 25px;

    }



    .sain_inventory .sain_inventory_head {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }



    .sain_inventory_head .sain_inventory_headtxt {

        color: #FFFF00;

        font-size: 18px;

        padding-left: 50px;

    }



    .splide__arrow:hover svg {

        fill: #FFFF00 !important;

    }



    .splide__arrow svg {

        fill: #FFFFFF !important;

    }



    .splide__slide img {

        width: 40px;

        height: 40px;

    }



    .slide_txt {

        text-align: center;

        color: #ffffff;

    }



    .splide {

        padding: 0em 0em 0em 0.5em !important;

    }



    .sain_lock img,

    .sain_tool_selected img {

        opacity: 0.3 !important;

    }



    .sain_lock::after {

        content: "\f023";

        font-family: "Font Awesome 5 Free";

        font-weight: 900;

        font-size: 16px;

        position: absolute;

        color: #00ff08;

        right: 25px;

        top: 9px;

    }



    .sain_tool_selected::after {

        content: "\f00c";

        font-family: "Font Awesome 5 Free";

        font-weight: 900;

        font-size: 16px;

        position: absolute;

        color: #00ff08;

        right: 22px;

        top: 9px;

    }



    #sain_Complete {

        display: none;

    }



    .continue {

        left: 178px;

        position: absolute;

        top: 419px;

        background-color: transparent;

        border: 0;

        padding: 25px 77px;

        border-radius: 25px;

    }



    .sain_Complete {

        margin: 0;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    #highlighted-mesh {

        text-transform: uppercase;

        color: yellow;

        position: absolute;

        top: 10px;

        left: 45%;

    }



    #worldspacelabels {

        position: absolute;

        /* let us position ourself inside the container */

        left: 0;

        /* make our position the top left of the container */

        top: 0;

        color: white;

    }



    #worldspacelabels>div {

        position: absolute;

        /* let us position them inside the container */

        left: 0;

        /* make their default position the top left of the container */

        top: 0;

        cursor: pointer;

        /* change the cursor to a hand when over us */

        font-size: large;

        user-select: none;

        /* don't let the text get selected */

        text-shadow:

            /* create a black outline */

            -1px -1px 0 #000,

            0 -1px 0 #000,

            1px -1px 0 #000,

            1px 0 0 #000,

            1px 1px 0 #000,

            0 1px 0 #000,

            -1px 1px 0 #000,

            -1px 0 0 #000;

    }



    #worldspacelabels>div:hover {

        color: red;

    }



    #sain_taimer {

        position: absolute;

        top: 10px;

        left: 85px;

    }



    .base-timer {

        position: relative;

        width: 150px;

        height: 150px;

    }



    .base-timer__svg {

        transform: scaleX(-1);

    }



    .base-timer__circle {

        fill: none;

        stroke: none;

    }



    .base-timer__path-elapsed {

        stroke-width: 7px;

        stroke: grey;

    }



    .base-timer__path-remaining {

        stroke-width: 7px;

        stroke-linecap: round;

        transform: rotate(90deg);

        transform-origin: center;

        transition: 1s linear all;

        fill-rule: nonzero;

        stroke: currentColor;

    }



    .base-timer__path-remaining.green {

        color: rgb(244, 244, 58);

    }



    .base-timer__path-remaining.orange {

        color: rgb(244, 244, 58);

    }



    .base-timer__path-remaining.red {

        color: rgb(244, 244, 58);

    }



    .base-timer__label {

        position: absolute;

        width: 150px;

        height: 150px;

        top: 5px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 38px;

        color: white;

    }



    .base-timer__label:before {

        content: "Wait for";

        position: absolute;

        top: 28px;

        display: flex;

        justify-content: center;

        font-size: 18px;

        font-weight: 600;

        color: white;

    }



    .Hint {

        color: #ffff00;

        font-size: 18px;

        background-color: rgba(0, 0, 0, 0.3);

        padding: 5px 11px;

        z-index: 99;

        text-align: center;

        border-radius: 50px;

        display: flex;

        position: absolute;

        left: 50%;

        transform: translateY(-50%) translateX(-50%);

        margin-top: 30px;

        display: none;

    }



    .Formula {

        color: #ffff00;

        font-size: 18px;

        background-color: rgba(0, 0, 0, 0.3);

        padding: 5px 11px;

        z-index: 99;

        text-align: center;

        border-radius: 20px;

        display: flex;

        position: absolute;

        left: 50%;

        transform: translateY(-50%) translateX(-50%);

        margin-top: 30px;

        display: none;

    }



    .bundle {

        position: absolute;

        top: 70px;

        left: -30px;

    }



    .sain_alertmessage {

        padding-top: 5px;

    }



    @media only screen and (max-width: 800px) {

        .sain_steps {

            width: 87%;

        }

    }



    .sain_timer {

        display: none;

    }



    .sain_alertmessage {

        padding-top: 5px;

    }



    .container1 {

        display: flex;

        justify-content: center;

        align-items: center;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .container1>img {

        width: 50%;

        height: 50%;



    }



    .container2 {

        display: flex;

        justify-content: center;

        align-items: center;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .container2>img {

        width: 50%;

        height: 50%;

    }  

    

    #resetBtn{

        position: absolute;

        right: 40px;

        bottom: 40px;        

    }



    #textPanel{    

        opacity: 90%;

        font-size: 12px;

        border-color: #313131;

        position: absolute;

        width: 350px;

        left: 30px;

        top: 30px;

    }



    #videoPlayer{

        right:40px;  

        border-color: #313131;     

        position: absolute;

        width: 400px;

        height: 320px;

        visibility: hidden;

    }

/* } */